diff options
Diffstat (limited to 'app/assets/stylesheets/themes')
| -rw-r--r-- | app/assets/stylesheets/themes/_dark.scss | 89 | ||||
| -rw-r--r-- | app/assets/stylesheets/themes/theme_blue.scss | 14 | ||||
| -rw-r--r-- | app/assets/stylesheets/themes/theme_dark.scss | 14 | ||||
| -rw-r--r-- | app/assets/stylesheets/themes/theme_green.scss | 14 | ||||
| -rw-r--r-- | app/assets/stylesheets/themes/theme_helper.scss | 204 | ||||
| -rw-r--r-- | app/assets/stylesheets/themes/theme_indigo.scss | 14 | ||||
| -rw-r--r-- | app/assets/stylesheets/themes/theme_light.scss | 129 | ||||
| -rw-r--r-- | app/assets/stylesheets/themes/theme_light_blue.scss | 14 | ||||
| -rw-r--r-- | app/assets/stylesheets/themes/theme_light_green.scss | 14 | ||||
| -rw-r--r-- | app/assets/stylesheets/themes/theme_light_indigo.scss | 14 | ||||
| -rw-r--r-- | app/assets/stylesheets/themes/theme_light_red.scss | 14 | ||||
| -rw-r--r-- | app/assets/stylesheets/themes/theme_red.scss | 14 |
12 files changed, 539 insertions, 9 deletions
diff --git a/app/assets/stylesheets/themes/_dark.scss b/app/assets/stylesheets/themes/_dark.scss index e2b4d6b8e7a..bfbcb8c13c6 100644 --- a/app/assets/stylesheets/themes/_dark.scss +++ b/app/assets/stylesheets/themes/_dark.scss @@ -11,15 +11,6 @@ $gray-800: #f2f2f2; $gray-900: #fafafa; $gray-950: #fff; -$gl-gray-100: #333; -$gl-gray-200: #555; -$gl-gray-350: #666; -$gl-gray-400: #777; -$gl-gray-500: #999; -$gl-gray-600: #aaa; -$gl-gray-700: #ccc; -$gl-gray-800: #ddd; - $green-50: #072b15; $green-100: #0a4020; $green-200: #0e5a2d; @@ -94,6 +85,86 @@ $white-light: #2b2b2b; $white-normal: #333; $white-dark: #444; +$border-color: #4f4f4f; + +body.gl-dark { + --gray-10: #{$gray-10}; + --gray-50: #{$gray-50}; + --gray-100: #{$gray-100}; + --gray-200: #{$gray-200}; + --gray-300: #{$gray-300}; + --gray-400: #{$gray-400}; + --gray-500: #{$gray-500}; + --gray-600: #{$gray-600}; + --gray-700: #{$gray-700}; + --gray-800: #{$gray-800}; + --gray-900: #{$gray-900}; + --gray-950: #{$gray-950}; + + --green-50: #{$green-50}; + --green-100: #{$green-100}; + --green-200: #{$green-200}; + --green-300: #{$green-300}; + --green-400: #{$green-400}; + --green-500: #{$green-500}; + --green-600: #{$green-600}; + --green-700: #{$green-700}; + --green-800: #{$green-800}; + --green-900: #{$green-900}; + --green-950: #{$green-950}; + + --blue-50: #{$blue-50}; + --blue-100: #{$blue-100}; + --blue-200: #{$blue-200}; + --blue-300: #{$blue-300}; + --blue-400: #{$blue-400}; + --blue-500: #{$blue-500}; + --blue-600: #{$blue-600}; + --blue-700: #{$blue-700}; + --blue-800: #{$blue-800}; + --blue-900: #{$blue-900}; + --blue-950: #{$blue-950}; + + --orange-50: #{$orange-50}; + --orange-100: #{$orange-100}; + --orange-200: #{$orange-200}; + --orange-300: #{$orange-300}; + --orange-400: #{$orange-400}; + --orange-500: #{$orange-500}; + --orange-600: #{$orange-600}; + --orange-700: #{$orange-700}; + --orange-800: #{$orange-800}; + --orange-900: #{$orange-900}; + --orange-950: #{$orange-950}; + + --red-50: #{$red-50}; + --red-100: #{$red-100}; + --red-200: #{$red-200}; + --red-300: #{$red-300}; + --red-400: #{$red-400}; + --red-500: #{$red-500}; + --red-600: #{$red-600}; + --red-700: #{$red-700}; + --red-800: #{$red-800}; + --red-900: #{$red-900}; + --red-950: #{$red-950}; + + --indigo-50: #{$indigo-50}; + --indigo-100: #{$indigo-100}; + --indigo-200: #{$indigo-200}; + --indigo-300: #{$indigo-300}; + --indigo-400: #{$indigo-400}; + --indigo-500: #{$indigo-500}; + --indigo-600: #{$indigo-600}; + --indigo-700: #{$indigo-700}; + --indigo-800: #{$indigo-800}; + --indigo-900: #{$indigo-900}; + --indigo-950: #{$indigo-950}; + + --gl-text-color: #{$gray-900}; + --border-color: #{$border-color}; +} + $border-white-light: $gray-900; $border-white-normal: $gray-900; diff --git a/app/assets/stylesheets/themes/theme_blue.scss b/app/assets/stylesheets/themes/theme_blue.scss new file mode 100644 index 00000000000..9f9802f77f4 --- /dev/null +++ b/app/assets/stylesheets/themes/theme_blue.scss @@ -0,0 +1,14 @@ +@import './theme_helper'; + +body { + &.ui-blue { + @include gitlab-theme( + $theme-blue-200, + $theme-blue-500, + $theme-blue-700, + $theme-blue-800, + $theme-blue-900, + $white + ); + } +} diff --git a/app/assets/stylesheets/themes/theme_dark.scss b/app/assets/stylesheets/themes/theme_dark.scss new file mode 100644 index 00000000000..e6db6cd2a5e --- /dev/null +++ b/app/assets/stylesheets/themes/theme_dark.scss @@ -0,0 +1,14 @@ +@import './theme_helper'; + +body { + &.ui-dark { + @include gitlab-theme( + $gray-200, + $gray-300, + $gray-500, + $gray-700, + $gray-900, + $white + ); + } +} diff --git a/app/assets/stylesheets/themes/theme_green.scss b/app/assets/stylesheets/themes/theme_green.scss new file mode 100644 index 00000000000..6dcad6e1301 --- /dev/null +++ b/app/assets/stylesheets/themes/theme_green.scss @@ -0,0 +1,14 @@ +@import './theme_helper'; + +body { + &.ui-green { + @include gitlab-theme( + $theme-green-200, + $theme-green-500, + $theme-green-700, + $theme-green-800, + $theme-green-900, + $white + ); + } +} diff --git a/app/assets/stylesheets/themes/theme_helper.scss b/app/assets/stylesheets/themes/theme_helper.scss new file mode 100644 index 00000000000..85115cfd5d9 --- /dev/null +++ b/app/assets/stylesheets/themes/theme_helper.scss @@ -0,0 +1,204 @@ +@import '../page_bundles/mixins_and_variables_and_functions'; +/** + * Styles the GitLab application with a specific color theme + */ +@mixin gitlab-theme( + $search-and-nav-links, + $active-tab-border, + $border-and-box-shadow, + $sidebar-text, + $nav-svg-color, + $color-alternate +) { + // Header + + .navbar-gitlab { + background-color: $nav-svg-color; + + .navbar-collapse { + color: $search-and-nav-links; + } + + .container-fluid { + .navbar-toggler { + border-left: 1px solid lighten($border-and-box-shadow, 10%); + + svg { + fill: $search-and-nav-links; + } + } + } + + .navbar-sub-nav, + .navbar-nav { + > li { + > a, + > button { + &:hover, + &:focus { + background-color: rgba($search-and-nav-links, 0.2); + } + } + + &.active, + &.dropdown.show { + > a, + > button { + color: $nav-svg-color; + background-color: $color-alternate; + } + } + + &.line-separator { + border-left: 1px solid rgba($search-and-nav-links, 0.2); + } + } + } + + .navbar-sub-nav { + color: $search-and-nav-links; + } + + .nav { + > li { + color: $search-and-nav-links; + + > a { + &.header-user-dropdown-toggle { + .header-user-avatar { + border-color: $search-and-nav-links; + } + + .header-user-notification-dot { + border: 2px solid $nav-svg-color; + } + } + + &:hover, + &:focus { + @include media-breakpoint-up(sm) { + background-color: rgba($search-and-nav-links, 0.2); + } + + svg { + fill: currentColor; + } + + &.header-user-dropdown-toggle .header-user-notification-dot { + border-color: $nav-svg-color + 33; + } + } + } + + &.active > a, + &.dropdown.show > a { + color: $nav-svg-color; + background-color: $color-alternate; + + &:hover { + svg { + fill: $nav-svg-color; + } + } + + &.header-user-dropdown-toggle .header-user-notification-dot { + border-color: $white; + } + } + + .impersonated-user, + .impersonated-user:hover { + svg { + fill: $nav-svg-color; + } + } + } + } + } + + .navbar .title { + > a { + &:hover, + &:focus { + background-color: rgba($search-and-nav-links, 0.2); + } + } + } + + .search { + form { + background-color: rgba($search-and-nav-links, 0.2); + + &:hover { + background-color: rgba($search-and-nav-links, 0.3); + } + } + + .search-input::placeholder { + color: rgba($search-and-nav-links, 0.8); + } + + .search-input-wrap { + .search-icon, + .clear-icon { + fill: rgba($search-and-nav-links, 0.8); + } + } + + &.search-active { + form { + background-color: $white; + } + + .search-input-wrap { + .search-icon { + fill: rgba($search-and-nav-links, 0.8); + } + } + } + } + + // Sidebar + .nav-sidebar li.active { + box-shadow: inset 4px 0 0 $border-and-box-shadow; + + > a { + color: $sidebar-text; + } + + .nav-icon-container svg { + fill: $sidebar-text; + } + } + + .sidebar-top-level-items > li.active .badge.badge-pill { + color: $sidebar-text; + } + + .nav-links li { + &.active a, + &.md-header-tab.active button, + a.active { + border-bottom: 2px solid $active-tab-border; + + .badge.badge-pill { + font-weight: $gl-font-weight-bold; + } + } + } + + .branch-header-title { + color: $border-and-box-shadow; + } + + .ide-sidebar-link { + &.active { + color: $border-and-box-shadow; + box-shadow: inset 3px 0 $border-and-box-shadow; + + &.is-right { + box-shadow: inset -3px 0 $border-and-box-shadow; + } + } + } +} diff --git a/app/assets/stylesheets/themes/theme_indigo.scss b/app/assets/stylesheets/themes/theme_indigo.scss new file mode 100644 index 00000000000..bbf14afcca2 --- /dev/null +++ b/app/assets/stylesheets/themes/theme_indigo.scss @@ -0,0 +1,14 @@ +@import './theme_helper'; + +body { + &.ui-indigo { + @include gitlab-theme( + $indigo-200, + $indigo-500, + $indigo-700, + $indigo-800, + $indigo-900, + $white + ); + } +} diff --git a/app/assets/stylesheets/themes/theme_light.scss b/app/assets/stylesheets/themes/theme_light.scss new file mode 100644 index 00000000000..58003db4236 --- /dev/null +++ b/app/assets/stylesheets/themes/theme_light.scss @@ -0,0 +1,129 @@ +@import './theme_helper'; + +body { + &.ui-light { + @include gitlab-theme( + $gray-500, + $gray-700, + $gray-500, + $gray-500, + $gray-50, + $gray-500 + ); + + .navbar-gitlab { + background-color: $gray-50; + box-shadow: 0 1px 0 0 $border-color; + + .logo-text svg { + fill: $gray-900; + } + + .navbar-sub-nav, + .navbar-nav { + > li { + > a:hover, + > a:focus, + > button:hover { + color: $gray-900; + } + + &.active > a, + &.active > a:hover, + &.active > button { + color: $white; + } + } + } + + .container-fluid { + .navbar-toggler, + .navbar-toggler:hover { + color: $gray-500; + border-left: 1px solid $gray-100; + } + } + } + + .search { + form { + background-color: $white; + box-shadow: inset 0 0 0 1px $border-color; + + &:hover { + background-color: $white; + box-shadow: inset 0 0 0 1px $blue-200; + } + } + + .search-input-wrap { + .search-icon { + fill: $gray-100; + } + + .search-input { + color: $gl-text-color; + } + } + } + + .nav-sidebar li.active { + > a { + color: $gray-900; + } + + svg { + fill: $gray-900; + } + } + + .sidebar-top-level-items > li.active .badge.badge-pill { + color: $gray-900; + } + } + + &.gl-dark { + .logo-text svg { + fill: $gl-text-color; + } + + .navbar-gitlab { + background-color: $gray-50; + + .navbar-sub-nav, + .navbar-nav { + li { + > a:hover, + > a:focus, + > button:hover, + > button:focus { + color: $gl-text-color; + background-color: $gray-200; + } + } + + li.active, + li.dropdown.show { + > a, + > button { + color: $gl-text-color; + background-color: $gray-200; + } + } + } + + .search { + form { + background-color: $gray-100; + box-shadow: inset 0 0 0 1px $border-color; + + &:active, + &:hover { + background-color: $gray-100; + box-shadow: inset 0 0 0 1px $blue-200; + } + } + } + } + } +} diff --git a/app/assets/stylesheets/themes/theme_light_blue.scss b/app/assets/stylesheets/themes/theme_light_blue.scss new file mode 100644 index 00000000000..07d1c60a4c6 --- /dev/null +++ b/app/assets/stylesheets/themes/theme_light_blue.scss @@ -0,0 +1,14 @@ +@import './theme_helper'; + +body { + &.ui-light-blue { + @include gitlab-theme( + $theme-light-blue-200, + $theme-light-blue-500, + $theme-light-blue-500, + $theme-light-blue-700, + $theme-light-blue-700, + $white + ); + } +} diff --git a/app/assets/stylesheets/themes/theme_light_green.scss b/app/assets/stylesheets/themes/theme_light_green.scss new file mode 100644 index 00000000000..e122501b93c --- /dev/null +++ b/app/assets/stylesheets/themes/theme_light_green.scss @@ -0,0 +1,14 @@ +@import './theme_helper'; + +body { + &.ui-light-green { + @include gitlab-theme( + $theme-green-200, + $theme-green-500, + $theme-green-500, + $theme-light-green-700, + $theme-light-green-700, + $white + ); + } +} diff --git a/app/assets/stylesheets/themes/theme_light_indigo.scss b/app/assets/stylesheets/themes/theme_light_indigo.scss new file mode 100644 index 00000000000..5b607238ed9 --- /dev/null +++ b/app/assets/stylesheets/themes/theme_light_indigo.scss @@ -0,0 +1,14 @@ +@import './theme_helper'; + +body { + &.ui-light-indigo { + @include gitlab-theme( + $indigo-200, + $indigo-500, + $indigo-500, + $indigo-700, + $indigo-700, + $white + ); + } +} diff --git a/app/assets/stylesheets/themes/theme_light_red.scss b/app/assets/stylesheets/themes/theme_light_red.scss new file mode 100644 index 00000000000..fd3980183f3 --- /dev/null +++ b/app/assets/stylesheets/themes/theme_light_red.scss @@ -0,0 +1,14 @@ +@import './theme_helper'; + +body { + &.ui-light-red { + @include gitlab-theme( + $theme-light-red-200, + $theme-light-red-500, + $theme-light-red-500, + $theme-light-red-700, + $theme-light-red-700, + $white + ); + } +} diff --git a/app/assets/stylesheets/themes/theme_red.scss b/app/assets/stylesheets/themes/theme_red.scss new file mode 100644 index 00000000000..fa5ecc09f50 --- /dev/null +++ b/app/assets/stylesheets/themes/theme_red.scss @@ -0,0 +1,14 @@ +@import './theme_helper'; + +body { + &.ui-red { + @include gitlab-theme( + $theme-red-200, + $theme-red-500, + $theme-red-700, + $theme-red-800, + $theme-red-900, + $white + ); + } +} |