slaguru666/roll20-character-sheets-tester
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[Shaan Renaissance] Magic tab positioning update (#4770)

Browse Source 
* Shaan (tabbed)

New character sheet for Shaan rpg. Tabbed version.

* Shaan Renaissance

* Modified json and jpg filenames
* tabs code updated for firefox support
* added trihn management in magic tabs

* [Shaan Renaissance] Magic tab positioning update

Updated css checkbox trick positioning for better rendering.
This commit is contained in:
Phoxounet
2019-03-04 09:29:15 -06:00
committed by Cassie Levett
parent e84ae84bdb
commit 518359d589
2 changed files with 53 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Shaan (tabbed)/Shaan (tabbed).css
+35 -4
View File
@@ -11,6 +11,7 @@ input.sheet-tab2:checked ~ div.sheet-tab2,
input.sheet-tab3:checked ~ div.sheet-tab3,
input.sheet-tab4:checked ~ div.sheet-tab4,
input.sheet-tab5:checked ~ div.sheet-tab5
{
display:block;
}
@@ -354,7 +355,7 @@ th.sheet-necrose{
input.sheet-magie-perception
{
opacity: 0;
margin: 20px 0 0 20px;
margin: -200px 0 0 20px;
width: 193px;
height: 200px;
cursor: pointer;
@@ -362,7 +363,7 @@ input.sheet-magie-perception
}
/* Fake checkbox */
input.sheet-magie-perception + span::before {
margin: -120px 0 0 -192px;
margin: -220px 0 0 -192px;
content: url(https://nsm09.casimages.com/img/2019/02/04//1902040327276857316107231.jpg);
width: 192px;
height: 200px;
@@ -375,6 +376,7 @@ input.sheet-magie-perception:checked + span::before {
input.sheet-magie-non-perception
{
opacity: 0;
margin: -200px 0 0 0;
width: 193px;
height: 201px;
cursor: pointer;
@@ -395,6 +397,7 @@ input.sheet-magie-non-perception:checked + span::before {
input.sheet-magie-mutation
{
opacity: 0;
margin: -200px 0 0 0;
width: 193px;
height: 201px;
cursor: pointer;
@@ -415,6 +418,7 @@ input.sheet-magie-mutation:checked + span::before {
input.sheet-magie-deplacement
{
opacity: 0;
margin: -200px 0 0 0;
width: 193px;
height: 201px;
cursor: pointer;
@@ -435,6 +439,7 @@ input.sheet-magie-deplacement:checked + span::before {
input.sheet-magie-controle
{
opacity: 0;
margin: -200px 0 0 0;
width: 193px;
height: 201px;
cursor: pointer;
@@ -456,6 +461,7 @@ input.sheet-magie-controle:checked + span::before {
input.sheet-magie-moi
{
opacity: 0;
margin: -200px 0 0 0;
width: 193px;
height: 201px;
cursor: pointer;
@@ -476,6 +482,7 @@ input.sheet-magie-moi:checked + span::before {
input.sheet-magie-lui
{
opacity: 0;
margin: -200px 0 0 0;
width: 193px;
height: 201px;
cursor: pointer;
@@ -496,6 +503,7 @@ input.sheet-magie-lui:checked + span::before {
input.sheet-magie-limbes
{
opacity: 0;
margin: -200px 0 0 0;
width: 193px;
height: 201px;
cursor: pointer;
@@ -516,6 +524,7 @@ input.sheet-magie-limbes:checked + span::before {
input.sheet-magie-objet
{
opacity: 0;
margin: -200px 0 0 0;
width: 193px;
height: 201px;
cursor: pointer;
@@ -536,6 +545,7 @@ input.sheet-magie-objet:checked + span::before {
input.sheet-magie-animal
{
opacity: 0;
margin: -200px 0 0 0;
width: 193px;
height: 201px;
cursor: pointer;
@@ -556,6 +566,7 @@ input.sheet-magie-animal:checked + span::before {
input.sheet-magie-vegetal
{
opacity: 0;
margin: -200px 0 0 0;
width: 193px;
height: 201px;
cursor: pointer;
@@ -563,7 +574,7 @@ input.sheet-magie-vegetal
}
/* Fake checkbox */
input.sheet-magie-vegetal + span::before {
margin: 0 0 0 -192px;
margin: 200px 0 0 -192px;
content: url(https://nsm09.casimages.com/img/2019/02/04//1902040437316857316107304.jpg);
width: 192px;
height: 200px;
@@ -576,6 +587,7 @@ input.sheet-magie-vegetal:checked + span::before {
input.sheet-magie-air
{
opacity: 0;
margin: -200px 0 0 0;
width: 193px;
height: 201px;
cursor: pointer;
@@ -596,6 +608,7 @@ input.sheet-magie-air:checked + span::before {
input.sheet-magie-eau
{
opacity: 0;
margin: -200px 0 0 0;
width: 193px;
height: 201px;
cursor: pointer;
@@ -616,6 +629,7 @@ input.sheet-magie-eau:checked + span::before {
input.sheet-magie-feu
{
opacity: 0;
margin: -200px 0 0 0;
width: 193px;
height: 201px;
cursor: pointer;
@@ -636,6 +650,7 @@ input.sheet-magie-feu:checked + span::before {
input.sheet-magie-terre
{
opacity: 0;
margin: -200px 0 0 0;
width: 193px;
height: 201px;
cursor: pointer;
@@ -657,6 +672,7 @@ input.sheet-magie-terre:checked + span::before {
input.sheet-magie-freq-jour
{
opacity: 0;
margin: -200px 0 0 0;
width: 193px;
height: 201px;
cursor: pointer;
@@ -677,6 +693,7 @@ input.sheet-magie-freq-jour:checked + span::before {
input.sheet-magie-freq-situation
{
opacity: 0;
margin: -200px 0 0 0;
width: 193px;
height: 201px;
cursor: pointer;
@@ -697,6 +714,7 @@ input.sheet-magie-freq-situation:checked + span::before {
input.sheet-magie-freq-2tours
{
opacity: 0;
margin: -200px 0 0 0;
width: 193px;
height: 201px;
cursor: pointer;
@@ -718,6 +736,7 @@ input.sheet-magie-freq-2tours:checked + span::before {
input.sheet-magie-freq-tour
{
opacity: 0;
margin: -200px 0 0 0;
width: 193px;
height: 201px;
cursor: pointer;
@@ -738,6 +757,7 @@ input.sheet-magie-freq-tour:checked + span::before {
input.sheet-magie-portee-contact
{
opacity: 0;
margin: -200px 0 0 100px;
width: 193px;
height: 201px;
cursor: pointer;
@@ -745,7 +765,7 @@ input.sheet-magie-portee-contact
}
/* Fake checkbox */
input.sheet-magie-portee-contact + span::before {
margin: 0 0 0 -192px;
margin: -200px 0 0 -192px;
content: url(https://nsm09.casimages.com/img/2019/02/05//1902051233126857316107870.jpg);
width: 192px;
height: 200px;
@@ -758,6 +778,7 @@ input.sheet-magie-portee-contact:checked + span::before {
input.sheet-magie-portee-interaction
{
opacity: 0;
margin: -200px 0 0 0;
width: 193px;
height: 201px;
cursor: pointer;
@@ -778,6 +799,7 @@ input.sheet-magie-portee-interaction:checked + span::before {
input.sheet-magie-portee-distance
{
opacity: 0;
margin: -200px 0 0 0;
width: 193px;
height: 201px;
cursor: pointer;
@@ -799,6 +821,7 @@ input.sheet-magie-portee-distance:checked + span::before {
input.sheet-magie-portee-horizon
{
opacity: 0;
margin: -200px 0 0 0;
width: 193px;
height: 201px;
cursor: pointer;
@@ -819,6 +842,7 @@ input.sheet-magie-portee-horizon:checked + span::before {
input.sheet-magie-1cible
{
opacity: 0;
margin: -200px 0 0 0;
width: 193px;
height: 201px;
cursor: pointer;
@@ -839,6 +863,7 @@ input.sheet-magie-1cible:checked + span::before {
input.sheet-magie-2cibles
{
opacity: 0;
margin: -200px 0 0 0;
width: 193px;
height: 201px;
cursor: pointer;
@@ -859,6 +884,7 @@ input.sheet-magie-2cibles:checked + span::before {
input.sheet-magie-cibles-magie2
{
opacity: 0;
margin: -200px 0 0 0;
width: 193px;
height: 201px;
cursor: pointer;
@@ -880,6 +906,7 @@ input.sheet-magie-cibles-magie2:checked + span::before {
input.sheet-magie-cibles-magie
{
opacity: 0;
margin: -200px 0 0 0;
width: 193px;
height: 201px;
cursor: pointer;
@@ -900,6 +927,7 @@ input.sheet-magie-cibles-magie:checked + span::before {
input.sheet-magie-duree-tour
{
opacity: 0;
margin: -200px 0 0 100px;
width: 193px;
height: 201px;
cursor: pointer;
@@ -920,6 +948,7 @@ input.sheet-magie-duree-tour:checked + span::before {
input.sheet-magie-duree-magie3
{
opacity: 0;
margin: -200px 0 0 0;
width: 193px;
height: 201px;
cursor: pointer;
@@ -940,6 +969,7 @@ input.sheet-magie-duree-magie3:checked + span::before {
input.sheet-magie-duree-heure
{
opacity: 0;
margin: -200px 0 0 0;
width: 193px;
height: 201px;
cursor: pointer;
@@ -961,6 +991,7 @@ input.sheet-magie-duree-heure:checked + span::before {
input.sheet-magie-duree-jour
{
opacity: 0;
margin: -200px 0 0 0;
width: 193px;
height: 201px;
cursor: pointer;
Shaan (tabbed)/Shaan (tabbed).html
+18 -19
View File
@@ -5,19 +5,20 @@
<!-- Général -->
<div>
<input type="radio" name="attr_type_fiche" class="sheet-tab sheet-tab1" value="1" checked="checked" ><span title="PERSONNAGE"></span>
<input type="radio" name="attr_type_fiche" class="sheet-tab sheet-tab2" value="2"><span title="RENAISSANT"></span>
<input type="radio" name="attr_type_fiche" class="sheet-tab sheet-tab3" value="3"><span title="SHAANI"></span><span style="margin-left:50px">Dés :</span>
<button class="sheet-rollbase" type="roll" value="@{roll_base}" title="Jet de base" name="roll_base_btn" ></button>
<button class="sheet-rollnecrose" type="roll" value="@{roll_necrose}" title="Jet de nécrose" name="roll_necrose_btn"></button>
<input type="radio" name="attr_type_fiche" class="sheet-tab sheet-tab1" value="PERSONNAGE" checked="checked" title="PERSONNAGE"><span title="PERSONNAGE"></span>
<input type="radio" name="attr_type_fiche" class="sheet-tab sheet-tab2" value="RENAISSANT" title="RENAISSANT"><span title="RENAISSANT"></span>
<input type="radio" name="attr_type_fiche" class="sheet-tab sheet-tab3" value="SHAANI" title="SHAANI"><span title="SHAANI"></span><span style="margin-left:50px">Dés :</span>
<button class="sheet-rollbase" type="roll" value="@{roll_base}" title="Jet de base" name="roll_base_btn" ></button>
<button class="sheet-rollnecrose" type="roll" value="@{roll_necrose}" title="Jet de nécrose" name="roll_necrose_btn"></button>
<!--Personnage -->
<div class="sheet-tab-content sheet-tab1">
<input type="radio" name="attr_tab" class="sheet-tab sheet-tab1" value="1" checked="checked" title="Domaines & Spé."><span title="Domaines & Spé"></span>
<input type="radio" name="attr_tab" class="sheet-tab sheet-tab2" value="2" title="Pouvoirs"><span title="Pouvoirs"></span>
<input type="radio" name="attr_tab" class="sheet-tab sheet-tab3" value="3" title="Magies"> <span title="Magies"></span>
<input type="radio" name="attr_tab" class="sheet-tab sheet-tab4" value="4" title="Acquis"><span title="Acquis"></span>
<input type="radio" name="attr_tab" class="sheet-tab sheet-tab5" value="5" title="Notes"><span title="Notes"></span>
<input type="radio" name="attr_tab" class="sheet-tab sheet-tab1" value="Domaines & Spé" selected title="Domaines & Spé"><span title="Domaines & Spé"></span>
<input type="radio" name="attr_tab" class="sheet-tab sheet-tab2" value="Pouvoirs" title="Pouvoirs"><span title="Pouvoirs"></span>
<input type="radio" name="attr_tab" class="sheet-tab sheet-tab3" value="Magies" title="Magies"> <span title="Magies"></span>
<input type="radio" name="attr_tab" class="sheet-tab sheet-tab4" value="Acquis" title="Acquis"><span title="Acquis"></span>
<input type="radio" name="attr_tab" class="sheet-tab sheet-tab5" value="Notes" title="Notes"><span title="Notes"></span>
<!-- Domaines & Spécialisations -->
<div class="sheet-tab-content sheet-tab1" style="background-image: url(https://nsm09.casimages.com/img/2019/01/17//1901171158446857316079960.jpg); height: 1060px; width: 1500px; background-repeat: no-repeat;">
@@ -521,7 +522,7 @@
<input type="checkbox" class="sheet-magie-controle" name="attr_magie_controle" value="1"><span></span>
<input type="checkbox" class="sheet-magie-mutation" name="attr_magie_mutation" value="1"><span></span>
</div>
<div style="margin: -80px 0 0 20px; font-size:25px;"><span>Schèmes Éléments</span></div>
<div style="margin: 0px 0 0 20px; font-size:25px;"><span>Schèmes Éléments</span></div>
<div style="margin: 0 0 0 20px;">
<input type="checkbox" class="sheet-magie-moi" name="attr_magie_moi" value="1"><span></span>
<input type="checkbox" class="sheet-magie-lui" name="attr_magie_lui"value="1"><span></span>
@@ -529,37 +530,37 @@
<input type="checkbox" class="sheet-magie-objet" name="attr_magie_objet" value="1"><span></span>
<input type="checkbox" class="sheet-magie-animal" name="attr_magie_animal" value="1"><span></span>
</div>
<div style="margin: -100px 0 0 20px;">
<div style="margin: 0 0 0 20px;">
<input type="checkbox" class="sheet-magie-vegetal" name="attr_magie_vegetal" value="1"><span></span>
<input type="checkbox" class="sheet-magie-air" name="attr_magie_air"value="1"><span></span>
<input type="checkbox" class="sheet-magie-eau" name="attr_magie_eau" value="1"><span></span>
<input type="checkbox" class="sheet-magie-feu" name="attr_magie_feu" value="1"><span></span>
<input type="checkbox" class="sheet-magie-terre" name="attr_magie_terre" value="1"><span></span>
</div>
<div style="margin: -80px 0 0 140px; font-size:35px;"><span>Fréquence</span></div>
<div style="margin: 20px 0 0 140px; font-size:35px;"><span>Fréquence</span></div>
<div style="margin: 0 0 0 20px;">
<input type="checkbox" class="sheet-magie-freq-jour" name="attr_magie_freq_jour" checked="unchecked" value="1"><span></span>
<input type="checkbox" class="sheet-magie-freq-situation" name="attr_magie_freq_situation"value="1"><span></span>
<input type="checkbox" class="sheet-magie-freq-2tours" name="attr_magie_freq_2tours" value="1"><span></span>
<input type="checkbox" class="sheet-magie-freq-tour" name="attr_magie_freq_tour" value="1"><span></span>
<input style="margin: 0 0 0 100px;" type="checkbox" class="sheet-magie-portee-contact" name="attr_magie_portee_contact" checked="unchecked" value="1"><span></span>
<input type="checkbox" class="sheet-magie-portee-contact" name="attr_magie_portee_contact" checked="unchecked" value="1"><span></span>
<input type="checkbox" class="sheet-magie-portee-interaction" name="attr_magie_portee_interaction"value="1"><span></span>
<input type="checkbox" class="sheet-magie-portee-distance" name="attr_magie_portee_distance" value="1"><span></span>
<input type="checkbox" class="sheet-magie-portee-horizon" name="attr_magie_portee_horizon" value="1"><span></span>
</div>
<div style="margin: -350px 0 0 1000px; font-size:35px;"><span>Portée</span></div>
<div style="margin: -255px 0 0 1000px; font-size:35px;"><span>Portée</span></div>
<div style="margin: 200px 0 0 140px; font-size:35px;"><span>Nbre de Cibles</span></div>
<div style="margin: 0 0 0 20px;">
<input type="checkbox" class="sheet-magie-1cible" name="attr_magie_1cible" checked="unchecked" value="1"><span></span>
<input type="checkbox" class="sheet-magie-2cibles" name="attr_magie_2cibles"value="1"><span></span>
<input type="checkbox" class="sheet-magie-cibles-magie2" name="attr_magie_cibles_magies2" value="1"><span></span>
<input type="checkbox" class="sheet-magie-cibles-magie" name="attr_magie_cibles_magie" value="1"><span></span>
<input style="margin: 0 0 0 100px;" type="checkbox" class="sheet-magie-duree-tour" name="attr_magie_duree_tour" checked="unchecked" value="1"><span></span>
<input type="checkbox" class="sheet-magie-duree-tour" name="attr_magie_duree_tour" checked="unchecked" value="1"><span></span>
<input type="checkbox" class="sheet-magie-duree-magie3" name="attr_magie_duree_magie3"value="1"><span></span>
<input type="checkbox" class="sheet-magie-duree-heure" name="attr_magie_duree_heure" value="1"><span></span>
<input type="checkbox" class="sheet-magie-duree-jour" name="attr_magie_duree_jour" value="1"><span></span>
</div>
<div style="margin: -350px 0 0 1000px; font-size:35px;"><span>Durée</span></div>
<div style="margin: -255px 0 0 1000px; font-size:35px;"><span>Durée</span></div>
<div style="margin: 225px 0 0 40px;">
<span style="font-size: 25px;">Trihns invoqués :</span>
<fieldset class="repeating_trihnMagiePJ">
@@ -573,7 +574,6 @@
<input type="text" placeholder="Emplacement du Trihn" name="attr_emplacementTrihn" title="Emplacement du Trihn" style="width:150px;"/>
</fieldset>
</div>
</div>
<!-- Acquis & Divers-->
<div class="sheet-tab-content sheet-tab4" style="background-image: url(https://nsm09.casimages.com/img/2019/01/18//1901180306016857316081521.jpg); width: 1500px; background-repeat: repeat;" >
@@ -1538,7 +1538,6 @@ Un personnage peut également se téléporter au côté d'un membre de son Shaan
<input type="text" placeholder="Emplacement du Trihn" name="attr_emplacementTrihn" title="Emplacement du Trihn" style="width:150px;"/>
</fieldset>
</div>
</div>
<!-- Acquis & Divers-->
<div class="sheet-tab-content sheet-tab4" style="background-image: url(https://nsm09.casimages.com/img/2019/01/18//1901180306016857316081521.jpg); width: 1500px; background-repeat: repeat;" >