roll20-character-sheets/Mordiou/mordiou.css

/* Couleurs
Bleu : #257ABA rgba(37,122,186,1.0)
Jaune : #FFD203  rgba(255,210,3,1.0)
Gris foncé : #949597
*/
.sheet-block{
    display: block;
}
.sheet-libf{
    font-family: 'Shadows Into Light';
    font-style: italic;
    font-weight: bold;
    font-size: 17px;
}
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: 1100px;
    max-width: 1100px;
    height: 778px;
    max-height: 778px;
    text-align: center;
    background-color : white;
    background-image: url('https://raw.githubusercontent.com/NathaTerrien/roll20-wip/master/Mordiou/mordiou_bg_v3.jpg');
    background-repeat:no-repeat;
    background-position:top left;
    background-size: auto;
    position: relative;
}
div.sheet-abs{
    position: absolute;
    vertical-align: bottom;
    display: inline-block;
}
div.sheet-rel{
    position: relative;
    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:focus, input:hover, textarea:focus, textarea:hover{
    box-shadow: inset 0px 1px 1px rgba(255,210,3,0.01),0 0 6px rgba(255,210,3,0.5);
    background-color: rgba(255,210,3,0.2);
}
textarea{
    padding: 1px 2px 0px 2px;
    border-left: 1px dotted black;
    border-right: 1px dotted black;
    border-bottom: 1px dotted black; /* #B1793F; */
    border-radius: 4px;
}
input[type="text"]{
    padding: 0px 0px 0px 2px;
}
input[type="text"].sheet-inptxt1{
    font-weight: bold;
    font-size: 22px;
}
input[type="text"].sheet-aspect{
    width: 442px;
    padding-bottom: 2px;
}
input[type="number"]{
    text-align: right;
}
input[type="number"]:read-only:hover{
    background-color: transparent;
    box-shadow: none;
}
input[type="number"].sheet-numtxt{
    -moz-appearance: textfield;
}
input[type="number"].sheet-numtxt::-webkit-inner-spin-button,
input[type="number"].sheet-numtxt::-webkit-outer-spin-button {
    -webkit-appearance: none;
    appearance: none;
}
input[type="number"].sheet-poigne{
    display: inline-block;
    width: 20px;
    color: black;
    margin: -4px 0px 0px 0px;
    padding: 0px 0px 0px 0px;
    height: 14px;
    text-align: center;
    line-height: 14px;
}
input[type="number"].sheet-poigne:focus,
input[type="number"].sheet-poigne:hover{
    background-color: transparent;
    box-shadow: none;
}
input[type="number"].sheet-numbig1{
    width: 42px;
    height: 42px;
    font-size: 30px;
    text-align: center;
    border-radius: 16px;
}
input[type="number"].sheet-numbig2{
    width: 45px;
    height: 45px;
    font-size: 42px;
    text-align: center;
    border-radius: 21px 0px 0px 21px;
}
input[type="number"].sheet-numbig2.sheet-nummax{
    color: #949597;
    border-radius: 0px 25px 25px 0px;
}
.sheet-asbignb{
    display: inline-block;
    font-size: 50px;
    line-height: 50px;
    font-family: "Times New Roman", Times, serif;
    color: #949597;
    vertical-align: middle;
    padding: 0px 0px 0px 0px;
    margin: 0px 0px 0px 0px;
}
/* ===== Check ===== */
input[type="checkbox"].sheet-gomme{
    width: 20px;
    height: 20px;
    max-width: 20px;
    opacity: 0;
    z-index: 2;
    margin: 0;
}
input[type="checkbox"].sheet-gomme + span{
    display: inline-block;
    text-align: center;
    padding: 0;
    margin: 0;
    margin-left: -20px;
    width: 20px;
    max-width: 20px;
    height: 20px;
    z-index: 1;
    font-family: pictos;
    color: #DDB29B;    font-size: 20px;
    line-height: 20px;
}
input[type="checkbox"].sheet-gomme:hover + span{
    color: #932315;
}
input[type="checkbox"].sheet-gomme:checked + span{
    font-weight: bold;
    color: #932315;
}
input.sheet-smallchk{
    width: 20px;
    max-width: 20px;
    height: 20px;
    opacity: 0.0;
    z-index: 2;
    margin: 0px 0px 0px 0px;
    padding: 0px 0px 0px 0px;
}
input.sheet-smallchk + span{
    display: inline-block;
    text-align: center;
    margin: 0px 0px 0px 0px;
    padding: 0px 0px 0px 0px;
    margin-left: -20px;
    width: 20px;
    max-width: 20px;
    height: 20px;
    z-index: 1;
    font-size: 24px;
    line-height: 20px;
    vertical-align: middle;
    color: transparent;
    font-weight: bold;
    background-color: transparent;
}
input.sheet-smallchk:checked + span{
    color: #257ABA;
    background-color: white;
}
input.sheet-bigchk{
    width: 26px;
    max-width: 26px;
    height: 26px;
    opacity: 0.0;
    z-index: 2;
    margin: 0px 0px 0px 0px;
    padding: 0px 0px 0px 0px;
}
input.sheet-bigchk + span{
    display: inline-block;
    text-align: center;
    margin: 0px 0px 0px 0px;
    padding: 0px 0px 0px 0px;
    margin-left: -26px;
    width: 26px;
    max-width: 26px;
    height: 28px;
    z-index: 1;
    font-size: 30px;
    line-height: 25px;
    vertical-align: middle;
    font-weight: bold;
    color: #257ABA;
    background-color: rgba(255,210,3,0.4);
}
input.sheet-bigchk:checked ~ input.sheet-bigchk + span{
    color : rgba(128,128,128,0.5);
    background-color: transparent;
    font-weight: normal;
}
input.sheet-bigchk:hover + span{
    color : rgba(128,128,128,0.5);
}
input.sheet-bigchk:checked ~ input.sheet-bigchk:hover + span{
    color: #257ABA;
}
input.sheet-bigchk[value="0"]{
    width: 77px;
    max-width: 77px;
}
input.sheet-bigchk[value="0"] + span {
    color : rgba(128,128,128,0.5);
    width: 60px;
    min-width: 60px;
    max-width: 60px;
    height: 28px;
    margin-left: -77px;
    background-color: transparent;
    font-size: 15px;
    vertical-align: top;
    text-align: center;
    border-width: 1px 0px 1px 0px;
    border-style: solid;
    border-color: #257ABA;
}
input.sheet-bigchk[value="0"]:checked + span {
    border: none;
}
input.sheet-bigchk[value="0"]:hover + span {
    border-width: 1px 0px 1px 0px;
    border-style: dashed;
    border-color: #257ABA;
}
/* =====  BUTTONS ===== */
button[type="roll"] {
    box-sizing: border-box;
    text-align: center !important;
    vertical-align: middle !important;
    padding: 0 0 !important;
    color: black;
    border-width: 1px;
    border-style: solid;
    border-color: transparent;
    background: rgba(255,255,255,0.7);
    box-shadow: none;
    text-shadow: none;
    -webkit-box-shadow: none;
}
button[type="roll"].sheet-butd6small:hover{
    color: black;
    border-color: black;
    box-shadow: 1px 1px 4px 2px rgba(141,141,141,0.8);
}
button[type="roll"].sheet-butd6small:before{
    font-family: "dicefontd6";
    content: 'f';
    font-size: 26px;
    color: #727272;
}
button[type="roll"].sheet-butd6small:hover:before{
    color: black;
    content: 'F';
}
button[type="roll"].sheet-butd6smallred:hover{
    color: #932315;
    border-color: #932315;
    box-shadow: 1px 1px 4px 2px rgba(147,35,21,0.8);
}
button[type="roll"].sheet-butd6smallred:before{
    font-family: "dicefontd6";
    content: 'f';
    font-size: 26px;
    color: rgba(147,35,21,0.7);
}
button[type="roll"].sheet-butd6smallred:hover:before{
    color: #932315;
    content: 'F';
}
button[type="roll"].sheet-butd6smallgreen:hover{
    color: #6FB387;
    border-color: #6FB387;
    box-shadow: 1px 1px 4px 2px rgba(111,179,135,0.8);
}
button[type="roll"].sheet-butd6smallgreen:before{
    font-family: "dicefontd6";
    content: 'f';
    font-size: 26px;
    color: rgba(111,179,135,0.7);
}
button[type="roll"].sheet-butd6smallgreen:hover:before{
    color: #6FB387;
    content: 'F';
}
/* TEMPLATE */
.sheet-rolltemplate-tmpl div{
    padding: 2px 4px 2px 4px;
    text-align: center;
}
.sheet-rolltemplate-tmpl div.sheet-tplmain{
    width: 96%;
    border: 1px solid black;
    background-color : white;
    background-image: url('https://raw.githubusercontent.com/NathaTerrien/roll20-wip/master/Mordiou/mordiou_tmpl_v0.png');
    background-repeat: repeat-y;
    background-position:top left;
    background-size: auto;
}
.sheet-rolltemplate-tmpl div.sheet-perso{
    font-family: 'Shadows Into Light';
    font-size: 20px;
    font-style: italic;
    font-weight: bold;
    text-shadow: 0px 0px 10px white;
}
.sheet-rolltemplate-tmpl div.sheet-poignee{
    font-family: "Times New Roman", Times, serif;
    font-size: 14px;
    background-color: rgba(255,255,255,0.7);
}
.sheet-rolltemplate-tmpl div.sheet-qualites{
    font-family: "Times New Roman", Times, serif;
}
.sheet-rolltemplate-tmpl span.sheet-lib{
    font-family: 'Shadows Into Light';
    font-size: 16px;
    font-weight: bold;
    text-shadow: 0px 0px 10px white;
}
.sheet-rolltemplate-tmpl span.sheet-lib.sheet-plus{
    font-size: 20px;
}
.sheet-rolltemplate-tmpl span.sheet-fat{
    font-weight: bold;
    color: #257ABA;
}
.sheet-rolltemplate-tmpl .inlinerollresult,
.sheet-rolltemplate-tmpl .inlinerollresult.fullcrit,
.sheet-rolltemplate-tmpl .inlinerollresult.importantroll,
.sheet-rolltemplate-tmpl .inlinerollresult.fullfail{
    background-color: transparent;
    border: none;
    padding: 0px 0px 0px 0px;
    cursor: help;
    font-family: "Times New Roman", Times, serif;
    font-size: 14px;
    font-weight: normal;
    color: black;
}
.sheet-rolltemplate-tmpl span.sheet-fat .inlinerollresult,
.sheet-rolltemplate-tmpl span.sheet-fat .inlinerollresult.fullcrit,
.sheet-rolltemplate-tmpl span.sheet-fat .inlinerollresult.importantroll,
.sheet-rolltemplate-tmpl span.sheet-fat .inlinerollresult.fullfail{
    background-color: transparent;
    border: none;
    padding: 0px 0px 0px 0px;
    cursor: help;
    font-family: "Times New Roman", Times, serif;
    font-size: 14px;
    font-weight: bold;
    color: #257ABA;
}
.sheet-rolltemplate-tmpl div.sheet-qualites .inlinerollresult,
.sheet-rolltemplate-tmpl div.sheet-qualites .inlinerollresult.fullcrit,
.sheet-rolltemplate-tmpl div.sheet-qualites .inlinerollresult.importantroll,
.sheet-rolltemplate-tmpl div.sheet-qualites .inlinerollresult.fullfail{
    background-color: transparent;
    border: none;
    padding: 0px 0px 0px 0px;
    cursor: help;
    font-family: 'Shadows Into Light';
    font-size: 24px;
    font-weight: bold;
    color: #257ABA;
}