mirror of
https://github.com/Nighthawk42/roll20-character-sheets.git
synced 2026-08-30 11:42:29 +00:00
Choco Lanoar
c3e702c94c
Hide radio button on dice scores and replace with highlighting. Signed-off-by: Choco Lanoar <e.lachaud@gmail.com>
551 lines
11 KiB
CSS
551 lines
11 KiB
CSS
@import url('https://fonts.googleapis.com/css2?family=Gajraj+One&family=Zen+Dots&display=swap');
|
|
|
|
* {
|
|
box-sizing: border-box;
|
|
}
|
|
.charsheet {
|
|
background-color: white;
|
|
}
|
|
.sheet-darkmode .charsheet {
|
|
background-color: #202020;
|
|
}
|
|
/* ---- DIV ----- */
|
|
div{
|
|
padding: 0px 0px 0px 0px;
|
|
margin: 0px 0px 0px 0px;
|
|
vertical-align: top;
|
|
display: inline-block;
|
|
text-align: center;
|
|
}
|
|
div.sheet-main{
|
|
padding: 4px;
|
|
width: 850px;
|
|
text-align: center;
|
|
font-family: 'Verdana';
|
|
border-width: 1px;
|
|
border-style: solid;
|
|
border-color: #AAAAAA;
|
|
}
|
|
|
|
div.sheet-myRow{
|
|
display: block;
|
|
width: 100%;
|
|
text-align: left;
|
|
vertical-align: middle;
|
|
margin: 1px 0px 1px 0px;
|
|
}
|
|
div.sheet-myCol{
|
|
display: inline-block;
|
|
vertical-align: top;
|
|
}
|
|
div.sheet-myColBrd{
|
|
display: inline-block;
|
|
vertical-align: top;
|
|
border: 1px solid black;
|
|
border-radius: 6px;
|
|
text-align: center;
|
|
padding: 3px;
|
|
margin-bottom: 3px;
|
|
}
|
|
|
|
div.sheet-borderTop {
|
|
border-top: 1px solid black;
|
|
}
|
|
.sheet-darkmode div.sheet-borderTop {
|
|
border-top: 1px solid white;
|
|
}
|
|
|
|
.sheet-oneQuarter {
|
|
width: 24%;
|
|
}
|
|
.sheet-oneThird {
|
|
width: 30%;
|
|
}
|
|
.sheet-half {
|
|
width: 49%;
|
|
}
|
|
.sheet-twoThirds {
|
|
width: 60%;
|
|
}
|
|
.sheet-full {
|
|
width: 90%;
|
|
}
|
|
|
|
/* --------------------- */
|
|
/* REP ITEMS */
|
|
/* --------------------- */
|
|
.charsheet .repcontainer > .repitem {
|
|
display: block;
|
|
}
|
|
|
|
/* --------------------- */
|
|
/* ------- TEXT -------- */
|
|
/* --------------------- */
|
|
div.sheet-textTitle {
|
|
color: darkmagenta;
|
|
display: inline-block;
|
|
text-align: center;
|
|
font-size: 1.8em;
|
|
font-family: 'Gajraj One', cursive;
|
|
letter-spacing: 1px;
|
|
text-shadow: 1px 1px 3px grey;
|
|
margin-bottom: 2px;
|
|
}
|
|
|
|
.sheet-darkmode div.sheet-textTitle {
|
|
color: pink;
|
|
text-shadow: 1px 1px 3px DimGray;
|
|
}
|
|
|
|
.sheet-textNom {
|
|
font-family: 'Zen Dots', cursive;
|
|
margin-right: 10px;
|
|
font-size: 1.4em;
|
|
}
|
|
|
|
.sheet-darkmode .sheet-textNom {
|
|
color: white;
|
|
}
|
|
|
|
div.sheet-textBio {
|
|
text-align: right;
|
|
width: 100px;
|
|
}
|
|
|
|
.sheet-darkmode .sheet-textBio {
|
|
color: white;
|
|
}
|
|
|
|
div.sheet-textHobby {
|
|
|
|
}
|
|
|
|
.sheet-darkmode .sheet-textHobby {
|
|
color: white;
|
|
}
|
|
|
|
div.sheet-textXp {
|
|
font-family: 'Zen Dots', cursive;
|
|
font-size: 1.3em;
|
|
}
|
|
|
|
.sheet-darkmode .sheet-textXp {
|
|
color: white;
|
|
}
|
|
|
|
.sheet-darkmode span.sheet-jetInfo {
|
|
color: white;
|
|
}
|
|
|
|
input[type="text"] {
|
|
font-family: cursive;
|
|
color: black;
|
|
background-color: GhostWhite;
|
|
border-style: none none solid none;
|
|
padding: 0px 3px 0px 3px;
|
|
}
|
|
|
|
.sheet-darkmode input[type="text"] {
|
|
color: GhostWhite;
|
|
background-color: #303030; /* almost black */
|
|
}
|
|
|
|
input[type="number"] {
|
|
color: black;
|
|
font-family: 'Zen Dots', cursive;
|
|
background-color: GhostWhite;
|
|
border-style: none none solid none;
|
|
padding: 0px 3px 0px 3px;
|
|
text-align: center;
|
|
}
|
|
|
|
.sheet-darkmode input[type="number"] {
|
|
color: GhostWhite;
|
|
background-color: #303030;
|
|
}
|
|
|
|
input[type="text"].sheet-inputBio {
|
|
width: 95px;
|
|
}
|
|
|
|
input[type="text"].sheet-inputNom {
|
|
width:300px;
|
|
font-size: 1.8em;
|
|
font-weight: bold;
|
|
}
|
|
|
|
textarea {
|
|
resize: vertical;
|
|
font-weight: normal;
|
|
font-family: cursive;
|
|
background-color: GhostWhite;
|
|
}
|
|
|
|
textarea.sheet-textFullCol {
|
|
width: 90%;
|
|
color: black;
|
|
}
|
|
|
|
textarea.field-desc {
|
|
width: 380px;
|
|
height: 50px;
|
|
font-style: italic;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.sheet-darkmode textarea {
|
|
color: GhostWhite;
|
|
background-color: #303030;
|
|
}
|
|
|
|
/* --------------------- */
|
|
/* --- Scores/atout ---- */
|
|
/* --------------------- */
|
|
select {
|
|
color: black;
|
|
background-color: GhostWhite;
|
|
}
|
|
|
|
.sheet-darkmode select {
|
|
color: GhostWhite;
|
|
background-color: #303030;
|
|
}
|
|
|
|
select.select-blessures {
|
|
width: 48px;
|
|
margin-right: 18px;
|
|
}
|
|
|
|
select.select-dice {
|
|
font-family: 'Zen Dots', cursive;
|
|
width: 60px;
|
|
text-align: center;
|
|
margin-bottom: 1px;
|
|
}
|
|
|
|
span.score-de {
|
|
margin-right: 20px;
|
|
font-weight: bold;
|
|
font-family: 'Zen Dots', cursive;
|
|
font-size: 1.3em;
|
|
}
|
|
|
|
.sheet-darkmode span.score-de {
|
|
color:white;
|
|
}
|
|
|
|
span.score-type {
|
|
width: 100px;
|
|
}
|
|
|
|
.sheet-darkmode span.score-type {
|
|
color:white;
|
|
}
|
|
|
|
input[type="text"].score-name {
|
|
width: 150px;
|
|
font-size: 1.3em;
|
|
font-weight: bold;
|
|
}
|
|
|
|
input[type="text"].atout-name {
|
|
width: 230px;
|
|
font-size: 1.1em;
|
|
font-weight: bold;
|
|
}
|
|
|
|
input[type="text"].atoutPnj-Name {
|
|
width: 200px;
|
|
font-size: 1.3em;
|
|
font-weight: bold;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
input[type="text"].atoutPnj-scoreName {
|
|
width: 150px;
|
|
font-size: 1.2em;
|
|
font-weight: bold;
|
|
}
|
|
|
|
input[type="text"].atoutPnj-atoutName {
|
|
width: 210px;
|
|
font-size: 1.1em;
|
|
font-weight: bold;
|
|
}
|
|
|
|
input[type="text"].field-desc {
|
|
width: 380px;
|
|
font-style: italic;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.sheet-scoreColWidth {
|
|
width: 35%;
|
|
}
|
|
|
|
input[type="radio"].check-score {
|
|
margin: 0;
|
|
padding: 0;
|
|
display: inline-block;
|
|
opacity: 0;
|
|
width: 70px;
|
|
height: 28px;
|
|
z-index: 2;
|
|
}
|
|
|
|
input[type="radio"].check-score + span {
|
|
font-weight: bold;
|
|
font-family: 'Zen Dots', cursive;
|
|
font-size: 1.3em;
|
|
text-align: center;
|
|
display: inline-block;
|
|
width: 70px;
|
|
height: 28px;
|
|
margin: 0 -5px -2px -70px;
|
|
padding: 0;
|
|
z-index: 1;
|
|
}
|
|
.sheet-darkmode input[type="radio"].check-score + span {
|
|
color:white;
|
|
}
|
|
|
|
input[type="radio"].check-score:checked + span {
|
|
border: 2px solid darkmagenta;
|
|
border-radius: 10px;
|
|
}
|
|
|
|
.sheet-darkmode input[type="radio"].check-score:checked + span {
|
|
border: 2px solid pink;
|
|
}
|
|
|
|
/* --------------------- */
|
|
/* ------ ONGLETS ------ */
|
|
/* --------------------- */
|
|
div.sheet-onglet1,
|
|
div.sheet-onglet2,
|
|
div.sheet-onglet3,
|
|
div.sheet-onglet4{
|
|
display: none;
|
|
width: 100%;
|
|
text-align: left;
|
|
vertical-align: middle;
|
|
margin: 1px 0px 1px 0px;
|
|
padding: 3px;
|
|
z-index: 0;
|
|
}
|
|
input[type="radio"].sheet-onglet1,
|
|
input[type="radio"].sheet-onglet2,
|
|
input[type="radio"].sheet-onglet3,
|
|
input[type="radio"].sheet-onglet4{
|
|
margin: 0;
|
|
margin-top: -4px;
|
|
margin-bottom: -4px;
|
|
padding: 0;
|
|
display: inline-block;
|
|
opacity: 0;
|
|
width: 110px;
|
|
height: 25px;
|
|
z-index: 2;
|
|
}
|
|
input[type="radio"].sheet-onglet1 + span,
|
|
input[type="radio"].sheet-onglet2 + span,
|
|
input[type="radio"].sheet-onglet3 + span,
|
|
input[type="radio"].sheet-onglet4 + span{
|
|
color: #666666;
|
|
background-color: #DDDDDD;
|
|
font-size:15px;
|
|
text-align:center;
|
|
display: inline-block;
|
|
width: 110px;
|
|
height: 28px;
|
|
margin: 0;
|
|
margin-left: -110px;
|
|
margin-right: -5px;
|
|
padding:0;
|
|
margin-bottom: -2px;
|
|
padding-top: 5px;
|
|
font-size: 1em;
|
|
font-family: 'Zen Dots', cursive;
|
|
border-style: solid;
|
|
border-width: 1px;
|
|
border-left-color: black;
|
|
border-top-color: black;
|
|
border-right-color: black;
|
|
border-bottom-color: black;
|
|
border-top-left-radius: 6px;
|
|
border-top-right-radius: 6px;
|
|
z-index: 1;
|
|
}
|
|
input[type="radio"].sheet-onglet1:checked + span ,
|
|
input[type="radio"].sheet-onglet2:checked + span ,
|
|
input[type="radio"].sheet-onglet3:checked + span ,
|
|
input[type="radio"].sheet-onglet4:checked + span {
|
|
font-weight: bold;
|
|
color: black;
|
|
background-color: white;
|
|
border-left-color: black;
|
|
border-top-color: black;
|
|
border-right-color: black;
|
|
border-bottom-color: white;
|
|
}
|
|
|
|
.sheet-darkmode input[type="radio"].sheet-onglet1 + span,
|
|
.sheet-darkmode input[type="radio"].sheet-onglet2 + span,
|
|
.sheet-darkmode input[type="radio"].sheet-onglet3 + span,
|
|
.sheet-darkmode input[type="radio"].sheet-onglet4 + span{
|
|
color: #DDDDDD;
|
|
background-color: #444444;
|
|
border-left-color: white;
|
|
border-top-color: white;
|
|
border-right-color: white;
|
|
border-bottom-color: white;
|
|
}
|
|
.sheet-darkmode input[type="radio"].sheet-onglet1:checked + span ,
|
|
.sheet-darkmode input[type="radio"].sheet-onglet2:checked + span ,
|
|
.sheet-darkmode input[type="radio"].sheet-onglet3:checked + span ,
|
|
.sheet-darkmode input[type="radio"].sheet-onglet4:checked + span {
|
|
color: white;
|
|
background-color: #202020;
|
|
border-left-color: white;
|
|
border-top-color: white;
|
|
border-right-color: white;
|
|
border-bottom-color: #202020;
|
|
}
|
|
input[type="radio"].sheet-onglet1:checked ~ div.sheet-onglet1{
|
|
display: block;
|
|
}
|
|
input[type="radio"].sheet-onglet2:checked ~ div.sheet-onglet2{
|
|
display: block;
|
|
}
|
|
input[type="radio"].sheet-onglet3:checked ~ div.sheet-onglet3{
|
|
display: block;
|
|
}
|
|
input[type="radio"].sheet-onglet4:checked ~ div.sheet-onglet4{
|
|
display: block;
|
|
}
|
|
|
|
/* --------------------- */
|
|
/* ----- BUTTONS ------- */
|
|
/* --------------------- */
|
|
.repcontrol {
|
|
min-height: 27px;
|
|
display: inline-block;
|
|
}
|
|
|
|
.repcontrol .btn {
|
|
color: #303030;
|
|
background: ghostwhite;
|
|
display: inline-block;
|
|
text-shadow: none;
|
|
box-shadow: none;
|
|
}
|
|
.sheet-darkmode .repcontrol .btn {
|
|
color: ghostwhite;
|
|
background: #303030;
|
|
}
|
|
|
|
.ui-dialog .charsheet button[type=roll] {
|
|
color: black;
|
|
text-shadow: none;
|
|
box-shadow: none;
|
|
padding:0;
|
|
margin: 0;
|
|
border: none;
|
|
background: none;
|
|
opacity: 0.7;
|
|
height: 1.7em;
|
|
width: 1.7em;
|
|
line-height: 1.7em;
|
|
}
|
|
.ui-dialog .charsheet button[type=roll]:hover {
|
|
opacity: 1.0;
|
|
background: none;
|
|
}
|
|
.ui-dialog .charsheet button[type=roll]:before {
|
|
font-size: 1.7em;
|
|
font-family: 'dicefontd12';
|
|
content: 'L';
|
|
}
|
|
.sheet-darkmode .ui-dialog .charsheet button[type=roll]:before {
|
|
color: white;
|
|
content: 'l';
|
|
}
|
|
|
|
/* --------------------- */
|
|
/* ----- TEMPLATES ----- */
|
|
/* --------------------- */
|
|
.sheet-rolltemplate-jetStandard .inlinerollresult {
|
|
display: inline-block;
|
|
background: none;
|
|
border: none;
|
|
min-width: 1.5em;
|
|
text-align: center;
|
|
}
|
|
.sheet-rolltemplate-darkmode.sheet-rolltemplate-jetStandard .inlinerollresult {
|
|
background: none;
|
|
border: none;
|
|
}
|
|
|
|
.sheet-rolltemplate-jetStandard .inlinerollresult.fullcrit {
|
|
border: none;
|
|
}
|
|
.sheet-rolltemplate-jetStandard .inlinerollresult.fullfail {
|
|
border: none;
|
|
}
|
|
.sheet-rolltemplate-jetStandard .inlinerollresult.importantroll {
|
|
border: none;
|
|
}
|
|
|
|
.sheet-rolltemplate-jetStandard div {
|
|
color: black;
|
|
background: azure;
|
|
border: 1px solid darkmagenta;
|
|
border-radius: 10px;
|
|
padding: 5px;
|
|
width: 100%;
|
|
}
|
|
|
|
.sheet-rolltemplate-jetStandard div > h3{
|
|
text-align: center;
|
|
margin-bottom: 2px;
|
|
font-size: 130%;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.sheet-rolltemplate-jetStandard div > h4{
|
|
color: darkmagenta;
|
|
text-align: center;
|
|
margin-bottom: 2px;
|
|
font-size: 120%;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.sheet-rolltemplate-jetStandard div > h5{
|
|
text-align: center;
|
|
font-size: 120%;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.sheet-rolltemplate-jetStandard div > div{
|
|
border: none;
|
|
padding: 3px;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.sheet-rolltemplate-darkmode.sheet-rolltemplate-jetStandard div {
|
|
color: azure;
|
|
background: #303030;
|
|
}
|
|
|
|
.sheet-rolltemplate-darkmode.sheet-rolltemplate-jetStandard div > h4 {
|
|
color: pink;
|
|
}
|
|
|
|
.sheet-rolltemplate-jetStandard div > span {
|
|
color: DarkGreen;
|
|
font-style: italic;
|
|
}
|
|
.sheet-rolltemplate-darkmode.sheet-rolltemplate-jetStandard div > span {
|
|
color: GreenYellow;
|
|
}
|