Files
2024-04-12 15:19:22 +02:00

846 lines
20 KiB
CSS

@import url('https://fonts.googleapis.com/css2?family=Dancing+Script:wght@400..700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@200..700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Rouge+Script&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Great+Vibes&display=swap');
/* Style de la page principale */
.charsheet {
--black: black;
--white: #ffffffed;
--grey: #737272d4;
--oswald: "Oswald";
--dancing: "Dancing Script", cursive;
--rouge_script: "Rouge Script", cursive;
margin: 0px;
border-radius: 0px;
font-family: var(--oswald);
font-weight: bolder;
font-size: 13px;
color: var(--black);
width: 860px;
height: 470px;
margin-top: 0px;
background-image: url(https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Notre%20tombeau/images/back1.png);
background-size: 880px 495px;
background-repeat: no-repeat;
margin-left: -10px;
padding-left: 10px !important;
padding-right: 10px !important;
padding-top: 15px !important;
box-shadow: 1px 1px 10px 1px #371212;
border-radius: 10px;
}
.sheet-darkmode .sheetform {
background-color: #1F1F1F;
}
/* div { border: 1px solid black;} */
body.sheet-darkmode .charsheet {
background-color: #1f1f1f;
--black: #000000eb;
--fond_carte: #939898ed;
color: var(--black);
box-shadow: 1px 1px 14px 1px #ff00006e;
}
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
-webkit-appearance: none;
margin: 0;
}
input[type=number].aptitudes,
input[type=number].vie_adrenaline {
background: transparent;
color: var(--black);
font-size: 18px;
font-weight: bold;
border: none;
width: 26px !important;
height: 21px;
text-align: center;
margin-top: -1px;
outline: none;
cursor: pointer;
}
input[type=number].vie_adrenaline {
width: 121px !important;
height: 107px;
font-size: 70px;
cursor: pointer;
}
input[type=number].armes_d {
background: transparent;
color: var(--black);
font-size: 20px;
font-weight: bold;
border: none;
text-align: center;
margin-top: -1px;
outline: none;
cursor: pointer;
width: 20px !important;
}
.charsheet button[type=action].aptitudes::before,
.charsheet button[type=roll].aptitudes::before,
.charsheet button[type=action].roll_armes::before {
content: '';
}
.charsheet button[type=action].aptitudes,
.charsheet button[type=roll].aptitudes,
.charsheet button[type=action].roll_armes {
background-color: transparent;
cursor: pointer;
border: none;
padding: 0;
margin: 0;
display: flex;
align-items: center;
justify-content: flex-end;
font-size: 18px;
font-weight: bold;
padding-left: 5px;
background-image: none;
box-shadow: none;
}
.charsheet button[type=action].roll_armes {
background-image: url(https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Notre%20tombeau/images/dice_arme.png);
background-repeat: no-repeat;
background-size: 24px 24px;
height: 24px;
width: 24px;
margin-top: 5px;
margin-left: 5px;
}
.charsheet button[type=action].roll_armes:hover {
margin-left: 2px;
padding: 0px;
padding-left: 2px;
background-position: 0 0px;
}
.charsheet button[type=action].aptitudes:hover,
.charsheet button[type=roll].aptitudes:hover {
color: #6d0101 !important;
}
div.armes_roll,
div.affichage_aptitude {
display: none;
}
.charsheet .arme_d1[value="1"] ~ div.armes_roll,
.charsheet .arme_d2[value="1"] ~ div.armes_roll,
.charsheet .arme_d3[value="1"] ~ div.armes_roll,
.charsheet .arme_d4[value="1"] ~ div.armes_roll,
.charsheet .affichage_aptitude[value="1"] ~ div.affichage_aptitude {
display: block;
}
/* Structure générale de la feuille */
.wrapper_feuille {
display: grid;
grid-template-columns: 370px 10px 130px 10px 340px;
grid-auto-rows: 30px;
margin-top: 5px;
}
.feuille_titre {
grid-column: 1;
grid-row: 1 / 3;
margin-bottom: 5px;
display: flex;
align-items: center;
justify-content: center;
font-size: 61px;
margin-top: -3px;
letter-spacing: -3px;
white-space: nowrap;
}
.feuille_citation {
grid-column: 3 / 6;
grid-row: 1 / 3;
margin-bottom: 5px;
font-family: var(--dancing);
font-size: 23px;
line-height: 22px;
letter-spacing: 1px;
color: #000000a1;
padding-top: 5px;
margin-left: 3px;
}
span.hugo {
font-family: var(--oswald);
font-size: 11px;
letter-spacing: -0.2px;
color: var(--black);
}
.feuille_aptitude {
grid-column: 1;
grid-row: 3/16;
margin-bottom: 5px;
}
.feuille_vie {
grid-column: 3;
grid-row: 3/7;
margin-bottom: 5px;
border: 5px solid black;
box-shadow: 3px 3px 5px 1px #0000008c;
}
.feuille_vie_titre {
grid-column: 3;
grid-row: 7;
margin-bottom: 5px;
font-size: 27px;
display: flex;
align-items: center;
justify-content: flex-end;
}
.feuille_adrenaline {
grid-column: 3;
grid-row: 9 / 13;
margin-bottom: 5px;
border: 5px solid black;
margin-top: -20px;
margin-bottom: 25px;
box-shadow: 3px 3px 5px 1px #0000008c;
}
.feuille_adrenaline_titre {
grid-column: 3;
grid-row: 13;
margin-bottom: 5px;
font-size: 27px;
display: flex;
align-items: center;
justify-content: flex-end;
margin-top: -35px;
}
.feuille_arme {
grid-column: 5;
grid-row: 3;
margin-bottom: 5px;
background: black;
color: var(--white);
font-size: 22px;
display: flex;
align-items: center;
padding-left: 10px;
height: 35px;
box-shadow: 1px 1px 14px 1px #0000008c;
}
.feuille_arme_donnees {
grid-column: 5;
grid-row: 4 / 9;
margin-bottom: 5px;
margin-top: -10px;
}
.feuille_sauvagerie {
grid-column: 5;
grid-row: 9;
background: black;
color: var(--white);
font-size: 22px;
display: flex;
align-items: center;
padding-left: 10px;
height: 35px;
margin-top: -20px;
box-shadow: 1px 1px 14px 1px #0000008c;
}
.feuille_sauvagerie_donnees {
grid-column: 5;
grid-row: 10 / 16;
margin-bottom: 5px;
margin-top: -11px;
padding-left: 10px;
}
/* Structure Aptitudes */
.wrapper_aptitude {
display: grid;
grid-template-columns: 120px 5px 30px 15px 50px 150px;
grid-auto-rows: 29px;
}
.aptitude_titre1 {
letter-spacing: 2px;
grid-column: 1 / 5;
background: black;
color: var(--white);
font-size: 29px;
display: flex;
align-items: center;
padding-left: 10px;
height: 35px;
box-shadow: 1px 1px 14px 1px #0000008c;
}
.aptitude_titre2 {
grid-column: 5;
background: black;
color: var(--white);
font-size: 12px;
display: flex;
align-items: flex-end;
height: 35px;
padding-left: 5px;
box-shadow: 1px 1px 14px 1px #0000008c;
}
.aptitude_titre3 {
grid-column: 6;
background: black;
color: var(--white);
font-size: 12px;
display: flex;
align-items: flex-end;
justify-content: flex-end;
padding-right: 3px;
height: 35px;
box-shadow: 1px 1px 14px 1px #0000008c;
}
.aptitude_1 {
grid-column: 1;
display: flex;
align-items: center;
justify-content: flex-end;
padding-right: 10px;
font-size: 18px;
padding-left: 5px;
white-space: nowrap;
}
.aptitude_2 {
grid-column: 3;
border: 2px solid black;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 2px;
margin-top: 2px;
font-size: 16px;
}
.aptitude_3 {
grid-column: 5;
color: var(--grey);
font-size: 15px;
display: flex;
align-items: center;
justify-content: flex-start;
white-space: nowrap;
padding-left: 5px;
letter-spacing: -0.5px;
}
.aptitude_4 {
grid-column: 6;
color: var(--grey);
font-size: 12px;
display: flex;
justify-content: flex-end;
padding-right: 3px;
align-items: center;
margin-top: 2px;
letter-spacing: -0.5px;
}
.affichage_aptitude {
grid-column: 2;
grid-row: 11;
margin-top: 2px;
letter-spacing: -0.5px;
white-space: nowrap;
font-size: 16px;
font-weight: bold;
color: var(--white);
margin-left: -194px;
border: 2px solid #0000008c;
margin-right: 15px;
display: flex;
align-items: center;
align-content: center;
text-align: center;
background: #6d0101;
}
.relance {
grid-column: 2;
grid-row: 13;
padding-right: 3px;
margin-top: 2px;
letter-spacing: -0.5px;
white-space: nowrap;
font-size: 18px;
font-weight: bold;
color: var(--black);
margin-left: -140px;
}
.relance_info {
grid-column: 2;
grid-row: 13;
font-family: var(--dancing);
font-size: 18px;
height: 15px;
white-space: nowrap;
margin-top: 15px;
margin-left: -135px;
}
.regain {
grid-column: 2;
grid-row: 14 / 16;
padding-right: 3px;
margin-top: 2px;
letter-spacing: -0.5px;
white-space: nowrap;
font-size: 18px;
font-weight: bold;
color: var(--black);
padding-top: 15px;
margin-left: -135px;
}
.regain_info {
grid-column: 2;
grid-row: 14;
font-family: var(--dancing);
font-size: 18px;
height: 15px;
white-space: nowrap;
margin-top: 35px;
margin-left: -135px;
}
/* Structure Armes */
.wrapper_armes {
display: grid;
grid-template-columns: 29px 214px 10px 15px 30px 15px 25px;
grid-auto-rows: 29px;
font-size: 20px;
}
.armes_nom {
grid-column: 2;
display: flex;
align-items: center;
border-bottom: 2px dotted black;
margin-left: 10px;
font-size: 18px;
}
.armes_fixe1 {
grid-column: 3;
display: flex;
justify-content: flex-end;
align-items: center;
}
.armes_d1 {
grid-column: 4;
display: flex;
justify-content: center;
align-items: center;
}
.armes_fixe2 {
grid-column: 5;
display: flex;
justify-content: flex-end;
align-items: center;
}
.armes_d2 {
grid-column: 6;
display: flex;
justify-content: center;
align-items: center;
margin-left: 5px;
}
.armes_fixe3 {
grid-column: 7;
display: flex;
justify-content: flex-end;
align-items: center;
}
.armes_roll {
grid-column: 1;
display: flex;
justify-content: flex-end;
align-items: center;
}
/* Structure Sauvagerie */
.wrapper_sauvagerie {
display: grid;
grid-template-columns: 330px;
grid-auto-rows: 16px;
font-size: 14px;
}
.sauvagerie_nom {
grid-column: 1;
grid-row: 1;
}
.sauvagerie_info {
grid-column: 1;
grid-row: 2;
font-family: var(--dancing);
font-size: 15px;
height: 15px;
margin-top: -4px;
}
.charsheet input.armes {
font-weight: bold;
width: 97%;
resize: none;
padding: 0;
border: none;
background: none;
cursor: pointer;
outline: none;
font-family: var(--oswald);
font-size: 15px;
color: var(--black);
padding-top: 6px;
}
/* Roll template */
.sheet-rolltemplate-tombeau,
.sheet-rolltemplate-relance,
.sheet-rolltemplate-aptitude {
margin-left: -15px;
color: #ffffffb3;
font-family: Oswald;
}
.sheet-rolltemplate-relance {
margin-left: 15px;
}
.sheet-rolltemplate-aptitude a[href^="~"] {
color: var(--echec-majeur);
background-color: transparent;
font-size: 14px;
border: none;
}
.sheet-rolltemplate-aptitude a[href^="~"]:hover {
color: #fd8181;
}
.sheet-rolltemplate-darkmode.sheet-rolltemplate-tombeau,
.sheet-rolltemplate-darkmode.sheet-rolltemplate-relance,
.sheet-rolltemplate-darkmode.sheet-rolltemplate-aptitude {
color: black;
}
.sheet-rolltemplate-tombeau .sheet-ecart,
.sheet-rolltemplate-relance .sheet-ecart,
.sheet-rolltemplate-aptitude .sheet-ecart {
height: 20px;
background-color: transparent;
}
.sheet-rolltemplate-tombeau .sheet-container,
.sheet-rolltemplate-relance .sheet-container,
.sheet-rolltemplate-aptitude .sheet-container {
width: 260px;
height: 150px;
background-image: url(https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Notre%20tombeau/images/background_rolltemplate.jpg);
background-size: 280px 170px;
background-repeat: no-repeat;
padding: 10px;
border: 2px solid #393939;
border-radius: 10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
box-shadow: 3px -3px 10px 3px #606060e3;
}
.sheet-rolltemplate-relance .sheet-container {
width: 200px;
height: 110px;
background-size: 220px 130px;
}
.sheet-rolltemplate-tombeau .sheet-container,
.sheet-rolltemplate-relance .sheet-container,
.sheet-rolltemplate-aptitude .sheet-container {
--echec-classique: #ff2f2fc7;
--echec-majeur: #ff2f2fc7;
--reussite-classique: #03b91fb3;
--reussite-majeur: #03b91fb3;
}
.sheet-rolltemplate-tombeau .sheet-content,
.sheet-rolltemplate-relance .sheet-content,
.sheet-rolltemplate-aptitude .sheet-content {
display: grid;
grid-template-columns: 125px 45px 45px 45px;
line-height: 25px;
height: 150px;
font-size: 16px;
}
.sheet-rolltemplate-relance .sheet-content {
grid-template-columns: 65px 45px 45px 45px;
}
.sheet-rolltemplate-relance .sheet-content {
height: 120px;
}
.sheet-rolltemplate-tombeau .sheet-survivant-titre,
.sheet-rolltemplate-relance .sheet-survivant-titre,
.sheet-rolltemplate-aptitude .sheet-survivant-titre {
grid-column: 1 / 5;
grid-row: 1;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
font-size: 26px;
margin-bottom: 15px;
text-transform: uppercase;
}
.sheet-rolltemplate-tombeau .sheet-resultat-des,
.sheet-rolltemplate-relance .sheet-resultat-des,
.sheet-rolltemplate-aptitude .sheet-resultat-des {
grid-column: 1/5;
grid-row: 2;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
height: 35px;
}
.sheet-rolltemplate-tombeau .sheet-separateur,
.sheet-rolltemplate-relance .sheet-separateur,
.sheet-rolltemplate-aptitude .sheet-separateur {
font-size: 29px;
font-weight: bold;
color: #ffffff9c;
margin-left: 3px;
margin-right: 3px;
}
.sheet-rolltemplate-relance .sheet-separateur {
font-size: 35px;
}
.sheet-rolltemplate-tombeau .sheet-desc,
.sheet-rolltemplate-aptitude .sheet-desc {
grid-column: 1 / 5;
grid-row: 3 / 5;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
font-size: 17px;
margin-top: -65px;
}
.sheet-rolltemplate-tombeau .sheet-desc-reussite1,
.sheet-rolltemplate-aptitude .sheet-desc-reussite1 {
grid-column: 1 / 5;
grid-row: 3;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
font-size: 24px;
font-weight: bold;
color: var(--reussite-majeur);
margin-top: 15px;
}
.sheet-rolltemplate-tombeau .sheet-desc-adrenaline_gain,
.sheet-rolltemplate-aptitude .sheet-desc-adrenaline_gain {
grid-column: 1 / 5;
grid-row: 4;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
font-size: 16px;
font-weight: bold;
color: var(--reussite-majeur);
line-height: 20px;
}
.sheet-rolltemplate-tombeau .sheet-desc-reussite2,
.sheet-rolltemplate-aptitude .sheet-desc-reussite2 {
grid-column: 1 / 5;
grid-row: 3 / 5;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
font-size: 30px;
font-weight: bold;
color: var(--reussite-classique);
}
.sheet-rolltemplate-tombeau .sheet-desc-echec1,
.sheet-rolltemplate-aptitude .sheet-desc-echec1 {
grid-column: 1 / 5;
grid-row: 3;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
font-size: 24px;
font-weight: bold;
color: var(--echec-majeur);
}
.sheet-rolltemplate-tombeau .sheet-desc-echec2,
.sheet-rolltemplate-aptitude .sheet-desc-echec2 {
grid-column: 1 / 5;
grid-row: 3 / 5;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
font-size: 30px;
padding-top: 5px;
font-weight: bold;
color: var(--echec-classique);
}
.sheet-rolltemplate-tombeau .sheet-desc-adrenaline_perte,
.sheet-rolltemplate-aptitude .sheet-desc-adrenaline_perte {
grid-column: 1 / 5;
grid-row: 4;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
font-size: 18px;
font-weight: bold;
color: #ffffffb3;
color: var(--echec-majeur);
line-height: 20px;
}
.sheet-rolltemplate-tombeau .inlinerollresult,
.sheet-rolltemplate-tombeau .inlinerollresult.importantroll,
.sheet-rolltemplate-tombeau .inlinerollresult.fullcrit,
.sheet-rolltemplate-tombeau .inlinerollresult.fullfail,
.sheet-rolltemplate-aptitude .inlinerollresult,
.sheet-rolltemplate-aptitude .inlinerollresult.importantroll,
.sheet-rolltemplate-aptitude .inlinerollresult.fullcrit,
.sheet-rolltemplate-aptitude .inlinerollresult.fullfail {
border: none !important;
background-color: transparent !important;
color: unset !important;
font-size: 25px;
}
.sheet-rolltemplate-tombeau .sheet-value-reussite .inlinerollresult,
.sheet-rolltemplate-tombeau .sheet-value-reussite .inlinerollresult.importantroll,
.sheet-rolltemplate-tombeau .sheet-value-reussite .inlinerollresult.fullcrit,
.sheet-rolltemplate-tombeau .sheet-value-reussite .inlinerollresult.fullfail,
.sheet-rolltemplate-aptitude .sheet-value-reussite .inlinerollresult,
.sheet-rolltemplate-aptitude .sheet-value-reussite .inlinerollresult.importantroll,
.sheet-rolltemplate-aptitude .sheet-value-reussite .inlinerollresult.fullcrit,
.sheet-rolltemplate-aptitude .sheet-value-reussite .inlinerollresult.fullfail,
.sheet-rolltemplate-relance .sheet-value-reussite .inlinerollresult,
.sheet-rolltemplate-relance .sheet-value-reussite .inlinerollresult.importantrol,
.sheet-rolltemplate-relance .sheet-value-reussite .inlinerollresult.fullcrit,
.sheet-rolltemplate-relance .sheet-value-reussite .inlinerollresult.fullfail {
border: none !important;
background-color: #005200 !important;
color: #ffffffb3 !important;
font-size: 22px;
display: flex;
align-items: center;
justify-content: center;
width: 26px;
height: 29px;
margin-left: 2px;
margin-right: 2px;
border-radius: 5px;
}
.sheet-rolltemplate-relance .sheet-value-reussite .inlinerollresult,
.sheet-rolltemplate-relance .sheet-value-reussite .inlinerollresult.importantrol,
.sheet-rolltemplate-relance .sheet-value-reussite .inlinerollresult.fullcrit,
.sheet-rolltemplate-relance .sheet-value-reussite .inlinerollresult.fullfail {
font-size: 35px;
width: 33px;
height: 44px;
}
.sheet-rolltemplate-tombeau .sheet-value-echec .inlinerollresult,
.sheet-rolltemplate-tombeau .sheet-value-echec .inlinerollresult.importantroll,
.sheet-rolltemplate-tombeau .sheet-value-echec .inlinerollresult.fullcrit,
.sheet-rolltemplate-tombeau .sheet-value-echec .inlinerollresult.fullfail,
.sheet-rolltemplate-aptitude .sheet-value-echec .inlinerollresult,
.sheet-rolltemplate-aptitude .sheet-value-echec .inlinerollresult.importantroll,
.sheet-rolltemplate-aptitude .sheet-value-echec .inlinerollresult.fullcrit,
.sheet-rolltemplate-aptitude .sheet-value-echec .inlinerollresult.fullfail,
.sheet-rolltemplate-relance .sheet-value-echec .inlinerollresult,
.sheet-rolltemplate-relance .sheet-value-echec .inlinerollresult.importantrol,
.sheet-rolltemplate-relance .sheet-value-echec .inlinerollresult.fullcrit,
.sheet-rolltemplate-relance .sheet-value-echec .inlinerollresult.fullfail {
border: none !important;
background-color: #7b0606 !important;
color: #ffffffb3 !important;
font-size: 19px;
display: flex !important;
align-items: center;
justify-content: center;
width: 18px;
height: 24px;
margin-left: 2px;
margin-right: 2px;
border-radius: 5px;
}
.sheet-rolltemplate-relance .sheet-value-echec .inlinerollresult,
.sheet-rolltemplate-relance .sheet-value-echec .inlinerollresult.importantrol,
.sheet-rolltemplate-relance .sheet-value-echec .inlinerollresult.fullcrit,
.sheet-rolltemplate-relance .sheet-value-echec .inlinerollresult.fullfail {
font-size: 35px;
width: 33px;
height: 44px;
}