Files
roll20-character-sheets/Arkhanval/arkhanval.css
T
2025-10-22 17:40:48 +02:00

3666 lines
82 KiB
CSS

/* Import de font */
@import url('https://fonts.googleapis.com/css2?family=Faculty+Glyphic&family=Radio+Canada+Big:ital,wght@1,700&family=Radio+Canada:ital,wght@0,300..700;1,300..700&display=swap');
/*font-family: "Radio Canada", sans-serif;
font-family: "Radio Canada Big", sans-serif;
font-family: "Faculty Glyphic", sans-serif;*/
/* Apparence générale de la page */
.charsheet {
--black: #474a38;
--white: #fcfcfd;
--font_playfair: "Playfair", serif;
--borderdev: 1px solid red;
--couleur_dotted: #00000078;
--text_input: #000000bd;
--text_hover: #a23e33;
--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: #b9ad9a;
--color_text_button: #000002c4;
--color_text_button_selected: #000002c4;
--color_button_hover: #d7d2d2;
--color_text_hover: #000000;
--color_ombre_button: #575757a8;
font-family: "Radio Canada", sans-serif;
letter-spacing: -0.8px;
color: var(--black);
font-size: 19px;
line-height: 25px;
margin: 0px;
}
.sheet-darkmode .charsheet {
--black_text: #000002;
--white_text: #fcfcfd;
}
.sheetform {
background-color: #ffffff;
width: 800px;
}
.sheet-darkmode .sheetform {
background-color: #1b1b1b;
}
::placeholder {
color: rgb(43, 43, 43);
font-size: 13px;
margin-top: 0px;
}
/* Mise en page */
span.apparence {
margin-left: 5px;
margin-right: 5px;
font-size: 14px;
}
span.picto {
font-family: "pictos";
font-size: 16px;
}
/* Les input */
.charsheet input {
border: none;
outline: none;
resize: none;
padding: 0px;
cursor: pointer;
overflow: hidden;
color: var(--black);
font-size: 18px;
line-height: 25px;
background: transparent;
}
/* Suppression des fleches pour input number */
.charsheet input[type=number]::-webkit-inner-spin-button,
.charsheet input[type=number]::-webkit-outer-spin-button {
-webkit-appearance: none;
margin: 0;
}
input[type="number"] {
-moz-appearance: textfield;
appearance: auto;
}
.charsheet textarea {
border: none;
outline: none;
resize: none;
background-color: transparent;
}
/* Checkbox custom */
input[type="checkbox"] {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background-color: var(--white_text);
margin: 0;
font: inherit;
color: var(--white);
width: 13px;
height: 13px !important;
border: 2px solid #a13d32;
border-radius: 15px;
}
input[type="checkbox"]:checked {
background-color: #a13d32;
}
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: -19px;
}
input[type="checkbox"]:focus {
outline: none;
}
/* CUSTOM CHECKBOX */
.charsheet .blessure_box {
display: none;
}
.charsheet .itd-checkbox-container {
display: inline;
position: relative;
padding-left: 20px;
margin-bottom: 12px;
cursor: pointer;
font-size: 22px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
font-size: 15px;
}
.charsheet .itd-checkbox-container input {
position: absolute;
opacity: 0;
cursor: pointer;
height: 0;
width: 0;
}
.charsheet .itd-checkbox-checkmark {
position: absolute;
top: -2px;
left: 0;
height: 8px;
width: 8px;
background-color: transparent;
border-radius: 0px;
transform: rotate(45deg);
border: 1px solid #2b2b2b;
}
.charsheet .itd-checkbox-container:hover input~.itd-checkbox-checkmark {
background-color: #cccccc75;
}
.charsheet .itd-checkbox-container input:checked~.itd-checkbox-checkmark {
background-color: #2b2b2b;
}
.charsheet .itd-checkbox-checkmark:after {
content: "";
position: absolute;
display: none;
}
/* Show the checkmark when checked */
.charsheet .itd-checkbox-container input:checked~.itd-checkbox-checkmark:after {
display: block;
}
/* Custom checkmark */
.charsheet .itd-checkbox-container .itd-checkbox-checkmark:after {
left: 6px;
top: 2px;
width: 5px;
height: 10px;
border: none;
}
.charsheet .itd-checkbox-checkmark:checked + label::before {
content: "";
display: flex;
justify-content: center;
color: var(--black);
font-size: 17px;
font-weight: bold;
margin-top: -19px;
}
.charsheet input[type="number"] {
appearance: unset !important;
-moz-appearance: textfield !important;
}
.charsheet button[type=action].button_creation_suivant
.charsheet button[type=action].button_texte::before,
.charsheet button[type=roll].button_texte::before,
.charsheet button[type=action].button_picto::before,
.charsheet button[type=roll].button_picto::before,
.charsheet button[type=action].button_reset_ark::before,
.charsheet button[type=roll].button_reset_ark::before,
.charsheet button[type=action].button_annonce::before,
.charsheet button[type=roll].button_annonce::before,
.charsheet button[type=action].button_creation::before,
.charsheet button[type=action].button_creation1::before,
.charsheet button[type=action].button_creation2::before {
content: '';
}
.charsheet button[type=action].button_texte,
.charsheet button[type=roll].button_texte,
.charsheet button[type=action].button_picto,
.charsheet button[type=roll].button_picto,
.charsheet button[type=action].button_reset_ark,
.charsheet button[type=roll].button_reset_ark,
.charsheet button[type=action].button_annonce,
.charsheet button[type=roll].button_annonce {
padding: 0;
margin: 0;
box-shadow: none;
text-shadow: none;
background: none;
text-align: right;
height: 20px;
border: none;
border-radius: 1px;
color: var(--black);
font-size: 11px;
line-height: 25px;
text-transform: uppercase;
letter-spacing: -0.8px;
margin-top: 3px;
}
.charsheet button[type=action].button_picto,
.charsheet button[type=roll].button_picto {
font-family: dicefontd20;
font-size: 20px;
margin-top: 0px;
}
.charsheet button[type=action].button_annonce,
.charsheet button[type=roll].button_annonce {
font-family: pictos;
font-size: 20px;
margin-top: 0px;
color: #555555b2;
}
.charsheet button[type=action].button_reset_ark,
.charsheet button[type=roll].button_reset_ark {
height: 53px;
width: 53px;
border-radius: 35px;
color: transparent;
text-align: center;
opacity: 0;
transition-property: opacity;
transition-duration: 2s;
transition-delay: 0s;
background-image: url(https://raw.githubusercontent.com/ctotone/JdR/refs/heads/main/Arkhanval/images/result_1.png);
background-size: cover;
font-family: dicefontd8;
font-size: 40px;
}
.charsheet button[type=action].button_blessure,
.charsheet button[type=roll].button_reset_blessure {
height: 53px;
width: 53px;
border-radius: 35px;
color: transparent;
text-align: center;
opacity: 0;
transition-property: opacity;
transition-duration: 2s;
transition-delay: 0s;
background-image: url(https://raw.githubusercontent.com/ctotone/JdR/refs/heads/main/Arkhanval/images/result_1.png);
background-size: cover;
}
.charsheet button[type=action].button_creation {
border: none;
background-image: url(https://imgsrv.roll20.net/?src=https%3A//raw.githubusercontent.com/ctotone/JdR/refs/heads/main/Arkhanval/images/fond_titre_roll.png);
background-size: cover;
background-repeat: no-repeat;
color: white;
height: 26px;
width: 110px;
text-align: center;
box-shadow: 3px 3px 5px 1px black;
}
.charsheet button[type=action].button_creation1 {
background-image: url(https://raw.githubusercontent.com/ctotone/JdR/refs/heads/main/Arkhanval/images/button_feuille.png);
background-size: 251px 242px;
width: 240px;
height: 240px;
border: none;
box-shadow: 3px 3px 5px 1px black;
}
.charsheet button[type=action].button_creation2 {
background-image: url(https://raw.githubusercontent.com/ctotone/JdR/refs/heads/main/Arkhanval/images/button_creer.png);
background-size: 251px 242px;
width: 240px;
height: 240px;
border: none;
box-shadow: 3px 3px 5px 1px black;
}
.charsheet button[type=action].button_texte:hover,
.charsheet button[type=roll].button_texte:hover,
.charsheet button[type=action].button_picto:hover,
.charsheet button[type=roll].button_picto:hover,
.charsheet button[type=action].button_annonce:hover,
.charsheet button[type=roll].button_annonce:hover {
color: var(--text_hover);
}
.charsheet button[type=action].button_reset_ark:hover,
.charsheet button[type=roll].button_reset_ark:hover {
background-color: #a13d32;
/* transition-delay:1s; */
color: white;
opacity:1;
background-image: url(https://raw.githubusercontent.com/ctotone/JdR/refs/heads/main/Arkhanval/images/result_1.png);
background-size: cover;
}
.charsheet button[type=action].button_reset_blessure:hover,
.charsheet button[type=roll].button_reset_blessure:hover {
background-color: #a13d32;
/* transition-delay:1s; */
color: white;
opacity:1;
background-image: url(https://raw.githubusercontent.com/ctotone/JdR/refs/heads/main/Arkhanval/images/result_1.png);
background-size: cover;
}
.charsheet button[type=action].button_creation1:hover,
.charsheet button[type=action].button_creation2:hover {
box-shadow: 3px 3px 5px 1px red;
}
/* Gestion des affichage */
div.personnage,
div.creation,
div.creation_header_general {
display: none;
}
.charsheet .creation_active[value="1"] ~ div.creation,
.charsheet .creation_active[value="1"] ~ div.creation_header_general,
.charsheet .creation_active[value="0"] ~ div.personnage {
display: block;
}
div.page_1,
div.page_2,
div.page_3,
div.page_4,
div.page_5,
div.page_7 {
display: none;
}
.charsheet .choix_page[value="0"] ~ div.page_1,
.charsheet .choix_page[value="1"] ~ div.page_2,
.charsheet .choix_page[value="2"] ~ div.page_3,
.charsheet .choix_page[value="3"] ~ div.page_4,
.charsheet .choix_page[value="4"] ~ div.page_5,
.charsheet .choix_page[value="7"] ~ div.page_7 {
display: block;
}
.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="7"] ~ div .button7 {color: var(--color_text_button_selected); background: var(--color_background_button_selected);}
div .button0 {
background-color: #f5eadb;
}
div .button1,
div .button2,
div .button3,
div .button4 {
margin-left: -5px;
background-color: #f5eadb;
}
div .button5,
div .button6,
div .button7 {
float: right;
margin-top: 2px;
background-color: #f5eadb;
}
div.arkcoeur_1,
div.arkcoeur_2,
div.arkcoeur_3,
div.arkcoeur_4,
div.arkcoeur_5,
div.arkcoeur_6,
div.arkcoeur_7,
div.arkcoeur_8,
div.arkcoeur_9,
div.arkcoeur_10 {
display: none;
}
.charsheet .arkoeur_valeur_class[value="0"] ~ div.arkcoeur_1,
.charsheet .arkoeur_valeur_class[value="1"] ~ div.arkcoeur_1,
.charsheet .arkoeur_valeur_class[value="2"] ~ div.arkcoeur_2,
.charsheet .arkoeur_valeur_class[value="3"] ~ div.arkcoeur_3,
.charsheet .arkoeur_valeur_class[value="4"] ~ div.arkcoeur_4,
.charsheet .arkoeur_valeur_class[value="5"] ~ div.arkcoeur_5,
.charsheet .arkoeur_valeur_class[value="6"] ~ div.arkcoeur_6,
.charsheet .arkoeur_valeur_class[value="7"] ~ div.arkcoeur_7,
.charsheet .arkoeur_valeur_class[value="8"] ~ div.arkcoeur_8,
.charsheet .arkoeur_valeur_class[value="9"] ~ div.arkcoeur_9,
.charsheet .arkoeur_valeur_class[value="10"] ~ div.arkcoeur_10
{
display: block;
}
div.page1_popup_espece,
div.peuple_1,
div.peuple_2,
div.peuple_3,
div.peuple_4,
div.peuple_5,
div.peuple_6,
div.peuple_7,
div.peuple_8,
div.peuple_9,
div.peuple_10,
div.peuple_11,
div.peuple_12,
div.peuple_13 {
display: none;
}
.charsheet .popup_open[value="1"] ~ div.page1_popup_espece,
.charsheet .choix_peuple[value="1"] ~ div.peuple_1,
.charsheet .choix_peuple[value="2"] ~ div.peuple_2,
.charsheet .choix_peuple[value="3"] ~ div.peuple_3,
.charsheet .choix_peuple[value="4"] ~ div.peuple_4,
.charsheet .choix_peuple[value="5"] ~ div.peuple_5,
.charsheet .choix_peuple[value="6"] ~ div.peuple_6,
.charsheet .choix_peuple[value="7"] ~ div.peuple_7,
.charsheet .choix_peuple[value="8"] ~ div.peuple_8,
.charsheet .choix_peuple[value="9"] ~ div.peuple_9,
.charsheet .choix_peuple[value="10"] ~ div.peuple_10,
.charsheet .choix_peuple[value="11"] ~ div.peuple_11,
.charsheet .choix_peuple[value="12"] ~ div.peuple_12,
.charsheet .choix_peuple[value="13"] ~ div.peuple_13
{
display: block;
}
div.creation_4_archetype1_info_1,
div.creation_4_archetype1_info_2,
div.creation_4_archetype1_info_3,
div.creation_4_archetype1_info_4,
div.creation_4_archetype1_info_5,
div.creation_4_archetype1_info_6,
div.creation_4_archetype1_info_7,
div.creation_4_archetype1_info_8,
div.creation_4_archetype2_info_1,
div.creation_4_archetype2_info_2,
div.creation_4_archetype2_info_3,
div.creation_4_archetype2_info_4,
div.creation_4_archetype2_info_5,
div.creation_4_archetype2_info_6,
div.creation_4_archetype2_info_7,
div.creation_4_archetype2_info_8 {
display: none;
}
.charsheet .choix_archetype_1[value="1"] ~ div.creation_4_archetype1_info_1,
.charsheet .choix_archetype_1[value="2"] ~ div.creation_4_archetype1_info_2,
.charsheet .choix_archetype_1[value="3"] ~ div.creation_4_archetype1_info_3,
.charsheet .choix_archetype_1[value="4"] ~ div.creation_4_archetype1_info_4,
.charsheet .choix_archetype_1[value="5"] ~ div.creation_4_archetype1_info_5,
.charsheet .choix_archetype_1[value="6"] ~ div.creation_4_archetype1_info_6,
.charsheet .choix_archetype_1[value="7"] ~ div.creation_4_archetype1_info_7,
.charsheet .choix_archetype_1[value="8"] ~ div.creation_4_archetype1_info_8,
.charsheet .choix_archetype_2[value="1"] ~ div.creation_4_archetype2_info_1,
.charsheet .choix_archetype_2[value="2"] ~ div.creation_4_archetype2_info_2,
.charsheet .choix_archetype_2[value="3"] ~ div.creation_4_archetype2_info_3,
.charsheet .choix_archetype_2[value="4"] ~ div.creation_4_archetype2_info_4,
.charsheet .choix_archetype_2[value="5"] ~ div.creation_4_archetype2_info_5,
.charsheet .choix_archetype_2[value="6"] ~ div.creation_4_archetype2_info_6,
.charsheet .choix_archetype_2[value="7"] ~ div.creation_4_archetype2_info_7,
.charsheet .choix_archetype_2[value="8"] ~ div.creation_4_archetype2_info_8 {
display: block;
}
/* Modelage input et autres */
.charsheet input.input_classique_1,
.charsheet input.input_custom,
.charsheet input.input_sortilege_nom,
.charsheet input.input_sortilege_encart,
.charsheet input.input_sortilege_encart_gros,
.charsheet input.input_specialite {
width: 100% !important;
border: none;
border-radius: 1px;
margin-top: 0px;
margin-right: 0px;
margin-left: 0px;
padding-left: 0px;
letter-spacing: 0px;
color: var(--text_input);
font-family: "Faculty Glyphic", sans-serif;
}
.charsheet input.input_classique_1 {
height: 30px !important;
border-radius: 1px;
margin-top: -10px;
margin-right: 0px;
margin-left: 0px;
padding-left: 0px;
letter-spacing: 0px;
text-align: center;
font-size: 16px;
}
.charsheet input.input_custom {
width: 97% !important;
margin-right: 2px;
height: 15px;
font-size: 11px;
text-transform: uppercase;
letter-spacing: -0.8px;
text-align: right;
padding-bottom: 3px;
font-family: "Radio Canada", sans-serif;
}
.charsheet input.input_sortilege_nom {
width: 100% !important;
margin-right: 0px;
height: 27px;
font-size: 13px;
text-transform: uppercase;
/* letter-spacing: -0.8px; */
padding-bottom: 5px;
text-align: left;
padding-left: 5px;
}
.charsheet input.input_sortilege_encart,
.charsheet input.input_sortilege_encart_gros {
width: 100% !important;
margin-right: 0px;
height: 43px;
font-size: 11px;
text-transform: uppercase;
letter-spacing: -0.8px;
padding-left: 0px;
padding-bottom: 0px;
text-align: center;
margin-top: 2px;
}
.charsheet input.input_sortilege_encart_gros {
font-size: 13px;
}
.charsheet input.input_carac,
.charsheet input.input_carac_valeur,
.charsheet input.input_carac_xp,
.charsheet input.input_ark_valeur,
.charsheet input.input_malus_fd {
width: 20px !important;
height: 20px;
border: none;
border-radius: 1px;
background-color: transparent;
color: var(--black);
text-align: center;
font-size: 14px;
padding: 0;
padding-bottom: 1px;
}
.charsheet input.input_carac {
padding-bottom: 0px;
}
.charsheet input.input_carac_valeur,
.charsheet input.input_carac_xp {
padding-bottom: 2px;
margin-top: 0px;
margin-bottom: 1px;
}
.charsheet input.input_ark_valeur {
padding-bottom: 0px;
margin-top: 0px;
margin-bottom: 0px;
width: 42px !important;
height: 34px !important;
font-size: 20px;
padding-top: 2px;
}
.charsheet input.input_malus_fd {
padding-bottom: 4px;
margin-top: 0px;
margin-bottom: 0px;
width: 28px !important;
height: 23px !important;
font-size: 18px;
padding-top: 0px;
}
.charsheet textarea.specialite {
width: 96%;
height: 90%;
letter-spacing: -0.8px;
/* background-color: #00800029; */
font-family: "Faculty Glyphic", sans-serif;
}
.charsheet input.input_specialite {
font-size : 12px;
}
.charsheet textarea.equipement {
width: 100%;
height: 100%;
letter-spacing: -0.8px;
padding: 10px;
font-family: "Faculty Glyphic", sans-serif;
/* background-color: #00800029; */
}
.charsheet textarea.sortilege_description {
width: 99%;
height: 87%;
letter-spacing: -0.8px;
font-family: "Faculty Glyphic", sans-serif;
/* background-color: #00800029; */
}
.charsheet textarea.carnet_route {
margin-left: 104px;
margin-top: 99px;
width: 71%;
height: 79%;
letter-spacing: -0.8px;
font-family: "Faculty Glyphic", sans-serif;
background-color: #ffffff80;
padding: 20px;
}
.charsheet select.input_peuple,
.charsheet select.input_archetype {
border: none;
border-radius: 1px;
outline: none;
cursor: pointer;
margin-bottom: 0px;
margin-top: -5px;
margin-right: 0px;
margin-left: 0px;
padding-left: 2px;
padding-right: 10px;
padding-bottom: 0px;
width: 347px;
text-align: center;
height: 27px;
font-family: "Faculty Glyphic", sans-serif;
font-size: 16px;
color: var(--text_input);
}
.charsheet select.input_archetype {
width: 168px;
background: transparent;
}
/* Cadre des pages */
div.page_1 {
width: 830px;
height: 1462px;
background-image: url(https://raw.githubusercontent.com/ctotone/JdR/refs/heads/main/Arkhanval/images/background_personnage_full.webp);
background-size: cover;
background-repeat: no-repeat;
}
div.page_2 {
width: 830px;
height: 1112px;
background-image: url(https://raw.githubusercontent.com/ctotone/JdR/refs/heads/main/Arkhanval/images/background_page2.webp);
background-size: cover;
background-repeat: no-repeat;
}
div.page_3 {
width: 830px;
height: 2073px;
background-image: url(https://raw.githubusercontent.com/ctotone/JdR/refs/heads/main/Arkhanval/images/background_magie.webp);
background-size: cover;
background-repeat: no-repeat;
}
div.page_5 {
width: 830px;
height: 1112px;
background-image: url(https://raw.githubusercontent.com/ctotone/JdR/refs/heads/main/Arkhanval/images/background_carnet.webp);
background-size: cover;
background-repeat: no-repeat;
}
div.page_7 {
width: 830px;
height: 800px;
background-image: url(https://raw.githubusercontent.com/ctotone/JdR/refs/heads/main/Arkhanval/images/background_carnet.webp);
background-size: cover;
background-repeat: no-repeat;
}
div.creation_header_general {
width: 830px;
height: 117px;
background-image: url(https://raw.githubusercontent.com/ctotone/JdR/refs/heads/main/Arkhanval/images/background_header_creation.webp);
background-size: contain;
font-size: 13px;
}
div.creation {
width: 830px;
/* height: 1112px; */
background-image: url(https://raw.githubusercontent.com/ctotone/JdR/refs/heads/main/Arkhanval/images/background_fond_creation.webp);
background-size: 830px auto;
font-size: 13px;
}
/* Structure générale de la page_1 */
.wrapper_page_personnage {
display: grid;
grid-template-columns: repeat(83, 10px);;
grid-auto-rows: 10px;
}
.page1_zone_nom {
grid-column: 5 / 80;
grid-row: 6 / 15;
margin-top: 0px;
margin-left: 0px;
margin-right: 0px;
/* background-color: #44ff0073; */
}
.page1_zone_artisan {
grid-column: 9 / 31;
grid-row: 16 / 35;
margin-top: 0px;
margin-left: 0px;
margin-right: 0px;
/* background-color: #44ff0073; */
}
.page1_zone_artiste {
grid-column: 9 / 31;
grid-row: 36 / 55;
margin-top: 0px;
margin-left: 0px;
margin-right: 0px;
/* background-color: #44ff0073; */
}
.page1_zone_combattant {
grid-column: 9 / 31;
grid-row: 56 / 75;
margin-top: 0px;
margin-left: 0px;
margin-right: 0px;
/* background-color: #44ff0073; */
}
.page1_zone_erudit {
grid-column: 9 / 31;
grid-row: 77 / 95;
margin-top: 0px;
margin-left: 0px;
margin-right: 0px;
/* background-color: #44ff0073; */
}
.page1_zone_explorateur {
grid-column: 54 / 76;
grid-row: 16 / 35;
margin-top: 0px;
margin-left: 0px;
margin-right: 0px;
/* background-color: #44ff0073; */
}
.page1_zone_magicien {
grid-column: 54 / 76;
grid-row: 36 / 55;
margin-top: 0px;
margin-left: 0px;
margin-right: 0px;
/* background-color: #44ff0073; */
}
.page1_zone_roublard {
grid-column: 54 / 76;
grid-row: 56 / 75;
margin-top: 0px;
margin-left: 0px;
margin-right: 0px;
/* background-color: #44ff0073; */
}
.page1_zone_stratege {
grid-column: 54 / 76;
grid-row: 77 / 95;
margin-top: 0px;
margin-left: 0px;
margin-right: 0px;
/* background-color: #44ff0073; */
}
.page1_zone_ark {
grid-column: 33 / 52;
grid-row: 16 / 66;
margin-top: -9px;
margin-left: 0px;
margin-right: 0px;
/* background-color: #44ff0073; */
}
.page1_zone_blessure {
grid-column: 33 / 52;
grid-row: 69 / 90;
margin-top: 0px;
margin-left: 0px;
margin-right: 0px;
/* background-color: #44ff0073; */
}
.page1_zone_specialite_1 {
grid-column: 6 / 42;
grid-row: 100 / 144;
margin-top: 4px;
margin-left: 10px;
margin-right: 0px;
/* background-color: #44ff0073; */
}
.page1_zone_specialite_2 {
grid-column: 43 / 80;
grid-row: 100 / 144;
margin-top: 4px;
margin-left: 15px;
margin-right: 5px;
/* background-color: #44ff0073; */
}
.page1_popup_espece {
grid-column: 11 / 75;
grid-row: 16 / 48;
margin-top: 0px;
margin-left: 0px;
margin-right: 0px;
border: 2px solid gray;
border-radius: 15px;
padding: 10px;
font-size: 14px;
background-image: url(https://raw.githubusercontent.com/ctotone/JdR/refs/heads/main/Arkhanval/images/background_popup.png);
background-size: cover;
box-shadow: 0px 0px 7px 4px #793028de;
z-index: 1;
}
/* Structure zone Popup */
.popup_titre {
grid-column: 21 / 59;
grid-row: 1;
margin-top: 10px;
margin-left: 0px;
margin-right: 0px;
background-color: #44ff0073;
font-size: 28px;
text-decoration: underline;
}
.popup_A1,
.popup_A2,
.popup_A3,
.popup_A4,
.popup_A5,
.popup_A6,
.popup_A7,
.popup_A8,
.popup_A9,
.popup_A10,
.popup_A11,
.popup_A12,
.popup_A13 {
grid-column: 1 / 20;
grid-row: 5 / 30;
margin-top: 0px;
margin-left: 0px;
margin-right: 0px;
/* background-color: #44ff0073; */
background-size: contain;
background-repeat: no-repeat;
}
.popup_A1 {
background-image: url(https://raw.githubusercontent.com/ctotone/JdR/refs/heads/main/Arkhanval/images/peuple_01-min.png);
margin-top: -23px;
margin-left: -11px;
}
.popup_A2 {
background-image: url(https://raw.githubusercontent.com/ctotone/JdR/refs/heads/main/Arkhanval/images/peuple_02-min.png);
margin-top: -23px;
margin-left: -7px;
}
.popup_A3 {
background-image: url(https://raw.githubusercontent.com/ctotone/JdR/refs/heads/main/Arkhanval/images/peuple_03-min.png);
margin-left: -59px;
width: 322px;
margin-top: -9px;
}
.popup_A4 {
background-image: url(https://raw.githubusercontent.com/ctotone/JdR/refs/heads/main/Arkhanval/images/peuple_04-min.png);
}
.popup_A5 {
background-image: url(https://raw.githubusercontent.com/ctotone/JdR/refs/heads/main/Arkhanval/images/peuple_05-min.png);
margin-left: 8px;
width: 322px;
margin-top: -43px;
}
.popup_A6 {
background-image: url(https://raw.githubusercontent.com/ctotone/JdR/refs/heads/main/Arkhanval/images/peuple_06-min.png);
margin-left: -65px;
width: 265px;
margin-top: -4px;
}
.popup_A7 {
background-image: url(https://raw.githubusercontent.com/ctotone/JdR/refs/heads/main/Arkhanval/images/peuple_07-min.png);
margin-left: -52px;
width: 322px;
margin-top: -43px;
}
.popup_A8 {
background-image: url(https://raw.githubusercontent.com/ctotone/JdR/refs/heads/main/Arkhanval/images/peuple_08-min.png);
margin-top: -40px;
margin-left: -25px;
}
.popup_A9 {
background-image: url(https://raw.githubusercontent.com/ctotone/JdR/refs/heads/main/Arkhanval/images/peuple_09-min.png);
margin-left: 9px;
width: 172px;
margin-top: -60px;
}
.popup_A10 {
background-image: url(https://raw.githubusercontent.com/ctotone/JdR/refs/heads/main/Arkhanval/images/peuple_10-min.png);
margin-top: -50px;
}
.popup_A11 {
background-image: url(https://raw.githubusercontent.com/ctotone/JdR/refs/heads/main/Arkhanval/images/peuple_11-min.png);
margin-top: -56px;
width: 247px;
margin-left: -31px;
}
.popup_A12 {
background-image: url(https://raw.githubusercontent.com/ctotone/JdR/refs/heads/main/Arkhanval/images/peuple_12-min.png);
margin-top: -53px;
width: 257px;
margin-left: -25px;
}
.popup_A13 {
background-image: url(https://raw.githubusercontent.com/ctotone/JdR/refs/heads/main/Arkhanval/images/peuple_13-min.png);
margin-top: -40px;
width: 267px;
margin-left: -20px;
}
.popup_texte {
grid-column: 22 / 62;
grid-row: 5 / 30;
margin-top: 0px;
margin-left: 0px;
margin-right: 0px;
font-size: 13px;
line-height: 20px;
display: flex;
align-items: center;
}
.popup_close {
grid-column: 61;
grid-row: 1;
margin-top: 0px;
margin-left: 0px;
margin-right: 0px;
/* background-color: #44ff0073; */
}
/* Structure zone ARK */
.wrapper_bloc_type_ark {
display: grid;
grid-template-columns: repeat(83, 10px);
grid-auto-rows: 10px;
}
.wrapper_bloc_ark {
display: grid;
grid-template-columns: repeat(83, 10px);
grid-auto-rows: 10px;
}
.wrapper_cercle_ark {
display: grid;
grid-template-columns: repeat(830, 1px);
grid-auto-rows: 1px;
}
.arksonge {
grid-column: 1;
grid-row: 1;
margin-top: 0px;
margin-left: 1px;
margin-right: 0px;
/* background-color: #44ff0073; */
}
.arkentropie {
grid-column: 1;
grid-row: 17;
margin-top: 2px;
margin-left: 1px;
margin-right: 0px;
/* background-color: #44ff0073; */
}
.arkoeur {
grid-column: 1;
grid-row: 33;
margin-top: 7px;
margin-left: 1px;
margin-right: 0px;
/* background-color: #44ff0073; */
}
.circulaire_ark {
grid-column: 1 / 20;
grid-row: 1 / 10;
margin-top: 0px;
margin-left: 0px;
margin-right: 0px;
/* background-color: #44ff0073; */
}
.valeur_ark {
grid-column: 8 / 13;
grid-row: 10 / 14;
margin-top: 2px;
margin-bottom: 2px;
margin-left: 4px;
margin-right: 3px;
/* background-color: #44ff0073; */
}
.jet_arksonge {
grid-column: 5 / 16;
grid-row: 14 / 17;
margin-top: -5px;
margin-bottom: 0px;
margin-left: 0px;
margin-right: 0px;
}
.jet_arkentropie {
grid-column: 4 / 17;
grid-row: 14 / 17;
margin-top: -5px;
margin-bottom: 0px;
margin-left: 0px;
margin-right: 0px;
}
.jet_arkoeur {
grid-column: 6 / 16;
grid-row: 13 / 16;
margin-top: 5px;
margin-bottom: 2px;
margin-left: 0px;
margin-right: 0px;
}
.ark_reset {
grid-column: 71 / 121;
grid-row: 37 / 89;
margin-top: -3px;
margin-left: -3px;
margin-right: 0px;
}
.ark_check_1 {
grid-column: 53;
grid-row: 72;
margin-top: 0px;
margin-left: 0px;
margin-right: 0px;
}
.ark_check_2 {
grid-column: 47;
grid-row: 54;
margin-top: 0px;
margin-left: 0px;
margin-right: 0px;
}
.ark_check_3 {
grid-column: 50;
grid-row: 36;
margin-top: 0px;
margin-left: 0px;
margin-right: 0px;
}
.ark_check_4 {
grid-column: 63;
grid-row: 19;
margin-top: 0px;
margin-left: 0px;
margin-right: 0px;
}
.ark_check_5 {
grid-column: 80;
grid-row: 11;
margin-top: 0px;
margin-left: 0px;
margin-right: 0px;
}
.ark_check_6 {
grid-column: 98;
grid-row: 11;
margin-top: 0px;
margin-left: 0px;
margin-right: 0px;
}
.ark_check_7 {
grid-column: 114;
grid-row: 19;
margin-top: 0px;
margin-left: 0px;
margin-right: 0px;
}
.ark_check_8 {
grid-column: 126;
grid-row: 36;
margin-top: 0px;
margin-left: 0px;
margin-right: 0px;
}
.ark_check_9 {
grid-column: 129;
grid-row: 54;
margin-top: 0px;
margin-left: 0px;
margin-right: 0px;
}
.ark_check_10 {
grid-column: 123;
grid-row: 72;
margin-top: 0px;
margin-left: 0px;
margin-right: 0px;
}
/* Structure zone blessures */
.wrapper_type_blessure {
display: grid;
grid-template-columns: repeat(83, 10px);;
grid-auto-rows: 10px;
}
.wrapper_bloc_blessure,
.wrapper_bloc_blessure_1,
.wrapper_bloc_blessure_2,
.wrapper_bloc_blessure_3,
.wrapper_bloc_blessure_4,
.wrapper_bloc_blessure_5,
.wrapper_bloc_blessure_6 {
display: grid;
grid-template-columns: repeat(830, 1px);;
grid-auto-rows: 10px;
}
.wrapper_bloc_blessure_1 {
margin-left: 43px;
}
.wrapper_bloc_blessure_2 {
margin-left: 35px;
}
.wrapper_bloc_blessure_3 {
margin-left: 26px;
}
.wrapper_bloc_blessure_4 {
margin-left: 18px;
}
.wrapper_bloc_blessure_5 {
margin-left: 9px;
}
.wrapper_bloc_blessure_6 {
margin-left: 0px;
}
.reset_blessure {
grid-column: 1;
grid-row: 5;
margin-top: 2px;
margin-left: 46px;
margin-right: 0px;
background: red;
}
.legere {
grid-column: 1;
grid-row: 5;
margin-top: 2px;
margin-left: 46px;
margin-right: 0px;
}
.grave {
grid-column: 1;
grid-row: 10;
margin-top: 1px;
margin-left: 46px;
margin-right: 0px;
/* background-color: #44ff0073; */
}
.critique {
grid-column: 1;
grid-row: 15;
margin-top: 0px;
margin-left: 46px;
margin-right: 0px;
/* background-color: #44ff0073; */
}
.bloc_malus_fd {
grid-column: 14 / 17;
grid-row: 18 / 21;
margin-top: 6px;
margin-left: 0px;
margin-right: 0px;
}
.bloc_armure {
grid-column: 4 / 7;
grid-row: 18 / 21;
margin-top: 6px;
margin-left: 3px;
margin-right: -3px;
}
.blessure_check_1 {
grid-column: 1;
grid-row: 1;
margin-top: 0px;
margin-left: 1px;
margin-right: 0px;
/* background-color: #44ff0073; */
}
.blessure_check_2 {
grid-column: 18;
grid-row: 1;
margin-top: 0px;
margin-left: 1px;
margin-right: 0px;
/* background-color: #44ff0073; */
}
.blessure_check_3 {
grid-column: 35;
grid-row: 1;
margin-top: 0px;
margin-left: 1px;
margin-right: 0px;
/* background-color: #44ff0073; */
}
.blessure_check_4 {
grid-column: 52;
grid-row: 1;
margin-top: 0px;
margin-left: 1px;
margin-right: 0px;
/* background-color: #44ff0073; */
}
.blessure_check_5 {
grid-column: 69;
grid-row: 1;
margin-top: 0px;
margin-left: 1px;
margin-right: 0px;
/* background-color: #44ff0073; */
}
.blessure_check_6 {
grid-column: 86;
grid-row: 1;
margin-top: 0px;
margin-left: 1px;
margin-right: 0px;
/* background-color: #44ff0073; */
}
/* Structure zone specialité */
.wrapper_specialite {
display: grid;
grid-template-columns: repeat(83, 10px);
grid-auto-rows: 30px;
}
.specialite_1_check {
grid-column: 2;
grid-row: 1;
margin-top: 0px;
margin-left: 0px;
margin-right: 0px;
}
.specialite_2_check {
grid-column: 2;
grid-row: 2;
margin-top: 0px;
margin-left: 0px;
margin-right: 0px;
}
.specialite_3_check {
grid-column: 2;
grid-row: 3;
margin-top: 0px;
margin-left: 0px;
margin-right: 0px;
}
.specialite_4_check {
grid-column: 2;
grid-row: 4;
margin-top: 0px;
margin-left: 0px;
margin-right: 0px;
}
.specialite_5_check {
grid-column: 2;
grid-row: 5;
margin-top: 0px;
margin-left: 0px;
margin-right: 0px;
}
.specialite_6_check {
grid-column: 2;
grid-row: 6;
margin-top: 0px;
margin-left: 0px;
margin-right: 0px;
}
.specialite_7_check {
grid-column: 2;
grid-row: 7;
margin-top: 0px;
margin-left: 0px;
margin-right: 0px;
}
.specialite_8_check {
grid-column: 2;
grid-row: 8;
margin-top: 0px;
margin-left: 0px;
margin-right: 0px;
}
.specialite_9_check {
grid-column: 2;
grid-row: 9;
margin-top: 0px;
margin-left: 0px;
margin-right: 0px;
}
.specialite_10_check {
grid-column: 2;
grid-row: 10;
margin-top: 0px;
margin-left: 0px;
margin-right: 0px;
}
.specialite_11_check {
grid-column: 2;
grid-row: 11;
margin-top: 0px;
margin-left: 0px;
margin-right: 0px;
}
.specialite_12_check {
grid-column: 2;
grid-row: 12;
margin-top: 0px;
margin-left: 0px;
margin-right: 0px;
}
.specialite_13_check {
grid-column: 2;
grid-row: 13;
margin-top: 0px;
margin-left: 0px;
margin-right: 0px;
}
.specialite_14_check {
grid-column: 2;
grid-row: 14;
margin-top: 0px;
margin-left: 0px;
margin-right: 0px;
}
.specialite_1 {
grid-column: 4 / 36;
grid-row: 1;
margin-top: 0px;
margin-left: 0px;
margin-right: 0px;
}
.specialite_2 {
grid-column: 4 / 36;
grid-row: 2;
margin-top: 0px;
margin-left: 0px;
margin-right: 0px;
}
.specialite_3 {
grid-column: 4 / 36;
grid-row: 3;
margin-top: 0px;
margin-left: 0px;
margin-right: 0px;
}
.specialite_4 {
grid-column: 4 / 36;
grid-row: 4;
margin-top: 0px;
margin-left: 0px;
margin-right: 0px;
}
.specialite_5 {
grid-column: 4 / 36;
grid-row: 5;
margin-top: 0px;
margin-left: 0px;
margin-right: 0px;
}
.specialite_6 {
grid-column: 4 / 36;
grid-row: 6;
margin-top: 0px;
margin-left: 0px;
margin-right: 0px;
}
.specialite_7 {
grid-column: 4 / 36;
grid-row: 7;
margin-top: 0px;
margin-left: 0px;
margin-right: 0px;
}
.specialite_8 {
grid-column: 4 / 36;
grid-row: 8;
margin-top: 0px;
margin-left: 0px;
margin-right: 0px;
}
.specialite_9 {
grid-column: 4 / 36;
grid-row: 9;
margin-top: 0px;
margin-left: 0px;
margin-right: 0px;
}
.specialite_10 {
grid-column: 4 / 36;
grid-row: 10;
margin-top: 0px;
margin-left: 0px;
margin-right: 0px;
}
.specialite_11 {
grid-column: 4 / 36;
grid-row: 11;
margin-top: 0px;
margin-left: 0px;
margin-right: 0px;
}
.specialite_12 {
grid-column: 4 / 36;
grid-row: 12;
margin-top: 0px;
margin-left: 0px;
margin-right: 0px;
}
.specialite_13 {
grid-column: 4 / 36;
grid-row: 13;
margin-top: 0px;
margin-left: 0px;
margin-right: 0px;
}
.specialite_14 {
grid-column: 4 / 36;
grid-row: 14;
margin-top: 0px;
margin-left: 0px;
margin-right: 0px;
}
.specialite_1,
.specialite_2,
.specialite_3,
.specialite_4,
.specialite_5,
.specialite_6,
.specialite_7,
.specialite_8,
.specialite_9,
.specialite_10,
.specialite_11,
.specialite_12,
.specialite_13,
.specialite_14 {
grid-column: 5 / 36;
}
/* Structure générale de la page_2 */
.wrapper_page_equipement {
display: grid;
grid-template-columns: repeat(83, 10px);;
grid-auto-rows: 10px;
}
.equipement_armes {
grid-column: 7 / 78;
grid-row: 14 / 24;
margin-top: 0px;
margin-left: 0px;
margin-right: 0px;
margin-bottom: 3px;
/* background-color: #44ff0073; */
}
.equipement_ark {
grid-column: 7 / 48;
grid-row: 28 / 50;
margin-top: 0px;
margin-left: 0px;
margin-right: 0px;
margin-bottom: 0px;
/* background-color: #44ff0073; */
}
.equipement_apparence {
grid-column: 51 / 78;
grid-row: 28 / 42;
margin-top: 0px;
margin-left: 0px;
margin-right: 0px;
margin-bottom: 0px;
/* background-color: #44ff0073; */
}
.equipement_richesse {
grid-column: 51 / 78;
grid-row: 45 / 51;
margin-top: 0px;
margin-left: 0px;
margin-right: 0px;
margin-bottom: 4px;
/* background-color: #44ff0073; */
}
.equipement_sac {
grid-column: 7 / 48;
grid-row: 54 / 75;
margin-top: 0px;
margin-left: 0px;
margin-right: 0px;
margin-bottom: 0px;
/* background-color: #44ff0073; */
}
.equipement_bibliotheque {
grid-column: 51 / 78;
grid-row: 54 / 75;
margin-top: 0px;
margin-left: 0px;
margin-right: 0px;
margin-bottom: 0px;
/* background-color: #44ff0073; */
}
/* Structure générale Sortilège */
.wrapper_page_sortilege {
display: grid;
grid-template-columns: repeat(83, 10px);;
grid-auto-rows: 10px;
}
.wrapper_sortilege {
display: grid;
grid-template-columns: repeat(83, 10px);;
grid-auto-rows: 10px;
}
.sortilege_1 {
grid-column: 7 / 78;
grid-row: 12 / 30;
margin-top: 0px;
margin-left: 0px;
margin-right: 0px;
/* background-color: #44ff0073; */
}
.sortilege_2 {
grid-column: 7 / 78;
grid-row: 31 / 49;
margin-top: 2px;
margin-left: 0px;
margin-right: 0px;
/* background-color: #44ff0073; */
}
.sortilege_3 {
grid-column: 7 / 78;
grid-row: 50 / 68;
margin-top: 4px;
margin-left: 0px;
margin-right: 0px;
/* background-color: #44ff0073; */
}
.sortilege_4 {
grid-column: 7 / 78;
grid-row: 69 / 87;
margin-top: 6px;
margin-left: 0px;
margin-right: 0px;
/* background-color: #44ff0073; */
}
.sortilege_5 {
grid-column: 7 / 78;
grid-row: 89 / 106;
margin-top: -2px;
margin-left: 0px;
margin-right: 0px;
/* background-color: #44ff0073; */
}
.sortilege_6 {
grid-column: 7 / 78;
grid-row: 108 / 126;
margin-top: 0px;
margin-left: 0px;
margin-right: 0px;
/* background-color: #44ff0073; */
}
.sortilege_7 {
grid-column: 7 / 78;
grid-row: 127 / 145;
margin-top: 2px;
margin-left: 0px;
margin-right: 0px;
/* background-color: #44ff0073; */
}
.sortilege_8 {
grid-column: 7 / 78;
grid-row: 146 / 164;
margin-top: 4px;
margin-left: 0px;
margin-right: 0px;
/* background-color: #44ff0073; */
}
.sortilege_9 {
grid-column: 7 / 78;
grid-row: 165 / 183;
margin-top: 6px;
margin-left: 0px;
margin-right: 0px;
/* background-color: #44ff0073; */
}
.sortilege_10 {
grid-column: 7 / 78;
grid-row: 185 / 203;
margin-top: -2px;
margin-left: 0px;
margin-right: 0px;
/* background-color: #44ff0073; */
}
.sortilege_nom {
grid-column: 19 / 71;
grid-row: 1 / 4;
margin-top: 0px;
margin-left: 4px;
margin-right: 0px;
margin-bottom: 7px;
/* background-color: #44ff0073; */
}
.sortilege_competence {
grid-column: 2 / 19;
grid-row: 5 / 10;
margin-top: 0px;
margin-left: 0px;
margin-right: 0px;
margin-bottom: 5px;
/* background-color: #44ff0073; */
}
.sortilege_pm {
grid-column: 19 / 30;
grid-row: 5 / 10;
margin-top: 0px;
margin-left: 0px;
margin-right: 4px;
margin-bottom: 5px;
/* background-color: #44ff0073; */
}
.sortilege_fd {
grid-column: 29 / 40;
grid-row: 5 / 10;
margin-top: 0px;
margin-left: 6px;
margin-right: 0px;
margin-bottom: 5px;
/* background-color: #44ff0073; */
}
.sortilege_portee {
grid-column: 40 / 51;
grid-row: 5 / 10;
margin-top: 0px;
margin-left: 0px;
margin-right: 6px;
margin-bottom: 5px;
/* background-color: #44ff0073; */
}
.sortilege_zone {
grid-column: 50 / 61;
grid-row: 5 / 10;
margin-top: 0px;
margin-left: 4px;
margin-right: 0px;
margin-bottom: 5px;
/* background-color: #44ff0073; */
}
.sortilege_duree {
grid-column: 61 / 71;
grid-row: 5 / 10;
margin-top: 0px;
margin-left: 0px;
margin-right: 0px;
margin-bottom: 5px;
/* background-color: #44ff0073; */
}
.sortilege_description {
grid-column: 7 / 71;
grid-row: 9 / 19;
margin-top: 5px;
margin-left: 0px;
margin-right: 0px;
margin-bottom: 10px;
/* background-color: #ff000078; */
}
.sortilege_annonce {
grid-column: 2 / 5;
grid-row: 9 / 13;
margin-top: 6px;
margin-left: 12px;
margin-right: 0px;
margin-bottom: 7px;
/* background-color: #ff000078; */
}
/* Structure générale de la page_3 */
/* Structure générale des zones */
.wrapper_zone {
display: grid;
grid-template-columns: repeat(100, 10px);;
grid-auto-rows: 10px;
}
.wrapper_zone_bloc_1,
.wrapper_zone_bloc_2,
.wrapper_zone_bloc_3,
.wrapper_zone_bloc_4,
.wrapper_zone_bloc_5,
.wrapper_zone_bloc_6,
.wrapper_zone_bloc_7,
.wrapper_zone_bloc_8 {
display: grid;
grid-template-columns: repeat(100, 10px);;
grid-auto-rows: 10.6px;
font-size: 15px;
}
.wrapper_zone_bloc_1,
.wrapper_zone_bloc_5 {
margin-left: 4px;
margin-top: -7px;
}
.wrapper_zone_bloc_2,
.wrapper_zone_bloc_6 {
margin-left: 4px;
margin-top: -4px;
}
.wrapper_zone_bloc_3,
.wrapper_zone_bloc_7 {
margin-left: 4px;
margin-top: 0px;
}
.wrapper_zone_bloc_4,
.wrapper_zone_bloc_8 {
margin-left: 4px;
margin-top: -7px;
}
.wrapper_zone_bloc_5 {
margin-left: -2px;
}
.wrapper_zone_bloc_6 {
margin-left: -2px;
}
.wrapper_zone_bloc_7 {
margin-left: -2px;
}
.wrapper_zone_bloc_8 {
margin-left: -2px;
}
/* Structure bloc nom */
.zone_nom_nom {
grid-column: 2 / 37;
grid-row: 2 / 5;
margin-top: 0px;
margin-bottom: 10px;
margin-left: 5px;
margin-right: 0px;
}
.zone_nom_archetype_1 {
grid-column: 40 / 57;
grid-row: 2 / 5;
margin-top: -2px;
margin-bottom: 10px;
margin-left: 0px;
margin-right: 0px;
/* background: green; */
}
.zone_nom_archetype_2 {
grid-column: 58 / 75;
grid-row: 2 / 5;
margin-top: -2px;
margin-bottom: 10px;
margin-left: 0px;
margin-right: 0px;
/* background: green; */
}
.zone_nom_peuple {
grid-column: 2 / 37;
grid-row: 7 / 10;
margin-top: 0px;
margin-bottom: 10px;
margin-left: 5px;
margin-right: 0px;
}
.zone_nom_origine {
grid-column: 40 / 75;
grid-row: 7 / 10;
margin-top: 0px;
margin-bottom: 10px;
margin-left: 0px;
margin-right: 0px;
}
/* Structure bloc metier */
.zone_bloc_xp {
grid-column: 2 / 4;
grid-row: 7 / 9;
margin-top: 0px;
margin-left: -1px;
margin-right: 0px;
/* background-color: #44ff0073; */
}
.zone_bloc_texte_1 {
grid-column: 2 / 16;
grid-row: 4 / 6;
margin-top: -2px;
margin-left: 0px;
margin-right: 0px;
/* background-color: #44ff0073; */
text-align: right;
}
.zone_bloc_texte_2 {
grid-column: 4 / 16;
grid-row: 6 / 8;
margin-top: -2px;
margin-left: 0px;
margin-right: 0px;
/* background-color: #44ff0073; */
text-align: right;
}
.zone_bloc_texte_3 {
grid-column: 4 / 16;
grid-row: 8 / 10;
margin-top: -2px;
margin-left: 0px;
margin-right: 0px;
/* background-color: #44ff0073; */
text-align: right;
}
.zone_bloc_texte_4 {
grid-column: 2 / 16;
grid-row: 10 / 12;
margin-top: -2px;
margin-left: 0px;
margin-right: 0px;
/* background-color: #44ff0073; */
text-align: right;
}
.zone_bloc_texte_5 {
grid-column: 2 / 16;
grid-row: 12 / 14;
margin-top: -2px;
margin-left: 0px;
margin-right: 0px;
/* background-color: #44ff0073; */
text-align: right;
}
.zone_bloc_roll_6 {
grid-column: 2 / 4;
grid-row: 14 / 16;
margin-top: 0px;
margin-left: 0px;
margin-right: 0px;
/* background-color: #44ff0073; */
text-align: right;
}
.zone_bloc_roll_7 {
grid-column: 2 / 4;
grid-row: 16 / 18;
margin-top: 0px;
margin-left: 0px;
/* background-color: #44ff0073; */
text-align: right;
}
.zone_bloc_texte_6 {
grid-column: 4 / 16;
grid-row: 14 / 16;
margin-top: 0px;
margin-left: 0px;
margin-right: 0px;
/* background-color: #44ff0073; */
text-align: right;
}
.zone_bloc_texte_7 {
grid-column: 4 / 16;
grid-row: 16 / 18;
margin-top: 0px;
margin-left: 0px;
/* background-color: #44ff0073; */
text-align: right;
}
.zone_bloc_valeur_1 {
grid-column: 17 / 20;
grid-row: 4 / 6;
margin-top: 0px;
margin-left: 0px;
margin-right: 6px;
/* background-color: #44ff0073; */
}
.zone_bloc_valeur_2 {
grid-column: 17 / 20;
grid-row: 6 / 8;
margin-top: 0px;
margin-left: 0px;
margin-right: 6px;
/* background-color: #44ff0073; */
}
.zone_bloc_valeur_3 {
grid-column: 17 / 20;
grid-row: 8 / 10;
margin-top: 0px;
margin-left: 0px;
margin-right: 6px;
/* background-color: #44ff0073; */
}
.zone_bloc_valeur_4 {
grid-column: 17 / 20;
grid-row: 10 / 12;
margin-top: 0px;
margin-left: 0px;
margin-right: 6px;
/* background-color: #44ff0073; */
}
.zone_bloc_valeur_5 {
grid-column: 17 / 20;
grid-row: 12 / 14;
margin-top: 0px;
margin-left: 0px;
margin-right: 6px;
/* background-color: #44ff0073; */
}
.zone_bloc_valeur_6 {
grid-column: 17 / 20;
grid-row: 14 / 16;
margin-top: 0px;
margin-left: 0px;
margin-right: 6px;
/* background-color: #44ff0073; */
}
.zone_bloc_valeur_7 {
grid-column: 17 / 20;
grid-row: 16 / 18;
margin-top: 0px;
margin-left: 0px;
margin-right: 6px;
/* background-color: #44ff0073; */
}
.zone_bloc_xp_1 {
grid-column: 20 / 22;
grid-row: 4 / 6;
margin-top: 0px;
margin-left: -2px;
margin-right: 0px;
/* background-color: #44ff0073; */
}
.zone_bloc_xp_2 {
grid-column: 20 / 22;
grid-row: 6 / 8;
margin-top: 0px;
margin-left: -2px;
margin-right: 0px;
/* background-color: #44ff0073; */
}
.zone_bloc_xp_3 {
grid-column: 20 / 22;
grid-row: 8 / 10;
margin-top: 0px;
margin-left: -2px;
margin-right: 0px;
/* background-color: #44ff0073; */
}
.zone_bloc_xp_4 {
grid-column: 20 / 22;
grid-row: 10 / 12;
margin-top: 0px;
margin-left: -2px;
margin-right: 0px;
/* background-color: #44ff0073; */
}
.zone_bloc_xp_5 {
grid-column: 20 / 22;
grid-row: 12 / 14;
margin-top: 0px;
margin-left: -2px;
margin-right: 0px;
/* background-color: #44ff0073; */
}
.zone_bloc_xp_6 {
grid-column: 20 / 22;
grid-row: 14 / 16;
margin-top: 0px;
margin-left: -2px;
margin-right: 0px;
/* background-color: #44ff0073; */
}
.zone_bloc_xp_7 {
grid-column: 20 / 22;
grid-row: 16 / 18;
margin-top: 0px;
margin-left: -2px;
margin-right: 0px;
/* background-color: #44ff0073; */
}
/* Structure générale de la creation */
.charsheet input.input_classique_creation {
height: 30px !important;
border-radius: 1px;
margin-top: -10px;
margin-right: 0px;
margin-left: 0px;
padding-left: 0px;
letter-spacing: 0px;
text-align: center;
font-size: 16px;
background: #ffffff78;
border-radius: 10px;
}
div.page_creation {
padding-top: 0px;
padding-left: 105px;
}
div.creation_back,
div.creation_2,
div.creation_3,
div.creation_4,
div.creation_5,
div.creation_6,
div.creation_7,
div.creation_8,
div.creation_9 {
display: none;
}
.charsheet .etape_creation1[value="0"] ~ div.creation_1 {
display: none;
}
.charsheet .etape_creationback[value="1"] ~ div.creation_back,
.charsheet .etape_creation2[value="1"] ~ div.creation_2,
.charsheet .etape_creation3[value="1"] ~ div.creation_3,
.charsheet .etape_creation4[value="1"] ~ div.creation_4,
.charsheet .etape_creation5[value="1"] ~ div.creation_5,
.charsheet .etape_creation6[value="1"] ~ div.creation_6,
.charsheet .etape_creation7[value="1"] ~ div.creation_7,
.charsheet .etape_creation8[value="1"] ~ div.creation_8,
.charsheet .etape_creation9[value="1"] ~ div.creation_9 {
display: block;
}
.wrapper_page_creation_global {
display: grid;
grid-template-columns: repeat(63, 9px);
grid-auto-rows: 10px;
margin-left: 30px;
}
.wrapper_creation_info {
display: grid;
grid-template-columns: repeat(63, 9px);
grid-auto-rows: 10px;
}
.creation_1,
.creation_back,
.creation_2,
.creation_3,
.creation_4,
.creation_5,
.creation_6,
.creation_7,
.creation_8,
.creation_9 {
width: 630px;
}
.creation_1 {
/* background: orange; */
height: 400px;
}
.creation_back {
height: 50px;
margin-bottom: 20px;
/* background: green; */
}
.creation_2 {
grid-column: 1 / 64;
grid-row: 1;
margin-top: 0px;
/* background: blue; */
}
.creation_3 {
grid-column: 1 / 64;
grid-row: 1;
margin-top: 0px;
/* background: yellow; */
}
.creation_4 {
grid-column: 1 / 64;
grid-row: 1;
margin-top: 0px;
/* background: grey; */
}
.creation_5 {
grid-column: 1 / 64;
grid-row: 1;
margin-top: 0px;
/* background: purple; */
}
.creation_6 {
grid-column: 1 / 64;
grid-row: 1;
margin-top: 0px;
}
.creation_7 {
grid-column: 1 / 64;
grid-row: 1;
margin-top: 0px;
}
.creation_8 {
grid-column: 1 / 64;
grid-row: 1;
margin-top: 0px;
}
.creation_footer {
height: 60px;
}
.wrapper_page_creation {
display: grid;
grid-template-columns: 1fr;
grid-auto-rows: auto;
gap: 10px;
}
.creation_back_retour {
margin-left: 647px;
margin-top: 0px;
padding-top: 55px;
}
.creation_header {
grid-column: 11 / 54;
grid-row: 2;
height: 15px;
margin-top: 14px;
margin-left: 0px;
margin-bottom: 10px;
margin-right: 0px;
font-size: 17px;
text-align: center;
/* border-bottom: 1px solid grey; */
background-image: url(https://raw.githubusercontent.com/ctotone/JdR/refs/heads/main/Arkhanval/images/separateur.png);
background-size: contain;
background-repeat: no-repeat;
}
.creation_1_texte,
.creation_2_texte,
.creation_3_texte,
.creation_4_texte,
.creation_5_texte,
.creation_6_texte,
.creation_7_texte,
.creation_8_texte,
.creation_9_texte {
font-size: 19px;
}
.creation_1_texte {
grid-column: 11 / 54;
grid-row: 6;
margin-top: 0px;
margin-left: 0px;
margin-right: 0px;
text-align: center;
/* background-color: #44ff0073; */
}
.creation_1_creation {
grid-column: 5 / 30;
grid-row: 10 / 35;
margin-top: 0px;
margin-left: 0px;
margin-right: 0px;
/* background-color: #44ff0073; */
}
.creation_1_page_personnage {
grid-column: 35 / 60;
grid-row: 10 / 35;
margin-top: 0px;
margin-left: 0px;
margin-right: 0px;
/* background-color: red; */
}
.creation_1_creation_texte {
grid-column: 5 / 30;
grid-row: 35;
margin-top: 0px;
margin-left: 0px;
margin-right: 0px;
text-align: center;
font-size: 18px;
margin-bottom: 50px;
}
.creation_1_page_personnage_texte {
grid-column: 35 / 60;
grid-row: 35;
margin-top: 0px;
margin-left: 0px;
margin-right: 0px;
text-align: center;
font-size: 18px;
margin-bottom: 50px;
}
.creation_2_encart {
grid-column: 3 / 62;
grid-row: 1 / 14;
margin-top: 32px;
margin-left: 0px;
margin-right: 0px;
text-align: center;
font-size: 16px;
background: rgba(255, 0, 0, 0.301);
background-image: url(https://raw.githubusercontent.com/ctotone/JdR/refs/heads/main/Arkhanval/images/background_popup.png);
background-size: cover;
box-shadow: 2px 2px 12px 2px #000000bf;
border-radius: 10px;
}
.creation_2_texte {
grid-column: 11 / 54;
grid-row: 2;
margin-top: 0px;
margin-left: 0px;
margin-right: 0px;
text-align: center;
}
.creation_2_peuple {
grid-column: 1 / 64;
grid-row: 6;
margin-top: 0px;
margin-left: 0px;
margin-right: 0px;
font-size: 17px;
text-align: center;
/* background-color: #44ff0073; */
}
.creation_2_peuple_info {
grid-column: 1 / 64;
grid-row: 8;
margin-top: 0px;
margin-left: 0px;
margin-right: 0px;
font-size: 17px;
text-align: center;
/* background-color: #44ff0073; */
}
.creation_2_suivant {
grid-column: 40 / 68;
grid-row: 12;
margin-top: 0px;
margin-left: 0px;
margin-right: 0px;
font-size: 17px;
text-align: center;
}
.creation_3_texte {
grid-column: 11 / 54;
grid-row: 3;
margin-top: 0px;
margin-left: 0px;
margin-right: 0px;
text-align: center;
/* background-color: #44ff0073; */
}
.creation_3_encart {
grid-column: 3 / 62;
grid-row: 2 / 12;
margin-top: 32px;
margin-left: 0px;
margin-right: 0px;
text-align: center;
font-size: 16px;
background-image: url(https://raw.githubusercontent.com/ctotone/JdR/refs/heads/main/Arkhanval/images/background_popup.png);
background-size: cover;
box-shadow: 2px 2px 12px 2px #000000bf;
border-radius: 10px;
}
.creation_3_nom {
grid-column: 5 / 30;
grid-row: 6;
margin-top: 0px;
margin-left: 0px;
margin-right: 0px;
text-align: center;
text-align: center;
font-size: 17px;
text-decoration: underline;
}
.creation_3_origine {
grid-column: 35 / 60;
grid-row: 6;
margin-top: 0px;
margin-left: 0px;
margin-right: 0px;
text-align: center;
font-size: 17px;
text-decoration: underline;
}
.creation_3_nom_data {
grid-column: 5 / 30;
grid-row: 7;
margin-top: 0px;
margin-left: 0px;
margin-right: 0px;
text-align: center;
font-size: 16px;
}
.creation_3_origine_data {
grid-column: 35 / 60;
grid-row: 7;
margin-top: 0px;
margin-left: 0px;
margin-right: 0px;
text-align: center;
font-size: 16px;
}
.creation_3_suivant {
grid-column: 40 / 68;
grid-row: 10;
margin-top: 0px;
margin-left: 0px;
margin-right: 0px;
font-size: 17px;
text-align: center;
}
.creation_4_encart {
grid-column: 3 / 62;
grid-row: 2 / 13;
margin-top: 32px;
margin-left: 0px;
margin-right: 0px;
text-align: center;
font-size: 16px;
background-image: url(https://raw.githubusercontent.com/ctotone/JdR/refs/heads/main/Arkhanval/images/background_popup.png);
background-size: cover;
box-shadow: 2px 2px 12px 2px #000000bf;
border-radius: 10px;
}
.creation_4_texte {
grid-column: 11 / 54;
grid-row: 3;
margin-top: 0px;
margin-left: 0px;
margin-right: 0px;
text-align: center;
/* background-color: #44ff0073; */
}
.creation_4_archetype1 {
grid-column: 5 / 30;
grid-row: 6;
margin-top: 0px;
margin-left: 0px;
margin-right: 0px;
text-align: center;
font-size: 17px;
text-decoration: underline;
}
.creation_4_archetype2 {
grid-column: 35 / 60;
grid-row: 6;
margin-top: 0px;
margin-left: 0px;
margin-right: 0px;
text-align: center;
font-size: 17px;
text-decoration: underline;
}
.creation_4_archetype1_data {
grid-column: 5 / 30;
grid-row: 7;
margin-top: 0px;
margin-left: 0px;
margin-right: 0px;
}
.creation_4_archetype2_data {
grid-column: 35 / 60;
grid-row: 7;
margin-top: 0px;
margin-left: 0px;
margin-right: 0px;
}
div.creation_4_archetype1_info_1,
div.creation_4_archetype1_info_2,
div.creation_4_archetype1_info_3,
div.creation_4_archetype1_info_4,
div.creation_4_archetype1_info_5,
div.creation_4_archetype1_info_6,
div.creation_4_archetype1_info_7,
div.creation_4_archetype1_info_8 {
grid-column: 5 / 30;
grid-row: 9;
margin-top: 0px;
margin-left: 0px;
margin-right: 0px;
background-size : cover;
background-repeat: no-repeat;
height: 250px;
}
div.creation_4_archetype2_info_1,
div.creation_4_archetype2_info_2,
div.creation_4_archetype2_info_3,
div.creation_4_archetype2_info_4,
div.creation_4_archetype2_info_5,
div.creation_4_archetype2_info_6,
div.creation_4_archetype2_info_7,
div.creation_4_archetype2_info_8 {
grid-column: 35 / 60;
grid-row: 9;
margin-top: 0px;
margin-left: 0px;
margin-right: 0px;
background-size : cover;
background-repeat: no-repeat;
height: 250px;
}
div.creation_4_archetype1_info_1,
div.creation_4_archetype2_info_1 {
background-image: url(https://raw.githubusercontent.com/ctotone/JdR/refs/heads/main/Arkhanval/images/comp_artisan.webp);
background-size : cover;
background-repeat: no-repeat;
}
div.creation_4_archetype1_info_2,
div.creation_4_archetype2_info_2 {
background-image: url(https://raw.githubusercontent.com/ctotone/JdR/refs/heads/main/Arkhanval/images/comp_artiste.webp);
background-size : cover;
background-repeat: no-repeat;
}
div.creation_4_archetype1_info_3,
div.creation_4_archetype2_info_3 {
background-image: url(https://raw.githubusercontent.com/ctotone/JdR/refs/heads/main/Arkhanval/images/comp_combattant.webp);
background-size : cover;
background-repeat: no-repeat;
}
div.creation_4_archetype1_info_4,
div.creation_4_archetype2_info_4 {
background-image: url(https://raw.githubusercontent.com/ctotone/JdR/refs/heads/main/Arkhanval/images/comp_erudit.webp);
background-size : cover;
background-repeat: no-repeat;
}
div.creation_4_archetype1_info_5,
div.creation_4_archetype2_info_5 {
background-image: url(https://raw.githubusercontent.com/ctotone/JdR/refs/heads/main/Arkhanval/images/comp_explorateur.webp);
background-size : cover;
background-repeat: no-repeat;
}
div.creation_4_archetype1_info_6,
div.creation_4_archetype2_info_6 {
background-image: url(https://raw.githubusercontent.com/ctotone/JdR/refs/heads/main/Arkhanval/images/comp_magicien.webp);
background-size : cover;
background-repeat: no-repeat;
}
div.creation_4_archetype1_info_7,
div.creation_4_archetype2_info_7 {
background-image: url(https://raw.githubusercontent.com/ctotone/JdR/refs/heads/main/Arkhanval/images/comp_roublard.webp);
background-size : cover;
background-repeat: no-repeat;
}
div.creation_4_archetype1_info_8,
div.creation_4_archetype2_info_8 {
background-image: url(https://raw.githubusercontent.com/ctotone/JdR/refs/heads/main/Arkhanval/images/comp_stratege.webp);
background-size : cover;
background-repeat: no-repeat;
}
.creation_4_suivant {
grid-column: 40 / 68;
grid-row: 11;
margin-top: 0px;
margin-left: 0px;
margin-right: 0px;
font-size: 17px;
text-align: center;
/* background-color: #44ff0073; */
}
.creation_5_encart {
grid-column: 3 / 62;
grid-row: 2 / 9;
margin-top: 32px;
margin-left: 0px;
margin-right: 0px;
text-align: center;
font-size: 16px;
background-image: url(https://raw.githubusercontent.com/ctotone/JdR/refs/heads/main/Arkhanval/images/background_popup.png);
background-size: cover;
box-shadow: 2px 2px 12px 2px #000000bf;
border-radius: 10px;
}
.creation_5_texte {
grid-column: 11 / 54;
grid-row: 3;
margin-top: 0px;
margin-left: 0px;
margin-right: 0px;
text-align: center;
/* background-color: #44ff0073; */
}
.creation_5_archetype1 {
grid-column: 5 / 33;
grid-row: 5;
margin-top: 0px;
margin-left: 0px;
margin-right: 0px;
}
.creation_5_archetype2 {
grid-column: 32 / 60;
grid-row: 5;
margin-top: 0px;
margin-left: 0px;
margin-right: 0px;
}
.creation_5_suivant {
grid-column: 40 / 68;
grid-row: 7;
margin-top: 0px;
margin-left: 0px;
margin-right: 0px;
font-size: 17px;
text-align: center;
/* background-color: #44ff0073; */
}
.creation_6_encart {
grid-column: 3 / 62;
grid-row: 2 / 66;
margin-top: 32px;
margin-left: 0px;
margin-right: 0px;
text-align: center;
font-size: 16px;
background-image: url(https://raw.githubusercontent.com/ctotone/JdR/refs/heads/main/Arkhanval/images/background_popup.png);
background-size: cover;
box-shadow: 2px 2px 12px 2px #000000bf;
border-radius: 10px;
}
.creation_6_texte {
grid-column: 11 / 54;
grid-row: 3;
margin-top: 0px;
margin-left: 0px;
margin-right: 0px;
text-align: center;
/* background-color: #44ff0073; */
}
.creation_6_decompte {
grid-column: 11 / 54;
grid-row: 6;
margin-top: 0px;
margin-left: 0px;
margin-right: 0px;
text-align: center;
font-size: 15px;
/* background-color: #44ff0073; */
}
.creation_6_liste {
grid-column: 4 / 61;
grid-row: 7 / 63;
margin-top: 0px;
margin-left: 0px;
margin-right: 0px;
background-image: url(https://raw.githubusercontent.com/ctotone/JdR/refs/heads/main/Arkhanval/images/creation_competences.webp);
background-size: contain;
box-shadow: 2px 2px 12px 2px #000000bf;
border-radius: 10px;
background-repeat: no-repeat;
margin-bottom: 0px;
}
.creation_6_suivant {
grid-column: 40 / 68;
grid-row: 64;
margin-top: 0px;
margin-left: 0px;
margin-right: 0px;
font-size: 17px;
text-align: center;
}
.creation_7_encart {
grid-column: 3 / 49;
grid-row: 2 / 12;
margin-top: 32px;
margin-left: 0px;
margin-right: 0px;
text-align: center;
font-size: 16px;
background-image: url(https://raw.githubusercontent.com/ctotone/JdR/refs/heads/main/Arkhanval/images/background_popup.png);
background-size: cover;
box-shadow: 2px 2px 12px 2px #000000bf;
border-radius: 10px;
}
.creation_7_texte {
grid-column: 10 / 44;
grid-row: 3;
margin-top: 0px;
margin-left: 0px;
margin-right: 0px;
text-align: center;
/* background-color: #44ff0073; */
}
.creation_7_arksonge {
grid-column: 7 / 20;
grid-row: 6;
margin-top: 0px;
margin-left: 0px;
margin-right: 0px;
}
.creation_7_arkentropie {
grid-column: 20 / 35;
grid-row: 6;
margin-top: 0px;
margin-left: -3px;
margin-right: 0px;
}
.creation_7_arkoeur {
grid-column: 31 / 48;
grid-row: 6;
margin-top: 0px;
margin-left: 0px;
margin-right: 0px;
}
.creation_7_arksonge_data {
grid-column: 14;
grid-row: 7;
margin-top: 0px;
margin-left: 0px;
margin-right: 0px;
border: 1px solid #a13d32;
background: #ffffff8f;
}
.creation_7_arkentropie_data {
grid-column: 27;
grid-row: 7;
margin-top: 0px;
margin-left: 0px;
margin-right: 0px;
border: 1px solid #a13d32;
background: #ffffff8f;
}
.creation_7_arkoeur_data {
grid-column: 38;
grid-row: 7;
margin-top: 0px;
margin-left: 0px;
margin-right: 0px;
border: 1px solid #a13d32;
background: #ffffff8f;
}
.creation_7_arksonge_titre {
grid-column: 7 / 20;
grid-row: 8;
height: 35px;
margin-top: 0px;
margin-left: 37px;
margin-right: 0px;
background-image: url(https://raw.githubusercontent.com/ctotone/JdR/refs/heads/main/Arkhanval/images/arksonge_titre.png);
background-size: 110px;
background-repeat: no-repeat;
}
.creation_7_arkentropie_titre {
grid-column: 20 / 38;
grid-row: 8;
height: 35px;
margin-top: 0px;
margin-left: 19px;
margin-right: 0px;
background-image: url(https://raw.githubusercontent.com/ctotone/JdR/refs/heads/main/Arkhanval/images/arkentropie_titre.png);
background-size: 144px;
background-repeat: no-repeat;
}
.creation_7_arkoeur_titre {
grid-column: 31 / 55;
grid-row: 8;
height: 35px;
margin-top: 0px;
margin-left: 48px;
margin-right: 0px;
background-image: url(https://raw.githubusercontent.com/ctotone/JdR/refs/heads/main/Arkhanval/images/arkoeur_titre.png);
background-size: 110px;
background-repeat: no-repeat;
}
.creation_7_suivant {
grid-column: 37 / 50;
grid-row: 10;
margin-top: 0px;
margin-left: 0px;
margin-right: 0px;
font-size: 17px;
text-align: center;
/* background-color: #44ff0073; */
}
.creation_8_encart {
grid-column: 3 / 51;
grid-row: 2 / 12;
margin-top: 32px;
margin-left: 0px;
margin-right: 0px;
text-align: center;
font-size: 16px;
background-image: url(https://raw.githubusercontent.com/ctotone/JdR/refs/heads/main/Arkhanval/images/background_popup.png);
background-size: cover;
box-shadow: 2px 2px 12px 2px #000000bf;
border-radius: 10px;
}
.creation_8_texte {
grid-column: 11 / 46;
grid-row: 3;
margin-top: 0px;
margin-left: 0px;
margin-right: 0px;
text-align: center;
/* background-color: #44ff0073; */
}
.creation_8_final {
grid-column: 11 / 46;
grid-row: 8;
margin-top: 0px;
margin-left: 0px;
margin-right: 0px;
font-size: 17px;
text-align: center;
margin-bottom: 60px;
/* background-color: #44ff0073; */
}
.wrapper_zone_competence {
display: grid;
grid-template-columns: repeat(56, 10px);;
grid-auto-rows: 10px;
}
.wrapper_zone_bloc_creation {
display: grid;
grid-template-columns: repeat(26, 9px);
grid-auto-rows: 9.2px;
color: var(--black);
font-size: 11px;
line-height: 26px;
text-transform: uppercase;
letter-spacing: -0.8px;
}
.creation_artisan {
grid-column: 2 / 19;
grid-row: 2;
margin-top: 0px;
margin-left: -2px;
margin-right: 0px;
}
.creation_artiste {
grid-column: 20 / 37;
grid-row: 2;
margin-top: 0px;
margin-left: 0px;
margin-right: 0px;
}
.creation_combattant {
grid-column: 38 / 56;
grid-row: 2;
margin-top: 0px;
margin-left: 2px;
margin-right: 0px;
}
.creation_erudit {
grid-column: 2 / 19;
grid-row: 20;
margin-top: 2px;
margin-left: -2px;
margin-right: 0px;
}
.creation_explorateur {
grid-column: 20 / 37;
grid-row: 20;
margin-top: 2px;
margin-left: 0px;
margin-right: 0px;
}
.creation_magicien {
grid-column: 38 / 56;
grid-row: 20;
margin-top: 2px;
margin-left: 2px;
margin-right: 0px;
}
.creation_roublard {
grid-column: 11 / 28;
grid-row: 38;
margin-top: 1px;
margin-left: -3px;
margin-right: 0px;
}
.creation_stratege {
grid-column: 30 / 47;
grid-row: 38;
margin-top: 1px;
margin-left: -2px;
margin-right: 0px;
}
.ark_reset_1,
.ark_reset_2,
.ark_reset_3 {
grid-column: 71 / 121;
grid-row: 37 / 89;
margin-top: 2px;
margin-left: 0px;
margin-right: 0px;
background-size: 50px 50px;
background-repeat: no-repeat;
}
.ark_reset_1 {
background-image: url(https://raw.githubusercontent.com/ctotone/JdR/refs/heads/main/Arkhanval/images/symbole_09.png);
}
.ark_reset_2 {
background-image: url(https://raw.githubusercontent.com/ctotone/JdR/refs/heads/main/Arkhanval/images/symbole_10.png);
}
.ark_reset_3 {
background-image: url(https://raw.githubusercontent.com/ctotone/JdR/refs/heads/main/Arkhanval/images/symbole_11.png);
}
/* ROLL TEMPLATE */
.sheet-rolltemplate-ark {
text-align: center;
--color_titre: #a44e45;
--color_xp: #03bbce;
--echec_2: #bc0000e0;
--echec_3: #bc0000e0;
--echec_1: #b016a0;
--reussite_3: #036c03;
--reussite_2: #035bae;
--reussite_1: #9e9c02d9;
--blanc_roll: #fcfcfdf0;
--echec_critique: #b016a0;
--reussite_critique: #9e9c02d9;
--echec: #bc0000e0;
--reussite: #036c03;
--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/Arkhanval/images/fond_roll.png);
--roll_background: url(https://raw.githubusercontent.com/ctotone/JdR/refs/heads/main/Arkhanval/images/fond_roll.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);
/* background-image: url(https://raw.githubusercontent.com/ctotone/JdR/refs/heads/main/Arkhanval/images/back_roll.png); */
background-size: 300px auto;
width: 300px;
height: auto;
margin-left: -35px;
padding-top: 15px;
}
.sheet-rolltemplate-ark .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-ark .sheet-rouge_critique,
.sheet-rolltemplate-ark .sheet-vert,
.sheet-rolltemplate-ark .sheet-gris,
.sheet-rolltemplate-ark .sheet-jaune {
color: white;
border-radius: 22px;
padding-top: 3px;
padding-bottom: 3px;
padding-left: 5px;
padding-right: 5px;
border: 2px solid #353434;
box-shadow: 1px 1px 6px 3px #636363c4;
background-size: cover;
}
.sheet-rolltemplate-ark .sheet-rouge_critique {
background: #bb0505;
padding-left: 8px;
padding-right: 9px;
background-image: url(https://raw.githubusercontent.com/ctotone/JdR/refs/heads/main/Arkhanval/images/result_1.png);
}
.sheet-rolltemplate-ark .sheet-gris {
background: #919191;
background-image: url(https://raw.githubusercontent.com/ctotone/JdR/refs/heads/main/Arkhanval/images/result_2.png);
}
.sheet-rolltemplate-ark .sheet-vert {
background: #036a3a;
background-image: url(https://imgsrv.roll20.net/?src=https%3A//raw.githubusercontent.com/ctotone/JdR/refs/heads/main/Arkhanval/images/result_3.png);
}
.sheet-rolltemplate-ark .sheet-jaune {
color: #646363;
background: #e3e003;
letter-spacing: -1.5px;
white-space: nowrap;
background-image: url(https://raw.githubusercontent.com/ctotone/JdR/refs/heads/main/Arkhanval/images/result_4.png);
}
.sheet-rolltemplate-ark .sheet-toper {
background: var(--roll_top);
background-size: cover;
background-repeat: no-repeat;
height: 4px;
width: 263px;
margin-left: -4px;
}
.sheet-rolltemplate-ark .sheet-bottom {
background-image: var(--roll_bottom);
background-size: cover;
background-repeat: no-repeat;
height: 4px;
width: 265px;
margin-left: -2px;
}
.sheet-rolltemplate-ark .sheet-rolltemplate-ark-center {
text-align: center;
width: auto;
}
.sheet-rolltemplate-ark .sheet-rolltemplate-ark-color {
background-image: var(--roll_middle);
background-size: 260px 500px;
box-shadow: var(--box_shadow);
}
.sheet-rolltemplate-ark .sheet-rolltemplate-ark-background {
background: #e6d1bf;
background-size: cover;
background-image: var(--roll_background);
margin-left: 20px;
margin-right: 22px;
}
.sheet-rolltemplate-ark .sheet-titre {
display: grid;
grid-template-columns: 26% 67%;
background-image: url("https://imgsrv.roll20.net/?src=https%3A//raw.githubusercontent.com/ctotone/JdR/refs/heads/main/Arkhanval/images/fond_titre_roll.png");
background-size: 263px 70px;
background-repeat: no-repeat;
height: 70px;
margin-left: 17px;
}
.sheet-rolltemplate-ark sheet-span.r_rouge {
color: red;
}
.sheet-rolltemplate-ark sheet-span.r_orange {
color: orange;
}
.sheet-rolltemplate-ark .sheet-rolltemplate-ark-titre-roll,
.sheet-rolltemplate-ark .sheet-portrait_roll,
.sheet-rolltemplate-ark .sheet-result_roll,
.sheet-rolltemplate-ark .sheet-rolltemplate-ark-header {
word-wrap: break-word;
letter-spacing: -0.7px;
padding-top: 12px;
padding-bottom: 12px;
font-weight: bold;
width: auto;
margin-left: 0px;
margin-top: -1px;
margin-bottom: -5px;
color: var(--blanc_roll);
font-size: 16px;
font-family: "Faculty Glyphic", sans-serif;
line-height: 23px;
}
.sheet-rolltemplate-ark .sheet-result_roll {
font-size: 40px;
color: #6f79a0;
display: flex;
align-items: center;
justify-content: center;
}
.sheet-rolltemplate-ark .sheet-rolltemplate-ark-subheader {
background-color: transparent;
color: #000000b3;
font-size: 13px;
letter-spacing: 0px;
padding: 15px;
padding-top: 15px;
margin-top: 0px;
font-family: "Faculty Glyphic", sans-serif;
width: auto;
line-height: 50px;
}
.sheet-rolltemplate-ark .sheet-template-ark-result {
font-size: 36px;
font-family: "Faculty Glyphic", sans-serif;
padding: 15px;
}
.sheet-rolltemplate-ark .sheet-template-ark-rappel {
padding: 5px;
padding-bottom: 6px;
letter-spacing: -0.2px;
color: var(--blanc_roll);
width: auto;
margin-left: -2px;
background: var(--noir_roll);
margin-top: -5px;
font-family: "Faculty Glyphic", sans-serif;
/* font-family: "EB Garamond", serif; */
font-size: 18px;
line-height: 10px;
padding-top: 10px;
}
.sheet-rolltemplate-ark .sheet-template-ark-rappel {
background-image: url(https://imgsrv.roll20.net/?src=https%3A//raw.githubusercontent.com/ctotone/JdR/refs/heads/main/Arkhanval/images/fond_titre_roll.png);
background-size: cover;
width: 252px;
height: 42px;
line-height: 20px;
}
.sheet-rolltemplate-ark .inlinerollresult {
background-color: transparent !important;
border: none !important;
color: unset !important;
}
.sheet-rolltemplate-ark-header .inlinerollresult {
background-color: transparent !important;
border: none !important;
color: unset !important;
}
.sheet-rolltemplate-ark .inlinerollresult.fullcrit {
background-color: transparent !important;
border: none !important;
color: unset !important;
}
.sheet-rolltemplate-ark .inlinerollresult.fullfail {
background-color: transparent !important;
border: none !important;
color: unset !important;
}
.sheet-rolltemplate-ark .inlinerollresult.importantroll {
background-color: transparent !important;
border: none !important;
color: unset !important;
}
.sheet-rolltemplate-ark .sheet-content {
display: grid;
grid-template-columns: 50% 50%;
line-height: 13px;
color: #000000b3;
margin-left: 2px;
}
.sheet-rolltemplate-ark .sheet-content > div{
padding: 5px;
}
/* Left column */
.sheet-rolltemplate-ark .sheet-content .sheet-key {
font-weight: bold;
padding-right: 2px;
text-align: right;
font-size: 13px;
}
/* Right column */
.sheet-rolltemplate-ark .sheet-content .sheet-value {
padding-right: 5px;
text-align: left;
font-size: 13px;
}
/* Make even-numbered rows grey */
.sheet-rolltemplate-ark .sheet-content :nth-child(4n+3),
.sheet-rolltemplate-ark .sheet-content :nth-child(4n) {
background: #51515136;
color: unset !important;
}
/* Boutons liens */
/* Roll Buttons */
.sheet-rolltemplate-ark a[href^='!'],
.sheet-rolltemplate-ark a[href^='~'],
.sheet-rolltemplate-ark a[href^='`']{
border: none;
background: none;
line-height: 6px;
text-align: left;
}
.sheet-rolltemplate-ark a[href^='!']:hover,
.sheet-rolltemplate-ark a[href^='~']:hover,
.sheet-rolltemplate-ark a[href^='`']:hover{
margin: -1px;
font-weight: bold;
color: #e3e003;
}
/* hyperlinks */
.sheet-rolltemplate-ark a:not([href^='~']):not([href^='!']):not([href^='`']){
font-weight: bold;
color:#3f8aa6;
}
.sheet-rolltemplate-ark a:not([href^='~']):not([href^='!']):not([href^='`']):hover {
font-weight: bold;
color:#70c0dd;
}
.sheet-rolltemplate-ark a:not([href^='~']):not([href^='!']):not([href^='`']):visited{
color:purple;
}
.sheet-rolltemplate-ark a:not([href^='~']):not([href^='!']):not([href^='`']):visited:hover{
color:rgb(187, 45, 187);
}
.sheet-rolltemplate-ito {
margin-left: -10px;
}
.withoutavatars .sheet-rolltemplate-ito {
margin-left: -10px;
}
.sheet-rolltemplate-ito .sheet-container {
border: none;
border-radius: 130px;
width: 260px;
height: 260px;
background-image: url(https://raw.githubusercontent.com/ctotone/JdR/refs/heads/main/Arkhanval/images/background_xp.png);
background-size: cover;
color: #000000b3;
font-size: 16px;
/* font-family: "EB Garamond", serif; */
font-family: "Faculty Glyphic", sans-serif;
line-height: 23px;
--rouge: red;
--vert: #00bd00;
--noir: black;
}
/* Header formatting - title and subtitle */
.sheet-rolltemplate-ito .sheet-header {
color: #000000b3;
text-align: center;
padding-top: 50px;
padding-bottom: 6px;
border-bottom: 2px solid #000000b3;
margin-left: 63px;
width: 136px;
}
.sheet-rolltemplate-ito .sheet-title {
font-size: 25px;
font-weight: bold;
margin-bottom: 5px;
/* letter-spacing: -0.5px; */
}
.sheet-rolltemplate-ito .sheet-subtitle {
font-size: 14px;
font-style: italic;
margin-bottom: 5px;
letter-spacing: -0.5px;
}
/* Allprops part */
.sheet-rolltemplate-ito .sheet-content {
width: 184px;
margin-left: 38px;
display: grid;
grid-template-columns: auto auto;
line-height: 1.4em;
margin-top: 10px;
}
.sheet-rolltemplate-ito .sheet-content > div {
padding: 5px;
}
/* Left column */
.sheet-rolltemplate-ito .sheet-content .sheet-key {
font-weight: bold;
padding-right: 10px;
text-align: right;
}
/* Empty rule, use this if you want to change the right column
.sheet-rolltemplate-ito .sheet-value {
}
*/
/* Make even-numbered rows grey */
.sheet-rolltemplate-ito .sheet-content :nth-child(4n+3),
.sheet-rolltemplate-ito .sheet-content :nth-child(4n) {
background:#EEE;
}
/* Description field */
.sheet-rolltemplate-ito .sheet-desc,
.sheet-rolltemplate-ito .sheet-result,
.sheet-rolltemplate-ito .sheet-feedback-reussite,
.sheet-rolltemplate-ito .sheet-feedback-reussite-ark,
.sheet-rolltemplate-ito .sheet-feedback-reussite-a {
grid-column: span 2;
padding: 5px;
text-align: center;
}
.sheet-rolltemplate-ito .sheet-result_1,
.sheet-rolltemplate-ito .sheet-result_2,
.sheet-rolltemplate-ito .sheet-result_3,
.sheet-rolltemplate-ito .sheet-result_4,
.sheet-rolltemplate-ito .sheet-result_5,
.sheet-rolltemplate-ito .sheet-result_6,
.sheet-rolltemplate-ito .sheet-result_7,
.sheet-rolltemplate-ito .sheet-result_8,
.sheet-rolltemplate-ito .sheet-result_9,
.sheet-rolltemplate-ito .sheet-result_10,
.sheet-rolltemplate-ito .sheet-result_11,
.sheet-rolltemplate-ito .sheet-result_12 {
/* margin-top: 10px; */
font-size: 60px;
font-weight: bold;
width: 70px;
height: 70px;
background-repeat: no-repeat;
margin-left: 60px;
background-size: 70px 70px;
}
.sheet-rolltemplate-ito .sheet-result_1 {
background-image: url(https://raw.githubusercontent.com/ctotone/JdR/refs/heads/main/Arkhanval/images/symbole_01.png);
}
.sheet-rolltemplate-ito .sheet-result_2 {
background-image: url(https://raw.githubusercontent.com/ctotone/JdR/refs/heads/main/Arkhanval/images/symbole_02.png);
}
.sheet-rolltemplate-ito .sheet-result_3 {
background-image: url(https://raw.githubusercontent.com/ctotone/JdR/refs/heads/main/Arkhanval/images/symbole_03.png);
}
.sheet-rolltemplate-ito .sheet-result_4 {
background-image: url(https://raw.githubusercontent.com/ctotone/JdR/refs/heads/main/Arkhanval/images/symbole_04.png);
}
.sheet-rolltemplate-ito .sheet-result_5 {
background-image: url(https://raw.githubusercontent.com/ctotone/JdR/refs/heads/main/Arkhanval/images/symbole_05.png);
}
.sheet-rolltemplate-ito .sheet-result_6 {
background-image: url(https://raw.githubusercontent.com/ctotone/JdR/refs/heads/main/Arkhanval/images/symbole_06.png);
}
.sheet-rolltemplate-ito .sheet-result_7 {
background-image: url(https://raw.githubusercontent.com/ctotone/JdR/refs/heads/main/Arkhanval/images/symbole_07.png);
}
.sheet-rolltemplate-ito .sheet-result_8 {
background-image: url(https://raw.githubusercontent.com/ctotone/JdR/refs/heads/main/Arkhanval/images/symbole_08.png);
}
.sheet-rolltemplate-ito .sheet-result_9 {
background-image: url(https://raw.githubusercontent.com/ctotone/JdR/refs/heads/main/Arkhanval/images/symbole_09.png);
}
.sheet-rolltemplate-ito .sheet-result_10 {
background-image: url(https://raw.githubusercontent.com/ctotone/JdR/refs/heads/main/Arkhanval/images/symbole_10.png);
}
.sheet-rolltemplate-ito .sheet-result_11 {
background-image: url(https://raw.githubusercontent.com/ctotone/JdR/refs/heads/main/Arkhanval/images/symbole_11.png);
}
.sheet-rolltemplate-ito .sheet-result_12 {
background-image: url(https://raw.githubusercontent.com/ctotone/JdR/refs/heads/main/Arkhanval/images/symbole_12.png);
width: 100px;
height: 100px;
margin-left: 45px;
background-size: 100px 100px;
}
.sheet-rolltemplate-ito .sheet-feedback-reussite,
.sheet-rolltemplate-ito .sheet-feedback-reussite-ark,
.sheet-rolltemplate-ito .sheet-feedback-reussite-a
{
/* margin-top: 30px; */
font-size: 22px;
font-weight: bold;
letter-spacing: -1.5px;
}
.sheet-rolltemplate-ito .sheet-feedback-reussite {
color: #000000b3;
}
.sheet-rolltemplate-ito .sheet-feedback-reussite-ark {
color: #a13d32;
}
.sheet-rolltemplate-ito .sheet-feedback-reussite-a {
color: #707aa1;
}