Skip to content

G
gitlab-ce
Commit b95dbfc3 authored by Enrique Alcántara's avatar Enrique Alcántara
Browse files
Options

Merge branch '241465-extract-theme-specific-css-and-load-through-startup-css' into 'master' 

Extract Theme specific CSS and load through startup.css

Closes #241465

See merge request gitlab-org/gitlab!40503
parents 9e7619fa 521d8997
Hide whitespace changes
Inline Side-by-side
Showing with 471 additions and 80 deletions
app/assets/stylesheets/framework.scss
View file @ b95dbfc3
......@@ -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 @ b95dbfc3
......@@ -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 @ b95dbfc3
@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 @ b95dbfc3
@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 @ b95dbfc3
@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 @ b95dbfc3
@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 @ b95dbfc3
@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 @ b95dbfc3
@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 @ b95dbfc3
@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 @ b95dbfc3
@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 @ b95dbfc3
@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 @ b95dbfc3
@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 @ b95dbfc3
@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 @ b95dbfc3
......@@ -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 @ b95dbfc3
......@@ -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 @ b95dbfc3
......@@ -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 @ b95dbfc3
- 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 @ b95dbfc3
......@@ -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