180 lines
5.5 KiB
CSS
180 lines
5.5 KiB
CSS
* {
|
|
box-sizing: border-box; }
|
|
|
|
.charsheet {
|
|
background-color: #eee;
|
|
padding: 1%;
|
|
width: 850px; }
|
|
|
|
button:before {
|
|
display: none; }
|
|
|
|
button[type='roll'] {
|
|
background: #bbb;
|
|
border-radius: 0.1em;
|
|
font-weight: bold;
|
|
font-size: 1.2rem; }
|
|
button[type='roll']:hover > span {
|
|
color: white; }
|
|
button[type='roll']:focus, button[type='roll']:hover, button[type='roll']:active {
|
|
background-color: #770709; }
|
|
button[type='roll']:focus > img, button[type='roll']:hover > img, button[type='roll']:active > img {
|
|
filter: invert(1); }
|
|
button[type='roll'] > span {
|
|
writing-mode: vertical-rl; }
|
|
button[type='roll']:nth-of-type(odd) {
|
|
box-shadow: 2px 2px 3px 1px #4c4c4c; }
|
|
button[type='roll']:nth-of-type(even) {
|
|
box-shadow: -2px 2px 3px 1px #4c4c4c; }
|
|
button[type='roll']:nth-of-type(odd) > span {
|
|
transform: rotate(-180deg); }
|
|
|
|
label {
|
|
margin: 0px;
|
|
padding: 0px; }
|
|
|
|
input[type="text"] {
|
|
width: 100%; }
|
|
|
|
textarea {
|
|
font-size: 1.1em;
|
|
font-weight: normal;
|
|
line-height: 1.5em;
|
|
min-height: 150px;
|
|
overflow-wrap: break-word;
|
|
overflow: scroll;
|
|
padding: 2px;
|
|
resize: vertical;
|
|
text-align: left;
|
|
vertical-align: top;
|
|
white-space: pre-line; }
|
|
|
|
h1.sheet-logo {
|
|
padding-left: 30%; }
|
|
|
|
div.sheet-box {
|
|
border: thin solid #bbb;
|
|
margin: 1%;
|
|
padding: 1%;
|
|
background-color: #fff; }
|
|
div.sheet-box img {
|
|
width: 100%; }
|
|
|
|
div.sheet-grid {
|
|
display: inline-grid;
|
|
grid-row-gap: 0.5em; }
|
|
|
|
div.sheet-kob-row {
|
|
grid-template-columns: 1fr 1fr;
|
|
width: 100%; }
|
|
div.sheet-kob-row img.sheet-header {
|
|
height: 30px;
|
|
width: 200px; }
|
|
div.sheet-kob-row div.sheet-biobox {
|
|
grid-template-columns: 8em 1fr; }
|
|
div.sheet-kob-row div.sheet-biobox input[type='checkbox'] {
|
|
height: 15px;
|
|
width: 15px; }
|
|
div.sheet-kob-row div.sheet-biobox textarea[name='attr_character_description'] {
|
|
grid-column: 1 / 3; }
|
|
div.sheet-kob-row div.sheet-dicebox {
|
|
grid-template-columns: 3em 1fr 1fr 3em;
|
|
grid-column-gap: 2%; }
|
|
div.sheet-kob-row div.sheet-dicebox button:nth-of-type(odd) {
|
|
grid-column: 1; }
|
|
div.sheet-kob-row div.sheet-dicebox button:nth-of-type(even) {
|
|
grid-column: 4; }
|
|
div.sheet-kob-row div.sheet-dicebox select {
|
|
font-size: 4em;
|
|
height: 100%;
|
|
margin: 0px;
|
|
padding-left: 25%;
|
|
width: 100%; }
|
|
div.sheet-kob-row div.sheet-dicebox select:nth-of-type(odd) {
|
|
grid-column: 2; }
|
|
div.sheet-kob-row div.sheet-dicebox select:nth-of-type(even) {
|
|
grid-column: 3; }
|
|
div.sheet-kob-row div.sheet-dicebox select[name="attr_flight"] {
|
|
grid-row: 1; }
|
|
div.sheet-kob-row div.sheet-dicebox select[name="attr_brawn"] {
|
|
grid-row: 2; }
|
|
div.sheet-kob-row div.sheet-dicebox select[name="attr_grit"] {
|
|
grid-row: 3; }
|
|
div.sheet-kob-row div.sheet-dicebox optgroup {
|
|
font-size: 0.5em; }
|
|
div.sheet-kob-row div.sheet-dicebox option {
|
|
font-size: 0.8em; }
|
|
div.sheet-kob-row div.sheet-strenghtsbox,
|
|
div.sheet-kob-row div.sheet-flawsbox {
|
|
grid-template-columns: 2em 1fr 2em 1fr;
|
|
grid-column-gap: 0.2em; }
|
|
div.sheet-kob-row div.sheet-strenghtsbox label,
|
|
div.sheet-kob-row div.sheet-flawsbox label {
|
|
height: 100%; }
|
|
div.sheet-kob-row div.sheet-strenghtsbox label.sheet-skilledat,
|
|
div.sheet-kob-row div.sheet-flawsbox label.sheet-skilledat {
|
|
grid-column: 1 / 2; }
|
|
div.sheet-kob-row div.sheet-strenghtsbox label.sheet-skillatcheckbox,
|
|
div.sheet-kob-row div.sheet-flawsbox label.sheet-skillatcheckbox {
|
|
grid-column: 3 / 5; }
|
|
div.sheet-kob-row div.sheet-strenghtsbox input[type='checkbox'],
|
|
div.sheet-kob-row div.sheet-flawsbox input[type='checkbox'] {
|
|
height: 25px;
|
|
width: 25px; }
|
|
div.sheet-kob-row div.sheet-strenghtsbox span,
|
|
div.sheet-kob-row div.sheet-flawsbox span {
|
|
font-weight: bold;
|
|
font-variant: small-caps; }
|
|
div.sheet-kob-row div.sheet-strenghtsbox {
|
|
grid-template-columns: 2em 1fr 2em 1fr; }
|
|
div.sheet-kob-row div.sheet-strenghtsbox h2 {
|
|
grid-column: 1 / 5; }
|
|
div.sheet-kob-row div.sheet-flawsbox {
|
|
grid-template-columns: 2em 1fr 2em 1fr 2em 1fr; }
|
|
div.sheet-kob-row div.sheet-flawsbox h2 {
|
|
grid-column: 1 / 7; }
|
|
div.sheet-kob-row div.sheet-boxnotes {
|
|
grid-column: 1 / 3; }
|
|
|
|
/* ROLL TEMPLATE
|
|
============================= */
|
|
.sheet-rolltemplate-rolls .sheet-template-body {
|
|
border: 1px solid #000;
|
|
text-align: center; }
|
|
|
|
.sheet-rolltemplate-rolls .sheet-template-header {
|
|
background: #210000;
|
|
background: linear-gradient(180deg, #210000 0%, #890b0d 70%, #d5191f 94%);
|
|
border: 1px solid #000;
|
|
border-bottom: 2px solid #000;
|
|
border-top-left-radius: 10px;
|
|
border-top-right-radius: 10px;
|
|
color: white;
|
|
font-size: 20px;
|
|
font-variant: small-caps;
|
|
font-weight: bold;
|
|
letter-spacing: 2px;
|
|
padding: 5px;
|
|
text-align: center;
|
|
text-transform: capitalize; }
|
|
|
|
.sheet-rolltemplate-rolls .sheet-template-row {
|
|
background-color: white;
|
|
padding: 5px; }
|
|
|
|
/* Use this to alternate the background colors for each row */
|
|
.sheet-rolltemplate-rolls .sheet-template-row:nth-child(2n+0) {
|
|
background-color: #1c1c1c; }
|
|
|
|
/* Remove some fo the built in styles around rolls */
|
|
.sheet-rolltemplate-rolls .inlinerollresult,
|
|
.sheet-rolltemplate-rolls .inlinerollresult.importantroll,
|
|
.sheet-rolltemplate-rolls .inlinerollresult.fullfail,
|
|
.sheet-rolltemplate-rolls .inlinerollresult.fullcrit {
|
|
background-color: transparent;
|
|
border: none;
|
|
color: black;
|
|
display: inline-block;
|
|
font-size: 25px;
|
|
padding: 5px; }
|