Files
roll20-character-sheets/D&Z-Apocalypse/DZ-Apocalypse.css
T
Spirito35 9d82115b70 Patchnote
AC calculation fixed
2025-09-07 22:27:11 +02:00

2461 lines
60 KiB
CSS

/* -------------------------- IMPORTS -------------------------- */
@import url("https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400..700;1,400..700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200");
/* -------------------------- BASE STYLES -------------------------- */
.charsheet {
--main-color: #990000;
--secondary-color: #1e2021;
--accent-color: #a57979;
--background-grey: #f1f1f1;
--border-grey: #d9d9d9;
--text-grey: #9b9b9b;
--h4color: #4f4f4f;
--blackandwhite: white;
--blackandwhite2: #1f1f1f;
--main-font: "Lora", serif !important;
--standard-font: "Helvetica Neue", Helvetica, Arial, sans-serif !important;
--secondary-font: "Questrial", sans-serif;
}
.sheet-darkmode .charsheet {
--main-color: #990000;
--secondary-color: #d6e0e6;
--accent-color: #a57979;
--background-grey: #2d2d2d;
--border-grey: #454545;
--text-grey: #8d8d8d;
--h4color: #9b9b9b;
--blackandwhite: #1f1f1f;
--blackandwhite2: white;
--main-font: "Lora", serif !important;
--standard-font: "Helvetica Neue", Helvetica, Arial, sans-serif !important;
--secondary-font: "Questrial", sans-serif;
}
.sheet-darkmode .charactersheet {
background-color: var(--blackandwhite);
}
* {
box-sizing: border-box;
}
/* -------------------------- DARK MODE STYLES -------------------------- */
input[disabled],
select[disabled],
textarea[disabled],
input[readonly],
select[readonly],
textarea[readonly] {
cursor: default;
border-color: var(--border-grey) !important;
color: var(--text-grey) !important;
background-color: var(--background-grey);
}
/* -------------------------- UI DIALOG STYLES -------------------------- */
button,
input,
select,
span,
label,
option,
textarea,
button[type="roll"] {
width: 100% !important;
background-image: none;
border-radius: 4px;
font-size: 12px !important;
-moz-appearance: textfield;
appearance: none;
text-align: center;
text-shadow: none;
box-shadow: none;
outline: none;
display: inline-block;
padding: 4px;
border: none;
font-weight: 500;
line-height: 18px;
color: var(--secondary-color);
border-color: var(--border-grey) !important;
background-color: var(--background-grey);
border: 1px solid;
}
button,
input,
select,
span,
label,
option,
button[type="roll"] {
height: 18px !important;
margin: 0;
padding: 0;
}
.charsheet label {
background-color: transparent !important;
border: none !important;
margin: 0;
padding: 0;
text-align: center;
}
input[type="number"] {
-moz-appearance: textfield !important;
appearance: textfield !important;
}
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
-webkit-appearance: none !important;
margin: 0 !important;
}
.ui-dialog .charsheet input[type="checkbox"]:checked + span {
color: var(--main-color);
align-items: center;
max-height: 18px;
}
.ui-dialog .charsheet .sheet-features-traits2 input[type="checkbox"]:checked + span {
color: var(--secondary-color);
}
.ui-dialog .charsheet input[type="checkbox"]:hover + span {
color: var(--main-color);
align-items: center;
max-height: 18px;
}
/* -------------------------- INPUT STYLES -------------------------- */
input[type="number"] {
-moz-appearance: textfield;
appearance: none;
text-align: center;
}
input::-webkit-inner-spin-button,
input::-webkit-outer-spin-button {
-webkit-appearance: none;
margin: 0;
}
input.sheet-with-arrows[type="number"] {
-moz-appearance: initial;
appearance: initial;
text-align: center;
}
input.sheet-with-arrows::-webkit-inner-spin-button,
input.sheet-with-arrows::-webkit-outer-spin-button {
-webkit-appearance: initial;
margin: 0;
}
/* -------------------------- PLACEHOLDERS -------------------------- */
::placeholder {
text-align: center;
font-size: 10px;
line-height: 10px;
font-family: "Montserrat" !important;
text-align: left !important;
justify-content: left;
}
/* -------------------------- BUTTON STYLES -------------------------- */
.btn,
.btn.btn-default,
input[type="checkbox"] {
border-color: var(--border-grey) !important;
max-height: 18px;
border-radius: 4px;
}
input[type="checkbox"]:focus {
outline: none;
box-shadow: none;
}
.sheet-features-traits2 input[type="checkbox"]:checked {
background-color: var(--secondary-color) !important;
}
input[type="checkbox"]:checked {
background-color: var(--main-color);
}
.ui-dialog .charsheet button[type="roll"],
input[type="checkbox"]:checked {
padding: 0;
margin: 0;
border: 1px solid #999 !important;
z-index: 2;
max-height: 18px;
}
.ui-dialog .charsheet button[type="roll"]:hover,
input[type="checkbox"]:hover {
background-color: var(--main-color);
color: white;
}
.ui-dialog .charsheet button[type="roll"]:before {
text-align: center;
font-family: Material Symbols Outlined !important;
font-size: 13px;
vertical-align: middle;
position: relative;
top: -1px;
}
/* -------------------------- BUTTON ICON STYLES -------------------------- */
button[type="roll"].sheet-button-none:before {
content: "" !important;
}
button[type="roll"].sheet-button-description:before {
content: "description" !important;
}
button[type="roll"].sheet-button-attack:before {
content: "swords" !important;
}
/* -------------------------- SPECIAL -------------------------- */
.sheet-main-skills input[type="checkbox"]:checked::before,
.sheet-main-skills input[type="checkbox"]::before,
.sheet-main-savingthrows input[type="checkbox"]:checked::before,
.sheet-main-savingthrows input[type="checkbox"]::before,
.sheet-main-weapons input[name="attr_weapon_active"]:checked::before,
.sheet-main-weapons input[name="attr_weapon_active"]::before {
content: "";
}
.sheet-main-skills input[type="checkbox"]:checked,
.sheet-main-savingthrows input[type="checkbox"]:checked,
.sheet-main-weapons input[name="attr_weapon_active"]:checked {
border-radius: 100%;
width: 10px !important;
height: 10px !important;
}
.sheet-main-skills input[type="checkbox"],
.sheet-main-savingthrows input[type="checkbox"],
.sheet-main-weapons input[name="attr_weapon_active"] {
border-radius: 100%;
width: 10px !important;
height: 10px !important;
}
input[type="checkbox"]:checked::before {
content: "✔";
color: white;
font-size: 10px;
}
input[type="checkbox"]::before {
content: "✘";
color: grey;
font-size: 10px;
}
/* -------------------------- TEXT AREA STYLES -------------------------- */
.charsheet textarea {
width: 100% !important;
border: none;
height: 16px;
line-height: 14px !important;
text-shadow: none;
font-family: var(--secondary-font);
font-weight: normal;
border: 1px solid var(--border-grey);
box-shadow: none;
resize: vertical;
overflow: hidden;
padding: 0 5px;
margin: 0;
}
/* -------------------------- ROLL TEMPLATE -------------------------- */
.sheet-rolltemplate-dzapocalypse,
.sheet-rolltemplate-dzapocalypse-description {
--main-color: #990000;
--secondary-color: #1e2021;
--accent-color: #ac7d7d;
--background-grey: #f1f1f1;
--border-grey: #d9d9d9;
--text-grey: #9b9b9b;
--h4color: #4f4f4f;
--blackandwhite: white;
--blackandwhite2: #1f1f1f;
--main-font: "Lora", serif !important;
--standard-font: "Helvetica Neue", Helvetica, Arial, sans-serif !important;
--secondary-font: "Questrial", sans-serif;
background-color: #31383f;
font-size: 16px;
border-top-left-radius: 6px;
border-top-right-radius: 6px;
}
.sheet-rolltemplate-dzapocalypse .sheet-triplecolumn {
grid-template-columns: 10fr 20px 10fr;
padding: 10px 50px !important;
column-gap: 0px !important;
}
.sheet-rolltemplate-dzapocalypse-description .sheet-extra-button,
.sheet-rolltemplate-dzapocalypse .sheet-extra-button {
background-color: transparent;
padding: 0;
border: none;
width: 100%;
text-align: center;
}
.sheet-rolltemplate-dzapocalypse-description .sheet-template-rolls,
.sheet-rolltemplate-dzapocalypse .sheet-template-rolls {
display: grid;
gap: 5px;
}
.sheet-rolltemplate-dzapocalypse-description .sheet-template-rolls.sheet-template-rolls2,
.sheet-rolltemplate-dzapocalypse .sheet-template-rolls.sheet-template-rolls2 {
grid-template-columns: repeat(2, 1fr);
column-gap: 5px;
width: 50%;
margin: 0 auto;
}
.sheet-rolltemplate-dzapocalypse-description .sheet-template-rolls.sheet-template-rolls3,
.sheet-rolltemplate-dzapocalypse .sheet-template-rolls.sheet-template-rolls3 {
grid-template-columns: 1fr;
column-gap: 5px;
border-top: solid 1px var(--main-color);
padding-top: 10px;
}
.sheet-rolltemplate-dzapocalypse-description .sheet-template-rolls.sheet-template-rolls4,
.sheet-rolltemplate-dzapocalypse .sheet-template-rolls.sheet-template-rolls4 {
grid-template-columns: 1fr 1.25fr;
column-gap: 5px;
width: 100%;
padding: 5px 0!important;
}
.sheet-rolltemplate-dzapocalypse-description .sheet-template-rolls.sheet-template-rolls4 .sheet-template-rolls5,
.sheet-rolltemplate-dzapocalypse .sheet-template-rolls.sheet-template-rolls4 .sheet-template-rolls5 {
flex-direction: row;
display: flex;
margin: auto;
}
.sheet-rolltemplate-dzapocalypse-description .sheet-template-header,
.sheet-rolltemplate-dzapocalypse .sheet-template-header {
display: grid;
padding: 10px 5px 10px 5px;
margin: 0;
background-color: var(--blackandwhite);
text-align: center;
position: relative;
overflow: hidden;
}
.sheet-rolltemplate-dzapocalypse-description .sheet-header-bloc,
.sheet-rolltemplate-dzapocalypse .sheet-header-bloc {
display: grid;
gap: 5px;
padding: 10px 5px;
margin: 0;
text-align: center;
position: relative;
overflow: hidden;
border-bottom: solid 1px var(--main-color);
}
.sheet-rolltemplate-dzapocalypse-description .sheet-template-header::before,
.sheet-rolltemplate-dzapocalypse .sheet-template-header::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-image: url("https://www.spirito.fr/DL/RP/dzapocalypse/bottom-background3.png");
background-size: cover;
background-position: center;
border-image: url("https://www.spirito.fr/DL/RP/dzapocalypse/BlocFrame-DZ55.png");
border-image-slice: 25;
border-image-width: 18px;
border-image-outset: 0px;
border-image-repeat: stretch stretch;
pointer-events: none;
z-index: 0;
}
.sheet-rolltemplate-dzapocalypse-description .sheet-rolltemplate-darkmode .sheet-template-header::before,
.sheet-rolltemplate-dzapocalypse .sheet-rolltemplate-darkmode .sheet-template-header::before {
background-image: url("https://www.spirito.fr/DL/RP/dzapocalypse/bottom-background3.png");
border-image: url("https://www.spirito.fr/DL/RP/dzapocalypse/BlocFrame-DZ55_DM.png");
}
.sheet-rolltemplate-dzapocalypse-description .sheet-template-header > *,
.sheet-rolltemplate-dzapocalypse .sheet-template-header > * {
position: relative;
z-index: 1;
}
.sheet-rolltemplate-dzapocalypse-description .sheet-template-roll span,
.sheet-rolltemplate-dzapocalypse .sheet-template-roll span {
background-color: var(--blackandwhite2)!important;
border: 2px solid #1f1f1f !important;
text-align: center;
}
.sheet-rolltemplate-dzapocalypse-description .sheet-dmg,
.sheet-rolltemplate-dzapocalypse .sheet-dmg {
margin-bottom: 8px !important;
}
.sheet-rolltemplate-dzapocalypse-description .inlinerollresult,
.sheet-rolltemplate-dzapocalypse-description span,
.sheet-rolltemplate-dzapocalypse .inlinerollresult,
.sheet-rolltemplate-dzapocalypse span {
background-color: transparent !important;
border: none !important;
padding: 3px 5px !important;
font-size: 24px;
align-items: center;
justify-content: center;
color: var(--secondary-color);
}
.sheet-rolltemplate-dzapocalypse-description .sheet-description3 .inlinerollresult,
.sheet-rolltemplate-dzapocalypse-description .sheet-description3 span,
.sheet-rolltemplate-dzapocalypse .sheet-description3 .inlinerollresult,
.sheet-rolltemplate-dzapocalypse .sheet-description3 span {
font-size: 14px;
}
.sheet-rolltemplate-dzapocalypse-description span,
.sheet-rolltemplate-dzapocalypse span {
font-family: var(--main-font);
font-size: 18px;
}
.sheet-rolltemplate-dzapocalypse .sheet-description,
.sheet-rolltemplate-dzapocalypse-description .sheet-description {
font-size: 12px;
text-align: center;
font-style: italic;
line-height: 12px;
color: var(--secondary-color) !important;
margin: 0;
padding:0px;
text-align:left;
}
.sheet-rolltemplate-dzapocalypse-description .sheet-effect,
.sheet-rolltemplate-dzapocalypse .sheet-effect {
font-size: 12px;
text-align: center;
font-style: italic;
line-height: 12px;
color: var(--secondary-color) !important;
margin: -10px 0 10px;
}
.sheet-rolltemplate-dzapocalypse-description .sheet-template-rolls .sheet-roll-detail,
.sheet-rolltemplate-dzapocalypse .sheet-template-rolls .sheet-roll-detail {
display: grid;
grid-template-columns: repeat(4, 1fr) !important;
width: 40%;
margin: 0 auto;
}
.sheet-rolltemplate-dzapocalypse-description .sheet-template-rolls .sheet-roll-detail.sheet-roll-detail2,
.sheet-rolltemplate-dzapocalypse .sheet-template-rolls .sheet-roll-detail.sheet-roll-detail2 {
display: grid;
grid-template-columns: repeat(2, 1fr) !important;
width: 20%;
margin: 0 auto;
}
.sheet-rolltemplate-dzapocalypse-description .sheet-template-rolls .sheet-roll-detail .sheet-roll span,
.sheet-rolltemplate-dzapocalypse .sheet-template-rolls .sheet-roll-detail .sheet-roll span {
font-size: 18px;
}
.sheet-rolltemplate-dzapocalypse-description .sheet-template-rolls .sheet-description2,
.sheet-rolltemplate-dzapocalypse .sheet-template-rolls .sheet-description2 {
grid-column: 1/-1;
text-align: center;
font-size: 12px !important;
text-transform: uppercase;
opacity: 1;
color: var(--main-color) !important;
font-weight: bolder;
margin-top: 8px;
}
.sheet-rolltemplate-dzapocalypse-description .sheet-template-rolls .sheet-description2 span,
.sheet-rolltemplate-dzapocalypse .sheet-template-rolls .sheet-description2 span {
color: var(--blackandwhite2);
}
.sheet-rolltemplate-dzapocalypse-description .sheet-template-rolls .sheet-description3,
.sheet-rolltemplate-dzapocalypse .sheet-template-rolls .sheet-description3 {
grid-column: 1/-1;
text-align: center;
font-size: 14px !important;
text-transform: uppercase;
opacity: 1;
color: var(--secondary-color) !important;
border-bottom: solid 1px var(--main-color);
padding: 5px 0;
font-weight: bolder;
}
.sheet-rolltemplate-dzapocalypse-description .sheet-template-rolls .sheet-description3 span,
.sheet-rolltemplate-dzapocalypse .sheet-template-rolls .sheet-description3 span {
color: var(--blackandwhite2);
font-family: var(--secondary-font);
}
.sheet-rolltemplate-dzapocalypse-description .sheet-effect .inlinerollresult,
.sheet-rolltemplate-dzapocalypse .sheet-effect .inlinerollresult {
font-size: 14px !important;
padding: 0 !important;
color: rgb(63 63 63) !important;
}
.sheet-rolltemplate-dzapocalypse-description .sheet-roll,
.sheet-rolltemplate-dzapocalypse .sheet-roll {
font-size: 18px;
text-align: center;
font-family: var(--main-font);
font-weight: 600;
vertical-align: super;
margin-bottom: 10px;
}
.sheet-rolltemplate-dzapocalypse-description .sheet-roll.sheet-dmg,
.sheet-rolltemplate-dzapocalypse .sheet-roll.sheet-dmg {
margin-bottom: 10px !important;
}
.sheet-rolltemplate-dzapocalypse-description .sheet-template-header .sheet-headerstyle1,
.sheet-rolltemplate-dzapocalypse .sheet-template-header .sheet-headerstyle1 {
font-family: var(--main-font);
font-size: 16px;
font-weight: bolder;
color: var(--secondary-color);
padding: 0 10px !important;
text-transform: uppercase;
margin: -5px 0 0 0;
}
.sheet-rolltemplate-dzapocalypse-description .sheet-template-header .sheet-headerstyle1 {
margin: -5px 0 5px 0;
}
.sheet-rolltemplate-dzapocalypse-description .sheet-template-header .sheet-headerstyle2,
.sheet-rolltemplate-dzapocalypse .sheet-template-header .sheet-headerstyle2 {
font-size: 12px;
font-weight: normal;
color: var(--main-color) !important;
padding: 0 !important;
font-family: var(--standard-font);
margin-top: -4px;
}
.sheet-rolltemplate-dzapocalypse-description .sheet-template-header .sheet-headerstyle123 {
color: var(--secondary-color)!important;
}
.sheet-rolltemplate-dzapocalypse-description .sheet-template-header .sheet-headerstyle3,
.sheet-rolltemplate-dzapocalypse .sheet-template-header .sheet-headerstyle3 {
font-size: 12px;
font-weight: normal;
color: var(--main-color) !important;
padding: 0 !important;
font-family: var(--standard-font);
}
.sheet-rolltemplate-dzapocalypse-description .sheet-template-header .sheet-headerstyle3,
.sheet-rolltemplate-dzapocalypse .sheet-template-header .sheet-headerstyle3 {
font-family: var(--standard-font);
font-size: 8px;
text-transform: uppercase;
font-weight: bold;
align-items: center;
display: grid;
color: var(--secondary-color) !important;
line-height: 8px;
justify-content: right;
}
.sheet-rolltemplate-dzapocalypse-description .sheet-template-header .sheet-headerstyle4,
.sheet-rolltemplate-dzapocalypse .sheet-template-header .sheet-headerstyle4 {
font-family: var(--standard-font);
font-size: 10px;
text-transform: uppercase;
font-weight: bold;
align-items: center;
display: grid;
color: var(--main-color) !important;
margin: 0;
padding: 0!important;
line-height: 10px;
justify-content: left;
}
.sheet-rolltemplate-dzapocalypse-description .sheet-roll.sheet-initiative {
font-size: 16px !important;
}
.sheet-rolltemplate-dzapocalypse .sheet-allgrey .inlinerollresult {
opacity: 0.25;
color: var(--blackandwhite2) !important;
}
.sheet-rolltemplate-dzapocalypse .inlinerollresult.importantroll,
.sheet-rolltemplate-dzapocalypse .sheet-allblu .inlinerollresult {
color: var(--secondary-color) !important;
}
.sheet-rolltemplate-dzapocalypse .inlinerollresult.fullfail,
.sheet-rolltemplate-dzapocalypse .sheet-allgreen .inlinerollresult {
color:var(--secondary-color) !important;
}
.sheet-rolltemplate-dzapocalypse .inlinerollresult.fullcrit,
.sheet-rolltemplate-dzapocalypse .sheet-allred .inlinerollresult {
color:var(--secondary-color) !important;
}
.sheet-rolltemplate-dzapocalypse-description .sheet-extra-button,
.sheet-rolltemplate-dzapocalypse .sheet-extra-button {
background-color: transparent;
padding: 0;
border: none;
width: 100%;
text-align: center;
border-top: solid 1px var(--main-color);
padding: 8px 0 0 0;
}
.sheet-rolltemplate-dzapocalypse-description .sheet-extra-button a,
.sheet-rolltemplate-dzapocalypse .sheet-extra-button a {
background-color: transparent!important;
font-size: 10px;
text-transform: uppercase;
padding: 0px 25px;
border-radius: 15px;
border-color: var(--main-color) !important;
color: var(--secondary-color) !important;
}
.sheet-rolltemplate-dzapocalypse-description .sheet-extra-button a:hover,
.sheet-rolltemplate-dzapocalypse .sheet-extra-button a:hover {
background-color: var(--text-grey) !important;
color: var(--blackandwhite)!important;
}
/* -------------------------- H STYLE -------------------------- */
h3,
h4 {
text-align: center;
text-transform: uppercase;
font-weight: 500;
align-content: center;
color: var(--secondary-color);
}
h3 {
font-family: var(--main-font) !important;
font-size: 11px !important;
line-height: 11px;
color: var(--blackandwhite2);
font-weight: bolder !important;
}
.sheet-main-statistiques h3 {
font-size: 14px !important;
line-height: 14px;
}
h4 {
font-family: var(--standard-font) !important;
font-size: 10px !important;
line-height: 10px;
font-weight: normal;
color: var(--h4color);
}
h4.sheet-minititles {
border-top: 1px solid var(--h4color);
padding-top: 6px !important;
margin: 5px auto 0 auto !important;
width: calc(100% + 10px);
left: -5px;
position: relative;
}
h4.sheet-minititles2 {
border-bottom: 1px solid var(--h4color);
padding-bottom: 3px !important;
margin: 7px auto -5px auto!important;
width: calc(100% + -10px);
left: 0px;
position: relative;
}
.sheet-maingrid-area-vehicle h4.sheet-minititles2 {
margin: 10px auto -2px auto!important;
}
.sheet-main-weapons .sheet-oneline h4.sheet-minititles2 {
margin: 5px auto 10px auto!important
}
/* -------------------------- SPECIAL ALIGN STYLE -------------------------- */
.sheet-left {
text-align: left !important;
padding-left: 5px !important;
}
.sheet-right {
text-align: right !important;
padding-right: 5px !important;
}
.sheet-center {
text-align: center !important;
padding-left: 25px;
}
.sheet-charsheet .sheet-hidden {
display: none !important;
}
/* -------------------------- REP CONTROL CONTAINER SECTION -------------------------- */
.charsheet .repcontrol {
width: 100%;
display: flex;
position: relative;
z-index: 99;
justify-content: space-between;
align-items: center;
height: 18px;
max-height: 18px;
margin: auto !important;
}
.repcontrol_add,
.repcontrol_edit,
.repcontrol_move,
.repcontrol_del {
opacity: 0.6;
border: 0;
}
.repcontrol_add:hover,
.repcontrol_edit:hover,
.repcontrol_move:hover,
.repcontrol_del:hover {
outline: none;
opacity: 1;
}
.repcontrol_add:focus,
.repcontrol_edit:focus,
.repcontrol_move:focus,
.repcontrol_del:focus {
outline: none;
}
.repcontrol_move {
height: 11px;
margin-top: 2px;
line-height: 11px;
}
.repcontrol_del {
width: 30px;
height: 22px;
margin-top: 2px;
line-height: 12px;
font-family: "Pictos" !important;
}
.charsheet .repcontrol_add,
.charsheet .repcontrol_edit {
border-color: transparent;
text-shadow: none;
color: transparent;
background: transparent;
box-shadow: none;
margin: 0;
padding: 0;
height: 18px;
}
.charsheet .repcontrol_add:focus-visible,
.charsheet .repcontrol_edit:focus-visible {
border: none !important;
}
.repcontrol_add:before {
content: "+";
visibility: visible;
padding: 2px 0 0 0;
border: none;
font-family: pictos;
font-size: 14px;
color: #555;
text-align: right;
display: block;
width: 100%;
}
.repcontrol_edit:after {
content: "y";
visibility: visible;
padding: 0;
border: none;
font-family: pictos;
font-size: 16px;
color: #555;
text-align: left;
display: block;
width: 100%;
position: relative;
top: -16px !important;
height: fit-content;
}
.editmode ~ .repcontrol .repcontrol_edit:after {
content: "y";
}
.charsheet .repcontainer .repitem .itemcontrol {
display: none;
position: absolute;
top: 0;
height: auto !important;
background-color: transparent !important;
z-index: 9999 !important;
margin: 0;
}
.charsheet .repcontainer .repitem .itemcontrol .repcontrol_del {
height: 100%;
width: 49% !important;
opacity: 0.75;
background-color: var(--main-color);
color:white!important;
align-items: center;
display: grid;
padding: 0;
background-image: none;
margin: 0;
z-index: 9999 !important;
}
.repcontrol_del:hover {
background-color: grey !important;
}
.btn-danger:hover,
.btn-danger:active,
.btn-danger.active,
.btn-danger.disabled,
.btn-danger[disabled] {
background-color: grey;
}
.charsheet .repcontainer .repitem .itemcontrol .repcontrol_move {
height: 100%;
width: 49% !important;
opacity: 0.75;
background-color: var(--main-color);
color: var(--secondary-color);
align-items: center;
display: grid;
padding: 0;
background-image: none;
margin: 0;
height: 18px;
z-index: 9999 !important;
}
.repcontrol_move:hover {
background-color: grey !important;
}
/* -------------------------- COGS -------------------------- */
.sheet-cogs-container {
position: relative;
display: inline-block;
width: 100%;
height: 18px;
}
.sheet-cogs-input {
position: absolute;
top: 0;
left: 0;
opacity: 0;
z-index: 2;
}
.sheet-cogs-icon {
font-family: "Pictos";
text-transform: none !important;
font-size: 12px !important;
position: relative;
z-index: 1;
margin: 0;
padding: 0;
color: var(--text-grey);
font-weight: bold;
background-color: transparent;
border: none;
}
/* -------------------------- INPUTS -------------------------- */
input.sheet-inputchar,
select.sheet-inputchar {
height: 32px !important;
max-height: 32px;
font-size: 22px !important;
font-family: var(--main-font);
font-weight: bolder;
background-color: transparent !important;
border: none;
}
input.sheet-inputchar2 {
height: 20px !important;
max-height: 16px;
max-width: 45px;
font-size: 12px !important;
font-family: var(--secondary-font);
color:var(--text-grey)!important;
}
.sheet-button-holder input {
position: absolute;
height: 100%;
width: 100%;
opacity: 0;
}
/* -------------------------- RADIO INPUTS -------------------------- */
input[type="radio"] {
opacity: 0;
position: absolute;
width: 100% !important;
top: 0;
left: 0;
z-index: 99;
}
.radio-button {
position: relative;
text-align: center !important;
width: 100% !important;
background-image: none;
border-radius: 4px;
-moz-appearance: textfield;
appearance: none;
text-shadow: none;
box-shadow: none;
outline: none;
height: 18px !important;
border-color: var(--border-grey) !important;
background-color: var(--background-grey);
border: 1px solid;
font-family: var(--secondary-font);
font-size: 12px !important;
text-transform: uppercase;
line-height: 18px;
font-weight: 100 !important;
margin: 0;
padding: 0;
}
input[type="radio"]:checked + .radio-button {
background-color: var(--main-color);
color: white!important;
margin: 0;
padding: 0;
font-weight: bolder !important;
}
button:hover ~ span,
input:hover ~ span {
color: var(--main-color) !important;
}
/* -------------------------- DIVS -------------------------- */
.sheet-charsheet div {
display: grid;
grid-template-rows: 1fr;
text-align: center;
align-content: center;
align-items: center;
gap: 5px;
position: relative;
width: 100%;
margin: 0 auto;
padding: 0;
position: relative;
}
.sheet-standardbox::before {
display: flex;
flex-direction: column-reverse;
position: relative;
z-index: 0;
min-width: 0;
overflow: hidden;
}
.sheet-standardbox::before {
border-style: solid;
border-width: 15px 15px;
box-sizing: border-box;
content: "";
display: block;
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
}
.sheet-standardbox11.sheet-standardbox::before {
border-image: url("https://www.spirito.fr/DL/RP/dzapocalypse/BlocFrame-DZ51.png") 22 fill stretch !important;
}
.sheet-standardbox12.sheet-standardbox::before {
border-image: url("https://www.spirito.fr/DL/RP/dzapocalypse/BlocFrame-DZ51.png") 22 fill stretch !important;
transform: scaleY(-1);
}
.sheet-standardbox13.sheet-standardbox::before {
border-image: url("https://www.spirito.fr/DL/RP/dzapocalypse/BlocFrame-DZ51.png") 22 fill stretch !important;
transform: scaleX(-1);
}
.sheet-standardbox14.sheet-standardbox::before {
border-image: url("https://www.spirito.fr/DL/RP/dzapocalypse/BlocFrame-DZ51.png") 22 fill stretch !important;
transform: scale(-1, -1);
}
.sheet-standardbox21.sheet-standardbox::before {
border-image: url("https://www.spirito.fr/DL/RP/dzapocalypse/BlocFrame-DZ52.png") 22 fill stretch !important;
}
.sheet-standardbox22.sheet-standardbox::before {
border-image: url("https://www.spirito.fr/DL/RP/dzapocalypse/BlocFrame-DZ52.png") 22 fill stretch !important;
transform: scaleY(-1);
}
.sheet-standardbox23.sheet-standardbox::before {
border-image: url("https://www.spirito.fr/DL/RP/dzapocalypse/BlocFrame-DZ52.png") 22 fill stretch !important;
transform: scaleX(-1);
}
.sheet-standardbox24.sheet-standardbox::before {
border-image: url("https://www.spirito.fr/DL/RP/dzapocalypse/BlocFrame-DZ52.png") 22 fill stretch !important;
transform: scale(-1, -1);
}
.sheet-standardbox31.sheet-standardbox::before {
border-image: url("https://www.spirito.fr/DL/RP/dzapocalypse/BlocFrame-DZ53.png") 22 fill stretch !important;
}
.sheet-standardbox32.sheet-standardbox::before {
border-image: url("https://www.spirito.fr/DL/RP/dzapocalypse/BlocFrame-DZ53.png") 22 fill stretch !important;
transform: scaleY(-1);
}
.sheet-standardbox33.sheet-standardbox::before {
border-image: url("https://www.spirito.fr/DL/RP/dzapocalypse/BlocFrame-DZ53.png") 22 fill stretch !important;
transform: scaleX(-1);
}
.sheet-standardbox34.sheet-standardbox::before {
border-image: url("https://www.spirito.fr/DL/RP/dzapocalypse/BlocFrame-DZ53.png") 22 fill stretch !important;
transform: scale(-1, -1);
}
.sheet-standardbox41.sheet-standardbox::before {
border-image: url("https://www.spirito.fr/DL/RP/dzapocalypse/BlocFrame-DZ54.png") 22 fill stretch !important;
}
.sheet-standardbox42.sheet-standardbox::before {
border-image: url("https://www.spirito.fr/DL/RP/dzapocalypse/BlocFrame-DZ54.png") 22 fill stretch !important;
transform: scaleY(-1);
}
.sheet-standardbox43.sheet-standardbox::before {
border-image: url("https://www.spirito.fr/DL/RP/dzapocalypse/BlocFrame-DZ54.png") 22 fill stretch !important;
transform: scaleX(-1);
}
.sheet-standardbox44.sheet-standardbox::before {
border-image: url("https://www.spirito.fr/DL/RP/dzapocalypse/BlocFrame-DZ54.png") 22 fill stretch !important;
transform: scale(-1, -1);
}
.sheet-standardbox51.sheet-standardbox::before {
border-image: url("https://www.spirito.fr/DL/RP/dzapocalypse/BlocFrame-DZ55.png") 22 fill stretch !important;
}
.sheet-standardbox52.sheet-standardbox::before {
border-image: url("https://www.spirito.fr/DL/RP/dzapocalypse/BlocFrame-DZ55.png") 22 fill stretch !important;
transform: scaleY(-1);
}
.sheet-standardbox53.sheet-standardbox::before {
border-image: url("https://www.spirito.fr/DL/RP/dzapocalypse/BlocFrame-DZ55.png") 22 fill stretch !important;
transform: scaleX(-1);
}
.sheet-standardbox54.sheet-standardbox::before {
border-image: url("https://www.spirito.fr/DL/RP/dzapocalypse/BlocFrame-DZ55.png") 22 fill stretch !important;
transform: scale(-1, -1);
}
/* -------------------------- DARKMODE -------------------------- */
.sheet-darkmode .sheet-standardbox11.sheet-standardbox::before {
border-image: url("https://www.spirito.fr/DL/RP/dzapocalypse/BlocFrame-DZ51_DM.png") 22 fill stretch !important;
}
.sheet-darkmode .sheet-standardbox12.sheet-standardbox::before {
border-image: url("https://www.spirito.fr/DL/RP/dzapocalypse/BlocFrame-DZ51_DM.png") 22 fill stretch !important;
transform: scaleY(-1);
}
.sheet-darkmode .sheet-standardbox13.sheet-standardbox::before {
border-image: url("https://www.spirito.fr/DL/RP/dzapocalypse/BlocFrame-DZ51_DM.png") 22 fill stretch !important;
transform: scaleX(-1);
}
.sheet-darkmode .sheet-standardbox14.sheet-standardbox::before {
border-image: url("https://www.spirito.fr/DL/RP/dzapocalypse/BlocFrame-DZ51_DM.png") 22 fill stretch !important;
transform: scale(-1, -1);
}
.sheet-darkmode .sheet-standardbox21.sheet-standardbox::before {
border-image: url("https://www.spirito.fr/DL/RP/dzapocalypse/BlocFrame-DZ52_DM.png") 22 fill stretch !important;
}
.sheet-darkmode .sheet-standardbox22.sheet-standardbox::before {
border-image: url("https://www.spirito.fr/DL/RP/dzapocalypse/BlocFrame-DZ52_DM.png") 22 fill stretch !important;
transform: scaleY(-1);
}
.sheet-darkmode .sheet-standardbox23.sheet-standardbox::before {
border-image: url("https://www.spirito.fr/DL/RP/dzapocalypse/BlocFrame-DZ52_DM.png") 22 fill stretch !important;
transform: scaleX(-1);
}
.sheet-darkmode .sheet-standardbox24.sheet-standardbox::before {
border-image: url("https://www.spirito.fr/DL/RP/dzapocalypse/BlocFrame-DZ52_DM.png") 22 fill stretch !important;
transform: scale(-1, -1);
}
.sheet-darkmode .sheet-standardbox31.sheet-standardbox::before {
border-image: url("https://www.spirito.fr/DL/RP/dzapocalypse/BlocFrame-DZ53_DM.png") 22 fill stretch !important;
}
.sheet-darkmode .sheet-standardbox32.sheet-standardbox::before {
border-image: url("https://www.spirito.fr/DL/RP/dzapocalypse/BlocFrame-DZ53_DM.png") 22 fill stretch !important;
transform: scaleY(-1);
}
.sheet-darkmode .sheet-standardbox33.sheet-standardbox::before {
border-image: url("https://www.spirito.fr/DL/RP/dzapocalypse/BlocFrame-DZ53_DM.png") 22 fill stretch !important;
transform: scaleX(-1);
}
.sheet-darkmode .sheet-standardbox34.sheet-standardbox::before {
border-image: url("https://www.spirito.fr/DL/RP/dzapocalypse/BlocFrame-DZ53_DM.png") 22 fill stretch !important;
transform: scale(-1, -1);
}
.sheet-darkmode .sheet-standardbox41.sheet-standardbox::before {
border-image: url("https://www.spirito.fr/DL/RP/dzapocalypse/BlocFrame-DZ54_DM.png") 22 fill stretch !important;
}
.sheet-darkmode .sheet-standardbox42.sheet-standardbox::before {
border-image: url("https://www.spirito.fr/DL/RP/dzapocalypse/BlocFrame-DZ54_DM.png") 22 fill stretch !important;
transform: scaleY(-1);
}
.sheet-darkmode .sheet-standardbox43.sheet-standardbox::before {
border-image: url("https://www.spirito.fr/DL/RP/dzapocalypse/BlocFrame-DZ54_DM.png") 22 fill stretch !important;
transform: scaleX(-1);
}
.sheet-darkmode .sheet-standardbox44.sheet-standardbox::before {
border-image: url("https://www.spirito.fr/DL/RP/dzapocalypse/BlocFrame-DZ54_DM.png") 22 fill stretch !important;
transform: scale(-1, -1);
}
.sheet-darkmode .sheet-standardbox51.sheet-standardbox::before {
border-image: url("https://www.spirito.fr/DL/RP/dzapocalypse/BlocFrame-DZ55_DM.png") 22 fill stretch !important;
}
.sheet-darkmode .sheet-standardbox52.sheet-standardbox::before {
border-image: url("https://www.spirito.fr/DL/RP/dzapocalypse/BlocFrame-DZ55_DM.png") 22 fill stretch !important;
transform: scaleY(-1);
}
.sheet-darkmode .sheet-standardbox53.sheet-standardbox::before {
border-image: url("https://www.spirito.fr/DL/RP/dzapocalypse/BlocFrame-DZ55_DM.png") 22 fill stretch !important;
transform: scaleX(-1);
}
.sheet-darkmode .sheet-standardbox54.sheet-standardbox::before {
border-image: url("https://www.spirito.fr/DL/RP/dzapocalypse/BlocFrame-DZ55_DM.png") 22 fill stretch !important;
transform: scale(-1, -1);
}
/* -------------------------- -------------------------- */
.sheet-oneline {
width: calc(100% - 20px) !important;
margin: 10px auto !important;
}
.sheet-onecolumn {
grid-template-columns: 100%;
}
.sheet-doublecolumn,
.sheet-triplecolumn,
.sheet-quadcolumn,
.sheet-fivethcolumn,
.sheet-sixcolumn,
.sheet-eightcolumn,
.sheet-tencolumn {
column-gap: 10px !important;
align-items: start !important;
}
.sheet-triplecolumn {
display: grid;
grid-template-columns: repeat(3, 1fr);
}
.sheet-doublecolumn {
grid-template-columns: repeat(2, 1fr);
}
.sheet-doublecolumn.sheet-4 {
grid-template-columns: 1fr 20px;
gap: 0px!important;
width: 80%;
}
.sheet-doublecolumn.sheet-3 {
grid-template-columns: 1fr 12px 1fr;
align-items: center !important;
column-gap: 0px !important;
row-gap: 5px;
}
.sheet-doublecolumn.sheet-32 {
grid-template-columns: 0.5fr 12px 1fr;
align-items: center !important;
column-gap: 0px !important;
row-gap: 5px;
}
.sheet-doublecolumn.sheet-2 {
grid-template-columns: 1fr 12px;
align-items: center !important;
column-gap: 0px !important;
row-gap: 5px;
}
.sheet-quadcolumn {
grid-template-columns: repeat(4, 1fr);
}
.sheet-fivethcolumn {
grid-template-columns: repeat(5, 1fr);
}
.sheet-sixcolumn {
grid-template-columns: repeat(6, 1fr);
}
.sheet-eightcolumn {
grid-template-columns: repeat(8, 1fr);
}
.sheet-tencolumn {
grid-template-columns: repeat(10, 1fr);
}
.sheet-cogs {
justify-content: end;
right: 0;
position: absolute !important;
z-index: 2;
}
.sheet-activepage {
grid-template-columns: repeat(6, 1fr);
column-gap: 10px !important;
align-items: start !important;
margin-bottom: 10px !important;
}
/* -------------------------- HIDESHOW -------------------------- */
.sheet-cogs-hideshow-equipment-div {
display: none !important;
}
.sheet-cogs-hideshow-equipment:checked ~ .sheet-cogs-hideshow-equipment-div {
display: grid !important;
}
.sheet-cogs-hideshow:not(:checked) ~ .sheet-cogs-hideshow-div1,
.sheet-cogs-hideshow:checked ~ .sheet-cogs-hideshow-div2 {
display: none;
}
.sheet-weapons-hideshow:not(:checked) ~ .sheet-weapons-hideshow-div1,
.sheet-weapons-hideshow:checked ~ .sheet-weapons-hideshow-div2 {
display: none;
}
.sheet-head-hideshow:not(:checked) ~ .sheet-head-hideshow-div1,
.sheet-face-hideshow:not(:checked) ~ .sheet-face-hideshow-div1,
.sheet-chest-hideshow:not(:checked) ~ .sheet-chest-hideshow-div1,
.sheet-back-hideshow:not(:checked) ~ .sheet-back-hideshow-div1,
.sheet-hands-hideshow:not(:checked) ~ .sheet-hands-hideshow-div1,
.sheet-belt-hideshow:not(:checked) ~ .sheet-belt-hideshow-div1,
.sheet-legs-hideshow:not(:checked) ~ .sheet-legs-hideshow-div1,
.sheet-feets-hideshow:not(:checked) ~ .sheet-feets-hideshow-div1,
.sheet-holster1-hideshow:not(:checked) ~ .sheet-holster1-hideshow-div1,
.sheet-holster2-hideshow:not(:checked) ~ .sheet-holster2-hideshow-div1,
.sheet-vehicle-hideshow:not(:checked) ~ .sheet-vehicle-hideshow-div1,
.sheet-vehicle-hideshow:checked ~ .sheet-vehicle-hideshow-div2,
.sheet-portrait-hideshow:not(:checked) ~ .sheet-portrait-hideshow-div1 {
display: none;
}
.sheet-general-hideshow:checked ~ .sheet-general-hideshow-div1,
.sheet-general-hideshow:not(:checked) ~ .sheet-general-hideshow-div2 {
display: none;
}
.sheet-hpcustom-hideshow:checked ~ .sheet-hpcustom-hideshow-div1,
.sheet-hpcustom-hideshow:not(:checked) ~ .sheet-hpcustom-hideshow-div2 {
display: none;
}
.sheet-head-hideshow-div1,
.sheet-face-hideshow-div1,
.sheet-chest-hideshow-div1,
.sheet-back-hideshow-div1,
.sheet-hands-hideshow-div1,
.sheet-belt-hideshow-div1,
.sheet-legs-hideshow-div1,
.sheet-feets-hideshow-div1,
.sheet-holster1-hideshow-div1,
.sheet-holster2-hideshow-div1 {
grid-column: 2/-1;
}
.sheet-description-hideshow:checked ~ textarea {
display: none;
}
/* -------------------------- DZ SPECIAL DIV -------------------------- */
.sheet-main-skills div,
.sheet-main-savingthrows div {
row-gap: 0px !important;
}
.sheet-main-skills .sheet-oneline div {
grid-template-columns: 10px 25px 12px 1fr;
justify-content: space-between;
column-gap: 7.5px;
padding-left: 3px;
}
.sheet-main-skills .sheet-oneline div > div {
grid-template-columns: 1fr;
}
.sheet-main-skills .sheet-oneline div > div > h4 {
text-align: left;
}
.sheet-main-savingthrows .sheet-oneline div {
grid-template-columns: 10px 12px 1fr;
justify-content: space-between;
column-gap: 7.5px;
padding-left: 3px;
}
.sheet-main-savingthrows select,
.sheet-main-savingthrows input[type="number"],
.sheet-main-skills select,
.sheet-main-skills input[type="number"],
.sheet-main-effects select,
.sheet-main-equipment select {
font-size: 9px !important;
border: none;
background-color: transparent !important;
}
.sheet-minimalist {
font-size: 12px !important;
border: none;
background-color: transparent !important;
}
input[name="attr_effect-dc"],
select[name="attr_effect-selector"],
input[name="attr_effect-time"] {
font-size: 12px !important;
border: none;
background-color: transparent !important;
}
.sheet-main-proficiencies select,
.sheet-main-proficiencies input[type="number"] {
font-size: 9px !important;
}
.sheet-main-skills input[type="number"],
.sheet-main-savingthrows input[type="number"],
.sheet-main-proficiencies input[type="number"] {
padding: 0;
margin: 0;
}
.sheet-button-div-holder button {
position: absolute;
opacity: 0;
}
.sheet-button-div-holder button:hover ~ h4,
.sheet-button-div-holder button:hover ~ h3 {
color: var(--main-color);
font-weight: bold;
}
.sheet-header {
grid-template-columns: 3fr 2fr 1.5fr 75px;
column-gap: 5px !important;
}
.sheet-header2 {
grid-template-columns: 1fr 75px 100px 1fr;
column-gap: 5px !important;
}
.sheet-header > div,
.sheet-header2 > div {
row-gap: 2px !important;
}
.sheet-background-generalnotes .sheet-oneline {
margin: 0 auto 10px auto !important;
}
.sheet-background-vertical-art > .sheet-oneline:first-of-type {
margin: 10px auto 0px auto !important;
}
.sheet-background-generalnotes textarea {
max-height: 547px!important;
height: 547px!important;
margin-top: 5px;
}
.sheet-main-image {
grid-area: image;
background-image: url("https://www.spirito.fr/DL/RP/dzapocalypse/DZ-Logo.png") !important;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
width: 100%;
height: 100%;
}
.sheet-darkmode .sheet-main-image {
background-image: url("https://www.spirito.fr/DL/RP/dzapocalypse/DZ-Logo_dm.png") !important;
}
.sheet-maingrid-area,
.sheet-maingrid-area-vehicle {
grid-template-columns: repeat(10, 1fr);
height: 100%;
gap: 10px !important;
align-items: start !important;
}
.sheet-main-weapons {
grid-area: weapons;
}
.sheet-main-mags {
grid-area: mags;
}
.sheet-maingrid-area-inventory {
grid-template-areas:
"mags mags mags weapons weapons weapons weapons weapons weapons weapons";
grid-template-columns: repeat(10, 1fr);
height: 100%;
gap: 10px !important;
align-items: start !important;
margin-top:15px!important;
}
.sheet-mags {
grid-template-columns: 3fr 1fr;
}
.sheet-weapons-row1 {
grid-template-columns: 25px 10px 1fr 35px 60px 80px 25px 25px 8px 12px;
}
.sheet-weapons-row2 {
grid-template-columns: 1fr 100px 35px 5px 35px;
}
.sheet-weapons-row3 {
margin-top:0px!important;
grid-template-columns: 110px 1fr;
}
.sheet-weapons-row4 {
grid-template-columns: 100px 1fr 25px 8px;
}
.sheet-base-display,
.sheet-notes-display,
.sheet-maingrid-area-vehicle {
margin-top: 10px !important;
gap: 10px!important;
}
.sheet-maingrid-area > div,
.sheet-background-area > div {
min-height: 38px;
gap: 10px;
}
.sheet-maingrid-area > div {
align-content: flex-start !important;
justify-content: space-between;
width: 100% !important;
}
.sheet-maingrid-area-header1 > div > div,
.sheet-maingrid-area > div > div,
.sheet-background-area > div > div {
height: 100%;
}
.sheet-main-features-traits,
.sheet-main-equipment,
.sheet-main-proficiencies {
height: auto !important;
}
.sheet-main-general-container {
grid-area:cogs;
}
.sheet-maingrid-area-header1 {
grid-template-areas:
"image image image image image image header header header header";
}
.sheet-maingrid-area-header2 {
grid-template-areas: "menu menu menu menu menu menu rollstatus rollstatus rollstatus cogs";
height: 28px;
grid-template-rows: 28px!important;
grid-template-columns: repeat(9,1fr) 20px;
margin-top: 10px!important;
gap: 10px!important;
}
.sheet-maingrid-area {
grid-template-areas: "gridleft gridleft gridleft gridleft gridright gridright gridright gridright gridright gridright";
}
.sheet-imgfixed {
z-index: 0 !important;
background-size: contain;
background-repeat: no-repeat;
background-position: top;
height: 100%;
width: 100% !important;
grid-row: 1 / 3;
justify-content: flex-start;
}
.sheet-imgfixed-weapons {
background-image: url("https://www.spirito.fr/DL/RP/dzapocalypse/weapon-icon.png");
z-index: 0 !important;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
height: 110px !important;
width: 110px !important;
background-color: var(--background-grey) !important;
position: absolute;
}
.sheet-imgfixed-cadreblanc {
background-image: url("https://www.spirito.fr/DL/RP/dzapocalypse/cadre-blanc5.png");
z-index: 999!important;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
height: 110px !important;
width: 110px !important;
position: absolute!important;
}
.sheet-darkmode .sheet-imgfixed-cadreblanc {
background-image: url("https://www.spirito.fr/DL/RP/dzapocalypse/cadre-blanc5_dm.png");
}
img.error {
display: none;
}
.sheet-imgfixed-custom {
z-index: 99 !important;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
height: 110px !important;
width: 110px !important;
border-radius: 10px;
position: absolute;
}
.sheet-imgfixed-back {
background-image: url("https://www.spirito.fr/DL/RP/dzapocalypse/backpack-icon.png");
}
.sheet-imgfixed-helmet {
background-image: url("https://www.spirito.fr/DL/RP/dzapocalypse/helmet-icon.png");
}
.sheet-imgfixed-feets {
background-image: url("https://www.spirito.fr/DL/RP/dzapocalypse/shoes-icon.png");
}
.sheet-imgfixed-hands {
background-image: url("https://www.spirito.fr/DL/RP/dzapocalypse/gloves-icon.png");
}
.sheet-imgfixed-face {
background-image: url("https://www.spirito.fr/DL/RP/dzapocalypse/face-icon.png");
}
.sheet-imgfixed-chest {
background-image: url("https://www.spirito.fr/DL/RP/dzapocalypse/chest-icon.png");
}
.sheet-imgfixed-belt {
background-image: url("https://www.spirito.fr/DL/RP/dzapocalypse/belt-icon.png");
}
.sheet-imgfixed-legs {
background-image: url("https://www.spirito.fr/DL/RP/dzapocalypse/pants-icon.png");
}
.sheet-imgfixed-holster {
background-image: url("https://www.spirito.fr/DL/RP/dzapocalypse/holster-icon.png");
}
.sheet-imgfixed-back {
background-image: url("https://www.spirito.fr/DL/RP/dzapocalypse/backpack-icon.png");
}
/* -------------------------- -------------------------- */
.sheet-darkmode .sheet-imgfixed-helmet {
background-image: url("https://www.spirito.fr/DL/RP/dzapocalypse/helmet_dm.png");
}
.sheet-darkmode .sheet-imgfixed-feets {
background-image: url("https://www.spirito.fr/DL/RP/dzapocalypse/shoes_dm.png");
}
.sheet-darkmode .sheet-imgfixed-hands {
background-image: url("https://www.spirito.fr/DL/RP/dzapocalypse/gloves_dm.png");
}
.sheet-darkmode .sheet-imgfixed-face {
background-image: url("https://www.spirito.fr/DL/RP/dzapocalypse/face_dm.png");
}
.sheet-darkmode .sheet-imgfixed-chest {
background-image: url("https://www.spirito.fr/DL/RP/dzapocalypse/chest_dm.png");
}
.sheet-darkmode .sheet-imgfixed-belt {
background-image: url("https://www.spirito.fr/DL/RP/dzapocalypse/belt_dm.png");
}
.sheet-darkmode .sheet-imgfixed-legs {
background-image: url("https://www.spirito.fr/DL/RP/dzapocalypse/pants_dm.png");
}
.sheet-darkmode .sheet-imgfixed-holster {
background-image: url("https://www.spirito.fr/DL/RP/dzapocalypse/holster_dm.png");
}
.sheet-darkmode .sheet-imgfixed-back {
background-image: url("https://www.spirito.fr/DL/RP/dzapocalypse/backpack_dm.png");
}
.sheet-bottom-background {
position: relative;
bottom: 0 !important;
left: 0;
width: 100%;
height: 217px !important;
z-index: 0;
background-image: url("https://www.spirito.fr/DL/RP/dzapocalypse/bottom-background3.png");
background-size: cover;
background-repeat: no-repeat;
background-position: bottom;
width: 100%;
text-align: center;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 1px;
position: relative;
z-index: 1;
margin: -75px auto -10px auto!important;
border: 1px;
padding: 1px;
opacity: 0.5;
z-index:0;
}
.sheet-maingrid-area-left {
grid-template-areas:
"statistics savingthrows savingthrows"
"statistics savingthrows savingthrows"
"statistics savingthrows savingthrows"
"statistics skills skills"
"statistics skills skills"
"statistics skills skills"
"statistics skills skills"
"statistics skills skills"
"statistics skills skills"
"statistics skills skills"
"statistics inspiration inspiration"
"passiveperception passiveperception passiveperception"
"featurestraits featurestraits featurestraits"
"proficiencies proficiencies proficiencies"
"effects effects effects";
grid-area: gridleft;
grid-template-columns: 0.75fr 1fr 1fr;
z-index: 1;
}
.sheet-background-area > div {
align-items: flex-start !important;
}
.sheet-maingrid-area-right {
grid-template-areas:
"characteristics characteristics characteristics characteristics"
"characteristics characteristics characteristics characteristics"
"characteristics characteristics characteristics characteristics"
"clothing clothing clothing clothing"
"clothing clothing clothing clothing"
"equipment equipment equipment equipment"
"weapons weapons weapons weapons"
"mags mags mags mags";
grid-area: gridright;
grid-template-columns: repeat(4, 1fr);
z-index: 1;
}
.sheet-maingrid-area-right,
.sheet-maingrid-area-left,
.sheet-maingrid-area-middle {
grid-template-rows: calc(55px - 5px) !important;
}
.sheet-background-area {
grid-template-areas: "vertical-art generalnotes";
z-index: 2!important;
grid-template-columns: 1fr 1.5fr;
gap: 10px!important;
align-items: flex-start !important;
}
.sheet-background-vertical-art img,
.sheet-background-character-art img {
background-color: var(--background-grey) !important;
width: 100% !important;
height: auto !important;
object-fit: cover;
border-radius: 10px;
}
.sheet-background-vertical-art img{
aspect-ratio: 9 / 16 !important;
}
.sheet-background-character-art img {
aspect-ratio: 1 / 1 !important;
}
.sheet-background-vertical-art {
grid-area: vertical-art;
height: 100%;
}
.sheet-background-generalnotes {
grid-area: generalnotes;
}
.sheet-background-characternotes {
grid-area: characternotes;
}
.sheet-background-character-art {
grid-area: character-art;
}
.sheet-main-characteristics {
grid-area: characteristics;
grid-template-columns: repeat(5, 1fr);
column-gap: 10px !important;
}
.sheet-main-traits {
grid-area: traits;
}
.sheet-main-traits > div,
.sheet-main-ideal > div,
.sheet-main-flaw > div,
.sheet-main-bond > div {
height: 82px !important;
}
.sheet-main-bond {
grid-area: bonds;
}
.sheet-main-ideal {
grid-area: ideal;
}
.sheet-main-flaw {
grid-area: flaws;
}
.sheet-maingrid-area-vehicle {
grid-template-areas: "name name name name name name name name"
"img img img speed speed passenger tank tank"
"img img img hp hp ac str str"
"headlight headlight engine engine windows windows wheel wheel"
"storage storage storage storage storage storage storage storage";
grid-template-columns: repeat(8,1fr);
z-index: 2;
grid-template-rows: 76px 100px 100px repeat(5, 76px)!important;
}
.sheet-vehicle-main-name select {
border:none;
background-color:transparent;
}
.sheet-maingrid-area-vehicle > div {
min-height: 100% !important;
}
.sheet-vehicle-main-name {
grid-area: name;
}
.sheet-main-vehiclestorage {
grid-area: storage;
}
.sheet-vehicle-main-armorclass {
grid-area: ac;
}
.sheet-vehicle-main-hp {
grid-area: hp;
}
.sheet-vehicle-main-passenger {
grid-area: passenger;
}
.sheet-vehicle-main-speed {
grid-area: speed;
}
.sheet-vehicle-main-gallon {
grid-area: gallon;
}
.sheet-vehicle-main-tank {
grid-area: tank;
}
.sheet-vehicle-main-engine {
grid-area: engine;
}
.sheet-vehicle-main-windows {
grid-area: windows;
}
.sheet-vehicle-main-enginestr {
grid-area: str;
}
.sheet-vehicle-main-wheel {
grid-area: wheel;
}
.sheet-vehicle-main-headlight {
grid-area: headlight;
}
.sheet-vehicle-main-img {
grid-area: img;
}
.sheet-main-vehicle-instruction textarea {
height: 186px!important;
}
.sheet-main-menu {
grid-area: menu;;
}
.sheet-main-equipment {
grid-area: equipment;
}
.sheet-main-proficiencies {
grid-area: proficiencies;
}
.sheet-proficiencies1 {
grid-template-columns: 0.5fr 1fr 12px;
}
.sheet-proficiencies2 {
grid-template-columns: 0.5fr 1fr 12px 12px;
}
.sheet-notes1,
.sheet-notes2 {
grid-template-columns: 0.25fr 1fr 12px;
}
.sheet-main-passiveperception {
grid-area: passiveperception;
}
.sheet-main-features-traits {
grid-area: featurestraits;
}
.sheet-main-header {
grid-area: header;
}
.sheet-main-statistiques {
grid-area: statistics;
grid-template-rows: repeat(6, 1fr) !important;
gap: 10px !important;
}
.sheet-main-clothing {
grid-area: clothing;
}
.sheet-clothing {
grid-template-columns: 40px 60px 5fr 35px 25px 8px 12px !important;
row-gap: 0px !important;
}
.sheet-clothing.sheet-backpack {
grid-template-columns: 40px 60px 5fr 125px 35px 25px 8px 12px!important;
row-gap: 0px !important;
}
.sheet-clothing.sheet-holster {
grid-template-columns: 40px 60px 5fr 25px 8px 12px!important;
row-gap: 0px !important;
}
.sheet-maxpocket.sheet-black,
.sheet-maxbackpack.sheet-black {
color: var(--secondary-color)!important;
}
.sheet-maxpocket.sheet-red,
.sheet-maxbackpack.sheet-red {
color: var(--main-color)!important;
}
.sheet-effects {
grid-template-columns: 25px 1fr repeat(3,30px) 12px!important;
}
.sheet-main-rations {
grid-area: rations;
}
.sheet-rations {
grid-template-columns: repeat(2, 1fr) !important;
}
.sheet-main-inspiration {
grid-area: inspiration;
height: 38px !important;
}
.sheet-main-deathsave {
grid-area: deathsave;
height: 82px !important;
}
.sheet-main-proficiencybonus {
grid-area: proficiencybonus;
height: 34px !important;
}
.sheet-maingrid-area > div > div > div {
height: 100% !important;
}
.sheet-main-skills {
grid-area: skills;
}
.sheet-none {
grid-area: none;
}
.sheet-main-savingthrows {
grid-area: savingthrows;
}
.sheet-main-evasion-initiative-speed {
grid-area: initiative;
grid-template-rows: 1fr !important;
height: 82px !important;
}
.sheet-main-hitpoint {
grid-area: hitpoint;
height: 82px !important;
}
.sheet-main-exhaustion {
grid-area: exhaustion;
}
.sheet-main-insanity {
grid-area: insanity;
}
.sheet-main-statistiques .sheet-inputchar {
width: calc(100% - 5%) !important;
margin: 0 auto 3px auto !important;
border: none;
max-height: 20px !important;
height: 20px !important;
padding: 0;
font-size: 20px !important;
}
.sheet-main-statistiques .sheet-inputchar2 {
background-color: transparent;
margin: 0 auto !important;
border: none;
}
.sheet-main-inspiration .sheet-oneline,
.sheet-main-proficiencybonus .sheet-oneline,
.sheet-main-passiveperception .sheet-oneline {
grid-template-columns: 35px 1fr;
column-gap: 5px !important;
}
.sheet-background-display textarea {
height: 50px;
padding: 5px;
font-size: 11px !important;
line-height: 11px !important;
font-style: italic;
text-align: left;
}
.sheet-clothing textarea {
font-size: 11px !important;
line-height: 11px !important;
font-style: italic;
text-align: left;
margin-top: 5px !important;
}
.sheet-main-deathsave .sheet-oneline {
grid-template-columns: 1fr repeat(3, 0.33fr);
column-gap: 5px !important;
}
.sheet-features-traits {
grid-template-columns: 1fr 15px;
}
.sheet-features-traits2 {
grid-template-columns: 1fr 15px 15px;
}
span[name="attr_features-names"] {
font-family: var(--main-font);
color: var(--main-color);
font-weight: bold;
background-color: transparent;
border: none;
padding: 0;
margin: 0;
font-size: 16px !important;
line-height: 18px !important;
}
span[name="attr_features-source"] {
background-color: transparent;
border: none;
font-size: 11px !important;
line-height: 18px;
padding: 0;
max-height: 10px !important;
margin: -8px 0 4px 0;
font-style: italic;
opacity: 0.8;
}
span[name="attr_proficiency-name"] {
background-color: transparent;
border: none;
padding: 0;
margin: 0;
font-size: 12px !important;
line-height: 18px !important;
text-align: left;
}
span[name="attr_proficiency-source"] {
border: none;
font-size: 12px !important;
min-height: 18px!important;
line-height: 18px;
padding: 0;
max-height: 10px !important;
margin: 0;
background-color: var(--background-grey);
color: var(--blackandwhite2);
}
.sheet-darkmode span[name="attr_proficiency-source"] {
background-color: #593b3b;
color: var(--blackandwhite2)!important;
}
.sheet-features-traits2 textarea {
padding: 0;
background-color: transparent;
border: none;
text-align: left;
padding-left: 5px;
color: var(--blackandwhite2) !important;
}
.sheet-features-traits textarea {
padding: 0;
text-align: left;
padding-left: 5px;
color: var(--blackandwhite2) !important;
}
.sheet-vanilla {
background-color: transparent !important;
border: none !important;
}
.sheet-equipment {
grid-template-columns: 1fr 30px 12px 1fr 30px 12px 1fr 30px;
justify-content: flex-start;
}
.sheet-equipment1 {
grid-template-columns: 25px 8px 1fr 30px 12px;
}
.sheet-equipment2 {
grid-template-columns: 12px 30px 1fr 25px 8px;
}
.sheet-equipment3 {
grid-template-columns: 0.5fr repeat(4, 1fr) 35px 0.5fr;
column-gap: 25px!important;
border-top: 1px solid var(--h4color);
padding-top: 6px !important;
left: -5px;
width: calc(100% + 10px)!important;
margin: 10px auto 0 auto !important;
}
.sheet-vanilla {
font-size: 18px !important;
font-family: var(--main-font);
}
.sheet-main-statistiques .sheet-inputchar2 {
position: relative;
background-color: var(--blackandwhite);
border-radius: 2px;
border: 1px solid var(--text-grey) !important;
height: 18px !important;
}
.sheet-main-statistiques .sheet-inputchar3 {
max-height: 16px;
background-color: transparent;
opacity: 0.75;
border:none!important;
}
.sheet-main-statistiques .sheet-button-div-holder {
position: relative;
background-color: var(--blackandwhite);
border-radius: 3px;
padding: 0;
}
.sheet-main-menu .sheet-oneline {
grid-template-columns: repeat(3, 1fr);
margin: 0 auto !important;
width: 99% !important;
}
.sheet-main-menu .sheet-oneline .sheet-online,
.sheet-main-menu-blank .sheet-oneline .sheet-online {
height: 30px !important;
}
.sheet-main-menu .sheet-oneline .sheet-online input,
.sheet-main-menu-blank .sheet-oneline .sheet-online input,
.sheet-button-holder {
height: 30px !important;
}
.sheet-main-header-blank .sheet-oneline {
width: 98% !important;
margin: 0 auto !important;
}
.sheet-main-menu label,
.sheet-main-header-blank label {
font-family: var(--main-font);
font-weight: bolder !important;
height: 80% !important;
line-height: 25px;
border-radius: 0px;
width: 99%!important;
}
.sheet-main-menu label {
font-size: 14px !important;
}
.sheet-main-menu input:checked + label,
.sheet-main-header-blank input:checked + label {
border-color: var(--secondary-color) !important;
background-color: var(--main-color) !important;
color: white !important;
}
.sheet-main-header-blank label {
font-size: 10px !important;
}
.sheet-main-header-blank input.sheet-globalprivacy:checked + label {
background-color: #e7a820 !important;
}
.sheet-statistics input.sheet-inputchar2 {
font-size: 12px !important;
background-color: transparent;
}
.sheet-weapons-row2.sheet-separator-text {
margin: 5px auto;
}
.sheet-separator-text {
color: #555;
opacity: 1;
font-weight: 500;
position: relative;
display: grid;
margin: 4px auto;
text-align: center;
z-index: 2;
width: 100%;
opacity:0.25;
}
.sheet-separator-text2 {
color: #555;
opacity: 1;
font-weight: 500;
position: relative;
display: grid;
margin: 5px auto 15px auto;
text-align: center;
z-index: 2;
width: 100%;
opacity: 0.25;
}
.sheet-background-header-line1 {
gap: 5px !important;
}
input::placeholder {
text-align: center !important;
justify-content: center !important;
opacity: 0.5;
height: 16px;
line-height: 14px !important;
font-family: var(--secondary-font) !important;
}
.sheet-main-vehicle-name input::placeholder {
height: 32px !important;
max-height: 32px !important;
font-size: 22px !important;
font-family: var(--main-font) !important;
font-weight: bolder;
background-color: transparent !important;
border: none;
}
.sheet-main-vehicle-name1 {
grid-template-columns: 1fr 12px;
}
.sheet-main-vehicle-name2 {
grid-template-columns: 1fr 1fr 0.5fr 3fr;
}
.sheet-weapons-row1 input::placeholder,
.sheet-weapons-row2 input::placeholder,
.sheet-clothing input::placeholder,
.sheet-main-features-traits input::placeholder,
.sheet-main-proficiencies input::placeholder,
.sheet-weapons-row4 input::placeholder {
text-align: left !important;
justify-content: left !important;
}
.sheet-placeholdercenter input::placeholder {
text-align: center !important;
justify-content: center !important;
}
.sheet-equipment1 input::placeholder {
text-align: left !important;
justify-content: left !important;
}
.sheet-equipment2 input::placeholder {
text-align: right !important;
justify-content: right !important;
}
.sheet-background-header-line1 {
grid-template-columns: repeat(7, 1fr);
}
.sheet-background-area img {
background-color: red;
}
.sheet-main-header-blank {
grid-area: rollstatus;
}
.sheet-main-effects {
grid-area: effects;
}
.sheet-main-header-blank > div > div {
grid-template-columns: repeat(3, 1fr) 12px repeat(3, 1fr);
column-gap: 5px !important;
}
.sheet-main-header-blank label {
margin: 0;
padding: 0;
text-align: center;
color: var(--secondary-color) !important;
}
.sheet-main-header-blank label {
text-transform: uppercase !important;
}