first attempt at merge

2017-09-06 18:03:09 -04:00 · 2017-09-06 18:03:09 -04:00 · 67c1ec531e
commit 67c1ec531e
parent cacaed401f 463d09256f
34 changed files with 565 additions and 317 deletions
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@ -12,7 +12,6 @@ Web UI version numbers should always match the corresponding version of LBRY App
  * The "auth token" displayable on Help offers security warning
  * Added a new component for rendering dates and times. This component can render the date and time of a block height, as well.

-
 ### Changed
  *
  *
--- a/app/main.js
+++ b/app/main.js
@ -402,4 +402,4 @@ ipcMain.on('get-auth-token', (event) => {

 ipcMain.on('set-auth-token', (event, token) => {
  keytar.setPassword("LBRY", "auth_token", token ? token.toString().trim() : null);
-});
+});
--- a/app/package.json
+++ b/app/package.json
@ -20,8 +20,8 @@
    "electron-rebuild": "^1.5.11"
  },
  "lbrySettings": {
-    "lbrynetDaemonVersion": "0.15.1",
+    "lbrynetDaemonVersion": "0.16.0rc3",
    "lbrynetDaemonUrlTemplate": "https://github.com/lbryio/lbry/releases/download/vDAEMONVER/lbrynet-daemon-vDAEMONVER-OSNAME.zip"
  },
  "license": "MIT"
-}
+}
--- a/ui/dist/index.html
+++ b/ui/dist/index.html
@ -6,6 +6,7 @@

        <link href='https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,400italic,600italic,600' rel='stylesheet' type='text/css'>
        <link href="./css/all.css" rel="stylesheet" type="text/css" media="screen,print" />
+        <link id="theme" href="" rel="stylesheet" type="text/css" media="screen,print" />
        <link rel="icon" type="image/png" href="./img/fav/favicon-32x32.png" sizes="32x32">
        <link rel="icon" type="image/png" href="./img/fav/favicon-194x194.png" sizes="194x194">
        <link rel="icon" type="image/png" href="./img/fav/favicon-96x96.png" sizes="96x96">
--- a/ui/dist/themes/dark.css
+++ b/ui/dist/themes/dark.css
@ -0,0 +1,46 @@
+:root {
+    /* Colors */
+    --color-primary:  #009688;
+    --color-canvas: #0f1517;
+    --color-bg: #1a2327;
+    --color-bg-alt: #314048;
+    --color-help: #AAA;
+    --color-error: #a94442;
+    --color-load-screen-text: #FFF;
+    --color-money: var(--color-primary);
+    --color-meta-light: #757575;
+    --color-dark-overlay: rgba(15, 21, 23, 0.85);
+
+    /* Text */
+    --text-color: #FFF;
+    --text-selection-bg: rgba(0,150,136, 0.95);
+
+    /* Input */
+    --input-bg: transparent;
+    --input-active-bg: rgba(0,0,0, 0.5);
+    --input-border-color: rgba(255,255,255, 0.25);
+
+    /* Search */
+    --search-bg: rgba(0,0,0, 0.45);
+    --search-color: #757575;
+    --search-active-bg: rgba(0,0,0, 0.75);
+    --search-border: 1px solid rgba(0,0,0, 0.25);
+
+    /* Tab */
+    --tab-color: #757575;
+    --tab-active-color: #CCC;
+
+    /* Header */
+    --header-color: #CCC;
+    --header-active-color: #FFF;
+    --header-button-bg: transparent;
+
+    /* Table */
+    --table-border: 0;
+    --table-item-even: var(--color-bg-alt);
+    --table-item-odd: transparent;
+
+    /* Modla */
+    --modal-overlay-bg: var(--color-dark-overlay);
+    --modal-border: 1px solid rgba(0, 0, 0, 0.25);
+}
--- a/ui/dist/themes/light.css
+++ b/ui/dist/themes/light.css
@ -0,0 +1,4 @@
+:root {
+    /* Colors */
+    --color-primary: #155B4A;
+}
--- a/ui/js/actions/app.js
+++ b/ui/js/actions/app.js
@ -1,4 +1,5 @@
 import * as types from "constants/action_types";
