mirror of
https://github.com/Nighthawk42/roll20-character-sheets.git
synced 2026-08-30 03:40:32 +00:00
William Barker
4fcba7ddf8
Since 22Jun2025 the "Perils & Princesses" sheet has been unable to access any images. The only response to the problem was the suggestion that actual locations should be used. Last month this was done and nothing has changed. Without concrete evidence, I am guessing its the ampersand in the folder name
423 lines
8.6 KiB
CSS
423 lines
8.6 KiB
CSS
@import url("https://fonts.googleapis.com/css2?family=Fleur+De+Leah&family=Lancelot&family=Style+Script&family=Sunshiney&display=swap");
|
|
|
|
|
|
.charsheet {
|
|
opacity: 1.0;
|
|
min-width: 822px;
|
|
max-width: 826px;
|
|
height: 1300px;
|
|
}
|
|
|
|
.charsheet label {
|
|
width: auto;
|
|
display: inline-block;
|
|
font-size: .75em;
|
|
}
|
|
.charsheet .sheet-myStuff {
|
|
display: grid;
|
|
grid-template-columns: 204px 204px;
|
|
background-color: Transparent;
|
|
width: 408px;
|
|
margin-top: 40px;
|
|
margin-left: 6px;
|
|
padding: 3px;
|
|
}
|
|
|
|
.charsheet .sheet-myStuff > div {
|
|
background-color: #f1f1f1;
|
|
border: 2px solid Black;
|
|
padding: 5px;
|
|
height: 31px;
|
|
font-size: 30px;
|
|
text-align: center;
|
|
}
|
|
|
|
.charsheet .sheet-weapons {
|
|
display: grid;
|
|
grid-template-columns: 200px 136px;
|
|
background-color: Transparent;
|
|
width: 336px;
|
|
margin-top: 0px;
|
|
margin-left: 0px;
|
|
padding: 1px;
|
|
}
|
|
|
|
.charsheet .sheet-weapons > div {
|
|
background-color: #f1f1f1;
|
|
border: 2px solid Black;
|
|
padding: 5px;
|
|
height: 33px;
|
|
font-size: 30px;
|
|
text-align: center;
|
|
}
|
|
.charsheet .sheet-edge {
|
|
font-weight: 400;
|
|
font-size: 17px;
|
|
height: 40px !important;
|
|
border: none;
|
|
border-bottom: 2px solid Black;
|
|
margin-left: 6%;
|
|
width: 86%;
|
|
border-radius: 0%;
|
|
text-align: center;
|
|
}
|
|
|
|
.charsheet .sheet-round label {
|
|
height: 20px;
|
|
border: 1px solid Black;
|
|
border-radius: 50%;
|
|
width: 20px;
|
|
text-align: center;
|
|
}
|
|
|
|
.charsheet button[type=roll].sheet-attack-button {
|
|
box-sizing: content-box;
|
|
color: rgb(215, 153, 167);
|
|
background-color: White;
|
|
background-image: none;
|
|
height: 24px;
|
|
width: 14px;
|
|
font-size: 16px;
|
|
font-weight: bold;
|
|
border: 0px solid rgb(215, 153, 167);
|
|
text-shadow: none;
|
|
box-shadow: none;
|
|
font-family: "dicefontd20";
|
|
margin: -4px 0px 0px -8px;
|
|
padding: 0px 1px 4px 1px;
|
|
}
|
|
.charsheet button[type=roll].sheet-melee-button {
|
|
box-sizing: content-box;
|
|
color: White;
|
|
background-color: rgb(215, 153, 167);
|
|
background-image: none;
|
|
height: 18px;
|
|
width: 14px;
|
|
font-size: 16px;
|
|
font-weight: bold;
|
|
border: 0px solid rgb(215, 153, 167);
|
|
text-shadow: none;
|
|
box-shadow: none;
|
|
font-family: "dicefontd20";
|
|
margin: -6px 0px 0px -8px;
|
|
padding: 2px 2px 2px 2px;
|
|
}
|
|
.charsheet button[type=roll].sheet-range-button {
|
|
box-sizing: content-box;
|
|
color: rgb(215, 153, 167);
|
|
background-color: White;
|
|
background-image: none;
|
|
height: 24px;
|
|
width: 14px;
|
|
font-size: 16px;
|
|
font-weight: bold;
|
|
border: 0px solid rgb(215, 153, 167);
|
|
text-shadow: none;
|
|
box-shadow: none;
|
|
font-family: "dicefontd20";
|
|
margin: -4px 0px 0px -7px;
|
|
padding: 0px 1px 4px 1px;
|
|
}
|
|
input[type=text].attribute {
|
|
width: 134px;
|
|
height: 134px;
|
|
text-align: center;
|
|
border-radius: 50%;
|
|
font-weight: bold;
|
|
font-size: 6em;
|
|
background-color: rgba(255,255,255,0.1);
|
|
border: 12px double Pink;
|
|
}
|
|
input[type=checkbox].itemCheck {
|
|
height: 16px;
|
|
width: 16px;
|
|
accent-color: Black;
|
|
margin: 0px 0px 0px -6px;
|
|
}
|
|
input[type=text].item {
|
|
width: 168px;
|
|
height: 40px;
|
|
text-align: center;
|
|
font-weight: bold;
|
|
font-size: 22px;
|
|
margin: -9px 0px 0px 0px;
|
|
border-bottom: 4px solid Black;
|
|
}
|
|
input[type=text].weaponName {
|
|
width: 168px;
|
|
height: 40px;
|
|
text-align: center;
|
|
font-weight: bold;
|
|
font-size: 22px;
|
|
margin: -8px 0px 0px 0px;
|
|
border-bottom: 3px solid Black;
|
|
}
|
|
|
|
input[type=text].weaponDmg {
|
|
width: 91px;
|
|
height: 40px;
|
|
text-align: center;
|
|
font-weight: bold;
|
|
font-size: 22px;
|
|
margin: -8px 0px 0px -5px;
|
|
padding: 3px 0px 3px 0px;
|
|
border-bottom: 3px solid Black;
|
|
}
|
|
|
|
input[type="radio"]:checked + label {
|
|
color: white;
|
|
}
|
|
|
|
|
|
input[type="radio"]:checked + label.contrast {
|
|
color: #DA70D6;
|
|
}
|
|
|
|
input[type="radio"]:hover + label {
|
|
color: blue;
|
|
}
|
|
|
|
|
|
.charsheet input[type=number] {
|
|
-moz-appearance: textfield;
|
|
-webkit-appearance: textfield;
|
|
border: none;
|
|
border-bottom: dotted 1px black;
|
|
color: black;
|
|
width: 45px;
|
|
text-align: center;
|
|
}
|
|
|
|
.charsheet input[type=number]::-webkit-outer-spin-button,
|
|
.charsheet input[type=number]::-webkit-inner-spin-button {
|
|
-webkit-appearance: none;
|
|
-webkit-appearance: textfield;
|
|
}
|
|
|
|
/* Trauma checkbox via image */
|
|
|
|
input[type="checkbox"][id^="cb"] {
|
|
display: none;
|
|
}
|
|
|
|
label.trauma {
|
|
display: inline-block;
|
|
vertical-align: top;
|
|
height: 45px;
|
|
width: 45px;
|
|
border: 1px solid #fff;
|
|
padding: 5px;
|
|
position: relative;
|
|
margin: 5px 0px 0px 5px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
label.trauma:before {
|
|
display: inline-block;
|
|
vertical-align: top;
|
|
background-color: white;
|
|
color: white;
|
|
content: " ";
|
|
border-radius: 50%;
|
|
border: 1px solid grey;
|
|
position: absolute;
|
|
top: -5px;
|
|
left: -5px;
|
|
width: 25px;
|
|
height: 25px;
|
|
text-align: center;
|
|
line-height: 28px;
|
|
transition-duration: 0.4s;
|
|
transform: scale(0);
|
|
}
|
|
|
|
label.trauma img {
|
|
display: inline-block;
|
|
vertical-align: top;
|
|
|
|
transition-duration: 0.2s;
|
|
transform-origin: 50% 50%;
|
|
}
|
|
|
|
:checked + label.trauma {
|
|
border-color: #ddd;
|
|
}
|
|
|
|
:checked + label.trauma:before {
|
|
content: "✓";
|
|
background-color: grey;
|
|
transform: scale(1);
|
|
}
|
|
|
|
:checked + label.trauma img {
|
|
transform: scale(0.9);
|
|
box-shadow: 0 0 5px #333;
|
|
z-index: -1;
|
|
}
|
|
|
|
|
|
|
|
/* Check and MeleeRoll Template */
|
|
.sheet-rolltemplate-check .sheet-container {
|
|
color: Black;
|
|
background-color: #ffffff;
|
|
border: 1px solid;
|
|
padding: 2px;
|
|
width: 189px;
|
|
}
|
|
.sheet-rolltemplate-meleeRoll .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-initiative .sheet-container {
|
|
background-color: Thistle;
|
|
color: Blue;
|
|
border: 3px solid Blue;
|
|
padding: 2px;
|
|
width: 189px;
|
|
}
|
|
|
|
|
|
.sheet-rolltemplate-check .sheet-container h1,
|
|
.sheet-rolltemplate-meleeRoll .sheet-container h1{
|
|
color: inherit;
|
|
font-size: 1.2em;
|
|
font-variant: small-caps;
|
|
line-height: 20px;
|
|
}
|
|
|
|
.sheet-rolltemplate-meleeRoll div,
|
|
.sheet-rolltemplate-initiative div,
|
|
.sheet-rolltemplate-check div {
|
|
padding: 2px;
|
|
}
|
|
|
|
.sheet-rolltemplate-check span,
|
|
.sheet-rolltemplate-meleeRoll span,
|
|
.sheet-rolltemplate-initiative 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-check .sheet-subheader,
|
|
.sheet-rolltemplate-meleeRoll .sheet-subheader,
|
|
.sheet-rolltemplate-initiative .sheet-subheader {
|
|
color: currentColor;
|
|
font-size: 1em;
|
|
font-style: italic;
|
|
}
|
|
|
|
.sheet-rolltemplate-check .sheet-arrow-right,
|
|
.sheet-rolltemplate-meleeRoll .sheet-arrow-right,
|
|
.sheet-rolltemplate-initiative .sheet-arrow-right {
|
|
border-bottom: 3px solid transparent;
|
|
border-left: 180px solid currentColor;
|
|
border-top: 3px solid transparent;
|
|
}
|
|
|
|
.sheet-rolltemplate-meleeRoll .sheet-tcat,
|
|
.sheet-rolltemplate-initiative .sheet-tcat,
|
|
.sheet-rolltemplate-check .sheet-tcat {
|
|
font-style: italic;
|
|
}
|
|
|
|
|
|
.sheet-rolltemplate-check .inlinerollresult {
|
|
background-color: LightGray !important;
|
|
border: none;
|
|
}
|
|
.sheet-rolltemplate-initiative .inlinerollresult,
|
|
.sheet-rolltemplate-meleeRoll .inlinerollresult {
|
|
color: Red;
|
|
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;
|
|
}
|
|
/* End Check MeleeRoll templates*/
|
|
|
|
|
|
|
|
/* Button 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;
|
|
|
|
}
|
|
|
|
.charsheet span.sheet-diceroll {
|
|
font-family: "dicefontd20";
|
|
}
|
|
|
|
.charsheet button[type=roll].sheet-textButton::before,
|
|
.charsheet button[type=roll].sheet-powerButton::before {
|
|
content: "" !important;
|
|
}
|
|
|
|
/*End Button Styling*/
|
|
|
|
|
|
/* 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;
|
|
}
|