Files
roll20-character-sheets/Black Hack/BlackHack.css
T
plexsoup e552ac4f95 Updated Black Hack sheet
Added color theme preferences and font-size option
2018-01-02 11:35:07 -08:00

255 lines
4.5 KiB
CSS

/*
.sheet-container * {
padding: 0;
margin: 0;
}
*/
.sheet-container {
padding: 21px;
margin: -21px;
border-radius: 8px;
}
input.sheet-theme[value="dark"]:checked ~ div.sheet-container,
input.sheet-theme[value="dark"]:checked ~ div.sheet-container div {
background-color: black;
color: white;
font-family: "Comic Sans MS", cursive, sans-serif;
}
input.sheet-theme[value="light"]:checked ~ .sheet-container,
input.sheet-theme[value="light"]:checked ~ .sheet-container div {
background-color: #fdf6e3;
color: #657b83;
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
}
input.sheet-theme[value="dark"]:checked ~ div.sheet-container input,
input.sheet-theme[value="dark"]:checked ~ div.sheet-container select,
input.sheet-theme[value="dark"]:checked ~ div.sheet-container textarea {
color: white;
background: #333;
border: 1px solid darkgrey;
}
input.sheet-theme[value="light"]:checked ~ div.sheet-container input,
input.sheet-theme[value="light"]:checked ~ div.sheet-container select,
input.sheet-theme[value="light"]:checked ~ div.sheet-container textarea {
color: #586e75;
background: #eee8d5;
border: 1px solid #586e75;
}
input.sheet-fontSize[value="small"]:checked ~ div.sheet-container textarea {
font-size: smaller;
}
input.sheet-fontSize[value="normal"]:checked ~ div.sheet-container textarea {
font-size: inherit;
}
.sheet-container div {
/*
background-color: black;
color: white;
*/
}
.sheet-hidden {
display: none;
}
div.sheet-bio {
text-align: right;
vertical-align: text-bottom;
}
div.sheet-attributes, div.sheet-health{
text-align: center;
}
div.sheet-attribute {
display: inline-block;
}
div.sheet-attributeTitle {
width: 80px;
display: inline-block;
}
div.sheet-inventory select {
width: 60px;
margin: 0;
}
input, select {
/*
background: #333;
color: white;
*/
}
div.sheet-bio input[type="text"] {
margin: 0;
width: 39%;
}
input.sheet-narrowTextField {
width: 60px;
}
input.sheet-wideTextField {
width: 250px;
}
.sheet-oneThird {
width: 30%;
}
.sheet-half {
width: 49%;
}
.sheet-twoThirds {
width: 60%;
}
div.sheet-notes .repitem {
display: inline-block;
}
textarea {
height: 50px;
width: calc(100% - 11px);
display: inline-block;
resize: both;
min-width: 20px;
max-width: 100%;
min-height: 50px;
margin-top: 1px;
margin-bottom: 1px;
margin-left: 2px;
margin-right: 2px;
line-height: 1.25em;
}
div.sheet-preferences {
margin-top: 21px;
font-size: smaller;
width: 100%;
}
div.sheet-preferences > div {
width: 45%;
margin:0;
display: inline-block;
}
/*
_/_/_/ _/ _/ _/_/_/_/_/ _/_/_/_/_/ _/_/ _/ _/ _/_/_/
_/ _/ _/ _/ _/ _/ _/ _/ _/_/ _/ _/
_/_/_/ _/ _/ _/ _/ _/ _/ _/ _/ _/ _/_/
_/ _/ _/ _/ _/ _/ _/ _/ _/ _/_/ _/
_/_/_/ _/_/ _/ _/ _/_/ _/ _/ _/_/_/
*/
.repcontrol {
min-height: 27px;
display: block;
}
.repcontrol .btn {
/* visibility: hidden; */ /* Doesn't work in Firefox! */
border: medium none;
color: transparent !important;
background: none;
box-shadow: none;
float: none;
display: inline-block;
text-shadow: none !important;
}
.repcontrol .btn:focus {
outline: 0;
}
.repcontrol .repcontrol_edit {
float: none;
}
.repcontrol .repcontrol_edit:after {
content: '(';
visibility: visible;
font-family: pictos;
background-color: white;
border: 1px solid black;
border-radius: 2px;
font-size: 12px;
height: 12px;
width: 12px;
padding: 2px 4px 2px 4px;
color: black;
margin-left: -10px;
}
.editmode ~ .repcontrol .repcontrol_edit:after {
content: ')';
}
.repcontrol .repcontrol_add:before {
content: '&';
visibility: visible;
font-family: pictos;
background-color: #fff;
border: 1px solid black;
border-radius: 2px;
font-size: 12px;
height: 12px;
width: 12px;
padding: 2px 4px 2px 4px;
color: black;
}
.repcontrol .repcontrol_edit:hover:after,
.repcontrol .repcontrol_add:hover:before
{
background-color: #EFEFEF;
}
.sheet-resources .repcontrol {
margin-top: -10px;
}
.itemcontrol {
z-index: 10;
}
.itemcontrol .repcontrol_del {
font-size: 10px;
margin-top: 3px;
padding: 0px;
height: 18px;
width: 18px;
}
.itemcontrol .repcontrol_move {
font-size: 10px;
margin-top: 3px;
padding: 0px;
height: 18px;
width: 18px;
}