LBRYCommunity/lbry-desktop
1
0
Fork 0
Code Issues 596 Pull requests 6 Packages Projects Releases 238 Wiki Activity

Merge branch 'css_patch'

Browse source
This commit is contained in:
Jeremy Kauffman 2017-10-10 09:17:16 -04:00
parent d6b86c0f07 2039ab7f21
commit 646c91efcb
39 changed files with 347 additions and 172 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
CHANGELOG.md
View file

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

3
ui/dist/index.html vendored
View file

@ -3,8 +3,7 @@
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<title>LBRY</title>
<link href='https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,400italic,600italic,600' rel='stylesheet' type='text/css'>
<link href="https://fonts.googleapis.com/css?family=Roboto:400,400i,500,500i,700" rel="stylesheet">
<link href="./css/all.css" rel="stylesheet" type="text/css" media="screen,print" />
<link rel="icon" type="image/png" href="./img/fav/favicon-32x32.png" sizes="32x32">
<link rel="icon" type="image/png" href="./img/fav/favicon-194x194.png" sizes="194x194">

18
ui/dist/themes/dark.css vendored
View file

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

4
ui/dist/themes/light.css vendored
View file

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

12
ui/js/component/dateTime/view.jsx
View file

@ -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 (
<span>
{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 && "..."}
</span>
);
}

30
ui/js/component/file-selector.js
View file

@ -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 {
<div className="file-selector">
<button
type="button"
className="file-selector__choose-button"
className="button-block button-alt file-selector__choose-button"
onClick={() => this.handleButtonClick()}
>
{this.props.type == "file"
? __("Choose File")
: __("Choose Directory")}
<span className="button__content">
<span className="button-label">
{this.props.type == "file"
? __("Choose File")
: __("Choose Directory")}
</span>
</span>
</button>
{" "}
<span className="file-selector__path">
{this.state.path ? this.state.path : __("No File Chosen")}
<input
className="input-copyable"
type="text"
ref={input => {
this._inputElem = input;
}}
onFocus={() => {
this._inputElem.select();
}}
readOnly="readonly"
value={this.state.path || __("No File Chosen")}
/>
</span>
</div>
);

42
ui/js/component/fileActions/view.jsx
View file

@ -12,30 +12,40 @@ class FileActions extends React.PureComponent {
return (
<section className="card__actions">
{claimIsMine &&
<Link
button="text"
icon="icon-edit"
label={__("Edit")}
navigate="/publish"
navigateParams={{ id: claimId }}
/>}
<FileDownloadLink uri={uri} />
<Link
button="text"
icon="icon-gift"
label={__("Support")}
navigate="/show"
navigateParams={{ uri, tab: "tip" }}
/>
{showDelete &&
<Link
button="text"
icon="icon-trash"
label={__("Remove")}
className="card__action--right"
className="no-underline"
onClick={() => openModal(modals.CONFIRM_FILE_REMOVE, { uri })}
/>}
{!claimIsMine &&
<Link
button="text"
icon="icon-flag"
href={`https://lbry.io/dmca?claim_id=${claimId}`}
className="no-underline"
label={__("report")}
/>}
<Link
button="primary"
icon="icon-gift"
label={__("Support")}
navigate="/show"
className="card__action--right"
navigateParams={{ uri, tab: "tip" }}
/>
{claimIsMine &&
<Link
button="alt"
icon="icon-edit"
label={__("Edit")}
navigate="/publish"
className="card__action--right"
navigateParams={{ id: claimId }}
/>}
</section>
);
}

2
ui/js/component/fileCard/view.jsx
View file

