ENhance and fix
This commit is contained in:
File diff suppressed because one or more lines are too long
@@ -31,7 +31,7 @@
|
||||
|
||||
.gauge-bar-wrapper {
|
||||
flex: 0 0 100%;
|
||||
height: 0.4rem;
|
||||
height: 1rem;
|
||||
background: linear-gradient(to right, $chi-lunar, rgba(128,128,128,0.3) 50%, $chi-solar);
|
||||
border-radius: 0.25rem;
|
||||
position: relative;
|
||||
@@ -47,34 +47,6 @@
|
||||
}
|
||||
}
|
||||
|
||||
// ── État badges (character sheet header) ─────────────────────────────────
|
||||
.etat-summary {
|
||||
flex: 0 0 100%;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
gap: 0.2rem;
|
||||
padding: 0.1rem 0;
|
||||
font-size: 0.8rem;
|
||||
.etat-summary-label {
|
||||
color: $l5r5e-label;
|
||||
font-style: italic;
|
||||
margin-right: 0.2rem;
|
||||
}
|
||||
.etat-badge {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.2rem;
|
||||
padding: 0.1rem 0.35rem;
|
||||
border-radius: 0.2rem;
|
||||
background: rgba($chi-title, 0.18);
|
||||
border: 1px solid rgba($chi-title, 0.4);
|
||||
color: $chi-title;
|
||||
cursor: default;
|
||||
&:hover { background: rgba($chi-title, 0.32); }
|
||||
}
|
||||
}
|
||||
|
||||
// ── Identity text blocks ──────────────────────────────────────────────────
|
||||
|
||||
.identity-text-wrapper {
|
||||
@@ -478,16 +450,16 @@ article.tab.notes {
|
||||
box-shadow: inset 0 1px 0 rgba($white, 0.07), 0 1px 3px rgba($l5r5e-black, 0.4);
|
||||
|
||||
&.die-low {
|
||||
color: $l5r5e-red;
|
||||
background: rgba($l5r5e-red, 0.14);
|
||||
border-color: rgba($l5r5e-red, 0.5);
|
||||
box-shadow: inset 0 1px 0 rgba($white, 0.05), 0 0 6px rgba($l5r5e-red, 0.15);
|
||||
color: #ff6b6b;
|
||||
background: rgba($l5r5e-red, 0.25);
|
||||
border-color: rgba($l5r5e-red, 0.7);
|
||||
box-shadow: inset 0 1px 0 rgba($white, 0.05), 0 0 6px rgba($l5r5e-red, 0.2);
|
||||
}
|
||||
&.die-high {
|
||||
color: $chi-solar;
|
||||
background: rgba($chi-solar, 0.14);
|
||||
border-color: rgba($chi-solar, 0.5);
|
||||
box-shadow: inset 0 1px 0 rgba($white, 0.1), 0 0 8px rgba($chi-solar, 0.2);
|
||||
color: #ffd166;
|
||||
background: rgba($chi-solar, 0.25);
|
||||
border-color: rgba($chi-solar, 0.7);
|
||||
box-shadow: inset 0 1px 0 rgba($white, 0.1), 0 0 8px rgba($chi-solar, 0.3);
|
||||
}
|
||||
.die-adj-icon {
|
||||
position: absolute;
|
||||
@@ -599,6 +571,7 @@ article.tab.notes {
|
||||
.invocations-wrapper {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex: 1;
|
||||
gap: 0.5rem;
|
||||
|
||||
.invocations-roll-header {
|
||||
@@ -612,6 +585,7 @@ article.tab.notes {
|
||||
font-size: 1rem;
|
||||
font-weight: bold;
|
||||
padding: 0.3rem 1.5rem;
|
||||
width: fit-content;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
+182
-38
@@ -150,6 +150,7 @@
|
||||
align-self: stretch;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-content: flex-start;
|
||||
}
|
||||
article {
|
||||
display: flex;
|
||||
@@ -239,13 +240,14 @@
|
||||
}
|
||||
&.infos {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-self: stretch;
|
||||
height: calc(100% - 7.5rem);
|
||||
width: 100%;
|
||||
padding-bottom: 1.25rem;
|
||||
.reference {
|
||||
display: flex;
|
||||
flex: 0 0 calc(100% - 0.5rem);
|
||||
flex: 0 0 auto;
|
||||
margin: 0.5rem 0.25rem;
|
||||
input[name="system.source_reference.source"] {
|
||||
text-align: center;
|
||||
@@ -256,9 +258,14 @@
|
||||
}
|
||||
}
|
||||
fieldset {
|
||||
align-self: stretch;
|
||||
height: calc(100% - 2rem);
|
||||
flex: 1 1 auto;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
box-sizing: content-box;
|
||||
.editor {
|
||||
flex: 1 1 auto;
|
||||
min-height: 6rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.properties {
|
||||
@@ -271,6 +278,7 @@
|
||||
&.advancement {
|
||||
article {
|
||||
&.attributes {
|
||||
height: auto;
|
||||
.attribute-value,
|
||||
.attribute,
|
||||
.value {
|
||||
@@ -286,6 +294,9 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
&.infos {
|
||||
height: calc(100% - 5.5rem);
|
||||
}
|
||||
}
|
||||
}
|
||||
&.technique {
|
||||
@@ -332,18 +343,15 @@
|
||||
&.item {
|
||||
article {
|
||||
&.attributes {
|
||||
height: 4.5rem;
|
||||
height: auto;
|
||||
.properties {
|
||||
flex: 100%;
|
||||
}
|
||||
}
|
||||
&.infos {
|
||||
flex: 0 0 60%;
|
||||
height: calc(100% - 5.5rem);
|
||||
}
|
||||
&.properties {
|
||||
flex: 0 0 40%;
|
||||
height: calc(100% - 5.5rem);
|
||||
flex: 1 1 100%;
|
||||
height: auto;
|
||||
min-height: 10rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -360,56 +368,111 @@
|
||||
&.armor {
|
||||
article {
|
||||
&.attributes {
|
||||
height: 9.5rem;
|
||||
height: auto;
|
||||
align-content: flex-start;
|
||||
.attribute-value {
|
||||
flex: 0 0 calc(25% - 0.5rem);
|
||||
margin: 0.25rem 0.25rem 0;
|
||||
}
|
||||
.value {
|
||||
flex: 0 0 calc(25% - 0.5rem);
|
||||
margin: 0.25rem;
|
||||
input {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
.stat {
|
||||
flex: 0 0 calc(33.33% - 0.5rem);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin: 0.25rem;
|
||||
span {
|
||||
font-size: 0.7rem;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.03em;
|
||||
color: $l5r5e-label;
|
||||
}
|
||||
input {
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
.category {
|
||||
flex: 0 0 calc(33.33% - 0.5rem);
|
||||
margin: 0.25rem;
|
||||
select {
|
||||
width: 100%;
|
||||
margin-top: 0.15rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.infos {
|
||||
flex: 0 0 60%;
|
||||
height: calc(100% - 10.5rem);
|
||||
}
|
||||
&.properties {
|
||||
flex: 0 0 40%;
|
||||
height: calc(100% - 10.5rem);
|
||||
flex: 1 1 100%;
|
||||
height: auto;
|
||||
min-height: 10rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.weapon {
|
||||
article {
|
||||
&.attributes {
|
||||
height: 18.5rem;
|
||||
.stats,
|
||||
height: auto;
|
||||
align-content: flex-start;
|
||||
.attribute-value {
|
||||
flex: 0 0 calc(50% - 0.5rem);
|
||||
flex-wrap: wrap;
|
||||
flex: 0 0 calc(20% - 0.5rem);
|
||||
margin: 0.25rem 0.25rem 0;
|
||||
}
|
||||
.stat {
|
||||
flex: 0 0 calc(20% - 0.5rem);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin: 0.25rem;
|
||||
label {
|
||||
span {
|
||||
font-size: 0.7rem;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.03em;
|
||||
color: $l5r5e-label;
|
||||
}
|
||||
input {
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
.stats {
|
||||
input[type="text"] {
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
.value {
|
||||
flex: 0 0 calc(25% - 0.5rem);
|
||||
}
|
||||
.category,
|
||||
.skillType {
|
||||
flex: 0 0 calc(50% - 0.5rem);
|
||||
input,
|
||||
margin: 0.25rem;
|
||||
select,
|
||||
.attribute-dtype {
|
||||
width: 100%;
|
||||
margin: 0.25rem;
|
||||
margin-top: 0.15rem;
|
||||
}
|
||||
}
|
||||
.grip {
|
||||
flex: 0 0 calc(40% - 0.5rem);
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
gap: 0.25rem;
|
||||
margin: 0.25rem;
|
||||
font-size: 0.8rem;
|
||||
input {
|
||||
flex: 1;
|
||||
width: auto;
|
||||
}
|
||||
}
|
||||
.value {
|
||||
flex: 0 0 calc(20% - 0.5rem);
|
||||
margin: 0.25rem;
|
||||
input {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.infos {
|
||||
flex: 0 0 60%;
|
||||
height: calc(100% - 19.5rem);
|
||||
}
|
||||
&.properties {
|
||||
flex: 0 0 40%;
|
||||
height: calc(100% - 19.5rem);
|
||||
flex: 1 1 100%;
|
||||
height: auto;
|
||||
min-height: 10rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -550,3 +613,84 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Chiaroscuro-specific item types
|
||||
&.arcane,
|
||||
&.mot-invocation,
|
||||
&.mystere,
|
||||
&.technique-ecole {
|
||||
.sheet-header {
|
||||
margin-bottom: 0.5rem;
|
||||
img {
|
||||
flex: 0 0 90px;
|
||||
height: 90px;
|
||||
width: 90px;
|
||||
background: rgba(255, 255, 255, 0.25);
|
||||
}
|
||||
h1 input {
|
||||
height: 5.5rem;
|
||||
}
|
||||
}
|
||||
.sheet-body {
|
||||
flex: 100%;
|
||||
height: calc(100% - 90px - 0.25rem);
|
||||
align-self: stretch;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-content: flex-start;
|
||||
}
|
||||
article {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
label {
|
||||
color: $l5r5e-label;
|
||||
margin: 0.25rem;
|
||||
line-height: 1.5rem;
|
||||
}
|
||||
&.attributes,
|
||||
&.tab.attributes {
|
||||
width: 100%;
|
||||
min-height: auto;
|
||||
align-self: flex-start;
|
||||
align-content: flex-start;
|
||||
align-items: flex-start;
|
||||
.attribute {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex: 0 0 calc(50% - 0.5rem);
|
||||
input, select {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.infos,
|
||||
&.tab.infos {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
flex: 1 1 100%;
|
||||
padding-bottom: 1.25rem;
|
||||
fieldset {
|
||||
flex: 1 1 auto;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
.editor {
|
||||
flex: 1 1 auto;
|
||||
min-height: 8rem;
|
||||
}
|
||||
}
|
||||
.reference {
|
||||
display: flex;
|
||||
flex: 0 0 auto;
|
||||
margin: 0.5rem 0.25rem;
|
||||
input[name="system.source_reference.source"] {
|
||||
text-align: center;
|
||||
width: 70%;
|
||||
}
|
||||
input[name="system.source_reference.page"] {
|
||||
width: 30%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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); } }
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user