Files
roll20-character-sheets/Obscuritas/obscuritas.css
T

4616 lines
104 KiB
CSS

@import url('https://fonts.googleapis.com/css2?family=Jim+Nightshade&family=Metamorphous&family=Playfair:opsz@5..1200&display=swap');
/* font-family: "Metamorphous", serif; */
/* font-family: "Jim Nightshade", serif; */
.charsheet {
/* font-family: "Playfair", serif; */
font-family: "Metamorphous", serif;
color: var(--black);
font-size: 16px;
letter-spacing: -0.4px;
line-height: 18px;
margin: 0px;
min-width: 850px;
--black: #000002;
--white: #fcfcfd;
--font_playfair: "Playfair", serif;
--color_dev: rgba(255, 0, 0, 0.062);
--text_input_info: #a20303d4;
--hover_bouton: #a20303d4;
--border_armes: #000000d1;
--color_text_boutton_menu: #000000d4;
/* VARIABLES GLOBALES */
--box_shadow_page: 0px 0px 6px 6px #000000ba;
--image_portrait_shadow: 0px 0px 14px 2px black;
--image_portrait_background: black;
--background_page: url(https://raw.githubusercontent.com/Roll20/roll20-character-sheets/refs/heads/master/Obscuritas/images/background.webp);
--background_menu: url(https://raw.githubusercontent.com/Roll20/roll20-character-sheets/refs/heads/master/Obscuritas/images/background_menu.webp);
--esoterik_info: url(https://raw.githubusercontent.com/Roll20/roll20-character-sheets/refs/heads/master/Obscuritas/images/esoterik_background_info.webp);
--esoterik_carac: url(https://raw.githubusercontent.com/Roll20/roll20-character-sheets/refs/heads/master/Obscuritas/images/esoterik_background_carac.webp);
--esoterik_competences: url(https://raw.githubusercontent.com/Roll20/roll20-character-sheets/refs/heads/master/Obscuritas/images/esoterik_background_competences.webp);
--esoterik_equipement: url(https://raw.githubusercontent.com/Roll20/roll20-character-sheets/refs/heads/master/Obscuritas/images/esoterik_background_armement.webp);
--cadre_titre_gauche: url(https://raw.githubusercontent.com/Roll20/roll20-character-sheets/refs/heads/master/Obscuritas/images/cadre3.webp);
--cadre_titre_droite: url(https://raw.githubusercontent.com/Roll20/roll20-character-sheets/refs/heads/master/Obscuritas/images/cadre4.webp);
--hexagramme: url(https://raw.githubusercontent.com/Roll20/roll20-character-sheets/refs/heads/master/Obscuritas/images/hexagram.webp);
--cadre_input_carac: url(https://raw.githubusercontent.com/Roll20/roll20-character-sheets/refs/heads/master/Obscuritas/images/border_carac.webp);
--separateur_vertical_carac: url(https://raw.githubusercontent.com/Roll20/roll20-character-sheets/refs/heads/master/Obscuritas/images/separateur_croix.webp);
--separateur_horizontal_carac: url(https://raw.githubusercontent.com/Roll20/roll20-character-sheets/refs/heads/master/Obscuritas/images/separateur_horizontal_1.webp);
--separateur_crane_competence: url(https://raw.githubusercontent.com/Roll20/roll20-character-sheets/refs/heads/master/Obscuritas/images/separateur_crane_blanc.webp);
--separateur_centre_competence: url(https://raw.githubusercontent.com/Roll20/roll20-character-sheets/refs/heads/master/Obscuritas/images/separateur_centre_comp.webp);
--separateur_croix_competence: url(https://raw.githubusercontent.com/Roll20/roll20-character-sheets/refs/heads/master/Obscuritas/images/separateur_bas_croix.webp);
--armes_barre_titre: url(https://raw.githubusercontent.com/Roll20/roll20-character-sheets/refs/heads/master/Obscuritas/images/barre_titre_armes.webp);
--armes_image_1: url(https://raw.githubusercontent.com/Roll20/roll20-character-sheets/refs/heads/master/Obscuritas/images/dessin_armes.webp);
--armure_dessin_plaque: url(https://raw.githubusercontent.com/Roll20/roll20-character-sheets/refs/heads/master/Obscuritas/images/armure_plaque1.webp);
--armure_dessin_maille: url(https://raw.githubusercontent.com/Roll20/roll20-character-sheets/refs/heads/master/Obscuritas/images/armure_maille.webp);
--armure_dessin_cuir: url(https://raw.githubusercontent.com/Roll20/roll20-character-sheets/refs/heads/master/Obscuritas/images/armure_cuir1.webp);
--armure_dessin_tissu: url(https://raw.githubusercontent.com/Roll20/roll20-character-sheets/refs/heads/master/Obscuritas/images/armure_tissu1.webp);
--armure_dessin_aucune: url(https://raw.githubusercontent.com/Roll20/roll20-character-sheets/refs/heads/master/Obscuritas/images/armure_aucune.webp);
--bouclier_dessin_rond: url(https://raw.githubusercontent.com/Roll20/roll20-character-sheets/refs/heads/master/Obscuritas/images/bouclier_rond.webp);
--bouclier_dessin_pavois: url(https://raw.githubusercontent.com/Roll20/roll20-character-sheets/refs/heads/master/Obscuritas/images/bouclier_pavois.webp);
--bouclier_dessin_aucun: url(https://raw.githubusercontent.com/Roll20/roll20-character-sheets/refs/heads/master/Obscuritas/images/bouclier_aucune.webp);
--fond_zone_note: url(https://raw.githubusercontent.com/Roll20/roll20-character-sheets/refs/heads/master/Obscuritas/images/ligne_notes.webp);
--dessin_sac: url(https://raw.githubusercontent.com/Roll20/roll20-character-sheets/refs/heads/master/Obscuritas/images/dessin_sac.webp);
--dessin_bourse: url(https://raw.githubusercontent.com/Roll20/roll20-character-sheets/refs/heads/master/Obscuritas/images/illustration_coffre.webp);
--dessin_carnet: url(https://raw.githubusercontent.com/Roll20/roll20-character-sheets/refs/heads/master/Obscuritas/images/dessin_carnet.webp);
/* FIN VARIABLES GLOBALES */
--couleur_ligne: #000000e5;
--text_input: #000000bd;
--color_border_equipement: #000000d9;
--color_border_parcours_personnes: #000000d9;
--color_ligne_menu: #00000078;
--color_border_button: #595959;
--color_background_button: #fcfcfd;
--color_background_button_selected: #3e0303d4;
--color_text_button: #0000009e;
--color_text_button_selected: #fcfcfd;
--color_button_hover: #d7d2d2;
--color_text_hover: #a20303d4;
--color_ombre_button: #575757a8;
}
.sheet-darkmode .charsheet {
--box_shadow_page: 2px 1px 5px 4px #643a3aba;
}
.sheetform {
background-color: #ffffff;
width: auto;
}
.sheet-darkmode .sheetform {
background-color: #ffffff00;
}
::placeholder {
color: #00000073;
font-weight: bold;
margin-top: 0px;
}
span.picto {
font-family: 'pictos';
}
span.D20 {
font-family: 'dicefontd20';
font-size: 32px;
}
span.point {
margin-right: 10px;
font-family: 'Helvetica Neue';
}
img.portrait,
img.portrait_aude,
img.portrait_einarth,
img.portrait_felix,
img.portrait_baudoin {
border-radius: 120px;
box-shadow: var(--image_portrait_shadow);
background: var(--image_portrait_background);
}
img.portrait_aude {
background-image: url(https://raw.githubusercontent.com/Roll20/roll20-character-sheets/refs/heads/master/Obscuritas/images/token_aude.webp);
background-size: 170px 170px
}
img.portrait_einarth {
background-image: url(https://raw.githubusercontent.com/Roll20/roll20-character-sheets/refs/heads/master/Obscuritas/images/token_einarth.webp);
background-size: 170px 170px
}
img.portrait_felix {
background-image: url(https://raw.githubusercontent.com/Roll20/roll20-character-sheets/refs/heads/master/Obscuritas/images/token_felix.webp);
background-size: 170px 170px
}
img.portrait_baudoin {
background-image: url(https://raw.githubusercontent.com/Roll20/roll20-character-sheets/refs/heads/master/Obscuritas/images/token_baudoin.webp);
background-size: 170px 170px
}
.charsheet textarea {
border: none;
outline: none;
resize: none;
background-color: transparent;
}
.charsheet textarea.sac {
font-size: 16px;
line-height: 19px;
color: var(--text_input_info);
font-family: "Playfair", serif;
padding: 10px;
padding-left: 51px;
overflow: hidden;
background-image: var(--fond_zone_note);
background-size: auto 13.7px;
width: 91%;
height: 92%;
}
.charsheet textarea.carnet {
font-size: 19px;
line-height: 22px;
color: var(--black);
padding: 10px;
overflow: hidden;
background-image: var(--fond_zone_note);
background-size: auto 13.7px;
width: 94%;
height: 95%;
font-family: 'Jim Nightshade';
}
.charsheet input {
border: none;
outline: none;
resize: none;
padding: 0px;
cursor: pointer;
overflow: hidden;
font-family: "Playfair", serif;
color: var(--black);
font-size: 16px;
line-height: 25px;
background: white;
z-index: 1;
}
.charsheet input.input_ligne,
.charsheet input.input_ligne_droite,
.charsheet input.input_dotted_gauche,
.charsheet input.input_dotted_centre {
width: 100% !important;
border-bottom: 1px dotted var(--couleur_ligne);
height: 20px !important;
border-radius: 1px;
padding-left: 2px;
padding-right: 5px;
color: var(--text_input_info);
letter-spacing: 0px;
background: none;
padding-top: 3px;
font-size: 14px;
}
.charsheet input.input_ligne_droite {
text-align: right;
}
.charsheet input.input_dotted_centre {
text-align: center;
}
.charsheet input.input_dotted_gauche {
text-align: left;
padding-left: 5px;
}
.charsheet input.input_aura,
.charsheet input.input_hero_here,
.charsheet input.input_carac,
.charsheet input.input_carac_xp,
.charsheet input.input_carac_xp_dispo,
.charsheet input.input_carac_lock,
.charsheet input.input_comp,
.charsheet input.input_comp_lock,
.charsheet input.input_demi_carac,
.charsheet input.input_carac_long,
.charsheet input.input_carac_pnj,
.charsheet input.input_demi_carac_pnj,
.charsheet input.input_carac_pnj_long,
.charsheet input.input_config {
width: 50px !important;
height: 28px;
border: none;
border-radius: 1px;
background-color: var(--white);
color: var(--black);
text-align: center;
font-size: 20px;
padding: 0;
padding-bottom: 6px;
}
.charsheet input.input_aura {
width: 45px !important;
height: 45px;
border-radius: 30px;
background-color: transparent;
color: var(--white);
text-align: center;
font-size: 22px;
padding: 0;
padding-bottom: 5px;
margin-top: 0px;
font-family: 'Metamorphous';
font-weight: bold;
border: none;
cursor: default;
}
.charsheet input.input_hero_here {
width: 55px !important;
height: 55px;
border-radius: 30px;
background-color: transparent;
color: var(--white);
text-align: center;
font-size: 22px;
padding: 0;
padding-bottom: 5px;
margin-top: 0px;
font-family: 'Metamorphous';
font-weight: bold;
border: 2px solid black;
cursor: default;
margin-left: 10px;
margin-right: 10px;
}
.charsheet input.input_carac {
width: 78px !important;
height: 67px;
border: none;
border-radius: 30px;
background-color: transparent;
color: var(--text_input_info);
text-align: center;
font-size: 15px;
padding: 0;
padding-bottom: 0px;
margin-top: 0px;
font-family: 'Metamorphous';
font-weight: bold;
}
.charsheet input.input_carac_xp_dispo {
border: none;
border-radius: 0px;
width: 80px !important;
height: 60px;
background-color: transparent;
color: var(--white);
text-align: center;
font-size: 35px;
padding: 0;
padding-bottom: 0px;
margin-top: 0px;
font-family: 'Metamorphous';
font-weight: bold;
cursor: default;
}
.charsheet input.input_carac_xp {
border: 1px solid #00000054;
border-radius: 16px;
width: 37px !important;
height: auto;
background-color: transparent;
color: #510101d4;
text-align: center;
font-size: 14px;
padding: 0;
padding-bottom: 0px;
padding-bottom: 0px;
margin-top: 0px;
font-family: 'Metamorphous';
font-weight: bold;
}
.charsheet input.input_derivees,
.charsheet input.input_derivees_lock {
width: 100% !important;
border-bottom: 1px dotted var(--couleur_ligne);
height: 25px !important;
border-radius: 1px;
color: var(--black);
letter-spacing: 0px;
background: none;
text-align: center;
font-size: 20px;
font-family: 'Metamorphous';
}
.charsheet input.input_derivees_lock {
border: none;
cursor: default;
}
.charsheet input.input_carac_lock {
cursor: default;
}
.charsheet input.input_comp {
width: 35px !important;
height: 35px;
border-radius: 30px;
background-color: transparent;
color: var(--text_input_info);
text-align: center;
font-size: 13px;
padding: 0;
padding-bottom: 0px;
margin-top: 0px;
font-family: 'Metamorphous';
font-weight: bold;
}
.charsheet input.input_comp_double {
width: 35px !important;
height: 71px;
border-radius: 10px;
background-color: transparent;
color: var(--text_input_info);
text-align: center;
font-size: 13px;
padding: 0;
padding-bottom: 47px;
margin-top: 45px;
font-family: 'Metamorphous';
font-weight: bold;
}
.charsheet input.input_comp_lock {
width: 31px !important;
height: 35px;
background: transparent;
color: #fdfdfdfc;
text-align: center;
font-size: 15px;
padding: 0;
padding-bottom: 3px;
margin-top: 0px;
font-family: 'Metamorphous';
cursor: default;
}
.charsheet input.input_carac_pnj,
.charsheet input.input_demi_carac_pnj,
.charsheet input.input_carac_pnj_long {
height: 23px;
font-size: 22px;
padding-bottom: 3px;
}
.charsheet input.input_demi_carac,
.charsheet input.input_demi_carac_pnj {
width: 28px !important;
}
.charsheet input.input_carac_long,
.charsheet input.input_carac_pnj_long {
width: 81px !important;
}
div.fond_blanc {
width: 81px;
background: white;
}
.charsheet input.input_cadre {
width: 100%;
height: 100%;
text-align: center;
font-size: 20px;
font-weight: bold;
color: var(--black);
}
.charsheet input.input_config {
width: auto;
/* border-bottom: 1px dotted var(--couleur_ligne); */
height: 25px !important;
border-radius: 1px;
color: var(--black);
letter-spacing: 0px;
background: none;
text-align: center;
font-size: 18px;
font-family: 'Metamorphous';
border: none;
cursor: default;
}
.charsheet select.choix_custom,
.charsheet select.choix_armes,
.charsheet select.choix_armures,
.charsheet select.choix_boucliers {
width: 123px;
height: 33px;
letter-spacing: -0.8px;
border: none;
border-radius: 1px;
outline: none;
cursor: pointer;
padding: 0;
padding-right: 0px;
margin: 0;
background: transparent;
color: var(--black);
font-size: 19px;
font-family: "Jim Nightshade";
padding-top: 2px;
}
.charsheet select.choix_armes {
width: 75%;
}
.charsheet select.choix_armures,
.charsheet select.choix_boucliers {
width: 100%;
}
.charsheet select.choix_boucliers {
padding-top: 7px;
}
input[type="checkbox"] {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background-color: var(--white);
margin: 0;
font: inherit;
color: var(--white);
width: 18px;
height: 18px !important;
border: 2px solid var(--white);
border-radius: 1px;
}
input[type="checkbox"]:checked {
background-color: var(--white);
border: 2px solid var(--white);
}
label {
display: inline-block;
cursor: pointer;
user-select: none;
width: 18px !important;
height: 18px;
padding: 0px !important;
margin: 0 !important;
}
label::before {
content: "";
width: 18px;
height: 18px;
}
input[type="checkbox"]:checked + label::before {
content: "✔";
display: flex;
justify-content: center;
color: var(--black);
font-size: 17px;
font-weight: bold;
margin-top: -17px;
}
div.boucliers_equipee input[type="checkbox"]:checked + label::before {
margin-top: -23px;
}
input[type="checkbox"]:focus {
outline: none;
}
.charsheet input[type=number]::-webkit-inner-spin-button,
.charsheet input[type=number]::-webkit-outer-spin-button {
-webkit-appearance: none;
margin: 0;
}
input[type="number"] {
appearance: none;
-moz-appearance: textfield;
}
.charsheet button[type=action].button_valider_creation::before,
.charsheet button[type=action].button_aura::before,
.charsheet button[type=action].button_here_hero::before,
.charsheet button[type=action].button_texte::before,
.charsheet button[type=roll].button_texte::before,
.charsheet button[type=action].button_texte_noir::before,
.charsheet button[type=roll].button_texte_noir::before,
.charsheet button[type=action].button_annonce::before,
.charsheet button[type=roll].button_annonce::before,
.charsheet button[type=action].button0::before,
.charsheet button[type=action].button1::before,
.charsheet button[type=action].button2::before,
.charsheet button[type=action].button3::before,
.charsheet button[type=action].button4::before,
.charsheet button[type=action].button5::before,
.charsheet button[type=action].button6::before,
.charsheet button[type=action].button7::before,
.charsheet button[type=action].button8::before,
.charsheet button[type=action].button_sens_carte::before,
.charsheet button[type=action].button_carac::before,
.charsheet button[type=action].button_compendium_sm::before,
.charsheet button[type=action].button_compendium_combat::before,
.charsheet button[type=action].button_compendium_aura::before,
.charsheet button[type=action].button_compendium_equipement::before,
.charsheet button[type=action].button_xp::before,
.charsheet button[type=action].button_valider_xp::before,
.charsheet button[type=action].button_comp::before,
.charsheet button[type=roll].button_comp::before,
.charsheet button[type=action].button_show::before,
.charsheet button[type=action].button_avatar::before,
.charsheet button[type=action].button_verrou::before {
content: '';
}
.charsheet button[type=action].button_aura {
padding: 0;
margin: 0;
box-shadow: none;
text-shadow: none;
background: none;
width: auto !important;
height: 29px;
border: none;
border-radius: 1px;
color: var(--black);
font-size: 20px;
line-height: 20px;
display: flex;
align-items: center;
font-weight: bold;
}
.charsheet button[type=action].button_avatar {
width: 155px;
height: 163px;
box-shadow: none;
text-shadow: none;
background: none;
border-radius: 120px;
border: none;
}
.charsheet button[type=action].button_here_hero {
color: var(--white);
border: 2px solid black;
border-radius: 30px;
height: 25px;
width: 18px;
}
.charsheet button[type=action].button_texte,
.charsheet button[type=roll].button_texte,
.charsheet button[type=action].button_texte_noir,
.charsheet button[type=roll].button_texte_noir {
padding: 0;
margin: 0;
box-shadow: none;
text-shadow: none;
background: none;
width: auto !important;
text-align: left;
height: 29px;
border: none;
border-radius: 1px;
color: var(--black);
font-size: 16px;
line-height: 25px;
margin-top: -2px;
display: flex;
align-items: center;
}
.charsheet button[type=action].button_show {
height: 25px;
border: none;
padding: 0;
margin: 0;
box-shadow: none;
text-shadow: none;
background-color: transparent;
background-image: none;
font-size: 18px;
text-align: center;
line-height: 18px;
margin-top: -7px;
width: auto;
font-size: 18px;
color: #fdfdfd30;
margin-left: 14px;
}
.charsheet button[type=action].button_verrou {
height: 15px;
border: none;
padding: 0;
margin: 0;
box-shadow: none;
text-shadow: none;
background-color: transparent;
background-image: none;
font-size: 12px;
text-align: center;
line-height: 12px;
width: 15px;
color: unset;
}
.charsheet button[type=action].button_carac,
.charsheet button[type=action].button_compendium_sm,
.charsheet button[type=action].button_compendium_combat,
.charsheet button[type=action].button_compendium_aura,
.charsheet button[type=action].button_compendium_equipement {
padding: 0;
margin: 0;
box-shadow: none;
text-shadow: none;
background: none;
width: auto !important;
text-align: left;
height: 25px;
border: none;
border-radius: 1px;
color: var(--black);
font-size: 13px;
line-height: 23px;
margin-top: -2px;
font-family: "Metamorphous", serif;
font-weight: bold;
text-align: center;
}
.charsheet button[type=action].button_compendium_sm {
color: #710071;
}
.charsheet button[type=action].button_compendium_combat {
color: #710000;
}
.charsheet button[type=action].button_compendium_aura {
color: #05109b;
}
.charsheet button[type=action].button_compendium_equipement {
color: #6f3e00;
}
.charsheet button[type=action].button_xp {
padding: 0;
margin: 0;
box-shadow: none;
text-shadow: none;
background: none;
width: auto !important;
text-align: left;
height: 29px;
border: none;
border-radius: 1px;
color: var(--black);
font-size: 15px;
line-height: 25px;
margin-top: -2px;
font-family: "pictos", serif;
font-weight: bold;
text-align: center;
}
.charsheet button[type=action].button_valider_creation {
margin: 0;
box-shadow: none;
text-shadow: none;
background: var(--black);
width: auto !important;
height: 40px;
border: none;
border-radius: 10px;
color: var(--white);
font-size: 15px;
line-height: 25px;
font-family: "Metamorphous", serif;
font-weight: bold;
text-align: center;
padding: 25px;
}
.charsheet button[type=action].button_valider_xp {
margin: 0;
box-shadow: none;
text-shadow: none;
background: #071d3e;
width: 540px;
height: 120px;
border: none;
border-radius: 10px;
color: var(--white);
font-size: 15px;
line-height: 20px;
font-family: "Metamorphous", serif;
font-weight: bold;
text-align: center;
padding: 0;
}
.charsheet button[type=action].button_comp,
.charsheet button[type=roll].button_comp {
padding: 0;
margin: 0;
box-shadow: none;
text-shadow: none;
background: none;
width: auto !important;
height: 20px;
border: none;
border-radius: 1px;
color: var(--black);
font-size: 19px;
font-family: "Jim Nightshade";
padding-top: 2px;
}
.charsheet button[type=action].button_texte_noir,
.charsheet button[type=roll].button_texte_noir {
color: var(--black);
}
.charsheet button[type=action].button0,
.charsheet button[type=action].button1,
.charsheet button[type=action].button2,
.charsheet button[type=action].button3,
.charsheet button[type=action].button4,
.charsheet button[type=action].button5,
.charsheet button[type=action].button6,
.charsheet button[type=action].button7,
.charsheet button[type=action].button8 {
text-shadow: none;
background: var(--color_background_button);
text-align: left;
height: 19px;
border: 1px solid var(--color_border_button);
color: #000000d4;
font-size: 14px;
margin-left: -5px;
border-radius: 10px 10px 0px 0px;
border-bottom: 2px solid #0000008f;
padding-right: 15px;
padding-left: 10px;
font-family: "Metamorphous", serif;
font-size: 10px;
box-shadow: -4px 1px 6px 0px var(--color_ombre_button);
background-image: var(--background_menu);
}
.charsheet button[type=action].button_texte:hover,
.charsheet button[type=roll].button_texte:hover,
.charsheet button[type=action].button_texte_noir:hover,
.charsheet button[type=roll].button_texte_noir:hover {
font-weight: bold;
}
.charsheet button[type=action].button_aura:hover,
.charsheet button[type=action].button_carac:hover,
.charsheet button[type=action].button_xp:hover,
.charsheet button[type=action].button_comp:hover,
.charsheet button[type=roll].button_comp:hover,
.charsheet button[type=action].button_compendium_sm:hover,
.charsheet button[type=action].button_compendium_combat:hover,
.charsheet button[type=action].button_compendium_aura:hover,
.charsheet button[type=action].button_compendium_equipement:hover {
color: var(--hover_bouton);
}
.charsheet button[type=action].button_xp:hover {
color: var(--hover_bouton);
}
.charsheet button[type=roll].button_here_hero:hover {
color: var(--hover_bouton);
}
.charsheet button[type=action].button_valider_creation:hover {
background: #3c0c0cf2;
}
.charsheet button[type=action].button_valider_xp:hover {
background: #3c0c0cf2;
border: 4px solid black;
width: 532px;
height: 112px;
}
.charsheet button[type=action].button0:hover,
.charsheet button[type=action].button1:hover,
.charsheet button[type=action].button2:hover,
.charsheet button[type=action].button3:hover,
.charsheet button[type=action].button4:hover,
.charsheet button[type=action].button5:hover,
.charsheet button[type=action].button6:hover,
.charsheet button[type=action].button7:hover,
.charsheet button[type=action].button8:hover {
color: var(--color_text_hover);
}
.charsheet .choix_page[value="0"] ~ div .button0 {color: var(--color_text_button_selected); background: var(--color_background_button_selected);}
.charsheet .choix_page[value="1"] ~ div .button1 {color: var(--color_text_button_selected); background: var(--color_background_button_selected);}
.charsheet .choix_page[value="2"] ~ div .button2 {color: var(--color_text_button_selected); background: var(--color_background_button_selected);}
.charsheet .choix_page[value="3"] ~ div .button3 {color: var(--color_text_button_selected); background: var(--color_background_button_selected);}
.charsheet .choix_page[value="4"] ~ div .button4 {color: var(--color_text_button_selected); background: var(--color_background_button_selected);}
.charsheet .choix_page[value="6"] ~ div .button6 {color: var(--color_text_button_selected); background: var(--color_background_button_selected);}
.charsheet .choix_page[value="8"] ~ div .button8 {color: var(--color_text_button_selected); background: var(--color_background_button_selected);}
.charsheet .choix_page[value="5"] ~ div .button5 {color: var(--color_text_button_selected); background: #65709f;}
.charsheet .choix_page[value="7"] ~ div .button7 {color: var(--color_text_button_selected); background: #65709f;}
.charsheet button[type=action].button_show:hover {
color: var(--white);
}
.charsheet button[type=action].button_verrou:hover {
color: red;
}
.charsheet button[type=action].button_annonce,
.charsheet button[type=roll].button_annonce {
padding: 0;
margin: 0;
box-shadow: none;
text-shadow: none;
background: none;
width: 100%;
text-align: center;
border: none;
border-radius: 1px;
font-size: 19px;
margin-top: -2px;
font-family: "pictos";
font-size: 16px;
color: var(--text_input);
}
/* Affichage nouveau personnage */
div.nouveau_personnage,
div.obscuritas_perso,
div.menu {
display: none;
}
.charsheet .nouveau_personnage[value="1"] ~ div.nouveau_personnage,
.charsheet .nouveau_personnage[value="0"] ~ div.obscuritas_perso,
.charsheet .nouveau_personnage[value="0"] ~ div.menu {
display: block;
}
/* POPUP ALERTE SM */
div.sm_75,
div.sm_50,
div.sm_25 {
display: none;
}
.charsheet .popup_sm[value="75"] ~ div.sm_75,
.charsheet .popup_sm[value="50"] ~ div.sm_50,
.charsheet .popup_sm[value="25"] ~ div.sm_25 {
display: block;
}
.sm_75,
.sm_50,
.sm_25 {
position: fixed;
width: 600px;
height: 300px;
margin-left: 90px;
margin-top: 110px;
border: 8px solid #000000;
border-radius: 30px;
background: #5b0808;
color: white;
padding: 20px;
z-index: 2;
font-size: 25px;
line-height: 55px;
text-align: center;
box-shadow: 0px 0px 30px 13px #330707;
}
.sm_75 {
background: #071b67;
box-shadow: 0px 0px 30px 13px #6c78ab;
}
.wrapper_page_sm {
display: grid;
grid-template-columns: 50% 5% 35% 5% 5%;
grid-auto-rows: 20px;
}
.sm_alerte_texte {
grid-column: 1;
grid-row: 1 / 16;
font-size: 20px;
line-height: 30px;
display: flex;
align-items: center;
}
.sm_alerte_illustration_75 {
grid-column: 3;
grid-row: 1 / 16;
height: 200px;
border: 5px solid black;
border-radius: 10px;
background-image: url(https://raw.githubusercontent.com/Roll20/roll20-character-sheets/refs/heads/master/Obscuritas/images/illu_sm_75.webp);
background-size: contain;
background-repeat: no-repeat;
margin-top: 47px;
}
.sm_alerte_illustration_50 {
grid-column: 3;
grid-row: 1 / 16;
height: 200px;
border: 5px solid black;
border-radius: 10px;
background-image: url(https://raw.githubusercontent.com/Roll20/roll20-character-sheets/refs/heads/master/Obscuritas/images/illu_sm_50.webp);
background-size: contain;
background-repeat: no-repeat;
margin-top: 47px;
}
.sm_alerte_illustration_25 {
grid-column: 3;
grid-row: 1 / 16;
height: 200px;
border: 5px solid black;
border-radius: 10px;
background-image: url(https://raw.githubusercontent.com/Roll20/roll20-character-sheets/refs/heads/master/Obscuritas/images/illu_sm_25.webp);
background-size: contain;
background-repeat: no-repeat;
margin-top: 47px;
}
.sm_alerte_bouton {
grid-column: 5;
grid-row: 1;
font-family: 'Pictos';
font-weight: normal;
color: var(--white);
font-size: 32px;
line-height: 55px;
margin-top: -25px;
margin-left: 14px;
}
.menu {
margin-top: -10px;
}
.creation_perso,
.page_complete,
.page_aura,
.page_caracteristiques,
.page_competences,
.page_equipement,
.page_note,
.page_config,
.page_compendium,
.page_xp {
width: 820px;
min-height: 1180px;
height: auto;
background: rgb(226, 226, 226);
background-image: var(--background_page);
background-size: contain;
padding: 20px;
border-radius: 10px;
margin-left: -14px;
box-shadow: var(--box_shadow_page);
margin-bottom: 20px;
}
.creation_perso {
height: 1295px !important;
min-height: unset;
background-image: var(--background_page);
background-size: cover;
}
.page_aura {
height: 820px !important;
min-height: unset;
background-image: var(--background_page);
background-size: cover;
}
.page_caracteristiques {
height: 560px !important;
min-height: unset;
background-image: var(--background_page);
background-size: cover;
}
.page_competences {
height: 720px !important;
min-height: unset;
background-image: var(--background_page);
background-size: cover;
}
.page_equipement {
height: 1360px !important;
min-height: unset;
background-image: var(--background_page);
background-size: cover;
}
.page_note {
height: 1000px !important;
min-height: unset;
background-image: var(--background_page);
background-size: cover;
}
.page_config {
height: 490px !important;
min-height: unset;
background-image: var(--background_page);
background-size: cover;
padding-top: 60px;
}
.page_compendium {
height: auto !important;
min-height: 1180px;
background-image: var(--background_page);
background-size: contain;
}
.page_xp {
height: 1135px !important;
min-height: unset;
background-image: var(--background_page);
background-size: cover;
}
/* Affichage des page dynamique */
div.page_complete,
div.page_caracteristiques,
div.page_competences,
div.page_equipement,
div.page_note,
div.page_config,
div.page_aura,
div.page_compendium,
div.page_xp {
display: none;
}
.charsheet .choix_page[value="0"] ~ div.page_complete,
.charsheet .choix_page[value="1"] ~ div.page_caracteristiques,
.charsheet .choix_page[value="2"] ~ div.page_competences,
.charsheet .choix_page[value="3"] ~ div.page_equipement,
.charsheet .choix_page[value="4"] ~ div.page_note,
.charsheet .choix_page[value="5"] ~ div.page_config,
.charsheet .choix_page[value="6"] ~ div.page_aura,
.charsheet .choix_page[value="7"] ~ div.page_compendium,
.charsheet .choix_page[value="8"] ~ div.page_xp {
display: block;
}
/* Affichage avatar */
div.info_avatar,
div.info_avatar_aude,
div.info_avatar_einarth,
div.info_avatar_felix,
div.info_avatar_baudoin,
div.info_avatar_mathilde,
div.info_avatar_robert {
display: none;
}
.charsheet .choix_avatar[value="0"] ~ div.info_avatar,
.charsheet .choix_avatar[value="1"] ~ div.info_avatar_aude,
.charsheet .choix_avatar[value="2"] ~ div.info_avatar_einarth,
.charsheet .choix_avatar[value="3"] ~ div.info_avatar_felix,
.charsheet .choix_avatar[value="4"] ~ div.info_avatar_baudoin,
.charsheet .choix_avatar[value="5"] ~ div.info_avatar_mathilde,
.charsheet .choix_avatar[value="6"] ~ div.info_avatar_robert {
display: flex;
}
/* Reduction des cadres */
div.cadre_info,
div.cadre_info_reduit,
div.cadre_hero,
div.cadre_hero_reduit,
div.cadre_caracteristiques,
div.cadre_caracteristiques_reduit,
div.cadre_competence,
div.cadre_competence_reduit,
div.cadre_armement,
div.cadre_armement_reduit,
div.cadre_inventaire,
div.cadre_inventaire_reduit {
display: none;
}
.charsheet .voir_info[value="0"] ~ div.cadre_info,
.charsheet .voir_info[value="1"] ~ div.cadre_info_reduit,
.charsheet .voir_hero[value="0"] ~ div.cadre_hero,
.charsheet .voir_hero[value="1"] ~ div.cadre_hero_reduit,
.charsheet .voir_carac[value="0"] ~ div.cadre_caracteristiques,
.charsheet .voir_carac[value="1"] ~ div.cadre_caracteristiques_reduit,
.charsheet .voir_competence[value="0"] ~ div.cadre_competence,
.charsheet .voir_competence[value="1"] ~ div.cadre_competence_reduit,
.charsheet .voir_armement[value="0"] ~ div.cadre_armement,
.charsheet .voir_armement[value="1"] ~ div.cadre_armement_reduit,
.charsheet .voir_inventaire[value="0"] ~ div.cadre_inventaire,
.charsheet .voir_inventaire[value="1"] ~ div.cadre_inventaire_reduit {
display: block;
}
/* Structure générale de la page_personnage */
/* Structure section */
/* Zone informations */
.wrapper_titre {
display: grid;
grid-template-columns: 45% 2% 48%;
grid-auto-rows: 20px;
}
.titre_logo {
grid-column: 1 / 4;
grid-row: 1/10;
background-image: url(https://raw.githubusercontent.com/Roll20/roll20-character-sheets/refs/heads/master/Obscuritas/images/logo.webp);
background-repeat: no-repeat;
background-size: contain;
}
.titre_titre {
grid-column: 3;
grid-row: 1 / 10;
font-family: "Metamorphous", serif;
font-size: 48px;
font-weight: bold;
line-height: 55px;
display: inline-grid;
align-content: center;
text-align: center;
}
/* Zone Création personnage */
.creation_entete {
background: var(--black);
color: var(--white);
width: 55%;
padding: 15px;
border-radius: 10px;
display: flex;
justify-content: center;
text-align: center;
font-size: 14px;
line-height: 20px;
margin-bottom: 40px;
margin-left: 20px;
}
.creation_carac_decompte {
background: black;
color: var(--white);
width: 282px;
height: 35px;
z-index: 2;
display: flex;
justify-content: center;
align-items: center;
margin-left: 30px;
border-radius: 5px;
margin-top: 0px;
transform: rotate(1deg);
}
.creation_comp_decompte {
background: black;
color: var(--white);
width: 282px;
z-index: 2;
display: flex;
justify-content: center;
align-items: center;
margin-left: 356px;
border-radius: 5px;
transform: rotate(-1deg);
}
.creation_valider {
margin-left: 230px;
margin-top: -15px;
margin-bottom: 25px;
}
/* Zone XP personnage */
.wrapper_page_xp {
display: grid;
grid-template-columns: repeat(83, 10px);
grid-auto-rows: 30px;
}
div.xp_bloc_haut .wrapper_page_xp,
div.xp_bloc_bas .wrapper_page_xp {
display: grid;
grid-template-columns: repeat(83, 10px);
grid-auto-rows: 20px;
}
.entete_xp {
grid-column: 1 / 59;
grid-row: 1/7;
background: black;
color: var(--white);
font-size: 12px;
padding: 15px;
border-radius: 10px;
display: flex;
justify-content: center;
align-items: center;
line-height: 21px;
text-align: center;
transform: rotate(-0.3deg);
box-shadow: 2px 1px 6px 2px #0000009c;
}
.valider_xp,
.erreur_xp {
grid-column: 1 / 59;
grid-row: 1/7;
background: #22033c;
color: var(--white);
font-size: 12px;
padding: 15px;
border-radius: 10px;
display: flex;
justify-content: center;
align-items: center;
font-size: 15px;
line-height: 20px;
font-family: "Metamorphous", serif;
font-weight: bold;
text-align: center;
transform: rotate(-0.3deg);
padding: 0;
box-shadow: 2px 1px 6px 2px #0000009c;
}
.valider_xp {
background: transparent;
}
.xp_disponible {
grid-column: 63 / 80;
grid-row: 1/7;
background: black;
color: var(--white);
display: flex;
justify-content: center;
align-items: center;
border-radius: 10px;
box-shadow: 2px 1px 6px 2px #0000009c;
}
.xp_valider {
grid-column: 65 / 75;
grid-row: 1/5;
background: black;
color: var(--white);
display: flex;
justify-content: center;
align-items: center;
}
.wrapper_tableau_xp {
display: grid;
grid-template-columns: 8% 26% 2% 10% 9% 13% 2% 5% 2% 10% 2% 5%;
grid-auto-rows: 30px;
}
.wrapper_tableau_xp_derivees {
display: grid;
grid-template-columns: 5% 36% 2% 10% 9% 9% 2% 5% 2% 10% 2% 5%;
grid-auto-rows: 30px;
}
.wrapper_tableau_comp {
display: grid;
grid-template-columns: 6% 36% 2% 10% 7% 10% 2% 5% 2% 10% 2% 5%;
grid-auto-rows: 30px;
}
.xp_tableau_titre {
grid-column: 2;
grid-row: 1;
font-size: 14px;
display: flex;
align-items: center;
}
.xp_tableau_valeur_base {
grid-column: 4;
grid-row: 1;
}
.xp_tableau_image_up {
grid-column: 6;
grid-row: 1;
background-image: url(https://raw.githubusercontent.com/Roll20/roll20-character-sheets/refs/heads/master/Obscuritas/images/double_fleche.webp);
background-size: 20px auto;
background-repeat: no-repeat;
margin-top: 7px;
}
.xp_tableau_minus {
grid-column: 8;
grid-row: 1;
font-family: 'picto';
}
.xp_tableau_valeur_up {
grid-column: 10;
grid-row: 1;
}
.xp_tableau_plus {
grid-column: 12;
grid-row: 1;
font-family: 'picto';
}
.wrapper_xp_dispo {
display: grid;
grid-template-columns: 10% 80% 10%;
grid-auto-rows: 60px;
}
.xp_dispo_valeur {
grid-column: 2;
grid-row: 1;
display: flex;
justify-content: center;
align-items: center;
}
.xp_dispo_texte {
grid-column: 2;
grid-row: 2;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
border-top: 2px solid var(--white);
}
.xp_titre_bloc { grid-column: 1 / 28;
grid-row: 1/3;
margin-top: 0px;
margin-bottom: 0px;
margin-left: 20px;
margin-right: 0px;
background-image: var(--cadre_titre_gauche);
background-size: cover;
color: var(--white);
font-family: "Metamorphous", serif;
text-align: center;
transform: rotate(1deg);
font-size: 16px;
display: flex;
justify-content: center;
align-items: center;
padding-top: 2px;
}
.xp_bloc_haut {
grid-column: 1 / 80;
grid-row: 1/7;
}
.xp_bloc_carac_deriv {
grid-column: 1 / 80;
grid-row: 6/16;
background-image: var(--background_page);
background-size: cover;
border-radius: 10px;
box-shadow: 2px 1px 6px 2px #0000009c;
transform: rotate(0.8deg);
}
.xp_bloc_carac {
grid-column: 1 / 43;
grid-row: 6/16;
padding-top: 10px;
z-index: 1;
}
.xp_bloc_separateur {
grid-column: 44;
grid-row: 9/15;
border-left: 4px solid #000000ab;
z-index: 1;
}
.xp_bloc_derivees {
grid-column: 45/80;
grid-row: 6/16;
padding-top: 10px;
z-index: 1;
}
.xp_bloc_competences {
grid-column: 1 / 80;
grid-row: 17/31;
background-image: var(--background_page);
background-size: cover;
padding-top: 10px;
box-shadow: 2px 1px 6px 2px #0000009c;
border-radius: 10px;
transform: rotate(0.8deg);
margin-top: -10px;
}
.xp_block_comp_gauche {
grid-column: 1 / 39;
grid-row: 3/15;
padding-top: 10px;
z-index: 1;
margin-top: 20px;
}
.xp_block_comp_separateur {
grid-column: 40;
grid-row: 2/15;
padding-top: 10px;
border-left: 4px solid #000000ab;
z-index: 1;
margin-top: 40px;
margin-bottom: 15px;
}
.xp_block_comp_droite {
grid-column: 41/80;
grid-row: 3/15;
padding-top: 10px;
z-index: 1;
margin-top: 20px;
}
.xp_bloc_bas {
grid-column: 1 / 80;
grid-row: 32/37;
}
/* Boutton valider xp */
div.valider_xp,
div.erreur_xp {
display: none;
}
.charsheet .test_xp[value="0"] ~ div.valider_xp,
.charsheet .test_xp[value="1"] ~ div.erreur_xp {
display: flex;
}
/* SLIDER GM */
span.classic {
color: #000000de;
}
span.cache {
color: var(--text_input_info);
}
.charsheet input.sheet-prouesse-switch {
display: none;
}
.charsheet .classic,
.charsheet .cache
{
display: none;
}
.pouvoir_data .prouesse_roll {
display: inline-block;
}
.charsheet input.sheet-prouesse-switch {
display: none;
}
input.sheet-prouesse-switch:not(:checked) ~ span.classic,
input.sheet-prouesse-switch:checked ~ span.cache {
display: inline-block;
}
.slider_prouesse {
display: inline-block;
cursor: pointer;
background-color: #61504500;
-webkit-transition: .2s;
transition: .2s;
width: 30px;
height: 15px;
padding: 2px;
border: 1px solid #000000de;
box-shadow: 3px 2px 5px #435861ba;
margin-top: -2px;
margin-left: 46px;
}
.slider_prouesse:before {
display: inline-block;
content: "";
background-color: #000000de;
-webkit-transition: .2s;
transition: .2s;
width: 15px;
height: 15px;
}
input:checked + .slider_prouesse:before {
-webkit-transform: translateX(15px);
-ms-transform: translateX(15px);
transform: translateX(15px);
background-color: var(--text_input_info);
}
/* Rounded sliders */
.slider_prouesse.round_prouesse {
border-radius: 34px;
}
.slider_prouesse.round_prouesse:before {
border-radius: 50%;
}
/* Zone AURA */
/* Affichage dynamique marqueur */
div.marqueur_aura_0,
div.marqueur_aura_1,
div.marqueur_aura_2,
div.marqueur_aura_3,
div.marqueur_aura_4,
div.marqueur_aura_5,
div.marqueur_aura_6,
div.marqueur_aura_7,
div.marqueur_aura_8,
div.marqueur_aura_9,
div.marqueur_aura_10,
div.marqueur_aura_n1,
div.marqueur_aura_n2,
div.marqueur_aura_n3,
div.marqueur_aura_n4,
div.marqueur_aura_n5,
div.marqueur_aura_n6,
div.marqueur_aura_n7,
div.marqueur_aura_n8,
div.marqueur_aura_n9,
div.marqueur_aura_n10 {
display: none;
}
.charsheet .niveau_aura[value="0"] ~ div.marqueur_aura_0,
.charsheet .niveau_aura[value="1"] ~ div.marqueur_aura_1,
.charsheet .niveau_aura[value="2"] ~ div.marqueur_aura_2,
.charsheet .niveau_aura[value="3"] ~ div.marqueur_aura_3,
.charsheet .niveau_aura[value="4"] ~ div.marqueur_aura_4,
.charsheet .niveau_aura[value="5"] ~ div.marqueur_aura_5,
.charsheet .niveau_aura[value="6"] ~ div.marqueur_aura_6,
.charsheet .niveau_aura[value="7"] ~ div.marqueur_aura_7,
.charsheet .niveau_aura[value="8"] ~ div.marqueur_aura_8,
.charsheet .niveau_aura[value="9"] ~ div.marqueur_aura_9,
.charsheet .niveau_aura[value="10"] ~ div.marqueur_aura_10,
.charsheet .niveau_aura[value="-1"] ~ div.marqueur_aura_n1,
.charsheet .niveau_aura[value="-2"] ~ div.marqueur_aura_n2,
.charsheet .niveau_aura[value="-3"] ~ div.marqueur_aura_n3,
.charsheet .niveau_aura[value="-4"] ~ div.marqueur_aura_n4,
.charsheet .niveau_aura[value="-5"] ~ div.marqueur_aura_n5,
.charsheet .niveau_aura[value="-6"] ~ div.marqueur_aura_n6,
.charsheet .niveau_aura[value="-7"] ~ div.marqueur_aura_n7,
.charsheet .niveau_aura[value="-8"] ~ div.marqueur_aura_n8,
.charsheet .niveau_aura[value="-9"] ~ div.marqueur_aura_n9,
.charsheet .niveau_aura[value="-10"] ~ div.marqueur_aura_n10 {
display: flex;
}
.marqueur_aura_0,
.marqueur_aura_1,
.marqueur_aura_2,
.marqueur_aura_3,
.marqueur_aura_4,
.marqueur_aura_5,
.marqueur_aura_6,
.marqueur_aura_7,
.marqueur_aura_8,
.marqueur_aura_9,
.marqueur_aura_10,
.marqueur_aura_n1,
.marqueur_aura_n2,
.marqueur_aura_n3,
.marqueur_aura_n4,
.marqueur_aura_n5,
.marqueur_aura_n6,
.marqueur_aura_n7,
.marqueur_aura_n8,
.marqueur_aura_n9,
.marqueur_aura_n10 {
grid-column: 35 / 44;
grid-row: 8 / 17;
background-image: url(https://raw.githubusercontent.com/Roll20/roll20-character-sheets/refs/heads/master/Obscuritas/images/aura_marque.webp);
background-size: 85px 85px;
background-repeat: no-repeat;
margin-top: 2px;
margin-left: 4px;
display: flex;
align-items: center;
justify-content: center;
}
.marqueur_aura_1 {
grid-column: 38 / 47;
}
.marqueur_aura_2 {
grid-column: 41 / 50;
}
.marqueur_aura_3 {
grid-column: 43 / 52;
}
.marqueur_aura_4 {
grid-column: 45 / 54;
}
.marqueur_aura_5 {
grid-column: 48 / 57;
}
.marqueur_aura_6 {
grid-column: 51 / 60;
}
.marqueur_aura_7 {
grid-column: 53 / 62;
}
.marqueur_aura_8 {
grid-column: 56 / 65;
}
.marqueur_aura_9 {
grid-column: 58 / 67
}
.marqueur_aura_10 {
grid-column: 61 / 70;
}
.marqueur_aura_n1 {
grid-column: 32 / 41;
}
.marqueur_aura_n2 {
grid-column: 29 / 38;
}
.marqueur_aura_n3 {
grid-column: 27 / 36;
}
.marqueur_aura_n4 {
grid-column: 25 / 34;
}
.marqueur_aura_n5 {
grid-column: 22 / 31;
}
.marqueur_aura_n6 {
grid-column: 19 / 28;
}
.marqueur_aura_n7 {
grid-column: 17 / 26;
}
.marqueur_aura_n8 {
grid-column: 14 / 23;
}
.marqueur_aura_n9 {
grid-column: 12 / 21;
}
.marqueur_aura_n10 {
grid-column: 10 / 19;
}
.background_aura {
grid-column: 16 / 62;
grid-row: 13 / 33;
background-repeat: no-repeat;
margin-right: -2px;
margin-left: 6px;
border-radius: 0px 0px 90px 90px;
border: 2px solid var(--black);
box-shadow: 1px 3px 9px 4px #000000c9;
background-image: url(https://raw.githubusercontent.com/Roll20/roll20-character-sheets/refs/heads/master/Obscuritas/images/aura_fond2.webp);
background-size: 456px 200px;
}
.background_aura_heresie {
grid-column: 22 / 34;
grid-row: 13 / 33;
background-image: url(https://raw.githubusercontent.com/Roll20/roll20-character-sheets/refs/heads/master/Obscuritas/images/heresie_illustration.webp);
background-size: 107px 200px;
background-repeat: no-repeat;
}
.background_aura_heroisme {
grid-column: 46 / 62;
grid-row: 13 / 33;
background-image: url(https://raw.githubusercontent.com/Roll20/roll20-character-sheets/refs/heads/master/Obscuritas/images/heroisme_illustration.webp);
background-size: 107px 200px;
background-repeat: no-repeat;
}
.barre_aura {
grid-column: 10 / 80;
grid-row: 4 / 18;
background-image: url(https://raw.githubusercontent.com/Roll20/roll20-character-sheets/refs/heads/master/Obscuritas/images/aura_jauge_2.webp);
background-size: 600px 173px;
background-repeat: no-repeat;
}
.ange_aura {
grid-column: 67 / 83;
grid-row: 3 / 19;
background-image: url(https://raw.githubusercontent.com/Roll20/roll20-character-sheets/refs/heads/master/Obscuritas/images/aura_ange4.webp);
background-size: 103px 145px;
background-repeat: no-repeat;
margin-top: 0px;
margin-left: 40px;
}
.centre_aura {
grid-column: 32 / 80;
grid-row: 1 / 14;
background-image: url(https://raw.githubusercontent.com/Roll20/roll20-character-sheets/refs/heads/master/Obscuritas/images/aura_centre.webp);
background-size: 135px 135px;
background-repeat: no-repeat;
margin-top: -61px;
margin-left: 8px;
}
.demon_aura {
grid-column: 1 / 80;
grid-row: 3 / 16;
background-image: url(https://raw.githubusercontent.com/Roll20/roll20-character-sheets/refs/heads/master/Obscuritas/images/aura_demon.webp);
background-size: 100px 128px;
background-repeat: no-repeat;
margin-top: 3px;
margin-left: -12px;
}
.obscuritas {
grid-column: 6 / 80;
grid-row: 1;
font-size: 45px;
margin-top: -58px;
letter-spacing: -1.5px;
font-weight: bold;
}
.aeterna {
grid-column: 49 / 80;
grid-row: 1;
font-size: 45px;
margin-top: -58px;
letter-spacing: 2.5px;
font-weight: bold;
}
.boutton_aura {
grid-column: 32 / 47;
grid-row: 19 / 25;
display: flex;
justify-content: center;
align-items: center;
}
/* Zone informations */
.wrapper_zone_info {
display: grid;
grid-template-columns: 70% 2% 28%;
grid-auto-rows: 20px;
margin-top: 2px;
}
.info_data {
grid-column: 1/4;
grid-row: 1;
}
.info_titre {
grid-column: 1/4;
grid-row: 2;
font-weight: bold;
font-family: "Metamorphous", serif;
font-size: 10px;
}
.info_demi_data_gauche {
grid-column: 1;
grid-row: 1;
}
.info_demi_titre_gauche {
grid-column: 1;
grid-row: 2;
font-weight: bold;
font-family: "Metamorphous", serif;
font-size: 10px;
}
.info_demi_data_droite {
grid-column: 3;
grid-row: 1;
}
.info_demi_titre_droite {
grid-column: 3;
grid-row: 2;
font-weight: bold;
font-family: "Metamorphous", serif;
font-size: 10px;
}
.info_avatar,
.info_avatar_aude,
.info_avatar_einarth,
.info_avatar_felix,
.info_avatar_baudoin,
.info_avatar_mathilde,
.info_avatar_robert,
.zone_bouton_avatar {
display: flex;
vertical-align: middle;
align-items: center;
grid-row: 1 / 11;
grid-column: 1 / 4;
height: 170px;
width: 170px;
margin-top: 18px;
border-radius: 90px;
}
.info_avatar_aude {
background-image: url(https://raw.githubusercontent.com/Roll20/roll20-character-sheets/refs/heads/master/Obscuritas/images/token_aude1.webp);
background-size: 170px 170px;
}
.info_avatar_einarth {
background-image: url(https://raw.githubusercontent.com/Roll20/roll20-character-sheets/refs/heads/master/Obscuritas/images/token_einarth1.webp);
background-size: 170px 170px;
}
.info_avatar_felix {
background-image: url(https://raw.githubusercontent.com/Roll20/roll20-character-sheets/refs/heads/master/Obscuritas/images/token_felix1.webp);
background-size: 170px 170px;
}
.info_avatar_baudoin {
background-image: url(https://raw.githubusercontent.com/Roll20/roll20-character-sheets/refs/heads/master/Obscuritas/images/token_baudoin1.webp);
background-size: 170px 170px;
}
.info_avatar_mathilde {
background-image: url(https://raw.githubusercontent.com/Roll20/roll20-character-sheets/refs/heads/master/Obscuritas/images/token_mathilde1.webp);
background-size: 170px 170px;
}
.info_avatar_robert {
background-image: url(https://raw.githubusercontent.com/Roll20/roll20-character-sheets/refs/heads/master/Obscuritas/images/token_robert1.webp);
background-size: 170px 170px;
}
.wrapper_page_personnage {
display: grid;
grid-template-columns: repeat(83, 10px);
grid-auto-rows: 10px;
}
.wrapper_page_1 {
display: grid;
grid-template-columns: repeat(83, 1fr); /* Colonnes dynamiques */
grid-auto-rows: auto; /* Lignes ajustées au contenu */
gap: 10px; /* Espacement entre les colonnes et les lignes */
width: 100%; /* Adapte la largeur totale à celle du conteneur parent */
box-sizing: border-box; /* Inclut le padding/border dans la largeur */
}
.cadre_titre {
grid-column: 6 / 79;
grid-row: 1 / 22;
border: 2px solid #00000087;
padding: 10px;
box-shadow: 0px 0px 23px 9px #000000fc;
background: #ffffff52;
border-radius: 10px;
margin-bottom: 25px;
margin-top: 20px;
}
.cadre_aura {
grid-column: 2 / 83;
padding: 10px;
background: transparent;
border-radius: 90px;
margin-top: 70px;
margin-bottom: -15px;
background-size: contain;
background-blend-mode: lighten;
}
.cadre_info,
.cadre_info_reduit {
grid-column: 1 / 83;
border: 2px solid #00000087;
padding: 10px;
box-shadow: 0px 0px 5px 2px #000000c4;
background: #ffffff52;
border-radius: 10px;
margin-top: 15px;
background-image: var(--esoterik_info);
background-size: contain;
/* background-blend-mode: lighten; */
margin-top: 30px;
}
.cadre_hero,
.cadre_hero_reduit {
grid-column: 1 / 83;
border: 2px solid #00000087;
padding: 10px;
box-shadow: 0px 0px 5px 2px #000000c4;
background: #ffffff52;
border-radius: 10px;
margin-top: 15px;
background-image: var(--esoterik_equipement);
background-size: contain;
/* background-blend-mode: lighten; */
}
.cadre_caracteristiques,
.cadre_caracteristiques_reduit {
grid-column: 1 / 83;
border: 2px solid #00000087;
padding: 10px;
box-shadow: 0px 0px 5px 2px #000000c4;
background: #ffffff52;
border-radius: 10px;
margin-top: 15px;
background-image: var(--esoterik_carac);
background-size: contain;
background-blend-mode: lighten;
}
.cadre_competence,
.cadre_competence_reduit {
grid-column: 1 / 83;
border: 2px solid #00000087;
padding: 10px;
box-shadow: 0px 0px 5px 2px #000000c4;
background: #ffffff52;
border-radius: 10px;
margin-top: 15px;
background-image: var(--esoterik_competences);
background-size: contain;
background-blend-mode: lighten;
}
.cadre_armement,
.cadre_armement_reduit {
grid-column: 1 / 83;
border: 2px solid #00000087;
padding: 10px;
box-shadow: 0px 0px 5px 2px #000000c4;
background: #ffffff52;
border-radius: 10px;
margin-top: 15px;
background-image: var(--esoterik_equipement);
background-size: contain;
background-blend-mode: lighten;
}
.cadre_inventaire,
.cadre_inventaire_reduit {
grid-column: 1 / 83;
border: 2px solid #00000087;
padding: 10px;
box-shadow: 0px 0px 5px 2px #000000c4;
background: #ffffff52;
border-radius: 10px;
margin-top: 15px;
background-image: var(--esoterik_equipement);
background-size: contain;
background-blend-mode: lighten;
}
.cadre_carnet {
grid-column: 1 / 83;
border: 2px solid #00000087;
padding: 10px;
box-shadow: 0px 0px 5px 2px #000000c4;
background: #ffffff52;
border-radius: 10px;
margin-top: 15px;
background-image: var(--esoterik_equipement);
background-size: contain;
background-blend-mode: lighten;
}
.cadre_xp,
.cadre_creation {
grid-column: 1 / 83;
border: 2px solid #00000087;
padding: 10px;
box-shadow: 0px 0px 5px 2px #000000c4;
background: #ffffff52;
border-radius: 10px;
margin-top: 15px;
background-image: var(--esoterik_carac);
background-size: contain;
background-blend-mode: lighten;
}
.wrapper_zone_personnage {
display: grid;
grid-template-columns: repeat(83, 10px);
grid-auto-rows: 10px;
}
.zone_info_titre,
.zone_hero_titre,
.zone_caracteristiques_titre,
.zone_competence_titre,
.zone_armement_titre,
.zone_inventaire_titre,
.zone_carnet_titre,
.zone_compendium_titre {
grid-column: 1 / 36;
grid-row: 1 / 4;
margin-top: 0px;
margin-bottom: 0px;
margin-left: 0px;
margin-right: 0px;
background-image: var(--cadre_titre_gauche);
background-size: cover;
margin-top: -33px;
margin-bottom: 12px;
color: var(--white);
font-family: "Metamorphous", serif;
display: flex;
align-content: center;
vertical-align: middle;
text-align: center;
padding-left: 90px;
padding-top: 18px;
transform: rotate(1deg);
font-size: 22px;
}
.zone_hero_titre,
.zone_competence_titre,
.zone_inventaire_titre {
grid-column: 45 / 79;
grid-row: 1 / 4;
background-image: var(--cadre_titre_droite);
padding-left: 31px;
padding-top: 18px;
transform: rotate(-1deg);
}
.zone_info_gauche {
grid-column: 1 / 31;
grid-row: 4 / 27;
margin-top: 0px;
margin-bottom: 0px;
margin-left: 0px;
margin-right: 0px;
}
.zone_info_avatar {
grid-column: 32 / 49;
grid-row: 4 / 27;
margin-top: 0px;
margin-bottom: 0px;
margin-left: 0px;
margin-right: 0px;
}
.zone_info_background {
grid-column: 1 / 80;
grid-row: 28 / 39;
margin-top: -8px;
margin-bottom: 0px;
margin-left: 80px;
margin-right: 80px;
}
.zone_info_droite {
grid-column: 49 / 80;
grid-row: 4 / 27;
margin-top: 0px;
margin-bottom: 0px;
margin-left: 0px;
margin-right: 5px;
text-align: right;
}
/* HEROISME */
/* Affichage dynamique marqueur */
div.niveau_aura_0,
div.niveau_aura_1,
div.niveau_aura_2,
div.niveau_aura_3,
div.niveau_aura_m1,
div.niveau_aura_m2,
div.niveau_aura_m3 {
display: none;
grid-column: 1 / 4;
grid-row: 1 / 25;
}
.charsheet .valeur_aura[value="0"] ~ div.niveau_aura_0,
.charsheet .valeur_aura[value="1"] ~ div.niveau_aura_1,
.charsheet .valeur_aura[value="2"] ~ div.niveau_aura_2,
.charsheet .valeur_aura[value="3"] ~ div.niveau_aura_3,
.charsheet .valeur_aura[value="-1"] ~ div.niveau_aura_m1,
.charsheet .valeur_aura[value="-2"] ~ div.niveau_aura_m2,
.charsheet .valeur_aura[value="-3"] ~ div.niveau_aura_m3 {
display: flex;
}
.zone_hero_info {
grid-column: 2 / 43;
grid-row: 3 / 12;
display: flex;
justify-content: center;
align-items: center;
text-align: justify;
font-size: 12px;
}
.zone_hero_here_aura_hero {
grid-column: 1 / 80;
grid-row: 8 / 31;
box-shadow: 0px 0px 12px 6px #000000c4;
margin-left: 50px;
margin-right: 50px;
border-radius: 30px;
background-image: url(https://raw.githubusercontent.com/Roll20/roll20-character-sheets/refs/heads/master/Obscuritas/images/aura_fond2.webp);
background-size: 690px 226px;
border: 2px solid black;
color: var(--white);
}
.wrapper_zone_hero_here_aura_hero {
display: grid;
grid-template-columns: 33% 34% 33%;
grid-auto-rows: 60px;
}
.hero_titre_heresie {
grid-column: 1;
grid-row: 1;
display: flex;
justify-content: end;
align-items: center;
font-size: 20px;
font-weight: bold;
background: #4a2a27;
margin-right: -23px;
border-radius: 25px 0px 25px 0px;
border: 2px solid #000000;
padding-right: 31px;
}
.hero_heresie_data {
grid-column: 1/3;
grid-row: 2 / 4;
display: flex;
justify-content: center;
align-items: center;
margin-top: 35px;
margin-left: -74px;
}
.hero_heresie_illu {
grid-column: 1;
grid-row: 1 / 6;
display: flex;
justify-content: center;
align-items: center;
margin-top: -3px;
background-image: url(https://raw.githubusercontent.com/Roll20/roll20-character-sheets/refs/heads/master/Obscuritas/images/heresie_illustration.webp);
background-size: 107px 230px;
background-repeat: no-repeat;
margin-left: 5px;
}
.hero_titre_aura {
grid-column: 2;
grid-row: 1;
display: flex;
justify-content: center;
align-items: center;
font-size: 12px;
font-size: 20px;
font-weight: bold;
}
.hero_aura_data_habillage {
grid-column: 2;
grid-row: 2 / 3;
background-image: url(https://raw.githubusercontent.com/Roll20/roll20-character-sheets/refs/heads/master/Obscuritas/images/aura_marque.webp);
background-size: 100px 100px;
background-repeat: no-repeat;
display: flex;
align-items: center;
justify-content: center;
margin-left: 67px;
width: 100px;
height: 100px;
margin-top: 25px;
}
.hero_titre_heroisme {
grid-column: 3;
grid-row: 1;
display: flex;
align-items: center;
font-size: 20px;
font-weight: bold;
background: #424b6f;
margin-left: -30px;
border-radius: 0px 25px 0px 25px;
border: 2px solid #000000;
padding-left: 20px;
}
.hero_heroisme_data {
grid-column: 3;
grid-row: 2 / 4;
display: flex;
justify-content: center;
align-items: center;
margin-top: 35px;
margin-left: -170px;
}
.hero_heroisme_illu {
grid-column: 3;
grid-row: 1 / 6;
display: flex;
justify-content: center;
align-items: center;
margin-top: -3px;
background-image: url(https://raw.githubusercontent.com/Roll20/roll20-character-sheets/refs/heads/master/Obscuritas/images/heroisme_illustration.webp);
background-size: 107px 230px;
background-repeat: no-repeat;
margin-left: 110px;
}
.zone_hero_gauche {
grid-column: 1 / 28;
grid-row: 26 / 76;
margin-top: 0px;
margin-bottom: 0px;
margin-left: 0px;
margin-right: 0px;
}
.zone_hero_aura {
grid-column: 25/54;
grid-row: 26 / 78;
margin-top: 0px;
margin-bottom: 0px;
margin-left: 0px;
margin-right: 0px;
}
.zone_hero_droite {
grid-column: 53 / 80;
grid-row: 26 / 76;
margin-top: 0px;
margin-bottom: 0px;
margin-left: 0px;
margin-right: 5px;
}
.wrapper_zone_hero {
display: grid;
grid-template-columns: 27% 0% 73%;
grid-auto-rows: 20px;
}
.hero_data {
grid-column: 1/4;
grid-row: 1;
}
.hero_titre {
grid-column: 1/4;
grid-row: 2;
font-weight: bold;
font-family: "Metamorphous", serif;
font-size: 10px;
}
.hero_aura_data {
grid-column: 1 / 4;
grid-row: 1 / 4;
display: flex;
justify-content: center;
align-items: center;
}
.hero_aura_titre_effet {
grid-column: 1 / 4;
grid-row: 1/3;
display: flex;
justify-content: center;
align-items: center;
}
.hero_tableau_cout,
.hero_tableau_cout_4,
.hero_tableau_cout_7 {
grid-column: 1;
grid-row: 1/5;
display: flex;
justify-content: center;
align-items: center;
font-size: 11px;
line-height: 16px;
padding: 5px;
border: 1px solid black;
border-bottom: none;
}
.hero_tableau_cout_4 {
grid-row: 1/6;
}
.hero_tableau_cout_7 {
grid-row: 1 / 7;
}
.hero_tableau_effet,
.hero_tableau_effet_4,
.hero_tableau_effet_7 {
grid-column: 3;
grid-row: 1 / 5;
display: flex;
justify-content: center;
font-size: 10px;
line-height: 14px;
padding: 5px;
align-items: center;
border: 1px solid black;
border-left: none;
border-bottom: none;
}
.hero_tableau_effet_4 {
grid-row: 1 / 6;
}
.hero_tableau_effet_7 {
grid-row: 1 / 7;
}
.habillage_tableau {
grid-column: 1 / 4;
grid-row: 6 / 25;
background-image: var(--background_page);
background-size: cover;
box-shadow: 1px 2px 7px 1px #000000c4;
border: 1px solid black;
border-radius: 10px 10px 0px 0px;
}
/* CARACTERISTIQUES */
.wrapper_zone_carac {
display: grid;
grid-template-columns: repeat(auto-fill, 5px);
grid-auto-rows: 60px;
}
.switch_dice_slider {
grid-column: 70;
grid-row: 1;
}
.switch_dice_slider_data {
grid-column: 64 / 74;
grid-row: 1;
font-size: 10px;
text-align: right;
font-weight: bold;
}
.switch_dice_slider_comp {
grid-column: 70;
grid-row: 3;
}
.switch_dice_slider_data_comp {
grid-column: 66 / 74;
grid-row: 3;
font-size: 11px;
text-align: right;
font-weight: bold;
}
.bloc_pentacle {
grid-column: 1 / 91;
grid-row: 1 / 9;
margin-top: 25px;
margin-bottom: 30px;
margin-left: 0px;
margin-right: 0px;
}
.caracteristiques_pentacle {
grid-column: 15/75;
grid-row: 2/7;
margin-top: 0px;
margin-bottom: 0px;
margin-left: 0px;
margin-right: 0px;
text-align: center;
background-image: var(--hexagramme);
background-size: contain;
}
.caracteristiques_force_data {
grid-column: 37 / 53;
grid-row: 1 / 3;
width: 76px;
height: 72px;
margin-top: 12px;
margin-bottom: 0px;
margin-left: 0px;
margin-right: 0px;
text-align: center;
background-image: var(--cadre_input_carac);
background-size: contain;
background-repeat: no-repeat;
}
.caracteristiques_dexterite_data {
grid-column: 9;
grid-row: 2;
width: 76px;
height: 72px;
margin-top: 6px;
margin-bottom: 0px;
margin-left: 3px;
margin-right: 0px;
text-align: center;
background-image: var(--cadre_input_carac);
background-size: contain;
background-repeat: no-repeat;
}
.caracteristiques_constitution_data {
grid-column: 66;
grid-row: 2;
width: 76px;
height: 72px;
margin-top: 6px;
margin-bottom: 0px;
margin-left: -6px;
margin-right: 0px;
text-align: center;
background-image: var(--cadre_input_carac);
background-size: contain;
background-repeat: no-repeat;
}
.caracteristiques_intelligence_data {
grid-column: 69;
grid-row: 5;
width: 76px;
height: 72px;
margin-top: 4px;
margin-bottom: 0px;
margin-left: 0px;
margin-right: 0px;
text-align: center;
background-image: var(--cadre_input_carac);
background-size: contain;
background-repeat: no-repeat;
}
.caracteristiques_charisme_data {
grid-column: 6;
grid-row: 5;
width: 76px;
height: 72px;
margin-top: 4px;
margin-bottom: 0px;
margin-left: 2px;
margin-right: 0px;
text-align: center;
background-image: var(--cadre_input_carac);
background-size: contain;
background-repeat: no-repeat;
}
.caracteristiques_volonte_data {
grid-column: 37;
grid-row: 6;
width: 76px;
height: 72px;
margin-top: 40px;
margin-bottom: 0px;
margin-left: 2px;
margin-right: 0px;
text-align: center;
background-image: var(--cadre_input_carac);
background-size: contain;
background-repeat: no-repeat;
}
.caracteristiques_force_titre {
grid-column: 30;
grid-row: 1;
width: 150px;
height: 25px;
margin-top: -15px;
margin-bottom: 0px;
margin-left: -3px;
margin-right: 0px;
text-align: center;
}
.caracteristiques_dexterite_titre {
grid-column: 3;
grid-row: 1;
width: 150px;
height: 25px;
margin-top: 41px;
margin-bottom: 0px;
margin-left: -7px;
margin-right: 0px;
text-align: center;
}
.caracteristiques_constitution_titre {
grid-column: 59;
grid-row: 1;
width: 150px;
height: 25px;
margin-top: 41px;
margin-bottom: 0px;
margin-left: 0px;
margin-right: 0px;
text-align: center;
}
.caracteristiques_intelligence_titre {
grid-column: 64;
grid-row: 7;
width: 150px;
height: 25px;
margin-top: -43px;
margin-bottom: 0px;
margin-left: -11px;
margin-right: 0px;
text-align: center;
}
.caracteristiques_charisme_titre {
grid-column: 1;
grid-row: 7;
width: 150px;
height: 25px;
margin-top: -43px;
margin-bottom: 0px;
margin-left: -13px;
margin-right: 0px;
text-align: center;
}
.caracteristiques_volonte_titre {
grid-column: 30;
grid-row: 8;
width: 150px;
height: 25px;
margin-top: -9px;
margin-bottom: 0px;
margin-left: 0px;
margin-right: 0px;
text-align: center;
}
.caracteristiques_separateur {
grid-column: 82;
grid-row: 1 / 4;
width: 111px;
height: 510px;
margin-top: -41px;
margin-bottom: 0px;
margin-left: -3px;
margin-right: 0px;
background-image: var(--separateur_vertical_carac);
background-size: cover;
}
.caracteristiques_separateur_creation {
grid-column: 82;
grid-row: 1 / 4;
width: 86px;
height: 385px;
margin-top: -39px;
margin-bottom: 0px;
margin-left: 12px;
margin-right: 0px;
background-image: var(--separateur_vertical_carac);
background-size: cover;
}
.caracteristiques_derivees {
grid-column: 93 / 156;
grid-row: 1 / 8;
margin-top: 0px;
margin-bottom: -31px;
margin-left: 1px;
margin-right: 0px;
box-shadow: 2px 1px 6px 2px #0000009c;
padding: 20px;
padding-left: 35px;
border-radius: 0px 5px 5px 0px;
background-image: var(--background_page);
background-size: cover;
}
.wrapper_zone_derivees {
display: grid;
grid-template-columns: 0% 66% 1% 10% 2% 10% 4% 10% 0%;
grid-auto-rows: 30px;
font-size: 24px;
font-family: "Jim Nightshade";
}
.derivees_titre {
grid-column: 2;
grid-row: 1;
margin-top: 0px;
margin-bottom: 0px;
margin-left: 0px;
margin-right: 0px;
}
.derivees_data {
grid-column: 4;
grid-row: 1;
margin-top: -4px;
margin-bottom: 0px;
margin-left: -10px;
margin-right: 0px;
}
.derivees_sur {
grid-column: 6;
grid-row: 1;
margin-top: 0px;
margin-bottom: 0px;
margin-left: 0px;
margin-right: 0px;
font-size: 15px;
}
.derivees_max {
grid-column: 8;
grid-row: 1;
margin-top: -4px;
margin-bottom: 0px;
margin-left: -10px;
margin-right: 0px;
}
.derivees_bonus {
grid-column: 4 / 9;
grid-row: 1;
margin-top: 0px;
margin-bottom: 0px;
margin-left: 0px;
margin-right: 0px;
display: flex;
justify-content: center;
}
.derivees_separateur {
grid-column: 1;
grid-row: 1;
margin-top: 2px;
margin-bottom: 0px;
margin-left: -8px;
margin-right: 0px;
background-image: var(--separateur_horizontal_carac);
background-size: contain;
height: 13px;
width: 276px;
}
/* COMPETENCES */
.wrapper_zone_competence {
display: grid;
grid-template-columns: 6% 43% 1% 45% 0%;
grid-auto-rows: 32px;
}
.competence_gauche {
grid-column: 2;
grid-row: 2 / 21;
transform: rotate(-0.8deg);
box-shadow: -4px 3px 6px 4px #0000009c;
border-radius: 15px 0px 0px 15px;
margin: -4px;
padding: 15px;
padding-left: 30px;
margin-top: 9px;
margin-bottom: 15px;
background-image: var(--background_page);
background-size: cover;
}
.competence_droite {
grid-column: 4;
grid-row: 2 / 21;
transform: rotate(-0.8deg);
box-shadow: 4px 3px 6px 4px #000000c4;
border-radius: 0px 15px 15px 0px;
margin: -4px;
padding: 15px;
padding-left: 30px;
margin-top: 5px;
background-image: var(--background_page);
background-size: cover;
background-position: 25% 75%;
margin-bottom: 20px;
}
.competence_crane {
grid-column: 3;
grid-row: 1/4;
background-image: var(--separateur_crane_competence);
background-size: contain;
margin-top: -40px;
margin-left: -36px;
width: 81px;
transform: rotate(-1deg);
height: 115px;
}
.competence_separateur_centre {
grid-column: 3;
grid-row: 1 / 19;
background-image: var(--separateur_centre_competence);
background-size: cover;
margin-top: -56px;
margin-left: -12px;
width: 25px;
transform: rotate(-0.6deg);
height: 110%;
}
.competence_separateur_bas {
grid-column: 3;
grid-row: 17 / 21;
background-image: var(--separateur_croix_competence);
background-size: cover;
margin-top: 32px;
margin-left: -26px;
width: 65px;
transform: rotate(-1deg);
height: 94%;
}
.wrapper_tableau_competence {
display: grid;
grid-template-columns: 12% 0% 68% 0% 17% 0%;
grid-auto-rows: 17px;
font-size: 13px;
font-family: 'Metamorphous';
margin-top: 5px;
}
.competence_valeur_simple {
grid-column: 1;
grid-row: 1;
height: 37px;
width: 37px;
display: flex;
align-items: center;
justify-content: center;
margin-top: -1px;
background-image: url(https://raw.githubusercontent.com/Roll20/roll20-character-sheets/refs/heads/master/Obscuritas/images/cercle_carac.webp);
background-size: 37px 37px;
background-repeat: no-repeat;
}
.competence_valeur_double {
grid-column: 1;
grid-row: 1 / 3;
height: 71px;
width: 37px;
display: flex;
align-items: center;
justify-content: center;
margin-top: 0px;
background-image: url(https://raw.githubusercontent.com/Roll20/roll20-character-sheets/refs/heads/master/Obscuritas/images/cercle_carac.webp);
background-size: 37px 71px;
background-repeat: no-repeat;
}
.competence_nom_double {
grid-column: 3;
grid-row: 1/3;
border-bottom: none;
display: flex;
align-items: center;
padding: 5px;
padding-left: 10px;
padding-right: 0px;
border-bottom: 1px dotted #00000042;
}
.competence_nom_haut {
grid-column: 3;
grid-row: 1;
border-bottom: none;
display: flex;
align-items: center;
padding: 5px;
padding-left: 10px;
}
.competence_nom_bas {
grid-column: 3;
grid-row: 2;
border-bottom: none;
display: flex;
align-items: center;
padding: 5px;
padding-left: 10px;
border-bottom: 1px dotted #00000042;
}
.competence_final_double {
grid-column: 5;
grid-row: 1 / 3;
width: 35px;
height: 35px;
display: flex;
align-items: center;
justify-content: center;
background-image: url(https://raw.githubusercontent.com/Roll20/roll20-character-sheets/refs/heads/master/Obscuritas/images/carre_carac_finale.webp);
background-repeat: no-repeat;
background-size: 35px 35px;
}
.competence_final_haut {
grid-column: 5;
grid-row: 1;
display: flex;
align-items: center;
justify-content: center;
border-right: 1px dotted black;
}
.competence_final_bas {
grid-column: 5;
grid-row: 2;
display: flex;
align-items: center;
justify-content: center;
border-bottom: 1px dotted black;
border-right: 1px dotted black;
border-radius: 0px 0px 15px 0px;
}
/* ARMEMENT */
.wrapper_zone_armement {
display: grid;
grid-template-columns: 6% 43% 1% 45% 0%;
grid-auto-rows: 32px;
}
.bloc_armes {
grid-column: 1 / 6;
grid-row: 1 / 14;
margin: -4px;
margin-top: 9px;
margin-bottom: 30px;
margin-left: 5px;
margin-right: -32px;
padding: 10px;
padding-left: 10px;
transform: rotate(0.8deg);
box-shadow: -4px 3px 6px 4px #0000009c;
border-radius: 15px;
background-image: var(--background_page);
background-size: cover;
margin-bottom: 20px;
}
.bloc_armures {
grid-column: 1 / 6;
grid-row: 14 / 30;
margin: -4px;
margin-top: 9px;
margin-bottom: 30px;
margin-left: 5px;
margin-right: -32px;
padding: 15px;
padding-left: 30px;
transform: rotate(-0.4deg);
box-shadow: -4px 3px 6px 4px #0000009c;
border-radius: 15px;
background-image: var(--background_page);
background-size: cover;
margin-bottom: 20px;
}
.bloc_boucliers {
grid-column: 1 / 6;
grid-row: 30 / 40;
margin: -4px;
margin-top: 9px;
margin-bottom: 30px;
margin-left: 5px;
margin-right: -32px;
padding: 15px;
padding-left: 30px;
transform: rotate(0.8deg);
box-shadow: -4px 3px 6px 4px #0000009c;
border-radius: 15px;
background-image: var(--background_page);
background-size: cover;
margin-bottom: 20px;
}
.bloc_inventaire {
grid-column: 1 / 91;
grid-row: 45 / 55;
margin-top: 0px;
margin-bottom: 30px;
margin-left: 0px;
margin-right: 0px;
background: red;
}
.illustration_armes,
.illustration_boucliers,
.illustration_inventaire {
height: 56px;
margin-bottom: 15px;
background-image: var(--armes_image_1);
background-size: 429px 55px;
margin-left: 150px;
margin-right: 150px;
background-repeat: no-repeat;
transform: rotate(-1.5deg);
}
.wrapper_zone_armes,
.wrapper_zone_armes_titre {
display: grid;
grid-template-columns: 19% 1% 20% 1% 7% 1% 6% 2% 35% 1% 6%;
grid-auto-rows: 25px;
text-align: center;
font-size: 12px;
}
.wrapper_zone_armes_titre {
grid-auto-rows: 30px;
line-height: 30px;
border: none;
background-image: var(--armes_barre_titre);
color: var(--white);
font-weight: bold;
font-size: 12px;
background-size: cover;
}
.wrapper_zone_armes_separateur {
display: grid;
grid-template-columns: 14% 1% 20% 3% 7% 3% 6% 3% 35% 1% 6%;
grid-auto-rows: 10px;
}
.armes_type_unlock_1,
.armes_type_unlock_2,
.armes_type_unlock_3,
.armes_type_unlock_4,
.armes_type_lock_1,
.armes_type_lock_2,
.armes_type_lock_3,
.armes_type_lock_4,
.armes_cadenas_unlock_1,
.armes_cadenas_unlock_2,
.armes_cadenas_unlock_3,
.armes_cadenas_unlock_4,
.armes_cadenas_lock_1,
.armes_cadenas_lock_2,
.armes_cadenas_lock_3,
.armes_cadenas_lock_4 {
display: none;
}
.charsheet .arme1_etat[value="0"] ~ div.armes_type_unlock_1,
.charsheet .arme1_etat[value="0"] ~ div.armes_cadenas_unlock_1,
.charsheet .arme1_etat[value="1"] ~ div.armes_type_lock_1,
.charsheet .arme1_etat[value="1"] ~ div.armes_cadenas_lock_1,
.charsheet .arme2_etat[value="0"] ~ div.armes_type_unlock_2,
.charsheet .arme2_etat[value="0"] ~ div.armes_cadenas_unlock_2,
.charsheet .arme2_etat[value="1"] ~ div.armes_type_lock_2,
.charsheet .arme2_etat[value="1"] ~ div.armes_cadenas_lock_2,
.charsheet .arme3_etat[value="0"] ~ div.armes_type_unlock_3,
.charsheet .arme3_etat[value="0"] ~ div.armes_cadenas_unlock_3,
.charsheet .arme3_etat[value="1"] ~ div.armes_type_lock_3,
.charsheet .arme3_etat[value="1"] ~ div.armes_cadenas_lock_3,
.charsheet .arme4_etat[value="0"] ~ div.armes_type_unlock_4,
.charsheet .arme4_etat[value="0"] ~ div.armes_cadenas_unlock_4,
.charsheet .arme4_etat[value="1"] ~ div.armes_type_lock_4,
.charsheet .arme4_etat[value="1"] ~ div.armes_cadenas_lock_4 {
display: block;
}
.armes_type_unlock_1,
.armes_type_unlock_2,
.armes_type_unlock_3,
.armes_type_unlock_4,
.armes_type_lock_1,
.armes_type_lock_2,
.armes_type_lock_3,
.armes_type_lock_4 {
grid-column: 1;
grid-row: 1;
letter-spacing: -0.4px;
margin-left: 5px;
padding-left: 5px;
border-left: 1px solid var(--border_armes);
}
.armes_cadenas_unlock_1,
.armes_cadenas_unlock_2,
.armes_cadenas_unlock_3,
.armes_cadenas_unlock_4,
.armes_cadenas_lock_1,
.armes_cadenas_lock_2,
.armes_cadenas_lock_3,
.armes_cadenas_lock_4 {
grid-column: 1;
grid-row: 1;
font-family: "Pictos";
margin-left: 7px;
margin-top: 7px;
font-size: 12px;
color: grey;
width: 15px;
}
.armes_cadenas_unlock_1,
.armes_cadenas_unlock_2,
.armes_cadenas_unlock_3,
.armes_cadenas_unlock_4 {
color: var(--black);
}
.armes_nom {
grid-column: 3;
grid-row: 1;
}
.armes_degats {
grid-column: 5;
grid-row: 1;
}
.armes_portee {
grid-column: 7;
grid-row: 1;
}
.armes_effet {
grid-column: 9;
grid-row: 1;
}
.armes_prenotes {
grid-column: 1/3;
grid-row: 2;
margin-left: 5px;
border-left: 1px solid var(--border_armes);
}
.armes_notes {
grid-column: 3/10;
grid-row: 2;
}
.armes_roll {
grid-column: 11;
grid-row: 1/3;
display: flex;
align-items: center;
justify-content: center;
border-right: 1px solid var(--border_armes);
}
.armes_type_titre {
grid-column: 1;
grid-row: 1;
letter-spacing: -0.4px;
}
.armes_nom_titre {
grid-column: 3;
grid-row: 1;
letter-spacing: -0.4px;
}
.armes_degats_titre {
grid-column: 5;
grid-row: 1;
}
.armes_portee_titre {
grid-column: 7;
grid-row: 1;
}
.armes_effet_titre {
grid-column: 9;
grid-row: 1;
}
.armes_notes_titre {
grid-column: 3/10;
grid-row: 2;
}
.armes_roll_titre {
grid-column: 11;
grid-row: 1;
margin-left: -44px;
font-size: 10px;
letter-spacing: -0.7px;
}
.separateur_armes {
grid-column: 1/12;
grid-row: 1;
margin-left: 5px;
border-right: 1px solid var(--border_armes);
border-left: 1px solid var(--border_armes);
}
.separateur_armes_border {
grid-column: 1/12;
grid-row: 1;
margin-left: 5px;
border-right: 1px solid var(--border_armes);
border-left: 1px solid var(--border_armes);
border-bottom: 1px solid var(--border_armes);
}
.separateur_armes_border_end {
grid-column: 1/12;
grid-row: 1;
margin-left: 5px;
border-right: 1px solid var(--border_armes);
border-left: 1px solid var(--border_armes);
border-bottom: 1px solid var(--border_armes);
border-radius: 0px 0px 5px 5px;
}
.wrapper_bloc_armures {
display: grid;
grid-template-columns: 0% 15% 3% 83% 3%;
grid-auto-rows: 10px;
margin-top: 17px;
margin-left: -10px;
margin-right: 10px;
}
/* Affichage des page dynamique */
div.illustration_armures_plaque,
div.illustration_armures_maille,
div.illustration_armures_cuir,
div.illustration_armures_vetement,
div.illustration_armures_aucune {
display: none;
}
.charsheet .choix_armure[value="4"] ~ div.illustration_armures_plaque,
.charsheet .choix_armure[value="3"] ~ div.illustration_armures_maille,
.charsheet .choix_armure[value="2"] ~ div.illustration_armures_cuir,
.charsheet .choix_armure[value="1"] ~ div.illustration_armures_vetement,
.charsheet .choix_armure[value="0"] ~ div.illustration_armures_aucune {
display: block;
}
.illustration_armures_plaque {
grid-column: 2;
grid-row: 2 / 26;
background-image: var(--armure_dessin_plaque);
background-size: 99px 230px;
margin-left: 7px;
margin-top: 5px;
background-repeat: no-repeat;
}
.illustration_armures_maille {
grid-column: 2;
grid-row: 1 / 26;
background-image: var(--armure_dessin_maille);
background-size: 124px 320px;
margin-left: -10px;
margin-top: -14px;
}
.illustration_armures_cuir {
grid-column: 2;
grid-row: 1 / 26;
background-image: var(--armure_dessin_cuir);
background-size: 115px 191px;
margin-top: 36px;
margin-left: -3px;
background-repeat: no-repeat;
}
.illustration_armures_vetement {
grid-column: 2;
grid-row: 1 / 26;
background-image: var(--armure_dessin_tissu);
background-size: 120px 328px;
margin-top: -30px;
margin-left: -5px;
}
.illustration_armures_aucune {
grid-column: 2;
grid-row: 2/26;
background-image: var(--armure_dessin_aucune);
background-size: contain;
}
.tableau_armures {
grid-column: 4;
grid-row: 1;
}
.wrapper_zone_armures,
.wrapper_zone_armures_titre {
display: grid;
grid-template-columns: 3% 1% 17% 3% 0% 0% 7% 2% 5% 2% 6% 2% 5% 2% 8% 2% 9% 2% 11% 2% 9%;
grid-auto-rows: 25px;
font-size: 12px;
}
.wrapper_zone_armures_titre {
/* grid-template-columns: 3% 1% 20% 1% 0% 0% 9% 2% 5% 2% 5% 2% 5% 2% 5% 2% 5% 2% 5% 2% 5% 2% 14%; */
grid-auto-rows: 30px;
line-height: 30px;
border: none;
background-image: var(--armes_barre_titre);
color: var(--white);
font-weight: bold;
font-size: 10px;
background-size: cover;
}
.wrapper_zone_armures_separateur {
display: grid;
grid-template-columns: 3% 1% 17% 3% 0% 0% 7% 2% 5% 2% 6% 2% 5% 2% 8% 2% 9% 2% 11% 2% 9%;
grid-auto-rows: 10px;
}
.armures_equipee_titre {
grid-column: 1;
grid-row: 1;
letter-spacing: -0.4px;
}
.armures_malus_titre {
grid-column: 9/22;
grid-row: 1;
letter-spacing: -0.4px;
background-image: var(--armes_barre_titre);
color: var(--white);
font-weight: bold;
font-size: 10px;
background-size: 416px 30px;
text-align: center;
}
.armures_type_titre {
grid-column: 3;
grid-row: 1;
}
.armures_nom_titre {
grid-column: 5;
grid-row: 1;
}
.armures_encaissement_titre {
grid-column: 7;
grid-row: 1;
}
.armures_dexterite_titre {
grid-column: 9;
grid-row: 1;
}
.armures_athletisme_titre {
grid-column: 11;
grid-row: 1;
}
.armures_cac_titre {
grid-column: 13;
grid-row: 1;
}
.armures_pugilat_titre {
grid-column: 15;
grid-row: 1;
}
.armures_distance_titre {
grid-column: 17;
grid-row: 1;
}
.armures_discretion_titre {
grid-column: 19;
grid-row: 1;
}
.armures_esquive_titre {
grid-column: 21;
grid-row: 1;
}
.armures_equipee {
grid-column: 1;
grid-row: 1;
padding-top: 6px;
padding-left: 4px;
border-left: 1px solid var(--border_armes);
}
.armures_type {
grid-column: 3;
grid-row: 1;
}
.armures_nom {
grid-column: 5;
grid-row: 1;
}
.armures_encaissement {
grid-column: 7;
grid-row: 1;
}
.armures_dexterite {
grid-column: 9;
grid-row: 1;
}
.armures_athletisme {
grid-column: 11;
grid-row: 1;
}
.armures_cac {
grid-column: 13;
grid-row: 1;
}
.armures_pugilat {
grid-column: 15;
grid-row: 1;
}
.armures_distance {
grid-column: 17;
grid-row: 1;
}
.armures_discretion {
grid-column: 19;
grid-row: 1;
}
.armures_esquive {
grid-column: 21;
grid-row: 1;
border-right: 1px solid var(--border_armes);
margin-right: -8px;
padding-right: 10px;
}
.armures_prenotes {
grid-column: 1/7;
grid-row: 2;
border-left: 1px solid var(--border_armes);
}
.armures_notes {
grid-column: 7/22;
grid-row: 2;
border-right: 1px solid var(--border_armes);
margin-right: -8px;
padding-right: 10px;
}
.separateur_armures {
grid-column: 1/22;
grid-row: 1;
margin-left: 5px;
border-right: 1px solid var(--border_armes);
border-left: 1px solid var(--border_armes);
}
.separateur_armures_border {
grid-column: 1/22;
grid-row: 1;
border-right: 1px solid var(--border_armes);
border-left: 1px solid var(--border_armes);
border-bottom: 1px solid var(--border_armes);
margin-right: -8px;
margin-top: -1px;
}
.separateur_armures_border_end {
grid-column: 1/22;
grid-row: 3;
border-right: 1px solid var(--border_armes);
border-left: 1px solid var(--border_armes);
border-bottom: 1px solid var(--border_armes);
border-radius: 0px 0px 5px 5px;
margin-right: -8px;
}
.wrapper_bloc_boucliers {
display: grid;
grid-template-columns: 0% 70% 3% 25% 2%;
grid-auto-rows: 10px;
margin-top: 17px;
margin-left: -10px;
margin-right: 10px;
transform: rotate(0.2deg);
}
/* Affichage des page dynamique */
div.illustration_pavois,
div.illustration_bouclier_rond,
div.illustration_bouclier_aucun {
display: none;
}
.charsheet .choix_bouclier[value="2"] ~ div.illustration_pavois,
.charsheet .choix_bouclier[value="1"] ~ div.illustration_bouclier_rond,
.charsheet .choix_bouclier[value="0"] ~ div.illustration_bouclier_aucun {
display: block;
}
.illustration_bouclier_aucun {
grid-column: 4/6;
grid-row: 1 / 14;
background-image: var(--bouclier_dessin_rond);
background-size: 159px 150px;
margin-top: -25px;
margin-left: 17px;
background-repeat: no-repeat;
opacity: 0.5;
}
.illustration_bouclier_rond {
grid-column: 4/6;
grid-row: 1 / 14;
background-image: var(--bouclier_dessin_rond);
background-size: 159px 150px;
margin-top: -25px;
margin-left: 17px;
background-repeat: no-repeat;
}
.illustration_pavois {
grid-column: 4;
grid-row: 1 / 29;
background-image: var(--bouclier_dessin_pavois);
background-size: 131px 150px;
margin-top: -20px;
margin-left: 30px;
background-repeat: no-repeat;
}
/* .illustration_bouclier_aucun {
grid-column: 4;
grid-row: 1/15;
background-image: var(--bouclier_dessin_aucun);
background-size: 182px 133px;
margin-top: -8px;
margin-left: 0px;
background-repeat: no-repeat;
border-radius: 70px;
margin-bottom: 14px;
transform: rotate(3.7deg);
opacity: 0.9;
} */
.tableau_boucliers {
grid-column: 2;
grid-row: 1;
}
.wrapper_zone_boucliers,
.wrapper_zone_boucliers_titre {
display: grid;
grid-template-columns: 2% 4% 19% 2% 0% 0% 11% 1% 12% 1% 48% 1%;
grid-auto-rows: 25px;
font-size: 12px;
line-height: 33px;
}
.wrapper_zone_boucliers_titre {
grid-template-columns: 2% 9% 15% 2% 0% 0% 11% 1% 13% 14% 48% 1%;
grid-auto-rows: 30px;
line-height: 30px;
border: none;
background-image: var(--armes_barre_titre);
color: var(--white);
font-weight: bold;
font-size: 10px;
background-size: cover;
}
.boucliers_equipee_titre {
grid-column: 1;
grid-row: 1;
letter-spacing: -0.4px;
}
.boucliers_type_titre {
grid-column: 3;
grid-row: 1;
display: flex;
align-items: center;
}
.boucliers_nom_titre {
grid-column: 5;
grid-row: 1;
display: flex;
align-items: center;
}
.boucliers_parade_titre {
grid-column: 7;
grid-row: 1;
display: flex;
align-items: center;
}
.boucliers_esquive_titre {
grid-column: 9;
grid-row: 1;
display: flex;
align-items: center;
}
.boucliers_notes_titre {
grid-column: 11;
grid-row: 1;
display: flex;
align-items: center;
}
.boucliers_equipee {
grid-column: 1;
grid-row: 1;
letter-spacing: -0.4px;
padding-top: 2px;
padding-left: 4px;
border-left: 1px solid var(--border_armes);
}
.boucliers_type {
grid-column: 3;
grid-row: 1;
}
.boucliers_nom {
grid-column: 5;
grid-row: 1;
}
.boucliers_parade {
grid-column: 7;
grid-row: 1;
}
.boucliers_esquive {
grid-column: 9;
grid-row: 1;
}
.boucliers_notes {
grid-column: 11;
grid-row: 1;
border-right: 1px solid var(--border_armes);
padding-right: 7px;
}
.wrapper_zone_boucliers_separateur {
display: grid;
grid-template-columns: 1% 9% 15% 2% 0% 0% 11% 1% 13% 14% 32% 1%;
grid-auto-rows: 10px;
}
.separateur_boucliers {
grid-column: 1/12;
grid-row: 1;
margin-left: 5px;
border-right: 1px solid var(--border_armes);
border-left: 1px solid var(--border_armes);
}
.separateur_boucliers_border {
grid-column: 1/12;
grid-row: 1;
border-right: 1px solid var(--border_armes);
border-left: 1px solid var(--border_armes);
border-bottom: 1px solid var(--border_armes);
margin-right: -10px;
margin-top: -1px;
}
.separateur_boucliers_border_end {
grid-column: 1/12;
grid-row: 2;
border-right: 1px solid var(--border_armes);
border-left: 1px solid var(--border_armes);
border-bottom: 1px solid var(--border_armes);
border-radius: 0px 0px 5px 5px;
}
/* INVENTAIRE */
.wrapper_bloc_inventaire {
display: grid;
grid-template-columns: 17% 0% 73% 6% 9%;
grid-auto-rows: 10px;
margin-top: 17px;
margin-bottom: 20px;
}
.illustration_sac {
grid-column: 1;
grid-row: 1 / 13;
background-image: var(--dessin_sac);
background-size: 132px 207px;
margin-top: -72px;
background-repeat: no-repeat;
}
.texte_sac {
grid-column: 3 / 5;
grid-row: 1 / 22;
border-radius: 10px;
background-image: var(--background_page);
background-size: cover;
box-shadow: 4px 3px 6px 4px #000000c4;
margin-right: 37px;
margin-left: -50px;
}
.illustration_bourse {
grid-column: 4/6;
grid-row: 12 / 26;
background-image: var(--dessin_bourse);
background-size: 122px 119px;
background-repeat: no-repeat;
margin-left: -59px;
transform: rotate(-1.5deg);
overflow: visible;
display: flex;
align-items: center;
justify-content: center;
padding-top: 40px;
padding-left: 10px;
}
.inventaire_bloc_argent {
grid-column: 4/6;
grid-row: 19;
margin-left: -119px;
transform: rotate(-1.5deg);
overflow: visible;
display: flex;
align-items: center;
justify-content: center;
padding-top: 40px;
padding-left: 10px;
}
.inventaire_bloc_argent_titre {
grid-column: 4/6;
grid-row: 23;
margin-left: -79px;
transform: rotate(-1.5deg);
overflow: visible;
padding-top: 40px;
padding-left: 10px;
margin-right: 38px;
text-align: center;
}
.wrapper_bloc_argent {
display: grid;
grid-template-columns: 0% 33% 1% 33% 1% 33% 0%;
grid-auto-rows: 50px;
font-size: 12px;
font-weight: bold;
}
.wrapper_bloc_argent_titre {
display: grid;
grid-template-columns: 0% 33% 1% 33% 1% 33% 0%;
grid-auto-rows: 20px;
font-size: 11px;
font-weight: bold;
margin-top: -13px;
}
.inventaire_livre_data {
grid-column: 2;
grid-row: 1;
}
.inventaire_sous_data {
grid-column: 4;
grid-row: 1;
}
.inventaire_denier_data {
grid-column: 6;
grid-row: 1;
}
.inventaire_livre_titre {
grid-column: 2;
grid-row: 1;
}
.inventaire_sous_titre {
grid-column: 4;
grid-row: 1;
}
.inventaire_denier_titre {
grid-column: 6;
grid-row: 1;
}
.inventaire_livre_couleur {
grid-column: 2;
grid-row: 1;
background: gold;
border-radius: 30px;
}
.inventaire_sous_couleur {
grid-column: 4;
grid-row: 1;
background: #C0C0C0;
border-radius: 30px;
}
.inventaire_denier_couleur {
grid-column: 6;
grid-row: 1;
background: #614e1a;
border-radius: 30px;
}
/* NOTES */
.wrapper_bloc_note {
display: grid;
grid-template-columns: 5% 42% 42% 10% 0%;
grid-auto-rows: 10px;
margin-top: 17px;
margin-bottom: 20px;
transform: rotate(-0.8deg);
}
.illustration_carnet {
grid-column: 4;
grid-row: 1 / 13;
background-image: var(--dessin_carnet);
background-size: 152px 140px;
background-repeat: no-repeat;
margin-top: -40px;
margin-left: -72px;
}
.texte_note_gauche {
grid-column: 2;
grid-row: 1 / 90;
border-radius: 10px;
background-image: var(--background_page);
background-size: cover;
box-shadow: 4px 3px 6px 4px #000000c4;
}
.texte_note_droite {
grid-column: 3;
grid-row: 1 / 90;
border-radius: 10px;
background-image: var(--background_page);
background-size: cover;
box-shadow: 4px 3px 6px 4px #000000c4;
}
/* CONFIG */
.wrapper_config {
display: grid;
grid-template-columns: 1% 30% 0% 18% 2% 30% 0% 18% 0%;
grid-auto-rows: 10px;
margin-top: -1px;
}
.wrapper_config_1 {
display: grid;
grid-template-columns: 1% 30% 0% 18% 0% 30% 0% 18% 0%;
grid-auto-rows: 10px;
margin-top: -1px;
}
.config_titre_tableau {
grid-column: 2 / 10;
grid-row: 1 / 5;
padding: 5px;
border: 1px solid black;
display: flex;
justify-content: center;
align-items: center;
background: black;
color: var(--white);
}
.config_titre1 {
grid-column: 2;
grid-row: 1 / 6;
padding: 5px;
border: 1px solid black;
display: flex;
justify-content: center;
align-items: center;
}
.config_data1 {
grid-column: 4;
grid-row: 1 / 6;
padding: 5px;
border: 1px solid black;
display: flex;
justify-content: center;
align-items: center;
border-left: none;
}
.config_titre2 {
grid-column: 6;
grid-row: 1 / 6;
padding: 5px;
border: 1px solid black;
display: flex;
justify-content: center;
align-items: center;
}
.config_data2 {
grid-column: 8;
grid-row: 1 / 6;
padding: 5px;
border: 1px solid black;
display: flex;
justify-content: center;
align-items: center;
border-left: none;
}
/* COMPENDIUM */
/* Affichage des page dynamique */
div.compendium_sm,
div.compendium_hero,
div.compendium_combat,
div.compendium_combat_tableaux,
div.compendium_aura_priere,
div.compendium_aura,
div.compendium_possession,
div.compendium_equipement,
div.compendium_armes {
display: none;
}
.charsheet .choix_compendium[value="1"] ~ div.compendium_sm,
.charsheet .choix_compendium[value="2"] ~ div.compendium_hero,
.charsheet .choix_compendium[value="3"] ~ div.compendium_combat,
.charsheet .choix_compendium[value="4"] ~ div.compendium_combat_tableaux,
.charsheet .choix_compendium[value="5"] ~ div.compendium_aura_priere,
.charsheet .choix_compendium[value="6"] ~ div.compendium_aura,
.charsheet .choix_compendium[value="7"] ~ div.compendium_possession,
.charsheet .choix_compendium[value="8"] ~ div.compendium_equipement,
.charsheet .choix_compendium[value="9"] ~ div.compendium_armes
{
display: block;
}
.compendium_titre {
background: red;
}
.wrapper_compendium_1col {
display: grid
;
grid-template-columns: 0% 62% 0%;
grid-auto-rows: auto;
gap: 10px;
width: 100%;
box-sizing: border-box;
font-family: 'Playfair';
line-height: 20px;
font-size: 14px;
text-align: justify;
}
.compendium_1col_titre {
grid-column: 2;
font-size: 22px;
font-weight: bold;
margin-top: 30px;
}
.compendium_1col_texte {
grid-column: 2;
padding-left: 20px;
}
.compendium_1col_separateur {
grid-column: 2;
border-bottom: 2px solid black;
}
.wrapper_compendium_2col {
display: grid;
grid-template-columns: 0% 48% 4% 48% 0%;
grid-auto-rows: auto; /* Lignes ajustées au contenu */
gap: 10px; /* Espacement entre les colonnes et les lignes */
width: 100%; /* Adapte la largeur totale à celle du conteneur parent */
box-sizing: border-box; /* Inclut le padding/border dans la largeur */
font-family: 'Playfair';
line-height: 20px;
font-size: 14px;
}
.compendium_2col_titre {
grid-column: 2/5;
font-size: 22px;
font-weight: bold;
margin-top: 30px;
}
.compendium_2col_texte_gauche {
grid-column: 2;
padding-left: 20px;
}
.compendium_2col_texte_droite {
grid-column: 4;
padding-left: 20px;
}
.compendium_2col_separateur {
grid-column: 3;
}
.wrapper_compendium_3col {
display: grid;
grid-template-columns: 33% 25% 6% 33%;
grid-auto-rows: auto;
gap: 10px;
width: 100%;
box-sizing: border-box;
font-family: 'Playfair';
line-height: 20px;
font-size: 14px;
text-align: justify;
}
.compendium_3col_titre {
grid-column: 1/3;
font-size: 22px;
font-weight: bold;
margin-top: 30px;
}
.compendium_3col_texte {
grid-column: 1/3;
padding-left: 20px;
}
.compendium_3col_illustration_effet {
grid-column: 4;
background-image: url(https://raw.githubusercontent.com/Roll20/roll20-character-sheets/refs/heads/master/Obscuritas/images/dessin_heroique_effet.webp);
background-size: 268px 312px;
width: 263px;
height: 308px;
margin-top: -66px;
overflow: visible;
}
.compendium_3col_illustration_restriction {
grid-column: 4;
background-image: url(https://raw.githubusercontent.com/Roll20/roll20-character-sheets/refs/heads/master/Obscuritas/images/dessin_heroique_restriction.webp);
background-size: 262px 334px;
width: 263px;
height: 308px;
margin-top: -168px;
overflow: visible;
}
.wrapper_compendium_tableau_3col {
display: grid;
grid-template-columns: 2% 30% 30% 30%;
grid-auto-rows: auto;
width: 100%;
box-sizing: border-box;
font-family: 'Playfair';
line-height: 17px;
font-size: 13px;
text-align: center;
}
.wrapper_compendium_tableau_3col_equipement {
display: grid;
grid-template-columns: 2% 30% 20% 40%;
grid-auto-rows: auto;
width: 100%;
box-sizing: border-box;
font-family: 'Playfair';
line-height: 13px;
font-size: 13px;
text-align: center;
}
.wrapper_compendium_tableau_4col_equipement {
display: grid;
grid-template-columns: 2% 0% 21% 50% 16%;
grid-auto-rows: auto;
width: 100%;
box-sizing: border-box;
font-family: 'Playfair';
line-height: 13px;
font-size: 13px;
text-align: center;
}
.compendium_tableau_type {
grid-column: 2;
display: flex;
justify-content: center;
align-items: center;
border: 1px solid black;
border-top: none;
background: #ffffff45;
}
.compendium_tableau_action {
grid-column: 3;
display: flex;
justify-content: center;
align-items: center;
border: 1px solid black;
border-top: none;
border-left: none;
padding: 10px;
background: #ffffff45;
}
.compendium_tableau_effet {
grid-column: 4;
display: flex;
justify-content: center;
align-items: center;
border: 1px solid black;
border-top: none;
border-left: none;
padding: 10px;
background: #ffffff45;
}
.compendium_tableau_categorie {
grid-column: 2;
display: flex;
justify-content: center;
align-items: center;
border: 1px solid black;
border-top: none;
background: #ffffff45;
}
.compendium_tableau_nom {
grid-column: 3;
display: flex;
justify-content: center;
align-items: center;
border: 1px solid black;
border-top: none;
padding: 10px;
background: #ffffff45;
}
.compendium_tableau_description {
grid-column: 4;
display: flex;
justify-content: center;
align-items: center;
border: 1px solid black;
border-top: none;
border-left: none;
padding: 10px;
background: #ffffff45;
}
.compendium_tableau_prix {
grid-column: 5;
display: flex;
justify-content: center;
align-items: center;
border: 1px solid black;
border-top: none;
border-left: none;
padding: 10px;
background: #ffffff45;
}
/* ROLL TEMPLATE */
.sheet-rolltemplate-thanatos {
text-align: center;
--echec_2: #bc0000e0;
--echec_3: #bc0000e0;
--echec_1: #b016a0;
--reussite_3: #036c03;
--reussite_2: #035bae;
--reussite_1: #9e9c02d9;
--blanc_roll: #fcfcfdf0;
--blanc_roll_dark: #fcfcfdf0;
--noir_roll: #000004;
--box_shadow: 2px 2px 10px 1px #000000f2;
--box_shadow_dark: 0px 1px 4px 3px #ffffff69;
--background_color: #fcfcfdf0;
--background_color_dark: #fcfcfdf0;
--roll_middle: url(https://raw.githubusercontent.com/ctotone/JdR/refs/heads/main/Obscuritas/images/rolltemplate_middle.png);
--roll_background: url(https://raw.githubusercontent.com/ctotone/JdR/refs/heads/main/Obscuritas/images/rolltemplate_background.png);
--roll_top: url(https://raw.githubusercontent.com/ctotone/JdR/refs/heads/main/Obscuritas/images/rolltemplate_top.png);
--roll_bottom: url(https://raw.githubusercontent.com/ctotone/JdR/refs/heads/main/Obscuritas/images/rolltemplate_bottom.png);
--roll_separation:url(https://raw.githubusercontent.com/ctotone/JdR/refs/heads/main/Obscuritas/images/rolltemplate_separation.png);
width: 260px;
height: auto;
}
.sheet-rolltemplate-thanatos .sheet-rolltemplate-darkmode {
--echec_2: #a80303e0;
--echec_3: #a80303e0;
--echec_1: #9303bb;
--reussite_3: #036c03;
--reussite_2: #004280;
--reussite_1: #8a8809;
--blanc_roll: #fcfcfde5;
--noir_roll: #000004;
--box_shadow: 0px 1px 4px 3px #ffffff69;
--background_color: #fcfcfde5;
}
.sheet-rolltemplate-thanatos .sheet-toper {
background: var(--roll_top);
background-size: cover;
background-repeat: no-repeat;
height: 4px;
width: 263px;
margin-left: -4px;
}
.sheet-rolltemplate-thanatos .sheet-bottom {
background-image: var(--roll_bottom);
background-size: cover;
background-repeat: no-repeat;
height: 4px;
width: 265px;
margin-left: -2px;
}
.sheet-rolltemplate-thanatos .sheet-separateur {
background-image: var(--roll_separation);
background-size: 260px;
background-repeat: no-repeat;
height: 10px;
width: 255px;
margin-left: 3px;
}
.sheet-rolltemplate-thanatos .sheet-rolltemplate-thanatos-center {
text-align: center;
width: auto;
}
.sheet-rolltemplate-thanatos .sheet-rolltemplate-thanatos-color {
background-image: var(--roll_middle);
background-size: 260px 500px;
box-shadow: var(--box_shadow);
}
.sheet-rolltemplate-thanatos .sheet-rolltemplate-thanatos-background {
background: var(--background_color);
background-size: 260px 500px;
background-size: cover;
background-image: var(--roll_background)
}
.sheet-rolltemplate-thanatos .sheet-titre {
display: grid;
grid-template-columns: 32% 68%;
background: var(--noir_roll);
height: 75px;
}
.sheet-rolltemplate-thanatos .sheet-rolltemplate-thanatos-titre-roll,
.sheet-rolltemplate-thanatos .sheet-portrait_roll,
.sheet-rolltemplate-thanatos .sheet-rolltemplate-thanatos-header {
word-wrap: break-word;
letter-spacing: -0.7px;
padding-top: 17px;
padding-bottom: 12px;
font-weight: bold;
width: auto;
margin-left: 0px;
background: var(--noir_roll);
margin-top: -1px;
margin-bottom: -5px;
color: var(--blanc_roll);
font-size: 26px;
/* font-family: "EB Garamond", serif; */
font-family: "Jim Nightshade";
line-height: 23px;
}
.sheet-rolltemplate-thanatos .sheet-rolltemplate-thanatos-subheader,
.sheet-rolltemplate-thanatos .sheet-rolltemplate-thanatos-subheader-echec-tragique,
.sheet-rolltemplate-thanatos .sheet-rolltemplate-thanatos-subheader-echec-critique,
.sheet-rolltemplate-thanatos .sheet-rolltemplate-thanatos-subheader-echec,
.sheet-rolltemplate-thanatos .sheet-rolltemplate-thanatos-subheader-reussite-exceptionnelle,
.sheet-rolltemplate-thanatos .sheet-rolltemplate-thanatos-subheader-reussite-critique,
.sheet-rolltemplate-thanatos .sheet-rolltemplate-thanatos-subheader-reussite {
background-color: transparent;
color: #000000b3;
font-size: 60px;
letter-spacing: 0px;
padding: 15px;
margin-top: 15px;
font-family: "EB Garamond", serif;
/* font-family: "Jim Nightshade"; */
width: auto;
}
.sheet-rolltemplate-thanatos .sheet-rolltemplate-thanatos-subheader-echec-tragique {
color: var(--echec_1);
}
.sheet-rolltemplate-thanatos .sheet-rolltemplate-thanatos-subheader-echec-critique{
color: var(--echec_1);
font-family: "Shadows into light";
font-weight: bold;
}
.sheet-rolltemplate-thanatos .sheet-rolltemplate-thanatos-subheader-echec{
color: var(--echec_3);
}
.sheet-rolltemplate-thanatos .sheet-rolltemplate-thanatos-subheader-reussite-exceptionnelle {
color: var(--reussite_1);
}
.sheet-rolltemplate-thanatos .sheet-rolltemplate-thanatos-subheader-reussite-critique {
color: var(--reussite_2);
font-family: "Kaushan script";
}
.sheet-rolltemplate-thanatos .sheet-rolltemplate-thanatos-subheader-reussite {
color: var(--reussite_3);
}
.sheet-rolltemplate-thanatos .sheet-template-thanatos-result {
font-size: 36px;
font-family: "Playfair", serif;
padding: 15px;
}
.sheet-rolltemplate-thanatos .sheet-template-thanatos-texte,
.sheet-rolltemplate-thanatos .sheet-template-thanatos-texte-echec-tragique,
.sheet-rolltemplate-thanatos .sheet-template-thanatos-texte-echec-critique,
.sheet-rolltemplate-thanatos .sheet-template-thanatos-texte-echec,
.sheet-rolltemplate-thanatos .sheet-template-thanatos-texte-reussite-exceptionnelle,
.sheet-rolltemplate-thanatos .sheet-template-thanatos-texte-reussite-critique,
.sheet-rolltemplate-thanatos .sheet-template-thanatos-texte-reussite {
font-size: 20px;
line-height: 20px;
font-family: "Playfair", serif;
/* font-family: "EB Garamond", serif; */
padding: 5px;
padding-top: 15px;
letter-spacing: -0.7px;
margin-bottom: 10px;
width: auto;
}
.sheet-rolltemplate-thanatos .sheet-template-thanatos-rappel,
.sheet-rolltemplate-thanatos .sheet-template-thanatos-rappel-echec-tragique,
.sheet-rolltemplate-thanatos .sheet-template-thanatos-rappel-echec-critique,
.sheet-rolltemplate-thanatos .sheet-template-thanatos-rappel-echec,
.sheet-rolltemplate-thanatos .sheet-template-thanatos-rappel-reussite-exceptionnelle,
.sheet-rolltemplate-thanatos .sheet-template-thanatos-rappel-reussite-critique,
.sheet-rolltemplate-thanatos .sheet-template-thanatos-rappel-reussite {
padding: 5px;
padding-bottom: 6px;
letter-spacing: -0.2px;
color: var(--blanc_roll);
width: auto;
margin-left: 0px;
background: var(--noir_roll);
margin-top: -5px;
font-family: "Jim Nightshade";
/* font-family: "EB Garamond", serif; */
font-size: 18px;
line-height: 10px;
padding-top: 10px;
}
.sheet-rolltemplate-thanatos .sheet-template-thanatos-texte-echec-tragique,
.sheet-rolltemplate-thanatos .sheet-template-thanatos-rappel-echec-tragique {
color: var(--echec_1);
}
.sheet-rolltemplate-thanatos .sheet-template-thanatos-texte-echec-critique,
.sheet-rolltemplate-thanatos .sheet-template-thanatos-rappel-echec-critique{
color: var(--echec_1);
font-family: "Shadows into light";
font-weight: bold;
font-size: 25px;
}
.sheet-rolltemplate-thanatos .sheet-template-thanatos-texte-echec,
.sheet-rolltemplate-thanatos .sheet-template-thanatos-rappel-echec {
color: var(--echec_3);
}
.sheet-rolltemplate-thanatos .sheet-template-thanatos-texte-reussite-exceptionnelle,
.sheet-rolltemplate-thanatos .sheet-template-thanatos-rappel-reussite-exceptionnelle {
color: var(--reussite_1);
}
.sheet-rolltemplate-thanatos .sheet-template-thanatos-texte-reussite-critique,
.sheet-rolltemplate-thanatos .sheet-template-thanatos-rappel-reussite-critique {
color: var(--reussite_2);
font-family: "Kaushan script";
}
.sheet-rolltemplate-thanatos .sheet-template-thanatos-texte-reussite,
.sheet-rolltemplate-thanatos .sheet-template-thanatos-rappel-reussite {
color: var(--reussite_3);
}
.sheet-rolltemplate-thanatos .sheet-template-thanatos-succeeds {
color: #148c00;
}
.sheet-rolltemplate-thanatos .sheet-template-thanatos-misses {
color: #a90000;
}
.sheet-rolltemplate-thanatos .inlinerollresult {
background-color: transparent !important;
border: none !important;
color: unset !important;
}
.sheet-rolltemplate-thanatos-header .inlinerollresult {
background-color: transparent !important;
border: none !important;
color: unset !important;
}
.sheet-rolltemplate-thanatos .inlinerollresult.fullcrit {
background-color: transparent !important;
border: none !important;
color: unset !important;
}
.sheet-rolltemplate-thanatos .inlinerollresult.fullfail {
background-color: transparent !important;
border: none !important;
color: unset !important;
}
.sheet-rolltemplate-thanatos .inlinerollresult.importantroll {
background-color: transparent !important;
border: none !important;
color: unset !important;
}
.sheet-rolltemplate-thanatos .sheet-content {
display: grid;
grid-template-columns: 50% 50%;
line-height: 13px;
color: #000000b3;
margin-left: 2px;
}
.sheet-rolltemplate-thanatos .sheet-content > div{
padding: 5px;
}
/* Left column */
.sheet-rolltemplate-thanatos .sheet-content .sheet-key {
font-weight: bold;
padding-right: 2px;
text-align: right;
font-size: 13px;
}
/* Right column */
.sheet-rolltemplate-thanatos .sheet-content .sheet-value {
padding-right: 5px;
text-align: left;
font-size: 13px;
}
/* Make even-numbered rows grey */
.sheet-rolltemplate-thanatos .sheet-content :nth-child(4n+3),
.sheet-rolltemplate-thanatos .sheet-content :nth-child(4n) {
background: #51515136;
color: unset !important;
}
/* Boutons liens */
/* Roll Buttons */
.sheet-rolltemplate-thanatos a[href^='!'],
.sheet-rolltemplate-thanatos a[href^='~'],
.sheet-rolltemplate-thanatos a[href^='`']{
color: #000000e8;
border: none;
background: none;
font-size: 14px;
line-height: 6px;
text-align: left;
}
.sheet-rolltemplate-thanatos a[href^='!']:hover,
.sheet-rolltemplate-thanatos a[href^='~']:hover,
.sheet-rolltemplate-thanatos a[href^='`']:hover{
top: -1px;
color: #ff0000cb;
}
/* hyperlinks */
.sheet-rolltemplate-thanatos a:not([href^='~']):not([href^='!']):not([href^='`']){
font-weight: bold;
color:#3f8aa6;
}
.sheet-rolltemplate-thanatos a:not([href^='~']):not([href^='!']):not([href^='`']):hover {
font-weight: bold;
color:#70c0dd;
}
.sheet-rolltemplate-thanatos a:not([href^='~']):not([href^='!']):not([href^='`']):visited{
color:purple;
}
.sheet-rolltemplate-thanatos a:not([href^='~']):not([href^='!']):not([href^='`']):visited:hover{
color:rgb(187, 45, 187);
}