Files
roll20-character-sheets-tester/Ironsworn-Starforged/Ironsworn-starforged.css
T
2021-10-12 23:52:23 -07:00

2931 lines
76 KiB
CSS

@import url('https://fonts.googleapis.com/css?family=Encode+Sans:400,500,600,700,800,900|Encode+Sans+Condensed:i,400,500,600,700,800,900|Exo:400,500,600,700,800,900|Montserrat:400,500,600,700,800,900&display=swap');
.charsheet {
width: 842px !important;
margin: 0 auto !important;
padding: 15px;
font-family: 'Montserrat', Arial, sans-serif;
font-weight: normal;
/* Fake radio/checkbox */
/* Remove dot from all radios _after_ selected one */
}
.charsheet input[type=text] {
font-weight: 600;
}
.charsheet input[type=text]:focus {
outline: 3px solid #fd0;
outline-offset: 0;
box-shadow: inset 0 0 0 3px;
}
.charsheet select {
-webkit-appearance: none;
-moz-appearance: none;
text-indent: 1px;
text-overflow: '';
}
.charsheet select::-ms-expand {
display: none;
}
.charsheet li {
font-weight: normal;
font-size: 14.3px;
list-style-type: none;
}
.charsheet li::before {
content: '';
display: inline-block;
height: 1rem;
width: 1rem;
-webkit-mask-image: url("https://raw.githubusercontent.com/aureyia/roll20-character-sheets/starforged-oracle-subcategories/Ironsworn-Starforged/src/app/img/bullet-8-point-star.svg");
-webkit-mask-size: contain;
-webkitmask-repeat: no-repeat;
mask-image: url("https://raw.githubusercontent.com/aureyia/roll20-character-sheets/starforged-oracle-subcategories/Ironsworn-Starforged/src/app/img/bullet-8-point-star.svg");
mask-size: contain;
mask-repeat: no-repeat;
background-color: currentColor;
margin-right: 4px;
}
.charsheet p {
font-family: 'Encode Sans Condensed', Arial, sans-serif;
font-size: 14.3px;
line-height: 1.25;
font-weight: normal;
margin: 0;
}
.charsheet h1 {
font-weight: bold;
width: 100%;
font-size: 28px;
text-align: center;
margin: 0 0 0px;
padding: 10;
text-transform: uppercase;
}
.charsheet h2 {
font-weight: bold;
width: 100%;
font-size: 18px;
text-align: left;
margin: 0 0 0px;
padding: 0;
text-transform: uppercase;
}
.charsheet h3 {
font-weight: bold;
width: 100%;
line-height: 1.4em;
font-size: 1.2em;
text-align: center;
margin: 0 0 0px;
padding: 0;
text-transform: uppercase;
}
.charsheet h3.divide::after,
.charsheet h3.divide::before {
display: inline-block;
content: "";
height: 5px;
border-top: 2px solid #4c4d4f;
top: 0;
width: 220px;
}
.charsheet h3.site-divide::after,
.charsheet h3.site-divide::before {
display: inline-block;
content: "";
height: 5px;
border-top: 2px solid #4c4d4f;
top: 0;
width: 331px;
}
.charsheet h3.site-denizens-divide::after,
.charsheet h3.site-denizens-divide::before {
display: inline-block;
content: "";
height: 5px;
border-top: 2px solid #4c4d4f;
top: 0;
width: 336px;
}
.charsheet h3.site-divide-notes::after,
.charsheet h3.site-divide-notes::before {
display: inline-block;
content: "";
height: 5px;
border-top: 2px solid #4c4d4f;
top: 0;
width: 352px;
}
.charsheet .divide {
margin-top: 1em;
}
.charsheet h4 {
font-weight: bold;
width: 100%;
font-size: 16px;
text-align: center;
margin: 0 0 0px;
padding: 0;
text-transform: uppercase;
}
.charsheet h4.tab-title {
display: inline-block;
}
.charsheet h5 {
font-weight: bold;
font-size: 12px;
text-align: left;
margin: 0 0 0px;
padding: 0;
text-transform: uppercase;
}
.charsheet h6 {
font-size: 14px;
font-weight: bold;
text-align: left;
margin-top: 2px;
}
.charsheet button[type="roll"] {
align-items: left;
color: #4c4d4f;
font-weight: normal;
font-size: 20px;
text-decoration: none;
background: none;
background-image: none;
border: none;
box-shadow: none;
text-shadow: none;
padding: 0px 0px 0px 0px;
margin: 0px 0px 0px 0px;
text-align: center;
}
.charsheet button[type="roll"]:hover {
transition: 0.5s ease;
}
.charsheet .heading-left {
text-align: left;
}
.charsheet hr {
border: 0;
height: 1px;
background: #ccc;
background-image: linear-gradient(to right, #ccc, #333, #ccc);
}
.charsheet textarea {
font-family: 'Montserrat', Arial, sans-serif;
max-width: 828px;
border: 2px solid #4c4d4f;
font-weight: normal;
}
.charsheet .btn {
display: inline;
width: 100%;
font-weight: bold;
font-size: 14px;
padding: 0;
margin: 0.5em;
height: 40px;
padding: 0.2em 0.2em 0.2em 0.2em;
border: 2px solid #494a4c;
border-radius: 0;
cursor: pointer;
}
.charsheet .toggle-btn {
display: flex;
width: auto;
font-size: 14px;
padding: 0;
border: 2px solid #494a4c;
cursor: pointer;
}
.charsheet .toggle-btn:hover {
background: #ccc;
transition: 0.5s ease;
}
.charsheet .toggle-btn .btn-content {
padding: 0.2em 0.2em 0.2em 0.2em;
width: 100%;
text-align: center;
}
.charsheet .toggle-btn .btn-input:checked ~ .btn-content {
background: #4c4d4f;
color: #fff;
}
.charsheet .static-btn {
display: flex;
width: auto;
font-size: 14px;
padding: 0;
border: 2px solid #494a4c;
cursor: pointer;
border-radius: 0.3em;
}
.charsheet .static-btn:hover {
background: #ccc;
transition: 0.5s ease;
}
.charsheet .static-btn .btn-content {
padding: 0.2em 0.2em 0.2em 0.2em;
width: 100%;
text-align: center;
}
.charsheet button.btn.repcontrol_edit,
.charsheet button.btn.repcontrol_add {
width: auto;
height: auto;
border: 2px solid #4c4d4f;
border-radius: 0;
font-weight: bold;
font-size: 12px;
text-shadow: none;
text-transform: uppercase;
padding: 0.2em;
margin: 0.3em;
color: #4c4d4f;
font-family: 'Montserrat', Arial, sans-serif;
background: #dfe0e2;
}
.charsheet button.btn.repcontrol_edit:hover,
.charsheet button.btn.repcontrol_add:hover {
background: #bcbec2;
}
.charsheet button.btn.repcontrol_edit:focus,
.charsheet button.btn.repcontrol_add:focus {
outline: 3px solid #fd0;
outline-offset: 0;
box-shadow: inset 0 0 0 1px;
}
.charsheet button.btn.repcontrol_edit {
margin-right: 3px;
}
.charsheet button.btn.repcontrol_add {
margin-left: 3px;
}
.charsheet .impacts {
margin-bottom: 0px;
}
.charsheet .debility {
display: flex;
flex-flow: row wrap;
}
.charsheet .flex-container {
display: flex;
align-items: flex-start;
}
.charsheet .flex-wrapper {
display: flex;
flex-direction: column;
margin-bottom: 10px;
font-weight: normal;
padding: 0.5em;
}
.charsheet .track-box-input {
width: 80px;
height: 45px !important;
opacity: 0;
vertical-align: top;
}
.charsheet .track-box-back {
width: 80px;
height: 45px;
margin-top: -45px;
}
.charsheet .resources-box-input {
width: 80px;
height: 40px !important;
opacity: 0;
vertical-align: top;
}
.charsheet .resources-box-back {
width: 80px;
height: 40px;
margin-top: -40px;
}
.charsheet .track-box-input:hover ~ .track-box-back,
.charsheet .resources-box-input:hover ~ .resources-box-back {
background: #ccc;
transition: 0.5s ease;
}
.charsheet .track-box-input:checked ~ .track-box-back,
.charsheet .resources-box-input:checked ~ .resources-box-back {
background: #4c4d4f;
color: #fff;
transition: 0.5s ease;
}
.charsheet .track-box-value {
padding: 0px;
font-weight: bold;
height: 35px;
padding-top: 10px;
font-size: 18px;
color: inherit;
}
.charsheet .resources-box-value {
padding: 0px;
font-weight: bold;
height: 35px;
padding-top: 10px;
font-size: 18px;
color: inherit;
}
.charsheet .resources-title-box {
width: 80px;
height: 40px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
border-radius: 0%;
background: transparent;
border: 2px solid #4c4d4f;
margin-top: 20px;
margin-bottom: 2px;
}
.charsheet .resources-box {
width: 80px;
height: 40px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
border-radius: 0%;
background: transparent;
border: 2px solid #4c4d4f;
margin-bottom: 2px;
}
.charsheet .pc-name {
width: 100%;
font-weight: bold;
font-size: 14px;
border: 2px solid #4c4d4f;
background: #e6e7e8;
color: #4c4d4f;
border-radius: 0;
}
.charsheet .debil-desc {
width: 100%;
font-weight: bold;
font-size: 14px;
}
.charsheet .border {
border: 1px solid #ccc;
border-radius: 4px;
}
.charsheet textarea.full-width {
width: 95%;
resize: vertical;
}
.charsheet input.filler[type="radio"],
.charsheet input[type="checkbox"].checkbox {
opacity: 0;
width: 16px;
height: 16px;
position: relative;
top: 5px;
left: 6px;
margin: -10px;
cursor: pointer;
z-index: 1;
}
.charsheet input[type="radio"] + span::before,
.charsheet input[type="checkbox"].checkbox + span::before {
margin-right: 4px;
border: solid 1px #a8a8a8;
line-height: 14px;
text-align: center;
display: inline-block;
vertical-align: middle;
-moz-box-shadow: 0 0 2px #ccc;
-webkit-box-shadow: 0 0 2px #ccc;
box-shadow: 0 0 2px #ccc;
background: #f6f6f6;
background: -moz-radial-gradient(#f6f6f6, #dfdfdf);
background: -webkit-radial-gradient(#f6f6f6, #dfdfdf);
background: -ms-radial-gradient(#f6f6f6, #dfdfdf);
background: -o-radial-gradient(#f6f6f6, #dfdfdf);
background: radial-gradient(#f6f6f6, #dfdfdf);
}
.charsheet input[type="checkbox"].checkbox + span::before,
.charsheet input.filler[type="radio"] + span::before {
content: "";
width: 14px;
height: 14px;
font-size: 12px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
}
.charsheet input[type="checkbox"].checkbox:checked + span::before {
content: "■";
}
.charsheet input.zeroxp[type="radio"] + span::before {
content: "0" !important;
}
.charsheet input.filler[type="radio"] + span::before {
content: "■";
}
.charsheet input.filler[type="radio"]:checked ~ input.filler[type="radio"] + span::before {
content: "";
}
.charsheet span.showhide:checked {
background-color: #4c4d4f;
color: #fff;
transition: 0.5s ease;
}
.charsheet span.showhide {
display: inline;
border: 1px solid #ccc;
margin-right: 11px;
border-radius: 4px;
padding: 2px 4px;
font-weight: bold;
font-size: 14px;
}
.charsheet span.showhide:hover {
cursor: pointer;
border-radius: 4px;
padding: 2px 4px;
background-color: #ccc;
color: #4c4d4f;
transition: 0.5s ease;
}
.charsheet div.showhide {
visibility: hidden;
transition: opacity 1s ease-out;
opacity: 0;
height: 0;
overflow: hidden;
}
.charsheet .hide-element {
display: none;
}
.charsheet input[type='checkbox'].hide-element {
display: none;
}
.charsheet input[type='radio'].hide-element {
display: none;
}
.charsheet div.hide-element {
display: none;
}
.charsheet div.preview-roll {
padding: 0em;
}
.charsheet input.showhide:checked ~ div.showhide {
visibility: visible;
height: auto;
opacity: 1;
transition: 0.2s ease;
}
.charsheet span.preview-roll {
width: 30%;
margin-left: 1em;
}
.charsheet .button-container {
width: 2.5em;
border: 2px solid #4c4d4f;
}
.charsheet .button-container-preview {
width: 2.4em;
}
.charsheet .no-border {
border: 0;
}
.charsheet .requirement-area {
height: auto;
margin-bottom: 5px;
}
.charsheet input.border-bottom {
border-bottom: 1px solid #4c4d4f;
border-radius: 0em;
}
.charsheet .full-width {
width: 100%;
margin-top: 0.3em;
}
.charsheet .note-area {
border-radius: 1em;
}
.charsheet h3,
.charsheet h2,
.charsheet .oracle-title,
.charsheet .move-title {
letter-spacing: 0.05rem;
}
.charsheet .changelog {
border: 2px solid #4c4d4f;
margin-bottom: 1em;
padding: 1em;
}
.charsheet .center {
text-align: center;
}
.charsheet .close-changelog {
border: 2px solid #4c4d4f;
cursor: pointer;
padding: 0;
margin: 0.5em 0 0 0;
text-align: center;
}
.charsheet .close-changelog:hover {
background: #ccc;
transition: 0.5s ease;
}
.charsheet input.changelog:checked ~ div.changelog {
display: none;
}
.charsheet .modes {
display: flex;
justify-content: space-evenly;
}
.charsheet h2.mode-title {
text-align: center;
}
.charsheet div.mode-title {
margin-bottom: 2em;
}
.charsheet label.mode {
text-align: center;
}
.charsheet label.mode {
margin: 0.5em;
padding: 0;
cursor: pointer;
box-shadow: 1px 1px 19px 6px rgba(0,0,0,0.15);
opacity: 1;
z-index: 5;
width: auto;
}
.charsheet label.mode:hover h4 {
color: #797979;
transition: 0.5s ease;
}
.charsheet label.mode:hover .mode-image {
opacity: 0.7;
transition: 0.5s ease;
}
.charsheet label.mode h4 {
margin-bottom: 0.5em;
margin-top: 0.5em;
}
.charsheet input[type=radio].character-mode:checked ~ div.character-mode,
.charsheet input[type=radio].shared-mode:checked ~ div.shared-mode {
display: block;
}
.charsheet input[type=checkbox].modes-show:checked ~ div.modes-show {
display: block;
}
.charsheet div.mode {
display: flex;
justify-content: center;
width: fit-content;
width: -moz-fit-content;
margin: 0;
}
.charsheet .mode-image {
display: flex;
}
.charsheet input[type=radio].connections:checked ~ div.connections,
.charsheet input[type=radio].summary:checked ~ div.summary,
.charsheet input[type=radio].vows:checked ~ div.vows,
.charsheet input[type=radio].assets:checked ~ div.assets,
.charsheet input[type=radio].moves:checked ~ div.moves,
.charsheet input[type=radio].progress-page:checked ~ div.progress-page,
.charsheet input[type=radio].oracles:checked ~ div.oracles,
.charsheet input[type=radio].settings:checked ~ div.settings,
.charsheet input[type=radio].legacies:checked ~ div.legacies,
.charsheet input[type=radio].ship:checked ~ div.ship {
display: block;
visibility: visible;
height: auto;
opacity: 1;
transition: 0.2s ease;
}
.charsheet .sub-header {
margin-top: 1em;
border-bottom: 3px solid #4c4d4f;
}
.charsheet .ship-grid {
margin-top: 1em;
display: grid;
justify-content: space-around;
grid-row-gap: 1em;
}
.charsheet .ship-grid h3 {
color: #fff;
background: #4c4d4f;
margin-bottom: 0.6em;
}
.charsheet .ship-grid .asset {
grid-column: 1;
margin: 0;
grid-row: 1;
height: fit-content;
}
.charsheet .ship-grid .ship-category-info {
grid-column: 2;
grid-row: 1;
border: 2px solid #4c4d4f;
border-radius: 1em;
box-shadow: 2px 2px 6px 0px;
}
.charsheet .ship-grid .ship-category-info .ship-onboard {
margin: 0.3em;
border-radius: 1em;
}
.charsheet .ship-grid .ship-category-info .ship-onboard .btn-content {
border-radius: 1em;
}
.charsheet .ship-grid .ship-category-info .info {
padding: 0em 0.4em;
}
.charsheet .ship-grid .ship-category-info h3:nth-child(1) {
border-top-left-radius: 0.6em;
border-top-right-radius: 0.6em;
}
.charsheet .ship-grid .ship-category-info input[type=text] {
border: 0;
border-bottom: 2px solid #4c4d4f;
border-radius: 0;
padding: 0;
padding-left: 0.3em;
width: 100%;
}
.charsheet .ship-grid .ship-category-support-vehicles {
grid-row: 2;
grid-column: 2;
width: 320px;
}
.charsheet .ship-grid .ship-category-modules {
grid-row: 2;
grid-column: 1;
width: 320px;
}
.charsheet .ship-grid .impact-btn {
width: 45%;
}
.charsheet .ship-grid .impact-group {
width: 100%;
}
.charsheet .ship-btn {
margin: 0;
}
.charsheet .resources {
display: grid;
justify-content: space-between;
}
.charsheet .resources .row1 {
display: grid;
grid-row: 1;
margin-bottom: 0.2em;
border: 1px solid #4b4d4f;
}
.charsheet .resources .row2 {
display: flex;
grid-row: 2;
border: 1px solid #4b4d4f;
margin-bottom: 0.1em;
}
.charsheet .resource {
display: flex;
border: 2px solid #4c4d4f;
border-left: 1px solid;
}
.charsheet .resource .resource-value-box {
display: flex;
width: 100%;
}
.charsheet label.health-reset {
font-size: 14px;
margin: 0;
padding: 2px 7px 2px 6px;
cursor: pointer;
}
.charsheet label.health-reset:hover {
background: #ccc;
transition: 0.5s ease;
}
.charsheet h3.health-max {
font-size: 14px;
margin-right: 0.3em;
line-height: 23px;
padding-left: 0.3em;
}
.charsheet h3.health-max-value {
padding-right: 0.3em;
}
.charsheet .health-max-value {
font-size: 14px;
line-height: 22px;
color: #555;
}
.charsheet .resource-value {
font-size: 14px;
width: 38px;
font-weight: bold;
padding: 0;
padding-left: 4px;
border-radius: 0;
background: #ccc;
margin: 0;
height: auto;
cursor: pointer;
border-left: 1px solid;
}
.charsheet .resource-value:focus {
outline: 3px solid #fd0;
outline-offset: 0;
box-shadow: inset 0 0 0 3px;
}
.charsheet .resource-title {
font-size: 14px;
width: auto;
line-height: 9px;
padding: 0.5em 0.5em 0.5em 0.5em;
border-right: 1px solid;
border-left: 1px solid;
text-transform: uppercase;
}
.charsheet input[type=text].resource-value {
width: 22px;
border: none;
cursor: text;
}
.charsheet .health-max-box {
display: flex;
background: #ccc;
}
.charsheet .health-status-box {
display: flex;
}
.charsheet .load-value {
width: 27px;
}
.charsheet .character-name {
grid-column: 1;
}
.charsheet .character-name input {
width: 100% !important;
border: none;
}
.charsheet .character-pronouns input {
width: 100% !important;
border: none;
}
.charsheet .character-callsign {
grid-column: 2;
}
.charsheet .character-callsign input {
width: 100% !important;
border: none;
}
.charsheet .roll-resource-label {
text-transform: uppercase;
margin: 0;
padding: 0.15em 0.4em 0em 0.4em;
width: auto;
font-size: 14px;
cursor: pointer;
text-align: center;
border-left: 1px solid;
}
.charsheet .roll-resource-label:hover {
background: #ccc;
transition: 0.5s ease;
}
.charsheet .impact-list {
display: flex;
flex-flow: row wrap;
justify-content: space-evenly;
}
.charsheet .impact-component {
margin-top: 1em;
display: flex;
flex-flow: wrap;
}
.charsheet .impact-btn {
width: 90%;
border-radius: 1em;
}
.charsheet .impact-btn input:checked~ div {
border-radius: 0.7em;
}
.charsheet .severity-track {
display: flex;
margin-top: 1em;
}
.charsheet .track-child {
width: 100%;
}
.charsheet .track-child .btn-content {
padding: 0.4em 0.2em 0.2em 0.2em;
align-self: center;
}
.charsheet ul.impact-body-list {
margin: 0em 0.2em 0.3em 1.3em;
}
.charsheet p.severity-reduce,
.charsheet p.impact-clear {
margin-bottom: 0.3em;
}
.charsheet .impact-group {
width: 25%;
}
.charsheet .impact-group-title {
text-align: center;
text-transform: uppercase;
font-size: 14px;
font-weight: bold;
margin-bottom: 0.3em;
}
.charsheet .custom-impacts {
margin-left: 0.6em;
margin-bottom: 2em;
margin-top: 0.5em;
display: flex;
}
.charsheet .custom-impacts .impact {
margin: 0 0.5em;
}
.charsheet .custom-impacts .other-impacts-title {
width: auto;
margin-right: 0.6em;
align-self: center;
text-align: center;
text-transform: uppercase;
font-size: 14px;
font-weight: bold;
}
.charsheet .custom-impacts input[type=text] {
border: 0;
border-bottom: 2px solid #4c4d4f;
border-radius: 0;
padding: 0;
}
.charsheet .bonds-track {
width: 437px;
margin-left: 203px;
margin-top: 0.5em;
}
.charsheet .bonds-track .progress-row {
grid-template-columns: 0px repeat(10, 43.5px) 110px;
}
.charsheet .connections {
margin-bottom: 0px;
}
.charsheet .connection-component {
margin-top: 1em;
}
.charsheet .bond {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.charsheet .connection-container {
border: 2px solid #4c4d4f;
border-radius: 1em;
margin-bottom: 1em;
padding: 0.5em 1em;
}
.charsheet .connection-notes {
width: 98.5%;
resize: vertical;
}
.charsheet .connection-name,
.charsheet .connection-location,
.charsheet .connection-descriptors {
border: none;
border-radius: 0em;
background: transparent;
padding: 0;
padding-left: 0.5em;
}
.charsheet .connection-descriptors {
width: 43%;
}
.charsheet .connection-location {
width: 40%;
}
.charsheet p.connection-title {
text-align: left;
font-weight: bold;
margin: 0 0 0px;
padding: 0.1em 0.3em 0.3em 0.5em;
text-transform: uppercase;
font-family: 'Montserrat', Arial, sans-serif;
display: inline;
color: #4c4d4f;
border-radius: 0;
}
.charsheet .details-btn {
text-transform: uppercase;
display: inline-flex;
width: auto;
height: auto;
padding: 0em 1em;
margin: 0.3em 0.5em;
border-radius: 2em;
}
.charsheet .connection-name::placeholder,
.charsheet .connection-location::placeholder,
.charsheet .connection-descriptors::placeholder {
color: #8a8a8a;
}
.charsheet input[type="checkbox"].show-connection-info {
width: 4.5em;
height: 18px;
top: 0;
opacity: 0;
border-radius: 0;
padding: 2px 4px;
}
.charsheet input[type="checkbox"].show-connection-info:checked ~ div.show-connection-info {
display: flex;
flex-flow: row wrap;
visibility: visible;
height: auto;
opacity: 1;
transition: 0.2s ease;
}
.charsheet input[type="checkbox"].show-connection-info:checked ~ span.show-connection-info {
border-radius: 0;
padding: 2px 4px;
border: 1px solid;
background-color: #4c4d4f;
color: #fff;
}
.charsheet input[type="checkbox"].show-connection-info:hover ~ span.show-connection-info {
border-radius: 0;
padding: 2px 4px;
background-color: #ccc;
color: #4c4d4f;
transition: 0.5s ease;
}
.charsheet span.show-connection-info {
margin-left: -4.9em;
border-radius: 0;
padding: 2px 4px;
border: 1px solid;
font-weight: bold;
}
.charsheet input.vow-name {
background: #ccc;
border: 2px solid #494a4c;
border-radius: 0;
margin-bottom: 0.2em;
margin-top: 1em;
background: #e6e7e8;
border: 2px solid #494a4c;
border-radius: 0;
margin-bottom: 0.2em;
}
.charsheet input.vow-name:focus {
outline: 3px solid #fd0;
outline-offset: 0;
box-shadow: inset 0 0 0 2px;
}
.charsheet .fulfill-vow:hover,
.charsheet .mark-vow:hover,
.charsheet .vow-clear-label:hover {
background-color: #ccc;
color: #4c4d4f;
transition: 0.5s ease;
}
.charsheet .vows {
margin-bottom: 0px;
}
.charsheet .vows-header {
display: flex;
justify-content: space-around;
align-items: center;
margin-bottom: 10px;
}
.charsheet .vow {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.charsheet .vow-name {
width: 100%;
font-weight: bold;
font-size: 14px;
}
.charsheet .difficulty {
border: 2px solid #494a4c;
margin: 0.2em 0.5em 0.2em 0.5em;
padding: 0;
cursor: pointer;
}
.charsheet .difficulty h5 {
text-align: center;
}
.charsheet .difficulty input:checked ~ h5 {
background: #494a4c;
color: #fff;
}
.charsheet .btn-div {
display: inline;
}
.charsheet .progress-header {
display: flex;
justify-content: space-around;
align-items: center;
margin-top: 0.3em;
}
.charsheet .progress-container {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.charsheet .progress-name {
width: 100%;
font-weight: bold;
font-size: 14px;
}
.charsheet input.progress-name {
background: #e6e7e8;
border: 2px solid #494a4c;
border-radius: 0;
margin-bottom: 0.2em;
}
.charsheet .progress-input {
width: 40px;
height: 40px;
font-size: 22px;
font-weight: bold;
background: transparent;
text-align: center;
justify-content: center;
align-items: center;
padding: 2px 0px 0px 12px;
margin: 0px;
cursor: pointer;
border: 2px solid #4c4d4f;
border-radius: 0;
}
.charsheet .progress-input:hover {
background-color: #ccc;
transition: 0.5s ease;
}
.charsheet .progress-input:focus {
outline: 3px solid #fd0;
outline-offset: 0;
box-shadow: inset 0 0 0 2px;
}
.charsheet .progress-holder {
display: flex;
}
.charsheet input.progress-name {
margin-bottom: 0px;
}
.charsheet .challenge-show {
text-transform: uppercase;
padding: 0;
margin: 0;
border: 2px solid #4c4d4f;
width: auto;
height: auto;
cursor: pointer;
border-left: 0;
}
.charsheet .challenge-show:hover {
background: #ccc;
transition: 0.5s ease;
}
.charsheet .challenge-show-back {
height: 100%;
padding: 0em 1em 0em 1em;
line-height: 25px;
}
.charsheet input[type='checkbox'].challenge-show:checked ~ div.challenge-row {
visibility: visible;
height: auto;
opacity: 1;
transition: 0.7s ease;
}
.charsheet input[type='checkbox'].challenge-show-button:checked ~ div.challenge-show-back {
background: #4c4d4f;
color: #fff;
}
.charsheet .challenge-row,
.charsheet .progress-row {
display: grid;
grid-template-columns: 151px repeat(10, 43.5px) 110px;
align-items: center;
text-transform: uppercase;
}
.charsheet label.challenge-label {
padding-left: 0.5em;
display: block;
height: 18px;
margin: 0px;
}
.charsheet .challenge-box {
border: 2px solid #4c4d4f;
padding: 0;
display: inline-flex;
height: 36px;
width: 36px;
margin: 0.2em 0em;
cursor: pointer;
}
.charsheet .challenge-fill {
height: 100%;
width: 100%;
background: #fff;
}
.charsheet input[type="checkbox"].challenge:checked ~ .challenge-fill {
background: #4c4d4f;
}
.charsheet input[type="checkbox"].challenge:hover ~ .challenge-fill {
background: #e6e7e8;
}
.charsheet .blank-index {
display: inline-block;
height: 40px;
width: 40px;
}
.charsheet .progress-input-holder {
position: relative;
margin: 0.3em 0em;
}
.charsheet .progress-input-holder input[min],
.charsheet input[min] + span {
display: none;
position: absolute;
top: 2px;
left: 2px;
width: 36px;
height: 36px;
pointer-events: none;
background: #fff;
}
.charsheet .progress-input-holder input[min="1"]:valid + span {
display: block;
background-image: linear-gradient(45deg, transparent 0px, transparent calc(50% - 1px), #4c4d4f calc(50% - 1px), #4c4d4f calc(50% + 1px), transparent calc(50% + 1px));
}
.charsheet .progress-input-holder input[min="2"]:valid + span {
display: block;
background-image: linear-gradient(45deg, transparent 0px, transparent calc(50% - 1px), #4c4d4f calc(50% - 1px), #4c4d4f calc(50% + 1px), transparent calc(50% + 1px), transparent 100%), linear-gradient(135deg, transparent 0px, transparent calc(50% - 1px), #4c4d4f calc(50% - 1px), #4c4d4f calc(50% + 1px), transparent calc(50% + 1px), transparent 100%);
}
.charsheet .progress-input-holder input[min="3"]:valid + span {
display: block;
background-image: linear-gradient(45deg, transparent 0px, transparent calc(50% - 1px), #4c4d4f calc(50% - 1px), #4c4d4f calc(50% + 1px), transparent calc(50% + 1px), transparent 100%), linear-gradient(135deg, transparent 0px, transparent calc(50% - 1px), #4c4d4f calc(50% - 1px), #4c4d4f calc(50% + 1px), transparent calc(50% + 1px), transparent 100%), linear-gradient(90deg, transparent 0px, transparent calc(50% - 1px), #4c4d4f calc(50% - 1px), #4c4d4f calc(50% + 1px), transparent calc(50% + 1px), transparent 100%);
}
.charsheet .progress-input-holder input[min="4"]:valid + span {
display: block;
background-image: linear-gradient(45deg, transparent 0px, transparent calc(50% - 1px), #4c4d4f calc(50% - 1px), #4c4d4f calc(50% + 1px), transparent calc(50% + 1px), transparent 100%), linear-gradient(135deg, transparent 0px, transparent calc(50% - 1px), #4c4d4f calc(50% - 1px), #4c4d4f calc(50% + 1px), transparent calc(50% + 1px), transparent 100%), linear-gradient(90deg, transparent 0px, transparent calc(50% - 1px), #4c4d4f calc(50% - 1px), #4c4d4f calc(50% + 1px), transparent calc(50% + 1px), transparent 100%), linear-gradient(0deg, transparent 0px, transparent calc(50% - 1px), #4c4d4f calc(50% - 1px), #4c4d4f calc(50% + 1px), transparent calc(50% + 1px), transparent 100%);
}
.charsheet .large-progress-input {
width: 60px;
height: 60px;
font-size: 22px;
font-weight: bold;
background: transparent;
text-align: center;
justify-content: center;
align-items: center;
padding: 2px 0px 0px 12px;
margin: 0px;
cursor: pointer;
border: 2px solid #4c4d4f;
border-radius: 0.3em;
}
.charsheet .large-progress-input:hover {
background-color: #ccc;
transition: 0.5s ease;
}
.charsheet .large-progress-input:focus {
outline: 3px solid #fd0;
outline-offset: 0;
box-shadow: inset 0 0 0 2px;
}
.charsheet .large-progress-input-holder {
position: relative;
margin: 0;
}
.charsheet .large-progress-input-holder input[min],
.charsheet input[min].large-input + span {
display: none;
position: absolute;
top: 2px;
left: 2px;
width: 56px;
height: 56px;
pointer-events: none;
background: #fff;
}
.charsheet .large-progress-input-holder input[min="1"]:valid + span {
display: block;
background-image: linear-gradient(45deg, transparent 0px, transparent calc(50% - 1px), #4c4d4f calc(50% - 1px), #4c4d4f calc(50% + 1px), transparent calc(50% + 1px));
}
.charsheet .large-progress-input-holder input[min="2"]:valid + span {
display: block;
background-image: linear-gradient(45deg, transparent 0px, transparent calc(50% - 1px), #4c4d4f calc(50% - 1px), #4c4d4f calc(50% + 1px), transparent calc(50% + 1px), transparent 100%), linear-gradient(135deg, transparent 0px, transparent calc(50% - 1px), #4c4d4f calc(50% - 1px), #4c4d4f calc(50% + 1px), transparent calc(50% + 1px), transparent 100%);
}
.charsheet .large-progress-input-holder input[min="3"]:valid + span {
display: block;
background-image: linear-gradient(45deg, transparent 0px, transparent calc(50% - 1px), #4c4d4f calc(50% - 1px), #4c4d4f calc(50% + 1px), transparent calc(50% + 1px), transparent 100%), linear-gradient(135deg, transparent 0px, transparent calc(50% - 1px), #4c4d4f calc(50% - 1px), #4c4d4f calc(50% + 1px), transparent calc(50% + 1px), transparent 100%), linear-gradient(90deg, transparent 0px, transparent calc(50% - 1px), #4c4d4f calc(50% - 1px), #4c4d4f calc(50% + 1px), transparent calc(50% + 1px), transparent 100%);
}
.charsheet .large-progress-input-holder input[min="4"]:valid + span {
display: block;
background-image: linear-gradient(45deg, transparent 0px, transparent calc(50% - 1px), #4c4d4f calc(50% - 1px), #4c4d4f calc(50% + 1px), transparent calc(50% + 1px), transparent 100%), linear-gradient(135deg, transparent 0px, transparent calc(50% - 1px), #4c4d4f calc(50% - 1px), #4c4d4f calc(50% + 1px), transparent calc(50% + 1px), transparent 100%), linear-gradient(90deg, transparent 0px, transparent calc(50% - 1px), #4c4d4f calc(50% - 1px), #4c4d4f calc(50% + 1px), transparent calc(50% + 1px), transparent 100%), linear-gradient(0deg, transparent 0px, transparent calc(50% - 1px), #4c4d4f calc(50% - 1px), #4c4d4f calc(50% + 1px), transparent calc(50% + 1px), transparent 100%);
}
.charsheet .nav-bar {
margin-top: 0.3em;
border: 1px solid #4c4d4f;
border-bottom-left-radius: 1em;
border-bottom-right-radius: 1em;
}
.charsheet .nav-bar .nav-row {
display: flex;
}
.charsheet .nav-bar .nav-row:nth-last-child(1) .nav-child:nth-child(1) {
border-bottom-left-radius: 0.79em;
}
.charsheet .nav-bar .nav-row:nth-last-child(1) .nav-child:nth-child(1) label,
.charsheet .nav-bar .nav-row:nth-last-child(1) .nav-child:nth-child(1) .page-button {
border-bottom-left-radius: 0.5em;
}
.charsheet .nav-bar .nav-row:nth-last-child(1) .nav-child:nth-last-child(1) {
border-bottom-right-radius: 0.79em;
}
.charsheet .nav-bar .nav-row:nth-last-child(1) .nav-child:nth-last-child(1) label,
.charsheet .nav-bar .nav-row:nth-last-child(1) .nav-child:nth-last-child(1) .page-button {
border-bottom-right-radius: 0.5em;
}
.charsheet .nav-bar .nav-row .nav-child {
border: 2px solid #4c4d4f;
width: 100%;
text-align-last: center;
overflow: hidden;
}
.charsheet .nav-bar .nav-row label {
margin: 0;
padding: 0;
cursor: pointer;
}
.charsheet .nav-bar .nav-row label:hover {
background: #ccc;
transition: 0.5s ease;
}
.charsheet .page-button-back {
padding: 0.1em;
font-weight: 600;
height: 100%;
width: 100%;
display: block;
}
.charsheet .page-button:checked ~ span.page-button-back {
background: #4c4d4f;
color: #fff;
transition: 0.5s ease;
}
.charsheet .summary {
margin-top: 1em;
}
.charsheet label.page-label {
text-align: center;
}
.charsheet .footer {
margin-top: 1em;
}
.charsheet .momentum {
display: flex;
}
.charsheet input[type=checkbox].momentum-burn:hover ~ div.momentum-burn-back {
background-color: #ccc;
transition: 0.5s ease;
}
.charsheet .momentum-box-input:hover ~ .momentum-box-back {
background: #ccc;
transition: 0.5s ease;
}
.charsheet .momentum-box-input:checked ~ .momentum-box-back {
background: #4c4d4f;
color: #fff;
transition: 0.5s ease;
}
.charsheet input[type=checkbox].momentum-burn {
opacity: 0;
border: 0;
}
.charsheet div.momentum-burn-back {
font-weight: bold;
text-align: center;
line-height: 22px;
padding: 0em 0.2em;
}
.charsheet label.momentum-burn {
border: 2px solid #4c4d4f;
text-transform: uppercase;
padding: 0;
cursor: pointer;
margin: 0;
font-size: 1em;
}
.charsheet .momentum-box-input {
opacity: 0;
border: 0;
}
.charsheet .momentum-status-box {
text-transform: uppercase;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
border-radius: 0%;
background: transparent;
border: 2px solid #4c4d4f;
padding-left: 0.2em;
}
.charsheet .momentum-status-value {
width: auto;
font-size: 1em;
}
.charsheet h3.momentum-max-box,
.charsheet h3.momentum-reset-box {
display: inline;
padding-left: 1em;
}
.charsheet .momentum-box-value {
font-weight: bold;
font-size: 16px;
color: inherit;
}
.charsheet .momentum-input {
font-weight: bold;
width: 30px;
font-size: 13px;
text-align: center;
background: transparent;
}
.charsheet .momentum-box {
cursor: pointer;
border: 2px solid #4c4d4f;
padding: 0;
margin: 0;
}
.charsheet .momentum-dark {
color: #fff;
border: 2px solid #4b4d4f;
background: #4b4d4f;
width: 100%;
}
.charsheet .momentum-max,
.charsheet .momentum-reset {
line-height: 1.4em;
font-size: 1em;
}
.charsheet .momentum-title {
color: #fff;
line-height: 1.2em;
font-size: 1.2em;
}
.charsheet .momentum-header {
height: 20px;
}
.charsheet .sub-header-static {
margin-top: 0.2em;
border: 1px solid #4b4d4f;
}
.charsheet .momentum-status-attr {
padding: 0em 0.2em;
}
.charsheet .stats {
justify-content: space-evenly;
align-items: center;
border-radius: 0%;
margin-bottom: 1em;
}
.charsheet .stat {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
margin: 1em;
}
.charsheet .stats-title {
width: 100px;
}
.charsheet .stats-input {
font-weight: bold;
width: 60px;
line-height: 40px;
font-size: 28px;
text-align: center;
height: 50px !important;
border-radius: 0;
}
.charsheet input.stats-input {
border: 2px solid #4c4d4f;
background: #e6e7e8;
}
.charsheet input.stats-input:focus {
outline: 3px solid #fd0;
outline-offset: 0;
box-shadow: inset 0 0 0 2px;
}
.charsheet label.roll-label {
margin: 0;
padding: 0em 0.4em 0em 0.4em;
width: auto;
border: 2px solid #4c4d4f;
cursor: pointer;
text-align: center;
line-height: 1.4em;
border-radius: 1em;
}
.charsheet label.roll-label:hover {
background: #ccc;
transition: 0.5s ease;
}
.charsheet label.stat-toggle {
border-radius: 1em;
margin: 0;
padding: 0;
border: 2px solid #4c4d4f;
text-align: center;
cursor: pointer;
}
.charsheet label.stat-toggle:hover {
background: #ccc;
transition: 0.5s ease;
}
.charsheet input[type=radio].stat-set:checked ~ div.stat-set {
visibility: visible;
height: auto;
opacity: 1;
transition: 0.2s ease;
display: flex;
width: auto;
margin-left: 5em;
}
.charsheet input[type=radio].stat-edit:checked ~ div.stat-edit {
visibility: visible;
height: auto;
opacity: 1;
transition: 0.2s ease;
display: flex;
width: auto;
}
.charsheet div.stat-toggle.set-toggle {
width: 100%;
height: 0;
margin: 4em 1em 0em 1em;
}
.charsheet div.stat-toggle.edit-toggle {
transform: rotate(90deg);
text-transform: uppercase;
width: 100%;
height: 0;
margin-top: 3.45em;
}
.charsheet .note-area:focus {
outline: 3px solid #fd0;
outline-offset: 0;
box-shadow: inset 0 0 0 2px;
}
.charsheet div.search-bar {
display: flex;
justify-content: center;
width: 100%;
margin: 1em 0em 0.5em 0em;
}
.charsheet div.preview-bar {
justify-content: space-between;
width: 100%;
display: flex;
margin: 0em 0em 0.5em 0em;
}
.charsheet div.search-preview-bar {
display: flex;
width: auto;
}
.charsheet div.move-nav-content {
padding: 0.2em;
width: 100%;
}
.charsheet input.search-preview-bar {
width: 17.6em;
border: 2px solid #4c4d4f;
border-radius: 0;
}
.charsheet input.search-preview-bar:focus {
outline: 3px solid #fd0;
outline-offset: 0;
box-shadow: inset 0 0 0 2px;
}
.charsheet input.search-bar {
width: 50%;
border: 2px solid #4c4d4f;
}
.charsheet input.search-bar:focus {
outline: 3px solid #fd0;
outline-offset: 0;
box-shadow: inset 0 0 0 2px;
}
.charsheet input.table-btn:checked ~ div.move-nav-content {
background: #4c4d4f;
color: #fff;
transition: 0.5s ease;
}
.charsheet .preview-container {
display: flex;
justify-content: space-between;
font-size: 1em;
flex-flow: row;
font-weight: normal;
height: auto;
}
.charsheet .list-group-container {
columns: 3;
column-gap: 1em;
margin-bottom: 3em;
}
.charsheet .list-group-container section.list-group {
border: 2px solid #4c4d4f;
border-width: 4px;
background-color: #4c4d4f;
box-sizing: border-box;
margin: 0em;
margin-bottom: 1em;
height: fit-content;
height: -moz-fit-content;
-webkit-column-break-inside: avoid;
page-break-inside: avoid;
break-inside: avoid;
border-radius: 1em;
overflow: hidden;
}
.charsheet .list-group-container section.list-group h3.list-group-title {
color: #fff;
font-size: 1.4em;
font-weight: bold;
padding-left: 5px;
padding-right: 5px;
text-transform: uppercase;
text-align: center;
display: inline-block;
vertical-align: text-bottom;
width: stretch;
width: -moz-available;
}
.charsheet .list-group-container section.list-group ul {
display: grid;
gap: 4px;
padding: 0;
margin: 0;
border: 0;
width: auto;
overflow: hidden;
}
.charsheet .list-group-container section.list-group ul * {
width: inherit;
padding: 0;
margin: 0;
border: 0;
border-radius: 0;
}
.charsheet .list-group-container section.list-group ul li.list-group-item {
height: min-content;
list-style-type: none;
background: none;
display: grid;
grid-template-columns: 1.75em 1fr;
gap: 4px;
}
.charsheet .list-group-container section.list-group ul li.list-group-item::before {
all: unset;
}
.charsheet .list-group-container section.list-group ul li.list-group-item > * {
background-color: #fff;
}
.charsheet .list-group-container section.list-group ul li.list-group-item:nth-child(2n+1) > * {
background-color: #e4e4e4;
}
.charsheet .list-group-container section.list-group ul li.list-group-item label.toggle-btn {
cursor: pointer;
width: stretch;
width: -moz-available;
}
.charsheet .list-group-container section.list-group ul li.list-group-item label.toggle-btn:hover {
background-color: #ccc;
}
.charsheet .list-group-container section.list-group ul li.list-group-item label.toggle-btn span {
padding: 3px;
}
.charsheet .list-group-container section.list-group ul li.list-group-item .button-container {
height: 100%;
width: 100%;
padding: 0;
}
.charsheet .list-group-container section.list-group ul li.list-group-item .button-container button.btn.roll-show[type='roll'] {
display: inline-block;
height: 100%;
width: 100%;
}
.charsheet .list-group-container section.list-group ul li.list-group-item .button-container button.btn.roll-show[type='roll']:hover {
transition: 0.3s ease;
background: #606060 !important;
color: #fff;
}
.charsheet .list-group-container section.list-group ul li.list-group-item .button-container button.btn.roll-show[type='roll']:before {
vertical-align: middle;
}
.charsheet .list-group-container.scrollable-list-groups {
overflow: auto;
border: 2px solid #4c4d4f;
padding: 1em;
width: max-content;
width: 21.9em;
overflow: auto;
padding: 0;
height: 50em;
columns: unset;
column-gap: unset;
}
.charsheet .list-group-container.scrollable-list-groups section.list-group {
border-radius: 0;
margin: 0;
}
.charsheet .move {
margin: 0em;
color: #4c4d4f;
display: flex;
padding: 0;
}
.charsheet .list-group-title {
background: #4c4d4f;
}
.charsheet .list-group-title h3 {
color: #fff;
}
.charsheet .move-name {
width: 100%;
border: 2px solid #4c4d4f;
}
.charsheet .move-highlight:checked ~ .move-name {
background: #fd0;
outline-offset: 0;
box-shadow: inset 0 0 0 2px;
}
.charsheet .roll-show {
padding: 0 !important;
font-size: 20px !important;
margin: 0 !important;
height: auto;
}
.charsheet .roll-show:hover {
color: #fff;
}
.charsheet .move-column {
display: flex;
flex-direction: column;
margin-right: 10px;
}
.charsheet span.move-result {
width: 36em;
}
.charsheet span.preview-move-roll {
width: 60%;
margin-left: 1em;
}
.charsheet .list-group-scroll {
border: 2px solid #4c4d4f;
box-sizing: border-box;
height: fit-content;
height: -moz-fit-content;
}
.charsheet .move-box:nth-child(n + 2) {
margin-top: 10px;
}
.charsheet .move-title {
background-color: #4c4d4f;
color: #fff;
border-bottom: 1px solid #4c4d4f;
font-size: 1.4em;
font-weight: bold;
padding: 0.2em 0.5em 0.1em 0.7em;
text-transform: uppercase;
width: 11.7em;
border-top-left-radius: 1em;
border-top-right-radius: 1em;
}
.charsheet .move-progress-label {
display: block;
font-family: 'Encode Sans Condensed', Arial, sans-serif;
font-size: 80%;
font-weight: normal;
text-transform: none;
font-style: italic;
}
.charsheet .move-preview {
width: auto;
}
.charsheet .move-page-footer {
text-align: right !important;
padding-right: 1em;
}
.charsheet .move-preview-container {
width: 62%;
}
.charsheet .move-preview-container p {
font-size: 15px;
margin: 0;
}
.charsheet .move-preview-container ul {
margin: 2px 0px 5px 16px;
font-size: 15px;
}
.charsheet .move-preview-container li {
font-size: 15px;
font-family: 'Encode Sans Condensed', Arial, sans-serif;
}
.charsheet .move-preview-container .roll-label {
border-radius: 0;
}
.charsheet .move-show {
display: inline-flex;
font-size: 1em;
margin: 0em;
padding: 0.3em;
}
.charsheet .move-show:hover {
background: #969696;
cursor: pointer;
transition: 0.5s ease;
}
.charsheet .column-wrap {
flex-flow: column wrap;
width: 22.5em;
}
.charsheet .move-delve-table {
width: auto !important;
}
.charsheet .move-description {
font-family: 'Montserrat', Arial, sans-serif;
padding: 1em;
border: 2px solid #4c4d4f;
}
.charsheet .move-description .move-oracle-container label.roll-label.embedded-btn {
border-width: 4px 4px 0px;
font-size: 1em;
}
.charsheet .move-description .move-oracle-container table.oracle-table {
margin-top: 0px;
border-width: 4px;
}
.charsheet .move-description p {
margin-bottom: 0.3em;
}
.charsheet .move-description table {
border: 2px solid #4c4d4f;
width: 99.5%;
margin: 0.8em 0em;
}
.charsheet .move-description table thead {
padding: 0.3em;
background-color: #4c4d4f;
color: #fff;
}
.charsheet .move-description table thead th {
padding-left: 0.4em;
}
.charsheet .move-description table tbody td {
padding-left: 0.4em;
}
.charsheet .move-table {
border: none;
width: 30.5em;
font-size: 12px;
}
.charsheet .move-roll {
width: 18%;
}
.charsheet .move-footer {
background-color: #434b4d;
color: #fff;
line-height: 0.9em;
font-size: 0.9em;
font-family: 'Montserrat', Arial, sans-serif;
font-variant: small-caps;
font-weight: bold;
text-align: left;
padding: 0.5rem;
}
.charsheet .close-preview {
text-transform: uppercase;
width: 100%;
height: auto;
margin: 0;
font-weight: bold;
font-size: 14px;
padding: 0.2em 0.2em 0.2em 0.2em;
border: 2px solid #494a4c;
cursor: pointer;
text-align: center;
}
.charsheet .close-preview:hover {
background-color: #ccc;
color: #4c4d4f;
transition: 0.5s ease;
}
.charsheet .clear-search {
width: fit-content;
width: -moz-fit-content;
height: auto;
margin: 0;
font-weight: bold;
font-size: 14px;
padding: 0.2em 0.2em 0.2em 0.2em;
border: 2px solid #494a4c;
cursor: pointer;
}
.charsheet .clear-search:hover {
background-color: #ccc;
color: #4c4d4f;
transition: 0.5s ease;
}
.charsheet .selected-move {
z-index: 3;
}
.charsheet .selected-move:checked ~ .move-name {
background: #434b4d !important;
color: #fff !important;
}
.charsheet input.move-preview:checked ~ div.move-preview,
.charsheet input.full-move-list:checked ~ div.full-move-list {
visibility: visible;
height: auto;
opacity: 1;
transition: 0.2s ease;
}
.charsheet input[type=radio].move-begin-a-session:checked ~ div.move-begin-a-session,
.charsheet input[type=radio].move-set-a-flag:checked ~ div.move-set-a-flag,
.charsheet input[type=radio].move-change-your-fate:checked ~ div.move-change-your-fate,
.charsheet input[type=radio].move-take-a-break:checked ~ div.move-take-a-break,
.charsheet input[type=radio].move-end-a-session:checked ~ div.move-end-a-session,
.charsheet input[type=radio].move-face-danger:checked ~ div.move-face-danger,
.charsheet input[type=radio].move-secure-an-advantage:checked ~ div.move-secure-an-advantage,
.charsheet input[type=radio].move-gather-information:checked ~ div.move-gather-information,
.charsheet input[type=radio].move-compel:checked ~ div.move-compel,
.charsheet input[type=radio].move-aid-your-ally:checked ~ div.move-aid-your-ally,
.charsheet input[type=radio].move-check-your-gear:checked ~ div.move-check-your-gear,
.charsheet input[type=radio].move-swear-an-iron-vow:checked ~ div.move-swear-an-iron-vow,
.charsheet input[type=radio].move-reach-a-milestone:checked ~ div.move-reach-a-milestone,
.charsheet input[type=radio].move-forsake-your-vow:checked ~ div.move-forsake-your-vow,
.charsheet input[type=radio].move-fulfill-your-vow:checked ~ div.move-fulfill-your-vow,
.charsheet input[type=radio].move-make-a-connection:checked ~ div.move-make-a-connection,
.charsheet input[type=radio].move-develop-your-relationship:checked ~ div.move-develop-your-relationship,
.charsheet input[type=radio].move-forge-a-bond:checked ~ div.move-forge-a-bond,
.charsheet input[type=radio].move-test-your-relationship:checked ~ div.move-test-your-relationship,
.charsheet input[type=radio].move-undertake-an-expedition:checked ~ div.move-undertake-an-expedition,
.charsheet input[type=radio].move-explore-a-waypoint:checked ~ div.move-explore-a-waypoint,
.charsheet input[type=radio].move-finish-an-expedition:checked ~ div.move-finish-an-expedition,
.charsheet input[type=radio].move-set-a-course:checked ~ div.move-set-a-course,
.charsheet input[type=radio].move-make-a-discovery:checked ~ div.move-make-a-discovery,
.charsheet input[type=radio].move-confront-chaos:checked ~ div.move-confront-chaos,
.charsheet input[type=radio].move-enter-the-fray:checked ~ div.move-enter-the-fray,
.charsheet input[type=radio].move-gain-ground:checked ~ div.move-gain-ground,
.charsheet input[type=radio].move-react-under-fire:checked ~ div.move-react-under-fire,
.charsheet input[type=radio].move-strike:checked ~ div.move-strike,
.charsheet input[type=radio].move-clash:checked ~ div.move-clash,
.charsheet input[type=radio].move-face-defeat:checked ~ div.move-face-defeat,
.charsheet input[type=radio].move-take-decisive-action:checked ~ div.move-take-decisive-action,
.charsheet input[type=radio].move-battle:checked ~ div.move-battle,
.charsheet input[type=radio].move-lose-momentum:checked ~ div.move-lose-momentum,
.charsheet input[type=radio].move-endure-harm:checked ~ div.move-endure-harm,
.charsheet input[type=radio].move-endure-stress:checked ~ div.move-endure-stress,
.charsheet input[type=radio].move-withstand-damage:checked ~ div.move-withstand-damage,
.charsheet input[type=radio].move-companion-takes-a-hit:checked ~ div.move-companion-takes-a-hit,
.charsheet input[type=radio].move-sacrifice-resources:checked ~ div.move-sacrifice-resources,
.charsheet input[type=radio].move-face-death:checked ~ div.move-face-death,
.charsheet input[type=radio].move-face-desolation:checked ~ div.move-face-desolation,
.charsheet input[type=radio].move-overcome-destruction:checked ~ div.move-overcome-destruction,
.charsheet input[type=radio].move-sojourn:checked ~ div.move-sojourn,
.charsheet input[type=radio].move-heal:checked ~ div.move-heal,
.charsheet input[type=radio].move-hearten:checked ~ div.move-hearten,
.charsheet input[type=radio].move-repair:checked ~ div.move-repair,
.charsheet input[type=radio].move-resupply:checked ~ div.move-resupply,
.charsheet input[type=radio].move-earn-experience:checked ~ div.move-earn-experience,
.charsheet input[type=radio].move-advance:checked ~ div.move-advance,
.charsheet input[type=radio].move-continue-a-legacy:checked ~ div.move-continue-a-legacy,
.charsheet input[type=radio].move-pay-the-price:checked ~ div.move-pay-the-price,
.charsheet input[type=radio].move-ask-the-oracle:checked ~ div.move-ask-the-oracle {
visibility: visible;
height: auto;
opacity: 1;
transition: 0.2s ease;
}
.charsheet .move-nav-child {
display: flex;
width: auto;
height: 1.3em;
padding: 0;
margin: 0.2em 0em 0.2em 0em;
text-align: center;
}
.charsheet ::-webkit-scrollbar {
-webkit-appearance: none;
width: 7px;
}
.charsheet ::-webkit-scrollbar-thumb {
border-radius: 4px;
background-color: rgba(0,0,0,0.5);
box-shadow: 0 0 1px rgba(255,255,255,0.5);
}
.charsheet .move-delve-column-stat-header,
.charsheet .move-delve-stat-column {
width: 16%;
}
.charsheet .move-delve-column-stat-header-1,
.charsheet .move-delve-stat-column-1 {
width: 17%;
}
.charsheet .move-delve-column-stat-header-2,
.charsheet .move-delve-stat-column-2 {
width: 18%;
}
.charsheet .move-delve-column-stat-header-3,
.charsheet .move-delve-stat-column-3 {
width: 15%;
}
.charsheet .move-delve-column-header,
.charsheet .move-delve-column {
width: 50%;
}
.charsheet .move-delve-column-stat-header,
.charsheet .move-delve-column-stat-header-1,
.charsheet .move-delve-column-stat-header-2,
.charsheet .move-delve-column-stat-header-3,
.charsheet .move-delve-column-header {
font-weight: bold;
}
.charsheet .move-delve-row-header {
padding: 0px 5px 0px 5px;
display: flex;
height: auto;
border-bottom: 2px solid #4c4d4f;
}
.charsheet .embedded-btn {
padding-top: 0.2em !important;
font-family: 'Montserrat', Arial, sans-serif;
}
.charsheet input.optional-move-failures:checked ~ div.optional-move-failures,
.charsheet input.optional-move-sites:checked ~ div.optional-move-sites,
.charsheet input.optional-move-threat:checked ~ div.optional-move-threat,
.charsheet input.optional-move-rarity:checked ~ div.optional-move-rarity {
display: block;
}
.charsheet input[type="checkbox"].showhide:checked ~ div.showhide {
visibility: visible;
height: auto;
opacity: 1;
transition: 0.2s ease;
}
.charsheet select.path-dropdown option[value="alchemist"] ~ .alchemist {
display: flex;
visibility: visible;
height: auto;
opacity: 1;
transition: 0.2s ease;
}
.charsheet input[type="radio"].asset-builder:checked ~ div.asset-builder,
.charsheet input[type="radio"].asset-view:checked ~ div.asset-view {
display: block;
visibility: visible;
height: auto;
opacity: 1;
transition: 0.2s ease;
}
.charsheet input[type="checkbox"].builder-titles-1:checked ~ div.builder-titles-1,
.charsheet input[type="checkbox"].builder-titles-2:checked ~ div.builder-titles-2,
.charsheet input[type="checkbox"].builder-titles-3:checked ~ div.builder-titles-3,
.charsheet input[type="checkbox"].builder-ability-1-text:checked ~ div.builder-ability-1-text,
.charsheet input[type="checkbox"].builder-ability-1-text-input:checked ~ div.builder-ability-1-text-input,
.charsheet input[type="checkbox"].builder-ability-2-text:checked ~ div.builder-ability-2-text,
.charsheet input[type="checkbox"].builder-ability-2-text-input:checked ~ div.builder-ability-2-text-input,
.charsheet input[type="checkbox"].builder-ability-3-text:checked ~ div.builder-ability-3-text,
.charsheet input[type="checkbox"].builder-ability-3-text-input:checked ~ div.builder-ability-3-text-input,
.charsheet input[type="checkbox"].track-dropdown-1:checked ~ div.track-dropdown-1,
.charsheet input[type="checkbox"].track-dropdown-2:checked ~ div.track-dropdown-2,
.charsheet input[type="checkbox"].track-dropdown-3:checked ~ div.track-dropdown-3,
.charsheet input[type="checkbox"].track-dropdown-4:checked ~ div.track-dropdown-4,
.charsheet input[type="checkbox"].track-dropdown-5:checked ~ div.track-dropdown-5,
.charsheet input[type="checkbox"].track-dropdown-6:checked ~ div.track-dropdown-6 {
display: flex;
visibility: visible;
height: auto;
opacity: 1;
transition: 0.2s ease;
}
.charsheet div.builder-titles-1,
.charsheet div.builder-titles-2,
.charsheet div.builder-titles-3 {
flex-flow: column;
margin-bottom: 0.3em;
}
.charsheet .view-title-width {
width: 22em;
margin: 0em 1em;
}
.charsheet .custom > input[type=radio] {
margin-left: 4px;
}
.charsheet .custom div[class|=builder-ability] {
align-items: flex-start;
}
.charsheet div.asset-view,
.charsheet div.asset-builder {
margin-top: 0.3em;
}
.charsheet input[type=checkbox].custom-asset-ability {
opacity: 1;
margin: 0px 5px 0 5px;
}
.charsheet .custom-track {
width: 20.5em;
margin: 0 !important;
}
.charsheet .ability-checkbox,
.charsheet .build-text {
font-family: 'Encode Sans Condensed', Arial, sans-serif;
font-size: 13px;
resize: none;
height: 100px;
width: 22em;
margin: 0em 0.5em 0em 0.4em;
}
.charsheet .ability-text {
font-family: 'Encode Sans Condensed', Arial, sans-serif;
font-size: 14.3px;
resize: none;
height: 100px;
margin-bottom: 0em;
width: 18em;
}
.charsheet .builder-dropdown {
font-size: 14px;
}
.charsheet .asset-description {
margin: 0 12px 0px 12px;
font-family: 'Encode Sans Condensed', Arial, sans-serif;
}
.charsheet div.asset-ability {
width: 100%;
height: 100%;
margin: 0px 12px 6px 10px;
}
.charsheet div.asset-ability ul {
margin-left: 15px;
margin-bottom: 0;
}
.charsheet div.assets {
display: block !important;
text-align: left;
}
.charsheet div.assets .repcontainer {
display: flex;
flex-flow: row wrap;
padding: 0.5em;
font-family: 'Encode Sans Condensed', Arial, sans-serif;
justify-content: space-evenly;
}
.charsheet div.assets .repcontainer .repitem {
float: left !important;
}
.charsheet .asset-ability-write-in {
margin-top: 4px;
}
.charsheet .asset-write-in {
display: flex;
white-space: nowrap;
margin-bottom: 4px;
font-weight: bold;
margin-right: 1em;
}
.charsheet .asset-ability-write-in {
display: inline;
white-space: nowrap;
}
.charsheet .asset {
display: inline-block;
width: 320px;
max-width: 320px;
border: 2px solid #4c4d4f;
margin-bottom: 20px;
font-size: 14.3px;
line-height: 1.25;
border-radius: 1em;
box-shadow: 2px 2px 6px 0px;
font-family: 'Encode Sans Condensed', Arial, sans-serif;
}
.charsheet .asset input.border-bottom {
border-bottom-color: #4c4d4f;
padding: 0;
}
.charsheet .asset-write-in input,
.charsheet .asset-ability-write-in input {
height: 1.4em;
width: 100%;
padding: 0;
margin-left: 5px;
margin-top: 2px;
font-size: 15px;
font-weight: bold;
}
.charsheet input[type="checkbox"].asset-ability {
opacity: 1 !important;
margin-top: 0.2em;
}
.charsheet .asset-type-selection {
background: #4c4d4f;
color: #fff;
border: 0;
}
.charsheet .asset-type-dropdown {
color: #fff;
background: #4c4d4f;
width: auto;
font-size: 15px;
font-weight: bold;
text-transform: uppercase;
-webkit-appearance: menulist;
margin: 6px 4px;
}
.charsheet .sub-dropdown {
-webkit-appearance: menulist;
width: auto;
margin: 7px 4px;
font-weight: bold;
text-transform: uppercase;
}
.charsheet .asset-track-wrapper {
margin: 10px;
display: flex;
}
.charsheet .asset-track-box {
width: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
border-radius: 0%;
background: transparent;
border: 2px solid #4c4d4f;
padding: 5px;
margin-bottom: 2px;
}
.charsheet .asset-track-wrapper-wordy {
text-transform: uppercase;
}
.charsheet .asset-track-wrapper-wordy .asset-track-box {
flex-direction: row;
}
.charsheet .asset-track-box-display {
font-size: 17px;
font-weight: bold;
}
.charsheet .ability-top {
margin-top: 1em;
}
.charsheet .builder-name {
margin-bottom: 0.5em;
}
.charsheet span.custom-asset-page {
margin-left: 0.3em;
margin-right: 0.5em;
}
.charsheet .asset-description-text {
margin-top: 0.4em;
}
.charsheet .asset-body {
font-size: 14.3px;
line-height: 1.25;
margin: 0 0 4px;
}
.charsheet input[type=checkbox].custom:checked ~ div.custom {
display: block;
visibility: visible;
height: auto;
opacity: 1;
transition: 0.2s ease;
}
.charsheet input[type=checkbox].ace:checked ~ div.ace,
.charsheet input[type=checkbox].agent:checked ~ div.agent,
.charsheet input[type=checkbox].archer:checked ~ div.archer,
.charsheet input[type=checkbox].armored:checked ~ div.armored,
.charsheet input[type=checkbox].augmented:checked ~ div.augmented,
.charsheet input[type=checkbox].bannersworn:checked ~ div.bannersworn,
.charsheet input[type=checkbox].banshee:checked ~ div.banshee,
.charsheet input[type=checkbox].blademaster:checked ~ div.blademaster,
.charsheet input[type=checkbox].bonded:checked ~ div.bonded,
.charsheet input[type=checkbox].bounty-hunter:checked ~ div.bounty-hunter,
.charsheet input[type=checkbox].brawler:checked ~ div.brawler,
.charsheet input[type=checkbox].combat-bot:checked ~ div.combat-bot,
.charsheet input[type=checkbox].commander:checked ~ div.commander,
.charsheet input[type=checkbox].courier:checked ~ div.courier,
.charsheet input[type=checkbox].devotant:checked ~ div.devotant,
.charsheet input[type=checkbox].diplomat:checked ~ div.diplomat,
.charsheet input[type=checkbox].empath:checked ~ div.empath,
.charsheet input[type=checkbox].explorer:checked ~ div.explorer,
.charsheet input[type=checkbox].fated:checked ~ div.fated,
.charsheet input[type=checkbox].firebrand:checked ~ div.firebrand,
.charsheet input[type=checkbox].fugitive:checked ~ div.fugitive,
.charsheet input[type=checkbox].gearhead:checked ~ div.gearhead,
.charsheet input[type=checkbox].glowcat:checked ~ div.glowcat,
.charsheet input[type=checkbox].gunner:checked ~ div.gunner,
.charsheet input[type=checkbox].gunslinger:checked ~ div.gunslinger,
.charsheet input[type=checkbox].haunted:checked ~ div.haunted,
.charsheet input[type=checkbox].healer:checked ~ div.healer,
.charsheet input[type=checkbox].homesteader:checked ~ div.homesteader,
.charsheet input[type=checkbox].kinetic:checked ~ div.kinetic,
.charsheet input[type=checkbox].lore-hunter:checked ~ div.lore-hunter,
.charsheet input[type=checkbox].loyalist:checked ~ div.loyalist,
.charsheet input[type=checkbox].marked:checked ~ div.marked,
.charsheet input[type=checkbox].mercenary:checked ~ div.mercenary,
.charsheet input[type=checkbox].naturalist:checked ~ div.naturalist,
.charsheet input[type=checkbox].navigator:checked ~ div.navigator,
.charsheet input[type=checkbox].oathbreaker:checked ~ div.oathbreaker,
.charsheet input[type=checkbox].outcast:checked ~ div.outcast,
.charsheet input[type=checkbox].protocol-bot:checked ~ div.protocol-bot,
.charsheet input[type=checkbox].revenant:checked ~ div.revenant,
.charsheet input[type=checkbox].rockhorn:checked ~ div.rockhorn,
.charsheet input[type=checkbox].scavenger:checked ~ div.scavenger,
.charsheet input[type=checkbox].scoundrel:checked ~ div.scoundrel,
.charsheet input[type=checkbox].seer:checked ~ div.seer,
.charsheet input[type=checkbox].shade:checked ~ div.shade,
.charsheet input[type=checkbox].sidekick:checked ~ div.sidekick,
.charsheet input[type=checkbox].slayer:checked ~ div.slayer,
.charsheet input[type=checkbox].sniper:checked ~ div.sniper,
.charsheet input[type=checkbox].sprite:checked ~ div.sprite,
.charsheet input[type=checkbox].survey-bot:checked ~ div.survey-bot,
.charsheet input[type=checkbox].symbiote:checked ~ div.symbiote,
.charsheet input[type=checkbox].tech:checked ~ div.tech,
.charsheet input[type=checkbox].trader:checked ~ div.trader,
.charsheet input[type=checkbox].utility-bot:checked ~ div.utility-bot,
.charsheet input[type=checkbox].vanguard:checked ~ div.vanguard,
.charsheet input[type=checkbox].vestige:checked ~ div.vestige,
.charsheet input[type=checkbox].veteran:checked ~ div.veteran,
.charsheet input[type=checkbox].voidborn:checked ~ div.voidborn,
.charsheet input[type=checkbox].voidglider:checked ~ div.voidglider,
.charsheet input[type=checkbox].weapon-master:checked ~ div.weapon-master,
.charsheet input[type=checkbox].engine-upgrade:checked ~ div.engine-upgrade,
.charsheet input[type=checkbox].expanded-hold:checked ~ div.expanded-hold,
.charsheet input[type=checkbox].grappler:checked ~ div.grappler,
.charsheet input[type=checkbox].heavy-cannons:checked ~ div.heavy-cannons,
.charsheet input[type=checkbox].internal-refit:checked ~ div.internal-refit,
.charsheet input[type=checkbox].medbay:checked ~ div.medbay,
.charsheet input[type=checkbox].missile-array:checked ~ div.missile-array,
.charsheet input[type=checkbox].overseer:checked ~ div.overseer,
.charsheet input[type=checkbox].reinforced-hull:checked ~ div.reinforced-hull,
.charsheet input[type=checkbox].research-lab:checked ~ div.research-lab,
.charsheet input[type=checkbox].sensor-array:checked ~ div.sensor-array,
.charsheet input[type=checkbox].shields:checked ~ div.shields,
.charsheet input[type=checkbox].stealth-tech:checked ~ div.stealth-tech,
.charsheet input[type=checkbox].vehicle-bay:checked ~ div.vehicle-bay,
.charsheet input[type=checkbox].workshop:checked ~ div.workshop,
.charsheet input[type=checkbox].exosuit:checked ~ div.exosuit,
.charsheet input[type=checkbox].hoverbike:checked ~ div.hoverbike,
.charsheet input[type=checkbox].rover:checked ~ div.rover,
.charsheet input[type=checkbox].service-pod:checked ~ div.service-pod,
.charsheet input[type=checkbox].shuttle:checked ~ div.shuttle,
.charsheet input[type=checkbox].skiff:checked ~ div.skiff,
.charsheet input[type=checkbox].snub-fighter:checked ~ div.snub-fighter {
display: block;
visibility: visible;
height: auto;
opacity: 1;
transition: 0.2s ease;
}
.charsheet span.asset-name {
font-family: 'Exo', Helvetica, Arial, sans-serif;
font-size: 1.5em;
font-weight: bold;
text-transform: uppercase;
}
.charsheet .asset-content-header {
display: flex;
justify-content: space-between;
}
.charsheet .asset-details {
align-self: center;
padding-left: 1em;
}
.charsheet .category {
font-family: 'Exo', Arial, sans-serif;
font-size: 1.1em;
text-transform: uppercase;
font-weight: bold;
}
.charsheet .asset-options-header {
padding: 0.2em 0.4em;
background: #4c4d4f;
color: #fff;
width: 100%;
border: 0;
border-radius: 0.4em 0.4em 0em 0em;
font-size: 1em;
text-transform: uppercase;
font-family: 'Exo', Arial, sans-serif;
}
.charsheet .asset-options-header::placeholder {
color: #b9b9b9;
}
.charsheet .custom {
padding: 0.5em;
}
.charsheet .write-in-container {
display: flex;
margin-left: 0.85em;
margin-top: 0.4em;
}
.charsheet .background-svg {
width: 100px;
height: 93px;
background-repeat: no-repeat;
}
.charsheet .category-path .asset-details .category {
color: #3b7fa9;
}
.charsheet .category-companion .asset-details .category {
color: #3c8b8a;
}
.charsheet .category-module .asset-details .category {
color: #7e5990;
}
.charsheet .category-support-vehicle .asset-details .category {
color: #485690;
}
.charsheet .category-deed .asset-details .category {
color: #4b974e;
}
.charsheet .category-command-vehicle .asset-details .category {
color: #99a3ad;
}
.charsheet input.oracle-ironsworn:checked ~ div.oracle-ironsworn,
.charsheet input.oracle-delve:checked ~ div.oracle-delve {
visibility: visible;
height: auto;
opacity: 1;
transition: 0.7s ease;
}
.charsheet .oracle-btn {
margin: 0;
width: 100%;
}
.charsheet .oracles {
display: flex;
flex-wrap: wrap;
flex-direction: column;
}
.charsheet .oracle {
margin: 0em;
color: #4c4d4f;
display: flex;
}
.charsheet .oracle-subtitle,
.charsheet .oracle-column-head {
background-color: #4c4d4f;
color: #fff;
padding-right: 0.5em;
padding-left: 0.35em;
}
.charsheet .oracle-column-head {
font-weight: 600;
}
.charsheet .oracle-subtitle {
text-transform: uppercase;
}
.charsheet .oracle-table-preview {
font-family: 'Montserrat', Arial, sans-serif;
font-weight: 500;
}
.charsheet .oracle-table-preview caption.oracle-description,
.charsheet .oracle-table-preview div.oracle-description {
font-family: 'Montserrat', Arial, sans-serif;
background-color: #4c4d4f;
color: #fff;
}
.charsheet .oracle-table-preview caption.oracle-description p,
.charsheet .oracle-table-preview div.oracle-description p,
.charsheet .oracle-table-preview caption.oracle-description ol,
.charsheet .oracle-table-preview div.oracle-description ol,
.charsheet .oracle-table-preview caption.oracle-description ul,
.charsheet .oracle-table-preview div.oracle-description ul {
font-family: 'Montserrat', Arial, sans-serif;
padding: 0.5em;
}
.charsheet .oracle-table-preview table {
font-family: 'Montserrat', Arial, sans-serif;
}
.charsheet input[type=radio][name=attr_oracle_preview]:checked + .oracle-table-preview {
visibility: visible;
height: auto;
opacity: 1;
transition: 0.2s ease;
}
.charsheet .oracle-container {
opacity: 1;
font-family: 'Montserrat', Arial, sans-serif;
font-size: 1em;
font-weight: bold;
justify-content: space-between;
padding: 0.1em;
}
.charsheet .oracle-column {
display: flex;
flex-direction: column;
}
.charsheet .oracle-sub-column {
width: 50%;
}
.charsheet .theme-outline {
border: 1px solid #4c4d4f;
}
.charsheet span.oracle-result {
width: 80%;
font-size: 13px;
}
.charsheet .oracle-box {
border: 2px solid #4c4d4f;
box-sizing: border-box;
height: fit-content;
}
.charsheet .oracle-title {
background-color: #4c4d4f;
color: #fff;
border-bottom: 1px solid #4c4d4f;
font-size: 1.4em;
font-weight: bold;
padding-left: 5px;
padding-right: 5px;
text-transform: uppercase;
text-align: center;
}
.charsheet .oracle-table-preview {
width: auto;
}
.charsheet table.oracle-table {
width: -moz-available;
width: -webkit-fill-available;
width: stretch;
}
.charsheet tr.oracle-row {
display: table-row;
}
.charsheet .oracle-show {
display: inline-flex;
font-size: 1em;
margin: 0em;
padding: 0.3em;
}
.charsheet .oracle-show:hover {
background: #969696;
cursor: pointer;
transition: 0.5s ease;
}
.charsheet .oracle-table {
border: 4px solid #4c4d4f;
}
.charsheet .flex-table {
display: flex;
}
.charsheet .oracle-row:nth-child(2n+1),
.charsheet .oracle:nth-child(2n+1) {
background-color: #e4e4e4;
}
.charsheet .oracle-row {
padding: 3px 0px 3px 0px;
display: flex;
height: auto;
}
.charsheet tr.oracle-row {
display: table-row;
}
.charsheet tr.oracle-row td {
padding: 3px 6px;
}
.charsheet .oracle-row-2 {
width: 50%;
}
.charsheet .oracle-row-3 {
width: 33.33%;
}
.charsheet .oracle-row-4 {
width: 25%;
}
.charsheet td.oracle-roll {
padding-left: 0.5em;
width: 3em;
}
.charsheet th.oracle-column-head.oracle-roll {
white-space: nowrap;
}
.charsheet .oracle-table-2-column {
display: flex;
flex-flow: column wrap;
height: 48em;
}
.charsheet .oracle-table-3-column {
display: flex;
flex-flow: column wrap;
height: 63em;
}
.charsheet .oracle-table-4-column {
display: flex;
flex-flow: column wrap;
height: 93em;
}
.charsheet .oracle-table-2-column-group {
display: flex;
}
.charsheet .table-list {
width: 33%;
height: 44em;
overflow: auto;
border: 3px solid #4c4d4f;
padding: 0;
margin: 0;
margin-right: 0.3em;
}
.charsheet .oracle-column.table-main {
width: 66%;
}
.charsheet .oracle-footer {
background-color: #434b4d;
color: #fff;
line-height: 0.9em;
font-size: 0.9em;
font-family: 'Montserrat', Arial, sans-serif;
font-variant: small-caps;
font-weight: bold;
text-align: left;
padding: 0.5rem;
border-bottom-right-radius: 1em;
border-bottom-left-radius: 1em;
}
.charsheet input[type=radio].oracle-overview:checked ~ div.oracle-overview,
.charsheet input[type=radio].oracle-preview:checked ~ div.oracle-preview {
visibility: visible;
height: auto;
opacity: 1;
transition: 0.2s ease;
}
.charsheet .oracle .button-container,
.charsheet .oracle-overview-container .button-container {
width: max-content;
}
.charsheet .oracle .button-container button.btn.roll-show[type='roll'],
.charsheet .oracle-overview-container .button-container button.btn.roll-show[type='roll'] {
display: inline-block;
height: 100%;
width: 1.25em;
}
.charsheet .oracle .button-container button.btn.roll-show[type='roll']:hover,
.charsheet .oracle-overview-container .button-container button.btn.roll-show[type='roll']:hover {
transition: 0.3s ease;
background: #606060 !important;
color: #fff;
}
.charsheet .oracle .button-container button.btn.roll-show[type='roll']:before,
.charsheet .oracle-overview-container .button-container button.btn.roll-show[type='roll']:before {
vertical-align: middle;
}
.charsheet .oracle-overview-container {
columns: 3;
column-gap: 1em;
}
.charsheet .oracle-overview-container .oracle-box {
-webkit-column-break-inside: avoid;
page-break-inside: avoid;
break-inside: avoid;
border-radius: 1em;
margin-bottom: 1em;
}
.charsheet .oracle-overview-container .oracle-box .oracle:nth-last-child(1) {
border-bottom-left-radius: 1em;
border-bottom-right-radius: 1em;
}
.charsheet .oracle-overview-container .oracle-box .oracle:nth-last-child(1) .button-container {
border-bottom-left-radius: 0.6em;
}
.charsheet .oracle-overview-container .oracle-box .oracle:nth-last-child(1) .oracle-btn {
border-bottom-right-radius: 0.6em;
}
.charsheet .oracle-overview-container .oracle-box .oracle-title {
border-top-left-radius: 0.5em;
border-top-right-radius: 0.5em;
}
.charsheet .oracle-preview-container {
display: flex;
}
.charsheet .oracle-preview .oracle-box {
width: 100%;
}
.charsheet .column-wrap {
width: 50%;
}
.charsheet .legacies {
display: grid;
grid-gap: 0.5em;
}
.charsheet .legacies .progress-boxes {
text-transform: uppercase;
display: grid;
grid-auto-flow: column;
justify-content: space-between;
}
.charsheet .legacies .progress-boxes .progress-input {
width: 60px;
height: 60px;
}
.charsheet .legacies .experience-boxes {
display: flex;
justify-content: space-between;
}
.charsheet .legacies .title {
grid-column: 1;
font-size: 1.2em;
font-weight: bold;
padding: 0.3em 0em 0em 0em;
}
.charsheet .legacies .ten-marker {
justify-self: right;
padding: 0;
margin: 0;
height: fit-content;
}
.charsheet .legacies .legacy-roll {
margin: 0;
}
.charsheet .legacies .legacy-row-1 {
display: grid;
}
.charsheet .quests,
.charsheet .bonds,
.charsheet .discoveries {
display: grid;
grid-gap: 0.3em;
}
.charsheet label.experience-box {
border: 2px solid #000;
padding: 0;
display: inline-flex;
height: 1em;
margin: 0.2em 0em;
cursor: pointer;
}
.charsheet label.experience-box:nth-child(1) {
border-top-left-radius: 0.3em;
border-bottom-left-radius: 0.3em;
}
.charsheet label.experience-box:nth-child(1) div {
border-top-left-radius: 0.16em;
border-bottom-left-radius: 0.16em;
}
.charsheet label.experience-box:nth-last-child(1) {
border-top-right-radius: 0.3em;
border-bottom-right-radius: 0.3em;
}
.charsheet label.experience-box:nth-last-child(1) div {
border-top-right-radius: 0.16em;
border-bottom-right-radius: 0.16em;
}
.charsheet input.experience-box {
opacity: 0;
cursor: pointer;
vertical-align: top;
}
.charsheet .experience-fill {
height: 100%;
width: 100%;
background: #fff;
}
.charsheet input[type="checkbox"].experience-box:checked ~ .experience-fill {
background: #4c4d4f;
}
.charsheet input[type="checkbox"].experience-box:hover ~ .experience-fill {
background: #e6e7e8;
}
.ui-dialog .charsheet .repcontainer .repitem .itemcontrol .repcontrol_del {
float: right;
width: auto;
margin: 0;
height: auto;
}
.ui-dialog .charsheet .repcontainer .repitem .itemcontrol .repcontrol_move {
cursor: move;
width: auto;
margin: 0;
height: auto;
}
.sheet-rolltemplate-starforged_oracles .sheet-result-row {
padding: 0.5em;
}
.sheet-rolltemplate-starforged_oracles .sheet-oracle-dice {
align-self: center;
margin-right: 0.5em;
}
.sheet-rolltemplate-starforged_oracles .sheet-oracle-dice span {
border: 0px !important;
}
.sheet-rolltemplate-starforged_oracles .sheet-oracle-double-dice {
width: 5.7em;
text-align: center;
padding: 0.1em;
}
.sheet-rolltemplate-starforged_oracles .sheet-oracle-double-dice span {
border: 0px !important;
}
.sheet-rolltemplate-starforged_oracles .sheet-roll-container {
background: #33323c;
color: #fff;
font-size: 1em;
font-family: 'Montserrat', Arial, sans-serif;
border: 1px solid #000;
}
.sheet-rolltemplate-starforged_oracles .sheet-result-row {
display: flex;
justify-content: space-between;
}
.sheet-rolltemplate-starforged_oracles .sheet-roll-outcome {
background: #403f4b;
border: 1px solid #000;
}
.sheet-rolltemplate-starforged_oracles .inlinerollresult {
display: inline-block;
min-width: 1.5em;
text-align: center;
border: 2px solid #33323c;
background: transparent;
border-radius: 1em;
}
.sheet-rolltemplate-starforged_oracles .sheet-roll-outcome {
background: #403f4b;
border: 1px solid #000;
}
.sheet-rolltemplate-starforged_oracles .sheet-subheader {
text-transform: uppercase;
line-height: 1.5em;
font-weight: 700;
text-align: left;
padding: 0.4em 1em 0.4em 1em;
background-color: #23222b;
}
.sheet-rolltemplate-starforged_oracles .sheet-subfooter {
line-height: 1.5em;
font-weight: 700;
text-align: left;
padding: 0.4em 0em 0.4em 0em;
background-color: #403f4b;
width: 100%;
text-align: center;
}
.sheet-rolltemplate-starforged_oracles .sheet-result-body {
padding: 0.4em 1em 0.4em 1em;
}
.sheet-rolltemplate-starforged_moves .sheet-roll-container,
.sheet-rolltemplate-starforged_progress .sheet-roll-container {
background: #33323c;
color: #fff;
font-size: 1em;
font-family: 'Montserrat', Arial, sans-serif;
border: 1px solid #000;
}
.sheet-rolltemplate-starforged_moves .sheet-result-row,
.sheet-rolltemplate-starforged_progress .sheet-result-row {
display: flex;
justify-content: space-between;
}
.sheet-rolltemplate-starforged_moves .inlinerollresult,
.sheet-rolltemplate-starforged_progress .inlinerollresult {
display: inline-block;
min-width: 1.5em;
text-align: center;
border: 2px solid #33323c;
background: transparent;
border-radius: 1em;
}
.sheet-rolltemplate-starforged_progress .sheet-action-score .fullfail,
.sheet-rolltemplate-starforged_moves .sheet-action-score .fullfail {
border: 2px solid #d22e53;
}
.sheet-rolltemplate-starforged_progress .sheet-action-score .fullcrit,
.sheet-rolltemplate-starforged_moves .sheet-action-score .fullcrit {
border: 2px solid #42829e;
}
.sheet-rolltemplate-starforged_progress .sheet-challenge-dice .fullcrit,
.sheet-rolltemplate-starforged_moves .sheet-challenge-dice .fullcrit {
border: 2px solid #d22e53;
}
.sheet-rolltemplate-starforged_progress .sheet-challenge-dice .fullfail,
.sheet-rolltemplate-starforged_moves .sheet-challenge-dice .fullfail {
border: 2px solid #42829e;
}
.sheet-rolltemplate-starforged_progress .sheet-roll-outcome,
.sheet-rolltemplate-starforged_moves .sheet-roll-outcome {
background: #403f4b;
border: 1px solid #000;
}
.sheet-rolltemplate-starforged_moves .sheet-subheader,
.sheet-rolltemplate-starforged_progress .sheet-subheader {
line-height: 1.5em;
font-weight: 700;
text-align: left;
padding: 0.4em 1em 0.4em 1em;
background-color: #23222b;
text-transform: uppercase;
font-style: normal;
}
.sheet-rolltemplate-starforged_moves .sheet-subfooter,
.sheet-rolltemplate-starforged_progress .sheet-subfooter {
line-height: 1.5em;
font-weight: 700;
text-align: left;
padding: 0.4em 0em 0.4em 0em;
background-color: #403f4b;
width: 100%;
font-style: italic;
}
.sheet-rolltemplate-starforged_moves .sheet-result-body,
.sheet-rolltemplate-starforged_progress .sheet-result-body {
padding: 0.4em 1em 0.4em 1em;
}
.sheet-rolltemplate-starforged_moves .sheet-alert,
.sheet-rolltemplate-starforged_progress .sheet-alert {
margin: 0.2em 0.3em 0.2em 0.3em;
border-radius: 1em;
width: auto;
padding: 0.5em;
}
.sheet-rolltemplate-starforged_moves .sheet-opportunity,
.sheet-rolltemplate-starforged_progress .sheet-opportunity {
width: 1em;
margin: 0.3em 0.5em 0.3em 0.3em;
border-radius: 1em;
background-color: #40819f;
}
.sheet-rolltemplate-starforged_moves .sheet-strong-hit,
.sheet-rolltemplate-starforged_progress .sheet-strong-hit {
width: 1em;
margin: 0.3em 0.5em 0.3em 0.3em;
border-radius: 1em;
background-color: #63a9ca;
}
.sheet-rolltemplate-starforged_moves .sheet-weak-hit,
.sheet-rolltemplate-starforged_progress .sheet-weak-hit {
width: 1em;
margin: 0.3em 0.5em 0.3em 0.3em;
border-radius: 1em;
background-color: #83dbff;
}
.sheet-rolltemplate-starforged_moves .sheet-miss,
.sheet-rolltemplate-starforged_progress .sheet-miss {
width: 1em;
margin: 0.3em 0.5em 0.3em 0.3em;
border-radius: 1em;
background-color: #d8566f;
}
.sheet-rolltemplate-starforged_moves .sheet-complication,
.sheet-rolltemplate-starforged_progress .sheet-complication {
width: 1em;
margin: 0.3em 0.5em 0.3em 0.3em;
border-radius: 1em;
background-color: #d22e53;
}
.sheet-rolltemplate-starforged_moves .userscript-tcat,
.sheet-rolltemplate-starforged_progress .userscript-tcat {
font-weight: 700;
}
.sheet-rolltemplate-starforged_moves .sheet-momentum-title {
line-height: 22px;
}
.sheet-rolltemplate-starforged_moves .sheet-roll-container a[href^="!"],
.sheet-rolltemplate-starforged_moves .sheet-roll-container a[href^="~"] {
background-color: transparent;
padding: 5px;
color: #fff;
display: inline-block;
border: none;
text-transform: uppercase;
font-weight: bold;
width: 100%;
text-align: center;
}
.sheet-rolltemplate-starforged_moves .sheet-roll-button {
justify-content: center;
background: #5e5d6f;
border-radius: 0.4em;
margin: 0.2em;
}
.sheet-rolltemplate-starforged_moves .sheet-roll-button:hover {
background: #9290ad;
transition: 0.5s;
}