mirror of
https://github.com/Nighthawk42/roll20-character-sheets.git
synced 2026-08-30 11:42:29 +00:00
721 lines
12 KiB
CSS
721 lines
12 KiB
CSS
/* Roll20 - Fiche Insectopia V0.2 by Giovanninatale & Surfandko */
|
|
/* classe affichage hexagon */
|
|
.sheet-hexagon {
|
|
position: relative;
|
|
background: black;
|
|
float: left;
|
|
}
|
|
.sheet-hexagon-geant {
|
|
height: 500px;
|
|
width: 850px;
|
|
}
|
|
.sheet-hexagon-entete {
|
|
height: 200px;
|
|
width: 640px;
|
|
}
|
|
.sheet-hexagon-equipements {
|
|
height: 200px;
|
|
width: 630px;
|
|
}
|
|
.sheet-hexagon-grand {
|
|
height: 300px;
|
|
width: 300px;
|
|
}
|
|
.sheet-hexagon-moyen {
|
|
height: 60px;
|
|
width: 60px;
|
|
}
|
|
.sheet-hexagon-petit {
|
|
height: 45px;
|
|
width: 45px;
|
|
}
|
|
.sheet-hexagon-alonge {
|
|
height: 45px;
|
|
width: 175px;
|
|
}
|
|
.sheet-hexagon-alonge2 {
|
|
height: 45px;
|
|
width: 160px;
|
|
}
|
|
|
|
.sheet-hexagon:before {
|
|
position: absolute;
|
|
content: '';
|
|
}
|
|
.sheet-hexagon:before {
|
|
top: 1px; /* border width */
|
|
left: 1px; /* border width */
|
|
height: calc(100% - 2px); /* 100% - (2 * border width) */
|
|
width: calc(100% - 2px); /* 100% - (2 * border width) */
|
|
background: white;
|
|
}
|
|
.sheet-hexagon-petit:before {
|
|
top: 1px; /* border width */
|
|
left: 1px; /* border width */
|
|
height: calc(100% - 2px); /* 100% - (2 * border width) */
|
|
width: calc(100% - 2px); /* 100% - (2 * border width) */
|
|
background: white;
|
|
}
|
|
|
|
.sheet-hexagon-petit, .sheet-hexagon-petit:before{
|
|
clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%);
|
|
}
|
|
|
|
.sheet-hexagon-moyen, .sheet-hexagon-moyen:before{
|
|
clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%);
|
|
}
|
|
|
|
.sheet-hexagon-grand, .sheet-hexagon-grand:before{
|
|
clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%);
|
|
}
|
|
|
|
.sheet-hexagon-entete, .sheet-hexagon-entete:before{
|
|
clip-path: polygon(5% 0, 95% 0, 100% 50%, 95% 100%, 5% 100%, 0 50%);
|
|
}
|
|
|
|
.sheet-hexagon-equipements, .sheet-hexagon-equipements:before{
|
|
clip-path: polygon(5% 0, 95% 0, 100% 50%, 95% 100%, 5% 100%, 0 50%);
|
|
}
|
|
.sheet-hexagon-geant, .sheet-hexagon-geant:before{
|
|
clip-path: polygon(5% 0, 95% 0, 100% 50%, 95% 100%, 5% 100%, 0 50%);
|
|
}
|
|
|
|
.sheet-hexagon-alonge, .sheet-hexagon-alonge:before{
|
|
clip-path: polygon(7% 0, 93% 0, 100% 50%, 93% 100%, 7% 100%, 0 50%);
|
|
}
|
|
|
|
.sheet-hexagon-alonge2, .sheet-hexagon-alonge2:before{
|
|
clip-path: polygon(7% 0, 93% 0, 100% 50%, 93% 100%, 7% 100%, 0 50%);
|
|
}
|
|
/* classe affichage hexagon entete avec informations */
|
|
.sheet-chevauche-entete{
|
|
position:relative;
|
|
left:40px;
|
|
top:7px;
|
|
}
|
|
|
|
/* classe input hexagon */
|
|
.sheet-input-hexagon-petit{
|
|
font-size:14px;
|
|
max-width:31px;
|
|
border:0px;
|
|
padding:0px;
|
|
text-align:center;
|
|
position: relative;
|
|
right: 1px;
|
|
}
|
|
|
|
.sheet-input-hexagon-moyen{
|
|
font-size:26px;
|
|
max-width:44px;
|
|
border:0px;
|
|
padding:0px;
|
|
text-align:center;
|
|
position: relative;
|
|
right: 7px;
|
|
}
|
|
|
|
.sheet-input-hexagon-petit-alonge{
|
|
font-size:14px;
|
|
max-width:27px;
|
|
border:0px;
|
|
padding:0px;
|
|
text-align:center;
|
|
position: relative;
|
|
right: 43px;
|
|
}
|
|
|
|
.sheet-input-hexagon-alonge{
|
|
font-size:13px;
|
|
max-width:110px;
|
|
border:0px;
|
|
padding:0px;
|
|
text-align:left;
|
|
}
|
|
|
|
.sheet-input-hexagon-alonge-sspetithex{
|
|
font-size:13px;
|
|
max-width:140px;
|
|
border:0px;
|
|
padding:0px;
|
|
text-align:left;
|
|
height:20px;
|
|
}
|
|
|
|
/* classe affichage hexagon avec table/input */
|
|
.sheet-chevauche-hexagon-petit{
|
|
position:relative;
|
|
left:9px;
|
|
top:10px;
|
|
}
|
|
|
|
.sheet-chevauche-hexagon-moyen{
|
|
position:relative;
|
|
left:15px;
|
|
top:15px;
|
|
}
|
|
|
|
.sheet-chevauche-hexagon-alonge{
|
|
position:relative;
|
|
left:-7px;
|
|
top:-6px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.sheet-chevauche-hexagon-alonge-sscercle{
|
|
position:relative;
|
|
left:1px;
|
|
top:-7px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.sheet-chevauche-hexagon-alonge-sspetithex{
|
|
position:relative;
|
|
left:9px;
|
|
top:10px;
|
|
height:20px;
|
|
overflow: hidden;
|
|
width:156px;
|
|
}
|
|
.sheet-chevauche-hexagon-alonge2-sspetithex{
|
|
position:relative;
|
|
left:9px;
|
|
top:10px;
|
|
height:20px;
|
|
overflow: hidden;
|
|
width:145px;
|
|
}
|
|
|
|
/* classe affichage hexagones en diagonales */
|
|
.sheet-col2{
|
|
bottom: 22.5px;
|
|
right: 11.25px;
|
|
position:relative;
|
|
}
|
|
.sheet-col3{
|
|
position: relative;
|
|
bottom: 45px;
|
|
right: 22.5px;
|
|
}
|
|
.sheet-col4{
|
|
position: relative;
|
|
bottom: 67.5px;
|
|
right: 33.75px;
|
|
}
|
|
.sheet-col5{
|
|
position: relative;
|
|
bottom: 90px;
|
|
right: 45px;
|
|
}
|
|
|
|
/* cercles */
|
|
.sheet-rolltemplate-blattes .sheet-circle,.sheet-circle{
|
|
height: 30px;
|
|
width: 30px;
|
|
position: relative;
|
|
float: left;
|
|
left:7px;
|
|
top:7px;
|
|
clip-path: circle(50% at 50% 50%);
|
|
}
|
|
|
|
.sheet-circle-small{
|
|
height: 17px;
|
|
width: 17px;
|
|
clip-path: circle(50% at 50% 50%);
|
|
}
|
|
|
|
.sheet-circle-small-hexagon-alonge{
|
|
position: relative;
|
|
float: left;
|
|
left:-10px;
|
|
top:-4px;
|
|
}
|
|
|
|
.sheet-circle-small-hexagon-moyen-1{
|
|
position: relative;
|
|
float: left;
|
|
left:-51px;
|
|
top:49px;
|
|
}
|
|
|
|
.sheet-circle-small-hexagon-moyen-2{
|
|
position: relative;
|
|
float: left;
|
|
left:-67px;
|
|
top:21px;
|
|
}
|
|
|
|
.sheet-circle-small-hexagon-moyen-3{
|
|
position: relative;
|
|
float: left;
|
|
left:-51px;
|
|
top:-8px;
|
|
}
|
|
|
|
.sheet-circle-small-hexagon-moyen-4{
|
|
position: relative;
|
|
float: left;
|
|
left:-24px;
|
|
top:-8px;
|
|
}
|
|
|
|
.sheet-circle-small-hexagon-moyen-5{
|
|
position: relative;
|
|
float: left;
|
|
left:-9px;
|
|
top:20px;
|
|
}
|
|
|
|
.sheet-circle-small-hexagon-moyen-6{
|
|
position: relative;
|
|
float: left;
|
|
left:-24px;
|
|
top:50px;
|
|
}
|
|
|
|
.sheet-circle-small-hexagon-petit-1{
|
|
position: relative;
|
|
float: left;
|
|
left:-42px;
|
|
top:35px;
|
|
}
|
|
|
|
.sheet-circle-small-hexagon-petit-2{
|
|
position: relative;
|
|
float: left;
|
|
left:-51px;
|
|
top:14px;
|
|
}
|
|
|
|
.sheet-circle-small-hexagon-petit-3{
|
|
position: relative;
|
|
float: left;
|
|
left:-42px;
|
|
top:-7px;
|
|
}
|
|
|
|
.sheet-circle-small-hexagon-petit-4{
|
|
position: relative;
|
|
float: left;
|
|
left:-19px;
|
|
top:-7px;
|
|
}
|
|
|
|
.sheet-circle-small-hexagon-petit-5{
|
|
position: relative;
|
|
float: left;
|
|
left:-9px;
|
|
top:14px;
|
|
}
|
|
|
|
.sheet-circle-small-hexagon-petit-6{
|
|
position: relative;
|
|
float: left;
|
|
left:-19px;
|
|
top:35px;
|
|
}
|
|
|
|
.sheet-rolltemplate-blattes .sheet-circle-black,.sheet-circle-black {
|
|
background: black;
|
|
}
|
|
|
|
.sheet-rolltemplate-blattes .sheet-circle-gray,.sheet-circle-gray {
|
|
background: lightgrey;
|
|
}
|
|
|
|
.sheet-rolltemplate-blattes .sheet-circle-blue,.sheet-circle-blue {
|
|
background: blue;
|
|
}
|
|
|
|
.sheet-rolltemplate-blattes .sheet-circle-green,.sheet-circle-green {
|
|
background: green;
|
|
}
|
|
|
|
.sheet-rolltemplate-blattes .sheet-circle-red,.sheet-circle-red {
|
|
background: red;
|
|
}
|
|
|
|
/* Caractéristiques hexagon central */
|
|
.sheet-label-antenne {
|
|
position: relative;
|
|
float: left;
|
|
left:117px;
|
|
top:80px;
|
|
}
|
|
|
|
.sheet-label-mandibules {
|
|
}
|
|
.sheet-label-chitine {
|
|
}
|
|
.sheet-label-temperature {
|
|
}
|
|
|
|
/* hexagones hexagon central */
|
|
.sheet-hexagon-pheromone {
|
|
position: relative;
|
|
float: left;
|
|
left:65px;
|
|
top:124px;
|
|
}
|
|
|
|
.sheet-hexagon-instinct {
|
|
position: relative;
|
|
float: left;
|
|
left:307px;
|
|
top:42px;
|
|
}
|
|
|
|
|
|
/* GRID */
|
|
.sheet-entete{
|
|
display: grid;
|
|
grid-template-columns: 640px 225px;
|
|
column-gap: 10px;
|
|
}
|
|
|
|
.sheet-xp{
|
|
grid-column-start: 2;
|
|
grid-column-end: 3;
|
|
grid-row-start: 1;
|
|
grid-row-end: 3;
|
|
}
|
|
|
|
.sheet-nom{
|
|
display: grid;
|
|
grid-template-columns: 72px 210px 72px 210px;
|
|
column-gap: 10px;
|
|
}
|
|
|
|
.sheet-espece{
|
|
display: grid;
|
|
grid-template-columns: 13px 27px 13px 27px 131px;
|
|
column-gap: 2px;
|
|
}
|
|
|
|
.sheet-xpchance{
|
|
display: grid;
|
|
grid-template-columns: 45px 45px 45px 45px 45px;
|
|
|
|
}
|
|
|
|
.sheet-caste-competence-capacite{
|
|
display: grid;
|
|
grid-template-columns: 190px 460px 190px;
|
|
column-gap: 16px;
|
|
}
|
|
.sheet-grid{
|
|
display: grid;
|
|
}
|
|
|
|
.sheet-caracteristique{
|
|
display: grid;
|
|
grid-template-columns: 62px 15px 62px 77px 28px 77px 62px 15px 62px;
|
|
row-gap: 16px;
|
|
}
|
|
|
|
.sheet-left{
|
|
justify-self:left;
|
|
}
|
|
.sheet-right{
|
|
justify-self:right;
|
|
}
|
|
.sheet-center{
|
|
justify-self:center;
|
|
}
|
|
/* Compétences hexagon central */
|
|
/* ligne 1 */
|
|
.sheet-label-pheromone {
|
|
grid-column-start: 1;
|
|
grid-column-end: 3;
|
|
grid-row-start: 1;
|
|
grid-row-end: 2;
|
|
align-self:center;
|
|
justify-self:right;
|
|
}
|
|
.sheet-hexagone-antenne{
|
|
grid-column-start: 4;
|
|
grid-column-end: 5;
|
|
grid-row-start: 1;
|
|
grid-row-end: 3;
|
|
position: relative;
|
|
right: 23px;
|
|
top: 3px;
|
|
}
|
|
|
|
.sheet-hexagone-esprit{
|
|
grid-column-start: 6;
|
|
grid-column-end: 7;
|
|
grid-row-start: 1;
|
|
grid-row-end: 3;
|
|
position: relative;
|
|
left: 21px;
|
|
top: 6px;
|
|
}
|
|
.sheet-label-esprit{
|
|
position: relative;
|
|
left: 4px;
|
|
}
|
|
.sheet-label-instinct {
|
|
grid-column-start: 8;
|
|
grid-column-end: 10;
|
|
grid-row-start: 1;
|
|
grid-row-end: 2;
|
|
align-self:center;
|
|
position: relative;
|
|
right: 14px;
|
|
}
|
|
/* ligne 2 */
|
|
.sheet-label-tir {
|
|
grid-column-start: 1;
|
|
grid-column-end: 3;
|
|
grid-row-start: 2;
|
|
grid-row-end: 3;
|
|
align-self:center;
|
|
justify-self:right;
|
|
}
|
|
.sheet-label-conscience {
|
|
grid-column-start: 8;
|
|
grid-column-end: 10;
|
|
grid-row-start: 2;
|
|
grid-row-end: 3;
|
|
align-self:center;
|
|
position: relative;
|
|
right: 14px;
|
|
}
|
|
|
|
/* ligne 3*/
|
|
.sheet-hexagone-mandibule{
|
|
grid-column-start: 2;
|
|
grid-column-end: 4;
|
|
grid-row-start: 3;
|
|
grid-row-end: 5;
|
|
position: relative;
|
|
right: 21px;
|
|
top: 22px;
|
|
}
|
|
|
|
.sheet-hexagone-aile{
|
|
grid-column-start: 7;
|
|
grid-column-end: 9;
|
|
grid-row-start: 3;
|
|
grid-row-end: 5;
|
|
position: relative;
|
|
left: 21px;
|
|
top: 22px;
|
|
}
|
|
.sheet-label-aile{
|
|
position: relative;
|
|
left: 14px;
|
|
}
|
|
|
|
/* ligne 5*/
|
|
.sheet-label-chrysalide {
|
|
grid-column-start: 1;
|
|
grid-column-end: 3;
|
|
grid-row-start: 5;
|
|
grid-row-end: 6;
|
|
align-self:center;
|
|
justify-self:right;
|
|
}
|
|
.sheet-hexagone-chitine{
|
|
grid-column-start: 4;
|
|
grid-column-end: 5;
|
|
grid-row-start: 5;
|
|
grid-row-end: 7;
|
|
position: relative;
|
|
right: 21px;
|
|
top: 22px;
|
|
}
|
|
|
|
.sheet-hexagone-temperature{
|
|
grid-column-start: 6;
|
|
grid-column-end: 7;
|
|
grid-row-start: 5;
|
|
grid-row-end: 7;
|
|
position: relative;
|
|
left: 21px;
|
|
top: 22px;
|
|
}
|
|
.sheet-label-temperature {
|
|
position: relative;
|
|
right: 30px;
|
|
}
|
|
.sheet-label-activite {
|
|
grid-column-start: 8;
|
|
grid-column-end: 10;
|
|
grid-row-start: 5;
|
|
grid-row-end: 6;
|
|
align-self:center;
|
|
position: relative;
|
|
right: 14px;
|
|
}
|
|
/* ligne 6*/
|
|
.sheet-label-resistance {
|
|
grid-column-start: 1;
|
|
grid-column-end: 3;
|
|
grid-row-start: 6;
|
|
grid-row-end: 7;
|
|
align-self:center;
|
|
justify-self:right;
|
|
}
|
|
|
|
.sheet-label-metabolisme {
|
|
grid-column-start: 8;
|
|
grid-column-end: 10;
|
|
grid-row-start: 6;
|
|
grid-row-end: 7;
|
|
align-self:center;
|
|
position: relative;
|
|
right: 14px;
|
|
}
|
|
|
|
/*sheet-caracteristique-derive*/
|
|
.sheet-caracteristique-derive{
|
|
display: grid;
|
|
grid-template-columns: auto auto auto auto auto auto;
|
|
column-gap: 10px;
|
|
}
|
|
.sheet-vitesse{
|
|
display: grid;
|
|
grid-template-columns: 25px 45px;
|
|
}
|
|
.sheet-label-vitesse
|
|
{
|
|
grid-column-start: 1;
|
|
grid-column-end: 3;
|
|
grid-row-start: 1;
|
|
grid-row-end: 2;
|
|
align-self:center;
|
|
justify-self:right;
|
|
}
|
|
.sheet-impact{
|
|
display: grid;
|
|
grid-template-columns: 55px 45px;
|
|
}
|
|
.sheet-label-impact{
|
|
grid-column-start: 1;
|
|
grid-column-end: 3;
|
|
grid-row-start: 1;
|
|
grid-row-end: 2;
|
|
align-self:center;
|
|
justify-self:right;
|
|
}
|
|
.sheet-blessures{
|
|
display: grid;
|
|
grid-template-columns: 55px 45px;
|
|
}
|
|
.sheet-label-blessures{
|
|
grid-column-start: 1;
|
|
grid-column-end: 3;
|
|
grid-row-start: 1;
|
|
grid-row-end: 2;
|
|
align-self:center;
|
|
justify-self:right;
|
|
position: relative;
|
|
left: 6px;
|
|
}
|
|
.sheet-fluide{
|
|
display: grid;
|
|
grid-template-columns: 55px 45px;
|
|
}
|
|
.sheet-label-fluide{
|
|
grid-column-start: 1;
|
|
grid-column-end: 3;
|
|
grid-row-start: 1;
|
|
grid-row-end: 2;
|
|
align-self:center;
|
|
justify-self:right;
|
|
}
|
|
.sheet-souillure{
|
|
display: grid;
|
|
grid-template-columns: 60px;
|
|
}
|
|
|
|
.sheet-initiative-defense-carapace{
|
|
display: grid;
|
|
grid-template-columns: 66px 66px;
|
|
justify-items: center;
|
|
}
|
|
.sheet-label-carapace
|
|
{
|
|
grid-column-start: 1;
|
|
grid-column-end: 3;
|
|
grid-row-start: 3;
|
|
grid-row-end: 4;
|
|
align-self:center;
|
|
justify-self:center;
|
|
}
|
|
.sheet-hexagone-carapace
|
|
{
|
|
grid-column-start: 1;
|
|
grid-column-end: 3;
|
|
grid-row-start: 4;
|
|
grid-row-end: 5;
|
|
align-self:center;
|
|
justify-self:center;
|
|
}
|
|
|
|
/* equipements et armure*/
|
|
.sheet-armure-equipement{
|
|
display: grid;
|
|
grid-template-columns: 225px 640px;
|
|
}
|
|
|
|
.sheet-armure{
|
|
display: grid;
|
|
grid-template-columns: 50px 215px;
|
|
}
|
|
|
|
.sheet-equipement-label-equipement{
|
|
position: relative;
|
|
left:40px;
|
|
font-size:16px;
|
|
}
|
|
.sheet-equipement-01{
|
|
position: relative;
|
|
bottom: 0px;
|
|
right: 0px;
|
|
}
|
|
.sheet-equipement-02{
|
|
position: relative;
|
|
bottom:198px;
|
|
right:-283px;
|
|
}
|
|
|
|
/* armes */
|
|
.sheet-armes {
|
|
display: grid;
|
|
grid-template-columns: auto;
|
|
}
|
|
|
|
.sheet-arme {
|
|
display: grid;
|
|
grid-template-columns: 170px 170px 170px 170px 170px;
|
|
}
|
|
|
|
/* Magie */
|
|
.sheet-partie-magie{
|
|
display: grid;
|
|
grid-template-columns: 800px;
|
|
}
|
|
.sheet-magie-label-jeteur{
|
|
display: grid;
|
|
grid-template-columns: 200px 250px;
|
|
}
|
|
.sheet-magie{
|
|
display: grid;
|
|
grid-template-columns: 150px 150px 150px 150px 150px;
|
|
}
|
|
.sheet-magie-position{
|
|
position: relative;
|
|
top:5px;
|
|
left:47px;
|
|
}
|
|
|
|
textarea.sheet-magie-textarea {
|
|
height:75px;
|
|
width:145px;
|
|
margin:0px 0px 9px;
|
|
}
|