@import url("https://fonts.googleapis.com/css2?family=Nunito+Sans:ital,opsz,wght@0,6..12,200..1000;1,6..12,200..1000&display=swap"); @import url("https://fonts.googleapis.com/css2?family=Playpen+Sans:wght@100..800&display=swap"); @import url("https://fonts.googleapis.com/css?family=Permanent+Marker&display=swap"); @import url("https://fonts.googleapis.com/css?family=Silkscreen&display=swap"); @import url("https://fonts.googleapis.com/css2?family=DotGothic16&display=swap"); @import url("https://fonts.googleapis.com/css2?family=Jersey+10&family=Tiny5&display=swap"); html { box-sizing: border-box; font-size: 12px; } html .characterviewer, html .tab-content, html .sheetform, html .charactersheet { box-sizing: border-box; height: calc(100% - 1px); } .charsheet * { box-sizing: border-box; height: unset; width: unset; padding: unset; margin: unset; font-family: unset; font-size: unset; font-weight: unset; line-height: unset; color: unset; border: unset; border-radius: unset; background: unset; background-color: unset; text-shadow: unset; box-shadow: unset; } .charsheet h1, .charsheet h2, .charsheet h3, .charsheet h4, .charsheet h5 { font-size: unset; line-height: unset; color: unset; } .charsheet p, .charsheet input, .charsheet input[type=number], .charsheet textarea, .charsheet select, .charsheet button, .charsheet button[type=roll], .charsheet label { display: unset; width: unset; height: unset; padding: unset; margin-bottom: unset; font-family: unset; font-size: unset; font-weight: unset; text-shadow: none; line-height: unset; color: unset; border: unset; border-radius: unset; background: unset; background-color: unset; box-shadow: unset; } .charsheet button[type=roll]:before { display: none; } .charsheet input[disabled], .charsheet select[disabled], .charsheet textarea[disabled], .charsheet input[readonly], .charsheet select[readonly], .charsheet textarea[readonly] { background-color: unset; border-color: unset; } .charsheet * { font-size: 1em; box-sizing: border-box; font-family: inherit; } .charsheet fieldset { background: transparent; } .charsheet span { word-break: break-word; } input[type=number] { -webkit-appearance: textfield; -moz-appearance: textfield; appearance: textfield; } input[type=number]::-webkit-outer-spin-button, input[type=number]::-webkit-inner-spin-button { -webkit-appearance: none; appearance: none; margin: 0; } .ui-dialog .largedialog { padding: 0; } .ui-dialog .charsheet { padding: 0; } * { color: var(--text-color, rgb(34, 34, 34)); font: normal 1rem/1.4 "Nunito Sans", sans-serif; } .charactersheet.tab-pane.charsheet { position: relative; background-color: transparent; } .charactersheet.tab-pane.charsheet::before { background-image: url("https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Slugblaster/assets/nasty-photocopy-dark.png"); content: " "; display: block; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-repeat: no-repeat; background-size: 100% 100%; background-position: bottom; } div#tab-content.tab-content .attributesabilities { min-width: 525px; } div#tab-content.tab-content .attributesabilities .divider { border: none; } html .characterviewer { display: grid !important; grid-template-rows: auto 1fr; } html .characterviewer .content { margin-bottom: 0; } html .characterviewer .charsheet { padding: 0; } html .characterviewer .nav-tabs { padding-top: 0.25rem; margin-left: 0; margin-bottom: 0; border: none; } html .characterviewer .nav-tabs > li { margin-bottom: 0; } html .characterviewer .nav-tabs > li.active > a { opacity: 1 !important; color: var(--nav-tab-color); background: var(--nav-tab-background); } html .characterviewer .nav-tabs > li > a { border: none !important; padding-block: 1rem 0.25rem; padding-inline: 0.5rem; font-family: "Tiny5", "Jersey 10", "DotGothic16", "Comic Sans MS", serif; font-size: 1.25rem; font-weight: normal; text-transform: uppercase; letter-spacing: 2px; } html .characterviewer .nav-tabs > li > a:hover, html .characterviewer .nav-tabs > li > a:active { color: var(--nav-tab-color); } html .characterviewer .nav-tabs > li > a:hover { background: var(--nav-tab-background-hover); } html .characterviewer .nav-tabs > li > a:active { background: var(--nav-tab-background-active); } html .characterviewer .nav-tabs > li.active > a, html .characterviewer .nav-tabs > li.active > a:hover, html .characterviewer .nav-tabs > li.active > a:focus, html .characterviewer .nav-tabs > li:not(.active) > a, html .characterviewer .nav-tabs > li:not(.active) > a:hover, html .characterviewer .nav-tabs > li:not(.active) > a:focus { text-decoration: none; } html .characterviewer .nav-tabs > li:nth-child(4) > a:nth-child(1) { opacity: 0.3; } html .characterviewer .nav-tabs > li:nth-child(4) > a:nth-child(1):hover, html .characterviewer .nav-tabs > li:nth-child(4) > a:nth-child(1):focus { opacity: 1; } html .charsheet .slugblaster .nav__action[type=action] { color: var(--nav-color); background-color: var(--nav-background); } html .charsheet .slugblaster .nav__action[type=action]:hover { color: var(--nav-color-hover); background-color: var(--nav-background-hover); } html .charsheet .slugblaster .nav__action[type=action]:active { color: var(--nav-color-active); background-color: var(--nav-background-active); } .slugblaster__sheet-mode[value=character] ~ * .character { display: grid; } .slugblaster__sheet-mode[value=character] ~ * .nav--character { color: #292828 !important; background-color: var(--nav-color) !important; pointer-events: none; } .slugblaster__sheet-mode[value=crew] ~ * .crew { display: grid; } .slugblaster__sheet-mode[value=crew] ~ * .nav--crew { color: #292828 !important; background-color: var(--nav-color) !important; pointer-events: none; } .slugblaster__sheet-mode[value=options] ~ * .options { display: grid; } .slugblaster__sheet-mode[value=options] ~ * .nav--options { color: #292828 !important; background-color: var(--nav-color) !important; pointer-events: none; } .character, .crew, .options { display: none; } .sheet-rolltemplate-slugcast, .sheet-rolltemplate-slugblaster { /** * Basic typography style for copy text */ position: relative; margin-right: 1rem; } .sheet-rolltemplate-slugcast label, .sheet-rolltemplate-slugblaster label { display: block; color: var(--label-color); font-family: "Nunito Sans", sans-serif; text-transform: lowercase; font-variant: small-caps; margin: 0; } .sheet-rolltemplate-slugcast label span, .sheet-rolltemplate-slugblaster label span { font-weight: normal; font-variant: normal; text-transform: none; } .sheet-rolltemplate-slugcast span + label, .sheet-rolltemplate-slugblaster span + label { letter-spacing: 2px; font-weight: 900; } .sheet-rolltemplate-slugcast .pictos, .sheet-rolltemplate-slugblaster .pictos { font-family: Pictos; } .sheet-rolltemplate-slugcast .translation, .sheet-rolltemplate-slugblaster .translation { display: none; } .sheet-rolltemplate-slugcast::after, .sheet-rolltemplate-slugblaster::after { content: " "; display: block; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-size: cover; background-repeat: no-repeat; background-position: 50% 0; background-image: url("https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Slugblaster/assets/nasty-photocopy.png"); z-index: 1; } .sheet-rolltemplate-slugcast .sheet-roll, .sheet-rolltemplate-slugblaster .sheet-roll { position: relative; display: grid; gap: 0.5rem 0.5rem; z-index: 2; font-family: "Nunito Sans", sans-serif; line-height: inherit; } .sheet-rolltemplate-slugcast .sheet-roll__header, .sheet-rolltemplate-slugcast .sheet-roll__content, .sheet-rolltemplate-slugblaster .sheet-roll__header, .sheet-rolltemplate-slugblaster .sheet-roll__content { padding: 0.5rem; } .sheet-rolltemplate-slugcast .sheet-roll__header, .sheet-rolltemplate-slugblaster .sheet-roll__header { display: flex; flex-wrap: wrap; gap: 0 0.5rem; background-color: #6a4d9a; color: #fff; justify-content: flex-end; } .sheet-rolltemplate-slugcast .sheet-roll__header span, .sheet-rolltemplate-slugblaster .sheet-roll__header span { font-family: "Playpen Sans", "Comic Sans MS", cursive; font-size: 1.125rem; font-variant: small-caps; } .sheet-rolltemplate-slugcast .sheet-roll__header--character_name, .sheet-rolltemplate-slugblaster .sheet-roll__header--character_name { font-weight: 700; } .sheet-rolltemplate-slugcast .sheet-roll__content, .sheet-rolltemplate-slugblaster .sheet-roll__content { display: grid; gap: 0.5rem 0.5rem; } .sheet-rolltemplate-slugcast .sheet-roll__title, .sheet-rolltemplate-slugblaster .sheet-roll__title { font-family: "Playpen Sans", "Comic Sans MS", serif; font-size: 2rem; text-transform: uppercase; font-weight: 700; } .sheet-rolltemplate-slugcast .sheet-roll__subtitle, .sheet-rolltemplate-slugblaster .sheet-roll__subtitle { font-size: 1rem; } .sheet-rolltemplate-slugcast .sheet-roll__dice, .sheet-rolltemplate-slugblaster .sheet-roll__dice { display: flex; flex-wrap: wrap; gap: 0.5rem 0.5rem; align-items: center; justify-content: space-evenly; justify-content: center; } .sheet-rolltemplate-slugcast .sheet-roll__dice--roll, .sheet-rolltemplate-slugblaster .sheet-roll__dice--roll { display: grid; place-items: center; width: 5rem; aspect-ratio: 1; grid-row: 1/-1; grid-column-start: 1; outline: 1px solid #292828; outline-offset: 0; } .sheet-rolltemplate-slugcast .sheet-roll__dice--roll .inlinerollresult, .sheet-rolltemplate-slugblaster .sheet-roll__dice--roll .inlinerollresult { display: block; width: inherit; font-family: "Playpen Sans", "Comic Sans MS", serif; font-size: 5rem; line-height: 5rem; text-align: center; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; background-color: #292828; -webkit-text-stroke-width: 1px; -webkit-text-stroke-color: #292828; } .sheet-rolltemplate-slugcast .sheet-roll__result, .sheet-rolltemplate-slugblaster .sheet-roll__result { text-align: justify; font-family: "Playpen Sans", "Comic Sans MS", cursive; } .sheet-rolltemplate-slugcast .sheet-roll__result--label, .sheet-rolltemplate-slugblaster .sheet-roll__result--label { font-weight: 700; text-transform: uppercase; } .sheet-rolltemplate-slugcast .sheet-roll__die, .sheet-rolltemplate-slugblaster .sheet-roll__die { background-color: #292828; border-radius: 1rem; width: 3rem; aspect-ratio: 1; text-align: center; } .sheet-rolltemplate-slugcast .sheet-roll__die--1, .sheet-rolltemplate-slugblaster .sheet-roll__die--1 { padding: 0; margin: 0; font-size: 2rem; line-height: normal; font-size: 0; } .sheet-rolltemplate-slugcast .sheet-roll__die--1 img, .sheet-rolltemplate-slugblaster .sheet-roll__die--1 img { border-radius: 4px; } .sheet-rolltemplate-slugcast .sheet-roll__die--2, .sheet-rolltemplate-slugblaster .sheet-roll__die--2 { padding: 0; margin: 0; font-size: 2rem; line-height: normal; font-size: 0; } .sheet-rolltemplate-slugcast .sheet-roll__die--2 img, .sheet-rolltemplate-slugblaster .sheet-roll__die--2 img { border-radius: 4px; } .sheet-rolltemplate-slugcast .sheet-roll__die--3, .sheet-rolltemplate-slugblaster .sheet-roll__die--3 { padding: 0; margin: 0; font-size: 2rem; line-height: normal; font-size: 0; } .sheet-rolltemplate-slugcast .sheet-roll__die--3 img, .sheet-rolltemplate-slugblaster .sheet-roll__die--3 img { border-radius: 4px; } .sheet-rolltemplate-slugcast .sheet-roll__die--4, .sheet-rolltemplate-slugblaster .sheet-roll__die--4 { padding: 0; margin: 0; font-size: 2rem; line-height: normal; font-size: 0; } .sheet-rolltemplate-slugcast .sheet-roll__die--4 img, .sheet-rolltemplate-slugblaster .sheet-roll__die--4 img { border-radius: 4px; } .sheet-rolltemplate-slugcast .sheet-roll__die--5, .sheet-rolltemplate-slugblaster .sheet-roll__die--5 { padding: 0; margin: 0; font-size: 2rem; line-height: normal; font-size: 0; } .sheet-rolltemplate-slugcast .sheet-roll__die--5 img, .sheet-rolltemplate-slugblaster .sheet-roll__die--5 img { border-radius: 4px; } .sheet-rolltemplate-slugcast .sheet-roll__die--6, .sheet-rolltemplate-slugblaster .sheet-roll__die--6 { padding: 0; margin: 0; font-size: 2rem; line-height: normal; font-size: 0; } .sheet-rolltemplate-slugcast .sheet-roll__die--6 img, .sheet-rolltemplate-slugblaster .sheet-roll__die--6 img { border-radius: 4px; } .sheet-rolltemplate-slugcast .sheet-roll__die--1, .sheet-rolltemplate-slugcast .sheet-roll__die--2, .sheet-rolltemplate-slugcast .sheet-roll__die--3, .sheet-rolltemplate-slugblaster .sheet-roll__die--1, .sheet-rolltemplate-slugblaster .sheet-roll__die--2, .sheet-rolltemplate-slugblaster .sheet-roll__die--3 { color: rgb(135.8, 112.6, 174.2); } .sheet-rolltemplate-slugcast .sheet-roll__die--4, .sheet-rolltemplate-slugcast .sheet-roll__die--5, .sheet-rolltemplate-slugblaster .sheet-roll__die--4, .sheet-rolltemplate-slugblaster .sheet-roll__die--5 { color: #f180b3; } .sheet-rolltemplate-slugcast .sheet-roll__die--6, .sheet-rolltemplate-slugblaster .sheet-roll__die--6 { color: #ffd456; } .sheet-rolltemplate-slugcast .sheet-roll__boosts, .sheet-rolltemplate-slugcast .sheet-roll__kicks, .sheet-rolltemplate-slugcast .sheet-roll__dares, .sheet-rolltemplate-slugblaster .sheet-roll__boosts, .sheet-rolltemplate-slugblaster .sheet-roll__kicks, .sheet-rolltemplate-slugblaster .sheet-roll__dares { display: flex; gap: 0.5rem 0.5rem; } .sheet-rolltemplate-slugcast .sheet-roll__boosts > label, .sheet-rolltemplate-slugcast .sheet-roll__kicks > label, .sheet-rolltemplate-slugcast .sheet-roll__dares > label, .sheet-rolltemplate-slugblaster .sheet-roll__boosts > label, .sheet-rolltemplate-slugblaster .sheet-roll__kicks > label, .sheet-rolltemplate-slugblaster .sheet-roll__dares > label { font-family: "Nunito Sans", sans-serif; font-size: 0.8em; text-transform: uppercase; } .sheet-rolltemplate-slugcast .sheet-roll__boosts > span, .sheet-rolltemplate-slugcast .sheet-roll__kicks > span, .sheet-rolltemplate-slugcast .sheet-roll__dares > span, .sheet-rolltemplate-slugblaster .sheet-roll__boosts > span, .sheet-rolltemplate-slugblaster .sheet-roll__kicks > span, .sheet-rolltemplate-slugblaster .sheet-roll__dares > span { font-family: "Playpen Sans", "Comic Sans MS", cursive; } .sheet-rolltemplate-slugcast .sheet-roll__broadcast, .sheet-rolltemplate-slugblaster .sheet-roll__broadcast { display: grid; gap: 0.5rem 0.5rem; margin-top: 1rem; } .sheet-rolltemplate-slugcast .sheet-roll__broadcast--value, .sheet-rolltemplate-slugblaster .sheet-roll__broadcast--value { display: block; } .sheet-rolltemplate-slugcast .sheet-roll__broadcast--key, .sheet-rolltemplate-slugblaster .sheet-roll__broadcast--key { border-top: 1px dashed #292828; text-transform: uppercase; letter-spacing: 0.05rem; font-weight: 700; font-size: 0.8em; margin: 0; } .sheet-rolltemplate-slugcast .inlinerollresult, .sheet-rolltemplate-slugblaster .inlinerollresult { border: none !important; background-color: transparent !important; padding: 0; margin: 0; font-family: "Playpen Sans", "Comic Sans MS", cursive; } .sheet-rolltemplate-slugcast .inlinerollresult.fullcrit, .sheet-rolltemplate-slugcast .inlinerollresult.fullfail, .sheet-rolltemplate-slugcast .inlinerollresult.importantroll, .sheet-rolltemplate-slugblaster .inlinerollresult.fullcrit, .sheet-rolltemplate-slugblaster .inlinerollresult.fullfail, .sheet-rolltemplate-slugblaster .inlinerollresult.importantroll { border: none; } * { --label-color: #292828; --text-color: #292828; --input-background: rgba(237, 237, 237, 0.5); --input-background-active: rgba(0, 173, 239, 0.1); --input-background-disabled: rgba(237, 237, 237, 0.1); --input-border-color: #292828; --input-border-color-active: #ec008b; --input-border-color-disabled: rgb(153, 153, 153); --input-color: rgb(68, 68, 68); --input-color-active: #292828; --input-color-disabled: rgb(153, 153, 153); --input-border: 1px dashed var(--input-border-color); --input-border-active: 2px solid var(--input-border-color-active); --input-border-disabled: 2px solid var(--input-border-color-disabled); --input-border-radius: 0.5rem; --button-background: rgba(135.8, 112.6, 174.2, 0.8); --button-background-active: rgba(84.8, 61.6, 123.2, 0.8); --button-background-hover: rgba(106, 77, 154, 0.8); --button-color: #fff; --button-color-active: #fff; --button-color-hover: #fff; --nav-background: rgba(241, 128, 179, 0.8); --nav-background-active: rgba(192.8, 102.4, 143.2, 0.8); --nav-background-hover: rgba(243.8, 153.4, 194.2, 0.8); --nav-color: #fff; --nav-color-active: #fff; --nav-color-hover: #fff; --nav-tab-color: #fff; --nav-tab-background: rgb(84.8, 61.6, 123.2); --nav-tab-background-active: rgb(0, 104.8, 119.2); --nav-tab-background-hover: rgb(51, 155.8, 170.2); --panel-background: #fff; --panel-background-accent: #6a4d9a; --roll-template-header: #6a4d9a; } .sheet-darkmode *, .sheet-rolltemplate-slugblaster.sheet-rolltemplate-darkmode { --label-color: #fff; --text-color: #fff; --panel-background: #292828; --panel-background-accent: #6a4d9a; --icon-filter: invert(1); --input-background: rgba(41, 40, 40, 0.5); --input-background-active: rgba(0, 0, 0, 0.5); --input-background-disabled: rgba(153, 153, 153, 0.1); --input-border-color: #fff; --input-border-color-active: #6a4d9a; --input-border-color-disabled: rgb(153, 153, 153); --input-color: #fff; --input-color-active: #fff; --input-color-disabled: rgb(153, 153, 153); --input-border: 1px dashed var(--input-border-color); --input-border-active: 2px solid var(--input-border-color-active); --input-border-disabled: 2px solid var(--input-border-color-disabled); --input-border-radius: 0.5rem; } .ul-dialog { width: 576px; } html .charsheet .slugblaster { /** * Clear inner floats */ /** * Main content containers * 1. Make the container full-width with a maximum width * 2. Center it in the viewport * 3. Leave some space on the edges, especially valuable on small screens */ /** * Hide text while making it readable for screen readers * 1. Needed in WebKit-based browsers because of an implementation bug; * See: https://code.google.com/p/chromium/issues/detail?id=457146 */ /** * Hide element while making it readable for screen readers * Shamelessly borrowed from HTML5Boilerplate: * https://github.com/h5bp/html5-boilerplate/blob/master/src/css/main.css#L119-L133 */ /** * Basic typography style for copy text */ } html .charsheet .slugblaster .row__header { font-family: "Nunito Sans", sans-serif; font-size: 1.125rem; text-transform: uppercase; } html .charsheet .slugblaster input[type=number], html .charsheet .slugblaster input[type=text], html .charsheet .slugblaster select, html .charsheet .slugblaster textarea { width: 100%; height: 2.5rem; background-color: var(--input-background); border-bottom: var(--input-border); font-family: "Playpen Sans", "Comic Sans MS", cursive; font-size: 1rem; line-height: 1rem; color: var(--input-color); transition: background-color 0.2s ease-in, color 0.2s ease-in, border 0.2s ease-in, padding 0.2s ease-in; padding-inline-start: 0.25rem; padding-block: 1px; } html .charsheet .slugblaster input[type=number]:active, html .charsheet .slugblaster input[type=number]:hover, html .charsheet .slugblaster input[type=number]:focus, html .charsheet .slugblaster input[type=text]:active, html .charsheet .slugblaster input[type=text]:hover, html .charsheet .slugblaster input[type=text]:focus, html .charsheet .slugblaster select:active, html .charsheet .slugblaster select:hover, html .charsheet .slugblaster select:focus, html .charsheet .slugblaster textarea:active, html .charsheet .slugblaster textarea:hover, html .charsheet .slugblaster textarea:focus { outline: transparent; background-color: var(--input-background-active); color: var(--input-color-active); border-bottom: var(--input-border-active); padding-inline-start: 0.5rem; } html .charsheet .slugblaster input[type=number]::-moz-placeholder, html .charsheet .slugblaster input[type=text]::-moz-placeholder, html .charsheet .slugblaster select::-moz-placeholder, html .charsheet .slugblaster textarea::-moz-placeholder { color: rgb(153, 153, 153); } html .charsheet .slugblaster input[type=number]::placeholder, html .charsheet .slugblaster input[type=text]::placeholder, html .charsheet .slugblaster select::placeholder, html .charsheet .slugblaster textarea::placeholder { color: rgb(153, 153, 153); } html .charsheet .slugblaster select { -webkit-appearance: none; -moz-appearance: none; appearance: none; background-image: url("https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Slugblaster/assets/chevron-down.svg"); filter: var(--icon-filter); background-position: 100% 50%; background-repeat: no-repeat; background-size: contain; } html .charsheet .slugblaster select option { background: var(--input-background); background-color: #ef4b31; color: var(--input-color); font-family: "Playpen Sans", "Comic Sans MS", cursive; font-size: 1rem; line-height: 1rem; } html .charsheet .slugblaster input[type=number] { text-align: center; } html .charsheet .slugblaster input[type=number][disabled], html .charsheet .slugblaster input[type=number][readonly] { cursor: default; background: var(--input-background-disabled); color: var(--input-color-disabled); border: var(--input-border-disabled); } html .charsheet .slugblaster textarea { min-height: 5rem; max-height: 10rem; resize: vertical; scrollbar-width: thin; scrollbar-color: var(--input-color-active) transparent; } @supports selector(::-webkit-scrollbar) { html .charsheet .slugblaster textarea::-webkit-scrollbar { width: 0.5rem; background: transparent; } html .charsheet .slugblaster textarea::-webkit-scrollbar-track { background: var(--input-color-active); } } html .charsheet .slugblaster span[name] { white-space: pre-wrap; } html .charsheet .slugblaster div:has(> label input) { align-self: center; } html .charsheet .slugblaster label input[type=checkbox] { -webkit-appearance: none; -moz-appearance: none; appearance: none; outline: none; width: 1.5rem; aspect-ratio: 1; background-repeat: no-repeat; background-size: contain; background-image: url("https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Slugblaster/assets/square.svg"); filter: var(--icon-filter); } html .charsheet .slugblaster label input[type=checkbox]:checked { background-image: url("https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Slugblaster/assets/square-check.svg"); } html .charsheet .slugblaster label input[type=checkbox] + span { margin-inline-start: 0.25rem; vertical-align: middle; } html .charsheet .slugblaster .clearfix::after { clear: both; content: ""; display: table; } html .charsheet .slugblaster .container { max-width: 1180px; /* 1 */ margin-left: auto; /* 2 */ margin-right: auto; /* 2 */ padding-left: 20px; /* 3 */ padding-right: 20px; /* 3 */ width: 100%; /* 1 */ } html .charsheet .slugblaster .hide-text { overflow: hidden; padding: 0; /* 1 */ text-indent: 101%; white-space: nowrap; } html .charsheet .slugblaster .visually-hidden:not(:focus):not(:active) { border: 0; clip-path: inset(50%); clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; white-space: nowrap; width: 1px; } html .charsheet .slugblaster .repcontainer { display: grid; } html .charsheet .slugblaster .repcontainer.editmode + .repcontrol { display: block !important; } html .charsheet .slugblaster .repcontainer.editmode + .repcontrol button.repcontrol_edit::before { background-image: url("https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Slugblaster/assets/lock-unlocked.svg"); filter: var(--icon-filter); } html .charsheet .slugblaster .repcontainer.editmode .repeating__delete { display: grid; } html .charsheet .slugblaster .repcontainer.editmode .repeating__edit { display: none !important; } html .charsheet .slugblaster .repitem { margin-bottom: 0.5rem; } html .charsheet .slugblaster .repcontrol_add, html .charsheet .slugblaster .repcontrol_edit, html .charsheet .slugblaster .repcontrol_del, html .charsheet .slugblaster .repcontrol_move { font-size: 0; } html .charsheet .slugblaster .repcontrol_add::before, html .charsheet .slugblaster .repcontrol_edit::before, html .charsheet .slugblaster .repcontrol_del::before, html .charsheet .slugblaster .repcontrol_move::before { content: ""; display: block; width: 1.5rem; aspect-ratio: 1; background-repeat: no-repeat; background-size: contain; filter: var(--icon-filter); } html .charsheet .slugblaster .repcontrol_add:hover, html .charsheet .slugblaster .repcontrol_edit:hover, html .charsheet .slugblaster .repcontrol_del:hover, html .charsheet .slugblaster .repcontrol_move:hover { background-color: transparent; } html .charsheet .slugblaster .repcontrol_add::before, html .charsheet .slugblaster .repcontrol_edit::before { width: 2rem; } html .charsheet .slugblaster .repcontrol_add::before { background-image: url("https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Slugblaster/assets/plus-square.svg"); } html .charsheet .slugblaster .repcontrol_edit::before { background-image: url("https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Slugblaster/assets/lock.svg"); } html .charsheet .slugblaster .repcontrol_del, html .charsheet .slugblaster .repcontrol_move { position: absolute; top: 50%; transform: translateY(-50%); } html .charsheet .slugblaster .repcontrol_del { right: 0.25rem; } html .charsheet .slugblaster .repcontrol_del::before { background-image: url("https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Slugblaster/assets/trash.svg"); } html .charsheet .slugblaster .repcontrol_move { left: 0.25rem; } html .charsheet .slugblaster .repcontrol_move::before { background-image: url("https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Slugblaster/assets/move.svg"); } html .charsheet .slugblaster .repcontainer .repitem .itemcontrol { background-color: transparent; } html .charsheet .slugblaster .repcontainer .repitem .itemcontrol:hover { background-color: rgb(243.8, 153.4, 194.2); mix-blend-mode: multiply; } html .charsheet .slugblaster label { display: block; color: var(--label-color); font-family: "Nunito Sans", sans-serif; text-transform: lowercase; font-variant: small-caps; margin: 0; } html .charsheet .slugblaster label span { font-weight: normal; font-variant: normal; text-transform: none; } html .charsheet .slugblaster span + label { letter-spacing: 2px; font-weight: 900; } html .charsheet .slugblaster .pictos { font-family: Pictos; } html .charsheet .slugblaster .translation { display: none; } html .charsheet .slugblaster .blade { position: relative; display: flex; flex-direction: column; row-gap: 0.5rem; min-width: 3rem; } html .charsheet .slugblaster .blade__wrapper { display: grid; gap: 0.5rem 0.5rem; overflow: hidden; } html .charsheet .slugblaster .blade__title::before { content: "_"; font-family: Pictos; margin-inline-end: 0.5rem; font-weight: normal; } html .charsheet .slugblaster .blade-toggle { position: relative; padding: 0.5rem; text-align: left; } html .charsheet .slugblaster .blade-toggle[type=action] { background-color: transparent; background-image: linear-gradient(135deg, #fff, #fff 75%, #ffd456 75%); border-radius: 0; padding: 0.25rem; color: #292828; } html .charsheet .slugblaster .blade-toggle__controller[value=on] ~ .blade__wrapper { display: none; } html .charsheet .slugblaster .blade-toggle__controller[value=on] ~ button.blade-toggle { height: 100%; } html .charsheet .slugblaster .blade-toggle__controller[value=on] ~ button.blade-toggle > .blade__title { top: 0.5rem; left: 45%; transform-origin: left top; white-space: nowrap; } html .charsheet .slugblaster .blade-toggle__controller[value=on] ~ button.blade-toggle > .blade__title::before { content: "&"; } html .charsheet .slugblaster .blob { position: relative; background-color: var(--panel-background); } html .charsheet .slugblaster .blob__wrapper { display: grid; row-gap: 0.5rem; overflow: hidden; } html .charsheet .slugblaster .blob__header, html .charsheet .slugblaster .blob__content { padding: 0.5rem; } html .charsheet .slugblaster .blob__header { position: relative; display: flex; flex-wrap: wrap; gap: 0.5rem 0.5rem; align-items: center; justify-content: space-between; display: grid; grid-template-columns: 1fr auto; } html .charsheet .slugblaster .blob--editor { grid-template-columns: 1fr auto; gap: 0.5rem 0.5rem; } html .charsheet .slugblaster .bubble__controller[value=on] ~ * .bubble__expand--collapse { display: block; } html .charsheet .slugblaster .bubble__controller[value="0"] ~ .bubble__content .bubble__collapse { margin-top: -100rem; } html .charsheet .slugblaster .bubble__controller[value="0"] ~ * .bubble__expand { transform: rotate(180deg); } html .charsheet .slugblaster .bubble__controller[value="0"] ~ * .bubble__expand--expand { display: block; } html .charsheet .slugblaster .bubble__header { display: grid; grid-template-columns: 1fr auto; gap: 0 0.5rem; } html .charsheet .slugblaster .bubble__content { overflow: hidden; } html .charsheet .slugblaster .bubble__collapse { transition: margin-top 0.5s; } html .charsheet .slugblaster .bubble__controls { display: flex; gap: 0.25rem; } html .charsheet .slugblaster .bubble__broadcast[type=roll], html .charsheet .slugblaster .bubble__expand { display: grid; width: 1.5rem; height: 1.5rem; aspect-ratio: 1; transition: transform 0.5s; } html .charsheet .slugblaster .bubble__broadcast[type=roll]:hover, html .charsheet .slugblaster .bubble__expand:hover { transform: translateY(-2px); } html .charsheet .slugblaster .bubble__broadcast[type=roll] { background-color: transparent; background-image: url("https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Slugblaster/assets/broadcast.svg"); background-repeat: no-repeat; background-size: contain; filter: var(--icon-filter); } html .charsheet .slugblaster .bubble__broadcast[type=roll] span.pictos { display: none; } html .charsheet .slugblaster .bubble__broadcast[type=roll]:hover, html .charsheet .slugblaster .bubble__broadcast[type=roll]:active, html .charsheet .slugblaster .bubble__broadcast[type=roll]:focus { background-color: transparent; background-image: url("https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Slugblaster/assets/broadcast.svg"); background-repeat: no-repeat; background-size: contain; } html .charsheet .slugblaster .bubble__expand { background-image: url("https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Slugblaster/assets/chevron-down.svg"); background-repeat: no-repeat; background-size: contain; filter: var(--icon-filter); } html .charsheet .slugblaster .bubble__expand--expand, html .charsheet .slugblaster .bubble__expand--collapse { display: none; } html .charsheet .slugblaster .bubble__expand input { outline: transparent; -webkit-appearance: none; -moz-appearance: none; appearance: none; opacity: 0; } html .charsheet .slugblaster button[type=action], html .charsheet .slugblaster button[type=roll] { background: var(--button-background); color: var(--button-color); border-radius: var(--button-border-radius); font-family: "Silkscreen", "DotGothic16", "Comic Sans MS", cursive; padding: 0; margin: 0; } html .charsheet .slugblaster button[type=action]:hover, html .charsheet .slugblaster button[type=roll]:hover { background: var(--button-background-hover); color: var(--button-color-hover); } html .charsheet .slugblaster button[type=action]:active, html .charsheet .slugblaster button[type=roll]:active { background: var(--button-background-active); color: var(--button-color-active); } html .charsheet .slugblaster .numcontroller { display: flex; gap: 1rem; align-items: center; justify-content: center; } html .charsheet .slugblaster .numcontroller__span[name] { font-size: 2.5rem; white-space: nowrap; } html .charsheet .slugblaster .numcontroller__increase, html .charsheet .slugblaster .numcontroller__decrease { display: flex; justify-content: center; align-items: center; height: auto; width: 2rem; aspect-ratio: 1; font-size: 1rem; } @media (max-width: 576px) { html .charsheet .slugblaster .numcontroller .numcontroller__span { font-size: 1.5rem; } html .charsheet .slugblaster .numcontroller .numcontroller__increase, html .charsheet .slugblaster .numcontroller .numcontroller__decrease { width: 1.5rem; } } html .charsheet .slugblaster .action__group { display: flex; } html .charsheet .slugblaster .action__group button:first-of-type { border-radius: 1rem 0 0 1rem; } html .charsheet .slugblaster .action__group button:last-of-type { border-radius: 0 1rem 1rem 0; } html .charsheet .slugblaster .action-pill { border-radius: 1rem; } html .charsheet .slugblaster .editor { height: 100%; position: relative; } html .charsheet .slugblaster .editor__controller[value="0"] ~ * .editor__view { display: grid; } html .charsheet .slugblaster .editor__controller[value=on] ~ * .editor__edit { display: grid; } html .charsheet .slugblaster .editor__wrapper { height: 100%; position: relative; } html .charsheet .slugblaster .editor__view, html .charsheet .slugblaster .editor__edit { display: none; transition: 0.3s cubic-bezier(0.95, 0.32, 0.37, 1.21); } html .charsheet .slugblaster .editor__edit { grid-template-rows: 1fr auto; -moz-column-gap: 1rem; column-gap: 1rem; } html .charsheet .slugblaster .editor__view label { border-top: var(--input-border); } html .charsheet .slugblaster .editor__icon { margin-inline: 0.5rem; } html .charsheet .slugblaster .editor__toggle { transition: 0.1s linear; } html .charsheet .slugblaster .editor__toggle:hover { transform: translateY(-0.2rem); text-shadow: 0 0.4rem 0.2rem rgba(239, 75, 49, 0.2); } html .charsheet .slugblaster .editor__toggle:active { transform: translateY(0.4rem); } html .charsheet .slugblaster .editor__close { --close-size: 4rem; display: inline-flex; font-size: 3rem; text-decoration: none; width: var(--close-size); aspect-ratio: 1; transition: 0.5s linear; position: relative; z-index: 1; margin: auto; } html .charsheet .slugblaster .editor__close:hover::before { transform: scale(1); } html .charsheet .slugblaster .editor__close:hover::after { color: #fff; } html .charsheet .slugblaster .editor__close:active { transform: translateY(0.4rem); } html .charsheet .slugblaster .editor__close::before { content: ""; position: absolute; inset: 0; width: var(--close-size); aspect-ratio: 1; background-color: #ef4b31; border-radius: 50%; z-index: -1; transform: scale(0); transition: 0.3s cubic-bezier(0.95, 0.32, 0.37, 1.21); } html .charsheet .slugblaster .editor__close::after { content: "*"; font-family: Pictos; margin: auto; color: #ef4b31; } html .charsheet .slugblaster .minimizer { height: 100%; position: relative; } html .charsheet .slugblaster .minimizer__controller[value=on] ~ * .panel__content, html .charsheet .slugblaster .minimizer__controller[value=on] ~ * .blob__content { height: 0; margin-top: -100rem; } html .charsheet .slugblaster .edit-toggle { width: 2rem; aspect-ratio: 1; border-radius: 0.5rem; } html .charsheet .slugblaster .edit-toggle__controller[value="0"] ~ .edit-toggle__view { display: block; } html .charsheet .slugblaster .edit-toggle__controller[value=on] ~ .edit-toggle__edit { display: block; } html .charsheet .slugblaster .edit-toggle__view, html .charsheet .slugblaster .edit-toggle__edit { display: none; transition: 0.3s cubic-bezier(0.95, 0.32, 0.37, 1.21); } html .charsheet .slugblaster .edit-toggle__view .pictos, html .charsheet .slugblaster .edit-toggle__edit .pictos { font-size: 1.5rem; } html .charsheet .slugblaster .minimizer-toggle { width: 2rem; aspect-ratio: 1; border-radius: 0.5rem; } html .charsheet .slugblaster .minimizer-toggle__controller[value="0"] ~ .minimizer-toggle__view { display: block; } html .charsheet .slugblaster .minimizer-toggle__controller[value=on] ~ .minimizer-toggle__edit { display: block; } html .charsheet .slugblaster .minimizer-toggle__view, html .charsheet .slugblaster .minimizer-toggle__edit { display: none; transition: 0.3s cubic-bezier(0.95, 0.32, 0.37, 1.21); } html .charsheet .slugblaster .minimizer-toggle__view .pictos, html .charsheet .slugblaster .minimizer-toggle__edit .pictos { font-size: 1.5rem; } html .charsheet .slugblaster .broadcast { width: 2rem; aspect-ratio: 1; border-radius: 0.5rem; } html .charsheet .slugblaster .panel { position: relative; padding: 0.25rem; background-color: var(--panel-background); } html .charsheet .slugblaster .panel__wrapper { display: grid; row-gap: 0.5rem; overflow: hidden; } html .charsheet .slugblaster .panel__header, html .charsheet .slugblaster .panel__content { padding: 0.5rem; } html .charsheet .slugblaster .panel__header { position: relative; display: flex; flex-wrap: wrap; gap: 0.5rem 0.5rem; align-items: center; justify-content: space-between; display: grid; grid-template-columns: 1fr auto; border-bottom: none; } html .charsheet .slugblaster .panel__title, html .charsheet .slugblaster .character .signature__title, html .charsheet .slugblaster .character .signature__title--custom, html .charsheet .slugblaster .character .header__title, html .charsheet .slugblaster .character .header__title--custom, html .charsheet .slugblaster .blade__title, html .charsheet .slugblaster .blob__title { font-size: 2rem; line-height: 2rem; letter-spacing: 2px; text-transform: uppercase; font-family: "Nunito Sans", sans-serif; font-weight: 900; } html .charsheet .slugblaster .repeating__is-empty[value="0"] ~ .repeating__empty { display: grid; } html .charsheet .slugblaster .repeating__controller[value="0"] ~ * .repeating__view { display: grid; } html .charsheet .slugblaster .repeating__controller[value="0"] ~ .repcontrol { display: none; } html .charsheet .slugblaster .repeating__controller[value="0"] ~ * .itemcontrol * { display: none; } html .charsheet .slugblaster .repeating__controller[value="0"] ~ * .repeating__delete { display: none; } html .charsheet .slugblaster .repeating__controller[value=on] ~ * .repeating__edit { display: grid; } html .charsheet .slugblaster .repeating__empty { display: none; background-color: var(--panel-background); } html .charsheet .slugblaster .repeating__header { padding: 0.5rem; } html .charsheet .slugblaster .repeating__header span { display: block; text-align: center; } html .charsheet .slugblaster .repeating__view, html .charsheet .slugblaster .repeating__edit, html .charsheet .slugblaster .repeating__delete { display: none; transition: 0.3s cubic-bezier(0.95, 0.32, 0.37, 1.21); } html .charsheet .slugblaster .repeating__edit { position: relative; background-color: var(--panel-background); } html .charsheet .slugblaster .repeating__delete { min-height: 2rem; padding-inline: 2.25rem; align-items: center; } html .charsheet .slugblaster .character { position: relative; grid-template-columns: 1fr; grid-auto-rows: minmax(2rem, auto); gap: 0.5rem 0.5rem; } html .charsheet .slugblaster .character__main { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); grid-auto-rows: minmax(2rem, auto); display: flex; flex-wrap: wrap; gap: 0.5rem 0.5rem; } html .charsheet .slugblaster .character__col { flex: 30%; display: flex; flex-direction: column; gap: 0.5rem 0; } html .charsheet .slugblaster .character__blades { display: flex; gap: 0.5rem; flex-direction: column; } html .charsheet .slugblaster .character .attitude { color: #fff; background-color: var(--panel-background-accent); } html .charsheet .slugblaster .character .attitude__header { border-color: transparent; } html .charsheet .slugblaster .character .attitude__content textarea.attitude__attitude_subtitle { color: #fff; background-color: transparent; } html .charsheet .slugblaster .character .attitude input[name=attr_attitude_boost][value="1"] ~ * .attitude__boost--1 { display: grid; } html .charsheet .slugblaster .character .attitude input[name=attr_attitude_boost][value="2"] ~ * .attitude__boost--1, html .charsheet .slugblaster .character .attitude input[name=attr_attitude_boost][value="2"] ~ * .attitude__boost--2 { display: grid; } html .charsheet .slugblaster .character .attitude input[name=attr_attitude_boost][value="3"] ~ * .attitude__boost--1, html .charsheet .slugblaster .character .attitude input[name=attr_attitude_boost][value="3"] ~ * .attitude__boost--2, html .charsheet .slugblaster .character .attitude input[name=attr_attitude_boost][value="3"] ~ * .attitude__boost--3 { display: grid; } html .charsheet .slugblaster .character .attitude input[name=attr_attitude_boost][value="4"] ~ * .attitude__boost--1, html .charsheet .slugblaster .character .attitude input[name=attr_attitude_boost][value="4"] ~ * .attitude__boost--2, html .charsheet .slugblaster .character .attitude input[name=attr_attitude_boost][value="4"] ~ * .attitude__boost--3, html .charsheet .slugblaster .character .attitude input[name=attr_attitude_boost][value="4"] ~ * .attitude__boost--4 { display: grid; } html .charsheet .slugblaster .character .attitude input[name=attr_attitude_kick][value="1"] ~ * .attitude__kick--1 { display: grid; } html .charsheet .slugblaster .character .attitude input[name=attr_attitude_kick][value="2"] ~ * .attitude__kick--1, html .charsheet .slugblaster .character .attitude input[name=attr_attitude_kick][value="2"] ~ * .attitude__kick--2 { display: grid; } html .charsheet .slugblaster .character .attitude input[name=attr_attitude_kick][value="3"] ~ * .attitude__kick--1, html .charsheet .slugblaster .character .attitude input[name=attr_attitude_kick][value="3"] ~ * .attitude__kick--2, html .charsheet .slugblaster .character .attitude input[name=attr_attitude_kick][value="3"] ~ * .attitude__kick--3 { display: grid; } html .charsheet .slugblaster .character .attitude input[name=attr_attitude_kick][value="4"] ~ * .attitude__kick--1, html .charsheet .slugblaster .character .attitude input[name=attr_attitude_kick][value="4"] ~ * .attitude__kick--2, html .charsheet .slugblaster .character .attitude input[name=attr_attitude_kick][value="4"] ~ * .attitude__kick--3, html .charsheet .slugblaster .character .attitude input[name=attr_attitude_kick][value="4"] ~ * .attitude__kick--4 { display: grid; } html .charsheet .slugblaster .character .attitude__clickies { display: flex; gap: 0 0.5rem; margin-top: 1rem; } html .charsheet .slugblaster .character .attitude__boost, html .charsheet .slugblaster .character .attitude__kick { display: none; width: 3rem; aspect-ratio: 1; } html .charsheet .slugblaster .character .attitude__boost input, html .charsheet .slugblaster .character .attitude__kick input { outline: transparent; -webkit-appearance: none; -moz-appearance: none; appearance: none; filter: none; } html .charsheet .slugblaster .character .attitude__boost input:checked, html .charsheet .slugblaster .character .attitude__kick input:checked { opacity: 0.5; } html .charsheet .slugblaster .character .attitude__boost input:focus, html .charsheet .slugblaster .character .attitude__kick input:focus { outline: transparent; } html .charsheet .slugblaster .character .attitude__boost input { background-image: url("https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Slugblaster/assets/boost.svg") !important; background-size: contain; width: 3rem; } html .charsheet .slugblaster .character .attitude__kick input { background-image: url("https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Slugblaster/assets/kick.svg") !important; background-size: contain; width: 3rem; } html .charsheet .slugblaster .character .components__content { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem 0.5rem; } html .charsheet .slugblaster .character .components__component--header { font-weight: 900; text-align: center; text-transform: uppercase; letter-spacing: 2px; } html .charsheet .slugblaster .character .components__component--track { display: flex; gap: 0 0.5rem; align-items: center; justify-content: center; } html .charsheet .slugblaster .character .components__component--track .component__value[value="2"] ~ .component__checkbox--1 input { background-image: url("https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Slugblaster/assets/circle-filled.svg"); } html .charsheet .slugblaster .character .components__component--track .component__value[value="3"] ~ .component__checkbox--2 input { background-image: url("https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Slugblaster/assets/circle-filled.svg"); } html .charsheet .slugblaster .character .components__component--track .component__value[value="3"] ~ .component__checkbox--1 input { background-image: url("https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Slugblaster/assets/circle-filled.svg"); } html .charsheet .slugblaster .character .component__checkbox { display: grid; font-size: 1rem; } html .charsheet .slugblaster .character .component__checkbox input { -webkit-appearance: none; -moz-appearance: none; appearance: none; outline: none; width: 1.5rem; aspect-ratio: 1; background-repeat: no-repeat; background-size: contain; background-image: url("https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Slugblaster/assets/circle.svg"); filter: var(--icon-filter); } html .charsheet .slugblaster .character .component__checkbox input:checked { background-image: url("https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Slugblaster/assets/circle-filled.svg"); } html .charsheet .slugblaster .character .component__checkbox--0 { padding-right: 0.5rem; border-right: 2px solid var(--text-color, rgb(34, 34, 34)); } html .charsheet .slugblaster .character .component__checkbox--0 input { background-image: url("https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Slugblaster/assets/circle-x.svg"); } html .charsheet .slugblaster .character .component__checkbox--0 input:checked { background-image: url("https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Slugblaster/assets/circle-x.svg"); } html .charsheet .slugblaster .character .component__value[value="0"] ~ .component__checkbox--0, html .charsheet .slugblaster .character .component__value:not([value]) ~ .component__checkbox--0 { background-image: url("https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Slugblaster/assets/circle-x.svg") !important; } html .charsheet .slugblaster .character .dicetray__content { display: grid; gap: 0.5rem 0.5rem; } html .charsheet .slugblaster .character .dicetray__edit, html .charsheet .slugblaster .character .dicetray__view { gap: 0.5rem 0.5rem; } html .charsheet .slugblaster .character .dicetray__field.col-6 label { text-align: center; } html .charsheet .slugblaster .character .dicetray__actions { display: flex; align-items: center; justify-content: space-evenly; gap: 0.5rem 0.5rem; } html .charsheet .slugblaster .character .dicetray__action { flex: 1; font-size: 1.4rem; white-space: nowrap; } html .charsheet .slugblaster .character .doom__edit, html .charsheet .slugblaster .character .doom__view { gap: 0.5rem 0.5rem; } html .charsheet .slugblaster .character .doom .doom__name { display: block; border-bottom: var(--input-border); } html .charsheet .slugblaster .character .downtime .beats__custom { grid-template-columns: auto 1fr; gap: 0.25rem; align-items: center; } html .charsheet .slugblaster .character .downtime .beats + .beats__custom { margin-block-start: 2px; } html .charsheet .slugblaster .character .downtime .beats--chill { display: none; } html .charsheet .slugblaster .character .downtime input[value=chill] ~ label.beats--chill { display: block; } html .charsheet .slugblaster .character .downtime .beats--grit { display: none; } html .charsheet .slugblaster .character .downtime input[value=grit] ~ label.beats--grit { display: block; } html .charsheet .slugblaster .character .downtime .beats--guts { display: none; } html .charsheet .slugblaster .character .downtime input[value=guts] ~ label.beats--guts { display: block; } html .charsheet .slugblaster .character .downtime .beats--heart { display: none; } html .charsheet .slugblaster .character .downtime input[value=heart] ~ label.beats--heart { display: block; } html .charsheet .slugblaster .character .downtime .beats--smarts { display: none; } html .charsheet .slugblaster .character .downtime input[value=smarts] ~ label.beats--smarts { display: block; } html .charsheet .slugblaster .character .downtime .beats--custom { display: none; } html .charsheet .slugblaster .character .downtime input[value=custom] ~ label.beats--custom { display: block; } html .charsheet .slugblaster .character .downtime input[value=custom] ~ div.beats--custom { display: grid; } html .charsheet .slugblaster .character .downtime__edit, html .charsheet .slugblaster .character .downtime__view { gap: 0.5rem 0.5rem; } html .charsheet .slugblaster .character .downtime__view { display: flex; flex-wrap: wrap; gap: 0.5rem 0.5rem; } html .charsheet .slugblaster .character .downtime .editor__view input:not([value]) + span, html .charsheet .slugblaster .character .downtime .editor__view input[value="0"] + span { display: none; } html .charsheet .slugblaster .character .gear__edit, html .charsheet .slugblaster .character .gear__view { gap: 0.5rem 0.5rem; } html .charsheet .slugblaster .character .header__edit, html .charsheet .slugblaster .character .header__view { gap: 0.5rem 0.5rem; } html .charsheet .slugblaster .character .header__personality--custom, html .charsheet .slugblaster .character .header__title--custom { display: none; } html .charsheet .slugblaster .character .header input[name=attr_personality][value=custom] ~ .header__title { display: none !important; } html .charsheet .slugblaster .character .header input[name=attr_personality][value=custom] ~ .header__title--custom, html .charsheet .slugblaster .character .header input[name=attr_personality][value=custom] ~ .header__personality--custom { display: block; } html .charsheet .slugblaster .character .legacy__edit, html .charsheet .slugblaster .character .legacy__view { gap: 0.5rem 0.5rem; } html .charsheet .slugblaster .character .legacy .legacy__name { display: block; border-bottom: var(--input-border); } html .charsheet .slugblaster .character .mods__edit, html .charsheet .slugblaster .character .mods__view { gap: 0.5rem 0.5rem; } html .charsheet .slugblaster .character .mods__edit .mods__turbo { display: flex; flex-wrap: wrap; gap: 0.5rem 0.5rem; justify-content: space-between; } html .charsheet .slugblaster .character .mods__view .mods__turbo { font-weight: 700; } html .charsheet .slugblaster .character .mods__view .mods__turbo input[name*=turbo][value="0"] + div { display: none; } html .charsheet .slugblaster .character .mods .mod__name { font-weight: 700; } html .charsheet .slugblaster .character .signature__edit, html .charsheet .slugblaster .character .signature__view { gap: 0.5rem 0.5rem; } html .charsheet .slugblaster .character .signature__signature--custom, html .charsheet .slugblaster .character .signature__title--custom { display: none; } html .charsheet .slugblaster .character .signature input[name=attr_signature][value=custom] ~ .signature__title { display: none !important; } html .charsheet .slugblaster .character .signature input[name=attr_signature][value=custom] ~ .signature__title--custom, html .charsheet .slugblaster .character .signature input[name=attr_signature][value=custom] ~ .signature__signature--custom { display: block; } html .charsheet .slugblaster .character .slams__boxes { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.5rem 0.5rem; } html .charsheet .slugblaster .character .slams__box--slam_1 { grid-column: 1/-1; } html .charsheet .slugblaster .character .slams__input--text[type=text] { text-align: center; border: 2px solid var(--input-border-color); } html .charsheet .slugblaster .character .slams__input--text[type=text]:active, html .charsheet .slugblaster .character .slams__input--text[type=text]:hover, html .charsheet .slugblaster .character .slams__input--text[type=text]:focus { border: var(--input-border-active); } html .charsheet .slugblaster .character .style input[name=attr_style][value="0"] ~ .style__checkbox--0, html .charsheet .slugblaster .character .style input[name=attr_style]:not([value]) ~ .style__checkbox--0 { display: none; } html .charsheet .slugblaster .character .style__track { display: flex; gap: 0.5rem 0.5rem; margin: 0.5rem; } html .charsheet .slugblaster .character .style__checkbox { display: grid; font-size: 1rem; } html .charsheet .slugblaster .character .style__checkbox:nth-of-type(3n + 1) { margin-right: 0.5rem; } html .charsheet .slugblaster .character .style__checkbox input { -webkit-appearance: none; -moz-appearance: none; appearance: none; outline: none; width: 1.5rem; aspect-ratio: 1; background-repeat: no-repeat; background-size: contain; background-image: url("https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Slugblaster/assets/diamond.svg"); filter: var(--icon-filter); } html .charsheet .slugblaster .character .style__checkbox input:checked { background-image: url("https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Slugblaster/assets/diamond-filled.svg"); } html .charsheet .slugblaster .character .style__checkbox--0 { order: 1; padding-left: 0.5rem; border-left: 2px solid var(--text-color, rgb(34, 34, 34)); } html .charsheet .slugblaster .character .style__checkbox--0 input { background-image: url("https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Slugblaster/assets/circle-x.svg"); } html .charsheet .slugblaster .character .style input[name=attr_style][value="2"] ~ .style__checkbox--1 input { background-image: url("https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Slugblaster/assets/diamond-filled.svg"); } html .charsheet .slugblaster .character .style input[name=attr_style][value="3"] ~ .style__checkbox--2 input { background-image: url("https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Slugblaster/assets/diamond-filled.svg"); } html .charsheet .slugblaster .character .style input[name=attr_style][value="3"] ~ .style__checkbox--1 input { background-image: url("https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Slugblaster/assets/diamond-filled.svg"); } html .charsheet .slugblaster .character .style input[name=attr_style][value="4"] ~ .style__checkbox--3 input { background-image: url("https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Slugblaster/assets/diamond-filled.svg"); } html .charsheet .slugblaster .character .style input[name=attr_style][value="4"] ~ .style__checkbox--2 input { background-image: url("https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Slugblaster/assets/diamond-filled.svg"); } html .charsheet .slugblaster .character .style input[name=attr_style][value="4"] ~ .style__checkbox--1 input { background-image: url("https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Slugblaster/assets/diamond-filled.svg"); } html .charsheet .slugblaster .character .style input[name=attr_style][value="5"] ~ .style__checkbox--4 input { background-image: url("https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Slugblaster/assets/diamond-filled.svg"); } html .charsheet .slugblaster .character .style input[name=attr_style][value="5"] ~ .style__checkbox--3 input { background-image: url("https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Slugblaster/assets/diamond-filled.svg"); } html .charsheet .slugblaster .character .style input[name=attr_style][value="5"] ~ .style__checkbox--2 input { background-image: url("https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Slugblaster/assets/diamond-filled.svg"); } html .charsheet .slugblaster .character .style input[name=attr_style][value="5"] ~ .style__checkbox--1 input { background-image: url("https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Slugblaster/assets/diamond-filled.svg"); } html .charsheet .slugblaster .character .style input[name=attr_style][value="6"] ~ .style__checkbox--5 input { background-image: url("https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Slugblaster/assets/diamond-filled.svg"); } html .charsheet .slugblaster .character .style input[name=attr_style][value="6"] ~ .style__checkbox--4 input { background-image: url("https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Slugblaster/assets/diamond-filled.svg"); } html .charsheet .slugblaster .character .style input[name=attr_style][value="6"] ~ .style__checkbox--3 input { background-image: url("https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Slugblaster/assets/diamond-filled.svg"); } html .charsheet .slugblaster .character .style input[name=attr_style][value="6"] ~ .style__checkbox--2 input { background-image: url("https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Slugblaster/assets/diamond-filled.svg"); } html .charsheet .slugblaster .character .style input[name=attr_style][value="6"] ~ .style__checkbox--1 input { background-image: url("https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Slugblaster/assets/diamond-filled.svg"); } html .charsheet .slugblaster .character .style input[name=attr_style][value="7"] ~ .style__checkbox--6 input { background-image: url("https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Slugblaster/assets/diamond-filled.svg"); } html .charsheet .slugblaster .character .style input[name=attr_style][value="7"] ~ .style__checkbox--5 input { background-image: url("https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Slugblaster/assets/diamond-filled.svg"); } html .charsheet .slugblaster .character .style input[name=attr_style][value="7"] ~ .style__checkbox--4 input { background-image: url("https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Slugblaster/assets/diamond-filled.svg"); } html .charsheet .slugblaster .character .style input[name=attr_style][value="7"] ~ .style__checkbox--3 input { background-image: url("https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Slugblaster/assets/diamond-filled.svg"); } html .charsheet .slugblaster .character .style input[name=attr_style][value="7"] ~ .style__checkbox--2 input { background-image: url("https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Slugblaster/assets/diamond-filled.svg"); } html .charsheet .slugblaster .character .style input[name=attr_style][value="7"] ~ .style__checkbox--1 input { background-image: url("https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Slugblaster/assets/diamond-filled.svg"); } html .charsheet .slugblaster .character .style input[name=attr_style][value="8"] ~ .style__checkbox--7 input { background-image: url("https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Slugblaster/assets/diamond-filled.svg"); } html .charsheet .slugblaster .character .style input[name=attr_style][value="8"] ~ .style__checkbox--6 input { background-image: url("https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Slugblaster/assets/diamond-filled.svg"); } html .charsheet .slugblaster .character .style input[name=attr_style][value="8"] ~ .style__checkbox--5 input { background-image: url("https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Slugblaster/assets/diamond-filled.svg"); } html .charsheet .slugblaster .character .style input[name=attr_style][value="8"] ~ .style__checkbox--4 input { background-image: url("https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Slugblaster/assets/diamond-filled.svg"); } html .charsheet .slugblaster .character .style input[name=attr_style][value="8"] ~ .style__checkbox--3 input { background-image: url("https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Slugblaster/assets/diamond-filled.svg"); } html .charsheet .slugblaster .character .style input[name=attr_style][value="8"] ~ .style__checkbox--2 input { background-image: url("https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Slugblaster/assets/diamond-filled.svg"); } html .charsheet .slugblaster .character .style input[name=attr_style][value="8"] ~ .style__checkbox--1 input { background-image: url("https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Slugblaster/assets/diamond-filled.svg"); } html .charsheet .slugblaster .character .style input[name=attr_style][value="9"] ~ .style__checkbox--8 input { background-image: url("https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Slugblaster/assets/diamond-filled.svg"); } html .charsheet .slugblaster .character .style input[name=attr_style][value="9"] ~ .style__checkbox--7 input { background-image: url("https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Slugblaster/assets/diamond-filled.svg"); } html .charsheet .slugblaster .character .style input[name=attr_style][value="9"] ~ .style__checkbox--6 input { background-image: url("https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Slugblaster/assets/diamond-filled.svg"); } html .charsheet .slugblaster .character .style input[name=attr_style][value="9"] ~ .style__checkbox--5 input { background-image: url("https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Slugblaster/assets/diamond-filled.svg"); } html .charsheet .slugblaster .character .style input[name=attr_style][value="9"] ~ .style__checkbox--4 input { background-image: url("https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Slugblaster/assets/diamond-filled.svg"); } html .charsheet .slugblaster .character .style input[name=attr_style][value="9"] ~ .style__checkbox--3 input { background-image: url("https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Slugblaster/assets/diamond-filled.svg"); } html .charsheet .slugblaster .character .style input[name=attr_style][value="9"] ~ .style__checkbox--2 input { background-image: url("https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Slugblaster/assets/diamond-filled.svg"); } html .charsheet .slugblaster .character .style input[name=attr_style][value="9"] ~ .style__checkbox--1 input { background-image: url("https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Slugblaster/assets/diamond-filled.svg"); } html .charsheet .slugblaster .character .traits__edit, html .charsheet .slugblaster .character .traits__view { gap: 0.5rem 0.5rem; } html .charsheet .slugblaster .character .traits .trait__name { font-weight: 700; } html .charsheet .slugblaster .character .trouble input[name=attr_trouble][value="0"] ~ .trouble__checkbox--0, html .charsheet .slugblaster .character .trouble input[name=attr_trouble]:not([value]) ~ .trouble__checkbox--0 { display: none; } html .charsheet .slugblaster .character .trouble__track { display: flex; gap: 0.5rem 0.5rem; margin: 0.5rem; } html .charsheet .slugblaster .character .trouble__checkbox { display: grid; font-size: 1rem; } html .charsheet .slugblaster .character .trouble__checkbox input { -webkit-appearance: none; -moz-appearance: none; appearance: none; outline: none; width: 1.5rem; aspect-ratio: 1; background-repeat: no-repeat; background-size: contain; background-image: url("https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Slugblaster/assets/triangle.svg"); filter: var(--icon-filter); } html .charsheet .slugblaster .character .trouble__checkbox input:checked { background-image: url("https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Slugblaster/assets/triangle-filled.svg"); } html .charsheet .slugblaster .character .trouble__checkbox--0 { order: 1; padding-left: 0.5rem; border-left: 2px solid var(--text-color, rgb(34, 34, 34)); } html .charsheet .slugblaster .character .trouble__checkbox--0 input { background-image: url("https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Slugblaster/assets/circle-x.svg"); } html .charsheet .slugblaster .character .trouble__checkbox--4 { margin-right: 1rem; } html .charsheet .slugblaster .character .trouble__checkbox--8 input { background-image: url("https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Slugblaster/assets/triangle-alert.svg"); } html .charsheet .slugblaster .character .trouble__checkbox--8 input:checked { background-image: url("https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Slugblaster/assets/triangle-alert-filled.svg"); } html .charsheet .slugblaster .character .trouble input[name=attr_trouble][value="2"] ~ .trouble__checkbox--1 input { background-image: url("https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Slugblaster/assets/triangle-filled.svg"); } html .charsheet .slugblaster .character .trouble input[name=attr_trouble][value="3"] ~ .trouble__checkbox--2 input { background-image: url("https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Slugblaster/assets/triangle-filled.svg"); } html .charsheet .slugblaster .character .trouble input[name=attr_trouble][value="3"] ~ .trouble__checkbox--1 input { background-image: url("https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Slugblaster/assets/triangle-filled.svg"); } html .charsheet .slugblaster .character .trouble input[name=attr_trouble][value="4"] ~ .trouble__checkbox--3 input { background-image: url("https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Slugblaster/assets/triangle-filled.svg"); } html .charsheet .slugblaster .character .trouble input[name=attr_trouble][value="4"] ~ .trouble__checkbox--2 input { background-image: url("https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Slugblaster/assets/triangle-filled.svg"); } html .charsheet .slugblaster .character .trouble input[name=attr_trouble][value="4"] ~ .trouble__checkbox--1 input { background-image: url("https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Slugblaster/assets/triangle-filled.svg"); } html .charsheet .slugblaster .character .trouble input[name=attr_trouble][value="5"] ~ .trouble__checkbox--4 input { background-image: url("https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Slugblaster/assets/triangle-filled.svg"); } html .charsheet .slugblaster .character .trouble input[name=attr_trouble][value="5"] ~ .trouble__checkbox--3 input { background-image: url("https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Slugblaster/assets/triangle-filled.svg"); } html .charsheet .slugblaster .character .trouble input[name=attr_trouble][value="5"] ~ .trouble__checkbox--2 input { background-image: url("https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Slugblaster/assets/triangle-filled.svg"); } html .charsheet .slugblaster .character .trouble input[name=attr_trouble][value="5"] ~ .trouble__checkbox--1 input { background-image: url("https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Slugblaster/assets/triangle-filled.svg"); } html .charsheet .slugblaster .character .trouble input[name=attr_trouble][value="6"] ~ .trouble__checkbox--5 input { background-image: url("https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Slugblaster/assets/triangle-filled.svg"); } html .charsheet .slugblaster .character .trouble input[name=attr_trouble][value="6"] ~ .trouble__checkbox--4 input { background-image: url("https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Slugblaster/assets/triangle-filled.svg"); } html .charsheet .slugblaster .character .trouble input[name=attr_trouble][value="6"] ~ .trouble__checkbox--3 input { background-image: url("https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Slugblaster/assets/triangle-filled.svg"); } html .charsheet .slugblaster .character .trouble input[name=attr_trouble][value="6"] ~ .trouble__checkbox--2 input { background-image: url("https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Slugblaster/assets/triangle-filled.svg"); } html .charsheet .slugblaster .character .trouble input[name=attr_trouble][value="6"] ~ .trouble__checkbox--1 input { background-image: url("https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Slugblaster/assets/triangle-filled.svg"); } html .charsheet .slugblaster .character .trouble input[name=attr_trouble][value="7"] ~ .trouble__checkbox--6 input { background-image: url("https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Slugblaster/assets/triangle-filled.svg"); } html .charsheet .slugblaster .character .trouble input[name=attr_trouble][value="7"] ~ .trouble__checkbox--5 input { background-image: url("https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Slugblaster/assets/triangle-filled.svg"); } html .charsheet .slugblaster .character .trouble input[name=attr_trouble][value="7"] ~ .trouble__checkbox--4 input { background-image: url("https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Slugblaster/assets/triangle-filled.svg"); } html .charsheet .slugblaster .character .trouble input[name=attr_trouble][value="7"] ~ .trouble__checkbox--3 input { background-image: url("https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Slugblaster/assets/triangle-filled.svg"); } html .charsheet .slugblaster .character .trouble input[name=attr_trouble][value="7"] ~ .trouble__checkbox--2 input { background-image: url("https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Slugblaster/assets/triangle-filled.svg"); } html .charsheet .slugblaster .character .trouble input[name=attr_trouble][value="7"] ~ .trouble__checkbox--1 input { background-image: url("https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Slugblaster/assets/triangle-filled.svg"); } html .charsheet .slugblaster .character .trouble input[name=attr_trouble][value="8"] ~ .trouble__checkbox--7 input { background-image: url("https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Slugblaster/assets/triangle-filled.svg"); } html .charsheet .slugblaster .character .trouble input[name=attr_trouble][value="8"] ~ .trouble__checkbox--6 input { background-image: url("https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Slugblaster/assets/triangle-filled.svg"); } html .charsheet .slugblaster .character .trouble input[name=attr_trouble][value="8"] ~ .trouble__checkbox--5 input { background-image: url("https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Slugblaster/assets/triangle-filled.svg"); } html .charsheet .slugblaster .character .trouble input[name=attr_trouble][value="8"] ~ .trouble__checkbox--4 input { background-image: url("https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Slugblaster/assets/triangle-filled.svg"); } html .charsheet .slugblaster .character .trouble input[name=attr_trouble][value="8"] ~ .trouble__checkbox--3 input { background-image: url("https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Slugblaster/assets/triangle-filled.svg"); } html .charsheet .slugblaster .character .trouble input[name=attr_trouble][value="8"] ~ .trouble__checkbox--2 input { background-image: url("https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Slugblaster/assets/triangle-filled.svg"); } html .charsheet .slugblaster .character .trouble input[name=attr_trouble][value="8"] ~ .trouble__checkbox--1 input { background-image: url("https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Slugblaster/assets/triangle-filled.svg"); } html .charsheet .slugblaster .character .trouble__actions { display: flex; gap: 0 0.5rem; } html .charsheet .slugblaster .character .trouble__action[type=action] { font-size: 1.5rem; font-weight: 700; text-transform: uppercase; padding-inline: 0.25rem; white-space: nowrap; } html .charsheet .slugblaster .character .turbo { color: #fff; background-color: var(--panel-background-accent); } html .charsheet .slugblaster .character .turbo__header { border-color: transparent; } html .charsheet .slugblaster .character .turbo__clickies { display: flex; gap: 0 0.5rem; margin-top: 1rem; } html .charsheet .slugblaster .character .turbo input[name=attr_turbo_boost][value=on] ~ * .turbo__boost--3 { display: grid; } html .charsheet .slugblaster .character .turbo input[name=attr_turbo_kick][value=on] ~ * .turbo__kick--3 { display: grid; } html .charsheet .slugblaster .character .turbo__boost, html .charsheet .slugblaster .character .turbo__kick { display: grid; width: 3rem; aspect-ratio: 1; } html .charsheet .slugblaster .character .turbo__boost--3, html .charsheet .slugblaster .character .turbo__kick--3 { display: none; } html .charsheet .slugblaster .character .turbo__boost input, html .charsheet .slugblaster .character .turbo__kick input { outline: transparent; -webkit-appearance: none; -moz-appearance: none; appearance: none; filter: none; } html .charsheet .slugblaster .character .turbo__boost input:checked, html .charsheet .slugblaster .character .turbo__kick input:checked { opacity: 0.5; } html .charsheet .slugblaster .character .turbo__boost input:focus, html .charsheet .slugblaster .character .turbo__kick input:focus { outline: transparent; } html .charsheet .slugblaster .character .turbo__boost input { background-image: url("https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Slugblaster/assets/boost.svg") !important; background-size: contain; width: 3rem; } html .charsheet .slugblaster .character .turbo__kick input { background-image: url("https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Slugblaster/assets/kick.svg") !important; background-size: contain; width: 3rem; } html .charsheet .slugblaster .character .notes__edit, html .charsheet .slugblaster .character .notes__view { gap: 0.5rem 0.5rem; } html .charsheet .slugblaster .character .notes .note__name { font-weight: 700; } html .charsheet .slugblaster .character .tracks__edit, html .charsheet .slugblaster .character .tracks__view { gap: 0.5rem 0.5rem; } html .charsheet .slugblaster .character .tracks__progress-track { display: flex; gap: 0.25rem; } html .charsheet .slugblaster .character .tracks .track__name { display: block; } html .charsheet .slugblaster .character .tracks .track__progress { position: relative; display: grid; width: 2.5rem; aspect-ratio: 1; border-radius: 0.5em; isolation: isolate; } html .charsheet .slugblaster .character .tracks .track__progress:hover, html .charsheet .slugblaster .character .tracks .track__progress:focus { color: var(--button-color); background-color: var(--button-background-hover); } html .charsheet .slugblaster .character .tracks .track__letter, html .charsheet .slugblaster .character .tracks .track__marked { position: absolute; inset: 0; top: 1px; margin: 0; font-family: "Playpen Sans", "Comic Sans MS", cursive; font-family: "Nunito Sans", sans-serif; font-family: "Silkscreen", "DotGothic16", "Comic Sans MS", cursive; font-size: 1.5rem; font-weight: 700; text-align: center; } html .charsheet .slugblaster .character .tracks .track__marked { display: none; } html .charsheet .slugblaster .character .tracks .track__marker[type=checkbox] { position: absolute; outline: none; -webkit-appearance: none; -moz-appearance: none; appearance: none; width: 100%; height: 100%; } html .charsheet .slugblaster .character .tracks .track__marker[type=checkbox]:checked { background-image: url("https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Slugblaster/assets/square-filled.svg"); background-image: none; } html .charsheet .slugblaster .character .tracks .track__marker[type=checkbox]:checked + .track__letter { display: none; color: var(--panel-background); } html .charsheet .slugblaster .character .tracks .track__marker[type=checkbox]:checked ~ .track__marked { display: block; color: var(--panel-background); background-color: var(--input-color); } html .charsheet .slugblaster .character .tracks .track__letter-exists:not([value]) + .track__progress, html .charsheet .slugblaster .character .tracks .track__letter-exists[value=""] + .track__progress { display: none !important; } html .charsheet .slugblaster .crew { position: relative; grid-auto-rows: minmax(2rem, auto); gap: 0.5rem 0.5rem; } html .charsheet .slugblaster .crew__main { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); grid-auto-rows: minmax(2rem, auto); display: flex; flex-wrap: wrap; gap: 0.5rem 0.5rem; } html .charsheet .slugblaster .crew__col { flex: 30%; display: flex; flex-direction: column; gap: 0.5rem 0; } html .charsheet .slugblaster .crew__blades { display: flex; gap: 0.5rem; flex-direction: column; } html .charsheet .slugblaster .crew__action { grid-column: 1/-1; } html .charsheet .slugblaster .crew input[name*=load_factions]:not([value="0"]) + .crew--factions { display: none; } html .charsheet .slugblaster .crew .faction__edit, html .charsheet .slugblaster .crew .faction__view { gap: 0.5rem 0.5rem; } html .charsheet .slugblaster .crew .faction__view { display: grid; grid-template-columns: 3rem 1fr; gap: 0.5rem 0.5rem; } html .charsheet .slugblaster .crew .faction .faction__name { font-weight: 700; } html .charsheet .slugblaster .crew .faction .faction__relationship { font-family: "Press Start 2P"; text-align: center; } html .charsheet .slugblaster .crew .fame__edit .fame__ranks, html .charsheet .slugblaster .crew .fame__view .fame__ranks { display: grid; gap: 0.5rem 0.5rem; } @media (min-width: 768px) { html .charsheet .slugblaster .crew .fame__edit .fame__ranks, html .charsheet .slugblaster .crew .fame__view .fame__ranks { grid-template-columns: repeat(2, minmax(25%, 1fr)); } } html .charsheet .slugblaster .crew .fame__view input:not([value]) + span, html .charsheet .slugblaster .crew .fame__view input[value="0"] + span { display: none; } html .charsheet .slugblaster .crew .fame__hypes { display: grid; gap: 0.5rem 0.5rem; grid-template-columns: repeat(2, minmax(25%, 1fr)); } html .charsheet .slugblaster .crew .fame__rank { align-self: flex-start; } html .charsheet .slugblaster .crew .fame__rank .rank__name { font-family: "Nunito Sans", sans-serif; font-size: 1.25rem; font-weight: 900; text-transform: uppercase; } html .charsheet .slugblaster .crew .fame__rank .rank__cost { font-family: "Nunito Sans", sans-serif; font-size: 1rem; padding-inline-start: 0.5rem; text-transform: none; font-weight: normal; } html .charsheet .slugblaster .crew .fame__rank .rank__cost::before { content: "("; } html .charsheet .slugblaster .crew .fame__rank .rank__cost::after { content: ")"; } html .charsheet .slugblaster .crew .fame__perk { margin-inline-start: 1rem; } html .charsheet .slugblaster .crew .fame__perk--description { padding-inline-start: 1rem; } html .charsheet .slugblaster .crew .fractures__boxes { display: grid; gap: 0.5rem 0.5rem; } html .charsheet .slugblaster .crew .fractures__input--text[type=text] { text-align: center; border: 2px solid var(--input-border-color); } html .charsheet .slugblaster .crew .fractures__input--text[type=text]:active, html .charsheet .slugblaster .crew .fractures__input--text[type=text]:hover, html .charsheet .slugblaster .crew .fractures__input--text[type=text]:focus { border: var(--input-border-active); } html .charsheet .slugblaster .crew .header-crew__title[type=text] { font-size: 2rem; font-family: "Nunito Sans", sans-serif; text-transform: uppercase; height: auto; } html .charsheet .slugblaster .crew .header-crew__edit, html .charsheet .slugblaster .crew .header-crew__view { gap: 0.5rem 0.5rem; } html .charsheet .slugblaster .crew .hype { color: #fff; background-color: var(--panel-background-accent); } html .charsheet .slugblaster .crew .hype__header { border-color: transparent; } html .charsheet .slugblaster .crew .hype__clickies { display: flex; gap: 0 0.5rem; margin-top: 1rem; } html .charsheet .slugblaster .crew .hype input[name=attr_hype_boost][value="1"] ~ * .hype__boost--3 { display: grid; } html .charsheet .slugblaster .crew .hype input[name=attr_hype_boost][value="2"] ~ * .hype__boost--3, html .charsheet .slugblaster .crew .hype input[name=attr_hype_boost][value="2"] ~ * .hype__boost--4 { display: grid; } html .charsheet .slugblaster .crew .hype input[name=attr_hype_kick][value="1"] ~ * .hype__kick--2 { display: grid; } html .charsheet .slugblaster .crew .hype input[name=attr_hype_kick][value="2"] ~ * .hype__kick--2, html .charsheet .slugblaster .crew .hype input[name=attr_hype_kick][value="2"] ~ * .hype__kick--3 { display: grid; } html .charsheet .slugblaster .crew .hype__boost, html .charsheet .slugblaster .crew .hype__kick { display: grid; width: 3rem; aspect-ratio: 1; } html .charsheet .slugblaster .crew .hype__boost--3, html .charsheet .slugblaster .crew .hype__boost--4, html .charsheet .slugblaster .crew .hype__kick--3, html .charsheet .slugblaster .crew .hype__kick--4 { display: none; } html .charsheet .slugblaster .crew .hype__boost input, html .charsheet .slugblaster .crew .hype__kick input { outline: transparent; -webkit-appearance: none; -moz-appearance: none; appearance: none; filter: none; } html .charsheet .slugblaster .crew .hype__boost input:checked, html .charsheet .slugblaster .crew .hype__kick input:checked { opacity: 0.5; } html .charsheet .slugblaster .crew .hype__boost input:focus, html .charsheet .slugblaster .crew .hype__kick input:focus { outline: transparent; } html .charsheet .slugblaster .crew .hype__boost input { background-image: url("https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Slugblaster/assets/boost.svg") !important; background-size: contain; width: 3rem; } html .charsheet .slugblaster .crew .hype__kick input { background-image: url("https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Slugblaster/assets/kick.svg") !important; background-size: contain; width: 3rem; } html .charsheet .slugblaster .crew .hype__kick--2 { display: none; } html .charsheet .slugblaster .crew .style input[name=attr_crew_style][value="0"] ~ .style__checkbox--0, html .charsheet .slugblaster .crew .style input[name=attr_crew_style]:not([value]) ~ .style__checkbox--0 { display: none; } html .charsheet .slugblaster .crew .style__track { display: grid; grid-template-columns: repeat(5, 2rem); gap: 0.5rem 0.5rem; margin: 0.5rem; } html .charsheet .slugblaster .crew .style__checkbox { display: grid; font-size: 1rem; } html .charsheet .slugblaster .crew .style__checkbox input { -webkit-appearance: none; -moz-appearance: none; appearance: none; outline: none; width: 1.5rem; aspect-ratio: 1; background-repeat: no-repeat; background-size: contain; background-image: url("https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Slugblaster/assets/diamond.svg"); } html .charsheet .slugblaster .crew .style__checkbox input:checked { background-image: url("https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Slugblaster/assets/diamond-filled.svg"); } html .charsheet .slugblaster .crew .style__checkbox--0 { grid-row: 1/span 2; grid-column: 6; align-content: center; height: 100%; order: 1; padding-left: 0.5rem; border-left: 2px solid var(--text-color, rgb(34, 34, 34)); } html .charsheet .slugblaster .crew .style__checkbox--0 input { background-image: url("https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Slugblaster/assets/circle-x.svg"); } html .charsheet .slugblaster .crew .style input[name=attr_crew_style][value="2"] ~ .style__checkbox--1 input { background-image: url("https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Slugblaster/assets/diamond-filled.svg"); } html .charsheet .slugblaster .crew .style input[name=attr_crew_style][value="3"] ~ .style__checkbox--2 input { background-image: url("https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Slugblaster/assets/diamond-filled.svg"); } html .charsheet .slugblaster .crew .style input[name=attr_crew_style][value="3"] ~ .style__checkbox--1 input { background-image: url("https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Slugblaster/assets/diamond-filled.svg"); } html .charsheet .slugblaster .crew .style input[name=attr_crew_style][value="4"] ~ .style__checkbox--3 input { background-image: url("https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Slugblaster/assets/diamond-filled.svg"); } html .charsheet .slugblaster .crew .style input[name=attr_crew_style][value="4"] ~ .style__checkbox--2 input { background-image: url("https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Slugblaster/assets/diamond-filled.svg"); } html .charsheet .slugblaster .crew .style input[name=attr_crew_style][value="4"] ~ .style__checkbox--1 input { background-image: url("https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Slugblaster/assets/diamond-filled.svg"); } html .charsheet .slugblaster .crew .style input[name=attr_crew_style][value="5"] ~ .style__checkbox--4 input { background-image: url("https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Slugblaster/assets/diamond-filled.svg"); } html .charsheet .slugblaster .crew .style input[name=attr_crew_style][value="5"] ~ .style__checkbox--3 input { background-image: url("https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Slugblaster/assets/diamond-filled.svg"); } html .charsheet .slugblaster .crew .style input[name=attr_crew_style][value="5"] ~ .style__checkbox--2 input { background-image: url("https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Slugblaster/assets/diamond-filled.svg"); } html .charsheet .slugblaster .crew .style input[name=attr_crew_style][value="5"] ~ .style__checkbox--1 input { background-image: url("https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Slugblaster/assets/diamond-filled.svg"); } html .charsheet .slugblaster .crew .style input[name=attr_crew_style][value="6"] ~ .style__checkbox--5 input { background-image: url("https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Slugblaster/assets/diamond-filled.svg"); } html .charsheet .slugblaster .crew .style input[name=attr_crew_style][value="6"] ~ .style__checkbox--4 input { background-image: url("https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Slugblaster/assets/diamond-filled.svg"); } html .charsheet .slugblaster .crew .style input[name=attr_crew_style][value="6"] ~ .style__checkbox--3 input { background-image: url("https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Slugblaster/assets/diamond-filled.svg"); } html .charsheet .slugblaster .crew .style input[name=attr_crew_style][value="6"] ~ .style__checkbox--2 input { background-image: url("https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Slugblaster/assets/diamond-filled.svg"); } html .charsheet .slugblaster .crew .style input[name=attr_crew_style][value="6"] ~ .style__checkbox--1 input { background-image: url("https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Slugblaster/assets/diamond-filled.svg"); } html .charsheet .slugblaster .crew .style input[name=attr_crew_style][value="7"] ~ .style__checkbox--6 input { background-image: url("https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Slugblaster/assets/diamond-filled.svg"); } html .charsheet .slugblaster .crew .style input[name=attr_crew_style][value="7"] ~ .style__checkbox--5 input { background-image: url("https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Slugblaster/assets/diamond-filled.svg"); } html .charsheet .slugblaster .crew .style input[name=attr_crew_style][value="7"] ~ .style__checkbox--4 input { background-image: url("https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Slugblaster/assets/diamond-filled.svg"); } html .charsheet .slugblaster .crew .style input[name=attr_crew_style][value="7"] ~ .style__checkbox--3 input { background-image: url("https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Slugblaster/assets/diamond-filled.svg"); } html .charsheet .slugblaster .crew .style input[name=attr_crew_style][value="7"] ~ .style__checkbox--2 input { background-image: url("https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Slugblaster/assets/diamond-filled.svg"); } html .charsheet .slugblaster .crew .style input[name=attr_crew_style][value="7"] ~ .style__checkbox--1 input { background-image: url("https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Slugblaster/assets/diamond-filled.svg"); } html .charsheet .slugblaster .crew .style input[name=attr_crew_style][value="8"] ~ .style__checkbox--7 input { background-image: url("https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Slugblaster/assets/diamond-filled.svg"); } html .charsheet .slugblaster .crew .style input[name=attr_crew_style][value="8"] ~ .style__checkbox--6 input { background-image: url("https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Slugblaster/assets/diamond-filled.svg"); } html .charsheet .slugblaster .crew .style input[name=attr_crew_style][value="8"] ~ .style__checkbox--5 input { background-image: url("https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Slugblaster/assets/diamond-filled.svg"); } html .charsheet .slugblaster .crew .style input[name=attr_crew_style][value="8"] ~ .style__checkbox--4 input { background-image: url("https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Slugblaster/assets/diamond-filled.svg"); } html .charsheet .slugblaster .crew .style input[name=attr_crew_style][value="8"] ~ .style__checkbox--3 input { background-image: url("https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Slugblaster/assets/diamond-filled.svg"); } html .charsheet .slugblaster .crew .style input[name=attr_crew_style][value="8"] ~ .style__checkbox--2 input { background-image: url("https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Slugblaster/assets/diamond-filled.svg"); } html .charsheet .slugblaster .crew .style input[name=attr_crew_style][value="8"] ~ .style__checkbox--1 input { background-image: url("https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Slugblaster/assets/diamond-filled.svg"); } html .charsheet .slugblaster .crew .style input[name=attr_crew_style][value="9"] ~ .style__checkbox--8 input { background-image: url("https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Slugblaster/assets/diamond-filled.svg"); } html .charsheet .slugblaster .crew .style input[name=attr_crew_style][value="9"] ~ .style__checkbox--7 input { background-image: url("https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Slugblaster/assets/diamond-filled.svg"); } html .charsheet .slugblaster .crew .style input[name=attr_crew_style][value="9"] ~ .style__checkbox--6 input { background-image: url("https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Slugblaster/assets/diamond-filled.svg"); } html .charsheet .slugblaster .crew .style input[name=attr_crew_style][value="9"] ~ .style__checkbox--5 input { background-image: url("https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Slugblaster/assets/diamond-filled.svg"); } html .charsheet .slugblaster .crew .style input[name=attr_crew_style][value="9"] ~ .style__checkbox--4 input { background-image: url("https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Slugblaster/assets/diamond-filled.svg"); } html .charsheet .slugblaster .crew .style input[name=attr_crew_style][value="9"] ~ .style__checkbox--3 input { background-image: url("https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Slugblaster/assets/diamond-filled.svg"); } html .charsheet .slugblaster .crew .style input[name=attr_crew_style][value="9"] ~ .style__checkbox--2 input { background-image: url("https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Slugblaster/assets/diamond-filled.svg"); } html .charsheet .slugblaster .crew .style input[name=attr_crew_style][value="9"] ~ .style__checkbox--1 input { background-image: url("https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Slugblaster/assets/diamond-filled.svg"); } html .charsheet .slugblaster .crew .style input[name=attr_crew_style][value="10"] ~ .style__checkbox--9 input { background-image: url("https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Slugblaster/assets/diamond-filled.svg"); } html .charsheet .slugblaster .crew .style input[name=attr_crew_style][value="10"] ~ .style__checkbox--8 input { background-image: url("https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Slugblaster/assets/diamond-filled.svg"); } html .charsheet .slugblaster .crew .style input[name=attr_crew_style][value="10"] ~ .style__checkbox--7 input { background-image: url("https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Slugblaster/assets/diamond-filled.svg"); } html .charsheet .slugblaster .crew .style input[name=attr_crew_style][value="10"] ~ .style__checkbox--6 input { background-image: url("https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Slugblaster/assets/diamond-filled.svg"); } html .charsheet .slugblaster .crew .style input[name=attr_crew_style][value="10"] ~ .style__checkbox--5 input { background-image: url("https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Slugblaster/assets/diamond-filled.svg"); } html .charsheet .slugblaster .crew .style input[name=attr_crew_style][value="10"] ~ .style__checkbox--4 input { background-image: url("https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Slugblaster/assets/diamond-filled.svg"); } html .charsheet .slugblaster .crew .style input[name=attr_crew_style][value="10"] ~ .style__checkbox--3 input { background-image: url("https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Slugblaster/assets/diamond-filled.svg"); } html .charsheet .slugblaster .crew .style input[name=attr_crew_style][value="10"] ~ .style__checkbox--2 input { background-image: url("https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Slugblaster/assets/diamond-filled.svg"); } html .charsheet .slugblaster .crew .style input[name=attr_crew_style][value="10"] ~ .style__checkbox--1 input { background-image: url("https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Slugblaster/assets/diamond-filled.svg"); } html .charsheet .slugblaster .crew .notes__edit, html .charsheet .slugblaster .crew .notes__view { gap: 0.5rem 0.5rem; } html .charsheet .slugblaster .crew .notes .note__name { font-weight: 700; } html .charsheet .slugblaster .crew .tracks__edit, html .charsheet .slugblaster .crew .tracks__view { gap: 0.5rem 0.5rem; } html .charsheet .slugblaster .crew .tracks__progress-track { display: flex; gap: 0.25rem; } html .charsheet .slugblaster .crew .tracks .track__name { display: block; } html .charsheet .slugblaster .crew .tracks .track__progress { position: relative; display: grid; width: 2.5rem; aspect-ratio: 1; border-radius: 0.5em; isolation: isolate; } html .charsheet .slugblaster .crew .tracks .track__progress:hover, html .charsheet .slugblaster .crew .tracks .track__progress:focus { color: var(--button-color); background-color: var(--button-background-hover); } html .charsheet .slugblaster .crew .tracks .track__letter, html .charsheet .slugblaster .crew .tracks .track__marked { position: absolute; inset: 0; top: 1px; margin: 0; font-family: "Playpen Sans", "Comic Sans MS", cursive; font-family: "Nunito Sans", sans-serif; font-family: "Silkscreen", "DotGothic16", "Comic Sans MS", cursive; font-size: 1.5rem; font-weight: 700; text-align: center; } html .charsheet .slugblaster .crew .tracks .track__marked { display: none; } html .charsheet .slugblaster .crew .tracks .track__marker[type=checkbox] { position: absolute; outline: none; -webkit-appearance: none; -moz-appearance: none; appearance: none; width: 100%; height: 100%; } html .charsheet .slugblaster .crew .tracks .track__marker[type=checkbox]:checked { background-image: url("https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Slugblaster/assets/square-filled.svg"); background-image: none; } html .charsheet .slugblaster .crew .tracks .track__marker[type=checkbox]:checked + .track__letter { display: none; color: var(--panel-background); } html .charsheet .slugblaster .crew .tracks .track__marker[type=checkbox]:checked ~ .track__marked { display: block; color: var(--panel-background); background-color: var(--input-color); } html .charsheet .slugblaster .crew .tracks .track__letter-exists:not([value]) + .track__progress, html .charsheet .slugblaster .crew .tracks .track__letter-exists[value=""] + .track__progress { display: none !important; } html .charsheet .slugblaster .options { position: relative; grid-template-columns: 1fr auto; grid-auto-rows: minmax(2rem, auto); gap: 0.5rem 0.5rem; } html .charsheet .slugblaster .options__main { display: grid; gap: 0.5rem 0.5rem; grid-template-columns: 1fr auto; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; } html .charsheet .slugblaster .options__col { flex: 1; display: grid; gap: 0.5rem 0; grid-template-rows: auto, 1fr; } html .charsheet .slugblaster .options .option { flex: 1; display: flex; flex-direction: column; background-color: var(--panel-background); gap: 0.5rem 0; padding: 1rem; } html .charsheet .slugblaster .options .option__dropdowns, html .charsheet .slugblaster .options .option__dropdowns--horizontal { display: flex; gap: 0.5rem 0.5rem; } html .charsheet .slugblaster .options .option__dropdowns--horizontal { flex-direction: row; } html .charsheet .slugblaster .options .option__dropdown { width: 10em; } html .charsheet .slugblaster .options .option .options-hide[value="0"] ~ .option__dropdown { display: none !important; } html .charsheet .slugblaster .options .a-heartfelt-word { width: 250px; padding: 1rem; border-radius: 0px; text-align: start; background-color: rgb(0, 138.4, 191.2); color: #fff; font-weight: 700; } html .charsheet .slugblaster .options .sheet-version { color: #fff; text-align: end; } html .charsheet .slugblaster .options .sheet-version > span[name] { font-family: "Playpen Sans", "Comic Sans MS", cursive; } html .charsheet .slugblaster .options .sheet-version > span[name]::before { content: "v"; } @media (min-width: 768px) { html .charsheet .slugblaster .diary .blade__wrapper, html .charsheet .slugblaster .downtimes .blade__wrapper, html .charsheet .slugblaster .epilogue .blade__wrapper, html .charsheet .slugblaster .factions .blade__wrapper { grid-template-columns: repeat(2, minmax(25%, 1fr)); } } html .charsheet .slugblaster .container { background: transparent; } html .charsheet .slugblaster .row { display: grid; grid-template-columns: repeat(12, 1fr); gap: 0.5rem 0.5rem; justify-items: center; align-items: start; width: 100%; margin: auto; } html .charsheet .slugblaster .row:before, html .charsheet .slugblaster .row:after { display: none; } html .charsheet .slugblaster .row > * { width: 100%; grid-column: 1/-1; } html .charsheet .slugblaster .col { grid-column: 1/-1; } html .charsheet .slugblaster .col-1 { position: initial; grid-column-start: auto; grid-column-end: span 1; } html .charsheet .slugblaster .col-2 { position: initial; grid-column-start: auto; grid-column-end: span 2; } html .charsheet .slugblaster .col-3 { position: initial; grid-column-start: auto; grid-column-end: span 3; } html .charsheet .slugblaster .col-4 { position: initial; grid-column-start: auto; grid-column-end: span 4; } html .charsheet .slugblaster .col-5 { position: initial; grid-column-start: auto; grid-column-end: span 5; } html .charsheet .slugblaster .col-6 { position: initial; grid-column-start: auto; grid-column-end: span 6; } html .charsheet .slugblaster .col-7 { position: initial; grid-column-start: auto; grid-column-end: span 7; } html .charsheet .slugblaster .col-8 { position: initial; grid-column-start: auto; grid-column-end: span 8; } html .charsheet .slugblaster .col-9 { position: initial; grid-column-start: auto; grid-column-end: span 9; } html .charsheet .slugblaster .col-10 { position: initial; grid-column-start: auto; grid-column-end: span 10; } html .charsheet .slugblaster .col-11 { position: initial; grid-column-start: auto; grid-column-end: span 11; } html .charsheet .slugblaster .col-12 { position: initial; grid-column-start: auto; grid-column-end: span 12; } @media (min-width: 375px) { html .charsheet .slugblaster .col-xs-1 { position: initial; grid-column-start: auto; grid-column-end: span 1; } html .charsheet .slugblaster .col-xs-2 { position: initial; grid-column-start: auto; grid-column-end: span 2; } html .charsheet .slugblaster .col-xs-3 { position: initial; grid-column-start: auto; grid-column-end: span 3; } html .charsheet .slugblaster .col-xs-4 { position: initial; grid-column-start: auto; grid-column-end: span 4; } html .charsheet .slugblaster .col-xs-5 { position: initial; grid-column-start: auto; grid-column-end: span 5; } html .charsheet .slugblaster .col-xs-6 { position: initial; grid-column-start: auto; grid-column-end: span 6; } html .charsheet .slugblaster .col-xs-7 { position: initial; grid-column-start: auto; grid-column-end: span 7; } html .charsheet .slugblaster .col-xs-8 { position: initial; grid-column-start: auto; grid-column-end: span 8; } html .charsheet .slugblaster .col-xs-9 { position: initial; grid-column-start: auto; grid-column-end: span 9; } html .charsheet .slugblaster .col-xs-10 { position: initial; grid-column-start: auto; grid-column-end: span 10; } html .charsheet .slugblaster .col-xs-11 { position: initial; grid-column-start: auto; grid-column-end: span 11; } html .charsheet .slugblaster .col-xs-12 { position: initial; grid-column-start: auto; grid-column-end: span 12; } html .charsheet .slugblaster .show-xs { display: none; } } @media (max-width: 375px) { html .charsheet .slugblaster .hide-xs { display: none; } } html .charsheet .slugblaster .only-xs { display: none; } @media (width: 375px) { html .charsheet .slugblaster .only-xs { display: block; } } @media (min-width: 576px) { html .charsheet .slugblaster .col-sm-1 { position: initial; grid-column-start: auto; grid-column-end: span 1; } html .charsheet .slugblaster .col-sm-2 { position: initial; grid-column-start: auto; grid-column-end: span 2; } html .charsheet .slugblaster .col-sm-3 { position: initial; grid-column-start: auto; grid-column-end: span 3; } html .charsheet .slugblaster .col-sm-4 { position: initial; grid-column-start: auto; grid-column-end: span 4; } html .charsheet .slugblaster .col-sm-5 { position: initial; grid-column-start: auto; grid-column-end: span 5; } html .charsheet .slugblaster .col-sm-6 { position: initial; grid-column-start: auto; grid-column-end: span 6; } html .charsheet .slugblaster .col-sm-7 { position: initial; grid-column-start: auto; grid-column-end: span 7; } html .charsheet .slugblaster .col-sm-8 { position: initial; grid-column-start: auto; grid-column-end: span 8; } html .charsheet .slugblaster .col-sm-9 { position: initial; grid-column-start: auto; grid-column-end: span 9; } html .charsheet .slugblaster .col-sm-10 { position: initial; grid-column-start: auto; grid-column-end: span 10; } html .charsheet .slugblaster .col-sm-11 { position: initial; grid-column-start: auto; grid-column-end: span 11; } html .charsheet .slugblaster .col-sm-12 { position: initial; grid-column-start: auto; grid-column-end: span 12; } html .charsheet .slugblaster .show-sm { display: none; } } @media (max-width: 576px) { html .charsheet .slugblaster .hide-sm { display: none; } } html .charsheet .slugblaster .only-sm { display: none; } @media (width: 576px) { html .charsheet .slugblaster .only-sm { display: block; } } @media (min-width: 768px) { html .charsheet .slugblaster .col-md-1 { position: initial; grid-column-start: auto; grid-column-end: span 1; } html .charsheet .slugblaster .col-md-2 { position: initial; grid-column-start: auto; grid-column-end: span 2; } html .charsheet .slugblaster .col-md-3 { position: initial; grid-column-start: auto; grid-column-end: span 3; } html .charsheet .slugblaster .col-md-4 { position: initial; grid-column-start: auto; grid-column-end: span 4; } html .charsheet .slugblaster .col-md-5 { position: initial; grid-column-start: auto; grid-column-end: span 5; } html .charsheet .slugblaster .col-md-6 { position: initial; grid-column-start: auto; grid-column-end: span 6; } html .charsheet .slugblaster .col-md-7 { position: initial; grid-column-start: auto; grid-column-end: span 7; } html .charsheet .slugblaster .col-md-8 { position: initial; grid-column-start: auto; grid-column-end: span 8; } html .charsheet .slugblaster .col-md-9 { position: initial; grid-column-start: auto; grid-column-end: span 9; } html .charsheet .slugblaster .col-md-10 { position: initial; grid-column-start: auto; grid-column-end: span 10; } html .charsheet .slugblaster .col-md-11 { position: initial; grid-column-start: auto; grid-column-end: span 11; } html .charsheet .slugblaster .col-md-12 { position: initial; grid-column-start: auto; grid-column-end: span 12; } html .charsheet .slugblaster .show-md { display: none; } } @media (max-width: 768px) { html .charsheet .slugblaster .hide-md { display: none; } } html .charsheet .slugblaster .only-md { display: none; } @media (width: 768px) { html .charsheet .slugblaster .only-md { display: block; } } @media (min-width: 992px) { html .charsheet .slugblaster .col-lg-1 { position: initial; grid-column-start: auto; grid-column-end: span 1; } html .charsheet .slugblaster .col-lg-2 { position: initial; grid-column-start: auto; grid-column-end: span 2; } html .charsheet .slugblaster .col-lg-3 { position: initial; grid-column-start: auto; grid-column-end: span 3; } html .charsheet .slugblaster .col-lg-4 { position: initial; grid-column-start: auto; grid-column-end: span 4; } html .charsheet .slugblaster .col-lg-5 { position: initial; grid-column-start: auto; grid-column-end: span 5; } html .charsheet .slugblaster .col-lg-6 { position: initial; grid-column-start: auto; grid-column-end: span 6; } html .charsheet .slugblaster .col-lg-7 { position: initial; grid-column-start: auto; grid-column-end: span 7; } html .charsheet .slugblaster .col-lg-8 { position: initial; grid-column-start: auto; grid-column-end: span 8; } html .charsheet .slugblaster .col-lg-9 { position: initial; grid-column-start: auto; grid-column-end: span 9; } html .charsheet .slugblaster .col-lg-10 { position: initial; grid-column-start: auto; grid-column-end: span 10; } html .charsheet .slugblaster .col-lg-11 { position: initial; grid-column-start: auto; grid-column-end: span 11; } html .charsheet .slugblaster .col-lg-12 { position: initial; grid-column-start: auto; grid-column-end: span 12; } html .charsheet .slugblaster .show-lg { display: none; } } @media (max-width: 992px) { html .charsheet .slugblaster .hide-lg { display: none; } } html .charsheet .slugblaster .only-lg { display: none; } @media (width: 992px) { html .charsheet .slugblaster .only-lg { display: block; } } @media (min-width: 1200px) { html .charsheet .slugblaster .col-xl-1 { position: initial; grid-column-start: auto; grid-column-end: span 1; } html .charsheet .slugblaster .col-xl-2 { position: initial; grid-column-start: auto; grid-column-end: span 2; } html .charsheet .slugblaster .col-xl-3 { position: initial; grid-column-start: auto; grid-column-end: span 3; } html .charsheet .slugblaster .col-xl-4 { position: initial; grid-column-start: auto; grid-column-end: span 4; } html .charsheet .slugblaster .col-xl-5 { position: initial; grid-column-start: auto; grid-column-end: span 5; } html .charsheet .slugblaster .col-xl-6 { position: initial; grid-column-start: auto; grid-column-end: span 6; } html .charsheet .slugblaster .col-xl-7 { position: initial; grid-column-start: auto; grid-column-end: span 7; } html .charsheet .slugblaster .col-xl-8 { position: initial; grid-column-start: auto; grid-column-end: span 8; } html .charsheet .slugblaster .col-xl-9 { position: initial; grid-column-start: auto; grid-column-end: span 9; } html .charsheet .slugblaster .col-xl-10 { position: initial; grid-column-start: auto; grid-column-end: span 10; } html .charsheet .slugblaster .col-xl-11 { position: initial; grid-column-start: auto; grid-column-end: span 11; } html .charsheet .slugblaster .col-xl-12 { position: initial; grid-column-start: auto; grid-column-end: span 12; } html .charsheet .slugblaster .show-xl { display: none; } } @media (max-width: 1200px) { html .charsheet .slugblaster .hide-xl { display: none; } } html .charsheet .slugblaster .only-xl { display: none; } @media (width: 1200px) { html .charsheet .slugblaster .only-xl { display: block; } } @media (min-width: 1400px) { html .charsheet .slugblaster .col-xxl-1 { position: initial; grid-column-start: auto; grid-column-end: span 1; } html .charsheet .slugblaster .col-xxl-2 { position: initial; grid-column-start: auto; grid-column-end: span 2; } html .charsheet .slugblaster .col-xxl-3 { position: initial; grid-column-start: auto; grid-column-end: span 3; } html .charsheet .slugblaster .col-xxl-4 { position: initial; grid-column-start: auto; grid-column-end: span 4; } html .charsheet .slugblaster .col-xxl-5 { position: initial; grid-column-start: auto; grid-column-end: span 5; } html .charsheet .slugblaster .col-xxl-6 { position: initial; grid-column-start: auto; grid-column-end: span 6; } html .charsheet .slugblaster .col-xxl-7 { position: initial; grid-column-start: auto; grid-column-end: span 7; } html .charsheet .slugblaster .col-xxl-8 { position: initial; grid-column-start: auto; grid-column-end: span 8; } html .charsheet .slugblaster .col-xxl-9 { position: initial; grid-column-start: auto; grid-column-end: span 9; } html .charsheet .slugblaster .col-xxl-10 { position: initial; grid-column-start: auto; grid-column-end: span 10; } html .charsheet .slugblaster .col-xxl-11 { position: initial; grid-column-start: auto; grid-column-end: span 11; } html .charsheet .slugblaster .col-xxl-12 { position: initial; grid-column-start: auto; grid-column-end: span 12; } html .charsheet .slugblaster .show-xxl { display: none; } } @media (max-width: 1400px) { html .charsheet .slugblaster .hide-xxl { display: none; } } html .charsheet .slugblaster .only-xxl { display: none; } @media (width: 1400px) { html .charsheet .slugblaster .only-xxl { display: block; } } html .charsheet .slugblaster .rowspan-2 { height: 100%; grid-row: span 2; } html .charsheet .slugblaster .colspan-2 { height: 100%; grid-column: span 2; } html .charsheet .slugblaster .rowspan-3 { height: 100%; grid-row: span 3; } html .charsheet .slugblaster .colspan-3 { height: 100%; grid-column: span 3; } html .charsheet .slugblaster .rowspan-4 { height: 100%; grid-row: span 4; } html .charsheet .slugblaster .colspan-4 { height: 100%; grid-column: span 4; } html .charsheet .slugblaster .rowspan-5 { height: 100%; grid-row: span 5; } html .charsheet .slugblaster .colspan-5 { height: 100%; grid-column: span 5; } html .charsheet .slugblaster .rowspan-6 { height: 100%; grid-row: span 6; } html .charsheet .slugblaster .colspan-6 { height: 100%; grid-column: span 6; } html .charsheet .slugblaster .rowspan-7 { height: 100%; grid-row: span 7; } html .charsheet .slugblaster .colspan-7 { height: 100%; grid-column: span 7; } html .charsheet .slugblaster .rowspan-8 { height: 100%; grid-row: span 8; } html .charsheet .slugblaster .colspan-8 { height: 100%; grid-column: span 8; } html .charsheet .slugblaster .rowspan-9 { height: 100%; grid-row: span 9; } html .charsheet .slugblaster .colspan-9 { height: 100%; grid-column: span 9; } html .charsheet .slugblaster .rowspan-10 { height: 100%; grid-row: span 10; } html .charsheet .slugblaster .colspan-10 { height: 100%; grid-column: span 10; } html .charsheet .slugblaster .rowspan-11 { height: 100%; grid-row: span 11; } html .charsheet .slugblaster .colspan-11 { height: 100%; grid-column: span 11; } html .charsheet .slugblaster .rowspan-12 { height: 100%; grid-row: span 12; } html .charsheet .slugblaster .colspan-12 { height: 100%; grid-column: span 12; } html .charsheet .slugblaster .tophat { background-color: transparent; } html .charsheet .slugblaster .tophat__content { display: flex; flex-wrap: wrap; gap: 0.5rem 0.5rem; align-items: center; justify-content: flex-end; padding-inline: 0.5rem; } html .charsheet .slugblaster .tophat__title { flex: calc(60% - 1rem); font-size: 3rem; font-family: "Playpen Sans", "Comic Sans MS", serif; text-transform: uppercase; } html .charsheet .slugblaster .tophat .nav { width: calc(40% - 1rem); background-color: transparent; } html .charsheet .slugblaster .nav { display: flex; gap: 0.5rem 0.5rem; align-items: center; justify-content: space-between; } html .charsheet .slugblaster .nav::before, html .charsheet .slugblaster .nav::after { display: none; content: ""; } html .charsheet .slugblaster .nav > li { flex: 1; } html .charsheet .slugblaster .nav__action { width: 100%; min-height: 3rem; text-transform: uppercase; } html .charsheet .slugblaster .nav__action span { padding-inline: 0.5rem; font-family: "Silkscreen", "DotGothic16", "Comic Sans MS", cursive; font-weight: 700; white-space: nowrap; } html .charsheet .slugblaster .footer { padding: 0.5rem; } html .charsheet .slugblaster__wrapper { display: flex; flex-direction: column; gap: 0.5rem 0; margin: 0.25rem; margin-top: 0; margin-inline: 1rem; }