Merge branch 'master' into professorbunbury-sw5e

less/actors.less

@@ -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,54 @@
 
   // Box Headers
   h4.box-title {
+    height: 18px;
     line-height: 16px;
     margin: 4px 8px 2px;
-    font-size: 18px;
-    border-bottom: 1px solid @colorBeige;
+    .russoOne(14px);
+    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;
+        .russoOne();
 
-        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 +139,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 +151,28 @@
   /* ----------------------------------------- */
 
   .ability-scores {
-    flex: 0 0 100%;
+    flex: 0 0 100px;
+    height: 440px;
     list-style: none;
     margin: 0;
     padding: 0;
-    .nodesto();
+    .russoOne();
+    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 +180,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 +203,6 @@
           border-left: @borderGroove;
         }
       }
-
-      /* Hide modifier box on hover */
-
-      input.ability-score:hover + .ability-modifiers {
-        visibility: hidden;
-      }
     }
   }
 
@@ -209,16 +226,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 +256,7 @@
 
       .skill-ability {
         flex: 0 0 26px;
+        text-transform: capitalize;
       }
 
       .skill-mod {
@@ -253,45 +276,47 @@
   /* ----------------------------------------- */
 
   .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;
         }
       }
 
-      input[type="text"] {
+      input[type="text"],
+      input[type="number"] {
         height: 20px;
         max-width: 20px;
         margin: 0;
         padding: 0;
         text-align: center;
       }
-
       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 +326,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 +388,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 +418,8 @@
     margin: 0;
     padding: 0 5px;
     overflow-y: auto;
+    scrollbar-width: thin;
+    color: @colorTan;
 
     // Inventory Item
     .item {
@@ -424,11 +446,11 @@
           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;
+          background-image: url("../../icons/svg/d20-grey.svg") !important;
+        }
+        &.rollable .item-image:hover {
+          background-image: url("../../icons/svg/d20-black.svg") !important;
         }
 
         i.attuned {
@@ -453,6 +475,7 @@
         text-align: right;
         font-size: 11px;
         color: @colorTan;
+        white-space: nowrap;
       }
     }
 
@@ -460,6 +483,7 @@
     .inventory-header {
       margin: 2px 0;
       padding: 0;
+      align-items: center;
       background: rgba(0, 0, 0, 0.05);
       border: @borderGroove;
       font-weight: bold;
@@ -468,8 +492,8 @@
       h3 {
         margin: 0 -5px 0 0;
         padding-left: 5px;
-        font-size: 13px;
-        font-weight: bold;
+        .russoOne();
+        font-size: 16px;
       }
 
       .item-controls a.item-create {
@@ -477,6 +501,11 @@
       }
     }
 
