diff --git a/stickstation13/images/stickstation13-background.png b/stickstation13/images/stickstation13-background.png new file mode 100644 index 0000000000..a4fd3f2517 Binary files /dev/null and b/stickstation13/images/stickstation13-background.png differ diff --git a/stickstation13/stickstation13.css b/stickstation13/stickstation13.css new file mode 100644 index 0000000000..0f57bafc82 --- /dev/null +++ b/stickstation13/stickstation13.css @@ -0,0 +1,206 @@ +@import url('https://fonts.googleapis.com/css2?family=PT+Sans&display=swap'); +@import url('https://fonts.googleapis.com/css2?family=Comic+Neue:wght@300&display=swap'); +.sheet-main-container { + width: 712px; + height: 500px; + display: flex; + position: relative; + background-image: url("https://user-images.githubusercontent.com/5252033/105555152-37b7dd80-5d22-11eb-9c71-862ed52aefb8.png"); + background-size: 712px 1010px; +} + +.sheet-main-container>img { + position: absolute; + bottom: 75px; + right: 0; + z-index: -1; +} + +.sheet-grid-container { + margin: 10px 30px 40px 10px; + display: grid; + grid-template-columns: repeat(2, minmax(0, 1fr)); + grid-template-rows: repeat(12, max-content); + gap: 0px 0px; + grid-template-areas: "portrait-header positive-header" "portrait positive-feature" "portrait negative-header" "portrait nefative-feature" "portrait bonus-header" "portrait bonus" "portrait gear-header" "portrait gear1" "profession-name gear2" "power gear3" "karma gear4"; + column-gap: 1em; +} + +.sheet-portrait-header { + grid-area: portrait-header; +} + +.sheet-positive-header { + grid-area: positive-header; +} + +.sheet-positive-feature { + grid-area: positive-feature; +} + +.sheet-negative-header { + grid-area: negative-header; +} + +.sheet-negative-feature { + grid-area: nefative-feature; +} + +.sheet-portrait { + display: inline-grid; + grid-template-columns: repeat(6, 1fr); + grid-template-rows: repeat(3, 1fr); + grid-template-areas: "head head head head head head" "right-hand right-hand torso torso left-hand left-hand" "right-leg right-leg right-leg left-leg left-leg left-leg"; + grid-area: portrait; +} + +.sheet-portrait-container { + display: flex; + width: 100%; + height: 100%; + align-items: center; + justify-content: center; + position: relative; + font-family: 'PT Sans', sans-serif; +} + +.sheet-head { + grid-area: head; +} + +.sheet-right-hand { + grid-area: right-hand; +} + +.sheet-torso { + grid-area: torso; +} + +.sheet-left-hand { + grid-area: left-hand; +} + +.sheet-right-leg { + grid-area: right-leg; +} + +.sheet-left-leg { + grid-area: left-leg; +} + +.sheet-profession-name { + grid-area: profession-name; + display: flex; +} + +.sheet-power { + grid-area: power; + display: grid; + grid-template-columns: 70px max-content max-content max-content; + align-items: center; +} + +.sheet-karma { + grid-area: karma; + display: grid; + grid-template-columns: 70px max-content; + align-items: center; +} + +.sheet-bonus { + grid-area: bonus; +} + +.sheet-gear-header { + grid-area: gear-header; +} + +.sheet-gear1 { + grid-area: gear1; +} + +.sheet-gear2 { + grid-area: gear2; +} + +.sheet-gear3 { + grid-area: gear3; +} + +.sheet-gear4 { + grid-area: gear4; +} + +.sheet-header { + font-family: 'Comic Neue', sans-serif; + margin: 5px 0px; +} + +.sheet-row-input { + font-family: 'PT Sans', sans-serif; + margin: 5px 0px; + width: 100%; +} + +.sheet-labeled-row { + display: grid; + grid-template-columns: max-content 1fr; + align-items: center; +} + +input { + margin: 0px 5px; +} + +button { + margin: 5px 0px; +} + +.sheet-head-zone-enabled, +.sheet-torso-zone-enabled, +.sheet-rhand-zone-enabled, +.sheet-lhand-zone-enabled, +.sheet-rleg-zone-enabled, +.sheet-lleg-zone-enabled { + width: 105px; + height: 65px; + position: absolute; + z-index: -1; +} + +.sheet-head-zone-disabled, +.sheet-torso-zone-disabled, +.sheet-rhand-zone-disabled, +.sheet-lhand-zone-disabled, +.sheet-rleg-zone-disabled, +.sheet-lleg-zone-disabled { + width: 105px; + height: 65px; + position: absolute; + z-index: -2; +} + +.sheet-head-harm:not(:checked)~.sheet-head-zone-enabled, +.sheet-torso-harm:not(:checked)~.sheet-torso-zone-enabled, +.sheet-rhand-harm:not(:checked)~.sheet-rhand-zone-enabled, +.sheet-lhand-harm:not(:checked)~.sheet-lhand-zone-enabled, +.sheet-rleg-harm:not(:checked)~.sheet-rleg-zone-enabled, +.sheet-lleg-harm:not(:checked)~.sheet-lleg-zone-enabled { + display: none; +} + +.sheet-rolltemplate-strengthcheck { + background-image: url(https://user-images.githubusercontent.com/5252033/105555152-37b7dd80-5d22-11eb-9c71-862ed52aefb8.png); + background-size: 285px 404px; + text-align: center; +} + +.sheet-rolltemplate-strengthcheck .inlinerollresult { + background-color: transparent; + border: none; + color: black; +} + +.sheet-rolltemplate-strengthcheck .sheet-upper-case-name { + text-transform: uppercase; +} \ No newline at end of file diff --git a/stickstation13/stickstation13.html b/stickstation13/stickstation13.html index 938625991a..4f8b856d87 100644 --- a/stickstation13/stickstation13.html +++ b/stickstation13/stickstation13.html @@ -1,235 +1,86 @@ - -
-
-
-
- голова -
+ + Stickstation 13 by EX NIHILUM.INFO +

+
+
+
+
+
+ голова + + +
+
+ прав. рука + + +
+
+ торс + + +
+
+ лев. рука + + +
+
+ прав. нога + + +
+
+ лев.нога + + +
-
- правая рука -
+
-
- торс -
+
+ +
-
- левая рука -
-
-
- правая нога -
-
-
- левая нога -
+
+
+
+
+
+
+
+
+
+
+
+
-
-
-
- - -
-
-
-
-
-
-
-
-
-
-
-
-
+
+ + +
{{profession}} {{name}} {{action}} СИЛУ!!!
+
{{result}}
+ \ No newline at end of file