mirror of
https://github.com/Nighthawk42/roll20-character-sheets.git
synced 2026-08-30 19:52:29 +00:00
William Barker
0a05420d6c
Upon forum request, alterations were made to bring the third column into line with the other two columns
453 lines
9.7 KiB
CSS
453 lines
9.7 KiB
CSS
.charsheet label {
|
|
display: inline-block;
|
|
width: 75px;
|
|
text-align: right;
|
|
padding-bottom: 0px;
|
|
font-family: "Courier";
|
|
}
|
|
|
|
.charsheet input[type=text] {
|
|
display: inline-block;
|
|
width: 165px;
|
|
font-family: "Courier";
|
|
font-size: 12px;
|
|
height: 20px;
|
|
border: 0px;
|
|
border-radius: 0px;
|
|
|
|
-moz-box-shadow: 0px 1px 0px #000;
|
|
-webkit-box-shadow: 0px 1px 0px #000;
|
|
box-shadow: 0px 1px 0px #000;
|
|
}
|
|
|
|
.charsheet textarea {
|
|
display: inline-block;
|
|
width:100%;
|
|
margin:1px 0px;
|
|
resize:none;
|
|
font-family: "Courier";
|
|
color: #000000;
|
|
}
|
|
|
|
.charsheet {
|
|
background-color: #ffffff;
|
|
font-family: "Courier";
|
|
width: 860px;
|
|
}
|
|
|
|
.charsheet select {
|
|
width: 45px;
|
|
}
|
|
|
|
.charsheet .sheet-2colrow .sheet-col {
|
|
width: calc(50% - 1px);
|
|
margin-right: 0px;
|
|
margin-left: 0px;
|
|
}
|
|
|
|
.charsheet .sheet-3colrow .sheet-col {
|
|
width: calc(33% - 1px);
|
|
margin-right: 0px;
|
|
margin-left: 0px;
|
|
}
|
|
|
|
.charsheet input.sheet-short {
|
|
width: 145px;
|
|
}
|
|
|
|
.charsheet input.sheet-tiny {
|
|
width: 15px;
|
|
font-size: 6px;
|
|
}
|
|
|
|
.charsheet table td, .charsheet table th {
|
|
font-size: 13px;
|
|
font-weight: bolder;
|
|
font-family: "Courier";
|
|
text-align: left;
|
|
width: 0%;
|
|
border: 0px #000000;
|
|
padding: 2px;
|
|
vertical-align: middle;
|
|
color: #000000;
|
|
margin:0px 0px;
|
|
}
|
|
|
|
.charsheet hr {
|
|
border: 0;
|
|
height: 1px;
|
|
background-image: -webkit-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,100.75), rgba(0,0,0,0));
|
|
background-image: -moz-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,100.75), rgba(0,0,0,0));
|
|
background-image: -ms-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,100.75), rgba(0,0,0,0));
|
|
background-image: -o-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,100.75), rgba(0,0,0,0));
|
|
}
|
|
|
|
.charsheet h2 {
|
|
background-color: #ffffff;
|
|
color: #000000;
|
|
text-decoration:overline underline;
|
|
}
|
|
|
|
.charsheet h6 {
|
|
background-color: #ffffff;
|
|
}
|
|
|
|
.charsheet h3 {
|
|
background-color: #ffffff;
|
|
}
|
|
|
|
/* Hide actual dot/checkbox */
|
|
input[type="radio"],
|
|
input[type="checkbox"]
|
|
{
|
|
position: absolute;
|
|
opacity: 0.0;
|
|
width: 15px;
|
|
cursor: pointer;
|
|
z-index: 10;
|
|
margin-top: 5px;
|
|
}
|
|
|
|
/* Styles common to fake dot and checkbox */
|
|
input[type="radio"] + span::before,
|
|
input[type="checkbox"] + span::before
|
|
{
|
|
border: solid 1px #000000;
|
|
line-height: 11px;
|
|
text-align: middle;
|
|
display: inline-block;
|
|
vertical-align: middle;
|
|
|
|
-moz-box-shadow: 0 0 0px #000;
|
|
-webkit-box-shadow: 0 0 0px #000;
|
|
box-shadow: 0 0 0px #000;
|
|
|
|
background: #000000;
|
|
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);
|
|
}
|
|
|
|
/* Styles unique to fake dot (checked or left of checked) */
|
|
input[type="radio"] + span::before
|
|
{
|
|
content: "•";
|
|
width: 10px;
|
|
height: 10px;
|
|
font-size: 35px;
|
|
font-family: "Arial";
|
|
|
|
-moz-border-radius: 50%;
|
|
-webkit-border-radius: 50%;
|
|
border-radius: 50%;
|
|
}
|
|
|
|
/* Styles unique to fake checkbox (unchecked) */
|
|
input[type="checkbox"] + span::before
|
|
{
|
|
position:relative;
|
|
content: "";
|
|
opacity: 1.0;
|
|
width: 10px;
|
|
height: 10px;
|
|
font-size: 12px;
|
|
|
|
-moz-border-radius: 1px;
|
|
-webkit-border-radius: 1px;
|
|
border-radius: 1px;
|
|
}
|
|
|
|
/* Styles unique to fake checkbox (checked) */
|
|
input[type="checkbox"]:checked + span::before
|
|
{
|
|
content: "✖";
|
|
color: #a00;
|
|
|
|
-moz-box-shadow: 0 0 2px transparent;
|
|
-webkit-box-shadow: 0 0 2px transparent;
|
|
box-shadow: 0 0 2px transparent;
|
|
}
|
|
|
|
/* Remove dot from all radios _after_ selected one */
|
|
input[type="radio"]:checked ~ input[type="radio"] + span::before
|
|
{
|
|
content: "";
|
|
}
|
|
|
|
input.sheet-used+span::before
|
|
{
|
|
content: "✖";
|
|
width: 12px;
|
|
height: 12px;
|
|
font-size: 12px;
|
|
|
|
-moz-border-radius: 0%;
|
|
-webkit-border-radius: 0%;
|
|
border-radius: 0%;
|
|
}
|
|
|
|
input.sheet-zero:checked + span::before
|
|
{
|
|
opacity: 0;
|
|
}
|
|
|
|
input.sheet-zero:hover + span::before
|
|
{
|
|
opacity: 1;
|
|
}
|
|
|
|
input.sheet-zero+ span::before
|
|
{
|
|
font-size: 12px;
|
|
content: "✖";
|
|
opacity: 0.25;
|
|
}
|
|
|
|
input.sheet-DP1Spec + span::before,
|
|
input.sheet-DP2Spec + span::before,
|
|
input.sheet-DP2Spec + span::before,
|
|
input.sheet-DP3Spec + span::before,
|
|
input.sheet-DP4Spec + span::before,
|
|
input.sheet-DP5Spec + span::before
|
|
{
|
|
opacity: 1;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
div.sheet-DP1,
|
|
div.sheet-DP2,
|
|
div.sheet-DP2,
|
|
div.sheet-DP3,
|
|
div.sheet-DP4,
|
|
div.sheet-DP5
|
|
{
|
|
display: inline;
|
|
}
|
|
div.sheet-DP1wSpec,
|
|
div.sheet-DP2wSpec,
|
|
div.sheet-DP2wSpec,
|
|
div.sheet-DP3wSpec,
|
|
div.sheet-DP4wSpec,
|
|
div.sheet-DP5wSpec
|
|
{
|
|
display: none;
|
|
}
|
|
|
|
input.sheet-DP1Spec:checked ~ div.sheet-DP1,
|
|
input.sheet-DP2Spec:checked ~ div.sheet-DP2,
|
|
input.sheet-DP2Spec:checked ~ div.sheet-DP2,
|
|
input.sheet-DP3Spec:checked ~ div.sheet-DP3,
|
|
input.sheet-DP4Spec:checked ~ div.sheet-DP4,
|
|
input.sheet-DP5Spec:checked ~ div.sheet-DP5
|
|
{
|
|
display: none;
|
|
}
|
|
|
|
input.sheet-DP1Spec:checked ~ div.sheet-DP1wSpec,
|
|
input.sheet-DP2Spec:checked ~ div.sheet-DP2wSpec,
|
|
input.sheet-DP2Spec:checked ~ div.sheet-DP2wSpec,
|
|
input.sheet-DP3Spec:checked ~ div.sheet-DP3wSpec,
|
|
input.sheet-DP4Spec:checked ~ div.sheet-DP4wSpec,
|
|
input.sheet-DP5Spec:checked ~ div.sheet-DP5wSpec
|
|
{
|
|
display: inline;
|
|
}
|
|
|
|
h4.sheet-SCorI1,
|
|
h4.sheet-SCorI2,
|
|
h4.sheet-CorC1,
|
|
h4.sheet-CorC2
|
|
{
|
|
display: block;
|
|
}
|
|
|
|
input.sheet-SCorI1,
|
|
input.sheet-SCorI2,
|
|
input.sheet-CorC1,
|
|
input.sheet-CorC2
|
|
{
|
|
width: 120px;
|
|
}
|
|
|
|
input.sheet-SCorI1:checked ~ h4.sheet-SCorI1,
|
|
input.sheet-SCorI2:checked ~ h4.sheet-SCorI2
|
|
{
|
|
display: none;
|
|
}
|
|
|
|
input.sheet-CorC1:checked ~ h4.sheet-CorC1,
|
|
input.sheet-CorC2:checked ~ h4.sheet-CorC2
|
|
{
|
|
display: none;
|
|
}
|
|
|
|
.repcontainer {
|
|
padding-right: 2px;
|
|
}
|
|
|
|
.repitem {
|
|
padding-bottom: 3px;
|
|
}
|
|
|
|
.repcontrol {
|
|
text-align: left;
|
|
}
|
|
|
|
.sheet-reptable + .repcontainer .repitem input {
|
|
margin-right: 2px;
|
|
margin-left: 2px;
|
|
}
|
|
|
|
.sheet-reptable + .repcontainer .repitem input:nth-child(2) {
|
|
margin-left: 0px;
|
|
}
|
|
|
|
.sheet-reptable + .repcontainer .repitem input:last-child {
|
|
margin-right: 0px;
|
|
}
|
|
|
|
.sheet-reptable + .repcontainer {
|
|
padding-right: 0px;
|
|
}
|
|
|
|
.sheet-legacy {
|
|
display: none;
|
|
}
|
|
|
|
/* -----BOXES----- */
|
|
.sheet-healthboxcontainer {
|
|
position: relative;
|
|
}
|
|
|
|
.sheet-healthboxcontainer input
|
|
{
|
|
top: 0px;
|
|
right: 0px;
|
|
position: absolute;
|
|
opacity: 0;
|
|
width: 15px;
|
|
cursor: pointer;
|
|
margin-top: 5px;
|
|
z-index: 101;
|
|
}
|
|
|
|
.sheet-healthboxcontainer input + span::before
|
|
{
|
|
content: "";
|
|
opacity: 1.0;
|
|
width: 10px;
|
|
height: 10px;
|
|
font-size: 12px;
|
|
|
|
-moz-border-radius: 1px;
|
|
-webkit-border-radius: 1px;
|
|
border-radius: 1px;
|
|
|
|
border: solid 1px #000000;
|
|
line-height: 11px;
|
|
text-align: center;
|
|
vertical-align: middle;
|
|
|
|
-moz-box-shadow: 0 0 0px #000;
|
|
-webkit-box-shadow: 0 0 0px #000;
|
|
box-shadow: 0 0 0px #000;
|
|
|
|
background: #000000;
|
|
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);
|
|
}
|
|
|
|
.sheet-healthboxcontainer input:checked + span::before
|
|
{
|
|
-moz-box-shadow: 0 0 2px transparent;
|
|
-webkit-box-shadow: 0 0 2px transparent;
|
|
box-shadow: 0 0 2px transparent;
|
|
}
|
|
|
|
.sheet-healthboxcontainer input[type="radio"].sheet-whitedot:checked + span::before
|
|
{
|
|
content: "" !important;
|
|
}
|
|
|
|
.sheet-healthboxcontainer input[type="radio"].sheet-bashingdot:checked + span::before
|
|
{
|
|
background:
|
|
linear-gradient(to top left,
|
|
rgba(0,0,0,0) 0%,
|
|
rgba(0,0,0,0) calc(50% - 1.2px),
|
|
rgba(170, 0, 0, 1) 50%,
|
|
rgba(0,0,0,0) calc(50% + 1.2px),
|
|
rgba(0,0,0,0) 100%);
|
|
}
|
|
|
|
.sheet-healthboxcontainer input[type="radio"].sheet-lethaldot:checked + span::before
|
|
{
|
|
background:
|
|
linear-gradient(to top left,
|
|
rgba(0,0,0,0) 0%,
|
|
rgba(0,0,0,0) calc(50% - 1.2px),
|
|
rgba(170, 0, 0, 1) 50%,
|
|
rgba(0,0,0,0) calc(50% + 1.2px),
|
|
rgba(0,0,0,0) 100%),
|
|
linear-gradient(to top right,
|
|
rgba(0,0,0,0) 0%,
|
|
rgba(0,0,0,0) calc(50% - 1.2px),
|
|
rgba(170, 0, 0, 1) 50%,
|
|
rgba(0,0,0,0) calc(50% + 1.2px),
|
|
rgba(0,0,0,0) 100%);
|
|
}
|
|
|
|
.sheet-healthboxcontainer input[type="radio"].sheet-aggravateddot:checked + span::before
|
|
{
|
|
background:
|
|
linear-gradient(to top left,
|
|
rgba(0,0,0,0) 0%,
|
|
rgba(0,0,0,0) calc(50% - 1.2px),
|
|
rgba(170, 0, 0, 1) 50%,
|
|
rgba(0,0,0,0) calc(50% + 1.2px),
|
|
rgba(0,0,0,0) 100%),
|
|
linear-gradient(to top right,
|
|
rgba(0,0,0,0) 0%,
|
|
rgba(0,0,0,0) calc(50% - 1.2px),
|
|
rgba(170, 0, 0, 1) 50%,
|
|
rgba(0,0,0,0) calc(50% + 1.2px),
|
|
rgba(0,0,0,0) 100%),
|
|
linear-gradient(to right,
|
|
rgba(0,0,0,0) 0%,
|
|
rgba(0,0,0,0) calc(50% - 1.2px),
|
|
rgba(170, 0, 0, 1) 50%,
|
|
rgba(0,0,0,0) calc(50% + 1.2px),
|
|
rgba(0,0,0,0) 100%)
|
|
}
|
|
|
|
.sheet-healthboxcontainer input[type="radio"].sheet-whitedot {
|
|
z-index: 102;
|
|
}
|
|
|
|
input.sheet-whitedot:checked ~ input.sheet-bashingdot,
|
|
input.sheet-bashingdot:checked ~ input.sheet-lethaldot,
|
|
input.sheet-lethaldot:checked ~ input.sheet-aggravateddot {
|
|
z-index: 103;
|
|
}
|
|
|
|
.sheet-healthboxcontainer span {
|
|
display: none;
|
|
}
|
|
|
|
input.sheet-whitedot:checked ~ span.sheet-whitedot,
|
|
input.sheet-bashingdot:checked ~ span.sheet-bashingdot,
|
|
input.sheet-lethaldot:checked ~ span.sheet-lethaldot,
|
|
input.sheet-aggravateddot:checked ~ span.sheet-aggravateddot {
|
|
display: inline-block;
|
|
}
|
|
|
|
.sheet-healthcontainer {
|
|
width: 20px;
|
|
margin-left: -16px;
|
|
display: inline-block;
|
|
} |