cjw/Oxicloud
1
0
Fork 0
Code Issues Pull Requests Actions 4 Packages Projects Releases Wiki Activity

feat: photo/video capture-date pipeline + premium UI/UX overhaul

Browse Source 
Backend — Photos timeline now groups by real capture date instead of upload time. New MediaMetadataService (FileLifecycleHook) extracts EXIF DateTimeOriginal from images and container creation_time from videos (mov/mp4/mkv) via nom-exif, timezone-correct (OffsetTimeOriginal), persisting captured_at so the existing media_sort_date trigger takes over. Adds POST /admin/photos/metadata/reextract to backfill existing media. Falls back to upload date when no embedded date exists.

Frontend — premium grid cards: combined metadata line (relative date · size, owner avatar when shared), custom selection checkbox with a clear checked state, uniform full-width 4:3 thumbnail tiles independent of filename length, centered file-type icons, and a hit-test fix so checkbox/star/kebab clicks reach the controls (the decorative thumbnail no longer captures pointer events). Notification messages internationalised across all 16 locales. Broader polish: design tokens, a11y/focus-visible states, brand + PWA assets.

Chore — bump semver-compatible dependencies (cargo upgrade); add nom-exif 3.6.1.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
DioCrafts
2026-06-15 00:17:17 +02:00
parent dac299fea6
commit 81a93a489b
129 changed files with 8194 additions and 2473 deletions
Download Patch File Download Diff File Expand all files Collapse all files
static/css/views/admin.css
+200 -204
View File
@@ -7,7 +7,7 @@
body {
background: var(--color-bg-page);
color: var(--color-text-heading);
min-height: 100vh;
min-height: 100dvh;
height: auto;
display: flex;
flex-direction: column;
@@ -29,56 +29,56 @@ body {
color: inherit;
display: flex;
align-items: center;
gap: 14px;
gap: var(--space-3-5);
}
.width-zero {
width: 0%;
}
.mt-14 {
margin-top: 14px;
margin-top: var(--space-3-5);
}
.toggle-row-strong {
margin-top: 10px;
padding: 12px 0;
margin-top: var(--space-2-5);
padding: var(--space-3) 0;
border-top: 1px solid var(--color-border);
}
.icon-muted-right {
color: var(--color-text-subtle);
margin-right: 6px;
margin-right: var(--space-1-5);
}
.h2-space-between {
justify-content: space-between;
}
.flex-gap-6 {
display: flex;
gap: 6px;
gap: var(--space-1-5);
}
.oidc-discover-wrap {
margin-bottom: 12px;
margin-bottom: var(--space-3);
}
.secret-icon {
color: var(--color-secret-green);
}
.small-muted {
font-weight: 400;
font-weight: var(--weight-normal);
color: var(--color-text-faint);
}
.summary-icon-right {
margin-right: 6px;
margin-right: var(--space-1-5);
}
.oidc-actions {
display: flex;
gap: 10px;
margin-top: 24px;
gap: var(--space-2-5);
margin-top: var(--space-6);
justify-content: flex-end;
}
.modal-title-icon {
color: var(--color-accent);
margin-right: 8px;
margin-right: var(--space-2);
}
.quota-input-row {
display: flex;
gap: 10px;
gap: var(--space-2-5);
align-items: center;
}
.flex-1 {
@@ -86,34 +86,34 @@ body {
}
.select-qm-unit {
width: 90px;
padding: 10px 14px;
padding: var(--space-2-5) var(--space-3-5);
border: 2px solid var(--color-border);
border-radius: 10px;
font-size: 14px;
border-radius: var(--radius-xl);
font-size: var(--text-base);
background: var(--color-bg-hover);
}
.form-row {
display: flex;
gap: 14px;
gap: var(--space-3-5);
}
.select-cu-role {
width: 100%;
padding: 10px 14px;
padding: var(--space-2-5) var(--space-3-5);
border: 2px solid var(--color-border);
border-radius: 10px;
font-size: 14px;
border-radius: var(--radius-xl);
font-size: var(--text-base);
background: var(--color-bg-hover);
}
.quota-row {
display: flex;
gap: 6px;
gap: var(--space-1-5);
}
.select-cu-quota-unit {
width: 70px;
padding: 10px 8px;
padding: var(--space-2-5) var(--space-2);
border: 2px solid var(--color-border);
border-radius: 10px;
font-size: 13px;
border-radius: var(--radius-xl);
font-size: var(--text-sm);
background: var(--color-bg-hover);
}
.alert-no-margin {
@@ -121,21 +121,21 @@ body {
}
.table-loading-cell {
text-align: center;
padding: 28px;
padding: var(--space-7);
color: var(--color-text-faint);
}
.table-status-error {
color: var(--color-error-text-dark);
padding: 20px;
padding: var(--space-5);
}
.table-status-empty {
text-align: center;
padding: 28px;
padding: var(--space-7);
color: var(--color-text-faint);
}
.user-self-badge {
color: var(--color-text-faint);
font-weight: 400;
font-weight: var(--weight-normal);
}
.badge-admin-icon-small {
font-size: 10px;
@@ -144,14 +144,14 @@ body {
width: 80px;
}
.user-last-login-cell {
font-size: 12px;
font-size: var(--text-xs);
color: var(--color-text);
}
/* ── Top Header Bar ── */
.admin-header {
background: linear-gradient(135deg, var(--color-sidebar-bg-from) 0%, var(--color-sidebar-bg-to) 100%);
padding: 0 32px;
padding: 0 var(--space-8);
height: 64px;
display: flex;
align-items: center;
@@ -164,7 +164,7 @@ body {
.admin-header-left {
display: flex;
align-items: center;
gap: 14px;
gap: var(--space-3-5);
}
.admin-logo {
width: 38px;
@@ -183,24 +183,24 @@ body {
}
.admin-title-text {
font-size: 17px;
font-weight: 700;
font-weight: var(--weight-bold);
color: var(--color-sidebar-text-active);
letter-spacing: 0.3px;
}
.admin-title-separator {
font-size: 17px;
color: var(--color-sidebar-storage-faint);
font-weight: 400;
margin-left: 6px;
font-weight: var(--weight-normal);
margin-left: var(--space-1-5);
}
.admin-header-right a {
color: var(--color-sidebar-text);
text-decoration: none;
font-size: 13px;
font-weight: 500;
font-size: var(--text-sm);
font-weight: var(--weight-medium);
display: flex;
align-items: center;
gap: 6px;
gap: var(--space-1-5);
transition: color 0.2s;
}
.admin-header-right a:hover {
@@ -211,7 +211,7 @@ body {
.admin-container {
max-width: 1080px;
margin: 0 auto;
padding: 28px 24px 60px;
padding: var(--space-7) var(--space-6) 60px;
width: 100%;
flex: 1;
}
@@ -219,29 +219,29 @@ body {
/* ── Tabs ── */
.admin-tabs {
display: flex;
gap: 6px;
margin-bottom: 28px;
gap: var(--space-1-5);
margin-bottom: var(--space-7);
background: var(--color-bg-surface);
border-radius: 14px;
padding: 6px;
padding: var(--space-1-5);
box-shadow: 0 1px 4px var(--color-shadow-xs);
position: sticky;
top: 64px;
z-index: 50;
}
.admin-tab {
padding: 10px 22px;
padding: var(--space-2-5) 22px;
cursor: pointer;
font-weight: 600;
font-weight: var(--weight-semibold);
font-size: 13.5px;
color: var(--color-text-subtle);
border: none;
background: none;
border-radius: 10px;
border-radius: var(--radius-xl);
transition: all 0.2s;
display: flex;
align-items: center;
gap: 8px;
gap: var(--space-2);
}
.admin-tab:hover {
color: var(--color-text-heading);
@@ -256,7 +256,7 @@ body {
color: var(--color-sidebar-text-active);
}
.admin-tab i {
font-size: 14px;
font-size: var(--text-base);
width: 16px;
text-align: center;
}
@@ -296,21 +296,21 @@ body {
/* ── Cards ── */
.admin-card {
background: var(--color-bg-surface);
border-radius: 16px;
border-radius: var(--radius-3xl);
box-shadow:
0 1px 4px var(--color-shadow-xs),
0 0 0 1px var(--color-shadow-xs);
padding: 28px;
padding: var(--space-7);
margin-bottom: 22px;
}
.admin-card h2 {
font-size: 16px;
font-weight: 700;
margin-bottom: 20px;
font-size: var(--text-md);
font-weight: var(--weight-bold);
margin-bottom: var(--space-5);
color: var(--color-text-heading);
display: flex;
align-items: center;
gap: 10px;
gap: var(--space-2-5);
}
.admin-card h2 i {
color: var(--color-accent);
@@ -335,11 +335,11 @@ body {
.stats-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: 14px;
gap: var(--space-3-5);
margin-bottom: 22px;
}
.stat-card {
padding: 20px;
padding: var(--space-5);
background: var(--color-bg-hover);
border-radius: 14px;
text-align: center;
@@ -353,8 +353,8 @@ body {
box-shadow: 0 4px 12px var(--color-shadow-xs);
}
.stat-value {
font-size: 1.75rem;
font-weight: 800;
font-size: var(--text-3xl);
font-weight: var(--weight-extrabold);
color: var(--color-text-heading);
}
.stat-label {
@@ -362,8 +362,8 @@ body {
color: var(--color-text-faint);
text-transform: uppercase;
letter-spacing: 0.06em;
margin-top: 4px;
font-weight: 600;
margin-top: var(--space-1);
font-weight: var(--weight-semibold);
}
.stat-card.warn {
border-color: var(--color-stat-warn-border);
@@ -391,12 +391,12 @@ body {
width: 100%;
height: 8px;
background: var(--color-border);
border-radius: 4px;
border-radius: var(--radius-sm);
overflow: hidden;
}
.progress-fill {
height: 100%;
border-radius: 4px;
border-radius: var(--radius-sm);
transition: width 0.5s ease;
}
.progress-fill.green {
@@ -412,7 +412,7 @@ body {
/* ── Table ── */
.table-wrap {
overflow-x: auto;
border-radius: 12px;
border-radius: var(--radius-2xl);
border: 1px solid var(--color-border);
}
table {
@@ -422,18 +422,18 @@ table {
}
th {
text-align: left;
padding: 12px 16px;
padding: var(--space-3) var(--space-4);
background: var(--color-bg-subtle);
color: var(--color-text-faint);
font-size: 11px;
font-size: var(--text-2xs);
text-transform: uppercase;
letter-spacing: 0.06em;
font-weight: 700;
font-weight: var(--weight-bold);
white-space: nowrap;
border-bottom: 1px solid var(--color-border);
}
td {
padding: 14px 16px;
padding: var(--space-3-5) var(--space-4);
border-bottom: 1px solid var(--color-border-light);
vertical-align: middle;
}
@@ -446,14 +446,14 @@ tr:hover {
.user-info {
display: flex;
flex-direction: column;
gap: 2px;
gap: var(--space-0-5);
}
.user-name {
font-weight: 600;
font-weight: var(--weight-semibold);
color: var(--color-text-heading);
}
.user-email {
font-size: 12px;
font-size: var(--text-xs);
color: var(--color-text-faint);
}
@@ -461,11 +461,11 @@ tr:hover {
.badge {
display: inline-flex;
align-items: center;
gap: 4px;
font-size: 11px;
padding: 3px 10px;
border-radius: 20px;
font-weight: 600;
gap: var(--space-1);
font-size: var(--text-2xs);
padding: 3px var(--space-2-5);
border-radius: var(--radius-4xl);
font-weight: var(--weight-semibold);
}
.badge-admin {
background: var(--color-role-admin-bg);
@@ -495,28 +495,28 @@ tr:hover {
background: var(--color-warning-bg-light);
color: var(--color-badge-warning-text);
font-size: 10px;
padding: 1px 6px;
margin-left: 4px;
padding: 1px var(--space-1-5);
margin-left: var(--space-1);
}
/* ── Buttons ── */
.btn {
padding: 8px 18px;
padding: var(--space-2) 18px;
border: none;
border-radius: 10px;
font-size: 13px;
font-weight: 600;
border-radius: var(--radius-xl);
font-size: var(--text-sm);
font-weight: var(--weight-semibold);
cursor: pointer;
transition: all 0.15s;
white-space: nowrap;
display: inline-flex;
align-items: center;
gap: 6px;
gap: var(--space-1-5);
}
.btn-sm {
padding: 6px 12px;
font-size: 12px;
border-radius: 8px;
padding: var(--space-1-5) var(--space-3);
font-size: var(--text-xs);
border-radius: var(--radius-lg);
}
.btn-primary {
background: var(--color-accent-gradient);
@@ -559,19 +559,19 @@ tr:hover {
}
.actions-row {
display: flex;
gap: 6px;
gap: var(--space-1-5);
flex-wrap: wrap;
}
/* ── Forms ── */
.form-group {
margin-bottom: 16px;
margin-bottom: var(--space-4);
}
.form-group label {
display: block;
font-size: 13px;
font-weight: 600;
margin-bottom: 4px;
font-size: var(--text-sm);
font-weight: var(--weight-semibold);
margin-bottom: var(--space-1);
color: var(--color-text-dark);
}
.form-group input[type="text"],
@@ -580,10 +580,10 @@ tr:hover {
.form-group input[type="number"],
.form-group select {
width: 100%;
padding: 10px 14px;
padding: var(--space-2-5) var(--space-3-5);
border: 2px solid var(--color-border);
border-radius: 10px;
font-size: 14px;
border-radius: var(--radius-xl);
font-size: var(--text-base);
background: var(--color-bg-hover);
transition: all 0.2s;
font-family: inherit;
@@ -598,7 +598,7 @@ tr:hover {
}
.form-group small {
color: var(--color-text-faint);
font-size: 12px;
font-size: var(--text-xs);
display: block;
margin-top: 3px;
}
@@ -607,11 +607,11 @@ tr:hover {
display: flex;
align-items: center;
justify-content: space-between;
padding: 10px 0;
padding: var(--space-2-5) 0;
}
.toggle-row label {
font-size: 14px;
font-weight: 500;
font-size: var(--text-base);
font-weight: var(--weight-medium);
color: var(--color-text-dark);
}
.switch {
@@ -655,24 +655,24 @@ tr:hover {
.readonly-field {
display: flex;
align-items: center;
gap: 8px;
gap: var(--space-2);
background: var(--color-bg-hover);
border: 2px solid var(--color-border);
border-radius: 10px;
padding: 10px 14px;
border-radius: var(--radius-xl);
padding: var(--space-2-5) var(--space-3-5);
font-family: "SF Mono", Monaco, Consolas, monospace;
font-size: 13px;
font-size: var(--text-sm);
word-break: break-all;
color: var(--color-text-dark);
}
.readonly-field button {
flex-shrink: 0;
padding: 6px 10px;
padding: var(--space-1-5) var(--space-2-5);
border: 1px solid var(--color-border);
border-radius: 8px;
border-radius: var(--radius-lg);
background: var(--color-bg-surface);
cursor: pointer;
font-size: 12px;
font-size: var(--text-xs);
transition: all 0.15s;
color: var(--color-text-subtle);
}
@@ -683,12 +683,12 @@ tr:hover {
/* ── Alerts ── */
.alert {
padding: 12px 16px;
border-radius: 10px;
font-size: 13px;
margin-top: 14px;
padding: var(--space-3) var(--space-4);
border-radius: var(--radius-xl);
font-size: var(--text-sm);
margin-top: var(--space-3-5);
display: none;
font-weight: 500;
font-weight: var(--weight-medium);
}
.alert-success {
background: var(--color-badge-success-bg);
@@ -711,23 +711,23 @@ tr:hover {
.warning {
background: var(--color-warning-bg-faint);
border: 1px solid var(--color-badge-warning-border);
border-radius: 10px;
padding: 10px 14px;
font-size: 13px;
border-radius: var(--radius-xl);
padding: var(--space-2-5) var(--space-3-5);
font-size: var(--text-sm);
color: var(--color-badge-warning-text);
margin-top: 8px;
margin-top: var(--space-2);
display: flex;
align-items: center;
gap: 6px;
font-weight: 500;
gap: var(--space-1-5);
font-weight: var(--weight-medium);
}
/* ── Discovery ── */
.discovery-result {
margin: 12px 0;
padding: 14px;
border-radius: 10px;
font-size: 13px;
margin: var(--space-3) 0;
padding: var(--space-3-5);
border-radius: var(--radius-xl);
font-size: var(--text-sm);
}
.discovery-result.ok {
background: var(--color-badge-success-bg);
@@ -740,8 +740,8 @@ tr:hover {
color: var(--color-error-text-dark);
}
.discovery-result dt {
font-weight: 700;
margin-top: 6px;
font-weight: var(--weight-bold);
margin-top: var(--space-1-5);
}
.discovery-result dd {
margin-left: 0;
@@ -750,16 +750,16 @@ tr:hover {
/* ── Details ── */
details {
margin-top: 14px;
margin-top: var(--space-3-5);
border-top: 1px solid var(--color-border);
padding-top: 12px;
padding-top: var(--space-3);
}
details summary {
cursor: pointer;
font-weight: 600;
font-size: 14px;
font-weight: var(--weight-semibold);
font-size: var(--text-base);
color: var(--color-text-subtle);
padding: 6px 0;
padding: var(--space-1-5) 0;
user-select: none;
transition: color 0.2s;
}
@@ -767,7 +767,7 @@ details summary:hover {
color: var(--color-accent);
}
details[open] summary {
margin-bottom: 14px;
margin-bottom: var(--space-3-5);
color: var(--color-accent);
}
@@ -785,8 +785,8 @@ details[open] summary {
}
.modal {
background: var(--color-bg-surface);
border-radius: 20px;
padding: 28px;
border-radius: var(--radius-4xl);
padding: var(--space-7);
width: 420px;
max-width: 90vw;
box-shadow: 0 20px 60px var(--color-shadow-xl);
@@ -811,7 +811,7 @@ details[open] summary {
}
.modal-actions {
display: flex;
gap: 8px;
gap: var(--space-2);
justify-content: flex-end;
margin-top: 18px;
}
@@ -820,14 +820,14 @@ details[open] summary {
.quota-bar {
display: flex;
align-items: center;
gap: 10px;
gap: var(--space-2-5);
}
.quota-bar .progress-bar {
flex: 1;
height: 6px;
}
.quota-text {
font-size: 12px;
font-size: var(--text-xs);
color: var(--color-text-faint);
white-space: nowrap;
}
@@ -836,7 +836,7 @@ details[open] summary {
#access-denied {
display: none;
text-align: center;
padding: 80px 20px;
padding: var(--space-20) var(--space-5);
}
#access-denied .access-icon {
width: 80px;
@@ -846,33 +846,33 @@ details[open] summary {
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 20px;
margin: 0 auto var(--space-5);
}
#access-denied .access-icon i {
font-size: 32px;
font-size: var(--text-4xl);
color: var(--color-danger-alt);
}
#access-denied h2 {
color: var(--color-error-text-dark);
margin-bottom: 8px;
font-size: 20px;
margin-bottom: var(--space-2);
font-size: var(--text-xl);
}
#access-denied p {
color: var(--color-text-subtle);
margin-bottom: 20px;
font-size: 14px;
margin-bottom: var(--space-5);
font-size: var(--text-base);
}
#access-denied a {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 10px 24px;
gap: var(--space-1-5);
padding: var(--space-2-5) var(--space-6);
background: var(--color-accent-gradient);
color: var(--color-sidebar-text-active);
text-decoration: none;
border-radius: 10px;
font-weight: 600;
font-size: 14px;
border-radius: var(--radius-xl);
font-weight: var(--weight-semibold);
font-size: var(--text-base);
box-shadow: 0 3px 12px var(--color-accent-shadow);
transition: all 0.2s;
}
@@ -882,35 +882,31 @@ details[open] summary {
}
#loading {
text-align: center;
padding: 80px;
padding: var(--space-20);
color: var(--color-text-faint);
font-size: 15px;
}
#loading i {
font-size: 32px;
font-size: var(--text-4xl);
color: var(--color-accent);
display: block;
margin-bottom: 12px;
margin-bottom: var(--space-3);
animation: spin 1s linear infinite;
}
@keyframes spin {
to {
transform: rotate(360deg);
}
}
/* @keyframes spin → base/animations.css (canonical, loaded via main.css). */
/* ── Pagination ── */
.pagination {
display: flex;
align-items: center;
justify-content: space-between;
margin-top: 14px;
font-size: 13px;
margin-top: var(--space-3-5);
font-size: var(--text-sm);
color: var(--color-text-faint);
padding: 0 4px;
padding: 0 var(--space-1);
}
.pagination button {
padding: 6px 14px;
padding: var(--space-1-5) var(--space-3-5);
}
/* ── Confirm modal ── */
@@ -921,8 +917,8 @@ details[open] summary {
color: var(--color-error-text-dark);
}
.modal-confirm p {
margin: 14px 0 22px;
font-size: 14px;
margin: var(--space-3-5) 0 22px;
font-size: var(--text-base);
line-height: 1.55;
color: var(--color-dark-mid);
}
@@ -930,9 +926,9 @@ details[open] summary {
background: var(--color-danger-gradient);
color: var(--color-danger-text);
border: none;
padding: 10px 22px;
border-radius: 10px;
font-weight: 600;
padding: var(--space-2-5) 22px;
border-radius: var(--radius-xl);
font-weight: var(--weight-semibold);
cursor: pointer;
transition: opacity 0.15s;
}
@@ -945,28 +941,28 @@ details[open] summary {
.storage-status-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
gap: 12px;
margin-bottom: 24px;
gap: var(--space-3);
margin-bottom: var(--space-6);
}
.storage-stat {
padding: 14px;
padding: var(--space-3-5);
background: var(--color-bg-hover);
border-radius: 12px;
border-radius: var(--radius-2xl);
text-align: center;
border: 1px solid var(--color-border);
}
.storage-stat__label {
display: block;
font-size: 11px;
font-size: var(--text-2xs);
text-transform: uppercase;
letter-spacing: 0.5px;
color: var(--color-text-secondary);
margin-bottom: 4px;
margin-bottom: var(--space-1);
}
.storage-stat__value {
display: block;
font-size: 1.35rem;
font-weight: 700;
font-weight: var(--weight-bold);
color: var(--color-text-heading);
}
@@ -977,15 +973,15 @@ details[open] summary {
.smtp-info-table {
width: 100%;
border-collapse: collapse;
margin-bottom: 24px;
margin-bottom: var(--space-6);
background: var(--color-bg-hover);
border: 1px solid var(--color-border);
border-radius: 12px;
border-radius: var(--radius-2xl);
overflow: hidden;
}
.smtp-info-table th,
.smtp-info-table td {
padding: 10px 14px;
padding: var(--space-2-5) var(--space-3-5);
text-align: left;
border-bottom: 1px solid var(--color-border);
vertical-align: middle;
@@ -997,7 +993,7 @@ details[open] summary {
}
.smtp-info-table th {
font-size: 0.85rem;
font-weight: 600;
font-weight: var(--weight-semibold);
color: var(--color-text-secondary);
width: 220px;
white-space: nowrap;
@@ -1011,8 +1007,8 @@ details[open] summary {
.storage-backend-selector {
display: flex;
gap: 12px;
margin-bottom: 20px;
gap: var(--space-3);
margin-bottom: var(--space-5);
}
.storage-backend-option {
flex: 1;
@@ -1025,18 +1021,18 @@ details[open] summary {
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
padding: 18px 14px;
gap: var(--space-2);
padding: 18px var(--space-3-5);
border: 2px solid var(--color-border);
border-radius: 12px;
border-radius: var(--radius-2xl);
transition:
border-color 0.2s,
background 0.2s;
text-align: center;
font-weight: 500;
font-weight: var(--weight-medium);
}
.storage-backend-option__card i {
font-size: 1.5rem;
font-size: var(--text-2xl);
color: var(--color-text-secondary);
transition: color 0.2s;
}
@@ -1049,29 +1045,29 @@ details[open] summary {
}
.storage-form {
margin-top: 8px;
margin-top: var(--space-2);
}
.storage-actions {
display: flex;
gap: 10px;
margin-top: 24px;
gap: var(--space-2-5);
margin-top: var(--space-6);
justify-content: flex-end;
}
.storage-migration-section {
margin-top: 32px;
padding-top: 20px;
margin-top: var(--space-8);
padding-top: var(--space-5);
border-top: 1px solid var(--color-border);
}
.storage-migration-section h3 {
font-size: 1rem;
margin-bottom: 8px;
font-size: var(--text-md);
margin-bottom: var(--space-2);
color: var(--color-text-heading);
}
.storage-migration-section h3 i {
color: var(--color-text-secondary);
margin-right: 6px;
margin-right: var(--space-1-5);
}
/* ── Migration UI ── */
@@ -1079,16 +1075,16 @@ details[open] summary {
.migration-status-row {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 14px;
font-size: 14px;
gap: var(--space-2);
margin-bottom: var(--space-3-5);
font-size: var(--text-base);
}
.badge-migration {
padding: 3px 10px;
border-radius: 10px;
font-size: 12px;
font-weight: 600;
padding: 3px var(--space-2-5);
border-radius: var(--radius-xl);
font-size: var(--text-xs);
font-weight: var(--weight-semibold);
text-transform: uppercase;
letter-spacing: 0.4px;
}
@@ -1117,39 +1113,39 @@ details[open] summary {
width: 100%;
height: 10px;
background: var(--color-bg-hover);
border-radius: 6px;
border-radius: var(--radius-md);
overflow: hidden;
margin-bottom: 6px;
margin-bottom: var(--space-1-5);
}
.migration-progress-bar__fill {
height: 100%;
background: var(--color-accent);
border-radius: 6px;
border-radius: var(--radius-md);
transition: width 0.3s ease;
}
.migration-progress-text {
display: flex;
justify-content: space-between;
font-size: 12px;
font-size: var(--text-xs);
color: var(--color-text-secondary);
margin-bottom: 4px;
margin-bottom: var(--space-1);
}
.migration-failed-list {
max-height: 150px;
overflow-y: auto;
font-size: 11px;
font-size: var(--text-2xs);
background: var(--color-bg-hover);
padding: 8px 12px;
border-radius: 8px;
padding: var(--space-2) var(--space-3);
border-radius: var(--radius-lg);
border: 1px solid var(--color-border);
margin-top: 6px;
margin-top: var(--space-1-5);
}
.migration-actions {
display: flex;
gap: 10px;
margin-top: 16px;
gap: var(--space-2-5);
margin-top: var(--space-4);
flex-wrap: wrap;
}
static/css/views/auth.css
+362 -93
View File
@@ -7,9 +7,33 @@
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
height: 100dvh;
width: 100%;
background-color: var(--color-bg-page);
position: relative;
/* Spotlight + warm brand blobs — seats the card in a pool of light
instead of a flat near-white field. */
background: var(--brand-ambient);
}
/* Fine film grain over the backdrop (not the card). `overlay` neutralises the
mid-grey noise so it adds texture without shifting brightness; works in both
light and dark. Tune the whole effect with `opacity`. */
.auth-container::before {
content: "";
position: fixed;
inset: 0;
z-index: 0;
pointer-events: none;
background-image: var(--brand-grain);
background-size: 180px 180px;
opacity: 0.6;
mix-blend-mode: overlay;
}
/* Keep the card (and every panel) above the grain layer. */
.auth-panel {
position: relative;
z-index: 1;
}
.auth-panel {
@@ -18,9 +42,9 @@
margin: 0 auto;
background-color: var(--color-bg-surface);
border: 1px solid var(--color-border);
border-radius: 16px;
box-shadow: 0 8px 30px var(--color-shadow);
padding: 36px;
border-radius: var(--radius-3xl);
box-shadow: var(--shadow-xl);
padding: var(--space-9);
text-align: center;
}
@@ -28,7 +52,7 @@
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 20px;
margin-bottom: var(--space-5);
}
.auth-logo-icon {
@@ -39,26 +63,27 @@
display: flex;
align-items: center;
justify-content: center;
margin-right: 12px;
box-shadow: 0 4px 12px var(--color-accent-shadow);
margin-right: var(--space-3);
/* Tighter glow (negative spread) reads more premium than a wide halo. */
box-shadow: 0 4px 14px -4px var(--color-accent-shadow);
}
.auth-logo-icon svg {
width: 30px;
height: 30px;
fill: var(--color-danger-text);
fill: var(--color-on-accent);
}
.auth-logo-text {
font-size: 24px;
font-weight: bold;
font-size: var(--text-2xl);
font-weight: var(--weight-bold);
color: var(--color-text);
}
.auth-title {
font-size: 22px;
font-weight: 700;
margin-bottom: 28px;
font-weight: var(--weight-bold);
margin-bottom: var(--space-7);
color: var(--color-text-heading);
}
@@ -72,22 +97,23 @@
}
.auth-input-group {
margin-bottom: 20px;
margin-bottom: var(--space-5);
}
.auth-label {
display: block;
margin-bottom: 8px;
font-size: 14px;
margin-bottom: var(--space-2);
font-size: var(--text-base);
color: var(--color-text-heading);
font-weight: 600;
font-weight: var(--weight-semibold);
}
.auth-input {
width: 100%;
padding: 14px 18px;
border-radius: 12px;
border: 2px solid var(--color-border);
padding: var(--space-3-5) 18px;
border-radius: var(--radius-2xl);
/* Stronger resting border so fields read as crafted, not flat fills. */
border: 2px solid var(--color-border-medium);
font-size: 15px;
background-color: var(--color-bg-input);
color: var(--color-text);
@@ -95,7 +121,7 @@
}
.auth-input::placeholder {
color: var(--color-text-faint);
color: var(--color-text-muted);
}
.auth-input:hover {
@@ -111,22 +137,26 @@
}
.auth-input[readonly] {
opacity: 0.7;
cursor: default;
/* A locked value, not a placeholder: full-strength text on a subtly
distinct "locked" fill (no dimming that reads as empty). */
color: var(--color-text);
font-weight: var(--weight-semibold);
background-color: var(--color-bg-input-alt);
}
.auth-button {
width: 100%;
padding: 14px 18px;
border-radius: 12px;
padding: var(--space-3-5) 18px;
border-radius: var(--radius-2xl);
background: var(--color-accent-gradient);
color: var(--color-danger-text);
font-weight: 700;
color: var(--color-on-accent);
font-weight: var(--weight-bold);
border: none;
cursor: pointer;
font-size: 16px;
font-size: var(--text-md);
transition: all 0.3s ease;
margin-top: 12px;
margin-top: var(--space-3);
box-shadow: 0 4px 12px var(--color-accent-shadow);
}
@@ -137,7 +167,8 @@
}
.auth-button:active {
transform: translateY(0);
/* Tactile press — the button dips slightly under the resting plane. */
transform: translateY(1px);
box-shadow: 0 2px 8px var(--color-accent-shadow);
}
@@ -148,13 +179,37 @@
filter: none;
}
/* Loading — hide the label, show an inline spinner (toggled via .is-loading /
aria-busy by auth.js on submit). */
.auth-button.is-loading,
.auth-button[aria-busy="true"] {
color: transparent;
pointer-events: none;
position: relative;
}
.auth-button.is-loading::after,
.auth-button[aria-busy="true"]::after {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 18px;
height: 18px;
margin: -9px 0 0 -9px;
border: 2px solid var(--color-on-accent);
border-top-color: transparent;
border-radius: var(--radius-full);
animation: spin var(--spin-duration) linear infinite;
}
.auth-subtitle {
margin: 20px 0;
margin: var(--space-5) 0;
color: var(--color-text-muted);
font-size: 14px;
font-size: var(--text-base);
}
.auth-action-wrap {
margin-top: 20px;
margin-top: var(--space-5);
}
/* SSO / OIDC button */
@@ -164,7 +219,7 @@
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
gap: var(--space-2-5);
}
.auth-button-oidc:hover {
@@ -180,14 +235,14 @@
}
.auth-button-oidc i {
font-size: 14px;
font-size: var(--text-base);
}
/* Helper text above the magic-link form ("No password? Enter your
email…"). Quieter visual weight than the form labels. */
.auth-hint {
margin: 0 0 12px;
font-size: 13px;
margin: 0 0 var(--space-3);
font-size: var(--text-sm);
line-height: 1.4;
color: var(--color-text-secondary);
}
@@ -196,10 +251,10 @@
message rendered on every successful 2xx; error variant only used
for the 503-not-configured branch or network failures. */
.auth-status {
margin-top: 12px;
padding: 10px 14px;
border-radius: 8px;
font-size: 13px;
margin-top: var(--space-3);
padding: var(--space-2-5) var(--space-3-5);
border-radius: var(--radius-lg);
font-size: var(--text-sm);
line-height: 1.4;
}
.auth-status-success {
@@ -217,9 +272,9 @@
.auth-divider {
display: flex;
align-items: center;
margin: 20px 0;
margin: var(--space-5) 0;
color: var(--color-text-faint);
font-size: 13px;
font-size: var(--text-sm);
}
.auth-divider::before,
@@ -231,7 +286,13 @@
}
.auth-divider span {
padding: 0 12px;
padding: 0 var(--space-3);
/* Quiet, deliberate label rather than a stray lowercase letter. */
text-transform: uppercase;
letter-spacing: var(--tracking-wide, 0.08em);
font-size: var(--text-2xs);
font-weight: var(--weight-semibold);
color: var(--color-text-muted);
}
/* OIDC-only mode: hide password form */
@@ -241,15 +302,15 @@
.auth-toggle {
margin-top: 22px;
font-size: 14px;
font-size: var(--text-base);
color: var(--color-text-muted);
}
.auth-toggle-link {
color: var(--color-accent);
color: var(--color-accent-text);
cursor: pointer;
text-decoration: none;
font-weight: 500;
font-weight: var(--weight-medium);
}
.auth-toggle-link:hover {
@@ -259,33 +320,49 @@
.auth-error {
background-color: var(--color-error-bg);
color: var(--color-error-text);
padding: 12px 18px;
border-radius: 12px;
margin-bottom: 20px;
font-size: 14px;
padding: var(--space-3) 18px;
border-radius: var(--radius-2xl);
margin-bottom: var(--space-5);
font-size: var(--text-base);
display: none;
}
.auth-success {
background-color: var(--color-success-bg);
color: var(--color-success-text);
padding: 12px 18px;
border-radius: 12px;
margin-bottom: 20px;
font-size: 14px;
padding: var(--space-3) 18px;
border-radius: var(--radius-2xl);
margin-bottom: var(--space-5);
font-size: var(--text-base);
display: none;
}
/* Admin setup panel styles — visibility controlled via .hidden class */
.setup-steps {
margin-bottom: 28px;
display: flex;
justify-content: center;
gap: 32px;
margin-bottom: var(--space-7);
/* 3 equal columns → circle centres land at 1/6, 1/2, 5/6, so the
connector track can be placed deterministically between them. */
display: grid;
grid-template-columns: repeat(3, 1fr);
position: relative;
}
/* Connector track behind the step circles (z-index 0; circles sit above). */
.setup-steps::before {
content: "";
position: absolute;
top: 17px; /* half of the 34px circle */
left: 16.667%;
right: 16.667%;
height: 2px;
background: var(--color-border);
z-index: 0;
}
.setup-step {
position: relative;
z-index: 1;
display: flex;
flex-direction: column;
align-items: center;
@@ -301,28 +378,29 @@
align-items: center;
justify-content: center;
color: var(--color-text-faint);
font-weight: 700;
font-size: 14px;
margin-bottom: 6px;
font-weight: var(--weight-bold);
font-size: var(--text-base);
margin-bottom: var(--space-1-5);
transition: all 0.2s ease;
}
.step-number.active {
background: var(--color-accent-gradient);
border-color: transparent;
color: var(--color-danger-text);
box-shadow: 0 2px 8px var(--color-accent-shadow);
color: var(--color-on-accent);
/* Subtle halo lifts the active step off the connector track. */
box-shadow: 0 0 0 4px var(--color-accent-ring), 0 4px 12px var(--color-accent-shadow);
}
.step-title {
font-size: 12px;
font-size: var(--text-xs);
color: var(--color-text-faint);
font-weight: 500;
font-weight: var(--weight-medium);
}
.step-title.active {
color: var(--color-text-heading);
font-weight: 600;
font-weight: var(--weight-semibold);
}
/* Language selector panel styles */
@@ -332,23 +410,23 @@
.language-subtitle {
color: var(--color-text-muted);
font-size: 16px;
margin-bottom: 24px;
font-size: var(--text-md);
margin-bottom: var(--space-6);
}
/* ====== Compact Language Picker ====== */
.lang-picker {
position: relative;
margin-bottom: 24px;
margin-bottom: var(--space-6);
text-align: left;
}
.lang-picker-selected {
display: flex;
align-items: center;
padding: 14px 18px;
padding: var(--space-3-5) 18px;
border: 2px solid var(--color-border);
border-radius: 12px;
border-radius: var(--radius-2xl);
cursor: pointer;
background-color: var(--color-bg-input);
transition: all 0.2s ease;
@@ -370,20 +448,20 @@
.lang-picker-flag {
font-size: 26px;
margin-right: 14px;
margin-right: var(--space-3-5);
flex-shrink: 0;
}
.lang-picker-name {
font-size: 16px;
font-weight: 600;
font-size: var(--text-md);
font-weight: var(--weight-semibold);
color: var(--color-text-heading);
flex: 1;
}
.lang-picker-arrow {
color: var(--color-text-faint);
font-size: 13px;
font-size: var(--text-sm);
transition: transform 0.2s ease;
flex-shrink: 0;
}
@@ -402,8 +480,8 @@
background: var(--color-bg-surface);
border: 2px solid var(--color-accent);
border-top: 1px solid var(--color-border-light);
border-bottom-left-radius: 12px;
border-bottom-right-radius: 12px;
border-bottom-left-radius: var(--radius-2xl);
border-bottom-right-radius: var(--radius-2xl);
box-shadow: 0 12px 32px var(--color-shadow-lg);
z-index: 100;
overflow: hidden;
@@ -428,7 +506,7 @@
/* Search inside dropdown */
.lang-picker-search {
position: relative;
padding: 10px 14px;
padding: var(--space-2-5) var(--space-3-5);
border-bottom: 1px solid var(--color-border-light);
}
@@ -438,15 +516,15 @@
top: 50%;
transform: translateY(-50%);
color: var(--color-text-faint);
font-size: 13px;
font-size: var(--text-sm);
}
.lang-picker-search input {
width: 100%;
padding: 8px 12px 8px 32px;
padding: var(--space-2) var(--space-3) var(--space-2) var(--space-8);
border: 1px solid var(--color-border);
border-radius: 8px;
font-size: 14px;
border-radius: var(--radius-lg);
font-size: var(--text-base);
outline: none;
box-sizing: border-box;
background-color: var(--color-bg-input);
@@ -466,16 +544,16 @@
.lang-picker-list {
max-height: 240px;
overflow-y: auto;
padding: 6px;
padding: var(--space-1-5);
}
/* Language item in dropdown */
.lang-picker-item {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 12px;
border-radius: 8px;
gap: var(--space-2-5);
padding: var(--space-2-5) var(--space-3);
border-radius: var(--radius-lg);
cursor: pointer;
transition: all 0.12s ease;
}
@@ -495,40 +573,231 @@
.lang-picker-item-name {
font-size: 15px;
font-weight: 500;
font-weight: var(--weight-medium);
color: var(--color-text-heading);
}
.lang-picker-item-english {
font-size: 13px;
font-size: var(--text-sm);
color: var(--color-text-faint);
margin-left: auto;
}
.lang-picker-item-check {
color: var(--color-accent);
font-size: 13px;
font-size: var(--text-sm);
flex-shrink: 0;
}
.lang-picker-empty {
text-align: center;
color: var(--color-text-faint);
padding: 20px;
font-size: 14px;
padding: var(--space-5);
font-size: var(--text-base);
}
@media (max-width: 480px) {
.auth-panel {
width: 95%;
padding: 24px;
padding: var(--space-6);
}
.lang-picker-selected {
padding: 12px 14px;
padding: var(--space-3) var(--space-3-5);
}
.lang-picker-list {
max-height: 200px;
}
}
/* ============================================================
Premium polish — brand lockup, CTA hierarchy, field icons,
password reveal, progressive disclosure, match feedback.
Icons are token-safe CSS masks (no inline SVG, no raw colour):
the glyph alpha comes from the data-URI, the colour from a token.
============================================================ */
/* — Brand wordmark: the ownable "Oxi" accent lockup (DESIGN-SYSTEM §3) — */
.brand-oxi {
background: var(--color-accent-gradient);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
/* — CTA hierarchy: exactly one primary per screen. The secondary action
(magic-link, etc.) is a quiet tinted/ghost button, never a 2nd gradient. — */
.auth-button-secondary {
background: var(--color-accent-tint);
color: var(--color-accent-text);
border: 1.5px solid var(--color-border-medium);
box-shadow: none;
}
.auth-button-secondary:hover {
background: var(--color-bg-surface);
border-color: var(--color-accent);
box-shadow: none;
filter: none;
transform: translateY(-1px);
}
.auth-button-secondary:active {
transform: translateY(1px);
box-shadow: none;
}
/* — Leading field icons (user / mail / lock) via masked pseudo-element — */
.auth-input-wrap {
position: relative;
}
.auth-input-wrap .auth-input {
padding-left: 44px;
}
.auth-input-wrap.has-toggle .auth-input {
padding-right: 44px;
}
.auth-input-wrap::before {
content: "";
position: absolute;
left: 16px;
top: 50%;
width: 18px;
height: 18px;
transform: translateY(-50%);
background-color: var(--color-text-muted);
pointer-events: none;
z-index: 1;
transition: background-color 0.2s ease;
-webkit-mask: var(--icon-url, none) center / contain no-repeat;
mask: var(--icon-url, none) center / contain no-repeat;
}
.auth-input-wrap:focus-within::before {
background-color: var(--color-accent);
}
.auth-input-wrap--user {
--icon-url: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'/><circle cx='12' cy='7' r='4'/></svg>");
}
.auth-input-wrap--mail {
--icon-url: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='2' y='4' width='20' height='16' rx='2'/><path d='m2 7 10 6 10-6'/></svg>");
}
.auth-input-wrap--lock {
--icon-url: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='11' width='18' height='11' rx='2'/><path d='M7 11V7a5 5 0 0 1 10 0v4'/></svg>");
}
/* — Password show/hide toggle — */
.auth-pw-toggle {
position: absolute;
right: 8px;
top: 50%;
transform: translateY(-50%);
width: 32px;
height: 32px;
border: none;
background: transparent;
cursor: pointer;
border-radius: var(--radius-lg);
display: flex;
align-items: center;
justify-content: center;
z-index: 2;
}
.auth-pw-toggle::before {
content: "";
width: 18px;
height: 18px;
background-color: var(--color-text-muted);
transition: background-color 0.2s ease;
--eye: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7-10-7-10-7Z'/><circle cx='12' cy='12' r='3'/></svg>");
-webkit-mask: var(--eye) center / contain no-repeat;
mask: var(--eye) center / contain no-repeat;
}
.auth-pw-toggle:hover::before {
background-color: var(--color-accent);
}
.auth-pw-toggle[aria-pressed="true"]::before {
--eye: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M9.9 4.2A9 9 0 0 1 12 4c6.5 0 10 7 10 7a13 13 0 0 1-2 2.7M6.6 6.6A13 13 0 0 0 2 11s3.5 7 10 7a9 9 0 0 0 3.6-.7'/><path d='m2 2 20 20'/></svg>");
}
/* — Progressive disclosure of the magic-link form — */
.auth-magic-toggle {
display: block;
width: 100%;
margin-top: var(--space-1);
padding: var(--space-2);
background: none;
border: none;
color: var(--color-accent-text);
font-size: var(--text-sm);
font-weight: var(--weight-medium);
cursor: pointer;
text-align: center;
}
.auth-magic-toggle:hover {
text-decoration: underline;
}
.auth-magic-reveal {
margin-top: var(--space-3);
}
.auth-magic-reveal:not(.hidden) {
animation: langPickerSlideDown 0.2s ease;
}
/* — Live password-match feedback (sits inside the confirm field group) — */
.auth-match {
margin-top: var(--space-2);
font-size: var(--text-xs);
font-weight: var(--weight-medium);
display: none;
align-items: center;
gap: var(--space-1-5);
}
.auth-match.show {
display: flex;
}
.auth-match::before {
content: "";
width: 14px;
height: 14px;
flex-shrink: 0;
background-color: currentColor;
-webkit-mask: var(--match-icon) center / contain no-repeat;
mask: var(--match-icon) center / contain no-repeat;
}
.auth-match--ok {
color: var(--color-success-text);
--match-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><path d='M20 6 9 17l-5-5'/></svg>");
}
.auth-match--bad {
color: var(--color-error-text);
--match-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><path d='M18 6 6 18M6 6l12 12'/></svg>");
}
/* "Caps Lock is on" hint under a password field (toggled by auth.js). */
.auth-caps-warning {
display: flex;
align-items: center;
gap: var(--space-1-5);
margin-top: var(--space-2);
font-size: var(--text-xs);
font-weight: var(--weight-medium);
color: var(--color-warning-orange-text);
}
static/css/views/device-verify.css
+18 -17
View File
@@ -6,18 +6,19 @@
}
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
background: var(--color-bg-hover);
/* Shared brand backdrop (centralised in --brand-ambient). */
background: var(--brand-ambient);
color: var(--color-text-heading);
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
min-height: 100dvh;
padding: 1rem;
}
.dag-card {
background: var(--color-bg-surface);
border-radius: var(--radius, 12px);
box-shadow: 0 4px 24px var(--color-shadow-sm);
border-radius: var(--radius-3xl);
box-shadow: var(--shadow-xl);
padding: 2.5rem;
max-width: 440px;
width: 100%;
@@ -27,8 +28,8 @@ body {
margin-bottom: 1.5rem;
}
.dag-logo h1 {
font-size: 1.5rem;
font-weight: 700;
font-size: var(--text-2xl);
font-weight: var(--weight-bold);
}
.dag-logo span {
color: var(--color-primary);
@@ -44,7 +45,7 @@ p.subtitle {
}
label {
display: block;
font-weight: 600;
font-weight: var(--weight-semibold);
font-size: 0.85rem;
margin-bottom: 0.4rem;
}
@@ -56,7 +57,7 @@ input[type="text"] {
text-align: center;
text-transform: uppercase;
border: 2px solid var(--color-border);
border-radius: 8px;
border-radius: var(--radius-lg);
outline: none;
transition: border-color 0.2s;
}
@@ -65,7 +66,7 @@ input[type="text"]:focus {
}
.device-info {
background: var(--color-border-light);
border-radius: 8px;
border-radius: var(--radius-lg);
padding: 1rem;
margin: 1rem 0;
}
@@ -79,7 +80,7 @@ input[type="text"]:focus {
font-size: 0.85rem;
}
.device-info .value {
font-weight: 600;
font-weight: var(--weight-semibold);
font-size: 0.85rem;
}
.actions {
@@ -91,22 +92,22 @@ button {
flex: 1;
padding: 0.75rem;
border: none;
border-radius: 8px;
border-radius: var(--radius-lg);
font-size: 0.95rem;
font-weight: 600;
font-weight: var(--weight-semibold);
cursor: pointer;
transition: background 0.2s;
}
.btn-approve {
background: var(--color-primary);
color: var(--color-danger-text);
color: var(--color-on-accent);
}
.btn-approve:hover {
background: var(--color-primary-hover);
}
.btn-deny {
background: var(--color-error-text);
color: var(--color-danger-text);
background: var(--color-danger-bg);
color: var(--color-on-accent);
}
.btn-deny:hover {
background: var(--color-danger-bg-hover);
@@ -118,9 +119,9 @@ button:disabled {
.status {
text-align: center;
padding: 1rem;
border-radius: 8px;
border-radius: var(--radius-lg);
margin-top: 1rem;
font-weight: 600;
font-weight: var(--weight-semibold);
}
.status.success {
background: var(--color-success-bg);
static/css/views/favorites.css
+7 -7
View File
@@ -48,20 +48,20 @@
flex-direction: column;
align-items: center;
justify-content: center;
padding: 50px 20px;
padding: 50px var(--space-5);
text-align: center;
color: var(--color-text-gray);
}
.favorites-empty-state i {
font-size: 48px;
font-size: var(--text-6xl);
color: var(--color-warning-text);
margin-bottom: 20px;
margin-bottom: var(--space-5);
opacity: 0.6;
}
.favorites-empty-state p {
margin-bottom: 10px;
margin-bottom: var(--space-2-5);
max-width: 400px;
}
@@ -98,13 +98,13 @@
/* List view: small star next to the name */
.favorite-star-inline {
color: var(--color-warning-text);
font-size: 11px;
margin-left: 6px;
font-size: var(--text-2xs);
margin-left: var(--space-1-5);
vertical-align: middle;
filter: drop-shadow(0 0 1px var(--color-device-verify-drop-shadow));
[dir="rtl"] & {
margin-left: 0;
margin-right: 6px;
margin-right: var(--space-1-5);
}
}
static/css/views/inlineViewer.css
+58 -31
View File
@@ -27,7 +27,7 @@
height: 90%;
max-width: 1200px;
background-color: var(--color-bg-surface);
border-radius: 8px;
border-radius: var(--radius-lg);
overflow: hidden;
display: flex;
flex-direction: column;
@@ -38,14 +38,14 @@
display: flex;
justify-content: space-between;
align-items: center;
padding: 12px 16px;
padding: var(--space-3) var(--space-4);
background-color: var(--color-bg-subtle);
border-bottom: 1px solid var(--color-border);
}
.inline-viewer-title {
font-size: 18px;
font-weight: 500;
font-size: var(--text-lg);
font-weight: var(--weight-medium);
color: var(--color-text);
white-space: nowrap;
overflow: hidden;
@@ -55,7 +55,7 @@
.inline-viewer-close {
background: none;
border: none;
font-size: 18px;
font-size: var(--text-lg);
cursor: pointer;
color: var(--color-text-muted);
width: 36px;
@@ -86,7 +86,7 @@
display: flex;
justify-content: space-between;
align-items: center;
padding: 12px 16px;
padding: var(--space-3) var(--space-4);
background-color: var(--color-bg-subtle);
border-top: 1px solid var(--color-border);
}
@@ -95,14 +95,14 @@
background-color: var(--color-accent);
color: var(--color-danger-text);
border: none;
border-radius: 4px;
padding: 8px 16px;
font-size: 14px;
font-weight: 500;
border-radius: var(--radius-sm);
padding: var(--space-2) var(--space-4);
font-size: var(--text-base);
font-weight: var(--weight-medium);
cursor: pointer;
display: flex;
align-items: center;
gap: 8px;
gap: var(--space-2);
transition: background-color 0.2s;
}
@@ -112,13 +112,13 @@
.inline-viewer-controls {
display: flex;
gap: 8px;
gap: var(--space-2);
}
.inline-viewer-controls button {
background-color: var(--color-border-light);
border: 1px solid var(--color-border-medium);
border-radius: 4px;
border-radius: var(--radius-sm);
width: 36px;
height: 36px;
display: flex;
@@ -138,11 +138,38 @@
.inline-viewer-image {
max-width: 100%;
max-height: 100%;
/* The image is a flex item; without min-* = 0 the flexbox `min-width: auto`
default keeps it at its natural size, so `max-width: 100%` is ignored and
wide images overflow → a stray horizontal scrollbar and the picture only
partly visible (looked like it "repeated" while scrolling). */
min-width: 0;
min-height: 0;
object-fit: contain;
transform-origin: center;
transition: transform 0.2s ease;
}
/* Subtle, thin scrollbar inside the viewer (shown only when zoomed in to pan) —
replaces the heavy global accent scrollbar. */
.inline-viewer-container {
scrollbar-width: thin;
scrollbar-color: var(--color-border-medium) transparent;
}
.inline-viewer-container::-webkit-scrollbar {
width: 8px;
height: 8px;
}
.inline-viewer-container::-webkit-scrollbar-thumb {
background: var(--color-border-medium);
border-radius: var(--radius-full);
}
.inline-viewer-container::-webkit-scrollbar-track {
background: transparent;
}
/* PDF viewer */
.inline-viewer-pdf,
.inline-viewer-pdf-fallback {
@@ -176,10 +203,10 @@
display: flex;
flex-direction: column;
align-items: center;
gap: 12px;
padding: 20px;
gap: var(--space-3);
padding: var(--space-5);
background: var(--color-progress-overlay);
border-radius: 8px;
border-radius: var(--radius-lg);
box-shadow: 0 2px 8px var(--color-shadow);
}
@@ -188,7 +215,7 @@
width: 200px;
height: 8px;
background: var(--color-border);
border-radius: 4px;
border-radius: var(--radius-sm);
overflow: hidden;
}
@@ -196,21 +223,21 @@
.inline-viewer-progress-fill {
height: 100%;
background: linear-gradient(90deg, var(--color-info-blue), var(--color-admin-blue));
border-radius: 4px;
border-radius: var(--radius-sm);
transition: width 0.2s ease;
}
/* Progress percentage text */
.inline-viewer-progress-text {
font-size: 14px;
font-weight: 600;
font-size: var(--text-base);
font-weight: var(--weight-semibold);
color: var(--color-text-secondary);
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}
/* Error and unsupported message */
.inline-viewer-message {
padding: 32px;
padding: var(--space-8);
text-align: center;
max-width: 400px;
}
@@ -218,7 +245,7 @@
.inline-viewer-icon {
font-size: 64px;
color: var(--color-text-dark);
margin-bottom: 24px;
margin-bottom: var(--space-6);
}
.inline-viewer-text {
@@ -227,7 +254,7 @@
}
.inline-viewer-text p {
margin: 0 0 16px;
margin: 0 0 var(--space-4);
}
/* Text viewer */
@@ -235,9 +262,9 @@
width: 100%;
height: 100%;
margin: 0;
padding: 16px 24px;
padding: var(--space-4) var(--space-6);
font-family: "Courier New", Consolas, Monaco, monospace;
font-size: 14px;
font-size: var(--text-base);
line-height: 1.6;
color: var(--color-text);
background-color: var(--color-bg-surface);
@@ -254,7 +281,7 @@
max-width: 100%;
max-height: 100%;
object-fit: contain;
border-radius: 4px;
border-radius: var(--radius-sm);
background-color: var(--color-black);
}
@@ -264,8 +291,8 @@
flex-direction: column;
align-items: center;
justify-content: center;
gap: 24px;
padding: 48px 32px;
gap: var(--space-6);
padding: var(--space-12) var(--space-8);
max-width: 500px;
width: 100%;
}
@@ -289,8 +316,8 @@
}
.inline-viewer-audio-name {
font-size: 16px;
font-weight: 500;
font-size: var(--text-md);
font-weight: var(--weight-medium);
color: var(--color-text-secondary);
text-align: center;
word-break: break-word;
@@ -300,7 +327,7 @@
.inline-viewer-audio {
width: 100%;
max-width: 460px;
border-radius: 8px;
border-radius: var(--radius-lg);
outline: none;
}
static/css/views/music.css
+172 -173
View File
File diff suppressed because it is too large Load Diff
static/css/views/mySharesView.css
+36 -36
View File
@@ -9,7 +9,7 @@
.ms-load-more-wrapper {
display: flex;
justify-content: center;
padding: 16px 0 8px;
padding: var(--space-4) 0 var(--space-2);
}
.ms-load-more-wrapper.hidden {
@@ -23,7 +23,7 @@
box-shadow: none;
border-radius: 0;
overflow: visible;
gap: 10px;
gap: var(--space-2-5);
display: flex;
flex-direction: column;
}
@@ -32,7 +32,7 @@
.ms-lane {
background-color: var(--color-item);
border-radius: 10px;
border-radius: var(--radius-xl);
box-shadow: 0 1px 3px var(--color-shadow-xs);
overflow: hidden;
}
@@ -44,14 +44,14 @@
/* Vignette lane headers need the same padding as the resource row */
.ms-lane__header .user-vignette {
padding: 10px 14px;
font-weight: 600;
padding: var(--space-2-5) var(--space-3-5);
font-weight: var(--weight-semibold);
}
.ms-lane__header .user-vignette .user-vignette__name {
font-size: 13px;
font-size: var(--text-sm);
color: var(--color-text-heading);
font-weight: 600;
font-weight: var(--weight-semibold);
}
.ms-lane__body {
@@ -63,16 +63,16 @@
.ms-resource-row {
display: flex;
align-items: center;
gap: 8px;
padding: 10px 14px;
gap: var(--space-2);
padding: var(--space-2-5) var(--space-3-5);
}
/* Size the shared .file-icon component for inline use in myShares rows */
.ms-resource-row .file-icon {
width: 36px;
height: 36px;
border-radius: 6px;
font-size: 14px;
border-radius: var(--radius-md);
font-size: var(--text-base);
flex-shrink: 0;
}
@@ -81,14 +81,14 @@
.ms-link-identity__resource .file-icon {
width: 24px;
height: 24px;
border-radius: 4px;
font-size: 11px;
border-radius: var(--radius-sm);
font-size: var(--text-2xs);
flex-shrink: 0;
}
.ms-resource-row__name {
flex: 1;
font-weight: 600;
font-weight: var(--weight-semibold);
color: var(--color-text);
text-decoration: none;
overflow: hidden;
@@ -103,8 +103,8 @@
.ms-resource-row__edit {
flex-shrink: 0;
font-size: 12px;
padding: 3px 8px;
font-size: var(--text-xs);
padding: 3px var(--space-2);
opacity: 0.6;
transition: opacity 0.15s;
}
@@ -118,16 +118,16 @@
.ms-link-lane-label {
display: flex;
align-items: center;
gap: 6px;
padding: 8px 14px;
font-size: 12px;
font-weight: 600;
gap: var(--space-1-5);
padding: var(--space-2) var(--space-3-5);
font-size: var(--text-xs);
font-weight: var(--weight-semibold);
color: var(--color-text-secondary);
}
.ms-link-lane-label__icon {
color: var(--color-text-faint);
font-size: 12px;
font-size: var(--text-xs);
}
/* ── Grant row ───────────────────────────────────────────────────────────── */
@@ -139,8 +139,8 @@
display: grid;
grid-template-columns: 1fr 110px 180px auto;
align-items: center;
gap: 8px;
padding: 7px 14px 7px 28px;
gap: var(--space-2);
padding: 7px var(--space-3-5) 7px var(--space-7);
border-bottom: 1px solid var(--color-border-faint);
transition: background 0.1s;
}
@@ -171,12 +171,12 @@
min-width: 0;
display: flex;
align-items: center;
gap: 6px;
gap: var(--space-1-5);
}
.ms-identity__name {
font-size: 13px;
font-weight: 500;
font-size: var(--text-sm);
font-weight: var(--weight-medium);
color: var(--color-text);
overflow: hidden;
text-overflow: ellipsis;
@@ -184,8 +184,8 @@
}
.ms-identity__resource-name {
font-size: 13px;
font-weight: 500;
font-size: var(--text-sm);
font-weight: var(--weight-medium);
color: var(--color-text);
text-decoration: none;
overflow: hidden;
@@ -201,13 +201,13 @@
/* Token in sharedWith mode: arrow + resource link */
.ms-link-identity__arrow {
font-size: 11px;
font-size: var(--text-2xs);
color: var(--color-text-faint);
flex-shrink: 0;
}
.ms-link-identity__resource {
font-size: 12px;
font-size: var(--text-xs);
color: var(--color-text-secondary);
text-decoration: none;
display: inline-flex;
@@ -235,11 +235,11 @@
width: 22px;
height: 22px;
border: none;
border-radius: 4px;
border-radius: var(--radius-sm);
background: transparent;
color: var(--color-text-muted);
cursor: pointer;
font-size: 11px;
font-size: var(--text-2xs);
flex-shrink: 0;
transition:
background 0.12s,
@@ -263,7 +263,7 @@
/* ── Context menu current-item indicator ─────────────────────────────────── */
.ms-menu-item--current {
font-weight: 600;
font-weight: var(--weight-semibold);
}
/* ── Context menu expiry row ─────────────────────────────────────────────── */
@@ -272,12 +272,12 @@
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
padding: 6px 12px;
gap: var(--space-2);
padding: var(--space-1-5) var(--space-3);
}
.ms-menu-expiry-label {
font-size: 12px;
font-size: var(--text-xs);
color: var(--color-text-muted);
white-space: nowrap;
flex-shrink: 0;
static/css/views/photos.css
+56 -53
View File
@@ -13,61 +13,61 @@
display: flex;
align-items: center;
justify-content: flex-end;
padding: 8px 8px 4px;
padding: var(--space-2) var(--space-2) var(--space-1);
}
/* Toggle buttons — wider for text labels */
.photos-toolbar .toggle-btn {
width: auto;
padding: 0 14px;
font-size: 13px;
font-weight: 500;
padding: 0 var(--space-3-5);
font-size: var(--text-sm);
font-weight: var(--weight-medium);
}
/* Group header */
.photos-day-header {
padding: 16px 8px 10px;
padding: var(--space-4) var(--space-2) var(--space-2-5);
font-size: 15px;
font-weight: 600;
font-weight: var(--weight-semibold);
color: var(--color-text);
}
.photos-day-header .photos-day-count {
font-weight: 400;
font-weight: var(--weight-normal);
color: var(--color-text-faint);
font-size: 13px;
margin-left: 8px;
font-size: var(--text-sm);
margin-left: var(--space-2);
}
/* Photo grid — base (daily mode) */
.photos-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
gap: 12px;
padding: 0 8px;
margin-bottom: 16px;
gap: var(--space-3);
padding: 0 var(--space-2);
margin-bottom: var(--space-4);
}
/* Monthly mode — larger tiles, more breathing room */
.photos-group-monthly .photos-grid {
grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
gap: 14px;
gap: var(--space-3-5);
}
.photos-group-monthly .photos-day-header {
font-size: 17px;
padding: 20px 8px 12px;
padding: var(--space-5) var(--space-2) var(--space-3);
}
/* Yearly mode — smaller tiles, more items visible */
.photos-group-yearly .photos-grid {
grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
gap: 10px;
gap: var(--space-2-5);
}
.photos-group-yearly .photos-day-header {
font-size: 20px;
padding: 24px 8px 14px;
font-size: var(--text-xl);
padding: var(--space-6) var(--space-2) var(--space-3-5);
}
/* Individual photo tile */
@@ -75,10 +75,10 @@
position: relative;
aspect-ratio: 1;
overflow: hidden;
border-radius: 12px;
border-radius: var(--radius-2xl);
border: 2px solid var(--color-border);
cursor: pointer;
background: var(--color-bg-surface);
background: var(--color-bg-muted);
box-shadow: 0 1px 3px var(--color-shadow-xs);
transition:
transform 0.2s ease,
@@ -90,8 +90,15 @@
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 10px;
transition: transform 0.2s ease;
border-radius: var(--radius-xl);
opacity: 0;
transition:
opacity 0.4s ease,
transform 0.2s ease;
}
.photo-tile img.is-loaded {
opacity: 1;
}
.photo-tile:hover {
@@ -120,7 +127,7 @@
align-items: center;
justify-content: center;
color: var(--color-danger-text);
font-size: 11px;
font-size: var(--text-2xs);
z-index: 2;
}
@@ -159,7 +166,7 @@
align-items: center;
justify-content: center;
color: var(--color-danger-text);
font-size: 12px;
font-size: var(--text-xs);
z-index: 2;
}
@@ -168,11 +175,11 @@
position: absolute;
bottom: 6px;
left: 6px;
font-size: 11px;
font-size: var(--text-2xs);
color: var(--color-danger-text);
background: var(--color-overlay-video);
padding: 2px 6px;
border-radius: 4px;
padding: var(--space-0-5) var(--space-1-5);
border-radius: var(--radius-sm);
z-index: 2;
}
@@ -182,25 +189,25 @@
flex-direction: column;
align-items: center;
justify-content: center;
padding: 80px 20px;
padding: var(--space-20) var(--space-5);
text-align: center;
color: var(--color-text-faint);
}
.photos-empty i {
font-size: 56px;
margin-bottom: 16px;
margin-bottom: var(--space-4);
color: var(--color-border-medium);
}
.photos-empty p {
margin: 4px 0;
margin: var(--space-1) 0;
font-size: 15px;
}
.photos-empty .photos-empty-title {
font-size: 18px;
font-weight: 600;
font-size: var(--text-lg);
font-weight: var(--weight-semibold);
color: var(--color-text-subtle);
}
@@ -215,21 +222,17 @@
display: flex;
align-items: center;
justify-content: center;
padding: 24px;
padding: var(--space-6);
color: var(--color-text-faint);
font-size: 14px;
gap: 8px;
font-size: var(--text-base);
gap: var(--space-2);
}
.photos-loading i {
animation: spin 1s linear infinite;
}
@keyframes spin {
to {
transform: rotate(360deg);
}
}
/* @keyframes spin → base/animations.css (canonical, loaded via main.css). */
/* Selection bar */
.photos-selection-bar {
@@ -239,14 +242,14 @@
transform: translateX(-50%);
background: var(--color-multiselect-bg);
color: var(--color-multiselect-text);
padding: 10px 20px;
border-radius: 12px;
padding: var(--space-2-5) var(--space-5);
border-radius: var(--radius-2xl);
display: flex;
align-items: center;
gap: 16px;
gap: var(--space-4);
box-shadow: 0 8px 30px var(--color-shadow-3xl);
z-index: 1000;
font-size: 14px;
font-size: var(--text-base);
}
.photos-selection-bar button {
@@ -254,9 +257,9 @@
border: none;
color: var(--color-multiselect-text);
cursor: pointer;
padding: 6px 10px;
border-radius: 6px;
font-size: 14px;
padding: var(--space-1-5) var(--space-2-5);
border-radius: var(--radius-md);
font-size: var(--text-base);
transition: background 0.15s;
}
@@ -265,16 +268,16 @@
}
.photos-selection-bar .selection-count {
font-weight: 600;
font-weight: var(--weight-semibold);
}
/* Responsive */
@media (max-width: 768px) {
.photos-grid {
grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
gap: 2px;
padding: 0 2px;
margin-bottom: 8px;
gap: var(--space-0-5);
padding: 0 var(--space-0-5);
margin-bottom: var(--space-2);
}
.photos-group-monthly .photos-grid {
@@ -290,11 +293,11 @@
}
.photos-day-header {
font-size: 14px;
padding: 10px 4px 6px;
font-size: var(--text-base);
padding: var(--space-2-5) var(--space-1) var(--space-1-5);
}
.photos-toolbar {
padding: 6px 4px 2px;
padding: var(--space-1-5) var(--space-1) var(--space-0-5);
}
}
static/css/views/photosLightbox.css
+13 -13
View File
@@ -33,7 +33,7 @@
max-width: 90vw;
max-height: 85vh;
object-fit: contain;
border-radius: 4px;
border-radius: var(--radius-sm);
user-select: none;
}
@@ -48,7 +48,7 @@
border: none;
background: var(--color-lightbox-btn-bg);
color: var(--color-lightbox-btn-text);
font-size: 20px;
font-size: var(--text-xl);
cursor: pointer;
display: flex;
align-items: center;
@@ -80,7 +80,7 @@
border: none;
background: var(--color-lightbox-btn-bg);
color: var(--color-lightbox-btn-text);
font-size: 18px;
font-size: var(--text-lg);
cursor: pointer;
display: flex;
align-items: center;
@@ -99,7 +99,7 @@
top: 0;
left: 0;
right: 0;
padding: 16px 70px 16px 20px;
padding: var(--space-4) 70px var(--space-4) var(--space-5);
background: var(--color-lightbox-gradient-top);
color: var(--color-lightbox-btn-text);
z-index: 10001;
@@ -107,18 +107,18 @@
.lightbox-filename {
font-size: 15px;
font-weight: 600;
margin-bottom: 2px;
font-weight: var(--weight-semibold);
margin-bottom: var(--space-0-5);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.lightbox-meta {
font-size: 12px;
font-size: var(--text-xs);
color: var(--color-lightbox-text-muted);
display: flex;
gap: 12px;
gap: var(--space-3);
flex-wrap: wrap;
}
@@ -128,12 +128,12 @@
bottom: 0;
left: 0;
right: 0;
padding: 16px 20px;
padding: var(--space-4) var(--space-5);
background: var(--color-lightbox-gradient-bottom);
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
gap: var(--space-2);
z-index: 10001;
}
@@ -148,7 +148,7 @@
display: flex;
align-items: center;
justify-content: center;
font-size: 16px;
font-size: var(--text-md);
transition: background 0.15s;
}
@@ -166,7 +166,7 @@
bottom: 16px;
left: 20px;
color: var(--color-lightbox-text-faint);
font-size: 13px;
font-size: var(--text-sm);
z-index: 10001;
}
@@ -175,7 +175,7 @@
.lightbox-nav {
width: 36px;
height: 36px;
font-size: 16px;
font-size: var(--text-md);
}
.lightbox-prev {
static/css/views/profile.css
+195 -199
View File
@@ -7,7 +7,7 @@
body {
background: var(--color-bg-page);
color: var(--color-text-heading);
min-height: 100vh;
min-height: 100dvh;
height: auto;
display: flex;
flex-direction: column;
@@ -19,7 +19,7 @@ body {
color: inherit;
display: flex;
align-items: center;
gap: 14px;
gap: var(--space-3-5);
}
.width-zero {
width: 0%;
@@ -30,7 +30,7 @@ body {
/* ── Header ── */
.profile-header {
background: linear-gradient(135deg, var(--color-sidebar-bg-from) 0%, var(--color-sidebar-bg-to) 100%);
padding: 0 32px;
padding: 0 var(--space-8);
height: 64px;
display: flex;
align-items: center;
@@ -43,7 +43,7 @@ body {
.profile-header-left {
display: flex;
align-items: center;
gap: 14px;
gap: var(--space-3-5);
}
.profile-logo {
width: 38px;
@@ -62,24 +62,24 @@ body {
}
.profile-title-text {
font-size: 17px;
font-weight: 700;
font-weight: var(--weight-bold);
color: var(--color-sidebar-text-active);
letter-spacing: 0.3px;
}
.profile-title-separator {
font-size: 17px;
color: var(--color-sidebar-storage-faint);
font-weight: 400;
margin-left: 6px;
font-weight: var(--weight-normal);
margin-left: var(--space-1-5);
}
.profile-header-right a {
color: var(--color-sidebar-text);
text-decoration: none;
font-size: 13px;
font-weight: 500;
font-size: var(--text-sm);
font-weight: var(--weight-medium);
display: flex;
align-items: center;
gap: 6px;
gap: var(--space-1-5);
transition: color 0.2s;
}
.profile-header-right a:hover {
@@ -90,28 +90,28 @@ body {
.profile-container {
max-width: 720px;
margin: 0 auto;
padding: 32px 24px 60px;
padding: var(--space-8) var(--space-6) 60px;
width: 100%;
}
/* ── Card ── */
.profile-card {
background: var(--color-bg-surface);
border-radius: 16px;
border-radius: var(--radius-3xl);
box-shadow:
0 1px 4px var(--color-shadow-xs),
0 0 0 1px var(--color-shadow-xs);
padding: 32px;
padding: var(--space-8);
margin-bottom: 22px;
}
.profile-card h2 {
font-size: 16px;
font-weight: 700;
margin-bottom: 20px;
font-size: var(--text-md);
font-weight: var(--weight-bold);
margin-bottom: var(--space-5);
color: var(--color-text-heading);
display: flex;
align-items: center;
gap: 10px;
gap: var(--space-2-5);
}
.profile-card h2 i {
color: var(--color-accent);
@@ -122,8 +122,8 @@ body {
.avatar-section {
display: flex;
align-items: center;
gap: 24px;
margin-bottom: 8px;
gap: var(--space-6);
margin-bottom: var(--space-2);
}
.avatar-large {
width: 88px;
@@ -134,31 +134,31 @@ body {
align-items: center;
justify-content: center;
color: var(--color-sidebar-text-active);
font-size: 32px;
font-weight: 700;
font-size: var(--text-4xl);
font-weight: var(--weight-bold);
letter-spacing: 1px;
box-shadow: 0 6px 20px var(--color-accent-shadow);
flex-shrink: 0;
}
.avatar-info h1 {
font-size: 22px;
font-weight: 700;
font-weight: var(--weight-bold);
color: var(--color-text-heading);
margin-bottom: 4px;
margin-bottom: var(--space-1);
}
.avatar-info .email {
font-size: 14px;
font-size: var(--text-base);
color: var(--color-text-subtle);
margin-bottom: 8px;
margin-bottom: var(--space-2);
}
.avatar-info .role-badge {
display: inline-flex;
align-items: center;
gap: 5px;
font-size: 12px;
font-weight: 600;
padding: 4px 12px;
border-radius: 20px;
font-size: var(--text-xs);
font-weight: var(--weight-semibold);
padding: var(--space-1) var(--space-3);
border-radius: var(--radius-4xl);
}
.role-badge-admin {
background: var(--color-role-admin-bg);
@@ -173,7 +173,7 @@ body {
.info-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
gap: var(--space-4);
}
@media (max-width: 560px) {
.info-grid {
@@ -181,9 +181,9 @@ body {
}
}
.info-item {
padding: 16px;
padding: var(--space-4);
background: var(--color-bg-alt);
border-radius: 12px;
border-radius: var(--radius-2xl);
border: 1px solid var(--color-border);
}
.info-item .info-label {
@@ -191,31 +191,31 @@ body {
color: var(--color-text-faint);
text-transform: uppercase;
letter-spacing: 0.06em;
font-weight: 700;
margin-bottom: 4px;
font-weight: var(--weight-bold);
margin-bottom: var(--space-1);
display: flex;
align-items: center;
gap: 6px;
gap: var(--space-1-5);
}
.info-item .info-label i {
font-size: 12px;
font-size: var(--text-xs);
color: var(--color-text-dark);
}
.info-item .info-value {
font-size: 15px;
font-weight: 600;
font-weight: var(--weight-semibold);
color: var(--color-text-heading);
}
/* ── Storage ── */
.storage-section {
margin-top: 4px;
margin-top: var(--space-1);
}
.storage-stats {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 14px;
margin-bottom: 16px;
gap: var(--space-3-5);
margin-bottom: var(--space-4);
}
@media (max-width: 560px) {
.storage-stats {
@@ -224,26 +224,26 @@ body {
}
.storage-stat {
text-align: center;
padding: 16px;
padding: var(--space-4);
background: var(--color-bg-hover);
border-radius: 12px;
border-radius: var(--radius-2xl);
border: 1px solid var(--color-border);
}
.storage-stat .stat-value {
font-size: 1.5rem;
font-weight: 800;
font-size: var(--text-2xl);
font-weight: var(--weight-extrabold);
color: var(--color-text-heading);
}
.storage-stat .stat-label {
font-size: 11px;
font-size: var(--text-2xs);
color: var(--color-text-faint);
text-transform: uppercase;
letter-spacing: 0.06em;
font-weight: 600;
margin-top: 2px;
font-weight: var(--weight-semibold);
margin-top: var(--space-0-5);
}
.storage-bar-wrap {
margin-top: 4px;
margin-top: var(--space-1);
}
.storage-bar {
height: 10px;
@@ -266,29 +266,29 @@ body {
background: var(--color-storage-fill-red);
}
.storage-text {
font-size: 12px;
font-size: var(--text-xs);
color: var(--color-text-faint);
text-align: right;
margin-top: 6px;
margin-top: var(--space-1-5);
}
/* ── Change Password ── */
.form-group {
margin-bottom: 16px;
margin-bottom: var(--space-4);
}
.form-group label {
display: block;
font-size: 13px;
font-weight: 600;
margin-bottom: 4px;
font-size: var(--text-sm);
font-weight: var(--weight-semibold);
margin-bottom: var(--space-1);
color: var(--color-text-dark);
}
.form-group input {
width: 100%;
padding: 10px 14px;
padding: var(--space-2-5) var(--space-3-5);
border: 2px solid var(--color-border);
border-radius: 10px;
font-size: 14px;
border-radius: var(--radius-xl);
font-size: var(--text-base);
background: var(--color-bg-input);
transition: all 0.2s;
font-family: inherit;
@@ -305,23 +305,23 @@ body {
}
.form-group small {
color: var(--color-text-faint);
font-size: 12px;
font-size: var(--text-xs);
display: block;
margin-top: 3px;
}
.btn {
padding: 10px 22px;
padding: var(--space-2-5) 22px;
border: none;
border-radius: 10px;
font-size: 14px;
font-weight: 600;
border-radius: var(--radius-xl);
font-size: var(--text-base);
font-weight: var(--weight-semibold);
cursor: pointer;
transition: all 0.15s;
white-space: nowrap;
display: inline-flex;
align-items: center;
gap: 6px;
gap: var(--space-1-5);
}
.btn-primary {
background: var(--color-accent-gradient);
@@ -339,11 +339,11 @@ body {
}
.alert {
padding: 12px 16px;
border-radius: 10px;
font-size: 13px;
margin-top: 14px;
font-weight: 500;
padding: var(--space-3) var(--space-4);
border-radius: var(--radius-xl);
font-size: var(--text-sm);
margin-top: var(--space-3-5);
font-weight: var(--weight-medium);
}
.alert-success {
background: var(--color-badge-success-bg);
@@ -358,22 +358,22 @@ body {
/* ── App Passwords ── */
.section-desc {
font-size: 13px;
font-size: var(--text-sm);
color: var(--color-text-subtle);
margin-bottom: 16px;
line-height: 1.5;
margin-bottom: var(--space-4);
line-height: var(--leading-normal);
}
.scope-checkboxes {
display: flex;
gap: 16px;
gap: var(--space-4);
flex-wrap: wrap;
}
.checkbox-label {
display: flex;
align-items: center;
gap: 5px;
font-size: 13px;
font-weight: 500;
font-size: var(--text-sm);
font-weight: var(--weight-medium);
color: var(--color-text-dark);
cursor: pointer;
}
@@ -384,10 +384,10 @@ body {
}
.form-select {
width: 100%;
padding: 10px 14px;
padding: var(--space-2-5) var(--space-3-5);
border: 2px solid var(--color-border);
border-radius: 10px;
font-size: 14px;
border-radius: var(--radius-xl);
font-size: var(--text-base);
background: var(--color-bg-hover);
color: var(--color-text-heading);
font-family: inherit;
@@ -418,28 +418,28 @@ body {
transform: translateY(-1px);
}
.btn-sm {
padding: 6px 12px;
font-size: 12px;
border-radius: 8px;
padding: var(--space-1-5) var(--space-3);
font-size: var(--text-xs);
border-radius: var(--radius-lg);
}
.app-pw-table {
width: 100%;
border-collapse: collapse;
font-size: 13px;
font-size: var(--text-sm);
}
.app-pw-table th {
text-align: left;
font-size: 11px;
font-size: var(--text-2xs);
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--color-text-faint);
font-weight: 700;
padding: 8px 10px;
font-weight: var(--weight-bold);
padding: var(--space-2) var(--space-2-5);
border-bottom: 2px solid var(--color-border);
}
.app-pw-table td {
padding: 10px;
padding: var(--space-2-5);
border-bottom: 1px solid var(--color-border-light);
vertical-align: middle;
}
@@ -447,23 +447,23 @@ body {
border-bottom: none;
}
.app-pw-label-cell {
font-weight: 600;
font-weight: var(--weight-semibold);
color: var(--color-text-heading);
}
.app-pw-prefix code {
font-size: 12px;
font-size: var(--text-xs);
background: var(--color-border-light);
padding: 2px 8px;
border-radius: 6px;
padding: var(--space-0-5) var(--space-2);
border-radius: var(--radius-md);
color: var(--color-text-subtle);
}
.badge {
display: inline-block;
font-size: 11px;
font-weight: 600;
padding: 2px 10px;
border-radius: 12px;
font-size: var(--text-2xs);
font-weight: var(--weight-semibold);
padding: var(--space-0-5) var(--space-2-5);
border-radius: var(--radius-2xl);
}
.badge-active {
background: var(--color-badge-success-bg);
@@ -476,7 +476,7 @@ body {
@media (max-width: 640px) {
.app-pw-table {
font-size: 12px;
font-size: var(--text-xs);
}
.app-pw-table th:nth-child(3),
.app-pw-table td:nth-child(3),
@@ -487,83 +487,79 @@ body {
}
.app-pw-empty {
text-align: center;
padding: 24px;
padding: var(--space-6);
color: var(--color-text-faint);
font-size: 13px;
font-size: var(--text-sm);
}
.app-pw-empty i {
margin-right: 6px;
margin-right: var(--space-1-5);
}
.hidden {
display: none;
}
.app-pw-warn {
margin-bottom: 8px;
margin-bottom: var(--space-2);
}
.app-pw-dismiss {
margin-top: 10px;
margin-top: var(--space-2-5);
}
.app-pw-actions {
display: flex;
gap: 8px;
gap: var(--space-2);
}
.app-pw-new-btn {
margin-top: 14px;
margin-top: var(--space-3-5);
}
.app-pw-created-box {
position: relative;
}
.app-pw-token-row {
display: flex;
gap: 8px;
gap: var(--space-2);
align-items: center;
margin-bottom: 8px;
margin-bottom: var(--space-2);
}
.app-pw-token-input {
flex: 1;
padding: 10px 14px;
padding: var(--space-2-5) var(--space-3-5);
border: 2px solid var(--color-badge-success-border);
border-radius: 10px;
font-size: 14px;
border-radius: var(--radius-xl);
font-size: var(--text-base);
font-family: "Courier New", Courier, monospace;
background: var(--color-badge-success-fill-faint);
color: var(--color-badge-success-text);
}
.app-pw-instr-list {
font-size: 12px;
line-height: 1.8;
margin-top: 8px;
font-size: var(--text-xs);
line-height: var(--leading-loose);
margin-top: var(--space-2);
}
.app-pw-instr-list code {
background: var(--color-badge-success-fill-faint);
padding: 1px 6px;
border-radius: 4px;
font-size: 12px;
padding: 1px var(--space-1-5);
border-radius: var(--radius-sm);
font-size: var(--text-xs);
}
/* ── Loading / Error ── */
#loading {
text-align: center;
padding: 80px;
padding: var(--space-20);
color: var(--color-text-faint);
font-size: 15px;
}
#loading i {
font-size: 32px;
font-size: var(--text-4xl);
color: var(--color-accent);
display: block;
margin-bottom: 12px;
margin-bottom: var(--space-3);
animation: spin 1s linear infinite;
}
@keyframes spin {
to {
transform: rotate(360deg);
}
}
/* @keyframes spin → base/animations.css (canonical, loaded via main.css). */
#auth-error {
text-align: center;
padding: 80px 20px;
padding: var(--space-20) var(--space-5);
}
#auth-error .err-icon {
width: 80px;
@@ -573,33 +569,33 @@ body {
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 20px;
margin: 0 auto var(--space-5);
}
#auth-error .err-icon i {
font-size: 32px;
font-size: var(--text-4xl);
color: var(--color-danger-alt);
}
#auth-error h2 {
color: var(--color-error-text-dark);
margin-bottom: 8px;
font-size: 20px;
margin-bottom: var(--space-2);
font-size: var(--text-xl);
}
#auth-error p {
color: var(--color-text-subtle);
margin-bottom: 20px;
font-size: 14px;
margin-bottom: var(--space-5);
font-size: var(--text-base);
}
#auth-error a {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 10px 24px;
gap: var(--space-1-5);
padding: var(--space-2-5) var(--space-6);
background: var(--color-accent-gradient);
color: var(--color-sidebar-text-active);
text-decoration: none;
border-radius: 10px;
font-weight: 600;
font-size: 14px;
border-radius: var(--radius-xl);
font-weight: var(--weight-semibold);
font-size: var(--text-base);
box-shadow: 0 3px 12px var(--color-accent-shadow);
transition: all 0.2s;
}
@@ -610,22 +606,22 @@ body {
/* ── App Passwords ── */
.app-pw-desc {
font-size: 13px;
font-size: var(--text-sm);
color: var(--color-text-subtle);
margin-bottom: 16px;
line-height: 1.5;
margin-bottom: var(--space-4);
line-height: var(--leading-normal);
}
.app-pw-create {
display: flex;
gap: 10px;
margin-bottom: 16px;
gap: var(--space-2-5);
margin-bottom: var(--space-4);
}
.app-pw-create input {
flex: 1;
padding: 10px 14px;
padding: var(--space-2-5) var(--space-3-5);
border: 2px solid var(--color-border);
border-radius: 10px;
font-size: 14px;
border-radius: var(--radius-xl);
font-size: var(--text-base);
background: var(--color-bg-input);
transition: all 0.2s;
font-family: inherit;
@@ -645,42 +641,42 @@ body {
.app-pw-created {
background: var(--color-badge-success-bg);
border: 1px solid var(--color-badge-success-border);
border-radius: 12px;
padding: 16px;
margin-bottom: 16px;
border-radius: var(--radius-2xl);
padding: var(--space-4);
margin-bottom: var(--space-4);
}
.app-pw-created-label {
font-size: 13px;
font-size: var(--text-sm);
color: var(--color-badge-success-text);
margin-bottom: 8px;
font-weight: 500;
margin-bottom: var(--space-2);
font-weight: var(--weight-medium);
}
.app-pw-created-value {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 6px;
gap: var(--space-2-5);
margin-bottom: var(--space-1-5);
}
.app-pw-created-value code {
font-family: "SF Mono", SFMono-Regular, Consolas, "Liberation Mono", Menlo, monospace;
font-size: 16px;
font-weight: 700;
font-size: var(--text-md);
font-weight: var(--weight-bold);
color: var(--color-badge-success-text);
letter-spacing: 1px;
background: var(--color-badge-success-bg-medium);
padding: 8px 14px;
border-radius: 8px;
padding: var(--space-2) var(--space-3-5);
border-radius: var(--radius-lg);
flex: 1;
word-break: break-all;
}
.btn-copy {
padding: 8px 12px;
padding: var(--space-2) var(--space-3);
border: none;
border-radius: 8px;
border-radius: var(--radius-lg);
background: var(--color-secret-green);
color: var(--color-sidebar-text-active);
cursor: pointer;
font-size: 14px;
font-size: var(--text-base);
transition: all 0.15s;
flex-shrink: 0;
}
@@ -688,13 +684,13 @@ body {
background: var(--color-badge-success-fill);
}
.app-pw-created small {
font-size: 12px;
font-size: var(--text-xs);
color: var(--color-badge-success-fill);
}
.app-pw-table {
width: 100%;
border-collapse: collapse;
font-size: 14px;
font-size: var(--text-base);
}
.app-pw-table thead th {
text-align: left;
@@ -702,12 +698,12 @@ body {
color: var(--color-text-faint);
text-transform: uppercase;
letter-spacing: 0.06em;
font-weight: 700;
padding: 8px 12px;
font-weight: var(--weight-bold);
padding: var(--space-2) var(--space-3);
border-bottom: 1px solid var(--color-border);
}
.app-pw-table tbody td {
padding: 10px 12px;
padding: var(--space-2-5) var(--space-3);
border-bottom: 1px solid var(--color-border-light);
color: var(--color-text-dark);
}
@@ -715,13 +711,13 @@ body {
border-bottom: none;
}
.btn-danger-sm {
padding: 6px 10px;
padding: var(--space-1-5) var(--space-2-5);
border: none;
border-radius: 8px;
border-radius: var(--radius-lg);
background: var(--color-danger-light-bg);
color: var(--color-error-text-dark);
cursor: pointer;
font-size: 13px;
font-size: var(--text-sm);
transition: all 0.15s;
}
.btn-danger-sm:hover {
@@ -731,23 +727,23 @@ body {
.app-pw-empty {
text-align: center;
color: var(--color-text-faint);
font-size: 14px;
padding: 24px 0;
font-size: var(--text-base);
padding: var(--space-6) 0;
}
.app-pw-auto-section {
margin-top: 20px;
margin-top: var(--space-5);
border-top: 1px solid var(--color-border);
padding-top: 16px;
padding-top: var(--space-4);
}
.app-pw-auto-toggle {
display: flex;
align-items: center;
gap: 8px;
gap: var(--space-2);
background: none;
border: none;
cursor: pointer;
font-size: 14px;
font-weight: 600;
font-size: var(--text-base);
font-weight: var(--weight-semibold);
color: var(--color-text-subtle);
padding: 0;
transition: color 0.15s;
@@ -757,23 +753,23 @@ body {
color: var(--color-text-dark);
}
.app-pw-auto-toggle i {
font-size: 11px;
font-size: var(--text-2xs);
transition: transform 0.15s;
width: 12px;
}
.app-pw-auto-count {
font-size: 11px;
font-weight: 700;
font-size: var(--text-2xs);
font-weight: var(--weight-bold);
background: var(--color-border);
color: var(--color-text-subtle);
padding: 2px 8px;
border-radius: 10px;
padding: var(--space-0-5) var(--space-2);
border-radius: var(--radius-xl);
margin-left: auto;
}
.app-pw-auto-desc {
font-size: 12px;
font-size: var(--text-xs);
color: var(--color-text-faint);
margin: 12px 0 8px;
margin: var(--space-3) 0 var(--space-2);
line-height: 1.4;
}
@@ -807,7 +803,7 @@ body {
display: flex;
align-items: center;
justify-content: center;
font-size: 11px;
font-size: var(--text-2xs);
cursor: pointer;
transition:
opacity 0.15s,
@@ -820,33 +816,33 @@ body {
/* OIDC note shown instead of edit button */
.avatar-oidc-note {
font-size: 12px;
font-size: var(--text-xs);
color: var(--color-text-faint);
margin-top: 6px;
margin-top: var(--space-1-5);
font-style: italic;
}
/* ── Photo edit panel ──────────────────────────────────────────────────────── */
.avatar-edit-panel {
margin-top: 20px;
padding-top: 20px;
margin-top: var(--space-5);
padding-top: var(--space-5);
border-top: 1px solid var(--color-border);
}
.avatar-edit-tabs {
display: flex;
gap: 4px;
margin-bottom: 16px;
gap: var(--space-1);
margin-bottom: var(--space-4);
}
.avatar-tab {
padding: 6px 16px;
padding: var(--space-1-5) var(--space-4);
border: 1px solid var(--color-border);
border-radius: 20px;
border-radius: var(--radius-4xl);
background: none;
color: var(--color-text-subtle);
font-size: 13px;
font-size: var(--text-sm);
cursor: pointer;
transition:
background 0.15s,
@@ -863,17 +859,17 @@ body {
.avatar-tab-pane {
display: flex;
flex-direction: column;
gap: 8px;
gap: var(--space-2);
}
.avatar-url-input {
width: 100%;
padding: 10px 14px;
padding: var(--space-2-5) var(--space-3-5);
border: 1px solid var(--color-border);
border-radius: 10px;
border-radius: var(--radius-xl);
background: var(--color-bg-alt);
color: var(--color-text-dark);
font-size: 14px;
font-size: var(--text-base);
box-sizing: border-box;
}
@@ -884,7 +880,7 @@ body {
}
.avatar-hint {
font-size: 12px;
font-size: var(--text-xs);
color: var(--color-text-faint);
}
@@ -896,13 +892,13 @@ body {
.avatar-file-label {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 10px 20px;
gap: var(--space-2);
padding: var(--space-2-5) var(--space-5);
border: 1px dashed var(--color-border);
border-radius: 10px;
border-radius: var(--radius-xl);
background: var(--color-bg-alt);
color: var(--color-text-subtle);
font-size: 13px;
font-size: var(--text-sm);
cursor: pointer;
transition:
border-color 0.15s,
@@ -925,11 +921,11 @@ body {
.avatar-edit-actions {
display: flex;
gap: 8px;
gap: var(--space-2);
flex-wrap: wrap;
margin-top: 16px;
margin-top: var(--space-4);
}
#p-avatar-status {
margin-top: 12px;
margin-top: var(--space-3);
}
static/css/views/recent.css
+4 -4
View File
@@ -37,20 +37,20 @@
flex-direction: column;
align-items: center;
justify-content: center;
padding: 50px 20px;
padding: 50px var(--space-5);
text-align: center;
color: var(--color-recent-muted);
}
.recents-empty-state i {
font-size: 48px;
font-size: var(--text-6xl);
color: var(--color-recent-muted);
margin-bottom: 20px;
margin-bottom: var(--space-5);
opacity: 0.6;
}
.recents-empty-state p {
margin-bottom: 10px;
margin-bottom: var(--space-2-5);
max-width: 400px;
}
static/css/views/share-public.css
+58 -36
View File
@@ -7,33 +7,44 @@
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
background: var(--color-bg-hover);
/* Shared brand backdrop (centralised in --brand-ambient). */
background: var(--brand-ambient);
color: var(--color-text-heading);
display: flex;
justify-content: center;
align-items: safe center;
height: auto;
min-height: 100vh;
min-height: 100dvh;
overflow: auto;
padding: 1rem;
}
.share-card {
background: var(--color-bg-surface);
border-radius: var(--radius, 12px);
box-shadow: 0 4px 24px var(--color-shadow-sm);
border-radius: var(--radius-3xl);
box-shadow: var(--shadow-xl);
padding: 2.5rem;
max-width: 480px;
width: 100%;
text-align: center;
}
.share-trust {
margin-top: 1.5rem;
display: flex;
align-items: center;
justify-content: center;
gap: var(--space-1-5);
font-size: var(--text-xs);
color: var(--color-text-faint);
}
.share-logo {
margin-bottom: 1.5rem;
}
.share-logo h1 {
font-size: 1.5rem;
font-weight: 700;
font-size: var(--text-2xl);
font-weight: var(--weight-bold);
}
.share-logo span {
color: var(--color-primary);
@@ -64,18 +75,29 @@ p.subtitle {
margin: 0 auto 1rem;
animation: spin 0.7s linear infinite;
}
@keyframes spin {
to {
transform: rotate(360deg);
}
}
/* @keyframes spin → base/animations.css (canonical, loaded via main.css). */
/* Icons */
.share-icon {
font-size: 3rem;
font-size: var(--text-6xl);
margin-bottom: 0.75rem;
}
/* Inline SVG state icons (replaced the per-OS emoji). Colour comes from the
container via stroke: currentColor. */
.share-icon svg {
width: 56px;
height: 56px;
}
#share-expired .share-icon {
color: var(--color-error-text);
}
#share-file .share-icon {
color: var(--color-accent-text);
}
/* Password form */
#password-form {
text-align: left;
@@ -83,9 +105,9 @@ p.subtitle {
#password-input {
width: 100%;
padding: 0.75rem 1rem;
font-size: 1rem;
font-size: var(--text-md);
border: 2px solid var(--color-border);
border-radius: 8px;
border-radius: var(--radius-lg);
outline: none;
background: var(--color-bg-surface);
color: var(--color-text-heading);
@@ -112,9 +134,9 @@ FIXME: use components/buttons.css ?
background: var(--color-primary);
color: var(--color-bg-surface);
border: none;
border-radius: 8px;
border-radius: var(--radius-lg);
font-size: 0.95rem;
font-weight: 600;
font-weight: var(--weight-semibold);
cursor: pointer;
text-decoration: none;
text-align: center;
@@ -193,8 +215,8 @@ body.gallery-mode .share-logo {
}
.gallery-title {
flex: 1 1 200px;
font-size: 1.25rem;
font-weight: 600;
font-size: var(--text-xl);
font-weight: var(--weight-semibold);
margin: 0;
word-break: break-word;
color: var(--color-text-heading);
@@ -213,7 +235,7 @@ body.gallery-mode .share-logo {
color: var(--color-text-heading);
font-size: 0.85rem;
padding: 0.4rem 0.85rem;
border-radius: 999px;
border-radius: var(--radius-full);
background: var(--color-bg-hover);
border: 1px solid var(--color-border);
transition: background 0.15s;
@@ -226,7 +248,7 @@ body.gallery-mode .share-logo {
display: inline-flex;
background: var(--color-bg-hover);
border: 1px solid var(--color-border);
border-radius: 999px;
border-radius: var(--radius-full);
padding: 3px;
}
.gallery-view-toggle button {
@@ -234,7 +256,7 @@ body.gallery-mode .share-logo {
border: none;
color: var(--color-text-gray);
padding: 0.35rem 0.75rem;
border-radius: 999px;
border-radius: var(--radius-full);
cursor: pointer;
font-size: 0.85rem;
display: inline-flex;
@@ -252,14 +274,14 @@ body.gallery-mode .share-logo {
align-items: center;
gap: 0.45rem;
padding: 0.55rem 1rem;
border-radius: 999px;
border-radius: var(--radius-full);
width: auto;
font-size: 0.85rem;
}
.gallery-section-title {
font-size: 0.75rem;
font-weight: 600;
font-size: var(--text-xs);
font-weight: var(--weight-semibold);
text-transform: uppercase;
letter-spacing: 0.5px;
color: var(--color-text-gray);
@@ -278,7 +300,7 @@ body.gallery-mode .share-logo {
padding: 0.75rem 0.85rem;
background: var(--color-bg-hover);
border: 1px solid var(--color-border);
border-radius: 12px;
border-radius: var(--radius-2xl);
color: var(--color-text-heading);
text-decoration: none;
transition:
@@ -296,13 +318,13 @@ body.gallery-mode .share-logo {
}
.folder-card .card-name {
font-size: 0.9rem;
font-weight: 500;
font-weight: var(--weight-medium);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.folder-card .card-meta {
font-size: 0.75rem;
font-size: var(--text-xs);
color: var(--color-text-gray);
}
@@ -315,7 +337,7 @@ body.gallery-mode .share-logo {
display: block;
background: var(--color-bg-hover);
border: 1px solid var(--color-border);
border-radius: 12px;
border-radius: var(--radius-2xl);
color: var(--color-text-heading);
text-decoration: none;
overflow: hidden;
@@ -367,7 +389,7 @@ body.gallery-mode .share-logo {
.file-thumb .video-marker::before {
content: "▶";
color: var(--color-on-overlay);
font-size: 28px;
font-size: var(--text-3xl);
text-shadow: 0 2px 8px var(--color-overlay-shadow);
}
.file-card .card-body {
@@ -376,15 +398,15 @@ body.gallery-mode .share-logo {
}
.file-card .card-name {
font-size: 0.85rem;
font-weight: 500;
font-weight: var(--weight-medium);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.file-card .card-meta {
font-size: 0.75rem;
font-size: var(--text-xs);
color: var(--color-text-gray);
margin-top: 2px;
margin-top: var(--space-0-5);
}
/* ── List view ───────────────────────────────────────────────── */
@@ -397,7 +419,7 @@ body[data-share-view="list"] .file-card {
gap: 0.75rem;
padding: 0.5rem 0.75rem;
margin-bottom: 0.35rem;
border-radius: 10px;
border-radius: var(--radius-xl);
}
body[data-share-view="list"] .file-card:hover {
transform: none;
@@ -407,14 +429,14 @@ body[data-share-view="list"] .file-thumb {
height: 44px;
aspect-ratio: 1 / 1;
flex: none;
border-radius: 8px;
border-radius: var(--radius-lg);
}
body[data-share-view="list"] .file-thumb .file-type-icon {
width: 24px;
height: 24px;
}
body[data-share-view="list"] .file-thumb .video-marker::before {
font-size: 14px;
font-size: var(--text-base);
}
body[data-share-view="list"] .file-card .card-body {
padding: 0;
@@ -462,7 +484,7 @@ body[data-share-view="list"] .file-card .card-body {
background: var(--color-overlay-button);
color: var(--color-on-overlay);
border: none;
border-radius: 999px;
border-radius: var(--radius-full);
padding: 0.5rem 0.85rem;
font-size: 0.85rem;
text-decoration: none;
static/css/views/sharedWithMe.css
+1 -1
View File
@@ -9,5 +9,5 @@
.swm-load-more-wrapper {
display: flex;
justify-content: center;
padding: 16px 0 24px;
padding: var(--space-4) 0 var(--space-6);
}