Skip to content

G
gitlab-ce
Commit 521d8997 authored by Tim Zallmann's avatar Tim Zallmann Committed by Enrique Alcántara
Browse files
Options

Moved all navbar themes to their own files 

This moves all themes for the navbar themes to their own file
Inlines them for startup css or loads them
On theme selection we load all themes
parent d62ff93b
Hide whitespace changes
Inline Side-by-side
Showing with 471 additions and 80 deletions
app/assets/stylesheets/framework.scss
View file @ 521d8997
......@@ -23,7 +23,6 @@
@import 'framework/flash';
@import 'framework/forms';
@import 'framework/gfm';
@import 'framework/gitlab_theme';
@import 'framework/header';
@import 'framework/highlight';
@import 'framework/issue_box';
......
app/assets/stylesheets/startup/startup-general.scss
View file @ 521d8997
......@@ -968,85 +968,6 @@ input {
.search form::placeholder {
color: #868686;
}
body.ui-indigo .navbar-gitlab {
background-color: #292961;
}
body.ui-indigo .navbar-gitlab .navbar-collapse {
color: #d1d1f0;
}
body.ui-indigo .navbar-gitlab .container-fluid .navbar-toggler {
border-left: 1px solid #6868b9;
}
body.ui-indigo .navbar-gitlab .container-fluid .navbar-toggler svg {
fill: #d1d1f0;
}
body.ui-indigo .navbar-gitlab .navbar-sub-nav > li.active > a,
body.ui-indigo .navbar-gitlab .navbar-sub-nav > li.active > button, body.ui-indigo .navbar-gitlab .navbar-sub-nav > li.dropdown.show > a,
body.ui-indigo .navbar-gitlab .navbar-sub-nav > li.dropdown.show > button,
body.ui-indigo .navbar-gitlab .navbar-nav > li.active > a,
body.ui-indigo .navbar-gitlab .navbar-nav > li.active > button,
body.ui-indigo .navbar-gitlab .navbar-nav > li.dropdown.show > a,
body.ui-indigo .navbar-gitlab .navbar-nav > li.dropdown.show > button {
color: #292961;
background-color: #fff;
}
body.ui-indigo .navbar-gitlab .navbar-sub-nav {
color: #d1d1f0;
}
body.ui-indigo .navbar-gitlab .nav > li {
color: #d1d1f0;
}
body.ui-indigo .navbar-gitlab .nav > li > a.header-user-dropdown-toggle .header-user-avatar {
border-color: #d1d1f0;
}
body.ui-indigo .navbar-gitlab .nav > li.active > a,
body.ui-indigo .navbar-gitlab .nav > li.dropdown.show > a {
color: #292961;
background-color: #fff;
}
body.ui-indigo .search form {
background-color: rgba(209, 209, 240, 0.2);
}
body.ui-indigo .search .search-input::placeholder {
color: rgba(209, 209, 240, 0.8);
}
body.ui-indigo .search .search-input-wrap .search-icon,
body.ui-indigo .search .search-input-wrap .clear-icon {
fill: rgba(209, 209, 240, 0.8);
}
body.ui-indigo .nav-sidebar li.active {
box-shadow: inset 4px 0 0 #4b4ba3;
}
body.ui-indigo .nav-sidebar li.active > a {
color: #393982;
}
body.ui-indigo .nav-sidebar li.active .nav-icon-container svg {
fill: #393982;
}
body.ui-indigo .sidebar-top-level-items > li.active .badge.badge-pill {
color: #393982;
}
body.gl-dark .logo-text svg {
fill: #303030;
}
body.gl-dark .navbar-gitlab {
background-color: #f0f0f0;
}
body.gl-dark .navbar-gitlab .navbar-sub-nav li.active > a,
body.gl-dark .navbar-gitlab .navbar-sub-nav li.active > button,
body.gl-dark .navbar-gitlab .navbar-sub-nav li.dropdown.show > a,
body.gl-dark .navbar-gitlab .navbar-sub-nav li.dropdown.show > button,
body.gl-dark .navbar-gitlab .navbar-nav li.active > a,
body.gl-dark .navbar-gitlab .navbar-nav li.active > button,
body.gl-dark .navbar-gitlab .navbar-nav li.dropdown.show > a,
body.gl-dark .navbar-gitlab .navbar-nav li.dropdown.show > button {
color: #303030;
background-color: #bfbfbf;
}
body.gl-dark .navbar-gitlab .search form {
background-color: #dbdbdb;
box-shadow: inset 0 0 0 1px #dbdbdb;
}
.navbar-gitlab {
padding: 0 16px;
z-index: 1000;
......
app/assets/stylesheets/themes/theme_blue.scss 0 → 100644
View file @ 521d8997
@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
);
}
}
app/assets/stylesheets/themes/theme_dark.scss 0 → 100644
View file @ 521d8997
@import './theme_helper';
body {
&.ui-dark {
@include gitlab-theme(
$gray-200,
$gray-300,
$gray-500,
$gray-700,
$gray-900,
$white
);
}
}
app/assets/stylesheets/themes/theme_green.scss 0 → 100644
View file @ 521d8997
@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
);
}
}
app/assets/stylesheets/framework/gitlab_theme.scss → app/assets/stylesheets/themes/theme_helper.scss
View file @ 521d8997
@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,
......@@ -202,230 +202,3 @@
}
}
}
body {
&.ui-indigo {
@include gitlab-theme(
$indigo-200,
$indigo-500,
$indigo-700,
$indigo-800,
$indigo-900,
$white
);
}
&.ui-light-indigo {
@include gitlab-theme(
$indigo-200,
$indigo-500,
$indigo-500,
$indigo-700,
$indigo-700,
$white
);
}
&.ui-blue {
@include gitlab-theme(
$theme-blue-200,
$theme-blue-500,
$theme-blue-700,
$theme-blue-800,
$theme-blue-900,
$white
);
}
&.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
);
}
&.ui-green {
@include gitlab-theme(
$theme-green-200,
$theme-green-500,
$theme-green-700,
$theme-green-800,
$theme-green-900,
$white
);
}
&.ui-light-green {
@include gitlab-theme(
$theme-green-200,
$theme-green-500,
$theme-green-500,
$theme-light-green-700,
$theme-light-green-700,
$white
);
}
&.ui-red {
@include gitlab-theme(
$theme-red-200,
$theme-red-500,
$theme-red-700,
$theme-red-800,
$theme-red-900,
$white
);
}
&.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
);
}
&.ui-dark {
@include gitlab-theme(
$gray-200,
$gray-300,
$gray-500,
$gray-700,
$gray-900,
$white
);
}
&.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;
}
}
}
}
}
}
app/assets/stylesheets/themes/theme_indigo.scss 0 → 100644
View file @ 521d8997
@import './theme_helper';
body {
&.ui-indigo {
@include gitlab-theme(
$indigo-200,
$indigo-500,
$indigo-700,
$indigo-800,
$indigo-900,
$white
);
}
}
app/assets/stylesheets/themes/theme_light.scss 0 → 100644
View file @ 521d8997
@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;
}
}
}
}
}
}
app/assets/stylesheets/themes/theme_light_blue.scss 0 → 100644
View file @ 521d8997
@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
);
}
}
app/assets/stylesheets/themes/theme_light_green.scss 0 → 100644
View file @ 521d8997
@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
);
}
}
app/assets/stylesheets/themes/theme_light_indigo.scss 0 → 100644
View file @ 521d8997
@import './theme_helper';
body {
&.ui-light-indigo {
@include gitlab-theme(
$indigo-200,
$indigo-500,
$indigo-500,
$indigo-700,
$indigo-700,
$white
);
}
}
app/assets/stylesheets/themes/theme_light_red.scss 0 → 100644
View file @ 521d8997
@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
);
}
}
app/assets/stylesheets/themes/theme_red.scss 0 → 100644
View file @ 521d8997
@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
);
}
}
app/helpers/preferences_helper.rb
View file @ 521d8997
......@@ -61,6 +61,10 @@ module PreferencesHelper
@user_application_theme ||= Gitlab::Themes.for_user(current_user).css_class
end
def user_application_theme_name
@user_application_theme_name ||= Gitlab::Themes.for_user(current_user).name.downcase.tr(' ', '_')
end
def user_color_scheme
Gitlab::ColorSchemes.for_user(current_user).css_class
end
......
app/views/layouts/_head.html.haml
View file @ 521d8997
......@@ -49,6 +49,8 @@
= stylesheet_link_tag_defer "application_dark"
- else
= stylesheet_link_tag_defer "application"
- unless use_startup_css?
= stylesheet_link_tag_defer "themes/theme_#{user_application_theme_name}"
= stylesheet_link_tag "disable_animations", media: "all" if Rails.env.test? || Gitlab.config.gitlab['disable_animations']
= stylesheet_link_tag_defer 'performance_bar' if performance_bar_enabled?
......
app/views/layouts/_startup_css.haml
View file @ 521d8997
......@@ -3,4 +3,5 @@
- startup_filename = current_path?("sessions#new") ? 'signin' : user_application_theme == 'gl-dark' ? 'dark' : 'general'
%style{ type: "text/css" }
= Rails.application.assets_manifest.find_sources("themes/theme_#{user_application_theme_name}.css").first.to_s.html_safe
= Rails.application.assets_manifest.find_sources("startup/startup-#{startup_filename}.css").first.to_s.html_safe
app/views/profiles/preferences/show.html.haml
View file @ 521d8997
- page_title _('Preferences')
- @content_class = "limit-container-width" unless fluid_layout
- Gitlab::Themes.each do |theme|
= stylesheet_link_tag "themes/theme_#{theme.css_class.gsub('ui-', '')}"
= form_for @user, url: profile_preferences_path, remote: true, method: :put, html: { class: 'row gl-mt-3 js-preferences-form' } do |f|
.col-lg-4.application-theme#navigation-theme
%h4.gl-mt-0
......
config/application.rb
View file @ 521d8997
......@@ -190,6 +190,8 @@ module Gitlab
config.assets.precompile << "errors.css"
config.assets.precompile << "jira_connect.js"
config.assets.precompile << "themes/*.css"
config.assets.precompile << "highlight/themes/*.css"
# Import gitlab-svgs directly from vendored directory
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment
GitLab Nexedi Edition | About GitLab | About Nexedi | 沪ICP备2021021310号-2 | 沪ICP备2021021310号-7