refactor(css): maximize usage of variables (1st part, to simplify CSS & style)

note: there is still work to do, but has there are risks to conflict I prefer to commit this first part now
This commit is contained in:
Edouard Vanbelle
2026-04-08 11:03:20 +02:00
parent 904aca5edf
commit 94b36e41e0
35 changed files with 2957 additions and 2535 deletions
+17 -35
View File
@@ -11,19 +11,19 @@
width: 17px;
height: 17px;
cursor: pointer;
accent-color: #ff5e3a;
accent-color: var(--color-accent);
border-radius: 4px;
}
.list-header.selection-mode {
grid-template-columns: 36px 1fr;
background-color: #1e293b;
color: #fff;
border-bottom-color: #334155;
background-color: var(--color-multiselect-bg);
color: var(--color-multiselect-text);
border-bottom-color: var(--color-multiselect-border);
}
.list-header.selection-mode .list-header-checkbox input[type="checkbox"] {
accent-color: #ff5e3a;
accent-color: var(--color-accent);
}
.batch-selection-info {
@@ -38,8 +38,8 @@
display: flex;
align-items: center;
justify-content: space-between;
background: #1e293b;
color: #fff;
background: var(--color-multiselect-bg);
color: var(--color-multiselect-text);
padding: 10px 20px;
border-radius: 12px;
margin: 0 0 12px;
@@ -64,7 +64,7 @@
.batch-bar-close {
background: none;
border: none;
color: rgba(255, 255, 255, 0.7);
color: var(--color-multiselect-text-faint);
cursor: pointer;
font-size: 14px;
padding: 4px 6px;
@@ -75,8 +75,8 @@
}
.batch-bar-close:hover {
background: rgba(255, 255, 255, 0.1);
color: #fff;
background: var(--color-multiselect-hover-bg);
color: var(--color-multiselect-text);
}
.batch-bar-count {
@@ -98,8 +98,8 @@
padding: 7px 14px;
border: none;
border-radius: 8px;
background: rgba(255, 255, 255, 0.1);
color: #fff;
background: var(--color-multiselect-hover-bg);
color: var(--color-multiselect-action-text);
font-size: 13px;
font-weight: 500;
cursor: pointer;
@@ -108,17 +108,17 @@
}
.batch-btn:hover {
background: rgba(255, 255, 255, 0.2);
background: var(--color-multiselect-action-hover);
}
.batch-btn-danger {
background: rgba(239, 68, 68, 0.25);
color: #fca5a5;
background: var(--color-multiselect-danger-bg);
color: var(--color-multiselect-danger-text);
}
.batch-btn-danger:hover {
background: rgba(239, 68, 68, 0.4);
color: #fff;
background: var(--color-multiselect-danger-active);
color: var(--color-multiselect-danger-text-active);
}
@media (max-width: 640px) {
@@ -130,21 +130,3 @@
padding: 7px 10px;
}
}
[data-theme="dark"] .list-header-checkbox input,
[data-theme="dark"] .file-item .checkbox-cell input,
[data-theme="dark"] .file-item .checkbox-cell input {
accent-color: #ff5e3a;
}
[data-theme="dark"] .batch-selection-bar {
background-color: #1e293b;
border-color: #334155;
color: #e2e8f0;
}
[data-theme="dark"] .list-header.selection-mode {
background-color: #0f172a;
border-bottom-color: #334155;
color: #e2e8f0;
}