From 5bf9ac9fe61bd2aff8114fe34ea645b6185bb246 Mon Sep 17 00:00:00 2001 From: btzr-io Date: Fri, 4 Aug 2017 19:36:36 -0600 Subject: [PATCH 01/47] implement theme-system --- ui/dist/index.html | 2 +- ui/js/lbry.js | 1 + ui/js/page/settings/view.jsx | 32 +++++++++++++++++++++++++++++++- ui/js/util/getThemes.js | 20 ++++++++++++++++++++ 4 files changed, 53 insertions(+), 2 deletions(-) create mode 100644 ui/js/util/getThemes.js diff --git a/ui/dist/index.html b/ui/dist/index.html index d951dddd1..c5b675312 100644 --- a/ui/dist/index.html +++ b/ui/dist/index.html @@ -6,7 +6,7 @@ - + diff --git a/ui/js/lbry.js b/ui/js/lbry.js index e43a20b55..e66362088 100644 --- a/ui/js/lbry.js +++ b/ui/js/lbry.js @@ -19,6 +19,7 @@ let lbry = { customLighthouseServers: [], showDeveloperMenu: false, language: "en", + theme: "light", }, }; diff --git a/ui/js/page/settings/view.jsx b/ui/js/page/settings/view.jsx index d7646c476..9767a5efe 100644 --- a/ui/js/page/settings/view.jsx +++ b/ui/js/page/settings/view.jsx @@ -3,9 +3,12 @@ import { FormField, FormRow } from "component/form.js"; import SubHeader from "component/subHeader"; import lbry from "lbry.js"; import Link from "component/link"; - +import getThemes from "util/getThemes"; const { remote } = require("electron"); +const themes = getThemes(); +console.log(themes); + class SettingsPage extends React.PureComponent { constructor(props) { super(props); @@ -18,6 +21,7 @@ class SettingsPage extends React.PureComponent { showUnavailable: lbry.getClientSetting("showUnavailable"), language: lbry.getClientSetting("language"), clearingCache: false, + theme: lbry.getClientSetting("theme"), }; } @@ -81,6 +85,13 @@ class SettingsPage extends React.PureComponent { this.setDaemonSetting("disable_max_key_fee", isDisabled); } + onThemeChange(event) { + const value = event.target.value; + const link = document.getElementById("theme"); + link.href = `./themes/${value}.css`; + this.props.setClientSetting("theme", value); + } + // onMaxUploadPrefChange(isLimited) { // if (!isLimited) { // this.setDaemonSetting("max_upload", 0.0); @@ -251,6 +262,25 @@ class SettingsPage extends React.PureComponent { +
+
+

{__("Theme")}

+
+
+ + {themes.map((i, k) => + + )} + + +
+
+

{__("Application Cache")}

diff --git a/ui/js/util/getThemes.js b/ui/js/util/getThemes.js new file mode 100644 index 000000000..d82bc4d0c --- /dev/null +++ b/ui/js/util/getThemes.js @@ -0,0 +1,20 @@ +const { readdirSync } = require("fs"); +const { extname } = require("path"); +const { remote } = require("electron"); + +function getThemes() { + // Themes path + const themesPath = `${remote.app.getAppPath()}/dist/themes`; + + // Get all themes / only .css + const themes = readdirSync(themesPath).filter(function(file) { + return extname(file) === ".css"; + }); + + // Remove file extension (css) + return themes.map(function(theme) { + return theme.replace(".css", ""); + }); +} + +export default getThemes; From 977d116f40e686446a64b6bbac6bfa207654a5bb Mon Sep 17 00:00:00 2001 From: btzr-io Date: Fri, 4 Aug 2017 19:42:38 -0600 Subject: [PATCH 02/47] remove debug --- ui/js/page/settings/view.jsx | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/ui/js/page/settings/view.jsx b/ui/js/page/settings/view.jsx index 9767a5efe..7d548909b 100644 --- a/ui/js/page/settings/view.jsx +++ b/ui/js/page/settings/view.jsx @@ -4,10 +4,9 @@ import SubHeader from "component/subHeader"; import lbry from "lbry.js"; import Link from "component/link"; import getThemes from "util/getThemes"; -const { remote } = require("electron"); +const { remote } = require("electron"); const themes = getThemes(); -console.log(themes); class SettingsPage extends React.PureComponent { constructor(props) { From 4bbab4befcdc6f8fc938c2560857440acbe500ef Mon Sep 17 00:00:00 2001 From: btzr-io Date: Fri, 4 Aug 2017 20:11:07 -0600 Subject: [PATCH 03/47] set default theme --- ui/js/page/settings/view.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/ui/js/page/settings/view.jsx b/ui/js/page/settings/view.jsx index 7d548909b..8fa7c93a8 100644 --- a/ui/js/page/settings/view.jsx +++ b/ui/js/page/settings/view.jsx @@ -269,7 +269,7 @@ class SettingsPage extends React.PureComponent { {themes.map((i, k) => From 9eec9fae1ad110739a6e4f158c71f945bc8b53d0 Mon Sep 17 00:00:00 2001 From: btzr-io Date: Fri, 4 Aug 2017 20:18:18 -0600 Subject: [PATCH 04/47] tidy up From 8b7bb673549ae93b4550e90b7f790f81a32ac0d3 Mon Sep 17 00:00:00 2001 From: btzr-io Date: Fri, 4 Aug 2017 21:07:07 -0600 Subject: [PATCH 05/47] add themes folder --- ui/dist/themes/light.css | 2859 ++++++++++++++++++++++++++++++++++++++ 1 file changed, 2859 insertions(+) create mode 100644 ui/dist/themes/light.css diff --git a/ui/dist/themes/light.css b/ui/dist/themes/light.css new file mode 100644 index 000000000..bdddae868 --- /dev/null +++ b/ui/dist/themes/light.css @@ -0,0 +1,2859 @@ +body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, select, textarea, p, blockquote, th, td, iframe { + margin: 0; + padding: 0; } + +:focus { + outline: 0; } + +input::-webkit-search-cancel-button { + /* Remove default */ + -webkit-appearance: none; } + +table { + border-collapse: collapse; + border-spacing: 0; } + +fieldset, img, iframe { + border: 0; } + +h1, h2, h3, h4, h5, h6 { + font-weight: normal; } + +ol, ul { + list-style-position: inside; } + ol > li, ul > li { + list-style-position: inside; } + +input, textarea, select { + font-family: inherit; + font-size: inherit; + font-weight: inherit; + border: 0 none; } + +img { + width: auto\9; + height: auto; + vertical-align: middle; + -ms-interpolation-mode: bicubic; } + +a { + color: inherit; + text-decoration: none; } + +@font-face { + font-family: 'FontAwesome'; + src: url("../font/fontawesome-webfont.eot?v=4.3.0"); + src: url("../font/fontawesome-webfont.eot?#iefix&v=4.3.0") format("embedded-opentype"), url("../font/fontawesome-webfont.woff2?v=4.3.0") format("woff2"), url("../font/fontawesome-webfont.woff?v=4.3.0") format("woff"), url("../font/fontawesome-webfont.ttf?v=4.3.0") format("truetype"), url("../font/fontawesome-webfont.svg?v=4.3.0#fontawesomeregular") format("svg"); + font-weight: normal; + font-style: normal; } + +[class*="icon-"] { + display: inline-block; + text-align: center; + font-family: "FontAwesome"; + font-style: normal; + font-weight: normal; + font-variant: normal; + text-transform: none; + speak: none; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + font-size: inherit; + text-rendering: auto; + transform: translate(0, 0); } + +/* Font Awesome uses the Unicode Private Use Area (PUA) to ensure screen + readers do not read off random characters that represent icons */ +.icon-glass:before { + content: "\f000"; } + +.icon-music:before { + content: "\f001"; } + +.icon-search:before { + content: "\f002"; } + +.icon-envelope-o:before { + content: "\f003"; } + +.icon-heart:before { + content: "\f004"; } + +.icon-star:before { + content: "\f005"; } + +.icon-star-o:before { + content: "\f006"; } + +.icon-user:before { + content: "\f007"; } + +.icon-film:before { + content: "\f008"; } + +.icon-th-large:before { + content: "\f009"; } + +.icon-th:before { + content: "\f00a"; } + +.icon-th-list:before { + content: "\f00b"; } + +.icon-check:before { + content: "\f00c"; } + +.icon-remove:before, +.icon-close:before, +.icon-times:before { + content: "\f00d"; } + +.icon-search-plus:before { + content: "\f00e"; } + +.icon-search-minus:before { + content: "\f010"; } + +.icon-power-off:before { + content: "\f011"; } + +.icon-signal:before { + content: "\f012"; } + +.icon-gear:before, +.icon-cog:before { + content: "\f013"; } + +.icon-trash-o:before { + content: "\f014"; } + +.icon-home:before { + content: "\f015"; } + +.icon-file-o:before { + content: "\f016"; } + +.icon-clock-o:before { + content: "\f017"; } + +.icon-road:before { + content: "\f018"; } + +.icon-download:before { + content: "\f019"; } + +.icon-arrow-circle-o-down:before { + content: "\f01a"; } + +.icon-arrow-circle-o-up:before { + content: "\f01b"; } + +.icon-inbox:before { + content: "\f01c"; } + +.icon-play-circle-o:before { + content: "\f01d"; } + +.icon-rotate-right:before, +.icon-repeat:before { + content: "\f01e"; } + +.icon-refresh:before { + content: "\f021"; } + +.icon-list-alt:before { + content: "\f022"; } + +.icon-lock:before { + content: "\f023"; } + +.icon-flag:before { + content: "\f024"; } + +.icon-headphones:before { + content: "\f025"; } + +.icon-volume-off:before { + content: "\f026"; } + +.icon-volume-down:before { + content: "\f027"; } + +.icon-volume-up:before { + content: "\f028"; } + +.icon-qrcode:before { + content: "\f029"; } + +.icon-barcode:before { + content: "\f02a"; } + +.icon-tag:before { + content: "\f02b"; } + +.icon-tags:before { + content: "\f02c"; } + +.icon-book:before { + content: "\f02d"; } + +.icon-bookmark:before { + content: "\f02e"; } + +.icon-print:before { + content: "\f02f"; } + +.icon-camera:before { + content: "\f030"; } + +.icon-font:before { + content: "\f031"; } + +.icon-bold:before { + content: "\f032"; } + +.icon-italic:before { + content: "\f033"; } + +.icon-text-height:before { + content: "\f034"; } + +.icon-text-width:before { + content: "\f035"; } + +.icon-align-left:before { + content: "\f036"; } + +.icon-align-center:before { + content: "\f037"; } + +.icon-align-right:before { + content: "\f038"; } + +.icon-align-justify:before { + content: "\f039"; } + +.icon-list:before { + content: "\f03a"; } + +.icon-dedent:before, +.icon-outdent:before { + content: "\f03b"; } + +.icon-indent:before { + content: "\f03c"; } + +.icon-video-camera:before { + content: "\f03d"; } + +.icon-photo:before, +.icon-image:before, +.icon-picture-o:before { + content: "\f03e"; } + +.icon-pencil:before { + content: "\f040"; } + +.icon-map-marker:before { + content: "\f041"; } + +.icon-adjust:before { + content: "\f042"; } + +.icon-tint:before { + content: "\f043"; } + +.icon-edit:before, +.icon-pencil-square-o:before { + content: "\f044"; } + +.icon-share-square-o:before { + content: "\f045"; } + +.icon-check-square-o:before { + content: "\f046"; } + +.icon-arrows:before { + content: "\f047"; } + +.icon-step-backward:before { + content: "\f048"; } + +.icon-fast-backward:before { + content: "\f049"; } + +.icon-backward:before { + content: "\f04a"; } + +.icon-play:before { + content: "\f04b"; } + +.icon-pause:before { + content: "\f04c"; } + +.icon-stop:before { + content: "\f04d"; } + +.icon-forward:before { + content: "\f04e"; } + +.icon-fast-forward:before { + content: "\f050"; } + +.icon-step-forward:before { + content: "\f051"; } + +.icon-eject:before { + content: "\f052"; } + +.icon-chevron-left:before { + content: "\f053"; } + +.icon-chevron-right:before { + content: "\f054"; } + +.icon-plus-circle:before { + content: "\f055"; } + +.icon-minus-circle:before { + content: "\f056"; } + +.icon-times-circle:before { + content: "\f057"; } + +.icon-check-circle:before { + content: "\f058"; } + +.icon-question-circle:before { + content: "\f059"; } + +.icon-info-circle:before { + content: "\f05a"; } + +.icon-crosshairs:before { + content: "\f05b"; } + +.icon-times-circle-o:before { + content: "\f05c"; } + +.icon-check-circle-o:before { + content: "\f05d"; } + +.icon-ban:before { + content: "\f05e"; } + +.icon-arrow-left:before { + content: "\f060"; } + +.icon-arrow-right:before { + content: "\f061"; } + +.icon-arrow-up:before { + content: "\f062"; } + +.icon-arrow-down:before { + content: "\f063"; } + +.icon-mail-forward:before, +.icon-share:before { + content: "\f064"; } + +.icon-expand:before { + content: "\f065"; } + +.icon-compress:before { + content: "\f066"; } + +.icon-plus:before { + content: "\f067"; } + +.icon-minus:before { + content: "\f068"; } + +.icon-asterisk:before { + content: "\f069"; } + +.icon-exclamation-circle:before { + content: "\f06a"; } + +.icon-gift:before { + content: "\f06b"; } + +.icon-leaf:before { + content: "\f06c"; } + +.icon-fire:before { + content: "\f06d"; } + +.icon-eye:before { + content: "\f06e"; } + +.icon-eye-slash:before { + content: "\f070"; } + +.icon-warning:before, +.icon-exclamation-triangle:before { + content: "\f071"; } + +.icon-plane:before { + content: "\f072"; } + +.icon-calendar:before { + content: "\f073"; } + +.icon-random:before { + content: "\f074"; } + +.icon-comment:before { + content: "\f075"; } + +.icon-magnet:before { + content: "\f076"; } + +.icon-chevron-up:before { + content: "\f077"; } + +.icon-chevron-down:before { + content: "\f078"; } + +.icon-retweet:before { + content: "\f079"; } + +.icon-shopping-cart:before { + content: "\f07a"; } + +.icon-folder:before { + content: "\f07b"; } + +.icon-folder-open:before { + content: "\f07c"; } + +.icon-arrows-v:before { + content: "\f07d"; } + +.icon-arrows-h:before { + content: "\f07e"; } + +.icon-bar-chart-o:before, +.icon-bar-chart:before { + content: "\f080"; } + +.icon-twitter-square:before { + content: "\f081"; } + +.icon-facebook-square:before { + content: "\f082"; } + +.icon-camera-retro:before { + content: "\f083"; } + +.icon-key:before { + content: "\f084"; } + +.icon-gears:before, +.icon-cogs:before { + content: "\f085"; } + +.icon-comments:before { + content: "\f086"; } + +.icon-thumbs-o-up:before { + content: "\f087"; } + +.icon-thumbs-o-down:before { + content: "\f088"; } + +.icon-star-half:before { + content: "\f089"; } + +.icon-heart-o:before { + content: "\f08a"; } + +.icon-sign-out:before { + content: "\f08b"; } + +.icon-linkedin-square:before { + content: "\f08c"; } + +.icon-thumb-tack:before { + content: "\f08d"; } + +.icon-external-link:before { + content: "\f08e"; } + +.icon-sign-in:before { + content: "\f090"; } + +.icon-trophy:before { + content: "\f091"; } + +.icon-github-square:before { + content: "\f092"; } + +.icon-upload:before { + content: "\f093"; } + +.icon-lemon-o:before { + content: "\f094"; } + +.icon-phone:before { + content: "\f095"; } + +.icon-square-o:before { + content: "\f096"; } + +.icon-bookmark-o:before { + content: "\f097"; } + +.icon-phone-square:before { + content: "\f098"; } + +.icon-twitter:before { + content: "\f099"; } + +.icon-facebook-f:before, +.icon-facebook:before { + content: "\f09a"; } + +.icon-github:before { + content: "\f09b"; } + +.icon-unlock:before { + content: "\f09c"; } + +.icon-credit-card:before { + content: "\f09d"; } + +.icon-rss:before { + content: "\f09e"; } + +.icon-hdd-o:before { + content: "\f0a0"; } + +.icon-bullhorn:before { + content: "\f0a1"; } + +.icon-bell:before { + content: "\f0f3"; } + +.icon-certificate:before { + content: "\f0a3"; } + +.icon-hand-o-right:before { + content: "\f0a4"; } + +.icon-hand-o-left:before { + content: "\f0a5"; } + +.icon-hand-o-up:before { + content: "\f0a6"; } + +.icon-hand-o-down:before { + content: "\f0a7"; } + +.icon-arrow-circle-left:before { + content: "\f0a8"; } + +.icon-arrow-circle-right:before { + content: "\f0a9"; } + +.icon-arrow-circle-up:before { + content: "\f0aa"; } + +.icon-arrow-circle-down:before { + content: "\f0ab"; } + +.icon-globe:before { + content: "\f0ac"; } + +.icon-wrench:before { + content: "\f0ad"; } + +.icon-tasks:before { + content: "\f0ae"; } + +.icon-filter:before { + content: "\f0b0"; } + +.icon-briefcase:before { + content: "\f0b1"; } + +.icon-arrows-alt:before { + content: "\f0b2"; } + +.icon-group:before, +.icon-users:before { + content: "\f0c0"; } + +.icon-chain:before, +.icon-link:before { + content: "\f0c1"; } + +.icon-cloud:before { + content: "\f0c2"; } + +.icon-flask:before { + content: "\f0c3"; } + +.icon-cut:before, +.icon-scissors:before { + content: "\f0c4"; } + +.icon-copy:before, +.icon-files-o:before { + content: "\f0c5"; } + +.icon-paperclip:before { + content: "\f0c6"; } + +.icon-save:before, +.icon-floppy-o:before { + content: "\f0c7"; } + +.icon-square:before { + content: "\f0c8"; } + +.icon-navicon:before, +.icon-reorder:before, +.icon-bars:before { + content: "\f0c9"; } + +.icon-list-ul:before { + content: "\f0ca"; } + +.icon-list-ol:before { + content: "\f0cb"; } + +.icon-strikethrough:before { + content: "\f0cc"; } + +.icon-underline:before { + content: "\f0cd"; } + +.icon-table:before { + content: "\f0ce"; } + +.icon-magic:before { + content: "\f0d0"; } + +.icon-truck:before { + content: "\f0d1"; } + +.icon-pinterest:before { + content: "\f0d2"; } + +.icon-pinterest-square:before { + content: "\f0d3"; } + +.icon-google-plus-square:before { + content: "\f0d4"; } + +.icon-google-plus:before { + content: "\f0d5"; } + +.icon-money:before { + content: "\f0d6"; } + +.icon-caret-down:before { + content: "\f0d7"; } + +.icon-caret-up:before { + content: "\f0d8"; } + +.icon-caret-left:before { + content: "\f0d9"; } + +.icon-caret-right:before { + content: "\f0da"; } + +.icon-columns:before { + content: "\f0db"; } + +.icon-unsorted:before, +.icon-sort:before { + content: "\f0dc"; } + +.icon-sort-down:before, +.icon-sort-desc:before { + content: "\f0dd"; } + +.icon-sort-up:before, +.icon-sort-asc:before { + content: "\f0de"; } + +.icon-envelope:before { + content: "\f0e0"; } + +.icon-linkedin:before { + content: "\f0e1"; } + +.icon-rotate-left:before, +.icon-undo:before { + content: "\f0e2"; } + +.icon-legal:before, +.icon-gavel:before { + content: "\f0e3"; } + +.icon-dashboard:before, +.icon-tachometer:before { + content: "\f0e4"; } + +.icon-comment-o:before { + content: "\f0e5"; } + +.icon-comments-o:before { + content: "\f0e6"; } + +.icon-flash:before, +.icon-bolt:before { + content: "\f0e7"; } + +.icon-sitemap:before { + content: "\f0e8"; } + +.icon-umbrella:before { + content: "\f0e9"; } + +.icon-paste:before, +.icon-clipboard:before { + content: "\f0ea"; } + +.icon-lightbulb-o:before { + content: "\f0eb"; } + +.icon-exchange:before { + content: "\f0ec"; } + +.icon-cloud-download:before { + content: "\f0ed"; } + +.icon-cloud-upload:before { + content: "\f0ee"; } + +.icon-user-md:before { + content: "\f0f0"; } + +.icon-stethoscope:before { + content: "\f0f1"; } + +.icon-suitcase:before { + content: "\f0f2"; } + +.icon-bell-o:before { + content: "\f0a2"; } + +.icon-coffee:before { + content: "\f0f4"; } + +.icon-cutlery:before { + content: "\f0f5"; } + +.icon-file-text-o:before { + content: "\f0f6"; } + +.icon-building-o:before { + content: "\f0f7"; } + +.icon-hospital-o:before { + content: "\f0f8"; } + +.icon-ambulance:before { + content: "\f0f9"; } + +.icon-medkit:before { + content: "\f0fa"; } + +.icon-fighter-jet:before { + content: "\f0fb"; } + +.icon-beer:before { + content: "\f0fc"; } + +.icon-h-square:before { + content: "\f0fd"; } + +.icon-plus-square:before { + content: "\f0fe"; } + +.icon-angle-double-left:before { + content: "\f100"; } + +.icon-angle-double-right:before { + content: "\f101"; } + +.icon-angle-double-up:before { + content: "\f102"; } + +.icon-angle-double-down:before { + content: "\f103"; } + +.icon-angle-left:before { + content: "\f104"; } + +.icon-angle-right:before { + content: "\f105"; } + +.icon-angle-up:before { + content: "\f106"; } + +.icon-angle-down:before { + content: "\f107"; } + +.icon-desktop:before { + content: "\f108"; } + +.icon-laptop:before { + content: "\f109"; } + +.icon-tablet:before { + content: "\f10a"; } + +.icon-mobile-phone:before, +.icon-mobile:before { + content: "\f10b"; } + +.icon-circle-o:before { + content: "\f10c"; } + +.icon-quote-left:before { + content: "\f10d"; } + +.icon-quote-right:before { + content: "\f10e"; } + +.icon-spinner:before { + content: "\f110"; } + +.icon-circle:before { + content: "\f111"; } + +.icon-mail-reply:before, +.icon-reply:before { + content: "\f112"; } + +.icon-github-alt:before { + content: "\f113"; } + +.icon-folder-o:before { + content: "\f114"; } + +.icon-folder-open-o:before { + content: "\f115"; } + +.icon-smile-o:before { + content: "\f118"; } + +.icon-frown-o:before { + content: "\f119"; } + +.icon-meh-o:before { + content: "\f11a"; } + +.icon-gamepad:before { + content: "\f11b"; } + +.icon-keyboard-o:before { + content: "\f11c"; } + +.icon-flag-o:before { + content: "\f11d"; } + +.icon-flag-checkered:before { + content: "\f11e"; } + +.icon-terminal:before { + content: "\f120"; } + +.icon-code:before { + content: "\f121"; } + +.icon-mail-reply-all:before, +.icon-reply-all:before { + content: "\f122"; } + +.icon-star-half-empty:before, +.icon-star-half-full:before, +.icon-star-half-o:before { + content: "\f123"; } + +.icon-location-arrow:before { + content: "\f124"; } + +.icon-crop:before { + content: "\f125"; } + +.icon-code-fork:before { + content: "\f126"; } + +.icon-unlink:before, +.icon-chain-broken:before { + content: "\f127"; } + +.icon-question:before { + content: "\f128"; } + +.icon-info:before { + content: "\f129"; } + +.icon-exclamation:before { + content: "\f12a"; } + +.icon-superscript:before { + content: "\f12b"; } + +.icon-subscript:before { + content: "\f12c"; } + +.icon-eraser:before { + content: "\f12d"; } + +.icon-puzzle-piece:before { + content: "\f12e"; } + +.icon-microphone:before { + content: "\f130"; } + +.icon-microphone-slash:before { + content: "\f131"; } + +.icon-shield:before { + content: "\f132"; } + +.icon-calendar-o:before { + content: "\f133"; } + +.icon-fire-extinguisher:before { + content: "\f134"; } + +.icon-rocket:before { + content: "\f135"; } + +.icon-maxcdn:before { + content: "\f136"; } + +.icon-chevron-circle-left:before { + content: "\f137"; } + +.icon-chevron-circle-right:before { + content: "\f138"; } + +.icon-chevron-circle-up:before { + content: "\f139"; } + +.icon-chevron-circle-down:before { + content: "\f13a"; } + +.icon-html5:before { + content: "\f13b"; } + +.icon-css3:before { + content: "\f13c"; } + +.icon-anchor:before { + content: "\f13d"; } + +.icon-unlock-alt:before { + content: "\f13e"; } + +.icon-bullseye:before { + content: "\f140"; } + +.icon-ellipsis-h:before { + content: "\f141"; } + +.icon-ellipsis-v:before { + content: "\f142"; } + +.icon-rss-square:before { + content: "\f143"; } + +.icon-play-circle:before { + content: "\f144"; } + +.icon-ticket:before { + content: "\f145"; } + +.icon-minus-square:before { + content: "\f146"; } + +.icon-minus-square-o:before { + content: "\f147"; } + +.icon-level-up:before { + content: "\f148"; } + +.icon-level-down:before { + content: "\f149"; } + +.icon-check-square:before { + content: "\f14a"; } + +.icon-pencil-square:before { + content: "\f14b"; } + +.icon-external-link-square:before { + content: "\f14c"; } + +.icon-share-square:before { + content: "\f14d"; } + +.icon-compass:before { + content: "\f14e"; } + +.icon-toggle-down:before, +.icon-caret-square-o-down:before { + content: "\f150"; } + +.icon-toggle-up:before, +.icon-caret-square-o-up:before { + content: "\f151"; } + +.icon-toggle-right:before, +.icon-caret-square-o-right:before { + content: "\f152"; } + +.icon-euro:before, +.icon-eur:before { + content: "\f153"; } + +.icon-gbp:before { + content: "\f154"; } + +.icon-dollar:before, +.icon-usd:before { + content: "\f155"; } + +.icon-rupee:before, +.icon-inr:before { + content: "\f156"; } + +.icon-cny:before, +.icon-rmb:before, +.icon-yen:before, +.icon-jpy:before { + content: "\f157"; } + +.icon-ruble:before, +.icon-rouble:before, +.icon-rub:before { + content: "\f158"; } + +.icon-won:before, +.icon-krw:before { + content: "\f159"; } + +.icon-bitcoin:before, +.icon-btc:before { + content: "\f15a"; } + +.icon-file:before { + content: "\f15b"; } + +.icon-file-text:before { + content: "\f15c"; } + +.icon-sort-alpha-asc:before { + content: "\f15d"; } + +.icon-sort-alpha-desc:before { + content: "\f15e"; } + +.icon-sort-amount-asc:before { + content: "\f160"; } + +.icon-sort-amount-desc:before { + content: "\f161"; } + +.icon-sort-numeric-asc:before { + content: "\f162"; } + +.icon-sort-numeric-desc:before { + content: "\f163"; } + +.icon-thumbs-up:before { + content: "\f164"; } + +.icon-thumbs-down:before { + content: "\f165"; } + +.icon-youtube-square:before { + content: "\f166"; } + +.icon-youtube:before { + content: "\f167"; } + +.icon-xing:before { + content: "\f168"; } + +.icon-xing-square:before { + content: "\f169"; } + +.icon-youtube-play:before { + content: "\f16a"; } + +.icon-dropbox:before { + content: "\f16b"; } + +.icon-stack-overflow:before { + content: "\f16c"; } + +.icon-instagram:before { + content: "\f16d"; } + +.icon-flickr:before { + content: "\f16e"; } + +.icon-adn:before { + content: "\f170"; } + +.icon-bitbucket:before { + content: "\f171"; } + +.icon-bitbucket-square:before { + content: "\f172"; } + +.icon-tumblr:before { + content: "\f173"; } + +.icon-tumblr-square:before { + content: "\f174"; } + +.icon-long-arrow-down:before { + content: "\f175"; } + +.icon-long-arrow-up:before { + content: "\f176"; } + +.icon-long-arrow-left:before { + content: "\f177"; } + +.icon-long-arrow-right:before { + content: "\f178"; } + +.icon-apple:before { + content: "\f179"; } + +.icon-windows:before { + content: "\f17a"; } + +.icon-android:before { + content: "\f17b"; } + +.icon-linux:before { + content: "\f17c"; } + +.icon-dribbble:before { + content: "\f17d"; } + +.icon-skype:before { + content: "\f17e"; } + +.icon-foursquare:before { + content: "\f180"; } + +.icon-trello:before { + content: "\f181"; } + +.icon-female:before { + content: "\f182"; } + +.icon-male:before { + content: "\f183"; } + +.icon-gittip:before, +.icon-gratipay:before { + content: "\f184"; } + +.icon-sun-o:before { + content: "\f185"; } + +.icon-moon-o:before { + content: "\f186"; } + +.icon-archive:before { + content: "\f187"; } + +.icon-bug:before { + content: "\f188"; } + +.icon-vk:before { + content: "\f189"; } + +.icon-weibo:before { + content: "\f18a"; } + +.icon-renren:before { + content: "\f18b"; } + +.icon-pagelines:before { + content: "\f18c"; } + +.icon-stack-exchange:before { + content: "\f18d"; } + +.icon-arrow-circle-o-right:before { + content: "\f18e"; } + +.icon-arrow-circle-o-left:before { + content: "\f190"; } + +.icon-toggle-left:before, +.icon-caret-square-o-left:before { + content: "\f191"; } + +.icon-dot-circle-o:before { + content: "\f192"; } + +.icon-wheelchair:before { + content: "\f193"; } + +.icon-vimeo-square:before { + content: "\f194"; } + +.icon-turkish-lira:before, +.icon-try:before { + content: "\f195"; } + +.icon-plus-square-o:before { + content: "\f196"; } + +.icon-space-shuttle:before { + content: "\f197"; } + +.icon-slack:before { + content: "\f198"; } + +.icon-envelope-square:before { + content: "\f199"; } + +.icon-wordpress:before { + content: "\f19a"; } + +.icon-openid:before { + content: "\f19b"; } + +.icon-institution:before, +.icon-bank:before, +.icon-university:before { + content: "\f19c"; } + +.icon-mortar-board:before, +.icon-graduation-cap:before { + content: "\f19d"; } + +.icon-yahoo:before { + content: "\f19e"; } + +.icon-google:before { + content: "\f1a0"; } + +.icon-reddit:before { + content: "\f1a1"; } + +.icon-reddit-square:before { + content: "\f1a2"; } + +.icon-stumbleupon-circle:before { + content: "\f1a3"; } + +.icon-stumbleupon:before { + content: "\f1a4"; } + +.icon-delicious:before { + content: "\f1a5"; } + +.icon-digg:before { + content: "\f1a6"; } + +.icon-pied-piper:before { + content: "\f1a7"; } + +.icon-pied-piper-alt:before { + content: "\f1a8"; } + +.icon-drupal:before { + content: "\f1a9"; } + +.icon-joomla:before { + content: "\f1aa"; } + +.icon-language:before { + content: "\f1ab"; } + +.icon-fax:before { + content: "\f1ac"; } + +.icon-building:before { + content: "\f1ad"; } + +.icon-child:before { + content: "\f1ae"; } + +.icon-paw:before { + content: "\f1b0"; } + +.icon-spoon:before { + content: "\f1b1"; } + +.icon-cube:before { + content: "\f1b2"; } + +.icon-cubes:before { + content: "\f1b3"; } + +.icon-behance:before { + content: "\f1b4"; } + +.icon-behance-square:before { + content: "\f1b5"; } + +.icon-steam:before { + content: "\f1b6"; } + +.icon-steam-square:before { + content: "\f1b7"; } + +.icon-recycle:before { + content: "\f1b8"; } + +.icon-automobile:before, +.icon-car:before { + content: "\f1b9"; } + +.icon-cab:before, +.icon-taxi:before { + content: "\f1ba"; } + +.icon-tree:before { + content: "\f1bb"; } + +.icon-spotify:before { + content: "\f1bc"; } + +.icon-deviantart:before { + content: "\f1bd"; } + +.icon-soundcloud:before { + content: "\f1be"; } + +.icon-database:before { + content: "\f1c0"; } + +.icon-file-pdf-o:before { + content: "\f1c1"; } + +.icon-file-word-o:before { + content: "\f1c2"; } + +.icon-file-excel-o:before { + content: "\f1c3"; } + +.icon-file-powerpoint-o:before { + content: "\f1c4"; } + +.icon-file-photo-o:before, +.icon-file-picture-o:before, +.icon-file-image-o:before { + content: "\f1c5"; } + +.icon-file-zip-o:before, +.icon-file-archive-o:before { + content: "\f1c6"; } + +.icon-file-sound-o:before, +.icon-file-audio-o:before { + content: "\f1c7"; } + +.icon-file-movie-o:before, +.icon-file-video-o:before { + content: "\f1c8"; } + +.icon-file-code-o:before { + content: "\f1c9"; } + +.icon-vine:before { + content: "\f1ca"; } + +.icon-codepen:before { + content: "\f1cb"; } + +.icon-jsfiddle:before { + content: "\f1cc"; } + +.icon-life-bouy:before, +.icon-life-buoy:before, +.icon-life-saver:before, +.icon-support:before, +.icon-life-ring:before { + content: "\f1cd"; } + +.icon-circle-o-notch:before { + content: "\f1ce"; } + +.icon-ra:before, +.icon-rebel:before { + content: "\f1d0"; } + +.icon-ge:before, +.icon-empire:before { + content: "\f1d1"; } + +.icon-git-square:before { + content: "\f1d2"; } + +.icon-git:before { + content: "\f1d3"; } + +.icon-hacker-news:before { + content: "\f1d4"; } + +.icon-tencent-weibo:before { + content: "\f1d5"; } + +.icon-qq:before { + content: "\f1d6"; } + +.icon-wechat:before, +.icon-weixin:before { + content: "\f1d7"; } + +.icon-send:before, +.icon-paper-plane:before { + content: "\f1d8"; } + +.icon-send-o:before, +.icon-paper-plane-o:before { + content: "\f1d9"; } + +.icon-history:before { + content: "\f1da"; } + +.icon-genderless:before, +.icon-circle-thin:before { + content: "\f1db"; } + +.icon-header:before { + content: "\f1dc"; } + +.icon-paragraph:before { + content: "\f1dd"; } + +.icon-sliders:before { + content: "\f1de"; } + +.icon-share-alt:before { + content: "\f1e0"; } + +.icon-share-alt-square:before { + content: "\f1e1"; } + +.icon-bomb:before { + content: "\f1e2"; } + +.icon-soccer-ball-o:before, +.icon-futbol-o:before { + content: "\f1e3"; } + +.icon-tty:before { + content: "\f1e4"; } + +.icon-binoculars:before { + content: "\f1e5"; } + +.icon-plug:before { + content: "\f1e6"; } + +.icon-slideshare:before { + content: "\f1e7"; } + +.icon-twitch:before { + content: "\f1e8"; } + +.icon-yelp:before { + content: "\f1e9"; } + +.icon-newspaper-o:before { + content: "\f1ea"; } + +.icon-wifi:before { + content: "\f1eb"; } + +.icon-calculator:before { + content: "\f1ec"; } + +.icon-paypal:before { + content: "\f1ed"; } + +.icon-google-wallet:before { + content: "\f1ee"; } + +.icon-cc-visa:before { + content: "\f1f0"; } + +.icon-cc-mastercard:before { + content: "\f1f1"; } + +.icon-cc-discover:before { + content: "\f1f2"; } + +.icon-cc-amex:before { + content: "\f1f3"; } + +.icon-cc-paypal:before { + content: "\f1f4"; } + +.icon-cc-stripe:before { + content: "\f1f5"; } + +.icon-bell-slash:before { + content: "\f1f6"; } + +.icon-bell-slash-o:before { + content: "\f1f7"; } + +.icon-trash:before { + content: "\f1f8"; } + +.icon-copyright:before { + content: "\f1f9"; } + +.icon-at:before { + content: "\f1fa"; } + +.icon-eyedropper:before { + content: "\f1fb"; } + +.icon-paint-brush:before { + content: "\f1fc"; } + +.icon-birthday-cake:before { + content: "\f1fd"; } + +.icon-area-chart:before { + content: "\f1fe"; } + +.icon-pie-chart:before { + content: "\f200"; } + +.icon-line-chart:before { + content: "\f201"; } + +.icon-lastfm:before { + content: "\f202"; } + +.icon-lastfm-square:before { + content: "\f203"; } + +.icon-toggle-off:before { + content: "\f204"; } + +.icon-toggle-on:before { + content: "\f205"; } + +.icon-bicycle:before { + content: "\f206"; } + +.icon-bus:before { + content: "\f207"; } + +.icon-ioxhost:before { + content: "\f208"; } + +.icon-angellist:before { + content: "\f209"; } + +.icon-cc:before { + content: "\f20a"; } + +.icon-shekel:before, +.icon-sheqel:before, +.icon-ils:before { + content: "\f20b"; } + +.icon-meanpath:before { + content: "\f20c"; } + +.icon-buysellads:before { + content: "\f20d"; } + +.icon-connectdevelop:before { + content: "\f20e"; } + +.icon-dashcube:before { + content: "\f210"; } + +.icon-forumbee:before { + content: "\f211"; } + +.icon-leanpub:before { + content: "\f212"; } + +.icon-sellsy:before { + content: "\f213"; } + +.icon-shirtsinbulk:before { + content: "\f214"; } + +.icon-simplybuilt:before { + content: "\f215"; } + +.icon-skyatlas:before { + content: "\f216"; } + +.icon-cart-plus:before { + content: "\f217"; } + +.icon-cart-arrow-down:before { + content: "\f218"; } + +.icon-diamond:before { + content: "\f219"; } + +.icon-ship:before { + content: "\f21a"; } + +.icon-user-secret:before { + content: "\f21b"; } + +.icon-motorcycle:before { + content: "\f21c"; } + +.icon-street-view:before { + content: "\f21d"; } + +.icon-heartbeat:before { + content: "\f21e"; } + +.icon-venus:before { + content: "\f221"; } + +.icon-mars:before { + content: "\f222"; } + +.icon-mercury:before { + content: "\f223"; } + +.icon-transgender:before { + content: "\f224"; } + +.icon-transgender-alt:before { + content: "\f225"; } + +.icon-venus-double:before { + content: "\f226"; } + +.icon-mars-double:before { + content: "\f227"; } + +.icon-venus-mars:before { + content: "\f228"; } + +.icon-mars-stroke:before { + content: "\f229"; } + +.icon-mars-stroke-v:before { + content: "\f22a"; } + +.icon-mars-stroke-h:before { + content: "\f22b"; } + +.icon-neuter:before { + content: "\f22c"; } + +.icon-facebook-official:before { + content: "\f230"; } + +.icon-pinterest-p:before { + content: "\f231"; } + +.icon-whatsapp:before { + content: "\f232"; } + +.icon-server:before { + content: "\f233"; } + +.icon-user-plus:before { + content: "\f234"; } + +.icon-user-times:before { + content: "\f235"; } + +.icon-hotel:before, +.icon-bed:before { + content: "\f236"; } + +.icon-viacoin:before { + content: "\f237"; } + +.icon-train:before { + content: "\f238"; } + +.icon-subway:before { + content: "\f239"; } + +.icon-medium:before { + content: "\f23a"; } + +html { + height: 100%; + font-size: 16px; } + +body { + font-family: 'Source Sans Pro', sans-serif; + line-height: 1.3333; } + +#window { + min-height: 100vh; + background: #f5f5f5; } + +.badge { + background: #216C2A; + display: inline-block; + padding: 2px; + color: white; + border-radius: 2px; } + +.credit-amount--indicator { + font-weight: bold; + color: #216C2A; } + +#main-content { + padding: 24px; + margin-top: 60px; + display: flex; + flex-direction: column; } + #main-content main { + margin-left: auto; + margin-right: auto; + max-width: 100%; } + #main-content main.main--single-column { + width: 800px; } + +main.main--refreshing:before { + position: absolute; + background: url("../img/busy.gif") no-repeat center center; + width: 30px; + height: 24px; + content: ""; + left: 50%; + margin-left: -15px; + display: inline-block; } + +.icon-fixed-width { + /* This borrowed is from a component of Font Awesome we're not using, maybe add it? */ + width: 1.28571em; + text-align: center; } + +h2 { + font-size: 1.75em; } + +h3 { + font-size: 1.4em; } + +h4 { + font-size: 1.2em; } + +h5 { + font-size: 1.1em; } + +sup, sub { + vertical-align: baseline; + position: relative; } + +sup { + top: -0.4em; } + +sub { + top: 0.4em; } + +code { + font: 0.8em Consolas, 'Lucida Console', 'Source Sans', monospace; + background-color: #eee; } + +p { + margin-bottom: 0.8em; } + p:last-child { + margin-bottom: 0; } + +.hidden { + display: none; } + +.disabled { + pointer-events: none; + opacity: 0.7; } + +.truncated-text { + display: -webkit-box; + overflow: hidden; + -webkit-box-orient: vertical; } + +.busy-indicator { + background: url("../img/busy.gif") no-repeat center center; + display: inline-block; + margin: -1em 0; + min-width: 16px; + min-height: 8px; + vertical-align: middle; + padding: 0 30px; } + .busy-indicator:last-child { + padding-right: 2px; } + .busy-indicator:first-child { + padding-left: 2px; } + +/*should this be here or work this way? had to hack additional rule below*/ +.icon:only-child { + position: relative; + top: 0.16em; } + +.icon-featured > .icon { + top: 0; } + +.help { + font-size: .85em; + color: rgba(0, 0, 0, 0.6); } + +.meta { + font-size: 0.9em; + color: #505050; } + +.empty { + color: #505050; + font-style: italic; } + +/*should be redone/moved*/ +.file-list__header .busy-indicator { + float: left; + margin-top: 12px; } + +.sort-section { + display: block; + margin-bottom: 16px; + text-align: right; + line-height: 1; + font-size: 0.85em; + color: rgba(0, 0, 0, 0.6); } + +section.section-spaced { + margin-bottom: 24px; } + +.text-center { + text-align: center; } + +table.table-standard { + word-wrap: break-word; + max-width: 100%; } + table.table-standard th, table.table-standard td { + padding: 12px 8px; } + table.table-standard th { + font-weight: bold; + font-size: 0.9em; } + table.table-standard td { + vertical-align: top; } + table.table-standard thead th, table.table-standard > tr:first-child th { + vertical-align: bottom; + font-weight: bold; + font-size: 0.9em; + padding: 7px 8px 4px; + text-align: left; + border-bottom: 1px solid #e2e2e2; } + table.table-standard thead th img, table.table-standard > tr:first-child th img { + vertical-align: text-bottom; } + table.table-standard tr.thead:not(:first-child) th { + border-top: 1px solid #e2e2e2; } + table.table-standard tfoot td { + padding: 12px 8px; + font-size: .85em; } + table.table-standard tbody tr:nth-child(even):not(.odd) { + background-color: #f4f4f4; } + table.table-standard tbody tr:nth-child(odd):not(.even) { + background-color: white; } + table.table-standard tbody tr.thead { + background: none; } + table.table-standard tbody tr td { + border: 0 none; } + +table.table-stretch { + width: 100%; } + +.button-set-item { + position: relative; + display: inline-block; } + .button-set-item + .button-set-item { + margin-left: 12px; } + +.button-block, .faux-button-block { + display: inline-block; + height: 36px; + line-height: 36px; + text-decoration: none; + border: 0 none; + text-align: center; + border-radius: 2px; + text-transform: uppercase; } + .button-block .icon, .faux-button-block .icon { + top: 0em; } + .button-block .icon:first-child, .faux-button-block .icon:first-child { + padding-right: 5px; } + .button-block .icon:last-child, .faux-button-block .icon:last-child { + padding-left: 5px; } + .button-block .icon:only-child, .faux-button-block .icon:only-child { + padding-left: 0; + padding-right: 0; } + +.button-block { + cursor: pointer; } + +.button__content { + margin: 0 12px; } + +.button-primary { + color: #f0f0f0; + background-color: #155B4A; + box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12); } + .button-primary:focus { + color: white; + background-color: #125041; } + +.button-alt { + background-color: #D9D9D9; + box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12); } + +.button-text { + color: #155B4A; + cursor: pointer; + display: inline-block; } + .button-text .icon:first-child { + padding-right: 5px; } + .button-text .icon:last-child:not(:only-child) { + padding-left: 5px; } + .button-text:not(.no-underline) { + text-decoration: underline; } + .button-text:not(.no-underline) .icon { + text-decoration: none; } + .button-text:hover { + opacity: 0.7; + transition: opacity 0.225s ease; + text-decoration: underline; } + .button-text:hover .icon { + text-decoration: none; } + .button-text .button__content { + margin: 0 4px; } + +.button-text-help { + color: #aaa; + cursor: pointer; + font-size: 0.8em; } + .button-text-help .icon:first-child { + padding-right: 5px; } + .button-text-help .icon:last-child:not(:only-child) { + padding-left: 5px; } + .button-text-help:not(.no-underline) { + text-decoration: underline; } + .button-text-help:not(.no-underline) .icon { + text-decoration: none; } + .button-text-help:hover { + opacity: 0.7; + transition: opacity 0.225s ease; + text-decoration: underline; } + .button-text-help:hover .icon { + text-decoration: none; } + +.button--flat { + box-shadow: none !important; } + +.card { + margin-left: auto; + margin-right: auto; + max-width: 800px; + background: #ffffff; + box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12); + border-radius: 2px; + margin-bottom: 16px; + overflow: auto; } + +.card--obscured { + position: relative; } + +.card--obscured .card__inner { + filter: blur(20px); } + +.card__title-primary, +.card__title-identity, +.card__actions, +.card__content, +.card__subtext { + padding: 0 16px; } + +.card--small .card__title-primary, +.card--small .card__title-identity, +.card--small .card__actions, +.card--small .card__content, +.card--small .card__subtext { + padding: 0 8px; } + +.card__title-primary { + margin-top: 16px; } + +.card__title-identity { + margin-top: 8px; + margin-bottom: 8px; } + +.card__actions { + margin-top: 16px; } + +.card__actions--bottom { + margin-top: 8px; + margin-bottom: 8px; } + +.card__actions--form-submit { + margin-top: 24px; + margin-bottom: 16px; } + +.card__content { + margin-top: 16px; + margin-bottom: 16px; } + +.card__subtext { + color: #505050; + font-size: 0.82em; + margin-top: 8px; + margin-bottom: 8px; } + +.card__subtext--allow-newlines { + white-space: pre-wrap; } + +.card__subtext--two-lines { + height: 34.98579px; + /*this is so one line text still has the proper height*/ } + +.card-overlay { + position: absolute; + left: 0px; + right: 0px; + top: 0px; + bottom: 0px; + padding: 20px; + background-color: rgba(128, 128, 128, 0.8); + color: #fff; + display: flex; + align-items: center; + font-weight: 600; } + +.card__link { + display: block; } + +.card--link { + transition: transform 120ms ease-in-out; } + +.card--link:hover { + position: relative; + z-index: 1; + box-shadow: 2px 4px 4px 0 rgba(0, 0, 0, 0.14), 2px 5px 3px -2px rgba(0, 0, 0, 0.2), 2px 3px 7px 0 rgba(0, 0, 0, 0.12); + transform: scale(1.1) translate3d(10px, 0, 0); + transform-origin: 50% 50%; + overflow-x: visible; + overflow-y: visible; } + +.card--link:hover ~ .card--link { + transform: translate3d(20px, 0, 0); } + +.card__media { + background-size: cover; + background-repeat: no-repeat; + background-position: 50% 50%; } + +.card__media--autothumb { + position: relative; } + +.card__media--autothumb.purple { + background-color: #9c27b0; } + +.card__media--autothumb.red { + background-color: #e53935; } + +.card__media--autothumb.pink { + background-color: #e91e63; } + +.card__media--autothumb.indigo { + background-color: #3f51b5; } + +.card__media--autothumb.blue { + background-color: #2196f3; } + +.card__media--autothumb.light-blue { + background-color: #039be5; } + +.card__media--autothumb.cyan { + background-color: #00acc1; } + +.card__media--autothumb.teal { + background-color: #009688; } + +.card__media--autothumb.green { + background-color: #43a047; } + +.card__media--autothumb.yellow { + background-color: #ffeb3b; } + +.card__media--autothumb.orange { + background-color: #ffa726; } + +.card__media--autothumb .card__autothumb__text { + font-size: 2.0em; + width: 100%; + color: #ffffff; + text-align: center; + position: absolute; + top: 36%; } + +.card--small { + width: 240px; + overflow-x: hidden; + white-space: normal; } + +.card--small .card__media { + height: 135px; } + +.card--form { + width: 362px; } + +.card__subtitle { + color: rgba(0, 0, 0, 0.6); + font-size: 0.85em; + line-height: 1.56859; } + +.card-series-submit { + margin-left: auto; + margin-right: auto; + max-width: 800px; + padding: 12px; } + +.card-row + .card-row { + margin-top: 8px; } + +.card-row__items { + width: 100%; + overflow: hidden; + /*hacky way to give space for hover */ + padding-top: 20px; + margin-top: -20px; + padding-right: 30px; + margin-right: -30px; } + .card-row__items > .card { + vertical-align: top; + display: inline-block; } + .card-row__items > .card + .card { + margin-left: 8px; } + +.card-row--small { + overflow: hidden; + white-space: nowrap; + /*hacky way to give space for hover */ + padding-right: 30px; } + +.card-row__header { + margin-bottom: 8px; } + +.card-row__scrollhouse { + position: relative; } + +.card-row__nav { + position: absolute; + padding: 0 16px; + height: 100%; + top: 4px; } + +.card-row__nav .card-row__scroll-button { + background: #ffffff; + color: rgba(0, 0, 0, 0.6); + box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12); + padding: 24px 12px; + position: absolute; + cursor: pointer; + left: 0; + top: 36%; + z-index: 2; + opacity: 0.8; + transition: transform 60ms ease-in-out; } + .card-row__nav .card-row__scroll-button:hover { + opacity: 1.0; + transform: scale(1.21); } + +.card-row__nav--left { + left: 0; } + +.card-row__nav--right { + right: -30px; } + +.card__icon-featured-content { + color: orangered; } + +.file-actions { + line-height: 36px; + min-height: 36px; } + +.file-actions__download-status-bar .button__content, .file-actions__download-status-bar-overlay .button__content { + margin: 0 4px; } + +.file-actions__download-status-bar { + position: relative; + color: #444; } + +.file-actions__download-status-bar-overlay { + background: #444; + color: white; + position: absolute; + white-space: nowrap; + overflow: hidden; + z-index: 1; + top: 0px; + left: 0px; } + +.file-selector__choose-button { + font-size: 13px; } + +.file-selector__path { + font-size: 14px; } + +.file-tile__row { + overflow: hidden; + height: 144px; } + .file-tile__row .credit-amount { + float: right; } + .file-tile__row .icon-featured { + float: right; } + .file-tile__row .card__media { + height: 144px; + max-width: 144px; + width: 144px; + margin-right: 12px; + float: left; } + .file-tile__row .file-tile__content { + padding-top: 8px; + margin-left: 156px; } + .file-tile__row .card__title-primary { + margin-top: 0; } + +.form-row-submit { + margin-top: 24px; } + +.form-row-submit--with-footer { + margin-bottom: 24px; } + +.form-row__label-row { + margin-top: 20px; + margin-bottom: 4px; + line-height: 1; + font-size: 14.4px; } + +.form-row__label-row--prefix { + float: left; + margin-right: 5px; } + +input[type="text"].input-copyable { + border: 1px solid rgba(160, 160, 160, 0.5); + line-height: 1; + padding-top: 8px; + padding-bottom: 8px; + width: 330px; + padding-left: 5px; + padding-right: 5px; + width: 100%; } + input[type="text"].input-copyable:focus { + border-color: black; } + +.form-field { + display: inline-block; } + .form-field input[type="checkbox"], + .form-field input[type="radio"] { + cursor: pointer; } + .form-field select { + transition: outline 0.225s ease; + cursor: pointer; + box-sizing: border-box; + padding-left: 5px; + padding-right: 5px; + height: 24px; } + .form-field select:focus { + outline: 2px solid #155B4A; } + .form-field textarea, + .form-field input[type="text"], + .form-field input[type="password"], + .form-field input[type="email"], + .form-field input[type="number"], + .form-field input[type="search"], + .form-field input[type="date"] { + transition: all 0.225s ease; + cursor: pointer; + padding-left: 1px; + padding-right: 1px; + box-sizing: border-box; + -webkit-appearance: none; } + .form-field textarea::-webkit-input-placeholder, + .form-field input[type="text"]::-webkit-input-placeholder, + .form-field input[type="password"]::-webkit-input-placeholder, + .form-field input[type="email"]::-webkit-input-placeholder, + .form-field input[type="number"]::-webkit-input-placeholder, + .form-field input[type="search"]::-webkit-input-placeholder, + .form-field input[type="date"]::-webkit-input-placeholder { + color: #999999; } + .form-field textarea:-moz-placeholder, + .form-field input[type="text"]:-moz-placeholder, + .form-field input[type="password"]:-moz-placeholder, + .form-field input[type="email"]:-moz-placeholder, + .form-field input[type="number"]:-moz-placeholder, + .form-field input[type="search"]:-moz-placeholder, + .form-field input[type="date"]:-moz-placeholder { + color: #999999; } + .form-field textarea:-ms-input-placeholder, + .form-field input[type="text"]:-ms-input-placeholder, + .form-field input[type="password"]:-ms-input-placeholder, + .form-field input[type="email"]:-ms-input-placeholder, + .form-field input[type="number"]:-ms-input-placeholder, + .form-field input[type="search"]:-ms-input-placeholder, + .form-field input[type="date"]:-ms-input-placeholder { + color: #999999; } + .form-field textarea[readonly], + .form-field input[type="text"][readonly], + .form-field input[type="password"][readonly], + .form-field input[type="email"][readonly], + .form-field input[type="number"][readonly], + .form-field input[type="search"][readonly], + .form-field input[type="date"][readonly] { + background-color: #bbb; } + .form-field input[type="text"], + .form-field input[type="password"], + .form-field input[type="email"], + .form-field input[type="number"], + .form-field input[type="search"], + .form-field input[type="date"] { + border-bottom: 2px solid rgba(160, 160, 160, 0.5); + line-height: 1; + padding-top: 8px; + padding-bottom: 8px; } + .form-field input[type="text"].form-field__input--error, + .form-field input[type="password"].form-field__input--error, + .form-field input[type="email"].form-field__input--error, + .form-field input[type="number"].form-field__input--error, + .form-field input[type="search"].form-field__input--error, + .form-field input[type="date"].form-field__input--error { + border-color: #a94442; } + .form-field input[type="text"].form-field__input--inline, + .form-field input[type="password"].form-field__input--inline, + .form-field input[type="email"].form-field__input--inline, + .form-field input[type="number"].form-field__input--inline, + .form-field input[type="search"].form-field__input--inline, + .form-field input[type="date"].form-field__input--inline { + padding-top: 0; + padding-bottom: 0; + border-bottom-width: 1px; + margin-left: 8px; + margin-right: 8px; } + .form-field textarea:focus, + .form-field input[type="text"]:focus, + .form-field input[type="password"]:focus, + .form-field input[type="email"]:focus, + .form-field input[type="number"]:focus, + .form-field input[type="search"]:focus, + .form-field input[type="date"]:focus { + border-color: #155B4A; } + .form-field textarea { + padding: 2px; + border: 2px solid rgba(160, 160, 160, 0.5); } + +.form-field--SimpleMDE { + display: block; } + +.form-field__label[for] { + cursor: pointer; } + +.form-field__label > input[type="checkbox"], .form-field__label input[type="radio"] { + margin-right: 6px; } + +.form-field__label--error { + color: #a94442; } + +.form-field__input-text { + width: 330px; } + +.form-field__prefix { + margin-right: 4px; } + +.form-field__postfix { + margin-left: 4px; } + +.form-field__input-number { + width: 70px; + text-align: right; } + +.form-field--textarea { + width: 100%; } + +.form-field__input-textarea { + width: 100%; } + +.form-field__error, .form-field__helper { + margin-top: 8px; + font-size: 0.8em; + transition: opacity 0.225s ease; } + +.form-field__error { + color: #a94442; } + +.form-field__helper { + color: rgba(0, 0, 0, 0.6); } + +.form-field__input.form-field__input-SimpleMDE .CodeMirror-scroll { + height: auto; } + +#header { + color: #666; + background: #fff; + display: flex; + position: fixed; + box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12); + top: 0; + left: 0; + width: 100%; + z-index: 3; + padding: 12px; + box-sizing: border-box; } + +.header__item { + flex: 0 0 content; + padding-left: 6px; + padding-right: 6px; } + +.header__item--wunderbar { + flex-grow: 1; } + +.wunderbar { + position: relative; } + .wunderbar .icon { + position: absolute; + left: 10px; + top: 8px; } + +.wunderbar--active .icon-search { + color: #155B4A; } + +.wunderbar__input { + background: rgba(255, 255, 255, 0.7); + width: 100%; + color: #666; + height: 36px; + line-height: 36px; + padding-left: 38px; + padding-right: 5px; + border: 1px solid #000; + -webkit-border-radius: 2px; + -moz-border-radius: 2px; + -ms-border-radius: 2px; + border-radius: 2px; + border: 1px solid #ccc; } + .wunderbar__input:focus { + color: #333333; + box-shadow: 2px 4px 4px 0 rgba(0, 0, 0, 0.14), 2px 5px 3px -2px rgba(0, 0, 0, 0.2), 2px 3px 7px 0 rgba(0, 0, 0, 0.12); + border-color: #155B4A; } + +nav.sub-header { + text-transform: uppercase; + padding: 0 0 24px; + max-width: 800px; + margin-left: auto; + margin-right: auto; } + nav.sub-header > a { + display: inline-block; + margin: 0 15px; + padding: 0 5px; + line-height: 34px; + color: #666; } + nav.sub-header > a:first-child { + margin-left: 0; } + nav.sub-header > a:last-child { + margin-right: 0; } + nav.sub-header > a.sub-header-selected { + border-bottom: 2px solid #333333; + color: #333333; } + nav.sub-header > a:hover { + color: #333333; } + +.menu-container { + display: inline-block; } + +.menu { + position: absolute; + white-space: nowrap; + background-color: white; + box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12); + border-radius: 2px; + padding-top: 4.8px 0px; + z-index: 1; } + +.menu__menu-item { + display: block; + padding: 6px 12px; } + .menu__menu-item:hover { + background: #D9D9D9; } + +.tooltip { + position: relative; } + +.tooltip__link { + color: #155B4A; + cursor: pointer; } + .tooltip__link .icon:first-child { + padding-right: 5px; } + .tooltip__link .icon:last-child:not(:only-child) { + padding-left: 5px; } + .tooltip__link:not(.no-underline) { + text-decoration: underline; } + .tooltip__link:not(.no-underline) .icon { + text-decoration: none; } + .tooltip__link:hover { + opacity: 0.7; + transition: opacity 0.225s ease; + text-decoration: underline; } + .tooltip__link:hover .icon { + text-decoration: none; } + +.tooltip__body { + position: absolute; + z-index: 1; + left: 50%; + margin-left: -150px; + white-space: normal; + box-sizing: border-box; + padding: 12px; + width: 300px; + border: 1px solid #aaa; + color: #000; + background-color: #ffffff; + font-size: 14px; + line-height: 1.3333; + box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12); } + +.tooltip--header .tooltip__link { + color: #aaa; + cursor: pointer; + font-size: 12px; + margin-left: 12px; + vertical-align: middle; } + .tooltip--header .tooltip__link .icon:first-child { + padding-right: 5px; } + .tooltip--header .tooltip__link .icon:last-child:not(:only-child) { + padding-left: 5px; } + .tooltip--header .tooltip__link:not(.no-underline) { + text-decoration: underline; } + .tooltip--header .tooltip__link:not(.no-underline) .icon { + text-decoration: none; } + .tooltip--header .tooltip__link:hover { + opacity: 0.7; + transition: opacity 0.225s ease; + text-decoration: underline; } + .tooltip--header .tooltip__link:hover .icon { + text-decoration: none; } + +.load-screen { + color: white; + background: #155B4A; + background-size: cover; + min-height: 100vh; + min-width: 100vw; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; } + +.load-screen__message { + margin-top: 24px; + width: 325px; + text-align: center; } + +.load-screen__details { + color: #c3c3c3; } + +.load-screen__details--warning { + color: white; } + +.load-screen__cancel-link { + color: white; } + +.channel-indicator__icon--invalid { + color: #a94442; } + +.notice { + padding: 10px 20px; + border: 1px solid #000; + text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5); + border-radius: 5px; + color: #468847; + background-color: #dff0d8; + border-color: #d6e9c6; } + +.notice--error { + color: #b94a48; + background-color: #f2dede; + border-color: #eed3d7; } + +.modal-overlay, .error-modal-overlay { + position: fixed; + display: flex; + justify-content: center; + align-items: center; + top: 0px; + left: 0px; + right: 0px; + bottom: 0px; + background-color: rgba(255, 255, 255, 0.74902); + z-index: 9999; } + +.modal-overlay--clear { + background-color: transparent; } + +.modal { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + border: 1px solid #cccccc; + background: white; + overflow: auto; + border-radius: 4px; + padding: 24px; + box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12); + max-width: 400px; + word-break: break-word; } + +.modal__header { + margin-bottom: 16px; + text-align: center; } + +.modal__buttons { + display: flex; + flex-direction: row; + justify-content: center; + margin-top: 16px; } + +.modal__button { + margin: 0px 6px; } + +.error-modal-overlay { + background: rgba(0, 0, 0, 0.88); } + +.error-modal__content { + display: flex; + padding: 0px 8px 10px 10px; } + +.error-modal__warning-symbol { + margin-top: 6px; + margin-right: 7px; } + +.download-started-modal__file-path { + word-break: break-all; } + +.error-modal { + max-width: none; + width: 400px; } + +.error-modal__error-list { + /*shitty hack/temp fix for long errors making modals unusable*/ + border: 1px solid #eee; + padding: 8px; + list-style: none; + max-height: 400px; + max-width: 400px; + overflow-y: hidden; } + +.snack-bar { + line-height: 36px; + padding: 6px 24px; + position: fixed; + top: 24px; + left: 0; + right: 0; + margin-left: auto; + margin-right: auto; + min-width: 300px; + max-width: 500px; + background: rgba(32, 32, 32, 0.9); + color: #f0f0f0; + display: flex; + justify-content: space-between; + align-items: center; + border-radius: 2px; + transition: all 0.225s ease; + z-index: 10000; + /*hack to get it over react modal */ } + +.snack-bar__action { + display: inline-block; + text-transform: uppercase; + color: #7df2d6; + margin: 0px 0px 0px 24px; + min-width: min-content; } + .snack-bar__action:hover { + text-decoration: underline; } + +video { + object-fit: contain; + box-sizing: border-box; + max-height: 100%; + max-width: 100%; + background-size: contain; + background-position: center center; + background-repeat: no-repeat; } + +.video { + background: #000; + color: white; } + +.video-embedded { + max-width: 800px; + max-height: 450px; + height: 450px; + position: relative; } + .video-embedded video { + height: 100%; + position: absolute; + left: 0; + top: 0; } + .video-embedded.video--hidden { + height: 450px; } + .video-embedded.video--active { + /*background: none;*/ } + +.video--obscured .video__cover { + position: relative; + filter: blur(20px); } + +.video__loading-screen { + height: 100%; + display: flex; + justify-content: center; + align-items: center; } + +.video__loading-spinner { + position: relative; + width: 11em; + height: 11em; + margin: 20px auto; + font-size: 3px; + border-radius: 50%; + background: linear-gradient(to right, #ffffff 10%, rgba(255, 255, 255, 0) 50%); + animation: spin 1.4s infinite linear; + transform: translateZ(0); } + +@keyframes spin { + from { + transform: rotate(0deg); } + to { + transform: rotate(360deg); } } + .video__loading-spinner:before, .video__loading-spinner:after { + content: ''; + position: absolute; + top: 0; + left: 0; } + .video__loading-spinner:before { + width: 50%; + height: 50%; + background: #ffffff; + border-radius: 100% 0 0 0; } + .video__loading-spinner:after { + height: 75%; + width: 75%; + margin: auto; + bottom: 0; + right: 0; + background: black; + border-radius: 50%; } + +.video__loading-status { + padding-top: 20px; + color: white; } + +.video__cover { + text-align: center; + height: 100%; + width: 100%; + background-size: auto 100%; + background-position: center center; + background-repeat: no-repeat; + position: relative; } + .video__cover .video__play-button { + display: -webkit-box; + display: -moz-box; + display: -ms-flexbox; + display: -webkit-flex; + 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; } + +.video__play-button { + position: absolute; + width: 100%; + height: 100%; + cursor: pointer; + display: none; + font-size: 72px; + color: white; + z-index: 1; + background: rgba(32, 32, 32, 0.9); + opacity: 0.6; + left: 0; + top: 0; } + .video__play-button:hover { + opacity: 1; + transition: opacity 0.225s ease; } + +.pagination { + display: block; + padding: 0; + margin: 0 auto; + text-align: center; } + +.pagination__item { + display: inline-block; + line-height: 36px; + height: 36px; + border-radius: 2px; } + .pagination__item:not(.pagination__item--selected):hover { + background: rgba(0, 0, 0, 0.2); } + .pagination__item:not(.pagination__item--selected):hover > a { + cursor: hand; } + .pagination__item > a { + display: inline-block; + padding: 0 16px; } + +.pagination__item--previous, .pagination__item--next { + font-size: 1.2em; } + +.pagination__item--selected { + color: white; + background: #155B4A; } + +.developer-page__custom-lighthouse-servers { + font: 0.8em monospace; + width: 30em; + height: 10em; } + +.reward-page__details { + background-color: #f9f9f9; } + +.show-page-media { + text-align: center; + margin-bottom: 24px; } + .show-page-media img { + max-width: 100%; } + .show-page-media iframe { + width: 100%; + min-height: 500px; } From b7781f0e40ea1f5cb6213ccb3bc52356ef521f2e Mon Sep 17 00:00:00 2001 From: btzr-io Date: Sun, 6 Aug 2017 12:17:16 -0600 Subject: [PATCH 06/47] fix var names --- ui/js/page/settings/view.jsx | 5 +++-- ui/js/util/getThemes.js | 1 + 2 files changed, 4 insertions(+), 2 deletions(-) diff --git a/ui/js/page/settings/view.jsx b/ui/js/page/settings/view.jsx index 8fa7c93a8..aa9d59f9f 100644 --- a/ui/js/page/settings/view.jsx +++ b/ui/js/page/settings/view.jsx @@ -85,6 +85,7 @@ class SettingsPage extends React.PureComponent { } onThemeChange(event) { + // Todo: Add better way to handle this const value = event.target.value; const link = document.getElementById("theme"); link.href = `./themes/${value}.css`; @@ -272,8 +273,8 @@ class SettingsPage extends React.PureComponent { defaultValue={lbry.getClientSetting("theme")} className="form-field__input--inline" > - {themes.map((i, k) => - + {themes.map((name, index) => + )} diff --git a/ui/js/util/getThemes.js b/ui/js/util/getThemes.js index d82bc4d0c..09926502c 100644 --- a/ui/js/util/getThemes.js +++ b/ui/js/util/getThemes.js @@ -1,3 +1,4 @@ +// Todo: Add a better way to do this const { readdirSync } = require("fs"); const { extname } = require("path"); const { remote } = require("electron"); From 694f02dc59e3c23d271d9ba9ecf57bdd39d87776 Mon Sep 17 00:00:00 2001 From: btzr-io Date: Sun, 6 Aug 2017 18:55:31 -0600 Subject: [PATCH 07/47] implement getThemes action --- ui/js/actions/settings.js | 23 +++++++++++++++++++++++ ui/js/constants/action_types.js | 6 ++++-- ui/js/page/settings/index.js | 7 ++++++- ui/js/page/settings/view.jsx | 11 ++++++----- ui/js/util/getThemes.js | 21 --------------------- 5 files changed, 39 insertions(+), 29 deletions(-) delete mode 100644 ui/js/util/getThemes.js diff --git a/ui/js/actions/settings.js b/ui/js/actions/settings.js index f4fd86142..9b450bb08 100644 --- a/ui/js/actions/settings.js +++ b/ui/js/actions/settings.js @@ -1,5 +1,8 @@ import * as types from "constants/action_types"; import lbry from "lbry"; +import { readdirSync } from "fs"; +import { extname } from "path"; +import { remote } from "electron"; export function doFetchDaemonSettings() { return function(dispatch, getState) { @@ -41,3 +44,23 @@ export function doSetClientSetting(key, value) { }, }; } + +export function getThemes() { + // Themes path + const themesPath = `${remote.app.getAppPath()}/dist/themes`; + + // Get all .css files + const files = readdirSync(themesPath).filter(function(file) { + return extname(file) === ".css"; + }); + + // Get theme name + const themes = files.map(function(file) { + return file.replace(".css", ""); + }); + + return { + type: types.GET_THEMES, + data: { themes }, + }; +} diff --git a/ui/js/constants/action_types.js b/ui/js/constants/action_types.js index 71d6d8072..25fe50c47 100644 --- a/ui/js/constants/action_types.js +++ b/ui/js/constants/action_types.js @@ -85,6 +85,9 @@ export const SEARCH_CANCELLED = "SEARCH_CANCELLED"; export const DAEMON_SETTINGS_RECEIVED = "DAEMON_SETTINGS_RECEIVED"; export const CLIENT_SETTING_CHANGED = "CLIENT_SETTING_CHANGED"; +// Themes +export const GET_THEMES = "GET_THEMES"; + // User export const AUTHENTICATION_STARTED = "AUTHENTICATION_STARTED"; export const AUTHENTICATION_SUCCESS = "AUTHENTICATION_SUCCESS"; @@ -112,5 +115,4 @@ export const CLAIM_REWARD_STARTED = "CLAIM_REWARD_STARTED"; export const CLAIM_REWARD_SUCCESS = "CLAIM_REWARD_SUCCESS"; export const CLAIM_REWARD_FAILURE = "CLAIM_REWARD_FAILURE"; export const CLAIM_REWARD_CLEAR_ERROR = "CLAIM_REWARD_CLEAR_ERROR"; -export const FETCH_REWARD_CONTENT_COMPLETED = - "FETCH_REWARD_CONTENT_COMPLETED"; +export const FETCH_REWARD_CONTENT_COMPLETED = "FETCH_REWARD_CONTENT_COMPLETED"; diff --git a/ui/js/page/settings/index.js b/ui/js/page/settings/index.js index c74b918af..a202da461 100644 --- a/ui/js/page/settings/index.js +++ b/ui/js/page/settings/index.js @@ -1,7 +1,11 @@ import React from "react"; import { connect } from "react-redux"; import { doClearCache } from "actions/app"; -import { doSetDaemonSetting, doSetClientSetting } from "actions/settings"; +import { + doSetDaemonSetting, + doSetClientSetting, + getThemes, +} from "actions/settings"; import { selectDaemonSettings, selectShowNsfw } from "selectors/settings"; import SettingsPage from "./view"; @@ -13,6 +17,7 @@ const select = state => ({ const perform = dispatch => ({ setDaemonSetting: (key, value) => dispatch(doSetDaemonSetting(key, value)), clearCache: () => dispatch(doClearCache()), + getThemes: () => dispatch(getThemes()), setClientSetting: (key, value) => dispatch(doSetClientSetting(key, value)), }); diff --git a/ui/js/page/settings/view.jsx b/ui/js/page/settings/view.jsx index aa9d59f9f..b6b7ecedd 100644 --- a/ui/js/page/settings/view.jsx +++ b/ui/js/page/settings/view.jsx @@ -3,10 +3,7 @@ import { FormField, FormRow } from "component/form.js"; import SubHeader from "component/subHeader"; import lbry from "lbry.js"; import Link from "component/link"; -import getThemes from "util/getThemes"; - -const { remote } = require("electron"); -const themes = getThemes(); +import { remote } from "electron"; class SettingsPage extends React.PureComponent { constructor(props) { @@ -37,6 +34,10 @@ class SettingsPage extends React.PureComponent { setTimeout(clear, 1000, { once: true }); } + getThemes() { + return this.props.getThemes().data.themes; + } + setDaemonSetting(name, value) { this.props.setDaemonSetting(name, value); } @@ -273,7 +274,7 @@ class SettingsPage extends React.PureComponent { defaultValue={lbry.getClientSetting("theme")} className="form-field__input--inline" > - {themes.map((name, index) => + {this.getThemes().map((name, index) => )} diff --git a/ui/js/util/getThemes.js b/ui/js/util/getThemes.js deleted file mode 100644 index 09926502c..000000000 --- a/ui/js/util/getThemes.js +++ /dev/null @@ -1,21 +0,0 @@ -// Todo: Add a better way to do this -const { readdirSync } = require("fs"); -const { extname } = require("path"); -const { remote } = require("electron"); - -function getThemes() { - // Themes path - const themesPath = `${remote.app.getAppPath()}/dist/themes`; - - // Get all themes / only .css - const themes = readdirSync(themesPath).filter(function(file) { - return extname(file) === ".css"; - }); - - // Remove file extension (css) - return themes.map(function(theme) { - return theme.replace(".css", ""); - }); -} - -export default getThemes; From 8d1c3531b75460f9fb7dcc412f0c83f20d902160 Mon Sep 17 00:00:00 2001 From: btzr-io Date: Sun, 6 Aug 2017 20:23:52 -0600 Subject: [PATCH 08/47] update build all.scss > themes/light.css --- build/build.sh | 2 +- ui/dist/index.html | 2 +- ui/dist/themes/light.css | 4 ++-- ui/watch.sh | 6 +++--- 4 files changed, 7 insertions(+), 7 deletions(-) diff --git a/build/build.sh b/build/build.sh index 9fa139877..7ac52a232 100755 --- a/build/build.sh +++ b/build/build.sh @@ -63,7 +63,7 @@ yarn install yarn install npm rebuild node-sass node extractLocals.js - node_modules/.bin/node-sass --output dist/css --sourcemap=none scss/ + node_modules/.bin/node-sass --sourcemap=none scss/all.scss dist/themes/light.css node_modules/.bin/webpack cp -r dist/* "$ROOT/app/dist/" ) diff --git a/ui/dist/index.html b/ui/dist/index.html index c5b675312..65372000d 100644 --- a/ui/dist/index.html +++ b/ui/dist/index.html @@ -6,7 +6,7 @@ - + diff --git a/ui/dist/themes/light.css b/ui/dist/themes/light.css index bdddae868..baafffae0 100644 --- a/ui/dist/themes/light.css +++ b/ui/dist/themes/light.css @@ -2050,13 +2050,13 @@ table.table-stretch { position: relative; z-index: 1; box-shadow: 2px 4px 4px 0 rgba(0, 0, 0, 0.14), 2px 5px 3px -2px rgba(0, 0, 0, 0.2), 2px 3px 7px 0 rgba(0, 0, 0, 0.12); - transform: scale(1.1) translate3d(10px, 0, 0); + transform: scale(1.1) translateX(10px); transform-origin: 50% 50%; overflow-x: visible; overflow-y: visible; } .card--link:hover ~ .card--link { - transform: translate3d(20px, 0, 0); } + transform: translateX(20px); } .card__media { background-size: cover; diff --git a/ui/watch.sh b/ui/watch.sh index 4ea14c42b..b3d0e67ab 100755 --- a/ui/watch.sh +++ b/ui/watch.sh @@ -18,8 +18,8 @@ DIR="$( cd "$( dirname "${BASH_SOURCE[0]}" )" && pwd )" fi # run sass once without --watch to force update. then run with --watch to keep watching - node_modules/.bin/node-sass --output $DIR/../app/dist/css --sourcemap=none $DIR/scss/ - node_modules/.bin/node-sass --output $DIR/../app/dist/css --sourcemap=none --watch $DIR/scss/ & + node_modules/.bin/node-sass --sourcemap=none $DIR/scss/all.scss $DIR/../app/dist/themes/light.css + node_modules/.bin/node-sass --sourcemap=none --watch $DIR/scss/all.scss $DIR/../app/dist/themes/light.css & node_modules/.bin/webpack --config webpack.dev.config.js --progress --colors --watch -) \ No newline at end of file +) From 0873cb76b066bcab5019a92a2ad06117c778d4f8 Mon Sep 17 00:00:00 2001 From: btzr-io Date: Sun, 6 Aug 2017 21:01:10 -0600 Subject: [PATCH 09/47] fix react warning --- ui/js/page/settings/view.jsx | 11 +++++++++-- 1 file changed, 9 insertions(+), 2 deletions(-) diff --git a/ui/js/page/settings/view.jsx b/ui/js/page/settings/view.jsx index 633554735..33d9fb638 100644 --- a/ui/js/page/settings/view.jsx +++ b/ui/js/page/settings/view.jsx @@ -20,6 +20,7 @@ class SettingsPage extends React.PureComponent { language: lbry.getClientSetting("language"), clearingCache: false, theme: lbry.getClientSetting("theme"), + themes: [], }; } @@ -37,7 +38,8 @@ class SettingsPage extends React.PureComponent { } getThemes() { - return this.props.getThemes().data.themes; + const themes = this.props.getThemes().data.themes; + this.setState({ themes }); } setDaemonSetting(name, value) { @@ -115,6 +117,11 @@ class SettingsPage extends React.PureComponent { onShowUnavailableChange(event) {} + componentDidMount() { + const { themes } = this.state; + this.getThemes(); + } + render() { const { daemonSettings } = this.props; @@ -242,7 +249,7 @@ class SettingsPage extends React.PureComponent { defaultValue={lbry.getClientSetting("theme")} className="form-field__input--inline" > - {this.getThemes().map((name, index) => + {this.state.themes.map((name, index) => )} From c4b8b0ff008a3f96563d6882dde3e66eb19f8983 Mon Sep 17 00:00:00 2001 From: btzr-io Date: Sun, 6 Aug 2017 22:57:14 -0600 Subject: [PATCH 10/47] load dark theme --- app/package.json | 3 ++- app/yarn.lock | 4 ++++ build/build.sh | 15 ++++++++++++++- 3 files changed, 20 insertions(+), 2 deletions(-) diff --git a/app/package.json b/app/package.json index 81027f7a8..39758862d 100644 --- a/app/package.json +++ b/app/package.json @@ -12,6 +12,7 @@ "install": "^0.8.7", "jayson": "^2.0.2", "keytar": "^4.0.3", + "lbry-dark-theme": "https://github.com/btzr-io/lbry-dark-theme", "npm": "^4.2.0", "semver": "^5.3.0", "tree-kill": "^1.1.0" @@ -22,4 +23,4 @@ "lbrySettings": { "lbrynetDaemonVersion": "0.14.2" } -} \ No newline at end of file +} diff --git a/app/yarn.lock b/app/yarn.lock index 22a12a134..341eeb5dc 100644 --- a/app/yarn.lock +++ b/app/yarn.lock @@ -876,6 +876,10 @@ lazy-req@^2.0.0: version "2.0.0" resolved "https://registry.yarnpkg.com/lazy-req/-/lazy-req-2.0.0.tgz#c9450a363ecdda2e6f0c70132ad4f37f8f06f2b4" +"lbry-dark-theme@https://github.com/btzr-io/lbry-dark-theme": + version "2.0.0" + resolved "https://github.com/btzr-io/lbry-dark-theme#5ce4d2ceff67d62fde2eea307be728795b8b8c2f" + lcid@^1.0.0: version "1.0.0" resolved "https://registry.yarnpkg.com/lcid/-/lcid-1.0.0.tgz#308accafa0bc483a3867b4b6f2b9506251d1b835" diff --git a/build/build.sh b/build/build.sh index 7ac52a232..6ea63e000 100755 --- a/build/build.sh +++ b/build/build.sh @@ -65,7 +65,20 @@ yarn install node extractLocals.js node_modules/.bin/node-sass --sourcemap=none scss/all.scss dist/themes/light.css node_modules/.bin/webpack - cp -r dist/* "$ROOT/app/dist/" + cp -r ./dist/ "$ROOT/app" +) + + + +#################### +# DARK-THEME # +################### + +( + cd "$ROOT/app/" + yarn add https://github.com/btzr-io/lbry-dark-theme --production + cd "./node_modules/lbry-dark-theme/dist/" + cp -r dark.css "$ROOT/app/dist/themes" ) From beffda09bdb3a8155b8d3603e6927e8dc71f20f9 Mon Sep 17 00:00:00 2001 From: btzr-io Date: Fri, 11 Aug 2017 17:29:35 -0600 Subject: [PATCH 11/47] update CHANGELOG.md --- CHANGELOG.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 80c4d8d48..bf3b16dff 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -9,6 +9,8 @@ Web UI version numbers should always match the corresponding version of LBRY App ## [Unreleased] ### Added * Added a new component, `FormFieldPrice` which is now used in Publish and Settings + * Added a theme system to select different themes in Settings. + * New Dark theme. * ### Changed From c9c50349b8e81a100ed7c0830796289d59a23a49 Mon Sep 17 00:00:00 2001 From: btzr-io Date: Sat, 12 Aug 2017 12:46:10 -0600 Subject: [PATCH 12/47] implement initial fallback for missing theme load last theme selected --- ui/js/main.js | 4 ++++ ui/js/page/settings/view.jsx | 15 +++++++++------ ui/js/util/setTheme.js | 18 ++++++++++++++++++ 3 files changed, 31 insertions(+), 6 deletions(-) create mode 100644 ui/js/util/setTheme.js diff --git a/ui/js/main.js b/ui/js/main.js index 48f838331..999a13c64 100644 --- a/ui/js/main.js +++ b/ui/js/main.js @@ -8,6 +8,7 @@ import store from "store.js"; import SplashScreen from "component/splash"; import { doChangePath, doNavigate, doDaemonReady } from "actions/app"; import { toQueryString } from "util/query_params"; +import setTheme from "util/setTheme"; import * as types from "constants/action_types"; const env = ENV; @@ -71,6 +72,9 @@ document.addEventListener("click", event => { } }); +// Load initial theme +setTheme(lbry.getClientSetting("theme")); + const application = remote.app; const dock = application.dock; const win = remote.getCurrentWindow(); diff --git a/ui/js/page/settings/view.jsx b/ui/js/page/settings/view.jsx index 33d9fb638..37b9e4a6a 100644 --- a/ui/js/page/settings/view.jsx +++ b/ui/js/page/settings/view.jsx @@ -6,6 +6,7 @@ import lbry from "lbry.js"; import Link from "component/link"; import FormFieldPrice from "component/formFieldPrice"; import { remote } from "electron"; +import setTheme from "util/setTheme"; class SettingsPage extends React.PureComponent { constructor(props) { @@ -38,7 +39,7 @@ class SettingsPage extends React.PureComponent { } getThemes() { - const themes = this.props.getThemes().data.themes; + const { themes } = this.props.getThemes().data; this.setState({ themes }); } @@ -51,6 +52,11 @@ class SettingsPage extends React.PureComponent { this._onSettingSaveSuccess(); } + setTheme(value) { + setTheme(value); + this.props.setClientSetting("theme", value); + } + onRunOnStartChange(event) { this.setDaemonSetting("run_on_startup", event.target.checked); } @@ -72,11 +78,8 @@ class SettingsPage extends React.PureComponent { } onThemeChange(event) { - // Todo: Add better way to handle this - const value = event.target.value; - const link = document.getElementById("theme"); - link.href = `./themes/${value}.css`; - this.props.setClientSetting("theme", value); + const { value } = event.target; + this.setTheme(value); } // onMaxUploadPrefChange(isLimited) { diff --git a/ui/js/util/setTheme.js b/ui/js/util/setTheme.js new file mode 100644 index 000000000..3e7e94fd2 --- /dev/null +++ b/ui/js/util/setTheme.js @@ -0,0 +1,18 @@ +import lbry from "lbry"; +import { existsSync } from "fs"; +import { remote } from "electron"; + +function setTheme(name) { + const link = document.getElementById("theme"); + const file = `${name}.css`; + const path = `${remote.app.getAppPath()}/dist/themes/${file}`; + + if (existsSync(path)) { + link.href = `./themes/${file}`; + lbry.setClientSetting("theme", name); + } else { + lbry.setClientSetting("theme", "light"); + } +} + +export default setTheme; From 8a416856e3a06b06d534c2b808ba47d41dd060e1 Mon Sep 17 00:00:00 2001 From: btzr-io Date: Sat, 12 Aug 2017 13:51:16 -0600 Subject: [PATCH 13/47] load light theme as fallback --- ui/js/util/setTheme.js | 1 + 1 file changed, 1 insertion(+) diff --git a/ui/js/util/setTheme.js b/ui/js/util/setTheme.js index 3e7e94fd2..71c101298 100644 --- a/ui/js/util/setTheme.js +++ b/ui/js/util/setTheme.js @@ -11,6 +11,7 @@ function setTheme(name) { link.href = `./themes/${file}`; lbry.setClientSetting("theme", name); } else { + link.href = `./themes/light.css`; lbry.setClientSetting("theme", "light"); } } From a71426b119fafba0f0eca530dc1381d995325f88 Mon Sep 17 00:00:00 2001 From: btzr-io Date: Sat, 12 Aug 2017 19:57:02 -0600 Subject: [PATCH 14/47] remove compiled css --- ui/dist/themes/light.css | 2859 -------------------------------------- 1 file changed, 2859 deletions(-) delete mode 100644 ui/dist/themes/light.css diff --git a/ui/dist/themes/light.css b/ui/dist/themes/light.css deleted file mode 100644 index baafffae0..000000000 --- a/ui/dist/themes/light.css +++ /dev/null @@ -1,2859 +0,0 @@ -body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, select, textarea, p, blockquote, th, td, iframe { - margin: 0; - padding: 0; } - -:focus { - outline: 0; } - -input::-webkit-search-cancel-button { - /* Remove default */ - -webkit-appearance: none; } - -table { - border-collapse: collapse; - border-spacing: 0; } - -fieldset, img, iframe { - border: 0; } - -h1, h2, h3, h4, h5, h6 { - font-weight: normal; } - -ol, ul { - list-style-position: inside; } - ol > li, ul > li { - list-style-position: inside; } - -input, textarea, select { - font-family: inherit; - font-size: inherit; - font-weight: inherit; - border: 0 none; } - -img { - width: auto\9; - height: auto; - vertical-align: middle; - -ms-interpolation-mode: bicubic; } - -a { - color: inherit; - text-decoration: none; } - -@font-face { - font-family: 'FontAwesome'; - src: url("../font/fontawesome-webfont.eot?v=4.3.0"); - src: url("../font/fontawesome-webfont.eot?#iefix&v=4.3.0") format("embedded-opentype"), url("../font/fontawesome-webfont.woff2?v=4.3.0") format("woff2"), url("../font/fontawesome-webfont.woff?v=4.3.0") format("woff"), url("../font/fontawesome-webfont.ttf?v=4.3.0") format("truetype"), url("../font/fontawesome-webfont.svg?v=4.3.0#fontawesomeregular") format("svg"); - font-weight: normal; - font-style: normal; } - -[class*="icon-"] { - display: inline-block; - text-align: center; - font-family: "FontAwesome"; - font-style: normal; - font-weight: normal; - font-variant: normal; - text-transform: none; - speak: none; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; - font-size: inherit; - text-rendering: auto; - transform: translate(0, 0); } - -/* Font Awesome uses the Unicode Private Use Area (PUA) to ensure screen - readers do not read off random characters that represent icons */ -.icon-glass:before { - content: "\f000"; } - -.icon-music:before { - content: "\f001"; } - -.icon-search:before { - content: "\f002"; } - -.icon-envelope-o:before { - content: "\f003"; } - -.icon-heart:before { - content: "\f004"; } - -.icon-star:before { - content: "\f005"; } - -.icon-star-o:before { - content: "\f006"; } - -.icon-user:before { - content: "\f007"; } - -.icon-film:before { - content: "\f008"; } - -.icon-th-large:before { - content: "\f009"; } - -.icon-th:before { - content: "\f00a"; } - -.icon-th-list:before { - content: "\f00b"; } - -.icon-check:before { - content: "\f00c"; } - -.icon-remove:before, -.icon-close:before, -.icon-times:before { - content: "\f00d"; } - -.icon-search-plus:before { - content: "\f00e"; } - -.icon-search-minus:before { - content: "\f010"; } - -.icon-power-off:before { - content: "\f011"; } - -.icon-signal:before { - content: "\f012"; } - -.icon-gear:before, -.icon-cog:before { - content: "\f013"; } - -.icon-trash-o:before { - content: "\f014"; } - -.icon-home:before { - content: "\f015"; } - -.icon-file-o:before { - content: "\f016"; } - -.icon-clock-o:before { - content: "\f017"; } - -.icon-road:before { - content: "\f018"; } - -.icon-download:before { - content: "\f019"; } - -.icon-arrow-circle-o-down:before { - content: "\f01a"; } - -.icon-arrow-circle-o-up:before { - content: "\f01b"; } - -.icon-inbox:before { - content: "\f01c"; } - -.icon-play-circle-o:before { - content: "\f01d"; } - -.icon-rotate-right:before, -.icon-repeat:before { - content: "\f01e"; } - -.icon-refresh:before { - content: "\f021"; } - -.icon-list-alt:before { - content: "\f022"; } - -.icon-lock:before { - content: "\f023"; } - -.icon-flag:before { - content: "\f024"; } - -.icon-headphones:before { - content: "\f025"; } - -.icon-volume-off:before { - content: "\f026"; } - -.icon-volume-down:before { - content: "\f027"; } - -.icon-volume-up:before { - content: "\f028"; } - -.icon-qrcode:before { - content: "\f029"; } - -.icon-barcode:before { - content: "\f02a"; } - -.icon-tag:before { - content: "\f02b"; } - -.icon-tags:before { - content: "\f02c"; } - -.icon-book:before { - content: "\f02d"; } - -.icon-bookmark:before { - content: "\f02e"; } - -.icon-print:before { - content: "\f02f"; } - -.icon-camera:before { - content: "\f030"; } - -.icon-font:before { - content: "\f031"; } - -.icon-bold:before { - content: "\f032"; } - -.icon-italic:before { - content: "\f033"; } - -.icon-text-height:before { - content: "\f034"; } - -.icon-text-width:before { - content: "\f035"; } - -.icon-align-left:before { - content: "\f036"; } - -.icon-align-center:before { - content: "\f037"; } - -.icon-align-right:before { - content: "\f038"; } - -.icon-align-justify:before { - content: "\f039"; } - -.icon-list:before { - content: "\f03a"; } - -.icon-dedent:before, -.icon-outdent:before { - content: "\f03b"; } - -.icon-indent:before { - content: "\f03c"; } - -.icon-video-camera:before { - content: "\f03d"; } - -.icon-photo:before, -.icon-image:before, -.icon-picture-o:before { - content: "\f03e"; } - -.icon-pencil:before { - content: "\f040"; } - -.icon-map-marker:before { - content: "\f041"; } - -.icon-adjust:before { - content: "\f042"; } - -.icon-tint:before { - content: "\f043"; } - -.icon-edit:before, -.icon-pencil-square-o:before { - content: "\f044"; } - -.icon-share-square-o:before { - content: "\f045"; } - -.icon-check-square-o:before { - content: "\f046"; } - -.icon-arrows:before { - content: "\f047"; } - -.icon-step-backward:before { - content: "\f048"; } - -.icon-fast-backward:before { - content: "\f049"; } - -.icon-backward:before { - content: "\f04a"; } - -.icon-play:before { - content: "\f04b"; } - -.icon-pause:before { - content: "\f04c"; } - -.icon-stop:before { - content: "\f04d"; } - -.icon-forward:before { - content: "\f04e"; } - -.icon-fast-forward:before { - content: "\f050"; } - -.icon-step-forward:before { - content: "\f051"; } - -.icon-eject:before { - content: "\f052"; } - -.icon-chevron-left:before { - content: "\f053"; } - -.icon-chevron-right:before { - content: "\f054"; } - -.icon-plus-circle:before { - content: "\f055"; } - -.icon-minus-circle:before { - content: "\f056"; } - -.icon-times-circle:before { - content: "\f057"; } - -.icon-check-circle:before { - content: "\f058"; } - -.icon-question-circle:before { - content: "\f059"; } - -.icon-info-circle:before { - content: "\f05a"; } - -.icon-crosshairs:before { - content: "\f05b"; } - -.icon-times-circle-o:before { - content: "\f05c"; } - -.icon-check-circle-o:before { - content: "\f05d"; } - -.icon-ban:before { - content: "\f05e"; } - -.icon-arrow-left:before { - content: "\f060"; } - -.icon-arrow-right:before { - content: "\f061"; } - -.icon-arrow-up:before { - content: "\f062"; } - -.icon-arrow-down:before { - content: "\f063"; } - -.icon-mail-forward:before, -.icon-share:before { - content: "\f064"; } - -.icon-expand:before { - content: "\f065"; } - -.icon-compress:before { - content: "\f066"; } - -.icon-plus:before { - content: "\f067"; } - -.icon-minus:before { - content: "\f068"; } - -.icon-asterisk:before { - content: "\f069"; } - -.icon-exclamation-circle:before { - content: "\f06a"; } - -.icon-gift:before { - content: "\f06b"; } - -.icon-leaf:before { - content: "\f06c"; } - -.icon-fire:before { - content: "\f06d"; } - -.icon-eye:before { - content: "\f06e"; } - -.icon-eye-slash:before { - content: "\f070"; } - -.icon-warning:before, -.icon-exclamation-triangle:before { - content: "\f071"; } - -.icon-plane:before { - content: "\f072"; } - -.icon-calendar:before { - content: "\f073"; } - -.icon-random:before { - content: "\f074"; } - -.icon-comment:before { - content: "\f075"; } - -.icon-magnet:before { - content: "\f076"; } - -.icon-chevron-up:before { - content: "\f077"; } - -.icon-chevron-down:before { - content: "\f078"; } - -.icon-retweet:before { - content: "\f079"; } - -.icon-shopping-cart:before { - content: "\f07a"; } - -.icon-folder:before { - content: "\f07b"; } - -.icon-folder-open:before { - content: "\f07c"; } - -.icon-arrows-v:before { - content: "\f07d"; } - -.icon-arrows-h:before { - content: "\f07e"; } - -.icon-bar-chart-o:before, -.icon-bar-chart:before { - content: "\f080"; } - -.icon-twitter-square:before { - content: "\f081"; } - -.icon-facebook-square:before { - content: "\f082"; } - -.icon-camera-retro:before { - content: "\f083"; } - -.icon-key:before { - content: "\f084"; } - -.icon-gears:before, -.icon-cogs:before { - content: "\f085"; } - -.icon-comments:before { - content: "\f086"; } - -.icon-thumbs-o-up:before { - content: "\f087"; } - -.icon-thumbs-o-down:before { - content: "\f088"; } - -.icon-star-half:before { - content: "\f089"; } - -.icon-heart-o:before { - content: "\f08a"; } - -.icon-sign-out:before { - content: "\f08b"; } - -.icon-linkedin-square:before { - content: "\f08c"; } - -.icon-thumb-tack:before { - content: "\f08d"; } - -.icon-external-link:before { - content: "\f08e"; } - -.icon-sign-in:before { - content: "\f090"; } - -.icon-trophy:before { - content: "\f091"; } - -.icon-github-square:before { - content: "\f092"; } - -.icon-upload:before { - content: "\f093"; } - -.icon-lemon-o:before { - content: "\f094"; } - -.icon-phone:before { - content: "\f095"; } - -.icon-square-o:before { - content: "\f096"; } - -.icon-bookmark-o:before { - content: "\f097"; } - -.icon-phone-square:before { - content: "\f098"; } - -.icon-twitter:before { - content: "\f099"; } - -.icon-facebook-f:before, -.icon-facebook:before { - content: "\f09a"; } - -.icon-github:before { - content: "\f09b"; } - -.icon-unlock:before { - content: "\f09c"; } - -.icon-credit-card:before { - content: "\f09d"; } - -.icon-rss:before { - content: "\f09e"; } - -.icon-hdd-o:before { - content: "\f0a0"; } - -.icon-bullhorn:before { - content: "\f0a1"; } - -.icon-bell:before { - content: "\f0f3"; } - -.icon-certificate:before { - content: "\f0a3"; } - -.icon-hand-o-right:before { - content: "\f0a4"; } - -.icon-hand-o-left:before { - content: "\f0a5"; } - -.icon-hand-o-up:before { - content: "\f0a6"; } - -.icon-hand-o-down:before { - content: "\f0a7"; } - -.icon-arrow-circle-left:before { - content: "\f0a8"; } - -.icon-arrow-circle-right:before { - content: "\f0a9"; } - -.icon-arrow-circle-up:before { - content: "\f0aa"; } - -.icon-arrow-circle-down:before { - content: "\f0ab"; } - -.icon-globe:before { - content: "\f0ac"; } - -.icon-wrench:before { - content: "\f0ad"; } - -.icon-tasks:before { - content: "\f0ae"; } - -.icon-filter:before { - content: "\f0b0"; } - -.icon-briefcase:before { - content: "\f0b1"; } - -.icon-arrows-alt:before { - content: "\f0b2"; } - -.icon-group:before, -.icon-users:before { - content: "\f0c0"; } - -.icon-chain:before, -.icon-link:before { - content: "\f0c1"; } - -.icon-cloud:before { - content: "\f0c2"; } - -.icon-flask:before { - content: "\f0c3"; } - -.icon-cut:before, -.icon-scissors:before { - content: "\f0c4"; } - -.icon-copy:before, -.icon-files-o:before { - content: "\f0c5"; } - -.icon-paperclip:before { - content: "\f0c6"; } - -.icon-save:before, -.icon-floppy-o:before { - content: "\f0c7"; } - -.icon-square:before { - content: "\f0c8"; } - -.icon-navicon:before, -.icon-reorder:before, -.icon-bars:before { - content: "\f0c9"; } - -.icon-list-ul:before { - content: "\f0ca"; } - -.icon-list-ol:before { - content: "\f0cb"; } - -.icon-strikethrough:before { - content: "\f0cc"; } - -.icon-underline:before { - content: "\f0cd"; } - -.icon-table:before { - content: "\f0ce"; } - -.icon-magic:before { - content: "\f0d0"; } - -.icon-truck:before { - content: "\f0d1"; } - -.icon-pinterest:before { - content: "\f0d2"; } - -.icon-pinterest-square:before { - content: "\f0d3"; } - -.icon-google-plus-square:before { - content: "\f0d4"; } - -.icon-google-plus:before { - content: "\f0d5"; } - -.icon-money:before { - content: "\f0d6"; } - -.icon-caret-down:before { - content: "\f0d7"; } - -.icon-caret-up:before { - content: "\f0d8"; } - -.icon-caret-left:before { - content: "\f0d9"; } - -.icon-caret-right:before { - content: "\f0da"; } - -.icon-columns:before { - content: "\f0db"; } - -.icon-unsorted:before, -.icon-sort:before { - content: "\f0dc"; } - -.icon-sort-down:before, -.icon-sort-desc:before { - content: "\f0dd"; } - -.icon-sort-up:before, -.icon-sort-asc:before { - content: "\f0de"; } - -.icon-envelope:before { - content: "\f0e0"; } - -.icon-linkedin:before { - content: "\f0e1"; } - -.icon-rotate-left:before, -.icon-undo:before { - content: "\f0e2"; } - -.icon-legal:before, -.icon-gavel:before { - content: "\f0e3"; } - -.icon-dashboard:before, -.icon-tachometer:before { - content: "\f0e4"; } - -.icon-comment-o:before { - content: "\f0e5"; } - -.icon-comments-o:before { - content: "\f0e6"; } - -.icon-flash:before, -.icon-bolt:before { - content: "\f0e7"; } - -.icon-sitemap:before { - content: "\f0e8"; } - -.icon-umbrella:before { - content: "\f0e9"; } - -.icon-paste:before, -.icon-clipboard:before { - content: "\f0ea"; } - -.icon-lightbulb-o:before { - content: "\f0eb"; } - -.icon-exchange:before { - content: "\f0ec"; } - -.icon-cloud-download:before { - content: "\f0ed"; } - -.icon-cloud-upload:before { - content: "\f0ee"; } - -.icon-user-md:before { - content: "\f0f0"; } - -.icon-stethoscope:before { - content: "\f0f1"; } - -.icon-suitcase:before { - content: "\f0f2"; } - -.icon-bell-o:before { - content: "\f0a2"; } - -.icon-coffee:before { - content: "\f0f4"; } - -.icon-cutlery:before { - content: "\f0f5"; } - -.icon-file-text-o:before { - content: "\f0f6"; } - -.icon-building-o:before { - content: "\f0f7"; } - -.icon-hospital-o:before { - content: "\f0f8"; } - -.icon-ambulance:before { - content: "\f0f9"; } - -.icon-medkit:before { - content: "\f0fa"; } - -.icon-fighter-jet:before { - content: "\f0fb"; } - -.icon-beer:before { - content: "\f0fc"; } - -.icon-h-square:before { - content: "\f0fd"; } - -.icon-plus-square:before { - content: "\f0fe"; } - -.icon-angle-double-left:before { - content: "\f100"; } - -.icon-angle-double-right:before { - content: "\f101"; } - -.icon-angle-double-up:before { - content: "\f102"; } - -.icon-angle-double-down:before { - content: "\f103"; } - -.icon-angle-left:before { - content: "\f104"; } - -.icon-angle-right:before { - content: "\f105"; } - -.icon-angle-up:before { - content: "\f106"; } - -.icon-angle-down:before { - content: "\f107"; } - -.icon-desktop:before { - content: "\f108"; } - -.icon-laptop:before { - content: "\f109"; } - -.icon-tablet:before { - content: "\f10a"; } - -.icon-mobile-phone:before, -.icon-mobile:before { - content: "\f10b"; } - -.icon-circle-o:before { - content: "\f10c"; } - -.icon-quote-left:before { - content: "\f10d"; } - -.icon-quote-right:before { - content: "\f10e"; } - -.icon-spinner:before { - content: "\f110"; } - -.icon-circle:before { - content: "\f111"; } - -.icon-mail-reply:before, -.icon-reply:before { - content: "\f112"; } - -.icon-github-alt:before { - content: "\f113"; } - -.icon-folder-o:before { - content: "\f114"; } - -.icon-folder-open-o:before { - content: "\f115"; } - -.icon-smile-o:before { - content: "\f118"; } - -.icon-frown-o:before { - content: "\f119"; } - -.icon-meh-o:before { - content: "\f11a"; } - -.icon-gamepad:before { - content: "\f11b"; } - -.icon-keyboard-o:before { - content: "\f11c"; } - -.icon-flag-o:before { - content: "\f11d"; } - -.icon-flag-checkered:before { - content: "\f11e"; } - -.icon-terminal:before { - content: "\f120"; } - -.icon-code:before { - content: "\f121"; } - -.icon-mail-reply-all:before, -.icon-reply-all:before { - content: "\f122"; } - -.icon-star-half-empty:before, -.icon-star-half-full:before, -.icon-star-half-o:before { - content: "\f123"; } - -.icon-location-arrow:before { - content: "\f124"; } - -.icon-crop:before { - content: "\f125"; } - -.icon-code-fork:before { - content: "\f126"; } - -.icon-unlink:before, -.icon-chain-broken:before { - content: "\f127"; } - -.icon-question:before { - content: "\f128"; } - -.icon-info:before { - content: "\f129"; } - -.icon-exclamation:before { - content: "\f12a"; } - -.icon-superscript:before { - content: "\f12b"; } - -.icon-subscript:before { - content: "\f12c"; } - -.icon-eraser:before { - content: "\f12d"; } - -.icon-puzzle-piece:before { - content: "\f12e"; } - -.icon-microphone:before { - content: "\f130"; } - -.icon-microphone-slash:before { - content: "\f131"; } - -.icon-shield:before { - content: "\f132"; } - -.icon-calendar-o:before { - content: "\f133"; } - -.icon-fire-extinguisher:before { - content: "\f134"; } - -.icon-rocket:before { - content: "\f135"; } - -.icon-maxcdn:before { - content: "\f136"; } - -.icon-chevron-circle-left:before { - content: "\f137"; } - -.icon-chevron-circle-right:before { - content: "\f138"; } - -.icon-chevron-circle-up:before { - content: "\f139"; } - -.icon-chevron-circle-down:before { - content: "\f13a"; } - -.icon-html5:before { - content: "\f13b"; } - -.icon-css3:before { - content: "\f13c"; } - -.icon-anchor:before { - content: "\f13d"; } - -.icon-unlock-alt:before { - content: "\f13e"; } - -.icon-bullseye:before { - content: "\f140"; } - -.icon-ellipsis-h:before { - content: "\f141"; } - -.icon-ellipsis-v:before { - content: "\f142"; } - -.icon-rss-square:before { - content: "\f143"; } - -.icon-play-circle:before { - content: "\f144"; } - -.icon-ticket:before { - content: "\f145"; } - -.icon-minus-square:before { - content: "\f146"; } - -.icon-minus-square-o:before { - content: "\f147"; } - -.icon-level-up:before { - content: "\f148"; } - -.icon-level-down:before { - content: "\f149"; } - -.icon-check-square:before { - content: "\f14a"; } - -.icon-pencil-square:before { - content: "\f14b"; } - -.icon-external-link-square:before { - content: "\f14c"; } - -.icon-share-square:before { - content: "\f14d"; } - -.icon-compass:before { - content: "\f14e"; } - -.icon-toggle-down:before, -.icon-caret-square-o-down:before { - content: "\f150"; } - -.icon-toggle-up:before, -.icon-caret-square-o-up:before { - content: "\f151"; } - -.icon-toggle-right:before, -.icon-caret-square-o-right:before { - content: "\f152"; } - -.icon-euro:before, -.icon-eur:before { - content: "\f153"; } - -.icon-gbp:before { - content: "\f154"; } - -.icon-dollar:before, -.icon-usd:before { - content: "\f155"; } - -.icon-rupee:before, -.icon-inr:before { - content: "\f156"; } - -.icon-cny:before, -.icon-rmb:before, -.icon-yen:before, -.icon-jpy:before { - content: "\f157"; } - -.icon-ruble:before, -.icon-rouble:before, -.icon-rub:before { - content: "\f158"; } - -.icon-won:before, -.icon-krw:before { - content: "\f159"; } - -.icon-bitcoin:before, -.icon-btc:before { - content: "\f15a"; } - -.icon-file:before { - content: "\f15b"; } - -.icon-file-text:before { - content: "\f15c"; } - -.icon-sort-alpha-asc:before { - content: "\f15d"; } - -.icon-sort-alpha-desc:before { - content: "\f15e"; } - -.icon-sort-amount-asc:before { - content: "\f160"; } - -.icon-sort-amount-desc:before { - content: "\f161"; } - -.icon-sort-numeric-asc:before { - content: "\f162"; } - -.icon-sort-numeric-desc:before { - content: "\f163"; } - -.icon-thumbs-up:before { - content: "\f164"; } - -.icon-thumbs-down:before { - content: "\f165"; } - -.icon-youtube-square:before { - content: "\f166"; } - -.icon-youtube:before { - content: "\f167"; } - -.icon-xing:before { - content: "\f168"; } - -.icon-xing-square:before { - content: "\f169"; } - -.icon-youtube-play:before { - content: "\f16a"; } - -.icon-dropbox:before { - content: "\f16b"; } - -.icon-stack-overflow:before { - content: "\f16c"; } - -.icon-instagram:before { - content: "\f16d"; } - -.icon-flickr:before { - content: "\f16e"; } - -.icon-adn:before { - content: "\f170"; } - -.icon-bitbucket:before { - content: "\f171"; } - -.icon-bitbucket-square:before { - content: "\f172"; } - -.icon-tumblr:before { - content: "\f173"; } - -.icon-tumblr-square:before { - content: "\f174"; } - -.icon-long-arrow-down:before { - content: "\f175"; } - -.icon-long-arrow-up:before { - content: "\f176"; } - -.icon-long-arrow-left:before { - content: "\f177"; } - -.icon-long-arrow-right:before { - content: "\f178"; } - -.icon-apple:before { - content: "\f179"; } - -.icon-windows:before { - content: "\f17a"; } - -.icon-android:before { - content: "\f17b"; } - -.icon-linux:before { - content: "\f17c"; } - -.icon-dribbble:before { - content: "\f17d"; } - -.icon-skype:before { - content: "\f17e"; } - -.icon-foursquare:before { - content: "\f180"; } - -.icon-trello:before { - content: "\f181"; } - -.icon-female:before { - content: "\f182"; } - -.icon-male:before { - content: "\f183"; } - -.icon-gittip:before, -.icon-gratipay:before { - content: "\f184"; } - -.icon-sun-o:before { - content: "\f185"; } - -.icon-moon-o:before { - content: "\f186"; } - -.icon-archive:before { - content: "\f187"; } - -.icon-bug:before { - content: "\f188"; } - -.icon-vk:before { - content: "\f189"; } - -.icon-weibo:before { - content: "\f18a"; } - -.icon-renren:before { - content: "\f18b"; } - -.icon-pagelines:before { - content: "\f18c"; } - -.icon-stack-exchange:before { - content: "\f18d"; } - -.icon-arrow-circle-o-right:before { - content: "\f18e"; } - -.icon-arrow-circle-o-left:before { - content: "\f190"; } - -.icon-toggle-left:before, -.icon-caret-square-o-left:before { - content: "\f191"; } - -.icon-dot-circle-o:before { - content: "\f192"; } - -.icon-wheelchair:before { - content: "\f193"; } - -.icon-vimeo-square:before { - content: "\f194"; } - -.icon-turkish-lira:before, -.icon-try:before { - content: "\f195"; } - -.icon-plus-square-o:before { - content: "\f196"; } - -.icon-space-shuttle:before { - content: "\f197"; } - -.icon-slack:before { - content: "\f198"; } - -.icon-envelope-square:before { - content: "\f199"; } - -.icon-wordpress:before { - content: "\f19a"; } - -.icon-openid:before { - content: "\f19b"; } - -.icon-institution:before, -.icon-bank:before, -.icon-university:before { - content: "\f19c"; } - -.icon-mortar-board:before, -.icon-graduation-cap:before { - content: "\f19d"; } - -.icon-yahoo:before { - content: "\f19e"; } - -.icon-google:before { - content: "\f1a0"; } - -.icon-reddit:before { - content: "\f1a1"; } - -.icon-reddit-square:before { - content: "\f1a2"; } - -.icon-stumbleupon-circle:before { - content: "\f1a3"; } - -.icon-stumbleupon:before { - content: "\f1a4"; } - -.icon-delicious:before { - content: "\f1a5"; } - -.icon-digg:before { - content: "\f1a6"; } - -.icon-pied-piper:before { - content: "\f1a7"; } - -.icon-pied-piper-alt:before { - content: "\f1a8"; } - -.icon-drupal:before { - content: "\f1a9"; } - -.icon-joomla:before { - content: "\f1aa"; } - -.icon-language:before { - content: "\f1ab"; } - -.icon-fax:before { - content: "\f1ac"; } - -.icon-building:before { - content: "\f1ad"; } - -.icon-child:before { - content: "\f1ae"; } - -.icon-paw:before { - content: "\f1b0"; } - -.icon-spoon:before { - content: "\f1b1"; } - -.icon-cube:before { - content: "\f1b2"; } - -.icon-cubes:before { - content: "\f1b3"; } - -.icon-behance:before { - content: "\f1b4"; } - -.icon-behance-square:before { - content: "\f1b5"; } - -.icon-steam:before { - content: "\f1b6"; } - -.icon-steam-square:before { - content: "\f1b7"; } - -.icon-recycle:before { - content: "\f1b8"; } - -.icon-automobile:before, -.icon-car:before { - content: "\f1b9"; } - -.icon-cab:before, -.icon-taxi:before { - content: "\f1ba"; } - -.icon-tree:before { - content: "\f1bb"; } - -.icon-spotify:before { - content: "\f1bc"; } - -.icon-deviantart:before { - content: "\f1bd"; } - -.icon-soundcloud:before { - content: "\f1be"; } - -.icon-database:before { - content: "\f1c0"; } - -.icon-file-pdf-o:before { - content: "\f1c1"; } - -.icon-file-word-o:before { - content: "\f1c2"; } - -.icon-file-excel-o:before { - content: "\f1c3"; } - -.icon-file-powerpoint-o:before { - content: "\f1c4"; } - -.icon-file-photo-o:before, -.icon-file-picture-o:before, -.icon-file-image-o:before { - content: "\f1c5"; } - -.icon-file-zip-o:before, -.icon-file-archive-o:before { - content: "\f1c6"; } - -.icon-file-sound-o:before, -.icon-file-audio-o:before { - content: "\f1c7"; } - -.icon-file-movie-o:before, -.icon-file-video-o:before { - content: "\f1c8"; } - -.icon-file-code-o:before { - content: "\f1c9"; } - -.icon-vine:before { - content: "\f1ca"; } - -.icon-codepen:before { - content: "\f1cb"; } - -.icon-jsfiddle:before { - content: "\f1cc"; } - -.icon-life-bouy:before, -.icon-life-buoy:before, -.icon-life-saver:before, -.icon-support:before, -.icon-life-ring:before { - content: "\f1cd"; } - -.icon-circle-o-notch:before { - content: "\f1ce"; } - -.icon-ra:before, -.icon-rebel:before { - content: "\f1d0"; } - -.icon-ge:before, -.icon-empire:before { - content: "\f1d1"; } - -.icon-git-square:before { - content: "\f1d2"; } - -.icon-git:before { - content: "\f1d3"; } - -.icon-hacker-news:before { - content: "\f1d4"; } - -.icon-tencent-weibo:before { - content: "\f1d5"; } - -.icon-qq:before { - content: "\f1d6"; } - -.icon-wechat:before, -.icon-weixin:before { - content: "\f1d7"; } - -.icon-send:before, -.icon-paper-plane:before { - content: "\f1d8"; } - -.icon-send-o:before, -.icon-paper-plane-o:before { - content: "\f1d9"; } - -.icon-history:before { - content: "\f1da"; } - -.icon-genderless:before, -.icon-circle-thin:before { - content: "\f1db"; } - -.icon-header:before { - content: "\f1dc"; } - -.icon-paragraph:before { - content: "\f1dd"; } - -.icon-sliders:before { - content: "\f1de"; } - -.icon-share-alt:before { - content: "\f1e0"; } - -.icon-share-alt-square:before { - content: "\f1e1"; } - -.icon-bomb:before { - content: "\f1e2"; } - -.icon-soccer-ball-o:before, -.icon-futbol-o:before { - content: "\f1e3"; } - -.icon-tty:before { - content: "\f1e4"; } - -.icon-binoculars:before { - content: "\f1e5"; } - -.icon-plug:before { - content: "\f1e6"; } - -.icon-slideshare:before { - content: "\f1e7"; } - -.icon-twitch:before { - content: "\f1e8"; } - -.icon-yelp:before { - content: "\f1e9"; } - -.icon-newspaper-o:before { - content: "\f1ea"; } - -.icon-wifi:before { - content: "\f1eb"; } - -.icon-calculator:before { - content: "\f1ec"; } - -.icon-paypal:before { - content: "\f1ed"; } - -.icon-google-wallet:before { - content: "\f1ee"; } - -.icon-cc-visa:before { - content: "\f1f0"; } - -.icon-cc-mastercard:before { - content: "\f1f1"; } - -.icon-cc-discover:before { - content: "\f1f2"; } - -.icon-cc-amex:before { - content: "\f1f3"; } - -.icon-cc-paypal:before { - content: "\f1f4"; } - -.icon-cc-stripe:before { - content: "\f1f5"; } - -.icon-bell-slash:before { - content: "\f1f6"; } - -.icon-bell-slash-o:before { - content: "\f1f7"; } - -.icon-trash:before { - content: "\f1f8"; } - -.icon-copyright:before { - content: "\f1f9"; } - -.icon-at:before { - content: "\f1fa"; } - -.icon-eyedropper:before { - content: "\f1fb"; } - -.icon-paint-brush:before { - content: "\f1fc"; } - -.icon-birthday-cake:before { - content: "\f1fd"; } - -.icon-area-chart:before { - content: "\f1fe"; } - -.icon-pie-chart:before { - content: "\f200"; } - -.icon-line-chart:before { - content: "\f201"; } - -.icon-lastfm:before { - content: "\f202"; } - -.icon-lastfm-square:before { - content: "\f203"; } - -.icon-toggle-off:before { - content: "\f204"; } - -.icon-toggle-on:before { - content: "\f205"; } - -.icon-bicycle:before { - content: "\f206"; } - -.icon-bus:before { - content: "\f207"; } - -.icon-ioxhost:before { - content: "\f208"; } - -.icon-angellist:before { - content: "\f209"; } - -.icon-cc:before { - content: "\f20a"; } - -.icon-shekel:before, -.icon-sheqel:before, -.icon-ils:before { - content: "\f20b"; } - -.icon-meanpath:before { - content: "\f20c"; } - -.icon-buysellads:before { - content: "\f20d"; } - -.icon-connectdevelop:before { - content: "\f20e"; } - -.icon-dashcube:before { - content: "\f210"; } - -.icon-forumbee:before { - content: "\f211"; } - -.icon-leanpub:before { - content: "\f212"; } - -.icon-sellsy:before { - content: "\f213"; } - -.icon-shirtsinbulk:before { - content: "\f214"; } - -.icon-simplybuilt:before { - content: "\f215"; } - -.icon-skyatlas:before { - content: "\f216"; } - -.icon-cart-plus:before { - content: "\f217"; } - -.icon-cart-arrow-down:before { - content: "\f218"; } - -.icon-diamond:before { - content: "\f219"; } - -.icon-ship:before { - content: "\f21a"; } - -.icon-user-secret:before { - content: "\f21b"; } - -.icon-motorcycle:before { - content: "\f21c"; } - -.icon-street-view:before { - content: "\f21d"; } - -.icon-heartbeat:before { - content: "\f21e"; } - -.icon-venus:before { - content: "\f221"; } - -.icon-mars:before { - content: "\f222"; } - -.icon-mercury:before { - content: "\f223"; } - -.icon-transgender:before { - content: "\f224"; } - -.icon-transgender-alt:before { - content: "\f225"; } - -.icon-venus-double:before { - content: "\f226"; } - -.icon-mars-double:before { - content: "\f227"; } - -.icon-venus-mars:before { - content: "\f228"; } - -.icon-mars-stroke:before { - content: "\f229"; } - -.icon-mars-stroke-v:before { - content: "\f22a"; } - -.icon-mars-stroke-h:before { - content: "\f22b"; } - -.icon-neuter:before { - content: "\f22c"; } - -.icon-facebook-official:before { - content: "\f230"; } - -.icon-pinterest-p:before { - content: "\f231"; } - -.icon-whatsapp:before { - content: "\f232"; } - -.icon-server:before { - content: "\f233"; } - -.icon-user-plus:before { - content: "\f234"; } - -.icon-user-times:before { - content: "\f235"; } - -.icon-hotel:before, -.icon-bed:before { - content: "\f236"; } - -.icon-viacoin:before { - content: "\f237"; } - -.icon-train:before { - content: "\f238"; } - -.icon-subway:before { - content: "\f239"; } - -.icon-medium:before { - content: "\f23a"; } - -html { - height: 100%; - font-size: 16px; } - -body { - font-family: 'Source Sans Pro', sans-serif; - line-height: 1.3333; } - -#window { - min-height: 100vh; - background: #f5f5f5; } - -.badge { - background: #216C2A; - display: inline-block; - padding: 2px; - color: white; - border-radius: 2px; } - -.credit-amount--indicator { - font-weight: bold; - color: #216C2A; } - -#main-content { - padding: 24px; - margin-top: 60px; - display: flex; - flex-direction: column; } - #main-content main { - margin-left: auto; - margin-right: auto; - max-width: 100%; } - #main-content main.main--single-column { - width: 800px; } - -main.main--refreshing:before { - position: absolute; - background: url("../img/busy.gif") no-repeat center center; - width: 30px; - height: 24px; - content: ""; - left: 50%; - margin-left: -15px; - display: inline-block; } - -.icon-fixed-width { - /* This borrowed is from a component of Font Awesome we're not using, maybe add it? */ - width: 1.28571em; - text-align: center; } - -h2 { - font-size: 1.75em; } - -h3 { - font-size: 1.4em; } - -h4 { - font-size: 1.2em; } - -h5 { - font-size: 1.1em; } - -sup, sub { - vertical-align: baseline; - position: relative; } - -sup { - top: -0.4em; } - -sub { - top: 0.4em; } - -code { - font: 0.8em Consolas, 'Lucida Console', 'Source Sans', monospace; - background-color: #eee; } - -p { - margin-bottom: 0.8em; } - p:last-child { - margin-bottom: 0; } - -.hidden { - display: none; } - -.disabled { - pointer-events: none; - opacity: 0.7; } - -.truncated-text { - display: -webkit-box; - overflow: hidden; - -webkit-box-orient: vertical; } - -.busy-indicator { - background: url("../img/busy.gif") no-repeat center center; - display: inline-block; - margin: -1em 0; - min-width: 16px; - min-height: 8px; - vertical-align: middle; - padding: 0 30px; } - .busy-indicator:last-child { - padding-right: 2px; } - .busy-indicator:first-child { - padding-left: 2px; } - -/*should this be here or work this way? had to hack additional rule below*/ -.icon:only-child { - position: relative; - top: 0.16em; } - -.icon-featured > .icon { - top: 0; } - -.help { - font-size: .85em; - color: rgba(0, 0, 0, 0.6); } - -.meta { - font-size: 0.9em; - color: #505050; } - -.empty { - color: #505050; - font-style: italic; } - -/*should be redone/moved*/ -.file-list__header .busy-indicator { - float: left; - margin-top: 12px; } - -.sort-section { - display: block; - margin-bottom: 16px; - text-align: right; - line-height: 1; - font-size: 0.85em; - color: rgba(0, 0, 0, 0.6); } - -section.section-spaced { - margin-bottom: 24px; } - -.text-center { - text-align: center; } - -table.table-standard { - word-wrap: break-word; - max-width: 100%; } - table.table-standard th, table.table-standard td { - padding: 12px 8px; } - table.table-standard th { - font-weight: bold; - font-size: 0.9em; } - table.table-standard td { - vertical-align: top; } - table.table-standard thead th, table.table-standard > tr:first-child th { - vertical-align: bottom; - font-weight: bold; - font-size: 0.9em; - padding: 7px 8px 4px; - text-align: left; - border-bottom: 1px solid #e2e2e2; } - table.table-standard thead th img, table.table-standard > tr:first-child th img { - vertical-align: text-bottom; } - table.table-standard tr.thead:not(:first-child) th { - border-top: 1px solid #e2e2e2; } - table.table-standard tfoot td { - padding: 12px 8px; - font-size: .85em; } - table.table-standard tbody tr:nth-child(even):not(.odd) { - background-color: #f4f4f4; } - table.table-standard tbody tr:nth-child(odd):not(.even) { - background-color: white; } - table.table-standard tbody tr.thead { - background: none; } - table.table-standard tbody tr td { - border: 0 none; } - -table.table-stretch { - width: 100%; } - -.button-set-item { - position: relative; - display: inline-block; } - .button-set-item + .button-set-item { - margin-left: 12px; } - -.button-block, .faux-button-block { - display: inline-block; - height: 36px; - line-height: 36px; - text-decoration: none; - border: 0 none; - text-align: center; - border-radius: 2px; - text-transform: uppercase; } - .button-block .icon, .faux-button-block .icon { - top: 0em; } - .button-block .icon:first-child, .faux-button-block .icon:first-child { - padding-right: 5px; } - .button-block .icon:last-child, .faux-button-block .icon:last-child { - padding-left: 5px; } - .button-block .icon:only-child, .faux-button-block .icon:only-child { - padding-left: 0; - padding-right: 0; } - -.button-block { - cursor: pointer; } - -.button__content { - margin: 0 12px; } - -.button-primary { - color: #f0f0f0; - background-color: #155B4A; - box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12); } - .button-primary:focus { - color: white; - background-color: #125041; } - -.button-alt { - background-color: #D9D9D9; - box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12); } - -.button-text { - color: #155B4A; - cursor: pointer; - display: inline-block; } - .button-text .icon:first-child { - padding-right: 5px; } - .button-text .icon:last-child:not(:only-child) { - padding-left: 5px; } - .button-text:not(.no-underline) { - text-decoration: underline; } - .button-text:not(.no-underline) .icon { - text-decoration: none; } - .button-text:hover { - opacity: 0.7; - transition: opacity 0.225s ease; - text-decoration: underline; } - .button-text:hover .icon { - text-decoration: none; } - .button-text .button__content { - margin: 0 4px; } - -.button-text-help { - color: #aaa; - cursor: pointer; - font-size: 0.8em; } - .button-text-help .icon:first-child { - padding-right: 5px; } - .button-text-help .icon:last-child:not(:only-child) { - padding-left: 5px; } - .button-text-help:not(.no-underline) { - text-decoration: underline; } - .button-text-help:not(.no-underline) .icon { - text-decoration: none; } - .button-text-help:hover { - opacity: 0.7; - transition: opacity 0.225s ease; - text-decoration: underline; } - .button-text-help:hover .icon { - text-decoration: none; } - -.button--flat { - box-shadow: none !important; } - -.card { - margin-left: auto; - margin-right: auto; - max-width: 800px; - background: #ffffff; - box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12); - border-radius: 2px; - margin-bottom: 16px; - overflow: auto; } - -.card--obscured { - position: relative; } - -.card--obscured .card__inner { - filter: blur(20px); } - -.card__title-primary, -.card__title-identity, -.card__actions, -.card__content, -.card__subtext { - padding: 0 16px; } - -.card--small .card__title-primary, -.card--small .card__title-identity, -.card--small .card__actions, -.card--small .card__content, -.card--small .card__subtext { - padding: 0 8px; } - -.card__title-primary { - margin-top: 16px; } - -.card__title-identity { - margin-top: 8px; - margin-bottom: 8px; } - -.card__actions { - margin-top: 16px; } - -.card__actions--bottom { - margin-top: 8px; - margin-bottom: 8px; } - -.card__actions--form-submit { - margin-top: 24px; - margin-bottom: 16px; } - -.card__content { - margin-top: 16px; - margin-bottom: 16px; } - -.card__subtext { - color: #505050; - font-size: 0.82em; - margin-top: 8px; - margin-bottom: 8px; } - -.card__subtext--allow-newlines { - white-space: pre-wrap; } - -.card__subtext--two-lines { - height: 34.98579px; - /*this is so one line text still has the proper height*/ } - -.card-overlay { - position: absolute; - left: 0px; - right: 0px; - top: 0px; - bottom: 0px; - padding: 20px; - background-color: rgba(128, 128, 128, 0.8); - color: #fff; - display: flex; - align-items: center; - font-weight: 600; } - -.card__link { - display: block; } - -.card--link { - transition: transform 120ms ease-in-out; } - -.card--link:hover { - position: relative; - z-index: 1; - box-shadow: 2px 4px 4px 0 rgba(0, 0, 0, 0.14), 2px 5px 3px -2px rgba(0, 0, 0, 0.2), 2px 3px 7px 0 rgba(0, 0, 0, 0.12); - transform: scale(1.1) translateX(10px); - transform-origin: 50% 50%; - overflow-x: visible; - overflow-y: visible; } - -.card--link:hover ~ .card--link { - transform: translateX(20px); } - -.card__media { - background-size: cover; - background-repeat: no-repeat; - background-position: 50% 50%; } - -.card__media--autothumb { - position: relative; } - -.card__media--autothumb.purple { - background-color: #9c27b0; } - -.card__media--autothumb.red { - background-color: #e53935; } - -.card__media--autothumb.pink { - background-color: #e91e63; } - -.card__media--autothumb.indigo { - background-color: #3f51b5; } - -.card__media--autothumb.blue { - background-color: #2196f3; } - -.card__media--autothumb.light-blue { - background-color: #039be5; } - -.card__media--autothumb.cyan { - background-color: #00acc1; } - -.card__media--autothumb.teal { - background-color: #009688; } - -.card__media--autothumb.green { - background-color: #43a047; } - -.card__media--autothumb.yellow { - background-color: #ffeb3b; } - -.card__media--autothumb.orange { - background-color: #ffa726; } - -.card__media--autothumb .card__autothumb__text { - font-size: 2.0em; - width: 100%; - color: #ffffff; - text-align: center; - position: absolute; - top: 36%; } - -.card--small { - width: 240px; - overflow-x: hidden; - white-space: normal; } - -.card--small .card__media { - height: 135px; } - -.card--form { - width: 362px; } - -.card__subtitle { - color: rgba(0, 0, 0, 0.6); - font-size: 0.85em; - line-height: 1.56859; } - -.card-series-submit { - margin-left: auto; - margin-right: auto; - max-width: 800px; - padding: 12px; } - -.card-row + .card-row { - margin-top: 8px; } - -.card-row__items { - width: 100%; - overflow: hidden; - /*hacky way to give space for hover */ - padding-top: 20px; - margin-top: -20px; - padding-right: 30px; - margin-right: -30px; } - .card-row__items > .card { - vertical-align: top; - display: inline-block; } - .card-row__items > .card + .card { - margin-left: 8px; } - -.card-row--small { - overflow: hidden; - white-space: nowrap; - /*hacky way to give space for hover */ - padding-right: 30px; } - -.card-row__header { - margin-bottom: 8px; } - -.card-row__scrollhouse { - position: relative; } - -.card-row__nav { - position: absolute; - padding: 0 16px; - height: 100%; - top: 4px; } - -.card-row__nav .card-row__scroll-button { - background: #ffffff; - color: rgba(0, 0, 0, 0.6); - box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12); - padding: 24px 12px; - position: absolute; - cursor: pointer; - left: 0; - top: 36%; - z-index: 2; - opacity: 0.8; - transition: transform 60ms ease-in-out; } - .card-row__nav .card-row__scroll-button:hover { - opacity: 1.0; - transform: scale(1.21); } - -.card-row__nav--left { - left: 0; } - -.card-row__nav--right { - right: -30px; } - -.card__icon-featured-content { - color: orangered; } - -.file-actions { - line-height: 36px; - min-height: 36px; } - -.file-actions__download-status-bar .button__content, .file-actions__download-status-bar-overlay .button__content { - margin: 0 4px; } - -.file-actions__download-status-bar { - position: relative; - color: #444; } - -.file-actions__download-status-bar-overlay { - background: #444; - color: white; - position: absolute; - white-space: nowrap; - overflow: hidden; - z-index: 1; - top: 0px; - left: 0px; } - -.file-selector__choose-button { - font-size: 13px; } - -.file-selector__path { - font-size: 14px; } - -.file-tile__row { - overflow: hidden; - height: 144px; } - .file-tile__row .credit-amount { - float: right; } - .file-tile__row .icon-featured { - float: right; } - .file-tile__row .card__media { - height: 144px; - max-width: 144px; - width: 144px; - margin-right: 12px; - float: left; } - .file-tile__row .file-tile__content { - padding-top: 8px; - margin-left: 156px; } - .file-tile__row .card__title-primary { - margin-top: 0; } - -.form-row-submit { - margin-top: 24px; } - -.form-row-submit--with-footer { - margin-bottom: 24px; } - -.form-row__label-row { - margin-top: 20px; - margin-bottom: 4px; - line-height: 1; - font-size: 14.4px; } - -.form-row__label-row--prefix { - float: left; - margin-right: 5px; } - -input[type="text"].input-copyable { - border: 1px solid rgba(160, 160, 160, 0.5); - line-height: 1; - padding-top: 8px; - padding-bottom: 8px; - width: 330px; - padding-left: 5px; - padding-right: 5px; - width: 100%; } - input[type="text"].input-copyable:focus { - border-color: black; } - -.form-field { - display: inline-block; } - .form-field input[type="checkbox"], - .form-field input[type="radio"] { - cursor: pointer; } - .form-field select { - transition: outline 0.225s ease; - cursor: pointer; - box-sizing: border-box; - padding-left: 5px; - padding-right: 5px; - height: 24px; } - .form-field select:focus { - outline: 2px solid #155B4A; } - .form-field textarea, - .form-field input[type="text"], - .form-field input[type="password"], - .form-field input[type="email"], - .form-field input[type="number"], - .form-field input[type="search"], - .form-field input[type="date"] { - transition: all 0.225s ease; - cursor: pointer; - padding-left: 1px; - padding-right: 1px; - box-sizing: border-box; - -webkit-appearance: none; } - .form-field textarea::-webkit-input-placeholder, - .form-field input[type="text"]::-webkit-input-placeholder, - .form-field input[type="password"]::-webkit-input-placeholder, - .form-field input[type="email"]::-webkit-input-placeholder, - .form-field input[type="number"]::-webkit-input-placeholder, - .form-field input[type="search"]::-webkit-input-placeholder, - .form-field input[type="date"]::-webkit-input-placeholder { - color: #999999; } - .form-field textarea:-moz-placeholder, - .form-field input[type="text"]:-moz-placeholder, - .form-field input[type="password"]:-moz-placeholder, - .form-field input[type="email"]:-moz-placeholder, - .form-field input[type="number"]:-moz-placeholder, - .form-field input[type="search"]:-moz-placeholder, - .form-field input[type="date"]:-moz-placeholder { - color: #999999; } - .form-field textarea:-ms-input-placeholder, - .form-field input[type="text"]:-ms-input-placeholder, - .form-field input[type="password"]:-ms-input-placeholder, - .form-field input[type="email"]:-ms-input-placeholder, - .form-field input[type="number"]:-ms-input-placeholder, - .form-field input[type="search"]:-ms-input-placeholder, - .form-field input[type="date"]:-ms-input-placeholder { - color: #999999; } - .form-field textarea[readonly], - .form-field input[type="text"][readonly], - .form-field input[type="password"][readonly], - .form-field input[type="email"][readonly], - .form-field input[type="number"][readonly], - .form-field input[type="search"][readonly], - .form-field input[type="date"][readonly] { - background-color: #bbb; } - .form-field input[type="text"], - .form-field input[type="password"], - .form-field input[type="email"], - .form-field input[type="number"], - .form-field input[type="search"], - .form-field input[type="date"] { - border-bottom: 2px solid rgba(160, 160, 160, 0.5); - line-height: 1; - padding-top: 8px; - padding-bottom: 8px; } - .form-field input[type="text"].form-field__input--error, - .form-field input[type="password"].form-field__input--error, - .form-field input[type="email"].form-field__input--error, - .form-field input[type="number"].form-field__input--error, - .form-field input[type="search"].form-field__input--error, - .form-field input[type="date"].form-field__input--error { - border-color: #a94442; } - .form-field input[type="text"].form-field__input--inline, - .form-field input[type="password"].form-field__input--inline, - .form-field input[type="email"].form-field__input--inline, - .form-field input[type="number"].form-field__input--inline, - .form-field input[type="search"].form-field__input--inline, - .form-field input[type="date"].form-field__input--inline { - padding-top: 0; - padding-bottom: 0; - border-bottom-width: 1px; - margin-left: 8px; - margin-right: 8px; } - .form-field textarea:focus, - .form-field input[type="text"]:focus, - .form-field input[type="password"]:focus, - .form-field input[type="email"]:focus, - .form-field input[type="number"]:focus, - .form-field input[type="search"]:focus, - .form-field input[type="date"]:focus { - border-color: #155B4A; } - .form-field textarea { - padding: 2px; - border: 2px solid rgba(160, 160, 160, 0.5); } - -.form-field--SimpleMDE { - display: block; } - -.form-field__label[for] { - cursor: pointer; } - -.form-field__label > input[type="checkbox"], .form-field__label input[type="radio"] { - margin-right: 6px; } - -.form-field__label--error { - color: #a94442; } - -.form-field__input-text { - width: 330px; } - -.form-field__prefix { - margin-right: 4px; } - -.form-field__postfix { - margin-left: 4px; } - -.form-field__input-number { - width: 70px; - text-align: right; } - -.form-field--textarea { - width: 100%; } - -.form-field__input-textarea { - width: 100%; } - -.form-field__error, .form-field__helper { - margin-top: 8px; - font-size: 0.8em; - transition: opacity 0.225s ease; } - -.form-field__error { - color: #a94442; } - -.form-field__helper { - color: rgba(0, 0, 0, 0.6); } - -.form-field__input.form-field__input-SimpleMDE .CodeMirror-scroll { - height: auto; } - -#header { - color: #666; - background: #fff; - display: flex; - position: fixed; - box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12); - top: 0; - left: 0; - width: 100%; - z-index: 3; - padding: 12px; - box-sizing: border-box; } - -.header__item { - flex: 0 0 content; - padding-left: 6px; - padding-right: 6px; } - -.header__item--wunderbar { - flex-grow: 1; } - -.wunderbar { - position: relative; } - .wunderbar .icon { - position: absolute; - left: 10px; - top: 8px; } - -.wunderbar--active .icon-search { - color: #155B4A; } - -.wunderbar__input { - background: rgba(255, 255, 255, 0.7); - width: 100%; - color: #666; - height: 36px; - line-height: 36px; - padding-left: 38px; - padding-right: 5px; - border: 1px solid #000; - -webkit-border-radius: 2px; - -moz-border-radius: 2px; - -ms-border-radius: 2px; - border-radius: 2px; - border: 1px solid #ccc; } - .wunderbar__input:focus { - color: #333333; - box-shadow: 2px 4px 4px 0 rgba(0, 0, 0, 0.14), 2px 5px 3px -2px rgba(0, 0, 0, 0.2), 2px 3px 7px 0 rgba(0, 0, 0, 0.12); - border-color: #155B4A; } - -nav.sub-header { - text-transform: uppercase; - padding: 0 0 24px; - max-width: 800px; - margin-left: auto; - margin-right: auto; } - nav.sub-header > a { - display: inline-block; - margin: 0 15px; - padding: 0 5px; - line-height: 34px; - color: #666; } - nav.sub-header > a:first-child { - margin-left: 0; } - nav.sub-header > a:last-child { - margin-right: 0; } - nav.sub-header > a.sub-header-selected { - border-bottom: 2px solid #333333; - color: #333333; } - nav.sub-header > a:hover { - color: #333333; } - -.menu-container { - display: inline-block; } - -.menu { - position: absolute; - white-space: nowrap; - background-color: white; - box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12); - border-radius: 2px; - padding-top: 4.8px 0px; - z-index: 1; } - -.menu__menu-item { - display: block; - padding: 6px 12px; } - .menu__menu-item:hover { - background: #D9D9D9; } - -.tooltip { - position: relative; } - -.tooltip__link { - color: #155B4A; - cursor: pointer; } - .tooltip__link .icon:first-child { - padding-right: 5px; } - .tooltip__link .icon:last-child:not(:only-child) { - padding-left: 5px; } - .tooltip__link:not(.no-underline) { - text-decoration: underline; } - .tooltip__link:not(.no-underline) .icon { - text-decoration: none; } - .tooltip__link:hover { - opacity: 0.7; - transition: opacity 0.225s ease; - text-decoration: underline; } - .tooltip__link:hover .icon { - text-decoration: none; } - -.tooltip__body { - position: absolute; - z-index: 1; - left: 50%; - margin-left: -150px; - white-space: normal; - box-sizing: border-box; - padding: 12px; - width: 300px; - border: 1px solid #aaa; - color: #000; - background-color: #ffffff; - font-size: 14px; - line-height: 1.3333; - box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12); } - -.tooltip--header .tooltip__link { - color: #aaa; - cursor: pointer; - font-size: 12px; - margin-left: 12px; - vertical-align: middle; } - .tooltip--header .tooltip__link .icon:first-child { - padding-right: 5px; } - .tooltip--header .tooltip__link .icon:last-child:not(:only-child) { - padding-left: 5px; } - .tooltip--header .tooltip__link:not(.no-underline) { - text-decoration: underline; } - .tooltip--header .tooltip__link:not(.no-underline) .icon { - text-decoration: none; } - .tooltip--header .tooltip__link:hover { - opacity: 0.7; - transition: opacity 0.225s ease; - text-decoration: underline; } - .tooltip--header .tooltip__link:hover .icon { - text-decoration: none; } - -.load-screen { - color: white; - background: #155B4A; - background-size: cover; - min-height: 100vh; - min-width: 100vw; - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; } - -.load-screen__message { - margin-top: 24px; - width: 325px; - text-align: center; } - -.load-screen__details { - color: #c3c3c3; } - -.load-screen__details--warning { - color: white; } - -.load-screen__cancel-link { - color: white; } - -.channel-indicator__icon--invalid { - color: #a94442; } - -.notice { - padding: 10px 20px; - border: 1px solid #000; - text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5); - border-radius: 5px; - color: #468847; - background-color: #dff0d8; - border-color: #d6e9c6; } - -.notice--error { - color: #b94a48; - background-color: #f2dede; - border-color: #eed3d7; } - -.modal-overlay, .error-modal-overlay { - position: fixed; - display: flex; - justify-content: center; - align-items: center; - top: 0px; - left: 0px; - right: 0px; - bottom: 0px; - background-color: rgba(255, 255, 255, 0.74902); - z-index: 9999; } - -.modal-overlay--clear { - background-color: transparent; } - -.modal { - display: flex; - flex-direction: column; - justify-content: center; - align-items: center; - border: 1px solid #cccccc; - background: white; - overflow: auto; - border-radius: 4px; - padding: 24px; - box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12); - max-width: 400px; - word-break: break-word; } - -.modal__header { - margin-bottom: 16px; - text-align: center; } - -.modal__buttons { - display: flex; - flex-direction: row; - justify-content: center; - margin-top: 16px; } - -.modal__button { - margin: 0px 6px; } - -.error-modal-overlay { - background: rgba(0, 0, 0, 0.88); } - -.error-modal__content { - display: flex; - padding: 0px 8px 10px 10px; } - -.error-modal__warning-symbol { - margin-top: 6px; - margin-right: 7px; } - -.download-started-modal__file-path { - word-break: break-all; } - -.error-modal { - max-width: none; - width: 400px; } - -.error-modal__error-list { - /*shitty hack/temp fix for long errors making modals unusable*/ - border: 1px solid #eee; - padding: 8px; - list-style: none; - max-height: 400px; - max-width: 400px; - overflow-y: hidden; } - -.snack-bar { - line-height: 36px; - padding: 6px 24px; - position: fixed; - top: 24px; - left: 0; - right: 0; - margin-left: auto; - margin-right: auto; - min-width: 300px; - max-width: 500px; - background: rgba(32, 32, 32, 0.9); - color: #f0f0f0; - display: flex; - justify-content: space-between; - align-items: center; - border-radius: 2px; - transition: all 0.225s ease; - z-index: 10000; - /*hack to get it over react modal */ } - -.snack-bar__action { - display: inline-block; - text-transform: uppercase; - color: #7df2d6; - margin: 0px 0px 0px 24px; - min-width: min-content; } - .snack-bar__action:hover { - text-decoration: underline; } - -video { - object-fit: contain; - box-sizing: border-box; - max-height: 100%; - max-width: 100%; - background-size: contain; - background-position: center center; - background-repeat: no-repeat; } - -.video { - background: #000; - color: white; } - -.video-embedded { - max-width: 800px; - max-height: 450px; - height: 450px; - position: relative; } - .video-embedded video { - height: 100%; - position: absolute; - left: 0; - top: 0; } - .video-embedded.video--hidden { - height: 450px; } - .video-embedded.video--active { - /*background: none;*/ } - -.video--obscured .video__cover { - position: relative; - filter: blur(20px); } - -.video__loading-screen { - height: 100%; - display: flex; - justify-content: center; - align-items: center; } - -.video__loading-spinner { - position: relative; - width: 11em; - height: 11em; - margin: 20px auto; - font-size: 3px; - border-radius: 50%; - background: linear-gradient(to right, #ffffff 10%, rgba(255, 255, 255, 0) 50%); - animation: spin 1.4s infinite linear; - transform: translateZ(0); } - -@keyframes spin { - from { - transform: rotate(0deg); } - to { - transform: rotate(360deg); } } - .video__loading-spinner:before, .video__loading-spinner:after { - content: ''; - position: absolute; - top: 0; - left: 0; } - .video__loading-spinner:before { - width: 50%; - height: 50%; - background: #ffffff; - border-radius: 100% 0 0 0; } - .video__loading-spinner:after { - height: 75%; - width: 75%; - margin: auto; - bottom: 0; - right: 0; - background: black; - border-radius: 50%; } - -.video__loading-status { - padding-top: 20px; - color: white; } - -.video__cover { - text-align: center; - height: 100%; - width: 100%; - background-size: auto 100%; - background-position: center center; - background-repeat: no-repeat; - position: relative; } - .video__cover .video__play-button { - display: -webkit-box; - display: -moz-box; - display: -ms-flexbox; - display: -webkit-flex; - 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; } - -.video__play-button { - position: absolute; - width: 100%; - height: 100%; - cursor: pointer; - display: none; - font-size: 72px; - color: white; - z-index: 1; - background: rgba(32, 32, 32, 0.9); - opacity: 0.6; - left: 0; - top: 0; } - .video__play-button:hover { - opacity: 1; - transition: opacity 0.225s ease; } - -.pagination { - display: block; - padding: 0; - margin: 0 auto; - text-align: center; } - -.pagination__item { - display: inline-block; - line-height: 36px; - height: 36px; - border-radius: 2px; } - .pagination__item:not(.pagination__item--selected):hover { - background: rgba(0, 0, 0, 0.2); } - .pagination__item:not(.pagination__item--selected):hover > a { - cursor: hand; } - .pagination__item > a { - display: inline-block; - padding: 0 16px; } - -.pagination__item--previous, .pagination__item--next { - font-size: 1.2em; } - -.pagination__item--selected { - color: white; - background: #155B4A; } - -.developer-page__custom-lighthouse-servers { - font: 0.8em monospace; - width: 30em; - height: 10em; } - -.reward-page__details { - background-color: #f9f9f9; } - -.show-page-media { - text-align: center; - margin-bottom: 24px; } - .show-page-media img { - max-width: 100%; } - .show-page-media iframe { - width: 100%; - min-height: 500px; } From 01e82bba1c3d15e0af087122f2cb8c7c0cd40bd1 Mon Sep 17 00:00:00 2001 From: btzr-io Date: Sat, 12 Aug 2017 20:04:25 -0600 Subject: [PATCH 15/47] remove external theme dependency --- app/package.json | 1 - app/yarn.lock | 4 ---- 2 files changed, 5 deletions(-) diff --git a/app/package.json b/app/package.json index 39758862d..0c00d98da 100644 --- a/app/package.json +++ b/app/package.json @@ -12,7 +12,6 @@ "install": "^0.8.7", "jayson": "^2.0.2", "keytar": "^4.0.3", - "lbry-dark-theme": "https://github.com/btzr-io/lbry-dark-theme", "npm": "^4.2.0", "semver": "^5.3.0", "tree-kill": "^1.1.0" diff --git a/app/yarn.lock b/app/yarn.lock index 341eeb5dc..22a12a134 100644 --- a/app/yarn.lock +++ b/app/yarn.lock @@ -876,10 +876,6 @@ lazy-req@^2.0.0: version "2.0.0" resolved "https://registry.yarnpkg.com/lazy-req/-/lazy-req-2.0.0.tgz#c9450a363ecdda2e6f0c70132ad4f37f8f06f2b4" -"lbry-dark-theme@https://github.com/btzr-io/lbry-dark-theme": - version "2.0.0" - resolved "https://github.com/btzr-io/lbry-dark-theme#5ce4d2ceff67d62fde2eea307be728795b8b8c2f" - lcid@^1.0.0: version "1.0.0" resolved "https://registry.yarnpkg.com/lcid/-/lcid-1.0.0.tgz#308accafa0bc483a3867b4b6f2b9506251d1b835" From 02091861aff94b18baceeb2a5887f6a9e2acbd44 Mon Sep 17 00:00:00 2001 From: btzr-io Date: Sat, 12 Aug 2017 20:12:37 -0600 Subject: [PATCH 16/47] revert build --- build/build.sh | 20 ++++---------------- 1 file changed, 4 insertions(+), 16 deletions(-) diff --git a/build/build.sh b/build/build.sh index 6ea63e000..c0e60e79c 100755 --- a/build/build.sh +++ b/build/build.sh @@ -63,22 +63,9 @@ yarn install yarn install npm rebuild node-sass node extractLocals.js - node_modules/.bin/node-sass --sourcemap=none scss/all.scss dist/themes/light.css + node_modules/.bin/node-sass --output dist/css --sourcemap=none scss/ node_modules/.bin/webpack - cp -r ./dist/ "$ROOT/app" -) - - - -#################### -# DARK-THEME # -################### - -( - cd "$ROOT/app/" - yarn add https://github.com/btzr-io/lbry-dark-theme --production - cd "./node_modules/lbry-dark-theme/dist/" - cp -r dark.css "$ROOT/app/dist/themes" + cp -r dist/* "$ROOT/app/dist/" ) @@ -93,7 +80,8 @@ else OSNAME="linux" fi DAEMON_VER=$(node -e "console.log(require(\"$ROOT/app/package.json\").lbrySettings.lbrynetDaemonVersion)") -DAEMON_URL="https://github.com/lbryio/lbry/releases/download/v${DAEMON_VER}/lbrynet-daemon-v${DAEMON_VER}-${OSNAME}.zip" +DAEMON_URL_TEMPLATE=$(node -e "console.log(require(\"$ROOT/app/package.json\").lbrySettings.lbrynetDaemonUrlTemplate)") +DAEMON_URL=$(echo ${DAEMON_URL_TEMPLATE//DAEMONVER/$DAEMON_VER} | sed "s/OSNAME/$OSNAME/g") wget --quiet "$DAEMON_URL" -O "$BUILD_DIR/daemon.zip" unzip "$BUILD_DIR/daemon.zip" -d "$ROOT/app/dist/" rm "$BUILD_DIR/daemon.zip" From fa1ba091a386e257e95506650a1ed35c4fb5d19e Mon Sep 17 00:00:00 2001 From: btzr-io Date: Sat, 12 Aug 2017 20:18:55 -0600 Subject: [PATCH 17/47] revert ui/watch.sh --- ui/watch.sh | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/ui/watch.sh b/ui/watch.sh index b3d0e67ab..6a60eb10c 100755 --- a/ui/watch.sh +++ b/ui/watch.sh @@ -18,8 +18,8 @@ DIR="$( cd "$( dirname "${BASH_SOURCE[0]}" )" && pwd )" fi # run sass once without --watch to force update. then run with --watch to keep watching - node_modules/.bin/node-sass --sourcemap=none $DIR/scss/all.scss $DIR/../app/dist/themes/light.css - node_modules/.bin/node-sass --sourcemap=none --watch $DIR/scss/all.scss $DIR/../app/dist/themes/light.css & + node_modules/.bin/node-sass --output $DIR/../app/dist/css --sourcemap=none $DIR/scss/ + 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 ) From f5e69c57d2f528a8191536eee82f5af4144cf82a Mon Sep 17 00:00:00 2001 From: btzr-io Date: Sat, 12 Aug 2017 20:24:53 -0600 Subject: [PATCH 18/47] load all.css from index.html --- ui/dist/index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/ui/dist/index.html b/ui/dist/index.html index 65372000d..d951dddd1 100644 --- a/ui/dist/index.html +++ b/ui/dist/index.html @@ -6,7 +6,7 @@ - + From a655bdd1d65c6ee52abbf6a038a8710d05dbf282 Mon Sep 17 00:00:00 2001 From: btzr-io Date: Sat, 12 Aug 2017 23:03:15 -0600 Subject: [PATCH 19/47] init css vars implementation --- ui/scss/_global.scss | 74 +++++++++++++++++++++++--------------------- 1 file changed, 39 insertions(+), 35 deletions(-) diff --git a/ui/scss/_global.scss b/ui/scss/_global.scss index b554b77a1..d9ffa3949 100644 --- a/ui/scss/_global.scss +++ b/ui/scss/_global.scss @@ -1,46 +1,50 @@ @charset "UTF-8"; -$spacing-vertical: 24px; +:root { -$padding-button: 12px; -$padding-text-link: 4px; + --spacing-vertical: 24px; -$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); + --padding-button: 12px; + --padding-text-link: 4px; -$font-size: 16px; -$font-line-height: 1.3333; + --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); -$mobile-width-threshold: 801px; -$max-content-width: 1000px; -$max-text-width: 660px; + --font-size: 16px; + --font-line-height: 1.3333; -$width-page-constrained: 800px; -$width-input-text: 330px; + --mobile-width-threshold: 801px; + --max-content-width: 1000px; + --max-text-width: 660px; -$height-button: $spacing-vertical * 1.5; -$height-header: $spacing-vertical * 2.5; -$height-video-embedded: $width-page-constrained * 9 / 16; + --width-page-constrained: 800px; + --width-input-text: 330px; -$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); + --height-button: --spacing-vertical * 1.5; + --height-header: --spacing-vertical * 2.5; + --height-video-embedded: --width-page-constrained * 9 / 16; -$transition-standard: .225s ease; + --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); -$blur-intensity-nsfw: 20px; + --transition-standard: .225s ease; + + --blur-intensity-nsfw: 20px; + +} @mixin clearfix() { @@ -163,7 +167,7 @@ $blur-intensity-nsfw: 20px; 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 +187,7 @@ $blur-intensity-nsfw: 20px; &:hover { opacity: $hover-opacity; - transition: opacity $transition-standard; + transition: opacity var(--transition-standard); text-decoration: underline; .icon { text-decoration: none; @@ -192,4 +196,4 @@ $blur-intensity-nsfw: 20px; color: $color; cursor: pointer; -} \ No newline at end of file +} From 71ad127f0e9cfe91ab9102b4de1abe4f2451d998 Mon Sep 17 00:00:00 2001 From: btzr-io Date: Sat, 12 Aug 2017 23:37:33 -0600 Subject: [PATCH 20/47] move vars -> _vars.scss --- ui/scss/_global.scss | 46 -------------------------------------------- ui/scss/_vars.scss | 46 ++++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 46 insertions(+), 46 deletions(-) create mode 100644 ui/scss/_vars.scss diff --git a/ui/scss/_global.scss b/ui/scss/_global.scss index d9ffa3949..b2ccb4231 100644 --- a/ui/scss/_global.scss +++ b/ui/scss/_global.scss @@ -1,51 +1,5 @@ @charset "UTF-8"; -:root { - - --spacing-vertical: 24px; - - --padding-button: 12px; - --padding-text-link: 4px; - - --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 diff --git a/ui/scss/_vars.scss b/ui/scss/_vars.scss new file mode 100644 index 000000000..83b8fcc91 --- /dev/null +++ b/ui/scss/_vars.scss @@ -0,0 +1,46 @@ +:root { + + --spacing-vertical: 24px; + --padding-button: 12px; + --padding-text-link: 4px; + + /* Colors */ + --color-primary: #155B4A; + --color-primary-light: #155B4A; + --color-light-alt: #155B4A; + --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 */ + --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; + +} From 9bf654e05fcc1e85f9946cc1abdb43a5c91fd5ee Mon Sep 17 00:00:00 2001 From: btzr-io Date: Thu, 17 Aug 2017 23:37:35 -0600 Subject: [PATCH 21/47] init migration to css vars --- ui/scss/_global.scss | 3 + ui/scss/_gui.scss | 20 +++--- ui/scss/_vars.scss | 72 +++++++++++++------- ui/scss/component/_button.scss | 28 ++++---- ui/scss/component/_card.scss | 80 +++++++++++------------ ui/scss/component/_channel-indicator.scss | 2 +- ui/scss/component/_file-actions.scss | 8 +-- ui/scss/component/_form-field.scss | 31 ++++----- ui/scss/component/_header.scss | 22 +++---- ui/scss/component/_load-screen.scss | 4 +- ui/scss/component/_menu.scss | 6 +- ui/scss/component/_modal.scss | 4 +- ui/scss/component/_pagination.scss | 2 +- ui/scss/component/_snack-bar.scss | 6 +- ui/scss/component/_tooltip.scss | 23 +++---- ui/scss/component/_video.scss | 7 +- ui/scss/page/_reward.scss | 4 +- 17 files changed, 171 insertions(+), 151 deletions(-) diff --git a/ui/scss/_global.scss b/ui/scss/_global.scss index b2ccb4231..5e25adf46 100644 --- a/ui/scss/_global.scss +++ b/ui/scss/_global.scss @@ -1,5 +1,8 @@ @charset "UTF-8"; +$spacing-vertical: 24px; +$width-page-constrained: 800px; + @mixin clearfix() { &:before, &:after diff --git a/ui/scss/_gui.scss b/ui/scss/_gui.scss index af2e7ebad..cc2fde586 100644 --- a/ui/scss/_gui.scss +++ b/ui/scss/_gui.scss @@ -3,23 +3,23 @@ html { height: 100%; - font-size: $font-size; + font-size: var(--font-size); } body { font-family: 'Source Sans Pro', sans-serif; - line-height: $font-line-height; + line-height: var(--font-line-height); } #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 +28,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 { @@ -145,18 +145,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; } @@ -176,7 +176,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 index 83b8fcc91..c2006d588 100644 --- a/ui/scss/_vars.scss +++ b/ui/scss/_vars.scss @@ -1,46 +1,70 @@ -:root { +@import "global"; - --spacing-vertical: 24px; - --padding-button: 12px; - --padding-text-link: 4px; +:root { /* Colors */ --color-primary: #155B4A; - --color-primary-light: #155B4A; - --color-light-alt: #155B4A; - --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 */ --font-size: 16px; --font-line-height: 1.3333; + --font-size-subtext-multiple: 0.82; - --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; - + /* 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-standard: .225s ease; + /* Misc */ + --page-constrained-width: 800px; + --mobile-width-threshold: 801px; + --content-max-width: 1000px; + --standard-transition: .225s ease; + --nsfw-blur-intensity: 20px; + --height-video-embedded: $width-page-constrained * 9 / 16 ; - --blur-intensity-nsfw: 20px; + /* Text */ + --text-color: #000; + --text-max-width: 660px; + --text-link-padding: 4px; + /* Input */ + --input-width: 330px; + + /* Button */ + --button-primary-bg: var(--color-primary); + --button-primary-color: #FFF; + --button-padding: 12px; + --button-height: $spacing-vertical * 1.5; + + /* Header */ + --header-bg: #FFF; + --header-color: #666; + --header-height: $spacing-vertical * 2.5; + + /* Window */ + --window-bg: #f5f5f5; + + /* Card */ + --card-bg: #FFF; + --card-hover-translate: 10px; + --card-margin: $spacing-vertical * 2/3; + --card-max-width: $width-page-constrained; + --card-padding: var(--card-margin); + --card-radius: 2px; + --card-link-scaling: 1.1; + --card-shadow: var(--box-shadow-layer); + --card-small-width: $spacing-vertical * 10; + + /* Tooltip */ + --tooltip-body-width: 300px; + --tooltip-bg: #FFF; + --tooltip-color: var(--text-color); + --tooltip-shadow: var(--box-shadow-layer); } diff --git a/ui/scss/component/_button.scss b/ui/scss/component/_button.scss index 5c6fed22f..9f8646f54 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: $padding-button; + margin-left: var(--button-padding); } } .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,25 @@ $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: inherit; + background-color: var(--button-primary-bg); + box-shadow: var(--box-shadow-layer); &:focus { - color: $color-button-text; + color: var(--button-primary-color); //box-shadow: $box-shadow-focus; - background-color: mix(black, $color-primary, $button-focus-shift) + //background-color: mix(black, $color-primary, $button-focus-shift) } } .button-alt { - background-color: $color-bg-alt; - box-shadow: $box-shadow-layer; + background-color: var(--color-bg-alt); + box-shadow: var(--box-shadow-layer); } .button-text @@ -73,7 +73,7 @@ $button-focus-shift: 12%; display: inline-block; .button__content { - margin: 0 $padding-text-link; + margin: 0 var(--text-link-padding); } } .button-text-help @@ -84,4 +84,4 @@ $button-focus-shift: 12%; .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 712eb9ea7..65179d7ac 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(--card-shadow); + border-radius: var(--card-radius); + margin-bottom: var(--card-margin); overflow: auto; } .card--obscured @@ -19,14 +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__actions, .card__content, .card__subtext { - padding: 0 $padding-card-horizontal; + padding: 0 var(--card-padding); } .card--small { .card__title-primary, @@ -34,18 +30,18 @@ $width-card-small: $spacing-vertical * 10; .card__actions, .card__content, .card__subtext { - padding: 0 $padding-card-horizontal / 2; + padding: 0 cacl(var(--card-padding) / 2); } } .card__title-primary { - margin-top: $spacing-vertical * 2/3; + margin-top: 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); } .card__actions--bottom { margin-top: $spacing-vertical * 1/3; @@ -53,16 +49,16 @@ $width-card-small: $spacing-vertical * 10; } .card__actions--form-submit { margin-top: $spacing-vertical; - margin-bottom: $spacing-vertical * 2/3; + 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; } @@ -70,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; @@ -86,7 +82,6 @@ $font-size-subtext-multiple: 0.82; font-weight: 600; } -$card-link-scaling: 1.1; .card__link { display: block; } @@ -96,14 +91,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(--translate-card-hover) * 2)); } .card__media { @@ -157,43 +152,42 @@ $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; - padding: $spacing-vertical / 2; + max-width: var(--card-max-width); + padding: calc(var(--vertical-spacing) / 2); } .card-row { + .card-row { - margin-top: $spacing-vertical * 1/3; + margin-top: calc(var(--vertical-spacing) * 1/3); } } + $padding-top-card-hover-hack: 20px; $padding-right-card-hover-hack: 30px; + .card-row__items { width: 100%; overflow: hidden; @@ -219,7 +213,7 @@ $padding-right-card-hover-hack: 30px; padding-right: $padding-right-card-hover-hack; } .card-row__header { - margin-bottom: $spacing-vertical / 3; + margin-bottom: $spacing-vertical; } .card-row__scrollhouse { @@ -228,14 +222,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; @@ -247,7 +241,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,4 +253,4 @@ $padding-right-card-hover-hack: 30px; .card__icon-featured-content { color: orangered; -} \ No newline at end of file +} 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..84aef8471 100644 --- a/ui/scss/component/_file-actions.scss +++ b/ui/scss/component/_file-actions.scss @@ -4,13 +4,13 @@ $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); } } @@ -29,4 +29,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..ab0656f1f 100644 --- a/ui/scss/component/_form-field.scss +++ b/ui/scss/component/_form-field.scss @@ -1,6 +1,7 @@ @import "../global"; $width-input-border: 2px; +$color-form-border: #000; .form-row-submit { @@ -15,7 +16,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,11 +24,11 @@ $width-input-border: 2px; } input[type="text"].input-copyable { - border: 1px solid $color-form-border; + border: 1px solid var(--color-form-border); 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%; @@ -43,14 +44,14 @@ input[type="text"].input-copyable { } select { - transition: outline $transition-standard; + transition: outline var(--standar-transition); cursor: pointer; box-sizing: border-box; padding-left: 5px; padding-right: 5px; height: $spacing-vertical; &:focus { - outline: $width-input-border solid $color-primary; + outline: $width-input-border solid var(--color-primary); } } @@ -62,9 +63,9 @@ 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(--standar-transition); cursor: pointer; padding-left: 1px; padding-right: 1px; @@ -86,7 +87,7 @@ input[type="text"].input-copyable { 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,7 +105,7 @@ 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); } textarea { @@ -124,11 +125,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 +154,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(--standar-transition); } .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..f107d991b 100644 --- a/ui/scss/component/_header.scss +++ b/ui/scss/component/_header.scss @@ -9,7 +9,7 @@ $color-header-active: darken($color-header, 20%); background: #fff; display: flex; position: fixed; - box-shadow: $box-shadow-layer; + box-shadow: var(--header-shadow); top: 0; left: 0; width: 100%; @@ -36,7 +36,7 @@ $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); @@ -46,13 +46,13 @@ $color-header-active: darken($color-header, 20%); line-height: $spacing-vertical * 1.5; padding-left: 38px; padding-right: 5px; - border: 1px solid $color-text-dark; + border: 1px solid var(--text-color); @include border-radius(2px); border: 1px solid #ccc; &:focus { - color: $color-header-active; - box-shadow: $box-shadow-focus; - border-color: $color-primary; + color: var(--color-header-active); + box-shadow: var(--box-shadow-focus); + border-color: var(--color-primary); } } @@ -69,8 +69,8 @@ nav.sub-header 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 - $sub-header-selected-underline-height); + color: var(--header-color); &:first-child { margin-left: 0; @@ -81,12 +81,12 @@ nav.sub-header } &.sub-header-selected { - border-bottom: $sub-header-selected-underline-height solid $color-header-active; + border-bottom: $sub-header-selected-underline-height solid var(--color-header-active); color: $color-header-active; } &:hover { - color: $color-header-active; + color: var(--color-header-active); } } -} \ No newline at end of file +} diff --git a/ui/scss/component/_load-screen.scss b/ui/scss/component/_load-screen.scss index 0caa74f65..43d84b116 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-primary); 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/_menu.scss b/ui/scss/component/_menu.scss index d8e79be28..2b59c6079 100644 --- a/ui/scss/component/_menu.scss +++ b/ui/scss/component/_menu.scss @@ -10,7 +10,7 @@ $border-radius-menu: 2px; position: absolute; white-space: nowrap; background-color: white; - box-shadow: $box-shadow-layer; + box-shadow: var(--box-shadow-layer); border-radius: $border-radius-menu; 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(--color-bg-alt); } -} \ No newline at end of file +} diff --git a/ui/scss/component/_modal.scss b/ui/scss/component/_modal.scss index c28ba313e..9cf14410e 100644 --- a/ui/scss/component/_modal.scss +++ b/ui/scss/component/_modal.scss @@ -29,7 +29,7 @@ overflow: auto; border-radius: 4px; padding: $spacing-vertical; - box-shadow: $box-shadow-layer; + box-shadow: var(--modal-shadow); max-width: 400px; word-break: break-word; @@ -52,7 +52,7 @@ } .error-modal-overlay { - background: rgba(#000, .88); + background: var(--color-dark-transparent); } .error-modal__content { 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..be517ee41 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-black-transparent); color: #f0f0f0; display: flex; @@ -25,7 +25,7 @@ $padding-snack-horizontal: $spacing-vertical; border-radius: 2px; - transition: all $transition-standard; + transition: all var(--standard-transition); 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/_tooltip.scss b/ui/scss/component/_tooltip.scss index 0be9b1db8..12dc1ee89 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; + width: var(--tooltip-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; + 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(--tooltip-shadow); } .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 5515cbf8a..5540c635a 100644 --- a/ui/scss/component/_video.scss +++ b/ui/scss/component/_video.scss @@ -1,3 +1,4 @@ +$height-video-embedded: $width-page-constrained * 9 / 16; video { object-fit: contain; box-sizing: border-box; @@ -35,7 +36,7 @@ video { .video--obscured .video__cover { position: relative; - filter: blur($blur-intensity-nsfw); + filter: blur(var(--nsfw-blur-intensity)); } @@ -118,12 +119,12 @@ video { font-size: $spacing-vertical * 3; color: white; z-index: 1; - background: $color-black-transparent; + background: var(--color-black-transparent); opacity: 0.6; left: 0; top: 0; &:hover { opacity: 1; - transition: opacity $transition-standard; + transition: opacity var(--standar-transition); } } 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%); +} From 1e465d80b1e1c91b309d7fb8bd970ce97c9f5ef5 Mon Sep 17 00:00:00 2001 From: btzr-io Date: Fri, 18 Aug 2017 17:25:35 -0600 Subject: [PATCH 22/47] add missing colors --- ui/js/util/setTheme.js | 2 ++ ui/scss/_vars.scss | 15 +++++++++------ ui/scss/component/_modal.scss | 2 +- ui/scss/component/_snack-bar.scss | 2 +- ui/scss/component/_video.scss | 2 +- 5 files changed, 14 insertions(+), 9 deletions(-) diff --git a/ui/js/util/setTheme.js b/ui/js/util/setTheme.js index 71c101298..9add03811 100644 --- a/ui/js/util/setTheme.js +++ b/ui/js/util/setTheme.js @@ -3,6 +3,7 @@ import { existsSync } from "fs"; import { remote } from "electron"; function setTheme(name) { + /* const link = document.getElementById("theme"); const file = `${name}.css`; const path = `${remote.app.getAppPath()}/dist/themes/${file}`; @@ -14,6 +15,7 @@ function setTheme(name) { link.href = `./themes/light.css`; lbry.setClientSetting("theme", "light"); } + */ } export default setTheme; diff --git a/ui/scss/_vars.scss b/ui/scss/_vars.scss index c2006d588..5d9e3a75c 100644 --- a/ui/scss/_vars.scss +++ b/ui/scss/_vars.scss @@ -4,13 +4,18 @@ /* Colors */ --color-primary: #155B4A; - --color-black-transparent: rgba(32,32,32,0.9); + --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-money: #216C2A; --color-meta-light: #505050; + --color-canvas: #f5f5f5; + --color-bg: #ffffff; + --color-bg-alt: #D9D9D9; /* Font */ --font-size: 16px; @@ -22,8 +27,6 @@ --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); /* Misc */ - --page-constrained-width: 800px; - --mobile-width-threshold: 801px; --content-max-width: 1000px; --standard-transition: .225s ease; --nsfw-blur-intensity: 20px; @@ -49,10 +52,10 @@ --header-height: $spacing-vertical * 2.5; /* Window */ - --window-bg: #f5f5f5; + --window-bg: var(--color-canvas); /* Card */ - --card-bg: #FFF; + --card-bg: var(--color-bg); --card-hover-translate: 10px; --card-margin: $spacing-vertical * 2/3; --card-max-width: $width-page-constrained; @@ -64,7 +67,7 @@ /* Tooltip */ --tooltip-body-width: 300px; - --tooltip-bg: #FFF; + --tooltip-bg: var(--color-bg); --tooltip-color: var(--text-color); --tooltip-shadow: var(--box-shadow-layer); } diff --git a/ui/scss/component/_modal.scss b/ui/scss/component/_modal.scss index f1cd56834..c320a6475 100644 --- a/ui/scss/component/_modal.scss +++ b/ui/scss/component/_modal.scss @@ -52,7 +52,7 @@ } .error-modal-overlay { - background: var(--color-dark-transparent); + background: var(--color-dark-overlay); } .error-modal__content { diff --git a/ui/scss/component/_snack-bar.scss b/ui/scss/component/_snack-bar.scss index be517ee41..1d057b16f 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: var(--color-black-transparent); + background: var(--color-dark-overlay); color: #f0f0f0; display: flex; diff --git a/ui/scss/component/_video.scss b/ui/scss/component/_video.scss index 5540c635a..0f7f860ff 100644 --- a/ui/scss/component/_video.scss +++ b/ui/scss/component/_video.scss @@ -119,7 +119,7 @@ video { font-size: $spacing-vertical * 3; color: white; z-index: 1; - background: var(--color-black-transparent); + background: var(--color-dark-overlay); opacity: 0.6; left: 0; top: 0; From 5a9fdcdd26b4b28d1ab9bbed792a86a8f48ecf70 Mon Sep 17 00:00:00 2001 From: btzr-io Date: Fri, 18 Aug 2017 17:35:52 -0600 Subject: [PATCH 23/47] import css vars --- ui/scss/all.scss | 1 + ui/scss/component/_card.scss | 6 +++--- 2 files changed, 4 insertions(+), 3 deletions(-) diff --git a/ui/scss/all.scss b/ui/scss/all.scss index d899566ab..a63c6ec13 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"; diff --git a/ui/scss/component/_card.scss b/ui/scss/component/_card.scss index 65179d7ac..29869925b 100644 --- a/ui/scss/component/_card.scss +++ b/ui/scss/component/_card.scss @@ -75,7 +75,7 @@ $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; @@ -98,7 +98,7 @@ $font-size-subtext-multiple: 0.82; overflow-y: visible } .card--link:hover ~ .card--link { - transform: translateX(calc(var(--translate-card-hover) * 2)); + transform: translateX(calc(var(--card-hover-translate) * 2)); } .card__media { @@ -162,7 +162,7 @@ $font-size-subtext-multiple: 0.82; } .card--form { - width: calc( var(--input-width) + var(--card-padding * 2); + width: calc( var(--input-width) + var(--card-padding) * 2); } .card__subtitle { From 6455f499562d7d4d2f19b08ab948b92c3a0e6896 Mon Sep 17 00:00:00 2001 From: btzr-io Date: Fri, 18 Aug 2017 18:06:53 -0600 Subject: [PATCH 24/47] minor fix for broken styles / animation --- ui/scss/_global.scss | 2 +- ui/scss/_vars.scss | 8 ++++++-- ui/scss/component/_button.scss | 2 +- ui/scss/component/_form-field.scss | 7 +++---- ui/scss/component/_header.scss | 6 +++--- ui/scss/component/_video.scss | 2 +- 6 files changed, 15 insertions(+), 12 deletions(-) diff --git a/ui/scss/_global.scss b/ui/scss/_global.scss index 5e25adf46..f3ce3fea0 100644 --- a/ui/scss/_global.scss +++ b/ui/scss/_global.scss @@ -144,7 +144,7 @@ $width-page-constrained: 800px; &:hover { opacity: $hover-opacity; - transition: opacity var(--transition-standard); + transition: opacity var(--transition-duration) var(--transition-type); text-decoration: underline; .icon { text-decoration: none; diff --git a/ui/scss/_vars.scss b/ui/scss/_vars.scss index 5d9e3a75c..22f992f6f 100644 --- a/ui/scss/_vars.scss +++ b/ui/scss/_vars.scss @@ -28,10 +28,13 @@ /* Misc */ --content-max-width: 1000px; - --standard-transition: .225s ease; --nsfw-blur-intensity: 20px; --height-video-embedded: $width-page-constrained * 9 / 16 ; + /* Transitions */ + --transition-duration: .225s; + --transition-type: ease; + /* Text */ --text-color: #000; --text-max-width: 660px; @@ -47,9 +50,10 @@ --button-height: $spacing-vertical * 1.5; /* Header */ - --header-bg: #FFF; + --header-bg: var(--color-bg); --header-color: #666; --header-height: $spacing-vertical * 2.5; + --header-shadow: var(--box-shadow-layer); /* Window */ --window-bg: var(--color-canvas); diff --git a/ui/scss/component/_button.scss b/ui/scss/component/_button.scss index 9f8646f54..8a2d945f0 100644 --- a/ui/scss/component/_button.scss +++ b/ui/scss/component/_button.scss @@ -52,7 +52,7 @@ $button-focus-shift: 12%; .button-primary { - color: inherit; + color: var(--button-primary-color); background-color: var(--button-primary-bg); box-shadow: var(--box-shadow-layer); &:focus { diff --git a/ui/scss/component/_form-field.scss b/ui/scss/component/_form-field.scss index ab0656f1f..050a4cd27 100644 --- a/ui/scss/component/_form-field.scss +++ b/ui/scss/component/_form-field.scss @@ -44,8 +44,7 @@ input[type="text"].input-copyable { } select { - transition: outline var(--standar-transition); - cursor: pointer; + transition: outline var(--transition-duration) var(--transition-type); box-sizing: border-box; padding-left: 5px; padding-right: 5px; @@ -65,7 +64,7 @@ input[type="text"].input-copyable { @include placeholder { //color: lighten($color-text-dark, 60%); } - transition: all var(--standar-transition); + transition: all var(--transition-duration) var(--transition-type); cursor: pointer; padding-left: 1px; padding-right: 1px; @@ -154,7 +153,7 @@ input[type="text"].input-copyable { .form-field__error, .form-field__helper { margin-top: $spacing-vertical * 1/3; font-size: 0.8em; - transition: opacity var(--standar-transition); + transition: opacity var(--transition-duration) var(--transition-type); } .form-field__error { diff --git a/ui/scss/component/_header.scss b/ui/scss/component/_header.scss index f107d991b..9e6498c8e 100644 --- a/ui/scss/component/_header.scss +++ b/ui/scss/component/_header.scss @@ -50,7 +50,7 @@ $color-header-active: darken($color-header, 20%); @include border-radius(2px); border: 1px solid #ccc; &:focus { - color: var(--color-header-active); + color: $color-header-active; box-shadow: var(--box-shadow-focus); border-color: var(--color-primary); } @@ -81,12 +81,12 @@ nav.sub-header } &.sub-header-selected { - border-bottom: $sub-header-selected-underline-height solid var(--color-header-active); + border-bottom: $sub-header-selected-underline-height solid $color-header-active; color: $color-header-active; } &:hover { - color: var(--color-header-active); + color: $color-header-active; } } } diff --git a/ui/scss/component/_video.scss b/ui/scss/component/_video.scss index 0f7f860ff..563e726d1 100644 --- a/ui/scss/component/_video.scss +++ b/ui/scss/component/_video.scss @@ -125,6 +125,6 @@ video { top: 0; &:hover { opacity: 1; - transition: opacity var(--standar-transition); + transition: opacity var(--transition-duration) var(--transition-type); } } From 95f68cbda8c9be7a4b41e5d842fc7fab4ee474c9 Mon Sep 17 00:00:00 2001 From: btzr-io Date: Fri, 18 Aug 2017 18:42:45 -0600 Subject: [PATCH 25/47] fix load screen styles --- app/main.js | 2 +- ui/scss/_vars.scss | 1 + ui/scss/component/_load-screen.scss | 2 +- ui/scss/component/_snack-bar.scss | 2 +- 4 files changed, 4 insertions(+), 3 deletions(-) diff --git a/app/main.js b/app/main.js index 27c8f72c8..c14528cca 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/ui/scss/_vars.scss b/ui/scss/_vars.scss index 22f992f6f..991722a4c 100644 --- a/ui/scss/_vars.scss +++ b/ui/scss/_vars.scss @@ -3,6 +3,7 @@ :root { /* Colors */ + --color-brand: #155B4A; --color-primary: #155B4A; --color-primary-light: saturate(lighten(#155B4A, 50%), 20%); --color-light-alt: hsl(hue(#155B4A), 15, 85); diff --git a/ui/scss/component/_load-screen.scss b/ui/scss/component/_load-screen.scss index 43d84b116..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: var(--color-primary); + background: var(--color-brand); background-size: cover; min-height: 100vh; min-width: 100vw; diff --git a/ui/scss/component/_snack-bar.scss b/ui/scss/component/_snack-bar.scss index 1d057b16f..5be3e1c6d 100644 --- a/ui/scss/component/_snack-bar.scss +++ b/ui/scss/component/_snack-bar.scss @@ -25,7 +25,7 @@ $padding-snack-horizontal: $spacing-vertical; border-radius: 2px; - transition: all var(--standard-transition); + transition: all var(--transition-duration) var(--transition-type); z-index: 10000; /*hack to get it over react modal */ } From 509ff192cd4bdd39314f60f85040cf5428739d9a Mon Sep 17 00:00:00 2001 From: btzr-io Date: Fri, 18 Aug 2017 19:09:45 -0600 Subject: [PATCH 26/47] fix for card style --- ui/scss/_vars.scss | 2 +- ui/scss/component/_card.scss | 8 ++++---- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/ui/scss/_vars.scss b/ui/scss/_vars.scss index 991722a4c..c25920a21 100644 --- a/ui/scss/_vars.scss +++ b/ui/scss/_vars.scss @@ -64,7 +64,7 @@ --card-hover-translate: 10px; --card-margin: $spacing-vertical * 2/3; --card-max-width: $width-page-constrained; - --card-padding: var(--card-margin); + --card-padding: $spacing-vertical * 2/3; --card-radius: 2px; --card-link-scaling: 1.1; --card-shadow: var(--box-shadow-layer); diff --git a/ui/scss/component/_card.scss b/ui/scss/component/_card.scss index 29869925b..5910bfd9c 100644 --- a/ui/scss/component/_card.scss +++ b/ui/scss/component/_card.scss @@ -30,7 +30,7 @@ .card__actions, .card__content, .card__subtext { - padding: 0 cacl(var(--card-padding) / 2); + padding: 0 calc(var(--card-padding) / 2); } } .card__title-primary { @@ -176,12 +176,12 @@ $font-size-subtext-multiple: 0.82; margin-left: auto; margin-right: auto; max-width: var(--card-max-width); - padding: calc(var(--vertical-spacing) / 2); + padding: $spacing-vertical / 2; } .card-row { + .card-row { - margin-top: calc(var(--vertical-spacing) * 1/3); + margin-top: $spacing-vertical * 1/3; } } @@ -213,7 +213,7 @@ $padding-right-card-hover-hack: 30px; padding-right: $padding-right-card-hover-hack; } .card-row__header { - margin-bottom: $spacing-vertical; + margin-bottom: $spacing-vertical / 3; } .card-row__scrollhouse { From 198d44af662ba921d675ed10359c8db16155bc44 Mon Sep 17 00:00:00 2001 From: btzr-io Date: Fri, 18 Aug 2017 19:18:07 -0600 Subject: [PATCH 27/47] minor fix for buttons style --- ui/scss/component/_button.scss | 2 ++ 1 file changed, 2 insertions(+) diff --git a/ui/scss/component/_button.scss b/ui/scss/component/_button.scss index 8a2d945f0..3b5fdce8d 100644 --- a/ui/scss/component/_button.scss +++ b/ui/scss/component/_button.scss @@ -55,10 +55,12 @@ $button-focus-shift: 12%; color: var(--button-primary-color); background-color: var(--button-primary-bg); box-shadow: var(--box-shadow-layer); + opacity: 0.9; &:focus { color: var(--button-primary-color); //box-shadow: $box-shadow-focus; //background-color: mix(black, $color-primary, $button-focus-shift) + opacity: 1; } } .button-alt From dccd52c7dffc55805f91165380961db522cf4012 Mon Sep 17 00:00:00 2001 From: btzr-io Date: Fri, 18 Aug 2017 19:46:45 -0600 Subject: [PATCH 28/47] fix broken style from form-field --- ui/scss/_vars.scss | 2 ++ ui/scss/component/_button.scss | 7 +++---- ui/scss/component/_form-field.scss | 11 ++++------- 3 files changed, 9 insertions(+), 11 deletions(-) diff --git a/ui/scss/_vars.scss b/ui/scss/_vars.scss index c25920a21..b8115d0ca 100644 --- a/ui/scss/_vars.scss +++ b/ui/scss/_vars.scss @@ -43,6 +43,8 @@ /* Input */ --input-width: 330px; + --input-border-size: 2px; + --input-border-color: rgba(0,0,0,.25); /* Button */ --button-primary-bg: var(--color-primary); diff --git a/ui/scss/component/_button.scss b/ui/scss/component/_button.scss index 3b5fdce8d..0f4d851e5 100644 --- a/ui/scss/component/_button.scss +++ b/ui/scss/component/_button.scss @@ -55,12 +55,11 @@ $button-focus-shift: 12%; color: var(--button-primary-color); background-color: var(--button-primary-bg); box-shadow: var(--box-shadow-layer); - opacity: 0.9; + &:focus { - color: var(--button-primary-color); + //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) - opacity: 1; } } .button-alt diff --git a/ui/scss/component/_form-field.scss b/ui/scss/component/_form-field.scss index 050a4cd27..841d58d62 100644 --- a/ui/scss/component/_form-field.scss +++ b/ui/scss/component/_form-field.scss @@ -1,8 +1,5 @@ @import "../global"; -$width-input-border: 2px; -$color-form-border: #000; - .form-row-submit { margin-top: $spacing-vertical; @@ -24,7 +21,7 @@ $color-form-border: #000; } input[type="text"].input-copyable { - border: 1px solid var(--color-form-border); + border: 1px solid var(--input-border-color); line-height: 1; padding-top: $spacing-vertical * 1/3; padding-bottom: $spacing-vertical * 1/3; @@ -50,7 +47,7 @@ input[type="text"].input-copyable { padding-right: 5px; height: $spacing-vertical; &:focus { - outline: $width-input-border solid var(--color-primary); + outline: var(--input-border-size) solid var(--color-primary); } } @@ -81,7 +78,7 @@ 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; @@ -109,7 +106,7 @@ input[type="text"].input-copyable { textarea { padding: 2px; - border: $width-input-border solid $color-form-border; + border: var(--input-border-size) solid var(--input-border-color); } } .form-field--SimpleMDE { From 3f3372c96a8617a8fc2fd3b50ce70425f288aa68 Mon Sep 17 00:00:00 2001 From: btzr-io Date: Fri, 18 Aug 2017 22:33:01 -0600 Subject: [PATCH 29/47] update overall scss structure make styles more flexible / customizable --- ui/scss/_gui.scss | 6 +++ ui/scss/_vars.scss | 57 ++++++++++++++++++++++------ ui/scss/component/_button.scss | 4 +- ui/scss/component/_card.scss | 2 +- ui/scss/component/_file-actions.scss | 6 +-- ui/scss/component/_header.scss | 30 +++++++-------- ui/scss/component/_menu.scss | 6 +-- ui/scss/component/_modal.scss | 10 ++--- ui/scss/component/_table.scss | 10 ++--- ui/scss/component/_tooltip.scss | 4 +- 10 files changed, 84 insertions(+), 51 deletions(-) diff --git a/ui/scss/_gui.scss b/ui/scss/_gui.scss index 7f9768f2c..1c484c68b 100644 --- a/ui/scss/_gui.scss +++ b/ui/scss/_gui.scss @@ -11,6 +11,12 @@ body line-height: var(--font-line-height); } +/* Custom text selection */ +*::selection { + background: var(--text-selection-bg); + color: var(--text-selection-color); +} + #window { min-height: 100vh; diff --git a/ui/scss/_vars.scss b/ui/scss/_vars.scss index b8115d0ca..bfa2264ab 100644 --- a/ui/scss/_vars.scss +++ b/ui/scss/_vars.scss @@ -12,12 +12,18 @@ --color-notice: #8a6d3b; --color-error: #a94442; --color-load-screen-text: #c3c3c3; - --color-money: #216C2A; --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; @@ -27,19 +33,20 @@ --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); - /* Misc */ - --content-max-width: 1000px; - --nsfw-blur-intensity: 20px; - --height-video-embedded: $width-page-constrained * 9 / 16 ; - - /* Transitions */ + /* 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-width: 330px; @@ -47,6 +54,8 @@ --input-border-color: rgba(0,0,0,.25); /* Button */ + --button-bg: var(--color-bg-alt); + --button-color: #FFF; --button-primary-bg: var(--color-primary); --button-primary-color: #FFF; --button-padding: 12px; @@ -55,11 +64,26 @@ /* 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-shadow: var(--box-shadow-layer); - /* Window */ - --window-bg: var(--color-canvas); + /* 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); @@ -69,12 +93,21 @@ --card-padding: $spacing-vertical * 2/3; --card-radius: 2px; --card-link-scaling: 1.1; - --card-shadow: var(--box-shadow-layer); --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-body-width: 300px; --tooltip-bg: var(--color-bg); --tooltip-color: var(--text-color); - --tooltip-shadow: var(--box-shadow-layer); + --tooltip-border: 1px solid #aaa; } diff --git a/ui/scss/component/_button.scss b/ui/scss/component/_button.scss index 0f4d851e5..93662bd86 100644 --- a/ui/scss/component/_button.scss +++ b/ui/scss/component/_button.scss @@ -64,7 +64,7 @@ $button-focus-shift: 12%; } .button-alt { - background-color: var(--color-bg-alt); + background-color: var(--button-bg); box-shadow: var(--box-shadow-layer); } @@ -79,7 +79,7 @@ $button-focus-shift: 12%; } .button-text-help { - @include text-link(#aaa); + @include text-link(var(--text-help-color)); font-size: 0.8em; } .button--flat diff --git a/ui/scss/component/_card.scss b/ui/scss/component/_card.scss index 5910bfd9c..c43cc3c2d 100644 --- a/ui/scss/component/_card.scss +++ b/ui/scss/component/_card.scss @@ -5,7 +5,7 @@ margin-right: auto; max-width: var(--card-max-width); background: var(--card-bg); - box-shadow: var(--card-shadow); + box-shadow: var(--box-shadow-layer); border-radius: var(--card-radius); margin-bottom: var(--card-margin); overflow: auto; diff --git a/ui/scss/component/_file-actions.scss b/ui/scss/component/_file-actions.scss index 84aef8471..88d67bf29 100644 --- a/ui/scss/component/_file-actions.scss +++ b/ui/scss/component/_file-actions.scss @@ -1,7 +1,5 @@ @import "../global"; -$color-download: #444; - .file-actions { line-height: var(--button-height); @@ -17,11 +15,11 @@ $color-download: #444; .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; diff --git a/ui/scss/component/_header.scss b/ui/scss/component/_header.scss index 9e6498c8e..0d01abe1c 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: var(--header-shadow); + box-shadow: var(--box-shadow-layer); top: 0; left: 0; width: 100%; @@ -39,18 +36,18 @@ $color-header-active: darken($color-header, 20%); .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 var(--text-color); @include border-radius(2px); - border: 1px solid #ccc; + border: var(--search-border); + transition: all var(--transition-duration) var(--transition-type); &:focus { - color: $color-header-active; + color: var(--search-active-color); box-shadow: var(--box-shadow-focus); border-color: var(--color-primary); } @@ -65,12 +62,11 @@ nav.sub-header margin-right: auto; > a { - $sub-header-selected-underline-height: 2px; display: inline-block; margin: 0 15px; padding: 0 5px; - line-height:calc(var(--header-height) - $spacing-vertical - $sub-header-selected-underline-height); - color: var(--header-color); + line-height:calc(var(--header-height) - $spacing-vertical - var(--tab-border-size)); + color: var(--tab-color); &:first-child { margin-left: 0; @@ -81,12 +77,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); } } } diff --git a/ui/scss/component/_menu.scss b/ui/scss/component/_menu.scss index 2b59c6079..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; + background-color: var(--menu-bg); 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 +20,6 @@ $border-radius-menu: 2px; display: block; padding: ($spacing-vertical / 4) ($spacing-vertical / 2); &:hover { - background: var(--color-bg-alt); + background: var(--menu-item-hover-bg); } } diff --git a/ui/scss/component/_modal.scss b/ui/scss/component/_modal.scss index c320a6475..f367e45f3 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: var(--modal-shadow); + box-shadow: var(--box-shadow-layer); max-width: 400px; word-break: break-word; @@ -52,7 +52,7 @@ } .error-modal-overlay { - background: var(--color-dark-overlay); + background: var(--modal-overlay-bg); } .error-modal__content { diff --git a/ui/scss/component/_table.scss b/ui/scss/component/_table.scss index 9d60cf6e8..1535286c3 100644 --- a/ui/scss/component/_table.scss +++ b/ui/scss/component/_table.scss @@ -20,13 +20,13 @@ 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; } } tr.thead:not(:first-child) th { - border-top: 1px solid #e2e2e2; + border-top: var(--table-border); } tfoot td { padding: $spacing-vertical / 2 8px; @@ -35,10 +35,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-ever); } &.thead { background: none; @@ -52,4 +52,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 12dc1ee89..18b3d92c3 100644 --- a/ui/scss/component/_tooltip.scss +++ b/ui/scss/component/_tooltip.scss @@ -17,12 +17,12 @@ box-sizing: border-box; padding: $spacing-vertical / 2; width: var(--tooltip-width); - border: 1px solid #aaa; + 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(--tooltip-shadow); + box-shadow: var(--box-shadow-layer); } .tooltip--header .tooltip__link { From 58496c1d3c24559a64afb5ceb280e289202268ed Mon Sep 17 00:00:00 2001 From: btzr-io Date: Sat, 19 Aug 2017 13:04:45 -0600 Subject: [PATCH 30/47] init fix for last review --- CHANGELOG.md | 5 ++--- ui/js/actions/settings.js | 2 ++ ui/js/constants/action_types.js | 3 --- ui/js/constants/settings.js | 1 + ui/js/main.js | 4 ---- ui/js/page/settings/index.js | 7 +------ ui/js/page/settings/view.jsx | 11 +++++------ ui/js/util/setTheme.js | 21 --------------------- ui/scss/_vars.scss | 2 +- ui/scss/component/_table.scss | 2 +- 10 files changed, 13 insertions(+), 45 deletions(-) delete mode 100644 ui/js/util/setTheme.js diff --git a/CHANGELOG.md b/CHANGELOG.md index aae0813e8..adcbd124c 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -8,11 +8,10 @@ Web UI version numbers should always match the corresponding version of LBRY App ## [Unreleased] ### Added - * Added a new component, `FormFieldPrice` which is now used in Publish and Settings - * Added a theme system to select different themes in Settings. + * Added a new component, `FormFieldPrice` which is now used in Publish and Settings. + * Added a new theme system to select different themes in Settings. * Added a new dark theme. * Added a forward button and improved history behavior. Back/forward disable when unusable. - * Added a new component, `FormFieldPrice` which is now used in Publish and Settings. * Added wallet backup guide reference. ### Changed diff --git a/ui/js/actions/settings.js b/ui/js/actions/settings.js index 9b450bb08..977151493 100644 --- a/ui/js/actions/settings.js +++ b/ui/js/actions/settings.js @@ -46,6 +46,7 @@ export function doSetClientSetting(key, value) { } export function getThemes() { + /* // Themes path const themesPath = `${remote.app.getAppPath()}/dist/themes`; @@ -63,4 +64,5 @@ export function getThemes() { type: types.GET_THEMES, data: { themes }, }; + */ } diff --git a/ui/js/constants/action_types.js b/ui/js/constants/action_types.js index 0ba2af2fe..78d12d2cf 100644 --- a/ui/js/constants/action_types.js +++ b/ui/js/constants/action_types.js @@ -85,9 +85,6 @@ export const SEARCH_CANCELLED = "SEARCH_CANCELLED"; export const DAEMON_SETTINGS_RECEIVED = "DAEMON_SETTINGS_RECEIVED"; export const CLIENT_SETTING_CHANGED = "CLIENT_SETTING_CHANGED"; -// Themes -export const GET_THEMES = "GET_THEMES"; - // User export const AUTHENTICATION_STARTED = "AUTHENTICATION_STARTED"; export const AUTHENTICATION_SUCCESS = "AUTHENTICATION_SUCCESS"; diff --git a/ui/js/constants/settings.js b/ui/js/constants/settings.js index 5187baea1..97ec0a23a 100644 --- a/ui/js/constants/settings.js +++ b/ui/js/constants/settings.js @@ -3,3 +3,4 @@ export const FIRST_RUN_ACKNOWLEDGED = "welcome_acknowledged"; export const LANGUAGE = "language"; export const SHOW_NSFW = "showNsfw"; export const SHOW_UNAVAILABLE = "showUnavailable"; +export const GET_THEMES = "theme"; diff --git a/ui/js/main.js b/ui/js/main.js index ba880004d..aed81f1c8 100644 --- a/ui/js/main.js +++ b/ui/js/main.js @@ -8,7 +8,6 @@ import store from "store.js"; import SplashScreen from "component/splash"; import { doChangePath, doNavigate, doDaemonReady } from "actions/app"; import { toQueryString } from "util/query_params"; -import setTheme from "util/setTheme"; import * as types from "constants/action_types"; const env = ENV; @@ -72,9 +71,6 @@ document.addEventListener("click", event => { } }); -// Load initial theme -setTheme(lbry.getClientSetting("theme")); - const application = remote.app; const dock = application.dock; const win = remote.getCurrentWindow(); diff --git a/ui/js/page/settings/index.js b/ui/js/page/settings/index.js index a202da461..c74b918af 100644 --- a/ui/js/page/settings/index.js +++ b/ui/js/page/settings/index.js @@ -1,11 +1,7 @@ import React from "react"; import { connect } from "react-redux"; import { doClearCache } from "actions/app"; -import { - doSetDaemonSetting, - doSetClientSetting, - getThemes, -} from "actions/settings"; +import { doSetDaemonSetting, doSetClientSetting } from "actions/settings"; import { selectDaemonSettings, selectShowNsfw } from "selectors/settings"; import SettingsPage from "./view"; @@ -17,7 +13,6 @@ const select = state => ({ const perform = dispatch => ({ setDaemonSetting: (key, value) => dispatch(doSetDaemonSetting(key, value)), clearCache: () => dispatch(doClearCache()), - getThemes: () => dispatch(getThemes()), setClientSetting: (key, value) => dispatch(doSetClientSetting(key, value)), }); diff --git a/ui/js/page/settings/view.jsx b/ui/js/page/settings/view.jsx index 423e6d248..f2f89b0a2 100644 --- a/ui/js/page/settings/view.jsx +++ b/ui/js/page/settings/view.jsx @@ -7,7 +7,6 @@ import lbry from "lbry.js"; import Link from "component/link"; import FormFieldPrice from "component/formFieldPrice"; import { remote } from "electron"; -import setTheme from "util/setTheme"; class SettingsPage extends React.PureComponent { constructor(props) { @@ -21,7 +20,7 @@ class SettingsPage extends React.PureComponent { showUnavailable: lbry.getClientSetting(settings.SHOW_UNAVAILABLE), language: lbry.getClientSetting(settings.LANGUAGE), clearingCache: false, - theme: lbry.getClientSetting("theme"), + theme: lbry.getClientSetting(settings.THEME), themes: [], }; } @@ -40,8 +39,8 @@ class SettingsPage extends React.PureComponent { } getThemes() { - const { themes } = this.props.getThemes().data; - this.setState({ themes }); + //const { themes } = this.props.getThemes().data; + //this.setState({ themes }); } setDaemonSetting(name, value) { @@ -54,8 +53,8 @@ class SettingsPage extends React.PureComponent { } setTheme(value) { - setTheme(value); - this.props.setClientSetting("theme", value); + //setTheme(value); + //this.props.setClientSetting("theme", value); } onRunOnStartChange(event) { diff --git a/ui/js/util/setTheme.js b/ui/js/util/setTheme.js deleted file mode 100644 index 9add03811..000000000 --- a/ui/js/util/setTheme.js +++ /dev/null @@ -1,21 +0,0 @@ -import lbry from "lbry"; -import { existsSync } from "fs"; -import { remote } from "electron"; - -function setTheme(name) { - /* - const link = document.getElementById("theme"); - const file = `${name}.css`; - const path = `${remote.app.getAppPath()}/dist/themes/${file}`; - - if (existsSync(path)) { - link.href = `./themes/${file}`; - lbry.setClientSetting("theme", name); - } else { - link.href = `./themes/light.css`; - lbry.setClientSetting("theme", "light"); - } - */ -} - -export default setTheme; diff --git a/ui/scss/_vars.scss b/ui/scss/_vars.scss index bfa2264ab..3148abd7e 100644 --- a/ui/scss/_vars.scss +++ b/ui/scss/_vars.scss @@ -106,7 +106,7 @@ --menu-item-hover-bg: var(--color-bg-alt); /* Tooltip */ - --tooltip-body-width: 300px; + --tooltip-width: 300px; --tooltip-bg: var(--color-bg); --tooltip-color: var(--text-color); --tooltip-border: 1px solid #aaa; diff --git a/ui/scss/component/_table.scss b/ui/scss/component/_table.scss index 1535286c3..c6d274296 100644 --- a/ui/scss/component/_table.scss +++ b/ui/scss/component/_table.scss @@ -38,7 +38,7 @@ table.table-standard { background-color: var(--table-item-odd); } &:nth-child(odd):not(.even) { - background-color: var(--table-item-ever); + background-color: var(--table-item-even); } &.thead { background: none; From c87bcb83831316a5e3249f938cebfec6dc7d913d Mon Sep 17 00:00:00 2001 From: btzr-io Date: Sat, 19 Aug 2017 15:34:45 -0600 Subject: [PATCH 31/47] rewrite themes-system -> action / reducer --- ui/dist/index.html | 1 + ui/js/actions/settings.js | 37 ++++++++++++++++++++------------- ui/js/constants/action_types.js | 3 +++ ui/js/constants/settings.js | 3 ++- ui/js/lbry.js | 3 ++- ui/js/page/settings/index.js | 16 ++++++++++++-- ui/js/page/settings/view.jsx | 15 +++++++------ ui/js/reducers/settings.js | 7 +++++++ ui/js/selectors/settings.js | 10 +++++++++ 9 files changed, 69 insertions(+), 26 deletions(-) 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/js/actions/settings.js b/ui/js/actions/settings.js index 977151493..a51ceb7b4 100644 --- a/ui/js/actions/settings.js +++ b/ui/js/actions/settings.js @@ -45,24 +45,33 @@ export function doSetClientSetting(key, value) { }; } -export function getThemes() { - /* - // Themes path - const themesPath = `${remote.app.getAppPath()}/dist/themes`; +export function doSetTheme(name) { + const link = document.getElementById("theme"); + + return function(dispatch, getState) { + const { themes } = getState().settings.clientSettings; + const theme = themes.find(theme => theme.name === name); + + link.href = theme.path; + + dispatch(doSetClientSetting("theme", theme)); + }; +} + +export function doGetThemes() { + const path = `${remote.app.getAppPath()}/dist/themes`; // Get all .css files - const files = readdirSync(themesPath).filter(function(file) { - return extname(file) === ".css"; - }); + const files = readdirSync(path).filter(file => extname(file) === ".css"); // Get theme name - const themes = files.map(function(file) { - return file.replace(".css", ""); - }); + const themes = files.map(file => ({ + name: file.replace(".css", ""), + path: `./themes/${file}`, + fullPath: `${path}/${file}`, + })); - return { - type: types.GET_THEMES, - data: { themes }, + return function(dispatch, getState) { + dispatch(doSetClientSetting("themes", themes)); }; - */ } diff --git a/ui/js/constants/action_types.js b/ui/js/constants/action_types.js index 78d12d2cf..942ea11ee 100644 --- a/ui/js/constants/action_types.js +++ b/ui/js/constants/action_types.js @@ -85,6 +85,9 @@ export const SEARCH_CANCELLED = "SEARCH_CANCELLED"; export const DAEMON_SETTINGS_RECEIVED = "DAEMON_SETTINGS_RECEIVED"; export const CLIENT_SETTING_CHANGED = "CLIENT_SETTING_CHANGED"; +// THEMES +export const GET_THEMES = "GET_THEMES"; + // User export const AUTHENTICATION_STARTED = "AUTHENTICATION_STARTED"; export const AUTHENTICATION_SUCCESS = "AUTHENTICATION_SUCCESS"; diff --git a/ui/js/constants/settings.js b/ui/js/constants/settings.js index 97ec0a23a..b5a2d30b9 100644 --- a/ui/js/constants/settings.js +++ b/ui/js/constants/settings.js @@ -3,4 +3,5 @@ export const FIRST_RUN_ACKNOWLEDGED = "welcome_acknowledged"; export const LANGUAGE = "language"; export const SHOW_NSFW = "showNsfw"; export const SHOW_UNAVAILABLE = "showUnavailable"; -export const GET_THEMES = "theme"; +export const THEME = "theme"; +export const THEMES = "themes"; diff --git a/ui/js/lbry.js b/ui/js/lbry.js index a2f48c064..9591038e3 100644 --- a/ui/js/lbry.js +++ b/ui/js/lbry.js @@ -19,7 +19,8 @@ let lbry = { customLighthouseServers: [], showDeveloperMenu: false, language: "en", - theme: "light", + theme: { name: "light", path: "" }, + themes: [], }, }; diff --git a/ui/js/page/settings/index.js b/ui/js/page/settings/index.js index c74b918af..798f31c4a 100644 --- a/ui/js/page/settings/index.js +++ b/ui/js/page/settings/index.js @@ -1,8 +1,18 @@ import React from "react"; import { connect } from "react-redux"; import { doClearCache } from "actions/app"; -import { doSetDaemonSetting, doSetClientSetting } from "actions/settings"; -import { selectDaemonSettings, selectShowNsfw } from "selectors/settings"; +import { + doSetDaemonSetting, + doSetClientSetting, + doSetTheme, + doGetThemes, +} from "actions/settings"; +import { + selectDaemonSettings, + selectShowNsfw, + selectThemes, + selectTheme, +} from "selectors/settings"; import SettingsPage from "./view"; const select = state => ({ @@ -14,6 +24,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()), }); export default connect(select, perform)(SettingsPage); diff --git a/ui/js/page/settings/view.jsx b/ui/js/page/settings/view.jsx index f2f89b0a2..02f64957d 100644 --- a/ui/js/page/settings/view.jsx +++ b/ui/js/page/settings/view.jsx @@ -21,7 +21,7 @@ class SettingsPage extends React.PureComponent { language: lbry.getClientSetting(settings.LANGUAGE), clearingCache: false, theme: lbry.getClientSetting(settings.THEME), - themes: [], + themes: lbry.getClientSetting(settings.THEMES), }; } @@ -39,8 +39,7 @@ class SettingsPage extends React.PureComponent { } getThemes() { - //const { themes } = this.props.getThemes().data; - //this.setState({ themes }); + this.props.getThemes(); } setDaemonSetting(name, value) { @@ -53,8 +52,7 @@ class SettingsPage extends React.PureComponent { } setTheme(value) { - //setTheme(value); - //this.props.setClientSetting("theme", value); + this.props.setTheme(value); } onRunOnStartChange(event) { @@ -121,7 +119,6 @@ class SettingsPage extends React.PureComponent { onShowUnavailableChange(event) {} componentDidMount() { - const { themes } = this.state; this.getThemes(); } @@ -252,8 +249,10 @@ class SettingsPage extends React.PureComponent { defaultValue={lbry.getClientSetting("theme")} className="form-field__input--inline" > - {this.state.themes.map((name, index) => - + {this.state.themes.map((theme, index) => + )} diff --git a/ui/js/reducers/settings.js b/ui/js/reducers/settings.js index 4b78284cc..1d5d4cd2a 100644 --- a/ui/js/reducers/settings.js +++ b/ui/js/reducers/settings.js @@ -5,6 +5,7 @@ const reducers = {}; const defaultState = { clientSettings: { showNsfw: lbry.getClientSetting("showNsfw"), + themes: [], }, }; @@ -25,6 +26,12 @@ reducers[types.CLIENT_SETTING_CHANGED] = function(state, action) { }); }; +reducers[types.GET_THEMES] = function(state, action) { + return Object.assign({}, state, { + themes: action.data.themes, + }); +}; + export default function reducer(state = defaultState, action) { const handler = reducers[action.type]; if (handler) return handler(state, action); diff --git a/ui/js/selectors/settings.js b/ui/js/selectors/settings.js index d875ef360..1979e8b17 100644 --- a/ui/js/selectors/settings.js +++ b/ui/js/selectors/settings.js @@ -21,3 +21,13 @@ export const selectShowNsfw = createSelector( selectClientSettings, clientSettings => !!clientSettings.showNsfw ); + +export const selectThemes = createSelector( + selectClientSettings, + clientSettings => clientSettings.themes +); + +export const selectTheme = createSelector( + selectClientSettings, + clientSettings => clientSettings.theme +); From 1233b2d4fde8c38e9bb98781d626c9c91bbdbf6c Mon Sep 17 00:00:00 2001 From: btzr-io Date: Sat, 19 Aug 2017 16:03:40 -0600 Subject: [PATCH 32/47] load initial theme --- ui/js/actions/settings.js | 23 ++++++++++++----------- ui/js/component/app/index.js | 4 +++- ui/js/component/app/view.jsx | 3 +++ 3 files changed, 18 insertions(+), 12 deletions(-) diff --git a/ui/js/actions/settings.js b/ui/js/actions/settings.js index a51ceb7b4..4e360313c 100644 --- a/ui/js/actions/settings.js +++ b/ui/js/actions/settings.js @@ -45,16 +45,18 @@ export function doSetClientSetting(key, value) { }; } -export function doSetTheme(name) { +export function doSetTheme(themeName) { + const name = themeName || "light"; const link = document.getElementById("theme"); return function(dispatch, getState) { const { themes } = getState().settings.clientSettings; const theme = themes.find(theme => theme.name === name); - link.href = theme.path; - - dispatch(doSetClientSetting("theme", theme)); + if (theme) { + link.href = theme.path; + dispatch(doSetClientSetting("theme", theme)); + } }; } @@ -64,14 +66,13 @@ export function doGetThemes() { // Get all .css files const files = readdirSync(path).filter(file => extname(file) === ".css"); - // Get theme name - const themes = files.map(file => ({ - name: file.replace(".css", ""), - path: `./themes/${file}`, - fullPath: `${path}/${file}`, - })); - return function(dispatch, getState) { + // Find themes + const themes = files.map(file => ({ + name: file.replace(".css", ""), + path: `./themes/${file}`, + })); + dispatch(doSetClientSetting("themes", themes)); }; } diff --git a/ui/js/component/app/index.js b/ui/js/component/app/index.js index 252fdf783..6e3c9bbca 100644 --- a/ui/js/component/app/index.js +++ b/ui/js/component/app/index.js @@ -7,9 +7,10 @@ import { doAlertError, doRecordScroll, } from "actions/app"; -import { doFetchRewardedContent } from "actions/content"; +import { doFetchRewardedContent } from "actions/content"; import { doUpdateBalance } from "actions/wallet"; +import { doSetTheme } from "actions/settings"; import { selectWelcomeModalAcknowledged } from "selectors/app"; import { selectUser } from "selectors/user"; import App from "./view"; @@ -28,6 +29,7 @@ const perform = dispatch => ({ updateBalance: balance => dispatch(doUpdateBalance(balance)), fetchRewardedContent: () => dispatch(doFetchRewardedContent()), recordScroll: scrollPosition => dispatch(doRecordScroll(scrollPosition)), + setTheme: name => dispatch(doSetTheme(name)), }); export default connect(select, perform)(App); diff --git a/ui/js/component/app/view.jsx b/ui/js/component/app/view.jsx index 32cb74247..289162068 100644 --- a/ui/js/component/app/view.jsx +++ b/ui/js/component/app/view.jsx @@ -11,6 +11,7 @@ class App extends React.PureComponent { checkUpgradeAvailable, updateBalance, fetchRewardedContent, + setTheme, } = this.props; document.addEventListener("unhandledError", event => { @@ -30,6 +31,8 @@ class App extends React.PureComponent { this.scrollListener = () => this.props.recordScroll(window.scrollY); window.addEventListener("scroll", this.scrollListener); + + setTheme(); } componentWillUnmount() { From 2db24b059f37bc6202df56e51564150ffbe539cd Mon Sep 17 00:00:00 2001 From: btzr-io Date: Sat, 19 Aug 2017 17:59:48 -0600 Subject: [PATCH 33/47] rewrite action -> doSetTheme --- ui/dist/themes/light.css | 6 +++++ ui/js/actions/app.js | 21 +++++++++++++++++- ui/js/actions/settings.js | 43 +++++++++++++----------------------- ui/js/component/app/index.js | 2 ++ ui/js/component/app/view.jsx | 5 +++++ ui/js/lbry.js | 2 +- ui/js/page/settings/index.js | 9 +------- ui/js/page/settings/view.jsx | 8 +------ ui/js/reducers/settings.js | 10 +++------ ui/js/selectors/settings.js | 10 --------- 10 files changed, 54 insertions(+), 62 deletions(-) create mode 100644 ui/dist/themes/light.css diff --git a/ui/dist/themes/light.css b/ui/dist/themes/light.css new file mode 100644 index 000000000..c41b966f8 --- /dev/null +++ b/ui/dist/themes/light.css @@ -0,0 +1,6 @@ +:root { + --color-primary: #155B4A; + --color-canvas: #f5f5f5; + --color-bg: #ffffff; + --color-bg-alt: #D9D9D9; +} diff --git a/ui/js/actions/app.js b/ui/js/actions/app.js index e70e9767f..56d7eab7b 100644 --- a/ui/js/actions/app.js +++ b/ui/js/actions/app.js @@ -12,7 +12,7 @@ import { selectHistoryForward, } from "selectors/app"; import { doSearch } from "actions/search"; -import { doFetchDaemonSettings } from "actions/settings"; +import { doFetchDaemonSettings, doSetClientSetting } from "actions/settings"; import { doAuthenticate } from "actions/user"; import { doFileList } from "actions/file_info"; import { toQueryString } from "util/query_params"; @@ -351,3 +351,22 @@ export function doQuit() { remote.app.quit(); }; } + +export function doGetThemes() { + const dir = `${remote.app.getAppPath()}/dist/themes`; + + // Get all .css files + const files = fs + .readdirSync(dir) + .filter(file => path.extname(file) === ".css"); + + return function(dispatch, getState) { + // Find themes + const themes = files.map(file => ({ + name: file.replace(".css", ""), + path: `./themes/${file}`, + })); + + dispatch(doSetClientSetting("themes", themes)); + }; +} diff --git a/ui/js/actions/settings.js b/ui/js/actions/settings.js index 4e360313c..313b9e1b8 100644 --- a/ui/js/actions/settings.js +++ b/ui/js/actions/settings.js @@ -1,8 +1,6 @@ import * as types from "constants/action_types"; +import * as settings from "constants/settings"; import lbry from "lbry"; -import { readdirSync } from "fs"; -import { extname } from "path"; -import { remote } from "electron"; export function doFetchDaemonSettings() { return function(dispatch, getState) { @@ -45,34 +43,23 @@ export function doSetClientSetting(key, value) { }; } -export function doSetTheme(themeName) { - const name = themeName || "light"; - const link = document.getElementById("theme"); - +export function doSetTheme(name) { return function(dispatch, getState) { - const { themes } = getState().settings.clientSettings; - const theme = themes.find(theme => theme.name === name); + const last = lbry.getClientSetting(settings.THEME); + const find = name => themes.find(theme => theme.name === name); - if (theme) { + // Get themes + const themes = lbry.getClientSetting(settings.THEMES); + + // Find theme + const theme = find(name) || find(last) || find("light"); + + if (theme.path) { + // update theme + const link = document.getElementById("theme"); link.href = theme.path; - dispatch(doSetClientSetting("theme", theme)); + + dispatch(doSetClientSetting(settings.THEME, theme.name)); } }; } - -export function doGetThemes() { - const path = `${remote.app.getAppPath()}/dist/themes`; - - // Get all .css files - const files = readdirSync(path).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("themes", themes)); - }; -} diff --git a/ui/js/component/app/index.js b/ui/js/component/app/index.js index 6e3c9bbca..cf6f89986 100644 --- a/ui/js/component/app/index.js +++ b/ui/js/component/app/index.js @@ -6,6 +6,7 @@ import { doOpenModal, doAlertError, doRecordScroll, + doGetThemes, } from "actions/app"; import { doFetchRewardedContent } from "actions/content"; @@ -29,6 +30,7 @@ const perform = dispatch => ({ updateBalance: balance => dispatch(doUpdateBalance(balance)), fetchRewardedContent: () => dispatch(doFetchRewardedContent()), recordScroll: scrollPosition => dispatch(doRecordScroll(scrollPosition)), + getThemes: () => dispatch(doGetThemes()), setTheme: name => dispatch(doSetTheme(name)), }); diff --git a/ui/js/component/app/view.jsx b/ui/js/component/app/view.jsx index 289162068..e28667c08 100644 --- a/ui/js/component/app/view.jsx +++ b/ui/js/component/app/view.jsx @@ -11,6 +11,7 @@ class App extends React.PureComponent { checkUpgradeAvailable, updateBalance, fetchRewardedContent, + getThemes, setTheme, } = this.props; @@ -32,6 +33,10 @@ class App extends React.PureComponent { window.addEventListener("scroll", this.scrollListener); + // Load themes + getThemes(); + + // Select theme setTheme(); } diff --git a/ui/js/lbry.js b/ui/js/lbry.js index 9591038e3..2524c738b 100644 --- a/ui/js/lbry.js +++ b/ui/js/lbry.js @@ -19,7 +19,7 @@ let lbry = { customLighthouseServers: [], showDeveloperMenu: false, language: "en", - theme: { name: "light", path: "" }, + theme: "light", themes: [], }, }; diff --git a/ui/js/page/settings/index.js b/ui/js/page/settings/index.js index 798f31c4a..5764e9dac 100644 --- a/ui/js/page/settings/index.js +++ b/ui/js/page/settings/index.js @@ -5,14 +5,8 @@ import { doSetDaemonSetting, doSetClientSetting, doSetTheme, - doGetThemes, } from "actions/settings"; -import { - selectDaemonSettings, - selectShowNsfw, - selectThemes, - selectTheme, -} from "selectors/settings"; +import { selectDaemonSettings, selectShowNsfw } from "selectors/settings"; import SettingsPage from "./view"; const select = state => ({ @@ -25,7 +19,6 @@ const perform = dispatch => ({ clearCache: () => dispatch(doClearCache()), setClientSetting: (key, value) => dispatch(doSetClientSetting(key, value)), setTheme: name => dispatch(doSetTheme(name)), - getThemes: () => dispatch(doGetThemes()), }); export default connect(select, perform)(SettingsPage); diff --git a/ui/js/page/settings/view.jsx b/ui/js/page/settings/view.jsx index 02f64957d..be847a69a 100644 --- a/ui/js/page/settings/view.jsx +++ b/ui/js/page/settings/view.jsx @@ -38,10 +38,6 @@ class SettingsPage extends React.PureComponent { setTimeout(clear, 1000, { once: true }); } - getThemes() { - this.props.getThemes(); - } - setDaemonSetting(name, value) { this.props.setDaemonSetting(name, value); } @@ -118,9 +114,7 @@ class SettingsPage extends React.PureComponent { onShowUnavailableChange(event) {} - componentDidMount() { - this.getThemes(); - } + componentDidMount() {} render() { const { daemonSettings } = this.props; diff --git a/ui/js/reducers/settings.js b/ui/js/reducers/settings.js index 1d5d4cd2a..6dc59a068 100644 --- a/ui/js/reducers/settings.js +++ b/ui/js/reducers/settings.js @@ -1,11 +1,13 @@ import * as types from "constants/action_types"; +import * as settings from "constants/settings"; import lbry from "lbry"; const reducers = {}; const defaultState = { clientSettings: { showNsfw: lbry.getClientSetting("showNsfw"), - themes: [], + theme: lbry.getClientSetting(settings.THEME), + themes: lbry.getClientSetting(settings.THEMES), }, }; @@ -26,12 +28,6 @@ reducers[types.CLIENT_SETTING_CHANGED] = function(state, action) { }); }; -reducers[types.GET_THEMES] = function(state, action) { - return Object.assign({}, state, { - themes: action.data.themes, - }); -}; - export default function reducer(state = defaultState, action) { const handler = reducers[action.type]; if (handler) return handler(state, action); diff --git a/ui/js/selectors/settings.js b/ui/js/selectors/settings.js index 1979e8b17..d875ef360 100644 --- a/ui/js/selectors/settings.js +++ b/ui/js/selectors/settings.js @@ -21,13 +21,3 @@ export const selectShowNsfw = createSelector( selectClientSettings, clientSettings => !!clientSettings.showNsfw ); - -export const selectThemes = createSelector( - selectClientSettings, - clientSettings => clientSettings.themes -); - -export const selectTheme = createSelector( - selectClientSettings, - clientSettings => clientSettings.theme -); From 4ddecf2aaa87b720d664c2f1ab3d9a8f2b07a929 Mon Sep 17 00:00:00 2001 From: btzr-io Date: Sat, 19 Aug 2017 23:58:03 -0600 Subject: [PATCH 34/47] implement dark theme --- ui/dist/themes/dark.css | 33 ++++++++++++++++++++++++++++++ ui/js/component/app/view.jsx | 10 ++++----- ui/scss/_gui.scss | 1 + ui/scss/_vars.scss | 6 ++++++ ui/scss/component/_form-field.scss | 5 +++++ ui/scss/component/_header.scss | 3 ++- 6 files changed, 51 insertions(+), 7 deletions(-) create mode 100644 ui/dist/themes/dark.css diff --git a/ui/dist/themes/dark.css b/ui/dist/themes/dark.css new file mode 100644 index 000000000..e83cab517 --- /dev/null +++ b/ui/dist/themes/dark.css @@ -0,0 +1,33 @@ +: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: rgb(15, 21, 23, 0.85); + + /* Text */ + --text-color: #FFF; + + /* Input */ + --input-bg: transparent; + --input-active-bg: rgba(0,0,0, 0.65); + --input-border-color: rgba(255,255,255, 0.25); + + /* Search */ + --search-bg: rgba(0,0,0, 0.45); + --search-active-bg: rgba(0,0,0, 0.75); + --search-border: 1px solid rgba(0,0,0, 0.5); + + /* Select */ + --select-bg: var(--color-bg-alt); + + /* Header */ + --header-color: #EEE; + --header-active-color: #FFF; +} diff --git a/ui/js/component/app/view.jsx b/ui/js/component/app/view.jsx index e28667c08..6efe7db7e 100644 --- a/ui/js/component/app/view.jsx +++ b/ui/js/component/app/view.jsx @@ -19,6 +19,10 @@ class App extends React.PureComponent { alertError(event.detail); }); + getThemes(); + + setTheme(); + if (!this.props.upgradeSkipped) { checkUpgradeAvailable(); } @@ -32,12 +36,6 @@ class App extends React.PureComponent { this.scrollListener = () => this.props.recordScroll(window.scrollY); window.addEventListener("scroll", this.scrollListener); - - // Load themes - getThemes(); - - // Select theme - setTheme(); } componentWillUnmount() { diff --git a/ui/scss/_gui.scss b/ui/scss/_gui.scss index 1c484c68b..7e4d93f1d 100644 --- a/ui/scss/_gui.scss +++ b/ui/scss/_gui.scss @@ -7,6 +7,7 @@ html } body { + color: var(--text-color); font-family: 'Source Sans Pro', sans-serif; line-height: var(--font-line-height); } diff --git a/ui/scss/_vars.scss b/ui/scss/_vars.scss index 3148abd7e..95e394126 100644 --- a/ui/scss/_vars.scss +++ b/ui/scss/_vars.scss @@ -19,6 +19,7 @@ --color-bg: #ffffff; --color-bg-alt: #D9D9D9; + /* Misc */ --content-max-width: 1000px; --nsfw-blur-intensity: 20px; @@ -50,9 +51,14 @@ /* Input */ --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; diff --git a/ui/scss/component/_form-field.scss b/ui/scss/component/_form-field.scss index 841d58d62..8e2547c54 100644 --- a/ui/scss/component/_form-field.scss +++ b/ui/scss/component/_form-field.scss @@ -46,6 +46,8 @@ input[type="text"].input-copyable { padding-left: 5px; padding-right: 5px; height: $spacing-vertical; + background: var(--select-bg); + color: var(--select-color); &:focus { outline: var(--input-border-size) solid var(--color-primary); } @@ -67,6 +69,8 @@ input[type="text"].input-copyable { padding-right: 1px; box-sizing: border-box; -webkit-appearance: none; + background: var(--input-bg); + color: var(--input-color); &[readonly] { background-color: #bbb; } @@ -82,6 +86,7 @@ input[type="text"].input-copyable { line-height: 1; padding-top: $spacing-vertical * 1/3; padding-bottom: $spacing-vertical * 1/3; + &.form-field__input--error { border-color: var(--color-error); } diff --git a/ui/scss/component/_header.scss b/ui/scss/component/_header.scss index 0d01abe1c..f27cb4e00 100644 --- a/ui/scss/component/_header.scss +++ b/ui/scss/component/_header.scss @@ -45,8 +45,9 @@ padding-right: 5px; @include border-radius(2px); border: var(--search-border); - transition: all var(--transition-duration) var(--transition-type); + transition: box-shadow var(--transition-duration) var(--transition-type); &:focus { + background: var(--search-active-bg); color: var(--search-active-color); box-shadow: var(--box-shadow-focus); border-color: var(--color-primary); From af46f8a73c4860969f9eac5da24287a566c132a7 Mon Sep 17 00:00:00 2001 From: btzr-io Date: Sun, 20 Aug 2017 09:52:09 -0600 Subject: [PATCH 35/47] remove unused constant --- ui/js/constants/action_types.js | 3 --- 1 file changed, 3 deletions(-) diff --git a/ui/js/constants/action_types.js b/ui/js/constants/action_types.js index 942ea11ee..78d12d2cf 100644 --- a/ui/js/constants/action_types.js +++ b/ui/js/constants/action_types.js @@ -85,9 +85,6 @@ export const SEARCH_CANCELLED = "SEARCH_CANCELLED"; export const DAEMON_SETTINGS_RECEIVED = "DAEMON_SETTINGS_RECEIVED"; export const CLIENT_SETTING_CHANGED = "CLIENT_SETTING_CHANGED"; -// THEMES -export const GET_THEMES = "GET_THEMES"; - // User export const AUTHENTICATION_STARTED = "AUTHENTICATION_STARTED"; export const AUTHENTICATION_SUCCESS = "AUTHENTICATION_SUCCESS"; From d8f71eba6d84a534b0ef784a98d0b8b3610eebaa Mon Sep 17 00:00:00 2001 From: btzr-io Date: Sun, 20 Aug 2017 11:07:26 -0600 Subject: [PATCH 36/47] minor fix for dark theme --- ui/dist/themes/dark.css | 12 ++++++++++-- ui/scss/component/_form-field.scss | 10 +++++++--- ui/scss/component/_header.scss | 1 + 3 files changed, 18 insertions(+), 5 deletions(-) diff --git a/ui/dist/themes/dark.css b/ui/dist/themes/dark.css index e83cab517..088d667fc 100644 --- a/ui/dist/themes/dark.css +++ b/ui/dist/themes/dark.css @@ -16,18 +16,26 @@ /* Input */ --input-bg: transparent; - --input-active-bg: rgba(0,0,0, 0.65); + --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.5); + --search-border: 1px solid rgba(0,0,0, 0.25); /* Select */ --select-bg: var(--color-bg-alt); + --tab-color: #757575; + --tab-active-color: #CCC; /* Header */ --header-color: #EEE; --header-active-color: #FFF; + + /* Table */ + --table-border: 0; + --table-item-even: var(--color-bg-alt); + --table-item-odd: transparent; } diff --git a/ui/scss/component/_form-field.scss b/ui/scss/component/_form-field.scss index 8e2547c54..7fc276ddd 100644 --- a/ui/scss/component/_form-field.scss +++ b/ui/scss/component/_form-field.scss @@ -21,7 +21,9 @@ } input[type="text"].input-copyable { - border: 1px solid var(--input-border-color); + 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; @@ -29,7 +31,7 @@ input[type="text"].input-copyable { padding-left: 5px; padding-right: 5px; width: 100%; - &:focus { border-color: black; } + &:focus { border-color: var(--color-primary); } } .form-field { @@ -72,7 +74,7 @@ input[type="text"].input-copyable { background: var(--input-bg); color: var(--input-color); &[readonly] { - background-color: #bbb; + background-color: var(--input-bg); } } @@ -107,6 +109,7 @@ input[type="text"].input-copyable { input[type="search"]:focus, input[type="date"]:focus { border-color: var(--color-primary); + background: var(--input-active-bg); } textarea { @@ -119,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; diff --git a/ui/scss/component/_header.scss b/ui/scss/component/_header.scss index f27cb4e00..e26c2aa9f 100644 --- a/ui/scss/component/_header.scss +++ b/ui/scss/component/_header.scss @@ -68,6 +68,7 @@ nav.sub-header padding: 0 5px; line-height:calc(var(--header-height) - $spacing-vertical - var(--tab-border-size)); color: var(--tab-color); + &:first-child { margin-left: 0; From 66af58940a415767e2534f7228116fb7d08f19e7 Mon Sep 17 00:00:00 2001 From: btzr-io Date: Sun, 20 Aug 2017 12:13:17 -0600 Subject: [PATCH 37/47] tidy up dark theme --- ui/dist/themes/dark.css | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/ui/dist/themes/dark.css b/ui/dist/themes/dark.css index 088d667fc..9c2f6d197 100644 --- a/ui/dist/themes/dark.css +++ b/ui/dist/themes/dark.css @@ -25,8 +25,7 @@ --search-active-bg: rgba(0,0,0, 0.75); --search-border: 1px solid rgba(0,0,0, 0.25); - /* Select */ - --select-bg: var(--color-bg-alt); + /* Tab */ --tab-color: #757575; --tab-active-color: #CCC; From 3c7f1761bbbdd034da0b86f17f16ab2c3b07d617 Mon Sep 17 00:00:00 2001 From: btzr-io Date: Mon, 21 Aug 2017 20:23:38 -0600 Subject: [PATCH 38/47] minor fixes for overall scss / themes --- ui/dist/themes/dark.css | 7 ++++++- ui/scss/_gui.scss | 2 +- ui/scss/_vars.scss | 1 + ui/scss/component/_header.scss | 4 ++++ ui/scss/component/_modal.scss | 2 +- 5 files changed, 13 insertions(+), 3 deletions(-) diff --git a/ui/dist/themes/dark.css b/ui/dist/themes/dark.css index 9c2f6d197..d6daa1d38 100644 --- a/ui/dist/themes/dark.css +++ b/ui/dist/themes/dark.css @@ -9,7 +9,7 @@ --color-load-screen-text: #FFF; --color-money: var(--color-primary); --color-meta-light: #757575; - --color-dark-overlay: rgb(15, 21, 23, 0.85); + --color-dark-overlay: rgba(15, 21, 23, 0.85); /* Text */ --text-color: #FFF; @@ -32,9 +32,14 @@ /* Header */ --header-color: #EEE; --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/scss/_gui.scss b/ui/scss/_gui.scss index 7e4d93f1d..59646f480 100644 --- a/ui/scss/_gui.scss +++ b/ui/scss/_gui.scss @@ -94,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 diff --git a/ui/scss/_vars.scss b/ui/scss/_vars.scss index 95e394126..75783d391 100644 --- a/ui/scss/_vars.scss +++ b/ui/scss/_vars.scss @@ -72,6 +72,7 @@ --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); diff --git a/ui/scss/component/_header.scss b/ui/scss/component/_header.scss index e26c2aa9f..4f7eac1e3 100644 --- a/ui/scss/component/_header.scss +++ b/ui/scss/component/_header.scss @@ -18,7 +18,11 @@ 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; } diff --git a/ui/scss/component/_modal.scss b/ui/scss/component/_modal.scss index f367e45f3..7140e6cf8 100644 --- a/ui/scss/component/_modal.scss +++ b/ui/scss/component/_modal.scss @@ -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; From a77a6495b06c96630fdee45d1a919aae9b165a2e Mon Sep 17 00:00:00 2001 From: btzr-io Date: Mon, 21 Aug 2017 20:43:14 -0600 Subject: [PATCH 39/47] tidy up themes --- ui/dist/themes/dark.css | 1 + ui/dist/themes/light.css | 4 +--- 2 files changed, 2 insertions(+), 3 deletions(-) diff --git a/ui/dist/themes/dark.css b/ui/dist/themes/dark.css index d6daa1d38..45b297835 100644 --- a/ui/dist/themes/dark.css +++ b/ui/dist/themes/dark.css @@ -13,6 +13,7 @@ /* Text */ --text-color: #FFF; + --text-selection-bg: rgba(0,150,136, 0.95); /* Input */ --input-bg: transparent; diff --git a/ui/dist/themes/light.css b/ui/dist/themes/light.css index c41b966f8..c95f61136 100644 --- a/ui/dist/themes/light.css +++ b/ui/dist/themes/light.css @@ -1,6 +1,4 @@ :root { + /* Colors */ --color-primary: #155B4A; - --color-canvas: #f5f5f5; - --color-bg: #ffffff; - --color-bg-alt: #D9D9D9; } From 191b95cc2ea9f969f59c10a3249d7d5fea67fd76 Mon Sep 17 00:00:00 2001 From: btzr-io Date: Thu, 24 Aug 2017 10:11:39 -0600 Subject: [PATCH 40/47] load theme on /doDaemonReady --- ui/js/actions/app.js | 22 ++-------------------- ui/js/actions/settings.js | 22 ++++++++++++++++++++++ ui/js/component/app/index.js | 4 ---- ui/js/component/app/view.jsx | 6 ------ 4 files changed, 24 insertions(+), 30 deletions(-) diff --git a/ui/js/actions/app.js b/ui/js/actions/app.js index 56d7eab7b..ac757496a 100644 --- a/ui/js/actions/app.js +++ b/ui/js/actions/app.js @@ -12,7 +12,7 @@ import { selectHistoryForward, } from "selectors/app"; import { doSearch } from "actions/search"; -import { doFetchDaemonSettings, doSetClientSetting } from "actions/settings"; +import { doFetchDaemonSettings, doSetTheme } from "actions/settings"; import { doAuthenticate } from "actions/user"; import { doFileList } from "actions/file_info"; import { toQueryString } from "util/query_params"; @@ -320,6 +320,7 @@ export function doDaemonReady() { type: types.DAEMON_READY, data: { page }, }); + dispatch(doSetTheme()); dispatch(doFetchDaemonSettings()); dispatch(doFileList()); }; @@ -351,22 +352,3 @@ export function doQuit() { remote.app.quit(); }; } - -export function doGetThemes() { - const dir = `${remote.app.getAppPath()}/dist/themes`; - - // Get all .css files - const files = fs - .readdirSync(dir) - .filter(file => path.extname(file) === ".css"); - - return function(dispatch, getState) { - // Find themes - const themes = files.map(file => ({ - name: file.replace(".css", ""), - path: `./themes/${file}`, - })); - - dispatch(doSetClientSetting("themes", themes)); - }; -} diff --git a/ui/js/actions/settings.js b/ui/js/actions/settings.js index 313b9e1b8..064651725 100644 --- a/ui/js/actions/settings.js +++ b/ui/js/actions/settings.js @@ -2,6 +2,11 @@ import * as types from "constants/action_types"; import * as settings from "constants/settings"; import lbry from "lbry"; +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 => { @@ -43,6 +48,23 @@ 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("themes", themes)); + }; +} + export function doSetTheme(name) { return function(dispatch, getState) { const last = lbry.getClientSetting(settings.THEME); diff --git a/ui/js/component/app/index.js b/ui/js/component/app/index.js index cf6f89986..9f13465c7 100644 --- a/ui/js/component/app/index.js +++ b/ui/js/component/app/index.js @@ -6,12 +6,10 @@ import { doOpenModal, doAlertError, doRecordScroll, - doGetThemes, } from "actions/app"; import { doFetchRewardedContent } from "actions/content"; import { doUpdateBalance } from "actions/wallet"; -import { doSetTheme } from "actions/settings"; import { selectWelcomeModalAcknowledged } from "selectors/app"; import { selectUser } from "selectors/user"; import App from "./view"; @@ -30,8 +28,6 @@ const perform = dispatch => ({ updateBalance: balance => dispatch(doUpdateBalance(balance)), fetchRewardedContent: () => dispatch(doFetchRewardedContent()), recordScroll: scrollPosition => dispatch(doRecordScroll(scrollPosition)), - getThemes: () => dispatch(doGetThemes()), - setTheme: name => dispatch(doSetTheme(name)), }); export default connect(select, perform)(App); diff --git a/ui/js/component/app/view.jsx b/ui/js/component/app/view.jsx index 6efe7db7e..32cb74247 100644 --- a/ui/js/component/app/view.jsx +++ b/ui/js/component/app/view.jsx @@ -11,18 +11,12 @@ class App extends React.PureComponent { checkUpgradeAvailable, updateBalance, fetchRewardedContent, - getThemes, - setTheme, } = this.props; document.addEventListener("unhandledError", event => { alertError(event.detail); }); - getThemes(); - - setTheme(); - if (!this.props.upgradeSkipped) { checkUpgradeAvailable(); } From 8b8c9c9da935fd47052fc8d6b3635d48dd3a4fa7 Mon Sep 17 00:00:00 2001 From: btzr-io Date: Thu, 24 Aug 2017 10:14:30 -0600 Subject: [PATCH 41/47] fix settings constant --- ui/js/actions/settings.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/ui/js/actions/settings.js b/ui/js/actions/settings.js index 064651725..52a1fee9d 100644 --- a/ui/js/actions/settings.js +++ b/ui/js/actions/settings.js @@ -61,7 +61,7 @@ export function doGetThemes() { path: `./themes/${file}`, })); - dispatch(doSetClientSetting("themes", themes)); + dispatch(doSetClientSetting(settings.THEMES, themes)); }; } From c257691b57a39feef2b089995f9f0c90332d1a2c Mon Sep 17 00:00:00 2001 From: btzr-io Date: Thu, 24 Aug 2017 10:29:54 -0600 Subject: [PATCH 42/47] move getThemes -> settings -> componentWillMount --- ui/js/page/settings/index.js | 2 ++ ui/js/page/settings/view.jsx | 8 ++++++++ 2 files changed, 10 insertions(+) diff --git a/ui/js/page/settings/index.js b/ui/js/page/settings/index.js index 5764e9dac..8516f55f4 100644 --- a/ui/js/page/settings/index.js +++ b/ui/js/page/settings/index.js @@ -4,6 +4,7 @@ import { doClearCache } from "actions/app"; import { doSetDaemonSetting, doSetClientSetting, + doGetThemes, doSetTheme, } from "actions/settings"; import { selectDaemonSettings, selectShowNsfw } from "selectors/settings"; @@ -19,6 +20,7 @@ const perform = dispatch => ({ clearCache: () => dispatch(doClearCache()), setClientSetting: (key, value) => dispatch(doSetClientSetting(key, value)), setTheme: name => dispatch(doSetTheme(name)), + getThemes: () => dispatch(doGetThemes), }); export default connect(select, perform)(SettingsPage); diff --git a/ui/js/page/settings/view.jsx b/ui/js/page/settings/view.jsx index be847a69a..54dc969a0 100644 --- a/ui/js/page/settings/view.jsx +++ b/ui/js/page/settings/view.jsx @@ -51,6 +51,10 @@ class SettingsPage extends React.PureComponent { this.props.setTheme(value); } + getThemes() { + this.props.getThemes(); + } + onRunOnStartChange(event) { this.setDaemonSetting("run_on_startup", event.target.checked); } @@ -114,6 +118,10 @@ class SettingsPage extends React.PureComponent { onShowUnavailableChange(event) {} + componentWillMount() { + this.getThemes(); + } + componentDidMount() {} render() { From 8e7c783750523a9b60f722b526ffeab2d63c6c8b Mon Sep 17 00:00:00 2001 From: btzr-io Date: Thu, 24 Aug 2017 10:55:24 -0600 Subject: [PATCH 43/47] rewrite fallback for themes --- ui/js/actions/app.js | 4 +++- ui/js/actions/settings.js | 11 ++++++----- 2 files changed, 9 insertions(+), 6 deletions(-) diff --git a/ui/js/actions/app.js b/ui/js/actions/app.js index ac757496a..a3b63578c 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, @@ -320,7 +321,8 @@ export function doDaemonReady() { type: types.DAEMON_READY, data: { page }, }); - dispatch(doSetTheme()); + // Load last theme selected + 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 52a1fee9d..be614c7f5 100644 --- a/ui/js/actions/settings.js +++ b/ui/js/actions/settings.js @@ -67,20 +67,21 @@ export function doGetThemes() { export function doSetTheme(name) { return function(dispatch, getState) { - const last = lbry.getClientSetting(settings.THEME); - const find = name => themes.find(theme => theme.name === name); + // 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 - const theme = find(name) || find(last) || find("light"); + // Find theme and set fallback + const theme = find(name) || find("light"); if (theme.path) { - // update theme + // load css const link = document.getElementById("theme"); link.href = theme.path; + // update theme dispatch(doSetClientSetting(settings.THEME, theme.name)); } }; From 4185f22cb22fe60e82aeab40e210e321d49a703d Mon Sep 17 00:00:00 2001 From: btzr-io Date: Thu, 24 Aug 2017 11:06:21 -0600 Subject: [PATCH 44/47] update dark theme -> header color -> #ccc --- ui/dist/themes/dark.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/ui/dist/themes/dark.css b/ui/dist/themes/dark.css index 45b297835..c32108393 100644 --- a/ui/dist/themes/dark.css +++ b/ui/dist/themes/dark.css @@ -31,7 +31,7 @@ --tab-active-color: #CCC; /* Header */ - --header-color: #EEE; + --header-color: #CCC; --header-active-color: #FFF; --header-button-bg: transparent; From 55cd9123f2f2e6d5ed32f335a572728d35b16f27 Mon Sep 17 00:00:00 2001 From: btzr-io Date: Sat, 26 Aug 2017 13:04:44 -0600 Subject: [PATCH 45/47] fix export / import error --- ui/js/actions/settings.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/ui/js/actions/settings.js b/ui/js/actions/settings.js index 25731e135..6253b1ad7 100644 --- a/ui/js/actions/settings.js +++ b/ui/js/actions/settings.js @@ -88,8 +88,9 @@ export function doSetTheme(name) { // update theme dispatch(doSetClientSetting(settings.THEME, theme.name)); } + }; } - + export function doDownloadLanguage(langFile) { return function(dispatch, getState) { const destinationPath = `app/locales/${langFile}`; From f6857313ad29869b203244d90d2190c7aed0a3dd Mon Sep 17 00:00:00 2001 From: btzr-io Date: Sat, 26 Aug 2017 14:47:37 -0600 Subject: [PATCH 46/47] fix markdown-editor styles --- ui/scss/_vars.scss | 2 + ui/scss/all.scss | 1 + ui/scss/component/_markdown-editor.scss | 125 ++++++++++++++++++++++++ 3 files changed, 128 insertions(+) create mode 100644 ui/scss/component/_markdown-editor.scss diff --git a/ui/scss/_vars.scss b/ui/scss/_vars.scss index 75783d391..6af7932b1 100644 --- a/ui/scss/_vars.scss +++ b/ui/scss/_vars.scss @@ -50,6 +50,8 @@ --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; diff --git a/ui/scss/all.scss b/ui/scss/all.scss index a63c6ec13..7dfd15d34 100644 --- a/ui/scss/all.scss +++ b/ui/scss/all.scss @@ -19,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/_markdown-editor.scss b/ui/scss/component/_markdown-editor.scss new file mode 100644 index 000000000..9691ce7ce --- /dev/null +++ b/ui/scss/component/_markdown-editor.scss @@ -0,0 +1,125 @@ +.CodeMirror { + background: var(--input-active-bg) !important; + border: 1px solid var(--input-border-color) !important; + color: var(--text-color) !important; +} + +.CodeMirror-scroll { + min-height: 300px +} + +.CodeMirror-fullscreen { + background: var(--input-bg); +} + +.CodeMirror .CodeMirror-code .cm-strikethrough { + text-decoration: line-through; +} + +.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; +} + + +/* +.editor-toolbar.fullscreen::before { + background: -webkit-linear-gradient(left, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 100%); +} + +.editor-toolbar.fullscreen::after { + + background: -webkit-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%); +} +*/ + +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; +} From 463d09256f38068f20f62f2dcd982ceee9afb91f Mon Sep 17 00:00:00 2001 From: btzr-io Date: Sat, 26 Aug 2017 14:50:02 -0600 Subject: [PATCH 47/47] tidy up _markdown-styles.scss --- ui/scss/component/_markdown-editor.scss | 26 ------------------------- 1 file changed, 26 deletions(-) diff --git a/ui/scss/component/_markdown-editor.scss b/ui/scss/component/_markdown-editor.scss index 9691ce7ce..a2b311f5b 100644 --- a/ui/scss/component/_markdown-editor.scss +++ b/ui/scss/component/_markdown-editor.scss @@ -4,18 +4,10 @@ color: var(--text-color) !important; } -.CodeMirror-scroll { - min-height: 300px -} - .CodeMirror-fullscreen { background: var(--input-bg); } -.CodeMirror .CodeMirror-code .cm-strikethrough { - text-decoration: line-through; -} - .editor-toolbar { border: 1px solid var(--input-border-color) !important; border-bottom: 0 !important; @@ -25,23 +17,10 @@ border-color: var(--input-border-color) !important; } - .editor-toolbar.fullscreen { background: var(--color-bg) !important; } - -/* -.editor-toolbar.fullscreen::before { - background: -webkit-linear-gradient(left, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 100%); -} - -.editor-toolbar.fullscreen::after { - - background: -webkit-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%); -} -*/ - div.editor-toolbar a { color: var(--text-color) !important; } @@ -52,14 +31,11 @@ div.editor-toolbar a { border-color: transparent !important; } - - .editor-toolbar.disabled-for-preview a:not(.no-disable) { background: transparent !important; border-color: transparent !important; } - .editor-statusbar { color: #959694; } @@ -73,8 +49,6 @@ div.editor-toolbar a { border: 1px solid var(--input-border-color) !important; } - - .editor-preview pre, .editor-preview-side pre { background: #eee;