diff --git a/CWOD/Vampire/README.md b/CWOD/Vampire/README.md new file mode 100644 index 0000000000..94dcbe59b4 --- /dev/null +++ b/CWOD/Vampire/README.md @@ -0,0 +1,3 @@ +Character sheet for Vampire The Maquerade, Second Edition, revised, by White Wolf Publishing. + +A big thanks goes out to Brian Shields and Benjamin Bandelow. I used the exalted sheet they made as a starting point and as such much, maybe most, of this code it theirs. diff --git a/CWOD/Vampire/Vampire.css b/CWOD/Vampire/Vampire.css new file mode 100644 index 0000000000..ff80694199 --- /dev/null +++ b/CWOD/Vampire/Vampire.css @@ -0,0 +1,143 @@ +.charsheet label { + display: inline-block; + width: 85px; + text-align: right; +} + +.charsheet input { + display: inline-block; + width: 155px; +} + +.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; + text-align: center; +} + +select.sheet-dtype { + width: 60px; + vertical-align: top; +} + +/* Hide actual dot/checkbox */ +input[type="radio"], +input[type="checkbox"] +{ + opacity: 0; + position: absolute; + cursor: pointer; + z-index: 1; + vertical-align: middle; +} + +/* Styles common to fake dot and checkbox */ +input[type="radio"] + span::before, +input[type="checkbox"] + span::before +{ + border: solid 1px #a8a8a8; + line-height: 14px; + text-align: middle; + display: inline-block; + vertical-align: middle; + margin: 0 0 0 -3px; + + -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); +} + +/* Styles unique to fake dot (checked or left of checked) */ +input[type="radio"] + span::before +{ + content: "•"; + width: 12px; + height: 12px; + font-size: 36px; + + -moz-border-radius: 50%; + -webkit-border-radius: 50%; + border-radius: 50%; +} + +/* Styles unique to fake checkbox (unchecked) */ +input[type="checkbox"] + span::before +{ + content: ""; + opacity: .5; + width: 14px; + height: 14px; + font-size: 12px; + + -moz-border-radius: 3px; + -webkit-border-radius: 3px; + border-radius: 3px; +} + +/* Styles unique to fake checkbox (checked) */ +input[type="checkbox"]:checked + span::before +{ + border: solid 1px transparent; + background: transparent; + content: "✖"; + color: #a00; + + -moz-box-shadow: 0 0 2px transparent; + -webkit-box-shadow: 0 0 2px transparent; + box-shadow: 0 0 2px transparent; +} + +input[type="checkbox"]:hover:checked + span::before +{ + -moz-box-shadow: 0 0 2px #ccc; + -webkit-box-shadow: 0 0 2px #ccc; + box-shadow: 0 0 2px #ccc; + + border: solid 1px #a8a8a8; + margin-right: 0px; +} + +/* Remove dot from all radios _after_ selected one */ +input[type="radio"]:checked ~ input[type="radio"] + span::before +{ + content: ""; +} + +/* Show checkbox when hovering or when it's checked */ +input[type="checkbox"]:hover + span::before +{ + opacity: 1; +} + +/* Fade out dots when checkbox is checked */ +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 +{ + content: ""; +} diff --git a/CWOD/Vampire/Vampire.html b/CWOD/Vampire/Vampire.html new file mode 100644 index 0000000000..22617f3609 --- /dev/null +++ b/CWOD/Vampire/Vampire.html @@ -0,0 +1,460 @@ +
+
+