unify some styles with master

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

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.",
"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.",
"Fromage": "Fromage",
"Latest": "Latest",
"Tá Rolando": "Tá Rolando",
"--end--": "--end--"
}

View file

@ -34,7 +34,15 @@
.button--primary {
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 {
color: var(--color-button-primary-hover-text);
@ -54,7 +62,15 @@
.button--secondary {
background-color: var(--color-button-secondary-bg);
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 {
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 {
opacity: 0.5;
}
@ -300,8 +548,10 @@ svg + .button__label {
}
.button-toggle--active {
color: var(--color-primary);
background-color: var(--color-primary-alt);
//color: var(--color-primary);
//background-color: var(--color-primary-alt);
color: var(--color-button-toggle-text);
background-color: var(--color-button-toggle-bg);
svg {
opacity: 1;
@ -347,6 +597,12 @@ svg + .button__label {
}
}
.button--file-action {
&:first-child {
margin-right: var(--spacing-s);
}
}
.button-toggle-group-action {
position: absolute; // Centers the button along toggle buttons

View file

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

View file

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

View file

@ -30,9 +30,11 @@
transform: translateY(-130%);
font-size: var(--font-xsmall);
color: var(--color-text-subtitle);
overflow: visible;
.icon {
margin-right: var(--spacing-xs);
stroke: var(--color-text-subtitle);
}
@media (max-width: $breakpoint-small) {
@ -179,6 +181,20 @@
@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 {
@ -202,12 +218,16 @@
.claim-preview--inline {
.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 {
align-self: flex-end;
margin-top: 0;
//margin-top: 0;
margin-bottom: auto;
justify-content: flex-end;
width: auto;
@ -218,11 +238,17 @@
flex-direction: row;
justify-content: space-between;
flex-wrap: wrap;
align-items: center;
}
@media (max-width: $breakpoint-xsmall) {
.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: 1;
@media (max-width: $breakpoint-small) {
margin-bottom: var(--spacing-s);
}
//@media (max-width: $breakpoint-small) {
// margin-bottom: var(--spacing-s);
//}
}
.claim-preview-info {
@ -276,7 +302,7 @@
display: flex;
flex-direction: column;
justify-content: space-between;
margin-top: auto;
//margin-top: auto;
width: 100%;
@media (min-width: $breakpoint-small) {
@ -286,7 +312,14 @@
.claim-preview__primary-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 {
@ -387,6 +420,16 @@
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 {
margin-left: auto;
}

View file

@ -33,6 +33,10 @@ $thumbnailWidthSmall: 1rem;
position: relative;
}
.comment__create--bottom {
padding-bottom: 0;
}
.comment {
width: 100%;
display: flex;
@ -60,6 +64,11 @@ $thumbnailWidthSmall: 1rem;
padding: -1rem;
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);
font-size: var(--font-small);
border-bottom: 1px solid var(--color-border);
&:not(:last-child) {
margin-bottom: var(--spacing-xs);
}
}
.comment__menu-help {

View file

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

View file

@ -1,6 +1,8 @@
.footer {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
max-width: 80%;
margin: auto;
padding: var(--spacing-xl);
@ -9,10 +11,39 @@
@media (max-width: $breakpoint-small) {
max-width: 100%;
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 {
margin-left: var(--spacing-xl);
@ -23,7 +54,7 @@
.footer__section-title {
@extend .help;
font-weight: 300;
//font-weight: 300;
margin-bottom: var(--spacing-m);
}

View file

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

View file

@ -16,7 +16,7 @@
.header--minimal {
box-shadow: none;
background-color: transparent;
background-color: var(--color-background);
border-bottom: none;
}
@ -135,11 +135,25 @@
}
.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 {
height: var(--height-button);
width: var(--height-button);
@media (max-width: $breakpoint-small) {
margin-right: var(--spacing-m);
height: 5rem;
.button__label {
display: none;
}
}
}
.header--minimal {
.header__navigation-item--lbry {
height: 3rem;
}
}

View file

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

View file

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

View file

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

View file

@ -26,10 +26,14 @@
height: calc(100vh - var(--header-height));
border-right: 1px solid var(--color-border);
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) {
overflow-y: hidden;
justify-content: space-between;
&:hover {
overflow-y: auto;
@ -221,7 +225,16 @@
@extend .navigation-links;
margin-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 {
align-items: flex-start;

View file

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

View file

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

View file

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

View file

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

View file

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