97278e3a90
Integrated the Notifications UI component into the header to streamline user alerts into the overall experience. Also added titles to use the space created by moving the notifications compoenent to it's own space.
152 lines
2.3 KiB
CSS
152 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;
|
|
height: 50px;
|
|
border-radius: 5px;
|
|
left: 50%;
|
|
transform: translate(-50%, 0);
|
|
position: fixed;
|
|
z-index: 500;
|
|
}
|
|
|
|
header > nav > div[role="nav-left"] img {
|
|
width: 40px;
|
|
padding: 5px;
|
|
}
|
|
|
|
header > nav > div[role="title"] {
|
|
text-align: left;
|
|
height: 100%;
|
|
}
|
|
|
|
header > nav > div[role="title"] h1 {
|
|
color: var(--primary);
|
|
margin: 15px;
|
|
}
|
|
|
|
header > nav > div[role="nav-right"] {
|
|
padding: 5px;
|
|
}
|
|
|
|
header > nav > div[role="nav-right"] button {
|
|
width: 40px;
|
|
height: 40px;
|
|
margin-left: 5px;
|
|
font-size: 0.8em;
|
|
color: var(--white);
|
|
}
|
|
|
|
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;
|
|
}
|