XingfenD/yoresee_dropbox
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
5bb42a8b8a8ad0fed0e8cfe26ee8702a8f384b8d
yoresee_dropbox/web/styles/components.css
T
XingfenD 5bb42a8b8a feat(web): add i18n, light/dark theme switching, and version constant 
- Add i18n (English + 简体中文) with a locale store, $t() magic, and a language toggle (persisted)
- Add light/dark/system theme switching via a theme store and [data-theme] token overrides
- Set the theme before paint to avoid a flash of the wrong theme
- Add frontend version constant web/version.js (window.YDROPBX_VERSION) shown in the app footer
- Update AGENTS.md version-control convention to mention web/version.js
- Bump version to 0.1.1 across frontend, webui changelog, and backend constant
2026-08-27 15:21:21 +08:00

464 lines
9.6 KiB
CSS
Raw Blame History

/* ============================================================
Components
============================================================ */
/* ----- Icon helper (x-html injected SVGs) ----- */
.icon {
display: inline-flex;
align-items: center;
justify-content: center;
line-height: 0;
}
.icon svg {
display: block;
width: 1em;
height: 1em;
}
/* ----- Header ----- */
.app-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: var(--space-8);
}
.header-actions {
display: flex;
align-items: center;
gap: var(--space-2);
}
.brand {
font-size: var(--text-2xl);
font-weight: 700;
letter-spacing: -0.4px;
color: var(--color-text);
}
.brand span {
color: var(--color-primary);
}
/* ----- Buttons ----- */
.btn {
display: inline-flex;
align-items: center;
gap: var(--space-2);
padding: var(--space-2) var(--space-4);
font-size: var(--text-sm);
font-weight: 500;
line-height: 1;
color: var(--color-text);
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
cursor: pointer;
transition: background var(--transition-fast), border-color var(--transition-fast),
color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast);
white-space: nowrap;
user-select: none;
}
.btn:hover {
background: var(--color-surface-hover);
}
.btn:active {
transform: translateY(1px);
}
.btn-primary {
background: var(--color-primary);
border-color: var(--color-primary);
color: #fff;
}
.btn-primary:hover {
background: var(--color-primary-hover);
border-color: var(--color-primary-hover);
}
.btn-danger {
color: var(--color-danger);
border-color: #fecaca;
}
.btn-danger:hover {
background: var(--color-danger-soft);
border-color: var(--color-danger);
}
.btn-ghost {
border-color: transparent;
background: transparent;
}
.btn-ghost:hover {
background: var(--color-surface-hover);
}
.btn-sm {
padding: var(--space-2) var(--space-3);
font-size: var(--text-xs);
}
.btn-logout {
color: var(--color-text-secondary);
font-size: var(--text-sm);
}
.btn-logout:hover {
color: var(--color-text);
}
/* Icon-only button */
.btn-icon {
padding: var(--space-2);
color: var(--color-text-secondary);
}
.btn-icon:hover {
color: var(--color-text);
background: var(--color-surface-hover);
}
.btn-icon.btn-danger:hover {
color: var(--color-danger);
background: var(--color-danger-soft);
}
/* ----- Section (card) ----- */
.section {
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-sm);
margin-bottom: var(--space-5);
overflow: hidden;
}
.section-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: var(--space-4) var(--space-5);
border-bottom: 1px solid var(--color-border);
}
.section-header h2 {
display: flex;
align-items: center;
gap: var(--space-2);
font-size: var(--text-lg);
font-weight: 600;
}
.section-header h2 .icon {
font-size: 1.05em;
color: var(--color-primary);
}
.badge {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 22px;
height: 22px;
padding: 0 var(--space-2);
font-size: var(--text-xs);
font-weight: 600;
color: var(--color-text-secondary);
background: var(--color-bg);
border-radius: var(--radius-full);
}
/* ----- Drop zone ----- */
.drop-zone {
position: relative;
margin: var(--space-4) var(--space-5);
padding: var(--space-8) var(--space-5);
text-align: center;
border: 2px dashed var(--color-border-strong);
border-radius: var(--radius-md);
cursor: pointer;
transition: border-color var(--transition-base), background var(--transition-base);
}
.drop-zone:hover,
.drop-zone.is-dragover {
border-color: var(--color-primary);
background: var(--color-primary-soft);
}
.drop-zone-input {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
opacity: 0;
cursor: pointer;
}
.drop-zone-icon {
font-size: 1.6rem;
color: var(--color-text-tertiary);
margin-bottom: var(--space-2);
transition: color var(--transition-base);
}
.drop-zone:hover .drop-zone-icon,
.drop-zone.is-dragover .drop-zone-icon {
color: var(--color-primary);
}
.drop-zone-text {
font-size: var(--text-sm);
color: var(--color-text-secondary);
}
.drop-zone-text strong {
color: var(--color-primary);
font-weight: 600;
}
/* ----- File list ----- */
.file-list {
list-style: none;
}
.file-row {
display: flex;
align-items: center;
gap: var(--space-3);
padding: var(--space-3) var(--space-5);
border-bottom: 1px solid var(--color-divider);
transition: background var(--transition-fast);
}
.file-row:last-child {
border-bottom: none;
}
.file-row:hover {
background: var(--color-surface-hover);
}
.file-icon {
display: flex;
align-items: center;
justify-content: center;
width: 38px;
height: 38px;
flex-shrink: 0;
font-size: 18px;
color: var(--color-primary);
background: var(--color-primary-soft);
border-radius: var(--radius-md);
}
.file-info {
flex: 1;
min-width: 0;
}
.file-name {
font-size: var(--text-sm);
font-weight: 500;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.file-actions {
display: flex;
gap: var(--space-1);
flex-shrink: 0;
opacity: 0;
transition: opacity var(--transition-fast);
}
.file-row:hover .file-actions,
.file-row:focus-within .file-actions {
opacity: 1;
}
/* ----- Empty state ----- */
.empty-state {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--space-2);
padding: var(--space-10) var(--space-5);
text-align: center;
color: var(--color-text-secondary);
}
.empty-state-icon {
font-size: 2rem;
color: var(--color-text-tertiary);
opacity: 0.6;
}
.empty-state-text {
font-size: var(--text-sm);
}
/* ----- Toast ----- */
.toast {
position: fixed;
left: 50%;
bottom: var(--space-6);
transform: translateX(-50%) translateY(120%);
padding: var(--space-3) var(--space-5);
font-size: var(--text-sm);
font-weight: 500;
color: var(--color-toast-fg);
background: var(--color-toast-bg);
border-radius: var(--radius-md);
box-shadow: var(--shadow-lg);
opacity: 0;
pointer-events: none;
z-index: var(--z-toast);
transition: transform var(--transition-slow), opacity var(--transition-slow);
}
.toast.show {
opacity: 1;
transform: translateX(-50%) translateY(0);
}
@media (prefers-reduced-motion: reduce) {
* {
transition-duration: 0.01ms !important;
}
}
/* ----- App footer (version) ----- */
.app-footer {
display: flex;
align-items: center;
justify-content: center;
gap: var(--space-2);
margin-top: var(--space-8);
font-size: var(--text-xs);
color: var(--color-text-tertiary);
}
.app-footer-version {
font-variant-numeric: tabular-nums;
padding: 2px 8px;
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius-full);
}
/* ----- Modal (confirmation dialog) ----- */
.modal-overlay {
position: fixed;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
padding: var(--space-4);
background: rgba(16, 24, 40, 0.45);
backdrop-filter: blur(2px);
z-index: var(--z-modal);
}
.modal {
width: 100%;
max-width: 380px;
padding: var(--space-6);
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-lg);
}
.modal-title {
font-size: var(--text-lg);
font-weight: 600;
margin-bottom: var(--space-2);
}
.modal-body {
font-size: var(--text-sm);
color: var(--color-text-secondary);
margin-bottom: var(--space-6);
}
.modal-actions {
display: flex;
justify-content: flex-end;
gap: var(--space-2);
}
/* ----- Login ----- */
.page-topbar {
position: fixed;
top: var(--space-4);
right: var(--space-4);
display: flex;
gap: var(--space-2);
z-index: var(--z-toast);
}
.login-wrap {
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
padding: var(--space-5);
}
.login-card {
width: 100%;
max-width: 380px;
padding: var(--space-10) var(--space-8);
text-align: center;
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-lg);
}
.login-card h1 {
font-size: var(--text-2xl);
font-weight: 700;
margin-bottom: var(--space-1);
}
.login-card h1 span {
color: var(--color-primary);
}
.login-card p {
font-size: var(--text-sm);
color: var(--color-text-secondary);
margin-bottom: var(--space-6);
}
.login-card form {
display: flex;
flex-direction: column;
gap: var(--space-3);
}
.login-card input {
width: 100%;
padding: var(--space-3) var(--space-4);
font-size: var(--text-base);
color: var(--color-text);
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
outline: none;
transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.login-card input:focus {
border-color: var(--color-primary);
box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}
.login-card .btn-primary {
justify-content: center;
padding: var(--space-3);
font-size: var(--text-base);
}
.login-error {
display: none;
font-size: var(--text-sm);
color: var(--color-danger);
}
.login-error.show {
display: block;
}
/* ----- Responsive ----- */
@media (max-width: 600px) {
.section-header {
padding: var(--space-3) var(--space-4);
}
.file-row {
padding: var(--space-3) var(--space-4);
}
.file-actions {
opacity: 1;
}
.drop-zone {
margin: var(--space-3) var(--space-4);
}
.login-card {
padding: var(--space-8) var(--space-5);
}
}
Reference in New Issue View Git Blame Copy Permalink