fiche de perso Channel Fear - système corpusmechanica

Répondre
rwan
Manticore
Messages : 186
Enregistré le : mer. 30 déc. 2015 11:53
Date de naissance : 13 avr. 1980

fiche de perso Channel Fear - système corpusmechanica

Message par rwan » dim. 8 janv. 2017 14:01

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 :

Code : Tout sélectionner

<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 :

Code : Tout sélectionner

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

Avatar du membre
dark_shape
Licorne
Messages : 216
Enregistré le : mar. 23 août 2016 13:15
Date de naissance : 09 févr. 1980

Re: fiche de perso Channel Fear - système corpusmechanica

Message par dark_shape » dim. 8 janv. 2017 15:26

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... :?
Image

rwan
Manticore
Messages : 186
Enregistré le : mer. 30 déc. 2015 11:53
Date de naissance : 13 avr. 1980

Re: fiche de perso Channel Fear - système corpusmechanica

Message par rwan » dim. 8 janv. 2017 15:39

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.

Avatar du membre
Natha
Efrit Gala-Naftalinien Curieux
Messages : 690
Enregistré le : mer. 5 nov. 2008 01:00
Date de naissance : 05 févr. 1972
Localisation : Limoges/Guéret

Re: fiche de perso Channel Fear - système corpusmechanica

Message par Natha » dim. 8 janv. 2017 19:00

Super boulot !

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

Avatar du membre
Hrunh
Markjaniste Dément
Messages : 1034
Enregistré le : dim. 6 févr. 2011 01:00
Date de naissance : 07 juin 1976
Localisation : Toulouse

Re: fiche de perso Channel Fear - système corpusmechanica

Message par Hrunh » ven. 13 janv. 2017 11:23

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

Répondre

Retourner vers « Roll20 »

Qui est en ligne

Utilisateurs parcourant ce forum : Baidu [Spider] et 2 invités