mirror of
https://github.com/Nighthawk42/roll20-character-sheets.git
synced 2026-09-04 06:02:32 +00:00
641 lines
13 KiB
CSS
641 lines
13 KiB
CSS
@import url('https://fonts.googleapis.com/css2?family=Eagle+Lake&display=swap');
|
|
|
|
.charsheet div.sheet-page1 {
|
|
background: white url("https://github.com/Roll20/roll20-character-sheets/blob/master/When%20The%20Wolf%20Comes/WhenTheWolfComes1_840px.png?raw=true") no-repeat 0px 0px scroll;
|
|
min-width: 832px;
|
|
max-width: 832px;
|
|
color: black;
|
|
font-family: "Eagle Lake", serif;
|
|
font-weight: 400;
|
|
font-style: normal;
|
|
margin: 2px 0 0 2px;
|
|
}
|
|
.charsheet div.sheet-page2 {
|
|
background: white url("https://github.com/Roll20/roll20-character-sheets/blob/master/When%20The%20Wolf%20Comes/WhenTheWolfComes2_840px.png?raw=true") no-repeat 0px 0px scroll;
|
|
color: black;
|
|
border: 1px solid #a8a8a8;
|
|
border-top-color: #000;
|
|
margin: 2px 0 0 2px;
|
|
padding: 4px;
|
|
}
|
|
|
|
.eye {
|
|
font-family: Baskerville, "Goudy Old Style", "Palatino", "Book Antiqua", "Warnock Pro", Arial, serif;
|
|
font-weight: normal;
|
|
font-style: italic;
|
|
font-size: 1.1em;
|
|
line-height: 1em;
|
|
color: red; /* change to blue later for GR color blindness */
|
|
}
|
|
|
|
input[type=text].attribute {
|
|
width: 82px;
|
|
height: 82px;
|
|
text-align: center;
|
|
border-radius: 50%;
|
|
font-weight: bold;
|
|
font-size: 3em;
|
|
background-color: rgba(255,255,255,0.1);
|
|
border: 0px solid red;
|
|
}
|
|
|
|
input[type=text].small-circle {
|
|
width: 63px;
|
|
height: 63px;
|
|
text-align: center;
|
|
border-radius: 50%;
|
|
font-weight: bold;
|
|
font-size: 2em;
|
|
background-color: rgba(255,255,255,0.1);
|
|
border: 0px solid red;
|
|
}
|
|
|
|
input[type=text].oval {
|
|
width: 63px;
|
|
height: 53px;
|
|
text-align: center;
|
|
border-radius: 50%;
|
|
font-weight: bold;
|
|
font-size: 2em;
|
|
background-color: rgba(255,255,255,0.1);
|
|
border: 0px solid red;
|
|
}
|
|
|
|
input[type=text].profession {
|
|
width: 366px;
|
|
text-align: left;
|
|
height: 14px;
|
|
margin: 0px 0px 0px 2px;
|
|
color: black;
|
|
background-color: rgba(255,255,255,0.1);
|
|
border: 0px solid red;
|
|
}
|
|
input[type=text].bioSmall {
|
|
width: 50px;
|
|
text-align: center;
|
|
height: 20px;
|
|
background-color: rgba(255,255,255,0.1);
|
|
border: 0px solid blue;
|
|
}
|
|
|
|
/* From https://stackoverflow.com/questions/75992689/change-the-label-background-color-when-a-checkbox-is-checked */
|
|
input[type="checkbox"] {
|
|
display: none;
|
|
height: 20px;
|
|
text-align: center;
|
|
font-size: 1.0em !important;
|
|
margin: 0px 0px -4px 0px;
|
|
/*opacity: 0;*/
|
|
}
|
|
|
|
input[type="checkbox"]:checked + label {
|
|
/* background-color: #A97B47; */
|
|
color: DarkRed;
|
|
height: 20px;
|
|
text-align: center;
|
|
font-size: 1.1em !important;
|
|
margin: 0px 0px -4px 0px;
|
|
}
|
|
|
|
label {
|
|
display: inline-block;
|
|
vertical-align: top;
|
|
border: 0px solid pink;
|
|
text-align: center;
|
|
height: 20px;
|
|
font-size: 1.0em !important;
|
|
margin: 0px 0px -4px 0px;
|
|
}
|
|
/* End Web code */
|
|
|
|
/* Modifiers for Add, Modify, Done */
|
|
.repcontrol .repcontrol_add,
|
|
.repcontrol .repcontrol_edit,
|
|
.repcontrol .repcontrol_del {
|
|
background: transparent;
|
|
color: black;
|
|
margin-left: 5px;
|
|
margin-right: 5px;
|
|
height: 12px;
|
|
font-size: 0.9em;
|
|
line-height: 12px;
|
|
}
|
|
|
|
|
|
input[type=text].circular-input {
|
|
width: 35px;
|
|
height: 35px;
|
|
/* Makes the input circular from https://www.geeksforgeeks.org/how-to-make-an-input-appear-rounded-in-html/ */
|
|
border-radius: 50%;
|
|
border: 1px solid #ccc;
|
|
text-align: center;
|
|
}
|
|
|
|
.tribs {
|
|
/* display: inline-block;
|
|
vertical-align: top; */
|
|
}
|
|
|
|
div.tribs .repitem:nth-child(even),
|
|
div.tribs .repitem:nth-child(even) input,
|
|
div.tribs .repitem:nth-child(even) select {
|
|
background-color: #ACACAC;
|
|
}
|
|
|
|
div.tribs .repitem:nth-child(odd),
|
|
div.tribs .repitem:nth-child(odd) input,
|
|
div.tribs .repitem:nth-child(odd) select {
|
|
background-color: #DCDCDC;
|
|
}
|
|
|
|
.charsheet .sheet-maindiv {
|
|
width: 840px;
|
|
margin:0px;
|
|
padding:5px;
|
|
border: 2px solid black;
|
|
background-color: white;
|
|
}
|
|
|
|
.charsheet .sheet-container {
|
|
display: inline-block;
|
|
width: 100%;
|
|
margin-left: 1px;
|
|
}
|
|
|
|
.charsheet .sheet-section {
|
|
display: inline-block;
|
|
border: 1px solid black;
|
|
padding: 2px;
|
|
margin: 0;
|
|
width: 99%;
|
|
}
|
|
|
|
.charsheet .sheet-column {
|
|
display: table-cell;
|
|
}
|
|
|
|
.charsheet .sheet-row {
|
|
width: 100%;
|
|
margin: 0px;
|
|
padding: 0px;
|
|
}
|
|
|
|
.charsheet label {
|
|
width: auto;
|
|
display: inline-block;
|
|
font-size: .75em;
|
|
}
|
|
|
|
.charsheet input[type=text].sheet-standard {
|
|
font-size: 1em;
|
|
border-top: none;
|
|
border-right: none;
|
|
border-left: none;
|
|
border-bottom: dotted 1px black;
|
|
color: black;
|
|
}
|
|
|
|
.charsheet input[type=text].sheet-skill {
|
|
text-align: center;
|
|
font-size: 1.15em;
|
|
width: 40px;
|
|
border-top: none;
|
|
border-right: none;
|
|
border-left: none;
|
|
border-bottom: dotted 1px black;
|
|
color: black;
|
|
}
|
|
|
|
.charsheet input[type=number] {
|
|
-moz-appearance: textfield;
|
|
-webkit-appearance: textfield;
|
|
border: none;
|
|
border-bottom: dotted 1px black;
|
|
color: black;
|
|
width: 45px;
|
|
text-align: center;
|
|
|
|
}
|
|
|
|
/* From the web */
|
|
.round {
|
|
position: relative;
|
|
}
|
|
|
|
.round label {
|
|
background-color: #fff;
|
|
border: 1px solid #ccc;
|
|
border-radius: 50%;
|
|
cursor: pointer;
|
|
height: 28px;
|
|
left: 0;
|
|
position: absolute;
|
|
top: 0;
|
|
width: 28px;
|
|
}
|
|
|
|
.round label:after {
|
|
border: 2px solid #fff;
|
|
border-top: none;
|
|
border-right: none;
|
|
content: "";
|
|
height: 6px;
|
|
left: 7px;
|
|
opacity: 0;
|
|
position: absolute;
|
|
top: 8px;
|
|
transform: rotate(-45deg);
|
|
width: 12px;
|
|
}
|
|
|
|
.round input[type="checkbox"] {
|
|
visibility: hidden;
|
|
}
|
|
|
|
.round input[type="checkbox"]:checked + label {
|
|
background-color: #66bb6a;
|
|
border-color: #66bb6a;
|
|
}
|
|
|
|
.round input[type="checkbox"]:checked + label:after {
|
|
opacity: 1;
|
|
}
|
|
|
|
/* general styling */
|
|
html, body {
|
|
height: 100%;
|
|
margin: 0;
|
|
}
|
|
|
|
body {
|
|
-webkit-box-align: center;
|
|
-ms-flex-align: center;
|
|
align-items: center;
|
|
background-color: #f1f2f3;
|
|
display: -webkit-box;
|
|
display: -ms-flexbox;
|
|
display: flex;
|
|
}
|
|
|
|
.container {
|
|
margin: 0 auto;
|
|
}
|
|
/* ************ */
|
|
.charsheet input[type=number]::-webkit-outer-spin-button,
|
|
.charsheet input[type=number]::-webkit-inner-spin-button {
|
|
-webkit-appearance: none;
|
|
-webkit-appearance: textfield;
|
|
}
|
|
|
|
.charsheet label.sheet-stat {
|
|
width: 45px;
|
|
font-size: 1.1em;
|
|
}
|
|
|
|
.charsheet label.sheet-combat {
|
|
font-size: .9em;
|
|
color: #b30000;
|
|
}
|
|
|
|
.charsheet label.sheet-skill {
|
|
font-size: 1em;
|
|
}
|
|
|
|
.charsheet label.sheet-bonus {
|
|
font-size: .9em;
|
|
font-weight: bold;
|
|
}
|
|
/* 'invisible' textButton template for Attribute, Derived Traits, and Skills checks */
|
|
|
|
.ui-dialog button[type=roll]::before {
|
|
content: ""; /* remove the dice icon, to make it 'invisible */
|
|
|
|
}
|
|
|
|
/* TAB HANDLING */
|
|
|
|
.charsheet input[type=radio]{
|
|
display: none;
|
|
float: left;
|
|
}
|
|
.charsheet input[type=radio] + label{
|
|
content: '';
|
|
border: solid 1px black;
|
|
background: white;
|
|
color: black;
|
|
font-weight: bold;
|
|
width: auto;
|
|
text-align: center;
|
|
padding: 0 2px;;
|
|
float: left;
|
|
}
|
|
.charsheet input[type=radio]:hover + label{
|
|
background: #990000;
|
|
}
|
|
.charsheet input[type=radio]:checked + label{
|
|
background: black;
|
|
color: white;
|
|
}
|
|
.charsheet div.sheet-page1, .charsheet div.sheet-page2 {
|
|
display: none;
|
|
}
|
|
.charsheet input.sheet-page1:checked ~ div.sheet-page1, .charsheet input.sheet-page2:checked ~ div.sheet-page2 {
|
|
display: block;
|
|
}
|
|
|
|
|
|
/* -=-=-=-=-=-=-=- Roll Templates -=-=-=-=-=-=-=- */
|
|
/* Roll templates not using 'table' */
|
|
/* Combat, Challenge & Fate Templates */
|
|
|
|
.sheet-rolltemplate-challenge .sheet-container {
|
|
background-color: #1e4d43; /* Dark Green */
|
|
color: #5ed7c4 ; /* Mint Green */
|
|
width: 189px;
|
|
padding: 2px;
|
|
border: 3px solid #5ed7c4 ;
|
|
}
|
|
|
|
.sheet-rolltemplate-combat .sheet-container {
|
|
background-color: rgb(153, 0, 0); /* Dark Red */
|
|
color: rgb(255, 179, 179); /* Light Red */
|
|
border: 3px solid rgb(255, 179, 179);
|
|
padding: 2px;
|
|
width: 189px;
|
|
}
|
|
|
|
.sheet-rolltemplate-fate .sheet-container {
|
|
background-color: Black;
|
|
color: rgb(178, 190, 181); /* Ash Gray */
|
|
border: 3px solid rgb(178, 190, 181);
|
|
padding: 2px;
|
|
width: 189px;
|
|
}
|
|
|
|
|
|
.sheet-rolltemplate-combat .sheet-container h1,
|
|
.sheet-rolltemplate-challenge .sheet-container h1 {
|
|
color: inherit;
|
|
font-size: 1.2em;
|
|
font-variant: small-caps;
|
|
line-height: 20px;
|
|
}
|
|
|
|
.sheet-rolltemplate-fate .sheet-container h1 {
|
|
color: rgb(178, 190, 181);
|
|
background-color: Black;
|
|
font-size: 1.2em;
|
|
font-variant: small-caps;
|
|
line-height: 20px;
|
|
}
|
|
|
|
.sheet-rolltemplate-combat div,
|
|
.sheet-rolltemplate-challenge div,
|
|
.sheet-rolltemplate-fate div {
|
|
padding: 2px;
|
|
}
|
|
|
|
.sheet-rolltemplate-combat span,
|
|
.sheet-rolltemplate-challenge span,
|
|
.sheet-rolltemplate-fate span {
|
|
color: currentColor;
|
|
font-family: "Times New Roman", Times, serif;
|
|
font-size: 1.2em;
|
|
font-variant: small-caps;
|
|
line-height: 1.4em;
|
|
padding-left: 5px;
|
|
text-align: left;
|
|
}
|
|
|
|
.sheet-rolltemplate-combat .sheet-subheader,
|
|
.sheet-rolltemplate-challenge .sheet-subheader,
|
|
.sheet-rolltemplate-fate .sheet-subheader {
|
|
color: currentColor;
|
|
font-size: 1em;
|
|
font-style: italic;
|
|
}
|
|
|
|
.sheet-rolltemplate-combat .sheet-arrow-right,
|
|
.sheet-rolltemplate-challenge .sheet-arrow-right,
|
|
.sheet-rolltemplate-fate .sheet-arrow-right {
|
|
border-bottom: 3px solid transparent;
|
|
border-left: 180px solid currentColor;
|
|
border-top: 3px solid transparent;
|
|
}
|
|
|
|
.sheet-rolltemplate-combat .sheet-tcat,
|
|
.sheet-rolltemplate-challenge .sheet-tcat,
|
|
.sheet-rolltemplate-fate .sheet-tcat {
|
|
font-style: italic;
|
|
}
|
|
|
|
.sheet-rolltemplate-challenge .inlinerollresult {
|
|
background-color: #ffffff;
|
|
border: none;
|
|
}
|
|
.sheet-rolltemplate-combat .inlinerollresult {
|
|
background-color: Yellow;
|
|
border: none;
|
|
}
|
|
|
|
.sheet-rolltemplate-fate .inlinerollresult {
|
|
color: Black;
|
|
background-color: Yellow;
|
|
border: none;
|
|
}
|
|
|
|
.sheet-rolltemplate-check .inlinerollresult.fullcrit {
|
|
color: #3FB315;
|
|
border: none;
|
|
}
|
|
|
|
.sheet-rolltemplate-check .inlinerollresult.fullfail {
|
|
color: #B31515;
|
|
border: none;
|
|
}
|
|
|
|
.sheet-rolltemplate-check .inlinerollresult.importandivoll {
|
|
color: #4A57ED;
|
|
border: none;
|
|
}
|
|
|
|
|
|
/*Buttons Styling*/
|
|
|
|
.charsheet button[type=roll].sheet-textButton {
|
|
background-color: transparent;
|
|
color: black;
|
|
border: none;
|
|
font-size: 1.25em;
|
|
font-weight: bold;
|
|
text-align: right;
|
|
background-image: none;
|
|
text-shadow: none;
|
|
box-shadow: none;
|
|
padding: 0px;
|
|
margin: 0px;
|
|
/*margin-top: -5px;*/
|
|
/*width: 70%;*/
|
|
}
|
|
|
|
.charsheet span.sheet-diceroll {
|
|
font-family: "dicefontd20";
|
|
}
|
|
|
|
.charsheet button[type=roll].sheet-textButton::before,
|
|
.charsheet button[type=roll].sheet-powerButton::before {
|
|
content: "" !important;
|
|
}
|
|
|
|
|
|
/* Configuration Window*/
|
|
.charsheet .sheet-cdiv {
|
|
width:810px;
|
|
/*border: 1px dotted;*/
|
|
padding-right: 15px;
|
|
padding-left: 15px;
|
|
}
|
|
|
|
.sheet-HideConfig:checked ~ *.sheet-config {
|
|
display:none;
|
|
}
|
|
|
|
.charsheet span.sheet-is-config::after { /*Close Config: grayish background with black text*/
|
|
content: "^";
|
|
}
|
|
|
|
.charsheet .sheet-HideConfig:checked + span.sheet-is-config::after { /*Show Configuration: Black background with grayish text*/
|
|
content: "v";
|
|
}
|
|
|
|
.charsheet span.sheet-is-config {
|
|
text-align: center;
|
|
display: inline-block;
|
|
width: 5%;
|
|
height: 16px;
|
|
font-size: 9px;
|
|
/*font-family: "Pictos";*/
|
|
/*background: #65763c;*/
|
|
background: black; /*#93537c;*/
|
|
color: white; /*white;*/
|
|
font-weight: bold;
|
|
border-radius: 4px;
|
|
margin-left: -5%;
|
|
}
|
|
|
|
.charsheet input.sheet-HideConfig {
|
|
width: 5%;
|
|
height: 16px;
|
|
cursor: pointer;
|
|
margin-left: auto;
|
|
margin-top: auto;
|
|
/*position: absolute;
|
|
right: 20%;*/
|
|
opacity: 0;
|
|
z-index: 9999;
|
|
}
|
|
|
|
.charsheet .sheet-HideConfig:checked + span.sheet-is-config {
|
|
background: black;
|
|
border-radius: 4px;
|
|
color: white;
|
|
}
|
|
|
|
.charsheet label.sheet-configitem {
|
|
margin-left: 10px;
|
|
width: 100px;
|
|
font-size: .9em;
|
|
font-weight: normal
|
|
}
|
|
|
|
/*End Configuration Window*/
|
|
|
|
/*Buttons Styling*/
|
|
.charsheet button[type=roll].sheet-attack-button {
|
|
color: white;
|
|
background-color: #cc0000;
|
|
background-image: none;
|
|
font-size: 1em;
|
|
border: none;
|
|
text-shadow: none;
|
|
box-shadow: none;
|
|
}
|
|
|
|
.charsheet button[type=roll].sheet-parry-button {
|
|
color: white;
|
|
background-color: blue;
|
|
background-image: none;
|
|
font-size: 1em;
|
|
border: none;
|
|
text-shadow: none;
|
|
box-shadow: none;
|
|
}
|
|
|
|
.charsheet button[type=roll].sheet-skill-button {
|
|
color: black;
|
|
background-color: white;
|
|
background-image: none;
|
|
font-size: 1.6em;
|
|
border: none;
|
|
text-shadow: none;
|
|
box-shadow: none;
|
|
}
|
|
.charsheet button[type=roll].sheet-textButton {
|
|
background-color: transparent;
|
|
color: black;
|
|
border: none;
|
|
font-size: 1em;
|
|
font-weight: bold;
|
|
text-align: center;
|
|
background-image: none;
|
|
text-shadow: none;
|
|
box-shadow: none;
|
|
padding: 0px;
|
|
padding-right: 2px;
|
|
margin: 0px;
|
|
/*margin-top: -5px;*/
|
|
/*width: 70%;*/
|
|
}
|
|
.charsheet button[type=action].sheet-textButton {
|
|
background-color: transparent;
|
|
color: black;
|
|
border: none;
|
|
font-size: 1em;
|
|
font-weight: normal;
|
|
text-align: center;
|
|
background-image: none;
|
|
text-shadow: none;
|
|
box-shadow: none;
|
|
padding: 0px;
|
|
padding-right: 2px;
|
|
margin: 0px;
|
|
}
|
|
|
|
.charsheet span.sheet-diceroll {
|
|
font-family: "dicefontd20";
|
|
}
|
|
|
|
.charsheet button[type=roll].sheet-textButton::before,
|
|
.charsheet button[type=roll].sheet-powerButton::before {
|
|
content: "" !important;
|
|
}
|
|
|
|
.button[type=action]:hover {
|
|
background-color: red;
|
|
color: black;
|
|
}
|
|
/* Finderski and GiGs tabs example */
|
|
/*Configure the tab buttons*/
|
|
.sheet-first,
|
|
.sheet-fifth {
|
|
display: none;
|
|
}
|
|
|
|
/* show the selected tab */
|
|
.sheet-tabstoggle[value="first"] ~ div.sheet-first,
|
|
.sheet-tabstoggle[value="fifth"] ~ div.sheet-fifth {
|
|
display: block;
|
|
}
|
|
|
|
/*End Button Styling*/
|