JDRVirtuel

Le forum du JDR à distance
Nous sommes le Mar 24 Jan 2017 03:02

Heures au format UTC + 1 heure [ Heure d’été ]




Poster un nouveau sujet Répondre au sujet  [ 5 messages ] 
Auteur Message
MessagePosté: Dim 8 Jan 2017 14:01 
Hors ligne
Zombie Lividunesque Maladroit

Inscription: Mer 30 Déc 2015 11:53
Messages: 133
Date de naissance: 13 Avr 1980
je vous mets ici le code pour la fiche perso pour channel fear, elle est à priori compatible avec tous les jeux utilisant le système corpus mechanica de Yno (Americana, Outer Space, Rushmore, etc...)


LE HTML

Spoiler: Afficher
Code:
<div class="sheet-header">
   
</div>
<div class="sheet-bloque">
        <div class="sheet-titre1">INFORMATIONS</div>
        <div><span class="sheet-titre2">identité</span><input type="text" name="attr_character_name"/></div>
        <div><span class="sheet-titre2">profil</span><input type="text" name="attr_profil"/></div>
        <div class="sheet-2colrow">
            <div class="sheet-col">
                 <div class="sheet-rot"><div class="sheet-titre2">mots-clefs</div><textarea name="attr_mots_clefs"></textarea></div>
            </div>
             <div class="sheet-col">
                <div class="sheet-rot"><div class="sheet-titre2">déformation professionnelle</div><textarea name="attr_deformation_prof"></textarea></div>
            </div>
        </div>
       
    </div>
   
   
    <div class="sheet-2colrow">
   
       <div class="sheet-col">
           <div class="sheet-bloque">
               <div class="sheet-titre1">APTITUDES</div>
               <div>
                   <input type="number" name="attr_agir"><button type="roll" class="sheet-bouton" name="jet_agir" value="&{template:aptitude} {{perso= @{character_name} }} {{nom_jet=AGIR}} {{jet=[[ {@{agir}d6!}>4 ]] }}{{difficulté=[[?{difficulté ?|1} ]] }} ">Agir</button>
               </div>
               <div>
                   <input type="number" name="attr_connaitre"><button type="roll"class="sheet-bouton" name="jet_connaitre" value="&{template:aptitude} {{perso= @{character_name} }} {{nom_jet=CONNAITRE}} {{jet=[[ {@{connaitre}d6!}>4 ]] }} {{difficulté=[[?{difficulté ?|1} ]] }}">Connaitre</button>
               </div>
               <div>
                   <input type="number" name="attr_endurer"><button type="roll"class="sheet-bouton" name="jet_endurer" value="&{template:aptitude} {{perso= @{character_name} }} {{nom_jet=ENDURER}} {{jet=[[ {@{endurer}d6!}>4 ]] }} {{difficulté=[[?{difficulté ?|1} ]] }}">Endurer</button>
               </div>
               <div>
                   <input type="number" name="attr_forcer"><button type="roll"class="sheet-bouton" name="jet_forcer" value="&{template:aptitude} {{perso= @{character_name} }} {{nom_jet=FORCER}} {{jet=[[ {@{forcer}d6!}>4 ]] }} {{difficulté=[[?{difficulté ?|1} ]] }}">Forcer</button>
               </div>
               <div>
                   <input type="number" name="attr_percevoir"><button type="roll"class="sheet-bouton" name="jet_percevoir" value="&{template:aptitude} {{perso= @{character_name} }} {{nom_jet=PERCEVOIR}} {{jet=[[ {@{percevoir}d6!}>4 ]] }} {{difficulté=[[?{difficulté ?|1} ]] }}">Percevoir</button>
               </div>
               <div>
                   <input type="number" name="attr_simposer"><button type="roll"class="sheet-bouton" name="jet_simposer" value="&{template:aptitude} {{perso= @{character_name} }} {{nom_jet=S'IMPOSER}} {{jet=[[ {@{simposer}d6!}>4 ]] }} {{difficulté=[[?{difficulté ?|1} ]] }}">S'imposer</button>
               </div>
               <div>
                   <input type="number" name="attr_savoirfaire"><button type="roll"class="sheet-bouton" name="jet_savoirfaire" value="&{template:aptitude} {{perso= @{character_name} }} {{nom_jet=AVOIR FAIRE}} {{jet=[[ {@{savoirfaire}d6!}>4 ]] }} {{difficulté=[[?{difficulté ?|1} ]] }}">Savoir-faire</button>
               </div>
               <div>
                   <input type="number" name="attr_sebattre"><button type="roll"class="sheet-bouton" name="jet_sebattre" value="&{template:aptitude} {{perso= @{character_name} }} {{nom_jet=SE BATTRE}} {{jet=[[ {@{sebattre}d6!}>4 ]] }} {{difficulté=[[?{difficulté ?|1} ]] }}">Se battre</button>
               </div>
               <div>
                   <input type="number" name="attr_secontroler"><button type="roll"class="sheet-bouton" name="jet_secontroler" value="&{template:aptitude} {{perso= @{character_name} }} {{nom_jet=SE CONTROLER}} {{jet=[[ {@{secontroler}d6!}>4 ]] }} {{difficulté=[[?{difficulté ?|1} ]] }}">Se contrôler</button>
               </div>
               <div>
                   <input type="number" name="attr_viser"><button type="roll"class="sheet-bouton" name="jet_viser" value="&{template:aptitude} {{perso= @{character_name} }} {{nom_jet=VISER}} {{jet=[[ {@{viser}d6!}>4 ]] }} {{difficulté=[[?{difficulté ?|1} ]] }}">Viser</button>
               </div>
           </div>
           
       </div>
       
       <div class="sheet-col">
           <div class="sheet-bloque">
               <div class="sheet-titre1">SPECIALITES</div>
               <fieldset class="repeating_specialites">           
                 <input type="text" class="sheet-titre2" name="attr_spec_nom"/>   <button style="width:60px"type="roll" class="sheet-bouton" name="jet_relance" value=" &{template:relance} {{perso=@{character_name}}}{{nom_jet= jet de @{spec_nom} }} {{jet_aptitude= [[ {@{spec_aptitude}d6!}>4 ]] }} {{jet_spec= [[ {@{spec_relance}d6!}>4 ]] }} ">jet</button> 
                 <select name="attr_spec_aptitude">
                      <option value="@{agir}">agir</option>
                      <option value="@{connaitre}">connaitre</option>
                      <option value="@{endurer}">endurer</option>
                      <option value="@{forcer}">forcer</option>
                      <option value="@{percevoir}">percevoir</option>
                      <option value="@{simposer}">s'imposer</option>
                      <option value="@{savoirfaire}">savoir faire</option>
                      <option value="@{sebattre}">se battre</option>
                      <option value="@{secontroler}">se contrôler</option>
                      <option value="@{viser}">viser</option>
           
                  </select>
                  <input type="number" name="attr_spec_relance" />   
                </fieldset>
               
               
           </div>
       </div>
   
    </div>
