mirror of
https://github.com/Nighthawk42/roll20-character-sheets.git
synced 2026-09-05 22:52:32 +00:00
CoalPoweredPuppet
10723dba6d
Initial Commit for two sheets; I haven't figured out submit two different sheets at the same time using this program. Not sure if anyone else had to deal with this, ever.
536 lines
11 KiB
CSS
536 lines
11 KiB
CSS
/*-----background-----*/
|
|
|
|
.charsheet {
|
|
background: white;
|
|
}
|
|
|
|
|
|
.sheet-clear {
|
|
background:none;
|
|
}
|
|
/*-----tabs-----*/
|
|
|
|
input.sheet-tab1:not(:checked) ~ .sheet-tab1,
|
|
input.sheet-tab2:not(:checked) ~ .sheet-tab2,
|
|
input.sheet-tab3:not(:checked) ~ .sheet-tab3,
|
|
input.sheet-tab4:not(:checked) ~ .sheet-tab4,
|
|
input.sheet-tab5:not(:checked) ~ .sheet-tab5,
|
|
input.sheet-tab6:not(:checked) ~ .sheet-tab6 {
|
|
display: none;
|
|
}
|
|
|
|
input.sheet-tab {
|
|
width: calc(20% - 4px);
|
|
max-width: 150px;
|
|
height: 20px;
|
|
|
|
outline: none !important;
|
|
position: relative;
|
|
cursor: pointer;
|
|
z-index: 1;
|
|
}
|
|
|
|
input.sheet-tab1 {
|
|
margin-left: 1px;
|
|
}
|
|
|
|
input.sheet-tab::before {
|
|
content: attr(title);
|
|
display: inline-block;
|
|
|
|
background: #fff;
|
|
border: solid 1px #a8a8a8;
|
|
border-top-left-radius: 4px;
|
|
border-top-right-radius: 4px;
|
|
|
|
font-size: 14px;
|
|
font-weight: bold;
|
|
text-align: center;
|
|
|
|
width: 100%;
|
|
height: 20px;
|
|
}
|
|
|
|
input.sheet-tab:checked::before {
|
|
border-bottom-color: white;
|
|
}
|
|
|
|
.sheet-tab-br {
|
|
border-bottom: 1px solid #a8a8a8;
|
|
margin-bottom: 5px;
|
|
margin-top: 1px;
|
|
}
|
|
|
|
/*-----Sheet Arrow-----*/
|
|
input.sheet-arrow {
|
|
float: left;
|
|
}
|
|
|
|
div.sheet-body {
|
|
display: none;
|
|
}
|
|
|
|
input.sheet-arrow:checked ~ div.sheet-body {
|
|
display: block;
|
|
}
|
|
|
|
/* ----Hide actual sheet-arrow checkbox---- */
|
|
|
|
input.sheet-arrow[type="checkbox"]
|
|
{
|
|
opacity: 0;
|
|
width: 16px;
|
|
height: 16px;
|
|
position: relative;
|
|
top: 5px;
|
|
left: 6px;
|
|
margin: -10px;
|
|
cursor: pointer;
|
|
z-index: 1;
|
|
}
|
|
|
|
/*-----Fake sheet-arrow checkbox-----*/
|
|
|
|
input.sheet-arrow[type="checkbox"] + span::before
|
|
{
|
|
color:white;
|
|
margin-right: 4px;
|
|
line-height: 14px;
|
|
text-align: center;
|
|
display: inline-block;
|
|
vertical-align: middle;
|
|
float: left;
|
|
content: "►";
|
|
width: 14px;
|
|
height: 14px;
|
|
font-size: 12px;
|
|
}
|
|
input.sheet-arrow[type="checkbox"]:checked + span::before
|
|
{
|
|
color:white;
|
|
content: "▼";
|
|
}
|
|
/*====Sheet Col ====*/
|
|
.sheet-wrapper .sheet-3colrow .sheet-col {
|
|
width: calc(40% - 9px) !important;
|
|
margin-right: 5px !important;
|
|
}
|
|
|
|
.sheet-wrapper .sheet-3colrow .sheet-col:nth-child(2) {
|
|
width: calc(20% - 9px) !important;
|
|
margin-right:5px;
|
|
}
|
|
|
|
.sheet-wrapper .sheet-3colrow .sheet-col:last-child {
|
|
margin-right: 0;
|
|
}
|
|
|
|
.sheet-wrapper .sheet-2colrow .sheet-col {
|
|
width: calc(50% - 3px);
|
|
margin-right: 2px;
|
|
}
|
|
|
|
.sheet-wrapper .sheet-2colrow .sheet-col:last-child {
|
|
margin-right: 0 !important;
|
|
}
|
|
|
|
.sheet-wrapper .sheet-1colrow .sheet-col {
|
|
width: calc(100% - 3px) !important;
|
|
margin-right: 0 !important;
|
|
}
|
|
/*-----sheet select-----*/
|
|
.sheet-select {
|
|
margin-bottom: 0px;
|
|
|
|
width: 100%;
|
|
text-align: center;
|
|
padding-left: 10%;
|
|
text-indent: 0.01px;
|
|
-webkit-user-select: none;
|
|
-moz-user-select: none;
|
|
-webkit-padding-end: 00px;
|
|
-moz-padding-end: 00px;
|
|
}
|
|
|
|
.sheet-wrapper .sheet-select {
|
|
border: 0 !important;
|
|
-webkit-appearance: none;
|
|
-moz-appearance: none;
|
|
background: transparent;
|
|
text-overflow: "";
|
|
text-align: center;
|
|
|
|
color: black;
|
|
border-radius: 15px;
|
|
padding-top:0px;
|
|
|
|
box-shadow: inset 0 0 5px black;
|
|
}
|
|
|
|
.sheet-wrapper select.sheet-species, select.sheet-species *, .sheet-wrapper input.sheet-species[type="text"] {
|
|
text-shadow: 0px 0px 5px #23AB4C;
|
|
background: white;
|
|
box-shadow: inset 0 0 5px #23AB4C;
|
|
}
|
|
|
|
.sheet-wrapper select.sheet-career, select.sheet-career *, .sheet-wrapper input.sheet-career[type="text"] {
|
|
text-shadow: 0px 0px 5px #A54885;
|
|
background: white;
|
|
box-shadow: inset 0 0 5px #A54885;
|
|
}
|
|
|
|
.sheet-wrapper select.sheet-body, select.sheet-body * {
|
|
text-shadow: 0px 0px 5px silver;
|
|
background: white;
|
|
box-shadow: inset 0 0 5px silver;
|
|
}
|
|
|
|
.sheet-wrapper select.sheet-speed, select.sheet-speed * {
|
|
text-shadow: 0px 0px 5px #FFF100;
|
|
background: white;
|
|
box-shadow: inset 0 0 5px #FFF100;
|
|
}
|
|
|
|
.sheet-wrapper select.sheet-mind, select.sheet-mind * {
|
|
text-shadow: 0px 0px 5px #00ADEF;
|
|
background: white;
|
|
box-shadow: inset 0 0 5px #00ADEF;
|
|
}
|
|
|
|
.sheet-wrapper select.sheet-will, select.sheet-will * {
|
|
text-shadow: 0px 0px 5px #ED2229;
|
|
background: white;
|
|
box-shadow: inset 0 0 5px #ED2229;
|
|
}
|
|
/*-----text-----*/
|
|
|
|
h5 {
|
|
text-shadow: 0px 0px 10px black;
|
|
color:black;
|
|
}
|
|
|
|
th {
|
|
text-shadow: 0px 0px 10px black;
|
|
color:black;
|
|
}
|
|
|
|
h4 {
|
|
text-shadow: 0px 0px 10px black;
|
|
color:black;
|
|
}
|
|
|
|
h2 {
|
|
text-shadow: 0px 0px 20px black;
|
|
color:black;
|
|
}
|
|
|
|
{
|
|
text-shadow: 0px 0px 10px black;
|
|
color:black;
|
|
}
|
|
|
|
.sheet-center {
|
|
text-align: center
|
|
}
|
|
|
|
.sheet-left {
|
|
text-align: left
|
|
}
|
|
|
|
.sheet-right {
|
|
text-align: right
|
|
}
|
|
|
|
.sheet-motto {
|
|
text-align: center;
|
|
font-style: italic;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.sheet-goal {
|
|
text-align: center;
|
|
font-style: italic;
|
|
}
|
|
/*====text box ====*/
|
|
.sheet-wrapper input[type="text"], .sheet-wrapper input[type="number"], .sheet-wrapper textarea {
|
|
display: inline-block;
|
|
border-top: none;
|
|
border-left: none;
|
|
border-right: none;
|
|
border-bottom: 1px dotted gray;
|
|
background-color: transparent;
|
|
vertical-align: middle;
|
|
}
|
|
|
|
/*-----textarea-----*/
|
|
|
|
textarea {
|
|
height: 30px;
|
|
}
|
|
|
|
table.sheet-center {
|
|
text-align: center;
|
|
margin-left:auto;
|
|
margin-right:auto;
|
|
}
|
|
/*--------------Big Checkbox--------------*/
|
|
|
|
/* ----Hide actual sheet-arrow checkbox---- */
|
|
input.sheet-bigcheck[type="checkbox"]
|
|
{
|
|
opacity: 0;
|
|
width: 16px;
|
|
height: 16px;
|
|
position: relative;
|
|
top: 5px;
|
|
left: 6px;
|
|
margin: -10px;
|
|
cursor: pointer;
|
|
z-index: 1;
|
|
}
|
|
|
|
/* ----Fake sheet-arrow checkbox---- */
|
|
input.sheet-bigcheck[type="checkbox"] + span::before
|
|
{
|
|
margin-right: 4px;
|
|
border: solid 1px #a8a8a8;
|
|
line-height: 14px;
|
|
text-align: center;
|
|
display: inline-block;
|
|
vertical-align: middle;
|
|
|
|
-moz-box-shadow: 0 0 2px #ccc;
|
|
-webkit-box-shadow: 0 0 2px #ccc;
|
|
box-shadow: 0 0 2px #ccc;
|
|
|
|
background: #f6f6f6;
|
|
background: -moz-radial-gradient(#f6f6f6, #dfdfdf);
|
|
background: -webkit-radial-gradient(#f6f6f6, #dfdfdf);
|
|
background: -ms-radial-gradient(#f6f6f6, #dfdfdf);
|
|
background: -o-radial-gradient(#f6f6f6, #dfdfdf);
|
|
background: radial-gradient(#f6f6f6, #dfdfdf);
|
|
}
|
|
|
|
input.sheet-bigcheck[type="checkbox"] + span::before
|
|
{
|
|
content: "";
|
|
width: 14px;
|
|
height: 14px;
|
|
font-size: 12px;
|
|
|
|
-moz-border-radius: 3px;
|
|
-webkit-border-radius: 3px;
|
|
border-radius: 3px;
|
|
}
|
|
|
|
input.sheet-bigcheck[type="checkbox"]:checked + span::before
|
|
{
|
|
color: red;
|
|
content: "✖";
|
|
}
|
|
|
|
input.sheet-black[type="checkbox"] + span::before
|
|
{
|
|
color: black;
|
|
content: "✖";
|
|
width: 14px;
|
|
height: 14px;
|
|
font-size: 12px;
|
|
|
|
-moz-border-radius: 3px;
|
|
-webkit-border-radius: 3px;
|
|
border-radius: 3px;
|
|
}
|
|
input.sheet-black[type="checkbox"]:checked + span::before
|
|
{
|
|
color: black;
|
|
content: "✖";
|
|
}
|
|
/*-----Hidden-----*/
|
|
.sheet-hidden {
|
|
display:block;
|
|
}
|
|
|
|
/*--------------Round checkbox--------------*/
|
|
|
|
/* ----Hide actual roundcheck checkbox---- */
|
|
input.sheet-roundcheck[type="checkbox"]
|
|
{
|
|
opacity: 0;
|
|
width: 16px;
|
|
height: 16px;
|
|
position: relative;
|
|
top: 5px;
|
|
left: 6px;
|
|
margin: -10px;
|
|
cursor: pointer;
|
|
z-index: 1;
|
|
}
|
|
|
|
/* ----Fake roundcheck checkbox---- */
|
|
input.sheet-roundcheck[type="checkbox"] + span::before
|
|
{
|
|
margin-right: 4px;
|
|
border: solid 1px #a8a8a8;
|
|
line-height: 14px;
|
|
text-align: center;
|
|
display: inline-block;
|
|
vertical-align: middle;
|
|
border-radius: 20px 20px 20px 20px;
|
|
|
|
-moz-box-shadow: 0 0 20px #ccc;
|
|
-webkit-box-shadow: 0 0 20px #ccc;
|
|
box-shadow: 0 0 20px #ccc;
|
|
|
|
background: #f6f6f6;
|
|
background: -moz-radial-gradient(#f6f6f6, #dfdfdf);
|
|
background: -webkit-radial-gradient(#f6f6f6, #dfdfdf);
|
|
background: -ms-radial-gradient(#f6f6f6, #dfdfdf);
|
|
background: -o-radial-gradient(#f6f6f6, #dfdfdf);
|
|
background: radial-gradient(#f6f6f6, #dfdfdf);
|
|
|
|
-moz-border-radius: 20px 20px 20px 20px;
|
|
-webkit-border-radius: 20px 20px 20px 20px;
|
|
border-radius: 20px 20px 20px 20px;
|
|
}
|
|
|
|
input.sheet-roundcheck[type="checkbox"] + span::before
|
|
{
|
|
content: "";
|
|
width: 14px;
|
|
height: 14px;
|
|
font-size: 12px;
|
|
|
|
-moz-border-radius: 20px;
|
|
-webkit-border-radius: 20px;
|
|
border-radius: 20px;
|
|
}
|
|
input.sheet-roundcheck[type="checkbox"]:checked + span::before
|
|
{
|
|
color: red;
|
|
font-size: 1em;
|
|
content: "✓";
|
|
}
|
|
|
|
/* Button Reset */
|
|
.charsheet .sheet-wrapper button[type="roll"]:before {
|
|
content: ""!important;
|
|
display: none;
|
|
}
|
|
.charsheet .sheet-wrapper button[type="roll"],
|
|
.charsheet .sheet-wrapper .sheet-roll {
|
|
width: 100%;
|
|
height:24px;
|
|
vertical-align: middle;
|
|
padding: 0;
|
|
display: inline-block;
|
|
margin: 0;
|
|
font-weight: 400;
|
|
text-align: center;
|
|
vertical-align: middle;
|
|
cursor: pointer;
|
|
background-image: none;
|
|
|
|
background-color: transparent;
|
|
border: 1px solid black;
|
|
|
|
white-space: nowrap;
|
|
border-radius: 4px;
|
|
-webkit-user-select: none;
|
|
-moz-user-select: none;
|
|
-ms-user-select: none;
|
|
user-select: none;
|
|
box-sizing: border-box;
|
|
-moz-box-sizing: border-box;
|
|
-webkit-box-sizing: border-box;
|
|
}
|
|
|
|
.charsheet .sheet-wrapper button[type="roll"]:hover,
|
|
.charsheet .sheet-wrapper .sheet-roll:hover,
|
|
.charsheet .sheet-wrapper .sheet-hider input[type=checkbox]:checked ~ .sheet-btn {
|
|
background-color: black;
|
|
border-color: red;
|
|
}
|
|
|
|
.charsheet .sheet-wrapper .sheet-hider input[type=checkbox]:checked ~ .sheet-btn {
|
|
}
|
|
|
|
.charsheet .sheet-wrapper button[type="roll"] label,
|
|
.charsheet .sheet-wrapper button[type="roll"] input {
|
|
height:24px;
|
|
line-height: 24px;
|
|
font-size: 11px; /*13px*/
|
|
vertical-align: middle;
|
|
text-align:center;
|
|
width: 99%;
|
|
cursor: pointer;
|
|
background: none;
|
|
box-shadow: none;
|
|
transition: none;
|
|
border-radius: none;
|
|
border:none;
|
|
font-weight:700;
|
|
}
|
|
|
|
.charsheet .sheet-wrapper button[type="roll"] input {
|
|
}
|
|
|
|
.charsheet .sheet-wrapper button[type="roll"]:hover label,
|
|
.charsheet .sheet-wrapper button[type="roll"]:hover input {
|
|
color: white;
|
|
border: none;
|
|
}
|
|
|
|
.sheet-speedroll button[type="roll"] {
|
|
border: 1px solid #FFF100;
|
|
}
|
|
|
|
.sheet-speedroll button[type="roll"]:hover label {
|
|
background-color: #FFF100;
|
|
color:black;
|
|
}
|
|
|
|
.sheet-bodyroll button[type="roll"] {
|
|
border: 1px solid silver;
|
|
}
|
|
|
|
.sheet-bodyroll button[type="roll"]:hover label {
|
|
background-color: silver;
|
|
color:black;
|
|
}
|
|
|
|
.sheet-mindroll button[type="roll"] {
|
|
border: 1px solid #00ADEF;
|
|
}
|
|
|
|
.sheet-mindroll button[type="roll"]:hover label {
|
|
background-color: #00ADEF;
|
|
color:black;
|
|
}
|
|
|
|
.sheet-willroll button[type="roll"] {
|
|
border: 1px solid #ED2229;
|
|
}
|
|
|
|
.sheet-willroll button[type="roll"]:hover label {
|
|
background-color: #ED2229;
|
|
color:black;
|
|
}
|
|
|
|
.sheet-speciesroll button[type="roll"] {
|
|
border: 1px solid #23AB4C;
|
|
}
|
|
|
|
.sheet-speciesroll button[type="roll"]:hover label {
|
|
background-color: #23AB4C;
|
|
color:black;
|
|
}
|
|
|
|
.sheet-careerroll button[type="roll"] {
|
|
border: 1px solid #A54885;
|
|
}
|
|
|
|
.sheet-careerroll button[type="roll"]:hover label {
|
|
background-color: #A54885;
|
|
color:black;
|
|
} |