fipamo/public/assets/css/dash/frame.css
ro e09d85292a
added labels to forms (#102), init templates added
added some labels to login and set up forms for better accesibility and
clarity about what info is being requested.

found a bug in setting where the site would error out if it can't find
the correct config files instead of going to set up, so when config
files aren't present, it loads template files to continue to process.
still thinking about a better fix for this

also discovered that the init files needed for a fresh install had been
removed, so those are back in place
2024-05-08 15:55:27 -06:00

169 lines
2.5 KiB
CSS

html {
width: 100%;
height: 100%;
overflow: hidden;
font: 400 1.2em/1.4em var(--base-type);
}
html body {
background: var(--primary);
margin: 0;
padding: 0;
height: 100%;
width: 100%;
overflow-y: scroll;
overflow-x: hidden;
}
/* GLOBALS */
a {
color: var(--primary);
text-decoration: none;
border-bottom: 0;
transition: all 0.2s linear;
}
a.secondary {
color: var(--secondary);
text-decoration: none;
border-bottom: 0;
transition: all 0.2s linear;
}
a.main-nav-primary {
height: 24px;
background: var(--primary);
display: inline-block;
vertical-align: top;
border-radius: 3px;
padding: 8px 0;
width: 40px;
text-align: center;
}
a.main-nav-secondary-highlight {
height: 24px;
background: var(--secondary-highlight);
display: inline-block;
vertical-align: top;
border-radius: 3px;
padding: 8px 0;
width: 40px;
text-align: center;
}
img.logo-medium {
width: 130px;
}
sup {
background: var(--black);
color: var(--white);
padding: 3px;
border-radius: 3px;
}
::selection {
background: var(--secondary-highlight);
color: var(--white);
}
#notifications {
display: none;
visibility: hidden;
}
pre,
code {
background: var(--black);
color: var(--secondary-highlight);
border-radius: 3px;
padding: 3px;
}
/* HEADER
Navigation
Notificiations
*/
header {
width: 100%;
max-width: 900px;
margin: 10px auto;
height: 50px;
border-radius: 5px;
left: 50%;
transform: translate(-50%, 0);
position: fixed;
z-index: 500;
}
header > nav > a img {
width: 40px;
padding: 5px;
}
header > nav > h1 {
text-align: left;
height: 100%;
}
header > nav > h1 {
color: var(--primary);
margin: 15px;
}
header > nav > div.nav-right {
padding: 5px;
}
header > nav > div > div.mobile-menu {
display: none;
position: fixed;
z-index: 1000;
left: 0;
transition: all 0.2s linear;
background: var(--white);
}
header > nav > div.nav-right button {
width: 40px;
height: 40px;
margin-left: 5px;
font-size: 0.8em;
color: var(--white);
}
header > nav > div.nav-right > button.menu-toggle {
display: none;
}
header > nav > div.nav-right div.submenu {
display: inline;
}
header > nav > div.nav-right div.submenu button {
background: var(--primary);
color: var(--white);
font-size: 0.8em;
}
/* RESPONSIVE */
@media only screen and (max-width: 900px) {
header {
width: 97%;
}
}
@media only screen and (max-width: 530px) {
header > nav > div.nav-right > button.menu-toggle {
display: inline;
}
header > nav > div > div.menu {
display: none;
}
}