lbry-desktop/ui/scss/component/_claim-list.scss

1395 lines
26 KiB
SCSS
Raw Normal View History

2019-09-27 20:56:15 +02:00
.claim-list {
.claim-preview__wrapper:not(.claim-preview__wrapper--channel):not(.claim-preview__wrapper--small) {
padding: var(--spacing-m);
background-color: rgba(var(--color-header-background-base), 0.6);
.media__thumb {
width: calc(var(--file-list-thumbnail-width) * 1.2);
}
&:hover {
background-color: rgba(var(--color-header-background-base), 0.9);
}
}
@media (max-width: $breakpoint-small) {
.media__thumb {
width: var(--file-list-thumbnail-width) !important;
}
}
}
[aria-expanded='true'].claim__menu-button {
opacity: 1;
background-color: var(--color-header-background);
border-radius: var(--border-radius);
.icon {
stroke: var(--color-primary);
2019-09-27 20:56:15 +02:00
}
}
.claim-list__header {
2019-06-11 20:10:58 +02:00
display: flex;
2020-01-02 23:30:58 +01:00
flex-wrap: wrap;
align-items: center;
2020-06-01 19:03:19 +02:00
margin: var(--spacing-m) 0;
2020-01-02 21:36:03 +01:00
margin-top: 0;
2019-07-21 23:31:22 +02:00
font-size: var(--font-body);
2019-06-11 20:10:58 +02:00
2020-01-02 23:30:58 +01:00
.spinner {
2020-06-01 19:03:19 +02:00
margin-left: var(--spacing-m);
2019-06-11 20:10:58 +02:00
}
@media (max-width: $breakpoint-small) {
margin-top: var(--spacing-s);
}
2019-06-17 22:32:38 +02:00
}
.claim-list__dropdown {
2020-06-01 19:03:19 +02:00
padding: 0 var(--spacing-m);
padding-right: var(--spacing-xl);
background-position: right var(--spacing-m) center;
2019-12-18 06:27:08 +01:00
@media (max-width: $breakpoint-small) {
2020-01-02 23:30:58 +01:00
margin-left: 0;
2019-12-18 06:27:08 +01:00
}
2019-11-22 22:13:00 +01:00
}
2019-06-29 00:21:21 +02:00
2020-01-02 21:36:03 +01:00
.claim-list__header-label {
position: absolute;
transform: translateY(-130%);
font-size: var(--font-body);
font-weight: var(--font-weight-bold);
//margin-top: var(--spacing-m);
color: var(--color-text);
2021-04-26 21:19:17 +02:00
overflow: visible;
2020-01-02 21:36:03 +01:00
.icon {
width: var(--font-small);
height: var(--font-small);
2020-06-01 19:03:19 +02:00
margin-right: var(--spacing-xs);
stroke: var(--color-text);
2020-01-02 21:36:03 +01:00
}
@media (max-width: $breakpoint-small) {
position: static;
transform: none;
}
2020-01-02 17:30:27 +01:00
}
2019-11-22 22:13:00 +01:00
.claim-list__conjuction {
color: var(--color-text-subtitle);
font-size: var(--font-small);
2019-06-11 20:10:58 +02:00
}
.claim-list__alt-controls {
align-self: flex-start;
2019-06-11 20:10:58 +02:00
display: flex;
align-items: center;
margin-left: auto;
& > * {
2020-06-01 19:03:19 +02:00
margin-left: var(--spacing-s);
2019-06-11 20:10:58 +02:00
}
2019-12-18 06:27:08 +01:00
@media (max-width: $breakpoint-small) {
display: none;
}
2019-06-11 20:10:58 +02:00
}
.claim-list__alt-controls--wrap {
@extend .claim-list__alt-controls;
@media (max-width: $breakpoint-small) {
display: flex;
flex-wrap: wrap;
}
}
2020-01-31 17:43:14 +01:00
.claim-preview__wrapper {
2021-03-11 18:08:11 +01:00
@include font-sans;
2020-06-01 19:03:19 +02:00
padding: var(--spacing-m);
border-radius: var(--border-radius);
2020-01-31 17:43:14 +01:00
list-style: none;
position: relative;
.claim__menu-button {
right: calc(var(--spacing-m) - 8px);
margin-top: var(--spacing-xxs);
}
.claim-preview__repost-author {
width: 120px;
height: 120px;
overflow: hidden;
position: absolute;
top: var(--spacing-m);
left: var(--spacing-m);
.claim-preview__repost-ribbon {
position: absolute;
display: block;
width: 225px;
padding-top: 4px;
padding-right: 8px;
background-color: var(--color-brand-blue);
color: var(--color-primary-contrast);
text-align: center;
z-index: 1;
font-size: var(--font-xxsmall);
left: -80px;
top: 10px;
transform: rotate(-45deg);
.button--uri-indicator {
top: -3px;
}
.button {
width: 80px;
text-align: center;
.button__content {
width: 100%;
.channel-name {
width: 100%;
color: var(--color-primary-contrast);
font-size: var(--font-xxsmall);
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
&:hover {
color: var(--color-secondary);
}
}
}
}
}
@media (max-width: $breakpoint-small) {
top: var(--spacing-s);
left: var(--spacing-s);
height: 80px;
width: 80px;
.claim-preview__repost-ribbon {
width: 190px;
padding-top: 0;
left: -66px;
.icon {
margin-bottom: -4px;
}
.button {
width: 70px;
.button__content {
.channel-name {
font-size: var(--font-xxxsmall);
}
}
}
}
}
}
.claim-preview {
.claim-preview-metadata {
.media__subtitle {
.button {
display: inline;
}
span:not(.channel-name) {
font-size: var(--font-xsmall);
}
}
}
}
&:hover {
.claim__menu-button {
2021-07-15 19:13:31 +02:00
opacity: 1;
}
}
@media (max-width: $breakpoint-small) {
.claim-preview {
.media__thumb {
width: calc(var(--file-list-thumbnail-width) * 0.8) !important;
}
.claim-preview-metadata {
.claim-tile__info {
margin-top: var(--spacing-xxxs);
}
.claim-preview__title {
margin-right: var(--spacing-m);
}
.media__subtitle {
.button__content {
height: auto;
}
.view_count {
font-size: var(--font-xsmall);
}
}
}
.claim-preview__actions {
margin-top: 0;
.claim-preview__primary-actions {
.claim-preview__channel-staked {
margin-bottom: 0;
}
}
}
}
.claim__menu-button {
opacity: 1;
}
}
2020-01-31 17:43:14 +01:00
}
2020-02-05 19:01:07 +01:00
.claim-preview__wrapper--notice {
background-color: var(--color-notice);
}
2020-01-31 17:43:14 +01:00
.claim-preview__wrapper--inline {
padding: 0;
}
.claim-preview__wrapper--small {
padding-top: var(--spacing-s);
padding-bottom: 0px !important;
margin-bottom: 0px !important;
padding-left: 0px;
padding-right: 0px;
.claim-preview__title {
font-size: var(--font-small);
}
@media (max-width: $breakpoint-small) {
margin-bottom: var(--spacing-xxs) !important;
padding: 0 !important;
}
2021-06-29 18:57:22 +02:00
.button--uri-indicator {
max-width: 12rem;
}
.claim__menu-button {
margin-top: 6px;
&:hover {
.icon {
stroke: var(--color-link);
}
}
}
}
.claim-preview__wrapper--channel {
position: relative;
border-radius: var(--border-radius);
background: rgba(var(--color-header-background-base), 0.6);
padding: var(--spacing-m) !important;
.channel-name {
&:hover {
color: var(--color-secondary);
}
}
.claim__menu-button {
right: 0;
margin-top: var(--spacing-xxs);
.icon {
stroke: var(--color-text);
}
&:hover {
.icon {
stroke: var(--color-primary);
}
}
}
.claim-preview__repost-author {
left: 0px;
top: 0px;
//left: auto;
font-size: var(--font-small);
opacity: 0.8;
z-index: 5;
svg {
margin-right: 4px;
margin-bottom: -2px;
}
}
&:hover {
background: rgba(var(--color-header-background-base), 0.9);
}
2020-01-31 17:43:14 +01:00
}
2019-06-27 08:18:45 +02:00
.claim-preview {
2019-09-27 20:56:15 +02:00
flex: 1;
2019-06-11 20:10:58 +02:00
display: flex;
position: relative;
2019-07-09 03:19:46 +02:00
overflow: visible;
2019-06-11 20:10:58 +02:00
2019-11-25 18:42:49 +01:00
&:not(.claim-preview--inline):not(.claim-preview--pending):not(.claim-preview--inactive) {
2019-07-21 23:31:22 +02:00
cursor: pointer;
}
2019-06-11 20:10:58 +02:00
.media__thumb {
overflow: hidden;
$width: calc(var(--file-list-thumbnail-width) * 1.2);
width: var(--file-list-thumbnail-width);
@include handleClaimListGifThumbnail($width);
2020-05-28 19:07:04 +02:00
2019-06-11 20:10:58 +02:00
flex-shrink: 0;
margin-right: var(--spacing-s);
box-shadow: 0px 0px 0px 1px rgba(var(--color-primary-dynamic), 0.3) inset; //here
2019-06-11 20:10:58 +02:00
}
2019-12-18 06:27:08 +01:00
.media__thumb-placeholder-text {
display: flex;
align-items: center;
padding: var(--spacing-m);
}
.channel-thumbnail {
2020-05-28 19:07:04 +02:00
@include handleChannelGif(6rem);
}
// show watch later button and duration divs when hovered
2020-02-05 03:54:19 +01:00
&:hover {
.media__thumb {
box-shadow: 0px 0px 0px 2px var(--color-primary-dynamic) inset;
}
.claim-preview__title {
color: var(--color-link);
}
2020-02-05 03:54:19 +01:00
.claim-preview__hover-actions {
display: block;
}
.claim-preview__file-property-overlay {
opacity: 1;
}
.button--file-action {
.icon {
stroke: #f3f4f6;
}
}
.ff-canvas {
opacity: 0 !important;
transition: opacity 1s !important;
}
.ff-image {
opacity: 1 !important;
}
2020-02-05 03:54:19 +01:00
}
2019-12-18 06:27:08 +01:00
@media (max-width: $breakpoint-small) {
2019-12-20 21:46:59 +01:00
font-size: 14px;
.channel-thumbnail {
@include handleChannelGif(4rem);
2019-12-18 06:27:08 +01:00
}
}
2019-07-23 10:05:51 +02:00
}
.claim-preview__empty {
display: flex;
align-items: center;
justify-content: center;
}
2019-06-27 08:18:45 +02:00
.claim-preview--large {
2019-07-21 23:31:22 +02:00
border: none;
min-height: 8rem;
2019-06-11 20:10:58 +02:00
&:hover {
background-color: transparent;
}
@media (max-width: $breakpoint-small) {
min-height: 4rem;
}
2019-06-11 20:10:58 +02:00
.media__thumb {
2019-07-21 23:31:22 +02:00
width: 14rem;
@include handleClaimListGifThumbnail(14rem);
2020-04-01 22:00:09 +02:00
@media (max-width: $breakpoint-small) {
min-height: 5rem;
width: 8rem;
2020-04-01 22:00:09 +02:00
}
2019-07-21 23:31:22 +02:00
}
.channel-thumbnail {
width: 7.5rem;
2020-05-28 19:07:04 +02:00
@include handleChannelGif(7.5rem);
@media (max-width: $breakpoint-small) {
width: 5rem;
@include handleChannelGif(5rem);
}
2019-07-21 23:31:22 +02:00
}
2021-04-26 21:19:17 +02:00
.claim-preview__text {
height: 7.5rem;
}
@media (max-width: $breakpoint-small) {
.channel-thumbnail {
@include handleChannelGif(6rem);
}
.claim-preview__text {
height: 3.5rem;
}
}
2019-07-21 23:31:22 +02:00
}
.claim-preview--small {
.channel-thumbnail {
2020-05-28 19:07:04 +02:00
@include handleChannelGif(4rem);
2019-06-11 20:10:58 +02:00
}
.media__thumb {
background-size: 100%;
background-position: center;
transition: background-size 0.2s ease-in-out;
}
&:hover {
.claim-preview__title {
color: var(--color-link);
}
.media__thumb {
background-size: 108%;
}
}
.media__subtitle {
display: flex;
flex-direction: column;
}
2019-06-11 20:10:58 +02:00
}
2021-12-02 07:00:55 +01:00
.claim-preview--collection-mine {
height: 108px;
.media__thumb {
position: absolute;
right: 0;
Playlistorder (#7442) * Add horizontal layout (#636) * Test out a horizontal scroll for upcoming (tile only for now) * - add support for list layout - add following label on home page - clan up css and naming conventions * Update header type + show only if scheduled streams are showing * [Playlist] Pull in sorting changes from desktop + Add Drag-n-Drop + Handle unavailable/deleted claims (#641) * Add ordering Icons * Refactor doCollectionEdit - It required claims as parameter, when only uris are used to populate the collection, so that was changed to pass down the uris instead. - There were unused and mostly unnecessary functions inside, for example the parameter claimIds was never used so it would never enter the claimSearch function which again would be used to generate uris, so it's better to just use uris as parameter * Add List Reordering changes * Add toggle button for list editing * Add toggle on content page collection sidebar * Enable drag-n-drop to re-order list items https://www.youtube.com/watch?v=aYZRRyukuIw * Allow removing all unavailable claims from a List * Fix <g> on icons * Fix section buttons positioning * Move preventDefault and stopPropagation to buttons div instead of each button, preventing clicking even if disabled opening the claim * Change dragging cursor * Fix sizing * Fix dragging component * Restrict dragging to vertical axis * Ignore shuffle state for ordering * Fix console errors * Mobile fixes * Fix sidebar spacing * Fix grey on mobile after click * cleanup Co-authored-by: Dan Peterson <dan@dan-peterson.ca> Co-authored-by: saltrafael <76502841+saltrafael@users.noreply.github.com>
2022-01-27 16:20:21 +01:00
.claim-preview__hover-actions {
display: none;
}
}
.claim-preview__text {
position: absolute;
right: var(--spacing-s);
width: var(--file-list-thumbnail-width);
background-color: var(--color-header-background);
padding: var(--spacing-xxxs);
border-radius: var(--border-radius) var(--border-radius) 0 0;
.claim-preview-info {
.claim-preview__title {
margin-right: 0;
font-size: var(--font-xxsmall);
}
}
.media__subtitle {
.button__content {
.channel-name {
font-size: var(--font-xxxsmall);
}
}
.date_time {
font-size: var(--font-xxxsmall) !important;
}
}
.claim-tile__info {
padding-bottom: 0;
}
Playlistorder (#7442) * Add horizontal layout (#636) * Test out a horizontal scroll for upcoming (tile only for now) * - add support for list layout - add following label on home page - clan up css and naming conventions * Update header type + show only if scheduled streams are showing * [Playlist] Pull in sorting changes from desktop + Add Drag-n-Drop + Handle unavailable/deleted claims (#641) * Add ordering Icons * Refactor doCollectionEdit - It required claims as parameter, when only uris are used to populate the collection, so that was changed to pass down the uris instead. - There were unused and mostly unnecessary functions inside, for example the parameter claimIds was never used so it would never enter the claimSearch function which again would be used to generate uris, so it's better to just use uris as parameter * Add List Reordering changes * Add toggle button for list editing * Add toggle on content page collection sidebar * Enable drag-n-drop to re-order list items https://www.youtube.com/watch?v=aYZRRyukuIw * Allow removing all unavailable claims from a List * Fix <g> on icons * Fix section buttons positioning * Move preventDefault and stopPropagation to buttons div instead of each button, preventing clicking even if disabled opening the claim * Change dragging cursor * Fix sizing * Fix dragging component * Restrict dragging to vertical axis * Ignore shuffle state for ordering * Fix console errors * Mobile fixes * Fix sidebar spacing * Fix grey on mobile after click * cleanup Co-authored-by: Dan Peterson <dan@dan-peterson.ca> Co-authored-by: saltrafael <76502841+saltrafael@users.noreply.github.com>
2022-01-27 16:20:21 +01:00
}
2021-12-02 07:00:55 +01:00
}
2019-07-11 20:06:25 +02:00
.claim-preview--pending {
opacity: 0.6;
.claim-tile__info {
flex-wrap: wrap;
.claim-preview__channel-staked {
flex-basis: 2.1rem;
}
.confirming-change {
flex-basis: 100%;
}
}
.card__main-actions {
border-top: unset;
}
}
.claim-preview--padded {
2020-06-01 19:03:19 +02:00
padding: var(--spacing-s);
}
2019-07-21 23:31:22 +02:00
.claim-preview--inline {
.channel-thumbnail {
@include handleChannelGif(2.5rem);
2021-04-26 21:19:17 +02:00
@media (min-width: $breakpoint-small) {
@include handleChannelGif(var(--channel-thumbnail-width--small));
}
2019-07-21 23:31:22 +02:00
}
2019-12-18 06:27:08 +01:00
.claim-preview__actions {
align-self: flex-end;
margin-bottom: auto;
width: auto;
.button--alt {
2022-04-20 23:17:47 +02:00
color: var(--color-text);
.icon {
stroke: var(--color-primary-contrast);
}
}
2019-12-18 06:27:08 +01:00
}
.claim-preview__text {
width: 100%;
flex-direction: row;
justify-content: space-between;
2020-09-30 22:46:20 +02:00
flex-wrap: wrap;
align-items: top;
2019-12-18 06:27:08 +01:00
}
2019-12-19 21:43:49 +01:00
@media (max-width: $breakpoint-xsmall) {
.claim-preview__actions {
2021-04-26 21:19:17 +02:00
.claim-preview__primary-actions {
.button {
margin-top: 0;
}
}
2019-12-19 21:43:49 +01:00
}
}
2019-12-18 06:27:08 +01:00
}
.claim-preview--channel {
.claim-preview__actions {
margin-top: 0px;
}
}
2019-12-18 06:27:08 +01:00
.claim-preview__text {
width: 100%;
display: flex;
flex-direction: column;
justify-content: space-between;
2019-07-21 23:31:22 +02:00
}
2020-01-30 23:25:15 +01:00
.claim-preview__title {
2019-11-07 20:39:22 +01:00
font-weight: var(--font-weight-bold);
2019-11-22 22:13:00 +01:00
font-size: var(--font-body);
margin-right: var(--spacing-m);
2019-08-13 07:35:13 +02:00
overflow: hidden;
text-overflow: ellipsis;
max-width: 100%;
color: rgba(var(--color-text-base), 0.9);
.truncated-text {
display: -webkit-box;
width: 100%;
overflow: hidden;
text-overflow: ellipsis;
-webkit-line-clamp: 1 !important;
@media (max-width: $breakpoint-xsmall) {
-webkit-line-clamp: 2 !important;
}
@media (min-width: $breakpoint-medium) {
-webkit-line-clamp: 1 !important;
}
}
2019-07-21 23:31:22 +02:00
}
.claim-preview__channel-sub-count {
color: var(--color-text-subtitle);
font-size: var(--font-xsmall);
}
.claim-preview__custom-properties {
text-align: right;
display: flex;
flex-direction: column;
justify-content: flex-end;
}
2019-06-27 08:18:45 +02:00
.claim-preview-metadata {
2019-06-11 20:10:58 +02:00
display: flex;
flex-direction: column;
2019-07-09 03:19:46 +02:00
flex: 1;
2019-06-11 20:10:58 +02:00
}
.claim-preview-metadata-sub-upload {
position: relative;
display: flex;
text-align: left;
}
2019-06-27 08:18:45 +02:00
.claim-preview-info {
2019-06-11 20:10:58 +02:00
align-items: flex-start;
}
2019-06-27 08:18:45 +02:00
.claim-preview-info,
.claim-preview-properties {
2019-06-11 20:10:58 +02:00
display: flex;
justify-content: space-between;
}
2019-12-18 06:27:08 +01:00
.claim-preview__actions {
align-self: flex-end;
2019-08-02 03:34:48 +02:00
display: flex;
flex-direction: column;
2019-12-18 06:27:08 +01:00
justify-content: space-between;
margin-top: var(--spacing-xs);
2019-12-18 06:27:08 +01:00
width: 100%;
@media (min-width: $breakpoint-small) {
flex-direction: row;
}
2019-08-02 03:34:48 +02:00
}
2019-12-18 06:27:08 +01:00
.claim-preview__primary-actions {
@extend .section__actions;
2021-04-26 21:19:17 +02:00
margin-right: 0;
}
2020-02-11 20:04:51 +01:00
.claim-preview__actions--header {
@extend .claim-preview__actions;
2020-05-11 16:50:32 +02:00
flex-wrap: wrap;
2020-02-11 20:04:51 +01:00
}
2019-08-02 03:34:48 +02:00
.claim-preview__button {
margin-left: 2rem;
}
2019-06-27 08:18:45 +02:00
.claim-preview-properties {
2019-06-11 20:10:58 +02:00
align-items: flex-end;
2019-06-27 22:27:38 +02:00
flex: 1;
2019-11-22 22:13:00 +01:00
font-size: var(--font-small);
color: var(--color-text-subtitle);
2019-06-11 20:10:58 +02:00
}
.claim-upload {
flex: 1;
display: flex;
position: relative;
overflow: visible;
2020-06-01 19:03:19 +02:00
padding: var(--spacing-m);
.media__thumb {
width: var(--file-list-thumbnail-width);
flex-shrink: 0;
margin-right: var(--spacing-s);
}
}
.claim-upload__progress--label {
font-size: var(--font-small);
color: var(--color-text-subtitle);
}
.claim-upload__progress--outer {
width: 100%;
border-radius: var(--border-radius);
background-color: var(--color-header-background);
}
.claim-upload__progress--inner {
border-radius: var(--border-radius);
background: var(--color-primary);
2020-06-01 19:03:19 +02:00
padding: var(--spacing-xxs);
height: 2.4rem;
display: flex;
align-items: center;
}
.claim-upload__progress--inner-text {
position: absolute;
color: var(--color-primary-contrast);
width: 80%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
2020-01-20 17:47:03 +01:00
//
// The _other_ way to view claims
// A grid of tiles
// It should probably go into it's own file once we add more to it
//
.claim-grid {
display: flex;
flex-wrap: wrap;
list-style: none;
align-items: flex-start;
}
.claim-grid__wrapper {
2020-07-22 22:32:18 +02:00
display: flex;
flex-direction: column;
margin-top: var(--spacing-s);
padding-bottom: var(--spacing-l);
2020-01-20 17:47:03 +01:00
@media (max-width: $breakpoint-small) {
&:not(:first-of-type) {
margin-top: var(--spacing-s);
2020-01-20 17:47:03 +01:00
}
}
}
.claim-grid__header {
margin-top: var(--spacing-m);
margin-bottom: var(--spacing-m);
2021-04-23 21:59:48 +02:00
display: flex;
align-items: center;
.button {
&:hover {
text-decoration: none;
}
}
.icon__wrapper {
width: 0.5rem;
height: 0.5rem;
background-color: var(--color-header-background);
2020-09-16 19:02:45 +02:00
margin-right: var(--spacing-m);
.icon {
stroke: var(--color-text);
2020-09-16 19:02:45 +02:00
}
@media (min-width: $breakpoint-small) {
height: 1.5rem;
width: 1.5rem;
}
}
.button__content {
&:hover {
.claim-grid__title {
color: var(--color-primary);
}
.icon {
stroke: var(--color-primary);
}
}
}
}
.claim-grid__header--between {
justify-content: space-between;
}
2020-01-20 17:47:03 +01:00
.claim-grid__title {
font-weight: 300;
font-size: var(--font-large);
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
margin-right: var(--spacing-m);
display: flex;
color: var(--color-text);
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
}
.claim-grid__title-span {
display: flex;
&:hover {
color: var(--color-primary-alt-3); // here
}
}
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
.claim-grid__title--empty {
margin-left: var(--spacing-s);
2020-01-20 17:47:03 +01:00
}
2021-04-26 21:19:17 +02:00
.claim-grid__title--first {
text-align: center;
width: 100%;
margin-bottom: var(--spacing-l);
.no-evil {
font-size: var(--font-heading);
}
}
2020-07-22 22:32:18 +02:00
.claim-grid__title--secondary {
margin-left: auto;
}
2020-01-20 17:47:03 +01:00
.claim-grid__help {
margin-bottom: 12px;
svg {
stroke: var(--color-text-subtitle);
}
}
.claim-preview--tile {
2020-09-17 21:25:58 +02:00
margin-bottom: var(--spacing-m);
2020-01-20 17:47:03 +01:00
margin-right: 0;
margin-top: 0;
2020-06-01 19:03:19 +02:00
margin-left: var(--spacing-m);
2020-01-20 17:47:03 +01:00
justify-content: flex-start;
2020-08-26 23:16:45 +02:00
list-style: none;
2020-01-20 17:47:03 +01:00
2020-08-21 17:49:13 +02:00
.media__thumb {
overflow: hidden;
}
// Hover Zoom Effect
.media__thumb {
background-size: 100%;
transition: background-size 0.2s ease-in-out;
}
.claim-tile__title {
.claim__menu-button {
right: calc(var(--spacing-xs) * -1);
}
2020-08-14 22:14:37 +02:00
}
&:hover {
cursor: pointer;
.media__thumb {
box-shadow: 0px 0px 0px 2px var(--color-primary-dynamic) inset;
background-size: 108%;
}
.claim-tile__title {
color: var(--color-link);
}
.claim__menu-button {
2021-07-15 19:13:31 +02:00
opacity: 1;
}
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
.collection-preview__overlay-thumbs {
opacity: 1;
transition: 0.3s;
}
}
2020-08-14 22:14:37 +02:00
a {
&:focus {
.claim-tile__title {
color: var(--color-primary);
}
.media__thumb {
box-shadow: 0px 0px 0px 1px rgba(var(--color-primary-dynamic), 1) inset;
}
}
}
.claim__menu-button {
&:focus {
border-radius: 50%;
opacity: 1;
}
}
2020-08-21 17:49:13 +02:00
@media (min-width: $breakpoint-large) {
$width: calc((100% - var(--spacing-m) * 5) / 6);
width: $width;
@include handleClaimTileGifThumbnail($width);
&:first-child,
&:nth-child(6n + 1) {
margin-left: 0;
}
}
@media (max-width: $breakpoint-large) and (min-width: $breakpoint-medium) {
$width: calc((100% - var(--spacing-m) * 3) / 4);
width: $width;
@include handleClaimTileGifThumbnail($width);
&:first-child,
&:nth-child(4n + 1) {
margin-left: 0;
}
2020-01-20 17:47:03 +01:00
}
2020-01-30 18:41:21 +01:00
@media (max-width: $breakpoint-medium) and (min-width: $breakpoint-small) {
2020-09-16 20:56:23 +02:00
$width: calc((100vw - var(--side-nav-width--micro) - var(--spacing-xl) * 3) / 3);
2020-05-28 19:07:04 +02:00
width: $width;
@include handleClaimTileGifThumbnail($width);
2020-01-29 16:26:39 +01:00
&:first-child,
&:nth-child(3n + 1) {
margin-left: 0;
}
}
2020-01-20 17:47:03 +01:00
@media (max-width: $breakpoint-small) {
2020-09-17 21:25:58 +02:00
$width: 100%;
2020-05-28 19:07:04 +02:00
width: $width;
@include handleClaimTileGifThumbnail($width);
2020-09-17 21:25:58 +02:00
margin-left: 0;
2020-01-20 17:47:03 +01:00
2020-09-17 21:25:58 +02:00
&:not(:first-child) {
margin-top: var(--spacing-s);
2020-01-20 17:47:03 +01:00
}
.claim__menu-button {
opacity: 1;
}
2020-01-29 16:26:39 +01:00
}
}
Playlistorder (#7442) * Add horizontal layout (#636) * Test out a horizontal scroll for upcoming (tile only for now) * - add support for list layout - add following label on home page - clan up css and naming conventions * Update header type + show only if scheduled streams are showing * [Playlist] Pull in sorting changes from desktop + Add Drag-n-Drop + Handle unavailable/deleted claims (#641) * Add ordering Icons * Refactor doCollectionEdit - It required claims as parameter, when only uris are used to populate the collection, so that was changed to pass down the uris instead. - There were unused and mostly unnecessary functions inside, for example the parameter claimIds was never used so it would never enter the claimSearch function which again would be used to generate uris, so it's better to just use uris as parameter * Add List Reordering changes * Add toggle button for list editing * Add toggle on content page collection sidebar * Enable drag-n-drop to re-order list items https://www.youtube.com/watch?v=aYZRRyukuIw * Allow removing all unavailable claims from a List * Fix <g> on icons * Fix section buttons positioning * Move preventDefault and stopPropagation to buttons div instead of each button, preventing clicking even if disabled opening the claim * Change dragging cursor * Fix sizing * Fix dragging component * Restrict dragging to vertical axis * Ignore shuffle state for ordering * Fix console errors * Mobile fixes * Fix sidebar spacing * Fix grey on mobile after click * cleanup Co-authored-by: Dan Peterson <dan@dan-peterson.ca> Co-authored-by: saltrafael <76502841+saltrafael@users.noreply.github.com>
2022-01-27 16:20:21 +01:00
.claim-preview--horizontal-tile {
&:not(:first-child) {
margin-top: 0;
}
}
2020-01-20 17:47:03 +01:00
.claim-tile__title {
position: relative;
padding: var(--spacing-xs);
padding-left: 0px;
padding-right: var(--spacing-m);
padding-bottom: var(--spacing-xxxs);
margin-bottom: 0;
2020-01-20 17:47:03 +01:00
font-weight: 600;
color: var(--color-text);
2020-09-17 21:25:58 +02:00
font-size: var(--font-small);
2020-01-20 17:47:03 +01:00
@media (min-width: $breakpoint-large) {
min-height: 3.2rem;
padding-bottom: unset;
}
@media (max-width: $breakpoint-small) {
min-height: unset;
2020-01-20 17:47:03 +01:00
}
}
.claim-tile__info {
display: flex;
margin-top: var(--spacing-xxxs);
2020-01-20 17:47:03 +01:00
color: var(--color-subtitle);
padding: 0px;
padding-bottom: var(--spacing-l);
2020-01-20 17:47:03 +01:00
.channel-thumbnail {
2020-05-28 19:07:04 +02:00
@include handleChannelGif(2.1rem);
2020-06-01 19:03:19 +02:00
margin-right: var(--spacing-s);
2020-01-20 17:47:03 +01:00
}
.claim-preview__overlay-properties {
color: rgba(var(--color-text-base) 0.7);
}
@media (max-width: $breakpoint-small) {
padding-bottom: 0;
}
.media__subtitle {
.button__content {
margin-top: 3px;
margin-bottom: -3px;
}
}
2020-01-20 17:47:03 +01:00
}
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
.claim-tile-collection__info {
display: flex;
color: var(--color-subtitle);
.channel-thumbnail {
@include handleChannelGif(2.1rem);
margin-right: var(--spacing-s);
}
}
2020-01-20 17:47:03 +01:00
.claim-tile__about {
font-size: var(--font-xsmall);
color: var(--color-text-subtitle);
2020-11-06 18:52:17 +01:00
overflow: hidden;
white-space: nowrap;
> * {
display: block;
}
2020-01-20 17:47:03 +01:00
}
2020-01-22 15:33:27 +01:00
.claim-tile__publishes {
2020-01-29 16:26:39 +01:00
font-size: var(--font-xsmall);
2020-01-22 15:33:27 +01:00
}
2020-01-20 17:47:03 +01:00
.claim-tile__about--channel {
@extend .claim-tile__about;
flex: 1;
flex-direction: row;
justify-content: space-between;
align-items: center;
2020-01-20 17:47:03 +01:00
font-size: var(--font-body);
}
2020-01-28 19:36:58 +01:00
.claim-tile__about--counts {
display: flex;
flex-wrap: wrap;
font-size: var(--font-xsmall);
margin-top: -3px;
}
.claim-preview__file-property-overlay {
position: absolute;
2020-06-01 19:03:19 +02:00
bottom: var(--spacing-xxs);
right: var(--spacing-xxs);
background-color: var(--color-black);
2020-05-21 17:38:28 +02:00
padding: 0.3rem;
border-radius: var(--border-radius);
z-index: 2;
opacity: 0.7;
// show full opacity for touch devices
@media (pointer: fine), (pointer: coarse) {
opacity: 0.85;
}
.file-properties {
color: var(--color-white);
}
2020-03-26 16:18:05 +01:00
2020-05-21 17:38:28 +02:00
.file-price {
padding: 0.1rem;
}
2020-01-28 19:36:58 +01:00
}
2020-01-29 19:58:43 +01:00
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
.claim-preview__claim-property-overlay {
position: absolute;
bottom: var(--spacing-xxs);
right: var(--spacing-xxs);
background-color: var(--color-black);
border-radius: var(--border-radius);
padding: 0.3rem;
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
opacity: 0.7;
z-index: 2;
.claim-preview__overlay-properties {
color: var(--color-white);
}
.file-price {
padding: 0.1rem;
}
}
.claim-preview__collection-wrapper {
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
z-index: 2;
overflow: hidden;
}
// show duration and watch later button when hovered
2020-01-29 19:58:43 +01:00
.claim-preview--tile {
&:hover {
2020-02-05 17:42:46 +01:00
.claim-preview__hover-actions {
2020-01-29 19:58:43 +01:00
display: block;
}
.claim-preview__file-property-overlay {
opacity: 1;
}
.button--file-action {
.icon {
stroke: #f3f4f6;
}
}
2020-01-29 19:58:43 +01:00
}
}
2020-01-31 17:43:14 +01:00
.claim-preview--tile {
.claim-preview__repost-author {
width: 120px;
height: 120px;
overflow: hidden;
position: absolute;
top: 0px;
left: 0px;
.claim-preview__repost-ribbon {
position: absolute;
display: block;
width: 225px;
padding-top: 4px;
padding-right: 8px;
background-color: var(--color-brand-blue);
color: var(--color-primary-contrast);
text-align: center;
z-index: 1;
font-size: var(--font-xxsmall);
right: -25px;
top: 10px;
transform: rotate(-45deg);
.button--uri-indicator {
top: -3px;
}
.button {
width: 80px;
text-align: center;
.button__content {
width: 100%;
.channel-name {
width: 100%;
color: var(--color-primary-contrast);
font-size: var(--font-xxsmall);
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
&:hover {
opacity: 0.8;
}
}
}
}
}
}
}
2020-01-31 17:43:14 +01:00
.claim-preview__repost-icon {
margin-bottom: -1px; // Offset it slightly because it doesn't look aligned next to all lowercase text + the @ from a channel
2020-01-31 17:43:14 +01:00
}
// div that displays watch later button
2020-02-05 17:42:46 +01:00
.claim-preview__hover-actions {
// if the user is using a mouse
@media (pointer: fine) {
display: none;
}
// if the user doesn't have a pointer (mouse etc) hide watch later button
@media (pointer: none), (pointer: coarse) {
display: none !important;
}
2021-08-02 17:03:55 +02:00
position: relative;
float: right;
2020-06-01 19:03:19 +02:00
top: var(--spacing-xxs);
2021-08-04 15:45:24 +02:00
margin-right: var(--spacing-xxs);
2020-02-05 17:42:46 +01:00
& > * {
2021-08-02 17:03:55 +02:00
color: var(--color-text);
background-color: var(--color-black);
padding: var(--spacing-xxs);
margin-right: 0;
&:hover {
background-color: var(--color-black);
}
}
2021-08-13 17:20:04 +02:00
.button--file-action,
.download-text {
2021-08-02 17:03:55 +02:00
display: block;
margin: 0 0;
padding: var(--spacing-xxs) var(--spacing-xxs);
height: unset;
// label (with 'Add' text) hidden by default
.button__label {
color: #f3f4f6;
font-size: var(--font-small);
display: none;
}
// show the additional watch later text (Add) when hovered
&:hover {
.button__label {
display: inline;
}
}
2020-02-05 17:42:46 +01:00
}
}
.claim-preview__active {
.claim-preview__title {
color: var(--color-link);
}
.media__thumb {
box-shadow: 0px 0px 0px 1px rgba(var(--color-primary-dynamic), 1) inset;
}
.claim-preview:not(.claim-preview--collection-mine):before {
position: absolute;
top: -8px;
left: 62px;
content: '';
z-index: 1;
font-size: 5rem;
color: #fff;
text-shadow: 0 0 3px var(--color-primary), 0 0 5px var(--color-primary);
}
}
.claim-preview__live {
.claim-preview__file-property-overlay {
opacity: 1; // The original 0.7 is not visible over bright thumbnails
color: var(--color-white-alt);
background-color: var(--color-live);
.claim-preview__overlay-properties {
margin-bottom: -2px;
color: white;
font-weight: var(--font-weight-bold);
}
}
.file-properties {
font-weight: var(--font-weight-bold);
margin-top: 2px; // Even out bottom spacing due to all caps "LIVE".
}
.claim-preview__primary-actions {
margin-right: var(--spacing-xs);
}
}
.claim-link {
2021-03-12 17:18:09 +01:00
@include font-sans;
position: relative;
}
.claim-preview__null-label {
margin: auto;
}
.claim-preview__channel-staked {
display: flex;
align-items: center;
.channel-thumbnail {
@include handleChannelGif(2.1rem);
}
}
.claim-tile__header {
position: relative;
.icon {
margin-top: 1px;
&:hover {
stroke: var(--color-primary);
}
}
}
2021-07-15 19:13:31 +02:00
.menu__button {
&.claim__menu-button {
position: absolute;
top: var(--spacing-xs);
right: var(--spacing-xxs);
2021-07-15 19:13:31 +02:00
}
2021-07-15 19:13:31 +02:00
&.claim__menu-button--inline {
position: relative;
@extend .button--alt;
width: var(--height-button);
padding: 0;
border-radius: var(--border-radius);
align-self: flex-end;
}
}
2021-07-15 19:13:31 +02:00
@media (min-width: $breakpoint-small) {
.claim-preview--tile:not(:hover),
.claim-preview__wrapper:not(:hover) {
.claim__menu-button:not(:focus):not([aria-expanded='true']) {
opacity: 0;
}
}
}
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
.claim-preview__overlay-properties {
display: flex;
position: relative;
align-items: center;
color: #dddddd;
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
white-space: nowrap;
font-size: var(--font-xsmall);
line-height: 1.2;
margin-left: 0;
margin-top: auto;
.icon--Heart {
color: var(--color-transparent);
}
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
& > *:not(:last-child) {
margin-right: var(--spacing-xxs);
}
}
.claim-preview__overlay-properties--small {
line-height: 0.9;
font-size: var(--font-xxsmall);
}
.claim__tags {
font-size: var(--font-xsmall);
line-height: 1.2;
margin-left: 0;
margin-top: auto;
position: relative;
.tag {
background-color: var(--color-primary);
color: var(--color-primary-contrast);
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-xsmall);
@media (max-width: $breakpoint-small) {
font-size: var(--font-xxsmall);
margin-top: var(--spacing-xxs);
padding: 2px var(--spacing-xxs);
height: unset;
.button__content {
height: unset;
}
}
&:hover {
background-color: var(--color-secondary);
color: var(--color-secondary-contrast);
}
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
}
& > *:not(:last-child) {
margin-right: var(--spacing-xxs);
}
}
.claim__tags--large {
flex-wrap: wrap;
margin-left: 0;
margin-bottom: var(--spacing-m);
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
& > * {
margin-top: var(--spacing-s);
}
}