You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
92 lines
1.8 KiB
CSS
92 lines
1.8 KiB
CSS
header > nav[role="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[role="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[role="notify"] > div[role="notify-message"] {
|
|
display: flex;
|
|
height: 86%;
|
|
}
|
|
|
|
header > div[role="notify"] > div[role="notify-message"] div {
|
|
display: inline-block;
|
|
transition: all 0.2s linear;
|
|
}
|
|
|
|
header
|
|
> div[role="notify"]
|
|
> div[role="notify-message"]
|
|
> div[role="notify-text"] {
|
|
color: var(--white);
|
|
border-radius: 5px;
|
|
height: 79%;
|
|
margin-top: 8px;
|
|
opacity: 0;
|
|
}
|
|
|
|
header
|
|
> div[role="notify"]
|
|
> div[role="notify-message"]
|
|
> div[role="notify-icons"] {
|
|
margin: 5px;
|
|
width: 40px;
|
|
opacity: 0;
|
|
}
|
|
|
|
header
|
|
> div[role="notify"]
|
|
> div[role="notify-message"]
|
|
> div[role="notify-text"]
|
|
span {
|
|
display: block;
|
|
padding: 5px;
|
|
}
|
|
|
|
header > div[role="notify"] > div[role="notify-message"] i {
|
|
display: none;
|
|
color: var(--white);
|
|
}
|
|
|
|
i[role="notify-working"] {
|
|
animation: 2s infinite linear spin;
|
|
height: 40px;
|
|
width: 40px;
|
|
}
|
|
|
|
@keyframes spin {
|
|
from {
|
|
transform: rotate(0deg);
|
|
}
|
|
to {
|
|
transform: rotate(360deg);
|
|
}
|
|
}
|