mirror of
https://github.com/Nighthawk42/roll20-character-sheets.git
synced 2026-08-30 19:52:29 +00:00
504 lines
9.5 KiB
CSS
504 lines
9.5 KiB
CSS
|
|
.charsheet {
|
|
background:black;
|
|
width:840px;
|
|
}
|
|
|
|
div.sheet-top,
|
|
div.sheet-middle,
|
|
div.sheet-bottom {
|
|
background:#F5F5DC;
|
|
width:830px;
|
|
border-radius: 15px;
|
|
padding:5px;
|
|
}
|
|
div.sheet-box {
|
|
border:1px solid black;
|
|
width:100%;
|
|
}
|
|
/* 3colrow */
|
|
|
|
.charsheet .sheet-3colrow .sheet-col {
|
|
width: calc(33% - 9px) !important;
|
|
margin-right: 5px !important;
|
|
}
|
|
|
|
.charsheet .sheet-3colrow .sheet-col:last-child {
|
|
margin-right: 0 !important;
|
|
}
|
|
/* Grid */
|
|
div.sheet-grid {
|
|
display: grid;
|
|
grid-template-columns: 300px 300px 200px;
|
|
grid-column-gap: 5px;
|
|
}
|
|
div.sheet-grid2 {
|
|
display: grid;
|
|
grid-template-columns: 360px 200px 200px;
|
|
grid-column-gap: 10px;
|
|
}
|
|
div.sheet-grid3 {
|
|
display: grid;
|
|
grid-template-columns: 90px 90px 90px 90px;
|
|
grid-column-gap: 1px;
|
|
grid-row-gap: 1px;
|
|
text-align:right;
|
|
}
|
|
div.sheet-grid4 {
|
|
display: grid;
|
|
grid-template-columns: 33% 34% 33%;
|
|
grid-column-gap: 0px;
|
|
}
|
|
div.sheet-grid5 {
|
|
display: grid;
|
|
grid-template-columns: 200px;
|
|
grid-row-gap: 0px;
|
|
grid-template-rows:30px 80px 80px 80px 60px;
|
|
}
|
|
div.sheet-grid_box {
|
|
border:1px solid black;
|
|
}
|
|
div.sheet-grid_box_2 {
|
|
border:1px solid black;
|
|
height:80px;
|
|
width:100%;
|
|
}
|
|
div.sheet-grid_box_2.sheet-wound_2 {
|
|
border:1px dotted black;}
|
|
|
|
div.sheet-grid_box_3 {
|
|
height:24px;
|
|
width:195px;
|
|
}
|
|
div.align_middle {
|
|
margin-top:auto;
|
|
margin-bottom:auto;
|
|
vertical-align:middle;
|
|
|
|
}
|
|
div.sheet-spacer {
|
|
height:20px;
|
|
width:66px;
|
|
}
|
|
/* text */
|
|
input.sheet-name {
|
|
width:100%;
|
|
height:40px;
|
|
background: transparent;
|
|
font-variant: small-caps;
|
|
font-size: 35px;
|
|
font-family: 'Copperplate';
|
|
border:none;
|
|
}
|
|
input.sheet-data {
|
|
width:100%;
|
|
height:20px;
|
|
background: transparent;
|
|
font-family: 'Copperplate';
|
|
border-top:none;
|
|
border-left:none;
|
|
border-right:none;
|
|
border-bottom:1px solid black;
|
|
}
|
|
div.sheet-label {
|
|
font-family: 'Courier New';
|
|
text-align:right;
|
|
font-size: 35px;
|
|
font-weight:bold;
|
|
|
|
}
|
|
div.sheet-label_2 {
|
|
font-family: 'Courier New';
|
|
text-align:center;
|
|
font-size: 1.2em;
|
|
font-weight:bold;
|
|
}
|
|
.sheet-underline {
|
|
border-top:1px solid black;
|
|
border-bottom:1px solid black;
|
|
}
|
|
.sheet-center {
|
|
text-align:center;
|
|
margin: auto;
|
|
}
|
|
/* number */
|
|
input.sheet-number_1 {
|
|
width:79px;
|
|
height:35px;
|
|
font-size:30px;
|
|
background: transparent;
|
|
font-family: 'Copperplate';
|
|
text-align:center;
|
|
border:none;
|
|
|
|
}
|
|
/* Rows and Items */
|
|
.charsheet .sheet-row {
|
|
height: 24px;
|
|
margin: 2px 0px 2px;
|
|
}
|
|
.charsheet .sheet-doublerow {
|
|
height: 48px;
|
|
margin: 2px 0px 2px;
|
|
}
|
|
.charsheet .sheet-item {
|
|
display: inline-block;
|
|
width: 100%;
|
|
height: 28px;
|
|
vertical-align: middle;
|
|
margin: 0 -2px;
|
|
text-align: left;
|
|
padding: 3px 2px;
|
|
}
|
|
.charsheet .sheet-trait {
|
|
position: relative;
|
|
}
|
|
.charsheet .sheet-item.sheet-5 {
|
|
width: 5px;
|
|
}
|
|
.charsheet .sheet-item.sheet-14 {
|
|
width: 14px;
|
|
}
|
|
.charsheet .sheet-item.sheet-20 {
|
|
width: 20px;
|
|
}
|
|
.charsheet .sheet-item.sheet-30 {
|
|
width: 30px;
|
|
}
|
|
.charsheet .sheet-item.sheet-40 {
|
|
width: 40px;
|
|
}
|
|
.charsheet .sheet-item.sheet-50 {
|
|
width: 50px;
|
|
}
|
|
.charsheet .sheet-item.sheet-60 {
|
|
width: 60px;
|
|
}
|
|
.charsheet .sheet-item.sheet-65 {
|
|
width: 65px;
|
|
}
|
|
.charsheet .sheet-item.sheet-70 {
|
|
width: 70px;
|
|
}
|
|
.charsheet .sheet-item.sheet-80 {
|
|
width: 80px;
|
|
}
|
|
.charsheet .sheet-item.sheet-85 {
|
|
width: 85px;
|
|
}
|
|
.charsheet .sheet-item.sheet-90 {
|
|
width: 90px;
|
|
}
|
|
.charsheet .sheet-item.sheet-100 {
|
|
width: 100px;
|
|
}
|
|
.charsheet .sheet-item.sheet-110 {
|
|
width: 110px;
|
|
}
|
|
.charsheet .sheet-item.sheet-120 {
|
|
width: 120px;
|
|
}
|
|
.charsheet .sheet-item.sheet-140 {
|
|
width: 140px;
|
|
}
|
|
.charsheet .sheet-item.sheet-150 {
|
|
width: 150px;
|
|
}
|
|
.charsheet .sheet-item.sheet-160 {
|
|
width: 160px;
|
|
}
|
|
.charsheet .sheet-item.sheet-180 {
|
|
width: 180px;
|
|
}
|
|
.charsheet .sheet-item.sheet-195 {
|
|
width: 195px;
|
|
}
|
|
.charsheet .sheet-item.sheet-200 {
|
|
width: 200px;
|
|
}
|
|
.charsheet .sheet-item.sheet-210 {
|
|
width: 210px;
|
|
}
|
|
.charsheet .sheet-item.sheet-230 {
|
|
width: 230px;
|
|
}
|
|
.charsheet .sheet-item.sheet-395 {
|
|
width: 395px;
|
|
}
|
|
.charsheet .sheet-item.sheet-400 {
|
|
width: 400px;
|
|
}
|
|
.sheet-real {
|
|
width: auto;
|
|
}
|
|
.charsheet .sheet-long {
|
|
width: 300px;
|
|
}
|
|
.charsheet .sheet-row label {
|
|
font-size:13px;
|
|
font-weight:900;
|
|
text-align:left;
|
|
}
|
|
/* =====Buttons ===== */
|
|
button[type=roll].sheet-btn:before {
|
|
content: "";
|
|
}
|
|
button[type=roll].sheet-btn {
|
|
margin:0px;
|
|
padding:0px;
|
|
background:transparent;
|
|
font-size:13px;
|
|
font-weight:bold;
|
|
box-shadow:none;
|
|
height:16px;
|
|
width:100%;
|
|
color:#333;
|
|
border:none;
|
|
text-align:center;
|
|
}
|
|
button[type=roll].sheet-btn:hover {
|
|
color:#8b0000;
|
|
}
|
|
button[type=roll].sheet-btn:active {
|
|
color: #000000;
|
|
}
|
|
/* Yes No */
|
|
div.sheet-condition {
|
|
position: relative;
|
|
left: 0px;
|
|
top: 0px;
|
|
width: 200px;
|
|
height: 20px;
|
|
line-height:18px;
|
|
margin-left: 0px;
|
|
}
|
|
input.sheet-condition {
|
|
width: 200px;
|
|
height: 20px;
|
|
position: absolute;
|
|
left:0px;
|
|
top:0px;
|
|
z-index: 1;
|
|
opacity: 0;
|
|
}
|
|
span.sheet-condition {
|
|
margin: 0px 0 0 0px;
|
|
display: none;
|
|
position: absolute;
|
|
left:0px;
|
|
top:0px;
|
|
width:30px;
|
|
}
|
|
input.sheet-no {
|
|
z-index: 2;
|
|
}
|
|
span.sheet-no {
|
|
width: 200px;
|
|
font-weight:bold;
|
|
color:gray;
|
|
text-decoration: line-through;
|
|
line-height:18px;
|
|
}
|
|
span.sheet-yes {
|
|
width: 200px;
|
|
font-weight:bold;
|
|
color:red;
|
|
line-height:18px;
|
|
text-shadow:0px 0px 5px white, 0px 0px 15px red, 0px 0px 20px red, 0px 0px 25px red;
|
|
}
|
|
input.sheet-no:checked + input.sheet-yes,
|
|
input.sheet-yes:checked + input.sheet-no {
|
|
z-index: 3;
|
|
}
|
|
input.sheet-no:checked ~ span.sheet-no,
|
|
input.sheet-yes:checked ~ span.sheet-yes {
|
|
display: inline-block;
|
|
}
|
|
/* Hit Points */
|
|
|
|
/* Yes No */
|
|
div.sheet-wounds {
|
|
position: relative;
|
|
left: 0px;
|
|
top: 0px;
|
|
width: 100%;
|
|
height: 80px;
|
|
margin-left: 0px;
|
|
}
|
|
input.sheet-wounds {
|
|
width: 100%;
|
|
height: 80px;
|
|
position: absolute;
|
|
left:0px;
|
|
top:0px;
|
|
z-index: 1;
|
|
opacity: 0;
|
|
}
|
|
span.sheet-wounds {
|
|
margin: 0px 0 0 0px;
|
|
display: none;
|
|
position: absolute;
|
|
left:0px;
|
|
top:0px;
|
|
width:66px;
|
|
}
|
|
input.sheet-no_wound {
|
|
z-index: 2;
|
|
}
|
|
span.sheet-no_wound {
|
|
width: 100%;
|
|
height: 80px;
|
|
box-shadow:inset 0px 0px 5px black;
|
|
background:none;
|
|
}
|
|
span.sheet-no_wound.sheet-wound_2 {
|
|
opacity: 0.5;
|
|
box-shadow:inset 0px 0px 5px white;
|
|
}
|
|
span.sheet-yes_wound {
|
|
width: 100%;
|
|
height: 80px;
|
|
box-shadow:inset 0px 0px 5px black;
|
|
background: url("https://66.media.tumblr.com/6742ac9ca18749792bc01f54a2dbc243/45a49b82204df087-d3/s400x600/4482fcdc67cd2bc2887f94069cf6e156fe763538.png") no-repeat 0 0;
|
|
background-size: contain;
|
|
}
|
|
span.sheet-yes_wound.sheet-wound_2 {
|
|
opacity: 0.5;
|
|
box-shadow:inset 0px 0px 5px white;
|
|
}
|
|
input.sheet-no_wound:checked + input.sheet-yes_wound,
|
|
input.sheet-yes_wound:checked + input.sheet-no_wound {
|
|
z-index: 3;
|
|
}
|
|
input.sheet-no_wound:checked ~ span.sheet-no_wound,
|
|
input.sheet-yes_wound:checked ~ span.sheet-yes_wound {
|
|
display: inline-block;
|
|
}
|
|
|
|
/* Hide actual radio/checkbox */
|
|
input.sheet-fancy_1[type="checkbox"] {
|
|
opacity: 0;
|
|
width: 24px;
|
|
height: 24px;
|
|
position: relative;
|
|
top: 5px;
|
|
left: 6px;
|
|
margin: -10px;
|
|
cursor: pointer;
|
|
}
|
|
/* Fake checkbox */
|
|
input.sheet-fancy_1[type="checkbox"] + span::before {
|
|
margin-right: 4px;
|
|
line-height: 14px;
|
|
text-align: center;
|
|
display: inline-block;
|
|
vertical-align: middle;
|
|
font-family: 'Pictos';
|
|
content: "E";
|
|
width: 24px;
|
|
height: 24px;
|
|
font-size: 24px;
|
|
color:black;
|
|
}
|
|
|
|
input.sheet-fancy_1[type="checkbox"]:checked + span::before {
|
|
font-family: 'Pictos';
|
|
content: "E";
|
|
color:red;
|
|
text-shadow:0px 0px 5px black, 0px 0px 15px red, 0px 0px 20px red, 0px 0px 25px red;
|
|
}
|
|
/* Hide actual radio/checkbox */
|
|
input.sheet-fancy_2[type="checkbox"] {
|
|
opacity: 0;
|
|
width: 24px;
|
|
height: 24px;
|
|
position: relative;
|
|
top: 5px;
|
|
left: 6px;
|
|
margin: -10px;
|
|
cursor: pointer;
|
|
}
|
|
/* Fake checkbox */
|
|
input.sheet-fancy_2[type="checkbox"] + span::before {
|
|
margin-right: 4px;
|
|
line-height: 14px;
|
|
text-align: center;
|
|
display: inline-block;
|
|
vertical-align: middle;
|
|
font-family: 'Pictos';
|
|
content: "!";
|
|
width: 24px;
|
|
height: 24px;
|
|
font-size: 24px;
|
|
color:black;
|
|
}
|
|
|
|
input.sheet-fancy_2[type="checkbox"]:checked + span::before {
|
|
font-family: 'Pictos';
|
|
content: "!";
|
|
color:red;
|
|
text-shadow:0px 0px 5px black, 0px 0px 15px red, 0px 0px 20px red, 0px 0px 25px red;
|
|
}
|
|
/* %%%%% %%%%% %%%%% */
|
|
/* b7 */
|
|
/* %%%%% %%%%% %%%%% */
|
|
.sheet-rolltemplate-b7 {
|
|
width: 190px;
|
|
padding: 2px;
|
|
background: white;
|
|
border-radius:8px;
|
|
border-width:1px;
|
|
border-style:solid;
|
|
color:black;
|
|
font-family: 'Courier New';
|
|
}
|
|
.sheet-rolltemplate-b7 b.sheet-1 {
|
|
color:red;
|
|
font-size:1em;
|
|
}
|
|
.sheet-rolltemplate-b7 b.sheet-2 {
|
|
color:darkred;
|
|
font-size:1.4em;
|
|
font-variant:small-caps;
|
|
}
|
|
.sheet-rolltemplate-b7 span {
|
|
color:red;
|
|
font-size:1.2em;
|
|
background:transparent;
|
|
border:none;
|
|
}
|
|
.sheet-rolltemplate-b7 span.sheet-success {
|
|
font-family: 'Lucida Sans Typewriter';
|
|
color:green;
|
|
font-size:1.1em;
|
|
font-weight:bold;
|
|
}
|
|
.sheet-rolltemplate-b7 span.sheet-failure {
|
|
font-family: 'Lucida Sans Typewriter';
|
|
color:red;
|
|
font-size:1.1em;
|
|
font-weight:bold;
|
|
}
|
|
.sheet-rolltemplate-b7 .sheet-result {
|
|
font-size: 1.2em;
|
|
text-align: center;
|
|
color: rgb(112, 0, 0);
|
|
padding-bottom: 20px;
|
|
}
|
|
.sheet-rolltemplate-b7 .inlinerollresult {
|
|
background-color: transparent;
|
|
color: #000000;
|
|
border: none;
|
|
}
|
|
.sheet-rolltemplate-b7 .inlinerollresult.fullcrit {
|
|
color: #3FB315;
|
|
border: none;
|
|
}
|
|
.sheet-rolltemplate-b7 .inlinerollresult.fullfail {
|
|
color: #000000;
|
|
border: none;
|
|
}
|
|
.sheet-rolltemplate-b7 .inlinerollresult.importantroll {
|
|
color: #3FB315;
|
|
border: none;
|
|
} |