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

306 lines
6.2 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__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;
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;
}
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;
2020-08-24 20:44:41 +02:00
background-color: var(--color-thumbnail-background);
}
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 {
2020-06-01 19:03:19 +02:00
margin-left: var(--spacing-m);
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
}
.channel__image--blurred {
filter: blur(16px);
}
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-06-01 19:03:19 +02:00
padding: 0 var(--spacing-xs);
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
@media (max-width: $breakpoint-small) {
flex-direction: column;
2020-04-01 21:36:59 +02:00
> * {
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 {
2020-06-01 19:03:19 +02:00
margin-top: var(--spacing-s);
2020-05-08 03:39:52 +02:00
margin-left: 0;
border-radius: var(--border-radius);
background: transparent;
[role='menuitem'] {
&[data-selected] {
background: transparent;
.channel__list-item {
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);
.channel-thumbnail {
height: 2rem;
width: 2rem;
}
.icon {
2020-05-08 04:17:54 +02:00
color: var(--color-menu-icon);
2020-06-01 19:03:19 +02:00
margin-left: var(--spacing-l);
margin-right: var(--spacing-s);
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);
background-color: var(--color-card-background-highlighted);
2020-03-18 18:11:37 +01:00
}