diff --git a/Insectopia/Insectopia-Preview.jpg b/Insectopia/Insectopia-Preview.jpg new file mode 100644 index 0000000000..192075ddb9 Binary files /dev/null and b/Insectopia/Insectopia-Preview.jpg differ diff --git a/Insectopia/Insectopia.css b/Insectopia/Insectopia.css new file mode 100644 index 0000000000..b8950e609b --- /dev/null +++ b/Insectopia/Insectopia.css @@ -0,0 +1,720 @@ +/* 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; +} diff --git a/Insectopia/Insectopia.html b/Insectopia/Insectopia.html new file mode 100644 index 0000000000..02dd0610d5 --- /dev/null +++ b/Insectopia/Insectopia.html @@ -0,0 +1,1040 @@ + + +
+
+
+
+
+
+