From 8de0a388fcb5f089f99b5d16b75695255b18d10c Mon Sep 17 00:00:00 2001 From: Chocobozzz Date: Fri, 15 Nov 2024 11:28:39 +0100 Subject: [PATCH] Adjust light colors --- .../my-account-notifications.component.html | 2 +- .../my-videos/my-videos.component.html | 2 +- client/src/app/core/theme/theme.service.ts | 48 ++++------ client/src/app/header/header.component.html | 3 +- client/src/app/header/header.component.scss | 5 +- .../notification-dropdown.component.scss | 7 +- .../header/search-typeahead.component.scss | 3 +- client/src/app/menu/menu.component.scss | 16 ++-- .../menu/horizontal-menu.component.scss | 6 +- .../menu/list-overflow.component.scss | 5 + .../video-thumbnail.component.html | 11 ++- .../video-thumbnail.component.scss | 27 ++++-- .../video-thumbnail.component.ts | 8 +- .../video-filters-header.component.html | 25 +---- .../video-filters-header.component.scss | 79 ++++----------- .../video-filters-header.component.ts | 32 ++++--- .../video-miniature.component.scss | 8 +- .../videos-list.component.html | 8 +- client/src/assets/images/logo.svg | 12 +-- client/src/sass/application.scss | 15 ++- client/src/sass/class-helpers/_buttons.scss | 12 +++ client/src/sass/class-helpers/_menu.scss | 2 +- client/src/sass/class-helpers/_text.scss | 2 +- client/src/sass/include/_miniature.scss | 28 ++++-- client/src/sass/include/_mixins.scss | 95 ++++++++----------- client/src/sass/include/_variables.scss | 43 ++++++++- 26 files changed, 261 insertions(+), 243 deletions(-) diff --git a/client/src/app/+my-account/my-account-notifications/my-account-notifications.component.html b/client/src/app/+my-account/my-account-notifications/my-account-notifications.component.html index 273c2a2ea..a19c772dd 100644 --- a/client/src/app/+my-account/my-account-notifications/my-account-notifications.component.html +++ b/client/src/app/+my-account/my-account-notifications/my-account-notifications.component.html @@ -11,7 +11,7 @@ Notification preferences -
+
diff --git a/client/src/app/core/theme/theme.service.ts b/client/src/app/core/theme/theme.service.ts index 7c2efbc6b..0ce16919d 100644 --- a/client/src/app/core/theme/theme.service.ts +++ b/client/src/app/core/theme/theme.service.ts @@ -1,15 +1,18 @@ import { Injectable } from '@angular/core' +import { HTMLServerConfig, ServerConfigTheme } from '@peertube/peertube-models' import { logger } from '@root-helpers/logger' import { capitalizeFirstLetter } from '@root-helpers/string' import { UserLocalStorageKeys } from '@root-helpers/users' -import { HTMLServerConfig, ServerConfigTheme } from '@peertube/peertube-models' +import { format, parse, toHSLA } from 'color-bits' +import debug from 'debug' import { environment } from '../../../environments/environment' import { AuthService } from '../auth' import { PluginService } from '../plugins/plugin.service' import { ServerService } from '../server' import { UserService } from '../users/user.service' import { LocalStorageService } from '../wrappers/storage.service' -import { darken, lighten, format, parse, blend } from 'color-bits' + +const debugLogger = debug('peertube:theme') @Injectable() export class ThemeService { @@ -143,32 +146,17 @@ export class ThemeService { } private injectColorPalette () { - const style = document.body.style + const rootStyle = document.body.style const computedStyle = getComputedStyle(document.body) // FIXME: Remove previously injected properties for (const property of this.oldInjectedProperties) { - style.removeProperty(property) + rootStyle.removeProperty(property) } this.oldInjectedProperties = [] - const lightenRatios = [ - { suffix: 100, value: 0.8 }, - { suffix: 200, value: 0.6 }, - { suffix: 300, value: 0.4 }, - { suffix: 400, value: 0.2 }, - { suffix: 500, value: 0 } - ] - - const darkenRatios = [ - { suffix: 600, value: 0.2 }, - { suffix: 700, value: 0.4 }, - { suffix: 800, value: 0.6 }, - { suffix: 900, value: 0.8 } - ] - - for (const prefix of [ 'primary', 'secondary' ]) { + for (const prefix of [ 'primary', 'secondary', 'main-fg' ]) { const mainColor = computedStyle.getPropertyValue('--' + prefix) if (!mainColor) { @@ -177,14 +165,20 @@ export class ThemeService { } const mainColorParsed = parse(mainColor) - for (const { ratios, color } of [ { ratios: lightenRatios, color: parse('#fff') }, { ratios: darkenRatios, color: parse('#000') } ]) { - for (const ratio of ratios) { - const key = `--${prefix}-${ratio.suffix}` + const mainColorHSL = toHSLA(mainColorParsed) - if (!computedStyle.getPropertyValue(key)) { - style.setProperty(key, format(blend(mainColorParsed, color, ratio.value))) - this.oldInjectedProperties.push(key) - } + for (let i = -8; i <= 8; i++) { + const suffix = 500 + (50 * i) + const key = `--${prefix}-${suffix}` + + if (!computedStyle.getPropertyValue(key)) { + const newLuminance = Math.max(Math.min(100, Math.round(mainColorHSL.l + (i * 5 * -1))), 0) + const newColor = `hsl(${Math.round(mainColorHSL.h)} ${Math.round(mainColorHSL.s)}% ${newLuminance}% / ${mainColorHSL.a})` + + rootStyle.setProperty(key, newColor) + this.oldInjectedProperties.push(key) + + debugLogger(`Injected theme palette ${key} -> ${newColor}`) } } } diff --git a/client/src/app/header/header.component.html b/client/src/app/header/header.component.html index 370d5cd32..64e31c672 100644 --- a/client/src/app/header/header.component.html +++ b/client/src/app/header/header.component.html @@ -1,6 +1,7 @@
- + + {{ instanceName }} diff --git a/client/src/app/header/header.component.scss b/client/src/app/header/header.component.scss index 92befec45..9dc144d3d 100644 --- a/client/src/app/header/header.component.scss +++ b/client/src/app/header/header.component.scss @@ -23,13 +23,14 @@ } } - .icon.icon-logo { + .icon-logo { display: inline-block; width: 34px; height: 34px; background-repeat: no-repeat; + @include margin-left(18px); @include margin-right(10px); } } @@ -69,7 +70,7 @@ } .username { - color: pvar(--secondary); + color: pvar(--main-fg-400); } > .dropdown-toggle { diff --git a/client/src/app/header/notification-dropdown.component.scss b/client/src/app/header/notification-dropdown.component.scss index a7308276f..f148dfa71 100644 --- a/client/src/app/header/notification-dropdown.component.scss +++ b/client/src/app/header/notification-dropdown.component.scss @@ -116,10 +116,11 @@ align-items: center; justify-content: center; - background-color: pvar(--mainColor); - color: #fff; + background-color: pvar(--primary-400); + color: pvar(--main-fg-500); + border: 1px solid pvar(--main-fg-500); + font-weight: $font-bold; font-size: 10px; - font-weight: $font-semibold; border-radius: 16px; width: 16px; diff --git a/client/src/app/header/search-typeahead.component.scss b/client/src/app/header/search-typeahead.component.scss index d3ff19a34..1419b1874 100644 --- a/client/src/app/header/search-typeahead.component.scss +++ b/client/src/app/header/search-typeahead.component.scss @@ -3,9 +3,8 @@ #search-video { text-overflow: ellipsis; - line-height: 42px; - @include peertube-input-text(270px, 14px); + @include peertube-input-text(270px); & { padding-inline-start: 42px; // For the search icon diff --git a/client/src/app/menu/menu.component.scss b/client/src/app/menu/menu.component.scss index 8dc82eb5b..d29561953 100644 --- a/client/src/app/menu/menu.component.scss +++ b/client/src/app/menu/menu.component.scss @@ -30,11 +30,11 @@ } .toggle-menu { - color: pvar(--secondary); + color: pvar(--secondary-750); width: 24px; height: 24px; border-radius: 100%; - background-color: pvar(--secondary-400); + background-color: pvar(--secondary-450); @include button-with-icon(20px, 0, 0, 1px); @@ -49,7 +49,7 @@ .menu-container:not(.collapsed) .toggle-menu { position: absolute; - top: 20px; + top: 22px; @include right(24px); } @@ -89,7 +89,7 @@ padding-top: 1.5rem; padding-bottom: 1.5rem; border-radius: 14px; - background-color: pvar(--secondary-300); + background-color: pvar(--secondary-400); } .menu-link, @@ -107,7 +107,7 @@ content: ''; display: block; height: 2px; - background: pvar(--secondary); + background: pvar(--secondary-450); margin: 1rem var(--menuXPadding); } } @@ -144,7 +144,7 @@ display: flex; align-items: center; - color: pvar(--fg); + color: pvar(--main-fg-450); color: #2b2f32; white-space: normal; word-break: break-word; @@ -170,7 +170,7 @@ line-height: 22px; position: relative; top: -1px; - color: pvar(--secondary); + color: pvar(--secondary-750); + *:not(.visually-hidden) { @include margin-left(12px); @@ -185,6 +185,6 @@ .about { .description { font-size: 14px; - color: pvar(--secondary-text-emphasis); + color: pvar(--main-fg-300); } } diff --git a/client/src/app/shared/shared-main/menu/horizontal-menu.component.scss b/client/src/app/shared/shared-main/menu/horizontal-menu.component.scss index 95479dd2a..b526fd729 100644 --- a/client/src/app/shared/shared-main/menu/horizontal-menu.component.scss +++ b/client/src/app/shared/shared-main/menu/horizontal-menu.component.scss @@ -3,11 +3,11 @@ .root { width: 100%; - border-bottom: 1px solid pvar(--secondary-text-emphasis); + border-bottom: 1px solid pvar(--main-fg-300); } .x-menu-entry { - color: pvar(--secondary); + color: pvar(--secondary-750); display: inline-block; font-weight: $font-bold; white-space: nowrap; @@ -24,7 +24,7 @@ content: ''; display: block; height: 4px; - background-color: pvar(--primary); + background-color: pvar(--primary-500); border-radius: 2px; position: absolute; bottom: -2px; diff --git a/client/src/app/shared/shared-main/menu/list-overflow.component.scss b/client/src/app/shared/shared-main/menu/list-overflow.component.scss index 5d6054943..b7930f632 100644 --- a/client/src/app/shared/shared-main/menu/list-overflow.component.scss +++ b/client/src/app/shared/shared-main/menu/list-overflow.component.scss @@ -5,6 +5,11 @@ width: 100%; } +li { + // Fix child outline on focus-visible + padding-top: 2px; +} + .list-overflow-parent { display: flex; align-items: center; diff --git a/client/src/app/shared/shared-thumbnail/video-thumbnail.component.html b/client/src/app/shared/shared-thumbnail/video-thumbnail.component.html index 1059204de..f98fedbbe 100644 --- a/client/src/app/shared/shared-thumbnail/video-thumbnail.component.html +++ b/client/src/app/shared/shared-thumbnail/video-thumbnail.component.html @@ -27,9 +27,14 @@
@if (video.isLive) { -
- LIVE - LIVE ENDED +
+ @if (isLiveStreaming()) { + LIVE + } @else if (isEndedLive()) { + LIVE ENDED + } @else { + WAIT LIVE + }
} @else {
{{ video.durationLabel }}
diff --git a/client/src/app/shared/shared-thumbnail/video-thumbnail.component.scss b/client/src/app/shared/shared-thumbnail/video-thumbnail.component.scss index 0c3dc67a5..6797fb596 100644 --- a/client/src/app/shared/shared-thumbnail/video-thumbnail.component.scss +++ b/client/src/app/shared/shared-thumbnail/video-thumbnail.component.scss @@ -23,8 +23,8 @@ .label-overlay, .duration-overlay, .live-overlay { - font-size: 12px; - line-height: 1.1; + font-size: 0.75rem; + line-height: normal; z-index: z(miniature); @include static-thumbnail-overlay; @@ -39,7 +39,7 @@ font-weight: $font-bold; &.warning { background-color: #ffa500; } - &.danger { background-color: #ff0000; } + &.danger { background-color: pvar(--red); } } .duration-overlay, @@ -53,10 +53,23 @@ .live-overlay { font-weight: $font-bold; - color: #fff; + color: pvar(--secondary-300); - &:not(.live-ended) { - background-color: rgba(224, 8, 8, 0.7); + &.live-streaming { + color: pvar(--secondary-300); + + &::before { + content: ''; + display: inline-block; + width: 6px; + height: 6px; + border-radius: 100%; + background-color: pvar(--primary); + position: relative; + top: -1px; + + @include margin-right(8px); + } } } @@ -83,6 +96,6 @@ width: 22px; height: 22px; - @include apply-svg-color(#fff); + color: pvar(--secondary-300); } } diff --git a/client/src/app/shared/shared-thumbnail/video-thumbnail.component.ts b/client/src/app/shared/shared-thumbnail/video-thumbnail.component.ts index 013078c7b..a65ff99f6 100644 --- a/client/src/app/shared/shared-thumbnail/video-thumbnail.component.ts +++ b/client/src/app/shared/shared-thumbnail/video-thumbnail.component.ts @@ -46,10 +46,12 @@ export class VideoThumbnailComponent { return this.addToWatchLaterText } - isLiveEnded () { - if (!this.video.state) return + isLiveStreaming () { + return this.video.isLive && this.video.state?.id === VideoState.PUBLISHED + } - return this.video.state.id === VideoState.LIVE_ENDED + isEndedLive () { + return this.video.state?.id === VideoState.LIVE_ENDED } getImageUrl () { diff --git a/client/src/app/shared/shared-video-miniature/video-filters-header.component.html b/client/src/app/shared/shared-video-miniature/video-filters-header.component.html index dd8854c5b..c7a70eee7 100644 --- a/client/src/app/shared/shared-video-miniature/video-filters-header.component.html +++ b/client/src/app/shared/shared-video-miniature/video-filters-header.component.html @@ -10,9 +10,11 @@
-
+
+
{{ getActiveFilters() }}
+ - -
- - {{ activeFilter.label }} - - : {{ getFilterValue(activeFilter) }} - - - -
diff --git a/client/src/app/shared/shared-video-miniature/video-filters-header.component.scss b/client/src/app/shared/shared-video-miniature/video-filters-header.component.scss index 2177aef5a..e002bc32e 100644 --- a/client/src/app/shared/shared-video-miniature/video-filters-header.component.scss +++ b/client/src/app/shared/shared-video-miniature/video-filters-header.component.scss @@ -1,6 +1,8 @@ @use '_variables' as *; @use '_mixins' as *; +$filters-background: pvar(--secondary-400); + .root { margin-bottom: 45px; } @@ -8,19 +10,15 @@ .first-row { display: flex; justify-content: space-between; -} - -.active-filters { - display: flex; - flex-wrap: wrap; + align-items: center; } .filters { display: flex; flex-wrap: wrap; - margin-top: 25px; - - border-bottom: 1px solid $separator-border-color; + background-color: $filters-background; + padding: 1.5rem; + border-radius: 14px; input[type=radio] + label { font-weight: $font-regular; @@ -43,68 +41,33 @@ } } -.pastille { - border-radius: 24px; - padding: 4px 15px; - margin-bottom: 15px; - cursor: pointer; - - @include margin-right(15px); - - &:focus-visible { - outline: pvar(--mainColor) auto 1px; - } +.filters-summary { + color: pvar(--main-fg-300); } .filters-toggle { - border: 2px solid pvar(--mainForegroundColor); + padding: 6px 0.25rem calc(6px + 0.5rem) 0.5rem; + + @include margin-left(0.25rem); my-global-icon { @include margin-left(5px); } - &.active my-global-icon { - position: relative; - top: -1px; - } - - &:not(.active) { - my-global-icon ::ng-deep svg { - transform: rotate(180deg); - } - } -} - -// Than have an icon -.filters-toggle, -.active-filter.can-remove { - padding: 4px 11px 4px 15px; -} - -.active-filter { - background-color: pvar(--channelBackgroundColor); - display: flex; - align-items: center; - - &:not(.can-remove) { - cursor: default; - } - - &.can-remove:hover { - opacity: 0.9; - } - - > .remove-button { - border: 0; - padding: 0; - - @include margin-left(10px); + &.active { + background-color: $filters-background; + border-start-start-radius: 14px; + border-start-end-radius: 14px; my-global-icon { - width: 16px; - color: pvar(--greyForegroundColor); + position: relative; + top: -1px; } } + + &:not(.active) my-global-icon ::ng-deep svg { + transform: rotate(180deg); + } } .sort { diff --git a/client/src/app/shared/shared-video-miniature/video-filters-header.component.ts b/client/src/app/shared/shared-video-miniature/video-filters-header.component.ts index 08828c6f7..f2d7023e6 100644 --- a/client/src/app/shared/shared-video-miniature/video-filters-header.component.ts +++ b/client/src/app/shared/shared-video-miniature/video-filters-header.component.ts @@ -140,21 +140,29 @@ export class VideoFiltersHeaderComponent implements OnInit, OnDestroy { return serverConfig.trending.videos.algorithms.enabled.includes(sort) } - resetFilter (key: string, canRemove: boolean) { - if (!canRemove) return + getActiveFilters () { + const store: string[] = [] - this.filters.reset(key) - this.patchForm(false) - this.filtersChanged.emit() + for (const activeFilter of this.filters.getActiveFilters()) { + if (activeFilter.value) { + store.push($localize`${activeFilter.label}\: ${this.getFilterValue(activeFilter)}`) + } else { + store.push(activeFilter.label) + } + } + + const output = store.reduce((p, c) => { + if (!p) return c + + return $localize`${p}, ${c}` + }, '') + + if (output) return `${output}.` + + return output } - getFilterTitle (canRemove: boolean) { - if (canRemove) return $localize`Remove this filter` - - return '' - } - - getFilterValue (filter: VideoFilterActive) { + private getFilterValue (filter: VideoFilterActive) { if ((filter.key === 'categoryOneOf' || filter.key === 'languageOneOf') && Array.isArray(filter.rawValue)) { if (filter.rawValue.length > 2) { return filter.rawValue.length diff --git a/client/src/app/shared/shared-video-miniature/video-miniature.component.scss b/client/src/app/shared/shared-video-miniature/video-miniature.component.scss index ebd1e3002..73a4f9c45 100644 --- a/client/src/app/shared/shared-video-miniature/video-miniature.component.scss +++ b/client/src/app/shared/shared-video-miniature/video-miniature.component.scss @@ -34,15 +34,19 @@ $more-button-width: 40px; font-size: var(--fs-small); } +.date-and-views { + color: pvar(--main-fg-300); +} + .owner-label { display: block; - color: pvar(--greyForegroundColor); + color: pvar(--main-fg-500); @include disable-default-a-behaviour; @include ellipsis; &:hover { - color: $grey-foreground-hover-color; + color: pvar(--main-fg-600); } } diff --git a/client/src/app/shared/shared-video-miniature/videos-list.component.html b/client/src/app/shared/shared-video-miniature/videos-list.component.html index d75be5e5c..d910d54cb 100644 --- a/client/src/app/shared/shared-video-miniature/videos-list.component.html +++ b/client/src/app/shared/shared-video-miniature/videos-list.component.html @@ -1,6 +1,6 @@
-
-
+
+
@if (action.routerLink) { {{ action.label }} @@ -10,8 +10,8 @@
diff --git a/client/src/assets/images/logo.svg b/client/src/assets/images/logo.svg index 5daccedd0..7efe4f14b 100644 --- a/client/src/assets/images/logo.svg +++ b/client/src/assets/images/logo.svg @@ -1,8 +1,6 @@ - - - - - - - + + + + + diff --git a/client/src/sass/application.scss b/client/src/sass/application.scss index 0bf2f8a8b..64f21c51a 100644 --- a/client/src/sass/application.scss +++ b/client/src/sass/application.scss @@ -68,16 +68,13 @@ body { --mainColWidth: calc(100vw - #{$menu-width}); // Create a theme system using CSS variables - --fg: #0A0A0A; - --bg :#E9DFDF; + --fg: #{pvar(--main-fg-600)}; + --bg: #{pvar(--secondary-300)}; - --primary: #FF8F37; + --primary: #F2690D; - --secondary: #8D7777; - // --secondary-300: #E9DFDF; - // --secondary-400: #D4C7C7; - - --secondary-text-emphasis: #553D3D; + --main-fg: hsl(0 14% 12%); + --secondary: hsl(0 10% 76%); font-family: $main-fonts; font-weight: $font-regular; @@ -315,7 +312,7 @@ my-global-icon[iconName=external-link] { ngx-loading-bar { .ngx-bar { - height: 4px !important; + height: 3px !important; border-radius: 0 !important; border-start-end-radius: 6px !important; border-end-end-radius: 6px !important; diff --git a/client/src/sass/class-helpers/_buttons.scss b/client/src/sass/class-helpers/_buttons.scss index 4209d95cb..2b61a3c2a 100644 --- a/client/src/sass/class-helpers/_buttons.scss +++ b/client/src/sass/class-helpers/_buttons.scss @@ -1,3 +1,4 @@ +@use '_variables' as *; @use '_mixins' as *; .peertube-button { @@ -58,3 +59,14 @@ padding: 0; border: 0; } + +.peertube-button-like-link { + padding: 0; + border: 0 !important; + text-decoration: underline; + color: pvar(--main-fg-500); + + &:hover { + color: pvar(--main-fg-200); + } +} diff --git a/client/src/sass/class-helpers/_menu.scss b/client/src/sass/class-helpers/_menu.scss index a34f0933b..6b404bbb1 100644 --- a/client/src/sass/class-helpers/_menu.scss +++ b/client/src/sass/class-helpers/_menu.scss @@ -16,7 +16,7 @@ @include margin-right(55px); &.active { - border-bottom-color: pvar(--primary); + border-bottom-color: pvar(--primary-500); } &:hover, diff --git a/client/src/sass/class-helpers/_text.scss b/client/src/sass/class-helpers/_text.scss index 37a952788..a829a65e6 100644 --- a/client/src/sass/class-helpers/_text.scss +++ b/client/src/sass/class-helpers/_text.scss @@ -43,7 +43,7 @@ content: ''; display: block; height: 4px; - background-color: pvar(--primary); + background-color: pvar(--primary-500); border-radius: 2px; position: absolute; width: 20px; diff --git a/client/src/sass/include/_miniature.scss b/client/src/sass/include/_miniature.scss index 09365b800..a953f9b7d 100644 --- a/client/src/sass/include/_miniature.scss +++ b/client/src/sass/include/_miniature.scss @@ -1,3 +1,4 @@ +@use 'sass:math'; @use '_variables' as *; @use '_mixins' as *; @@ -44,7 +45,7 @@ width: inherit; height: inherit; opacity: 0; - background-color: rgba(0, 0, 0, 0.3); + background-color: rgba(46, 35, 35, 0.80); &, .icon { @@ -53,6 +54,24 @@ .icon { @include play-icon($play-overlay-width, $play-overlay-height); + + &::before { + $background-play-size: 49px; + + display: block; + content: ''; + width: $background-play-size; + height: $background-play-size; + + top: math.round(math.div($background-play-size, 2)) * -1; + // Add some pixels at the end because it's visually better + right: #{math.round(math.div($background-play-size - $play-overlay-width, 2)) * -1 + 3}; + + border-radius: 100%; + position: absolute; + background-color: pvar(--primary-450); + opacity: 0.3; + } } } @@ -68,11 +87,6 @@ } } - &:focus-visible { - box-shadow: #{$focus-box-shadow-form} pvar(--mainColorLightest); - outline: none; - } - img { width: inherit; height: inherit; @@ -94,7 +108,7 @@ @mixin static-thumbnail-overlay { display: inline-block; background-color: rgba(17, 17, 17, 0.8); - color: #fff; + color: pvar(--secondary-400); } // Use margin by default, or padding if $margin is false diff --git a/client/src/sass/include/_mixins.scss b/client/src/sass/include/_mixins.scss index 89491cfe4..f97603ddc 100644 --- a/client/src/sass/include/_mixins.scss +++ b/client/src/sass/include/_mixins.scss @@ -84,15 +84,10 @@ line-height: calc(#{$font-size} + #{math.round(math.div($font-size, 2))}); } -@mixin rounded-line-height-1-42 ($font-size) { - line-height: math.round($font-size * 1.4285714286); -} - @mixin peertube-input-text($width, $font-size: $form-input-font-size) { font-size: $font-size; padding: 6px 20px; - line-height: 1.66; width: $width; max-width: $width; color: pvar(--inputForegroundColor); @@ -100,16 +95,24 @@ border: 1px solid pvar(--inputBorderColor); border-radius: 4px; - @include rounded-line-height-1-42($font-size); + @include rounded-line-height-1-5($font-size); &::placeholder { color: pvar(--inputPlaceholderColor); + font-size: 14px; } &[readonly] { color: pvar(--greyForegroundColor); } + &:focus, + &:focus-visible { + outline: 0; + border-color: pvar(--fg); + box-shadow: none; + } + @media screen and (max-width: calc(#{$width} + 40px)) { width: 100%; } @@ -131,8 +134,8 @@ &:active, &:focus { color: pvar(--fg); - background-color: pvar(--primary); - border: 1px solid pvar(--primary); + background-color: pvar(--primary-450); + border: 1px solid pvar(--primary-450); } // Override bootstrap @@ -140,8 +143,8 @@ &.btn:focus-visible, &.btn.show { color: pvar(--fg) !important; - background-color: pvar(--primary) !important; - border: 1px solid pvar(--primary) !important; + background-color: pvar(--primary-450) !important; + border: 1px solid pvar(--primary-450) !important; } &:hover { @@ -155,7 +158,7 @@ } my-global-icon { - @include apply-svg-color(pvar(--fg)); + color: pvar(--fg); } } @@ -164,15 +167,15 @@ & { color: pvar(--fg); background-color: transparent; - border: 1px solid pvar(--secondary-400); + border: 1px solid pvar(--secondary-500); } &:active, &:focus, &:focus-visible { color: pvar(--fg); - background-color: pvar(--secondary); - border-color: pvar(--secondary); + background-color: pvar(--secondary-450); + border-color: pvar(--secondary-500); } // Override bootstrap @@ -180,13 +183,13 @@ &.btn:focus-visible, &.btn.show { color: pvar(--fg) !important; - background-color: pvar(--secondary) !important; - border-color: pvar(--secondary) !important; + background-color: pvar(--secondary-450) !important; + border-color: pvar(--secondary-500) !important; } &:hover { color: pvar(--fg); - background-color: pvar(--secondary-400); + background-color: pvar(--secondary-450); } &[disabled] { @@ -195,18 +198,18 @@ } my-global-icon { - @include apply-svg-color(pvar(--secondary-400)); + color: pvar(--secondary-750); } } @mixin tertiary-button { - color: pvar(--secondary); + color: pvar(--main-fg-300); background-color: transparent; border: 1px solid transparent; &:hover { - color: pvar(--secondary); - background-color: pvar(--secondary-300); + color: pvar(--main-fg-300); + background-color: pvar(--secondary-400); } &[disabled] { @@ -214,11 +217,11 @@ } &:active { - background-color: pvar(--secondary-200); + background-color: pvar(--secondary-450); } &.show { - border-color: pvar(--secondary); + border-color: pvar(--main-fg-300); } // Override bootstrap @@ -227,10 +230,8 @@ } &.btn.show { - border-color: pvar(--secondary) !important; + border-color: pvar(--main-fg-300) !important; } - - @include button-focus(--secondary); } @mixin rounded-icon-button { @@ -323,14 +324,6 @@ @include peertube-button-big; } -@mixin peertube-button-outline { - display: inline-block; - border: 1px solid; - - @include disable-default-a-behaviour; - @include peertube-button; -} - @mixin button-with-icon($width: 20px, $margin-right: 3px, $top: -1px, $right: 0) { my-global-icon { position: relative; @@ -402,9 +395,7 @@ position: relative; height: min-content; - select[disabled] { - background-color: #f9f9f9; - } + @include secondary-button; @media screen and (max-width: $width) { width: 100%; @@ -419,7 +410,7 @@ position: absolute; pointer-events: none; border: 5px solid rgba(0, 0, 0, 0); - border-top-color: pvar(--mainForegroundColor); + border-top-color: pvar(--secondary); margin-top: -2px; z-index: 100; } @@ -427,31 +418,21 @@ select { font-size: $form-input-font-size; - padding: 3px 35px 3px 12px; + font-weight: $font-semibold; + padding: 6px 43px 6px 20px; position: relative; - border: 1px solid pvar(--inputBorderColor); + border: 0; background: transparent none; appearance: none; text-overflow: ellipsis; - color: pvar(--mainForegroundColor); @include rounded-line-height-1-5($form-input-font-size); - option { - color: #000; - } - } - - &.peertube-select-button { - @include secondary-button; - - select { - font-weight: $font-semibold; - color: pvar(--greyForegroundColor); - border: 0; - - // No border, add +1 to vertical padding - padding: 4px 35px 4px 12px; + &:focus, + &:focus-visible { + outline: 0; + border-color: pvar(--fg); + box-shadow: none; } } } @@ -747,7 +728,7 @@ border-top: #{math.div($height, 2)} solid transparent; border-bottom: #{math.div($height, 2)} solid transparent; - border-left: $width solid rgba(255, 255, 255, 0.95); + border-left: $width solid pvar(--secondary-300); } @mixin on-small-main-col () { diff --git a/client/src/sass/include/_variables.scss b/client/src/sass/include/_variables.scss index 7e3c3e317..8fd596de0 100644 --- a/client/src/sass/include/_variables.scss +++ b/client/src/sass/include/_variables.scss @@ -88,7 +88,7 @@ $sub-menu-margin-bottom-small-view: 10px; $activated-action-button-color: #212529; $focus-box-shadow-form: 0 0 0 .2rem; -$form-input-font-size: 14px; +$form-input-font-size: 16px; $video-watch-info-margin-left: 44px; @@ -149,19 +149,56 @@ $variables: ( --fg: var(--fg), --bg: var(--bg), + --main-fg: var(--main-fg), + --main-fg-800: var(--main-fg-800), + --main-fg-750: var(--main-fg-750), + --main-fg-700: var(--main-fg-700), + --main-fg-650: var(--main-fg-650), + --main-fg-600: var(--main-fg-600), + --main-fg-550: var(--main-fg-550), + --main-fg-500: var(--main-fg-500), + --main-fg-450: var(--main-fg-450), + --main-fg-400: var(--main-fg-400), + --main-fg-350: var(--main-fg-350), + --main-fg-300: var(--main-fg-300), + --main-fg-250: var(--main-fg-250), + --main-fg-200: var(--main-fg-200), + --main-fg-150: var(--main-fg-150), + --main-fg-100: var(--main-fg-100), + --primary: var(--primary), + --primary-800: var(--primary-800), + --primary-750: var(--primary-750), --primary-700: var(--primary-700), + --primary-650: var(--primary-650), --primary-600: var(--primary-600), + --primary-550: var(--primary-550), + --primary-500: var(--primary-500), + --primary-450: var(--primary-450), --primary-400: var(--primary-400), + --primary-350: var(--primary-350), --primary-300: var(--primary-300), + --primary-250: var(--primary-250), --primary-200: var(--primary-200), + --primary-150: var(--primary-150), + --primary-100: var(--primary-100), --secondary: var(--secondary), + --secondary-800: var(--secondary-800), + --secondary-750: var(--secondary-750), + --secondary-700: var(--secondary-700), + --secondary-650: var(--secondary-650), + --secondary-600: var(--secondary-600), + --secondary-550: var(--secondary-550), + --secondary-500: var(--secondary-500), + --secondary-450: var(--secondary-450), --secondary-400: var(--secondary-400), + --secondary-350: var(--secondary-350), --secondary-300: var(--secondary-300), + --secondary-250: var(--secondary-250), --secondary-200: var(--secondary-200), - - --secondary-text-emphasis: var(--secondary-text-emphasis) + --secondary-150: var(--secondary-150), + --secondary-100: var(--secondary-100) ); // SASS type check our CSS variables