Merge branch 'btzr-io-master' into v16
This commit is contained in:
Jeremy Kauffman
commit
ad6b4f4f03
|
|
@ -12,7 +12,6 @@ Web UI version numbers should always match the corresponding version of LBRY App
|
|||
* The "auth token" displayable on Help offers security warning
|
||||
* Added a new component for rendering dates and times. This component can render the date and time of a block height, as well.
|
||||
|
||||
|
||||
### Changed
|
||||
*
|
||||
*
|
||||
|
|
|
|||
|
|
@ -402,4 +402,4 @@ ipcMain.on('get-auth-token', (event) => {
|
|||
|
||||
ipcMain.on('set-auth-token', (event, token) => {
|
||||
keytar.setPassword("LBRY", "auth_token", token ? token.toString().trim() : null);
|
||||
});
|
||||
});
|
||||
|
|
|
|||
|
|
@ -24,4 +24,4 @@
|
|||
"lbrynetDaemonUrlTemplate": "https://github.com/lbryio/lbry/releases/download/vDAEMONVER/lbrynet-daemon-vDAEMONVER-OSNAME.zip"
|
||||
},
|
||||
"license": "MIT"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
1
ui/dist/quit.html
vendored
1
ui/dist/quit.html
vendored
|
|
@ -6,7 +6,6 @@
|
|||
|
||||
<link href='https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,400italic,600italic,600' rel='stylesheet' type='text/css'>
|
||||
<link href="./css/all.css" rel="stylesheet" type="text/css" media="screen,print" />
|
||||
<link href="./js/mediaelement/mediaelementplayer.css" rel="stylesheet" type="text/css" />
|
||||
<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">
|
||||
<link rel="icon" type="image/png" href="./img/fav/favicon-96x96.png" sizes="96x96">
|
||||
|
|
|
|||
46
ui/dist/themes/dark.css
vendored
Normal file
46
ui/dist/themes/dark.css
vendored
Normal file
|
|
@ -0,0 +1,46 @@
|
|||
:root {
|
||||
/* Colors */
|
||||
--color-primary: #009688;
|
||||
--color-canvas: #0f1517;
|
||||
--color-bg: #1a2327;
|
||||
--color-bg-alt: #314048;
|
||||
--color-help: #AAA;
|
||||
--color-error: #a94442;
|
||||
--color-load-screen-text: #FFF;
|
||||
--color-money: var(--color-primary);
|
||||
--color-meta-light: #757575;
|
||||
--color-dark-overlay: rgba(15, 21, 23, 0.85);
|
||||
|
||||
/* Text */
|
||||
--text-color: #FFF;
|
||||
--text-selection-bg: rgba(0,150,136, 0.95);
|
||||
|
||||
/* Input */
|
||||
--input-bg: transparent;
|
||||
--input-active-bg: rgba(0,0,0, 0.5);
|
||||
--input-border-color: rgba(255,255,255, 0.25);
|
||||
|
||||
/* Search */
|
||||
--search-bg: rgba(0,0,0, 0.45);
|
||||
--search-color: #757575;
|
||||
--search-active-bg: rgba(0,0,0, 0.75);
|
||||
--search-border: 1px solid rgba(0,0,0, 0.25);
|
||||
|
||||
/* Tab */
|
||||
--tab-color: #757575;
|
||||
--tab-active-color: #CCC;
|
||||
|
||||
/* Header */
|
||||
--header-color: #CCC;
|
||||
--header-active-color: #FFF;
|
||||
--header-button-bg: transparent;
|
||||
|
||||
/* Table */
|
||||
--table-border: 0;
|
||||
--table-item-even: var(--color-bg-alt);
|
||||
--table-item-odd: transparent;
|
||||
|
||||
/* Modla */
|
||||
--modal-overlay-bg: var(--color-dark-overlay);
|
||||
--modal-border: 1px solid rgba(0, 0, 0, 0.25);
|
||||
}
|
||||
4
ui/dist/themes/light.css
vendored
Normal file
4
ui/dist/themes/light.css
vendored
Normal file
|
|
@ -0,0 +1,4 @@
|
|||
:root {
|
||||
/* Colors */
|
||||
--color-primary: #155B4A;
|
||||
}
|
||||
|
|
@ -1,4 +1,5 @@
|
|||
import * as types from "constants/action_types";
|
||||
import * as settings from "constants/settings";
|
||||
import lbry from "lbry";
|
||||
import {
|
||||
selectUpdateUrl,
|
||||
|
|
|
|||
|
|
@ -1,10 +1,16 @@
|
|||
import * as types from "constants/action_types";
|
||||
import * as settings from "constants/settings";
|
||||
import { doAlertError } from "actions/app";
|
||||
import batchActions from "util/batchActions";
|
||||
|
||||
import lbry from "lbry";
|
||||
import fs from "fs";
|
||||
import http from "http";
|
||||
|
||||
const { remote } = require("electron");
|
||||
const { extname } = require("path");
|
||||
const { readdir } = remote.require("fs");
|
||||
|
||||
export function doFetchDaemonSettings() {
|
||||
return function(dispatch, getState) {
|
||||
lbry.settings_get().then(settings => {
|
||||
|
|
@ -46,6 +52,27 @@ export function doSetClientSetting(key, value) {
|
|||
};
|
||||
}
|
||||
|
||||
export function doGetThemes() {
|
||||
return function(dispatch, getState) {
|
||||
const dir = `${remote.app.getAppPath()}/dist/themes`;
|
||||
|
||||
readdir(dir, (error, files) => {
|
||||
if (!error) {
|
||||
dispatch(
|
||||
doSetClientSetting(
|
||||
settings.THEMES,
|
||||
files
|
||||
.filter(file => extname(file) === ".css")
|
||||
.map(file => file.replace(".css", ""))
|
||||
)
|
||||
);
|
||||
} else {
|
||||
dispatch(doAlertError(error));
|
||||
}
|
||||
});
|
||||
};
|
||||
}
|
||||
|
||||
export function doDownloadLanguage(langFile) {
|
||||
return function(dispatch, getState) {
|
||||
const destinationPath = `app/locales/${langFile}`;
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
import React from "react";
|
||||
import Router from "component/router/index";
|
||||
import Header from "component/header";
|
||||
import Theme from "component/theme";
|
||||
import ModalRouter from "modal/modalRouter";
|
||||
import lbry from "lbry";
|
||||
|
||||
|
|
@ -49,6 +50,7 @@ class App extends React.PureComponent {
|
|||
render() {
|
||||
return (
|
||||
<div id="window">
|
||||
<Theme />
|
||||
<Header />
|
||||
<div id="main-content">
|
||||
<Router />
|
||||
|
|
|
|||
|
|
@ -8,7 +8,6 @@ const Link = props => {
|
|||
style,
|
||||
label,
|
||||
icon,
|
||||
badge,
|
||||
button,
|
||||
disabled,
|
||||
children,
|
||||
|
|
@ -36,7 +35,6 @@ const Link = props => {
|
|||
<span {...("button" in props ? { className: "button__content" } : {})}>
|
||||
{"icon" in props ? <Icon icon={icon} fixed={true} /> : null}
|
||||
{label ? <span className="link-label">{label}</span> : null}
|
||||
{"badge" in props ? <span className="badge">{badge}</span> : null}
|
||||
</span>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
10
ui/js/component/theme/index.js
Normal file
10
ui/js/component/theme/index.js
Normal file
|
|
@ -0,0 +1,10 @@
|
|||
import React from "react";
|
||||
import { connect } from "react-redux";
|
||||
import { selectThemePath } from "selectors/settings.js";
|
||||
import Theme from "./view";
|
||||
|
||||
const select = state => ({
|
||||
themePath: selectThemePath(state),
|
||||
});
|
||||
|
||||
export default connect(select, null)(Theme);
|
||||
21
ui/js/component/theme/view.jsx
Normal file
21
ui/js/component/theme/view.jsx
Normal file
|
|
@ -0,0 +1,21 @@
|
|||
import React from "react";
|
||||
|
||||
const Theme = props => {
|
||||
const { themePath } = props;
|
||||
|
||||
if (!themePath) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<link
|
||||
id="theme"
|
||||
href={themePath}
|
||||
rel="stylesheet"
|
||||
type="text/css"
|
||||
media="screen,print"
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
export default Theme;
|
||||
|
|
@ -6,3 +6,5 @@ export const NEW_USER_ACKNOWLEDGED = "welcome_acknowledged";
|
|||
export const LANGUAGE = "language";
|
||||
export const SHOW_NSFW = "showNsfw";
|
||||
export const SHOW_UNAVAILABLE = "showUnavailable";
|
||||
export const THEME = "theme";
|
||||
export const THEMES = "themes";
|
||||
|
|
|
|||
|
|
@ -39,6 +39,8 @@ let lbry = {
|
|||
customLighthouseServers: [],
|
||||
showDeveloperMenu: false,
|
||||
language: "en",
|
||||
theme: "light",
|
||||
themes: [],
|
||||
},
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -1,12 +1,16 @@
|
|||
import React from "react";
|
||||
import { connect } from "react-redux";
|
||||
import * as settings from "constants/settings";
|
||||
import { doClearCache } from "actions/app";
|
||||
import {
|
||||
doSetDaemonSetting,
|
||||
doSetClientSetting,
|
||||
doGetThemes,
|
||||
doSetTheme,
|
||||
doChangeLanguage,
|
||||
} from "actions/settings";
|
||||
import {
|
||||
makeSelectClientSetting,
|
||||
selectDaemonSettings,
|
||||
selectShowNsfw,
|
||||
selectLanguages,
|
||||
|
|
@ -19,12 +23,14 @@ const select = state => ({
|
|||
showNsfw: selectShowNsfw(state),
|
||||
language: selectCurrentLanguage(state),
|
||||
languages: selectLanguages(state),
|
||||
theme: makeSelectClientSetting(settings.THEME)(state),
|
||||
});
|
||||
|
||||
const perform = dispatch => ({
|
||||
setDaemonSetting: (key, value) => dispatch(doSetDaemonSetting(key, value)),
|
||||
clearCache: () => dispatch(doClearCache()),
|
||||
setClientSetting: (key, value) => dispatch(doSetClientSetting(key, value)),
|
||||
getThemes: () => dispatch(doGetThemes()),
|
||||
changeLanguage: newLanguage => dispatch(doChangeLanguage(newLanguage)),
|
||||
});
|
||||
|
||||
|
|
|
|||
|
|
@ -6,8 +6,7 @@ import * as settings from "constants/settings";
|
|||
import lbry from "lbry.js";
|
||||
import Link from "component/link";
|
||||
import FormFieldPrice from "component/formFieldPrice";
|
||||
|
||||
const { remote } = require("electron");
|
||||
import { remote } from "electron";
|
||||
|
||||
class SettingsPage extends React.PureComponent {
|
||||
constructor(props) {
|
||||
|
|
@ -21,6 +20,8 @@ class SettingsPage extends React.PureComponent {
|
|||
showUnavailable: lbry.getClientSetting(settings.SHOW_UNAVAILABLE),
|
||||
language: lbry.getClientSetting(settings.LANGUAGE),
|
||||
clearingCache: false,
|
||||
theme: lbry.getClientSetting(settings.THEME),
|
||||
themes: lbry.getClientSetting(settings.THEMES),
|
||||
};
|
||||
}
|
||||
|
||||
|
|
@ -41,11 +42,6 @@ class SettingsPage extends React.PureComponent {
|
|||
this.props.setDaemonSetting(name, value);
|
||||
}
|
||||
|
||||
setClientSetting(name, value) {
|
||||
lbry.setClientSetting(name, value);
|
||||
this._onSettingSaveSuccess();
|
||||
}
|
||||
|
||||
onRunOnStartChange(event) {
|
||||
this.setDaemonSetting("run_on_startup", event.target.checked);
|
||||
}
|
||||
|
|
@ -66,6 +62,11 @@ class SettingsPage extends React.PureComponent {
|
|||
this.setDaemonSetting("disable_max_key_fee", isDisabled);
|
||||
}
|
||||
|
||||
onThemeChange(event) {
|
||||
const { value } = event.target;
|
||||
this.props.setClientSetting(settings.THEME, value);
|
||||
}
|
||||
|
||||
// onMaxUploadPrefChange(isLimited) {
|
||||
// if (!isLimited) {
|
||||
// this.setDaemonSetting("max_upload", 0.0);
|
||||
|
|
@ -103,8 +104,14 @@ class SettingsPage extends React.PureComponent {
|
|||
|
||||
onShowUnavailableChange(event) {}
|
||||
|
||||
componentWillMount() {
|
||||
this.props.getThemes();
|
||||
}
|
||||
|
||||
componentDidMount() {}
|
||||
|
||||
render() {
|
||||
const { daemonSettings, language, languages } = this.props;
|
||||
const { daemonSettings, language, languages, theme } = this.props;
|
||||
|
||||
if (!daemonSettings || Object.keys(daemonSettings).length === 0) {
|
||||
return (
|
||||
|
|
@ -242,6 +249,27 @@ class SettingsPage extends React.PureComponent {
|
|||
</div>
|
||||
</section>
|
||||
|
||||
<section className="card">
|
||||
<div className="card__content">
|
||||
<h3>{__("Theme")}</h3>
|
||||
</div>
|
||||
<div className="card__content">
|
||||
<FormField
|
||||
type="select"
|
||||
onChange={this.onThemeChange.bind(this)}
|
||||
value={theme}
|
||||
className="form-field__input--inline"
|
||||
>
|
||||
{this.state.themes.map((theme, index) =>
|
||||
<option key={theme} value={theme}>
|
||||
{theme}
|
||||
</option>
|
||||
)}
|
||||
</FormField>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className="card">
|
||||
<div className="card__content">
|
||||
<h3>{__("Application Cache")}</h3>
|
||||
|
|
|
|||
|
|
@ -12,6 +12,8 @@ const defaultState = {
|
|||
settings.CREDIT_INTRO_ACKNOWLEDGED
|
||||
),
|
||||
language: lbry.getClientSetting(settings.LANGUAGE),
|
||||
theme: lbry.getClientSetting(settings.THEME),
|
||||
themes: lbry.getClientSetting(settings.THEMES),
|
||||
},
|
||||
languages: {},
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,3 +1,4 @@
|
|||
import * as settings from "constants/settings";
|
||||
import { createSelector } from "reselect";
|
||||
|
||||
const _selectState = state => state.settings || {};
|
||||
|
|
@ -33,3 +34,8 @@ export const selectLanguages = createSelector(
|
|||
_selectState,
|
||||
state => state.languages || {}
|
||||
);
|
||||
|
||||
export const selectThemePath = createSelector(
|
||||
makeSelectClientSetting(settings.THEME),
|
||||
theme => "themes/" + (theme || "light") + ".css"
|
||||
);
|
||||
|
|
|
|||
|
|
@ -1,195 +0,0 @@
|
|||
@charset "UTF-8";
|
||||
|
||||
$spacing-vertical: 24px;
|
||||
|
||||
$padding-button: $spacing-vertical * 2/3;
|
||||
$padding-text-link: 0px;
|
||||
|
||||
$color-primary: #155B4A;
|
||||
$color-primary-light: saturate(lighten($color-primary, 50%), 20%);
|
||||
$color-light-alt: hsl(hue($color-primary), 15, 85);
|
||||
$color-text-dark: #000;
|
||||
$color-black-transparent: rgba(32,32,32,0.9);
|
||||
$color-help: rgba(0,0,0,.6);
|
||||
$color-notice: #8a6d3b;
|
||||
$color-error: #a94442;
|
||||
$color-load-screen-text: #c3c3c3;
|
||||
$color-canvas: #f5f5f5;
|
||||
$color-bg: #ffffff;
|
||||
$color-bg-alt: #D9D9D9;
|
||||
$color-money: #216C2A;
|
||||
$color-meta-light: #505050;
|
||||
$color-form-border: rgba(160,160,160,.5);
|
||||
|
||||
$font-size: 16px;
|
||||
$font-line-height: 1.3333;
|
||||
|
||||
$mobile-width-threshold: 801px;
|
||||
$max-content-width: 1000px;
|
||||
$max-text-width: 660px;
|
||||
|
||||
$width-page-constrained: 800px;
|
||||
$width-input-text: 330px;
|
||||
|
||||
$height-button: $spacing-vertical * 1.5;
|
||||
$height-header: $spacing-vertical * 2.5;
|
||||
$height-video-embedded: $width-page-constrained * 9 / 16;
|
||||
|
||||
$box-shadow-layer: 0 2px 2px 0 rgba(0,0,0,.14),0 3px 1px -2px rgba(0,0,0,.2),0 1px 5px 0 rgba(0,0,0,.12);
|
||||
$box-shadow-focus: 2px 4px 4px 0 rgba(0,0,0,.14),2px 5px 3px -2px rgba(0,0,0,.2),2px 3px 7px 0 rgba(0,0,0,.12);
|
||||
|
||||
$transition-standard: .225s ease;
|
||||
|
||||
$blur-intensity-nsfw: 20px;
|
||||
|
||||
@mixin clearfix()
|
||||
{
|
||||
&:before, &:after
|
||||
{
|
||||
content: " ";
|
||||
display: table;
|
||||
}
|
||||
&:after
|
||||
{
|
||||
clear: both;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin border-radius($radius)
|
||||
{
|
||||
-webkit-border-radius: $radius;
|
||||
-moz-border-radius: $radius;
|
||||
-ms-border-radius: $radius;
|
||||
border-radius: $radius;
|
||||
}
|
||||
|
||||
@mixin placeholder-color($color) {
|
||||
/*do not group these it breaks because CSS*/
|
||||
&:-moz-placeholder {
|
||||
color: $color;
|
||||
}
|
||||
&::-moz-placeholder {
|
||||
color: $color;
|
||||
}
|
||||
&:-ms-input-placeholder {
|
||||
color: $color;
|
||||
}
|
||||
&::-webkit-input-placeholder {
|
||||
color: $color;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin display-flex()
|
||||
{
|
||||
display: -webkit-box;
|
||||
display: -moz-box;
|
||||
display: -ms-flexbox;
|
||||
display: -webkit-flex;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
@mixin flex($columns)
|
||||
{
|
||||
-webkit-flex: $columns;
|
||||
-moz-flex: $columns;
|
||||
-ms-flex: $columns;
|
||||
flex: $columns;
|
||||
}
|
||||
|
||||
@mixin flex-flow($flow) {
|
||||
-webkit-flex-flow: $flow;
|
||||
-moz-flex-flow: $flow;
|
||||
-ms-flex-flow: $flow;
|
||||
flex-flow: $flow;
|
||||
}
|
||||
|
||||
@mixin flex-direction($direction) {
|
||||
-webkit-flex-direction: $direction;
|
||||
-moz-flex-direction: $direction;
|
||||
-ms-flex-direction: $direction;
|
||||
flex-direction: $direction;
|
||||
}
|
||||
|
||||
@mixin absolute-center()
|
||||
{
|
||||
@include display-flex();
|
||||
-webkit-box-align: center;
|
||||
-moz-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
-webkit-align-items: center;
|
||||
align-items: center;
|
||||
-webkit-box-pack: center;
|
||||
-moz-box-pack: center;
|
||||
-ms-flex-pack: center;
|
||||
-webkit-justify-content: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
@mixin linear-gradient($from-color, $to-color) {
|
||||
background-color: $to-color; /* Fallback Color */
|
||||
background-image: -webkit-linear-gradient(top, $from-color, $to-color); /* Chrome 10+, Saf5.1+, iOS 5+ */
|
||||
background-image: -moz-linear-gradient(top, $from-color, $to-color); /* FF3.6 */
|
||||
background-image: -ms-linear-gradient(top, $from-color, $to-color); /* IE10 */
|
||||
background-image: linear-gradient(top, $from-color, $to-color);
|
||||
}
|
||||
|
||||
@mixin box-sizing( $type: border-box ) {
|
||||
-webkit-box-sizing: $type;
|
||||
-moz-box-sizing: $type;
|
||||
-o-box-sizing: $type;
|
||||
-ms-box-sizing: $type;
|
||||
box-sizing: $type;
|
||||
}
|
||||
|
||||
@mixin background-size ($size) {
|
||||
-webkit-background-size: $size;
|
||||
-moz-background-size: $size;
|
||||
-o-background-size: $size;
|
||||
background-size: $size;
|
||||
}
|
||||
|
||||
@mixin placeholder {
|
||||
&::-webkit-input-placeholder {@content}
|
||||
&:-moz-placeholder {@content}
|
||||
&:-ms-input-placeholder {@content}
|
||||
}
|
||||
|
||||
@mixin offscreen() {
|
||||
position: absolute;
|
||||
left: -9999px;
|
||||
top:auto;
|
||||
width:1px;
|
||||
height:1px;
|
||||
overflow:hidden;
|
||||
}
|
||||
|
||||
@mixin text-link($color: $color-primary, $hover-opacity: 0.70) {
|
||||
.icon
|
||||
{
|
||||
&:first-child {
|
||||
padding-right: 5px;
|
||||
}
|
||||
&:last-child:not(:only-child) {
|
||||
padding-left: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
&:not(.no-underline) {
|
||||
text-decoration: underline;
|
||||
.icon {
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
&:hover
|
||||
{
|
||||
opacity: $hover-opacity;
|
||||
transition: opacity $transition-standard;
|
||||
text-decoration: underline;
|
||||
.icon {
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
||||
color: $color;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
|
@ -1,40 +1,37 @@
|
|||
@import "global";
|
||||
|
||||
html
|
||||
{
|
||||
height: 100%;
|
||||
font-size: $font-size;
|
||||
font-size: var(--font-size);
|
||||
}
|
||||
body
|
||||
{
|
||||
color: var(--text-color);
|
||||
font-family: 'Source Sans Pro', sans-serif;
|
||||
line-height: $font-line-height;
|
||||
line-height: var(--font-line-height);
|
||||
}
|
||||
|
||||
/* Custom text selection */
|
||||
*::selection {
|
||||
background: var(--text-selection-bg);
|
||||
color: var(--text-selection-color);
|
||||
}
|
||||
|
||||
#window
|
||||
{
|
||||
min-height: 100vh;
|
||||
background: $color-canvas;
|
||||
background: var(--window-bg);
|
||||
}
|
||||
|
||||
.badge
|
||||
{
|
||||
background: $color-money;
|
||||
display: inline-block;
|
||||
padding: 2px;
|
||||
color: white;
|
||||
border-radius: 2px;
|
||||
}
|
||||
.credit-amount--indicator
|
||||
{
|
||||
font-weight: bold;
|
||||
color: $color-money;
|
||||
color: var(--color-money);
|
||||
}
|
||||
|
||||
#main-content
|
||||
{
|
||||
padding: $spacing-vertical;
|
||||
margin-top: $height-header;
|
||||
margin-top: var(--header-height);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
main {
|
||||
|
|
@ -87,7 +84,7 @@ sub { top: 0.4em; }
|
|||
|
||||
code {
|
||||
font: 0.8em Consolas, 'Lucida Console', 'Source Sans', monospace;
|
||||
background-color: #eee;
|
||||
background-color: var(--color-bg-alt);
|
||||
}
|
||||
|
||||
p
|
||||
|
|
@ -136,18 +133,18 @@ p
|
|||
|
||||
.help {
|
||||
font-size: .85em;
|
||||
color: $color-help;
|
||||
color: var(--color-help);
|
||||
}
|
||||
|
||||
.meta
|
||||
{
|
||||
font-size: 0.9em;
|
||||
color: $color-meta-light;
|
||||
color: var(--color-meta-light);
|
||||
}
|
||||
|
||||
.empty
|
||||
{
|
||||
color: $color-meta-light;
|
||||
color:var(--color-meta-light);
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
|
|
@ -167,7 +164,7 @@ p
|
|||
text-align: right;
|
||||
line-height: 1;
|
||||
font-size: 0.85em;
|
||||
color: $color-help;
|
||||
color: var(--color-help);
|
||||
}
|
||||
|
||||
section.section-spaced {
|
||||
|
|
|
|||
|
|
@ -1,5 +1,3 @@
|
|||
@import "global";
|
||||
|
||||
@font-face {
|
||||
font-family: 'FontAwesome';
|
||||
src: url('../font/fontawesome-webfont.eot?v=4.7.0');
|
||||
|
|
|
|||
128
ui/scss/_vars.scss
Normal file
128
ui/scss/_vars.scss
Normal file
|
|
@ -0,0 +1,128 @@
|
|||
/*
|
||||
Both of these should probably die and become variables as well
|
||||
*/
|
||||
$spacing-vertical: 24px;
|
||||
$width-page-constrained: 800px;
|
||||
$text-color: #000;
|
||||
|
||||
:root {
|
||||
|
||||
/* Colors */
|
||||
--color-brand: #155B4A;
|
||||
--color-primary: #155B4A;
|
||||
--color-primary-light: saturate(lighten(#155B4A, 50%), 20%);
|
||||
--color-light-alt: hsl(hue(#155B4A), 15, 85);
|
||||
--color-dark-overlay: rgba(32,32,32,0.9);
|
||||
--color-help: rgba(0,0,0,.6);
|
||||
--color-notice: #8a6d3b;
|
||||
--color-error: #a94442;
|
||||
--color-load-screen-text: #c3c3c3;
|
||||
--color-meta-light: #505050;
|
||||
--color-money: #216C2A;
|
||||
--color-download: #444;
|
||||
--color-canvas: #f5f5f5;
|
||||
--color-bg: #ffffff;
|
||||
--color-bg-alt: #D9D9D9;
|
||||
|
||||
|
||||
/* Misc */
|
||||
--content-max-width: 1000px;
|
||||
--nsfw-blur-intensity: 20px;
|
||||
--height-video-embedded: $width-page-constrained * 9 / 16 ;
|
||||
|
||||
/* Font */
|
||||
--font-size: 16px;
|
||||
--font-line-height: 1.3333;
|
||||
--font-size-subtext-multiple: 0.82;
|
||||
|
||||
/* Shadows */
|
||||
--box-shadow-layer: 0 2px 2px 0 rgba(0,0,0,.14),0 3px 1px -2px rgba(0,0,0,.2),0 1px 5px 0 rgba(0,0,0,.12);
|
||||
--box-shadow-focus: 2px 4px 4px 0 rgba(0,0,0,.14),2px 5px 3px -2px rgba(0,0,0,.2),2px 3px 7px 0 rgba(0,0,0,.12);
|
||||
|
||||
/* Transition */
|
||||
--transition-duration: .225s;
|
||||
--transition-type: ease;
|
||||
|
||||
/* Text */
|
||||
--text-color: $text-color;
|
||||
--text-help-color: #EEE;
|
||||
--text-max-width: 660px;
|
||||
--text-link-padding: 4px;
|
||||
--text-selection-bg: rgba(saturate(lighten(#155B4A, 20%), 20%), 1); // temp color
|
||||
--text-selection-color: #FFF;
|
||||
|
||||
/* Window */
|
||||
--window-bg: var(--color-canvas);
|
||||
|
||||
/* Input */
|
||||
--input-bg: transparent;
|
||||
--input-active-bg: transparent;
|
||||
--input-width: 330px;
|
||||
--input-color: var(--text-color);
|
||||
--input-border-size: 2px;
|
||||
--input-border-color: rgba(0,0,0,.25);
|
||||
|
||||
/* Select */
|
||||
--select-bg: var(--color-bg-alt);
|
||||
--select-color: var(--text-color);
|
||||
|
||||
/* Button */
|
||||
--button-bg: var(--color-bg-alt);
|
||||
--button-color: #FFF;
|
||||
--button-primary-bg: var(--color-primary);
|
||||
--button-primary-color: #FFF;
|
||||
--button-padding: $spacing-vertical * 2/3;
|
||||
--button-height: $spacing-vertical * 1.5;
|
||||
--button-intra-margin: $spacing-vertical;
|
||||
|
||||
/* Header */
|
||||
--header-bg: var(--color-bg);
|
||||
--header-color: #666;
|
||||
--header-active-color: rgba(0,0,0, 0.85);
|
||||
--header-height: $spacing-vertical * 2.5;
|
||||
--header-button-bg: var(--button-bg);
|
||||
|
||||
/* Header -> search */
|
||||
--search-bg: rgba(255, 255, 255, 0.7);
|
||||
--search-border:1px solid #ccc;
|
||||
--search-color: #666;
|
||||
--search-active-color: var(--header-active-color);
|
||||
|
||||
/* Tabs */
|
||||
--tab-bg: transparent;
|
||||
--tab-color: #666;
|
||||
--tab-active-color: var(--header-active-color);
|
||||
--tab-border-size: 2px;
|
||||
--tab-border: var(--tab-border-size) solid var(--tab-active-color);
|
||||
|
||||
/* Table */
|
||||
--table-border: 1px solid #e2e2e2;
|
||||
--table-item-even: white;
|
||||
--table-item-odd: #f4f4f4;
|
||||
|
||||
/* Card */
|
||||
--card-bg: var(--color-bg);
|
||||
--card-hover-translate: 10px;
|
||||
--card-margin: $spacing-vertical * 2/3;
|
||||
--card-max-width: $width-page-constrained;
|
||||
--card-padding: $spacing-vertical * 2/3;
|
||||
--card-radius: 2px;
|
||||
--card-link-scaling: 1.1;
|
||||
--card-small-width: $spacing-vertical * 10;
|
||||
|
||||
/* Modal */
|
||||
--modal-bg: var(--color-bg);
|
||||
--modal-overlay-bg: rgba(#F5F5F5, 0.75); // --color-canvas: #F5F5F5
|
||||
--modal-border: 1px solid rgb(204, 204, 204);
|
||||
|
||||
/* Menu */
|
||||
--menu-bg: var(--color-bg);
|
||||
--menu-radius: 2px;
|
||||
--menu-item-hover-bg: var(--color-bg-alt);
|
||||
|
||||
/* Tooltip */
|
||||
--tooltip-width: 300px;
|
||||
--tooltip-bg: var(--color-bg);
|
||||
--tooltip-color: var(--text-color);
|
||||
--tooltip-border: 1px solid #aaa;
|
||||
}
|
||||
|
|
@ -1,4 +1,6 @@
|
|||
@charset "UTF-8";
|
||||
@import "_reset";
|
||||
@import "_vars";
|
||||
@import "_icons";
|
||||
@import "_gui";
|
||||
@import "component/_table";
|
||||
|
|
@ -18,6 +20,6 @@
|
|||
@import "component/_snack-bar.scss";
|
||||
@import "component/_video.scss";
|
||||
@import "component/_pagination.scss";
|
||||
@import "component/_markdown-editor.scss";
|
||||
@import "page/_developer.scss";
|
||||
@import "page/_reward.scss";
|
||||
@import "page/_show.scss";
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
@import "../global";
|
||||
@import "../mixin/link.scss";
|
||||
|
||||
$button-focus-shift: 12%;
|
||||
|
||||
|
|
@ -8,15 +8,15 @@ $button-focus-shift: 12%;
|
|||
|
||||
+ .button-set-item
|
||||
{
|
||||
margin-left: $spacing-vertical;
|
||||
margin-left: var(--button-intra-margin);
|
||||
}
|
||||
}
|
||||
|
||||
.button-block, .faux-button-block
|
||||
{
|
||||
display: inline-block;
|
||||
height: $height-button;
|
||||
line-height: $height-button;
|
||||
height: var(--button-height);
|
||||
line-height: var(--button-height);
|
||||
text-decoration: none;
|
||||
border: 0 none;
|
||||
text-align: center;
|
||||
|
|
@ -46,25 +46,26 @@ $button-focus-shift: 12%;
|
|||
}
|
||||
|
||||
.button__content {
|
||||
margin: 0 $padding-button;
|
||||
margin: 0 var(--button-padding);
|
||||
}
|
||||
|
||||
.button-primary
|
||||
{
|
||||
$color-button-text: white;
|
||||
color: darken($color-button-text, $button-focus-shift * 0.5);
|
||||
background-color: $color-primary;
|
||||
box-shadow: $box-shadow-layer;
|
||||
|
||||
color: var(--button-primary-color);
|
||||
background-color: var(--button-primary-bg);
|
||||
box-shadow: var(--box-shadow-layer);
|
||||
|
||||
&:focus {
|
||||
color: $color-button-text;
|
||||
//color: var(--button-primary-active-color);
|
||||
//background-color:color: var(--button-primary-active-bg);
|
||||
//box-shadow: $box-shadow-focus;
|
||||
background-color: mix(black, $color-primary, $button-focus-shift)
|
||||
}
|
||||
}
|
||||
.button-alt
|
||||
{
|
||||
background-color: $color-bg-alt;
|
||||
box-shadow: $box-shadow-layer;
|
||||
background-color: var(--button-bg);
|
||||
box-shadow: var(--box-shadow-layer);
|
||||
}
|
||||
|
||||
.button-text
|
||||
|
|
@ -73,15 +74,15 @@ $button-focus-shift: 12%;
|
|||
display: inline-block;
|
||||
|
||||
.button__content {
|
||||
margin: 0 $padding-text-link;
|
||||
margin: 0 var(--text-link-padding);
|
||||
}
|
||||
}
|
||||
.button-text-help
|
||||
{
|
||||
@include text-link(#aaa);
|
||||
@include text-link(var(--text-help-color));
|
||||
font-size: 0.8em;
|
||||
}
|
||||
.button--flat
|
||||
{
|
||||
box-shadow: none !important;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,17 +1,11 @@
|
|||
@import "../global";
|
||||
|
||||
$padding-card-horizontal: $spacing-vertical * 2/3;
|
||||
$translate-card-hover: 10px;
|
||||
$width-card-small: $spacing-vertical * 10;
|
||||
|
||||
.card {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
max-width: $width-page-constrained;
|
||||
background: $color-bg;
|
||||
box-shadow: $box-shadow-layer;
|
||||
border-radius: 2px;
|
||||
margin-bottom: $spacing-vertical * 2/3;
|
||||
max-width: var(--card-max-width);
|
||||
background: var(--card-bg);
|
||||
box-shadow: var(--box-shadow-layer);
|
||||
border-radius: var(--card-radius);
|
||||
margin-bottom: var(--card-margin);
|
||||
overflow: auto;
|
||||
}
|
||||
.card--obscured
|
||||
|
|
@ -19,15 +13,14 @@ $width-card-small: $spacing-vertical * 10;
|
|||
position: relative;
|
||||
}
|
||||
.card--obscured .card__inner {
|
||||
filter: blur($blur-intensity-nsfw);
|
||||
filter: blur( var(--nsfw-blur-intensity) );
|
||||
}
|
||||
.card__title-primary,
|
||||
.card__title-identity,
|
||||
.card__content,
|
||||
.card__subtext,
|
||||
.card__actions {
|
||||
padding-left: $padding-card-horizontal;
|
||||
padding-right: $padding-card-horizontal;
|
||||
padding: 0 var(--card-padding);
|
||||
}
|
||||
.card--small {
|
||||
.card__title-primary,
|
||||
|
|
@ -35,29 +28,37 @@ $width-card-small: $spacing-vertical * 10;
|
|||
.card__actions,
|
||||
.card__content,
|
||||
.card__subtext {
|
||||
padding: 0 $padding-card-horizontal / 2;
|
||||
padding: 0 calc(var(--card-padding) / 2);
|
||||
}
|
||||
}
|
||||
.card__title-primary {
|
||||
margin-top: $spacing-vertical * 2/3;
|
||||
margin-bottom: $spacing-vertical * 2/3;
|
||||
margin-top: var(--card-margin);
|
||||
margin-bottom: var(--card-margin);
|
||||
}
|
||||
.card__title-identity {
|
||||
margin-top: $spacing-vertical * 1/3;
|
||||
margin-bottom: $spacing-vertical * 1/3;
|
||||
}
|
||||
.card__actions {
|
||||
margin-top: $spacing-vertical * 2/3;
|
||||
margin-bottom: $spacing-vertical * 2/3;
|
||||
margin-top: var(--card-margin);
|
||||
margin-bottom: var(--card-margin);
|
||||
}
|
||||
.card__actions--bottom {
|
||||
margin-top: $spacing-vertical * 1/3;
|
||||
margin-bottom: $spacing-vertical * 1/3;
|
||||
}
|
||||
.card__actions--form-submit {
|
||||
margin-top: $spacing-vertical;
|
||||
margin-bottom: var(--card-margin);
|
||||
}
|
||||
.card__content {
|
||||
margin-top: $spacing-vertical * 2/3;
|
||||
margin-bottom: $spacing-vertical * 2/3;
|
||||
margin-top: var(--card-margin);
|
||||
margin-bottom: var(--card-margin);
|
||||
}
|
||||
$font-size-subtext-multiple: 0.82;
|
||||
.card__subtext {
|
||||
color: $color-meta-light;
|
||||
font-size: $font-size-subtext-multiple * 1.0em;
|
||||
color: var(--color-meta-light);
|
||||
font-size: calc( var(--font-size-subtext-multiple) * 1.0em );
|
||||
margin-top: $spacing-vertical * 1/3;
|
||||
margin-bottom: $spacing-vertical * 1/3;
|
||||
}
|
||||
|
|
@ -65,7 +66,7 @@ $font-size-subtext-multiple: 0.82;
|
|||
white-space: pre-wrap;
|
||||
}
|
||||
.card__subtext--two-lines {
|
||||
height: $font-size * $font-size-subtext-multiple * $font-line-height * 2; /*this is so one line text still has the proper height*/
|
||||
height: calc( var(--font-size) * var(--font-size-subtext-multiple) * var(--font-line-height) * 2); /*this is so one line text still has the proper height*/
|
||||
}
|
||||
.card-overlay {
|
||||
position: absolute;
|
||||
|
|
@ -74,14 +75,13 @@ $font-size-subtext-multiple: 0.82;
|
|||
top: 0px;
|
||||
bottom: 0px;
|
||||
padding: 20px;
|
||||
background-color: rgba(128, 128, 128, 0.8);
|
||||
background-color: var(--color-dark-overlay);
|
||||
color: #fff;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
$card-link-scaling: 1.1;
|
||||
.card__link {
|
||||
display: block;
|
||||
}
|
||||
|
|
@ -91,14 +91,14 @@ $card-link-scaling: 1.1;
|
|||
.card--link:hover {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
box-shadow: $box-shadow-focus;
|
||||
transform: scale($card-link-scaling) translateX($translate-card-hover);
|
||||
box-shadow: var(--box-shadow-focus);
|
||||
transform: scale(var(--card-link-scaling)) translateX(var(--card-hover-translate));
|
||||
transform-origin: 50% 50%;
|
||||
overflow-x: visible;
|
||||
overflow-y: visible
|
||||
}
|
||||
.card--link:hover ~ .card--link {
|
||||
transform: translateX($translate-card-hover * 2);
|
||||
transform: translateX(calc(var(--card-hover-translate) * 2));
|
||||
}
|
||||
|
||||
.card__media {
|
||||
|
|
@ -152,33 +152,30 @@ $card-link-scaling: 1.1;
|
|||
position: absolute;
|
||||
top: 36%
|
||||
}
|
||||
|
||||
|
||||
|
||||
.card--small {
|
||||
width: $width-card-small;
|
||||
width: var(--card-small-width);
|
||||
overflow-x: hidden;
|
||||
white-space: normal;
|
||||
}
|
||||
.card--small .card__media {
|
||||
height: $width-card-small * 9 / 16;
|
||||
height: calc( var(--card-small-width) * 9 / 16);
|
||||
}
|
||||
|
||||
.card--form {
|
||||
width: $width-input-text + $padding-card-horizontal * 2;
|
||||
width: calc( var(--input-width) + var(--card-padding) * 2);
|
||||
}
|
||||
|
||||
.card__subtitle {
|
||||
color: $color-help;
|
||||
color: var(--color-help);
|
||||
font-size: 0.85em;
|
||||
line-height: $font-line-height * 1 / 0.85;
|
||||
line-height: calc( var(--font-line-height) * 1 / 0.85);
|
||||
}
|
||||
|
||||
.card-series-submit
|
||||
{
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
max-width: $width-page-constrained;
|
||||
max-width: var(--card-max-width);
|
||||
padding: $spacing-vertical / 2;
|
||||
}
|
||||
|
||||
|
|
@ -187,8 +184,10 @@ $card-link-scaling: 1.1;
|
|||
margin-top: $spacing-vertical * 1/3;
|
||||
}
|
||||
}
|
||||
|
||||
$padding-top-card-hover-hack: 20px;
|
||||
$padding-right-card-hover-hack: 30px;
|
||||
|
||||
.card-row__items {
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
|
|
@ -211,7 +210,7 @@ $padding-right-card-hover-hack: 30px;
|
|||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
width: 100%;
|
||||
min-width: $width-card-small;
|
||||
min-width: var(--card-small-width);
|
||||
margin-right: $spacing-vertical;
|
||||
}
|
||||
.card-row__header {
|
||||
|
|
@ -226,14 +225,14 @@ $padding-right-card-hover-hack: 30px;
|
|||
|
||||
.card-row__nav {
|
||||
position: absolute;
|
||||
padding: 0 $spacing-vertical * 2 / 3;
|
||||
padding: 0 var(--card-margin);
|
||||
height: 100%;
|
||||
top: $padding-top-card-hover-hack - $spacing-vertical * 2 / 3;
|
||||
top: calc( $padding-top-card-hover-hack - var(--card-margin) );
|
||||
}
|
||||
.card-row__nav .card-row__scroll-button {
|
||||
background: $color-bg;
|
||||
color: $color-help;
|
||||
box-shadow: $box-shadow-layer;
|
||||
background: var(--card-bg);
|
||||
color: var(--color-help);
|
||||
box-shadow: var(--box-shadow-layer);
|
||||
padding: $spacing-vertical $spacing-vertical / 2;
|
||||
position: absolute;
|
||||
cursor: pointer;
|
||||
|
|
@ -245,7 +244,7 @@ $padding-right-card-hover-hack: 30px;
|
|||
|
||||
&:hover {
|
||||
opacity: 1.0;
|
||||
transform: scale($card-link-scaling * 1.1)
|
||||
transform: scale(calc( var(--card-link-scaling) * 1.1));
|
||||
}
|
||||
}
|
||||
.card-row__nav--left {
|
||||
|
|
@ -259,7 +258,6 @@ $padding-right-card-hover-hack: 30px;
|
|||
color: orangered;
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
if we keep doing things like this, we should add a real grid system, but I'm going to be a selective dick about it - Jeremy
|
||||
*/
|
||||
|
|
|
|||
|
|
@ -1,5 +1,4 @@
|
|||
@import "../global";
|
||||
|
||||
.channel-indicator__icon--invalid {
|
||||
color: $color-error;
|
||||
color: var(--color-error);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,27 +1,24 @@
|
|||
@import "../global";
|
||||
|
||||
$color-download: #444;
|
||||
|
||||
.file-actions
|
||||
{
|
||||
line-height: $height-button;
|
||||
min-height: $height-button;
|
||||
line-height: var(--button-height);
|
||||
min-height: var(--button-height);
|
||||
}
|
||||
|
||||
.file-actions__download-status-bar, .file-actions__download-status-bar-overlay {
|
||||
.button__content {
|
||||
margin: 0 $padding-text-link;
|
||||
margin: 0 var(--text-link-padding);
|
||||
}
|
||||
}
|
||||
|
||||
.file-actions__download-status-bar
|
||||
{
|
||||
position: relative;
|
||||
color: $color-download;
|
||||
color: var(--color-download);
|
||||
}
|
||||
.file-actions__download-status-bar-overlay
|
||||
{
|
||||
background: $color-download;
|
||||
background: var(--color-download);
|
||||
color: white;
|
||||
position: absolute;
|
||||
white-space: nowrap;
|
||||
|
|
@ -29,4 +26,4 @@ $color-download: #444;
|
|||
z-index: 1;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,4 +1,3 @@
|
|||
@import "../global";
|
||||
|
||||
$height-file-tile: $spacing-vertical * 6;
|
||||
.file-tile__row {
|
||||
|
|
|
|||
|
|
@ -1,6 +1,9 @@
|
|||
@import "../global";
|
||||
|
||||
$width-input-border: 2px;
|
||||
@mixin placeholder {
|
||||
&::-webkit-input-placeholder {@content}
|
||||
&:-moz-placeholder {@content}
|
||||
&:-ms-input-placeholder {@content}
|
||||
}
|
||||
|
||||
.form-row-submit
|
||||
{
|
||||
|
|
@ -15,7 +18,7 @@ $width-input-border: 2px;
|
|||
margin-top: $spacing-vertical * 5/6;
|
||||
margin-bottom: $spacing-vertical * 1/6;
|
||||
line-height: 1;
|
||||
font-size: 0.9 * $font-size;
|
||||
font-size:calc( 0.9 * var(--font-size));
|
||||
}
|
||||
.form-row__label-row--prefix {
|
||||
float: left;
|
||||
|
|
@ -23,15 +26,17 @@ $width-input-border: 2px;
|
|||
}
|
||||
|
||||
input[type="text"].input-copyable {
|
||||
border: 1px solid $color-form-border;
|
||||
background: var(--input-bg);
|
||||
border-bottom: var(--input-border-size) solid var(--input-border-color);
|
||||
color: var(--input-color);
|
||||
line-height: 1;
|
||||
padding-top: $spacing-vertical * 1/3;
|
||||
padding-bottom: $spacing-vertical * 1/3;
|
||||
width: $width-input-text;
|
||||
width: var(--input-width);
|
||||
padding-left: 5px;
|
||||
padding-right: 5px;
|
||||
width: 100%;
|
||||
&:focus { border-color: black; }
|
||||
&:focus { border-color: var(--color-primary); }
|
||||
}
|
||||
|
||||
.form-field {
|
||||
|
|
@ -43,14 +48,15 @@ input[type="text"].input-copyable {
|
|||
}
|
||||
|
||||
select {
|
||||
transition: outline $transition-standard;
|
||||
cursor: pointer;
|
||||
transition: outline var(--transition-duration) var(--transition-type);
|
||||
box-sizing: border-box;
|
||||
padding-left: 5px;
|
||||
padding-right: 5px;
|
||||
height: $spacing-vertical;
|
||||
background: var(--select-bg);
|
||||
color: var(--select-color);
|
||||
&:focus {
|
||||
outline: $width-input-border solid $color-primary;
|
||||
outline: var(--input-border-size) solid var(--color-primary);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -62,16 +68,18 @@ input[type="text"].input-copyable {
|
|||
input[type="search"],
|
||||
input[type="date"] {
|
||||
@include placeholder {
|
||||
color: lighten($color-text-dark, 60%);
|
||||
color: lighten($text-color, 60%);
|
||||
}
|
||||
transition: all $transition-standard;
|
||||
transition: all var(--transition-duration) var(--transition-type);
|
||||
cursor: pointer;
|
||||
padding-left: 1px;
|
||||
padding-right: 1px;
|
||||
box-sizing: border-box;
|
||||
-webkit-appearance: none;
|
||||
background: var(--input-bg);
|
||||
color: var(--input-color);
|
||||
&[readonly] {
|
||||
background-color: #bbb;
|
||||
background-color: var(--input-bg);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -81,12 +89,13 @@ input[type="text"].input-copyable {
|
|||
input[type="number"],
|
||||
input[type="search"],
|
||||
input[type="date"] {
|
||||
border-bottom: $width-input-border solid $color-form-border;
|
||||
border-bottom: var(--input-border-size) solid var(--input-border-color);
|
||||
line-height: 1;
|
||||
padding-top: $spacing-vertical * 1/3;
|
||||
padding-bottom: $spacing-vertical * 1/3;
|
||||
|
||||
&.form-field__input--error {
|
||||
border-color: $color-error;
|
||||
border-color: var(--color-error);
|
||||
}
|
||||
&.form-field__input--inline {
|
||||
padding-top: 0;
|
||||
|
|
@ -104,12 +113,13 @@ input[type="text"].input-copyable {
|
|||
input[type="number"]:focus,
|
||||
input[type="search"]:focus,
|
||||
input[type="date"]:focus {
|
||||
border-color: $color-primary;
|
||||
border-color: var(--color-primary);
|
||||
background: var(--input-active-bg);
|
||||
}
|
||||
|
||||
textarea {
|
||||
padding: 2px;
|
||||
border: $width-input-border solid $color-form-border;
|
||||
border: var(--input-border-size) solid var(--input-border-color);
|
||||
}
|
||||
}
|
||||
.form-field--SimpleMDE {
|
||||
|
|
@ -117,6 +127,7 @@ input[type="text"].input-copyable {
|
|||
}
|
||||
|
||||
.form-field__label {
|
||||
color: var(--color-help);
|
||||
&[for] { cursor: pointer; }
|
||||
> input[type="checkbox"], input[type="radio"] {
|
||||
margin-right: 6px;
|
||||
|
|
@ -124,11 +135,11 @@ input[type="text"].input-copyable {
|
|||
}
|
||||
|
||||
.form-field__label--error {
|
||||
color: $color-error;
|
||||
color: var(--color-error);
|
||||
}
|
||||
|
||||
.form-field__input-text {
|
||||
width: $width-input-text;
|
||||
width: var(--input-width);
|
||||
}
|
||||
|
||||
.form-field__prefix {
|
||||
|
|
@ -153,16 +164,16 @@ input[type="text"].input-copyable {
|
|||
.form-field__error, .form-field__helper {
|
||||
margin-top: $spacing-vertical * 1/3;
|
||||
font-size: 0.8em;
|
||||
transition: opacity $transition-standard;
|
||||
transition: opacity var(--transition-duration) var(--transition-type);
|
||||
}
|
||||
|
||||
.form-field__error {
|
||||
color: $color-error;
|
||||
color: var(--color-error);
|
||||
}
|
||||
.form-field__helper {
|
||||
color: $color-help;
|
||||
color:var(--color-help);
|
||||
}
|
||||
|
||||
.form-field__input.form-field__input-SimpleMDE .CodeMirror-scroll {
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,15 +1,11 @@
|
|||
@import "../global";
|
||||
|
||||
$color-header: #666;
|
||||
$color-header-active: darken($color-header, 20%);
|
||||
|
||||
#header
|
||||
{
|
||||
color: $color-header;
|
||||
background: #fff;
|
||||
color: var(--header-color);
|
||||
background: var(--header-bg);
|
||||
display: flex;
|
||||
position: fixed;
|
||||
box-shadow: $box-shadow-layer;
|
||||
box-shadow: var(--box-shadow-layer);
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
|
|
@ -21,7 +17,11 @@ $color-header-active: darken($color-header, 20%);
|
|||
flex: 0 0 content;
|
||||
padding-left: $spacing-vertical / 4;
|
||||
padding-right: $spacing-vertical / 4;
|
||||
.button-alt {
|
||||
background: var(--header-button-bg) !important;
|
||||
}
|
||||
}
|
||||
|
||||
.header__item--wunderbar {
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
|
@ -36,23 +36,24 @@ $color-header-active: darken($color-header, 20%);
|
|||
}
|
||||
}
|
||||
|
||||
.wunderbar--active .icon-search { color: $color-primary; }
|
||||
.wunderbar--active .icon-search { color: var(--color-primary); }
|
||||
|
||||
.wunderbar__input {
|
||||
background: rgba(255, 255, 255, 0.7);
|
||||
background: var(--search-bg);
|
||||
width: 100%;
|
||||
color: $color-header;
|
||||
color: var(--search-color);
|
||||
height: $spacing-vertical * 1.5;
|
||||
line-height: $spacing-vertical * 1.5;
|
||||
padding-left: 38px;
|
||||
padding-right: 5px;
|
||||
border: 1px solid $color-text-dark;
|
||||
@include border-radius(2px);
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 2px;
|
||||
border: var(--search-border);
|
||||
transition: box-shadow var(--transition-duration) var(--transition-type);
|
||||
&:focus {
|
||||
color: $color-header-active;
|
||||
box-shadow: $box-shadow-focus;
|
||||
border-color: $color-primary;
|
||||
background: var(--search-active-bg);
|
||||
color: var(--search-active-color);
|
||||
box-shadow: var(--box-shadow-focus);
|
||||
border-color: var(--color-primary);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -65,12 +66,12 @@ nav.sub-header
|
|||
margin-right: auto;
|
||||
> a
|
||||
{
|
||||
$sub-header-selected-underline-height: 2px;
|
||||
display: inline-block;
|
||||
margin: 0 15px;
|
||||
padding: 0 5px;
|
||||
line-height: $height-header - $spacing-vertical - $sub-header-selected-underline-height;
|
||||
color: $color-header;
|
||||
line-height:calc(var(--header-height) - $spacing-vertical - var(--tab-border-size));
|
||||
color: var(--tab-color);
|
||||
|
||||
&:first-child
|
||||
{
|
||||
margin-left: 0;
|
||||
|
|
@ -81,12 +82,12 @@ nav.sub-header
|
|||
}
|
||||
&.sub-header-selected
|
||||
{
|
||||
border-bottom: $sub-header-selected-underline-height solid $color-header-active;
|
||||
color: $color-header-active;
|
||||
border-bottom: var(--tab-border);
|
||||
color: var(--tab-active-color);
|
||||
}
|
||||
&:hover
|
||||
{
|
||||
color: $color-header-active;
|
||||
color: var(--tab-active-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,8 +1,7 @@
|
|||
@import "../global";
|
||||
|
||||
.load-screen {
|
||||
color: white;
|
||||
background: $color-primary;
|
||||
background: var(--color-brand);
|
||||
background-size: cover;
|
||||
min-height: 100vh;
|
||||
min-width: 100vw;
|
||||
|
|
@ -19,7 +18,7 @@
|
|||
}
|
||||
|
||||
.load-screen__details {
|
||||
color: $color-load-screen-text;
|
||||
color: var(--color-load-screen-text);
|
||||
}
|
||||
|
||||
.load-screen__details--warning {
|
||||
|
|
|
|||
99
ui/scss/component/_markdown-editor.scss
Normal file
99
ui/scss/component/_markdown-editor.scss
Normal file
|
|
@ -0,0 +1,99 @@
|
|||
.CodeMirror {
|
||||
background: var(--input-active-bg) !important;
|
||||
border: 1px solid var(--input-border-color) !important;
|
||||
color: var(--text-color) !important;
|
||||
}
|
||||
|
||||
.CodeMirror-fullscreen {
|
||||
background: var(--input-bg);
|
||||
}
|
||||
|
||||
.editor-toolbar {
|
||||
border: 1px solid var(--input-border-color) !important;
|
||||
border-bottom: 0 !important;
|
||||
}
|
||||
|
||||
.editor-toolbar i.separator {
|
||||
border-color: var(--input-border-color) !important;
|
||||
}
|
||||
|
||||
.editor-toolbar.fullscreen {
|
||||
background: var(--color-bg) !important;
|
||||
}
|
||||
|
||||
div.editor-toolbar a {
|
||||
color: var(--text-color) !important;
|
||||
}
|
||||
|
||||
.editor-toolbar a.active,
|
||||
.editor-toolbar a:hover {
|
||||
background: var(--button-bg) !important;
|
||||
border-color: transparent !important;
|
||||
}
|
||||
|
||||
.editor-toolbar.disabled-for-preview a:not(.no-disable) {
|
||||
background: transparent !important;
|
||||
border-color: transparent !important;
|
||||
}
|
||||
|
||||
.editor-statusbar {
|
||||
color: #959694;
|
||||
}
|
||||
|
||||
.editor-preview {
|
||||
background: var(--card-bg) !important;
|
||||
}
|
||||
|
||||
.editor-preview-side {
|
||||
background: var(--color-bg-alt) !important;
|
||||
border: 1px solid var(--input-border-color) !important;
|
||||
}
|
||||
|
||||
.editor-preview pre,
|
||||
.editor-preview-side pre {
|
||||
background: #eee;
|
||||
}
|
||||
|
||||
.editor-preview table td,
|
||||
.editor-preview table th,
|
||||
.editor-preview-side table td,
|
||||
.editor-preview-side table th {
|
||||
border: 1px solid var(--input-border-color) !important;
|
||||
}
|
||||
|
||||
.CodeMirror .CodeMirror-code .cm-tag {
|
||||
color: #63a35c;
|
||||
}
|
||||
|
||||
.CodeMirror .CodeMirror-code .cm-attribute {
|
||||
color: #795da3;
|
||||
}
|
||||
|
||||
.CodeMirror .CodeMirror-code .cm-string {
|
||||
color: #183691;
|
||||
}
|
||||
|
||||
.CodeMirror .CodeMirror-selected {
|
||||
background: var(--text-selection-bg) !important;
|
||||
color: var(--text-selection-color) !important;
|
||||
}
|
||||
|
||||
.CodeMirror .CodeMirror-cursor{
|
||||
border-color: var(--text-color) !important;
|
||||
}
|
||||
|
||||
.CodeMirror .CodeMirror-code .cm-comment {
|
||||
background: rgba(0, 0, 0, .05);
|
||||
}
|
||||
|
||||
.CodeMirror .CodeMirror-code .cm-link {
|
||||
color: #7f8c8d;
|
||||
}
|
||||
|
||||
.CodeMirror .CodeMirror-code .cm-url {
|
||||
color: #aab2b3;
|
||||
}
|
||||
|
||||
.CodeMirror .CodeMirror-placeholder {
|
||||
opacity: .5;
|
||||
}
|
||||
|
|
@ -1,4 +1,3 @@
|
|||
@import "../global";
|
||||
|
||||
$border-radius-menu: 2px;
|
||||
|
||||
|
|
@ -9,9 +8,9 @@ $border-radius-menu: 2px;
|
|||
.menu {
|
||||
position: absolute;
|
||||
white-space: nowrap;
|
||||
background-color: white;
|
||||
box-shadow: $box-shadow-layer;
|
||||
border-radius: $border-radius-menu;
|
||||
background-color: var(--menu-bg);
|
||||
box-shadow: var(--box-shadow-layer);
|
||||
border-radius: var(--menu-radius);
|
||||
padding-top: ($spacing-vertical / 5) 0px;
|
||||
z-index: 1;
|
||||
}
|
||||
|
|
@ -20,6 +19,6 @@ $border-radius-menu: 2px;
|
|||
display: block;
|
||||
padding: ($spacing-vertical / 4) ($spacing-vertical / 2);
|
||||
&:hover {
|
||||
background: $color-bg-alt;
|
||||
background: var(--menu-item-hover-bg);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,4 +1,3 @@
|
|||
@import "../global";
|
||||
|
||||
.modal-overlay, .error-modal-overlay {
|
||||
position: fixed;
|
||||
|
|
@ -10,7 +9,7 @@
|
|||
left: 0px;
|
||||
right: 0px;
|
||||
bottom: 0px;
|
||||
background-color: rgba(255, 255, 255, 0.74902);
|
||||
background-color: var(--modal-overlay-bg);
|
||||
z-index: 9999;
|
||||
}
|
||||
|
||||
|
|
@ -24,12 +23,12 @@
|
|||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
border: 1px solid rgb(204, 204, 204);
|
||||
background: rgb(255, 255, 255);
|
||||
border: var(--modal-border);
|
||||
background: var(--modal-bg);
|
||||
overflow: auto;
|
||||
border-radius: 4px;
|
||||
padding: $spacing-vertical;
|
||||
box-shadow: $box-shadow-layer;
|
||||
box-shadow: var(--box-shadow-layer);
|
||||
max-width: 400px;
|
||||
|
||||
word-break: break-word;
|
||||
|
|
@ -52,7 +51,7 @@
|
|||
}
|
||||
|
||||
.error-modal-overlay {
|
||||
background: rgba(#000, .88);
|
||||
background: var(--modal-overlay-bg);
|
||||
}
|
||||
|
||||
.error-modal__content {
|
||||
|
|
@ -74,7 +73,7 @@
|
|||
width: 400px;
|
||||
}
|
||||
.error-modal__error-list { /*shitty hack/temp fix for long errors making modal unusable*/
|
||||
border: 1px solid #eee;
|
||||
border: 1px solid var(--input-border-color);
|
||||
padding: 8px;
|
||||
list-style: none;
|
||||
max-height: 400px;
|
||||
|
|
|
|||
|
|
@ -1,4 +1,3 @@
|
|||
@import "../global";
|
||||
|
||||
.notice {
|
||||
padding: 10px 20px;
|
||||
|
|
|
|||
|
|
@ -1,4 +1,3 @@
|
|||
@import "../global";
|
||||
|
||||
.pagination {
|
||||
display: block;
|
||||
|
|
@ -32,5 +31,5 @@
|
|||
|
||||
.pagination__item--selected {
|
||||
color: white;
|
||||
background: $color-primary;
|
||||
background: var(--color-primary);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,4 +1,3 @@
|
|||
@import "../global";
|
||||
|
||||
$padding-snack-horizontal: $spacing-vertical;
|
||||
|
||||
|
|
@ -16,7 +15,7 @@ $padding-snack-horizontal: $spacing-vertical;
|
|||
margin-right: auto;
|
||||
min-width: 300px;
|
||||
max-width: 500px;
|
||||
background: $color-black-transparent;
|
||||
background: var(--color-dark-overlay);
|
||||
color: #f0f0f0;
|
||||
|
||||
display: flex;
|
||||
|
|
@ -25,7 +24,7 @@ $padding-snack-horizontal: $spacing-vertical;
|
|||
|
||||
border-radius: 2px;
|
||||
|
||||
transition: all $transition-standard;
|
||||
transition: all var(--transition-duration) var(--transition-type);
|
||||
|
||||
z-index: 10000; /*hack to get it over react modal */
|
||||
}
|
||||
|
|
@ -33,7 +32,7 @@ $padding-snack-horizontal: $spacing-vertical;
|
|||
.snack-bar__action {
|
||||
display: inline-block;
|
||||
text-transform: uppercase;
|
||||
color: $color-primary-light;
|
||||
color: var(--color-primary-light);
|
||||
margin: 0px 0px 0px $padding-snack-horizontal;
|
||||
min-width: min-content;
|
||||
&:hover {
|
||||
|
|
|
|||
|
|
@ -1,4 +1,3 @@
|
|||
@import "../global";
|
||||
|
||||
table.table-standard {
|
||||
word-wrap: break-word;
|
||||
|
|
@ -20,7 +19,7 @@ table.table-standard {
|
|||
font-size: 0.9em;
|
||||
padding: $spacing-vertical/4+1 8px $spacing-vertical/4-2;
|
||||
text-align: left;
|
||||
border-bottom: 1px solid #e2e2e2;
|
||||
border-bottom: var(--table-border);
|
||||
img {
|
||||
vertical-align: text-bottom;
|
||||
}
|
||||
|
|
@ -29,7 +28,7 @@ table.table-standard {
|
|||
}
|
||||
}
|
||||
tr.thead:not(:first-child) th {
|
||||
border-top: 1px solid #e2e2e2;
|
||||
border-top: var(--table-border);
|
||||
}
|
||||
tfoot td {
|
||||
padding: $spacing-vertical / 2 8px;
|
||||
|
|
@ -38,10 +37,10 @@ table.table-standard {
|
|||
tbody {
|
||||
tr {
|
||||
&:nth-child(even):not(.odd) {
|
||||
background-color: #f4f4f4;
|
||||
background-color: var(--table-item-odd);
|
||||
}
|
||||
&:nth-child(odd):not(.even) {
|
||||
background-color: white;
|
||||
background-color: var(--table-item-even);
|
||||
}
|
||||
&.thead {
|
||||
background: none;
|
||||
|
|
@ -60,4 +59,4 @@ table.table-standard {
|
|||
|
||||
table.table-stretch {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
@import "../global";
|
||||
@import "../mixin/link.scss";
|
||||
|
||||
.tooltip {
|
||||
position: relative;
|
||||
|
|
@ -9,28 +9,25 @@
|
|||
}
|
||||
|
||||
.tooltip__body {
|
||||
$tooltip-body-width: 300px;
|
||||
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
left: 50%;
|
||||
margin-left: $tooltip-body-width * -1 / 2;
|
||||
margin-left: calc(var(--tooltip-width) * -1 / 2);
|
||||
white-space: normal;
|
||||
|
||||
box-sizing: border-box;
|
||||
padding: $spacing-vertical / 2;
|
||||
width: $tooltip-body-width;
|
||||
border: 1px solid #aaa;
|
||||
color: $color-text-dark;
|
||||
background-color: $color-bg;
|
||||
font-size: $font-size * 7/8;
|
||||
line-height: $font-line-height;
|
||||
box-shadow: $box-shadow-layer;
|
||||
width: var(--tooltip-width);
|
||||
border: var(--tooltip-border);
|
||||
color: var(--tooltip-color);
|
||||
background-color: var(--tooltip-bg);
|
||||
font-size: calc(var(--font-size) * 7/8);
|
||||
line-height: var(--font-line-height);
|
||||
box-shadow: var(--box-shadow-layer);
|
||||
}
|
||||
|
||||
.tooltip--header .tooltip__link {
|
||||
@include text-link(#aaa);
|
||||
font-size: $font-size * 3/4;
|
||||
margin-left: $padding-button;
|
||||
font-size: calc( var(--font-size) * 3/4 );
|
||||
margin-left: var(--button-padding);
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,4 +1,5 @@
|
|||
@import "../global";
|
||||
|
||||
$height-video-embedded: $width-page-constrained * 9 / 16;
|
||||
|
||||
video {
|
||||
object-fit: contain;
|
||||
|
|
@ -37,7 +38,7 @@ video {
|
|||
.video--obscured .video__cover
|
||||
{
|
||||
position: relative;
|
||||
filter: blur($blur-intensity-nsfw);
|
||||
filter: blur(var(--nsfw-blur-intensity));
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -108,7 +109,11 @@ video {
|
|||
background-position: center center;
|
||||
background-repeat: no-repeat;
|
||||
position: relative;
|
||||
.video__play-button { @include absolute-center(); }
|
||||
.video__play-button {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
|
||||
.video__play-button {
|
||||
|
|
@ -120,12 +125,12 @@ video {
|
|||
font-size: $spacing-vertical * 3;
|
||||
color: white;
|
||||
z-index: 1;
|
||||
background: $color-black-transparent;
|
||||
background: var(--color-dark-overlay);
|
||||
opacity: 0.6;
|
||||
left: 0;
|
||||
top: 0;
|
||||
&:hover {
|
||||
opacity: 1;
|
||||
transition: opacity $transition-standard;
|
||||
transition: opacity var(--transition-duration) var(--transition-type);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
30
ui/scss/mixin/link.scss
Normal file
30
ui/scss/mixin/link.scss
Normal file
|
|
@ -0,0 +1,30 @@
|
|||
@mixin text-link($color: var(--color-primary), $hover-opacity: 0.70) {
|
||||
.icon
|
||||
{
|
||||
&:first-child {
|
||||
padding-right: 5px;
|
||||
}
|
||||
&:last-child:not(:only-child) {
|
||||
padding-left: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
&:not(.no-underline) {
|
||||
text-decoration: underline;
|
||||
.icon {
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
&:hover
|
||||
{
|
||||
opacity: $hover-opacity;
|
||||
transition: opacity var(--transition-duration) var(--transition-type);
|
||||
text-decoration: underline;
|
||||
.icon {
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
||||
color: $color;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
|
@ -1,5 +0,0 @@
|
|||
@import "../global";
|
||||
|
||||
.reward-page__details {
|
||||
background-color: lighten($color-canvas, 1.5%);
|
||||
}
|
||||
|
|
@ -1,5 +1,3 @@
|
|||
@import "../global";
|
||||
|
||||
.show-page-media {
|
||||
text-align: center;
|
||||
margin-bottom: $spacing-vertical;
|
||||
|
|
|
|||
|
|
@ -22,4 +22,4 @@ DIR="$( cd "$( dirname "${BASH_SOURCE[0]}" )" && pwd )"
|
|||
node_modules/.bin/node-sass --output $DIR/../app/dist/css --sourcemap=none --watch $DIR/scss/ &
|
||||
|
||||
node_modules/.bin/webpack --config webpack.dev.config.js --progress --colors --watch
|
||||
)
|
||||
)
|
||||
|
|
|
|||
Loading…
Reference in a new issue