mirror of
https://github.com/Nighthawk42/roll20-character-sheets.git
synced 2026-08-30 03:40:32 +00:00
DarrenHorton
3cdf647a16
* New version - allows rolling the dice pool with a single click The current version of this sheet has a menu system for rolling dice that takes 3 clicks to roll each time. This new sheet has the roll button on the sheet. Added fill from the left on all checkboxes. Added space for new skills to be added by the player. + a variety of other fixes. * Re-submiting with trailing comma removed I've also removed the translation files as you advised translations are submitted through another process. * Updated with sheetworker to improve compatibility with older sheet Added sheetworker so all stats from older sheet will now migrate properly. Changed the way dice rolls work as publisher has clarified conflicting rules in the game handbook.
584 lines
11 KiB
CSS
584 lines
11 KiB
CSS
|
|
.sheet-main {
|
|
width: 834px;
|
|
display:inline-block;
|
|
font-family: tahoma;
|
|
background: lightgrey;
|
|
border-left: 1px solid black;
|
|
border-right: 1px solid black;
|
|
border-radius: 10px 10px 0px 0px;
|
|
color: black;
|
|
}
|
|
|
|
/* SPACER */
|
|
.sheet-line {
|
|
height: 15px;
|
|
}
|
|
|
|
/* HEADINGS */
|
|
.sheet-header {
|
|
border-radius: 10px 10px 0px 0px;
|
|
background-color: black;
|
|
text-align: left;
|
|
padding: 10px;
|
|
color: white;
|
|
vertical-align: top;
|
|
font-size: 25px;
|
|
height: 110px;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.sheet-char-name {
|
|
width: 800px;
|
|
text-align:right;
|
|
display: inline-block;
|
|
font-size: 35px;
|
|
}
|
|
|
|
.sheet-footer {
|
|
background-color: black;
|
|
text-align: center;
|
|
padding: 5px;
|
|
color: white;
|
|
vertical-align: top;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
h1 {
|
|
font-size: 53px;
|
|
color: white;
|
|
margin: 0px;
|
|
}
|
|
h2 {
|
|
font-size: 35px;
|
|
color: white;
|
|
margin: 0px;
|
|
}
|
|
h5 {
|
|
font-size: 15px;
|
|
background-color: black;
|
|
text-align: center;
|
|
padding: 5px;
|
|
color: white;
|
|
vertical-align: top;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
/* CHANGE SHEET COLOR TO MATCH SECURITY CLEARANCE */
|
|
.sheet-section0,
|
|
.sheet-section1,
|
|
.sheet-section2,
|
|
.sheet-section3,
|
|
.sheet-section4,
|
|
.sheet-section5,
|
|
.sheet-section6,
|
|
.sheet-section7,
|
|
.sheet-section8 {
|
|
padding: 8px 0px 8px 30px;
|
|
border-radius: 10px 10px 0px 0px;
|
|
font-size: 30px;
|
|
border: 1px solid black;
|
|
|
|
}
|
|
.sheet-section0 {
|
|
background: black;
|
|
color: lightgrey;
|
|
}
|
|
.sheet-section1 {
|
|
background: repeating-linear-gradient(
|
|
-35deg,
|
|
#800000,
|
|
#ff0000 10px,
|
|
#DB7093 10px,
|
|
#220000 15px
|
|
);
|
|
color: lightgrey;
|
|
text-shadow: -2px -2px 0 #000, 2px -2px 0 #000, -2px 2px 0 #000, 2px 2px 0 #000;
|
|
}
|
|
.sheet-section2 {
|
|
background: repeating-linear-gradient(
|
|
-35deg,
|
|
|
|
#ff6c00,
|
|
#ffb500 10px,
|
|
#ffd700 10px,
|
|
#220000 15px
|
|
);
|
|
color: lightgrey;
|
|
text-shadow: -2px -2px 0 #000, 2px -2px 0 #000, -2px 2px 0 #000, 2px 2px 0 #000;
|
|
}
|
|
.sheet-section3 {
|
|
background: repeating-linear-gradient(
|
|
-35deg,
|
|
#ffcc00,
|
|
#ffff00 10px,
|
|
#ffffaa 10px,
|
|
#666666 15px
|
|
);
|
|
color: lightgrey;
|
|
text-shadow: -2px -2px 0 #000, 2px -2px 0 #000, -2px 2px 0 #000, 2px 2px 0 #000;
|
|
}
|
|
.sheet-section4 {
|
|
background: repeating-linear-gradient(
|
|
-35deg,
|
|
#008000,
|
|
#32cd32 10px,
|
|
#adff2f 10px,
|
|
#220000 15px
|
|
);
|
|
color: lightgrey;
|
|
text-shadow: -2px -2px 0 #000, 2px -2px 0 #000, -2px 2px 0 #000, 2px 2px 0 #000;
|
|
}
|
|
.sheet-section5 {
|
|
background: repeating-linear-gradient(
|
|
-35deg,
|
|
#4169e1,
|
|
#66b5eb 10px,
|
|
#87ceeb 10px,
|
|
#220000 15px
|
|
);
|
|
color: lightgrey;
|
|
text-shadow: -2px -2px 0 #000, 2px -2px 0 #000, -2px 2px 0 #000, 2px 2px 0 #000;
|
|
}
|
|
.sheet-section6 {
|
|
background: repeating-linear-gradient(
|
|
-35deg,
|
|
#4b0082,
|
|
#dd00dd 10px,
|
|
#9440d5 10px,
|
|
#220000 15px
|
|
);
|
|
color: lightgrey;
|
|
text-shadow: -2px -2px 0 #000, 2px -2px 0 #000, -2px 2px 0 #000, 2px 2px 0 #000;
|
|
}
|
|
.sheet-section7 {
|
|
background: repeating-linear-gradient(
|
|
-35deg,
|
|
#800080,
|
|
#ee82ee 10px,
|
|
#ee66ee 10px,
|
|
#666666 15px
|
|
);
|
|
color: lightgrey;
|
|
text-shadow: -2px -2px 0 #000, 2px -2px 0 #000, -2px 2px 0 #000, 2px 2px 0 #000;
|
|
}
|
|
.sheet-section8 {
|
|
background: repeating-linear-gradient(
|
|
-35deg,
|
|
#dddddd,
|
|
#fdfdfd 10px,
|
|
#ffffff 10px,
|
|
#666666 15px
|
|
);
|
|
color: grey;
|
|
text-shadow: -2px -2px 0 #000, 2px -2px 0 #000, -2px 2px 0 #000, 2px 2px 0 #000;
|
|
}
|
|
.charsheet h3.sheet-section0,
|
|
.charsheet h3.sheet-section1,
|
|
.charsheet h3.sheet-section2,
|
|
.charsheet h3.sheet-section3,
|
|
.charsheet h3.sheet-section4,
|
|
.charsheet h3.sheet-section5,
|
|
.charsheet h3.sheet-section6,
|
|
.charsheet h3.sheet-section7,
|
|
.charsheet h3.sheet-section8 {
|
|
display: none;
|
|
}
|
|
.sheet-show[value="-"]:checked ~ h3.sheet-section0 {
|
|
display: block;
|
|
}
|
|
.sheet-show[value="R"]:checked ~ h3.sheet-section1 {
|
|
display: block;
|
|
}
|
|
.sheet-show[value="O"]:checked ~ h3.sheet-section2 {
|
|
display: block;
|
|
}
|
|
.sheet-show[value="Y"]:checked ~ h3.sheet-section3 {
|
|
display: block;
|
|
}
|
|
.sheet-show[value="G"]:checked ~ h3.sheet-section4 {
|
|
display: block;
|
|
}
|
|
.sheet-show[value="B"]:checked ~ h3.sheet-section5 {
|
|
display: block;
|
|
}
|
|
.sheet-show[value="I"]:checked ~ h3.sheet-section6 {
|
|
display: block;
|
|
}
|
|
.sheet-show[value="V"]:checked ~ h3.sheet-section7 {
|
|
display: block;
|
|
}
|
|
.sheet-show[value="U"]:checked ~ h3.sheet-section8 {
|
|
display: block;
|
|
}
|
|
|
|
/* BODIES */
|
|
.sheet-details,
|
|
.sheet-progress,
|
|
.sheet-skills,
|
|
.sheet-storage {
|
|
vertical-align: top;
|
|
width: 808px;
|
|
display: inline-block;
|
|
background: lightgrey;
|
|
margin-left: 20px;
|
|
padding-left: 5px;
|
|
border-top: 1px solid black;
|
|
border-left: 1px solid black;
|
|
border-radius: 10px 0px 0px 0px;
|
|
}
|
|
|
|
.sheet-details{
|
|
text-align: center;
|
|
}
|
|
|
|
.sheet-details-title {
|
|
display: inline-block;
|
|
vertical-align: top;
|
|
margin-top: 4px;
|
|
margin-bottom: -2px;
|
|
}
|
|
|
|
.sheet-input {
|
|
padding: 15px 0px 0px 0px;
|
|
margin-left: 4px;
|
|
float:left;
|
|
height: 50px;
|
|
}
|
|
|
|
.sheet-node {
|
|
margin: 2px;
|
|
padding: 6px;
|
|
float:left;
|
|
border: 1px black;
|
|
border-radius: 8px;
|
|
background: black;
|
|
color: lightgrey;
|
|
}
|
|
|
|
.sheet-storage {
|
|
height: 85px;
|
|
margin-bottom: -200px;
|
|
}
|
|
|
|
.sheet-equipment {
|
|
vertical-align: top;
|
|
width: 45%;
|
|
display: inline-block;
|
|
margin-left: 30px;
|
|
}
|
|
|
|
/* CHARACTER DETAILS */
|
|
/* PROGRESS */
|
|
.sheet-title {
|
|
font-size: 14px;
|
|
font-weight: bold;
|
|
width: 100%;
|
|
text-align: center;
|
|
color: black;
|
|
vertical-align: bottom;
|
|
padding-bottom: 2px;
|
|
}
|
|
|
|
.sheet-equipment-title {
|
|
padding: 0px;
|
|
font-size: 14px;
|
|
font-weight: bold;
|
|
color: black;
|
|
}
|
|
|
|
.sheet-progress-sub {
|
|
padding: 0px;
|
|
font-size: 10px;
|
|
font-weight: bold;
|
|
color: black;
|
|
}
|
|
|
|
/* Hide actual radio */
|
|
.sheet-input input[type="radio"] {
|
|
opacity: 0;
|
|
width: 30px;
|
|
height: 30px;
|
|
position: relative;
|
|
bottom: 5px;
|
|
left: 13px;
|
|
margin: -15px;
|
|
cursor: pointer;
|
|
z-index: 1;
|
|
display:inline-block;
|
|
}
|
|
|
|
/* Fake radio */
|
|
span.sheet-body1,
|
|
span.sheet-cross,
|
|
span.sheet-star {
|
|
padding-right: 5px;
|
|
padding-top: 5px;
|
|
margin-right: 2px;
|
|
line-height: 18px;
|
|
font-family: pictos;
|
|
font-size: 25px;
|
|
}
|
|
|
|
/* First button allows selecting zero checkboxes */
|
|
span.sheet-body1::before {
|
|
border: solid 1px #a8a8a8;
|
|
display: inline-block;
|
|
vertical-align: middle;
|
|
box-shadow: 0 0 2px #ccc;
|
|
background: black;
|
|
color: lightgrey;
|
|
content: "*";
|
|
width: 20px;
|
|
height: 20px;
|
|
border-radius: 0%;
|
|
}
|
|
|
|
/* Wounds and Moxie */
|
|
/* Checked */
|
|
input[type="radio"] + span.sheet-cross::before {
|
|
border: solid 1px #a8a8a8;
|
|
display: inline-block;
|
|
vertical-align: middle;
|
|
box-shadow: 0 0 2px #ccc;
|
|
background: radial-gradient(#f6f6f6, #dfdfdf);
|
|
content: "*";
|
|
width: 20px;
|
|
height: 20px;
|
|
border-radius: 0%;
|
|
}
|
|
|
|
/* Unchecked */
|
|
input[type="radio"]:checked ~ input[type="radio"] + span.sheet-cross::before {
|
|
content: "";
|
|
}
|
|
|
|
/* Treason Stars */
|
|
/* Checked */
|
|
input[type="radio"] + span.sheet-star::before {
|
|
display: inline-block;
|
|
content: "S";
|
|
width: 25px;
|
|
height: 25px;
|
|
font-size: 35px;
|
|
color: red;
|
|
text-shadow: -1px -1px 0 #fff, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
|
|
}
|
|
|
|
/* Unchecked */
|
|
input[type="radio"]:checked ~ input[type="radio"] + span.sheet-star::before {
|
|
content: "S";
|
|
color: lightgrey;
|
|
text-shadow: -1px -1px 0 #fff, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
|
|
}
|
|
|
|
/* disable selecting moxie locked by max moxie selector */
|
|
input.sheet-arrow1:checked ~ input.sheet-body1 {
|
|
pointer-events: none;
|
|
}
|
|
input.sheet-arrow2:checked ~ input.sheet-body2{
|
|
pointer-events: none;
|
|
}
|
|
input.sheet-arrow3:checked ~ input.sheet-body3 {
|
|
pointer-events: none;
|
|
}
|
|
input.sheet-arrow4:checked ~ input.sheet-body4 {
|
|
pointer-events: none;
|
|
}
|
|
input.sheet-arrow5:checked ~ input.sheet-body5 {
|
|
pointer-events: none;
|
|
}
|
|
|
|
/* color each locked moxie checkbox grey */
|
|
input.sheet-arrow1:checked ~ span.sheet-body2 {
|
|
color:grey;
|
|
}
|
|
input.sheet-arrow2:checked ~ span.sheet-body3 {
|
|
color:grey;
|
|
}
|
|
input.sheet-arrow3:checked ~ span.sheet-body4 {
|
|
color:grey;
|
|
}
|
|
input.sheet-arrow4:checked ~ span.sheet-body5 {
|
|
color:grey;
|
|
}
|
|
input.sheet-arrow5:checked ~ span.sheet-body6 {
|
|
color:grey;
|
|
}
|
|
|
|
/* hide checkbox attached to max moxie selector */
|
|
input.sheet-arrow1 {
|
|
display: none;
|
|
}
|
|
|
|
/* NODE ROLL */
|
|
button[type="roll"] {
|
|
color: white;
|
|
background-color: black;
|
|
text-align: center;
|
|
width: 23px;
|
|
height: 23px;
|
|
margin: 0.0;
|
|
padding: 3px;
|
|
border: 1px solid white;
|
|
border-radius: 5px;
|
|
}
|
|
|
|
button, button:hover, button:active {
|
|
background-image: initial;
|
|
}
|
|
|
|
/* SKILLS */
|
|
h4 {
|
|
display:inline-block;
|
|
font-size: 16px;
|
|
background-color: black;
|
|
border-radius: 8px;
|
|
color: lightgrey;
|
|
padding: 5px 5px 10px 10px;
|
|
}
|
|
|
|
.sheet-skills-top {
|
|
background-color: black;
|
|
border: 1px;
|
|
border-radius: 8px;
|
|
padding: 5px 5px 0px 0px;
|
|
}
|
|
|
|
.sheet-row {
|
|
border: 0px solid;
|
|
font-size: 12px;
|
|
margin: 7px;
|
|
}
|
|
|
|
.sheet-row span {
|
|
vertical-align: bottom;
|
|
color: black;
|
|
font-weight: normal;
|
|
}
|
|
|
|
.sheet-row input[type="text"] {
|
|
width: 115px;
|
|
text-align: left;
|
|
color: black;
|
|
display: inline-block;
|
|
float: left ;
|
|
background-color: transparent;
|
|
margin-bottom: 0px;
|
|
font-weight: normal;
|
|
font-size: 13px;
|
|
}
|
|
|
|
.sheet-number {
|
|
display: inline-block;
|
|
float: right ;
|
|
background-color: transparent;
|
|
margin-top: 2px;
|
|
border: 1px solid black ;
|
|
padding: 2px;
|
|
font-weight: normal;
|
|
}
|
|
|
|
.sheet-extra {
|
|
display: inline-block;
|
|
float: left ;
|
|
color: black;
|
|
font-size: 18px;
|
|
background-color: transparent;
|
|
margin-bottom: 0px;
|
|
text-align: left ;
|
|
vertical-align: top;
|
|
}
|
|
|
|
/* STORAGE */
|
|
.sheet-textfield-desc {
|
|
width: 75%;
|
|
height: 30px;
|
|
resize: none;
|
|
background: transparent;
|
|
border: 1px solid black;
|
|
color: black;
|
|
}
|
|
|
|
.sheet-textfield-resc {
|
|
width: 25%;
|
|
height: 30px;
|
|
resize: none;
|
|
}
|
|
|
|
/* INPUT */
|
|
input[type="text"],
|
|
input[type="number"] {
|
|
font-size: 16px;
|
|
background-color: transparent;
|
|
border: 0 solid black;
|
|
border-bottom-width: 1px;
|
|
margin-top: 1px;
|
|
width: 100%;
|
|
color: black;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
select {
|
|
background: transparent;
|
|
border: 1px solid black;
|
|
color: black;
|
|
}
|
|
|
|
input[type="number"] {
|
|
text-align: right;
|
|
border: 1px solid black;
|
|
}
|
|
|
|
input[type=number]::-webkit-inner-spin-button,
|
|
input[type=number]::-webkit-outer-spin-button {
|
|
-webkit-appearance: none;
|
|
margin: 0;
|
|
}
|
|
|
|
input[type="number"] {
|
|
-moz-appearance: textfield;
|
|
}
|
|
|
|
/* ROLL TEMPLATE */
|
|
.sheet-rolltemplate-pa_skill {
|
|
text-transform:uppercase;
|
|
}
|
|
|
|
.sheet-rolltemplate-pa_skill .sheet-roll-title {
|
|
background-color: black;
|
|
color:white;
|
|
text-align: center;
|
|
font-weight:bolder;
|
|
font-size: 15px;
|
|
}
|
|
|
|
.sheet-rolltemplate-pa_skill .sheet-result{
|
|
background: white;
|
|
text-align: center;
|
|
padding: 15px 0px 5px 0px;
|
|
}
|
|
|
|
.sheet-rolltemplate-pa_skill .sheet-crit{
|
|
background: white;
|
|
background-image: url(https://i.imgur.com/e37Dbty.png);
|
|
background-repeat: no-repeat;
|
|
background-position: left center;
|
|
text-align: center;
|
|
padding: 15px 0px 5px 0px;
|
|
}
|
|
|
|
.sheet-rolltemplate-pa_skill .inlinerollresult.fullcrit {
|
|
border: none;
|
|
}
|
|
|
|
.sheet-rolltemplate-pa_skill .inlinerollresult {
|
|
background-color: transparent;
|
|
background-size: 0px;
|
|
border-color: transparent;
|
|
border: 0px;
|
|
color: red;
|
|
text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
|
|
font-size: 3em;
|
|
}
|