mirror of
https://github.com/Nighthawk42/roll20-character-sheets.git
synced 2026-08-30 11:42:29 +00:00
998 lines
32 KiB
CSS
998 lines
32 KiB
CSS
/*------------------------------------------------*\
|
|
#GENERAL
|
|
\*------------------------------------------------*/
|
|
|
|
/* --------- Inputs ------------- */
|
|
|
|
input[type="text"] {
|
|
background-color: transparent;
|
|
border-style: none none solid none;
|
|
border-color: gray;
|
|
}
|
|
|
|
textarea:focus,
|
|
input[type="text"]:focus,
|
|
input[type="number"]:focus{
|
|
background-color: #F6CED8;
|
|
}
|
|
|
|
label.sheet-vide {
|
|
width: 15px;
|
|
}
|
|
|
|
/*-----------------------------------------------------------------*\
|
|
#SECTIONS
|
|
\*-----------------------------------------------------------------*/
|
|
|
|
|
|
/* --------- General Section Styling ------------- */
|
|
.sheet-flex-row {
|
|
display: flex;
|
|
flex-direction: row;
|
|
}
|
|
|
|
.sheet-flex-column {
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
/* =============================================================================================== */
|
|
/* =============================================================================================== */
|
|
/* =============================================================================================== */
|
|
/* ============================= ========================= */
|
|
/* ============================= PAGE 1 - CARACS ========================= */
|
|
/* ============================= ========================= */
|
|
/* =============================================================================================== */
|
|
/* =============================================================================================== */
|
|
/* =============================================================================================== */
|
|
|
|
/* ----- Character Sheet Structure -------
|
|
|
|
'.sheet-caracs' defines the sheet's general structure and dimensions using CSS Grid.
|
|
|
|
It uses 'Grid template areas' to name each sheet section,
|
|
so that they can be positioned in the grid easily,
|
|
while also providing a human-readable overview. */
|
|
div.sheet-caracs {
|
|
display: grid;
|
|
grid-template-columns: repeat(33%, 3);
|
|
grid-template-rows: 120px 110px 315px 200px;
|
|
grid-template-areas:"perso perso perso"
|
|
"attrs attrs attrs"
|
|
"metie metie metie"
|
|
"dieux comba comba";
|
|
grid-gap: 1px;
|
|
width: 650px;
|
|
height: 920px;
|
|
background-image: url(https://github.com/Gustavitch/roll20-character-sheets/blob/Tylestel/Tylestel/images/page1_perso_lq.png?raw=true);
|
|
background-size: 650px 920px;
|
|
background-repeat: no-repeat;
|
|
}
|
|
|
|
/* ====================================================================================================================*/
|
|
/* PERSO SECTION */
|
|
/* ====================================================================================================================*/
|
|
|
|
div.sheet-perso{
|
|
grid-area: perso;
|
|
padding-left: 50px;
|
|
padding-top: 65px;
|
|
font-size: 14px;
|
|
}
|
|
|
|
div.sheet-perso p{
|
|
font-family: 'Trebuchet MS';
|
|
}
|
|
|
|
.sheet-perso .sheet-petit p{
|
|
margin-left: 10px;
|
|
font-size: 10px;
|
|
}
|
|
|
|
.sheet-perso .sheet-petit input{
|
|
margin-left: 10px;
|
|
font-size: 12px;
|
|
width: 30px;
|
|
height: 12px;
|
|
}
|
|
|
|
.sheet-perso .sheet-moyen p{
|
|
font-size: 12px;
|
|
width: 180px;
|
|
}
|
|
|
|
.sheet-perso .sheet-moyen input{
|
|
margin-left: 10px;
|
|
font-size: 12px;
|
|
width: 60px;
|
|
height: 12px;
|
|
}
|
|
|
|
.sheet-perso .sheet-long p{
|
|
font-size: 12px;
|
|
width: 180px;
|
|
}
|
|
|
|
.sheet-perso .sheet-long input{
|
|
margin-left: 10px;
|
|
font-size: 12px;
|
|
width: 100px;
|
|
height: 12px;
|
|
}
|
|
|
|
/* ====================================================================================================================*/
|
|
/* ATTRS (Attributs) SECTION */
|
|
/* ====================================================================================================================*/
|
|
|
|
div.sheet-attrs{
|
|
grid-area: attrs;
|
|
padding-left: 25px;
|
|
padding-top: 15px;
|
|
}
|
|
|
|
.sheet-attrs .sheet-attr p{
|
|
height: 80px;
|
|
width: 62px;
|
|
margin-left: 30px;
|
|
font-size: 14px;
|
|
text-align: center;
|
|
font-family: 'Trebuchet MS';
|
|
}
|
|
|
|
.sheet-attrs .sheet-attr input{
|
|
justify: center;
|
|
text-align: center;
|
|
font-size: 28px;
|
|
width: 30px;
|
|
|
|
background-image: url(https://github.com/Gustavitch/roll20-character-sheets/blob/Tylestel/Tylestel/images/cercle_attribut.png?raw=true);
|
|
background-repeat: no-repeat;
|
|
background-size: contain;
|
|
background-position: bottom;
|
|
height: 50px;
|
|
width: 50px;
|
|
}
|
|
|
|
/* ====================================================================================================================*/
|
|
/* METIG/METID (Métiers Gauche/Droite) SECTION */
|
|
/* ====================================================================================================================*/
|
|
|
|
div.sheet-metie{
|
|
grid-area: metie;
|
|
row-gap: 0px;
|
|
padding-top: 40px;
|
|
padding-left: 40px;
|
|
display: grid;
|
|
grid-template-columns: 150px 12% 10% 2% 25% 23%;
|
|
grid-template-rows: repeat(20px, 9);
|
|
grid-template-areas:"artisanT artisanD artisanD . guerrierT guerrierD"
|
|
"artisteT artisteD artisteD . kleptosT kleptosD"
|
|
"athleteT athleteD athleteD . marinT marinD"
|
|
"balistikosT balistikosD balistikosD . pharmakaT pharmakaD"
|
|
"dresseurT dresseurD dresseurD . pretreT pretreD"
|
|
"fluxT fluxD fluxD . rheteurT rheteurD"
|
|
"kardia1T kardia1T kardia1D . savantT savantD"
|
|
"kardia2T kardia2T kardia2D . strategosT strategosD"
|
|
"kardia3T kardia3T kardia3D . survieT survieD";
|
|
}
|
|
|
|
.sheet-metie input{
|
|
justify: center;
|
|
text-align: center;
|
|
font-size: 14px;
|
|
height: 25px;
|
|
width: 52px;
|
|
padding: 0;
|
|
|
|
background-image: url(https://github.com/Gustavitch/roll20-character-sheets/blob/Tylestel/Tylestel/images/metiers/_cadre.png?raw=true);
|
|
background-repeat: no-repeat;
|
|
background-size: 50px 25px;
|
|
background-position: center;
|
|
}
|
|
|
|
.sheet-metie .sheet-metierTitre {
|
|
display: flex;
|
|
align-items: center;
|
|
background-size: 25px 25px;
|
|
background-repeat: no-repeat;
|
|
background-position: 48px 0px;
|
|
height: 25px;
|
|
font-family: 'Trebuchet MS';
|
|
}
|
|
|
|
.sheet-metie .sheet-metierDescription {
|
|
display: flex;
|
|
align-items: center;
|
|
font-size: 8px;
|
|
color: gray;
|
|
line-height: 9px;
|
|
height: 20px;
|
|
}
|
|
|
|
.sheet-metie input.sheet-input_kardia{
|
|
font-size: 10px;
|
|
width: 85px;
|
|
background-image: none;
|
|
text-align: left;
|
|
margin-left: 10px;
|
|
height: 15px;
|
|
}
|
|
|
|
.sheet-metie .sheet-artisanT { grid-area: artisanT; }
|
|
.sheet-metie .sheet-artisanD { grid-area: artisanD; }
|
|
|
|
.sheet-metie .sheet-artisteT { grid-area: artisteT; }
|
|
.sheet-metie .sheet-artisteD { grid-area: artisteD; }
|
|
|
|
.sheet-metie .sheet-athleteT { grid-area: athleteT; background-image: url(https://github.com/Gustavitch/roll20-character-sheets/blob/Tylestel/Tylestel/images/metiers/athlete.png?raw=true); }
|
|
.sheet-metie .sheet-athleteD { grid-area: athleteD; }
|
|
|
|
.sheet-metie .sheet-balistikosT { grid-area: balistikosT; background-image: url(https://github.com/Gustavitch/roll20-character-sheets/blob/Tylestel/Tylestel/images/metiers/balistikos.png?raw=true); }
|
|
.sheet-metie .sheet-balistikosD { grid-area: balistikosD; }
|
|
|
|
.sheet-metie .sheet-dresseurT { grid-area: dresseurT; background-image: url(https://github.com/Gustavitch/roll20-character-sheets/blob/Tylestel/Tylestel/images/metiers/dresseur.png?raw=true); }
|
|
.sheet-metie .sheet-dresseurD { grid-area: dresseurD; }
|
|
|
|
.sheet-metie .sheet-fluxT { grid-area: fluxT; background-image: url(https://github.com/Gustavitch/roll20-character-sheets/blob/Tylestel/Tylestel/images/metiers/flux.png?raw=true); }
|
|
.sheet-metie .sheet-fluxD { grid-area: fluxD; }
|
|
|
|
.sheet-metie .sheet-kardia1T { grid-area: kardia1T; background-image: url(https://github.com/Gustavitch/roll20-character-sheets/blob/Tylestel/Tylestel/images/metiers/kardia.png?raw=true); }
|
|
.sheet-metie .sheet-kardia1D { grid-area: kardia1D; }
|
|
|
|
.sheet-metie .sheet-kardia2T { grid-area: kardia2T; background-image: url(https://github.com/Gustavitch/roll20-character-sheets/blob/Tylestel/Tylestel/images/metiers/kardia.png?raw=true); }
|
|
.sheet-metie .sheet-kardia2D { grid-area: kardia2D; }
|
|
|
|
.sheet-metie .sheet-kardia3T { grid-area: kardia3T; background-image: url(https://github.com/Gustavitch/roll20-character-sheets/blob/Tylestel/Tylestel/images/metiers/kardia.png?raw=true); }
|
|
.sheet-metie .sheet-kardia3D { grid-area: kardia3D; }
|
|
|
|
/* =====================================*/
|
|
/* Suite métiers */
|
|
/* =====================================*/
|
|
|
|
div.sheet-metie div.sheet-guerrierT { grid-area: guerrierT; background-image: url(https://github.com/Gustavitch/roll20-character-sheets/blob/Tylestel/Tylestel/images/metiers/guerrier.png?raw=true); }
|
|
.sheet-metie div.sheet-guerrierD { grid-area: guerrierD; }
|
|
|
|
div.sheet-metie div.sheet-kleptosT { grid-area: kleptosT; background-image: url(https://github.com/Gustavitch/roll20-character-sheets/blob/Tylestel/Tylestel/images/metiers/kleptos.png?raw=true); }
|
|
.sheet-metie div.sheet-kleptosD { grid-area: kleptosD; }
|
|
|
|
div.sheet-metie div.sheet-marinT { grid-area: marinT; }
|
|
.sheet-metie div.sheet-marinD { grid-area: marinD; }
|
|
|
|
div.sheet-metie div.sheet-pharmakaT { grid-area: pharmakaT; }
|
|
.sheet-metie div.sheet-pharmakaD { grid-area: pharmakaD; }
|
|
|
|
div.sheet-metie div.sheet-pretreT { grid-area: pretreT; }
|
|
.sheet-metie div.sheet-pretreD { grid-area: pretreD; }
|
|
|
|
div.sheet-metie div.sheet-rheteurT { grid-area: rheteurT; background-image: url(https://github.com/Gustavitch/roll20-character-sheets/blob/Tylestel/Tylestel/images/metiers/rheteur.png?raw=true); }
|
|
.sheet-metie div.sheet-rheteurD { grid-area: rheteurD; }
|
|
|
|
div.sheet-metie div.sheet-savantT { grid-area: savantT; }
|
|
.sheet-metie div.sheet-savantD { grid-area: savantD; }
|
|
|
|
div.sheet-metie div.sheet-strategosT { grid-area: strategosT; background-image: url(https://github.com/Gustavitch/roll20-character-sheets/blob/Tylestel/Tylestel/images/metiers/strategos.png?raw=true); }
|
|
.sheet-metie div.sheet-strategosD { grid-area: strategosD; }
|
|
|
|
div.sheet-metie div.sheet-survieT { grid-area: survieT; }
|
|
.sheet-metie div.sheet-survieD { grid-area: survieD; }
|
|
|
|
/* ====================================================================================================================*/
|
|
/* DIEUX SECTION */
|
|
/* ====================================================================================================================*/
|
|
|
|
div.sheet-dieux{
|
|
grid-area: dieux;
|
|
padding-left: 40px;
|
|
padding-top: 60px;
|
|
display: grid;
|
|
|
|
grid-template-columns: 35px 45px 120px;
|
|
grid-template-rows: repeat(20px 15px 10px, 7);
|
|
grid-template-areas:"avLogo avInput avNom"
|
|
"avLogo avInput avDomaines"
|
|
"espace1 espace1 espace1"
|
|
"blisLogo blisInput blisNom"
|
|
"blisLogo blisInput blisDomaines"
|
|
"espace2 espace2 espace2"
|
|
"bromosLogo bromosInput bromosNom"
|
|
"bromosLogo bromosInput bromosDomaines"
|
|
"espace3 espace3 espace3"
|
|
"irsLogo irsInput irsNom"
|
|
"irsLogo irsInput irsDomaines"
|
|
"espace4 espace4 espace4"
|
|
"nervenLogo nervenInput nervenNom"
|
|
"nervenLogo nervenInput nervenDomaines"
|
|
"espace5 espace5 espace5"
|
|
"ourLogo ourInput ourNom"
|
|
"ourLogo ourInput ourDomaines"
|
|
"espace6 espace6 espace6"
|
|
"psoLogo psoInput psoNom"
|
|
"psoLogo psoInput psoDomaines"
|
|
". . .";
|
|
}
|
|
|
|
.sheet-dieux div.sheet-dieuxNom {
|
|
display: flex;
|
|
align-items: center;
|
|
font-size: 18px;
|
|
line-height: 20px;
|
|
height: 20px;
|
|
font-family: 'Trebuchet MS';
|
|
}
|
|
|
|
.sheet-dieux div.sheet-dieuxDomaines {
|
|
display: flex;
|
|
align-items: top;
|
|
font-size: 10px;
|
|
line-height: 10px;
|
|
height: 10px;
|
|
color: gray;
|
|
font-family: 'Trebuchet MS';
|
|
}
|
|
|
|
.sheet-dieux div.sheet-dieuxLogo {
|
|
height: 28px;
|
|
width: 28px;
|
|
background-size: contain;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.sheet-dieux input {
|
|
justify: center;
|
|
text-align: center;
|
|
font-size: 12px;
|
|
height: 25px;
|
|
width: 25px;
|
|
|
|
|
|
background-image: url(https://github.com/Gustavitch/roll20-character-sheets/blob/Tylestel/Tylestel/images/cercle_attribut.png?raw=true);
|
|
background-repeat: no-repeat;
|
|
background-size: contain;
|
|
background-position: bottom;
|
|
}
|
|
|
|
.sheet-dieux .sheet-dieuxEspace1 { grid-area: espace1; height: 5px; }
|
|
.sheet-dieux .sheet-dieuxEspace2 { grid-area: espace2; height: 5px;}
|
|
.sheet-dieux .sheet-dieuxEspace3 { grid-area: espace3; height: 5px;}
|
|
.sheet-dieux .sheet-dieuxEspace4 { grid-area: espace4; height: 5px;}
|
|
.sheet-dieux .sheet-dieuxEspace5 { grid-area: espace5; height: 5px;}
|
|
.sheet-dieux .sheet-dieuxEspace6 { grid-area: espace6; height: 5px;}
|
|
|
|
.sheet-dieux .sheet-avInput { grid-area: avInput;}
|
|
.sheet-dieux .sheet-avNom { grid-area: avNom; }
|
|
.sheet-dieux .sheet-avDomaines { grid-area: avDomaines; }
|
|
.sheet-dieux .sheet-avLogo { grid-area: avLogo; background-image: url(https://github.com/Gustavitch/roll20-character-sheets/blob/Tylestel/Tylestel/images/dieux/av.png?raw=true); }
|
|
|
|
.sheet-dieux .sheet-blisInput { grid-area: blisInput;}
|
|
.sheet-dieux .sheet-blisNom { grid-area: blisNom; }
|
|
.sheet-dieux .sheet-blisDomaines { grid-area: blisDomaines; }
|
|
.sheet-dieux .sheet-blisLogo { grid-area: blisLogo; background-image: url(https://github.com/Gustavitch/roll20-character-sheets/blob/Tylestel/Tylestel/images/dieux/blis.png?raw=true); }
|
|
|
|
.sheet-dieux .sheet-bromosInput { grid-area: bromosInput;}
|
|
.sheet-dieux .sheet-bromosNom { grid-area: bromosNom; }
|
|
.sheet-dieux .sheet-bromosDomaines { grid-area: bromosDomaines; }
|
|
.sheet-dieux .sheet-bromosLogo { grid-area: bromosLogo; background-image: url(https://github.com/Gustavitch/roll20-character-sheets/blob/Tylestel/Tylestel/images/dieux/bromos.png?raw=true); }
|
|
|
|
.sheet-dieux .sheet-irsInput { grid-area: irsInput;}
|
|
.sheet-dieux .sheet-irsNom { grid-area: irsNom; }
|
|
.sheet-dieux .sheet-irsDomaines { grid-area: irsDomaines; }
|
|
.sheet-dieux .sheet-irsLogo { grid-area: irsLogo; background-image: url(https://github.com/Gustavitch/roll20-character-sheets/blob/Tylestel/Tylestel/images/dieux/irs.png?raw=true); }
|
|
|
|
.sheet-dieux .sheet-nervenInput { grid-area: nervenInput;}
|
|
.sheet-dieux .sheet-nervenNom { grid-area: nervenNom; }
|
|
.sheet-dieux .sheet-nervenDomaines { grid-area: nervenDomaines; }
|
|
.sheet-dieux .sheet-nervenLogo { grid-area: nervenLogo; background-image: url(https://github.com/Gustavitch/roll20-character-sheets/blob/Tylestel/Tylestel/images/dieux/nerven.png?raw=true); }
|
|
|
|
.sheet-dieux .sheet-ourInput { grid-area: ourInput;}
|
|
.sheet-dieux .sheet-ourNom { grid-area: ourNom; }
|
|
.sheet-dieux .sheet-ourDomaines { grid-area: ourDomaines; }
|
|
.sheet-dieux .sheet-ourLogo { grid-area: ourLogo; background-image: url(https://github.com/Gustavitch/roll20-character-sheets/blob/Tylestel/Tylestel/images/dieux/our.png?raw=true); }
|
|
|
|
.sheet-dieux .sheet-psoInput { grid-area: psoInput;}
|
|
.sheet-dieux .sheet-psoNom { grid-area: psoNom; }
|
|
.sheet-dieux .sheet-psoDomaines { grid-area: psoDomaines; }
|
|
.sheet-dieux .sheet-psoLogo { grid-area: psoLogo; background-image: url(https://github.com/Gustavitch/roll20-character-sheets/blob/Tylestel/Tylestel/images/dieux/pso.png?raw=true); }
|
|
|
|
|
|
|
|
/* ====================================================================================================================*/
|
|
/* COMBA SECTION */
|
|
/* ====================================================================================================================*/
|
|
|
|
div.sheet-comba{
|
|
grid-area: comba;
|
|
padding-top: 60px;
|
|
padding-left: 20px;
|
|
display: grid;
|
|
|
|
grid-template-columns: 170px 170px;
|
|
grid-template-rows: repeat(45px, 4) 130px;
|
|
grid-template-areas:"degat cristo"
|
|
"resist init"
|
|
"encais destin"
|
|
"vie destin"
|
|
"vie etats";
|
|
}
|
|
|
|
/* -----------------------*/
|
|
/* Styles génériques */
|
|
|
|
div.sheet-etatNom {
|
|
grid-area: nom;
|
|
font-size: 15px;
|
|
line-height: 15px;
|
|
height: 15px;
|
|
font-family: 'Trebuchet MS';
|
|
}
|
|
|
|
div.sheet-etatInfos {
|
|
grid-area: infos;
|
|
font-size: 9px;
|
|
line-height: 9px;
|
|
height: 9px;
|
|
color: gray;
|
|
}
|
|
|
|
/* -----------------------*/
|
|
/* Styles des 5 valeurs du haut */
|
|
|
|
.sheet-moduleEtat {
|
|
display: grid;
|
|
grid-template-columns: 60px 100px;
|
|
grid-template-rows: 17px 10px;
|
|
grid-template-areas:"input nom"
|
|
"input infos";
|
|
height: 35px;
|
|
}
|
|
|
|
.sheet-moduleEtat div.sheet-input { grid-area: input; width: 50px; }
|
|
.sheet-moduleEtat input {
|
|
width: 50px;
|
|
justify: center;
|
|
text-align: center;
|
|
|
|
background-image: url(https://github.com/Gustavitch/roll20-character-sheets/blob/Tylestel/Tylestel/images/metiers/_cadre.png?raw=true);
|
|
background-repeat: no-repeat;
|
|
background-size: 50px 25px;
|
|
background-position: center;
|
|
}
|
|
|
|
/* -----------------------*/
|
|
/* Styles des 5 valeurs des points de Destinée */
|
|
|
|
|
|
.sheet-comba .sheet-moduleDestinee {
|
|
display: grid;
|
|
grid-template-columns: 70px 50px;
|
|
grid-template-rows: 25px 10px 10px;
|
|
grid-template-areas:"nom input"
|
|
"cout input"
|
|
"max input";
|
|
}
|
|
|
|
.sheet-comba .sheet-moduleDestinee input {
|
|
width: 50px;
|
|
height: 50px;
|
|
justify: center;
|
|
text-align: center;
|
|
font-size: 20px;
|
|
|
|
background-image: url(https://github.com/Gustavitch/roll20-character-sheets/blob/Tylestel/Tylestel/images/destinee.png?raw=true);
|
|
background-repeat: no-repeat;
|
|
background-size: 50px 50px;
|
|
background-position: center;
|
|
}
|
|
|
|
/* -----------------------*/
|
|
/* Styles du tableau de vie */
|
|
|
|
.sheet-comba .sheet-moduleVie {
|
|
display: grid;
|
|
grid-template-columns: 130px 40px;
|
|
grid-template-rows: 20px 10px 120px;
|
|
grid-template-areas:"nom nom"
|
|
"infos infos"
|
|
"cases statuts";
|
|
}
|
|
|
|
.sheet-comba .sheet-moduleVie div.sheet-cases {
|
|
padding-left: 20px;
|
|
padding-top: 5px;
|
|
width: 200px;
|
|
font-size: 10px;
|
|
}
|
|
|
|
.sheet-comba .sheet-moduleVie .sheet-moduleCases input[type=checkbox] {
|
|
/* Double-sized Checkboxes */
|
|
}
|
|
|
|
.sheet-PV input[type=checkbox] {
|
|
-ms-transform: scale(1.1); /* IE */
|
|
-moz-transform: scale(1.1); /* FF */
|
|
-webkit-transform: scale(1.1); /* Safari and Chrome */
|
|
-o-transform: scale(1.1); /* Opera */
|
|
transform: scale(1.1);
|
|
height: 20px;
|
|
width: 20px;
|
|
filter: grayscale(100%) brightness(90%) contrast(200%);
|
|
cursor: pointer;
|
|
}
|
|
|
|
.sheet-PV input[type=checkbox]:checked {
|
|
filter: grayscale(100%) invert(100%) contrast(500%);
|
|
}
|
|
|
|
.sheet-comba .sheet-moduleVie .sheet-moduleCases input[type=checkbox].sheet-active {
|
|
transform: scale(0.6);
|
|
height: 20px;
|
|
width: 20px;
|
|
filter: grayscale(100%);
|
|
}
|
|
|
|
/* -----------------------*/
|
|
/* Styles du tableau de vie */
|
|
|
|
.sheet-comba .sheet-moduleVie .sheet-moduleCases {
|
|
display: grid;
|
|
padding-left: 10px;
|
|
grid-template-columns: 40px 60px 50px;
|
|
grid-template-rows: 20px 100px;
|
|
grid-template-areas:"espace casesActivables ."
|
|
"casesFixes casesActivables etats";
|
|
}
|
|
|
|
.sheet-comba .sheet-moduleVie .sheet-moduleCases .sheet-espace label {
|
|
height: 20px;
|
|
}
|
|
|
|
.sheet-comba .sheet-moduleVie .sheet-moduleCases .sheet-etats label {
|
|
height: 20px;
|
|
font-size: 10px;
|
|
padding: 0;
|
|
margin: 0;
|
|
padding-left: 10px;
|
|
}
|
|
|
|
input.sheet-active ~ div.sheet-colonneActivable{
|
|
display:none;
|
|
}
|
|
|
|
input.sheet-active:checked ~ div.sheet-colonneActivable{
|
|
display:flex;
|
|
}
|
|
|
|
.sheet-comba div.sheet-etatsDivers {
|
|
width: 170px;
|
|
padding-left: 0px;
|
|
}
|
|
|
|
.sheet-comba .sheet-etatsDivers .sheet-moduleEtat {
|
|
padding-left: 30px;
|
|
grid-template-columns: 30px 100px;
|
|
grid-template-rows: 17px 10px;
|
|
grid-template-areas:"input nom"
|
|
"input infos";
|
|
}
|
|
|
|
.sheet-comba .sheet-etatsDivers .sheet-moduleEtat .sheet-input {
|
|
width: 30px;
|
|
}
|
|
|
|
.sheet-comba .sheet-etatsDivers .sheet-moduleEtat .sheet-input input {
|
|
width: 30px;
|
|
}
|
|
|
|
.sheet-comba .sheet-etatsDivers .sheet-moduleEtat .sheet-etatNom {
|
|
width: 140px;
|
|
}
|
|
|
|
.sheet-comba .sheet-etatsDivers .sheet-moduleEtat .sheet-etatInfos {
|
|
padding:0;
|
|
width: 140px;
|
|
}
|
|
|
|
.sheet-comba .sheet-etatsDivers {
|
|
padding-top: 20px;
|
|
}
|
|
|
|
.sheet-comba .sheet-degat { grid-area: degat; }
|
|
.sheet-comba .sheet-cristo { grid-area: cristo; }
|
|
.sheet-comba .sheet-resist { grid-area: resist; }
|
|
.sheet-comba .sheet-init { grid-area: init; }
|
|
.sheet-comba .sheet-encais { grid-area: encais; }
|
|
.sheet-comba .sheet-destin { grid-area: destin; padding-left: 30px; }
|
|
.sheet-comba .sheet-destin .sheet-nom { align-self: flex-end; }
|
|
.sheet-comba .sheet-destin .sheet-cout { grid-area: cout; padding-top: 3px; }
|
|
.sheet-comba .sheet-destin .sheet-max { grid-area: max; padding-top: 3px; }
|
|
.sheet-comba .sheet-vie { grid-area: vie; }
|
|
.sheet-comba .sheet-vieStatut { grid-area: statuts; }
|
|
.sheet-comba .sheet-etatsDivers { grid-area: etats; }
|
|
.sheet-comba .sheet-cases { grid-area: cases; }
|
|
.sheet-comba .sheet-moduleVie .sheet-moduleCases .sheet-casesActivables { grid-area: casesActivables; }
|
|
.sheet-comba .sheet-moduleVie .sheet-moduleCases .sheet-casesFixes { grid-area: casesFixes; }
|
|
.sheet-comba .sheet-moduleVie .sheet-moduleCases .sheet-etats { grid-area: etats; }
|
|
.sheet-comba .sheet-moduleVie .sheet-moduleCases .sheet-espace { grid-area: espace; }
|
|
|
|
|
|
/* =============================================================================================== */
|
|
/* =============================================================================================== */
|
|
/* =============================================================================================== */
|
|
/* ============================= ========================= */
|
|
/* ============================= PAGE 2 - EQUIPEMENT ========================= */
|
|
/* ============================= ========================= */
|
|
/* =============================================================================================== */
|
|
/* =============================================================================================== */
|
|
/* =============================================================================================== */
|
|
|
|
div.sheet-equipement{
|
|
width: 650px;
|
|
height: 920px;
|
|
background-image: url(https://github.com/Gustavitch/roll20-character-sheets/blob/Tylestel/Tylestel/images/page2_equipement_lq.png?raw=true);
|
|
background-size: 650px 920px;
|
|
background-repeat: no-repeat;
|
|
padding-left: 40px;
|
|
padding-top: 80px;
|
|
|
|
display: grid;
|
|
grid-template-columns: 170px 110px 310px;
|
|
grid-template-rows: 395px 205px 200px;
|
|
grid-template-areas:"merdier merdier heros"
|
|
"merdier merdier familier"
|
|
"capacites armes armes";
|
|
}
|
|
|
|
.sheet-equipement .sheet-merdier { grid-area: merdier; }
|
|
.sheet-equipement .sheet-heros { grid-area: heros; }
|
|
.sheet-equipement .sheet-familier { grid-area: familier; }
|
|
.sheet-equipement .sheet-capacites { grid-area: capacites; }
|
|
.sheet-equipement .sheet-armes { grid-area: armes; }
|
|
|
|
/* =============================================================================================== */
|
|
/* Équipement */
|
|
|
|
.sheet-equipement .sheet-merdier textarea{
|
|
width: 220px;
|
|
height: 500px;
|
|
resize: none;
|
|
}
|
|
|
|
.sheet-equipement label{
|
|
padding-top: 5px;
|
|
font-size: 12px;
|
|
height: 8px;
|
|
}
|
|
|
|
.sheet-equipement div.sheet-drachmes {
|
|
font-family: 'Trebuchet MS';
|
|
font-size: 16px;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.sheet-equipement div.sheet-drachmes input {
|
|
font-size: 15px;
|
|
width: 60px;
|
|
height: 30px;
|
|
justify: center;
|
|
text-align: center;
|
|
|
|
background-image: url(https://github.com/Gustavitch/roll20-character-sheets/blob/Tylestel/Tylestel/images/metiers/_cadre.png?raw=true);
|
|
background-repeat: no-repeat;
|
|
background-size: 60px 30px;
|
|
background-position: center;
|
|
}
|
|
|
|
/* =============================================================================================== */
|
|
/* Capacités */
|
|
|
|
.sheet-equipement div.sheet-capacites {
|
|
padding-top: 20px;
|
|
}
|
|
|
|
.sheet-equipement div.sheet-capacites label {
|
|
height: 8px;
|
|
}
|
|
|
|
.sheet-equipement .sheet-capacites div.sheet-capa1 textarea{
|
|
width: 130px;
|
|
height: 50px;
|
|
resize: none;
|
|
margin: 0;
|
|
font-size: 12px;
|
|
line-height: 14px;
|
|
}
|
|
|
|
.sheet-equipement .sheet-capacites div.sheet-capa2 textarea{
|
|
width: 130px;
|
|
height: 50px;
|
|
resize: none;
|
|
font-size: 12px;
|
|
line-height: 14px;
|
|
}
|
|
|
|
/* =============================================================================================== */
|
|
/* Héros */
|
|
|
|
.sheet-equipement .sheet-heros {
|
|
}
|
|
|
|
.sheet-equipement .sheet-heros .sheet-paragraphe {
|
|
display: grid;
|
|
grid-template-columns: 80px 170px;
|
|
grid-template-areas:"titre texte";
|
|
}
|
|
|
|
.sheet-equipement .sheet-heros .sheet-paragraphe label.sheet-titre {
|
|
grid-area: titre;
|
|
width: 90px;
|
|
padding: 0;
|
|
}
|
|
|
|
.sheet-equipement .sheet-heros .sheet-paragraphe textarea.sheet-texte {
|
|
grid-area: texte;
|
|
width: 200px;
|
|
height: 45px;
|
|
resize: none;
|
|
font-size: 12px;
|
|
line-height: 14px;
|
|
}
|
|
|
|
.sheet-equipement .sheet-heros .sheet-paragraphe input.sheet-texte {
|
|
grid-area: texte;
|
|
width: 200px;
|
|
height: 14px;
|
|
resize: none;
|
|
margin-bottom: 5px;
|
|
}
|
|
|
|
/* =============================================================================================== */
|
|
/* Familier */
|
|
|
|
.sheet-equipement .sheet-familier input.sheet-court{
|
|
width:90px;
|
|
margin-right: 10px;
|
|
}
|
|
|
|
.sheet-equipement .sheet-familier input.sheet-long{
|
|
width:250px;
|
|
margin-right: 10px;
|
|
}
|
|
|
|
.sheet-equipement .sheet-familier div.sheet-soin {
|
|
margin-top: 5px;
|
|
}
|
|
|
|
.sheet-equipement .sheet-familier .sheet-soin div.sheet-PV {
|
|
margin-right: 20px;
|
|
margin-top: 5px;
|
|
}
|
|
|
|
.sheet-equipement .sheet-familier div.sheet-points {
|
|
margin-top: 0px;
|
|
}
|
|
|
|
.sheet-equipement .sheet-familier div.sheet-points label {
|
|
}
|
|
|
|
.sheet-equipement .sheet-familier div.sheet-points label.points {
|
|
margin-bottom: 8px;
|
|
padding:2px;
|
|
}
|
|
|
|
.sheet-equipement .sheet-familier .sheet-paragraphe {
|
|
display: grid;
|
|
grid-template-columns: 80px 170px;
|
|
grid-template-areas:"titre texte";
|
|
}
|
|
|
|
.sheet-equipement .sheet-familier .sheet-paragraphe label.sheet-titre {
|
|
grid-area: titre;
|
|
width: 90px;
|
|
padding: 0;
|
|
}
|
|
|
|
.sheet-equipement .sheet-familier .sheet-paragraphe textarea.sheet-texte {
|
|
grid-area: texte;
|
|
width: 200px;
|
|
height: 30px;
|
|
resize: none;
|
|
font-size: 12px;
|
|
line-height: 14px;
|
|
}
|
|
|
|
.sheet-equipement .sheet-familier div.sheet-aideAttaque {
|
|
margin-top: 5px;
|
|
}
|
|
|
|
/* =============================================================================================== */
|
|
/* Familier */
|
|
|
|
.sheet-equipement div.sheet-armes {
|
|
padding-left: 10px;
|
|
padding-top: 20px;
|
|
}
|
|
|
|
.sheet-equipement .sheet-armes div.sheet-titre { grid-area: titre; }
|
|
.sheet-equipement .sheet-armes div.sheet-mainD { grid-area: mainD; }
|
|
.sheet-equipement .sheet-armes div.sheet-mainG { grid-area: mainG; }
|
|
.sheet-equipement .sheet-armes div.sheet-titre2 { grid-area: titre2; }
|
|
.sheet-equipement .sheet-armes div.sheet-Reserve { grid-area: Reserve; }
|
|
.sheet-equipement .sheet-armes div.sheet-Armure { grid-area: Armure; }
|
|
|
|
.sheet-equipement .sheet-armes label.sheet-entree{
|
|
width: 65px;
|
|
font-size: 11px;
|
|
font-family: 'Trebuchet MS';
|
|
}
|
|
|
|
.sheet-equipement .sheet-armes label.sheet-long{
|
|
width: 120px;
|
|
font-size: 10px;
|
|
}
|
|
|
|
.sheet-equipement .sheet-armes label.sheet-court{
|
|
width: 40px;
|
|
font-size: 10px;
|
|
text-align: center;
|
|
}
|
|
|
|
.sheet-equipement .sheet-armes input.sheet-long{
|
|
width: 120px;
|
|
font-size: 11px;
|
|
}
|
|
|
|
.sheet-equipement .sheet-armes input.sheet-court{
|
|
width: 30px;
|
|
font-size: 11px;
|
|
margin-left:5px;
|
|
margin-right:5px;
|
|
}
|
|
|
|
/* =============================================================================================== */
|
|
/* =============================================================================================== */
|
|
/* =============================================================================================== */
|
|
/* ============================= ========================= */
|
|
/* ============================= PAGE 3 - CARTES ========================= */
|
|
/* ============================= ========================= */
|
|
/* =============================================================================================== */
|
|
/* =============================================================================================== */
|
|
/* =============================================================================================== */
|
|
|
|
div.sheet-cartes{
|
|
width: 650px;
|
|
height: 920px;
|
|
background-image: url(https://github.com/Gustavitch/roll20-character-sheets/blob/Tylestel/Tylestel/images/page3_cartes_lq.png?raw=true);
|
|
background-size: 650px 920px;
|
|
background-repeat: no-repeat;
|
|
|
|
display: grid;
|
|
grid-template-columns: 270px, 290px;
|
|
grid-template-rows: 320px 550px;
|
|
grid-template-areas:"actions reactions"
|
|
"actionsFavorites reactionsFavorites";
|
|
}
|
|
|
|
.sheet-cartes div.sheet-actions { grid-area: actions; }
|
|
.sheet-cartes div.sheet-reactions { grid-area: reactions; }
|
|
.sheet-cartes div.sheet-actionsFavorites { grid-area: actionsFavorites; }
|
|
.sheet-cartes div.sheet-reactionsFavorites { grid-area: reactionsFavorites; }
|
|
|
|
.sheet-moduleCartes {
|
|
display: grid;
|
|
grid-template-columns: 60px 200px;
|
|
grid-template-rows: 17px 10px;
|
|
grid-template-areas:"input nom"
|
|
"input infos";
|
|
height: 35px;
|
|
}
|
|
|
|
.sheet-cartes div.sheet-actions{
|
|
padding-top: 80px;
|
|
padding-left: 35px;
|
|
}
|
|
|
|
.sheet-cartes div.sheet-reactions{
|
|
padding-top: 80px;
|
|
padding-left: 35px;
|
|
}
|
|
|
|
.sheet-cartes .sheet-moduleCartes div.sheet-input {
|
|
grid-area: input;
|
|
width: 250px;
|
|
}
|
|
|
|
.sheet-moduleCartes div.sheet-input { grid-area: input; width: 50px; }
|
|
.sheet-moduleCartes input {
|
|
width: 50px;
|
|
justify: center;
|
|
text-align: center;
|
|
|
|
background-image: url(https://github.com/Gustavitch/roll20-character-sheets/blob/Tylestel/Tylestel/images/metiers/_cadre.png?raw=true);
|
|
background-repeat: no-repeat;
|
|
background-size: 50px 25px;
|
|
background-position: center;
|
|
}
|
|
|
|
.sheet-cartes label {
|
|
margin-top: 10px;
|
|
font-family: 'Trebuchet MS';
|
|
font-size: 14px;
|
|
margin-bottom: 0px;
|
|
}
|
|
|
|
.sheet-cartes .sheet-main textarea {
|
|
width: 270px;
|
|
height: 140px;
|
|
resize: none;
|
|
font-size: 12px;
|
|
line-height: 14px;
|
|
}
|
|
|
|
.sheet-cartes textarea.sheet-actionsFavorites {
|
|
margin-left: 35px;
|
|
margin-top: 40px;
|
|
width: 270px;
|
|
height: 500px;
|
|
resize: none;
|
|
font-size: 12px;
|
|
line-height: 14px;
|
|
}
|
|
|
|
|
|
/* =============================================================================================== */
|
|
/* =============================================================================================== */
|
|
/* =============================================================================================== */
|
|
/* ============================= ========================= */
|
|
/* ============================= PAGE 4 - NOTES ========================= */
|
|
/* ============================= ========================= */
|
|
/* =============================================================================================== */
|
|
/* =============================================================================================== */
|
|
/* =============================================================================================== */
|
|
|
|
div.sheet-notes{
|
|
width: 650px;
|
|
height: 920px;
|
|
background-image: url(https://github.com/Gustavitch/roll20-character-sheets/blob/Tylestel/Tylestel/images/page4_notes_lq.png?raw=true);
|
|
background-size: 650px 920px;
|
|
background-repeat: no-repeat;
|
|
}
|
|
|
|
.sheet-notes textarea{
|
|
width: 570px;
|
|
height: 780px;
|
|
resize: none;
|
|
}
|
|
|
|
.sheet-notes div.sheet-content{
|
|
padding-left:40px;
|
|
padding-top:80px;
|
|
}
|
|
|
|
/* =============================================================================================== */
|
|
/* =============================================================================================== */
|
|
/* =============================================================================================== */
|
|
/* ============================= ========================= */
|
|
/* ============================= SCRIPTS ========================= */
|
|
/* ============================= ========================= */
|
|
/* =============================================================================================== */
|
|
/* =============================================================================================== */
|
|
/* =============================================================================================== */
|
|
|
|
|
|
/* Onglets */
|
|
div.sheet-caracs,
|
|
div.sheet-equipement,
|
|
div.sheet-cartes,
|
|
div.sheet-notes {
|
|
display: none;
|
|
}
|
|
|
|
.sheet-onglets[value="caracs"] ~ div.sheet-caracs,
|
|
.sheet-onglets[value="equipement"] ~ div.sheet-equipement,
|
|
.sheet-onglets[value="cartes"] ~ div.sheet-cartes,
|
|
.sheet-onglets[value="notes"] ~ div.sheet-notes {
|
|
display: grid;
|
|
}
|
|
|