mirror of
https://github.com/Nighthawk42/roll20-character-sheets.git
synced 2026-08-30 11:42:29 +00:00
NathaTerrien
8e312bf5e8
New Sheet (french) for the game "Le Métal Froid des Anneaux de Cerbère" (http://legrumph.org/Terrier/?Chibi/Le-metal-froid-des-anneaux-de-cerbere)
704 lines
15 KiB
CSS
704 lines
15 KiB
CSS
/* Couleurs
|
|
noir
|
|
gris / grey #808080
|
|
gris moyen #505050
|
|
gris hérité #404040
|
|
bleu nuit : 25,25,112 / MidnightBlue / #191970
|
|
rouge carmin : #960018
|
|
vert : #007600
|
|
*/
|
|
div,
|
|
button,
|
|
textarea,
|
|
span,
|
|
input,
|
|
select,
|
|
img{
|
|
box-sizing: border-box;
|
|
}
|
|
img{
|
|
vertical-align: middle;
|
|
}
|
|
div{
|
|
margin: 0px;
|
|
padding: 0px;
|
|
background-color: transparent;
|
|
font-family: 'Contrail One';
|
|
text-align: left;
|
|
vertical-align: top;
|
|
}
|
|
span{
|
|
display: inline-block;
|
|
font-family: 'Contrail One';
|
|
vertical-align: middle;
|
|
}
|
|
div.sheet-bgmain{
|
|
background-color: white;
|
|
position: relative;
|
|
width: 914px;
|
|
max-width: 914px;
|
|
font-family: cursive;
|
|
}
|
|
div.sheet-sepall{
|
|
background-image: url("https://raw.githubusercontent.com/NathaTerrien/roll20-wip/master/Cerbere/cerbere_sep.png");
|
|
width: 905px;
|
|
min-height:82px;
|
|
background-repeat:no-repeat;
|
|
background-position:center center;
|
|
background-size: contain;
|
|
opacity: 0.1;
|
|
}
|
|
div.sheet-mylig{
|
|
text-align: center;
|
|
white-space: nowrap;
|
|
width: 100%;
|
|
display: block;
|
|
}
|
|
div.sheet-alig{
|
|
position: relative;
|
|
display: block;
|
|
vertical-align: middle;
|
|
clear: both;
|
|
}
|
|
div.sheet-mycol{
|
|
display: inline-block;
|
|
min-width: 300px;
|
|
vertical-align: top;
|
|
white-space: normal;
|
|
}
|
|
.sheet-decal{
|
|
margin-left: 20px;
|
|
}
|
|
.sheet-maxcol{
|
|
max-width: 300px;
|
|
}
|
|
.sheet-maxht{
|
|
height: 300px;
|
|
max-height: 400px;
|
|
overflow-y: auto;
|
|
text-align: justify;
|
|
font-family: 'Verdana';
|
|
font-size: 11px;
|
|
white-space: pre-line;
|
|
border-bottom: 2px dotted gray;
|
|
margin-bottom: 4px;
|
|
padding: 2px;
|
|
line-height: 15px;
|
|
}
|
|
.sheet-sepbas{
|
|
padding-bottom: 30px;
|
|
background-image: url("https://raw.githubusercontent.com/NathaTerrien/roll20-wip/master/Cerbere/cerbere_sep_grey.png");
|
|
background-repeat:no-repeat;
|
|
background-position:center bottom;
|
|
background-size: 295px;
|
|
}
|
|
.sheet-centrer{
|
|
text-align: center;
|
|
}
|
|
.sheet-inlblk{
|
|
display: inline-block;
|
|
}
|
|
.sheet-brdleft{
|
|
border-left: 2px dotted grey;
|
|
padding-left: 2px;
|
|
}
|
|
.sheet-brdright{
|
|
border-right: 2px dotted grey;
|
|
padding-right: 2px;
|
|
}
|
|
.sheet-titre{
|
|
display: block;
|
|
color: black;
|
|
font-weight: bold;
|
|
font-size: 18px;
|
|
line-height: 40px;
|
|
text-transform: uppercase;
|
|
text-align: center;
|
|
}
|
|
.sheet-titre1{
|
|
color: black;
|
|
font-weight: bold;
|
|
font-size: 15px;
|
|
text-transform: uppercase;
|
|
}
|
|
.sheet-titre2{
|
|
color: #505050;
|
|
font-weight: bold;
|
|
font-size: 13px;
|
|
text-transform: uppercase;
|
|
}
|
|
.sheet-fleft{
|
|
vertical-align: middle;
|
|
display: inline-block;
|
|
}
|
|
.sheet-fright{
|
|
vertical-align: middle;
|
|
display: inline-block;
|
|
float: right;
|
|
}
|
|
.sheet-fcenter{
|
|
vertical-align: middle;
|
|
display: inline-block;
|
|
position: absolute;
|
|
left:120px;
|
|
opacity: 0.7;
|
|
}
|
|
/* AUT EXPAND */
|
|
.sheet-autoex {
|
|
position: relative;
|
|
cursor: text;
|
|
line-height: 20px;
|
|
min-height: 22px;
|
|
margin-bottom: 5px;
|
|
}
|
|
.sheet-autoex span {
|
|
visibility: hidden;
|
|
white-space: pre-wrap;
|
|
display: block;
|
|
line-height: inherit;
|
|
font-family: 'Shadows Into Light';
|
|
font-size: 18px;
|
|
letter-spacing: 0.03em;
|
|
}
|
|
.sheet-autoex textarea {
|
|
position: absolute;
|
|
z-index: 1;
|
|
top: 0;
|
|
left: 0;
|
|
margin: 0;
|
|
resize: none;
|
|
height: 100%;
|
|
width: 100%;
|
|
display: block;
|
|
box-sizing: border-box;
|
|
background: transparent;
|
|
border: none;
|
|
border-radius: 0;
|
|
box-shadow: none;
|
|
letter-spacing: inherit;
|
|
padding: inherit;
|
|
text-align: inherit;
|
|
text-transform: inherit;
|
|
line-height: inherit;
|
|
padding: 0px 2px 2px 2px;
|
|
overflow: hidden;
|
|
white-space: pre-wrap;
|
|
|
|
}
|
|
/* FIN AUTO EXPAND */
|
|
input, textarea{
|
|
display: inline-block;
|
|
padding: 0px;
|
|
margin: 0px;
|
|
border: none;
|
|
box-shadow: none;
|
|
resize:none;
|
|
color: #191970;
|
|
border-radius: 0;
|
|
font-family: 'Shadows Into Light';
|
|
font-size: 18px;
|
|
letter-spacing: 0.03em;
|
|
transition: 0.2s;
|
|
}
|
|
input{
|
|
background-color: transparent;
|
|
}
|
|
input + span{
|
|
transition: 0.2s;
|
|
}
|
|
textarea{
|
|
background-color: transparent;
|
|
padding: 1px 2px 2px 2px;
|
|
overflow-y: auto;
|
|
}
|
|
input:focus, input:hover, textarea:focus, textarea:hover{
|
|
box-shadow: inset 0px 1px 1px rgba(25,25,112,0.01),0 0 6px rgba(25,25,112,0.5);
|
|
background-color: rgba(25,25,112,0.05);
|
|
}
|
|
input[type="text"]{
|
|
padding: 0px 0px 0px 2px;
|
|
height: 22px;
|
|
}
|
|
input[type="text"].sheet-medinpt{
|
|
width: 110px;
|
|
}
|
|
input[type="number"]{
|
|
text-align: right;
|
|
padding: 0px 2px 0px 0px;
|
|
}
|
|
/* BIG BULLES */
|
|
input[type="radio"].sheet-bigbulles {
|
|
position: absolute;
|
|
opacity: 0;
|
|
width: 24px;
|
|
height: 24px;
|
|
cursor: pointer;
|
|
z-index: 10;
|
|
margin-top: 5px;
|
|
}
|
|
input[type="radio"].sheet-bigbulles + span::before {
|
|
line-height: 32px;
|
|
text-align: center;
|
|
display: inline-block;
|
|
content: "⚫";
|
|
width: 24px;
|
|
height: 24px;
|
|
font-size: 24px;
|
|
text-indent: -2px;
|
|
}
|
|
input[type="radio"].sheet-bigbulles:checked ~ input[type="radio"] + span::before {
|
|
content: "⚪";
|
|
}
|
|
input[type="radio"].sheet-bigbulles.sheet-zero + span::before{
|
|
opacity: 0.25;
|
|
content: "⛌";
|
|
}
|
|
input[type="radio"].sheet-bigbulles.sheet-zero:checked + span::before {
|
|
opacity: 0.5;
|
|
}
|
|
input[type="radio"].sheet-bigbulles.sheet-zero:hover + span::before {
|
|
opacity: 1;
|
|
}
|
|
/* FIN BIG BULLES */
|
|
/* BULLES */
|
|
input[type="radio"].sheet-bulles {
|
|
position: absolute;
|
|
opacity: 0;
|
|
width: 12px;
|
|
height: 12px;
|
|
cursor: pointer;
|
|
z-index: 10;
|
|
margin-top: 5px;
|
|
}
|
|
input[type="radio"].sheet-bulles + span::before {
|
|
line-height: 13px;
|
|
text-align: center;
|
|
text-indent: -2px;
|
|
display: inline-block;
|
|
content: "⚫";
|
|
width: 12px;
|
|
height: 12px;
|
|
font-size: 12px;
|
|
text-indent: -1px;
|
|
}
|
|
input[type="radio"].sheet-bulles:checked ~ input[type="radio"] + span::before {
|
|
content: "⚪";
|
|
}
|
|
input[type="radio"].sheet-bulles.sheet-zero + span::before{
|
|
opacity: 0.25;
|
|
content: "⛌";
|
|
}
|
|
input[type="radio"].sheet-bulles.sheet-zero:checked + span::before {
|
|
opacity: 0.5;
|
|
}
|
|
input[type="radio"].sheet-bulles.sheet-zero:hover + span::before {
|
|
opacity: 1;
|
|
}
|
|
/* FIN BIG BULLES */
|
|
/* BIG CHECK */
|
|
input[type="checkbox"].sheet-bigchk {
|
|
position: absolute;
|
|
opacity: 0;
|
|
width: 26px;
|
|
height: 26px;
|
|
cursor: pointer;
|
|
z-index: 10;
|
|
margin-top: 5px;
|
|
}
|
|
input[type="checkbox"].sheet-bigchk + span::before {
|
|
line-height: 37px;
|
|
text-align: center;
|
|
display: inline-block;
|
|
content: "☐";
|
|
width: 30px;
|
|
height: 30px;
|
|
font-size: 30px;
|
|
text-indent: -2px;
|
|
}
|
|
input[type="checkbox"].sheet-bigchk:checked + span::before {
|
|
content: "☑";
|
|
}
|
|
/* FIN BIG CHECK */
|
|
/* BIG CHKCOMP */
|
|
input[type="checkbox"].sheet-chkcomp {
|
|
opacity: 0;
|
|
width: 20px;
|
|
height: 20px;
|
|
cursor: pointer;
|
|
z-index: 10;
|
|
margin-top: 5px;
|
|
}
|
|
input[type="checkbox"].sheet-chkcomp + span::before {
|
|
content:"";
|
|
text-align: center;
|
|
display: inline-block;
|
|
width: 14px;
|
|
height: 14px;
|
|
font-size: 14px;
|
|
font-weight: bold;
|
|
color: #191970;
|
|
margin-left: -20px;
|
|
border: 2px solid #404040;
|
|
border-radius: 50%;
|
|
}
|
|
input[type="checkbox"].sheet-chkcomp:checked + span::before {
|
|
content: "✔";
|
|
}
|
|
/* FIN CHKCOMP */
|
|
input[type="number"].sheet-bignum{
|
|
height: 40px;
|
|
width: 50px;
|
|
font-size: 26px;
|
|
font-weight: bold;
|
|
border: 2px solid gray;
|
|
}
|
|
input[type="number"].sheet-mednum{
|
|
height: 30px;
|
|
width: 50px;
|
|
font-size: 20px;
|
|
font-weight: bold;
|
|
}
|
|
input[type="number"].sheet-smlnum{
|
|
height: 20px;
|
|
font-size: 19px;
|
|
width: 40px;
|
|
font-weight: bold;
|
|
}
|
|
.sheet-radtopleft{
|
|
border-radius: 10px 0px 0px 0px;
|
|
}
|
|
.sheet-radtopright{
|
|
border-radius: 0px 10px 0px 0px;
|
|
}
|
|
.sheet-radbotright{
|
|
border-radius: 0px 0px 10px 0px;
|
|
}
|
|
.sheet-radbotleft{
|
|
border-radius: 0px 0px 0px 10px;
|
|
}
|
|
.sheet-brdbracleft{
|
|
border-width: 2px 0px 2px 2px;
|
|
border-radius: 0 50% 50% 0;
|
|
border-color: gray;
|
|
border-style: solid;
|
|
}
|
|
.sheet-brdbracright{
|
|
border-width: 2px 2px 2px 0px;
|
|
border-radius: 50% 0 0 50%;
|
|
border-color: gray;
|
|
border-style: solid;
|
|
}
|
|
/* === fieldset BOUTONS === */
|
|
div.repcontrol{
|
|
display: inline-block;
|
|
width: 100%;
|
|
}
|
|
.repcontainer.editmode .repitem .itemcontrol{
|
|
z-index: 10;
|
|
}
|
|
.repcontrol_move{
|
|
height: 11px;
|
|
line-height: 11px;
|
|
margin-top: 4px;
|
|
}
|
|
.repcontrol_del {
|
|
height: 22px;
|
|
line-height: 12px;
|
|
margin-top: 4px;
|
|
width: 30px;
|
|
}
|
|
.repcontrol_add, .repcontrol_edit {
|
|
color: transparent;
|
|
box-shadow: none;
|
|
background: transparent;
|
|
border-color: transparent;
|
|
text-shadow:none;
|
|
width: 100px;
|
|
}
|
|
.repcontrol_add:focus, .repcontrol_edit:focus {
|
|
outline: none;
|
|
}
|
|
.repcontrol .repcontrol_edit:after {
|
|
content: 'y';
|
|
visibility: visible;
|
|
font-family: pictos;
|
|
border: 1px solid transparent;
|
|
border-radius: 2px;
|
|
font-size: 20px;
|
|
height: 20px;
|
|
width: 20px;
|
|
padding: 2px 4px 2px 4px;
|
|
color: black;
|
|
}
|
|
.editmode ~ .repcontrol .repcontrol_edit:after {
|
|
content: '2';
|
|
}
|
|
.repcontrol .repcontrol_add:before {
|
|
content: '+';
|
|
visibility: visible;
|
|
font-family: pictos;
|
|
border: 1px solid transparent;
|
|
border-radius: 2px;
|
|
font-size: 20px;
|
|
height: 20px;
|
|
width: 20px;
|
|
padding: 2px 4px 2px 4px;
|
|
color: black;
|
|
}
|
|
.repcontrol .repcontrol_edit:hover:after,
|
|
.repcontrol .repcontrol_add:hover:before
|
|
{
|
|
box-shadow: 1px 1px 4px 2px rgba(35,31,32,0.8);
|
|
border-color: #231F20;
|
|
color: #231F20;
|
|
}
|
|
.repcontrol_add:focus:before, .repcontrol_edit:focus:after {
|
|
color: #231F20;
|
|
}
|
|
/* ===== ONGLETS TABS ===== */
|
|
div.sheet-tab1,
|
|
div.sheet-tab2{
|
|
display: none;
|
|
text-align: center;
|
|
width: 100%;
|
|
border: 1px solid gray;
|
|
padding: 2px;
|
|
background-image: url("https://raw.githubusercontent.com/NathaTerrien/roll20-wip/master/Cerbere/cerbere_symbol_grey.png");
|
|
background-repeat:no-repeat;
|
|
background-position:center center;
|
|
background-size: 500px 500px;
|
|
}
|
|
input.sheet-tab1:checked ~ div.sheet-tab1{
|
|
display: block;
|
|
}
|
|
input.sheet-tab2:checked ~ div.sheet-tab2{
|
|
display: block;
|
|
}
|
|
input.sheet-tab1,
|
|
input.sheet-tab2{
|
|
margin: 0;
|
|
margin-top: -4px;
|
|
margin-bottom: -4px;
|
|
padding: 0;
|
|
display: inline-block;
|
|
opacity: 0;
|
|
width: 110px;
|
|
height: 20px;
|
|
z-index: 2;
|
|
}
|
|
input.sheet-tab1 + span,
|
|
input.sheet-tab2 + span{
|
|
color: #666666;
|
|
background-color: #BBBBBB;
|
|
font-size:15px;
|
|
text-align:center;
|
|
display: inline-block;
|
|
width: 110px;
|
|
height: 20px;
|
|
margin: 0;
|
|
margin-left: -110px;
|
|
margin-right: -5px;
|
|
padding:0;
|
|
margin-bottom: -1px;
|
|
font-size: 0.9em;
|
|
text-transform: uppercase;
|
|
border-style: solid;
|
|
border-width: 1px;
|
|
border-left-color: #909090;
|
|
border-top-color: #909090;
|
|
border-right-color: #909090;
|
|
border-bottom-color: gray;
|
|
border-top-left-radius: 6px;
|
|
border-top-right-radius: 6px;
|
|
z-index: 1;
|
|
}
|
|
input.sheet-tab1:checked + span,
|
|
input.sheet-tab2:checked + span{
|
|
font-weight: bold;
|
|
color: black;
|
|
background-color: white;
|
|
border-left-color: gray;
|
|
border-top-color: gray;
|
|
border-right-color: gray;
|
|
border-bottom-color: white;
|
|
}
|
|
/* ===== BOUTONS ===== */
|
|
button[type="roll"].sheet-myrol{
|
|
text-align: center;
|
|
text-decoration: none;
|
|
background:none;
|
|
background-image:none;
|
|
border: none;
|
|
box-shadow: none;
|
|
text-shadow: none;
|
|
padding: 0px 0px 0px 0px;
|
|
margin: 0px 0px 0px 0px;
|
|
text-align: left;
|
|
font-family: 'Contrail One';
|
|
vertical-align: middle;
|
|
transition: 0.3s;
|
|
}
|
|
button[type="roll"].sheet-myrol:hover{
|
|
text-shadow: 0px 0px 2px #FB667E;
|
|
}
|
|
button[type="roll"].sheet-myrol:before{
|
|
content: none;
|
|
}
|
|
button[type="roll"].sheet-myrol.sheet-dotright:after{
|
|
content: '•';
|
|
color: #960018;
|
|
font-size: 14px;
|
|
padding-left: 2px;
|
|
}
|
|
button[type="roll"].sheet-myrol.sheet-dotleft:before{
|
|
content: '•';
|
|
color: #960018;
|
|
font-size: 14px;
|
|
padding-right: 2px;
|
|
}
|
|
button[type="roll"].sheet-myrol.sheet-titre1{
|
|
color: black;
|
|
font-weight: bold;
|
|
font-size: 15px;
|
|
text-transform: uppercase;
|
|
}
|
|
button[type="roll"].sheet-myrol.sheet-titre2{
|
|
color: #505050;
|
|
font-weight: bold;
|
|
font-size: 13px;
|
|
text-transform: uppercase;
|
|
}
|
|
button[type="roll"].sheet-myrol.sheet-titre1:hover,
|
|
button[type="roll"].sheet-myrol.sheet-titre2:hover{
|
|
color: #960018;
|
|
}
|
|
/* ===== TEMPLATE ===== */
|
|
.sheet-rolltemplate-tmpl div{
|
|
vertical-align: middle;
|
|
border: none;
|
|
box-sizing: border-box;
|
|
}
|
|
.sheet-rolltemplate-tmpl div.sheet-tplmain{
|
|
display: inline-block;
|
|
background-color: white;
|
|
border-width: 1px;
|
|
border-style: solid;
|
|
border-color: #404040;
|
|
border-radius: 0px 12px 12px 0px;
|
|
width: fit-content;
|
|
max-width: 260px;
|
|
}
|
|
.sheet-rolltemplate-tmpl div.sheet-mytab{
|
|
display: table;
|
|
border-collapse: collapse;
|
|
}
|
|
.sheet-rolltemplate-tmpl div.sheet-jet{
|
|
background-color: transparent;
|
|
padding: 6px;
|
|
display: table-cell;
|
|
font-family: 'Shadows Into Light';
|
|
font-size: large;
|
|
font-weight: bold;
|
|
text-align: center;
|
|
vertical-align: middle;
|
|
white-space: nowrap;
|
|
}
|
|
.sheet-rolltemplate-tmpl div.sheet-jet.sheet-brut{
|
|
color: #808080;
|
|
font-size: 12px;
|
|
font-family: 'Candal';
|
|
font-weight: normal;
|
|
}
|
|
.sheet-rolltemplate-tmpl div.sheet-jet.sheet-des{
|
|
color: #960018;
|
|
}
|
|
.sheet-rolltemplate-tmpl div.sheet-jet.sheet-av{
|
|
color: #007600;
|
|
}
|
|
.sheet-rolltemplate-tmpl div.sheet-desc{
|
|
text-align: left;
|
|
font-family: 'Verdana';
|
|
font-size: inherit;
|
|
max-height: 180px;
|
|
overflow-y: auto;
|
|
background-color: transparent;
|
|
color: #505050;
|
|
}
|
|
.sheet-rolltemplate-tmpl div.sheet-brdbot{
|
|
display: table-row;
|
|
border-bottom: 1px dotted #404040;
|
|
}
|
|
.sheet-rolltemplate-tmpl div.sheet-brdbot:last-child{
|
|
border-bottom: none;
|
|
}
|
|
.sheet-rolltemplate-tmpl .sheet-head{
|
|
background-color: #404040;
|
|
padding: 4px;
|
|
}
|
|
.sheet-rolltemplate-tmpl .sheet-head:first-child{
|
|
border-radius: 0px 12px 0px 0px;
|
|
}
|
|
.sheet-rolltemplate-tmpl .sheet-head:last-child{
|
|
border-radius: 0px 0px 12px 0px;
|
|
}
|
|
.sheet-rolltemplate-tmpl .sheet-jetype{
|
|
display: block;
|
|
color: #CCC;
|
|
font-family: 'Verdana';
|
|
font-style: italic;
|
|
padding: 0px;
|
|
}
|
|
.sheet-rolltemplate-tmpl .sheet-jetnom{
|
|
display: block;
|
|
color: white;
|
|
font-size: 15px;
|
|
font-family: 'Contrail One';
|
|
text-transform: uppercase;
|
|
padding: 0px;
|
|
}
|
|
.sheet-rolltemplate-tmpl .sheet-pc{
|
|
display: block;
|
|
color: white;
|
|
font-family: 'Shadows Into Light';
|
|
font-size: 18px;
|
|
letter-spacing: 0.03em;
|
|
padding: 0px;
|
|
}
|
|
.sheet-rolltemplate-tmpl .sheet-10dice{
|
|
font-family: 'dicefontd10';
|
|
font-size: 200%;
|
|
font-weight: normal;
|
|
}
|
|
.sheet-rolltemplate-tmpl .sheet-res{
|
|
font-size: 18px;
|
|
font-family: 'Candal';
|
|
}
|
|
.sheet-rolltemplate-tmpl .inlinerollresult {
|
|
background-color: transparent;
|
|
color: black;
|
|
border: none;
|
|
padding: 0px 0px;
|
|
font-weight: bold;
|
|
cursor: help;
|
|
font-size: 18px;
|
|
font-family: 'Candal';
|
|
}
|
|
.sheet-rolltemplate-tmpl .sheet-success{
|
|
color: black;;
|
|
}
|
|
.sheet-rolltemplate-tmpl .sheet-failure{
|
|
color: black;
|
|
}
|
|
.sheet-rolltemplate-tmpl .inlinerollresult.fullcrit{
|
|
border: none;
|
|
color: black;
|
|
}
|
|
.sheet-rolltemplate-tmpl .inlinerollresult.importantroll{
|
|
border: none;
|
|
color: black;
|
|
}
|
|
.sheet-rolltemplate-tmpl .inlinerollresult.fullfail{
|
|
border: none;
|
|
color: black;
|
|
}
|