Refactor CSS into Sass
This commit is contained in:
Aaron Lutomski
-2603
File diff suppressed because it is too large
Load Diff
@@ -1,846 +0,0 @@
|
||||
/* Delta Green — shared DialogV2 styling (.dg-dialog-app) */
|
||||
|
||||
.dg-dialog-app section.window-content {
|
||||
scrollbar-color: #215112 #111 !important;
|
||||
padding: 0.5rem;
|
||||
color: var(--dg-ink);
|
||||
}
|
||||
|
||||
/* Foundry sets explicit light-theme tokens on headings/labels; inherit parchment body color. */
|
||||
.dg-dialog-app section.window-content :is(h1, h2, h3, h4, h5, h6),
|
||||
.dg-dialog-app .standard-form .form-group > label,
|
||||
.dg-dialog-app .form-group > label,
|
||||
.dg-dialog-app .dg-dialog__field-label,
|
||||
.dg-dialog-app .dg-dialog .dg-dialog__heading,
|
||||
.dg-dialog-app .dg-dialog__intro {
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.dg-dialog-app section.window-content input[type="checkbox"]:checked::before {
|
||||
color: var(--dg-ink);
|
||||
}
|
||||
|
||||
.dg-dialog-app section.window-content input[type="text"],
|
||||
.dg-dialog-app section.window-content input[type="number"],
|
||||
.dg-dialog-app section.window-content input[type="password"],
|
||||
.dg-dialog-app section.window-content select {
|
||||
height: unset;
|
||||
line-height: 1.5rem;
|
||||
}
|
||||
|
||||
.dg-dialog-app .dg-dialog input[type="text"],
|
||||
.dg-dialog-app .dg-dialog input[type="number"],
|
||||
.dg-dialog-app .dg-dialog input[type="password"],
|
||||
.dg-dialog-app .dg-dialog select {
|
||||
background-color: rgba(0, 0, 0, 0.05);
|
||||
border: 1px solid rgb(122, 121, 113);
|
||||
border-radius: 3px;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.dg-dialog-app .dg-dialog__field-label,
|
||||
.dg-dialog-app .dg-dialog .dg-dialog__heading {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.dg-dialog-app .dg-dialog__intro {
|
||||
margin: 0 0 0.5rem;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.dg-dialog-app .dg-dialog__messages {
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
|
||||
.dg-dialog-app .dg-dialog__message--error,
|
||||
.dg-dialog-app .dg-dialog .validation-error {
|
||||
color: var(--color-text-error, #c00);
|
||||
font-weight: bold;
|
||||
margin: 0.25rem 0;
|
||||
}
|
||||
|
||||
.dg-dialog-app .dg-dialog__message--warning,
|
||||
.dg-dialog-app .dg-dialog .cap-warning {
|
||||
color: var(--color-text-warning, #c60);
|
||||
font-weight: bold;
|
||||
margin: 0.25rem 0;
|
||||
}
|
||||
|
||||
.dg-dialog-app .form-footer {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: nowrap;
|
||||
align-items: stretch;
|
||||
gap: 0.5rem;
|
||||
margin-top: 0.75rem;
|
||||
}
|
||||
|
||||
.dg-dialog-app .form-footer > button {
|
||||
flex: 1 1 0;
|
||||
min-width: 0;
|
||||
background-color: var(--dg-surface-dark);
|
||||
color: var(--dg-on-dark);
|
||||
border: 1px solid var(--dg-surface-dark);
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.dg-dialog-app .form-footer > button:hover:not(:disabled) {
|
||||
background-color: var(--dg-surface-dark-hover);
|
||||
color: var(--dg-on-dark);
|
||||
border-color: var(--dg-surface-dark-hover);
|
||||
}
|
||||
|
||||
.dg-dialog-app .form-footer > button:disabled {
|
||||
background-color: #555;
|
||||
color: #f0f0f0;
|
||||
border-color: #555;
|
||||
opacity: 1;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.dg-dialog-app--pick-statistics .form-footer {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
}
|
||||
|
||||
.dg-dialog-app--pick-statistics .form-footer > button[data-action="skip"] {
|
||||
grid-column: 1 / -1;
|
||||
}
|
||||
|
||||
.dg-dialog-app--stimulants .form-footer,
|
||||
.dg-dialog-app--modify-roll .form-footer {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Assign stats */
|
||||
.dg-dialog--assign-stats .assign-stats-remaining {
|
||||
margin: 0 0 0.75rem;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.dg-dialog--assign-stats .assign-stats-remaining.is-invalid {
|
||||
color: var(--color-text-warning, #ff9200);
|
||||
}
|
||||
|
||||
.dg-dialog--assign-stats .assign-stats-rows {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.35rem;
|
||||
}
|
||||
|
||||
.dg-dialog--assign-stats .assign-stats-row {
|
||||
display: grid;
|
||||
grid-template-columns: 3rem 1fr;
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
.dg-dialog--assign-stats .assign-stats-label {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.dg-dialog--assign-stats .assign-stats-row input {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* Roll stats */
|
||||
.dg-dialog--roll-stats .roll-stats-layout {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr auto;
|
||||
gap: 1rem;
|
||||
align-items: start;
|
||||
}
|
||||
|
||||
.dg-dialog--roll-stats .roll-stats-pool-section {
|
||||
min-width: 5.5rem;
|
||||
}
|
||||
|
||||
.dg-dialog--roll-stats .roll-stats-pool-hint {
|
||||
margin: 0.75rem 0 0;
|
||||
font-size: var(--font-size-12, 0.75rem);
|
||||
text-align: center;
|
||||
color: var(--color-text-dark-secondary, rgba(0, 0, 0, 0.65));
|
||||
}
|
||||
|
||||
.dg-dialog--roll-stats .roll-stats-pool {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
width: 3rem;
|
||||
min-height: 3rem;
|
||||
padding: 0.5rem;
|
||||
border: 1px dashed rgb(122, 121, 113);
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.dg-dialog--roll-stats .roll-stats-pool.drag-over {
|
||||
border-color: var(--color-border-highlight, #ff6400);
|
||||
background: rgba(255, 100, 0, 0.08);
|
||||
}
|
||||
|
||||
.dg-dialog--roll-stats .roll-stat-token {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 2.5rem;
|
||||
height: 2.5rem;
|
||||
padding: 0;
|
||||
font-weight: bold;
|
||||
font-size: var(--font-size-16, 1rem);
|
||||
border: 1px solid rgb(122, 121, 113);
|
||||
border-radius: 4px;
|
||||
background: rgba(0, 0, 0, 0.05);
|
||||
cursor: grab;
|
||||
user-select: none;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.dg-dialog--roll-stats .roll-stat-token.is-dragging {
|
||||
opacity: 0.5;
|
||||
cursor: grabbing;
|
||||
}
|
||||
|
||||
.dg-dialog--roll-stats .roll-stats-assignment-section {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.35rem;
|
||||
}
|
||||
|
||||
.dg-dialog--roll-stats .roll-stat-row {
|
||||
display: grid;
|
||||
grid-template-columns: 3rem auto;
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
.dg-dialog--roll-stats .roll-stat-label {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.dg-dialog--roll-stats .roll-stat-slot {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 2.5rem;
|
||||
height: 2.5rem;
|
||||
flex: 0 0 auto;
|
||||
padding: 0;
|
||||
border: 1px dashed rgb(122, 121, 113);
|
||||
border-radius: 4px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.dg-dialog--roll-stats .roll-stat-slot.drag-over {
|
||||
border-color: var(--color-border-highlight, #ff6400);
|
||||
background: rgba(255, 100, 0, 0.08);
|
||||
}
|
||||
|
||||
.dg-dialog--roll-stats .roll-stat-slot .roll-stat-token {
|
||||
cursor: grab;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
/* Add profession skill (item editor) */
|
||||
.dg-dialog-app--add-profession-skill .profession-typed-label-group.hidden,
|
||||
.dg-dialog--add-profession-skill .profession-typed-label-group.hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.dg-dialog-app--add-profession-skill .profession-typed-label-group,
|
||||
.dg-dialog--add-profession-skill .profession-typed-label-group {
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.dg-dialog-app--add-profession-skill .profession-typed-label-group > *,
|
||||
.dg-dialog--add-profession-skill .profession-typed-label-group > * {
|
||||
flex: 0 0 auto;
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.dg-dialog-app--add-profession-skill .profession-typed-name-field,
|
||||
.dg-dialog-app--add-profession-skill .profession-choose-one-field,
|
||||
.dg-dialog--add-profession-skill .profession-typed-name-field,
|
||||
.dg-dialog--add-profession-skill .profession-choose-one-field {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
gap: 0.2rem;
|
||||
}
|
||||
|
||||
.dg-dialog-app--add-profession-skill .profession-typed-name-field > label,
|
||||
.dg-dialog--add-profession-skill .profession-typed-name-field > label {
|
||||
flex: none;
|
||||
width: 100%;
|
||||
line-height: 1.3;
|
||||
}
|
||||
|
||||
.dg-dialog--add-profession-skill .profession-typed-name-field input {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.dg-dialog--add-profession-skill .profession-choose-one-field {
|
||||
padding-top: 0.25rem;
|
||||
}
|
||||
|
||||
.dg-dialog--add-profession-skill .profession-choose-one-checkbox {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.35rem;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.dg-dialog--add-profession-skill .profession-choose-one-hint {
|
||||
margin: 0.25rem 0 0;
|
||||
}
|
||||
|
||||
/* Modify roll — keep layout in deltagreen.css under .dg-dialog--modify-roll */
|
||||
|
||||
/* Stimulants */
|
||||
.dg-dialog--stimulants .stimulants-dialog {
|
||||
display: grid;
|
||||
grid-template-columns: 10rem 1fr;
|
||||
gap: 12px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.dg-dialog--stimulants .stimulants-option {
|
||||
display: contents;
|
||||
}
|
||||
|
||||
.dg-dialog--stimulants .stimulants-choice-btn {
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
padding: 4px 8px;
|
||||
border-radius: 3px;
|
||||
font-size: 0.8rem;
|
||||
font-weight: bold;
|
||||
background-color: var(--dg-surface-dark);
|
||||
color: var(--dg-on-dark);
|
||||
border: 1px solid var(--dg-surface-dark);
|
||||
cursor: pointer;
|
||||
white-space: nowrap;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.dg-dialog--stimulants .stimulants-choice-btn:hover {
|
||||
background-color: var(--dg-surface-dark-hover);
|
||||
color: var(--dg-on-dark);
|
||||
border-color: var(--dg-surface-dark-hover);
|
||||
}
|
||||
|
||||
.dg-dialog--stimulants .stimulants-explanation {
|
||||
margin: 0;
|
||||
font-size: var(--font-size-12);
|
||||
line-height: 1.35;
|
||||
}
|
||||
|
||||
/* Modify percentile roll */
|
||||
.dg-dialog--modify-roll .form-group {
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.dg-dialog--modify-roll .modify-roll-readonly {
|
||||
flex: 1;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.dg-dialog--modify-roll .modify-roll-section {
|
||||
margin-top: 1rem;
|
||||
padding-top: 0.75rem;
|
||||
border-top: 1px solid rgb(122, 121, 113);
|
||||
}
|
||||
|
||||
.dg-dialog--modify-roll .modify-roll-section h3 {
|
||||
margin: 0 0 0.35rem;
|
||||
font-size: var(--font-size-14, 0.875rem);
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.dg-dialog--modify-roll .modify-roll-hint {
|
||||
margin: 0 0 0.65rem;
|
||||
font-size: var(--font-size-12);
|
||||
line-height: 1.35;
|
||||
}
|
||||
|
||||
.dg-dialog--modify-roll .modify-roll-quick-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 5rem 1fr;
|
||||
gap: 10px 12px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.dg-dialog--modify-roll .modify-roll-quick-option {
|
||||
display: contents;
|
||||
}
|
||||
|
||||
.dg-dialog--modify-roll .modify-roll-quick-btn,
|
||||
.dg-dialog--modify-roll .modify-roll-submit-btn {
|
||||
box-sizing: border-box;
|
||||
padding: 4px 8px;
|
||||
border-radius: 3px;
|
||||
font-size: 0.8rem;
|
||||
font-weight: bold;
|
||||
background-color: var(--dg-surface-dark);
|
||||
color: var(--dg-on-dark);
|
||||
border: 1px solid var(--dg-surface-dark);
|
||||
cursor: pointer;
|
||||
white-space: nowrap;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.dg-dialog--modify-roll .modify-roll-quick-btn:hover,
|
||||
.dg-dialog--modify-roll .modify-roll-submit-btn:hover {
|
||||
background-color: var(--dg-surface-dark-hover);
|
||||
color: var(--dg-on-dark);
|
||||
border-color: var(--dg-surface-dark-hover);
|
||||
}
|
||||
|
||||
.dg-dialog--modify-roll .modify-roll-quick-explanation {
|
||||
margin: 0;
|
||||
font-size: var(--font-size-12);
|
||||
line-height: 1.35;
|
||||
}
|
||||
|
||||
.dg-dialog--modify-roll .modify-roll-custom-row {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.dg-dialog--modify-roll .modify-roll-custom-row input[type="number"] {
|
||||
flex: 0 0 5rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.dg-dialog--modify-roll .modify-roll-submit-btn {
|
||||
flex: 0 0 auto;
|
||||
min-width: 5rem;
|
||||
}
|
||||
|
||||
/* Character creation — flex chain keeps footer visible; skill totals scroll */
|
||||
.dg-dialog-app--character-creation.application {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.dg-dialog-app--character-creation.application > .window-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex: 1 1 auto;
|
||||
min-height: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.dg-dialog-app--character-creation .dialog-form {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex: 1 1 auto;
|
||||
min-height: 0;
|
||||
max-height: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.dg-dialog-app--character-creation .dialog-form > .dialog-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex: 1 1 auto;
|
||||
min-height: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.dg-dialog-app--character-creation .dialog-form > .form-footer {
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
.dg-dialog-app--character-creation section.window-content {
|
||||
min-height: 38rem;
|
||||
}
|
||||
|
||||
.dg-dialog--character-creation.dg-dialog {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex: 1 1 auto;
|
||||
min-height: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.dg-dialog--character-creation .dg-dialog__layout--two-column {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: stretch;
|
||||
gap: 40px;
|
||||
flex: 1 1 auto;
|
||||
min-height: 0;
|
||||
min-width: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.dg-dialog--character-creation .dg-dialog__column--left,
|
||||
.dg-dialog--character-creation .dg-dialog__column--right {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex: 1 1 0;
|
||||
min-width: 0;
|
||||
min-height: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.dg-dialog--character-creation .dg-dialog__column--right > .dg-dialog__messages {
|
||||
flex: 0 0 auto;
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
|
||||
/* Character creation tabs — same equal-width overlap as agent sheet */
|
||||
.dg-dialog--character-creation nav.character-creation-tabs {
|
||||
display: flex;
|
||||
flex-flow: row nowrap;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
gap: 0;
|
||||
width: 100%;
|
||||
min-width: 0;
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border-top: none;
|
||||
border-bottom: transparent;
|
||||
height: 1.5rem;
|
||||
line-height: 1.5rem;
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
overflow-x: auto;
|
||||
overflow-y: hidden;
|
||||
}
|
||||
|
||||
.dg-dialog-app--character-creation section.window-content.program-style {
|
||||
--dg-agent-tab-inactive-bg: rgb(186, 184, 181);
|
||||
--dg-agent-tab-active-bg: var(--dg-surface-dark);
|
||||
--dg-agent-tab-active-color: var(--dg-on-dark);
|
||||
}
|
||||
|
||||
.dg-dialog-app--character-creation section.window-content.cowboy-style,
|
||||
.dg-dialog-app--character-creation section.window-content.outlaw-style {
|
||||
--dg-agent-tab-inactive-bg: rgb(210, 190, 150);
|
||||
--dg-agent-tab-active-bg: rgb(194, 168, 110);
|
||||
--dg-agent-tab-active-color: var(--dg-ink);
|
||||
}
|
||||
|
||||
.dg-dialog--character-creation nav.character-creation-tabs [data-action="tab"] {
|
||||
flex: 1 1 0;
|
||||
min-width: 0;
|
||||
position: relative;
|
||||
text-align: center;
|
||||
margin-left: -14px;
|
||||
padding-inline: 3px;
|
||||
font-size: 11px;
|
||||
overflow: visible;
|
||||
box-shadow:
|
||||
0 1px 2px rgba(0, 0, 0, 0.16),
|
||||
-1px 0 2px rgba(0, 0, 0, 0.1),
|
||||
1px 0 2px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.dg-dialog--character-creation nav.character-creation-tabs [data-action="tab"]:first-child {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.dg-dialog--character-creation nav.character-creation-tabs [data-action="tab"]:nth-child(1) {
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.dg-dialog--character-creation nav.character-creation-tabs [data-action="tab"]:nth-child(2) {
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.dg-dialog--character-creation nav.character-creation-tabs [data-action="tab"]:nth-child(3) {
|
||||
z-index: 3;
|
||||
}
|
||||
|
||||
.dg-dialog-app--character-creation section.window-content .character-creation-tabs [data-action="tab"]:not(.active) {
|
||||
background: var(--dg-agent-tab-inactive-bg);
|
||||
}
|
||||
|
||||
.dg-dialog-app--character-creation section.window-content .character-creation-tabs [data-action="tab"].active {
|
||||
z-index: 10;
|
||||
margin-bottom: -2px;
|
||||
padding-bottom: 2px;
|
||||
background: var(--dg-agent-tab-active-bg);
|
||||
color: var(--dg-agent-tab-active-color);
|
||||
box-shadow:
|
||||
0 2px 6px rgba(0, 0, 0, 0.22),
|
||||
-2px 0 5px rgba(0, 0, 0, 0.14),
|
||||
2px 0 5px rgba(0, 0, 0, 0.14);
|
||||
}
|
||||
|
||||
.dg-dialog--character-creation .dg-dialog__tab-panels > .tab.active {
|
||||
border-top-left-radius: 0;
|
||||
border-top-right-radius: 0;
|
||||
}
|
||||
|
||||
.dg-dialog--character-creation .dg-dialog__tab-panels {
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
.dg-dialog--character-creation .dg-dialog__tab-panels > .tab {
|
||||
display: none;
|
||||
overflow-y: auto;
|
||||
max-height: 28rem;
|
||||
}
|
||||
|
||||
.dg-dialog--character-creation .dg-dialog__tab-panels > .tab.active {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.dg-dialog--character-creation .character-creation-skills-section {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex: 1 1 auto;
|
||||
min-height: 0;
|
||||
overflow: hidden;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.dg-dialog--character-creation .character-creation-skill-totals-header {
|
||||
margin-bottom: 0.5rem;
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
.dg-dialog--character-creation .character-creation-skill-totals-header .dg-dialog__intro {
|
||||
margin: 0;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.dg-dialog--character-creation .character-creation-section-heading {
|
||||
font-size: var(--font-size-16);
|
||||
margin: 0 0 0.5rem;
|
||||
line-height: 1.35;
|
||||
}
|
||||
|
||||
.dg-dialog--character-creation .character-creation-skills-columns-header {
|
||||
flex: 0 0 auto;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 0.75rem;
|
||||
margin-bottom: 0.25rem;
|
||||
font-size: var(--font-size-12);
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.dg-dialog--character-creation .character-creation-skill-col-header {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr auto;
|
||||
gap: 0.5rem;
|
||||
padding: 0 0.15rem;
|
||||
}
|
||||
|
||||
.dg-dialog--character-creation .character-creation-skills-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 0.2rem 0.75rem;
|
||||
flex: 1 1 auto;
|
||||
min-height: 0;
|
||||
overflow-y: auto;
|
||||
scrollbar-color: #215112 #111 !important;
|
||||
}
|
||||
|
||||
.dg-dialog--character-creation .dg-dialog__skill-entry {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr auto;
|
||||
gap: 0.25rem 0.5rem;
|
||||
align-items: center;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.dg-dialog--character-creation .dg-dialog__skill-label {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.dg-dialog--character-creation .dg-dialog__skill-value {
|
||||
text-align: right;
|
||||
min-width: 2.5rem;
|
||||
}
|
||||
|
||||
.dg-dialog--character-creation .dg-dialog__skill-entry.is-modified .dg-dialog__skill-label,
|
||||
.dg-dialog--character-creation .dg-dialog__skill-entry.is-modified .dg-dialog__skill-value {
|
||||
color: var(--color-text-success, #2d8a3e);
|
||||
}
|
||||
|
||||
.dg-dialog--character-creation .character-creation-choose-one-section {
|
||||
flex: 0 0 auto;
|
||||
margin: 0.5rem 0;
|
||||
}
|
||||
|
||||
|
||||
.dg-dialog--character-creation .character-creation-choose-one-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.35rem;
|
||||
}
|
||||
|
||||
.dg-dialog--character-creation .character-creation-choose-one-row {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.2rem;
|
||||
}
|
||||
|
||||
.dg-dialog--character-creation .character-creation-choose-one-row input {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.dg-dialog--character-creation .character-creation-option-list {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: flex-start;
|
||||
gap: 0.75rem;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.dg-dialog--character-creation .character-creation-option-column {
|
||||
flex: 1 1 0;
|
||||
min-width: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.35rem;
|
||||
}
|
||||
|
||||
.dg-dialog--character-creation .character-creation-option-row {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
gap: 0.25rem;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.dg-dialog--character-creation .character-creation-option-row > label {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
gap: 0.35rem;
|
||||
width: 100%;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.dg-dialog--character-creation .character-creation-option-row .option-skill-label {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
min-width: 0;
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
|
||||
.dg-dialog--character-creation .character-creation-option-row .option-choose-one-label {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.dg-dialog--character-creation .character-creation-option-row .option-choose-one-label:disabled {
|
||||
opacity: 0.65;
|
||||
}
|
||||
|
||||
.dg-dialog--character-creation .dg-dialog__tab-panels > .tab[data-tab="bonus-skills"].active {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-height: 28rem;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.dg-dialog--character-creation .character-creation-bonus-intro {
|
||||
flex: 0 0 auto;
|
||||
margin: 0 0 0.5rem;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.dg-dialog--character-creation .character-creation-bonus-grid {
|
||||
flex: 1 1 auto;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-evenly;
|
||||
min-height: 0;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.dg-dialog--character-creation .character-creation-bonus-slot {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
gap: 0.35rem;
|
||||
min-width: 0;
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
.dg-dialog--character-creation .character-creation-bonus-slot select {
|
||||
flex: 0 1 11rem;
|
||||
min-width: 7rem;
|
||||
}
|
||||
|
||||
.dg-dialog--character-creation .character-creation-bonus-slot .bonus-typed-label {
|
||||
flex: 1 1 0;
|
||||
min-width: 5rem;
|
||||
}
|
||||
|
||||
.dg-dialog--character-creation .character-creation-bonus-slot .bonus-typed-label.hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.dg-dialog--character-creation .dg-dialog__tab-panels > .tab[data-tab="bonds"].active {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-height: 28rem;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.dg-dialog--character-creation .character-creation-bonds-list {
|
||||
flex: 1 1 auto;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-evenly;
|
||||
min-height: 0;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.dg-dialog--character-creation .character-creation-bonds-intro {
|
||||
flex: 0 0 auto;
|
||||
margin: 0 0 0.5rem;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.dg-dialog--character-creation .character-creation-bond-row {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr 3.5rem;
|
||||
gap: 0.35rem 0.5rem;
|
||||
align-items: end;
|
||||
min-width: 0;
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
.dg-dialog--character-creation .character-creation-bond-field {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.15rem;
|
||||
min-width: 0;
|
||||
font-size: var(--font-size-12);
|
||||
}
|
||||
|
||||
.dg-dialog--character-creation .character-creation-bond-field-label {
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.dg-dialog--character-creation .character-creation-bond-field input {
|
||||
width: 100%;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.dg-dialog--character-creation .character-creation-bond-field-score input {
|
||||
text-align: center;
|
||||
}
|
||||
@@ -1,28 +0,0 @@
|
||||
.damage-modify-label-grid {
|
||||
display: grid;
|
||||
grid-template-columns: auto auto;
|
||||
align-content: left;
|
||||
justify-content: left;
|
||||
align-items: left;
|
||||
padding: 10px;
|
||||
grid-gap: 10px 15px;
|
||||
}
|
||||
|
||||
.damage-modify-formula-modify-grid {
|
||||
display: grid;
|
||||
grid-template-columns: auto auto auto auto auto auto;
|
||||
align-content: left;
|
||||
justify-content: left;
|
||||
align-items: left;
|
||||
padding: 10px;
|
||||
grid-gap: 10px 15px;
|
||||
}
|
||||
|
||||
.damage-roll-formula-part {
|
||||
min-width: 100px !important;
|
||||
text-align: center !important;
|
||||
}
|
||||
|
||||
.damage-modify-roll-mode {
|
||||
padding: 10px;
|
||||
}
|
||||
@@ -1,49 +0,0 @@
|
||||
@font-face {
|
||||
font-family: "SpecialElite";
|
||||
src: url("../assets/font/special_elite/SpecialElite-Regular.ttf")
|
||||
format("truetype");
|
||||
}
|
||||
|
||||
.special-elite-font {
|
||||
font-family: "SpecialElite", sans-serif !important;
|
||||
}
|
||||
|
||||
.public-sans-font {
|
||||
font-family: "PublicSans", sans-serif !important;
|
||||
}
|
||||
|
||||
/* TinyMCE iframe (legacy); theme is not available inside the iframe — keep Special Elite. */
|
||||
.tox .tox-editor-container,
|
||||
.tox .tox-edit-area {
|
||||
font-family: "SpecialElite", sans-serif !important;
|
||||
}
|
||||
|
||||
.cowboy-style .editor-host .editor .editor-content,
|
||||
.cowboy-style .editor-host prose-mirror .editor-content,
|
||||
.cowboy-style .editor-host prose-mirror .editor-content .ProseMirror {
|
||||
font-family: "SpecialElite", sans-serif !important;
|
||||
}
|
||||
|
||||
.outlaw-style .editor-host .editor .editor-content,
|
||||
.outlaw-style .editor-host prose-mirror .editor-content,
|
||||
.outlaw-style .editor-host prose-mirror .editor-content .ProseMirror,
|
||||
.program-style .editor-host .editor .editor-content,
|
||||
.program-style .editor-host prose-mirror .editor-content,
|
||||
.program-style .editor-host prose-mirror .editor-content .ProseMirror {
|
||||
font-family: "PublicSans", sans-serif !important;
|
||||
}
|
||||
|
||||
.cowboy-style .editor-host .tox,
|
||||
.cowboy-style .editor-host .tox-tinymce,
|
||||
.cowboy-style .editor-host .tox .tox-edit-area {
|
||||
font-family: "SpecialElite", sans-serif !important;
|
||||
}
|
||||
|
||||
.outlaw-style .editor-host .tox,
|
||||
.outlaw-style .editor-host .tox-tinymce,
|
||||
.outlaw-style .editor-host .tox .tox-edit-area,
|
||||
.program-style .editor-host .tox,
|
||||
.program-style .editor-host .tox-tinymce,
|
||||
.program-style .editor-host .tox .tox-edit-area {
|
||||
font-family: "PublicSans", sans-serif !important;
|
||||
}
|
||||
Reference in New Issue
Block a user