2018-12-19 06:44:53 +01:00
|
|
|
// component specific styling should go in the component scss file
|
|
|
|
|
|
2019-07-21 23:31:22 +02:00
|
|
|
*::selection {
|
2022-02-11 19:50:55 +01:00
|
|
|
background-color: var(--color-primary);
|
|
|
|
|
color: var(--color-primary-contrast);
|
2019-07-21 23:31:22 +02:00
|
|
|
}
|
|
|
|
|
|
2019-12-02 18:30:08 +01:00
|
|
|
*:focus {
|
|
|
|
|
outline: none;
|
|
|
|
|
}
|
|
|
|
|
|
2018-12-19 06:44:53 +01:00
|
|
|
html {
|
|
|
|
|
@include font-sans;
|
|
|
|
|
height: 100%;
|
2019-07-17 22:49:06 +02:00
|
|
|
min-height: 100%;
|
2019-06-29 00:21:21 +02:00
|
|
|
|
2019-11-22 22:13:00 +01:00
|
|
|
color: var(--color-text);
|
2019-09-26 18:07:11 +02:00
|
|
|
background-color: var(--color-background);
|
2020-01-08 20:20:30 +01:00
|
|
|
font-size: 16px;
|
2020-01-06 19:32:35 +01:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
body {
|
2022-02-18 18:03:15 +01:00
|
|
|
width: calc(100vw - var(--body-scrollbar-width));
|
|
|
|
|
|
2020-01-06 19:32:35 +01:00
|
|
|
font-size: 1em;
|
2020-07-24 19:17:43 +02:00
|
|
|
cursor: default;
|
|
|
|
|
line-height: 1.5;
|
|
|
|
|
font-weight: 400;
|
|
|
|
|
font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif,
|
|
|
|
|
'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
|
2021-11-29 20:49:12 +01:00
|
|
|
|
|
|
|
|
// The W3C future standard; currently supported by Firefox only.
|
|
|
|
|
// It'll hopefully auto fallback to this when 'webkit-scrollbar' below is deprecated in the future.
|
2022-02-11 19:50:55 +01:00
|
|
|
scrollbar-width: 6px;
|
2021-11-29 20:49:12 +01:00
|
|
|
scrollbar-color: var(--color-scrollbar-thumb-bg) var(--color-scrollbar-track-bg);
|
|
|
|
|
}
|
|
|
|
|
|
2022-02-18 18:03:15 +01:00
|
|
|
body::-webkit-scrollbar {
|
|
|
|
|
width: var(--body-scrollbar-width);
|
|
|
|
|
height: 6px;
|
|
|
|
|
}
|
|
|
|
|
|
2021-11-29 20:49:12 +01:00
|
|
|
body *::-webkit-scrollbar {
|
2022-02-18 18:03:15 +01:00
|
|
|
width: var(--scrollbar-width);
|
2022-02-11 19:50:55 +01:00
|
|
|
height: 6px;
|
2021-11-29 20:49:12 +01:00
|
|
|
}
|
|
|
|
|
|
2022-02-18 18:03:15 +01:00
|
|
|
body::-webkit-scrollbar-track {
|
|
|
|
|
background: var(--color-body-scrollbar-track-bg);
|
|
|
|
|
}
|
|
|
|
|
|
2021-11-29 20:49:12 +01:00
|
|
|
body *::-webkit-scrollbar-track {
|
|
|
|
|
background: var(--color-scrollbar-track-bg);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
body *::-webkit-scrollbar-thumb {
|
|
|
|
|
// Don't set 'border-radius' because Firefox's 'scrollbar-xx'
|
|
|
|
|
// standard currently doesn't support it. Stick with square
|
|
|
|
|
// scrollbar for all browsers.
|
|
|
|
|
background-color: var(--color-scrollbar-thumb-bg);
|
2022-02-18 18:03:15 +01:00
|
|
|
border-radius: var(--scrollbar-radius);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
body::-webkit-scrollbar-thumb {
|
|
|
|
|
background-color: var(--color-scrollbar-thumb-bg);
|
|
|
|
|
border-radius: var(--scrollbar-radius);
|
2020-07-24 19:17:43 +02:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
hr {
|
|
|
|
|
height: 1px;
|
2018-12-19 06:44:53 +01:00
|
|
|
}
|
|
|
|
|
|
2019-07-21 23:31:22 +02:00
|
|
|
h1,
|
|
|
|
|
h2,
|
|
|
|
|
h3,
|
|
|
|
|
h4,
|
|
|
|
|
h5,
|
|
|
|
|
h6 {
|
|
|
|
|
font-size: 1rem;
|
|
|
|
|
}
|
|
|
|
|
|
2020-10-14 17:33:39 +02:00
|
|
|
p,
|
|
|
|
|
ol,
|
|
|
|
|
ul {
|
|
|
|
|
& + p,
|
|
|
|
|
& + ul,
|
|
|
|
|
& + ol {
|
2022-02-11 19:50:55 +01:00
|
|
|
margin-top: var(--spacing-xxs);
|
2020-08-25 21:25:33 +02:00
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
2019-09-26 18:07:11 +02:00
|
|
|
ul,
|
|
|
|
|
ol {
|
2019-07-21 23:31:22 +02:00
|
|
|
li {
|
2020-08-10 22:47:39 +02:00
|
|
|
position: relative;
|
2019-09-26 18:07:11 +02:00
|
|
|
list-style-position: outside;
|
2020-12-01 05:33:43 +01:00
|
|
|
margin: var(--spacing-xs) 0;
|
|
|
|
|
margin-left: var(--spacing-xl);
|
2019-09-27 22:03:05 +02:00
|
|
|
margin-bottom: 0;
|
2019-07-21 23:31:22 +02:00
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.ul--no-style {
|
|
|
|
|
list-style: none;
|
|
|
|
|
margin-bottom: 0;
|
2022-02-11 19:50:55 +01:00
|
|
|
overflow: visible !important;
|
2019-07-21 23:31:22 +02:00
|
|
|
|
|
|
|
|
li {
|
|
|
|
|
margin: 0;
|
2022-02-11 19:50:55 +01:00
|
|
|
margin-bottom: var(--spacing-xxs);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.claim-preview__wrapper {
|
|
|
|
|
padding: 0px;
|
|
|
|
|
padding-top: var(--spacing-m);
|
|
|
|
|
padding-bottom: var(--spacing-m);
|
|
|
|
|
|
|
|
|
|
.claim__menu-button {
|
2022-04-09 16:07:06 +02:00
|
|
|
// right: -8px;
|
|
|
|
|
right: 2px;
|
2022-02-11 19:50:55 +01:00
|
|
|
}
|
2019-07-21 23:31:22 +02:00
|
|
|
}
|
2018-12-19 06:44:53 +01:00
|
|
|
}
|
|
|
|
|
|
Playlists v2: Refactors, touch ups + Queue Mode (#1604)
* Playlists v2
* Style pass
* Change playlist items arrange icon
* Playlist card body open by default
* Refactor collectionEdit components
* Paginate & Refactor bid field
* Collection page changes
* Add Thumbnail optional
* Replace extra info for description on collection page
* Playlist card right below video on medium screen
* Allow editing private collections
* Add edit option to menus
* Allow deleting a public playlist but keeping a private version
* Add queue to Save menu, remove edit option from Builtin pages, show queue on playlists page
* Fix scroll to recent persisting on medium screen
* Fix adding to queue from menu
* Fixes for delete
* PublishList: delay mounting Items tab to prevent lock-up (#1783)
For a large list, the playlist publish form is unusable (super-slow typing) due to the entire list being mounted despite the tab is not active.
The full solution is still to paginate it, but for now, don't mount the tab until it is selected. Add a spinner to indicate something is loading. It's not prefect, but it's throwaway code anyway. At least we can fill in the fields properly now.
* Batch-resolve private collections (#1782)
* makeSelectClaimForClaimId --> selectClaimForClaimId
Move away from the problematic `makeSelect*`, especially in large loops.
* Batch-resolve private collections
1758
This alleviates the lock-up that is caused by large number of invidual resolves. There will still be some minor stutter due to the large DOM that React needs to handle -- that is logged in 1758 and will be handled separately.
At least the stutter is short (1-2s) and the app is still usable.
Private list items are being resolve individually, super slow if the list is large (>100). Published lists doesn't have this issue.
doFetchItemsInCollections contains most of the useful logic, but it isn't called for private/built-in lists because it's not an actual claim.
Tweaked doFetchItemsInCollections to handle private (UUID-based) collections.
* Use persisted state for floating player playlist card body
- I find it annoying being open everytime
* Fix removing edits from published playlist
* Fix scroll on mobile
* Allow going editing items from toast
* Fix ClaimShareButton
* Prevent edit/publish of builtin
* Fix async inside forEach
* Fix sync on queue edit
* Fix autoplayCountdown replay
* Fix deleting an item scrolling the playlist
* CreatedAt fixes
* Remove repost for now
* Anon publish fixes
* Fix mature case on floating
Co-authored-by: infinite-persistence <64950861+infinite-persistence@users.noreply.github.com>
2022-07-13 15:59:59 +02:00
|
|
|
.li--no-style {
|
|
|
|
|
margin-bottom: 0px !important;
|
|
|
|
|
}
|
|
|
|
|
|
2019-09-30 23:48:30 +02:00
|
|
|
dl {
|
|
|
|
|
display: flex;
|
|
|
|
|
flex-direction: row;
|
|
|
|
|
flex-wrap: wrap;
|
2019-10-03 23:40:54 +02:00
|
|
|
overflow-x: visible;
|
2020-06-01 19:03:19 +02:00
|
|
|
margin-top: var(--spacing-m);
|
2019-09-30 23:48:30 +02:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
dt {
|
2021-01-22 17:08:11 +01:00
|
|
|
flex-basis: 50%;
|
2019-09-30 23:48:30 +02:00
|
|
|
text-align: left;
|
|
|
|
|
font-weight: bold;
|
|
|
|
|
}
|
|
|
|
|
|
2021-01-27 17:00:31 +01:00
|
|
|
.dt__text {
|
|
|
|
|
margin-right: var(--spacing-s);
|
|
|
|
|
}
|
|
|
|
|
|
2019-09-30 23:48:30 +02:00
|
|
|
dd {
|
2021-01-27 17:00:31 +01:00
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
justify-content: flex-end;
|
2021-01-22 17:08:11 +01:00
|
|
|
flex-basis: 45%;
|
2019-09-30 23:48:30 +02:00
|
|
|
flex-grow: 1;
|
|
|
|
|
margin: 0;
|
|
|
|
|
text-align: right;
|
2021-01-27 17:00:31 +01:00
|
|
|
|
|
|
|
|
.help--warning {
|
|
|
|
|
margin-bottom: 0;
|
|
|
|
|
margin-top: var(--spacing-s);
|
|
|
|
|
text-align: left;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.dd__text {
|
|
|
|
|
display: flex;
|
|
|
|
|
justify-content: flex-end;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.dd__button {
|
|
|
|
|
margin-right: var(--spacing-s);
|
2019-09-30 23:48:30 +02:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
dt,
|
|
|
|
|
dd {
|
2020-06-01 19:03:19 +02:00
|
|
|
padding: var(--spacing-m) var(--spacing-s);
|
2019-11-22 22:13:00 +01:00
|
|
|
border-top: 1px solid var(--color-border);
|
2019-09-30 23:48:30 +02:00
|
|
|
|
|
|
|
|
&:last-of-type {
|
2019-11-22 22:13:00 +01:00
|
|
|
border-bottom: 1px solid var(--color-border);
|
2019-09-30 23:48:30 +02:00
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
2018-12-19 06:44:53 +01:00
|
|
|
blockquote {
|
2021-05-20 21:31:14 +02:00
|
|
|
padding: 0 0.8rem;
|
|
|
|
|
margin-top: var(--spacing-xxs);
|
|
|
|
|
margin-bottom: var(--spacing-xxs);
|
|
|
|
|
opacity: 0.9;
|
|
|
|
|
border-left: 0.2rem solid var(--color-blockquote);
|
|
|
|
|
color: var(--color-text-subtitle);
|
2018-12-19 06:44:53 +01:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
code {
|
|
|
|
|
@include font-mono;
|
|
|
|
|
font-size: 1.5rem;
|
|
|
|
|
}
|
|
|
|
|
|
2019-06-29 00:21:21 +02:00
|
|
|
hr {
|
|
|
|
|
width: 100%;
|
|
|
|
|
height: 1px;
|
2019-11-22 22:13:00 +01:00
|
|
|
background-color: var(--color-border);
|
2019-06-29 00:21:21 +02:00
|
|
|
}
|
|
|
|
|
|
2019-08-14 18:31:34 +02:00
|
|
|
img,
|
|
|
|
|
a {
|
|
|
|
|
-webkit-user-drag: none;
|
|
|
|
|
}
|
|
|
|
|
|
Playlists v2: Refactors, touch ups + Queue Mode (#1604)
* Playlists v2
* Style pass
* Change playlist items arrange icon
* Playlist card body open by default
* Refactor collectionEdit components
* Paginate & Refactor bid field
* Collection page changes
* Add Thumbnail optional
* Replace extra info for description on collection page
* Playlist card right below video on medium screen
* Allow editing private collections
* Add edit option to menus
* Allow deleting a public playlist but keeping a private version
* Add queue to Save menu, remove edit option from Builtin pages, show queue on playlists page
* Fix scroll to recent persisting on medium screen
* Fix adding to queue from menu
* Fixes for delete
* PublishList: delay mounting Items tab to prevent lock-up (#1783)
For a large list, the playlist publish form is unusable (super-slow typing) due to the entire list being mounted despite the tab is not active.
The full solution is still to paginate it, but for now, don't mount the tab until it is selected. Add a spinner to indicate something is loading. It's not prefect, but it's throwaway code anyway. At least we can fill in the fields properly now.
* Batch-resolve private collections (#1782)
* makeSelectClaimForClaimId --> selectClaimForClaimId
Move away from the problematic `makeSelect*`, especially in large loops.
* Batch-resolve private collections
1758
This alleviates the lock-up that is caused by large number of invidual resolves. There will still be some minor stutter due to the large DOM that React needs to handle -- that is logged in 1758 and will be handled separately.
At least the stutter is short (1-2s) and the app is still usable.
Private list items are being resolve individually, super slow if the list is large (>100). Published lists doesn't have this issue.
doFetchItemsInCollections contains most of the useful logic, but it isn't called for private/built-in lists because it's not an actual claim.
Tweaked doFetchItemsInCollections to handle private (UUID-based) collections.
* Use persisted state for floating player playlist card body
- I find it annoying being open everytime
* Fix removing edits from published playlist
* Fix scroll on mobile
* Allow going editing items from toast
* Fix ClaimShareButton
* Prevent edit/publish of builtin
* Fix async inside forEach
* Fix sync on queue edit
* Fix autoplayCountdown replay
* Fix deleting an item scrolling the playlist
* CreatedAt fixes
* Remove repost for now
* Anon publish fixes
* Fix mature case on floating
Co-authored-by: infinite-persistence <64950861+infinite-persistence@users.noreply.github.com>
2022-07-13 15:59:59 +02:00
|
|
|
.a--styled {
|
|
|
|
|
color: var(--color-text);
|
|
|
|
|
|
|
|
|
|
&:hover {
|
|
|
|
|
color: var(--color-primary);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
2020-03-20 21:08:41 +01:00
|
|
|
img {
|
|
|
|
|
// Hide alt text when an image fails to load
|
|
|
|
|
text-indent: -9999px;
|
|
|
|
|
}
|
|
|
|
|
|
2022-02-02 13:47:04 +01:00
|
|
|
@media (min-width: $breakpoint-small) {
|
|
|
|
|
textarea {
|
2022-02-11 19:50:55 +01:00
|
|
|
// min-height: calc(var(--height-input) * 2);
|
2022-02-02 13:47:04 +01:00
|
|
|
}
|
2020-05-26 19:12:15 +02:00
|
|
|
}
|
|
|
|
|
|
2018-12-19 06:44:53 +01:00
|
|
|
.columns {
|
|
|
|
|
display: flex;
|
|
|
|
|
justify-content: space-between;
|
2019-07-21 23:31:22 +02:00
|
|
|
align-items: flex-start;
|
2018-12-19 06:44:53 +01:00
|
|
|
|
|
|
|
|
> * {
|
|
|
|
|
flex-grow: 1;
|
2019-06-17 22:32:38 +02:00
|
|
|
flex-basis: 0;
|
2019-08-27 16:43:42 +02:00
|
|
|
min-width: 15rem;
|
2020-06-01 19:03:19 +02:00
|
|
|
margin-bottom: var(--spacing-l);
|
2018-12-19 06:44:53 +01:00
|
|
|
|
2019-06-17 22:32:38 +02:00
|
|
|
&:first-child {
|
2021-11-08 14:36:30 +01:00
|
|
|
flex-basis: 1px;
|
2018-12-19 06:44:53 +01:00
|
|
|
margin-right: 1.5rem;
|
|
|
|
|
}
|
|
|
|
|
}
|
2019-12-18 06:27:08 +01:00
|
|
|
|
|
|
|
|
@media (max-width: $breakpoint-small) {
|
|
|
|
|
flex-direction: column;
|
|
|
|
|
|
|
|
|
|
& > * {
|
|
|
|
|
margin: 0;
|
2020-06-01 19:03:19 +02:00
|
|
|
margin-bottom: var(--spacing-m);
|
2019-12-18 06:27:08 +01:00
|
|
|
width: 100%;
|
2020-01-17 18:56:28 +01:00
|
|
|
flex-basis: auto;
|
2019-12-18 06:27:08 +01:00
|
|
|
|
|
|
|
|
&:first-child {
|
|
|
|
|
margin-right: 0;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
2018-12-19 06:44:53 +01:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.hidden {
|
|
|
|
|
display: none;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.disabled {
|
|
|
|
|
opacity: 0.3;
|
|
|
|
|
pointer-events: none;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.column {
|
|
|
|
|
display: flex;
|
|
|
|
|
|
|
|
|
|
.column__item:not(:first-child) {
|
2021-12-21 02:27:25 +01:00
|
|
|
padding-left: calc(var(--spacing-width) * 2 / 3);
|
2019-02-13 17:27:20 +01:00
|
|
|
flex: 1;
|
2018-12-19 06:44:53 +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
|
|
|
|
|
|
|
|
.column__item--between {
|
|
|
|
|
justify-content: space-between;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
@media (max-width: $breakpoint-small) {
|
|
|
|
|
flex-direction: column;
|
|
|
|
|
.column__item:not(:first-child) {
|
|
|
|
|
padding-left: 0;
|
|
|
|
|
flex: 1;
|
|
|
|
|
}
|
|
|
|
|
& > * {
|
|
|
|
|
margin: 0;
|
|
|
|
|
margin-bottom: var(--spacing-m);
|
|
|
|
|
width: 100%;
|
|
|
|
|
flex-basis: auto;
|
|
|
|
|
|
|
|
|
|
&:first-child {
|
|
|
|
|
margin-right: 0;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
2018-12-19 06:44:53 +01:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.truncated-text {
|
2019-02-18 18:24:56 +01:00
|
|
|
display: -webkit-box;
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
-webkit-box-orient: vertical;
|
2019-02-21 23:45:17 +01:00
|
|
|
word-break: break-word;
|
2018-12-19 06:44:53 +01:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.busy-indicator__loader {
|
|
|
|
|
min-width: 16px;
|
|
|
|
|
min-height: 8px;
|
|
|
|
|
margin: -1rem 0;
|
|
|
|
|
padding: 0 30px;
|
|
|
|
|
|
2022-05-20 15:07:32 +02:00
|
|
|
background: url('~static/img/busy.gif') no-repeat center center;
|
2018-12-19 06:44:53 +01:00
|
|
|
display: inline-block;
|
|
|
|
|
vertical-align: middle;
|
|
|
|
|
|
|
|
|
|
&:first-child {
|
|
|
|
|
padding-left: 2px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
&:last-child {
|
|
|
|
|
padding-right: 2px;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.help {
|
|
|
|
|
display: block;
|
2021-01-22 17:08:11 +01:00
|
|
|
font-size: var(--font-xsmall);
|
2019-11-22 22:13:00 +01:00
|
|
|
color: var(--color-text-help);
|
2020-06-01 19:03:19 +02:00
|
|
|
margin-top: var(--spacing-s);
|
2020-09-04 20:39:55 +02:00
|
|
|
|
|
|
|
|
&:not(:last-child) {
|
2021-11-08 14:36:30 +01:00
|
|
|
margin-bottom: var(--spacing-m);
|
2020-09-04 20:39:55 +02:00
|
|
|
}
|
2020-12-11 21:25:01 +01:00
|
|
|
|
2021-11-08 14:36:30 +01:00
|
|
|
.button--link + .button--link {
|
2020-12-11 21:25:01 +01:00
|
|
|
margin-left: var(--spacing-s);
|
|
|
|
|
}
|
2021-01-22 17:08:11 +01:00
|
|
|
|
|
|
|
|
@media (min-width: $breakpoint-small) {
|
|
|
|
|
font-size: var(--font-small);
|
|
|
|
|
}
|
2018-12-19 06:44:53 +01:00
|
|
|
}
|
|
|
|
|
|
2019-02-13 17:27:20 +01:00
|
|
|
.help--warning {
|
2020-03-07 00:11:16 +01:00
|
|
|
@extend .help;
|
2021-01-12 16:25:51 +01:00
|
|
|
padding: var(--spacing-s);
|
|
|
|
|
border-radius: var(--border-radius);
|
2022-02-11 19:50:55 +01:00
|
|
|
background-color: rgba(var(--color-primary-dynamic), 0.1);
|
|
|
|
|
color: var(--color-text);
|
2020-09-02 22:08:37 +02:00
|
|
|
margin-bottom: var(--spacing-s);
|
2022-02-11 19:50:55 +01:00
|
|
|
border: 1px solid var(--color-primary);
|
2021-03-03 19:50:16 +01:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.help--notice {
|
|
|
|
|
@extend .help--warning;
|
2022-02-11 19:50:55 +01:00
|
|
|
background-color: rgba(var(--color-primary-dynamic), 0.03);
|
|
|
|
|
color: var(--color-text);
|
|
|
|
|
|
|
|
|
|
@media (max-width: $breakpoint-small) {
|
|
|
|
|
margin-top: -1.5px;
|
|
|
|
|
border: unset;
|
|
|
|
|
box-shadow: 0px 0px 0px 1px var(--color-primary) inset;
|
|
|
|
|
padding-bottom: 10px;
|
|
|
|
|
}
|
2019-02-13 17:27:20 +01:00
|
|
|
}
|
|
|
|
|
|
2020-02-24 19:20:45 +01:00
|
|
|
.help--inline {
|
|
|
|
|
@extend .help;
|
|
|
|
|
margin-top: 0;
|
2020-04-01 20:43:50 +02:00
|
|
|
margin-bottom: 0;
|
2022-02-15 10:56:20 +01:00
|
|
|
color: var(--color-text);
|
2020-10-12 23:12:46 +02:00
|
|
|
|
|
|
|
|
&:not(:last-child) {
|
|
|
|
|
margin-bottom: 0;
|
|
|
|
|
}
|
2020-10-12 23:24:32 +02:00
|
|
|
|
|
|
|
|
.icon--help {
|
|
|
|
|
top: 3px;
|
|
|
|
|
margin-left: 2px;
|
|
|
|
|
}
|
2020-02-24 19:20:45 +01:00
|
|
|
}
|
|
|
|
|
|
2020-08-21 17:18:47 +02:00
|
|
|
.help--card-actions {
|
|
|
|
|
@extend .help;
|
2020-10-01 22:59:11 +02:00
|
|
|
margin-top: var(--spacing-m);
|
2020-08-21 17:18:47 +02:00
|
|
|
}
|
|
|
|
|
|
2021-01-22 17:08:11 +01:00
|
|
|
.help--dt {
|
|
|
|
|
@extend .help;
|
|
|
|
|
display: inline-block;
|
|
|
|
|
margin-top: 0;
|
|
|
|
|
}
|
|
|
|
|
|
2021-02-02 21:00:24 +01:00
|
|
|
.help--spendable {
|
|
|
|
|
margin-left: var(--spacing-xxs);
|
|
|
|
|
}
|
|
|
|
|
|
2018-12-19 06:44:53 +01:00
|
|
|
.empty {
|
2019-11-22 22:13:00 +01:00
|
|
|
color: var(--color-text-empty);
|
2018-12-19 06:44:53 +01:00
|
|
|
font-style: italic;
|
|
|
|
|
}
|
2020-05-11 17:54:39 +02:00
|
|
|
|
2020-04-01 20:43:50 +02:00
|
|
|
.empty--centered {
|
|
|
|
|
text-align: center;
|
2020-06-01 19:03:19 +02:00
|
|
|
padding: calc(var(--spacing-l) * 3) 0;
|
2020-04-01 20:43:50 +02:00
|
|
|
}
|
2022-03-02 06:43:25 +01:00
|
|
|
.empty--centered-tight {
|
|
|
|
|
text-align: center;
|
|
|
|
|
padding: var(--spacing-l) 0;
|
|
|
|
|
}
|
2018-12-19 06:44:53 +01:00
|
|
|
|
|
|
|
|
.qr-code {
|
|
|
|
|
width: 134px;
|
|
|
|
|
height: 134px;
|
2019-12-09 18:25:13 +01:00
|
|
|
border: 3px solid white;
|
2018-12-19 06:44:53 +01:00
|
|
|
|
|
|
|
|
&.qr-code--right-padding {
|
2021-12-21 02:27:25 +01:00
|
|
|
margin-right: calc(var(--spacing-vertical) * 2 / 3);
|
2018-12-19 06:44:53 +01:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
&.qr-code--top-padding {
|
2021-12-21 02:27:25 +01:00
|
|
|
margin-top: calc(var(--spacing-vertical) * 2 / 3);
|
2018-12-19 06:44:53 +01:00
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
2022-07-04 14:32:30 +02:00
|
|
|
.error {
|
|
|
|
|
padding: var(--spacing-s);
|
|
|
|
|
margin-bottom: var(--spacing-s);
|
|
|
|
|
border-radius: var(--border-radius);
|
|
|
|
|
background-color: rgba(255, 0, 0, 0.1);
|
|
|
|
|
border: 1px solid red;
|
|
|
|
|
}
|
|
|
|
|
|
2020-04-13 21:16:07 +02:00
|
|
|
.error__wrapper {
|
2020-02-05 04:46:00 +01:00
|
|
|
background-color: var(--color-error);
|
2020-06-01 19:03:19 +02:00
|
|
|
padding: var(--spacing-s);
|
2020-02-05 04:46:00 +01:00
|
|
|
border-radius: var(--border-radius);
|
|
|
|
|
}
|
|
|
|
|
|
2020-04-02 20:45:21 +02:00
|
|
|
.error__wrapper--no-overflow {
|
2020-04-13 21:42:15 +02:00
|
|
|
@extend .error__wrapper;
|
2020-04-02 20:45:21 +02:00
|
|
|
max-height: 10rem;
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
}
|
|
|
|
|
|
2020-04-13 21:16:07 +02:00
|
|
|
.error__text {
|
2019-11-22 22:13:00 +01:00
|
|
|
color: var(--color-text-error);
|
2022-06-03 15:28:12 +02:00
|
|
|
margin-left: 2px;
|
2018-12-19 06:44:53 +01:00
|
|
|
}
|
|
|
|
|
|
2020-03-07 00:11:16 +01:00
|
|
|
.help--error {
|
|
|
|
|
@extend .help;
|
|
|
|
|
color: var(--color-text-error);
|
|
|
|
|
}
|
|
|
|
|
|
2018-12-19 06:44:53 +01:00
|
|
|
.thumbnail-preview {
|
|
|
|
|
width: var(--thumbnail-preview-width);
|
|
|
|
|
height: var(--thumbnail-preview-height);
|
2020-11-11 23:07:45 +01:00
|
|
|
background-color: var(--color-thumbnail-background);
|
|
|
|
|
padding: var(--spacing-s);
|
|
|
|
|
font-size: var(--font-small);
|
2020-10-20 19:10:02 +02:00
|
|
|
border-radius: var(--border-radius);
|
2018-12-19 06:44:53 +01:00
|
|
|
background-position: 50% 50%;
|
|
|
|
|
background-repeat: no-repeat;
|
|
|
|
|
background-size: cover;
|
|
|
|
|
}
|
2019-12-06 17:03:11 +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
|
|
|
.thumbnail-picker__preview {
|
|
|
|
|
width: calc(var(--thumbnail-preview-width) * 1.5);
|
|
|
|
|
height: calc(var(--thumbnail-preview-height) * 1.5);
|
|
|
|
|
background-color: var(--color-thumbnail-background);
|
|
|
|
|
padding: var(--spacing-s);
|
|
|
|
|
font-size: var(--font-small);
|
|
|
|
|
border-radius: var(--border-radius);
|
|
|
|
|
background-position: 50% 50%;
|
|
|
|
|
background-repeat: no-repeat;
|
|
|
|
|
background-size: cover;
|
|
|
|
|
}
|
|
|
|
|
|
2019-12-06 17:03:11 +01:00
|
|
|
.emoji {
|
|
|
|
|
font-size: 1.3em;
|
|
|
|
|
}
|
2020-01-29 19:58:43 +01:00
|
|
|
|
|
|
|
|
.download-text {
|
|
|
|
|
font-size: var(--font-xsmall);
|
|
|
|
|
}
|
2020-02-17 20:12:28 +01:00
|
|
|
|
|
|
|
|
.notice-message {
|
2021-03-30 18:00:30 +02:00
|
|
|
position: relative;
|
2020-02-17 20:12:28 +01:00
|
|
|
border-radius: var(--border-radius);
|
2020-06-01 19:03:19 +02:00
|
|
|
padding: var(--spacing-l);
|
2022-02-11 19:50:55 +01:00
|
|
|
background-color: var(--color-header-background);
|
2021-03-30 18:00:30 +02:00
|
|
|
|
|
|
|
|
~ .card {
|
|
|
|
|
margin-top: var(--spacing-m);
|
|
|
|
|
}
|
2020-02-17 20:12:28 +01:00
|
|
|
}
|
2020-02-21 23:05:10 +01:00
|
|
|
|
2021-03-19 21:52:59 +01:00
|
|
|
.notice-message--loud {
|
2020-08-25 21:54:06 +02:00
|
|
|
@extend .notice-message;
|
2021-03-19 21:52:59 +01:00
|
|
|
background-color: #fef1f6;
|
|
|
|
|
color: var(--color-black);
|
|
|
|
|
font-weight: bold;
|
2022-06-03 15:28:12 +02:00
|
|
|
help .button {
|
2021-03-19 21:52:59 +01:00
|
|
|
color: #fa6165;
|
|
|
|
|
}
|
2020-08-25 21:54:06 +02:00
|
|
|
}
|
|
|
|
|
|
2020-02-21 23:05:10 +01:00
|
|
|
.privacy-img {
|
|
|
|
|
height: 10rem;
|
|
|
|
|
}
|
2020-06-15 16:04:44 +02:00
|
|
|
|
|
|
|
|
.confirm__label {
|
|
|
|
|
@extend label;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.confirm__value {
|
2020-09-02 22:08:37 +02:00
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
2020-06-15 16:04:44 +02:00
|
|
|
margin-bottom: var(--spacing-m);
|
|
|
|
|
font-size: var(--font-large);
|
|
|
|
|
|
|
|
|
|
&:last-child {
|
|
|
|
|
margin-bottom: 0;
|
|
|
|
|
}
|
|
|
|
|
}
|
2020-07-23 16:22:57 +02:00
|
|
|
|
2021-04-08 11:02:37 +02:00
|
|
|
.confirm__value--no-gap {
|
|
|
|
|
margin-bottom: 0;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.confirm__value--subitem {
|
|
|
|
|
font-size: var(--font-xsmall);
|
|
|
|
|
}
|
|
|
|
|
|
2020-08-11 22:32:03 +02:00
|
|
|
.mobile-only {
|
|
|
|
|
display: none;
|
|
|
|
|
|
2022-02-11 19:50:55 +01:00
|
|
|
.notification__bubble--inline {
|
|
|
|
|
top: var(--spacing-xs);
|
|
|
|
|
.notification__count {
|
|
|
|
|
margin-bottom: -2px;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
2020-08-11 22:32:03 +02:00
|
|
|
@media (max-width: $breakpoint-small) {
|
|
|
|
|
display: block;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
2020-10-30 05:19:05 +01:00
|
|
|
.ads-test {
|
|
|
|
|
height: 50vh;
|
2020-11-04 17:58:23 +01:00
|
|
|
position: relative;
|
|
|
|
|
|
|
|
|
|
.video-js {
|
|
|
|
|
height: 50vh;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.video-js .vjs-tech {
|
|
|
|
|
height: 50vh;
|
|
|
|
|
}
|
2020-10-30 05:19:05 +01:00
|
|
|
}
|
2020-11-02 18:00:49 +01:00
|
|
|
|
|
|
|
|
.adspruce-bannerspot {
|
|
|
|
|
height: 5rem;
|
|
|
|
|
width: 100%;
|
|
|
|
|
}
|
2021-03-18 23:16:08 +01:00
|
|
|
|
|
|
|
|
.release__notes {
|
|
|
|
|
max-height: 50vh;
|
2021-09-13 17:35:26 +02:00
|
|
|
overflow: auto;
|
2021-03-18 23:16:08 +01:00
|
|
|
}
|
2021-03-19 21:52:59 +01:00
|
|
|
|
|
|
|
|
.signup__odysee-logo {
|
|
|
|
|
display: flex;
|
|
|
|
|
width: 100%;
|
|
|
|
|
align-items: center;
|
|
|
|
|
justify-content: center;
|
|
|
|
|
|
|
|
|
|
img {
|
|
|
|
|
margin-top: var(--spacing-xl);
|
|
|
|
|
height: 4rem;
|
|
|
|
|
}
|
|
|
|
|
}
|
2021-11-08 14:36:30 +01:00
|
|
|
|
|
|
|
|
.home__meme {
|
|
|
|
|
text-align: center;
|
|
|
|
|
font-weight: bold;
|
|
|
|
|
line-height: 1;
|
|
|
|
|
font-size: 1rem;
|
2022-05-31 17:02:44 +02:00
|
|
|
// margin-bottom: var(--spacing-m);
|
2021-11-08 14:36:30 +01:00
|
|
|
|
2022-02-11 19:50:55 +01:00
|
|
|
> .button {
|
|
|
|
|
white-space: initial;
|
|
|
|
|
}
|
|
|
|
|
|
2021-11-08 14:36:30 +01:00
|
|
|
@media (min-width: $breakpoint-small) {
|
|
|
|
|
font-size: 1.2rem;
|
2022-05-31 17:02:44 +02:00
|
|
|
// margin-bottom: var(--spacing-l);
|
2021-11-08 14:36:30 +01:00
|
|
|
}
|
2022-05-31 17:37:10 +02:00
|
|
|
@media (min-width: $breakpoint-medium) {
|
2022-05-31 18:46:02 +02:00
|
|
|
margin-top: var(--spacing-s);
|
2022-05-31 17:37:10 +02:00
|
|
|
margin-bottom: -3.7rem;
|
|
|
|
|
}
|
2021-11-08 14:36:30 +01:00
|
|
|
|
2022-02-11 19:50:55 +01:00
|
|
|
@media (max-width: $breakpoint-small) {
|
|
|
|
|
margin-top: var(--spacing-s);
|
|
|
|
|
margin-bottom: var(--spacing-m);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.confirming-change {
|
|
|
|
|
padding-top: var(--spacing-s);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.background-image {
|
|
|
|
|
position: fixed;
|
|
|
|
|
left: 0px;
|
|
|
|
|
right: 0px;
|
|
|
|
|
top: 0px;
|
|
|
|
|
bottom: 0px;
|
|
|
|
|
|
|
|
|
|
background-color: var(--color-background);
|
|
|
|
|
background-size: cover;
|
|
|
|
|
background-repeat: no-repeat;
|
|
|
|
|
background-position: center center;
|
|
|
|
|
filter: blur(23px);
|
|
|
|
|
-webkit-filter: blur(23px);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.theme {
|
|
|
|
|
position: fixed;
|
|
|
|
|
left: 0px;
|
|
|
|
|
right: 0px;
|
|
|
|
|
top: 0px;
|
|
|
|
|
bottom: 0px;
|
|
|
|
|
background-image: var(--background-shade);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.homePage-wrapper {
|
|
|
|
|
.mb-xl {
|
|
|
|
|
margin-bottom: 0px;
|
|
|
|
|
}
|
|
|
|
|
.icon__wrapper--Heart {
|
|
|
|
|
.icon {
|
|
|
|
|
fill: var(--color-header-background);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
2022-03-22 14:44:44 +01:00
|
|
|
.homePage-wrapper__section-title {
|
|
|
|
|
display: flex;
|
|
|
|
|
justify-content: space-between;
|
2022-04-14 10:29:54 +02:00
|
|
|
|
|
|
|
|
@media (max-width: $breakpoint-small) {
|
|
|
|
|
button {
|
|
|
|
|
right: calc(var(--spacing-xs) * -1);
|
|
|
|
|
.button__content {
|
|
|
|
|
padding: 10px;
|
|
|
|
|
background-color: var(--color-header-background);
|
|
|
|
|
height: unset;
|
|
|
|
|
border-radius: 50% 0 0 50%;
|
|
|
|
|
|
|
|
|
|
.icon {
|
|
|
|
|
margin-left: 0;
|
|
|
|
|
width: 22px;
|
|
|
|
|
height: 22px;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.button__label {
|
|
|
|
|
display: none;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
2022-03-22 14:44:44 +01:00
|
|
|
}
|
|
|
|
|
|
2022-02-11 19:50:55 +01:00
|
|
|
// The following wrapper classes are temporary to fix page specific issues
|
|
|
|
|
.discoverPage-wrapper {
|
|
|
|
|
.claim-preview__wrapper {
|
|
|
|
|
.claim-tile__info {
|
|
|
|
|
margin-top: 0;
|
|
|
|
|
padding-bottom: var(--spacing-xxxs);
|
|
|
|
|
.claim-preview-metadata-sub-upload {
|
|
|
|
|
margin-top: 3px;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.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;
|
|
|
|
|
|
|
|
|
|
.claim__menu-button {
|
|
|
|
|
right: calc(var(--spacing-m) - 8px) !important;
|
|
|
|
|
margin-top: var(--spacing-xxs);
|
|
|
|
|
|
|
|
|
|
.icon {
|
|
|
|
|
stroke: var(--color-text);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
&:hover {
|
|
|
|
|
.icon {
|
|
|
|
|
stroke: var(--color-primary);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
2022-03-01 04:19:20 +01:00
|
|
|
.followManage-wrapper {
|
|
|
|
|
@extend .discoverPage-wrapper;
|
|
|
|
|
.claim-list {
|
|
|
|
|
margin-top: var(--spacing-m);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
2022-03-04 08:15:23 +01:00
|
|
|
.followManage-wrapper__activeSubs {
|
|
|
|
|
-moz-column-count: 2;
|
|
|
|
|
-moz-column-gap: var(--spacing-m);
|
|
|
|
|
-webkit-column-count: 2;
|
|
|
|
|
-webkit-column-gap: var(--spacing-m);
|
|
|
|
|
column-count: 2;
|
|
|
|
|
column-gap: var(--spacing-m);
|
2022-03-05 16:00:07 +01:00
|
|
|
|
|
|
|
|
@media (min-width: $breakpoint-small) {
|
|
|
|
|
.navigation-link {
|
|
|
|
|
&.navigation-link--with-thumbnail .button__content {
|
|
|
|
|
.channel-thumbnail {
|
|
|
|
|
@include handleChannelGif(2.25rem);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.navigation__subscription {
|
|
|
|
|
.claim-preview__title {
|
|
|
|
|
span {
|
|
|
|
|
font-size: var(--font-body);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.channel-name {
|
|
|
|
|
font-size: var(--font-small);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
2022-03-04 08:15:23 +01:00
|
|
|
}
|
|
|
|
|
|
2022-05-31 11:14:59 +02:00
|
|
|
.uploadPage-wrapper {
|
2022-06-03 15:28:12 +02:00
|
|
|
transition: width 0.4s;
|
|
|
|
|
@media (min-width: $breakpoint-small) {
|
|
|
|
|
width: 80% !important;
|
|
|
|
|
}
|
|
|
|
|
@media (min-width: $breakpoint-medium) {
|
|
|
|
|
width: 70% !important;
|
|
|
|
|
}
|
|
|
|
|
@media (min-width: $breakpoint-large) {
|
|
|
|
|
width: 60% !important;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
@media (max-width: $breakpoint-small) {
|
|
|
|
|
.channel__selector {
|
|
|
|
|
margin-top: var(--spacing-m);
|
|
|
|
|
margin-bottom: var(--spacing-l);
|
|
|
|
|
button {
|
|
|
|
|
width: 100%;
|
|
|
|
|
.claim-preview__title {
|
|
|
|
|
// flex: 1;
|
|
|
|
|
text-align: left;
|
|
|
|
|
}
|
|
|
|
|
.comment__badge {
|
|
|
|
|
flex: 1;
|
|
|
|
|
text-align: left;
|
|
|
|
|
}
|
|
|
|
|
.icon--ChevronDown {
|
|
|
|
|
margin-left: auto;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
2022-07-11 16:12:37 +02:00
|
|
|
.section__actions {
|
|
|
|
|
margin-bottom: 0;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.card-stack {
|
|
|
|
|
.section__actions:last-of-type {
|
|
|
|
|
.button--primary {
|
|
|
|
|
border-radius: var(--border-radius) 0 0 var(--border-radius);
|
|
|
|
|
margin-right: 2px;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.page__title {
|
|
|
|
|
display: flex;
|
|
|
|
|
margin-bottom: var(--spacing-l);
|
|
|
|
|
|
|
|
|
|
svg {
|
|
|
|
|
width: 3rem;
|
|
|
|
|
height: 3rem;
|
|
|
|
|
background-color: var(--color-header-background);
|
|
|
|
|
border-radius: 50%;
|
|
|
|
|
padding: var(--spacing-s);
|
|
|
|
|
// margin-bottom:calc(var(--spacing-s) * -1);
|
|
|
|
|
}
|
|
|
|
|
label {
|
|
|
|
|
font-size: var(--font-large);
|
|
|
|
|
font-weight: var(--font-weight-bold);
|
|
|
|
|
padding-left: 10px;
|
|
|
|
|
// width:auto;
|
|
|
|
|
margin-top: var(--spacing-s);
|
|
|
|
|
flex: 1;
|
|
|
|
|
border-bottom: 1px solid var(--color-header-background);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
button {
|
|
|
|
|
height: 36px;
|
|
|
|
|
margin-top: -6px;
|
|
|
|
|
float: right;
|
|
|
|
|
padding-left: var(--spacing-xs);
|
|
|
|
|
padding-right: var(--spacing-s);
|
|
|
|
|
.button__content {
|
|
|
|
|
.button__label {
|
|
|
|
|
font-size: var(--font-body);
|
|
|
|
|
margin-left: 0;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.icon {
|
|
|
|
|
background-color: unset;
|
|
|
|
|
width: 2rem;
|
|
|
|
|
height: 2rem;
|
|
|
|
|
padding: 8px;
|
|
|
|
|
padding-left: 0;
|
|
|
|
|
padding-right: 0;
|
|
|
|
|
margin: 0;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.card {
|
|
|
|
|
margin-bottom: var(--spacing-xl) !important;
|
|
|
|
|
.card__body {
|
|
|
|
|
padding-top: 0;
|
|
|
|
|
}
|
|
|
|
|
.card__main-actions {
|
|
|
|
|
padding-top: 0;
|
|
|
|
|
}
|
|
|
|
|
.card__title-section {
|
|
|
|
|
padding-bottom: 0;
|
|
|
|
|
}
|
2022-06-03 15:28:12 +02:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.card__title-section {
|
|
|
|
|
width: 100%;
|
|
|
|
|
div:first-of-type:not(.card__subtitle) {
|
|
|
|
|
width: 100%;
|
|
|
|
|
}
|
|
|
|
|
h2 {
|
|
|
|
|
width: 100%;
|
|
|
|
|
div:first-of-type {
|
|
|
|
|
div {
|
|
|
|
|
width: unset !important;
|
|
|
|
|
float: right;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.card__header--between {
|
|
|
|
|
// margin-bottom: var(--spacing-xl);
|
|
|
|
|
margin-bottom: 0;
|
|
|
|
|
border-bottom: 1px solid var(--color-border);
|
|
|
|
|
@media (max-width: $breakpoint-small) {
|
2022-07-11 16:12:37 +02:00
|
|
|
// margin-bottom: var(--spacing-l);
|
2022-06-03 15:28:12 +02:00
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.card__title {
|
|
|
|
|
div {
|
|
|
|
|
display: inline-block;
|
|
|
|
|
margin-top: 0px;
|
|
|
|
|
right: 0;
|
|
|
|
|
}
|
|
|
|
|
.button {
|
|
|
|
|
margin-top: 0;
|
|
|
|
|
}
|
|
|
|
|
.button--alt:not(.button-toggle) {
|
|
|
|
|
font-size: var(--font-base);
|
2022-02-14 12:21:35 +01:00
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
2022-02-11 19:50:55 +01:00
|
|
|
.card__main-actions {
|
2022-06-03 15:28:12 +02:00
|
|
|
border: unset;
|
2022-02-11 19:50:55 +01:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
label {
|
2022-06-03 15:28:12 +02:00
|
|
|
font-size: var(--font-body);
|
2022-02-11 19:50:55 +01:00
|
|
|
}
|
|
|
|
|
|
2022-06-03 15:28:12 +02:00
|
|
|
.form-field__prefix {
|
|
|
|
|
box-shadow: unset !important;
|
|
|
|
|
border-width: 2px 2px 2px 0 !important;
|
|
|
|
|
border-color: var(--color-border) !important;
|
|
|
|
|
background-color: var(--color-border) !important;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.card--publish-section {
|
|
|
|
|
background: rgba(var(--color-header-background-base), 0.4);
|
|
|
|
|
border-radius: var(--border-radius);
|
|
|
|
|
|
|
|
|
|
.card__main-actions {
|
|
|
|
|
padding: 0;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
fieldset-section {
|
|
|
|
|
padding: var(--spacing-s);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
fieldset-section.radio {
|
|
|
|
|
margin-top: 0;
|
|
|
|
|
padding-bottom: 0;
|
|
|
|
|
}
|
|
|
|
|
fieldset-section.radio:last-of-type {
|
|
|
|
|
padding-bottom: var(--spacing-s);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
fieldset-group {
|
|
|
|
|
margin-top: 0;
|
|
|
|
|
fieldset-section {
|
|
|
|
|
padding-right: 0;
|
|
|
|
|
}
|
|
|
|
|
.input--currency-select {
|
|
|
|
|
padding-left: 2px;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.publish-row {
|
|
|
|
|
// border-bottom: 1px solid var(--color-border);
|
|
|
|
|
.form-field__help {
|
|
|
|
|
padding: var(--spacing-s);
|
|
|
|
|
padding-top: 0;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.form-field-date-picker {
|
|
|
|
|
padding: var(--spacing-s);
|
|
|
|
|
margin-bottom: 0;
|
2022-02-11 19:50:55 +01:00
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
2022-06-03 15:28:12 +02:00
|
|
|
.tags__input-wrapper {
|
|
|
|
|
background: rgba(var(--color-header-background-base), 0.4);
|
|
|
|
|
border-radius: var(--border-radius);
|
|
|
|
|
padding: var(--spacing-s);
|
2022-02-11 19:50:55 +01:00
|
|
|
}
|
|
|
|
|
|
2022-06-03 15:28:12 +02:00
|
|
|
.help {
|
|
|
|
|
opacity: 0.8;
|
|
|
|
|
margin-bottom: var(--spacing-l);
|
|
|
|
|
color: var(--color-text);
|
|
|
|
|
}
|
|
|
|
|
|
2022-07-11 16:12:37 +02:00
|
|
|
.card--livestream {
|
|
|
|
|
background: rgba(var(--color-header-background-base), 0.4);
|
|
|
|
|
border-radius: var(--border-radius);
|
|
|
|
|
padding: var(--spacing-s);
|
|
|
|
|
margin-top: var(--spacing-l);
|
|
|
|
|
margin-bottom: var(--spacing-m) !important;
|
|
|
|
|
|
|
|
|
|
.button-toggle {
|
|
|
|
|
background-color: var(--color-header-background) !important;
|
|
|
|
|
border: 2px solid var(--color-border);
|
|
|
|
|
&:hover:not(.button-toggle--active) {
|
|
|
|
|
background-color: rgba(var(--color-border-base), 0.1) !important;
|
|
|
|
|
//border: 2px solid transparent;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.button-toggle--active {
|
|
|
|
|
background-color: var(--color-border) !important;
|
|
|
|
|
border: 2px solid transparent;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.card__main-actions {
|
|
|
|
|
padding-top: 0;
|
|
|
|
|
|
|
|
|
|
div {
|
|
|
|
|
display: inline-block;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.button--secondary {
|
|
|
|
|
float: right;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
@media (max-width: $breakpoint-medium) {
|
|
|
|
|
.card__main-actions {
|
|
|
|
|
margin-top: 0;
|
|
|
|
|
.button--secondary {
|
|
|
|
|
padding: 0 var(--spacing-xs);
|
|
|
|
|
top: 0;
|
|
|
|
|
.button__label {
|
|
|
|
|
display: none;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.card--livestream-instructions {
|
|
|
|
|
margin-top: var(--spacing-m);
|
|
|
|
|
.card__title-actions-container {
|
|
|
|
|
button {
|
|
|
|
|
background-color: var(--color-primary);
|
|
|
|
|
margin-right: calc(var(--spacing-xs) * -1);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.card__header--between {
|
|
|
|
|
border-bottom: 0;
|
|
|
|
|
}
|
|
|
|
|
.card__main-actions {
|
|
|
|
|
background: rgba(var(--color-header-background-base), 0.4);
|
|
|
|
|
border-radius: var(--border-radius);
|
|
|
|
|
padding: var(--spacing-s);
|
|
|
|
|
.section__subtitle {
|
|
|
|
|
color: rgba(var(--color-text-base), 0.8);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.card--livestream-past {
|
|
|
|
|
margin-top: var(--spacing-l);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.card--livestream-key {
|
|
|
|
|
background: rgba(var(--color-header-background-base), 0.4);
|
|
|
|
|
border-radius: var(--border-radius);
|
|
|
|
|
padding: var(--spacing-s);
|
|
|
|
|
margin-top: var(--spacing-l);
|
|
|
|
|
margin-bottom: var(--spacing-xl) !important;
|
|
|
|
|
|
|
|
|
|
input {
|
|
|
|
|
box-shadow: 0 0 0 2px var(--color-border) inset;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.button--primary {
|
|
|
|
|
border: unset;
|
|
|
|
|
margin-bottom: -2px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
@media (max-width: $breakpoint-small) {
|
|
|
|
|
.card__main-actions {
|
|
|
|
|
margin-top: var(--spacing-s);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
2022-06-03 15:28:12 +02:00
|
|
|
.card--file {
|
|
|
|
|
background: rgba(var(--color-header-background-base), 0.4);
|
|
|
|
|
border-radius: var(--border-radius);
|
|
|
|
|
padding: var(--spacing-s);
|
|
|
|
|
|
|
|
|
|
input {
|
|
|
|
|
box-shadow: 0 0 0 2px var(--color-border) inset;
|
|
|
|
|
&:focus-visible {
|
|
|
|
|
box-shadow: 0 0 0 2px var(--color-primary) inset;
|
|
|
|
|
}
|
2022-02-11 19:50:55 +01:00
|
|
|
}
|
2022-06-03 15:28:12 +02:00
|
|
|
.button--secondary {
|
|
|
|
|
border-width: 2px 2px 2px 0;
|
|
|
|
|
border-color: var(--color-primary);
|
|
|
|
|
background-color: var(--color-primary) !important;
|
|
|
|
|
.icon {
|
|
|
|
|
stroke: var(--color-primary-contrast) !important;
|
|
|
|
|
}
|
|
|
|
|
.button__label {
|
|
|
|
|
color: var(--color-primary-contrast) !important;
|
|
|
|
|
}
|
2022-02-11 19:50:55 +01:00
|
|
|
}
|
2022-06-03 15:28:12 +02:00
|
|
|
label {
|
|
|
|
|
margin-left: 0 !important;
|
|
|
|
|
}
|
2022-07-11 16:12:37 +02:00
|
|
|
|
|
|
|
|
.fieldgroup--paginate {
|
|
|
|
|
padding-bottom: 0;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.help {
|
|
|
|
|
// margin-bottom:0;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.form-spacer {
|
|
|
|
|
margin-top: var(--spacing-l);
|
|
|
|
|
margin-bottom: var(--spacing-l);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.help--link {
|
|
|
|
|
margin: 0;
|
|
|
|
|
margin-top: calc(var(--spacing-l) * -1);
|
|
|
|
|
font-size: var(--font-small);
|
|
|
|
|
opacity: 0.8;
|
|
|
|
|
}
|
2022-06-03 15:28:12 +02:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.card__title-disabled {
|
|
|
|
|
opacity: 0.3;
|
2022-02-11 19:50:55 +01:00
|
|
|
}
|
|
|
|
|
|
2022-06-03 15:28:12 +02:00
|
|
|
.card--description {
|
|
|
|
|
label {
|
|
|
|
|
font-size: var(--font-large);
|
|
|
|
|
font-weight: var(--font-weight-bold);
|
|
|
|
|
}
|
2022-02-11 19:50:55 +01:00
|
|
|
.card__main-actions {
|
2022-06-03 15:28:12 +02:00
|
|
|
padding-top: 0;
|
|
|
|
|
margin-top: 0;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.MuiAutocomplete-root {
|
|
|
|
|
background: rgba(var(--color-header-background-base), 0.4);
|
|
|
|
|
border-radius: var(--border-radius);
|
|
|
|
|
padding: var(--spacing-s);
|
|
|
|
|
|
|
|
|
|
textarea {
|
|
|
|
|
box-shadow: 0 0 0 2px var(--color-border) inset;
|
|
|
|
|
&:focus-visible {
|
|
|
|
|
box-shadow: 0 0 0 2px var(--color-primary) inset;
|
2022-02-11 19:50:55 +01:00
|
|
|
}
|
|
|
|
|
}
|
2022-06-03 15:28:12 +02:00
|
|
|
|
2022-02-14 13:17:22 +01:00
|
|
|
@media (max-width: $breakpoint-small) {
|
2022-06-03 15:28:12 +02:00
|
|
|
.MuiFormControl-root {
|
|
|
|
|
border-radius: var(--border-radius);
|
|
|
|
|
box-shadow: 0 0 0 2px var(--color-border) inset;
|
|
|
|
|
}
|
|
|
|
|
textarea {
|
|
|
|
|
box-shadow: unset;
|
|
|
|
|
}
|
2022-02-14 13:17:22 +01:00
|
|
|
}
|
2022-02-11 19:50:55 +01:00
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
2022-06-03 15:28:12 +02:00
|
|
|
.card--thumbnail {
|
|
|
|
|
background: rgba(var(--color-header-background-base), 0.4);
|
|
|
|
|
border-radius: var(--border-radius);
|
|
|
|
|
padding: var(--spacing-s);
|
|
|
|
|
input {
|
|
|
|
|
box-shadow: 0 0 0 2px var(--color-border) inset;
|
2022-07-11 16:12:37 +02:00
|
|
|
z-index: unset;
|
2022-06-03 15:28:12 +02:00
|
|
|
}
|
|
|
|
|
.button--secondary {
|
|
|
|
|
border-width: 2px 2px 2px 0;
|
|
|
|
|
border-color: var(--color-primary);
|
|
|
|
|
background-color: var(--color-primary) !important;
|
|
|
|
|
.icon {
|
|
|
|
|
stroke: var(--color-primary-contrast) !important;
|
|
|
|
|
}
|
|
|
|
|
.button__label {
|
|
|
|
|
color: var(--color-primary-contrast) !important;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
@media (max-width: $breakpoint-small) {
|
|
|
|
|
.thumbnail-picker__preview {
|
|
|
|
|
width: 100%;
|
|
|
|
|
height: unset;
|
|
|
|
|
aspect-ratio: 16 / 9;
|
|
|
|
|
}
|
|
|
|
|
.column__item:last-of-type {
|
|
|
|
|
margin-bottom: 0;
|
|
|
|
|
}
|
|
|
|
|
}
|
2022-02-11 19:50:55 +01:00
|
|
|
}
|
|
|
|
|
|
2022-06-03 15:28:12 +02:00
|
|
|
.card--tags {
|
|
|
|
|
input {
|
|
|
|
|
box-shadow: 0 0 0 2px var(--color-border) inset;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.icon__wrapper {
|
|
|
|
|
margin-right: var(--spacing-s) !important;
|
|
|
|
|
}
|
|
|
|
|
.card__subtitle {
|
|
|
|
|
margin-top: 5px;
|
|
|
|
|
}
|
|
|
|
|
.card__main-actions {
|
|
|
|
|
padding-top: 0;
|
|
|
|
|
border-top: unset;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.card__header--between {
|
|
|
|
|
margin-bottom: unset;
|
|
|
|
|
border: unset;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tag {
|
|
|
|
|
background-color: var(--color-header-button);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
@media (max-width: $breakpoint-small) {
|
|
|
|
|
.card__subtitle {
|
|
|
|
|
font-size: var(--font-small);
|
|
|
|
|
}
|
|
|
|
|
.card__main-actions {
|
|
|
|
|
margin-top: 0;
|
|
|
|
|
}
|
|
|
|
|
}
|
2022-02-11 19:50:55 +01:00
|
|
|
}
|
2022-02-14 12:40:42 +01:00
|
|
|
|
2022-06-03 15:28:12 +02:00
|
|
|
.card--additional-options {
|
|
|
|
|
margin-bottom: var(--spacing-l) !important;
|
|
|
|
|
.card {
|
2022-07-11 16:12:37 +02:00
|
|
|
margin-bottom: 0 !important;
|
2022-06-03 15:28:12 +02:00
|
|
|
fieldset-section {
|
|
|
|
|
padding-bottom: 0;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.card__main-actions {
|
|
|
|
|
//padding-top:var(--spacing-s);
|
|
|
|
|
padding-top: 0;
|
2022-07-11 16:12:37 +02:00
|
|
|
margin-top: 0;
|
2022-06-03 15:28:12 +02:00
|
|
|
}
|
|
|
|
|
.section__actions {
|
|
|
|
|
padding: var(--spacing-s);
|
|
|
|
|
}
|
|
|
|
|
input,
|
|
|
|
|
select {
|
|
|
|
|
box-shadow: 0 0 0 2px var(--color-border) inset;
|
|
|
|
|
&:focus-visible {
|
|
|
|
|
box-shadow: 0 0 0 2px var(--color-primary) inset;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.react-datetime-picker {
|
|
|
|
|
box-shadow: 0 0 0 2px var(--color-border) inset;
|
|
|
|
|
input {
|
|
|
|
|
box-shadow: unset;
|
|
|
|
|
}
|
|
|
|
|
.react-datetime-picker__inputGroup__amPm {
|
|
|
|
|
margin-top: 4px;
|
|
|
|
|
height: calc(100% - 8px);
|
|
|
|
|
box-shadow: unset;
|
|
|
|
|
&:focus-visible {
|
|
|
|
|
box-shadow: 0 0 0 2px var(--color-primary) inset;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.form-field__help {
|
|
|
|
|
margin-bottom: 0;
|
|
|
|
|
}
|
|
|
|
|
fieldset {
|
|
|
|
|
.form-field__help {
|
|
|
|
|
margin-top: 0;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
fieldset-section {
|
|
|
|
|
margin-top: 0;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
fieldset-group {
|
|
|
|
|
fieldset-section {
|
|
|
|
|
width: 50%;
|
|
|
|
|
&:last-of-type {
|
|
|
|
|
padding-right: var(--spacing-s);
|
2022-02-15 10:54:24 +01:00
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
2022-06-03 15:28:12 +02:00
|
|
|
|
|
|
|
|
@media (max-width: $breakpoint-small) {
|
|
|
|
|
button {
|
|
|
|
|
margin-bottom: 0;
|
|
|
|
|
}
|
|
|
|
|
border-top: unset;
|
|
|
|
|
}
|
2022-07-11 16:12:37 +02:00
|
|
|
|
|
|
|
|
.radio {
|
|
|
|
|
padding-left: 0;
|
|
|
|
|
.input--currency-select {
|
|
|
|
|
label {
|
|
|
|
|
margin-left: 0 !important;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.form-field--price-amount,
|
|
|
|
|
select {
|
|
|
|
|
box-shadow: 0 0 0 2px var(--color-border) inset;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
@media (max-width: $breakpoint-small) {
|
|
|
|
|
.card__main-actions {
|
|
|
|
|
margin-top: 0;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.fieldset-group--smushed {
|
|
|
|
|
fieldset-section {
|
|
|
|
|
padding-left: 0;
|
|
|
|
|
padding-right: 0 !important;
|
|
|
|
|
|
|
|
|
|
.form-field--price-amount {
|
|
|
|
|
margin-right: 2px;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.input--currency-select {
|
|
|
|
|
label {
|
|
|
|
|
margin-left: 0;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
2022-06-03 15:28:12 +02:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.card--date {
|
|
|
|
|
background: rgba(var(--color-header-background-base), 0.4);
|
|
|
|
|
border-radius: var(--border-radius);
|
|
|
|
|
padding: var(--spacing-s);
|
|
|
|
|
|
|
|
|
|
.form-field__hint {
|
|
|
|
|
color: var(--color-text);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.react-datetime-picker {
|
|
|
|
|
box-shadow: 0 0 0 2px var(--color-border) inset;
|
|
|
|
|
input {
|
|
|
|
|
box-shadow: unset;
|
|
|
|
|
}
|
|
|
|
|
.react-datetime-picker__inputGroup__amPm {
|
|
|
|
|
margin-top: 4px;
|
|
|
|
|
height: calc(100% - 8px);
|
|
|
|
|
box-shadow: unset;
|
|
|
|
|
&:focus-visible {
|
|
|
|
|
box-shadow: 0 0 0 2px var(--color-primary) inset;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.EasyMDEContainer {
|
|
|
|
|
.editor-toolbar,
|
|
|
|
|
.CodeMirror-wrap {
|
|
|
|
|
border-width: 2px !important;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.editor-statusbar {
|
|
|
|
|
padding: 0;
|
|
|
|
|
padding-top: var(--spacing-s);
|
|
|
|
|
}
|
2022-02-15 10:54:24 +01:00
|
|
|
}
|
|
|
|
|
|
2022-02-14 12:40:42 +01:00
|
|
|
@media (max-width: $breakpoint-small) {
|
|
|
|
|
.MuiTextField-root {
|
|
|
|
|
background-color: var(--color-header-background);
|
|
|
|
|
}
|
|
|
|
|
.css-3i94e7-MuiInputBase-root-MuiOutlinedInput-root.Mui-focused .MuiOutlinedInput-notchedOutline {
|
|
|
|
|
border: unset;
|
|
|
|
|
border: 2px solid var(--color-primary);
|
|
|
|
|
}
|
|
|
|
|
textarea#content_description:focus-visible {
|
|
|
|
|
box-shadow: unset;
|
|
|
|
|
}
|
2022-02-15 09:16:13 +01:00
|
|
|
|
|
|
|
|
.section__actions {
|
|
|
|
|
.button {
|
2022-02-15 09:36:26 +01:00
|
|
|
height: var(--height-button);
|
|
|
|
|
margin-right: var(--spacing-m);
|
2022-02-15 09:16:13 +01:00
|
|
|
.button__content {
|
|
|
|
|
.button__label {
|
|
|
|
|
font-size: var(--font-s);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
2022-02-14 12:40:42 +01:00
|
|
|
}
|
2022-07-11 16:12:37 +02:00
|
|
|
|
|
|
|
|
.yrbl__wrap {
|
|
|
|
|
.button--primary {
|
|
|
|
|
border-radius: var(--border-radius) !important;
|
|
|
|
|
margin-right: var(--spacing-xxs) !important;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.help {
|
|
|
|
|
.button--link {
|
|
|
|
|
margin-left: 0;
|
|
|
|
|
}
|
|
|
|
|
}
|
2022-02-11 19:50:55 +01:00
|
|
|
}
|
|
|
|
|
|
2022-07-12 19:37:45 +02:00
|
|
|
.input--currency-select {
|
|
|
|
|
label {
|
|
|
|
|
margin-top: 2.5px !important;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
2022-06-03 15:28:12 +02:00
|
|
|
[data-reach-menu-popover] {
|
|
|
|
|
@media (max-width: $breakpoint-small) {
|
2022-07-04 14:32:30 +02:00
|
|
|
// width: calc(100% - var(--spacing-xs) * 2);
|
2022-06-03 15:28:12 +02:00
|
|
|
max-width: calc(100% - var(--spacing-xs) * 2);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
2022-02-11 19:50:55 +01:00
|
|
|
.transactionsPage-wrapper {
|
|
|
|
|
.card__header--between {
|
|
|
|
|
align-items: unset;
|
|
|
|
|
.card__title-section {
|
|
|
|
|
width: 100%;
|
|
|
|
|
div {
|
|
|
|
|
width: 100%;
|
|
|
|
|
.card__title {
|
|
|
|
|
width: 100%;
|
|
|
|
|
.txo__table_header {
|
|
|
|
|
width: auto !important;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.card__subtitle {
|
|
|
|
|
min-height: 3rem;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.card__actions {
|
|
|
|
|
@media (max-width: $breakpoint-small) {
|
|
|
|
|
> * {
|
|
|
|
|
padding-bottom: var(--spacing-m);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.topPage-wrapper {
|
|
|
|
|
.search__header {
|
|
|
|
|
.claim-preview__wrapper {
|
|
|
|
|
background-color: rgba(var(--color-header-background-base), 0.6);
|
|
|
|
|
&:hover {
|
|
|
|
|
background-color: rgba(var(--color-header-background-base), 0.9);
|
|
|
|
|
}
|
2022-02-18 11:51:48 +01:00
|
|
|
.claim-preview__repost-author {
|
|
|
|
|
left: 0;
|
|
|
|
|
top: 0;
|
|
|
|
|
.claim-preview__repost-ribbon {
|
|
|
|
|
span {
|
|
|
|
|
display: inline-block;
|
|
|
|
|
margin-left: 12px;
|
|
|
|
|
margin-top: -4px;
|
|
|
|
|
width: 92px;
|
|
|
|
|
white-space: nowrap;
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
text-overflow: ellipsis;
|
|
|
|
|
}
|
|
|
|
|
@media (max-width: $breakpoint-small) {
|
|
|
|
|
font-size: var(--font-xxxsmall);
|
|
|
|
|
.icon {
|
|
|
|
|
margin-top: 3px;
|
|
|
|
|
}
|
|
|
|
|
span {
|
|
|
|
|
width: 78px;
|
|
|
|
|
margin-top: 1px;
|
|
|
|
|
margin-left: 10px;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.search__top-links {
|
|
|
|
|
@media (max-width: $breakpoint-small) {
|
|
|
|
|
.button {
|
|
|
|
|
padding: 0 var(--spacing-m);
|
|
|
|
|
height: var(--height-button);
|
|
|
|
|
margin-bottom: var(--spacing-xxxs);
|
|
|
|
|
.button__content {
|
|
|
|
|
.button__label {
|
|
|
|
|
font-size: var(--font-base);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
2022-02-11 19:50:55 +01:00
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.claim-preview__wrapper--channel {
|
|
|
|
|
.claim__menu-button {
|
|
|
|
|
right: var(--spacing-xxs) !important;
|
|
|
|
|
}
|
|
|
|
|
}
|
2022-02-12 00:58:19 +01:00
|
|
|
|
|
|
|
|
.claim-preview__wrapper {
|
|
|
|
|
.claim-tile__info {
|
|
|
|
|
padding-bottom: 0;
|
|
|
|
|
}
|
|
|
|
|
.claim-preview__primary-actions {
|
|
|
|
|
.button--alt {
|
|
|
|
|
color: var(--color-text);
|
|
|
|
|
background-color: var(--color-header-button);
|
|
|
|
|
}
|
2022-02-12 01:03:51 +01:00
|
|
|
.button-group {
|
|
|
|
|
.button--alt {
|
|
|
|
|
color: var(--color-primary-contrast);
|
|
|
|
|
background-color: var(--color-primary);
|
2022-02-12 01:09:29 +01:00
|
|
|
.icon {
|
|
|
|
|
stroke: var(--color-primary-contrast);
|
|
|
|
|
}
|
2022-02-12 01:03:51 +01:00
|
|
|
}
|
|
|
|
|
}
|
2022-02-12 00:58:19 +01:00
|
|
|
}
|
2022-02-18 11:51:48 +01:00
|
|
|
.claim-preview__actions {
|
|
|
|
|
.claim-preview__primary-actions {
|
|
|
|
|
margin-top: var(--spacing-xxxs);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.claim-preview__repost-author {
|
|
|
|
|
top: var(--spacing-m);
|
|
|
|
|
left: var(--spacing-m);
|
|
|
|
|
.claim-preview__repost-ribbon {
|
|
|
|
|
@media (max-width: $breakpoint-small) {
|
|
|
|
|
.icon {
|
|
|
|
|
margin-top: 3px;
|
|
|
|
|
}
|
|
|
|
|
font-size: var(--font-xxxsmall);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
2022-02-12 00:58:19 +01:00
|
|
|
}
|
2022-02-11 19:50:55 +01:00
|
|
|
}
|
|
|
|
|
|
Playlists v2: Refactors, touch ups + Queue Mode (#1604)
* Playlists v2
* Style pass
* Change playlist items arrange icon
* Playlist card body open by default
* Refactor collectionEdit components
* Paginate & Refactor bid field
* Collection page changes
* Add Thumbnail optional
* Replace extra info for description on collection page
* Playlist card right below video on medium screen
* Allow editing private collections
* Add edit option to menus
* Allow deleting a public playlist but keeping a private version
* Add queue to Save menu, remove edit option from Builtin pages, show queue on playlists page
* Fix scroll to recent persisting on medium screen
* Fix adding to queue from menu
* Fixes for delete
* PublishList: delay mounting Items tab to prevent lock-up (#1783)
For a large list, the playlist publish form is unusable (super-slow typing) due to the entire list being mounted despite the tab is not active.
The full solution is still to paginate it, but for now, don't mount the tab until it is selected. Add a spinner to indicate something is loading. It's not prefect, but it's throwaway code anyway. At least we can fill in the fields properly now.
* Batch-resolve private collections (#1782)
* makeSelectClaimForClaimId --> selectClaimForClaimId
Move away from the problematic `makeSelect*`, especially in large loops.
* Batch-resolve private collections
1758
This alleviates the lock-up that is caused by large number of invidual resolves. There will still be some minor stutter due to the large DOM that React needs to handle -- that is logged in 1758 and will be handled separately.
At least the stutter is short (1-2s) and the app is still usable.
Private list items are being resolve individually, super slow if the list is large (>100). Published lists doesn't have this issue.
doFetchItemsInCollections contains most of the useful logic, but it isn't called for private/built-in lists because it's not an actual claim.
Tweaked doFetchItemsInCollections to handle private (UUID-based) collections.
* Use persisted state for floating player playlist card body
- I find it annoying being open everytime
* Fix removing edits from published playlist
* Fix scroll on mobile
* Allow going editing items from toast
* Fix ClaimShareButton
* Prevent edit/publish of builtin
* Fix async inside forEach
* Fix sync on queue edit
* Fix autoplayCountdown replay
* Fix deleting an item scrolling the playlist
* CreatedAt fixes
* Remove repost for now
* Anon publish fixes
* Fix mature case on floating
Co-authored-by: infinite-persistence <64950861+infinite-persistence@users.noreply.github.com>
2022-07-13 15:59:59 +02:00
|
|
|
.playlists-page-wrapper {
|
|
|
|
|
.claim-list__header-label--playlist-page {
|
|
|
|
|
display: flex;
|
|
|
|
|
margin-top: var(--spacing-l);
|
|
|
|
|
margin-bottom: -10px;
|
|
|
|
|
@media (max-width: $breakpoint-small) {
|
|
|
|
|
margin-top: var(--spacing-xl);
|
|
|
|
|
margin-bottom: -30px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
svg {
|
|
|
|
|
width: 3rem;
|
|
|
|
|
height: 3rem;
|
|
|
|
|
background-color: var(--color-header-background);
|
|
|
|
|
border-radius: 50%;
|
|
|
|
|
padding: var(--spacing-s);
|
|
|
|
|
margin-right: 0;
|
|
|
|
|
}
|
|
|
|
|
label {
|
|
|
|
|
font-size: var(--font-large);
|
|
|
|
|
font-weight: var(--font-weight-bold);
|
|
|
|
|
padding-left: 10px;
|
|
|
|
|
// width:auto;
|
|
|
|
|
margin-top: var(--spacing-s);
|
|
|
|
|
flex: 1;
|
|
|
|
|
border-bottom: 1px solid var(--color-header-background);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
button {
|
|
|
|
|
height: 36px;
|
|
|
|
|
margin-top: -6px;
|
|
|
|
|
float: right;
|
|
|
|
|
padding-left: var(--spacing-xs);
|
|
|
|
|
padding-right: var(--spacing-s);
|
|
|
|
|
.button__content {
|
|
|
|
|
.button__label {
|
|
|
|
|
font-size: var(--font-body);
|
|
|
|
|
margin-left: 0;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.icon {
|
|
|
|
|
background-color: unset;
|
|
|
|
|
width: 2rem;
|
|
|
|
|
height: 2rem;
|
|
|
|
|
padding: 8px;
|
|
|
|
|
padding-left: 0;
|
|
|
|
|
padding-right: 0;
|
|
|
|
|
margin: 0;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
2022-02-11 19:50:55 +01:00
|
|
|
.card-stack:first-of-type {
|
|
|
|
|
.card {
|
|
|
|
|
margin-bottom: var(--spacing-l);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
Playlists v2: Refactors, touch ups + Queue Mode (#1604)
* Playlists v2
* Style pass
* Change playlist items arrange icon
* Playlist card body open by default
* Refactor collectionEdit components
* Paginate & Refactor bid field
* Collection page changes
* Add Thumbnail optional
* Replace extra info for description on collection page
* Playlist card right below video on medium screen
* Allow editing private collections
* Add edit option to menus
* Allow deleting a public playlist but keeping a private version
* Add queue to Save menu, remove edit option from Builtin pages, show queue on playlists page
* Fix scroll to recent persisting on medium screen
* Fix adding to queue from menu
* Fixes for delete
* PublishList: delay mounting Items tab to prevent lock-up (#1783)
For a large list, the playlist publish form is unusable (super-slow typing) due to the entire list being mounted despite the tab is not active.
The full solution is still to paginate it, but for now, don't mount the tab until it is selected. Add a spinner to indicate something is loading. It's not prefect, but it's throwaway code anyway. At least we can fill in the fields properly now.
* Batch-resolve private collections (#1782)
* makeSelectClaimForClaimId --> selectClaimForClaimId
Move away from the problematic `makeSelect*`, especially in large loops.
* Batch-resolve private collections
1758
This alleviates the lock-up that is caused by large number of invidual resolves. There will still be some minor stutter due to the large DOM that React needs to handle -- that is logged in 1758 and will be handled separately.
At least the stutter is short (1-2s) and the app is still usable.
Private list items are being resolve individually, super slow if the list is large (>100). Published lists doesn't have this issue.
doFetchItemsInCollections contains most of the useful logic, but it isn't called for private/built-in lists because it's not an actual claim.
Tweaked doFetchItemsInCollections to handle private (UUID-based) collections.
* Use persisted state for floating player playlist card body
- I find it annoying being open everytime
* Fix removing edits from published playlist
* Fix scroll on mobile
* Allow going editing items from toast
* Fix ClaimShareButton
* Prevent edit/publish of builtin
* Fix async inside forEach
* Fix sync on queue edit
* Fix autoplayCountdown replay
* Fix deleting an item scrolling the playlist
* CreatedAt fixes
* Remove repost for now
* Anon publish fixes
* Fix mature case on floating
Co-authored-by: infinite-persistence <64950861+infinite-persistence@users.noreply.github.com>
2022-07-13 15:59:59 +02:00
|
|
|
.ul--no-style li {
|
|
|
|
|
margin-bottom: var(--spacing-xxs) !important;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.claim-list {
|
|
|
|
|
margin-bottom: var(--spacing-xxl);
|
|
|
|
|
&.playlists {
|
|
|
|
|
.claim-preview__text {
|
|
|
|
|
justify-content: space-around;
|
|
|
|
|
|
|
|
|
|
.claim-preview-metadata {
|
|
|
|
|
flex: unset;
|
|
|
|
|
display: grid;
|
|
|
|
|
flex-direction: row;
|
|
|
|
|
align-items: center;
|
|
|
|
|
|
|
|
|
|
.claim-preview-info {
|
|
|
|
|
display: inline-block;
|
|
|
|
|
.claim-preview__title {
|
|
|
|
|
width: 40%;
|
|
|
|
|
margin-left: var(--file-list-thumbnail-width);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.claim-tile__info {
|
|
|
|
|
display: inline-block;
|
|
|
|
|
&.action {
|
|
|
|
|
width: 10%;
|
|
|
|
|
.button {
|
|
|
|
|
border: 2px solid var(--color-border);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
@media (max-width: $breakpoint-medium) {
|
|
|
|
|
grid-template-columns: 1.3fr repeat(4, 1fr);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
@media (min-width: $breakpoint-medium) {
|
|
|
|
|
grid-template-columns: 1.9fr repeat(4, 1fr);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.truncated-text {
|
|
|
|
|
word-break: break-all;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.claim-tile__info {
|
|
|
|
|
&.date {
|
|
|
|
|
justify-self: flex-end;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.claim-preview-info {
|
|
|
|
|
color: var(--color-text);
|
|
|
|
|
}
|
|
|
|
|
}
|
2022-02-11 19:50:55 +01:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.claim-grid__wrapper:last-of-type {
|
|
|
|
|
.section__header--actions {
|
|
|
|
|
margin-top: 0;
|
|
|
|
|
padding-top: 0;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.section__header--actions {
|
|
|
|
|
@media (max-width: $breakpoint-small) {
|
|
|
|
|
.claim-search__menu-group {
|
|
|
|
|
.button-toggle {
|
|
|
|
|
flex: auto;
|
|
|
|
|
.button__content {
|
|
|
|
|
display: flex;
|
|
|
|
|
justify-content: center !important;
|
|
|
|
|
align-items: center;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.wunderbar--inline {
|
|
|
|
|
width: 100%;
|
|
|
|
|
flex: unset;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
2021-11-08 14:36:30 +01:00
|
|
|
}
|
2022-02-11 19:50:55 +01:00
|
|
|
|
|
|
|
|
.card__header--between {
|
|
|
|
|
width: 100%;
|
|
|
|
|
flex-wrap: wrap;
|
Playlists v2: Refactors, touch ups + Queue Mode (#1604)
* Playlists v2
* Style pass
* Change playlist items arrange icon
* Playlist card body open by default
* Refactor collectionEdit components
* Paginate & Refactor bid field
* Collection page changes
* Add Thumbnail optional
* Replace extra info for description on collection page
* Playlist card right below video on medium screen
* Allow editing private collections
* Add edit option to menus
* Allow deleting a public playlist but keeping a private version
* Add queue to Save menu, remove edit option from Builtin pages, show queue on playlists page
* Fix scroll to recent persisting on medium screen
* Fix adding to queue from menu
* Fixes for delete
* PublishList: delay mounting Items tab to prevent lock-up (#1783)
For a large list, the playlist publish form is unusable (super-slow typing) due to the entire list being mounted despite the tab is not active.
The full solution is still to paginate it, but for now, don't mount the tab until it is selected. Add a spinner to indicate something is loading. It's not prefect, but it's throwaway code anyway. At least we can fill in the fields properly now.
* Batch-resolve private collections (#1782)
* makeSelectClaimForClaimId --> selectClaimForClaimId
Move away from the problematic `makeSelect*`, especially in large loops.
* Batch-resolve private collections
1758
This alleviates the lock-up that is caused by large number of invidual resolves. There will still be some minor stutter due to the large DOM that React needs to handle -- that is logged in 1758 and will be handled separately.
At least the stutter is short (1-2s) and the app is still usable.
Private list items are being resolve individually, super slow if the list is large (>100). Published lists doesn't have this issue.
doFetchItemsInCollections contains most of the useful logic, but it isn't called for private/built-in lists because it's not an actual claim.
Tweaked doFetchItemsInCollections to handle private (UUID-based) collections.
* Use persisted state for floating player playlist card body
- I find it annoying being open everytime
* Fix removing edits from published playlist
* Fix scroll on mobile
* Allow going editing items from toast
* Fix ClaimShareButton
* Prevent edit/publish of builtin
* Fix async inside forEach
* Fix sync on queue edit
* Fix autoplayCountdown replay
* Fix deleting an item scrolling the playlist
* CreatedAt fixes
* Remove repost for now
* Anon publish fixes
* Fix mature case on floating
Co-authored-by: infinite-persistence <64950861+infinite-persistence@users.noreply.github.com>
2022-07-13 15:59:59 +02:00
|
|
|
|
2022-02-11 19:50:55 +01:00
|
|
|
.card__title-section {
|
|
|
|
|
width: 100%;
|
|
|
|
|
flex-wrap: wrap;
|
Playlists v2: Refactors, touch ups + Queue Mode (#1604)
* Playlists v2
* Style pass
* Change playlist items arrange icon
* Playlist card body open by default
* Refactor collectionEdit components
* Paginate & Refactor bid field
* Collection page changes
* Add Thumbnail optional
* Replace extra info for description on collection page
* Playlist card right below video on medium screen
* Allow editing private collections
* Add edit option to menus
* Allow deleting a public playlist but keeping a private version
* Add queue to Save menu, remove edit option from Builtin pages, show queue on playlists page
* Fix scroll to recent persisting on medium screen
* Fix adding to queue from menu
* Fixes for delete
* PublishList: delay mounting Items tab to prevent lock-up (#1783)
For a large list, the playlist publish form is unusable (super-slow typing) due to the entire list being mounted despite the tab is not active.
The full solution is still to paginate it, but for now, don't mount the tab until it is selected. Add a spinner to indicate something is loading. It's not prefect, but it's throwaway code anyway. At least we can fill in the fields properly now.
* Batch-resolve private collections (#1782)
* makeSelectClaimForClaimId --> selectClaimForClaimId
Move away from the problematic `makeSelect*`, especially in large loops.
* Batch-resolve private collections
1758
This alleviates the lock-up that is caused by large number of invidual resolves. There will still be some minor stutter due to the large DOM that React needs to handle -- that is logged in 1758 and will be handled separately.
At least the stutter is short (1-2s) and the app is still usable.
Private list items are being resolve individually, super slow if the list is large (>100). Published lists doesn't have this issue.
doFetchItemsInCollections contains most of the useful logic, but it isn't called for private/built-in lists because it's not an actual claim.
Tweaked doFetchItemsInCollections to handle private (UUID-based) collections.
* Use persisted state for floating player playlist card body
- I find it annoying being open everytime
* Fix removing edits from published playlist
* Fix scroll on mobile
* Allow going editing items from toast
* Fix ClaimShareButton
* Prevent edit/publish of builtin
* Fix async inside forEach
* Fix sync on queue edit
* Fix autoplayCountdown replay
* Fix deleting an item scrolling the playlist
* CreatedAt fixes
* Remove repost for now
* Anon publish fixes
* Fix mature case on floating
Co-authored-by: infinite-persistence <64950861+infinite-persistence@users.noreply.github.com>
2022-07-13 15:59:59 +02:00
|
|
|
|
2022-04-01 18:40:04 +02:00
|
|
|
div:first-child:not(.channel-thumbnail) {
|
2022-02-11 19:50:55 +01:00
|
|
|
width: 100%;
|
Playlists v2: Refactors, touch ups + Queue Mode (#1604)
* Playlists v2
* Style pass
* Change playlist items arrange icon
* Playlist card body open by default
* Refactor collectionEdit components
* Paginate & Refactor bid field
* Collection page changes
* Add Thumbnail optional
* Replace extra info for description on collection page
* Playlist card right below video on medium screen
* Allow editing private collections
* Add edit option to menus
* Allow deleting a public playlist but keeping a private version
* Add queue to Save menu, remove edit option from Builtin pages, show queue on playlists page
* Fix scroll to recent persisting on medium screen
* Fix adding to queue from menu
* Fixes for delete
* PublishList: delay mounting Items tab to prevent lock-up (#1783)
For a large list, the playlist publish form is unusable (super-slow typing) due to the entire list being mounted despite the tab is not active.
The full solution is still to paginate it, but for now, don't mount the tab until it is selected. Add a spinner to indicate something is loading. It's not prefect, but it's throwaway code anyway. At least we can fill in the fields properly now.
* Batch-resolve private collections (#1782)
* makeSelectClaimForClaimId --> selectClaimForClaimId
Move away from the problematic `makeSelect*`, especially in large loops.
* Batch-resolve private collections
1758
This alleviates the lock-up that is caused by large number of invidual resolves. There will still be some minor stutter due to the large DOM that React needs to handle -- that is logged in 1758 and will be handled separately.
At least the stutter is short (1-2s) and the app is still usable.
Private list items are being resolve individually, super slow if the list is large (>100). Published lists doesn't have this issue.
doFetchItemsInCollections contains most of the useful logic, but it isn't called for private/built-in lists because it's not an actual claim.
Tweaked doFetchItemsInCollections to handle private (UUID-based) collections.
* Use persisted state for floating player playlist card body
- I find it annoying being open everytime
* Fix removing edits from published playlist
* Fix scroll on mobile
* Allow going editing items from toast
* Fix ClaimShareButton
* Prevent edit/publish of builtin
* Fix async inside forEach
* Fix sync on queue edit
* Fix autoplayCountdown replay
* Fix deleting an item scrolling the playlist
* CreatedAt fixes
* Remove repost for now
* Anon publish fixes
* Fix mature case on floating
Co-authored-by: infinite-persistence <64950861+infinite-persistence@users.noreply.github.com>
2022-07-13 15:59:59 +02:00
|
|
|
|
2022-02-11 19:50:55 +01:00
|
|
|
.card__subtitle {
|
|
|
|
|
background-color: var(--color-header-background);
|
|
|
|
|
padding: var(--spacing-m);
|
|
|
|
|
border-radius: var(--border-radius);
|
|
|
|
|
|
|
|
|
|
.claim-preview__wrapper {
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: flex-start;
|
|
|
|
|
|
|
|
|
|
.claim-preview-metadata {
|
|
|
|
|
flex-wrap: unset;
|
Playlists v2: Refactors, touch ups + Queue Mode (#1604)
* Playlists v2
* Style pass
* Change playlist items arrange icon
* Playlist card body open by default
* Refactor collectionEdit components
* Paginate & Refactor bid field
* Collection page changes
* Add Thumbnail optional
* Replace extra info for description on collection page
* Playlist card right below video on medium screen
* Allow editing private collections
* Add edit option to menus
* Allow deleting a public playlist but keeping a private version
* Add queue to Save menu, remove edit option from Builtin pages, show queue on playlists page
* Fix scroll to recent persisting on medium screen
* Fix adding to queue from menu
* Fixes for delete
* PublishList: delay mounting Items tab to prevent lock-up (#1783)
For a large list, the playlist publish form is unusable (super-slow typing) due to the entire list being mounted despite the tab is not active.
The full solution is still to paginate it, but for now, don't mount the tab until it is selected. Add a spinner to indicate something is loading. It's not prefect, but it's throwaway code anyway. At least we can fill in the fields properly now.
* Batch-resolve private collections (#1782)
* makeSelectClaimForClaimId --> selectClaimForClaimId
Move away from the problematic `makeSelect*`, especially in large loops.
* Batch-resolve private collections
1758
This alleviates the lock-up that is caused by large number of invidual resolves. There will still be some minor stutter due to the large DOM that React needs to handle -- that is logged in 1758 and will be handled separately.
At least the stutter is short (1-2s) and the app is still usable.
Private list items are being resolve individually, super slow if the list is large (>100). Published lists doesn't have this issue.
doFetchItemsInCollections contains most of the useful logic, but it isn't called for private/built-in lists because it's not an actual claim.
Tweaked doFetchItemsInCollections to handle private (UUID-based) collections.
* Use persisted state for floating player playlist card body
- I find it annoying being open everytime
* Fix removing edits from published playlist
* Fix scroll on mobile
* Allow going editing items from toast
* Fix ClaimShareButton
* Prevent edit/publish of builtin
* Fix async inside forEach
* Fix sync on queue edit
* Fix autoplayCountdown replay
* Fix deleting an item scrolling the playlist
* CreatedAt fixes
* Remove repost for now
* Anon publish fixes
* Fix mature case on floating
Co-authored-by: infinite-persistence <64950861+infinite-persistence@users.noreply.github.com>
2022-07-13 15:59:59 +02:00
|
|
|
|
2022-02-11 19:50:55 +01:00
|
|
|
.claim-preview-info {
|
|
|
|
|
width: 100%;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
Playlists v2: Refactors, touch ups + Queue Mode (#1604)
* Playlists v2
* Style pass
* Change playlist items arrange icon
* Playlist card body open by default
* Refactor collectionEdit components
* Paginate & Refactor bid field
* Collection page changes
* Add Thumbnail optional
* Replace extra info for description on collection page
* Playlist card right below video on medium screen
* Allow editing private collections
* Add edit option to menus
* Allow deleting a public playlist but keeping a private version
* Add queue to Save menu, remove edit option from Builtin pages, show queue on playlists page
* Fix scroll to recent persisting on medium screen
* Fix adding to queue from menu
* Fixes for delete
* PublishList: delay mounting Items tab to prevent lock-up (#1783)
For a large list, the playlist publish form is unusable (super-slow typing) due to the entire list being mounted despite the tab is not active.
The full solution is still to paginate it, but for now, don't mount the tab until it is selected. Add a spinner to indicate something is loading. It's not prefect, but it's throwaway code anyway. At least we can fill in the fields properly now.
* Batch-resolve private collections (#1782)
* makeSelectClaimForClaimId --> selectClaimForClaimId
Move away from the problematic `makeSelect*`, especially in large loops.
* Batch-resolve private collections
1758
This alleviates the lock-up that is caused by large number of invidual resolves. There will still be some minor stutter due to the large DOM that React needs to handle -- that is logged in 1758 and will be handled separately.
At least the stutter is short (1-2s) and the app is still usable.
Private list items are being resolve individually, super slow if the list is large (>100). Published lists doesn't have this issue.
doFetchItemsInCollections contains most of the useful logic, but it isn't called for private/built-in lists because it's not an actual claim.
Tweaked doFetchItemsInCollections to handle private (UUID-based) collections.
* Use persisted state for floating player playlist card body
- I find it annoying being open everytime
* Fix removing edits from published playlist
* Fix scroll on mobile
* Allow going editing items from toast
* Fix ClaimShareButton
* Prevent edit/publish of builtin
* Fix async inside forEach
* Fix sync on queue edit
* Fix autoplayCountdown replay
* Fix deleting an item scrolling the playlist
* CreatedAt fixes
* Remove repost for now
* Anon publish fixes
* Fix mature case on floating
Co-authored-by: infinite-persistence <64950861+infinite-persistence@users.noreply.github.com>
2022-07-13 15:59:59 +02:00
|
|
|
|
|
|
|
|
.markdown-preview--description {
|
|
|
|
|
color: var(--color-text);
|
|
|
|
|
}
|
2022-02-11 19:50:55 +01:00
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
@media (min-width: $breakpoint-small) {
|
Playlists v2: Refactors, touch ups + Queue Mode (#1604)
* Playlists v2
* Style pass
* Change playlist items arrange icon
* Playlist card body open by default
* Refactor collectionEdit components
* Paginate & Refactor bid field
* Collection page changes
* Add Thumbnail optional
* Replace extra info for description on collection page
* Playlist card right below video on medium screen
* Allow editing private collections
* Add edit option to menus
* Allow deleting a public playlist but keeping a private version
* Add queue to Save menu, remove edit option from Builtin pages, show queue on playlists page
* Fix scroll to recent persisting on medium screen
* Fix adding to queue from menu
* Fixes for delete
* PublishList: delay mounting Items tab to prevent lock-up (#1783)
For a large list, the playlist publish form is unusable (super-slow typing) due to the entire list being mounted despite the tab is not active.
The full solution is still to paginate it, but for now, don't mount the tab until it is selected. Add a spinner to indicate something is loading. It's not prefect, but it's throwaway code anyway. At least we can fill in the fields properly now.
* Batch-resolve private collections (#1782)
* makeSelectClaimForClaimId --> selectClaimForClaimId
Move away from the problematic `makeSelect*`, especially in large loops.
* Batch-resolve private collections
1758
This alleviates the lock-up that is caused by large number of invidual resolves. There will still be some minor stutter due to the large DOM that React needs to handle -- that is logged in 1758 and will be handled separately.
At least the stutter is short (1-2s) and the app is still usable.
Private list items are being resolve individually, super slow if the list is large (>100). Published lists doesn't have this issue.
doFetchItemsInCollections contains most of the useful logic, but it isn't called for private/built-in lists because it's not an actual claim.
Tweaked doFetchItemsInCollections to handle private (UUID-based) collections.
* Use persisted state for floating player playlist card body
- I find it annoying being open everytime
* Fix removing edits from published playlist
* Fix scroll on mobile
* Allow going editing items from toast
* Fix ClaimShareButton
* Prevent edit/publish of builtin
* Fix async inside forEach
* Fix sync on queue edit
* Fix autoplayCountdown replay
* Fix deleting an item scrolling the playlist
* CreatedAt fixes
* Remove repost for now
* Anon publish fixes
* Fix mature case on floating
Co-authored-by: infinite-persistence <64950861+infinite-persistence@users.noreply.github.com>
2022-07-13 15:59:59 +02:00
|
|
|
.claim-preview--collection-editing {
|
2022-02-11 19:50:55 +01:00
|
|
|
height: unset;
|
|
|
|
|
position: relative;
|
|
|
|
|
|
|
|
|
|
.media__thumb {
|
|
|
|
|
position: relative;
|
|
|
|
|
right: unset;
|
|
|
|
|
|
|
|
|
|
.claim-preview__hover-actions {
|
|
|
|
|
display: visible;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.claim-preview__text {
|
|
|
|
|
position: unset;
|
|
|
|
|
right: unset;
|
|
|
|
|
width: 100%;
|
|
|
|
|
background-color: unset;
|
|
|
|
|
padding: 0;
|
|
|
|
|
border-radius: unset;
|
|
|
|
|
|
|
|
|
|
.claim-preview-info {
|
|
|
|
|
.claim-preview__title {
|
|
|
|
|
font-size: var(--font-small);
|
|
|
|
|
}
|
|
|
|
|
}
|
Playlists v2: Refactors, touch ups + Queue Mode (#1604)
* Playlists v2
* Style pass
* Change playlist items arrange icon
* Playlist card body open by default
* Refactor collectionEdit components
* Paginate & Refactor bid field
* Collection page changes
* Add Thumbnail optional
* Replace extra info for description on collection page
* Playlist card right below video on medium screen
* Allow editing private collections
* Add edit option to menus
* Allow deleting a public playlist but keeping a private version
* Add queue to Save menu, remove edit option from Builtin pages, show queue on playlists page
* Fix scroll to recent persisting on medium screen
* Fix adding to queue from menu
* Fixes for delete
* PublishList: delay mounting Items tab to prevent lock-up (#1783)
For a large list, the playlist publish form is unusable (super-slow typing) due to the entire list being mounted despite the tab is not active.
The full solution is still to paginate it, but for now, don't mount the tab until it is selected. Add a spinner to indicate something is loading. It's not prefect, but it's throwaway code anyway. At least we can fill in the fields properly now.
* Batch-resolve private collections (#1782)
* makeSelectClaimForClaimId --> selectClaimForClaimId
Move away from the problematic `makeSelect*`, especially in large loops.
* Batch-resolve private collections
1758
This alleviates the lock-up that is caused by large number of invidual resolves. There will still be some minor stutter due to the large DOM that React needs to handle -- that is logged in 1758 and will be handled separately.
At least the stutter is short (1-2s) and the app is still usable.
Private list items are being resolve individually, super slow if the list is large (>100). Published lists doesn't have this issue.
doFetchItemsInCollections contains most of the useful logic, but it isn't called for private/built-in lists because it's not an actual claim.
Tweaked doFetchItemsInCollections to handle private (UUID-based) collections.
* Use persisted state for floating player playlist card body
- I find it annoying being open everytime
* Fix removing edits from published playlist
* Fix scroll on mobile
* Allow going editing items from toast
* Fix ClaimShareButton
* Prevent edit/publish of builtin
* Fix async inside forEach
* Fix sync on queue edit
* Fix autoplayCountdown replay
* Fix deleting an item scrolling the playlist
* CreatedAt fixes
* Remove repost for now
* Anon publish fixes
* Fix mature case on floating
Co-authored-by: infinite-persistence <64950861+infinite-persistence@users.noreply.github.com>
2022-07-13 15:59:59 +02:00
|
|
|
|
2022-02-11 19:50:55 +01:00
|
|
|
.media__subtitle {
|
|
|
|
|
.button__content {
|
|
|
|
|
.channel-name {
|
|
|
|
|
font-size: var(--font-xsmall);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
Playlists v2: Refactors, touch ups + Queue Mode (#1604)
* Playlists v2
* Style pass
* Change playlist items arrange icon
* Playlist card body open by default
* Refactor collectionEdit components
* Paginate & Refactor bid field
* Collection page changes
* Add Thumbnail optional
* Replace extra info for description on collection page
* Playlist card right below video on medium screen
* Allow editing private collections
* Add edit option to menus
* Allow deleting a public playlist but keeping a private version
* Add queue to Save menu, remove edit option from Builtin pages, show queue on playlists page
* Fix scroll to recent persisting on medium screen
* Fix adding to queue from menu
* Fixes for delete
* PublishList: delay mounting Items tab to prevent lock-up (#1783)
For a large list, the playlist publish form is unusable (super-slow typing) due to the entire list being mounted despite the tab is not active.
The full solution is still to paginate it, but for now, don't mount the tab until it is selected. Add a spinner to indicate something is loading. It's not prefect, but it's throwaway code anyway. At least we can fill in the fields properly now.
* Batch-resolve private collections (#1782)
* makeSelectClaimForClaimId --> selectClaimForClaimId
Move away from the problematic `makeSelect*`, especially in large loops.
* Batch-resolve private collections
1758
This alleviates the lock-up that is caused by large number of invidual resolves. There will still be some minor stutter due to the large DOM that React needs to handle -- that is logged in 1758 and will be handled separately.
At least the stutter is short (1-2s) and the app is still usable.
Private list items are being resolve individually, super slow if the list is large (>100). Published lists doesn't have this issue.
doFetchItemsInCollections contains most of the useful logic, but it isn't called for private/built-in lists because it's not an actual claim.
Tweaked doFetchItemsInCollections to handle private (UUID-based) collections.
* Use persisted state for floating player playlist card body
- I find it annoying being open everytime
* Fix removing edits from published playlist
* Fix scroll on mobile
* Allow going editing items from toast
* Fix ClaimShareButton
* Prevent edit/publish of builtin
* Fix async inside forEach
* Fix sync on queue edit
* Fix autoplayCountdown replay
* Fix deleting an item scrolling the playlist
* CreatedAt fixes
* Remove repost for now
* Anon publish fixes
* Fix mature case on floating
Co-authored-by: infinite-persistence <64950861+infinite-persistence@users.noreply.github.com>
2022-07-13 15:59:59 +02:00
|
|
|
|
2022-02-11 19:50:55 +01:00
|
|
|
.button-dislike {
|
|
|
|
|
margin-right: 0;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
@media (max-width: $breakpoint-small) {
|
|
|
|
|
.media__actions.stretch {
|
|
|
|
|
.button:nth-of-type(2) {
|
|
|
|
|
margin-right: 0 !important;
|
|
|
|
|
}
|
Playlists v2: Refactors, touch ups + Queue Mode (#1604)
* Playlists v2
* Style pass
* Change playlist items arrange icon
* Playlist card body open by default
* Refactor collectionEdit components
* Paginate & Refactor bid field
* Collection page changes
* Add Thumbnail optional
* Replace extra info for description on collection page
* Playlist card right below video on medium screen
* Allow editing private collections
* Add edit option to menus
* Allow deleting a public playlist but keeping a private version
* Add queue to Save menu, remove edit option from Builtin pages, show queue on playlists page
* Fix scroll to recent persisting on medium screen
* Fix adding to queue from menu
* Fixes for delete
* PublishList: delay mounting Items tab to prevent lock-up (#1783)
For a large list, the playlist publish form is unusable (super-slow typing) due to the entire list being mounted despite the tab is not active.
The full solution is still to paginate it, but for now, don't mount the tab until it is selected. Add a spinner to indicate something is loading. It's not prefect, but it's throwaway code anyway. At least we can fill in the fields properly now.
* Batch-resolve private collections (#1782)
* makeSelectClaimForClaimId --> selectClaimForClaimId
Move away from the problematic `makeSelect*`, especially in large loops.
* Batch-resolve private collections
1758
This alleviates the lock-up that is caused by large number of invidual resolves. There will still be some minor stutter due to the large DOM that React needs to handle -- that is logged in 1758 and will be handled separately.
At least the stutter is short (1-2s) and the app is still usable.
Private list items are being resolve individually, super slow if the list is large (>100). Published lists doesn't have this issue.
doFetchItemsInCollections contains most of the useful logic, but it isn't called for private/built-in lists because it's not an actual claim.
Tweaked doFetchItemsInCollections to handle private (UUID-based) collections.
* Use persisted state for floating player playlist card body
- I find it annoying being open everytime
* Fix removing edits from published playlist
* Fix scroll on mobile
* Allow going editing items from toast
* Fix ClaimShareButton
* Prevent edit/publish of builtin
* Fix async inside forEach
* Fix sync on queue edit
* Fix autoplayCountdown replay
* Fix deleting an item scrolling the playlist
* CreatedAt fixes
* Remove repost for now
* Anon publish fixes
* Fix mature case on floating
Co-authored-by: infinite-persistence <64950861+infinite-persistence@users.noreply.github.com>
2022-07-13 15:59:59 +02:00
|
|
|
|
2022-02-11 19:50:55 +01:00
|
|
|
.ratio-wrapper {
|
|
|
|
|
.button {
|
|
|
|
|
background-color: unset;
|
|
|
|
|
margin-bottom: 0;
|
|
|
|
|
}
|
|
|
|
|
}
|
Playlists v2: Refactors, touch ups + Queue Mode (#1604)
* Playlists v2
* Style pass
* Change playlist items arrange icon
* Playlist card body open by default
* Refactor collectionEdit components
* Paginate & Refactor bid field
* Collection page changes
* Add Thumbnail optional
* Replace extra info for description on collection page
* Playlist card right below video on medium screen
* Allow editing private collections
* Add edit option to menus
* Allow deleting a public playlist but keeping a private version
* Add queue to Save menu, remove edit option from Builtin pages, show queue on playlists page
* Fix scroll to recent persisting on medium screen
* Fix adding to queue from menu
* Fixes for delete
* PublishList: delay mounting Items tab to prevent lock-up (#1783)
For a large list, the playlist publish form is unusable (super-slow typing) due to the entire list being mounted despite the tab is not active.
The full solution is still to paginate it, but for now, don't mount the tab until it is selected. Add a spinner to indicate something is loading. It's not prefect, but it's throwaway code anyway. At least we can fill in the fields properly now.
* Batch-resolve private collections (#1782)
* makeSelectClaimForClaimId --> selectClaimForClaimId
Move away from the problematic `makeSelect*`, especially in large loops.
* Batch-resolve private collections
1758
This alleviates the lock-up that is caused by large number of invidual resolves. There will still be some minor stutter due to the large DOM that React needs to handle -- that is logged in 1758 and will be handled separately.
At least the stutter is short (1-2s) and the app is still usable.
Private list items are being resolve individually, super slow if the list is large (>100). Published lists doesn't have this issue.
doFetchItemsInCollections contains most of the useful logic, but it isn't called for private/built-in lists because it's not an actual claim.
Tweaked doFetchItemsInCollections to handle private (UUID-based) collections.
* Use persisted state for floating player playlist card body
- I find it annoying being open everytime
* Fix removing edits from published playlist
* Fix scroll on mobile
* Allow going editing items from toast
* Fix ClaimShareButton
* Prevent edit/publish of builtin
* Fix async inside forEach
* Fix sync on queue edit
* Fix autoplayCountdown replay
* Fix deleting an item scrolling the playlist
* CreatedAt fixes
* Remove repost for now
* Anon publish fixes
* Fix mature case on floating
Co-authored-by: infinite-persistence <64950861+infinite-persistence@users.noreply.github.com>
2022-07-13 15:59:59 +02:00
|
|
|
|
2022-02-11 19:50:55 +01:00
|
|
|
a {
|
|
|
|
|
margin-left: var(--spacing-xxs);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
Playlists v2: Refactors, touch ups + Queue Mode (#1604)
* Playlists v2
* Style pass
* Change playlist items arrange icon
* Playlist card body open by default
* Refactor collectionEdit components
* Paginate & Refactor bid field
* Collection page changes
* Add Thumbnail optional
* Replace extra info for description on collection page
* Playlist card right below video on medium screen
* Allow editing private collections
* Add edit option to menus
* Allow deleting a public playlist but keeping a private version
* Add queue to Save menu, remove edit option from Builtin pages, show queue on playlists page
* Fix scroll to recent persisting on medium screen
* Fix adding to queue from menu
* Fixes for delete
* PublishList: delay mounting Items tab to prevent lock-up (#1783)
For a large list, the playlist publish form is unusable (super-slow typing) due to the entire list being mounted despite the tab is not active.
The full solution is still to paginate it, but for now, don't mount the tab until it is selected. Add a spinner to indicate something is loading. It's not prefect, but it's throwaway code anyway. At least we can fill in the fields properly now.
* Batch-resolve private collections (#1782)
* makeSelectClaimForClaimId --> selectClaimForClaimId
Move away from the problematic `makeSelect*`, especially in large loops.
* Batch-resolve private collections
1758
This alleviates the lock-up that is caused by large number of invidual resolves. There will still be some minor stutter due to the large DOM that React needs to handle -- that is logged in 1758 and will be handled separately.
At least the stutter is short (1-2s) and the app is still usable.
Private list items are being resolve individually, super slow if the list is large (>100). Published lists doesn't have this issue.
doFetchItemsInCollections contains most of the useful logic, but it isn't called for private/built-in lists because it's not an actual claim.
Tweaked doFetchItemsInCollections to handle private (UUID-based) collections.
* Use persisted state for floating player playlist card body
- I find it annoying being open everytime
* Fix removing edits from published playlist
* Fix scroll on mobile
* Allow going editing items from toast
* Fix ClaimShareButton
* Prevent edit/publish of builtin
* Fix async inside forEach
* Fix sync on queue edit
* Fix autoplayCountdown replay
* Fix deleting an item scrolling the playlist
* CreatedAt fixes
* Remove repost for now
* Anon publish fixes
* Fix mature case on floating
Co-authored-by: infinite-persistence <64950861+infinite-persistence@users.noreply.github.com>
2022-07-13 15:59:59 +02:00
|
|
|
.section__header--actions {
|
|
|
|
|
@media (max-width: $breakpoint-small) {
|
|
|
|
|
.claim-search__wrapper--wrap {
|
|
|
|
|
width: 100%;
|
|
|
|
|
.claim-search__menu-group:last-child {
|
|
|
|
|
display: inline-block;
|
|
|
|
|
width: auto;
|
|
|
|
|
}
|
|
|
|
|
.button-toggle--more {
|
|
|
|
|
float: right;
|
|
|
|
|
margin-left: var(--spacing-s);
|
|
|
|
|
}
|
|
|
|
|
.button--primary {
|
|
|
|
|
margin-left: auto;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
2022-02-11 19:50:55 +01:00
|
|
|
}
|
|
|
|
|
|
2022-02-15 09:25:07 +01:00
|
|
|
.publishList-wrapper {
|
2022-03-30 16:40:35 +02:00
|
|
|
.help {
|
|
|
|
|
color: var(--color-text);
|
|
|
|
|
}
|
|
|
|
|
|
2022-02-15 09:25:07 +01:00
|
|
|
@media (min-width: $breakpoint-small) {
|
Playlists v2: Refactors, touch ups + Queue Mode (#1604)
* Playlists v2
* Style pass
* Change playlist items arrange icon
* Playlist card body open by default
* Refactor collectionEdit components
* Paginate & Refactor bid field
* Collection page changes
* Add Thumbnail optional
* Replace extra info for description on collection page
* Playlist card right below video on medium screen
* Allow editing private collections
* Add edit option to menus
* Allow deleting a public playlist but keeping a private version
* Add queue to Save menu, remove edit option from Builtin pages, show queue on playlists page
* Fix scroll to recent persisting on medium screen
* Fix adding to queue from menu
* Fixes for delete
* PublishList: delay mounting Items tab to prevent lock-up (#1783)
For a large list, the playlist publish form is unusable (super-slow typing) due to the entire list being mounted despite the tab is not active.
The full solution is still to paginate it, but for now, don't mount the tab until it is selected. Add a spinner to indicate something is loading. It's not prefect, but it's throwaway code anyway. At least we can fill in the fields properly now.
* Batch-resolve private collections (#1782)
* makeSelectClaimForClaimId --> selectClaimForClaimId
Move away from the problematic `makeSelect*`, especially in large loops.
* Batch-resolve private collections
1758
This alleviates the lock-up that is caused by large number of invidual resolves. There will still be some minor stutter due to the large DOM that React needs to handle -- that is logged in 1758 and will be handled separately.
At least the stutter is short (1-2s) and the app is still usable.
Private list items are being resolve individually, super slow if the list is large (>100). Published lists doesn't have this issue.
doFetchItemsInCollections contains most of the useful logic, but it isn't called for private/built-in lists because it's not an actual claim.
Tweaked doFetchItemsInCollections to handle private (UUID-based) collections.
* Use persisted state for floating player playlist card body
- I find it annoying being open everytime
* Fix removing edits from published playlist
* Fix scroll on mobile
* Allow going editing items from toast
* Fix ClaimShareButton
* Prevent edit/publish of builtin
* Fix async inside forEach
* Fix sync on queue edit
* Fix autoplayCountdown replay
* Fix deleting an item scrolling the playlist
* CreatedAt fixes
* Remove repost for now
* Anon publish fixes
* Fix mature case on floating
Co-authored-by: infinite-persistence <64950861+infinite-persistence@users.noreply.github.com>
2022-07-13 15:59:59 +02:00
|
|
|
.claim-preview--collection-editing {
|
2022-02-15 09:25:07 +01:00
|
|
|
height: unset;
|
|
|
|
|
position: relative;
|
|
|
|
|
|
|
|
|
|
.media__thumb {
|
|
|
|
|
position: relative;
|
|
|
|
|
right: unset;
|
|
|
|
|
|
|
|
|
|
.claim-preview__hover-actions {
|
|
|
|
|
display: visible;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.claim-preview__text {
|
|
|
|
|
position: unset;
|
|
|
|
|
right: unset;
|
|
|
|
|
width: 100%;
|
|
|
|
|
background-color: unset;
|
|
|
|
|
padding: 0;
|
|
|
|
|
border-radius: unset;
|
|
|
|
|
|
|
|
|
|
.claim-preview-info {
|
|
|
|
|
.claim-preview__title {
|
|
|
|
|
font-size: var(--font-small);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.media__subtitle {
|
|
|
|
|
.button__content {
|
|
|
|
|
.channel-name {
|
|
|
|
|
font-size: var(--font-xsmall);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.button-dislike {
|
|
|
|
|
margin-right: 0;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
2022-02-11 19:50:55 +01:00
|
|
|
.repost-wrapper {
|
2022-02-27 01:52:14 +01:00
|
|
|
// Repost now uses a modal. Lock the width because the bid message
|
|
|
|
|
// keeps changing as you type the desired name.
|
|
|
|
|
min-width: var(--modal-width);
|
|
|
|
|
@media (max-width: $breakpoint-small) {
|
|
|
|
|
min-width: 100%;
|
|
|
|
|
}
|
|
|
|
|
|
2022-02-11 19:50:55 +01:00
|
|
|
.claim-preview__wrapper {
|
|
|
|
|
background-color: rgba(var(--color-header-background-base), 0.6);
|
|
|
|
|
&:hover {
|
|
|
|
|
background-color: rgba(var(--color-header-background-base), 0.9);
|
|
|
|
|
}
|
|
|
|
|
.claim-tile__info {
|
|
|
|
|
padding-bottom: 0;
|
|
|
|
|
}
|
|
|
|
|
.claim-preview__actions {
|
|
|
|
|
.claim__tags {
|
|
|
|
|
margin-left: auto;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.scheduledLivestream-wrapper {
|
|
|
|
|
@media (max-width: $breakpoint-small) {
|
|
|
|
|
padding: var(--spacing-s);
|
|
|
|
|
padding-top: 0;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
2022-02-18 09:03:35 +01:00
|
|
|
.custom-wrapper {
|
|
|
|
|
@media (max-width: $breakpoint-small) {
|
|
|
|
|
.card {
|
|
|
|
|
padding: var(--spacing-xxxs);
|
|
|
|
|
.card__title-section {
|
|
|
|
|
width: 100%;
|
|
|
|
|
div:first-of-type {
|
|
|
|
|
width: 100%;
|
|
|
|
|
.card__title {
|
|
|
|
|
width: 100%;
|
|
|
|
|
white-space: nowrap;
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
text-overflow: ellipsis;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
2022-02-18 09:15:56 +01:00
|
|
|
.channelsToFollow-wrapper {
|
|
|
|
|
margin-top: var(--spacing-l);
|
|
|
|
|
|
|
|
|
|
.claim-preview__wrapper--channel {
|
|
|
|
|
.claim-preview--channel {
|
2022-03-09 14:21:18 +01:00
|
|
|
a.button:not(.tag) {
|
2022-02-18 09:15:56 +01:00
|
|
|
.button__content {
|
|
|
|
|
align-items: unset;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.menu__button {
|
|
|
|
|
right: var(--spacing-xs);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
2022-04-26 16:59:40 +02:00
|
|
|
.historyPage-wrapper {
|
|
|
|
|
.claim-preview__wrapper {
|
|
|
|
|
.claim-preview__history-remove {
|
|
|
|
|
position: absolute;
|
|
|
|
|
top: var(--spacing-s);
|
|
|
|
|
right: var(--spacing-xs);
|
|
|
|
|
opacity: 0;
|
|
|
|
|
|
|
|
|
|
.icon {
|
|
|
|
|
width: 22px;
|
|
|
|
|
height: 22px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
&:hover {
|
|
|
|
|
.icon {
|
|
|
|
|
stroke: var(--color-primary);
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
}
|
|
|
|
|
}
|
2022-04-28 08:01:26 +02:00
|
|
|
|
|
|
|
|
@media (max-width: $breakpoint-small) {
|
|
|
|
|
opacity: 1;
|
|
|
|
|
}
|
2022-04-26 16:59:40 +02:00
|
|
|
}
|
2022-04-28 08:01:26 +02:00
|
|
|
|
2022-04-26 16:59:40 +02:00
|
|
|
.menu__button.claim__menu-button {
|
|
|
|
|
top: 2.2rem;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
&:hover {
|
|
|
|
|
.claim-preview__history-remove {
|
|
|
|
|
opacity: 1;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
2022-03-09 19:05:37 +01:00
|
|
|
.premium-wrapper {
|
|
|
|
|
.membership_title {
|
|
|
|
|
.comment__badge {
|
|
|
|
|
.icon {
|
|
|
|
|
margin-bottom: -6px;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.premium-option {
|
|
|
|
|
background-color: rgba(var(--color-header-background-base), 0.4);
|
|
|
|
|
border-radius: var(--border-radius);
|
|
|
|
|
padding: var(--spacing-m);
|
|
|
|
|
margin-bottom: var(--spacing-m);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
2022-02-11 19:50:55 +01:00
|
|
|
// Temporary master classes
|
|
|
|
|
.date_time {
|
|
|
|
|
font-size: var(--font-xsmall);
|
|
|
|
|
}
|
|
|
|
|
.icon--ExternalLink {
|
|
|
|
|
margin-top: -5px;
|
2022-04-04 17:43:10 +02:00
|
|
|
margin-left: 2px;
|
|
|
|
|
margin-left: var(--spacing-xxs) !important;
|
|
|
|
|
}
|
|
|
|
|
.markdown-preview {
|
|
|
|
|
.icon--ExternalLink {
|
|
|
|
|
flex-shrink: 0;
|
|
|
|
|
margin-bottom: -1px !important;
|
|
|
|
|
// margin-left:2px !important;
|
|
|
|
|
}
|
2022-04-05 20:47:04 +02:00
|
|
|
}
|
|
|
|
|
.comments {
|
|
|
|
|
.markdown-preview {
|
|
|
|
|
.claim-link {
|
|
|
|
|
width: 40%;
|
|
|
|
|
margin-top: var(--spacing-xs);
|
2022-04-09 16:07:06 +02:00
|
|
|
@media (max-width: $breakpoint-small) {
|
|
|
|
|
width: 100%;
|
|
|
|
|
}
|
2022-04-05 20:47:04 +02:00
|
|
|
}
|
2022-04-05 16:02:32 +02:00
|
|
|
}
|
2022-02-11 19:50:55 +01:00
|
|
|
}
|
2022-02-12 19:30:55 +01:00
|
|
|
.hide-ribbon {
|
|
|
|
|
.claim-tile__repost-author {
|
2022-03-22 08:06:16 +01:00
|
|
|
display: none;
|
2022-02-12 19:30:55 +01:00
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.show-ribbon {
|
|
|
|
|
.claim-tile__repost-author {
|
|
|
|
|
display: block;
|
|
|
|
|
}
|
|
|
|
|
}
|
2022-02-11 19:50:55 +01:00
|
|
|
|
|
|
|
|
// Fix Lightbox (Image viewer) modal backdrop bug
|
|
|
|
|
// Context: transform, filter and perspective break "position: fixed" in child element
|
|
|
|
|
.lb-open-lightbox {
|
2022-06-13 18:48:45 +02:00
|
|
|
.ReactModal__Content {
|
|
|
|
|
transform: unset !important;
|
|
|
|
|
}
|
|
|
|
|
|
2022-02-11 19:50:55 +01:00
|
|
|
.modal {
|
|
|
|
|
-webkit-backdrop-filter: unset;
|
|
|
|
|
backdrop-filter: unset;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
2022-02-18 08:46:41 +01:00
|
|
|
// Remove resize icon in textareas
|
|
|
|
|
::-webkit-resizer {
|
|
|
|
|
display: none;
|
|
|
|
|
}
|
|
|
|
|
|
2022-03-30 16:40:35 +02:00
|
|
|
input:-webkit-autofill,
|
|
|
|
|
input:-webkit-autofill:focus {
|
|
|
|
|
transition: background-color 600000s 0s, color 600000s 0s;
|
|
|
|
|
}
|
|
|
|
|
|
2022-02-11 19:50:55 +01:00
|
|
|
// Remove tap focus on mobile devices
|
|
|
|
|
input,
|
|
|
|
|
textarea,
|
|
|
|
|
button,
|
|
|
|
|
select,
|
|
|
|
|
a {
|
|
|
|
|
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
|
|
|
|
|
}
|
|
|
|
|
|
2022-04-05 16:02:32 +02:00
|
|
|
.video-js .vjs-volume-level {
|
|
|
|
|
&::before {
|
|
|
|
|
color: white !important;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
2022-02-11 19:50:55 +01:00
|
|
|
// Temporary fix for focus-visible
|
2022-03-02 16:34:33 +01:00
|
|
|
*:focus-visible:not(.modal):not(.card):not(.wunderbar__input):not(.menu__list):not(.menu__list--header):not(.button--secondary):not(.button-like):not(.button-dislike):not(select):not(input):not(textarea):not(video):not([data-reach-tab-panels]):not([data-reach-tabs]):not([data-reach-tab-panel]):not(.CodeMirror-code):not(.MuiModal-root):not(.MuiPaper-root):not(.card):not(#onetrust-banner-sdk) {
|
2022-02-11 19:50:55 +01:00
|
|
|
background-color: rgba(var(--color-primary-dynamic), 0.2) !important;
|
|
|
|
|
color: var(--color-text) !important;
|
|
|
|
|
// outline: 2px solid var(--color-primary);
|
|
|
|
|
box-shadow: 0px 0px 0px 2px var(--color-primary) inset;
|
|
|
|
|
|
|
|
|
|
.icon {
|
|
|
|
|
stroke: var(--color-text) !important;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
select:focus-visible,
|
|
|
|
|
input:focus-visible:not(.wunderbar__input),
|
|
|
|
|
textarea:focus-visible {
|
|
|
|
|
box-shadow: 0px 0px 0px 2px var(--color-primary) inset;
|
2021-11-08 14:36:30 +01:00
|
|
|
}
|
2022-06-01 09:26:36 +02:00
|
|
|
|
|
|
|
|
input:not(input:-webkit-autofill)::-webkit-contacts-auto-fill-button {
|
|
|
|
|
background-color: var(--color-text);
|
|
|
|
|
}
|
2022-06-01 15:02:47 +02:00
|
|
|
|
|
|
|
|
#onetrust-consent-sdk #onetrust-banner-sdk {
|
|
|
|
|
background-color: var(--color-header-background);
|
|
|
|
|
backdrop-filter: blur(4px);
|
2022-06-13 15:29:13 +02:00
|
|
|
max-height: 100%;
|
|
|
|
|
height: 190px;
|
|
|
|
|
|
|
|
|
|
#onetrust-button-group-parent {
|
|
|
|
|
margin-top: 10px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.banner_logo {
|
|
|
|
|
display: block;
|
|
|
|
|
float: left;
|
|
|
|
|
margin-top: 20px;
|
|
|
|
|
margin-left: 80px;
|
|
|
|
|
margin-right: 30px;
|
|
|
|
|
width: 150px;
|
|
|
|
|
height: 150px;
|
|
|
|
|
background-image: url('/public/img/cookie.svg');
|
|
|
|
|
background-size: contain;
|
|
|
|
|
background-repeat: no-repeat;
|
|
|
|
|
|
|
|
|
|
@media (max-width: $breakpoint-medium) {
|
|
|
|
|
margin-left: 30px;
|
|
|
|
|
margin-right: 10px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
@media (max-width: $breakpoint-small) {
|
|
|
|
|
display: none;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
@media (max-width: $breakpoint-medium) {
|
|
|
|
|
#onetrust-policy {
|
|
|
|
|
margin-right: 60px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
#onetrust-button-group-parent {
|
|
|
|
|
margin-top: 0;
|
|
|
|
|
#onetrust-button-group {
|
|
|
|
|
margin-right: 10px !important;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
2022-06-01 15:02:47 +02:00
|
|
|
|
|
|
|
|
#onetrust-policy-title,
|
|
|
|
|
#onetrust-policy-text,
|
|
|
|
|
.ot-dpd-title,
|
|
|
|
|
.ot-dpd-desc {
|
|
|
|
|
color: var(--color-text);
|
|
|
|
|
|
|
|
|
|
.ot-link-btn {
|
|
|
|
|
color: var(--color-primary);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
#onetrust-button-group {
|
|
|
|
|
button {
|
|
|
|
|
border: 0px solid transparent;
|
|
|
|
|
border-radius: var(--border-radius);
|
|
|
|
|
&:hover {
|
|
|
|
|
opacity: 1;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
#onetrust-accept-btn-handler,
|
|
|
|
|
#onetrust-reject-all-handler {
|
|
|
|
|
background-color: var(--color-primary);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
#onetrust-pc-btn-handler {
|
|
|
|
|
background-color: var(--color-header-button);
|
|
|
|
|
color: var(--color-text);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
Playlists v2: Refactors, touch ups + Queue Mode (#1604)
* Playlists v2
* Style pass
* Change playlist items arrange icon
* Playlist card body open by default
* Refactor collectionEdit components
* Paginate & Refactor bid field
* Collection page changes
* Add Thumbnail optional
* Replace extra info for description on collection page
* Playlist card right below video on medium screen
* Allow editing private collections
* Add edit option to menus
* Allow deleting a public playlist but keeping a private version
* Add queue to Save menu, remove edit option from Builtin pages, show queue on playlists page
* Fix scroll to recent persisting on medium screen
* Fix adding to queue from menu
* Fixes for delete
* PublishList: delay mounting Items tab to prevent lock-up (#1783)
For a large list, the playlist publish form is unusable (super-slow typing) due to the entire list being mounted despite the tab is not active.
The full solution is still to paginate it, but for now, don't mount the tab until it is selected. Add a spinner to indicate something is loading. It's not prefect, but it's throwaway code anyway. At least we can fill in the fields properly now.
* Batch-resolve private collections (#1782)
* makeSelectClaimForClaimId --> selectClaimForClaimId
Move away from the problematic `makeSelect*`, especially in large loops.
* Batch-resolve private collections
1758
This alleviates the lock-up that is caused by large number of invidual resolves. There will still be some minor stutter due to the large DOM that React needs to handle -- that is logged in 1758 and will be handled separately.
At least the stutter is short (1-2s) and the app is still usable.
Private list items are being resolve individually, super slow if the list is large (>100). Published lists doesn't have this issue.
doFetchItemsInCollections contains most of the useful logic, but it isn't called for private/built-in lists because it's not an actual claim.
Tweaked doFetchItemsInCollections to handle private (UUID-based) collections.
* Use persisted state for floating player playlist card body
- I find it annoying being open everytime
* Fix removing edits from published playlist
* Fix scroll on mobile
* Allow going editing items from toast
* Fix ClaimShareButton
* Prevent edit/publish of builtin
* Fix async inside forEach
* Fix sync on queue edit
* Fix autoplayCountdown replay
* Fix deleting an item scrolling the playlist
* CreatedAt fixes
* Remove repost for now
* Anon publish fixes
* Fix mature case on floating
Co-authored-by: infinite-persistence <64950861+infinite-persistence@users.noreply.github.com>
2022-07-13 15:59:59 +02:00
|
|
|
|
|
|
|
|
.space--between {
|
|
|
|
|
display: flex;
|
|
|
|
|
justify-content: space-between;
|
|
|
|
|
}
|
