/* ==========================================================================
Component styles for the no-build frontend. Plain CSS (no build step) that
consumes the palette from tokens.css. Class prefix: rl-. To re-theme, set the
THEME_PRIMARY / THEME_ACCENT env vars or edit tokens.css (see CUSTOMIZING.md).
Note: tokens.css must be linked separately in each HTML , BEFORE this
file's , so both fetch in parallel (see public/*.html) - do not
reintroduce an @import here, it forces a sequential fetch (browser can't
discover the imported URL until this file has downloaded and begun parsing).
========================================================================== */
/* ---------- Reset / base ---------- */
*,
*::before,
*::after {
box-sizing: border-box;
}
html {
-webkit-tap-highlight-color: transparent;
scrollbar-width: thin;
scrollbar-color: rgba(255, 255, 255, 0.14) transparent;
}
/* Neutral scrollbars everywhere (Chromium/WebKit); Firefox uses the
scrollbar-color above. 8-10px, hairline-tinted thumb, no accent colour. */
::-webkit-scrollbar {
width: 10px;
height: 10px;
}
::-webkit-scrollbar-track {
background: transparent;
}
::-webkit-scrollbar-thumb {
background: rgba(255, 255, 255, 0.14);
border-radius: 5px;
border: 2px solid transparent;
background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover {
background: rgba(255, 255, 255, 0.22);
background-clip: content-box;
}
body {
margin: 0;
min-height: 100dvh;
font-family: var(--rl-font);
font-size: var(--rl-text-base);
line-height: var(--rl-leading-normal);
color: var(--rl-text);
background: var(--rl-bg);
-webkit-font-smoothing: antialiased;
}
/* Bare links (anything not styled as a .rl-btn): the one hot accent, no
underline until hover. */
a {
color: var(--rl-primary-light);
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
/* A quiet link used inside data rows (e.g. a share title in a table): reads as
plain text, picks up the one hot accent only on hover. Keeps a whole table
of rows from reading as a wall of accent-coloured links. */
.rl-link-quiet {
color: var(--rl-text);
font-weight: var(--rl-weight-medium);
}
.rl-link-quiet:hover {
color: var(--rl-primary-light);
}
/* Flat neutral top vignette - barely-there, no colour wash, no motion. The
drifting warm orbs this used to carry have been removed entirely. */
.rl-aurora {
position: fixed;
inset: 0;
z-index: 0;
overflow: hidden;
pointer-events: none;
background: var(--rl-gradient-aurora);
}
/* ---------- Layout ---------- */
.rl-app {
position: relative;
z-index: var(--rl-z-base);
min-height: 100dvh;
display: flex;
flex-direction: column;
}
.rl-container {
width: 100%;
max-width: 1040px;
margin: 0 auto;
padding: var(--rl-space-4) var(--rl-space-4) var(--rl-space-8);
}
.rl-stack {
display: flex;
flex-direction: column;
gap: var(--rl-space-3);
}
.rl-row {
display: flex;
flex-direction: row;
align-items: center;
gap: var(--rl-space-3);
}
.rl-row-wrap {
flex-wrap: wrap;
}
.rl-spacer {
flex: 1;
}
/* A row of controls (search, select, buttons) forced to one consistent height
so the toolbar lines up regardless of which control types it holds. */
.rl-toolbar {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--rl-space-3);
}
.rl-toolbar .rl-input,
.rl-toolbar .rl-select,
.rl-toolbar .rl-btn {
height: 36px;
min-height: 36px;
}
.rl-toolbar .rl-input,
.rl-toolbar .rl-select {
padding-top: 0;
padding-bottom: 0;
}
.rl-muted {
color: var(--rl-text-muted);
}
.rl-dim {
color: var(--rl-text-dim);
}
.rl-mono {
font-family: var(--rl-font-mono);
}
.rl-center {
text-align: center;
}
.rl-hidden {
display: none !important;
}
.rl-truncate {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* ---------- Typography helpers ---------- */
.rl-h1 {
font-size: var(--rl-text-3xl);
font-weight: var(--rl-weight-bold);
letter-spacing: var(--rl-tracking-tight);
color: var(--rl-text);
margin: 0 0 var(--rl-space-2);
}
.rl-h2 {
font-size: var(--rl-text-xl);
font-weight: var(--rl-weight-bold);
margin: 0 0 var(--rl-space-1);
}
.rl-eyebrow {
text-transform: uppercase;
letter-spacing: var(--rl-tracking-wide);
font-size: var(--rl-text-xs);
font-weight: var(--rl-weight-bold);
color: var(--rl-text-dim);
}
/* ---------- Button ---------- */
.rl-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--rl-space-2);
font-family: var(--rl-font);
font-weight: var(--rl-weight-semibold);
letter-spacing: var(--rl-tracking-wide);
border-radius: 10px;
border: var(--rl-border-thin) solid transparent;
cursor: pointer;
user-select: none;
transition: background-color var(--rl-duration-fast) var(--rl-ease), color var(--rl-duration-fast) var(--rl-ease),
border-color var(--rl-duration-fast) var(--rl-ease);
text-decoration: none;
line-height: 1;
white-space: nowrap;
padding: var(--rl-space-2) var(--rl-space-4);
font-size: var(--rl-text-sm);
min-height: 36px;
color: var(--rl-text);
}
.rl-btn:focus-visible {
outline: var(--rl-focus-outline);
outline-offset: var(--rl-focus-ring-offset);
}
.rl-btn:disabled,
.rl-btn.is-disabled {
opacity: 0.5;
cursor: not-allowed;
pointer-events: none;
}
.rl-btn-sm {
padding: var(--rl-space-2) var(--rl-space-3);
font-size: var(--rl-text-sm);
min-height: 32px;
}
.rl-btn-lg {
padding: var(--rl-space-4) var(--rl-space-6);
font-size: var(--rl-text-lg);
min-height: 48px;
}
.rl-btn-block {
width: 100%;
}
.rl-btn-primary {
background: var(--rl-primary);
color: var(--rl-text-on-primary);
border-color: transparent;
}
.rl-btn-primary:active:not(:disabled) {
background: var(--rl-primary-dark);
}
/* Disabled primary goes neutral: a washed-out accent slab reads as a muddy
brown button, not as "unavailable". */
.rl-btn-primary:disabled,
.rl-btn-primary.is-disabled {
background: rgba(255, 255, 255, 0.06);
color: var(--rl-text-dim);
opacity: 1;
}
/* Not a second accent colour: styled identically to secondary so the hot
accent stays reserved for .rl-btn-primary only. */
.rl-btn-accent {
background: rgba(255, 255, 255, 0.05);
color: var(--rl-text);
border-color: var(--rl-border);
}
.rl-btn-secondary {
background: rgba(255, 255, 255, 0.05);
color: var(--rl-text);
border-color: var(--rl-border);
}
.rl-btn-ghost {
background: transparent;
color: var(--rl-text-muted);
}
.rl-btn-danger {
background: rgba(var(--rl-danger-rgb), 0.12);
color: var(--rl-danger);
border-color: rgba(var(--rl-danger-rgb), 0.25);
}
@media (hover: hover) and (pointer: fine) {
.rl-btn-primary:hover:not(:disabled) {
background: var(--rl-primary-light);
}
.rl-btn-accent:hover:not(:disabled),
.rl-btn-secondary:hover:not(:disabled) {
background: rgba(255, 255, 255, 0.08);
}
.rl-btn-ghost:hover:not(:disabled) {
background: rgba(255, 255, 255, 0.04);
color: var(--rl-text);
}
.rl-btn-danger:hover:not(:disabled) {
background: rgba(var(--rl-danger-rgb), 0.18);
border-color: rgba(var(--rl-danger-rgb), 0.4);
}
}
.rl-icon-btn {
width: 36px;
height: 36px;
min-height: 36px;
padding: 0;
}
/* ---------- Card ---------- */
.rl-card {
background: var(--rl-surface);
border: var(--rl-border-thin) solid var(--rl-border);
border-radius: var(--rl-radius-lg);
padding: var(--rl-space-4);
box-shadow: var(--rl-shadow-inset), var(--rl-shadow-md);
backdrop-filter: blur(8px);
}
.rl-card-glass {
background: var(--rl-surface-glass);
}
.rl-card-pad-sm {
padding: var(--rl-space-3);
}
.rl-card-interactive {
cursor: pointer;
transition: var(--rl-transition);
}
.rl-card-interactive:hover {
border-color: var(--rl-border-strong);
transform: translateY(-2px);
box-shadow: var(--rl-shadow-lg);
}
/* ---------- Form fields ---------- */
.rl-field {
display: flex;
flex-direction: column;
gap: var(--rl-space-2);
}
.rl-label {
font-size: var(--rl-text-sm);
font-weight: var(--rl-weight-semibold);
color: var(--rl-text-muted);
}
.rl-input,
.rl-textarea,
.rl-select {
width: 100%;
font-family: var(--rl-font);
font-size: var(--rl-text-sm);
color: var(--rl-text-form);
background: rgba(0, 0, 0, 0.3);
border: var(--rl-border-thin) solid var(--rl-border);
border-radius: 10px;
padding: var(--rl-space-2) var(--rl-space-3);
transition: border-color var(--rl-duration-fast) var(--rl-ease), box-shadow var(--rl-duration-fast) var(--rl-ease);
}
.rl-textarea {
min-height: 96px;
resize: vertical;
}
.rl-input::placeholder,
.rl-textarea::placeholder {
color: var(--rl-text-placeholder);
opacity: 1;
}
.rl-input:focus,
.rl-textarea:focus,
.rl-select:focus {
outline: none;
border-color: rgba(var(--rl-primary-rgb), 0.6);
box-shadow: var(--rl-focus-ring);
}
.rl-help {
margin: 0;
font-size: var(--rl-text-sm);
color: var(--rl-text-dim);
}
.rl-text-danger {
color: var(--rl-danger);
}
.rl-text-success {
color: var(--rl-success);
}
/* Quiet list of env-managed (read-only) setting rows: label + current value on
one line, a dim "locked" hint below. Sits above the editable fields in the
same card, separated by a hairline - unless it's the card's only content. */
.rl-kv {
display: flex;
flex-direction: column;
gap: var(--rl-space-3);
}
.rl-kv:not(:last-child) {
padding-bottom: var(--rl-space-3);
border-bottom: var(--rl-border-thin) solid var(--rl-border);
}
.rl-kv-row {
display: flex;
flex-direction: column;
gap: var(--rl-space-1);
}
/* Options grid: single column on small screens, two columns on wider ones. */
.rl-optgrid {
display: grid;
grid-template-columns: 1fr;
gap: var(--rl-space-3) var(--rl-space-4);
margin-top: var(--rl-space-3);
}
@media (min-width: 640px) {
.rl-optgrid {
grid-template-columns: 1fr 1fr;
}
}
.rl-col-span {
grid-column: 1 / -1;
}
/* Overview's secondary cards (Biggest shares / Expiring soon / Top uploaders):
stack on narrow viewports, sit three abreast once there is room. */
.rl-overview-secondary {
display: grid;
grid-template-columns: 1fr;
gap: var(--rl-space-3);
}
@media (min-width: 1100px) {
.rl-overview-secondary {
grid-template-columns: repeat(3, 1fr);
}
}
/* Input with a leading static affix (e.g. the /s/ prefix on a custom link). */
.rl-input-affix {
display: flex;
align-items: stretch;
background: rgba(0, 0, 0, 0.3);
border: var(--rl-border-thin) solid var(--rl-border);
border-radius: 10px;
overflow: hidden;
transition: border-color var(--rl-duration-fast) var(--rl-ease), box-shadow var(--rl-duration-fast) var(--rl-ease);
}
.rl-input-affix:focus-within {
border-color: rgba(var(--rl-primary-rgb), 0.6);
box-shadow: var(--rl-focus-ring);
}
.rl-affix {
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
white-space: nowrap;
padding: 0 var(--rl-space-3);
color: var(--rl-text-muted);
font-family: var(--rl-font-mono);
background: var(--rl-bg-elevated);
border-right: var(--rl-border-thin) solid var(--rl-border);
}
.rl-input-affix .rl-input {
border: 0;
background: transparent;
border-radius: 0;
}
.rl-input-affix .rl-input:focus {
box-shadow: none;
}
.rl-input.rl-input-invalid,
.rl-input-affix.rl-input-invalid {
border-color: var(--rl-danger);
}
.rl-input-affix.rl-input-invalid:focus-within {
box-shadow: var(--rl-focus-ring-danger);
}
/* ---------- Switch ---------- */
.rl-switch {
display: inline-flex;
align-items: center;
gap: var(--rl-space-3);
cursor: pointer;
user-select: none;
}
.rl-switch input {
display: none;
}
.rl-switch-track {
position: relative;
width: 42px;
height: 24px;
border-radius: var(--rl-radius-pill);
background: rgba(255, 255, 255, 0.12);
border: var(--rl-border-thin) solid transparent;
transition: var(--rl-transition);
flex-shrink: 0;
}
.rl-switch-track::after {
content: '';
position: absolute;
top: 2px;
left: 2px;
width: 18px;
height: 18px;
border-radius: 50%;
background: var(--rl-text);
transition: var(--rl-transition);
}
.rl-switch input:checked + .rl-switch-track {
background: var(--rl-primary);
border-color: transparent;
}
.rl-switch input:checked + .rl-switch-track::after {
transform: translateX(18px);
background: var(--rl-text-on-primary);
}
/* ---------- Badge / Tag ---------- */
.rl-badge {
display: inline-flex;
align-items: center;
gap: var(--rl-space-1);
font-size: var(--rl-text-xs);
font-weight: var(--rl-weight-bold);
padding: var(--rl-space-1) var(--rl-space-3);
border-radius: var(--rl-radius-pill);
border: var(--rl-border-thin) solid transparent;
white-space: nowrap;
}
.rl-badge-gold {
background: rgba(var(--rl-accent-rgb), 0.12);
color: var(--rl-text-gold);
border-color: rgba(var(--rl-accent-rgb), 0.25);
}
.rl-badge-success {
background: rgba(var(--rl-success-rgb), 0.12);
color: var(--rl-success);
border-color: rgba(var(--rl-success-rgb), 0.25);
}
.rl-badge-danger {
background: rgba(var(--rl-danger-rgb), 0.12);
color: var(--rl-danger);
border-color: rgba(var(--rl-danger-rgb), 0.25);
}
.rl-badge-warning {
background: rgba(var(--rl-warning-rgb), 0.12);
color: var(--rl-warning);
border-color: rgba(var(--rl-warning-rgb), 0.25);
}
.rl-badge-neutral {
background: var(--rl-bg-elevated);
color: var(--rl-text-muted);
border-color: var(--rl-border);
}
/* ---------- Alert ---------- */
.rl-alert {
display: flex;
gap: var(--rl-space-3);
padding: var(--rl-space-4);
border-radius: var(--rl-radius-sm);
border: var(--rl-border-thin) solid;
font-size: var(--rl-text-sm);
}
.rl-alert-info {
background: rgba(var(--rl-info-rgb), 0.1);
border-color: rgba(var(--rl-info-rgb), 0.4);
color: var(--rl-info);
}
.rl-alert-success {
background: rgba(var(--rl-success-rgb), 0.1);
border-color: rgba(var(--rl-success-rgb), 0.4);
color: var(--rl-success-100);
}
.rl-alert-warning {
background: rgba(var(--rl-warning-rgb), 0.1);
border-color: rgba(var(--rl-warning-rgb), 0.4);
color: var(--rl-warning-100);
}
.rl-alert-danger {
background: rgba(var(--rl-danger-rgb), 0.1);
border-color: rgba(var(--rl-danger-rgb), 0.4);
color: var(--rl-danger-100);
}
/* ---------- Progress ---------- */
.rl-progress {
width: 100%;
height: 8px;
border-radius: var(--rl-radius-pill);
background: rgba(255, 255, 255, 0.07);
overflow: hidden;
}
.rl-progress-bar {
height: 100%;
width: 0;
border-radius: var(--rl-radius-pill);
background: var(--rl-primary);
transition: width var(--rl-duration-normal) var(--rl-ease-out);
}
/* ---------- Spinner ---------- */
.rl-spinner {
width: 1.25em;
height: 1.25em;
border: 2px solid rgba(var(--rl-primary-rgb), 0.25);
border-right-color: var(--rl-primary);
border-radius: 50%;
animation: rl-spin 0.6s linear infinite;
display: inline-block;
}
@keyframes rl-spin {
to {
transform: rotate(360deg);
}
}
/* ---------- Dropzone ---------- */
.rl-dropzone {
border: var(--rl-border-thin) dashed var(--rl-border-strong);
border-radius: var(--rl-radius-lg);
padding: var(--rl-space-8) var(--rl-space-6);
text-align: center;
cursor: pointer;
transition: var(--rl-transition);
background: rgba(255, 255, 255, 0.015);
}
.rl-dropzone:hover {
border-color: rgba(255, 255, 255, 0.25);
}
.rl-dropzone.is-dragover {
border-color: var(--rl-primary);
background: rgba(var(--rl-primary-rgb), 0.05);
box-shadow: var(--rl-shadow-glow);
}
.rl-dropzone-icon {
font-size: var(--rl-text-4xl);
line-height: 1;
}
/* ---------- File rows (compact, scrollable list) ---------- */
.rl-filerows {
display: flex;
flex-direction: column;
gap: var(--rl-space-1);
max-height: 46vh;
overflow-y: auto;
padding-right: var(--rl-space-1);
}
.rl-filerow {
position: relative;
display: flex;
align-items: center;
gap: var(--rl-space-2);
padding: var(--rl-space-2) var(--rl-space-3);
border: var(--rl-border-thin) solid var(--rl-border);
border-radius: var(--rl-radius-sm);
background: var(--rl-bg-tertiary);
overflow: hidden;
}
.rl-filerow-icon {
width: 22px;
height: 22px;
display: grid;
place-items: center;
border-radius: var(--rl-radius-xs);
background: var(--rl-bg-elevated);
font-size: var(--rl-text-xs);
flex-shrink: 0;
}
.rl-filerow-name {
flex: 1;
min-width: 0;
font-size: var(--rl-text-sm);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.rl-filerow-dir {
color: var(--rl-text-dim);
}
.rl-filerow-base {
font-weight: var(--rl-weight-semibold);
color: var(--rl-text);
}
.rl-filerow-size {
flex-shrink: 0;
font-size: var(--rl-text-xs);
color: var(--rl-text-dim);
white-space: nowrap;
min-width: 3em;
text-align: right;
}
.rl-filerow-x {
flex-shrink: 0;
width: 24px;
height: 24px;
display: grid;
place-items: center;
border: 0;
border-radius: var(--rl-radius-xs);
background: transparent;
color: var(--rl-text-dim);
cursor: pointer;
font-size: var(--rl-text-sm);
line-height: 1;
transition: var(--rl-transition);
}
.rl-filerow-x:hover {
background: rgba(var(--rl-danger-rgb), 0.15);
color: var(--rl-danger);
}
.rl-filerow-progress {
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 2px;
background: var(--rl-bg-elevated);
}
.rl-filerow-progress .rl-progress-bar {
height: 100%;
border-radius: 0;
}
/* ---------- Table ---------- */
.rl-table {
width: 100%;
border-collapse: collapse;
font-size: var(--rl-text-sm);
}
.rl-table th {
text-align: left;
font-size: 11px;
font-weight: var(--rl-weight-bold);
letter-spacing: var(--rl-tracking-wide);
color: var(--rl-text-dim);
padding: var(--rl-space-2) var(--rl-space-3);
border-bottom: var(--rl-border-thin) solid var(--rl-border-strong);
white-space: nowrap;
}
.rl-table td {
padding: var(--rl-space-2) var(--rl-space-3);
border-bottom: var(--rl-border-thin) solid rgba(255, 255, 255, 0.05);
}
.rl-table tbody tr:hover {
background: rgba(255, 255, 255, 0.03);
}
/* Right-aligned numeric columns with tabular figures so digits line up. */
.rl-table .rl-col-num {
text-align: right;
white-space: nowrap;
font-variant-numeric: tabular-nums;
}
/* Date/time columns: keep on one line, do not stretch. */
.rl-table .rl-col-w {
white-space: nowrap;
width: 1%;
}
/* ---------- Modal ---------- */
.rl-modal-overlay {
position: fixed;
inset: 0;
z-index: var(--rl-z-modal);
background: var(--rl-overlay);
display: flex;
align-items: center;
justify-content: center;
padding: var(--rl-space-4);
backdrop-filter: blur(4px);
}
.rl-modal {
background: var(--rl-bg-elevated);
border: var(--rl-border-thin) solid var(--rl-border);
border-radius: var(--rl-radius-lg);
box-shadow: var(--rl-shadow-xl);
width: 100%;
max-width: 480px;
max-height: 90vh;
overflow: auto;
padding: var(--rl-space-6);
}
.rl-modal-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: var(--rl-space-4);
}
/* ---------- Toast ---------- */
.rl-toasts {
position: fixed;
bottom: var(--rl-space-6);
left: 50%;
transform: translateX(-50%);
z-index: var(--rl-z-toast);
display: flex;
flex-direction: column;
gap: var(--rl-space-2);
width: min(92vw, 420px);
}
.rl-toast {
display: flex;
align-items: center;
gap: var(--rl-space-3);
padding: var(--rl-space-3) var(--rl-space-4);
border-radius: 12px;
border: var(--rl-border-thin) solid var(--rl-border);
border-left: 3px solid var(--rl-border-strong);
background: var(--rl-bg-elevated);
box-shadow: var(--rl-shadow-lg);
font-size: var(--rl-text-sm);
color: var(--rl-text);
animation: rl-toast-in var(--rl-duration-normal) var(--rl-ease-out);
}
.rl-toast-success {
border-left-color: var(--rl-success);
}
.rl-toast-error {
border-left-color: var(--rl-danger);
}
@keyframes rl-toast-in {
from {
opacity: 0;
transform: translateY(12px);
}
}
/* ---------- Media preview ---------- */
.rl-preview {
width: 100%;
border-radius: var(--rl-radius-md);
overflow: hidden;
background: var(--rl-bg);
border: var(--rl-border-thin) solid var(--rl-border);
}
.rl-preview video,
.rl-preview img {
display: block;
width: 100%;
max-height: 70vh;
object-fit: contain;
background: #000;
}
.rl-preview audio {
width: 100%;
}
.rl-preview-text {
margin: 0;
padding: var(--rl-space-4);
font-family: var(--rl-font-mono);
font-size: var(--rl-text-sm);
color: var(--rl-text);
overflow: auto;
max-height: 70vh;
white-space: pre-wrap;
word-break: break-word;
}
.rl-preview iframe {
width: 100%;
height: 75vh;
border: 0;
}
/* ---------- Upload result (share created) ---------- */
.rl-result {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: var(--rl-space-4);
padding: var(--rl-space-4) var(--rl-space-2);
}
.rl-result-check {
width: 64px;
height: 64px;
display: grid;
place-items: center;
border-radius: 50%;
font-size: var(--rl-text-3xl);
line-height: 1;
color: var(--rl-success);
background: rgba(var(--rl-success-rgb), 0.12);
border: var(--rl-border-medium) solid rgba(var(--rl-success-rgb), 0.25);
}
.rl-copyfield {
display: flex;
align-items: stretch;
width: 100%;
max-width: 540px;
background: rgba(0, 0, 0, 0.4);
border: var(--rl-border-thin) solid var(--rl-border);
border-radius: 10px;
overflow: hidden;
}
.rl-copyfield-url {
flex: 1;
min-width: 0;
display: flex;
align-items: center;
padding: 0 var(--rl-space-4);
font-family: var(--rl-font-mono);
font-size: var(--rl-text-sm);
color: var(--rl-text-form);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.rl-copyfield .rl-btn {
border-radius: 0;
border: 0;
flex-shrink: 0;
}
.rl-qr-frame {
width: 220px;
max-width: 100%;
aspect-ratio: 1;
background: #fff;
border-radius: var(--rl-radius-md);
padding: var(--rl-space-3);
box-shadow: var(--rl-shadow-sm);
}
.rl-qr-frame svg {
display: block;
width: 100%;
height: 100%;
}
/* ---------- Share view: summary stats + file list ---------- */
.rl-share-stats {
display: flex;
flex-wrap: wrap;
gap: var(--rl-space-2);
}
.rl-stat {
font-size: var(--rl-text-xs);
font-weight: var(--rl-weight-medium);
color: var(--rl-text-muted);
background: rgba(255, 255, 255, 0.05);
border: var(--rl-border-thin) solid var(--rl-border);
border-radius: var(--rl-radius-pill);
padding: var(--rl-space-1) var(--rl-space-3);
white-space: nowrap;
}
.rl-files-card {
padding: 0;
overflow: hidden;
}
.rl-files {
display: flex;
flex-direction: column;
}
.rl-file {
border-top: var(--rl-border-thin) solid var(--rl-border);
}
.rl-file:first-child {
border-top: 0;
}
.rl-file-main {
display: flex;
align-items: center;
gap: var(--rl-space-3);
padding: var(--rl-space-3) var(--rl-space-4);
transition: background var(--rl-duration-fast) var(--rl-ease);
}
.rl-file-main:hover {
background: rgba(255, 255, 255, 0.04);
}
.rl-file-icon {
width: 40px;
height: 40px;
flex-shrink: 0;
display: grid;
place-items: center;
border-radius: var(--rl-radius-sm);
background: var(--rl-bg-elevated);
border: var(--rl-border-thin) solid var(--rl-border);
font-size: var(--rl-text-lg);
}
.rl-file-info {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
gap: 2px;
}
.rl-file-name {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-weight: var(--rl-weight-semibold);
color: var(--rl-text);
}
.rl-file-dir {
color: var(--rl-text-dim);
font-weight: var(--rl-weight-normal);
}
.rl-file-sub {
font-size: var(--rl-text-xs);
color: var(--rl-text-dim);
}
.rl-file-actions {
display: flex;
gap: var(--rl-space-2);
flex-shrink: 0;
}
.rl-file-preview {
padding: 0 var(--rl-space-4) var(--rl-space-4);
}
@media (max-width: 600px) {
.rl-file-main {
flex-wrap: wrap;
}
.rl-file-actions {
width: 100%;
}
.rl-file-actions .rl-btn {
flex: 1;
}
}
/* ---------- Empty state ---------- */
.rl-empty {
text-align: center;
padding: var(--rl-space-12) var(--rl-space-6);
color: var(--rl-text-dim);
}
.rl-empty-icon {
font-size: var(--rl-text-5xl);
margin-bottom: var(--rl-space-2);
}
/* ==========================================================================
Site sidebar rail (shared by every page) + dashboard main column
One fixed far-left rail on every page (brand, nav, footer). Page content is
offset to its right via body.rl-side-on; .rl-side-mini collapses it to an
icon strip; under 900px it becomes a drawer (.rl-side-open). Footer control
and icon styling lives in the "Sidebar controls" block further below.
========================================================================== */
.rl-side {
position: fixed;
top: 0;
left: 0;
bottom: 0;
z-index: var(--rl-z-sticky);
display: flex;
flex-direction: column;
width: var(--rl-side-width);
background: var(--rl-bg-secondary);
border-right: var(--rl-border-thin) solid var(--rl-border);
overflow: hidden;
}
/* Content offset: every page's .rl-app shifts right of the rail. The body
carries rl-side-on from first paint (static class in the HTML), so the space
is reserved before the rail mounts and the page never reflows on navigation. */
.rl-side-on .rl-app {
margin-left: var(--rl-side-width);
}
.rl-side-on.rl-side-mini .rl-app {
margin-left: var(--rl-side-mini-width);
}
/* Animate width/offset only once the rail has mounted (rl-side-ready, added a
frame later), so the initial layout - including a remembered collapsed state -
snaps into place without an animate-on-load. */
.rl-side-ready .rl-side {
transition:
width var(--rl-duration-fast) var(--rl-ease),
transform var(--rl-duration-fast) var(--rl-ease);
}
.rl-side-ready .rl-app {
transition: margin-left var(--rl-duration-fast) var(--rl-ease);
}
/* ----- Brand ----- */
.rl-side-brand {
display: flex;
align-items: center;
gap: var(--rl-space-2);
height: 48px;
padding: 0 var(--rl-space-3);
border-bottom: var(--rl-border-thin) solid var(--rl-border);
text-decoration: none;
flex-shrink: 0;
box-sizing: border-box;
font-weight: var(--rl-weight-extrabold);
font-size: var(--rl-text-xl);
letter-spacing: var(--rl-tracking-tight);
/* Fallback colour only; the brand string carries its own colours via
tags (rendered to inline spans), which override this. */
color: var(--rl-text);
}
.rl-side-brand:hover {
text-decoration: none;
}
.rl-side-brand img {
width: 24px;
height: 24px;
border-radius: var(--rl-radius-xs);
flex-shrink: 0;
}
.rl-side-brand b {
font-weight: inherit;
}
/* ----- Nav ----- */
.rl-side-nav {
flex: 1;
display: flex;
flex-direction: column;
gap: 1px;
padding: var(--rl-space-2);
overflow-y: auto;
overflow-x: hidden;
scrollbar-width: thin;
scrollbar-color: rgba(255, 255, 255, 0.14) transparent;
}
.rl-side-nav::-webkit-scrollbar {
width: 6px;
}
.rl-side-nav::-webkit-scrollbar-thumb {
background: rgba(255, 255, 255, 0.14);
border-radius: 3px;
}
.rl-side-group {
height: 16px;
margin-top: var(--rl-space-2);
padding: 0 var(--rl-space-3);
font-size: 11px;
font-weight: var(--rl-weight-semibold);
color: var(--rl-text-dim);
text-transform: uppercase;
letter-spacing: 0.08em;
line-height: 16px;
white-space: nowrap;
}
.rl-side-group:first-child {
margin-top: 0;
}
.rl-side-item {
display: flex;
align-items: center;
gap: var(--rl-space-2);
height: 32px;
padding: 0 var(--rl-space-3);
border: 0;
border-radius: var(--rl-radius-sm);
background: transparent;
color: var(--rl-text-muted);
font-size: var(--rl-text-sm);
font-weight: var(--rl-weight-medium);
font-family: var(--rl-font);
text-decoration: none;
white-space: nowrap;
cursor: pointer;
box-sizing: border-box;
transition:
background-color var(--rl-duration-fast) var(--rl-ease),
color var(--rl-duration-fast) var(--rl-ease);
}
@media (hover: hover) and (pointer: fine) {
.rl-side-item:hover {
color: var(--rl-text);
background: rgba(255, 255, 255, 0.04);
text-decoration: none;
}
}
.rl-side-item.is-active,
.rl-side-item.is-active:hover {
color: var(--rl-primary);
background: rgba(var(--rl-primary-rgb), 0.1);
}
.rl-side-item:focus-visible {
outline: var(--rl-focus-outline);
outline-offset: -2px;
}
.rl-side-label {
overflow: hidden;
text-overflow: ellipsis;
}
/* ----- Dashboard main column -----
Wide enough to fill a 2K screen (the content grids reflow to use the space);
capped and centred so a 4K screen stays balanced rather than over-stretched. */
.rl-admin-main {
width: 100%;
max-width: 2400px;
margin-inline: auto;
padding: var(--rl-space-5) var(--rl-space-6) var(--rl-space-10);
}
.rl-view-head {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: var(--rl-space-4);
flex-wrap: wrap;
margin-bottom: var(--rl-space-4);
}
.rl-view-title {
font-size: var(--rl-text-2xl);
font-weight: var(--rl-weight-bold);
letter-spacing: var(--rl-tracking-tight);
color: var(--rl-text);
margin: 0;
}
.rl-view-sub {
margin: var(--rl-space-1) 0 0;
color: var(--rl-text-muted);
font-size: var(--rl-text-sm);
}
/* ----- Live log viewer ----- */
.rl-log {
max-height: 65vh;
overflow-y: auto;
background: var(--rl-bg-tertiary);
border: var(--rl-border-thin) solid var(--rl-border);
border-radius: var(--rl-radius-sm);
padding: var(--rl-space-3);
font-family: var(--rl-font-mono);
font-size: var(--rl-text-xs);
line-height: 1.55;
}
/* Fixed time + level columns keep every message's left edge aligned while the
message itself wraps in its own 1fr column (no more clipped short lines). */
.rl-logrow {
display: grid;
grid-template-columns: auto auto 1fr;
column-gap: var(--rl-space-3);
align-items: baseline;
padding: 2px 0;
}
/* ----- Collapsed (icon-only) rail (desktop only) -----
Scoped to >=901px so the persisted mini state never centres items inside the
full-width mobile drawer. */
@media (min-width: 901px) {
.rl-side-mini .rl-side {
width: var(--rl-side-mini-width);
}
.rl-side-mini .rl-side-label,
.rl-side-mini .rl-side-brand span {
display: none;
}
.rl-side-mini .rl-side-group {
visibility: hidden;
height: 6px;
margin-top: var(--rl-space-2);
}
.rl-side-mini .rl-side-brand,
.rl-side-mini .rl-side-item {
justify-content: center;
gap: 0;
padding-left: 0;
padding-right: 0;
margin-left: var(--rl-space-2);
margin-right: var(--rl-space-2);
}
/* Footer stacks to an icon-only column when the rail is collapsed. */
.rl-side-mini .rl-side-foot-row {
flex-direction: column;
gap: var(--rl-space-1);
}
.rl-side-mini .rl-side-foot-btn {
justify-content: center;
gap: 0;
padding-left: 0;
padding-right: 0;
}
}
/* ----- Mobile drawer ----- */
.rl-side-toggle {
display: none;
position: fixed;
top: var(--rl-space-3);
left: var(--rl-space-3);
z-index: var(--rl-z-dropdown);
width: 40px;
height: 40px;
align-items: center;
justify-content: center;
border: var(--rl-border-thin) solid var(--rl-border);
border-radius: var(--rl-radius-sm);
background: var(--rl-surface);
color: var(--rl-text-muted);
cursor: pointer;
}
.rl-side-toggle svg {
width: 20px;
height: 20px;
}
.rl-side-backdrop {
display: none;
position: fixed;
inset: 0;
z-index: calc(var(--rl-z-sticky) - 1);
background: var(--rl-overlay);
}
@media (max-width: 900px) {
.rl-side {
transform: translateX(-100%);
width: var(--rl-side-width);
}
.rl-side-open .rl-side {
transform: translateX(0);
}
.rl-side-open .rl-side-backdrop {
display: block;
}
.rl-side-on .rl-app,
.rl-side-on.rl-side-mini .rl-app {
margin-left: 0;
padding-top: var(--rl-space-12);
}
.rl-side-toggle {
display: flex;
}
}
/* ==========================================================================
Sidebar controls - icons, account row, logout, collapse
(Replaced/tuned by the sidebar design pass; uniform line-icon family.)
========================================================================== */
.rl-side-ico {
display: inline-flex;
align-items: center;
justify-content: center;
width: 20px;
height: 20px;
flex-shrink: 0;
color: inherit;
}
.rl-side-ico svg {
width: 18px;
height: 18px;
display: block;
}
.rl-side-foot {
flex-shrink: 0;
padding-bottom: var(--rl-space-2);
border-top: var(--rl-border-thin) solid var(--rl-border);
}
/* Collapse + Log out share one row at the bottom, the same height. Collapse
grows to fill the row so Log out sits flush at the right edge. */
.rl-side-foot-row {
display: flex;
align-items: center;
gap: var(--rl-space-2);
margin: var(--rl-space-1) var(--rl-space-2) 0;
}
.rl-side-foot-btn {
display: inline-flex;
align-items: center;
justify-content: flex-start;
gap: var(--rl-space-2);
height: 34px;
padding: 0 var(--rl-space-3);
border: 0;
border-radius: var(--rl-radius-sm);
background: transparent;
color: var(--rl-text-dim);
font-size: var(--rl-text-sm);
font-weight: var(--rl-weight-medium);
font-family: var(--rl-font);
line-height: 1;
cursor: pointer;
white-space: nowrap;
transition:
background-color var(--rl-duration-fast) var(--rl-ease),
color var(--rl-duration-fast) var(--rl-ease);
}
.rl-side-foot-collapse {
flex: 1;
}
/* Log out is an icon-only square, flush at the right edge. */
.rl-side-foot-logout {
flex: 0 0 auto;
width: 34px;
justify-content: center;
padding: 0;
}
@media (hover: hover) and (pointer: fine) {
.rl-side-foot-btn:hover {
color: var(--rl-text);
background: rgba(255, 255, 255, 0.05);
}
.rl-side-foot-logout:hover {
color: var(--rl-danger);
background: rgba(var(--rl-danger-rgb), 0.12);
}
}
/* Collapse (mini toggle) is desktop-only; in the mobile drawer it has no meaning. */
@media (max-width: 900px) {
.rl-side-foot-collapse {
display: none;
}
}
@media (max-width: 600px) {
.rl-container {
padding: var(--rl-space-4) var(--rl-space-3) var(--rl-space-10);
}
.rl-admin-main {
padding-left: var(--rl-space-4);
padding-right: var(--rl-space-4);
}
input,
textarea,
select {
font-size: 16px;
}
}