83dbe8ec7c
* 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>
975 lines
18 KiB
SCSS
975 lines
18 KiB
SCSS
$cover-z-index: 0;
|
|
$metadata-z-index: 1;
|
|
$actions-z-index: 2;
|
|
|
|
.channelPage-wrapper {
|
|
.button-group {
|
|
.button__content {
|
|
.icon {
|
|
stroke: var(--color-text);
|
|
}
|
|
}
|
|
.button-following {
|
|
color: var(--color-text) !important;
|
|
background-color: var(--color-button-alt-bg) !important;
|
|
.icon {
|
|
stroke: var(--color-text) !important;
|
|
}
|
|
&:hover {
|
|
color: var(--color-primary) !important;
|
|
}
|
|
@media (max-width: $breakpoint-small) {
|
|
.button__label {
|
|
div:first-of-type {
|
|
top: 50% !important;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.button-following:last-of-type {
|
|
margin-left: 2px;
|
|
&:hover {
|
|
color: var(--color-text) !important;
|
|
}
|
|
}
|
|
}
|
|
|
|
.claim-preview__live {
|
|
margin-bottom: 0;
|
|
.card__title-section {
|
|
padding-top: 0;
|
|
padding-bottom: 0;
|
|
}
|
|
}
|
|
|
|
fieldset-group {
|
|
fieldset-section:last-of-type {
|
|
label {
|
|
text-align: right;
|
|
margin-left: unset !important;
|
|
}
|
|
}
|
|
}
|
|
|
|
.claim-preview__wrapper--channel {
|
|
.menu__button {
|
|
right: var(--spacing-s);
|
|
}
|
|
.claim-tile__info {
|
|
margin-top: 0;
|
|
padding-bottom: var(--spacing-xxxs);
|
|
.claim-preview-metadata-sub-upload {
|
|
margin-top: 3px;
|
|
}
|
|
}
|
|
.claim__menu-button {
|
|
right: -8px;
|
|
}
|
|
}
|
|
|
|
.mb-xl {
|
|
// Temporary fix for upcoming livestreams on channel page
|
|
margin-bottom: 0px;
|
|
background: rgba(var(--color-primary-dynamic), 0.1);
|
|
border-radius: var(--border-radius);
|
|
padding: var(--spacing-m);
|
|
|
|
.section__header--actions {
|
|
margin-top: 0px !important;
|
|
padding-top: 0px !important;
|
|
}
|
|
|
|
.claim-preview--tile {
|
|
margin-bottom: 0px;
|
|
}
|
|
|
|
.claim-tile__title {
|
|
margin-bottom: 0px;
|
|
min-height: unset;
|
|
}
|
|
|
|
.claim-tile__info {
|
|
padding-bottom: var(--spacing-s);
|
|
}
|
|
}
|
|
|
|
.media__info-text {
|
|
.claim__tags {
|
|
.tag {
|
|
margin-top: var(--spacing-xxxs);
|
|
display: inline-block;
|
|
}
|
|
}
|
|
}
|
|
|
|
label {
|
|
margin-top: var(--spacing-s);
|
|
font-size: var(--font-medium);
|
|
font-weight: var(--font-weight-bold);
|
|
}
|
|
|
|
.media__info-text,
|
|
.media__info-text--constrained {
|
|
font-size: var(--font-base) !important;
|
|
opacity: 0.8;
|
|
.date_time {
|
|
font-size: var(--font-base);
|
|
opacity: 0.8;
|
|
}
|
|
}
|
|
.media__info-text:first-of-type {
|
|
opacity: 1;
|
|
}
|
|
|
|
.MuiAutocomplete-root {
|
|
}
|
|
.MuiOutlinedInput-root {
|
|
background-color: var(--color-input-bg);
|
|
|
|
.MuiOutlinedInput-notchedOutline {
|
|
border: unset !important;
|
|
}
|
|
}
|
|
}
|
|
.channel-cover {
|
|
position: relative;
|
|
background-image: linear-gradient(to right, #637ad2, #318794 80%);
|
|
display: flex;
|
|
align-items: flex-end;
|
|
box-sizing: content-box;
|
|
color: #fff;
|
|
|
|
.channel-cover__customm,
|
|
.channel__quick-actions {
|
|
-webkit-user-select: none;
|
|
-moz-user-select: none;
|
|
-ms-user-select: none;
|
|
user-select: none;
|
|
}
|
|
}
|
|
|
|
.channel-cover__custom {
|
|
z-index: $cover-z-index;
|
|
align-self: flex-start;
|
|
position: absolute;
|
|
object-fit: cover;
|
|
}
|
|
|
|
.channel-cover,
|
|
.channel-cover__custom {
|
|
min-height: var(--cover-photo-height);
|
|
height: 100%;
|
|
width: 100%;
|
|
border-top-left-radius: var(--card-radius);
|
|
border-top-right-radius: var(--card-radius);
|
|
border: 1px sold var(--color-border);
|
|
border-bottom: none;
|
|
|
|
@media (max-width: $breakpoint-small) {
|
|
// Yikes
|
|
// I, Sean Yesmunt, take full responsibility for this monster
|
|
min-height: calc(var(--cover-photo-height) + 2 * var(--spacing-xl) + var(--spacing-m));
|
|
}
|
|
|
|
.menu__button {
|
|
opacity: 1;
|
|
justify-content: center;
|
|
}
|
|
}
|
|
|
|
.channel-cover__custom--waiting {
|
|
background-color: var(--color-gray-5);
|
|
width: 100%;
|
|
height: 100%;
|
|
position: absolute;
|
|
p {
|
|
padding: var(--padding-m);
|
|
}
|
|
}
|
|
|
|
.channel-cover__gradient {
|
|
width: 100%;
|
|
height: 100%;
|
|
position: absolute;
|
|
|
|
&:after {
|
|
position: absolute;
|
|
bottom: 0;
|
|
opacity: 1;
|
|
content: '';
|
|
height: 100%;
|
|
left: 0;
|
|
right: 0;
|
|
width: 100%;
|
|
background: linear-gradient(0deg, #0d0d0d 0, transparent 65%);
|
|
}
|
|
}
|
|
|
|
.channel-thumbnail {
|
|
display: flex;
|
|
position: relative;
|
|
height: 5rem;
|
|
width: 5rem;
|
|
background-size: cover;
|
|
margin-right: var(--spacing-m);
|
|
|
|
.button {
|
|
display: flex;
|
|
position: absolute;
|
|
text-align: center;
|
|
|
|
width: 80%;
|
|
bottom: -16%;
|
|
left: unset !important;
|
|
background-color: unset !important;
|
|
right: -1rem;
|
|
}
|
|
|
|
.link--small {
|
|
right: -3rem !important;
|
|
}
|
|
|
|
.comment__badge {
|
|
position: absolute;
|
|
text-align: center;
|
|
width: 80%;
|
|
left: 22%;
|
|
bottom: -30%;
|
|
|
|
svg {
|
|
stroke: unset;
|
|
overflow: visible;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
}
|
|
|
|
.channel-thumbnail--resolving {
|
|
background-color: var(--color-gray-3);
|
|
}
|
|
|
|
.channel-thumbnail--small {
|
|
height: 3rem;
|
|
width: 3rem;
|
|
}
|
|
|
|
.playlist-channel {
|
|
.channel-thumbnail--xsmall {
|
|
height: 2.1rem !important;
|
|
width: 2.1rem !important;
|
|
|
|
div,
|
|
img,
|
|
canvas {
|
|
max-width: 100%;
|
|
max-height: 100%;
|
|
}
|
|
}
|
|
}
|
|
|
|
.channel-thumbnail--xsmall {
|
|
height: 2.1rem;
|
|
width: 2.1rem;
|
|
margin-right: var(--spacing-xs);
|
|
}
|
|
|
|
.channel__selector .channel-thumbnail--xxsmall {
|
|
margin-right: var(--spacing-s);
|
|
}
|
|
|
|
.channel-thumbnail--xxsmall {
|
|
height: 1rem;
|
|
width: 1rem;
|
|
|
|
.ff-container,
|
|
.ff-canvas {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
|
|
.channel-thumbnail--waiting {
|
|
background-color: var(--color-gray-5);
|
|
border-radius: var(--border-radius);
|
|
padding-top: 4rem;
|
|
padding-left: 1rem;
|
|
padding-right: 1rem;
|
|
}
|
|
|
|
.channel__thumbnail--channel-page {
|
|
position: absolute;
|
|
height: var(--channel-thumbnail-width);
|
|
width: var(--channel-thumbnail-width);
|
|
left: var(--spacing-m);
|
|
top: 4rem;
|
|
margin-top: var(--spacing-l);
|
|
box-shadow: var(--card-box-shadow);
|
|
|
|
@media (max-width: $breakpoint-small) {
|
|
top: 0;
|
|
margin-top: var(--spacing-xl);
|
|
}
|
|
|
|
.comment__badge {
|
|
position: absolute;
|
|
text-align: center;
|
|
width: 60%;
|
|
left: 0;
|
|
|
|
svg {
|
|
stroke: unset;
|
|
overflow: visible;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
}
|
|
|
|
.claim-preview .channel-thumbnail .comment__badge {
|
|
padding: 0px;
|
|
left: 12%;
|
|
bottom: -20%;
|
|
|
|
svg {
|
|
width: 3rem;
|
|
height: 3rem;
|
|
}
|
|
}
|
|
|
|
.channel-thumbnail__custom {
|
|
width: 100%;
|
|
object-fit: cover;
|
|
font-size: 1px; // To hide the alt text on firefox;
|
|
}
|
|
|
|
.channel-thumbnail__default {
|
|
width: 80%;
|
|
height: 80%;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
align-self: flex-end;
|
|
}
|
|
|
|
.channel-thumbnail,
|
|
.channel-thumbnail__custom {
|
|
border-radius: 50%;
|
|
|
|
-webkit-touch-callout: none;
|
|
-webkit-user-select: none;
|
|
-khtml-user-select: none;
|
|
-moz-user-select: none;
|
|
-ms-user-select: none;
|
|
user-select: none;
|
|
}
|
|
|
|
.channel-thumbnail__default--0 {
|
|
background-color: #748ffc;
|
|
}
|
|
|
|
.channel-thumbnail__default--1 {
|
|
background-color: #ffa855;
|
|
}
|
|
|
|
.channel-thumbnail__default--2 {
|
|
background-color: #339af0;
|
|
}
|
|
|
|
.channel-thumbnail__default--3 {
|
|
background-color: #ec8383;
|
|
}
|
|
|
|
.channel-thumbnail__default--4 {
|
|
background-color: #ccc;
|
|
}
|
|
|
|
.channel__primary-info {
|
|
// Ensure the profile pic/title sit ontop of the default cover background
|
|
//z-index: $metadata-z-index;
|
|
z-index: 5;
|
|
// Jump over the thumbnail photo because it is absolutely positioned
|
|
// Then add normal page spacing, _then_ add the actual padding
|
|
padding-left: calc(var(--channel-thumbnail-width) + var(--spacing-xl));
|
|
padding-right: var(--spacing-m);
|
|
padding-bottom: var(--spacing-m);
|
|
margin-top: var(--spacing-xl);
|
|
min-width: 0;
|
|
width: 100%;
|
|
|
|
.channel__edit-thumb {
|
|
z-index: 5;
|
|
.button--alt {
|
|
border: 1px solid rgba(var(--color-primary-dynamic), 0.1);
|
|
&:hover {
|
|
background-color: var(--color-button-alt-bg);
|
|
color: var(--color-primary);
|
|
}
|
|
}
|
|
}
|
|
|
|
.channel__title {
|
|
.comment__badge {
|
|
margin-left: var(--spacing-s);
|
|
}
|
|
}
|
|
|
|
@media (max-width: $breakpoint-small) {
|
|
padding-left: var(--spacing-m);
|
|
margin-top: calc(var(--channel-thumbnail-width) + var(--spacing-l));
|
|
}
|
|
}
|
|
|
|
.channel__title {
|
|
display: flex;
|
|
margin-right: var(--spacing-s);
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
font-size: xx-large;
|
|
font-weight: var(--font-weight-bold);
|
|
|
|
// Quick hack to get this to work
|
|
// We should have a generic style for "header with button next to it"
|
|
.button {
|
|
margin-left: var(--spacing-xs);
|
|
}
|
|
|
|
@media (max-width: $breakpoint-small) {
|
|
padding-top: var(--spacing-xl);
|
|
}
|
|
|
|
.comment__badge {
|
|
padding-right: 0px;
|
|
|
|
svg {
|
|
height: 2.5rem;
|
|
width: 2.5rem;
|
|
}
|
|
}
|
|
}
|
|
|
|
.channel__meta {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: flex-end;
|
|
|
|
.button {
|
|
// height: auto;
|
|
}
|
|
}
|
|
|
|
.channel__quick-actions {
|
|
display: flex;
|
|
flex-direction: row;
|
|
margin-left: var(--spacing-m);
|
|
position: absolute;
|
|
top: 0;
|
|
right: var(--spacing-m);
|
|
margin-top: var(--spacing-m);
|
|
z-index: $actions-z-index;
|
|
flex-wrap: wrap;
|
|
font-size: var(--font-base);
|
|
|
|
.button,
|
|
.menu__button {
|
|
border: 1px solid rgba(var(--color-primary-dynamic), 0.1);
|
|
}
|
|
|
|
> .button,
|
|
> .button-group .button {
|
|
padding: 0 var(--spacing-s);
|
|
}
|
|
|
|
> .button,
|
|
> .button-group {
|
|
&:not(:last-child) {
|
|
margin-right: var(--spacing-m);
|
|
}
|
|
}
|
|
|
|
.button-group .button {
|
|
&:not(:last-child) {
|
|
margin-right: 0;
|
|
}
|
|
}
|
|
|
|
@media (max-width: $breakpoint-small) {
|
|
flex-direction: column;
|
|
|
|
> .button,
|
|
> .button-group {
|
|
margin-right: 0;
|
|
margin-bottom: var(--spacing-xs);
|
|
margin-left: auto;
|
|
|
|
// Needed for specificity above
|
|
&:not(:last-child) {
|
|
margin-right: 0;
|
|
}
|
|
}
|
|
|
|
.claim__menu-button--inline {
|
|
z-index: 10;
|
|
.icon {
|
|
padding: 1rem;
|
|
margin: -1rem;
|
|
}
|
|
}
|
|
}
|
|
|
|
.button,
|
|
.menu__button {
|
|
&:hover {
|
|
color: var(--color-link);
|
|
background-color: rgba(var(--color-header-background-base), 0.95);
|
|
|
|
.icon {
|
|
stroke: var(--color-link);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.channel__edit-thumb {
|
|
position: absolute;
|
|
top: 0;
|
|
left: var(--spacing-l);
|
|
margin-top: calc(var(--spacing-m) * 7);
|
|
z-index: $metadata-z-index;
|
|
|
|
> * {
|
|
padding: 0 var(--spacing-xs);
|
|
|
|
&:not(:last-child) {
|
|
margin-right: var(--spacing-m);
|
|
}
|
|
}
|
|
|
|
@media (max-width: $breakpoint-small) {
|
|
margin-top: 0;
|
|
|
|
.button {
|
|
margin-top: var(--spacing-xxl);
|
|
}
|
|
}
|
|
}
|
|
|
|
.channel-name--inline {
|
|
margin-left: var(--spacing-xs);
|
|
}
|
|
|
|
.menu__list.channel__list {
|
|
margin-left: 0;
|
|
padding: 0;
|
|
border-radius: var(--border-radius);
|
|
background: transparent;
|
|
max-height: 15rem;
|
|
overflow-y: auto;
|
|
|
|
[role='menuitem'] {
|
|
margin: 0;
|
|
|
|
&[data-selected] {
|
|
// background: transparent;
|
|
.channel__list-item,
|
|
.channel-staked__wrapper {
|
|
background-color: var(--color-primary);
|
|
.claim-preview__title {
|
|
color: var(--color-primary-contrast);
|
|
}
|
|
}
|
|
}
|
|
|
|
&:last-child {
|
|
.channel__list-item {
|
|
border-bottom-left-radius: var(--border-radius);
|
|
border-bottom-right-radius: var(--border-radius);
|
|
}
|
|
}
|
|
|
|
.channel__list-item {
|
|
padding-right: calc(var(--spacing-xl) + var(--spacing-s) * 2);
|
|
|
|
.icon__wrapper {
|
|
background-color: var(--color-primary);
|
|
.icon {
|
|
stroke: var(--color-primary-contrast);
|
|
}
|
|
}
|
|
|
|
&:hover {
|
|
.icon__wrapper {
|
|
.icon {
|
|
stroke: var(--color-primary-contrast);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.channel__list-item {
|
|
display: flex;
|
|
align-items: center;
|
|
background-color: var(--color-header-background);
|
|
padding: var(--spacing-s);
|
|
overflow: hidden;
|
|
|
|
.comment__badge {
|
|
padding-right: 0px;
|
|
|
|
svg {
|
|
height: 2rem;
|
|
width: 2rem;
|
|
}
|
|
}
|
|
|
|
.channel-thumbnail {
|
|
height: 2rem;
|
|
width: 2rem;
|
|
}
|
|
|
|
.icon {
|
|
color: var(--color-menu-icon);
|
|
}
|
|
|
|
.icon__wrapper {
|
|
padding: 0;
|
|
height: 2rem;
|
|
width: 2rem;
|
|
margin-right: var(--spacing-m);
|
|
border-radius: var(--border-radius);
|
|
}
|
|
|
|
.ff-container {
|
|
margin-right: var(--spacing-xs) !important;
|
|
canvas {
|
|
border-radius: 50%;
|
|
}
|
|
.freezeframe-img {
|
|
width: 2rem !important;
|
|
height: 2rem !important;
|
|
border-radius: 50%;
|
|
}
|
|
}
|
|
|
|
&:hover {
|
|
background-color: var(--color-primary);
|
|
|
|
.channel__list-text {
|
|
color: var(--color-menu-icon-active);
|
|
}
|
|
}
|
|
}
|
|
|
|
.channel__list-item--selected {
|
|
border-radius: var(--border-radius);
|
|
|
|
.icon--ChevronDown {
|
|
margin-left: var(--spacing-l);
|
|
}
|
|
|
|
&:hover {
|
|
.claim-preview__title {
|
|
color: white;
|
|
}
|
|
}
|
|
}
|
|
|
|
.channel__list-text {
|
|
font-weight: var(--font-weight-bold);
|
|
color: var(--color-menu-icon);
|
|
}
|
|
|
|
.channel__selector {
|
|
margin-bottom: var(--spacing-m);
|
|
|
|
@media (min-width: $breakpoint-small) {
|
|
margin-bottom: var(--spacing-l);
|
|
}
|
|
|
|
.ff-container {
|
|
margin-right: var(--spacing-xs) !important;
|
|
canvas {
|
|
border-radius: 50%;
|
|
}
|
|
.freezeframe-img {
|
|
width: 2rem !important;
|
|
height: 2rem !important;
|
|
border-radius: 50%;
|
|
}
|
|
}
|
|
}
|
|
|
|
.channel__selector--publish {
|
|
display: inline-block;
|
|
margin-bottom: 0;
|
|
margin-top: -2px;
|
|
width: unset !important;
|
|
|
|
.channel-thumbnail {
|
|
width: 1.4rem;
|
|
height: 1.4rem;
|
|
.channel-thumbnail__custom {
|
|
width: 1.4rem;
|
|
height: 1.4rem;
|
|
}
|
|
}
|
|
.ff-container {
|
|
margin-right: var(--spacing-xs) !important;
|
|
canvas {
|
|
width: 1.4rem !important;
|
|
height: 1.4rem !important;
|
|
border-radius: 50%;
|
|
}
|
|
.freezeframe-img {
|
|
width: 1.4rem !important;
|
|
height: 1.4rem !important;
|
|
border-radius: 50%;
|
|
}
|
|
}
|
|
|
|
.claim-preview__title {
|
|
margin-right: var(--spacing-xs);
|
|
}
|
|
.comment__badge {
|
|
svg {
|
|
width: 1.4rem;
|
|
height: 1.4rem;
|
|
margin-bottom: -2px;
|
|
}
|
|
}
|
|
|
|
.channel__list-item {
|
|
height: var(--height-button);
|
|
border-radius: 0 var(--border-radius) var(--border-radius) 0;
|
|
}
|
|
|
|
.icon--ChevronDown {
|
|
margin-left: var(--spacing-s);
|
|
}
|
|
|
|
@media (max-width: $breakpoint-small) {
|
|
margin-top: -2px !important;
|
|
margin-bottom: 0 !important;
|
|
width: unset !important;
|
|
button {
|
|
padding: 0 !important;
|
|
}
|
|
}
|
|
}
|
|
|
|
.channel__list--publish {
|
|
.channel__list-item {
|
|
height: var(--height-button);
|
|
.channel-thumbnail {
|
|
width: 1.4rem;
|
|
height: 1.4rem;
|
|
.channel-thumbnail__custom {
|
|
width: 1.4rem;
|
|
height: 1.4rem;
|
|
}
|
|
}
|
|
.ff-container {
|
|
margin-right: var(--spacing-xs) !important;
|
|
canvas {
|
|
width: 1.4rem !important;
|
|
height: 1.4rem !important;
|
|
border-radius: 50%;
|
|
}
|
|
.freezeframe-img {
|
|
width: 1.4rem !important;
|
|
height: 1.4rem !important;
|
|
border-radius: 50%;
|
|
}
|
|
}
|
|
.claim-preview__title {
|
|
margin-right: var(--spacing-xs);
|
|
}
|
|
.comment__badge {
|
|
svg {
|
|
width: 1.4rem;
|
|
height: 1.4rem;
|
|
margin-bottom: -2px;
|
|
}
|
|
}
|
|
|
|
.icon__wrapper {
|
|
width: 1.4rem;
|
|
height: 1.4rem;
|
|
margin-right: var(--spacing-xs);
|
|
}
|
|
}
|
|
}
|
|
|
|
.channel__selector--tabHeader {
|
|
@extend .channel__selector--publish;
|
|
float: right;
|
|
margin-left: var(--spacing-xxs);
|
|
margin-top: 0 !important;
|
|
|
|
.channel__list-item {
|
|
border-radius: var(--border-radius);
|
|
display: flex !important;
|
|
align-items: center;
|
|
}
|
|
}
|
|
|
|
.channel__list--tabHeader {
|
|
@extend .channel__list--publish;
|
|
}
|
|
|
|
.channel-staked__wrapper {
|
|
display: flex;
|
|
position: absolute;
|
|
text-align: center;
|
|
//width: 116%;
|
|
width: 128%;
|
|
left: -14%;
|
|
bottom: -16%;
|
|
|
|
svg {
|
|
overflow: visible;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
|
|
.channel-staked__wrapper--large {
|
|
position: relative;
|
|
background-color: transparent;
|
|
display: inline-block;
|
|
bottom: auto;
|
|
left: auto;
|
|
width: auto;
|
|
top: var(--spacing-xs);
|
|
margin-left: var(--spacing-s);
|
|
padding: 0;
|
|
}
|
|
|
|
.channel-staked__wrapper--inline {
|
|
position: relative;
|
|
background-color: transparent;
|
|
display: inline-block;
|
|
bottom: auto;
|
|
left: auto;
|
|
top: var(--spacing-xs);
|
|
padding: 0;
|
|
}
|
|
|
|
.channel-staked__indicator {
|
|
//margin-left: 1px;
|
|
z-index: 3;
|
|
fill: var(--color-gray-3);
|
|
}
|
|
|
|
.channel-staked__indicator--controlling {
|
|
fill: #ff853c;
|
|
}
|
|
|
|
.channel-staked__amount {
|
|
display: inline-block;
|
|
font-size: var(--font-xxsmall);
|
|
margin-left: var(--spacing-s);
|
|
|
|
.credit-amount {
|
|
color: var(--color-gray-3);
|
|
}
|
|
}
|
|
|
|
.icon__wrapper--PremiumPlusBadge {
|
|
margin-left: 3px;
|
|
height: 22px !important;
|
|
width: 22px !important;
|
|
padding: 0 !important;
|
|
display: inline-block !important;
|
|
margin-bottom: -9px !important;
|
|
}
|
|
|
|
.icon__wrapper--PremiumPlusBadge > svg {
|
|
margin-top: -2px;
|
|
}
|
|
|
|
.channelsPage-wrapper {
|
|
.section__title {
|
|
margin-top: var(--spacing-m);
|
|
}
|
|
.section__title--margin-bottom {
|
|
margin-top: 0px;
|
|
margin-bottom: var(--spacing-m);
|
|
}
|
|
|
|
.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;
|
|
|
|
.comment__badge {
|
|
.icon {
|
|
margin-bottom: -10%;
|
|
width: 40%;
|
|
@media (max-width: $breakpoint-small) {
|
|
margin-bottom: -30%;
|
|
}
|
|
}
|
|
}
|
|
|
|
.claim__menu-button {
|
|
margin-top: var(--spacing-xxs);
|
|
|
|
.icon {
|
|
stroke: var(--color-text);
|
|
}
|
|
|
|
&:hover {
|
|
background-color: rgba(var(--color-header-button-base), 0.9);
|
|
border-radius: 50%;
|
|
outline: 2px solid var(--color-header-background);
|
|
.icon {
|
|
stroke: var(--color-primary);
|
|
}
|
|
}
|
|
}
|
|
.help--inline {
|
|
color: var(--color-text);
|
|
}
|
|
.claim-tile__info {
|
|
display: unset;
|
|
margin-top: 0;
|
|
margin-bottom: 0;
|
|
padding-bottom: 0;
|
|
}
|
|
.media__subtitle {
|
|
.claim-preview-metadata-sub-upload {
|
|
margin-top: 2px;
|
|
font-size: var(--font-small) !important;
|
|
}
|
|
}
|
|
|
|
@media (max-width: $breakpoint-small) {
|
|
.claim-preview--channel {
|
|
.claim-preview__actions {
|
|
flex-flow: row;
|
|
.section__actions {
|
|
.button--alt {
|
|
margin-bottom: 0;
|
|
}
|
|
}
|
|
.claim-preview__custom-properties {
|
|
justify-content: unset;
|
|
}
|
|
}
|
|
}
|
|
|
|
.claim-preview__actions {
|
|
margin-top: var(--spacing-s) !important;
|
|
}
|
|
}
|
|
}
|
|
@media (max-width: $breakpoint-small) {
|
|
padding: var(--spacing-s);
|
|
.yrbl__wrap {
|
|
margin-top: var(--spacing-l);
|
|
}
|
|
}
|
|
}
|