Super VJ Update

This commit is contained in:
Kakeman89 2020-09-11 17:11:11 -04:00
parent 442212bdea
commit 1983b74bde
59 changed files with 4640 additions and 2462 deletions

View file

@ -1,58 +1,73 @@
@import "./variables.less";
@actorNameHeight: 60px;
.sw5e.sheet.actor {
/* ----------------------------------------- */
/* Sheet Header */
/* ----------------------------------------- */
.sheet-header {
.charlevel {
// Portrait Artwork
img.profile {
flex: 0 0 160px;
height: 60px;
margin: 0;
padding: 5px;
text-align: right;
.level {
width: 100%;
height: 30px;
font-size: 20px;
line-height: 30px;
label {
display: inline;
font-size: 24px;
text-align: right;
}
input {
display: inline;
width: 36px;
font-size: 24px;
text-align: center;
}
// If the Experience Bar is disabled
&.noxp {
margin-top: 10px;
> label {
font-size: 32px;
}
> input {
font-size: 32px;
flex: 0 0 40px;
height: 44px;
}
}
max-width: 160px;
height: 160px;
}
// Character Name
h1.charname {
flex: 1;
height: @actorNameHeight;
padding: 0;
input {
height: @actorNameHeight - 20px;
margin: 10px 0;
}
}
.experience {
width: 100%;
height: 20px;
padding-right: 5px;
font-size: 16px;
color: @colorOlive;
// Character Level
.header-exp {
flex: 0 0 150px;
margin-right: 3px;
height: @actorNameHeight;
justify-content: flex-end;
text-align: right;
}
// Character Summary
.summary {
height: 30px;
border-bottom: @borderGroove;
font-size: 18px;
input, span {
display: block;
height: 24px;
line-height: 24px;
}
}
// Primary Attributes
.attributes {
flex: 0 0 100%;
margin: 0;
.attribute {
height: 70px;
margin: 0;
border: none;
border-right: @borderGroove;
border-radius: 0;
&:last-child {
border-right: none;
}
.attribute-value {
height: 30px;
line-height: 30px;
}
}
}
}
@ -69,55 +84,55 @@
// Box Headers
h4.box-title {
height: 18px;
line-height: 16px;
margin: 4px 8px 2px;
.modesto();
font-size: 18px;
border-bottom: 1px solid @colorBeige;
color: @colorOlive;
border-bottom: 1px solid @colorFaint;
}
/* ----------------------------------------- */
/* Attributes */
/* ----------------------------------------- */
.tab.attributes {
overflow: hidden;
}
ul.attributes {
flex: 0 0 60px;
list-style: none;
margin: 5px 0 0;
margin: 0;
padding: 0;
li.attribute {
height: 70px;
margin: 0 5px;
height: 60px;
margin: 0 5px 0 0;
border: @borderGroove;
border-radius: 4px;
.nodesto();
text-align: center;
.attribute-name {
flex: 0 0 18px;
&:last-child {
margin: 0;
}
.attribute-value {
display: flex;
justify-content: center;
align-items: center;
height: 28px;
line-height: 28px;
.modesto();
input {
display: inline;
max-width: 80%;
height: 28px;
margin: 0;
> * {
font-weight: 400;
font-size: 24px;
}
span.sep {
display: inline;
position: relative;
top: 2px;
font-size: 28px;
color: @colorTan;
}
&.multiple {
input { max-width: 33%; }
&.multiple input {
flex: 0 0 33%;
}
}
@ -125,8 +140,9 @@
flex: 0 0 18px;
margin-top: -1px;
line-height: 18px;
font-family: "Signika", "Palatino Linotype", serif;
font-family: "Signika", sans-serif;
font-size: 12px;
font-weight: 400;
}
}
}
@ -136,22 +152,28 @@
/* ----------------------------------------- */
.ability-scores {
flex: 0 0 100%;
flex: 0 0 100px;
height: 440px;
list-style: none;
margin: 0;
padding: 0;
.nodesto();
.modesto();
border: @borderGroove;
border-radius: 3px;
.ability {
height: 70px;
margin: 0 5px;
text-align: center;
border: @borderGroove;
border-radius: 3px;
border-bottom: @borderGroove;
&:last-child {
border-bottom: none;
margin-bottom: -3px;
}
input.ability-score {
height: 30px;
width: 50px;
width: 36px;
margin: 0 auto;
line-height: 32px;
font-size: 24px;
@ -159,12 +181,14 @@
.ability-modifiers {
height: 24px;
margin: -10px 0 0;
margin: -8px 0 0;
span.ability-mod,
span.ability-save {
flex: 0 0 24px;
height: 24px;
height: 22px;
line-height: 22px;
font-size: 16px;
border-top: @borderGroove;
}
@ -180,12 +204,6 @@
border-left: @borderGroove;
}
}
/* Hide modifier box on hover */
input.ability-score:hover + .ability-modifiers {
visibility: hidden;
}
}
}
@ -209,16 +227,21 @@
/* ----------------------------------------- */
ul.skills-list {
flex: 0 0 192px;
flex: 0 0 180px;
height: 440px;
list-style: none;
margin: 5px 5px 0;
padding: 2px 2px 0;
margin: 0 5px 0;
padding: 3px 0 2px;
border: @borderGroove;
border-radius: 3px;
li.skill {
height: 22px;
padding: 3px 0;
height: 24px;
padding: 3px 2px;
&:nth-child(even) {
background: rgba(0, 0, 0, 0.05);
}
h4 {
flex: 1px;
@ -234,6 +257,7 @@
.skill-ability {
flex: 0 0 26px;
text-transform: capitalize;
}
.skill-mod {
@ -253,23 +277,25 @@
/* ----------------------------------------- */
.counters {
flex: 0 0 100%;
flex: none;
padding: 5px 0;
margin: 0;
border-bottom: @borderGroove;
margin-bottom: 5px;
.counter {
padding: 0 3px;
line-height: 32px;
height: 20px;
line-height: 20px;
h4 {
flex: auto;
margin: 0;
.nodesto();
font-size: 14px;
font-size: 13px;
font-weight: bold;
color: @colorOlive;
}
.counter-value {
flex: 0 0 50px;
flex: none;
text-align: right;
> * {
display: inline;
@ -286,12 +312,13 @@
input[type="checkbox"] {
position: relative;
width: 16px;
height: 16px;
margin: 0;
top: 6px;
top: 4px;
}
span.sep {
margin: 0 -2px;
font-size: 12px;
}
}
@ -301,28 +328,31 @@
/* Traits */
/* ----------------------------------------- */
.traits {
margin: 0 5px;
.center-pane {
height: 100%;
padding: 0 5px 0 3px;
overflow-y: auto;
scrollbar-width: thin;
}
.traits {
.form-group, .form-group-stacked {
margin: 0 0 4px 0;
margin: 0 0 3px 0;
justify-content: space-between;
}
.configure-flags {
flex: 1;
}
.actor-size {
flex: 0 0 150px;
}
label {
flex: 0 0 150px;
flex: none;
line-height: 20px;
font-weight: bold;
margin: 0;
margin: 0 10px 0 0;
}
select {
max-width: 200px;
}
input {
@ -360,18 +390,10 @@
.inventory-filters {
margin: 0 8px;
flex: 0 0 20px;
h3, .filter-title {
.nodesto();
color: @colorOlive;
font-size: 18px;
margin: 0;
}
&.powerbook-filters {
flex: 0 0 40px;
}
justify-content: flex-end;
.currency {
flex: 0 0 100%;
list-style: none;
margin: 4px 0 8px;
padding: 0;
@ -398,6 +420,7 @@
margin: 0;
padding: 0 5px;
overflow-y: auto;
scrollbar-width: thin;
// Inventory Item
.item {
@ -424,12 +447,12 @@
overflow-x: hidden;
}
&.rollable .item-image:hover {
background-image: url("/icons/svg/d20-black.svg") !important;
}
&.rollable:hover .item-image {
background-image: url("/icons/svg/d20-grey.svg") !important;
}
&.rollable .item-image:hover {
background-image: url("/icons/svg/d20-black.svg") !important;
}
i.attuned {
color: @colorTan;
@ -453,6 +476,7 @@
text-align: right;
font-size: 11px;
color: @colorTan;
white-space: nowrap;
}
}
@ -468,8 +492,8 @@
h3 {
margin: 0 -5px 0 0;
padding-left: 5px;
font-size: 13px;
font-weight: bold;
.modesto();
font-size: 16px;
}
.item-controls a.item-create {
@ -484,6 +508,10 @@
color: @colorTan;
text-align: center;
border-right: 1px solid @colorFaint;
word-break: break-word;
white-space: nowrap;
overflow: hidden;
&:last-child { border-right: none; }
&.item-action {flex: 0 0 100px}
}
@ -524,15 +552,77 @@
}
}
/* Encumbrance Bar */
.encumbrance {
flex: 0 0 12px;
background: @colorTan;
margin: 1px 15px 0 1px;
border: 1px solid @colorDark;
border-radius: 3px;
position: relative;
.encumbrance-bar {
position: absolute;
top: 1px;
left: 1px;
background: #6c8aa5;
height: 8px;
border: 1px solid #cde4ff;
border-radius: 2px;
}
.encumbrance-label {
height: 10px;
padding: 0 5px;
position: absolute;
top: 0;
right: 0;
font-size: 13px;
line-height: 12px;
text-align: right;
color: #EEE;
text-shadow: 0 0 5px #000;
}
.encumbrance-breakpoint {
display: block;
position: absolute;
&.encumbrance-33 { left: 33% }
&.encumbrance-66 { left: 66% }
}
.arrow-up {
bottom: 0;
width: 0;
height: 0;
border-left: 4px solid transparent;
border-right: 4px solid transparent;
border-bottom: 4px solid #666;
}
.arrow-down {
top: 0;
width: 0;
height: 0;
border-left: 4px solid transparent;
border-right: 4px solid transparent;
border-top: 4px solid #666;
}
&.encumbered {
.arrow-up { border-bottom: 4px solid #000; }
.arrow-down { border-top: 4px solid #000; }
}
}
/* ----------------------------------------- */
/* Powerbook */
/* ----------------------------------------- */
.powercasting-ability {
h3 {
flex: none;
margin-right: 5px;
}
flex: 0 0 240px;
margin: 0;
input, span {
flex: 0 0 32px;
text-align: center;
@ -549,7 +639,7 @@
.power-slots,
.power-comps {
flex: 0 0 72px;
flex: 0 0 75px;
padding-right: 5px;
text-align: right;
font-size: 12px;
@ -558,10 +648,13 @@
}
.power-slots {
input, span.sep {
input {
display: inline;
max-width: 20px;
text-align: center;
}
.sep {
font-size: 13px;
font-weight: normal;
}
}

View file

@ -5,14 +5,14 @@
@detailsHeight: 40px;
/* ----------------------------------------- */
/* All SW5e Apps */
/* All DnD5e Apps */
/* ----------------------------------------- */
.sw5e {
.window-content {
background: @sheetBackground;
font-size: 13px;
color: @colorDark
color: @colorDark;
}
/* ----------------------------------------- */
@ -56,20 +56,27 @@
}
// Checkbox Labels
// TODO: THIS CAN BE MOSTLY REMOVED NOW THAT IT IS IN CORE, see core forms.less
label.checkbox {
flex: auto;
padding: 0;
margin: 0;
line-height: 20px;
height: 22px;
line-height: 22px;
font-size: 11px;
text-align: right;
input[type="checkbox"] {
height: auto;
margin: 0 5px 0;
> input[type="checkbox"] {
width: 16px;
height: 16px;
margin: 0 2px 0 0;
position: relative;
top: 3px;
top: 4px;
}
&.right > input[type="checkbox"] {
margin: 0 0 0 2px;
}
}
/* Form Groups */
.form-group {
label {
@ -101,11 +108,10 @@
// Form Headers
.form-header {
margin: 0 0 0.25em 0;
padding: 0 2px;
.nodesto();
font-size: 24px;
padding: 2px 0;
border-top: @borderGroove;
border-bottom: @borderGroove;
.modesto();
}
/* Tags */
@ -175,6 +181,16 @@
cursor: pointer;
}
// Separators
span.sep {
flex: none;
margin: 0 1px;
display: inline;
position: relative;
color: @colorTan;
font-weight: normal;
}
/* ----------------------------------------- */
/* TinyMCE */
/* ----------------------------------------- */
@ -190,10 +206,14 @@
/* ----------------------------------------- */
/* Sheet Header */
/* ----------------------------------------- */
.sheet-header {
flex: 0 0 @headerHeight;
border-bottom: @borderGroove;
.nodesto();
.header-details {
.modesto();
}
/* Character Name */
h1 {
@ -204,8 +224,10 @@
padding: 5px;
input {
display: block;
height: 50px;
font-size: 36px;
font-size: 32px;
margin: 0;
}
}
@ -214,7 +236,7 @@
flex: 0 0 @headerHeight;
max-width: @headerHeight;
height: @headerHeight;
object-fit: cover;
object-fit: contain;
border: none;
border-right: @borderGroove;
}
@ -230,11 +252,10 @@
border-bottom: none;
li {
width: 33.33%;
height: calc(100% - 6px);
float: left;
height: @detailsHeight - 6px;
margin: 2px 0;
padding: 0 3px;
padding: 0;
border-right: @borderGroove;
line-height: 34px;
color: @colorOlive;
@ -253,7 +274,7 @@
.sheet-navigation {
flex: 0 0 @navHeight;
margin-bottom: 5px;
.nodesto();
.modesto();
.item {
height: 30px;
@ -285,18 +306,25 @@
margin: 0;
padding: 0;
line-height: 16px;
max-width: 70%;
.filter-title {
flex: 3;
.filter-icon {
flex: none;
font-size: 14px;
color: @colorTan;
}
.filter-item {
text-align: center;
font-size: 12px;
margin: 0 6px;
margin: 0 6px 0 0;
border-bottom: 3px solid @colorBeige;
white-space: nowrap;
&:last-child {
margin: 0;
}
&:hover {
text-shadow: 0 0 4px red;
border-bottom: 3px solid @colorTan;
@ -312,19 +340,23 @@
/* Trait Lists */
/* ----------------------------------------- */
.trait-selector {
flex: 0 0 16px;
padding: 2px 0;
color: #999;
font-size: 10px;
}
.traits {
margin: 5px 0 0;
.traits-list {
line-height: 20px;
list-style: none;
margin: 0;
padding: 0;
text-align: right;
.trait-selector {
flex: 0 0 16px;
padding: 2px 0;
color: #999;
font-size: 10px;
}
.traits-list {
flex: 0 0 100%;
line-height: 20px;
list-style: none;
margin: 0;
padding: 0;
}
}
}

View file

@ -4,8 +4,8 @@
/* Basic Structure */
/* ----------------------------------------- */
.sw5e.sheet.actor.character {
min-width: 680px;
min-height: 736px;
min-width: 720px;
min-height: 680px;
/* ----------------------------------------- */
/* Sheet Header */
@ -13,93 +13,73 @@
.sheet-header {
// Character Profile image (larger than usual)
// Character Profile image (larger)
img.profile {
flex: 0 0 180px;
max-width: 180px;
height: 180px;
flex: 0 0 160px;
max-width: 160px;
height: 160px;
}
// Character level and experience bar
// Character Level
.charlevel {
flex: 0 0 180px;
padding: 0 5px 2px;
flex: 0 0 20px;
height: 20px;
font-size: 18px;
color: @colorTan;
white-space: nowrap;
}
.level {
height: 28px;
// Experience Tracking
.experience {
flex: 0 0 32px;
margin-bottom: -5px;
align-items: center;
font-size: 18px;
span.max {
color: @colorTan;
flex: none;
margin-left: 3px;
}
.experience {
input[type="text"] {
width: 100px;
}
}
.xpbar {
width: 100%;
flex: 0 0 8px;
background: #666;
}
.xpbar {
flex: 0 0 8px;
width: 100%;
margin-bottom: 5px;
background: @colorTan;
border: 1px solid #000;
border-radius: 3px;
.bar {
height: 4px;
margin: 1px;
display: block;
background: #afebff;
border: 1px solid #000;
border-radius: 3px;
.bar {
height: 4px;
margin: 1px;
display: block;
background: #afebff;
border: 1px solid #000;
border-radius: 2px;
}
border-radius: 2px;
}
}
// Character Summary
.summary {
border-bottom: @borderGroove;
}
// Primary Attributes
// Header Attributes
.attributes {
height: 80px;
margin: 0;
.attribute {
height: 80px;
margin: 0;
border: none;
border-right: @borderGroove;
border-radius: 0;
&:last-child {
border-right: none;
}
.attribute-value {
margin: 5px 0 0;
height: 32px;
line-height: 32px;
}
.attribute-name {
margin-top: 6px;
}
.attribute-footer {
margin-bottom: 2px;
}
}
a.rest {
border: 1px solid @colorBeige;
border-radius: 2px;
background: rgba(0, 0, 0, 0.05);
padding: 1px 3px;
margin: 0 6px;
padding: 0 3px;
margin: 0 3px;
}
.hit-dice {
font-size: 24px;
}
.initiative .attribute-footer input {
width: 32px;
}
}
.summary .proficiency {
text-align: right;
padding-right: 5px;
}
}
@ -107,26 +87,24 @@
/* Sheet Body */
/* ----------------------------------------- */
.attributes {
.resource {
.attribute-name {
margin: 0 8px;
input[type="text"] {
height: 20px;
margin: 2px 0 -2px;
line-height: 24px;
}
}
label.checkbox {
margin: 0 3px;
input[type="checkbox"] {
transform: scale(1.2);
}
}
// Custom Resources
.resource .attribute-value {
input {
flex: 0 0 25%;
}
.initiative .attribute-footer input {
width: 32px;
label.recharge {
height: 32px;
position: relative;
font-family: "Signika", sans-serif;
font-size: 11px;
text-align: center;
color: @colorOlive;
input[type="checkbox"] {
height: 14px;
width: 14px;
margin: 0;
top: -6px;
}
}
}
@ -143,88 +121,12 @@
}
}
.counters {
.death-saves {
flex: 2;
.counter-value {
flex: 0 0 90px;
}
}
}
.item-detail.player-class {
flex: 0 0 180px;
text-align: right;
padding-right: 10px;
}
/* ----------------------------------------- */
/* Inventory */
/* ----------------------------------------- */
/* Encumbrance Bar */
.encumbrance {
flex: 0 0 12px;
background: @colorTan;
margin: 1px 15px 0 1px;
border: 1px solid @colorDark;
border-radius: 3px;
position: relative;
.encumbrance-bar {
position: absolute;
top: 1px;
left: 1px;
background: #6c8aa5;
height: 8px;
border: 1px solid #cde4ff;
border-radius: 2px;
}
.encumbrance-label {
height: 10px;
padding: 0 5px;
position: absolute;
top: 0;
right: 0;
font-size: 13px;
line-height: 12px;
text-align: right;
color: #EEE;
text-shadow: 0 0 5px #000;
}
.encumbrance-breakpoint {
display: block;
position: absolute;
&.encumbrance-33 { left: 33% }
&.encumbrance-66 { left: 66% }
}
.arrow-up {
bottom: 0;
width: 0;
height: 0;
border-left: 4px solid transparent;
border-right: 4px solid transparent;
border-bottom: 4px solid #666;
}
.arrow-down {
top: 0;
width: 0;
height: 0;
border-left: 4px solid transparent;
border-right: 4px solid transparent;
border-top: 4px solid #666;
}
&.encumbered {
.arrow-up { border-bottom: 4px solid #000; }
.arrow-down { border-top: 4px solid #000; }
}
}
/* ----------------------------------------- */
/* Item Controls */
/* ----------------------------------------- */

View file

@ -22,7 +22,7 @@
flex: 1;
margin: 0;
line-height: 36px;
.nodesto();
.bungeeInline();
color: @colorOlive;
&:hover {
color: #111;

View file

@ -192,7 +192,26 @@
text-align: right;
color: @colorTan;
}
.recharge.form-group {
span {
text-align: right;
padding-right: 3px;
}
input[type="text"] {
flex: 0 0 32px;
text-align: center;
}
label.checkbox {
flex: none;
input {
width: 16px;
height: 16px;
top: 4px;
}
}
}
h4.armorproperties-header {
margin: 0;
padding: 0;
@ -263,16 +282,6 @@
color: @colorTan;
}
.recharge {
span {
flex: 0 0 80px;
}
label.checkbox {
flex: 0 0 80px;
text-align: right;
}
}
/* ----------------------------------------- */
/* Item Actions */
/* ----------------------------------------- */

View file

@ -5,5 +5,37 @@
/* ----------------------------------------- */
.sw5e.sheet.actor.npc {
min-width: 600px;
min-height: 658px;
min-height: 680px;
.header-exp {
flex: 0 0 80px;
justify-content: center;
.cr {
flex: 0 0 32px;
line-height: 28px;
margin-bottom: -5px;
font-size: 24px;
input {
width: 32px;
padding: 0;
text-align: center;
}
}
.experience {
flex: 0 0 18px;
color: @colorTan;
font-size: 16px;
}
}
.summary {
font-size: 18px;
}
.powercasting-ability {
label {
flex: none;
}
}
}

View file

@ -5,3 +5,4 @@
@import "chat.less";
@import "character.less";
@import "npc.less";
@import "vehicle.less";

View file

@ -7,13 +7,41 @@
/* Fonts */
/* ----------------------------------------- */
/* russo-one-regular - latin */
@font-face {
font-family: "Nodesto";
src: url("fonts/NodestoCapsCondensed.otf");
font-family: 'Russo One';
font-style: normal;
font-weight: 400;
src: url('./fonts/RussoOne.ttf');
}
.nodesto {
font-family: "Nodesto", "Signika", "Palatino Linotype", serif;
.russoOne {
font-family: 'Russo One';
font-size: 20px;
font-weight: 400;
}
/* bungee-inline-regular - latin */
@font-face {
font-family: 'Bungee Inline';
font-style: normal;
font-weight: 400;
src: url('./fonts/BungeeInline.ttf');
}
.bungeeInline {
font-family: 'Bungee Inline';
font-size: 20px;
font-weight: 400;
}
/* open-sans-regular - latin */
@font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 400;
src: url('./fonts/OpenSans-Regular.ttf');
}
.openSans {
font-family: 'Open Sans';
font-size: 20px;
font-weight: 400;
}
/* ----------------------------------------- */

32
less/vehicle.less Normal file
View file

@ -0,0 +1,32 @@
.sw5e.sheet.actor.vehicle {
.features {
.item-controls {
flex: 0 0 68px;
.item-toggle {
color: #b5b3a4;
&.active {
color: #4b4a44;
}
}
}
}
.counters {
.counter.creature-cap {
.counter-value {
flex: 1;
}
input {
max-width: none;
text-align: right;
}
}
.counter.cargo-cap {
input {
max-width: 40px;
text-align: right;
}
}
}
}