diff --git a/Elemental/elemental.css b/Elemental/elemental.css index 587652d1f1..131e749ee4 100644 --- a/Elemental/elemental.css +++ b/Elemental/elemental.css @@ -1,350 +1,337 @@ .sheet-container { - position:relative; - width: 800px; - background-color: black; - color: green; - position: relative; - display: inline-block; - border: 4px double gold; - border-radius:15px; - padding: 10px; + position:relative; + width: 800px; + background-color: #555555; + color: white; + position: relative; + display: inline-block; + border: 4px double white; + border-radius:15px; + padding: 10px; } .sheet-header { - padding-bottom: 10px; - border-bottom: 4px double gold; + padding-bottom: 10px; + border-bottom: 4px double white; } .sheet-tabs { - margin-top: 10px; - position: relative; +margin-top: 10px; +position: relative; +width: 800px; } +.sheet-tabs::after { + clear: both; + content: ''; + display: block; } +.sheet-tabs .sheet-tab { width: 800px; } - .sheet-tabs::after { - clear: both; - content: ''; - display: block; } - .sheet-tabs .sheet-tab { - width: 800px; } - .sheet-tabs .sheet-tab:nth-of-type(2) > input[type="radio"], .sheet-tabs .sheet-tab:nth-of-type(2) > .sheet-tab-label { - margin-left: 20%; } - .sheet-tabs .sheet-tab:nth-of-type(3) > input[type="radio"], .sheet-tabs .sheet-tab:nth-of-type(3) > .sheet-tab-label { - margin-left: 40%; } - .sheet-tabs .sheet-tab:nth-of-type(4) > input[type="radio"], .sheet-tabs .sheet-tab:nth-of-type(4) > .sheet-tab-label { - margin-left: 60%; } - .sheet-tabs .sheet-tab:nth-of-type(5) > input[type="radio"], .sheet-tabs .sheet-tab:nth-of-type(5) > .sheet-tab-label { - margin-left: 80%; } - .sheet-tabs .sheet-tab > input[type="radio"] { - height: 30px; - margin: 0; - opacity: 0; - position: absolute; - top: 0; - width: 20%; - z-index: 1; } + .sheet-tabs .sheet-tab:nth-of-type(2) > input[type="radio"], .sheet-tabs .sheet-tab:nth-of-type(2) > .sheet-tab-label { + margin-left: 20%; } + .sheet-tabs .sheet-tab:nth-of-type(3) > input[type="radio"], .sheet-tabs .sheet-tab:nth-of-type(3) > .sheet-tab-label { + margin-left: 40%; } + .sheet-tabs .sheet-tab:nth-of-type(4) > input[type="radio"], .sheet-tabs .sheet-tab:nth-of-type(4) > .sheet-tab-label { + margin-left: 60%; } + .sheet-tabs .sheet-tab:nth-of-type(5) > input[type="radio"], .sheet-tabs .sheet-tab:nth-of-type(5) > .sheet-tab-label { + margin-left: 80%; } + .sheet-tabs .sheet-tab > input[type="radio"] { + height: 30px; + margin: 0; + opacity: 0; + position: absolute; + top: 0; + width: 20%; + z-index: 1; } - .sheet-tabs .sheet-tab > input[type="radio"]:hover ~ .sheet-tab-label { - background: #111111; - color: white; - border-bottom-color: gold; - } - - .sheet-tabs .sheet-tab > .sheet-tab-label { - align-items: center; - background: #555555; - border-radius: 6px 6px 0 0; - border: 2px solid gold; + .sheet-tabs .sheet-tab > input[type="radio"]:hover ~ .sheet-tab-label { + background: #111111; color: white; - display: flex; - font-size: 11px; - font-variant: small-caps; - font-weight: bold; - height: 30px; - justify-content: center; - margin: 0; - position: absolute; - text-transform: uppercase; - top: 0; - width: 20%; - border-left-color: gold; - border-top-color: gold; - border-right-color: gold; - border-bottom-color: gold; + border-bottom-color: white; } - .sheet-tabs .sheet-tab > input[type="radio"]:checked ~ .sheet-tab-label { - background: black; - border-color: gold; - border-bottom-color: black; - color: green; + .sheet-tabs .sheet-tab > .sheet-tab-label { + align-items: center; + background: #555555; + border-radius: 6px 6px 0 0; + border: 2px solid white; + color: white; + display: flex; + font-size: 11px; + font-variant: small-caps; + font-weight: bold; + height: 30px; + justify-content: center; + margin: 0; + position: absolute; + text-transform: uppercase; + top: 0; + width: 20%; + border-left-color: white; + border-top-color: white; + border-right-color: white; + border-bottom-color: white; + } + + .sheet-tabs .sheet-tab > input[type="radio"]:checked ~ .sheet-tab-label { + background: black; + border-color: white; + border-bottom-color: black; + color: white; + } + + .sheet-tabs .sheet-tab > input[type="radio"]:checked { + cursor: auto; } + .sheet-tabs .sheet-tab > input[type="radio"]:checked ~ .sheet-tab-content { + display: block; + } + + .sheet-tabs .sheet-tab .sheet-tab-content { + display: none; + min-height: 300px; + padding-top: 32px; + width: 100%; + z-index: 10; } - .sheet-tabs .sheet-tab > input[type="radio"]:checked { - cursor: auto; } - .sheet-tabs .sheet-tab > input[type="radio"]:checked ~ .sheet-tab-content { - display: block; - } - - .sheet-tabs .sheet-tab .sheet-tab-content { - display: none; - min-height: 300px; - padding-top: 32px; - width: 100%; - z-index: 10; - } - - .sheet-content { - padding: 5px; - border: 2px solid gold; - border-radius: 0 10px 10px 10px; - min-height:300px; - } + .sheet-content { + padding: 5px; + border: 2px solid white; + border-radius: 0 10px 10px 10px; + min-height:300px; + } .sheet-label { - float: left; - width: 50px; - color: white; - font-weight:bold; - font-size: 12px; - height: 12px; + float: left; + width: 50px; + color: white; + font-weight:bold; + font-size: 12px; + height: 12px; } .sheet-input { - float: left; - width: calc(100% - 75px); + float: left; + color: black; + width: calc(100% - 75px); } .sheet-heading { - font-size: 1.5em; - font-weight:bold; - border:0px; - border-radius:0px; - font-variant: small-caps; + font-size: 1.5em; + font-weight:bold; + border:0px; + border-radius:0px; + font-variant: small-caps; } .sheet-smallblock { - margin: 5px; - float: left; + margin: 5px; + float: left; } .sheet-block { - background: #333333; - border-radius:15px; - border: 1px solid gold; - padding: 5px; - color: lightgrey; - min-height: 50px; - text-align: center; + background: #444444; + border-radius:15px; + border: 1px solid white; + padding: 5px; + color: black; + min-height: 50px; + text-align: center; } .sheet-block input { - font-size: 12px; - line-height:15px; - height: 15px; - margin-bottom:5px; + font-size: 12px; + line-height:15px; + height: 15px; + color:black; + margin-bottom:5px; } .sheet-block select { - font-size: 12px; - line-height:15px; - height: 15px; - margin-bottom:5px; - padding: 0; + font-size: 12px; + line-height:15px; + height: 15px; + color: black; + margin-bottom:5px; + padding: 0; } .sheet-block option:disabled { - font-weight: bold; + font-weight: bold; } -/* Hide actual radio */ -.sheet-block input[type="radio"] { - opacity: 0; - width: 16px; - height: 16px; - position: relative; - top: 5px; - left: 6px; - margin: -10px; - cursor: pointer; - z-index: 1; + +.sheet-block input[type="checkbox"]:checked { + background-color: #EC2127; } -/* Fake radio */ -.sheet-block input[type="radio"] + span::before { - margin-right: 4px; - border: solid 1px #a8a8a8; - line-height: 14px; - text-align: center; - display: inline-block; - vertical-align: middle; - box-shadow: 0 0 2px #ccc; - background: #f6f6f6; - background: radial-gradient(black, black); - content: "•"; - width: 12px; - height: 12px; - font-size: 24px; - border-radius: 50%; +.sheet-block input[type="checkbox"] { + margin: 5px -1px; + border-radius: 100%; + border: 2px solid #000 !important; + width: 2em; + height: 2em; + background-color: white; + vertical-align: middle; + -webkit-appearance: none; + outline: none; + cursor: pointer; } -/* Remove dot from all radios _after_ selected one */ -.sheet-block input[type="radio"]:checked ~ input[type="radio"] + span::before { - content: ""; -} table.sheet-xp { - width: 250px; + width: 250px; } table.sheet-xp th{ - text-align: center; - font-weight:bold; - border:1px solid gold; - border-radius:15px; + text-align: center; + font-weight:bold; + border:1px solid white; + border-radius:15px; } table.sheet-xp td{ - text-align: center; - border:1px solid gold; - border-radius:15px; - padding:5px; - color: white; + text-align: center; + border:1px solid white; + border-radius:15px; + padding:5px; + color: white; } .sheet-attrname { - font-weight:bold; - font-size: 16px; - width:145px; - background:transparent; - border:0px; - color:White; + font-weight:bold; + font-size: 16px; + width:145px; + background:transparent; + border:0px; + color:White; } .sheet-skillblock { - margin-left:20px; + margin-left:20px; } .sheet-top { - border-bottom: 2px double gold; - display: inline-block; - width:100%; - padding-bottom: 5px; - margin-bottom: 5px; + border-bottom: 2px double white; + display: inline-block; + width:100%; + color:white; + padding-bottom: 5px; + margin-bottom: 5px; } .sheet-blocklabel { - float: left; - font-weight:bold; - background:transparent; - border:0px; - color:White; - height: 100%; - vertical-align: middle; + float: left; + font-weight:bold; + background:transparent; + border:0px; + color:White; + height: 100%; + vertical-align: middle; } .sheet-rolltemplate-basic div.sheet-template-container { - background: black; - color: white; - border: 2px solid gold !important; - border-radius: 10px; + background: #96ACB0; + color: white; +border: 2px solid black !important; +border-radius: 10px; } .sheet-rolltemplate-basic .sheet-template-header { - color: green; - padding: 2px; - border-bottom: 1px solid gold; - line-height: 1.6em; - font-size: 1.2em; - font-weight: bold; - font-variant: small-caps; - text-align: center; +color: white; +padding: 2px; +border-bottom: 1px solid black; +line-height: 1.6em; +font-size: 1.2em; +font-weight: bold; + font-variant: small-caps; +text-align: center; } .sheet-rolltemplate-basic div { - padding: 5px; - border-bottom: 1px solid gold; +padding: 5px; +border-bottom: 1px solid black; } .sheet-rolltemplate-basic .inlinerollresult { - display: inline-block; - min-width: 1.5em; - text-align: center; - border: 1px solid gold; - border-radius: 5px; - background: #333333; +display: inline-block; +min-width: 1.5em; +text-align: center; +border: 1px solid white; +border-radius: 5px; +background: #444444; } .sheet-rolltemplate-basic .inlinerollresult.fullcrit { - border: 1px solid gold; - background: green; +border: 1px solid white; +background: green; } .sheet-rolltemplate-basic .inlinerollresult.fullfail { - border: 1px solid gold; - background: red; +border: 1px solid white; +background: red; } .sheet-rolltemplate-basic .inlinerollresult.importantroll { - border: 1px solid gold; - background: blue; +border: 1px solid white; +background: blue; } .sheet-rolltemplate-stat div.sheet-template-container { - background: black; - color: white; - border: 2px solid gold !important; - border-radius: 10px; + background: #96ACB0; + color: white; +border: 2px solid black !important; +border-radius: 10px; } .sheet-rolltemplate-stat .sheet-template-header { - color: green; - padding: 2px; - border-bottom: 1px solid gold; - line-height: 1.6em; - font-size: 1.2em; - font-weight: bold; - font-variant: small-caps; - text-align: center; +color: white; +padding: 2px; +border-bottom: 1px solid black; +line-height: 1.6em; +font-size: 1.2em; +font-weight: bold; + font-variant: small-caps; +text-align: center; } .sheet-rolltemplate-stat div { - padding: 5px; - border-bottom: 1px solid gold; +padding: 5px; +border-bottom: 1px solid black; } .sheet-rolltemplate-stat .inlinerollresult { - display: inline-block; - min-width: 1.5em; - text-align: center; - border: 1px solid gold; - border-radius: 5px; - background: #333333; +display: inline-block; +min-width: 1.5em; +text-align: center; +border: 1px solid black; +border-radius: 5px; +background: #444444; } .sheet-rolltemplate-stat .inlinerollresult.fullfail { - border: 1px solid gold; - background: #333333; +border: 1px solid white; +background: red; } .sheet-rolltemplate-stat .inlinerollresult.fullcrit { - border: 1px solid gold; - background: #333333; +border: 1px solid white; +background: green; } .sheet-rolltemplate-stat .inlinerollresult.importantroll { - border: 1px solid gold; - background: #333333; +border: 1px solid white; +background: blue; } .sheet-rollbutton { - background: gold; - color: black; - border: 0; - cursor: pointer; - border-radius: 10px; +background: #55555; +color: black; +border: 0; +cursor: pointer; +border-radius: 10px; } .sheet-derstat { - width: 35px; - background: transparent; - color: white; - border: 0; - text-align: center; -} + width: 35px; + background: transparent; + color: white; + border: 0; + text-align: center; +} \ No newline at end of file diff --git a/Elemental/elemental.html b/Elemental/elemental.html index 0fbad6e22d..3e9d0b7bb3 100644 --- a/Elemental/elemental.html +++ b/Elemental/elemental.html @@ -1,740 +1,739 @@
-
-
-
-
-
- - -
-
- - -
-
- - -
-
-
-
-
- -
+
+
+
+
+
+ + +
+
+ + +
+
+ + +
+
+
+
+
+
-
-
- - Core -
-
-
-
-
Experience Points
-
-
- Total - Spent - Sacrificed - Reserve -
- - - - +
+
+
+ + Core +
+
+
+
+
Experience Points
+
+
+ Total + Spent + Sacrificed + Reserve
-
-
Attributes & Skills
-
- - - - - -
-
- - - - -
-
-
-
-
- - - - - -
-
- - - - -
-
-
-
-
- - - - - -
-
- - - - -
-
-
-
-
- - - - - -
-
- - - - -
+ + + +
+
+
Attributes & Skills
+
+ + + + + +
+
+ + + + +
-
-
Derived Statistics
-
-
- -
- / -
-
-
- -
- / -
-
-
- -
- / -
-
-
- -
- / -
-
-
Bonuses & Penalties
-
-
- Attack -
- +
+
+ + + + + +
+
+ + + + +
-
-
- Defense -
- +
+
+
+ + + + + +
+
+ + + + +
-
-
- Damage -
- -
-
-
- Impairment Level -
- - - - -
-
-
- Injuries -
- -
-
-
- Move -
- -
-
-
- Init -
- -
-
-
- Spirit -
- -
-
-
Notes
-
- +
+
+
+ + + + + +
+
+ + + + +
-
-
+
+
Derived Statistics
+
+
+ +
+ / +
+
+
+ +
+ / +
+
+
+ +
+ / +
+
+
+ +
+ / +
+
+
Bonuses & Penalties
+
+
+ Attack +
+ +
+
+
+ Defense +
+ +
+
+
+ Damage +
+ +
+
+
+ Impairment Level +
+ + + +
+
+
+ Injuries +
+ +
+
+
+ Move +
+ +
+
+
+ Init +
+ +
+
+
+ Spirit +
+ +
+
+
Notes
+
+ +
+
+
+
-
- - Equipment -
-
-
Weapons
-
-
- Name - Ammo - Rel - Range - DAM - AOE - Wt - Notes -
-
- - - - - - - - -
+
+
+ + Equipment +
+
+
Weapons
+
+
+ Name + Ammo + Rel + Range + DAM + AOE + Wt + Notes
-
-
-
Armor
-
-
- Name - ARM - Wt -
-
- - - -
- -
+
+ + + + + + + + +
+
+
+
+
Armor
+
+
+ Name + ARM + Wt
-
Mounts & Vehicles
-
-
- Name - Crew - AGI - Move - ARM - Health -
-
- - - - - - -
- -
+
+ + + +
+ +
+
+
Mounts & Vehicles
+
+
+ Name + Crew + AGI + Move + ARM + Health
-
-
-
Equipment
-
-
- Name - Location - Wt -
-
- - - -
- -
+
+ + + + + + +
+ +
+
+
+
+
Equipment
+
+
+ Name + Location + Wt
-
-
-
-
-
-
- - Spells & Powers -
-
-
Spells & Psionics
-
-
- Name - DIF - Casting Time - Range - Duration - Notes +
+ + + +
+ +
+
-
- - - - - - -
-
-
Powers
-
-
- Name - Range - Description -
-
- - - -
-
-
-
-
- - +
+
+
+
+ + Spells & Powers +
+
+
Spells & Psionics
+
+
+ Name + DIF + Casting Time + Range + Duration + Notes +
+
+ + + + + + +
+
+
Powers
+
+
+ Name + Range + Description +
+
+ + + +
+
+
+
+
+ + +
-
-
{{type}} Check
-
{{name}}: {{roll}} - {{#rollWasCrit() roll}} - + {{explode}} - {{#rollWasCrit() explode}} - Critical! - {{/rollWasCrit() explode}} - {{/rollWasCrit() roll}} -
-
+
+
{{type}} Check
+
{{name}}: {{roll}} + {{#rollWasCrit() roll}} + + {{explode}} + {{#rollWasCrit() explode}} + Critical! + {{/rollWasCrit() explode}} + {{/rollWasCrit() roll}} +
+
-
-
Stat Check
-
- {{#rollTotal() check 12}} - Fumble {{name}}: {{check}} - {{/rollTotal() check 12}} - {{#rollTotal() check 2}} - Crit {{name}}: {{roll}} - {{/rollTotal() check 2}} - {{#rollBetween() check 3 11}} - {{name}}: {{check}} - {{/rollBetween() check 3 11}} -
-
+
+
Stat Check
+
+ {{#rollTotal() check 36}} + Fumble {{name}}: {{check}} + {{/rollTotal() check 36}} + {{#rollTotal() check 1}} + Crit {{name}}: {{check}} + {{/rollTotal() check 1}} + {{#rollBetween() check 2 35}} + {{name}}: {{check}} + {{/rollBetween() check 2 35}} +
+
+ \ No newline at end of file