blog/2025
1
Fork 0
Code Issues Activity

Refactor: centraliser les couleurs du thème dans des variables CSS

Browse Source
This commit is contained in:
Richard Dern
2025-09-17 10:36:30 +02:00
parent 92ad1acfa1
commit c327f865ea
8 changed files with 125 additions and 78 deletions
Download Patch File Download Diff File Expand all files Collapse all files

52
themes/default/assets/css/typography.css
View File

@@ -61,7 +61,7 @@ article aside {
margin: 2em;
padding: 1em 1.5em;
border-left: 4px solid var(--accent-blue);
background-color: rgba(255, 255, 255, 0.03);
background-color: var(--bg-white-03);
font-size: 0.9em;
color: var(--text-light);
font-style: normal;
@@ -141,7 +141,7 @@ article aside {
display: inline;
text-decoration: line-through;
color: var(--text-red);
background-color: rgba(255, 0, 0, 0.1);
background-color: var(--bg-red-01);
padding: 0 0.2em;
border-radius: 0.2em;
}
@@ -161,7 +161,7 @@ article aside {
&.spoiler {
border-left: 4px solid var(--border-muted);
background-color: rgba(255, 255, 255, 0.03);
background-color: var(--bg-white-03);
summary {
color: var(--text-muted);
@@ -179,7 +179,7 @@ article aside {
&.update {
border-left: 4px solid var(--accent-blue);
background-color: rgba(100, 199, 255, 0.1);
background-color: var(--bg-accent-blue-01);
summary {
color: var(--accent-blue);
@@ -234,10 +234,10 @@ article aside {
margin: 3em auto;
padding: 1rem;
border-radius: 1em;
background: radial-gradient(circle at top left, rgba(255, 255, 255, 0.05), rgba(0, 0, 0, 0.7));
background: radial-gradient(circle at top left, var(--bg-white-05), var(--overlay-black-70));
box-shadow:
inset 0 0 0 1px rgba(255, 255, 255, 0.05),
0 0 10px rgba(0, 0, 0, 0.4);
inset 0 0 0 1px var(--bg-white-05),
0 0 10px var(--overlay-black-40);
backdrop-filter: blur(4px);
max-width: 100%;
text-align: center;
@@ -279,8 +279,8 @@ article aside {
margin: 4em auto;
position: relative;
background: radial-gradient(ellipse at center -20px,
rgba(200, 240, 255, 0.18),
transparent 80%);
var(--accent-blue-glow),
var(--transparent) 80%);
}
input[type="checkbox"] {
@@ -292,7 +292,7 @@ article aside {
/* ⬅ correction ici */
border: 2px solid var(--border-muted);
border-radius: 0.2em;
background-color: transparent;
background-color: var(--transparent);
position: relative;
cursor: default;
@@ -320,7 +320,7 @@ article aside {
text-decoration: none;
font-weight: bold;
color: var(--text-green);
background-color: rgba(0, 255, 0, 0.1);
background-color: var(--bg-green-01);
padding: 0 0.2em;
border-radius: 0.2em;
}
@@ -336,9 +336,9 @@ article aside {
background-color: var(--bg-dark);
border-radius: 0.3em;
box-shadow:
0 0 6px rgba(255, 255, 255, 0.25),
0 0 12px rgba(255, 255, 255, 0.12),
inset 0 0 1px rgba(255, 255, 255, 0.04);
0 0 6px var(--bg-white-25),
0 0 12px var(--bg-white-12),
inset 0 0 1px var(--bg-white-04);
white-space: nowrap;
vertical-align: middle;
}
@@ -443,8 +443,8 @@ article aside {
background-color: var(--bg-dark);
border-radius: 0.3em;
box-shadow:
0 0 1px rgba(0, 255, 0, 0.2),
inset 0 0 2px rgba(255, 255, 255, 0.05);
0 0 1px var(--bg-green-02),
inset 0 0 2px var(--bg-white-05);
white-space: pre-wrap;
}
@@ -456,8 +456,8 @@ article aside {
color: var(--accent-green-bright);
border-radius: 0.5em;
box-shadow:
0 0 10px rgba(0, 255, 100, 0.05),
inset 0 0 3px rgba(0, 255, 100, 0.1);
0 0 10px var(--bg-lime-005),
inset 0 0 3px var(--bg-lime-01);
font-size: 0.8em;
max-height: 50vh;
overflow: auto;
@@ -490,13 +490,13 @@ article aside {
font-size: 0.95em;
line-height: 1.5;
border: 1px solid var(--border-dark);
background-color: rgba(255, 255, 255, 0.015);
background-color: var(--bg-white-015);
/* Suppression des coins arrondis */
border-radius: 0;
}
thead {
background-color: rgba(255, 255, 255, 0.04);
background-color: var(--bg-white-04);
color: var(--text-white);
font-weight: bold;
}
@@ -506,7 +506,7 @@ article aside {
border: 1px solid var(--border-dark);
text-align: left;
white-space: nowrap;
background: linear-gradient(to bottom, rgba(255, 255, 255, 0.06), rgba(0, 0, 0, 0.4));
background: linear-gradient(to bottom, var(--bg-white-06), var(--overlay-black-40));
}
tbody td {
@@ -515,23 +515,23 @@ article aside {
vertical-align: top;
text-align: left;
color: var(--text-light);
background-color: transparent;
background-color: var(--transparent);
transition: background-color 0.2s;
}
/* Alternance des lignes */
tbody tr:nth-child(even) td {
background-color: rgba(255, 255, 255, 0.015);
background-color: var(--bg-white-015);
}
/* Survol ligne */
tbody tr:hover td {
background-color: rgba(100, 199, 255, 0.05);
background-color: var(--bg-accent-blue-005);
}
/* Survol cellule */
tbody td:hover {
background-color: rgba(100, 199, 255, 0.08);
background-color: var(--bg-accent-blue-008);
}
/* Pied du tableau */
@@ -539,7 +539,7 @@ article aside {
padding: 0.75em 1em;
font-style: italic;
color: var(--text-muted);
background-color: rgba(255, 255, 255, 0.02);
background-color: var(--bg-white-02);
border: 1px solid var(--border-dark);
}
}