<div class="sheet-bloque">   
    <div class="sheet-3colrow">
       
       
            <div class="sheet-col">
                <div class="sheet-titre1" title="À 2 +1 RÉUSSITE EXIGÉE // À 1 +2 RÉUSSITES EXIGÉES // À 0 INCONSCIENT. AGONIE 1D TOURS : ENDURER/4">SANTE</div>
                <input type="number" name="attr_sante"/>
            </div>
            <div class="sheet-col">
                <div class="sheet-titre1" title="RÉUSSITE +1 RÉUSSITE AUTOMATIQUE // DÉFORMATION PROFESSIONNELLE JET AUTOMATIQUEMENT RÉUSSI 1 FOIS PAR ÉPISODE">RESSOURCE</div>
                <input type="number" name="attr_ressource"/>
            </div>
            <div class="sheet-col">
                <div class="sheet-titre1" title="5 POINTS 0R > 1R EN SPÉCIALITÉ // 10 POINTS 1R > 2R EN SPÉCIALITÉ // 15 POINTS 2R > 3R EN SPÉCIALITÉ ou +1D EN APTITUDE ou +1 DÉFORMATION PROFESSIONNELLE">EVOLUTION</div>
                <input type="number" name="attr_evolution"/>
            </div>
           
    </div>
    <div class="sheet-box">
        <div class="sheet-titre2">rappel</div>
        <div class="sheet-inbox">
            <div>Les points de Ressource peuvent être utilisés
            de deux façons :
            • Réussite – 1 point permet d’obtenir 1
            réussite automatique (sans avoir à lancer
            de dés et en les rajoutant au résultat d’un
            jet). Si le nombre de points de Ressource
            utilisés couvre le nombre de réussites à
            obtenir, le jet demandé est automatiquement
            réussi sans avoir à lancer de dés.
            • Déformation professionnelle – 1 point
            permet d’utiliser la déformation professionnelle
            du personnage une fois par
            épisode, sans même avoir à lancer de
            dés. Un personnage
            </div>
            <div>
                Dans l’heure qui suit la première perte de
            points de Santé, un personnage peut recevoir
            des soins rudimentaires. Le soigneur effectue
            un jet de Savoir-faire. La difficulté de
            cette action est égale au nombre de points
            perdus (difficulté minimum de 1, maximum
            de 4). En cas de réussite, le blessé récupère
            1 point de Santé. En cas d’échec, il ne peut
            pas être soigné une seconde fois par ce biais.
         </div>
        </div>
    </div>
   