@ -105,9 +105,11 @@ class FileCard extends React.PureComponent {
<UriIndicator uri={uri} />
</div>
</div>
{/* Test for nizuka's design: should we remove description?
<div className="card__content card__subtext card__subtext--two-lines">
<TruncatedMarkdown lines={2}>{description}</TruncatedMarkdown>
</div>
*/}
</Link>
</div>
{obscureNsfw && this.state.hovered && <NsfwOverlay />}

13
ui/js/component/fileDetails/view.jsx
View file

@ -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 (
<div>
<div className="divider__horizontal" />
<FileActions uri={uri} />
<div className="divider__horizontal" />
<div className="card__content card__subtext card__subtext--allow-newlines">
<ReactMarkdown
source={description || ""}
@ -47,10 +48,6 @@ class FileDetails extends React.PureComponent {
<div className="card__content">
<table className="table-standard table-stretch">
<tbody>
<tr>
<td>{__("Published on")}</td>
<td><DateTime block={height} /></td>
</tr>
<tr>
<td>{__("Content-Type")}</td><td>{mediaType}</td>
</tr>
@ -71,12 +68,6 @@ class FileDetails extends React.PureComponent {
</tr>}
</tbody>
</table>
<p>
<Link
href={`https://lbry.io/dmca?claim_id=${claim.claim_id}`}
label={__("report")}
/>
</p>
</div>
</div>
);

2
ui/js/component/fileDownloadLink/view.jsx
View file

@ -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)}
/>
);

4
ui/js/component/fileTile/view.jsx
View file

@ -126,14 +126,14 @@ class FileTile extends React.PureComponent {
{" "}
{showLocal && fileInfo && <Icon icon={icons.LOCAL} />}
</span>
<div className="meta">{uri}</div>
<h3>
<TruncatedText lines={1}>{title}</TruncatedText>
</h3>
<span className="file-tile__uri">{uri}</span>
</div>
{description &&
<div className="card__content card__subtext">
<TruncatedText lines={!showActions ? 4 : 2}>
<TruncatedText lines={!showActions ? 3 : 2}>
{description}
</TruncatedText>
</div>}

1
ui/js/component/header/view.jsx
View file

@ -47,6 +47,7 @@ export const Header = props => {
<Link
onClick={() => navigate("/wallet")}
button="text"
className="no-underline"
icon="icon-bank"
label={balance}
title={__("Wallet")}

5
ui/js/component/rewardSummary/view.jsx
View file

@ -18,9 +18,8 @@ const RewardSummary = props => {
unclaimed rewards.
</p>}
</div>
<div className="card__actions card__actions--bottom">
<Link button="text" navigate="/rewards" label={__("Rewards")} />
<Link button="text" navigate="/invite" label={__("Invites")} />
<div className="card__actions">
<Link button="alt" navigate="/rewards" label={__("Learn more")} />
</div>
</section>
);

2
ui/js/component/rewardTile/view.jsx
View file

@ -17,7 +17,7 @@ const RewardTile = props => {
<h3>{reward.reward_title}</h3>
</div>
<div className="card__content">{reward.reward_description}</div>
<div className="card__actions card__actions--bottom ">
<div className="card__actions ">
{reward.reward_type == rewards.TYPE_REFERRAL &&
<Link
button="alt"

12
ui/js/component/transactionList/internal/TransactionListItem.jsx
View file

@ -18,12 +18,22 @@ class TransactionListItem extends React.PureComponent {
type,
} = transaction;
const dateFormat = {
month: "short",
day: "numeric",
year: "numeric",
};
return (
<tr>
<td>
{date
? <div>
<DateTime date={date} show={DateTime.SHOW_DATE} />
<DateTime
date={date}
show={DateTime.SHOW_DATE}
formatOptions={dateFormat}
/>
<div className="meta">
<DateTime date={date} show={DateTime.SHOW_TIME} />
</div>

6
ui/js/component/uriIndicator/view.jsx
View file

@ -75,7 +75,11 @@ class UriIndicator extends React.PureComponent {
}
return (
<Link navigate="/show" navigateParams={{ uri: channelLink }}>
<Link
navigate="/show"
navigateParams={{ uri: channelLink }}
className="no-underline"
>
{inner}
</Link>
);

2
ui/js/component/video/internal/player.jsx
View file

@ -176,7 +176,7 @@ class VideoPlayer extends React.PureComponent {
<LoadingScreen status={noMetadataMessage} />}
{unplayable &&
<LoadingScreen status={unplayableMessage} spinner={false} />}
<div ref="media" />
<div ref="media" className="media" />
</div>
);
}

13
ui/js/component/walletBalance/view.jsx
View file

@ -21,19 +21,12 @@ const WalletBalance = props => {
{(balance || balance === 0) &&
<CreditAmount amount={balance} precision={8} />}
</div>
<div className="card__actions card__actions--bottom">
<div className="card__actions">
<Link
button="text"
navigate="/send"
disabled={balance === 0}
label={__("Send")}
/>
<Link button="text" navigate="/receive" label={__("Receive")} />
<Link
button="text"
button="primary"
disabled={balance === 0}
navigate="/backup"
label={__("Backup")}
label={__("Backup wallet")}
/>
</div>
</section>

1
ui/js/constants/icons.js
View file

@ -1,2 +1,3 @@
export const FEATURED = "rocket";
export const LOCAL = "folder";
export const FILE = "file";

58
ui/js/page/file/view.jsx
View file

@ -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 (
<div>
<section className="show-page-media">
<section className={"card " + (obscureNsfw ? "card--obscured " : "")}>
<div className="show-page-media">
{isPlayable
? <Video className="video-embedded" uri={uri} />
: metadata && metadata.thumbnail
? <Thumbnail src={metadata.thumbnail} />
: <Thumbnail />}
</section>
<section className={"card " + (obscureNsfw ? "card--obscured " : "")}>
<div className="card__inner">
{(!tab || tab === "details") &&
<div>
{" "} {" "}
<div className="card__title-identity">
{!fileInfo || fileInfo.written_bytes <= 0
? <span style={{ float: "right" }}>
<FilePrice uri={lbryuri.normalize(uri)} />
{isRewardContent &&
<span>{" "}<Icon icon={icons.FEATURED} /></span>}
</span>
: null}
<h1>{title}</h1>
<div className="card__subtitle">
<UriIndicator uri={uri} link={true} />
</div>
</div>
<div className="card__inner">
{(!tab || tab === "details") &&
<div>
{" "} {" "}
<div className="card__title-identity">
{!fileInfo || fileInfo.written_bytes <= 0
? <span style={{ float: "right" }}>
<FilePrice uri={lbryuri.normalize(uri)} />
{isRewardContent &&
<span>{" "}<Icon icon={icons.FEATURED} /></span>}
</span>
: null}
<h1>{title}</h1>
<div className="card__subtitle">
<UriIndicator uri={uri} link={true} />
<span className="divider__vertical">&bull;</span>
<span>
Published on{" "}
<DateTime block={height} show={DateTime.SHOW_DATE} />
</span>
</div>
<FileDetails uri={uri} />
</div>}
{tab === "tip" &&
<WalletSendTip claim_id={claim.claim_id} uri={uri} />}
</div>
</section>
</div>
</div>
<FileDetails uri={uri} />
</div>}
{tab === "tip" &&
<WalletSendTip claim_id={claim.claim_id} uri={uri} />}
</div>
</section>
);
}
}

11
ui/js/selectors/navigation.js
View file

@ -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 "":

5
ui/js/selectors/search.js
View file

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

14
ui/scss/_gui.scss
View file

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

30
ui/scss/_vars.scss
View file

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

4
ui/scss/all.scss
View file

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

8
ui/scss/component/__divider.scss Normal file
View file

@ -0,0 +1,8 @@
.divider__horizontal {
border-top: var(--divider);
margin: 16px 0;
}
.divider__vertical {
margin: 10px;
}

10
ui/scss/component/_button.scss
View file

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

14
ui/scss/component/_card.scss
View file

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

10
ui/scss/component/_file-download.scss
View file

@ -20,13 +20,3 @@
top: 0px;
left: 0px;
}
/*
.file-actions
{
line-height: var(--button-height);
min-height: var(--button-height);
}
*/

9
ui/scss/component/_file-selector.scss
View file

@ -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 {

15
ui/scss/component/_file-tile.scss
View file

@ -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;
}
}
.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%;
}
}

5
ui/scss/component/_form-field.scss
View file

@ -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 {

44
ui/scss/component/_header.scss
View file

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

5
ui/scss/component/_media.scss Normal file
View file

@ -0,0 +1,5 @@
.media {
/* temp fix for text files
background: var(--media-bg);
*/
}

24
ui/scss/component/_scrollbar.scss Normal file
View file

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

6
ui/scss/component/_table.scss
View file

@ -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%; }
}
}

57
ui/scss/component/_tabs.scss Normal file
View file

@ -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%;}
}

3
ui/scss/component/_video.scss
View file

@ -31,9 +31,6 @@ video {
&.video--hidden {
height: $height-video-embedded;
}
&.video--active {
/*background: none;*/
}
}
.video--obscured .video__cover
{

5
ui/scss/page/_show.scss
View file

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