mirror of
https://github.com/Nighthawk42/roll20-character-sheets.git
synced 2026-08-30 03:40:32 +00:00
Morgdalaine Yaho
4df463c019
acts.pug files had backslash include statements that worked on windows but not macOS
1249 lines
27 KiB
CSS
1249 lines
27 KiB
CSS
@import url("https://fonts.googleapis.com/css2?family=Share+Tech+Mono&family=PT+Sans&family=PT+Sans+Narrow:wght@400;700&display=swap");
|
|
.align-left {
|
|
text-align: left !important;
|
|
}
|
|
|
|
.align-center {
|
|
text-align: center !important;
|
|
}
|
|
|
|
.align-right {
|
|
text-align: right !important;
|
|
}
|
|
|
|
.dotted-number input[type=number], .dotted-number input[type=number].stat-input {
|
|
border: 2px dotted #6d6c70;
|
|
}
|
|
|
|
.current-max-block {
|
|
display: inline-grid;
|
|
grid-template-columns: repeat(4, 1fr);
|
|
border-right: 2px solid #040404;
|
|
padding: 2px;
|
|
}
|
|
|
|
.current-max-block .current-max-text {
|
|
grid-column-end: span 2;
|
|
}
|
|
|
|
.current-max-block .stat-current-col, .current-max-block .stat-max-col {
|
|
flex-direction: column;
|
|
}
|
|
|
|
.current-max-block .stat-current-col label, .current-max-block .stat-max-col label {
|
|
text-align: center;
|
|
font-size: 0.8em !important;
|
|
}
|
|
|
|
.current-max-block .stat-current-col input, .current-max-block .stat-max-col input {
|
|
display: block;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.current-max-block .stat-current-col input[type=number], .current-max-block .stat-current-col input[type=number].stat-input, .current-max-block .stat-max-col input[type=number], .current-max-block .stat-max-col input[type=number].stat-input {
|
|
border: 2px dotted #6d6c70;
|
|
}
|
|
|
|
.current-max-block .stat-current-right-border {
|
|
border-right: 2px dotted #6d6c70;
|
|
}
|
|
|
|
*, ::before, ::after {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.charsheet {
|
|
min-width: 480;
|
|
margin: 0 auto !important;
|
|
padding: 15px;
|
|
font-weight: normal;
|
|
font-family: "PT Sans", "PT Sans", sans-serif;
|
|
}
|
|
|
|
.charsheet p {
|
|
font-family: "PT Sans", "PT Sans", sans-serif;
|
|
}
|
|
|
|
.charsheet h2 {
|
|
font-family: "Share Tech Mono", "PT Sans", sans-serif;
|
|
color: #c01b1e;
|
|
text-align: center;
|
|
}
|
|
|
|
.charsheet label {
|
|
font-family: "PT Sans Narrow", "PT Sans", sans-serif;
|
|
}
|
|
|
|
.charsheet .page-container {
|
|
display: flex;
|
|
}
|
|
|
|
.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 input::-webkit-outer-spin-button,
|
|
.charsheet input::-webkit-inner-spin-button {
|
|
-webkit-appearance: none;
|
|
margin: 0;
|
|
}
|
|
|
|
.charsheet input[type=number] {
|
|
-moz-appearance: textfield;
|
|
}
|
|
|
|
.charsheet input, .charsheet textarea {
|
|
box-sizing: border-box;
|
|
-moz-box-sizing: border-box;
|
|
background-color: #f3f4f5;
|
|
border: none;
|
|
border-radius: 0;
|
|
font-family: "PT Sans", "PT Sans", sans-serif;
|
|
font-size: 1em;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.charsheet input[type=number] {
|
|
text-align: center;
|
|
font-size: 1.2em;
|
|
}
|
|
|
|
.charsheet input[type=text], .charsheet input[type=date] {
|
|
width: -moz-available;
|
|
width: -webkit-fill-available;
|
|
width: fill-available;
|
|
}
|
|
|
|
.charsheet input[type=checkbox] {
|
|
box-sizing: border-box;
|
|
-moz-box-sizing: border-box;
|
|
background-color: #f3f4f5;
|
|
border: none;
|
|
border-bottom: 1px dotted #040404;
|
|
border-radius: 0;
|
|
font-family: "PT Sans", "PT Sans", sans-serif;
|
|
font-size: 0.8em;
|
|
text-decoration: none;
|
|
width: auto;
|
|
}
|
|
|
|
.charsheet textarea {
|
|
resize: none;
|
|
line-height: 2em;
|
|
height: auto;
|
|
overflow: hidden;
|
|
box-sizing: border-box;
|
|
-moz-box-sizing: border-box;
|
|
-webkit-box-sizing: border-box;
|
|
}
|
|
|
|
.charsheet label {
|
|
margin: 0;
|
|
}
|
|
|
|
.charsheet span.showhide:checked {
|
|
background-color: #6d6c70;
|
|
color: white;
|
|
transition: .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: 1em;
|
|
}
|
|
|
|
.charsheet span.showhide:hover {
|
|
cursor: pointer;
|
|
border-radius: 4px;
|
|
padding: 2px 4px;
|
|
background-color: #ccc;
|
|
color: #6d6c70;
|
|
transition: .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 button.btn.repcontrol_edit,
|
|
.charsheet button.btn.repcontrol_add {
|
|
width: auto;
|
|
height: auto;
|
|
border: 1px solid #040404;
|
|
border-radius: 0;
|
|
font-size: 0em;
|
|
text-shadow: none;
|
|
text-transform: uppercase;
|
|
padding: 0.2em;
|
|
margin: 0.3em;
|
|
font-family: "PT Sans", "PT Sans", sans-serif;
|
|
color: #040404;
|
|
background: #f3f4f5;
|
|
}
|
|
|
|
.charsheet button.btn.repcontrol_edit:hover,
|
|
.charsheet button.btn.repcontrol_add:hover {
|
|
color: #ffffff;
|
|
background: #c01b1e;
|
|
}
|
|
|
|
.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 .repcontrol button.repcontrol_add:before {
|
|
font-family: pictos;
|
|
font-size: 13px;
|
|
margin: 1em;
|
|
content: '&';
|
|
}
|
|
|
|
.charsheet .repcontrol button.repcontrol_edit:before {
|
|
font-family: pictos;
|
|
font-size: 13px;
|
|
margin: 1em;
|
|
content: '(';
|
|
}
|
|
|
|
.charsheet .repcontainer.editmode + .repcontrol button.repcontrol_edit:before {
|
|
content: ')';
|
|
}
|
|
|
|
.charsheet button.btn.repcontrol_edit {
|
|
margin-right: 3px;
|
|
}
|
|
|
|
.charsheet button.btn.repcontrol_add {
|
|
margin-left: 3px;
|
|
}
|
|
|
|
.charsheet .character-mode {
|
|
border: 4px solid #d80f17;
|
|
}
|
|
|
|
.charsheet .center {
|
|
text-align: center;
|
|
}
|
|
|
|
.charsheet .close-changelog {
|
|
border: 2px solid #6d6c70;
|
|
cursor: pointer;
|
|
padding: 0;
|
|
margin: 0.5em 0 0 0;
|
|
text-align: center;
|
|
}
|
|
|
|
.charsheet .close-changelog:hover {
|
|
background: #ccc;
|
|
transition: .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;
|
|
font-family: "PT Sans", "PT Sans", sans-serif;
|
|
}
|
|
|
|
.charsheet label.mode {
|
|
text-align: center;
|
|
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: white;
|
|
background-color: #d80f17;
|
|
transition: .5s ease;
|
|
}
|
|
|
|
.charsheet label.mode:hover .mode-image {
|
|
opacity: 0.7;
|
|
transition: .5s ease;
|
|
}
|
|
|
|
.charsheet input[type=radio].character-mode:checked ~ div.character-mode,
|
|
.charsheet input[type=radio].hub-mode:checked ~ div.hub-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].acts:checked ~ div.acts,
|
|
.charsheet input[type=radio].encounter-report:checked ~ div.encounter-report {
|
|
display: inline-grid;
|
|
visibility: visible;
|
|
height: auto;
|
|
opacity: 1;
|
|
transition: 0.2s ease;
|
|
}
|
|
|
|
.charsheet .sub-header {
|
|
margin-top: 1em;
|
|
border-bottom: 3px solid #6d6c70;
|
|
}
|
|
|
|
.charsheet .subtitle {
|
|
font-size: 0.8em;
|
|
font-family: "Share Tech Mono", "PT Sans", sans-serif;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.charsheet .stat-block label {
|
|
padding: 0 1em;
|
|
font-size: 1em;
|
|
text-transform: uppercase;
|
|
margin-bottom: 5px;
|
|
font-weight: normal;
|
|
}
|
|
|
|
.charsheet .component {
|
|
display: block;
|
|
}
|
|
|
|
.charsheet .rivals-header {
|
|
display: inline-grid;
|
|
grid-template-columns: calc((100% - 100px)/2) 100px calc((100% - 100px)/2);
|
|
background-color: #f3f4f5;
|
|
width: -moz-available;
|
|
width: -webkit-fill-available;
|
|
width: fill-available;
|
|
height: 100px;
|
|
padding: 0.5em;
|
|
margin-bottom: 1em;
|
|
}
|
|
|
|
.charsheet .rivals-header .rival {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.charsheet .rivals-header .logo {
|
|
background-image: url(https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Crossed-Fates/assets/square.png);
|
|
background-position: center;
|
|
background-repeat: no-repeat;
|
|
background-size: 100px 100px;
|
|
}
|
|
|
|
.charsheet .rivals-header .header-left .rival-stat, .charsheet .rivals-header .header-right .rival-stat {
|
|
display: inline-grid;
|
|
grid-template-columns: 20% 80%;
|
|
border-bottom: 4px solid #6d6c70;
|
|
align-items: center;
|
|
width: -moz-available;
|
|
width: -webkit-fill-available;
|
|
width: fill-available;
|
|
}
|
|
|
|
.charsheet .rivals-header .header-left .rival-stat .header-value, .charsheet .rivals-header .header-right .rival-stat .header-value {
|
|
margin-bottom: 0;
|
|
border: none;
|
|
}
|
|
|
|
.charsheet .rivals-header .header-left .rival-stat .header-label, .charsheet .rivals-header .header-right .rival-stat .header-label {
|
|
font-weight: bold;
|
|
font-size: 1.2em;
|
|
font-family: "PT Sans Narrow", "PT Sans", sans-serif;
|
|
}
|
|
|
|
.charsheet .rivals-header .header-right .rival-stat {
|
|
grid-template-columns: 80% 20%;
|
|
}
|
|
|
|
.charsheet .rivals-header .header-right .header-label {
|
|
text-align: right;
|
|
}
|
|
|
|
.charsheet .rivals-header .header-right .header-value {
|
|
text-align: right;
|
|
}
|
|
|
|
.charsheet .rivals-header .header-left .header-label:after,
|
|
.charsheet .rivals-header .header-right .header-label:before {
|
|
content: ' : ';
|
|
font-family: "PT Sans Narrow", "PT Sans", sans-serif;
|
|
}
|
|
|
|
.charsheet .footer {
|
|
display: inline-flex;
|
|
float: right;
|
|
}
|
|
|
|
.charsheet .footer .catscratcher {
|
|
align-self: center;
|
|
}
|
|
|
|
.charsheet .footer .catscratcher a {
|
|
font-size: 0.8em;
|
|
font-family: "Share Tech Mono", "PT Sans", sans-serif;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.charsheet .footer .catscratcher a:link {
|
|
color: #d80f17;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.charsheet .footer .catscratcher a:visited {
|
|
color: #d80f17;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.charsheet .footer .catscratcher a:hover {
|
|
color: #d80f17;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.charsheet .footer .catscratcher a:active {
|
|
color: #d80f17;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.charsheet .dotted-line {
|
|
border-bottom: 2px dotted #040404 !important;
|
|
}
|
|
|
|
.charsheet .nav-child {
|
|
width: 100%;
|
|
align-self: center;
|
|
margin: 0.1em;
|
|
}
|
|
|
|
.charsheet .nav-child div {
|
|
margin: 0;
|
|
padding: 0;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.charsheet .nav-child div:hover {
|
|
background: #6d6c70;
|
|
color: #ffffff;
|
|
transition: 0.5s ease;
|
|
}
|
|
|
|
.charsheet .page-button-back {
|
|
padding: 0.1em 0em 0.1em 0em;
|
|
font-weight: 600;
|
|
font-family: "Share Tech Mono";
|
|
background-color: #d6d7db;
|
|
color: #6d6c70;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.charsheet .page-button:checked ~ div.page-button-back {
|
|
background: #ffffff;
|
|
color: #d80f17;
|
|
font-size: 1.5em;
|
|
padding-top: 2px;
|
|
transition: 0.5s ease;
|
|
}
|
|
|
|
.charsheet .summary {
|
|
margin-top: 1em;
|
|
}
|
|
|
|
.charsheet .nav-row {
|
|
display: flex;
|
|
}
|
|
|
|
.charsheet .nav-bar {
|
|
align-items: center;
|
|
}
|
|
|
|
.charsheet label.page-label {
|
|
text-align: center;
|
|
}
|
|
|
|
.charsheet div.optional-nav-sites {
|
|
width: 0;
|
|
margin: 0;
|
|
transition: 0.5s ease;
|
|
}
|
|
|
|
.charsheet input.optional-nav-sites:checked ~ div.optional-nav-sites {
|
|
visibility: visible;
|
|
height: auto;
|
|
opacity: 1;
|
|
transition: 0.3s ease;
|
|
width: 100%;
|
|
margin: auto;
|
|
}
|
|
|
|
.charsheet input.act-zero:checked ~ div.act-zero,
|
|
.charsheet input.act-one:checked ~ div.act-one,
|
|
.charsheet input.act-two:checked ~ div.act-two,
|
|
.charsheet input.act-three:checked ~ div.act-three,
|
|
.charsheet input.act-final:checked ~ div.act-final {
|
|
visibility: visible;
|
|
height: auto;
|
|
opacity: 1;
|
|
transition: 0.7s ease;
|
|
}
|
|
|
|
.charsheet .acts {
|
|
width: 100%;
|
|
}
|
|
|
|
.charsheet .acts .nav-child {
|
|
width: 100%;
|
|
align-self: center;
|
|
margin: 0;
|
|
}
|
|
|
|
.charsheet .acts .nav-child div {
|
|
margin: 0;
|
|
padding: 0;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.charsheet .acts .nav-child div:hover {
|
|
background: transparent;
|
|
color: #6d6c70;
|
|
}
|
|
|
|
.charsheet .acts .page-button-back {
|
|
padding: 0;
|
|
font-weight: 600;
|
|
font-family: "Share Tech Mono";
|
|
background-color: transparent;
|
|
text-transform: uppercase;
|
|
font-size: 1em;
|
|
color: #d6d7db;
|
|
}
|
|
|
|
.charsheet .acts .page-button {
|
|
padding: 0;
|
|
}
|
|
|
|
.charsheet .acts .page-button:checked ~ div.page-button-back {
|
|
padding: 0;
|
|
background: transparent;
|
|
font-size: 1em;
|
|
color: #c01b1e;
|
|
}
|
|
|
|
.charsheet .acts .page-button:checked ~ div.page-button-back.final {
|
|
background-color: #d80f17;
|
|
color: #ffffff;
|
|
}
|
|
|
|
.charsheet .acts .nav-row {
|
|
display: flex;
|
|
background: none;
|
|
margin-top: 1em;
|
|
}
|
|
|
|
.charsheet .acts .nav-bar {
|
|
align-items: center;
|
|
}
|
|
|
|
.charsheet .acts .act-title-block {
|
|
text-align: right;
|
|
font-size: 1.2em;
|
|
margin-top: 1em;
|
|
}
|
|
|
|
.charsheet .acts .act-title-block label {
|
|
font-family: "Share Tech Mono", "PT Sans", sans-serif;
|
|
text-align: right;
|
|
}
|
|
|
|
.charsheet .acts .act-title-block .subtitle {
|
|
font-family: "Share Tech Mono", "PT Sans", sans-serif;
|
|
}
|
|
|
|
.charsheet .acts .act-prompt {
|
|
display: inline-grid;
|
|
grid-template-columns: 20% auto;
|
|
text-align: justify;
|
|
font-family: "PT Sans Narrow", "PT Sans", sans-serif;
|
|
}
|
|
|
|
.charsheet .acts .act-prompt .prompt-text {
|
|
padding: 1em;
|
|
grid-column-start: 2;
|
|
font-style: italic;
|
|
}
|
|
|
|
.charsheet .acts .together-block span, .charsheet .acts .label-left span, .charsheet .acts .label-right span {
|
|
padding: 0 1em;
|
|
background-color: #c01b1e;
|
|
color: #ffffff;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.charsheet .acts .rival-block {
|
|
grid-template-columns: 47% 6% 47%;
|
|
grid-template-rows: auto auto auto;
|
|
display: grid;
|
|
width: -moz-available;
|
|
width: -webkit-fill-available;
|
|
width: fill-available;
|
|
}
|
|
|
|
.charsheet .acts .rival-block .label-left, .charsheet .acts .rival-block .rival-left {
|
|
grid-column-start: 1;
|
|
}
|
|
|
|
.charsheet .acts .rival-block .label-right, .charsheet .acts .rival-block .rival-right {
|
|
grid-column-start: 3;
|
|
}
|
|
|
|
.charsheet .acts .rival-block .label-right {
|
|
text-align-last: right;
|
|
}
|
|
|
|
.charsheet .acts .rival-block .rival-subtitle {
|
|
grid-column: span 3;
|
|
}
|
|
|
|
.charsheet .acts .rival-block .label-left, .charsheet .acts .rival-block .label-right {
|
|
grid-row-start: 1;
|
|
}
|
|
|
|
.charsheet .acts .rival-block .rival-left, .charsheet .acts .rival-block .rival-right {
|
|
grid-row-start: 3;
|
|
}
|
|
|
|
.charsheet .acts .rival-block .rival-right {
|
|
text-align: right;
|
|
}
|
|
|
|
.charsheet .acts .rival-block .rival-right label {
|
|
text-align: right;
|
|
padding-left: 0;
|
|
padding-right: 1em;
|
|
align-self: flex-end;
|
|
}
|
|
|
|
.charsheet .acts .rival-block .rival-right input, .charsheet .acts .rival-block .rival-right textarea {
|
|
text-align: right;
|
|
}
|
|
|
|
.charsheet .acts .journaling-block, .charsheet .acts .final-instructions {
|
|
margin: 2em 0.5em;
|
|
margin-left: 2em;
|
|
padding: 0.5em;
|
|
background-color: #f3f4f5;
|
|
border-right: 8px solid #d80f17;
|
|
text-align: justify;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.charsheet .acts .journaling-block label, .charsheet .acts .final-instructions label {
|
|
font-family: "Share Tech Mono", "PT Sans", sans-serif;
|
|
text-align: right;
|
|
}
|
|
|
|
.charsheet .acts .disagreement {
|
|
color: #6d6c70;
|
|
text-align: justify;
|
|
margin: 1em 6em;
|
|
}
|
|
|
|
.charsheet .acts .final-instructions {
|
|
font-size: 1.2em;
|
|
font-family: "Share Tech Mono", "PT Sans", sans-serif;
|
|
}
|
|
|
|
.charsheet .acts .warning {
|
|
text-transform: uppercase;
|
|
text-align: center;
|
|
color: #c01b1e;
|
|
margin: 0 5em;
|
|
font-family: "Share Tech Mono", "PT Sans", sans-serif;
|
|
}
|
|
|
|
.charsheet .acts .warning span {
|
|
color: #ffffff;
|
|
background-color: #c01b1e;
|
|
padding: 0 1em;
|
|
font-size: 3em;
|
|
margin-bottom: 1em;
|
|
}
|
|
|
|
.charsheet .encounter-block {
|
|
display: inline-grid;
|
|
grid-template-columns: 5% 90% 5%;
|
|
height: auto;
|
|
margin-top: 0.5em;
|
|
width: -moz-available;
|
|
width: -webkit-fill-available;
|
|
width: fill-available;
|
|
}
|
|
|
|
.charsheet .encounter-block input {
|
|
font-family: "Share Tech Mono", "PT Sans", sans-serif;
|
|
border: 2px solid transparent;
|
|
background-color: transparent;
|
|
}
|
|
|
|
.charsheet .encounter-block input::placeholder {
|
|
color: #6d6c70;
|
|
padding: 0 1em;
|
|
opacity: 1;
|
|
/* Firefox */
|
|
}
|
|
|
|
.charsheet .encounter-block input::-ms-input-placeholder {
|
|
color: #6d6c70;
|
|
padding: 0 1em;
|
|
}
|
|
|
|
.charsheet .encounter-block input:-ms-input-placeholder {
|
|
color: #6d6c70;
|
|
padding: 0 1em;
|
|
}
|
|
|
|
.charsheet .encounter-block .encounter-row-1 {
|
|
grid-column-start: 1;
|
|
grid-column-end: 4;
|
|
display: flex;
|
|
width: -moz-available;
|
|
width: -webkit-fill-available;
|
|
width: fill-available;
|
|
}
|
|
|
|
.charsheet .encounter-block .encounter-row-1 input {
|
|
border: none;
|
|
padding: 0;
|
|
}
|
|
|
|
.charsheet .encounter-block .gray-diamond {
|
|
grid-column-start: 1;
|
|
grid-column-end: 4;
|
|
display: flex;
|
|
justify-content: space-evenly;
|
|
width: -moz-available;
|
|
width: -webkit-fill-available;
|
|
width: fill-available;
|
|
}
|
|
|
|
.charsheet .encounter-block .gray-diamond span {
|
|
width: 20px;
|
|
height: 20px;
|
|
background-color: #6d6c70;
|
|
border: 2px solid #6d6c70;
|
|
margin: -10px 0 5px;
|
|
transform: rotate(45deg);
|
|
/* Legacy vendor prefixes that you probably don't need... */
|
|
/* Safari */
|
|
-webkit-transform: rotate(45deg);
|
|
/* Firefox */
|
|
-moz-transform: rotate(45deg);
|
|
/* IE */
|
|
-ms-transform: rotate(45deg);
|
|
/* Opera */
|
|
-o-transform: rotate(45deg);
|
|
}
|
|
|
|
.charsheet .encounter-block .encounter-inputs {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-evenly;
|
|
background-color: #ffffff;
|
|
width: -moz-available;
|
|
width: -webkit-fill-available;
|
|
width: fill-available;
|
|
}
|
|
|
|
.charsheet .encounter-block .encounter-inputs .encounter-row-2, .charsheet .encounter-block .encounter-inputs .encounter-row-3 {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
width: -moz-available;
|
|
width: -webkit-fill-available;
|
|
width: fill-available;
|
|
}
|
|
|
|
.charsheet .encounter-block .right input {
|
|
text-align: right;
|
|
}
|
|
|
|
.charsheet .encounter-block .encounter-taken-recovered.left,
|
|
.charsheet .encounter-block .encounter-details.right {
|
|
background-color: #f3f4f5;
|
|
transform: skew(45deg, 0deg);
|
|
}
|
|
|
|
.charsheet .encounter-block .encounter-taken-recovered.left .reverse-skew,
|
|
.charsheet .encounter-block .encounter-details.right .reverse-skew {
|
|
transform: skew(-45deg, 0deg);
|
|
}
|
|
|
|
.charsheet .encounter-block .encounter-taken-recovered.right,
|
|
.charsheet .encounter-block .encounter-details.left {
|
|
background-color: #f3f4f5;
|
|
transform: skew(-45deg, 0deg);
|
|
}
|
|
|
|
.charsheet .encounter-block .encounter-taken-recovered.right .reverse-skew,
|
|
.charsheet .encounter-block .encounter-details.left .reverse-skew {
|
|
transform: skew(45deg, 0deg);
|
|
}
|
|
|
|
.charsheet .encounter-block .encounter-context {
|
|
margin-bottom: 5px;
|
|
width: -moz-available;
|
|
width: -webkit-fill-available;
|
|
width: fill-available;
|
|
}
|
|
|
|
.charsheet .encounter-block .encounter-success-defeat {
|
|
align-self: center;
|
|
text-align: center;
|
|
}
|
|
|
|
.charsheet .encounter-block .encounter-success-defeat.left {
|
|
transform: rotate(-45deg);
|
|
/* Legacy vendor prefixes that you probably don't need... */
|
|
/* Safari */
|
|
-webkit-transform: rotate(-45deg);
|
|
/* Firefox */
|
|
-moz-transform: rotate(-45deg);
|
|
/* IE */
|
|
-ms-transform: rotate(-45deg);
|
|
/* Opera */
|
|
-o-transform: rotate(-45deg);
|
|
}
|
|
|
|
.charsheet .encounter-block .encounter-success-defeat.right {
|
|
transform: rotate(45deg);
|
|
/* Legacy vendor prefixes that you probably don't need... */
|
|
/* Safari */
|
|
-webkit-transform: rotate(45deg);
|
|
/* Firefox */
|
|
-moz-transform: rotate(45deg);
|
|
/* IE */
|
|
-ms-transform: rotate(45deg);
|
|
/* Opera */
|
|
-o-transform: rotate(45deg);
|
|
}
|
|
|
|
.charsheet .encounter-block .encounter-success-defeat input[type='radio'] {
|
|
box-sizing: border-box;
|
|
appearance: none;
|
|
outline: 4px solid #d6d7db;
|
|
background: #d6d7db;
|
|
border: 4px solid #d6d7db;
|
|
width: 20px;
|
|
height: 20px;
|
|
}
|
|
|
|
.charsheet .encounter-block .encounter-success-defeat input[type='radio']:checked {
|
|
background: #040404;
|
|
border: 4px solid #d6d7db;
|
|
}
|
|
|
|
.charsheet .encounter-block .encounter-taken-recovered, .charsheet .encounter-block .encounter-details {
|
|
width: 47%;
|
|
}
|
|
|
|
.charsheet .encounter-block .encounter-date.left {
|
|
margin-right: 0.5em;
|
|
}
|
|
|
|
.charsheet .encounter-block .encounter-date input {
|
|
text-align: center;
|
|
color: #d80f17;
|
|
font-weight: bold;
|
|
width: 8em;
|
|
}
|
|
|
|
.charsheet .encounter-block .encounter-details {
|
|
margin-top: 5px;
|
|
}
|
|
|
|
.charsheet .encounter-report {
|
|
width: -moz-available;
|
|
width: -webkit-fill-available;
|
|
width: fill-available;
|
|
}
|
|
|
|
.charsheet .loss-increment .left {
|
|
transform: rotate(-45deg);
|
|
/* Legacy vendor prefixes that you probably don't need... */
|
|
/* Safari */
|
|
-webkit-transform: rotate(-45deg);
|
|
/* Firefox */
|
|
-moz-transform: rotate(-45deg);
|
|
/* IE */
|
|
-ms-transform: rotate(-45deg);
|
|
/* Opera */
|
|
-o-transform: rotate(-45deg);
|
|
color: orange;
|
|
}
|
|
|
|
.charsheet .loss-increment .right {
|
|
transform: rotate(45deg);
|
|
/* Legacy vendor prefixes that you probably don't need... */
|
|
/* Safari */
|
|
-webkit-transform: rotate(45deg);
|
|
/* Firefox */
|
|
-moz-transform: rotate(45deg);
|
|
/* IE */
|
|
-ms-transform: rotate(45deg);
|
|
/* Opera */
|
|
-o-transform: rotate(45deg);
|
|
color: magenta;
|
|
}
|
|
|
|
.charsheet .losses-block {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
padding: 0 10px;
|
|
height: 100px;
|
|
width: -moz-available;
|
|
width: -webkit-fill-available;
|
|
width: fill-available;
|
|
}
|
|
|
|
.charsheet .losses-block .losses-label {
|
|
text-align: center;
|
|
text-transform: uppercase;
|
|
font-size: 1.2em;
|
|
font-family: "Share Tech Mono", "PT Sans", sans-serif;
|
|
}
|
|
|
|
.charsheet .losses-block .losses-counter {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
width: -moz-available;
|
|
width: -webkit-fill-available;
|
|
width: fill-available;
|
|
}
|
|
|
|
.charsheet .losses-block .losses-counter .loss-increments {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
width: -moz-available;
|
|
width: -webkit-fill-available;
|
|
width: fill-available;
|
|
}
|
|
|
|
.charsheet .losses-block .losses-counter .loss-increments label {
|
|
display: flex;
|
|
justify-content: space-evenly;
|
|
transform: rotate(45deg);
|
|
/* Legacy vendor prefixes that you probably don't need... */
|
|
/* Safari */
|
|
-webkit-transform: rotate(45deg);
|
|
/* Firefox */
|
|
-moz-transform: rotate(45deg);
|
|
/* IE */
|
|
-ms-transform: rotate(45deg);
|
|
/* Opera */
|
|
-o-transform: rotate(45deg);
|
|
}
|
|
|
|
.charsheet .losses-block .losses-counter .loss-increments label input[type='checkbox'] {
|
|
box-sizing: border-box;
|
|
appearance: none;
|
|
outline: 4px solid #d6d7db;
|
|
background: #d6d7db;
|
|
border: 4px solid #d6d7db;
|
|
width: 20px;
|
|
height: 20px;
|
|
}
|
|
|
|
.charsheet .losses-block .losses-counter .loss-increments label input[type='checkbox'].checkbox-size-2 {
|
|
width: 26px;
|
|
height: 26px;
|
|
}
|
|
|
|
.charsheet .losses-block .losses-counter .loss-increments label input[type='checkbox'].checkbox-size-2:checked {
|
|
border: 5px solid #d6d7db;
|
|
}
|
|
|
|
.charsheet .losses-block .losses-counter .loss-increments label input[type='checkbox'].checkbox-size-3 {
|
|
width: 32px;
|
|
height: 32px;
|
|
}
|
|
|
|
.charsheet .losses-block .losses-counter .loss-increments label input[type='checkbox'].checkbox-size-3:checked {
|
|
border: 6px solid #d6d7db;
|
|
}
|
|
|
|
.charsheet .losses-block .losses-counter .loss-increments label input[type='checkbox'].checkbox-size-4 {
|
|
width: 38px;
|
|
height: 38px;
|
|
}
|
|
|
|
.charsheet .losses-block .losses-counter .loss-increments label input[type='checkbox'].checkbox-size-4:checked {
|
|
border: 7px solid #d6d7db;
|
|
}
|
|
|
|
.charsheet .losses-block .losses-counter .loss-increments label input[type='checkbox'].checkbox-size-5 {
|
|
width: 42px;
|
|
height: 42px;
|
|
}
|
|
|
|
.charsheet .losses-block .losses-counter .loss-increments label input[type='checkbox'].checkbox-size-5:checked {
|
|
border: 8px solid #d6d7db;
|
|
}
|
|
|
|
.charsheet .losses-block .losses-counter .loss-increments label input[type='checkbox'].checkbox-size-6 {
|
|
width: 54px;
|
|
height: 54px;
|
|
}
|
|
|
|
.charsheet .losses-block .losses-counter .loss-increments label input[type='checkbox'].checkbox-size-6:checked {
|
|
border: 9px solid #d6d7db;
|
|
}
|
|
|
|
.charsheet .losses-block .losses-counter .loss-increments label input[type='checkbox']:checked {
|
|
background: #040404;
|
|
border: 4px solid #d6d7db;
|
|
}
|
|
|
|
.charsheet .final-result-block {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-evenly;
|
|
text-transform: uppercase;
|
|
font-size: 1.2em;
|
|
height: 6em;
|
|
margin-top: 1em;
|
|
font-family: "Share Tech Mono", "PT Sans", sans-serif;
|
|
width: -moz-available;
|
|
width: -webkit-fill-available;
|
|
width: fill-available;
|
|
}
|
|
|
|
.charsheet .final-result-block .final-win-row, .charsheet .final-result-block .final-loss-row {
|
|
display: inline-grid;
|
|
justify-content: space-between;
|
|
width: -moz-available;
|
|
width: -webkit-fill-available;
|
|
width: fill-available;
|
|
}
|
|
|
|
.charsheet .final-result-block .final-win-row {
|
|
grid-template-columns: 5% 40% 40% 5%;
|
|
}
|
|
|
|
.charsheet .final-result-block .final-loss-row {
|
|
grid-template-columns: 10% 35% 35% 10%;
|
|
margin-top: 10px;
|
|
}
|
|
|
|
.charsheet .final-result-block .result-label, .charsheet .final-result-block .result-radio {
|
|
width: -moz-available;
|
|
width: -webkit-fill-available;
|
|
width: fill-available;
|
|
}
|
|
|
|
.charsheet .final-result-block .result-label {
|
|
border-bottom: 4px solid #d6d7db;
|
|
}
|
|
|
|
.charsheet .final-result-block .result-label.left {
|
|
text-align: left;
|
|
}
|
|
|
|
.charsheet .final-result-block .result-label.right {
|
|
text-align: right;
|
|
}
|
|
|
|
.charsheet .final-result-block .result-radio {
|
|
text-align-last: center;
|
|
}
|
|
|
|
.charsheet .final-result-block .result-radio.left {
|
|
transform: rotate(-45deg);
|
|
/* Legacy vendor prefixes that you probably don't need... */
|
|
/* Safari */
|
|
-webkit-transform: rotate(-45deg);
|
|
/* Firefox */
|
|
-moz-transform: rotate(-45deg);
|
|
/* IE */
|
|
-ms-transform: rotate(-45deg);
|
|
/* Opera */
|
|
-o-transform: rotate(-45deg);
|
|
}
|
|
|
|
.charsheet .final-result-block .result-radio.right {
|
|
transform: rotate(45deg);
|
|
/* Legacy vendor prefixes that you probably don't need... */
|
|
/* Safari */
|
|
-webkit-transform: rotate(45deg);
|
|
/* Firefox */
|
|
-moz-transform: rotate(45deg);
|
|
/* IE */
|
|
-ms-transform: rotate(45deg);
|
|
/* Opera */
|
|
-o-transform: rotate(45deg);
|
|
}
|
|
|
|
.charsheet .final-result-block .result-radio input[type=radio] {
|
|
box-sizing: border-box;
|
|
appearance: none;
|
|
outline: 4px solid #d6d7db;
|
|
background: #d6d7db;
|
|
border: 4px solid #d6d7db;
|
|
width: 20px;
|
|
height: 20px;
|
|
}
|
|
|
|
.charsheet .final-result-block .result-radio input[type=radio]:checked {
|
|
background: #040404;
|
|
}
|
|
|
|
.ui-dialog .charsheet .button-container {
|
|
display: flex;
|
|
}
|
|
|
|
.ui-dialog .charsheet .button-container span {
|
|
font-size: 13px;
|
|
text-transform: uppercase;
|
|
font-family: "Share Tech Mono", "PT Sans", sans-serif;
|
|
padding-left: 5px;
|
|
}
|
|
|
|
.ui-dialog .charsheet button[type=roll] {
|
|
align-items: left;
|
|
color: #c01b1e;
|
|
font-weight: normal;
|
|
text-decoration: none;
|
|
background: none;
|
|
background-image: none;
|
|
border: none;
|
|
box-shadow: none;
|
|
text-shadow: none;
|
|
padding: 0;
|
|
margin: 0;
|
|
text-align: center;
|
|
}
|
|
|
|
.ui-dialog .charsheet button[type=roll]:hover {
|
|
transition: .5s ease;
|
|
}
|
|
|
|
.ui-dialog .charsheet button[type=roll]::before {
|
|
font-family: 'dicefontd6';
|
|
content: 'L';
|
|
}
|
|
|
|
.ui-dialog .charsheet .repcontainer .repitem {
|
|
margin: 5px;
|
|
text-shadow: none;
|
|
}
|
|
|
|
.ui-dialog .charsheet .repcontainer .repitem .btn {
|
|
font-size: 0.8em;
|
|
border-radius: 0;
|
|
border: 1px solid #c01b1e;
|
|
color: #c01b1e;
|
|
background: #ffffff;
|
|
text-shadow: 0;
|
|
}
|
|
|
|
.ui-dialog .charsheet .repcontainer .repitem .itemcontrol {
|
|
text-shadow: none;
|
|
}
|
|
|
|
.ui-dialog .charsheet .repcontainer .repitem .itemcontrol .btn-danger {
|
|
background-color: #d80f17;
|
|
color: #ffffff;
|
|
border: 1px solid transparent;
|
|
}
|
|
|
|
.ui-dialog .charsheet .repcontainer .repitem .itemcontrol .repcontrol_del, .ui-dialog .charsheet .repcontainer .repitem .itemcontrol .repcontrol_move {
|
|
text-shadow: none;
|
|
}
|
|
|
|
.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;
|
|
}
|
|
|
|
input[type=text].repeating-input {
|
|
border-bottom: 2px dotted #c01b1e !important;
|
|
margin: 0;
|
|
}
|
|
|
|
.sheet-rolltemplate-sheetname {
|
|
display: block;
|
|
}
|