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-purple.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 "../mixins.less";
/* skin-black navbar */
.skin-black-light {
//Navbar & Logo
//Navbar
.main-header {
.box-shadow(0px 1px 1px rgba(0, 0, 0, 0.05));
.navbar-toggle {
color: #333;
}
.navbar-brand {
color: #333;
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 {
.navbar-variant(@black; #fff);
.sidebar-toggle {
color: #fff;
&:hover {
background-color: darken(@black, 5%);
}
}
.navbar-custom-menu .navbar-nav,
.navbar-right {
> li {
> a {
border-left: 1px solid #eee;
border-right-width: 0;
@media(max-width: @screen-header-collapse) {
.dropdown-menu {
li {
&.divider {
background-color: rgba(255,255,255,0.1);
}
a {
color: #fff;
&:hover {
background: darken(@black, 5%);
}
}
}
}
}
}
> .logo {
.logo-variant(#fff; #333);
border-right: 1px solid #eee;
@media (max-width: @screen-header-collapse) {
.logo-variant(#222; #fff);
border-right: none;
}
//Logo
.logo {
.logo-variant(@black);
}
li.user-header {
background-color: #222;
background-color: @black;
}
}
//Content Header
.content-header {
background: transparent;
box-shadow: none;
}
//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
* -----------
* ----------
*/
@import "../../bootstrap-less/mixins.less";
@import "../../bootstrap-less/variables.less";
@import "../bootstrap-less/mixins.less";
@import "../bootstrap-less/variables.less";
@import "../variables.less";
@import "../mixins.less";
/* skin-black navbar */
.skin-black {
//Navbar & Logo
//Navbar
.main-header {
.box-shadow(0px 1px 1px rgba(0, 0, 0, 0.05));
.navbar-toggle {
color: #333;
}
.navbar-brand {
color: #333;
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 {
.navbar-variant(@black; #fff);
.sidebar-toggle {
color: #fff;
&:hover {
background-color: darken(@black, 5%);
}
}
.navbar-custom-menu .navbar-nav,
.navbar-right {
> li {
> a {
border-left: 1px solid #eee;
border-right-width: 0;
@media (max-width: @screen-header-collapse) {
.dropdown-menu {
li {
&.divider {
background-color: rgba(255, 255, 255, 0.1);
}
a {
color: #fff;
&:hover {
background: darken(@black, 5%);
}
}
}
}
}
}
> .logo {
.logo-variant(#fff; #333);
border-right: 1px solid #eee;
@media (max-width: @screen-header-collapse) {
.logo-variant(#222; #fff);
border-right: none;
}
}
//Logo
li.user-header {
background-color: #222;
background-color: @black;
}
}
//Content Header
.content-header {
background: transparent;
box-shadow: none;
}
//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
* ----------
*/
@import "../../bootstrap-less/mixins.less";
@import "../../bootstrap-less/variables.less";
@import "../bootstrap-less/mixins.less";
@import "../bootstrap-less/variables.less";
@import "../variables.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 "../../less/bootstrap-less/variables.less";
@import "../bootstrap-less/mixins.less";
@import "../bootstrap-less/variables.less";
@import "../variables.less";
@import "../mixins.less";
.skin-blue {
.skin-light-blue {
//Navbar
.main-header {
.navbar {
@ -50,8 +50,53 @@
.skin-dark-sidebar(@light-blue);
}
.skin-blue.layout-top-nav .main-header > .logo {
.skin-light-blue.layout-top-nav .main-header > .logo {
.logo-variant {
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/variables.less";
@import "../bootstrap-less/mixins.less";
@import "../bootstrap-less/variables.less";
@import "../variables.less";
@import "../mixins.less";

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

@ -1,10 +1,9 @@
/*
* Skin: Green
* -----------
* ----------
*/
@import "../../bootstrap-less/mixins.less";
@import "../../bootstrap-less/variables.less";
@import "../bootstrap-less/mixins.less";
@import "../bootstrap-less/variables.less";
@import "../variables.less";
@import "../mixins.less";
@ -19,11 +18,11 @@
background-color: darken(@green, 5%);
}
}
@media(max-width: @screen-header-collapse) {
@media (max-width: @screen-header-collapse) {
.dropdown-menu {
li {
&.divider {
background-color: rgba(255,255,255,0.1);
background-color: rgba(255, 255, 255, 0.1);
}
a {
color: #fff;
@ -36,9 +35,6 @@
}
}
//Logo
.logo {
.logo-variant(darken(@green, 5%));
}
li.user-header {
background-color: @green;
@ -52,5 +48,55 @@
//Create the sidebar skin
.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/variables.less";
@import "../bootstrap-less/mixins.less";
@import "../bootstrap-less/variables.less";
@import "../variables.less";
@import "../mixins.less";

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

@ -1,10 +1,9 @@
/*
* Skin: Purple
* ------------
* ----------
*/
@import "../../bootstrap-less/mixins.less";
@import "../../bootstrap-less/variables.less";
@import "../bootstrap-less/mixins.less";
@import "../bootstrap-less/variables.less";
@import "../variables.less";
@import "../mixins.less";
@ -19,11 +18,11 @@
background-color: darken(@purple, 5%);
}
}
@media(max-width: @screen-header-collapse) {
@media (max-width: @screen-header-collapse) {
.dropdown-menu {
li {
&.divider {
background-color: rgba(255,255,255,0.1);
background-color: rgba(255, 255, 255, 0.1);
}
a {
color: #fff;
@ -36,9 +35,6 @@
}
}
//Logo
.logo {
.logo-variant(darken(@purple, 5%));
}
li.user-header {
background-color: @purple;
@ -53,3 +49,54 @@
//Create the sidebar skin
.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/variables.less";
@import "../bootstrap-less/mixins.less";
@import "../bootstrap-less/variables.less";
@import "../variables.less";
@import "../mixins.less";
@ -53,3 +53,8 @@
//Create the sidebar skin
.skin-light-sidebar(@red);
}
a {
color: @red;
}

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

@ -1,10 +1,9 @@
/*
* Skin: Red
* ---------
* ----------
*/
@import "../../bootstrap-less/mixins.less";
@import "../../bootstrap-less/variables.less";
@import "../bootstrap-less/mixins.less";
@import "../bootstrap-less/variables.less";
@import "../variables.less";
@import "../mixins.less";
@ -19,11 +18,11 @@
background-color: darken(@red, 5%);
}
}
@media(max-width: @screen-header-collapse) {
@media (max-width: @screen-header-collapse) {
.dropdown-menu {
li {
&.divider {
background-color: rgba(255,255,255,0.1);
background-color: rgba(255, 255, 255, 0.1);
}
a {
color: #fff;
@ -36,9 +35,6 @@
}
}
//Logo
.logo {
.logo-variant(darken(@red, 5%));
}
li.user-header {
background-color: @red;
@ -53,3 +49,54 @@
//Create the sidebar skin
.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/variables.less";
@import "../bootstrap-less/mixins.less";
@import "../bootstrap-less/variables.less";
@import "../variables.less";
@import "../mixins.less";

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

@ -1,10 +1,9 @@
/*
* Skin: Yellow
* ------------
* ----------
*/
@import "../../bootstrap-less/mixins.less";
@import "../../bootstrap-less/variables.less";
@import "../bootstrap-less/mixins.less";
@import "../bootstrap-less/variables.less";
@import "../variables.less";
@import "../mixins.less";
@ -19,11 +18,11 @@
background-color: darken(@yellow, 5%);
}
}
@media(max-width: @screen-header-collapse) {
@media (max-width: @screen-header-collapse) {
.dropdown-menu {
li {
&.divider {
background-color: rgba(255,255,255,0.1);
background-color: rgba(255, 255, 255, 0.1);
}
a {
color: #fff;
@ -36,9 +35,6 @@
}
}
//Logo
.logo {
.logo-variant(darken(@yellow, 5%));
}
li.user-header {
background-color: @yellow;
@ -53,3 +49,54 @@
//Create the sidebar skin
.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%);
}