diff --git a/CHANGELOG.md b/CHANGELOG.md index f1baee4e8..150daf390 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -21,7 +21,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/). * Reverse Order & Use System/Location Time/Date ([#2036]https://github.com/lbryio/lbry-desktop/pull/2036) * Limit file type can be uploaded as thumbnail for publishing ([#2034](https://github.com/lbryio/lbry-desktop/pull/2034)) * Change snackbar notification postion to bottom-left ([#2040](https://github.com/lbryio/lbry-desktop/pull/2040)) - + * Use shared colors from lbryio/color project ([#2045](https://github.com/lbryio/lbry-desktop/pull/2045)) ### Fixed * Fixed Transactions filter menu collides with transaction table ([#2005](https://github.com/lbryio/lbry-desktop/pull/2005)) diff --git a/package.json b/package.json index 4d64565d3..5590957e9 100644 --- a/package.json +++ b/package.json @@ -87,6 +87,7 @@ "y18n": "^4.0.0" }, "devDependencies": { + "@lbry/color": "^1.0.2", "axios": "^0.18.0", "babel-eslint": "^8.2.2", "babel-plugin-module-resolver": "^3.1.1", diff --git a/src/main/createWindow.js b/src/main/createWindow.js index 5d4beff05..b26ada7e0 100644 --- a/src/main/createWindow.js +++ b/src/main/createWindow.js @@ -15,7 +15,7 @@ export default appState => { }); const windowConfiguration = { - backgroundColor: '#44b098', + backgroundColor: '#2f9176', minWidth: 950, minHeight: 600, autoHideMenuBar: true, @@ -123,7 +123,7 @@ export default appState => { window.webContents.on('crashed', () => { window = null; }); - + window.webContents.on('new-window', (event, url) => { event.preventDefault(); shell.openExternal(url); diff --git a/src/renderer/component/app/index.js b/src/renderer/component/app/index.js index e68f66443..b5c8a2218 100644 --- a/src/renderer/component/app/index.js +++ b/src/renderer/component/app/index.js @@ -3,6 +3,7 @@ import { selectPageTitle, selectHistoryIndex, selectActiveHistoryEntry } from 'l import { doRecordScroll } from 'redux/actions/navigation'; import { selectUser } from 'lbryinc'; import { doAlertError } from 'redux/actions/app'; +import { selectThemePath } from 'redux/selectors/settings'; import App from './view'; const select = state => ({ @@ -10,6 +11,7 @@ const select = state => ({ user: selectUser(state), currentStackIndex: selectHistoryIndex(state), currentPageAttributes: selectActiveHistoryEntry(state), + theme: selectThemePath(state), }); const perform = dispatch => ({ diff --git a/src/renderer/component/app/view.jsx b/src/renderer/component/app/view.jsx index a23a258ea..c083ba695 100644 --- a/src/renderer/component/app/view.jsx +++ b/src/renderer/component/app/view.jsx @@ -1,7 +1,6 @@ // @flow import React from 'react'; import Router from 'component/router/index'; -import Theme from 'component/theme'; import ModalRouter from 'modal/modalRouter'; import ReactModal from 'react-modal'; import throttle from 'util/throttle'; @@ -15,6 +14,7 @@ type Props = { currentStackIndex: number, currentPageAttributes: { path: string, scrollY: number }, pageTitle: ?string, + theme: string, }; class App extends React.PureComponent { @@ -25,13 +25,16 @@ class App extends React.PureComponent { } componentWillMount() { - const { alertError } = this.props; + const { alertError, theme } = this.props; // TODO: create type for this object // it lives in jsonrpc.js document.addEventListener('unhandledError', (event: any) => { alertError(event.detail); }); + + // $FlowFixMe + document.documentElement.setAttribute('data-theme', theme); } componentDidMount() { @@ -51,12 +54,17 @@ class App extends React.PureComponent { } componentDidUpdate(prevProps: Props) { - const { currentStackIndex: prevStackIndex } = prevProps; - const { currentStackIndex, currentPageAttributes } = this.props; + const { currentStackIndex: prevStackIndex, theme: prevTheme } = prevProps; + const { currentStackIndex, currentPageAttributes, theme } = this.props; if (this.mainContent && currentStackIndex !== prevStackIndex && currentPageAttributes) { this.mainContent.scrollTop = currentPageAttributes.scrollY || 0; } + + if (prevTheme !== theme) { + // $FlowFixMe + document.documentElement.setAttribute('data-theme', theme); + } } componentWillUnmount() { @@ -81,7 +89,6 @@ class App extends React.PureComponent { render() { return (
openContextMenu(e)}> -
diff --git a/src/renderer/component/wunderbar/internal/autocomplete.jsx b/src/renderer/component/wunderbar/internal/autocomplete.jsx index d93af0e3f..653433152 100644 --- a/src/renderer/component/wunderbar/internal/autocomplete.jsx +++ b/src/renderer/component/wunderbar/internal/autocomplete.jsx @@ -184,11 +184,6 @@ export default class Autocomplete extends React.Component { return
; }, menuStyle: { - borderRadius: '3px', - boxShadow: '0 2px 12px rgba(0, 0, 0, 0.1)', - background: 'rgba(255, 255, 255, 0.9)', - padding: '2px 0', - fontSize: '90%', position: 'absolute', overflow: 'hidden', }, @@ -469,7 +464,7 @@ export default class Autocomplete extends React.Component { className: 'wunderbar__menu', // Ignore blur to prevent menu from de-rendering before we can process click onMouseEnter: () => this.setIgnoreBlur(true), - onMouseLeave: () => this.setIgnoreBlur(false), + onMouseLeave: () => this.setIgnoreBlur(false), // uncomment this to inspect styling }); } diff --git a/src/renderer/component/wunderbar/view.jsx b/src/renderer/component/wunderbar/view.jsx index daace0ec9..1510b21c1 100644 --- a/src/renderer/component/wunderbar/view.jsx +++ b/src/renderer/component/wunderbar/view.jsx @@ -100,17 +100,15 @@ class WunderBar extends React.PureComponent { if (suggestion) { if (suggestion.type === 'search') { onSearch(query, resultCount); + } else if (isURIValid(query)) { + const params = getParams(); + const uri = normalizeURI(query); + onSubmit(uri, params); } else { - if (isURIValid(query)) { - const params = getParams(); - const uri = normalizeURI(query); - onSubmit(uri, params); - } else { - this.props.doShowSnackBar({ - message: __('Invalid LBRY URL entered. Only A-Z, a-z, and - allowed.'), - displayType: ['snackbar'], - }) - } + this.props.doShowSnackBar({ + message: __('Invalid LBRY URL entered. Only A-Z, a-z, and - allowed.'), + displayType: ['snackbar'], + }); } return; @@ -125,9 +123,9 @@ class WunderBar extends React.PureComponent { onSubmit(uri, params); } else { this.props.doShowSnackBar({ - message: __('Invalid LBRY URL entered. Only A-Z, a-z, and - allowed.'), - displayType: ['snackbar'], - }) + message: __('Invalid LBRY URL entered. Only A-Z, a-z, and - allowed.'), + displayType: ['snackbar'], + }); } } catch (e) { onSearch(query, resultCount); @@ -176,7 +174,6 @@ class WunderBar extends React.PureComponent { {value} {isHighlighted && ( - {'- '} {type === SEARCH_TYPES.SEARCH && __('Search')} {type === SEARCH_TYPES.CHANNEL && __('View channel')} {type === SEARCH_TYPES.FILE && __('View file')} diff --git a/src/renderer/redux/selectors/settings.js b/src/renderer/redux/selectors/settings.js index 11299c9af..25342088a 100644 --- a/src/renderer/redux/selectors/settings.js +++ b/src/renderer/redux/selectors/settings.js @@ -30,7 +30,7 @@ export const selectThemePath = createSelector( selectIsNight, (theme, automaticDarkModeEnabled, isNight) => { const dynamicTheme = automaticDarkModeEnabled && isNight ? 'dark' : theme; - return `${staticResourcesPath}/themes/${dynamicTheme || 'light'}.css`; + return dynamicTheme || 'light'; } ); diff --git a/src/renderer/scss/_gui.scss b/src/renderer/scss/_gui.scss index 8124440f8..d20a14660 100644 --- a/src/renderer/scss/_gui.scss +++ b/src/renderer/scss/_gui.scss @@ -1,66 +1,31 @@ // Generic html styles used accross the App // component specific styling should go in the component scss file -@font-face { - font-family: 'metropolis-bold'; - src: url('../../../static/font/metropolis/bold.eot'); - src: url('../../../static/font/metropolis/bold.eot?#iefix') format('embedded-opentype'), - url('../../../static/font/metropolis/bold.woff') format('woff'), - url('../../../static/font/metropolis/bold.ttf') format('truetype'), - url('../../../static/font/metropolis/bold.svg#metropolis-bold') format('svg'); - font-weight: normal; - font-style: normal; -} - -@font-face { - font-family: 'metropolis-semibold'; - src: url('../../../static/font/metropolis/semibold.eot'); - src: url('../../../static/font/metropolis/semibold.eot?#iefix') format('embedded-opentype'), - url('../../../static/font/metropolis/semibold.woff') format('woff'), - url('../../../static/font/metropolis/semibold.ttf') format('truetype'), - url('../../../static/font/metropolis/semibold.svg#metropolis-semibold') format('svg'); - font-weight: normal; - font-style: normal; -} - -@font-face { - font-family: 'metropolis-medium'; - src: url('../../../static/font/metropolis/medium.eot'); - src: url('../../../static/font/metropolis/medium.eot?#iefix') format('embedded-opentype'), - url('../../../static/font/metropolis/medium.woff') format('woff'), - url('../../../static/font/metropolis/medium.ttf') format('truetype'), - url('../../../static/font/metropolis/medium.svg#metropolis-medium') format('svg'); - font-weight: normal; - font-style: normal; -} - html { + background-color: $lbry-white; + font-family: 'Inter UI', sans-serif; height: 100%; } body { - font-family: 'metropolis-medium'; - font-weight: 400; + color: $lbry-black; font-size: 16px; - line-height: 1.5; - color: var(--text-color); + font-weight: 400; height: 100%; + line-height: 1.5; overflow: hidden; } -* { - box-sizing: border-box; -} - code { - font: 1.5em Consolas, 'Lucida Console', 'Source Sans', monospace; - background-color: var(--color-bg-alt); + background-color: $lbry-gray-1; + font-family: Consolas, 'Lucida Console', 'Source Sans', monospace; + font-size: 1.5em; } -// Without this buttons don't have the Metropolis font +// Without this buttons do not have the app font button { - font-weight: inherit; font-family: inherit; + font-weight: inherit; } ul { @@ -69,15 +34,20 @@ ul { } input { - border-bottom: var(--input-border-size) dotted var(--input-border-color); - color: var(--input-color); - line-height: 1; - cursor: text; background-color: transparent; + border-bottom: var(--input-border-size) dotted $lbry-gray-5; + color: inherit; // $lbry-black; + cursor: text; + line-height: 1; + + &::placeholder { + color: inherit; + opacity: 0.3; + } - &[type='radio'], &[type='checkbox'], &[type='file'], + &[type='radio'], &[type='select'] { cursor: pointer; } @@ -85,39 +55,36 @@ input { &[type='file'] { border-bottom: none; } + &.input-copyable { + background-color: rgba($lbry-gray-1, 0.3); + border: 1px dashed $lbry-gray-1; + color: $lbry-gray-5; flex: 1; - background: var(--input-copyable-bg); - color: var(--input-copyable-color); padding: 10px 16px; - border: 1px dashed var(--input-copyable-border); text-overflow: ellipsis; } &:not(.input-copyable):not(.wunderbar__input):not(:placeholder-shown):not(:disabled) { &:hover { - border-color: var(--input-hover-border-color); + border-color: rgba($lbry-black, 0.8); } - border-bottom: var(--input-border-size) solid var(--input-border-color); + + border-bottom: var(--input-border-size) solid $lbry-gray-5; } &:disabled { - color: var(--input-disabled-color); - border-bottom: var(--input-border-size) solid var(--input-disabled-color); + border-bottom: var(--input-border-size) solid $lbry-gray-3; + color: $lbry-gray-3; cursor: default; } } textarea { - border: 1px solid var(--color-divider); + border: 1px solid $lbry-gray-2; font-size: 0.8em; - width: 100%; padding: $spacing-vertical * 1/3; -} - -input::placeholder { - color: var(--input-placeholder-color); - opacity: 0.5; + width: 100%; } label[for] { @@ -129,42 +96,44 @@ button + input { } dl { - width: 100%; - overflow: hidden; - padding: 0; margin: 0; + padding: 0; + overflow-x: scroll; + overflow-y: hidden; + width: 100%; } dt { + margin: 0; + padding: 0; + float: left; width: 20%; - padding: 0; - margin: 0; } dd { + margin: 0; + padding: 0; + float: left; width: 80%; - padding: 0; - margin: 0; } -p { - &:not(:first-of-type) { - margin-top: $spacing-vertical * 1/3; - } +p:not(:first-of-type) { + margin-top: $spacing-vertical * 1/3; } .page { - z-index: 0; - position: absolute; top: var(--header-height); left: 0; - right: 0; bottom: 0; + right: 0; + + background-color: rgba($lbry-gray-1, 0.3); display: flex; - background-color: var(--color-bg); + position: absolute; + z-index: 0; @media only screen and (min-width: $medium-breakpoint) { grid-template-columns: var(--side-nav-width-m) auto; @@ -175,46 +144,43 @@ p { } } -/* - Page content -*/ +// Page content .content { flex: 1; overflow: auto; } .main { - padding: $spacing-width $spacing-width; margin: auto; + padding: $spacing-width $spacing-width; overflow: hidden; } .main--contained { - max-width: 1000px; margin: auto; + max-width: 1000px; } .main--no-padding { - padding-left: 0; - padding-right: 0; padding-top: 0; + padding-right: 0; + padding-left: 0; margin: 0; } .main--extra-padding { - padding-left: 100px; padding-right: 100px; + padding-left: 100px; } .main--for-content { - padding: $spacing-width * 2/3; display: flex; + padding: $spacing-width * 2/3; justify-content: center; } .page__header { - padding: $spacing-vertical * 2/3; - padding-bottom: 0; + padding: $spacing-vertical * 2/3 $spacing-vertical * 2/3 0 $spacing-vertical * 2/3; } .page__title { @@ -222,11 +188,11 @@ p { } .page__empty { - margin-top: 200px; - text-align: center; + align-items: center; display: flex; flex-direction: column; - align-items: center; + margin-top: 200px; + text-align: center; } .columns { @@ -234,8 +200,8 @@ p { justify-content: space-between; > * { - flex-grow: 1; flex-basis: 0; + flex-grow: 1; &:not(:first-of-type):not(:last-of-type) { margin: 0 $spacing-vertical / 3; @@ -251,10 +217,10 @@ p { } } -/* Custom text selection */ +// Custom text selection *::selection { - background: var(--text-selection-bg); - color: var(--text-selection-color); + background-color: $lbry-teal-3; + color: $lbry-white; } .credit-amount { @@ -263,44 +229,48 @@ p { } .credit-amount--large { - font-family: 'metropolis-semibold'; font-size: 36px; + font-weight: 600; } .credit-amount--file-page { - font-family: 'metropolis-bold'; border-radius: 5px; + font-weight: 700; padding: 5px; } .credit-amount--free { - color: var(--color-credit-free); + &:not(.credit-amount--file-page) { + color: $lbry-blue-5; + } &.credit-amount--file-page { - color: var(--color-dark-blue); - background-color: var(--color-secondary); + background-color: $lbry-blue-2; + color: $lbry-blue-5; } } .credit-amount--cost { - color: var(--color-credit-price); + &:not(.credit-amount--file-page) { + color: $lbry-gray-5; + } &.credit-amount--file-page { - color: var(--color-black); - background-color: var(--color-yellow); + background-color: $lbry-yellow-3; + color: $lbry-black; } } .credit-amount--inherit { background-color: inherit; color: inherit; - font-weight: inherit; font-size: inherit; + font-weight: inherit; padding: 0; } .divider__horizontal { - border-top: var(--color-divider); + border-top: $lbry-gray-2; margin: 16px 0; } @@ -309,8 +279,8 @@ p { } .disabled { - pointer-events: none; opacity: 0.5; + pointer-events: none; } .column { @@ -322,31 +292,33 @@ p { } .truncated-text { - //display: inline-block; display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; } .busy-indicator__loader { - background: url('../../../static/img/busy.gif') no-repeat center center; - display: inline-block; - margin: -1em 0; min-width: 16px; min-height: 8px; - vertical-align: middle; + margin: -1em 0; padding: 0 30px; - &:last-child { - padding-right: 2px; - } + + background: url('../../../static/img/busy.gif') no-repeat center center; + display: inline-block; + vertical-align: middle; + &:first-child { padding-left: 2px; } + + &:last-child { + padding-right: 2px; + } } .help { + color: $lbry-gray-5; font-size: 12px; - color: var(--color-help); } .help--padded { @@ -354,35 +326,38 @@ p { } .meta { + color: $lbry-gray-1; font-size: 0.8em; - color: var(--color-meta-light); } .empty { - color: var(--color-meta-light); + color: $lbry-gray-5; font-style: italic; } .qr-code { - border: 3px solid var(--color-white); - height: 134px; width: 134px; + height: 134px; + border: 3px solid $lbry-white; + &.qr-code--right-padding { margin-right: $spacing-vertical * 2/3; } + &.qr-code--top-padding { margin-top: $spacing-vertical * 2/3; } } .error-text { - color: var(--color-error); + color: $lbry-red-5; } .thumbnail-preview { - height: var(--thumbnail-preview-height); width: var(--thumbnail-preview-width); - background-size: cover; - background-repeat: no-repeat; + height: var(--thumbnail-preview-height); + background-position: 50% 50%; + background-repeat: no-repeat; + background-size: cover; } diff --git a/src/renderer/scss/_reset.scss b/src/renderer/scss/_reset.scss index b9e3eca1c..7f36b508c 100644 --- a/src/renderer/scss/_reset.scss +++ b/src/renderer/scss/_reset.scss @@ -1,3 +1,7 @@ +* { + box-sizing: border-box; +} + body, div, dl, @@ -28,22 +32,26 @@ iframe { margin: 0; padding: 0; } + :focus { outline: 0; } + input::-webkit-search-cancel-button { - /* Remove default */ - -webkit-appearance: none; + -webkit-appearance: none; // Remove default } + table { border-collapse: collapse; border-spacing: 0; } + fieldset, -img, -iframe { - border: 0; +iframe, +img { + border: none; } + h1, h2, h3, @@ -52,28 +60,38 @@ h5, h6 { font-weight: normal; } + ol, ul { list-style-position: inside; + > li { list-style-position: inside; } } + input, -textarea, -select { +select, +textarea { + border: none; font-family: inherit; font-size: inherit; font-weight: inherit; - border: 0 none; } + img { width: auto; height: auto; + max-width: 100%; + max-height: 100%; vertical-align: middle; - -ms-interpolation-mode: bicubic; } + a { color: inherit; text-decoration: none; } + +button:disabled { + cursor: default; +} diff --git a/src/renderer/scss/_type.scss b/src/renderer/scss/_type.scss new file mode 100644 index 000000000..c2b17b631 --- /dev/null +++ b/src/renderer/scss/_type.scss @@ -0,0 +1,130 @@ +@font-face { + font-family: 'Inter UI'; + font-style: normal; + font-weight: 400; + src: url('../../../static/font/inter/variable.woff2') format('woff2-variations'), + url('../../../static/font/inter/400.woff2') format('woff2'), + url('../../../static/font/inter/400.woff') format('woff'); +} + +@font-face { + font-family: 'Inter UI'; + font-style: italic; + font-weight: 400; + src: url('../../../static/font/inter/variable.woff2') format('woff2-variations'), + url('../../../static/font/inter/400i.woff2') format('woff2'), + url('../../../static/font/inter/400i.woff') format('woff'); +} + +@font-face { + font-family: 'Inter UI'; + font-style: normal; + font-weight: 500; + src: url('../../../static/font/inter/variable.woff2') format('woff2-variations'), + url('../../../static/font/inter/500.woff2') format('woff2'), + url('../../../static/font/inter/500.woff') format('woff'); +} + +@font-face { + font-family: 'Inter UI'; + font-style: italic; + font-weight: 500; + src: url('../../../static/font/inter/variable.woff2') format('woff2-variations'), + url('../../../static/font/inter/500i.woff2') format('woff2'), + url('../../../static/font/inter/500i.woff') format('woff'); +} + +@font-face { + font-family: 'Inter UI'; + font-style: normal; + font-weight: 600; + src: url('../../../static/font/inter/variable.woff2') format('woff2-variations'), + url('../../../static/font/inter/600.woff2') format('woff2'), + url('../../../static/font/inter/600.woff') format('woff'); +} + +@font-face { + font-family: 'Inter UI'; + font-style: italic; + font-weight: 600; + src: url('../../../static/font/inter/variable.woff2') format('woff2-variations'), + url('../../../static/font/inter/600i.woff2') format('woff2'), + url('../../../static/font/inter/600i.woff') format('woff'); +} + +@font-face { + font-family: 'Inter UI'; + font-style: normal; + font-weight: 700; + src: url('../../../static/font/inter/variable.woff2') format('woff2-variations'), + url('../../../static/font/inter/700.woff2') format('woff2'), + url('../../../static/font/inter/700.woff') format('woff'); +} + +@font-face { + font-family: 'Inter UI'; + font-style: italic; + font-weight: 700; + src: url('../../../static/font/inter/variable.woff2') format('woff2-variations'), + url('../../../static/font/inter/700i.woff2') format('woff2'), + url('../../../static/font/inter/700i.woff') format('woff'); +} + +@font-face { + font-family: 'Inter UI'; + font-style: normal; + font-weight: 800; + src: url('../../../static/font/inter/variable.woff2') format('woff2-variations'), + url('../../../static/font/inter/800.woff2') format('woff2'), + url('../../../static/font/inter/800.woff') format('woff'); +} + +@font-face { + font-family: 'Inter UI'; + font-style: italic; + font-weight: 800; + src: url('../../../static/font/inter/variable.woff2') format('woff2-variations'), + url('../../../static/font/inter/800i.woff2') format('woff2'), + url('../../../static/font/inter/800i.woff') format('woff'); +} + +@font-face { + font-family: 'Inter UI'; + font-style: normal; + font-weight: 900; + src: url('../../../static/font/inter/variable.woff2') format('woff2-variations'), + url('../../../static/font/inter/900.woff2') format('woff2'), + url('../../../static/font/inter/900.woff') format('woff'); +} + +@font-face { + font-family: 'Inter UI'; + font-style: italic; + font-weight: 900; + src: url('../../../static/font/inter/variable.woff2') format('woff2-variations'), + url('../../../static/font/inter/900i.woff2') format('woff2'), + url('../../../static/font/inter/900i.woff') format('woff'); +} + +/* +Single variable font. +Note that you may want to do something like this to make sure you are serving +constant fonts to older browsers: + +html { + font-family: "Inter UI", sans-serif; +} + +@supports (font-variation-settings: normal) { + html { + font-family: "Inter UI var", sans-serif; + } +} +*/ + +@font-face { + font-family: 'Inter UI Variable'; + font-weight: 400 900; // safe weight range + src: url('../../../static/font/inter/variable.woff2') format('woff2-variations'), + url('../../../static/font/inter/variable.woff2') format('woff2'); +} diff --git a/src/renderer/scss/_vars.scss b/src/renderer/scss/_vars.scss index 9c237bbed..9eb5a5856 100644 --- a/src/renderer/scss/_vars.scss +++ b/src/renderer/scss/_vars.scss @@ -1,6 +1,4 @@ -/* -Both of these should probably die and become variables as well - */ +// Both of these should probably die and become variables as well $spacing-vertical: 24px; $spacing-width: 36px; @@ -8,7 +6,7 @@ $medium-breakpoint: 1279px; $large-breakpoint: 1921px; :root { - /* Widths & spacings */ + // Width & spacing --side-nav-width: 160px; --side-nav-width-m: 240px; --side-nav-width-l: 320px; @@ -17,154 +15,31 @@ $large-breakpoint: 1921px; --video-aspect-ratio: 56.25%; // 9 x 16 --snack-bar-width: 756px; - /* Colors: Brand */ - --color-white: #fff; - --color-black: #000; - --color-grey: #d6d6d6; - --color-grey-light: #f6f6f6; - --color-grey-dark: #888; - --color-primary: #44b098; - --color-primary-dark: #2c6e60; - --color-primary-light: #64c9b2; - --color-secondary: #6afbda; - --color-teal: #19a6a3; - --color-dark-blue: #2f6f61; - --color-light-blue: #49b2e2; - --color-red: #e2495e; - --color-yellow: #fbd55e; - --color-green: #399483; - --color-green-light: #effbe4; - --color-green-blue: #2ec1a8; - --color-purple: #8165b0; - --color-blue-grey: #203049; - --color-red-light: #fff6f6; - - /* Colors */ - --color-divider: #e3e3e3; - --color-help: rgba(0, 0, 0, 0.54); - --color-error: #a94442; - --color-nsfw: #bf4440; - --color-download: var(--color-white); - --color-download-overlay: var(--color-black); - --color-bg: #fafafa; - --color-bg-alt: var(--color-grey-light); - --color-placeholder: var(--color-grey); - --color-search-placeholder: var(--color-placeholder); - --color-credit-free: var(--color-dark-blue); - --color-credit-price: var(--card-text-color); - --color-text-black: #444; - --color-text-white: #efefef; - - /* Shadows */ - --box-shadow-layer: transparent; // 0 2px 4px rgba(0,0,0,0.25); - --box-shadow-button: 0 10px 20px rgba(0, 0, 0, 0.1); - --box-shadow-wunderbar: 0 10px 20px rgba(0, 0, 0, 0.03); - --box-shadow-header: 0px 6px 20px 1px rgba(0, 0, 0, 0.05); - - /* Text */ - --text-color: var(--color-text-black); - --text-color-inverse: var(--color-text-white); - --text-help-color: var(--color-help); + // Text --text-max-width: 660px; --text-link-padding: 4px; - /* Text Selectiom */ - --text-selection-bg: var(--color-primary-light); - --text-selection-color: var(--color-white); - --editor-text-selection-bg: rgba(57, 148, 131, 0.8); - /* Form */ - --form-label-color: rgba(0, 0, 0, 0.54); - - /* Input */ - --input-bg: transparent; - --input-label-color: var(--color-grey-dark); - --input-color: var(--text-color); + // Input --input-border-size: 1px; - --input-border-color: var(--color-grey-dark); - --input-copyable-bg: #f6f6f6; - --input-copyable-color: var(--color-grey-dark); - --input-copyable-border: var(--color-grey); - --input-select-bg-color: var(--color-grey); - --input-select-color: var(--text-color); - --input-switch-color: var(--color-teal); - /* input:disabled */ - --input-disabled-border-color: rgba(0, 0, 0, 0.42); - --input-disabled-color: rgba(0, 0, 0, 0.54); - - /* input:hover */ - --input-hover-border-color: rgba(0, 0, 0, 0.87); - - /* input:placeholder */ - --input-placeholder-color: var(--color-help); - --input-placeholder-opacity: 1; - - /* Select */ - --select-bg: var(--color-bg-alt); - --select-color: var(--text-color); + // Select --select-height: 30px; - /* Button */ - --btn-bg-primary: var(--color-primary); - --btn-color-primary: var(--color-white); - --btn-bg-primary-hover: var(--color-primary-light); - --btn-bg-alt: var(--color-white); - --btn-color-alt: var(--text-color); - --btn-color-inverse: var(--color-primary); - --btn-external-color: var(--color-light-blue); - --btn-bg-secondary: var(--color-teal); - --btn-bg-danger: var(--color-red); - --btn-home-bg-color: var(--color-white); + // Button --btn-radius: 20px; --btn-height: 36px; - /* SnackBar */ - --snackbar-bg-primary: var(--color-primary); - --snackbar-color-primary: var(--text-color-inverse); - - /* Header */ - --header-bg: var(--color-white); - --header-color: var(--color-text); - --header-active-color: rgba(0, 0, 0, 0.85); + // Header --header-height: 60px; - --header-button-bg: transparent; - --header-button-hover-bg: rgba(100, 100, 100, 0.15); - --header-primary-color: var(--color-primary); - /* Header -> search */ - --search-color: #666; - --search-bg-color: #fff; - --search-active-bg-color: var(--color-grey-light); - --search-active-color: var(--header-active-color); - --search-active-shadow: 0 6px 9px -2px var(--color-grey--dark); - --search-item-border-color: transparent; - --search-item-active-color: var(--color-black); + // Header -> search --search-modal-input-height: 70px; - --search-exact-result: #eaeaea; - /* Nav */ - --nav-color: var(--color-grey-dark); - --nav-bg-color: var(--color-grey-light); - - /* Table */ - --table-border: 1px solid var(--color-grey-light); - --table-item-odd: var(--color-grey-light); - --table-item-even: transparent; - - /* Card */ - --card-bg: var(--color-white); - --card-text-color: var(--color-grey-dark); + // Card --card-radius: 2px; --card-max-width: 1000px; - --card-wallet-color: var(--text-color-inverse); - --success-msg-color: var(--color-green); - --success-msg-border: var(--color-green-blue); - --success-msg-bg: var(--color-green-light); - --error-msg-color: var(--color-error); - --error-msg-border: var(--color-error); - --error-msg-bg: var(--color-red-light); - /* File */ + // File --file-tile-media-height: 125px; --file-tile-media-width: calc(125px * (16 / 9)); --file-tile-media-height-small: 60px; @@ -175,30 +50,14 @@ $large-breakpoint: 1921px; --recommended-content-width: 300px; --recommended-content-width-medium: 400px; - /* Modal */ + // Modal --modal-width: 440px; - --modal-bg: var(--color-bg); - --modal-fullscreen-bg: var(--color-bg); - --modal-overlay-bg: rgba(246, 246, 246, 0.75); - --modal-border: 1px solid rgb(204, 204, 204); - --modal-btn-bg-color: var(--btn-bg-alt); - // /* Tooltip */ - --tooltip-bg: #555; - --tooltip-color: var(--color-white); - - /* Scrollbar */ - --scrollbar-radius: 10px; - --scrollbar-thumb-bg: rgba(0, 0, 0, 0.2); - --scrollbar-thumb-hover-bg: rgba(0, 0, 0, 0.35); - --scrollbar-thumb-active-bg: var(--color-primary); - --scrollbar-track-bg: transparent; - - // /* Animation :) */ + // Animation :) --animation-duration: 0.3s; --animation-style: cubic-bezier(0.55, 0, 0.1, 1); - /* Image */ + // Image --thumbnail-preview-height: 100px; --thumbnail-preview-width: 177px; } diff --git a/src/renderer/scss/all.scss b/src/renderer/scss/all.scss index 370cebd3f..8cea5ff5e 100644 --- a/src/renderer/scss/all.scss +++ b/src/renderer/scss/all.scss @@ -1,35 +1,11 @@ -@charset "UTF-8"; -@import '_reset.scss'; -@import '_vars.scss'; -@import '_gui.scss'; -@import 'component/_syntax-highlighter.scss'; -@import 'component/_table.scss'; -@import 'component/_button.scss'; -@import 'component/_card.scss'; -@import 'component/_file-download.scss'; -@import 'component/_form-field.scss'; -@import 'component/_header.scss'; -@import 'component/_menu.scss'; -@import 'component/_tooltip.scss'; -@import 'component/_load-screen.scss'; -@import 'component/_channel-indicator.scss'; -@import 'component/_notice.scss'; -@import 'component/_modal.scss'; -@import 'component/_snack-bar.scss'; -@import 'component/_content.scss'; -@import 'component/_pagination.scss'; -@import 'component/_markdown-preview.scss'; -@import 'component/_markdown-editor.scss'; -@import 'component/_scrollbar.scss'; -@import 'component/_spinner.scss'; -@import 'component/_nav.scss'; -@import 'component/_file-list.scss'; -@import 'component/_file-render.scss'; -@import 'component/_search.scss'; -@import 'component/_toggle.scss'; -@import 'component/_search.scss'; -@import 'component/_dat-gui.scss'; -@import 'component/_item-list.scss'; -@import 'component/_time.scss'; -@import 'component/_icon.scss'; -@import 'component/_placeholder.scss'; +@charset "utf-8"; + +@import '~@lbry/color/lbry-color', 'reset', 'type', 'vars', 'gui', 'component/syntax-highlighter', + 'component/table', 'component/button', 'component/card', 'component/file-download', + 'component/form-field', 'component/header', 'component/menu', 'component/tooltip', + 'component/load-screen', 'component/channel-indicator', 'component/notice', 'component/modal', + 'component/snack-bar', 'component/content', 'component/pagination', 'component/markdown-preview', + 'component/markdown-editor', 'component/scrollbar', 'component/spinner', 'component/nav', + 'component/file-list', 'component/file-render', 'component/search', 'component/toggle', + 'component/search', 'component/dat-gui', 'component/item-list', 'component/time', 'component/icon', + 'component/placeholder', 'themes/dark'; diff --git a/src/renderer/scss/component/_button.scss b/src/renderer/scss/component/_button.scss index 239ed1905..b6ef78f9b 100644 --- a/src/renderer/scss/component/_button.scss +++ b/src/renderer/scss/component/_button.scss @@ -1,32 +1,170 @@ -button:disabled { - cursor: default; -} - .btn { - border: none; - text-decoration: none; - cursor: pointer; - position: relative; - padding: 10px; - height: var(--btn-height); min-width: var(--btn-height); - border-radius: var(--btn-radius); - background-color: var(--btn-bg-primary); - color: var(--btn-color-primary); - display: flex; + height: var(--btn-height); + align-items: center; - justify-content: center; + background-color: $lbry-teal-5; + border: none; + border-radius: var(--btn-radius); + color: $lbry-white; + cursor: pointer; + display: flex; fill: currentColor; // for proper icon color font-size: 12px; + justify-content: center; + padding: 10px; + position: relative; + text-decoration: none; transition: all var(--animation-duration) var(--animation-style); &:not(:disabled) { - box-shadow: var(--box-shadow-button); } &:hover { + background-color: $lbry-teal-4; + } + + &:not(.btn--no-padding):not(.btn--link):not(.btn--no-style) { + .btn__content { + align-items: center; + display: flex; + padding: 0 8px; + } + } + + &.btn--alt { + &:not(:disabled) { + background-color: $lbry-white; + color: $lbry-black; + } + + &:disabled { + background-color: transparent; + color: $lbry-gray-5; + } + } + + &.btn--arrow { + color: $lbry-black; + width: var(--btn-arrow-width); + + &:disabled { + opacity: 0.3; + } + } + + &.btn--danger { + background-color: $lbry-red-3; + } + + &.btn--disabled:disabled { + // wtf? + cursor: default; + + &.btn--primary { + background-color: rgba($lbry-black, 0.5); + } + + &:hover { + box-shadow: none; + } + } + + &.btn--external-link { + color: $lbry-blue-1; + } + + &.btn--file-actions { + width: var(--btn-height); + height: var(--btn-height); + + background-color: $lbry-black; + border-radius: var(--btn-radius); + color: $lbry-white; + opacity: 0.8; + padding: 10px; + } + + &.btn--header-balance { + color: $lbry-teal-5; + font-size: 14px; + + @media only screen and (min-width: $large-breakpoint) { + font-size: 18px; + } + + .btn__label--balance { + color: $lbry-gray-5; + } + + &:hover { + background-color: transparent; + + .btn__label--balance { + color: $lbry-teal-5; + } + } + } + + &.btn--header-publish { + background-color: $lbry-teal-5; + } + + &.btn--home-nav { + background-color: $lbry-white; box-shadow: none; - background-color: var(--btn-bg-primary-hover); + + .btn__content { + padding: 0; + } + } + + &.btn--inverse { + background-color: transparent; + box-shadow: none; + color: $lbry-teal-5; + } + + &.btn--link { + margin: 0; + padding: 0; + + background-color: inherit; + border-radius: 0; + box-shadow: none; + color: $lbry-teal-5; + display: inline; + font-size: 1em; + min-width: 0; + text-align: left; + } + + &.btn--no-style { + margin: 0; + padding: 0; + + background-color: inherit; + border-radius: 0; + box-shadow: none; + color: inherit; + font-size: inherit; + font-weight: inherit; + min-width: 0; + } + + &.btn--secondary { + background-color: $lbry-teal-5; + } + + &.btn--tourniquet { + max-width: 20vw; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + } + + &.btn--uppercase { + text-transform: uppercase; } .icon + .btn__label { @@ -34,66 +172,6 @@ button:disabled { } } -.btn.btn--alt { - color: var(--btn-color-alt); - background-color: var(--btn-bg-alt); - - &:disabled { - color: var(--color-help); - background-color: transparent; - } -} - -.btn.btn--danger { - background-color: var(--btn-bg-danger); -} - -.btn.btn--inverse { - background-color: transparent; - box-shadow: none; - color: var(--btn-color-inverse); -} - -.btn.btn--link { - padding: 0; - margin: 0; - background-color: inherit; - font-size: 1em; - color: var(--btn-color-inverse); - border-radius: 0; - display: inline; - min-width: 0; - box-shadow: none; - text-align: left; -} - -.btn.btn--external-link { - color: var(--btn-external-color); -} - -.btn.btn--secondary { - background-color: var(--btn-bg-secondary); -} - -.btn.btn--tourniquet { - max-width: 20vw; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; -} - -.btn.btn--no-style { - font-size: inherit; - font-weight: inherit; - color: inherit; - background-color: inherit; - border-radius: 0; - padding: 0; - margin: 0; - box-shadow: none; - min-width: 0; -} - .btn--link, .btn--no-style { height: auto; @@ -104,100 +182,16 @@ button:disabled { } } -.btn.btn--disabled:disabled { - cursor: default; - - &.btn--primary { - background-color: rgba(0, 0, 0, 0.5); - } - - &:hover { - box-shadow: none; - } -} - -.btn.btn--uppercase { - text-transform: uppercase; -} - -.btn:not(.btn--no-padding):not(.btn--link):not(.btn--no-style) { - .btn__content { - padding: 0 8px; - display: flex; - align-items: center; - } -} - .icon + .btn__label, .btn__label + .icon { margin-left: 5px; } -/* - Everything below this is variations of the default button classes - You must pass in a className, props will not set these classes, - if you use these in several different places they should probably - be applied via props -*/ - -.btn.btn--home-nav { - background-color: var(--btn-home-bg-color); - box-shadow: none; - - .btn__content { - padding: 0; - } -} - -.btn.btn--arrow { - width: var(--btn-arrow-width); - color: var(--text-color); - - &:disabled { - opacity: 0.3; - } -} - .btn--uri-indicator { - transition: color var(--animation-duration) var(--animation-style); display: inline-block; + transition: color var(--animation-duration) var(--animation-style); &:hover { - color: var(--btn-color-inverse); + color: $lbry-teal-4; } } - -.btn.btn--header-publish { - background-color: var(--header-primary-color); -} - -.btn.btn--header-balance { - font-size: 14px; - color: var(--header-primary-color); - - @media only screen and (min-width: $large-breakpoint) { - font-size: 18px; - } - - .btn__label--balance { - color: var(--text-help-color); - } - - &:hover { - background-color: transparent; - - .btn__label--balance { - color: var(--header-primary-color); - } - } -} - -.btn.btn--file-actions { - background-color: var(--color-black); - color: var(--color-white); - opacity: 0.8; - border-radius: var(--btn-radius); - width: var(--btn-height); - height: var(--btn-height); - padding: 10px; -} diff --git a/src/renderer/scss/component/_card.scss b/src/renderer/scss/component/_card.scss index 69ef64ba6..adacf7c67 100644 --- a/src/renderer/scss/component/_card.scss +++ b/src/renderer/scss/component/_card.scss @@ -1,13 +1,20 @@ .card { - margin-left: auto; - margin-right: auto; border-radius: var(--card-radius); - user-select: text; display: flex; flex-direction: column; + margin-right: auto; + margin-left: auto; max-width: var(--card-max-width); + user-select: text; white-space: normal; + // .card-media__internal__links should always be inside a card + .card-media__internal-links { + top: $spacing-vertical * 2/3; + right: $spacing-vertical * 2/3; + position: absolute; + } + .card__media { padding-top: var(--video-aspect-ratio); } @@ -20,79 +27,45 @@ } } -.card--section { - background-color: var(--card-bg); - padding: $spacing-vertical; - margin-top: $spacing-vertical * 2/3; - box-shadow: var(--box-shadow-layer); -} - -.card--small { - font-size: 13px; -} - -.card__media { - background-size: cover; - background-repeat: no-repeat; - background-position: 50% 50%; - background-color: var(--color-placeholder); -} - -.card__media--no-img { - display: flex; - justify-content: center; - align-items: center; - position: relative; -} - -.card__media--nsfw { - background-color: var(--color-error); +.card--disabled { + opacity: 0.3; + pointer-events: none; } .card--link { cursor: pointer; } +.card__media { + background-color: $lbry-gray-3; + background-position: 50% 50%; + background-repeat: no-repeat; + background-size: cover; +} + +.card__media--no-img { + align-items: center; + display: flex; + justify-content: center; + position: relative; +} + +.card__media--nsfw { + background-color: $lbry-red-5; +} + .card--pending { opacity: 0.5; } -.card--wallet-balance { - background: url('../../../static/img/stripe-background.png') no-repeat; - background-size: cover; - color: var(--card-wallet-color); - justify-content: space-between; - - .card__title, - .card__subtitle { - color: var(--card-wallet-color); - } +.card--section { + margin-top: $spacing-vertical * 2/3; + padding: $spacing-vertical; + background-color: $lbry-white; } -.card--disabled { - opacity: 0.3; - pointer-events: none; -} - -.card__title { - font-size: 1.5em; - color: var(--text-color); - padding-top: $spacing-vertical * 1/3; - - @media (min-width: $large-breakpoint) { - font-size: 1.7em; - } -} - -.card__title--file-card { - // FileCard is slightly different where the title is only slightly bigger than the subtitle - // Slightly bigger than 2 lines for consistent channel placement - font-size: 1.1em; - height: 3.3em; - - @media only screen and (min-width: $large-breakpoint) { - font-size: 1.3em; - } +.card--small { + font-size: 13px; } .card--space-between { @@ -100,69 +73,21 @@ justify-content: space-between; } -.card__title-identity-icons { - display: flex; - align-items: center; - align-self: flex-start; -} +.card--wallet-balance { + background: url('../../../static/img/stripe-background.png') no-repeat; + background-size: cover; + color: $lbry-white; + justify-content: space-between; -.card__subtitle { - color: var(--card-text-color); - font-size: 1em; - line-height: 1em; - padding-top: $spacing-vertical * 1/3; - - @media (min-width: $large-breakpoint) { - font-size: 1.2em; + .card__subtitle, + .card__title { + color: $lbry-white; } } -.card__subtext-title { - font-size: 1.1em; - - &:not(:first-of-type) { - padding-top: $spacing-vertical * 3/2; - } -} - -.card__subtext { - font-size: 0.85em; - padding-top: $spacing-vertical * 1/3; -} - -.card__meta { - color: var(--color-help); - font-size: 14px; - font-family: 'metropolis-medium'; - padding-top: $spacing-vertical * 2/3; -} - -.card__file-properties { - display: flex; - align-items: center; - color: var(--card-text-color); - - .icon + .icon { - margin-left: $spacing-vertical * 1/3; - } -} - -// .card-media__internal__links should always be inside a card -.card { - .card-media__internal-links { - position: absolute; - top: $spacing-vertical * 2/3; - right: $spacing-vertical * 2/3; - } -} - -.card__content { - margin-top: $spacing-vertical * 2/3; -} - .card__actions { - margin-top: $spacing-vertical * 2/3; display: flex; + margin-top: $spacing-vertical * 2/3; &:not(.card__actions--vertical) { .btn:nth-child(n + 2), @@ -173,18 +98,20 @@ } } -.card__actions--no-margin { - margin-top: 0; +.card__actions-bottom-corner { + bottom: $spacing-vertical; + right: $spacing-vertical; + position: absolute; } -.card__actions--vertical { - flex-direction: column; - margin-top: 0; - align-items: flex-end; +.card__actions-top-corner { + display: flex; + justify-content: flex-end; +} - .btn:not(:first-child) { - margin-top: $spacing-vertical * 1/3; - } +.card__actions--between { + justify-content: space-between; + flex-wrap: wrap; } .card__actions--center { @@ -196,118 +123,54 @@ } } -.card__actions-top-corner { - display: flex; - justify-content: flex-end; -} - -.card__actions-bottom-corner { - position: absolute; - bottom: $spacing-vertical; - right: $spacing-vertical; -} - .card__actions--end { justify-content: flex-end; } -.card__actions--between { - justify-content: space-between; - flex-wrap: wrap; +.card__actions--no-margin { + margin-top: 0; } -/* - .card-row is used on the discover page - It is a list of cards that extend past the right edge of the screen - There are left/right arrows to scroll the cards and view hidden content -*/ -.card-row { - white-space: nowrap; - width: 100%; - padding-top: $spacing-vertical; +.card__actions--vertical { + align-items: flex-end; + flex-direction: column; + margin-top: 0; - &:last-of-type { - padding-bottom: $spacing-vertical * 2/3; + .btn:not(:first-child) { + margin-top: $spacing-vertical * 1/3; } } -.card-row__header { - display: flex; - flex-direction: row; - justify-content: space-between; - // specific padding-left styling is needed here - // this needs to be used on a page with noPadding - // doing so allows the content to scroll to the edge of the screen - padding-left: $spacing-width; +.card__content { + margin-top: $spacing-vertical * 2/3; } -.card-row__title { - font-family: 'metropolis-semibold'; - display: flex; +.card__error-msg { + margin: $spacing-vertical * 1/3 0; + padding: $spacing-vertical * 1/3; + + background-color: rgba($lbry-red-1, 0.3); + border-left: 2px solid $lbry-red-5; + color: $lbry-red-5; +} + +.card__file-properties { align-items: center; - font-size: 18px; - line-height: 24px; - - @media only screen and (min-width: $medium-breakpoint) { - font-size: 20px; - } -} - -.card-row__scroll-btns { + color: $lbry-gray-5; display: flex; - padding-right: $spacing-width * 1/3; - @media (min-width: $medium-breakpoint) { - padding-right: $spacing-width; + .icon + .icon { + margin-left: $spacing-vertical * 1/3; } } -.card-row__scrollhouse { - padding-top: $spacing-vertical * 2/3; - overflow: hidden; +// How cards are displayed in lists - .card { - display: inline-block; - vertical-align: top; - overflow-y: visible; - // 31 px to handle to padding between cards - width: calc((100% / 4) - 34px); - - @media only screen and (min-width: $medium-breakpoint) { - width: calc((100% / 6) - 29px); - } - - @media only screen and (min-width: $large-breakpoint) { - width: calc((100% / 8) - 27px); - } - } - - .card:not(:first-of-type) { - margin-left: 20px; - } - - .card:first-of-type { - margin-left: $spacing-width; - } - - .card:last-of-type { - margin-right: $spacing-width; - } -} - -.card-row__message { - padding: 0 $spacing-width; - white-space: normal; -} - -/* - How cards are displayed in lists -*/ .card__list { .card { display: inline-block; - vertical-align: top; margin-bottom: $spacing-vertical * 3/2; + vertical-align: top; @media only screen and (max-width: $medium-breakpoint) { width: calc((100% / 4) - (60px / 4)); // 60px === 20px margin-right * three cards @@ -335,6 +198,15 @@ } } +.card__list--recommended { + flex: 0 0 var(--recommended-content-width); + padding-left: $spacing-width; + + @media (min-width: $medium-breakpoint) { + flex: 0 0 var(--recommended-content-width-medium); + } +} + .card__list--rewards { column-count: 2; column-gap: $spacing-vertical * 1/3; @@ -346,27 +218,151 @@ } } -.card__list--recommended { - flex: 0 0 var(--recommended-content-width); - padding-left: $spacing-width; +.card__meta { + color: $lbry-gray-5; + font-size: 14px; + font-weight: 500; + padding-top: $spacing-vertical * 2/3; +} - @media (min-width: $medium-breakpoint) { - flex: 0 0 var(--recommended-content-width-medium); +.card__subtitle { + color: $lbry-gray-5; + font-size: 1em; + line-height: 1em; + padding-top: $spacing-vertical * 1/3; + + @media (min-width: $large-breakpoint) { + font-size: 1.2em; + } +} + +.card__subtext { + font-size: 0.85em; + padding-top: $spacing-vertical * 1/3; +} + +.card__subtext-title { + font-size: 1.1em; + + &:not(:first-of-type) { + padding-top: $spacing-vertical * 3/2; } } .card__success-msg { - border-left: 2px solid var(--success-msg-border); - color: var(--success-msg-color); - background-color: var(--success-msg-bg); - padding: $spacing-vertical * 1/3; margin: $spacing-vertical * 1/3 0; + padding: $spacing-vertical * 1/3; + + background-color: rgba($lbry-green-1, 0.1); + border-left: 5px solid $lbry-green-5; + color: $lbry-green-5; } -.card__error-msg { - border-left: 2px solid var(--error-msg-border); - color: var(--error-msg-color); - background-color: var(--error-msg-bg); - padding: $spacing-vertical * 1/3; - margin: $spacing-vertical * 1/3 0; +.card__title { + color: $lbry-black; + font-size: 1.5em; + padding-top: $spacing-vertical * 1/3; + + @media (min-width: $large-breakpoint) { + font-size: 1.7em; + } +} + +.card__title-identity-icons { + align-items: center; + align-self: flex-start; + display: flex; +} + +.card__title--file-card { + // FileCard is slightly different where the title is only slightly bigger than the subtitle + // Slightly bigger than 2 lines for consistent channel placement + font-size: 1.1em; + height: 3.3em; + + @media only screen and (min-width: $large-breakpoint) { + font-size: 1.3em; + } +} + +// .card-row is used on the discover page +// It is a list of cards that extend past the right edge of the screen +// There are left/right arrows to scroll the cards and view hidden content + +.card-row { + padding-top: $spacing-vertical; + white-space: nowrap; + width: 100%; + + &:last-of-type { + padding-bottom: $spacing-vertical * 2/3; + } +} + +.card-row__header { + display: flex; + flex-direction: row; + justify-content: space-between; + // specific padding-left styling is needed here + // this needs to be used on a page with noPadding + // doing so allows the content to scroll to the edge of the screen + padding-left: $spacing-width; +} + +.card-row__message { + padding: 0 $spacing-width; + white-space: normal; +} + +.card-row__scroll-btns { + display: flex; + padding-right: $spacing-width * 1/3; + + @media (min-width: $medium-breakpoint) { + padding-right: $spacing-width; + } +} + +.card-row__scrollhouse { + padding-top: $spacing-vertical * 2/3; + overflow: hidden; + + .card { + display: inline-block; + overflow-y: visible; + vertical-align: top; + width: calc((100% / 4) - 34px); // 31 px to handle to padding between cards + + &:not(:first-of-type) { + margin-left: 20px; + } + + &:first-of-type { + margin-left: $spacing-width; + } + + &:last-of-type { + margin-right: $spacing-width; + } + + @media only screen and (min-width: $medium-breakpoint) { + width: calc((100% / 6) - 29px); + } + + @media only screen and (min-width: $large-breakpoint) { + width: calc((100% / 8) - 27px); + } + } +} + +.card-row__title { + align-items: center; + display: flex; + font-size: 18px; + font-weight: 600; + line-height: 24px; + + @media only screen and (min-width: $medium-breakpoint) { + font-size: 20px; + } } diff --git a/src/renderer/scss/component/_channel-indicator.scss b/src/renderer/scss/component/_channel-indicator.scss index 34f47171b..64c9e3375 100644 --- a/src/renderer/scss/component/_channel-indicator.scss +++ b/src/renderer/scss/component/_channel-indicator.scss @@ -1,6 +1,6 @@ .channel-name { display: inline-flex; overflow: hidden; - white-space: nowrap; text-overflow: ellipsis; + white-space: nowrap; } diff --git a/src/renderer/scss/component/_content.scss b/src/renderer/scss/component/_content.scss index ae890e84c..089a46d00 100644 --- a/src/renderer/scss/component/_content.scss +++ b/src/renderer/scss/component/_content.scss @@ -1,46 +1,20 @@ -.content__wrapper { - max-width: var(--card-max-width); - flex: 1 0 var(--file-page-min-width); -} - -.content__embedded { - background-color: var(--color-black); - width: 100%; - padding-top: var(--video-aspect-ratio); - position: relative; - display: flex; - align-items: center; - justify-content: center; - - video { - height: 100%; - width: 100%; - position: absolute; - top: 0; - left: 0; - - &:hover { - cursor: pointer; - } - } -} - -// Video thumbnail with play/download button .content__cover { - position: absolute; + // Video thumbnail with play/download button top: 0; left: 0; - right: 0; bottom: 0; - background-size: contain; - background-repeat: no-repeat; - background-position: 50% 50%; - display: flex; + right: 0; + align-items: center; + background-position: center; + background-repeat: no-repeat; + background-size: cover; + display: flex; justify-content: center; + position: absolute; &:not(.card__media--nsfw) { - background-color: var(--color-black); + background-color: $lbry-black; } &:hover { @@ -48,56 +22,81 @@ } } -.content__view, -.content__view--container { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - display: flex; +.content__embedded { align-items: center; + background-color: $lbry-black; + display: flex; justify-content: center; -} + padding-top: var(--video-aspect-ratio); + position: relative; + width: 100%; -.content__view--container { - iframe { - background: #fff; + video { width: 100%; height: 100%; + top: 0; + left: 0; + + position: absolute; + + &:hover { + cursor: pointer; + } + } +} + +.content__empty { + align-items: center; + background-color: $lbry-black; + color: $lbry-white; + display: flex; + justify-content: center; + padding-top: var(--video-aspect-ratio); + width: 100%; + + &.content__empty--nsfw { + background-color: $lbry-grape-3; } } .content__loading { + width: 100%; + height: 100%; + + align-items: center; + background-color: rgba($lbry-black, 0.5); display: flex; flex-direction: column; - align-items: center; justify-content: center; padding: 0 20px; - background-color: rgba(0, 0, 0, 0.5); - height: 100%; - width: 100%; } .content__loading-text { - color: var(--color-white); + color: $lbry-white; } -.content__empty { - background-color: black; +.content__view, +.content__view--container { width: 100%; - padding-top: var(--video-aspect-ratio); - display: flex; - align-items: center; - justify-content: center; - color: var(--color-white); + height: 100%; + top: 0; + left: 0; - &.content__empty--nsfw { - background-color: var(--color-nsfw); + align-items: center; + display: flex; + justify-content: center; + position: absolute; +} + +.content__view--container { + iframe { + width: 100%; + height: 100%; + background-color: $lbry-white; } } -img { - max-height: 100%; - max-width: 100%; +.content__wrapper { + flex: 1 0 var(--file-page-min-width); + max-width: var(--card-max-width); } diff --git a/src/renderer/scss/component/_dat-gui.scss b/src/renderer/scss/component/_dat-gui.scss index 4cc69cdf3..347e0525e 100644 --- a/src/renderer/scss/component/_dat-gui.scss +++ b/src/renderer/scss/component/_dat-gui.scss @@ -1,89 +1,103 @@ -/* -* dat.gui component -*/ +// dat.gui component .gui-container { - position: absolute; top: 0; right: 0; + + position: absolute; z-index: 2; .dg.main { - padding: 0; margin: 0; + padding: 0; overflow: inherit; } -} -/* -* Light theme: -* https://github.com/liabru/dat-gui-light-theme -*/ + // Light theme: + // https://github.com/liabru/dat-gui-light-theme -.gui-container.light { - .dg.main.taller-than-window .close-button { - border-top: 1px solid #ddd; - } + &.light { + .dg.main.taller-than-window .close-button { + border-top: 1px solid #ddd; + } - .dg.main .close-button { - background-color: #e8e8e8; - } + .dg.main .close-button { + &:not(:hover) { + background-color: #e8e8e8; + } - .dg.main .close-button:hover { - background-color: #ddd; - } + &:hover { + background-color: #ddd; + } + } - .dg { - color: #555; - text-shadow: none !important; - } + .dg { + color: #555; + text-shadow: none !important; - .dg.main::-webkit-scrollbar { - background: #fafafa; - } + &.main { + &::-webkit-scrollbar { + background-color: #fafafa; + } - .dg.main::-webkit-scrollbar-thumb { - background: #bbb; - } + &::-webkit-scrollbar-thumb { + background-color: #bbb; + } + } - .dg li:not(.folder) { - background: #fafafa; - border-bottom: 1px solid #ddd; - } + li { + &:not(.folder) { + background-color: #fafafa; + border-bottom: 1px solid #ddd; + } - .dg li.save-row .button { - text-shadow: none !important; - } + &.save-row .button { + text-shadow: none !important; + } - .dg li.title { - background: #e8e8e8 - url(data:image/gif;base64,R0lGODlhBQAFAJEAAP////Pz8////////yH5BAEAAAIALAAAAAAFAAUAAAIIlI+hKgFxoCgAOw==) - 6px 10px no-repeat; - } + &.title { + background: #e8e8e8 + url('data:image/gif;base64,R0lGODlhBQAFAJEAAP////Pz8////////yH5BAEAAAIALAAAAAAFAAUAAAIIlI+hKgFxoCgAOw==') + 6px 10px no-repeat; + } + } - .dg .cr.function:hover, - .dg .cr.boolean:hover { - background: #fff; - } + .cr { + &.function:hover, + &.boolean:hover { + background-color: $lbry-white; + } + } - .dg .c input[type='text'] { - background: #e9e9e9; - } + .c { + input { + &[type='text'] { + &:not(:focus), + &:not(:hover) { + background-color: #e9e9e9; + } - .dg .c input[type='text']:hover { - background: #eee; - } + &:focus, + &:hover { + background-color: #eee; + } - .dg .c input[type='text']:focus { - background: #eee; - color: #555; - } + &:focus { + color: #555; + } + } + } - .dg .c .slider { - background: #e9e9e9; - } + .slider { + &:not(:hover) { + background-color: #e9e9e9; + } - .dg .c .slider:hover { - background: #eee; + &:hover { + background-color: #eee; + } + } + } + } } } diff --git a/src/renderer/scss/component/_file-download.scss b/src/renderer/scss/component/_file-download.scss index 84505a8f5..4e741f142 100644 --- a/src/renderer/scss/component/_file-download.scss +++ b/src/renderer/scss/component/_file-download.scss @@ -1,4 +1,4 @@ .file-download { - font-size: 0.8em; align-self: center; + font-size: 0.8em; } diff --git a/src/renderer/scss/component/_file-list.scss b/src/renderer/scss/component/_file-list.scss index e62b4df5c..91686e47c 100644 --- a/src/renderer/scss/component/_file-list.scss +++ b/src/renderer/scss/component/_file-list.scss @@ -5,62 +5,29 @@ margin-top: $spacing-vertical * 2/3; } +.file-list__header { + font-size: 24px; + padding-top: $spacing-vertical * 4/3; + + .tooltip { + margin-left: 5px; + } +} + .file-list__sort { display: flex; justify-content: flex-end; padding-bottom: 20px; } -.file-list__header { - padding-top: $spacing-vertical * 4/3; - font-size: 24px; - - .tooltip { - margin-left: 5px; - } -} - .file-tile { display: flex; font-size: 14px; padding-top: $spacing-vertical; .card__media { - height: var(--file-tile-media-height); flex: 0 0 var(--file-tile-media-width); - } -} - -.file-tile--small { - font-size: 12px; - - .card__media { - height: var(--file-tile-media-height-small); - flex: 0 0 var(--file-tile-media-width-small); - } -} - -.file-tile--large { - font-size: 16px; -} - -.file-tile__title { - font-size: 1.1em; -} - -.file-tile--small { - padding-top: $spacing-vertical * 2/3; - - .card__media { - height: var(--file-tile-media-height-small); - flex: 0 0 var(--file-tile-media-width-small); - } -} - -.file-tile--large { - .card__media { - height: var(--file-tile-media-height-large); - flex: 0 0 var(--file-tile-media-width-large); + height: var(--file-tile-media-height); } } @@ -72,6 +39,29 @@ max-width: 500px; } -.file-tile__uri { - color: var(--color-grey-dark); +.file-tile--large { + font-size: 16px; + + .card__media { + flex: 0 0 var(--file-tile-media-width-large); + height: var(--file-tile-media-height-large); + } +} + +.file-tile--small { + font-size: 12px; + padding-top: $spacing-vertical * 2/3; + + .card__media { + flex: 0 0 var(--file-tile-media-width-small); + height: var(--file-tile-media-height-small); + } +} + +.file-tile__title { + font-size: 1.1em; +} + +.file-tile__uri { + color: $lbry-gray-5; } diff --git a/src/renderer/scss/component/_file-render.scss b/src/renderer/scss/component/_file-render.scss index 42efe940f..7add5489b 100644 --- a/src/renderer/scss/component/_file-render.scss +++ b/src/renderer/scss/component/_file-render.scss @@ -1,21 +1,23 @@ .file-render { width: 100%; height: 100%; - margin: auto; - position: absolute; top: 0; left: 0; - right: 0; bottom: 0; - z-index: 1; + right: 0; + + margin: auto; overflow: hidden; + position: absolute; + z-index: 1; } .file-render__viewer { - margin: 0; width: 100%; height: 100%; - background-color: black; + + background-color: $lbry-black; + margin: 0; iframe, webview { @@ -25,63 +27,64 @@ } .document-viewer { - overflow: auto; - background-color: var(--card-bg); + background-color: $lbry-white; font-size: calc(var(--font-size-subtext-multiple) * 1em); -} - -.document-viewer .markdown-preview { - height: 100%; overflow: auto; - padding: $spacing-vertical $spacing-width; + + .markdown-preview { + height: 100%; + overflow: auto; + padding: $spacing-vertical $spacing-width; + } } .code-viewer, .document-viewer__content { - overflow: auto; width: 100%; height: 100%; + overflow: auto; } -/* Code-viewer */ +// Code-viewer .code-viewer .CodeMirror { - margin: 0; - padding: 0; width: 100%; height: 100%; + margin: 0; + padding: 0; min-height: 100px; - /* Block native text selection */ + // Block native text selection user-select: none; - .CodeMirror-code { - font-size: 1em; - font-weight: 350; - line-height: 1.5em; - font-family: Menlo, Consolas, 'DejaVu Sans Mono', inconsolata, monospace; - letter-spacing: 0.3px; - word-spacing: 1px; - } - - .CodeMirror-linenumber { - color: var(--card-text-color); + .cm-invalidchar { + display: none; } .CodeMirror .CodeMirror-lines { + // is there really a .CodeMirror inside a .CodeMirror? padding: 4px 0; } + .CodeMirror-code { + font-family: Menlo, Consolas, 'DejaVu Sans Mono', inconsolata, monospace; + font-size: 1em; + font-weight: 350; + letter-spacing: 0.3px; + line-height: 1.5em; + word-spacing: 1px; + } + + .CodeMirror-gutters { + background-color: $lbry-gray-1; + border-right: 1px solid $lbry-gray-2; + padding-right: 8px; + } + .CodeMirror-line { padding-left: 16px; } - .CodeMirror-gutters { - border-right: 1px solid var(--color-divider); - background: var(--color-bg-alt); - padding-right: 8px; - } - - .cm-invalidchar { - display: none; + .CodeMirror-linenumber { + color: $lbry-gray-5; } } diff --git a/src/renderer/scss/component/_form-field.scss b/src/renderer/scss/component/_form-field.scss index 348bbaac7..1fc15ac1f 100644 --- a/src/renderer/scss/component/_form-field.scss +++ b/src/renderer/scss/component/_form-field.scss @@ -1,11 +1,7 @@ .form-row { + align-items: flex-end; display: flex; flex-direction: row; - align-items: flex-end; - - .form-field:not(:first-of-type) { - padding-left: $spacing-vertical; - } &.form-row--centered { justify-content: center; @@ -15,28 +11,30 @@ padding-top: $spacing-vertical * 1/3; } - &.form-row--vertically-centered { - align-items: center; - } - - &.form-row--centered { - justify-content: center; + &.form-row--right { + justify-content: flex-end; } &.form-row--stretch { flex: 1; } - &.form-row--right { - justify-content: flex-end; + &.form-row--vertically-centered { + align-items: center; } - .form-field.form-field--stretch { - width: 100%; + .form-field { + &:not(:first-of-type) { + padding-left: $spacing-vertical; + } - input { + &.form-field--stretch { width: 100%; - max-width: 400px; + + input { + max-width: 400px; + width: 100%; + } } } @@ -55,66 +53,69 @@ width: 100%; } -.form-field__input.form-field--first-item { - padding: 0; -} - .form-field__input { display: flex; padding-top: $spacing-vertical / 3; - input[type='checkbox'] { - margin-top: 4px; - } - - input[type='radio'] { - margin-top: 2px; - } - - input.paginate-channel { - width: 35px; - } - - input.input--thumbnail { - width: 400px; - } - &.form-field--auto-height { height: auto; } + + &.form-field--first-item { + padding: 0; + } + + input { + &[type='checkbox'] { + margin-top: 4px; + } + + &[type='radio'] { + margin-top: 2px; + } + + &.paginate-channel { + width: 35px; + } + + &.input--thumbnail { + width: 400px; + } + } } .form-field__help, .form-field__label, .form-field__error { font-size: 12px; - font-family: 'metropolis-medium'; -} - -.form-field__label { - color: var(--form-label-color); -} - -.form-field__help { - color: var(--color-help); - padding-top: $spacing-vertical * 1/3; + font-weight: 500; } .form-field__error { - color: var(--color-error); + color: $lbry-red-5; +} + +.form-field__help { + color: $lbry-gray-5; + padding-top: $spacing-vertical * 1/3; +} + +.form-field__label { + color: inherit; + opacity: 0.7; } .form-field__prefix, .form-field__postfix { - font-family: 'metropolis-medium'; - - &.form-field--fix-no-height { - line-height: 1; - } + font-weight: 500; &.form-field--align-center { align-self: center; } + + &.form-field--fix-no-height { + line-height: 1; + } } .form-field__prefix { @@ -126,12 +127,14 @@ } .form-field__select { - min-width: 60px; - height: 30px; + background-color: $lbry-gray-3; border-radius: 8px; - background-color: var(--input-select-bg-color); - font: normal 12px/30px 'metropolis-medium'; - color: var(--input-select-color); + color: $lbry-black; + font-size: 12px; + font-weight: 500; + height: 30px; + line-height: 30px; + min-width: 60px; &:disabled { opacity: 0.5; diff --git a/src/renderer/scss/component/_header.scss b/src/renderer/scss/component/_header.scss index 1f9ab038a..dfa3935b9 100644 --- a/src/renderer/scss/component/_header.scss +++ b/src/renderer/scss/component/_header.scss @@ -1,23 +1,28 @@ .header { - position: fixed; - height: var(--header-height); width: 100%; - display: flex; - z-index: 1; - justify-content: space-between; + height: var(--header-height); + align-items: center; + background-color: $lbry-white; + box-shadow: 0 1px 5px rgba($lbry-black, 0.1); + display: flex; + justify-content: space-between; padding: 0 $spacing-width * 1/3; - background-color: var(--color-bg); - box-shadow: var(--box-shadow-header); + position: fixed; + z-index: 1; @media (min-width: $medium-breakpoint) { padding: 0 $spacing-width; } } -.header__navigation { +.header__actions-right { display: flex; - justify-content: space-between; + margin-left: auto; + + .btn { + margin-left: $spacing-width * 1/3; + } } .header__history { @@ -31,11 +36,7 @@ } } -.header__actions-right { - margin-left: auto; +.header__navigation { display: flex; - - .btn { - margin-left: $spacing-width * 1/3; - } + justify-content: space-between; } diff --git a/src/renderer/scss/component/_item-list.scss b/src/renderer/scss/component/_item-list.scss index ac3dd1a8d..d66da4141 100644 --- a/src/renderer/scss/component/_item-list.scss +++ b/src/renderer/scss/component/_item-list.scss @@ -1,11 +1,12 @@ .item-list { - background-color: var(--card-bg); + background-color: $lbry-white; margin-top: $spacing-vertical; + padding: $spacing-vertical; } .item-list__item { - display: flex; align-items: center; + display: flex; padding: $spacing-vertical * 1/3; input, @@ -14,13 +15,13 @@ } } -.item-list__item--selected { - background-color: var(--table-item-odd); +.item-list__item--cutoff { + max-width: 350px; + overflow-x: hidden; + text-overflow: ellipsis; + white-space: nowrap; } -.item-list__item--cutoff { - white-space: nowrap; - text-overflow: ellipsis; - overflow-x: hidden; - max-width: 350px; +.item-list__item--selected { + background-color: $lbry-gray-1; } diff --git a/src/renderer/scss/component/_load-screen.scss b/src/renderer/scss/component/_load-screen.scss index f41b36578..51c3e5a33 100644 --- a/src/renderer/scss/component/_load-screen.scss +++ b/src/renderer/scss/component/_load-screen.scss @@ -1,12 +1,13 @@ .load-screen { - color: white; - background: var(--color-primary); - background-size: cover; - min-height: 100vh; min-width: 100vw; + min-height: 100vh; + + align-items: center; + background-color: $lbry-teal-5; + background-size: cover; + color: $lbry-white; display: flex; flex-direction: column; - align-items: center; justify-content: center; } @@ -15,8 +16,8 @@ } .load-screen__title { - font-family: 'metropolis-bold'; font-size: 60px; + font-weight: 700; line-height: 100px; margin-left: 40px; // width of "beta" superscript } @@ -27,17 +28,16 @@ } .load-screen__message { - font-family: 'metropolis-semibold'; font-size: 16px; + font-weight: 600; line-height: 20px; margin-top: $spacing-vertical * 2/3; text-align: center; } .load-screen__details { - font-family: 12px 'metropolis-medium'; font-size: 12px; line-height: 1; - padding-top: $spacing-vertical * 2/3; max-width: 400px; + padding-top: $spacing-vertical * 2/3; } diff --git a/src/renderer/scss/component/_markdown-editor.scss b/src/renderer/scss/component/_markdown-editor.scss index f6241e5d1..b6132a137 100644 --- a/src/renderer/scss/component/_markdown-editor.scss +++ b/src/renderer/scss/component/_markdown-editor.scss @@ -1,91 +1,96 @@ .CodeMirror { - border: 0px; - border-radius: 0px; - background: var(--card-bg); - color: var(--text-color); -} - -.editor-toolbar { - opacity: 1; - border: 0; - background: var(--color-bg-alt); + border-top: none; + border-right: 1px solid $lbry-gray-1; + border-bottom: 1px solid $lbry-gray-1; + border-left: 1px solid $lbry-gray-1; border-radius: 0; - box-shadow: var(--box-shadow-layer); + background: $lbry-white; + color: $lbry-black; + + .CodeMirror-cursor { + border-color: $lbry-teal-3; + } + + .CodeMirror-placeholder { + opacity: 0.5; + } + + .CodeMirror-selected { + background-color: transparent; + } + + .CodeMirror-selectedtext { + background-color: $lbry-teal-5; + color: $lbry-white; + } + + .cm-spell-error:not(.cm-url):not(.cm-comment):not(.cm-tag):not(.cm-word) { + background: none; + text-decoration: underline; + text-decoration-color: $lbry-red-3; + text-decoration-style: dotted; + } } -.editor-toolbar:hover { - opacity: 1; -} - -.editor-toolbar i.separator { - border: 0; -} - -.editor-toolbar.fullscreen { - background: var(--color-bg-alt); -} - -.editor-toolbar.fullscreen::before, -.editor-toolbar.fullscreen::after { - display: none; -} - -.editor-toolbar a { - opacity: 0.6; - color: var(--text-color) !important; - transition: opacity 0.3s ease; -} - -.editor-toolbar a.active, -.editor-toolbar a:hover { - opacity: 1; - background: var(--button-bg); - border-color: transparent; -} - -.editor-toolbar.disabled-for-preview a:not(.no-disable) { - background: var(--color-bg-alt); - border-color: transparent; - opacity: 0.3; -} - -.editor-statusbar { - color: var(--form-label-color); -} - -.editor-preview { - font-size: calc(var(--font-size-subtext-multiple) * 1em); - background: var(--color-bg); - border: 0; -} - -.CodeMirror .CodeMirror-cursor { - border-color: var(--color-primary); -} - -.CodeMirror .CodeMirror-placeholder { - opacity: 0.5; -} - -/* Fix selection */ +// Fix selection .CodeMirror-line::selection, .CodeMirror-line > span::selection, .CodeMirror-line > span > span::selection { - background: var(--text-selection-bg); + background-color: $lbry-teal-1; } -.CodeMirror .CodeMirror-selected { - background: transparent; +.editor-toolbar { + background-color: $lbry-gray-1; + border: none; + border-radius: 0; + opacity: 1; // ? + + &:hover { + opacity: 1; // ? + } + + &.disabled-for-preview a:not(.no-disable) { + background-color: $lbry-gray-1; + border-color: transparent; + opacity: 0.3; + } + + &.fullscreen { + background-color: $lbry-gray-1; + + &::before, + &::after { + display: none; + } + } + + a { + color: $lbry-black !important; + transition: opacity 0.3s ease; + + &:not(.active), + &:not(:hover) { + opacity: 0.6; + } + + &.active, + &:hover { + border-color: transparent; + opacity: 1; + } + } + + i.separator { + border: none; + } } -.CodeMirror .CodeMirror-selectedtext { - background: var(--editor-text-selection-bg) !important; - color: var(--text-selection-color) !important; +.editor-preview { + background-color: rgba($lbry-gray-1, 0.5); + border: none; + font-size: calc(var(--font-size-subtext-multiple) * 1em); } -.CodeMirror .cm-spell-error:not(.cm-url):not(.cm-comment):not(.cm-tag):not(.cm-word) { - background: none; - text-decoration: underline; - text-decoration-color: #f00; - text-decoration-style: dotted; +.editor-statusbar { + color: rgba($lbry-black, 0.5); } diff --git a/src/renderer/scss/component/_markdown-preview.scss b/src/renderer/scss/component/_markdown-preview.scss index 6322305ea..845609efe 100644 --- a/src/renderer/scss/component/_markdown-preview.scss +++ b/src/renderer/scss/component/_markdown-preview.scss @@ -1,14 +1,14 @@ .markdown-preview { margin: 0; - /* Headers */ + // Headers h1, h2, h3, h4, h5, h6 { - font-family: 'metropolis-semibold'; + font-weight: 600; margin: 16px 0; } @@ -33,67 +33,74 @@ } h6 { + color: $lbry-gray-5; font-size: 0.84em; - color: var(--color-help); } - /* Paragraphs */ + // Paragraphs p { white-space: pre-line; } - /* Strikethrough text */ + // Strikethrough text del { - color: var(--color-help); + color: $lbry-gray-5; } - /* Tables */ + // Tables table { - padding: 8px; margin: 16px 0; - background-color: var(--card-bg); + padding: 8px; + background-color: $lbry-white; - tr td, - tr th, - tr td:first-of-type, - tr th:first-of-type, - tr td:last-of-type, - tr th:last-of-type { - padding: 8px; + tr { + td, + th, + td:first-of-type, + th:first-of-type, + td:last-of-type, + th:last-of-type { + padding: 8px; + } } } - /* Image */ + // Image img { margin: 16px 0; } - /* Horizontal Rule */ + // Horizontal Rule hr { - border: 1px solid var(--color-divider); + border: 1px solid $lbry-gray-2; } - /* Code */ + // Code code { - display: block; - padding: 8px; margin: 16px 0; - background-color: var(--color-bg-alt); - color: var(--color-help); - font-size: 1em; + padding: 8px; + + background-color: $lbry-gray-1; + color: $lbry-gray-5; + display: block; font-family: Consolas, 'Lucida Console', 'Source Sans', monospace; + font-size: 1em; } a { - font-size: 1em; - color: var(--btn-external-color); + color: $lbry-blue-1; display: inline-block; + font-size: 1em; } - /* Lists */ + // Lists ul, ol { margin-bottom: 2em; + + > li { + list-style-position: outside; + } } ul { @@ -102,21 +109,18 @@ li { margin-left: 2em; + p { display: inline-block; } } - - ol > li, - ul > li { - list-style-position: outside; - } } blockquote { - padding: 8px; margin: 16px 0; - color: var(--color-help); - border-left: 2px solid var(--color-help); - background-color: var(--color-bg-alt); + padding: 8px; + + background-color: $lbry-gray-1; + color: $lbry-gray-5; + border-left: 2px solid $lbry-gray-5; } diff --git a/src/renderer/scss/component/_menu.scss b/src/renderer/scss/component/_menu.scss index c04f11610..7627e949c 100644 --- a/src/renderer/scss/component/_menu.scss +++ b/src/renderer/scss/component/_menu.scss @@ -1,23 +1,15 @@ -$border-radius-menu: 2px; - .menu-container { display: inline-block; } .menu { + padding-top: ($spacing-vertical / 5) 0; position: absolute; white-space: nowrap; - background-color: var(--menu-bg); - box-shadow: var(--box-shadow-layer); - border-radius: var(--menu-radius); - padding-top: ($spacing-vertical / 5) 0px; z-index: 1; } .menu__menu-item { display: block; padding: ($spacing-vertical / 4) ($spacing-vertical / 2); - &:hover { - background: var(--menu-item-hover-bg); - } } diff --git a/src/renderer/scss/component/_modal.scss b/src/renderer/scss/component/_modal.scss index 1c186f050..b6282ea2b 100644 --- a/src/renderer/scss/component/_modal.scss +++ b/src/renderer/scss/component/_modal.scss @@ -1,15 +1,15 @@ .modal-overlay, .error-modal-overlay { - position: fixed; + top: 0; + left: 0; + bottom: 0; + right: 0; + + align-items: center; + background-color: rgba($lbry-white, 0.7); display: flex; justify-content: center; - align-items: center; - - top: 0px; - left: 0px; - right: 0px; - bottom: 0px; - background-color: var(--modal-overlay-bg); + position: fixed; z-index: 9999; } @@ -18,33 +18,32 @@ } .modal { + background-color: $lbry-white; + border: 1px solid $lbry-gray-3; + border-radius: 4px; display: flex; flex-direction: column; justify-content: center; - border: var(--modal-border); - background: var(--modal-bg); - overflow: auto; - border-radius: 4px; - padding: $spacing-vertical; - box-shadow: var(--box-shadow-layer); max-width: var(--modal-width); + overflow: auto; + padding: $spacing-vertical; word-break: break-word; .btn.btn--alt { - // Set modal buttons bg color - background-color: var(--modal-btn-bg-color); + background-color: $lbry-white; // Set modal buttons bg color } } .modal--fullscreen { - position: absolute; top: 0; left: 0; - right: 0; bottom: 0; + right: 0; + + background-color: rgba($lbry-gray-1, 0.5); padding: $spacing-vertical; - background: var(--modal-fullscreen-bg); overflow-y: scroll; + position: absolute; .main { // I will come back to these when I do media queries @@ -54,11 +53,11 @@ } // For slide down animation on the search modal -// Slide down isn't possible without doing a lot of re-work to the modal component +// Slide down isn"t possible without doing a lot of re-work to the modal component .ReactModal__Overlay { .modal--fullscreen { - transition: height var(--animation-duration) var(--animation-style); height: 0; + transition: height var(--animation-duration) var(--animation-style); } &--after-open { @@ -84,26 +83,26 @@ } .modal__button { - margin: 0px $spacing-vertical * 1/3; + margin: 0 $spacing-vertical * 1/3; &.btn--link { - // So the text isn't bigger than the text inside the button + // So the text is not bigger than the text inside the button font-size: 0.8em; } } .error-modal-overlay { - background: var(--modal-overlay-bg); + background-color: rgba($lbry-white, 0.7); } .error-modal__content { display: flex; - padding: 0px 8px 10px 10px; + padding: 0 8px 10px 10px; } .error-modal__warning-symbol { - margin-top: -5px; height: 28px; + margin-top: -5px; } .download-started-modal__file-path { @@ -116,13 +115,14 @@ } .error-modal__error-list { + max-width: var(--modal-width); + max-height: 400px; margin-top: $spacing-vertical * 1/3; padding: $spacing-vertical * 1/3; + + background-color: $lbry-red-1; + border-left: 2px solid $lbry-red-5; + color: $lbry-red-5; list-style: none; - max-height: 400px; - max-width: var(--modal-width); overflow-y: scroll; - color: #a94442; - background-color: #ffe0df; - border-left: 2px solid #a94442; } diff --git a/src/renderer/scss/component/_nav.scss b/src/renderer/scss/component/_nav.scss index ff282eea1..b334512b7 100644 --- a/src/renderer/scss/component/_nav.scss +++ b/src/renderer/scss/component/_nav.scss @@ -1,14 +1,13 @@ .nav { + background-color: rgba($lbry-gray-1, 0.7); + color: $lbry-gray-5; min-width: var(--side-nav-width); - background-color: var(--nav-bg-color); padding: $spacing-width * 1/3; - color: var(--nav-color); hr { - width: 24px; - margin: 36px 0; - border: solid 1px var(--color-divider); - margin: $spacing-vertical $spacing-vertical * 2/3; + border: 1px solid $lbry-gray-2; + margin: $spacing-vertical 0; + width: $spacing-vertical; } @media (min-width: $medium-breakpoint) { @@ -27,7 +26,6 @@ } .nav__link { - // padding-top: $spacing-vertical / 3; color: inherit; white-space: nowrap; @@ -36,20 +34,24 @@ } .btn { - font: normal 400 16px/36px 'metropolis-semibold'; + font-size: 16px; + font-weight: 600; + line-height: 36px; + + &:hover { + color: $lbry-black; + } @media only screen and (min-width: $medium-breakpoint) { - font: normal 400 18px/40px 'metropolis-semibold'; + font-size: 18px; + line-height: 40px; } @media only screen and (min-width: $large-breakpoint) { - font: normal 400 21px/50px 'metropolis-semibold'; + font-size: 21px; + line-height: 50px; } } - - .btn:hover { - color: var(--text-color); - } } .nav__link--sub { @@ -57,29 +59,34 @@ padding-left: $spacing-vertical * 2/3; .btn { - font: normal 400 14px/30px 'metropolis-medium'; + font-size: 14px; + font-weight: 500; + line-height: 30px; @media only screen and (min-width: $medium-breakpoint) { - font: normal 400 15px/30px 'metropolis-semibold'; + font-size: 15px; + font-weight: 600; + line-height: 30px; } @media only screen and (min-width: $large-breakpoint) { - font: normal 400 18px/40px 'metropolis-medium'; + font-size: 18px; + line-height: 40px; } } } .nav__link--active { - color: var(--text-color); + color: $lbry-black; } .nav__sub-links { - color: var(--nav-color); + color: $lbry-gray-5; padding-bottom: $spacing-vertical * 1/3; } // Sub links animations -// The -appear, -leave classes are added by 'react-transition-group' +// The -appear, -leave classes are added by "react-transition-group" .nav__sub-appear, .nav__sub-leave { max-height: 0; diff --git a/src/renderer/scss/component/_notice.scss b/src/renderer/scss/component/_notice.scss index 277fe0615..756089fc4 100644 --- a/src/renderer/scss/component/_notice.scss +++ b/src/renderer/scss/component/_notice.scss @@ -1,16 +1,14 @@ .notice { - padding: 10px 20px; - border: 1px solid #000; - text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5); + background-color: $lbry-green-1; + border: 1px solid $lbry-green-2; border-radius: 5px; - - color: #468847; - background-color: #dff0d8; - border-color: #d6e9c6; + color: $lbry-green-3; + padding: 10px 20px; + text-shadow: 0 1px 0 rgba($lbry-white, 0.5); } .notice--error { - color: #b94a48; - background-color: #f2dede; - border-color: #eed3d7; + background-color: $lbry-red-1; + border-color: $lbry-red-2; + color: $lbry-red-3; } diff --git a/src/renderer/scss/component/_pagination.scss b/src/renderer/scss/component/_pagination.scss index ab373f530..6e32ce448 100644 --- a/src/renderer/scss/component/_pagination.scss +++ b/src/renderer/scss/component/_pagination.scss @@ -2,16 +2,24 @@ display: block; padding: 0; text-align: center; + + + .form-field { + margin: 0 $spacing-width * 2/3; + + .form-field__input { + padding: 0; + } + } } .pagination__item { - display: inline-block; - line-height: $spacing-vertical * 1.5; - height: $spacing-vertical * 1.5; border-radius: 2px; + display: inline-block; + height: $spacing-vertical * 1.5; + line-height: $spacing-vertical * 1.5; &:not(.pagination__item--selected):not(.pagination__item--break):not(.disabled):hover { - background: rgba(0, 0, 0, 0.2); + background: rgba($lbry-black, 0.2); cursor: pointer; } @@ -31,14 +39,6 @@ } .pagination__item--selected { - color: white; - background: var(--color-primary); -} - -.pagination + .form-field { - margin: 0 $spacing-width * 2/3; - - .form-field__input { - padding: 0; - } + background-color: $lbry-teal-3; + color: $lbry-white; } diff --git a/src/renderer/scss/component/_placeholder.scss b/src/renderer/scss/component/_placeholder.scss index e66418137..820b2007c 100644 --- a/src/renderer/scss/component/_placeholder.scss +++ b/src/renderer/scss/component/_placeholder.scss @@ -1,40 +1,42 @@ -@keyframes pulse { - 0% { - opacity: 1; - } - 50% { - opacity: 0.7; - } - 100% { - opacity: 1; - } -} - .card--placeholder { animation: pulse 2s infinite ease-in-out; - background: var(--color-placeholder); + background-color: $lbry-gray-3; +} + +.placeholder__channel { + width: 70%; + height: 1em; + margin-top: $spacing-vertical * 1/3; +} + +.placeholder__date { + width: 50%; + height: 1em; + margin-top: $spacing-vertical * 1/3; } // Individual items we need a placeholder for // FileCard .placeholder__title { - margin-top: $spacing-vertical * 1/3; height: 3em; -} - -.placeholder__channel { margin-top: $spacing-vertical * 1/3; - height: 1em; - width: 70%; -} - -.placeholder__date { - height: 1em; - margin-top: $spacing-vertical * 1/3; - width: 50%; } // FileTile .placeholder__title--tile { height: 3em; } + +@keyframes pulse { + 0% { + opacity: 1; + } + + 50% { + opacity: 0.7; + } + + 100% { + opacity: 1; + } +} diff --git a/src/renderer/scss/component/_scrollbar.scss b/src/renderer/scss/component/_scrollbar.scss index bec95304f..4cc147454 100644 --- a/src/renderer/scss/component/_scrollbar.scss +++ b/src/renderer/scss/component/_scrollbar.scss @@ -1,25 +1,19 @@ ::-webkit-scrollbar { - width: 8px; - height: 8px; + width: 5px; + height: 5px; + + background-color: transparent; overflow: auto; } -::-webkit-scrollbar-track { - background: var(--scrollbar-track-bg); - border-radius: var(--scrollbar-radius); - margin: 4px; -} - ::-webkit-scrollbar-thumb { - border-radius: var(--scrollbar-radius); - background-color: var(--scrollbar-thumb-bg); - transition: background-color 0.3s ease; -} - -::-webkit-scrollbar-thumb:hover { - background-color: var(--scrollbar-thumb-hover-bg); + background-color: $lbry-gray-3; } ::-webkit-scrollbar-thumb:active { - background-color: var(--scrollbar-thumb-active-bg); + background-color: $lbry-teal-3; +} + +::-webkit-scrollbar-track { + background-color: transparent; } diff --git a/src/renderer/scss/component/_search.scss b/src/renderer/scss/component/_search.scss index dec8f55a3..0364e7762 100644 --- a/src/renderer/scss/component/_search.scss +++ b/src/renderer/scss/component/_search.scss @@ -1,61 +1,63 @@ .wunderbar { - z-index: 1; - flex: 1; - display: flex; - min-width: 175px; cursor: text; + display: flex; + flex: 1; + min-width: 175px; position: relative; + z-index: 1; > .icon { - position: absolute; - left: 10px; top: 10px; + left: 10px; + + position: absolute; z-index: 1; } } +.wunderbar__active-suggestion { + background-color: $lbry-blue-2; + color: $lbry-black; +} + .wunderbar__input { - height: var(--btn-height); - border-radius: var(--btn-radius); width: 100%; - color: var(--search-color); - background-color: var(--search-bg-color); - box-shadow: var(--box-shadow-wunderbar); - padding: 10px; - padding-left: 30px; - font-size: 13px; - display: flex; + height: var(--btn-height); + align-items: center; + border-bottom: none; // ? + display: flex; + font-size: 13px; justify-content: center; - border-bottom: none; + padding: 10px 10px 10px 30px; + transition: background-color 0.2s; + + &:not(:focus) { + background-color: rgba($lbry-gray-1, 0.3); + } &:focus { - background-color: var(--search-active-bg-color); - border-radius: 0; - border-bottom: 1px solid var(--color-divider); - box-shadow: var(--box-shadow-button); + background-color: rgba($lbry-gray-1, 0.5); } } .wunderbar__menu { - max-width: 100px; - border-radius: 0 0 3px 3px !important; - padding: 0 !important; - background: transparent !important; - overflow-x: hidden; + background-color: $lbry-white; + box-shadow: 0 1px 5px rgba($lbry-black, 0.15); + max-width: 100px; // ? + overflow: hidden; } .wunderbar__suggestion { - padding: 5px 10px; - background-color: var(--search-bg-color); + align-items: center; cursor: pointer; display: flex; flex-direction: row; justify-items: flex-start; - align-items: center; + padding: 5px 10px; &:not(:first-of-type) { - border-top: 1px solid var(--search-item-border-color); + border-top: 1px solid transparent; } .icon { @@ -71,20 +73,13 @@ } .wunderbar__suggestion-label--action { - margin-left: $spacing-vertical * 1/3; - white-space: nowrap; font-size: 12px; + font-weight: 600; line-height: 0.1; // to vertically align because the font size is smaller -} - -.wunderbar__active-suggestion { - color: var(--search-item-active-color); - background-color: var(--color-secondary); -} - -.search__top { - padding: 0 $spacing-width $spacing-width; - background-color: var(--search-exact-result); + margin-left: 0.5rem; + opacity: 0.7; + text-transform: uppercase; + white-space: nowrap; } .search__content { @@ -104,3 +99,8 @@ } } } + +.search__top { + background-color: rgba($lbry-gray-1, 0.3); + padding: 0 $spacing-width $spacing-width; +} diff --git a/src/renderer/scss/component/_snack-bar.scss b/src/renderer/scss/component/_snack-bar.scss index 777916505..3140643c4 100644 --- a/src/renderer/scss/component/_snack-bar.scss +++ b/src/renderer/scss/component/_snack-bar.scss @@ -1,22 +1,22 @@ .snack-bar { - background-color: var(--snackbar-bg-primary); + bottom: $spacing-vertical; + left: $spacing-vertical; + + background-color: $lbry-teal-5; border-radius: 10px; - box-shadow: var(--box-shadow-layer); - color: var(--snackbar-color-primary); + color: $lbry-white; display: flex; justify-content: space-between; - margin-left: auto; margin-right: auto; + margin-left: auto; max-width: var(--snack-bar-width); min-width: 300px; opacity: 0.95; padding: 14px 20px 10px 20px; position: fixed; - left: $spacing-vertical; - bottom: $spacing-vertical; transition: all var(--transition-duration) var(--transition-type); width: 100%; - z-index: 10000; /*hack to get it over react modal */ + z-index: 10000; // hack to get it over react modal } .snack-bar__action { @@ -25,10 +25,8 @@ min-width: min-content; text-transform: uppercase; - span { - &:hover { - text-decoration: underline; - } + span:hover { + text-decoration: underline; } } @@ -42,6 +40,7 @@ font-size: 30px; margin-right: 20px; } + &:nth-of-type(2) { font-size: 16px; margin-bottom: 4px; diff --git a/src/renderer/scss/component/_spinner.scss b/src/renderer/scss/component/_spinner.scss index 5ef690181..9b9c2f855 100644 --- a/src/renderer/scss/component/_spinner.scss +++ b/src/renderer/scss/component/_spinner.scss @@ -1,16 +1,18 @@ .spinner { - margin: $spacing-vertical * 1/3; width: 50px; height: 40px; - text-align: center; + font-size: 10px; + margin: $spacing-vertical * 1/3; + text-align: center; .rect { - display: inline-block; - height: 100%; width: 6px; - margin: 0 2px; + height: 100%; + animation: sk-stretchdelay 1.2s infinite ease-in-out; + display: inline-block; + margin: 0 2px; &.rect2 { animation-delay: -1.1s; @@ -32,13 +34,13 @@ .spinner--light { .rect { - background-color: var(--color-white); + background-color: $lbry-white; } } .spinner--dark { .rect { - background-color: var(--color-black); + background-color: $lbry-black; } } @@ -46,20 +48,21 @@ margin-top: $spacing-vertical; .rect { - background-color: var(--color-white); + background-color: $lbry-white; } } .spinner--small { - margin: $spacing-vertical * 1/3 0; width: 40px; height: 32px; - text-align: center; + font-size: 10px; + margin: $spacing-vertical * 1/3 0; + text-align: center; .rect { - height: 100%; width: 3px; + height: 100%; margin: 0 2px; } } @@ -70,6 +73,7 @@ 100% { transform: scaleY(0.4); } + 20% { transform: scaleY(1); } diff --git a/src/renderer/scss/component/_syntax-highlighter.scss b/src/renderer/scss/component/_syntax-highlighter.scss index 82a718d7f..65bb8b608 100644 --- a/src/renderer/scss/component/_syntax-highlighter.scss +++ b/src/renderer/scss/component/_syntax-highlighter.scss @@ -1,147 +1,119 @@ -/* - Name: one-dark 1.1.1 - Author: Török Ádám (http://github.com/Aerobird98) - Original Atom One Dark Theme (https://github.com/atom/one-dark-ui & https://github.com/atom/one-dark-syntax) -*/ +// Name: one-dark 1.1.1 +// Author: Török Ádám (http://github.com/Aerobird98) +// Original Atom One Dark Theme (https://github.com/atom/one-dark-ui & https://github.com/atom/one-dark-syntax) -/* basic */ -.CodeMirror.cm-s-one-dark { - color: #abb2bf; -} +// basic +.CodeMirror { + &.cm-s-one-dark { + color: #abb2bf; -.CodeMirror.cm-s-one-dark .CodeMirror-lines { - color: #abb2bf !important; - background-color: transparent; -} -.CodeMirror.cm-s-one-dark .CodeMirror-cursor { - border-left: 2px solid #56b6c2 !important; -} -/* addon: edit/machingbrackets.js & addon: edit/matchtags.js */ -.CodeMirror.cm-s-one-dark .CodeMirror-matchingbracket, -.CodeMirror.cm-s-one-dark .CodeMirror-matchingtag { - border-bottom: 2px solid #56b6c2; - color: #abb2bf !important; - background-color: transparent; -} -.CodeMirror.cm-s-one-dark .CodeMirror-nonmatchingbracket { - border-bottom: 2px solid #e06c75; - color: #abb2bf !important; - background-color: transparent; -} -/* addon: fold/foldgutter.js */ -.CodeMirror.cm-s-one-dark .CodeMirror-foldmarker, -.CodeMirror.cm-s-one-dark .CodeMirror-foldgutter, -.CodeMirror.cm-s-one-dark .CodeMirror-foldgutter-open, -.CodeMirror.cm-s-one-dark .CodeMirror-foldgutter-folded { - border: none; - text-shadow: none; - color: #5c6370 !important; - background-color: transparent; -} -/* addon: selection/active-line.js */ -.CodeMirror.cm-s-one-dark .CodeMirror-activeline-background { - background-color: rgba(153, 187, 255, 0.04); -} -/* basic syntax */ -.CodeMirror.cm-s-one-dark .cm-header { - color: #e06c75; -} -.CodeMirror.cm-s-one-dark .cm-quote { - color: #5c6370; - font-style: italic; -} -.CodeMirror.cm-s-one-dark .cm-negative { - color: #e06c75; -} -.CodeMirror.cm-s-one-dark .cm-positive { - color: #e06c75; -} -.CodeMirror.cm-s-one-dark .cm-strong { - color: #d19a66; - font-weight: bold; -} -.CodeMirror.cm-s-one-dark .cm-header .cm-strong { - color: #d19a66; - font-weight: bold; -} -.CodeMirror.cm-s-one-dark .cm-em { - color: #c678dd; - font-style: italic; -} -.CodeMirror.cm-s-one-dark .cm-header .cm-em { - color: #c678dd; - font-style: italic; -} -.CodeMirror.cm-s-one-dark .cm-tag { - color: #e06c75; -} -.CodeMirror.cm-s-one-dark .cm-attribute { - color: #d19a66; -} -.CodeMirror.cm-s-one-dark .cm-link { - color: #98c379; - border-bottom: solid 1px #98c379; -} -.CodeMirror.cm-s-one-dark .cm-builtin { - color: #e06c75; -} -.CodeMirror.cm-s-one-dark .cm-keyword { - color: #c678dd; -} -.CodeMirror.cm-s-one-dark .cm-def { - color: #e5c07b; -} /* original: #d19a66; */ -.CodeMirror.cm-s-one-dark .cm-atom { - color: #d19a66; -} -.CodeMirror.cm-s-one-dark .cm-number { - color: #d19a66; -} -.CodeMirror.cm-s-one-dark .cm-property { - color: #56b6c2; -} /* original: #abb2bf */ -.CodeMirror.cm-s-one-dark .cm-qualifier { - color: #d19a66; -} -.CodeMirror.cm-s-one-dark .cm-variable { - color: #e06c75; -} -.CodeMirror.cm-s-one-dark .cm-string { - color: #98c379; -} -.CodeMirror.cm-s-one-dark .cm-punctuation { - color: #abb2bf; -} -.CodeMirror.cm-s-one-dark .cm-operator { - color: #56b6c2; -} /* original: #abb2bf */ -.CodeMirror.cm-s-one-dark .cm-meta { - color: #abb2bf; -} -.CodeMirror.cm-s-one-dark .cm-bracket { - color: #abb2bf; -} -.CodeMirror.cm-s-one-dark .cm-comment { - color: #5c6370; - font-style: italic; -} -.CodeMirror.cm-s-one-dark .cm-error { - color: #e06c75; -} -/* css syntax corrections */ -.CodeMirror.cm-s-one-dark .cm-m-css.cm-variable { - color: #828997; -} -.CodeMirror.cm-s-one-dark .cm-m-css.cm-property { - color: #abb2bf; -} -.CodeMirror.cm-s-one-dark .cm-m-css.cm-atom { - color: #56b6c2; -} -.CodeMirror.cm-s-one-dark .cm-m-css.cm-builtin { - color: #56b6c2; -} -/* lua syntax corrections */ -.CodeMirror.cm-s-one-dark .cm-m-lua.cm-variable { - color: #56b6c2; + .CodeMirror-cursor { + border-left: 2px solid #56b6c2; + } + + .CodeMirror-lines { + background-color: transparent; + } + + // addon: edit/machingbrackets.js & addon: edit/matchtags.js + .CodeMirror-matchingbracket, + .CodeMirror-matchingtag { + border-bottom: 2px solid #56b6c2; + color: #abb2bf !important; + background-color: transparent; + } + + .CodeMirror-nonmatchingbracket { + border-bottom: 2px solid #e06c75; + color: #abb2bf !important; + background-color: transparent; + } + + // addon: fold/foldgutter.js + .CodeMirror-foldmarker, + .CodeMirror-foldgutter, + .CodeMirror-foldgutter-open, + .CodeMirror-foldgutter-folded { + border: none; + text-shadow: none; + color: #5c6370 !important; + background-color: transparent; + } + + // addon: selection/active-line.js + .CodeMirror-activeline-background { + background-color: rgba(153, 187, 255, 0.04); + } + + // basic syntax + .cm-atom, + .cm-attribute, + .cm-number, + .cm-qualifier, + .cm-strong { + color: #d19a66; + } + + .cm-bracket, + .cm-meta, + .cm-punctuation, + .cm-m-css.cm-property { + color: #abb2bf; + } + + .cm-builtin, + .cm-error, + .cm-header, + .cm-negative, + .cm-positive, + .cm-tag, + .cm-variable { + color: #e06c75; + } + + .cm-comment, + .cm-quote { + color: #5c6370; + } + + .cm-def { + color: #e5c07b; + } + + .cm-em, + .cm-keyword { + color: #c678dd; + } + + .cm-comment, + .cm-em, + .cm-quote { + font-style: italic; + } + + .cm-link, + .cm-string { + color: #98c379; + } + + .cm-link { + border-bottom: 1px solid #98c379; + } + + .cm-operator, + .cm-property, + .cm-m-css.cm-atom, + .cm-m-css.cm-builtin, + .cm-m-lua.cm-variable { + color: #56b6c2; + } + + .cm-strong { + font-weight: bold; + } + + .cm-m-css.cm-variable { + color: #828997; + } + } } diff --git a/src/renderer/scss/component/_table.scss b/src/renderer/scss/component/_table.scss index ebf2066f6..719791890 100644 --- a/src/renderer/scss/component/_table.scss +++ b/src/renderer/scss/component/_table.scss @@ -1,33 +1,35 @@ table.table, .markdown-preview table { - word-wrap: break-word; max-width: 100%; text-align: left; + word-wrap: break-word; - tr td:first-of-type, - tr th:first-of-type { - padding-left: $spacing-vertical * 2/3; - } + tr { + td:first-of-type, + th:first-of-type { + padding-left: $spacing-vertical * 2/3; + } - tr td:last-of-type, - tr th:last-of-type { - padding-right: $spacing-vertical * 2/3; - } + td:last-of-type, + th:last-of-type { + padding-right: $spacing-vertical * 2/3; + } - tr th, - tr td { - font-size: 13px; + th, + td { + font-size: 13px; + } } th { - font-family: 'metropolis-semibold'; - border: 0; + border: none; + font-weight: 600; padding: $spacing-vertical * 2/3 $spacing-vertical * 1/3; } td { - font-family: 'metropolis-medium'; - color: var(--color-help); + color: $lbry-gray-5; + font-weight: 500; padding: $spacing-vertical * 1/6 $spacing-vertical * 1/3; .btn:not(.btn--link) { @@ -45,23 +47,26 @@ table.table, } thead { - color: var(--text-color); - border-bottom: var(--table-border); + border-bottom: 1px solid rgba($lbry-gray-1, 0.7); } tbody { tr { - border-bottom: var(--table-item-border); + border-bottom: 1px solid $lbry-gray-1; padding: 8px 0; - &:nth-child(even) { - background-color: var(--table-item-odd); - } + &:nth-child(odd) { - background-color: var(--table-item-even); + background-color: transparent; } + + &:nth-child(even) { + background-color: rgba($lbry-gray-1, 0.3); + } + &.thead { background: none; } + td { border: 0 none; } @@ -69,40 +74,44 @@ table.table, } } -table.table--stretch { - width: 100%; -} +table { + &.table--help { + td:nth-of-type(1) { + font-weight: 600; + min-width: 130px; + } -table.table--help { - td:nth-of-type(1) { - color: var(--text-color); - font-family: 'metropolis-semibold'; - min-width: 130px; + td:nth-of-type(2) { + max-width: 20vw; // Tourniquets text over 20vw + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + } } - td:nth-of-type(2) { - /*Tourniquets text over 20VW*/ - max-width: 20vw; - overflow: hidden; - white-space: nowrap; - text-overflow: ellipsis; - color: var(--color-help); - } -} -table.table--transactions { - td:nth-of-type(1) { - width: 25%; + &.table--stretch { + width: 100%; } - td:nth-of-type(2) { - width: 20%; - } - td:nth-of-type(3) { - width: 22.5%; - } - td:nth-of-type(4) { - width: 17.5%; - } - td:nth-of-type(5) { - width: 15%; + + &.table--transactions { + td:nth-of-type(1) { + width: 25%; + } + + td:nth-of-type(2) { + width: 20%; + } + + td:nth-of-type(3) { + width: 22.5%; + } + + td:nth-of-type(4) { + width: 17.5%; + } + + td:nth-of-type(5) { + width: 15%; + } } } diff --git a/src/renderer/scss/component/_time.scss b/src/renderer/scss/component/_time.scss index 1e35e772f..f239adab3 100644 --- a/src/renderer/scss/component/_time.scss +++ b/src/renderer/scss/component/_time.scss @@ -1,7 +1,7 @@ // All CSS for date & time ui .time { - color: var(--color-help); + color: $lbry-gray-5; } .time--ago { diff --git a/src/renderer/scss/component/_toggle.scss b/src/renderer/scss/component/_toggle.scss index bb13b7696..50e127d1a 100644 --- a/src/renderer/scss/component/_toggle.scss +++ b/src/renderer/scss/component/_toggle.scss @@ -1,114 +1,121 @@ // Taken from react-toggle/style.css // Edited to add the teal color, nothing else .react-toggle { - display: inline-block; - position: relative; - cursor: pointer; background-color: transparent; - border: 0; - padding: 0; - user-select: none; - margin-bottom: auto; + border: none; + cursor: pointer; + display: inline-block; margin-top: 2px; + margin-bottom: auto; + padding: 0; + position: relative; + user-select: none; + + &:hover { + &:not(.react-toggle--disabled) { + .react-toggle-track { + background-color: $lbry-black; + } + } + } } -.react-toggle-screenreader-only { - border: 0; - clip: rect(0 0 0 0); - height: 1px; - margin: -1px; - overflow: hidden; - padding: 0; - position: absolute; - width: 1px; +.react-toggle--checked { + &:hover { + &:not(.react-toggle--disabled) { + .react-toggle-track { + background-color: $lbry-black; + } + } + } + + .react-toggle-track { + background-color: $lbry-teal-5; + } + + .react-toggle-track-check { + opacity: 1; + transition: opacity 0.25s ease; + } + + .react-toggle-track-x { + opacity: 0; + } + + .react-toggle-thumb { + border-color: $lbry-teal-5; + left: 22px; + } } .react-toggle--disabled { cursor: not-allowed; opacity: 0.5; - -webkit-transition: opacity 0.25s; transition: opacity 0.25s; } +.react-toggle-screenreader-only { + width: 1px; + height: 1px; + margin: -1px; + padding: 0; + + border: none; + clip: rect(0 0 0 0); + overflow: hidden; + position: absolute; +} + +.react-toggle-thumb { + width: 17px; + height: 17px; + top: 1px; + left: 1px; + + background-color: $lbry-gray-1; + border: 1px solid $lbry-gray-5; + border-radius: 50%; + box-sizing: border-box; + position: absolute; + transition: all 0.25s ease; +} + .react-toggle-track { width: 40px; height: 19px; - padding: 0; + + background-color: $lbry-gray-5; border-radius: 30px; - background-color: #4d4d4d; - -webkit-transition: all 0.2s ease; - -moz-transition: all 0.2s ease; + padding: 0; transition: all 0.2s ease; } -.react-toggle:hover:not(.react-toggle--disabled) .react-toggle-track { - background-color: #000000; -} - -.react-toggle--checked .react-toggle-track { - background-color: var(--input-switch-color); -} - -.react-toggle--checked:hover:not(.react-toggle--disabled) .react-toggle-track { - background-color: #158a88; -} - .react-toggle-track-check { - position: absolute; width: 14px; height: 10px; - top: 0px; - bottom: 0px; + top: 0; + left: 6px; + bottom: 0; + + line-height: 0; margin-top: auto; margin-bottom: auto; - line-height: 0; - left: 6px; opacity: 0; - -webkit-transition: opacity 0.25s ease; - -moz-transition: opacity 0.25s ease; - transition: opacity 0.25s ease; -} - -.react-toggle--checked .react-toggle-track-check { - opacity: 1; - -webkit-transition: opacity 0.25s ease; - -moz-transition: opacity 0.25s ease; + position: absolute; transition: opacity 0.25s ease; } .react-toggle-track-x { - position: absolute; width: 10px; height: 10px; - top: 0px; - bottom: 0px; + top: 0; + bottom: 0; + right: 10px; + margin-top: auto; margin-bottom: auto; line-height: 0; - right: 10px; opacity: 1; + position: absolute; transition: opacity 0.25s ease; } - -.react-toggle--checked .react-toggle-track-x { - opacity: 0; -} - -.react-toggle-thumb { - transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1) 0ms; - position: absolute; - top: 1px; - left: 1px; - width: 17px; - height: 17px; - border: 1px solid #4d4d4d; - border-radius: 50%; - background-color: #fafafa; - box-sizing: border-box; - transition: all 0.25s ease; -} - -.react-toggle--checked .react-toggle-thumb { - left: 22px; - border-color: var(--input-switch-color); -} diff --git a/src/renderer/scss/component/_tooltip.scss b/src/renderer/scss/component/_tooltip.scss index 914d86594..ccf9567d0 100644 --- a/src/renderer/scss/component/_tooltip.scss +++ b/src/renderer/scss/component/_tooltip.scss @@ -1,10 +1,60 @@ .tooltip { - position: relative; display: inline-block; + position: relative; + + &:not(:hover) { + .tooltip__body { + visibility: hidden; + } + } + + &:hover { + .tooltip__body { + visibility: visible; + } + } + + &.tooltip--on-component { + .tooltip__body { + margin-top: 10px; + } + } + + .tooltip__body { + background-color: $lbry-gray-5; + border-radius: 8px; + color: $lbry-white; + font-size: 12px; + font-weight: 500; + padding: $spacing-vertical * 1/3; + position: absolute; + text-align: center; + white-space: pre-wrap; + width: 200px; + z-index: 1; + + &::after { + width: 0; + height: 0; + + border-style: solid; + border-width: 5px; + content: ' '; + position: absolute; + } + } + + .tooltip__body--short { + width: 130px; + } +} + +.tooltip--icon { + margin-top: 5px; } -// When there is a label for the tooltip and not just using a button or icon .tooltip--label { + // When there is a label for the tooltip and not just using a button or icon font-size: 14px; padding-left: $spacing-vertical * 1/3; @@ -13,96 +63,21 @@ } } -.tooltip--icon { - margin-top: 5px; -} +.tooltip--bottom .tooltip__body { + top: 90%; + left: 50%; + margin-left: -100px; -/* Tooltip text */ -.tooltip { - .tooltip__body { - background-color: var(--tooltip-bg); - font-family: 'metropolis-medium'; - font-size: 12px; - color: var(--tooltip-color); - border-radius: 8px; - position: absolute; - z-index: 1; - width: 200px; - text-align: center; - white-space: pre-wrap; - padding: $spacing-vertical * 1/3; - visibility: hidden; + &.tooltip__body--short { + margin-left: -65px; } - .tooltip__body--short { - width: 130px; - } - - .tooltip__body::after { - content: ' '; - width: 0; - height: 0; - position: absolute; - border-width: 5px; - border-style: solid; - } - - &.tooltip--on-component { - .tooltip__body { - margin-top: 10px; - } - } -} - -.tooltip--top { - .tooltip__body { + &::after { bottom: 100%; left: 50%; - margin-left: -100px; - &.tooltip__body--short { - margin-left: -65px; - } - - &::after { - top: 100%; - left: 50%; - margin-left: -5px; - border-color: var(--tooltip-bg) transparent transparent transparent; - } - } -} - -.tooltip--right { - .tooltip__body { - margin-top: -30px; - margin-left: 110%; - - &::after { - top: 17px; - right: 100%; /* To the left of the tooltip */ - margin-top: -5px; - border-color: transparent var(--tooltip-bg) transparent transparent; - } - } -} - -.tooltip--bottom { - .tooltip__body { - top: 90%; - left: 50%; - margin-left: -100px; - - &.tooltip__body--short { - margin-left: -65px; - } - - &::after { - bottom: 100%; - left: 50%; - margin-left: -5px; - border-color: transparent transparent var(--tooltip-bg) transparent; - } + border-color: transparent transparent $lbry-gray-5 transparent; + margin-left: -5px; } } @@ -113,11 +88,39 @@ &::after { top: 17px; left: 100%; + + border-color: transparent transparent transparent $lbry-gray-5; margin-top: -5px; - border-color: transparent transparent transparent var(--tooltip-bg); } } -.tooltip:hover .tooltip__body { - visibility: visible; +.tooltip--right .tooltip__body { + margin-top: -30px; + margin-left: 110%; + + &::after { + top: 17px; + right: 100%; // To the left of the tooltip + + border-color: transparent $lbry-gray-5 transparent transparent; + margin-top: -5px; + } +} + +.tooltip--top .tooltip__body { + bottom: 100%; + left: 50%; + margin-left: -100px; + + &.tooltip__body--short { + margin-left: -65px; + } + + &::after { + top: 100%; + left: 50%; + + border-color: $lbry-gray-5 transparent transparent transparent; + margin-left: -5px; + } } diff --git a/src/renderer/scss/themes/_dark.scss b/src/renderer/scss/themes/_dark.scss new file mode 100644 index 000000000..45b1ba2e5 --- /dev/null +++ b/src/renderer/scss/themes/_dark.scss @@ -0,0 +1,118 @@ +html[data-theme='dark'] { + .header { + background-color: rgba($lbry-black, 0.9); + } + + .header__navigation { + button { + background-color: transparent !important; // TODO: Fix + color: $lbry-white !important; // TODO: Fix + } + } + + .wunderbar > .icon { + color: $lbry-gray-5; + } + + .wunderbar__active-suggestion { + background-color: $lbry-blue-4; + color: inherit; + } + + .wunderbar__input { + background-color: rgba($lbry-white, 0.1); + color: $lbry-white; + + &:focus { + background-color: rgba($lbry-white, 0.9); + color: $lbry-black; + } + } + + .wunderbar__menu { + background-color: $lbry-gray-5; + color: $lbry-white; + top: 3rem; + } + + .nav { + background-color: rgba($lbry-white, 0.05); + + hr { + border-color: $lbry-gray-5; + } + } + + .nav__link .btn:hover { + color: $lbry-teal-5; + } + + .nav__link--active { + color: $lbry-teal-3; + } + + .page { + background-color: $lbry-black; + color: $lbry-gray-1; + } + + input.input-copyable { + background-color: rgba($lbry-white, 0.1); + color: $lbry-white; + } + + .card__title { + color: inherit; + } + + .card--placeholder { + background-color: rgba($lbry-white, 0.1); + } + + .card--section { + background-color: rgba($lbry-white, 0.1); + } + + .content__cover:not(.card__media--nsfw), + .card__media { + background-color: rgba($lbry-white, 0.1); + } + + .card__media--nsfw { + background-color: rgba($lbry-red-1, 0.1); + } + + .btn.btn--alt:not(:disabled) { + background-color: rgba($lbry-white, 0.1); + color: $lbry-gray-1; + } + + .search__top { + background-color: rgba($lbry-white, 0.15); + } + + table.table, + .markdown-preview table { + thead { + border-bottom: 1px solid rgba($lbry-gray-1, 0.1); + } + + tbody { + tr { + border-bottom: 1px solid rgba($lbry-gray-1, 0.1); + + &:nth-child(even) { + background-color: rgba($lbry-gray-1, 0.1); + } + } + } + } + + .item-list { + background-color: rgba($lbry-white, 0.1); + } + + .item-list__item:not(:last-of-type) { + border-bottom: 1px solid rgba($lbry-gray-1, 0.1); + } +} diff --git a/static/font/inter/400.woff b/static/font/inter/400.woff new file mode 100644 index 000000000..913c72a56 Binary files /dev/null and b/static/font/inter/400.woff differ diff --git a/static/font/inter/400.woff2 b/static/font/inter/400.woff2 new file mode 100644 index 000000000..cf1b2f9e9 Binary files /dev/null and b/static/font/inter/400.woff2 differ diff --git a/static/font/inter/400i.woff b/static/font/inter/400i.woff new file mode 100644 index 000000000..51524eabd Binary files /dev/null and b/static/font/inter/400i.woff differ diff --git a/static/font/inter/400i.woff2 b/static/font/inter/400i.woff2 new file mode 100644 index 000000000..95bb2aeef Binary files /dev/null and b/static/font/inter/400i.woff2 differ diff --git a/static/font/inter/500.woff b/static/font/inter/500.woff new file mode 100644 index 000000000..e58faef04 Binary files /dev/null and b/static/font/inter/500.woff differ diff --git a/static/font/inter/500.woff2 b/static/font/inter/500.woff2 new file mode 100644 index 000000000..bf044e255 Binary files /dev/null and b/static/font/inter/500.woff2 differ diff --git a/static/font/inter/500i.woff b/static/font/inter/500i.woff new file mode 100644 index 000000000..8f4cbc665 Binary files /dev/null and b/static/font/inter/500i.woff differ diff --git a/static/font/inter/500i.woff2 b/static/font/inter/500i.woff2 new file mode 100644 index 000000000..94fb39bc3 Binary files /dev/null and b/static/font/inter/500i.woff2 differ diff --git a/static/font/inter/600.woff b/static/font/inter/600.woff new file mode 100644 index 000000000..4134abc3a Binary files /dev/null and b/static/font/inter/600.woff differ diff --git a/static/font/inter/600.woff2 b/static/font/inter/600.woff2 new file mode 100644 index 000000000..f6de6b863 Binary files /dev/null and b/static/font/inter/600.woff2 differ diff --git a/static/font/inter/600i.woff b/static/font/inter/600i.woff new file mode 100644 index 000000000..d1375d3fa Binary files /dev/null and b/static/font/inter/600i.woff differ diff --git a/static/font/inter/600i.woff2 b/static/font/inter/600i.woff2 new file mode 100644 index 000000000..cb3585b7d Binary files /dev/null and b/static/font/inter/600i.woff2 differ diff --git a/static/font/inter/700.woff b/static/font/inter/700.woff new file mode 100644 index 000000000..10e1abcff Binary files /dev/null and b/static/font/inter/700.woff differ diff --git a/static/font/inter/700.woff2 b/static/font/inter/700.woff2 new file mode 100644 index 000000000..2a49c02db Binary files /dev/null and b/static/font/inter/700.woff2 differ diff --git a/static/font/inter/700i.woff b/static/font/inter/700i.woff new file mode 100644 index 000000000..c1433f026 Binary files /dev/null and b/static/font/inter/700i.woff differ diff --git a/static/font/inter/700i.woff2 b/static/font/inter/700i.woff2 new file mode 100644 index 000000000..f38628a40 Binary files /dev/null and b/static/font/inter/700i.woff2 differ diff --git a/static/font/inter/800.woff b/static/font/inter/800.woff new file mode 100644 index 000000000..4a4325601 Binary files /dev/null and b/static/font/inter/800.woff differ diff --git a/static/font/inter/800.woff2 b/static/font/inter/800.woff2 new file mode 100644 index 000000000..d0ca0b8f9 Binary files /dev/null and b/static/font/inter/800.woff2 differ diff --git a/static/font/inter/800i.woff b/static/font/inter/800i.woff new file mode 100644 index 000000000..a0497079d Binary files /dev/null and b/static/font/inter/800i.woff differ diff --git a/static/font/inter/800i.woff2 b/static/font/inter/800i.woff2 new file mode 100644 index 000000000..112410afa Binary files /dev/null and b/static/font/inter/800i.woff2 differ diff --git a/static/font/inter/900.woff b/static/font/inter/900.woff new file mode 100644 index 000000000..0ba580488 Binary files /dev/null and b/static/font/inter/900.woff differ diff --git a/static/font/inter/900.woff2 b/static/font/inter/900.woff2 new file mode 100644 index 000000000..89f8071ee Binary files /dev/null and b/static/font/inter/900.woff2 differ diff --git a/static/font/inter/900i.woff b/static/font/inter/900i.woff new file mode 100644 index 000000000..f7f936d04 Binary files /dev/null and b/static/font/inter/900i.woff differ diff --git a/static/font/inter/900i.woff2 b/static/font/inter/900i.woff2 new file mode 100644 index 000000000..8a3dcaaaa Binary files /dev/null and b/static/font/inter/900i.woff2 differ diff --git a/static/font/inter/inter-ui.css b/static/font/inter/inter-ui.css new file mode 100644 index 000000000..ba7c32640 --- /dev/null +++ b/static/font/inter/inter-ui.css @@ -0,0 +1,129 @@ +@font-face { + font-family: "Inter UI"; + font-style: normal; + font-weight: 400; + src: url("Inter-UI.var.woff2") format("woff2-variations"), + url("Inter-UI-Regular.woff2") format("woff2"), + url("Inter-UI-Regular.woff") format("woff"); +} + +@font-face { + font-family: "Inter UI"; + font-style: italic; + font-weight: 400; + src: url("Inter-UI.var.woff2") format("woff2-variations"), + url("Inter-UI-Italic.woff2") format("woff2"), + url("Inter-UI-Italic.woff") format("woff"); +} + +@font-face { + font-family: "Inter UI"; + font-style: normal; + font-weight: 500; + src: url("Inter-UI.var.woff2") format("woff2-variations"), + url("Inter-UI-Medium.woff2") format("woff2"), + url("Inter-UI-Medium.woff") format("woff"); +} + +@font-face { + font-family: "Inter UI"; + font-style: italic; + font-weight: 500; + src: url("Inter-UI.var.woff2") format("woff2-variations"), + url("Inter-UI-MediumItalic.woff2") format("woff2"), + url("Inter-UI-MediumItalic.woff") format("woff"); +} + +@font-face { + font-family: "Inter UI"; + font-style: normal; + font-weight: 600; + src: url("Inter-UI.var.woff2") format("woff2-variations"), + url("Inter-UI-SemiBold.woff2") format("woff2"), + url("Inter-UI-SemiBold.woff") format("woff"); +} + +@font-face { + font-family: "Inter UI"; + font-style: italic; + font-weight: 600; + src: url("Inter-UI.var.woff2") format("woff2-variations"), + url("Inter-UI-SemiBoldItalic.woff2") format("woff2"), + url("Inter-UI-SemiBoldItalic.woff") format("woff"); +} + +@font-face { + font-family: "Inter UI"; + font-style: normal; + font-weight: 700; + src: url("Inter-UI.var.woff2") format("woff2-variations"), + url("Inter-UI-Bold.woff2") format("woff2"), + url("Inter-UI-Bold.woff") format("woff"); +} + +@font-face { + font-family: "Inter UI"; + font-style: italic; + font-weight: 700; + src: url("Inter-UI.var.woff2") format("woff2-variations"), + url("Inter-UI-BoldItalic.woff2") format("woff2"), + url("Inter-UI-BoldItalic.woff") format("woff"); +} + +@font-face { + font-family: "Inter UI"; + font-style: normal; + font-weight: 800; + src: url("Inter-UI.var.woff2") format("woff2-variations"), + url("Inter-UI-ExtraBold.woff2") format("woff2"), + url("Inter-UI-ExtraBold.woff") format("woff"); +} + +@font-face { + font-family: "Inter UI"; + font-style: italic; + font-weight: 800; + src: url("Inter-UI.var.woff2") format("woff2-variations"), + url("Inter-UI-ExtraBoldItalic.woff2") format("woff2"), + url("Inter-UI-ExtraBoldItalic.woff") format("woff"); +} + +@font-face { + font-family: "Inter UI"; + font-style: normal; + font-weight: 900; + src: url("Inter-UI.var.woff2") format("woff2-variations"), + url("Inter-UI-Black.woff2") format("woff2"), + url("Inter-UI-Black.woff") format("woff"); +} + +@font-face { + font-family: "Inter UI"; + font-style: italic; + font-weight: 900; + src: url("Inter-UI.var.woff2") format("woff2-variations"), + url("Inter-UI-BlackItalic.woff2") format("woff2"), + url("Inter-UI-BlackItalic.woff") format("woff"); +} + +/* +Single variable font. +Note that you may want to do something like this to make sure you"re serving +constant fonts to older browsers: + +html { + font-family: "Inter UI", sans-serif; +} +@supports (font-variation-settings: normal) { + html { + font-family: "Inter UI var", sans-serif; + } +} + +*/ +@font-face { + font-family: "Inter UI var"; + font-weight: 400 900; /* safe weight range */ + src: url("Inter-UI.var.woff2") format("woff2-variations"), + url("Inter-UI.var.woff2") format("woff2"); +} diff --git a/static/font/inter/variable.woff2 b/static/font/inter/variable.woff2 new file mode 100644 index 000000000..fe1920cc1 Binary files /dev/null and b/static/font/inter/variable.woff2 differ diff --git a/static/font/metropolis/bold.eot b/static/font/metropolis/bold.eot deleted file mode 100644 index 48ded273f..000000000 Binary files a/static/font/metropolis/bold.eot and /dev/null differ diff --git a/static/font/metropolis/bold.otf b/static/font/metropolis/bold.otf deleted file mode 100644 index 40a8a1682..000000000 Binary files a/static/font/metropolis/bold.otf and /dev/null differ diff --git a/static/font/metropolis/bold.svg b/static/font/metropolis/bold.svg deleted file mode 100644 index 92af03602..000000000 --- a/static/font/metropolis/bold.svg +++ /dev/null @@ -1,875 +0,0 @@ - - - - -Created by FontForge 20090622 at Fri Dec 8 09:51:27 2017 - By deploy user -Copyright © 2016 by Chris Simpson. - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/static/font/metropolis/bold.ttf b/static/font/metropolis/bold.ttf deleted file mode 100644 index f67993325..000000000 Binary files a/static/font/metropolis/bold.ttf and /dev/null differ diff --git a/static/font/metropolis/bold.woff b/static/font/metropolis/bold.woff deleted file mode 100644 index f5508b97c..000000000 Binary files a/static/font/metropolis/bold.woff and /dev/null differ diff --git a/static/font/metropolis/medium.eot b/static/font/metropolis/medium.eot deleted file mode 100644 index b8d6eb90e..000000000 Binary files a/static/font/metropolis/medium.eot and /dev/null differ diff --git a/static/font/metropolis/medium.otf b/static/font/metropolis/medium.otf deleted file mode 100644 index aee4d98c4..000000000 Binary files a/static/font/metropolis/medium.otf and /dev/null differ diff --git a/static/font/metropolis/medium.svg b/static/font/metropolis/medium.svg deleted file mode 100644 index 42ae97670..000000000 --- a/static/font/metropolis/medium.svg +++ /dev/null @@ -1,876 +0,0 @@ - - - - -Created by FontForge 20090622 at Fri Dec 8 10:34:17 2017 - By deploy user -Copyright © 2016 by Chris Simpson. - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/static/font/metropolis/medium.ttf b/static/font/metropolis/medium.ttf deleted file mode 100644 index 1bb9493cd..000000000 Binary files a/static/font/metropolis/medium.ttf and /dev/null differ diff --git a/static/font/metropolis/medium.woff b/static/font/metropolis/medium.woff deleted file mode 100644 index 6e8b41eed..000000000 Binary files a/static/font/metropolis/medium.woff and /dev/null differ diff --git a/static/font/metropolis/semibold.eot b/static/font/metropolis/semibold.eot deleted file mode 100644 index 8bb29729f..000000000 Binary files a/static/font/metropolis/semibold.eot and /dev/null differ diff --git a/static/font/metropolis/semibold.otf b/static/font/metropolis/semibold.otf deleted file mode 100644 index 2fb1be69d..000000000 Binary files a/static/font/metropolis/semibold.otf and /dev/null differ diff --git a/static/font/metropolis/semibold.svg b/static/font/metropolis/semibold.svg deleted file mode 100644 index 5181438f1..000000000 --- a/static/font/metropolis/semibold.svg +++ /dev/null @@ -1,875 +0,0 @@ - - - - -Created by FontForge 20090622 at Fri Dec 8 09:52:08 2017 - By deploy user -Copyright © 2016 by Chris Simpson. - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/static/font/metropolis/semibold.ttf b/static/font/metropolis/semibold.ttf deleted file mode 100644 index febf889f3..000000000 Binary files a/static/font/metropolis/semibold.ttf and /dev/null differ diff --git a/static/font/metropolis/semibold.woff b/static/font/metropolis/semibold.woff deleted file mode 100644 index 2f50d16ad..000000000 Binary files a/static/font/metropolis/semibold.woff and /dev/null differ diff --git a/static/themes/dark.css b/static/themes/dark.css deleted file mode 100644 index cf18cbac0..000000000 --- a/static/themes/dark.css +++ /dev/null @@ -1,96 +0,0 @@ -:root { - - /* Colors */ - --color-divider: #53637C;; - --color-canvas: transparent; - --color-help: #8696AF; - --color-download: rgba(255, 255, 255, 0.75); - --color-download-overlay: var(--color-black); - --color-bg: var(--color-blue-grey); - --color-bg-alt: #2D3D56; - --color-placeholder: var(--color-bg-alt); - --color-credit-free: var(--color-secondary); - - /* Text */ - --text-color: var(--color-text-white); - --text-help-color: var(--color-help); - - /* Form */ - --form-label-color: var(--color-white); - - /* Input */ - --input-bg: transparent; - --input-label-color: var(--color-help); - --input-color: var(--text-color); - --input-border-size: 1px; - --input-border-color: rgba(255,255,255, 0.5); - --input-hover-border-color: rgba(255, 255, 255, 1); - --input-copyable-bg: var(--color-blue-grey); - --input-copyable-color: #8696AF; - --input-copyable-border: #53637C; - --input-select-bg-color: var(--color-bg-alt); - --input-select-color: var(--color-white); - - /* input:disabled */ - --input-disabled-border-color: rgba(255, 255, 255, 0.42); - --input-disabled-color: rgba(255, 255, 255, 0.54); - - /* Button */ - --btn-bg-primary: var(--color-primary); - --btn-color-primary: var(--color-white); - --btn-bg-primary-hover: var(--color-primary-light); - --btn-bg-alt: #13233C; - --btn-color-alt: var(--text-color); - --btn-home-bg-color: #44548F; - - /* Header */ - --header-bg: var(--color-white); - --header-color: var(--color-text); - --header-active-color: rgba(0, 0, 0, 0.85); - --header-button-bg: transparent; - --header-button-hover-bg: rgba(100, 100, 100, 0.15); - --header-primary-color: var(--color-purple); - - /* Header */ - --header-color: #CCC; - --header-active-color: var(--color-white); - --header-button-hover-bg: var(--color-bg-alt); - - /* Header -> search */ - --search-color: var(--color-white); - --search-bg-color: rgb(58, 74, 99); - --search-active-bg-color: #13233C; - --search-active-shadow: 0 6px 9px -2px var(--color-grey--dark); - --search-modal-input-height: 70px; - --search-exact-result: #4C5D77; - - /* Nav */ - --nav-color: #44548F; - --nav-bg-color: #0D102F; - - /* Table */ - --table-border: 1px solid var(--color-bg-alt); - --table-item-odd: var(--color-bg-alt); - - /* Card */ - --card-bg: #13233C; - --card-radius: 3px; - --card-text-color: var(--color-help); - --card-wallet-color: var(--text-color-inverse); - --success-msg-color: var(--color-primary-light); - --success-msg-border:var(--color-primary); - --success-msg-bg: var(--color-bg); - - /* Modal */ - --modal-bg: var(--card-bg); - --modal-overlay-bg: rgba(32,48,73, 0.75); - --modal-border: 1px solid rgba(0, 0, 0, 0.25); - --modal-btn-bg-color: var(--color-bg-alt); - - /* Scrollbar */ - --scrollbar-thumb-bg: rgba(255, 255, 255, 0.20); - --scrollbar-thumb-hover-bg: #8696AF; - - /* Shadows */ - --box-shadow-header: 0px 6px 20px 1px rgba(0, 0, 0, 0.2); -} diff --git a/static/themes/light.css b/static/themes/light.css deleted file mode 100644 index 052bf632f..000000000 --- a/static/themes/light.css +++ /dev/null @@ -1 +0,0 @@ -:root {} diff --git a/yarn.lock b/yarn.lock index 60f05346b..0461d6aab 100644 --- a/yarn.lock +++ b/yarn.lock @@ -101,6 +101,10 @@ lodash "^4.2.0" to-fast-properties "^2.0.0" +"@lbry/color@^1.0.2": + version "1.0.3" + resolved "https://registry.yarnpkg.com/@lbry/color/-/color-1.0.3.tgz#ec22b2c48b0e358759528fb3bbe7ba468d4e41ca" + "@mapbox/hast-util-table-cell-style@^0.1.3": version "0.1.3" resolved "https://registry.yarnpkg.com/@mapbox/hast-util-table-cell-style/-/hast-util-table-cell-style-0.1.3.tgz#5b7166ae01297d72216932b245e4b2f0b642dca6"