1 files changed, 251 insertions, 55 deletions

diff --git a/src/App.scss b/src/App.scss
index a8601220..5355d899 100644
--- a/src/App.scss
+++ b/src/App.scss
@@ -34,10 +34,11 @@ h4 {
 
 body {
   font-family: sans-serif;
+  font-family: var(--interfaceFont, sans-serif);
   font-size: 14px;
   margin: 0;
-  color: $fallback--fg;
-  color: var(--fg, $fallback--fg);
+  color: $fallback--text;
+  color: var(--text, $fallback--text);
   max-width: 100vw;
   overflow-x: hidden;
 }
@@ -48,24 +49,39 @@ a {
   color: var(--link, $fallback--link);
 }
 
-button{
+button {
   user-select: none;
-  color: $fallback--fg;
-  color: var(--fg, $fallback--fg);
-  background-color: $fallback--btn;
-  background-color: var(--btn, $fallback--btn);
+  color: $fallback--text;
+  color: var(--btnText, $fallback--text);
+  background-color: $fallback--fg;
+  background-color: var(--btn, $fallback--fg);
   border: none;
   border-radius: $fallback--btnRadius;
   border-radius: var(--btnRadius, $fallback--btnRadius);
   cursor: pointer;
-  border-top: 1px solid rgba(255, 255, 255, 0.2);
-  border-bottom: 1px solid rgba(0, 0, 0, 0.2);
-  box-shadow: 0px 0px 2px black;
+  box-shadow: 0px 0px 2px 0px rgba(0, 0, 0, 1), 0px 1px 0px 0px rgba(255, 255, 255, 0.2) inset, 0px -1px 0px 0px rgba(0, 0, 0, 0.2) inset;
+  box-shadow: var(--buttonShadow);
   font-size: 14px;
   font-family: sans-serif;
+  font-family: var(--interfaceFont, sans-serif);
+
+  i[class*=icon-] {
+    color: $fallback--text;
+    color: var(--btnText, $fallback--text);
+  }
+
+  &::-moz-focus-inner {
+    border: none;
+  }
 
   &:hover {
     box-shadow: 0px 0px 4px rgba(255, 255, 255, 0.3);
+    box-shadow: var(--buttonHoverShadow);
+  }
+
+  &:active {
+    box-shadow: 0px 0px 4px 0px rgba(255, 255, 255, 0.3), 0px 1px 0px 0px rgba(0, 0, 0, 0.2) inset, 0px -1px 0px 0px rgba(255, 255, 255, 0.2) inset;
+    box-shadow: var(--buttonPressedShadow);
   }
 
   &:disabled {
@@ -88,23 +104,29 @@ label.select {
 
 input, textarea, .select {
   border: none;
-  border-radius: $fallback--btnRadius;
-  border-radius: var(--btnRadius, $fallback--btnRadius);
-  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
-  border-top: 1px solid rgba(0, 0, 0, 0.2);
-  box-shadow: 0px 0px 2px black inset;
-  background-color: $fallback--lightBg;
-  background-color: var(--lightBg, $fallback--lightBg);
-  color: $fallback--lightFg;
-  color: var(--lightFg, $fallback--lightFg);
+  border-radius: $fallback--inputRadius;
+  border-radius: var(--inputRadius, $fallback--inputRadius);
+  box-shadow: 0px 1px 0px 0px rgba(0, 0, 0, 0.2) inset, 0px -1px 0px 0px rgba(255, 255, 255, 0.2) inset, 0px 0px 2px 0px rgba(0, 0, 0, 1) inset;
+  box-shadow: var(--inputShadow);
+  background-color: $fallback--fg;
+  background-color: var(--input, $fallback--fg);
+  color: $fallback--lightText;
+  color: var(--inputText, $fallback--lightText);
   font-family: sans-serif;
+  font-family: var(--inputFont, sans-serif);
   font-size: 14px;
-  padding: 8px 7px;
+  padding: 8px .5em;
   box-sizing: border-box;
   display: inline-block;
   position: relative;
-  height: 29px;
+  height: 28px;
   line-height: 16px;
+  hyphens: none;
+
+  &:disabled, &[disabled=disabled] {
+    cursor: not-allowed;
+    opacity: 0.5;
+  }
 
   .icon-down-open {
     position: absolute;
@@ -112,9 +134,9 @@ input, textarea, .select {
     bottom: 0;
     right: 5px;
     height: 100%;
-    color: $fallback--fg;
-    color: var(--fg, $fallback--fg);
-    line-height: 29px;
+    color: $fallback--text;
+    color: var(--text, $fallback--text);
+    line-height: 28px;
     z-index: 0;
     pointer-events: none;
   }
@@ -125,22 +147,41 @@ input, textarea, .select {
     appearance: none;
     background: transparent;
     border: none;
+    color: $fallback--text;
+    color: var(--text, $fallback--text);
     margin: 0;
-    color: $fallback--fg;
-    color: var(--fg, $fallback--fg);
-    padding: 4px 2em 3px 3px;
+    padding: 0 2em 0 .2em;
+    font-family: sans-serif;
+    font-family: var(--inputFont, sans-serif);
+    font-size: 14px;
     width: 100%;
     z-index: 1;
-    height: 29px;
+    height: 28px;
     line-height: 16px;
   }
 
+  &[type=range] {
+    background: none;
+    border: none;
+    margin: 0;
+    box-shadow: none;
+    flex: 1;
+  }
+
   &[type=radio],
   &[type=checkbox] {
     display: none;
     &:checked + label::before {
-      color: $fallback--fg;
-      color: var(--fg, $fallback--fg);
+      color: $fallback--text;
+      color: var(--text, $fallback--text);
+    }
+    &:disabled,
+    {
+      &,
+      & + label,
+      & + label::before {
+        opacity: .5;
+      }
     }
     + label::before {
       display: inline-block;
@@ -148,14 +189,13 @@ input, textarea, .select {
       transition: color 200ms;
       width: 1.1em;
       height: 1.1em;
-      border-radius: $fallback--checkBoxRadius;
-      border-radius: var(--checkBoxRadius, $fallback--checkBoxRadius);
-      border-bottom: 1px solid rgba(255, 255, 255, 0.2);
-      border-top: 1px solid rgba(0, 0, 0, 0.2);
+      border-radius: $fallback--checkboxRadius;
+      border-radius: var(--checkboxRadius, $fallback--checkboxRadius);
       box-shadow: 0px 0px 2px black inset;
+      box-shadow: var(--inputShadow);
       margin-right: .5em;
-      background-color: $fallback--btn;
-      background-color: var(--btn, $fallback--btn);
+      background-color: $fallback--fg;
+      background-color: var(--input, $fallback--fg);
       vertical-align: top;
       text-align: center;
       line-height: 1.1em;
@@ -168,6 +208,13 @@ input, textarea, .select {
   }
 }
 
+option {
+  color: $fallback--text;
+  color: var(--text, $fallback--text);
+  background-color: $fallback--bg;
+  background-color: var(--bg, $fallback--bg);
+}
+
 i[class*=icon-] {
   color: $fallback--icon;
   color: var(--icon, $fallback--icon)
@@ -211,6 +258,40 @@ nav {
   position: fixed;
   height: 50px;
 
+  .logo {
+    display: flex;
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+
+    align-items: stretch;
+    justify-content: center;
+    flex: 0 0 auto;
+    z-index: -1;
+
+    .mask {
+      mask-repeat: no-repeat;
+      mask-position: center;
+      mask-size: contain;
+      background-color: $fallback--fg;
+      background-color: var(--topBarText, $fallback--fg);
+      position: absolute;
+      top: 0;
+      bottom: 0;
+      left: 0;
+      right: 0;
+    }
+
+    img {
+      height: 100%;
+      object-fit: contain;
+      display: block;
+      flex: 0;
+    }
+  }
+
   .inner-nav {
     padding-left: 20px;
     padding-right: 20px;
@@ -219,13 +300,10 @@ nav {
     flex-basis: 970px;
     margin: auto;
     height: 50px;
-    background-repeat: no-repeat;
-    background-position: center;
-    background-size: auto 80%;
 
-    a i {
+    a, a i {
       color: $fallback--link;
-      color: var(--link, $fallback--link);
+      color: var(--topBarLink, $fallback--link);
     }
   }
 }
@@ -248,15 +326,33 @@ main-router {
 
 .panel {
   display: flex;
+  position: relative;
+
   flex-direction: column;
   margin: 0.5em;
 
   background-color: $fallback--bg;
   background-color: var(--bg, $fallback--bg);
 
-  border-radius: $fallback--panelRadius;
-  border-radius: var(--panelRadius, $fallback--panelRadius);
-  box-shadow: 1px 1px 4px rgba(0,0,0,.6);
+  &::after, & {
+    border-radius: $fallback--panelRadius;
+    border-radius: var(--panelRadius, $fallback--panelRadius);
+  }
+
+  &::after {
+    content: '';
+    position: absolute;
+
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+
+    pointer-events: none;
+
+    box-shadow: 1px 1px 4px rgba(0,0,0,.6);
+    box-shadow: var(--panelShadow);
+  }
 }
 
 .panel-body:empty::before {
@@ -267,15 +363,55 @@ main-router {
 }
 
 .panel-heading {
+  display: flex;
   border-radius: $fallback--panelRadius $fallback--panelRadius 0 0;
   border-radius: var(--panelRadius, $fallback--panelRadius) var(--panelRadius, $fallback--panelRadius) 0 0;
   background-size: cover;
-  padding: 0.6em 1.0em;
+  padding: .6em .6em;
   text-align: left;
-  font-size: 1.3em;
-  line-height: 24px;
-  background-color: $fallback--btn;
-  background-color: var(--btn, $fallback--btn);
+  line-height: 28px;
+  color: var(--panelText);
+  background-color: $fallback--fg;
+  background-color: var(--panel, $fallback--fg);
+  align-items: baseline;
+  box-shadow: var(--panelHeaderShadow);
+
+  .title {
+    flex: 1 0 auto;
+    font-size: 1.3em;
+  }
+
+  .faint {
+    background-color: transparent;
+    color: $fallback--faint;
+    color: var(--panelFaint, $fallback--faint);
+  }
+
+  .alert {
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    overflow-x: hidden;
+  }
+
+  button {
+    flex-shrink: 0;
+  }
+
+  button, .alert {
+    // height: 100%;
+    line-height: 21px;
+    min-height: 0;
+    box-sizing: border-box;
+    margin: 0;
+    margin-left: .25em;
+    min-width: 1px;
+    align-self: stretch;
+  }
+
+  a {
+    color: $fallback--link;
+    color: var(--panelLink, $fallback--link)
+  }
 }
 
 .panel-heading.stub {
@@ -286,6 +422,11 @@ main-router {
 .panel-footer {
   border-radius: 0 0 $fallback--panelRadius $fallback--panelRadius;
   border-radius: 0 0 var(--panelRadius, $fallback--panelRadius) var(--panelRadius, $fallback--panelRadius);
+
+  a {
+    color: $fallback--link;
+    color: var(--panelLink, $fallback--link)
+  }
 }
 
 .panel-body > p {
@@ -304,11 +445,13 @@ main-router {
 
 nav {
   z-index: 1000;
-  background-color: $fallback--btn;
-  background-color: var(--btn, $fallback--btn);
+  color: var(--topBarText);
+  background-color: $fallback--fg;
+  background-color: var(--topBar, $fallback--fg);
   color: $fallback--faint;
   color: var(--faint, $fallback--faint);
   box-shadow: 0px 0px 4px rgba(0,0,0,.6);
+  box-shadow: var(--topBarShadow);
 }
 
 .fade-enter-active, .fade-leave-active {
@@ -382,20 +525,46 @@ nav {
     flex-grow: 0;
   }
 }
+.badge {
+  display: inline-block;
+  border-radius: 99px;
+  min-width: 22px;
+  max-width: 22px;
+  min-height: 22px;
+  max-height: 22px;
+  font-size: 15px;
+  line-height: 22px;
+  text-align: center;
+  vertical-align: middle;
+  white-space: nowrap;
+  padding: 0;
+
+  &.badge-notification {
+    background-color: $fallback--cRed;
+    background-color: var(--badgeNotification, $fallback--cRed);
+    color: white;
+    color: var(--badgeNotificationText, white);
+  }
+}
 
 .alert {
   margin: 0.35em;
   padding: 0.25em;
   border-radius: $fallback--tooltipRadius;
   border-radius: var(--tooltipRadius, $fallback--tooltipRadius);
-  color: $fallback--faint;
-  color: var(--faint, $fallback--faint);
   min-height: 28px;
   line-height: 28px;
 
   &.error {
-    background-color: $fallback--cAlertRed;
-    background-color: var(--cAlertRed, $fallback--cAlertRed);
+    background-color: $fallback--alertError;
+    background-color: var(--alertError, $fallback--alertError);
+    color: $fallback--text;
+    color: var(--alertErrorText, $fallback--text);
+
+    .panel-heading & {
+      color: $fallback--text;
+      color: var(--alertErrorPanelText, $fallback--text);
+    }
   }
 }
 
@@ -426,3 +595,30 @@ nav {
   text-align: right;
   padding-right: 20px;
 }
+
+.visibility-tray {
+  font-size: 1.2em;
+  padding: 3px;
+  cursor: pointer;
+
+  .selected {
+    color: $fallback--lightText;
+    color: var(--lightText, $fallback--lightText);
+  }
+
+  .text-format {
+    float: right;
+  }
+
+  div {
+    padding-top: 5px;
+  }
+}
+
+.visibility-notice {
+  padding: .5em;
+  border: 1px solid $fallback--faint;
+  border: 1px solid var(--faint, $fallback--faint);
+  border-radius: $fallback--inputRadius;
+  border-radius: var(--inputRadius, $fallback--inputRadius);
+}