</div>
<div class="sheet-2colrow">
    <div class="sheet-col">
        <textarea class="sheet-notes" name="attr_notes"></textarea>
    </div>
    <div class="sheet-col">
        <div class="sheet-bloque">
        <div class="sheet-titre1">ARMES</div>
            <input style="width:40%" type="text" name="arme_nom" value="nom de l'arme"readonly/>
            <input style="width: 15%"type="text" name="arme_degat" value="dégats"readonly/>
            <input style="width: 15%"type="text" name="arme_relance" value="relance"readonly/>


        <fieldset class="repeating_armes">
            <input style="width:40%"type="text" name="attr_arme_nom" placeholder="nom de l'arme"/>
            <input style="width: 15%"type="number" name="attr_arme_degat" value="0"title="dégats"/>
            <input style="width: 15%"type="number" name="attr_arme_relance" value="0"title="relance"/>
            <button style="width:40px" type="roll" class="sheet-bouton" value="&{template:degats}{{perso=@{character_name} }} {{jet=[[ {@{arme_degat}d6!}>4 ]] }} {{nom_jet=dégats de @{arme_nom} }} {{relance=[[ {@{arme_relance}d6!}>4 ]] }}">jet</button>
        </fieldset>
        </div>
    </div>
</div>


<div class="sheet-box">
    <div class="sheet-titre2">rappel des règles</div>
    <div class="sheet-inbox">
        Une action facile à exécuter ne requiert
aucun jet de dés : le personnage réussit
automatiquement son action. Par contre,
si le meneur estime que l’action du personnage
comporte un risque, que le résultat
n’est pas automatiquement évident, il demande
au joueur de lancer les dés.
Le meneur indique quelle Aptitude est
liée à l’action désirée, le joueur lance autant
de dés que le niveau de son personnage
dans l’Aptitude correspondante et comptabilise
le nombre de réussites.
• Chaque dé affichant un résultat de 1, 2
ou 3 est un échec.
• Chaque dé affichant un résultat de 4, 5 ou
6 est une réussite. Chaque dé affichant
un 6 est à relancer pour obtenir une ou
plusieurs réussites supplémentaires.
DIFFICULTÉ
Suivant les circonstances, une action peut
être plus ou moins difficile à réussir. Pour
simuler ces difficultés diverses, certains jets
requièrent l’obtention de plus ou moins de
réussites. C’est le meneur qui détermine la
difficulté en fonction des paramètres qu’il
juge pertinents (en plein jour, en pleine nuit,
en étant au-dessus de l’adversaire).
Le nombre minimum de réussites à réaliser
ne peut jamais être inférieur à 1 (ou l’action
est forcément réussie) ni être supérieur
à 4 (ou l’action est forcément ratée).
       
    </div>
   
   
</div>


