Refactor gitlab themes css
This commit is contained in:
parent
6fe057cc7b
commit
1faf3676aa
|
@ -173,68 +173,6 @@ header {
|
|||
@include transition(all 0.15s ease-in 0s);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
* Dark header
|
||||
*
|
||||
*/
|
||||
&.header-dark {
|
||||
&.navbar-gitlab {
|
||||
.navbar-inner {
|
||||
background: #708090;
|
||||
border-bottom: 1px solid #AAA;
|
||||
|
||||
.navbar-toggle { color: #fff; }
|
||||
|
||||
.nav > li > a {
|
||||
color: #AAA;
|
||||
|
||||
&:hover, &:focus, &:active {
|
||||
background: none;
|
||||
color: #FFF;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.turbolink-spinner {
|
||||
color: #FFF;
|
||||
}
|
||||
|
||||
.search {
|
||||
.search-input {
|
||||
background-color: #D2D5DA;
|
||||
background-color: rgba(255, 255, 255, 0.5);
|
||||
border: 1px solid #AAA;
|
||||
|
||||
&:focus {
|
||||
background-color: white;
|
||||
}
|
||||
}
|
||||
}
|
||||
.search-input::-webkit-input-placeholder {
|
||||
color: #666;
|
||||
}
|
||||
.app_logo {
|
||||
a {
|
||||
h1 {
|
||||
background: image-url('logo-white.png') no-repeat center center;
|
||||
background-size: 32px;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
.title {
|
||||
a {
|
||||
color: #FFF;
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.search .search-input {
|
||||
|
|
|
@ -0,0 +1,69 @@
|
|||
@mixin dark-theme($color-light, $color, $color-darker, $color-dark) {
|
||||
header {
|
||||
&.navbar-gitlab {
|
||||
.navbar-inner {
|
||||
background: $color;
|
||||
|
||||
.navbar-toggle {
|
||||
color: #FFF;
|
||||
}
|
||||
|
||||
.app_logo, .navbar-toggle {
|
||||
&:hover {
|
||||
background-color: $color-darker;
|
||||
}
|
||||
|
||||
h1 {
|
||||
background: image-url('logo-white.png') no-repeat center center;
|
||||
background-size: 32px;
|
||||
color: #FFF;
|
||||
}
|
||||
}
|
||||
|
||||
.app_logo {
|
||||
background-color: $color-dark;
|
||||
}
|
||||
|
||||
.title {
|
||||
color: #FFF;
|
||||
|
||||
a {
|
||||
color: #FFF;
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.search {
|
||||
.search-input {
|
||||
background-color: $color-light;
|
||||
background-color: rgba(255, 255, 255, 0.5);
|
||||
border: 1px solid $color-light;
|
||||
|
||||
&:focus {
|
||||
background-color: white;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.search-input::-webkit-input-placeholder {
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.nav > li > a {
|
||||
color: $color-light;
|
||||
|
||||
&:hover, &:focus, &:active {
|
||||
background: none;
|
||||
color: #FFF;
|
||||
}
|
||||
}
|
||||
|
||||
.search-input {
|
||||
border-color: $color-light;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
|
@ -1,42 +1,6 @@
|
|||
/**
|
||||
* This file represent some UI that can be changed
|
||||
* during web app restyle or theme select.
|
||||
*
|
||||
* Next items should be placed there
|
||||
* - link colors
|
||||
* - header restyles
|
||||
*
|
||||
* Violet GitLab UI theme
|
||||
*/
|
||||
.ui_color {
|
||||
/*
|
||||
* Application Header
|
||||
*
|
||||
*/
|
||||
header {
|
||||
@extend .header-dark;
|
||||
&.navbar-gitlab {
|
||||
.navbar-inner {
|
||||
background: #548;
|
||||
border-bottom: 1px solid #436;
|
||||
.app_logo, .navbar-toggle {
|
||||
&:hover {
|
||||
background-color: #436;
|
||||
}
|
||||
}
|
||||
.app_logo {
|
||||
background-color: #325;
|
||||
}
|
||||
.nav > li > a {
|
||||
color: #98C;
|
||||
}
|
||||
.search-input {
|
||||
border-color: #98C;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.nav-pills > li.active > a, .nav-pills > li.active > a:hover, .nav-pills > li.active > a:focus {
|
||||
background: #659;
|
||||
}
|
||||
@include dark-theme(#98C, #548, #436, #325);
|
||||
}
|
||||
|
|
|
@ -1,32 +1,6 @@
|
|||
/**
|
||||
* This file represent some UI that can be changed
|
||||
* during web app restyle or theme select.
|
||||
*
|
||||
* Next items should be placed there
|
||||
* - link colors
|
||||
* - header restyles
|
||||
*
|
||||
* Gray GitLab UI theme
|
||||
*/
|
||||
.ui_gray {
|
||||
/*
|
||||
* Application Header
|
||||
*
|
||||
*/
|
||||
header {
|
||||
@extend .header-dark;
|
||||
&.navbar-gitlab {
|
||||
.navbar-inner {
|
||||
background: #373737;
|
||||
border-bottom: 1px solid #272727;
|
||||
.app_logo, .navbar-toggle {
|
||||
&:hover {
|
||||
background-color: #272727;
|
||||
}
|
||||
}
|
||||
.app_logo {
|
||||
background-color: #222;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@include dark-theme(#979797, #373737, #272727, #222222);
|
||||
}
|
||||
|
|
|
@ -1,38 +1,6 @@
|
|||
/**
|
||||
* This file represent some UI that can be changed
|
||||
* during web app restyle or theme select.
|
||||
*
|
||||
* Next items should be placed there
|
||||
* - link colors
|
||||
* - header restyles
|
||||
*
|
||||
* Classic GitLab UI theme
|
||||
*/
|
||||
.ui_mars {
|
||||
/*
|
||||
* Application Header
|
||||
*
|
||||
*/
|
||||
header {
|
||||
@extend .header-dark;
|
||||
&.navbar-gitlab {
|
||||
.navbar-inner {
|
||||
background: #474D57;
|
||||
border-bottom: 1px solid #373D47;
|
||||
.app_logo, .navbar-toggle {
|
||||
&:hover {
|
||||
background-color: #373D47;
|
||||
}
|
||||
}
|
||||
.app_logo {
|
||||
background-color: #24272D;
|
||||
}
|
||||
.nav > li > a {
|
||||
color: #979DA7;
|
||||
}
|
||||
.search-input {
|
||||
border-color: #979DA7;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@include dark-theme(#979DA7, #474D57, #373D47, #24272D);
|
||||
}
|
||||
|
|
|
@ -1,42 +1,6 @@
|
|||
/**
|
||||
* This file represent some UI that can be changed
|
||||
* during web app restyle or theme select.
|
||||
*
|
||||
* Next items should be placed there
|
||||
* - link colors
|
||||
* - header restyles
|
||||
*
|
||||
* Modern GitLab UI theme
|
||||
*/
|
||||
.ui_modern {
|
||||
/*
|
||||
* Application Header
|
||||
*
|
||||
*/
|
||||
header {
|
||||
@extend .header-dark;
|
||||
&.navbar-gitlab {
|
||||
.navbar-inner {
|
||||
background: #019875;
|
||||
border-bottom: 1px solid #019875;
|
||||
.app_logo, .navbar-toggle {
|
||||
&:hover {
|
||||
background-color: #018865;
|
||||
}
|
||||
}
|
||||
.app_logo {
|
||||
background-color: #017855;
|
||||
}
|
||||
.nav > li > a {
|
||||
color: #ADC;
|
||||
}
|
||||
.search-input {
|
||||
border-color: #8ba;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.nav-pills > li.active > a, .nav-pills > li.active > a:hover, .nav-pills > li.active > a:focus {
|
||||
background: #019875;
|
||||
}
|
||||
@include dark-theme(#ADC, #019875, #018865, #017855);
|
||||
}
|
||||
|
|
Loading…
Reference in New Issue