mirror of
https://github.com/Nighthawk42/roll20-character-sheets.git
synced 2026-08-30 19:52:29 +00:00
2865 lines
96 KiB
CSS
2865 lines
96 KiB
CSS
@import url("https://fonts.googleapis.com/css?family=Aldrich|DM+Sans|Geo|Russo+One|Homenaje|Monda|Orbitron|Michroma|Viga|Material+Icons|Material+Symbols+Outlined|Wallpoet|Saira+Extra+Condensed&display=swap");
|
|
.ui-dialog .charactersheet .tab.character {
|
|
display: grid;
|
|
grid-auto-flow: column;
|
|
grid-template-columns: 1fr 1fr 1fr;
|
|
grid-template-rows: auto 7.3rem 6.5rem 9.2rem auto auto auto 12.3rem 1fr;
|
|
perspective: 800px;
|
|
}
|
|
.ui-dialog .charactersheet .Consumables {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: 1rem;
|
|
align-self: flex-start;
|
|
}
|
|
.ui-dialog .charactersheet .Consumables .input_row {
|
|
align-items: center;
|
|
flex-wrap: nowrap;
|
|
}
|
|
.ui-dialog .charactersheet .Consumables h1 {
|
|
grid-column: 1/-1;
|
|
bottom: -1rem;
|
|
position: relative;
|
|
place-self: start;
|
|
background: var(--headGradient);
|
|
padding: 1rem 5rem 5px 15px;
|
|
line-height: 10px;
|
|
font-family: var(--font-thin-header);
|
|
font-size: 10px;
|
|
color: var(--headTopColor);
|
|
transform: translateY(-50%);
|
|
clip-path: polygon(0% 0%, calc(100% - 15px) 0%, 100% 50%, calc(100% - 15px) 100%, 0% 100%);
|
|
z-index: 2;
|
|
white-space: nowrap;
|
|
}
|
|
.ui-dialog .charactersheet .Consumables .sm_box:nth-of-type(1),
|
|
.ui-dialog .charactersheet .Consumables .sm_box:nth-of-type(2) {
|
|
width: calc(100% - 30px);
|
|
}
|
|
.ui-dialog .charactersheet .combat {
|
|
grid-row: span 3;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 5px;
|
|
align-self: start;
|
|
min-height: 28rem;
|
|
}
|
|
.ui-dialog .charactersheet .combat .Weapons {
|
|
flex: 1;
|
|
z-index: 1;
|
|
}
|
|
.ui-dialog .charactersheet .combat .Weapons .input_row {
|
|
border: unset;
|
|
}
|
|
.ui-dialog .charactersheet .combat .Weapons .collapse {
|
|
right: -10px !important;
|
|
top: -10px !important;
|
|
}
|
|
.ui-dialog .charactersheet .combat .sm_box {
|
|
align-self: end;
|
|
width: 75%;
|
|
padding: 5px 10px;
|
|
flex: 0 0 0;
|
|
}
|
|
.ui-dialog .charactersheet .inventory {
|
|
grid-row: span 3;
|
|
display: grid;
|
|
grid-template-rows: auto 1fr;
|
|
gap: 5px;
|
|
align-self: start;
|
|
min-height: 35rem;
|
|
}
|
|
.ui-dialog .charactersheet .inventory .input_row {
|
|
border: unset;
|
|
}
|
|
.ui-dialog .charactersheet .inventory button {
|
|
font-size: inherit;
|
|
}
|
|
.ui-dialog .charactersheet .inventory .repitem {
|
|
border-bottom: 2px dotted var(--inputBorderColor);
|
|
}
|
|
.ui-dialog .charactersheet .Health {
|
|
width: 60%;
|
|
}
|
|
.ui-dialog .charactersheet .Health .overlay {
|
|
position: relative;
|
|
}
|
|
.ui-dialog .charactersheet .Health .radiation {
|
|
position: absolute;
|
|
display: grid;
|
|
place-content: center;
|
|
right: -0.5rem;
|
|
top: 0;
|
|
width: 2rem;
|
|
height: 2rem;
|
|
translate: 100%;
|
|
padding: 5px;
|
|
}
|
|
.ui-dialog .charactersheet .Health .radiation span::after {
|
|
content: "crisis_alert";
|
|
font-family: var(--font-icon);
|
|
font-size: 2.5rem;
|
|
line-height: 1.25;
|
|
text-align: center;
|
|
position: absolute;
|
|
inset: 0;
|
|
}
|
|
.ui-dialog .charactersheet .Health .radiation input[type=hidden]:not([value="0"]) + span::after {
|
|
color: var(--warningColor);
|
|
opacity: 0.7;
|
|
}
|
|
.ui-dialog .charactersheet .Health .radiation input {
|
|
width: 24px;
|
|
font-family: var(--font-thick-header);
|
|
text-align: center;
|
|
aspect-ratio: 1;
|
|
display: none;
|
|
}
|
|
.ui-dialog .charactersheet .Health .radiation:where(:hover, :focus, :focus-within) span {
|
|
display: none;
|
|
}
|
|
.ui-dialog .charactersheet .Health .radiation:where(:hover, :focus, :focus-within) input,
|
|
.ui-dialog .charactersheet .Health .radiation input[type=hidden]:not([value="0"]) ~ input {
|
|
display: block;
|
|
z-index: 1;
|
|
}
|
|
.ui-dialog .charactersheet .Radiation, .ui-dialog .charactersheet .Resolve {
|
|
width: 203px;
|
|
align-self: start;
|
|
}
|
|
.ui-dialog .charactersheet .Talents {
|
|
grid-row: span 2;
|
|
}
|
|
.ui-dialog .charactersheet .Story_Points {
|
|
width: 60%;
|
|
justify-self: flex-end;
|
|
}
|
|
.ui-dialog .charactersheet .Story_Points .fill-left {
|
|
display: flex;
|
|
justify-content: center;
|
|
}
|
|
.ui-dialog .charactersheet .Tiny_Items {
|
|
width: 60%;
|
|
justify-self: flex-end;
|
|
}
|
|
.ui-dialog .charactersheet .bioSection {
|
|
display: flex;
|
|
flex-direction: column;
|
|
mix-blend-mode: difference;
|
|
grid-row: span 2;
|
|
align-self: start;
|
|
margin-bottom: var(--huge-gap);
|
|
}
|
|
.ui-dialog .charactersheet .bioSection textarea {
|
|
min-height: 9rem;
|
|
}
|
|
.ui-dialog .charactersheet .bioSection .camelBox:nth-of-type(1) {
|
|
width: 200px;
|
|
}
|
|
.ui-dialog .charactersheet .bioSection .camelBox:nth-of-type(2) {
|
|
width: 150px;
|
|
}
|
|
.ui-dialog .charactersheet .bioSection .camelBox:nth-of-type(3) {
|
|
width: 250px;
|
|
flex: 3;
|
|
}
|
|
.ui-dialog .charactersheet .skill_button {
|
|
position: relative;
|
|
min-height: 3rem;
|
|
pointer-events: auto;
|
|
transition: all 300ms ease-out;
|
|
}
|
|
.ui-dialog .charactersheet .skill_button button,
|
|
.ui-dialog .charactersheet .skill_button .button {
|
|
width: 100%;
|
|
box-sizing: border-box;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
text-align: center;
|
|
padding: var(--half-gap);
|
|
}
|
|
.ui-dialog .charactersheet .skill_button h3,
|
|
.ui-dialog .charactersheet .skill_button [aria-level="3"] {
|
|
text-align: center;
|
|
color: var(--headColor);
|
|
line-height: 1;
|
|
font-size: 14px;
|
|
}
|
|
.ui-dialog .charactersheet .skill_button::before {
|
|
position: absolute;
|
|
inset: 0;
|
|
content: "";
|
|
background: var(--contentBackColor);
|
|
clip-path: polygon(5px 0, calc(100% - 5px) 0%, 100% 5px, 100% calc(100% - 5px), calc(100% - 5px) 100%, 5px 100%, 0% calc(100% - 5px), 0 5px);
|
|
z-index: -1;
|
|
}
|
|
.ui-dialog .charactersheet .skill_button:hover:not(.no-hover) {
|
|
--_filter0: drop-shadow(0px 0 0px var(--hoverHighlight));
|
|
filter: drop-shadow(0 0 2px var(--hoverHighlight)) var(--_filter0) var(--_filter0) var(--_filter0) var(--_filter0);
|
|
}
|
|
.ui-dialog .charactersheet .skill_button button:hover {
|
|
background: radial-gradient(var(--hoverHighlightBack), transparent);
|
|
}
|
|
.ui-dialog .charactersheet .skill_button button:active {
|
|
background: radial-gradient(var(--hoverHighlight), transparent);
|
|
}
|
|
.ui-dialog .charactersheet .skill_button button:active h3 {
|
|
color: var(--activeTextColor);
|
|
}
|
|
.ui-dialog .charactersheet .attribute_section {
|
|
--_filter: var(--active2e) drop-shadow(0 1px 0.1rem var(--col-alien-deep));
|
|
position: relative;
|
|
align-self: start;
|
|
min-height: 300px;
|
|
pointer-events: none;
|
|
grid-row: span 4;
|
|
filter: var(--_filter, drop-shadow(0 2px 0.5rem var(--col-alien-black)));
|
|
z-index: 5;
|
|
}
|
|
.ui-dialog .charactersheet .attribute_section label {
|
|
all: unset;
|
|
display: flex;
|
|
place-self: center;
|
|
}
|
|
.ui-dialog .charactersheet .attribute_section :where(div[class*=segment]) {
|
|
display: grid;
|
|
grid-template-columns: repeat(4, 1fr);
|
|
width: 80%;
|
|
min-width: 200px;
|
|
margin: auto;
|
|
gap: 5px;
|
|
}
|
|
.ui-dialog .charactersheet .attribute_section .skill_button {
|
|
display: grid;
|
|
}
|
|
.ui-dialog .charactersheet .attribute_section .strength_segment {
|
|
grid-column: 1/-1;
|
|
grid-row: 1;
|
|
grid-template-areas: ". closecombat closecombat ." "machinery machinery stamina stamina" ". strength strength .";
|
|
}
|
|
.ui-dialog .charactersheet .attribute_section .strength_segment .__strength {
|
|
grid-area: strength;
|
|
}
|
|
.ui-dialog .charactersheet .attribute_section .strength_segment .__strength > .__big {
|
|
position: absolute;
|
|
bottom: 0;
|
|
transform: translateY(125%);
|
|
}
|
|
.ui-dialog .charactersheet .attribute_section .strength_segment .__close_combat {
|
|
grid-area: closecombat;
|
|
}
|
|
.ui-dialog .charactersheet .attribute_section .strength_segment .__close_combat > .__big {
|
|
position: absolute;
|
|
bottom: 0;
|
|
transform: translateY(-115%);
|
|
}
|
|
.ui-dialog .charactersheet .attribute_section .strength_segment .__heavy_machinery {
|
|
grid-area: machinery;
|
|
}
|
|
.ui-dialog .charactersheet .attribute_section .strength_segment .__stamina {
|
|
grid-area: stamina;
|
|
}
|
|
.ui-dialog .charactersheet .attribute_section .agility_segment {
|
|
position: absolute;
|
|
left: 5px;
|
|
top: 50%;
|
|
transform: translate(-50%, -50%);
|
|
grid-column: 1/span 2;
|
|
grid-row: 2;
|
|
grid-template-areas: ". rangedcombat rangedcombat ." "mobility mobility agility agility" ". piloting piloting .";
|
|
z-index: 2;
|
|
}
|
|
.ui-dialog .charactersheet .attribute_section .agility_segment .skill_button {
|
|
display: flex;
|
|
}
|
|
.ui-dialog .charactersheet .attribute_section .agility_segment .__ranged_combat {
|
|
grid-area: rangedcombat;
|
|
}
|
|
.ui-dialog .charactersheet .attribute_section .agility_segment .__mobility {
|
|
grid-area: mobility;
|
|
}
|
|
.ui-dialog .charactersheet .attribute_section .agility_segment .__agility {
|
|
grid-area: agility;
|
|
}
|
|
.ui-dialog .charactersheet .attribute_section .agility_segment .__agility label:first-of-type {
|
|
order: 2;
|
|
}
|
|
.ui-dialog .charactersheet .attribute_section .agility_segment .__piloting {
|
|
grid-area: piloting;
|
|
}
|
|
.ui-dialog .charactersheet .attribute_section .wits_segment {
|
|
position: absolute;
|
|
right: 5px;
|
|
top: 50%;
|
|
transform: translate(50%, -50%);
|
|
grid-column: 4/span 2;
|
|
grid-row: 2;
|
|
grid-template-areas: ". observation observation ." "wits wits survival survival" ". comtech comtech .";
|
|
z-index: 2;
|
|
}
|
|
.ui-dialog .charactersheet .attribute_section .wits_segment .skill_button {
|
|
display: flex;
|
|
}
|
|
.ui-dialog .charactersheet .attribute_section .wits_segment .skill_button label {
|
|
order: 2;
|
|
}
|
|
.ui-dialog .charactersheet .attribute_section .wits_segment .__observation {
|
|
grid-area: observation;
|
|
}
|
|
.ui-dialog .charactersheet .attribute_section .wits_segment .__wits {
|
|
grid-area: wits;
|
|
}
|
|
.ui-dialog .charactersheet .attribute_section .wits_segment .__wits > label:first-of-type {
|
|
order: 0;
|
|
}
|
|
.ui-dialog .charactersheet .attribute_section .wits_segment .__comtech {
|
|
grid-area: comtech;
|
|
}
|
|
.ui-dialog .charactersheet .attribute_section .wits_segment .__survival {
|
|
grid-area: survival;
|
|
}
|
|
.ui-dialog .charactersheet .attribute_section .empathy_segment {
|
|
position: absolute;
|
|
bottom: 0;
|
|
left: 50%;
|
|
transform: translate(-50%, 0%);
|
|
grid-template-areas: ". empathy empathy ." "command command medical medical" ". manipulation manipulation .";
|
|
z-index: 1;
|
|
}
|
|
.ui-dialog .charactersheet .attribute_section .empathy_segment .__medical_aid {
|
|
grid-area: medical;
|
|
}
|
|
.ui-dialog .charactersheet .attribute_section .empathy_segment .__empathy {
|
|
grid-area: empathy;
|
|
}
|
|
.ui-dialog .charactersheet .attribute_section .empathy_segment .__empathy > .__big {
|
|
position: absolute;
|
|
top: 0;
|
|
transform: translateY(-125%);
|
|
}
|
|
.ui-dialog .charactersheet .attribute_section .empathy_segment .__command {
|
|
grid-area: command;
|
|
}
|
|
.ui-dialog .charactersheet .attribute_section .empathy_segment .__manipulation {
|
|
grid-area: manipulation;
|
|
}
|
|
.ui-dialog .charactersheet .attribute_section .empathy_segment .__manipulation > .__big {
|
|
position: absolute;
|
|
top: 0;
|
|
transform: translateY(115%);
|
|
}
|
|
.ui-dialog .charactersheet .attribute_section .strength_segment .skill_button:nth-of-type(2),
|
|
.ui-dialog .charactersheet .attribute_section .empathy_segment .skill_button:nth-of-type(2) {
|
|
display: flex;
|
|
}
|
|
.ui-dialog .charactersheet .attribute_section .strength_segment .skill_button:nth-of-type(3),
|
|
.ui-dialog .charactersheet .attribute_section .empathy_segment .skill_button:nth-of-type(3) {
|
|
display: flex;
|
|
}
|
|
.ui-dialog .charactersheet .attribute_section .strength_segment .skill_button:nth-of-type(3) label,
|
|
.ui-dialog .charactersheet .attribute_section .empathy_segment .skill_button:nth-of-type(3) label {
|
|
order: 2;
|
|
}
|
|
|
|
@media (max-width: 890px) {
|
|
.ui-dialog .charactersheet .tab.character {
|
|
padding: 3rem 1rem;
|
|
grid-auto-flow: unset;
|
|
grid-template-columns: 1fr 1fr;
|
|
grid-template-rows: initial;
|
|
}
|
|
.ui-dialog .charactersheet .tab.character .Health .overlay {
|
|
display: flex;
|
|
gap: 5px;
|
|
justify-content: space-between;
|
|
}
|
|
.ui-dialog .charactersheet .tab.character .Health .radiation {
|
|
position: initial;
|
|
translate: 0;
|
|
right: 0;
|
|
flex: 0 0 auto;
|
|
}
|
|
.ui-dialog .charactersheet .tab.character .combat,
|
|
.ui-dialog .charactersheet .tab.character .inventory {
|
|
min-height: initial;
|
|
}
|
|
.ui-dialog .charactersheet .tab.character .attribute_section {
|
|
margin: 1rem 0;
|
|
}
|
|
.ui-dialog .charactersheet .bioSection {
|
|
order: -2;
|
|
z-index: -1;
|
|
margin: 0;
|
|
}
|
|
.ui-dialog .charactersheet .attribute_section {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: 2rem;
|
|
}
|
|
.ui-dialog .charactersheet .attribute_section [class*=segment] {
|
|
width: 100%;
|
|
position: unset;
|
|
inset: 0;
|
|
transform: unset;
|
|
grid-row: auto;
|
|
grid-column: auto;
|
|
grid-template-columns: 1fr 1fr;
|
|
min-width: 125px;
|
|
gap: 1rem;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
.ui-dialog .charactersheet .attribute_section [class*=segment] .skill_button {
|
|
display: flex;
|
|
}
|
|
.ui-dialog .charactersheet .attribute_section [class*=segment] .skill_button label.__big {
|
|
position: relative;
|
|
transform: unset;
|
|
order: 1;
|
|
}
|
|
.ui-dialog .charactersheet .attribute_section [class*=segment] .skill_button:first-of-type {
|
|
border-left: 2px dotted var(--contentBackColor);
|
|
}
|
|
.ui-dialog .charactersheet .attribute_section [class*=segment] .skill_button:first-of-type::before {
|
|
margin-left: 1rem;
|
|
}
|
|
.ui-dialog .charactersheet .attribute_section [class*=segment] .skill_button h3 {
|
|
text-align: center;
|
|
}
|
|
.ui-dialog .charactersheet .resolve-radiation {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: 0.5rem;
|
|
}
|
|
.ui-dialog .charactersheet .Health,
|
|
.ui-dialog .charactersheet .Radiation,
|
|
.ui-dialog .charactersheet .Resolve,
|
|
.ui-dialog .charactersheet .Story_Points,
|
|
.ui-dialog .charactersheet .Tiny_Items,
|
|
.ui-dialog .charactersheet .Critical_Injuries {
|
|
width: 100%;
|
|
transition: all 300ms ease-in-out;
|
|
}
|
|
}
|
|
@media (max-width: 700px) {
|
|
.tab.character {
|
|
padding-top: 0px;
|
|
border: none;
|
|
grid-template-columns: 1fr;
|
|
}
|
|
.tab.character .Consumables {
|
|
order: 2;
|
|
}
|
|
.tab.character .box :is(.underlay, .overlay) {
|
|
padding: 5px 10px 10px 10px;
|
|
}
|
|
.tab.character::before {
|
|
content: none;
|
|
}
|
|
}
|
|
.ui-dialog .charactersheet .tab.ship {
|
|
display: grid;
|
|
grid-auto-flow: column;
|
|
grid-template-columns: 1fr;
|
|
grid-template-rows: auto auto;
|
|
gap: 2rem 1rem;
|
|
perspective: 800px;
|
|
}
|
|
.ui-dialog .charactersheet .tab.ship h2 {
|
|
position: absolute;
|
|
left: 50%;
|
|
top: 10px;
|
|
font-size: 8px;
|
|
text-align: center;
|
|
line-height: 1;
|
|
transform: translateX(-50%);
|
|
color: var(--headColor);
|
|
}
|
|
.ui-dialog .charactersheet .ship_top {
|
|
display: grid;
|
|
gap: 1rem;
|
|
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
|
}
|
|
.ui-dialog .charactersheet .ship_modules {
|
|
display: grid;
|
|
grid-template-columns: 1fr;
|
|
grid-template-rows: 1fr auto;
|
|
gap: 5px;
|
|
}
|
|
.ui-dialog .charactersheet .ship_modules .Lease_Cost {
|
|
margin-top: 15px;
|
|
}
|
|
.ui-dialog .charactersheet .ship_information {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
isolation: isolate;
|
|
}
|
|
.ui-dialog .charactersheet .ship_information .camelBox {
|
|
grid-column: 1/-1;
|
|
}
|
|
.ui-dialog .charactersheet .ship_information .camelBox:nth-of-type(1) {
|
|
width: calc(100% - 30px);
|
|
}
|
|
.ui-dialog .charactersheet .ship_information .camelBox:nth-of-type(2) {
|
|
width: calc(100% - 50px);
|
|
}
|
|
.ui-dialog .charactersheet .ship_information .camelBox:nth-of-type(3) {
|
|
width: calc(100% - 70px);
|
|
}
|
|
.ui-dialog .charactersheet .ship_information .camelBox:nth-of-type(4) {
|
|
padding: 2px 10px 2px 10px;
|
|
}
|
|
.ui-dialog .charactersheet .ship_bottom {
|
|
display: grid;
|
|
gap: 5px 1rem;
|
|
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
|
|
grid-template-rows: auto auto;
|
|
}
|
|
.ui-dialog .charactersheet .multibox.crew-positions, .ui-dialog .charactersheet .multibox.crew-positions .input_row {
|
|
grid-template-columns: 1fr 15rem 4rem 2fr;
|
|
}
|
|
.ui-dialog .charactersheet .multibox.Internal_Modules, .ui-dialog .charactersheet .multibox.Internal_Modules .input_row {
|
|
grid-template-columns: 1fr 30px 30px;
|
|
}
|
|
.ui-dialog .charactersheet .multibox.Internal_Modules > input, .ui-dialog .charactersheet .multibox.Internal_Modules .input_row > input {
|
|
width: 20px !important;
|
|
}
|
|
.ui-dialog .charactersheet .multibox.Ships_Log, .ui-dialog .charactersheet .multibox.Ships_Log .input_row {
|
|
grid-template-columns: 1fr 2fr;
|
|
}
|
|
.ui-dialog .charactersheet .multibox.component_damage,
|
|
.ui-dialog .charactersheet .multibox.component_damage .input_row:not(.expanded) {
|
|
grid-template-columns: 1fr repeat(2, 10rem);
|
|
}
|
|
.ui-dialog .charactersheet .multibox.component_damage .input_row.expanded {
|
|
grid-template-columns: repeat(2, 1fr);
|
|
}
|
|
.ui-dialog .charactersheet .multibox.Upgrades, .ui-dialog .charactersheet .multibox.Upgrades .input_row {
|
|
grid-template-columns: 4rem 1fr 2fr;
|
|
}
|
|
.ui-dialog .charactersheet .multibox.Armaments, .ui-dialog .charactersheet .multibox.Armaments .input_row {
|
|
grid-template-columns: 1fr repeat(2, 50px) 70px 50px;
|
|
}
|
|
.ui-dialog .charactersheet .left_attributes, .ui-dialog .charactersheet .right_attributes {
|
|
display: flex;
|
|
margin: 5px;
|
|
flex-direction: column;
|
|
gap: 5px;
|
|
}
|
|
.ui-dialog .charactersheet .left_attributes .skill_button:nth-of-type(1), .ui-dialog .charactersheet .right_attributes .skill_button:nth-of-type(1) {
|
|
width: 100%;
|
|
}
|
|
.ui-dialog .charactersheet .left_attributes .skill_button:nth-of-type(2), .ui-dialog .charactersheet .right_attributes .skill_button:nth-of-type(2) {
|
|
width: 80%;
|
|
}
|
|
.ui-dialog .charactersheet .left_attributes .skill_button:nth-of-type(3), .ui-dialog .charactersheet .right_attributes .skill_button:nth-of-type(3) {
|
|
width: 100%;
|
|
}
|
|
.ui-dialog .charactersheet .left_attributes .skill_button:nth-of-type(4), .ui-dialog .charactersheet .right_attributes .skill_button:nth-of-type(4) {
|
|
width: 70%;
|
|
}
|
|
.ui-dialog .charactersheet .left_attributes {
|
|
align-items: flex-end;
|
|
}
|
|
.ui-dialog .charactersheet .right_attributes .skill_button {
|
|
flex-direction: row-reverse;
|
|
}
|
|
.ui-dialog .charactersheet .skill_button {
|
|
display: flex;
|
|
}
|
|
|
|
.tab.npc.npc {
|
|
display: block;
|
|
}
|
|
.tab.npc.npc .portrait.portrait {
|
|
float: right;
|
|
width: clamp(100px, 40%, 240px);
|
|
min-height: 200px;
|
|
margin: 2rem 0 0rem 2rem;
|
|
--border: var(--sheetBackColor);
|
|
filter: drop-shadow(0 0 1px var(--border)) drop-shadow(0 0 0px var(--border)) drop-shadow(0 0 0px var(--border)) drop-shadow(0 0 0px var(--border)) drop-shadow(0 0 0px var(--border)) drop-shadow(0 0 0px var(--border)) drop-shadow(0 0 0px var(--border));
|
|
background-color: var(--border);
|
|
}
|
|
.tab.npc.npc .portrait.portrait:not([src]):not([src=""]) {
|
|
--stripeSize: 20px;
|
|
background: repeating-linear-gradient(-45deg, var(--border), var(--border) calc(var(--stripeSize) * 2), var(--hoverHighlight) calc(var(--stripeSize) * 2), var(--hoverHighlight) calc(var(--stripeSize) * 2 + var(--stripeSize)));
|
|
}
|
|
.tab.npc.npc .attribute_section {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: 2rem;
|
|
margin-top: 2rem;
|
|
}
|
|
.tab.npc.npc .attribute_section [class*=segment] {
|
|
display: flex;
|
|
flex-direction: row;
|
|
flex-wrap: wrap;
|
|
width: 100%;
|
|
position: unset;
|
|
inset: 0;
|
|
transform: unset;
|
|
grid-row: auto;
|
|
grid-column: auto;
|
|
grid-template-columns: 1fr 1fr;
|
|
min-width: 125px;
|
|
gap: 1rem;
|
|
display: flex;
|
|
}
|
|
.tab.npc.npc .input_row {
|
|
justify-content: flex-start;
|
|
}
|
|
.tab.npc.npc .input_row .reveal {
|
|
cursor: pointer;
|
|
}
|
|
.tab.npc.npc .input_row .reveal:not(:checked) ~ input[type=hidden]:is([value="0"], :not([value])) + .skill_button {
|
|
display: none;
|
|
}
|
|
.tab.npc.npc .skill_button.skill_button {
|
|
display: flex;
|
|
min-height: unset;
|
|
justify-content: space-between;
|
|
}
|
|
.tab.npc.npc .skill_button.skill_button::before {
|
|
background: var(--buttonBackColor);
|
|
}
|
|
.tab.npc.npc .skill_button.skill_button:hover {
|
|
filter: none;
|
|
}
|
|
.tab.npc.npc .skill_button.skill_button button {
|
|
width: auto;
|
|
padding: 0;
|
|
flex: 1;
|
|
}
|
|
.tab.npc.npc .skill_button.skill_button button:hover {
|
|
background: var(--hoverHighlightBack);
|
|
}
|
|
.tab.npc.npc .skill_button.skill_button button:hover h3 {
|
|
color: var(--buttonBackColor);
|
|
}
|
|
.tab.npc.npc .skill_button.skill_button button:active {
|
|
background: var(--hoverHighlight);
|
|
}
|
|
.tab.npc.npc .skill_button.skill_button label.__big {
|
|
position: relative;
|
|
margin: 0 0.25em 0 0;
|
|
line-height: 1;
|
|
transform: unset;
|
|
order: 1;
|
|
}
|
|
.tab.npc.npc .skill_button.skill_button label.__big::before, .tab.npc.npc .skill_button.skill_button label.__big::after {
|
|
content: unset;
|
|
}
|
|
.tab.npc.npc .skill_button.skill_button label.__big input {
|
|
font-size: 12px;
|
|
line-height: 1;
|
|
width: 15px;
|
|
color: var(--brightTextColor);
|
|
}
|
|
.tab.npc.npc .skill_button.skill_button label.__big:focus, .tab.npc.npc .skill_button.skill_button label.__big:focus-within, .tab.npc.npc .skill_button.skill_button label.__big:hover {
|
|
background: var(--hoverHighlightBack);
|
|
}
|
|
.tab.npc.npc .skill_button.skill_button label.__big:focus input, .tab.npc.npc .skill_button.skill_button label.__big:focus-within input, .tab.npc.npc .skill_button.skill_button label.__big:hover input {
|
|
color: var(--inputHighlight);
|
|
}
|
|
.tab.npc.npc .skill_button.skill_button h3 {
|
|
color: var(--headTextColor);
|
|
text-align: center;
|
|
width: max-content;
|
|
margin: 0 0.5em;
|
|
}
|
|
.tab.npc.npc .inline_repeating + fieldset + .repcontainer {
|
|
display: contents;
|
|
flex-wrap: wrap;
|
|
gap: 1ch 0.25em;
|
|
}
|
|
.tab.npc.npc .inline_repeating + fieldset + .repcontainer .repitem {
|
|
display: inline-block;
|
|
margin: 2px;
|
|
}
|
|
.tab.npc.npc .inline_repeating + fieldset + .repcontainer .repitem h3 {
|
|
font-family: var(--font-thin-header);
|
|
font-size: 12px;
|
|
color: var(--headTextColor);
|
|
margin-right: 1rem;
|
|
line-height: 1.5;
|
|
height: min-content;
|
|
}
|
|
.tab.npc.npc .inline_repeating ~ .repcontrol {
|
|
display: inline-flex;
|
|
margin-left: 0.25em;
|
|
}
|
|
.tab.npc.npc .repeating_gear + div .repitem {
|
|
background: var(--expandBorderColor);
|
|
border-radius: 20px;
|
|
padding: 0 1ch;
|
|
}
|
|
|
|
.charactersheet .hostile.hostile {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
grid-template-rows: auto auto auto auto 1fr;
|
|
grid-template-areas: "name combat" "attributes attacks" "information attacks" "containment attacks" "abilities attacks";
|
|
}
|
|
.charactersheet .hostile.hostile .name {
|
|
isolation: isolate;
|
|
}
|
|
.charactersheet .hostile.hostile .expanded {
|
|
margin-top: 0.5rem;
|
|
}
|
|
.charactersheet .hostile.hostile .multibox {
|
|
align-self: start;
|
|
}
|
|
.charactersheet .hostile.hostile .repcontainer {
|
|
display: grid;
|
|
gap: 0.5rem;
|
|
}
|
|
.charactersheet .hostile.hostile .multibox.attack_table, .charactersheet .hostile.hostile .multibox.attack_table .input_row {
|
|
grid-template-columns: 30px 50px 1fr 50px 50px;
|
|
}
|
|
.charactersheet .hostile.hostile .multibox.ability_table, .charactersheet .hostile.hostile .multibox.ability_table .input_row {
|
|
grid-template-columns: 30px 1fr;
|
|
}
|
|
.charactersheet .hostile.hostile textarea {
|
|
line-height: 1.2;
|
|
}
|
|
.charactersheet .hostile.hostile .roll_icon {
|
|
z-index: 1;
|
|
}
|
|
.charactersheet .hostile.hostile .skill_button label {
|
|
order: 2;
|
|
}
|
|
.charactersheet .hostile.hostile .skill_button h3 {
|
|
flex: 1;
|
|
font-size: 14px;
|
|
font-family: var(--font-type);
|
|
}
|
|
.charactersheet .hostile.hostile .camelBox:nth-of-type(1) {
|
|
grid-area: name;
|
|
}
|
|
.charactersheet .hostile.hostile .camelBox:nth-of-type(2) {
|
|
grid-area: stage;
|
|
}
|
|
.charactersheet .hostile.hostile .Health {
|
|
width: unset;
|
|
margin-bottom: 1rem;
|
|
}
|
|
.charactersheet .hostile.hostile .Health .border {
|
|
display: block;
|
|
justify-content: space-between;
|
|
}
|
|
.charactersheet .hostile.hostile .Health .border input {
|
|
font-family: var(--font-thin-header);
|
|
font-size: 18px;
|
|
}
|
|
.charactersheet .hostile.hostile .attributes {
|
|
grid-area: attributes;
|
|
margin: 0;
|
|
display: grid;
|
|
gap: 1.5rem;
|
|
}
|
|
.charactersheet .hostile.hostile .combat_stats {
|
|
grid-area: combat;
|
|
}
|
|
.charactersheet .hostile.hostile .Information {
|
|
grid-area: information;
|
|
}
|
|
.charactersheet .hostile.hostile .Containment_and_Termination_Protocols {
|
|
grid-area: containment;
|
|
}
|
|
.charactersheet .hostile.hostile .attack_table {
|
|
grid-area: attacks;
|
|
}
|
|
.charactersheet .hostile.hostile .attack_table .roll {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
height: 100%;
|
|
width: 100%;
|
|
padding: 0;
|
|
margin: 0;
|
|
border: none;
|
|
background: none;
|
|
}
|
|
.charactersheet .hostile.hostile .attack_table .roll input {
|
|
flex: 0;
|
|
font-size: 24px;
|
|
width: 100% !important;
|
|
}
|
|
.charactersheet .hostile.hostile .attack_table .roll * {
|
|
align-self: center;
|
|
}
|
|
|
|
.tab.vehicle {
|
|
gap: 1rem;
|
|
}
|
|
.tab.vehicle .camelBox {
|
|
display: grid;
|
|
}
|
|
.tab.vehicle .attributes {
|
|
display: grid;
|
|
gap: 5px 1rem;
|
|
grid-template-columns: 1fr 1fr;
|
|
margin: 0;
|
|
}
|
|
.tab.vehicle .attributes .skill_button:nth-child(odd) label.__big {
|
|
order: 2;
|
|
}
|
|
.tab.vehicle .attributes .skill_button:nth-child(n+2):nth-child(-n+3) {
|
|
width: 80%;
|
|
}
|
|
.tab.vehicle .attributes .skill_button:nth-child(2) {
|
|
place-self: flex-end;
|
|
}
|
|
.tab.vehicle .attributes .camelBox, .tab.vehicle .attributes .__passengers {
|
|
grid-column: 1/-1;
|
|
}
|
|
.tab.vehicle .vehicle_top {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: 1rem;
|
|
}
|
|
.tab.vehicle .vehicle_bottom {
|
|
grid-column: span 2;
|
|
}
|
|
.tab.vehicle .vehicle_damage {
|
|
place-self: center;
|
|
}
|
|
.tab.vehicle .multibox.Armaments, .tab.vehicle .multibox.Armaments .input_row {
|
|
grid-template-columns: 1fr repeat(2, 50px) minmax(auto, 100px);
|
|
}
|
|
.tab.vehicle .multibox.Armaments .repcontainer,
|
|
.tab.vehicle .multibox.Armaments .repitem, .tab.vehicle .multibox.Armaments .input_row .repcontainer,
|
|
.tab.vehicle .multibox.Armaments .input_row .repitem {
|
|
display: grid;
|
|
grid-template-columns: subgrid;
|
|
grid-column: 1/-1;
|
|
}
|
|
.tab.vehicle .multibox.Armaments .input_row:not(:last-child), .tab.vehicle .multibox.Armaments .input_row .input_row:not(:last-child) {
|
|
display: contents;
|
|
}
|
|
.tab.vehicle .multibox.Armaments select, .tab.vehicle .multibox.Armaments .input_row select {
|
|
border: none !important;
|
|
outline: none;
|
|
height: 20px;
|
|
box-sizing: border-box;
|
|
justify-self: center;
|
|
}
|
|
.tab.vehicle .multibox.Component_Damage, .tab.vehicle .multibox.Component_Damage .input_row {
|
|
display: grid;
|
|
grid-template-columns: 1fr 2fr;
|
|
gap: 0.5rem;
|
|
}
|
|
|
|
.ui-dialog .charactersheet .initiative {
|
|
display: grid;
|
|
grid-template-columns: auto 1fr;
|
|
}
|
|
.ui-dialog .charactersheet .initiative button {
|
|
position: relative;
|
|
display: grid;
|
|
place-items: center;
|
|
padding: 1rem;
|
|
margin: 0;
|
|
height: 2em;
|
|
aspect-ratio: 1;
|
|
}
|
|
.ui-dialog .charactersheet .initiative button::after {
|
|
position: absolute;
|
|
content: "";
|
|
background: var(--contentBackColor);
|
|
border: 2px solid var(--lightBorderColor);
|
|
inset: 0;
|
|
rotate: 45deg;
|
|
z-index: -1;
|
|
}
|
|
.ui-dialog .charactersheet .initiative button:hover {
|
|
--_filter0: drop-shadow(0px 0 0px var(--hoverHighlight));
|
|
filter: drop-shadow(0 0 2px var(--hoverHighlight)) var(--_filter0) var(--_filter0) var(--_filter0) var(--_filter0);
|
|
}
|
|
.ui-dialog .charactersheet .initiative button:active {
|
|
background: radial-gradient(var(--hoverHighlight), transparent);
|
|
}
|
|
.ui-dialog .charactersheet .initiative button:active h3 {
|
|
color: var(--activeTextColor);
|
|
}
|
|
.ui-dialog .charactersheet .initiative .initiative {
|
|
position: relative;
|
|
top: 2rem;
|
|
}
|
|
.ui-dialog .charactersheet .initiative .initiative button:last-child {
|
|
width: 1em;
|
|
height: 1em;
|
|
top: calc(2em + 8px);
|
|
right: calc(1em - 8px);
|
|
}
|
|
.ui-dialog .charactersheet .initiative .Results .border {
|
|
display: flex;
|
|
justify-content: space-around;
|
|
min-height: 6em;
|
|
}
|
|
.ui-dialog .charactersheet .initiative .Results .border button {
|
|
top: 2rem;
|
|
}
|
|
.ui-dialog .charactersheet .initiative .Results .border button::after {
|
|
background-color: var(--col-alien-deep);
|
|
}
|
|
.ui-dialog .charactersheet .initiative .Results .border h3 {
|
|
font-size: 3em;
|
|
color: var(--activeTextColor);
|
|
}
|
|
|
|
.sheet-rolltemplate-alien.sheet-rolltemplate-alien {
|
|
background: var(--sheetBackground);
|
|
color: var(--templateTextColor);
|
|
border-radius: 1rem;
|
|
padding: 1rem 2rem 2rem 2rem;
|
|
z-index: 1;
|
|
clip-path: polygon(20px 0, calc(100% - 5px) 0%, 100% 5px, 100% calc(100% - 5px), calc(100% - 5px) 100%, calc(50% + 10px) 100%, 50% calc(100% - 10px), 10px calc(100% - 10px), 0% calc(100% - 18px), 0 15px);
|
|
margin-left: -40px;
|
|
}
|
|
.sheet-rolltemplate-alien.sheet-rolltemplate-alien:not(:first-child) {
|
|
margin-top: 10px;
|
|
}
|
|
.sheet-rolltemplate-alien.sheet-rolltemplate-alien h3 {
|
|
font-weight: normal;
|
|
font-family: var(--font-type);
|
|
color: var(--headTextColor);
|
|
}
|
|
.sheet-rolltemplate-alien.sheet-rolltemplate-alien .sheet-body {
|
|
position: relative;
|
|
padding: 1rem;
|
|
}
|
|
.sheet-rolltemplate-alien.sheet-rolltemplate-alien .sheet-body .sheet-computed-text .inlinerollresult {
|
|
background-color: transparent;
|
|
padding: 0;
|
|
aspect-ratio: auto;
|
|
height: auto;
|
|
text-align: center;
|
|
font-family: inherit;
|
|
display: inline;
|
|
white-space: pre-wrap;
|
|
text-align: left;
|
|
}
|
|
.sheet-rolltemplate-alien.sheet-rolltemplate-alien .sheet-body .sheet-hide-if-no-buttons:not(:has(a)) {
|
|
display: none;
|
|
}
|
|
.sheet-rolltemplate-alien.sheet-rolltemplate-alien .sheet-body::before {
|
|
position: absolute;
|
|
inset: 0;
|
|
content: "";
|
|
--border-width: 4px;
|
|
border: var(--border-width) double var(--templateBorder);
|
|
clip-path: polygon(0 0, 100% 0, 100% 2rem, calc(100% - var(--border-width)) 2rem, calc(100% - var(--border-width)) calc(100% - 2rem), 100% calc(100% - 2rem), 100% 100%, 0 100%, 0 calc(100% - 2rem), var(--border-width) calc(100% - 2rem), var(--border-width) 2rem, 0 2rem);
|
|
z-index: -1;
|
|
}
|
|
.sheet-rolltemplate-alien.sheet-rolltemplate-alien .sheet-body::after {
|
|
position: absolute;
|
|
content: "";
|
|
top: 0;
|
|
bottom: 0;
|
|
width: 2px;
|
|
right: -1rem;
|
|
background: var(--warningColor);
|
|
animation-name: alert;
|
|
animation-duration: 5s;
|
|
animation-timing-function: ease-out;
|
|
animation-delay: 2s;
|
|
animation-fill-mode: forwards;
|
|
}
|
|
@keyframes alert {
|
|
from {
|
|
top: 0%;
|
|
}
|
|
to {
|
|
top: 100%;
|
|
}
|
|
}
|
|
.sheet-rolltemplate-alien.sheet-rolltemplate-alien::before {
|
|
content: "";
|
|
position: absolute;
|
|
inset: 0;
|
|
background: var(--sheetPulseBackground);
|
|
opacity: 0;
|
|
transition: opacity 300ms;
|
|
z-index: -1;
|
|
}
|
|
.sheet-rolltemplate-alien.sheet-rolltemplate-alien .sheet-character_name {
|
|
all: unset;
|
|
}
|
|
.sheet-rolltemplate-alien.sheet-rolltemplate-alien .sheet-character_name a {
|
|
color: var(--linkColor);
|
|
}
|
|
.sheet-rolltemplate-alien.sheet-rolltemplate-alien .sheet-title {
|
|
position: relative;
|
|
background: linear-gradient(to right, transparent 0%, var(--col-alien-black) 2rem, var(--col-alien-black) calc(100% - 2rem), transparent 100%);
|
|
text-transform: uppercase;
|
|
top: auto;
|
|
left: auto;
|
|
font-size: 1.5em;
|
|
line-height: 0.8;
|
|
margin: 0 -1rem;
|
|
padding-left: 1rem;
|
|
text-align: left;
|
|
font-family: var(--font-type);
|
|
color: var(--templateTextColor);
|
|
transform: unset;
|
|
}
|
|
.sheet-rolltemplate-alien.sheet-rolltemplate-alien .sheet-push {
|
|
font-family: var(--font-icon);
|
|
}
|
|
.sheet-rolltemplate-alien.sheet-rolltemplate-alien .sheet-push::after {
|
|
content: "refresh";
|
|
}
|
|
.sheet-rolltemplate-alien.sheet-rolltemplate-alien .sheet-results {
|
|
background-color: var(--sectionBackColor);
|
|
background-clip: padding-box;
|
|
position: relative;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
justify-content: space-around;
|
|
gap: 5px;
|
|
padding: 1rem;
|
|
margin: 1.5rem 1rem;
|
|
}
|
|
.sheet-rolltemplate-alien.sheet-rolltemplate-alien .sheet-results + .sheet-results {
|
|
margin-top: 1.9rem;
|
|
}
|
|
.sheet-rolltemplate-alien.sheet-rolltemplate-alien .sheet-results::before {
|
|
position: absolute;
|
|
inset: -1rem;
|
|
content: "";
|
|
--border-width: 2px;
|
|
border: 1px solid var(--templateBorder);
|
|
clip-path: polygon(0 0, 2rem 0, 2rem var(--border-width), calc(100% - 2rem) var(--border-width), calc(100% - 2rem) 0, 100% 0, 100% 100%, calc(100% - 2rem) 100%, calc(100% - 2rem) calc(100% - var(--border-width)), 2rem calc(100% - var(--border-width)), 2rem 100%, 0 100%);
|
|
z-index: -1;
|
|
}
|
|
.sheet-rolltemplate-alien.sheet-rolltemplate-alien .sheet-results .inlinerollresult {
|
|
display: grid;
|
|
place-content: center;
|
|
font-size: 1em;
|
|
line-height: 0.9;
|
|
position: relative;
|
|
padding: 2px;
|
|
color: var(--templateTextColor);
|
|
height: 24px;
|
|
aspect-ratio: 1;
|
|
border: none;
|
|
border-radius: 6px;
|
|
background: var(--col-alien-black);
|
|
text-align: center;
|
|
font-family: var(--font-thick-header);
|
|
font-weight: normal;
|
|
}
|
|
.sheet-rolltemplate-alien.sheet-rolltemplate-alien .sheet-results .inlinerollresult::after {
|
|
position: absolute;
|
|
inset: 2px;
|
|
content: "";
|
|
}
|
|
.sheet-rolltemplate-alien.sheet-rolltemplate-alien .sheet-results .inlinerollresult[original-title*="computed value"], .sheet-rolltemplate-alien.sheet-rolltemplate-alien .sheet-results .inlinerollresult[title*="computed value"] {
|
|
pointer-events: none;
|
|
}
|
|
.sheet-rolltemplate-alien.sheet-rolltemplate-alien .sheet-results:not(.sheet-plain) .inlinerollresult.fullcrit, .sheet-rolltemplate-alien.sheet-rolltemplate-alien .sheet-results:not(.sheet-plain) .inlinerollresult[original-title="Rolling 6 = 6"], .sheet-rolltemplate-alien.sheet-rolltemplate-alien .sheet-results:not(.sheet-plain) .inlinerollresult[title="Rolling 6 = 6"] {
|
|
order: 1;
|
|
color: transparent;
|
|
}
|
|
.sheet-rolltemplate-alien.sheet-rolltemplate-alien .sheet-results:not(.sheet-plain) .inlinerollresult.fullcrit::after, .sheet-rolltemplate-alien.sheet-rolltemplate-alien .sheet-results:not(.sheet-plain) .inlinerollresult[original-title="Rolling 6 = 6"]::after, .sheet-rolltemplate-alien.sheet-rolltemplate-alien .sheet-results:not(.sheet-plain) .inlinerollresult[title="Rolling 6 = 6"]::after {
|
|
background: var(--img-dice-success);
|
|
background-size: contain;
|
|
}
|
|
.sheet-rolltemplate-alien.sheet-rolltemplate-alien .sheet-results a {
|
|
background-color: var(--linkColor);
|
|
text-transform: uppercase;
|
|
color: var(--aColor);
|
|
}
|
|
.sheet-rolltemplate-alien.sheet-rolltemplate-alien .sheet-results .sheet-dice,
|
|
.sheet-rolltemplate-alien.sheet-rolltemplate-alien .sheet-results .sheet-stress {
|
|
display: contents;
|
|
}
|
|
.sheet-rolltemplate-alien.sheet-rolltemplate-alien .sheet-stress,
|
|
.sheet-rolltemplate-alien.sheet-rolltemplate-alien .sheet-base {
|
|
display: contents;
|
|
}
|
|
.sheet-rolltemplate-alien.sheet-rolltemplate-alien .sheet-base .inlinerollresult:not(.fullcrit):not([original-title="Rolling 6 = 6"]):not([title="Rolling 6 = 6"]) {
|
|
order: 2;
|
|
}
|
|
.sheet-rolltemplate-alien.sheet-rolltemplate-alien .sheet-base .inlinerollresult.fullcrit::after, .sheet-rolltemplate-alien.sheet-rolltemplate-alien .sheet-base .inlinerollresult[original-title="Rolling 6 = 6"]::after, .sheet-rolltemplate-alien.sheet-rolltemplate-alien .sheet-base .inlinerollresult[title="Rolling 6 = 6"]::after {
|
|
filter: invert(1);
|
|
}
|
|
.sheet-rolltemplate-alien.sheet-rolltemplate-alien .sheet-dice.sheet-dice span.inlinerollresult {
|
|
font-family: var(--font-thick-header);
|
|
font-size: 1em;
|
|
line-height: 1.5;
|
|
}
|
|
.sheet-rolltemplate-alien.sheet-rolltemplate-alien .sheet-stress span.inlinerollresult {
|
|
background: var(--warningColor);
|
|
}
|
|
.sheet-rolltemplate-alien.sheet-rolltemplate-alien .sheet-stress span.inlinerollresult.fullcrit {
|
|
order: 1;
|
|
}
|
|
.sheet-rolltemplate-alien.sheet-rolltemplate-alien .sheet-stress span.inlinerollresult.fullcrit::after {
|
|
filter: unset;
|
|
}
|
|
.sheet-rolltemplate-alien.sheet-rolltemplate-alien .sheet-stress span.inlinerollresult.fullfail, .sheet-rolltemplate-alien.sheet-rolltemplate-alien .sheet-stress span.inlinerollresult[original-title="Rolling 1 = 1"], .sheet-rolltemplate-alien.sheet-rolltemplate-alien .sheet-stress span.inlinerollresult[title="Rolling 1 = 1"] {
|
|
order: 3;
|
|
color: transparent;
|
|
}
|
|
.sheet-rolltemplate-alien.sheet-rolltemplate-alien .sheet-stress span.inlinerollresult.fullfail::after, .sheet-rolltemplate-alien.sheet-rolltemplate-alien .sheet-stress span.inlinerollresult[original-title="Rolling 1 = 1"]::after, .sheet-rolltemplate-alien.sheet-rolltemplate-alien .sheet-stress span.inlinerollresult[title="Rolling 1 = 1"]::after {
|
|
background: var(--img-dice-panic);
|
|
background-size: contain;
|
|
}
|
|
.sheet-rolltemplate-alien.sheet-rolltemplate-alien .sheet-stress span.inlinerollresult:not(.fullfail):not(.fullcrit):not([original-title="Rolling 6 = 6"]):not([title="Rolling 6 = 6"]):not([original-title="Rolling 1 = 1"]):not([title="Rolling 1 = 1"]) {
|
|
order: 2;
|
|
color: var(--stressDiceTextColor);
|
|
}
|
|
.sheet-rolltemplate-alien.sheet-rolltemplate-alien .sheet-plain span.inlinerollresult.fullcrit {
|
|
color: var(--critColor);
|
|
}
|
|
.sheet-rolltemplate-alien.sheet-rolltemplate-alien .sheet-plain span.inlinerollresult.fullcrit::after {
|
|
display: none;
|
|
}
|
|
|
|
@supports (scrollbar-color: auto) {
|
|
.ui-dialog {
|
|
scrollbar-color: var(--scrollColor) transparent;
|
|
}
|
|
}
|
|
@supports not (scrollbar-color: auto) {
|
|
.ui-dialog::-webkit-scrollbar,
|
|
.ui-dialog *::-webkit-scrollbar {
|
|
width: 5px;
|
|
}
|
|
.ui-dialog::-webkit-scrollbar-track,
|
|
.ui-dialog *::-webkit-scrollbar-track {
|
|
background-color: transparent;
|
|
}
|
|
.ui-dialog::-webkit-scrollbar-thumb,
|
|
.ui-dialog *::-webkit-scrollbar-thumb {
|
|
background-color: var(--scrollColor);
|
|
border-radius: 0;
|
|
border: none;
|
|
}
|
|
.ui-dialog *:hover::-webkit-scrollbar-thumb {
|
|
background-color: var(--scrollHighlight);
|
|
box-shadow: 0 0 5px var(--hoverHighlightBack);
|
|
}
|
|
}
|
|
|
|
.ui-dialog .tab-content .charsheet .tabs__container:not(.k-active-tab) {
|
|
display: none !important;
|
|
}
|
|
.ui-dialog .tab-content .charsheet .tabs__nav-item {
|
|
list-style: none;
|
|
}
|
|
.ui-dialog .tab-content .charsheet .tabs__nav-list {
|
|
display: flex;
|
|
}
|
|
.ui-dialog .tab-content .charsheet .second-row {
|
|
margin-top: 5px;
|
|
}
|
|
.ui-dialog .tab-content .charsheet .death-roll {
|
|
position: absolute;
|
|
translate: 0 -100%;
|
|
}
|
|
.ui-dialog .tab-content .charsheet .dual-number {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1ch 1fr;
|
|
place-items: center;
|
|
}
|
|
.ui-dialog .tab-content .charsheet .dual-number input:last-child {
|
|
grid-column: 3;
|
|
}
|
|
.ui-dialog .tab-content .charsheet .tabs__nav-list {
|
|
list-style: none;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: var(--half-gap);
|
|
}
|
|
.ui-dialog .tab-content .charsheet .compendium-required:not(.active) {
|
|
display: none !important;
|
|
}
|
|
.ui-dialog .tab-content .charsheet .colon:after {
|
|
content: ":";
|
|
margin-left: var(--tiny-gap);
|
|
}
|
|
.ui-dialog .tab-content .charsheet *:has(> .camelBox) {
|
|
isolation: isolate;
|
|
}
|
|
.ui-dialog .tab-content .charsheet .tooltip-container {
|
|
display: grid;
|
|
position: relative;
|
|
grid-template-areas: "content";
|
|
}
|
|
.ui-dialog .tab-content .charsheet .tooltip-container > * {
|
|
grid-area: content;
|
|
}
|
|
.ui-dialog .tab-content .charsheet .tooltip-container:is(:hover, :focus, :focus-within) .tooltip-target,
|
|
.ui-dialog .tab-content .charsheet .tooltip-container .tooltip-target:is(:hover, :focus, :focus-within) {
|
|
z-index: 10;
|
|
opacity: 1;
|
|
transition: 1s 250ms opacity ease-in-out;
|
|
pointer-events: initial;
|
|
}
|
|
.ui-dialog .tab-content .charsheet .tooltip-target {
|
|
pointer-events: none;
|
|
position: absolute !important;
|
|
bottom: calc(100% - 10px);
|
|
justify-self: center;
|
|
opacity: 0;
|
|
z-index: -100;
|
|
width: 200px;
|
|
height: max-content;
|
|
transition: 1s 250ms opacity ease-in-out, 250ms 1s z-index ease-in-out, 250ms 1s pointer-events ease-in-out;
|
|
}
|
|
.ui-dialog .tab-content .charsheet .tooltip-target:is(:before, :after) {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
.ui-dialog .tab-content .charsheet .tooltip-target textarea,
|
|
.ui-dialog .tab-content .charsheet .tooltip-target span {
|
|
padding-left: 20px !important;
|
|
max-height: 9rem;
|
|
}
|
|
.ui-dialog .tab-content .charsheet .tooltip-target:is(:hover, :focus, :focus-within), .ui-dialog .tab-content .charsheet .tooltip-target :is(:hover, :focus, :focus-within) {
|
|
box-shadow: none !important;
|
|
}
|
|
.ui-dialog .tab-content .charsheet [hidden] {
|
|
display: none !important;
|
|
}
|
|
.ui-dialog .tab-content .charsheet button,
|
|
.ui-dialog .tab-content .charsheet input:is([type=checkbox], [type=radio]) {
|
|
cursor: pointer;
|
|
}
|
|
.ui-dialog .tab-content .charsheet .roller {
|
|
margin: 0;
|
|
}
|
|
.ui-dialog .tab-content .charsheet .no-list {
|
|
list-style: none;
|
|
}
|
|
.ui-dialog .tab-content .charsheet .span-all {
|
|
grid-column: 1/-1;
|
|
}
|
|
.ui-dialog .tab-content .charsheet input:placeholder-shown {
|
|
text-transform: capitalize;
|
|
}
|
|
.ui-dialog .tab-content .charsheet .uppercase {
|
|
text-transform: uppercase !important;
|
|
}
|
|
.ui-dialog .tab-content .charsheet .margin-justify-right {
|
|
margin-left: auto;
|
|
}
|
|
.ui-dialog .tab-content .charsheet .roller {
|
|
display: flex;
|
|
gap: 0.5rem;
|
|
}
|
|
.ui-dialog .tab-content .charsheet .justify-self-center {
|
|
justify-self: center;
|
|
}
|
|
.ui-dialog .tab-content .charsheet .justify-content-space-between {
|
|
justify-content: space-between;
|
|
}
|
|
.ui-dialog .tab-content .charsheet .display-contents {
|
|
display: contents;
|
|
}
|
|
.ui-dialog .tab-content .charsheet .display-control--not-zero:is([value=""], [value="0"], :not([value])) + *,
|
|
.ui-dialog .tab-content .charsheet .display-control:not(:checked) + * {
|
|
display: none !important;
|
|
}
|
|
.ui-dialog .tab-content .charsheet .flex-box {
|
|
display: flex;
|
|
}
|
|
.ui-dialog .tab-content .charsheet .half-gap {
|
|
gap: 0.5rem;
|
|
}
|
|
.ui-dialog .tab-content .charsheet .tiny-gap {
|
|
gap: 0.25rem;
|
|
}
|
|
.ui-dialog .tab-content .charsheet .flex-wrap {
|
|
flex-wrap: wrap;
|
|
}
|
|
.ui-dialog .tab-content .charsheet .gap {
|
|
gap: 1rem;
|
|
}
|
|
.ui-dialog .tab-content .charsheet .input-label {
|
|
display: flex;
|
|
gap: 0.5rem;
|
|
}
|
|
.ui-dialog .tab-content .charsheet .input-label > input:not([type=number]):not([type=checkbox]):not([type=radio]) {
|
|
flex: 1;
|
|
}
|
|
.ui-dialog .tab-content .charsheet .input-label > select {
|
|
width: fit-content;
|
|
flex: 0 0 fit-content;
|
|
height: 100%;
|
|
}
|
|
.ui-dialog .tab-content .charsheet .capitalize {
|
|
text-transform: capitalize;
|
|
}
|
|
.ui-dialog .tab-content .charsheet .adaptive {
|
|
display: grid;
|
|
grid-template-columns: auto;
|
|
grid-template-rows: auto;
|
|
grid-template-areas: "content";
|
|
position: relative;
|
|
}
|
|
.ui-dialog .tab-content .charsheet .adaptive > * {
|
|
grid-area: content;
|
|
line-height: 1;
|
|
}
|
|
.ui-dialog .tab-content .charsheet .adaptive > span {
|
|
opacity: 0;
|
|
z-index: -10;
|
|
text-transform: initial;
|
|
border-radius: 0px;
|
|
}
|
|
.ui-dialog .tab-content .charsheet .adaptive--text {
|
|
min-height: 4rem;
|
|
}
|
|
.ui-dialog .tab-content .charsheet .adaptive--text__span {
|
|
font-size: inherit;
|
|
font-family: inherit;
|
|
line-height: inherit;
|
|
white-space: pre-wrap;
|
|
border: 1px solid transparent;
|
|
max-height: 20rem;
|
|
}
|
|
.ui-dialog .tab-content .charsheet .adaptive--text__textarea {
|
|
width: 100%;
|
|
height: 100%;
|
|
max-height: 100%;
|
|
resize: none;
|
|
box-sizing: border-box;
|
|
overflow: auto;
|
|
}
|
|
.ui-dialog .tab-content .charsheet .adaptive--input__input {
|
|
width: 100%;
|
|
}
|
|
.ui-dialog .tab-content .charsheet .adaptive--input__span {
|
|
padding: 2px;
|
|
min-height: 1.5rem;
|
|
}
|
|
.ui-dialog .tab-content .charsheet .repcontrol-button {
|
|
grid-area: header;
|
|
align-self: start;
|
|
}
|
|
.ui-dialog .tab-content .charsheet .repcontrol-button ~ .repcontrol {
|
|
grid-area: header;
|
|
justify-self: end;
|
|
z-index: 100;
|
|
}
|
|
.ui-dialog .tab-content .charsheet .repcontrol-button ~ .repcontrol > .repcontrol_add {
|
|
display: none !important;
|
|
}
|
|
.ui-dialog .tab-content .charsheet .expanded {
|
|
margin: 1rem;
|
|
}
|
|
.ui-dialog .tab-content .charsheet .expanded.border textarea {
|
|
padding: 0.5rem;
|
|
color: var(--expandTextColor);
|
|
background: transparent;
|
|
}
|
|
.ui-dialog .tab-content .charsheet .expanded.border select {
|
|
color: var(--expandTextColor);
|
|
}
|
|
.ui-dialog .tab-content .charsheet .expanded.border {
|
|
filter: drop-shadow(4px 4px 0px var(--expandBorderColor));
|
|
}
|
|
.ui-dialog .tab-content .charsheet .expanded.border .input-label {
|
|
color: var(--expandTextColor);
|
|
}
|
|
.ui-dialog .tab-content .charsheet .expanded::before, .ui-dialog .tab-content .charsheet .expanded::after {
|
|
background: var(--expandBackColor);
|
|
}
|
|
.ui-dialog .tab-content .charsheet .collapse-container {
|
|
position: relative;
|
|
}
|
|
.ui-dialog .tab-content .charsheet .repitem:hover .collapse,
|
|
.ui-dialog .tab-content .charsheet .repitem:hover .roll-container,
|
|
.ui-dialog .tab-content .charsheet .collapse-container:hover .collapse,
|
|
.ui-dialog .tab-content .charsheet .collapse-container:hover .roll-container {
|
|
opacity: 1;
|
|
}
|
|
.ui-dialog .tab-content .charsheet .repitem .collapse,
|
|
.ui-dialog .tab-content .charsheet .collapse-container .collapse {
|
|
-webkit-appearance: none;
|
|
appearance: none;
|
|
opacity: 0;
|
|
position: absolute;
|
|
right: 0px;
|
|
top: 0px;
|
|
border: 0px solid black;
|
|
border-radius: 0;
|
|
color: var(--selectedColor);
|
|
text-transform: none;
|
|
background-color: transparent;
|
|
display: inline;
|
|
font-size: 16px;
|
|
z-index: 100;
|
|
}
|
|
.ui-dialog .tab-content .charsheet .repitem .collapse:before,
|
|
.ui-dialog .tab-content .charsheet .collapse-container .collapse:before {
|
|
color: var(--warningColor);
|
|
content: "y";
|
|
font-family: pictos;
|
|
}
|
|
.ui-dialog .tab-content .charsheet .repitem .collapse:checked,
|
|
.ui-dialog .tab-content .charsheet .collapse-container .collapse:checked {
|
|
color: var(--unselectedColor1);
|
|
}
|
|
.ui-dialog .tab-content .charsheet .repitem .collapse:checked ~ .expanded,
|
|
.ui-dialog .tab-content .charsheet .repitem .collapse:checked ~ .collapse-container .expanded,
|
|
.ui-dialog .tab-content .charsheet .collapse-container .collapse:checked ~ .expanded,
|
|
.ui-dialog .tab-content .charsheet .collapse-container .collapse:checked ~ .collapse-container .expanded {
|
|
display: none !important;
|
|
}
|
|
.ui-dialog .tab-content .charsheet .repitem .collapse:checked ~ .expanded--empty:is(:not([value]), [value=""]) + *,
|
|
.ui-dialog .tab-content .charsheet .repitem .collapse:checked ~ .collapse-container ~ .expanded--empty:is(:not([value]), [value=""]) + *,
|
|
.ui-dialog .tab-content .charsheet .collapse-container .collapse:checked ~ .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;
|
|
}
|
|
.ui-dialog .tab-content .charsheet .repitem .collapse:not(:checked) ~ .collapsed,
|
|
.ui-dialog .tab-content .charsheet .repitem .collapse:not(:checked) ~ .collapse-container .collapsed,
|
|
.ui-dialog .tab-content .charsheet .collapse-container .collapse:not(:checked) ~ .collapsed,
|
|
.ui-dialog .tab-content .charsheet .collapse-container .collapse:not(:checked) ~ .collapse-container .collapsed {
|
|
display: none !important;
|
|
}
|
|
.ui-dialog .tab-content .charsheet .repitem .collapse:hover,
|
|
.ui-dialog .tab-content .charsheet .collapse-container .collapse:hover {
|
|
color: var(--selectedColor);
|
|
}
|
|
.ui-dialog .tab-content .charsheet .repcontainer.editmode .collapse {
|
|
display: none;
|
|
}
|
|
.ui-dialog .tab-content .charsheet .section-control:not(:checked) + .section-display {
|
|
display: none !important;
|
|
}
|
|
.ui-dialog .tab-content .charsheet .tab.settings .overlay {
|
|
column-width: 300px;
|
|
column-gap: var(--grid-gap);
|
|
column-fill: balance;
|
|
}
|
|
.ui-dialog .tab-content .charsheet .tab.settings .overlay .input_row {
|
|
margin-top: 0px;
|
|
margin-bottom: 2.5px;
|
|
padding-bottom: 2.5px;
|
|
break-inside: avoid;
|
|
}
|
|
|
|
body,
|
|
.sheet-rolltemplate-alien {
|
|
--active2e: initial;
|
|
--gap: 1rem;
|
|
--half-gap: calc(var(--gap) / 2);
|
|
--tiny-gap: calc(var(--half-gap) / 2);
|
|
--big-gap: calc(var(--gap) * 2);
|
|
--huge-gap: calc(var(--big-gap) * 2);
|
|
--col-1e-black: #030504;
|
|
--col-1e-deep: #274b5b;
|
|
--col-1e-medium: #6b8a85;
|
|
--col-1e-light: #a4b8b6;
|
|
--col-1e-white: #d4e4e4;
|
|
--col-1e-yellow: #ffa229;
|
|
--col-1e-teal: #25ecd7;
|
|
--col-1e-red: #690d3b;
|
|
--col-2e-black: #030504;
|
|
--col-2e-deep: #006760;
|
|
--col-2e-medium: #6b8a85;
|
|
--col-2e-light: #eef2ee;
|
|
--col-2e-white: #faf9f6;
|
|
--col-2e-grey: #92918e;
|
|
--col-2e-dark-grey: #484745;
|
|
--col-2e-yellow: #f3d12f;
|
|
--col-2e-teal: #25ecd7;
|
|
--col-2e-red: #ff4c2a;
|
|
--col-alien-black: var(--col-1e-black);
|
|
--col-alien-deep: var(--col-1e-deep);
|
|
--col-alien-medium: var(--col-1e-medium);
|
|
--col-alien-light: var(--col-1e-light);
|
|
--col-alien-white: var(--col-1e-white);
|
|
--col-yellow: var(--col-1e-yellow);
|
|
--col-teal: var(--col-1e-teal);
|
|
--col-red: var(--col-1e-red);
|
|
--textColor: var(--col-1e-deep);
|
|
--brightTextColor: var(--col-1e-white);
|
|
--circleInputTextColor: var(--col-1e-white);
|
|
--accentTextColor: var(--col-1e-deep);
|
|
--templateTextColor: var(--col-1e-white);
|
|
--headColor: var(--col-1e-deep);
|
|
--headTopColor: var(--col-1e-medium);
|
|
--headTextColor: var(--col-1e-light);
|
|
--aColor: var(--col-1e-deep);
|
|
--linkColor: var(--col-1e-teal);
|
|
--expandTextColor: var(--col-1e-light);
|
|
--activeTextColor: var(--col-1e-white);
|
|
--selectTextColor: var(--col-1e-light);
|
|
--critColor: var(--col-1e-white);
|
|
--warningColor: var(--col-1e-yellow);
|
|
--templateBorder: var(--col-1e-light);
|
|
--expandBorderColor: var(--col-1e-medium);
|
|
--inputBorderColor: var(--col-1e-medium);
|
|
--lightBorderColor: var(--col-1e-white);
|
|
--sheetBackground: radial-gradient(circle at 20% 80%, #1c0d10, #054352);
|
|
--sheetPulseBackground: radial-gradient(circle at 80% 20%, #2a1a24, #022f44);
|
|
--headGradient: linear-gradient(to right, transparent, var(--col-alien-black) 10px);
|
|
--genericGradient: linear-gradient(to right, var(--hoverHighlightBack), transparent);
|
|
--buttonBackColor: var(--col-1e-deep);
|
|
--contentBackColor: var(--col-1e-light);
|
|
--expandBackColor: var(--col-1e-deep);
|
|
--expandInputBackColor: var(--col-1e-light);
|
|
--selectBackColor: var(--col-1e-deep);
|
|
--backColor: var(--col-1e-black);
|
|
--sheetBackColor: var(--col-1e-deep);
|
|
--sectionBackColor: var(--col-1e-deep);
|
|
--headBackColor: var(--col-1e-black);
|
|
--navButtonBackColor: var(--col-1e-black);
|
|
--shadowColor: var(--col-1e-black);
|
|
--inputHighlight: var(--col-1e-deep);
|
|
--hoverHighlight: var(--col-1e-yellow);
|
|
--hoverHighlightBack: var(--col-1e-teal);
|
|
--hoverHighlightBackStrong: var(--col-1e-red);
|
|
--stressDiceTextColor: var(--col-1e-deep);
|
|
--scrollColor: var(--col-1e-deep);
|
|
--scrollHighlight: var(--col-1e-white);
|
|
--circleBackColor: var(--col-1e-black);
|
|
--circleBorderColor: var(--col-1e-deep);
|
|
--camelHeadBack: var(--col-1e-light);
|
|
--camelBorder: var(--col-1e-white);
|
|
--camelHeadColor: var(--col-1e-white);
|
|
--flLessBorderColor: var(--col-1e-deep);
|
|
--flLessBackColor: var(--col-1e-medium);
|
|
--flSelectedBackColor: var(--col-1e-black);
|
|
--flSelectedBorderColor: var(--col-1e-yellow);
|
|
--flSelectedTextColor: var(--col-1e-white);
|
|
--inputBorderColor: var(--col-1e-white);
|
|
--checkStartBackColor: var(--col-1e-red);
|
|
--checkBackColor: var(--col-1e-yellow);
|
|
--checkOutlineColor: var(--col-1e-light);
|
|
--navSelectedTextColor: var(--col-1e-deep);
|
|
--font-thick-header: "Russo One", sans-serif;
|
|
--font-thin-header: "Aldrich", sans-serif;
|
|
--font-type: "Geo", sans-serif;
|
|
--font-text: "DM Sans";
|
|
--font-icon: "Material Icons";
|
|
--img-roll: url(https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/alien_rpg/assets/dice-icon.png);
|
|
--img-roll-lit: url(https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/alien_rpg/assets/dice-icon-light.png);
|
|
--img-softblur: url(https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/alien_rpg/assets/soft-blur.gif);
|
|
--img-dice-success: url(https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/alien_rpg/assets/success-die.png);
|
|
--img-dice-panic: url(https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/alien_rpg/assets/panic-die.png);
|
|
--img-weyland: url(https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/alien_rpg/assets/weyland-logo.png);
|
|
--border-weyland: url(https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/alien_rpg/assets/weyland-border.png);
|
|
}
|
|
body:not(.sheet-darkmode):not(.sheet-rolltemplate-darkmode):has(:is(.color-mode[value=color], .color-mode-color)), body:has(:is(.color-mode[value=edition], .color-mode--edition)):has(:is(.edition-value[value="2"], .sheet-edition-value--2)),
|
|
.sheet-rolltemplate-alien:not(.sheet-darkmode):not(.sheet-rolltemplate-darkmode):has(:is(.color-mode[value=color], .color-mode-color)),
|
|
.sheet-rolltemplate-alien:has(:is(.color-mode[value=edition], .color-mode--edition)):has(:is(.edition-value[value="2"], .sheet-edition-value--2)) {
|
|
--active2e: ;
|
|
--textColor: var(--col-2e-deep);
|
|
--backColor: white;
|
|
--col-alien-black: var(--col-2e-black);
|
|
--col-alien-deep: var(--col-2e-deep);
|
|
--col-alien-medium: var(--col-2e-medium);
|
|
--col-alien-light: var(--col-2e-light);
|
|
--col-alien-white: var(--col-2e-white);
|
|
--col-yellow: var(--col-2e-yellow);
|
|
--col-teal: var(--col-2e-teal);
|
|
--col-red: var(--col-2e-red);
|
|
--textColor: var(--col-2e-black);
|
|
--brightTextColor: var(--col-2e-light);
|
|
--circleInputTextColor: var(--col-2e-deep);
|
|
--accentTextColor: var(--col-2e-deep);
|
|
--templateTextColor: var(--col-2e-white);
|
|
--headColor: var(--col-2e-black);
|
|
--headTopColor: var(--col-2e-medium);
|
|
--headTextColor: var(--col-2e-light);
|
|
--aColor: var(--col-2e-deep);
|
|
--linkColor: var(--col-2e-teal);
|
|
--expandTextColor: var(--col-2e-light);
|
|
--activeTextColor: var(--col-2e-white);
|
|
--selectTextColor: var(--col-2e-light);
|
|
--critColor: var(--col-2e-white);
|
|
--warningColor: var(--col-2e-yellow);
|
|
--camelHeadColor: var(--col-2e-deep);
|
|
--templateBorder: var(--col-2e-light);
|
|
--expandBorderColor: var(--col-2e-medium);
|
|
--inputBorderColor: var(--col-2e-medium);
|
|
--lightBorderColor: var(--col-2e-white);
|
|
--circleBorderColor: var(--col-2e-deep);
|
|
--sheetBackground: white;
|
|
--sheetPulseBackground: transparent;
|
|
--headGradient: linear-gradient(to right, transparent, white 10px);
|
|
--genericGradient: linear-gradient(to right, var(--col-2e-grey), transparent)
|
|
--buttonBackColor: var(--col-2e-deep);
|
|
--contentBackColor: var(--col-2e-light);
|
|
--expandBackColor: var(--col-2e-deep);
|
|
--expandInputBackColor: var(--col-2e-medium);
|
|
--selectBackColor: var(--col-2e-deep);
|
|
--sheetBackColor: var(--col-2e-deep);
|
|
--sectionBackColor: var(--col-2e-deep);
|
|
--headBackColor: var(--col-2e-black);
|
|
--navButtonBackColor: var(--col-2e-deep);
|
|
--shadowColor: var(--col-2e-medium);
|
|
--circleBackColor: white;
|
|
--inputHighlight: var(--col-2e-deep);
|
|
--hoverHighlight: var(--col-2e-yellow);
|
|
--hoverHighlightBack: var(--col-2e-teal);
|
|
--hoverHighlightBackStrong: var(--col-2e-red);
|
|
--stressDiceTextColor: var(--col-2e-deep);
|
|
--scrollColor: var(--col-2e-deep);
|
|
--scrollHighlight: var(--col-2e-white);
|
|
--camelHeadBack: var(--col-2e-light);
|
|
--camelBorder: var(--col-2e-white);
|
|
--flLessBorderColor: var(--col-2e-deep);
|
|
--flLessBackColor: var(--col-2e-medium);
|
|
--flSelectedBackColor: var(--col-2e-black);
|
|
--flSelectedBorderColor: var(--col-2e-yellow);
|
|
--flSelectedTextColor: var(--col-2e-white);
|
|
--inputBorderColor: var(--col-2e-medium);
|
|
--checkOutlineColor: var(--col-2e-medium);
|
|
--checkStartBackColor: var(--col-2e-red);
|
|
--checkBackColor: var(--col-2e-yellow);
|
|
--navSelectedTextColor: var(--col-2e-deep);
|
|
--nav2eShape: polygon(5px 0%, 100% 0%, calc(100% - 5px) 100%, 0% 100%);
|
|
--img-weyland: url(https://files.d20.io/images/462038792/6yxtU2YIjCpM3q1-uTaYJA/original.png);
|
|
--border-weyland: url(https://files.d20.io/images/462035848/rqCn3B79fDdfXOmSSregqA/original.png);
|
|
}
|
|
|
|
.ui-dialog .charactersheet,
|
|
.sheet-rolltemplate-alien {
|
|
font-family: var(--font-type);
|
|
color: var(--textColor);
|
|
background: var(--backColor);
|
|
font-size: 16px;
|
|
}
|
|
.ui-dialog .charactersheet .pictos,
|
|
.sheet-rolltemplate-alien .pictos {
|
|
font-family: pictos !important;
|
|
text-transform: none !important;
|
|
}
|
|
.ui-dialog .charactersheet .flex-box,
|
|
.ui-dialog .charactersheet .sheet-flex-box,
|
|
.sheet-rolltemplate-alien .flex-box,
|
|
.sheet-rolltemplate-alien .sheet-flex-box {
|
|
display: flex;
|
|
}
|
|
.ui-dialog .charactersheet .flex-wrap,
|
|
.ui-dialog .charactersheet .sheet-flex-wrap,
|
|
.sheet-rolltemplate-alien .flex-wrap,
|
|
.sheet-rolltemplate-alien .sheet-flex-wrap {
|
|
flex-wrap: wrap;
|
|
}
|
|
.ui-dialog .charactersheet .justify-space-around,
|
|
.ui-dialog .charactersheet .sheet-justify-space-around,
|
|
.sheet-rolltemplate-alien .justify-space-around,
|
|
.sheet-rolltemplate-alien .sheet-justify-space-around {
|
|
justify-content: space-around;
|
|
}
|
|
.ui-dialog .charactersheet .justify-space-between,
|
|
.ui-dialog .charactersheet .sheet-justify-space-between,
|
|
.sheet-rolltemplate-alien .justify-space-between,
|
|
.sheet-rolltemplate-alien .sheet-justify-space-between {
|
|
justify-content: space-between;
|
|
}
|
|
.ui-dialog .charactersheet .justify-center,
|
|
.ui-dialog .charactersheet .sheet-justify-center,
|
|
.sheet-rolltemplate-alien .justify-center,
|
|
.sheet-rolltemplate-alien .sheet-justify-center {
|
|
justify-content: center;
|
|
}
|
|
.ui-dialog .charactersheet .sheet-alien,
|
|
.sheet-rolltemplate-alien .sheet-alien {
|
|
min-width: 320px;
|
|
}
|
|
.ui-dialog .charactersheet .span-all,
|
|
.ui-dialog .charactersheet .sheet-span-all,
|
|
.sheet-rolltemplate-alien .span-all,
|
|
.sheet-rolltemplate-alien .sheet-span-all {
|
|
grid-column: 1/-1;
|
|
}
|
|
.ui-dialog .charactersheet .row-reverse,
|
|
.ui-dialog .charactersheet .sheet-row-reverse,
|
|
.sheet-rolltemplate-alien .row-reverse,
|
|
.sheet-rolltemplate-alien .sheet-row-reverse {
|
|
flex-direction: row-reverse;
|
|
}
|
|
.ui-dialog .charactersheet .column-reverse,
|
|
.ui-dialog .charactersheet .sheet-column-reverse,
|
|
.sheet-rolltemplate-alien .column-reverse,
|
|
.sheet-rolltemplate-alien .sheet-column-reverse {
|
|
flex-direction: column-reverse;
|
|
}
|
|
.ui-dialog .charactersheet .gap,
|
|
.ui-dialog .charactersheet .sheet-gap,
|
|
.sheet-rolltemplate-alien .gap,
|
|
.sheet-rolltemplate-alien .sheet-gap {
|
|
gap: var(--gap);
|
|
}
|
|
.ui-dialog .charactersheet .half-gap,
|
|
.ui-dialog .charactersheet .sheet-half-gap,
|
|
.sheet-rolltemplate-alien .half-gap,
|
|
.sheet-rolltemplate-alien .sheet-half-gap {
|
|
gap: var(--half-gap);
|
|
}
|
|
.ui-dialog .charactersheet .tiny-gap,
|
|
.ui-dialog .charactersheet .sheet-tiny-gap,
|
|
.sheet-rolltemplate-alien .tiny-gap,
|
|
.sheet-rolltemplate-alien .sheet-tiny-gap {
|
|
gap: var(--tiny-gap);
|
|
}
|
|
.ui-dialog .charactersheet .big-gap,
|
|
.ui-dialog .charactersheet .sheet-big-gap,
|
|
.sheet-rolltemplate-alien .big-gap,
|
|
.sheet-rolltemplate-alien .sheet-big-gap {
|
|
gap: var(--big-gap);
|
|
}
|
|
.ui-dialog .charactersheet .no-gap,
|
|
.ui-dialog .charactersheet .sheet-no-gap,
|
|
.sheet-rolltemplate-alien .no-gap,
|
|
.sheet-rolltemplate-alien .sheet-no-gap {
|
|
gap: 0;
|
|
}
|
|
.ui-dialog .charactersheet input,
|
|
.ui-dialog .charactersheet label,
|
|
.ui-dialog .charactersheet button,
|
|
.sheet-rolltemplate-alien input,
|
|
.sheet-rolltemplate-alien label,
|
|
.sheet-rolltemplate-alien button {
|
|
all: unset;
|
|
}
|
|
.ui-dialog .charactersheet input[type=roll]::before,
|
|
.ui-dialog .charactersheet label[type=roll]::before,
|
|
.ui-dialog .charactersheet button[type=roll]::before,
|
|
.sheet-rolltemplate-alien input[type=roll]::before,
|
|
.sheet-rolltemplate-alien label[type=roll]::before,
|
|
.sheet-rolltemplate-alien button[type=roll]::before {
|
|
all: unset;
|
|
}
|
|
.ui-dialog .charactersheet button.roll_icon:before,
|
|
.sheet-rolltemplate-alien button.roll_icon:before {
|
|
content: "";
|
|
background: var(--img-roll) no-repeat;
|
|
background-size: cover;
|
|
width: 20px;
|
|
height: 20px;
|
|
display: inline-block;
|
|
}
|
|
.ui-dialog .charactersheet button.roll_icon:not(.icon_hover):hover, .ui-dialog .charactersheet button.roll_icon.icon_hover:hover:before,
|
|
.sheet-rolltemplate-alien button.roll_icon:not(.icon_hover):hover,
|
|
.sheet-rolltemplate-alien button.roll_icon.icon_hover:hover:before {
|
|
filter: drop-shadow(0 0 0.25rem white) drop-shadow(0 0 0.25rem var(--hoverHighlightBack)) drop-shadow(0 0 0.5rem var(--hoverHighlightBack)) drop-shadow(0 0 0.5rem white);
|
|
}
|
|
.ui-dialog .charactersheet button.roll_icon:not(.icon_hover):active, .ui-dialog .charactersheet button.roll_icon.icon_hover:active:before,
|
|
.sheet-rolltemplate-alien button.roll_icon:not(.icon_hover):active,
|
|
.sheet-rolltemplate-alien button.roll_icon.icon_hover:active:before {
|
|
filter: brightness(3.5) drop-shadow(0 0 0.25rem white) drop-shadow(0 0 0.25rem var(--hoverHighlightBackStrong)) drop-shadow(0 0 0.5rem var(--hoverHighlightBackStrong)) drop-shadow(0 0 0.5rem white);
|
|
}
|
|
.ui-dialog .charactersheet button.roll_icon[class*=lit],
|
|
.sheet-rolltemplate-alien button.roll_icon[class*=lit] {
|
|
background: var(--img-roll-lit) no-repeat;
|
|
background-size: cover;
|
|
}
|
|
.ui-dialog .charactersheet h1,
|
|
.ui-dialog .charactersheet [aria-level="1"],
|
|
.ui-dialog .charactersheet h2,
|
|
.ui-dialog .charactersheet h3,
|
|
.sheet-rolltemplate-alien h1,
|
|
.sheet-rolltemplate-alien [aria-level="1"],
|
|
.sheet-rolltemplate-alien h2,
|
|
.sheet-rolltemplate-alien h3 {
|
|
text-transform: uppercase;
|
|
}
|
|
.ui-dialog .charactersheet h1,
|
|
.ui-dialog .charactersheet [aria-level="1"],
|
|
.sheet-rolltemplate-alien h1,
|
|
.sheet-rolltemplate-alien [aria-level="1"] {
|
|
--_headBack: ;
|
|
--_headShape: ;
|
|
--_headColor: ;
|
|
--_leftPad: ;
|
|
line-height: 10px;
|
|
font-family: var(--font-thin-header);
|
|
font-size: 14px;
|
|
font-weight: bold;
|
|
color: var(--_headColor, var(--headTopColor));
|
|
position: relative;
|
|
background: var(--_headBack, linear-gradient(to right, transparent, var(--headBackColor) 10px));
|
|
padding-top: 1rem;
|
|
padding-right: 2rem;
|
|
padding-bottom: 5px;
|
|
padding-left: var(--_leftPad, 1rem);
|
|
width: fit-content;
|
|
left: -10px;
|
|
clip-path: var(--_headShape, polygon(0% 0%, calc(100% - 15px) 0%, 100% 50%, calc(100% - 15px) 100%, 0% 100%));
|
|
}
|
|
.ui-dialog .charactersheet h2,
|
|
.ui-dialog .charactersheet [aria-level="2"],
|
|
.sheet-rolltemplate-alien h2,
|
|
.sheet-rolltemplate-alien [aria-level="2"] {
|
|
font-family: var(--font-thick-header);
|
|
font-size: 8px;
|
|
font-weight: normal;
|
|
line-height: 1;
|
|
color: var(--headColor);
|
|
}
|
|
.ui-dialog .charactersheet .input_row,
|
|
.sheet-rolltemplate-alien .input_row {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 0.15em 0.25em;
|
|
}
|
|
.ui-dialog .charactersheet .input_row--grid,
|
|
.sheet-rolltemplate-alien .input_row--grid {
|
|
display: grid;
|
|
}
|
|
.ui-dialog .charactersheet .input_row h3,
|
|
.sheet-rolltemplate-alien .input_row h3 {
|
|
font-family: var(--font-thin-header);
|
|
font-size: 12px;
|
|
color: var(--headColor);
|
|
line-height: 1.5;
|
|
height: min-content;
|
|
}
|
|
.ui-dialog .charactersheet .edition-disabled,
|
|
.ui-dialog .charactersheet .disabled,
|
|
.sheet-rolltemplate-alien .edition-disabled,
|
|
.sheet-rolltemplate-alien .disabled {
|
|
display: none !important;
|
|
}
|
|
.ui-dialog .charactersheet .fill-left,
|
|
.sheet-rolltemplate-alien .fill-left {
|
|
display: flex;
|
|
gap: 2px;
|
|
flex-wrap: wrap;
|
|
margin: 5px 0 5px 5px;
|
|
}
|
|
.ui-dialog .charactersheet .fill-left:not(:has(.fill-left__radio:checked)) input,
|
|
.sheet-rolltemplate-alien .fill-left:not(:has(.fill-left__radio:checked)) input {
|
|
background: transparent;
|
|
border-color: var(--inputBorderColor);
|
|
}
|
|
.ui-dialog .charactersheet .fill-left input:is([type=radio], [type=checkbox]),
|
|
.sheet-rolltemplate-alien .fill-left input:is([type=radio], [type=checkbox]) {
|
|
appearance: none;
|
|
background-color: var(--flLessBackColor);
|
|
border: 1px solid var(--flLessBorderColor);
|
|
box-sizing: border-box;
|
|
height: 25px;
|
|
width: 15px;
|
|
transform: skew(-15deg);
|
|
}
|
|
.ui-dialog .charactersheet .fill-left input:is([type=radio], [type=checkbox]):checked,
|
|
.sheet-rolltemplate-alien .fill-left input:is([type=radio], [type=checkbox]):checked {
|
|
background: var(--flSelectedBackColor);
|
|
width: 25px;
|
|
border: 2px solid var(--flSelectedBorderColor);
|
|
}
|
|
.ui-dialog .charactersheet .fill-left input:is([type=radio], [type=checkbox]):checked::before,
|
|
.sheet-rolltemplate-alien .fill-left input:is([type=radio], [type=checkbox]):checked::before {
|
|
position: absolute;
|
|
display: grid;
|
|
place-items: center;
|
|
content: attr(value);
|
|
font-family: var(--font-thick-header);
|
|
font-size: 16px;
|
|
color: var(--flSelectedTextColor);
|
|
inset: 0;
|
|
}
|
|
.ui-dialog .charactersheet .fill-left input:is([type=radio], [type=checkbox]):checked ~ input:is([type=radio], [type=checkbox]),
|
|
.sheet-rolltemplate-alien .fill-left input:is([type=radio], [type=checkbox]):checked ~ input:is([type=radio], [type=checkbox]) {
|
|
background: transparent;
|
|
border-color: var(--inputBorderColor);
|
|
}
|
|
.ui-dialog .charactersheet .fill-left input:is([type=radio], [type=checkbox]):hover:not(:checked),
|
|
.sheet-rolltemplate-alien .fill-left input:is([type=radio], [type=checkbox]):hover:not(:checked) {
|
|
border-color: var(--hoverHighlightBack) !important;
|
|
border-width: 2px;
|
|
}
|
|
.ui-dialog .charactersheet .fill-left input:is([type=radio], [type=checkbox]):hover:not(:checked)::before,
|
|
.sheet-rolltemplate-alien .fill-left input:is([type=radio], [type=checkbox]):hover:not(:checked)::before {
|
|
position: absolute;
|
|
display: grid;
|
|
place-items: center;
|
|
content: attr(value);
|
|
font-family: var(--font-thick-header);
|
|
font-size: 12px;
|
|
color: var(--hoverHighlightBack);
|
|
inset: 0;
|
|
}
|
|
.ui-dialog .charactersheet .fill-left input:is([type=radio], [type=checkbox]):active, .ui-dialog .charactersheet .fill-left input:is([type=radio], [type=checkbox]):focus,
|
|
.sheet-rolltemplate-alien .fill-left input:is([type=radio], [type=checkbox]):active,
|
|
.sheet-rolltemplate-alien .fill-left input:is([type=radio], [type=checkbox]):focus {
|
|
outline: none;
|
|
}
|
|
.ui-dialog .charactersheet .fill-left input:is([type=radio], [type=checkbox]).permanent_damage,
|
|
.sheet-rolltemplate-alien .fill-left input:is([type=radio], [type=checkbox]).permanent_damage {
|
|
border-color: var(--hoverHighlightBackStrong);
|
|
background: var(--hoverHighlightBackStrong);
|
|
}
|
|
.ui-dialog .charactersheet input::-webkit-outer-spin-button,
|
|
.ui-dialog .charactersheet input::-webkit-inner-spin-button,
|
|
.sheet-rolltemplate-alien input::-webkit-outer-spin-button,
|
|
.sheet-rolltemplate-alien input::-webkit-inner-spin-button {
|
|
-webkit-appearance: none;
|
|
margin: 0;
|
|
}
|
|
.ui-dialog .charactersheet,
|
|
.sheet-rolltemplate-alien {
|
|
/* Firefox */
|
|
}
|
|
.ui-dialog .charactersheet input[type=number],
|
|
.sheet-rolltemplate-alien input[type=number] {
|
|
-moz-appearance: textfield;
|
|
appearance: textfield;
|
|
}
|
|
.ui-dialog .charactersheet ::selection,
|
|
.sheet-rolltemplate-alien ::selection {
|
|
background: var(--hoverHighlight);
|
|
}
|
|
.ui-dialog .charactersheet .tab,
|
|
.sheet-rolltemplate-alien .tab {
|
|
position: relative;
|
|
flex-direction: column;
|
|
border: 10px solid transparent;
|
|
padding: 2rem;
|
|
padding-top: 3rem;
|
|
gap: 5px 1rem;
|
|
border-image-source: var(--border-weyland);
|
|
border-image-width: 32px;
|
|
border-image-repeat: stretch;
|
|
border-image-slice: 32;
|
|
}
|
|
.ui-dialog .charactersheet .tab::before,
|
|
.sheet-rolltemplate-alien .tab::before {
|
|
content: "";
|
|
position: absolute;
|
|
top: -32px;
|
|
left: 50%;
|
|
transform: translatex(-50%);
|
|
width: 100%;
|
|
height: 46px;
|
|
background: var(--img-weyland);
|
|
background-repeat: no-repeat;
|
|
background-size: contain;
|
|
background-position: center;
|
|
}
|
|
.ui-dialog .charactersheet .sheet-alien,
|
|
.sheet-rolltemplate-alien .sheet-alien {
|
|
position: relative;
|
|
background: var(--sheetBackground);
|
|
z-index: 1;
|
|
}
|
|
.ui-dialog .charactersheet .sheet-alien::before,
|
|
.sheet-rolltemplate-alien .sheet-alien::before {
|
|
content: "";
|
|
position: absolute;
|
|
inset: 0;
|
|
background: var(--sheetPulseBackground);
|
|
opacity: 0;
|
|
transition: opacity 300ms;
|
|
z-index: -1;
|
|
animation: opacity-fade 10s infinite alternate ease-in-out;
|
|
}
|
|
@keyframes opacity-fade {
|
|
from {
|
|
opacity: 0;
|
|
}
|
|
50% {
|
|
opacity: 1;
|
|
}
|
|
to {
|
|
opacity: 0;
|
|
}
|
|
}
|
|
.ui-dialog .charactersheet h2,
|
|
.sheet-rolltemplate-alien h2 {
|
|
position: absolute;
|
|
left: 50%;
|
|
top: 10px;
|
|
text-align: center;
|
|
transform: translateX(-50%);
|
|
}
|
|
.ui-dialog .charactersheet select,
|
|
.sheet-rolltemplate-alien select {
|
|
background: transparent;
|
|
border: 1px dashed var(--inputBorderColor) !important;
|
|
width: fit-content;
|
|
text-transform: capitalize;
|
|
color: var(--textColor);
|
|
height: 26px;
|
|
margin: 2px 0;
|
|
padding: 2px;
|
|
flex: 1;
|
|
}
|
|
.ui-dialog .charactersheet select option,
|
|
.sheet-rolltemplate-alien select option {
|
|
text-transform: capitalize;
|
|
background-color: var(--selectBackColor);
|
|
color: var(--selectTextColor);
|
|
}
|
|
.ui-dialog .charactersheet select:focus,
|
|
.sheet-rolltemplate-alien select:focus {
|
|
outline: none;
|
|
}
|
|
.ui-dialog .charactersheet .box,
|
|
.sheet-rolltemplate-alien .box {
|
|
display: grid;
|
|
grid-template-areas: "content";
|
|
gap: 5px;
|
|
margin-top: 5px;
|
|
}
|
|
.ui-dialog .charactersheet .box > *,
|
|
.sheet-rolltemplate-alien .box > * {
|
|
grid-column: 1/-1;
|
|
grid-row: 1/-1;
|
|
}
|
|
.ui-dialog .charactersheet .box .repcontainer,
|
|
.sheet-rolltemplate-alien .box .repcontainer {
|
|
margin-top: var(--half-gap);
|
|
grid-row: 1/2;
|
|
}
|
|
.ui-dialog .charactersheet .box .underlay,
|
|
.sheet-rolltemplate-alien .box .underlay {
|
|
display: grid;
|
|
grid-template-areas: "content";
|
|
gap: 5px;
|
|
}
|
|
.ui-dialog .charactersheet .box .underlay > *,
|
|
.sheet-rolltemplate-alien .box .underlay > * {
|
|
grid-area: content;
|
|
}
|
|
.ui-dialog .charactersheet .box .overlay,
|
|
.sheet-rolltemplate-alien .box .overlay {
|
|
z-index: 1;
|
|
}
|
|
.ui-dialog .charactersheet .box h1,
|
|
.ui-dialog .charactersheet .box [aria-level="1"],
|
|
.sheet-rolltemplate-alien .box h1,
|
|
.sheet-rolltemplate-alien .box [aria-level="1"] {
|
|
position: relative;
|
|
place-self: start;
|
|
background: var(--headGradient);
|
|
padding: 1rem 5rem 5px 15px;
|
|
line-height: 10px;
|
|
font-family: var(--font-thin-header);
|
|
font-size: 10px;
|
|
color: var(--headTopColor);
|
|
transform: translateY(-50%);
|
|
clip-path: polygon(0% 0%, calc(100% - 15px) 0%, 100% 50%, calc(100% - 15px) 100%, 0% 100%);
|
|
z-index: 2;
|
|
white-space: nowrap;
|
|
top: -5px;
|
|
left: -10px;
|
|
}
|
|
.ui-dialog .charactersheet .box button[aria-level="1"],
|
|
.sheet-rolltemplate-alien .box button[aria-level="1"] {
|
|
font-size: 10px;
|
|
}
|
|
.ui-dialog .charactersheet .box button[aria-level="1"].roll_icon:before,
|
|
.sheet-rolltemplate-alien .box button[aria-level="1"].roll_icon:before {
|
|
position: relative;
|
|
top: -2px;
|
|
width: 10px;
|
|
height: 10px;
|
|
}
|
|
.ui-dialog .charactersheet .repcontrol-button,
|
|
.sheet-rolltemplate-alien .repcontrol-button {
|
|
display: grid;
|
|
width: 15px;
|
|
height: 15px;
|
|
font-size: 0;
|
|
color: var(--accentTextColor);
|
|
border: 1px solid var(--accentTextColor);
|
|
}
|
|
.ui-dialog .charactersheet .repcontrol-button::before,
|
|
.sheet-rolltemplate-alien .repcontrol-button::before {
|
|
inset: 0;
|
|
place-self: center;
|
|
}
|
|
.ui-dialog .charactersheet .repcontrol-button::before,
|
|
.sheet-rolltemplate-alien .repcontrol-button::before {
|
|
font-family: "Material Icons";
|
|
font-size: 12px;
|
|
content: "add";
|
|
}
|
|
.ui-dialog .charactersheet .repcontrol button,
|
|
.ui-dialog .charactersheet .itemcontrol button,
|
|
.sheet-rolltemplate-alien .repcontrol button,
|
|
.sheet-rolltemplate-alien .itemcontrol button {
|
|
display: grid;
|
|
width: 15px;
|
|
height: 15px;
|
|
font-size: 0;
|
|
color: var(--accentTextColor);
|
|
border: 1px solid var(--accentTextColor);
|
|
}
|
|
.ui-dialog .charactersheet .repcontrol button::before,
|
|
.ui-dialog .charactersheet .itemcontrol button::before,
|
|
.sheet-rolltemplate-alien .repcontrol button::before,
|
|
.sheet-rolltemplate-alien .itemcontrol button::before {
|
|
inset: 0;
|
|
place-self: center;
|
|
}
|
|
.ui-dialog .charactersheet .repcontrol button.repcontrol_add::before,
|
|
.ui-dialog .charactersheet .itemcontrol button.repcontrol_add::before,
|
|
.sheet-rolltemplate-alien .repcontrol button.repcontrol_add::before,
|
|
.sheet-rolltemplate-alien .itemcontrol button.repcontrol_add::before {
|
|
font-family: "Material Icons";
|
|
font-size: 12px;
|
|
content: "add";
|
|
}
|
|
.ui-dialog .charactersheet .repcontrol button.repcontrol_edit::before,
|
|
.ui-dialog .charactersheet .itemcontrol button.repcontrol_edit::before,
|
|
.sheet-rolltemplate-alien .repcontrol button.repcontrol_edit::before,
|
|
.sheet-rolltemplate-alien .itemcontrol button.repcontrol_edit::before {
|
|
font-family: "Material Icons";
|
|
font-size: 12px;
|
|
content: "edit";
|
|
}
|
|
.ui-dialog .charactersheet .itemcontrol,
|
|
.sheet-rolltemplate-alien .itemcontrol {
|
|
z-index: 99;
|
|
}
|
|
.ui-dialog .charactersheet .itemcontrol a.repcontrol_move,
|
|
.sheet-rolltemplate-alien .itemcontrol a.repcontrol_move {
|
|
display: grid;
|
|
position: relative;
|
|
float: left;
|
|
width: 20px;
|
|
aspect-ratio: 1;
|
|
padding: 0;
|
|
border: 1px solid var(--accentTextColor);
|
|
border-radius: 0;
|
|
line-height: 1;
|
|
font-size: 0;
|
|
text-shadow: none;
|
|
}
|
|
.ui-dialog .charactersheet .itemcontrol a.repcontrol_move::before,
|
|
.sheet-rolltemplate-alien .itemcontrol a.repcontrol_move::before {
|
|
place-self: center;
|
|
position: absolute;
|
|
inset: 0;
|
|
float: left;
|
|
font-family: "Material Icons";
|
|
font-size: 12px;
|
|
content: "open_with";
|
|
line-height: 1.7;
|
|
}
|
|
.ui-dialog .charactersheet .itemcontrol .repcontrol_del,
|
|
.sheet-rolltemplate-alien .itemcontrol .repcontrol_del {
|
|
width: 20px;
|
|
height: 20px;
|
|
}
|
|
.ui-dialog .charactersheet .itemcontrol .repcontrol_del::before,
|
|
.sheet-rolltemplate-alien .itemcontrol .repcontrol_del::before {
|
|
font-family: "Material Icons";
|
|
font-size: 12px;
|
|
content: "remove";
|
|
}
|
|
.ui-dialog .charactersheet .itemcontrol *,
|
|
.sheet-rolltemplate-alien .itemcontrol * {
|
|
cursor: pointer;
|
|
background: var(--contentBackColor);
|
|
}
|
|
.ui-dialog .charactersheet .itemcontrol *:hover, .ui-dialog .charactersheet .itemcontrol *:hover::before,
|
|
.sheet-rolltemplate-alien .itemcontrol *:hover,
|
|
.sheet-rolltemplate-alien .itemcontrol *:hover::before {
|
|
background: var(--hoverHighlightBack);
|
|
}
|
|
.ui-dialog .charactersheet .multibox,
|
|
.sheet-rolltemplate-alien .multibox {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
grid-template-rows: 1fr auto;
|
|
gap: 5px;
|
|
}
|
|
.ui-dialog .charactersheet .multibox > .border,
|
|
.sheet-rolltemplate-alien .multibox > .border {
|
|
grid-row: 1/-1;
|
|
z-index: -1;
|
|
}
|
|
.ui-dialog .charactersheet .multibox > .border:nth-of-type(1),
|
|
.sheet-rolltemplate-alien .multibox > .border:nth-of-type(1) {
|
|
grid-column: 1;
|
|
}
|
|
.ui-dialog .charactersheet .multibox > .border:nth-of-type(2),
|
|
.sheet-rolltemplate-alien .multibox > .border:nth-of-type(2) {
|
|
grid-column: 2;
|
|
}
|
|
.ui-dialog .charactersheet .multibox > .border:nth-of-type(3),
|
|
.sheet-rolltemplate-alien .multibox > .border:nth-of-type(3) {
|
|
grid-column: 3;
|
|
}
|
|
.ui-dialog .charactersheet .multibox > .border:nth-of-type(4),
|
|
.sheet-rolltemplate-alien .multibox > .border:nth-of-type(4) {
|
|
grid-column: 4;
|
|
}
|
|
.ui-dialog .charactersheet .multibox > .border:nth-of-type(5),
|
|
.sheet-rolltemplate-alien .multibox > .border:nth-of-type(5) {
|
|
grid-column: 5;
|
|
}
|
|
.ui-dialog .charactersheet .multibox .input_row,
|
|
.sheet-rolltemplate-alien .multibox .input_row {
|
|
display: grid;
|
|
}
|
|
.ui-dialog .charactersheet .multibox .repcontainer,
|
|
.sheet-rolltemplate-alien .multibox .repcontainer {
|
|
margin: 20px 0;
|
|
grid-column: 1/-1;
|
|
grid-row: 1/-1;
|
|
}
|
|
.ui-dialog .charactersheet .multibox .repcontrol,
|
|
.sheet-rolltemplate-alien .multibox .repcontrol {
|
|
grid-column: 1/-1;
|
|
width: 40%;
|
|
min-width: 150px;
|
|
justify-self: flex-end;
|
|
padding: 0 1rem;
|
|
margin-top: 5px;
|
|
grid-row: 2/3;
|
|
background: var(--accentTextColor);
|
|
clip-path: polygon(5px 0, calc(100% - 5px) 0%, 100% 5px, 100% calc(100% - 5px), calc(100% - 5px) 100%, 5px 100%, 0% calc(100% - 5px), 0 5px);
|
|
}
|
|
.ui-dialog .charactersheet .multibox .repcontrol button,
|
|
.sheet-rolltemplate-alien .multibox .repcontrol button {
|
|
color: var(--expandTextColor);
|
|
}
|
|
.ui-dialog .charactersheet .multibox .repcontrol button:hover,
|
|
.sheet-rolltemplate-alien .multibox .repcontrol button:hover {
|
|
background: var(--hoverHighlightBack);
|
|
color: var(--accentTextColor);
|
|
}
|
|
.ui-dialog .charactersheet .multibox .input_row,
|
|
.sheet-rolltemplate-alien .multibox .input_row {
|
|
border: none;
|
|
}
|
|
.ui-dialog .charactersheet .multibox .input_row > *:not(.adaptive--text),
|
|
.sheet-rolltemplate-alien .multibox .input_row > *:not(.adaptive--text) {
|
|
height: 20px;
|
|
box-sizing: border-box;
|
|
justify-self: center;
|
|
}
|
|
.ui-dialog .charactersheet .multibox .input_row > *:not(.input_row__borderless),
|
|
.sheet-rolltemplate-alien .multibox .input_row > *:not(.input_row__borderless) {
|
|
border-bottom: 2px dotted var(--inputBorderColor);
|
|
}
|
|
.ui-dialog .charactersheet .multibox .input_row > .input-label,
|
|
.sheet-rolltemplate-alien .multibox .input_row > .input-label {
|
|
width: 100%;
|
|
}
|
|
.ui-dialog .charactersheet .multibox .input_row > .input-label > .input-label__input:not([type=number]),
|
|
.sheet-rolltemplate-alien .multibox .input_row > .input-label > .input-label__input:not([type=number]) {
|
|
width: 0;
|
|
}
|
|
.ui-dialog .charactersheet .multibox .input_row input[type=text],
|
|
.sheet-rolltemplate-alien .multibox .input_row input[type=text] {
|
|
width: calc(100% - 20px);
|
|
text-overflow: ellipsis;
|
|
text-align: center;
|
|
}
|
|
.ui-dialog .charactersheet .multibox .input_row input[type=number],
|
|
.sheet-rolltemplate-alien .multibox .input_row input[type=number] {
|
|
border-top: none;
|
|
border-left: none;
|
|
border-right: none;
|
|
outline: none;
|
|
}
|
|
.ui-dialog .charactersheet .multibox .input_row .input-label input[type=number],
|
|
.sheet-rolltemplate-alien .multibox .input_row .input-label input[type=number] {
|
|
border: none;
|
|
outline: none;
|
|
}
|
|
.ui-dialog .charactersheet .input_row__border,
|
|
.sheet-rolltemplate-alien .input_row__border {
|
|
border-bottom: 2px dotted var(--inputBorderColor) !important;
|
|
}
|
|
.ui-dialog .charactersheet .input_row,
|
|
.sheet-rolltemplate-alien .input_row {
|
|
border-bottom: 2px dotted var(--inputBorderColor);
|
|
}
|
|
.ui-dialog .charactersheet .input_row:first-of-type,
|
|
.sheet-rolltemplate-alien .input_row:first-of-type {
|
|
margin-top: 5px;
|
|
}
|
|
.ui-dialog .charactersheet .input_row:last-of-type,
|
|
.sheet-rolltemplate-alien .input_row:last-of-type {
|
|
border-bottom: none;
|
|
}
|
|
.ui-dialog .charactersheet .input_row label,
|
|
.sheet-rolltemplate-alien .input_row label {
|
|
all: unset;
|
|
}
|
|
.ui-dialog .charactersheet .input_row h3,
|
|
.sheet-rolltemplate-alien .input_row h3 {
|
|
margin-right: 1rem;
|
|
}
|
|
.ui-dialog .charactersheet .input_row input,
|
|
.sheet-rolltemplate-alien .input_row input {
|
|
position: relative;
|
|
height: min-content;
|
|
line-height: 1;
|
|
}
|
|
.ui-dialog .charactersheet .input_row input[type=text],
|
|
.sheet-rolltemplate-alien .input_row input[type=text] {
|
|
width: 100%;
|
|
flex: 1;
|
|
}
|
|
.ui-dialog .charactersheet .input_row input[type=text]:hover,
|
|
.sheet-rolltemplate-alien .input_row input[type=text]:hover {
|
|
background: linear-gradient(to right, var(--hoverHighlightBack) 0%, transparent 100%);
|
|
box-shadow: -2px 0 2px var(--hoverHighlightBack);
|
|
}
|
|
.ui-dialog .charactersheet .input_row input:where([type=number]),
|
|
.sheet-rolltemplate-alien .input_row input:where([type=number]) {
|
|
width: 20px;
|
|
aspect-ratio: 1;
|
|
justify-self: flex-end;
|
|
text-align: center;
|
|
border: 2px solid var(--inputBorderColor);
|
|
outline: 2px solid var(--inputBorderColor);
|
|
outline-offset: -2px;
|
|
transition: outline-offset 100ms;
|
|
}
|
|
.ui-dialog .charactersheet .input_row input:where([type=number]):hover, .ui-dialog .charactersheet .input_row input:where([type=number]):focus,
|
|
.sheet-rolltemplate-alien .input_row input:where([type=number]):hover,
|
|
.sheet-rolltemplate-alien .input_row input:where([type=number]):focus {
|
|
background: var(--hoverHighlightBack);
|
|
outline-offset: 2px;
|
|
}
|
|
.ui-dialog .charactersheet .input_row input[type=checkbox]:not(.fill-left__radio),
|
|
.sheet-rolltemplate-alien .input_row input[type=checkbox]:not(.fill-left__radio) {
|
|
height: 25px;
|
|
aspect-ratio: 1;
|
|
background: none;
|
|
box-sizing: border-box;
|
|
outline: 2px solid var(--inputBorderColor);
|
|
outline-offset: -4px;
|
|
justify-self: flex-end;
|
|
transition: all 300ms;
|
|
}
|
|
.ui-dialog .charactersheet .input_row input[type=checkbox]:not(.fill-left__radio):checked,
|
|
.sheet-rolltemplate-alien .input_row input[type=checkbox]:not(.fill-left__radio):checked {
|
|
background: var(--checkBackColor);
|
|
outline: 2px solid var(--checkOutlineColor);
|
|
outline-offset: -4px;
|
|
animation: spin 800ms;
|
|
}
|
|
.ui-dialog .charactersheet .input_row input[type=checkbox]:not(.fill-left__radio):checked::before,
|
|
.sheet-rolltemplate-alien .input_row input[type=checkbox]:not(.fill-left__radio):checked::before {
|
|
position: absolute;
|
|
inset: 0;
|
|
border: 2px solid var(--inputBorderColor);
|
|
content: "";
|
|
animation: spin-reverse 800ms;
|
|
}
|
|
.ui-dialog .charactersheet .input_row input[type=checkbox]:not(.fill-left__radio),
|
|
.sheet-rolltemplate-alien .input_row input[type=checkbox]:not(.fill-left__radio) {
|
|
outline: 2px solid var(--inputBorderColor);
|
|
outline-offset: -2px;
|
|
transition: outline-offset 100ms;
|
|
}
|
|
.ui-dialog .charactersheet .input_row input[type=checkbox]:not(.fill-left__radio):hover,
|
|
.sheet-rolltemplate-alien .input_row input[type=checkbox]:not(.fill-left__radio):hover {
|
|
border: 2px solid var(--inputBorderColor);
|
|
outline-offset: 2px;
|
|
}
|
|
@keyframes spin {
|
|
from {
|
|
transform: rotate(45deg) scale(0.5);
|
|
background: var(--checkStartBackColor);
|
|
}
|
|
to {
|
|
transform: rotate(360deg) scale(1);
|
|
background: var(--checkBackColor);
|
|
}
|
|
}
|
|
@keyframes spin-reverse {
|
|
from {
|
|
transform: rotate(-45deg) scale(0.5);
|
|
}
|
|
to {
|
|
transform: rotate(-360deg) scale(1);
|
|
}
|
|
}
|
|
.ui-dialog .charactersheet input[type=checkbox].reveal,
|
|
.sheet-rolltemplate-alien input[type=checkbox].reveal {
|
|
all: unset;
|
|
position: relative;
|
|
height: 1em;
|
|
box-sizing: border-box;
|
|
aspect-ratio: 1;
|
|
}
|
|
.ui-dialog .charactersheet input[type=checkbox].reveal:hover,
|
|
.sheet-rolltemplate-alien input[type=checkbox].reveal:hover {
|
|
border: unset;
|
|
}
|
|
.ui-dialog .charactersheet input[type=checkbox].reveal:hover::before,
|
|
.sheet-rolltemplate-alien input[type=checkbox].reveal:hover::before {
|
|
color: var(--inputBorderColor);
|
|
}
|
|
.ui-dialog .charactersheet input[type=checkbox].reveal:not(:checked)::before,
|
|
.sheet-rolltemplate-alien input[type=checkbox].reveal:not(:checked)::before {
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
translate: -50% -50%;
|
|
content: "search";
|
|
font-family: var(--font-icon);
|
|
font-size: 18px;
|
|
}
|
|
.ui-dialog .charactersheet nav,
|
|
.sheet-rolltemplate-alien nav {
|
|
display: flex;
|
|
align-items: start;
|
|
margin-bottom: 25px;
|
|
gap: 2rem;
|
|
}
|
|
.ui-dialog .charactersheet nav ul,
|
|
.sheet-rolltemplate-alien nav ul {
|
|
margin: 0 0 0 25px;
|
|
}
|
|
.ui-dialog .charactersheet nav button,
|
|
.sheet-rolltemplate-alien nav button {
|
|
--_borderWidth: var(--active2e) 0;
|
|
--_borderColor: var(--active2e) transparent;
|
|
display: inline !important;
|
|
padding: 0 1rem;
|
|
clip-path: var(--nav2eShape, polygon(5px 0%, calc(100% - 5px) 0%, 100% 100%, 0% 100%));
|
|
background: var(--navButtonBackColor);
|
|
font-family: var(--font-thick-header);
|
|
font-size: 12px;
|
|
color: var(--expandTextColor);
|
|
border-width: var(--_borderWidth, 2px);
|
|
border-style: solid;
|
|
border-color: var(--_borderColor, var(--templateBorder));
|
|
text-transform: capitalize;
|
|
}
|
|
.ui-dialog .charactersheet nav button.k-active-tab,
|
|
.sheet-rolltemplate-alien nav button.k-active-tab {
|
|
background: var(--templateBorder);
|
|
color: var(--navSelectedTextColor);
|
|
border-bottom: none;
|
|
}
|
|
.ui-dialog .charactersheet nav button:hover,
|
|
.sheet-rolltemplate-alien nav button:hover {
|
|
background: var(--hoverHighlightBack);
|
|
color: var(--navSelectedTextColor);
|
|
}
|
|
.ui-dialog .charactersheet .edition-label,
|
|
.sheet-rolltemplate-alien .edition-label {
|
|
order: 2;
|
|
color: var(--camelHeadColor);
|
|
}
|
|
.ui-dialog .charactersheet .generic_rolls,
|
|
.sheet-rolltemplate-alien .generic_rolls {
|
|
order: 3;
|
|
display: flex;
|
|
background: var(--genericGradient);
|
|
margin-left: auto;
|
|
}
|
|
.ui-dialog .charactersheet .generic_rolls h1,
|
|
.sheet-rolltemplate-alien .generic_rolls h1 {
|
|
--_headBack: var(--active2e) linear-gradient(95deg, transparent, rgba(100, 180, 180, 50%) 20%, var(--headTopColor) 50%);
|
|
--_headShape: var(--nav2eShape);
|
|
--_headColor: var(--active2e) white;
|
|
--_leftPad: var(--active2e) 3rem;
|
|
}
|
|
.ui-dialog .charactersheet .generic_rolls button,
|
|
.sheet-rolltemplate-alien .generic_rolls button {
|
|
padding: 0 10px;
|
|
font-size: 12px;
|
|
border-color: var(--hoverHighlightBack);
|
|
}
|
|
.ui-dialog .charactersheet .Talents .repeat_menu,
|
|
.sheet-rolltemplate-alien .Talents .repeat_menu {
|
|
display: grid;
|
|
grid-template-columns: 1fr auto;
|
|
grid-template-rows: auto 10rem auto auto;
|
|
grid-template-areas: "name name" "detail detail" "menu add" "menu delete";
|
|
gap: 5px;
|
|
}
|
|
.ui-dialog .charactersheet .Talents .repeat_menu .repcontainer,
|
|
.sheet-rolltemplate-alien .Talents .repeat_menu .repcontainer {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
grid-template-columns: repeat(auto-fit, minmax(50px, auto));
|
|
grid-template-rows: auto auto;
|
|
gap: 5px;
|
|
grid-area: menu;
|
|
max-height: 20rem;
|
|
overflow: auto;
|
|
}
|
|
.ui-dialog .charactersheet .Talents .repeat_menu .repcontainer .repitem,
|
|
.sheet-rolltemplate-alien .Talents .repeat_menu .repcontainer .repitem {
|
|
display: grid;
|
|
flex: 1 1 fit-content;
|
|
align-self: center;
|
|
min-width: 50px;
|
|
background: none !important;
|
|
}
|
|
.ui-dialog .charactersheet .Talents .repeat_menu .repcontainer .repitem button,
|
|
.sheet-rolltemplate-alien .Talents .repeat_menu .repcontainer .repitem button {
|
|
background: var(--inputBorderColor);
|
|
border: 1px solid var(--expandTextColor);
|
|
border-radius: 5px;
|
|
line-height: 1;
|
|
text-align: center;
|
|
overflow: hidden;
|
|
padding: 2px;
|
|
white-space: nowrap;
|
|
color: var(--expandTextColor);
|
|
}
|
|
.ui-dialog .charactersheet .Talents .repeat_menu .repcontainer .repitem button:hover,
|
|
.sheet-rolltemplate-alien .Talents .repeat_menu .repcontainer .repitem button:hover {
|
|
text-shadow: 0 0 0.25rem white, 0 0 0.25rem var(--hoverHighlightBack), 0 0 0.5rem var(--hoverHighlightBack), 0 0 0.5rem white;
|
|
}
|
|
.ui-dialog .charactersheet .Talents .repeat_menu .repcontainer .repitem .active-control:checked + button,
|
|
.sheet-rolltemplate-alien .Talents .repeat_menu .repcontainer .repitem .active-control:checked + button {
|
|
background-color: var(--expandBackColor);
|
|
color: var(--expandTextColor);
|
|
text-shadow: 0 0 5px var(--hoverHighlightBack);
|
|
}
|
|
.ui-dialog .charactersheet .Talents .repeat_menu .repcontainer .repitem:hover,
|
|
.sheet-rolltemplate-alien .Talents .repeat_menu .repcontainer .repitem:hover {
|
|
cursor: pointer;
|
|
}
|
|
.ui-dialog .charactersheet .Talents .repeat_menu .repcontainer .repitem .itemcontrol,
|
|
.sheet-rolltemplate-alien .Talents .repeat_menu .repcontainer .repitem .itemcontrol {
|
|
justify-content: space-between;
|
|
}
|
|
.ui-dialog .charactersheet .Talents .repeat_menu .talent_details,
|
|
.sheet-rolltemplate-alien .Talents .repeat_menu .talent_details {
|
|
grid-area: detail;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
.ui-dialog .charactersheet .Talents .repeat_menu .talent_details > :not(.expanded),
|
|
.sheet-rolltemplate-alien .Talents .repeat_menu .talent_details > :not(.expanded) {
|
|
height: 0;
|
|
flex: 1 1 0;
|
|
}
|
|
.ui-dialog .charactersheet .Talents .repeat_menu .repcontrol-button,
|
|
.sheet-rolltemplate-alien .Talents .repeat_menu .repcontrol-button {
|
|
grid-area: add;
|
|
}
|
|
.ui-dialog .charactersheet .Talents .repeat_menu .repcontrol,
|
|
.sheet-rolltemplate-alien .Talents .repeat_menu .repcontrol {
|
|
grid-area: delete;
|
|
display: flex;
|
|
flex-direction: column-reverse;
|
|
align-self: flex-start;
|
|
}
|
|
.ui-dialog .charactersheet .Talents .repeat_menu #talent_name,
|
|
.sheet-rolltemplate-alien .Talents .repeat_menu #talent_name {
|
|
grid-area: name;
|
|
color: var(--textColor);
|
|
text-align: center;
|
|
background: none;
|
|
padding: 2px 5px;
|
|
border: 1px solid var(--accentTextColor);
|
|
border-radius: 5px;
|
|
}
|
|
.ui-dialog .charactersheet .Talents .repeat_menu #talent_name:hover, .ui-dialog .charactersheet .Talents .repeat_menu #talent_name:focus,
|
|
.sheet-rolltemplate-alien .Talents .repeat_menu #talent_name:hover,
|
|
.sheet-rolltemplate-alien .Talents .repeat_menu #talent_name:focus {
|
|
background: linear-gradient(to right, transparent, var(--hoverHighlightBack), transparent);
|
|
outline: none;
|
|
border-color: var(--hoverHighlightBack);
|
|
}
|
|
.ui-dialog .charactersheet .__underline_items ~ .repcontainer .repitem,
|
|
.sheet-rolltemplate-alien .__underline_items ~ .repcontainer .repitem {
|
|
border-bottom: 2px dotted var(--inputBorderColor);
|
|
}
|
|
.ui-dialog .charactersheet .overlay,
|
|
.ui-dialog .charactersheet .border,
|
|
.ui-dialog .charactersheet .sm_box,
|
|
.ui-dialog .charactersheet .camelBox,
|
|
.sheet-rolltemplate-alien .overlay,
|
|
.sheet-rolltemplate-alien .border,
|
|
.sheet-rolltemplate-alien .sm_box,
|
|
.sheet-rolltemplate-alien .camelBox {
|
|
padding: 1rem 1rem 15px 1rem;
|
|
}
|
|
.ui-dialog .charactersheet .border,
|
|
.ui-dialog .charactersheet .sm_box,
|
|
.ui-dialog .charactersheet .camelBox,
|
|
.sheet-rolltemplate-alien .border,
|
|
.sheet-rolltemplate-alien .sm_box,
|
|
.sheet-rolltemplate-alien .camelBox {
|
|
flex: 1;
|
|
filter: drop-shadow(1px 2px 0px var(--camelBorder));
|
|
transition: all 300ms ease-in-out;
|
|
}
|
|
.ui-dialog .charactersheet .border::before, .ui-dialog .charactersheet .border::after,
|
|
.ui-dialog .charactersheet .sm_box::before,
|
|
.ui-dialog .charactersheet .sm_box::after,
|
|
.ui-dialog .charactersheet .camelBox::before,
|
|
.ui-dialog .charactersheet .camelBox::after,
|
|
.sheet-rolltemplate-alien .border::before,
|
|
.sheet-rolltemplate-alien .border::after,
|
|
.sheet-rolltemplate-alien .sm_box::before,
|
|
.sheet-rolltemplate-alien .sm_box::after,
|
|
.sheet-rolltemplate-alien .camelBox::before,
|
|
.sheet-rolltemplate-alien .camelBox::after {
|
|
position: absolute;
|
|
inset: 0;
|
|
content: "";
|
|
background: var(--contentBackColor);
|
|
z-index: -5;
|
|
clip-path: polygon(20px 0, calc(100% - 5px) 0%, 100% 5px, 100% calc(100% - 5px), calc(100% - 5px) 100%, 20px 100%, 0% calc(100% - 15px), 0 15px);
|
|
}
|
|
.ui-dialog .charactersheet .border::after,
|
|
.ui-dialog .charactersheet .sm_box::after,
|
|
.ui-dialog .charactersheet .camelBox::after,
|
|
.sheet-rolltemplate-alien .border::after,
|
|
.sheet-rolltemplate-alien .sm_box::after,
|
|
.sheet-rolltemplate-alien .camelBox::after {
|
|
z-index: -5;
|
|
background: var(--img-softblur);
|
|
opacity: 0;
|
|
transition: opacity 2000ms;
|
|
}
|
|
.ui-dialog .charactersheet .border:hover::after,
|
|
.ui-dialog .charactersheet .sm_box:hover::after,
|
|
.ui-dialog .charactersheet .camelBox:hover::after,
|
|
.sheet-rolltemplate-alien .border:hover::after,
|
|
.sheet-rolltemplate-alien .sm_box:hover::after,
|
|
.sheet-rolltemplate-alien .camelBox:hover::after {
|
|
opacity: 1;
|
|
transition: opacity 300ms;
|
|
}
|
|
.ui-dialog .charactersheet .border.bottom,
|
|
.ui-dialog .charactersheet .sm_box.bottom,
|
|
.ui-dialog .charactersheet .camelBox.bottom,
|
|
.sheet-rolltemplate-alien .border.bottom,
|
|
.sheet-rolltemplate-alien .sm_box.bottom,
|
|
.sheet-rolltemplate-alien .camelBox.bottom {
|
|
padding: 1rem 1rem 1rem 1rem;
|
|
}
|
|
.ui-dialog .charactersheet .border.bottom::before, .ui-dialog .charactersheet .border.bottom::after,
|
|
.ui-dialog .charactersheet .sm_box.bottom::before,
|
|
.ui-dialog .charactersheet .sm_box.bottom::after,
|
|
.ui-dialog .charactersheet .camelBox.bottom::before,
|
|
.ui-dialog .charactersheet .camelBox.bottom::after,
|
|
.sheet-rolltemplate-alien .border.bottom::before,
|
|
.sheet-rolltemplate-alien .border.bottom::after,
|
|
.sheet-rolltemplate-alien .sm_box.bottom::before,
|
|
.sheet-rolltemplate-alien .sm_box.bottom::after,
|
|
.sheet-rolltemplate-alien .camelBox.bottom::before,
|
|
.sheet-rolltemplate-alien .camelBox.bottom::after {
|
|
clip-path: polygon(20px 0, calc(100% - 5px) 0%, 100% 5px, 100% calc(100% - 5px), calc(100% - 5px) 100%, 5px 100%, 0% calc(100% - 5px), 0 15px);
|
|
}
|
|
.ui-dialog .charactersheet .border.short,
|
|
.ui-dialog .charactersheet .sm_box.short,
|
|
.ui-dialog .charactersheet .camelBox.short,
|
|
.sheet-rolltemplate-alien .border.short,
|
|
.sheet-rolltemplate-alien .sm_box.short,
|
|
.sheet-rolltemplate-alien .camelBox.short {
|
|
padding: 1rem 1rem 15px 1rem;
|
|
}
|
|
.ui-dialog .charactersheet .border.short::before, .ui-dialog .charactersheet .border.short::after,
|
|
.ui-dialog .charactersheet .sm_box.short::before,
|
|
.ui-dialog .charactersheet .sm_box.short::after,
|
|
.ui-dialog .charactersheet .camelBox.short::before,
|
|
.ui-dialog .charactersheet .camelBox.short::after,
|
|
.sheet-rolltemplate-alien .border.short::before,
|
|
.sheet-rolltemplate-alien .border.short::after,
|
|
.sheet-rolltemplate-alien .sm_box.short::before,
|
|
.sheet-rolltemplate-alien .sm_box.short::after,
|
|
.sheet-rolltemplate-alien .camelBox.short::before,
|
|
.sheet-rolltemplate-alien .camelBox.short::after {
|
|
clip-path: polygon(20px 0, calc(100% - 5px) 0%, 100% 5px, 100% calc(100% - 5px), calc(100% - 5px) 100%, calc(50% + 10px) 100%, 50% calc(100% - 10px), 10px calc(100% - 10px), 0% calc(100% - 18px), 0 15px);
|
|
}
|
|
.ui-dialog .charactersheet .border:not(:first-of-type)::before, .ui-dialog .charactersheet .border:not(:first-of-type)::after,
|
|
.ui-dialog .charactersheet .sm_box:not(:first-of-type)::before,
|
|
.ui-dialog .charactersheet .sm_box:not(:first-of-type)::after,
|
|
.ui-dialog .charactersheet .camelBox:not(:first-of-type)::before,
|
|
.ui-dialog .charactersheet .camelBox:not(:first-of-type)::after,
|
|
.sheet-rolltemplate-alien .border:not(:first-of-type)::before,
|
|
.sheet-rolltemplate-alien .border:not(:first-of-type)::after,
|
|
.sheet-rolltemplate-alien .sm_box:not(:first-of-type)::before,
|
|
.sheet-rolltemplate-alien .sm_box:not(:first-of-type)::after,
|
|
.sheet-rolltemplate-alien .camelBox:not(:first-of-type)::before,
|
|
.sheet-rolltemplate-alien .camelBox:not(:first-of-type)::after {
|
|
clip-path: polygon(5px 0, calc(100% - 5px) 0%, 100% 5px, 100% calc(100% - 5px), calc(100% - 5px) 100%, 5px 100%, 0% calc(100% - 5px), 0 5px);
|
|
}
|
|
.ui-dialog .charactersheet .sm_box,
|
|
.sheet-rolltemplate-alien .sm_box {
|
|
padding: 0 1rem 1rem 1rem;
|
|
}
|
|
.ui-dialog .charactersheet .sm_box::before, .ui-dialog .charactersheet .sm_box::after,
|
|
.sheet-rolltemplate-alien .sm_box::before,
|
|
.sheet-rolltemplate-alien .sm_box::after {
|
|
clip-path: polygon(5px 0, calc(100% - 5px) 0%, 100% 5px, 100% calc(100% - 5px), calc(100% - 5px) 100%, 5px 100%, 0% calc(100% - 5px), 0 5px);
|
|
}
|
|
.ui-dialog .charactersheet .camelBox,
|
|
.sheet-rolltemplate-alien .camelBox {
|
|
position: relative;
|
|
justify-self: center;
|
|
align-self: center;
|
|
mix-blend-mode: normal;
|
|
padding-bottom: 15px;
|
|
padding-top: 2px;
|
|
z-index: -1;
|
|
filter: drop-shadow(0px -5px 0px var(--shadowColor)) drop-shadow(3px 0 0px var(--shadowColor)) drop-shadow(-3px 0 0px var(--shadowColor));
|
|
}
|
|
.ui-dialog .charactersheet .camelBox:not(:first-of-type),
|
|
.sheet-rolltemplate-alien .camelBox:not(:first-of-type) {
|
|
margin-top: 5px;
|
|
}
|
|
.ui-dialog .charactersheet .camelBox h1,
|
|
.ui-dialog .charactersheet .camelBox [aria-level="1"],
|
|
.ui-dialog .charactersheet .camelBox h2,
|
|
.ui-dialog .charactersheet .camelBox [aria-level="2"],
|
|
.sheet-rolltemplate-alien .camelBox h1,
|
|
.sheet-rolltemplate-alien .camelBox [aria-level="1"],
|
|
.sheet-rolltemplate-alien .camelBox h2,
|
|
.sheet-rolltemplate-alien .camelBox [aria-level="2"] {
|
|
all: unset;
|
|
position: absolute;
|
|
top: 0;
|
|
left: 50%;
|
|
height: 20px;
|
|
text-transform: uppercase;
|
|
background: var(--camelHeadBack);
|
|
padding: 0px 1rem;
|
|
font-family: var(--font-thin-header);
|
|
font-size: 12px;
|
|
color: var(--camelHeadColor);
|
|
transform: translate(-50%, -50%);
|
|
clip-path: polygon(10px 0, calc(100% - 10px) 0%, 100% 50%, calc(100% - 10px) 100%, 10px 100%, 0% 50%);
|
|
}
|
|
.ui-dialog .charactersheet .camelBox::before, .ui-dialog .charactersheet .camelBox::after,
|
|
.sheet-rolltemplate-alien .camelBox::before,
|
|
.sheet-rolltemplate-alien .camelBox::after {
|
|
clip-path: polygon(5px 0, calc(100% - 5px) 0%, 100% 5px, 100% calc(100% - 5px), calc(100% - 5px) 100%, 5px 100%, 0% calc(100% - 5px), 0 5px);
|
|
}
|
|
.ui-dialog .charactersheet .camelBox input,
|
|
.sheet-rolltemplate-alien .camelBox input {
|
|
text-align: center;
|
|
font-family: var(--font-thick-header);
|
|
}
|
|
.ui-dialog .charactersheet .camelBox textarea,
|
|
.sheet-rolltemplate-alien .camelBox textarea {
|
|
margin-top: 5px;
|
|
}
|
|
.ui-dialog .charactersheet .camelBox:last-of-type,
|
|
.sheet-rolltemplate-alien .camelBox:last-of-type {
|
|
padding: 2px 10px 5px 10px;
|
|
}
|
|
.ui-dialog .charactersheet label.__big,
|
|
.sheet-rolltemplate-alien label.__big {
|
|
position: relative;
|
|
z-index: 1;
|
|
margin: 5px;
|
|
padding: 0;
|
|
transition: all 300ms;
|
|
}
|
|
.ui-dialog .charactersheet label.__big::before,
|
|
.sheet-rolltemplate-alien label.__big::before {
|
|
position: absolute;
|
|
content: "";
|
|
width: 40px;
|
|
aspect-ratio: 1;
|
|
left: 50%;
|
|
top: 50%;
|
|
transform: translate(-50%, -50%);
|
|
background: var(--circleBorderColor);
|
|
border-radius: 100%;
|
|
border: 3px solid var(--circleBorderColor);
|
|
transition: all 300ms;
|
|
z-index: -1;
|
|
}
|
|
.ui-dialog .charactersheet label.__big::after,
|
|
.sheet-rolltemplate-alien label.__big::after {
|
|
position: absolute;
|
|
content: "";
|
|
width: 37px;
|
|
aspect-ratio: 1;
|
|
left: 50%;
|
|
top: 50%;
|
|
transform: translate(-50%, -50%);
|
|
background: var(--circleBackColor);
|
|
border-radius: 100%;
|
|
border: 2px solid transparent;
|
|
border-top: 2px solid var(--circleBorderColor);
|
|
border-bottom: 2px solid var(--circleBorderColor);
|
|
transition: all 300ms;
|
|
z-index: -1;
|
|
}
|
|
.ui-dialog .charactersheet label.__big input,
|
|
.sheet-rolltemplate-alien label.__big input {
|
|
background: none !important;
|
|
border: none;
|
|
outline: none;
|
|
width: 25px;
|
|
aspect-ratio: 1;
|
|
text-align: center;
|
|
font-family: var(--font-thick-header);
|
|
font-size: 16px;
|
|
color: var(--circleInputTextColor);
|
|
}
|
|
.ui-dialog .charactersheet label.__big:hover::before, .ui-dialog .charactersheet label.__big:focus-within::before,
|
|
.sheet-rolltemplate-alien label.__big:hover::before,
|
|
.sheet-rolltemplate-alien label.__big:focus-within::before {
|
|
border-color: var(--hoverHighlightBack);
|
|
}
|
|
.ui-dialog .charactersheet label.__big:hover::after, .ui-dialog .charactersheet label.__big:focus-within::after,
|
|
.sheet-rolltemplate-alien label.__big:hover::after,
|
|
.sheet-rolltemplate-alien label.__big:focus-within::after {
|
|
background: var(--circleBackColor);
|
|
border-top: 2px solid var(--hoverHighlightBack);
|
|
border-bottom: 2px solid transparent;
|
|
animation: rotate 2000ms infinite linear;
|
|
}
|
|
@keyframes rotate {
|
|
from {
|
|
transform: translate(-50%, -50%) rotate(0deg);
|
|
}
|
|
to {
|
|
transform: translate(-50%, -50%) rotate(360deg);
|
|
}
|
|
}
|
|
.ui-dialog .charactersheet .inventory .repitem .collapse,
|
|
.sheet-rolltemplate-alien .inventory .repitem .collapse {
|
|
top: calc(var(--gap) * -1);
|
|
right: calc(var(--gap) * -1);
|
|
}
|
|
.ui-dialog .charactersheet textarea,
|
|
.sheet-rolltemplate-alien textarea {
|
|
all: unset;
|
|
}
|
|
.ui-dialog .charactersheet .adaptive--text,
|
|
.ui-dialog .charactersheet textarea:not(.adaptive--text__textarea),
|
|
.sheet-rolltemplate-alien .adaptive--text,
|
|
.sheet-rolltemplate-alien textarea:not(.adaptive--text__textarea) {
|
|
resize: none;
|
|
box-sizing: border-box;
|
|
width: 100%;
|
|
height: 100%;
|
|
border-radius: 5px;
|
|
line-height: 1.2;
|
|
font-family: var(--font-text);
|
|
font-size: 1.4rem;
|
|
color: var(--textColor);
|
|
}
|
|
.ui-dialog .charactersheet .adaptive--text:hover, .ui-dialog .charactersheet .adaptive--text:focus,
|
|
.ui-dialog .charactersheet textarea:not(.adaptive--text__textarea):hover,
|
|
.ui-dialog .charactersheet textarea:not(.adaptive--text__textarea):focus,
|
|
.sheet-rolltemplate-alien .adaptive--text:hover,
|
|
.sheet-rolltemplate-alien .adaptive--text:focus,
|
|
.sheet-rolltemplate-alien textarea:not(.adaptive--text__textarea):hover,
|
|
.sheet-rolltemplate-alien textarea:not(.adaptive--text__textarea):focus {
|
|
box-shadow: 0 -2px 2px var(--hoverHighlightBack), inset 0 1px 2px var(--hoverHighlightBack);
|
|
}
|
|
@media (max-width: 450px) {
|
|
.ui-dialog .charactersheet .tab,
|
|
.sheet-rolltemplate-alien .tab {
|
|
padding: 3rem 5px;
|
|
}
|
|
}
|
|
.ui-dialog .charactersheet .no_control + fieldset + .repcontainer + .repcontrol,
|
|
.sheet-rolltemplate-alien .no_control + fieldset + .repcontainer + .repcontrol {
|
|
display: none !important;
|
|
} |