lbry-desktop/ui/scss/component/_main.scss

984 lines
19 KiB
SCSS
Raw Normal View History

body {
overflow-x: hidden;
}
.main-wrapper {
2019-07-23 10:05:51 +02:00
position: relative;
margin-left: auto;
margin-right: auto;
}
2019-10-09 18:34:18 +02:00
.main-wrapper--mac {
margin-top: calc(var(--header-height) + var(--mac-titlebar-height));
}
2019-07-17 22:49:06 +02:00
.main-wrapper__inner {
display: flex;
2019-07-17 22:49:06 +02:00
align-items: flex-start;
2019-07-23 10:05:51 +02:00
justify-content: space-between;
Playlistorder (#7442) * Add horizontal layout (#636) * Test out a horizontal scroll for upcoming (tile only for now) * - add support for list layout - add following label on home page - clan up css and naming conventions * Update header type + show only if scheduled streams are showing * [Playlist] Pull in sorting changes from desktop + Add Drag-n-Drop + Handle unavailable/deleted claims (#641) * Add ordering Icons * Refactor doCollectionEdit - It required claims as parameter, when only uris are used to populate the collection, so that was changed to pass down the uris instead. - There were unused and mostly unnecessary functions inside, for example the parameter claimIds was never used so it would never enter the claimSearch function which again would be used to generate uris, so it's better to just use uris as parameter * Add List Reordering changes * Add toggle button for list editing * Add toggle on content page collection sidebar * Enable drag-n-drop to re-order list items https://www.youtube.com/watch?v=aYZRRyukuIw * Allow removing all unavailable claims from a List * Fix <g> on icons * Fix section buttons positioning * Move preventDefault and stopPropagation to buttons div instead of each button, preventing clicking even if disabled opening the claim * Change dragging cursor * Fix sizing * Fix dragging component * Restrict dragging to vertical axis * Ignore shuffle state for ordering * Fix console errors * Mobile fixes * Fix sidebar spacing * Fix grey on mobile after click * cleanup Co-authored-by: Dan Peterson <dan@dan-peterson.ca> Co-authored-by: saltrafael <76502841+saltrafael@users.noreply.github.com>
2022-01-27 16:20:21 +01:00
min-height: 100vh;
2019-06-11 20:10:58 +02:00
margin-left: auto;
margin-right: auto;
2019-07-23 10:05:51 +02:00
margin-top: var(--header-height);
2020-06-01 19:03:19 +02:00
padding: var(--spacing-l); // Unfortunately this is coupled with .claim-preview--tile width calculation
2020-08-10 22:47:39 +02:00
padding-left: 0;
padding-right: 0;
2019-12-18 06:27:08 +01:00
2020-08-11 22:32:03 +02:00
> :first-child {
flex-shrink: 0;
}
2019-12-18 06:27:08 +01:00
@media (max-width: $breakpoint-small) {
2020-08-10 22:47:39 +02:00
padding: var(--spacing-xs);
Playlistorder (#7442) * Add horizontal layout (#636) * Test out a horizontal scroll for upcoming (tile only for now) * - add support for list layout - add following label on home page - clan up css and naming conventions * Update header type + show only if scheduled streams are showing * [Playlist] Pull in sorting changes from desktop + Add Drag-n-Drop + Handle unavailable/deleted claims (#641) * Add ordering Icons * Refactor doCollectionEdit - It required claims as parameter, when only uris are used to populate the collection, so that was changed to pass down the uris instead. - There were unused and mostly unnecessary functions inside, for example the parameter claimIds was never used so it would never enter the claimSearch function which again would be used to generate uris, so it's better to just use uris as parameter * Add List Reordering changes * Add toggle button for list editing * Add toggle on content page collection sidebar * Enable drag-n-drop to re-order list items https://www.youtube.com/watch?v=aYZRRyukuIw * Allow removing all unavailable claims from a List * Fix <g> on icons * Fix section buttons positioning * Move preventDefault and stopPropagation to buttons div instead of each button, preventing clicking even if disabled opening the claim * Change dragging cursor * Fix sizing * Fix dragging component * Restrict dragging to vertical axis * Ignore shuffle state for ordering * Fix console errors * Mobile fixes * Fix sidebar spacing * Fix grey on mobile after click * cleanup Co-authored-by: Dan Peterson <dan@dan-peterson.ca> Co-authored-by: saltrafael <76502841+saltrafael@users.noreply.github.com>
2022-01-27 16:20:21 +01:00
margin-top: var(--header-height-mobile);
2019-12-18 06:27:08 +01:00
}
2020-08-10 22:47:39 +02:00
@media (min-width: $breakpoint-large) {
width: 100%;
}
}
.main-wrapper__inner--filepage {
padding: 0;
@media (max-width: $breakpoint-small) {
margin-top: 0px;
padding-top: var(--header-height-mobile);
}
}
2021-01-08 16:21:27 +01:00
.main-wrapper__inner--theater-mode {
padding-top: 0;
}
Playlistorder (#7442) * Add horizontal layout (#636) * Test out a horizontal scroll for upcoming (tile only for now) * - add support for list layout - add following label on home page - clan up css and naming conventions * Update header type + show only if scheduled streams are showing * [Playlist] Pull in sorting changes from desktop + Add Drag-n-Drop + Handle unavailable/deleted claims (#641) * Add ordering Icons * Refactor doCollectionEdit - It required claims as parameter, when only uris are used to populate the collection, so that was changed to pass down the uris instead. - There were unused and mostly unnecessary functions inside, for example the parameter claimIds was never used so it would never enter the claimSearch function which again would be used to generate uris, so it's better to just use uris as parameter * Add List Reordering changes * Add toggle button for list editing * Add toggle on content page collection sidebar * Enable drag-n-drop to re-order list items https://www.youtube.com/watch?v=aYZRRyukuIw * Allow removing all unavailable claims from a List * Fix <g> on icons * Fix section buttons positioning * Move preventDefault and stopPropagation to buttons div instead of each button, preventing clicking even if disabled opening the claim * Change dragging cursor * Fix sizing * Fix dragging component * Restrict dragging to vertical axis * Ignore shuffle state for ordering * Fix console errors * Mobile fixes * Fix sidebar spacing * Fix grey on mobile after click * cleanup Co-authored-by: Dan Peterson <dan@dan-peterson.ca> Co-authored-by: saltrafael <76502841+saltrafael@users.noreply.github.com>
2022-01-27 16:20:21 +01:00
.sidebar--pusher {
animation-timing-function: var(--resizing-animation-function);
transition: transform var(--resizing-animation-timing);
transform-origin: top center;
Playlistorder (#7442) * Add horizontal layout (#636) * Test out a horizontal scroll for upcoming (tile only for now) * - add support for list layout - add following label on home page - clan up css and naming conventions * Update header type + show only if scheduled streams are showing * [Playlist] Pull in sorting changes from desktop + Add Drag-n-Drop + Handle unavailable/deleted claims (#641) * Add ordering Icons * Refactor doCollectionEdit - It required claims as parameter, when only uris are used to populate the collection, so that was changed to pass down the uris instead. - There were unused and mostly unnecessary functions inside, for example the parameter claimIds was never used so it would never enter the claimSearch function which again would be used to generate uris, so it's better to just use uris as parameter * Add List Reordering changes * Add toggle button for list editing * Add toggle on content page collection sidebar * Enable drag-n-drop to re-order list items https://www.youtube.com/watch?v=aYZRRyukuIw * Allow removing all unavailable claims from a List * Fix <g> on icons * Fix section buttons positioning * Move preventDefault and stopPropagation to buttons div instead of each button, preventing clicking even if disabled opening the claim * Change dragging cursor * Fix sizing * Fix dragging component * Restrict dragging to vertical axis * Ignore shuffle state for ordering * Fix console errors * Mobile fixes * Fix sidebar spacing * Fix grey on mobile after click * cleanup Co-authored-by: Dan Peterson <dan@dan-peterson.ca> Co-authored-by: saltrafael <76502841+saltrafael@users.noreply.github.com>
2022-01-27 16:20:21 +01:00
position: absolute;
@media (max-width: $breakpoint-small) {
transform: translateX(0);
width: calc(100% - var(--spacing-m));
}
@media (min-width: $breakpoint-small) {
transform: translateX(var(--side-nav-width--micro));
width: calc(100% - ((var(--side-nav-width--micro))));
}
}
.sidebar--pusher--filepage {
width: 100%;
}
.sidebar--pusher--open {
@media (min-width: $breakpoint-medium) {
transform: scaleX(0.9) translateX(calc(5.4 * var(--spacing-l))) scaleY(0.9);
}
}
.main-wrapper__inner--auth {
min-height: calc(100vh - var(--header-height));
padding: 0;
.main--auth-page {
min-height: unset;
Playlistorder (#7442) * Add horizontal layout (#636) * Test out a horizontal scroll for upcoming (tile only for now) * - add support for list layout - add following label on home page - clan up css and naming conventions * Update header type + show only if scheduled streams are showing * [Playlist] Pull in sorting changes from desktop + Add Drag-n-Drop + Handle unavailable/deleted claims (#641) * Add ordering Icons * Refactor doCollectionEdit - It required claims as parameter, when only uris are used to populate the collection, so that was changed to pass down the uris instead. - There were unused and mostly unnecessary functions inside, for example the parameter claimIds was never used so it would never enter the claimSearch function which again would be used to generate uris, so it's better to just use uris as parameter * Add List Reordering changes * Add toggle button for list editing * Add toggle on content page collection sidebar * Enable drag-n-drop to re-order list items https://www.youtube.com/watch?v=aYZRRyukuIw * Allow removing all unavailable claims from a List * Fix <g> on icons * Fix section buttons positioning * Move preventDefault and stopPropagation to buttons div instead of each button, preventing clicking even if disabled opening the claim * Change dragging cursor * Fix sizing * Fix dragging component * Restrict dragging to vertical axis * Ignore shuffle state for ordering * Fix console errors * Mobile fixes * Fix sidebar spacing * Fix grey on mobile after click * cleanup Co-authored-by: Dan Peterson <dan@dan-peterson.ca> Co-authored-by: saltrafael <76502841+saltrafael@users.noreply.github.com>
2022-01-27 16:20:21 +01:00
}
}
2019-06-11 20:10:58 +02:00
.main {
2019-09-26 18:07:11 +02:00
position: relative;
Playlistorder (#7442) * Add horizontal layout (#636) * Test out a horizontal scroll for upcoming (tile only for now) * - add support for list layout - add following label on home page - clan up css and naming conventions * Update header type + show only if scheduled streams are showing * [Playlist] Pull in sorting changes from desktop + Add Drag-n-Drop + Handle unavailable/deleted claims (#641) * Add ordering Icons * Refactor doCollectionEdit - It required claims as parameter, when only uris are used to populate the collection, so that was changed to pass down the uris instead. - There were unused and mostly unnecessary functions inside, for example the parameter claimIds was never used so it would never enter the claimSearch function which again would be used to generate uris, so it's better to just use uris as parameter * Add List Reordering changes * Add toggle button for list editing * Add toggle on content page collection sidebar * Enable drag-n-drop to re-order list items https://www.youtube.com/watch?v=aYZRRyukuIw * Allow removing all unavailable claims from a List * Fix <g> on icons * Fix section buttons positioning * Move preventDefault and stopPropagation to buttons div instead of each button, preventing clicking even if disabled opening the claim * Change dragging cursor * Fix sizing * Fix dragging component * Restrict dragging to vertical axis * Ignore shuffle state for ordering * Fix console errors * Mobile fixes * Fix sidebar spacing * Fix grey on mobile after click * cleanup Co-authored-by: Dan Peterson <dan@dan-peterson.ca> Co-authored-by: saltrafael <76502841+saltrafael@users.noreply.github.com>
2022-01-27 16:20:21 +01:00
width: calc(100% - 2 * var(--spacing-l));
2020-08-10 22:47:39 +02:00
max-width: var(--page-max-width);
z-index: 0;
margin-right: auto;
margin-left: auto;
@media (min-width: $breakpoint-small) {
min-height: calc(100vh - var(--header-height));
}
2019-05-07 04:35:04 +02:00
Playlistorder (#7442) * Add horizontal layout (#636) * Test out a horizontal scroll for upcoming (tile only for now) * - add support for list layout - add following label on home page - clan up css and naming conventions * Update header type + show only if scheduled streams are showing * [Playlist] Pull in sorting changes from desktop + Add Drag-n-Drop + Handle unavailable/deleted claims (#641) * Add ordering Icons * Refactor doCollectionEdit - It required claims as parameter, when only uris are used to populate the collection, so that was changed to pass down the uris instead. - There were unused and mostly unnecessary functions inside, for example the parameter claimIds was never used so it would never enter the claimSearch function which again would be used to generate uris, so it's better to just use uris as parameter * Add List Reordering changes * Add toggle button for list editing * Add toggle on content page collection sidebar * Enable drag-n-drop to re-order list items https://www.youtube.com/watch?v=aYZRRyukuIw * Allow removing all unavailable claims from a List * Fix <g> on icons * Fix section buttons positioning * Move preventDefault and stopPropagation to buttons div instead of each button, preventing clicking even if disabled opening the claim * Change dragging cursor * Fix sizing * Fix dragging component * Restrict dragging to vertical axis * Ignore shuffle state for ordering * Fix console errors * Mobile fixes * Fix sidebar spacing * Fix grey on mobile after click * cleanup Co-authored-by: Dan Peterson <dan@dan-peterson.ca> Co-authored-by: saltrafael <76502841+saltrafael@users.noreply.github.com>
2022-01-27 16:20:21 +01:00
@media (max-width: $breakpoint-small) {
2019-06-11 20:10:58 +02:00
width: 100%;
2020-08-10 22:47:39 +02:00
}
}
.main--file-page {
width: 100%;
max-width: var(--page-max-width--filepage);
margin-left: auto;
margin-right: auto;
2021-03-11 18:08:11 +01:00
margin-top: var(--spacing-m);
padding: 0 var(--spacing-m);
2020-08-10 22:47:39 +02:00
display: flex;
2021-03-11 18:08:11 +01:00
flex-direction: row;
align-items: flex-start;
2021-01-08 16:21:27 +01:00
position: relative;
2020-08-10 22:47:39 +02:00
> :first-child {
2021-01-08 16:21:27 +01:00
flex-grow: 2;
}
.file-page__secondary-content {
display: flex;
flex-direction: column;
2021-01-08 16:21:27 +01:00
justify-content: center;
width: 100%;
margin-top: var(--spacing-m);
max-width: var(--page-max-width--filepage);
margin-left: auto;
margin-right: auto;
> :first-child {
flex: 1;
max-width: 100%;
2021-01-08 16:21:27 +01:00
}
.claim-preview__wrapper--inline {
.media__subtitle {
padding-bottom: 0;
a.button {
display: inline-block !important;
}
}
}
.date_time {
font-size: var(--font-small);
}
.comment__meta-information {
.date_time {
font-size: var(--font-xsmall) !important;
color: rgba(var(--color-text-base), 0.6);
}
}
2021-01-08 16:21:27 +01:00
@media (min-width: $breakpoint-medium) {
flex-direction: row;
}
@media (max-width: $breakpoint-medium) {
section + .empty__wrap {
margin: var(--spacing-m);
}
}
@media (max-width: $breakpoint-small) {
margin-top: var(--spacing-xs) !important;
.claim-preview__wrapper {
padding: 0 !important;
a {
.button__content {
align-items: unset;
}
}
}
}
}
.media__subtitle--centered::before {
content: '';
margin-right: var(--spacing-s);
2021-01-08 16:21:27 +01:00
}
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
2021-03-11 18:08:11 +01:00
.file-page__post-comments {
margin-top: var(--spacing-l);
opacity: 0;
animation: fadeIn 2s;
animation-delay: 2s;
animation-fill-mode: forwards;
2021-03-11 18:08:11 +01:00
@media (min-width: $breakpoint-small) {
padding: var(--spacing-m);
}
}
2021-01-08 16:21:27 +01:00
.file-page__info {
margin-top: var(--spacing-m);
2020-08-10 22:47:39 +02:00
}
.file-page__recommended {
height: 0%;
width: 32rem;
margin-left: var(--spacing-l);
.card__first-pane {
.card__header--between {
.card__title-section {
display: none !important;
}
}
.card__body.card__body--list {
border-top: unset;
}
}
2021-01-08 16:21:27 +01:00
.card__header--between {
align-items: unset;
.card__title-section--body-list {
margin-top: auto;
}
}
.claim-preview-metadata {
.claim-tile__info {
margin-top: 0;
.media__subtitle {
.button__content {
margin-top: 0;
.channel-name {
margin-top: 0;
}
}
span,
.date_time {
margin-top: 0px;
}
}
}
.claim-preview__title {
.truncated-text {
-webkit-line-clamp: 2 !important;
}
}
.channel-thumbnail {
display: none;
width: 1.4rem;
height: 1.4rem;
}
}
2020-08-11 22:32:03 +02:00
@media (max-width: $breakpoint-medium) {
2020-08-18 16:17:45 +02:00
width: 100%;
margin-left: 0;
2020-08-11 22:32:03 +02:00
margin-top: var(--spacing-l);
}
@media (max-width: $breakpoint-small) {
.card__header--between {
padding: var(--spacing-xxs);
padding-bottom: var(--spacing-s);
padding-left: 0;
}
}
2020-08-10 22:47:39 +02:00
}
.file-page__recommended-collection {
@extend .file-page__recommended;
flex-direction: column;
overflow-wrap: break-word;
width: 28rem;
@media (max-width: $breakpoint-small) {
width: unset;
}
.card__title-section--body-list {
width: 100%;
}
.card__header--between {
Playlistorder (#7442) * Add horizontal layout (#636) * Test out a horizontal scroll for upcoming (tile only for now) * - add support for list layout - add following label on home page - clan up css and naming conventions * Update header type + show only if scheduled streams are showing * [Playlist] Pull in sorting changes from desktop + Add Drag-n-Drop + Handle unavailable/deleted claims (#641) * Add ordering Icons * Refactor doCollectionEdit - It required claims as parameter, when only uris are used to populate the collection, so that was changed to pass down the uris instead. - There were unused and mostly unnecessary functions inside, for example the parameter claimIds was never used so it would never enter the claimSearch function which again would be used to generate uris, so it's better to just use uris as parameter * Add List Reordering changes * Add toggle button for list editing * Add toggle on content page collection sidebar * Enable drag-n-drop to re-order list items https://www.youtube.com/watch?v=aYZRRyukuIw * Allow removing all unavailable claims from a List * Fix <g> on icons * Fix section buttons positioning * Move preventDefault and stopPropagation to buttons div instead of each button, preventing clicking even if disabled opening the claim * Change dragging cursor * Fix sizing * Fix dragging component * Restrict dragging to vertical axis * Ignore shuffle state for ordering * Fix console errors * Mobile fixes * Fix sidebar spacing * Fix grey on mobile after click * cleanup Co-authored-by: Dan Peterson <dan@dan-peterson.ca> Co-authored-by: saltrafael <76502841+saltrafael@users.noreply.github.com>
2022-01-27 16:20:21 +01:00
align-items: flex-start !important;
.card__title-actions {
display: flex;
flex-direction: column;
align-items: flex-end;
padding: var(--spacing-s);
button {
margin-top: var(--spacing-xxs);
}
}
}
.card__title-actions-container {
position: absolute;
top: 0;
right: 0;
height: unset;
display: unset;
flex-direction: unset;
.card__title-actions {
padding: 0;
.button {
height: 2rem;
padding: 0.5rem;
}
}
@media (max-width: $breakpoint-small) {
top: calc(var(--spacing-s) * -1);
}
}
.file-page__recommended-collection__row {
display: block;
max-width: unset;
width: 100%;
align-items: center;
color: var(--color-text);
&:hover {
color: var(--color-primary);
}
&:nth-child(2) {
display: flex;
margin-top: calc(var(--spacing-m) * -1 - 10px);
.button {
flex: auto;
.button__content {
flex-direction: column;
justify-content: center;
.color-override {
stroke: var(--color-primary);
}
}
}
}
@media (max-width: $breakpoint-small) {
max-width: unset;
width: 100%;
.button--file-action {
height: unset;
margin-right: var(--spacing-xxxs);
.button__content {
padding: var(--spacing-xxs);
margin: 0;
}
}
.button--file-action:last-of-type {
margin-right: 0;
}
}
}
a {
.file-page__recommended-collection__row {
@media (max-width: $breakpoint-small) {
width: calc(100% - var(--spacing-xl));
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
}
}
Playlistorder (#7442) * Add horizontal layout (#636) * Test out a horizontal scroll for upcoming (tile only for now) * - add support for list layout - add following label on home page - clan up css and naming conventions * Update header type + show only if scheduled streams are showing * [Playlist] Pull in sorting changes from desktop + Add Drag-n-Drop + Handle unavailable/deleted claims (#641) * Add ordering Icons * Refactor doCollectionEdit - It required claims as parameter, when only uris are used to populate the collection, so that was changed to pass down the uris instead. - There were unused and mostly unnecessary functions inside, for example the parameter claimIds was never used so it would never enter the claimSearch function which again would be used to generate uris, so it's better to just use uris as parameter * Add List Reordering changes * Add toggle button for list editing * Add toggle on content page collection sidebar * Enable drag-n-drop to re-order list items https://www.youtube.com/watch?v=aYZRRyukuIw * Allow removing all unavailable claims from a List * Fix <g> on icons * Fix section buttons positioning * Move preventDefault and stopPropagation to buttons div instead of each button, preventing clicking even if disabled opening the claim * Change dragging cursor * Fix sizing * Fix dragging component * Restrict dragging to vertical axis * Ignore shuffle state for ordering * Fix console errors * Mobile fixes * Fix sidebar spacing * Fix grey on mobile after click * cleanup Co-authored-by: Dan Peterson <dan@dan-peterson.ca> Co-authored-by: saltrafael <76502841+saltrafael@users.noreply.github.com>
2022-01-27 16:20:21 +01:00
.collection-preview__edit-group {
//width: 1.5rem;
}
}
.file-page__playlist-collection {
@extend .file-page__recommended-collection;
.card__first-pane {
.card__header--between {
.card__title-section {
display: unset !important;
}
}
}
.file-page__playlist-collection__row {
@extend .file-page__recommended-collection__row;
.button--file-action {
&:hover {
.icon {
stroke: white;
}
}
}
Playlistorder (#7442) * Add horizontal layout (#636) * Test out a horizontal scroll for upcoming (tile only for now) * - add support for list layout - add following label on home page - clan up css and naming conventions * Update header type + show only if scheduled streams are showing * [Playlist] Pull in sorting changes from desktop + Add Drag-n-Drop + Handle unavailable/deleted claims (#641) * Add ordering Icons * Refactor doCollectionEdit - It required claims as parameter, when only uris are used to populate the collection, so that was changed to pass down the uris instead. - There were unused and mostly unnecessary functions inside, for example the parameter claimIds was never used so it would never enter the claimSearch function which again would be used to generate uris, so it's better to just use uris as parameter * Add List Reordering changes * Add toggle button for list editing * Add toggle on content page collection sidebar * Enable drag-n-drop to re-order list items https://www.youtube.com/watch?v=aYZRRyukuIw * Allow removing all unavailable claims from a List * Fix <g> on icons * Fix section buttons positioning * Move preventDefault and stopPropagation to buttons div instead of each button, preventing clicking even if disabled opening the claim * Change dragging cursor * Fix sizing * Fix dragging component * Restrict dragging to vertical axis * Ignore shuffle state for ordering * Fix console errors * Mobile fixes * Fix sidebar spacing * Fix grey on mobile after click * cleanup Co-authored-by: Dan Peterson <dan@dan-peterson.ca> Co-authored-by: saltrafael <76502841+saltrafael@users.noreply.github.com>
2022-01-27 16:20:21 +01:00
}
.claim-preview--collection-mine {
padding-left: 6.5rem;
position: relative;
}
}
2020-08-10 22:47:39 +02:00
@media (max-width: $breakpoint-medium) {
flex-direction: column;
2020-08-10 22:47:39 +02:00
> :first-child {
margin-right: 0;
}
2019-06-11 20:10:58 +02:00
}
2020-08-18 16:17:45 +02:00
@media (max-width: $breakpoint-small) {
flex-direction: column;
margin: 0;
padding: 0;
.file-page__secondary-content {
margin: 0;
padding: 0;
}
.card {
border-radius: 0;
margin-bottom: 0px !important;
padding: var(--spacing-xxs);
}
.file-page__recommended {
margin-top: 0px !important;
}
}
}
.card__title-section--body-list {
display: unset !important;
div {
flex: auto;
}
@media (max-width: $breakpoint-small) {
.card__title {
width: 100%;
}
}
}
.main--upcoming {
2020-08-18 16:17:45 +02:00
@media (max-width: $breakpoint-small) {
padding: var(--spacing-xs);
2021-03-11 18:08:11 +01:00
flex-direction: column;
2020-08-19 16:02:00 +02:00
padding-top: 0;
2020-08-18 16:17:45 +02:00
}
}
2019-01-09 19:39:05 +01:00
2021-01-08 16:21:27 +01:00
.main--theater-mode {
padding-left: 0;
padding-right: 0;
margin-left: 0;
margin-right: 0;
2021-04-12 18:43:47 +02:00
margin-top: 0;
2021-01-08 16:21:27 +01:00
width: 100vw;
max-width: none;
> :first-child {
margin-right: 0;
}
.file-page__info {
padding: 0 var(--spacing-m);
margin-top: var(--spacing-m);
max-width: var(--page-max-width--filepage);
display: flex;
flex-direction: column;
margin-left: auto;
margin-right: auto;
}
.file-page__recommended {
@media (max-width: $breakpoint-medium) {
width: 100%;
}
2021-01-08 16:21:27 +01:00
}
.file-page__secondary-content {
padding: 0 var(--spacing-s);
flex-direction: row;
2021-01-08 16:21:27 +01:00
@media (max-width: $breakpoint-medium) {
flex-direction: column;
2021-01-08 16:21:27 +01:00
}
}
.file-page__recommended {
margin-top: 10px;
}
2021-01-08 16:21:27 +01:00
}
2020-08-21 17:49:13 +02:00
.main--full-width {
@extend .main;
Playlistorder (#7442) * Add horizontal layout (#636) * Test out a horizontal scroll for upcoming (tile only for now) * - add support for list layout - add following label on home page - clan up css and naming conventions * Update header type + show only if scheduled streams are showing * [Playlist] Pull in sorting changes from desktop + Add Drag-n-Drop + Handle unavailable/deleted claims (#641) * Add ordering Icons * Refactor doCollectionEdit - It required claims as parameter, when only uris are used to populate the collection, so that was changed to pass down the uris instead. - There were unused and mostly unnecessary functions inside, for example the parameter claimIds was never used so it would never enter the claimSearch function which again would be used to generate uris, so it's better to just use uris as parameter * Add List Reordering changes * Add toggle button for list editing * Add toggle on content page collection sidebar * Enable drag-n-drop to re-order list items https://www.youtube.com/watch?v=aYZRRyukuIw * Allow removing all unavailable claims from a List * Fix <g> on icons * Fix section buttons positioning * Move preventDefault and stopPropagation to buttons div instead of each button, preventing clicking even if disabled opening the claim * Change dragging cursor * Fix sizing * Fix dragging component * Restrict dragging to vertical axis * Ignore shuffle state for ordering * Fix console errors * Mobile fixes * Fix sidebar spacing * Fix grey on mobile after click * cleanup Co-authored-by: Dan Peterson <dan@dan-peterson.ca> Co-authored-by: saltrafael <76502841+saltrafael@users.noreply.github.com>
2022-01-27 16:20:21 +01:00
max-width: none;
2020-08-21 17:49:13 +02:00
}
.main--popout-chat {
@extend .main;
margin: 0 !important;
padding: 0 !important;
width: 100vw !important;
height: 100vh !important;
}
2019-08-27 16:43:42 +02:00
.main--auth-page {
2020-08-21 17:49:13 +02:00
width: 100%;
max-width: 70rem;
2019-08-27 16:43:42 +02:00
margin-left: auto;
margin-right: auto;
padding: 0 var(--spacing-s);
@media (min-width: $breakpoint-small) {
margin-top: var(--spacing-main-padding);
padding: 0 var(--spacing-l);
}
}
.main--settings-page {
width: 100%;
max-width: 70rem;
margin-left: auto;
margin-right: auto;
margin-top: var(--spacing-m);
padding: 0 var(--spacing-m);
@media (max-width: $breakpoint-small) {
.section__header--actions {
.section__actions--inline:last-of-type {
.button__label {
display: none;
}
}
}
}
.card__body--list {
background-color: rgba(var(--color-header-background-base), 0.4);
border-radius: var(--border-radius);
border-top: unset;
.settings__row {
padding: var(--spacing-s);
border-bottom: 1px solid var(--color-border);
.checkbox {
// Outer box of the fake checkbox
label::before {
height: var(--height-checkbox);
width: var(--height-checkbox);
border: 1px solid var(--color-input-border);
border-radius: var(--border-radius);
left: 0px;
top: -1px;
}
}
.radio {
label::before {
height: var(--height-checkbox);
width: var(--height-checkbox);
border: 1px solid var(--color-input-border);
background-color: var(--color-card-background);
left: 0px;
top: -1px;
}
}
.settings__row--value {
.button__content {
&:hover {
color: var(--color-secondary);
}
}
}
.fieldset-group--smushed {
label {
margin-left: 0;
}
fieldset-section:last-of-type {
margin-left: 2px;
}
}
}
.settings__row:first-of-type {
margin-top: var(--spacing-xxxs);
}
.settings__row:last-of-type {
border-bottom: unset;
}
.card__main-actions {
border-top: unset;
}
}
.button--secondary {
background-color: var(--color-header-button) !important;
.button__content {
.icon {
stroke: var(--color-text) !important;
}
.button__label {
color: var(--color-text) !important;
}
}
&:hover {
background-color: var(--color-primary) !important;
.button__content {
.icon {
stroke: var(--color-primary-contrast) !important;
}
.button__label {
color: var(--color-primary-contrast) !important;
}
}
}
}
Playlistorder (#7442) * Add horizontal layout (#636) * Test out a horizontal scroll for upcoming (tile only for now) * - add support for list layout - add following label on home page - clan up css and naming conventions * Update header type + show only if scheduled streams are showing * [Playlist] Pull in sorting changes from desktop + Add Drag-n-Drop + Handle unavailable/deleted claims (#641) * Add ordering Icons * Refactor doCollectionEdit - It required claims as parameter, when only uris are used to populate the collection, so that was changed to pass down the uris instead. - There were unused and mostly unnecessary functions inside, for example the parameter claimIds was never used so it would never enter the claimSearch function which again would be used to generate uris, so it's better to just use uris as parameter * Add List Reordering changes * Add toggle button for list editing * Add toggle on content page collection sidebar * Enable drag-n-drop to re-order list items https://www.youtube.com/watch?v=aYZRRyukuIw * Allow removing all unavailable claims from a List * Fix <g> on icons * Fix section buttons positioning * Move preventDefault and stopPropagation to buttons div instead of each button, preventing clicking even if disabled opening the claim * Change dragging cursor * Fix sizing * Fix dragging component * Restrict dragging to vertical axis * Ignore shuffle state for ordering * Fix console errors * Mobile fixes * Fix sidebar spacing * Fix grey on mobile after click * cleanup Co-authored-by: Dan Peterson <dan@dan-peterson.ca> Co-authored-by: saltrafael <76502841+saltrafael@users.noreply.github.com>
2022-01-27 16:20:21 +01:00
@media (max-width: $breakpoint-small) {
padding: 0 0;
.wunderbar__wrapper {
margin-right: 0;
.wunderbar {
padding-left: 0;
.icon {
left: 11px;
}
}
}
Playlistorder (#7442) * Add horizontal layout (#636) * Test out a horizontal scroll for upcoming (tile only for now) * - add support for list layout - add following label on home page - clan up css and naming conventions * Update header type + show only if scheduled streams are showing * [Playlist] Pull in sorting changes from desktop + Add Drag-n-Drop + Handle unavailable/deleted claims (#641) * Add ordering Icons * Refactor doCollectionEdit - It required claims as parameter, when only uris are used to populate the collection, so that was changed to pass down the uris instead. - There were unused and mostly unnecessary functions inside, for example the parameter claimIds was never used so it would never enter the claimSearch function which again would be used to generate uris, so it's better to just use uris as parameter * Add List Reordering changes * Add toggle button for list editing * Add toggle on content page collection sidebar * Enable drag-n-drop to re-order list items https://www.youtube.com/watch?v=aYZRRyukuIw * Allow removing all unavailable claims from a List * Fix <g> on icons * Fix section buttons positioning * Move preventDefault and stopPropagation to buttons div instead of each button, preventing clicking even if disabled opening the claim * Change dragging cursor * Fix sizing * Fix dragging component * Restrict dragging to vertical axis * Ignore shuffle state for ordering * Fix console errors * Mobile fixes * Fix sidebar spacing * Fix grey on mobile after click * cleanup Co-authored-by: Dan Peterson <dan@dan-peterson.ca> Co-authored-by: saltrafael <76502841+saltrafael@users.noreply.github.com>
2022-01-27 16:20:21 +01:00
}
.card__subtitle {
margin: 0 0 var(--spacing-s) 0;
font-size: var(--font-small);
}
.button--inverse {
color: var(--color-primary);
}
.card__title-section {
padding-bottom: 0;
}
.card__title-section:not(:first-child) {
padding-top: var(--spacing-l);
}
.section__actions--between:first-child {
margin-top: var(--spacing-s);
}
.section__actions--between {
border-top: unset;
margin-top: 0;
padding-top: var(--spacing-s);
padding-bottom: var(--spacing-s);
margin-left: auto;
position: relative;
.settings__row--value {
align-self: start;
}
.settings__row--title {
color: rgba(var(--color-text-base), 0.9);
}
.settings__row--subtitle {
color: rgba(var(--color-text-base), 0.6);
}
&:hover:not(.opacity-30) {
.settings__row--title {
color: rgba(var(--color-text-base), 1);
}
}
}
.tags--remove {
.button {
background-color: var(--color-header-background);
color: var(--color-text);
}
}
.claim-preview__wrapper--channel {
.menu__button {
right: var(--spacing-s);
right: 0 !important;
}
.claim-tile__info {
margin-top: 0;
padding-bottom: var(--spacing-xxxs);
.claim-preview-metadata-sub-upload {
margin-top: 3px;
}
}
.button--secondary {
background-color: var(--color-header-button) !important;
&:hover {
.button__label {
color: var(--color-text) !important;
}
}
}
.claim__tags {
a.button {
.button__content {
margin-top: -3px;
.button__label {
overflow: unset;
}
}
}
}
}
.claim-preview__wrapper--channel.placeholder {
.media__thumb {
width: 6rem !important;
height: 6rem;
border-radius: 50%;
}
.channel-thumbnail {
display: none;
}
@media (max-width: $breakpoint-small) {
.media__thumb {
width: 4rem !important;
height: 4rem;
}
}
}
}
2021-03-12 17:18:09 +01:00
.main--markdown {
2021-03-11 18:08:11 +01:00
flex-direction: column;
.claim-preview__wrapper {
.claim-tile__info {
margin-top: 0;
padding-bottom: var(--spacing-xxxs);
.claim-preview-metadata-sub-upload {
margin-top: 3px;
}
.channel-name {
margin-top: -8px;
}
}
}
.post__info--grouped {
.button__content {
color: var(--color-primary);
.icon {
color: var(--color-text-subtitle);
}
&:hover {
color: var(--color-secondary);
}
}
}
.markdown-preview {
p {
.button__content {
.channel-name {
font-size: var(--font-large);
color: var(--color-primary);
@media (max-width: $breakpoint-small) {
font-size: var(--font-base);
}
}
}
}
}
@media (max-width: $breakpoint-small) {
padding: var(--spacing-xxxs);
}
2021-03-11 18:08:11 +01:00
}
.main__auth-content {
display: flex;
position: relative;
flex-direction: column;
padding-bottom: var(--spacing-xl);
@media (min-width: $breakpoint-small) {
flex-direction: row;
> :first-child {
position: fixed;
background-color: var(--color-background);
width: calc(40% - var(--spacing-l));
margin-top: var(--spacing-xl);
}
> :nth-child(2) {
width: 50%;
margin-left: auto;
}
}
@media (min-width: $breakpoint-medium) {
> :first-child {
width: calc(30% - var(--spacing-l));
max-width: 25rem;
}
> :nth-child(2) {
width: 50%;
margin-left: auto;
}
}
2019-08-27 16:43:42 +02:00
}
2020-06-01 19:03:19 +02:00
.main--buy {
@extend .main--auth-page;
max-width: 30rem;
min-height: 400px;
.card {
height: 100%;
margin: 0;
padding: 0;
}
iframe {
min-height: 420px;
background-color: var(--color-card-background);
margin-bottom: 2rem;
}
.sm:bg-grey-lighter {
background-color: var(--color-card-background);
}
}
2021-03-10 07:36:02 +01:00
.main--send {
@extend .main--buy;
max-width: 34rem;
}
2021-03-25 12:24:49 +01:00
.main--swap {
@extend .main--buy;
max-width: 34rem;
}
2021-04-08 17:39:33 +02:00
.main--report-content {
@extend .main--auth-page;
max-width: 40rem;
.form-field__two-column {
display: flex;
.comment__char-count-mde {
margin-left: auto;
padding-bottom: 2px;
padding-right: 0;
}
}
2021-04-08 17:39:33 +02:00
}
.main--empty {
2019-09-27 22:03:05 +02:00
align-self: center;
display: flex;
2019-09-27 22:03:05 +02:00
align-items: center;
flex-direction: column;
text-align: center;
padding: 0 var(--spacing-m);
margin-top: var(--spacing-l);
margin-bottom: var(--spacing-l);
2020-09-15 16:05:04 +02:00
width: 100%;
> .card {
width: 100%;
}
2020-05-21 17:38:28 +02:00
@media (min-width: $breakpoint-small) {
margin-top: 100px;
margin-bottom: 100px;
2020-05-21 17:38:28 +02:00
}
}
2019-06-17 22:32:38 +02:00
2019-07-23 10:05:51 +02:00
.main--launching {
width: 100vw;
height: 100vh;
background-color: var(--color-background);
}
2019-09-26 18:07:11 +02:00
.main--contained {
margin: auto;
2019-09-27 20:56:15 +02:00
display: flex;
flex-direction: column;
align-items: flex-start;
max-width: 60rem;
2019-09-27 20:56:15 +02:00
text-align: left;
2019-10-03 23:40:54 +02:00
& > * {
width: 100%;
}
2019-09-26 18:07:11 +02:00
}
2019-08-27 16:43:42 +02:00
2020-08-26 22:28:33 +02:00
.main--hoisted {
margin-top: calc(var(--spacing-s) * -1);
@media (min-width: $breakpoint-small) {
margin-top: calc(var(--spacing-l) * -1);
}
}
.main__sign-in,
.main__sign-up {
max-width: 27rem;
margin-left: auto;
margin-right: auto;
@media (max-width: $breakpoint-small) {
margin-top: var(--spacing-m);
.card__title {
font-size: var(--font-large) !important;
}
}
}
.main__sign-up--graphic {
max-width: 47rem;
Playlistorder (#7442) * Add horizontal layout (#636) * Test out a horizontal scroll for upcoming (tile only for now) * - add support for list layout - add following label on home page - clan up css and naming conventions * Update header type + show only if scheduled streams are showing * [Playlist] Pull in sorting changes from desktop + Add Drag-n-Drop + Handle unavailable/deleted claims (#641) * Add ordering Icons * Refactor doCollectionEdit - It required claims as parameter, when only uris are used to populate the collection, so that was changed to pass down the uris instead. - There were unused and mostly unnecessary functions inside, for example the parameter claimIds was never used so it would never enter the claimSearch function which again would be used to generate uris, so it's better to just use uris as parameter * Add List Reordering changes * Add toggle button for list editing * Add toggle on content page collection sidebar * Enable drag-n-drop to re-order list items https://www.youtube.com/watch?v=aYZRRyukuIw * Allow removing all unavailable claims from a List * Fix <g> on icons * Fix section buttons positioning * Move preventDefault and stopPropagation to buttons div instead of each button, preventing clicking even if disabled opening the claim * Change dragging cursor * Fix sizing * Fix dragging component * Restrict dragging to vertical axis * Ignore shuffle state for ordering * Fix console errors * Mobile fixes * Fix sidebar spacing * Fix grey on mobile after click * cleanup Co-authored-by: Dan Peterson <dan@dan-peterson.ca> Co-authored-by: saltrafael <76502841+saltrafael@users.noreply.github.com>
2022-01-27 16:20:21 +01:00
.card__first-pane {
width: 50%;
@media (max-width: $breakpoint-small) {
width: 100%;
}
}
.card__second-pane {
width: 50%;
border: none;
display: flex;
align-items: center;
justify-content: center;
@media (max-width: $breakpoint-small) {
width: 100%;
}
.signup-image {
@media (max-width: $breakpoint-small) {
width: 100%;
}
}
}
.card__title {
Playlistorder (#7442) * Add horizontal layout (#636) * Test out a horizontal scroll for upcoming (tile only for now) * - add support for list layout - add following label on home page - clan up css and naming conventions * Update header type + show only if scheduled streams are showing * [Playlist] Pull in sorting changes from desktop + Add Drag-n-Drop + Handle unavailable/deleted claims (#641) * Add ordering Icons * Refactor doCollectionEdit - It required claims as parameter, when only uris are used to populate the collection, so that was changed to pass down the uris instead. - There were unused and mostly unnecessary functions inside, for example the parameter claimIds was never used so it would never enter the claimSearch function which again would be used to generate uris, so it's better to just use uris as parameter * Add List Reordering changes * Add toggle button for list editing * Add toggle on content page collection sidebar * Enable drag-n-drop to re-order list items https://www.youtube.com/watch?v=aYZRRyukuIw * Allow removing all unavailable claims from a List * Fix <g> on icons * Fix section buttons positioning * Move preventDefault and stopPropagation to buttons div instead of each button, preventing clicking even if disabled opening the claim * Change dragging cursor * Fix sizing * Fix dragging component * Restrict dragging to vertical axis * Ignore shuffle state for ordering * Fix console errors * Mobile fixes * Fix sidebar spacing * Fix grey on mobile after click * cleanup Co-authored-by: Dan Peterson <dan@dan-peterson.ca> Co-authored-by: saltrafael <76502841+saltrafael@users.noreply.github.com>
2022-01-27 16:20:21 +01:00
font-size: var(--font-title);
font-weight: var(--font-weight-bold);
}
.card__main-actions {
border: none;
}
}
.main__channel-creation {
margin-left: auto;
margin-right: auto;
max-width: 32rem;
}
2021-12-03 23:06:42 +01:00
::-webkit-scrollbar {
width: 12px;
height: 12px;
}
::-webkit-scrollbar-track {
background-color: transparent;
border-radius: 10px;
}
::-webkit-scrollbar-thumb {
background-color: var(--color-scrollbar-thumb-bg);
border-radius: 10px;
}