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
82 lines
1.6 KiB
CSS
82 lines
1.6 KiB
CSS
header > nav.top-nav {
|
|
display: grid;
|
|
text-align: right;
|
|
grid-template-columns: 50px auto auto;
|
|
height: 100%;
|
|
position: relative;
|
|
background: var(--white);
|
|
border-radius: 3px;
|
|
transform-style: preserve-3d;
|
|
transform-origin: 100% 50%;
|
|
transform: rotateX(0deg);
|
|
transition: all 0.1s ease-out;
|
|
perspective: 500px;
|
|
backface-visibility: hidden;
|
|
box-shadow: 2px 2px 0 rgba(var(--primary-rgb) / 30%);
|
|
}
|
|
|
|
header > div.notify {
|
|
display: grid;
|
|
height: 100%;
|
|
position: relative;
|
|
background: var(--black);
|
|
border-radius: 3px;
|
|
transform-style: preserve-3d;
|
|
transform-origin: 100% 50%;
|
|
transform: rotateX(180deg);
|
|
transition: all 0.3s ease-out;
|
|
perspective: 500px;
|
|
backface-visibility: hidden;
|
|
margin-top: -50px;
|
|
box-shadow: 2px 2px 0 rgba(var(--primary-rgb) / 30%);
|
|
}
|
|
|
|
header > div.notify > div.notify-message {
|
|
display: flex;
|
|
height: 86%;
|
|
}
|
|
|
|
header > div.notify > div.notify-message div {
|
|
display: inline-block;
|
|
transition: all 0.2s linear;
|
|
}
|
|
|
|
header > div.notify > div.notify-message > div.notify-text {
|
|
color: var(--white);
|
|
border-radius: 5px;
|
|
height: 79%;
|
|
margin-top: 8px;
|
|
opacity: 0;
|
|
}
|
|
|
|
header > div.notify > div.notify-message > div.notify-icons {
|
|
margin: 5px;
|
|
width: 40px;
|
|
opacity: 0;
|
|
}
|
|
|
|
header > div.notify > div.notify-message > div.notify-text span {
|
|
display: block;
|
|
padding: 5px;
|
|
}
|
|
|
|
header > div.notify > div.notify-message i {
|
|
display: none;
|
|
color: var(--white);
|
|
}
|
|
|
|
i.notify-working {
|
|
animation: 2s infinite linear spin;
|
|
height: 40px;
|
|
width: 40px;
|
|
}
|
|
|
|
@keyframes spin {
|
|
from {
|
|
transform: rotate(0deg);
|
|
}
|
|
to {
|
|
transform: rotate(360deg);
|
|
}
|
|
}
|