Rework complet des fiches et dialog de jets
This commit is contained in:
@@ -29,12 +29,21 @@
|
||||
overflow: hidden;
|
||||
}
|
||||
.cde-sheet input,
|
||||
.cde-sheet select,
|
||||
.cde-sheet textarea {
|
||||
font-family: inherit;
|
||||
color: #e2e8f4;
|
||||
background: transparent;
|
||||
}
|
||||
.cde-sheet select {
|
||||
font-family: inherit;
|
||||
color: #e2e8f4;
|
||||
background: #101622;
|
||||
border-radius: 2px;
|
||||
}
|
||||
.cde-sheet select option {
|
||||
background: #080c14;
|
||||
color: #e2e8f4;
|
||||
}
|
||||
.cde-neon-header {
|
||||
position: relative;
|
||||
background: #101622;
|
||||
@@ -182,8 +191,7 @@
|
||||
color: #e2e8f4;
|
||||
letter-spacing: 0.02em;
|
||||
}
|
||||
.cde-stat-cell input,
|
||||
.cde-stat-cell select {
|
||||
.cde-stat-cell input {
|
||||
width: 100%;
|
||||
background: transparent;
|
||||
border: none;
|
||||
@@ -194,7 +202,18 @@
|
||||
outline: none;
|
||||
transition: border-color 0.15s;
|
||||
}
|
||||
.cde-stat-cell input:focus,
|
||||
.cde-stat-cell input:focus {
|
||||
border-bottom-color: #00d4d4;
|
||||
}
|
||||
.cde-stat-cell select {
|
||||
width: 100%;
|
||||
border: none;
|
||||
border-bottom: 1px solid #1a2436;
|
||||
font-size: 14px;
|
||||
padding: 4px 0;
|
||||
outline: none;
|
||||
transition: border-color 0.15s;
|
||||
}
|
||||
.cde-stat-cell select:focus {
|
||||
border-bottom-color: #00d4d4;
|
||||
}
|
||||
@@ -492,8 +511,7 @@ section.npc .cde-neon-tabs .item.active {
|
||||
color: #7d94b8;
|
||||
margin: 0;
|
||||
}
|
||||
.cde-chip input,
|
||||
.cde-chip select {
|
||||
.cde-chip input {
|
||||
width: 100%;
|
||||
border: none;
|
||||
border-bottom: 1px solid #1a2436;
|
||||
@@ -502,7 +520,16 @@ section.npc .cde-neon-tabs .item.active {
|
||||
padding: 4px 0;
|
||||
outline: none;
|
||||
}
|
||||
.cde-chip input:focus,
|
||||
.cde-chip input:focus {
|
||||
border-bottom-color: #00d4d4;
|
||||
}
|
||||
.cde-chip select {
|
||||
width: 100%;
|
||||
border: none;
|
||||
border-bottom: 1px solid #1a2436;
|
||||
padding: 4px 0;
|
||||
outline: none;
|
||||
}
|
||||
.cde-chip select:focus {
|
||||
border-bottom-color: #00d4d4;
|
||||
}
|
||||
@@ -738,7 +765,6 @@ section.npc .cde-neon-tabs .item.active {
|
||||
color: #7d94b8;
|
||||
}
|
||||
.cde-field input,
|
||||
.cde-field select,
|
||||
.cde-field textarea {
|
||||
width: 100%;
|
||||
border: none;
|
||||
@@ -749,10 +775,19 @@ section.npc .cde-neon-tabs .item.active {
|
||||
outline: none;
|
||||
}
|
||||
.cde-field input:focus,
|
||||
.cde-field select:focus,
|
||||
.cde-field textarea:focus {
|
||||
border-bottom-color: #00d4d4;
|
||||
}
|
||||
.cde-field select {
|
||||
width: 100%;
|
||||
border: none;
|
||||
border-bottom: 1px solid #1a2436;
|
||||
padding: 5px 0;
|
||||
outline: none;
|
||||
}
|
||||
.cde-field select:focus {
|
||||
border-bottom-color: #00d4d4;
|
||||
}
|
||||
.cde-section-title {
|
||||
font-family: "Averia", sans-serif;
|
||||
font-size: 10px;
|
||||
@@ -793,8 +828,7 @@ section.npc .cde-neon-tabs .item.active {
|
||||
.cde-data-table tr:hover {
|
||||
background: rgba(38, 56, 83, 0.2);
|
||||
}
|
||||
.cde-data-table input,
|
||||
.cde-data-table select {
|
||||
.cde-data-table input {
|
||||
width: 100%;
|
||||
border: none;
|
||||
border-bottom: 1px solid #1a2436;
|
||||
@@ -803,6 +837,13 @@ section.npc .cde-neon-tabs .item.active {
|
||||
padding: 4px 0;
|
||||
outline: none;
|
||||
}
|
||||
.cde-data-table select {
|
||||
width: 100%;
|
||||
border: none;
|
||||
border-bottom: 1px solid #1a2436;
|
||||
padding: 4px 0;
|
||||
outline: none;
|
||||
}
|
||||
.cde-centered-card {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
@@ -1222,6 +1263,763 @@ section.npc .cde-neon-tabs .item.active {
|
||||
letter-spacing: 0.06em;
|
||||
color: #7d94b8;
|
||||
}
|
||||
.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: #7d94b8;
|
||||
border-bottom: 1px solid #1a2436;
|
||||
padding-bottom: 6px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.cde-section-label i {
|
||||
font-size: 11px;
|
||||
}
|
||||
.cde-section-label--top-margin {
|
||||
margin-top: 18px;
|
||||
}
|
||||
.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: #101622;
|
||||
border: 1px solid #1a2436;
|
||||
border-radius: 8px;
|
||||
padding: 4px 8px;
|
||||
}
|
||||
.cde-component-cell:hover {
|
||||
border-color: #263853;
|
||||
}
|
||||
.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: #e2e8f4;
|
||||
font-size: 12px;
|
||||
padding: 2px 0;
|
||||
}
|
||||
.cde-component-input:focus {
|
||||
outline: none;
|
||||
border-bottom-color: #4a9eff;
|
||||
}
|
||||
.cde-component-input::placeholder {
|
||||
color: #7d94b8;
|
||||
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: rgba(74, 158, 255, 0.08);
|
||||
border: 1px solid rgba(74, 158, 255, 0.35);
|
||||
border-radius: 8px;
|
||||
color: #4a9eff;
|
||||
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;
|
||||
}
|
||||
.cde-btn-random-component i {
|
||||
font-size: 14px;
|
||||
}
|
||||
.cde-btn-random-component:hover {
|
||||
background: rgba(74, 158, 255, 0.16);
|
||||
box-shadow: 0 0 8px rgba(74, 158, 255, 0.3);
|
||||
}
|
||||
.cde-magic-card {
|
||||
background: #101622;
|
||||
border: 1px solid #1a2436;
|
||||
border-left: 3px solid #263853;
|
||||
border-radius: 8px;
|
||||
margin-bottom: 8px;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.4);
|
||||
}
|
||||
.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: #e2e8f4;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
.cde-magic-aspect-name {
|
||||
font-size: 10px;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.08em;
|
||||
color: #7d94b8;
|
||||
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: 8px;
|
||||
cursor: pointer;
|
||||
transition: background 0.15s;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.cde-magic-roll-btn i {
|
||||
font-size: 15px;
|
||||
}
|
||||
.cde-magic-roll-btn:hover {
|
||||
background: rgba(74, 158, 255, 0.15);
|
||||
}
|
||||
.cde-magic-toggle {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
color: #7d94b8;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.cde-magic-toggle input[type="checkbox"] {
|
||||
display: none;
|
||||
}
|
||||
.cde-magic-toggle i {
|
||||
font-size: 11px;
|
||||
transition: color 0.15s;
|
||||
}
|
||||
.cde-magic-toggle:hover i {
|
||||
color: #e2e8f4;
|
||||
}
|
||||
.cde-magic-specialities {
|
||||
border-top: 1px solid #1a2436;
|
||||
padding: 4px 0;
|
||||
}
|
||||
.cde-magic-spec-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 5px 10px 5px 42px;
|
||||
opacity: 0.55;
|
||||
transition: opacity 0.12s, background 0.12s;
|
||||
}
|
||||
.cde-magic-spec-row:hover {
|
||||
opacity: 1;
|
||||
background: rgba(38, 56, 83, 0.3);
|
||||
}
|
||||
.cde-magic-spec-row--active {
|
||||
opacity: 1;
|
||||
}
|
||||
.cde-magic-spec-check-label {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.cde-magic-spec-check-label input[type="checkbox"] {
|
||||
display: none;
|
||||
}
|
||||
.cde-magic-spec-check-label .cde-spec-checkbox-ui {
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
border: 1px solid #7d94b8;
|
||||
border-radius: 3px;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transition: border-color 0.12s, background 0.12s;
|
||||
}
|
||||
.cde-magic-spec-check-label input:checked + .cde-spec-checkbox-ui {
|
||||
background: #4a9eff;
|
||||
border-color: #4a9eff;
|
||||
}
|
||||
.cde-magic-spec-check-label input:checked + .cde-spec-checkbox-ui::after {
|
||||
content: "✓";
|
||||
font-size: 9px;
|
||||
color: #080c14;
|
||||
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: #7d94b8;
|
||||
width: 42px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.cde-magic-spec-polarity.icon-yin {
|
||||
color: #cc44ff;
|
||||
}
|
||||
.cde-magic-spec-polarity.icon-yang {
|
||||
color: #00d4d4;
|
||||
}
|
||||
.cde-magic-spec-polarity.icon-yinyang {
|
||||
color: #4a9eff;
|
||||
}
|
||||
.cde-magic-spec-name {
|
||||
flex: 1;
|
||||
font-size: 12px;
|
||||
color: #e2e8f4;
|
||||
font-family: "Averia", sans-serif;
|
||||
}
|
||||
.cde-magic-spec-roll-btn {
|
||||
width: 26px;
|
||||
height: 26px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 8px;
|
||||
cursor: pointer;
|
||||
color: #7d94b8;
|
||||
flex-shrink: 0;
|
||||
transition: color 0.15s, background 0.15s;
|
||||
}
|
||||
.cde-magic-spec-roll-btn i {
|
||||
font-size: 12px;
|
||||
}
|
||||
.cde-magic-spec-roll-btn:hover {
|
||||
color: #4a9eff;
|
||||
background: rgba(74, 158, 255, 0.12);
|
||||
}
|
||||
.cde-magic--internalcinnabar {
|
||||
border-left-color: #70706e;
|
||||
}
|
||||
.cde-magic--internalcinnabar .cde-magic-name {
|
||||
color: #a3a3a1;
|
||||
}
|
||||
.cde-magic--internalcinnabar .cde-magic-roll-btn i {
|
||||
color: #70706e;
|
||||
}
|
||||
.cde-magic--alchemy {
|
||||
border-left-color: #009fe2;
|
||||
}
|
||||
.cde-magic--alchemy .cde-magic-name {
|
||||
color: #30c1ff;
|
||||
}
|
||||
.cde-magic--alchemy .cde-magic-roll-btn i {
|
||||
color: #009fe2;
|
||||
}
|
||||
.cde-magic--masteryoftheway {
|
||||
border-left-color: #a85747;
|
||||
}
|
||||
.cde-magic--masteryoftheway .cde-magic-name {
|
||||
color: #cd9488;
|
||||
}
|
||||
.cde-magic--masteryoftheway .cde-magic-roll-btn i {
|
||||
color: #be7364;
|
||||
}
|
||||
.cde-magic--exorcism {
|
||||
border-left-color: #cd171a;
|
||||
}
|
||||
.cde-magic--exorcism .cde-magic-name {
|
||||
color: #ed5d60;
|
||||
}
|
||||
.cde-magic--exorcism .cde-magic-roll-btn i {
|
||||
color: #cd171a;
|
||||
}
|
||||
.cde-magic--geomancy {
|
||||
border-left-color: #41a436;
|
||||
}
|
||||
.cde-magic--geomancy .cde-magic-name {
|
||||
color: #68ca5d;
|
||||
}
|
||||
.cde-magic--geomancy .cde-magic-roll-btn i {
|
||||
color: #41a436;
|
||||
}
|
||||
.cde-grimoire-section {
|
||||
border-top: 1px dashed rgba(26, 36, 54, 0.6);
|
||||
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: #7d94b8;
|
||||
}
|
||||
.cde-grimoire-header i {
|
||||
font-size: 10px;
|
||||
color: #4a9eff;
|
||||
}
|
||||
.cde-grimoire-header span {
|
||||
flex: 1;
|
||||
}
|
||||
.cde-grimoire-add {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
border-radius: 3px;
|
||||
cursor: pointer;
|
||||
color: #7d94b8;
|
||||
transition: color 0.12s, background 0.12s;
|
||||
}
|
||||
.cde-grimoire-add i {
|
||||
font-size: 10px;
|
||||
}
|
||||
.cde-grimoire-add:hover {
|
||||
color: #4a9eff;
|
||||
background: rgba(74, 158, 255, 0.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 rgba(26, 36, 54, 0.4);
|
||||
transition: background 0.1s;
|
||||
}
|
||||
.cde-grimoire-entry:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
.cde-grimoire-entry:hover {
|
||||
background: rgba(26, 36, 54, 0.25);
|
||||
}
|
||||
.cde-grimoire-entry:hover .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: #e2e8f4;
|
||||
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: #7d94b8;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.cde-grimoire-meta em {
|
||||
color: #4a9eff;
|
||||
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;
|
||||
}
|
||||
.cde-grimoire-diff i,
|
||||
.cde-grimoire-hei i {
|
||||
font-size: 9px;
|
||||
}
|
||||
.cde-grimoire-diff {
|
||||
color: #7d94b8;
|
||||
}
|
||||
.cde-grimoire-hei {
|
||||
color: #ff3d5a;
|
||||
}
|
||||
.cde-grimoire-controls {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
opacity: 0;
|
||||
transition: opacity 0.12s;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.cde-grimoire-controls a {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
border-radius: 3px;
|
||||
color: #7d94b8;
|
||||
cursor: pointer;
|
||||
transition: color 0.12s, background 0.12s;
|
||||
}
|
||||
.cde-grimoire-controls a i {
|
||||
font-size: 10px;
|
||||
}
|
||||
.cde-grimoire-controls a:hover {
|
||||
color: #e2e8f4;
|
||||
background: rgba(38, 56, 83, 0.3);
|
||||
}
|
||||
.cde-grimoire-empty {
|
||||
padding: 4px 14px 8px;
|
||||
font-size: 11px;
|
||||
color: #7d94b8;
|
||||
font-style: italic;
|
||||
margin: 0;
|
||||
}
|
||||
.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: #7d94b8;
|
||||
cursor: pointer;
|
||||
padding: 4px 10px;
|
||||
border-radius: 8px;
|
||||
border: 1px solid #1a2436;
|
||||
transition: color 0.12s, border-color 0.12s, background 0.12s;
|
||||
}
|
||||
.cde-kf-add-btn i {
|
||||
font-size: 10px;
|
||||
}
|
||||
.cde-kf-add-btn:hover {
|
||||
color: #ff3d5a;
|
||||
border-color: #ff3d5a;
|
||||
background: rgba(255, 61, 90, 0.08);
|
||||
}
|
||||
.cde-kf-card {
|
||||
border: 1px solid #1a2436;
|
||||
border-left: 3px solid #ff3d5a;
|
||||
border-radius: 8px;
|
||||
background: rgba(16, 22, 34, 0.7);
|
||||
margin-bottom: 10px;
|
||||
overflow: hidden;
|
||||
transition: box-shadow 0.15s;
|
||||
}
|
||||
.cde-kf-card:hover {
|
||||
box-shadow: 0 0 8px rgba(255, 61, 90, 0.2);
|
||||
}
|
||||
.cde-kf-card.cde-kf--metal {
|
||||
border-left-color: #70706e;
|
||||
}
|
||||
.cde-kf-card.cde-kf--eau {
|
||||
border-left-color: #009fe2;
|
||||
}
|
||||
.cde-kf-card.cde-kf--terre {
|
||||
border-left-color: #be7364;
|
||||
}
|
||||
.cde-kf-card.cde-kf--feu {
|
||||
border-left-color: #cd171a;
|
||||
}
|
||||
.cde-kf-card.cde-kf--bois {
|
||||
border-left-color: #41a436;
|
||||
}
|
||||
.cde-kf-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 8px 10px;
|
||||
}
|
||||
.cde-kf-header: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: #e2e8f4;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
.cde-kf-meta {
|
||||
font-size: 10px;
|
||||
color: #7d94b8;
|
||||
font-family: "Averia", sans-serif;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.06em;
|
||||
}
|
||||
.cde-kf-meta em {
|
||||
color: #e2e8f4;
|
||||
font-style: normal;
|
||||
}
|
||||
.cde-kf-roll-btn {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 8px;
|
||||
cursor: pointer;
|
||||
color: #7d94b8;
|
||||
flex-shrink: 0;
|
||||
transition: color 0.15s, background 0.15s;
|
||||
}
|
||||
.cde-kf-roll-btn i {
|
||||
font-size: 14px;
|
||||
}
|
||||
.cde-kf-roll-btn:hover {
|
||||
color: #ff3d5a;
|
||||
background: rgba(255, 61, 90, 0.15);
|
||||
}
|
||||
.cde-kf-controls {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
opacity: 0;
|
||||
transition: opacity 0.12s;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.cde-kf-controls a {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
border-radius: 3px;
|
||||
color: #7d94b8;
|
||||
cursor: pointer;
|
||||
transition: color 0.12s, background 0.12s;
|
||||
}
|
||||
.cde-kf-controls a i {
|
||||
font-size: 11px;
|
||||
}
|
||||
.cde-kf-controls a:hover {
|
||||
color: #e2e8f4;
|
||||
background: rgba(38, 56, 83, 0.3);
|
||||
}
|
||||
.cde-kf-style-row {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
gap: 8px;
|
||||
padding: 4px 12px 6px 44px;
|
||||
border-top: 1px solid rgba(26, 36, 54, 0.6);
|
||||
background: rgba(16, 22, 34, 0.4);
|
||||
}
|
||||
.cde-kf-style-label {
|
||||
font-size: 10px;
|
||||
font-family: "Averia", sans-serif;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.08em;
|
||||
color: #ff3d5a;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.cde-kf-style-label i {
|
||||
font-size: 9px;
|
||||
}
|
||||
.cde-kf-style-text {
|
||||
font-size: 11px;
|
||||
color: #e2e8f4;
|
||||
font-family: "Averia", sans-serif;
|
||||
font-style: italic;
|
||||
}
|
||||
.cde-kf-techniques {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border-top: 1px solid rgba(26, 36, 54, 0.5);
|
||||
}
|
||||
.cde-kf-tech {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
padding: 5px 12px 5px 44px;
|
||||
border-bottom: 1px solid rgba(26, 36, 54, 0.3);
|
||||
opacity: 0.5;
|
||||
transition: opacity 0.1s, background 0.1s;
|
||||
}
|
||||
.cde-kf-tech:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
.cde-kf-tech--mastered {
|
||||
opacity: 1;
|
||||
}
|
||||
.cde-kf-tech:hover {
|
||||
background: rgba(26, 36, 54, 0.2);
|
||||
opacity: 1;
|
||||
}
|
||||
.cde-kf-tech-mastered {
|
||||
font-size: 11px;
|
||||
flex-shrink: 0;
|
||||
width: 14px;
|
||||
text-align: center;
|
||||
}
|
||||
.cde-kf-tech--mastered .cde-kf-tech-mastered {
|
||||
color: #ff3d5a;
|
||||
}
|
||||
.cde-kf-tech:not(.cde-kf-tech--mastered) .cde-kf-tech-mastered {
|
||||
color: #7d94b8;
|
||||
}
|
||||
.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-badge.cde-act--action-attack {
|
||||
color: #cd171a;
|
||||
background: rgba(205, 23, 26, 0.1);
|
||||
}
|
||||
.cde-act-badge.cde-act--action-defense {
|
||||
color: #009fe2;
|
||||
background: rgba(0, 159, 226, 0.1);
|
||||
}
|
||||
.cde-act-badge.cde-act--action-aid {
|
||||
color: #41a436;
|
||||
background: rgba(65, 164, 54, 0.1);
|
||||
}
|
||||
.cde-act-badge.cde-act--action-attack-defense {
|
||||
color: #70706e;
|
||||
background: rgba(112, 112, 110, 0.12);
|
||||
}
|
||||
.cde-act-badge.cde-act--reaction {
|
||||
color: #a85747;
|
||||
background: rgba(168, 87, 71, 0.12);
|
||||
}
|
||||
.cde-act-badge.cde-act--dice {
|
||||
color: #4a9eff;
|
||||
background: rgba(74, 158, 255, 0.1);
|
||||
}
|
||||
.cde-act-badge.cde-act--damage-inflicted {
|
||||
color: #ff6b35;
|
||||
background: rgba(255, 107, 53, 0.1);
|
||||
}
|
||||
.cde-act-badge.cde-act--damage-received {
|
||||
color: #7d94b8;
|
||||
background: rgba(26, 36, 54, 0.2);
|
||||
}
|
||||
.cde-kf-tech-name {
|
||||
flex: 1;
|
||||
font-size: 12px;
|
||||
color: #e2e8f4;
|
||||
font-family: "Averia", sans-serif;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
.cde-kf-tech-name em {
|
||||
color: #7d94b8;
|
||||
}
|
||||
.cde-kf-empty {
|
||||
padding: 16px;
|
||||
text-align: center;
|
||||
font-size: 12px;
|
||||
color: #7d94b8;
|
||||
font-style: italic;
|
||||
}
|
||||
.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: #7d94b8;
|
||||
font-family: "Averia", sans-serif;
|
||||
}
|
||||
.cde-chat-component-value {
|
||||
font-size: 16px;
|
||||
font-weight: 700;
|
||||
color: #4a9eff;
|
||||
text-shadow: 0 0 8px rgba(74, 158, 255, 0.5);
|
||||
}
|
||||
.cde-tabs {
|
||||
margin-top: 12px;
|
||||
border-bottom: 1px solid #1a2436;
|
||||
|
||||
@@ -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