diff --git a/CHANGELOG.md b/CHANGELOG.md index cec1d9f56..2aa385e0e 100644 --- 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 * * diff --git a/app/main.js b/app/main.js index b572eba82..4bc9944df 100644 --- 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); -}); \ No newline at end of file +}); diff --git a/app/package.json b/app/package.json index e1293e5ac..44d67066d 100644 --- 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" -} \ No newline at end of file +} diff --git a/ui/dist/index.html b/ui/dist/index.html index 4be7ceb5b..29c1e0550 100644 --- a/ui/dist/index.html +++ b/ui/dist/index.html @@ -6,6 +6,7 @@ + diff --git a/ui/dist/themes/dark.css b/ui/dist/themes/dark.css new file mode 100644 index 000000000..c32108393 --- /dev/null +++ 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); +} diff --git a/ui/dist/themes/light.css b/ui/dist/themes/light.css new file mode 100644 index 000000000..c95f61136 --- /dev/null +++ b/ui/dist/themes/light.css @@ -0,0 +1,4 @@ +:root { + /* Colors */ + --color-primary: #155B4A; +} diff --git a/ui/js/actions/app.js b/ui/js/actions/app.js index 3d81d6c69..0b20c7bde 100644 --- 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()); }; diff --git a/ui/js/actions/settings.js b/ui/js/actions/settings.js index 7038fd284..38d489157 100644 --- 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}`; diff --git a/ui/js/constants/settings.js b/ui/js/constants/settings.js index 146c882cc..a1a2e04e2 100644 --- 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"; diff --git a/ui/js/lbry.js b/ui/js/lbry.js index 23cf16c20..4c3d78b2d 100644 --- a/ui/js/lbry.js +++ b/ui/js/lbry.js @@ -39,6 +39,8 @@ let lbry = { customLighthouseServers: [], showDeveloperMenu: false, language: "en", + theme: "light", + themes: [], }, }; diff --git a/ui/js/page/settings/index.js b/ui/js/page/settings/index.js index e97ae7e4e..5fe86a7a2 100644 --- 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)), }); diff --git a/ui/js/page/settings/view.jsx b/ui/js/page/settings/view.jsx index ad8c375b6..45ad6efea 100644 --- 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 { +
+
+

{__("Theme")}

+
+
+ + {this.state.themes.map((theme, index) => + + )} + + +
+
+

{__("Application Cache")}

diff --git a/ui/js/reducers/settings.js b/ui/js/reducers/settings.js index 16e53e2da..dd50c2ad7 100644 --- 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: {}, }; diff --git a/ui/scss/_global.scss b/ui/scss/_global.scss index 9a838b2d7..34681e5b6 100644 --- 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; -} \ No newline at end of file +} diff --git a/ui/scss/_gui.scss b/ui/scss/_gui.scss index 338ccac3c..6d746f0f2 100644 --- 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 { diff --git a/ui/scss/_vars.scss b/ui/scss/_vars.scss new file mode 100644 index 000000000..16ac4b569 --- /dev/null +++ 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; +} diff --git a/ui/scss/all.scss b/ui/scss/all.scss index d899566ab..7dfd15d34 100644 --- 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"; diff --git a/ui/scss/component/_button.scss b/ui/scss/component/_button.scss index cd00b8fe4..5e2c338db 100644 --- 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; -} \ No newline at end of file +} diff --git a/ui/scss/component/_card.scss b/ui/scss/component/_card.scss index 81959a4b4..5ec826048 100644 --- 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 */ diff --git a/ui/scss/component/_channel-indicator.scss b/ui/scss/component/_channel-indicator.scss index 52a0baed6..8b72bd36d 100644 --- 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); } diff --git a/ui/scss/component/_file-actions.scss b/ui/scss/component/_file-actions.scss index 4eda16b51..88d67bf29 100644 --- 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; -} \ No newline at end of file +} diff --git a/ui/scss/component/_form-field.scss b/ui/scss/component/_form-field.scss index 9dee7240b..7fc276ddd 100644 --- 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; -} \ No newline at end of file +} diff --git a/ui/scss/component/_header.scss b/ui/scss/component/_header.scss index 5cc51541e..ea114dc5d 100644 --- 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); } } -} \ No newline at end of file +} diff --git a/ui/scss/component/_load-screen.scss b/ui/scss/component/_load-screen.scss index 0caa74f65..24221c10d 100644 --- 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 { diff --git a/ui/scss/component/_markdown-editor.scss b/ui/scss/component/_markdown-editor.scss new file mode 100644 index 000000000..a2b311f5b --- /dev/null +++ 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; +} diff --git a/ui/scss/component/_menu.scss b/ui/scss/component/_menu.scss index d8e79be28..52399bdfb 100644 --- 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); } -} \ No newline at end of file +} diff --git a/ui/scss/component/_modal.scss b/ui/scss/component/_modal.scss index 4ebba6799..7140e6cf8 100644 --- 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; diff --git a/ui/scss/component/_pagination.scss b/ui/scss/component/_pagination.scss index fd5ca528e..6ea2a14c6 100644 --- 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); } diff --git a/ui/scss/component/_snack-bar.scss b/ui/scss/component/_snack-bar.scss index c3df3ab92..5be3e1c6d 100644 --- 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 { diff --git a/ui/scss/component/_table.scss b/ui/scss/component/_table.scss index 38893eae5..98cb50664 100644 --- 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%; -} \ No newline at end of file +} diff --git a/ui/scss/component/_tooltip.scss b/ui/scss/component/_tooltip.scss index 0be9b1db8..18b3d92c3 100644 --- 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; -} \ No newline at end of file +} diff --git a/ui/scss/component/_video.scss b/ui/scss/component/_video.scss index 61143a2dd..20d5b7572 100644 --- 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); } } diff --git a/ui/scss/page/_reward.scss b/ui/scss/page/_reward.scss index a550c01c3..5e6180dc5 100644 --- 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%); -} \ No newline at end of file + //background-color: lighten($color-canvas, 1.5%); +} diff --git a/ui/watch.sh b/ui/watch.sh index 4ea14c42b..6a60eb10c 100755 --- 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 -) \ No newline at end of file +)