1b89d1d072
Rebuilt the css for the Settings UI, which also led to some changed in the FilesAPI so it knows what to do with specific targets. There's still some additional styling needed to polish it, but the core structure is in place so now it can just be tweaked. The controller for this page was adjusted as needed. Also moved the settings sub nav convtrols to the header menu since it's sticky now.
147 lines
2.3 KiB
CSS
147 lines
2.3 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;
|
|
}
|
|
|
|
sup {
|
|
background: var(--black);
|
|
color: var(--white);
|
|
padding: 3px;
|
|
border-radius: 3px;
|
|
}
|
|
|
|
#notifications {
|
|
display: none;
|
|
visibility: hidden;
|
|
}
|
|
|
|
pre,
|
|
code {
|
|
background: var(--black);
|
|
color: var(--highlight);
|
|
border-radius: 3px;
|
|
padding: 3px;
|
|
}
|
|
|
|
svg[role="icon"] {
|
|
fill: var(--white);
|
|
width: 25px;
|
|
height: 25px;
|
|
padding-top: 5px;
|
|
}
|
|
|
|
/* HEADER
|
|
Navigation
|
|
Notificiations
|
|
*/
|
|
|
|
header {
|
|
width: 100%;
|
|
max-width: 900px;
|
|
margin: 10px auto;
|
|
background: var(--white);
|
|
height: 50px;
|
|
border-radius: 5px;
|
|
left: 50%;
|
|
transform: translate(-50%, 0);
|
|
position: fixed;
|
|
z-index: 500;
|
|
box-shadow: 2px 2px 0 rgba(var(--primary-rgb) / 30%);
|
|
}
|
|
|
|
header > nav {
|
|
display: grid;
|
|
grid-template-columns: 50px 1fr auto;
|
|
}
|
|
|
|
header > nav > div[role="nav-left"] img {
|
|
width: 40px;
|
|
padding: 5px;
|
|
}
|
|
|
|
header > nav > div[role="nav-right"] {
|
|
padding: 5px;
|
|
}
|
|
|
|
header > nav > div[role="nav-right"] button {
|
|
width: 40px;
|
|
height: 40px;
|
|
margin-left: 5px;
|
|
}
|
|
|
|
header > nav > div[role="nav-right"] div[role="submenu"] {
|
|
display: inline;
|
|
}
|
|
|
|
header > nav > div[role="nav-right"] div[role="submenu"] button {
|
|
background: var(--primary);
|
|
color: var(--white);
|
|
font-size: 0.8em;
|
|
}
|
|
|
|
header
|
|
> nav
|
|
> div[role="nav-right"]
|
|
div[role="submenu"]
|
|
button[data-render="true"] {
|
|
background: var(--tertiary);
|
|
color: var(--primary);
|
|
}
|
|
|
|
section[role="login"] {
|
|
margin: 15% auto;
|
|
padding: 10px;
|
|
width: 500px;
|
|
border-radius: 5px;
|
|
background: var(--white);
|
|
display: grid;
|
|
grid-template-columns: 28.5% 1fr;
|
|
gap: 10px;
|
|
}
|
|
|
|
section[role="login"] form input {
|
|
width: 95%;
|
|
height: 30px;
|
|
padding: 5px;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
section[role="login"] form button {
|
|
padding: 10px 5px;
|
|
width: 82%;
|
|
}
|
|
|
|
section[role="login"] form a {
|
|
padding: 10px 5px;
|
|
border-radius: 5px;
|
|
width: 10%;
|
|
height: 20px;
|
|
display: inline-block;
|
|
background: var(--tertiary);
|
|
vertical-align: top;
|
|
text-align: center;
|
|
margin: 0 0 0 10px;
|
|
font-weight: 600;
|
|
}
|