Tweaks
- Fixes the Black color to be "Almost" black - Adds Crew Type name and description styling - Adds "All Items" tab for Crew to see all attached items
This commit is contained in:
Peter Varaksin
parent
2226760259
commit
2c34228ff5
6 changed files with 86 additions and 49 deletions
3
TODO
3
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
|
||||
- Add BitD fonts and fix styles
|
||||
- Fix the Teeth black color to "$almost_black"
|
||||
|
|
|
|||
|
|
@ -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":{}}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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 */
|
||||
|
|
|
|||
|
|
@ -203,7 +203,8 @@
|
|||
<div id="crew-class" class="class-name">
|
||||
{{#each actor.items as |item id|}}
|
||||
{{#eq item.type "crew_type"}}
|
||||
{{item.name}}
|
||||
<div class="big-name">{{item.name}}</div>
|
||||
<div class="big-description">{{item.data.description}}</div>
|
||||
{{/eq}}
|
||||
{{/each}}
|
||||
</div>
|
||||
|
|
@ -211,6 +212,7 @@
|
|||
<a class="item" data-tab="turfs">Turfs</a>
|
||||
<a class="item" data-tab="upgrades">Upgrades</a>
|
||||
<a class="item" data-tab="abilities">Abilities</a>
|
||||
<a class="item" data-tab="all-items">All Items</a>
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
|
|
@ -294,6 +296,22 @@
|
|||
{{/each}}
|
||||
</div>
|
||||
|
||||
{{!-- Full Item List --}}
|
||||
<div id="crew-abilities" class="tab grow-two flex-vertical" data-tab="all-items">
|
||||
<div class="label-stripe">
|
||||
<p><label>Special Abilities</label></p>
|
||||
</div>
|
||||
{{#each actor.items as |item id|}}
|
||||
<div class="item flex-horizontal" data-item-id="{{item._id}}">
|
||||
<div class="item-body flex-horizontal">
|
||||
<img src="{{item.img}}" title="{{item.name}}" width="24" height="24"/>
|
||||
<div class="item-name">{{item.name}}</div>
|
||||
</div>
|
||||
<a class="item-control item-delete" title="Delete Item"><i class="fas fa-trash"></i></a>
|
||||
</div>
|
||||
{{/each}}
|
||||
</div>
|
||||
|
||||
</section>
|
||||
|
||||
|
||||
|
|
|
|||
Reference in a new issue