365 lines
7.8 KiB
CSS
365 lines
7.8 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:900px;
|
|
min-width:900px;
|
|
min-height:400px;
|
|
}
|
|
|
|
.sheet-container1 {
|
|
display: grid;
|
|
grid-template-columns: 145px 145px 145px 145px 145px 145px;
|
|
grid-template-rows: 120px 120px 1fr 1fr 1fr 1fr;
|
|
gap: 5px 5px;
|
|
grid-template-areas:
|
|
"basic basic basic basic logo logo"
|
|
"appearance appearance appearance appearance appearance appearance"
|
|
"attributes attributes attributes dark_secrets dark_secrets dark_secrets"
|
|
"attributes attributes attributes disadvantages disadvantages disadvantages"
|
|
"attributes attributes attributes advantages advantages advantages"
|
|
"attributes attributes attributes relations relations relations";
|
|
}
|
|
.sheet-basic { grid-area: basic;
|
|
/*display: inline-block";*/
|
|
/*padding: 5px;*/
|
|
}
|
|
.sheet-logo { grid-area: logo;
|
|
/*background-image: url("https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Kult%20Divinity%20Lost/Kult-Divinity-lost-logo.png");*/
|
|
/*background-repeat: no-repeat;*/
|
|
/*background-size: 240px 100px;*/
|
|
/*background-position: center;*/
|
|
}
|
|
.sheet-appearance { grid-area: appearance;
|
|
|
|
}
|
|
.sheet-attributes { grid-area: attributes;
|
|
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:750px;
|
|
position: relative;
|
|
}
|
|
.sheet-dark_secrets { grid-area: dark_secrets;
|
|
|
|
}
|
|
.sheet-disadvantages { grid-area: disadvantages;
|
|
|
|
}
|
|
.sheet-advantages { grid-area: advantages;
|
|
|
|
}
|
|
.sheet-relations { grid-area: relations;
|
|
|
|
}
|
|
|
|
|
|
.sheet-container2 {
|
|
display: grid;
|
|
grid-template-columns: 145px 145px 145px 145px 145px 145px;
|
|
grid-template-rows: 210px 300px 300px 300px;
|
|
gap: 5px 5px;
|
|
grid-template-areas:
|
|
"wounds wounds dramatic_hooks dramatic_hooks dramatic_hooks dramatic_hooks"
|
|
"stability stability dramatic_hooks dramatic_hooks dramatic_hooks dramatic_hooks"
|
|
"gears gears gears notes notes notes"
|
|
"weapons weapons weapons notes notes notes";
|
|
}
|
|
|
|
.sheet-wounds { grid-area: wounds;
|
|
|
|
}
|
|
|
|
.sheet-stability { grid-area: stability;
|
|
|
|
}
|
|
|
|
.sheet-dramatic_hooks { grid-area: dramatic_hooks;
|
|
|
|
}
|
|
|
|
.sheet-gears { grid-area: gears;
|
|
margin-top: 10px;
|
|
}
|
|
|
|
.sheet-weapons { grid-area: weapons;
|
|
margin-top: 10px;
|
|
}
|
|
|
|
.sheet-notes { grid-area: notes;
|
|
margin-top: 10px;
|
|
}
|
|
|
|
|
|
.sheet-row {
|
|
height: 32px;
|
|
margin: 0 0 2px;
|
|
}
|
|
|
|
.sheet-rolltemplate-kult{
|
|
background-image: url("https://i.imgur.com/JbSqPZV.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;
|
|
}
|
|
|
|
.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;
|
|
|
|
}
|
|
|
|
.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: 3px 10px 3px 5px;
|
|
height: 21px;
|
|
/*margin-right: -.5%;*/
|
|
font-size: 1em;
|
|
font-weight: bold;
|
|
}
|
|
/*.charsheet .sheet-header .sheet-row{*/
|
|
/* margin-bottom: 1%;*/
|
|
/*}*/
|
|
.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 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 .sheet-attlabel{
|
|
display: inline-block;
|
|
text-align: center;
|
|
width: 180px;
|
|
}
|
|
.charsheet h4{
|
|
text-align: center;
|
|
}
|
|
.charsheet .sheet-leftatt{
|
|
float: left;
|
|
width: 49%;
|
|
margin-bottom: 7%;
|
|
}
|
|
.charsheet .sheet-rightatt{
|
|
float: right;
|
|
text-align: right;
|
|
width: 49%;
|
|
margin-bottom: 7%;
|
|
}
|
|
.charsheet input:focus, .charsheet textarea:focus{
|
|
outline: none;
|
|
}
|
|
.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: 10%;
|
|
text-align: center;
|
|
padding: 0%;
|
|
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;
|
|
}
|
|
.charsheet .sheet-onethird{
|
|
width: 35%;
|
|
}
|
|
.charsheet .sheet-label2{
|
|
font-size: 9pt;
|
|
margin: 1%;
|
|
}
|
|
.charsheet .sheet-bracket{
|
|
border: 1px black solid;
|
|
border-top: none;
|
|
background-color: #fff5;
|
|
}
|
|
.charsheet .sheet-bracket input[type=text]{
|
|
border: none;
|
|
margin-right: 11%;
|
|
background-color: transparent;
|
|
}
|
|
.charsheet .sheet-bracket input[type=text]:hover{
|
|
border-bottom: 1px black dashed;
|
|
}
|
|
.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;
|
|
}
|
|
.charsheet .sheet-label3{
|
|
font-style: italic;
|
|
font-size: 9pt;
|
|
padding-right: 2%;
|
|
}
|
|
.charsheet .sheet-label4{
|
|
font-weight: bold;
|
|
font-size: 9pt;
|
|
}
|
|
.charsheet .sheet-bracket input[type=radio]{
|
|
display: block;
|
|
opacity: 0;
|
|
margin-left: 25%;
|
|
margin-top: 15%;
|
|
margin-bottom: -1.1em;
|
|
}
|
|
.charsheet .sheet-bracket input[type=radio] + span:before{
|
|
content: "❌";
|
|
border: 2px solid black;
|
|
height: 1em;
|
|
width: 1em;
|
|
color: #00000000;
|
|
font-size: 1em;
|
|
float: left;
|
|
margin-left: 15%;
|
|
margin-bottom: 15%;
|
|
}
|
|
.charsheet .sheet-bracket input[type=radio]:checked + span:before{
|
|
color: #000000FF;
|
|
}
|
|
.charsheet .sheet-twothirds{
|
|
width: 60%;
|
|
} |