Replacing existing colors with npm module, and refactoring Sass
This commit is contained in:
ポール ウェッブ
Sean Yesmunt
parent
7fd598360f
commit
ca35e1f15d
31 changed files with 665 additions and 652 deletions
|
|
@ -87,6 +87,7 @@
|
|||
"y18n": "^4.0.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@lbry/color": "^1.0.2",
|
||||
"axios": "^0.18.0",
|
||||
"babel-eslint": "^8.2.2",
|
||||
"babel-plugin-module-resolver": "^3.1.1",
|
||||
|
|
@ -123,6 +124,7 @@
|
|||
"node-loader": "^0.6.0",
|
||||
"node-sass": "^4.7.2",
|
||||
"prettier": "^1.11.1",
|
||||
"sass": "^1.14.2",
|
||||
"sass-loader": "^6.0.7",
|
||||
"webpack": "^3.10.0",
|
||||
"webpack-build-notifier": "^0.1.23",
|
||||
|
|
|
|||
|
|
@ -35,6 +35,7 @@
|
|||
}
|
||||
|
||||
html {
|
||||
background-color: $lbry-white;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
|
|
@ -43,7 +44,7 @@ body {
|
|||
font-weight: 400;
|
||||
font-size: 16px;
|
||||
line-height: 1.5;
|
||||
color: var(--text-color);
|
||||
color: $lbry-black;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
|
@ -54,7 +55,7 @@ body {
|
|||
|
||||
code {
|
||||
font: 1.5em Consolas, 'Lucida Console', 'Source Sans', monospace;
|
||||
background-color: var(--color-bg-alt);
|
||||
background-color: $lbry-gray-1;
|
||||
}
|
||||
|
||||
// Without this buttons don't have the Metropolis font
|
||||
|
|
@ -69,8 +70,8 @@ ul {
|
|||
}
|
||||
|
||||
input {
|
||||
border-bottom: var(--input-border-size) dotted var(--input-border-color);
|
||||
color: var(--input-color);
|
||||
border-bottom: var(--input-border-size) dotted $lbry-gray-5;
|
||||
color: $lbry-black;
|
||||
line-height: 1;
|
||||
cursor: text;
|
||||
background-color: transparent;
|
||||
|
|
@ -87,36 +88,36 @@ input {
|
|||
}
|
||||
&.input-copyable {
|
||||
flex: 1;
|
||||
background: var(--input-copyable-bg);
|
||||
color: var(--input-copyable-color);
|
||||
background-color: $lbry-gray-1;
|
||||
color: $lbry-gray-5;
|
||||
padding: 10px 16px;
|
||||
border: 1px dashed var(--input-copyable-border);
|
||||
border: 1px dashed $lbry-gray-3;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
&:not(.input-copyable):not(.wunderbar__input):not(:placeholder-shown):not(:disabled) {
|
||||
&:hover {
|
||||
border-color: var(--input-hover-border-color);
|
||||
border-color: rgba($lbry-black, 0.8);
|
||||
}
|
||||
border-bottom: var(--input-border-size) solid var(--input-border-color);
|
||||
border-bottom: var(--input-border-size) solid $lbry-gray-5;
|
||||
}
|
||||
|
||||
&:disabled {
|
||||
color: var(--input-disabled-color);
|
||||
border-bottom: var(--input-border-size) solid var(--input-disabled-color);
|
||||
color: $lbry-gray-3;
|
||||
border-bottom: var(--input-border-size) solid $lbry-gray-3;
|
||||
cursor: default;
|
||||
}
|
||||
}
|
||||
|
||||
textarea {
|
||||
border: 1px solid var(--color-divider);
|
||||
border: 1px solid $lbry-gray-2;
|
||||
font-size: 0.8em;
|
||||
width: 100%;
|
||||
padding: $spacing-vertical * 1/3;
|
||||
}
|
||||
|
||||
input::placeholder {
|
||||
color: var(--input-placeholder-color);
|
||||
color: $lbry-gray-5;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
|
|
@ -164,7 +165,7 @@ p {
|
|||
right: 0;
|
||||
bottom: 0;
|
||||
display: flex;
|
||||
background-color: var(--color-bg);
|
||||
background-color: rgba($lbry-gray-1, 0.3);
|
||||
|
||||
@media only screen and (min-width: $medium-breakpoint) {
|
||||
grid-template-columns: var(--side-nav-width-m) auto;
|
||||
|
|
@ -253,8 +254,8 @@ p {
|
|||
|
||||
/* Custom text selection */
|
||||
*::selection {
|
||||
background: var(--text-selection-bg);
|
||||
color: var(--text-selection-color);
|
||||
background: $lbry-teal-1;
|
||||
color: $lbry-white;
|
||||
}
|
||||
|
||||
.credit-amount {
|
||||
|
|
@ -274,20 +275,20 @@ p {
|
|||
}
|
||||
|
||||
.credit-amount--free {
|
||||
color: var(--color-credit-free);
|
||||
color: $lbry-blue-5;
|
||||
|
||||
&.credit-amount--file-page {
|
||||
color: var(--color-dark-blue);
|
||||
background-color: var(--color-secondary);
|
||||
color: $lbry-blue-5;
|
||||
background-color: $lbry-blue-2;
|
||||
}
|
||||
}
|
||||
|
||||
.credit-amount--cost {
|
||||
color: var(--color-credit-price);
|
||||
color: $lbry-gray-5;
|
||||
|
||||
&.credit-amount--file-page {
|
||||
color: var(--color-black);
|
||||
background-color: var(--color-yellow);
|
||||
color: $lbry-black;
|
||||
background-color: $lbry-yellow-3;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -300,7 +301,7 @@ p {
|
|||
}
|
||||
|
||||
.divider__horizontal {
|
||||
border-top: var(--color-divider);
|
||||
border-top: $lbry-gray-2;
|
||||
margin: 16px 0;
|
||||
}
|
||||
|
||||
|
|
@ -346,7 +347,7 @@ p {
|
|||
|
||||
.help {
|
||||
font-size: 12px;
|
||||
color: var(--color-help);
|
||||
color: $lbry-gray-5;
|
||||
}
|
||||
|
||||
.help--padded {
|
||||
|
|
@ -355,16 +356,16 @@ p {
|
|||
|
||||
.meta {
|
||||
font-size: 0.8em;
|
||||
color: var(--color-meta-light);
|
||||
color: $lbry-gray-1; // "--color-meta-light" does not exist
|
||||
}
|
||||
|
||||
.empty {
|
||||
color: var(--color-meta-light);
|
||||
color: $lbry-gray-1;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.qr-code {
|
||||
border: 3px solid var(--color-white);
|
||||
border: 3px solid $lbry-white;
|
||||
height: 134px;
|
||||
width: 134px;
|
||||
&.qr-code--right-padding {
|
||||
|
|
@ -376,7 +377,7 @@ p {
|
|||
}
|
||||
|
||||
.error-text {
|
||||
color: var(--color-error);
|
||||
color: $lbry-red-5;
|
||||
}
|
||||
|
||||
.thumbnail-preview {
|
||||
|
|
|
|||
|
|
@ -18,7 +18,8 @@ $large-breakpoint: 1921px;
|
|||
--snack-bar-width: 756px;
|
||||
|
||||
/* Colors: Brand */
|
||||
--color-white: #fff;
|
||||
/*
|
||||
--color-white: $lbry-white;
|
||||
--color-black: #000;
|
||||
--color-grey: #d6d6d6;
|
||||
--color-grey-light: #f6f6f6;
|
||||
|
|
@ -38,131 +39,166 @@ $large-breakpoint: 1921px;
|
|||
--color-purple: #8165b0;
|
||||
--color-blue-grey: #203049;
|
||||
--color-red-light: #fff6f6;
|
||||
*/
|
||||
|
||||
/* Colors */
|
||||
/*
|
||||
--color-divider: #e3e3e3;
|
||||
--color-help: rgba(0, 0, 0, 0.54);
|
||||
--color-error: #a94442;
|
||||
--color-nsfw: #bf4440;
|
||||
--color-download: var(--color-white);
|
||||
--color-download-overlay: var(--color-black);
|
||||
--color-download: $lbry-white;
|
||||
--color-download-overlay: $lbry-black;
|
||||
--color-bg: #fafafa;
|
||||
--color-bg-alt: var(--color-grey-light);
|
||||
--color-placeholder: var(--color-grey);
|
||||
--color-search-placeholder: var(--color-placeholder);
|
||||
--color-credit-free: var(--color-dark-blue);
|
||||
--color-credit-price: var(--card-text-color);
|
||||
--color-search-placeholder: $lbry-gray-3;
|
||||
--color-credit-free: $lbry-blue-5;
|
||||
--color-credit-price: $lbry-gray-5;
|
||||
--color-text-black: #444;
|
||||
--color-text-white: #efefef;
|
||||
*/
|
||||
|
||||
/* Shadows */
|
||||
/*
|
||||
--box-shadow-layer: transparent; // 0 2px 4px rgba(0,0,0,0.25);
|
||||
--box-shadow-button: 0 10px 20px rgba(0, 0, 0, 0.1);
|
||||
--box-shadow-wunderbar: 0 10px 20px rgba(0, 0, 0, 0.03);
|
||||
--box-shadow-header: 0px 6px 20px 1px rgba(0, 0, 0, 0.05);
|
||||
--box-shadow-header: 0 6px 20px 1px rgba(0, 0, 0, 0.05);
|
||||
*/
|
||||
|
||||
/* Text */
|
||||
/*
|
||||
--text-color: var(--color-text-black);
|
||||
--text-color-inverse: var(--color-text-white);
|
||||
--text-help-color: var(--color-help);
|
||||
--text-help-color: $lbry-gray-5;
|
||||
*/
|
||||
--text-max-width: 660px;
|
||||
--text-link-padding: 4px;
|
||||
|
||||
/* Text Selectiom */
|
||||
/*
|
||||
--text-selection-bg: var(--color-primary-light);
|
||||
--text-selection-color: var(--color-white);
|
||||
--text-selection-color: $lbry-white;
|
||||
--editor-text-selection-bg: rgba(57, 148, 131, 0.8);
|
||||
*/
|
||||
/* Form */
|
||||
--form-label-color: rgba(0, 0, 0, 0.54);
|
||||
// --form-label-color: rgba(0, 0, 0, 0.54);
|
||||
|
||||
/* Input */
|
||||
/*
|
||||
--input-bg: transparent;
|
||||
--input-label-color: var(--color-grey-dark);
|
||||
--input-color: var(--text-color);
|
||||
--input-label-color: $lbry-gray-5;
|
||||
--input-color: $lbry-black;
|
||||
--input-border-size: 1px;
|
||||
--input-border-color: var(--color-grey-dark);
|
||||
--input-border-color: $lbry-gray-5;
|
||||
--input-copyable-bg: #f6f6f6;
|
||||
--input-copyable-color: var(--color-grey-dark);
|
||||
--input-copyable-color: $lbry-gray-5;
|
||||
--input-copyable-border: var(--color-grey);
|
||||
--input-select-bg-color: var(--color-grey);
|
||||
--input-select-color: var(--text-color);
|
||||
--input-select-color: $lbry-black;
|
||||
--input-switch-color: var(--color-teal);
|
||||
*/
|
||||
|
||||
/* input:disabled */
|
||||
/*
|
||||
--input-disabled-border-color: rgba(0, 0, 0, 0.42);
|
||||
--input-disabled-color: rgba(0, 0, 0, 0.54);
|
||||
*/
|
||||
|
||||
/* input:hover */
|
||||
--input-hover-border-color: rgba(0, 0, 0, 0.87);
|
||||
// --input-hover-border-color: rgba(0, 0, 0, 0.87);
|
||||
|
||||
/* input:placeholder */
|
||||
--input-placeholder-color: var(--color-help);
|
||||
/*
|
||||
--input-placeholder-color: $lbry-gray-5;
|
||||
--input-placeholder-opacity: 1;
|
||||
*/
|
||||
|
||||
/* Select */
|
||||
--select-bg: var(--color-bg-alt);
|
||||
--select-color: var(--text-color);
|
||||
/*
|
||||
--select-bg: $lbry-gray-1;
|
||||
--select-color: $lbry-black;
|
||||
*/
|
||||
--select-height: 30px;
|
||||
|
||||
/* Button */
|
||||
--btn-bg-primary: var(--color-primary);
|
||||
--btn-color-primary: var(--color-white);
|
||||
/*
|
||||
--btn-bg-primary: $lbry-teal-3;
|
||||
--btn-color-primary: $lbry-white;
|
||||
--btn-bg-primary-hover: var(--color-primary-light);
|
||||
--btn-bg-alt: var(--color-white);
|
||||
--btn-color-alt: var(--text-color);
|
||||
--btn-color-inverse: var(--color-primary);
|
||||
--btn-bg-alt: $lbry-white;
|
||||
--btn-color-alt: $lbry-black;
|
||||
--btn-color-inverse: $lbry-teal-3;
|
||||
--btn-external-color: var(--color-light-blue);
|
||||
--btn-bg-secondary: var(--color-teal);
|
||||
--btn-bg-danger: var(--color-red);
|
||||
--btn-home-bg-color: var(--color-white);
|
||||
--btn-home-bg-color: $lbry-white;
|
||||
*/
|
||||
--btn-radius: 20px;
|
||||
--btn-height: 36px;
|
||||
|
||||
/* SnackBar */
|
||||
--snackbar-bg-primary: var(--color-primary);
|
||||
--snackbar-color-primary: var(--text-color-inverse);
|
||||
/*
|
||||
--snackbar-bg-primary: $lbry-teal-3;
|
||||
--snackbar-color-primary: $lbry-white;
|
||||
*/
|
||||
|
||||
/* Header */
|
||||
--header-bg: var(--color-white);
|
||||
/*
|
||||
--header-bg: $lbry-white;
|
||||
--header-color: var(--color-text);
|
||||
--header-active-color: rgba(0, 0, 0, 0.85);
|
||||
*/
|
||||
--header-height: 60px;
|
||||
/*
|
||||
--header-button-bg: transparent;
|
||||
--header-button-hover-bg: rgba(100, 100, 100, 0.15);
|
||||
--header-primary-color: var(--color-primary);
|
||||
--header-primary-color: $lbry-teal-3;
|
||||
*/
|
||||
|
||||
/* Header -> search */
|
||||
/*
|
||||
--search-color: #666;
|
||||
--search-bg-color: #fff;
|
||||
--search-bg-color: $lbry-white;
|
||||
--search-active-bg-color: var(--color-grey-light);
|
||||
--search-active-color: var(--header-active-color);
|
||||
--search-active-shadow: 0 6px 9px -2px var(--color-grey--dark);
|
||||
--search-item-border-color: transparent;
|
||||
--search-item-active-color: var(--color-black);
|
||||
--search-item-active-color: $lbry-black;
|
||||
*/
|
||||
--search-modal-input-height: 70px;
|
||||
--search-exact-result: #eaeaea;
|
||||
// --search-exact-result: #eaeaea;
|
||||
|
||||
/* Nav */
|
||||
--nav-color: var(--color-grey-dark);
|
||||
/*
|
||||
--nav-color: $lbry-gray-5;
|
||||
--nav-bg-color: var(--color-grey-light);
|
||||
*/
|
||||
|
||||
/* Table */
|
||||
/*
|
||||
--table-border: 1px solid var(--color-grey-light);
|
||||
--table-item-odd: var(--color-grey-light);
|
||||
--table-item-even: transparent;
|
||||
*/
|
||||
|
||||
/* Card */
|
||||
--card-bg: var(--color-white);
|
||||
--card-text-color: var(--color-grey-dark);
|
||||
/*
|
||||
--card-bg: $lbry-white;
|
||||
--card-text-color: $lbry-gray-5;
|
||||
*/
|
||||
--card-radius: 2px;
|
||||
--card-max-width: 1000px;
|
||||
--card-wallet-color: var(--text-color-inverse);
|
||||
/*
|
||||
--card-wallet-color: $lbry-white;
|
||||
--success-msg-color: var(--color-green);
|
||||
--success-msg-border: var(--color-green-blue);
|
||||
--success-msg-border: mix($lbry-green-3, $lbry-blue-3, 50%);
|
||||
--success-msg-bg: var(--color-green-light);
|
||||
--error-msg-color: var(--color-error);
|
||||
--error-msg-border: var(--color-error);
|
||||
--error-msg-color: $lbry-red-5;
|
||||
--error-msg-border: $lbry-red-5;
|
||||
--error-msg-bg: var(--color-red-light);
|
||||
*/
|
||||
|
||||
/* File */
|
||||
--file-tile-media-height: 125px;
|
||||
|
|
@ -177,22 +213,28 @@ $large-breakpoint: 1921px;
|
|||
|
||||
/* Modal */
|
||||
--modal-width: 440px;
|
||||
--modal-bg: var(--color-bg);
|
||||
--modal-fullscreen-bg: var(--color-bg);
|
||||
/*
|
||||
--modal-bg: rgba($lbry-gray-1, 0.5);
|
||||
--modal-fullscreen-bg: rgba($lbry-gray-1, 0.5);
|
||||
--modal-overlay-bg: rgba(246, 246, 246, 0.75);
|
||||
--modal-border: 1px solid rgb(204, 204, 204);
|
||||
--modal-btn-bg-color: var(--btn-bg-alt);
|
||||
--modal-btn-bg-color: $lbry-white;
|
||||
*/
|
||||
|
||||
// /* Tooltip */
|
||||
/*
|
||||
--tooltip-bg: #555;
|
||||
--tooltip-color: var(--color-white);
|
||||
--tooltip-color: $lbry-white;
|
||||
*/
|
||||
|
||||
/* Scrollbar */
|
||||
/*
|
||||
--scrollbar-radius: 10px;
|
||||
--scrollbar-thumb-bg: rgba(0, 0, 0, 0.2);
|
||||
--scrollbar-thumb-hover-bg: rgba(0, 0, 0, 0.35);
|
||||
--scrollbar-thumb-active-bg: var(--color-primary);
|
||||
--scrollbar-thumb-active-bg: $lbry-teal-3;
|
||||
--scrollbar-track-bg: transparent;
|
||||
*/
|
||||
|
||||
// /* Animation :) */
|
||||
--animation-duration: 0.3s;
|
||||
|
|
|
|||
|
|
@ -1,35 +1,11 @@
|
|||
@charset "UTF-8";
|
||||
@import '_reset.scss';
|
||||
@import '_vars.scss';
|
||||
@import '_gui.scss';
|
||||
@import 'component/_syntax-highlighter.scss';
|
||||
@import 'component/_table.scss';
|
||||
@import 'component/_button.scss';
|
||||
@import 'component/_card.scss';
|
||||
@import 'component/_file-download.scss';
|
||||
@import 'component/_form-field.scss';
|
||||
@import 'component/_header.scss';
|
||||
@import 'component/_menu.scss';
|
||||
@import 'component/_tooltip.scss';
|
||||
@import 'component/_load-screen.scss';
|
||||
@import 'component/_channel-indicator.scss';
|
||||
@import 'component/_notice.scss';
|
||||
@import 'component/_modal.scss';
|
||||
@import 'component/_snack-bar.scss';
|
||||
@import 'component/_content.scss';
|
||||
@import 'component/_pagination.scss';
|
||||
@import 'component/_markdown-preview.scss';
|
||||
@import 'component/_markdown-editor.scss';
|
||||
@import 'component/_scrollbar.scss';
|
||||
@import 'component/_spinner.scss';
|
||||
@import 'component/_nav.scss';
|
||||
@import 'component/_file-list.scss';
|
||||
@import 'component/_file-render.scss';
|
||||
@import 'component/_search.scss';
|
||||
@import 'component/_toggle.scss';
|
||||
@import 'component/_search.scss';
|
||||
@import 'component/_dat-gui.scss';
|
||||
@import 'component/_item-list.scss';
|
||||
@import 'component/_time.scss';
|
||||
@import 'component/_icon.scss';
|
||||
@import 'component/_placeholder.scss';
|
||||
@charset "utf-8";
|
||||
|
||||
@import '~@lbry/color/lbry-color', 'reset', 'vars', 'gui', 'component/syntax-highlighter',
|
||||
'component/table', 'component/button', 'component/card', 'component/file-download',
|
||||
'component/form-field', 'component/header', 'component/menu', 'component/tooltip',
|
||||
'component/load-screen', 'component/channel-indicator', 'component/notice', 'component/modal',
|
||||
'component/snack-bar', 'component/content', 'component/pagination', 'component/markdown-preview',
|
||||
'component/markdown-editor', 'component/scrollbar', 'component/spinner', 'component/nav',
|
||||
'component/file-list', 'component/file-render', 'component/search', 'component/toggle',
|
||||
'component/search', 'component/dat-gui', 'component/item-list', 'component/time', 'component/icon',
|
||||
'component/placeholder';
|
||||
|
|
|
|||
|
|
@ -11,8 +11,8 @@ button:disabled {
|
|||
height: var(--btn-height);
|
||||
min-width: var(--btn-height);
|
||||
border-radius: var(--btn-radius);
|
||||
background-color: var(--btn-bg-primary);
|
||||
color: var(--btn-color-primary);
|
||||
background-color: $lbry-teal-3;
|
||||
color: $lbry-white;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
|
@ -21,12 +21,12 @@ button:disabled {
|
|||
transition: all var(--animation-duration) var(--animation-style);
|
||||
|
||||
&:not(:disabled) {
|
||||
box-shadow: var(--box-shadow-button);
|
||||
// box-shadow: var(--box-shadow-button);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
box-shadow: none;
|
||||
background-color: var(--btn-bg-primary-hover);
|
||||
// box-shadow: none;
|
||||
background-color: $lbry-teal-1;
|
||||
}
|
||||
|
||||
.icon + .btn__label {
|
||||
|
|
@ -35,23 +35,23 @@ button:disabled {
|
|||
}
|
||||
|
||||
.btn.btn--alt {
|
||||
color: var(--btn-color-alt);
|
||||
background-color: var(--btn-bg-alt);
|
||||
color: $lbry-black;
|
||||
background-color: $lbry-white;
|
||||
|
||||
&:disabled {
|
||||
color: var(--color-help);
|
||||
color: $lbry-gray-5;
|
||||
background-color: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
.btn.btn--danger {
|
||||
background-color: var(--btn-bg-danger);
|
||||
background-color: $lbry-red-3;
|
||||
}
|
||||
|
||||
.btn.btn--inverse {
|
||||
background-color: transparent;
|
||||
box-shadow: none;
|
||||
color: var(--btn-color-inverse);
|
||||
color: $lbry-teal-3;
|
||||
}
|
||||
|
||||
.btn.btn--link {
|
||||
|
|
@ -59,7 +59,7 @@ button:disabled {
|
|||
margin: 0;
|
||||
background-color: inherit;
|
||||
font-size: 1em;
|
||||
color: var(--btn-color-inverse);
|
||||
color: $lbry-teal-3;
|
||||
border-radius: 0;
|
||||
display: inline;
|
||||
min-width: 0;
|
||||
|
|
@ -68,11 +68,11 @@ button:disabled {
|
|||
}
|
||||
|
||||
.btn.btn--external-link {
|
||||
color: var(--btn-external-color);
|
||||
color: $lbry-blue-1;
|
||||
}
|
||||
|
||||
.btn.btn--secondary {
|
||||
background-color: var(--btn-bg-secondary);
|
||||
background-color: $lbry-teal-3;
|
||||
}
|
||||
|
||||
.btn.btn--tourniquet {
|
||||
|
|
@ -108,7 +108,7 @@ button:disabled {
|
|||
cursor: default;
|
||||
|
||||
&.btn--primary {
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
background-color: rgba($lbry-black, 0.5);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
|
|
@ -141,7 +141,7 @@ button:disabled {
|
|||
*/
|
||||
|
||||
.btn.btn--home-nav {
|
||||
background-color: var(--btn-home-bg-color);
|
||||
background-color: $lbry-white;
|
||||
box-shadow: none;
|
||||
|
||||
.btn__content {
|
||||
|
|
@ -151,7 +151,7 @@ button:disabled {
|
|||
|
||||
.btn.btn--arrow {
|
||||
width: var(--btn-arrow-width);
|
||||
color: var(--text-color);
|
||||
color: $lbry-black;
|
||||
|
||||
&:disabled {
|
||||
opacity: 0.3;
|
||||
|
|
@ -163,38 +163,38 @@ button:disabled {
|
|||
display: inline-block;
|
||||
|
||||
&:hover {
|
||||
color: var(--btn-color-inverse);
|
||||
color: $lbry-teal-3;
|
||||
}
|
||||
}
|
||||
|
||||
.btn.btn--header-publish {
|
||||
background-color: var(--header-primary-color);
|
||||
background-color: $lbry-teal-3;
|
||||
}
|
||||
|
||||
.btn.btn--header-balance {
|
||||
font-size: 14px;
|
||||
color: var(--header-primary-color);
|
||||
color: $lbry-teal-3;
|
||||
|
||||
@media only screen and (min-width: $large-breakpoint) {
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.btn__label--balance {
|
||||
color: var(--text-help-color);
|
||||
color: $lbry-gray-5;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: transparent;
|
||||
|
||||
.btn__label--balance {
|
||||
color: var(--header-primary-color);
|
||||
color: $lbry-teal-3;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.btn.btn--file-actions {
|
||||
background-color: var(--color-black);
|
||||
color: var(--color-white);
|
||||
background-color: $lbry-black;
|
||||
color: $lbry-white;
|
||||
opacity: 0.8;
|
||||
border-radius: var(--btn-radius);
|
||||
width: var(--btn-height);
|
||||
|
|
|
|||
|
|
@ -21,10 +21,10 @@
|
|||
}
|
||||
|
||||
.card--section {
|
||||
background-color: var(--card-bg);
|
||||
background-color: $lbry-white;
|
||||
padding: $spacing-vertical;
|
||||
margin-top: $spacing-vertical * 2/3;
|
||||
box-shadow: var(--box-shadow-layer);
|
||||
// box-shadow: var(--box-shadow-layer);
|
||||
}
|
||||
|
||||
.card--small {
|
||||
|
|
@ -35,7 +35,7 @@
|
|||
background-size: cover;
|
||||
background-repeat: no-repeat;
|
||||
background-position: 50% 50%;
|
||||
background-color: var(--color-placeholder);
|
||||
background-color: $lbry-gray-3;
|
||||
}
|
||||
|
||||
.card__media--no-img {
|
||||
|
|
@ -46,7 +46,7 @@
|
|||
}
|
||||
|
||||
.card__media--nsfw {
|
||||
background-color: var(--color-error);
|
||||
background-color: $lbry-red-5;
|
||||
}
|
||||
|
||||
.card--link {
|
||||
|
|
@ -60,12 +60,12 @@
|
|||
.card--wallet-balance {
|
||||
background: url('../../../static/img/stripe-background.png') no-repeat;
|
||||
background-size: cover;
|
||||
color: var(--card-wallet-color);
|
||||
color: $lbry-white;
|
||||
justify-content: space-between;
|
||||
|
||||
.card__title,
|
||||
.card__subtitle {
|
||||
color: var(--card-wallet-color);
|
||||
color: $lbry-white;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -76,7 +76,7 @@
|
|||
|
||||
.card__title {
|
||||
font-size: 1.5em;
|
||||
color: var(--text-color);
|
||||
color: $lbry-black;
|
||||
padding-top: $spacing-vertical * 1/3;
|
||||
|
||||
@media (min-width: $large-breakpoint) {
|
||||
|
|
@ -107,7 +107,7 @@
|
|||
}
|
||||
|
||||
.card__subtitle {
|
||||
color: var(--card-text-color);
|
||||
color: $lbry-gray-5;
|
||||
font-size: 1em;
|
||||
line-height: 1em;
|
||||
padding-top: $spacing-vertical * 1/3;
|
||||
|
|
@ -131,7 +131,7 @@
|
|||
}
|
||||
|
||||
.card__meta {
|
||||
color: var(--color-help);
|
||||
color: $lbry-gray-5;
|
||||
font-size: 14px;
|
||||
font-family: 'metropolis-medium';
|
||||
padding-top: $spacing-vertical * 2/3;
|
||||
|
|
@ -140,7 +140,7 @@
|
|||
.card__file-properties {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: var(--card-text-color);
|
||||
color: $lbry-gray-5;
|
||||
|
||||
.icon + .icon {
|
||||
margin-left: $spacing-vertical * 1/3;
|
||||
|
|
@ -356,17 +356,17 @@
|
|||
}
|
||||
|
||||
.card__success-msg {
|
||||
border-left: 2px solid var(--success-msg-border);
|
||||
color: var(--success-msg-color);
|
||||
background-color: var(--success-msg-bg);
|
||||
border-left: 2px solid mix($lbry-green-3, $lbry-blue-3, 50%);
|
||||
color: $lbry-green-3;
|
||||
background-color: $lbry-green-1;
|
||||
padding: $spacing-vertical * 1/3;
|
||||
margin: $spacing-vertical * 1/3 0;
|
||||
}
|
||||
|
||||
.card__error-msg {
|
||||
border-left: 2px solid var(--error-msg-border);
|
||||
color: var(--error-msg-color);
|
||||
background-color: var(--error-msg-bg);
|
||||
border-left: 2px solid $lbry-red-5;
|
||||
color: $lbry-red-5;
|
||||
background-color: $lbry-red-1;
|
||||
padding: $spacing-vertical * 1/3;
|
||||
margin: $spacing-vertical * 1/3 0;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
}
|
||||
|
||||
.content__embedded {
|
||||
background-color: var(--color-black);
|
||||
background-color: $lbry-black;
|
||||
width: 100%;
|
||||
padding-top: var(--video-aspect-ratio);
|
||||
position: relative;
|
||||
|
|
@ -40,7 +40,7 @@
|
|||
justify-content: center;
|
||||
|
||||
&:not(.card__media--nsfw) {
|
||||
background-color: var(--color-black);
|
||||
background-color: $lbry-black;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
|
|
@ -62,7 +62,7 @@
|
|||
|
||||
.content__view--container {
|
||||
iframe {
|
||||
background: #fff;
|
||||
background: $lbry-white;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
|
@ -74,13 +74,13 @@
|
|||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 0 20px;
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
background-color: rgba($lbry-black, 0.5);
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.content__loading-text {
|
||||
color: var(--color-white);
|
||||
color: $lbry-white;
|
||||
}
|
||||
|
||||
.content__empty {
|
||||
|
|
@ -90,10 +90,10 @@
|
|||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: var(--color-white);
|
||||
color: $lbry-white;
|
||||
|
||||
&.content__empty--nsfw {
|
||||
background-color: var(--color-nsfw);
|
||||
background-color: $lbry-grape-3;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -73,5 +73,5 @@
|
|||
}
|
||||
|
||||
.file-tile__uri {
|
||||
color: var(--color-grey-dark);
|
||||
color: $lbry-gray-5;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -15,7 +15,7 @@
|
|||
margin: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: black;
|
||||
background-color: $lbry-black;
|
||||
|
||||
iframe,
|
||||
webview {
|
||||
|
|
@ -26,7 +26,7 @@
|
|||
|
||||
.document-viewer {
|
||||
overflow: auto;
|
||||
background-color: var(--card-bg);
|
||||
background-color: $lbry-white;
|
||||
font-size: calc(var(--font-size-subtext-multiple) * 1em);
|
||||
}
|
||||
|
||||
|
|
@ -64,7 +64,7 @@
|
|||
}
|
||||
|
||||
.CodeMirror-linenumber {
|
||||
color: var(--card-text-color);
|
||||
color: $lbry-gray-5;
|
||||
}
|
||||
|
||||
.CodeMirror .CodeMirror-lines {
|
||||
|
|
@ -76,8 +76,8 @@
|
|||
}
|
||||
|
||||
.CodeMirror-gutters {
|
||||
border-right: 1px solid var(--color-divider);
|
||||
background: var(--color-bg-alt);
|
||||
border-right: 1px solid $lbry-gray-2;
|
||||
background: $lbry-gray-1;
|
||||
padding-right: 8px;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -92,16 +92,16 @@
|
|||
}
|
||||
|
||||
.form-field__label {
|
||||
color: var(--form-label-color);
|
||||
color: rgba($lbry-black, 0.5);
|
||||
}
|
||||
|
||||
.form-field__help {
|
||||
color: var(--color-help);
|
||||
color: $lbry-gray-5;
|
||||
padding-top: $spacing-vertical * 1/3;
|
||||
}
|
||||
|
||||
.form-field__error {
|
||||
color: var(--color-error);
|
||||
color: $lbry-red-5;
|
||||
}
|
||||
|
||||
.form-field__prefix,
|
||||
|
|
@ -129,9 +129,9 @@
|
|||
min-width: 60px;
|
||||
height: 30px;
|
||||
border-radius: 8px;
|
||||
background-color: var(--input-select-bg-color);
|
||||
background-color: $lbry-gray-3;
|
||||
font: normal 12px/30px 'metropolis-medium';
|
||||
color: var(--input-select-color);
|
||||
color: $lbry-black;
|
||||
|
||||
&:disabled {
|
||||
opacity: 0.5;
|
||||
|
|
|
|||
|
|
@ -7,8 +7,8 @@
|
|||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 0 $spacing-width * 1/3;
|
||||
background-color: var(--color-bg);
|
||||
box-shadow: var(--box-shadow-header);
|
||||
background-color: $lbry-white;
|
||||
// box-shadow: var(--box-shadow-header);
|
||||
|
||||
@media (min-width: $medium-breakpoint) {
|
||||
padding: 0 $spacing-width;
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
.item-list {
|
||||
background-color: var(--card-bg);
|
||||
background-color: $lbry-white;
|
||||
margin-top: $spacing-vertical;
|
||||
}
|
||||
|
||||
|
|
@ -15,7 +15,7 @@
|
|||
}
|
||||
|
||||
.item-list__item--selected {
|
||||
background-color: var(--table-item-odd);
|
||||
background-color: $lbry-gray-1;
|
||||
}
|
||||
|
||||
.item-list__item--cutoff {
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
.load-screen {
|
||||
color: white;
|
||||
background: var(--color-primary);
|
||||
background: $lbry-teal-3;
|
||||
background-size: cover;
|
||||
min-height: 100vh;
|
||||
min-width: 100vw;
|
||||
|
|
|
|||
|
|
@ -1,91 +1,95 @@
|
|||
.CodeMirror {
|
||||
border: 0px;
|
||||
border-radius: 0px;
|
||||
background: var(--card-bg);
|
||||
color: var(--text-color);
|
||||
border: 0;
|
||||
border-radius: 0;
|
||||
background: $lbry-white;
|
||||
color: $lbry-black;
|
||||
|
||||
.CodeMirror-cursor {
|
||||
border-color: $lbry-teal-3;
|
||||
}
|
||||
|
||||
.CodeMirror-placeholder {
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.CodeMirror-selected {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.CodeMirror-selectedtext {
|
||||
background-color: rgba($lbry-teal-3, 0.3);
|
||||
color: $lbry-white;
|
||||
}
|
||||
|
||||
.cm-spell-error:not(.cm-url):not(.cm-comment):not(.cm-tag):not(.cm-word) {
|
||||
background: none;
|
||||
text-decoration: underline;
|
||||
text-decoration-color: $lbry-red-3;
|
||||
text-decoration-style: dotted;
|
||||
}
|
||||
}
|
||||
|
||||
// Fix selection
|
||||
.CodeMirror-line::selection,
|
||||
.CodeMirror-line > span::selection,
|
||||
.CodeMirror-line > span > span::selection {
|
||||
background-color: $lbry-teal-1;
|
||||
}
|
||||
|
||||
.editor-toolbar {
|
||||
opacity: 1;
|
||||
opacity: 1; // ?
|
||||
border: 0;
|
||||
background: var(--color-bg-alt);
|
||||
background-color: $lbry-gray-1;
|
||||
border-radius: 0;
|
||||
box-shadow: var(--box-shadow-layer);
|
||||
}
|
||||
// box-shadow: var(--box-shadow-layer);
|
||||
|
||||
.editor-toolbar:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
&:hover {
|
||||
opacity: 1; // ?
|
||||
}
|
||||
|
||||
.editor-toolbar i.separator {
|
||||
border: 0;
|
||||
}
|
||||
&.disabled-for-preview a:not(.no-disable) {
|
||||
background-color: $lbry-gray-1;
|
||||
border-color: transparent;
|
||||
opacity: 0.3;
|
||||
}
|
||||
|
||||
.editor-toolbar.fullscreen {
|
||||
background: var(--color-bg-alt);
|
||||
}
|
||||
&.fullscreen {
|
||||
background-color: $lbry-gray-1;
|
||||
|
||||
.editor-toolbar.fullscreen::before,
|
||||
.editor-toolbar.fullscreen::after {
|
||||
display: none;
|
||||
}
|
||||
&::before,
|
||||
&::after {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.editor-toolbar a {
|
||||
opacity: 0.6;
|
||||
color: var(--text-color) !important;
|
||||
transition: opacity 0.3s ease;
|
||||
}
|
||||
a {
|
||||
color: $lbry-black !important;
|
||||
transition: opacity 0.3s ease;
|
||||
|
||||
.editor-toolbar a.active,
|
||||
.editor-toolbar a:hover {
|
||||
opacity: 1;
|
||||
background: var(--button-bg);
|
||||
border-color: transparent;
|
||||
}
|
||||
&:not(.active),
|
||||
&:not(:hover) {
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
.editor-toolbar.disabled-for-preview a:not(.no-disable) {
|
||||
background: var(--color-bg-alt);
|
||||
border-color: transparent;
|
||||
opacity: 0.3;
|
||||
}
|
||||
&.active,
|
||||
&:hover {
|
||||
opacity: 1;
|
||||
// background-color: var(--button-bg); // "--button-bg" does not exist
|
||||
border-color: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
.editor-statusbar {
|
||||
color: var(--form-label-color);
|
||||
i.separator {
|
||||
border: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.editor-preview {
|
||||
font-size: calc(var(--font-size-subtext-multiple) * 1em);
|
||||
background: var(--color-bg);
|
||||
background-color: rgba($lbry-gray-1, 0.5);
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.CodeMirror .CodeMirror-cursor {
|
||||
border-color: var(--color-primary);
|
||||
}
|
||||
|
||||
.CodeMirror .CodeMirror-placeholder {
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
/* Fix selection */
|
||||
.CodeMirror-line::selection,
|
||||
.CodeMirror-line > span::selection,
|
||||
.CodeMirror-line > span > span::selection {
|
||||
background: var(--text-selection-bg);
|
||||
}
|
||||
|
||||
.CodeMirror .CodeMirror-selected {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.CodeMirror .CodeMirror-selectedtext {
|
||||
background: var(--editor-text-selection-bg) !important;
|
||||
color: var(--text-selection-color) !important;
|
||||
}
|
||||
|
||||
.CodeMirror .cm-spell-error:not(.cm-url):not(.cm-comment):not(.cm-tag):not(.cm-word) {
|
||||
background: none;
|
||||
text-decoration: underline;
|
||||
text-decoration-color: #f00;
|
||||
text-decoration-style: dotted;
|
||||
.editor-statusbar {
|
||||
color: rgba($lbry-black, 0.5);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
.markdown-preview {
|
||||
margin: 0;
|
||||
|
||||
/* Headers */
|
||||
// Headers
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
|
|
@ -34,66 +34,72 @@
|
|||
|
||||
h6 {
|
||||
font-size: 0.84em;
|
||||
color: var(--color-help);
|
||||
color: $lbry-gray-5;
|
||||
}
|
||||
|
||||
/* Paragraphs */
|
||||
// Paragraphs
|
||||
p {
|
||||
white-space: pre-line;
|
||||
}
|
||||
|
||||
/* Strikethrough text */
|
||||
// Strikethrough text
|
||||
del {
|
||||
color: var(--color-help);
|
||||
color: $lbry-gray-5;
|
||||
}
|
||||
|
||||
/* Tables */
|
||||
// Tables
|
||||
table {
|
||||
padding: 8px;
|
||||
margin: 16px 0;
|
||||
background-color: var(--card-bg);
|
||||
background-color: $lbry-white;
|
||||
|
||||
tr td,
|
||||
tr th,
|
||||
tr td:first-of-type,
|
||||
tr th:first-of-type,
|
||||
tr td:last-of-type,
|
||||
tr th:last-of-type {
|
||||
padding: 8px;
|
||||
tr {
|
||||
td,
|
||||
th,
|
||||
td:first-of-type,
|
||||
th:first-of-type,
|
||||
td:last-of-type,
|
||||
th:last-of-type {
|
||||
padding: 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Image */
|
||||
// Image
|
||||
img {
|
||||
margin: 16px 0;
|
||||
}
|
||||
|
||||
/* Horizontal Rule */
|
||||
// Horizontal Rule
|
||||
hr {
|
||||
border: 1px solid var(--color-divider);
|
||||
border: 1px solid $lbry-gray-2;
|
||||
}
|
||||
|
||||
/* Code */
|
||||
// Code
|
||||
code {
|
||||
display: block;
|
||||
padding: 8px;
|
||||
margin: 16px 0;
|
||||
background-color: var(--color-bg-alt);
|
||||
color: var(--color-help);
|
||||
background-color: $lbry-gray-1;
|
||||
color: $lbry-gray-5;
|
||||
font-size: 1em;
|
||||
font-family: Consolas, 'Lucida Console', 'Source Sans', monospace;
|
||||
}
|
||||
|
||||
a {
|
||||
font-size: 1em;
|
||||
color: var(--btn-external-color);
|
||||
color: $lbry-blue-1;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
/* Lists */
|
||||
// Lists
|
||||
ul,
|
||||
ol {
|
||||
margin-bottom: 2em;
|
||||
|
||||
> li {
|
||||
list-style-position: outside;
|
||||
}
|
||||
}
|
||||
|
||||
ul {
|
||||
|
|
@ -106,17 +112,12 @@
|
|||
display: inline-block;
|
||||
}
|
||||
}
|
||||
|
||||
ol > li,
|
||||
ul > li {
|
||||
list-style-position: outside;
|
||||
}
|
||||
}
|
||||
|
||||
blockquote {
|
||||
padding: 8px;
|
||||
margin: 16px 0;
|
||||
color: var(--color-help);
|
||||
border-left: 2px solid var(--color-help);
|
||||
background-color: var(--color-bg-alt);
|
||||
color: $lbry-gray-5;
|
||||
border-left: 2px solid $lbry-gray-5;
|
||||
background-color: $lbry-gray-1;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
$border-radius-menu: 2px;
|
||||
// $border-radius-menu: 2px; // unused
|
||||
|
||||
.menu-container {
|
||||
display: inline-block;
|
||||
|
|
@ -7,17 +7,18 @@ $border-radius-menu: 2px;
|
|||
.menu {
|
||||
position: absolute;
|
||||
white-space: nowrap;
|
||||
background-color: var(--menu-bg);
|
||||
box-shadow: var(--box-shadow-layer);
|
||||
border-radius: var(--menu-radius);
|
||||
padding-top: ($spacing-vertical / 5) 0px;
|
||||
// background-color: var(--menu-bg); // "--menu-bg" does not exist
|
||||
// box-shadow: var(--box-shadow-layer);
|
||||
// border-radius: var(--menu-radius); // "--menu-radius" does not exist
|
||||
padding-top: ($spacing-vertical / 5) 0;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.menu__menu-item {
|
||||
display: block;
|
||||
padding: ($spacing-vertical / 4) ($spacing-vertical / 2);
|
||||
|
||||
&:hover {
|
||||
background: var(--menu-item-hover-bg);
|
||||
// background: var(--menu-item-hover-bg); // "--menu-item-hover-bg" does not exist
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -5,11 +5,11 @@
|
|||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
right: 0px;
|
||||
bottom: 0px;
|
||||
background-color: var(--modal-overlay-bg);
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background-color: rgba($lbry-white, 0.7);
|
||||
z-index: 9999;
|
||||
}
|
||||
|
||||
|
|
@ -21,18 +21,18 @@
|
|||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
border: var(--modal-border);
|
||||
background: var(--modal-bg);
|
||||
border: $lbry-gray-1;
|
||||
background-color: rgba($lbry-gray-1, 0.5);
|
||||
overflow: auto;
|
||||
border-radius: 4px;
|
||||
padding: $spacing-vertical;
|
||||
box-shadow: var(--box-shadow-layer);
|
||||
// box-shadow: var(--box-shadow-layer);
|
||||
max-width: var(--modal-width);
|
||||
word-break: break-word;
|
||||
|
||||
.btn.btn--alt {
|
||||
// Set modal buttons bg color
|
||||
background-color: var(--modal-btn-bg-color);
|
||||
background-color: $lbry-white;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -43,7 +43,7 @@
|
|||
right: 0;
|
||||
bottom: 0;
|
||||
padding: $spacing-vertical;
|
||||
background: var(--modal-fullscreen-bg);
|
||||
background: rgba($lbry-gray-1, 0.5);
|
||||
overflow-y: scroll;
|
||||
|
||||
.main {
|
||||
|
|
@ -84,7 +84,7 @@
|
|||
}
|
||||
|
||||
.modal__button {
|
||||
margin: 0px $spacing-vertical * 1/3;
|
||||
margin: 0 $spacing-vertical * 1/3;
|
||||
|
||||
&.btn--link {
|
||||
// So the text isn't bigger than the text inside the button
|
||||
|
|
@ -93,12 +93,12 @@
|
|||
}
|
||||
|
||||
.error-modal-overlay {
|
||||
background: var(--modal-overlay-bg);
|
||||
background: rgba($lbry-white, 0.7);
|
||||
}
|
||||
|
||||
.error-modal__content {
|
||||
display: flex;
|
||||
padding: 0px 8px 10px 10px;
|
||||
padding: 0 8px 10px 10px;
|
||||
}
|
||||
|
||||
.error-modal__warning-symbol {
|
||||
|
|
@ -122,7 +122,7 @@
|
|||
max-height: 400px;
|
||||
max-width: var(--modal-width);
|
||||
overflow-y: scroll;
|
||||
color: #a94442;
|
||||
background-color: #ffe0df;
|
||||
border-left: 2px solid #a94442;
|
||||
color: $lbry-red-5;
|
||||
background-color: $lbry-red-1;
|
||||
border-left: 2px solid $lbry-red-5;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,13 +1,13 @@
|
|||
.nav {
|
||||
min-width: var(--side-nav-width);
|
||||
background-color: var(--nav-bg-color);
|
||||
background-color: rgba($lbry-gray-1, 0.7);
|
||||
padding: $spacing-width * 1/3;
|
||||
color: var(--nav-color);
|
||||
color: $lbry-gray-5;
|
||||
|
||||
hr {
|
||||
width: 24px;
|
||||
margin: 36px 0;
|
||||
border: solid 1px var(--color-divider);
|
||||
border: solid 1px $lbry-gray-2;
|
||||
margin: $spacing-vertical $spacing-vertical * 2/3;
|
||||
}
|
||||
|
||||
|
|
@ -48,7 +48,7 @@
|
|||
}
|
||||
|
||||
.btn:hover {
|
||||
color: var(--text-color);
|
||||
color: $lbry-black;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -70,11 +70,11 @@
|
|||
}
|
||||
|
||||
.nav__link--active {
|
||||
color: var(--text-color);
|
||||
color: $lbry-black;
|
||||
}
|
||||
|
||||
.nav__sub-links {
|
||||
color: var(--nav-color);
|
||||
color: $lbry-gray-5;
|
||||
padding-bottom: $spacing-vertical * 1/3;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,16 +1,16 @@
|
|||
.notice {
|
||||
padding: 10px 20px;
|
||||
border: 1px solid #000;
|
||||
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
|
||||
border: 1px solid $lbry-black;
|
||||
text-shadow: 0 1px 0 rgba($lbry-white, 0.5);
|
||||
border-radius: 5px;
|
||||
|
||||
color: #468847;
|
||||
background-color: #dff0d8;
|
||||
border-color: #d6e9c6;
|
||||
color: $lbry-green-3;
|
||||
background-color: $lbry-green-1;
|
||||
border-color: $lbry-green-2;
|
||||
}
|
||||
|
||||
.notice--error {
|
||||
color: #b94a48;
|
||||
background-color: #f2dede;
|
||||
border-color: #eed3d7;
|
||||
color: $lbry-red-3;
|
||||
background-color: $lbry-red-1;
|
||||
border-color: $lbry-red-2;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,6 +2,14 @@
|
|||
display: block;
|
||||
padding: 0;
|
||||
text-align: center;
|
||||
|
||||
+ .form-field {
|
||||
margin: 0 $spacing-width * 2/3;
|
||||
|
||||
.form-field__input {
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.pagination__item {
|
||||
|
|
@ -11,7 +19,7 @@
|
|||
border-radius: 2px;
|
||||
|
||||
&:not(.pagination__item--selected):not(.pagination__item--break):not(.disabled):hover {
|
||||
background: rgba(0, 0, 0, 0.2);
|
||||
background: rgba($lbry-black, 0.2);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
|
|
@ -32,13 +40,5 @@
|
|||
|
||||
.pagination__item--selected {
|
||||
color: white;
|
||||
background: var(--color-primary);
|
||||
}
|
||||
|
||||
.pagination + .form-field {
|
||||
margin: 0 $spacing-width * 2/3;
|
||||
|
||||
.form-field__input {
|
||||
padding: 0;
|
||||
}
|
||||
background: $lbry-teal-3;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,9 +2,11 @@
|
|||
0% {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
50% {
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 1;
|
||||
}
|
||||
|
|
@ -12,7 +14,7 @@
|
|||
|
||||
.card--placeholder {
|
||||
animation: pulse 2s infinite ease-in-out;
|
||||
background: var(--color-placeholder);
|
||||
background-color: $lbry-gray-3;
|
||||
}
|
||||
|
||||
// Individual items we need a placeholder for
|
||||
|
|
|
|||
|
|
@ -1,25 +1,19 @@
|
|||
::-webkit-scrollbar {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
width: 5px;
|
||||
height: 5px;
|
||||
|
||||
background-color: transparent;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track {
|
||||
background: var(--scrollbar-track-bg);
|
||||
border-radius: var(--scrollbar-radius);
|
||||
margin: 4px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
border-radius: var(--scrollbar-radius);
|
||||
background-color: var(--scrollbar-thumb-bg);
|
||||
transition: background-color 0.3s ease;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background-color: var(--scrollbar-thumb-hover-bg);
|
||||
background-color: $lbry-gray-3;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:active {
|
||||
background-color: var(--scrollbar-thumb-active-bg);
|
||||
background-color: $lbry-teal-3;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -16,11 +16,11 @@
|
|||
|
||||
.wunderbar__input {
|
||||
height: var(--btn-height);
|
||||
border-radius: var(--btn-radius);
|
||||
// border-radius: var(--btn-radius);
|
||||
width: 100%;
|
||||
color: var(--search-color);
|
||||
background-color: var(--search-bg-color);
|
||||
box-shadow: var(--box-shadow-wunderbar);
|
||||
color: $lbry-gray-5;
|
||||
background-color: rgba($lbry-gray-1, 0.3);
|
||||
// box-shadow: var(--box-shadow-wunderbar);
|
||||
padding: 10px;
|
||||
padding-left: 30px;
|
||||
font-size: 13px;
|
||||
|
|
@ -30,10 +30,10 @@
|
|||
border-bottom: none;
|
||||
|
||||
&:focus {
|
||||
background-color: var(--search-active-bg-color);
|
||||
border-radius: 0;
|
||||
border-bottom: 1px solid var(--color-divider);
|
||||
box-shadow: var(--box-shadow-button);
|
||||
background-color: rgba($lbry-gray-1, 0.5);
|
||||
// border-radius: 0;
|
||||
// border-bottom: 1px solid $lbry-gray-2;
|
||||
// box-shadow: var(--box-shadow-button);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -47,7 +47,7 @@
|
|||
|
||||
.wunderbar__suggestion {
|
||||
padding: 5px 10px;
|
||||
background-color: var(--search-bg-color);
|
||||
background-color: $lbry-gray-5;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
|
|
@ -55,7 +55,7 @@
|
|||
align-items: center;
|
||||
|
||||
&:not(:first-of-type) {
|
||||
border-top: 1px solid var(--search-item-border-color);
|
||||
border-top: 1px solid transparent;
|
||||
}
|
||||
|
||||
.icon {
|
||||
|
|
@ -78,13 +78,13 @@
|
|||
}
|
||||
|
||||
.wunderbar__active-suggestion {
|
||||
color: var(--search-item-active-color);
|
||||
background-color: var(--color-secondary);
|
||||
color: $lbry-black;
|
||||
background-color: $lbry-blue-2;
|
||||
}
|
||||
|
||||
.search__top {
|
||||
padding: 0 $spacing-width $spacing-width;
|
||||
background-color: var(--search-exact-result);
|
||||
background-color: $lbry-gray-2;
|
||||
}
|
||||
|
||||
.search__content {
|
||||
|
|
|
|||
|
|
@ -1,8 +1,8 @@
|
|||
.snack-bar {
|
||||
background-color: var(--snackbar-bg-primary);
|
||||
background-color: $lbry-teal-3;
|
||||
border-radius: 10px;
|
||||
box-shadow: var(--box-shadow-layer);
|
||||
color: var(--snackbar-color-primary);
|
||||
// box-shadow: var(--box-shadow-layer);
|
||||
color: $lbry-white;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-left: auto;
|
||||
|
|
@ -25,10 +25,8 @@
|
|||
min-width: min-content;
|
||||
text-transform: uppercase;
|
||||
|
||||
span {
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
span:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -42,6 +40,7 @@
|
|||
font-size: 30px;
|
||||
margin-right: 20px;
|
||||
}
|
||||
|
||||
&:nth-of-type(2) {
|
||||
font-size: 16px;
|
||||
margin-bottom: 4px;
|
||||
|
|
|
|||
|
|
@ -32,13 +32,13 @@
|
|||
|
||||
.spinner--light {
|
||||
.rect {
|
||||
background-color: var(--color-white);
|
||||
background-color: $lbry-white;
|
||||
}
|
||||
}
|
||||
|
||||
.spinner--dark {
|
||||
.rect {
|
||||
background-color: var(--color-black);
|
||||
background-color: $lbry-black;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -46,7 +46,7 @@
|
|||
margin-top: $spacing-vertical;
|
||||
|
||||
.rect {
|
||||
background-color: var(--color-white);
|
||||
background-color: $lbry-white;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -70,6 +70,7 @@
|
|||
100% {
|
||||
transform: scaleY(0.4);
|
||||
}
|
||||
|
||||
20% {
|
||||
transform: scaleY(1);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,147 +1,121 @@
|
|||
/*
|
||||
Name: one-dark 1.1.1
|
||||
Author: Török Ádám (http://github.com/Aerobird98)
|
||||
Original Atom One Dark Theme (https://github.com/atom/one-dark-ui & https://github.com/atom/one-dark-syntax)
|
||||
/*!
|
||||
Name: one-dark 1.1.1
|
||||
Author: Török Ádám (http://github.com/Aerobird98)
|
||||
Original Atom One Dark Theme (https://github.com/atom/one-dark-ui & https://github.com/atom/one-dark-syntax)
|
||||
*/
|
||||
|
||||
/* basic */
|
||||
.CodeMirror.cm-s-one-dark {
|
||||
color: #abb2bf;
|
||||
}
|
||||
.CodeMirror {
|
||||
&.cm-s-one-dark {
|
||||
color: #abb2bf;
|
||||
|
||||
.CodeMirror.cm-s-one-dark .CodeMirror-lines {
|
||||
color: #abb2bf !important;
|
||||
background-color: transparent;
|
||||
}
|
||||
.CodeMirror.cm-s-one-dark .CodeMirror-cursor {
|
||||
border-left: 2px solid #56b6c2 !important;
|
||||
}
|
||||
/* addon: edit/machingbrackets.js & addon: edit/matchtags.js */
|
||||
.CodeMirror.cm-s-one-dark .CodeMirror-matchingbracket,
|
||||
.CodeMirror.cm-s-one-dark .CodeMirror-matchingtag {
|
||||
border-bottom: 2px solid #56b6c2;
|
||||
color: #abb2bf !important;
|
||||
background-color: transparent;
|
||||
}
|
||||
.CodeMirror.cm-s-one-dark .CodeMirror-nonmatchingbracket {
|
||||
border-bottom: 2px solid #e06c75;
|
||||
color: #abb2bf !important;
|
||||
background-color: transparent;
|
||||
}
|
||||
/* addon: fold/foldgutter.js */
|
||||
.CodeMirror.cm-s-one-dark .CodeMirror-foldmarker,
|
||||
.CodeMirror.cm-s-one-dark .CodeMirror-foldgutter,
|
||||
.CodeMirror.cm-s-one-dark .CodeMirror-foldgutter-open,
|
||||
.CodeMirror.cm-s-one-dark .CodeMirror-foldgutter-folded {
|
||||
border: none;
|
||||
text-shadow: none;
|
||||
color: #5c6370 !important;
|
||||
background-color: transparent;
|
||||
}
|
||||
/* addon: selection/active-line.js */
|
||||
.CodeMirror.cm-s-one-dark .CodeMirror-activeline-background {
|
||||
background-color: rgba(153, 187, 255, 0.04);
|
||||
}
|
||||
/* basic syntax */
|
||||
.CodeMirror.cm-s-one-dark .cm-header {
|
||||
color: #e06c75;
|
||||
}
|
||||
.CodeMirror.cm-s-one-dark .cm-quote {
|
||||
color: #5c6370;
|
||||
font-style: italic;
|
||||
}
|
||||
.CodeMirror.cm-s-one-dark .cm-negative {
|
||||
color: #e06c75;
|
||||
}
|
||||
.CodeMirror.cm-s-one-dark .cm-positive {
|
||||
color: #e06c75;
|
||||
}
|
||||
.CodeMirror.cm-s-one-dark .cm-strong {
|
||||
color: #d19a66;
|
||||
font-weight: bold;
|
||||
}
|
||||
.CodeMirror.cm-s-one-dark .cm-header .cm-strong {
|
||||
color: #d19a66;
|
||||
font-weight: bold;
|
||||
}
|
||||
.CodeMirror.cm-s-one-dark .cm-em {
|
||||
color: #c678dd;
|
||||
font-style: italic;
|
||||
}
|
||||
.CodeMirror.cm-s-one-dark .cm-header .cm-em {
|
||||
color: #c678dd;
|
||||
font-style: italic;
|
||||
}
|
||||
.CodeMirror.cm-s-one-dark .cm-tag {
|
||||
color: #e06c75;
|
||||
}
|
||||
.CodeMirror.cm-s-one-dark .cm-attribute {
|
||||
color: #d19a66;
|
||||
}
|
||||
.CodeMirror.cm-s-one-dark .cm-link {
|
||||
color: #98c379;
|
||||
border-bottom: solid 1px #98c379;
|
||||
}
|
||||
.CodeMirror.cm-s-one-dark .cm-builtin {
|
||||
color: #e06c75;
|
||||
}
|
||||
.CodeMirror.cm-s-one-dark .cm-keyword {
|
||||
color: #c678dd;
|
||||
}
|
||||
.CodeMirror.cm-s-one-dark .cm-def {
|
||||
color: #e5c07b;
|
||||
} /* original: #d19a66; */
|
||||
.CodeMirror.cm-s-one-dark .cm-atom {
|
||||
color: #d19a66;
|
||||
}
|
||||
.CodeMirror.cm-s-one-dark .cm-number {
|
||||
color: #d19a66;
|
||||
}
|
||||
.CodeMirror.cm-s-one-dark .cm-property {
|
||||
color: #56b6c2;
|
||||
} /* original: #abb2bf */
|
||||
.CodeMirror.cm-s-one-dark .cm-qualifier {
|
||||
color: #d19a66;
|
||||
}
|
||||
.CodeMirror.cm-s-one-dark .cm-variable {
|
||||
color: #e06c75;
|
||||
}
|
||||
.CodeMirror.cm-s-one-dark .cm-string {
|
||||
color: #98c379;
|
||||
}
|
||||
.CodeMirror.cm-s-one-dark .cm-punctuation {
|
||||
color: #abb2bf;
|
||||
}
|
||||
.CodeMirror.cm-s-one-dark .cm-operator {
|
||||
color: #56b6c2;
|
||||
} /* original: #abb2bf */
|
||||
.CodeMirror.cm-s-one-dark .cm-meta {
|
||||
color: #abb2bf;
|
||||
}
|
||||
.CodeMirror.cm-s-one-dark .cm-bracket {
|
||||
color: #abb2bf;
|
||||
}
|
||||
.CodeMirror.cm-s-one-dark .cm-comment {
|
||||
color: #5c6370;
|
||||
font-style: italic;
|
||||
}
|
||||
.CodeMirror.cm-s-one-dark .cm-error {
|
||||
color: #e06c75;
|
||||
}
|
||||
/* css syntax corrections */
|
||||
.CodeMirror.cm-s-one-dark .cm-m-css.cm-variable {
|
||||
color: #828997;
|
||||
}
|
||||
.CodeMirror.cm-s-one-dark .cm-m-css.cm-property {
|
||||
color: #abb2bf;
|
||||
}
|
||||
.CodeMirror.cm-s-one-dark .cm-m-css.cm-atom {
|
||||
color: #56b6c2;
|
||||
}
|
||||
.CodeMirror.cm-s-one-dark .cm-m-css.cm-builtin {
|
||||
color: #56b6c2;
|
||||
}
|
||||
/* lua syntax corrections */
|
||||
.CodeMirror.cm-s-one-dark .cm-m-lua.cm-variable {
|
||||
color: #56b6c2;
|
||||
.CodeMirror-cursor {
|
||||
border-left: 2px solid #56b6c2;
|
||||
}
|
||||
|
||||
.CodeMirror-lines {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
// addon: edit/machingbrackets.js & addon: edit/matchtags.js
|
||||
.CodeMirror-matchingbracket,
|
||||
.CodeMirror-matchingtag {
|
||||
border-bottom: 2px solid #56b6c2;
|
||||
color: #abb2bf !important;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.CodeMirror-nonmatchingbracket {
|
||||
border-bottom: 2px solid #e06c75;
|
||||
color: #abb2bf !important;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
// addon: fold/foldgutter.js
|
||||
.CodeMirror-foldmarker,
|
||||
.CodeMirror-foldgutter,
|
||||
.CodeMirror-foldgutter-open,
|
||||
.CodeMirror-foldgutter-folded {
|
||||
border: none;
|
||||
text-shadow: none;
|
||||
color: #5c6370 !important;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
// addon: selection/active-line.js
|
||||
.CodeMirror-activeline-background {
|
||||
background-color: rgba(153, 187, 255, 0.04);
|
||||
}
|
||||
|
||||
// basic syntax
|
||||
.cm-atom,
|
||||
.cm-attribute,
|
||||
.cm-number,
|
||||
.cm-qualifier,
|
||||
.cm-strong {
|
||||
color: #d19a66;
|
||||
}
|
||||
|
||||
.cm-bracket,
|
||||
.cm-meta,
|
||||
.cm-punctuation,
|
||||
.cm-m-css.cm-property {
|
||||
color: #abb2bf;
|
||||
}
|
||||
|
||||
.cm-builtin,
|
||||
.cm-error,
|
||||
.cm-header,
|
||||
.cm-negative,
|
||||
.cm-positive,
|
||||
.cm-tag,
|
||||
.cm-variable {
|
||||
color: #e06c75;
|
||||
}
|
||||
|
||||
.cm-comment,
|
||||
.cm-quote {
|
||||
color: #5c6370;
|
||||
}
|
||||
|
||||
.cm-def {
|
||||
color: #e5c07b;
|
||||
}
|
||||
|
||||
.cm-em,
|
||||
.cm-keyword {
|
||||
color: #c678dd;
|
||||
}
|
||||
|
||||
.cm-comment,
|
||||
.cm-em,
|
||||
.cm-quote {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.cm-link,
|
||||
.cm-string {
|
||||
color: #98c379;
|
||||
}
|
||||
|
||||
.cm-link {
|
||||
border-bottom: 1px solid #98c379;
|
||||
}
|
||||
|
||||
.cm-operator,
|
||||
.cm-property,
|
||||
.cm-m-css.cm-atom,
|
||||
.cm-m-css.cm-builtin,
|
||||
.cm-m-lua.cm-variable {
|
||||
color: #56b6c2;
|
||||
}
|
||||
|
||||
.cm-strong {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.cm-m-css.cm-variable {
|
||||
color: #828997;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -4,19 +4,21 @@ table.table,
|
|||
max-width: 100%;
|
||||
text-align: left;
|
||||
|
||||
tr td:first-of-type,
|
||||
tr th:first-of-type {
|
||||
padding-left: $spacing-vertical * 2/3;
|
||||
}
|
||||
tr {
|
||||
td:first-of-type,
|
||||
th:first-of-type {
|
||||
padding-left: $spacing-vertical * 2/3;
|
||||
}
|
||||
|
||||
tr td:last-of-type,
|
||||
tr th:last-of-type {
|
||||
padding-right: $spacing-vertical * 2/3;
|
||||
}
|
||||
td:last-of-type,
|
||||
th:last-of-type {
|
||||
padding-right: $spacing-vertical * 2/3;
|
||||
}
|
||||
|
||||
tr th,
|
||||
tr td {
|
||||
font-size: 13px;
|
||||
th,
|
||||
td {
|
||||
font-size: 13px;
|
||||
}
|
||||
}
|
||||
|
||||
th {
|
||||
|
|
@ -27,7 +29,7 @@ table.table,
|
|||
|
||||
td {
|
||||
font-family: 'metropolis-medium';
|
||||
color: var(--color-help);
|
||||
color: $lbry-gray-5;
|
||||
padding: $spacing-vertical * 1/6 $spacing-vertical * 1/3;
|
||||
|
||||
.btn:not(.btn--link) {
|
||||
|
|
@ -45,23 +47,27 @@ table.table,
|
|||
}
|
||||
|
||||
thead {
|
||||
color: var(--text-color);
|
||||
border-bottom: var(--table-border);
|
||||
color: $lbry-black;
|
||||
border-bottom: 1px solid $lbry-gray-1;
|
||||
}
|
||||
|
||||
tbody {
|
||||
tr {
|
||||
border-bottom: var(--table-item-border);
|
||||
border-bottom: 1px solid $lbry-gray-1; // "--table-item-border" does not exist
|
||||
padding: 8px 0;
|
||||
|
||||
&:nth-child(even) {
|
||||
background-color: var(--table-item-odd);
|
||||
background-color: $lbry-gray-1;
|
||||
}
|
||||
|
||||
&:nth-child(odd) {
|
||||
background-color: var(--table-item-even);
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
&.thead {
|
||||
background: none;
|
||||
}
|
||||
|
||||
td {
|
||||
border: 0 none;
|
||||
}
|
||||
|
|
@ -69,40 +75,47 @@ table.table,
|
|||
}
|
||||
}
|
||||
|
||||
table.table--stretch {
|
||||
width: 100%;
|
||||
}
|
||||
table {
|
||||
&.table--help {
|
||||
td:nth-of-type(1) {
|
||||
color: $lbry-black;
|
||||
font-family: 'metropolis-semibold';
|
||||
min-width: 130px;
|
||||
}
|
||||
|
||||
table.table--help {
|
||||
td:nth-of-type(1) {
|
||||
color: var(--text-color);
|
||||
font-family: 'metropolis-semibold';
|
||||
min-width: 130px;
|
||||
td:nth-of-type(2) {
|
||||
// Tourniquets text over 20vw
|
||||
max-width: 20vw;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
color: $lbry-gray-5;
|
||||
}
|
||||
}
|
||||
td:nth-of-type(2) {
|
||||
/*Tourniquets text over 20VW*/
|
||||
max-width: 20vw;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
color: var(--color-help);
|
||||
}
|
||||
}
|
||||
|
||||
table.table--transactions {
|
||||
td:nth-of-type(1) {
|
||||
width: 25%;
|
||||
&.table--stretch {
|
||||
width: 100%;
|
||||
}
|
||||
td:nth-of-type(2) {
|
||||
width: 20%;
|
||||
}
|
||||
td:nth-of-type(3) {
|
||||
width: 22.5%;
|
||||
}
|
||||
td:nth-of-type(4) {
|
||||
width: 17.5%;
|
||||
}
|
||||
td:nth-of-type(5) {
|
||||
width: 15%;
|
||||
|
||||
&.table--transactions {
|
||||
td:nth-of-type(1) {
|
||||
width: 25%;
|
||||
}
|
||||
|
||||
td:nth-of-type(2) {
|
||||
width: 20%;
|
||||
}
|
||||
|
||||
td:nth-of-type(3) {
|
||||
width: 22.5%;
|
||||
}
|
||||
|
||||
td:nth-of-type(4) {
|
||||
width: 17.5%;
|
||||
}
|
||||
|
||||
td:nth-of-type(5) {
|
||||
width: 15%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
// All CSS for date & time ui
|
||||
|
||||
.time {
|
||||
color: var(--color-help);
|
||||
color: $lbry-gray-5;
|
||||
}
|
||||
|
||||
.time--ago {
|
||||
|
|
|
|||
|
|
@ -10,6 +10,48 @@
|
|||
user-select: none;
|
||||
margin-bottom: auto;
|
||||
margin-top: 2px;
|
||||
|
||||
&:hover {
|
||||
&:not(.react-toggle--disabled) {
|
||||
.react-toggle-track {
|
||||
background-color: $lbry-black;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.react-toggle--checked {
|
||||
&:hover {
|
||||
&:not(.react-toggle--disabled) {
|
||||
.react-toggle-track {
|
||||
background-color: $lbry-teal-5;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.react-toggle-track {
|
||||
background-color: $lbry-teal-3;
|
||||
}
|
||||
|
||||
.react-toggle-track-check {
|
||||
opacity: 1;
|
||||
transition: opacity 0.25s ease;
|
||||
}
|
||||
|
||||
.react-toggle-track-x {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.react-toggle-thumb {
|
||||
left: 22px;
|
||||
border-color: $lbry-teal-3;
|
||||
}
|
||||
}
|
||||
|
||||
.react-toggle--disabled {
|
||||
cursor: not-allowed;
|
||||
opacity: 0.5;
|
||||
transition: opacity 0.25s;
|
||||
}
|
||||
|
||||
.react-toggle-screenreader-only {
|
||||
|
|
@ -23,77 +65,6 @@
|
|||
width: 1px;
|
||||
}
|
||||
|
||||
.react-toggle--disabled {
|
||||
cursor: not-allowed;
|
||||
opacity: 0.5;
|
||||
-webkit-transition: opacity 0.25s;
|
||||
transition: opacity 0.25s;
|
||||
}
|
||||
|
||||
.react-toggle-track {
|
||||
width: 40px;
|
||||
height: 19px;
|
||||
padding: 0;
|
||||
border-radius: 30px;
|
||||
background-color: #4d4d4d;
|
||||
-webkit-transition: all 0.2s ease;
|
||||
-moz-transition: all 0.2s ease;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.react-toggle:hover:not(.react-toggle--disabled) .react-toggle-track {
|
||||
background-color: #000000;
|
||||
}
|
||||
|
||||
.react-toggle--checked .react-toggle-track {
|
||||
background-color: var(--input-switch-color);
|
||||
}
|
||||
|
||||
.react-toggle--checked:hover:not(.react-toggle--disabled) .react-toggle-track {
|
||||
background-color: #158a88;
|
||||
}
|
||||
|
||||
.react-toggle-track-check {
|
||||
position: absolute;
|
||||
width: 14px;
|
||||
height: 10px;
|
||||
top: 0px;
|
||||
bottom: 0px;
|
||||
margin-top: auto;
|
||||
margin-bottom: auto;
|
||||
line-height: 0;
|
||||
left: 6px;
|
||||
opacity: 0;
|
||||
-webkit-transition: opacity 0.25s ease;
|
||||
-moz-transition: opacity 0.25s ease;
|
||||
transition: opacity 0.25s ease;
|
||||
}
|
||||
|
||||
.react-toggle--checked .react-toggle-track-check {
|
||||
opacity: 1;
|
||||
-webkit-transition: opacity 0.25s ease;
|
||||
-moz-transition: opacity 0.25s ease;
|
||||
transition: opacity 0.25s ease;
|
||||
}
|
||||
|
||||
.react-toggle-track-x {
|
||||
position: absolute;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
top: 0px;
|
||||
bottom: 0px;
|
||||
margin-top: auto;
|
||||
margin-bottom: auto;
|
||||
line-height: 0;
|
||||
right: 10px;
|
||||
opacity: 1;
|
||||
transition: opacity 0.25s ease;
|
||||
}
|
||||
|
||||
.react-toggle--checked .react-toggle-track-x {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.react-toggle-thumb {
|
||||
transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1) 0ms;
|
||||
position: absolute;
|
||||
|
|
@ -101,14 +72,46 @@
|
|||
left: 1px;
|
||||
width: 17px;
|
||||
height: 17px;
|
||||
border: 1px solid #4d4d4d;
|
||||
border: 1px solid $lbry-gray-5;
|
||||
border-radius: 50%;
|
||||
background-color: #fafafa;
|
||||
background-color: $lbry-gray-1;
|
||||
box-sizing: border-box;
|
||||
transition: all 0.25s ease;
|
||||
}
|
||||
|
||||
.react-toggle--checked .react-toggle-thumb {
|
||||
left: 22px;
|
||||
border-color: var(--input-switch-color);
|
||||
.react-toggle-track {
|
||||
width: 40px;
|
||||
height: 19px;
|
||||
padding: 0;
|
||||
border-radius: 30px;
|
||||
background-color: $lbry-gray-5;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.react-toggle-track-check {
|
||||
position: absolute;
|
||||
width: 14px;
|
||||
height: 10px;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
margin-top: auto;
|
||||
margin-bottom: auto;
|
||||
line-height: 0;
|
||||
left: 6px;
|
||||
opacity: 0;
|
||||
transition: opacity 0.25s ease;
|
||||
}
|
||||
|
||||
.react-toggle-track-x {
|
||||
position: absolute;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
margin-top: auto;
|
||||
margin-bottom: auto;
|
||||
line-height: 0;
|
||||
right: 10px;
|
||||
opacity: 1;
|
||||
transition: opacity 0.25s ease;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -20,10 +20,10 @@
|
|||
/* Tooltip text */
|
||||
.tooltip {
|
||||
.tooltip__body {
|
||||
background-color: var(--tooltip-bg);
|
||||
background-color: $lbry-gray-5;
|
||||
font-family: 'metropolis-medium';
|
||||
font-size: 12px;
|
||||
color: var(--tooltip-color);
|
||||
color: $lbry-white;
|
||||
border-radius: 8px;
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
|
|
@ -68,7 +68,7 @@
|
|||
top: 100%;
|
||||
left: 50%;
|
||||
margin-left: -5px;
|
||||
border-color: var(--tooltip-bg) transparent transparent transparent;
|
||||
border-color: $lbry-gray-5 transparent transparent transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -82,7 +82,7 @@
|
|||
top: 17px;
|
||||
right: 100%; /* To the left of the tooltip */
|
||||
margin-top: -5px;
|
||||
border-color: transparent var(--tooltip-bg) transparent transparent;
|
||||
border-color: transparent $lbry-gray-5 transparent transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -101,7 +101,7 @@
|
|||
bottom: 100%;
|
||||
left: 50%;
|
||||
margin-left: -5px;
|
||||
border-color: transparent transparent var(--tooltip-bg) transparent;
|
||||
border-color: transparent transparent $lbry-gray-5 transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -114,7 +114,7 @@
|
|||
top: 17px;
|
||||
left: 100%;
|
||||
margin-top: -5px;
|
||||
border-color: transparent transparent transparent var(--tooltip-bg);
|
||||
border-color: transparent transparent transparent $lbry-gray-5;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -5,46 +5,46 @@
|
|||
--color-canvas: transparent;
|
||||
--color-help: #8696AF;
|
||||
--color-download: rgba(255, 255, 255, 0.75);
|
||||
--color-download-overlay: var(--color-black);
|
||||
--color-download-overlay: $lbry-black;
|
||||
--color-bg: var(--color-blue-grey);
|
||||
--color-bg-alt: #2D3D56;
|
||||
--color-placeholder: var(--color-bg-alt);
|
||||
--color-credit-free: var(--color-secondary);
|
||||
--color-placeholder: $lbry-gray-1;
|
||||
--color-credit-free: $lbry-blue-2;
|
||||
|
||||
/* Text */
|
||||
--text-color: var(--color-text-white);
|
||||
--text-help-color: var(--color-help);
|
||||
--text-help-color: $lbry-gray-5;
|
||||
|
||||
/* Form */
|
||||
--form-label-color: var(--color-white);
|
||||
--form-label-color: $lbry-white;
|
||||
|
||||
/* Input */
|
||||
--input-bg: transparent;
|
||||
--input-label-color: var(--color-help);
|
||||
--input-color: var(--text-color);
|
||||
--input-label-color: $lbry-gray-5;
|
||||
--input-color: $lbry-black;
|
||||
--input-border-size: 1px;
|
||||
--input-border-color: rgba(255,255,255, 0.5);
|
||||
--input-hover-border-color: rgba(255, 255, 255, 1);
|
||||
--input-copyable-bg: var(--color-blue-grey);
|
||||
--input-copyable-color: #8696AF;
|
||||
--input-copyable-border: #53637C;
|
||||
--input-select-bg-color: var(--color-bg-alt);
|
||||
--input-select-color: var(--color-white);
|
||||
--input-select-bg-color: $lbry-gray-1;
|
||||
--input-select-color: $lbry-white;
|
||||
|
||||
/* input:disabled */
|
||||
--input-disabled-border-color: rgba(255, 255, 255, 0.42);
|
||||
--input-disabled-color: rgba(255, 255, 255, 0.54);
|
||||
|
||||
/* Button */
|
||||
--btn-bg-primary: var(--color-primary);
|
||||
--btn-color-primary: var(--color-white);
|
||||
--btn-bg-primary: $lbry-teal-3;
|
||||
--btn-color-primary: $lbry-white;
|
||||
--btn-bg-primary-hover: var(--color-primary-light);
|
||||
--btn-bg-alt: #13233C;
|
||||
--btn-color-alt: var(--text-color);
|
||||
--btn-color-alt: $lbry-black;
|
||||
--btn-home-bg-color: #44548F;
|
||||
|
||||
/* Header */
|
||||
--header-bg: var(--color-white);
|
||||
--header-bg: $lbry-white;
|
||||
--header-color: var(--color-text);
|
||||
--header-active-color: rgba(0, 0, 0, 0.85);
|
||||
--header-button-bg: transparent;
|
||||
|
|
@ -53,11 +53,11 @@
|
|||
|
||||
/* Header */
|
||||
--header-color: #CCC;
|
||||
--header-active-color: var(--color-white);
|
||||
--header-button-hover-bg: var(--color-bg-alt);
|
||||
--header-active-color: $lbry-white;
|
||||
--header-button-hover-bg: $lbry-gray-1;
|
||||
|
||||
/* Header -> search */
|
||||
--search-color: var(--color-white);
|
||||
--search-color: $lbry-white;
|
||||
--search-bg-color: rgb(58, 74, 99);
|
||||
--search-active-bg-color: #13233C;
|
||||
--search-active-shadow: 0 6px 9px -2px var(--color-grey--dark);
|
||||
|
|
@ -69,28 +69,28 @@
|
|||
--nav-bg-color: #0D102F;
|
||||
|
||||
/* Table */
|
||||
--table-border: 1px solid var(--color-bg-alt);
|
||||
--table-item-odd: var(--color-bg-alt);
|
||||
--table-border: 1px solid $lbry-gray-1;
|
||||
--table-item-odd: $lbry-gray-1;
|
||||
|
||||
/* Card */
|
||||
--card-bg: #13233C;
|
||||
--card-radius: 3px;
|
||||
--card-text-color: var(--color-help);
|
||||
--card-wallet-color: var(--text-color-inverse);
|
||||
--card-text-color: $lbry-gray-5;
|
||||
--card-wallet-color: $lbry-white;
|
||||
--success-msg-color: var(--color-primary-light);
|
||||
--success-msg-border:var(--color-primary);
|
||||
--success-msg-bg: var(--color-bg);
|
||||
--success-msg-border:$lbry-teal-3;
|
||||
--success-msg-bg: rgba($lbry-gray-1, 0.5);
|
||||
|
||||
/* Modal */
|
||||
--modal-bg: var(--card-bg);
|
||||
--modal-bg: $lbry-white;
|
||||
--modal-overlay-bg: rgba(32,48,73, 0.75);
|
||||
--modal-border: 1px solid rgba(0, 0, 0, 0.25);
|
||||
--modal-btn-bg-color: var(--color-bg-alt);
|
||||
--modal-btn-bg-color: $lbry-gray-1;
|
||||
|
||||
/* Scrollbar */
|
||||
--scrollbar-thumb-bg: rgba(255, 255, 255, 0.20);
|
||||
--scrollbar-thumb-hover-bg: #8696AF;
|
||||
|
||||
/* Shadows */
|
||||
--box-shadow-header: 0px 6px 20px 1px rgba(0, 0, 0, 0.2);
|
||||
--box-shadow-header: 0 6px 20px 1px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue