Tobias/Fichero
1
0
Fork 1
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add custom dark theme with Fichero brand blue accent

Browse Source 
Replace Bootstrap default dark grays and hardcoded colors with a
design-token system: surface levels, ink hierarchy, logo blue (#07addf)
as the single accent, mark-feed red for print indicators. Card browsers
get rounded corners, subtle borders, and hover-reveal action buttons.
This commit is contained in:
Hamza
2026-03-02 17:22:13 +01:00
parent fdbb25594e
commit f945a87c43
6 changed files with 272 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
web/src/components/designer-controls/LabelPresetsBrowser.svelte
View File

@@ -89,34 +89,52 @@
.card-wrapper {
width: 96px;
height: 96px;
border-radius: var(--radius-sm);
transition: background-color 0.15s;
}
.card-wrapper:hover {
background-color: var(--surface-1);
}
.card {
background-color: white;
background-color: var(--surface-2);
border: 1px solid var(--border-standard);
border-radius: var(--radius-sm);
position: relative;
overflow: hidden;
}
.card > .remove {
position: absolute;
top: 0;
right: 0;
opacity: 0;
transition: opacity 0.15s;
}
.card-wrapper:hover .remove {
opacity: 1;
}
.card > .remove > button {
padding: 0;
line-height: 100%;
font-size: 0.75rem;
}
.card > .label {
background-color: rgba(255, 255, 255, 0.8);
color: black;
border-radius: 8px;
color: var(--ink-secondary);
font-size: 0.7rem;
line-height: 1.2;
text-align: center;
padding: 2px 4px;
}
.card.print-start-left {
border-left: 2px solid #ff4646;
border-left: 2px solid var(--mark-feed);
}
.card.print-start-top {
border-top: 2px solid #ff4646;
border-top: 2px solid var(--mark-feed);
}
</style>

35
web/src/components/designer-controls/SavedLabelsBrowser.svelte
View File

@@ -105,11 +105,20 @@
.card-wrapper {
width: 96px;
height: 96px;
border-radius: var(--radius-sm);
transition: background-color 0.15s;
}
.card-wrapper:hover {
background-color: var(--surface-1);
}
.card {
background-color: white;
background-color: var(--surface-2);
border: 1px solid var(--border-standard);
border-radius: var(--radius-sm);
position: relative;
overflow: hidden;
}
.card > .buttons {
@@ -117,25 +126,39 @@
top: 0;
right: 0;
z-index: 2;
opacity: 0;
transition: opacity 0.15s;
}
.card-wrapper:hover .buttons {
opacity: 1;
}
.card > .buttons > button {
padding: 0;
line-height: 100%;
font-size: 0.75rem;
}
.card > .label {
background-color: rgba(255, 255, 255, 0.8);
color: black;
border-radius: 8px;
background-color: rgba(0, 0, 0, 0.55);
color: var(--ink-primary);
border-radius: 0 0 var(--radius-sm) var(--radius-sm);
z-index: 1;
font-size: 0.7rem;
line-height: 1.2;
position: absolute;
bottom: 0;
left: 0;
right: 0;
text-align: center;
}
.card.print-start-left {
border-left: 2px solid #ff4646;
border-left: 2px solid var(--mark-feed);
}
.card.print-start-top {
border-top: 2px solid #ff4646;
border-top: 2px solid var(--mark-feed);
}
.card .thumbnail {