Second refactor pass
This commit is contained in:
ポール ウェッブ
Sean Yesmunt
parent
ca35e1f15d
commit
2a3491013b
29 changed files with 1064 additions and 1225 deletions
|
|
@ -40,28 +40,24 @@ html {
|
|||
}
|
||||
|
||||
body {
|
||||
font-family: 'metropolis-medium';
|
||||
font-weight: 400;
|
||||
font-size: 16px;
|
||||
line-height: 1.5;
|
||||
color: $lbry-black;
|
||||
font-family: 'metropolis-medium';
|
||||
font-size: 16px;
|
||||
font-weight: 400;
|
||||
height: 100%;
|
||||
line-height: 1.5;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
code {
|
||||
font: 1.5em Consolas, 'Lucida Console', 'Source Sans', monospace;
|
||||
background-color: $lbry-gray-1;
|
||||
font: 1.5em Consolas, 'Lucida Console', 'Source Sans', monospace;
|
||||
}
|
||||
|
||||
// Without this buttons don't have the Metropolis font
|
||||
// Without this buttons do not have the app font
|
||||
button {
|
||||
font-weight: inherit;
|
||||
font-family: inherit;
|
||||
font-weight: inherit;
|
||||
}
|
||||
|
||||
ul {
|
||||
|
|
@ -70,15 +66,20 @@ ul {
|
|||
}
|
||||
|
||||
input {
|
||||
background-color: transparent;
|
||||
border-bottom: var(--input-border-size) dotted $lbry-gray-5;
|
||||
color: $lbry-black;
|
||||
line-height: 1;
|
||||
cursor: text;
|
||||
background-color: transparent;
|
||||
line-height: 1;
|
||||
|
||||
&::placeholder {
|
||||
color: $lbry-gray-5;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
&[type='radio'],
|
||||
&[type='checkbox'],
|
||||
&[type='file'],
|
||||
&[type='radio'],
|
||||
&[type='select'] {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
|
@ -86,12 +87,13 @@ input {
|
|||
&[type='file'] {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
&.input-copyable {
|
||||
flex: 1;
|
||||
background-color: $lbry-gray-1;
|
||||
color: $lbry-gray-5;
|
||||
padding: 10px 16px;
|
||||
border: 1px dashed $lbry-gray-3;
|
||||
color: $lbry-gray-5;
|
||||
flex: 1;
|
||||
padding: 10px 16px;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
|
|
@ -99,12 +101,13 @@ input {
|
|||
&:hover {
|
||||
border-color: rgba($lbry-black, 0.8);
|
||||
}
|
||||
|
||||
border-bottom: var(--input-border-size) solid $lbry-gray-5;
|
||||
}
|
||||
|
||||
&:disabled {
|
||||
color: $lbry-gray-3;
|
||||
border-bottom: var(--input-border-size) solid $lbry-gray-3;
|
||||
color: $lbry-gray-3;
|
||||
cursor: default;
|
||||
}
|
||||
}
|
||||
|
|
@ -112,13 +115,8 @@ input {
|
|||
textarea {
|
||||
border: 1px solid $lbry-gray-2;
|
||||
font-size: 0.8em;
|
||||
width: 100%;
|
||||
padding: $spacing-vertical * 1/3;
|
||||
}
|
||||
|
||||
input::placeholder {
|
||||
color: $lbry-gray-5;
|
||||
opacity: 0.5;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
label[for] {
|
||||
|
|
@ -130,42 +128,44 @@ button + input {
|
|||
}
|
||||
|
||||
dl {
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
|
||||
overflow-x: scroll;
|
||||
overflow-y: hidden;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
dt {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
|
||||
float: left;
|
||||
width: 20%;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
dd {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
|
||||
float: left;
|
||||
width: 80%;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
p {
|
||||
&:not(:first-of-type) {
|
||||
margin-top: $spacing-vertical * 1/3;
|
||||
}
|
||||
p:not(:first-of-type) {
|
||||
margin-top: $spacing-vertical * 1/3;
|
||||
}
|
||||
|
||||
.page {
|
||||
z-index: 0;
|
||||
position: absolute;
|
||||
top: var(--header-height);
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
display: flex;
|
||||
right: 0;
|
||||
|
||||
background-color: rgba($lbry-gray-1, 0.3);
|
||||
display: flex;
|
||||
position: absolute;
|
||||
z-index: 0;
|
||||
|
||||
@media only screen and (min-width: $medium-breakpoint) {
|
||||
grid-template-columns: var(--side-nav-width-m) auto;
|
||||
|
|
@ -185,37 +185,36 @@ p {
|
|||
}
|
||||
|
||||
.main {
|
||||
padding: $spacing-width $spacing-width;
|
||||
margin: auto;
|
||||
padding: $spacing-width $spacing-width;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.main--contained {
|
||||
max-width: 1000px;
|
||||
margin: auto;
|
||||
max-width: 1000px;
|
||||
}
|
||||
|
||||
.main--no-padding {
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
padding-top: 0;
|
||||
padding-right: 0;
|
||||
padding-left: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.main--extra-padding {
|
||||
padding-left: 100px;
|
||||
padding-right: 100px;
|
||||
padding-left: 100px;
|
||||
}
|
||||
|
||||
.main--for-content {
|
||||
padding: $spacing-width * 2/3;
|
||||
display: flex;
|
||||
padding: $spacing-width * 2/3;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.page__header {
|
||||
padding: $spacing-vertical * 2/3;
|
||||
padding-bottom: 0;
|
||||
padding: $spacing-vertical * 2/3 $spacing-vertical * 2/3 0 $spacing-vertical * 2/3;
|
||||
}
|
||||
|
||||
.page__title {
|
||||
|
|
@ -223,11 +222,11 @@ p {
|
|||
}
|
||||
|
||||
.page__empty {
|
||||
margin-top: 200px;
|
||||
text-align: center;
|
||||
align-items: center;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
margin-top: 200px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.columns {
|
||||
|
|
@ -235,8 +234,8 @@ p {
|
|||
justify-content: space-between;
|
||||
|
||||
> * {
|
||||
flex-grow: 1;
|
||||
flex-basis: 0;
|
||||
flex-grow: 1;
|
||||
|
||||
&:not(:first-of-type):not(:last-of-type) {
|
||||
margin: 0 $spacing-vertical / 3;
|
||||
|
|
@ -252,9 +251,9 @@ p {
|
|||
}
|
||||
}
|
||||
|
||||
/* Custom text selection */
|
||||
// Custom text selection
|
||||
*::selection {
|
||||
background: $lbry-teal-1;
|
||||
background-color: $lbry-teal-1;
|
||||
color: $lbry-white;
|
||||
}
|
||||
|
||||
|
|
@ -269,34 +268,38 @@ p {
|
|||
}
|
||||
|
||||
.credit-amount--file-page {
|
||||
font-family: 'metropolis-bold';
|
||||
border-radius: 5px;
|
||||
font-family: 'metropolis-bold';
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
.credit-amount--free {
|
||||
color: $lbry-blue-5;
|
||||
&:not(.credit-amount--file-page) {
|
||||
color: $lbry-blue-5;
|
||||
}
|
||||
|
||||
&.credit-amount--file-page {
|
||||
color: $lbry-blue-5;
|
||||
background-color: $lbry-blue-2;
|
||||
color: $lbry-blue-5;
|
||||
}
|
||||
}
|
||||
|
||||
.credit-amount--cost {
|
||||
color: $lbry-gray-5;
|
||||
&:not(.credit-amount--file-page) {
|
||||
color: $lbry-gray-5;
|
||||
}
|
||||
|
||||
&.credit-amount--file-page {
|
||||
color: $lbry-black;
|
||||
background-color: $lbry-yellow-3;
|
||||
color: $lbry-black;
|
||||
}
|
||||
}
|
||||
|
||||
.credit-amount--inherit {
|
||||
background-color: inherit;
|
||||
color: inherit;
|
||||
font-weight: inherit;
|
||||
font-size: inherit;
|
||||
font-weight: inherit;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
|
|
@ -310,8 +313,8 @@ p {
|
|||
}
|
||||
|
||||
.disabled {
|
||||
pointer-events: none;
|
||||
opacity: 0.5;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.column {
|
||||
|
|
@ -323,31 +326,33 @@ p {
|
|||
}
|
||||
|
||||
.truncated-text {
|
||||
//display: inline-block;
|
||||
display: -webkit-box;
|
||||
overflow: hidden;
|
||||
-webkit-box-orient: vertical;
|
||||
}
|
||||
|
||||
.busy-indicator__loader {
|
||||
background: url('../../../static/img/busy.gif') no-repeat center center;
|
||||
display: inline-block;
|
||||
margin: -1em 0;
|
||||
min-width: 16px;
|
||||
min-height: 8px;
|
||||
vertical-align: middle;
|
||||
margin: -1em 0;
|
||||
padding: 0 30px;
|
||||
&:last-child {
|
||||
padding-right: 2px;
|
||||
}
|
||||
|
||||
background: url('../../../static/img/busy.gif') no-repeat center center;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
|
||||
&:first-child {
|
||||
padding-left: 2px;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
padding-right: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
.help {
|
||||
font-size: 12px;
|
||||
color: $lbry-gray-5;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.help--padded {
|
||||
|
|
@ -355,8 +360,8 @@ p {
|
|||
}
|
||||
|
||||
.meta {
|
||||
color: $lbry-gray-1;
|
||||
font-size: 0.8em;
|
||||
color: $lbry-gray-1; // "--color-meta-light" does not exist
|
||||
}
|
||||
|
||||
.empty {
|
||||
|
|
@ -365,12 +370,14 @@ p {
|
|||
}
|
||||
|
||||
.qr-code {
|
||||
border: 3px solid $lbry-white;
|
||||
height: 134px;
|
||||
width: 134px;
|
||||
height: 134px;
|
||||
border: 3px solid $lbry-white;
|
||||
|
||||
&.qr-code--right-padding {
|
||||
margin-right: $spacing-vertical * 2/3;
|
||||
}
|
||||
|
||||
&.qr-code--top-padding {
|
||||
margin-top: $spacing-vertical * 2/3;
|
||||
}
|
||||
|
|
@ -381,9 +388,10 @@ p {
|
|||
}
|
||||
|
||||
.thumbnail-preview {
|
||||
height: var(--thumbnail-preview-height);
|
||||
width: var(--thumbnail-preview-width);
|
||||
background-size: cover;
|
||||
background-repeat: no-repeat;
|
||||
height: var(--thumbnail-preview-height);
|
||||
|
||||
background-position: 50% 50%;
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,3 +1,7 @@
|
|||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body,
|
||||
div,
|
||||
dl,
|
||||
|
|
@ -28,22 +32,26 @@ iframe {
|
|||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
:focus {
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
input::-webkit-search-cancel-button {
|
||||
/* Remove default */
|
||||
-webkit-appearance: none;
|
||||
-webkit-appearance: none; // Remove default
|
||||
}
|
||||
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
border-spacing: 0;
|
||||
}
|
||||
|
||||
fieldset,
|
||||
img,
|
||||
iframe {
|
||||
border: 0;
|
||||
iframe,
|
||||
img {
|
||||
border: none;
|
||||
}
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
|
|
@ -52,28 +60,38 @@ h5,
|
|||
h6 {
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
ol,
|
||||
ul {
|
||||
list-style-position: inside;
|
||||
|
||||
> li {
|
||||
list-style-position: inside;
|
||||
}
|
||||
}
|
||||
|
||||
input,
|
||||
textarea,
|
||||
select {
|
||||
select,
|
||||
textarea {
|
||||
border: none;
|
||||
font-family: inherit;
|
||||
font-size: inherit;
|
||||
font-weight: inherit;
|
||||
border: 0 none;
|
||||
}
|
||||
|
||||
img {
|
||||
width: auto;
|
||||
height: auto;
|
||||
max-width: 100%;
|
||||
max-height: 100%;
|
||||
vertical-align: middle;
|
||||
-ms-interpolation-mode: bicubic;
|
||||
}
|
||||
|
||||
a {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
button:disabled {
|
||||
cursor: default;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,4 @@
|
|||
/*
|
||||
Both of these should probably die and become variables as well
|
||||
*/
|
||||
// Both of these should probably die and become variables as well
|
||||
$spacing-vertical: 24px;
|
||||
$spacing-width: 36px;
|
||||
|
||||
|
|
@ -8,7 +6,7 @@ $medium-breakpoint: 1279px;
|
|||
$large-breakpoint: 1921px;
|
||||
|
||||
:root {
|
||||
/* Widths & spacings */
|
||||
// Width & spacing
|
||||
--side-nav-width: 160px;
|
||||
--side-nav-width-m: 240px;
|
||||
--side-nav-width-l: 320px;
|
||||
|
|
@ -17,190 +15,28 @@ $large-breakpoint: 1921px;
|
|||
--video-aspect-ratio: 56.25%; // 9 x 16
|
||||
--snack-bar-width: 756px;
|
||||
|
||||
/* Colors: Brand */
|
||||
/*
|
||||
--color-white: $lbry-white;
|
||||
--color-black: #000;
|
||||
--color-grey: #d6d6d6;
|
||||
--color-grey-light: #f6f6f6;
|
||||
--color-grey-dark: #888;
|
||||
--color-primary: #44b098;
|
||||
--color-primary-dark: #2c6e60;
|
||||
--color-primary-light: #64c9b2;
|
||||
--color-secondary: #6afbda;
|
||||
--color-teal: #19a6a3;
|
||||
--color-dark-blue: #2f6f61;
|
||||
--color-light-blue: #49b2e2;
|
||||
--color-red: #e2495e;
|
||||
--color-yellow: #fbd55e;
|
||||
--color-green: #399483;
|
||||
--color-green-light: #effbe4;
|
||||
--color-green-blue: #2ec1a8;
|
||||
--color-purple: #8165b0;
|
||||
--color-blue-grey: #203049;
|
||||
--color-red-light: #fff6f6;
|
||||
*/
|
||||
|
||||
/* Colors */
|
||||
/*
|
||||
--color-divider: #e3e3e3;
|
||||
--color-help: rgba(0, 0, 0, 0.54);
|
||||
--color-error: #a94442;
|
||||
--color-nsfw: #bf4440;
|
||||
--color-download: $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: $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: 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: $lbry-gray-5;
|
||||
*/
|
||||
// Text
|
||||
--text-max-width: 660px;
|
||||
--text-link-padding: 4px;
|
||||
|
||||
/* Text Selectiom */
|
||||
/*
|
||||
--text-selection-bg: var(--color-primary-light);
|
||||
--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);
|
||||
|
||||
/* Input */
|
||||
/*
|
||||
--input-bg: transparent;
|
||||
--input-label-color: $lbry-gray-5;
|
||||
--input-color: $lbry-black;
|
||||
--input-border-size: 1px;
|
||||
--input-border-color: $lbry-gray-5;
|
||||
--input-copyable-bg: #f6f6f6;
|
||||
--input-copyable-color: $lbry-gray-5;
|
||||
--input-copyable-border: var(--color-grey);
|
||||
--input-select-bg-color: var(--color-grey);
|
||||
--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:placeholder */
|
||||
/*
|
||||
--input-placeholder-color: $lbry-gray-5;
|
||||
--input-placeholder-opacity: 1;
|
||||
*/
|
||||
|
||||
/* Select */
|
||||
/*
|
||||
--select-bg: $lbry-gray-1;
|
||||
--select-color: $lbry-black;
|
||||
*/
|
||||
// Select
|
||||
--select-height: 30px;
|
||||
|
||||
/* Button */
|
||||
/*
|
||||
--btn-bg-primary: $lbry-teal-3;
|
||||
--btn-color-primary: $lbry-white;
|
||||
--btn-bg-primary-hover: var(--color-primary-light);
|
||||
--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: $lbry-white;
|
||||
*/
|
||||
// Button
|
||||
--btn-radius: 20px;
|
||||
--btn-height: 36px;
|
||||
|
||||
/* SnackBar */
|
||||
/*
|
||||
--snackbar-bg-primary: $lbry-teal-3;
|
||||
--snackbar-color-primary: $lbry-white;
|
||||
*/
|
||||
|
||||
/* Header */
|
||||
/*
|
||||
--header-bg: $lbry-white;
|
||||
--header-color: var(--color-text);
|
||||
--header-active-color: rgba(0, 0, 0, 0.85);
|
||||
*/
|
||||
// Header
|
||||
--header-height: 60px;
|
||||
/*
|
||||
--header-button-bg: transparent;
|
||||
--header-button-hover-bg: rgba(100, 100, 100, 0.15);
|
||||
--header-primary-color: $lbry-teal-3;
|
||||
*/
|
||||
|
||||
/* Header -> search */
|
||||
/*
|
||||
--search-color: #666;
|
||||
--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: $lbry-black;
|
||||
*/
|
||||
// Header -> search
|
||||
--search-modal-input-height: 70px;
|
||||
// --search-exact-result: #eaeaea;
|
||||
|
||||
/* Nav */
|
||||
/*
|
||||
--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: $lbry-white;
|
||||
--card-text-color: $lbry-gray-5;
|
||||
*/
|
||||
// Card
|
||||
--card-radius: 2px;
|
||||
--card-max-width: 1000px;
|
||||
/*
|
||||
--card-wallet-color: $lbry-white;
|
||||
--success-msg-color: var(--color-green);
|
||||
--success-msg-border: mix($lbry-green-3, $lbry-blue-3, 50%);
|
||||
--success-msg-bg: var(--color-green-light);
|
||||
--error-msg-color: $lbry-red-5;
|
||||
--error-msg-border: $lbry-red-5;
|
||||
--error-msg-bg: var(--color-red-light);
|
||||
*/
|
||||
|
||||
/* File */
|
||||
// File
|
||||
--file-tile-media-height: 125px;
|
||||
--file-tile-media-width: calc(125px * (16 / 9));
|
||||
--file-tile-media-height-small: 60px;
|
||||
|
|
@ -211,36 +47,14 @@ $large-breakpoint: 1921px;
|
|||
--recommended-content-width: 300px;
|
||||
--recommended-content-width-medium: 400px;
|
||||
|
||||
/* Modal */
|
||||
// Modal
|
||||
--modal-width: 440px;
|
||||
/*
|
||||
--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: $lbry-white;
|
||||
*/
|
||||
|
||||
// /* Tooltip */
|
||||
/*
|
||||
--tooltip-bg: #555;
|
||||
--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: $lbry-teal-3;
|
||||
--scrollbar-track-bg: transparent;
|
||||
*/
|
||||
|
||||
// /* Animation :) */
|
||||
// Animation :)
|
||||
--animation-duration: 0.3s;
|
||||
--animation-style: cubic-bezier(0.55, 0, 0.1, 1);
|
||||
|
||||
/* Image */
|
||||
// Image
|
||||
--thumbnail-preview-height: 100px;
|
||||
--thumbnail-preview-width: 177px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,23 +1,20 @@
|
|||
button:disabled {
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.btn {
|
||||
border: none;
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
padding: 10px;
|
||||
height: var(--btn-height);
|
||||
min-width: var(--btn-height);
|
||||
border-radius: var(--btn-radius);
|
||||
background-color: $lbry-teal-3;
|
||||
color: $lbry-white;
|
||||
display: flex;
|
||||
height: var(--btn-height);
|
||||
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background-color: $lbry-teal-3;
|
||||
border: none;
|
||||
border-radius: var(--btn-radius);
|
||||
color: $lbry-white;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
fill: currentColor; // for proper icon color
|
||||
font-size: 12px;
|
||||
justify-content: center;
|
||||
padding: 10px;
|
||||
position: relative;
|
||||
text-decoration: none;
|
||||
transition: all var(--animation-duration) var(--animation-style);
|
||||
|
||||
&:not(:disabled) {
|
||||
|
|
@ -25,75 +22,157 @@ button:disabled {
|
|||
}
|
||||
|
||||
&:hover {
|
||||
// box-shadow: none;
|
||||
background-color: $lbry-teal-1;
|
||||
}
|
||||
|
||||
&:not(.btn--no-padding):not(.btn--link):not(.btn--no-style) {
|
||||
.btn__content {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
padding: 0 8px;
|
||||
}
|
||||
}
|
||||
|
||||
&.btn--alt {
|
||||
&:not(:disabled) {
|
||||
background-color: $lbry-white;
|
||||
color: $lbry-black;
|
||||
}
|
||||
|
||||
&:disabled {
|
||||
background-color: transparent;
|
||||
color: $lbry-gray-5;
|
||||
}
|
||||
}
|
||||
|
||||
&.btn--arrow {
|
||||
color: $lbry-black;
|
||||
width: var(--btn-arrow-width);
|
||||
|
||||
&:disabled {
|
||||
opacity: 0.3;
|
||||
}
|
||||
}
|
||||
|
||||
&.btn--danger {
|
||||
background-color: $lbry-red-3;
|
||||
}
|
||||
|
||||
&.btn--disabled:disabled {
|
||||
// wtf?
|
||||
cursor: default;
|
||||
|
||||
&.btn--primary {
|
||||
background-color: rgba($lbry-black, 0.5);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
|
||||
&.btn--external-link {
|
||||
color: $lbry-blue-1;
|
||||
}
|
||||
|
||||
&.btn--file-actions {
|
||||
width: var(--btn-height);
|
||||
height: var(--btn-height);
|
||||
|
||||
background-color: $lbry-black;
|
||||
border-radius: var(--btn-radius);
|
||||
color: $lbry-white;
|
||||
opacity: 0.8;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
&.btn--header-balance {
|
||||
color: $lbry-teal-3;
|
||||
font-size: 14px;
|
||||
|
||||
@media only screen and (min-width: $large-breakpoint) {
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.btn__label--balance {
|
||||
color: $lbry-gray-5;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: transparent;
|
||||
|
||||
.btn__label--balance {
|
||||
color: $lbry-teal-3;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.btn--header-publish {
|
||||
background-color: $lbry-teal-3;
|
||||
}
|
||||
|
||||
&.btn--home-nav {
|
||||
background-color: $lbry-white;
|
||||
box-shadow: none;
|
||||
|
||||
.btn__content {
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&.btn--inverse {
|
||||
background-color: transparent;
|
||||
box-shadow: none;
|
||||
color: $lbry-teal-3;
|
||||
}
|
||||
|
||||
&.btn--link {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
|
||||
background-color: inherit;
|
||||
border-radius: 0;
|
||||
box-shadow: none;
|
||||
color: $lbry-teal-3;
|
||||
display: inline;
|
||||
font-size: 1em;
|
||||
min-width: 0;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
&.btn--no-style {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
|
||||
background-color: inherit;
|
||||
border-radius: 0;
|
||||
box-shadow: none;
|
||||
color: inherit;
|
||||
font-size: inherit;
|
||||
font-weight: inherit;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
&.btn--secondary {
|
||||
background-color: $lbry-teal-3;
|
||||
}
|
||||
|
||||
&.btn--tourniquet {
|
||||
max-width: 20vw;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
&.btn--uppercase {
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.icon + .btn__label {
|
||||
padding-left: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
.btn.btn--alt {
|
||||
color: $lbry-black;
|
||||
background-color: $lbry-white;
|
||||
|
||||
&:disabled {
|
||||
color: $lbry-gray-5;
|
||||
background-color: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
.btn.btn--danger {
|
||||
background-color: $lbry-red-3;
|
||||
}
|
||||
|
||||
.btn.btn--inverse {
|
||||
background-color: transparent;
|
||||
box-shadow: none;
|
||||
color: $lbry-teal-3;
|
||||
}
|
||||
|
||||
.btn.btn--link {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
background-color: inherit;
|
||||
font-size: 1em;
|
||||
color: $lbry-teal-3;
|
||||
border-radius: 0;
|
||||
display: inline;
|
||||
min-width: 0;
|
||||
box-shadow: none;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.btn.btn--external-link {
|
||||
color: $lbry-blue-1;
|
||||
}
|
||||
|
||||
.btn.btn--secondary {
|
||||
background-color: $lbry-teal-3;
|
||||
}
|
||||
|
||||
.btn.btn--tourniquet {
|
||||
max-width: 20vw;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.btn.btn--no-style {
|
||||
font-size: inherit;
|
||||
font-weight: inherit;
|
||||
color: inherit;
|
||||
background-color: inherit;
|
||||
border-radius: 0;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
box-shadow: none;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.btn--link,
|
||||
.btn--no-style {
|
||||
height: auto;
|
||||
|
|
@ -104,100 +183,16 @@ button:disabled {
|
|||
}
|
||||
}
|
||||
|
||||
.btn.btn--disabled:disabled {
|
||||
cursor: default;
|
||||
|
||||
&.btn--primary {
|
||||
background-color: rgba($lbry-black, 0.5);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
|
||||
.btn.btn--uppercase {
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.btn:not(.btn--no-padding):not(.btn--link):not(.btn--no-style) {
|
||||
.btn__content {
|
||||
padding: 0 8px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
|
||||
.icon + .btn__label,
|
||||
.btn__label + .icon {
|
||||
margin-left: 5px;
|
||||
}
|
||||
|
||||
/*
|
||||
Everything below this is variations of the default button classes
|
||||
You must pass in a className, props will not set these classes,
|
||||
if you use these in several different places they should probably
|
||||
be applied via props
|
||||
*/
|
||||
|
||||
.btn.btn--home-nav {
|
||||
background-color: $lbry-white;
|
||||
box-shadow: none;
|
||||
|
||||
.btn__content {
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.btn.btn--arrow {
|
||||
width: var(--btn-arrow-width);
|
||||
color: $lbry-black;
|
||||
|
||||
&:disabled {
|
||||
opacity: 0.3;
|
||||
}
|
||||
}
|
||||
|
||||
.btn--uri-indicator {
|
||||
transition: color var(--animation-duration) var(--animation-style);
|
||||
display: inline-block;
|
||||
transition: color var(--animation-duration) var(--animation-style);
|
||||
|
||||
&:hover {
|
||||
color: $lbry-teal-3;
|
||||
}
|
||||
}
|
||||
|
||||
.btn.btn--header-publish {
|
||||
background-color: $lbry-teal-3;
|
||||
}
|
||||
|
||||
.btn.btn--header-balance {
|
||||
font-size: 14px;
|
||||
color: $lbry-teal-3;
|
||||
|
||||
@media only screen and (min-width: $large-breakpoint) {
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.btn__label--balance {
|
||||
color: $lbry-gray-5;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: transparent;
|
||||
|
||||
.btn__label--balance {
|
||||
color: $lbry-teal-3;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.btn.btn--file-actions {
|
||||
background-color: $lbry-black;
|
||||
color: $lbry-white;
|
||||
opacity: 0.8;
|
||||
border-radius: var(--btn-radius);
|
||||
width: var(--btn-height);
|
||||
height: var(--btn-height);
|
||||
padding: 10px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,13 +1,20 @@
|
|||
.card {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
border-radius: var(--card-radius);
|
||||
user-select: text;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin-right: auto;
|
||||
margin-left: auto;
|
||||
max-width: var(--card-max-width);
|
||||
user-select: text;
|
||||
white-space: normal;
|
||||
|
||||
// .card-media__internal__links should always be inside a card
|
||||
.card-media__internal-links {
|
||||
top: $spacing-vertical * 2/3;
|
||||
right: $spacing-vertical * 2/3;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.card__media {
|
||||
padding-top: var(--video-aspect-ratio);
|
||||
}
|
||||
|
|
@ -20,28 +27,26 @@
|
|||
}
|
||||
}
|
||||
|
||||
.card--section {
|
||||
background-color: $lbry-white;
|
||||
padding: $spacing-vertical;
|
||||
margin-top: $spacing-vertical * 2/3;
|
||||
// box-shadow: var(--box-shadow-layer);
|
||||
.card--disabled {
|
||||
opacity: 0.3;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.card--small {
|
||||
font-size: 13px;
|
||||
.card--link {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.card__media {
|
||||
background-size: cover;
|
||||
background-repeat: no-repeat;
|
||||
background-position: 50% 50%;
|
||||
background-color: $lbry-gray-3;
|
||||
background-position: 50% 50%;
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
.card__media--no-img {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
|
|
@ -49,120 +54,40 @@
|
|||
background-color: $lbry-red-5;
|
||||
}
|
||||
|
||||
.card--link {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.card--pending {
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.card--section {
|
||||
margin-top: $spacing-vertical * 2/3;
|
||||
padding: $spacing-vertical;
|
||||
background-color: $lbry-white;
|
||||
}
|
||||
|
||||
.card--small {
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.card--space-between {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.card--wallet-balance {
|
||||
background: url('../../../static/img/stripe-background.png') no-repeat;
|
||||
background-size: cover;
|
||||
color: $lbry-white;
|
||||
justify-content: space-between;
|
||||
|
||||
.card__title,
|
||||
.card__subtitle {
|
||||
.card__subtitle,
|
||||
.card__title {
|
||||
color: $lbry-white;
|
||||
}
|
||||
}
|
||||
|
||||
.card--disabled {
|
||||
opacity: 0.3;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.card__title {
|
||||
font-size: 1.5em;
|
||||
color: $lbry-black;
|
||||
padding-top: $spacing-vertical * 1/3;
|
||||
|
||||
@media (min-width: $large-breakpoint) {
|
||||
font-size: 1.7em;
|
||||
}
|
||||
}
|
||||
|
||||
.card__title--file-card {
|
||||
// FileCard is slightly different where the title is only slightly bigger than the subtitle
|
||||
// Slightly bigger than 2 lines for consistent channel placement
|
||||
font-size: 1.1em;
|
||||
height: 3.3em;
|
||||
|
||||
@media only screen and (min-width: $large-breakpoint) {
|
||||
font-size: 1.3em;
|
||||
}
|
||||
}
|
||||
|
||||
.card--space-between {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.card__title-identity-icons {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
align-self: flex-start;
|
||||
}
|
||||
|
||||
.card__subtitle {
|
||||
color: $lbry-gray-5;
|
||||
font-size: 1em;
|
||||
line-height: 1em;
|
||||
padding-top: $spacing-vertical * 1/3;
|
||||
|
||||
@media (min-width: $large-breakpoint) {
|
||||
font-size: 1.2em;
|
||||
}
|
||||
}
|
||||
|
||||
.card__subtext-title {
|
||||
font-size: 1.1em;
|
||||
|
||||
&:not(:first-of-type) {
|
||||
padding-top: $spacing-vertical * 3/2;
|
||||
}
|
||||
}
|
||||
|
||||
.card__subtext {
|
||||
font-size: 0.85em;
|
||||
padding-top: $spacing-vertical * 1/3;
|
||||
}
|
||||
|
||||
.card__meta {
|
||||
color: $lbry-gray-5;
|
||||
font-size: 14px;
|
||||
font-family: 'metropolis-medium';
|
||||
padding-top: $spacing-vertical * 2/3;
|
||||
}
|
||||
|
||||
.card__file-properties {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: $lbry-gray-5;
|
||||
|
||||
.icon + .icon {
|
||||
margin-left: $spacing-vertical * 1/3;
|
||||
}
|
||||
}
|
||||
|
||||
// .card-media__internal__links should always be inside a card
|
||||
.card {
|
||||
.card-media__internal-links {
|
||||
position: absolute;
|
||||
top: $spacing-vertical * 2/3;
|
||||
right: $spacing-vertical * 2/3;
|
||||
}
|
||||
}
|
||||
|
||||
.card__content {
|
||||
margin-top: $spacing-vertical * 2/3;
|
||||
}
|
||||
|
||||
.card__actions {
|
||||
margin-top: $spacing-vertical * 2/3;
|
||||
display: flex;
|
||||
margin-top: $spacing-vertical * 2/3;
|
||||
|
||||
&:not(.card__actions--vertical) {
|
||||
.btn:nth-child(n + 2),
|
||||
|
|
@ -173,18 +98,20 @@
|
|||
}
|
||||
}
|
||||
|
||||
.card__actions--no-margin {
|
||||
margin-top: 0;
|
||||
.card__actions-bottom-corner {
|
||||
bottom: $spacing-vertical;
|
||||
right: $spacing-vertical;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.card__actions--vertical {
|
||||
flex-direction: column;
|
||||
margin-top: 0;
|
||||
align-items: flex-end;
|
||||
.card__actions-top-corner {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.btn:not(:first-child) {
|
||||
margin-top: $spacing-vertical * 1/3;
|
||||
}
|
||||
.card__actions--between {
|
||||
justify-content: space-between;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.card__actions--center {
|
||||
|
|
@ -196,118 +123,55 @@
|
|||
}
|
||||
}
|
||||
|
||||
.card__actions-top-corner {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.card__actions-bottom-corner {
|
||||
position: absolute;
|
||||
bottom: $spacing-vertical;
|
||||
right: $spacing-vertical;
|
||||
}
|
||||
|
||||
.card__actions--end {
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.card__actions--between {
|
||||
justify-content: space-between;
|
||||
flex-wrap: wrap;
|
||||
.card__actions--no-margin {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
/*
|
||||
.card-row is used on the discover page
|
||||
It is a list of cards that extend past the right edge of the screen
|
||||
There are left/right arrows to scroll the cards and view hidden content
|
||||
*/
|
||||
.card-row {
|
||||
white-space: nowrap;
|
||||
width: 100%;
|
||||
padding-top: $spacing-vertical;
|
||||
.card__actions--vertical {
|
||||
align-items: flex-end;
|
||||
flex-direction: column;
|
||||
margin-top: 0;
|
||||
|
||||
&:last-of-type {
|
||||
padding-bottom: $spacing-vertical * 2/3;
|
||||
.btn:not(:first-child) {
|
||||
margin-top: $spacing-vertical * 1/3;
|
||||
}
|
||||
}
|
||||
|
||||
.card-row__header {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
// specific padding-left styling is needed here
|
||||
// this needs to be used on a page with noPadding
|
||||
// doing so allows the content to scroll to the edge of the screen
|
||||
padding-left: $spacing-width;
|
||||
.card__content {
|
||||
margin-top: $spacing-vertical * 2/3;
|
||||
}
|
||||
|
||||
.card-row__title {
|
||||
font-family: 'metropolis-semibold';
|
||||
display: flex;
|
||||
.card__error-msg {
|
||||
margin: $spacing-vertical * 1/3 0;
|
||||
padding: $spacing-vertical * 1/3;
|
||||
|
||||
background-color: $lbry-red-1;
|
||||
border-left: 2px solid $lbry-red-5;
|
||||
color: $lbry-red-5;
|
||||
}
|
||||
|
||||
.card__file-properties {
|
||||
align-items: center;
|
||||
font-size: 18px;
|
||||
line-height: 24px;
|
||||
|
||||
@media only screen and (min-width: $medium-breakpoint) {
|
||||
font-size: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.card-row__scroll-btns {
|
||||
color: $lbry-gray-5;
|
||||
display: flex;
|
||||
padding-right: $spacing-width * 1/3;
|
||||
|
||||
@media (min-width: $medium-breakpoint) {
|
||||
padding-right: $spacing-width;
|
||||
.icon + .icon {
|
||||
margin-left: $spacing-vertical * 1/3;
|
||||
}
|
||||
}
|
||||
|
||||
.card-row__scrollhouse {
|
||||
padding-top: $spacing-vertical * 2/3;
|
||||
overflow: hidden;
|
||||
|
||||
.card {
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
overflow-y: visible;
|
||||
// 31 px to handle to padding between cards
|
||||
width: calc((100% / 4) - 34px);
|
||||
|
||||
@media only screen and (min-width: $medium-breakpoint) {
|
||||
width: calc((100% / 6) - 29px);
|
||||
}
|
||||
|
||||
@media only screen and (min-width: $large-breakpoint) {
|
||||
width: calc((100% / 8) - 27px);
|
||||
}
|
||||
}
|
||||
|
||||
.card:not(:first-of-type) {
|
||||
margin-left: 20px;
|
||||
}
|
||||
|
||||
.card:first-of-type {
|
||||
margin-left: $spacing-width;
|
||||
}
|
||||
|
||||
.card:last-of-type {
|
||||
margin-right: $spacing-width;
|
||||
}
|
||||
}
|
||||
|
||||
.card-row__message {
|
||||
padding: 0 $spacing-width;
|
||||
white-space: normal;
|
||||
}
|
||||
|
||||
/*
|
||||
How cards are displayed in lists
|
||||
*/
|
||||
.card__list {
|
||||
.card {
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
margin-bottom: $spacing-vertical * 3/2;
|
||||
vertical-align: top;
|
||||
|
||||
@media only screen and (max-width: $medium-breakpoint) {
|
||||
width: calc((100% / 4) - (60px / 4)); // 60px === 20px margin-right * three cards
|
||||
|
|
@ -335,6 +199,15 @@
|
|||
}
|
||||
}
|
||||
|
||||
.card__list--recommended {
|
||||
flex: 0 0 var(--recommended-content-width);
|
||||
padding-left: $spacing-width;
|
||||
|
||||
@media (min-width: $medium-breakpoint) {
|
||||
flex: 0 0 var(--recommended-content-width-medium);
|
||||
}
|
||||
}
|
||||
|
||||
.card__list--rewards {
|
||||
column-count: 2;
|
||||
column-gap: $spacing-vertical * 1/3;
|
||||
|
|
@ -346,27 +219,152 @@
|
|||
}
|
||||
}
|
||||
|
||||
.card__list--recommended {
|
||||
flex: 0 0 var(--recommended-content-width);
|
||||
padding-left: $spacing-width;
|
||||
.card__meta {
|
||||
color: $lbry-gray-5;
|
||||
font-family: 'metropolis-medium';
|
||||
font-size: 14px;
|
||||
padding-top: $spacing-vertical * 2/3;
|
||||
}
|
||||
|
||||
@media (min-width: $medium-breakpoint) {
|
||||
flex: 0 0 var(--recommended-content-width-medium);
|
||||
.card__subtitle {
|
||||
color: $lbry-gray-5;
|
||||
font-size: 1em;
|
||||
line-height: 1em;
|
||||
padding-top: $spacing-vertical * 1/3;
|
||||
|
||||
@media (min-width: $large-breakpoint) {
|
||||
font-size: 1.2em;
|
||||
}
|
||||
}
|
||||
|
||||
.card__subtext {
|
||||
font-size: 0.85em;
|
||||
padding-top: $spacing-vertical * 1/3;
|
||||
}
|
||||
|
||||
.card__subtext-title {
|
||||
font-size: 1.1em;
|
||||
|
||||
&:not(:first-of-type) {
|
||||
padding-top: $spacing-vertical * 3/2;
|
||||
}
|
||||
}
|
||||
|
||||
.card__success-msg {
|
||||
margin: $spacing-vertical * 1/3 0;
|
||||
padding: $spacing-vertical * 1/3;
|
||||
|
||||
background-color: $lbry-green-1;
|
||||
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 $lbry-red-5;
|
||||
color: $lbry-red-5;
|
||||
background-color: $lbry-red-1;
|
||||
padding: $spacing-vertical * 1/3;
|
||||
margin: $spacing-vertical * 1/3 0;
|
||||
.card__title {
|
||||
color: $lbry-black;
|
||||
font-size: 1.5em;
|
||||
padding-top: $spacing-vertical * 1/3;
|
||||
|
||||
@media (min-width: $large-breakpoint) {
|
||||
font-size: 1.7em;
|
||||
}
|
||||
}
|
||||
|
||||
.card__title-identity-icons {
|
||||
align-items: center;
|
||||
align-self: flex-start;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.card__title--file-card {
|
||||
// FileCard is slightly different where the title is only slightly bigger than the subtitle
|
||||
// Slightly bigger than 2 lines for consistent channel placement
|
||||
font-size: 1.1em;
|
||||
height: 3.3em;
|
||||
|
||||
@media only screen and (min-width: $large-breakpoint) {
|
||||
font-size: 1.3em;
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
.card-row is used on the discover page
|
||||
It is a list of cards that extend past the right edge of the screen
|
||||
There are left/right arrows to scroll the cards and view hidden content
|
||||
*/
|
||||
.card-row {
|
||||
padding-top: $spacing-vertical;
|
||||
white-space: nowrap;
|
||||
width: 100%;
|
||||
|
||||
&:last-of-type {
|
||||
padding-bottom: $spacing-vertical * 2/3;
|
||||
}
|
||||
}
|
||||
|
||||
.card-row__header {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
// specific padding-left styling is needed here
|
||||
// this needs to be used on a page with noPadding
|
||||
// doing so allows the content to scroll to the edge of the screen
|
||||
padding-left: $spacing-width;
|
||||
}
|
||||
|
||||
.card-row__message {
|
||||
padding: 0 $spacing-width;
|
||||
white-space: normal;
|
||||
}
|
||||
|
||||
.card-row__scroll-btns {
|
||||
display: flex;
|
||||
padding-right: $spacing-width * 1/3;
|
||||
|
||||
@media (min-width: $medium-breakpoint) {
|
||||
padding-right: $spacing-width;
|
||||
}
|
||||
}
|
||||
|
||||
.card-row__scrollhouse {
|
||||
padding-top: $spacing-vertical * 2/3;
|
||||
overflow: hidden;
|
||||
|
||||
.card {
|
||||
display: inline-block;
|
||||
overflow-y: visible;
|
||||
vertical-align: top;
|
||||
width: calc((100% / 4) - 34px); // 31 px to handle to padding between cards
|
||||
|
||||
&:not(:first-of-type) {
|
||||
margin-left: 20px;
|
||||
}
|
||||
|
||||
&:first-of-type {
|
||||
margin-left: $spacing-width;
|
||||
}
|
||||
|
||||
&:last-of-type {
|
||||
margin-right: $spacing-width;
|
||||
}
|
||||
|
||||
@media only screen and (min-width: $medium-breakpoint) {
|
||||
width: calc((100% / 6) - 29px);
|
||||
}
|
||||
|
||||
@media only screen and (min-width: $large-breakpoint) {
|
||||
width: calc((100% / 8) - 27px);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.card-row__title {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
font-family: 'metropolis-semibold';
|
||||
font-size: 18px;
|
||||
line-height: 24px;
|
||||
|
||||
@media only screen and (min-width: $medium-breakpoint) {
|
||||
font-size: 20px;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
.channel-name {
|
||||
display: inline-flex;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,43 +1,17 @@
|
|||
.content__wrapper {
|
||||
max-width: var(--card-max-width);
|
||||
flex: 1 0 var(--file-page-min-width);
|
||||
}
|
||||
|
||||
.content__embedded {
|
||||
background-color: $lbry-black;
|
||||
width: 100%;
|
||||
padding-top: var(--video-aspect-ratio);
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
video {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Video thumbnail with play/download button
|
||||
.content__cover {
|
||||
position: absolute;
|
||||
// Video thumbnail with play/download button
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background-size: contain;
|
||||
background-repeat: no-repeat;
|
||||
background-position: 50% 50%;
|
||||
display: flex;
|
||||
right: 0;
|
||||
|
||||
align-items: center;
|
||||
background-position: 50% 50%;
|
||||
background-repeat: no-repeat;
|
||||
background-size: contain;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
position: absolute;
|
||||
|
||||
&:not(.card__media--nsfw) {
|
||||
background-color: $lbry-black;
|
||||
|
|
@ -48,56 +22,81 @@
|
|||
}
|
||||
}
|
||||
|
||||
.content__view,
|
||||
.content__view--container {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
.content__embedded {
|
||||
align-items: center;
|
||||
background-color: $lbry-black;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
padding-top: var(--video-aspect-ratio);
|
||||
position: relative;
|
||||
width: 100%;
|
||||
|
||||
.content__view--container {
|
||||
iframe {
|
||||
background: $lbry-white;
|
||||
video {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
top: 0;
|
||||
left: 0;
|
||||
|
||||
position: absolute;
|
||||
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.content__loading {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 0 20px;
|
||||
background-color: rgba($lbry-black, 0.5);
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.content__loading-text {
|
||||
color: $lbry-white;
|
||||
}
|
||||
|
||||
.content__empty {
|
||||
background-color: black;
|
||||
width: 100%;
|
||||
padding-top: var(--video-aspect-ratio);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background-color: $lbry-black;
|
||||
color: $lbry-white;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
padding-top: var(--video-aspect-ratio);
|
||||
width: 100%;
|
||||
|
||||
&.content__empty--nsfw {
|
||||
background-color: $lbry-grape-3;
|
||||
}
|
||||
}
|
||||
|
||||
img {
|
||||
max-height: 100%;
|
||||
max-width: 100%;
|
||||
.content__loading {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
align-items: center;
|
||||
background-color: rgba($lbry-black, 0.5);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
padding: 0 20px;
|
||||
}
|
||||
|
||||
.content__loading-text {
|
||||
color: $lbry-white;
|
||||
}
|
||||
|
||||
.content__view,
|
||||
.content__view--container {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
top: 0;
|
||||
left: 0;
|
||||
|
||||
align-items: center;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.content__view--container {
|
||||
iframe {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: $lbry-white;
|
||||
}
|
||||
}
|
||||
|
||||
.content__wrapper {
|
||||
flex: 1 0 var(--file-page-min-width);
|
||||
max-width: var(--card-max-width);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -3,87 +3,105 @@
|
|||
*/
|
||||
|
||||
.gui-container {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
|
||||
position: absolute;
|
||||
z-index: 2;
|
||||
|
||||
.dg.main {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
overflow: inherit;
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
* Light theme:
|
||||
* https://github.com/liabru/dat-gui-light-theme
|
||||
*/
|
||||
/*
|
||||
* Light theme:
|
||||
* https://github.com/liabru/dat-gui-light-theme
|
||||
*/
|
||||
|
||||
.gui-container.light {
|
||||
.dg.main.taller-than-window .close-button {
|
||||
border-top: 1px solid #ddd;
|
||||
}
|
||||
&.light {
|
||||
.dg.main.taller-than-window .close-button {
|
||||
border-top: 1px solid #ddd;
|
||||
}
|
||||
|
||||
.dg.main .close-button {
|
||||
background-color: #e8e8e8;
|
||||
}
|
||||
.dg.main .close-button {
|
||||
&:not(:hover) {
|
||||
background-color: #e8e8e8;
|
||||
}
|
||||
|
||||
.dg.main .close-button:hover {
|
||||
background-color: #ddd;
|
||||
}
|
||||
&:hover {
|
||||
background-color: #ddd;
|
||||
}
|
||||
}
|
||||
|
||||
.dg {
|
||||
color: #555;
|
||||
text-shadow: none !important;
|
||||
}
|
||||
.dg {
|
||||
color: #555;
|
||||
text-shadow: none !important;
|
||||
|
||||
.dg.main::-webkit-scrollbar {
|
||||
background: #fafafa;
|
||||
}
|
||||
&.main {
|
||||
&::-webkit-scrollbar {
|
||||
background-color: #fafafa;
|
||||
}
|
||||
|
||||
.dg.main::-webkit-scrollbar-thumb {
|
||||
background: #bbb;
|
||||
}
|
||||
&::-webkit-scrollbar-thumb {
|
||||
background-color: #bbb;
|
||||
}
|
||||
}
|
||||
|
||||
.dg li:not(.folder) {
|
||||
background: #fafafa;
|
||||
border-bottom: 1px solid #ddd;
|
||||
}
|
||||
li {
|
||||
&:not(.folder) {
|
||||
background-color: #fafafa;
|
||||
border-bottom: 1px solid #ddd;
|
||||
}
|
||||
|
||||
.dg li.save-row .button {
|
||||
text-shadow: none !important;
|
||||
}
|
||||
&.save-row .button {
|
||||
text-shadow: none !important;
|
||||
}
|
||||
|
||||
.dg li.title {
|
||||
background: #e8e8e8
|
||||
url(data:image/gif;base64,R0lGODlhBQAFAJEAAP////Pz8////////yH5BAEAAAIALAAAAAAFAAUAAAIIlI+hKgFxoCgAOw==)
|
||||
6px 10px no-repeat;
|
||||
}
|
||||
&.title {
|
||||
background: #e8e8e8
|
||||
url('data:image/gif;base64,R0lGODlhBQAFAJEAAP////Pz8////////yH5BAEAAAIALAAAAAAFAAUAAAIIlI+hKgFxoCgAOw==')
|
||||
6px 10px no-repeat;
|
||||
}
|
||||
}
|
||||
|
||||
.dg .cr.function:hover,
|
||||
.dg .cr.boolean:hover {
|
||||
background: #fff;
|
||||
}
|
||||
.cr {
|
||||
&.function:hover,
|
||||
&.boolean:hover {
|
||||
background-color: $lbry-white;
|
||||
}
|
||||
}
|
||||
|
||||
.dg .c input[type='text'] {
|
||||
background: #e9e9e9;
|
||||
}
|
||||
.c {
|
||||
input {
|
||||
&[type='text'] {
|
||||
&:not(:focus),
|
||||
&:not(:hover) {
|
||||
background-color: #e9e9e9;
|
||||
}
|
||||
|
||||
.dg .c input[type='text']:hover {
|
||||
background: #eee;
|
||||
}
|
||||
&:focus,
|
||||
&:hover {
|
||||
background-color: #eee;
|
||||
}
|
||||
|
||||
.dg .c input[type='text']:focus {
|
||||
background: #eee;
|
||||
color: #555;
|
||||
}
|
||||
&:focus {
|
||||
color: #555;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.dg .c .slider {
|
||||
background: #e9e9e9;
|
||||
}
|
||||
.slider {
|
||||
&:not(:hover) {
|
||||
background-color: #e9e9e9;
|
||||
}
|
||||
|
||||
.dg .c .slider:hover {
|
||||
background: #eee;
|
||||
&:hover {
|
||||
background-color: #eee;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
.file-download {
|
||||
font-size: 0.8em;
|
||||
align-self: center;
|
||||
font-size: 0.8em;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -5,62 +5,29 @@
|
|||
margin-top: $spacing-vertical * 2/3;
|
||||
}
|
||||
|
||||
.file-list__header {
|
||||
font-size: 24px;
|
||||
padding-top: $spacing-vertical * 4/3;
|
||||
|
||||
.tooltip {
|
||||
margin-left: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
.file-list__sort {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
padding-bottom: 20px;
|
||||
}
|
||||
|
||||
.file-list__header {
|
||||
padding-top: $spacing-vertical * 4/3;
|
||||
font-size: 24px;
|
||||
|
||||
.tooltip {
|
||||
margin-left: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
.file-tile {
|
||||
display: flex;
|
||||
font-size: 14px;
|
||||
padding-top: $spacing-vertical;
|
||||
|
||||
.card__media {
|
||||
height: var(--file-tile-media-height);
|
||||
flex: 0 0 var(--file-tile-media-width);
|
||||
}
|
||||
}
|
||||
|
||||
.file-tile--small {
|
||||
font-size: 12px;
|
||||
|
||||
.card__media {
|
||||
height: var(--file-tile-media-height-small);
|
||||
flex: 0 0 var(--file-tile-media-width-small);
|
||||
}
|
||||
}
|
||||
|
||||
.file-tile--large {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.file-tile__title {
|
||||
font-size: 1.1em;
|
||||
}
|
||||
|
||||
.file-tile--small {
|
||||
padding-top: $spacing-vertical * 2/3;
|
||||
|
||||
.card__media {
|
||||
height: var(--file-tile-media-height-small);
|
||||
flex: 0 0 var(--file-tile-media-width-small);
|
||||
}
|
||||
}
|
||||
|
||||
.file-tile--large {
|
||||
.card__media {
|
||||
height: var(--file-tile-media-height-large);
|
||||
flex: 0 0 var(--file-tile-media-width-large);
|
||||
height: var(--file-tile-media-height);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -72,6 +39,29 @@
|
|||
max-width: 500px;
|
||||
}
|
||||
|
||||
.file-tile--large {
|
||||
font-size: 16px;
|
||||
|
||||
.card__media {
|
||||
flex: 0 0 var(--file-tile-media-width-large);
|
||||
height: var(--file-tile-media-height-large);
|
||||
}
|
||||
}
|
||||
|
||||
.file-tile--small {
|
||||
font-size: 12px;
|
||||
padding-top: $spacing-vertical * 2/3;
|
||||
|
||||
.card__media {
|
||||
flex: 0 0 var(--file-tile-media-width-small);
|
||||
height: var(--file-tile-media-height-small);
|
||||
}
|
||||
}
|
||||
|
||||
.file-tile__title {
|
||||
font-size: 1.1em;
|
||||
}
|
||||
|
||||
.file-tile__uri {
|
||||
color: $lbry-gray-5;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,21 +1,23 @@
|
|||
.file-render {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
margin: auto;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
z-index: 1;
|
||||
right: 0;
|
||||
|
||||
margin: auto;
|
||||
overflow: hidden;
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.file-render__viewer {
|
||||
margin: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
background-color: $lbry-black;
|
||||
margin: 0;
|
||||
|
||||
iframe,
|
||||
webview {
|
||||
|
|
@ -25,63 +27,64 @@
|
|||
}
|
||||
|
||||
.document-viewer {
|
||||
overflow: auto;
|
||||
background-color: $lbry-white;
|
||||
font-size: calc(var(--font-size-subtext-multiple) * 1em);
|
||||
}
|
||||
|
||||
.document-viewer .markdown-preview {
|
||||
height: 100%;
|
||||
overflow: auto;
|
||||
padding: $spacing-vertical $spacing-width;
|
||||
|
||||
.markdown-preview {
|
||||
height: 100%;
|
||||
overflow: auto;
|
||||
padding: $spacing-vertical $spacing-width;
|
||||
}
|
||||
}
|
||||
|
||||
.code-viewer,
|
||||
.document-viewer__content {
|
||||
overflow: auto;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
/* Code-viewer */
|
||||
// Code-viewer
|
||||
.code-viewer .CodeMirror {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
min-height: 100px;
|
||||
|
||||
/* Block native text selection */
|
||||
// Block native text selection
|
||||
user-select: none;
|
||||
|
||||
.CodeMirror-code {
|
||||
font-size: 1em;
|
||||
font-weight: 350;
|
||||
line-height: 1.5em;
|
||||
font-family: Menlo, Consolas, 'DejaVu Sans Mono', inconsolata, monospace;
|
||||
letter-spacing: 0.3px;
|
||||
word-spacing: 1px;
|
||||
}
|
||||
|
||||
.CodeMirror-linenumber {
|
||||
color: $lbry-gray-5;
|
||||
.cm-invalidchar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.CodeMirror .CodeMirror-lines {
|
||||
// is there really a .CodeMirror inside a .CodeMirror?
|
||||
padding: 4px 0;
|
||||
}
|
||||
|
||||
.CodeMirror-code {
|
||||
font-family: Menlo, Consolas, 'DejaVu Sans Mono', inconsolata, monospace;
|
||||
font-size: 1em;
|
||||
font-weight: 350;
|
||||
letter-spacing: 0.3px;
|
||||
line-height: 1.5em;
|
||||
word-spacing: 1px;
|
||||
}
|
||||
|
||||
.CodeMirror-gutters {
|
||||
background-color: $lbry-gray-1;
|
||||
border-right: 1px solid $lbry-gray-2;
|
||||
padding-right: 8px;
|
||||
}
|
||||
|
||||
.CodeMirror-line {
|
||||
padding-left: 16px;
|
||||
}
|
||||
|
||||
.CodeMirror-gutters {
|
||||
border-right: 1px solid $lbry-gray-2;
|
||||
background: $lbry-gray-1;
|
||||
padding-right: 8px;
|
||||
}
|
||||
|
||||
.cm-invalidchar {
|
||||
display: none;
|
||||
.CodeMirror-linenumber {
|
||||
color: $lbry-gray-5;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,11 +1,7 @@
|
|||
.form-row {
|
||||
align-items: flex-end;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: flex-end;
|
||||
|
||||
.form-field:not(:first-of-type) {
|
||||
padding-left: $spacing-vertical;
|
||||
}
|
||||
|
||||
&.form-row--centered {
|
||||
justify-content: center;
|
||||
|
|
@ -15,28 +11,30 @@
|
|||
padding-top: $spacing-vertical * 1/3;
|
||||
}
|
||||
|
||||
&.form-row--vertically-centered {
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
&.form-row--centered {
|
||||
justify-content: center;
|
||||
&.form-row--right {
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
&.form-row--stretch {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
&.form-row--right {
|
||||
justify-content: flex-end;
|
||||
&.form-row--vertically-centered {
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.form-field.form-field--stretch {
|
||||
width: 100%;
|
||||
.form-field {
|
||||
&:not(:first-of-type) {
|
||||
padding-left: $spacing-vertical;
|
||||
}
|
||||
|
||||
input {
|
||||
&.form-field--stretch {
|
||||
width: 100%;
|
||||
max-width: 400px;
|
||||
|
||||
input {
|
||||
max-width: 400px;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -55,33 +53,35 @@
|
|||
width: 100%;
|
||||
}
|
||||
|
||||
.form-field__input.form-field--first-item {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.form-field__input {
|
||||
display: flex;
|
||||
padding-top: $spacing-vertical / 3;
|
||||
|
||||
input[type='checkbox'] {
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
input[type='radio'] {
|
||||
margin-top: 2px;
|
||||
}
|
||||
|
||||
input.paginate-channel {
|
||||
width: 35px;
|
||||
}
|
||||
|
||||
input.input--thumbnail {
|
||||
width: 400px;
|
||||
}
|
||||
|
||||
&.form-field--auto-height {
|
||||
height: auto;
|
||||
}
|
||||
|
||||
&.form-field--first-item {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
input {
|
||||
&[type='checkbox'] {
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
&[type='radio'] {
|
||||
margin-top: 2px;
|
||||
}
|
||||
|
||||
&.paginate-channel {
|
||||
width: 35px;
|
||||
}
|
||||
|
||||
&.input--thumbnail {
|
||||
width: 400px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.form-field__help,
|
||||
|
|
@ -91,8 +91,8 @@
|
|||
font-family: 'metropolis-medium';
|
||||
}
|
||||
|
||||
.form-field__label {
|
||||
color: rgba($lbry-black, 0.5);
|
||||
.form-field__error {
|
||||
color: $lbry-red-5;
|
||||
}
|
||||
|
||||
.form-field__help {
|
||||
|
|
@ -100,21 +100,21 @@
|
|||
padding-top: $spacing-vertical * 1/3;
|
||||
}
|
||||
|
||||
.form-field__error {
|
||||
color: $lbry-red-5;
|
||||
.form-field__label {
|
||||
color: rgba($lbry-black, 0.5);
|
||||
}
|
||||
|
||||
.form-field__prefix,
|
||||
.form-field__postfix {
|
||||
font-family: 'metropolis-medium';
|
||||
|
||||
&.form-field--fix-no-height {
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
&.form-field--align-center {
|
||||
align-self: center;
|
||||
}
|
||||
|
||||
&.form-field--fix-no-height {
|
||||
line-height: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.form-field__prefix {
|
||||
|
|
@ -126,12 +126,12 @@
|
|||
}
|
||||
|
||||
.form-field__select {
|
||||
min-width: 60px;
|
||||
height: 30px;
|
||||
border-radius: 8px;
|
||||
background-color: $lbry-gray-3;
|
||||
font: normal 12px/30px 'metropolis-medium';
|
||||
border-radius: 8px;
|
||||
color: $lbry-black;
|
||||
font: normal 12px/30px 'metropolis-medium';
|
||||
height: 30px;
|
||||
min-width: 60px;
|
||||
|
||||
&:disabled {
|
||||
opacity: 0.5;
|
||||
|
|
|
|||
|
|
@ -1,23 +1,28 @@
|
|||
.header {
|
||||
position: fixed;
|
||||
height: var(--header-height);
|
||||
width: 100%;
|
||||
display: flex;
|
||||
z-index: 1;
|
||||
justify-content: space-between;
|
||||
height: var(--header-height);
|
||||
|
||||
align-items: center;
|
||||
padding: 0 $spacing-width * 1/3;
|
||||
background-color: $lbry-white;
|
||||
// box-shadow: var(--box-shadow-header);
|
||||
box-shadow: 0 1px 5px rgba($lbry-black, 0.1);
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 0 $spacing-width * 1/3;
|
||||
position: fixed;
|
||||
z-index: 1;
|
||||
|
||||
@media (min-width: $medium-breakpoint) {
|
||||
padding: 0 $spacing-width;
|
||||
}
|
||||
}
|
||||
|
||||
.header__navigation {
|
||||
.header__actions-right {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-left: auto;
|
||||
|
||||
.btn {
|
||||
margin-left: $spacing-width * 1/3;
|
||||
}
|
||||
}
|
||||
|
||||
.header__history {
|
||||
|
|
@ -31,11 +36,7 @@
|
|||
}
|
||||
}
|
||||
|
||||
.header__actions-right {
|
||||
margin-left: auto;
|
||||
.header__navigation {
|
||||
display: flex;
|
||||
|
||||
.btn {
|
||||
margin-left: $spacing-width * 1/3;
|
||||
}
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -4,8 +4,8 @@
|
|||
}
|
||||
|
||||
.item-list__item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
display: flex;
|
||||
padding: $spacing-vertical * 1/3;
|
||||
|
||||
input,
|
||||
|
|
@ -14,13 +14,13 @@
|
|||
}
|
||||
}
|
||||
|
||||
.item-list__item--cutoff {
|
||||
max-width: 350px;
|
||||
overflow-x: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.item-list__item--selected {
|
||||
background-color: $lbry-gray-1;
|
||||
}
|
||||
|
||||
.item-list__item--cutoff {
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
overflow-x: hidden;
|
||||
max-width: 350px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,12 +1,13 @@
|
|||
.load-screen {
|
||||
color: white;
|
||||
background: $lbry-teal-3;
|
||||
background-size: cover;
|
||||
min-height: 100vh;
|
||||
min-width: 100vw;
|
||||
min-height: 100vh;
|
||||
|
||||
align-items: center;
|
||||
background-color: $lbry-teal-3;
|
||||
background-size: cover;
|
||||
color: $lbry-white;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
|
|
@ -38,6 +39,6 @@
|
|||
font-family: 12px 'metropolis-medium';
|
||||
font-size: 12px;
|
||||
line-height: 1;
|
||||
padding-top: $spacing-vertical * 2/3;
|
||||
max-width: 400px;
|
||||
padding-top: $spacing-vertical * 2/3;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
.CodeMirror {
|
||||
border: 0;
|
||||
border: none;
|
||||
border-radius: 0;
|
||||
background: $lbry-white;
|
||||
color: $lbry-black;
|
||||
|
|
@ -37,11 +37,10 @@
|
|||
}
|
||||
|
||||
.editor-toolbar {
|
||||
opacity: 1; // ?
|
||||
border: 0;
|
||||
background-color: $lbry-gray-1;
|
||||
border: none;
|
||||
border-radius: 0;
|
||||
// box-shadow: var(--box-shadow-layer);
|
||||
opacity: 1; // ?
|
||||
|
||||
&:hover {
|
||||
opacity: 1; // ?
|
||||
|
|
@ -80,14 +79,14 @@
|
|||
}
|
||||
|
||||
i.separator {
|
||||
border: 0;
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
|
||||
.editor-preview {
|
||||
font-size: calc(var(--font-size-subtext-multiple) * 1em);
|
||||
background-color: rgba($lbry-gray-1, 0.5);
|
||||
border: 0;
|
||||
border: none;
|
||||
font-size: calc(var(--font-size-subtext-multiple) * 1em);
|
||||
}
|
||||
|
||||
.editor-statusbar {
|
||||
|
|
|
|||
|
|
@ -33,8 +33,8 @@
|
|||
}
|
||||
|
||||
h6 {
|
||||
font-size: 0.84em;
|
||||
color: $lbry-gray-5;
|
||||
font-size: 0.84em;
|
||||
}
|
||||
|
||||
// Paragraphs
|
||||
|
|
@ -49,8 +49,8 @@
|
|||
|
||||
// Tables
|
||||
table {
|
||||
padding: 8px;
|
||||
margin: 16px 0;
|
||||
padding: 8px;
|
||||
background-color: $lbry-white;
|
||||
|
||||
tr {
|
||||
|
|
@ -77,19 +77,20 @@
|
|||
|
||||
// Code
|
||||
code {
|
||||
display: block;
|
||||
padding: 8px;
|
||||
margin: 16px 0;
|
||||
padding: 8px;
|
||||
|
||||
background-color: $lbry-gray-1;
|
||||
color: $lbry-gray-5;
|
||||
font-size: 1em;
|
||||
display: block;
|
||||
font-family: Consolas, 'Lucida Console', 'Source Sans', monospace;
|
||||
font-size: 1em;
|
||||
}
|
||||
|
||||
a {
|
||||
font-size: 1em;
|
||||
color: $lbry-blue-1;
|
||||
display: inline-block;
|
||||
font-size: 1em;
|
||||
}
|
||||
|
||||
// Lists
|
||||
|
|
@ -108,6 +109,7 @@
|
|||
|
||||
li {
|
||||
margin-left: 2em;
|
||||
|
||||
p {
|
||||
display: inline-block;
|
||||
}
|
||||
|
|
@ -115,9 +117,10 @@
|
|||
}
|
||||
|
||||
blockquote {
|
||||
padding: 8px;
|
||||
margin: 16px 0;
|
||||
padding: 8px;
|
||||
|
||||
background-color: $lbry-gray-1;
|
||||
color: $lbry-gray-5;
|
||||
border-left: 2px solid $lbry-gray-5;
|
||||
background-color: $lbry-gray-1;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,24 +1,15 @@
|
|||
// $border-radius-menu: 2px; // unused
|
||||
|
||||
.menu-container {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.menu {
|
||||
padding-top: ($spacing-vertical / 5) 0;
|
||||
position: absolute;
|
||||
white-space: nowrap;
|
||||
// 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); // "--menu-item-hover-bg" does not exist
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,15 +1,15 @@
|
|||
.modal-overlay,
|
||||
.error-modal-overlay {
|
||||
position: fixed;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
|
||||
align-items: center;
|
||||
background-color: rgba($lbry-white, 0.7);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
position: fixed;
|
||||
z-index: 9999;
|
||||
}
|
||||
|
||||
|
|
@ -18,33 +18,32 @@
|
|||
}
|
||||
|
||||
.modal {
|
||||
background-color: rgba($lbry-gray-1, 0.5);
|
||||
border: 1px solid $lbry-gray-1;
|
||||
border-radius: 4px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
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);
|
||||
max-width: var(--modal-width);
|
||||
overflow: auto;
|
||||
padding: $spacing-vertical;
|
||||
word-break: break-word;
|
||||
|
||||
.btn.btn--alt {
|
||||
// Set modal buttons bg color
|
||||
background-color: $lbry-white;
|
||||
background-color: $lbry-white; // Set modal buttons bg color
|
||||
}
|
||||
}
|
||||
|
||||
.modal--fullscreen {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
|
||||
background-color: rgba($lbry-gray-1, 0.5);
|
||||
padding: $spacing-vertical;
|
||||
background: rgba($lbry-gray-1, 0.5);
|
||||
overflow-y: scroll;
|
||||
position: absolute;
|
||||
|
||||
.main {
|
||||
// I will come back to these when I do media queries
|
||||
|
|
@ -54,11 +53,11 @@
|
|||
}
|
||||
|
||||
// For slide down animation on the search modal
|
||||
// Slide down isn't possible without doing a lot of re-work to the modal component
|
||||
// Slide down isn"t possible without doing a lot of re-work to the modal component
|
||||
.ReactModal__Overlay {
|
||||
.modal--fullscreen {
|
||||
transition: height var(--animation-duration) var(--animation-style);
|
||||
height: 0;
|
||||
transition: height var(--animation-duration) var(--animation-style);
|
||||
}
|
||||
|
||||
&--after-open {
|
||||
|
|
@ -87,13 +86,13 @@
|
|||
margin: 0 $spacing-vertical * 1/3;
|
||||
|
||||
&.btn--link {
|
||||
// So the text isn't bigger than the text inside the button
|
||||
// So the text isn"t bigger than the text inside the button
|
||||
font-size: 0.8em;
|
||||
}
|
||||
}
|
||||
|
||||
.error-modal-overlay {
|
||||
background: rgba($lbry-white, 0.7);
|
||||
background-color: rgba($lbry-white, 0.7);
|
||||
}
|
||||
|
||||
.error-modal__content {
|
||||
|
|
@ -102,8 +101,8 @@
|
|||
}
|
||||
|
||||
.error-modal__warning-symbol {
|
||||
margin-top: -5px;
|
||||
height: 28px;
|
||||
margin-top: -5px;
|
||||
}
|
||||
|
||||
.download-started-modal__file-path {
|
||||
|
|
@ -116,13 +115,14 @@
|
|||
}
|
||||
|
||||
.error-modal__error-list {
|
||||
max-width: var(--modal-width);
|
||||
max-height: 400px;
|
||||
margin-top: $spacing-vertical * 1/3;
|
||||
padding: $spacing-vertical * 1/3;
|
||||
list-style: none;
|
||||
max-height: 400px;
|
||||
max-width: var(--modal-width);
|
||||
overflow-y: scroll;
|
||||
color: $lbry-red-5;
|
||||
|
||||
background-color: $lbry-red-1;
|
||||
border-left: 2px solid $lbry-red-5;
|
||||
color: $lbry-red-5;
|
||||
list-style: none;
|
||||
overflow-y: scroll;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,14 +1,13 @@
|
|||
.nav {
|
||||
min-width: var(--side-nav-width);
|
||||
background-color: rgba($lbry-gray-1, 0.7);
|
||||
padding: $spacing-width * 1/3;
|
||||
color: $lbry-gray-5;
|
||||
min-width: var(--side-nav-width);
|
||||
padding: $spacing-width * 1/3;
|
||||
|
||||
hr {
|
||||
width: 24px;
|
||||
margin: 36px 0;
|
||||
border: solid 1px $lbry-gray-2;
|
||||
margin: $spacing-vertical $spacing-vertical * 2/3;
|
||||
width: 24px;
|
||||
}
|
||||
|
||||
@media (min-width: $medium-breakpoint) {
|
||||
|
|
@ -27,7 +26,6 @@
|
|||
}
|
||||
|
||||
.nav__link {
|
||||
// padding-top: $spacing-vertical / 3;
|
||||
color: inherit;
|
||||
white-space: nowrap;
|
||||
|
||||
|
|
@ -38,6 +36,10 @@
|
|||
.btn {
|
||||
font: normal 400 16px/36px 'metropolis-semibold';
|
||||
|
||||
&:hover {
|
||||
color: $lbry-black;
|
||||
}
|
||||
|
||||
@media only screen and (min-width: $medium-breakpoint) {
|
||||
font: normal 400 18px/40px 'metropolis-semibold';
|
||||
}
|
||||
|
|
@ -46,10 +48,6 @@
|
|||
font: normal 400 21px/50px 'metropolis-semibold';
|
||||
}
|
||||
}
|
||||
|
||||
.btn:hover {
|
||||
color: $lbry-black;
|
||||
}
|
||||
}
|
||||
|
||||
.nav__link--sub {
|
||||
|
|
@ -79,7 +77,7 @@
|
|||
}
|
||||
|
||||
// Sub links animations
|
||||
// The -appear, -leave classes are added by 'react-transition-group'
|
||||
// The -appear, -leave classes are added by "react-transition-group"
|
||||
.nav__sub-appear,
|
||||
.nav__sub-leave {
|
||||
max-height: 0;
|
||||
|
|
|
|||
|
|
@ -1,16 +1,14 @@
|
|||
.notice {
|
||||
padding: 10px 20px;
|
||||
border: 1px solid $lbry-black;
|
||||
text-shadow: 0 1px 0 rgba($lbry-white, 0.5);
|
||||
border-radius: 5px;
|
||||
|
||||
color: $lbry-green-3;
|
||||
background-color: $lbry-green-1;
|
||||
border-color: $lbry-green-2;
|
||||
border: 1px solid $lbry-green-2;
|
||||
border-radius: 5px;
|
||||
color: $lbry-green-3;
|
||||
padding: 10px 20px;
|
||||
text-shadow: 0 1px 0 rgba($lbry-white, 0.5);
|
||||
}
|
||||
|
||||
.notice--error {
|
||||
color: $lbry-red-3;
|
||||
background-color: $lbry-red-1;
|
||||
border-color: $lbry-red-2;
|
||||
color: $lbry-red-3;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -13,10 +13,10 @@
|
|||
}
|
||||
|
||||
.pagination__item {
|
||||
display: inline-block;
|
||||
line-height: $spacing-vertical * 1.5;
|
||||
height: $spacing-vertical * 1.5;
|
||||
border-radius: 2px;
|
||||
display: inline-block;
|
||||
height: $spacing-vertical * 1.5;
|
||||
line-height: $spacing-vertical * 1.5;
|
||||
|
||||
&:not(.pagination__item--selected):not(.pagination__item--break):not(.disabled):hover {
|
||||
background: rgba($lbry-black, 0.2);
|
||||
|
|
@ -39,6 +39,6 @@
|
|||
}
|
||||
|
||||
.pagination__item--selected {
|
||||
color: white;
|
||||
background: $lbry-teal-3;
|
||||
background-color: $lbry-teal-3;
|
||||
color: $lbry-white;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,3 +1,32 @@
|
|||
.card--placeholder {
|
||||
animation: pulse 2s infinite ease-in-out;
|
||||
background-color: $lbry-gray-3;
|
||||
}
|
||||
|
||||
.placeholder__channel {
|
||||
width: 70%;
|
||||
height: 1em;
|
||||
margin-top: $spacing-vertical * 1/3;
|
||||
}
|
||||
|
||||
.placeholder__date {
|
||||
width: 50%;
|
||||
height: 1em;
|
||||
margin-top: $spacing-vertical * 1/3;
|
||||
}
|
||||
|
||||
// Individual items we need a placeholder for
|
||||
// FileCard
|
||||
.placeholder__title {
|
||||
height: 3em;
|
||||
margin-top: $spacing-vertical * 1/3;
|
||||
}
|
||||
|
||||
// FileTile
|
||||
.placeholder__title--tile {
|
||||
height: 3em;
|
||||
}
|
||||
|
||||
@keyframes pulse {
|
||||
0% {
|
||||
opacity: 1;
|
||||
|
|
@ -11,32 +40,3 @@
|
|||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.card--placeholder {
|
||||
animation: pulse 2s infinite ease-in-out;
|
||||
background-color: $lbry-gray-3;
|
||||
}
|
||||
|
||||
// Individual items we need a placeholder for
|
||||
// FileCard
|
||||
.placeholder__title {
|
||||
margin-top: $spacing-vertical * 1/3;
|
||||
height: 3em;
|
||||
}
|
||||
|
||||
.placeholder__channel {
|
||||
margin-top: $spacing-vertical * 1/3;
|
||||
height: 1em;
|
||||
width: 70%;
|
||||
}
|
||||
|
||||
.placeholder__date {
|
||||
height: 1em;
|
||||
margin-top: $spacing-vertical * 1/3;
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
// FileTile
|
||||
.placeholder__title--tile {
|
||||
height: 3em;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,58 +1,59 @@
|
|||
.wunderbar {
|
||||
z-index: 1;
|
||||
flex: 1;
|
||||
display: flex;
|
||||
min-width: 175px;
|
||||
cursor: text;
|
||||
display: flex;
|
||||
flex: 1;
|
||||
min-width: 175px;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
|
||||
> .icon {
|
||||
position: absolute;
|
||||
left: 10px;
|
||||
top: 10px;
|
||||
left: 10px;
|
||||
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.wunderbar__active-suggestion {
|
||||
background-color: $lbry-blue-2;
|
||||
color: $lbry-black;
|
||||
}
|
||||
|
||||
.wunderbar__input {
|
||||
height: var(--btn-height);
|
||||
// border-radius: var(--btn-radius);
|
||||
width: 100%;
|
||||
color: $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;
|
||||
display: flex;
|
||||
height: var(--btn-height);
|
||||
|
||||
align-items: center;
|
||||
background-color: rgba($lbry-gray-1, 0.3);
|
||||
border-bottom: none; // ?
|
||||
color: $lbry-gray-5;
|
||||
display: flex;
|
||||
font-size: 13px;
|
||||
justify-content: center;
|
||||
border-bottom: none;
|
||||
padding: 10px 10px 10px 30px;
|
||||
|
||||
&:focus {
|
||||
background-color: rgba($lbry-gray-1, 0.5);
|
||||
// border-radius: 0;
|
||||
// border-bottom: 1px solid $lbry-gray-2;
|
||||
// box-shadow: var(--box-shadow-button);
|
||||
}
|
||||
}
|
||||
|
||||
.wunderbar__menu {
|
||||
background-color: transparent; // !important
|
||||
border-radius: 0 0 3px 3px; // !important
|
||||
max-width: 100px;
|
||||
border-radius: 0 0 3px 3px !important;
|
||||
padding: 0 !important;
|
||||
background: transparent !important;
|
||||
overflow-x: hidden;
|
||||
padding: 0; // !important
|
||||
}
|
||||
|
||||
.wunderbar__suggestion {
|
||||
padding: 5px 10px;
|
||||
align-items: center;
|
||||
background-color: $lbry-gray-5;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-items: flex-start;
|
||||
align-items: center;
|
||||
padding: 5px 10px;
|
||||
|
||||
&:not(:first-of-type) {
|
||||
border-top: 1px solid transparent;
|
||||
|
|
@ -71,20 +72,10 @@
|
|||
}
|
||||
|
||||
.wunderbar__suggestion-label--action {
|
||||
margin-left: $spacing-vertical * 1/3;
|
||||
white-space: nowrap;
|
||||
font-size: 12px;
|
||||
line-height: 0.1; // to vertically align because the font size is smaller
|
||||
}
|
||||
|
||||
.wunderbar__active-suggestion {
|
||||
color: $lbry-black;
|
||||
background-color: $lbry-blue-2;
|
||||
}
|
||||
|
||||
.search__top {
|
||||
padding: 0 $spacing-width $spacing-width;
|
||||
background-color: $lbry-gray-2;
|
||||
margin-left: $spacing-vertical * 1/3;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.search__content {
|
||||
|
|
@ -104,3 +95,8 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
.search__top {
|
||||
background-color: $lbry-gray-2;
|
||||
padding: 0 $spacing-width $spacing-width;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,22 +1,22 @@
|
|||
.snack-bar {
|
||||
bottom: $spacing-vertical;
|
||||
left: $spacing-vertical;
|
||||
|
||||
background-color: $lbry-teal-3;
|
||||
border-radius: 10px;
|
||||
// box-shadow: var(--box-shadow-layer);
|
||||
color: $lbry-white;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
margin-left: auto;
|
||||
max-width: var(--snack-bar-width);
|
||||
min-width: 300px;
|
||||
opacity: 0.95;
|
||||
padding: 14px 20px 10px 20px;
|
||||
position: fixed;
|
||||
left: $spacing-vertical;
|
||||
bottom: $spacing-vertical;
|
||||
transition: all var(--transition-duration) var(--transition-type);
|
||||
width: 100%;
|
||||
z-index: 10000; /*hack to get it over react modal */
|
||||
z-index: 10000; // hack to get it over react modal
|
||||
}
|
||||
|
||||
.snack-bar__action {
|
||||
|
|
|
|||
|
|
@ -1,16 +1,18 @@
|
|||
.spinner {
|
||||
margin: $spacing-vertical * 1/3;
|
||||
width: 50px;
|
||||
height: 40px;
|
||||
text-align: center;
|
||||
|
||||
font-size: 10px;
|
||||
margin: $spacing-vertical * 1/3;
|
||||
text-align: center;
|
||||
|
||||
.rect {
|
||||
display: inline-block;
|
||||
height: 100%;
|
||||
width: 6px;
|
||||
margin: 0 2px;
|
||||
height: 100%;
|
||||
|
||||
animation: sk-stretchdelay 1.2s infinite ease-in-out;
|
||||
display: inline-block;
|
||||
margin: 0 2px;
|
||||
|
||||
&.rect2 {
|
||||
animation-delay: -1.1s;
|
||||
|
|
@ -51,15 +53,16 @@
|
|||
}
|
||||
|
||||
.spinner--small {
|
||||
margin: $spacing-vertical * 1/3 0;
|
||||
width: 40px;
|
||||
height: 32px;
|
||||
text-align: center;
|
||||
|
||||
font-size: 10px;
|
||||
margin: $spacing-vertical * 1/3 0;
|
||||
text-align: center;
|
||||
|
||||
.rect {
|
||||
height: 100%;
|
||||
width: 3px;
|
||||
height: 100%;
|
||||
margin: 0 2px;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,8 +1,8 @@
|
|||
table.table,
|
||||
.markdown-preview table {
|
||||
word-wrap: break-word;
|
||||
max-width: 100%;
|
||||
text-align: left;
|
||||
word-wrap: break-word;
|
||||
|
||||
tr {
|
||||
td:first-of-type,
|
||||
|
|
@ -22,14 +22,14 @@ table.table,
|
|||
}
|
||||
|
||||
th {
|
||||
border: none;
|
||||
font-family: 'metropolis-semibold';
|
||||
border: 0;
|
||||
padding: $spacing-vertical * 2/3 $spacing-vertical * 1/3;
|
||||
}
|
||||
|
||||
td {
|
||||
font-family: 'metropolis-medium';
|
||||
color: $lbry-gray-5;
|
||||
font-family: 'metropolis-medium';
|
||||
padding: $spacing-vertical * 1/6 $spacing-vertical * 1/3;
|
||||
|
||||
.btn:not(.btn--link) {
|
||||
|
|
@ -47,8 +47,8 @@ table.table,
|
|||
}
|
||||
|
||||
thead {
|
||||
color: $lbry-black;
|
||||
border-bottom: 1px solid $lbry-gray-1;
|
||||
color: $lbry-black;
|
||||
}
|
||||
|
||||
tbody {
|
||||
|
|
@ -84,12 +84,11 @@ table {
|
|||
}
|
||||
|
||||
td:nth-of-type(2) {
|
||||
// Tourniquets text over 20vw
|
||||
max-width: 20vw;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
color: $lbry-gray-5;
|
||||
max-width: 20vw; // Tourniquets text over 20vw
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,15 +1,15 @@
|
|||
// Taken from react-toggle/style.css
|
||||
// Edited to add the teal color, nothing else
|
||||
.react-toggle {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
background-color: transparent;
|
||||
border: 0;
|
||||
padding: 0;
|
||||
user-select: none;
|
||||
margin-bottom: auto;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
display: inline-block;
|
||||
margin-top: 2px;
|
||||
margin-bottom: auto;
|
||||
padding: 0;
|
||||
position: relative;
|
||||
user-select: none;
|
||||
|
||||
&:hover {
|
||||
&:not(.react-toggle--disabled) {
|
||||
|
|
@ -43,8 +43,8 @@
|
|||
}
|
||||
|
||||
.react-toggle-thumb {
|
||||
left: 22px;
|
||||
border-color: $lbry-teal-3;
|
||||
left: 22px;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -55,63 +55,67 @@
|
|||
}
|
||||
|
||||
.react-toggle-screenreader-only {
|
||||
border: 0;
|
||||
clip: rect(0 0 0 0);
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
margin: -1px;
|
||||
overflow: hidden;
|
||||
padding: 0;
|
||||
|
||||
border: none;
|
||||
clip: rect(0 0 0 0);
|
||||
overflow: hidden;
|
||||
position: absolute;
|
||||
width: 1px;
|
||||
}
|
||||
|
||||
.react-toggle-thumb {
|
||||
transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1) 0ms;
|
||||
position: absolute;
|
||||
top: 1px;
|
||||
left: 1px;
|
||||
width: 17px;
|
||||
height: 17px;
|
||||
top: 1px;
|
||||
left: 1px;
|
||||
|
||||
background-color: $lbry-gray-1;
|
||||
border: 1px solid $lbry-gray-5;
|
||||
border-radius: 50%;
|
||||
background-color: $lbry-gray-1;
|
||||
box-sizing: border-box;
|
||||
position: absolute;
|
||||
transition: all 0.25s ease;
|
||||
}
|
||||
|
||||
.react-toggle-track {
|
||||
width: 40px;
|
||||
height: 19px;
|
||||
padding: 0;
|
||||
border-radius: 30px;
|
||||
|
||||
background-color: $lbry-gray-5;
|
||||
border-radius: 30px;
|
||||
padding: 0;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.react-toggle-track-check {
|
||||
position: absolute;
|
||||
width: 14px;
|
||||
height: 10px;
|
||||
top: 0;
|
||||
left: 6px;
|
||||
bottom: 0;
|
||||
|
||||
line-height: 0;
|
||||
margin-top: auto;
|
||||
margin-bottom: auto;
|
||||
line-height: 0;
|
||||
left: 6px;
|
||||
opacity: 0;
|
||||
position: absolute;
|
||||
transition: opacity 0.25s ease;
|
||||
}
|
||||
|
||||
.react-toggle-track-x {
|
||||
position: absolute;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
right: 10px;
|
||||
|
||||
margin-top: auto;
|
||||
margin-bottom: auto;
|
||||
line-height: 0;
|
||||
right: 10px;
|
||||
opacity: 1;
|
||||
position: absolute;
|
||||
transition: opacity 0.25s ease;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,10 +1,60 @@
|
|||
.tooltip {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
|
||||
&:not(:hover) {
|
||||
.tooltip__body {
|
||||
visibility: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
.tooltip__body {
|
||||
visibility: visible;
|
||||
}
|
||||
}
|
||||
|
||||
&.tooltip--on-component {
|
||||
.tooltip__body {
|
||||
margin-top: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.tooltip__body {
|
||||
background-color: $lbry-gray-5;
|
||||
border-radius: 8px;
|
||||
color: $lbry-white;
|
||||
font-family: 'metropolis-medium';
|
||||
font-size: 12px;
|
||||
padding: $spacing-vertical * 1/3;
|
||||
position: absolute;
|
||||
text-align: center;
|
||||
white-space: pre-wrap;
|
||||
width: 200px;
|
||||
z-index: 1;
|
||||
|
||||
&::after {
|
||||
width: 0;
|
||||
height: 0;
|
||||
|
||||
border-style: solid;
|
||||
border-width: 5px;
|
||||
content: ' ';
|
||||
position: absolute;
|
||||
}
|
||||
}
|
||||
|
||||
.tooltip__body--short {
|
||||
width: 130px;
|
||||
}
|
||||
}
|
||||
|
||||
.tooltip--icon {
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
// When there is a label for the tooltip and not just using a button or icon
|
||||
.tooltip--label {
|
||||
// When there is a label for the tooltip and not just using a button or icon
|
||||
font-size: 14px;
|
||||
padding-left: $spacing-vertical * 1/3;
|
||||
|
||||
|
|
@ -13,96 +63,21 @@
|
|||
}
|
||||
}
|
||||
|
||||
.tooltip--icon {
|
||||
margin-top: 5px;
|
||||
}
|
||||
.tooltip--bottom .tooltip__body {
|
||||
top: 90%;
|
||||
left: 50%;
|
||||
margin-left: -100px;
|
||||
|
||||
/* Tooltip text */
|
||||
.tooltip {
|
||||
.tooltip__body {
|
||||
background-color: $lbry-gray-5;
|
||||
font-family: 'metropolis-medium';
|
||||
font-size: 12px;
|
||||
color: $lbry-white;
|
||||
border-radius: 8px;
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
width: 200px;
|
||||
text-align: center;
|
||||
white-space: pre-wrap;
|
||||
padding: $spacing-vertical * 1/3;
|
||||
visibility: hidden;
|
||||
&.tooltip__body--short {
|
||||
margin-left: -65px;
|
||||
}
|
||||
|
||||
.tooltip__body--short {
|
||||
width: 130px;
|
||||
}
|
||||
|
||||
.tooltip__body::after {
|
||||
content: ' ';
|
||||
width: 0;
|
||||
height: 0;
|
||||
position: absolute;
|
||||
border-width: 5px;
|
||||
border-style: solid;
|
||||
}
|
||||
|
||||
&.tooltip--on-component {
|
||||
.tooltip__body {
|
||||
margin-top: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.tooltip--top {
|
||||
.tooltip__body {
|
||||
&::after {
|
||||
bottom: 100%;
|
||||
left: 50%;
|
||||
margin-left: -100px;
|
||||
|
||||
&.tooltip__body--short {
|
||||
margin-left: -65px;
|
||||
}
|
||||
|
||||
&::after {
|
||||
top: 100%;
|
||||
left: 50%;
|
||||
margin-left: -5px;
|
||||
border-color: $lbry-gray-5 transparent transparent transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.tooltip--right {
|
||||
.tooltip__body {
|
||||
margin-top: -30px;
|
||||
margin-left: 110%;
|
||||
|
||||
&::after {
|
||||
top: 17px;
|
||||
right: 100%; /* To the left of the tooltip */
|
||||
margin-top: -5px;
|
||||
border-color: transparent $lbry-gray-5 transparent transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.tooltip--bottom {
|
||||
.tooltip__body {
|
||||
top: 90%;
|
||||
left: 50%;
|
||||
margin-left: -100px;
|
||||
|
||||
&.tooltip__body--short {
|
||||
margin-left: -65px;
|
||||
}
|
||||
|
||||
&::after {
|
||||
bottom: 100%;
|
||||
left: 50%;
|
||||
margin-left: -5px;
|
||||
border-color: transparent transparent $lbry-gray-5 transparent;
|
||||
}
|
||||
border-color: transparent transparent $lbry-gray-5 transparent;
|
||||
margin-left: -5px;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -113,11 +88,39 @@
|
|||
&::after {
|
||||
top: 17px;
|
||||
left: 100%;
|
||||
margin-top: -5px;
|
||||
|
||||
border-color: transparent transparent transparent $lbry-gray-5;
|
||||
margin-top: -5px;
|
||||
}
|
||||
}
|
||||
|
||||
.tooltip:hover .tooltip__body {
|
||||
visibility: visible;
|
||||
.tooltip--right .tooltip__body {
|
||||
margin-top: -30px;
|
||||
margin-left: 110%;
|
||||
|
||||
&::after {
|
||||
top: 17px;
|
||||
right: 100%; // To the left of the tooltip
|
||||
|
||||
border-color: transparent $lbry-gray-5 transparent transparent;
|
||||
margin-top: -5px;
|
||||
}
|
||||
}
|
||||
|
||||
.tooltip--top .tooltip__body {
|
||||
bottom: 100%;
|
||||
left: 50%;
|
||||
margin-left: -100px;
|
||||
|
||||
&.tooltip__body--short {
|
||||
margin-left: -65px;
|
||||
}
|
||||
|
||||
&::after {
|
||||
top: 100%;
|
||||
left: 50%;
|
||||
|
||||
border-color: $lbry-gray-5 transparent transparent transparent;
|
||||
margin-left: -5px;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue