DRCIT/snipe-it
1
0
Fork 0
mirror of https://github.com/snipe/snipe-it.git synced 2024-12-24 05:04:07 -08:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

Updated color-specific skins

Browse source
This commit is contained in:
snipe 2020-03-27 21:46:00 -07:00
parent 2a813244a2
commit 9a2ee2638b
16 changed files with 617 additions and 132 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
resources/assets/less/skins/_all-skins.less
View file

@ -11,3 +11,4 @@
@import "skin-yellow-light.less"; @import "skin-yellow-light.less";
@import "skin-purple.less"; @import "skin-purple.less";
@import "skin-purple-light.less"; @import "skin-purple-light.less";
@import "skin-contrast.less";

69
resources/assets/less/skins/skin-black-light.less
View file

@ -1,64 +1,55 @@
/* /*
* Skin: Black * Skin: black
* ----------- * ---------
*/ */
@import "../../bootstrap-less/mixins.less";
@import "../../bootstrap-less/variables.less"; @import "../bootstrap-less/mixins.less";
@import "../bootstrap-less/variables.less";
@import "../variables.less"; @import "../variables.less";
@import "../mixins.less"; @import "../mixins.less";
/* skin-black navbar */
.skin-black-light { .skin-black-light {
//Navbar & Logo //Navbar
.main-header { .main-header {
.box-shadow(0px 1px 1px rgba(0, 0, 0, 0.05)); .navbar {
.navbar-toggle { .navbar-variant(@black; #fff);
color: #333; .sidebar-toggle {
} color: #fff;
.navbar-brand { &:hover {
color: #333; background-color: darken(@black, 5%);
border-right: 1px solid #eee;
}
> .navbar {
.navbar-variant(#fff; #333; #999; #fff);
> .sidebar-toggle {
color: #333;
border-right: 1px solid #eee;
}
.navbar-nav {
> li > a {
border-right: 1px solid #eee;
} }
} }
.navbar-custom-menu .navbar-nav, @media(max-width: @screen-header-collapse) {
.navbar-right { .dropdown-menu {
> li { li {
> a { &.divider {
border-left: 1px solid #eee; background-color: rgba(255,255,255,0.1);
border-right-width: 0; }
a {
color: #fff;
&:hover {
background: darken(@black, 5%);
}
}
} }
} }
} }
} }
> .logo { //Logo
.logo-variant(#fff; #333); .logo {
border-right: 1px solid #eee; .logo-variant(@black);
@media (max-width: @screen-header-collapse) {
.logo-variant(#222; #fff);
border-right: none;
}
} }
li.user-header { li.user-header {
background-color: #222; background-color: @black;
} }
} }
//Content Header //Content Header
.content-header { .content-header {
background: transparent; background: transparent;
box-shadow: none;
} }
//Create the sidebar skin //Create the sidebar skin
.skin-light-sidebar(#fff); .skin-light-sidebar(@black);
} }

120
resources/assets/less/skins/skin-black.less
View file

@ -1,64 +1,106 @@
/* /*
* Skin: Black * Skin: Black
* ----------- * ----------
*/ */
@import "../../bootstrap-less/mixins.less"; @import "../bootstrap-less/mixins.less";
@import "../../bootstrap-less/variables.less"; @import "../bootstrap-less/variables.less";
@import "../variables.less"; @import "../variables.less";
@import "../mixins.less"; @import "../mixins.less";
/* skin-black navbar */
.skin-black { .skin-black {
//Navbar & Logo //Navbar
.main-header { .main-header {
.box-shadow(0px 1px 1px rgba(0, 0, 0, 0.05)); .navbar {
.navbar-toggle { .navbar-variant(@black; #fff);
color: #333; .sidebar-toggle {
} color: #fff;
.navbar-brand { &:hover {
color: #333; background-color: darken(@black, 5%);
border-right: 1px solid #eee;
}
> .navbar {
.navbar-variant(#fff; #333; #999; #fff);
> .sidebar-toggle {
color: #333;
border-right: 1px solid #eee;
}
.navbar-nav {
> li > a {
border-right: 1px solid #eee;
} }
} }
.navbar-custom-menu .navbar-nav, @media (max-width: @screen-header-collapse) {
.navbar-right { .dropdown-menu {
> li { li {
> a { &.divider {
border-left: 1px solid #eee; background-color: rgba(255, 255, 255, 0.1);
border-right-width: 0; }
a {
color: #fff;
&:hover {
background: darken(@black, 5%);
}
}
} }
} }
} }
} }
> .logo { //Logo
.logo-variant(#fff; #333);
border-right: 1px solid #eee;
@media (max-width: @screen-header-collapse) {
.logo-variant(#222; #fff);
border-right: none;
}
}
li.user-header { li.user-header {
background-color: #222; background-color: @black;
} }
} }
//Content Header //Content Header
.content-header { .content-header {
background: transparent; background: transparent;
box-shadow: none;
} }
//Create the sidebar skin //Create the sidebar skin
.skin-dark-sidebar(#fff); .skin-dark-sidebar(@black);
}
.skin-black.layout-top-nav .main-header > .logo {
.logo-variant {
background-color: none;
}
}
.btn, .btn:hover {
&.btn-primary, .btn-primary:link {
background-color: @dark-gray;
border-color: darken(@gray, 10%);
color: #fff;
}
&a.btn-primary:hover {
background-color: @black;
border-color: darken(@dark-gray, 20%);
color: #fff;
}
&.btn-white:link {
color: @black;
color: #fff;
}
&.btn-white:hover {
color: darken(@black, 30%);
color: #fff;
}
}
a {
color: @black;
text-decoration: underline;
&:hover {
color: darken(@black, 20%);
}
&:visited {
color: @black;
}
}
.text-primary {
color: darken(@black, 20%);
}
.skin-black .main-header .navbar .nav>li>a {
text-decoration: none;
} }

4
resources/assets/less/skins/skin-blue-light.less
View file

@ -2,8 +2,8 @@
* Skin: Blue * Skin: Blue
* ---------- * ----------
*/ */
@import "../../bootstrap-less/mixins.less"; @import "../bootstrap-less/mixins.less";
@import "../../bootstrap-less/variables.less"; @import "../bootstrap-less/variables.less";
@import "../variables.less"; @import "../variables.less";
@import "../mixins.less"; @import "../mixins.less";

55
resources/assets/less/skins/skin-blue.less
View file

@ -1,13 +1,13 @@
/* /*
* Skin: Blue * Skin: light-blue
* ---------- * ----------
*/ */
@import "../../less/bootstrap-less/mixins.less"; @import "../bootstrap-less/mixins.less";
@import "../../less/bootstrap-less/variables.less"; @import "../bootstrap-less/variables.less";
@import "../variables.less"; @import "../variables.less";
@import "../mixins.less"; @import "../mixins.less";
.skin-blue { .skin-light-blue {
//Navbar //Navbar
.main-header { .main-header {
.navbar { .navbar {
@ -50,8 +50,53 @@
.skin-dark-sidebar(@light-blue); .skin-dark-sidebar(@light-blue);
} }
.skin-blue.layout-top-nav .main-header > .logo { .skin-light-blue.layout-top-nav .main-header > .logo {
.logo-variant { .logo-variant {
background-color: none; background-color: none;
} }
} }
.btn, .btn:hover {
&.btn-primary, .btn-primary:link {
background-color: darken(@light-blue, 10%);
border-color: darken(@light-blue, 20%);
color: #fff;
}
&a.btn-primary:hover {
background-color: darken(@light-blue, 20%);
border-color: darken(@light-blue, 20%);
color: #fff;
}
&.btn-white:link {
color: darken(@light-blue, 10%);
color: #fff;
}
&.btn-white:hover {
color: darken(@light-blue, 30%);
color: #fff;
}
}
a {
color: @light-blue;
&:hover {
color: darken(@light-blue, 20%);
}
&:visited {
color: @light-blue;
}
}
.text-primary {
color: darken(@light-blue, 20%);
}

57
resources/assets/less/skins/skin-contrast.less Normal file
View file

@ -0,0 +1,57 @@
/*
* Skin: Blue
* ----------
*/
@import "../bootstrap-less/mixins.less";
@import "../bootstrap-less/variables.less";
@import "../variables.less";
@import "../mixins.less";
.skin-contrast {
//Navbar
.main-header {
.navbar {
.navbar-variant(@navy; #fff);
.sidebar-toggle {
color: #fff;
&:hover {
background-color: darken(@navy, 5%);
}
}
@media (max-width: @screen-header-collapse) {
.dropdown-menu {
li {
&.divider {
background-color: rgba(255, 255, 255, 0.1);
}
a {
color: #fff;
&:hover {
background: darken(@navy, 5%);
}
}
}
}
}
}
//Logo
li.user-header {
background-color: @navy;
}
}
//Content Header
.content-header {
background: transparent;
}
//Create the sidebar skin
.skin-dark-sidebar(@navy);
}
.skin-contrast.layout-top-nav .main-header > .logo {
.logo-variant {
background-color: none;
}
}

4
resources/assets/less/skins/skin-green-light.less
View file

@ -3,8 +3,8 @@
* ----------- * -----------
*/ */
@import "../../bootstrap-less/mixins.less"; @import "../bootstrap-less/mixins.less";
@import "../../bootstrap-less/variables.less"; @import "../bootstrap-less/variables.less";
@import "../variables.less"; @import "../variables.less";
@import "../mixins.less"; @import "../mixins.less";

66
resources/assets/less/skins/skin-green.less
View file

@ -1,10 +1,9 @@
/* /*
* Skin: Green * Skin: Green
* ----------- * ----------
*/ */
@import "../bootstrap-less/mixins.less";
@import "../../bootstrap-less/mixins.less"; @import "../bootstrap-less/variables.less";
@import "../../bootstrap-less/variables.less";
@import "../variables.less"; @import "../variables.less";
@import "../mixins.less"; @import "../mixins.less";
@ -19,11 +18,11 @@
background-color: darken(@green, 5%); background-color: darken(@green, 5%);
} }
} }
@media(max-width: @screen-header-collapse) { @media (max-width: @screen-header-collapse) {
.dropdown-menu { .dropdown-menu {
li { li {
&.divider { &.divider {
background-color: rgba(255,255,255,0.1); background-color: rgba(255, 255, 255, 0.1);
} }
a { a {
color: #fff; color: #fff;
@ -36,9 +35,6 @@
} }
} }
//Logo //Logo
.logo {
.logo-variant(darken(@green, 5%));
}
li.user-header { li.user-header {
background-color: @green; background-color: @green;
@ -52,5 +48,55 @@
//Create the sidebar skin //Create the sidebar skin
.skin-dark-sidebar(@green); .skin-dark-sidebar(@green);
} }
.skin-green.layout-top-nav .main-header > .logo {
.logo-variant {
background-color: none;
}
}
.btn, .btn:hover {
&.btn-primary, .btn-primary:link {
background-color: darken(@green, 10%);
border-color: darken(@green, 20%);
color: #fff;
}
&a.btn-primary:hover {
background-color: darken(@green, 20%);
border-color: darken(@green, 20%);
color: #fff;
}
&.btn-white:link {
color: darken(@green, 10%);
color: #fff;
}
&.btn-white:hover {
color: darken(@green, 30%);
color: #fff;
}
}
a {
color: @green;
&:hover {
color: darken(@green, 20%);
}
&:visited {
color: @green;
}
}
.text-primary {
color: darken(@green, 20%);
}

55
resources/assets/less/skins/skin-orange-light.less Normal file
View file

@ -0,0 +1,55 @@
/*
* Skin: orange
* ---------
*/
@import "../bootstrap-less/mixins.less";
@import "../bootstrap-less/variables.less";
@import "../variables.less";
@import "../mixins.less";
.skin-orange-light {
//Navbar
.main-header {
.navbar {
.navbar-variant(@orange; #fff);
.sidebar-toggle {
color: #fff;
&:hover {
background-color: darken(@orange, 5%);
}
}
@media(max-width: @screen-header-collapse) {
.dropdown-menu {
li {
&.divider {
background-color: rgba(255,255,255,0.1);
}
a {
color: #fff;
&:hover {
background: darken(@orange, 5%);
}
}
}
}
}
}
//Logo
.logo {
.logo-variant(@orange);
}
li.user-header {
background-color: @orange;
}
}
//Content Header
.content-header {
background: transparent;
}
//Create the sidebar skin
.skin-light-sidebar(@orange);
}

102
resources/assets/less/skins/skin-orange.less Normal file
View file

@ -0,0 +1,102 @@
/*
* Skin: Orange
* ----------
*/
@import "../bootstrap-less/mixins.less";
@import "../bootstrap-less/variables.less";
@import "../variables.less";
@import "../mixins.less";
.skin-orange {
//Navbar
.main-header {
.navbar {
.navbar-variant(@orange; #fff);
.sidebar-toggle {
color: #fff;
&:hover {
background-color: darken(@orange, 5%);
}
}
@media (max-width: @screen-header-collapse) {
.dropdown-menu {
li {
&.divider {
background-color: rgba(255, 255, 255, 0.1);
}
a {
color: #fff;
&:hover {
background: darken(@orange, 5%);
}
}
}
}
}
}
//Logo
li.user-header {
background-color: @orange;
}
}
//Content Header
.content-header {
background: transparent;
}
//Create the sidebar skin
.skin-dark-sidebar(@orange);
}
.skin-orange.layout-top-nav .main-header > .logo {
.logo-variant {
background-color: none;
}
}
.btn, .btn:hover {
&.btn-primary, .btn-primary:link {
background-color: darken(@orange, 10%);
border-color: darken(@orange, 20%);
color: #fff;
}
&a.btn-primary:hover {
background-color: darken(@orange, 20%);
border-color: darken(@orange, 20%);
color: #fff;
}
&.btn-white:link {
color: darken(@orange, 10%);
color: #fff;
}
&.btn-white:hover {
color: darken(@orange, 30%);
color: #fff;
}
}
a {
color: @orange;
&:hover {
color: darken(@orange, 20%);
}
&:visited {
color: @orange;
}
}
.text-primary {
color: darken(@orange, 20%);
}

4
resources/assets/less/skins/skin-purple-light.less
View file

@ -3,8 +3,8 @@
* ------------ * ------------
*/ */
@import "../../bootstrap-less/mixins.less"; @import "../bootstrap-less/mixins.less";
@import "../../bootstrap-less/variables.less"; @import "../bootstrap-less/variables.less";
@import "../variables.less"; @import "../variables.less";
@import "../mixins.less"; @import "../mixins.less";

65
resources/assets/less/skins/skin-purple.less
View file

@ -1,10 +1,9 @@
/* /*
* Skin: Purple * Skin: Purple
* ------------ * ----------
*/ */
@import "../bootstrap-less/mixins.less";
@import "../../bootstrap-less/mixins.less"; @import "../bootstrap-less/variables.less";
@import "../../bootstrap-less/variables.less";
@import "../variables.less"; @import "../variables.less";
@import "../mixins.less"; @import "../mixins.less";
@ -19,11 +18,11 @@
background-color: darken(@purple, 5%); background-color: darken(@purple, 5%);
} }
} }
@media(max-width: @screen-header-collapse) { @media (max-width: @screen-header-collapse) {
.dropdown-menu { .dropdown-menu {
li { li {
&.divider { &.divider {
background-color: rgba(255,255,255,0.1); background-color: rgba(255, 255, 255, 0.1);
} }
a { a {
color: #fff; color: #fff;
@ -36,9 +35,6 @@
} }
} }
//Logo //Logo
.logo {
.logo-variant(darken(@purple, 5%));
}
li.user-header { li.user-header {
background-color: @purple; background-color: @purple;
@ -53,3 +49,54 @@
//Create the sidebar skin //Create the sidebar skin
.skin-dark-sidebar(@purple); .skin-dark-sidebar(@purple);
} }
.skin-purple.layout-top-nav .main-header > .logo {
.logo-variant {
background-color: none;
}
}
.btn, .btn:hover {
&.btn-primary, .btn-primary:link {
background-color: darken(@purple, 10%);
border-color: darken(@purple, 20%);
color: #fff;
}
&a.btn-primary:hover {
background-color: darken(@purple, 20%);
border-color: darken(@purple, 20%);
color: #fff;
}
&.btn-white:link {
color: darken(@purple, 10%);
color: #fff;
}
&.btn-white:hover {
color: darken(@purple, 30%);
color: #fff;
}
}
a {
color: @purple;
&:hover {
color: darken(@purple, 20%);
}
&:visited {
color: @purple;
}
}
.text-primary {
color: darken(@purple, 20%);
}

9
resources/assets/less/skins/skin-red-light.less
View file

@ -3,8 +3,8 @@
* --------- * ---------
*/ */
@import "../../bootstrap-less/mixins.less"; @import "../bootstrap-less/mixins.less";
@import "../../bootstrap-less/variables.less"; @import "../bootstrap-less/variables.less";
@import "../variables.less"; @import "../variables.less";
@import "../mixins.less"; @import "../mixins.less";
@ -53,3 +53,8 @@
//Create the sidebar skin //Create the sidebar skin
.skin-light-sidebar(@red); .skin-light-sidebar(@red);
} }
a {
color: @red;
}

65
resources/assets/less/skins/skin-red.less
View file

@ -1,10 +1,9 @@
/* /*
* Skin: Red * Skin: Red
* --------- * ----------
*/ */
@import "../bootstrap-less/mixins.less";
@import "../../bootstrap-less/mixins.less"; @import "../bootstrap-less/variables.less";
@import "../../bootstrap-less/variables.less";
@import "../variables.less"; @import "../variables.less";
@import "../mixins.less"; @import "../mixins.less";
@ -19,11 +18,11 @@
background-color: darken(@red, 5%); background-color: darken(@red, 5%);
} }
} }
@media(max-width: @screen-header-collapse) { @media (max-width: @screen-header-collapse) {
.dropdown-menu { .dropdown-menu {
li { li {
&.divider { &.divider {
background-color: rgba(255,255,255,0.1); background-color: rgba(255, 255, 255, 0.1);
} }
a { a {
color: #fff; color: #fff;
@ -36,9 +35,6 @@
} }
} }
//Logo //Logo
.logo {
.logo-variant(darken(@red, 5%));
}
li.user-header { li.user-header {
background-color: @red; background-color: @red;
@ -53,3 +49,54 @@
//Create the sidebar skin //Create the sidebar skin
.skin-dark-sidebar(@red); .skin-dark-sidebar(@red);
} }
.skin-red.layout-top-nav .main-header > .logo {
.logo-variant {
background-color: none;
}
}
.btn, .btn:hover {
&.btn-primary, .btn-primary:link {
background-color: darken(@red, 10%);
border-color: darken(@red, 20%);
color: #fff;
}
&a.btn-primary:hover {
background-color: darken(@red, 20%);
border-color: darken(@red, 20%);
color: #fff;
}
&.btn-white:link {
color: darken(@red, 10%);
color: #fff;
}
&.btn-white:hover {
color: darken(@red, 30%);
color: #fff;
}
}
a {
color: @red;
&:hover {
color: darken(@red, 20%);
}
&:visited {
color: @red;
}
}
.text-primary {
color: darken(@red, 20%);
}

8
resources/assets/less/skins/skin-yellow-light.less
View file

@ -1,10 +1,10 @@
/* /*
* Skin: Yellow * Skin: yellow
* ------------ * ---------
*/ */
@import "../../bootstrap-less/mixins.less"; @import "../bootstrap-less/mixins.less";
@import "../../bootstrap-less/variables.less"; @import "../bootstrap-less/variables.less";
@import "../variables.less"; @import "../variables.less";
@import "../mixins.less"; @import "../mixins.less";

65
resources/assets/less/skins/skin-yellow.less
View file

@ -1,10 +1,9 @@
/* /*
* Skin: Yellow * Skin: Yellow
* ------------ * ----------
*/ */
@import "../bootstrap-less/mixins.less";
@import "../../bootstrap-less/mixins.less"; @import "../bootstrap-less/variables.less";
@import "../../bootstrap-less/variables.less";
@import "../variables.less"; @import "../variables.less";
@import "../mixins.less"; @import "../mixins.less";
@ -19,11 +18,11 @@
background-color: darken(@yellow, 5%); background-color: darken(@yellow, 5%);
} }
} }
@media(max-width: @screen-header-collapse) { @media (max-width: @screen-header-collapse) {
.dropdown-menu { .dropdown-menu {
li { li {
&.divider { &.divider {
background-color: rgba(255,255,255,0.1); background-color: rgba(255, 255, 255, 0.1);
} }
a { a {
color: #fff; color: #fff;
@ -36,9 +35,6 @@
} }
} }
//Logo //Logo
.logo {
.logo-variant(darken(@yellow, 5%));
}
li.user-header { li.user-header {
background-color: @yellow; background-color: @yellow;
@ -53,3 +49,54 @@
//Create the sidebar skin //Create the sidebar skin
.skin-dark-sidebar(@yellow); .skin-dark-sidebar(@yellow);
} }
.skin-yellow.layout-top-nav .main-header > .logo {
.logo-variant {
background-color: none;
}
}
.btn, .btn:hover {
&.btn-primary, .btn-primary:link {
background-color: darken(@yellow, 10%);
border-color: darken(@yellow, 20%);
color: #fff;
}
&a.btn-primary:hover {
background-color: darken(@yellow, 20%);
border-color: darken(@yellow, 20%);
color: #fff;
}
&.btn-white:link {
color: darken(@yellow, 10%);
color: #fff;
}
&.btn-white:hover {
color: darken(@yellow, 30%);
color: #fff;
}
}
a {
color: @yellow;
&:hover {
color: darken(@yellow, 20%);
}
&:visited {
color: @yellow;
}
}
.text-primary {
color: darken(@yellow, 20%);
}