mirror of
https://github.com/Nighthawk42/roll20-character-sheets.git
synced 2026-08-30 03:40:32 +00:00
1679 lines
42 KiB
CSS
1679 lines
42 KiB
CSS
@font-face {
|
|
font-family: 'Teko';
|
|
font-style: normal;
|
|
font-weight: 400;
|
|
src: local('Teko Regular'), local('Teko-Regular'), url(https://fonts.gstatic.com/s/teko/v5/ReWtp16HVyzdin1z_uvVFg.woff2) format('woff2');
|
|
unicode-range: U+02BC, U+0900-097F, U+1CD0-1CF6, U+1CF8-1CF9, U+200B-200D, U+20A8, U+20B9, U+25CC, U+A830-A839, U+A8E0-A8FB;
|
|
}
|
|
|
|
@font-face {
|
|
font-family: 'Teko Semibold';
|
|
font-style: normal;
|
|
font-weight: 600;
|
|
src: local('Teko Semibold'), local('Teko-Semibold'), url(https://fonts.gstatic.com/s/teko/v5/bV4GSZlFvf4yTwSQToixKg.woff2) format('woff2');
|
|
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.sheet-hiddenRadio,
|
|
.sheet-hiddenInput,
|
|
.sheet-hiddenCheckbox {
|
|
display: none;
|
|
margin-left: -10000px;
|
|
height: 0px;
|
|
}
|
|
|
|
.sheet-versionSelectSection {
|
|
margin-top: -55px;
|
|
margin-bottom: 30px;
|
|
margin-left: 65%;
|
|
}
|
|
|
|
|
|
input[name="attr_sheetVersion"][value="Veil"]:not(:checked) ~ div.sheet-container div.sheet-veilContainer,
|
|
input[name="attr_sheetVersion"][value="Veil2020"]:not(:checked) ~ div.sheet-container div.sheet-veil2020Container {
|
|
display: none;
|
|
}
|
|
|
|
input[name="attr_sheetVersion"][value="Veil"]:checked ~ div.sheet-container div.sheet-veilContainer,
|
|
input[name="attr_sheetVersion"][value="Veil2020"]:checked ~ div.sheet-container div.sheet-veil2020Container {
|
|
display: block;
|
|
}
|
|
|
|
|
|
.sheet-container {
|
|
postion: relative;
|
|
}
|
|
|
|
.sheet-container:after {
|
|
content : "";
|
|
display: block;
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
/*background-image: url(/wp-content/uploads/2010/11/tandem.jpg); */
|
|
width: 100%;
|
|
height: 200%;
|
|
opacity : 0.5;
|
|
z-index: -1;
|
|
}
|
|
|
|
/*
|
|
_/_/_/ _/_/ _/ _/_/ _/_/_/ _/_/_/
|
|
_/ _/ _/ _/ _/ _/ _/ _/ _/
|
|
_/ _/ _/ _/ _/ _/ _/_/_/ _/_/
|
|
_/ _/ _/ _/ _/ _/ _/ _/ _/
|
|
_/_/_/ _/_/ _/_/_/_/ _/_/ _/ _/ _/_/_/
|
|
|
|
*/
|
|
|
|
|
|
|
|
|
|
|
|
/* Colorize the color selector buttons */
|
|
input.sheet-colorSelector[name="attr_WorldColors"][value="orange"] + span {
|
|
background-color: orange;
|
|
}
|
|
input.sheet-colorSelector[name="attr_WorldColors"][value="green"] + span {
|
|
background-color: green;
|
|
}
|
|
|
|
input.sheet-colorSelector[name="attr_WorldColors"][value="purple"] + span {
|
|
background-color: purple;
|
|
}
|
|
input.sheet-colorSelector[name="attr_WorldColors"][value="blue"] + span {
|
|
background-color: blue;
|
|
}
|
|
input.sheet-colorSelector[name="attr_WorldColors"][value="grey"] + span {
|
|
background-color: grey;
|
|
}
|
|
input.sheet-colorSelector[name="attr_WorldColors"][value="antiquewhite"] + span {
|
|
background-color: antiquewhite;
|
|
}
|
|
input.sheet-colorSelector[name="attr_WorldColors"][value="red"] + span {
|
|
background-color: red;
|
|
}
|
|
input.sheet-colorSelector[name="attr_WorldColors"][value="yellow"] + span {
|
|
background-color: yellow;
|
|
}
|
|
|
|
|
|
input[name="attr_WorldTexture"]:checked ~ input[name="attr_WorldColors"][value="orange"]:checked ~ div.sheet-container:after {
|
|
/* voronoi stained glass, paisley */
|
|
background: url("http://i.imgur.com/8cuujv2.png"), url("http://i.imgur.com/xYx25IB.png");
|
|
background-blend-mode: color;
|
|
opacity: 0.33;
|
|
background-size: cover, 50%;
|
|
}
|
|
|
|
input[name="attr_WorldTexture"]:not(:checked) ~ input[name="attr_WorldColors"][value="orange"]:checked ~ div.sheet-container:after {
|
|
background-color: aliceblue;
|
|
opacity: 1;
|
|
}
|
|
|
|
|
|
|
|
input[name="attr_WorldColors"][value="orange"]:checked ~ div.sheet-container,
|
|
input[name="attr_WorldColors"][value="orange"]:checked ~ div h2,
|
|
input[name="attr_WorldColors"][value="orange"]:checked ~ div h3,
|
|
input[name="attr_WorldColors"][value="orange"]:checked ~ div textarea,
|
|
input[name="attr_WorldColors"][value="orange"]:checked ~ div input,
|
|
input[name="attr_WorldColors"][value="orange"]:checked ~ div select,
|
|
input[name="attr_WorldColors"][value="orange"]:checked ~ div button {
|
|
border-color: orangered;
|
|
color: maroon;
|
|
}
|
|
|
|
|
|
|
|
input[name="attr_WorldTexture"]:checked ~ input[name="attr_WorldColors"][value="purple"]:checked ~ div.sheet-container:after {
|
|
background:
|
|
radial-gradient(rgba(255,255,255,0) 0, rgba(255,255,255,.15) 30%, rgba(255,255,255,.3) 32%, rgba(255,255,255,0) 33%) 0 0,
|
|
radial-gradient(rgba(255,255,255,0) 0, rgba(255,255,255,.1) 11%, rgba(255,255,255,.3) 13%, rgba(255,255,255,0) 14%) 0 0,
|
|
radial-gradient(rgba(255,255,255,0) 0, rgba(255,255,255,.2) 17%, rgba(255,255,255,.43) 19%, rgba(255,255,255,0) 20%) 0 110px,
|
|
radial-gradient(rgba(255,255,255,0) 0, rgba(255,255,255,.2) 11%, rgba(255,255,255,.4) 13%, rgba(255,255,255,0) 14%) -130px -170px,
|
|
radial-gradient(rgba(255,255,255,0) 0, rgba(255,255,255,.2) 11%, rgba(255,255,255,.4) 13%, rgba(255,255,255,0) 14%) 130px 370px,
|
|
radial-gradient(rgba(255,255,255,0) 0, rgba(255,255,255,.1) 11%, rgba(255,255,255,.2) 13%, rgba(255,255,255,0) 14%) 0 0,
|
|
linear-gradient(45deg, #343702 0%, #184500 20%, #187546 30%, #006782 40%, #0b1284 50%, #760ea1 60%, #83096e 70%, #840b2a 80%, #b13e12 90%, #e27412 100%);
|
|
background-size: 470px 470px, 970px 970px, 410px 410px, 610px 610px, 530px 530px, 730px 730px, 100% 100%;
|
|
/*background-color: #840b2a;*/
|
|
background-attachment: fixed;
|
|
background-color: midnightblue;
|
|
opacity: 0.3;
|
|
}
|
|
input[name="attr_WorldTexture"]:not(:checked) ~ input[name="attr_WorldColors"][value="purple"]:checked ~ div.sheet-container:after {
|
|
background-color: #c2a3c2; /* light lavender */
|
|
opacity: 1;
|
|
}
|
|
|
|
|
|
input[name="attr_WorldColors"][value="purple"]:checked ~ div.sheet-container,
|
|
input[name="attr_WorldColors"][value="purple"]:checked ~ div h2,
|
|
input[name="attr_WorldColors"][value="purple"]:checked ~ div h3,
|
|
input[name="attr_WorldColors"][value="purple"]:checked ~ div textarea,
|
|
input[name="attr_WorldColors"][value="purple"]:checked ~ div select,
|
|
input[name="attr_WorldColors"][value="purple"]:checked ~ div input,
|
|
input[name="attr_WorldColors"][value="purple"]:checked ~ div button {
|
|
border-color: magenta;
|
|
color: black;
|
|
/* text-shadow: 0px 2px 1px darkmagenta; */
|
|
}
|
|
|
|
|
|
input[name="attr_WorldTexture"]:checked ~ input[name="attr_WorldColors"][value="green"]:checked ~ div.sheet-container:after {
|
|
|
|
background-color: black;
|
|
/*
|
|
background-image:
|
|
radial-gradient(rgba(128,196,128,.5), rgba(128, 255, 128,.15) 2px, transparent 40px),
|
|
radial-gradient(rgba(128,196,128,.5), rgba(128, 255, 128,.075) 1px, transparent 30px),
|
|
radial-gradient(rgba(128,196,128,.5), rgba(128, 255, 128,.1) 2px, transparent 40px),
|
|
radial-gradient(rgba(128,196,128,.5), rgba(128, 255, 128,0.1) 2px, transparent 30px);
|
|
background-size: 550px 550px, 350px 350px, 250px 250px, 150px 150px;
|
|
background-position: 0 0, 126px 60px, 130px 270px, 70px 100px;
|
|
*/
|
|
background-image: url('http://i.imgur.com/Vdebbkk.gif');
|
|
background-size: cover;
|
|
background-attachment: fixed;
|
|
opacity: 1;
|
|
}
|
|
|
|
input[name="attr_WorldTexture"]:not(:checked) ~ input[name="attr_WorldColors"][value="green"]:checked ~ div.sheet-container:after {
|
|
background-color: black;
|
|
opacity: 1;
|
|
}
|
|
|
|
input[name="attr_WorldColors"][value="green"]:checked ~ div.sheet-container,
|
|
input[name="attr_WorldColors"][value="green"]:checked ~ div h2,
|
|
input[name="attr_WorldColors"][value="green"]:checked ~ div h3,
|
|
input[name="attr_WorldColors"][value="green"]:checked ~ div textarea,
|
|
input[name="attr_WorldColors"][value="green"]:checked ~ div select,
|
|
input[name="attr_WorldColors"][value="green"]:checked ~ div input,
|
|
input[name="attr_WorldColors"][value="green"]:checked ~ div button {
|
|
border-color: #121;
|
|
color: #0a0;
|
|
}
|
|
|
|
|
|
|
|
input[name="attr_WorldTexture"]:checked ~ input[name="attr_WorldColors"][value="blue"]:checked ~ div.sheet-container:after {
|
|
background-color: lightsteelblue;
|
|
background-image: linear-gradient(rgba(255,255,255, 0.2) 2px, transparent 2px),
|
|
linear-gradient(90deg, rgba(255,255,255, 0.2) 1px, transparent 2px),
|
|
linear-gradient(rgba(255,255,255,.1) 1px, transparent 1px),
|
|
linear-gradient(90deg, rgba(255,255,255,.1) 1px, transparent 2px);
|
|
background-size:100px 100px, 100px 100px, 20px 20px, 20px 20px;
|
|
background-attachment: scroll;
|
|
}
|
|
input[name="attr_WorldTexture"]:not(:checked) ~ input[name="attr_WorldColors"][value="blue"]:checked ~ div.sheet-container:after {
|
|
background-color: lightsteelblue;
|
|
opacity: 1;
|
|
}
|
|
|
|
input[name="attr_WorldColors"][value="blue"]:checked ~ div.sheet-container,
|
|
input[name="attr_WorldColors"][value="blue"]:checked ~ div h2,
|
|
input[name="attr_WorldColors"][value="blue"]:checked ~ div h3,
|
|
input[name="attr_WorldColors"][value="blue"]:checked ~ div textarea,
|
|
input[name="attr_WorldColors"][value="blue"]:checked ~ div input,
|
|
input[name="attr_WorldColors"][value="blue"]:checked ~ div select,
|
|
input[name="attr_WorldColors"][value="blue"]:checked ~ div button {
|
|
border-color: aliceblue;
|
|
color: midnightblue;
|
|
}
|
|
|
|
input[name="attr_WorldTexture"]:checked ~ input[name="attr_WorldColors"][value="grey"]:checked ~ div.sheet-container:after {
|
|
background-color: silver;
|
|
background-image: url(http://imgsrv.roll20.net/?src=i.imgur.com/5Ltpkd2.jpg);
|
|
background-size: 125% 115%;
|
|
background-attachment: fixed;
|
|
/* background-clip: content-box; */
|
|
background-position-x: 0;
|
|
opacity: 0.33;
|
|
}
|
|
input[name="attr_WorldTexture"]:not(:checked) ~ input[name="attr_WorldColors"][value="grey"]:checked ~ div.sheet-container:after {
|
|
background-color: silver;
|
|
}
|
|
input[name="attr_WorldColors"][value="grey"]:checked ~ div.sheet-container,
|
|
input[name="attr_WorldColors"][value="grey"]:checked ~ div h2,
|
|
input[name="attr_WorldColors"][value="grey"]:checked ~ div h3,
|
|
input[name="attr_WorldColors"][value="grey"]:checked ~ div textarea,
|
|
input[name="attr_WorldColors"][value="grey"]:checked ~ div input,
|
|
input[name="attr_WorldColors"][value="grey"]:checked ~ div select,
|
|
input[name="attr_WorldColors"][value="grey"]:checked ~ div button {
|
|
border-color: darkslategrey;
|
|
color: black;
|
|
}
|
|
|
|
|
|
input[name="attr_WorldColors"][value="antiquewhite"]:checked ~ div.sheet-container:after {
|
|
background-color: burlywood;
|
|
}
|
|
|
|
input[name="attr_WorldColors"][value="antiquewhite"]:checked ~ div.sheet-container,
|
|
input[name="attr_WorldColors"][value="antiquewhite"]:checked ~ div h2,
|
|
input[name="attr_WorldColors"][value="antiquewhite"]:checked ~ div h3,
|
|
input[name="attr_WorldColors"][value="antiquewhite"]:checked ~ div textarea,
|
|
input[name="attr_WorldColors"][value="antiquewhite"]:checked ~ div input,
|
|
input[name="attr_WorldColors"][value="antiquewhite"]:checked ~ div select,
|
|
input[name="attr_WorldColors"][value="antiquewhite"]:checked ~ div button {
|
|
border-color: chocolate;
|
|
color: black;
|
|
}
|
|
|
|
input[name="attr_WorldTexture"]:checked ~ input[name="attr_WorldColors"][value="red"]:checked ~ div.sheet-container:after {
|
|
background-color: dimgrey;
|
|
|
|
background: url('http://i.imgur.com/lsM9DDT.jpg'), rgba(65, 29, 29, 0.5);
|
|
background-size: 100% 100%;
|
|
background-attachment: fixed;
|
|
|
|
background-blend-mode: luminosity;
|
|
opacity: 0.2;
|
|
}
|
|
|
|
input[name="attr_WorldTexture"]:not(:checked) ~ input[name="attr_WorldColors"][value="red"]:checked ~ div.sheet-container:after {
|
|
background-color: rgb(209, 203, 199);
|
|
opacity: 0.4;
|
|
}
|
|
|
|
input[name="attr_WorldColors"][value="red"]:checked ~ div.sheet-container,
|
|
input[name="attr_WorldColors"][value="red"]:checked ~ div h2,
|
|
input[name="attr_WorldColors"][value="red"]:checked ~ div h3,
|
|
input[name="attr_WorldColors"][value="red"]:checked ~ div textarea,
|
|
input[name="attr_WorldColors"][value="red"]:checked ~ div input,
|
|
input[name="attr_WorldColors"][value="red"]:checked ~ div select,
|
|
input[name="attr_WorldColors"][value="red"]:checked ~ div button {
|
|
/*
|
|
border-color: firebrick;
|
|
color: black;
|
|
*/
|
|
|
|
border-color: #a22425;
|
|
color: #543535;
|
|
|
|
|
|
/* text-shadow: 9px 3px 0px rgba(96, 128, 96, .2); */
|
|
}
|
|
|
|
input[name="attr_WorldColors"][value="red"]:checked ~ div h2,
|
|
input[name="attr_WorldColors"][value="red"]:checked ~ div h3,
|
|
input[name="attr_WorldColors"][value="red"]:checked ~ div h2 input,
|
|
input[name="attr_WorldColors"][value="red"]:checked ~ select.sheet-playbookSelector {
|
|
/* text-shadow: 4px 0px 10px orangered, -1px -1px 1px yellow; */
|
|
text-shadow: 4px 0px 10px #a56e6a, -1px -1px 1px white;
|
|
}
|
|
|
|
input[name="attr_WorldColors"][value="red"]:checked ~ div textarea,
|
|
input[name="attr_WorldColors"][value="red"]:checked ~ div input {
|
|
/* background: rgba(128, 128, 128, 0.75) !important; */
|
|
background: rgba(185, 175, 175, 0.75) !important;
|
|
}
|
|
|
|
input[name="attr_WorldTexture"]:checked ~ input[name="attr_WorldColors"][value="yellow"]:checked ~ div.sheet-container:after {
|
|
background-color: black;
|
|
background-image: url('http://i.imgur.com/p0umWYd.jpg');
|
|
background-size: 100% 100%;
|
|
background-attachment: fixed;
|
|
opacity: 0.8;
|
|
}
|
|
|
|
input[name="attr_WorldTexture"]:not(:checked) ~ input[name="attr_WorldColors"][value="yellow"]:checked ~ div.sheet-container:after {
|
|
background-color: black;
|
|
opacity: 1;
|
|
}
|
|
|
|
input[name="attr_WorldColors"][value="yellow"]:checked ~ div.sheet-container,
|
|
input[name="attr_WorldColors"][value="yellow"]:checked ~ div h2,
|
|
input[name="attr_WorldColors"][value="yellow"]:checked ~ div h3,
|
|
input[name="attr_WorldColors"][value="yellow"]:checked ~ div textarea,
|
|
input[name="attr_WorldColors"][value="yellow"]:checked ~ div input,
|
|
input[name="attr_WorldColors"][value="yellow"]:checked ~ div select,
|
|
input[name="attr_WorldColors"][value="yellow"]:checked ~ div button {
|
|
border-color: dimgrey;
|
|
color: goldenrod;
|
|
text-shadow: 1px 1px black;
|
|
}
|
|
|
|
/*
|
|
_/ _/ _/_/_/_/ _/_/ _/_/_/ _/_/_/_/ _/_/_/
|
|
_/ _/ _/ _/ _/ _/ _/ _/ _/ _/
|
|
_/_/_/_/ _/_/_/ _/_/_/_/ _/ _/ _/_/_/ _/_/_/
|
|
_/ _/ _/ _/ _/ _/ _/ _/ _/ _/
|
|
_/ _/ _/_/_/_/ _/ _/ _/_/_/ _/_/_/_/ _/ _/
|
|
|
|
*/
|
|
|
|
|
|
|
|
|
|
.sheet-Logo {
|
|
font-size: larger;
|
|
font-family: "Teko Semibold", "Arial Black", "Helvetica", sans-serif;
|
|
font-weight: bold;
|
|
text-align: center;
|
|
width: 100px;
|
|
padding: 5px;
|
|
border-bottom: 20px solid;
|
|
border-bottom-color: inherit;
|
|
border-right: 20px solid transparent !important;
|
|
border-left: 20px solid transparent !important;
|
|
height: 5px;
|
|
margin-top: 15px;
|
|
}
|
|
|
|
/*
|
|
.sheet-Title {
|
|
font-family: "Teko Semibold", "Arial Black", "Helvetica", sans-serif;
|
|
font-size: large;
|
|
display: inline-block;
|
|
}
|
|
*/
|
|
|
|
div.sheet-LogLine {
|
|
pointer-events: none;
|
|
font-family: "Teko Semibold", "Arial Black", "Helvetica", sans-serif;
|
|
font-weight: bold;
|
|
border-top: 10px solid;
|
|
border-bottom: 10px solid;
|
|
width: 80%;
|
|
border-left: 10px solid transparent !important;
|
|
border-right: 10px solid transparent !important;
|
|
border-bottom-color: inherit;
|
|
z-index: 3;
|
|
display: inline-block;
|
|
text-align: center;
|
|
|
|
vertical-align: top;
|
|
height: 17px;
|
|
margin-top: 42px;
|
|
margin-left: 20px;
|
|
|
|
|
|
background-color: #565656;
|
|
color: rgba(128, 128, 128, 0.3);
|
|
|
|
/*text-shadow: 0px 2px 3px rgba(255,255,255,0.5);*/
|
|
/* This is cool, but let the color selectors decide on text shadows */
|
|
|
|
-webkit-background-clip: text;
|
|
-moz-background-clip: text;
|
|
background-clip: text;
|
|
}
|
|
|
|
div.sheet-tabs {
|
|
|
|
display: inline-block;
|
|
width: 90%;
|
|
}
|
|
|
|
|
|
div.sheet-colorSelectorWidgetContainer {
|
|
display: inline-block;
|
|
position: relative;
|
|
|
|
z-index: 2;
|
|
width: 18px;
|
|
height: 18px;
|
|
box-shadow: 2px 2px 2px black;
|
|
border: 0;
|
|
margin: 1px;
|
|
|
|
}
|
|
|
|
input.sheet-colorSelector {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
|
|
width: 100%;
|
|
height: 100%;
|
|
/*
|
|
-webkit-appearance: none;
|
|
-moz-appearance: none;
|
|
appearance: none;
|
|
*/
|
|
z-index: 1;
|
|
}
|
|
|
|
input.sheet-colorSelector + span {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
z-index: 2;
|
|
pointer-events: none;
|
|
}
|
|
|
|
input.sheet-textureSelector {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
-webkit-appearance: none;
|
|
-moz-appearance: none;
|
|
appearance: none;
|
|
z-index: 4;
|
|
border: 0;
|
|
}
|
|
|
|
input.sheet-textureSelector:checked::after {
|
|
content: "⛆";
|
|
|
|
vertical-align: top;
|
|
font-size: medium;
|
|
text-align: center;
|
|
border: 0;
|
|
color: black;
|
|
background-color: grey;
|
|
}
|
|
|
|
input.sheet-textureSelector:not(:checked)::after {
|
|
content: "";
|
|
}
|
|
|
|
div.sheet-titleSmallBoxesTop {
|
|
text-align: right;
|
|
display: block;
|
|
margin-right: 30px;
|
|
box-shadow: none;
|
|
line-height: 10px;
|
|
}
|
|
|
|
div.sheet-titleSmallBoxesMiddle {
|
|
text-align: right;
|
|
display: block;
|
|
margin-right: 30px;
|
|
box-shadow: none;
|
|
}
|
|
div.sheet-titleSmallBoxesBottom {
|
|
text-align: left;
|
|
display: block;
|
|
box-shadow: none;
|
|
margin-left: 14px;
|
|
line-height: 10px;
|
|
}
|
|
|
|
div.sheet-titleSmallBoxes input {
|
|
/* box-shadow: none; */
|
|
}
|
|
|
|
div.sheet-titleSmallBoxesTop div,
|
|
div.sheet-titleSmallBoxesMiddle div,
|
|
div.sheet-titleSmallBoxesBottom div {
|
|
height: 18px;
|
|
width: 18px;
|
|
display: inline-block;
|
|
text-align: center;
|
|
box-shadow: 2px 2px 2px black;
|
|
background-color: black;
|
|
color: white;
|
|
margin: 1px;
|
|
/* outline: 2px solid white; */
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.sheet-container h2 {
|
|
|
|
font-family: "Teko Semibold", "Arial Black", "Helvetica", sans-serif;
|
|
font-size: 12pt;
|
|
/*width: 61.8%;*/
|
|
border-bottom: 1px solid;
|
|
/* border-right: 12px solid transparent !important; */
|
|
/*border-left: 0;*/
|
|
margin: 2px;
|
|
padding: 0;
|
|
line-height: 0.8em;
|
|
text-align: left;
|
|
|
|
}
|
|
|
|
.sheet-LookAndJam h2 {
|
|
border-bottom: 6px solid;
|
|
border-right: 12px solid transparent !important;
|
|
border-left: 0;
|
|
}
|
|
|
|
.sheet-NewspaperColumns h2 {
|
|
font-size: 1.2em;;
|
|
width: 90%;
|
|
}
|
|
|
|
.sheet-container div.sheet-tab1 div.repitem:nth-of-type(even) h2,
|
|
.sheet-container div.sheet-tab2 div.repitem:nth-of-type(even) h2 {
|
|
text-align: right;
|
|
border-bottom: 6px solid;
|
|
border-left: 12px solid transparent !important;
|
|
border-right: 0;
|
|
/* margin-right: -30%; */
|
|
}
|
|
.sheet-container div.sheet-tab1 div.repitem:nth-of-type(even) h2 input[type="text"],
|
|
.sheet-container div.sheet-tab2 div.repitem:nth-of-type(even) h2 input[type="text"] {
|
|
text-align: right;
|
|
}
|
|
|
|
|
|
.sheet-container div.sheet-tab1 div.repitem:nth-of-type(odd) h2,
|
|
.sheet-container div.sheet-tab2 div.repitem:nth-of-type(odd) h2 {
|
|
border-bottom: 6px solid;
|
|
border-right: 12px solid transparent !important;
|
|
border-left: 0;
|
|
/* margin-left: -30%; */
|
|
}
|
|
|
|
|
|
.sheet-container div.sheet-tab1 h2.sheet-AlternateElement,
|
|
.sheet-container div.sheet-tab2 h2.sheet-AlternateElement {
|
|
|
|
left: 35%;
|
|
text-align: right;
|
|
border-left: 12px solid transparent !important;
|
|
border-right: 0;
|
|
}
|
|
|
|
.sheet-container h3 {
|
|
|
|
font-family: "Teko Semibold", "Arial Black", "Helvetica", sans-serif;
|
|
font-size: 0.8em;
|
|
line-height: 1.5em;
|
|
}
|
|
|
|
|
|
div.sheet-topRow {
|
|
margin-top: -25px;
|
|
}
|
|
|
|
/*
|
|
_/_/_/ _/_/ _/ _/ _/ _/ _/ _/ _/ _/_/_/
|
|
_/ _/ _/ _/ _/ _/ _/_/ _/_/ _/_/ _/ _/
|
|
_/ _/ _/ _/ _/ _/ _/ _/ _/ _/ _/ _/ _/_/
|
|
_/ _/ _/ _/ _/ _/ _/ _/ _/ _/_/ _/
|
|
_/_/_/ _/_/ _/_/_/_/ _/_/ _/ _/ _/ _/ _/_/_/
|
|
|
|
*/
|
|
|
|
div.sheet-majorBody {
|
|
display: block;
|
|
vertical-align: top;
|
|
}
|
|
|
|
div.sheet-statesSidebar,
|
|
div.sheet-Title {
|
|
width: 125px;
|
|
font-family: "Teko Semibold", "Arial Black", "Helvetica", sans-serif;
|
|
display: inline-block;
|
|
margin-left: -25px;
|
|
font-size: smaller;
|
|
text-align: right;
|
|
|
|
}
|
|
|
|
|
|
div.sheet-2columns, div.sheet-3columns {
|
|
width: 100%;
|
|
vertical-align: top;
|
|
text-align: center;
|
|
}
|
|
|
|
div.sheet-2columns div.sheet-sidebar {
|
|
display: inline-block;
|
|
width: calc(30% - 21px);
|
|
background: transparent;
|
|
vertical-align: top;
|
|
}
|
|
|
|
div.sheet-majorMainColumn {
|
|
width: calc(100% - 75px);
|
|
margin-right: -100px;
|
|
vertical-align: top;
|
|
display: inline-block;
|
|
|
|
}
|
|
|
|
div.sheet-2columns div.sheet-mainColumn {
|
|
display: inline-block;
|
|
width: calc(70% - 21px);
|
|
|
|
vertical-align: top;
|
|
}
|
|
|
|
|
|
|
|
div.sheet-columnThirds {
|
|
display: inline-block;
|
|
width: calc(33% - 5px);
|
|
vertical-align: top;
|
|
text-align: center;
|
|
}
|
|
|
|
div.sheet-tab-content > div.sheet-columnHalves {
|
|
display: inline-block;
|
|
width: calc(50% - 5px);
|
|
vertical-align: top;
|
|
/* text-align: center; */
|
|
text-align: center;
|
|
}
|
|
|
|
div.sheet-columnHalves div {
|
|
width: 100%;
|
|
}
|
|
|
|
div.sheet-verticalStates {
|
|
width: 64px;
|
|
display: inline-block;
|
|
margin-left: -9px;
|
|
margin-right: 10px;
|
|
}
|
|
|
|
|
|
|
|
.sheet-NewspaperColumns {
|
|
|
|
/* Newspaper-like columns with automatic text flow across regions */
|
|
-webkit-column-count: 3; /* Chrome, Safari, Opera */
|
|
-moz-column-count: 3; /* Firefox */
|
|
column-count: 3;
|
|
|
|
-webkit-column-gap: 10px; /* Chrome, Safari, Opera */
|
|
-moz-column-gap: 10px; /* Firefox */
|
|
column-gap: 10px;
|
|
|
|
-webkit-column-rule: 4px outset; /* Chrome, Safari, Opera */
|
|
-moz-column-rule: 4px outset; /* Firefox */
|
|
column-rule: 4px outset;
|
|
|
|
overflow:auto;
|
|
text-align: justify;
|
|
|
|
}
|
|
|
|
.sheet-columnHalves div.sheet-miscNotes div.repitem {
|
|
width: 50%;
|
|
}
|
|
.sheet-columnHalves div.sheet-miscNotes div.repitem textarea {
|
|
width: calc(100% - 4px);
|
|
margin-bottom: 2px;
|
|
}
|
|
|
|
.sheet-columnHalves h2 {
|
|
text-align: center;
|
|
}
|
|
|
|
img.sheet-spanColumns {
|
|
-webkit-column-span: 2;
|
|
column-span: 2;
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
/*
|
|
|
|
|
|
|
|
_/_/_/_/_/ _/_/_/_/ _/ _/ _/_/_/_/_/ _/_/ _/_/_/ _/_/_/_/ _/_/ _/_/_/
|
|
_/ _/ _/ _/ _/ _/ _/ _/ _/ _/ _/ _/ _/
|
|
_/ _/_/_/ _/ _/ _/_/_/_/ _/_/_/ _/_/_/ _/_/_/_/ _/_/
|
|
_/ _/ _/ _/ _/ _/ _/ _/ _/ _/ _/ _/ _/
|
|
_/ _/_/_/_/ _/ _/ _/ _/ _/ _/ _/ _/_/_/_/ _/ _/ _/_/_/
|
|
|
|
|
|
*/
|
|
|
|
|
|
|
|
|
|
textarea {
|
|
height: 50px;
|
|
width: calc(100% - 11px);
|
|
|
|
resize: both;
|
|
min-width: 20px;
|
|
max-width: 100%;
|
|
min-height: 50px;
|
|
margin-top: 1px;
|
|
margin-bottom: 1px;
|
|
margin-left: 2px;
|
|
margin-right: 2px;
|
|
font-size: x-small;
|
|
line-height: 1.25em;
|
|
background: rgba(128, 128, 128, 0.3) !important;
|
|
}
|
|
|
|
.sheet-columnHalves div.sheet-miscNotes textarea {
|
|
resize: vertical;
|
|
padding: 0;
|
|
margin: 0;
|
|
}
|
|
|
|
|
|
input.sheet-narrowInput {
|
|
background: rgba(128, 128, 128, 0.3) !important;
|
|
width: 70%;
|
|
}
|
|
|
|
.sheet-NewspaperColumns textarea {
|
|
width: 90%;
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.sheet-beliefs,
|
|
.sheet-improvements {
|
|
margin-bottom: 16px;
|
|
}
|
|
|
|
|
|
.sheet-improvements div,
|
|
.sheet-miscNotes div {
|
|
display: inline-block;
|
|
line-height: 0px;
|
|
vertical-align: top;
|
|
}
|
|
|
|
.sheet-miscNotes > div h2 {
|
|
min-width: 75px;
|
|
width: 100px;
|
|
}
|
|
|
|
div.sheet-tab3 div.sheet-miscNotes h2 {
|
|
width: 175px;
|
|
text-align: left;
|
|
border-bottom: 6px solid;
|
|
border-right: 12px solid transparent !important;
|
|
border-left: 0 !important;
|
|
}
|
|
|
|
div.sheet-tab3 div.sheet-miscNotes h2 input[type="text"] {
|
|
text-align: left !important;
|
|
}
|
|
|
|
|
|
.sheet-playbook {
|
|
padding-top: 10px;
|
|
}
|
|
|
|
select.sheet-playbookSelector,
|
|
select.sheet-playbookSelector2,
|
|
input.sheet-bioInputField,
|
|
input.sheet-playbookDetailTitle {
|
|
height: 20px;
|
|
font-family: "Teko Semibold", "Arial Black", sans-serif;
|
|
background: transparent;
|
|
border: none;
|
|
text-shadow: inherit;
|
|
padding: 0;
|
|
margin: 0;
|
|
}
|
|
|
|
select.sheet-playbookSelector,
|
|
input.sheet-bioInputField {
|
|
font-size: 14px;
|
|
width: 80%;
|
|
}
|
|
|
|
input.sheet-playbookDetailTitle {
|
|
font-size: 14px;
|
|
width: 90%;
|
|
|
|
}
|
|
|
|
|
|
|
|
select.sheet-playbookSelector::-webkit-input-placeholder,
|
|
select.sheet-playbookSelector2::-webkit-input-placeholder,
|
|
input.sheet-bioInputField::-webkit-input-placeholder,
|
|
input.sheet-playbookDetailTitle::-webkit-input-placeholder {
|
|
|
|
border: 2px solid;
|
|
/* shadow: offset-x | offset-y | blur-radius | spread-radius | color */
|
|
box-shadow: 0px 0px 5px -4px black;
|
|
padding:2px;
|
|
}
|
|
|
|
div.sheet-columnThirds textarea {
|
|
width: 90%;
|
|
margin-top: 0px;
|
|
}
|
|
|
|
/*
|
|
_/ _/ _/_/_/ _/_/_/ _/_/_/_/
|
|
_/ _/ _/ _/ _/ _/
|
|
_/_/_/_/ _/ _/ _/ _/_/_/
|
|
_/ _/ _/ _/ _/ _/
|
|
_/ _/ _/_/_/ _/_/_/ _/_/_/_/
|
|
|
|
*/
|
|
|
|
/* Hide/Reveal all the textareas in the section immediately following the checkbox */
|
|
|
|
input.sheet-inputHider:checked + div div.sheet-hideOnChecked,
|
|
input.sheet-inputHider:not(:checked) + div div.sheet-revealOnChecked,
|
|
input.sheet-inputHider:checked + div div.repcontrol {
|
|
display: none;
|
|
}
|
|
|
|
input.sheet-inputHider:not(:checked) + div div.sheet-hideOnChecked,
|
|
input.sheet-inputHider:checked + div div.sheet-revealOnChecked,
|
|
input.sheet-inputHider:not(:checked) + div div.repcontrol {
|
|
display: inline-block;
|
|
position: relative;
|
|
}
|
|
|
|
|
|
input[type="checkbox"][name="attr_simplifyStates"]:not(:checked) ~ div.sheet-simpleStates,
|
|
input[type="checkbox"][name="attr_simplifyStates"]:checked ~ div.sheet-complexStates {
|
|
display: none;
|
|
}
|
|
|
|
input[type="checkbox"][name="attr_simplifyStates"]:checked ~ div.sheet-simpleStates,
|
|
input[type="checkbox"][name="attr_simplifyStates"]:not(:checked) ~ div.sheet-complexStates {
|
|
width: 125px;
|
|
font-family: "Teko Semibold", "Arial Black", "Helvetica", sans-serif;
|
|
display: inline-block;
|
|
/*margin-left: -25px;*/
|
|
font-size: smaller;
|
|
}
|
|
|
|
|
|
|
|
/*
|
|
_/_/_/ _/_/_/_/_/ _/_/ _/_/_/_/_/ _/_/_/
|
|
_/ _/ _/ _/ _/ _/
|
|
_/_/ _/ _/_/_/_/ _/ _/_/
|
|
_/ _/ _/ _/ _/ _/
|
|
_/_/_/ _/ _/ _/ _/ _/_/_/
|
|
|
|
*/
|
|
|
|
|
|
|
|
div.sheet-statesSidebar div.sheet-complexStates,
|
|
div.sheet-statesSidebar div.sheet-simpleStates {
|
|
text-align: right;
|
|
margin-left: -25px;
|
|
}
|
|
|
|
div.sheet-statesSidebar div.sheet-statesSidebar {
|
|
display: inline-block;
|
|
text-align: right;
|
|
padding-right: 5px;
|
|
border-right: 5px solid;
|
|
|
|
}
|
|
|
|
|
|
|
|
.sheet-stateInput input[type=number],
|
|
.sheet-stateVerticalInput input[type=number],
|
|
.sheet-simpleStates input[type=number],
|
|
.sheet-complexStates input[type=number] {
|
|
text-align: center;
|
|
border: none;
|
|
background: none;
|
|
box-shadow: none;
|
|
/*
|
|
-webkit-appearance: none;
|
|
-moz-appearance: none;
|
|
-webkit-border-radius: 0px;
|
|
*/
|
|
border: 2px solid;
|
|
border-radius: 0px;
|
|
border-top-left-radius: 2px;
|
|
border-bottom-left-radius: 2px;
|
|
border-top-right-radius: 2px;
|
|
border-bottom-right-radius: 2px;
|
|
|
|
}
|
|
|
|
input.sheet-numberFieldBig[type=number] {
|
|
width: 25px;
|
|
height: 25px;
|
|
font-size: 15px;
|
|
}
|
|
|
|
|
|
div.sheet-stateInput div.sheet-EmotionSpikes {
|
|
margin-right: 3px;
|
|
}
|
|
|
|
.sheet-stateInput .sheet-EmotionSpikes input.sheet-numberArrowsOnly[type=number] {
|
|
width: 23px;
|
|
background-color: azure;
|
|
border: 0;
|
|
|
|
}
|
|
|
|
|
|
.sheet-stateInput input.sheet-numberArrowsOnly[type=number]::-webkit-inner-spin-button,
|
|
.sheet-stateInput input.sheet-numberArrowsOnly[type=number]::-webkit-outer-spin-button {
|
|
/* -webkit-appearance:button; */
|
|
}
|
|
|
|
input.sheet-numberFieldBig[type=number] {
|
|
-moz-appearance: textfield;
|
|
}
|
|
|
|
input.sheet-numberFieldBig[type=number]::-webkit-inner-spin-button,
|
|
input.sheet-numberFieldBig[type=number]::-webkit-outer-spin-button {
|
|
-webkit-appearance: none;
|
|
appearance: none;
|
|
margin: 0;
|
|
}
|
|
|
|
|
|
div.sheet-simpleStates button[type="roll"] {
|
|
width: auto;
|
|
margin: auto;
|
|
text-align: center;
|
|
background: linear-gradient(rgba(128, 128, 128, 0.66), rgba(128, 128, 128, 0.33), rgba(128, 128, 128, 0.8) );
|
|
margin-top: 10px;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
button.sheet-rollButton[type=roll] {
|
|
background-color: transparent;
|
|
font-size: 14px;
|
|
text-align: center;
|
|
line-height: 11px;
|
|
background-image: none;
|
|
text-shadow: none;
|
|
box-shadow: none;
|
|
padding: 0;
|
|
margin: 0;
|
|
padding-bottom: 5px;
|
|
font-weight: bold;
|
|
width: 16px;
|
|
border: 2px solid;
|
|
}
|
|
|
|
.sheet-stateInput button.sheet-increasedRoll[type=roll]::before,
|
|
.sheet-stateVerticalInput button.sheet-increasedRoll[type=roll]::before,
|
|
.sheet-Spike button.sheet-increasedRoll[type=roll]::before,
|
|
.sheet-veil2020StateRow button.sheet-increasedRoll[type=roll]::before {
|
|
content:"↑";
|
|
|
|
}
|
|
.sheet-stateInput button.sheet-decreasedRoll[type=roll]::before,
|
|
.sheet-stateVerticalInput button.sheet-decreasedRoll[type=roll]::before,
|
|
.sheet-Spike button.sheet-decreasedRoll[type=roll]::before,
|
|
.sheet-veil2020StateRow button.sheet-decreasedRoll[type=roll]::before {
|
|
content: "↓";
|
|
|
|
}
|
|
|
|
|
|
.sheet-stateInput button.sheet-normalRoll[type=roll],
|
|
.sheet-stateVerticalInput button.sheet-normalRoll[type=roll],
|
|
.sheet-Spike button.sheet-normalRoll[type=roll],
|
|
.sheet-veil2020StateRow button.sheet-normalRoll[type=roll] {
|
|
padding-top: 7px;
|
|
width: 20px;
|
|
}
|
|
|
|
|
|
|
|
/*
|
|
|
|
_/_/_/ _/_/_/ _/_/_/ _/ _/ _/_/_/_/ _/ _/ _/_/_/_/ _/_/_/_/_/ _/_/_/_/ _/_/_/ _/_/_/
|
|
_/ _/ _/ _/ _/ _/ _/ _/_/ _/_/ _/ _/ _/ _/ _/ _/
|
|
_/_/ _/_/_/ _/ _/_/ _/_/_/ _/ _/ _/ _/_/_/ _/ _/_/_/ _/_/_/ _/_/
|
|
_/ _/ _/ _/ _/ _/ _/ _/ _/ _/ _/ _/ _/ _/
|
|
_/_/_/ _/ _/_/_/ _/ _/ _/_/_/_/ _/ _/ _/_/_/_/ _/ _/_/_/_/ _/ _/ _/_/_/
|
|
|
|
*/
|
|
|
|
|
|
div.sheet-simpleStates div.sheet-emotionSpikeWidgetContainer {
|
|
position: relative;
|
|
width: 30px;
|
|
height: 25px;
|
|
display: inline-block;
|
|
vertical-align: middle;
|
|
}
|
|
|
|
input[type="checkbox"].sheet-emotionSpikeIncrementor {
|
|
position: absolute;
|
|
/* top: 0; */
|
|
left: 0;
|
|
width: 15px;
|
|
height: 15px;
|
|
z-index: 1;
|
|
-webkit-appearance: none;
|
|
-moz-appearance: none;
|
|
-appearance: none;
|
|
border: 0;
|
|
box-shadow: none;
|
|
}
|
|
|
|
input[type="checkbox"].sheet-emotionSpikeIncrementor + span {
|
|
position: absolute;
|
|
/* top: 0; */
|
|
left: 0;
|
|
width: 15px;
|
|
height: 15px;
|
|
border: 2px solid;
|
|
border-radius: 8px;
|
|
|
|
z-index: 2;
|
|
pointer-events: none;
|
|
background-color: grey;
|
|
box-shadow: inset 2px 2px 2px white;
|
|
}
|
|
|
|
|
|
|
|
input.sheet-emotionSpikeIncrementor[type="checkbox"] + span + span {
|
|
width: 6px;
|
|
display: inline-block;
|
|
position: absolute;
|
|
z-index: 2;
|
|
bottom: 0;
|
|
margin-left: -5px;
|
|
background-color: grey;
|
|
border: 0;
|
|
}
|
|
|
|
div.sheet-stateSimpleDisplay input.sheet-emotionSpike[type="checkbox"][value="1"]:checked ~ div input.sheet-emotionSpikeIncrementor[type="checkbox"] + span + span {
|
|
height: 5px;
|
|
}
|
|
div.sheet-stateSimpleDisplay input.sheet-emotionSpike[type="checkbox"][value="2"]:checked ~ div input.sheet-emotionSpikeIncrementor[type="checkbox"] + span + span {
|
|
height: 10px;
|
|
}
|
|
div.sheet-stateSimpleDisplay input.sheet-emotionSpike[type="checkbox"][value="3"]:checked ~ div input.sheet-emotionSpikeIncrementor[type="checkbox"] + span + span {
|
|
height: 15px;
|
|
}
|
|
div.sheet-stateSimpleDisplay input.sheet-emotionSpike[type="checkbox"][value="4"]:checked ~ div input.sheet-emotionSpikeIncrementor[type="checkbox"] + span + span {
|
|
height: 20px;
|
|
}
|
|
div.sheet-stateSimpleDisplay input.sheet-emotionSpike[type="checkbox"][value="5"]:checked ~ div input.sheet-emotionSpikeIncrementor[type="checkbox"] + span + span {
|
|
height: 25px;
|
|
background-color: black;
|
|
border: 2px solid white;
|
|
}
|
|
|
|
/*
|
|
.sheet-stateInput button.sheet-rollButton[type=roll] {
|
|
display: inline-block;
|
|
margin-left: 0px;
|
|
}
|
|
|
|
.sheet-stateVerticalInput button.sheet-rollButton[type=roll] {
|
|
display: inline-block;
|
|
margin-left: -43px;
|
|
}
|
|
|
|
*/
|
|
|
|
|
|
/*
|
|
Radio widget: fill from left.
|
|
|
|
|
|
|
|
_/_/_/ _/_/_/ _/_/_/ _/ _/ _/_/_/_/ _/_/_/ _/_/ _/_/_/ _/_/_/ _/_/
|
|
_/ _/ _/ _/ _/ _/ _/ _/ _/ _/ _/ _/ _/ _/ _/ _/
|
|
_/_/ _/_/_/ _/ _/_/ _/_/_/ _/_/_/ _/_/_/_/ _/ _/ _/ _/ _/
|
|
_/ _/ _/ _/ _/ _/ _/ _/ _/ _/ _/ _/ _/ _/ _/
|
|
_/_/_/ _/ _/_/_/ _/ _/ _/_/_/_/ _/ _/ _/ _/ _/_/_/ _/_/_/ _/_/
|
|
|
|
*/
|
|
|
|
|
|
|
|
|
|
|
|
input.sheet-emotionSpike[type="checkbox"] {
|
|
padding: 0;
|
|
margin: -2px;
|
|
}
|
|
|
|
input.sheet-emotionSpike[type="radio"] {
|
|
opacity: 0;
|
|
width: 14px;
|
|
height: 16px;
|
|
position: relative;
|
|
top: 5px;
|
|
left: 6px;
|
|
margin: -10px;
|
|
cursor: pointer;
|
|
z-index: 1;
|
|
}
|
|
|
|
|
|
/* Fill them all in with a checkmark */
|
|
input.sheet-emotionSpike[type="radio"] + 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);
|
|
|
|
/*content: "•";*/
|
|
content: "X";
|
|
|
|
width: 12px;
|
|
height: 12px;
|
|
font-size: 15px;
|
|
|
|
-moz-border-radius: 3px;
|
|
-webkit-border-radius: 3px;
|
|
border-radius: 3px;
|
|
}
|
|
|
|
/* Make empty, all radio boxes after the one that's selected */
|
|
input.sheet-emotionSpike[type="radio"]:checked ~ input.sheet-emotionSpike[type="radio"] +span::before {
|
|
content: "";
|
|
}
|
|
|
|
/* Make the very first one something else altogether */
|
|
input.sheet-emotionSpike[type="radio"]:first-child + span::before {
|
|
content: "0";
|
|
}
|
|
|
|
div.sheet-rotate180 {
|
|
-webkit-transform: rotate(180deg);
|
|
}
|
|
|
|
div.sheet-inline {
|
|
display: inline;
|
|
}
|
|
|
|
/*
|
|
|
|
_/ _/ _/
|
|
_/_/_/ _/_/_/ _/_/ _/_/_/ _/_/_/ _/ _/_/
|
|
_/_/ _/ _/ _/ _/_/_/_/ _/ _/ _/ _/ _/_/
|
|
_/_/ _/ _/ _/ _/ _/ _/ _/ _/ _/
|
|
_/_/_/ _/ _/_/_/ _/_/_/ _/_/_/ _/_/_/ _/
|
|
|
|
*/
|
|
|
|
|
|
|
|
.sheet-harmArea,
|
|
.sheet-sidebarHold,
|
|
.sheet-sidebarBlurb {
|
|
border: 0;
|
|
text-align: left;
|
|
padding-left: 5px;
|
|
padding-right: 5px;
|
|
padding-bottom: 10px;
|
|
}
|
|
|
|
.sheet-sidebarHold textarea,
|
|
.sheet-harmArea textarea,
|
|
.sheet-sidebarBlurb textarea{
|
|
width: calc(100% - 10px);
|
|
margin-top: 3px;
|
|
}
|
|
|
|
.sheet-sidebarBlurb textarea {
|
|
min-height: 150px;
|
|
|
|
}
|
|
|
|
.sheet-harmCheckboxArea {
|
|
border: 0;
|
|
}
|
|
|
|
/*
|
|
|
|
_/_/_/_/_/ _/_/ _/_/_/ _/_/_/
|
|
_/ _/ _/ _/ _/ _/
|
|
_/ _/_/_/_/ _/_/_/ _/_/
|
|
_/ _/ _/ _/ _/ _/
|
|
_/ _/ _/ _/_/_/ _/_/_/
|
|
|
|
|
|
*/
|
|
|
|
div.sheet-tabs {
|
|
margin: auto;
|
|
text-align: center;
|
|
}
|
|
|
|
div.sheet-tab-content {
|
|
/* Hide the tabs until one is selected */
|
|
display: none;
|
|
}
|
|
|
|
input.sheet-tab1:checked ~ div.sheet-container div.sheet-tab1,
|
|
input.sheet-tab2:checked ~ div.sheet-container div.sheet-tab2,
|
|
input.sheet-tab3:checked ~ div.sheet-container div.sheet-tab3,
|
|
input.sheet-tab4:checked ~ div.sheet-container div.sheet-tab4 {
|
|
display: block;
|
|
position: relative;
|
|
left: 0;
|
|
top: 0;
|
|
}
|
|
|
|
div.sheet-tab-widget-container {
|
|
display: inline-block;
|
|
position: relative;
|
|
width: 20%;
|
|
height: 95px;
|
|
margin-top: -80px;
|
|
/* border: 2px solid blue; */
|
|
text-align: center;
|
|
}
|
|
|
|
input.sheet-tab
|
|
{
|
|
position: absolute;
|
|
font-size: larger;
|
|
font-weight: bold;
|
|
letter-spacing: 0.1em;
|
|
width: 100%;
|
|
height: 100%;
|
|
top: 0;
|
|
left: 0;
|
|
z-index: 0;
|
|
|
|
|
|
opacity: 0;
|
|
|
|
}
|
|
|
|
|
|
|
|
input.sheet-tab + span::before
|
|
{
|
|
content: attr(title);
|
|
width: 100%;
|
|
}
|
|
|
|
/* Fake tab widget floating on top of the actual radio widget */
|
|
input.sheet-tab + span {
|
|
display: inline-block;
|
|
pointer-events: none;
|
|
font-family: "Teko Semibold", "Arial Black", "Helvetica", sans-serif;
|
|
width: calc(100% - 30px);
|
|
height: calc(100% - 30px);
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
border-top: 15px solid;
|
|
border-right: 15px solid transparent !important;
|
|
border-left: 15px solid transparent !important;
|
|
|
|
/* padding-top: 52px; */
|
|
z-index: 2;
|
|
}
|
|
|
|
input.sheet-tab:checked + span
|
|
{
|
|
border-top: 15px solid;
|
|
border-top-color: inherit;
|
|
color: white;
|
|
text-shadow: 2px 2px 2px black;
|
|
background-color: rgba(255, 255, 255, 0.3);
|
|
|
|
}
|
|
|
|
div.sheet-tab-content
|
|
{
|
|
border-top: 5px solid;
|
|
border-top-color: inherit;
|
|
border-left: 5px solid transparent !important;
|
|
border-right: 5px solid transparent !important;
|
|
margin: 0;
|
|
padding: 0;
|
|
padding-top: 15px;
|
|
font-family: "Arial", "Helvetica", sans-serif;
|
|
letter-spacing: 0.05em;
|
|
|
|
}
|
|
|
|
|
|
/*
|
|
_/_/_/ _/ _/ _/_/_/_/_/ _/_/_/_/_/ _/_/ _/ _/ _/_/_/
|
|
_/ _/ _/ _/ _/ _/ _/ _/ _/_/ _/ _/
|
|
_/_/_/ _/ _/ _/ _/ _/ _/ _/ _/ _/ _/_/
|
|
_/ _/ _/ _/ _/ _/ _/ _/ _/ _/_/ _/
|
|
_/_/_/ _/_/ _/ _/ _/_/ _/ _/ _/_/_/
|
|
|
|
*/
|
|
|
|
|
|
.sheet-beliefs .repcontrol,
|
|
.sheet-improvements .repcontrol,
|
|
.sheet-miscNotes .repcontrol,
|
|
.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;
|
|
}
|
|
|
|
|
|
/*
|
|
|
|
_/_/_/ _/_/ _/ _/ _/_/_/
|
|
_/ _/ _/ _/ _/ _/ _/
|
|
_/_/_/ _/ _/ _/ _/ _/_/
|
|
_/ _/ _/ _/ _/ _/ _/
|
|
_/ _/ _/_/ _/_/_/_/ _/_/_/_/ _/_/_/
|
|
|
|
*/
|
|
|
|
@-webkit-keyframes rotateCW {
|
|
0% { -webkit-transform: rotate(1deg); }
|
|
100% { -webkit-transform: rotate(360deg); }
|
|
}
|
|
|
|
@-webkit-keyframes rotateCCW {
|
|
0% { -webkit-transform: rotate(-1deg); }
|
|
100% { -webkit-transform: rotate(-360deg); }
|
|
}
|
|
|
|
.sheet-rolltemplate-SpikedRoll {
|
|
|
|
}
|
|
|
|
.sheet-rolltemplate-SpikedRoll .sheet-rollHeader {
|
|
font-size: larger;
|
|
font-family: "Teko Semibold", "Arial Black", "Helvetica", sans-serif;
|
|
font-weight: bold;
|
|
text-align: center;
|
|
|
|
}
|
|
.sheet-rolltemplate-SpikedRoll .sheet-rollBody {
|
|
position: relative;
|
|
width: 50%;
|
|
padding-bottom: 50%;
|
|
text-align: center;
|
|
}
|
|
|
|
.sheet-rolltemplate-SpikedRoll .sheet-circles {
|
|
position: absolute;
|
|
height: 100%;
|
|
width: 100%;
|
|
background: url('http://i.imgur.com/Gsw4d9l.gif');
|
|
background-size: cover;
|
|
vertical-align: middle;
|
|
text-align: center;
|
|
border-radius: 50%;
|
|
margin-left: 50%;
|
|
}
|
|
|
|
.sheet-rolltemplate-SpikedRoll .sheet-circles div.sheet-rollResult {
|
|
margin-top: 45%;
|
|
}
|
|
|
|
|
|
.sheet-rolltemplate-SpikedRoll .sheet-circles div.sheet-rollResult span.inlinerollresult {
|
|
border-radius: 50%;
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
/*
|
|
|
|
|
|
_/ _/ _/_/_/_/ _/ _/_/_/
|
|
_/ _/ _/ _/ _/ _/
|
|
_/_/_/_/ _/_/_/ _/ _/_/_/
|
|
_/ _/ _/ _/ _/
|
|
_/ _/ _/_/_/_/ _/_/_/_/ _/
|
|
|
|
*/
|
|
|
|
|
|
|
|
/* ========================= */
|
|
|
|
/* Information Popup Titles (usually just a question mark) */
|
|
div.sheet-popupHelp,
|
|
div.sheet-popupHelpLeft,
|
|
div.sheet-popupHelpRight {
|
|
position: relative;
|
|
border: 2px solid dimgrey;
|
|
border-radius: 8px;
|
|
padding-left: 4px;
|
|
padding-right: 4px;
|
|
margin-right: 4px;
|
|
margin-left: 4px;
|
|
display: inline-block;
|
|
background-color: grey;
|
|
color: lightgrey;
|
|
|
|
}
|
|
|
|
div.sheet-MoveTitle {
|
|
width: 100%;
|
|
}
|
|
|
|
/* Move Titles - looks a bit like a button */
|
|
div.sheet-popupMoveDesc,
|
|
div.sheet-popupMoveDescRight,
|
|
div.sheet-popupMoveDescLeft {
|
|
border: 2px solid;
|
|
border-radius: 4px;
|
|
display: inline-block;
|
|
background: linear-gradient(rgba(128, 128, 128, 0.66), rgba(128, 128, 128, 0.33), rgba(128, 128, 128, 0.8) );
|
|
padding: 4px;
|
|
width: 125px;
|
|
text-align: center;
|
|
}
|
|
|
|
|
|
/*div.sheet-popupHelp strong {line-height:30px;}*/
|
|
/*div.sheet-popupHelp:hover {text-decoration:none;} */
|
|
|
|
/* hide the popups until hover */
|
|
div.sheet-popupHelp span:last-child,
|
|
div.sheet-popupHelpLeft span:last-child,
|
|
div.sheet-popupHelpRight span:last-child,
|
|
div.sheet-popupMoveDesc span.sheet-popupText:last-child,
|
|
div.sheet-popupMoveDescRight span.sheet-popupText:last-child,
|
|
div.sheet-popupMoveDescLeft span.sheet-popupText:last-child {
|
|
display:none;
|
|
z-index:10; padding:14px 20px;
|
|
margin-top:-30px; margin-left:28px;
|
|
width:250px; line-height:16px;
|
|
text-align: justify;
|
|
}
|
|
|
|
|
|
/* show the popups ON HOVER */
|
|
div.sheet-popupHelp:hover span:last-child,
|
|
div.sheet-popupHelpLeft:hover span:last-child,
|
|
div.sheet-popupHelpRight:hover span:last-child,
|
|
div.sheet-popupMoveDesc:hover span.sheet-popupText:last-child ,
|
|
div.sheet-popupMoveDescRight:hover span.sheet-popupText:last-child,
|
|
div.sheet-popupMoveDescLeft:hover span.sheet-popupText:last-child {
|
|
display:inline;
|
|
position:absolute; color:#111;
|
|
border:1px solid #DCA; background:#fffAF0;
|
|
text-decoration: none; text-shadow: none;
|
|
}
|
|
|
|
/* Left, Right and Center all get different offsets, so the popup doesn't end up offscreen */
|
|
div.sheet-popupHelp:hover span:last-child,
|
|
div.sheet-popupMoveDesc:hover span.sheet-popupText:last-child {
|
|
left: -125px;
|
|
top: 70px;
|
|
}
|
|
|
|
div.sheet-popupHelpLeft:hover span:last-child,
|
|
div.sheet-popupMoveDescLeft:hover span.sheet-popupText:last-child {
|
|
left: -325px;
|
|
top: 0;
|
|
}
|
|
div.sheet-popupHelpRight:hover span:last-child,
|
|
div.sheet-popupMoveDescRight:hover span.sheet-popupText:last-child {
|
|
left: 125px;
|
|
top: 0;
|
|
}
|
|
|
|
|
|
/*CSS3 extras*/
|
|
div.sheet-popupHelp span:last-child
|
|
{
|
|
border-radius:4px;
|
|
box-shadow: 5px 5px 8px #CCC;
|
|
}
|
|
|
|
|
|
/* Veil 2020 specific stuff */
|
|
img.sheet-veil2020EmotionWheel {
|
|
width: 100%;
|
|
}
|
|
|
|
|
|
|
|
div.sheet-veil2020Weapons textarea {
|
|
width: 50%;
|
|
height: 16px;
|
|
min-height: 16px;
|
|
vertical-align: top;
|
|
}
|
|
|
|
div.sheet-veil2020Weapons select {
|
|
width: 30%;
|
|
}
|
|
|
|
div.sheet-veil2020StateRow {
|
|
padding-bottom: 20px;
|
|
vertical-align: bottom;
|
|
}
|
|
|
|
div.sheet-veil2020StateRow div {
|
|
vertical-align: bottom;
|
|
}
|
|
|
|
div.sheet-veil2020MastHead {
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
div.sheet-veil2020MastHead h4 {
|
|
margin-left: 60px;
|
|
font-weight: bold;
|
|
}
|
|
|
|
div.sheet-veil2020MastHead h1 {
|
|
|
|
}
|
|
|
|
div.sheet-veil2020Container div.sheet-2colrow {
|
|
margin-bottom: 20px;
|
|
|
|
}
|
|
|
|
div.sheet-veil2020Section > div {
|
|
margin-bottom: 10px;
|
|
margin-top: 10px;
|
|
}
|
|
|
|
div.sheet-veil2020Container button[type="roll"] {
|
|
/* padding: 5px; */
|
|
}
|