126 lines
3.2 KiB
SCSS
126 lines
3.2 KiB
SCSS
/** Rings — disposition en grille 2×2 + Vide centré en bas **/
|
||
|
||
.rings {
|
||
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;
|
||
color: $white-light;
|
||
|
||
#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: relative;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
gap: 0.15rem;
|
||
|
||
label {
|
||
position: relative;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
cursor: pointer;
|
||
width: 5.5rem;
|
||
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: 4.5rem;
|
||
line-height: 1;
|
||
display: block;
|
||
}
|
||
|
||
strong {
|
||
display: block;
|
||
font-size: 0.78rem;
|
||
line-height: 1.3;
|
||
margin-top: 0.1rem;
|
||
}
|
||
|
||
input {
|
||
position: absolute;
|
||
height: 2rem;
|
||
width: 2rem;
|
||
border-radius: 100%;
|
||
bottom: -0.5rem;
|
||
right: -0.5rem;
|
||
text-align: center;
|
||
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;
|
||
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);
|
||
}
|
||
}
|
||
|
||
// — 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); } }
|
||
}
|