Files
roll20-character-sheets/Apocalypse Keys/ApocalypseKeys.css
T
fredhicks 58079a75f0 Small bugfixes
- Addressed an issue with a translation function (only affected character creation)

- Addressed a bug with the scrollbar preference setting.
2025-03-06 11:19:14 -05:00

1286 lines
44 KiB
CSS

@import url("https://fonts.googleapis.com/css2?family=Amatic+SC:wght@400;700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@48,400,1,0");
@import url("https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,400;0,700;1,400;1,700&display=swap");
:root, .sheet-rolltemplate-2d6-roll, .sheet-rolltemplate-bondspend {
--ak-fg: black;
--ak-bg: white;
--ak-pink: #82174a;
--ak-alert: #046466;
font-family: Nunito, sans-serif;
}
.sheet-darkmode, .sheet-rolltemplate-darkmode {
--ak-fg: white;
--ak-bg: #1f1f1f;
--ak-darkpink: #ac1d4a;
--ak-mediumpink: #da255e;
--ak-lightpink: #e5668e;
--ak-pink: #bd66e5;
--ak-alert: #08c1c4;
}
.sheet-darkmode .ui-dialog .charsheet .doomclock, .sheet-rolltemplate-darkmode .ui-dialog .charsheet .doomclock {
background-image: url(https://raw.githubusercontent.com/fredhicks/ehp-roll20/master/art/alldoom-darkmode.svg);
}
.wrapper p,
.ui-dialog .charsheet {
font-family: Nunito, sans-serif;
font-size: 16px;
color: var(--ak-fg) !important;
background-color: var(--ak-bg);
line-height: unset;
}
.menu {
position: fixed;
width: calc(100% - 40px);
bottom: 0;
background-color: var(--ak-bg);
border-top: 1px solid var(--ak-pink);
margin-left: -30px;
padding-left: 30px;
margin-right: -12px;
margin-bottom: 0px;
padding-bottom: 10px;
padding-top: 12px;
-webkit-box-shadow: 0px -10px 8px var(--ak-bg);
box-shadow: 0px -10px 8px var(--ak-bg);
z-index: 5;
font-size: 14px;
}
.sheet-darkmode .menu {
padding-bottom: 0px;
}
.largedialog textarea {
width: calc(100% - 12px);
}
.largedialog .charsheet textarea.bio {
height: 80px;
}
.largedialog .charsheet textarea.notes {
font-size: 16px;
height: 200px;
}
.ui-dialog .charsheet .wrapper {
padding-bottom: 60px;
margin-top: -10px;
}
.sheet-darkmode .ui-dialog .charsheet .wrapper {
margin-top: 0px;
}
.rightwards {
text-align: right;
}
.ui-dialog .charsheet .repcontrol {
margin-top: 5px;
}
.ui-dialog .charsheet .repcontrol button.btn {
background: var(--ak-bg);
color: var(--ak-pink);
border: 1px solid var(--ak-pink);
text-shadow: none;
}
.ui-dialog .charsheet ul {
list-style: none;
}
.ui-dialog .charsheet ul li::before {
font-family: Pictos Custom;
content: "t ";
width: 21px;
margin-left: -21px;
color: var(--ak-pink);
}
.ui-dialog .charsheet p + ul {
margin-top: -9px;
}
.ui-dialog .charsheet input, .ui-dialog .charsheet select, .ui-dialog .charsheet textarea {
color: var(--ak-fg);
background-color: var(--ak-bg);
}
.ui-dialog .charsheet textarea, .ui-dialog .charsheet input[type=text].bio {
border-color: var(--ak-pink);
}
.ui-dialog .charsheet a, .ui-dialog .charsheet a.icon {
text-decoration: none;
color: var(--ak-pink);
}
.ui-dialog .charsheet a.fglink {
color: var(--ak-fg);
}
.ui-dialog .charsheet a:hover, .ui-dialog .charsheet a.icon:hover {
color: var(--ak-fg);
}
.ui-dialog .charsheet .colorized {
color: var(--ak-pink);
}
.ui-dialog .charsheet .dicespace {
width: 28px;
display: inline-block;
}
.ui-dialog .charsheet button[type=roll]:hover, .ui-dialog .charsheet button[type=roll].hfade:hover:before, .ui-dialog .charsheet button[type=roll].colorized:hover:before, .ui-dialog .charsheet button[type=roll].colorized:hover, .ui-dialog .charsheet button[type=action]:hover, .ui-dialog .charsheet button[type=action].hfade:hover:before, .ui-dialog .charsheet button[type=action].colorized:hover:before, .ui-dialog .charsheet button[type=action].colorized:hover, .ui-dialog .charsheet a:hover, .ui-dialog .charsheet a.hfade:hover:before, .ui-dialog .charsheet a.colorized:hover:before, .ui-dialog .charsheet a.colorized:hover, .ui-dialog .charsheet a.icon:hover, .ui-dialog .charsheet a.icon.hfade:hover:before, .ui-dialog .charsheet a.icon.colorized:hover:before, .ui-dialog .charsheet a.icon.colorized:hover {
color: var(--ak-fg);
background-color: var(--ak-bg);
text-shadow: 1px 1px var(--ak-bg), -1px 1px var(--ak-bg), 1px -1px var(--ak-bg), -1px -1px var(--ak-bg), 0 0 2px var(--ak-fg), 0 0 6px var(--ak-fg);
}
.ui-dialog .charsheet button[type=roll]:active, .ui-dialog .charsheet button[type=roll].hfade:active:before, .ui-dialog .charsheet button[type=roll].colorized:active:before, .ui-dialog .charsheet button[type=roll].colorized:active, .ui-dialog .charsheet button[type=action]:active, .ui-dialog .charsheet button[type=action].hfade:active:before, .ui-dialog .charsheet button[type=action].colorized:active:before, .ui-dialog .charsheet button[type=action].colorized:active, .ui-dialog .charsheet a:active, .ui-dialog .charsheet a.hfade:active:before, .ui-dialog .charsheet a.colorized:active:before, .ui-dialog .charsheet a.colorized:active, .ui-dialog .charsheet a.icon:active, .ui-dialog .charsheet a.icon.hfade:active:before, .ui-dialog .charsheet a.icon.colorized:active:before, .ui-dialog .charsheet a.icon.colorized:active {
color: var(--ak-bg);
text-shadow: 1px 1px var(--ak-fg), -1px 1px var(--ak-fg), 1px -1px var(--ak-fg), -1px -1px var(--ak-fg), 0 0 2px var(--ak-fg), 0 0 6px var(--ak-fg);
}
.ui-dialog .charsheet button[type=roll], .ui-dialog .charsheet button[type=action], .ui-dialog .charsheet .icon {
padding: 0px;
font-size: 100%;
margin: 0px 0px 0px 0px;
line-height: unset;
border: unset;
background: unset;
color: unset;
text-shadow: unset;
border-radius: unset;
-webkit-box-shadow: unset;
box-shadow: unset;
vertical-align: unset;
/* &.counterclockwise
* transform: scale(-1,1) */
}
.ui-dialog .charsheet button[type=roll]:before, .ui-dialog .charsheet button[type=action]:before, .ui-dialog .charsheet .icon:before {
content: "";
font-family: "Pictos";
vertical-align: 0px;
}
.ui-dialog .charsheet button[type=roll].hfade, .ui-dialog .charsheet button[type=roll].hfade:before, .ui-dialog .charsheet button[type=roll].colorized, .ui-dialog .charsheet button[type=roll].colorized:before, .ui-dialog .charsheet button[type=action].hfade, .ui-dialog .charsheet button[type=action].hfade:before, .ui-dialog .charsheet button[type=action].colorized, .ui-dialog .charsheet button[type=action].colorized:before, .ui-dialog .charsheet .icon.hfade, .ui-dialog .charsheet .icon.hfade:before, .ui-dialog .charsheet .icon.colorized, .ui-dialog .charsheet .icon.colorized:before {
color: var(--ak-pink);
}
.ui-dialog .charsheet button[type=roll].hfade:before, .ui-dialog .charsheet button[type=action].hfade:before, .ui-dialog .charsheet .icon.hfade:before {
font-size: 80%;
}
.ui-dialog .charsheet button[type=roll].expand:before, .ui-dialog .charsheet button[type=action].expand:before, .ui-dialog .charsheet .icon.expand:before {
font-family: "Material Symbols Outlined";
content: "expand";
vertical-align: -2px;
}
.ui-dialog .charsheet button[type=roll].contract:before, .ui-dialog .charsheet button[type=action].contract:before, .ui-dialog .charsheet .icon.contract:before {
font-family: "Material Symbols Outlined";
content: "compress";
vertical-align: -2px;
}
.ui-dialog .charsheet button[type=roll].contract.hfade:before, .ui-dialog .charsheet button[type=action].contract.hfade:before, .ui-dialog .charsheet .icon.contract.hfade:before {
vertical-align: -4px;
}
.ui-dialog .charsheet button[type=roll].expand.hfade:before, .ui-dialog .charsheet button[type=action].expand.hfade:before, .ui-dialog .charsheet .icon.expand.hfade:before {
vertical-align: -4px;
}
.ui-dialog .charsheet button[type=roll].view:before, .ui-dialog .charsheet button[type=action].view:before, .ui-dialog .charsheet .icon.view:before {
font-family: "Material Symbols Outlined";
content: "visibility";
vertical-align: -3px;
}
.ui-dialog .charsheet button[type=roll].dismiss:before, .ui-dialog .charsheet button[type=action].dismiss:before, .ui-dialog .charsheet .icon.dismiss:before {
font-family: "Material Symbols Outlined";
content: "visibility_off";
vertical-align: -3px;
}
.ui-dialog .charsheet button[type=roll].edit:before, .ui-dialog .charsheet button[type=action].edit:before, .ui-dialog .charsheet .icon.edit:before {
content: "p";
}
.ui-dialog .charsheet button[type=roll].uparrow:before, .ui-dialog .charsheet button[type=action].uparrow:before, .ui-dialog .charsheet .icon.uparrow:before {
content: "{";
}
.ui-dialog .charsheet button[type=roll].downarrow:before, .ui-dialog .charsheet button[type=action].downarrow:before, .ui-dialog .charsheet .icon.downarrow:before {
content: "}";
}
.ui-dialog .charsheet button[type=roll].locked:before, .ui-dialog .charsheet button[type=action].locked:before, .ui-dialog .charsheet .icon.locked:before {
font-family: "Material Symbols Outlined";
content: "lock";
font-size: 110%;
vertical-align: -4px;
}
.ui-dialog .charsheet button[type=roll].unlocked:before, .ui-dialog .charsheet button[type=action].unlocked:before, .ui-dialog .charsheet .icon.unlocked:before {
font-family: "Material Symbols Outlined";
content: "no_encryption";
font-size: 110%;
vertical-align: -4px;
}
.ui-dialog .charsheet button[type=roll].dice:before, .ui-dialog .charsheet button[type=action].dice:before, .ui-dialog .charsheet .icon.dice:before {
content: "FA";
font-family: "dicefontd6";
vertical-align: -1px;
font-size: 110%;
}
.ui-dialog .charsheet button[type=roll].checked:before, .ui-dialog .charsheet button[type=action].checked:before, .ui-dialog .charsheet .icon.checked:before {
font-family: "Material Symbols Outlined";
content: "check_box";
font-size: 110%;
vertical-align: -4px;
}
.ui-dialog .charsheet button[type=roll].checked.hfade:before, .ui-dialog .charsheet button[type=action].checked.hfade:before, .ui-dialog .charsheet .icon.checked.hfade:before {
font-size: 80%;
vertical-align: -2px;
}
.ui-dialog .charsheet button[type=roll].unchecked:before, .ui-dialog .charsheet button[type=action].unchecked:before, .ui-dialog .charsheet .icon.unchecked:before {
font-family: "Material Symbols Outlined";
content: "check_box_outline_blank";
font-size: 110%;
vertical-align: -4px;
}
.ui-dialog .charsheet button[type=roll].unchecked.hfade:before, .ui-dialog .charsheet button[type=action].unchecked.hfade:before, .ui-dialog .charsheet .icon.unchecked.hfade:before {
font-size: 80%;
vertical-align: -2px;
}
.ui-dialog .charsheet button[type=roll].bothchecks:before, .ui-dialog .charsheet button[type=action].bothchecks:before, .ui-dialog .charsheet .icon.bothchecks:before {
font-family: "Material Symbols Outlined";
content: "check_box_outline_blankcheck_box";
font-size: 110%;
vertical-align: -4px;
}
.ui-dialog .charsheet button[type=roll].bothchecks.hfade:before, .ui-dialog .charsheet button[type=action].bothchecks.hfade:before, .ui-dialog .charsheet .icon.bothchecks.hfade:before {
font-size: 80%;
vertical-align: -2px;
}
.ui-dialog .charsheet button[type=roll].checked.tightright:before, .ui-dialog .charsheet button[type=roll].unchecked.tightright:before, .ui-dialog .charsheet button[type=roll].bothchecks.tightright:before, .ui-dialog .charsheet button[type=action].checked.tightright:before, .ui-dialog .charsheet button[type=action].unchecked.tightright:before, .ui-dialog .charsheet button[type=action].bothchecks.tightright:before, .ui-dialog .charsheet .icon.checked.tightright:before, .ui-dialog .charsheet .icon.unchecked.tightright:before, .ui-dialog .charsheet .icon.bothchecks.tightright:before {
margin-right: -4px;
}
.ui-dialog .charsheet button[type=roll].vexpand:before, .ui-dialog .charsheet button[type=action].vexpand:before, .ui-dialog .charsheet .icon.vexpand:before {
font-family: "Material Symbols Outlined";
content: "last_page";
font-size: 30px;
}
.ui-dialog .charsheet button[type=roll].vcontract:before, .ui-dialog .charsheet button[type=action].vcontract:before, .ui-dialog .charsheet .icon.vcontract:before {
font-family: "Material Symbols Outlined";
content: "first_page";
font-size: 30px;
}
.ui-dialog .charsheet button[type=roll].rarrow:before, .ui-dialog .charsheet button[type=action].rarrow:before, .ui-dialog .charsheet .icon.rarrow:before {
font-family: "Material Symbols Outlined";
content: "arrow_forward";
vertical-align: -2px;
}
.ui-dialog .charsheet button[type=roll].document:before, .ui-dialog .charsheet button[type=action].document:before, .ui-dialog .charsheet .icon.document:before {
font-family: "Material Symbols Outlined";
content: "density_small";
font-style: normal;
vertical-align: -3px;
}
.ui-dialog .charsheet button[type=roll].clockwise:before, .ui-dialog .charsheet button[type=action].clockwise:before, .ui-dialog .charsheet .icon.clockwise:before {
font-family: "Material Symbols Outlined";
content: "add_circle";
vertical-align: -2px;
}
.ui-dialog .charsheet button[type=roll].counterclockwise:before, .ui-dialog .charsheet button[type=action].counterclockwise:before, .ui-dialog .charsheet .icon.counterclockwise:before {
font-family: "Material Symbols Outlined";
content: "do_not_disturb_on";
vertical-align: -2px;
}
.ui-dialog .charsheet button[type=roll].enact:before, .ui-dialog .charsheet button[type=action].enact:before, .ui-dialog .charsheet .icon.enact:before {
font-family: "Material Symbols Outlined";
content: "clear_day";
vertical-align: -2px;
}
.ui-dialog .charsheet button[type=roll].warning:before, .ui-dialog .charsheet button[type=action].warning:before, .ui-dialog .charsheet .icon.warning:before {
font-family: "Material Symbols Outlined";
content: "warning";
color: var(--ak-pink);
vertical-align: -2px;
}
.ui-dialog .charsheet button[type=roll].star:before, .ui-dialog .charsheet button[type=action].star:before, .ui-dialog .charsheet .icon.star:before {
font-family: "Material Symbols Outlined";
content: "star";
color: var(--ak-pink);
vertical-align: -1px;
}
.ui-dialog .charsheet button[type=roll].alert:before, .ui-dialog .charsheet button[type=action].alert:before, .ui-dialog .charsheet .icon.alert:before {
color: var(--ak-alert);
}
.ui-dialog .charsheet .titlebar button {
width: 100%;
}
.ui-dialog .charsheet .titlebar button:hover {
width: 100%;
background: var(--ak-pink);
}
.ui-dialog .charsheet input[type=text], .ui-dialog .charsheet input[type=number], .ui-dialog .charsheet select {
border: none;
border-bottom: 1px solid var(--ak-bg);
font-size: 18px;
}
.ui-dialog .charsheet input[type=text]:hover, .ui-dialog .charsheet input[type=number]:hover, .ui-dialog .charsheet select:hover {
border-bottom: 1px solid var(--ak-fg);
}
.ui-dialog .charsheet input.fillme {
border-bottom: 1px solid var(--ak-pink);
}
.ui-dialog .charsheet input.bigname {
font-family: "Amatic SC", sans-serif;
font-size: 36px;
line-height: 36px;
font-weight: 700;
padding-left: 0px;
color: var(--ak-pink);
}
.ui-dialog .charsheet input.view[value="1"] ~ .viewable {
display: initial;
}
.ui-dialog .charsheet input.view ~ .viewable {
display: none;
}
.ui-dialog .charsheet input.nullview[value="0"] ~ .viewable {
display: none;
}
.ui-dialog .charsheet input.nullview ~ .viewable {
display: initial;
}
.ui-dialog .charsheet input.antiview[value="0"] ~ .viewable {
display: initial;
}
.ui-dialog .charsheet input.antiview ~ .viewable {
display: none;
}
.ui-dialog .charsheet .columns, .ui-dialog .charsheet .topline {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
}
.ui-dialog .charsheet .topline input[type=text] {
-webkit-box-flex: 1;
-ms-flex-positive: 1;
flex-grow: 1;
}
.ui-dialog .charsheet .divlinetop {
margin-top: 6px;
margin-left: -6px;
margin-right: -6px;
padding-top: 3px;
border-top: 1px solid var(--ak-pink);
}
.ui-dialog .charsheet .columns .wide {
-webkit-box-flex: 1;
-ms-flex-positive: 1;
flex-grow: 1;
max-width: 100%;
}
.ui-dialog .charsheet .columns .middling {
margin-right: 18px;
width: 40%;
-ms-flex-negative: 0;
flex-shrink: 0;
}
.ui-dialog .charsheet .columns .narrow {
margin-right: 18px;
width: 25%;
-ms-flex-negative: 0;
flex-shrink: 0;
}
.ui-dialog .charsheet .columns .narrow select {
width: 100%;
height: 40px;
}
.ui-dialog .charsheet .columns .sidetab {
width: 30px;
padding-top: 6px;
-webkit-box-flex: 0;
-ms-flex-positive: 0;
flex-grow: 0;
-ms-flex-negative: 0;
flex-shrink: 0;
}
.ui-dialog .charsheet .header, .ui-dialog .charsheet .subheader {
margin-top: 12px;
font-family: "Amatic SC", sans-serif;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start;
}
.ui-dialog .charsheet .header .title, .ui-dialog .charsheet .subheader .title {
-webkit-box-flex: 1;
-ms-flex-positive: 1;
flex-grow: 1;
}
.ui-dialog .charsheet .header {
font-size: 36px;
line-height: 36px;
font-weight: 700;
color: var(--ak-fg);
border-bottom: 0.5px solid var(--ak-pink);
}
.ui-dialog .charsheet .header.fixed {
margin-top: 16px;
}
.ui-dialog .charsheet .subheader {
font-size: 30px;
line-height: 30px;
font-weight: 400;
color: var(--ak-fg);
}
.ui-dialog .charsheet .move, .ui-dialog .charsheet .bond, .ui-dialog .charsheet .checklist1box, .ui-dialog .charsheet .checklist2box, .ui-dialog .charsheet .striker {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
}
.ui-dialog .charsheet .striker .text {
-webkit-box-flex: 1;
-ms-flex-positive: 1;
flex-grow: 1;
}
.ui-dialog .charsheet .striker .text .stricken + span {
text-decoration: none;
}
.ui-dialog .charsheet .striker .text .stricken[value="1"] + span {
text-decoration: line-through;
}
.ui-dialog .charsheet .bond {
margin-top: 10px;
}
.ui-dialog .charsheet .bond input[type=number] {
font-size: 16px;
width: 50px;
height: 18px;
-ms-flex-negative: 0;
flex-shrink: 0;
-webkit-box-flex: 0;
-ms-flex-positive: 0;
flex-grow: 0;
text-align: right;
border-bottom: 1px solid var(--ak-pink);
}
.ui-dialog .charsheet .bond input[type=text] {
font-size: 16px;
height: 18px;
-ms-flex-negative: 1;
flex-shrink: 1;
-webkit-box-flex: 1;
-ms-flex-positive: 1;
flex-grow: 1;
width: 100%;
border-bottom: 1px solid var(--ak-pink);
}
.ui-dialog .charsheet .bondzone .btn {
color: var(--ak-pink);
background: var(--ak-bg);
border-color: var(--ak-pink);
margin-top: 6px;
text-shadow: unset;
}
.ui-dialog .charsheet .bondzone .btn:hover {
color: var(--ak-fg);
border-color: var(--ak-fg);
background-color: var(--ak-bg);
text-shadow: 1px 1px var(--ak-bg), -1px 1px var(--ak-bg), 1px -1px var(--ak-bg), -1px -1px var(--ak-bg), 0 0 2px var(--ak-fg), 0 0 6px var(--ak-fg);
opacity: 1;
}
.ui-dialog .charsheet .bondzone .btn:active {
color: var(--ak-bg);
border-color: var(--ak-fg);
text-shadow: 1px 1px var(--ak-fg), -1px 1px var(--ak-fg), 1px -1px var(--ak-fg), -1px -1px var(--ak-fg), 0 0 2px var(--ak-fg), 0 0 6px var(--ak-fg);
}
.ui-dialog .charsheet .bondspend {
text-align: left;
}
.ui-dialog .charsheet .bondspend .spendline {
height: 24px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
max-width: 300px;
}
.ui-dialog .charsheet .bondspend .spendline input[type=number] {
height: 21px;
font-size: 16px;
width: 50px;
border-bottom: 1px solid var(--ak-pink);
text-align: right;
}
.ui-dialog .charsheet .bondspend .btn {
display: none;
}
.ui-dialog .charsheet .checklist1box .buttons, .ui-dialog .charsheet .checklist2box .buttons, .ui-dialog .charsheet .striker .buttons {
white-space: nowrap;
padding-right: 6px;
height: 24px;
text-align: right;
-ms-flex-negative: 0;
flex-shrink: 0;
-webkit-box-flex: 0;
-ms-flex-positive: 0;
flex-grow: 0;
}
.ui-dialog .charsheet .checklist1box .buttons, .ui-dialog .charsheet .striker .buttons {
width: 18px;
}
.ui-dialog .charsheet .checklist2box .buttons {
width: 36px;
}
.ui-dialog .charsheet .move .buttons {
white-space: nowrap;
padding-right: 6px;
width: 36px;
height: 24px;
text-align: right;
-ms-flex-negative: 0;
flex-shrink: 0;
-webkit-box-flex: 0;
-ms-flex-positive: 0;
flex-grow: 0;
}
.ui-dialog .charsheet input.checksonly ~ div input.checker + .move {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
.ui-dialog .charsheet input.checksonly[value="1"] ~ div input.checker[value="0"] + .move {
display: none !important;
}
.ui-dialog .charsheet .movemark {
display: none;
}
.ui-dialog .charsheet .moveselector + .movemark + div input.checker + .move {
display: none;
}
.ui-dialog .charsheet .moveselector + .movemark[value="1"] + div input.checker + .move {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
.ui-dialog .charsheet .moveselector[value=summoned] + .movemark + div.pbsummoned input.checker + .move {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
.ui-dialog .charsheet .moveselector[value=surge] + .movemark + div.pbsurge input.checker + .move {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
.ui-dialog .charsheet .moveselector[value=found] + .movemark + div.pbfound input.checker + .move {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
.ui-dialog .charsheet .moveselector[value=shade] + .movemark + div.pbshade input.checker + .move {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
.ui-dialog .charsheet .moveselector[value=last] + .movemark + div.pblast input.checker + .move {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
.ui-dialog .charsheet .moveselector[value=fallen] + .movemark + div.pbfallen input.checker + .move {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
.ui-dialog .charsheet .moveselector[value=hungry] + .movemark + div.pbhungry input.checker + .move {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
.ui-dialog .charsheet .moveselector[value=betrayed] + .movemark + div.pbbetrayed input.checker + .move {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
.ui-dialog .charsheet .moveselector[value=chained] + .movemark + div.pbchained input.checker + .move {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
.ui-dialog .charsheet .moveselector[value=untethered] + .movemark + div.pbuntethered input.checker + .move {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
.ui-dialog .charsheet .pbid {
font-size: 80%;
line-height: 80%;
font-style: italic;
}
.ui-dialog .charsheet .pbselector ~ .pbsummoned {
display: none;
}
.ui-dialog .charsheet .pbselector ~ .pbsurge {
display: none;
}
.ui-dialog .charsheet .pbselector ~ .pbfound {
display: none;
}
.ui-dialog .charsheet .pbselector ~ .pbshade {
display: none;
}
.ui-dialog .charsheet .pbselector ~ .pblast {
display: none;
}
.ui-dialog .charsheet .pbselector ~ .pbfallen {
display: none;
}
.ui-dialog .charsheet .pbselector ~ .pbhungry {
display: none;
}
.ui-dialog .charsheet .pbselector ~ .pbbetrayed {
display: none;
}
.ui-dialog .charsheet .pbselector ~ .pbchained {
display: none;
}
.ui-dialog .charsheet .pbselector ~ .pbuntethered {
display: none;
}
.ui-dialog .charsheet .pbselector[value=summoned] ~ .pbsummoned {
display: initial;
}
.ui-dialog .charsheet .pbselector[value=surge] ~ .pbsurge {
display: initial;
}
.ui-dialog .charsheet .pbselector[value=found] ~ .pbfound {
display: initial;
}
.ui-dialog .charsheet .pbselector[value=shade] ~ .pbshade {
display: initial;
}
.ui-dialog .charsheet .pbselector[value=last] ~ .pblast {
display: initial;
}
.ui-dialog .charsheet .pbselector[value=fallen] ~ .pbfallen {
display: initial;
}
.ui-dialog .charsheet .pbselector[value=hungry] ~ .pbhungry {
display: initial;
}
.ui-dialog .charsheet .pbselector[value=betrayed] ~ .pbbetrayed {
display: initial;
}
.ui-dialog .charsheet .pbselector[value=chained] ~ .pbchained {
display: initial;
}
.ui-dialog .charsheet .pbselector[value=untethered] ~ .pbuntethered {
display: initial;
}
.ui-dialog .charsheet .pbunselector ~ .pbsummoned {
display: initial;
}
.ui-dialog .charsheet .pbunselector ~ .pbsurge {
display: initial;
}
.ui-dialog .charsheet .pbunselector ~ .pbfound {
display: initial;
}
.ui-dialog .charsheet .pbunselector ~ .pbshade {
display: initial;
}
.ui-dialog .charsheet .pbunselector ~ .pblast {
display: initial;
}
.ui-dialog .charsheet .pbunselector ~ .pbfallen {
display: initial;
}
.ui-dialog .charsheet .pbunselector ~ .pbhungry {
display: initial;
}
.ui-dialog .charsheet .pbunselector ~ .pbbetrayed {
display: initial;
}
.ui-dialog .charsheet .pbunselector ~ .pbchained {
display: initial;
}
.ui-dialog .charsheet .pbunselector ~ .pbuntethered {
display: initial;
}
.ui-dialog .charsheet .pbunselector[value=summoned] ~ .pbsummoned {
display: none;
}
.ui-dialog .charsheet .pbunselector[value=surge] ~ .pbsurge {
display: none;
}
.ui-dialog .charsheet .pbunselector[value=found] ~ .pbfound {
display: none;
}
.ui-dialog .charsheet .pbunselector[value=shade] ~ .pbshade {
display: none;
}
.ui-dialog .charsheet .pbunselector[value=last] ~ .pblast {
display: none;
}
.ui-dialog .charsheet .pbunselector[value=fallen] ~ .pbfallen {
display: none;
}
.ui-dialog .charsheet .pbunselector[value=hungry] ~ .pbhungry {
display: none;
}
.ui-dialog .charsheet .pbunselector[value=betrayed] ~ .pbbetrayed {
display: none;
}
.ui-dialog .charsheet .pbunselector[value=chained] ~ .pbchained {
display: none;
}
.ui-dialog .charsheet .pbunselector[value=untethered] ~ .pbuntethered {
display: none;
}
.ui-dialog .charsheet .rollup ~ .roller {
display: none;
}
.ui-dialog .charsheet .rollup[value="0"] ~ .roller {
display: none;
}
.ui-dialog .charsheet .rollup[value="1"] ~ .roller {
display: initial;
}
.ui-dialog .charsheet .toggle + * + *, .ui-dialog .charsheet .toggle + * {
display: none;
}
.ui-dialog .charsheet .toggle[value="0"] + * + * {
display: initial;
}
.ui-dialog .charsheet .toggle[value="1"] + * {
display: initial;
}
.ui-dialog .charsheet .trigger, .ui-dialog .charsheet .term, .ui-dialog .charsheet .bold {
font-weight: bold;
}
.ui-dialog .charsheet .italic {
font-style: italic;
}
.ui-dialog .charsheet .trigger, .ui-dialog .charsheet .term {
color: var(--ak-pink);
}
.ui-dialog .charsheet .movename {
font-weight: bold;
font-variant: small-caps;
}
.ui-dialog .charsheet .spaceunder {
margin-bottom: 3px;
}
.ui-dialog .charsheet .result {
font-weight: bold;
text-transform: uppercase;
font-size: 90%;
color: white;
padding-left: 2px;
padding-right: 2px;
background-color: var(--ak-pink);
}
.ui-dialog .charsheet input.tokens {
width: 100%;
text-align: center;
font-size: 300%;
font-weight: bold;
}
.ui-dialog .charsheet .minihead {
margin-top: 6px;
text-transform: uppercase;
font-weight: bold;
}
.ui-dialog .charsheet .instruction {
font-size: 90%;
font-style: italic;
margin-bottom: 3px;
color: var(--ak-pink);
}
.ui-dialog .charsheet .conditions .checklist1box .conditiontext, .ui-dialog .charsheet .conditions .checklist2box .conditiontext {
text-transform: capitalize;
font-size: 16px;
}
.ui-dialog .charsheet .conditions .checklist1box .conditiontext input[type=text], .ui-dialog .charsheet .conditions .checklist2box .conditiontext input[type=text] {
text-transform: capitalize;
font-size: 16px;
height: 18px;
border-bottom: 1px solid var(--ak-pink);
width: 100%;
}
.ui-dialog .charsheet .conditions .checklist1box .buttons .unlocked {
display: none;
}
.ui-dialog .charsheet .conditions .checklist1box:hover .buttons input.toggle[value="0"] ~ .unlocked {
display: initial;
}
.ui-dialog .charsheet .conditiontext {
text-transform: capitalize;
}
.ui-dialog .charsheet input.hidecheckboxesnotnull[value=""] ~ div input.masker + .checklist1box, .ui-dialog .charsheet input.hidecheckboxesnotnull[value=""] ~ div input.masker + .checklist2box {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
.ui-dialog .charsheet input.hidecheckboxesnotnull:not([value=""]) ~ div input.masker[value="0"] + .checklist1box, .ui-dialog .charsheet input.hidecheckboxesnotnull:not([value=""]) ~ div input.masker[value="0"] + .checklist2box {
display: none;
}
.ui-dialog .charsheet input.hideempty[value=""] + * {
display: none;
}
.ui-dialog .charsheet input.hideempty + * {
display: initial;
}
.ui-dialog .charsheet input.colorizewhenactive[value="1"] + .tokens {
color: var(--ak-pink);
}
.ui-dialog .charsheet button.topspace {
margin-top: 6px;
}
.ui-dialog .charsheet .doomclock {
display: inline-block;
min-height: 160px;
min-width: 160px;
height: 160px;
width: 160px;
margin-bottom: 0px;
background-image: url(https://raw.githubusercontent.com/fredhicks/ehp-roll20/master/art/alldoom.svg);
background-repeat: no-repeat;
background-size: 2080px 960px;
background-clip: padding-box;
}
.ui-dialog .charsheet input.clocksize[value="2"] + input.clocksegment[value="0"] + .doomclock {
background-position: top 0px left 0px;
}
.ui-dialog .charsheet input.clocksize[value="2"] + input.clocksegment[value="1"] + .doomclock {
background-position: top 0px left -160px;
}
.ui-dialog .charsheet input.clocksize[value="2"] + input.clocksegment[value="2"] + .doomclock {
background-position: top 0px left -320px;
}
.ui-dialog .charsheet input.clocksize[value="4"] + input.clocksegment[value="0"] + .doomclock {
background-position: top -160px left 0px;
}
.ui-dialog .charsheet input.clocksize[value="4"] + input.clocksegment[value="1"] + .doomclock {
background-position: top -160px left -160px;
}
.ui-dialog .charsheet input.clocksize[value="4"] + input.clocksegment[value="2"] + .doomclock {
background-position: top -160px left -320px;
}
.ui-dialog .charsheet input.clocksize[value="4"] + input.clocksegment[value="3"] + .doomclock {
background-position: top -160px left -480px;
}
.ui-dialog .charsheet input.clocksize[value="4"] + input.clocksegment[value="4"] + .doomclock {
background-position: top -160px left -640px;
}
.ui-dialog .charsheet input.clocksize[value="6"] + input.clocksegment[value="0"] + .doomclock {
background-position: top -320px left 0px;
}
.ui-dialog .charsheet input.clocksize[value="6"] + input.clocksegment[value="1"] + .doomclock {
background-position: top -320px left -160px;
}
.ui-dialog .charsheet input.clocksize[value="6"] + input.clocksegment[value="2"] + .doomclock {
background-position: top -320px left -320px;
}
.ui-dialog .charsheet input.clocksize[value="6"] + input.clocksegment[value="3"] + .doomclock {
background-position: top -320px left -480px;
}
.ui-dialog .charsheet input.clocksize[value="6"] + input.clocksegment[value="4"] + .doomclock {
background-position: top -320px left -640px;
}
.ui-dialog .charsheet input.clocksize[value="6"] + input.clocksegment[value="5"] + .doomclock {
background-position: top -320px left -800px;
}
.ui-dialog .charsheet input.clocksize[value="6"] + input.clocksegment[value="6"] + .doomclock {
background-position: top -320px left -960px;
}
.ui-dialog .charsheet input.clocksize[value="8"] + input.clocksegment[value="0"] + .doomclock {
background-position: top -480px left 0px;
}
.ui-dialog .charsheet input.clocksize[value="8"] + input.clocksegment[value="1"] + .doomclock {
background-position: top -480px left -160px;
}
.ui-dialog .charsheet input.clocksize[value="8"] + input.clocksegment[value="2"] + .doomclock {
background-position: top -480px left -320px;
}
.ui-dialog .charsheet input.clocksize[value="8"] + input.clocksegment[value="3"] + .doomclock {
background-position: top -480px left -480px;
}
.ui-dialog .charsheet input.clocksize[value="8"] + input.clocksegment[value="4"] + .doomclock {
background-position: top -480px left -640px;
}
.ui-dialog .charsheet input.clocksize[value="8"] + input.clocksegment[value="5"] + .doomclock {
background-position: top -480px left -800px;
}
.ui-dialog .charsheet input.clocksize[value="8"] + input.clocksegment[value="6"] + .doomclock {
background-position: top -480px left -960px;
}
.ui-dialog .charsheet input.clocksize[value="8"] + input.clocksegment[value="7"] + .doomclock {
background-position: top -480px left -1120px;
}
.ui-dialog .charsheet input.clocksize[value="8"] + input.clocksegment[value="8"] + .doomclock {
background-position: top -480px left -1280px;
}
.ui-dialog .charsheet input.clocksize[value="10"] + input.clocksegment[value="0"] + .doomclock {
background-position: top -640px left 0px;
}
.ui-dialog .charsheet input.clocksize[value="10"] + input.clocksegment[value="1"] + .doomclock {
background-position: top -640px left -160px;
}
.ui-dialog .charsheet input.clocksize[value="10"] + input.clocksegment[value="2"] + .doomclock {
background-position: top -640px left -320px;
}
.ui-dialog .charsheet input.clocksize[value="10"] + input.clocksegment[value="3"] + .doomclock {
background-position: top -640px left -480px;
}
.ui-dialog .charsheet input.clocksize[value="10"] + input.clocksegment[value="4"] + .doomclock {
background-position: top -640px left -640px;
}
.ui-dialog .charsheet input.clocksize[value="10"] + input.clocksegment[value="5"] + .doomclock {
background-position: top -640px left -800px;
}
.ui-dialog .charsheet input.clocksize[value="10"] + input.clocksegment[value="6"] + .doomclock {
background-position: top -640px left -960px;
}
.ui-dialog .charsheet input.clocksize[value="10"] + input.clocksegment[value="7"] + .doomclock {
background-position: top -640px left -1120px;
}
.ui-dialog .charsheet input.clocksize[value="10"] + input.clocksegment[value="8"] + .doomclock {
background-position: top -640px left -1280px;
}
.ui-dialog .charsheet input.clocksize[value="10"] + input.clocksegment[value="9"] + .doomclock {
background-position: top -640px left -1440px;
}
.ui-dialog .charsheet input.clocksize[value="10"] + input.clocksegment[value="10"] + .doomclock {
background-position: top -640px left -1600px;
}
.ui-dialog .charsheet input.clocksize[value="12"] + input.clocksegment[value="0"] + .doomclock {
background-position: top -800px left 0px;
}
.ui-dialog .charsheet input.clocksize[value="12"] + input.clocksegment[value="1"] + .doomclock {
background-position: top -800px left -160px;
}
.ui-dialog .charsheet input.clocksize[value="12"] + input.clocksegment[value="2"] + .doomclock {
background-position: top -800px left -320px;
}
.ui-dialog .charsheet input.clocksize[value="12"] + input.clocksegment[value="3"] + .doomclock {
background-position: top -800px left -480px;
}
.ui-dialog .charsheet input.clocksize[value="12"] + input.clocksegment[value="4"] + .doomclock {
background-position: top -800px left -640px;
}
.ui-dialog .charsheet input.clocksize[value="12"] + input.clocksegment[value="5"] + .doomclock {
background-position: top -800px left -800px;
}
.ui-dialog .charsheet input.clocksize[value="12"] + input.clocksegment[value="6"] + .doomclock {
background-position: top -800px left -960px;
}
.ui-dialog .charsheet input.clocksize[value="12"] + input.clocksegment[value="7"] + .doomclock {
background-position: top -800px left -1120px;
}
.ui-dialog .charsheet input.clocksize[value="12"] + input.clocksegment[value="8"] + .doomclock {
background-position: top -800px left -1280px;
}
.ui-dialog .charsheet input.clocksize[value="12"] + input.clocksegment[value="9"] + .doomclock {
background-position: top -800px left -1440px;
}
.ui-dialog .charsheet input.clocksize[value="12"] + input.clocksegment[value="10"] + .doomclock {
background-position: top -800px left -1600px;
}
.ui-dialog .charsheet input.clocksize[value="12"] + input.clocksegment[value="11"] + .doomclock {
background-position: top -800px left -1760px;
}
.ui-dialog .charsheet input.clocksize[value="12"] + input.clocksegment[value="12"] + .doomclock {
background-position: top -800px left -1920px;
}
.ui-dialog .charsheet .doomclock .clockcontrol {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
opacity: 0;
margin-top: 30px;
margin-left: 29px;
min-height: 100px;
height: 100px;
width: 100px;
border-radius: 50px;
background-color: var(--ak-bg);
}
.ui-dialog .charsheet .doomclock .clockcontrol .clockwise, .ui-dialog .charsheet .doomclock .clockcontrol .counterclockwise {
font-size: 40px;
background: none;
padding: 0px;
margin: 0px;
line-height: 1;
}
.ui-dialog .charsheet .doomclock:hover .clockcontrol {
opacity: 0.8;
}
.ui-dialog .charsheet .doomclock:hover .clockcontrol + * {
opacity: 1;
}
.ui-dialog .charsheet .clocktitle {
text-align: center;
font-size: 80%;
font-weight: bold;
}
.ui-dialog .charsheet .centered {
text-align: center;
}
.ui-dialog .charsheet input.scrollstyle ~ .wrapper .scrollable::-webkit-scrollbar {
width: 8px;
}
.ui-dialog .charsheet input.scrollstyle ~ .wrapper .scrollable::-webkit-scrollbar-track {
background: var(--ak-bg);
}
.ui-dialog .charsheet input.scrollstyle ~ .wrapper .scrollable::-webkit-scrollbar-thumb {
background-color: var(--ak-bg);
border-radius: 4px;
border: 1px solid var(--ak-pink);
}
.ui-dialog .charsheet input.scrollstyle ~ .wrapper .scrollable::-webkit-scrollbar-thumb:hover {
background-color: var(--ak-pink);
}
.ui-dialog .charsheet input.scrollstyle[value="single"] ~ .wrapper .scrollable,
.ui-dialog .charsheet input.scrollstyle[value=""] ~ .wrapper .scrollable {
overflow-y: initial;
overflow-x: initial;
}
.ui-dialog .charsheet input.scrollstyle[value=compact] ~ .wrapper .scrollable,
.ui-dialog .charsheet input.scrollstyle[value=comfy] ~ .wrapper .scrollable,
.ui-dialog .charsheet input.scrollstyle[value=tall] ~ .wrapper .scrollable,
.ui-dialog .charsheet input.scrollstyle[value=mixed] ~ .wrapper .scrollable {
border-bottom: 1px dotted rgba(122, 122, 122, 0.75);
padding: 2px;
padding-left: 6px;
padding-right: 6px;
margin-right: 0px;
}
.ui-dialog .charsheet input.scrollstyle[value=compact] ~ .wrapper .scrollable {
overflow-y: auto;
overflow-x: hidden;
height: 496px;
}
.ui-dialog .charsheet input.scrollstyle[value=comfy] ~ .wrapper .scrollable {
overflow-y: auto;
overflow-x: hidden;
height: 696px;
}
.ui-dialog .charsheet input.scrollstyle[value=tall] ~ .wrapper .scrollable {
overflow-y: auto;
overflow-x: hidden;
height: 896px;
}
.ui-dialog .charsheet .tipper {
position: relative;
}
.ui-dialog .charsheet .tipper .tipped {
visibility: hidden;
opacity: 0;
position: absolute;
background: var(--ak-bg);
color: var(--ak-alert);
padding: 6px 6px 6px 6px;
border: 1px solid var(--ak-alert);
text-shadow: none;
font-family: Nunito, sans-serif;
font-size: 12px;
line-height: 16px;
white-space: normal;
margin: 0px;
width: 100px;
border-radius: 6px;
-webkit-box-shadow: 0 0 2px var(--ak-alert);
box-shadow: 0 0 2px var(--ak-alert);
text-align: center;
}
.ui-dialog .charsheet .tipper .tipped:after {
border: 6px solid var(--ak-alert);
position: absolute;
content: "";
top: calc(50% - 6px);
}
.ui-dialog .charsheet .tipper .tipped.smalltip {
width: 50px;
}
.ui-dialog .charsheet .tipper .tipped.midtip {
width: 75px;
}
.ui-dialog .charsheet input.tipsuppressor[value="1"] ~ .wrapper .tipper:hover .tipped {
visibility: visible;
opacity: 1;
z-index: 10;
-webkit-transition: opacity 0.25s;
transition: opacity 0.25s;
}
.ui-dialog .charsheet .tipper .tipped.tipleft {
margin-left: 6px;
left: 50%;
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}
.ui-dialog .charsheet .tipper .tipped.tipleft:after {
left: -12px;
border-color: transparent var(--ak-alert) transparent transparent;
}
.ui-dialog .charsheet .tipper .tipped.tipright {
margin-right: 18px;
right: 40%;
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}
.ui-dialog .charsheet .tipper .tipped.tipright:after {
right: -12px;
border-color: transparent transparent transparent var(--ak-alert);
}
.ui-dialog .charsheet .tipper .tipped.tipunder {
margin-top: 24px;
left: 0%;
top: 100%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}
.ui-dialog .charsheet .tipper .tipped.tipunder:after {
left: 50%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
top: -12px;
border-color: transparent transparent var(--ak-alert) transparent;
}
.ui-dialog .charsheet .tipper .tipped.tipover {
margin-bottom: 6px;
left: 50%;
bottom: 100%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
}
.ui-dialog .charsheet .tipper .tipped.tipover:after {
left: 50%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
top: 100%;
border-color: var(--ak-alert) transparent transparent transparent;
}
.sheet-rolltemplate-2d6-roll,
.sheet-rolltemplate-bondspend {
font-family: Nunito, sans-serif;
font-size: 16px;
color: var(--ak-fg);
background-color: var(--ak-bg);
line-height: unset;
}
.rollspend, .sheet-rolltemplate-2d6-roll .sheet-rollspend, .sheet-rolltemplate-bondspend .sheet-rollspend {
padding: 6px;
border: 1px solid var(--ak-pink);
background-color: var(--ak-bg);
color: var(--ak-fg);
text-align: left;
}
.ui-dialog .charsheet input[type=number].narrower {
width: 40px;
height: 21px;
border-bottom: 1px solid var(--ak-pink);
}
.titlebar, .sheet-rolltemplate-2d6-roll .sheet-rollspend .sheet-titlebar, .sheet-rolltemplate-bondspend .sheet-rollspend .sheet-titlebar, .titlebar button span {
color: white;
font-size: 80%;
font-weight: bold;
text-align: center;
text-transform: uppercase;
margin-top: -6px;
margin-left: -6px;
margin-right: -6px;
margin-bottom: 3px;
background-color: var(--ak-pink);
}
.titlebar .tipper .tipped span {
text-transform: none;
color: var(--ak-alert);
background-color: var(--ak-bg);
font-size: 12px;
font-weight: normal;
}
.titlebar.subtitle {
margin-top: 0px;
margin-bottom: -6px;
}
input.spacetoggle[value="1"] + .titlebar.subtitle {
margin-bottom: 3px;
}
.sheet-rolltemplate-2d6-roll .sheet-rollspend,
.sheet-rolltemplate-bondspend .sheet-rollspend {
text-align: center;
}
.sheet-rolltemplate-2d6-roll .sheet-rollspend .sheet-rollcontainer,
.sheet-rolltemplate-bondspend .sheet-rollspend .sheet-rollcontainer {
padding-top: 10px;
padding-bottom: 6px;
}
.sheet-rolltemplate-2d6-roll .sheet-rollspend .sheet-rollcontainer .inlinerollresult,
.sheet-rolltemplate-bondspend .sheet-rollspend .sheet-rollcontainer .inlinerollresult {
background: none;
text-align: center;
padding-left: 7px;
padding-right: 7px;
}
.sheet-rolltemplate-2d6-roll .sheet-rollspend .sheet-rollcontainer .sheet-perfect .inlinerollresult, .sheet-rolltemplate-2d6-roll .sheet-rollspend .sheet-rollcontainer .sheet-miss .inlinerollresult, .sheet-rolltemplate-2d6-roll .sheet-rollspend .sheet-rollcontainer .sheet-disastrous .inlinerollresult,
.sheet-rolltemplate-bondspend .sheet-rollspend .sheet-rollcontainer .sheet-perfect .inlinerollresult,
.sheet-rolltemplate-bondspend .sheet-rollspend .sheet-rollcontainer .sheet-miss .inlinerollresult,
.sheet-rolltemplate-bondspend .sheet-rollspend .sheet-rollcontainer .sheet-disastrous .inlinerollresult {
background: none;
text-align: center;
padding-left: 7px;
padding-right: 7px;
}
.sheet-rolltemplate-2d6-roll .sheet-rollspend .sheet-rollcontainer .sheet-perfect .inlinerollresult,
.sheet-rolltemplate-bondspend .sheet-rollspend .sheet-rollcontainer .sheet-perfect .inlinerollresult {
border: 1px solid var(--ak-pink);
background-color: white;
color: var(--ak-pink);
}
.sheet-rolltemplate-2d6-roll .sheet-rollspend .sheet-rollcontainer .sheet-miss .inlinerollresult,
.sheet-rolltemplate-bondspend .sheet-rollspend .sheet-rollcontainer .sheet-miss .inlinerollresult {
border: 1px solid var(--ak-pink);
background-color: black;
color: white;
}
.sheet-rolltemplate-2d6-roll .sheet-rollspend .sheet-rollcontainer .sheet-disastrous .inlinerollresult,
.sheet-rolltemplate-bondspend .sheet-rollspend .sheet-rollcontainer .sheet-disastrous .inlinerollresult {
border: 1px solid var(--ak-fg);
background-color: var(--ak-pink);
color: white;
}
.sheet-rolltemplate-2d6-roll .sheet-rollspend .sheet-rollresult,
.sheet-rolltemplate-bondspend .sheet-rollspend .sheet-rollresult {
padding-bottom: 10px;
font-weight: bold;
}
.footnote, .sheet-rolltemplate-2d6-roll .sheet-rollspend .sheet-footnote, .bondspend .footnote, .sheet-rolltemplate-bondspend .sheet-rollspend .sheet-footnote {
font-size: 80%;
line-height: 1;
}
.spaceup {
margin-top: 6px;
}
.spaceupmini {
margin-top: 3px;
}