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

431 lines
8.4 KiB
SCSS
Raw Normal View History

2019-05-07 04:35:04 +02:00
$cover-z-index: 0;
$metadata-z-index: 1;
2019-05-13 08:05:38 +02:00
.channel-cover {
2019-12-18 06:27:08 +01:00
position: relative;
2019-11-22 22:13:00 +01:00
background-image: linear-gradient(to right, #637ad2, #318794 80%);
2019-05-07 04:35:04 +02:00
display: flex;
align-items: flex-end;
box-sizing: content-box;
2019-11-22 22:13:00 +01:00
color: #fff;
}
2019-05-13 08:05:38 +02:00
.channel-cover__custom {
2019-05-07 04:35:04 +02:00
z-index: $cover-z-index;
align-self: flex-start;
position: absolute;
object-fit: cover;
}
2019-05-13 08:05:38 +02:00
.channel-cover,
.channel-cover__custom {
2020-01-08 06:04:35 +01:00
min-height: var(--cover-photo-height);
height: 100%;
2019-05-07 04:35:04 +02:00
width: 100%;
2020-01-03 17:36:15 +01:00
border-top-left-radius: var(--card-radius);
border-top-right-radius: var(--card-radius);
border: 1px sold var(--color-border);
border-bottom: none;
2020-01-08 06:04:35 +01:00
@media (max-width: $breakpoint-small) {
// Yikes
// I, Sean Yesmunt, take full responsibility for this monster
2020-06-01 19:03:19 +02:00
min-height: calc(var(--cover-photo-height) + 2 * var(--spacing-xl) + var(--spacing-m));
2020-01-08 06:04:35 +01:00
}
}
.channel-cover__custom--waiting {
background-color: var(--color-gray-5);
width: 100%;
height: 100%;
position: absolute;
}
.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%);
}
}
2019-05-11 21:06:22 +02:00
.channel-thumbnail {
display: flex;
position: relative;
2019-06-27 08:18:45 +02:00
height: 5rem;
2019-07-09 03:19:46 +02:00
width: 5rem;
2019-05-07 04:35:04 +02:00
background-size: cover;
2020-06-01 19:03:19 +02:00
margin-right: var(--spacing-m);
2019-06-11 20:10:58 +02:00
}
2020-08-24 20:44:41 +02:00
.channel-thumbnail--resolving {
background-color: var(--color-gray-3);
}
2019-12-04 19:07:40 +01:00
.channel-thumbnail--small {
height: 3rem;
width: 3rem;
}
2021-04-23 21:59:48 +02:00
.channel-thumbnail--xsmall {
height: 2.1rem;
width: 2.1rem;
margin-right: var(--spacing-xs);
}
.chanel-thumbnail--waiting {
background-color: var(--color-gray-5);
border-radius: var(--border-radius);
padding-top: 4rem;
padding-left: 1rem;
padding-right: 1rem;
}
2019-06-11 20:10:58 +02:00
.channel__thumbnail--channel-page {
position: absolute;
height: var(--channel-thumbnail-width);
width: var(--channel-thumbnail-width);
2020-06-01 19:03:19 +02:00
left: var(--spacing-m);
2019-11-22 22:13:00 +01:00
top: 4rem;
2020-06-01 19:03:19 +02:00
margin-top: var(--spacing-l);
2020-04-21 16:34:16 +02:00
box-shadow: var(--card-box-shadow);
2019-12-18 06:27:08 +01:00
@media (max-width: $breakpoint-small) {
top: 0;
margin-top: var(--spacing-m);
2019-12-18 06:27:08 +01:00
}
}
2019-05-11 21:06:22 +02:00
.channel-thumbnail__custom {
2019-05-07 04:35:04 +02:00
width: 100%;
object-fit: cover;
2021-04-26 21:19:17 +02:00
font-size: 1px; // To hide the alt text on firefox;
}
2019-05-07 04:35:04 +02:00
2019-05-11 21:06:22 +02:00
.channel-thumbnail__default {
width: 80%;
height: 80%;
margin-left: auto;
margin-right: auto;
align-self: flex-end;
}
.channel-thumbnail,
.channel-thumbnail__custom {
2019-05-07 04:35:04 +02:00
border-radius: var(--card-radius);
}
.channel-thumbnail__default--0 {
2019-11-22 22:13:00 +01:00
background-color: #748ffc;
2019-05-11 21:06:22 +02:00
}
2019-11-22 22:13:00 +01:00
.channel-thumbnail__default--1 {
2019-11-22 22:13:00 +01:00
background-color: #ffa855;
2019-05-11 21:06:22 +02:00
}
2019-11-22 22:13:00 +01:00
.channel-thumbnail__default--2 {
2019-11-22 22:13:00 +01:00
background-color: #339af0;
2019-05-11 21:06:22 +02:00
}
2019-11-22 22:13:00 +01:00
.channel-thumbnail__default--3 {
2019-11-22 22:13:00 +01:00
background-color: #ec8383;
2019-05-11 21:06:22 +02:00
}
2019-12-04 19:07:40 +01:00
.channel-thumbnail__default--4 {
background-color: #ccc;
}
2019-05-07 04:35:04 +02:00
.channel__primary-info {
// Ensure the profile pic/title sit ontop of the default cover background
z-index: $metadata-z-index;
// 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));
2020-06-01 19:03:19 +02:00
padding-right: var(--spacing-m);
padding-bottom: var(--spacing-m);
margin-top: var(--spacing-xl);
2019-07-14 00:34:13 +02:00
min-width: 0;
2019-09-27 05:52:04 +02:00
width: 100%;
2019-12-18 06:27:08 +01:00
@media (max-width: $breakpoint-small) {
2020-06-01 19:03:19 +02:00
padding-left: var(--spacing-m);
margin-top: calc(var(--channel-thumbnail-width) + var(--spacing-l));
2019-12-18 06:27:08 +01:00
}
2019-05-07 04:35:04 +02:00
}
.channel__title {
2019-11-22 22:13:00 +01:00
display: inline;
2020-06-01 19:03:19 +02:00
margin-right: var(--spacing-s);
2019-07-14 00:34:13 +02:00
overflow: hidden;
text-overflow: ellipsis;
2019-10-04 07:13:29 +02:00
font-size: xx-large;
2019-11-07 20:39:22 +01:00
font-weight: var(--font-weight-bold);
2019-07-02 19:54:42 +02:00
// 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);
2019-07-02 19:54:42 +02:00
}
2020-01-08 06:04:35 +01:00
@media (max-width: $breakpoint-small) {
2020-06-01 19:03:19 +02:00
padding-top: var(--spacing-xl);
2020-01-08 06:04:35 +01:00
}
2019-05-07 04:35:04 +02:00
}
2019-09-27 05:52:04 +02:00
.channel__meta {
display: flex;
justify-content: space-between;
2020-05-04 17:38:35 +02:00
align-items: flex-end;
.button {
height: auto;
}
2019-05-07 04:35:04 +02:00
}
2019-09-16 07:32:02 +02:00
.channel__quick-actions {
2020-04-13 22:27:34 +02:00
display: flex;
flex-direction: row;
2020-06-01 19:03:19 +02:00
margin-left: var(--spacing-m);
2019-09-16 07:32:02 +02:00
position: absolute;
top: 0;
2020-06-01 19:03:19 +02:00
right: var(--spacing-m);
margin-top: var(--spacing-m);
2019-09-16 07:32:02 +02:00
z-index: $metadata-z-index;
2020-01-08 06:04:35 +01:00
flex-wrap: wrap;
2020-04-01 23:44:13 +02:00
font-size: var(--font-base);
2020-11-02 17:51:08 +01:00
> .button,
> .button-group .button {
padding: 0 var(--spacing-s);
}
2020-04-13 22:27:34 +02:00
> .button,
> .button-group {
2020-04-13 22:27:34 +02:00
&:not(:last-child) {
2020-06-01 19:03:19 +02:00
margin-right: var(--spacing-m);
2020-04-13 22:27:34 +02:00
}
2020-04-01 23:44:13 +02:00
}
2020-04-01 21:36:59 +02:00
2020-11-02 17:51:08 +01:00
.button-group .button {
&:not(:last-child) {
margin-right: 0;
}
}
2020-04-01 21:36:59 +02:00
@media (max-width: $breakpoint-small) {
flex-direction: column;
2020-11-13 21:25:18 +01:00
> .button,
> .button-group {
margin-right: 0;
2020-06-01 19:03:19 +02:00
margin-bottom: var(--spacing-xs);
margin-left: auto;
// Needed for specificity above
&:not(:last-child) {
margin-right: 0;
}
2020-04-01 21:36:59 +02:00
}
}
2019-09-16 07:32:02 +02:00
}
2020-01-21 23:38:10 +01:00
2020-06-29 21:54:07 +02:00
.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;
2020-06-29 21:54:07 +02:00
.button {
margin-top: var(--spacing-l);
2020-06-29 21:54:07 +02:00
}
}
}
2020-01-21 23:38:10 +01:00
.channel-name--inline {
2020-06-01 19:03:19 +02:00
margin-left: var(--spacing-xs);
2020-01-21 23:38:10 +01:00
}
2020-03-18 18:11:37 +01:00
2020-05-08 03:39:52 +02:00
.menu__list.channel__list {
margin-top: var(--spacing-xs);
2020-05-08 03:39:52 +02:00
margin-left: 0;
2021-03-11 17:26:11 +01:00
padding: 0;
2020-05-08 03:39:52 +02:00
border-radius: var(--border-radius);
background: transparent;
max-height: 15rem;
overflow-y: scroll;
2020-05-08 03:39:52 +02:00
[role='menuitem'] {
2021-03-11 17:26:11 +01:00
margin: 0;
2020-05-08 03:39:52 +02:00
&[data-selected] {
background: transparent;
2021-04-26 21:19:17 +02:00
.channel__list-item,
.channel-staked__wrapper {
2020-05-08 03:39:52 +02:00
background-color: var(--color-card-background-highlighted);
}
}
&:first-child {
.channel__list-item {
border-top: 1px solid var(--color-border);
border-top-left-radius: var(--border-radius);
border-top-right-radius: var(--border-radius);
}
}
&:last-child {
.channel__list-item {
border-bottom-left-radius: var(--border-radius);
border-bottom-right-radius: var(--border-radius);
}
}
.channel__list-item {
2020-06-01 19:03:19 +02:00
padding-right: calc(var(--spacing-xl) + var(--spacing-s) * 2);
2020-05-08 03:39:52 +02:00
border-left: 1px solid var(--color-border);
border-right: 1px solid var(--color-border);
}
}
}
2020-03-18 18:11:37 +01:00
.channel__list-item {
display: flex;
2020-03-19 15:38:20 +01:00
align-items: center;
2020-03-18 18:11:37 +01:00
background-color: var(--color-card-background);
2020-06-01 19:03:19 +02:00
padding: var(--spacing-s);
2020-03-18 18:11:37 +01:00
border-bottom: 1px solid var(--color-border);
2021-04-26 21:19:17 +02:00
overflow: hidden;
2020-03-18 18:11:37 +01:00
.channel-thumbnail {
height: 2rem;
width: 2rem;
}
.icon {
2020-05-08 04:17:54 +02:00
color: var(--color-menu-icon);
}
.icon__wrapper {
padding: 0;
height: 2rem;
width: 2rem;
margin-right: var(--spacing-m);
border-radius: var(--border-radius);
2020-03-18 18:11:37 +01:00
}
&:hover {
background-color: var(--color-card-background-highlighted);
}
}
.channel__list-item--selected {
border: 1px solid var(--color-border);
2020-05-08 04:17:54 +02:00
border-radius: var(--border-radius);
.icon--ChevronDown {
margin-left: var(--spacing-l);
}
}
.channel__list-text {
font-weight: var(--font-weight-bold);
color: var(--color-text);
}
.channel__selector {
margin-bottom: var(--spacing-m);
@media (min-width: $breakpoint-small) {
margin-bottom: var(--spacing-l);
}
2020-03-18 18:11:37 +01:00
}
.channel-staked__tooltip {
display: flex;
align-items: center;
2021-04-26 21:19:17 +02:00
line-height: 1rem;
}
.channel-staked__tooltip-text {
margin-left: var(--spacing-xs);
font-size: var(--font-xsmall);
2021-04-26 21:19:17 +02:00
// still needed ?
.icon--LBC {
opacity: 0.7;
margin-top: -2px;
}
}
.channel-staked__wrapper {
display: flex;
position: absolute;
padding: 0.2rem;
bottom: -0.75rem;
left: -0.8rem;
background-color: var(--color-card-background);
border-radius: 50%;
}
.channel-staked__wrapper--large {
position: relative;
background-color: transparent;
display: inline-block;
bottom: auto;
left: 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 {
2021-04-23 21:59:48 +02:00
margin-left: 1px;
z-index: 3;
fill: var(--color-gray-3);
}
.channel-staked__indicator--controlling {
fill: #00eaff;
}
.channel-staked__amount {
display: inline-block;
font-size: var(--font-xxsmall);
margin-left: var(--spacing-s);
.credit-amount {
color: var(--color-gray-3);
}
}