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

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

Browse Source 
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
Download Patch File Download Diff File Expand all files Collapse all files
static/css/views/photosLightbox.css
+16 -16
View File
@@ -3,7 +3,7 @@
position: fixed;
inset: 0;
z-index: 10000;
background: rgba(0, 0, 0, 0.92);
background: var(--color-lightbox-overlay);
display: flex;
flex-direction: column;
align-items: center;
@@ -46,8 +46,8 @@
height: 48px;
border-radius: 50%;
border: none;
background: rgba(255, 255, 255, 0.12);
color: #fff;
background: var(--color-lightbox-btn-bg);
color: var(--color-lightbox-btn-text);
font-size: 20px;
cursor: pointer;
display: flex;
@@ -58,7 +58,7 @@
}
.lightbox-nav:hover {
background: rgba(255, 255, 255, 0.25);
background: var(--color-lightbox-btn-hover);
}
.lightbox-prev {
@@ -78,8 +78,8 @@
height: 40px;
border-radius: 50%;
border: none;
background: rgba(255, 255, 255, 0.12);
color: #fff;
background: var(--color-lightbox-btn-bg);
color: var(--color-lightbox-btn-text);
font-size: 18px;
cursor: pointer;
display: flex;
@@ -90,7 +90,7 @@
}
.lightbox-close:hover {
background: rgba(255, 255, 255, 0.25);
background: var(--color-lightbox-btn-hover);
}
/* Top info bar */
@@ -100,8 +100,8 @@
left: 0;
right: 0;
padding: 16px 70px 16px 20px;
background: linear-gradient(to bottom, rgba(0, 0, 0, 0.6), transparent);
color: #fff;
background: var(--color-lightbox-gradient-top);
color: var(--color-lightbox-btn-text);
z-index: 10001;
}
@@ -116,7 +116,7 @@
.lightbox-meta {
font-size: 12px;
color: rgba(255, 255, 255, 0.7);
color: var(--color-lightbox-text-muted);
display: flex;
gap: 12px;
flex-wrap: wrap;
@@ -129,7 +129,7 @@
left: 0;
right: 0;
padding: 16px 20px;
background: linear-gradient(to top, rgba(0, 0, 0, 0.6), transparent);
background: var(--color-lightbox-gradient-bottom);
display: flex;
align-items: center;
justify-content: center;
@@ -138,9 +138,9 @@
}
.lightbox-toolbar button {
background: rgba(255, 255, 255, 0.12);
background: var(--color-lightbox-btn-bg);
border: none;
color: #fff;
color: var(--color-lightbox-btn-text);
width: 40px;
height: 40px;
border-radius: 50%;
@@ -153,11 +153,11 @@
}
.lightbox-toolbar button:hover {
background: rgba(255, 255, 255, 0.25);
background: var(--color-lightbox-btn-hover);
}
.lightbox-toolbar button.active {
color: #ff5e3a;
color: var(--color-accent);
}
/* Counter */
@@ -165,7 +165,7 @@
position: absolute;
bottom: 16px;
left: 20px;
color: rgba(255, 255, 255, 0.5);
color: var(--color-lightbox-text-faint);
font-size: 13px;
z-index: 10001;
}