+import * as settings from "constants/settings";
 import lbry from "lbry";
 import {
  selectUpdateUrl,
@ -175,6 +176,7 @@ export function doDaemonReady() {
  return function(dispatch, getState) {
    dispatch(doAuthenticate());
    dispatch({ type: types.DAEMON_READY });
+    //dispatch(doSetTheme(lbry.getClientSetting(settings.THEME)));
    dispatch(doFetchDaemonSettings());
    dispatch(doFileList());
  };
--- a/ui/js/actions/settings.js
+++ b/ui/js/actions/settings.js
@ -1,10 +1,16 @@
 import * as types from "constants/action_types";
 import * as settings from "constants/settings";
 import batchActions from "util/batchActions";
+
 import lbry from "lbry";
 import fs from "fs";
 import http from "http";

+const { remote } = require("electron");
+const { extname } = require("path");
+const { download } = remote.require("electron-dl");
+const { readdirSync } = remote.require("fs");
+
 export function doFetchDaemonSettings() {
  return function(dispatch, getState) {
    lbry.settings_get().then(settings => {
@ -46,6 +52,45 @@ export function doSetClientSetting(key, value) {
  };
 }

+export function doGetThemes() {
+  const dir = `${remote.app.getAppPath()}/dist/themes`;
+
+  // Get all .css files
+  const files = readdirSync(dir).filter(file => extname(file) === ".css");
+
+  return function(dispatch, getState) {
+    // Find themes
+    const themes = files.map(file => ({
+      name: file.replace(".css", ""),
+      path: `./themes/${file}`,
+    }));
+
+    dispatch(doSetClientSetting(settings.THEMES, themes));
+  };
+}
+
+export function doSetTheme(name) {
+  return function(dispatch, getState) {
+    // Find a theme from themes list
+    const find = themeName => themes.find(theme => theme.name === themeName);
+
+    // Get themes
+    const themes = lbry.getClientSetting(settings.THEMES);
+
+    // Find theme and set fallback
+    const theme = find(name) || find("light");
+
+    if (theme.path) {
+      // load css
+      const link = document.getElementById("theme");
+      link.href = theme.path;
+
+      // update theme
+      dispatch(doSetClientSetting(settings.THEME, theme.name));
+    }
+  };
+}
+
 export function doDownloadLanguage(langFile) {
  return function(dispatch, getState) {
    const destinationPath = `app/locales/${langFile}`;
--- a/ui/js/constants/settings.js
+++ b/ui/js/constants/settings.js
@ -6,3 +6,5 @@ export const NEW_USER_ACKNOWLEDGED = "welcome_acknowledged";
 export const LANGUAGE = "language";
 export const SHOW_NSFW = "showNsfw";
 export const SHOW_UNAVAILABLE = "showUnavailable";
+export const THEME = "theme";
+export const THEMES = "themes";
--- a/ui/js/lbry.js
+++ b/ui/js/lbry.js
@ -39,6 +39,8 @@ let lbry = {
    customLighthouseServers: [],
    showDeveloperMenu: false,
    language: "en",
+    theme: "light",
+    themes: [],
  },
 };

--- a/ui/js/page/settings/index.js
+++ b/ui/js/page/settings/index.js
@ -4,6 +4,8 @@ import { doClearCache } from "actions/app";
 import {
  doSetDaemonSetting,
  doSetClientSetting,
+  doGetThemes,
+  doSetTheme,
  doChangeLanguage,
 } from "actions/settings";
 import {
@ -25,6 +27,8 @@ const perform = dispatch => ({
  setDaemonSetting: (key, value) => dispatch(doSetDaemonSetting(key, value)),
  clearCache: () => dispatch(doClearCache()),
  setClientSetting: (key, value) => dispatch(doSetClientSetting(key, value)),
+  setTheme: name => dispatch(doSetTheme(name)),
+  getThemes: () => dispatch(doGetThemes),
  changeLanguage: newLanguage => dispatch(doChangeLanguage(newLanguage)),
 });

--- a/ui/js/page/settings/view.jsx
+++ b/ui/js/page/settings/view.jsx
@ -6,8 +6,7 @@ import * as settings from "constants/settings";
 import lbry from "lbry.js";
 import Link from "component/link";
 import FormFieldPrice from "component/formFieldPrice";
-
-const { remote } = require("electron");
+import { remote } from "electron";

 class SettingsPage extends React.PureComponent {
  constructor(props) {
@ -21,6 +20,8 @@ class SettingsPage extends React.PureComponent {
      showUnavailable: lbry.getClientSetting(settings.SHOW_UNAVAILABLE),
      language: lbry.getClientSetting(settings.LANGUAGE),
      clearingCache: false,
+      theme: lbry.getClientSetting(settings.THEME),
+      themes: lbry.getClientSetting(settings.THEMES),
    };
  }

@ -46,6 +47,14 @@ class SettingsPage extends React.PureComponent {
    this._onSettingSaveSuccess();
  }

+  setTheme(value) {
+    this.props.setTheme(value);
+  }
+
+  getThemes() {
+    this.props.getThemes();
+  }
+
  onRunOnStartChange(event) {
    this.setDaemonSetting("run_on_startup", event.target.checked);
  }
@ -66,6 +75,11 @@ class SettingsPage extends React.PureComponent {
    this.setDaemonSetting("disable_max_key_fee", isDisabled);
  }

+  onThemeChange(event) {
+    const { value } = event.target;
+    this.setTheme(value);
+  }
+
  // onMaxUploadPrefChange(isLimited) {
  //   if (!isLimited) {
  //     this.setDaemonSetting("max_upload", 0.0);
@ -103,6 +117,12 @@ class SettingsPage extends React.PureComponent {

  onShowUnavailableChange(event) {}

+  componentWillMount() {
+    this.getThemes();
+  }
+
+  componentDidMount() {}
+
  render() {
    const { daemonSettings, language, languages } = this.props;

@ -242,6 +262,27 @@ class SettingsPage extends React.PureComponent {
          </div>
        </section>

+        <section className="card">
+          <div className="card__content">
+            <h3>{__("Theme")}</h3>
+          </div>
+          <div className="card__content">
+            <FormField
+              type="select"
+              onChange={this.onThemeChange.bind(this)}
+              defaultValue={lbry.getClientSetting("theme")}
+              className="form-field__input--inline"
+            >
+              {this.state.themes.map((theme, index) =>
+                <option key={index} value={theme.name}>
+                  {__(`${theme.name} theme`)}
+                </option>
+              )}
+            </FormField>
+
+          </div>
+        </section>
+
        <section className="card">
          <div className="card__content">
            <h3>{__("Application Cache")}</h3>
--- a/ui/js/reducers/settings.js
+++ b/ui/js/reducers/settings.js
@ -12,6 +12,8 @@ const defaultState = {
      settings.CREDIT_INTRO_ACKNOWLEDGED
    ),
    language: lbry.getClientSetting(settings.LANGUAGE),
+    theme: lbry.getClientSetting(settings.THEME),
+    themes: lbry.getClientSetting(settings.THEMES),
  },
  languages: {},
 };
--- a/ui/scss/_global.scss
+++ b/ui/scss/_global.scss
@ -1,128 +1,11 @@
@charset "UTF-8";

 $spacing-vertical: 24px;
-
-$padding-button: $spacing-vertical * 2/3;
-$padding-text-link: 0px;
-
-$color-primary: #155B4A;
-$color-primary-light: saturate(lighten($color-primary, 50%), 20%);
-$color-light-alt: hsl(hue($color-primary), 15, 85);
-$color-text-dark: #000;
-$color-black-transparent: rgba(32,32,32,0.9);
-$color-help: rgba(0,0,0,.6);
-$color-notice: #8a6d3b;
-$color-error: #a94442;
-$color-load-screen-text: #c3c3c3;
-$color-canvas: #f5f5f5;
-$color-bg: #ffffff;
-$color-bg-alt: #D9D9D9;
-$color-money: #216C2A;
-$color-meta-light: #505050;
-$color-form-border: rgba(160,160,160,.5);
-
-$font-size: 16px;
-$font-line-height: 1.3333;
-
-$mobile-width-threshold: 801px;
-$max-content-width: 1000px;
-$max-text-width: 660px;
-
 $width-page-constrained: 800px;
-$width-input-text: 330px;
-
-$height-button: $spacing-vertical * 1.5;
-$height-header: $spacing-vertical * 2.5;
-$height-video-embedded: $width-page-constrained * 9 / 16;
-
-$box-shadow-layer: 0 2px 2px 0 rgba(0,0,0,.14),0 3px 1px -2px rgba(0,0,0,.2),0 1px 5px 0 rgba(0,0,0,.12);
-$box-shadow-focus: 2px 4px 4px 0 rgba(0,0,0,.14),2px 5px 3px -2px rgba(0,0,0,.2),2px 3px 7px 0 rgba(0,0,0,.12);
-
-$transition-standard: .225s ease;
-
-$blur-intensity-nsfw: 20px;
-
-@mixin clearfix()
-{
-    &:before, &:after
-    {
-      content: " ";
-      display: table;
-    }
-    &:after
-    {
-        clear: both;
-    }
-}
-
-@mixin border-radius($radius)
-{
-  -webkit-border-radius: $radius;
-     -moz-border-radius: $radius;
-      -ms-border-radius: $radius;
-          border-radius: $radius;
-}
-
-@mixin placeholder-color($color) {
-  /*do not group these it breaks because CSS*/
-  &:-moz-placeholder {
-    color: $color;
-  }
-  &::-moz-placeholder {
-    color: $color;
-  }
-  &:-ms-input-placeholder {
-    color: $color;
-  }
-  &::-webkit-input-placeholder {
-    color: $color;
-  }
-}
-
-@mixin display-flex()
-{
-  display: -webkit-box;
-  display: -moz-box;
-  display: -ms-flexbox;
-  display: -webkit-flex;
-  display: flex;
-}
-
-@mixin flex($columns)
-{
-  -webkit-flex: $columns;
-     -moz-flex: $columns;
-      -ms-flex: $columns;
-          flex: $columns;
-}
-
-@mixin flex-flow($flow) {
-  -webkit-flex-flow: $flow;
-     -moz-flex-flow: $flow;
-      -ms-flex-flow: $flow;
-          flex-flow: $flow;
-}
-
-@mixin flex-direction($direction) {
-  -webkit-flex-direction: $direction;
-     -moz-flex-direction: $direction;
-      -ms-flex-direction: $direction;
-          flex-direction: $direction;
-}

@mixin absolute-center()
 {
-  @include display-flex();
-  -webkit-box-align: center;
-     -moz-box-align: center;
-     -ms-flex-align: center;
-  -webkit-align-items: center;
-          align-items: center;
-  -webkit-box-pack: center;
-     -moz-box-pack: center;
-     -ms-flex-pack: center;
-  -webkit-justify-content: center;
-          justify-content: center;
+
 }

@mixin linear-gradient($from-color, $to-color) {
@ -133,37 +16,13 @@ $blur-intensity-nsfw: 20px;
  background-image:         linear-gradient(top, $from-color, $to-color);
 }

-@mixin box-sizing( $type: border-box ) {
-    -webkit-box-sizing: $type;
-       -moz-box-sizing: $type;
-         -o-box-sizing: $type;
-        -ms-box-sizing: $type;
-            box-sizing: $type;
-}
-
-@mixin background-size ($size) {
-    -webkit-background-size: $size;
-    -moz-background-size: $size;
-    -o-background-size: $size;
-    background-size: $size;
-}
-
@mixin placeholder {
  &::-webkit-input-placeholder {@content}
  &:-moz-placeholder {@content}
  &:-ms-input-placeholder {@content}
 }

-@mixin offscreen() {
-  position: absolute;
-  left: -9999px;
-  top:auto;
-  width:1px;
-  height:1px;
-  overflow:hidden;
-}
-
-@mixin text-link($color: $color-primary, $hover-opacity: 0.70) {
+@mixin text-link($color: var(--color-primary), $hover-opacity: 0.70) {
  .icon
  {
    &:first-child {
@ -183,7 +42,7 @@ $blur-intensity-nsfw: 20px;
  &:hover
  {
    opacity: $hover-opacity;
-    transition: opacity $transition-standard;
+    transition: opacity  var(--transition-duration) var(--transition-type);
    text-decoration: underline;
    .icon {
      text-decoration: none;
@ -192,4 +51,4 @@ $blur-intensity-nsfw: 20px;

  color: $color;
  cursor: pointer;
-}
+}
--- a/ui/scss/_gui.scss
+++ b/ui/scss/_gui.scss
@ -3,23 +3,30 @@
 html
 {
  height: 100%;
-  font-size: $font-size;
+  font-size: var(--font-size);
 }
 body
 {
+  color: var(--text-color);
  font-family: 'Source Sans Pro', sans-serif;
-  line-height: $font-line-height;
+  line-height: var(--font-line-height);
+}
+
+/* Custom text selection */
+*::selection {
+  background: var(--text-selection-bg);
+  color: var(--text-selection-color);
 }

 #window
 {
  min-height: 100vh;
-  background: $color-canvas;
+  background: var(--window-bg);
 }

 .badge
 {
-  background: $color-money;
+  background: var(--color-money);
  display: inline-block;
  padding: 2px;
  color: white;
@ -28,13 +35,13 @@ body
 .credit-amount--indicator
 {
  font-weight: bold;
-  color: $color-money;
+  color: var(--color-money);
 }

 #main-content
 {
  padding: $spacing-vertical;
-  margin-top: $height-header;
+  margin-top: var(--header-height);
  display: flex;
  flex-direction: column;
  main {
@ -87,7 +94,7 @@ sub { top: 0.4em; }

 code {
  font: 0.8em Consolas, 'Lucida Console', 'Source Sans', monospace;
-  background-color: #eee;
+  background-color: var(--color-bg-alt);
 }

 p
@ -136,18 +143,18 @@ p

 .help {
  font-size: .85em;
-  color: $color-help;
+  color: var(--color-help);
 }

 .meta
 {
  font-size: 0.9em;
-  color: $color-meta-light;
+  color: var(--color-meta-light);
 }

 .empty
 {
-  color: $color-meta-light;
+  color:var(--color-meta-light);
  font-style: italic;
 }

@ -167,7 +174,7 @@ p
  text-align: right;
  line-height: 1;
  font-size: 0.85em;
-  color: $color-help;
+  color: var(--color-help);
 }

 section.section-spaced {
--- a/ui/scss/_vars.scss
+++ b/ui/scss/_vars.scss
@ -0,0 +1,123 @@
+@import "global";
+
+:root {
+
+  /* Colors */
+  --color-brand: #155B4A;
+  --color-primary: #155B4A;
+  --color-primary-light: saturate(lighten(#155B4A, 50%), 20%);
+  --color-light-alt: hsl(hue(#155B4A), 15, 85);
+  --color-dark-overlay: rgba(32,32,32,0.9);
+  --color-help: rgba(0,0,0,.6);
+  --color-notice: #8a6d3b;
+  --color-error: #a94442;
+  --color-load-screen-text: #c3c3c3;
+  --color-meta-light: #505050;
+  --color-money: #216C2A;
+  --color-download: #444;
+  --color-canvas: #f5f5f5;
+  --color-bg: #ffffff;
+  --color-bg-alt: #D9D9D9;
+
+
+  /* Misc */
+  --content-max-width: 1000px;
+  --nsfw-blur-intensity: 20px;
+  --height-video-embedded: $width-page-constrained * 9 / 16 ;
+
+  /* Font */
+  --font-size: 16px;
+  --font-line-height: 1.3333;
+  --font-size-subtext-multiple: 0.82;
+
+  /* Shadows */
+  --box-shadow-layer: 0 2px 2px 0 rgba(0,0,0,.14),0 3px 1px -2px rgba(0,0,0,.2),0 1px 5px 0 rgba(0,0,0,.12);
+  --box-shadow-focus: 2px 4px 4px 0 rgba(0,0,0,.14),2px 5px 3px -2px rgba(0,0,0,.2),2px 3px 7px 0 rgba(0,0,0,.12);
+
+  /* Transition */
+  --transition-duration: .225s;
+  --transition-type: ease;
+
+  /* Text */
+  --text-color: #000;
+  --text-help-color: #EEE;
+  --text-max-width: 660px;
+  --text-link-padding: 4px;
+  --text-selection-bg: rgba(saturate(lighten(#155B4A, 20%), 20%), 1); // temp color
+  --text-selection-color: #FFF;
+
+  /* Window */
+  --window-bg: var(--color-canvas);
+
+  /* Input */
+  --input-bg: transparent;
+  --input-active-bg: transparent;
+  --input-width: 330px;
+  --input-color: var(--text-color);
+  --input-border-size: 2px;
+  --input-border-color: rgba(0,0,0,.25);
+
+  /* Select */
+  --select-bg: var(--color-bg-alt);
+  --select-color: var(--text-color);
+
+  /* Button */
+  --button-bg: var(--color-bg-alt);
+  --button-color: #FFF;
+  --button-primary-bg: var(--color-primary);
+  --button-primary-color: #FFF;
+  --button-padding: $spacing-vertical * 2/3;
+  --button-height: $spacing-vertical * 1.5;
+  --button-intra-margin: $spacing-vertical;
+
+  /* Header */
+  --header-bg: var(--color-bg);
+  --header-color: #666;
+  --header-active-color: rgba(0,0,0, 0.85);
+  --header-height: $spacing-vertical * 2.5;
+  --header-button-bg: var(--button-bg);
+
+  /* Header -> search */
+  --search-bg: rgba(255, 255, 255, 0.7);
+  --search-border:1px solid #ccc;
+  --search-color: #666;
+  --search-active-color: var(--header-active-color);
+
+  /* Tabs */
+  --tab-bg: transparent;
+  --tab-color: #666;
+  --tab-active-color: var(--header-active-color);
+  --tab-border-size: 2px;
+  --tab-border: var(--tab-border-size) solid var(--tab-active-color);
+
+  /* Table */
+  --table-border: 1px solid #e2e2e2;
+  --table-item-even: white;
+  --table-item-odd: #f4f4f4;
+
+  /* Card */
+  --card-bg: var(--color-bg);
+  --card-hover-translate: 10px;
+  --card-margin: $spacing-vertical * 2/3;
+  --card-max-width: $width-page-constrained;
+  --card-padding: $spacing-vertical * 2/3;
+  --card-radius: 2px;
+  --card-link-scaling: 1.1;
+  --card-small-width: $spacing-vertical * 10;
+
+  /* Modal */
+  --modal-bg: var(--color-bg);
+  --modal-overlay-bg: rgba(#F5F5F5, 0.75); // --color-canvas: #F5F5F5
+  --modal-border: 1px solid rgb(204, 204, 204);
+
+  /* Menu */
+  --menu-bg: var(--color-bg);
+  --menu-radius: 2px;
+  --menu-item-hover-bg: var(--color-bg-alt);
+
+  /* Tooltip */
+  --tooltip-width: 300px;
+  --tooltip-bg: var(--color-bg);
+  --tooltip-color: var(--text-color);
+  --tooltip-border: 1px solid #aaa;
+}
--- a/ui/scss/all.scss
+++ b/ui/scss/all.scss
@ -1,4 +1,5 @@
@import "_reset";
+@import "_vars";
@import "_icons";
@import "_gui";
@import "component/_table";
@ -18,6 +19,7 @@
@import "component/_snack-bar.scss";
@import "component/_video.scss";
@import "component/_pagination.scss";
+@import "component/_markdown-editor.scss";
@import "page/_developer.scss";
@import "page/_reward.scss";
@import "page/_show.scss";
--- a/ui/scss/component/_button.scss
+++ b/ui/scss/component/_button.scss
@ -8,15 +8,15 @@ $button-focus-shift: 12%;

  + .button-set-item
  {
-    margin-left: $spacing-vertical;
+    margin-left: var(--button-intra-margin);
  }
 }

 .button-block, .faux-button-block
 {
  display: inline-block;
-  height: $height-button;
-  line-height: $height-button;
+  height: var(--button-height);
+  line-height: var(--button-height);
  text-decoration: none;
  border: 0 none;
  text-align: center;
@ -46,25 +46,26 @@ $button-focus-shift: 12%;
 }

 .button__content {
-  margin: 0 $padding-button;
+  margin: 0 var(--button-padding);
 }

 .button-primary
 {
-  $color-button-text: white;
-  color: darken($color-button-text, $button-focus-shift * 0.5);
-  background-color: $color-primary;
-  box-shadow: $box-shadow-layer;
+
+  color: var(--button-primary-color);
+  background-color: var(--button-primary-bg);
+  box-shadow: var(--box-shadow-layer);
+
  &:focus {
-    color: $color-button-text;
+    //color: var(--button-primary-active-color);
+    //background-color:color: var(--button-primary-active-bg);
    //box-shadow: $box-shadow-focus;
-    background-color: mix(black, $color-primary, $button-focus-shift)
  }
 }
 .button-alt
 {
-  background-color: $color-bg-alt;
-  box-shadow: $box-shadow-layer;
+  background-color: var(--button-bg);
+  box-shadow: var(--box-shadow-layer);
 }

 .button-text
@ -73,15 +74,15 @@ $button-focus-shift: 12%;
  display: inline-block;

  .button__content {
-    margin: 0 $padding-text-link;
+    margin: 0 var(--text-link-padding);
  }
 }
 .button-text-help
 {
-  @include text-link(#aaa);
+  @include text-link(var(--text-help-color));
  font-size: 0.8em;
 }
 .button--flat
 {
  box-shadow: none !important;
-}
+}
--- a/ui/scss/component/_card.scss
+++ b/ui/scss/component/_card.scss
@ -1,17 +1,13 @@
@import "../global";

-$padding-card-horizontal: $spacing-vertical * 2/3;
-$translate-card-hover: 10px;
-$width-card-small: $spacing-vertical * 10;
-
 .card {
  margin-left: auto;
  margin-right: auto;
-  max-width: $width-page-constrained;
-  background: $color-bg;
-  box-shadow: $box-shadow-layer;
-  border-radius: 2px;
-  margin-bottom: $spacing-vertical * 2/3;
+  max-width: var(--card-max-width);
+  background: var(--card-bg);
+  box-shadow: var(--box-shadow-layer);
+  border-radius: var(--card-radius);
+  margin-bottom: var(--card-margin);
  overflow: auto;
 }
 .card--obscured
@ -19,15 +15,14 @@ $width-card-small: $spacing-vertical * 10;
  position: relative;
 }
 .card--obscured .card__inner {
-  filter: blur($blur-intensity-nsfw);
+  filter: blur( var(--nsfw-blur-intensity) );
 }
 .card__title-primary,
 .card__title-identity,
 .card__content,
 .card__subtext,
 .card__actions {
-  padding-left: $padding-card-horizontal;
-  padding-right: $padding-card-horizontal;
+  padding: 0 var(--card-padding);
 }
 .card--small {
  .card__title-primary,
@ -35,29 +30,37 @@ $width-card-small: $spacing-vertical * 10;
  .card__actions,
  .card__content,
  .card__subtext {
-    padding: 0 $padding-card-horizontal / 2;
+    padding: 0 calc(var(--card-padding) / 2);
  }
 }
 .card__title-primary {
-  margin-top: $spacing-vertical * 2/3;
-  margin-bottom: $spacing-vertical * 2/3;
+  margin-top: var(--card-margin);
+  margin-bottom: var(--card-margin);
 }
 .card__title-identity {
  margin-top: $spacing-vertical * 1/3;
  margin-bottom: $spacing-vertical * 1/3;
 }
 .card__actions {
-  margin-top: $spacing-vertical * 2/3;
-  margin-bottom: $spacing-vertical * 2/3;
+  margin-top: var(--card-margin);
+  margin-bottom: var(--card-margin);
+}
+.card__actions--bottom {
+  margin-top: $spacing-vertical * 1/3;
+  margin-bottom: $spacing-vertical * 1/3;
+}
+.card__actions--form-submit {
+  margin-top: $spacing-vertical;
+  margin-bottom: var(--card-margin);
 }
 .card__content {
-  margin-top: $spacing-vertical * 2/3;
-  margin-bottom: $spacing-vertical * 2/3;
+  margin-top: var(--card-margin);
+  margin-bottom: var(--card-margin);
 }
 $font-size-subtext-multiple: 0.82;
 .card__subtext {
-  color: $color-meta-light;
-  font-size: $font-size-subtext-multiple * 1.0em;
+  color: var(--color-meta-light);
+  font-size: calc( var(--font-size-subtext-multiple) * 1.0em );
  margin-top: $spacing-vertical * 1/3;
  margin-bottom: $spacing-vertical * 1/3;
 }
@ -65,7 +68,7 @@ $font-size-subtext-multiple: 0.82;
  white-space: pre-wrap;
 }
 .card__subtext--two-lines {
-  height: $font-size * $font-size-subtext-multiple * $font-line-height * 2; /*this is so one line text still has the proper height*/
+  height: calc( var(--font-size) * var(--font-size-subtext-multiple) * var(--font-line-height) * 2); /*this is so one line text still has the proper height*/
 }
 .card-overlay {
  position: absolute;
@ -74,14 +77,13 @@ $font-size-subtext-multiple: 0.82;
  top: 0px;
  bottom: 0px;
  padding: 20px;
-  background-color: rgba(128, 128, 128, 0.8);
+  background-color: var(--color-dark-overlay);
  color: #fff;
  display: flex;
  align-items: center;
  font-weight: 600;
 }

-$card-link-scaling: 1.1;
 .card__link {
  display: block;
 }
@ -91,14 +93,14 @@ $card-link-scaling: 1.1;
 .card--link:hover {
  position: relative;
  z-index: 1;
-  box-shadow: $box-shadow-focus;
-  transform: scale($card-link-scaling) translateX($translate-card-hover);
+  box-shadow: var(--box-shadow-focus);
+  transform: scale(var(--card-link-scaling)) translateX(var(--card-hover-translate));
  transform-origin: 50% 50%;
  overflow-x: visible;
  overflow-y: visible
 }
 .card--link:hover ~ .card--link {
-  transform: translateX($translate-card-hover * 2);
+  transform: translateX(calc(var(--card-hover-translate) * 2));
 }

 .card__media {
@ -152,33 +154,30 @@ $card-link-scaling: 1.1;
  position: absolute;
  top: 36%
 }
-
-
-
 .card--small {
-  width: $width-card-small;
+  width: var(--card-small-width);
  overflow-x: hidden;
  white-space: normal;
 }
 .card--small .card__media {
-  height: $width-card-small * 9 / 16;
+  height: calc( var(--card-small-width) * 9 / 16);
 }

 .card--form {
-  width: $width-input-text + $padding-card-horizontal * 2;
+  width: calc( var(--input-width) + var(--card-padding) * 2);
 }

 .card__subtitle {
-  color: $color-help;
+  color: var(--color-help);
  font-size: 0.85em;
-  line-height: $font-line-height * 1 / 0.85;
+  line-height: calc( var(--font-line-height) * 1 / 0.85);
 }

 .card-series-submit
 {
  margin-left: auto;
  margin-right: auto;
-  max-width: $width-page-constrained;
+  max-width: var(--card-max-width);
  padding: $spacing-vertical / 2;
 }

@ -187,8 +186,10 @@ $card-link-scaling: 1.1;
    margin-top: $spacing-vertical * 1/3;
  }
 }
+
 $padding-top-card-hover-hack: 20px;
 $padding-right-card-hover-hack: 30px;
+
 .card-row__items {
  width: 100%;
  overflow: hidden;
@ -211,7 +212,7 @@ $padding-right-card-hover-hack: 30px;
  overflow: hidden;
  white-space: nowrap;
  width: 100%;
-  min-width: $width-card-small;
+  min-width: var(--card-small-width);
  margin-right: $spacing-vertical;
 }
 .card-row__header {
@ -226,14 +227,14 @@ $padding-right-card-hover-hack: 30px;

 .card-row__nav {
  position: absolute;
-  padding: 0 $spacing-vertical * 2 / 3;
+  padding: 0 var(--card-margin);
  height: 100%;
-  top: $padding-top-card-hover-hack - $spacing-vertical * 2 / 3;
+  top: calc( $padding-top-card-hover-hack - var(--card-margin) );
 }
 .card-row__nav .card-row__scroll-button {
-  background: $color-bg;
-  color: $color-help;
-  box-shadow: $box-shadow-layer;
+  background: var(--card-bg);
+  color: var(--color-help);
+  box-shadow: var(--box-shadow-layer);
  padding: $spacing-vertical $spacing-vertical / 2;
  position: absolute;
  cursor: pointer;
@ -245,7 +246,7 @@ $padding-right-card-hover-hack: 30px;

  &:hover {
    opacity: 1.0;
-    transform: scale($card-link-scaling * 1.1)
+    transform: scale(calc( var(--card-link-scaling) * 1.1));
  }
 }
 .card-row__nav--left {
@ -259,7 +260,6 @@ $padding-right-card-hover-hack: 30px;
  color: orangered;
 }

-
 /*
 if we keep doing things like this, we should add a real grid system, but I'm going to be a selective dick about it - Jeremy
 */
--- a/ui/scss/component/_channel-indicator.scss
+++ b/ui/scss/component/_channel-indicator.scss
@ -1,5 +1,5 @@
@import "../global";

 .channel-indicator__icon--invalid {
-  color: $color-error;
+  color: var(--color-error);
 }
--- a/ui/scss/component/_file-actions.scss
+++ b/ui/scss/component/_file-actions.scss
@ -1,27 +1,25 @@
@import "../global";

-$color-download: #444;
-
 .file-actions
 {
-  line-height: $height-button;
-  min-height: $height-button;
+  line-height: var(--button-height);
+  min-height: var(--button-height);
 }

 .file-actions__download-status-bar, .file-actions__download-status-bar-overlay {
   .button__content {
-     margin: 0 $padding-text-link;
+     margin: 0 var(--text-link-padding);
   }
 }

 .file-actions__download-status-bar
 {
  position: relative;
-  color: $color-download;
+  color: var(--color-download);
 }
 .file-actions__download-status-bar-overlay
 {
-  background: $color-download;
+  background: var(--color-download);
  color: white;
  position: absolute;
  white-space: nowrap;
@ -29,4 +27,4 @@ $color-download: #444;
  z-index: 1;
  top: 0px;
  left: 0px;
-}
+}
--- a/ui/scss/component/_form-field.scss
+++ b/ui/scss/component/_form-field.scss
@ -1,7 +1,5 @@
@import "../global";

-$width-input-border: 2px;
-
 .form-row-submit
 {
  margin-top: $spacing-vertical;
@ -15,7 +13,7 @@ $width-input-border: 2px;
  margin-top: $spacing-vertical * 5/6;
  margin-bottom: $spacing-vertical * 1/6;
  line-height: 1;
-  font-size: 0.9 * $font-size;
+  font-size:calc( 0.9 * var(--font-size));
 }
 .form-row__label-row--prefix {
  float: left;
@ -23,15 +21,17 @@ $width-input-border: 2px;
 }

 input[type="text"].input-copyable {
-  border: 1px solid $color-form-border;
+  background: var(--input-bg);
+  border-bottom: var(--input-border-size) solid var(--input-border-color);
+  color: var(--input-color);
  line-height: 1;
  padding-top: $spacing-vertical * 1/3;
  padding-bottom: $spacing-vertical * 1/3;
-  width: $width-input-text;
+  width: var(--input-width);
  padding-left: 5px;
  padding-right: 5px;
  width: 100%;
-  &:focus { border-color: black; }
+  &:focus { border-color: var(--color-primary); }
 }

 .form-field {
@ -43,14 +43,15 @@ input[type="text"].input-copyable {
  }

  select {
-    transition: outline $transition-standard;
-    cursor: pointer;
+    transition: outline var(--transition-duration) var(--transition-type);
    box-sizing: border-box;
    padding-left: 5px;
    padding-right: 5px;
    height: $spacing-vertical;
+    background: var(--select-bg);
+    color: var(--select-color);
    &:focus {
-      outline: $width-input-border solid $color-primary;
+      outline:  var(--input-border-size) solid var(--color-primary);
    }
  }

@ -62,16 +63,18 @@ input[type="text"].input-copyable {
  input[type="search"],
  input[type="date"] {
    @include placeholder {
-      color: lighten($color-text-dark, 60%);
+      //color: lighten($color-text-dark, 60%);
    }
-    transition: all $transition-standard;
+    transition: all  var(--transition-duration) var(--transition-type);
    cursor: pointer;
    padding-left: 1px;
    padding-right: 1px;
    box-sizing: border-box;
    -webkit-appearance: none;
+    background: var(--input-bg);
+    color: var(--input-color);
    &[readonly] {
-      background-color: #bbb;
+      background-color: var(--input-bg);
    }
  }

@ -81,12 +84,13 @@ input[type="text"].input-copyable {
  input[type="number"],
  input[type="search"],
  input[type="date"] {
-    border-bottom: $width-input-border solid $color-form-border;
+    border-bottom: var(--input-border-size) solid var(--input-border-color);
    line-height: 1;
    padding-top: $spacing-vertical * 1/3;
    padding-bottom: $spacing-vertical * 1/3;
+
    &.form-field__input--error {
-      border-color: $color-error;
+      border-color: var(--color-error);
    }
    &.form-field__input--inline {
      padding-top: 0;
@ -104,12 +108,13 @@ input[type="text"].input-copyable {
  input[type="number"]:focus,
  input[type="search"]:focus,
  input[type="date"]:focus {
-    border-color: $color-primary;
+    border-color: var(--color-primary);
+    background: var(--input-active-bg);
  }

  textarea {
    padding: 2px;
-    border: $width-input-border solid $color-form-border;
+    border: var(--input-border-size) solid var(--input-border-color);
  }
 }
 .form-field--SimpleMDE {
@ -117,6 +122,7 @@ input[type="text"].input-copyable {
 }

 .form-field__label {
+  color: var(--color-help);
  &[for] {  cursor: pointer; }
  > input[type="checkbox"], input[type="radio"] {
    margin-right: 6px;
@ -124,11 +130,11 @@ input[type="text"].input-copyable {
 }

 .form-field__label--error {
-  color: $color-error;
+  color: var(--color-error);
 }

 .form-field__input-text {
-  width: $width-input-text;
+  width: var(--input-width);
 }

 .form-field__prefix {
@ -153,16 +159,16 @@ input[type="text"].input-copyable {
 .form-field__error, .form-field__helper {
  margin-top: $spacing-vertical * 1/3;
  font-size: 0.8em;
-  transition: opacity $transition-standard;
+  transition: opacity  var(--transition-duration) var(--transition-type);
 }

 .form-field__error {
-  color: $color-error;
+  color: var(--color-error);
 }
 .form-field__helper {
-  color: $color-help;
+  color:var(--color-help);
 }

 .form-field__input.form-field__input-SimpleMDE .CodeMirror-scroll {
  height: auto;
-}
+}
--- a/ui/scss/component/_header.scss
+++ b/ui/scss/component/_header.scss
@ -1,15 +1,12 @@
@import "../global";

-$color-header: #666;
-$color-header-active: darken($color-header, 20%);
-
 #header
 {
-  color: $color-header;
-  background: #fff;
+  color: var(--header-color);
+  background: var(--header-bg);
  display: flex;
  position: fixed;
-  box-shadow: $box-shadow-layer;
+  box-shadow: var(--box-shadow-layer);
  top: 0;
  left: 0;
  width: 100%;
@ -21,7 +18,11 @@ $color-header-active: darken($color-header, 20%);
  flex: 0 0 content;
  padding-left: $spacing-vertical / 4;
  padding-right: $spacing-vertical / 4;
+  .button-alt {
+      background: var(--header-button-bg) !important;
+  }
 }
+
 .header__item--wunderbar {
  flex-grow: 1;
 }
@ -36,23 +37,24 @@ $color-header-active: darken($color-header, 20%);
  }
 }

-.wunderbar--active .icon-search { color: $color-primary; }
+.wunderbar--active .icon-search { color: var(--color-primary); }

 .wunderbar__input {
-  background: rgba(255, 255, 255, 0.7);
+  background: var(--search-bg);
  width: 100%;
-  color: $color-header;
+  color: var(--search-color);
  height: $spacing-vertical * 1.5;
  line-height: $spacing-vertical * 1.5;
  padding-left: 38px;
  padding-right: 5px;
-  border: 1px solid $color-text-dark;
-  @include border-radius(2px);
-  border: 1px solid #ccc;
+  border-radius: 2px;
+  border: var(--search-border);
+  transition: box-shadow var(--transition-duration) var(--transition-type);
  &:focus {
-    color: $color-header-active;
-    box-shadow: $box-shadow-focus;
-    border-color: $color-primary;
+    background: var(--search-active-bg);
+    color: var(--search-active-color);
+    box-shadow: var(--box-shadow-focus);
+    border-color: var(--color-primary);
  }
 }

@ -65,12 +67,12 @@ nav.sub-header
  margin-right: auto;
  > a
  {
-    $sub-header-selected-underline-height: 2px;
    display: inline-block;
    margin: 0 15px;
    padding: 0 5px;
-    line-height: $height-header - $spacing-vertical - $sub-header-selected-underline-height;
-    color: $color-header;
+    line-height:calc(var(--header-height) - $spacing-vertical - var(--tab-border-size));
+    color: var(--tab-color);
+
    &:first-child
    {
      margin-left: 0;
@ -81,12 +83,12 @@ nav.sub-header
    }
    &.sub-header-selected
    {
-      border-bottom: $sub-header-selected-underline-height solid $color-header-active;
-      color: $color-header-active;
+      border-bottom: var(--tab-border);
+      color: var(--tab-active-color);
    }
    &:hover
    {
-      color: $color-header-active;
+      color: var(--tab-active-color);
    }
  }
-}
+}
--- a/ui/scss/component/_load-screen.scss
+++ b/ui/scss/component/_load-screen.scss
@ -2,7 +2,7 @@

 .load-screen {
  color: white;
-  background: $color-primary;
+  background: var(--color-brand);
  background-size: cover;
  min-height: 100vh;
  min-width: 100vw;
@ -19,7 +19,7 @@
 }

 .load-screen__details {
-  color: $color-load-screen-text;
+  color: var(--color-load-screen-text);
 }

 .load-screen__details--warning {
--- a/ui/scss/component/_markdown-editor.scss
+++ b/ui/scss/component/_markdown-editor.scss
@ -0,0 +1,99 @@
+.CodeMirror {
+    background: var(--input-active-bg) !important;
+    border: 1px solid var(--input-border-color) !important;
+    color: var(--text-color) !important;
+}
+
+.CodeMirror-fullscreen {
+    background: var(--input-bg);
+}
+
+.editor-toolbar {
+    border: 1px solid var(--input-border-color) !important;
+    border-bottom: 0 !important;
+}
+
+.editor-toolbar i.separator {
+    border-color:  var(--input-border-color) !important;
+}
+
+.editor-toolbar.fullscreen {
+    background: var(--color-bg) !important;
+}
+
+div.editor-toolbar a {
+    color:  var(--text-color) !important;
+}
+
+.editor-toolbar a.active,
+.editor-toolbar a:hover {
+    background: var(--button-bg) !important;
+    border-color: transparent !important;
+}
+
+.editor-toolbar.disabled-for-preview a:not(.no-disable) {
+    background: transparent !important;
+    border-color: transparent !important;
+}
+
+.editor-statusbar {
+    color: #959694;
+}
+
+.editor-preview {
+    background: var(--card-bg) !important;
+}
+
+.editor-preview-side {
+    background: var(--color-bg-alt) !important;
+    border: 1px solid var(--input-border-color) !important;
+}
+
+.editor-preview pre,
+.editor-preview-side pre {
+    background: #eee;
+}
+
+.editor-preview table td,
+.editor-preview table th,
+.editor-preview-side table td,
+.editor-preview-side table th {
+    border: 1px solid var(--input-border-color) !important;
+}
+
+.CodeMirror .CodeMirror-code .cm-tag {
+    color: #63a35c;
+}
+
+.CodeMirror .CodeMirror-code .cm-attribute {
+    color: #795da3;
+}
+
+.CodeMirror .CodeMirror-code .cm-string {
+    color: #183691;
+}
+
+.CodeMirror .CodeMirror-selected {
+    background: var(--text-selection-bg) !important;
+    color: var(--text-selection-color) !important;
+}
+
+.CodeMirror .CodeMirror-cursor{
+    border-color: var(--text-color) !important;
+}
+
+.CodeMirror .CodeMirror-code .cm-comment {
+    background: rgba(0, 0, 0, .05);
+}
+
+.CodeMirror .CodeMirror-code .cm-link {
+    color: #7f8c8d;
+}
+
+.CodeMirror .CodeMirror-code .cm-url {
+    color: #aab2b3;
+}
+
+.CodeMirror .CodeMirror-placeholder {
+    opacity: .5;
+}
--- a/ui/scss/component/_menu.scss
+++ b/ui/scss/component/_menu.scss
@ -9,9 +9,9 @@ $border-radius-menu: 2px;
 .menu {
  position: absolute;
  white-space: nowrap;
-  background-color: white;
-  box-shadow: $box-shadow-layer;
-  border-radius: $border-radius-menu;
+  background-color: var(--menu-bg);
+  box-shadow: var(--box-shadow-layer);
+  border-radius: var(--menu-radius);
  padding-top: ($spacing-vertical / 5) 0px;
  z-index: 1;
 }
@ -20,6 +20,6 @@ $border-radius-menu: 2px;
  display: block;
  padding: ($spacing-vertical / 4) ($spacing-vertical / 2);
  &:hover {
-    background: $color-bg-alt;
+    background: var(--menu-item-hover-bg);
  }
-}
+}
--- a/ui/scss/component/_modal.scss
+++ b/ui/scss/component/_modal.scss
@ -10,7 +10,7 @@
  left: 0px;
  right: 0px;
  bottom: 0px;
-  background-color: rgba(255, 255, 255, 0.74902);
+  background-color: var(--modal-overlay-bg);
  z-index: 9999;
 }

@ -24,12 +24,12 @@
  justify-content: center;
  align-items: center;

-  border: 1px solid rgb(204, 204, 204);
-  background: rgb(255, 255, 255);
+  border: var(--modal-border);
+  background: var(--modal-bg);
  overflow: auto;
  border-radius: 4px;
  padding: $spacing-vertical;
-  box-shadow: $box-shadow-layer;
+  box-shadow: var(--box-shadow-layer);
  max-width: 400px;

  word-break: break-word;
@ -52,7 +52,7 @@
 }

 .error-modal-overlay {
-  background: rgba(#000, .88);
+  background: var(--modal-overlay-bg);
 }

 .error-modal__content {
@ -74,7 +74,7 @@
  width: 400px;
 }
 .error-modal__error-list { /*shitty hack/temp fix for long errors making modal unusable*/
-  border: 1px solid #eee;
+  border: 1px solid var(--input-border-color);
  padding: 8px;
  list-style: none;
  max-height: 400px;
--- a/ui/scss/component/_pagination.scss
+++ b/ui/scss/component/_pagination.scss
@ -32,5 +32,5 @@

 .pagination__item--selected {
  color: white;
-  background: $color-primary;
+  background: var(--color-primary);
 }
--- a/ui/scss/component/_snack-bar.scss
+++ b/ui/scss/component/_snack-bar.scss
@ -16,7 +16,7 @@ $padding-snack-horizontal: $spacing-vertical;
  margin-right: auto;
  min-width: 300px;
  max-width: 500px;
-  background: $color-black-transparent;
+  background: var(--color-dark-overlay);
  color: #f0f0f0;

  display: flex;
@ -25,7 +25,7 @@ $padding-snack-horizontal: $spacing-vertical;

  border-radius: 2px;

-  transition: all $transition-standard;
+  transition: all  var(--transition-duration) var(--transition-type);

  z-index: 10000; /*hack to get it over react modal */
 }
@ -33,7 +33,7 @@ $padding-snack-horizontal: $spacing-vertical;
 .snack-bar__action {
  display: inline-block;
  text-transform: uppercase;
-  color: $color-primary-light;
+  color: var(--color-primary-light);
  margin: 0px 0px 0px $padding-snack-horizontal;
  min-width: min-content;
  &:hover {
--- a/ui/scss/component/_table.scss
+++ b/ui/scss/component/_table.scss
@ -20,7 +20,7 @@ table.table-standard {
    font-size: 0.9em;
    padding: $spacing-vertical/4+1 8px $spacing-vertical/4-2;
    text-align: left;
-    border-bottom: 1px solid #e2e2e2;
+    border-bottom: var(--table-border);
    img {
      vertical-align: text-bottom;
    }
@ -29,7 +29,7 @@ table.table-standard {
    }
  }
  tr.thead:not(:first-child) th {
-    border-top: 1px solid #e2e2e2;
+    border-top: var(--table-border);
  }
  tfoot td {
    padding: $spacing-vertical / 2 8px;
@ -38,10 +38,10 @@ table.table-standard {
  tbody {
    tr {
      &:nth-child(even):not(.odd) {
-        background-color: #f4f4f4;
+        background-color: var(--table-item-odd);
      }
      &:nth-child(odd):not(.even) {
-        background-color: white;
+        background-color: var(--table-item-even);
      }
      &.thead {
        background: none;
@ -60,4 +60,4 @@ table.table-standard {

 table.table-stretch {
  width: 100%;
-}
+}
--- a/ui/scss/component/_tooltip.scss
+++ b/ui/scss/component/_tooltip.scss
@ -9,28 +9,25 @@
 }

 .tooltip__body {
-  $tooltip-body-width: 300px;
-
  position: absolute;
  z-index: 1;
  left: 50%;
-  margin-left: $tooltip-body-width * -1 / 2;
+  margin-left: calc(var(--tooltip-width) * -1 / 2);
  white-space: normal;
-
  box-sizing: border-box;
  padding: $spacing-vertical / 2;
-  width: $tooltip-body-width;
-  border: 1px solid #aaa;
-  color: $color-text-dark;
-  background-color: $color-bg;
-  font-size: $font-size * 7/8;
-  line-height: $font-line-height;
-  box-shadow: $box-shadow-layer;
+  width: var(--tooltip-width);
+  border: var(--tooltip-border);
+  color: var(--tooltip-color);
+  background-color: var(--tooltip-bg);
+  font-size: calc(var(--font-size) * 7/8);
+  line-height: var(--font-line-height);
+  box-shadow: var(--box-shadow-layer);
 }

 .tooltip--header .tooltip__link {
  @include text-link(#aaa);
-  font-size: $font-size * 3/4;
-  margin-left: $padding-button;
+  font-size: calc( var(--font-size) * 3/4 );
+  margin-left: var(--button-padding);
  vertical-align: middle;
-}
+}
--- a/ui/scss/component/_video.scss
+++ b/ui/scss/component/_video.scss
@ -1,5 +1,7 @@
@import "../global";

+$height-video-embedded: $width-page-constrained * 9 / 16;
+
 video {
  object-fit: contain;
  box-sizing: border-box;
@ -37,7 +39,7 @@ video {
 .video--obscured .video__cover
 {
  position: relative;
-  filter: blur($blur-intensity-nsfw);
+  filter: blur(var(--nsfw-blur-intensity));
 }


@ -108,7 +110,11 @@ video {
  background-position: center center;
  background-repeat: no-repeat;
  position: relative;
-  .video__play-button { @include absolute-center(); }
+  .video__play-button {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
 }

 .video__play-button {
@ -120,12 +126,12 @@ video {
  font-size: $spacing-vertical * 3;
  color: white;
  z-index: 1;
-  background: $color-black-transparent;
+  background: var(--color-dark-overlay);
  opacity: 0.6;
  left: 0;
  top: 0;
  &:hover {
    opacity: 1;
-    transition: opacity $transition-standard;
+    transition: opacity var(--transition-duration) var(--transition-type);
  }
 }
--- a/ui/scss/page/_reward.scss
+++ b/ui/scss/page/_reward.scss
@ -1,5 +1,5 @@
@import "../global";

 .reward-page__details {
-  background-color: lighten($color-canvas, 1.5%);
-}
+  //background-color: lighten($color-canvas, 1.5%);
+}
--- a/ui/watch.sh
+++ b/ui/watch.sh
@ -22,4 +22,4 @@ DIR="$( cd "$( dirname "${BASH_SOURCE[0]}" )" && pwd )"
  node_modules/.bin/node-sass --output $DIR/../app/dist/css --sourcemap=none --watch $DIR/scss/ &

  node_modules/.bin/webpack --config webpack.dev.config.js --progress --colors --watch
-)
+)