mirror of
https://github.com/LBRYFoundation/lbry-desktop.git
synced 2025-08-23 17:47:24 +00:00
9dc9d50e19
changes almost done wip wip more changes after comment detect custom qs and show options ux and mobile styling bugfix console logs appstrings
120 lines
2.3 KiB
SCSS
120 lines
2.3 KiB
SCSS
.button {
|
|
display: inline-block;
|
|
font-weight: var(--font-weight-base);
|
|
}
|
|
|
|
.button--uri-indicator {
|
|
@extend .button--link;
|
|
color: var(--color-text-subtitle);
|
|
max-width: 100%;
|
|
text-align: left;
|
|
text-overflow: ellipsis;
|
|
transition: color 0.2s;
|
|
|
|
.markdown-preview & {
|
|
height: initial;
|
|
vertical-align: initial;
|
|
}
|
|
}
|
|
|
|
.button--close {
|
|
z-index: 1;
|
|
position: absolute;
|
|
top: var(--spacing-miniscule);
|
|
right: var(--spacing-miniscule);
|
|
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);
|
|
}
|
|
|
|
@media (max-width: $breakpoint-small) {
|
|
padding: var(--spacing-medium) var(--spacing-small);
|
|
}
|
|
}
|
|
|
|
.button--download-link {
|
|
.button__label {
|
|
white-space: normal;
|
|
text-align: left;
|
|
}
|
|
}
|
|
|
|
.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,
|
|
.button__label + svg {
|
|
margin-left: var(--spacing-small);
|
|
}
|
|
|
|
.button-toggle {
|
|
padding: 0 var(--spacing-medium);
|
|
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-medium) var(--spacing-small);
|
|
}
|
|
svg {
|
|
opacity: 0.5;
|
|
}
|
|
|
|
&: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);
|
|
margin-right: var(--spacing-small);
|
|
}
|
|
}
|
|
|
|
.button-toggle--active {
|
|
color: var(--color-primary);
|
|
background-color: var(--color-primary-alt);
|
|
|
|
svg {
|
|
opacity: 1;
|
|
}
|
|
|
|
&:hover {
|
|
cursor: default;
|
|
text-decoration: none;
|
|
}
|
|
}
|
|
|
|
.button-toggle--custom {
|
|
color: var(--color-primary);
|
|
svg {
|
|
opacity: 1;
|
|
}
|
|
}
|