From 658b42b1fa79c77b1acef67a645b36a2928a71bd Mon Sep 17 00:00:00 2001 From: Robert Speicher Date: Fri, 5 Jun 2015 15:45:46 -0400 Subject: [PATCH] Consolidate theme stylesheets into one Since they're all defined by a mixin, it didn't provide any benefit to have them in separate files. This also adds variables defining the basic color of each theme so we can re-use them in the previews. --- app/assets/stylesheets/application.scss | 16 ++--- app/assets/stylesheets/pages/profile.scss | 61 ------------------- .../pages/profiles/preferences.scss | 57 +++++++++++++++++ app/assets/stylesheets/pages/themes.scss | 0 .../stylesheets/themes/gitlab-theme.scss | 41 +++++++++++++ app/assets/stylesheets/themes/ui_basic.scss | 8 --- app/assets/stylesheets/themes/ui_blue.scss | 6 -- app/assets/stylesheets/themes/ui_color.scss | 6 -- app/assets/stylesheets/themes/ui_gray.scss | 6 -- app/assets/stylesheets/themes/ui_mars.scss | 6 -- app/assets/stylesheets/themes/ui_modern.scss | 6 -- 11 files changed, 106 insertions(+), 107 deletions(-) create mode 100644 app/assets/stylesheets/pages/profiles/preferences.scss delete mode 100644 app/assets/stylesheets/pages/themes.scss delete mode 100644 app/assets/stylesheets/themes/ui_basic.scss delete mode 100644 app/assets/stylesheets/themes/ui_blue.scss delete mode 100644 app/assets/stylesheets/themes/ui_color.scss delete mode 100644 app/assets/stylesheets/themes/ui_gray.scss delete mode 100644 app/assets/stylesheets/themes/ui_mars.scss delete mode 100644 app/assets/stylesheets/themes/ui_modern.scss diff --git a/app/assets/stylesheets/application.scss b/app/assets/stylesheets/application.scss index 015ff2ce4ec..1a5f11df7d1 100644 --- a/app/assets/stylesheets/application.scss +++ b/app/assets/stylesheets/application.scss @@ -35,26 +35,26 @@ */ @import "font-awesome"; +/** + * UI themes: + */ +@import "themes/**/*"; + /** * Generic css (forms, nav etc): */ -@import "generic/*"; +@import "generic/**/*"; /** * Page specific styles (issues, projects etc): */ -@import "pages/*"; +@import "pages/**/*"; /** * Code highlight */ -@import "highlight/*"; - -/** - * UI themes: - */ -@import "themes/*"; +@import "highlight/**/*"; /** * Styles for JS behaviors. diff --git a/app/assets/stylesheets/pages/profile.scss b/app/assets/stylesheets/pages/profile.scss index 5a5fbc468a3..8e4f0eb2b25 100644 --- a/app/assets/stylesheets/pages/profile.scss +++ b/app/assets/stylesheets/pages/profile.scss @@ -17,67 +17,6 @@ } } -/* - * Appearance settings - * - */ -.themes_opts { - label { - margin-right: 20px; - text-align: center; - - .prev { - height: 80px; - width: 160px; - margin-bottom: 10px; - @include border-radius(4px); - - &.classic { - background: #31363e; - } - - &.default { - background: #888888; - } - - &.modern { - background: #009871; - } - - &.gray { - background: #373737; - } - - &.violet { - background: #548; - } - - &.blue { - background: #2980b9; - } - } - } -} - -.code_highlight_opts { - margin-top: 10px; - - label { - margin-right: 20px; - text-align: center; - - .prev { - width: 160px; - margin-bottom: 10px; - - img { - max-width: 100%; - @include border-radius(4px); - } - } - } -} - .oauth-buttons { .btn-group { margin-right: 10px; diff --git a/app/assets/stylesheets/pages/profiles/preferences.scss b/app/assets/stylesheets/pages/profiles/preferences.scss new file mode 100644 index 00000000000..846a940f1c9 --- /dev/null +++ b/app/assets/stylesheets/pages/profiles/preferences.scss @@ -0,0 +1,57 @@ +.application-theme { + label { + margin-right: 20px; + text-align: center; + + .application-theme-preview { + height: 80px; + width: 160px; + margin-bottom: 10px; + @include border-radius(4px); + + &.ui_blue { + background: $theme-blue; + } + + &.ui_charcoal { + background: $theme-charcoal; + } + + &.ui_graphite { + background: $theme-graphite; + } + + &.ui_gray { + background: $theme-gray; + } + + &.ui_green { + background: $theme-green; + } + + &.ui_violet { + background: $theme-violet; + } + } + } +} + +.code_highlight_opts { + margin-top: 10px; + + label { + margin-right: 20px; + text-align: center; + + .prev { + width: 160px; + margin-bottom: 10px; + + img { + max-width: 100%; + @include border-radius(4px); + } + } + } +} + diff --git a/app/assets/stylesheets/pages/themes.scss b/app/assets/stylesheets/pages/themes.scss deleted file mode 100644 index e69de29bb2d..00000000000 diff --git a/app/assets/stylesheets/themes/gitlab-theme.scss b/app/assets/stylesheets/themes/gitlab-theme.scss index 10fcaf18fa9..7cabeaefb93 100644 --- a/app/assets/stylesheets/themes/gitlab-theme.scss +++ b/app/assets/stylesheets/themes/gitlab-theme.scss @@ -1,3 +1,11 @@ +/** + * Styles the GitLab application with a specific color theme + * + * $color-light - + * $color - + * $color-darker - + * $color-dark - + */ @mixin gitlab-theme($color-light, $color, $color-darker, $color-dark) { header { &.navbar-gitlab { @@ -77,3 +85,36 @@ } } } + +$theme-blue: #2980B9; +$theme-charcoal: #474D57; +$theme-graphite: #888888; +$theme-gray: #373737; +$theme-green: #019875; +$theme-violet: #554488; + +body { + &.ui_blue { + @include gitlab-theme(#BECDE9, $theme-blue, #1970A9, #096099); + } + + &.ui_charcoal { + @include gitlab-theme(#979DA7, $theme-charcoal, #373D47, #24272D); + } + + &.ui_graphite { + @include gitlab-theme(#CCCCCC, $theme-graphite, #777777, #666666); + } + + &.ui_gray { + @include gitlab-theme(#979797, $theme-gray, #272727, #222222); + } + + &.ui_green { + @include gitlab-theme(#AADDCC, $theme-green, #018865, #017855); + } + + &.ui_violet { + @include gitlab-theme(#9988CC, $theme-violet, #443366, #332255); + } +} diff --git a/app/assets/stylesheets/themes/ui_basic.scss b/app/assets/stylesheets/themes/ui_basic.scss deleted file mode 100644 index 63e8dce1e92..00000000000 --- a/app/assets/stylesheets/themes/ui_basic.scss +++ /dev/null @@ -1,8 +0,0 @@ -/** - * This file represent some UI that can be changed - * during web app restyle or theme select. - * - */ -.ui_basic { - @include gitlab-theme(#CCCCCC, #888888, #777777, #666666); -} diff --git a/app/assets/stylesheets/themes/ui_blue.scss b/app/assets/stylesheets/themes/ui_blue.scss deleted file mode 100644 index cf995622b6b..00000000000 --- a/app/assets/stylesheets/themes/ui_blue.scss +++ /dev/null @@ -1,6 +0,0 @@ -/** - * Blue GitLab UI theme - */ -.ui_blue { - @include gitlab-theme(#BECDE9, #2980b9, #1970a9, #096099); -} diff --git a/app/assets/stylesheets/themes/ui_color.scss b/app/assets/stylesheets/themes/ui_color.scss deleted file mode 100644 index 6babccec0da..00000000000 --- a/app/assets/stylesheets/themes/ui_color.scss +++ /dev/null @@ -1,6 +0,0 @@ -/** - * Violet GitLab UI theme - */ -.ui_color { - @include gitlab-theme(#98C, #548, #436, #325); -} diff --git a/app/assets/stylesheets/themes/ui_gray.scss b/app/assets/stylesheets/themes/ui_gray.scss deleted file mode 100644 index f8e4a6ea7da..00000000000 --- a/app/assets/stylesheets/themes/ui_gray.scss +++ /dev/null @@ -1,6 +0,0 @@ -/** - * Gray GitLab UI theme - */ -.ui_gray { - @include gitlab-theme(#979797, #373737, #272727, #222222); -} diff --git a/app/assets/stylesheets/themes/ui_mars.scss b/app/assets/stylesheets/themes/ui_mars.scss deleted file mode 100644 index fda96b64cd9..00000000000 --- a/app/assets/stylesheets/themes/ui_mars.scss +++ /dev/null @@ -1,6 +0,0 @@ -/** - * Classic GitLab UI theme - */ -.ui_mars { - @include gitlab-theme(#979DA7, #474D57, #373D47, #24272D); -} diff --git a/app/assets/stylesheets/themes/ui_modern.scss b/app/assets/stylesheets/themes/ui_modern.scss deleted file mode 100644 index 8261e80b35f..00000000000 --- a/app/assets/stylesheets/themes/ui_modern.scss +++ /dev/null @@ -1,6 +0,0 @@ -/** - * Modern GitLab UI theme - */ -.ui_modern { - @include gitlab-theme(#ADC, #019875, #018865, #017855); -}