Rework complet des fiches et dialog de jets
This commit is contained in:
@@ -69,11 +69,24 @@
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
|
||||
input, select, textarea {
|
||||
input, textarea {
|
||||
font-family: inherit;
|
||||
color: @cde-text;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
// Selects need an explicit dark background — transparent fails on native dropdowns
|
||||
select {
|
||||
font-family: inherit;
|
||||
color: @cde-text;
|
||||
background: @cde-surface;
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
select option {
|
||||
background: @cde-bg;
|
||||
color: @cde-text;
|
||||
}
|
||||
}
|
||||
|
||||
// ============================================================
|
||||
@@ -213,8 +226,7 @@
|
||||
letter-spacing: 0.02em;
|
||||
}
|
||||
|
||||
.cde-stat-cell input,
|
||||
.cde-stat-cell select {
|
||||
.cde-stat-cell input {
|
||||
width: 100%;
|
||||
background: transparent;
|
||||
border: none;
|
||||
@@ -225,9 +237,19 @@
|
||||
outline: none;
|
||||
transition: border-color 0.15s;
|
||||
|
||||
&:focus {
|
||||
border-bottom-color: @cde-item;
|
||||
}
|
||||
&:focus { border-bottom-color: @cde-item; }
|
||||
}
|
||||
|
||||
.cde-stat-cell select {
|
||||
width: 100%;
|
||||
border: none;
|
||||
border-bottom: 1px solid @cde-border;
|
||||
font-size: 14px;
|
||||
padding: 4px 0;
|
||||
outline: none;
|
||||
transition: border-color 0.15s;
|
||||
|
||||
&:focus { border-bottom-color: @cde-item; }
|
||||
}
|
||||
|
||||
.cde-neon-header.kungfu .cde-stat-cell input:focus,
|
||||
@@ -504,7 +526,7 @@ section.npc .cde-neon-tabs .item.active { color: @cde-supernatural; borde
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
input, select {
|
||||
input {
|
||||
width: 100%;
|
||||
border: none;
|
||||
border-bottom: 1px solid @cde-border;
|
||||
@@ -516,6 +538,16 @@ section.npc .cde-neon-tabs .item.active { color: @cde-supernatural; borde
|
||||
&:focus { border-bottom-color: @cde-item; }
|
||||
}
|
||||
|
||||
select {
|
||||
width: 100%;
|
||||
border: none;
|
||||
border-bottom: 1px solid @cde-border;
|
||||
padding: 4px 0;
|
||||
outline: none;
|
||||
|
||||
&:focus { border-bottom-color: @cde-item; }
|
||||
}
|
||||
|
||||
input[type="checkbox"] {
|
||||
width: auto;
|
||||
align-self: flex-start;
|
||||
@@ -754,7 +786,7 @@ section.npc .cde-neon-tabs .item.active { color: @cde-supernatural; borde
|
||||
color: @cde-muted;
|
||||
}
|
||||
|
||||
input, select, textarea {
|
||||
input, textarea {
|
||||
width: 100%;
|
||||
border: none;
|
||||
border-bottom: 1px solid @cde-border;
|
||||
@@ -765,6 +797,16 @@ section.npc .cde-neon-tabs .item.active { color: @cde-supernatural; borde
|
||||
|
||||
&:focus { border-bottom-color: @cde-item; }
|
||||
}
|
||||
|
||||
select {
|
||||
width: 100%;
|
||||
border: none;
|
||||
border-bottom: 1px solid @cde-border;
|
||||
padding: 5px 0;
|
||||
outline: none;
|
||||
|
||||
&:focus { border-bottom-color: @cde-item; }
|
||||
}
|
||||
}
|
||||
|
||||
.cde-section-title {
|
||||
@@ -809,7 +851,7 @@ section.npc .cde-neon-tabs .item.active { color: @cde-supernatural; borde
|
||||
tr:nth-child(even) { background: fade(@cde-surface, 50%); }
|
||||
tr:hover { background: fade(@cde-border-hi, 20%); }
|
||||
|
||||
input, select {
|
||||
input {
|
||||
width: 100%;
|
||||
border: none;
|
||||
border-bottom: 1px solid @cde-border;
|
||||
@@ -818,6 +860,14 @@ section.npc .cde-neon-tabs .item.active { color: @cde-supernatural; borde
|
||||
padding: 4px 0;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
select {
|
||||
width: 100%;
|
||||
border: none;
|
||||
border-bottom: 1px solid @cde-border;
|
||||
padding: 4px 0;
|
||||
outline: none;
|
||||
}
|
||||
}
|
||||
|
||||
.cde-centered-card {
|
||||
@@ -1227,6 +1277,727 @@ section.npc .cde-neon-tabs .item.active { color: @cde-supernatural; borde
|
||||
}
|
||||
}
|
||||
|
||||
// ============================================================
|
||||
// Magics tab — components grid + magic cards
|
||||
// ============================================================
|
||||
|
||||
.cde-section-label {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
font-size: 10px;
|
||||
font-family: "Averia", sans-serif;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.12em;
|
||||
color: @cde-muted;
|
||||
border-bottom: 1px solid @cde-border;
|
||||
padding-bottom: 6px;
|
||||
margin-bottom: 10px;
|
||||
|
||||
i { font-size: 11px; }
|
||||
|
||||
&--top-margin { margin-top: 18px; }
|
||||
}
|
||||
|
||||
// 2-column grid for the 10 components
|
||||
.cde-components-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 6px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.cde-component-cell {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
background: @cde-surface;
|
||||
border: 1px solid @cde-border;
|
||||
border-radius: @cde-radius;
|
||||
padding: 4px 8px;
|
||||
|
||||
&:hover { border-color: @cde-border-hi; }
|
||||
}
|
||||
|
||||
.cde-component-die {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
object-fit: contain;
|
||||
flex-shrink: 0;
|
||||
opacity: 0.85;
|
||||
}
|
||||
|
||||
.cde-component-input {
|
||||
flex: 1;
|
||||
background: transparent;
|
||||
border: none;
|
||||
border-bottom: 1px solid transparent;
|
||||
color: @cde-text;
|
||||
font-size: 12px;
|
||||
padding: 2px 0;
|
||||
|
||||
&:focus {
|
||||
outline: none;
|
||||
border-bottom-color: @cde-spell;
|
||||
}
|
||||
|
||||
&::placeholder { color: @cde-muted; font-style: italic; font-size: 11px; }
|
||||
}
|
||||
|
||||
.cde-component-random-row {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.cde-btn-random-component {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 6px 16px;
|
||||
background: fade(@cde-spell, 8%);
|
||||
border: 1px solid fade(@cde-spell, 35%);
|
||||
border-radius: @cde-radius;
|
||||
color: @cde-spell;
|
||||
font-family: "Averia", sans-serif;
|
||||
font-size: 11px;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.08em;
|
||||
cursor: pointer;
|
||||
transition: background 0.15s, box-shadow 0.15s;
|
||||
|
||||
i { font-size: 14px; }
|
||||
|
||||
&:hover {
|
||||
background: fade(@cde-spell, 16%);
|
||||
box-shadow: 0 0 8px fade(@cde-spell, 30%);
|
||||
}
|
||||
}
|
||||
|
||||
// === Magic type cards ===
|
||||
.cde-magic-card {
|
||||
background: @cde-surface;
|
||||
border: 1px solid @cde-border;
|
||||
border-left: 3px solid @cde-border-hi;
|
||||
border-radius: @cde-radius;
|
||||
margin-bottom: 8px;
|
||||
overflow: hidden;
|
||||
box-shadow: @cde-shadow-sm;
|
||||
}
|
||||
|
||||
.cde-magic-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
padding: 8px 10px;
|
||||
}
|
||||
|
||||
.cde-magic-aspect-icon {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
object-fit: contain;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.cde-magic-info {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1px;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.cde-magic-name {
|
||||
font-family: "Averia", sans-serif;
|
||||
font-size: 13px;
|
||||
font-weight: 700;
|
||||
color: @cde-text;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.cde-magic-aspect-name {
|
||||
font-size: 10px;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.08em;
|
||||
color: @cde-muted;
|
||||
font-family: "Averia", sans-serif;
|
||||
}
|
||||
|
||||
.cde-magic-value-input {
|
||||
width: 52px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.cde-magic-roll-btn {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: @cde-radius;
|
||||
cursor: pointer;
|
||||
transition: background 0.15s;
|
||||
flex-shrink: 0;
|
||||
|
||||
i { font-size: 15px; }
|
||||
|
||||
&:hover { background: fade(@cde-spell, 15%); }
|
||||
}
|
||||
|
||||
.cde-magic-toggle {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
color: @cde-muted;
|
||||
flex-shrink: 0;
|
||||
|
||||
input[type="checkbox"] { display: none; }
|
||||
|
||||
i { font-size: 11px; transition: color 0.15s; }
|
||||
|
||||
&:hover i { color: @cde-text; }
|
||||
}
|
||||
|
||||
// Specialities list
|
||||
.cde-magic-specialities {
|
||||
border-top: 1px solid @cde-border;
|
||||
padding: 4px 0;
|
||||
}
|
||||
|
||||
.cde-magic-spec-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 5px 10px 5px 42px; // indent aligned with aspect icon
|
||||
opacity: 0.55;
|
||||
transition: opacity 0.12s, background 0.12s;
|
||||
|
||||
&:hover { opacity: 1; background: fade(@cde-border-hi, 30%); }
|
||||
&--active { opacity: 1; }
|
||||
}
|
||||
|
||||
.cde-magic-spec-check-label {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
flex-shrink: 0;
|
||||
|
||||
input[type="checkbox"] { display: none; }
|
||||
|
||||
.cde-spec-checkbox-ui {
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
border: 1px solid @cde-muted;
|
||||
border-radius: 3px;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transition: border-color 0.12s, background 0.12s;
|
||||
}
|
||||
|
||||
input:checked + .cde-spec-checkbox-ui {
|
||||
background: @cde-spell;
|
||||
border-color: @cde-spell;
|
||||
|
||||
&::after {
|
||||
content: "✓";
|
||||
font-size: 9px;
|
||||
color: @cde-bg;
|
||||
line-height: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.cde-magic-spec-element {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
object-fit: contain;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.cde-magic-spec-polarity {
|
||||
font-size: 10px;
|
||||
font-family: "Averia", sans-serif;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.06em;
|
||||
color: @cde-muted;
|
||||
width: 42px;
|
||||
flex-shrink: 0;
|
||||
|
||||
&.icon-yin { color: @cde-supernatural; }
|
||||
&.icon-yang { color: @cde-item; }
|
||||
&.icon-yinyang { color: @cde-spell; }
|
||||
}
|
||||
|
||||
.cde-magic-spec-name {
|
||||
flex: 1;
|
||||
font-size: 12px;
|
||||
color: @cde-text;
|
||||
font-family: "Averia", sans-serif;
|
||||
}
|
||||
|
||||
.cde-magic-spec-roll-btn {
|
||||
width: 26px;
|
||||
height: 26px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: @cde-radius;
|
||||
cursor: pointer;
|
||||
color: @cde-muted;
|
||||
flex-shrink: 0;
|
||||
transition: color 0.15s, background 0.15s;
|
||||
|
||||
i { font-size: 12px; }
|
||||
|
||||
&:hover { color: @cde-spell; background: fade(@cde-spell, 12%); }
|
||||
}
|
||||
|
||||
// Per-magic accent colors using direct Wu Xing LESS variables
|
||||
.cde-magic--internalcinnabar {
|
||||
border-left-color: @wu-gray;
|
||||
.cde-magic-name { color: lighten(@wu-gray, 20%); }
|
||||
.cde-magic-roll-btn i { color: @wu-gray; }
|
||||
}
|
||||
.cde-magic--alchemy {
|
||||
border-left-color: @wu-blue;
|
||||
.cde-magic-name { color: lighten(@wu-blue, 15%); }
|
||||
.cde-magic-roll-btn i { color: @wu-blue; }
|
||||
}
|
||||
.cde-magic--masteryoftheway {
|
||||
border-left-color: @wu-brown;
|
||||
.cde-magic-name { color: lighten(@wu-brown, 20%); }
|
||||
.cde-magic-roll-btn i { color: lighten(@wu-brown, 10%); }
|
||||
}
|
||||
.cde-magic--exorcism {
|
||||
border-left-color: @wu-red;
|
||||
.cde-magic-name { color: lighten(@wu-red, 20%); }
|
||||
.cde-magic-roll-btn i { color: @wu-red; }
|
||||
}
|
||||
.cde-magic--geomancy {
|
||||
border-left-color: @wu-green;
|
||||
.cde-magic-name { color: lighten(@wu-green, 15%); }
|
||||
.cde-magic-roll-btn i { color: @wu-green; }
|
||||
}
|
||||
|
||||
// =====================================================================
|
||||
// GRIMOIRE (spell list integrated in magic discipline cards)
|
||||
// =====================================================================
|
||||
|
||||
.cde-grimoire-section {
|
||||
border-top: 1px dashed fade(@cde-border, 60%);
|
||||
margin-top: 6px;
|
||||
padding-top: 6px;
|
||||
}
|
||||
|
||||
.cde-grimoire-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
padding: 4px 10px;
|
||||
font-size: 10px;
|
||||
font-family: "Averia", sans-serif;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.1em;
|
||||
color: @cde-muted;
|
||||
|
||||
i { font-size: 10px; color: @cde-spell; }
|
||||
|
||||
span { flex: 1; }
|
||||
}
|
||||
|
||||
.cde-grimoire-add {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
border-radius: 3px;
|
||||
cursor: pointer;
|
||||
color: @cde-muted;
|
||||
transition: color 0.12s, background 0.12s;
|
||||
|
||||
i { font-size: 10px; }
|
||||
|
||||
&:hover { color: @cde-spell; background: fade(@cde-spell, 15%); }
|
||||
}
|
||||
|
||||
.cde-grimoire-list {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.cde-grimoire-entry {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
padding: 4px 10px 4px 14px;
|
||||
border-bottom: 1px solid fade(@cde-border, 40%);
|
||||
transition: background 0.1s;
|
||||
|
||||
&:last-child { border-bottom: none; }
|
||||
|
||||
&:hover {
|
||||
background: fade(@cde-border, 25%);
|
||||
|
||||
.cde-grimoire-controls { opacity: 1; }
|
||||
}
|
||||
}
|
||||
|
||||
.cde-grimoire-img {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
object-fit: contain;
|
||||
border-radius: 2px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.cde-grimoire-name {
|
||||
flex: 1;
|
||||
font-size: 12px;
|
||||
color: @cde-text;
|
||||
font-family: "Averia", sans-serif;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.cde-grimoire-meta {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
font-size: 10px;
|
||||
color: @cde-muted;
|
||||
flex-shrink: 0;
|
||||
|
||||
em {
|
||||
color: @cde-spell;
|
||||
font-style: normal;
|
||||
font-size: 10px;
|
||||
max-width: 80px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
|
||||
.cde-grimoire-diff, .cde-grimoire-hei {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 3px;
|
||||
|
||||
i { font-size: 9px; }
|
||||
}
|
||||
|
||||
.cde-grimoire-diff { color: @cde-muted; }
|
||||
.cde-grimoire-hei { color: @cde-kungfu; }
|
||||
|
||||
.cde-grimoire-controls {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
opacity: 0;
|
||||
transition: opacity 0.12s;
|
||||
flex-shrink: 0;
|
||||
|
||||
a {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
border-radius: 3px;
|
||||
color: @cde-muted;
|
||||
cursor: pointer;
|
||||
transition: color 0.12s, background 0.12s;
|
||||
|
||||
i { font-size: 10px; }
|
||||
|
||||
&:hover { color: @cde-text; background: fade(@cde-border-hi, 30%); }
|
||||
}
|
||||
}
|
||||
|
||||
.cde-grimoire-empty {
|
||||
padding: 4px 14px 8px;
|
||||
font-size: 11px;
|
||||
color: @cde-muted;
|
||||
font-style: italic;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
// =====================================================================
|
||||
// KUNG-FU CARDS (actor tab redesign)
|
||||
// =====================================================================
|
||||
|
||||
.cde-kf-add-row {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
padding: 4px 0 8px;
|
||||
}
|
||||
|
||||
.cde-kf-add-btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 5px;
|
||||
font-size: 11px;
|
||||
font-family: "Averia", sans-serif;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.08em;
|
||||
color: @cde-muted;
|
||||
cursor: pointer;
|
||||
padding: 4px 10px;
|
||||
border-radius: @cde-radius;
|
||||
border: 1px solid @cde-border;
|
||||
transition: color 0.12s, border-color 0.12s, background 0.12s;
|
||||
|
||||
i { font-size: 10px; }
|
||||
|
||||
&:hover { color: @cde-kungfu; border-color: @cde-kungfu; background: fade(@cde-kungfu, 8%); }
|
||||
}
|
||||
|
||||
.cde-kf-card {
|
||||
border: 1px solid @cde-border;
|
||||
border-left: 3px solid @cde-kungfu;
|
||||
border-radius: @cde-radius;
|
||||
background: fade(@cde-surface, 70%);
|
||||
margin-bottom: 10px;
|
||||
overflow: hidden;
|
||||
transition: box-shadow 0.15s;
|
||||
|
||||
&:hover { box-shadow: 0 0 8px fade(@cde-kungfu, 20%); }
|
||||
|
||||
&.cde-kf--metal { border-left-color: @wu-gray; }
|
||||
&.cde-kf--eau { border-left-color: @wu-blue; }
|
||||
&.cde-kf--terre { border-left-color: lighten(@wu-brown, 10%); }
|
||||
&.cde-kf--feu { border-left-color: @wu-red; }
|
||||
&.cde-kf--bois { border-left-color: @wu-green; }
|
||||
}
|
||||
|
||||
.cde-kf-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 8px 10px;
|
||||
|
||||
&:hover .cde-kf-controls { opacity: 1; }
|
||||
}
|
||||
|
||||
.cde-kf-aspect-icon {
|
||||
width: 26px;
|
||||
height: 26px;
|
||||
object-fit: contain;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.cde-kf-orient-icon {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
object-fit: contain;
|
||||
flex-shrink: 0;
|
||||
opacity: 0.75;
|
||||
}
|
||||
|
||||
.cde-kf-info {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.cde-kf-name {
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
font-family: "Averia", sans-serif;
|
||||
color: @cde-text;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.cde-kf-meta {
|
||||
font-size: 10px;
|
||||
color: @cde-muted;
|
||||
font-family: "Averia", sans-serif;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.06em;
|
||||
|
||||
em { color: @cde-text; font-style: normal; }
|
||||
}
|
||||
|
||||
.cde-kf-roll-btn {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: @cde-radius;
|
||||
cursor: pointer;
|
||||
color: @cde-muted;
|
||||
flex-shrink: 0;
|
||||
transition: color 0.15s, background 0.15s;
|
||||
|
||||
i { font-size: 14px; }
|
||||
|
||||
&:hover { color: @cde-kungfu; background: fade(@cde-kungfu, 15%); }
|
||||
}
|
||||
|
||||
.cde-kf-controls {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
opacity: 0;
|
||||
transition: opacity 0.12s;
|
||||
flex-shrink: 0;
|
||||
|
||||
a {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
border-radius: 3px;
|
||||
color: @cde-muted;
|
||||
cursor: pointer;
|
||||
transition: color 0.12s, background 0.12s;
|
||||
|
||||
i { font-size: 11px; }
|
||||
|
||||
&:hover { color: @cde-text; background: fade(@cde-border-hi, 30%); }
|
||||
}
|
||||
}
|
||||
|
||||
.cde-kf-style-row {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
gap: 8px;
|
||||
padding: 4px 12px 6px 44px;
|
||||
border-top: 1px solid fade(@cde-border, 60%);
|
||||
background: fade(@cde-surface, 40%);
|
||||
}
|
||||
|
||||
.cde-kf-style-label {
|
||||
font-size: 10px;
|
||||
font-family: "Averia", sans-serif;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.08em;
|
||||
color: @cde-kungfu;
|
||||
flex-shrink: 0;
|
||||
|
||||
i { font-size: 9px; }
|
||||
}
|
||||
|
||||
.cde-kf-style-text {
|
||||
font-size: 11px;
|
||||
color: @cde-text;
|
||||
font-family: "Averia", sans-serif;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.cde-kf-techniques {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border-top: 1px solid fade(@cde-border, 50%);
|
||||
}
|
||||
|
||||
.cde-kf-tech {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
padding: 5px 12px 5px 44px;
|
||||
border-bottom: 1px solid fade(@cde-border, 30%);
|
||||
opacity: 0.5;
|
||||
transition: opacity 0.1s, background 0.1s;
|
||||
|
||||
&:last-child { border-bottom: none; }
|
||||
&--mastered { opacity: 1; }
|
||||
&:hover { background: fade(@cde-border, 20%); opacity: 1; }
|
||||
}
|
||||
|
||||
.cde-kf-tech-mastered {
|
||||
font-size: 11px;
|
||||
flex-shrink: 0;
|
||||
width: 14px;
|
||||
text-align: center;
|
||||
|
||||
.cde-kf-tech--mastered & { color: @cde-kungfu; }
|
||||
.cde-kf-tech:not(.cde-kf-tech--mastered) & { color: @cde-muted; }
|
||||
}
|
||||
|
||||
.cde-act-badge {
|
||||
font-size: 9px;
|
||||
font-family: "Averia", sans-serif;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
padding: 2px 5px;
|
||||
border-radius: 3px;
|
||||
flex-shrink: 0;
|
||||
max-width: 110px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
border: 1px solid currentColor;
|
||||
|
||||
&.cde-act--action-attack { color: @wu-red; background: fade(@wu-red, 10%); }
|
||||
&.cde-act--action-defense { color: @wu-blue; background: fade(@wu-blue, 10%); }
|
||||
&.cde-act--action-aid { color: @wu-green; background: fade(@wu-green, 10%); }
|
||||
&.cde-act--action-attack-defense { color: @wu-gray; background: fade(@wu-gray, 12%); }
|
||||
&.cde-act--reaction { color: @wu-brown; background: fade(@wu-brown, 12%); }
|
||||
&.cde-act--dice { color: @cde-spell; background: fade(@cde-spell, 10%); }
|
||||
&.cde-act--damage-inflicted { color: @cde-weapon; background: fade(@cde-weapon, 10%); }
|
||||
&.cde-act--damage-received { color: @cde-muted; background: fade(@cde-border, 20%); }
|
||||
}
|
||||
|
||||
.cde-kf-tech-name {
|
||||
flex: 1;
|
||||
font-size: 12px;
|
||||
color: @cde-text;
|
||||
font-family: "Averia", sans-serif;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
|
||||
em { color: @cde-muted; }
|
||||
}
|
||||
|
||||
.cde-kf-empty {
|
||||
padding: 16px;
|
||||
text-align: center;
|
||||
font-size: 12px;
|
||||
color: @cde-muted;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
// Random component chat message
|
||||
.cde-chat-random-component {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
padding: 8px 12px;
|
||||
}
|
||||
|
||||
.cde-chat-component-label {
|
||||
font-size: 10px;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.1em;
|
||||
color: @cde-muted;
|
||||
font-family: "Averia", sans-serif;
|
||||
}
|
||||
|
||||
.cde-chat-component-value {
|
||||
font-size: 16px;
|
||||
font-weight: 700;
|
||||
color: @cde-spell;
|
||||
text-shadow: 0 0 8px fade(@cde-spell, 50%);
|
||||
}
|
||||
|
||||
// Legacy tabs (actor sheets still use cde-tabs)
|
||||
.cde-tabs {
|
||||
margin-top: @cde-gap;
|
||||
|
||||
Reference in New Issue
Block a user