X-Git-Url: https://git.immae.eu/?a=blobdiff_plain;f=client%2Fsrc%2Fsass%2Finclude%2F_variables.scss;h=43a0057748d958320c64f9f5063542d0f9ce10cb;hb=HEAD;hp=fd1b137dce714101ec0bec1bbad60c7d3e2b3a86;hpb=b788e69131dccc1be147244e5b4d9e64deb2dc76;p=github%2FChocobozzz%2FPeerTube.git diff --git a/client/src/sass/include/_variables.scss b/client/src/sass/include/_variables.scss index fd1b137dc..43a005774 100644 --- a/client/src/sass/include/_variables.scss +++ b/client/src/sass/include/_variables.scss @@ -1,4 +1,5 @@ @use 'sass:math'; +@use 'sass:color'; $small-view: 800px; $mobile-view: 500px; @@ -13,22 +14,21 @@ $grey-background-color: #E5E5E5; $grey-background-hover-color: #EFEFEF; $grey-foreground-color: #585858; $grey-foreground-hover-color: #303030; -$grey-button-outline-color: scale-color($grey-foreground-color, $alpha: -95%); +$grey-button-outline-color: color.scale($grey-foreground-color, $alpha: -95%); $main-color: hsl(24, 90%, 50%); -$main-color-lighter: lighten($main-color, 10%); -$main-color-lightest: lighten($main-color, 40%); +$main-color-lighter: color.adjust($main-color, $lightness: 10%); +$main-color-lightest: color.adjust($main-color, $lightness: 40%); +$main-color-very-light: #fff5eb; -$main-hover-color: lighten($main-color, 5%); +$main-hover-color: color.adjust($main-color, $lightness: 5%); $main-background-hover-color: #e9ecef; -$secondary-color: hsl(187, 77%, 34%); - $support-button: inherit; $support-button-heart: #e83e8c; $bg-color: #fff; -$fg-color: #000; +$fg-color: #212529; $red: #FF0000; $green: #39CC0B; @@ -38,7 +38,7 @@ $grey-actor-name: #777272; $expanded-horizontal-margins: 150px; $not-expanded-horizontal-margins: 30px; -$button-height: 30px; +$button-font-size: 15px; $header-height: 50px; $header-border-color: #e9eff6; @@ -46,7 +46,6 @@ $search-input-width: 375px; $menu-background: #000; $menu-color: #fff; -$menu-bottom-color: #C6C6C6; $menu-width: 240px; $menu-lateral-padding: 26px; @@ -84,6 +83,7 @@ $theater-bottom-space: 115px; $input-foreground-color: $fg-color; $input-background-color: $bg-color; $input-placeholder-color: #898989; +$input-border-color: #C6C6C6; $textarea-foreground-color: $fg-color; $textarea-background-color: $bg-color; @@ -92,9 +92,10 @@ $markdown-textarea-background-color: $grey-background-hover-color; $sub-menu-margin-bottom: 30px; $sub-menu-margin-bottom-small-view: 10px; -$activated-action-button-color: #000; +$activated-action-button-color: #212529; $focus-box-shadow-form: 0 0 0 .2rem; +$form-input-font-size: 15px; $video-watch-player-factor: math.div(16, 9); $video-watch-info-margin-left: 44px; @@ -109,6 +110,7 @@ $variables: ( --mainColor: var(--mainColor), --mainColorLighter: var(--mainColorLighter), --mainColorLightest: var(--mainColorLightest), + --mainColorVeryLight: var(--mainColorVeryLight), --mainHoverColor: var(--mainHoverColor), --mainBackgroundHoverColor: var(--mainBackgroundHoverColor), @@ -116,8 +118,6 @@ $variables: ( --mainBackgroundColor: var(--mainBackgroundColor), --mainForegroundColor: var(--mainForegroundColor), - --secondaryColor: var(--secondaryColor), - --greyForegroundColor: var(--greyForegroundColor), --greyBackgroundColor: var(--greyBackgroundColor), --greySecondaryBackgroundColor: var(--greySecondaryBackgroundColor), @@ -131,6 +131,7 @@ $variables: ( --inputForegroundColor: var(--inputForegroundColor), --inputBackgroundColor: var(--inputBackgroundColor), --inputPlaceholderColor: var(--inputPlaceholderColor), + --inputBorderColor: var(--inputBorderColor), --textareaForegroundColor: var(--textareaForegroundColor), --textareaBackgroundColor: var(--textareaBackgroundColor), @@ -171,13 +172,13 @@ $zindex: ( popover : 13000, tooltip : 14000, loadbar : 15000, - dropdown : 17000, - help-popover : 17000, privacymsg : 17500, - header : 17500, - notification : 18000, + root-header : 17500, + help-popover : 17600, + dropdown : 17600, modal : 19000, - hotkeys : 19000 + hotkeys : 19000, + notification : 20000 ); @function z($label) {