2020-07-24 19:17:43 +02:00
|
|
|
.button {
|
|
|
|
|
display: inline-block;
|
|
|
|
|
position: relative;
|
|
|
|
|
white-space: nowrap;
|
|
|
|
|
text-decoration: none;
|
|
|
|
|
cursor: pointer;
|
2020-05-11 17:54:39 +02:00
|
|
|
}
|
2020-04-30 17:42:40 +02:00
|
|
|
|
2020-05-11 17:54:39 +02:00
|
|
|
.button--primary,
|
|
|
|
|
.button--secondary,
|
|
|
|
|
.button--alt,
|
|
|
|
|
.button--link {
|
|
|
|
|
&:focus {
|
|
|
|
|
z-index: 2; // Ensure focus box-shadow is always visible on every button side
|
2020-04-30 17:42:40 +02:00
|
|
|
}
|
2020-04-01 21:36:59 +02:00
|
|
|
}
|
|
|
|
|
|
2020-07-24 19:17:43 +02:00
|
|
|
.button--primary,
|
|
|
|
|
.button--secondary,
|
|
|
|
|
.button--alt {
|
|
|
|
|
height: var(--height-button);
|
|
|
|
|
border-radius: var(--border-radius);
|
2022-04-14 23:27:16 +02:00
|
|
|
padding: 0 var(--spacing-m);
|
|
|
|
|
line-height: 1.2em;
|
2020-07-24 19:17:43 +02:00
|
|
|
font-weight: var(--font-weight-bold);
|
|
|
|
|
|
2022-04-14 23:27:16 +02:00
|
|
|
.button__label {
|
|
|
|
|
margin-top: 2px;
|
|
|
|
|
}
|
|
|
|
|
|
2020-07-24 19:17:43 +02:00
|
|
|
@media (max-width: $breakpoint-small) {
|
|
|
|
|
font-size: var(--font-small);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.button--primary {
|
2022-04-14 23:27:16 +02:00
|
|
|
background-color: var(--color-primary) !important;
|
2021-04-26 21:19:17 +02:00
|
|
|
|
|
|
|
|
.button__label {
|
2022-04-14 23:27:16 +02:00
|
|
|
color: var(--color-primary-contrast);
|
2021-04-26 21:19:17 +02:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.icon {
|
2022-04-14 23:27:16 +02:00
|
|
|
color: var(--color-primary-contrast);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.credit-amount {
|
|
|
|
|
color: var(--color-primary-contrast);
|
|
|
|
|
|
|
|
|
|
.icon {
|
|
|
|
|
margin-left: 3px;
|
|
|
|
|
margin-right: 3px;
|
|
|
|
|
}
|
2021-04-26 21:19:17 +02:00
|
|
|
}
|
2020-07-24 19:17:43 +02:00
|
|
|
|
|
|
|
|
&:hover {
|
2022-04-14 23:27:16 +02:00
|
|
|
.icon {
|
|
|
|
|
stroke: var(--color-primary-contrast) !important;
|
|
|
|
|
}
|
2020-07-24 19:17:43 +02:00
|
|
|
}
|
2020-09-15 21:46:36 +02:00
|
|
|
|
2022-04-14 23:27:16 +02:00
|
|
|
&:focus-visible {
|
|
|
|
|
background-color: rgba(var(--color-primary-dynamic), 0.2) !important;
|
|
|
|
|
box-shadow: 0px 0px 0px 2px var(--color-primary) inset;
|
|
|
|
|
|
|
|
|
|
.button__label {
|
|
|
|
|
color: var(--color-text) !important;
|
|
|
|
|
}
|
2020-09-15 21:46:36 +02:00
|
|
|
|
|
|
|
|
.icon {
|
2022-04-14 23:27:16 +02:00
|
|
|
stroke: var(--color-text) !important;
|
2020-09-15 21:46:36 +02:00
|
|
|
}
|
|
|
|
|
}
|
2020-07-24 19:17:43 +02:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.button--secondary {
|
2022-04-14 23:27:16 +02:00
|
|
|
background-color: var(--color-button-secondary-bg) !important;
|
2021-04-26 21:19:17 +02:00
|
|
|
.button__label {
|
2022-04-14 23:27:16 +02:00
|
|
|
color: var(--color-button-secondary-text) !important;
|
2021-04-26 21:19:17 +02:00
|
|
|
}
|
|
|
|
|
.icon {
|
2022-04-14 23:27:16 +02:00
|
|
|
stroke: var(--color-button-secondary-text) !important;
|
2021-04-26 21:19:17 +02:00
|
|
|
}
|
2020-07-24 19:17:43 +02:00
|
|
|
|
|
|
|
|
&:hover {
|
2022-04-14 23:27:16 +02:00
|
|
|
background-color: var(--color-button-secondary-bg-hover) !important;
|
|
|
|
|
.button__label {
|
|
|
|
|
color: var(--color-button-secondary-text-hover) !important;
|
|
|
|
|
}
|
|
|
|
|
.icon {
|
|
|
|
|
stroke: var(--color-button-secondary-text-hover) !important;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
&:focus-visible {
|
|
|
|
|
background-color: rgba(var(--color-primary-dynamic), 0.2) !important;
|
|
|
|
|
box-shadow: 0px 0px 0px 2px var(--color-primary) inset;
|
|
|
|
|
|
|
|
|
|
.button__label {
|
|
|
|
|
color: var(--color-text) !important;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.icon {
|
|
|
|
|
stroke: var(--color-text) !important;
|
|
|
|
|
}
|
2020-07-24 19:17:43 +02:00
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.button--alt {
|
|
|
|
|
background-color: var(--color-button-alt-bg);
|
|
|
|
|
color: var(--color-button-alt-text);
|
|
|
|
|
&:hover {
|
|
|
|
|
background-color: var(--color-button-alt-bg-hover);
|
2022-04-14 23:27:16 +02:00
|
|
|
color: var(--color-button-alt-text-hover);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
a.button--alt {
|
|
|
|
|
@media (max-width: $breakpoint-small) {
|
|
|
|
|
.button__label {
|
|
|
|
|
div:first-of-type {
|
|
|
|
|
top: 23% !important;
|
|
|
|
|
}
|
|
|
|
|
}
|
2020-07-24 19:17:43 +02:00
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.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 {
|
2022-04-14 23:27:16 +02:00
|
|
|
background-color: var(--color-button-secondary-bg-hover);
|
|
|
|
|
|
|
|
|
|
&.button--play {
|
|
|
|
|
background-color: var(--color-primary);
|
|
|
|
|
opacity: 1;
|
|
|
|
|
}
|
2020-07-24 19:17:43 +02:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
&.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;
|
2022-04-14 23:27:16 +02:00
|
|
|
opacity: 0.95;
|
|
|
|
|
transition: opacity 0.2s;
|
|
|
|
|
&:hover {
|
|
|
|
|
opacity: 1;
|
|
|
|
|
transition: opacity 0s;
|
|
|
|
|
}
|
2020-07-24 19:17:43 +02:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
&.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);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
2021-01-08 16:21:27 +01:00
|
|
|
.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;
|
2022-01-27 16:20:21 +01:00
|
|
|
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='19' height='19' viewBox='0 0 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");
|
2021-01-08 16:21:27 +01:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
&:focus:not(:focus-visible) {
|
2021-02-18 05:15:38 +01:00
|
|
|
// Need to repeat these styles because of video.js weirdness
|
2021-03-05 04:01:16 +01:00
|
|
|
// see: https://github.com/lbryio/lbry-desktop/pull/5549#discussion_r580406932
|
2021-02-18 05:15:38 +01:00
|
|
|
background-repeat: no-repeat;
|
|
|
|
|
background-position: center;
|
2022-01-27 16:20:21 +01:00
|
|
|
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='19' height='19' viewBox='0 0 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");
|
2021-01-08 16:21:27 +01:00
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
2021-09-02 22:05:32 +02:00
|
|
|
.vjs-button--play-next.vjs-button,
|
|
|
|
|
.vjs-button--play-previous.vjs-button,
|
|
|
|
|
.vjs-button--autoplay-next.vjs-button {
|
|
|
|
|
display: block;
|
|
|
|
|
background-repeat: no-repeat;
|
|
|
|
|
background-position: center;
|
|
|
|
|
|
|
|
|
|
&:focus:not(:focus-visible) {
|
|
|
|
|
display: block;
|
|
|
|
|
background-repeat: no-repeat;
|
|
|
|
|
background-position: center;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.vjs-button--play-next.vjs-button {
|
|
|
|
|
order: 0;
|
2022-01-27 16:20:21 +01:00
|
|
|
background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='19' height='19' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-skip-forward'%3e%3cpolygon points='5 4 15 12 5 20 5 4'%3e%3c/polygon%3e%3cline x1='19' y1='5' x2='19' y2='19'%3e%3c/line%3e%3c/svg%3e");
|
2021-09-02 22:05:32 +02:00
|
|
|
|
|
|
|
|
&:focus:not(:focus-visible) {
|
|
|
|
|
order: 0;
|
2022-01-27 16:20:21 +01:00
|
|
|
background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='19' height='19' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-skip-forward'%3e%3cpolygon points='5 4 15 12 5 20 5 4'%3e%3c/polygon%3e%3cline x1='19' y1='5' x2='19' y2='19'%3e%3c/line%3e%3c/svg%3e");
|
2021-09-02 22:05:32 +02:00
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.vjs-button--play-previous.vjs-button {
|
|
|
|
|
order: 0;
|
2022-01-27 16:20:21 +01:00
|
|
|
background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='19' height='19' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-skip-back'%3e%3cpolygon points='19 20 9 12 19 4 19 20'%3e%3c/polygon%3e%3cline x1='5' y1='19' x2='5' y2='5'%3e%3c/line%3e%3c/svg%3e");
|
2021-09-02 22:05:32 +02:00
|
|
|
|
|
|
|
|
&:focus:not(:focus-visible) {
|
|
|
|
|
order: 0;
|
2022-01-27 16:20:21 +01:00
|
|
|
background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='19' height='19' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-skip-back'%3e%3cpolygon points='19 20 9 12 19 4 19 20'%3e%3c/polygon%3e%3cline x1='5' y1='19' x2='5' y2='5'%3e%3c/line%3e%3c/svg%3e");
|
2021-09-02 22:05:32 +02:00
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.vjs-button--autoplay-next.vjs-button {
|
2022-01-27 16:20:21 +01:00
|
|
|
// TODO: the width and height of a vjs-button should probably retain
|
|
|
|
|
// its default "100%" value, so that each control-bar button have the same
|
|
|
|
|
// touch area size. Anything inside (like this on/off switch, or icons)
|
|
|
|
|
// should be a child (e.g. vjs-icon-placeholder), so that inner margins will
|
|
|
|
|
// also be consistent.
|
|
|
|
|
//
|
|
|
|
|
// TEMP: for now, just hardcode the left-right margin so that it looks
|
|
|
|
|
// equally spaced compared to its siblings.
|
|
|
|
|
margin: auto 0.5rem auto 0.7rem;
|
|
|
|
|
|
2021-09-02 22:05:32 +02:00
|
|
|
order: 1;
|
|
|
|
|
width: 24px;
|
|
|
|
|
height: 14px;
|
|
|
|
|
border-radius: var(--border-radius);
|
|
|
|
|
background: var(--color-gray-4);
|
|
|
|
|
transition: background 0.2s;
|
|
|
|
|
}
|
|
|
|
|
|
2021-10-16 22:24:52 +02:00
|
|
|
.vjs-button--autoplay-next.vjs-button[aria-checked='true'] {
|
2021-09-02 22:05:32 +02:00
|
|
|
background: var(--color-primary);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.vjs-button--autoplay-next.vjs-button::after {
|
2021-10-16 22:24:52 +02:00
|
|
|
content: '';
|
2021-09-02 22:05:32 +02:00
|
|
|
position: absolute;
|
|
|
|
|
top: 0;
|
|
|
|
|
left: 0;
|
|
|
|
|
height: 14px;
|
|
|
|
|
width: 14px;
|
|
|
|
|
background: var(--color-white);
|
|
|
|
|
box-shadow: 0 0 10px rgba(0, 0, 0, 0.25);
|
2022-04-14 23:27:16 +02:00
|
|
|
border-radius: 50%;
|
2021-09-02 22:05:32 +02:00
|
|
|
transition: transform 0.2s;
|
|
|
|
|
}
|
|
|
|
|
|
2021-10-16 22:24:52 +02:00
|
|
|
.vjs-button--autoplay-next.vjs-button[aria-checked='true']::after {
|
2021-09-02 22:05:32 +02:00
|
|
|
transform: translateX(12px);
|
|
|
|
|
}
|
|
|
|
|
|
2020-07-24 19:17:43 +02:00
|
|
|
.button--link {
|
|
|
|
|
color: var(--color-link);
|
2021-08-06 20:50:10 +02:00
|
|
|
word-break: break-word;
|
2020-07-24 19:17:43 +02:00
|
|
|
font-weight: var(--font-weight-bold);
|
|
|
|
|
|
|
|
|
|
&:hover {
|
|
|
|
|
color: var(--color-link-hover);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.button--danger {
|
|
|
|
|
@extend .button--link;
|
|
|
|
|
color: var(--color-error);
|
|
|
|
|
}
|
|
|
|
|
|
2019-02-15 02:52:10 +01:00
|
|
|
.button--uri-indicator {
|
2019-11-22 22:13:00 +01:00
|
|
|
@extend .button--link;
|
2022-04-14 23:27:16 +02:00
|
|
|
color: var(--color-text);
|
2019-02-20 06:20:29 +01:00
|
|
|
max-width: 100%;
|
2019-02-18 18:24:56 +01:00
|
|
|
text-align: left;
|
2019-02-15 02:52:10 +01:00
|
|
|
|
2020-11-06 18:52:17 +01:00
|
|
|
.channel-name {
|
|
|
|
|
text-overflow: ellipsis;
|
|
|
|
|
white-space: nowrap;
|
|
|
|
|
overflow: hidden;
|
2022-04-14 23:27:16 +02:00
|
|
|
font-size: var(--font-xsmall);
|
|
|
|
|
color: rgba(var(--color-text-base), 0.6);
|
2020-11-06 18:52:17 +01:00
|
|
|
}
|
|
|
|
|
|
2019-10-15 01:38:15 +02:00
|
|
|
.markdown-preview & {
|
2019-10-15 01:08:29 +02:00
|
|
|
height: initial;
|
|
|
|
|
vertical-align: initial;
|
|
|
|
|
}
|
2022-04-14 23:27:16 +02:00
|
|
|
|
|
|
|
|
&:hover {
|
|
|
|
|
color: var(--color-primary);
|
|
|
|
|
|
|
|
|
|
.channel-name {
|
|
|
|
|
color: var(--color-text);
|
|
|
|
|
}
|
|
|
|
|
}
|
2019-06-11 20:10:58 +02:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.button--close {
|
2019-11-22 22:13:00 +01:00
|
|
|
z-index: 1;
|
2019-06-11 20:10:58 +02:00
|
|
|
position: absolute;
|
2020-06-01 19:03:19 +02:00
|
|
|
top: var(--spacing-xxs);
|
|
|
|
|
right: var(--spacing-xxs);
|
2019-06-11 20:10:58 +02:00
|
|
|
padding: 0.3rem;
|
|
|
|
|
transition: all var(--transition-duration) var(--transition-style);
|
2019-08-13 07:35:13 +02:00
|
|
|
border-radius: var(--card-radius);
|
2019-11-22 22:13:00 +01:00
|
|
|
color: var(--color-text);
|
2020-01-14 16:49:22 +01:00
|
|
|
font-size: var(--font-body);
|
|
|
|
|
|
|
|
|
|
svg {
|
|
|
|
|
height: 1rem;
|
|
|
|
|
width: 1rem;
|
|
|
|
|
}
|
2019-06-11 20:10:58 +02:00
|
|
|
|
|
|
|
|
&:hover {
|
2022-04-14 23:27:16 +02:00
|
|
|
color: var(--color-primary-contrast);
|
|
|
|
|
background-color: var(--color-primary);
|
2020-05-11 17:54:39 +02:00
|
|
|
}
|
|
|
|
|
|
2019-12-18 06:27:08 +01:00
|
|
|
@media (max-width: $breakpoint-small) {
|
2022-04-14 23:27:16 +02:00
|
|
|
padding: 0.7rem 0.2rem;
|
|
|
|
|
top: var(--spacing-s);
|
|
|
|
|
right: var(--spacing-xxs);
|
|
|
|
|
&:hover {
|
|
|
|
|
background-color: unset;
|
|
|
|
|
}
|
2019-12-18 06:27:08 +01:00
|
|
|
}
|
2019-02-15 02:52:10 +01:00
|
|
|
}
|
2019-06-11 20:10:58 +02:00
|
|
|
|
2020-04-13 21:16:07 +02:00
|
|
|
.button--header-close {
|
2022-04-14 23:27:16 +02:00
|
|
|
background-color: var(--color-secondary);
|
2020-06-01 19:03:19 +02:00
|
|
|
padding: var(--spacing-s);
|
2020-04-13 21:16:07 +02:00
|
|
|
}
|
|
|
|
|
|
2019-08-14 20:09:45 +02:00
|
|
|
.button--download-link {
|
|
|
|
|
.button__label {
|
|
|
|
|
white-space: normal;
|
|
|
|
|
text-align: left;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
2020-09-30 22:46:20 +02:00
|
|
|
.button--file-action {
|
|
|
|
|
@extend .button--alt;
|
2022-04-14 23:27:16 +02:00
|
|
|
color: var(--color-text);
|
2020-09-30 22:46:20 +02:00
|
|
|
background-color: transparent;
|
|
|
|
|
margin-right: var(--spacing-m);
|
|
|
|
|
padding: 0 var(--spacing-xxs);
|
|
|
|
|
|
2022-02-11 16:58:35 +01:00
|
|
|
&.button--file-action-active {
|
|
|
|
|
.icon {
|
|
|
|
|
fill: var(--color-primary-alt);
|
|
|
|
|
stroke: var(--color-primary) !important; //fixme
|
|
|
|
|
color: var(--color-primary);
|
|
|
|
|
}
|
|
|
|
|
}
|
2022-04-14 23:27:16 +02:00
|
|
|
|
|
|
|
|
@media (max-width: $breakpoint-small) {
|
|
|
|
|
padding: 0 0;
|
|
|
|
|
}
|
|
|
|
|
|
2020-09-30 22:46:20 +02:00
|
|
|
.icon {
|
2022-02-07 22:54:02 +01:00
|
|
|
&:not(.color-override) {
|
2022-04-14 23:27:16 +02:00
|
|
|
stroke: var(--color-text);
|
2022-02-07 22:54:02 +01:00
|
|
|
}
|
2020-09-30 22:46:20 +02:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.button__label {
|
|
|
|
|
min-width: 10px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
&:last-child {
|
|
|
|
|
margin-right: 0;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
&:hover {
|
2022-04-14 23:27:16 +02:00
|
|
|
.icon {
|
|
|
|
|
stroke: var(--color-link);
|
|
|
|
|
}
|
|
|
|
|
.button__label {
|
|
|
|
|
color: var(--color-link);
|
|
|
|
|
}
|
2020-09-30 22:46:20 +02:00
|
|
|
}
|
2022-04-14 23:27:16 +02:00
|
|
|
}
|
2020-09-30 22:46:20 +02:00
|
|
|
|
2022-04-14 23:27:16 +02:00
|
|
|
[aria-expanded='true'].button--file-action {
|
|
|
|
|
background-color: var(--color-header-background);
|
|
|
|
|
.icon {
|
|
|
|
|
stroke: var(--color-primary);
|
2020-09-30 22:46:20 +02:00
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
2021-10-16 22:24:52 +02:00
|
|
|
.button--file-action-active {
|
|
|
|
|
.icon {
|
|
|
|
|
fill: var(--color-primary-alt);
|
|
|
|
|
stroke: var(--color-primary);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
2022-04-14 23:27:16 +02:00
|
|
|
.button--file-action--menu {
|
|
|
|
|
@extend .button--file-action;
|
2021-04-26 21:19:17 +02:00
|
|
|
}
|
2022-04-14 23:27:16 +02:00
|
|
|
[aria-expanded='true'].button--file-action--menu {
|
|
|
|
|
background-color: var(--color-header-background) !important;
|
2021-04-26 21:19:17 +02:00
|
|
|
}
|
|
|
|
|
|
2022-04-14 23:27:16 +02:00
|
|
|
//.button--fire {
|
|
|
|
|
// position: relative;
|
|
|
|
|
// .button__content {
|
|
|
|
|
// .button__label {
|
|
|
|
|
// color: var(--color-fire) !important;
|
|
|
|
|
// }
|
|
|
|
|
// }
|
|
|
|
|
// 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 {
|
|
|
|
|
// .button__content {
|
|
|
|
|
// .button__label {
|
|
|
|
|
// //color: var(--color-slime) !important;
|
|
|
|
|
// }
|
|
|
|
|
// }
|
|
|
|
|
//}
|
|
|
|
|
//
|
|
|
|
|
//.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;
|
|
|
|
|
//}
|
2021-04-26 21:19:17 +02:00
|
|
|
|
|
|
|
|
@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);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
2020-07-24 19:17:43 +02:00
|
|
|
.button--disabled {
|
|
|
|
|
opacity: 0.5;
|
|
|
|
|
}
|
|
|
|
|
|
2020-11-10 06:21:04 +01:00
|
|
|
.button--highlighted {
|
|
|
|
|
border: 1px solid var(--color-border);
|
|
|
|
|
}
|
2019-06-17 22:32:38 +02:00
|
|
|
.button__content {
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
min-width: 0;
|
2019-07-21 23:31:22 +02:00
|
|
|
height: 100%;
|
2019-06-17 22:32:38 +02:00
|
|
|
}
|
|
|
|
|
|
2019-06-11 20:10:58 +02:00
|
|
|
.button__label {
|
2019-06-17 22:32:38 +02:00
|
|
|
white-space: nowrap;
|
2019-06-11 20:10:58 +02:00
|
|
|
overflow: hidden;
|
|
|
|
|
text-overflow: ellipsis;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// Handle icons on the left or right side of the button label
|
2020-09-02 22:08:37 +02:00
|
|
|
svg + .button__label {
|
2020-06-01 19:03:19 +02:00
|
|
|
margin-left: var(--spacing-s);
|
2019-06-11 20:10:58 +02:00
|
|
|
}
|
2020-01-02 17:30:27 +01:00
|
|
|
|
2020-09-02 22:08:37 +02:00
|
|
|
.button__label + svg {
|
|
|
|
|
margin-left: var(--spacing-xs);
|
|
|
|
|
}
|
|
|
|
|
|
2020-01-02 17:30:27 +01:00
|
|
|
.button-toggle {
|
2020-06-01 19:03:19 +02:00
|
|
|
padding: 0 var(--spacing-m);
|
2020-01-02 17:30:27 +01:00
|
|
|
height: var(--height-button);
|
|
|
|
|
font-size: var(--font-base);
|
|
|
|
|
border-left-width: 0;
|
|
|
|
|
border-radius: 0;
|
|
|
|
|
margin: 0;
|
2022-04-14 23:27:16 +02:00
|
|
|
color: var(--color-button-toggle-text) !important;
|
|
|
|
|
background-color: var(--color-button-toggle-bg) !important;
|
|
|
|
|
|
|
|
|
|
-webkit-user-select: none;
|
|
|
|
|
user-select: none;
|
|
|
|
|
|
|
|
|
|
&:hover:not(.button-toggle--active) {
|
|
|
|
|
background-color: var(--color-button-toggle-bg-hover) !important;
|
|
|
|
|
.button__label {
|
|
|
|
|
color: var(--color-button-toggle-text-hover);
|
|
|
|
|
}
|
|
|
|
|
.icon {
|
|
|
|
|
stroke: var(--color-button-toggle-text-hover) !important;
|
|
|
|
|
}
|
|
|
|
|
}
|
2020-09-02 22:08:37 +02:00
|
|
|
|
2020-02-10 20:43:24 +01:00
|
|
|
@media (max-width: $breakpoint-small) {
|
2020-06-01 19:03:19 +02:00
|
|
|
padding: var(--spacing-m) var(--spacing-s);
|
2020-02-10 20:43:24 +01:00
|
|
|
}
|
2020-01-02 17:30:27 +01:00
|
|
|
|
|
|
|
|
&:first-of-type {
|
|
|
|
|
border-left-width: 1px;
|
|
|
|
|
border-top-left-radius: var(--border-radius);
|
|
|
|
|
border-bottom-left-radius: var(--border-radius);
|
|
|
|
|
}
|
|
|
|
|
|
2022-04-14 23:27:16 +02:00
|
|
|
// why?
|
|
|
|
|
//&:nth-child(2),
|
|
|
|
|
//&:nth-child(3),
|
|
|
|
|
//&:nth-child(4),
|
|
|
|
|
//&:nth-child(5) {
|
|
|
|
|
// // margin-left: 2px;
|
|
|
|
|
//}
|
|
|
|
|
|
2020-01-02 17:30:27 +01:00
|
|
|
&:last-of-type {
|
|
|
|
|
border-top-right-radius: var(--border-radius);
|
|
|
|
|
border-bottom-right-radius: var(--border-radius);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
2022-04-14 23:27:16 +02:00
|
|
|
.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) !important;
|
|
|
|
|
//box-shadow: 0px 0px 0px 1px var(--color-primary) inset;
|
|
|
|
|
color: var(--color-button-toggle-text-active) !important;
|
|
|
|
|
background-color: var(--color-button-toggle-bg-active) !important;
|
|
|
|
|
|
|
|
|
|
.icon {
|
|
|
|
|
opacity: 1;
|
|
|
|
|
stroke: var(--color-button-toggle-text-active) !important;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
&:hover {
|
|
|
|
|
cursor: default;
|
|
|
|
|
text-decoration: none;
|
|
|
|
|
background-color: var(--color-button-toggle-bg-active);
|
|
|
|
|
|
|
|
|
|
.icon {
|
|
|
|
|
stroke: var(--color-button-toggle-text-active) !important;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
&:focus-visible {
|
|
|
|
|
background-color: rgba(var(--color-primary-dynamic), 0.2) !important;
|
|
|
|
|
box-shadow: 0px 0px 0px 2px var(--color-primary) inset !important;
|
|
|
|
|
|
|
|
|
|
.icon {
|
|
|
|
|
stroke: var(--color-button-toggle-text) !important;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.button-toggle--custom {
|
|
|
|
|
color: var(--color-toggle-custom) !important;
|
|
|
|
|
.button__content {
|
|
|
|
|
.icon {
|
|
|
|
|
stroke: var(--color-toggle-custom) !important;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
svg {
|
|
|
|
|
opacity: 1;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.button-toggle__label {
|
|
|
|
|
@extend label;
|
|
|
|
|
display: inline-block;
|
|
|
|
|
margin-top: -4px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.button-toggle-group-action {
|
|
|
|
|
position: absolute; // Centers the button along toggle buttons
|
|
|
|
|
margin-left: var(--spacing-xs);
|
|
|
|
|
|
|
|
|
|
@media (max-width: $breakpoint-small) {
|
|
|
|
|
position: relative;
|
|
|
|
|
top: var(--spacing-s);
|
|
|
|
|
margin-bottom: var(--spacing-s);
|
|
|
|
|
margin-left: unset;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
2021-12-02 07:00:55 +01:00
|
|
|
.button-collection-manage {
|
wip
wip
wip - everything but publish, autoplay, and styling
collection publishing
add channel to collection publish
cleanup
wip
bump
clear mass add after success
move collection item management controls
redirect replace to published collection id
bump
playlist selector on create
bump
use new collection add ui element
bump
wip
gitignore
add content json
wip
bump
context add to playlist
basic collections page style pass wip
wip: edits, buttons, styles...
change fileAuthor to claimAuthor
update, pending bugfixes, delete modal progress, collection header, other bugfixes
bump
cleaning
show page bugfix
builtin collection headers
no playlists, no grid title
wip
style tweaks
use normal looking claim previews for collection tiles
add collection changes
style library previews
collection menulist for delete/view on library
delete modal works for unpublished
rearrange collection publish tabs
clean up collection publishing and items
show on odysee
begin collectoin edit header and css renaming
better thumbnails
bump
fix collection publish redirect
view collection in menu does something
copy and thumbs
list previews, pending, context menus, list page
enter to add collection, lists page empty state
playable lists only, delete feature, bump
put fileListDownloaded back
better collection titles
improve collection claim details
fix horiz more icon
fix up channel page
style, copy, bump
refactor preview overlay properties,
fix reposts showing as floppydisk
add watch later toast,
small overlay properties on wunderbar results,
fix collection actions buttons
bump
cleanup
cleaning, refactoring
bump
preview thumb styling, cleanup
support discover page lists search
sync, bump
bump, fix sync more
enforce builtin order for now
new lists page empty state
try to indicate unpublished edits in lists
bump
fix autoplay and linting
consts, fix autoplay
bugs
fixes
cleanup
fix, bump
lists experimental ui, fixes
refactor listIndex out
hack in collection fallback thumb
bump
2021-02-06 08:03:51 +01:00
|
|
|
font-size: var(--font-base);
|
|
|
|
|
border-left-width: 0;
|
|
|
|
|
margin: 0;
|
2021-12-02 07:00:55 +01:00
|
|
|
width: 100%;
|
wip
wip
wip - everything but publish, autoplay, and styling
collection publishing
add channel to collection publish
cleanup
wip
bump
clear mass add after success
move collection item management controls
redirect replace to published collection id
bump
playlist selector on create
bump
use new collection add ui element
bump
wip
gitignore
add content json
wip
bump
context add to playlist
basic collections page style pass wip
wip: edits, buttons, styles...
change fileAuthor to claimAuthor
update, pending bugfixes, delete modal progress, collection header, other bugfixes
bump
cleaning
show page bugfix
builtin collection headers
no playlists, no grid title
wip
style tweaks
use normal looking claim previews for collection tiles
add collection changes
style library previews
collection menulist for delete/view on library
delete modal works for unpublished
rearrange collection publish tabs
clean up collection publishing and items
show on odysee
begin collectoin edit header and css renaming
better thumbnails
bump
fix collection publish redirect
view collection in menu does something
copy and thumbs
list previews, pending, context menus, list page
enter to add collection, lists page empty state
playable lists only, delete feature, bump
put fileListDownloaded back
better collection titles
improve collection claim details
fix horiz more icon
fix up channel page
style, copy, bump
refactor preview overlay properties,
fix reposts showing as floppydisk
add watch later toast,
small overlay properties on wunderbar results,
fix collection actions buttons
bump
cleanup
cleaning, refactoring
bump
preview thumb styling, cleanup
support discover page lists search
sync, bump
bump, fix sync more
enforce builtin order for now
new lists page empty state
try to indicate unpublished edits in lists
bump
fix autoplay and linting
consts, fix autoplay
bugs
fixes
cleanup
fix, bump
lists experimental ui, fixes
refactor listIndex out
hack in collection fallback thumb
bump
2021-02-06 08:03:51 +01:00
|
|
|
button {
|
2021-12-02 07:00:55 +01:00
|
|
|
padding: var(--spacing-xxs);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.button__content {
|
|
|
|
|
display: unset;
|
|
|
|
|
}
|
|
|
|
|
line-height: 1.2;
|
|
|
|
|
font-weight: var(--font-weight-bold);
|
|
|
|
|
height: 100%;
|
|
|
|
|
background-color: var(--color-button-alt-bg);
|
|
|
|
|
color: var(--color-button-alt-text);
|
|
|
|
|
text-align: center;
|
2022-01-27 16:20:21 +01:00
|
|
|
|
2021-12-02 07:00:55 +01:00
|
|
|
&:hover {
|
2022-04-14 23:27:16 +02:00
|
|
|
background-color: var(--color-primary);
|
|
|
|
|
color: var(--color-primary-contrast);
|
|
|
|
|
.icon {
|
|
|
|
|
stroke: var(--color-primary-contrast);
|
|
|
|
|
}
|
2021-12-02 07:00:55 +01:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
@media (max-width: $breakpoint-small) {
|
|
|
|
|
font-size: var(--font-small);
|
wip
wip
wip - everything but publish, autoplay, and styling
collection publishing
add channel to collection publish
cleanup
wip
bump
clear mass add after success
move collection item management controls
redirect replace to published collection id
bump
playlist selector on create
bump
use new collection add ui element
bump
wip
gitignore
add content json
wip
bump
context add to playlist
basic collections page style pass wip
wip: edits, buttons, styles...
change fileAuthor to claimAuthor
update, pending bugfixes, delete modal progress, collection header, other bugfixes
bump
cleaning
show page bugfix
builtin collection headers
no playlists, no grid title
wip
style tweaks
use normal looking claim previews for collection tiles
add collection changes
style library previews
collection menulist for delete/view on library
delete modal works for unpublished
rearrange collection publish tabs
clean up collection publishing and items
show on odysee
begin collectoin edit header and css renaming
better thumbnails
bump
fix collection publish redirect
view collection in menu does something
copy and thumbs
list previews, pending, context menus, list page
enter to add collection, lists page empty state
playable lists only, delete feature, bump
put fileListDownloaded back
better collection titles
improve collection claim details
fix horiz more icon
fix up channel page
style, copy, bump
refactor preview overlay properties,
fix reposts showing as floppydisk
add watch later toast,
small overlay properties on wunderbar results,
fix collection actions buttons
bump
cleanup
cleaning, refactoring
bump
preview thumb styling, cleanup
support discover page lists search
sync, bump
bump, fix sync more
enforce builtin order for now
new lists page empty state
try to indicate unpublished edits in lists
bump
fix autoplay and linting
consts, fix autoplay
bugs
fixes
cleanup
fix, bump
lists experimental ui, fixes
refactor listIndex out
hack in collection fallback thumb
bump
2021-02-06 08:03:51 +01:00
|
|
|
|
2022-01-27 16:20:21 +01:00
|
|
|
&:focus {
|
|
|
|
|
background-color: var(--color-button-alt-bg);
|
|
|
|
|
}
|
wip
wip
wip - everything but publish, autoplay, and styling
collection publishing
add channel to collection publish
cleanup
wip
bump
clear mass add after success
move collection item management controls
redirect replace to published collection id
bump
playlist selector on create
bump
use new collection add ui element
bump
wip
gitignore
add content json
wip
bump
context add to playlist
basic collections page style pass wip
wip: edits, buttons, styles...
change fileAuthor to claimAuthor
update, pending bugfixes, delete modal progress, collection header, other bugfixes
bump
cleaning
show page bugfix
builtin collection headers
no playlists, no grid title
wip
style tweaks
use normal looking claim previews for collection tiles
add collection changes
style library previews
collection menulist for delete/view on library
delete modal works for unpublished
rearrange collection publish tabs
clean up collection publishing and items
show on odysee
begin collectoin edit header and css renaming
better thumbnails
bump
fix collection publish redirect
view collection in menu does something
copy and thumbs
list previews, pending, context menus, list page
enter to add collection, lists page empty state
playable lists only, delete feature, bump
put fileListDownloaded back
better collection titles
improve collection claim details
fix horiz more icon
fix up channel page
style, copy, bump
refactor preview overlay properties,
fix reposts showing as floppydisk
add watch later toast,
small overlay properties on wunderbar results,
fix collection actions buttons
bump
cleanup
cleaning, refactoring
bump
preview thumb styling, cleanup
support discover page lists search
sync, bump
bump, fix sync more
enforce builtin order for now
new lists page empty state
try to indicate unpublished edits in lists
bump
fix autoplay and linting
consts, fix autoplay
bugs
fixes
cleanup
fix, bump
lists experimental ui, fixes
refactor listIndex out
hack in collection fallback thumb
bump
2021-02-06 08:03:51 +01:00
|
|
|
}
|
|
|
|
|
|
2021-12-02 07:00:55 +01:00
|
|
|
&.top-right {
|
|
|
|
|
border-top-right-radius: var(--border-radius);
|
|
|
|
|
}
|
|
|
|
|
&.top-left {
|
wip
wip
wip - everything but publish, autoplay, and styling
collection publishing
add channel to collection publish
cleanup
wip
bump
clear mass add after success
move collection item management controls
redirect replace to published collection id
bump
playlist selector on create
bump
use new collection add ui element
bump
wip
gitignore
add content json
wip
bump
context add to playlist
basic collections page style pass wip
wip: edits, buttons, styles...
change fileAuthor to claimAuthor
update, pending bugfixes, delete modal progress, collection header, other bugfixes
bump
cleaning
show page bugfix
builtin collection headers
no playlists, no grid title
wip
style tweaks
use normal looking claim previews for collection tiles
add collection changes
style library previews
collection menulist for delete/view on library
delete modal works for unpublished
rearrange collection publish tabs
clean up collection publishing and items
show on odysee
begin collectoin edit header and css renaming
better thumbnails
bump
fix collection publish redirect
view collection in menu does something
copy and thumbs
list previews, pending, context menus, list page
enter to add collection, lists page empty state
playable lists only, delete feature, bump
put fileListDownloaded back
better collection titles
improve collection claim details
fix horiz more icon
fix up channel page
style, copy, bump
refactor preview overlay properties,
fix reposts showing as floppydisk
add watch later toast,
small overlay properties on wunderbar results,
fix collection actions buttons
bump
cleanup
cleaning, refactoring
bump
preview thumb styling, cleanup
support discover page lists search
sync, bump
bump, fix sync more
enforce builtin order for now
new lists page empty state
try to indicate unpublished edits in lists
bump
fix autoplay and linting
consts, fix autoplay
bugs
fixes
cleanup
fix, bump
lists experimental ui, fixes
refactor listIndex out
hack in collection fallback thumb
bump
2021-02-06 08:03:51 +01:00
|
|
|
border-top-left-radius: var(--border-radius);
|
2021-12-02 07:00:55 +01:00
|
|
|
}
|
|
|
|
|
&.bottom-right {
|
|
|
|
|
border-bottom-right-radius: var(--border-radius);
|
|
|
|
|
}
|
|
|
|
|
&.bottom-left {
|
wip
wip
wip - everything but publish, autoplay, and styling
collection publishing
add channel to collection publish
cleanup
wip
bump
clear mass add after success
move collection item management controls
redirect replace to published collection id
bump
playlist selector on create
bump
use new collection add ui element
bump
wip
gitignore
add content json
wip
bump
context add to playlist
basic collections page style pass wip
wip: edits, buttons, styles...
change fileAuthor to claimAuthor
update, pending bugfixes, delete modal progress, collection header, other bugfixes
bump
cleaning
show page bugfix
builtin collection headers
no playlists, no grid title
wip
style tweaks
use normal looking claim previews for collection tiles
add collection changes
style library previews
collection menulist for delete/view on library
delete modal works for unpublished
rearrange collection publish tabs
clean up collection publishing and items
show on odysee
begin collectoin edit header and css renaming
better thumbnails
bump
fix collection publish redirect
view collection in menu does something
copy and thumbs
list previews, pending, context menus, list page
enter to add collection, lists page empty state
playable lists only, delete feature, bump
put fileListDownloaded back
better collection titles
improve collection claim details
fix horiz more icon
fix up channel page
style, copy, bump
refactor preview overlay properties,
fix reposts showing as floppydisk
add watch later toast,
small overlay properties on wunderbar results,
fix collection actions buttons
bump
cleanup
cleaning, refactoring
bump
preview thumb styling, cleanup
support discover page lists search
sync, bump
bump, fix sync more
enforce builtin order for now
new lists page empty state
try to indicate unpublished edits in lists
bump
fix autoplay and linting
consts, fix autoplay
bugs
fixes
cleanup
fix, bump
lists experimental ui, fixes
refactor listIndex out
hack in collection fallback thumb
bump
2021-02-06 08:03:51 +01:00
|
|
|
border-bottom-left-radius: var(--border-radius);
|
|
|
|
|
}
|
|
|
|
|
|
2021-12-02 07:00:55 +01:00
|
|
|
&.button-collection-delete-confirm {
|
|
|
|
|
background-color: green;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
&.button-collection-delete-cancel {
|
|
|
|
|
background-color: red;
|
wip
wip
wip - everything but publish, autoplay, and styling
collection publishing
add channel to collection publish
cleanup
wip
bump
clear mass add after success
move collection item management controls
redirect replace to published collection id
bump
playlist selector on create
bump
use new collection add ui element
bump
wip
gitignore
add content json
wip
bump
context add to playlist
basic collections page style pass wip
wip: edits, buttons, styles...
change fileAuthor to claimAuthor
update, pending bugfixes, delete modal progress, collection header, other bugfixes
bump
cleaning
show page bugfix
builtin collection headers
no playlists, no grid title
wip
style tweaks
use normal looking claim previews for collection tiles
add collection changes
style library previews
collection menulist for delete/view on library
delete modal works for unpublished
rearrange collection publish tabs
clean up collection publishing and items
show on odysee
begin collectoin edit header and css renaming
better thumbnails
bump
fix collection publish redirect
view collection in menu does something
copy and thumbs
list previews, pending, context menus, list page
enter to add collection, lists page empty state
playable lists only, delete feature, bump
put fileListDownloaded back
better collection titles
improve collection claim details
fix horiz more icon
fix up channel page
style, copy, bump
refactor preview overlay properties,
fix reposts showing as floppydisk
add watch later toast,
small overlay properties on wunderbar results,
fix collection actions buttons
bump
cleanup
cleaning, refactoring
bump
preview thumb styling, cleanup
support discover page lists search
sync, bump
bump, fix sync more
enforce builtin order for now
new lists page empty state
try to indicate unpublished edits in lists
bump
fix autoplay and linting
consts, fix autoplay
bugs
fixes
cleanup
fix, bump
lists experimental ui, fixes
refactor listIndex out
hack in collection fallback thumb
bump
2021-02-06 08:03:51 +01:00
|
|
|
}
|
2022-01-27 16:20:21 +01:00
|
|
|
|
|
|
|
|
&.button-collection-drag {
|
|
|
|
|
cursor: grab;
|
|
|
|
|
display: flex;
|
|
|
|
|
align-content: center;
|
|
|
|
|
justify-content: center;
|
|
|
|
|
align-items: center;
|
|
|
|
|
padding-bottom: var(--spacing-xs);
|
|
|
|
|
}
|
wip
wip
wip - everything but publish, autoplay, and styling
collection publishing
add channel to collection publish
cleanup
wip
bump
clear mass add after success
move collection item management controls
redirect replace to published collection id
bump
playlist selector on create
bump
use new collection add ui element
bump
wip
gitignore
add content json
wip
bump
context add to playlist
basic collections page style pass wip
wip: edits, buttons, styles...
change fileAuthor to claimAuthor
update, pending bugfixes, delete modal progress, collection header, other bugfixes
bump
cleaning
show page bugfix
builtin collection headers
no playlists, no grid title
wip
style tweaks
use normal looking claim previews for collection tiles
add collection changes
style library previews
collection menulist for delete/view on library
delete modal works for unpublished
rearrange collection publish tabs
clean up collection publishing and items
show on odysee
begin collectoin edit header and css renaming
better thumbnails
bump
fix collection publish redirect
view collection in menu does something
copy and thumbs
list previews, pending, context menus, list page
enter to add collection, lists page empty state
playable lists only, delete feature, bump
put fileListDownloaded back
better collection titles
improve collection claim details
fix horiz more icon
fix up channel page
style, copy, bump
refactor preview overlay properties,
fix reposts showing as floppydisk
add watch later toast,
small overlay properties on wunderbar results,
fix collection actions buttons
bump
cleanup
cleaning, refactoring
bump
preview thumb styling, cleanup
support discover page lists search
sync, bump
bump, fix sync more
enforce builtin order for now
new lists page empty state
try to indicate unpublished edits in lists
bump
fix autoplay and linting
consts, fix autoplay
bugs
fixes
cleanup
fix, bump
lists experimental ui, fixes
refactor listIndex out
hack in collection fallback thumb
bump
2021-02-06 08:03:51 +01:00
|
|
|
}
|
|
|
|
|
|
2020-07-28 01:12:59 +02:00
|
|
|
.button-tab-group {
|
|
|
|
|
margin-bottom: var(--spacing-l);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.button-group,
|
|
|
|
|
.button-tab-group {
|
2020-06-08 20:42:29 +02:00
|
|
|
display: flex;
|
|
|
|
|
|
2020-06-10 00:09:24 +02:00
|
|
|
.button:first-child:not(:only-child) {
|
2020-06-08 20:42:29 +02:00
|
|
|
border-top-right-radius: 0;
|
|
|
|
|
border-bottom-right-radius: 0;
|
2022-04-14 23:27:16 +02:00
|
|
|
margin-right: 1px;
|
2020-06-08 20:42:29 +02:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.button:nth-child(2) {
|
|
|
|
|
border-top-left-radius: 0;
|
|
|
|
|
border-bottom-left-radius: 0;
|
2022-04-14 23:27:16 +02:00
|
|
|
margin-left: 1px;
|
|
|
|
|
&:hover {
|
|
|
|
|
fill: var(--color-text) !important;
|
|
|
|
|
}
|
2020-06-08 20:42:29 +02:00
|
|
|
}
|
2021-07-19 21:34:15 +02:00
|
|
|
|
|
|
|
|
.button--file-action {
|
|
|
|
|
&:first-child {
|
|
|
|
|
margin-right: var(--spacing-s);
|
|
|
|
|
}
|
|
|
|
|
}
|
2020-06-08 20:42:29 +02:00
|
|
|
}
|
2020-07-08 09:38:16 +02:00
|
|
|
|
2021-04-26 21:19:17 +02:00
|
|
|
.button--file-action {
|
|
|
|
|
&:first-child {
|
|
|
|
|
margin-right: var(--spacing-s);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
2022-04-14 23:27:16 +02:00
|
|
|
.button--hash-id {
|
|
|
|
|
@include font-mono;
|
|
|
|
|
}
|
2020-07-08 09:38:16 +02:00
|
|
|
|
2022-04-14 23:27:16 +02:00
|
|
|
.button-rotate {
|
|
|
|
|
transform: rotate(90deg);
|
|
|
|
|
transition: transform 0.2s;
|
|
|
|
|
margin-right: var(--spacing-s) !important;
|
|
|
|
|
}
|
|
|
|
|
//
|
|
|
|
|
//.button-like {
|
|
|
|
|
// &:hover {
|
|
|
|
|
// .button__label {
|
|
|
|
|
// color: var(--color-fire) !important;
|
|
|
|
|
// }
|
|
|
|
|
// .icon {
|
|
|
|
|
// stroke: var(--color-fire) !important;
|
|
|
|
|
// }
|
|
|
|
|
// }
|
|
|
|
|
// &:focus-visible {
|
|
|
|
|
// box-shadow: 0px 0px 0px 2px var(--color-fire) inset !important;
|
|
|
|
|
// .button__content {
|
|
|
|
|
// .button__label {
|
|
|
|
|
// color: var(--color-fire) !important;
|
|
|
|
|
// }
|
|
|
|
|
// .icon {
|
|
|
|
|
// stroke: var(--color-fire) !important;
|
|
|
|
|
// }
|
|
|
|
|
// }
|
|
|
|
|
// }
|
|
|
|
|
//}
|
|
|
|
|
|
|
|
|
|
.button-like.comment__action--active {
|
|
|
|
|
.comment__reaction-count {
|
|
|
|
|
color: var(--color-fire) !important;
|
2020-07-08 09:38:16 +02:00
|
|
|
}
|
|
|
|
|
}
|
2021-03-25 12:24:49 +01:00
|
|
|
|
2022-04-14 23:27:16 +02:00
|
|
|
//.button-dislike {
|
|
|
|
|
// &:hover {
|
|
|
|
|
// .button__label {
|
|
|
|
|
// color: var(--color-slime) !important;
|
|
|
|
|
// }
|
|
|
|
|
// .icon {
|
|
|
|
|
// //stroke: var(--color-slime) !important;
|
|
|
|
|
// }
|
|
|
|
|
// }
|
|
|
|
|
// &:focus-visible {
|
|
|
|
|
// box-shadow: 0px 0px 0px 2px var(--color-slime) inset !important;
|
|
|
|
|
// .button__content {
|
|
|
|
|
// .button__label {
|
|
|
|
|
// //color: var(--color-slime) !important;
|
|
|
|
|
// }
|
|
|
|
|
// .icon {
|
|
|
|
|
// //stroke: var(--color-slime) !important;
|
|
|
|
|
// }
|
|
|
|
|
// }
|
|
|
|
|
// }
|
|
|
|
|
//}
|
|
|
|
|
|
|
|
|
|
.button-dislike.comment__action--active {
|
|
|
|
|
.comment__reaction-count {
|
|
|
|
|
color: var(--color-slime);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.button-following {
|
|
|
|
|
color: var(--color-primary-contrast) !important;
|
|
|
|
|
//background-color: rgba(var(--color-primary-dynamic),0.5) !important;
|
|
|
|
|
background-color: rgba(125, 125, 125, 0.5) !important;
|
|
|
|
|
.icon {
|
|
|
|
|
stroke: var(--color-primary-contrast) !important;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.recommended-content__bubble {
|
|
|
|
|
// margin-top: var(--spacing-xs);
|
|
|
|
|
display: flex;
|
|
|
|
|
|
|
|
|
|
.button-toggle:nth-child(2) {
|
|
|
|
|
margin-left: 2px;
|
|
|
|
|
@media (min-width: $breakpoint-small) {
|
|
|
|
|
margin-right: var(--spacing-xs);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.button-bubble {
|
|
|
|
|
border-radius: 1rem;
|
|
|
|
|
padding-left: var(--spacing-m);
|
|
|
|
|
padding-right: var(--spacing-m);
|
|
|
|
|
margin-right: var(--spacing-xxs);
|
|
|
|
|
background-color: var(--color-button-toggle-bg) !important;
|
|
|
|
|
color: var(--color-button-toggle-text);
|
|
|
|
|
font-size: var(--font-base);
|
|
|
|
|
padding: 0 var(--spacing-xs);
|
|
|
|
|
height: 2rem;
|
|
|
|
|
max-width: 15rem;
|
|
|
|
|
.button__content {
|
|
|
|
|
height: unset;
|
|
|
|
|
}
|
|
|
|
|
&:hover:not(.button-bubble--active) {
|
|
|
|
|
background-color: var(--color-button-toggle-bg-hover) !important;
|
|
|
|
|
|
|
|
|
|
.button__label {
|
|
|
|
|
color: var(--color-button-toggle-text-hover) !important;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.button-bubble:first-of-type {
|
|
|
|
|
margin-left: 0;
|
|
|
|
|
}
|
|
|
|
|
.button-bubble--active {
|
|
|
|
|
color: var(--color-button-toggle-text-active) !important;
|
|
|
|
|
background-color: var(--color-button-toggle-bg-active) !important;
|
|
|
|
|
box-shadow: unset;
|
|
|
|
|
&:hover {
|
|
|
|
|
cursor: default;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.file-reaction__tooltip-inner {
|
|
|
|
|
margin: 0px !important;
|
2021-03-25 12:24:49 +01:00
|
|
|
}
|
