nils/papercrate
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

frontend

Browse Source
This commit is contained in:
nils
2025-10-24 15:13:37 +02:00
parent e33ab71fac
commit dc633783e0
10 changed files with 283 additions and 237 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/styles.css
+134 -86
View File
@@ -1,59 +1,56 @@
:root {
color-scheme: light;
/* Neutrals */
--bg: #f6f6f6;
--surface: #fbfbfb;
--surface-subtle: #f3f3f3;
--fg: #2b2b2b;
--muted: #646a75;
--sidebar-fg: #5f6672;
--border: #dde1e6;
--shadow-faint: rgba(0, 0, 0, 0.06);
--shadow-soft: rgba(0, 0, 0, 0.12);
--shadow-medium: rgba(0, 0, 0, 0.18);
--overlay-backdrop: rgba(30, 33, 39, 0.45);
--overlay-shadow: rgba(30, 33, 39, 0.18);
/* Accent (primary action, selection, focus) */
--accent: #3f6ad8;
--accent-hover: #9bb6ff;
--on-accent: #ffffff;
/* master warmth bias: positive = warmer, negative = cooler */
--warmth: 3deg; /* try +5deg for warmer, -5deg for cooler */
/* Soft tints & outlines (for chips, row hovers, subtle fills) */
--accent-soft: rgba(63, 106, 216, 0.12);
--accent-elevated: rgba(63, 106, 216, 0.16);
--accent-elevated-strong: rgba(63, 106, 216, 0.22);
--accent-outline: rgba(63, 106, 216, 0.45);
--accent-outline-strong: rgba(63, 106, 216, 0.9);
--accent-focus: rgba(63, 106, 216, 0.85);
--surface-overlay: rgba(255, 255, 255, 0.82);
/* --- Neutrals --- */
--bg: oklch(0.97 0.001 calc(100deg + var(--warmth)));
--surface: oklch(0.985 0.001 calc(100deg + var(--warmth)));
--surface-subtle: oklch(0.96 0.002 calc(100deg + var(--warmth)));
--fg: oklch(0.32 0.005 calc(270deg + var(--warmth)));
--muted: oklch(0.54 0.008 calc(270deg + var(--warmth)));
--sidebar-fg: oklch(0.56 0.007 calc(270deg + var(--warmth)));
--border: oklch(0.88 0.002 calc(270deg + var(--warmth)));
/* States specific to explorer UX */
--row-hover-bg: rgba(63, 106, 216, 0.06);
--row-active-bg: rgba(63, 106, 216, 0.12);
--sidebar-hover-bg: rgba(63, 106, 216, 0.08);
--sidebar-active-bg: rgba(63, 106, 216, 0.16);
--selection-ring: #9bb6ff;
--documents-grid-title-size: 12px;
--documents-grid-icon-size: 128px;
/* --- Accent (primary) --- */
--accent: oklch(0.61 0.20 calc(260deg + var(--warmth)));
--accent-hover: oklch(0.70 0.18 calc(260deg + var(--warmth)));
--on-accent: oklch(1 0 0);
/* Semantic colors */
--success: #2e7d6b;
--success-subtle: rgba(46, 125, 107, 0.12);
--warning: #b98a2e;
--warning-subtle: rgba(185, 138, 46, 0.12);
--danger: #cc5a52;
--danger-border: rgba(204, 90, 82, 0.45);
--danger-soft: rgba(204, 90, 82, 0.12);
--danger-subtle: rgba(204, 90, 82, 0.08);
/* --- Derived accent states --- */
--accent-soft: color-mix(in oklch, var(--accent) 12%, transparent);
--accent-elevated: color-mix(in oklch, var(--accent) 16%, transparent);
--accent-elevated-strong: color-mix(in oklch, var(--accent) 22%, transparent);
--accent-outline: color-mix(in oklch, var(--accent) 45%, transparent);
--accent-outline-strong: color-mix(in oklch, var(--accent) 90%, transparent);
--accent-focus: color-mix(in oklch, var(--accent) 85%, transparent);
--surface-overlay: color-mix(in oklch, white 82%, transparent);
/* File-type accents (used for icons/labels) */
--file-folder: #e6a23c; /* folders */
--file-doc: #3f6ad8; /* docs */
--file-code: #5b9b5f; /* code */
--file-image: #9a6bd1; /* images */
--file-audio: #db6f9a; /* audio */
--file-archive: #9c7a59; /* zips */
/* --- Shadows & overlays --- */
--shadow-faint: color-mix(in oklch, black 6%, transparent);
--shadow-soft: color-mix(in oklch, black 12%, transparent);
--shadow-medium: color-mix(in oklch, black 18%, transparent);
--overlay-backdrop: color-mix(in oklch, oklch(0.22 0.015 calc(265deg + var(--warmth))) 45%, transparent);
--overlay-shadow: color-mix(in oklch, oklch(0.22 0.015 calc(265deg + var(--warmth))) 18%, transparent);
/* --- Semantic colors (relative warmth) --- */
--success: oklch(0.62 0.18 calc(190deg + var(--warmth)));
--warning: oklch(0.72 0.17 calc(95deg + var(--warmth)));
--danger: oklch(0.60 0.18 calc(35deg + var(--warmth)));
--success-subtle: color-mix(in oklch, var(--success) 12%, transparent);
--warning-subtle: color-mix(in oklch, var(--warning) 12%, transparent);
--danger-border: color-mix(in oklch, var(--danger) 45%, transparent);
--danger-soft: color-mix(in oklch, var(--danger) 12%, transparent);
--danger-subtle: color-mix(in oklch, var(--danger) 8%, transparent);
/* --- Explorer states --- */
--row-hover-bg: color-mix(in oklch, var(--accent) 6%, transparent);
--row-active-bg: color-mix(in oklch, var(--accent) 12%, transparent);
--sidebar-hover-bg: color-mix(in oklch, var(--accent) 8%, transparent);
--sidebar-active-bg: color-mix(in oklch, var(--accent) 16%, transparent);
--selection-ring: oklch(0.78 0.16 calc(260deg + var(--warmth)));
font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
font-size: 15px;
@@ -142,19 +139,40 @@ button.danger:hover:not([disabled]) {
background: var(--danger-subtle);
}
button.icon-button {
padding: 0.25rem 0.55rem;
min-width: auto;
.icon-button {
display: inline-flex;
align-items: center;
justify-content: center;
border: none;
background: transparent;
color: var(--muted);
padding: 0.25rem;
border-radius: 4px;
cursor: pointer;
transition: background 0.15s ease, color 0.15s ease;
}
button.icon-button.ghost {
.icon-button:hover:not([disabled]) {
background: var(--sidebar-hover-bg);
color: var(--fg);
}
.icon-button.danger {
color: var(--danger);
}
.icon-button.danger:hover:not([disabled]) {
background: var(--danger-subtle);
}
.icon-button.ghost {
border: none;
background: transparent;
color: var(--muted);
padding: 0.2rem;
}
button.icon-button.ghost:hover:not([disabled]) {
.icon-button.ghost:hover:not([disabled]) {
color: var(--danger);
background: transparent;
}
@@ -633,17 +651,6 @@ button.icon-button.ghost:hover:not([disabled]) {
font-size: 0.9rem;
}
.column {
background: transparent;
display: flex;
flex-direction: column;
min-height: 0;
}
.column + .column {
padding-left: 1.25rem;
}
.column-header {
display: flex;
align-items: center;
@@ -743,9 +750,6 @@ button.icon-button.ghost:hover:not([disabled]) {
gap: 0.25rem;
flex: 1;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
padding-right: 3rem;
}
.folder-row:hover {
@@ -830,6 +834,8 @@ button.icon-button.ghost:hover:not([disabled]) {
padding: 1.25rem;
color: var(--sidebar-fg);
box-shadow: inset -12px 0 24px -12px var(--shadow-faint);
display: flex;
flex-direction: column;
}
.sidebar__meta {
@@ -1070,11 +1076,17 @@ button.icon-button.ghost:hover:not([disabled]) {
.documents-panel {
padding: 1.25rem 1.25rem 0 1.25rem;
display: flex;
flex-direction: column;
min-height: 0;
}
.tags-panel,
.correspondents-panel {
padding: 1.25rem;
display: flex;
flex-direction: column;
min-height: 0;
}
.folder-row.is-drop-target {
@@ -1110,6 +1122,7 @@ button.icon-button.ghost:hover:not([disabled]) {
background: transparent;
min-height: 0;
padding-right: 0.3rem;
flex-grow: 1;
}
.documents-panel table {
@@ -1233,6 +1246,56 @@ button.icon-button.ghost:hover:not([disabled]) {
white-space: nowrap;
}
.documents-panel td.doc-list__name {
width: 100%;
}
.doc-entry {
display: flex;
align-items: center;
gap: 0.6rem;
}
.doc-entry--with-thumb .doc-entry__thumb {
flex: 0 0 auto;
display: flex;
align-items: center;
justify-content: center;
}
.doc-entry__thumb .document-thumbnail-wrapper {
display: flex;
align-items: center;
justify-content: center;
}
.doc-entry__main {
display: flex;
flex-direction: column;
gap: 0.35rem;
min-width: 0;
}
.doc-entry__name {
font-weight: 600;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
max-width: 100%;
}
.doc-entry__tags {
display: flex;
flex-wrap: wrap;
gap: 0.3rem;
}
.documents-panel td.actions .action-buttons {
display: inline-flex;
align-items: center;
gap: 0.3rem;
}
.documents-panel tbody tr {
background: transparent;
transition: background 0.15s ease;
@@ -1244,7 +1307,6 @@ button.icon-button.ghost:hover:not([disabled]) {
.documents-panel tbody tr.folder {
cursor: pointer;
font-weight: 600;
}
.documents-panel tbody tr.folder.focused {
@@ -1471,6 +1533,9 @@ button.icon-button.ghost:hover:not([disabled]) {
padding: 1.25rem;
overflow-y: auto;
box-shadow: 0 0 24px var(--shadow-faint);
display: flex;
flex-direction: column;
min-height: 0;
}
.detail-panel .column-body {
@@ -2110,23 +2175,6 @@ form.inline {
white-space: nowrap;
}
.doc-list__icon-button {
opacity: 0;
pointer-events: none;
padding: 0.14rem;
margin: 0;
transition: opacity 0.12s ease;
}
.doc-list__name-content:hover .doc-list__icon-button, .doc-list__name-content:focus-within .doc-list__icon-button {
opacity: 1;
pointer-events: auto;
}
.doc-list__icon {
width: 0.9rem;
height: 0.9rem;
}
.preview-pane__nav-button svg {
width: 100%;
height: 100%;