How To Change Backend Css

Hi all,

I was looking a long time for a theme for my backend and just found one in the marketplace.

since it was a little expensive and i also had another problem with it which i'm not going to tell here, i decided to find another way for my need.

So, i created a 'less' file for my backend and its not bad now, but it needs improvements.

you can download the file and take a look. as i said it needs improvements both in css codes and color scheme.

It is my great pleasure to welcome all of you who wants to participate on making it a success work.

For anyone who doesn't know how to use my_changes add-on, please take a look on this topic:

http://forum.cs-cart.com/topic/37510-how-to-add-custom-css-with-my-changes-addon/

All the best,

diako

/* **********************************************************************************
			Backend colour skin

********************************************************************************** */

@A0001: #4276a4; /* main color /
@A0002: #ff8000; /
links /
@A0003: #cbe8fd; /
secondary color /
@A0004: @A0003; /
title color /
@A0005: darken(@A0003, 5%); /
menu seperators lines /
@A0006: #4276a4; /
color1 /
@A0007: #e9fbf9; /
color2 /
@A0008: #e4f3ff; /
Action bar bk color /
@A0009: @A0001; /
Action bar color */

.actions{
background-color: @A0008;
color: @A0009;
}
.actions .title{
background-image: none !important;
border-left: 1px solid darken(@A0008, 5%);
}

.dropdown-top-menu-item.open > a{
background-image: none !important;
background-color: @A0003 !important;
}

div.modal.signin-modal{
-webkit-border-radius: 0px;
-moz-border-radius: 0px;
border-radius: 0px;
color: @A0001;
box-shadow: -20px 16px 20px 6px @A0001;
-webkit-box-shadow: -20px 16px 20px 6px @A0001;
-moz-box-shadow: -20px 16px 20px 6px @A0001;
}

div.modal.signin-modal .modal-header{
background-color: @A0001;
}

div.signin-modal .modal-header h4{
color: @A0003;
}

.block-control-menu{
background-color: @A0001;
}

[class^=“icon-”].icon-white, [class*=" icon-“].icon-white, [class^=“exicon-”].icon-white, [class*=” exicon-"].icon-white{
color: darken(@A0007, 30%);
}

.navbar .nav .active > a, .navbar .nav .active > a:hover{
background-color: @A0003;
}

.navbar-inverse .nav .active > a, .navbar-inverse .nav .active > a:hover, .navbar-inverse .nav .active > a:focus{
color: @A0006;
}

div.actions.cm-sticky-scroll select#period_selects{
border-color: @A0001;
box-shadow: inset 0 1px 1px rgba(0,0,0,0.075), 0 0 8px @A0001;
-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,0.075), 0 0 8px @A0001;
-moz-box-shadow: inset 0 1px 1px rgba(0,0,0,0.075), 0 0 8px @A0001;
}

.btn-primary:hover, .btn-primary:focus, .btn-primary:active, .btn-primary.active, .btn-primary.disabled, .btn-primary[disabled]{
background-color: @A0003;
color: @A0006;
}

.navbar-admin-top .navbar .navbar-inner .nav > li > a{
color: @A0007 !important;
}

.subnav .nav .dropdown-menu li:hover .hint, .subnav .nav .dropdown-menu .active .hint{
color: lighten(@A0001, 25%);
}

.navbar-admin-top .navbar .navbar-inner .nav > li > a .caret{
border-top-color: @A0007;
border-bottom-color: @A0007;
}

.dashboard-card{
-webkit-border-radius: 0px;
-moz-border-radius: 0px;
border-radius: 0px;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
border: 1px solid @A0001;
}

.dashboard-card-title{
background-image: none;
background-color: @A0001;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
color: @A0007;
}

.dashboard-card-content{
background-image: none;
background-color: #fff;
}

.navbar-admin-top .navbar .navbar-inner{
background-image: none;
background-color: @A0001;
border-color: @A0001;
}

