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.
This commit is contained in:
parent
0c0c31ff34
commit
658b42b1fa
11 changed files with 106 additions and 107 deletions
|
@ -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.
|
||||
|
|
|
@ -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;
|
||||
|
|
57
app/assets/stylesheets/pages/profiles/preferences.scss
Normal file
57
app/assets/stylesheets/pages/profiles/preferences.scss
Normal file
|
@ -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);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -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);
|
||||
}
|
||||
}
|
||||
|
|
|
@ -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);
|
||||
}
|
|
@ -1,6 +0,0 @@
|
|||
/**
|
||||
* Blue GitLab UI theme
|
||||
*/
|
||||
.ui_blue {
|
||||
@include gitlab-theme(#BECDE9, #2980b9, #1970a9, #096099);
|
||||
}
|
|
@ -1,6 +0,0 @@
|
|||
/**
|
||||
* Violet GitLab UI theme
|
||||
*/
|
||||
.ui_color {
|
||||
@include gitlab-theme(#98C, #548, #436, #325);
|
||||
}
|
|
@ -1,6 +0,0 @@
|
|||
/**
|
||||
* Gray GitLab UI theme
|
||||
*/
|
||||
.ui_gray {
|
||||
@include gitlab-theme(#979797, #373737, #272727, #222222);
|
||||
}
|
|
@ -1,6 +0,0 @@
|
|||
/**
|
||||
* Classic GitLab UI theme
|
||||
*/
|
||||
.ui_mars {
|
||||
@include gitlab-theme(#979DA7, #474D57, #373D47, #24272D);
|
||||
}
|
|
@ -1,6 +0,0 @@
|
|||
/**
|
||||
* Modern GitLab UI theme
|
||||
*/
|
||||
.ui_modern {
|
||||
@include gitlab-theme(#ADC, #019875, #018865, #017855);
|
||||
}
|
Loading…
Reference in a new issue