Files
roll20-character-sheets/Terre2/Terre2.css
T
2024-06-04 15:26:01 +02:00

2002 lines
50 KiB
CSS

/*------------------------------------------------------------------------------------------------------------------*/
/*---------------------------------------------------COULEURS-------------------------------------------------------*/
/*------------------------------------------------------------------------------------------------------------------*/
:root {
--un: #011261;
--deux: #7b95cc;
--trois: #c2cbec;
--quatre: #e0e5fc;
--cinq: #ffffff;
--six: #3b2161;
--linear1: linear-gradient(to top, #011261, #344aaa);
}
/*------------------------------------------------------------------------------------------------------------------*/
/*---------------------------------------------------GÉNÉRALITÉS----------------------------------------------------*/
/*------------------------------------------------------------------------------------------------------------------*/
* {
margin: 0;
padding: 0;
font-family: Trebuchet MS;
font-variant: small-caps;
}
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
-webkit-appearance: none;
}
.charsheet input[type="text"], select {
width: 20vw;
height: 25px;
border: none;
}
.charsheet select {
margin:0px;
cursor: pointer;
}
.charsheet input[type="number"] {
width: 10px;
height: 25px;
border: none;
}
.logo {
width: 100px;
height: auto;
}
.flex {
display: flex;
}
.col {
flex-direction: column;
}
.row {
flex-direction: row;
}
.wrap {
flex-wrap: wrap;
}
.a-baseline {
align-items: baseline;
}
.a-center {
align-items: center;
}
.a-end {
align-items: end;
}
.j-baseline {
justify-content: baseline;
}
.j-between {
justify-content: space-between;
}
.j-around {
justify-content: space-around;
}
.j-evenly {
justify-content: space-evenly;
}
.j-center {
justify-content: center;
}
.j-end {
justify-content: end;
}
.div100 {
min-width: 800px;
height: auto;
margin: auto;
margin-bottom: 5px;
padding-bottom: 5px;
background-color: var(--deux);
border: solid 2px var(--un);
}
/*------------------------------------------------------------------------------------------------------------------*/
/*-----------------------------------------------BOUTON DES RÉGLAGES------------------------------------------------*/
/*------------------------------------------------------------------------------------------------------------------*/
input[type="checkbox"].checkreglages {
width: 20px;
height: 20px;
position: absolute;
top: 50px;
left: 30px;
z-index: 2;
opacity: 0;
}
input[type="checkbox"].checkreglages + span::before {
width: 24px;
height: 24px;
position: absolute;
top: 42px;
left: 29px;
font-family: 'pictos';
font-size: 24px;
font-variant: normal;
content: 'y';
background-color: var(--cinq);
color: var(--un);
}
input[type="checkbox"].checkreglages:hover + span::before {
transform: scale(1.1);
}
input[type="checkbox"].checkpjpnj {
width: 30px;
height: 20px;
position: absolute;
top: 50px;
left: 60px;
z-index: 2;
opacity: 0;
}
.charsheet span.checkpj,
.charsheet span.checkpnj {
width: 30px;
height: 20px;
position: absolute;
top: 50px;
left: 60px;
background-color: var(--un);
color: var(--cinq);
font-size: 12px;
font-weight: bold;
text-align: center;
}
input[type="checkbox"].checkreglages:not(:checked) ~ input[type="checkbox"].checkpjpnj,
input[type="checkbox"].checkreglages:not(:checked) ~ div.checkpjpnj
{
display: none;
}
input[type="checkbox"].checkreglages:checked ~ input[type="checkbox"].checkpjpnj,
input[type="checkbox"].checkreglages:checked ~ div.checkpjpnj {
display: block;
}
input[type="checkbox"].checkpjpnj:not(:checked) ~ div.pj,
input[type="checkbox"].checkpjpnj:not(:checked) ~ div span.checkpnj,
input[type="checkbox"].checkpjpnj:checked ~ div.pnj,
input[type="checkbox"].checkpjpnj:checked ~ div span.checkpj {
display: none;
}
input[type="checkbox"].checkpjpnj:checked ~ div.pj,
input[type="checkbox"].checkpjpnj:checked ~ div span.checkpnj,
input[type="checkbox"].checkpjpnj:not(:checked) ~ div.pnj,
input[type="checkbox"].checkpjpnj:not(:checked) ~ div span.checkpj {
display: block;
}
/*------------------------------------------------------------------------------------------------------------------*/
/*---------------------------------------------- VISUEL DU BOUTON DÉ -----------------------------------------------*/
/*------------------------------------------------------------------------------------------------------------------*/
.ui-dialog .charsheet button[type="roll"]::before {
font-family: 'dicefontd10';
content: '0';
}
.charsheet .repcontrol_add,
.charsheet .repcontrol_edit,
.charsheet .repcontrol_del {
display: block;
width: 25px;
height: 12px;
background: var(--un);
color: var(--cinq);
border: solid 1px var(--quatre);
box-shadow: none;
font-size: 10px;
text-align: center;
}
.charsheet .repcontrol_add:hover,
.charsheet .repcontrol_edit:hover,
.charsheet .repcontrol_del:hover {
background: var(--quatre);
color: var(--un);
border: solid 1px var(--un);
}
/*------------------------------------------------------------------------------------------------------------------*/
/*---------------------------------------------------PERSONNAGE-----------------------------------------------------*/
/*------------------------------------------------------------------------------------------------------------------*/
.divPerso {
width: 100%;
height: auto;
}
.divPerso p {
font-size: 15px;
margin-left: 0.3em;
margin-right: 0.3em;
}
.divPerso input {
font-size: 15px;
background-color: var(--cinq);
text-align: center;
}
.divPerso2 input[type="text"] {
width: 250px;
}
.divPerso1 {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 100%;
height: 40px;
background-color: var(--un);
color:var(--quatre);
font-size: 14px;
font-weight: bold;
text-align: center;
}
.divPerso2 {
width: 100%;
height: 40px;
}
input.check-perso-1,
input.check-perso-2 {
width:10px;
height: 10px;
cursor: pointer;
z-index: 1;
opacity: 0;
position: absolute;
}
span.check-perso-1a::before,
span.check-perso-2a::before,
span.check-perso-1b::before,
span.check-perso-2b::before {
width: 15px;
height: 21px;
position: relative;
color: var(--cinq);
font-family: "pictos";
font-size: 15px;
}
span.check-perso-1a::before,
span.check-perso-2a::before {
margin-top: -60px;
margin-right: -15px;
content: '{';
}
span.check-perso-1b::before,
span.check-perso-2b::before {
margin-top: -20px;
margin-right: -15px;
content: '}';
}
input.check-perso-1:checked ~ span.check-perso-1a::before,
input.check-perso-1:not(:checked) ~ span.check-perso-1b::before,
input.check-perso-2:checked ~ span.check-perso-2a::before,
input.check-perso-2:not(:checked) ~ span.check-perso-2b::before {
display: none;
}
input.check-perso-1:checked ~ span.check-perso-1b::before,
input.check-perso-1:not(:checked) ~ span.check-perso-1a::before,
input.check-perso-2:checked ~ span.check-perso-2b::before,
input.check-perso-2:not(:checked) ~ span.check-perso-2a::before {
display: flex;
}
.check-perso-1:not(:checked) ~ div div div.panel-perso-1,
.check-perso-2:not(:checked) ~ div div div.panel-perso-2 {
display: flex;
}
.check-perso-1:checked ~ div div div.panel-perso-1,
.check-perso-2:checked ~ div div div.panel-perso-2 {
display: none;
}
/*------------------*/
/*JET PUBLIC - PRIVÉ*/
/*------------------*/
input[type="checkbox"].jetMJ {
width: 60px;
height: 20px;
position: absolute;
z-index: 2;
opacity: 0;
}
span.jetMJ1,
span.jetMJ2 {
width: 60px;
height: 25px;
position: absolute;
color: var(--cinq);
font-size: 13px;
font-weight: bold;
text-align: center;
}
span.jetMJ1 {
background-color: rgb(1, 146, 1);
}
span.jetMJ2 {
background-color: rgb(150, 0, 0);
}
input[type="checkbox"].jetMJ:checked ~ span.jetMJ1,
input[type="checkbox"].jetMJ:not(:checked) ~ span.jetMJ2 {
display: none;
}
input[type="checkbox"].jetMJ:checked ~ span.jetMJ2,
input[type="checkbox"].jetMJ:not(:checked) ~ span.jetMJ1 {
display: block;
}
/*------------------------------------------------------------------------------------------------------------------*/
/*------------------------------------------------CARACTÉRISTIQUES--------------------------------------------------*/
/*------------------------------------------------------------------------------------------------------------------*/
.divCaracs {
display: flex;
flex-direction: row;
justify-content: space-evenly;
align-items: center;
width: 100%;
height: auto;
margin-top: 10px;
margin-bottom: 10px;
}
.divCarac {
width: 25%;
height: auto;
}
.charsheet button[type="roll"].buttonCarac{
width: 120px;
height: 26px;
background: linear-gradient(to bottom right, #5989e2, #311f8a) padding-box, linear-gradient(to bottom right, #00263f, #d3e8ff) border-box;
color: var(--cinq);
border: solid 3px transparent;
border-radius: 5px;
box-shadow: black 4px 4px 4px 0px;
font-size: 16px;
font-weight: bold;
transform: skewX(-10deg);
}
.charsheet button[type="roll"].buttonCarac:hover {
box-shadow: black 2px 2px 4px 0px inset;
}
.divCarac input[type="number"].stats {
width: 40px;
height: 40px;
margin: 2px;
background-color: var(--cinq);
color: var(--un);
border: solid 2px var(--un);
border-radius: 5px;
box-shadow: 2px 2px 2px 0 black;
font-size:15px;
font-weight:bold;
text-align: center;
transform: skewX(-10deg);
}
/*------------------------------------------------------------------------------------------------------------------*/
/*----------------------------------------------------- MENU -------------------------------------------------------*/
/*------------------------------------------------------------------------------------------------------------------*/
.charsheet .sheet-competences,
.charsheet .sheet-pouvoirs,
.charsheet .sheet-combat,
.charsheet .sheet-bio,
.charsheet .sheet-equipement,
.charsheet .sheet-infos {
display: none;
}
input.menu {
width: 120px;
height: 30px;
opacity: 0;
}
span.menu {
display: inline-block;
width: 120px;
height: 30px;
margin-left: -120px;
margin-top: 0;
margin-bottom: -2px;
padding-top: 5px;
font-size: 15px;
text-align: center;
background-color: var(--un);
color: var(--cinq);
border-left: solid 2px var(--un);
border-top: solid 2px var(--un);
border-right: solid 2px var(--un);
border-radius: 10px 10px 0 0;
}
input.menu:checked + span.menu {
background-color: var(--deux);
color: var(--cinq);
}
input.menu:not(:checked):hover + span.menu {
background-color: var(--deux);
color: var(--cinq);
}
input.menu:not(:checked) + span.menu {
box-shadow: inset #2a2b4e 0 2px 6px 2px;
}
.mg1:checked ~ div div.sheet-competences,
.mg2:checked ~ div div.sheet-pouvoirs,
.mg3:checked ~ div div.sheet-combat,
.mg4:checked ~ div div.sheet-bio,
.mg5:checked ~ div div.sheet-equipement,
.mg6:checked ~ div div.sheet-infos {
display: block;
}
.sheet-competences,
.sheet-pouvoirs,
.sheet-combat,
.sheet-bio,
.sheet-equipement,
.sheet-infos {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: auto;
padding-top: 10px;
}
/*------------------------------------------------------------------------------------------------------------------*/
/*------------------------------------------------- COMPÉTENCES ----------------------------------------------------*/
/*------------------------------------------------------------------------------------------------------------------*/
.sheet-competences input[type="number"] {
background-color: var(--cinq);
color: var(--un);
text-align: center;
}
.divComp {
width:250px;
margin: 5px;
border: solid 1px var(--un);
}
.divComp div.divCompLine:nth-child(even) {
background-color: var(--quatre);
color: var(--un);
}
.divComp div.divCompLine:nth-child(odd) {
background-color: var(--trois);
color: var(--un);
}
.divForme {
height: 20px;
margin: 4px;
font-size: 11px;
font-weight: bold;
}
.divCompTitle {
height: 30px;
padding: 5px;
font-size: 15px;
font-weight: bold;
}
input.compSpecialisations {
width: 25px;
height: 25px;
margin-left: 0;
margin-top: 0;
position: relative;
z-index: 1;
opacity: 0;
cursor: pointer;
}
input.compSpecialisations + span::before {
margin-top: 6px;
margin-left: -18px;
position:absolute;
color: var(--un);
font-size: 15px;
font-family: "pictos";
content: '}';
}
input.compSpecialisations:checked + span::before {
content: '{';
}
input.compShow {
display:none;
}
input.compShow:not(:checked) ~ div.compShow {
display:none;
}
input.compShow:checked ~ div.compShow {
display:block;
}
.comp-title {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
height:30px;
padding:6px;
background-color: var(--un);
color: var(--cinq);
font-size:10px;
font-weight:bold;
}
.compNumber {
float:right;
}
.buttonComp {
width: 14px;
height: 24px;
margin-top: -4px;
background: var(--un);
color: var(--cinq);
box-shadow: black 0 0 4px;
font-size: 6px;
font-weight: normal;
transition: 0.3s ease;
}
.buttonComp:hover {
background: var(--un);
color: var(--cinq);
box-shadow: white 0 0 4px;
transform: scale(0.9);
transition: 0.3s ease;
}
.divCompSpecialisation {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
padding: 6px;
}
.divCompSpecialisation input[type="text"] {
width: 150px;
background-color: var(--cinq);
color: var(--un);
}
/*---------*/
/*FORMATION*/
/*---------*/
input.buttonForme {
width: 84px;
height: 20px;
margin-top: -4px;
opacity: 0;
}
span.buttonForme-1,
span.buttonForme-2 {
width: 80px;
height: 20px;
margin-left: -84px;
margin-top: 0px;
background-color: var(--un);
color: var(--cinq);
font-size: 11px;
text-align: center;
}
span.buttonForme-1:hover,
span.buttonForme-2:hover,
input.buttonForme:hover ~ span.buttonForme-1,
input.buttonForme:hover ~ span.buttonForme-2 {
background-color: var(--quatre);
color: var(--un);
}
span.buttonForme-1 {
display: inline-block;
}
span.buttonForme-2 {
display:none;
}
input.buttonForme:checked ~ span.buttonForme-1 {
display:none;
}
input.buttonForme:checked ~ span.buttonForme-2 {
display:inline-block;
}
/*------------------------------------------------------------------------------------------------------------------*/
/*----------------------------------------------------POUVOIRS------------------------------------------------------*/
/*------------------------------------------------------------------------------------------------------------------*/
.sheet-pouvoirs-classe {
margin: 20px;
color: var(--cinq);
font-size: 15px;
font-weight: bold;
}
.divPouvoir {
width: 800px;
margin: 5px;
padding: 5px;
background-color: var(--trois);
border: solid 3px var(--un);
}
.divPouvoir input,
.divPouvoir select {
background-color: var(--cinq);
color: var(--un);
border: none;
}
.divPouvoir input:hover {
border: dashed 1px var(--un);
}
.divPouvoir input[type="text"].text-titre {
width: 250px;
margin: 3px;
text-align: left;
}
.divPouvoir select {
width: 200px;
margin: 3px;
text-align: left;
}
.divPouvoir input[type="text"].text-court {
width: 60px;
margin: 3px;
text-align: center;
}
.divPouvoir input[type="text"].text-moyen {
width: 100px;
margin: 3px;
text-align: center;
}
.divPouvoir input[type="text"].text-long {
width: 200px;
margin: 3px;
text-align: center;
}
.divPouvoir input[type="text"].text-tres-long {
width: 300px;
margin: 3px;
text-align: center;
}
.divPouvoir input[type="number"].number-court {
width: 30px;
margin: 3px;
text-align: center;
}
.divPouvoir div {
margin: 2px;
padding: 2px;
}
.divPouvoir div + span {
font-size: 16px;
font-weight: bold;
}
.divPouvoir button[type="action"] {
width: 15px;
height: 15px;
background-color: var(--un);
color: var(--cinq);
border: solid 1px var(--un);
border-radius: 10px;
font-size: 15px;
font-weight: bold;
text-align: center;
}
.divPouvoir button[type="action"]:hover {
background-color: var(--cinq);
color: var(--un);
border: solid 1px var(--cinq);
}
.divPouvoir .span-title {
font-size: 15px;
font-weight: bold;
}
.divPouvoir span {
color: var(--un);
}
.pouvoirs-title {
margin-top: 10px;
color: var(--cinq);
font-size: 16px;
font-weight: bold;
}
.pouvoirs-particularite {
color: var(--cinq);
font-size: 14px;
}
input.menuPouvoirs {
width: 160px;
height: 26px;
opacity: 0;
}
span.menuPouvoirs {
display: inline-block;
width: 160px;
height: 24px;
background-color: var(--trois);
color: var(--un);
border: solid 1px var(--un);
border-radius: 12px;
box-shadow: 0px 0px 5px var(--un);
margin-left: -160px;
font-size: 15px;
font-weight: bold;
text-align: center;
}
input.menuPouvoirs:checked + span.menuPouvoirs,
input.menuPouvoirs:hover + span.menuPouvoirs {
background-color: var(--un);
color: var(--cinq);
border: solid 1px var(--trois);
box-shadow: 0px 0px 5px var(--quatre), 0px 0px 25px var(--quatre);
}
.pouvoir {
display: none;
}
.pouvoir > span {
margin: 20px;
color: var(--un);
font-size: 18px;
font-weight: bold;
}
/*---------------------------------*/
/*RITUEL - MUTATION FANTASMAGORIQUE*/
/*---------------------------------*/
.charsheet input.mutfant[value="0"] + div.mutationfantasmagorique {
display: none;
}
.charsheet input.mutfant[value="1"] + div.mutationfantasmagorique {
display: flex;
}
/*------*/
/*CLASSE*/
/*------*/
.m1:checked ~ .pPsy,
.m2:checked ~ .pMutation,
.m3:checked ~ .pTalent,
.m4:checked ~ .pRituel {
display: block;
}
.list-psy,
.list-mutation,
.list-talent,
.list-rituel {
display: none;
}
.check-list-psy:checked ~ .list-psy,
.check-list-mutation:checked ~ .list-mutation,
.check-list-talent:checked ~ .list-talent,
.check-list-rituel:checked ~ .list-rituel{
display: inline-block;
}
.check-list-psy + span,
.check-list-rituel + span,
.check-list-mutation + span,
.check-list-talent + span
{
margin: 10px;
color: var(--un);
font-size: 15px;
font-weight: bold;
}
.pouvoir-psy,
.pouvoir-mutation,
.pouvoir-talent,
.pouvoir-rituel
{
display: none;
}
.pouvoir input[type="checkbox"] {
margin: 5px 5px 5px 10px;
transform: scale(1.5);
}
/*------------------------------------------------------------------------------------------------------------------*/
/*----------------------------------------------------- BIO --------------------------------------------------------*/
/*------------------------------------------------------------------------------------------------------------------*/
.sheet-bio input, select {
height: 25px;
background-color: var(--cinq);
color: var(--un);
border: none;
}
.sheet-bio input {
text-align: center;
}
.sheet-bio input[type="text"].text-tres-court {
width: 30px;
}
.sheet-bio input[type="text"].text-court {
width: 60px;
}
.sheet-bio input[type="text"].text-moyen {
width: 120px;
}
.sheet-bio input[type="text"].text-long {
width: 180px;
}
.sheet-bio input[type="text"].text-tres-long {
width: 240px;
}
.sheet-bio input[type="number"] {
width: 15px;
}
.sheet-bio textarea {
background-color: var(--cinq);
color: var(--un);
border: none;
}
.divBio1,
.divBio3,
.divBio4,
.divBio5 {
background-color: var(--trois);
color: var(--un);
}
.divBio1 div,
.divBio2 div,
.divBio3 div,
.divBio4 div,
.divBio5 div {
margin-top: 2px;
margin-bottom: 2px;
}
.divBio1a {
margin-left: 5px;
}
.divBio1 div.divBio-title,
.divBio2 div.divBio-title,
.divBio3 div.divBio-title,
.divBio4 div.divBio-title,
.divBio5 div.divBio-title {
margin-top: 0;
margin-bottom: 4px;
background-color: var(--un);
color: var(--cinq);;
}
.divBio1 {
width: 35%;
height: auto;
padding: 0;
border: solid 2px var(--un);
}
.divBio1 .flex {
padding-left: 5px;
}
.divBio2 {
width: 25%;
height: auto;
}
.divBio3, .divBio4, .divBio5 {
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
border: solid 2px var(--un);
}
.divBio3 {
min-height: 150px;
}
.divBio4 {
min-height: 85px;
}
.divBio5 {
min-height: 115px;
}
.divBio3 .expand {
padding-left: 5px;
}
.divBio-title {
width: 100%;
height: 25px;
margin-top: 0;
background-color: var(--un);
color: var(--cinq);;
font-size: 15px;
font-weight: bold;
text-align: center;
}
.divBio1 span {
margin-right: 5px;
font-size: 12px;
font-weight: bold;
}
.divBio3 select {
appearance: none;
}
.divBio1 textarea {
width: 96%;
height: 50px;
}
.divBio1 input[type="text"],
.divBio1 input[type="number"],
.divBio3 select {
height: 25px;
}
.divBio1 input[type="text"] {
width: 160px;
}
.divBio1 input[type="number"] {
width: 50px;
}
.divBio3 select {
width: 190px;
}
.divBio4 textarea,
.divBio5 textarea {
width: 90%;
height: 50px;
margin: 10px;
}
input.number-court,
input.text-court,
input.g1,
input.g2 {
margin-left: 4px;
margin-right: 4px;
}
/*------------------------------------------------------------------------------------------------------------------*/
/*-------------------------------------------- LIGNES PAIRES - IMPAIRES --------------------------------------------*/
/*------------------------------------------------------------------------------------------------------------------*/
.repcontainer[data-groupname=repeating_armure] .repitem:nth-child(even) div.repeating_combatLine,
.repcontainer[data-groupname=repeating_contact] .repitem:nth-child(even) div.repeating_combatLine,
.repcontainer[data-groupname=repeating_distance] .repitem:nth-child(even) div.repeating_combatLine,
.repcontainer[data-groupname=repeating_athletisme] .repitem:nth-child(even) div.divCompSpecialisation,
.repcontainer[data-groupname=repeating_concentration] .repitem:nth-child(even) div.divCompSpecialisation,
.repcontainer[data-groupname=repeating_connaissances] .repitem:nth-child(even) div.divCompSpecialisation,
.repcontainer[data-groupname=repeating_corpsacorps] .repitem:nth-child(even) div.divCompSpecialisation,
.repcontainer[data-groupname=repeating_crochetage] .repitem:nth-child(odd) div.divCompSpecialisation,
.repcontainer[data-groupname=repeating_deguisement] .repitem:nth-child(odd) div.divCompSpecialisation,
.repcontainer[data-groupname=repeating_discretion] .repitem:nth-child(odd) div.divCompSpecialisation,
.repcontainer[data-groupname=repeating_eloquence] .repitem:nth-child(odd) div.divCompSpecialisation,
.repcontainer[data-groupname=repeating_enquete] .repitem:nth-child(odd) div.divCompSpecialisation,
.repcontainer[data-groupname=repeating_esquive] .repitem:nth-child(even) div.divCompSpecialisation,
.repcontainer[data-groupname=repeating_evasion] .repitem:nth-child(odd) div.divCompSpecialisation,
.repcontainer[data-groupname=repeating_pilotage] .repitem:nth-child(even) div.divCompSpecialisation,
.repcontainer[data-groupname=repeating_recherche] .repitem:nth-child(odd) div.divCompSpecialisation,
.repcontainer[data-groupname=repeating_sagacite] .repitem:nth-child(odd) div.divCompSpecialisation,
.repcontainer[data-groupname=repeating_soins] .repitem:nth-child(even) div.divCompSpecialisation,
.repcontainer[data-groupname=repeating_survie] .repitem:nth-child(even) div.divCompSpecialisation,
.repcontainer[data-groupname=repeating_techniques] .repitem:nth-child(even) div.divCompSpecialisation,
.repcontainer[data-groupname=repeating_tir] .repitem:nth-child(odd) div.divCompSpecialisation,
.repcontainer[data-groupname=repeating_vigilance] .repitem:nth-child(odd) div.divCompSpecialisation,
.repcontainer[data-groupname=repeating_equipement1] .repitem:nth-child(even) div,
.repcontainer[data-groupname=repeating_equipement2] .repitem:nth-child(even) div,
.repcontainer[data-groupname=repeating_vehicule] .repitem:nth-child(even) div.divVehiculeCaracs {
background-color: var(--deux);
color: var(--cinq);
}
.repcontainer[data-groupname=repeating_armure] .repitem:nth-child(odd) div.repeating_combatLine,
.repcontainer[data-groupname=repeating_contact] .repitem:nth-child(odd) div.repeating_combatLine,
.repcontainer[data-groupname=repeating_distance] .repitem:nth-child(odd) div.repeating_combatLine,
.repcontainer[data-groupname=repeating_athletisme] .repitem:nth-child(odd) div.divCompSpecialisation,
.repcontainer[data-groupname=repeating_concentration] .repitem:nth-child(odd) div.divCompSpecialisation,
.repcontainer[data-groupname=repeating_connaissances] .repitem:nth-child(odd) div.divCompSpecialisation,
.repcontainer[data-groupname=repeating_corpsacorps] .repitem:nth-child(odd) div.divCompSpecialisation,
.repcontainer[data-groupname=repeating_crochetage] .repitem:nth-child(even) div.divCompSpecialisation,
.repcontainer[data-groupname=repeating_deguisement] .repitem:nth-child(even) div.divCompSpecialisation,
.repcontainer[data-groupname=repeating_discretion] .repitem:nth-child(even) div.divCompSpecialisation,
.repcontainer[data-groupname=repeating_eloquence] .repitem:nth-child(even) div.divCompSpecialisation,
.repcontainer[data-groupname=repeating_enquete] .repitem:nth-child(even) div.divCompSpecialisation,
.repcontainer[data-groupname=repeating_esquive] .repitem:nth-child(odd) div.divCompSpecialisation,
.repcontainer[data-groupname=repeating_evasion] .repitem:nth-child(even) div.divCompSpecialisation,
.repcontainer[data-groupname=repeating_pilotage] .repitem:nth-child(odd) div.divCompSpecialisation,
.repcontainer[data-groupname=repeating_recherche] .repitem:nth-child(even) div.divCompSpecialisation,
.repcontainer[data-groupname=repeating_sagacite] .repitem:nth-child(even) div.divCompSpecialisation,
.repcontainer[data-groupname=repeating_soins] .repitem:nth-child(odd) div.divCompSpecialisation,
.repcontainer[data-groupname=repeating_survie] .repitem:nth-child(odd) div.divCompSpecialisation,
.repcontainer[data-groupname=repeating_techniques] .repitem:nth-child(odd) div.divCompSpecialisation,
.repcontainer[data-groupname=repeating_tir] .repitem:nth-child(even) div.divCompSpecialisation,
.repcontainer[data-groupname=repeating_vigilance] .repitem:nth-child(even) div.divCompSpecialisation,
.repcontainer[data-groupname=repeating_equipement1] .repitem:nth-child(odd) div,
.repcontainer[data-groupname=repeating_equipement2] .repitem:nth-child(odd) div,
.repcontainer[data-groupname=repeating_vehicule] .repitem:nth-child(odd) div.divVehiculeCaracs {
background-color: var(--trois);
color: var(--un);
}
/*------------------------------------------------------------------------------------------------------------------*/
/*--------------------------------------------------- ÉQUIPEMENT ---------------------------------------------------*/
/*------------------------------------------------------------------------------------------------------------------*/
.sheet-equipement {
width: 100%;
}
.sheet-equipement input[type="text"] {
width: 90%;
height: 25px;
margin: 5px;
background-color: var(--cinq);
color: var(--un);
}
.divEquipement {
width:45%;
height: auto;
margin:5px;
padding:0px;
background-color: var(--un);
color: var(--cinq);;
border:1px solid var(--un);
}
.divEquipement div {
background-color: var(--trois);
color: var(--un);
}
.equipement-title {
height: 30px;
font-size: 14px;
text-align: center;
}
/*-----*/
/*MAINS*/
/*-----*/
input[type="checkbox"].mains {
width: 20px;
height: 20px;
margin-top: 2px;
opacity: 0;
}
span.mains {
width: 20px;
height: 20px;
margin-left: -30px;
margin-top: 0;
font-size: 15px;
text-align: center;
}
input[type="checkbox"].mains:not(:checked):hover + span.mains {
background-color: var(--cinq);
color: #000000;
transition: 0.3s ease;
}
input[type="checkbox"].mains:checked:hover + span.mains {
background-color: var(--cinq);
color: #3FB315;
transition: 0.3s ease;
}
input[type="checkbox"].mains:checked + span.mains {
background-color: #3FB315;
color: var(--cinq);;
}
input[type="checkbox"].mains:not(:checked) + span.mains {
background-color: #000000;
color: var(--cinq);;
}
/*--------*/
/*VÉHICULE*/
/*--------*/
.divVehicule {
width: 800px;
height: auto;
background-color: var(--un);
color: var(--cinq);
border:1px solid var(--un);
}
.charsheet .divVehiculeCaracs input[type="text"] {
width: 50px;
height: 25px;
text-align: center;
}
.charsheet .divVehiculeCaracs input[type="text"].vehicule-perso,
.charsheet .divVehiculeCaracs select.vehicule-select {
width: 200px;
height: 25px;
}
.charsheet .divVehiculeCaracs input[type="checkbox"] {
position: absolute;
left: 10px;
}
.divVehiculeDescription {
width: 800px;
height: 25px;
background-color: var(--un);
color: var(--cinq);
}
.divVehiculeCaracs {
width: 800px;
height: 35px;
margin: 0;
}
.divVehicule1 {
width: 40%;
height: 35px;
margin: 0;
padding: 0;
text-align: center;
}
.divVehicule2 {
width: 10%;
height: 35px;
margin: 0;
padding: 0;
text-align: center;
}
/*------------------------------------------------------------------------------------------------------------------*/
/*----------------------------------------------------- COMBAT -----------------------------------------------------*/
/*------------------------------------------------------------------------------------------------------------------*/
.sheet-combat input, select {
height: 25px;
background-color: var(--cinq);
color: var(--un);
border: none;
}
.sheet-combat input {
text-align: center;
}
.sheet-combat input[type="text"].text-tres-court {
width: 30px;
}
.sheet-combat input[type="text"].text-court {
width: 60px;
}
.sheet-combat input[type="text"].text-moyen {
width: 120px;
}
.sheet-combat input[type="text"].text-long {
width: 180px;
}
.sheet-combat input[type="text"].text-tres-long {
width: 240px;
}
.sheet-combat input[type="number"] {
width: 15px;
}
.divCaracCombat1,
.divCaracCombat2,
.divCaracCombat3 {
height: 80px;
margin: 5px;
background-color: var(--trois);
border: solid 1px var(--un);
}
.divCaracCombat1 {
width: 130px;
}
.divCaracCombat2 {
width: 250px;
}
.divCaracCombat3 {
width: 450px;
}
.divCaracCombat4 {
width: 65px;
height: auto;
margin: 5px;
padding: 4px;
}
.divCaracCombat4 span {
color: var(--un);
}
.divCaracCombat2 select {
width: 230px;
height: 25px;
margin-top: 10px;
}
.divCaracCombat1 input[type="number"].stats,
.divCaracCombat2 input[type="number"].stats {
width: 40px;
height: 40px;
margin: 2px;
background-color: var(--cinq);
color:var(--un);
border: solid 2px var(--un);
box-shadow: 2px 2px 2px 0 black;
font-size:15px;
font-weight:bold;
text-align: center;
transform: skewX(-10deg);
}
.divArmesEtArmures {
width: 90%;
height: auto;
margin: auto;
}
.divCombat {
width: 100%;
height: auto;
background-color: var(--un);
color: var(--cinq);;
border: 1px solid var(--un);
}
.divCombatTitle {
width: 100%;
height: 25px;
margin-bottom: 5px;
background-color: var(--un);
color: var(--cinq);;
}
.divCombatLine {
width: 100%;
height: auto;
background-color: var(--trois);
color: var(--un);
}
.repeatingCombatLine {
width: 100%;
height: 40px;
margin: auto;
}
/*----------------*/
/*Armes et armures*/
/*----------------*/
.divArmuresCaracs,
.divArmesCaracs {
width: 100%;
height: 40px;
margin: 0;
padding: 0;
}
.arme-titre,
.armure-titre {
font-size: 16px;
font-weight: bold;
height: 30px;
}
.armure-nom {
width: 250px;
margin: 2px;
}
.arme-nom {
width: 300px;
margin: 2px;
}
.arme-degats,
.armure-protection,
.armure-structure,
.arme-parade,
.arme-mode,
.arme-munitions {
width: 80px;
margin: 2px;
}
.arme-mains,
.arme-portee,
.armure-type {
width: 130px;
margin: 2px;
}
.divArmesCaracs input,
.divArmesCaracs select,
.divArmuresCaracs input,
.divArmuresCaracs select {
height: 25px;
margin: 2px;
border: none;
}
.divArmesCaracs input[type=text],
.divArmuresCaracs input[type=text] {
text-align: center;
}
.divArmesCaracs .arme-portee input[type="number"],
.divArmesCaracs .arme-munitions input[type="number"] {
width: 30px;
}
.divArmesCaracs select,
.divArmuresCaracs select {
width: 190px;
}
.divArmesCaracs select.select-parade {
width: 50px;
}
.divArmuresCaracs select.armure-select,
.divArmuresCaracs input.armure-perso {
width: 190px;
}
/*------------------------------------------------------------------------------------------------------------------*/
/*------------------------------------------------- NOMS ALTERNATIFS -----------------------------------------------*/
/*------------------------------------------------------------------------------------------------------------------*/
.check-distance:checked ~ .distance-perso,
.check-distance:not(:checked) ~ .distance-select,
.check-contact:checked ~ .contact-perso,
.check-contact:not(:checked) ~ .contact-select,
.check-armure:checked ~ .armure-perso,
.check-armure:not(:checked) ~ .armure-select,
.check-talent:checked ~ .talent-perso,
.check-talent:not(:checked) ~ .talent-select,
.check-rituel:checked ~ .rituel-perso,
.check-rituel:not(:checked) ~ .rituel-select,
.check-mutation:checked ~ .mutation-perso,
.check-mutation:not(:checked) ~ .mutation-select,
.check-psy:checked ~ .psy-perso,
.check-psy:not(:checked) ~ .psy-select,
.check-vehicule:checked ~ .vehicule-perso,
.check-vehicule:not(:checked) ~ .vehicule-select {
display: block;
}
.check-distance:checked ~ .distance-select,
.check-distance:not(:checked) ~ .distance-perso,
.check-contact:checked ~ .contact-select,
.check-contact:not(:checked) ~ .contact-perso,
.check-armure:checked ~ .armure-select,
.check-armure:not(:checked) ~ .armure-perso,
.check-talent:checked ~ .talent-select,
.check-talent:not(:checked) ~ .talent-perso,
.check-rituel:checked ~ .rituel-select,
.check-rituel:not(:checked) ~ .rituel-perso,
.check-mutation:checked ~ .mutation-select,
.check-mutation:not(:checked) ~ .mutation-perso,
.check-psy:checked ~ .psy-select,
.check-psy:not(:checked) ~ .psy-perso,
.check-vehicule:not(:checked) ~ .vehicule-perso,
.check-vehicule:checked ~ .vehicule-select {
display: none;
}
/*------------------------------------------------------------------------------------------------------------------*/
/*----------------------------------------------------- MODALES ----------------------------------------------------*/
/*------------------------------------------------------------------------------------------------------------------*/
input.check-distance-modal,
input.check-contact-modal {
width: 20px;
height: 20px;
cursor: pointer;
z-index: 1;
opacity: 0;
position: absolute;
top: 9px;
left: 10px;
}
input.check-distance-modal + span::before,
input.check-contact-modal + span::before {
width: 20px;
height: 20px;
background-color: var(--un);
border-radius: 10px;
color: var(--cinq);
text-align: center;
font-size: 15px;
font-weight: normal;
font-family: 'pictos';
content: '&';
transition: 0.5s ease;
position: absolute;
top: 8px;
left: 12px;
}
input.check-psy-modal,
input.check-mutation-modal,
input.check-talent-modal,
input.check-rituel-modal {
width: 20px;
height: 20px;
cursor: pointer;
z-index: 1;
opacity: 0;
position: relative;
top: 0;
left: 0;
}
input.check-psy-modal + span::before,
input.check-mutation-modal + span::before,
input.check-talent-modal + span::before,
input.check-rituel-modal + span::before {
width: 20px;
height: 20px;
background-color: var(--un);
border-radius: 10px;
color: var(--cinq);
text-align: center;
font-size: 15px;
font-weight: normal;
font-family: 'pictos';
content: '&';
transition: 0.5s ease;
position: relative;
top: 0;
left: 0;
}
input.check-distance-modal:checked + span::before,
input.check-distance-modal:hover + span::before,
input.check-contact-modal:checked + span::before,
input.check-contact-modal:hover + span::before,
input.check-psy-modal:checked + span::before,
input.check-psy-modal:hover + span::before,
input.check-mutation-modal:checked + span::before,
input.check-mutation-modal:hover + span::before,
input.check-talent-modal:checked + span::before,
input.check-talent-modal:hover + span::before,
input.check-rituel-modal:checked + span::before,
input.check-rituel-modal:hover + span::before {
transform: rotate(135deg);
transition: 0.3s ease;
}
input.check-psy-modal + span::before,
input.check-mutation-modal + span::before,
input.check-talent-modal + span::before,
input.check-rituel-modal + span::before {
margin-left: -30px;
}
.check-contact-modal:checked ~ div.contact-modal,
.check-distance-modal:checked ~ div.distance-modal,
.check-psy-modal:checked ~ div.psy-modal,
.check-mutation-modal:checked ~ div.mutation-modal,
.check-talent-modal:checked ~ div.talent-modal,
.check-rituel-modal:checked ~ div.rituel-modal {
display: block;
}
.check-contact-modal:not(:checked) ~ div.contact-modal,
.check-distance-modal:not(:checked) ~ div.distance-modal,
.check-psy-modal:not(:checked) ~ div.psy-modal,
.check-mutation-modal:not(:checked) ~ div.mutation-modal,
.check-talent-modal:not(:checked) ~ div.talent-modal,
.check-rituel-modal:not(:checked) ~ div.rituel-modal {
display: none;
}
.contact-modal,
.distance-modal {
position: absolute;
bottom: -4px;
left: 0;
padding: 15px;
width: 600px;
height: 80px;
background-color: var(--six);
color: var(--cinq);
z-index: 100;
font-size: 12px;
clip-path: polygon(0px 20px, 20px 0px, 600px 0px, 600px 40px, 580px 60px, 32px 60px, 22px 80px, 12px 60px, 0px 60px);
}
.psy-modal,
.mutation-modal,
.talent-modal,
.rituel-modal {
position: absolute;
top: -110px;
left: 10px;
width: 800px;
height: 120px;
background-color: var(--six);
font-size: 12px;
clip-path: polygon(0px 20px, 20px 0px, 800px 0px, 800px 80px, 780px 100px, 31px 100px, 21px 120px, 11px 100px, 0px 100px);
box-shadow: black 10px 10px 10px;
}
.psy-modal div .psymodalcontent,
.mutation-modal div .mutationmodalcontent,
.talent-modal div .talentmodalcontent,
.rituel-modal div .rituelmodalcontent {
width: 760px;
height: 60px;
padding: 5px;
margin: 10px;
font-family: Arial, Helvetica, sans-serif;
font-variant: normal;
color: var(--cinq);
background-color: transparent;
border : none;
}
/*------------------------------------------------------------------------------------------------------------------*/
/*------------------------------------------------------ INFOS -----------------------------------------------------*/
/*------------------------------------------------------------------------------------------------------------------*/
.sheet-infos {
width: 100%;
}
.divInfos1 input,
.divInfos2 input
{
width: 10px;
height: 25px;
font-size: 14px;
border: none;
background-color: var(--deux);
color: var(--cinq);;
text-align: center;
}
.divInfos1, .divInfos2 {
height : auto;
margin: 10px;
padding: 4px;
font-size: 14px;
color: var(--un);
}
.divInfos1 {
width: 250px;
}
.divInfos2 {
width: 450px;
}
.infosnumber {
width: 10px;
}
.infostitle {
font-size: 14px;
font-weight: bold;
}
/*---------------------------*/
/*TABLE GÉNÉRIQUE DES MESURES*/
/*---------------------------*/
.divTGM {
width: 100%;
margin: 0;
padding: 0;
}
.divTGM1, .divTGM2, .divTGM3 {
width: 100%;
font-weight: bold;
}
.divTGM1 {
height: 40px;
background-color: var(--un);
color: var(--cinq);;
}
.divTGM2 {
height: 25px;
background-color: var(--trois);
color: var(--un);
}
.divTGM3 {
height: 25px;
background-color: var(--deux);
color: var(--cinq);;
}
.divTGM1 span, .divTGM2 span, .divTGM3 span {
width: 100px;
text-align: center;
}
.divTGM-title {
width: 100%;
height: 40px;
background-color: var(--un);
color: var(--cinq);;
font-size: 16px;
font-weight: bold;
}
.charsheet input.spenumber1[value="0"] + div.spe-talent1,
.charsheet input.spenumber2[value="0"] ~ div.spe-talent2,
.charsheet input.spenumber3[value="0"] ~ div.spe-talent3,
.charsheet input.spenumber4[value="0"] ~ div.spe-talent4,
.charsheet input.spenumber5[value="0"] ~ div.spe-talent5,
.charsheet input.spenumber6[value="0"] ~ div.spe-talent6,
.charsheet input.spenumber7[value="0"] ~ div.spe-talent7 {
display: none;
}
.charsheet input.spenumber1[value="1"] + div.spe-talent1,
.charsheet input.spenumber2[value="1"] ~ div.spe-talent2,
.charsheet input.spenumber3[value="1"] ~ div.spe-talent3,
.charsheet input.spenumber4[value="1"] ~ div.spe-talent4,
.charsheet input.spenumber5[value="1"] ~ div.spe-talent5,
.charsheet input.spenumber6[value="1"] ~ div.spe-talent6,
.charsheet input.spenumber7[value="1"] ~ div.spe-talent7 {
display: block;
}
/*------------------------------------------------------------------------------------------------------------------*/
/*---------------------------------------------------ROLLTEMPLATES--------------------------------------------------*/
/*------------------------------------------------------------------------------------------------------------------*/
.sheet-rolltemplate-jetBase div:nth-child(odd),
.sheet-rolltemplate-jetPouvoir div:nth-child(odd),
.sheet-rolltemplate-jetArme div:nth-child(odd),
.sheet-rolltemplate-initiative div:nth-child(odd),
.sheet-rolltemplate-pnj div:nth-child(odd) {
background-color: #cdd4f0;
color: #383080;
}
.sheet-rolltemplate-jetBase div:nth-child(even),
.sheet-rolltemplate-jetPouvoir div:nth-child(even),
.sheet-rolltemplate-jetArme div:nth-child(even),
.sheet-rolltemplate-initiative div:nth-child(even),
.sheet-rolltemplate-pnj div:nth-child(even) {
background-color: #7b95cc;
color: #fffdf7;
}
.sheet-rolltemplate-jetBase div:nth-child(odd) .inlinerollresult,
.sheet-rolltemplate-jetBase div:nth-child(odd) .sheet-inlinerollresultbonus,
.sheet-rolltemplate-jetPouvoir div:nth-child(odd) .inlinerollresult,
.sheet-rolltemplate-jetPouvoir div:nth-child(odd) div.sheet-inlinerollresultbonus,
.sheet-rolltemplate-jetArme div:nth-child(odd) .inlinerollresult,
.sheet-rolltemplate-initiative div:nth-child(odd) .inlinerollresult,
.sheet-rolltemplate-pnj div:nth-child(odd) .inlinerollresult {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
border: solid 1px #383080;
background-color: #383080;
color: #fffdf7;
width: 12px;
height: 20px;
margin-left: 2px;
margin-right: 2px;
font-weight: bold;
}
.sheet-rolltemplate-jetBase div:nth-child(even) .inlinerollresult,
.sheet-rolltemplate-jetBase div:nth-child(even) .sheet-inlinerollresultbonus,
.sheet-rolltemplate-jetPouvoir div:nth-child(even) .inlinerollresult,
.sheet-rolltemplate-jetPouvoir div:nth-child(even) div.sheet-inlinerollresultbonus,
.sheet-rolltemplate-jetArme div:nth-child(even) .inlinerollresult,
.sheet-rolltemplate-initiative div:nth-child(even) .inlinerollresult,
.sheet-rolltemplate-pnj div:nth-child(even) .inlinerollresult {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
border: solid 1px #383080;
background-color: #383080;
color: #fffdf7;
width: 12px;
height: 20px;
margin-left: 2px;
margin-right: 2px;
font-weight: bold;
}
.sheet-rolltemplate-jetBase,
.sheet-rolltemplate-jetPouvoir,
.sheet-rolltemplate-jetArme,
.sheet-rolltemplate-initiative,
.sheet-rolltemplate-pnj {
border: solid 1px #383080;
padding: 0;
margin: 0;
height: auto;
}
.sheet-rolltemplate-jetBase .sheet-table,
.sheet-rolltemplate-jetPouvoir .sheet-table,
.sheet-rolltemplate-jetArme .sheet-table,
.sheet-rolltemplate-initiative .sheet-table,
.sheet-rolltemplate-pnj .sheet-table {
padding: 0;
margin: 0;
}
.sheet-rolltemplate-jetBase .sheet-table div,
.sheet-rolltemplate-jetPouvoir .sheet-table div,
.sheet-rolltemplate-jetArme .sheet-table div,
.sheet-rolltemplate-initiative .sheet-table div,
.sheet-rolltemplate-pnj .sheet-table div {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
height: 20px;
font-size: 12px;
}
.sheet-rolltemplate-jetBase .sheet-table .sheet-header,
.sheet-rolltemplate-jetPouvoir .sheet-table .sheet-header,
.sheet-rolltemplate-jetArme .sheet-table .sheet-header,
.sheet-rolltemplate-initiative .sheet-table .sheet-header,
.sheet-rolltemplate-pnj .sheet-table .sheet-header {
width: 100%;
font-size: 16px;
font-weight: bold;
background-color: #383080;
color: #fffdf7;
margin: 0;
padding: 0;
}
.sheet-rolltemplate-jetPouvoir .sheet-table div.sheet-table-line,
.sheet-rolltemplate-jetArme .sheet-table div.sheet-table-line,
.sheet-rolltemplate-initiative .sheet-table div.sheet-table-line {
width: 100%;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
height: 20px;
}
/*------------------------------------------------------------------------------------------------------------------*/
/*---------------------------------------------BLESSURES ET HÉMORRAGIES---------------------------------------------*/
/*------------------------------------------------------------------------------------------------------------------*/
.charsheet input[type="radio"].radiohemorragie,
.charsheet input[type="radio"].radioblessure {
opacity: 0;
height: 15px;
width: 42px;
margin-top: 5px;
}
.charsheet span.radiohemorragie,
.charsheet span.radioblessure {
display: inline-block;
height: 15px;
width: 40px;
text-align: center;
margin-top: 5px;
background-color: var(--deux);
box-shadow: 0 0 1px #6278a8 inset;
}
.charsheet span.rh0,
.charsheet span.rb0 {
margin-left: -250px;
}
.charsheet input[type="radio"].rh0:checked ~ span.rh0,
.charsheet input[type="radio"].rh1:checked ~ span.rh0,
.charsheet input[type="radio"].rh2:checked ~ span.rh0,
.charsheet input[type="radio"].rh3:checked ~ span.rh0,
.charsheet input[type="radio"].rh4:checked ~ span.rh0,
.charsheet input[type="radio"].rh5:checked ~ span.rh0,
.charsheet input[type="radio"].rb0:checked ~ span.rb0,
.charsheet input[type="radio"].rb1:checked ~ span.rb0,
.charsheet input[type="radio"].rb2:checked ~ span.rb0,
.charsheet input[type="radio"].rb3:checked ~ span.rb0,
.charsheet input[type="radio"].rb4:checked ~ span.rb0,
.charsheet input[type="radio"].rb5:checked ~ span.rb0 {
background: linear-gradient(to right, #15ff00, #c8ff00);
border: none;
}
.charsheet input[type="radio"].rh1:checked ~ span.rh1,
.charsheet input[type="radio"].rh2:checked ~ span.rh1,
.charsheet input[type="radio"].rh3:checked ~ span.rh1,
.charsheet input[type="radio"].rh4:checked ~ span.rh1,
.charsheet input[type="radio"].rh5:checked ~ span.rh1,
.charsheet input[type="radio"].rb1:checked ~ span.rb1,
.charsheet input[type="radio"].rb2:checked ~ span.rb1,
.charsheet input[type="radio"].rb3:checked ~ span.rb1,
.charsheet input[type="radio"].rb4:checked ~ span.rb1,
.charsheet input[type="radio"].rb5:checked ~ span.rb1 {
background: linear-gradient(to right, #c8ff00, #ffc400);
border: none;
}
.charsheet input[type="radio"].rh2:checked ~ span.rh2,
.charsheet input[type="radio"].rh3:checked ~ span.rh2,
.charsheet input[type="radio"].rh4:checked ~ span.rh2,
.charsheet input[type="radio"].rh5:checked ~ span.rh2,
.charsheet input[type="radio"].rb2:checked ~ span.rb2,
.charsheet input[type="radio"].rb3:checked ~ span.rb2,
.charsheet input[type="radio"].rb4:checked ~ span.rb2,
.charsheet input[type="radio"].rb5:checked ~ span.rb2 {
background: linear-gradient(to right, #ffc400, #ff9900);
border: none;
}
.charsheet input[type="radio"].rh3:checked ~ span.rh3,
.charsheet input[type="radio"].rh4:checked ~ span.rh3,
.charsheet input[type="radio"].rh5:checked ~ span.rh3,
.charsheet input[type="radio"].rb3:checked ~ span.rb3,
.charsheet input[type="radio"].rb4:checked ~ span.rb3,
.charsheet input[type="radio"].rb5:checked ~ span.rb3 {
background: linear-gradient(to right, #ff9900, #ff5100);
border: none;
}
.charsheet input[type="radio"].rh4:checked ~ span.rh4,
.charsheet input[type="radio"].rh5:checked ~ span.rh4,
.charsheet input[type="radio"].rb4:checked ~ span.rb4,
.charsheet input[type="radio"].rb5:checked ~ span.rb4 {
background: linear-gradient(to right, #ff5100, #ff0000);
border: none;
}
.charsheet input[type="radio"].rh5:checked ~ span.rh5,
.charsheet input[type="radio"].rb5:checked ~ span.rb5 {
background: linear-gradient(to right, #ff0000, #7a0000);
border: none;
}
.charsheet input[type="radio"].radioblessure:not(:checked):hover + span.radioblessure::before {
background-color: #000000;
transform: scale(2);
}
.divHemorragie {
margin-top: 5px;
}
.divHemorragie input[type="number"].ptshemorragie {
width: 15px;
margin-right: 5px;
background-color: var(--trois);
color: var(--un);
font-weight: bold;
}
.divBlessure input[type="text"].ptsblessure {
width: 100px;
margin-right: 5px;
background-color: var(--trois);
color: var(--un);
font-weight: bold;
}
/*------------------------------------------------------------------------------------------------------------------*/
/*--------------------------------------------------------PNJ-------------------------------------------------------*/
/*------------------------------------------------------------------------------------------------------------------*/
.pnj {
width: 800px;
height: auto;
background-color: var(--deux);
color: var(--cinq);
margin: 0;
padding: 0;
}
.pnj-bio {
width: 100%;
height: 40px;
background-color: var(--un);
color: var(--cinq);
margin: 0;
padding: 0;
}
.pnj-carac-comp {
width: 400px;
}
.pnj-caracs {
width: 100%;
height: auto;
background-color: var(--deux);
color: var(--un);
margin: 0;
padding: 0;
margin-top: 10px;
margin-bottom: 10px;
}
.charsheet .pnj input[type="text"],
.charsheet .pnj select {
background-color: var(--cinq);
color: var(--un);
width: 200px;
margin-left: 20px;
margin-right: 10px;
}
.charsheet .pnj input[type="number"],
.charsheet .pnj input[type="text"].pnj-arme-mode {
width: 30px;
background-color: var(--cinq);
color: var(--un);
margin-left: 5px;
margin-right: 5px;
text-align: center;
}
.charsheet .pnj textarea {
width: 750px;
height: 30px;
background-color: var(--cinq);
color: var(--un);
padding: 3px;
}
.charsheet select option:disabled {
background-color: var(--un);
color: var(--cinq);
font-weight: bold;
}
.pnj-carac {
width: 400px;
height: 40px;
background-color: var(--un);
color: var(--cinq);
margin-bottom: 5px;
}
.pnj-carac span {
margin-left: 10px;
font-size: 16px;
font-weight: bold;
}
.pnj-comps {
height: auto;
}
.pnj-comp {
width: 400px;
height: 30px;
}
.pnj-equipement {
width: 100%;
height: auto;
}
.pnj-equipement-title {
background-color: var(--un);
color: var(--cinq);
font-size: 16px;
font-weight: bold;
height: 30px;
margin-top: 5px;
margin-bottom: 5px;
}
.pnj-arme1 {
width: 210px;
height: 30px;
margin: 0;
padding: 0;
}
.pnj-arme2 {
width: 70px;
height: 30px;
margin: 0;
padding: 0;
}
.pnj-arme3 {
width: 140px;
height: 30px;
margin: 0;
padding: 0;
}
.pnj-pouvoirs {
width: 100%;
height: auto;
margin: 0;
}
.pnj-pouvoir {
width: 45%;
margin: 0;
}
.pnj-pouvoir1 {
width: 210px;
height: 30px;
margin: 0;
}
.pnj-pouvoir2 {
width: 80px;
height: 30px;
margin: 0;
}
.pnj-infos div {
width: 120px;
margin-left: 5px;
margin-right: 5px;
}
/*------------------------------------------------------------------------------------------------------------------*/
/*---------------------------------------------------- INACTIVE ----------------------------------------------------*/
/*------------------------------------------------------------------------------------------------------------------*/
.inactive {
display: none;
}