forked from projects/fipamo
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);
|
||
|
|
}
|
||
|
|
}
|