sabisan/web/static/styles.css
2026-05-17 13:36:50 +01:00

107 lines
1.9 KiB
CSS

html {
scroll-behavior: smooth;
}
body {
font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
.form-select {
appearance: none;
border-radius: 0;
min-height: 50px;
background-image: linear-gradient(45deg, transparent 50%, #525252 50%), linear-gradient(135deg, #525252 50%, transparent 50%);
background-position: calc(100% - 18px) 21px, calc(100% - 12px) 21px;
background-size: 6px 6px, 6px 6px;
background-repeat: no-repeat;
padding-right: 2.75rem;
}
[data-site-header].is-compact {
padding-top: 0.85rem;
padding-bottom: 0.85rem;
background: rgba(250, 250, 250, 0.95);
color: #0a0a0a;
box-shadow: 0 1px 0 rgba(10, 10, 10, 0.08);
backdrop-filter: blur(18px);
}
[data-site-header].is-compact [data-header-brand] {
font-size: 1.25rem;
}
@keyframes page-fade-out {
from {
opacity: 1;
}
to {
opacity: 0;
}
}
@keyframes page-fade-in {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes panel-fade-out {
from {
opacity: 1;
transform: translateY(0);
}
to {
opacity: 0;
transform: translateY(6px);
}
}
@keyframes panel-fade-in {
from {
opacity: 0;
transform: translateY(6px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
#admin-panel {
view-transition-name: admin-panel;
}
::view-transition-old(root) {
animation: 160ms ease both page-fade-out;
}
::view-transition-new(root) {
animation: 220ms ease both page-fade-in;
}
::view-transition-old(admin-panel) {
animation: 140ms ease both panel-fade-out;
}
::view-transition-new(admin-panel) {
animation: 180ms ease both panel-fade-in;
}
@media (prefers-reduced-motion: reduce) {
*,
::before,
::after {
scroll-behavior: auto !important;
}
::view-transition-old(root),
::view-transition-new(root),
::view-transition-old(admin-panel),
::view-transition-new(admin-panel) {
animation-duration: 1ms;
}
}