ForRo/public/assets/css/global/frame.css
ro bce9a430aa Appeal Process upgrade
Changed the appeal process so that each request is tracked in the
database to make reviewing and time limits easier to manage.

An email is still sent but it's just a notifcation to let the admin know
an appeal has been filed.
2024-02-08 14:37:34 -06:00

255 lines
3.7 KiB
CSS

html {
width: 100%;
height: 100%;
overflow: hidden;
font: 400 1.6em/1.3em var(--base-type);
}
html body {
background: var(--primary);
color: var(--white);
margin: 0;
padding: 0;
height: 100%;
width: 100%;
overflow-y: scroll;
overflow-x: hidden;
}
a {
color: var(--highlight);
text-decoration: none;
transition: all 0.2s linear;
/*
border-bottom: 1px solid var(--white);
*/
}
strong {
color: var(--secondary);
}
header {
width: 100%;
color: var(--primary);
background: var(--secondary);
}
header > div:nth-child(1) {
display: grid;
grid-template-columns: 200px 1fr 40px;
padding: 10px;
gap: 10px;
height: 200px;
width: 80%;
margin: 0 auto;
max-width: 1000px;
position: relative;
}
header > div span {
font-size: 3em;
font-weight: bold;
position: absolute;
bottom: 25px;
width: 50%;
line-height: 0.8em;
}
header > div img {
width: 100%;
}
header > div a {
color: var(--primary);
}
header > div i {
font-size: 1.3em;
}
header > div nav {
background: var(--black);
position: relative;
}
.header-right {
text-align: right;
}
div.system-notice-error {
background: var(--error);
color: var(--white);
padding: 10px;
}
div.system-notice-message {
background: var(--highlight);
color: var(--black);
padding: 10px;
}
main > section > article {
width: 80%;
max-width: 1000px;
margin: 0 auto;
min-height: 400px;
}
textarea[name="appeal_description"] {
width: 300px;
height: 200px;
}
/* NAV */
#main-nav {
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: var(--black);
z-index: 1;
display: flex;
align-items: center;
justify-content: center;
}
label[for="element-toggle"] {
cursor: pointer;
}
#element-toggle {
display: none;
}
#element-toggle:not(:checked) ~ #main-nav {
display: none;
}
a.nav-links {
border-bottom: none;
font-size: 40px;
color: var(--highlight);
text-decoration: none;
}
/* GLOBALS */
a:hover {
/*
border-bottom: 1px solid var(--secondary);
*/
color: var(--white);
}
pre {
white-space: pre;
background: var(--secondary);
}
code {
background: var(--secondary);
color: var(--primary);
padding: 3px;
}
sup {
background: var(--black);
color: var(--white);
padding: 2px;
border-radius: 3px;
vertical-align: baseline;
font-family: var(--mono-type);
}
.button-icon {
height: 90%;
padding-top: 3px;
}
.menu-icon {
width: 40px;
}
.location-title {
display: none;
}
.location-image {
height: 200px;
width: 200px;
display: inline-block;
border-radius: 3px;
}
footer {
width: 100%;
color: var(--primary);
background: var(--secondary);
height: 200px;
margin-top: 50px;
}
footer > div:nth-child(1) {
display: grid;
grid-template-columns: 50% 50%;
padding: 10px;
gap: 10px;
height: 200px;
width: 80%;
margin: 0 auto;
max-width: 1000px;
position: relative;
}
/*
responsive
*/
@media only screen and (max-width: 960px) {
header > div nav {
bottom: 17px;
}
}
@media only screen and (max-width: 960px) {
header > div:nth-child(1) {
grid-template-columns: 150px 65% 1fr;
height: 150px;
}
header > div nav {
bottom: 17px;
}
}
@media only screen and (max-width: 650px) {
header > div:nth-child(1) {
grid-template-columns: 150px 65% 1fr;
grid-template-rows: 75% 1fr;
height: auto;
gap: 15px;
}
header > div > div.header-left {
grid-row: 1/2;
position: relative;
width: 100px;
}
header > div > div.header-center {
grid-row: 2/3;
grid-column: 1/4;
position: relative;
}
}
@media only screen and (max-width: 440px) {
header > div:nth-child(1) {
grid-template-columns: 150px 40% 1fr;
}
}