diff --git a/Exalted2e/exalted2e.css b/Exalted2e/exalted2e.css index 57b0a010cd..79effd2406 100644 --- a/Exalted2e/exalted2e.css +++ b/Exalted2e/exalted2e.css @@ -1,37 +1,106 @@ -.charsheet label { - display: inline-block; -width: 75px; -text-align: right; +.charsheet +{ + background-color: White; } -.charsheet input { -display: inline-block; -width: 165px; -} - -.sheet-col strong.sheet-dee { -font-size: 1.4em; -font-weight: bold; -padding-right: 4px; -} - -.charsheet input.sheet-short { -width: 3.5em; -} - -.charsheet { -background-color: White; -} - -.charsheet table td, .charsheet table th { - font-size: 1.2em; - font-weight: bold; +.sheet-center, +h3.sheet-ability +{ text-align: center; } -select.sheet-dtype { - width: 60px; - vertical-align: top; +h1.sheet-separator +{ + width: 100%; + text-align: center; + background-image: url('http://i.imgur.com/TwZ84rO.jpg'); + background-repeat: repeat-x; + background-size: auto 10px; + background-position: left 50%; +} + +h1.sheet-separator span +{ + background: white; + padding: 0 5px 0 5px; +} + +img.sheet-banner +{ + max-height: 100px; +} + +span.sheet-attribute, +span.sheet-ability +{ + display: inline-block; + font-weight: bold; + font-size: 14px; +} + +span.sheet-attribute + div, +span.sheet-ability + div +{ + display: inline-block; +} + +div.sheet-attribute div, +div.sheet-ability div +{ + float: right; +} + +div.sheet-attribute, +div.sheet-ability +{ + clear: right; +} + +/* Align labels and input boxes */ +label +{ + display: -webkit-flex; + display: flex; +} + +label input[type="text"], +label select +{ + -webkit-flex: 1 1 auto; + flex: 1 1 auto; +} + +label span +{ + -webkit-flex: 0 1 auto; + flex: 0 1 auto; + margin-right: 20px; +} + +div.sheet-ability input[type="text"] +{ + max-width: 170px; +} + +/* Style boxes */ +label input[type="text"], +label select, +div.sheet-ability input[type="text"] +{ + border: 0px; + background: transparent; + -moz-box-shadow: none; + -webkit-box-shadow: none; + box-shadow: none; + border-radius: 0px; + + border-bottom: 1px solid #000; +} + +label input[type="text"]:focus, +div.sheet-ability input[type="text"]:focus +{ + box-shadow: rgba(83, 167, 235, 0.466667) 0px 0px 6px 0px; } /* Hide actual dot/checkbox */ @@ -39,7 +108,12 @@ input[type="radio"], input[type="checkbox"] { opacity: 0; - position: absolute; + width: 16px; + height: 16px; + position: relative; + top: 5px; + left: 6px; + margin: -10px; cursor: pointer; z-index: 1; } @@ -58,7 +132,7 @@ input[type="checkbox"] + span::before -moz-box-shadow: 0 0 2px #ccc; -webkit-box-shadow: 0 0 2px #ccc; box-shadow: 0 0 2px #ccc; - + background: #f6f6f6; background: -moz-radial-gradient(#f6f6f6, #dfdfdf); background: -webkit-radial-gradient(#f6f6f6, #dfdfdf); @@ -84,7 +158,6 @@ input[type="radio"] + span::before input[type="checkbox"] + span::before { content: ""; - opacity: 0.3; width: 14px; height: 14px; font-size: 12px; @@ -94,8 +167,35 @@ input[type="checkbox"] + span::before border-radius: 3px; } +div.sheet-ability input[type="checkbox"]:first-child + span::before +{ + opacity: 1; +} + +div.sheet-dots input[type="checkbox"]:first-child + span::before +{ + opacity: 0.3; +} + /* Styles unique to fake checkbox (checked) */ -input[type="checkbox"]:checked + span::before +div.sheet-ability input[type="checkbox"]:first-child:checked + span::before +{ + content: "✓"; + color: #bea000; + + -moz-box-shadow: 0 0 2px #ccc; + -webkit-box-shadow: 0 0 2px #ccc; + box-shadow: 0 0 2px #ccc; + + background: #f6f6f6; + background: -moz-radial-gradient(#f6f6f6, #dfdfdf); + background: -webkit-radial-gradient(#f6f6f6, #dfdfdf); + background: -ms-radial-gradient(#f6f6f6, #dfdfdf); + background: -o-radial-gradient(#f6f6f6, #dfdfdf); + background: radial-gradient(#f6f6f6, #dfdfdf); +} + +div.sheet-dots input[type="checkbox"]:first-child:checked + span::before { border: solid 1px transparent; background: transparent; @@ -107,7 +207,8 @@ input[type="checkbox"]:checked + span::before box-shadow: 0 0 2px transparent; } -input[type="checkbox"]:hover:checked + span::before +div.sheet-dots input[type="checkbox"]:first-child:hover:checked + span::before, +div.sheet-ability input[type="checkbox"]:first-child + span::before { -moz-box-shadow: 0 0 2px #ccc; -webkit-box-shadow: 0 0 2px #ccc; @@ -124,20 +225,20 @@ input[type="radio"]:checked ~ input[type="radio"] + span::before } /* Show checkbox when hovering or when it's checked */ -input[type="checkbox"]:hover + span::before, -input[type="checkbox"]:checked + span::before +div.sheet-dots input[type="checkbox"]:first-child:hover + span::before, +div.sheet-dots input[type="checkbox"]:first-child:checked + span::before { opacity: 1; } /* Fade out dots when checkbox is checked */ -input[type="checkbox"]:checked ~ input[type="radio"] + span +div.sheet-dots input[type="checkbox"]:checked ~ input[type="radio"] + span { opacity: 0.5; } /* Hide checked dots when checkbox is checked */ -input[type="checkbox"]:checked ~ input[type="radio"] + span::before +div.sheet-dots input[type="checkbox"]:checked ~ input[type="radio"] + span::before { content: ""; -} +} \ No newline at end of file diff --git a/Exalted2e/exalted2e.html b/Exalted2e/exalted2e.html index 0639433ad4..480c1514c3 100644 --- a/Exalted2e/exalted2e.html +++ b/Exalted2e/exalted2e.html @@ -1,581 +1,607 @@ +
+
-
-