diff options
Diffstat (limited to 'app/assets/stylesheets/themes')
-rw-r--r-- | app/assets/stylesheets/themes/_dark.scss | 6 | ||||
-rw-r--r-- | app/assets/stylesheets/themes/theme_blue.scss | 9 | ||||
-rw-r--r-- | app/assets/stylesheets/themes/theme_gray.scss | 9 | ||||
-rw-r--r-- | app/assets/stylesheets/themes/theme_green.scss | 9 | ||||
-rw-r--r-- | app/assets/stylesheets/themes/theme_helper.scss | 60 | ||||
-rw-r--r-- | app/assets/stylesheets/themes/theme_indigo.scss | 9 | ||||
-rw-r--r-- | app/assets/stylesheets/themes/theme_light_blue.scss | 9 | ||||
-rw-r--r-- | app/assets/stylesheets/themes/theme_light_green.scss | 9 | ||||
-rw-r--r-- | app/assets/stylesheets/themes/theme_light_indigo.scss | 9 | ||||
-rw-r--r-- | app/assets/stylesheets/themes/theme_light_red.scss | 9 | ||||
-rw-r--r-- | app/assets/stylesheets/themes/theme_red.scss | 9 |
11 files changed, 147 insertions, 0 deletions
diff --git a/app/assets/stylesheets/themes/_dark.scss b/app/assets/stylesheets/themes/_dark.scss index c471d6183d8..36fa457f244 100644 --- a/app/assets/stylesheets/themes/_dark.scss +++ b/app/assets/stylesheets/themes/_dark.scss @@ -19,6 +19,12 @@ $gray-dark: darken($gray-100, 2); $gray-darker: darken($gray-200, 2); $gray-darkest: $gray-700; +// Some of the other $t-gray-a variables are used +// for borders and some other places, so we cannot override +// them. These are used only for box shadows so we can +$t-gray-a-16: rgba($gray-10, 0.16); +$t-gray-a-24: rgba($gray-10, 0.24); + $black: #fff; $black-normal: $gray-900; $white: $gray-50; diff --git a/app/assets/stylesheets/themes/theme_blue.scss b/app/assets/stylesheets/themes/theme_blue.scss index 90122cec31f..06f3e13e99e 100644 --- a/app/assets/stylesheets/themes/theme_blue.scss +++ b/app/assets/stylesheets/themes/theme_blue.scss @@ -9,5 +9,14 @@ body { $theme-blue-900, $white ); + + .page-with-super-sidebar { + @include gitlab-theme-super-sidebar( + $theme-blue-50, + $theme-blue-200, + $theme-blue-900, + $theme-blue-900, + ); + } } } diff --git a/app/assets/stylesheets/themes/theme_gray.scss b/app/assets/stylesheets/themes/theme_gray.scss index a6cdfb36a7c..3112aaef227 100644 --- a/app/assets/stylesheets/themes/theme_gray.scss +++ b/app/assets/stylesheets/themes/theme_gray.scss @@ -9,5 +9,14 @@ body { $gray-900, $white ); + + .page-with-super-sidebar { + @include gitlab-theme-super-sidebar( + $gray-50, + $gray-100, + $gray-900, + $gray-900, + ); + } } } diff --git a/app/assets/stylesheets/themes/theme_green.scss b/app/assets/stylesheets/themes/theme_green.scss index 0300f261d64..c9ea1162206 100644 --- a/app/assets/stylesheets/themes/theme_green.scss +++ b/app/assets/stylesheets/themes/theme_green.scss @@ -9,5 +9,14 @@ body { $theme-green-900, $white ); + + .page-with-super-sidebar { + @include gitlab-theme-super-sidebar( + $theme-green-50, + $theme-green-200, + $theme-green-900, + $theme-green-900, + ); + } } } diff --git a/app/assets/stylesheets/themes/theme_helper.scss b/app/assets/stylesheets/themes/theme_helper.scss index f841a9047cc..8f0e0781918 100644 --- a/app/assets/stylesheets/themes/theme_helper.scss +++ b/app/assets/stylesheets/themes/theme_helper.scss @@ -276,3 +276,63 @@ } } } + +@mixin gitlab-theme-super-sidebar( + $theme-color-lightest, + $theme-color-light, + $theme-color, + $theme-color-darkest, +) { + --transparent-white-16: rgba(255, 255, 255, 0.16); + --transparent-white-24: rgba(255, 255, 255, 0.24); + + .super-sidebar { + background-color: $theme-color-lightest; + } + + .super-sidebar .user-bar { + background-color: $theme-color; + + .counter { + background-color: var(--transparent-white-16) !important; + } + + .brand-logo, + .btn-default-tertiary, + .counter { + color: $theme-color-lightest; + mix-blend-mode: normal; + + &:hover, + &:focus { + background-color: var(--transparent-white-24) !important; + color: $white; + } + + .gl-icon { + color: $theme-color-light; + } + } + } + + .super-sidebar hr { + mix-blend-mode: multiply; + } + + .btn-with-notification { + &:hover, + &:focus { + mix-blend-mode: multiply; + } + + .notification-dot-info { + background-color: $theme-color-darkest; + border-color: $theme-color-lightest; + + } + } + + .active-indicator { + background-color: $theme-color; + } +} diff --git a/app/assets/stylesheets/themes/theme_indigo.scss b/app/assets/stylesheets/themes/theme_indigo.scss index 5a27a9cfdc5..78ce96667d4 100644 --- a/app/assets/stylesheets/themes/theme_indigo.scss +++ b/app/assets/stylesheets/themes/theme_indigo.scss @@ -9,5 +9,14 @@ body { $indigo-900, $white ); + + .page-with-super-sidebar { + @include gitlab-theme-super-sidebar( + $theme-indigo-50, + $theme-indigo-200, + $theme-indigo-900, + $theme-indigo-900, + ); + } } } diff --git a/app/assets/stylesheets/themes/theme_light_blue.scss b/app/assets/stylesheets/themes/theme_light_blue.scss index 7cb0d98802e..73fe072393f 100644 --- a/app/assets/stylesheets/themes/theme_light_blue.scss +++ b/app/assets/stylesheets/themes/theme_light_blue.scss @@ -9,5 +9,14 @@ body { $theme-light-blue-700, $white ); + + .page-with-super-sidebar { + @include gitlab-theme-super-sidebar( + $theme-light-blue-50, + $theme-light-blue-200, + $theme-light-blue-700, + $theme-light-blue-900, + ); + } } } diff --git a/app/assets/stylesheets/themes/theme_light_green.scss b/app/assets/stylesheets/themes/theme_light_green.scss index 797279cc37b..720a0ec58b8 100644 --- a/app/assets/stylesheets/themes/theme_light_green.scss +++ b/app/assets/stylesheets/themes/theme_light_green.scss @@ -9,5 +9,14 @@ body { $theme-light-green-700, $white ); + + .page-with-super-sidebar { + @include gitlab-theme-super-sidebar( + $theme-green-50, + $theme-green-200, + $theme-green-700, + $theme-green-900, + ); + } } } diff --git a/app/assets/stylesheets/themes/theme_light_indigo.scss b/app/assets/stylesheets/themes/theme_light_indigo.scss index 3632c5ad45a..ff12366466a 100644 --- a/app/assets/stylesheets/themes/theme_light_indigo.scss +++ b/app/assets/stylesheets/themes/theme_light_indigo.scss @@ -9,5 +9,14 @@ body { $indigo-700, $white ); + + .page-with-super-sidebar { + @include gitlab-theme-super-sidebar( + $theme-indigo-50, + $theme-indigo-200, + $theme-indigo-700, + $theme-indigo-900, + ); + } } } diff --git a/app/assets/stylesheets/themes/theme_light_red.scss b/app/assets/stylesheets/themes/theme_light_red.scss index 6c10d9178f1..3ae67309014 100644 --- a/app/assets/stylesheets/themes/theme_light_red.scss +++ b/app/assets/stylesheets/themes/theme_light_red.scss @@ -9,5 +9,14 @@ body { $theme-light-red-700, $white ); + + .page-with-super-sidebar { + @include gitlab-theme-super-sidebar( + $theme-light-red-50, + $theme-light-red-200, + $theme-light-red-700, + $theme-light-red-900, + ); + } } } diff --git a/app/assets/stylesheets/themes/theme_red.scss b/app/assets/stylesheets/themes/theme_red.scss index 140e27de6e2..82de30e8b0e 100644 --- a/app/assets/stylesheets/themes/theme_red.scss +++ b/app/assets/stylesheets/themes/theme_red.scss @@ -9,5 +9,14 @@ body { $theme-red-900, $white ); + + .page-with-super-sidebar { + @include gitlab-theme-super-sidebar( + $theme-red-50, + $theme-red-200, + $theme-red-900, + $theme-red-900, + ); + } } } |