uberwald/l5rx-chiaroscuro
0
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 7 Wiki Activity

ENhance and fix

Browse Source
This commit is contained in:
LeRatierBretonnier
2026-05-10 23:12:21 +02:00
parent e200b5f7b0
commit 7542890232
43 changed files with 638 additions and 390 deletions
Download Patch File Download Diff File Expand all files Collapse all files
system/styles/scss/rings.scss
+53 -63
View File
@@ -1,41 +1,66 @@
/** Rings — disposition en pentagone **/
/** Rings — disposition en grille 2×2 + Vide centré en bas **/
.rings {
position: relative;
min-height: 260px;
color: $white-light;
display: grid;
grid-template-areas:
"air water"
"fire earth"
"void void";
grid-template-columns: 1fr 1fr;
gap: 0.5rem;
min-height: 0;
padding: 0.25rem;
list-style: none;
padding: 0;
margin: 0;
color: $white-light;
// — Common rules for all ring items —
#air { grid-area: air; }
#water { grid-area: water; }
#fire { grid-area: fire; }
#earth { grid-area: earth; }
#void { grid-area: void; justify-self: center; }
// — Common ring cell —
#earth,
#air,
#water,
#fire,
#void {
position: absolute;
position: relative;
display: flex;
flex-direction: column;
align-items: center;
gap: 0.15rem;
label {
position: relative;
display: block;
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
cursor: pointer;
width: 5.5rem;
line-height: normal;
text-align: center;
&.stance-active strong {
text-decoration: underline 2px;
}
}
.ring-circle {
position: relative;
width: 4.5rem;
height: 4.5rem;
display: flex;
align-items: center;
justify-content: center;
}
i.i_earth,
i.i_water,
i.i_fire,
i.i_air,
i.i_void {
font-size: 5rem;
line-height: 4.75rem;
font-size: 4.5rem;
line-height: 1;
display: block;
}
@@ -43,20 +68,23 @@
display: block;
font-size: 0.78rem;
line-height: 1.3;
margin-top: 0.15rem;
margin-top: 0.1rem;
}
input {
position: absolute;
height: 1.9rem;
width: 1.9rem;
height: 2rem;
width: 2rem;
border-radius: 100%;
top: 0;
left: 0;
bottom: -0.5rem;
right: -0.5rem;
text-align: center;
font-size: 0.95rem;
font-size: 1rem;
font-weight: bold;
border: 2px solid $l5r5e-title;
color: $white-light;
background: rgba($l5r5e-black, 0.75);
&:hover {
border: 2px solid $red-light;
text-shadow: 0 0 3px $red;
@@ -88,48 +116,10 @@
}
}
// — Pentagone centré — rayon 4.5rem autour du centre x=50%, y≈6.875rem
// (centre de l'icône à 2.375rem du haut de chaque li)
// cos/sin calculés pour les 5 sommets d'un pentagone régulier (Vide au sommet)
// Pentagone ancré à gauche — centre du cercle à 8rem du bord gauche
// Vide — sommet (−90°)
#void {
top: 0;
left: 5.25rem;
color: $l5r5e-void;
input { background: $l5r5e-void; }
}
// Air (Solaire) — haut gauche (−162° : cos=−0.951, sin=−0.309)
#air {
top: 3.1rem;
left: 1rem;
color: $l5r5e-air;
input { background: $l5r5e-air; }
}
// Eau (Lunaire) — haut droite (−18° : cos=0.951, sin=−0.309)
#water {
top: 3.1rem;
left: 9.5rem;
color: $l5r5e-water;
input { background: $l5r5e-water; }
}
// Feu (Solaire) — bas gauche (126° : cos=−0.588, sin=0.809)
#fire {
top: 8.1rem;
left: 2.6rem;
color: $l5r5e-fire;
input { background: $l5r5e-fire; }
}
// Terre (Lunaire) — bas droite (54° : cos=0.588, sin=0.809)
#earth {
top: 8.1rem;
left: 7.9rem;
color: $l5r5e-earth;
input { background: $l5r5e-earth; }
}
// — Ring colors —
#void { color: $l5r5e-void; input { background: rgba($l5r5e-void, 0.7); } }
#air { color: $l5r5e-air; input { background: rgba($l5r5e-air, 0.7); } }
#water { color: $l5r5e-water; input { background: rgba($l5r5e-water, 0.7); } }
#fire { color: $l5r5e-fire; input { background: rgba($l5r5e-fire, 0.7); } }
#earth { color: $l5r5e-earth; input { background: rgba($l5r5e-earth, 0.7); } }
}