diff --git a/CDMG/cdmg.css b/CDMG/cdmg.css index 1e4f608bae..2627b063f6 100644 --- a/CDMG/cdmg.css +++ b/CDMG/cdmg.css @@ -1,24 +1,42 @@ @import url('https://fonts.googleapis.com/css?family=Passion+One:wght@300&display=swap'); -button[type=roll].sheet-stat-roll::before { - background-image: none; - font-family: dicefontd6; - content: "l"; - color: #3f0f12; -} - -.sheet-collateral-damage { +.collateral-damage { font-family: Calibri, Candara, Segoe, "Segoe UI", Optima, Arial, sans-serif; font-size: 14px; font-weight: bold; min-width: 500px; /* TODO: Figure out if there is a better value for this */ } -.sheet-collateral-damage .sheet-row-padding { +.collateral-damage button[type=roll].stat-roll::before { + background-image: none; + font-family: dicefontd6; + content: "F"; + color: #3f0f12; +} + +.collateral-damage .row-padding { padding-top:5px; } -.sheet-collateral-damage .sheet-section-act-heading { +.collateral-damage select { + width: 100%; + font-family: 'Passion One', Calibri, Candara, Segoe, "Segoe UI", Optima, Arial, sans-serif; + text-transform: uppercase; + margin-bottom: 0px; +} + +.collateral-damage .section { + padding: 5px; +} + +.collateral-damage .randomize-button { + font-family: 'Passion One', Calibri, Candara, Segoe, "Segoe UI", Optima, Arial, sans-serif; + font-size: 13px; + font-weight: normal; + line-height: 18px; +} + +.collateral-damage .section-act-heading { font-family: 'Passion One', Calibri, Candara, Segoe, "Segoe UI", Optima, Arial, sans-serif; text-transform: uppercase; font-weight: 300; @@ -30,18 +48,7 @@ button[type=roll].sheet-stat-roll::before { border-width: 2px; } -.sheet-collateral-damage .sheet-stat-content { - display: inline-block; - vertical-align: middle; - text-align: center; - width: 45px; -} - -.sheet-collateral-damage .sheet-section { - padding: 5px; -} - -.sheet-collateral-damage .sheet-section-heading { +.collateral-damage .section-heading { font-family: 'Passion One', Calibri, Candara, Segoe, "Segoe UI", Optima, Arial, sans-serif; text-transform: uppercase; font-weight: 300; @@ -51,14 +58,21 @@ button[type=roll].sheet-stat-roll::before { background-color: #eeb8bb; } -.sheet-collateral-damage .sheet-section-content { +.collateral-damage .section-content { border-left: solid #3f0f12; border-top: solid #3f0f12; border-width: 2px; padding: 5px; } -.sheet-collateral-damage .sheet-input-label-header { +.collateral-damage .stat-content { + display: inline-block; + vertical-align: middle; + text-align: center; + width: 45px; +} + +.collateral-damage .input-label-header { font-family: 'Passion One', Calibri, Candara, Segoe, "Segoe UI", Optima, Arial, sans-serif; text-transform: uppercase; font-weight: 300; @@ -69,7 +83,7 @@ button[type=roll].sheet-stat-roll::before { text-align: left; } -.sheet-collateral-damage .sheet-input-label { +.collateral-damage .input-label { color: #3f0f12; border-top: solid #3f0f12; border-width: 1px; @@ -77,19 +91,19 @@ button[type=roll].sheet-stat-roll::before { text-align: left; } -.sheet-collateral-damage .sheet-center-text { +.collateral-damage .center-text { text-align: center; } /* Customizes the inputs to use bold font */ -.sheet-collateral-damage input[type=text] { +.collateral-damage input[type=text] { width: 100%; font-size: 14px; font-family: 'Passion One', Calibri, Candara, Segoe, "Segoe UI", Optima, Arial, sans-serif; text-transform: uppercase; font-weight: 300; } -.sheet-collateral-damage textarea { +.collateral-damage textarea { box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; @@ -103,20 +117,22 @@ button[type=roll].sheet-stat-roll::before { } /* Used to build out + or - in stat table */ -.sheet-collateral-damage .sheet-stat-content label { +.collateral-damage .stat-content label { text-align: center; } -.sheet-collateral-damage .sheet-stat-content label span:before { +.collateral-damage .stat-content label span:before { content: "+"; + font-size: 25px; cursor: pointer; } -.sheet-collateral-damage .sheet-stat-content label input[type=checkbox]:checked + span:before { +.collateral-damage .stat-content label input[type=checkbox]:checked + span:before { content: "-"; + font-size: 25px; cursor: pointer; } /* Used to build the stat dice table */ -.sheet-collateral-damage .sheet-stats-dice-header { +.collateral-damage .stats-dice-header { font-family: 'Passion One', Calibri, Candara, Segoe, "Segoe UI", Optima, Arial, sans-serif; text-transform: uppercase; font-weight: 300; @@ -125,35 +141,105 @@ button[type=roll].sheet-stat-roll::before { text-align: center; color: white; } -.sheet-collateral-damage table { +.collateral-damage table { width: 100%; } -.sheet-collateral-damage td { +.collateral-damage td { text-align: center; border: 1px solid #3f0f12; } /* Used to build out the wound heart toggles */ -.sheet-collateral-damage input[type=checkbox] { +.collateral-damage input[type=checkbox] { display: none; } -.sheet-collateral-damage label span:before { +.collateral-damage label span:before { content: url("https://raw.githubusercontent.com/patschroed/roll20-character-sheets/master/CDMG/heart.png"); cursor: pointer; } -.sheet-collateral-damage label input[type=checkbox]:checked + span:before { +.collateral-damage label input[type=checkbox]:checked + span:before { content: url("https://raw.githubusercontent.com/patschroed/roll20-character-sheets/master/CDMG/heart-slash.png"); cursor: pointer; } -.sheet-collateral-damage ul { +.collateral-damage ul { list-style-type: none; margin-bottom: 0px; margin-left: 13px; } -.sheet-collateral-damage li { +.collateral-damage li { display: inline-block; } -.sheet-collateral-damage li label { +.collateral-damage li label { padding: 0px; display: inline-block; } + +/* Used to dynamically switch between the different class selections */ +.fantasy-class-selector, +.horror-class-selector, +.western-class-selector, +.superhero-class-selector, +.scifi-class-selector { + display: none; +} + +.class-toggle[value="fantasy"] ~ div.fantasy-class-selector, +.class-toggle[value="horror"] ~ div.horror-class-selector, +.class-toggle[value="western"] ~ div.western-class-selector, +.class-toggle[value="superhero"] ~ div.superhero-class-selector, +.class-toggle[value="scifi"] ~ div.scifi-class-selector { + display: block; +} + +/* Popup content */ +.overlay { + position: fixed; + top: 0; + bottom: 0; + left: 0; + right: 0; + background: rgba(0, 0, 0, 0.7); + transition: opacity 500ms; + visibility: hidden; + opacity: 0; +} +.overlay:target { + visibility: visible; + opacity: 1; +} + +.popup { + margin: 70px auto; + padding: 20px; + background: #fff; + border-radius: 5px; + width: 55%; + position: relative; + transition: all 5s ease-in-out; + font-family: 'Passion One', Calibri, Candara, Segoe, "Segoe UI", Optima, Arial, sans-serif; + font-weight: 300; + font-size: 16px; +} +.popup h2 { + margin-top: 0; + color: rgb(0, 0, 0); +} +.popup .close { + position: absolute; + top: 20px; + right: 30px; + transition: all 200ms; + font-size: 30px; + font-weight: bold; + text-decoration: none; + color: rgb(0, 0, 0); +} +.popup .content { + max-height: 30%; +} + +/* Using this to pre-load the heart-slash to avoid the flicker */ +.collateral-damage::after{ + position:absolute; width:0; height:0; overflow:hidden; z-index:-1; + content:url("https://raw.githubusercontent.com/patschroed/roll20-character-sheets/master/CDMG/heart-slash.png") + } \ No newline at end of file diff --git a/CDMG/cdmg.html b/CDMG/cdmg.html index 6338052330..339adad634 100644 --- a/CDMG/cdmg.html +++ b/CDMG/cdmg.html @@ -1,10 +1,10 @@
-
-
+
+
-
+
PLAYER NAME
@@ -13,44 +13,193 @@
MOVIE TITLE
+
+ +
MOVIE SETTING
+
-
-
-
Act 1
Objectives
+
+
+
+
Act 1 Objectives
+ +
-
-
Act 2
Objectives
+
+
+
Act 2 Objectives
+ +
-
-
Act 3
Objectives
+
+
+
Act 3 Objectives
+ +
-
-
+
+
PLAYER INFO +
+
CHARACTER NAME
- -
CLASS
- -
MENTALITY
- -
FLAW
+ + +
+ +
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
CLASS
+
+ + +
+ +
MENTALITY ?
+
+
+

CHARACTER MENTALITY CHART

+ × +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
CHILDISHLiterally, you have the mind of a small child.
DELUSIONALYou think you’re way cooler/better than you really are.
CHAOTICChaos and destruction are always on your mind.
BIZARREYour unusual appearance and unexpected outbursts keep many around you on edge.
FLASHY / FLAMBOYANTYour presence must always be known. You love attention!
GREEDYYou want everything for yourself. Sharing is not in your vocabulary.
ENVIOUSYou want everything everyone else has, and you believe you deserve it.
PETTYEvery little thing bothers you, and it’s everyone else’s fault!
AMBITIOUSYou are determined! You will be the best at any and everything you do.
STUBBORNIt’s your way or nothing.
+
+
+
+
+ + +
+ +
FLAW
+
STATS +
@@ -73,8 +222,7 @@
=
- - +
TOTAL
@@ -107,8 +255,7 @@
=
- - +
TOTAL
@@ -130,7 +277,7 @@
@@ -140,8 +287,7 @@
=
- - +
TOTAL
@@ -174,7 +320,7 @@
-
+
WOUNDS
@@ -223,7 +369,7 @@ LEFT:
- + @@ -234,7 +380,7 @@ RIGHT:
- + @@ -248,30 +394,508 @@