Cleaned out character-sheet.scss to only include styles that apply to the character sheet. Reorganized some things to make this possible.
This commit is contained in:
Justin Ross
parent
b09376d74f
commit
0220d19583
14 changed files with 285 additions and 1470 deletions
|
|
@ -10,7 +10,7 @@ export class BladesClockSheet extends BladesSheet {
|
|||
/** @override */
|
||||
static get defaultOptions() {
|
||||
return foundry.utils.mergeObject(super.defaultOptions, {
|
||||
classes: ["blades-in-the-dark", "sheet", "actor"],
|
||||
classes: ["blades-in-the-dark", "sheet", "actor", "clock"],
|
||||
template: "systems/blades-in-the-dark/templates/actors/clock-sheet.html",
|
||||
width: 700,
|
||||
height: 970,
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@ export class BladesCrewSheet extends BladesSheet {
|
|||
/** @override */
|
||||
static get defaultOptions() {
|
||||
return foundry.utils.mergeObject(super.defaultOptions, {
|
||||
classes: ["blades-in-the-dark", "sheet", "actor"],
|
||||
classes: ["blades-in-the-dark", "sheet", "actor", "crew"],
|
||||
template: "systems/blades-in-the-dark/templates/crew-sheet.html",
|
||||
width: 940,
|
||||
height: 1020,
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@ export class BladesFactionSheet extends BladesSheet {
|
|||
/** @override */
|
||||
static get defaultOptions() {
|
||||
return foundry.utils.mergeObject(super.defaultOptions, {
|
||||
classes: ["blades-in-the-dark", "sheet", "actor"],
|
||||
classes: ["blades-in-the-dark", "sheet", "item", "faction"],
|
||||
template: "systems/blades-in-the-dark/templates/faction-sheet.html",
|
||||
width: 900,
|
||||
height: 'auto',
|
||||
|
|
|
|||
|
|
@ -19,19 +19,26 @@ $hover-brightness: 0.8;
|
|||
|
||||
/*
|
||||
* General Styles
|
||||
* There is probably a lot of redundancy here, since much of this was already moved into the split-out CSS, but it
|
||||
* shouldn't hurt anything to have it in here. Maybe some annoyance with editing/troubleshooting CSS.
|
||||
* Long-term, the CSS should get pared down so its just in the files it belongs in.
|
||||
* Cleaned out things that don't appear to apply to the character sheet, and exist in other, separated SCSS files.
|
||||
* Some things *might* be missing, but at a glance, everything looks to be in order.
|
||||
*/
|
||||
|
||||
& * {
|
||||
.name-alias{
|
||||
|
||||
header {
|
||||
margin-bottom: 10px;
|
||||
img.portrait{
|
||||
max-width: 200px;
|
||||
max-height: 200px;
|
||||
width: auto;
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
|
||||
ul {
|
||||
list-style: none;
|
||||
.tab[data-tab]{
|
||||
display: none;
|
||||
&.active{
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
form {
|
||||
|
|
@ -40,159 +47,6 @@ $hover-brightness: 0.8;
|
|||
}
|
||||
}
|
||||
|
||||
textarea {
|
||||
margin-top: 10px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
td {
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
section {
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
|
||||
> *:not(.label-stripe) {
|
||||
margin-right: 10px;
|
||||
|
||||
&:last-child {
|
||||
margin-right: 0px;
|
||||
}
|
||||
}
|
||||
|
||||
.grow-one {
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.grow-two {
|
||||
flex-grow: 2;
|
||||
}
|
||||
|
||||
&.experience {
|
||||
margin-bottom: 0px;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
|
||||
nav {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.editor,
|
||||
.editor-content {
|
||||
min-height: 150px;
|
||||
}
|
||||
|
||||
.flex-horizontal {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.flex-vertical {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.black-label {
|
||||
background-color: $almost_black;
|
||||
color: $almost_white;
|
||||
font-size: 21px;
|
||||
text-align: center;
|
||||
padding: 0px 5px;
|
||||
height: 30px !important;
|
||||
text-transform: capitalize;
|
||||
}
|
||||
|
||||
.gray-label {
|
||||
background-color: $gray;
|
||||
color: $almost_black;
|
||||
font-size: 21px;
|
||||
text-align: center;
|
||||
padding: 0px 5px;
|
||||
height: 30px !important;
|
||||
text-transform: capitalize;
|
||||
}
|
||||
|
||||
.chat-label {
|
||||
background-color: $almost_black;
|
||||
color: $almost_white;
|
||||
font-size: 21px;
|
||||
text-align: center;
|
||||
padding: 0px 5px;
|
||||
height: 30px !important;
|
||||
text-transform: capitalize;
|
||||
}
|
||||
.chat-label-small {
|
||||
background-color: $gray;
|
||||
color: $almost_black;
|
||||
font-size: small;
|
||||
text-align: center;
|
||||
padding: 3px 5px;
|
||||
height: 20px !important;
|
||||
}
|
||||
|
||||
.label-stripe {
|
||||
text-transform: uppercase;
|
||||
background-color: $almost_black;
|
||||
color: $almost_white;
|
||||
margin-bottom: 10px;
|
||||
position: relative;
|
||||
padding-left: 10px;
|
||||
padding-right: 10px;
|
||||
display: flex;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.label-stripe-gray {
|
||||
text-transform: uppercase;
|
||||
background-color: $gray;
|
||||
margin-bottom: 10px;
|
||||
position: relative;
|
||||
padding-left: 10px;
|
||||
padding-right: 10px;
|
||||
display: flex;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.label-stripe-chat {
|
||||
text-transform: uppercase;
|
||||
background-color: $almost_black;
|
||||
color: $almost_white;
|
||||
margin-bottom: 10px;
|
||||
position: relative;
|
||||
padding-top: 3px;
|
||||
display: flex;
|
||||
font-weight: bold;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.label-stripe-chat-small {
|
||||
text-transform: capitalize;
|
||||
background-color: $gray;
|
||||
color: $almost_black;
|
||||
margin-bottom: 10px;
|
||||
position: relative;
|
||||
padding-top: 3px;
|
||||
display: flex;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.description {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.rollable-text {
|
||||
transition: color $transition-period;
|
||||
}
|
||||
.rollable-text:hover {
|
||||
cursor: pointer;
|
||||
color: $red;
|
||||
}
|
||||
|
||||
// Stress and Trauma
|
||||
|
||||
.big-teeth-section {
|
||||
|
|
@ -412,341 +266,11 @@ $hover-brightness: 0.8;
|
|||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
$coin_size: 15px;
|
||||
$coin_margin: 3px;
|
||||
@import "coins.scss";
|
||||
|
||||
.coins {
|
||||
@include custom_radio_square($coin_size);
|
||||
flex-wrap: wrap;
|
||||
|
||||
input ~ label {
|
||||
margin-right: $coin_margin;
|
||||
margin-bottom: $coin_margin;
|
||||
|
||||
&[for$="0"] {
|
||||
border-width: 2px;
|
||||
}
|
||||
|
||||
@include changeable($transition-period, $hover-brightness, $hover-opacity);
|
||||
}
|
||||
|
||||
&.coins-hands {
|
||||
width: 36px;
|
||||
}
|
||||
|
||||
&.coins-stashed {
|
||||
width: 190px;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
// Crew Coins
|
||||
.crew-coins {
|
||||
@include custom_radio_square($coin_size);
|
||||
flex-wrap: wrap;
|
||||
max-width: 4 * ($coin_size + $coin_margin);
|
||||
|
||||
label {
|
||||
margin-right: $coin_margin;
|
||||
margin-bottom: $coin_margin;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Reputation
|
||||
#crew-reputation {
|
||||
border-top: 3px solid $almost_black;
|
||||
@include toothradio(17px, 50px, "assets/teeth/stresstooth-halfgrey.png", "assets/teeth/stresstooth-red.png");
|
||||
|
||||
input[disabled="disabled"] + label {
|
||||
background-image: url(assets/teeth/stresstooth-black.png);
|
||||
}
|
||||
}
|
||||
|
||||
// Turfs.
|
||||
|
||||
#turf-container {
|
||||
overflow-x: scroll;
|
||||
overflow-y: clip;
|
||||
}
|
||||
|
||||
#turf-list {
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 855px;
|
||||
|
||||
.turf-row {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
|
||||
*:first-child {
|
||||
margin-left: 0px;
|
||||
}
|
||||
*:last-child {
|
||||
margin-right: 0px;
|
||||
}
|
||||
}
|
||||
|
||||
&.section-non-editable {
|
||||
.turf-block {
|
||||
@include turf_block(130px, 100px);
|
||||
}
|
||||
}
|
||||
|
||||
&.section-editable {
|
||||
.turf-block {
|
||||
@include turf_block(130px, 125px);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#crew-hold {
|
||||
border-top: 3px solid $almost_black;
|
||||
@include toothradio_single(17px, 50px, "assets/teeth/stresstooth-halfgrey.png", "assets/teeth/stresstooth-red.png");
|
||||
width: 221px;
|
||||
}
|
||||
|
||||
#crew-tier {
|
||||
|
||||
background-color: $gray;
|
||||
height: 33px;
|
||||
width: 145px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
border-top: 3px solid $almost_black;
|
||||
|
||||
@include custom_radio_round(18px, gray, $almost_white, $almost_black);
|
||||
|
||||
> * {
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
#heat-wanted {
|
||||
justify-content: none;
|
||||
}
|
||||
|
||||
.experience-clues-container {
|
||||
width: 340px;
|
||||
font-size: 12px;
|
||||
|
||||
.experience-clues-description {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.experience-clues {
|
||||
font-style: italic;
|
||||
}
|
||||
}
|
||||
|
||||
.class-name {
|
||||
width: 512px;
|
||||
height: 120px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-around;
|
||||
font-size: 48px;
|
||||
text-transform: uppercase;
|
||||
border: 3px solid $almost_black;
|
||||
|
||||
.big-name {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.big-description {
|
||||
font-size: 20px;
|
||||
color: $almost_black;
|
||||
}
|
||||
}
|
||||
|
||||
// Cohorts styling
|
||||
.edgeflaw {
|
||||
|
||||
input {
|
||||
display: none;
|
||||
|
||||
&:checked {
|
||||
|
||||
& + label {
|
||||
color: $red;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
#gang-expert-type-selector {
|
||||
|
||||
#gang-type-boxes {
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
}
|
||||
|
||||
.cohorts {
|
||||
flex-wrap: wrap;
|
||||
|
||||
.cohort-block-wrapper {
|
||||
width: 400px;
|
||||
}
|
||||
.label-stripe {
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
|
||||
.cohort-body {
|
||||
> div {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.cohort-block-harm {
|
||||
|
||||
justify-content: space-around;
|
||||
|
||||
input[type="radio"] {
|
||||
display: none;
|
||||
|
||||
&:checked + label {
|
||||
color: $almost_white;
|
||||
font-weight: bold;
|
||||
background-color: $almost_black;
|
||||
}
|
||||
}
|
||||
|
||||
label {
|
||||
border: 2px solid $almost_black;
|
||||
border-top: none;
|
||||
padding: 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Add Items modal styling.
|
||||
#items-to-add {
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-around;
|
||||
|
||||
input[type="radio"],
|
||||
input[type="checkbox"] {
|
||||
display: none;
|
||||
|
||||
&:checked + label {
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Tooltip.
|
||||
.tooltip {
|
||||
|
||||
.tooltiptext {
|
||||
visibility: hidden;
|
||||
width: 200px;
|
||||
background-color: $almost_black;
|
||||
color: $almost_white;
|
||||
text-align: center;
|
||||
padding: 5px;
|
||||
border-radius: 6px;
|
||||
|
||||
// Position
|
||||
position: absolute;
|
||||
z-index: 9999;
|
||||
}
|
||||
|
||||
&:hover .tooltiptext {
|
||||
visibility: visible;
|
||||
}
|
||||
}
|
||||
|
||||
.blades-die-tooltip {
|
||||
|
||||
.die {
|
||||
font-weight: bold;
|
||||
text-transform: capitalize;
|
||||
font-size: large;
|
||||
|
||||
&.critical-success {
|
||||
color: $light_green;
|
||||
}
|
||||
|
||||
&.success {
|
||||
color: $green;
|
||||
}
|
||||
|
||||
&.partial-success {
|
||||
color: $blue;
|
||||
}
|
||||
|
||||
&.failure {
|
||||
color: $red;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.clock-zero-label {
|
||||
color: $almost_black;
|
||||
}
|
||||
|
||||
.clock-block {
|
||||
.clocks {
|
||||
&.clocks-4 {
|
||||
@include clock(4, 200);
|
||||
}
|
||||
&.clocks-6 {
|
||||
@include clock(6, 200);
|
||||
}
|
||||
&.clocks-8 {
|
||||
@include clock(8, 200);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.clock-block .blades-clock-name-type {
|
||||
> * {
|
||||
margin-bottom: 0px;
|
||||
max-width: 220px;
|
||||
}
|
||||
}
|
||||
|
||||
i {
|
||||
&.nullifier {
|
||||
@include changeable($transition-period, $hover-brightness, $hover-opacity, $red);
|
||||
}
|
||||
}
|
||||
|
||||
#loadout {
|
||||
select {
|
||||
appearance: none;
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
box-shadow: none;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
background: url("data:image/svg+xml;utf8,<svg fill='white' height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/><path d='M0 0h24v24H0z' fill='none'/></svg>") no-repeat right;
|
||||
padding: 0 20px 0 0;
|
||||
margin: 0.1em -6px 0 0;
|
||||
background-color: $almost_black;
|
||||
font-family: Georgia, "Bitstream Charter", "Times New Roman", serif;
|
||||
font-size: 14px;
|
||||
font-weight: bold;
|
||||
text-transform: uppercase;
|
||||
color: white;
|
||||
text-align: right;
|
||||
|
||||
option {
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
|
||||
select:hover {
|
||||
color: red;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -14,4 +14,26 @@
|
|||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
|
||||
//Tooltip.
|
||||
.tooltip {
|
||||
|
||||
.tooltiptext {
|
||||
visibility: hidden;
|
||||
width: 200px;
|
||||
background-color: $almost_black;
|
||||
color: $almost_white;
|
||||
text-align: center;
|
||||
padding: 5px;
|
||||
border-radius: 6px;
|
||||
|
||||
// Position
|
||||
position: absolute;
|
||||
z-index: 9999;
|
||||
}
|
||||
|
||||
&:hover .tooltiptext {
|
||||
visibility: visible;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -11,10 +11,17 @@ textarea {
|
|||
}
|
||||
}
|
||||
|
||||
section.flex {
|
||||
margin-bottom: 10px;
|
||||
.rollable-text {
|
||||
transition: color $transition-period;
|
||||
}
|
||||
.rollable-text:hover {
|
||||
cursor: pointer;
|
||||
color: $red;
|
||||
}
|
||||
|
||||
section {
|
||||
display: flex;
|
||||
//flex-direction: column;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
|
||||
> *:not(.label-stripe) {
|
||||
|
|
@ -39,14 +46,6 @@ section.flex {
|
|||
}
|
||||
}
|
||||
|
||||
|
||||
.tab[data-tab]{
|
||||
display: none;
|
||||
&.active{
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
.flex-horizontal {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
|
|
@ -57,6 +56,13 @@ section.flex {
|
|||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.tab[data-tab]{
|
||||
display: none;
|
||||
&.active{
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
.black-label {
|
||||
background-color: $almost_black;
|
||||
color: $almost_white;
|
||||
|
|
|
|||
|
|
@ -27,6 +27,7 @@ $hover-brightness: 0.8;
|
|||
font-family: "Crimson Text", serif;
|
||||
|
||||
@import 'import/general-styles.scss';
|
||||
@import 'import/clocks.scss';
|
||||
|
||||
&.crew.sheet{
|
||||
@import 'import/crew-sheet.scss';
|
||||
|
|
@ -37,7 +38,6 @@ $hover-brightness: 0.8;
|
|||
}
|
||||
|
||||
&.actor.clock{
|
||||
@import 'import/clock-sheet';
|
||||
}
|
||||
|
||||
&.item.sheet{
|
||||
|
|
@ -48,7 +48,7 @@ $hover-brightness: 0.8;
|
|||
//top-level styles
|
||||
@import 'import/chat.scss';
|
||||
@import 'import/dialogs.scss';
|
||||
@import 'import/tooltip.scss';
|
||||
//@import 'import/tooltip.scss';
|
||||
|
||||
//
|
||||
//// Colors
|
||||
|
|
|
|||
1171
styles/blades.css
1171
styles/blades.css
File diff suppressed because it is too large
Load diff
File diff suppressed because one or more lines are too long
|
|
@ -1,8 +1,10 @@
|
|||
<form class="{{cssClass}} actor-sheet" autocomplete="off">
|
||||
|
||||
<section id="name-alias" class="flex-horizontal">
|
||||
<section id="{{actor._id}}-name-alias" class="flex-horizontal name-alias">
|
||||
|
||||
<img src="{{actor.img}}" data-edit="img" title="{{actor.name}}" height="100" width="100"/>
|
||||
<div class="grow-two">
|
||||
<img src="{{actor.img}}" data-edit="img" title="{{actor.name}}" class="portrait" />
|
||||
</div>
|
||||
|
||||
<div class="grow-two">
|
||||
<div id="name">
|
||||
|
|
@ -87,7 +89,7 @@
|
|||
</section>
|
||||
|
||||
{{!-- Experience --}}
|
||||
<section class="experience">
|
||||
<section class="flex experience">
|
||||
</section>
|
||||
{{!-- Stress and Trauma --}}
|
||||
<div id="stress-trauma" class="section big-teeth-section">
|
||||
|
|
@ -160,7 +162,7 @@
|
|||
</div>
|
||||
|
||||
{{!-- Harm, Healing and Armor --}}
|
||||
<section id="harm-armor">
|
||||
<section id="harm-armor" class="flex>
|
||||
<div id="character-harm">
|
||||
<table>
|
||||
<thead>
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@
|
|||
</header>
|
||||
|
||||
{{!-- Sheet Body --}}
|
||||
<section class="sheet-body">
|
||||
<section class="sheet-body flex">
|
||||
{{editor content=data.description target="data.description" button=true owner=owner editable=editable}}
|
||||
</section>
|
||||
<div class="flex-vertical">
|
||||
|
|
|
|||
|
|
@ -110,7 +110,7 @@
|
|||
</div>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<section class="flex">
|
||||
<input id="cohort-armor" type="checkbox" name="data.armor" value="{{data.armor}}" {{checked data.armor}}>
|
||||
<label for="cohort-armor">{{localize "BITD.Armor"}}</label>
|
||||
</section>
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@
|
|||
</header>
|
||||
|
||||
{{!-- Sheet Body --}}
|
||||
<section class="sheet-body">
|
||||
<section class="sheet-body flex">
|
||||
{{editor content=data.description target="data.description" button=true owner=owner editable=editable}}
|
||||
</section>
|
||||
|
||||
|
|
|
|||
Reference in a new issue