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;
|
||||
|
||||
Reference in New Issue
Block a user