Pour ceux que ca interesse, voici un premier jet de la fiche pour ROLL20. Si des heritiers en contact avec mnemos veulent utiliser ca pour faire la fiche officielle, vous avez mon feu vert
Code : Tout sélectionner
div,
button,
textarea,
span,
input,
select{
box-sizing: border-box;
}
div{
margin: none;
padding: none;
background-color: transparent;
/* border: 1px solid red; */
}
div.sheet-bgmain{
/* width: 900px;
max-width: 900px;
height: 1165px;
max-height: 1165px;*/
text-align: center;
background-color : white;
background-image: url('https://i.imgur.com/An4N7eZ.jpg?1');
background-repeat:no-repeat;
background-position:top left;
background-size: auto;
position: relative;
}
div.sheet-abs{
position: absolute;
vertical-align: bottom;
display: inline-block;
}
input, textarea {
background-color: transparent;
display: inline-block;
padding: none;
margin: none;
font-family: "Times New Roman", Times, serif;
font-size: 16px;
border: none;
box-shadow: none;
resize:none;
color: #257ABA;
z-index: 2;
border-radius: 0;
}
input[type="text"].sheet-Meta{
font-size: 10px;
height:12px;
}
/* textarea{
padding: 1px 2px 0px 2px;
border-left: 0px dotted black;
border-right: 0px dotted black;
border-bottom: 0px dotted black;
border-radius: 0px;
height:75px;
}*/
input[type="text"]{
padding: 0px 0px 0px 2px;
}
input[type='number']::-webkit-inner-spin-button,
input[type='number']::-webkit-outer-spin-button {
-webkit-appearance: none;
margin: 0;
}
input[type="text"].sheet-identite{
width: 264px;
height: 49px;
}
input[type='number'].sheet-attribut{
width: 30px;
height: 30px;
text-align:center;
}
button[type="roll"].sheet-bouttonnoir {
box-sizing: border-box;
text-align: center !important;
vertical-align: middle !important;
padding: 0 0 !important;
color: white;
border-width: 1px;
border-style: solid;
border-color: transparent;
background: transparent;
box-shadow: none;
text-shadow: none;
-webkit-box-shadow: none;
}
button[type="roll"].sheet-bouttonnoir:before{
font-family: "dicefontd12";
content: 'F';
font-size: 26px;
color:#13536E; /* #a7aaaf;*/
}
button[type="roll"].sheet-bouttonnoir:hover:before{
color: black;
content: 'F';
}
/* TABS */
div.sheet-tab-content { display: none; }
input.sheet-tab1:checked ~ div.sheet-tab1,
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;
}
input.sheet-tab
{
width: 150px;
height: 20px;
position: relative;
top: 0px;
left: 5px;
margin: -1.5px;
margin-bottom: 5px;
cursor: pointer;
z-index: 1;
opacity: 0;
}
input.sheet-tab + span::before
{
content:attr(title);
border: solid 1px #a8a8a8;
border-bottom-color: black;
text-align: center;
display: inline-block;
background: #fff;
background: -moz-linear-gradient(to top, #c8c8c8, #fff, #c8c8c8);
background: -webkit-linear-gradient(to top, #c8c8c8, #fff, #c8c8c8);
background: -ms-linear-gradient(to top, #c8c8c8, #fff, #c8c8c8);
background: -o-linear-gradient(to top, #c8c8c8, #fff, #c8c8c8);
background: linear-gradient(to top, #c8c8c8, #fff, #c8c8c8);
width: 150px;
height: 20px;
font-size: 18px;
position: absolute;
top: 70px;
left: 30px;
}
input.sheet-tab:checked + span::before
{
background: #dcdcdc;
background: -moz-linear-gradient(to top, #fcfcfc, #dcdcdc, #fcfcfc);
background: -webkit-linear-gradient(to top, #fcfcfc, #dcdcdc, #fcfcfc);
background: -ms-linear-gradient(to top, #fcfcfc, #dcdcdc, #fcfcfc);
background: -o-linear-gradient(to top, #fcfcfc, #dcdcdc, #fcfcfc);
background: linear-gradient(to top, #fcfcfc, #dcdcdc, #fcfcfc);
border-bottom-color: #fff;
}
input.sheet-tab:not(:first-child) + span::before
{
border-left: none;
}
input.sheet-tab2 + span::before
{
left: 180px;
background: #fff;
background: -moz-linear-gradient(to top, #c8c8c8, #fff, #c8c8c8);
background: -webkit-linear-gradient(to top, #c8c8c8, #fff, #c8c8c8);
background: -ms-linear-gradient(to top, #c8c8c8, #fff, #c8c8c8);
background: -o-linear-gradient(to top, #c8c8c8, #fff, #c8c8c8);
background: linear-gradient(to top, #c8c8c8, #fff, #c8c8c8);
}
input.sheet-tab3 + span::before
{
left: 330px;
background: #fff;
background: -moz-linear-gradient(to top, #c8c8c8, #fff, #c8c8c8);
background: -webkit-linear-gradient(to top, #c8c8c8, #fff, #c8c8c8);
background: -ms-linear-gradient(to top, #c8c8c8, #fff, #c8c8c8);
background: -o-linear-gradient(to top, #c8c8c8, #fff, #c8c8c8);
background: linear-gradient(to top, #c8c8c8, #fff, #c8c8c8);
}
input.sheet-tab4 + span::before
{
left: 480px;
background: #fff;
background: -moz-linear-gradient(to top, #c8c8c8, #fff, #c8c8c8);
background: -webkit-linear-gradient(to top, #c8c8c8, #fff, #c8c8c8);
background: -ms-linear-gradient(to top, #c8c8c8, #fff, #c8c8c8);
background: -o-linear-gradient(to top, #c8c8c8, #fff, #c8c8c8);
background: linear-gradient(to top, #c8c8c8, #fff, #c8c8c8);
}
input.sheet-tab5 + span::before
{
left: 630px;
background: #fff;
background: -moz-linear-gradient(to top, #c8c8c8, #fff, #c8c8c8);
background: -webkit-linear-gradient(to top, #c8c8c8, #fff, #c8c8c8);
background: -ms-linear-gradient(to top, #c8c8c8, #fff, #c8c8c8);
background: -o-linear-gradient(to top, #c8c8c8, #fff, #c8c8c8);
background: linear-gradient(to top, #c8c8c8, #fff, #c8c8c8);
}
div.sheet-tab-content
{
border: 1px solid #a8a8a8;
border-top-color: #000;
width: 900px;
max-width: 900px;
height: 1165px;
max-height: 1165px;
}
/*Fin de tabs*/
div.sheet-entete{
width: 1100px;
max-width: 1100px;
text-align: center;
background-color : white;
background-repeat:no-repeat;
background-position:top left;
background-size: auto;
position: relative;
}
div.sheet-domaines{
height: 79px;
max-height: 79px;
background-image: url('http://i.imgur.com/mOukz05.png');
}
div.sheet-langue{
height: 79px;
max-height: 79px;
background-image: url('http://i.imgur.com/HoI1VLL.png');
}
div.sheet-lignes{
height: 28px;
max-height: 28px;
background-image: url('http://i.imgur.com/ieC5z9S.png');
}
div.sheet-ressources{
height: 275px;
max-height: 275px;
background-image: url('http://i.imgur.com/utepUqy.png');
}
div.sheet-possessions{
height: 79px;
max-height: 79px;
background-image: url('http://i.imgur.com/1veWPTS.png');
}
div.sheet-lumiere{
height: 79px;
max-height: 79px;
background-image: url('http://i.imgur.com/P2HgzkF.png');
}
div.sheet-tenebres{
height: 79px;
max-height: 79px;
background-image: url('http://i.imgur.com/KneP3Mx.png');
}
div.sheet-auras{
height: 79px;
max-height: 79px;
background-image: url('http://i.imgur.com/xH8suGg.png');
}
input[type="text"].sheet-dom{
width: 200px;
height: 49px;
text-align:center;
}
input[type="checkbox"].sheet-vie{
width: 40px;
height: 40px;
text-align:center;
}
.sheet-karma{
width:30px;
height:30px;
text-align:center;
vertical-align:middle;
}
.sheet-cadre{
border: solid 1px #a8a8a8;
width:680px;
height:30px;
vertical-align:middle;
color:#13536E;
font-size: 18px;
background-color:white;
}
.sheet-construct{
width: 839px;
max-width: 839px;
height: 1100px;
max-height: 1100px;
text-align: center;
background-color : white;
background-repeat:no-repeat;
background-position:top left;
background-size: auto;
position: relative;
background-image: url('https://i.imgur.com/lWwOqIq.jpg?1');
}
.sheet-Magie{
width: 829px;
max-width: 829px;
height: 1100px;
max-height: 1100px;
text-align: center;
background-color : white;
background-repeat:no-repeat;
background-position:top left;
background-size: auto;
position: relative;
background-image: url('https://i.imgur.com/3K5DyF0.jpg?1');
}
.sheet-Kabbale{
width: 829px;
max-width: 829px;
height: 1100px;
max-height: 1100px;
text-align: center;
background-color : white;
background-repeat:no-repeat;
background-position:top left;
background-size: auto;
position: relative;
background-image: url('https://i.imgur.com/og3VTup.jpg?1');
}
.sheet-Formule{
width: 829px;
max-width: 829px;
height: 1100px;
max-height: 1100px;
text-align: center;
background-color : white;
background-repeat:no-repeat;
background-position:top left;
background-size: auto;
position: relative;
background-image: url('https://i.imgur.com/FcHUQG4.jpg?1');
}