3101 lines
81 KiB
CSS
3101 lines
81 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;
|
|
color: #4c4d4f;
|
|
/* Fake radio/checkbox */
|
|
/* Remove dot from all radios _after_ selected one */
|
|
}
|
|
.charsheet h1,
|
|
.charsheet h2,
|
|
.charsheet h3,
|
|
.charsheet h4,
|
|
.charsheet h5,
|
|
.charsheet h6,
|
|
.charsheet p,
|
|
.charsheet span,
|
|
.charsheet label {
|
|
color: #4c4d4f;
|
|
}
|
|
.charsheet .surface {
|
|
color: #4c4d4f;
|
|
}
|
|
.charsheet .surface.roll-label,
|
|
.charsheet .surface.ship-category-info {
|
|
border: 2px solid #4c4d4f;
|
|
}
|
|
.charsheet .surface-2.roll-label {
|
|
border: 2px solid #4c4d4f;
|
|
}
|
|
.charsheet label.surface:hover,
|
|
.charsheet .static-btn:hover,
|
|
.charsheet .toggle-btn:hover,
|
|
.charsheet .page-label:hover {
|
|
background: #ccc;
|
|
transition: 0.5s ease;
|
|
}
|
|
.charsheet h3 {
|
|
color: #4c4d4f;
|
|
}
|
|
.charsheet .stat-set {
|
|
margin-left: 5em;
|
|
}
|
|
.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 .btn-input:checked ~ .btn-content {
|
|
background: #4c4d4f;
|
|
color: #fff;
|
|
}
|
|
.charsheet .oracle-table-preview p {
|
|
color: #fff;
|
|
}
|
|
.charsheet .ship-category-info h3 {
|
|
color: #fff;
|
|
}
|
|
.charsheet .progress-input:hover {
|
|
background: #3d3d3d;
|
|
transition: 0.3s ease;
|
|
}
|
|
.charsheet .list-group-container ul li.list-group-item > * {
|
|
background-color: #fff;
|
|
}
|
|
.charsheet .list-group-container ul li.list-group-item:nth-child(2n+1) > * {
|
|
background-color: #e4e4e4;
|
|
}
|
|
.charsheet .list-group-container .selected-move {
|
|
z-index: 3;
|
|
}
|
|
.charsheet .list-group-container .selected-move:checked ~ .move-name,
|
|
.charsheet .list-group-container .selected-move:checked ~ label.toggle-btn {
|
|
background: #434b4d;
|
|
color: #fff;
|
|
}
|
|
.charsheet .list-group-container label.toggle-btn:hover {
|
|
background-color: #ccc;
|
|
}
|
|
.charsheet .roll-resource-label:hover,
|
|
.charsheet input[type=checkbox].momentum-burn:hover ~ div.momentum-burn-back:hover,
|
|
.charsheet .momentum-box-input:hover ~ .momentum-box-back:hover {
|
|
background: #ccc;
|
|
transition: 0.5s ease;
|
|
}
|
|
.charsheet label.stat-toggle:hover {
|
|
background: #ccc;
|
|
transition: 0.5s ease;
|
|
}
|
|
.charsheet .progress-input-holder input[min],
|
|
.charsheet .large-progress-input-holder input[min],
|
|
.charsheet input[min] + span,
|
|
.charsheet input[min].large-input + span {
|
|
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-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 select {
|
|
-webkit-appearance: none;
|
|
-moz-appearance: none;
|
|
text-indent: 1px;
|
|
text-overflow: '';
|
|
}
|
|
.charsheet select::-ms-expand {
|
|
display: none;
|
|
}
|
|
.charsheet .btn-rounded {
|
|
border-radius: 0.5em;
|
|
}
|
|
.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;
|
|
background: 0;
|
|
}
|
|
.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 #4c4d4f;
|
|
border-radius: 0;
|
|
cursor: pointer;
|
|
background: 0;
|
|
text-shadow: none;
|
|
}
|
|
.charsheet .toggle-btn {
|
|
display: flex;
|
|
width: auto;
|
|
font-size: 14px;
|
|
padding: 0;
|
|
border: 2px solid #494a4c;
|
|
cursor: pointer;
|
|
}
|
|
.charsheet .toggle-btn .btn-content {
|
|
padding: 0.2em 0.2em 0.2em 0.2em;
|
|
width: 100%;
|
|
text-align: center;
|
|
}
|
|
.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 .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 #4c4d4f;
|
|
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 {
|
|
margin-bottom: 0.6em;
|
|
}
|
|
.charsheet .ship-grid .ship-category-info h3 {
|
|
background: #4c4d4f;
|
|
}
|
|
.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-radius: 1em;
|
|
}
|
|
.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 #4c4d4f;
|
|
}
|
|
.charsheet .resources .row2 {
|
|
display: flex;
|
|
grid-row: 2;
|
|
border: 1px solid #4c4d4f;
|
|
margin-bottom: 0.1em;
|
|
}
|
|
.charsheet .resource {
|
|
display: flex;
|
|
border: 2px solid #4c4d4f;
|
|
border-left: 1px solid #4c4d4f;
|
|
}
|
|
.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 #4c4d4f;
|
|
}
|
|
.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 #4c4d4f;
|
|
border-left: 1px solid #4c4d4f;
|
|
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 #4c4d4f;
|
|
}
|
|
.charsheet .impact-list {
|
|
display: flex;
|
|
flex-flow: row wrap;
|
|
justify-content: space-evenly;
|
|
}
|
|
.charsheet .impact-component {
|
|
margin-top: 1em;
|
|
display: flex;
|
|
flex-flow: wrap;
|
|
justify-content: space-between;
|
|
}
|
|
.charsheet .impact-btn {
|
|
width: 90%;
|
|
border-radius: 1em;
|
|
}
|
|
.charsheet .impact-btn input:checked~ .btn-content {
|
|
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: 23%;
|
|
border-radius: 0.5em;
|
|
padding: 0.3em;
|
|
}
|
|
.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;
|
|
background: 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;
|
|
border-radius: 0;
|
|
}
|
|
.charsheet .details-btn {
|
|
text-transform: uppercase;
|
|
display: inline-flex;
|
|
margin: 0.3em 0.5em;
|
|
border-radius: 2em;
|
|
}
|
|
.charsheet .details-btn .btn-content {
|
|
border-radius: 0.5em;
|
|
padding: 0em 1em;
|
|
}
|
|
.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 #4c4d4f;
|
|
background-color: #c0c0c0;
|
|
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 #4c4d4f;
|
|
font-weight: bold;
|
|
}
|
|
.charsheet .vow-container {
|
|
padding: 0em 0.5em 0.5em 0.5em;
|
|
border-radius: 0.5em;
|
|
margin: 0.5em 0em;
|
|
}
|
|
.charsheet input.vow-name {
|
|
border: 2px solid #4c4d4f;
|
|
border-radius: 0;
|
|
margin-bottom: 0.2em;
|
|
margin-top: 1em;
|
|
border: 2px solid #4c4d4f;
|
|
background: transparent;
|
|
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 {
|
|
color: #4c4d4f;
|
|
transition: 0.5s ease;
|
|
}
|
|
.charsheet .vows {
|
|
margin-bottom: 0px;
|
|
}
|
|
.charsheet .difficulty {
|
|
border-radius: 0.3em;
|
|
}
|
|
.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 .btn {
|
|
border-radius: 0.3em;
|
|
}
|
|
.charsheet .vow-name {
|
|
width: 100%;
|
|
font-weight: bold;
|
|
font-size: 14px;
|
|
}
|
|
.charsheet .difficulty {
|
|
border: 2px solid #4c4d4f;
|
|
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: #4c4d4f;
|
|
color: #fff;
|
|
}
|
|
.charsheet .btn-div {
|
|
display: inline;
|
|
}
|
|
.charsheet .progress-tab {
|
|
padding: 0.3em;
|
|
border-radius: 0.3em;
|
|
}
|
|
.charsheet .progress-tab .btn,
|
|
.charsheet .progress-tab span {
|
|
border-radius: 0.3em;
|
|
}
|
|
.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-row .btn {
|
|
border-radius: 0.3em;
|
|
}
|
|
.charsheet .progress-name {
|
|
width: 100%;
|
|
font-weight: bold;
|
|
font-size: 14px;
|
|
}
|
|
.charsheet input.progress-name {
|
|
background: transparent;
|
|
border: 2px solid #4c4d4f;
|
|
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: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 {
|
|
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%;
|
|
}
|
|
.charsheet input[type="checkbox"].challenge:checked ~ .challenge-fill {
|
|
background: #646464;
|
|
}
|
|
.charsheet input[type="checkbox"].challenge:hover ~ .challenge-fill {
|
|
background: #333;
|
|
}
|
|
.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 .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: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 .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 {
|
|
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 .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 #4c4d4f;
|
|
background: #4c4d4f;
|
|
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 #4c4d4f;
|
|
}
|
|
.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: 0.1em 0.4em;
|
|
width: auto;
|
|
cursor: pointer;
|
|
text-align: center;
|
|
line-height: 1.4em;
|
|
border-radius: 1em;
|
|
}
|
|
.charsheet label.stat-toggle {
|
|
border-radius: 1em;
|
|
margin: 0;
|
|
padding: 0;
|
|
border: 2px solid #4c4d4f;
|
|
text-align: center;
|
|
cursor: pointer;
|
|
}
|
|
.charsheet input[type=radio].stat-set:checked ~ div.stat-set {
|
|
visibility: visible;
|
|
height: auto;
|
|
opacity: 1;
|
|
transition: 0.2s ease;
|
|
display: flex;
|
|
width: auto;
|
|
}
|
|
.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 .move-preview-container .surface {
|
|
border-top-right-radius: 1.5em;
|
|
border-top-left-radius: 1.5em;
|
|
border-bottom-left-radius: 1em;
|
|
border-bottom-right-radius: 1.5em;
|
|
}
|
|
.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 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 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 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].asset-toggle:checked + div.asset-card {
|
|
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: 1em;
|
|
justify-items: center;
|
|
}
|
|
.charsheet .legacies .legacy {
|
|
padding: 0.5em;
|
|
border-radius: 0.5em;
|
|
width: 97%;
|
|
}
|
|
.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;
|
|
margin-bottom: 0.8em;
|
|
height: fit-content;
|
|
border-radius: 0.3em;
|
|
}
|
|
.charsheet .legacies .legacy-roll {
|
|
margin: 0;
|
|
border-radius: 0.3em;
|
|
}
|
|
.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 #4c4d4f;
|
|
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%;
|
|
}
|
|
.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;
|
|
}
|
|
.sheet-darkmode {
|
|
background: #1f1f1f;
|
|
color: #c0c0c0;
|
|
}
|
|
.sheet-darkmode .sheetform {
|
|
background-color: #1f1f1f;
|
|
}
|
|
.sheet-darkmode h1,
|
|
.sheet-darkmode h2,
|
|
.sheet-darkmode h3,
|
|
.sheet-darkmode h4,
|
|
.sheet-darkmode h5,
|
|
.sheet-darkmode h6,
|
|
.sheet-darkmode p,
|
|
.sheet-darkmode li,
|
|
.sheet-darkmode td,
|
|
.sheet-darkmode span,
|
|
.sheet-darkmode textarea {
|
|
color: #c0c0c0;
|
|
}
|
|
.sheet-darkmode label.surface:hover,
|
|
.sheet-darkmode .static-btn:hover,
|
|
.sheet-darkmode .toggle-btn:hover,
|
|
.sheet-darkmode .page-label:hover {
|
|
background: #3d3d3d;
|
|
transition: 0.5s ease;
|
|
}
|
|
.sheet-darkmode .surface {
|
|
background: #323232;
|
|
border: 0;
|
|
color: #c0c0c0;
|
|
box-shadow: 2px 2px 3px 1px #141414;
|
|
}
|
|
.sheet-darkmode .surface.roll-label {
|
|
border: 0;
|
|
}
|
|
.sheet-darkmode .surface span,
|
|
.sheet-darkmode .surface h3,
|
|
.sheet-darkmode .surface label {
|
|
color: #c0c0c0;
|
|
}
|
|
.sheet-darkmode .surface .progress-input-holder input[min],
|
|
.sheet-darkmode .surface .large-progress-input-holder input[min],
|
|
.sheet-darkmode .surface input[min] + span,
|
|
.sheet-darkmode .surface input[min].large-input + span {
|
|
background: #323232;
|
|
}
|
|
.sheet-darkmode .surface label.surface:hover,
|
|
.sheet-darkmode .surface .static-btn:hover,
|
|
.sheet-darkmode .surface .toggle-btn:hover,
|
|
.sheet-darkmode .surface .page-label:hover {
|
|
background: #464646;
|
|
transition: 0.5s ease;
|
|
}
|
|
.sheet-darkmode .btn-input:checked ~ .btn-content {
|
|
background: #c0c0c0;
|
|
color: #1f1f1f;
|
|
}
|
|
.sheet-darkmode label.surface-2:hover {
|
|
background: #5f5f5f;
|
|
}
|
|
.sheet-darkmode .surface-2 {
|
|
background: #4c4c4c;
|
|
border: 0;
|
|
color: #c0c0c0;
|
|
box-shadow: 2px 2px 3px 1px #1f1f1f;
|
|
}
|
|
.sheet-darkmode .surface-2 span {
|
|
color: #e8e8e8;
|
|
}
|
|
.sheet-darkmode .surface-2.roll-label {
|
|
background: #5f5f5f;
|
|
}
|
|
.sheet-darkmode .surface-2 .static-btn:hover,
|
|
.sheet-darkmode .surface-2 .toggle-btn:hover,
|
|
.sheet-darkmode .surface-2 .page-label:hover {
|
|
background: #5f5f5f;
|
|
transition: 0.5s ease;
|
|
}
|
|
.sheet-darkmode .stat-set {
|
|
margin-left: 5.8em;
|
|
}
|
|
.sheet-darkmode .write-in-container input,
|
|
.sheet-darkmode .ship .info input {
|
|
background: none;
|
|
color: #c0c0c0;
|
|
}
|
|
.sheet-darkmode .oracle-row:nth-child(2n+1),
|
|
.sheet-darkmode .oracle:nth-child(2n+1) {
|
|
background-color: #323232;
|
|
}
|
|
.sheet-darkmode button[type="roll"].roll-show {
|
|
color: #acacad;
|
|
}
|
|
.sheet-darkmode input[type=text] {
|
|
font-weight: 600;
|
|
}
|
|
.sheet-darkmode input[type=text]:focus {
|
|
outline: 3px solid #fd0;
|
|
outline-offset: 0;
|
|
box-shadow: inset 0 0 0 0px;
|
|
}
|
|
.sheet-darkmode input.vow-name,
|
|
.sheet-darkmode input.progress-name {
|
|
color: #c0c0c0;
|
|
}
|
|
.sheet-darkmode .difficulty input:checked ~ h5 {
|
|
background: #c0c0c0;
|
|
color: #1f1f1f;
|
|
}
|
|
.sheet-darkmode .difficulty h5 {
|
|
border-radius: 0.3em;
|
|
}
|
|
.sheet-darkmode .challenge-show:hover {
|
|
background: #3d3d3d;
|
|
transition: 0.5s ease;
|
|
}
|
|
.sheet-darkmode .progress-input:hover {
|
|
background: #3d3d3d;
|
|
transition: 0.3s ease;
|
|
}
|
|
.sheet-darkmode .list-group-container {
|
|
color: #c0c0c0;
|
|
}
|
|
.sheet-darkmode .list-group-container ul li.list-group-item > * {
|
|
background-color: #323232;
|
|
}
|
|
.sheet-darkmode .list-group-container ul li.list-group-item:nth-child(2n+1) > * {
|
|
background-color: #323232;
|
|
}
|
|
.sheet-darkmode .list-group-container .selected-move {
|
|
z-index: 3;
|
|
}
|
|
.sheet-darkmode .list-group-container .selected-move:checked ~ .move-name,
|
|
.sheet-darkmode .list-group-container .selected-move:checked ~ label.toggle-btn {
|
|
background: #c0c0c0 !important;
|
|
color: #1f1f1f !important;
|
|
}
|
|
.sheet-darkmode .list-group-container label.toggle-btn:hover {
|
|
background-color: #3d3d3d !important;
|
|
}
|
|
.sheet-darkmode .roll-resource-label:hover,
|
|
.sheet-darkmode label.stat-toggle:hover,
|
|
.sheet-darkmode input[type=checkbox].momentum-burn:hover ~ div.momentum-burn-back:hover,
|
|
.sheet-darkmode .momentum-box-input:hover ~ .momentum-box-back:hover {
|
|
background: #3d3d3d;
|
|
transition: 0.5s ease;
|
|
}
|
|
.sheet-darkmode .progress-input-holder input[min],
|
|
.sheet-darkmode .large-progress-input-holder input[min],
|
|
.sheet-darkmode input[min] + span,
|
|
.sheet-darkmode input[min].large-input + span {
|
|
background: #1f1f1f;
|
|
}
|
|
.sheet-darkmode .progress-input-holder input[min="1"]:valid + span {
|
|
display: block;
|
|
background-image: linear-gradient(45deg, transparent 0px, transparent calc(50% - 1px), #c0c0c0 calc(50% - 1px), #c0c0c0 calc(50% + 1px), transparent calc(50% + 1px));
|
|
}
|
|
.sheet-darkmode .progress-input-holder input[min="2"]:valid + span {
|
|
display: block;
|
|
background-image: linear-gradient(45deg, transparent 0px, transparent calc(50% - 1px), #c0c0c0 calc(50% - 1px), #c0c0c0 calc(50% + 1px), transparent calc(50% + 1px), transparent 100%), linear-gradient(135deg, transparent 0px, transparent calc(50% - 1px), #c0c0c0 calc(50% - 1px), #c0c0c0 calc(50% + 1px), transparent calc(50% + 1px), transparent 100%);
|
|
}
|
|
.sheet-darkmode .progress-input-holder input[min="3"]:valid + span {
|
|
display: block;
|
|
background-image: linear-gradient(45deg, transparent 0px, transparent calc(50% - 1px), #c0c0c0 calc(50% - 1px), #c0c0c0 calc(50% + 1px), transparent calc(50% + 1px), transparent 100%), linear-gradient(135deg, transparent 0px, transparent calc(50% - 1px), #c0c0c0 calc(50% - 1px), #c0c0c0 calc(50% + 1px), transparent calc(50% + 1px), transparent 100%), linear-gradient(90deg, transparent 0px, transparent calc(50% - 1px), #c0c0c0 calc(50% - 1px), #c0c0c0 calc(50% + 1px), transparent calc(50% + 1px), transparent 100%);
|
|
}
|
|
.sheet-darkmode .progress-input-holder input[min="4"]:valid + span {
|
|
display: block;
|
|
background-image: linear-gradient(45deg, transparent 0px, transparent calc(50% - 1px), #c0c0c0 calc(50% - 1px), #c0c0c0 calc(50% + 1px), transparent calc(50% + 1px), transparent 100%), linear-gradient(135deg, transparent 0px, transparent calc(50% - 1px), #c0c0c0 calc(50% - 1px), #c0c0c0 calc(50% + 1px), transparent calc(50% + 1px), transparent 100%), linear-gradient(90deg, transparent 0px, transparent calc(50% - 1px), #c0c0c0 calc(50% - 1px), #c0c0c0 calc(50% + 1px), transparent calc(50% + 1px), transparent 100%), linear-gradient(0deg, transparent 0px, transparent calc(50% - 1px), #c0c0c0 calc(50% - 1px), #c0c0c0 calc(50% + 1px), transparent calc(50% + 1px), transparent 100%);
|
|
}
|
|
.sheet-darkmode .large-progress-input-holder input[min="1"]:valid + span {
|
|
display: block;
|
|
background-image: linear-gradient(45deg, transparent 0px, transparent calc(50% - 1px), #c0c0c0 calc(50% - 1px), #c0c0c0 calc(50% + 1px), transparent calc(50% + 1px));
|
|
}
|
|
.sheet-darkmode .large-progress-input-holder input[min="2"]:valid + span {
|
|
display: block;
|
|
background-image: linear-gradient(45deg, transparent 0px, transparent calc(50% - 1px), #c0c0c0 calc(50% - 1px), #c0c0c0 calc(50% + 1px), transparent calc(50% + 1px), transparent 100%), linear-gradient(135deg, transparent 0px, transparent calc(50% - 1px), #c0c0c0 calc(50% - 1px), #c0c0c0 calc(50% + 1px), transparent calc(50% + 1px), transparent 100%);
|
|
}
|
|
.sheet-darkmode .large-progress-input-holder input[min="3"]:valid + span {
|
|
display: block;
|
|
background-image: linear-gradient(45deg, transparent 0px, transparent calc(50% - 1px), #c0c0c0 calc(50% - 1px), #c0c0c0 calc(50% + 1px), transparent calc(50% + 1px), transparent 100%), linear-gradient(135deg, transparent 0px, transparent calc(50% - 1px), #c0c0c0 calc(50% - 1px), #c0c0c0 calc(50% + 1px), transparent calc(50% + 1px), transparent 100%), linear-gradient(90deg, transparent 0px, transparent calc(50% - 1px), #c0c0c0 calc(50% - 1px), #c0c0c0 calc(50% + 1px), transparent calc(50% + 1px), transparent 100%);
|
|
}
|
|
.sheet-darkmode .large-progress-input-holder input[min="4"]:valid + span {
|
|
display: block;
|
|
background-image: linear-gradient(45deg, transparent 0px, transparent calc(50% - 1px), #c0c0c0 calc(50% - 1px), #c0c0c0 calc(50% + 1px), transparent calc(50% + 1px), transparent 100%), linear-gradient(135deg, transparent 0px, transparent calc(50% - 1px), #c0c0c0 calc(50% - 1px), #c0c0c0 calc(50% + 1px), transparent calc(50% + 1px), transparent 100%), linear-gradient(90deg, transparent 0px, transparent calc(50% - 1px), #c0c0c0 calc(50% - 1px), #c0c0c0 calc(50% + 1px), transparent calc(50% + 1px), transparent 100%), linear-gradient(0deg, transparent 0px, transparent calc(50% - 1px), #c0c0c0 calc(50% - 1px), #c0c0c0 calc(50% + 1px), transparent calc(50% + 1px), transparent 100%);
|
|
}
|