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

187 lines
3.8 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;
.button {
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-09-27 05:52:04 +02:00
filter: brightness(30%);
2019-05-07 04:35:04 +02:00
}
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);
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);
2020-01-08 06:04:35 +01:00
@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-xlarge) + var(--spacing-medium));
}
}
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;
2019-06-11 20:10:58 +02:00
margin-right: var(--spacing-medium);
}
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);
left: var(--spacing-medium);
2019-11-22 22:13:00 +01:00
top: 4rem;
2019-12-18 06:27:08 +01:00
@media (max-width: $breakpoint-small) {
display: none;
}
}
2019-05-11 21:06:22 +02:00
.channel-thumbnail__custom {
2019-05-07 04:35:04 +02:00
width: 100%;
object-fit: cover;
}
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
2019-06-11 20:10:58 +02:00
padding-left: calc(var(--channel-thumbnail-width) + var(--spacing-large));
2019-09-27 05:52:04 +02:00
padding-right: var(--spacing-medium);
2019-06-11 20:10:58 +02:00
padding-bottom: var(--spacing-medium);
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) {
padding-left: var(--spacing-medium);
}
2019-05-07 04:35:04 +02:00
}
.channel__title {
2019-11-22 22:13:00 +01:00
display: inline;
2019-07-14 00:34:13 +02:00
margin-right: var(--spacing-small);
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-medium);
}
2020-01-08 06:04:35 +01:00
@media (max-width: $breakpoint-small) {
padding-top: var(--spacing-xlarge);
}
2019-05-07 04:35:04 +02:00
}
2019-09-27 05:52:04 +02:00
.channel__meta {
display: flex;
justify-content: space-between;
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 {
@extend .card__actions;
2020-01-08 06:04:35 +01:00
margin-left: var(--spacing-medium);
2019-09-16 07:32:02 +02:00
position: absolute;
top: 0;
right: var(--spacing-medium);
2019-11-22 22:13:00 +01:00
margin-top: var(--spacing-medium);
2019-09-16 07:32:02 +02:00
z-index: $metadata-z-index;
2020-01-08 06:04:35 +01:00
flex-wrap: wrap;
2019-09-16 07:32:02 +02:00
}
2020-01-21 23:38:10 +01:00
.channel-name--inline {
margin-left: var(--spacing-xsmall);
}
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);
padding: var(--spacing-small);
border-bottom: 1px solid var(--color-border);
.channel-thumbnail {
height: 2rem;
width: 2rem;
}
.icon {
margin-left: var(--spacing-large);
margin-right: var(--spacing-small);
}
&:hover {
background-color: var(--color-card-background-highlighted);
}
}
.channel__list-item--selected {
border-radius: var(--border-radius);
border: 1px solid var(--color-border);
}