ro
33d6688af3
a quick test to see if more svg icons can be added to the base sprite file to keep them all in the same place it worked, so additional icons will be added to sprite file
161 lines
2.4 KiB
CSS
161 lines
2.4 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;
|
|
}
|
|
|
|
::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;
|
|
}
|
|
|
|
svg[role="icon"] {
|
|
transition: all 0.3s linear;
|
|
fill: var(--secondary);
|
|
width: 25px;
|
|
height: 25px;
|
|
padding-top: 5px;
|
|
color: var(--secondary);
|
|
}
|
|
|
|
/* 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;
|
|
}
|
|
|
|
button[data-render="true"] {
|
|
background: var(--primary);
|
|
}
|
|
|
|
button[data-render="true"] svg {
|
|
fill: var(--primary-highlight);
|
|
}
|
|
|
|
button[data-render="false"] svg {
|
|
fill: var(--secondary);
|
|
}
|
|
|
|
button[data-enabled="false"] svg {
|
|
fill: var(--primary);
|
|
}
|
|
|
|
/* 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;
|
|
}
|
|
}
|