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

unify some styles with master

Browse source
This commit is contained in:
zeppi 2021-04-26 15:19:17 -04:00 committed by jessopb
parent 830375cb32
commit c2f945ab3c
19 changed files with 445 additions and 37 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
static/app-strings.json
View file

@ -1889,5 +1889,8 @@
"A thumbnail is required. Please upload or provide an image URL above.": "A thumbnail is required. Please upload or provide an image URL above.", "A thumbnail is required. Please upload or provide an image URL above.": "A thumbnail is required. Please upload or provide an image URL above.",
"You can upload your own recording or select a replay when your stream is over": "You can upload your own recording or select a replay when your stream is over", "You can upload your own recording or select a replay when your stream is over": "You can upload your own recording or select a replay when your stream is over",
"This channel isn't staking enough LBRY Credits for inline image previews.": "This channel isn't staking enough LBRY Credits for inline image previews.", "This channel isn't staking enough LBRY Credits for inline image previews.": "This channel isn't staking enough LBRY Credits for inline image previews.",
"Fromage": "Fromage",
"Latest": "Latest",
"Tá Rolando": "Tá Rolando",
"--end--": "--end--" "--end--": "--end--"
} }

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

@ -34,7 +34,15 @@
.button--primary { .button--primary {
background-color: var(--color-button-primary-bg); background-color: var(--color-button-primary-bg);
color: var(--color-button-primary-text); // color: var(--color-button-primary-text);
.button__label {
color: var(--color-button-primary-text);
}
.icon {
stroke: var(--color-button-primary-text);
}
&:hover { &:hover {
color: var(--color-button-primary-hover-text); color: var(--color-button-primary-hover-text);
@ -54,7 +62,15 @@
.button--secondary { .button--secondary {
background-color: var(--color-button-secondary-bg); background-color: var(--color-button-secondary-bg);
border: 1px solid var(--color-button-secondary-border); border: 1px solid var(--color-button-secondary-border);
color: var(--color-button-secondary-text); // color: var(--color-button-secondary-text);
.button__label {
color: var(--color-button-primary-text);
}
.icon {
stroke: var(--color-button-primary-text);
}
&:hover { &:hover {
background-color: var(--color-button-secondary-bg-hover); background-color: var(--color-button-secondary-bg-hover);
@ -223,6 +239,238 @@
} }
} }
.button--fire {
color: var(--color-fire);
position: relative;
path {
stroke: var(--color-fire-outside);
}
}
.button__fire-particle {
position: absolute;
top: 60%;
left: 20%;
width: 2px;
height: 2px;
background-color: #ef5a00;
border-radius: 50%;
filter: drop-shadow(0 0 10px #d43322);
animation-iteration-count: 2;
animation-fill-mode: both;
}
.button__fire-glow {
width: 1px;
height: 1px;
left: var(--spacing-s);
bottom: var(--spacing-m);
position: absolute;
box-shadow: 4px 0px 10px 10px var(--color-glow);
animation: glowDecay 2.5s ease-out;
opacity: 0;
}
.button__fire-particle1 {
@extend .button__fire-particle;
right: 10%;
top: 40%;
animation: particleUp 1.5s ease-out 0;
animation-iteration-count: 2;
animation-fill-mode: both;
}
.button__fire-particle2 {
@extend .button__fire-particle;
animation: particleUp2 2s ease-out 0;
animation-iteration-count: 2;
animation-fill-mode: both;
}
.button__fire-particle3 {
@extend .button__fire-particle;
animation: particleUp3 2.2s ease-out 0;
animation-iteration-count: 2;
animation-fill-mode: both;
}
.button__fire-particle4 {
@extend .button__fire-particle1;
animation-delay: 0.5s;
}
.button__fire-particle5 {
@extend .button__fire-particle2;
animation-delay: 0.75s;
}
.button__fire-particle6 {
@extend .button__fire-particle3;
animation-delay: 0.25s;
}
@keyframes glowDecay {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}
@keyframes particleUp {
0% {
opacity: 0;
left: 0;
}
20% {
opacity: 1;
right: 10%;
}
50% {
right: 20%;
}
50% {
left: 10%;
}
80% {
opacity: 1;
right: 40%;
}
100% {
opacity: 0;
top: -50%;
transform: scale(0.5);
}
}
@keyframes particleUp2 {
0% {
opacity: 0;
right: 0;
}
20% {
opacity: 1;
left: 10%;
}
50% {
left: 20%;
}
50% {
right: 10%;
}
80% {
opacity: 1;
left: 40%;
}
100% {
opacity: 0;
top: -50%;
transform: scale(0.5);
}
}
@keyframes particleUp3 {
0% {
opacity: 0;
left: 30%;
}
20% {
opacity: 1;
left: 60%;
}
40% {
left: 50%;
}
80% {
opacity: 1;
right: 80%;
}
100% {
opacity: 0;
top: -50%;
transform: scale(0.5);
}
}
.button--slime {
color: var(--color-slime);
}
.button__slime-drop {
position: absolute;
top: 60%;
left: 15%;
width: 5px;
height: 5px;
background-color: #81c554;
border-radius: 50%;
filter: drop-shadow(0 0 10px #d43322);
animation-iteration-count: 2;
animation-fill-mode: both;
}
.button__slime-drop1 {
@extend .button__slime-drop;
top: 40%;
animation: dropDown 1.5s ease-out 0;
animation-iteration-count: 1;
animation-fill-mode: both;
}
.button__slime-drop2 {
@extend .button__slime-drop;
left: 35%;
top: 40%;
animation: dropDown2 1.5s ease-out 0;
animation-iteration-count: 1;
animation-fill-mode: both;
}
.button__slime-stain {
width: 1px;
height: 1px;
left: var(--spacing-s);
bottom: var(--spacing-m);
position: absolute;
box-shadow: 4px 0px 10px 10px var(--color-slime);
animation: glowDecay 2.5s ease-out;
opacity: 0;
}
@keyframes dropDown {
0% {
opacity: 1;
top: 50%;
}
70% {
opacity: 1;
}
100% {
opacity: 0;
top: 80%;
transform: scale(0.5, 4);
}
}
@keyframes dropDown2 {
0% {
opacity: 1;
top: 50%;
}
60% {
opacity: 1;
}
100% {
opacity: 0;
top: 80%;
transform: scale(0.5, 6);
}
}
.button--disabled { .button--disabled {
opacity: 0.5; opacity: 0.5;
} }
@ -300,8 +548,10 @@ svg + .button__label {
} }
.button-toggle--active { .button-toggle--active {
color: var(--color-primary); //color: var(--color-primary);
background-color: var(--color-primary-alt); //background-color: var(--color-primary-alt);
color: var(--color-button-toggle-text);
background-color: var(--color-button-toggle-bg);
svg { svg {
opacity: 1; opacity: 1;
@ -347,6 +597,12 @@ svg + .button__label {
} }
} }
.button--file-action {
&:first-child {
margin-right: var(--spacing-s);
}
}
.button-toggle-group-action { .button-toggle-group-action {
position: absolute; // Centers the button along toggle buttons position: absolute; // Centers the button along toggle buttons

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

@ -345,3 +345,9 @@
margin-right: var(--spacing-m); margin-right: var(--spacing-m);
} }
} }
.card__bottom-actions {
display: flex;
justify-content: space-between;
align-items: center;
}

8
ui/scss/component/_channel.scss
View file

@ -109,6 +109,7 @@ $metadata-z-index: 1;
.channel-thumbnail__custom { .channel-thumbnail__custom {
width: 100%; width: 100%;
object-fit: cover; object-fit: cover;
font-size: 1px; // To hide the alt text on firefox;
} }
.channel-thumbnail__default { .channel-thumbnail__default {
@ -280,7 +281,8 @@ $metadata-z-index: 1;
&[data-selected] { &[data-selected] {
background: transparent; background: transparent;
.channel__list-item { .channel__list-item,
.channel-staked__wrapper {
background-color: var(--color-card-background-highlighted); background-color: var(--color-card-background-highlighted);
} }
} }
@ -314,6 +316,7 @@ $metadata-z-index: 1;
background-color: var(--color-card-background); background-color: var(--color-card-background);
padding: var(--spacing-s); padding: var(--spacing-s);
border-bottom: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border);
overflow: hidden;
.channel-thumbnail { .channel-thumbnail {
height: 2rem; height: 2rem;
@ -362,12 +365,13 @@ $metadata-z-index: 1;
.channel-staked__tooltip { .channel-staked__tooltip {
display: flex; display: flex;
align-items: center; align-items: center;
line-height: 1rem;
} }
.channel-staked__tooltip-text { .channel-staked__tooltip-text {
margin-left: var(--spacing-xs); margin-left: var(--spacing-xs);
font-size: var(--font-xsmall); font-size: var(--font-xsmall);
// still needed ?
.icon--LBC { .icon--LBC {
opacity: 0.7; opacity: 0.7;
margin-top: -2px; margin-top: -2px;

59
ui/scss/component/_claim-list.scss
View file

@ -30,9 +30,11 @@
transform: translateY(-130%); transform: translateY(-130%);
font-size: var(--font-xsmall); font-size: var(--font-xsmall);
color: var(--color-text-subtitle); color: var(--color-text-subtitle);
overflow: visible;
.icon { .icon {
margin-right: var(--spacing-xs); margin-right: var(--spacing-xs);
stroke: var(--color-text-subtitle);
} }
@media (max-width: $breakpoint-small) { @media (max-width: $breakpoint-small) {
@ -179,6 +181,20 @@
@include handleChannelGif(5rem); @include handleChannelGif(5rem);
} }
} }
.claim-preview__text {
height: 7.5rem;
}
@media (max-width: $breakpoint-small) {
.channel-thumbnail {
@include handleChannelGif(6rem);
}
.claim-preview__text {
height: 3.5rem;
}
}
} }
.claim-preview--small { .claim-preview--small {
@ -202,12 +218,16 @@
.claim-preview--inline { .claim-preview--inline {
.channel-thumbnail { .channel-thumbnail {
@include handleChannelGif(var(--channel-thumbnail-width--small)); @include handleChannelGif(3rem);
@media (min-width: $breakpoint-small) {
@include handleChannelGif(var(--channel-thumbnail-width--small));
}
} }
.claim-preview__actions { .claim-preview__actions {
align-self: flex-end; align-self: flex-end;
margin-top: 0; //margin-top: 0;
margin-bottom: auto; margin-bottom: auto;
justify-content: flex-end; justify-content: flex-end;
width: auto; width: auto;
@ -218,11 +238,17 @@
flex-direction: row; flex-direction: row;
justify-content: space-between; justify-content: space-between;
flex-wrap: wrap; flex-wrap: wrap;
align-items: center;
} }
@media (max-width: $breakpoint-xsmall) { @media (max-width: $breakpoint-xsmall) {
.claim-preview__actions { .claim-preview__actions {
align-self: flex-start; .claim-preview__primary-actions {
.button {
margin-top: 0;
}
}
//align-self: flex-start;
} }
} }
} }
@ -256,9 +282,9 @@
flex-direction: column; flex-direction: column;
flex: 1; flex: 1;
@media (max-width: $breakpoint-small) { //@media (max-width: $breakpoint-small) {
margin-bottom: var(--spacing-s); // margin-bottom: var(--spacing-s);
} //}
} }
.claim-preview-info { .claim-preview-info {
@ -276,7 +302,7 @@
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: space-between; justify-content: space-between;
margin-top: auto; //margin-top: auto;
width: 100%; width: 100%;
@media (min-width: $breakpoint-small) { @media (min-width: $breakpoint-small) {
@ -286,7 +312,14 @@
.claim-preview__primary-actions { .claim-preview__primary-actions {
@extend .section__actions; @extend .section__actions;
margin-top: 0; margin-right: 0;
margin-top: var(--spacing-s);
&:first-child {
.button {
margin-top: var(--spacing-s);
}
}
} }
.claim-preview__actions--header { .claim-preview__actions--header {
@ -387,6 +420,16 @@
font-size: var(--font-large); font-size: var(--font-large);
} }
.claim-grid__title--first {
text-align: center;
width: 100%;
margin-bottom: var(--spacing-l);
.no-evil {
font-size: var(--font-heading);
}
}
.claim-grid__title--secondary { .claim-grid__title--secondary {
margin-left: auto; margin-left: auto;
} }

13
ui/scss/component/_comments.scss
View file

@ -33,6 +33,10 @@ $thumbnailWidthSmall: 1rem;
position: relative; position: relative;
} }
.comment__create--bottom {
padding-bottom: 0;
}
.comment { .comment {
width: 100%; width: 100%;
display: flex; display: flex;
@ -60,6 +64,11 @@ $thumbnailWidthSmall: 1rem;
padding: -1rem; padding: -1rem;
margin-left: 0; margin-left: 0;
} }
.channel-staked__indicator {
@media (max-width: $breakpoint-small) {
margin-left: 0.1rem;
}
}
} }
} }
@ -308,6 +317,10 @@ $thumbnailWidthSmall: 1rem;
padding-bottom: var(--spacing-xs); padding-bottom: var(--spacing-xs);
font-size: var(--font-small); font-size: var(--font-small);
border-bottom: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border);
&:not(:last-child) {
margin-bottom: var(--spacing-xs);
}
} }
.comment__menu-help { .comment__menu-help {

1
ui/scss/component/_file-properties.scss
View file

@ -25,6 +25,7 @@
font-size: var(--font-xsmall); font-size: var(--font-xsmall);
line-height: 1.2; line-height: 1.2;
margin-left: 0; margin-left: 0;
margin-top: auto;
position: relative; position: relative;
.tag { .tag {

35
ui/scss/component/_footer.scss
View file

@ -1,6 +1,8 @@
.footer { .footer {
display: flex; display: flex;
flex-direction: column;
justify-content: center; justify-content: center;
align-items: center;
max-width: 80%; max-width: 80%;
margin: auto; margin: auto;
padding: var(--spacing-xl); padding: var(--spacing-xl);
@ -9,10 +11,39 @@
@media (max-width: $breakpoint-small) { @media (max-width: $breakpoint-small) {
max-width: 100%; max-width: 100%;
padding: var(--spacing-m); padding: var(--spacing-m);
flex-direction: column; align-items: flex-start;
} }
} }
.footer__links {
display: flex;
flex-direction: column;
.navigation-link {
font-size: var(--font-small);
}
.button__label {
color: var(--color-text-help);
}
.footer__link {
margin-left: 0;
}
@media (min-width: $breakpoint-small) {
flex-direction: row;
.footer__link {
margin-left: var(--spacing-m);
}
}
}
.footer__link {
margin-bottom: var(--spacing-s);
}
.footer__section { .footer__section {
margin-left: var(--spacing-xl); margin-left: var(--spacing-xl);
@ -23,7 +54,7 @@
.footer__section-title { .footer__section-title {
@extend .help; @extend .help;
font-weight: 300; //font-weight: 300;
margin-bottom: var(--spacing-m); margin-bottom: var(--spacing-m);
} }

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

@ -214,6 +214,7 @@ input-submit {
border-left: 2px solid; border-left: 2px solid;
border-bottom: 2px solid; border-bottom: 2px solid;
border-color: var(--color-input-toggle); border-color: var(--color-input-toggle);
border-left-color: var(--color-input-toggle);
transform: rotate(-45deg); transform: rotate(-45deg);
left: 6px; left: 6px;
top: 6px; top: 6px;
@ -240,7 +241,7 @@ input-submit {
height: 12px; height: 12px;
width: 12px; width: 12px;
border-radius: 50%; border-radius: 50%;
background-color: var(--color-secondary); background-color: var(--color-primary);
left: 6px; left: 6px;
top: 5px; top: 5px;
} }
@ -356,7 +357,7 @@ fieldset-group {
text-overflow: ellipsis; text-overflow: ellipsis;
overflow: hidden; overflow: hidden;
padding: 0.5rem; padding: 0.5rem;
padding-right: var(--spacing-s); //padding-right: var(--spacing-s);
height: var(--height-input); height: var(--height-input);
border: 1px solid; border: 1px solid;
border-top-left-radius: var(--border-radius); border-top-left-radius: var(--border-radius);

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

@ -16,7 +16,7 @@
.header--minimal { .header--minimal {
box-shadow: none; box-shadow: none;
background-color: transparent; background-color: var(--color-background);
border-bottom: none; border-bottom: none;
} }
@ -135,11 +135,25 @@
} }
.header__navigation-item--lbry { .header__navigation-item--lbry {
padding: var(--spacing-s); height: 4rem;
display: flex;
align-items: center;
margin-left: var(--spacing-m);
margin-right: var(--spacing-m);
.lbry-icon { @media (max-width: $breakpoint-small) {
height: var(--height-button); margin-right: var(--spacing-m);
width: var(--height-button); height: 5rem;
.button__label {
display: none;
}
}
}
.header--minimal {
.header__navigation-item--lbry {
height: 3rem;
} }
} }

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

@ -66,3 +66,17 @@
.icon__lbc--title { .icon__lbc--title {
margin-bottom: 4px; margin-bottom: 4px;
} }
.icon--Fire {
position: relative;
&:after {
content: '';
height: 20px;
width: 20px;
background-color: red;
top: 0;
right: 0;
position: absolute;
}
}

2
ui/scss/component/_markdown-preview.scss
View file

@ -258,7 +258,7 @@
} }
.file-viewer__embedded-header { .file-viewer__embedded-header {
padding: 0; padding: var(--spacing-xxs);
} }
} }

21
ui/scss/component/_media.scss
View file

@ -39,12 +39,12 @@
align-self: flex-start; align-self: flex-start;
color: var(--color-text-subtitle); color: var(--color-text-subtitle);
font-size: var(--font-small); font-size: var(--font-small);
//
.channel-thumbnail { //.channel-thumbnail {
display: inline-block; // display: inline-block;
@include handleChannelGif(1rem); // @include handleChannelGif(1rem);
margin-right: var(--spacing-xs); // margin-right: var(--spacing-xs);
} //}
} }
.media__subtitle--centered { .media__subtitle--centered {
@ -116,7 +116,7 @@
position: relative; position: relative;
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
justify-content: space-between; //justify-content: space-between;
margin-top: 0; margin-top: 0;
> *:not(:last-child) { > *:not(:last-child) {
@ -124,7 +124,7 @@
} }
@media (max-width: $breakpoint-small) { @media (max-width: $breakpoint-small) {
justify-content: flex-start; //justify-content: flex-start;
padding-top: var(--spacing-s); padding-top: var(--spacing-s);
> * { > * {
@ -139,4 +139,9 @@
font-size: var(--font-xxsmall); font-size: var(--font-xxsmall);
display: flex; display: flex;
flex-direction: column; flex-direction: column;
margin-bottom: var(--spacing-s);
&:not(:last-child) {
margin-bottom: var(--spacing-s);
}
} }

17
ui/scss/component/_navigation.scss
View file

@ -26,10 +26,14 @@
height: calc(100vh - var(--header-height)); height: calc(100vh - var(--header-height));
border-right: 1px solid var(--color-border); border-right: 1px solid var(--color-border);
padding-top: var(--spacing-l); padding-top: var(--spacing-l);
padding-bottom: var(--spacing-xl); padding-bottom: var(--spacing-l);
overflow-y: auto;
display: flex;
flex-direction: column;
@media (min-width: $breakpoint-small) { @media (min-width: $breakpoint-small) {
overflow-y: hidden; overflow-y: hidden;
justify-content: space-between;
&:hover { &:hover {
overflow-y: auto; overflow-y: auto;
@ -221,7 +225,16 @@
@extend .navigation-links; @extend .navigation-links;
margin-right: 0; margin-right: 0;
padding-right: 0; padding-right: 0;
font-size: var(--font-small); margin-top: var(--spacing-xl);
margin-bottom: 0;
.navigation-link {
font-size: var(--font-small);
}
.button__label {
color: var(--color-text-help);
}
.button__content { .button__content {
align-items: flex-start; align-items: flex-start;

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

@ -1,7 +1,7 @@
.nudge { .nudge {
z-index: 3; z-index: 3;
position: absolute; position: absolute;
left: 0; //left: 0;
top: 4rem; top: 4rem;
white-space: normal; white-space: normal;
overflow: visible; overflow: visible;
@ -10,6 +10,7 @@
box-shadow: var(--card-box-shadow); box-shadow: var(--card-box-shadow);
background-color: var(--color-secondary); background-color: var(--color-secondary);
color: var(--color-white); color: var(--color-white);
font-weight: bold;
.button--close { .button--close {
.icon { .icon {

1
ui/scss/component/_purchase.scss
View file

@ -55,6 +55,7 @@
.credit-amount { .credit-amount {
margin: 0 var(--spacing-m); margin: 0 var(--spacing-m);
margin-bottom: -0.5rem;
} }
&::before { &::before {

1
ui/scss/component/_search.scss
View file

@ -115,6 +115,7 @@
.search__top-link { .search__top-link {
margin-top: var(--spacing-s); margin-top: var(--spacing-s);
font-weight: var(--font-weight-body); font-weight: var(--font-weight-body);
margin-top: var(--spacing-xs);
} }
.search__top-links { .search__top-links {

1
ui/scss/component/_wunderbar.scss
View file

@ -228,6 +228,7 @@
@extend .button--alt; @extend .button--alt;
@extend .header__navigation-item--icon; @extend .header__navigation-item--icon;
padding: var(--spacing-xs); padding: var(--spacing-xs);
margin-right: var(--spacing-m);
.button__label { .button__label {
color: var(--color-input-placeholder); color: var(--color-input-placeholder);

4
ui/scss/component/nag.scss
View file

@ -37,7 +37,7 @@ $nag-error-z-index: 999;
} }
.nag--helpful { .nag--helpful {
background-color: var(--color-secondary); background-color: var(--color-primary);
color: var(--color-white); color: var(--color-white);
z-index: $nag-helpful-z-index; z-index: $nag-helpful-z-index;
} }
@ -82,7 +82,7 @@ $nag-error-z-index: 999;
.nag__button--helpful { .nag__button--helpful {
&:hover { &:hover {
background-color: var(--color-secondary-alt); //background-color: var(--color-secondary-alt);
color: var(--color-secondary); color: var(--color-secondary);
} }
} }