603 lines
11 KiB
CSS
603 lines
11 KiB
CSS
.charsheet {
|
|
background-image: url("https://i.imgur.com/LOs4jFZ.jpeg");
|
|
background-size: 100% auto;
|
|
background-repeat: repeat-y;
|
|
-webkit-background-size: cover;
|
|
-moz-background-size: cover;
|
|
-o-background-size: cover;
|
|
background-size: cover;
|
|
border: 2px solid black;
|
|
width:825px;
|
|
min-width:825px;
|
|
min-height:400px;
|
|
}
|
|
|
|
/* General Styles */
|
|
|
|
.charsheet input[type="text"], textarea{
|
|
display: inline-block;
|
|
background: #fff5;
|
|
border: black solid 1px;
|
|
border-top: none;
|
|
border-left: none;
|
|
border-radius: 0%;
|
|
}
|
|
.charsheet textarea{
|
|
border-left: black solid 1px;
|
|
resize: none;
|
|
}
|
|
.charsheet .sheet-label{
|
|
background: black;
|
|
color: #968c6a;
|
|
padding-right: 10px;
|
|
display: inline-block;
|
|
padding: 5px 10px 3px 5px;
|
|
height: 21px;
|
|
/*margin-right: -.5%;*/
|
|
font-size: 1em;
|
|
font-weight: bold;
|
|
vertical-align:middle;
|
|
}
|
|
.charsheet .sheet-label2{
|
|
font-size: 9pt;
|
|
margin: 1%;
|
|
}
|
|
.charsheet .sheet-label3{
|
|
font-style: italic;
|
|
font-size: 9pt;
|
|
padding-right: 2%;
|
|
}
|
|
.charsheet .sheet-label4{
|
|
font-weight: bold;
|
|
font-size: 9pt;
|
|
}
|
|
|
|
.sheet-row {
|
|
height: 32px;
|
|
margin: 0 0 2px;
|
|
}
|
|
.charsheet input[type="number"]{
|
|
border: none;
|
|
font-size: 2em;
|
|
background: none;
|
|
color: black;
|
|
text-align: center;
|
|
width: 2em !important;
|
|
}
|
|
.charsheet button{
|
|
background: #fff5;
|
|
font-size: 9pt !important;
|
|
border: 1.5px solid #968c6a;
|
|
font-style: italic;
|
|
color: black;
|
|
}
|
|
.charsheet button:hover{
|
|
background: black;
|
|
color: #968c6a;
|
|
text-shadow: none;
|
|
}
|
|
.charsheet button[type=roll]:before {
|
|
content: none !important;
|
|
}
|
|
.charsheet h4{
|
|
text-align: center;
|
|
}
|
|
.charsheet input:focus, .charsheet textarea:focus{
|
|
outline: none;
|
|
}
|
|
|
|
.charsheet input[type=checkbox]{
|
|
opacity: 0;
|
|
margin-right: -1.5em;
|
|
height: 1em;
|
|
width: 1em;
|
|
}
|
|
.charsheet input[type=checkbox] + span:before{
|
|
content: "❌";
|
|
border: 2px solid black;
|
|
height: 1em;
|
|
width: 1em;
|
|
color: #00000000;
|
|
font-size: 1em;
|
|
}
|
|
.charsheet input[type=checkbox]:checked + span:before{
|
|
color: #000000FF;
|
|
}
|
|
|
|
.sheet-modifier-popup-toggle{
|
|
text-align:right;
|
|
float:right;
|
|
/*background-color: #fff5;
|
|
padding:3px 5px 1px 4px;
|
|
border: 1.5px solid #968c6a;*/
|
|
}
|
|
|
|
.sheet-modifier-popup-toggle input[type=checkbox]{
|
|
display: inline-block;
|
|
margin-left:10px;
|
|
}
|
|
|
|
.charsheet .sheet-hidden {
|
|
display:none;
|
|
}
|
|
|
|
/* PAGE 1 */
|
|
|
|
/* Layout */
|
|
.sheet-container1 {
|
|
display: grid;
|
|
grid-template-columns: 420px 95px 145px 150px;
|
|
grid-template-rows: auto;
|
|
/*grid-template-rows: 111px 120px 120px 320px 220px 200px;*/
|
|
gap: 5px 5px;
|
|
grid-template-areas:
|
|
"basic basic logo logo"
|
|
"appearance appearance appearance appearance"
|
|
"attributes traits traits traits"
|
|
}
|
|
.sheet-basic {
|
|
grid-area: basic;
|
|
}
|
|
.sheet-logo {
|
|
grid-area: logo;
|
|
}
|
|
.sheet-appearance {
|
|
grid-area: appearance;
|
|
height:100px;
|
|
margin-top:-13px;
|
|
}
|
|
.sheet-attributes {
|
|
grid-area: attributes;
|
|
}
|
|
|
|
.sheet-traits {
|
|
grid-area: traits;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
/* Basic */
|
|
.sheet-basic .sheet-label, .sheet-appearance .sheet-label {
|
|
width:90px;
|
|
}
|
|
.sheet-basic input {
|
|
width:365px;
|
|
}
|
|
|
|
/* Attributes */
|
|
.sheet-sephirot {
|
|
background-image: url("https://i.imgur.com/G94W8PR.png");
|
|
background-size: 100% auto;
|
|
background-repeat: none;
|
|
-webkit-background-size: cover;
|
|
-moz-background-size: cover;
|
|
-o-background-size: cover;
|
|
background-size: cover;
|
|
height:720px;
|
|
width:420px;
|
|
position: relative;
|
|
}
|
|
|
|
.charsheet .sheet-passatt{
|
|
border: 3px #968c6a dotted;
|
|
width: 3em;
|
|
display: inline-block;
|
|
}
|
|
.charsheet .sheet-actatt{
|
|
border: 3px #968c6a dotted;
|
|
width: 3em;
|
|
border-radius: 50%;
|
|
display: inline-block;
|
|
}
|
|
.charsheet .sheet-attlabel{
|
|
display: inline-block;
|
|
text-align: center;
|
|
width: 180px;
|
|
}
|
|
|
|
|
|
.charsheet .sheet-attlabel select{
|
|
width:115px;
|
|
display: inline-block;
|
|
background: #fff5;
|
|
border: black solid 1px;
|
|
border-top: none;
|
|
border-left: none;
|
|
border-radius: 0%;
|
|
margin-bottom:0;
|
|
}
|
|
|
|
/* Relations */
|
|
|
|
.sheet-relations textarea {
|
|
height: 72px;
|
|
width:400px;
|
|
}
|
|
|
|
.sheet-relations input[type=text] {
|
|
width:345px;
|
|
}
|
|
|
|
.sheet-relations input[type=text] + span:before{
|
|
content: "+";
|
|
color: black;
|
|
font-size: 2em;
|
|
margin-left:10px;
|
|
margin-right:-10px;
|
|
vertical-align:middle;
|
|
}
|
|
|
|
/* Traits */
|
|
.sheet-disadvantages textarea, .sheet-advantages textarea, .sheet-dark_secrets textarea{
|
|
height: 140px;
|
|
width:390px;
|
|
}
|
|
|
|
.sheet-disadvantages {
|
|
margin-bottom:10px;
|
|
}
|
|
|
|
.sheet-advantages {
|
|
margin-bottom:10px;
|
|
}
|
|
|
|
.sheet-advantages select{
|
|
width:102px;
|
|
display: inline-block;
|
|
background: #fff5;
|
|
border: black solid 1px;
|
|
border-top: none;
|
|
border-left: none;
|
|
border-radius: 0%;
|
|
margin-bottom:0;
|
|
}
|
|
|
|
.sheet-advantages input[type="text"], .sheet-disadvantages input[type="text"]{
|
|
width:198px;
|
|
}
|
|
|
|
.sheet-advantages input[type="text"], .sheet-disadvantages input[type="text"], .sheet-weapons input[type="text"], .sheet-wounds input[type="text"]{
|
|
font-weight:bold;
|
|
color:#333;
|
|
}
|
|
|
|
.sheet-advantages button[type=roll] {
|
|
margin-right:0;
|
|
margin-left:0;
|
|
}
|
|
|
|
/* PAGE 2 */
|
|
|
|
/* Layout */
|
|
.sheet-container2 {
|
|
display: grid;
|
|
grid-template-columns: 360px 145px 145px 130px;
|
|
grid-template-rows: auto;
|
|
gap: 5px 5px;
|
|
grid-template-areas:
|
|
"penalties other other other"
|
|
"equipment advance advance advance"
|
|
"notes notes notes notes"
|
|
}
|
|
|
|
.sheet-penalties {
|
|
grid-area: penalties;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
.sheet-other {
|
|
grid-area: other;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.sheet-equipment {
|
|
grid-area:equipment;
|
|
}
|
|
|
|
.sheet-advancement {
|
|
grid-area:advance;
|
|
}
|
|
|
|
.sheet-notes {
|
|
grid-area:notes;
|
|
margin-top: 10px;
|
|
}
|
|
|
|
|
|
/* Wounds */
|
|
.sheet-wounds {
|
|
margin-bottom:10px;
|
|
}
|
|
|
|
.sheet-wounds-list{
|
|
background-color: #fff5;
|
|
border: black solid 1px;
|
|
border-top: none;
|
|
padding: 4px;
|
|
width:340px;
|
|
}
|
|
.sheet-wounds-list input[type=text]{
|
|
border: 1px transparent dashed;
|
|
background-color: transparent;
|
|
width:280px;
|
|
}
|
|
.sheet-wounds-list input[type=text]:hover{
|
|
border-bottom: 1px black dashed;
|
|
}
|
|
.sheet-wounds-list input[type=checkbox]{
|
|
display: inline-block;
|
|
margin-left:20px;
|
|
}
|
|
.sheet-wounds-list .sheet-label2{
|
|
display: inline-block;
|
|
}
|
|
.sheet-wounds-list .sheet-wounds-label-left{
|
|
width:268px;
|
|
}
|
|
|
|
/* Stability */
|
|
.sheet-bracket{
|
|
border: 1px black solid;
|
|
border-top: none;
|
|
background-color: #fff5;
|
|
margin-bottom:10px;
|
|
width:350px;
|
|
}
|
|
.sheet-bracket td{
|
|
padding:5px 0 4px 4px;
|
|
border-bottom: 1px black solid;
|
|
vertical-align:top;
|
|
}
|
|
.sheet-bracket td.sheet-label3{
|
|
border-right: 1px black solid;
|
|
}
|
|
|
|
.sheet-bracket td.sheet-bracket-stress{
|
|
padding-left:15px;
|
|
}
|
|
|
|
.charsheet .sheet-bracket input[type=radio]{
|
|
display: block;
|
|
opacity: 0;
|
|
margin-right: -1.5em;
|
|
height:18px;
|
|
width:20px;
|
|
}
|
|
.charsheet .sheet-bracket input[type=radio] + span:before{
|
|
content: "❌";
|
|
border: 2px solid black;
|
|
height: 1em;
|
|
width: 1em;
|
|
color: #00000000;
|
|
font-size: 1em;
|
|
}
|
|
.charsheet .sheet-bracket input[type=radio]:checked + span:before{
|
|
color: #000000FF;
|
|
}
|
|
|
|
/* Conditions */
|
|
.sheet-conditions {
|
|
margin-bottom:10px;
|
|
}
|
|
|
|
.sheet-conditions-checks{
|
|
background-color: #fff5;
|
|
border: black solid 1px;
|
|
border-top: none;
|
|
padding: 4px;
|
|
width:450px;
|
|
}
|
|
.sheet-conditions-checks input[type=checkbox]{
|
|
display: inline-block;
|
|
margin-left:10px;
|
|
}
|
|
.sheet-conditions-checks .sheet-label2{
|
|
display: inline-block;
|
|
width:184px;
|
|
}
|
|
|
|
|
|
/* Weapons */
|
|
.sheet-weapons {
|
|
margin-bottom:10px;
|
|
}
|
|
|
|
.charsheet .sheet-weapons input[type="number"]{
|
|
border: 1px solid black;
|
|
font-size: 1em;
|
|
background: none;
|
|
color: black;
|
|
text-align: center;
|
|
width: 40px !important;
|
|
}
|
|
|
|
.sheet-weapons textarea, .sheet-gears textarea {
|
|
height: 200px;
|
|
width:340px;
|
|
}
|
|
|
|
/* Advancement */
|
|
.charsheet .sheet-advancement input[type="number"]{
|
|
border: 1px solid black;
|
|
font-size: 1em;
|
|
background-color: #fff5;
|
|
color: black;
|
|
text-align: center;
|
|
width: 50px !important;
|
|
margin-top:2px;
|
|
}
|
|
|
|
.sheet-advancement .sheet-advancement-header {
|
|
font-size:1.5em;
|
|
font-style:italic;
|
|
margin-left:20px;
|
|
}
|
|
|
|
.sheet-advancement .sheet-advancement-checks {
|
|
margin-left:5px;
|
|
}
|
|
.sheet-advancement input[type=checkbox]{
|
|
opacity: 0;
|
|
margin-right: -1em;
|
|
height: 1em;
|
|
width: 1em;
|
|
}
|
|
|
|
.charsheet div.sheet-typesleeper, .charsheet div.sheet-typeaware, .charsheet div.sheet-typeenlightened{
|
|
display: none;
|
|
background-color: #fff5;
|
|
border: black solid 1px;
|
|
border-top: none;
|
|
padding: 4px;
|
|
width:450px;
|
|
}
|
|
.charsheet input.sheet-typesleeper:checked ~ div.sheet-typesleeper, .charsheet input.sheet-typeaware:checked ~ div.sheet-typeaware, .charsheet input.sheet-typeenlightened:checked ~ div.sheet-typeenlightened{
|
|
display: block;
|
|
}
|
|
.charsheet .sheet-advancement input[type=radio] + label {
|
|
width:auto;
|
|
padding: 0 3px;
|
|
}
|
|
|
|
/* Roll Template */
|
|
|
|
.sheet-rolltemplate-kult{
|
|
background-image: url("https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Kult%20Divinity%20Lost/images/KultRollTemplateBackground.png");
|
|
background-repeat: no-repeat;
|
|
background-position: bottom left;
|
|
padding: 0px 10px 15px 14px;
|
|
width: 240px;
|
|
margin-left:-10px;
|
|
}
|
|
|
|
.sheet-rolltemplate-kult .sheet-container {
|
|
background-color: #fff5;
|
|
border-radius: 0px 0px 8px 25px;
|
|
text-indent: 7px;
|
|
width: 223;
|
|
}
|
|
|
|
.sheet-rolltemplate-kult .sheet-tcat {
|
|
font-style: italic;
|
|
color: #000000;
|
|
}
|
|
|
|
.sheet-rolltemplate-kult h1 {
|
|
background: black;
|
|
color: #968c6a;
|
|
display: inline-block;
|
|
/*padding: 3px 10px 3px 5px;*/
|
|
/*margin-right: -.5%;*/
|
|
/*font-variant: small-caps;*/
|
|
font-size: 1.5em;
|
|
font-weight: bold;
|
|
width:226px;
|
|
margin-left:-7px;
|
|
}
|
|
|
|
.sheet-rolltemplate-kult h2 {
|
|
color: #000;
|
|
font-size: 1em;
|
|
font-style: italic;
|
|
display: inline-block;
|
|
width:226px;
|
|
border: #968c6a solid 2px;
|
|
/*border-top: none;*/
|
|
border-left: none;
|
|
border-right: none;
|
|
text-indent: 7px;
|
|
margin-left:-7px;
|
|
}
|
|
|
|
.sheet-rolltemplate-kult .sheet-fsuccess h4 {
|
|
color: #006600;
|
|
font-style: italic;
|
|
display: inline-block;
|
|
width:220px;
|
|
text-align: center;
|
|
height:25px;
|
|
margin-top:10px;
|
|
}
|
|
|
|
.sheet-rolltemplate-kult .sheet-hsuccess h4 {
|
|
color: #006699;
|
|
font-style: italic;
|
|
display: inline-block;
|
|
width:220px;
|
|
text-align: center;
|
|
height:25px;
|
|
margin-top:10px;
|
|
}
|
|
|
|
.sheet-rolltemplate-kult .sheet-ffailure h4 {
|
|
color: #990000;
|
|
font-style: italic;
|
|
display: inline-block;
|
|
width:220px;
|
|
text-align: center;
|
|
height:25px;
|
|
margin-top:10px;
|
|
}
|
|
|
|
|
|
.sheet-rolltemplate-kult .sheet-container .inlinerollresult {
|
|
background-color: #fff5;
|
|
border: 2px solid #000;
|
|
color:black;
|
|
}
|
|
|
|
.sheet-rolltemplate-kult .sheet-movedesc {
|
|
color: #000000;
|
|
display: inline-block;
|
|
width:217px;
|
|
margin-left:7px;
|
|
text-indent:0;
|
|
margin-bottom:9px;
|
|
}
|
|
.sheet-rolltemplate-kult .sheet-movedesc ul {
|
|
margin: 0 0 0 9px;*/
|
|
}
|
|
.sheet-rolltemplate-kult .sheet-movedesc ul li {
|
|
margin-top:3px;
|
|
padding-left:3px;
|
|
}
|
|
|
|
.sheet-rolltemplate-kult .sheet-movedesc ul li::marker {
|
|
color: #968c6a;
|
|
content: "♦";
|
|
}
|
|
|
|
|
|
/* TAB HANDLING */
|
|
|
|
.charsheet input[type=radio]{
|
|
display: none;
|
|
float: left;
|
|
}
|
|
.charsheet input[type=radio] + label{
|
|
content: '';
|
|
border: solid 1px black;
|
|
background: white;
|
|
color: black;
|
|
font-weight: bold;
|
|
width: auto;
|
|
text-align: center;
|
|
padding: 0 2px;;
|
|
float: left;
|
|
}
|
|
.charsheet input[type=radio]:hover + label{
|
|
background: #990000;
|
|
}
|
|
.charsheet input[type=radio]:checked + label{
|
|
background: black;
|
|
color: white;
|
|
}
|
|
.charsheet div.sheet-page1, .charsheet div.sheet-page2{
|
|
display: none;
|
|
}
|
|
.charsheet input.sheet-page1:checked ~ div.sheet-page1, .charsheet input.sheet-page2:checked ~ div.sheet-page2{
|
|
display: block;
|
|
}
|
|
|