<rolltemplate class="sheet-rolltemplate-aptitude">
    <table>
        <tr>
            <th colspan="2">{{perso}}</th>
        </tr>
        <tr>
            <th style="text-align:left ; font-size:90%" colspan="2">{{nom_jet}}</th>
        </tr>

        <tr>
            <td>nbr de succès</td>
            <td>difficulté</td>
        </tr>
        <tr>
            <td>{{jet}}</td>
            <td>{{difficulté}}</td>

        </tr>
        {{#rollTotal() difficulté jet}}
        <tr>
          <th style="color:orange  ; font-size:160%"colspan="2">réussite</th>
        <tr/>
        {{/rollTotal() difficulté jet}}
       
        {{#rollGreater() difficulté jet}}
           <tr>
           <td style="color:red  ; font-size:160%" colspan="2"> échec</td>
           <tr/>
        {{/rollGreater() difficulté jet}}
       
        {{#rollLess() difficulté jet}}
            <tr>
            <td style="color:green ; font-size:160%" colspan="2">réussite</td>
            <tr/>
        {{/rollLess() difficulté jet}}
       <tr></tr>
        <tr></tr>
    </table>
    </rolltemplate>

    <rolltemplate class="sheet-rolltemplate-degats">
    <table>
        <tr>
            <th colspan="2">{{perso}}</th>
        </tr>
        <tr>
            <th style="text-align:left ; font-size:90%" colspan="2">{{nom_jet}}</th>
        </tr>

        <tr>
            <td>nbr de succès</td>
            <td>relances</td>
        </tr>
        <tr>
            <td>{{jet}}</td>
            <td>{{relance}}</td>

        </tr>
    </table>
    </rolltemplate>
   
   

<rolltemplate class="sheet-rolltemplate-relance">
    <table>
        <tr>
            <th colspan="2">{{perso}}</th>
        </tr>
       
        <tr>
            <th style="text-align:left ; font-size:90%" colspan="2">relance pour {{nom_jet}}</th>
        </tr>

        <tr>
            <td>succès naturels</td><td>succès de relance</td>
        </tr>
        <tr>
            <td>{{jet_aptitude}}</td><td>{{jet_spec}}</td>
           

        </tr>
    </table>
    </rolltemplate>
   
   


LE CSS
Spoiler: Afficher
Code:
input {
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  box-sizing: content-box;
  border-top: 0 solid;
  border-right: 1px solid;
  border-bottom: 1px solid;
  border-left: 0 solid;
  -webkit-border-radius: 0 0 11px;
  border-radius: 0 0 11px;
  font: italic normal bold 20px/normal "Times New Roman", Times, serif;
  color: rgba(0,0,0,0.9);
  -o-text-overflow: clip;
  text-overflow: clip;
  -webkit-box-shadow: 5px 5px 21px 1px rgba(0,0,0,0.3) inset;
  box-shadow: 5px 5px 21px 1px rgba(0,0,0,0.3) inset;
}

input:hover {
  background: rgba(74,134,232,0.02);
  -webkit-transform:    skewX(2deg);
  transform:    skewX(2deg);
}

input[type=number]:after {
 
  content: "" !important;

}

.sheet-header {
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  box-sizing: content-box;
  width: 800px;
  height: 120px;
  border: none;
  margin: 0 0 20px;
  font: normal 16px/normal "Times New Roman", Times, serif;
  color: rgba(0,0,0,0.9);
  -o-text-overflow: clip;
  text-overflow: clip;
  background: url("http://img11.hostingpics.net/pics/206358Capturechannelfear.png"), -webkit-linear-gradient(-90deg, rgba(124,123,123,1) 0, rgba(0,0,0,1) 50%, rgba(28,28,28,1) 100%);
  background: url("http://img11.hostingpics.net/pics/206358Capturechannelfear.png"), -moz-linear-gradient(180deg, rgba(124,123,123,1) 0, rgba(0,0,0,1) 50%, rgba(28,28,28,1) 100%);
  background: url("http://img11.hostingpics.net/pics/206358Capturechannelfear.png"), linear-gradient(180deg, rgba(124,123,123,1) 0, rgba(0,0,0,1) 50%, rgba(28,28,28,1) 100%);
  background-repeat: no-repeat, repeat;
  background-position: 50% 50%;
  -webkit-background-origin: padding-box;
  background-origin: padding-box;
  -webkit-background-clip: border-box;
  background-clip: border-box;
  -webkit-background-size: auto auto;
  background-size: auto auto;
  -webkit-box-shadow: 5px 5px 8px 2px rgba(0,0,0,0.5) ;
  box-shadow: 5px 5px 8px 2px rgba(0,0,0,0.5) ;
  -webkit-transform: rotateX(-5.15662015617741deg) rotateY(-5.729577951308233deg) rotateZ(-1.1459155902616465deg)   ;
  transform: rotateX(-5.15662015617741deg) rotateY(-5.729577951308233deg) rotateZ(-1.1459155902616465deg)   ;
}
.sheet-bloque {
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  box-sizing: content-box;
  margin: 8px 5px;
  padding: 10px;
  border: none;
  -webkit-border-radius: 18px;
  border-radius: 18px;
  font: normal 16px/normal "Times New Roman", Times, serif;
  color: rgba(0,0,0,0.9);
  -o-text-overflow: clip;
  text-overflow: clip;
background-image: -webkit-linear-gradient(0deg, rgba(107,113,127,0.52) 0, rgba(0,0,0,0) 33%, rgba(0,0,0,0.59) 100%);
background-image: -moz-linear-gradient(90deg, rgba(107,113,127,0.52) 0, rgba(0,0,0,0) 33%, rgba(0,0,0,0.59) 100%);
background-image: linear-gradient(90deg, rgba(107,113,127,0.52) 0, rgba(0,0,0,0) 33%, rgba(0,0,0,0.59) 100%);
background-position: 50% 50%;
-webkit-background-origin: padding-box;
background-origin: padding-box;
-webkit-background-clip: border-box;
background-clip: border-box;
-webkit-background-size: auto auto;
background-size: auto auto;
  -webkit-box-shadow: 0 0 7px 4px rgba(65,96,119,0.5) ;
  box-shadow: 0 0 7px 4px rgba(65,96,119,0.5) ;
}

.sheet-titre1 {
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  box-sizing: content-box;
  width: 100%;
  border: 2px solid black;
  -webkit-border-radius: 15px 99px 0 0 / 19px 99px 0 0;
  border-radius: 15px 99px 0 0 / 19px 99px 0 0;
  font: normal 1.5em/normal "Times New Roman", Times, serif;
  color: rgba(255,255,255,1);
  -o-text-overflow: clip;
  text-overflow: clip;
  background: rgb(0,0,0);
  -webkit-box-shadow: 0 0 9px 4px rgba(0,0,0,0.5) ;
  box-shadow: 0 0 9px 4px rgba(0,0,0,0.5) ;
}
.sheet-titre2 {
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  box-sizing: content-box;
  border: 2px solid;
  -webkit-border-radius: 0 / 19px 0 0;
  border-radius: 0 / 19px 0 0;
  font: normal 1.2em/normal "Times New Roman", Times, serif;
  color: rgba(255,255,255,1);
  -o-text-overflow: clip;
  text-overflow: clip;
  background: rgb(0,0,0);
}
.sheet-rot {
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  box-sizing: content-box;
  width: 80%;
  margin: 10px auto;
  border: 1px dotted;
  font: normal 16px/normal "Times New Roman", Times, serif;
  color: rgba(0,0,0,0.9);
  -o-text-overflow: clip;
  text-overflow: clip;
  -webkit-box-shadow: 5px 5px 8px 2px rgba(0,0,0,0.4) ;
  box-shadow: 5px 5px 8px 2px rgba(0,0,0,0.4) ;
  -webkit-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1) 10ms;
  -moz-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1) 10ms;
  -o-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1) 10ms;
  transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1) 10ms;
  -webkit-transform: rotateZ(1deg)   ;
  transform: rotateZ(1deg)   ;
}

.sheet-rot:hover {
  -webkit-box-shadow: 5px 5px 8px 2px rgba(74,134,232,0.7) ;
  box-shadow: 5px 5px 8px 2px rgba(74,134,232,0.7) ;
  -webkit-transform:  scaleX(1.05) scaleY(1.05)  ;
  transform:  scaleX(1.05) scaleY(1.05)  ;
}


textarea {
resize: none;
font: italic normal bold 20px/normal "Times New Roman", Times, serif;
}

button[type=roll].sheet-bouton:before{
    content: '';
}
.sheet-bouton {
    width: 200px;
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  box-sizing: content-box;
  border: none;
  font: normal normal bold 16px/normal "Times New Roman", Times, serif;
  color: rgba(255,255,255,0.9);
  text-align: center;
  -o-text-overflow: clip;
  text-overflow: clip;
  background: rgb(0,0,0);
  -webkit-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1) 10ms;
  -moz-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1) 10ms;
  -o-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1) 10ms;
  transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1) 10ms;
}

