nitropage
Version:
A free and open source, extensible visual page builder based on SolidStart.
82 lines (72 loc) • 1.58 kB
CSS
.header {
top: -1px;
position: sticky;
z-index: 50;
height: var(--np-header-height);
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.5rem;
margin-bottom: 1rem;
padding-right: 0.875rem;
box-shadow: 0 0 0 #0000;
transition: box-shadow 0.3s var(--np-ease-in-out-cubic);
}
.header.-sticky {
padding-top: 1px;
height: calc(1px + var(--np-header-height));
box-shadow: 0 0.5rem 1rem #0002;
background-color: var(--np-slate-200);
}
.tabs {
height: 100%;
display: flex;
padding-left: 4px;
}
.buttons {
padding: 0.5rem 0;
height: 100%;
display: flex;
justify-content: center;
}
.exitButton {
font-size: 2rem;
filter: drop-shadow(0px 1px 2px rgb(0 0 0 / 0.3));
transition: all 75ms var(--np-ease-out-expo);
color: var(--np-slate-700);
}
.exitButton:hover,
.exitButton:focus {
outline: none;
color: var(--np-accent-800);
}
.exitButton:hover,
.exitButton:active {
transform: scale(1.15);
filter: drop-shadow(0px 2px 3px rgb(0 0 0 / 0.3));
}
.modificationBadge {
position: absolute;
transform: scale(0);
top: -8px;
left: -5px;
width: 7px;
height: 7px;
background-color: var(--np-accent-400);
border-radius: 9999px;
box-shadow:
0 1px 3px 0 rgb(0 0 0 / 0.1),
0 1px 2px -1px rgb(0 0 0 / 0.1);
transition:
all 100ms var(--np-ease-in-out-expo),
transform 250ms var(--np-ease-in-out-expo);
}
.modificationBadge.-open {
transform: scale(1);
}
button:hover .modificationBadge {
top: -6px;
left: -6px;
background-color: var(--np-accent-500);
}