.navbar-admin-top .navbar .navbar-inner .divider-vertical{
border-left-color: @A0001;
border-right-color: @A0001;
}

div.navbar-admin-top div.subnav{
background-image: none;
background-color: @A0003;
}

.subnav .nav > li > a{
border-left: none; /* 1px solid @A0005; */
border-right: 1px solid @A0005;
color: @A0006;
}

.subnav .search input[type=“text”]{
-webkit-border-radius: 0px;
-moz-border-radius: 0px;
border-radius: 0px;
}

.quick-menu a.quick-menu-link{
color: @A0006;
}

.nav .dropdown-toggle .caret{
border-top-color: @A0006;
}

.dropdown-menu > li > a:hover, .dropdown-menu > li > a:focus, .dropdown-submenu:hover > a, .dropdown-submenu:focus > a{
background-image: none;
background-color: @A0001;
color: @A0007;
}

.hover-show.nav-pills li.dropdown:hover .dropdown-toggle{
background-color: @A0001;
border-color: @A0001;
}

.hover-show.navbar-right li.dropdown:hover .dropdown-toggle{
background-image: none;
background-color: @A0003;
color: @A0006 !important;
}
.ajax-popup-tools ul li a:hover,
.dropdown-menu > .active > a, .dropdown-menu > .active > a:hover, .dropdown-menu > .active > a:focus{
background-image: none;
background-color: @A0001;
color: @A0007;
}

.navbar-admin-top .navbar .navbar-inner .nav li.dropdown.open > .dropdown-toggle,
.navbar-admin-top .navbar .navbar-inner .nav li.dropdown.active > .dropdown-toggle{
background-image: none;
background-color: @A0003;
color: @A0006 !important;
}

.hover-show.navbar-right li.dropdown:hover .dropdown-toggle .caret{
border-top-color: @A0001;
border-bottom-color: @A0001;
}

.navbar-inverse .nav li.dropdown.open > .dropdown-toggle .caret, .navbar-inverse .nav li.dropdown.active > .dropdown-toggle .caret, .navbar-inverse .nav li.dropdown.open.active > .dropdown-toggle .caret{
border-top-color: @A0001;
border-bottom-color: @A0001;
}

textarea:focus, input[type=“text”]:focus, input[type=“password”]:focus, input[type=“datetime”]:focus, input[type=“datetime-local”]:focus, input[type=“date”]:focus, input[type=“month”]:focus, input[type=“time”]:focus, input[type=“week”]:focus, input[type=“number”]:focus, input[type=“email”]:focus, input[type=“url”]:focus, input[type=“search”]:focus, input[type=“tel”]:focus, input[type=“color”]:focus, .uneditable-input:focus{
border-color: @A0001;
box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px @A0001;
-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px @A0001;
-moz-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px @A0001;
}

#quick_menu_content .menu-container li a:hover{
background-color: @A0001;
}

.nav-list > .active > a, .nav-list > .active > a:hover, .nav-list > .active > a:focus{
background-color: @A0001;
color: @A0007;
}

.tabs .nav-pills > li > a, .tabs .nav-tabs > li > a{
color: @A0001;
}

.btn-primary{
background-image: none;
background-color: @A0001;
color: @A0007;
}

.tabs .nav-pills > .active > a, .tabs .nav-pills > .active > a:hover, .tabs .nav-pills > .active > a:focus, .tabs .nav-tabs > .active > a, .tabs .nav-tabs > .active > a:hover, .tabs .nav-tabs > .active > a:focus{
background-color: @A0001;
}

a{
color: @A0002;
}

.subnav .nav > .active > a, .subnav .nav > .active > a:hover{
background-color: @A0001;
color: @A0007;
}

button.jApplyBtn.btn.btn-sm.btn-success{
background-image: none;
background-color: @A0001;
color: @A0007;
}

.subnav .nav > .active > a .caret, .subnav .nav > .active > a:hover .caret{
border-top-color: @A0007;
}