mirror of
https://github.com/snipe/snipe-it.git
synced 2024-12-25 05:34:06 -08:00
New dark background skins
This commit is contained in:
snipe
parent
da6830225a
commit
623655b6f6
Binary file not shown.
BIN
public/css/dist/all.css
vendored
BIN
public/css/dist/all.css
vendored
Binary file not shown.
Binary file not shown.
BIN
public/css/skins/skin-black-dark.css
Normal file
BIN
public/css/skins/skin-black-dark.css
Normal file
Binary file not shown.
BIN
public/css/skins/skin-blue-dark.css
Normal file
BIN
public/css/skins/skin-blue-dark.css
Normal file
Binary file not shown.
BIN
public/css/skins/skin-green-dark.css
Normal file
BIN
public/css/skins/skin-green-dark.css
Normal file
Binary file not shown.
BIN
public/css/skins/skin-orange-dark.css
Normal file
BIN
public/css/skins/skin-orange-dark.css
Normal file
Binary file not shown.
BIN
public/css/skins/skin-purple-dark.css
Normal file
BIN
public/css/skins/skin-purple-dark.css
Normal file
Binary file not shown.
BIN
public/css/skins/skin-red-dark.css
Normal file
BIN
public/css/skins/skin-red-dark.css
Normal file
Binary file not shown.
BIN
public/css/skins/skin-yellow-dark.css
Normal file
BIN
public/css/skins/skin-yellow-dark.css
Normal file
Binary file not shown.
|
|
@ -1,23 +1,23 @@
|
|||
{
|
||||
"/css/AdminLTE.css": "/css/AdminLTE.css?id=c9e775e094748486ca7f",
|
||||
"/css/app.css": "/css/app.css?id=c3b4e5ea2063d7f76241",
|
||||
"/css/overrides.css": "/css/overrides.css?id=3dbd553dfa981e846eb1",
|
||||
"/css/overrides.css": "/css/overrides.css?id=46cd11d0d594605d6cb3",
|
||||
"/css/skins/skin-blue.css": "/css/skins/skin-blue.css?id=f6abab482516a91a89e7",
|
||||
"/css/skins/skin-red.css": "/css/skins/skin-red.css?id=0867fa7d84bc0a7f7494",
|
||||
"/css/skins/skin-contrast.css": "/css/skins/skin-contrast.css?id=198241cc1caeea5fd84c",
|
||||
"/css/skins/skin-green.css": "/css/skins/skin-green.css?id=b6cf886414d55a2c4593",
|
||||
"/css/skins/skin-green-light.css": "/css/skins/skin-green-light.css?id=4538c530d3deb40030f8",
|
||||
"/css/skins/skin-green-dark.css": "/css/skins/skin-green-dark.css?id=7422ce0a47eab9235ccc",
|
||||
"/css/skins/skin-black.css": "/css/skins/skin-black.css?id=35602987835e5d50d162",
|
||||
"/css/skins/skin-black-light.css": "/css/skins/skin-black-light.css?id=14301c0094c92bd4f3d3",
|
||||
"/css/skins/skin-red-light.css": "/css/skins/skin-red-light.css?id=8861c2779109f53aa9d5",
|
||||
"/css/skins/skin-black-dark.css": "/css/skins/skin-black-dark.css?id=51db9e64f221d94b1f59",
|
||||
"/css/skins/skin-red-dark.css": "/css/skins/skin-red-dark.css?id=6b57ccc21211b9c5bee0",
|
||||
"/css/skins/skin-purple.css": "/css/skins/skin-purple.css?id=a4944e6f318c5d73101b",
|
||||
"/css/skins/skin-purple-light.css": "/css/skins/skin-purple-light.css?id=71a5adafc28dc36336c8",
|
||||
"/css/skins/skin-purple-dark.css": "/css/skins/skin-purple-dark.css?id=177d233eef8861582402",
|
||||
"/css/skins/skin-yellow.css": "/css/skins/skin-yellow.css?id=29f2ee479da32c47179a",
|
||||
"/css/skins/skin-yellow-light.css": "/css/skins/skin-yellow-light.css?id=88d378573f5198c68ce8",
|
||||
"/css/skins/skin-blue-light.css": "/css/skins/skin-blue-light.css?id=3cf6131691282e45ef5f",
|
||||
"/css/skins/skin-orange-light.css": "/css/skins/skin-orange-light.css?id=73b0166bcb5453eda6c2",
|
||||
"/css/skins/skin-yellow-dark.css": "/css/skins/skin-yellow-dark.css?id=6344ab37404783bc2571",
|
||||
"/css/skins/skin-blue-dark.css": "/css/skins/skin-blue-dark.css?id=64b2bc1211160858d597",
|
||||
"/css/skins/skin-orange-dark.css": "/css/skins/skin-orange-dark.css?id=e4536d051e0e8c5e297c",
|
||||
"/css/skins/skin-orange.css": "/css/skins/skin-orange.css?id=74a1642e18e6fb7643b6",
|
||||
"/css/dist/all.css": "/css/dist/all.css?id=0546cfd78457abc87935",
|
||||
"/css/build/all.css": "/css/build/all.css?id=0546cfd78457abc87935",
|
||||
"/css/dist/all.css": "/css/dist/all.css?id=d273313a815e0853368e",
|
||||
"/css/build/all.css": "/css/build/all.css?id=d273313a815e0853368e",
|
||||
"/js/build/all.js": "/js/build/all.js?id=1b74d50ebd61899b4345"
|
||||
}
|
||||
|
|
@ -1,4 +1,20 @@
|
|||
.skin-blue .main-header .logo {
|
||||
.skin-red
|
||||
.skin-purple
|
||||
.skin-blue
|
||||
.skin-black
|
||||
.skin-orange
|
||||
.skin-yellow
|
||||
.skin-green
|
||||
.skin-red-dark
|
||||
.skin-purple-dark
|
||||
.skin-blue-dark
|
||||
.skin-black-dark
|
||||
.skin-orange-dark
|
||||
.skin-yellow-dark
|
||||
.skin-green-dark
|
||||
.skin-contrast
|
||||
.main-header
|
||||
.logo {
|
||||
background-color: inherit;
|
||||
}
|
||||
.main-header .logo {
|
||||
|
|
@ -102,7 +118,24 @@ a.accordion-header {
|
|||
padding-top: 10px;
|
||||
}
|
||||
|
||||
.skin-blue .main-header .navbar .dropdown-menu li a {
|
||||
.skin-red
|
||||
.skin-purple
|
||||
.skin-blue
|
||||
.skin-black
|
||||
.skin-orange
|
||||
.skin-yellow
|
||||
.skin-green
|
||||
.skin-red-dark
|
||||
.skin-purple-dark
|
||||
.skin-blue-dark
|
||||
.skin-black-dark
|
||||
.skin-orange-dark
|
||||
.skin-yellow-dark
|
||||
.skin-green-dark
|
||||
.skin-contrast
|
||||
.main-header
|
||||
.navbar
|
||||
.dropdown-menu li a {
|
||||
//color: inherit;
|
||||
}
|
||||
|
||||
|
|
@ -262,7 +295,7 @@ a.accordion-header {
|
|||
.bs-wizard > .bs-wizard-step.disabled a.bs-wizard-dot{ pointer-events: none; }
|
||||
/*END Form Wizard*/
|
||||
|
||||
.left-navblock{
|
||||
.left-navblock {
|
||||
display: inline-block;
|
||||
float: left;
|
||||
text-align: left;
|
||||
|
|
@ -271,7 +304,24 @@ a.accordion-header {
|
|||
/* adjust based on your layout */
|
||||
|
||||
}
|
||||
.skin-blue .main-header .navbar .dropdown-menu li a {
|
||||
.skin-red
|
||||
.skin-purple
|
||||
.skin-blue
|
||||
.skin-black
|
||||
.skin-orange
|
||||
.skin-yellow
|
||||
.skin-green
|
||||
.skin-red-dark
|
||||
.skin-purple-dark
|
||||
.skin-blue-dark
|
||||
.skin-black-dark
|
||||
.skin-orange-dark
|
||||
.skin-yellow-dark
|
||||
.skin-green-dark
|
||||
.skin-contrast
|
||||
.main-header
|
||||
.navbar
|
||||
.dropdown-menu li a {
|
||||
color: #333;
|
||||
}
|
||||
|
||||
|
|
|
|||
307
resources/assets/less/skins/skin-black-dark.less
Normal file
307
resources/assets/less/skins/skin-black-dark.less
Normal file
|
|
@ -0,0 +1,307 @@
|
|||
/*
|
||||
* Skin: black
|
||||
* ----------
|
||||
*/
|
||||
@import "../bootstrap-less/mixins.less";
|
||||
@import "../bootstrap-less/variables.less";
|
||||
@import "../variables.less";
|
||||
@import "../mixins.less";
|
||||
|
||||
.skin-black-dark {
|
||||
//Navbar
|
||||
.main-header {
|
||||
.navbar {
|
||||
.navbar-variant(@black; #fff);
|
||||
.sidebar-toggle {
|
||||
color: #fff;
|
||||
&:hover {
|
||||
background-color: darken(@black, 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(@black, 5%);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
//Logo
|
||||
|
||||
li.user-header {
|
||||
background-color: @black;
|
||||
}
|
||||
}
|
||||
|
||||
//Content Header
|
||||
.content-header {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
//Create the sidebar skin
|
||||
.skin-dark-sidebar(@black);
|
||||
}
|
||||
|
||||
.skin-black-dark.layout-top-nav .main-header > .logo {
|
||||
.logo-variant {
|
||||
background-color: none;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
.btn, .btn:hover {
|
||||
|
||||
|
||||
&.btn-primary, .btn-primary:link {
|
||||
background-color: darken(@black, 10%);
|
||||
border-color: darken(@black, 20%);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
|
||||
&a.btn-primary:hover {
|
||||
background-color: darken(@black, 20%);
|
||||
border-color: darken(@black, 20%);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
&.btn-white:link {
|
||||
background-color: darken(@black, 10%);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
&.btn-white:hover {
|
||||
background-color: darken(@black, 30%);
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
a {
|
||||
color: @black;
|
||||
&:hover {
|
||||
color: darken(@black, 20%);
|
||||
}
|
||||
&:visited {
|
||||
color: @black;
|
||||
}
|
||||
}
|
||||
|
||||
.text-primary {
|
||||
color: darken(@black, 20%);
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
:root {
|
||||
--background: #222;
|
||||
--back-main: #333;
|
||||
--back-sub: #444;
|
||||
--header: @black; /* Use same as Header picker */
|
||||
--text-main: #FFF;
|
||||
--text-sub: #BBB;
|
||||
--link: lighten(@black, 10%); /* Use same as Header picker */
|
||||
--nav-link: #FFF; /* Use same as Header picker */
|
||||
--light-link: lighten(@black, 30%); /* Use same as Header picker */
|
||||
}
|
||||
|
||||
.main-header .navbar, .main-header .logo {
|
||||
background-color: var(--header);
|
||||
background: -webkit-linear-gradient(top, var(--header) 0%,var(--header) 100%);
|
||||
background: linear-gradient(to bottom, var(--header) 0%,var(--header) 100%);
|
||||
border-color: var(--header);
|
||||
}
|
||||
|
||||
.navbar-nav>li>a:link {
|
||||
color: var(--nav-link);
|
||||
}
|
||||
|
||||
.modal-content {
|
||||
background-color: var(--back-main);
|
||||
color: var(--text-main);
|
||||
}
|
||||
|
||||
a, a:link, a:visited, .btn-primary.hover {
|
||||
color: var(--header);
|
||||
}
|
||||
#accessoriesTable>tbody>tr>td>nobr>a>i.fa {
|
||||
color: var(--text-main);
|
||||
}
|
||||
#assetsListingTable>tbody>tr>td>nobr>a>i.fa {
|
||||
color: var(--text-main);
|
||||
}
|
||||
#assetsListingTable>tbody>tr.selected>td {
|
||||
background-color: var(--back-main);
|
||||
}
|
||||
body {
|
||||
color: var(--text-main);
|
||||
}
|
||||
.box, .box.box-default {
|
||||
border-top: 3px solid var(--header);
|
||||
border-top-color: var(--header);
|
||||
}
|
||||
.box-body, .box-footer, .box-header {
|
||||
background-color: var(--back-sub);
|
||||
color: var(--text-main);
|
||||
}
|
||||
.btn-default{
|
||||
background-color: var(--back-main);
|
||||
color: var(--header);
|
||||
}
|
||||
.btn-default:active, .btn-default:focus, .btn-default:hover, .btn-default.active {
|
||||
background-color: var(--back-sub);
|
||||
color: var(--header);
|
||||
}
|
||||
.btn-primary, .btn-primary.hover, .btn-primary:active, .text-blue {
|
||||
color: var(--text-main)!important;
|
||||
}
|
||||
.btn-primary:hover {
|
||||
background-color: var(--back-main);
|
||||
color: var(--header)!important;
|
||||
}
|
||||
#componentsTable>tbody>tr>td>nobr>a>i.fa {
|
||||
color: var(--text-main);
|
||||
}
|
||||
#consumablesTable>tbody>tr>td>nobr>a>i.fa {
|
||||
color: var(--text-main);
|
||||
}
|
||||
.content-wrapper {
|
||||
background-color: var(--background);
|
||||
}
|
||||
#create-form>div>div>div>span>i.fa {
|
||||
background-color: var(--back-sub);
|
||||
color: var(--header);
|
||||
}
|
||||
.datepicker .datepicker-switch:hover, .datepicker .next:hover, .datepicker .prev:hover, .datepicker tfoot tr th:hover, .datepicker table tr td.day.focused, .datepicker table tr td.day:hover {
|
||||
background-color: var(--header);
|
||||
}
|
||||
.datepicker.dropdown-menu {
|
||||
background-color: var(--back-main);
|
||||
color: var(--text-main);
|
||||
}
|
||||
#details>div>div>div>table {
|
||||
background-color: transparent;
|
||||
}
|
||||
.dropdown-menu, .dropdown-menu>li>a {
|
||||
background-color: var(--back-sub);
|
||||
color: var(--header);
|
||||
}
|
||||
.dropdown-menu>li>a:hover {
|
||||
background-color: var(--back-main);
|
||||
color: var(--text-main);
|
||||
}
|
||||
.form-control {
|
||||
background-color: var(--back-main);
|
||||
color: var(--text-main);
|
||||
}
|
||||
h1, h2, h3, h4, h5, h6, p {
|
||||
color: var(--text-main);
|
||||
}
|
||||
.help-block {
|
||||
color: var(--text-sub);
|
||||
}
|
||||
input[type=text], input[type=search] {
|
||||
background-color: var(--back-sub);
|
||||
color: var(--text-main);
|
||||
}
|
||||
.input-group, .input-group-addon {
|
||||
background-color: var(--back-sub)!important;
|
||||
color: var(--text-main);
|
||||
}
|
||||
#licensesTable>tbody>tr>td>nobr>a>i.fa {
|
||||
color: var(--text-main);
|
||||
}
|
||||
.main-footer {
|
||||
background-color: var(--back-main);
|
||||
color: var(--text-main);
|
||||
}
|
||||
.nav-tabs-custom>.nav-tabs>li>a, .nav-tabs-custom>.nav-tabs>li.active>a {
|
||||
color: var(--text-main);
|
||||
}
|
||||
.nav-tabs-custom>.nav-tabs>li.active {
|
||||
border-top-color: var(--header);
|
||||
}
|
||||
.nav-tabs-custom>.nav-tabs>li.active>a {
|
||||
background-color: var(--back-main);
|
||||
}
|
||||
.nav-tabs-custom>.nav-tabs>li.active>a:hover {
|
||||
background-color: var(--back-sub);
|
||||
color: var(--text-main);
|
||||
}
|
||||
.nav-tabs-custom, .nav-tabs-custom>.tab-content {
|
||||
background-color: var(--back-main);
|
||||
}
|
||||
.navbar-nav>.tasks-menu>.dropdown-menu>li.header {
|
||||
background-color: var(--back-main);
|
||||
color: var(--header);
|
||||
}
|
||||
.open>.dropdown-toggle.btn-default {
|
||||
background-color: var(--back-sub);
|
||||
color: var(--header);
|
||||
}
|
||||
.panel {
|
||||
background-color: var(--back-sub);
|
||||
color: var(--text-main);
|
||||
}
|
||||
.panel-default>.panel-heading {
|
||||
background-color: var(--back-main);
|
||||
color: var(--header);
|
||||
}
|
||||
.select2-container--default .select2-results__option[aria-selected=true], .select2-container--default .select2-results__option[aria-selected=true]:hover {
|
||||
background-color: var(--back-sub);
|
||||
color: var(--header);
|
||||
}
|
||||
.select2-container--default .select2-results__option--highlighted[aria-selected] {
|
||||
background-color: var(--header);
|
||||
color: var(--back-main);
|
||||
}
|
||||
.select2-container--default .select2-selection--single .select2-selection__rendered {
|
||||
color: var(--text-main);
|
||||
}
|
||||
.select2-selection--single {
|
||||
background-color: var(--back-sub)!important;
|
||||
color: var(--text-main)!important;
|
||||
}
|
||||
.select2-dropdown {
|
||||
background-color: var(--back-main);
|
||||
color: var(--text-main);
|
||||
}
|
||||
.skin-blue-dark .main-header .navbar .dropdown-menu li a {
|
||||
color: var(--header);
|
||||
}
|
||||
.skin-blue-dark .sidebar-menu>li.active>a, .skin-blue .sidebar-menu>li:hover>a, .sidebar-toggle:hover {
|
||||
background-color: var(--header)!important;
|
||||
}
|
||||
.tab-content, .tab-pane {
|
||||
background-color: var(--back-main);
|
||||
color: var(--text-main);
|
||||
}
|
||||
.table-striped>tbody>tr:nth-of-type(odd) {
|
||||
background-color: var(--back-sub);
|
||||
}
|
||||
#webui>div>div>div>div>div>table>tbody>tr>td>a>i.fa {
|
||||
color: var(--text-main);
|
||||
}
|
||||
|
||||
a {
|
||||
color: var(--link);
|
||||
&:link {
|
||||
color: var(--link);
|
||||
}
|
||||
&:hover {
|
||||
color: var(--light-link);
|
||||
}
|
||||
&:visited {
|
||||
color: var(--link);
|
||||
}
|
||||
}
|
||||
307
resources/assets/less/skins/skin-blue-dark.less
Normal file
307
resources/assets/less/skins/skin-blue-dark.less
Normal file
|
|
@ -0,0 +1,307 @@
|
|||
/*
|
||||
* Skin: Purple
|
||||
* ----------
|
||||
*/
|
||||
@import "../bootstrap-less/mixins.less";
|
||||
@import "../bootstrap-less/variables.less";
|
||||
@import "../variables.less";
|
||||
@import "../mixins.less";
|
||||
|
||||
.skin-blue-dark {
|
||||
//Navbar
|
||||
.main-header {
|
||||
.navbar {
|
||||
.navbar-variant(@purple; #fff);
|
||||
.sidebar-toggle {
|
||||
color: #fff;
|
||||
&:hover {
|
||||
background-color: darken(@purple, 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(@purple, 5%);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
//Logo
|
||||
|
||||
li.user-header {
|
||||
background-color: @purple;
|
||||
}
|
||||
}
|
||||
|
||||
//Content Header
|
||||
.content-header {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
//Create the sidebar skin
|
||||
.skin-dark-sidebar(@purple);
|
||||
}
|
||||
|
||||
.skin-blue-dark.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 {
|
||||
background-color: darken(@purple, 10%);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
&.btn-white:hover {
|
||||
background-color: darken(@purple, 30%);
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
a {
|
||||
color: @purple;
|
||||
&:hover {
|
||||
color: darken(@purple, 20%);
|
||||
}
|
||||
&:visited {
|
||||
color: @purple;
|
||||
}
|
||||
}
|
||||
|
||||
.text-primary {
|
||||
color: darken(@purple, 20%);
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
:root {
|
||||
--background: #222;
|
||||
--back-main: #333;
|
||||
--back-sub: #444;
|
||||
--header: @purple; /* Use same as Header picker */
|
||||
--text-main: #FFF;
|
||||
--text-sub: #BBB;
|
||||
--link: lighten(@purple, 10%); /* Use same as Header picker */
|
||||
--nav-link: #FFF; /* Use same as Header picker */
|
||||
--light-link: lighten(@purple, 30%); /* Use same as Header picker */
|
||||
}
|
||||
|
||||
.main-header .navbar, .main-header .logo {
|
||||
background-color: var(--header);
|
||||
background: -webkit-linear-gradient(top, var(--header) 0%,var(--header) 100%);
|
||||
background: linear-gradient(to bottom, var(--header) 0%,var(--header) 100%);
|
||||
border-color: var(--header);
|
||||
}
|
||||
|
||||
.navbar-nav>li>a:link {
|
||||
color: var(--nav-link);
|
||||
}
|
||||
|
||||
.modal-content {
|
||||
background-color: var(--back-main);
|
||||
color: var(--text-main);
|
||||
}
|
||||
|
||||
a, a:link, a:visited, .btn-primary.hover {
|
||||
color: var(--header);
|
||||
}
|
||||
#accessoriesTable>tbody>tr>td>nobr>a>i.fa {
|
||||
color: var(--text-main);
|
||||
}
|
||||
#assetsListingTable>tbody>tr>td>nobr>a>i.fa {
|
||||
color: var(--text-main);
|
||||
}
|
||||
#assetsListingTable>tbody>tr.selected>td {
|
||||
background-color: var(--back-main);
|
||||
}
|
||||
body {
|
||||
color: var(--text-main);
|
||||
}
|
||||
.box, .box.box-default {
|
||||
border-top: 3px solid var(--header);
|
||||
border-top-color: var(--header);
|
||||
}
|
||||
.box-body, .box-footer, .box-header {
|
||||
background-color: var(--back-sub);
|
||||
color: var(--text-main);
|
||||
}
|
||||
.btn-default{
|
||||
background-color: var(--back-main);
|
||||
color: var(--header);
|
||||
}
|
||||
.btn-default:active, .btn-default:focus, .btn-default:hover, .btn-default.active {
|
||||
background-color: var(--back-sub);
|
||||
color: var(--header);
|
||||
}
|
||||
.btn-primary, .btn-primary.hover, .btn-primary:active, .text-blue {
|
||||
color: var(--text-main)!important;
|
||||
}
|
||||
.btn-primary:hover {
|
||||
background-color: var(--back-main);
|
||||
color: var(--header)!important;
|
||||
}
|
||||
#componentsTable>tbody>tr>td>nobr>a>i.fa {
|
||||
color: var(--text-main);
|
||||
}
|
||||
#consumablesTable>tbody>tr>td>nobr>a>i.fa {
|
||||
color: var(--text-main);
|
||||
}
|
||||
.content-wrapper {
|
||||
background-color: var(--background);
|
||||
}
|
||||
#create-form>div>div>div>span>i.fa {
|
||||
background-color: var(--back-sub);
|
||||
color: var(--header);
|
||||
}
|
||||
.datepicker .datepicker-switch:hover, .datepicker .next:hover, .datepicker .prev:hover, .datepicker tfoot tr th:hover, .datepicker table tr td.day.focused, .datepicker table tr td.day:hover {
|
||||
background-color: var(--header);
|
||||
}
|
||||
.datepicker.dropdown-menu {
|
||||
background-color: var(--back-main);
|
||||
color: var(--text-main);
|
||||
}
|
||||
#details>div>div>div>table {
|
||||
background-color: transparent;
|
||||
}
|
||||
.dropdown-menu, .dropdown-menu>li>a {
|
||||
background-color: var(--back-sub);
|
||||
color: var(--header);
|
||||
}
|
||||
.dropdown-menu>li>a:hover {
|
||||
background-color: var(--back-main);
|
||||
color: var(--text-main);
|
||||
}
|
||||
.form-control {
|
||||
background-color: var(--back-main);
|
||||
color: var(--text-main);
|
||||
}
|
||||
h1, h2, h3, h4, h5, h6, p {
|
||||
color: var(--text-main);
|
||||
}
|
||||
.help-block {
|
||||
color: var(--text-sub);
|
||||
}
|
||||
input[type=text], input[type=search] {
|
||||
background-color: var(--back-sub);
|
||||
color: var(--text-main);
|
||||
}
|
||||
.input-group, .input-group-addon {
|
||||
background-color: var(--back-sub)!important;
|
||||
color: var(--text-main);
|
||||
}
|
||||
#licensesTable>tbody>tr>td>nobr>a>i.fa {
|
||||
color: var(--text-main);
|
||||
}
|
||||
.main-footer {
|
||||
background-color: var(--back-main);
|
||||
color: var(--text-main);
|
||||
}
|
||||
.nav-tabs-custom>.nav-tabs>li>a, .nav-tabs-custom>.nav-tabs>li.active>a {
|
||||
color: var(--text-main);
|
||||
}
|
||||
.nav-tabs-custom>.nav-tabs>li.active {
|
||||
border-top-color: var(--header);
|
||||
}
|
||||
.nav-tabs-custom>.nav-tabs>li.active>a {
|
||||
background-color: var(--back-main);
|
||||
}
|
||||
.nav-tabs-custom>.nav-tabs>li.active>a:hover {
|
||||
background-color: var(--back-sub);
|
||||
color: var(--text-main);
|
||||
}
|
||||
.nav-tabs-custom, .nav-tabs-custom>.tab-content {
|
||||
background-color: var(--back-main);
|
||||
}
|
||||
.navbar-nav>.tasks-menu>.dropdown-menu>li.header {
|
||||
background-color: var(--back-main);
|
||||
color: var(--header);
|
||||
}
|
||||
.open>.dropdown-toggle.btn-default {
|
||||
background-color: var(--back-sub);
|
||||
color: var(--header);
|
||||
}
|
||||
.panel {
|
||||
background-color: var(--back-sub);
|
||||
color: var(--text-main);
|
||||
}
|
||||
.panel-default>.panel-heading {
|
||||
background-color: var(--back-main);
|
||||
color: var(--header);
|
||||
}
|
||||
.select2-container--default .select2-results__option[aria-selected=true], .select2-container--default .select2-results__option[aria-selected=true]:hover {
|
||||
background-color: var(--back-sub);
|
||||
color: var(--header);
|
||||
}
|
||||
.select2-container--default .select2-results__option--highlighted[aria-selected] {
|
||||
background-color: var(--header);
|
||||
color: var(--back-main);
|
||||
}
|
||||
.select2-container--default .select2-selection--single .select2-selection__rendered {
|
||||
color: var(--text-main);
|
||||
}
|
||||
.select2-selection--single {
|
||||
background-color: var(--back-sub)!important;
|
||||
color: var(--text-main)!important;
|
||||
}
|
||||
.select2-dropdown {
|
||||
background-color: var(--back-main);
|
||||
color: var(--text-main);
|
||||
}
|
||||
.skin-blue-dark .main-header .navbar .dropdown-menu li a {
|
||||
color: var(--header);
|
||||
}
|
||||
.skin-blue-dark .sidebar-menu>li.active>a, .skin-blue .sidebar-menu>li:hover>a, .sidebar-toggle:hover {
|
||||
background-color: var(--header)!important;
|
||||
}
|
||||
.tab-content, .tab-pane {
|
||||
background-color: var(--back-main);
|
||||
color: var(--text-main);
|
||||
}
|
||||
.table-striped>tbody>tr:nth-of-type(odd) {
|
||||
background-color: var(--back-sub);
|
||||
}
|
||||
#webui>div>div>div>div>div>table>tbody>tr>td>a>i.fa {
|
||||
color: var(--text-main);
|
||||
}
|
||||
|
||||
a {
|
||||
color: var(--link);
|
||||
&:link {
|
||||
color: var(--link);
|
||||
}
|
||||
&:hover {
|
||||
color: var(--light-link);
|
||||
}
|
||||
&:visited {
|
||||
color: var(--link);
|
||||
}
|
||||
}
|
||||
307
resources/assets/less/skins/skin-green-dark.less
Normal file
307
resources/assets/less/skins/skin-green-dark.less
Normal file
|
|
@ -0,0 +1,307 @@
|
|||
/*
|
||||
* Skin: green
|
||||
* ----------
|
||||
*/
|
||||
@import "../bootstrap-less/mixins.less";
|
||||
@import "../bootstrap-less/variables.less";
|
||||
@import "../variables.less";
|
||||
@import "../mixins.less";
|
||||
|
||||
.skin-green-dark {
|
||||
//Navbar
|
||||
.main-header {
|
||||
.navbar {
|
||||
.navbar-variant(@green; #fff);
|
||||
.sidebar-toggle {
|
||||
color: #fff;
|
||||
&:hover {
|
||||
background-color: darken(@green, 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(@green, 5%);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
//Logo
|
||||
|
||||
li.user-header {
|
||||
background-color: @green;
|
||||
}
|
||||
}
|
||||
|
||||
//Content Header
|
||||
.content-header {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
//Create the sidebar skin
|
||||
.skin-dark-sidebar(@green);
|
||||
}
|
||||
|
||||
.skin-green-dark.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 {
|
||||
background-color: darken(@green, 10%);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
&.btn-white:hover {
|
||||
background-color: darken(@green, 30%);
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
a {
|
||||
color: @green;
|
||||
&:hover {
|
||||
color: darken(@green, 20%);
|
||||
}
|
||||
&:visited {
|
||||
color: @green;
|
||||
}
|
||||
}
|
||||
|
||||
.text-primary {
|
||||
color: darken(@green, 20%);
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
:root {
|
||||
--background: #222;
|
||||
--back-main: #333;
|
||||
--back-sub: #444;
|
||||
--header: @green; /* Use same as Header picker */
|
||||
--text-main: #FFF;
|
||||
--text-sub: #BBB;
|
||||
--link: lighten(@green, 10%); /* Use same as Header picker */
|
||||
--nav-link: #FFF; /* Use same as Header picker */
|
||||
--light-link: lighten(@green, 30%); /* Use same as Header picker */
|
||||
}
|
||||
|
||||
.main-header .navbar, .main-header .logo {
|
||||
background-color: var(--header);
|
||||
background: -webkit-linear-gradient(top, var(--header) 0%,var(--header) 100%);
|
||||
background: linear-gradient(to bottom, var(--header) 0%,var(--header) 100%);
|
||||
border-color: var(--header);
|
||||
}
|
||||
|
||||
.navbar-nav>li>a:link {
|
||||
color: var(--nav-link);
|
||||
}
|
||||
|
||||
.modal-content {
|
||||
background-color: var(--back-main);
|
||||
color: var(--text-main);
|
||||
}
|
||||
|
||||
a, a:link, a:visited, .btn-primary.hover {
|
||||
color: var(--header);
|
||||
}
|
||||
#accessoriesTable>tbody>tr>td>nobr>a>i.fa {
|
||||
color: var(--text-main);
|
||||
}
|
||||
#assetsListingTable>tbody>tr>td>nobr>a>i.fa {
|
||||
color: var(--text-main);
|
||||
}
|
||||
#assetsListingTable>tbody>tr.selected>td {
|
||||
background-color: var(--back-main);
|
||||
}
|
||||
body {
|
||||
color: var(--text-main);
|
||||
}
|
||||
.box, .box.box-default {
|
||||
border-top: 3px solid var(--header);
|
||||
border-top-color: var(--header);
|
||||
}
|
||||
.box-body, .box-footer, .box-header {
|
||||
background-color: var(--back-sub);
|
||||
color: var(--text-main);
|
||||
}
|
||||
.btn-default{
|
||||
background-color: var(--back-main);
|
||||
color: var(--header);
|
||||
}
|
||||
.btn-default:active, .btn-default:focus, .btn-default:hover, .btn-default.active {
|
||||
background-color: var(--back-sub);
|
||||
color: var(--header);
|
||||
}
|
||||
.btn-primary, .btn-primary.hover, .btn-primary:active, .text-blue {
|
||||
color: var(--text-main)!important;
|
||||
}
|
||||
.btn-primary:hover {
|
||||
background-color: var(--back-main);
|
||||
color: var(--header)!important;
|
||||
}
|
||||
#componentsTable>tbody>tr>td>nobr>a>i.fa {
|
||||
color: var(--text-main);
|
||||
}
|
||||
#consumablesTable>tbody>tr>td>nobr>a>i.fa {
|
||||
color: var(--text-main);
|
||||
}
|
||||
.content-wrapper {
|
||||
background-color: var(--background);
|
||||
}
|
||||
#create-form>div>div>div>span>i.fa {
|
||||
background-color: var(--back-sub);
|
||||
color: var(--header);
|
||||
}
|
||||
.datepicker .datepicker-switch:hover, .datepicker .next:hover, .datepicker .prev:hover, .datepicker tfoot tr th:hover, .datepicker table tr td.day.focused, .datepicker table tr td.day:hover {
|
||||
background-color: var(--header);
|
||||
}
|
||||
.datepicker.dropdown-menu {
|
||||
background-color: var(--back-main);
|
||||
color: var(--text-main);
|
||||
}
|
||||
#details>div>div>div>table {
|
||||
background-color: transparent;
|
||||
}
|
||||
.dropdown-menu, .dropdown-menu>li>a {
|
||||
background-color: var(--back-sub);
|
||||
color: var(--header);
|
||||
}
|
||||
.dropdown-menu>li>a:hover {
|
||||
background-color: var(--back-main);
|
||||
color: var(--text-main);
|
||||
}
|
||||
.form-control {
|
||||
background-color: var(--back-main);
|
||||
color: var(--text-main);
|
||||
}
|
||||
h1, h2, h3, h4, h5, h6, p {
|
||||
color: var(--text-main);
|
||||
}
|
||||
.help-block {
|
||||
color: var(--text-sub);
|
||||
}
|
||||
input[type=text], input[type=search] {
|
||||
background-color: var(--back-sub);
|
||||
color: var(--text-main);
|
||||
}
|
||||
.input-group, .input-group-addon {
|
||||
background-color: var(--back-sub)!important;
|
||||
color: var(--text-main);
|
||||
}
|
||||
#licensesTable>tbody>tr>td>nobr>a>i.fa {
|
||||
color: var(--text-main);
|
||||
}
|
||||
.main-footer {
|
||||
background-color: var(--back-main);
|
||||
color: var(--text-main);
|
||||
}
|
||||
.nav-tabs-custom>.nav-tabs>li>a, .nav-tabs-custom>.nav-tabs>li.active>a {
|
||||
color: var(--text-main);
|
||||
}
|
||||
.nav-tabs-custom>.nav-tabs>li.active {
|
||||
border-top-color: var(--header);
|
||||
}
|
||||
.nav-tabs-custom>.nav-tabs>li.active>a {
|
||||
background-color: var(--back-main);
|
||||
}
|
||||
.nav-tabs-custom>.nav-tabs>li.active>a:hover {
|
||||
background-color: var(--back-sub);
|
||||
color: var(--text-main);
|
||||
}
|
||||
.nav-tabs-custom, .nav-tabs-custom>.tab-content {
|
||||
background-color: var(--back-main);
|
||||
}
|
||||
.navbar-nav>.tasks-menu>.dropdown-menu>li.header {
|
||||
background-color: var(--back-main);
|
||||
color: var(--header);
|
||||
}
|
||||
.open>.dropdown-toggle.btn-default {
|
||||
background-color: var(--back-sub);
|
||||
color: var(--header);
|
||||
}
|
||||
.panel {
|
||||
background-color: var(--back-sub);
|
||||
color: var(--text-main);
|
||||
}
|
||||
.panel-default>.panel-heading {
|
||||
background-color: var(--back-main);
|
||||
color: var(--header);
|
||||
}
|
||||
.select2-container--default .select2-results__option[aria-selected=true], .select2-container--default .select2-results__option[aria-selected=true]:hover {
|
||||
background-color: var(--back-sub);
|
||||
color: var(--header);
|
||||
}
|
||||
.select2-container--default .select2-results__option--highlighted[aria-selected] {
|
||||
background-color: var(--header);
|
||||
color: var(--back-main);
|
||||
}
|
||||
.select2-container--default .select2-selection--single .select2-selection__rendered {
|
||||
color: var(--text-main);
|
||||
}
|
||||
.select2-selection--single {
|
||||
background-color: var(--back-sub)!important;
|
||||
color: var(--text-main)!important;
|
||||
}
|
||||
.select2-dropdown {
|
||||
background-color: var(--back-main);
|
||||
color: var(--text-main);
|
||||
}
|
||||
.skin-blue-dark .main-header .navbar .dropdown-menu li a {
|
||||
color: var(--header);
|
||||
}
|
||||
.skin-blue-dark .sidebar-menu>li.active>a, .skin-blue .sidebar-menu>li:hover>a, .sidebar-toggle:hover {
|
||||
background-color: var(--header)!important;
|
||||
}
|
||||
.tab-content, .tab-pane {
|
||||
background-color: var(--back-main);
|
||||
color: var(--text-main);
|
||||
}
|
||||
.table-striped>tbody>tr:nth-of-type(odd) {
|
||||
background-color: var(--back-sub);
|
||||
}
|
||||
#webui>div>div>div>div>div>table>tbody>tr>td>a>i.fa {
|
||||
color: var(--text-main);
|
||||
}
|
||||
|
||||
a {
|
||||
color: var(--link);
|
||||
&:link {
|
||||
color: var(--link);
|
||||
}
|
||||
&:hover {
|
||||
color: var(--light-link);
|
||||
}
|
||||
&:visited {
|
||||
color: var(--link);
|
||||
}
|
||||
}
|
||||
307
resources/assets/less/skins/skin-orange-dark.less
Normal file
307
resources/assets/less/skins/skin-orange-dark.less
Normal file
|
|
@ -0,0 +1,307 @@
|
|||
/*
|
||||
* Skin: orange
|
||||
* ----------
|
||||
*/
|
||||
@import "../bootstrap-less/mixins.less";
|
||||
@import "../bootstrap-less/variables.less";
|
||||
@import "../variables.less";
|
||||
@import "../mixins.less";
|
||||
|
||||
.skin-orange-dark {
|
||||
//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-dark.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 {
|
||||
background-color: darken(@orange, 10%);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
&.btn-white:hover {
|
||||
background-color: darken(@orange, 30%);
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
a {
|
||||
color: @orange;
|
||||
&:hover {
|
||||
color: darken(@orange, 20%);
|
||||
}
|
||||
&:visited {
|
||||
color: @orange;
|
||||
}
|
||||
}
|
||||
|
||||
.text-primary {
|
||||
color: darken(@orange, 20%);
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
:root {
|
||||
--background: #222;
|
||||
--back-main: #333;
|
||||
--back-sub: #444;
|
||||
--header: @orange; /* Use same as Header picker */
|
||||
--text-main: #FFF;
|
||||
--text-sub: #BBB;
|
||||
--link: lighten(@orange, 10%); /* Use same as Header picker */
|
||||
--nav-link: #FFF; /* Use same as Header picker */
|
||||
--light-link: lighten(@orange, 30%); /* Use same as Header picker */
|
||||
}
|
||||
|
||||
.main-header .navbar, .main-header .logo {
|
||||
background-color: var(--header);
|
||||
background: -webkit-linear-gradient(top, var(--header) 0%,var(--header) 100%);
|
||||
background: linear-gradient(to bottom, var(--header) 0%,var(--header) 100%);
|
||||
border-color: var(--header);
|
||||
}
|
||||
|
||||
.navbar-nav>li>a:link {
|
||||
color: var(--nav-link);
|
||||
}
|
||||
|
||||
.modal-content {
|
||||
background-color: var(--back-main);
|
||||
color: var(--text-main);
|
||||
}
|
||||
|
||||
a, a:link, a:visited, .btn-primary.hover {
|
||||
color: var(--header);
|
||||
}
|
||||
#accessoriesTable>tbody>tr>td>nobr>a>i.fa {
|
||||
color: var(--text-main);
|
||||
}
|
||||
#assetsListingTable>tbody>tr>td>nobr>a>i.fa {
|
||||
color: var(--text-main);
|
||||
}
|
||||
#assetsListingTable>tbody>tr.selected>td {
|
||||
background-color: var(--back-main);
|
||||
}
|
||||
body {
|
||||
color: var(--text-main);
|
||||
}
|
||||
.box, .box.box-default {
|
||||
border-top: 3px solid var(--header);
|
||||
border-top-color: var(--header);
|
||||
}
|
||||
.box-body, .box-footer, .box-header {
|
||||
background-color: var(--back-sub);
|
||||
color: var(--text-main);
|
||||
}
|
||||
.btn-default{
|
||||
background-color: var(--back-main);
|
||||
color: var(--header);
|
||||
}
|
||||
.btn-default:active, .btn-default:focus, .btn-default:hover, .btn-default.active {
|
||||
background-color: var(--back-sub);
|
||||
color: var(--header);
|
||||
}
|
||||
.btn-primary, .btn-primary.hover, .btn-primary:active, .text-blue {
|
||||
color: var(--text-main)!important;
|
||||
}
|
||||
.btn-primary:hover {
|
||||
background-color: var(--back-main);
|
||||
color: var(--header)!important;
|
||||
}
|
||||
#componentsTable>tbody>tr>td>nobr>a>i.fa {
|
||||
color: var(--text-main);
|
||||
}
|
||||
#consumablesTable>tbody>tr>td>nobr>a>i.fa {
|
||||
color: var(--text-main);
|
||||
}
|
||||
.content-wrapper {
|
||||
background-color: var(--background);
|
||||
}
|
||||
#create-form>div>div>div>span>i.fa {
|
||||
background-color: var(--back-sub);
|
||||
color: var(--header);
|
||||
}
|
||||
.datepicker .datepicker-switch:hover, .datepicker .next:hover, .datepicker .prev:hover, .datepicker tfoot tr th:hover, .datepicker table tr td.day.focused, .datepicker table tr td.day:hover {
|
||||
background-color: var(--header);
|
||||
}
|
||||
.datepicker.dropdown-menu {
|
||||
background-color: var(--back-main);
|
||||
color: var(--text-main);
|
||||
}
|
||||
#details>div>div>div>table {
|
||||
background-color: transparent;
|
||||
}
|
||||
.dropdown-menu, .dropdown-menu>li>a {
|
||||
background-color: var(--back-sub);
|
||||
color: var(--header);
|
||||
}
|
||||
.dropdown-menu>li>a:hover {
|
||||
background-color: var(--back-main);
|
||||
color: var(--text-main);
|
||||
}
|
||||
.form-control {
|
||||
background-color: var(--back-main);
|
||||
color: var(--text-main);
|
||||
}
|
||||
h1, h2, h3, h4, h5, h6, p {
|
||||
color: var(--text-main);
|
||||
}
|
||||
.help-block {
|
||||
color: var(--text-sub);
|
||||
}
|
||||
input[type=text], input[type=search] {
|
||||
background-color: var(--back-sub);
|
||||
color: var(--text-main);
|
||||
}
|
||||
.input-group, .input-group-addon {
|
||||
background-color: var(--back-sub)!important;
|
||||
color: var(--text-main);
|
||||
}
|
||||
#licensesTable>tbody>tr>td>nobr>a>i.fa {
|
||||
color: var(--text-main);
|
||||
}
|
||||
.main-footer {
|
||||
background-color: var(--back-main);
|
||||
color: var(--text-main);
|
||||
}
|
||||
.nav-tabs-custom>.nav-tabs>li>a, .nav-tabs-custom>.nav-tabs>li.active>a {
|
||||
color: var(--text-main);
|
||||
}
|
||||
.nav-tabs-custom>.nav-tabs>li.active {
|
||||
border-top-color: var(--header);
|
||||
}
|
||||
.nav-tabs-custom>.nav-tabs>li.active>a {
|
||||
background-color: var(--back-main);
|
||||
}
|
||||
.nav-tabs-custom>.nav-tabs>li.active>a:hover {
|
||||
background-color: var(--back-sub);
|
||||
color: var(--text-main);
|
||||
}
|
||||
.nav-tabs-custom, .nav-tabs-custom>.tab-content {
|
||||
background-color: var(--back-main);
|
||||
}
|
||||
.navbar-nav>.tasks-menu>.dropdown-menu>li.header {
|
||||
background-color: var(--back-main);
|
||||
color: var(--header);
|
||||
}
|
||||
.open>.dropdown-toggle.btn-default {
|
||||
background-color: var(--back-sub);
|
||||
color: var(--header);
|
||||
}
|
||||
.panel {
|
||||
background-color: var(--back-sub);
|
||||
color: var(--text-main);
|
||||
}
|
||||
.panel-default>.panel-heading {
|
||||
background-color: var(--back-main);
|
||||
color: var(--header);
|
||||
}
|
||||
.select2-container--default .select2-results__option[aria-selected=true], .select2-container--default .select2-results__option[aria-selected=true]:hover {
|
||||
background-color: var(--back-sub);
|
||||
color: var(--header);
|
||||
}
|
||||
.select2-container--default .select2-results__option--highlighted[aria-selected] {
|
||||
background-color: var(--header);
|
||||
color: var(--back-main);
|
||||
}
|
||||
.select2-container--default .select2-selection--single .select2-selection__rendered {
|
||||
color: var(--text-main);
|
||||
}
|
||||
.select2-selection--single {
|
||||
background-color: var(--back-sub)!important;
|
||||
color: var(--text-main)!important;
|
||||
}
|
||||
.select2-dropdown {
|
||||
background-color: var(--back-main);
|
||||
color: var(--text-main);
|
||||
}
|
||||
.skin-blue-dark .main-header .navbar .dropdown-menu li a {
|
||||
color: var(--header);
|
||||
}
|
||||
.skin-blue-dark .sidebar-menu>li.active>a, .skin-blue .sidebar-menu>li:hover>a, .sidebar-toggle:hover {
|
||||
background-color: var(--header)!important;
|
||||
}
|
||||
.tab-content, .tab-pane {
|
||||
background-color: var(--back-main);
|
||||
color: var(--text-main);
|
||||
}
|
||||
.table-striped>tbody>tr:nth-of-type(odd) {
|
||||
background-color: var(--back-sub);
|
||||
}
|
||||
#webui>div>div>div>div>div>table>tbody>tr>td>a>i.fa {
|
||||
color: var(--text-main);
|
||||
}
|
||||
|
||||
a {
|
||||
color: var(--link);
|
||||
&:link {
|
||||
color: var(--link);
|
||||
}
|
||||
&:hover {
|
||||
color: var(--light-link);
|
||||
}
|
||||
&:visited {
|
||||
color: var(--link);
|
||||
}
|
||||
}
|
||||
307
resources/assets/less/skins/skin-purple-dark.less
Normal file
307
resources/assets/less/skins/skin-purple-dark.less
Normal file
|
|
@ -0,0 +1,307 @@
|
|||
/*
|
||||
* Skin: Purple
|
||||
* ----------
|
||||
*/
|
||||
@import "../bootstrap-less/mixins.less";
|
||||
@import "../bootstrap-less/variables.less";
|
||||
@import "../variables.less";
|
||||
@import "../mixins.less";
|
||||
|
||||
.skin-purple-dark {
|
||||
//Navbar
|
||||
.main-header {
|
||||
.navbar {
|
||||
.navbar-variant(@purple; #fff);
|
||||
.sidebar-toggle {
|
||||
color: #fff;
|
||||
&:hover {
|
||||
background-color: darken(@purple, 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(@purple, 5%);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
//Logo
|
||||
|
||||
li.user-header {
|
||||
background-color: @purple;
|
||||
}
|
||||
}
|
||||
|
||||
//Content Header
|
||||
.content-header {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
//Create the sidebar skin
|
||||
.skin-dark-sidebar(@purple);
|
||||
}
|
||||
|
||||
.skin-purple-dark.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 {
|
||||
background-color: darken(@purple, 10%);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
&.btn-white:hover {
|
||||
background-color: darken(@purple, 30%);
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
a {
|
||||
color: @purple;
|
||||
&:hover {
|
||||
color: darken(@purple, 20%);
|
||||
}
|
||||
&:visited {
|
||||
color: @purple;
|
||||
}
|
||||
}
|
||||
|
||||
.text-primary {
|
||||
color: darken(@purple, 20%);
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
:root {
|
||||
--background: #222;
|
||||
--back-main: #333;
|
||||
--back-sub: #444;
|
||||
--header: @purple; /* Use same as Header picker */
|
||||
--text-main: #FFF;
|
||||
--text-sub: #BBB;
|
||||
--link: lighten(@purple, 10%); /* Use same as Header picker */
|
||||
--nav-link: #FFF; /* Use same as Header picker */
|
||||
--light-link: lighten(@purple, 30%); /* Use same as Header picker */
|
||||
}
|
||||
|
||||
.main-header .navbar, .main-header .logo {
|
||||
background-color: var(--header);
|
||||
background: -webkit-linear-gradient(top, var(--header) 0%,var(--header) 100%);
|
||||
background: linear-gradient(to bottom, var(--header) 0%,var(--header) 100%);
|
||||
border-color: var(--header);
|
||||
}
|
||||
|
||||
.navbar-nav>li>a:link {
|
||||
color: var(--nav-link);
|
||||
}
|
||||
|
||||
.modal-content {
|
||||
background-color: var(--back-main);
|
||||
color: var(--text-main);
|
||||
}
|
||||
|
||||
a, a:link, a:visited, .btn-primary.hover {
|
||||
color: var(--header);
|
||||
}
|
||||
#accessoriesTable>tbody>tr>td>nobr>a>i.fa {
|
||||
color: var(--text-main);
|
||||
}
|
||||
#assetsListingTable>tbody>tr>td>nobr>a>i.fa {
|
||||
color: var(--text-main);
|
||||
}
|
||||
#assetsListingTable>tbody>tr.selected>td {
|
||||
background-color: var(--back-main);
|
||||
}
|
||||
body {
|
||||
color: var(--text-main);
|
||||
}
|
||||
.box, .box.box-default {
|
||||
border-top: 3px solid var(--header);
|
||||
border-top-color: var(--header);
|
||||
}
|
||||
.box-body, .box-footer, .box-header {
|
||||
background-color: var(--back-sub);
|
||||
color: var(--text-main);
|
||||
}
|
||||
.btn-default{
|
||||
background-color: var(--back-main);
|
||||
color: var(--header);
|
||||
}
|
||||
.btn-default:active, .btn-default:focus, .btn-default:hover, .btn-default.active {
|
||||
background-color: var(--back-sub);
|
||||
color: var(--header);
|
||||
}
|
||||
.btn-primary, .btn-primary.hover, .btn-primary:active, .text-blue {
|
||||
color: var(--text-main)!important;
|
||||
}
|
||||
.btn-primary:hover {
|
||||
background-color: var(--back-main);
|
||||
color: var(--header)!important;
|
||||
}
|
||||
#componentsTable>tbody>tr>td>nobr>a>i.fa {
|
||||
color: var(--text-main);
|
||||
}
|
||||
#consumablesTable>tbody>tr>td>nobr>a>i.fa {
|
||||
color: var(--text-main);
|
||||
}
|
||||
.content-wrapper {
|
||||
background-color: var(--background);
|
||||
}
|
||||
#create-form>div>div>div>span>i.fa {
|
||||
background-color: var(--back-sub);
|
||||
color: var(--header);
|
||||
}
|
||||
.datepicker .datepicker-switch:hover, .datepicker .next:hover, .datepicker .prev:hover, .datepicker tfoot tr th:hover, .datepicker table tr td.day.focused, .datepicker table tr td.day:hover {
|
||||
background-color: var(--header);
|
||||
}
|
||||
.datepicker.dropdown-menu {
|
||||
background-color: var(--back-main);
|
||||
color: var(--text-main);
|
||||
}
|
||||
#details>div>div>div>table {
|
||||
background-color: transparent;
|
||||
}
|
||||
.dropdown-menu, .dropdown-menu>li>a {
|
||||
background-color: var(--back-sub);
|
||||
color: var(--header);
|
||||
}
|
||||
.dropdown-menu>li>a:hover {
|
||||
background-color: var(--back-main);
|
||||
color: var(--text-main);
|
||||
}
|
||||
.form-control {
|
||||
background-color: var(--back-main);
|
||||
color: var(--text-main);
|
||||
}
|
||||
h1, h2, h3, h4, h5, h6, p {
|
||||
color: var(--text-main);
|
||||
}
|
||||
.help-block {
|
||||
color: var(--text-sub);
|
||||
}
|
||||
input[type=text], input[type=search] {
|
||||
background-color: var(--back-sub);
|
||||
color: var(--text-main);
|
||||
}
|
||||
.input-group, .input-group-addon {
|
||||
background-color: var(--back-sub)!important;
|
||||
color: var(--text-main);
|
||||
}
|
||||
#licensesTable>tbody>tr>td>nobr>a>i.fa {
|
||||
color: var(--text-main);
|
||||
}
|
||||
.main-footer {
|
||||
background-color: var(--back-main);
|
||||
color: var(--text-main);
|
||||
}
|
||||
.nav-tabs-custom>.nav-tabs>li>a, .nav-tabs-custom>.nav-tabs>li.active>a {
|
||||
color: var(--text-main);
|
||||
}
|
||||
.nav-tabs-custom>.nav-tabs>li.active {
|
||||
border-top-color: var(--header);
|
||||
}
|
||||
.nav-tabs-custom>.nav-tabs>li.active>a {
|
||||
background-color: var(--back-main);
|
||||
}
|
||||
.nav-tabs-custom>.nav-tabs>li.active>a:hover {
|
||||
background-color: var(--back-sub);
|
||||
color: var(--text-main);
|
||||
}
|
||||
.nav-tabs-custom, .nav-tabs-custom>.tab-content {
|
||||
background-color: var(--back-main);
|
||||
}
|
||||
.navbar-nav>.tasks-menu>.dropdown-menu>li.header {
|
||||
background-color: var(--back-main);
|
||||
color: var(--header);
|
||||
}
|
||||
.open>.dropdown-toggle.btn-default {
|
||||
background-color: var(--back-sub);
|
||||
color: var(--header);
|
||||
}
|
||||
.panel {
|
||||
background-color: var(--back-sub);
|
||||
color: var(--text-main);
|
||||
}
|
||||
.panel-default>.panel-heading {
|
||||
background-color: var(--back-main);
|
||||
color: var(--header);
|
||||
}
|
||||
.select2-container--default .select2-results__option[aria-selected=true], .select2-container--default .select2-results__option[aria-selected=true]:hover {
|
||||
background-color: var(--back-sub);
|
||||
color: var(--header);
|
||||
}
|
||||
.select2-container--default .select2-results__option--highlighted[aria-selected] {
|
||||
background-color: var(--header);
|
||||
color: var(--back-main);
|
||||
}
|
||||
.select2-container--default .select2-selection--single .select2-selection__rendered {
|
||||
color: var(--text-main);
|
||||
}
|
||||
.select2-selection--single {
|
||||
background-color: var(--back-sub)!important;
|
||||
color: var(--text-main)!important;
|
||||
}
|
||||
.select2-dropdown {
|
||||
background-color: var(--back-main);
|
||||
color: var(--text-main);
|
||||
}
|
||||
.skin-blue-dark .main-header .navbar .dropdown-menu li a {
|
||||
color: var(--header);
|
||||
}
|
||||
.skin-blue-dark .sidebar-menu>li.active>a, .skin-blue .sidebar-menu>li:hover>a, .sidebar-toggle:hover {
|
||||
background-color: var(--header)!important;
|
||||
}
|
||||
.tab-content, .tab-pane {
|
||||
background-color: var(--back-main);
|
||||
color: var(--text-main);
|
||||
}
|
||||
.table-striped>tbody>tr:nth-of-type(odd) {
|
||||
background-color: var(--back-sub);
|
||||
}
|
||||
#webui>div>div>div>div>div>table>tbody>tr>td>a>i.fa {
|
||||
color: var(--text-main);
|
||||
}
|
||||
|
||||
a {
|
||||
color: var(--link);
|
||||
&:link {
|
||||
color: var(--link);
|
||||
}
|
||||
&:hover {
|
||||
color: var(--light-link);
|
||||
}
|
||||
&:visited {
|
||||
color: var(--link);
|
||||
}
|
||||
}
|
||||
307
resources/assets/less/skins/skin-red-dark.less
Normal file
307
resources/assets/less/skins/skin-red-dark.less
Normal file
|
|
@ -0,0 +1,307 @@
|
|||
/*
|
||||
* Skin: red
|
||||
* ----------
|
||||
*/
|
||||
@import "../bootstrap-less/mixins.less";
|
||||
@import "../bootstrap-less/variables.less";
|
||||
@import "../variables.less";
|
||||
@import "../mixins.less";
|
||||
|
||||
.skin-red-dark {
|
||||
//Navbar
|
||||
.main-header {
|
||||
.navbar {
|
||||
.navbar-variant(@red; #fff);
|
||||
.sidebar-toggle {
|
||||
color: #fff;
|
||||
&:hover {
|
||||
background-color: darken(@red, 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(@red, 5%);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
//Logo
|
||||
|
||||
li.user-header {
|
||||
background-color: @red;
|
||||
}
|
||||
}
|
||||
|
||||
//Content Header
|
||||
.content-header {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
//Create the sidebar skin
|
||||
.skin-dark-sidebar(@red);
|
||||
}
|
||||
|
||||
.skin-red-dark.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 {
|
||||
background-color: darken(@red, 10%);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
&.btn-white:hover {
|
||||
background-color: darken(@red, 30%);
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
a {
|
||||
color: @red;
|
||||
&:hover {
|
||||
color: darken(@red, 20%);
|
||||
}
|
||||
&:visited {
|
||||
color: @red;
|
||||
}
|
||||
}
|
||||
|
||||
.text-primary {
|
||||
color: darken(@red, 20%);
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
:root {
|
||||
--background: #222;
|
||||
--back-main: #333;
|
||||
--back-sub: #444;
|
||||
--header: @red; /* Use same as Header picker */
|
||||
--text-main: #FFF;
|
||||
--text-sub: #BBB;
|
||||
--link: lighten(@red, 10%); /* Use same as Header picker */
|
||||
--nav-link: #FFF; /* Use same as Header picker */
|
||||
--light-link: lighten(@red, 30%); /* Use same as Header picker */
|
||||
}
|
||||
|
||||
.main-header .navbar, .main-header .logo {
|
||||
background-color: var(--header);
|
||||
background: -webkit-linear-gradient(top, var(--header) 0%,var(--header) 100%);
|
||||
background: linear-gradient(to bottom, var(--header) 0%,var(--header) 100%);
|
||||
border-color: var(--header);
|
||||
}
|
||||
|
||||
.navbar-nav>li>a:link {
|
||||
color: var(--nav-link);
|
||||
}
|
||||
|
||||
.modal-content {
|
||||
background-color: var(--back-main);
|
||||
color: var(--text-main);
|
||||
}
|
||||
|
||||
a, a:link, a:visited, .btn-primary.hover {
|
||||
color: var(--header);
|
||||
}
|
||||
#accessoriesTable>tbody>tr>td>nobr>a>i.fa {
|
||||
color: var(--text-main);
|
||||
}
|
||||
#assetsListingTable>tbody>tr>td>nobr>a>i.fa {
|
||||
color: var(--text-main);
|
||||
}
|
||||
#assetsListingTable>tbody>tr.selected>td {
|
||||
background-color: var(--back-main);
|
||||
}
|
||||
body {
|
||||
color: var(--text-main);
|
||||
}
|
||||
.box, .box.box-default {
|
||||
border-top: 3px solid var(--header);
|
||||
border-top-color: var(--header);
|
||||
}
|
||||
.box-body, .box-footer, .box-header {
|
||||
background-color: var(--back-sub);
|
||||
color: var(--text-main);
|
||||
}
|
||||
.btn-default{
|
||||
background-color: var(--back-main);
|
||||
color: var(--header);
|
||||
}
|
||||
.btn-default:active, .btn-default:focus, .btn-default:hover, .btn-default.active {
|
||||
background-color: var(--back-sub);
|
||||
color: var(--header);
|
||||
}
|
||||
.btn-primary, .btn-primary.hover, .btn-primary:active, .text-blue {
|
||||
color: var(--text-main)!important;
|
||||
}
|
||||
.btn-primary:hover {
|
||||
background-color: var(--back-main);
|
||||
color: var(--header)!important;
|
||||
}
|
||||
#componentsTable>tbody>tr>td>nobr>a>i.fa {
|
||||
color: var(--text-main);
|
||||
}
|
||||
#consumablesTable>tbody>tr>td>nobr>a>i.fa {
|
||||
color: var(--text-main);
|
||||
}
|
||||
.content-wrapper {
|
||||
background-color: var(--background);
|
||||
}
|
||||
#create-form>div>div>div>span>i.fa {
|
||||
background-color: var(--back-sub);
|
||||
color: var(--header);
|
||||
}
|
||||
.datepicker .datepicker-switch:hover, .datepicker .next:hover, .datepicker .prev:hover, .datepicker tfoot tr th:hover, .datepicker table tr td.day.focused, .datepicker table tr td.day:hover {
|
||||
background-color: var(--header);
|
||||
}
|
||||
.datepicker.dropdown-menu {
|
||||
background-color: var(--back-main);
|
||||
color: var(--text-main);
|
||||
}
|
||||
#details>div>div>div>table {
|
||||
background-color: transparent;
|
||||
}
|
||||
.dropdown-menu, .dropdown-menu>li>a {
|
||||
background-color: var(--back-sub);
|
||||
color: var(--header);
|
||||
}
|
||||
.dropdown-menu>li>a:hover {
|
||||
background-color: var(--back-main);
|
||||
color: var(--text-main);
|
||||
}
|
||||
.form-control {
|
||||
background-color: var(--back-main);
|
||||
color: var(--text-main);
|
||||
}
|
||||
h1, h2, h3, h4, h5, h6, p {
|
||||
color: var(--text-main);
|
||||
}
|
||||
.help-block {
|
||||
color: var(--text-sub);
|
||||
}
|
||||
input[type=text], input[type=search] {
|
||||
background-color: var(--back-sub);
|
||||
color: var(--text-main);
|
||||
}
|
||||
.input-group, .input-group-addon {
|
||||
background-color: var(--back-sub)!important;
|
||||
color: var(--text-main);
|
||||
}
|
||||
#licensesTable>tbody>tr>td>nobr>a>i.fa {
|
||||
color: var(--text-main);
|
||||
}
|
||||
.main-footer {
|
||||
background-color: var(--back-main);
|
||||
color: var(--text-main);
|
||||
}
|
||||
.nav-tabs-custom>.nav-tabs>li>a, .nav-tabs-custom>.nav-tabs>li.active>a {
|
||||
color: var(--text-main);
|
||||
}
|
||||
.nav-tabs-custom>.nav-tabs>li.active {
|
||||
border-top-color: var(--header);
|
||||
}
|
||||
.nav-tabs-custom>.nav-tabs>li.active>a {
|
||||
background-color: var(--back-main);
|
||||
}
|
||||
.nav-tabs-custom>.nav-tabs>li.active>a:hover {
|
||||
background-color: var(--back-sub);
|
||||
color: var(--text-main);
|
||||
}
|
||||
.nav-tabs-custom, .nav-tabs-custom>.tab-content {
|
||||
background-color: var(--back-main);
|
||||
}
|
||||
.navbar-nav>.tasks-menu>.dropdown-menu>li.header {
|
||||
background-color: var(--back-main);
|
||||
color: var(--header);
|
||||
}
|
||||
.open>.dropdown-toggle.btn-default {
|
||||
background-color: var(--back-sub);
|
||||
color: var(--header);
|
||||
}
|
||||
.panel {
|
||||
background-color: var(--back-sub);
|
||||
color: var(--text-main);
|
||||
}
|
||||
.panel-default>.panel-heading {
|
||||
background-color: var(--back-main);
|
||||
color: var(--header);
|
||||
}
|
||||
.select2-container--default .select2-results__option[aria-selected=true], .select2-container--default .select2-results__option[aria-selected=true]:hover {
|
||||
background-color: var(--back-sub);
|
||||
color: var(--header);
|
||||
}
|
||||
.select2-container--default .select2-results__option--highlighted[aria-selected] {
|
||||
background-color: var(--header);
|
||||
color: var(--back-main);
|
||||
}
|
||||
.select2-container--default .select2-selection--single .select2-selection__rendered {
|
||||
color: var(--text-main);
|
||||
}
|
||||
.select2-selection--single {
|
||||
background-color: var(--back-sub)!important;
|
||||
color: var(--text-main)!important;
|
||||
}
|
||||
.select2-dropdown {
|
||||
background-color: var(--back-main);
|
||||
color: var(--text-main);
|
||||
}
|
||||
.skin-blue-dark .main-header .navbar .dropdown-menu li a {
|
||||
color: var(--header);
|
||||
}
|
||||
.skin-blue-dark .sidebar-menu>li.active>a, .skin-blue .sidebar-menu>li:hover>a, .sidebar-toggle:hover {
|
||||
background-color: var(--header)!important;
|
||||
}
|
||||
.tab-content, .tab-pane {
|
||||
background-color: var(--back-main);
|
||||
color: var(--text-main);
|
||||
}
|
||||
.table-striped>tbody>tr:nth-of-type(odd) {
|
||||
background-color: var(--back-sub);
|
||||
}
|
||||
#webui>div>div>div>div>div>table>tbody>tr>td>a>i.fa {
|
||||
color: var(--text-main);
|
||||
}
|
||||
|
||||
a {
|
||||
color: var(--link);
|
||||
&:link {
|
||||
color: var(--link);
|
||||
}
|
||||
&:hover {
|
||||
color: var(--light-link);
|
||||
}
|
||||
&:visited {
|
||||
color: var(--link);
|
||||
}
|
||||
}
|
||||
307
resources/assets/less/skins/skin-yellow-dark.less
Normal file
307
resources/assets/less/skins/skin-yellow-dark.less
Normal file
|
|
@ -0,0 +1,307 @@
|
|||
/*
|
||||
* Skin: yellow
|
||||
* ----------
|
||||
*/
|
||||
@import "../bootstrap-less/mixins.less";
|
||||
@import "../bootstrap-less/variables.less";
|
||||
@import "../variables.less";
|
||||
@import "../mixins.less";
|
||||
|
||||
.skin-yellow-dark {
|
||||
//Navbar
|
||||
.main-header {
|
||||
.navbar {
|
||||
.navbar-variant(@yellow; #fff);
|
||||
.sidebar-toggle {
|
||||
color: #fff;
|
||||
&:hover {
|
||||
background-color: darken(@yellow, 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(@yellow, 5%);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
//Logo
|
||||
|
||||
li.user-header {
|
||||
background-color: @yellow;
|
||||
}
|
||||
}
|
||||
|
||||
//Content Header
|
||||
.content-header {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
//Create the sidebar skin
|
||||
.skin-dark-sidebar(@yellow);
|
||||
}
|
||||
|
||||
.skin-yellow-dark.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 {
|
||||
background-color: darken(@yellow, 10%);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
&.btn-white:hover {
|
||||
background-color: darken(@yellow, 30%);
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
a {
|
||||
color: @yellow;
|
||||
&:hover {
|
||||
color: darken(@yellow, 20%);
|
||||
}
|
||||
&:visited {
|
||||
color: @yellow;
|
||||
}
|
||||
}
|
||||
|
||||
.text-primary {
|
||||
color: darken(@yellow, 20%);
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
:root {
|
||||
--background: #222;
|
||||
--back-main: #333;
|
||||
--back-sub: #444;
|
||||
--header: @yellow; /* Use same as Header picker */
|
||||
--text-main: #FFF;
|
||||
--text-sub: #BBB;
|
||||
--link: lighten(@yellow, 10%); /* Use same as Header picker */
|
||||
--nav-link: #FFF; /* Use same as Header picker */
|
||||
--light-link: lighten(@yellow, 30%); /* Use same as Header picker */
|
||||
}
|
||||
|
||||
.main-header .navbar, .main-header .logo {
|
||||
background-color: var(--header);
|
||||
background: -webkit-linear-gradient(top, var(--header) 0%,var(--header) 100%);
|
||||
background: linear-gradient(to bottom, var(--header) 0%,var(--header) 100%);
|
||||
border-color: var(--header);
|
||||
}
|
||||
|
||||
.navbar-nav>li>a:link {
|
||||
color: var(--nav-link);
|
||||
}
|
||||
|
||||
.modal-content {
|
||||
background-color: var(--back-main);
|
||||
color: var(--text-main);
|
||||
}
|
||||
|
||||
a, a:link, a:visited, .btn-primary.hover {
|
||||
color: var(--header);
|
||||
}
|
||||
#accessoriesTable>tbody>tr>td>nobr>a>i.fa {
|
||||
color: var(--text-main);
|
||||
}
|
||||
#assetsListingTable>tbody>tr>td>nobr>a>i.fa {
|
||||
color: var(--text-main);
|
||||
}
|
||||
#assetsListingTable>tbody>tr.selected>td {
|
||||
background-color: var(--back-main);
|
||||
}
|
||||
body {
|
||||
color: var(--text-main);
|
||||
}
|
||||
.box, .box.box-default {
|
||||
border-top: 3px solid var(--header);
|
||||
border-top-color: var(--header);
|
||||
}
|
||||
.box-body, .box-footer, .box-header {
|
||||
background-color: var(--back-sub);
|
||||
color: var(--text-main);
|
||||
}
|
||||
.btn-default{
|
||||
background-color: var(--back-main);
|
||||
color: var(--header);
|
||||
}
|
||||
.btn-default:active, .btn-default:focus, .btn-default:hover, .btn-default.active {
|
||||
background-color: var(--back-sub);
|
||||
color: var(--header);
|
||||
}
|
||||
.btn-primary, .btn-primary.hover, .btn-primary:active, .text-blue {
|
||||
color: var(--text-main)!important;
|
||||
}
|
||||
.btn-primary:hover {
|
||||
background-color: var(--back-main);
|
||||
color: var(--header)!important;
|
||||
}
|
||||
#componentsTable>tbody>tr>td>nobr>a>i.fa {
|
||||
color: var(--text-main);
|
||||
}
|
||||
#consumablesTable>tbody>tr>td>nobr>a>i.fa {
|
||||
color: var(--text-main);
|
||||
}
|
||||
.content-wrapper {
|
||||
background-color: var(--background);
|
||||
}
|
||||
#create-form>div>div>div>span>i.fa {
|
||||
background-color: var(--back-sub);
|
||||
color: var(--header);
|
||||
}
|
||||
.datepicker .datepicker-switch:hover, .datepicker .next:hover, .datepicker .prev:hover, .datepicker tfoot tr th:hover, .datepicker table tr td.day.focused, .datepicker table tr td.day:hover {
|
||||
background-color: var(--header);
|
||||
}
|
||||
.datepicker.dropdown-menu {
|
||||
background-color: var(--back-main);
|
||||
color: var(--text-main);
|
||||
}
|
||||
#details>div>div>div>table {
|
||||
background-color: transparent;
|
||||
}
|
||||
.dropdown-menu, .dropdown-menu>li>a {
|
||||
background-color: var(--back-sub);
|
||||
color: var(--header);
|
||||
}
|
||||
.dropdown-menu>li>a:hover {
|
||||
background-color: var(--back-main);
|
||||
color: var(--text-main);
|
||||
}
|
||||
.form-control {
|
||||
background-color: var(--back-main);
|
||||
color: var(--text-main);
|
||||
}
|
||||
h1, h2, h3, h4, h5, h6, p {
|
||||
color: var(--text-main);
|
||||
}
|
||||
.help-block {
|
||||
color: var(--text-sub);
|
||||
}
|
||||
input[type=text], input[type=search] {
|
||||
background-color: var(--back-sub);
|
||||
color: var(--text-main);
|
||||
}
|
||||
.input-group, .input-group-addon {
|
||||
background-color: var(--back-sub)!important;
|
||||
color: var(--text-main);
|
||||
}
|
||||
#licensesTable>tbody>tr>td>nobr>a>i.fa {
|
||||
color: var(--text-main);
|
||||
}
|
||||
.main-footer {
|
||||
background-color: var(--back-main);
|
||||
color: var(--text-main);
|
||||
}
|
||||
.nav-tabs-custom>.nav-tabs>li>a, .nav-tabs-custom>.nav-tabs>li.active>a {
|
||||
color: var(--text-main);
|
||||
}
|
||||
.nav-tabs-custom>.nav-tabs>li.active {
|
||||
border-top-color: var(--header);
|
||||
}
|
||||
.nav-tabs-custom>.nav-tabs>li.active>a {
|
||||
background-color: var(--back-main);
|
||||
}
|
||||
.nav-tabs-custom>.nav-tabs>li.active>a:hover {
|
||||
background-color: var(--back-sub);
|
||||
color: var(--text-main);
|
||||
}
|
||||
.nav-tabs-custom, .nav-tabs-custom>.tab-content {
|
||||
background-color: var(--back-main);
|
||||
}
|
||||
.navbar-nav>.tasks-menu>.dropdown-menu>li.header {
|
||||
background-color: var(--back-main);
|
||||
color: var(--header);
|
||||
}
|
||||
.open>.dropdown-toggle.btn-default {
|
||||
background-color: var(--back-sub);
|
||||
color: var(--header);
|
||||
}
|
||||
.panel {
|
||||
background-color: var(--back-sub);
|
||||
color: var(--text-main);
|
||||
}
|
||||
.panel-default>.panel-heading {
|
||||
background-color: var(--back-main);
|
||||
color: var(--header);
|
||||
}
|
||||
.select2-container--default .select2-results__option[aria-selected=true], .select2-container--default .select2-results__option[aria-selected=true]:hover {
|
||||
background-color: var(--back-sub);
|
||||
color: var(--header);
|
||||
}
|
||||
.select2-container--default .select2-results__option--highlighted[aria-selected] {
|
||||
background-color: var(--header);
|
||||
color: var(--back-main);
|
||||
}
|
||||
.select2-container--default .select2-selection--single .select2-selection__rendered {
|
||||
color: var(--text-main);
|
||||
}
|
||||
.select2-selection--single {
|
||||
background-color: var(--back-sub)!important;
|
||||
color: var(--text-main)!important;
|
||||
}
|
||||
.select2-dropdown {
|
||||
background-color: var(--back-main);
|
||||
color: var(--text-main);
|
||||
}
|
||||
.skin-blue-dark .main-header .navbar .dropdown-menu li a {
|
||||
color: var(--header);
|
||||
}
|
||||
.skin-blue-dark .sidebar-menu>li.active>a, .skin-blue .sidebar-menu>li:hover>a, .sidebar-toggle:hover {
|
||||
background-color: var(--header)!important;
|
||||
}
|
||||
.tab-content, .tab-pane {
|
||||
background-color: var(--back-main);
|
||||
color: var(--text-main);
|
||||
}
|
||||
.table-striped>tbody>tr:nth-of-type(odd) {
|
||||
background-color: var(--back-sub);
|
||||
}
|
||||
#webui>div>div>div>div>div>table>tbody>tr>td>a>i.fa {
|
||||
color: var(--text-main);
|
||||
}
|
||||
|
||||
a {
|
||||
color: var(--link);
|
||||
&:link {
|
||||
color: var(--link);
|
||||
}
|
||||
&:hover {
|
||||
color: var(--light-link);
|
||||
}
|
||||
&:visited {
|
||||
color: var(--link);
|
||||
}
|
||||
}
|
||||
|
|
@ -530,20 +530,20 @@ Form::macro('customfield_elements', function ($name = "customfield_elements", $s
|
|||
Form::macro('skin', function ($name = "skin", $selected = null, $class = null) {
|
||||
|
||||
$formats = array(
|
||||
'blue' => 'Default Blue Dark',
|
||||
'blue-light' => 'Blue Light',
|
||||
'blue' => 'Default Blue',
|
||||
'blue-dark' => 'Blue (Dark Mode)',
|
||||
'green' => 'Green Dark',
|
||||
'green-light' => 'Green Light',
|
||||
'green-dark' => 'Green (Dark Mode)',
|
||||
'red' => 'Red Dark',
|
||||
'red-light' => 'Red Light',
|
||||
'red-dark' => 'Red (Dark Mode)',
|
||||
'orange' => 'Orange Dark',
|
||||
'orange-light' => 'Orange Light',
|
||||
'orange-dark' => 'Orange (Dark Mode)',
|
||||
'black' => 'Black',
|
||||
'black-light' => 'Black Light',
|
||||
'black-dark' => 'Black (Dark Mode)',
|
||||
'purple' => 'Purple',
|
||||
'purple-light' => 'Purple Light',
|
||||
'purple-dark' => 'Purple (Dark Mode)',
|
||||
'yellow' => 'Yellow',
|
||||
'yellow-light' => 'Yellow Light',
|
||||
'yellow-dark' => 'Yellow (Dark Mode)',
|
||||
'contrast' => 'High Contrast',
|
||||
);
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue