97278e3a90
Integrated the Notifications UI component into the header to streamline user alerts into the overall experience. Also added titles to use the space created by moving the notifications compoenent to it's own space.
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);
|
|
}
|
|
}
|