mirror of
https://github.com/LBRYFoundation/lbry-desktop.git
synced 2025-08-29 08:21:30 +00:00
2e87b2fd22
Naomi comment websockets increase slow mode time to 5 seconds fix to prevent duplicate comments update livestream details fix channel pin electron boom fix rebase prune unused icons updating meme updating meme update livestream for naomi fix rebase DigitalCashNetwork remove electroboom pin Slavguns Joel So he can edit his claims add streamTypes param to claimTilesDiscover so following section can search for all types of content fix typo update meme fixes publish page fixes pending fix notifications fix comments finally fix claim preview no mature for simplesite Revert "no mature for simplesite" This reverts commit 9f89242d85e0cacf44cbf0a683bebbe50840c466. fix livestream preview click no mature on simple site try fixing invite page crash probably needs more changes.
612 lines
12 KiB
SCSS
612 lines
12 KiB
SCSS
.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);
|
|
|
|
.button__label {
|
|
color: var(--color-button-primary-text);
|
|
}
|
|
|
|
.icon {
|
|
stroke: var(--color-button-primary-text);
|
|
}
|
|
|
|
&:hover {
|
|
color: var(--color-button-primary-hover-text);
|
|
background-color: var(--color-button-primary-bg-hover);
|
|
}
|
|
|
|
.credit-amount {
|
|
color: var(--color-button-primary-text);
|
|
|
|
.icon {
|
|
margin-left: 3px;
|
|
margin-right: 2px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.button--secondary {
|
|
background-color: var(--color-button-secondary-bg);
|
|
border: 1px solid var(--color-button-secondary-border);
|
|
|
|
.button__label {
|
|
color: var(--color-button-secondary-text);
|
|
}
|
|
|
|
.icon {
|
|
stroke: 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);
|
|
}
|
|
}
|
|
|
|
.vjs-fullscreen-control {
|
|
order: 2;
|
|
}
|
|
|
|
.vjs-button--theater-mode.vjs-button {
|
|
display: none;
|
|
|
|
@media (min-width: $breakpoint-medium) {
|
|
display: block;
|
|
order: 1;
|
|
background-repeat: no-repeat;
|
|
background-position: center;
|
|
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='14' viewBox='0 -2 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-monitor'%3E%3Crect x='2' y='3' width='20' height='14' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='8' y1='21' x2='16' y2='21'%3E%3C/line%3E%3Cline x1='12' y1='17' x2='12' y2='21'%3E%3C/line%3E%3C/svg%3E");
|
|
}
|
|
|
|
&:focus:not(:focus-visible) {
|
|
// Need to repeat these styles because of video.js weirdness
|
|
// see: https://github.com/lbryio/lbry-desktop/pull/5549#discussion_r580406932
|
|
background-repeat: no-repeat;
|
|
background-position: center;
|
|
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='14' viewBox='0 -2 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-monitor'%3E%3Crect x='2' y='3' width='20' height='14' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='8' y1='21' x2='16' y2='21'%3E%3C/line%3E%3Cline x1='12' y1='17' x2='12' y2='21'%3E%3C/line%3E%3C/svg%3E");
|
|
}
|
|
}
|
|
|
|
.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);
|
|
max-width: 100%;
|
|
text-align: left;
|
|
transition: color 0.2s;
|
|
|
|
.channel-name {
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.markdown-preview & {
|
|
height: initial;
|
|
vertical-align: initial;
|
|
}
|
|
}
|
|
|
|
.button--close {
|
|
z-index: 1;
|
|
position: absolute;
|
|
top: var(--spacing-xxs);
|
|
right: var(--spacing-xxs);
|
|
padding: 0.3rem;
|
|
transition: all var(--transition-duration) var(--transition-style);
|
|
border-radius: var(--card-radius);
|
|
color: var(--color-text);
|
|
font-size: var(--font-body);
|
|
|
|
svg {
|
|
height: 1rem;
|
|
width: 1rem;
|
|
}
|
|
|
|
&:hover {
|
|
color: var(--color-button-primary-text);
|
|
background-color: var(--color-button-primary-bg);
|
|
}
|
|
|
|
&:focus {
|
|
@include focus;
|
|
}
|
|
|
|
@media (max-width: $breakpoint-small) {
|
|
padding: 0.8rem 0.8rem;
|
|
}
|
|
}
|
|
|
|
.button--header-close {
|
|
background-color: var(--color-primary-alt);
|
|
padding: var(--spacing-s);
|
|
}
|
|
|
|
.button--download-link {
|
|
.button__label {
|
|
white-space: normal;
|
|
text-align: left;
|
|
}
|
|
}
|
|
|
|
.button--file-action {
|
|
@extend .button--alt;
|
|
background-color: transparent;
|
|
margin-right: var(--spacing-m);
|
|
padding: 0 var(--spacing-xxs);
|
|
|
|
.icon {
|
|
stroke: #777;
|
|
}
|
|
|
|
.button__label {
|
|
min-width: 10px;
|
|
}
|
|
|
|
&:last-child {
|
|
margin-right: 0;
|
|
}
|
|
|
|
&:hover {
|
|
background-color: var(--color-button-alt-bg);
|
|
}
|
|
|
|
&:focus {
|
|
box-shadow: none;
|
|
}
|
|
}
|
|
|
|
.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;
|
|
}
|
|
|
|
.button--highlighted {
|
|
border: 1px solid var(--color-border);
|
|
}
|
|
|
|
.button--emoji {
|
|
font-size: 1.25rem;
|
|
border-radius: 3rem;
|
|
}
|
|
|
|
.button__content {
|
|
display: flex;
|
|
align-items: center;
|
|
min-width: 0;
|
|
height: 100%;
|
|
}
|
|
|
|
.button__label {
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
// Handle icons on the left or right side of the button label
|
|
svg + .button__label {
|
|
margin-left: var(--spacing-s);
|
|
}
|
|
|
|
.button__label + svg {
|
|
margin-left: var(--spacing-xs);
|
|
}
|
|
|
|
.button-toggle {
|
|
padding: 0 var(--spacing-m);
|
|
height: var(--height-button);
|
|
font-size: var(--font-base);
|
|
border: 1px solid var(--color-border);
|
|
border-left-width: 0;
|
|
border-radius: 0;
|
|
margin: 0;
|
|
background-color: var(--color-card-background);
|
|
|
|
@media (max-width: $breakpoint-small) {
|
|
padding: var(--spacing-m) var(--spacing-s);
|
|
}
|
|
|
|
&:first-of-type {
|
|
border-left-width: 1px;
|
|
border-top-left-radius: var(--border-radius);
|
|
border-bottom-left-radius: var(--border-radius);
|
|
}
|
|
|
|
&:last-of-type {
|
|
border-top-right-radius: var(--border-radius);
|
|
border-bottom-right-radius: var(--border-radius);
|
|
// since we're abusing "button-toggle" let it stand alone properly
|
|
&:not(:first-of-type) {
|
|
margin-right: var(--spacing-s);
|
|
}
|
|
}
|
|
}
|
|
|
|
.button-toggle--expandformobile {
|
|
@media (max-width: $breakpoint-small) {
|
|
display: block;
|
|
width: 100%;
|
|
text-align: center;
|
|
border-radius: var(--border-radius);
|
|
border: 1px solid var(--color-border);
|
|
|
|
&:not(:first-of-type) {
|
|
margin-top: var(--spacing-s);
|
|
}
|
|
}
|
|
}
|
|
|
|
.button-toggle--active {
|
|
color: var(--color-button-toggle-text);
|
|
background-color: var(--color-button-toggle-bg);
|
|
|
|
svg {
|
|
opacity: 1;
|
|
}
|
|
|
|
&:hover {
|
|
cursor: default;
|
|
text-decoration: none;
|
|
background-color: var(--color-button-toggle-bg-hover);
|
|
}
|
|
}
|
|
|
|
.button-toggle--custom {
|
|
color: var(--color-primary);
|
|
svg {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
.button-toggle__label {
|
|
@extend label;
|
|
display: inline-block;
|
|
margin-top: -4px;
|
|
}
|
|
|
|
.button-tab-group {
|
|
margin-bottom: var(--spacing-l);
|
|
}
|
|
|
|
.button-group,
|
|
.button-tab-group {
|
|
display: flex;
|
|
|
|
.button:first-child:not(:only-child) {
|
|
border-top-right-radius: 0;
|
|
border-bottom-right-radius: 0;
|
|
border-right: 1px solid var(--color-button-border);
|
|
}
|
|
|
|
.button:nth-child(2) {
|
|
border-top-left-radius: 0;
|
|
border-bottom-left-radius: 0;
|
|
}
|
|
|
|
.button--file-action {
|
|
&:first-child {
|
|
margin-right: var(--spacing-s);
|
|
}
|
|
}
|
|
}
|
|
|
|
.button-toggle-group-action {
|
|
position: absolute; // Centers the button along toggle buttons
|
|
|
|
@media (max-width: $breakpoint-small) {
|
|
position: relative;
|
|
top: var(--spacing-s);
|
|
}
|
|
}
|