mirror of
https://github.com/Nighthawk42/roll20-character-sheets.git
synced 2026-08-30 19:52:29 +00:00
OoznynKoo
e28295ce97
Small updates to the character sheet HTML and CSS to add a bonus field for rolls, a repeatable section for custom rolls and significant visual improvements. The sheet.json now includes a link to the updated rules document and the new preview image reflects the updated look of the character sheet.
265 lines
15 KiB
CSS
265 lines
15 KiB
CSS
/* character sheet version 1.2 | decreasing width/min-width to 900 px*/
|
|
.sheet-wrapper {width:900px; min-width: 900px;
|
|
background-image: url("https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/EtherealWinds-playtest/bg.jpg");
|
|
background-repeat: no-repeat; background-size: contain; padding: 3em 1.5em 2em 1em; font-size:16px;}
|
|
.sheet-wrapper h2 {text-transform: uppercase; letter-spacing: -0.04em; text-decoration: underline;}
|
|
.sheet-wrapper input, .sheet-wrapper textarea {font-size:16px; background-color: rgba(255,255,255,0.9);}
|
|
.sheet-last {font-size: 1px;}
|
|
.sheet-last:after {content:""; display: table; height: 0; width:100%; clear:both;}
|
|
.sheet-wrapper div {display: block; font-family: sans-serif; font-size:14px;}
|
|
.sheet-wrapper h1 {line-height: 1; margin:0; margin-top:0.1em; letter-spacing: -0.04em;}
|
|
.sheet-wrapper p {margin:0; padding: 0.3em 0.8em 0.3em 0.7em; border-radius: 1em; border:0.15em solid black;
|
|
background-color: #15567F; color:white;
|
|
}
|
|
.sheet-wrapper p.sheet-simple {color:black; border:none; background:none;}
|
|
.sheet-subheading {text-transform: uppercase; font-size: 1.2em; line-height: 1; margin:0;}
|
|
.sheet-top {position: relative;}
|
|
.sheet-top div {box-sizing: border-box; margin:0; padding:0;}
|
|
.sheet-top p {margin:0.6em 0 0.3em 0;}
|
|
.sheet-top label {color:white; font-weight: bold; font-size:1em; text-transform: uppercase; text-shadow: 0 0 0.3em rgba(0,0,0,0.88);}
|
|
.sheet-top label.sheet-bigger {font-size:1.2em;}
|
|
.sheet-top-left { width:28.57%; float:left;}
|
|
.sheet-top-center img {width:90%; height:auto; padding-top: 0; padding-bottom: 2em; margin-left: 5%; }
|
|
.sheet-wound-track {width:20%; float:left; clear: both;text-align: right;}
|
|
.sheet-strain-track {width:100%;}
|
|
.sheet-selector {width:20%; float:left;}
|
|
.sheet-wrapper .sheet-dietypes {position:absolute; width:47%; left:27%; top:56em; border-radius: 2em; padding:1em 0.5em 1em 1em; border:outset 0.2em black; background-color: black;}
|
|
.sheet-dietypes h2 {font-size: 1.4em; text-decoration: none; color:white;}
|
|
.sheet-dietypes h2 label { font-size: 0.6em; color:white;}
|
|
|
|
.sheet-wrapper input[type=checkbox] {width:14%; height:1.6em; margin:0; padding:0; position: relative; top:0.3em;}
|
|
.sheet-wrapper input[type=radio] {width:16%; height: 1.6em; margin:0.2em 0 0.2em 0; padding:0; position: relative;}
|
|
.sheet-derived-stats input { padding:0.2em 0 0 0; width:1.8em !important; text-align: center; font-size: 3.2em; background:none; color:#2AB5B7; border:none; font-weight: bold;}
|
|
.sheet-effort-track input[type=checkbox] {width:16%;}
|
|
.sheet-assets input[type=text] {width:100%;}
|
|
.sheet-numbers input[type=number] { font-size: 3em; padding-left:0.4em; width:1.6em; border:solid black 0.1em; border-radius: 7em;}
|
|
.sheet-numbers input[type=radio] { width:100%; right:0.2em}
|
|
.sheet-exp input {width:3em;}
|
|
.sheet-stat-hex input {background: none; border:none !important; color:white; padding-left:0 !important; margin-left:0.6em; margin-top:0.2em;}
|
|
.sheet-selector input {font-size: 12px;}
|
|
.sheet-selector input.sheet-descriptor {width:12em; margin-top: 0.6em; background-color: rgba(21,86,127,0.16);}
|
|
|
|
.sheet-top-right textarea {width:100%; min-height: 3em; height:auto;}
|
|
.sheet-notes textarea {width:96.4%; min-height:7em; height:auto;}
|
|
.sheet-gear textarea {width: 95%; min-height: 12em; height: auto;}
|
|
.sheet-top-left textarea {width:100%; min-height: 7.2em;}
|
|
.sheet-derived-stats textarea {width:86%; margin-left: 7%; min-height: 8em;}
|
|
.sheet-tints textarea {width:100%; min-height: 12em;}
|
|
|
|
.sheet-wound-track div, .sheet-effort-track div, .sheet-strain-track div {margin-bottom:0.4em;}
|
|
.sheet-effort-track div {width:50%; float:left;}
|
|
.sheet-effort-track div input[type=radio] {width:32%; margin-right:0.3em;}
|
|
.sheet-effort-track div.sheet-single {width:100%;}
|
|
.sheet-effort-track div.sheet-single input[type=radio] {width:16%;}
|
|
.sheet-legend {margin-top: 1.6em; font-size: 0.8em; display: block; width:100%; text-align: left; clear: both;}
|
|
.sheet-top-center {width:42.86%; float:left; text-align: center;}
|
|
.sheet-top-center h1 {text-transform: uppercase; font-size:3em; }
|
|
.sheet-top-right {width:28.57%; float:left;}
|
|
.sheet-top:after {content:""; height:0; display: table; clear: both;}
|
|
.sheet-inline {display: inline-block;}
|
|
.sheet-numbers {width:60%; float: left; position: relative;}
|
|
.sheet-numbers h3 {text-transform: uppercase; letter-spacing: -0.024em; margin:0.2em 0 0.1em 0;}
|
|
.sheet-block {text-align: center; width:16%; float:left; position: relative; z-index: 2;}
|
|
/* version 1.2 alpha | moving things around slightly to fit the decreased width */
|
|
.sheet-block1 {transform:rotateZ(-30deg); margin-left:23%;}
|
|
.sheet-block2 {transform:rotateZ(30deg); float:right; margin-right:23%; margin-bottom:4em;}
|
|
.sheet-block6 {transform: rotateZ(-90deg); clear: both; margin-left:5%; top:-1em;}
|
|
.sheet-block3 {transform:rotateZ(90deg); float:right; margin-right:5%; margin-bottom:4em; top:-1em;}
|
|
.sheet-block5 {transform: rotateZ(30deg); clear: both; float:left; margin-left:23%; top:-2em;}
|
|
.sheet-block4 {transform: rotateZ(-30deg); float:right; margin-right:23%; top:-2em;}
|
|
.sheet-hexes {position: absolute; width:100%; height:100%; z-index: 1;}
|
|
.sheet-stat-hex {position:absolute;
|
|
background-image: url("https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/EtherealWinds-playtest/hex-orange.png"); min-width:82px; min-height:72px; background-repeat: no-repeat; background-size: contain;}
|
|
.sheet-bluehex .sheet-stat-hex {background-image: url("https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/EtherealWinds-playtest/hex-blue.png");}
|
|
/* version 1.2 alpha | moving things around slightly to fit with the decreased width */
|
|
.sheet-hex1 {left:42.5%; top:20%;}
|
|
.sheet-hex6 {left:27%; top:30%;}
|
|
.sheet-hex2 {right:25%; top:30%;}
|
|
.sheet-hex5 {left:27%; bottom:35%;}
|
|
.sheet-hex3 {right:25%; bottom:35%;}
|
|
.sheet-hex4 {left:42.5%; bottom:25%;}
|
|
.sheet-exp {margin-top: 2em; float:left; width:20%;}
|
|
.sheet-exp p {clear: both;}
|
|
.sheet-effort-track {float:left; width:20%; text-align: left;}
|
|
.sheet-strain-track span {color:crimson; text-shadow: 0 0 0.2em black; font-weight: bold;font-size: 1.2em; position: relative; top:0.07em;}
|
|
.sheet-derived-stats {float:left; width:60%; position:relative;}
|
|
.sheet-derived-stats:after {content:""; display: table; height: 0; width:100%; clear:both;}
|
|
.sheet-derived-stats img {width:100%; height:auto;}
|
|
.sheet-derived-stats h2, .sheet-tints h2 {
|
|
clear: both; padding-left: 7%; padding-top: 1.2em;
|
|
}
|
|
.sheet-health, .sheet-mana {width:24%; float:left; position: relative; text-align: center; height:auto; box-sizing: border-box;}
|
|
.sheet-health {margin-left: 16%;}
|
|
.sheet-mana {float:right; margin-right:16%;}
|
|
.sheet-health div, .sheet-mana div {position:absolute; top:12%; left:28%;}
|
|
.sheet-tints {width:20%; float:left;}
|
|
.sheet-gear, .sheet-notes {clear: both; float: left; width:70%;}
|
|
.sheet-gear div {width:30%; float:left;}
|
|
.sheet-gear div:last-child {width:70%;}
|
|
.sheet-gear h3 {margin:0;}
|
|
.sheet-assets {width:30%; float:right;}
|
|
.sheet-assets fieldset {border:none; padding:0;}
|
|
|
|
.sheet-selector select {width:7em;}
|
|
.sheet-combo {display:block;}
|
|
|
|
/* version 1.2 alpha | correcting the position of the hex-switching checkbox and label */
|
|
.sheet-wrapper .sheet-hexes input.sheet-switch {position: absolute; top:-4%; left:80%; text-align: center; z-index: 5;}
|
|
.sheet-hexes label { font-size: 1em; position:absolute; top:-4.5%; left:91%; text-transform: uppercase; font-weight: bold; color:white;
|
|
background-color: #15567F; border-radius: 5em; padding:0.4em 0.8em; width:11em;
|
|
}
|
|
|
|
.sheet-orangehex {display: block;}
|
|
.sheet-bluehex {display: none;}
|
|
.sheet-switch:not(:checked) ~ .sheet-orangehex, .sheet-switch:checked ~ .sheet-bluehex { display: block; }
|
|
.sheet-switch:not(:checked) ~ .sheet-bluehex, .sheet-switch:checked ~ .sheet-orangehex { display: none; }
|
|
|
|
.sheet-dietypes div {width:auto; float: left;}
|
|
.sheet-wrapper .sheet-dietypes input[type=radio] {width:2em;}
|
|
.sheet-dietypes label {width:2.2em; display:inline; padding-left:0.2em;}
|
|
|
|
.sheet-wrapper label {display: inline;}
|
|
.sheet-targetnumber input {width:2.4em; font-size:20px;}
|
|
|
|
.sheet-wrapper .sheet-conditions {position: absolute; bottom:1.6em; right:5.6em; font-size: 64%; border-top: 0.16em solid black;}
|
|
.sheet-wrapper .sheet-conditions label {font-size: 1.8em; position: relative; top: 0.2em;}
|
|
|
|
/* character sheet version 1.2 | styling the new sections: bonus field, custom rolls, dropdown text color changing */
|
|
.sheet-customrolls {width:100%; clear: both;}
|
|
.charsheet .sheet-wrapper .sheet-customrolls p {color:#15567F; background-color: rgba(255,255,255,0); border: solid 0.2em #15567F; border-radius: 0.2em; margin-top:0.65em; margin-bottom: 0.35em;}
|
|
.sheet-bonustoroll input {font-size: 20px;}
|
|
span.sheet-highlighted {
|
|
color:rgba(255,255,255,0.5); font-size: 80px; line-height:0.6em;
|
|
user-select: none;
|
|
display: block;
|
|
position: absolute; font-weight: 100; z-index: 6;
|
|
}
|
|
/* the top selector */
|
|
.sheet-colorswitch1[value="Physical"] ~ .sheet-selectedcolor1 {color: #8F5A3D; border:solid 0.2em #8F5A3D;}
|
|
.sheet-colorswitch1[value="Mental"] ~ .sheet-selectedcolor1 {color: #288f8b; border: solid 0.2em #288f8b;}
|
|
.sheet-colorswitch1[value="Ethereal"] ~ .sheet-selectedcolor1 {color: #662f90; border: solid 0.2em #662f90;}
|
|
.sheet-colorswitch1[value="Physical"] ~ .sheet-descriptor {background-color: rgba(143,90,61,0.8); color:white;}
|
|
.sheet-colorswitch1[value="Mental"] ~ .sheet-descriptor {background-color: rgba(40,143,139,0.8); color:white;}
|
|
.sheet-colorswitch1[value="Ethereal"] ~ .sheet-descriptor {background-color: rgba(102,47,144,0.8); color:white;}
|
|
.sheet-colorswitch1[value="Physical"] ~ span.sheet-highlighted.sheet-hl6 {color: #8F5A3D;}
|
|
.sheet-colorswitch1[value="Physical"] ~ span.sheet-highlighted.sheet-hl1 {color: #8F5A3D;}
|
|
.sheet-colorswitch1[value="Mental"] ~ span.sheet-highlighted.sheet-hl6 {color: #288f8b;}
|
|
.sheet-colorswitch1[value="Mental"] ~ span.sheet-highlighted.sheet-hl1 {color: #288f8b;}
|
|
.sheet-colorswitch1[value="Ethereal"] ~ span.sheet-highlighted.sheet-hl6 {color: #662f90;}
|
|
.sheet-colorswitch1[value="Ethereal"] ~ span.sheet-highlighted.sheet-hl1 {color: #662f90;}
|
|
|
|
/* the middle selector */
|
|
.sheet-colorswitch2[value="Physical"] ~ .sheet-selectedcolor2 {color: #8F5A3D; border: solid 0.2em #8F5A3D;}
|
|
.sheet-colorswitch2[value="Mental"] ~ .sheet-selectedcolor2 {color: #288f8b; border: solid 0.2em #288f8b;}
|
|
.sheet-colorswitch2[value="Ethereal"] ~ .sheet-selectedcolor2 {color: #662f90; border: solid 0.2em ;}
|
|
.sheet-colorswitch2[value="Physical"] ~ .sheet-descriptor {background-color: rgba(143,90,61,0.8); color:white;}
|
|
.sheet-colorswitch2[value="Mental"] ~ .sheet-descriptor {background-color: rgba(40,143,139,0.8); color:white;}
|
|
.sheet-colorswitch2[value="Ethereal"] ~ .sheet-descriptor {background-color: rgba(102,47,144,0.8); color:white;}
|
|
.sheet-colorswitch2[value="Physical"] ~ span.sheet-highlighted.sheet-hl2 {color: #8F5A3D;}
|
|
.sheet-colorswitch2[value="Physical"] ~ span.sheet-highlighted.sheet-hl3 {color: #8F5A3D;}
|
|
.sheet-colorswitch2[value="Mental"] ~ span.sheet-highlighted.sheet-hl2 {color: #288f8b;}
|
|
.sheet-colorswitch2[value="Mental"] ~ span.sheet-highlighted.sheet-hl3 {color: #288f8b;}
|
|
.sheet-colorswitch2[value="Ethereal"] ~ span.sheet-highlighted.sheet-hl2 {color: #662f90;}
|
|
.sheet-colorswitch2[value="Ethereal"] ~ span.sheet-highlighted.sheet-hl3 {color: #662f90;}
|
|
|
|
/* the bottom selector */
|
|
.sheet-colorswitch3[value="Physical"] ~ .sheet-selectedcolor3 {color: #8F5A3D; border: solid 0.2em #8F5A3D;}
|
|
.sheet-colorswitch3[value="Mental"] ~ .sheet-selectedcolor3 {color: #288f8b; border: solid 0.2em #288f8b;}
|
|
.sheet-colorswitch3[value="Ethereal"] ~ .sheet-selectedcolor3 {color: #662f90; border: solid 0.2em #662f90;}
|
|
.sheet-colorswitch3[value="Physical"] ~ .sheet-descriptor {background-color: rgba(143,90,61,0.8); color:white;}
|
|
.sheet-colorswitch3[value="Mental"] ~ .sheet-descriptor {background-color: rgba(40,143,139,0.8); color:white;}
|
|
.sheet-colorswitch3[value="Ethereal"] ~ .sheet-descriptor {background-color: rgba(102,47,144,0.8); color:white;}
|
|
.sheet-colorswitch3[value="Physical"] ~ span.sheet-highlighted.sheet-hl4 {color: #8F5A3D;}
|
|
.sheet-colorswitch3[value="Physical"] ~ span.sheet-highlighted.sheet-hl5 {color: #8F5A3D;}
|
|
.sheet-colorswitch3[value="Mental"] ~ span.sheet-highlighted.sheet-hl4 {color: #288f8b;}
|
|
.sheet-colorswitch3[value="Mental"] ~ span.sheet-highlighted.sheet-hl5 {color: #288f8b;}
|
|
.sheet-colorswitch3[value="Ethereal"] ~ span.sheet-highlighted.sheet-hl4 {color: #662f90;}
|
|
.sheet-colorswitch3[value="Ethereal"] ~ span.sheet-highlighted.sheet-hl5 {color: #662f90;}
|
|
.sheet-hl1 {top:477px; left:453px;}
|
|
.sheet-hl2 {top:528px; left:537px;}
|
|
.sheet-hl3 {top:629px; left:537px;}
|
|
.sheet-hl4 {top:680px; left:453px;}
|
|
.sheet-hl5 {top:630px; left:370px;}
|
|
.sheet-hl6 {top:528px; left:369px;}
|
|
|
|
/* Custom Template from Jakob */
|
|
/* Smaller margins - remove these if you want the huge default left margin */
|
|
.sheet-rolltemplate-custom {
|
|
margin-left: -37px;
|
|
}
|
|
.withoutavatars .sheet-rolltemplate-custom {
|
|
margin-left: -7px;
|
|
}
|
|
|
|
.sheet-rolltemplate-custom .sheet-container {
|
|
border: 1px solid;
|
|
/* by default, the border is the same color as the header. You can change this here, e.g. to black */
|
|
border-color: var(--header-bg-color);
|
|
}
|
|
|
|
/* Header formatting - title and subtitle */
|
|
.sheet-rolltemplate-custom .sheet-header {
|
|
background-color: var(--header-bg-color);
|
|
/* change text-align to center to center the header text */
|
|
text-align: left;
|
|
color: var(--header-text-color);
|
|
padding: 5px;
|
|
}
|
|
.sheet-rolltemplate-custom .sheet-title {
|
|
font-size:1.1em;
|
|
}
|
|
.sheet-rolltemplate-custom .sheet-subtitle {
|
|
font-size:.9em;
|
|
}
|
|
|
|
/* example colors */
|
|
.sheet-rolltemplate-custom .sheet-container {
|
|
/* this is the default color */
|
|
--header-bg-color: rgba(112,32,130,1);
|
|
--header-text-color: #FFF;
|
|
}
|
|
.sheet-rolltemplate-custom .sheet-container.sheet-color-red {
|
|
--header-bg-color: #F00;
|
|
}
|
|
.sheet-rolltemplate-custom .sheet-container.sheet-color-green {
|
|
--header-bg-color: #15567F; /*color changed by OoznynKoo*/
|
|
--header-text-color: #FFF; /*color changed by OoznynKoo*/
|
|
}
|
|
|
|
/* Allprops part */
|
|
.sheet-rolltemplate-custom .sheet-content {
|
|
display: grid;
|
|
background: #FFF;
|
|
/* Header formatting - modify the column layout below */
|
|
grid-template-columns: auto auto;
|
|
/* Line height to match default roll template */
|
|
line-height:1.4em;
|
|
}
|
|
.sheet-rolltemplate-custom .sheet-content > div {
|
|
padding: 5px;
|
|
}
|
|
|
|
/* Left column */
|
|
.sheet-rolltemplate-custom .sheet-content .sheet-key {
|
|
font-weight: bold;
|
|
padding-right: 10px;
|
|
text-align: right;
|
|
}
|
|
|
|
/* Empty rule, use this if you want to change the right column
|
|
.sheet-rolltemplate-custom .sheet-value {
|
|
}
|
|
*/
|
|
|
|
/* Make even-numbered rows grey */
|
|
.sheet-rolltemplate-custom .sheet-content :nth-child(4n+3),
|
|
.sheet-rolltemplate-custom .sheet-content :nth-child(4n) {
|
|
background:#EEE;
|
|
}
|
|
|
|
/* Description field */
|
|
.sheet-rolltemplate-custom .sheet-desc {
|
|
grid-column: span 2;
|
|
padding: 5px;
|
|
text-align: center;
|
|
} |