diff --git a/TODO b/TODO index 9b08e21..472da31 100644 --- a/TODO +++ b/TODO @@ -17,4 +17,5 @@ - Document usage of "logic" item property (crew_upgrades) - Add Icons to Items - Add screenshots -- Add BitD fonts and fix styles \ No newline at end of file +- Add BitD fonts and fix styles +- Fix the Teeth black color to "$almost_black" diff --git a/packs/crew_types.db b/packs/crew_types.db index 6c2655c..49a0818 100644 --- a/packs/crew_types.db +++ b/packs/crew_types.db @@ -1 +1 @@ -{"_id":"678LJHqxkBAaSJci","name":"Cult","permission":{"default":0},"type":"crew_type","data":{"description":"","experience_clues":"- Advance the agenda of your deity or embody its precepts in action.\n- Contend with challenges above your current station.\n- Bolster your crew's reputation or develop a new one.\n- Express the goals, drives, inner conflict, or essential nature of the crew.","turfs":{"1":{"name":"Cloister","value":false,"description":"+1 scale for your Adept cohorts","connects":["right"],"connected":[false,false,false,false]},"2":{"name":"Vice Den","value":false,"description":"(Tier roll) - Heat = coin in Downtime","connects":["left","right","bottom"],"connected":[false,false,false,false]},"3":{"name":"Offertory","value":false,"description":"+2 coin for occult operations","connects":["left"],"connected":[false,false,false,false]},"4":{"name":"Ancient Obelisk","value":false,"description":"-1 stress cost for all arcane powers and rituals","connects":["right"],"connected":[false,false,false,false]},"5":{"name":"Ancient Tower","value":false,"description":"+1d to Consort w/ arcane entities on site","connects":["left","bottom"],"connected":[false,false,false,false]},"6":{"name":"Turf","value":false,"description":"","connects":["top","right"],"connected":[false,false,false,false]},"7":{"name":"Turf","value":false,"description":"","connects":["left","top","right","bottom"],"connected":[false,false,false,false]},"8":{"name":"Lair","value":true,"description":"","connects":["left","top","right","bottom"],"connected":[false,false,false,true]},"9":{"name":"Turf","value":false,"description":"","connects":["left","right","bottom"],"connected":[false,false,false,false]},"10":{"name":"Turf","value":false,"description":"","connects":["left","top","bottom"],"connected":[false,false,false,false]},"11":{"name":"Spirit Well","value":false,"description":"+1d to Attune on site","connects":["right"],"connected":[false,false,false,false]},"12":{"name":"Ancient Gate","value":false,"description":"Safe passage in the Deathlands","connects":["left","top"],"connected":[false,false,false,false]},"13":{"name":"Sanctuary","value":false,"description":"+1d to Command and Sway on site","connects":["top"],"connected":[false,false,false,false]},"14":{"name":"Sacred Nexus","value":false,"description":"+1d to healing rolls","connects":["top","right"],"connected":[false,false,false,false]},"15":{"name":"Ancient Altar","value":false,"description":"+1d engagement for occult plans","connects":["left","top"],"connected":[false,false,false,false]}}},"folder":null,"sort":100001,"flags":{}} +{"_id":"678LJHqxkBAaSJci","name":"Cult","permission":{"default":0},"type":"crew_type","data":{"description":"Acolytes of a Deity","experience_clues":"- Advance the agenda of your deity or embody its precepts in action.\n- Contend with challenges above your current station.\n- Bolster your crew's reputation or develop a new one.\n- Express the goals, drives, inner conflict, or essential nature of the crew.","turfs":{"1":{"name":"Cloister","value":false,"description":"+1 scale for your Adept cohorts","connects":["right"],"connected":[false,false,false,false]},"2":{"name":"Vice Den","value":false,"description":"(Tier roll) - Heat = coin in Downtime","connects":["left","right","bottom"],"connected":[false,false,false,false]},"3":{"name":"Offertory","value":false,"description":"+2 coin for occult operations","connects":["left"],"connected":[false,false,false,false]},"4":{"name":"Ancient Obelisk","value":false,"description":"-1 stress cost for all arcane powers and rituals","connects":["right"],"connected":[false,false,false,false]},"5":{"name":"Ancient Tower","value":false,"description":"+1d to Consort w/ arcane entities on site","connects":["left","bottom"],"connected":[false,false,false,false]},"6":{"name":"Turf","value":false,"description":"","connects":["top","right"],"connected":[false,false,false,false]},"7":{"name":"Turf","value":false,"description":"","connects":["left","top","right","bottom"],"connected":[false,false,false,false]},"8":{"name":"Lair","value":true,"description":"","connects":["left","top","right","bottom"],"connected":[false,false,false,true]},"9":{"name":"Turf","value":false,"description":"","connects":["left","right","bottom"],"connected":[false,false,false,false]},"10":{"name":"Turf","value":false,"description":"","connects":["left","top","bottom"],"connected":[false,false,false,false]},"11":{"name":"Spirit Well","value":false,"description":"+1d to Attune on site","connects":["right"],"connected":[false,false,false,false]},"12":{"name":"Ancient Gate","value":false,"description":"Safe passage in the Deathlands","connects":["left","top"],"connected":[false,false,false,false]},"13":{"name":"Sanctuary","value":false,"description":"+1d to Command and Sway on site","connects":["top"],"connected":[false,false,false,false]},"14":{"name":"Sacred Nexus","value":false,"description":"+1d to healing rolls","connects":["top","right"],"connected":[false,false,false,false]},"15":{"name":"Ancient Altar","value":false,"description":"+1d engagement for occult plans","connects":["left","top"],"connected":[false,false,false,false]}}},"folder":null,"sort":100001,"flags":{}} diff --git a/scss/mixin.scss b/scss/mixin.scss index aa6e20a..32958a3 100644 --- a/scss/mixin.scss +++ b/scss/mixin.scss @@ -1,7 +1,7 @@ /* * Toothradio */ - @mixin toothradio($width, $height, $unchecked_background, $checked_background) { +@mixin toothradio($width, $height, $unchecked_background, $checked_background) { display: flex; @@ -22,7 +22,7 @@ width: auto; height: auto; background-image: none !important; - background: black !important; + background: $almost_black !important; margin-right: 0px; } } @@ -48,12 +48,12 @@ /* * Custom Radio */ - @mixin custom_radio($width, $height) { +@mixin custom_radio($width, $height) { display: flex; $default_color: white; - $accent_color: black; - $circle_border_color: black; + $accent_color: $almost_black; + $circle_border_color: $almost_black; label { @@ -96,12 +96,12 @@ /* * Custom Radio Squared */ - @mixin custom_radio_square($side) { +@mixin custom_radio_square($side) { display: flex; $default_color: white; $accent_color: gold; - $circle_border_color: black; + $circle_border_color: $almost_black; label { @@ -179,7 +179,7 @@ $border_width: 3; position: relative; - border: #{$border_width}px solid black; + border: #{$border_width}px solid $almost_black; padding: 0; width: #{$size}px; height: #{$size}px; diff --git a/scss/style.scss b/scss/style.scss index b42effd..2f3d331 100644 --- a/scss/style.scss +++ b/scss/style.scss @@ -1,9 +1,11 @@ -@import 'mixin.scss'; - // Colors $lightgray: #CCC; $gray: #999; $red: red; +$almost_black: #191813; + +// Imports +@import 'mixin.scss'; /* * General Styles @@ -74,7 +76,7 @@ $red: red; } .black-label { - background-color: black; + background-color: $almost_black; color: white; font-size: 21px; text-align: center; @@ -85,7 +87,7 @@ $red: red; .gray-label { background-color: $gray; - color: black; + color: $almost_black; font-size: 21px; text-align: center; padding: 0px 5px; @@ -106,7 +108,7 @@ $red: red; .big-teeth-section { - border-top: 3px solid black; + border-top: 3px solid $almost_black; display: flex; flex-direction: row; margin-bottom: 0px; @@ -186,7 +188,7 @@ $red: red; width: 100%; th { - background-color: black; + background-color: $almost_black; color: white; } @@ -219,7 +221,7 @@ $red: red; flex-direction: column; .stripe { - background-color: black; + background-color: $almost_black; color: white; font-size: 17px; padding-left: 5px; @@ -346,7 +348,7 @@ $red: red; // Reputation #crew-reputation { - border-top: 3px solid black; + border-top: 3px solid $almost_black; @include toothradio(17px, 50px, "assets/teeth/stresstooth-halfgrey.png", "assets/teeth/stresstooth-red.png"); input[disabled="disabled"] + label { @@ -388,7 +390,7 @@ $red: red; } #crew-hold { - border-top: 3px solid black; + border-top: 3px solid $almost_black; @include toothradio_single(17px, 50px, "assets/teeth/stresstooth-halfgrey.png", "assets/teeth/stresstooth-red.png"); width: 221px; } @@ -400,9 +402,9 @@ $red: red; width: 145px; display: flex; align-items: center; - border-top: 3px solid black; + border-top: 3px solid $almost_black; - @include custom_radio_round(18px, gray, $lightgray, black); + @include custom_radio_round(18px, gray, $lightgray, $almost_black); > * { margin-right: 5px; @@ -432,10 +434,19 @@ $red: red; height: 120px; display: flex; align-items: center; - justify-content: center; + justify-content: space-around; font-size: 48px; text-transform: uppercase; - border: 3px solid black; + border: 3px solid $almost_black; + + .big-name { + font-weight: bold; + } + + .big-description { + font-size: 20px; + color: $almost_black; + } } } diff --git a/styles/blades.css b/styles/blades.css index bafdd09..1ef8e71 100644 --- a/styles/blades.css +++ b/styles/blades.css @@ -76,7 +76,7 @@ flex-direction: column; } * .black-label { - background-color: black; + background-color: #191813; color: white; font-size: 21px; text-align: center; @@ -86,7 +86,7 @@ } * .gray-label { background-color: #999; - color: black; + color: #191813; font-size: 21px; text-align: center; padding: 0px 5px; @@ -102,7 +102,7 @@ display: flex; } * .big-teeth-section { - border-top: 3px solid black; + border-top: 3px solid #191813; display: flex; flex-direction: row; margin-bottom: 0px; @@ -136,7 +136,7 @@ width: auto; height: auto; background-image: none !important; - background: black !important; + background: #191813 !important; margin-right: 0px; } * .big-teeth-section .big-teeth input { @@ -168,7 +168,7 @@ width: auto; height: auto; background-image: none !important; - background: black !important; + background: #191813 !important; margin-right: 0px; } * .big-teeth-section .small-teeth-container .small-teeth-wrap input { @@ -241,7 +241,7 @@ width: auto; height: auto; background-image: none !important; - background: black !important; + background: #191813 !important; margin-right: 0px; } * .teeth-experience input { @@ -263,7 +263,7 @@ width: 100%; } * #harm-armor #character-harm table th { - background-color: black; + background-color: #191813; color: white; } * #harm-armor #character-harm table input[type=text] { @@ -271,7 +271,7 @@ } * #harm-armor #character-health-clock { position: relative; - border: 3px solid black; + border: 3px solid #191813; padding: 0; width: 80px; height: 80px; @@ -325,7 +325,7 @@ flex-direction: column; } * #attributes .stripe { - background-color: black; + background-color: #191813; color: white; font-size: 17px; padding-left: 5px; @@ -356,7 +356,7 @@ width: auto; height: auto; background-image: none !important; - background: black !important; + background: #191813 !important; margin-right: 0px; } * #attributes .attributes-exp .stripe-tooth-body input { @@ -377,9 +377,9 @@ * #attributes .attributes-container label { height: 15px; width: 15px; - background-color: black; + background-color: #191813; vertical-align: middle; - border: 2px solid black; + border: 2px solid #191813; border-radius: 24px; } * #attributes .attributes-container label[for$="-0"] { @@ -397,7 +397,7 @@ background-color: white; } * #attributes .attributes-container input:checked + label { - background-color: black; + background-color: #191813; } * #attributes .attributes-container * { margin-right: 5px; @@ -446,7 +446,7 @@ width: 15px; background-color: gold; vertical-align: middle; - border: 1px solid black; + border: 1px solid #191813; } * .coins label[for$="-0"] { margin-right: 0px; @@ -484,7 +484,7 @@ width: 15px; background-color: gold; vertical-align: middle; - border: 1px solid black; + border: 1px solid #191813; } * .crew-coins label[for$="-0"] { margin-right: 0px; @@ -503,7 +503,7 @@ margin-bottom: 3px; } * #crew-reputation { - border-top: 3px solid black; + border-top: 3px solid #191813; display: flex; /* Hide the browser's default checkbox */ } @@ -522,7 +522,7 @@ width: auto; height: auto; background-image: none !important; - background: black !important; + background: #191813 !important; margin-right: 0px; } * #crew-reputation input { @@ -683,7 +683,7 @@ left: -7px; } * #crew-hold { - border-top: 3px solid black; + border-top: 3px solid #191813; display: flex; /* Hide the browser's default checkbox */ width: 221px; @@ -711,16 +711,16 @@ width: 145px; display: flex; align-items: center; - border-top: 3px solid black; + border-top: 3px solid #191813; display: flex; /* Hide the browser's default checkbox */ } * #crew-tier label:not([for$="-0"]) { height: 18px; width: 18px; - background-color: black; + background-color: #191813; vertical-align: middle; - border: 2px solid black; + border: 2px solid #191813; border-radius: 9px; } * #crew-tier input { @@ -731,8 +731,8 @@ background-color: #CCC; } * #crew-tier input:checked + label:not([for$="-0"]) { - background-color: black; - border-color: black; + background-color: #191813; + border-color: #191813; } * #crew-tier > * { margin-right: 5px; @@ -755,10 +755,17 @@ height: 120px; display: flex; align-items: center; - justify-content: center; + justify-content: space-around; font-size: 48px; text-transform: uppercase; - border: 3px solid black; + border: 3px solid #191813; +} +* .class-name .big-name { + font-weight: bold; +} +* .class-name .big-description { + font-size: 20px; + color: #191813; } /*# sourceMappingURL=style.css.map */ diff --git a/templates/crew-sheet.html b/templates/crew-sheet.html index c044d03..50a0efe 100644 --- a/templates/crew-sheet.html +++ b/templates/crew-sheet.html @@ -203,7 +203,8 @@