mirror of
https://github.com/Nighthawk42/roll20-character-sheets.git
synced 2026-09-04 22:22:28 +00:00
1558 lines
59 KiB
CSS
1558 lines
59 KiB
CSS
|
|
@import url("https://fonts.googleapis.com/css?family=Material+Icons&display=swap");
|
|
.ui-dialog .tab-content .charsheet select,
|
|
.ui-dialog .tab-content .charsheet textarea,
|
|
.ui-dialog .tab-content .charsheet input,
|
|
.ui-dialog .tab-content .charsheet .uneditable-input,
|
|
.ui-dialog .tab-content .charsheet label,
|
|
.ui-dialog .tab-content .charsheet button {
|
|
all: initial;
|
|
}
|
|
|
|
.sheet-rolltemplate-utn.sheet-rolltemplate-darkmode, .sheet-darkmode .ui-dialog {
|
|
--borderColor: var(--dark-secondarytext);
|
|
--fontColor: var(--dark-secondarytext);
|
|
--backColor: var(--dark-surface1);
|
|
--dark-primary:#c33d00;
|
|
--dark-primary-highlight:#9a644c;
|
|
--selectedColor:var(--dark-primary);
|
|
--subHeadBackColor:var(--dark-primary);
|
|
}
|
|
.sheet-rolltemplate-utn.sheet-rolltemplate-darkmode img, .sheet-darkmode .ui-dialog img {
|
|
filter: brightness(0.8) contrast(1.2);
|
|
}
|
|
|
|
.sheet-rolltemplate-utn .stacked.input-label, .ui-dialog .tab-content .charsheet .stacked.input-label {
|
|
flex-direction: column-reverse;
|
|
}
|
|
.sheet-rolltemplate-utn .stacked.center.input-label > *, .ui-dialog .tab-content .charsheet .stacked.center.input-label > * {
|
|
text-align: center;
|
|
}
|
|
.sheet-rolltemplate-utn .stacked.input-label > [name], .ui-dialog .tab-content .charsheet .stacked.input-label > [name] {
|
|
width: 100%;
|
|
}
|
|
|
|
.sheet-rolltemplate-utn .text-collapse__check:not(:checked) + .text-collapse, .ui-dialog .tab-content .charsheet .text-collapse__check:not(:checked) + .text-collapse, .sheet-rolltemplate-utn :is(.underlined, .boxed):not([readonly]):not([type=checkbox]):not([type=radio]):is(:hover, :focus, :focus-within), .ui-dialog .tab-content .charsheet :is(.underlined, .boxed):not([readonly]):not([type=checkbox]):not([type=radio]):is(:hover, :focus, :focus-within) {
|
|
border-width: 1px 3px;
|
|
border-style: solid;
|
|
border-color: var(--borderColor);
|
|
border-radius: 5px;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.sheet-rolltemplate-utn .ratio1-1, .ui-dialog .tab-content .charsheet .ratio1-1,
|
|
.sheet-rolltemplate-utn .sheet-ratio1-1,
|
|
.ui-dialog .tab-content .charsheet .sheet-ratio1-1 {
|
|
aspect-ratio: 1/1;
|
|
}
|
|
|
|
.sheet-rolltemplate-utn .roll-container, .ui-dialog .tab-content .charsheet .roll-container, .sheet-rolltemplate-utn .headed-textarea, .ui-dialog .tab-content .charsheet .headed-textarea, .sheet-rolltemplate-utn section, .ui-dialog .tab-content .charsheet section,
|
|
.sheet-rolltemplate-utn header,
|
|
.ui-dialog .tab-content .charsheet header, .sheet-rolltemplate-utn .adaptive, .ui-dialog .tab-content .charsheet .adaptive {
|
|
display: grid;
|
|
}
|
|
|
|
.sheet-rolltemplate-utn, .ui-dialog {
|
|
--topHeaderFont:Arial;
|
|
--midHeaderFont:Arial;
|
|
--contentFont:Arial;
|
|
}
|
|
|
|
.sheet-rolltemplate-utn .underlined, .ui-dialog .tab-content .charsheet .underlined,
|
|
.sheet-rolltemplate-utn .sheet-underlined,
|
|
.ui-dialog .tab-content .charsheet .sheet-underlined, .sheet-rolltemplate-utn select, .ui-dialog .tab-content .charsheet select,
|
|
.sheet-rolltemplate-utn .pseudo-select span,
|
|
.ui-dialog .tab-content .charsheet .pseudo-select span,
|
|
.sheet-rolltemplate-utn .sheet-pseudo-select span,
|
|
.ui-dialog .tab-content .charsheet .sheet-pseudo-select span,
|
|
.sheet-rolltemplate-utn input:not(:where([type="checkbox"], [type="radio"])),
|
|
.ui-dialog .tab-content .charsheet input:not(:where([type="checkbox"], [type="radio"])),
|
|
.sheet-rolltemplate-utn .uneditable-input,
|
|
.ui-dialog .tab-content .charsheet .uneditable-input,
|
|
.sheet-rolltemplate-utn textarea,
|
|
.ui-dialog .tab-content .charsheet textarea, .sheet-rolltemplate-utn .adaptive > span, .ui-dialog .tab-content .charsheet .adaptive > span {
|
|
border-width: 1px 3px;
|
|
border-style: solid;
|
|
border-radius: 5px;
|
|
border-color: transparent;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.sheet-rolltemplate-utn .repcontrol-button, .ui-dialog .tab-content .charsheet .repcontrol-button {
|
|
background-color: #DCDCDC33;
|
|
border-radius: 5px;
|
|
box-shadow: 0 2px 4px black;
|
|
border-width: 0;
|
|
transition-property: box-shadow, backdrop-filter;
|
|
transition-duration: 200ms;
|
|
transition-timing-function: ease-out;
|
|
backdrop-filter: blur(1px);
|
|
overflow: hidden;
|
|
}
|
|
.sheet-rolltemplate-utn .repcontrol-button:is(:hover, :focus), .ui-dialog .tab-content .charsheet .repcontrol-button:is(:hover, :focus) {
|
|
background-color: #85858580;
|
|
box-shadow: 0 4px 6px black;
|
|
backdrop-filter: blur(2px);
|
|
}
|
|
.sheet-rolltemplate-utn .repcontrol-button:active, .ui-dialog .tab-content .charsheet .repcontrol-button:active {
|
|
background-color: #858585ff;
|
|
box-shadow: 0 1px 2px black;
|
|
backdrop-filter: blur(0px);
|
|
}
|
|
|
|
.sheet-rolltemplate-utn .repcontrol-button, .ui-dialog .tab-content .charsheet .repcontrol-button {
|
|
padding: 5px 7px;
|
|
}
|
|
|
|
.sheet-rolltemplate-utn .adaptive, .ui-dialog .tab-content .charsheet .adaptive {
|
|
grid-template-columns: auto;
|
|
grid-template-rows: auto;
|
|
grid-template-areas: "content";
|
|
position: relative;
|
|
}
|
|
.sheet-rolltemplate-utn .adaptive > *, .ui-dialog .tab-content .charsheet .adaptive > * {
|
|
grid-area: content;
|
|
}
|
|
.sheet-rolltemplate-utn .adaptive > span, .ui-dialog .tab-content .charsheet .adaptive > span {
|
|
opacity: 0;
|
|
z-index: -10;
|
|
text-transform: initial;
|
|
border-radius: 0px;
|
|
}
|
|
.sheet-rolltemplate-utn .adaptive--text, .ui-dialog .tab-content .charsheet .adaptive--text {
|
|
min-height: 4rem;
|
|
}
|
|
.sheet-rolltemplate-utn .adaptive--text__span, .ui-dialog .tab-content .charsheet .adaptive--text__span {
|
|
white-space: pre-wrap;
|
|
padding: 2px;
|
|
}
|
|
.sheet-rolltemplate-utn .adaptive--text__textarea, .ui-dialog .tab-content .charsheet .adaptive--text__textarea {
|
|
width: 100%;
|
|
height: 100%;
|
|
resize: none;
|
|
}
|
|
.sheet-rolltemplate-utn .adaptive--text__textarea, .ui-dialog .tab-content .charsheet .adaptive--text__textarea,
|
|
.sheet-rolltemplate-utn .adaptive--input__input,
|
|
.ui-dialog .tab-content .charsheet .adaptive--input__input {
|
|
position: absolute;
|
|
}
|
|
.sheet-rolltemplate-utn .adaptive--input__input, .ui-dialog .tab-content .charsheet .adaptive--input__input {
|
|
width: 100%;
|
|
}
|
|
.sheet-rolltemplate-utn .adaptive--input__span, .ui-dialog .tab-content .charsheet .adaptive--input__span {
|
|
padding: 2px;
|
|
min-height: 1.5rem;
|
|
}
|
|
|
|
.sheet-rolltemplate-utn .sheet-hidden, .ui-dialog .tab-content .charsheet .sheet-hidden,
|
|
.sheet-rolltemplate-utn .hidden,
|
|
.ui-dialog .tab-content .charsheet .hidden,
|
|
.sheet-rolltemplate-utn *[hidden],
|
|
.ui-dialog .tab-content .charsheet *[hidden] {
|
|
display: none !important;
|
|
}
|
|
|
|
.sheet-rolltemplate-utn .sheet-italics, .ui-dialog .tab-content .charsheet .sheet-italics,
|
|
.sheet-rolltemplate-utn .italics,
|
|
.ui-dialog .tab-content .charsheet .italics {
|
|
font-style: italic;
|
|
}
|
|
|
|
.sheet-rolltemplate-utn span, .ui-dialog .tab-content .charsheet span,
|
|
.sheet-rolltemplate-utn input,
|
|
.ui-dialog .tab-content .charsheet input,
|
|
.sheet-rolltemplate-utn textarea,
|
|
.ui-dialog .tab-content .charsheet textarea, .sheet-rolltemplate-utn h5 *, .ui-dialog .tab-content .charsheet h5 *,
|
|
.sheet-rolltemplate-utn *[aria-level="5"] *,
|
|
.ui-dialog .tab-content .charsheet *[aria-level="5"] *, .sheet-rolltemplate-utn h5, .ui-dialog .tab-content .charsheet h5,
|
|
.sheet-rolltemplate-utn *[aria-level="5"],
|
|
.ui-dialog .tab-content .charsheet *[aria-level="5"], .ui-dialog .tab-content .charsheet .roller *, .ui-dialog .tab-content .charsheet .styled-button--controlled *, .sheet-rolltemplate-utn h4 *, .ui-dialog .tab-content .charsheet h4 *,
|
|
.sheet-rolltemplate-utn *[aria-level="4"] *,
|
|
.ui-dialog .tab-content .charsheet *[aria-level="4"] *, .ui-dialog .tab-content .charsheet .roller, .ui-dialog .tab-content .charsheet .styled-button--controlled, .sheet-rolltemplate-utn h4, .ui-dialog .tab-content .charsheet h4,
|
|
.sheet-rolltemplate-utn *[aria-level="4"],
|
|
.ui-dialog .tab-content .charsheet *[aria-level="4"], .sheet-rolltemplate-utn h3 *, .ui-dialog .tab-content .charsheet h3 *,
|
|
.sheet-rolltemplate-utn *[aria-level="3"] *,
|
|
.ui-dialog .tab-content .charsheet *[aria-level="3"] *, .sheet-rolltemplate-utn h3, .ui-dialog .tab-content .charsheet h3,
|
|
.sheet-rolltemplate-utn *[aria-level="3"],
|
|
.ui-dialog .tab-content .charsheet *[aria-level="3"], .sheet-rolltemplate-utn h2 *, .ui-dialog .tab-content .charsheet h2 *, .sheet-rolltemplate-utn .input-label:not(.stacked).large > [name] *, .ui-dialog .tab-content .charsheet .input-label:not(.stacked).large > [name] *,
|
|
.sheet-rolltemplate-utn *[aria-level="2"] *,
|
|
.ui-dialog .tab-content .charsheet *[aria-level="2"] *, .sheet-rolltemplate-utn h2, .ui-dialog .tab-content .charsheet h2, .sheet-rolltemplate-utn .input-label:not(.stacked).large > [name], .ui-dialog .tab-content .charsheet .input-label:not(.stacked).large > [name],
|
|
.sheet-rolltemplate-utn *[aria-level="2"],
|
|
.ui-dialog .tab-content .charsheet *[aria-level="2"], .sheet-rolltemplate-utn h1 *, .ui-dialog .tab-content .charsheet h1 *,
|
|
.sheet-rolltemplate-utn *[aria-level="1"] *,
|
|
.ui-dialog .tab-content .charsheet *[aria-level="1"] *, .sheet-rolltemplate-utn h1, .ui-dialog .tab-content .charsheet h1,
|
|
.sheet-rolltemplate-utn *[aria-level="1"],
|
|
.ui-dialog .tab-content .charsheet *[aria-level="1"] {
|
|
line-height: normal;
|
|
}
|
|
|
|
.sheet-rolltemplate-utn h5 *, .ui-dialog .tab-content .charsheet h5 *,
|
|
.sheet-rolltemplate-utn *[aria-level="5"] *,
|
|
.ui-dialog .tab-content .charsheet *[aria-level="5"] *, .sheet-rolltemplate-utn h5, .ui-dialog .tab-content .charsheet h5,
|
|
.sheet-rolltemplate-utn *[aria-level="5"],
|
|
.ui-dialog .tab-content .charsheet *[aria-level="5"], .ui-dialog .tab-content .charsheet .roller *, .ui-dialog .tab-content .charsheet .styled-button--controlled *, .sheet-rolltemplate-utn h4 *, .ui-dialog .tab-content .charsheet h4 *,
|
|
.sheet-rolltemplate-utn *[aria-level="4"] *,
|
|
.ui-dialog .tab-content .charsheet *[aria-level="4"] *, .ui-dialog .tab-content .charsheet .roller, .ui-dialog .tab-content .charsheet .styled-button--controlled, .sheet-rolltemplate-utn h4, .ui-dialog .tab-content .charsheet h4,
|
|
.sheet-rolltemplate-utn *[aria-level="4"],
|
|
.ui-dialog .tab-content .charsheet *[aria-level="4"], .sheet-rolltemplate-utn h3 *, .ui-dialog .tab-content .charsheet h3 *,
|
|
.sheet-rolltemplate-utn *[aria-level="3"] *,
|
|
.ui-dialog .tab-content .charsheet *[aria-level="3"] *, .sheet-rolltemplate-utn h3, .ui-dialog .tab-content .charsheet h3,
|
|
.sheet-rolltemplate-utn *[aria-level="3"],
|
|
.ui-dialog .tab-content .charsheet *[aria-level="3"], .sheet-rolltemplate-utn h2 *, .ui-dialog .tab-content .charsheet h2 *, .sheet-rolltemplate-utn .input-label:not(.stacked).large > [name] *, .ui-dialog .tab-content .charsheet .input-label:not(.stacked).large > [name] *,
|
|
.sheet-rolltemplate-utn *[aria-level="2"] *,
|
|
.ui-dialog .tab-content .charsheet *[aria-level="2"] *, .sheet-rolltemplate-utn h2, .ui-dialog .tab-content .charsheet h2, .sheet-rolltemplate-utn .input-label:not(.stacked).large > [name], .ui-dialog .tab-content .charsheet .input-label:not(.stacked).large > [name],
|
|
.sheet-rolltemplate-utn *[aria-level="2"],
|
|
.ui-dialog .tab-content .charsheet *[aria-level="2"], .sheet-rolltemplate-utn h1 *, .ui-dialog .tab-content .charsheet h1 *,
|
|
.sheet-rolltemplate-utn *[aria-level="1"] *,
|
|
.ui-dialog .tab-content .charsheet *[aria-level="1"] *, .sheet-rolltemplate-utn h1, .ui-dialog .tab-content .charsheet h1,
|
|
.sheet-rolltemplate-utn *[aria-level="1"],
|
|
.ui-dialog .tab-content .charsheet *[aria-level="1"] {
|
|
color: var(--fontColor);
|
|
display: block;
|
|
white-space: nowrap;
|
|
margin-top: 0px;
|
|
margin-bottom: 0px;
|
|
font-weight: normal;
|
|
}
|
|
|
|
.sheet-rolltemplate-utn h3 *, .ui-dialog .tab-content .charsheet h3 *,
|
|
.sheet-rolltemplate-utn *[aria-level="3"] *,
|
|
.ui-dialog .tab-content .charsheet *[aria-level="3"] *, .sheet-rolltemplate-utn h3, .ui-dialog .tab-content .charsheet h3,
|
|
.sheet-rolltemplate-utn *[aria-level="3"],
|
|
.ui-dialog .tab-content .charsheet *[aria-level="3"], .sheet-rolltemplate-utn h2 *, .ui-dialog .tab-content .charsheet h2 *, .sheet-rolltemplate-utn .input-label:not(.stacked).large > [name] *, .ui-dialog .tab-content .charsheet .input-label:not(.stacked).large > [name] *,
|
|
.sheet-rolltemplate-utn *[aria-level="2"] *,
|
|
.ui-dialog .tab-content .charsheet *[aria-level="2"] *, .sheet-rolltemplate-utn h2, .ui-dialog .tab-content .charsheet h2, .sheet-rolltemplate-utn .input-label:not(.stacked).large > [name], .ui-dialog .tab-content .charsheet .input-label:not(.stacked).large > [name],
|
|
.sheet-rolltemplate-utn *[aria-level="2"],
|
|
.ui-dialog .tab-content .charsheet *[aria-level="2"], .sheet-rolltemplate-utn h1 *, .ui-dialog .tab-content .charsheet h1 *,
|
|
.sheet-rolltemplate-utn *[aria-level="1"] *,
|
|
.ui-dialog .tab-content .charsheet *[aria-level="1"] *, .sheet-rolltemplate-utn h1, .ui-dialog .tab-content .charsheet h1,
|
|
.sheet-rolltemplate-utn *[aria-level="1"],
|
|
.ui-dialog .tab-content .charsheet *[aria-level="1"] {
|
|
text-transform: uppercase;
|
|
font-weight: normal;
|
|
}
|
|
|
|
.sheet-rolltemplate-utn h5 :not(:where(input)), .ui-dialog .tab-content .charsheet h5 :not(:where(input)),
|
|
.sheet-rolltemplate-utn *[aria-level="5"] :not(:where(input)),
|
|
.ui-dialog .tab-content .charsheet *[aria-level="5"] :not(:where(input)), .sheet-rolltemplate-utn h5:not(:where(input)), .ui-dialog .tab-content .charsheet h5:not(:where(input)),
|
|
.sheet-rolltemplate-utn [aria-level="5"]:not(:where(input)),
|
|
.ui-dialog .tab-content .charsheet [aria-level="5"]:not(:where(input)), .ui-dialog .tab-content .charsheet .roller :not(:where(input)), .ui-dialog .tab-content .charsheet .styled-button--controlled :not(:where(input)), .sheet-rolltemplate-utn h4 :not(:where(input)), .ui-dialog .tab-content .charsheet h4 :not(:where(input)),
|
|
.sheet-rolltemplate-utn *[aria-level="4"] :not(:where(input)),
|
|
.ui-dialog .tab-content .charsheet *[aria-level="4"] :not(:where(input)), .ui-dialog .tab-content .charsheet .roller:not(:where(input)), .ui-dialog .tab-content .charsheet .styled-button--controlled:not(:where(input)), .sheet-rolltemplate-utn h4:not(:where(input)), .ui-dialog .tab-content .charsheet h4:not(:where(input)),
|
|
.sheet-rolltemplate-utn [aria-level="4"]:not(:where(input)),
|
|
.ui-dialog .tab-content .charsheet [aria-level="4"]:not(:where(input)) {
|
|
text-transform: capitalize;
|
|
}
|
|
|
|
.sheet-rolltemplate-utn h1 *, .ui-dialog .tab-content .charsheet h1 *,
|
|
.sheet-rolltemplate-utn *[aria-level="1"] *,
|
|
.ui-dialog .tab-content .charsheet *[aria-level="1"] *, .sheet-rolltemplate-utn h1, .ui-dialog .tab-content .charsheet h1,
|
|
.sheet-rolltemplate-utn *[aria-level="1"],
|
|
.ui-dialog .tab-content .charsheet *[aria-level="1"] {
|
|
font-size: 2rem;
|
|
font-family: var(--topHeaderFont);
|
|
}
|
|
.sheet-rolltemplate-utn h1 :not(input), .ui-dialog .tab-content .charsheet h1 :not(input),
|
|
.sheet-rolltemplate-utn *[aria-level="1"] :not(input),
|
|
.ui-dialog .tab-content .charsheet *[aria-level="1"] :not(input), .sheet-rolltemplate-utn h1:not(input), .ui-dialog .tab-content .charsheet h1:not(input),
|
|
.sheet-rolltemplate-utn [aria-level="1"]:not(input),
|
|
.ui-dialog .tab-content .charsheet [aria-level="1"]:not(input) {
|
|
text-align: center;
|
|
}
|
|
|
|
.sheet-rolltemplate-utn h2 *, .ui-dialog .tab-content .charsheet h2 *, .sheet-rolltemplate-utn .input-label:not(.stacked).large > [name] *, .ui-dialog .tab-content .charsheet .input-label:not(.stacked).large > [name] *,
|
|
.sheet-rolltemplate-utn *[aria-level="2"] *,
|
|
.ui-dialog .tab-content .charsheet *[aria-level="2"] *, .sheet-rolltemplate-utn h2, .ui-dialog .tab-content .charsheet h2, .sheet-rolltemplate-utn .input-label:not(.stacked).large > [name], .ui-dialog .tab-content .charsheet .input-label:not(.stacked).large > [name],
|
|
.sheet-rolltemplate-utn *[aria-level="2"],
|
|
.ui-dialog .tab-content .charsheet *[aria-level="2"] {
|
|
font-size: 1.75rem;
|
|
font-family: var(--topHeaderFont);
|
|
}
|
|
.sheet-rolltemplate-utn h2 :not(input), .ui-dialog .tab-content .charsheet h2 :not(input), .sheet-rolltemplate-utn .input-label:not(.stacked).large > [name] :not(input), .ui-dialog .tab-content .charsheet .input-label:not(.stacked).large > [name] :not(input),
|
|
.sheet-rolltemplate-utn *[aria-level="2"] :not(input),
|
|
.ui-dialog .tab-content .charsheet *[aria-level="2"] :not(input), .sheet-rolltemplate-utn h2:not(input), .ui-dialog .tab-content .charsheet h2:not(input), .sheet-rolltemplate-utn .input-label:not(.stacked).large > [name]:not(input), .ui-dialog .tab-content .charsheet .input-label:not(.stacked).large > [name]:not(input),
|
|
.sheet-rolltemplate-utn [aria-level="2"]:not(input),
|
|
.ui-dialog .tab-content .charsheet [aria-level="2"]:not(input) {
|
|
text-align: center;
|
|
}
|
|
|
|
.sheet-rolltemplate-utn h3 *, .ui-dialog .tab-content .charsheet h3 *,
|
|
.sheet-rolltemplate-utn *[aria-level="3"] *,
|
|
.ui-dialog .tab-content .charsheet *[aria-level="3"] *, .sheet-rolltemplate-utn h3, .ui-dialog .tab-content .charsheet h3,
|
|
.sheet-rolltemplate-utn *[aria-level="3"],
|
|
.ui-dialog .tab-content .charsheet *[aria-level="3"] {
|
|
font-size: 1.5rem;
|
|
font-family: var(--topHeaderFont);
|
|
}
|
|
.sheet-rolltemplate-utn h3 :not(input), .ui-dialog .tab-content .charsheet h3 :not(input),
|
|
.sheet-rolltemplate-utn *[aria-level="3"] :not(input),
|
|
.ui-dialog .tab-content .charsheet *[aria-level="3"] :not(input), .sheet-rolltemplate-utn h3:not(input), .ui-dialog .tab-content .charsheet h3:not(input),
|
|
.sheet-rolltemplate-utn [aria-level="3"]:not(input),
|
|
.ui-dialog .tab-content .charsheet [aria-level="3"]:not(input) {
|
|
text-align: center;
|
|
}
|
|
|
|
.ui-dialog .tab-content .charsheet .roller *, .ui-dialog .tab-content .charsheet .styled-button--controlled *, .sheet-rolltemplate-utn h4 *, .ui-dialog .tab-content .charsheet h4 *,
|
|
.sheet-rolltemplate-utn *[aria-level="4"] *,
|
|
.ui-dialog .tab-content .charsheet *[aria-level="4"] *, .ui-dialog .tab-content .charsheet .roller, .ui-dialog .tab-content .charsheet .styled-button--controlled, .sheet-rolltemplate-utn h4, .ui-dialog .tab-content .charsheet h4,
|
|
.sheet-rolltemplate-utn *[aria-level="4"],
|
|
.ui-dialog .tab-content .charsheet *[aria-level="4"] {
|
|
font-size: 1.25rem;
|
|
font-family: var(--midHeaderFont);
|
|
}
|
|
.ui-dialog .tab-content .charsheet .roller :not(input), .ui-dialog .tab-content .charsheet .styled-button--controlled :not(input), .sheet-rolltemplate-utn h4 :not(input), .ui-dialog .tab-content .charsheet h4 :not(input),
|
|
.sheet-rolltemplate-utn *[aria-level="4"] :not(input),
|
|
.ui-dialog .tab-content .charsheet *[aria-level="4"] :not(input), .ui-dialog .tab-content .charsheet .roller:not(input), .ui-dialog .tab-content .charsheet .styled-button--controlled:not(input), .sheet-rolltemplate-utn h4:not(input), .ui-dialog .tab-content .charsheet h4:not(input),
|
|
.sheet-rolltemplate-utn [aria-level="4"]:not(input),
|
|
.ui-dialog .tab-content .charsheet [aria-level="4"]:not(input) {
|
|
text-align: center;
|
|
}
|
|
|
|
.sheet-rolltemplate-utn h5 *, .ui-dialog .tab-content .charsheet h5 *,
|
|
.sheet-rolltemplate-utn *[aria-level="5"] *,
|
|
.ui-dialog .tab-content .charsheet *[aria-level="5"] *, .sheet-rolltemplate-utn h5, .ui-dialog .tab-content .charsheet h5,
|
|
.sheet-rolltemplate-utn *[aria-level="5"],
|
|
.ui-dialog .tab-content .charsheet *[aria-level="5"] {
|
|
font-size: 1rem;
|
|
font-style: normal;
|
|
font-family: var(--midHeaderFont);
|
|
}
|
|
.sheet-rolltemplate-utn h5 :not(input), .ui-dialog .tab-content .charsheet h5 :not(input),
|
|
.sheet-rolltemplate-utn *[aria-level="5"] :not(input),
|
|
.ui-dialog .tab-content .charsheet *[aria-level="5"] :not(input), .sheet-rolltemplate-utn h5:not(input), .ui-dialog .tab-content .charsheet h5:not(input),
|
|
.sheet-rolltemplate-utn [aria-level="5"]:not(input),
|
|
.ui-dialog .tab-content .charsheet [aria-level="5"]:not(input) {
|
|
text-align: center;
|
|
}
|
|
|
|
.sheet-rolltemplate-utn input[type=checkbox]:not(.collapse):checked:before, .ui-dialog .tab-content .charsheet input[type=checkbox]:not(.collapse):checked:before {
|
|
content: "✓";
|
|
grid-area: content;
|
|
font-weight: bold;
|
|
place-self: start center;
|
|
color: var(--selectedColor);
|
|
font-size: 1.5rem;
|
|
line-height: 0.5rem;
|
|
}
|
|
|
|
.sheet-rolltemplate-utn .boxed, .ui-dialog .tab-content .charsheet .boxed,
|
|
.sheet-rolltemplate-utn .sheet-boxed,
|
|
.ui-dialog .tab-content .charsheet .sheet-boxed {
|
|
border: 1px solid black;
|
|
border-radius: 0;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.sheet-rolltemplate-utn .sheet-pictos, .ui-dialog .tab-content .charsheet .sheet-pictos,
|
|
.sheet-rolltemplate-utn .pictos,
|
|
.ui-dialog .tab-content .charsheet .pictos {
|
|
font-family: pictos;
|
|
text-transform: initial;
|
|
}
|
|
|
|
.sheet-rolltemplate-utn .pictos3, .ui-dialog .tab-content .charsheet .pictos3,
|
|
.sheet-rolltemplate-utn .sheet-pictos3,
|
|
.ui-dialog .tab-content .charsheet .sheet-pictos3 {
|
|
font-family: pictos three;
|
|
text-transform: initial;
|
|
}
|
|
|
|
.sheet-rolltemplate-utn .pictoscustom, .ui-dialog .tab-content .charsheet .pictoscustom,
|
|
.sheet-rolltemplate-utn .sheet-pictoscustom,
|
|
.ui-dialog .tab-content .charsheet .sheet-pictoscustom {
|
|
font-family: pictos custom;
|
|
text-transform: initial;
|
|
}
|
|
|
|
.sheet-rolltemplate-utn > .sheet-template, .ui-dialog .tab-content .charsheet .styled-button, .sheet-rolltemplate-utn section:is(:hover, :focus-within), .ui-dialog .tab-content .charsheet section:is(:hover, :focus-within),
|
|
.sheet-rolltemplate-utn header:is(:hover, :focus-within),
|
|
.ui-dialog .tab-content .charsheet header:is(:hover, :focus-within) {
|
|
box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;
|
|
}
|
|
|
|
.sheet-rolltemplate-utn, .ui-dialog {
|
|
--grid-gap: 1rem;
|
|
--half-gap: calc(var(--grid-gap) / 2);
|
|
--tiny-gap: calc(var(--half-gap) / 2);
|
|
--big-gap: calc(var(--grid-gap) * 2);
|
|
--revealTime: 500ms;
|
|
--delayTime: 200ms;
|
|
--inputSwap: opacity var(--revealTime) ease var(--delayTime);
|
|
--focusTiming: 500ms ease;
|
|
--focusTrans: all var(--focusTiming);
|
|
--borderColor: black;
|
|
--fontColor: black;
|
|
--backColor: #ffffff;
|
|
--spanSectionColumn:1/-1;
|
|
--displayBorderWidth: 2px;
|
|
--subHeadBackColor:grey;
|
|
--unselectedColor1:lightgrey;
|
|
--unselectedColor2:transparent;
|
|
--selectedColor:black;
|
|
}
|
|
|
|
.sheet-rolltemplate-utn, .ui-dialog .tab-content .charsheet {
|
|
gap: var(--grid-gap);
|
|
}
|
|
.sheet-rolltemplate-utn button, .ui-dialog .tab-content .charsheet button {
|
|
cursor: pointer;
|
|
}
|
|
.sheet-rolltemplate-utn .flex-box, .ui-dialog .tab-content .charsheet .flex-box,
|
|
.sheet-rolltemplate-utn .sheet-flex-box,
|
|
.ui-dialog .tab-content .charsheet .sheet-flex-box {
|
|
display: flex;
|
|
}
|
|
.sheet-rolltemplate-utn .space-around, .ui-dialog .tab-content .charsheet .space-around,
|
|
.sheet-rolltemplate-utn .sheet-space-around,
|
|
.ui-dialog .tab-content .charsheet .sheet-space-around {
|
|
justify-content: space-around;
|
|
}
|
|
.sheet-rolltemplate-utn .space-between, .ui-dialog .tab-content .charsheet .space-between,
|
|
.sheet-rolltemplate-utn .sheet-space-between,
|
|
.ui-dialog .tab-content .charsheet .sheet-space-between {
|
|
justify-content: space-between;
|
|
}
|
|
.sheet-rolltemplate-utn .center, .ui-dialog .tab-content .charsheet .center,
|
|
.sheet-rolltemplate-utn .sheet-center,
|
|
.ui-dialog .tab-content .charsheet .sheet-center {
|
|
place-self: center;
|
|
}
|
|
.sheet-rolltemplate-utn textarea, .ui-dialog .tab-content .charsheet textarea {
|
|
resize: vertical;
|
|
white-space: pre-wrap;
|
|
}
|
|
.sheet-rolltemplate-utn textarea.fixed, .ui-dialog .tab-content .charsheet textarea.fixed {
|
|
resize: none;
|
|
overflow: auto;
|
|
}
|
|
.sheet-rolltemplate-utn .span-2, .ui-dialog .tab-content .charsheet .span-2,
|
|
.sheet-rolltemplate-utn .sheet-span-2,
|
|
.ui-dialog .tab-content .charsheet .sheet-span-2 {
|
|
grid-column: span 2;
|
|
}
|
|
.sheet-rolltemplate-utn .span-all, .ui-dialog .tab-content .charsheet .span-all,
|
|
.sheet-rolltemplate-utn .sheet-span-all,
|
|
.ui-dialog .tab-content .charsheet .sheet-span-all {
|
|
grid-column: 1/-1;
|
|
}
|
|
.sheet-rolltemplate-utn select, .ui-dialog .tab-content .charsheet select,
|
|
.sheet-rolltemplate-utn .pseudo-select span,
|
|
.ui-dialog .tab-content .charsheet .pseudo-select span,
|
|
.sheet-rolltemplate-utn .sheet-pseudo-select span,
|
|
.ui-dialog .tab-content .charsheet .sheet-pseudo-select span,
|
|
.sheet-rolltemplate-utn textarea,
|
|
.ui-dialog .tab-content .charsheet textarea,
|
|
.sheet-rolltemplate-utn input:not(:is([type=radio], [type=checkbox])),
|
|
.ui-dialog .tab-content .charsheet input:not(:is([type=radio], [type=checkbox])),
|
|
.sheet-rolltemplate-utn .uneditable-input,
|
|
.ui-dialog .tab-content .charsheet .uneditable-input {
|
|
padding: 2px;
|
|
font-size: 1rem;
|
|
}
|
|
.sheet-rolltemplate-utn input:is([type=text], [type=number]), .ui-dialog .tab-content .charsheet input:is([type=text], [type=number]), .sheet-rolltemplate-utn textarea, .ui-dialog .tab-content .charsheet textarea {
|
|
cursor: auto;
|
|
}
|
|
.sheet-rolltemplate-utn select, .ui-dialog .tab-content .charsheet select,
|
|
.sheet-rolltemplate-utn .sheet-pseudo-select span,
|
|
.ui-dialog .tab-content .charsheet .sheet-pseudo-select span,
|
|
.sheet-rolltemplate-utn .pseudo-select span,
|
|
.ui-dialog .tab-content .charsheet .pseudo-select span {
|
|
-webkit-apperance: none;
|
|
appearance: none;
|
|
text-transform: capitalize;
|
|
overflow: hidden !important;
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
text-align: center;
|
|
color: var(--fontColor);
|
|
}
|
|
.sheet-rolltemplate-utn input, .ui-dialog .tab-content .charsheet input {
|
|
width: auto;
|
|
}
|
|
.sheet-rolltemplate-utn input:placeholder, .ui-dialog .tab-content .charsheet input:placeholder {
|
|
color: #ededed80;
|
|
}
|
|
.sheet-rolltemplate-utn input.plus-control:not([value*="-"]) + span:before, .ui-dialog .tab-content .charsheet input.plus-control:not([value*="-"]) + span:before {
|
|
content: "+";
|
|
}
|
|
.sheet-rolltemplate-utn span, .ui-dialog .tab-content .charsheet span,
|
|
.sheet-rolltemplate-utn input,
|
|
.ui-dialog .tab-content .charsheet input,
|
|
.sheet-rolltemplate-utn textarea,
|
|
.ui-dialog .tab-content .charsheet textarea {
|
|
font-size: 1rem;
|
|
color: var(--fontColor);
|
|
}
|
|
.sheet-rolltemplate-utn span[name], .ui-dialog .tab-content .charsheet span[name], .sheet-rolltemplate-utn input, .ui-dialog .tab-content .charsheet input, .sheet-rolltemplate-utn textarea, .ui-dialog .tab-content .charsheet textarea, .sheet-rolltemplate-utn button, .ui-dialog .tab-content .charsheet button, .sheet-rolltemplate-utn select, .ui-dialog .tab-content .charsheet select {
|
|
font-family: var(--contentFont);
|
|
}
|
|
.sheet-rolltemplate-utn input[type=checkbox], .ui-dialog .tab-content .charsheet input[type=checkbox] {
|
|
border: 1px solid var(--borderColor);
|
|
cursor: pointer;
|
|
-webkit-appearance: none;
|
|
appearance: none;
|
|
cursor: pointer;
|
|
width: 14px;
|
|
min-width: 14px;
|
|
height: 14px;
|
|
min-height: 14px;
|
|
display: grid;
|
|
grid-template-columns: 1fr;
|
|
grid-template-areas: "content";
|
|
}
|
|
.sheet-rolltemplate-utn input[type=number], .ui-dialog .tab-content .charsheet input[type=number] {
|
|
width: 3rem;
|
|
-moz-appearance: textfield !important;
|
|
text-align: center;
|
|
}
|
|
.sheet-rolltemplate-utn input[type=number]::-webkit-inner-spin-button, .ui-dialog .tab-content .charsheet input[type=number]::-webkit-inner-spin-button, .sheet-rolltemplate-utn input[type=number]::-webkit-outer-spin-button, .ui-dialog .tab-content .charsheet input[type=number]::-webkit-outer-spin-button {
|
|
-webkit-appearance: none;
|
|
margin: 0;
|
|
}
|
|
.sheet-rolltemplate-utn .sheet-number, .ui-dialog .tab-content .charsheet .sheet-number,
|
|
.sheet-rolltemplate-utn .number,
|
|
.ui-dialog .tab-content .charsheet .number {
|
|
width: 2rem;
|
|
box-sizing: border-box;
|
|
}
|
|
.sheet-rolltemplate-utn section, .ui-dialog .tab-content .charsheet section,
|
|
.sheet-rolltemplate-utn header,
|
|
.ui-dialog .tab-content .charsheet header {
|
|
gap: var(--half-gap);
|
|
align-self: start;
|
|
grid-template-areas: "header";
|
|
border-radius: 5px;
|
|
padding: var(--half-gap);
|
|
transition-property: box-shadow;
|
|
transition-duration: var(--revealTime);
|
|
transition-timing-function: ease;
|
|
}
|
|
.sheet-rolltemplate-utn .inactive, .ui-dialog .tab-content .charsheet .inactive,
|
|
.sheet-rolltemplate-utn .character-type--inactive,
|
|
.ui-dialog .tab-content .charsheet .character-type--inactive,
|
|
.sheet-rolltemplate-utn .navigable-section:not(.active),
|
|
.ui-dialog .tab-content .charsheet .navigable-section:not(.active) {
|
|
display: none !important;
|
|
}
|
|
.sheet-rolltemplate-utn .pseudo-button, .ui-dialog .tab-content .charsheet .pseudo-button {
|
|
display: inline;
|
|
cursor: pointer;
|
|
border-radius: 5px;
|
|
text-transform: uppercase;
|
|
border: 1px solid black;
|
|
text-align: center;
|
|
padding: 0 5px;
|
|
}
|
|
.sheet-rolltemplate-utn .input-label, .ui-dialog .tab-content .charsheet .input-label {
|
|
display: inline-flex;
|
|
gap: var(--half-gap);
|
|
align-items: center;
|
|
}
|
|
.sheet-rolltemplate-utn .input-label:not(.stacked) > input[type=text], .ui-dialog .tab-content .charsheet .input-label:not(.stacked) > input[type=text] {
|
|
width: 0;
|
|
flex: 1 1 0;
|
|
}
|
|
.sheet-rolltemplate-utn .input-label:not(.stacked) > :not([name]), .ui-dialog .tab-content .charsheet .input-label:not(.stacked) > :not([name]) {
|
|
flex: 0 0 auto;
|
|
}
|
|
.sheet-rolltemplate-utn .input-label--dual, .ui-dialog .tab-content .charsheet .input-label--dual {
|
|
grid-template-columns: 1fr auto 1fr;
|
|
grid-template-areas: "over over over" "under under under";
|
|
}
|
|
.sheet-rolltemplate-utn .input-label--dual > span:last-of-type, .ui-dialog .tab-content .charsheet .input-label--dual > span:last-of-type {
|
|
grid-column: 1/-1;
|
|
}
|
|
.sheet-rolltemplate-utn .input-label--dual > input, .ui-dialog .tab-content .charsheet .input-label--dual > input {
|
|
width: 100%;
|
|
}
|
|
.sheet-rolltemplate-utn .input-label--dual > .slash, .ui-dialog .tab-content .charsheet .input-label--dual > .slash {
|
|
line-height: 0rem;
|
|
font-weight: normal;
|
|
}
|
|
.sheet-rolltemplate-utn .headed-textarea, .ui-dialog .tab-content .charsheet .headed-textarea {
|
|
grid-template-rows: auto 1fr;
|
|
grid-template-columns: auto;
|
|
}
|
|
.sheet-rolltemplate-utn .headed-textarea h5, .ui-dialog .tab-content .charsheet .headed-textarea h5 {
|
|
justify-self: start;
|
|
}
|
|
.sheet-rolltemplate-utn .boxed.thick-left, .ui-dialog .tab-content .charsheet .boxed.thick-left,
|
|
.sheet-rolltemplate-utn .sheet-boxed.thick-left,
|
|
.ui-dialog .tab-content .charsheet .sheet-boxed.thick-left {
|
|
border-left-width: 5px;
|
|
}
|
|
.sheet-rolltemplate-utn .boxed.thick-bottom, .ui-dialog .tab-content .charsheet .boxed.thick-bottom,
|
|
.sheet-rolltemplate-utn .sheet-boxed.thick-bottom,
|
|
.ui-dialog .tab-content .charsheet .sheet-boxed.thick-bottom {
|
|
border-bottom-width: 5px;
|
|
}
|
|
.sheet-rolltemplate-utn .boxed.thick-right, .ui-dialog .tab-content .charsheet .boxed.thick-right,
|
|
.sheet-rolltemplate-utn .sheet-boxed.thick-right,
|
|
.ui-dialog .tab-content .charsheet .sheet-boxed.thick-right {
|
|
border-right-width: 5px;
|
|
}
|
|
.sheet-rolltemplate-utn .boxed.thick-top, .ui-dialog .tab-content .charsheet .boxed.thick-top,
|
|
.sheet-rolltemplate-utn .sheet-boxed.thick-top,
|
|
.ui-dialog .tab-content .charsheet .sheet-boxed.thick-top {
|
|
border-top-width: 5px;
|
|
}
|
|
.sheet-rolltemplate-utn .underlined, .ui-dialog .tab-content .charsheet .underlined,
|
|
.sheet-rolltemplate-utn .sheet-underlined,
|
|
.ui-dialog .tab-content .charsheet .sheet-underlined {
|
|
border-radius: 0;
|
|
border-bottom: 1px solid var(--borderColor);
|
|
transition: var(--focusTrans);
|
|
}
|
|
.sheet-rolltemplate-utn :is(.underlined, .boxed):not([readonly]):not([type=checkbox]):not([type=radio]):is(:focus, :focus-within), .ui-dialog .tab-content .charsheet :is(.underlined, .boxed):not([readonly]):not([type=checkbox]):not([type=radio]):is(:focus, :focus-within) {
|
|
background-color: var(--subHeadBackColor);
|
|
}
|
|
.sheet-rolltemplate-utn .underlined--invisible, .ui-dialog .tab-content .charsheet .underlined--invisible {
|
|
border-color: transparent !important;
|
|
}
|
|
.sheet-rolltemplate-utn .short-text, .ui-dialog .tab-content .charsheet .short-text,
|
|
.sheet-rolltemplate-utn .sheet-short-text,
|
|
.ui-dialog .tab-content .charsheet .sheet-short-text {
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-transform: initial;
|
|
}
|
|
.sheet-rolltemplate-utn .roll-container, .ui-dialog .tab-content .charsheet .roll-container {
|
|
align-self: center;
|
|
opacity: 0;
|
|
grid-row: 1/2;
|
|
}
|
|
.sheet-rolltemplate-utn .collapse-container, .ui-dialog .tab-content .charsheet .collapse-container {
|
|
display: grid;
|
|
position: relative;
|
|
}
|
|
.sheet-rolltemplate-utn .text-collapse, .ui-dialog .tab-content .charsheet .text-collapse {
|
|
cursor: pointer;
|
|
display: flex;
|
|
justify-content: flex-start;
|
|
align-items: center;
|
|
}
|
|
.sheet-rolltemplate-utn .text-collapse:before, .ui-dialog .tab-content .charsheet .text-collapse:before {
|
|
content: "unfold_less";
|
|
font-family: "Material Icons";
|
|
font-weight: normal;
|
|
font-style: normal;
|
|
font-size: 24px;
|
|
/* Preferred icon size */
|
|
display: inline-block;
|
|
line-height: 1;
|
|
text-transform: none;
|
|
letter-spacing: normal;
|
|
word-wrap: normal;
|
|
white-space: nowrap;
|
|
direction: ltr;
|
|
/* Support for all WebKit browsers. */
|
|
-webkit-font-smoothing: antialiased;
|
|
/* Support for Safari and Chrome. */
|
|
text-rendering: optimizeLegibility;
|
|
/* Support for Firefox. */
|
|
-moz-osx-font-smoothing: grayscale;
|
|
}
|
|
.sheet-rolltemplate-utn .text-collapse__text, .ui-dialog .tab-content .charsheet .text-collapse__text {
|
|
display: inline;
|
|
}
|
|
.sheet-rolltemplate-utn .text-collapse__check:checked + .text-collapse:before, .ui-dialog .tab-content .charsheet .text-collapse__check:checked + .text-collapse:before {
|
|
content: "unfold_more";
|
|
}
|
|
.sheet-rolltemplate-utn .repitem:hover .collapse, .ui-dialog .tab-content .charsheet .repitem:hover .collapse, .sheet-rolltemplate-utn .repitem:hover .roll-container, .ui-dialog .tab-content .charsheet .repitem:hover .roll-container,
|
|
.sheet-rolltemplate-utn .collapse-container:hover .collapse,
|
|
.ui-dialog .tab-content .charsheet .collapse-container:hover .collapse,
|
|
.sheet-rolltemplate-utn .collapse-container:hover .roll-container,
|
|
.ui-dialog .tab-content .charsheet .collapse-container:hover .roll-container {
|
|
opacity: 1;
|
|
}
|
|
.sheet-rolltemplate-utn .repitem .collapse, .ui-dialog .tab-content .charsheet .repitem .collapse,
|
|
.sheet-rolltemplate-utn .collapse-container .collapse,
|
|
.ui-dialog .tab-content .charsheet .collapse-container .collapse {
|
|
opacity: 0;
|
|
position: absolute;
|
|
right: -10px;
|
|
top: 0px;
|
|
border: 0px solid black;
|
|
border-radius: 0;
|
|
color: var(--selectedColor);
|
|
text-transform: none;
|
|
background-color: transparent;
|
|
}
|
|
.sheet-rolltemplate-utn .repitem .collapse:before, .ui-dialog .tab-content .charsheet .repitem .collapse:before,
|
|
.sheet-rolltemplate-utn .collapse-container .collapse:before,
|
|
.ui-dialog .tab-content .charsheet .collapse-container .collapse:before {
|
|
content: "y";
|
|
font-family: pictos;
|
|
}
|
|
.sheet-rolltemplate-utn .repitem .collapse:checked, .ui-dialog .tab-content .charsheet .repitem .collapse:checked,
|
|
.sheet-rolltemplate-utn .collapse-container .collapse:checked,
|
|
.ui-dialog .tab-content .charsheet .collapse-container .collapse:checked {
|
|
color: var(--unselectedColor1);
|
|
background-color: transparent;
|
|
}
|
|
.sheet-rolltemplate-utn .repitem .collapse:checked ~ .expanded, .ui-dialog .tab-content .charsheet .repitem .collapse:checked ~ .expanded,
|
|
.sheet-rolltemplate-utn .repitem .collapse:checked ~ .collapse-container .expanded,
|
|
.ui-dialog .tab-content .charsheet .repitem .collapse:checked ~ .collapse-container .expanded,
|
|
.sheet-rolltemplate-utn .collapse-container .collapse:checked ~ .expanded,
|
|
.ui-dialog .tab-content .charsheet .collapse-container .collapse:checked ~ .expanded,
|
|
.sheet-rolltemplate-utn .collapse-container .collapse:checked ~ .collapse-container .expanded,
|
|
.ui-dialog .tab-content .charsheet .collapse-container .collapse:checked ~ .collapse-container .expanded {
|
|
display: none !important;
|
|
}
|
|
.sheet-rolltemplate-utn .repitem .collapse:checked ~ .expanded--empty:is(:not([value]), [value=""]) + *, .ui-dialog .tab-content .charsheet .repitem .collapse:checked ~ .expanded--empty:is(:not([value]), [value=""]) + *,
|
|
.sheet-rolltemplate-utn .repitem .collapse:checked ~ .collapse-container ~ .expanded--empty:is(:not([value]), [value=""]) + *,
|
|
.ui-dialog .tab-content .charsheet .repitem .collapse:checked ~ .collapse-container ~ .expanded--empty:is(:not([value]), [value=""]) + *,
|
|
.sheet-rolltemplate-utn .collapse-container .collapse:checked ~ .expanded--empty:is(:not([value]), [value=""]) + *,
|
|
.ui-dialog .tab-content .charsheet .collapse-container .collapse:checked ~ .expanded--empty:is(:not([value]), [value=""]) + *,
|
|
.sheet-rolltemplate-utn .collapse-container .collapse:checked ~ .collapse-container ~ .expanded--empty:is(:not([value]), [value=""]) + *,
|
|
.ui-dialog .tab-content .charsheet .collapse-container .collapse:checked ~ .collapse-container ~ .expanded--empty:is(:not([value]), [value=""]) + * {
|
|
display: none !important;
|
|
}
|
|
.sheet-rolltemplate-utn .repitem .collapse:not(:checked) ~ .collapsed, .ui-dialog .tab-content .charsheet .repitem .collapse:not(:checked) ~ .collapsed,
|
|
.sheet-rolltemplate-utn .collapse-container .collapse:not(:checked) ~ .collapsed,
|
|
.ui-dialog .tab-content .charsheet .collapse-container .collapse:not(:checked) ~ .collapsed {
|
|
display: none !important;
|
|
}
|
|
.sheet-rolltemplate-utn .repitem .collapse:hover, .ui-dialog .tab-content .charsheet .repitem .collapse:hover,
|
|
.sheet-rolltemplate-utn .collapse-container .collapse:hover,
|
|
.ui-dialog .tab-content .charsheet .collapse-container .collapse:hover {
|
|
color: var(--selectedColor);
|
|
}
|
|
.sheet-rolltemplate-utn .repitem > input:not([type=checkbox]), .ui-dialog .tab-content .charsheet .repitem > input:not([type=checkbox]) {
|
|
width: 100%;
|
|
}
|
|
.sheet-rolltemplate-utn .repitem .headed-textarea, .ui-dialog .tab-content .charsheet .repitem .headed-textarea {
|
|
grid-column: 1/-1;
|
|
}
|
|
.sheet-rolltemplate-utn .repcontainer.editmode .collapse, .ui-dialog .tab-content .charsheet .repcontainer.editmode .collapse {
|
|
display: none;
|
|
}
|
|
.sheet-rolltemplate-utn .repcontainer, .ui-dialog .tab-content .charsheet .repcontainer {
|
|
display: grid;
|
|
gap: var(--grid-gap);
|
|
}
|
|
.sheet-rolltemplate-utn .repeating-container, .ui-dialog .tab-content .charsheet .repeating-container {
|
|
display: grid;
|
|
grid-template-areas: "header";
|
|
}
|
|
.sheet-rolltemplate-utn .repeating-container > .header, .ui-dialog .tab-content .charsheet .repeating-container > .header {
|
|
grid-area: header;
|
|
}
|
|
.sheet-rolltemplate-utn .repeating-container:is(:hover, :focus-within, :focus) .repcontrol-button, .ui-dialog .tab-content .charsheet .repeating-container:is(:hover, :focus-within, :focus) .repcontrol-button {
|
|
opacity: 1;
|
|
}
|
|
.sheet-rolltemplate-utn .repcontrol-button, .ui-dialog .tab-content .charsheet .repcontrol-button {
|
|
grid-area: header;
|
|
align-self: center;
|
|
text-transform: none;
|
|
opacity: 0;
|
|
transition-property: opacity, background-color;
|
|
transition-duration: var(--revealTime);
|
|
}
|
|
.sheet-rolltemplate-utn .repcontrol-button ~ .repcontrol, .ui-dialog .tab-content .charsheet .repcontrol-button ~ .repcontrol {
|
|
display: none;
|
|
}
|
|
.sheet-rolltemplate-utn .repcontrol_move, .ui-dialog .tab-content .charsheet .repcontrol_move {
|
|
display: none;
|
|
}
|
|
.sheet-rolltemplate-utn .repcontrol-button--add, .ui-dialog .tab-content .charsheet .repcontrol-button--add {
|
|
justify-self: start;
|
|
}
|
|
.sheet-rolltemplate-utn .repcontrol-button--add:before, .ui-dialog .tab-content .charsheet .repcontrol-button--add:before {
|
|
font-family: pictos;
|
|
content: "&";
|
|
}
|
|
.sheet-rolltemplate-utn .repcontrol-button--edit, .ui-dialog .tab-content .charsheet .repcontrol-button--edit {
|
|
justify-self: end;
|
|
}
|
|
.sheet-rolltemplate-utn .repcontrol-button--edit:before, .ui-dialog .tab-content .charsheet .repcontrol-button--edit:before {
|
|
font-family: pictos;
|
|
content: "p";
|
|
}
|
|
.sheet-rolltemplate-utn .sheet-box, .ui-dialog .tab-content .charsheet .sheet-box,
|
|
.sheet-rolltemplate-utn .box,
|
|
.ui-dialog .tab-content .charsheet .box {
|
|
border-radius: 0;
|
|
width: 10px;
|
|
height: 10px;
|
|
}
|
|
|
|
html {
|
|
font-size: 16px;
|
|
}
|
|
|
|
.ui-dialog .tab-content .charsheet {
|
|
/*
|
|
First of all we apply our default styles.
|
|
Note that because we are using the placeholder, these styles would be first up in the cascade even if we put the extend declaration last.
|
|
This is done first so that when we read the code, we can easily see that it is applied, and anything after it will overwrite those default styles.
|
|
*/
|
|
padding-top: 0;
|
|
}
|
|
.ui-dialog .tab-content .charsheet .roller {
|
|
display: flex;
|
|
gap: var(--half-gap);
|
|
align-items: center;
|
|
}
|
|
.ui-dialog .tab-content .charsheet .roller:before {
|
|
font-family: dicefontd6;
|
|
content: "L";
|
|
}
|
|
.ui-dialog .tab-content .charsheet button {
|
|
cursor: pointer;
|
|
}
|
|
.ui-dialog .tab-content .charsheet h3 {
|
|
grid-area: header;
|
|
}
|
|
.ui-dialog .tab-content .charsheet .fill-left {
|
|
display: grid;
|
|
align-self: center;
|
|
box-sizing: border-box;
|
|
box-shadow: inset 0 0 0 1px var(--selectedColor);
|
|
}
|
|
.ui-dialog .tab-content .charsheet .fill-left:is(:hover, :focus-within, :focus) .fill-left__radio--clearer {
|
|
background-image: linear-gradient(45deg, transparent 0% 48%, white 48% calc(48% + 1px), transparent calc(48% + 1px)), linear-gradient(-45deg, transparent 0% 48%, white 48% calc(48% + 1px), transparent calc(48% + 1px));
|
|
border-color: transparent;
|
|
}
|
|
.ui-dialog .tab-content .charsheet .fill-left:not(.no-fill) .fill-left__radio:checked {
|
|
display: none;
|
|
}
|
|
.ui-dialog .tab-content .charsheet .fill-left__radio {
|
|
appearance: none;
|
|
-webkit-appearance: none;
|
|
background-color: var(--selectedColor);
|
|
order: 1;
|
|
width: 100%;
|
|
height: 100%;
|
|
cursor: pointer;
|
|
}
|
|
.ui-dialog .tab-content .charsheet .fill-left__radio:checked ~ .fill-left__radio {
|
|
background-color: var(--unselectedColor2);
|
|
order: 3;
|
|
}
|
|
.ui-dialog .tab-content .charsheet .fill-left__radio--clearer {
|
|
order: 2;
|
|
}
|
|
.ui-dialog .tab-content .charsheet .fill-left__radio--clearer:checked {
|
|
display: none;
|
|
}
|
|
.ui-dialog .tab-content .charsheet .styled-button {
|
|
background-color: var(--backColor);
|
|
border: 0;
|
|
border-radius: 0.5rem;
|
|
box-sizing: border-box;
|
|
cursor: pointer;
|
|
transition-property: background-color, color;
|
|
transition-duration: var(--revealTime);
|
|
padding-inline: var(--half-gap);
|
|
text-align: center;
|
|
}
|
|
.ui-dialog .tab-content .charsheet .styled-button:hover {
|
|
background-color: var(--selectedColor);
|
|
}
|
|
.ui-dialog .tab-content .charsheet .styled-button:hover, .ui-dialog .tab-content .charsheet .styled-button:hover * {
|
|
color: var(--dark-secondarytext);
|
|
}
|
|
.ui-dialog .tab-content .charsheet .styled-button:focus {
|
|
outline: 2px solid transparent;
|
|
outline-offset: 2px;
|
|
}
|
|
.ui-dialog .tab-content .charsheet .styled-button:focus-visible {
|
|
box-shadow: none;
|
|
}
|
|
.ui-dialog .tab-content .charsheet .styled-button-control:is(:checked, [type=hidden]:not([value=""]):not([value="0"])) + .styled-button--controlled {
|
|
background-color: var(--selectedColor);
|
|
}
|
|
.ui-dialog .tab-content .charsheet .styled-button-control:is(:checked, [type=hidden]:not([value=""]):not([value="0"])) + .styled-button--controlled, .ui-dialog .tab-content .charsheet .styled-button-control:is(:checked, [type=hidden]:not([value=""]):not([value="0"])) + .styled-button--controlled * {
|
|
color: var(--dark-secondarytext);
|
|
}
|
|
|
|
.ui-dialog .sheetform {
|
|
background-color: var(--backColor);
|
|
transition-property: background-color;
|
|
transition-duration: var(--revealTime);
|
|
}
|
|
|
|
#main {
|
|
display: grid;
|
|
}
|
|
|
|
#character,
|
|
#gamescreen {
|
|
display: grid;
|
|
gap: var(--grid-gap);
|
|
grid-auto-flow: dense;
|
|
grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
|
|
}
|
|
|
|
ul.nav-tabs.nav {
|
|
position: sticky;
|
|
top: 0;
|
|
background-color: var(--backColor);
|
|
z-index: 9999;
|
|
margin-bottom: 0px;
|
|
}
|
|
|
|
#main-nav {
|
|
display: grid;
|
|
gap: var(--half-gap);
|
|
grid-template-columns: 1fr auto;
|
|
align-items: center;
|
|
position: sticky;
|
|
top: 44px;
|
|
margin-inline: -10px;
|
|
margin-bottom: 10px;
|
|
padding-inline: 10px;
|
|
padding-block: var(--half-gap);
|
|
background-color: var(--backColor);
|
|
z-index: 1000;
|
|
transition-property: background-color;
|
|
transition-duration: var(--revealTime);
|
|
}
|
|
#main-nav .sheet-nav__tab {
|
|
align-self: end;
|
|
grid-column: 2;
|
|
font-size: 1.5rem;
|
|
}
|
|
#main-nav .sheet-nav__tab.active {
|
|
display: none;
|
|
}
|
|
#main-nav .roll-options,
|
|
#main-nav .basic-moves {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
grid-gap: var(--half-gap);
|
|
}
|
|
#main-nav .basic-moves {
|
|
justify-content: space-between;
|
|
}
|
|
#main-nav .roll-options {
|
|
grid-column: 1;
|
|
justify-content: center;
|
|
}
|
|
|
|
#settings {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
|
|
gap: var(--grid-gap);
|
|
}
|
|
#settings h1 {
|
|
grid-column: 1/-1;
|
|
}
|
|
#settings .move-stats {
|
|
display: grid;
|
|
gap: var(--grid-gap);
|
|
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
|
|
}
|
|
#settings .move-stats .input-label {
|
|
justify-content: space-between;
|
|
}
|
|
|
|
@media (min-width: 597px) {
|
|
.span-2--if-wide {
|
|
grid-column: span 2;
|
|
}
|
|
}
|
|
#character-header {
|
|
display: grid;
|
|
gap: var(--half-gap);
|
|
grid-template-columns: 20rem 1fr;
|
|
grid-template-rows: repeat(2, auto);
|
|
grid-template-areas: "image summary" "sentence summary";
|
|
}
|
|
#character-header .header-image {
|
|
grid-area: image;
|
|
}
|
|
#character-header > .sentence {
|
|
display: flex;
|
|
grid-area: sentence;
|
|
grid-area: auto;
|
|
justify-self: center;
|
|
flex-wrap: wrap;
|
|
gap: var(--half-gap);
|
|
}
|
|
#character-header > .sentence > .character-name {
|
|
min-width: 8rem;
|
|
}
|
|
#character-header > .sentence > .character-name > input {
|
|
text-transform: none;
|
|
}
|
|
#character-header .adaptive--input {
|
|
min-width: 6rem;
|
|
}
|
|
#character-header .input-label,
|
|
#character-header .adaptive--input {
|
|
flex: 1 0 auto;
|
|
}
|
|
#character-header .character-summary {
|
|
grid-area: summary;
|
|
display: grid;
|
|
grid-template-columns: repeat(2, 1fr);
|
|
grid-template-rows: auto 1fr;
|
|
gap: var(--grid-gap);
|
|
}
|
|
#character-header .generic-details {
|
|
display: flex;
|
|
gap: var(--grid-gap);
|
|
flex-wrap: wrap;
|
|
}
|
|
#character-header .generic-details .adaptive,
|
|
#character-header .generic-details .input-label {
|
|
flex: 1 0 auto;
|
|
}
|
|
#character-header .arc.inactive + .adventure-points {
|
|
grid-column: 1/-1;
|
|
}
|
|
#character-header .adventure-points {
|
|
place-self: center;
|
|
}
|
|
|
|
#attributes .input-label {
|
|
justify-content: space-between;
|
|
}
|
|
#attributes .input-label button {
|
|
width: auto;
|
|
flex: 0;
|
|
}
|
|
|
|
#skills .super,
|
|
#signature-item .super {
|
|
justify-self: center;
|
|
}
|
|
#skills button,
|
|
#signature-item button {
|
|
width: auto;
|
|
flex: 0;
|
|
}
|
|
#skills .repitem,
|
|
#skills .repeat-column,
|
|
#signature-item .repitem,
|
|
#signature-item .repeat-column {
|
|
display: grid;
|
|
}
|
|
#skills .expanded,
|
|
#signature-item .expanded {
|
|
display: flex;
|
|
justify-content: space-around;
|
|
}
|
|
|
|
#skills .repitem,
|
|
#skills .repeat-column {
|
|
grid-template-columns: repeat(2, 1fr);
|
|
gap: var(--half-gap);
|
|
}
|
|
|
|
#signature-item {
|
|
justify-self: center;
|
|
}
|
|
#signature-item input {
|
|
width: initial;
|
|
flex: 0;
|
|
}
|
|
|
|
#compatibility .repitem,
|
|
#compatibility .repeat-column {
|
|
display: grid;
|
|
grid-template-columns: 1fr 3rem;
|
|
align-items: end;
|
|
gap: var(--half-gap);
|
|
}
|
|
#compatibility .repcontainer {
|
|
gap: var(--half-gap);
|
|
}
|
|
#compatibility h4 {
|
|
white-space: pre-wrap;
|
|
}
|
|
#compatibility button {
|
|
width: auto;
|
|
flex: 0;
|
|
}
|
|
|
|
#playbook .repitem,
|
|
#playbook .repeat-column {
|
|
display: grid;
|
|
grid-template-columns: 2fr 8rem 6rem;
|
|
gap: var(--half-gap);
|
|
}
|
|
#playbook button {
|
|
width: auto;
|
|
flex: 0;
|
|
}
|
|
|
|
#mon .repitem,
|
|
#mon .repeat-column {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr 8rem 1fr;
|
|
gap: var(--half-gap);
|
|
}
|
|
#mon button {
|
|
width: auto;
|
|
flex: 0;
|
|
}
|
|
|
|
#meter {
|
|
--meterSquare:2rem;
|
|
--meterColumns:repeat(10,var(--meterSquare));
|
|
}
|
|
#meter .repitem,
|
|
#meter .repeat-column {
|
|
display: grid;
|
|
grid-template-columns: 1fr var(--half-gap) var(--meterColumns);
|
|
}
|
|
#meter .repitem > h5,
|
|
#meter .repeat-column > h5 {
|
|
place-self: center end;
|
|
}
|
|
#meter .fill-left {
|
|
grid-column: 3/-1;
|
|
justify-self: start;
|
|
border-radius: 15px;
|
|
overflow: hidden;
|
|
align-self: center;
|
|
height: 1rem;
|
|
align-items: center;
|
|
grid-template-columns: repeat(10, var(--meterSquare));
|
|
grid-template-rows: var(--grid-gap);
|
|
align-content: start;
|
|
}
|
|
#meter .fill-left.no-fill {
|
|
--selectedColor:lightgrey;
|
|
}
|
|
#meter h4:first-child {
|
|
grid-column: span 2;
|
|
margin-right: var(--half-gap);
|
|
}
|
|
#meter button {
|
|
width: auto;
|
|
flex: 0;
|
|
}
|
|
#meter .fill-left__max-control[value="1"] + .fill-left {
|
|
grid-template-columns: repeat(1, var(--meterSquare));
|
|
}
|
|
#meter .fill-left__max-control[value="1"] + .fill-left .fill-left__radio[value="2"] {
|
|
display: none;
|
|
}
|
|
#meter .fill-left__max-control[value="1"] + .fill-left .fill-left__radio[value="3"] {
|
|
display: none;
|
|
}
|
|
#meter .fill-left__max-control[value="1"] + .fill-left .fill-left__radio[value="4"] {
|
|
display: none;
|
|
}
|
|
#meter .fill-left__max-control[value="1"] + .fill-left .fill-left__radio[value="5"] {
|
|
display: none;
|
|
}
|
|
#meter .fill-left__max-control[value="1"] + .fill-left .fill-left__radio[value="6"] {
|
|
display: none;
|
|
}
|
|
#meter .fill-left__max-control[value="1"] + .fill-left .fill-left__radio[value="7"] {
|
|
display: none;
|
|
}
|
|
#meter .fill-left__max-control[value="1"] + .fill-left .fill-left__radio[value="8"] {
|
|
display: none;
|
|
}
|
|
#meter .fill-left__max-control[value="1"] + .fill-left .fill-left__radio[value="9"] {
|
|
display: none;
|
|
}
|
|
#meter .fill-left__max-control[value="1"] + .fill-left .fill-left__radio[value="10"] {
|
|
display: none;
|
|
}
|
|
#meter .fill-left__max-control[value="2"] + .fill-left {
|
|
grid-template-columns: repeat(2, var(--meterSquare));
|
|
}
|
|
#meter .fill-left__max-control[value="2"] + .fill-left .fill-left__radio[value="3"] {
|
|
display: none;
|
|
}
|
|
#meter .fill-left__max-control[value="2"] + .fill-left .fill-left__radio[value="4"] {
|
|
display: none;
|
|
}
|
|
#meter .fill-left__max-control[value="2"] + .fill-left .fill-left__radio[value="5"] {
|
|
display: none;
|
|
}
|
|
#meter .fill-left__max-control[value="2"] + .fill-left .fill-left__radio[value="6"] {
|
|
display: none;
|
|
}
|
|
#meter .fill-left__max-control[value="2"] + .fill-left .fill-left__radio[value="7"] {
|
|
display: none;
|
|
}
|
|
#meter .fill-left__max-control[value="2"] + .fill-left .fill-left__radio[value="8"] {
|
|
display: none;
|
|
}
|
|
#meter .fill-left__max-control[value="2"] + .fill-left .fill-left__radio[value="9"] {
|
|
display: none;
|
|
}
|
|
#meter .fill-left__max-control[value="2"] + .fill-left .fill-left__radio[value="10"] {
|
|
display: none;
|
|
}
|
|
#meter .fill-left__max-control[value="3"] + .fill-left {
|
|
grid-template-columns: repeat(3, var(--meterSquare));
|
|
}
|
|
#meter .fill-left__max-control[value="3"] + .fill-left .fill-left__radio[value="4"] {
|
|
display: none;
|
|
}
|
|
#meter .fill-left__max-control[value="3"] + .fill-left .fill-left__radio[value="5"] {
|
|
display: none;
|
|
}
|
|
#meter .fill-left__max-control[value="3"] + .fill-left .fill-left__radio[value="6"] {
|
|
display: none;
|
|
}
|
|
#meter .fill-left__max-control[value="3"] + .fill-left .fill-left__radio[value="7"] {
|
|
display: none;
|
|
}
|
|
#meter .fill-left__max-control[value="3"] + .fill-left .fill-left__radio[value="8"] {
|
|
display: none;
|
|
}
|
|
#meter .fill-left__max-control[value="3"] + .fill-left .fill-left__radio[value="9"] {
|
|
display: none;
|
|
}
|
|
#meter .fill-left__max-control[value="3"] + .fill-left .fill-left__radio[value="10"] {
|
|
display: none;
|
|
}
|
|
#meter .fill-left__max-control[value="4"] + .fill-left {
|
|
grid-template-columns: repeat(4, var(--meterSquare));
|
|
}
|
|
#meter .fill-left__max-control[value="4"] + .fill-left .fill-left__radio[value="5"] {
|
|
display: none;
|
|
}
|
|
#meter .fill-left__max-control[value="4"] + .fill-left .fill-left__radio[value="6"] {
|
|
display: none;
|
|
}
|
|
#meter .fill-left__max-control[value="4"] + .fill-left .fill-left__radio[value="7"] {
|
|
display: none;
|
|
}
|
|
#meter .fill-left__max-control[value="4"] + .fill-left .fill-left__radio[value="8"] {
|
|
display: none;
|
|
}
|
|
#meter .fill-left__max-control[value="4"] + .fill-left .fill-left__radio[value="9"] {
|
|
display: none;
|
|
}
|
|
#meter .fill-left__max-control[value="4"] + .fill-left .fill-left__radio[value="10"] {
|
|
display: none;
|
|
}
|
|
#meter .fill-left__max-control[value="5"] + .fill-left {
|
|
grid-template-columns: repeat(5, var(--meterSquare));
|
|
}
|
|
#meter .fill-left__max-control[value="5"] + .fill-left .fill-left__radio[value="6"] {
|
|
display: none;
|
|
}
|
|
#meter .fill-left__max-control[value="5"] + .fill-left .fill-left__radio[value="7"] {
|
|
display: none;
|
|
}
|
|
#meter .fill-left__max-control[value="5"] + .fill-left .fill-left__radio[value="8"] {
|
|
display: none;
|
|
}
|
|
#meter .fill-left__max-control[value="5"] + .fill-left .fill-left__radio[value="9"] {
|
|
display: none;
|
|
}
|
|
#meter .fill-left__max-control[value="5"] + .fill-left .fill-left__radio[value="10"] {
|
|
display: none;
|
|
}
|
|
#meter .fill-left__max-control[value="6"] + .fill-left {
|
|
grid-template-columns: repeat(6, var(--meterSquare));
|
|
}
|
|
#meter .fill-left__max-control[value="6"] + .fill-left .fill-left__radio[value="7"] {
|
|
display: none;
|
|
}
|
|
#meter .fill-left__max-control[value="6"] + .fill-left .fill-left__radio[value="8"] {
|
|
display: none;
|
|
}
|
|
#meter .fill-left__max-control[value="6"] + .fill-left .fill-left__radio[value="9"] {
|
|
display: none;
|
|
}
|
|
#meter .fill-left__max-control[value="6"] + .fill-left .fill-left__radio[value="10"] {
|
|
display: none;
|
|
}
|
|
#meter .fill-left__max-control[value="7"] + .fill-left {
|
|
grid-template-columns: repeat(7, var(--meterSquare));
|
|
}
|
|
#meter .fill-left__max-control[value="7"] + .fill-left .fill-left__radio[value="8"] {
|
|
display: none;
|
|
}
|
|
#meter .fill-left__max-control[value="7"] + .fill-left .fill-left__radio[value="9"] {
|
|
display: none;
|
|
}
|
|
#meter .fill-left__max-control[value="7"] + .fill-left .fill-left__radio[value="10"] {
|
|
display: none;
|
|
}
|
|
#meter .fill-left__max-control[value="8"] + .fill-left {
|
|
grid-template-columns: repeat(8, var(--meterSquare));
|
|
}
|
|
#meter .fill-left__max-control[value="8"] + .fill-left .fill-left__radio[value="9"] {
|
|
display: none;
|
|
}
|
|
#meter .fill-left__max-control[value="8"] + .fill-left .fill-left__radio[value="10"] {
|
|
display: none;
|
|
}
|
|
#meter .fill-left__max-control[value="9"] + .fill-left {
|
|
grid-template-columns: repeat(9, var(--meterSquare));
|
|
}
|
|
#meter .fill-left__max-control[value="9"] + .fill-left .fill-left__radio[value="10"] {
|
|
display: none;
|
|
}
|
|
|
|
#modifiers .repitem {
|
|
display: grid;
|
|
grid-template-columns: auto 1fr;
|
|
}
|
|
|
|
#advancement {
|
|
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
|
|
}
|
|
#advancement h3 {
|
|
grid-column: 1/-1;
|
|
}
|
|
#advancement .repeating-container {
|
|
align-self: start;
|
|
gap: var(--half-gap) var(--grid-gap);
|
|
}
|
|
#advancement .repitem {
|
|
display: grid;
|
|
grid-template-columns: 1rem 1fr;
|
|
align-items: start;
|
|
}
|
|
#advancement input:checked + .adaptive textarea {
|
|
text-decoration-line: line-through;
|
|
text-decoration-style: wavy;
|
|
text-decoration-color: var(--selectedColor);
|
|
text-decoration-thickness: 2px;
|
|
}
|
|
#advancement :is(.adaptive--text) {
|
|
min-height: 1.5rem;
|
|
height: auto;
|
|
}
|
|
|
|
#lifeslice .repcontainer {
|
|
display: block;
|
|
gap: var(--half-gap);
|
|
column-width: 200px;
|
|
}
|
|
#lifeslice .repitem {
|
|
display: grid;
|
|
grid-template-columns: auto 1fr;
|
|
gap: var(--half-gap);
|
|
break-inside: avoid;
|
|
}
|
|
|
|
#clock {
|
|
--circleSize:150px;
|
|
--itemDeg:0deg;
|
|
--itemCount:10;
|
|
}
|
|
#clock .repcontainer {
|
|
display: block;
|
|
gap: var(--half-gap);
|
|
column-width: 200px;
|
|
}
|
|
#clock .repitem {
|
|
display: grid;
|
|
gap: var(--half-gap);
|
|
grid-template-areas: "clock" "name";
|
|
break-inside: avoid;
|
|
}
|
|
#clock .repitem > input {
|
|
text-align: center;
|
|
}
|
|
#clock .clock-control--current[value="1"] ~ .clock-progress {
|
|
--itemDeg:calc(1 / var(--itemCount) * 360deg);
|
|
}
|
|
#clock .clock-control--max[value="2"] + .clock-progress {
|
|
--itemCount:2;
|
|
}
|
|
#clock .clock-control--current[value="2"] ~ .clock-progress {
|
|
--itemDeg:calc(2 / var(--itemCount) * 360deg);
|
|
}
|
|
#clock .clock-control--max[value="3"] + .clock-progress {
|
|
--itemCount:3;
|
|
}
|
|
#clock .clock-control--current[value="3"] ~ .clock-progress {
|
|
--itemDeg:calc(3 / var(--itemCount) * 360deg);
|
|
}
|
|
#clock .clock-control--max[value="4"] + .clock-progress {
|
|
--itemCount:4;
|
|
}
|
|
#clock .clock-control--current[value="4"] ~ .clock-progress {
|
|
--itemDeg:calc(4 / var(--itemCount) * 360deg);
|
|
}
|
|
#clock .clock-control--max[value="5"] + .clock-progress {
|
|
--itemCount:5;
|
|
}
|
|
#clock .clock-control--current[value="5"] ~ .clock-progress {
|
|
--itemDeg:calc(5 / var(--itemCount) * 360deg);
|
|
}
|
|
#clock .clock-control--max[value="6"] + .clock-progress {
|
|
--itemCount:6;
|
|
}
|
|
#clock .clock-control--current[value="6"] ~ .clock-progress {
|
|
--itemDeg:calc(6 / var(--itemCount) * 360deg);
|
|
}
|
|
#clock .clock-control--max[value="7"] + .clock-progress {
|
|
--itemCount:7;
|
|
}
|
|
#clock .clock-control--current[value="7"] ~ .clock-progress {
|
|
--itemDeg:calc(7 / var(--itemCount) * 360deg);
|
|
}
|
|
#clock .clock-control--max[value="8"] + .clock-progress {
|
|
--itemCount:8;
|
|
}
|
|
#clock .clock-control--current[value="8"] ~ .clock-progress {
|
|
--itemDeg:calc(8 / var(--itemCount) * 360deg);
|
|
}
|
|
#clock .clock-control--max[value="9"] + .clock-progress {
|
|
--itemCount:9;
|
|
}
|
|
#clock .clock-control--current[value="9"] ~ .clock-progress {
|
|
--itemDeg:calc(9 / var(--itemCount) * 360deg);
|
|
}
|
|
#clock .clock-control--max[value="10"] + .clock-progress {
|
|
--itemCount:10;
|
|
}
|
|
#clock .clock-control--current[value="10"] ~ .clock-progress {
|
|
--itemDeg:calc(10 / var(--itemCount) * 360deg);
|
|
}
|
|
#clock .clock-label {
|
|
grid-area: clock;
|
|
max-width: var(--circleSize);
|
|
box-sizing: border-box;
|
|
display: flex;
|
|
place-self: center;
|
|
align-items: center;
|
|
z-index: 10;
|
|
}
|
|
#clock .clock-label > * {
|
|
color: var(--selectedColor);
|
|
font-weight: bold;
|
|
}
|
|
#clock .clock-progress {
|
|
grid-area: clock;
|
|
border-radius: 50%;
|
|
place-self: center;
|
|
width: var(--circleSize);
|
|
height: var(--circleSize);
|
|
display: grid;
|
|
grid-template-areas: "content";
|
|
background: conic-gradient(var(--selectedColor) var(--itemDeg), transparent var(--itemDeg));
|
|
border: 2px solid var(--selectedColor);
|
|
}
|
|
#clock .clock-progress:before {
|
|
content: "";
|
|
box-sizing: border-box;
|
|
width: 75%;
|
|
height: 75%;
|
|
place-self: center;
|
|
border-radius: 50%;
|
|
background-color: var(--backColor);
|
|
border: 2px solid var(--selectedColor);
|
|
}
|
|
|
|
.sheet-rolltemplate-utn {
|
|
font-size: 16px;
|
|
margin-left: -40px;
|
|
margin-right: -5px;
|
|
--headerBackground:var(--selectedColor);
|
|
--templatePad:var(--grid-gap);
|
|
--criticalColor:green;
|
|
--fumbleColor:red;
|
|
--importantColor:blue;
|
|
}
|
|
.sheet-rolltemplate-utn:not(:first-child) {
|
|
margin-top: 10px;
|
|
}
|
|
.sheet-rolltemplate-utn:first-child .sheet-continuation {
|
|
margin-top: -9px;
|
|
}
|
|
.sheet-rolltemplate-utn .sheet-header {
|
|
padding: 5px;
|
|
display: grid;
|
|
gap: var(--half-gap);
|
|
background-color: var(--headerBackground);
|
|
padding: calc(var(--templatePad) / 2);
|
|
margin-left: calc(var(--templatePad) * -1);
|
|
margin-right: calc(var(--templatePad) * -1);
|
|
margin-top: calc(var(--templatePad) * -1);
|
|
border-radius: 5px 5px 0 0;
|
|
}
|
|
.sheet-rolltemplate-utn .sheet-header * {
|
|
color: #e6e6e6;
|
|
}
|
|
.sheet-rolltemplate-utn .sheet-header .sheet-character-name,
|
|
.sheet-rolltemplate-utn .sheet-header h3 {
|
|
grid-column: 1/-1;
|
|
white-space: pre-wrap;
|
|
}
|
|
.sheet-rolltemplate-utn .sheet-header .sheet-character_name {
|
|
place-self: center end;
|
|
}
|
|
.sheet-rolltemplate-utn .sheet-header h3 {
|
|
place-self: center start;
|
|
}
|
|
.sheet-rolltemplate-utn > .sheet-template {
|
|
border-radius: 5px;
|
|
background-color: var(--backColor);
|
|
padding: var(--templatePad);
|
|
}
|
|
.sheet-rolltemplate-utn > .sheet-template h3,
|
|
.sheet-rolltemplate-utn > .sheet-template h3 * {
|
|
font-size: 1.5em;
|
|
}
|
|
.sheet-rolltemplate-utn > .sheet-template h4,
|
|
.sheet-rolltemplate-utn > .sheet-template h4 * {
|
|
font-size: 1.25em;
|
|
}
|
|
.sheet-rolltemplate-utn > .sheet-template h5,
|
|
.sheet-rolltemplate-utn > .sheet-template h5 * {
|
|
font-weight: bold;
|
|
}
|
|
.sheet-rolltemplate-utn > .sheet-template span, .sheet-rolltemplate-utn > .sheet-template h5 {
|
|
font-size: 1em;
|
|
}
|
|
.sheet-rolltemplate-utn > .sheet-template .inlinerollresult {
|
|
font-size: 1.25em;
|
|
}
|
|
.sheet-rolltemplate-utn > .sheet-template .inlinerollresult[title*="[computed value]"], .sheet-rolltemplate-utn > .sheet-template .inlinerollresult[original-title*="[computed value]"] {
|
|
pointer-events: none;
|
|
}
|
|
.sheet-rolltemplate-utn > .sheet-template .inlinerollresult, .sheet-rolltemplate-utn > .sheet-template .inlinerollresult.fullcrit, .sheet-rolltemplate-utn > .sheet-template .inlinerollresult.fullfail, .sheet-rolltemplate-utn > .sheet-template .inlinerollresult.importantroll {
|
|
border: none;
|
|
background-color: transparent;
|
|
}
|
|
.sheet-rolltemplate-utn > .sheet-template .inlinerollresult.fullcrit {
|
|
color: var(--criticalColor);
|
|
}
|
|
.sheet-rolltemplate-utn > .sheet-template .inlinerollresult.fullfail {
|
|
color: var(--fumbleColor);
|
|
}
|
|
.sheet-rolltemplate-utn > .sheet-template .inlinerollresult.importantroll {
|
|
color: var(--importantColor);
|
|
}
|
|
.sheet-rolltemplate-utn > .sheet-template .sheet-crit .inlinerollresult {
|
|
color: var(--criticalColor);
|
|
}
|
|
.sheet-rolltemplate-utn > .sheet-template .sheet-fumble .inlinerollresult {
|
|
color: var(--fumbleColor);
|
|
}
|
|
.sheet-rolltemplate-utn > .sheet-template .sheet-regular-roll .inlinerollresult {
|
|
color: var(--fontColor);
|
|
}
|
|
.sheet-rolltemplate-utn .sheet-content {
|
|
display: grid;
|
|
gap: var(--grid-gap);
|
|
}
|
|
.sheet-rolltemplate-utn .sheet-template-row {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: var(--half-gap);
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
.sheet-rolltemplate-utn .sheet-template-row.sheet-center {
|
|
justify-content: center;
|
|
}
|
|
.sheet-rolltemplate-utn .sheet-success {
|
|
color: var(--criticalColor);
|
|
}
|
|
.sheet-rolltemplate-utn .sheet-failure {
|
|
color: var(--fumbleColor);
|
|
}
|
|
.sheet-rolltemplate-utn .sheet-critical {
|
|
text-decoration-line: underline overline;
|
|
} |