136 lines
3.3 KiB
SCSS
136 lines
3.3 KiB
SCSS
/** Rings — disposition en pentagone **/
|
||
|
||
.rings {
|
||
position: relative;
|
||
min-height: 260px;
|
||
color: $white-light;
|
||
list-style: none;
|
||
padding: 0;
|
||
margin: 0;
|
||
|
||
// — Common rules for all ring items —
|
||
#earth,
|
||
#air,
|
||
#water,
|
||
#fire,
|
||
#void {
|
||
position: absolute;
|
||
|
||
label {
|
||
position: relative;
|
||
display: block;
|
||
text-align: center;
|
||
cursor: pointer;
|
||
width: 5.5rem;
|
||
line-height: normal;
|
||
|
||
&.stance-active strong {
|
||
text-decoration: underline 2px;
|
||
}
|
||
}
|
||
|
||
i.i_earth,
|
||
i.i_water,
|
||
i.i_fire,
|
||
i.i_air,
|
||
i.i_void {
|
||
font-size: 5rem;
|
||
line-height: 4.75rem;
|
||
display: block;
|
||
}
|
||
|
||
strong {
|
||
display: block;
|
||
font-size: 0.78rem;
|
||
line-height: 1.3;
|
||
margin-top: 0.15rem;
|
||
}
|
||
|
||
input {
|
||
position: absolute;
|
||
height: 1.9rem;
|
||
width: 1.9rem;
|
||
border-radius: 100%;
|
||
top: 0;
|
||
left: 0;
|
||
text-align: center;
|
||
font-size: 0.95rem;
|
||
border: 2px solid $l5r5e-title;
|
||
color: $white-light;
|
||
&:hover {
|
||
border: 2px solid $red-light;
|
||
text-shadow: 0 0 3px $red;
|
||
box-shadow: 0 0 3px inset $red;
|
||
}
|
||
}
|
||
}
|
||
|
||
// — Solaire / Lunaire badges —
|
||
.ring-type {
|
||
display: block;
|
||
text-align: center;
|
||
font-size: 0.62rem;
|
||
line-height: 1.2 !important;
|
||
font-weight: bold;
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.07em;
|
||
white-space: nowrap;
|
||
margin-top: 0.1rem;
|
||
pointer-events: none;
|
||
|
||
&.solaire {
|
||
color: #f5c842;
|
||
text-shadow: 0 0 4px rgba(245, 180, 0, 0.6);
|
||
}
|
||
&.lunaire {
|
||
color: #9ecfef;
|
||
text-shadow: 0 0 4px rgba(100, 180, 230, 0.6);
|
||
}
|
||
}
|
||
|
||
// — 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; }
|
||
}
|
||
}
|