mirror of
https://github.com/Nighthawk42/roll20-character-sheets.git
synced 2026-09-08 16:12:33 +00:00
619 lines
15 KiB
CSS
619 lines
15 KiB
CSS
/*-----background-----*/
|
|
|
|
.charsheet {
|
|
background-image: url("http://fc01.deviantart.net/fs14/f/2007/096/b/a/Old_Paper_by_sampsonx.jpg");
|
|
}
|
|
/*-----other background: http://wallpapersweb.com/data/media/34/steampunk.jpg-----*/
|
|
|
|
/*-----text colouring----*/
|
|
|
|
{
|
|
color: white;
|
|
text-shadow: 0px 0px 0.2em #6C3306;
|
|
}
|
|
|
|
h1 {
|
|
color: #9C0606;
|
|
text-shadow: 0px 0px 0.2em white;
|
|
}
|
|
|
|
h2 {
|
|
color: #9C0606;
|
|
text-shadow: 0px 0px 0.2em white;
|
|
}
|
|
|
|
h3 {
|
|
color: white;
|
|
text-shadow: 0px 0px 0.5em #6C3306;
|
|
}
|
|
|
|
h4 {
|
|
color: #9C0606;
|
|
text-shadow: 0px 0px 0.2em white;
|
|
}
|
|
|
|
h4.sheet-physfont {
|
|
color: blue;
|
|
text-shadow: 0px 0px 0.2em white;
|
|
}
|
|
|
|
h4.sheet-aglfont {
|
|
color: red;
|
|
text-shadow: 0px 0px 0.2em white;
|
|
}
|
|
|
|
h4.sheet-intfont {
|
|
color: green;
|
|
text-shadow: 0px 0px 0.2em white;
|
|
}
|
|
|
|
h5 {
|
|
color: white;
|
|
text-shadow: 0px 0px 0.2em #6C3306;
|
|
}
|
|
|
|
/*-----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,
|
|
input.sheet-tab7:not(:checked) ~ .sheet-tab7,
|
|
input.sheet-tab8:not(:checked) ~ .sheet-tab8,
|
|
input.sheet-tab9:not(:checked) ~ .sheet-tab9,
|
|
input.sheet-tab10:not(:checked) ~ .sheet-tab10,
|
|
input.sheet-tab11:not(:checked) ~ .sheet-tab11 {
|
|
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;
|
|
}
|
|
|
|
input.sheet-arrow {
|
|
float: left;
|
|
}
|
|
|
|
div.sheet-body {
|
|
display: none;
|
|
}
|
|
|
|
input.sheet-arrow:checked ~ div.sheet-body {
|
|
display: block;
|
|
}
|
|
|
|
/*-----misc-----*/
|
|
|
|
div.sheet-hidden {
|
|
display: none;
|
|
}
|
|
|
|
.sheet-center {
|
|
text-align: center;
|
|
}
|
|
|
|
.sheet-left {
|
|
text-align: left;
|
|
}
|
|
|
|
.sheet-right {
|
|
text-align: right;
|
|
}
|
|
|
|
.sheet-select {
|
|
margin-bottom: 0
|
|
}
|
|
|
|
/*-----feat number button-----*/
|
|
|
|
div.sheet-feat {
|
|
width: 195px;
|
|
height: 30px;
|
|
position: relative;
|
|
}
|
|
|
|
input.sheet-feat {
|
|
margin: 20px 0 0 50px;
|
|
opacity: 00;
|
|
width: 80px;
|
|
height: 80px;
|
|
position: absolute;
|
|
z-index: 1;
|
|
}
|
|
|
|
span.sheet-feat {
|
|
margin: 10px 0 0 40px;
|
|
display: none;
|
|
}
|
|
|
|
input.sheet-zerofeat { z-index: 2; }
|
|
|
|
input.sheet-zerofeat:checked + input.sheet-onefeat,
|
|
input.sheet-onefeat:checked + input.sheet-twofeat,
|
|
input.sheet-twofeat:checked + input.sheet-threefeat { z-index: 3; }
|
|
|
|
input.sheet-zerofeat:checked ~ span.sheet-zerofeat,
|
|
input.sheet-onefeat:checked ~ span.sheet-onefeat,
|
|
input.sheet-twofeat:checked ~ span.sheet-twofeat,
|
|
input.sheet-threefeat:checked ~ span.sheet-threefeat { display: inline-block; }
|
|
|
|
.sheet-zerofeat
|
|
{
|
|
width: 100px;
|
|
height: 100px;
|
|
background: url("http://cdn.mysitemyway.com/etc-mysitemyway/icons/legacy-previews/icons/abstract-red-and-gold-paint-splatter-icons-alphanumeric/068225-abstract-red-and-gold-paint-splatter-icon-alphanumeric-m00-clear.png") no-repeat 0 0;
|
|
background-size: 100%;
|
|
}
|
|
|
|
.sheet-onefeat
|
|
{
|
|
width: 100px;
|
|
height: 100px;
|
|
background: url("http://cdn.mysitemyway.com/etc-mysitemyway/icons/legacy-previews/icons/abstract-red-and-gold-paint-splatter-icons-alphanumeric/068226-abstract-red-and-gold-paint-splatter-icon-alphanumeric-m01-clear.png") no-repeat 0 0;
|
|
background-size: 100%;
|
|
}
|
|
|
|
.sheet-twofeat
|
|
{
|
|
width: 100px;
|
|
height: 100px;
|
|
background: url("http://cdn.mysitemyway.com/etc-mysitemyway/icons/legacy-previews/icons/abstract-red-and-gold-paint-splatter-icons-alphanumeric/068227-abstract-red-and-gold-paint-splatter-icon-alphanumeric-m02-clear.png") no-repeat 0 0;
|
|
background-size: 100%;
|
|
}
|
|
|
|
.sheet-threefeat
|
|
{
|
|
width: 100px;
|
|
height: 100px;
|
|
background: url("http://cdn.mysitemyway.com/etc-mysitemyway/icons/legacy-previews/icons/abstract-red-and-gold-paint-splatter-icons-alphanumeric/068228-abstract-red-and-gold-paint-splatter-icon-alphanumeric-m03-clear.png") no-repeat 0 0;
|
|
background-size: 100%;
|
|
}
|
|
|
|
/*--------------sheet arrow--------------*/
|
|
|
|
/* ----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
|
|
{
|
|
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
|
|
{
|
|
content: "►";
|
|
}
|
|
|
|
/*--------------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: "✓";
|
|
}
|
|
|
|
/*----jack damage grid----*/
|
|
|
|
div.sheet-jackbox {
|
|
width: 20px;
|
|
height: 20px;
|
|
position: relative;
|
|
}
|
|
|
|
input.sheet-jackbox {
|
|
margin: 10px 0 0 00px;
|
|
opacity: 00;
|
|
width: 20px;
|
|
height: 20px;
|
|
position: absolute;
|
|
z-index: 1;
|
|
}
|
|
|
|
span.sheet-jackbox {
|
|
margin: 10px 0 0 00px;
|
|
display: none;
|
|
}
|
|
|
|
input.sheet-blackbox { z-index: 2; }
|
|
|
|
input.sheet-blackbox:checked + input.sheet-whitebox,
|
|
input.sheet-whitebox:checked + input.sheet-redbox { z-index: 3; }
|
|
|
|
input.sheet-blackbox:checked ~ span.sheet-blackbox,
|
|
input.sheet-whitebox:checked ~ span.sheet-whitebox,
|
|
input.sheet-redbox:checked ~ span.sheet-redbox { display: inline-block; }
|
|
|
|
.sheet-blackbox {
|
|
width: 20px;
|
|
height: 20px;
|
|
background: url("http://previews.123rf.com/images/neillang/neillang0902/neillang090200066/4348570-barbed-wire-black-square-frame-border-with-black-blank-middle-for-your-own-design.jpg") no-repeat 0 0;
|
|
background-size: 100%;
|
|
}
|
|
|
|
.sheet-whitebox {
|
|
width: 20px;
|
|
height: 20px;
|
|
background: url("http://previews.123rf.com/images/ktarrier/ktarrier0903/ktarrier090300029/4499609-a-grunge-square-border-in-black-and-white-border-rock.jpg") no-repeat 0 0;
|
|
background-size: 100%;
|
|
}
|
|
|
|
.sheet-redbox {
|
|
width: 20px;
|
|
height: 20px;
|
|
background: url("http://www.iconpng.com/png/vista-software/red-x.png") no-repeat 0 0;
|
|
background-size: 100%;
|
|
}
|
|
|
|
.sheet-grid {
|
|
margin-bottom: 25px;
|
|
}
|
|
/*--------------character damage grid--------------*/
|
|
|
|
/*-------phybox---------*/
|
|
div.sheet-phybox {
|
|
width: 30px;
|
|
height: 30px;
|
|
position: relative;
|
|
}
|
|
|
|
input.sheet-phybox {
|
|
margin: 00px 0 0 00px;
|
|
opacity: 00;
|
|
width: 30px;
|
|
height: 30px;
|
|
position: absolute;
|
|
z-index: 1;
|
|
}
|
|
|
|
span.sheet-phybox {
|
|
margin: 00px 0 0 00px;
|
|
display: none;
|
|
}
|
|
|
|
input.sheet-blackdot { z-index: 2; }
|
|
|
|
input.sheet-blackdot:checked + input.sheet-bluedot,
|
|
input.sheet-bluedot:checked + input.sheet-xdot { z-index: 3; }
|
|
|
|
input.sheet-blackdot:checked ~ span.sheet-blackdot,
|
|
input.sheet-bluedot:checked ~ span.sheet-bluedot,
|
|
input.sheet-xdot:checked ~ span.sheet-xdot { display: inline-block; }
|
|
|
|
.sheet-blackdot {
|
|
width: 30px;
|
|
height: 30px;
|
|
background: url("http://www.teezy.eu/img/design_products/thumb_design_product-4852-1830-844.png") no-repeat 0 0;
|
|
background-size: 100%;
|
|
-webkit-filter: drop-shadow(0px 0px 5px blue);
|
|
}
|
|
|
|
.sheet-bluedot {
|
|
width: 30px;
|
|
height: 30px;
|
|
background: url("http://freshcoattn.com/images/paint-splash.gif") no-repeat 0 0;
|
|
background-size: 100%;
|
|
-webkit-filter: drop-shadow(0px 0px 5px black);
|
|
}
|
|
|
|
.sheet-xdot {
|
|
width: 30px;
|
|
height: 30px;
|
|
background: url("http://www.iconpng.com/png/vista-software/red-x.png") no-repeat 0 0;
|
|
background-size: 100%;
|
|
-webkit-filter: drop-shadow(0px 0px 5px black);
|
|
}
|
|
|
|
/*-------aglbox---------*/
|
|
div.sheet-aglbox {
|
|
width: 30px;
|
|
height: 30px;
|
|
position: relative;
|
|
}
|
|
|
|
input.sheet-aglbox {
|
|
margin: 00px 0 0 00px;
|
|
opacity: 00;
|
|
width: 30px;
|
|
height: 30px;
|
|
position: absolute;
|
|
z-index: 1;
|
|
}
|
|
|
|
span.sheet-aglbox {
|
|
margin: 00px 0 0 00px;
|
|
display: none;
|
|
}
|
|
|
|
input.sheet-blackdota { z-index: 2; }
|
|
|
|
input.sheet-blackdota:checked + input.sheet-reddot,
|
|
input.sheet-reddot:checked + input.sheet-xdota { z-index: 3; }
|
|
|
|
input.sheet-blackdota:checked ~ span.sheet-blackdota,
|
|
input.sheet-reddot:checked ~ span.sheet-reddot,
|
|
input.sheet-xdota:checked ~ span.sheet-xdota { display: inline-block; }
|
|
|
|
.sheet-blackdota {
|
|
width: 30px;
|
|
height: 30px;
|
|
background: url("http://www.teezy.eu/img/design_products/thumb_design_product-4852-1830-844.png") no-repeat 0 0;
|
|
background-size: 100%;
|
|
-webkit-filter: drop-shadow(0px 0px 5px red);
|
|
}
|
|
|
|
.sheet-reddot {
|
|
width: 30px;
|
|
height: 30px;
|
|
background: url("http://fuckersattitude.free.fr/Upload/taz/TutoCrystal/02/TachePeinture.png") no-repeat 0 0;
|
|
background-size: 100%;
|
|
-webkit-filter: drop-shadow(0px 0px 10px white);
|
|
}
|
|
|
|
.sheet-xdota {
|
|
width: 30px;
|
|
height: 30px;
|
|
background: url("http://www.iconpng.com/png/vista-software/red-x.png") no-repeat 0 0;
|
|
background-size: 100%;
|
|
-webkit-filter: drop-shadow(0px 0px 5px black);
|
|
}
|
|
|
|
/*-------intbox---------*/
|
|
div.sheet-intbox {
|
|
width: 30px;
|
|
height: 30px;
|
|
position: relative;
|
|
}
|
|
|
|
input.sheet-intbox {
|
|
margin: 00px 0 0 00px;
|
|
opacity: 00;
|
|
width: 30px;
|
|
height: 30px;
|
|
position: absolute;
|
|
z-index: 1;
|
|
}
|
|
|
|
span.sheet-intbox {
|
|
margin: 00px 0 0 00px;
|
|
display: none;
|
|
}
|
|
|
|
input.sheet-blackdoti { z-index: 2; }
|
|
|
|
input.sheet-blackdoti:checked + input.sheet-gredot,
|
|
input.sheet-gredot:checked + input.sheet-xdoti { z-index: 3; }
|
|
|
|
input.sheet-blackdoti:checked ~ span.sheet-blackdoti,
|
|
input.sheet-gredot:checked ~ span.sheet-gredot,
|
|
input.sheet-xdoti:checked ~ span.sheet-xdoti { display: inline-block; }
|
|
|
|
.sheet-blackdoti {
|
|
width: 30px;
|
|
height: 30px;
|
|
background: url("http://www.teezy.eu/img/design_products/thumb_design_product-4852-1830-844.png") no-repeat 0 0;
|
|
background-size: 100%;
|
|
-webkit-filter: drop-shadow(0px 0px 5px green);
|
|
}
|
|
|
|
.sheet-gredot {
|
|
width: 30px;
|
|
height: 30px;
|
|
background: url("http://www.pitterpainterhk.com/communities/8/004/011/713/408//images/4589728358.gif") no-repeat 0 0;
|
|
background-size: 100%;
|
|
-webkit-filter: drop-shadow(0px 0px 5px black);
|
|
}
|
|
|
|
.sheet-xdoti {
|
|
width: 30px;
|
|
height: 30px;
|
|
background: url("http://www.iconpng.com/png/vista-software/red-x.png") no-repeat 0 0;
|
|
background-size: 100%;
|
|
-webkit-filter: drop-shadow(0px 0px 5px black);
|
|
}
|
|
|
|
/*-------powerfield box---------*/
|
|
div.sheet-powerfieldbox {
|
|
width: 20px;
|
|
height: 20px;
|
|
position: relative;
|
|
}
|
|
|
|
input.sheet-powerfieldbox {
|
|
margin: 00px 0 0 00px;
|
|
opacity: 00;
|
|
width: 20px;
|
|
height: 20px;
|
|
position: absolute;
|
|
z-index: 1;
|
|
}
|
|
|
|
span.sheet-powerfieldbox {
|
|
margin: 00px 0 0 00px;
|
|
display: none;
|
|
}
|
|
|
|
input.sheet-powerfield_off { z-index: 2; }
|
|
|
|
input.sheet-powerfield_off:checked + input.sheet-powerfield_on,
|
|
input.sheet-powerfield_on:checked + input.sheet-powerfield_empty { z-index: 3; }
|
|
|
|
input.sheet-powerfield_off:checked ~ span.sheet-powerfield_off,
|
|
input.sheet-powerfield_on:checked ~ span.sheet-powerfield_on,
|
|
input.sheet-powerfield_empty:checked ~ span.sheet-powerfield_empty { display: inline-block; }
|
|
|
|
.sheet-powerfield_empty {
|
|
width: 20px;
|
|
height: 20px;
|
|
background: url("http://40.media.tumblr.com/80a7794633d6315a7ab367b57e7ab968/tumblr_mwau0fOk961qecbloo1_1280.png") no-repeat 0 0;
|
|
background-size: 100%;
|
|
-webkit-filter: drop-shadow(0px 0px 5px blue);
|
|
}
|
|
|
|
.sheet-powerfield_on {
|
|
width: 20px;
|
|
height: 20px;
|
|
background: url("http://upload.wikimedia.org/wikipedia/commons/1/17/Ski_trail_rating_symbol_blue_circle.png") no-repeat 0 0;
|
|
background-size: 100%;
|
|
-webkit-filter: drop-shadow(0px 0px 5px black);
|
|
}
|
|
|
|
.sheet-powerfield_off {
|
|
width: 20px;
|
|
height: 20px;
|
|
background: url("http://anthelios.laroche-posay.ca/sites/default/files/932-ring.png") no-repeat 0 0;
|
|
background-size: 100%;
|
|
-webkit-filter: drop-shadow(0px 0px 5px black);
|
|
}
|
|
|
|
table.sheet-table_center {
|
|
margin-left:auto;
|
|
margin-right:auto;
|
|
}
|
|
/*-----virtioso colouring----*/
|
|
div.sheet-virtioso {
|
|
color: Chartreuse;
|
|
}
|
|
|
|
/*----Virtioso button----*/
|
|
.sheet-virtioso_button {
|
|
background: Chartreuse;
|
|
background-image: -webkit-linear-gradient(top, Chartreuse, #000000);
|
|
background-image: -moz-linear-gradient(top, Chartreuse, #000000);
|
|
background-image: -ms-linear-gradient(top, Chartreuse, #000000);
|
|
background-image: -o-linear-gradient(top, Chartreuse, #000000);
|
|
background-image: linear-gradient(to bottom, Chartreuse, #000000);
|
|
-webkit-border-radius: 40;
|
|
-moz-border-radius: 40;
|
|
border-radius: 40px;
|
|
color: #ffffff;
|
|
font-size: 20px;
|
|
padding: 10px 5px 10px 5px;
|
|
text-decoration: none;
|
|
}
|
|
|
|
/*----Combat Caster button----*/
|
|
.sheet-combatcaster_button {
|
|
background: black;
|
|
background-image: -webkit-linear-gradient(top, black, #000000);
|
|
background-image: -moz-linear-gradient(top, black, #000000);
|
|
background-image: -ms-linear-gradient(top, black, #000000);
|
|
background-image: -o-linear-gradient(top, black, #000000);
|
|
background-image: linear-gradient(to bottom, black, #000000);
|
|
-webkit-border-radius: 40;
|
|
-moz-border-radius: 40;
|
|
border-radius: 40px;
|
|
color: #ffffff;
|
|
font-size: 20px;
|
|
padding: 10px 5px 10px 5px;
|
|
text-decoration: none;
|
|
}
|