mirror of
https://github.com/PR0M3TH3AN/bitvid.git
synced 2026-10-27 07:52:24 +00:00
92 lines
1.8 KiB
CSS
92 lines
1.8 KiB
CSS
@import "../css/tokens.css";
|
|
|
|
html,
|
|
body {
|
|
min-height: 100%;
|
|
}
|
|
|
|
body {
|
|
margin: 0;
|
|
font-family: var(--font-family-sans, system-ui, -apple-system, sans-serif);
|
|
background-color: var(--color-surface);
|
|
color: var(--color-text);
|
|
line-height: var(--line-height-base, 1.5);
|
|
}
|
|
|
|
.header-torrent {
|
|
background-color: var(--color-surface);
|
|
border-bottom: 1px solid var(--color-border-translucent-medium);
|
|
}
|
|
|
|
.header-torrent__inner {
|
|
margin: 0 auto;
|
|
max-width: 72rem;
|
|
padding: var(--space-lg) var(--space-md);
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.header-torrent__logo {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: var(--space-sm);
|
|
padding: var(--space-xs);
|
|
border-radius: var(--radius-full);
|
|
color: var(--color-text);
|
|
text-decoration: none;
|
|
transition: color var(--motion-duration-fast, 120ms)
|
|
var(--motion-ease-out, ease-out),
|
|
background-color var(--motion-duration-fast, 120ms)
|
|
var(--motion-ease-out, ease-out);
|
|
}
|
|
|
|
.header-torrent__logo:hover,
|
|
.header-torrent__logo:focus-visible {
|
|
background-color: var(--color-panel-hover);
|
|
color: var(--color-text-strong);
|
|
}
|
|
|
|
.header-torrent__logo-image {
|
|
height: 3.5rem;
|
|
width: auto;
|
|
}
|
|
|
|
.spinner-overlay {
|
|
position: fixed;
|
|
inset: 0;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
z-index: 60;
|
|
background-color: var(--color-overlay-muted, rgba(15, 23, 42, 0.35));
|
|
backdrop-filter: blur(6px);
|
|
}
|
|
|
|
.spinner-overlay__icon {
|
|
height: 3rem;
|
|
width: 3rem;
|
|
stroke: var(--color-info-strong);
|
|
animation: spinner-rotate
|
|
calc(var(--motion-duration-base, 160ms) * 6)
|
|
linear
|
|
infinite;
|
|
}
|
|
|
|
.spinner-overlay__track {
|
|
stroke: var(--color-border-translucent);
|
|
opacity: 0.35;
|
|
}
|
|
|
|
.spinner-overlay__indicator {
|
|
stroke: currentColor;
|
|
}
|
|
|
|
@keyframes spinner-rotate {
|
|
from {
|
|
transform: rotate(0deg);
|
|
}
|
|
to {
|
|
transform: rotate(360deg);
|
|
}
|
|
}
|