diff --git a/EtherealWinds-playtest/etherealwinds.css b/EtherealWinds-playtest/etherealwinds.css index f44f8224ef..1e303f42c6 100644 --- a/EtherealWinds-playtest/etherealwinds.css +++ b/EtherealWinds-playtest/etherealwinds.css @@ -1,4 +1,5 @@ -.sheet-wrapper {width:1024px; min-width: 1024px; +/* 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;} @@ -7,7 +8,7 @@ .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; /*background-color: white;*/ padding: 0.3em 0.8em 0.3em 0.7em; border-radius: 1em; border:0.15em solid black; +.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;} @@ -23,7 +24,7 @@ .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.6em; text-decoration: none; color:white;} +.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;} @@ -59,33 +60,33 @@ .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;} -.sheet-block1 {transform:rotateZ(-30deg); margin-left:20%;} -.sheet-block2 {transform:rotateZ(30deg); float:right; margin-right:20%; margin-bottom:4em;} -.sheet-block6 {transform: rotateZ(-90deg); clear: both; margin-left:5%;} -.sheet-block3 {transform:rotateZ(90deg); float:right; margin-right:5%; margin-bottom:4em;} -.sheet-block5 {transform: rotateZ(30deg); clear: both; float:left; margin-left:20%;} -.sheet-block4 {transform: rotateZ(-30deg); float:right; margin-right:20%;} +/* 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");} -.sheet-hex1 {left:43.5%; top:20%;} -.sheet-hex6 {left:28%; top:31%;} -.sheet-hex2 {right:27%; top:31%;} -.sheet-hex5 {left:28%; bottom:31%;} -.sheet-hex3 {right:27%; bottom:31%;} -.sheet-hex4 {left:43.5%; bottom:20%;} +/* 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-effort-track h2 {text-transform: uppercase; letter-spacing: -0.04em; text-decoration: underline;}*/ .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; - /*text-transform: uppercase; text-decoration: underline; letter-spacing: -0.04em;*/ } .sheet-health, .sheet-mana {width:24%; float:left; position: relative; text-align: center; height:auto; box-sizing: border-box;} .sheet-health {margin-left: 16%;} @@ -102,10 +103,11 @@ .sheet-selector select {width:7em;} .sheet-combo {display:block;} -.sheet-wrapper .sheet-hexes input.sheet-switch {position: absolute; top:-12%; left:80%; text-align: center; z-index: 5;} -.sheet-hexes label { font-size: 1.2em; position:absolute; top:-12.5%; left:91%; text-transform: uppercase; font-weight: bold; color:white; +/* 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; - /*text-shadow: 0 0 0.3em #15567F;*/} +} .sheet-orangehex {display: block;} .sheet-bluehex {display: none;} @@ -113,7 +115,6 @@ .sheet-switch:not(:checked) ~ .sheet-bluehex, .sheet-switch:checked ~ .sheet-orangehex { display: none; } .sheet-dietypes div {width:auto; float: left;} -/* .sheet-dietypes div:nth-child(3) {clear: both;}*/ .sheet-wrapper .sheet-dietypes input[type=radio] {width:2em;} .sheet-dietypes label {width:2.2em; display:inline; padding-left:0.2em;} @@ -123,6 +124,64 @@ .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 { diff --git a/EtherealWinds-playtest/etherealwinds.html b/EtherealWinds-playtest/etherealwinds.html index 272baf75a7..1cce7e10d4 100644 --- a/EtherealWinds-playtest/etherealwinds.html +++ b/EtherealWinds-playtest/etherealwinds.html @@ -111,56 +111,70 @@
+ + - - + ◯ + ◯ + +
+ - - + ◯ + ◯ +
+ - - + ◯ + ◯ +
+ +

Effort Remaining

-

– 10

-

– 9

-

– 8

-

– 7

-

– 6

-

– 5

-

– 4

-

– 3

-

– 2

-

– 1

+ +

10

+

9

+

8

+

7

+

6

+

5

+

4

+

3

+

2

+

1

– 0

- +
@@ -229,7 +243,21 @@

Miscellaneous Notes

+ +
+

Custom Rolls

+

Roll penalties and bonuses are applied automatically; RD, DD, and type of die are not.
+You can drop the lowest rolling dice by adding "dl" and the number of dice to remove. Alternately you can add "k" followed by however many dice you want to keep.

+

If rolling multiple types of dice and need to drop some, place them inside curly brackets. Example: {2d6+3d8}k4.

+
+
+ + + +
+
+
 
diff --git a/EtherealWinds-playtest/preview.jpg b/EtherealWinds-playtest/preview.jpg index d7ee261617..913e2e442c 100644 Binary files a/EtherealWinds-playtest/preview.jpg and b/EtherealWinds-playtest/preview.jpg differ