diff --git a/ui/scss/component/_channel.scss b/ui/scss/component/_channel.scss index 342c09a5e..bf04fb3a9 100644 --- a/ui/scss/component/_channel.scss +++ b/ui/scss/component/_channel.scss @@ -38,6 +38,8 @@ $metadata-z-index: 1; width: 5rem; background-size: cover; margin-right: var(--spacing-medium); + margin-top: var(--spacing-large); + box-shadow: var(--card-box-shadow); } .channel-thumbnail--small { @@ -103,11 +105,13 @@ $metadata-z-index: 1; padding-left: calc(var(--channel-thumbnail-width) + var(--spacing-large)); padding-right: var(--spacing-medium); padding-bottom: var(--spacing-medium); + margin-top: var(--spacing-xlarge); min-width: 0; width: 100%; @media (max-width: $breakpoint-small) { padding-left: var(--spacing-medium); + margin-top: 0; } } diff --git a/ui/scss/init/_vars.scss b/ui/scss/init/_vars.scss index 58887b7e5..88bd62254 100644 --- a/ui/scss/init/_vars.scss +++ b/ui/scss/init/_vars.scss @@ -53,7 +53,7 @@ $breakpoint-medium: 1150px; // Image --thumbnail-preview-height: 100px; --thumbnail-preview-width: 177px; - --cover-photo-height: 180px; + --cover-photo-height: 210px; --channel-thumbnail-width: 10rem; --channel-thumbnail-width--small: 4rem; --file-list-thumbnail-width: 10rem; diff --git a/ui/scss/themes/light.scss b/ui/scss/themes/light.scss index 031f0fa10..11fbc7057 100644 --- a/ui/scss/themes/light.scss +++ b/ui/scss/themes/light.scss @@ -42,7 +42,7 @@ --color-card-background-highlighted: #f6faff; --color-list-header: #fff; --color-file-viewer-background: var(--color-card-background); - --color-tabs-background: var(--color-primary-alt); + --color-tabs-background: var(--color-card-background); --color-tab-divider: var(--color-primary); --color-modal-background: var(--color-card-background);