Merge branch 'btzr-io-master' into v16

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
   *
   *

ui/dist/quit.html

@@ -6,7 +6,6 @@
 
     <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 href="./js/mediaelement/mediaelementplayer.css" rel="stylesheet" type="text/css" />
     <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">

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

ui/dist/themes/light.css

@@ -0,0 +1,4 @@
+:root {
+    /* Colors */
+    --color-primary: #155B4A;
+}

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,

ui/js/actions/settings.js

@@ -1,10 +1,16 @@
 import * as types from "constants/action_types";
 import * as settings from "constants/settings";
+import { doAlertError } from "actions/app";
 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 { readdir } = remote.require("fs");
+
 export function doFetchDaemonSettings() {
   return function(dispatch, getState) {
     lbry.settings_get().then(settings => {
@@ -46,6 +52,27 @@ export function doSetClientSetting(key, value) {
   };
 }
 
+export function doGetThemes() {
+  return function(dispatch, getState) {
+    const dir = `${remote.app.getAppPath()}/dist/themes`;
+
+    readdir(dir, (error, files) => {
+      if (!error) {
+        dispatch(
+          doSetClientSetting(
+            settings.THEMES,
+            files
+              .filter(file => extname(file) === ".css")
+              .map(file => file.replace(".css", ""))
+          )
+        );
+      } else {
+        dispatch(doAlertError(error));
+      }
+    });
+  };
+}
+
 export function doDownloadLanguage(langFile) {
   return function(dispatch, getState) {
     const destinationPath = `app/locales/${langFile}`;

ui/js/component/app/view.jsx

@@ -1,6 +1,7 @@
 import React from "react";
 import Router from "component/router/index";
 import Header from "component/header";
+import Theme from "component/theme";
 import ModalRouter from "modal/modalRouter";
 import lbry from "lbry";
 
@@ -49,6 +50,7 @@ class App extends React.PureComponent {
   render() {
     return (
       <div id="window">
+        <Theme />
         <Header />
         <div id="main-content">
           <Router />

ui/js/component/link/view.jsx

@@ -8,7 +8,6 @@ const Link = props => {
     style,
     label,
     icon,
-    badge,
     button,
     disabled,
     children,
@@ -36,7 +35,6 @@ const Link = props => {
       <span {...("button" in props ? { className: "button__content" } : {})}>
         {"icon" in props ? <Icon icon={icon} fixed={true} /> : null}
         {label ? <span className="link-label">{label}</span> : null}
-        {"badge" in props ? <span className="badge">{badge}</span> : null}
       </span>
     );
   }

ui/js/component/theme/index.js

@@ -0,0 +1,10 @@
+import React from "react";
+import { connect } from "react-redux";
+import { selectThemePath } from "selectors/settings.js";
+import Theme from "./view";
+
+const select = state => ({
+  themePath: selectThemePath(state),
+});
+
+export default connect(select, null)(Theme);

ui/js/component/theme/view.jsx

@@ -0,0 +1,21 @@
+import React from "react";
+
+const Theme = props => {
+  const { themePath } = props;
+
+  if (!themePath) {
+    return null;
+  }
+
+  return (
+    <link
+      id="theme"
+      href={themePath}
+      rel="stylesheet"
+      type="text/css"
+      media="screen,print"
+    />
+  );
+};
+
+export default Theme;

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";

ui/js/lbry.js

@@ -39,6 +39,8 @@ let lbry = {
     customLighthouseServers: [],
     showDeveloperMenu: false,
     language: "en",
+    theme: "light",
+    themes: [],
   },
 };
 

ui/js/page/settings/index.js

@@ -1,12 +1,16 @@
 import React from "react";
 import { connect } from "react-redux";
+import * as settings from "constants/settings";
 import { doClearCache } from "actions/app";
 import {
   doSetDaemonSetting,
   doSetClientSetting,
+  doGetThemes,
+  doSetTheme,
   doChangeLanguage,
 } from "actions/settings";
 import {
+  makeSelectClientSetting,
   selectDaemonSettings,
   selectShowNsfw,
   selectLanguages,
@@ -19,12 +23,14 @@ const select = state => ({
   showNsfw: selectShowNsfw(state),
   language: selectCurrentLanguage(state),
   languages: selectLanguages(state),
+  theme: makeSelectClientSetting(settings.THEME)(state),
 });
 
 const perform = dispatch => ({
   setDaemonSetting: (key, value) => dispatch(doSetDaemonSetting(key, value)),
   clearCache: () => dispatch(doClearCache()),
   setClientSetting: (key, value) => dispatch(doSetClientSetting(key, value)),
+  getThemes: () => dispatch(doGetThemes()),
   changeLanguage: newLanguage => dispatch(doChangeLanguage(newLanguage)),
 });
 

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";
-
+import { remote } from "electron";
-const { remote } = require("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),
     };
   }
 
@@ -41,11 +42,6 @@ class SettingsPage extends React.PureComponent {
     this.props.setDaemonSetting(name, value);
   }
 
-  setClientSetting(name, value) {
-    lbry.setClientSetting(name, value);
-    this._onSettingSaveSuccess();
-  }
-
   onRunOnStartChange(event) {
     this.setDaemonSetting("run_on_startup", event.target.checked);
   }
@@ -66,6 +62,11 @@ class SettingsPage extends React.PureComponent {
     this.setDaemonSetting("disable_max_key_fee", isDisabled);
   }
 
+  onThemeChange(event) {
+    const { value } = event.target;
+    this.props.setClientSetting(settings.THEME, value);
+  }
+
   // onMaxUploadPrefChange(isLimited) {
   //   if (!isLimited) {
   //     this.setDaemonSetting("max_upload", 0.0);
@@ -103,8 +104,14 @@ class SettingsPage extends React.PureComponent {
 
   onShowUnavailableChange(event) {}
 
+  componentWillMount() {
+    this.props.getThemes();
+  }
+
+  componentDidMount() {}
+
   render() {
-    const { daemonSettings, language, languages } = this.props;
+    const { daemonSettings, language, languages, theme } = this.props;
 
     if (!daemonSettings || Object.keys(daemonSettings).length === 0) {
       return (
@@ -242,6 +249,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)}
+              value={theme}
+              className="form-field__input--inline"
+            >
+              {this.state.themes.map((theme, index) =>
+                <option key={theme} value={theme}>
+                  {theme}
+                </option>
+              )}
+            </FormField>
+
+          </div>
+        </section>
+
         <section className="card">
           <div className="card__content">
             <h3>{__("Application Cache")}</h3>

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: {},
 };

ui/js/selectors/settings.js

@@ -1,3 +1,4 @@
+import * as settings from "constants/settings";
 import { createSelector } from "reselect";
 
 const _selectState = state => state.settings || {};
@@ -33,3 +34,8 @@ export const selectLanguages = createSelector(
   _selectState,
   state => state.languages || {}
 );
+
+export const selectThemePath = createSelector(
+  makeSelectClientSetting(settings.THEME),
+  theme => "themes/" + (theme || "light") + ".css"
+);

ui/scss/_global.scss

@@ -1,195 +0,0 @@
-@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) {
-  background-color: $to-color; /* Fallback Color */
-  background-image: -webkit-linear-gradient(top, $from-color, $to-color); /* Chrome 10+, Saf5.1+, iOS 5+ */
-  background-image:    -moz-linear-gradient(top, $from-color, $to-color); /* FF3.6 */
-  background-image:     -ms-linear-gradient(top, $from-color, $to-color); /* IE10 */
-  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) {
-  .icon
-  {
-    &:first-child {
-      padding-right: 5px;
-    }
-    &:last-child:not(:only-child) {
-      padding-left: 5px;
-    }
-  }
-
-  &:not(.no-underline) {
-    text-decoration: underline;
-    .icon {
-      text-decoration: none;
-    }
-  }
-  &:hover
-  {
-    opacity: $hover-opacity;
-    transition: opacity $transition-standard;
-    text-decoration: underline;
-    .icon {
-      text-decoration: none;
-    }
-  }
-
-  color: $color;
-  cursor: pointer;
-}

ui/scss/_gui.scss

@@ -1,40 +1,37 @@
-@import "global";
-
 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;
-  display: inline-block;
-  padding: 2px;
-  color: white;
-  border-radius: 2px;
-}
 .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 +84,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 +133,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 +164,7 @@ p
   text-align: right;
   line-height: 1;
   font-size: 0.85em;
-  color: $color-help;
+  color: var(--color-help);
 }
 
 section.section-spaced {

ui/scss/_icons.scss

@@ -1,5 +1,3 @@
-@import "global";
-
 @font-face {
   font-family: 'FontAwesome';
   src: url('../font/fontawesome-webfont.eot?v=4.7.0');

ui/scss/_vars.scss

@@ -0,0 +1,128 @@
+/*
+Both of these should probably die and become variables as well
+ */
+$spacing-vertical: 24px;
+$width-page-constrained: 800px;
+$text-color: #000;
+
+: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: $text-color;
+  --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;
+}

ui/scss/all.scss

@@ -1,4 +1,6 @@
+@charset "UTF-8";
 @import "_reset";
+@import "_vars";
 @import "_icons";
 @import "_gui";
 @import "component/_table";
@@ -18,6 +20,6 @@
 @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";

ui/scss/component/_button.scss

@@ -1,4 +1,4 @@
-@import "../global";
+@import "../mixin/link.scss";
 
 $button-focus-shift: 12%;
 
@@ -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;
+  height: var(--button-height);
-  line-height: $height-button;
+  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);
+  color: var(--button-primary-color);
-  background-color: $color-primary;
+  background-color: var(--button-primary-bg);
-  box-shadow: $box-shadow-layer;
+  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;
+  background-color: var(--button-bg);
-  box-shadow: $box-shadow-layer;
+  box-shadow: var(--box-shadow-layer);
 }
 
 .button-text
@@ -73,12 +74,12 @@ $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

ui/scss/component/_card.scss

@@ -1,17 +1,11 @@
-@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;
+  max-width: var(--card-max-width);
-  background: $color-bg;
+  background: var(--card-bg);
-  box-shadow: $box-shadow-layer;
+  box-shadow: var(--box-shadow-layer);
-  border-radius: 2px;
+  border-radius: var(--card-radius);
-  margin-bottom: $spacing-vertical * 2/3;
+  margin-bottom: var(--card-margin);
   overflow: auto;
 }
 .card--obscured
@@ -19,15 +13,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: 0 var(--card-padding);
-  padding-right: $padding-card-horizontal;
 }
 .card--small {
   .card__title-primary,
@@ -35,29 +28,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-top: var(--card-margin);
-  margin-bottom: $spacing-vertical * 2/3;
+  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-top: var(--card-margin);
-  margin-bottom: $spacing-vertical * 2/3;
+  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-top: var(--card-margin);
-  margin-bottom: $spacing-vertical * 2/3;
+  margin-bottom: var(--card-margin);
 }
 $font-size-subtext-multiple: 0.82;
 .card__subtext {
-  color: $color-meta-light;
+  color: var(--color-meta-light);
-  font-size: $font-size-subtext-multiple * 1.0em;
+  font-size: calc( var(--font-size-subtext-multiple) * 1.0em );
   margin-top: $spacing-vertical * 1/3;
   margin-bottom: $spacing-vertical * 1/3;
 }
@@ -65,7 +66,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 +75,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 +91,14 @@ $card-link-scaling: 1.1;
 .card--link:hover {
   position: relative;
   z-index: 1;
-  box-shadow: $box-shadow-focus;
+  box-shadow: var(--box-shadow-focus);
-  transform: scale($card-link-scaling) translateX($translate-card-hover);
+  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 +152,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 +184,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 +210,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 +225,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;
+  background: var(--card-bg);
-  color: $color-help;
+  color: var(--color-help);
-  box-shadow: $box-shadow-layer;
+  box-shadow: var(--box-shadow-layer);
   padding: $spacing-vertical $spacing-vertical / 2;
   position: absolute;
   cursor: pointer;
@@ -245,7 +244,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 +258,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
  */

ui/scss/component/_channel-indicator.scss

@@ -1,5 +1,4 @@
-@import "../global";
 
 .channel-indicator__icon--invalid {
-  color: $color-error;
+  color: var(--color-error);
 }

ui/scss/component/_file-actions.scss

@@ -1,27 +1,24 @@
-@import "../global";
-
-$color-download: #444;
 
 .file-actions
 {
-  line-height: $height-button;
+  line-height: var(--button-height);
-  min-height: $height-button;
+  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;

ui/scss/component/_file-tile.scss

@@ -1,4 +1,3 @@
-@import "../global";
 
 $height-file-tile: $spacing-vertical * 6;
 .file-tile__row {

ui/scss/component/_form-field.scss

@@ -1,6 +1,9 @@
-@import "../global";
 
-$width-input-border: 2px;
+@mixin placeholder {
+  &::-webkit-input-placeholder {@content}
+  &:-moz-placeholder {@content}
+  &:-ms-input-placeholder {@content}
+}
 
 .form-row-submit
 {
@@ -15,7 +18,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 +26,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 +48,15 @@ input[type="text"].input-copyable {
   }
 
   select {
-    transition: outline $transition-standard;
+    transition: outline var(--transition-duration) var(--transition-type);
-    cursor: pointer;
     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 +68,18 @@ input[type="text"].input-copyable {
   input[type="search"],
   input[type="date"] {
     @include placeholder {
-      color: lighten($color-text-dark, 60%);
+      color: lighten($text-color, 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 +89,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 +113,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 +127,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 +135,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,14 +164,14 @@ 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 {

ui/scss/component/_header.scss

@@ -1,15 +1,11 @@
-@import "../global";
-
-$color-header: #666;
-$color-header-active: darken($color-header, 20%);
 
 #header
 {
-  color: $color-header;
+  color: var(--header-color);
-  background: #fff;
+  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 +17,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 +36,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;
+  border-radius: 2px;
-  @include border-radius(2px);
+  border: var(--search-border);
-  border: 1px solid #ccc;
+  transition: box-shadow var(--transition-duration) var(--transition-type);
   &:focus {
-    color: $color-header-active;
+    background: var(--search-active-bg);
-    box-shadow: $box-shadow-focus;
+    color: var(--search-active-color);
-    border-color: $color-primary;
+    box-shadow: var(--box-shadow-focus);
+    border-color: var(--color-primary);
   }
 }
 
@@ -65,12 +66,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;
+    line-height:calc(var(--header-height) - $spacing-vertical - var(--tab-border-size));
-    color: $color-header;
+    color: var(--tab-color);
+
     &:first-child
     {
       margin-left: 0;
@@ -81,12 +82,12 @@ nav.sub-header
     }
     &.sub-header-selected
     {
-      border-bottom: $sub-header-selected-underline-height solid $color-header-active;
+      border-bottom: var(--tab-border);
-      color: $color-header-active;
+      color: var(--tab-active-color);
     }
     &:hover
     {
-      color: $color-header-active;
+      color: var(--tab-active-color);
     }
   }
 }

ui/scss/component/_load-screen.scss

@@ -1,8 +1,7 @@
-@import "../global";
 
 .load-screen {
   color: white;
-  background: $color-primary;
+  background: var(--color-brand);
   background-size: cover;
   min-height: 100vh;
   min-width: 100vw;
@@ -19,7 +18,7 @@
 }
 
 .load-screen__details {
-  color: $color-load-screen-text;
+  color: var(--color-load-screen-text);
 }
 
 .load-screen__details--warning {

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

ui/scss/component/_menu.scss

@@ -1,4 +1,3 @@
-@import "../global";
 
 $border-radius-menu: 2px;
 
@@ -9,9 +8,9 @@ $border-radius-menu: 2px;
 .menu {
   position: absolute;
   white-space: nowrap;
-  background-color: white;
+  background-color: var(--menu-bg);
-  box-shadow: $box-shadow-layer;
+  box-shadow: var(--box-shadow-layer);
-  border-radius: $border-radius-menu;
+  border-radius: var(--menu-radius);
   padding-top: ($spacing-vertical / 5) 0px;
   z-index: 1;
 }
@@ -20,6 +19,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);
   }
 }

ui/scss/component/_modal.scss

@@ -1,4 +1,3 @@
-@import "../global";
 
 .modal-overlay, .error-modal-overlay {
   position: fixed;
@@ -10,7 +9,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 +23,12 @@
   justify-content: center;
   align-items: center;
 
-  border: 1px solid rgb(204, 204, 204);
+  border: var(--modal-border);
-  background: rgb(255, 255, 255);
+  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 +51,7 @@
 }
 
 .error-modal-overlay {
-  background: rgba(#000, .88);
+  background: var(--modal-overlay-bg);
 }
 
 .error-modal__content {
@@ -74,7 +73,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;

ui/scss/component/_notice.scss

@@ -1,4 +1,3 @@
-@import "../global";
 
 .notice {
     padding: 10px 20px;

ui/scss/component/_pagination.scss

@@ -1,4 +1,3 @@
-@import "../global";
 
 .pagination {
   display: block;
@@ -32,5 +31,5 @@
 
 .pagination__item--selected {
   color: white;
-  background: $color-primary;
+  background: var(--color-primary);
 }

ui/scss/component/_snack-bar.scss

@@ -1,4 +1,3 @@
-@import "../global";
 
 $padding-snack-horizontal: $spacing-vertical;
 
@@ -16,7 +15,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 +24,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 +32,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 {

ui/scss/component/_table.scss

@@ -1,4 +1,3 @@
-@import "../global";
 
 table.table-standard {
   word-wrap: break-word;
@@ -20,7 +19,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 +28,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 +37,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;

ui/scss/component/_tooltip.scss

@@ -1,4 +1,4 @@
-@import "../global";
+@import "../mixin/link.scss";
 
 .tooltip {
   position: relative;
@@ -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;
+  width: var(--tooltip-width);
-  border: 1px solid #aaa;
+  border: var(--tooltip-border);
-  color: $color-text-dark;
+  color: var(--tooltip-color);
-  background-color: $color-bg;
+  background-color: var(--tooltip-bg);
-  font-size: $font-size * 7/8;
+  font-size: calc(var(--font-size) * 7/8);
-  line-height: $font-line-height;
+  line-height: var(--font-line-height);
-  box-shadow: $box-shadow-layer;
+  box-shadow: var(--box-shadow-layer);
 }
 
 .tooltip--header .tooltip__link {
   @include text-link(#aaa);
-  font-size: $font-size * 3/4;
+  font-size: calc( var(--font-size) * 3/4 );
-  margin-left: $padding-button;
+  margin-left: var(--button-padding);
   vertical-align: middle;
 }

ui/scss/component/_video.scss

@@ -1,4 +1,5 @@
-@import "../global";
+
+$height-video-embedded: $width-page-constrained * 9 / 16;
 
 video {
   object-fit: contain;
@@ -37,7 +38,7 @@ video {
 .video--obscured .video__cover
 {
   position: relative;
-  filter: blur($blur-intensity-nsfw);
+  filter: blur(var(--nsfw-blur-intensity));
 }
 
 
@@ -108,7 +109,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 +125,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);
   }
 }

ui/scss/mixin/link.scss

@@ -0,0 +1,30 @@
+@mixin text-link($color: var(--color-primary), $hover-opacity: 0.70) {
+  .icon
+  {
+    &:first-child {
+      padding-right: 5px;
+    }
+    &:last-child:not(:only-child) {
+      padding-left: 5px;
+    }
+  }
+
+  &:not(.no-underline) {
+    text-decoration: underline;
+    .icon {
+      text-decoration: none;
+    }
+  }
+  &:hover
+  {
+    opacity: $hover-opacity;
+    transition: opacity  var(--transition-duration) var(--transition-type);
+    text-decoration: underline;
+    .icon {
+      text-decoration: none;
+    }
+  }
+
+  color: $color;
+  cursor: pointer;
+}

ui/scss/page/_reward.scss

@@ -1,5 +0,0 @@
-@import "../global";
-
-.reward-page__details {
-  background-color: lighten($color-canvas, 1.5%);
-}

ui/scss/page/_show.scss

@@ -1,5 +1,3 @@
-@import "../global";
-
 .show-page-media {
   text-align: center;
   margin-bottom: $spacing-vertical;