Super VJ Update

less/apps.less

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