.sheet-bouton:hover {
    width: 200px;
  color: rgba(74,134,232,0.7);
  -webkit-transform:  scaleX(1.05) scaleY(1.05)  ;
  transform:  scaleX(1.05) scaleY(1.05)  ;
}


.sheet-notes {
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  box-sizing: content-box;
  padding: 40px;
  width: 200px;
  height: 400px;
  border: none;
font: italic normal bold 16px/normal "Times New Roman", Times, serif;
  color: rgba(0,0,0,0.9);
  -o-text-overflow: clip;
  text-overflow: clip;
  background: url("http://img11.hostingpics.net/pics/8306877910616spiraleblocnotespapieravecfonddeligneisolBanquedimages.jpg");
  background-repeat: no-repeat;
  background-position: 50% 50%;
  -webkit-background-origin: border-box;
  background-origin: border-box;
  -webkit-background-clip: border-box;
  background-clip: border-box;
  -webkit-background-size: contain;
  background-size: contain;
  -webkit-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1) 10ms;
  -moz-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1) 10ms;
  -o-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1) 10ms;
  transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1) 10ms;
  -webkit-transform: rotateZ(2deg)   ;
  transform: rotateZ(2deg)   ;
}

.sheet-notes:hover {
  background-repeat: no-repeat;
  background-position: 50% 50%;
  -webkit-background-origin: border-box;
  background-origin: border-box;
  -webkit-background-clip: border-box;
  background-clip: border-box;
  -webkit-background-size: contain;
  background-size: contain;
  -webkit-transform:  scaleX(1.1) scaleY(1.1)  ;
  transform:  scaleX(1.1) scaleY(1.1)  ;
}



