Second round de modifications
This commit is contained in:
@@ -1,18 +1,33 @@
|
||||
/** Rings **/
|
||||
/** Rings — disposition en pentagone **/
|
||||
|
||||
.rings {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
position: relative;
|
||||
min-height: 260px;
|
||||
color: $white-light;
|
||||
// All
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
|
||||
// — Common rules for all ring items —
|
||||
#earth,
|
||||
#air,
|
||||
#water,
|
||||
#fire,
|
||||
#void {
|
||||
position: relative;
|
||||
flex: 1 1 50%;
|
||||
text-align: center;
|
||||
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,
|
||||
@@ -21,26 +36,25 @@
|
||||
i.i_void {
|
||||
font-size: 5rem;
|
||||
line-height: 4.75rem;
|
||||
display: block;
|
||||
}
|
||||
|
||||
label {
|
||||
position: relative;
|
||||
width: 5rem;
|
||||
line-height: 0;
|
||||
float: right;
|
||||
}
|
||||
label.stance-active strong {
|
||||
text-decoration: underline 2px;
|
||||
strong {
|
||||
display: block;
|
||||
font-size: 0.78rem;
|
||||
line-height: 1.3;
|
||||
margin-top: 0.15rem;
|
||||
}
|
||||
|
||||
input {
|
||||
position: absolute;
|
||||
height: 2rem;
|
||||
width: 2rem;
|
||||
height: 1.9rem;
|
||||
width: 1.9rem;
|
||||
border-radius: 100%;
|
||||
top: 0;
|
||||
left: 0;
|
||||
text-align: center;
|
||||
font-size: 1rem;
|
||||
font-size: 0.95rem;
|
||||
border: 2px solid $l5r5e-title;
|
||||
color: $white-light;
|
||||
&:hover {
|
||||
@@ -51,106 +65,71 @@
|
||||
}
|
||||
}
|
||||
|
||||
// Earth
|
||||
#earth {
|
||||
float: right;
|
||||
color: $l5r5e-earth;
|
||||
input {
|
||||
top: auto;
|
||||
right: 0;
|
||||
bottom: -0.9rem;
|
||||
left: auto;
|
||||
background: $l5r5e-earth;
|
||||
// — 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);
|
||||
}
|
||||
label {
|
||||
strong {
|
||||
position: absolute;
|
||||
bottom: 0.75rem;
|
||||
left: -1.75rem;
|
||||
}
|
||||
&.lunaire {
|
||||
color: #9ecfef;
|
||||
text-shadow: 0 0 4px rgba(100, 180, 230, 0.6);
|
||||
}
|
||||
}
|
||||
|
||||
// Air
|
||||
#air {
|
||||
color: $l5r5e-air;
|
||||
input {
|
||||
top: auto;
|
||||
right: auto;
|
||||
bottom: -0.9rem;
|
||||
left: 0;
|
||||
background: $l5r5e-air;
|
||||
}
|
||||
label {
|
||||
float: left;
|
||||
strong {
|
||||
position: absolute;
|
||||
bottom: 0.75rem;
|
||||
right: -1rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
// — 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)
|
||||
|
||||
// Water
|
||||
#water {
|
||||
float: right;
|
||||
color: $l5r5e-water;
|
||||
padding-right: 2rem;
|
||||
input {
|
||||
top: 17%;
|
||||
right: -1.25rem;
|
||||
bottom: auto;
|
||||
left: auto;
|
||||
background: $l5r5e-water;
|
||||
}
|
||||
label {
|
||||
strong {
|
||||
position: absolute;
|
||||
bottom: -0.75rem;
|
||||
right: 2rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Fire
|
||||
#fire {
|
||||
color: $l5r5e-fire;
|
||||
padding-left: 2rem;
|
||||
input {
|
||||
top: 17%;
|
||||
right: auto;
|
||||
bottom: auto;
|
||||
left: -1.25rem;
|
||||
background: $l5r5e-fire;
|
||||
}
|
||||
label {
|
||||
float: left;
|
||||
strong {
|
||||
position: absolute;
|
||||
bottom: -0.75rem;
|
||||
right: 2rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Void
|
||||
// Pentagone ancré à gauche — centre du cercle à 8rem du bord gauche
|
||||
// Vide — sommet (−90°)
|
||||
#void {
|
||||
top: -2rem;
|
||||
margin: 0 calc(50% - 2.5rem);
|
||||
top: 0;
|
||||
left: 5.25rem;
|
||||
color: $l5r5e-void;
|
||||
input {
|
||||
top: -1rem;
|
||||
right: auto;
|
||||
bottom: auto;
|
||||
left: 30%;
|
||||
background: $l5r5e-void;
|
||||
}
|
||||
label {
|
||||
strong {
|
||||
position: absolute;
|
||||
bottom: -0.75rem;
|
||||
left: 1.75rem;
|
||||
}
|
||||
}
|
||||
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; }
|
||||
}
|
||||
}
|
||||
|
||||
@@ -247,6 +247,14 @@
|
||||
margin: 0 0 0.25rem;
|
||||
}
|
||||
&:nth-child(3) {
|
||||
flex: auto;
|
||||
input {
|
||||
width: 2.5rem;
|
||||
text-align: center;
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
&:nth-child(4) {
|
||||
flex: auto;
|
||||
input {
|
||||
width: 1rem;
|
||||
@@ -254,14 +262,14 @@
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
&:nth-child(4),
|
||||
&:nth-child(5) {
|
||||
&:nth-child(5),
|
||||
&:nth-child(6) {
|
||||
flex: 60%;
|
||||
input {
|
||||
font-size: 1rem;
|
||||
}
|
||||
}
|
||||
&:nth-child(5) {
|
||||
&:nth-child(6) {
|
||||
flex: 40%;
|
||||
input {
|
||||
margin-right: 0;
|
||||
@@ -272,16 +280,16 @@
|
||||
}
|
||||
.mid-wrapper {
|
||||
display: flex;
|
||||
}
|
||||
.side-col {
|
||||
width: 30%;
|
||||
flex: 0 0 100%;
|
||||
}
|
||||
.central-col {
|
||||
width: 40%;
|
||||
flex: 1;
|
||||
width: 100%;
|
||||
}
|
||||
.rings {
|
||||
padding: 0;
|
||||
margin-top: 1rem;
|
||||
margin-top: 0.5rem;
|
||||
width: 100%;
|
||||
}
|
||||
.social-content,
|
||||
.attributes-wrapper {
|
||||
@@ -538,8 +546,8 @@
|
||||
right: 0.85rem;
|
||||
}
|
||||
}
|
||||
li:nth-child(3),
|
||||
li:nth-child(5) {
|
||||
li:nth-child(4),
|
||||
li:nth-child(6) {
|
||||
.attribute-label {
|
||||
&:before {
|
||||
height: calc(100% - 0.6rem);
|
||||
|
||||
Reference in New Issue
Block a user