forked from projects/fipamo
ro
8d3af5b6e1
Added the folder containg Fipamo markdown files to set up a basic route
for the start of the dashboard and quick test to make sure the file
paths can be read
also added CSS files that will style the new template system, which is
currenlty in twig but will be convereted to blade
148 lines
2.2 KiB
CSS
148 lines
2.2 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(--highlight);
|
|
color: var(--white);
|
|
}
|
|
|
|
#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 > 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;
|
|
}
|
|
|
|
header > nav > div.nav-right div.submenu button[data-render="true"] {
|
|
background: var(--tertiary);
|
|
color: 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;
|
|
}
|
|
}
|