Files

831 lines
18 KiB
CSS

/* Sheet container */
.charsheet {
min-width: 860px;
position: relative;
padding: 0 10px 0 0 !important;
height:auto;
background-color:#1f1f1f;
background-image:url(http://i.imgur.com/AZp4v4X.jpg);
overflow: hidden;
}
.sheet-container {
position: relative;
width: 860px;
}
input:checked + .sheet-container {
min-width: 860px;
width: initial;
}
/* GHOST HOLDER */
.sheet-ghostholder{
width:860px;
height:891px;
background-image:url(http://i.imgur.com/BIcJOGk.png);
margin-right: auto;
margin-left: auto;
}
.sheet-column1, .sheet-column2{
display:inline-block;
height:50px;
width:50%;
vertical-align: top;
}
.sheet-column1{
width: 335px;
height:891px;
}
.sheet-column2{
width: 525px;
height:891px;
}
/* BUTTONS ETC */
.sheet-circlebg{
width: 35px;
height: 35px;
border-radius: 100px;
border: 1px solid white;
display: inline-block;
vertical-align: middle;
float: right;
margin-right: 13px;
position: relative;
top: -8px;
}
.sheet-ghostbuttonholder{
width: 150px;
height: 30px;
}
.sheet-ghostbuttonholder:first-child{
margin-bottom: 27px;
}
.sheet-actionbuttons{
position: relative;
top: 72px;
left: 17px;
}
.sheet-secondrow{
margin-bottom:21px;
}
.sheet-imposewill {
margin-bottom: 52px !important;
}
.charsheet button[type=roll].sheet-actionbutton {
font-size: 13.5px;
letter-spacing: 1px;
color: #e0e0e0;
margin-top: 1px;
text-align: left;
width: auto;
}
.charsheet button[type=roll].sheet-rollbutton {
text-transform: uppercase;
border: none;
margin: 0;
padding: 0;
font-weight: 800;
line-height: 9px;
}
.charsheet button[type=roll] {
font-family: "Hoefler Text",Georgia,"Baskerville Old Face",Garamond,"Times New Roman",serif;
background: transparent;
box-shadow: none;
}
.charsheet button {
text-shadow: none!important;
}
.charsheet button[type=roll]:before {
content: ""!important;
}
/* INPUTS */
.charsheet .sheet-topinput input[type=text], .charsheet .sheet-topinput input[type=number] {
width: 100%;
border-bottom: 1px solid #3ad9ff;
border-radius: 0;
font-size: 14px;
padding: 3px 0 0;
margin: 3px 0 0;
color: #3ad9ff;
text-shadow: 0px 0px 14px rgb(0, 204, 255);
}
.charsheet .sheet-badgeinput{
position: relative;
width: 124px;
top: 114px;
left: 75px;
}
.charsheet .sheet-nameinput{
position: relative;
width: 118px;
top: 89px;
left: 263px;
}
.charsheet .sheet-levelinput{
position: relative;
width: 39px;
top: 64px;
left: 450px;
}
.charsheet .sheet-homeland{
position: relative;
width: 214px;
top: 79px;
left: 276px;
}
/* GENERALITIES */
button {
text-shadow: none !important;
}
label {
font-family: Georgia, Times, "Times New Roman", serif;
text-transform: uppercase;
letter-spacing: 1px;
margin: 0;
}
div {
cursor: default;
box-sizing: border-box;
}
input[type=text],input[type=number] {
font-family: Georgia, Times, "Times New Roman", serif;
border: none;
background: none;
box-shadow: none;
width: 95%;
padding: 0;
color: black;
}
textarea {
box-shadow: none;
font-family: Georgia, Times, "Times New Roman", serif;
border: none;
margin: 0;
padding: 0;
background: transparent;
color: black;
}
li {
cursor: default;
}
li, li input[type=text] {
font-family: Georgia, Times, "Times New Roman", serif;
position: relative;
color: #404040;
}
li:after {
background: black;
transform: rotate(45deg);
content: '';
display: block;
position: absolute;
left: 0;
}
ul {
list-style: none;
margin: 0;
}
span {
font-family: Georgia, Times, "Times New Roman", serif;
color: black;
cursor: default;
}
input[type=checkbox], input[type=radio] {
opacity: 0;
z-index: 1;
margin: 0;
padding: 0;
position: absolute;
}
input[type=checkbox] + span, input[type=radio] + span {
cursor: pointer;
}
input[type=number] {
color: black;
box-shadow: none;
}
/*
input[type=number] {
-moz-appearance: textfield;
}
input[type=number]:hover,
input[type=number]:focus {
-moz-appearance: number-input;
}
*/
.sheet-hidden {
display: none !important;
}
.sheet-rep-block {
display: inline-block;
width: 100%;
}
span.sheet-inherit, input.sheet-inherit {
font-size: inherit;
color: inherit;
font-family: inherit;
font-weight: inherit;
text-transform: inherit;
letter-spacing: inherit;
}
/* NEW STYLES */
.charsheet input.sheet-attrnum{
position: relative;
left: 100px;
top: -21px;
width: 55px !important;
font-size: 19px;
text-align: center;
color: #3ad9ff;
text-shadow: 0px 0px 14px rgb(0, 204, 255);
}
.sheet-homelandbox1{
color:#e0e0e0;
position: relative;
left: 178px;
top: -139px;
width: 310px;
height: 200px;
}
.sheet-homelandtitle{
font-variant: small-caps;
font-family: Georgia, Times, "Times New Roman", serif;
color:#e0e0e0;
padding-right: 6px;
}
.sheet-checklabel{
color:#e0e0e0;
font-family: Georgia, Times, "Times New Roman", serif;
padding-left: 6px;
}
input.sheet-checkbox.sheet-squarebox {
height: 15px;
width: 146px;
}
input.sheet-checkbox.sheet-squarebox + span {
margin: 0;
width: 7px;
height: 7px;
}
input.sheet-checkbox.sheet-squarebox:checked + span {
background-color: #3ad9ff !important;
box-shadow: 0px 0px 14px rgb(0, 204, 255);
opacity: 1;
}
input.sheet-checkbox.sheet-squarebox:checked~span.sheet-checklabel{
color: #3ad9ff;
text-shadow: 0px 0px 14px rgb(0, 204, 255);
}
input.sheet-checkbox {
height: 12px;
width: 12px;
}
input.sheet-checkbox.sheet-circlebox-small {
margin-top: 2px;
}
input.sheet-checkbox.sheet-squarebox-small {
height: 10px;
width: 10px;
}
input.sheet-checkbox + span {
display: inline-block;
width: 10px;
height: 10px;
border: 1px solid #ffffff;
margin: 0 2px 0 0;
}
input.sheet-checkbox:hover + span {
opacity: 0.7;
}
input.sheet-checkbox.sheet-squarebox {
margin-top: 3px;
}
input.sheet-checkbox.sheet-squarebox + span {
background: transparent;
vertical-align: middle;
margin-left: 1px;
}
.sheet-homelandbox{
width: 49%;
}
.sheet-akoros{
position: relative;
top: 11px;
}
.sheet-severos{
position: relative;
top: -180px;
left: 165px;
}
.sheet-iruvia{
position: relative;
top: -169px;
left: 165px;
}
.sheet-geardesc{
font-family: Georgia, Times, "Times New Roman", serif;
color: #e0e0e0;
font-size: 12px;
position: relative;
top: -125px;
left: 15px;
width: 215px;
}
.sheet-lightningoil{
position: relative;
top: -111px;
left: 18px;
width: 199px;
font-size: 127%;
}
input.sheet-checkbox.sheet-circlebox{
width:21px;
}
input.sheet-checkbox.sheet-circlebox + span {
border-radius: 50px;
height: 12px;
width: 12px;
margin-right: 5px;
float: right;
position: relative;
top: 1px;
}
.sheet-lightningoil div{
display:inline-block;
}
.sheet-role{
position: relative;
top: -248px;
left: 253px;
width: 44%;
line-height: 15px;
}
div.sheet-role > div {
margin-bottom:10px;
}
.sheet-levels{
position: relative;
top: -240px;
left: 13px;
}
.sheet-levels .sheet-homelandtitle{
margin-top:8px;
}
.sheet-lines{
position: relative;
top: -508px;
left: 167px;
}
.sheet-lines > div {
margin-bottom:3px;
}
.sheet-rolesworked{
position: relative;
top: -781px;
left: 334px;
width: 160px;
}
.sheet-rolesworked > div {
margin-bottom:3px;
}
.sheet-ghostkills{
position: relative;
top: -771px;
left: 334px;
width: 160px;
}
.sheet-ghostkills .sheet-circlebg{
float:none;
display:block;
top:2px;
width: 50px;
height: 50px;
}
div.sheet-homelandbox.sheet-ghostkills > input {
left: 5px;
top: -43px;
font-size: 29px;
line-height: 0%;
}
div.sheet-homelandbox.sheet-ghostkills > div:nth-child(4){
position: relative;
top: -15px;
}
div.sheet-homelandbox.sheet-ghostkills > div:nth-child(5){
top: -12px;
}
div.sheet-homelandbox.sheet-ghostkills > input:nth-child(6){
top: -57px;
}
/* CLOCKS */
.sheet-harmclock{
position:relative;
top: 42px;
left: 15px;
}
.sheet-traumaclock{
top:232px !important;
}
.sheet-scarsclock{
left: 154px !important;
}
.sheet-horrorclock{
top:232px !important;
}
.sheet-clock input.sheet-label {
font-size: 11px;
letter-spacing: 1px;
font-weight: 600;
line-height: 0;
width: 100%;
}
.sheet-clockpicture {
position: absolute;
padding: 2px;
margin-top: -38px;
z-index: 1;
height: 117px;
width: 117px;
background-image: url(http://i.imgur.com/77QdOWK.png);
}
.sheet-clock .sheet-clockpicture {
margin-left: 85%;
}
.sheet-clock .sheet-4clock, .sheet-6clock, .sheet-8clock, .sheet-12clock {
/* display: none; */
margin-top: 10px;
}
/* Positioning inputs on clocks */
.sheet-clockpicture input[type=checkbox]:checked {
display: none;
}
.sheet-4clock .sheet-clockpicture input {
position: relative;
left: 38px;
top: 40px;
height: 35px !important;
width: 35px !important;
}
.sheet-4clock .sheet-clockpicture input[value="1"] {
position: relative;
top: 11px;
left: 39px;
}
.sheet-4clock .sheet-clockpicture input[value="2"] {
position: relative;
left: 31px;
}
.sheet-4clock .sheet-clockpicture input[value="3"] {
position: relative;
top: 68px;
left: -38px;
}
.sheet-4clock .sheet-clockpicture input[value="4"] {
position: relative;
top: 4px;
left: 12px;
}
.sheet-6clock .sheet-clockpicture input {
/*height: 17px;
width: 12px;*/
left: 38px;
top: 40px;
height: 35px !important;
width: 35px !important;
}
.sheet-6clock .sheet-clockpicture input[value="1"] {
position: relative;
top: 17px;
left: 55px;
}
.sheet-6clock .sheet-clockpicture input[value="2"] {
position: relative;
}
.sheet-6clock .sheet-clockpicture input[value="3"] {
position: relative;
top: 70px;
left: -23px;
}
.sheet-6clock .sheet-clockpicture input[value="4"] {
position: relative;
top: 30px;
left: 22px;
}
.sheet-6clock .sheet-clockpicture input[value="5"] {
position: relative;
top: 4px;
left: -31px;
}
.sheet-6clock .sheet-clockpicture input[value="6"] {
position: relative;
top: -20px;
left: -52px;
}
/* End positioning */
input[value="4"]:checked ~ .sheet-4clock,
input[value="6"]:checked ~ .sheet-6clock {
display: block;
}
.sheet-4clock input[value="0"]:checked ~ .sheet-clockpicture {
background-image: url(http://i.imgur.com/8cImqJt.png);
}
.sheet-4clock input[value="1"]:checked ~ .sheet-clockpicture {
background-image: url(http://i.imgur.com/ZaxeV1l.png);
}
.sheet-4clock input[value="2"]:checked ~ .sheet-clockpicture {
background-image: url(http://i.imgur.com/LVbgk7Q.png);
}
.sheet-4clock input[value="3"]:checked ~ .sheet-clockpicture {
background-image: url(http://i.imgur.com/PcVhKsv.png);
}
.sheet-4clock input[value="4"]:checked ~ .sheet-clockpicture {
background-image: url(http://i.imgur.com/0XG71xP.png);
}
div.sheet-harmclock.sheet-horrorclock .sheet-4clock input[value="0"]:checked ~ .sheet-clockpicture {
background-image: url(http://i.imgur.com/yRBth0u.png);
}
div.sheet-harmclock.sheet-horrorclock .sheet-4clock input[value="1"]:checked ~ .sheet-clockpicture {
background-image: url(http://i.imgur.com/DQlms38.png);
}
div.sheet-harmclock.sheet-horrorclock .sheet-4clock input[value="2"]:checked ~ .sheet-clockpicture {
background-image: url(http://i.imgur.com/xdF7Wqp.png);
}
div.sheet-harmclock.sheet-horrorclock .sheet-4clock input[value="3"]:checked ~ .sheet-clockpicture {
background-image: url(http://i.imgur.com/2sBZFvd.png);
}
div.sheet-harmclock.sheet-horrorclock .sheet-4clock input[value="4"]:checked ~ .sheet-clockpicture {
background-image: url(http://i.imgur.com/9umbkU9.png);
}
.sheet-6clock input[value="0"]:checked ~ .sheet-clockpicture {
background-image: url(http://i.imgur.com/77QdOWK.png);
}
.sheet-6clock input[value="1"]:checked ~ .sheet-clockpicture {
background-image: url(http://i.imgur.com/oEoEarl.png);
}
.sheet-6clock input[value="2"]:checked ~ .sheet-clockpicture {
background-image: url(http://i.imgur.com/VENKtb4.png);
}
.sheet-6clock input[value="3"]:checked ~ .sheet-clockpicture {
background-image: url(http://i.imgur.com/NybZx5G.png);
}
.sheet-6clock input[value="4"]:checked ~ .sheet-clockpicture {
background-image: url(http://i.imgur.com/0TneIDf.png);
}
.sheet-6clock input[value="5"]:checked ~ .sheet-clockpicture {
background-image: url(http://i.imgur.com/SRagNmE.png);
}
.sheet-6clock input[value="6"]:checked ~ .sheet-clockpicture {
background-image: url(http://i.imgur.com/CJB1p7f.png);
}
div.sheet-harmclock.sheet-traumaclock .sheet-6clock input[value="0"]:checked ~ .sheet-clockpicture {
background-image: url(http://i.imgur.com/aTqb6sN.png);
}
div.sheet-harmclock.sheet-traumaclock .sheet-6clock input[value="1"]:checked ~ .sheet-clockpicture {
background-image: url(http://i.imgur.com/yRpRATi.png);
}
div.sheet-harmclock.sheet-traumaclock .sheet-6clock input[value="2"]:checked ~ .sheet-clockpicture {
background-image: url(http://i.imgur.com/C2oIScD.png);
}
div.sheet-harmclock.sheet-traumaclock .sheet-6clock input[value="3"]:checked ~ .sheet-clockpicture {
background-image: url(http://i.imgur.com/Xfju0t7.png);
}
div.sheet-harmclock.sheet-traumaclock .sheet-6clock input[value="4"]:checked ~ .sheet-clockpicture {
background-image: url(http://i.imgur.com/V9nBIvl.png);
}
div.sheet-harmclock.sheet-traumaclock .sheet-6clock input[value="5"]:checked ~ .sheet-clockpicture {
background-image: url(http://i.imgur.com/1PYixAr.png);
}
div.sheet-harmclock.sheet-traumaclock .sheet-6clock input[value="6"]:checked ~ .sheet-clockpicture {
background-image: url(http://i.imgur.com/hwvZ0IS.png);
}
.sheet-clockprogress {
margin-top: 10px;
}
.sheet-clockprogress span:first-child {
margin-right: 3px;
}
.sheet-clock {
background-color: #d6d8d9;
font-style: italic;
font-size: 10px;
line-height: 8px;
}
.sheet-clock {
width: 100%;
display: inline-block;
padding: 8px 8px 12px;
margin-bottom: 8px;
}
.sheet-healing .sheet-clockpicture {
margin: 32px 0 0 22px;
}
input.sheet-zero {
width: 13px;
height: 13px;
}
input.sheet-zero + span {
width: 10px;
height: 13px;
margin-right: 3px;
display: inline-block;
position: absolute;
vertical-align: top;
background-image: url(https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Blades%20in%20the%20Dark/Assets/teeth/zero.png);
}
input.sheet-zero[type=radio]:checked + span {
display: none;
}
.sheet-healing .sheet-zeroholder {
z-index: 3;
}
.sheet-zeroholder {
position: relative;
top: -4px;
left: 34px;
}
div.sheet-harmclock.sheet-traumaclock div.sheet-zeroholder{
left:19px;
}
div.sheet-harmclock.sheet-horrorclock div.sheet-zeroholder{
left:19px;
}
.sheet-chits{
position: relative;
top: 470px;
left: -45px;
}
.sheet-chits input{
font-size: 29px;
line-height: 0%;
}
div.sheet-chits > input:nth-child(2) { left: 143px;}
div.sheet-chits > input:nth-child(3) { left: 183px;}
.sheet-notes{
position: relative;
top: 531px;
left: 33px;
resize: none;
width: 269px;
height: 77px;
color: #3ad9ff;
}
.sheet-notes2{
position: relative;
top: 594px;
left: 33px;
resize: none;
width: 269px;
height: 150px;
color: #3ad9ff;
}
.sheet-reference{
width: 788px;
margin-top: 20px;
padding-bottom: 50px;
margin-right: auto;
margin-left: auto;
height: 880px;
overflow: hidden;
}
.sheet-rulesbox{
font-family: Georgia, Times, "Times New Roman", serif;
color: #e0e0e0;
font-size: 14px;
width:30%;
border-top: 1px solid white;
padding-top: 13px;
display:inline-block;
margin-right: 23px;
padding-bottom: 23px;
vertical-align: top;
}
.sheet-rulestitle{
font-variant: small-caps;
font-family: Georgia, Times, "Times New Roman", serif;
color:white;
font-size: 20px;
}
.sheet-rulesbox ul{
color:#e0e0e0;
list-style-type: disc;
padding-left: 15px;
padding-bottom: 14px;
}
.sheet-rulesbox li{
color:#e0e0e0;
padding-top: 8px;
}
/* ROLL TEMPLATE */
.sheet-rolltemplate-ghost {
margin-left: -42px;
margin-right: -1px;
}
.sheet-rolltemplate-ghost {
height: auto;
padding: 2px;
/* background: url(http://i.imgur.com/xBk4U1p.jpg) top left; */
background-color: #000000;
color: #3ad9ff;
text-shadow: 0px 0px 14px rgb(0, 204, 255);
font-family: Georgia, Times, "Times New Roman", serif;
background-image:url(http://i.imgur.com/VRNyMBT.gif);
background-size:cover;
}
.sheet-rolltemplate-ghost table {
border-collapse: separate;
border-spacing: 0;
padding: 10px;
min-width: 100%;
line-height: 32px;
font-size: 134%;
margin: 0;
border: none;
}
.sheet-rolltemplate-ghost .sheet-rt-table td,
.sheet-rolltemplate-ghost .sheet-rt-table th {
padding: 0;
border: none;
}
.sheet-rolltemplate-ghost table td.sheet-desc_leftcol {
width: 67px;
}
.sheet-rolltemplate-ghost table td.sheet-desc_rightcol {
padding-left: 14px;
line-height: 1.3em;
padding-top: 2px;
padding-bottom: 2px;
color:white;
}
.sheet-rolltemplate-ghost table td.sheet-desc_rightcol span {
font-size: 1.2em !important;
padding: 0;
font-weight: 100;
border: 0 !important;
background-color: rgba(0, 0, 0, 0);
}
.sheet-rolltemplate-ghost td {
border-top: 1px solid rgba(255, 255, 255, 0.25) !important;
}
.sheet-rolltemplate-ghost th {
font-size: 1.5em;
padding-top: 0px;
padding-bottom: 4px;
font-weight: 100;
text-align: left;
}
.sheet-rolltemplate-ghost table td.sheet-desc_leftcollongoff {
vertical-align: top;
padding-top: 5px;
}
.sheet-rolltemplate-ghost table td.sheet-desc_rightcollongoff {
font-size: 1.1em;
padding-top: 5px;
padding-bottom: 5px;
text-transform: none;
letter-spacing: 0px;
}