+    // Item names
+    .item-name {
+      color: @colorDark;
+    }
+
     // Item Detail Sections
     .item-detail {
       flex: 0 0 70px;
@@ -484,6 +513,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 +557,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 +644,7 @@
 
   .power-slots,
   .power-comps {
-    flex: 0 0 72px;
+    flex: 0 0 75px;
     padding-right: 5px;
     text-align: right;
     font-size: 12px;
@@ -558,10 +653,13 @@
   }
 
   .power-slots {
-    input, span.sep {
+    input {
       display: inline;
       max-width: 20px;
-      text-align: center;
+    }
+    .sep {
+      font-size: 13px;
+      font-weight: normal;
     }
   }
 
@@ -595,6 +693,44 @@
   // Empty powerbook controls
   .powerbook-empty .item-controls { flex: 1; }
 
+  /* ----------------------------------------- */
+  /*  Active Effects                           */
+  /* ----------------------------------------- */
+
+  .effects {
+    .effect-name{
+      flex: 2;
+      align-items: center;
+      color: @colorDark;
+      h4 { margin: 0; }
+    }
+
+    .effect-icon {
+      flex: 0 0 30px;
+      height: 30px;
+      margin-right: 5px;
+      border: none;
+    }
+
+    .effect-source,
+    .effect-duration {
+      text-align: center;
+      border-left: 1px solid @colorFaint;
+      border-right: 1px solid @colorFaint;
+    }
+
+    .effect-controls {
+      flex: 0 0 60px;
+      text-align: right;
+    }
+
+    .effect {
+      align-items: center;
+      border-bottom: 1px solid @colorFaint;
+      &:last-child { border-bottom: none; }
+    }
+  }
+
   /* ----------------------------------------- */
   /*  TinyMCE                                  */
   /* ----------------------------------------- */

less/apps.less

@@ -5,14 +5,14 @@
 @detailsHeight: 40px;
 
 /* ----------------------------------------- */
-/*  All D&D5e Apps                           */
+/*  All DnD5e Apps                           */
 /* ----------------------------------------- */
 
 .sw5e {
   .window-content {
     background: @sheetBackground;
     font-size: 13px;
-    color: @colorDark
+    color: @colorDark;
   }
 
   /* ----------------------------------------- */
@@ -20,7 +20,9 @@
   /* ----------------------------------------- */
 
   // Item Sheet form fields
-  input[type="text"], select {
+  input[type="text"],
+  input[type="number"],
+  select {
     height: calc(100% - 2px);
     border: 1px solid @colorTan;
     background: rgba(0, 0, 0, 0.05);
@@ -28,7 +30,8 @@
   }
 
   // Hovered Fields
-  input[type="text"] {
+  input[type="text"],
+  input[type="number"] {
     &:hover,
     &:focus {
       border: 1px solid #111;
@@ -56,20 +59,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 +111,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;
+    .russoOne();
   }
 
   /* Tags */
@@ -151,7 +160,8 @@
   /* ----------------------------------------- */
 
   // Input Fields
-  input[type="text"] {
+  input[type="text"],
+  input[type="number"] {
     background: none;
     border: 1px solid transparent;
     &:hover,
@@ -175,6 +185,16 @@
     cursor: pointer;
   }
 
+  // Separators
+  span.sep {
+    flex: none;
+    margin: 0 1px;
+    display: inline;
+    position: relative;
+    color: @colorTan;
+    font-weight: normal;
+  }
+
   /* ----------------------------------------- */
   /*  TinyMCE                                  */
   /* ----------------------------------------- */
@@ -190,10 +210,14 @@
   /* ----------------------------------------- */
   /*  Sheet Header                             */
   /* ----------------------------------------- */
+
   .sheet-header {
     flex: 0 0 @headerHeight;
     border-bottom: @borderGroove;
-    .nodesto();
+
+    .header-details {
+      .russoOne();
+    }
 
     /* Character Name */
     h1 {
@@ -204,8 +228,10 @@
       padding: 5px;
 
       input {
+        display: block;
         height: 50px;
-        font-size: 36px;
+        font-size: 32px;
+        margin: 0;
       }
     }
 
@@ -214,7 +240,7 @@
       flex: 0 0 @headerHeight;
       max-width: @headerHeight;
       height: @headerHeight;
-      object-fit: cover;
+      object-fit: contain;
       border: none;
       border-right: @borderGroove;
     }
@@ -230,11 +256,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 +278,7 @@
   .sheet-navigation {
     flex: 0 0 @navHeight;
     margin-bottom: 5px;
-    .nodesto();
+    .russoOne(14px);
 
     .item {
       height: 30px;
@@ -285,18 +310,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 +344,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;
+    }
   }
 }
 

less/character.less

@@ -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                            */
   /* ----------------------------------------- */
@@ -247,4 +149,31 @@
       }
     }
   }
+
+  /* ----------------------------------------- */
+  /*  Biography                                */
+  /* ----------------------------------------- */
+
+  .characteristics {
+    flex: 0 0 180px;
+    height: 100%;
+    padding: 0 3px 3px;
+    label {
+      flex: 0 0 20px;
+      .bungeeInline();
+      font-size: 16px;
+      font-weight: normal;
+      line-height: 20px;
+      text-align: center;
+    }
+    textarea {
+      .openSans();
+      border: 1px solid @colorFaint;
+      resize: none;
+    }
+  }
+  
+  .biography {
+    max-width: calc(100% - 180px);
+  }
 }

less/chat.less

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

less/items.less

@@ -88,7 +88,9 @@
   .details {
 
     // Item Sheet form fields
-    input[type="text"], select {
+    input[type="text"],
+    input[type="number"],
+    select {
       height: 24px;
       border: 1px solid @colorTan;
       background: rgba(0, 0, 0, 0.05);
@@ -192,87 +194,26 @@
     text-align: right;
     color: @colorTan;
   }
-  
-  h4.armorproperties-header {
-    margin: 0;
-    padding: 0;
-    font-weight: bold;
-    line-height: 24px;
-    color: @colorOlive;
-  }
-
-  .armorproperties-parts {
-    list-style: none;
-    margin: 0;
-    padding: 0;
-
-    .armorproperties-part {
-      flex: 0 0 100%;
-      padding: 0;
-      input {
-        flex: 3;
-      }
-      select {
-        margin-left: 5px;
-        flex: 1;
-      }
-    }
-  }
-
-  .armorproperties-control {
-    width: 18px;
-    flex: 0 0 18px;
-    line-height: 24px;
-    float: right;
-    text-align: right;
-    color: @colorTan;
-  }
-  
-  h4.weaponproperties-header {
-    margin: 0;
-    padding: 0;
-    font-weight: bold;
-    line-height: 24px;
-    color: @colorOlive;
-  }
-
-  .weaponproperties-parts {
-    list-style: none;
-    margin: 0;
-    padding: 0;
-
-    .weaponproperties-part {
-      flex: 0 0 100%;
-      padding: 0;
-      input {
-        flex: 3;
-      }
-      select {
-        margin-left: 5px;
-        flex: 1;
-      }
-    }
-  }
-
-  .weaponproperties-control {
-    width: 18px;
-    flex: 0 0 18px;
-    line-height: 24px;
-    float: right;
-    text-align: right;
-    color: @colorTan;
-  }
-
-  .recharge {
+ 
+  .recharge.form-group {
     span {
-      flex: 0 0 80px;
+      text-align: right;
+      padding-right: 3px;
+    }
+    input[type="text"] {
+      flex: 0 0 32px;
+      text-align: center;
     }
     label.checkbox {
-      flex: 0 0 80px;
-      text-align: right;
+      flex: none;
+      input {
+        width: 16px;
+        height: 16px;
+        top: 4px;
+      }
     }
   }
-
+ 
   /* ----------------------------------------- */
   /*  Item Actions                             */
   /* ----------------------------------------- */

less/npc.less

@@ -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;
+    }
+  }
+
 }

less/sw5e.less

@@ -5,3 +5,34 @@
 @import "chat.less";
 @import "character.less";
 @import "npc.less";
+@import "vehicle.less";
+
+// TODO: Remove number styling after 0.7.x
+input[type="number"] {
+    width: calc(100% - 2px);
+    min-width: 20px;
+    height: 26px;
+    background: rgba(0, 0, 0, 0.05);
+    padding: 1px 3px;
+    margin: 0;
+    color: #191813;
+    font-family: inherit;
+    font-size: inherit;
+    text-align: inherit;
+    line-height: inherit;
+    border: 1px solid #7a7971;
+    border-radius: 3px;
+    -webkit-user-select: text;
+    -moz-user-select: text;
+    -ms-user-select: text;
+    user-select: text;
+    -moz-appearance: textfield;
+    &:focus {
+      box-shadow: 0 0 5px red;
+    }
+  }
+  input[type="number"]::-webkit-inner-spin-button,
+  input[type="number"]::-webkit-outer-spin-button {
+    -webkit-appearance: none;
+  }
+  

less/variables.less

@@ -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-size: 20px) {
+  font-family: 'Russo One';
+  font-size: @font-size;
+  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;
 }
 
 /* ----------------------------------------- */
@@ -27,7 +55,23 @@
 @colorOlive: #4b4a44;
 @colorCrimson: #44191A;
 @borderGroove: 2px groove #eeede0;
-@sheetBackground: url("ui/parchment.jpg") repeat;
+//@sheetBackground: url("ui/parchment.jpg") repeat;
+
+
+//SW5e Colors
+@colorBlack: #1C1C1C;
+@colorDarkGray: #363636;
+@colorGray: #4f4f4f;
+@colorLightGray: #828282;
+@colorPaleGray: #D6D6D6;
+@colorRed: #c40f0f; 
+@colorPaleRed: #FBF4F4;
+@colorLightRed: #F6E1E1;
+@colorBlue: #0d99cc;
+@colorLightBlue: #7ed6f7;
+@colorPaleBlue: #afc6d6;
+
+@sheetBackground: linear-gradient(90deg, @colorPaleBlue 0%, @colorPaleGray 30%, @colorPaleGray 70%, @colorPaleBlue); //url("ui/parchment.webp") repeat;
 
 /* ----------------------------------------- */
 /*  Flexbox                                  */

less/vehicle.less

@@ -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;
+      }
+    }
+  }
+}

