Jump to content

  • You cannot start a new topic
  • You cannot reply to this topic

Let's Work Together On A Better Backend Looks Rate Topic   - - - - -

 
  • diako
  • Member
  • Members
  • Join Date: 21-Jun 17
  • 26 posts

Posted 02 March 2018 - 06:46 PM #1

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...-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;
}

Attached Files