diff --git a/CHANGELOG.md b/CHANGELOG.md index c9e0a3984..123c53477 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -9,9 +9,14 @@ Web UI version numbers should always match the corresponding version of LBRY App ## [Unreleased] ### Added * Add setting to automatically purchase low-cost content without a confirmation dialog + * New custom styled scrollbar (#574) * ### Changed + * Changed the File page to make it clearer how to to open the folder for a file. + * Improved tabs styles with a nice animation. (#547) + * Display search bar on discover page instead of title and remove duplicated icon. + * Minor update for themes. * Updated the daemon from 0.16.1 to [0.16.4](https://github.com/lbryio/lbry/releases/tag/v0.16.4) to improve download performance and download issue detection. * There is no longer a minimum channel length (#645) * Changed the File page to make it clearer how to to open the folder for a file @@ -24,6 +29,9 @@ Web UI version numbers should always match the corresponding version of LBRY App * While editing a publish, the URL will no longer change if you select a new file. (#601) * Fixed issues with opening the folder for a file (#606) * Be consistent with the step property on credit inputs (#604) + * Fixed unresponsive header (#613) + * Fixed dark theme issues with text content. + * Minor css fixes. * Fixed issue when file fails to download (#642) * Fixed issue after accessing a video without enough credits (#605) * Fixed channel fetching without claims (#634) @@ -33,7 +41,7 @@ Web UI version numbers should always match the corresponding version of LBRY App * ### Removed - * + * * ## [0.16.0] - 2017-09-21 diff --git a/ui/dist/index.html b/ui/dist/index.html index 4be7ceb5b..b48a3a0a7 100644 --- a/ui/dist/index.html +++ b/ui/dist/index.html @@ -3,8 +3,7 @@ LBRY - - + diff --git a/ui/dist/themes/dark.css b/ui/dist/themes/dark.css index c32108393..e95cf2143 100644 --- a/ui/dist/themes/dark.css +++ b/ui/dist/themes/dark.css @@ -27,20 +27,30 @@ --search-border: 1px solid rgba(0,0,0, 0.25); /* Tab */ - --tab-color: #757575; - --tab-active-color: #CCC; + --tab-color: rgba(255,255,255, 0.5) ; + --tab-active-color: rgba(255,255,255, 0.75); /* Header */ --header-color: #CCC; --header-active-color: #FFF; - --header-button-bg: transparent; + --header-button-hover-bg: var(--color-bg-alt); /* Table */ --table-border: 0; --table-item-even: var(--color-bg-alt); --table-item-odd: transparent; - /* Modla */ + /* Modal */ --modal-overlay-bg: var(--color-dark-overlay); --modal-border: 1px solid rgba(0, 0, 0, 0.25); + + /* Scrollbar */ + --scrollbar-thumb-bg: rgba(255, 255, 255, 0.20); + --scrollbar-thumb-hover-bg: rgba(255, 255, 255, 0.35); + + /* Media */ + --media-bg: #90A4AE; + + /* Divider */ + --divider: 1px solid rgba(255, 225, 225, 0.12); } diff --git a/ui/dist/themes/light.css b/ui/dist/themes/light.css index c95f61136..4409f8f54 100644 --- a/ui/dist/themes/light.css +++ b/ui/dist/themes/light.css @@ -1,4 +1,8 @@ :root { /* Colors */ --color-primary: #155B4A; + + /* search */ + --search-bg: var(--color-canvas); + --search-border: 1px solid rgba(0,0,0,0.15); } diff --git a/ui/js/component/dateTime/view.jsx b/ui/js/component/dateTime/view.jsx index 747286daa..b5dff1239 100644 --- a/ui/js/component/dateTime/view.jsx +++ b/ui/js/component/dateTime/view.jsx @@ -5,6 +5,14 @@ class DateTime extends React.PureComponent { static SHOW_TIME = "time"; static SHOW_BOTH = "both"; + static defaultProps = { + formatOptions: { + month: "long", + day: "numeric", + year: "numeric", + }, + }; + componentWillMount() { this.refreshDate(this.props); } @@ -23,16 +31,18 @@ class DateTime extends React.PureComponent { render() { const { date, formatOptions } = this.props; const show = this.props.show || DateTime.SHOW_BOTH; + const locale = app.i18n.getLocale(); return ( {date && (show == DateTime.SHOW_BOTH || show === DateTime.SHOW_DATE) && - date.toLocaleDateString()} + date.toLocaleDateString([locale, "en-US"], formatOptions)} {show == DateTime.SHOW_BOTH && " "} {date && (show == DateTime.SHOW_BOTH || show === DateTime.SHOW_TIME) && date.toLocaleTimeString()} + {!date && "..."} ); } diff --git a/ui/js/component/file-selector.js b/ui/js/component/file-selector.js index b0298424f..391ce9acf 100644 --- a/ui/js/component/file-selector.js +++ b/ui/js/component/file-selector.js @@ -12,6 +12,11 @@ class FileSelector extends React.PureComponent { type: "file", }; + constructor(props) { + super(props); + this._inputElem = null; + } + componentWillMount() { this.setState({ path: this.props.initPath || null, @@ -47,16 +52,31 @@ class FileSelector extends React.PureComponent {
{" "} - {this.state.path ? this.state.path : __("No File Chosen")} + { + this._inputElem = input; + }} + onFocus={() => { + this._inputElem.select(); + }} + readOnly="readonly" + value={this.state.path || __("No File Chosen")} + />
); diff --git a/ui/js/component/fileActions/view.jsx b/ui/js/component/fileActions/view.jsx index ecb218228..0ce2bad9f 100644 --- a/ui/js/component/fileActions/view.jsx +++ b/ui/js/component/fileActions/view.jsx @@ -12,30 +12,40 @@ class FileActions extends React.PureComponent { return (
- {claimIsMine && - } - {showDelete && openModal(modals.CONFIRM_FILE_REMOVE, { uri })} />} + {!claimIsMine && + } + + {claimIsMine && + }
); } diff --git a/ui/js/component/fileCard/view.jsx b/ui/js/component/fileCard/view.jsx index 3ff093ef0..be825dc55 100644 --- a/ui/js/component/fileCard/view.jsx +++ b/ui/js/component/fileCard/view.jsx @@ -105,9 +105,11 @@ class FileCard extends React.PureComponent { + {/* Test for nizuka's design: should we remove description?
{description}
+ */} {obscureNsfw && this.state.hovered && } diff --git a/ui/js/component/fileDetails/view.jsx b/ui/js/component/fileDetails/view.jsx index aaa6ab24e..257d0593e 100644 --- a/ui/js/component/fileDetails/view.jsx +++ b/ui/js/component/fileDetails/view.jsx @@ -27,7 +27,6 @@ class FileDetails extends React.PureComponent { } const { description, language, license } = metadata; - const { height } = claim; const mediaType = lbry.getMediaType(contentType); const downloadPath = fileInfo @@ -36,7 +35,9 @@ class FileDetails extends React.PureComponent { return (
+
+
- - - - @@ -71,12 +68,6 @@ class FileDetails extends React.PureComponent { }
{__("Published on")}
{__("Content-Type")}{mediaType}
-

- -

); diff --git a/ui/js/component/fileDownloadLink/view.jsx b/ui/js/component/fileDownloadLink/view.jsx index 49c6c29ce..9980e8a07 100644 --- a/ui/js/component/fileDownloadLink/view.jsx +++ b/ui/js/component/fileDownloadLink/view.jsx @@ -80,6 +80,7 @@ class FileDownloadLink extends React.PureComponent { button="text" label={__("Download")} icon="icon-download" + className="no-underline" onClick={() => { purchaseUri(uri); }} @@ -92,6 +93,7 @@ class FileDownloadLink extends React.PureComponent { label={__("Open")} button="text" icon="icon-external-link-square" + className="no-underline" onClick={() => openInShell(fileInfo.download_path)} /> ); diff --git a/ui/js/component/fileTile/view.jsx b/ui/js/component/fileTile/view.jsx index b243ea1d6..f23f26ec9 100644 --- a/ui/js/component/fileTile/view.jsx +++ b/ui/js/component/fileTile/view.jsx @@ -126,14 +126,14 @@ class FileTile extends React.PureComponent { {" "} {showLocal && fileInfo && } -
{uri}

{title}

+ {uri}
{description &&
- + {description}
} diff --git a/ui/js/component/header/view.jsx b/ui/js/component/header/view.jsx index 81b70d703..89f6df923 100644 --- a/ui/js/component/header/view.jsx +++ b/ui/js/component/header/view.jsx @@ -47,6 +47,7 @@ export const Header = props => { navigate("/wallet")} button="text" + className="no-underline" icon="icon-bank" label={balance} title={__("Wallet")} diff --git a/ui/js/component/rewardSummary/view.jsx b/ui/js/component/rewardSummary/view.jsx index d96fe79aa..d5f452477 100644 --- a/ui/js/component/rewardSummary/view.jsx +++ b/ui/js/component/rewardSummary/view.jsx @@ -18,9 +18,8 @@ const RewardSummary = props => { unclaimed rewards.

}
-
- - +
+
); diff --git a/ui/js/component/rewardTile/view.jsx b/ui/js/component/rewardTile/view.jsx index 027fc484f..df543561b 100644 --- a/ui/js/component/rewardTile/view.jsx +++ b/ui/js/component/rewardTile/view.jsx @@ -17,7 +17,7 @@ const RewardTile = props => {

{reward.reward_title}

{reward.reward_description}
-
+
{reward.reward_type == rewards.TYPE_REFERRAL && {date ?
- +
diff --git a/ui/js/component/uriIndicator/view.jsx b/ui/js/component/uriIndicator/view.jsx index a6dcb1a50..f9c9dc779 100644 --- a/ui/js/component/uriIndicator/view.jsx +++ b/ui/js/component/uriIndicator/view.jsx @@ -75,7 +75,11 @@ class UriIndicator extends React.PureComponent { } return ( - + {inner} ); diff --git a/ui/js/component/video/internal/player.jsx b/ui/js/component/video/internal/player.jsx index f81f95e68..cfdc13099 100644 --- a/ui/js/component/video/internal/player.jsx +++ b/ui/js/component/video/internal/player.jsx @@ -176,7 +176,7 @@ class VideoPlayer extends React.PureComponent { } {unplayable && } -
+
); } diff --git a/ui/js/component/walletBalance/view.jsx b/ui/js/component/walletBalance/view.jsx index 5e0eca86f..90d666895 100644 --- a/ui/js/component/walletBalance/view.jsx +++ b/ui/js/component/walletBalance/view.jsx @@ -21,19 +21,12 @@ const WalletBalance = props => { {(balance || balance === 0) && }
-
+
- -
diff --git a/ui/js/constants/icons.js b/ui/js/constants/icons.js index 6de5babcb..d9c36fc32 100644 --- a/ui/js/constants/icons.js +++ b/ui/js/constants/icons.js @@ -1,2 +1,3 @@ export const FEATURED = "rocket"; export const LOCAL = "folder"; +export const FILE = "file"; diff --git a/ui/js/page/file/view.jsx b/ui/js/page/file/view.jsx index f502d583f..750f36db8 100644 --- a/ui/js/page/file/view.jsx +++ b/ui/js/page/file/view.jsx @@ -52,6 +52,7 @@ class FilePage extends React.PureComponent { ); } + const { height } = claim; const title = metadata.title; const isRewardContent = rewardedContentClaimIds.includes(claim.claim_id); const mediaType = lbry.getMediaType(contentType); @@ -62,39 +63,42 @@ class FilePage extends React.PureComponent { mediaType === "audio"; return ( -
-
+
+
{isPlayable ?
-
-
- {(!tab || tab === "details") && -
- {" "} {" "} -
- {!fileInfo || fileInfo.written_bytes <= 0 - ? - - {isRewardContent && - {" "}} - - : null} -

{title}

-
- -
+
+
+ {(!tab || tab === "details") && +
+ {" "} {" "} +
+ {!fileInfo || fileInfo.written_bytes <= 0 + ? + + {isRewardContent && + {" "}} + + : null} +

{title}

+
+ + • + + Published on{" "} + +
- -
} - {tab === "tip" && - } -
-
-
+
+ +
} + {tab === "tip" && + } +
+ ); } } diff --git a/ui/js/selectors/navigation.js b/ui/js/selectors/navigation.js index b5eb98ade..0d3965f3c 100644 --- a/ui/js/selectors/navigation.js +++ b/ui/js/selectors/navigation.js @@ -95,10 +95,6 @@ export const selectPageTitle = createSelector( return __("Help"); case "developer": return __("Developer"); - case "search": - return params.query - ? __("Search results for %s", params.query) - : __("Search"); case "show": { const parts = [lbryuri.normalize(params.uri)]; // If the params has any keys other than "uri" @@ -111,8 +107,11 @@ export const selectPageTitle = createSelector( return __("Downloads & Purchases"); case "published": return __("Publishes"); - case "discover": - return __("Home"); + case "search": + return params.query + ? __("Search results for %s", params.query) + : __("Search"); + case "discover": case false: case null: case "": diff --git a/ui/js/selectors/search.js b/ui/js/selectors/search.js index 9b967d66e..5c1d70489 100644 --- a/ui/js/selectors/search.js +++ b/ui/js/selectors/search.js @@ -48,8 +48,6 @@ export const selectWunderBarIcon = createSelector( switch (page) { case "auth": return "icon-user"; - case "search": - return "icon-search"; case "settings": return "icon-gear"; case "help": @@ -81,7 +79,8 @@ export const selectWunderBarIcon = createSelector( case "developer": return "icon-code"; case "discover": - return "icon-home"; + case "search": + return "icon-search"; default: return "icon-file"; } diff --git a/ui/scss/_gui.scss b/ui/scss/_gui.scss index 9ca64b4e5..580862b54 100644 --- a/ui/scss/_gui.scss +++ b/ui/scss/_gui.scss @@ -7,7 +7,7 @@ html body { color: var(--text-color); - font-family: 'Source Sans Pro', sans-serif; + font-family: 'Roboto', sans-serif; line-height: var(--font-line-height); } @@ -25,7 +25,7 @@ body .credit-amount--indicator { - font-weight: bold; + font-weight: 500; color: var(--color-money); } .credit-amount--fee @@ -36,10 +36,16 @@ body #main-content { - padding: $spacing-vertical; - margin-top: var(--header-height); + margin: auto; display: flex; flex-direction: column; + overflow: overlay; + padding: $spacing-vertical; + position: absolute; + top: var(--header-height); + bottom: 0; + left: 4px; + right: 4px; main { margin-left: auto; margin-right: auto; diff --git a/ui/scss/_vars.scss b/ui/scss/_vars.scss index 0a86d1d76..fe7deb6c7 100644 --- a/ui/scss/_vars.scss +++ b/ui/scss/_vars.scss @@ -24,7 +24,6 @@ $text-color: #000; --color-bg: #ffffff; --color-bg-alt: #D9D9D9; - /* Misc */ --content-max-width: 1000px; --nsfw-blur-intensity: 20px; @@ -36,7 +35,7 @@ $text-color: #000; --font-size-subtext-multiple: 0.82; /* Shadows */ - --box-shadow-layer: 0 2px 2px 0 rgba(0,0,0,.14),0 3px 1px -2px rgba(0,0,0,.2),0 1px 5px 0 rgba(0,0,0,.12); + --box-shadow-layer: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24); --box-shadow-focus: 2px 4px 4px 0 rgba(0,0,0,.14),2px 5px 3px -2px rgba(0,0,0,.2),2px 3px 7px 0 rgba(0,0,0,.12); /* Transition */ @@ -74,24 +73,27 @@ $text-color: #000; --button-padding: $spacing-vertical * 2/3; --button-height: $spacing-vertical * 1.5; --button-intra-margin: $spacing-vertical; + --button-radius: 3px; /* Header */ --header-bg: var(--color-bg); --header-color: #666; --header-active-color: rgba(0,0,0, 0.85); --header-height: $spacing-vertical * 2.5; - --header-button-bg: var(--button-bg); + --header-button-bg: transparent; //var(--button-bg); + --header-button-hover-bg: rgba(100, 100, 100, 0.15); /* Header -> search */ --search-bg: rgba(255, 255, 255, 0.7); --search-border:1px solid #ccc; --search-color: #666; --search-active-color: var(--header-active-color); + --search-active-shadow: 0 0 3px 0px var(--text-selection-bg); /* Tabs */ --tab-bg: transparent; - --tab-color: #666; - --tab-active-color: var(--header-active-color); + --tab-color: rgba(0, 0, 0, 0.5); + --tab-active-color: var(--color-primary); --tab-border-size: 2px; --tab-border: var(--tab-border-size) solid var(--tab-active-color); @@ -125,4 +127,22 @@ $text-color: #000; --tooltip-bg: var(--color-bg); --tooltip-color: var(--text-color); --tooltip-border: 1px solid #aaa; + + /* Scrollbar */ + --scrollbar-radius: 10px; + --scrollbar-thumb-bg: rgba(0, 0, 0, 0.20); + --scrollbar-thumb-hover-bg: rgba(0, 0, 0, 0.35); + --scrollbar-thumb-active-bg: var(--color-primary); + --scrollbar-track-bg: transparent; + + /* Media */ + --media-bg: #FFF; + + /* Divider */ + --divider: 1px solid rgba(0, 0, 0, 0.12); + + /* Animation :) */ + --animation-duration: 0.3s; + --animation-style: cubic-bezier(.55,0,.1,1); + } diff --git a/ui/scss/all.scss b/ui/scss/all.scss index 513b650d1..3b4dc401e 100644 --- a/ui/scss/all.scss +++ b/ui/scss/all.scss @@ -21,4 +21,8 @@ @import "component/_video.scss"; @import "component/_pagination.scss"; @import "component/_markdown-editor.scss"; +@import "component/_scrollbar.scss"; +@import "component/_tabs.scss"; +@import "component/_media.scss"; +@import "component/_divider.scss"; @import "page/_show.scss"; diff --git a/ui/scss/component/__divider.scss b/ui/scss/component/__divider.scss new file mode 100644 index 000000000..00fbb74eb --- /dev/null +++ b/ui/scss/component/__divider.scss @@ -0,0 +1,8 @@ +.divider__horizontal { + border-top: var(--divider); + margin: 16px 0; +} + +.divider__vertical { + margin: 10px; +} diff --git a/ui/scss/component/_button.scss b/ui/scss/component/_button.scss index acc67e0aa..7ba181c78 100644 --- a/ui/scss/component/_button.scss +++ b/ui/scss/component/_button.scss @@ -20,7 +20,7 @@ $button-focus-shift: 12%; text-decoration: none; border: 0 none; text-align: center; - border-radius: 2px; + border-radius: var(--button-radius); text-transform: uppercase; .icon { @@ -43,10 +43,17 @@ $button-focus-shift: 12%; .button-block { cursor: pointer; + font-weight: 500; + font-size: 14px; + transition: background var(--animation-duration) var(--animation-style); } .button__content { margin: 0 var(--button-padding); + display: flex; + .link-label { + text-decoration: none !important; + } } .button-primary @@ -89,6 +96,5 @@ $button-focus-shift: 12%; .button--submit { font-family: inherit; - font-size: inherit; line-height: 0; } diff --git a/ui/scss/component/_card.scss b/ui/scss/component/_card.scss index 03b515a4b..1de1e4494 100644 --- a/ui/scss/component/_card.scss +++ b/ui/scss/component/_card.scss @@ -44,8 +44,7 @@ text-overflow: ellipsis; } .card__title-identity { - margin-top: $spacing-vertical * 1/3; - margin-bottom: $spacing-vertical * 1/3; + margin: 16px 0; } .card__actions { margin-top: var(--card-margin); @@ -54,6 +53,7 @@ .card__actions--bottom { margin-top: $spacing-vertical * 1/3; margin-bottom: $spacing-vertical * 1/3; + border-top: var(--divider); } .card__actions--form-submit { margin-top: $spacing-vertical; @@ -101,7 +101,7 @@ $font-size-subtext-multiple: 0.82; cursor: pointer; } .card--link { - transition: transform 120ms ease-in-out; + transition: transform 0.2s var(--animation-style); } .card--link:hover { position: relative; @@ -222,7 +222,7 @@ $padding-right-card-hover-hack: 30px; display: inline-block; } > .card + .card { - margin-left: $spacing-vertical / 3; + margin-left: 16px; } } @@ -234,7 +234,7 @@ $padding-right-card-hover-hack: 30px; margin-right: $spacing-vertical; } .card-row__header { - margin-bottom: $spacing-vertical / 3; + margin-bottom: 16px; } .card-row__scrollhouse { @@ -260,7 +260,7 @@ $padding-right-card-hover-hack: 30px; top: 36%; z-index: 2; opacity: 0.8; - transition: transform 60ms ease-in-out; + transition: transform 0.2s var(--animation-style); &:hover { opacity: 1.0; @@ -288,4 +288,4 @@ if we keep doing things like this, we should add a real grid system, but I'm goi > .card:nth-of-type(2n - 1):not(:last-child) { margin-right: $margin-card-grid; } -} \ No newline at end of file +} diff --git a/ui/scss/component/_file-download.scss b/ui/scss/component/_file-download.scss index 13ce6e1f3..485e2ea9d 100644 --- a/ui/scss/component/_file-download.scss +++ b/ui/scss/component/_file-download.scss @@ -20,13 +20,3 @@ top: 0px; left: 0px; } - -/* - -.file-actions -{ - line-height: var(--button-height); - min-height: var(--button-height); -} - - */ \ No newline at end of file diff --git a/ui/scss/component/_file-selector.scss b/ui/scss/component/_file-selector.scss index 2cb9fd322..31dc20d81 100644 --- a/ui/scss/component/_file-selector.scss +++ b/ui/scss/component/_file-selector.scss @@ -1,5 +1,12 @@ +.file-selector { + display: flex; +} + .file-selector__choose-button { - font-size: 13px; + font-family: inherit; + line-height: 0; + color: inherit; + margin-right: 16px; } .file-selector__path { diff --git a/ui/scss/component/_file-tile.scss b/ui/scss/component/_file-tile.scss index c35be3f9b..73273f2e9 100644 --- a/ui/scss/component/_file-tile.scss +++ b/ui/scss/component/_file-tile.scss @@ -1,4 +1,3 @@ - $height-file-tile: $spacing-vertical * 6; .file-tile__row { overflow: hidden; @@ -16,7 +15,19 @@ $height-file-tile: $spacing-vertical * 6; padding-top: $spacing-vertical * 1/3; margin-left: $height-file-tile + $spacing-vertical / 2; } + .card__title-primary { margin-top: 0; } -} \ No newline at end of file + + .file-tile__uri { + color: var(--color-primary); + font-size: 0.82em; + display: inline-block; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + max-width: 85%; + } + +} diff --git a/ui/scss/component/_form-field.scss b/ui/scss/component/_form-field.scss index 86cd8cd34..8fc120787 100644 --- a/ui/scss/component/_form-field.scss +++ b/ui/scss/component/_form-field.scss @@ -36,7 +36,10 @@ input[type="text"].input-copyable { padding-left: 5px; padding-right: 5px; width: 100%; - &:focus { border-color: var(--color-primary); } + &:focus { + border-color: var(--color-primary); + background: none !important; + } } .form-field { diff --git a/ui/scss/component/_header.scss b/ui/scss/component/_header.scss index 9428298e2..769622fd8 100644 --- a/ui/scss/component/_header.scss +++ b/ui/scss/component/_header.scss @@ -4,6 +4,8 @@ color: var(--header-color); background: var(--header-bg); display: flex; + align-items: center; + justify-content: space-around; position: fixed; box-shadow: var(--box-shadow-layer); top: 0; @@ -14,11 +16,14 @@ box-sizing: border-box; } .header__item { - flex: 0 0 content; padding-left: $spacing-vertical / 4; padding-right: $spacing-vertical / 4; .button-alt { background: var(--header-button-bg) !important; + font-size: 1em; + } + .button-alt:hover { + background: var(--header-button-hover-bg) !important; } } @@ -52,42 +57,7 @@ &:focus { background: var(--search-active-bg); color: var(--search-active-color); - box-shadow: var(--box-shadow-focus); + box-shadow: var(--search-active-shadow); border-color: var(--color-primary); } } - -nav.sub-header -{ - text-transform: uppercase; - padding: 0 0 $spacing-vertical; - max-width: $width-page-constrained; - margin-left: auto; - margin-right: auto; - > a - { - display: inline-block; - margin: 0 15px; - padding: 0 5px; - line-height:calc(var(--header-height) - $spacing-vertical - var(--tab-border-size)); - color: var(--tab-color); - - &:first-child - { - margin-left: 0; - } - &:last-child - { - margin-right: 0; - } - &.sub-header-selected - { - border-bottom: var(--tab-border); - color: var(--tab-active-color); - } - &:hover - { - color: var(--tab-active-color); - } - } -} diff --git a/ui/scss/component/_media.scss b/ui/scss/component/_media.scss new file mode 100644 index 000000000..f1c4f4ae4 --- /dev/null +++ b/ui/scss/component/_media.scss @@ -0,0 +1,5 @@ +.media { + /* temp fix for text files + background: var(--media-bg); + */ +} diff --git a/ui/scss/component/_scrollbar.scss b/ui/scss/component/_scrollbar.scss new file mode 100644 index 000000000..b95a5f899 --- /dev/null +++ b/ui/scss/component/_scrollbar.scss @@ -0,0 +1,24 @@ +::-webkit-scrollbar { + width: 7px; + overflow: auto; +} + +::-webkit-scrollbar-track { + background: var(--scrollbar-track-bg); + border-radius: var(--scrollbar-radius); + margin: 4px 0; +} + +::-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); +} + +::-webkit-scrollbar-thumb:active { + background-color: var(--scrollbar-thumb-active-bg); +} diff --git a/ui/scss/component/_table.scss b/ui/scss/component/_table.scss index 59edeb480..06f33aaf0 100644 --- a/ui/scss/component/_table.scss +++ b/ui/scss/component/_table.scss @@ -7,7 +7,7 @@ table.table-standard { padding: $spacing-vertical/2 8px; } th { - font-weight: bold; + font-weight: 500; font-size: 0.9em; } td { @@ -15,7 +15,7 @@ table.table-standard { } thead th, > tr:first-child th { vertical-align: bottom; - font-weight: bold; + font-weight: 500; font-size: 0.9em; padding: $spacing-vertical/4+1 8px $spacing-vertical/4-2; text-align: left; @@ -67,4 +67,4 @@ table.table-transactions { td:nth-of-type(3) { width: 15%; } td:nth-of-type(4) { width: 40%; } td:nth-of-type(5) { width: 15%; } -} \ No newline at end of file +} diff --git a/ui/scss/component/_tabs.scss b/ui/scss/component/_tabs.scss new file mode 100644 index 000000000..9ae07fb22 --- /dev/null +++ b/ui/scss/component/_tabs.scss @@ -0,0 +1,57 @@ +/* Tabs */ + +nav.sub-header +{ + text-transform: uppercase; + max-width: $width-page-constrained; + margin-bottom: 40px; + border-bottom: var(--divider); + > a + { + height: 38px; + line-height: 38px; + text-align: center; + font-weight: 500; + text-transform: uppercase; + display: inline-block; + vertical-align: baseline; + margin: 0 12px; + padding: 0 8px; + color: var(--tab-color); + position: relative; + + &:first-child + { + margin-left: 0; + } + &:last-child + { + margin-right: 0; + } + &.sub-header-selected + { + color: var(--tab-active-color); + &:before { + width: 100%; + height: var(--tab-border-size); + background: var(--tab-active-color); + position: absolute; + bottom: 0; + left: 0; + content: ''; + animation-name: activeTab; + animation-duration: var(--animation-duration); + animation-timing-function: var(--animation-style); + } + } + &:hover + { + color: var(--tab-active-color); + } + } +} + +@keyframes activeTab { + from {width: 0;} + to {width: 100%;} +} diff --git a/ui/scss/component/_video.scss b/ui/scss/component/_video.scss index 46cd07eee..3f3204308 100644 --- a/ui/scss/component/_video.scss +++ b/ui/scss/component/_video.scss @@ -31,9 +31,6 @@ video { &.video--hidden { height: $height-video-embedded; } - &.video--active { - /*background: none;*/ - } } .video--obscured .video__cover { diff --git a/ui/scss/page/_show.scss b/ui/scss/page/_show.scss index d52f28381..88ec2b7dd 100644 --- a/ui/scss/page/_show.scss +++ b/ui/scss/page/_show.scss @@ -1,6 +1,7 @@ .show-page-media { text-align: center; - margin-bottom: $spacing-vertical; + margin-bottom: 16px; + overflow: auto; img { max-width: 100%; } @@ -9,4 +10,4 @@ width: 100%; min-height: 500px; } -} \ No newline at end of file +}