.sheet-box{
    border:1px solid black;
        -webkit-border-image: url("http://2.bp.blogspot.com/-OQxY8bahwck/TqBtKZ3kBKI/AAAAAAAABNc/SbCmJTv2ZXg/s1600/grunge+frame+free+2.png") 30 round; /* Safari 3.1-5 */
    -o-border-image: url("http://2.bp.blogspot.com/-OQxY8bahwck/TqBtKZ3kBKI/AAAAAAAABNc/SbCmJTv2ZXg/s1600/grunge+frame+free+2.png") 30 round; /* Opera 11-12.1 */
    border-image: url("http://2.bp.blogspot.com/-OQxY8bahwck/TqBtKZ3kBKI/AAAAAAAABNc/SbCmJTv2ZXg/s1600/grunge+frame+free+2.png") 30 round;
    margin-top:10px;
    margin-bottom:10px;
    max-height:20px;
         -webkit-transition: all 0.5s cubic-bezier(0.42, 0, 0.58, 1), all  0.5s cubic-bezier(0.42, 0, 0.58, 1) 1s;
  -moz-transition: all  0.5s cubic-bezier(0.42, 0, 0.58, 1), all  0.5s cubic-bezier(0.42, 0, 0.58, 1) 1s;
  -o-transition: all  0.5s cubic-bezier(0.42, 0, 0.58, 1), all  0.5s cubic-bezier(0.42, 0, 0.58, 1) 1s;
  transition: all  0.5s cubic-bezier(0.42, 0, 0.58, 1), all  0.5s cubic-bezier(0.42, 0, 0.58, 1) 1s;

   
}
.sheet-box:hover{
   max-height:800px;
        -webkit-transition: all 0.5s cubic-bezier(0.42, 0, 0.58, 1), all  0.5s cubic-bezier(0.42, 0, 0.58, 1) 1s;
  -moz-transition: all  0.5s cubic-bezier(0.42, 0, 0.58, 1), all  0.5s cubic-bezier(0.42, 0, 0.58, 1) 1s;
  -o-transition: all  0.5s cubic-bezier(0.42, 0, 0.58, 1), all  0.5s cubic-bezier(0.42, 0, 0.58, 1) 1s;
  transition: all  0.5s cubic-bezier(0.42, 0, 0.58, 1), all  0.5s cubic-bezier(0.42, 0, 0.58, 1) 1s;

}
.sheet-inbox{
    opacity:0;
    margin:auto;
    width:100%;
   
    -webkit-transform-origin: 50% 0 0;
    transform-origin: 50% 0 0;
    -webkit-transform: scaleY(0);
    transform: scaleY(0);
   
    overflow:hidden;
     -webkit-transition: all 0.5s cubic-bezier(0.42, 0, 0.58, 1), all  0.5s cubic-bezier(0.42, 0, 0.58, 1) 1s;
  -moz-transition: all  0.5s cubic-bezier(0.42, 0, 0.58, 1), all  0.5s cubic-bezier(0.42, 0, 0.58, 1) 1s;
  -o-transition: all  0.5s cubic-bezier(0.42, 0, 0.58, 1), all  0.5s cubic-bezier(0.42, 0, 0.58, 1) 1s;
  transition: all  0.5s cubic-bezier(0.42, 0, 0.58, 1), all  0.5s cubic-bezier(0.42, 0, 0.58, 1) 1s;
}
.sheet-box:hover > .sheet-inbox{
    display:block;
    opacity:1;
    overflow:auto;
     -webkit-transition: all 1s cubic-bezier(0.42, 0, 0.58, 1), all 1s cubic-bezier(0.42, 0, 0.58, 1) 1s;
  -moz-transition: all 1s cubic-bezier(0.42, 0, 0.58, 1), all 1s cubic-bezier(0.42, 0, 0.58, 1) 1s;
  -o-transition: all 1s cubic-bezier(0.42, 0, 0.58, 1), all 1s cubic-bezier(0.42, 0, 0.58, 1) 1s;
  transition: all 1s cubic-bezier(0.42, 0, 0.58, 1), all 1s cubic-bezier(0.42, 0, 0.58, 1) 1s;
 
  -webkit-transform-origin: 50% 0 0;
    transform-origin: 50% 0 0;
   -webkit-transform: scaleY(1);
    transform: scaleY(1);
   
   
}


