bring in styles from @lbry/components
This commit is contained in:
Sean Yesmunt
parent
2f5beb84fa
commit
a54790ec64
12 changed files with 1064 additions and 19 deletions
|
|
@ -71,7 +71,6 @@
|
|||
"@datapunt/matomo-tracker-js": "^0.1.4",
|
||||
"@exponent/electron-cookies": "^2.0.0",
|
||||
"@hot-loader/react-dom": "^16.8",
|
||||
"@lbry/components": "^4.2.5",
|
||||
"@reach/menu-button": "0.7.4",
|
||||
"@reach/rect": "^0.2.1",
|
||||
"@reach/tabs": "^0.1.5",
|
||||
|
|
|
|||
|
|
@ -1,13 +1,15 @@
|
|||
@charset "utf-8";
|
||||
|
||||
@import '@lbry/components/sass/index.scss';
|
||||
@import 'themes/light.scss';
|
||||
@import 'themes/dark.scss';
|
||||
@import 'init/reset';
|
||||
@import 'init/vars';
|
||||
@import 'init/mixins';
|
||||
@import 'init/gui';
|
||||
@import 'init/color';
|
||||
@import 'themes/light.scss';
|
||||
@import 'themes/dark.scss';
|
||||
@import 'component/ads';
|
||||
@import 'component/animation';
|
||||
@import 'component/badge';
|
||||
@import 'component/button';
|
||||
@import 'component/card';
|
||||
@import 'component/channel';
|
||||
|
|
|
|||
46
ui/scss/component/_badge.scss
Normal file
46
ui/scss/component/_badge.scss
Normal file
|
|
@ -0,0 +1,46 @@
|
|||
.badge {
|
||||
height: var(--height-badge);
|
||||
border-radius: var(--border-radius);
|
||||
font-size: var(--font-small);
|
||||
padding: var(--spacing-xs) var(--spacing-xs);
|
||||
white-space: nowrap;
|
||||
user-select: none;
|
||||
cursor: pointer;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.badge--tag {
|
||||
@extend .badge;
|
||||
background-color: var(--color-tag-bg);
|
||||
color: var(--color-tag);
|
||||
|
||||
&:hover {
|
||||
background-color: var(--color-tag-bg-hover);
|
||||
color: var(--color-tag-hover);
|
||||
}
|
||||
}
|
||||
|
||||
.badge--tag-mature {
|
||||
@extend .badge;
|
||||
background-color: var(--color-tertiary-alt);
|
||||
color: var(--color-tertiary);
|
||||
}
|
||||
|
||||
.badge--cost {
|
||||
@extend .badge;
|
||||
background-color: var(--color-cost);
|
||||
color: var(--color-black);
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.badge--free {
|
||||
@extend .badge;
|
||||
background-color: var(--color-secondary-alt);
|
||||
color: var(--color-secondary);
|
||||
}
|
||||
|
||||
.badge--alert {
|
||||
@extend .badge;
|
||||
background-color: var(--color-danger-alt);
|
||||
color: var(--color-danger);
|
||||
}
|
||||
|
|
@ -1,21 +1,106 @@
|
|||
.button--primary,
|
||||
.button--secondary,
|
||||
.button--alt {
|
||||
@media (max-width: $breakpoint-small) {
|
||||
font-size: var(--font-small);
|
||||
}
|
||||
.button {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
white-space: nowrap;
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.button--primary,
|
||||
.button--secondary,
|
||||
.button--alt,
|
||||
.button--link {
|
||||
border-radius: var(--border-radius);
|
||||
|
||||
&:focus {
|
||||
@include focus;
|
||||
z-index: 2; // Ensure focus box-shadow is always visible on every button side
|
||||
}
|
||||
}
|
||||
|
||||
.button--primary,
|
||||
.button--secondary,
|
||||
.button--alt {
|
||||
height: var(--height-button);
|
||||
border-radius: var(--border-radius);
|
||||
padding: var(--spacing-s) var(--spacing-m);
|
||||
line-height: 1.2;
|
||||
font-weight: var(--font-weight-bold);
|
||||
|
||||
@media (max-width: $breakpoint-small) {
|
||||
font-size: var(--font-small);
|
||||
}
|
||||
}
|
||||
|
||||
.button--primary {
|
||||
background-color: var(--color-button-primary-bg);
|
||||
color: var(--color-button-primary-text);
|
||||
|
||||
&:hover {
|
||||
color: var(--color-button-primary-hover-text);
|
||||
background-color: var(--color-button-primary-bg-hover);
|
||||
}
|
||||
}
|
||||
|
||||
.button--secondary {
|
||||
background-color: var(--color-button-secondary-bg);
|
||||
color: var(--color-button-secondary-text);
|
||||
|
||||
&:hover {
|
||||
background-color: var(--color-button-secondary-bg-hover);
|
||||
}
|
||||
}
|
||||
|
||||
.button--alt {
|
||||
background-color: var(--color-button-alt-bg);
|
||||
color: var(--color-button-alt-text);
|
||||
|
||||
&:hover {
|
||||
background-color: var(--color-button-alt-bg-hover);
|
||||
}
|
||||
}
|
||||
|
||||
.button--icon {
|
||||
width: 5rem;
|
||||
height: 5rem;
|
||||
background-repeat: no-repeat;
|
||||
background-size: 50%;
|
||||
border-radius: 50%;
|
||||
transition: background-color 0.2s;
|
||||
background-color: var(--color-primary);
|
||||
|
||||
&:hover {
|
||||
background-color: var(--color-button-primary-bg-hover);
|
||||
}
|
||||
|
||||
&.button--play {
|
||||
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E %3Cg stroke='white' stroke-width='2' fill='white' fill-rule='evenodd' stroke-linejoin='round'%3E %3Cpolygon points='5 21 5 3 21 12'/%3E %3C/g%3E %3C/svg%3E");
|
||||
background-position: calc(50% + 0.1rem) center;
|
||||
}
|
||||
|
||||
&.button--view {
|
||||
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E %3Cg stroke='white' stroke-width='2' fill='none' fill-rule='evenodd'%3E %3Cpath d='M2, 12 C2, 12 5, 5 12, 5 C19, 5 22, 12 22, 12 C22, 12 19, 19 12, 19 C5, 19 2, 12 2, 12 Z' stroke-linejoin='round'/%3E %3Ccircle cx='12' cy='12' r='3'/%3E %3Cpath d='M12, 5 L12, 3' stroke-linecap='round'/%3E %3Cpath d='M18, 6.5 L19, 5' stroke-linecap='round'/%3E %3Cpath d='M21, 10 L22.5, 9' stroke-linecap='round'/%3E %3Cpath d='M1.5, 10 L3, 9' stroke-linecap='round' transform='translate(2.250000, 9.500000) scale(1, -1) translate(-2.250000, -9.500000)'/%3E %3Cpath d='M5, 6.5 L6, 5' stroke-linecap='round' transform='translate(5.500000, 5.750000) scale(-1, 1) translate(-5.500000, -5.750000)'/%3E %3C/g%3E %3C/svg%3E");
|
||||
background-position: center calc(50% + 0.1rem);
|
||||
}
|
||||
}
|
||||
|
||||
.button--link {
|
||||
color: var(--color-link);
|
||||
transition: color 0.2s;
|
||||
word-break: break-all;
|
||||
font-weight: var(--font-weight-bold);
|
||||
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
color: var(--color-link-hover);
|
||||
}
|
||||
}
|
||||
|
||||
.button--danger {
|
||||
@extend .button--link;
|
||||
color: var(--color-error);
|
||||
}
|
||||
|
||||
.button--uri-indicator {
|
||||
@extend .button--link;
|
||||
color: var(--color-text-subtitle);
|
||||
|
|
@ -72,6 +157,10 @@
|
|||
}
|
||||
}
|
||||
|
||||
.button--disabled {
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.button__content {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
|
|
|||
|
|
@ -1,7 +1,275 @@
|
|||
// lbry/components overrides and minor styles
|
||||
// Some items have very specific styling
|
||||
// This is because many styles inside `lbry/components/sass/form/` are very specific
|
||||
// As styles become hardened here, they _should_ slowly move over to that repo
|
||||
@import 'init/mixins';
|
||||
|
||||
input,
|
||||
textarea,
|
||||
select {
|
||||
height: var(--height-input);
|
||||
border-radius: var(--border-radius);
|
||||
border: 1px solid;
|
||||
color: var(--color-input);
|
||||
border-color: var(--color-input-border);
|
||||
background-color: var(--color-input-bg);
|
||||
padding-right: var(--spacing-s);
|
||||
padding-left: var(--spacing-s);
|
||||
|
||||
&:focus {
|
||||
@include focus;
|
||||
}
|
||||
|
||||
&::placeholder {
|
||||
color: var(--color-input-placeholder);
|
||||
opacity: 0.4;
|
||||
}
|
||||
|
||||
&:disabled {
|
||||
opacity: 0.4;
|
||||
|
||||
& + label {
|
||||
opacity: 0.4;
|
||||
}
|
||||
}
|
||||
|
||||
&[type='range'] {
|
||||
height: auto;
|
||||
height: 0.5rem;
|
||||
background-color: var(--color-secondary);
|
||||
}
|
||||
}
|
||||
|
||||
checkbox-element,
|
||||
radio-element,
|
||||
select {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
select {
|
||||
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 96 96' xmlns='http://www.w3.org/2000/svg' fill='%23212529'%3E%3Cpath d='M17.172, 31.172c1.562, -1.562 4.095, -1.562 5.656, 0l25.172, 25.171l25.172, -25.171c1.562, -1.562 4.095, -1.562 5.656, 0c1.562, 1.562 1.562, 4.095 0, 5.656l-28, 28c-1.562, 1.562 -4.095, 1.562 -5.656, 0l-28, -28c-0.781, -0.781 -1.172, -1.805 -1.172, -2.828c0, -1.023 0.391, -2.047 1.172, -2.828Z'/%3E%3C/svg%3E%0A");
|
||||
background-position: 99% center;
|
||||
background-repeat: no-repeat;
|
||||
background-size: 1rem;
|
||||
padding-right: var(--spacing-l);
|
||||
padding-left: var(--spacing-s);
|
||||
}
|
||||
|
||||
fieldset-group {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
|
||||
&.fieldset-group--smushed {
|
||||
fieldset-section + fieldset-section {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
fieldset-section,
|
||||
fieldset-group,
|
||||
form,
|
||||
.checkbox,
|
||||
.radio,
|
||||
.form-field--SimpleMDE,
|
||||
.form-field__help {
|
||||
+ fieldset-section,
|
||||
+ fieldset-group,
|
||||
+ form,
|
||||
+ .checkbox,
|
||||
+ .radio,
|
||||
+ .form-field--SimpleMDE {
|
||||
margin-top: var(--spacing-l);
|
||||
}
|
||||
|
||||
+ .form-field__help {
|
||||
margin-top: var(--spacing-s);
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
input,
|
||||
select {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
fieldset-section,
|
||||
.checkbox,
|
||||
.radio {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
label {
|
||||
font-size: var(--font-small);
|
||||
color: var(--color-input-label);
|
||||
display: inline-block;
|
||||
margin-bottom: var(--spacing-xxs);
|
||||
}
|
||||
|
||||
input-submit {
|
||||
display: flex;
|
||||
|
||||
& > *:first-child,
|
||||
& > *:nth-child(2) {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
& > *:first-child {
|
||||
border-top-right-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
border-right: none;
|
||||
}
|
||||
|
||||
& > *:nth-child(2) {
|
||||
border-top-left-radius: 0;
|
||||
border-bottom-left-radius: 0;
|
||||
border: 1px solid var(--color-border);
|
||||
}
|
||||
}
|
||||
|
||||
.checkbox,
|
||||
.radio {
|
||||
position: relative;
|
||||
|
||||
input[type='checkbox'],
|
||||
input[type='radio'] {
|
||||
height: var(--height-checkbox);
|
||||
width: var(--height-checkbox);
|
||||
position: absolute;
|
||||
border: none;
|
||||
left: 0;
|
||||
padding: 0;
|
||||
background-color: transparent;
|
||||
|
||||
&:disabled + label {
|
||||
cursor: default;
|
||||
pointer-events: none;
|
||||
}
|
||||
}
|
||||
|
||||
label {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
margin: 0;
|
||||
font-size: var(--font-base);
|
||||
padding-left: calc(var(--height-checkbox) + var(--spacing-s));
|
||||
min-height: var(--height-checkbox);
|
||||
|
||||
&::before {
|
||||
background-color: var(--color-input-toggle-bg);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
&::before {
|
||||
background-color: var(--color-input-toggle-bg-hover);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
label::before,
|
||||
label::after {
|
||||
position: absolute;
|
||||
content: '';
|
||||
}
|
||||
|
||||
// Hide the checkmark by default
|
||||
input[type='checkbox'] + label::after,
|
||||
input[type='radio'] + label::after {
|
||||
content: none;
|
||||
}
|
||||
|
||||
// Unhide on the checked state
|
||||
input[type='checkbox']:checked + label::after,
|
||||
input[type='radio']:checked + label::after {
|
||||
content: '';
|
||||
}
|
||||
|
||||
input[type='checkbox']:focus + label::before,
|
||||
input[type='radio']:focus + label::before {
|
||||
@include focus;
|
||||
}
|
||||
}
|
||||
|
||||
.checkbox {
|
||||
// Outer box of the fake checkbox
|
||||
label::before {
|
||||
height: var(--height-checkbox);
|
||||
width: var(--height-checkbox);
|
||||
border: 1px solid var(--color-input-border);
|
||||
border-radius: var(--border-radius);
|
||||
left: 0px;
|
||||
top: -1px;
|
||||
}
|
||||
|
||||
// Checkmark of the fake checkbox
|
||||
label::after {
|
||||
height: 6px;
|
||||
width: 12px;
|
||||
border-left: 2px solid;
|
||||
border-bottom: 2px solid;
|
||||
border-color: var(--color-input-toggle);
|
||||
transform: rotate(-45deg);
|
||||
left: 6px;
|
||||
top: 6px;
|
||||
}
|
||||
}
|
||||
|
||||
.radio {
|
||||
input[type='radio'] {
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
// Outer box of the fake radio
|
||||
label::before {
|
||||
height: var(--height-radio);
|
||||
width: var(--height-radio);
|
||||
border: 1px solid var(--color-input-border);
|
||||
border-radius: calc(var(--height-radio) * 0.5);
|
||||
left: 0px;
|
||||
top: -1px;
|
||||
}
|
||||
|
||||
// Checkmark of the fake radio
|
||||
label::after {
|
||||
height: 12px;
|
||||
width: 12px;
|
||||
border-radius: 50%;
|
||||
background-color: var(--color-secondary);
|
||||
left: 6px;
|
||||
top: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
.range__label {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
|
||||
> * {
|
||||
width: 33%;
|
||||
text-align: center;
|
||||
|
||||
&:first-of-type {
|
||||
text-align: left;
|
||||
}
|
||||
&:last-of-type {
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.fieldset-group {
|
||||
@extend fieldset-group;
|
||||
}
|
||||
|
||||
.fieldset-section {
|
||||
@extend fieldset-section;
|
||||
}
|
||||
|
||||
.input-submit {
|
||||
@extend input-submit;
|
||||
}
|
||||
|
||||
input-submit {
|
||||
align-items: center;
|
||||
|
|
|
|||
|
|
@ -1,3 +1,86 @@
|
|||
.table {
|
||||
width: 100%;
|
||||
position: relative;
|
||||
|
||||
th,
|
||||
td {
|
||||
overflow: hidden;
|
||||
|
||||
&:first-of-type {
|
||||
padding-left: var(--spacing-l);
|
||||
}
|
||||
|
||||
&:last-of-type {
|
||||
padding-right: var(--spacing-l);
|
||||
}
|
||||
}
|
||||
|
||||
thead {
|
||||
cursor: default;
|
||||
position: relative;
|
||||
|
||||
th {
|
||||
border-bottom: 1px solid var(--color-border);
|
||||
}
|
||||
}
|
||||
|
||||
tr {
|
||||
&:not(:last-of-type) {
|
||||
td {
|
||||
border-bottom: 1px solid var(--color-border);
|
||||
}
|
||||
}
|
||||
|
||||
&:nth-child(2n) {
|
||||
background-color: var(--color-table-highlight);
|
||||
}
|
||||
}
|
||||
|
||||
th,
|
||||
td {
|
||||
padding: 0.5rem 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
th {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.table--fixed {
|
||||
table-layout: fixed;
|
||||
}
|
||||
|
||||
.table--condensed {
|
||||
td,
|
||||
th {
|
||||
padding: 0.5rem;
|
||||
|
||||
&:first-of-type {
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
&:last-of-type {
|
||||
padding-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
tr {
|
||||
&:nth-child(2n) {
|
||||
background-color: transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.table__item-label {
|
||||
font-size: var(--font-multiplier-small);
|
||||
font-weight: 300;
|
||||
color: var(--color-text-subtitle);
|
||||
}
|
||||
|
||||
.table__item--align-right {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.table__wrapper {
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
|
|
|||
66
ui/scss/init/_color.scss
Normal file
66
ui/scss/init/_color.scss
Normal file
|
|
@ -0,0 +1,66 @@
|
|||
:root {
|
||||
// Generic colors
|
||||
--color-primary: #257761;
|
||||
--color-primary-alt: #e4f4ef;
|
||||
--color-primary-alt-2: #4b8576;
|
||||
--color-secondary: #295284;
|
||||
--color-secondary-alt: #d9eaff;
|
||||
--color-tertiary: #552470;
|
||||
--color-tertiary-alt: #f7e8ff;
|
||||
--color-danger: #9b2023;
|
||||
--color-danger-alt: #fccdce;
|
||||
--color-warning: #fff58c;
|
||||
--color-cost: #ffd580;
|
||||
--color-focus: #93cff2;
|
||||
|
||||
--color-black: #111;
|
||||
--color-white: #fdfdfd;
|
||||
--color-white-alt: #fafafa;
|
||||
--color-gray-1: #eff1f4;
|
||||
--color-gray-2: #d8dde1;
|
||||
--color-gray-3: #ced4da;
|
||||
--color-gray-4: #abb1b7;
|
||||
--color-gray-5: #666a6d;
|
||||
|
||||
// Text
|
||||
--color-text: var(--color-black);
|
||||
--color-text-subtitle: var(--color-gray-5);
|
||||
--color-text-inverse: #fdfdfd;
|
||||
|
||||
// Components
|
||||
|
||||
// Button
|
||||
--color-button-primary-bg: var(--color-primary);
|
||||
--color-button-primary-text: var(--color-primary-alt);
|
||||
--color-button-primary-bg-hover: var(--color-primary-alt-2);
|
||||
--color-button-primary-hover-text: var(--color-primary-alt);
|
||||
--color-button-secondary-bg: var(--color-secondary-alt);
|
||||
--color-button-secondary-text: var(--color-secondary);
|
||||
--color-button-secondary-bg-hover: #b9d0e9;
|
||||
--color-button-alt-bg: var(--color-gray-1);
|
||||
--color-button-alt-text: var(--color-text);
|
||||
--color-button-alt-bg-hover: var(--color-gray-2);
|
||||
--color-link: var(--color-primary);
|
||||
--color-link-hover: var(--color-black);
|
||||
|
||||
// Input
|
||||
--color-input-color: #111111;
|
||||
--color-input-label: var(--color-gray-5);
|
||||
--color-input-placeholder: #212529;
|
||||
--color-input-bg: #f2f2f2;
|
||||
--color-input-bg-copyable: #434b53;
|
||||
--color-input-border: var(--color-border);
|
||||
--color-input-border-active: var(--color-secondary);
|
||||
--color-input-toggle: var(--color-secondary);
|
||||
--color-input-toggle-bg: var(--color-gray-1);
|
||||
--color-input-toggle-bg-hover: var(--color-secondary-alt);
|
||||
|
||||
// Table
|
||||
--color-table-highlight: var(--color-white-alt);
|
||||
|
||||
// Tag
|
||||
--color-tag: var(--color-gray-5);
|
||||
--color-tag-bg: var(--color-button-alt-bg);
|
||||
--color-tag-hover: var(--color-button-alt-text);
|
||||
--color-tag-bg-hover: var(--color-button-alt-bg-hover);
|
||||
}
|
||||
|
|
@ -23,6 +23,16 @@ html {
|
|||
|
||||
body {
|
||||
font-size: 1em;
|
||||
cursor: default;
|
||||
line-height: 1.5;
|
||||
font-weight: 400;
|
||||
font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif,
|
||||
'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
|
||||
}
|
||||
|
||||
hr {
|
||||
height: 1px;
|
||||
background-color: var(--color-gray-2);
|
||||
}
|
||||
|
||||
h1,
|
||||
|
|
|
|||
|
|
@ -1,3 +1,209 @@
|
|||
@mixin between {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
@mixin breakpoint-max($breakpoint) {
|
||||
@media (max-width: #{$breakpoint}px) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin breakpoint-min($breakpoint) {
|
||||
@media (min-width: #{$breakpoint}px) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin center {
|
||||
align-items: center;
|
||||
display: inline-flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
@mixin clearfix {
|
||||
clear: both;
|
||||
content: '';
|
||||
display: block;
|
||||
}
|
||||
|
||||
// (Smart) text truncation
|
||||
// Pass in a width to customize how much text is allowed
|
||||
// Omit value for basic text truncation
|
||||
@mixin constrict($value: null) {
|
||||
@if ($value) {
|
||||
max-width: $value;
|
||||
}
|
||||
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
@mixin create-grid($items-per-row: 4) {
|
||||
grid-template: repeat(1, 1fr) / repeat($items-per-row, 1fr);
|
||||
}
|
||||
|
||||
// Smart font include
|
||||
// Simply pass in the font-weight you want to use and the normal/italicized versions will be added
|
||||
// No more weighing down the front-end with references to unused weights
|
||||
@mixin font-face($font-weight, $relative-font-path, $font-name) {
|
||||
@font-face {
|
||||
font-family: $font-name;
|
||||
font-style: normal;
|
||||
font-weight: $font-weight;
|
||||
// sass-lint:disable indentation
|
||||
src: url('#{$relative-font-path}/#{$font-weight}.woff2') format('woff2'),
|
||||
url('#{$relative-font-path}/#{$font-weight}.woff') format('woff');
|
||||
// sass-lint:enable indentation
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: $font-name;
|
||||
font-style: italic;
|
||||
font-weight: $font-weight;
|
||||
// sass-lint:disable indentation
|
||||
src: url('#{$relative-font-path}/#{$font-weight}i.woff2') format('woff2'),
|
||||
url('#{$relative-font-path}/#{$font-weight}i.woff') format('woff');
|
||||
// sass-lint:enable indentation
|
||||
}
|
||||
}
|
||||
|
||||
@mixin font-mono {
|
||||
font-family: 'Fira Code', 'Courier New', monospace;
|
||||
}
|
||||
|
||||
@mixin font-sans {
|
||||
font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif,
|
||||
'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
|
||||
}
|
||||
|
||||
@mixin font-serif {
|
||||
font-family: Georgia, serif;
|
||||
}
|
||||
|
||||
@mixin hide-text {
|
||||
border: none;
|
||||
color: transparent;
|
||||
font: 0 / 0 a;
|
||||
text-shadow: none;
|
||||
}
|
||||
|
||||
// Cross-browser line-clamp support
|
||||
@mixin line-clamp($element-height: 2rem, $row-count: 2, $fade-color: var(--lbry-white), $computed-position: relative) {
|
||||
height: $element-height;
|
||||
overflow: hidden;
|
||||
position: $computed-position;
|
||||
|
||||
&::after {
|
||||
width: 50%;
|
||||
height: calc(#{$element-height} / #{$row-count});
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
|
||||
background-image: linear-gradient(to right, rgba($lbry-white, 0), #{$fade-color} 80%);
|
||||
content: '';
|
||||
position: absolute;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin no-user-select {
|
||||
user-select: none;
|
||||
|
||||
-ms-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-webkit-user-select: none;
|
||||
}
|
||||
|
||||
// TODO: Make customizable
|
||||
// The `background-position` in `loading-animation` is the same width as this `background-size`
|
||||
// The same values can be passed to both
|
||||
@mixin placeholder {
|
||||
animation-duration: 4s;
|
||||
animation-fill-mode: forwards;
|
||||
animation-iteration-count: infinite;
|
||||
animation-name: loading-animation;
|
||||
animation-timing-function: linear;
|
||||
background-color: transparent;
|
||||
background-image: linear-gradient(to right, var(--color-gray-3) 10%, transparent 80%, var(--color-gray-3) 100%);
|
||||
background-repeat: repeat;
|
||||
background-size: 500px;
|
||||
|
||||
[data-mode='dark'] & {
|
||||
background-image: linear-gradient(
|
||||
to right,
|
||||
rgba($lbry-white, 0.1) 10%,
|
||||
transparent 80%,
|
||||
rgba($lbry-white, 0.1) 100%
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
// Use CSS variables without upsetting Sass-Lint
|
||||
// https://github.com/sasstools/sass-lint/issues/1161#issuecomment-390537190
|
||||
@mixin root-prop($prop: null, $value: null) {
|
||||
@if ($prop and $value) {
|
||||
#{$prop}: $value;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin selection($background-color: var(--lbry-white), $text-color: var(--lbry-black)) {
|
||||
&::selection {
|
||||
background-color: $background-color;
|
||||
color: $text-color;
|
||||
text-shadow: none;
|
||||
}
|
||||
|
||||
&::-moz-selection {
|
||||
background-color: $background-color;
|
||||
color: $text-color;
|
||||
text-shadow: none;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin thumbnail {
|
||||
&::before,
|
||||
&::after {
|
||||
content: '';
|
||||
}
|
||||
|
||||
&::before {
|
||||
float: left;
|
||||
padding-top: var(--aspect-ratio-standard);
|
||||
}
|
||||
|
||||
&::after {
|
||||
clear: both;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin focus {
|
||||
box-shadow: 0 0 0 3px var(--color-focus);
|
||||
}
|
||||
|
||||
@mixin underline($text-color: var(--lbry-black), $whitespace-color: var(--lbry-white)) {
|
||||
@include selection($text-color, $whitespace-color);
|
||||
|
||||
background-image: linear-gradient($whitespace-color, $whitespace-color),
|
||||
linear-gradient($whitespace-color, $whitespace-color), linear-gradient($text-color, $text-color);
|
||||
background-position: 0 88%, 100% 88%, 0 88%;
|
||||
background-repeat: no-repeat, no-repeat, repeat-x;
|
||||
background-size: 0.05rem 1px, 0.05rem 1px, 1px 1px;
|
||||
box-decoration-break: clone;
|
||||
display: inline;
|
||||
text-decoration: none;
|
||||
text-shadow: 0.03rem 0 $whitespace-color, -0.03rem 0 $whitespace-color, 0 0.03rem $whitespace-color,
|
||||
0 -0.03rem $whitespace-color, 0.06rem 0 $whitespace-color, -0.06rem 0 $whitespace-color, 0.09rem 0 $whitespace-color,
|
||||
-0.09rem 0 $whitespace-color, 0.12rem 0 $whitespace-color, -0.12rem 0 $whitespace-color, 0.15rem 0 $whitespace-color,
|
||||
-0.15rem 0 $whitespace-color;
|
||||
|
||||
@-moz-document url-prefix() {
|
||||
// sass-lint:disable-line empty-args
|
||||
background-position: 0 90%, 100% 90%, 0 90%;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin placeholder {
|
||||
animation: pulse 2s infinite ease-in-out;
|
||||
background-color: var(--color-placeholder-background);
|
||||
|
|
|
|||
245
ui/scss/init/_reset.scss
Normal file
245
ui/scss/init/_reset.scss
Normal file
|
|
@ -0,0 +1,245 @@
|
|||
html {
|
||||
box-sizing: border-box;
|
||||
text-rendering: optimizeLegibility;
|
||||
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
|
||||
border: none;
|
||||
box-sizing: inherit;
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
[disabled] {
|
||||
pointer-events: none;
|
||||
resize: none;
|
||||
}
|
||||
|
||||
[readonly] {
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
[for],
|
||||
[role='button'],
|
||||
[type='button'],
|
||||
[type='checkbox'],
|
||||
[type='file'],
|
||||
[type='radio'],
|
||||
[type='select'],
|
||||
[type='submit'] {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
a,
|
||||
area,
|
||||
button,
|
||||
[role='button'],
|
||||
input,
|
||||
label,
|
||||
select,
|
||||
summary,
|
||||
textarea {
|
||||
// Remove touch delay on supported devices
|
||||
touch-action: manipulation;
|
||||
}
|
||||
|
||||
button,
|
||||
input,
|
||||
select,
|
||||
textarea {
|
||||
background-color: transparent;
|
||||
border-radius: 0;
|
||||
font-family: inherit;
|
||||
font-size: inherit;
|
||||
font-weight: inherit;
|
||||
|
||||
-moz-appearance: none;
|
||||
-webkit-appearance: none;
|
||||
|
||||
&:disabled {
|
||||
cursor: default;
|
||||
}
|
||||
}
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
font-weight: normal;
|
||||
font-size: 1em;
|
||||
}
|
||||
|
||||
ol,
|
||||
ul {
|
||||
list-style-position: inside;
|
||||
|
||||
> li {
|
||||
list-style-position: inside;
|
||||
}
|
||||
}
|
||||
|
||||
table {
|
||||
border-spacing: 0;
|
||||
}
|
||||
|
||||
dd {
|
||||
width: 80%;
|
||||
float: left;
|
||||
}
|
||||
|
||||
dl {
|
||||
width: 100%;
|
||||
overflow-x: scroll;
|
||||
overflow-y: hidden;
|
||||
}
|
||||
|
||||
dt {
|
||||
width: 20%;
|
||||
float: left;
|
||||
}
|
||||
|
||||
img {
|
||||
width: auto;
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
max-height: 100%;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
button {
|
||||
background-color: transparent;
|
||||
line-height: inherit;
|
||||
|
||||
&:not(:disabled) {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
&:disabled {
|
||||
opacity: 0.3;
|
||||
}
|
||||
}
|
||||
|
||||
hr {
|
||||
width: 100%;
|
||||
height: 1px;
|
||||
background-color: var(--color-gray-1);
|
||||
}
|
||||
|
||||
input {
|
||||
background-color: transparent;
|
||||
color: inherit;
|
||||
|
||||
&::placeholder {
|
||||
color: inherit;
|
||||
opacity: 0.2;
|
||||
}
|
||||
|
||||
&::-webkit-search-cancel-button {
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
}
|
||||
|
||||
select {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
textarea {
|
||||
width: 100%;
|
||||
min-height: var(--spacing-xxl);
|
||||
padding: var(--spacing-s);
|
||||
// border-color should be added in apps for blur/focus
|
||||
border: 1px solid;
|
||||
|
||||
&:not([disabled]) {
|
||||
resize: vertical;
|
||||
}
|
||||
}
|
||||
|
||||
@media print {
|
||||
// sass-lint:disable-block no-important
|
||||
// Intelligent print styles
|
||||
pre,
|
||||
blockquote {
|
||||
border: 1px solid var(--color-gray-5) !important;
|
||||
page-break-inside: avoid !important;
|
||||
}
|
||||
|
||||
tr,
|
||||
img {
|
||||
page-break-inside: avoid !important;
|
||||
}
|
||||
|
||||
img {
|
||||
max-width: 100% !important;
|
||||
}
|
||||
|
||||
@page {
|
||||
margin: 0.5cm !important;
|
||||
}
|
||||
|
||||
p,
|
||||
h2,
|
||||
h3 {
|
||||
orphans: 3 !important;
|
||||
widows: 3 !important;
|
||||
}
|
||||
|
||||
h2,
|
||||
h3 {
|
||||
page-break-after: avoid !important;
|
||||
}
|
||||
|
||||
thead {
|
||||
display: table-header-group !important;
|
||||
}
|
||||
|
||||
// Faster, more stable printing
|
||||
* {
|
||||
background-color: transparent !important;
|
||||
background-image: none !important;
|
||||
color: var(--lbry-black) !important;
|
||||
filter: none !important;
|
||||
text-shadow: none !important;
|
||||
}
|
||||
|
||||
p {
|
||||
a {
|
||||
&[href]::after {
|
||||
// Show hypertext data for links and abbreviations
|
||||
content: ' (' attr(href) ')' !important;
|
||||
}
|
||||
|
||||
&[href^='javascript:'],
|
||||
&[href^='#'] {
|
||||
&::after {
|
||||
content: '' !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
abbr {
|
||||
&[title]::after {
|
||||
content: ' (' attr(title) ')' !important;
|
||||
}
|
||||
}
|
||||
|
||||
a,
|
||||
abbr {
|
||||
text-decoration: underline !important;
|
||||
word-wrap: break-word !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -7,6 +7,42 @@ $breakpoint-small: 900px;
|
|||
$breakpoint-medium: 1150px;
|
||||
|
||||
:root {
|
||||
--border-radius: 5px;
|
||||
--height-input: 2.5rem;
|
||||
--height-button: 2.5rem;
|
||||
--height-checkbox: 24px;
|
||||
--height-radio: 24px;
|
||||
--height-badge: 24px;
|
||||
|
||||
// Spacing
|
||||
--spacing-xxs: calc(2rem / 5);
|
||||
--spacing-xs: calc(2rem / 4);
|
||||
--spacing-s: calc(2rem / 3);
|
||||
--spacing-m: calc(2rem / 2);
|
||||
--spacing-l: 2rem;
|
||||
--spacing-xl: 3rem;
|
||||
|
||||
// Aspect ratio
|
||||
--aspect-ratio-bluray: 41.6666666667%; // 12:5
|
||||
--aspect-ratio-panavision: 36.3636363636%; // 11:4
|
||||
--aspect-ratio-sd: 75%; // 4:3
|
||||
--aspect-ratio-standard: 56.25%; // 16:9
|
||||
|
||||
// Type
|
||||
--font-mono: 'Fira Code';
|
||||
--font-sans: Inter;
|
||||
--font-serif: Georgia;
|
||||
--font-weight-base: 400;
|
||||
--font-weight-light: 300;
|
||||
--font-weight-bold: 700;
|
||||
--font-base: 14px;
|
||||
--font-body: 1rem;
|
||||
--font-xsmall: 0.7344rem;
|
||||
--font-small: 0.8571rem;
|
||||
--font-large: 1.3rem;
|
||||
--font-title: 1.71rem;
|
||||
--font-heading: 2.94rem;
|
||||
|
||||
// Width & spacing
|
||||
--page-max-width: 1420px;
|
||||
--mac-titlebar-height: 1.5rem;
|
||||
|
|
|
|||
|
|
@ -957,11 +957,6 @@
|
|||
prop-types "^15.6.2"
|
||||
scheduler "^0.18.0"
|
||||
|
||||
"@lbry/components@^4.2.5":
|
||||
version "4.2.5"
|
||||
resolved "https://registry.yarnpkg.com/@lbry/components/-/components-4.2.5.tgz#21d2cad296c015c6300727e706a1456e72aae600"
|
||||
integrity sha512-UmE4nkvTQnZX4obOiR650apXarRmvXW+Ieezu/M4LZNKL/CRmHJIRrqcSMtPugDf/Ijukx/4oqrq2M8Ww0sgyw==
|
||||
|
||||
"@mapbox/hast-util-table-cell-style@^0.1.3":
|
||||
version "0.1.3"
|
||||
resolved "https://registry.yarnpkg.com/@mapbox/hast-util-table-cell-style/-/hast-util-table-cell-style-0.1.3.tgz#5b7166ae01297d72216932b245e4b2f0b642dca6"
|
||||
|
|
|
|||
Loading…
Reference in a new issue