AdminLTE/build/less/skins/skin-purple.less

134 lines
2.9 KiB
Plaintext

/*
* Skin: Purple
* ------------
*/
.skin-purple {
//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
.logo {
.logo-variant(darken(@purple, 5%));
}
li.user-header {
background-color: @purple;
}
}
//Content Header
.content-header {
background: transparent;
}
//User Panel (resides in the sidebar)
.user-panel {
> .info, > .info > a {
color: #fff;
}
}
//Sidebar & Treeview menu
// the menu
.sidebar-menu > li {
&.header {
color: lighten(@skin-blue-sidebar-bg, 20%);
background: darken(@skin-blue-sidebar-bg, 4%);
}
> a {
border-left: 3px solid transparent;
margin-right: 1px;
}
//Hover and active states
> a:hover, &.active > a {
color: @skin-blue-sidebar-hover-color;
background: @skin-blue-sidebar-hover-bg;
border-left-color: @purple;
}
> .treeview-menu {
margin: 0 1px;
background: @skin-blue-sidebar-submenu-bg;
}
}
// Sidebar color (Both .wrapper and .left-side are responsible for sidebar bg color)
.wrapper {
background: @skin-blue-sidebar-bg;
}
.left-side {
background: @skin-blue-sidebar-bg;
/* -webkit-box-shadow: inset -3px 0px 8px -4px rgba(0, 0, 0, 0.7);
-moz-box-shadow: inset -3px 0px 8px -4px rgba(0, 0, 0, 0.7);
box-shadow: inset -3px 0px 8px -4px rgba(0, 0, 0, 0.07);*/
}
.sidebar a {
color: @skin-blue-sidebar-color;
&:hover {
text-decoration: none;
}
}
// skin blue treeview-menu
.treeview-menu {
> li {
> a {color: @skin-blue-sidebar-submenu-color;}
&.active > a, > a:hover {
color: @skin-blue-sidebar-submenu-hover-color;
}
}
}
.sidebar-form {
.border-radius(3px);
border: 1px solid lighten(@skin-blue-sidebar-bg, 10%);
margin: 10px 10px;
input[type="text"], .btn {
box-shadow: none;
background-color: lighten(@skin-blue-sidebar-bg, 10%);
border: 1px solid transparent;
height: 35px;
.transition(all @transition-speed @transition-fn);
}
input[type="text"]{
color: #666;
.border-radius(2px, 0, 2px, 0)!important;
&:focus, &:focus + .input-group-btn .btn {
background-color: #fff;
color: #666;
}
&:focus + .input-group-btn .btn {
border-left-color: #fff;
}
}
.btn {
color: #999;
.border-radius(0, 2px, 0, 2px)!important;
}
}
}