.sheet-rolltemplate-aptitude table {
    text-align: center;
    width: 100%;
    background: url('http://2.bp.blogspot.com/-OQxY8bahwck/TqBtKZ3kBKI/AAAAAAAABNc/SbCmJTv2ZXg/s1600/grunge+frame+free+2.png');
    background-size:100% 100%;
    border: 4px ridge #999999;
    color: black;
    font-size: 1em;
    font-family: "Franklin Gothic Medium";
    box-shadow: -5px -5px 5px black;
    padding: 30px;
    margin: 10px;
}
.sheet-rolltemplate-aptitude th {
    font-family:"Franklin Gothic Medium";
    padding: 4px;
    color: white;
    line-height: 1.6em;
    font-size: 1.4em;
    width: 100%;
    height: 100%;
    border-spacing: 0;
    text-shadow: 0px 0px 5px black, 0px 0px 5px black, 0px 0px 5px black;
   
   
    box-shadow: inset 5px 0px 20px 0px black, inset -5px 0px 20px 0px black;
}

.sheet-rolltemplate-aptitude .sheet-tcat {
    font-weight: bold;
}

.sheet-rolltemplate-aptitude td {
    padding: 10px;
}

.sheet-rolltemplate-aptitude .inlinerollresult  {
    display: inline-block;
    min-width: 1.5em;
    text-align: center;
    border: 2px solid #89E799;
    background:transparent;
}



.sheet-rolltemplate-aptitude .inlinerollresult.importantroll {
    border: 2px solid #4A57ED;
}



.sheet-rolltemplate-relance table {
    text-align: center;
    width: 100%;
    background: url('http://2.bp.blogspot.com/-OQxY8bahwck/TqBtKZ3kBKI/AAAAAAAABNc/SbCmJTv2ZXg/s1600/grunge+frame+free+2.png');
    background-size:100% 100%;
    border: 4px ridge #999999;
    color: black;
    font-size: 1em;
    font-family: "Franklin Gothic Medium";
    box-shadow: -5px -5px 5px black;
    padding: 30px;
    margin: 10px;
}
.sheet-rolltemplate-relance th {
    font-family:"Franklin Gothic Medium";
    padding: 4px;
    color: white;
    line-height: 1.6em;
    font-size: 1.4em;
    width: 100%;
    height: 100%;
    border-spacing: 0;
    text-shadow: 0px 0px 5px black, 0px 0px 5px black, 0px 0px 5px black;
   
   
    box-shadow: inset 5px 0px 20px 0px black, inset -5px 0px 20px 0px black;
}

.sheet-rolltemplate-relance .sheet-tcat {
    font-weight: bold;
}

.sheet-rolltemplate-relance td {
    padding: 10px;
}

.sheet-rolltemplate-relance .inlinerollresult  {
    display: inline-block;
    min-width: 1.5em;
    text-align: center;
    border: 2px solid #89E799;
    background:transparent;
}



.sheet-rolltemplate-relance .inlinerollresult.importantroll {
    border: 2px solid #4A57ED;
}





