diff --git a/Shadow of the Demon Lord/README.md b/Shadow of the Demon Lord/README.md index f93dd34dc3..5358f86a82 100644 --- a/Shadow of the Demon Lord/README.md +++ b/Shadow of the Demon Lord/README.md @@ -14,7 +14,9 @@ This sheet uses a preprocessor for its CSS called SASS. When editing, make sure * Rollable Spells * All Conditions +* All Talents/Professions/Paths in dropdown form * Settings page (adjust background, layout etc.) * Responsive Sheet for mobile play * Roll Template * Utilize new Character Sheet Worker Scripts +** Add Madness, Injured conditions diff --git a/Shadow of the Demon Lord/shadow-of-the-demon-lord.html b/Shadow of the Demon Lord/shadow-of-the-demon-lord.html new file mode 100644 index 0000000000..b852f9a9cb --- /dev/null +++ b/Shadow of the Demon Lord/shadow-of-the-demon-lord.html @@ -0,0 +1,248 @@ +
+ Main Page + Magic + +
+ +
+
+ + + + + + +
+
+
+ + + + + + + + + + + + + + +
+ +
+
+ + +
+
+
+
+ + +
+ +
+ + + + + + + + + +
+
+ + + + + + + + + +
+ +
+ + + + + + + +
+ +
+ + + + + + + +
+ +
+ + + + + + + + + + + +
+ +
+ + + + + + + + +
+
+ + +
+ +
+
+
+ + + +
+ + + + + + + + + + + + +
+ +
+
+
+ +
+ +
+
+
+ +
+ + + + + + + + + + + + + + + + + +
+
+
+ + +
+
+ + + + + + + \ No newline at end of file diff --git a/Shadow of the Demon Lord/style.css b/Shadow of the Demon Lord/style.css index 572084caff..516bc9507c 100644 --- a/Shadow of the Demon Lord/style.css +++ b/Shadow of the Demon Lord/style.css @@ -1,54 +1,54 @@ -/* line 11, style.scss */ -.charsheet .sheet-hidden { - display: none; +/* line 9, style.scss */ +.charsheet { + font-family: 'Roboto', Helvetica, sans-serif; } /* line 16, style.scss */ -.charsheet .sheet-maindiv { +.charsheet div div.sheet-pane { + display: none; +} +/* line 20, style.scss */ +.charsheet input.sheet-tab, +.charsheet input.sheet-tab + span { + margin: 0 15px 15px 0; + display: inline-block; + vertical-align: middle; +} +/* line 27, style.scss */ +.charsheet input.sheet-tab1:checked ~ .sheet-pane.sheet-maindiv, +.charsheet input.sheet-tab2:checked ~ .sheet-pane.sheet-maindiv2 { + display: block; +} +/* line 33, style.scss */ +.charsheet .sheet-pane { margin-left: -24px; margin-right: -24px; margin-top: -10px; -} -/* line 23, style.scss */ -.charsheet fieldset { - border: none; - padding: 0; -} -/* line 28, style.scss */ -.charsheet .sheet-maindiv { - font-family: 'Roboto', Helvetica, sans-serif; - /* background-image: url(http://mamascience.com/images/Sheet-FINAL-BW.png); */ - background: url("http://s2.postimg.org/lbrbb7yqh/sheet_final.png") no-repeat center center transparent; - background-size: cover; height: 1139px; width: 880px; } -/* line 37, style.scss */ -.charsheet .sheet-maindiv label { +/* line 44, style.scss */ +.charsheet .sheet-pane label { display: block; float: none; width: 100%; margin-bottom: 5px; } -/* line 44, style.scss */ -.charsheet .sheet-maindiv input, -.charsheet .sheet-maindiv textarea { +/* line 51, style.scss */ +.charsheet .sheet-pane input, +.charsheet .sheet-pane textarea { background: rgba(242, 242, 242, 0.5); border: none; padding: 10px; width: 100%; + border-radius: 3px; } -/* line 51, style.scss */ -.charsheet .sheet-maindiv input[type="number"], -.charsheet .sheet-maindiv textarea[type="number"] { - padding: 10px 1px 10px 13px; -} -/* line 56, style.scss */ -.charsheet .sheet-maindiv textarea { +/* line 61, style.scss */ +.charsheet .sheet-pane textarea { box-sizing: border-box; width: 100%; } -/* line 61, style.scss */ -.charsheet .sheet-maindiv input.sheet-encircled { +/* line 66, style.scss */ +.charsheet .sheet-pane input.sheet-encircled { position: absolute; background: none; font-size: 1.5em; @@ -61,115 +61,149 @@ border-color: #ff0031; font-family: 'Metal Mania', Helvetica, sans-serif; } -/* line 76, style.scss */ -.charsheet .sheet-maindiv input.sheet-encircled.sheet-lg { +/* line 80, style.scss */ +.charsheet .sheet-pane input.sheet-encircled[type="number"] { + padding: 10px 1px 10px 15px; +} +/* line 84, style.scss */ +.charsheet .sheet-pane input.sheet-encircled.sheet-lg { border-radius: 35px; height: 67px; width: 67px; } -/* line 81, style.scss */ -.charsheet .sheet-maindiv input.sheet-encircled.sheet-lg + input + button[type="roll"] { +/* line 89, style.scss */ +.charsheet .sheet-pane input.sheet-encircled.sheet-lg + input + button[type="roll"] { position: absolute; border-radius: 20px; height: 39px; width: 39px; } -/* line 90, style.scss */ -.charsheet .sheet-maindiv input.sheet-encircled.sheet-sm + input + button[type="roll"] { +/* line 98, style.scss */ +.charsheet .sheet-pane input.sheet-encircled.sheet-sm + input + button[type="roll"] { position: absolute; border-radius: 15px; height: 29px; width: 29px; } -/* line 98, style.scss */ -.charsheet .sheet-maindiv input.sheet-encircled:focus { +/* line 106, style.scss */ +.charsheet .sheet-pane input.sheet-encircled:focus { border-width: 2px; background: rgba(255, 255, 255, 0.4); box-shadow: inset 0px 0px 2px black; } -/* line 105, style.scss */ -.charsheet .sheet-maindiv .sheet-row-1 { - height: 275px; - position: relative; +/* line 113, style.scss */ +.charsheet .sheet-pane input.sheet-mod { + background: rgba(255, 255, 255, 0.4); + font-size: 1.25em; + text-align: center; + padding: 3px; + width: 25px; + border-radius: 10px; + position: absolute; + /* turn off number arrows/spinners */ } -/* line 109, style.scss */ -.charsheet .sheet-maindiv .sheet-row-1 .sheet-ancestry-select { - width: 50%; +/* line 123, style.scss */ +.charsheet .sheet-pane input.sheet-mod::-webkit-inner-spin-button, .charsheet .sheet-pane input.sheet-mod::-webkit-outer-spin-button { + -webkit-appearance: none; + margin: 0; } -/* line 115, style.scss */ -.charsheet .sheet-maindiv .sheet-row-1 .sheet-col:nth-child(1) textarea { - height: 174px; -} -/* line 121, style.scss */ -.charsheet .sheet-maindiv .sheet-row-1 .sheet-col:nth-child(2) input { - height: 40px; - margin-bottom: 4px; -} -/* line 128, style.scss */ -.charsheet .sheet-maindiv .sheet-row-1 .sheet-col:nth-child(3) textarea { - height: 227px; -} -/* line 133, style.scss */ -.charsheet .sheet-maindiv .sheet-row-1 .sheet-col .sheet-box { - position: relative; +/* line 130, style.scss */ +.charsheet .sheet-pane fieldset { + border: none; + padding: 0; } /* line 136, style.scss */ -.charsheet .sheet-maindiv .sheet-row-1 .sheet-col .sheet-box label.sheet-lvl { - display: none; +.charsheet .sheet-maindiv { + background: url("http://s20.postimg.org/bozp7kxel/sheet_final.jpg") no-repeat center center transparent; + background-size: cover; + /* 1st Row */ + /* 2nd Row */ + /* 3rd Row */ } -/* line 142, style.scss */ -.charsheet .sheet-maindiv .sheet-row-1 .sheet-col .sheet-box input { - box-sizing: border-box; - width: 100%; -} -/* line 146, style.scss */ -.charsheet .sheet-maindiv .sheet-row-1 .sheet-col .sheet-box input[name="attr_ancestry"] { - width: 75%; -} -/* line 150, style.scss */ -.charsheet .sheet-maindiv .sheet-row-1 .sheet-col .sheet-box input[name="attr_lvl"] { - left: 186px; - top: -5px; - width: 50px; - height: 50px; -} -/* line 163, style.scss */ +/* line 139, style.scss */ .charsheet .sheet-maindiv .sheet-3colrow { padding-top: 15px; } -/* line 166, style.scss */ +/* line 142, style.scss */ .charsheet .sheet-maindiv .sheet-3colrow .sheet-col { box-sizing: border-box; margin: 0; padding: 15px 30px 0 30px; width: 33%; } -/* line 174, style.scss */ +/* line 149, style.scss */ .charsheet .sheet-maindiv .sheet-3colrow .sheet-col:nth-child(1) { padding-right: 0px; } -/* line 177, style.scss */ +/* line 152, style.scss */ .charsheet .sheet-maindiv .sheet-3colrow .sheet-col:nth-child(1) label { text-align: left; } -/* line 182, style.scss */ +/* line 157, style.scss */ .charsheet .sheet-maindiv .sheet-3colrow .sheet-col:nth-child(2) label { text-align: center; } -/* line 186, style.scss */ +/* line 161, style.scss */ .charsheet .sheet-maindiv .sheet-3colrow .sheet-col:nth-child(3) { padding-left: 0px; + width: 32%; } -/* line 189, style.scss */ +/* line 165, style.scss */ .charsheet .sheet-maindiv .sheet-3colrow .sheet-col:nth-child(3) label { text-align: right; } -/* line 195, style.scss */ +/* line 173, style.scss */ +.charsheet .sheet-maindiv .sheet-row-1 { + height: 275px; + position: relative; +} +/* line 177, style.scss */ +.charsheet .sheet-maindiv .sheet-row-1 .sheet-ancestry-select { + width: 50%; +} +/* line 183, style.scss */ +.charsheet .sheet-maindiv .sheet-row-1 .sheet-col:nth-child(1) textarea { + height: 174px; +} +/* line 189, style.scss */ +.charsheet .sheet-maindiv .sheet-row-1 .sheet-col:nth-child(2) input { + height: 40px; + margin-bottom: 4px; +} +/* line 196, style.scss */ +.charsheet .sheet-maindiv .sheet-row-1 .sheet-col:nth-child(3) textarea { + height: 227px; +} +/* line 201, style.scss */ +.charsheet .sheet-maindiv .sheet-row-1 .sheet-col .sheet-box { + position: relative; +} +/* line 204, style.scss */ +.charsheet .sheet-maindiv .sheet-row-1 .sheet-col .sheet-box label.sheet-lvl { + display: none; +} +/* line 209, style.scss */ +.charsheet .sheet-maindiv .sheet-row-1 .sheet-col .sheet-box input { + box-sizing: border-box; + width: 100%; +} +/* line 213, style.scss */ +.charsheet .sheet-maindiv .sheet-row-1 .sheet-col .sheet-box input[name="attr_ancestry"] { + width: 75%; +} +/* line 217, style.scss */ +.charsheet .sheet-maindiv .sheet-row-1 .sheet-col .sheet-box input[name="attr_lvl"] { + left: 186px; + top: -5px; + width: 50px; + height: 50px; +} +/* line 231, style.scss */ .charsheet .sheet-maindiv .sheet-row-2 { height: 620px; position: relative; } -/* line 199, style.scss */ +/* line 235, style.scss */ .charsheet .sheet-maindiv .sheet-row-2 .sheet-left-col, .charsheet .sheet-maindiv .sheet-row-2 .sheet-right-col { width: 175px; @@ -179,197 +213,271 @@ top: 0; left: 0; } -/* line 208, style.scss */ +/* line 244, style.scss */ .charsheet .sheet-maindiv .sheet-row-2 .sheet-left-col label, .charsheet .sheet-maindiv .sheet-row-2 .sheet-right-col label { text-align: left; } -/* line 212, style.scss */ +/* line 248, style.scss */ .charsheet .sheet-maindiv .sheet-row-2 .sheet-left-col textarea, .charsheet .sheet-maindiv .sheet-row-2 .sheet-right-col textarea { width: 100%; height: 95%; } -/* line 218, style.scss */ +/* line 254, style.scss */ .charsheet .sheet-maindiv .sheet-row-2 .sheet-right-col { padding: 15px 25px 15px 0; right: 0; left: auto; } -/* line 223, style.scss */ +/* line 259, style.scss */ .charsheet .sheet-maindiv .sheet-row-2 .sheet-right-col label { text-align: right; } -/* line 230, style.scss */ +/* line 266, style.scss */ .charsheet .sheet-maindiv .sheet-row-2 .sheet-attr-box label { display: none; } -/* line 235, style.scss */ -.charsheet .sheet-maindiv .sheet-row-2 .sheet-attr-box input.lg { +/* line 270, style.scss */ +.charsheet .sheet-maindiv .sheet-row-2 .sheet-attr-box label.sheet-damage-max { + display: inline-block; + position: absolute; + bottom: 300px; + right: 430px; + font-weight: normal; + margin: 0; + font-size: 1em; + width: auto; +} +/* line 281, style.scss */ +.charsheet .sheet-maindiv .sheet-row-2 .sheet-attr-box input { + /* Begin positioning attributes */ +} +/* line 285, style.scss */ +.charsheet .sheet-maindiv .sheet-row-2 .sheet-attr-box input.sheet-lg:not([name="attr_damage"]) { font-size: 2em; } -/* line 239, style.scss */ +/* line 288, style.scss */ +.charsheet .sheet-maindiv .sheet-row-2 .sheet-attr-box input.sheet-lg:not([name="attr_health"]) { + padding-bottom: 18px; +} +/* line 294, style.scss */ .charsheet .sheet-maindiv .sheet-row-2 .sheet-attr-box input[name="attr_strength"] { left: 297px; top: 100px; } -/* line 243, style.scss */ +/* line 298, style.scss */ .charsheet .sheet-maindiv .sheet-row-2 .sheet-attr-box input[name="attr_strength"] + input + button[type="roll"] { left: 341px; top: 156px; } -/* line 249, style.scss */ +/* line 303, style.scss */ +.charsheet .sheet-maindiv .sheet-row-2 .sheet-attr-box input[name="attr_strength"] + .sheet-mod { + left: 317px; + top: 142px; +} +/* line 311, style.scss */ .charsheet .sheet-maindiv .sheet-row-2 .sheet-attr-box input[name="attr_size"] { left: 235px; top: 152px; } -/* line 254, style.scss */ +/* line 316, style.scss */ .charsheet .sheet-maindiv .sheet-row-2 .sheet-attr-box input[name="attr_intellect"] { right: 303px; top: 100px; } -/* line 258, style.scss */ +/* line 320, style.scss */ .charsheet .sheet-maindiv .sheet-row-2 .sheet-attr-box input[name="attr_intellect"] + input + button[type="roll"] { right: 351px; top: 152px; } -/* line 263, style.scss */ +/* line 324, style.scss */ +.charsheet .sheet-maindiv .sheet-row-2 .sheet-attr-box input[name="attr_intellect"] + .sheet-mod { + right: 323px; + top: 143px; +} +/* line 330, style.scss */ .charsheet .sheet-maindiv .sheet-row-2 .sheet-attr-box input[name="attr_perception"] { right: 245px; top: 93px; + padding-bottom: 20px; } -/* line 267, style.scss */ +/* line 335, style.scss */ .charsheet .sheet-maindiv .sheet-row-2 .sheet-attr-box input[name="attr_perception"] + input + button[type="roll"] { right: 270px; top: 136px; } -/* line 273, style.scss */ +/* line 339, style.scss */ +.charsheet .sheet-maindiv .sheet-row-2 .sheet-attr-box input[name="attr_perception"] + .sheet-mod { + right: 259px; + top: 122px; + font-size: 1em; + line-height: 1em; + padding: 2px 0; + width: 20px; +} +/* line 349, style.scss */ .charsheet .sheet-maindiv .sheet-row-2 .sheet-attr-box input[name="attr_agility"] { left: 221px; top: 280px; } -/* line 277, style.scss */ +/* line 353, style.scss */ .charsheet .sheet-maindiv .sheet-row-2 .sheet-attr-box input[name="attr_agility"] + input + button[type="roll"] { left: 285px; top: 286px; } -/* line 282, style.scss */ +/* line 357, style.scss */ +.charsheet .sheet-maindiv .sheet-row-2 .sheet-attr-box input[name="attr_agility"] + .sheet-mod { + left: 240px; + top: 322px; +} +/* line 362, style.scss */ .charsheet .sheet-maindiv .sheet-row-2 .sheet-attr-box input[name="attr_speed"] { left: 198px; top: 200px; } -/* line 287, style.scss */ +/* line 367, style.scss */ .charsheet .sheet-maindiv .sheet-row-2 .sheet-attr-box input[name="attr_will"] { right: 227px; top: 280px; } -/* line 291, style.scss */ +/* line 371, style.scss */ .charsheet .sheet-maindiv .sheet-row-2 .sheet-attr-box input[name="attr_will"] + input + button[type="roll"] { right: 290px; top: 285px; } -/* line 296, style.scss */ +/* line 375, style.scss */ +.charsheet .sheet-maindiv .sheet-row-2 .sheet-attr-box input[name="attr_will"] + .sheet-mod { + right: 248px; + top: 321px; +} +/* line 380, style.scss */ .charsheet .sheet-maindiv .sheet-row-2 .sheet-attr-box input[name="attr_insanity"] { right: 241px; top: 218px; } -/* line 302, style.scss */ +/* line 386, style.scss */ .charsheet .sheet-maindiv .sheet-row-2 .sheet-attr-box input[name="attr_health"] { bottom: 118px; left: 405px; } -/* line 306, style.scss */ +/* line 390, style.scss */ .charsheet .sheet-maindiv .sheet-row-2 .sheet-attr-box input[name="attr_healing"] { left: 416px; bottom: 196px; height: 42px; width: 42px; } -/* line 313, style.scss */ +/* line 397, style.scss */ .charsheet .sheet-maindiv .sheet-row-2 .sheet-attr-box input[name="attr_defense"] { bottom: 155px; left: 265px; } -/* line 317, style.scss */ +/* line 401, style.scss */ .charsheet .sheet-maindiv .sheet-row-2 .sheet-attr-box input[name="attr_corruption"] { bottom: 155px; right: 271px; } -/* line 322, style.scss */ +/* line 406, style.scss */ .charsheet .sheet-maindiv .sheet-row-2 .sheet-attr-box input[name="attr_power"] { right: 246px; top: 7px; } -/* line 326, style.scss */ +/* line 410, style.scss */ .charsheet .sheet-maindiv .sheet-row-2 .sheet-attr-box input[name="attr_damage"] { bottom: 288px; right: 377px; width: 139px; height: 139px; - line-height: 139px; + padding-bottom: 15px; + padding-left: 16px; border-radius: 70px; font-size: 3em; color: #ff0031; text-shadow: 1px 1px 1px #000; } -/* line 347, style.scss */ +/* line 428, style.scss */ +.charsheet .sheet-maindiv .sheet-row-2 .sheet-attr-box input[name="attr_damage_max"] { + bottom: 300px; + right: 416px; + background: none; + box-shadow: none; + padding: 0; + margin-bottom: 0; + font-size: 1em; +} +/* line 442, style.scss */ .charsheet .sheet-maindiv .sheet-2colrow .sheet-col { box-sizing: border-box; padding: 0 15px 0 30px; width: 56.5%; margin-right: 0; } -/* line 353, style.scss */ +/* line 448, style.scss */ .charsheet .sheet-maindiv .sheet-2colrow .sheet-col.sheet-even { width: 41.5%; + padding-left: 0; } -/* line 357, style.scss */ +/* line 453, style.scss */ .charsheet .sheet-maindiv .sheet-2colrow .sheet-col label { text-align: left; } -/* line 361, style.scss */ +/* line 457, style.scss */ .charsheet .sheet-maindiv .sheet-2colrow .sheet-col textarea { height: 180px; } -/* line 368, style.scss */ +/* line 465, style.scss */ .charsheet .sheet-maindiv .sheet-row-3 label { display: inline-block; } -/* line 370, style.scss */ +/* line 467, style.scss */ .charsheet .sheet-maindiv .sheet-row-3 label:nth-child(1) { width: 38%; } -/* line 373, style.scss */ +/* line 470, style.scss */ .charsheet .sheet-maindiv .sheet-row-3 label:nth-child(2) { width: 10%; } -/* line 376, style.scss */ +/* line 473, style.scss */ .charsheet .sheet-maindiv .sheet-row-3 label:nth-child(3) { width: auto; } -/* line 381, style.scss */ +/* line 478, style.scss */ .charsheet .sheet-maindiv .sheet-row-3 .repeating_weapons + .repcontainer { max-height: 185px; overflow: scroll; } -/* line 386, style.scss */ +/* line 483, style.scss */ .charsheet .sheet-maindiv .sheet-row-3 .attr_weapon_name { display: inline-block; width: 33%; } -/* line 391, style.scss */ +/* line 488, style.scss */ .charsheet .sheet-maindiv .sheet-row-3 select { margin-bottom: 0; } -/* line 394, style.scss */ +/* line 491, style.scss */ .charsheet .sheet-maindiv .sheet-row-3 select.sheet-dtype { width: 55px; } -/* line 398, style.scss */ +/* line 495, style.scss */ .charsheet .sheet-maindiv .sheet-row-3 select.sheet-dnumber { width: 55px; } -/* line 403, style.scss */ +/* line 500, style.scss */ .charsheet .sheet-maindiv .sheet-row-3 .attr_weapon_desc { display: inline-block; } +/* line 507, style.scss */ +.charsheet .sheet-maindiv2 { + background: url("http://s20.postimg.org/p61pnke1p/sheet_final_bkg.jpg") no-repeat center center transparent; + background-size: cover; +} +/* line 511, style.scss */ +.charsheet .sheet-maindiv2 .sheet-row-1 { + padding: 15px 30px 0 30px; +} +/* line 514, style.scss */ +.charsheet .sheet-maindiv2 .sheet-row-1 label { + text-align: left; +} diff --git a/Shadow of the Demon Lord/style.scss b/Shadow of the Demon Lord/style.scss index b0edc7981d..be96283de1 100644 --- a/Shadow of the Demon Lord/style.scss +++ b/Shadow of the Demon Lord/style.scss @@ -7,33 +7,40 @@ $circle_lg : 67px; // @import "http://fonts.googleapis.com/css?family=Metal+Mania|Roboto:500"; .charsheet { - + font-family: 'Roboto', Helvetica, sans-serif; + .sheet-hidden { + + } + + div div.sheet-pane { display: none; } + + input.sheet-tab, + input.sheet-tab + span { + margin: 0 15px 15px 0; + display: inline-block; + vertical-align: middle; + } + + input.sheet-tab1:checked ~ .sheet-pane.sheet-maindiv, + input.sheet-tab2:checked ~ .sheet-pane.sheet-maindiv2 + { + display: block; + } + .sheet-pane { // Remove when testing outside of Roll20 - .sheet-maindiv { margin-left: -24px; margin-right: -24px; margin-top: -10px; - } // End Roll20 section - fieldset { - border: none; - padding: 0; - } - - .sheet-maindiv { - font-family: 'Roboto', Helvetica, sans-serif; -/* background-image: url(http://mamascience.com/images/Sheet-FINAL-BW.png); */ - background: url('http://s2.postimg.org/lbrbb7yqh/sheet_final.png') no-repeat center center transparent; - background-size: cover; - height: 1139px; - width: 880px; -// font-family: sans-serif; - + height: 1139px; + width: 880px; + + label { display: block; float: none; @@ -47,10 +54,8 @@ $circle_lg : 67px; border: none; padding: 10px; width: 100%; + border-radius: 3px; - &[type="number"] { - padding: 10px 1px 10px 13px; - } } textarea { @@ -59,7 +64,6 @@ $circle_lg : 67px; } input.sheet-encircled { -// border: none; position: absolute; background: none; font-size: 1.5em; @@ -72,6 +76,10 @@ $circle_lg : 67px; border-color: $red; font-family: 'Metal Mania', Helvetica, sans-serif; + + &[type="number"] { + padding: 10px 1px 10px 15px; + } &.sheet-lg { border-radius: 35px; @@ -102,6 +110,66 @@ $circle_lg : 67px; } } + input.sheet-mod { + background: rgba(255, 255, 255, .4); + font-size: 1.25em; + text-align: center; + padding: 3px; + width: 25px; + border-radius: 10px; + position: absolute; + + /* turn off number arrows/spinners */ + &::-webkit-inner-spin-button, + &::-webkit-outer-spin-button { + -webkit-appearance: none; + margin: 0; + } + } + + fieldset { + border: none; + padding: 0; + } + } + + .sheet-maindiv { + background: url('http://s20.postimg.org/bozp7kxel/sheet_final.jpg') no-repeat center center transparent; + background-size: cover; + .sheet-3colrow { + padding-top: 15px; + + .sheet-col { + box-sizing: border-box; + margin: 0; + padding: 15px 30px 0 30px; + width: 33%; + } + + .sheet-col:nth-child(1) { + padding-right: 0px; + + label { + text-align: left; + } + } + .sheet-col:nth-child(2) { + label { + text-align: center; + } + } + .sheet-col:nth-child(3) { + padding-left: 0px; + width: 32%; + + label { + text-align: right; + } + } + } + + + /* 1st Row */ .sheet-row-1 { height: 275px; position: relative; @@ -136,8 +204,7 @@ $circle_lg : 67px; &.sheet-lvl { display: none; } - } - + } input { box-sizing: border-box; @@ -160,38 +227,7 @@ $circle_lg : 67px; } - .sheet-3colrow { - padding-top: 15px; - - .sheet-col { - box-sizing: border-box; - margin: 0; - padding: 15px 30px 0 30px; - width: 33%; - } - - - .sheet-col:nth-child(1) { - padding-right: 0px; - - label { - text-align: left; - } - } - .sheet-col:nth-child(2) { - label { - text-align: center; - } - } - .sheet-col:nth-child(3) { - padding-left: 0px; - - label { - text-align: right; - } - } - } - + /* 2nd Row */ .sheet-row-2 { height: 620px; position: relative; @@ -229,13 +265,32 @@ $circle_lg : 67px; label { display: none; + + + &.sheet-damage-max { + display: inline-block; + position: absolute; + bottom: 300px; + right: 430px; + font-weight: normal; + margin: 0; + font-size: 1em; + width: auto; + } } input { - &.lg { - font-size: 2em; + &.sheet-lg { + + &:not([name="attr_damage"]) { + font-size: 2em; + } + &:not([name="attr_health"]) { + padding-bottom: 18px; + } } + /* Begin positioning attributes */ &[name="attr_strength"] { left: 297px; top: 100px; @@ -244,8 +299,15 @@ $circle_lg : 67px; left: 341px; top: 156px; } + + + .sheet-mod { + left: 317px; + top: 142px; + } } + + &[name="attr_size"] { left: 235px; top: 152px; @@ -259,15 +321,29 @@ $circle_lg : 67px; right: 351px; top: 152px; } + + .sheet-mod { + right: 323px; + top: 143px; + } + } &[name="attr_perception"] { right: 245px; - top: 93px; + top: 93px; + padding-bottom: 20px; + input + button[type="roll"] { right: 270px; top: 136px; } + + .sheet-mod { + right: 259px; + top: 122px; + font-size: 1em; + line-height: 1em; + padding: 2px 0; + width: 20px; + } } &[name="attr_agility"] { @@ -278,6 +354,10 @@ $circle_lg : 67px; left: 285px; top: 286px; } + + .sheet-mod { + left: 240px; + top: 322px; + } } &[name="attr_speed"] { left: 198px; @@ -292,6 +372,10 @@ $circle_lg : 67px; right: 290px; top: 285px; } + + .sheet-mod { + right: 248px; + top: 321px; + } } &[name="attr_insanity"] { right: 241px; @@ -329,8 +413,9 @@ $circle_lg : 67px; width: 139px; height: 139px; - line-height: 139px; - + + padding-bottom: 15px; + padding-left: 16px; border-radius: 70px; font-size: 3em; @@ -339,6 +424,16 @@ $circle_lg : 67px; text-shadow: 1px 1px 1px #000; } + + &[name="attr_damage_max"] { + bottom: 300px; + right: 416px; + background: none; + box-shadow: none; + padding: 0; + margin-bottom: 0; + font-size: 1em; + } } } } @@ -352,6 +447,7 @@ $circle_lg : 67px; &.sheet-even { width: 41.5%; + padding-left: 0; } label { @@ -364,6 +460,7 @@ $circle_lg : 67px; } } + /* 3rd Row */ .sheet-row-3 { label { display: inline-block; @@ -407,5 +504,16 @@ $circle_lg : 67px; } } + .sheet-maindiv2 { + background: url('http://s20.postimg.org/p61pnke1p/sheet_final_bkg.jpg') no-repeat center center transparent; + background-size: cover; + + .sheet-row-1 { + padding: 15px 30px 0 30px; + label { + text-align: left; + } + } + } } \ No newline at end of file