module/apps/power-cast-dialog.js

@@ -1,102 +0,0 @@
-/**
- * A specialized Dialog subclass for casting a power item at a certain level
- * @type {Dialog}
- */
-export class PowerCastDialog extends Dialog {
-  constructor(actor, item, dialogData={}, options={}) {
-    super(dialogData, options);
-    this.options.classes = ["sw5e", "dialog"];
-
-    /**
-     * Store a reference to the Actor entity which is casting the power
-     * @type {Actor5e}
-     */
-    this.actor = actor;
-
-    /**
-     * Store a reference to the Item entity which is the power being cast
-     * @type {Item5e}
-     */
-    this.item = item;
-  }
-
-  /* -------------------------------------------- */
-  /*  Rendering                                   */
-  /* -------------------------------------------- */
-
-  /**
-   * A constructor function which displays the Power Cast Dialog app for a given Actor and Item.
-   * Returns a Promise which resolves to the dialog FormData once the workflow has been completed.
-   * @param {Actor5e} actor
-   * @param {Item5e} item
-   * @return {Promise}
-   */
-  static async create(actor, item) {
-    const ad = actor.data.data;
-    const id = item.data.data;
-
-    // Determine whether the power may be upcast
-    const lvl = id.level;
-    const canUpcast = (lvl > 0) && CONFIG.SW5E.powerUpcastModes.includes(id.preparation.mode);
-
-    // Determine the levels which are feasible
-    let lmax = 0;
-    const powerLevels = Array.fromRange(10).reduce((arr, i) => {
-      if ( i < lvl ) return arr;
-      const l = ad.powers["power"+i] || {max: 0, override: null};
-      let max = parseInt(l.override || l.max || 0);
-      let slots = Math.clamped(parseInt(l.value || 0), 0, max);
-      if ( max > 0 ) lmax = i;
-      arr.push({
-        level: i,
-        label: i > 0 ? `${CONFIG.SW5E.powerLevels[i]} (${slots} Slots)` : CONFIG.SW5E.powerLevels[i],
-        canCast: canUpcast && (max > 0),
-        hasSlots: slots > 0
-      });
-      return arr;
-    }, []).filter(sl => sl.level <= lmax);
-
-    const pact = ad.powers.pact;
-    if (pact.level >= lvl) {
-      // If this character has pact slots, present them as an option for
-      // casting the power.
-      powerLevels.push({
-        level: 'pact',
-        label: game.i18n.localize('SW5E.PowerLevelPact')
-          + ` (${game.i18n.localize('SW5E.Level')} ${pact.level}) `
-          + `(${pact.value} ${game.i18n.localize('SW5E.Slots')})`,
-        canCast: canUpcast,
-        hasSlots: pact.value > 0
-      });
-    }
-
-    const canCast = powerLevels.some(l => l.hasSlots);
-
-    // Render the Power casting template
-    const html = await renderTemplate("systems/sw5e/templates/apps/power-cast.html", {
-      item: item.data,
-      canCast: canCast,
-      canUpcast: canUpcast,
-      powerLevels,
-      hasPlaceableTemplate: game.user.can("TEMPLATE_CREATE") && item.hasAreaTarget
-    });
-
-    // Create the Dialog and return as a Promise
-    return new Promise((resolve, reject) => {
-      const dlg = new this(actor, item, {
-        title: `${item.name}: Power Configuration`,
-        content: html,
-        buttons: {
-          cast: {
-            icon: '<i class="fas fa-magic"></i>',
-            label: "Cast",
-            callback: html => resolve(new FormData(html[0].querySelector("#power-config-form")))
-          }
-        },
-        default: "cast",
-        close: reject
-      });
-      dlg.render(true);
-    });
-  }
-}