.sheet-rolltemplate-degats table {
    text-align: center;
    width: 100%;
    background: url('http://2.bp.blogspot.com/-OQxY8bahwck/TqBtKZ3kBKI/AAAAAAAABNc/SbCmJTv2ZXg/s1600/grunge+frame+free+2.png');
    background-size:100% 100%;
    border: 4px ridge #999999;
    color: black;
    font-size: 1em;
    font-family: "Franklin Gothic Medium";
    box-shadow: -5px -5px 5px black;
    padding: 30px;
    margin: 10px;
}
.sheet-rolltemplate-degats th {
    font-family:"Franklin Gothic Medium";
    padding: 4px;
    color: white;
    line-height: 1.6em;
    font-size: 1.4em;
    width: 100%;
    height: 100%;
    border-spacing: 0;
    text-shadow: 0px 0px 5px black, 0px 0px 5px black, 0px 0px 5px black;
   
   
    box-shadow: inset 5px 0px 20px 0px black, inset -5px 0px 20px 0px black;
}

.sheet-rolltemplate-degats .sheet-tcat {
    font-weight: bold;
}

.sheet-rolltemplate-relance td {
    padding: 10px;
}

.sheet-rolltemplate-degats .inlinerollresult  {
    display: inline-block;
    min-width: 1.5em;
    text-align: center;
    border: 2px solid #89E799;
    background:transparent;
}



.sheet-rolltemplate-degats .inlinerollresult.importantroll {
    border: 2px solid #4A57ED;
}


si quelqun qui utilise github s'autorrise à le soumettre à roll20 ça me va complétement, je n'utilise pas github mais c'est dommage de ne pas en faire profiter tout le monde.

un aperçu :

Image


Haut
 Profil  
 
MessagePosté: Dim 8 Jan 2017 15:26 
Hors ligne
JudgeDeathien Vengeur
Avatar de l’utilisateur

Inscription: Mar 23 Aoû 2016 13:15
Messages: 176
Date de naissance: 09 Fév 1980
Pour l'avoir pratiquée, elle est vraiment bien visuellement : encarts stylés, cases réactive quand la souris passe dessus.

Hum.... tu prends pas les commandes... :?


Haut
 Profil  
 
MessagePosté: Dim 8 Jan 2017 15:39 
Hors ligne
Zombie Lividunesque Maladroit

Inscription: Mer 30 Déc 2015 11:53
Messages: 133
Date de naissance: 13 Avr 1980
prendre commande ? mmmm ça peut ; mais faut d'abord voir le système de règle, si ça demande des jets de dés originaux et qu'il faille coder un script pour le faire tourner je ne pourrait pas, je ne maitrise vraiment pas les API dans roll20.


Haut
 Profil  
 
MessagePosté: Dim 8 Jan 2017 19:00 
Hors ligne
Djinn Kadessien Tourmenté
Avatar de l’utilisateur

Inscription: Mer 5 Nov 2008 01:00
Messages: 650
Localisation: Limoges/Guéret
Date de naissance: 05 Fév 1972
Super boulot !

Tu devrais te mettre à github et en faire profiter tout le monde, celle-là et les prochaines :)

_________________
Roll20 - WiP Roll20 - G+ - Numenéra - Obsidian Portal -


Haut
 Profil  
 
MessagePosté: Ven 13 Jan 2017 11:23 
Hors ligne
Keerianiste Radical
Avatar de l’utilisateur

Inscription: Dim 6 Fév 2011 01:00
Messages: 936
Localisation: Toulouse
Date de naissance: 07 Juin 1976
Superbe ! Et en plus Yno te fait de la pub sur sa page Facebook ;)

_________________
Blog : Génie ... sans frotter
L'intelligence, c'est comme les jambes ... Quand on en a trop, on se fait des croche-pattes tout seul
----------------------------------------------
Campagnes:
MJ Star Wars Aux Confins de l'Empire
MJ Delta Green

En préparation:
Degenesis


Haut
 Profil  
 
Afficher les messages postés depuis:  Trier par  
Poster un nouveau sujet Répondre au sujet  [ 5 messages ] 

Heures au format UTC + 1 heure [ Heure d’été ]


Qui est en ligne

Utilisateurs parcourant ce forum: Zakarik et 3 invités


Vous ne pouvez pas poster de nouveaux sujets
Vous ne pouvez pas répondre aux sujets
Vous ne pouvez pas éditer vos messages
Vous ne pouvez pas supprimer vos messages

Rechercher:
Aller à:  
Powered by phpBB® Forum Software © phpBB Group
Traduction par: phpBB-fr.com