dinislage/PrestaShop
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

//fix layout and contrasted colors

Browse Source
This commit is contained in:
Kevin Granger
2013-08-09 15:08:14 +02:00
parent 6ae222e720
commit bca29980d5
4 changed files with 115 additions and 90 deletions
Download Patch File Download Diff File Expand all files Collapse all files
admin-dev/themes/default/css/admin-theme.css
+74 -64
View File
@@ -264,12 +264,12 @@ textarea {
line-height: inherit; }
a {
color: #ef1778;
color: #33556e;
text-decoration: none; }
a:hover,
a:focus {
color: #ae0c55;
color: #1b2d3a;
text-decoration: underline; }
a:focus {
@@ -1555,7 +1555,7 @@ input[type="color"].input-small {
border-color: #5bc0de; }
.btn-link {
color: #ef1778;
color: #33556e;
font-weight: normal;
cursor: pointer;
border-radius: 0; }
@@ -1567,7 +1567,7 @@ input[type="color"].input-small {
.btn-link, .btn-link:hover, .btn-link:focus, .btn-link:active {
border-color: transparent; }
.btn-link:hover, .btn-link:focus {
color: #ae0c55;
color: #1b2d3a;
text-decoration: underline;
background-color: transparent; }
.btn-link[disabled]:hover, .btn-link[disabled]:focus, fieldset[disabled] .btn-link:hover, fieldset[disabled] .btn-link:focus {
@@ -1671,25 +1671,25 @@ input[type="button"].btn-block {
.dropdown-menu > li > a:hover, .dropdown-menu > li > a:focus {
text-decoration: none;
color: white;
background-color: #dd0f6c;
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ef1778), to(#dd0f6c));
background-image: -webkit-linear-gradient(top, #ef1778, #dd0f6c);
background-image: -moz-linear-gradient(top, #ef1778, #dd0f6c);
background-image: linear-gradient(to bottom, #ef1778, #dd0f6c);
background-color: #2b485d;
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#33556e), to(#2b485d));
background-image: -webkit-linear-gradient(top, #33556e, #2b485d);
background-image: -moz-linear-gradient(top, #33556e, #2b485d);
background-image: linear-gradient(to bottom, #33556e, #2b485d);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFEF1778', endColorstr='#FFDD0F6C', GradientType=0); }
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FF33556E', endColorstr='#FF2B485D', GradientType=0); }
.dropdown-menu > .active > a, .dropdown-menu > .active > a:hover, .dropdown-menu > .active > a:focus {
color: white;
text-decoration: none;
outline: 0;
background-color: #dd0f6c;
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ef1778), to(#dd0f6c));
background-image: -webkit-linear-gradient(top, #ef1778, #dd0f6c);
background-image: -moz-linear-gradient(top, #ef1778, #dd0f6c);
background-image: linear-gradient(to bottom, #ef1778, #dd0f6c);
background-color: #2b485d;
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#33556e), to(#2b485d));
background-image: -webkit-linear-gradient(top, #33556e, #2b485d);
background-image: -moz-linear-gradient(top, #33556e, #2b485d);
background-image: linear-gradient(to bottom, #33556e, #2b485d);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFEF1778', endColorstr='#FFDD0F6C', GradientType=0); }
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FF33556E', endColorstr='#FF2B485D', GradientType=0); }
.dropdown-menu > .disabled > a, .dropdown-menu > .disabled > a:hover, .dropdown-menu > .disabled > a:focus {
color: #999999; }
@@ -1773,12 +1773,12 @@ a.list-group-item:hover, a.list-group-item:focus {
a.list-group-item.active {
z-index: 2;
color: white;
background-color: #ef1778;
border-color: #ef1778; }
background-color: #33556e;
border-color: #33556e; }
a.list-group-item.active .list-group-item-heading {
color: inherit; }
a.list-group-item.active .list-group-item-text {
color: #fcd6e7; }
color: #9cbbd1; }
.panel {
padding: 15px;
@@ -1808,11 +1808,11 @@ a.list-group-item.active {
border-bottom-right-radius: 2px; }
.panel-primary {
border-color: #ef1778; }
border-color: #33556e; }
.panel-primary .panel-heading {
color: white;
background-color: #ef1778;
border-color: #ef1778; }
background-color: #33556e;
border-color: #33556e; }
.panel-success {
border-color: #d6e9c6; }
@@ -1929,8 +1929,8 @@ button.close {
margin-top: 9px; }
.nav.open > a, .nav.open > a:hover, .nav.open > a:focus {
color: #fff;
background-color: #ef1778;
border-color: #ef1778; }
background-color: #33556e;
border-color: #33556e; }
.nav.open > a .caret, .nav.open > a:hover .caret, .nav.open > a:focus .caret {
border-top-color: #fff;
border-bottom-color: #fff; }
@@ -1970,7 +1970,7 @@ button.close {
margin-left: 2px; }
.nav-pills > li.active > a, .nav-pills > li.active > a:hover, .nav-pills > li.active > a:focus {
color: #fff;
background-color: #ef1778; }
background-color: #33556e; }
.nav-stacked > li {
float: none; }
@@ -2022,12 +2022,12 @@ button.close {
display: block; }
.nav .caret {
border-top-color: #ef1778;
border-bottom-color: #ef1778; }
border-top-color: #33556e;
border-bottom-color: #33556e; }
.nav a:hover .caret {
border-top-color: #ae0c55;
border-bottom-color: #ae0c55; }
border-top-color: #1b2d3a;
border-bottom-color: #1b2d3a; }
.nav-tabs .dropdown-menu {
margin-top: -1px;
@@ -2860,7 +2860,7 @@ button.close {
a.thumbnail:hover,
a.thumbnail:focus {
border-color: #ef1778; }
border-color: #33556e; }
.thumbnail > img {
margin-left: auto;
@@ -2964,7 +2964,7 @@ a.list-group-item.active > .badge, a.list-group-item.active > .badge-success, a.
.nav-pills > .active > a > .badge,
.nav-pills > .active > a > .badge-success,
.nav-pills > .active > a > .badge-error {
color: #ef1778;
color: #33556e;
background-color: #fff; }
.nav-pills > li > a > .badge, .nav-pills > li > a > .badge-success, .nav-pills > li > a > .badge-error {
@@ -3022,7 +3022,7 @@ a.list-group-item.active > .badge, a.list-group-item.active > .badge-success, a.
color: #fff;
text-align: center;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
background-color: #ef1778;
background-color: #33556e;
-webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);
box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);
-webkit-transition: width 0.6s ease;
@@ -3031,7 +3031,7 @@ a.list-group-item.active > .badge, a.list-group-item.active > .badge-success, a.
transition: width 0.6s ease; }
.progress-striped .progress-bar {
background-color: #ef1778;
background-color: #33556e;
background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(0.25, rgba(255, 255, 255, 0.15)), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, rgba(255, 255, 255, 0.15)), color-stop(0.75, rgba(255, 255, 255, 0.15)), color-stop(0.75, transparent), to(transparent));
background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
background-image: -moz-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
@@ -5013,12 +5013,7 @@ https://github.com/ghinda/css-toggle-switch
.prestashop-switch span {
color: #fff; } }
html, body {
height: 100%;
min-height: 700px; }
body.fixed-top {
position: relative;
top: 35px; }
height: 100%; }
#header_infos {
background-color: #101215;
@@ -5033,13 +5028,15 @@ body.fixed-top {
background-color: #ef1778; }
#main {
position: relative; }
min-height: 100%;
height: auto !important;
padding: 35px 0 60px;
margin: 0 0 -60px; }
.container-fluid, .row-fluid {
width: 100%; }
#content {
min-height: 700px;
padding: 90px 20px 20px;
margin-left: 240px;
-webkit-transition-property: margin;
@@ -5054,7 +5051,8 @@ body.fixed-top {
-moz-transition-timing-function: ease-out;
-o-transition-timing-function: ease-out;
transition-timing-function: ease-out;
background-color: #f6f6f6; }
background-color: #f6f6f6;
background-image: url("../img/patterns/bedge_grunge.png"); }
#content fieldset, #content .panel {
padding: 20px;
margin-bottom: 20px;
@@ -5155,23 +5153,32 @@ body.fixed-top {
#sidebar > ul li.expanded ul {
display: block;
background-color: white; }
#sidebar > ul > li:hover > a, #sidebar > ul > li.active > a {
background-color: #8bc954;
color: #333333;
#sidebar > ul > li.active > a {
color: white;
background-color: #8bc954;
border-top: 1px solid #a5d57b;
border-bottom: 1px solid #71b238;
-webkit-box-shadow: #71b238 -4px 0 0 inset;
box-shadow: #71b238 -4px 0 0 inset; }
#sidebar > ul > li:hover > a i, #sidebar > ul > li.active > a i {
color: #8bc954 !important;
#sidebar > ul > li.active > a i {
color: #33556e !important;
background-color: white; }
#sidebar > ul > li.active:hover > a {
color: white;
-webkit-box-shadow: #71b238 -4px 0 0 inset;
box-shadow: #71b238 -4px 0 0 inset; }
#sidebar > ul > li:hover > a {
-webkit-box-shadow: #33556e -4px 0 0 inset;
box-shadow: #33556e -4px 0 0 inset; }
#sidebar > ul > li:hover > a i {
color: #33556e !important;
background-color: white; }
#sidebar > ul > li > a {
display: block;
padding: 5px 0 5px 5px;
padding: 3px 0 3px 5px;
border-top: 1px solid #32363f;
border-bottom: 1px solid #101215;
color: #a8a9ac;
color: #bebfc1;
text-transform: uppercase;
text-decoration: none;
-webkit-transition-property: background-color, border, box-shadow;
@@ -5210,22 +5217,28 @@ body.fixed-top {
background-color: white; }
#sidebar > ul > li ul li a {
display: block;
padding: 3px 10px 3px 10px;
padding: 3px 5px 3px 10px;
font-size: 12px;
border: none;
background-color: white; }
border-bottom: solid 1px #eeeeee;
background-color: white;
-webkit-box-shadow: #272a31 -4px 0 0 inset;
box-shadow: #272a31 -4px 0 0 inset; }
#sidebar > ul > li ul li a i {
margin-top: 3px;
color: #8bc954; }
#sidebar > ul > li ul li a:hover {
background-color: #e7f4dc;
text-decoration: none; }
color: #33556e;
background-color: #e9e9ea;
text-decoration: none;
-webkit-box-shadow: #33556e -4px 0 0 inset;
box-shadow: #33556e -4px 0 0 inset; }
#sidebar > ul > li ul li a:hover i {
color: #272a31; }
#sidebar > ul > li ul li.active a {
background-color: #8bc954;
color: #333333;
background-color: #8bc954; }
background-color: #33556e;
color: white;
background-color: #33556e; }
#sidebar > ul > li ul li.active a i {
color: #272a31; }
@@ -5250,18 +5263,14 @@ body.fixed-top {
display: none !important; }
.page-sidebar-closed #sidebar > ul > li:hover {
width: 250px !important;
position: relative;
-webkit-box-shadow: rgba(0, 0, 0, 0.15) 4px 4px 0;
box-shadow: rgba(0, 0, 0, 0.15) 4px 4px 0; }
position: relative; }
.page-sidebar-closed #sidebar > ul > li:hover span.title {
display: inline-block; }
.page-sidebar-closed #sidebar > ul > li:hover ul.submenu {
display: block !important;
position: absolute;
left: 50px;
width: 200px !important;
-webkit-box-shadow: rgba(0, 0, 0, 0.3) 4px 4px 8px;
box-shadow: rgba(0, 0, 0, 0.3) 4px 4px 8px; }
width: 200px !important; }
.page-sidebar-closed #content {
margin-left: 50px; }
.page-sidebar-closed #content .page-head h2.page-title {
@@ -5540,10 +5549,11 @@ tr.filter {
font-weight: 500; }
#footer {
display: block;
width: 100%;
float: left;
height: 60px;
padding: 5px 0;
background-color: black;
background-color: #101215;
color: #888888; }
#footer a {
color: #cccccc; }
admin-dev/themes/default/css/admin-theme.sass
+33 -21
View File
@@ -1,4 +1,3 @@
//do some sass magic with color schemes
//light
//$main-color: #DBD8CF //sable
//$main-color: #CFD7DD //bleu
@@ -53,6 +52,7 @@ $bg-content-color: #F6F6F6 //gris
//heading
//$bg-header-color: darken($secondary-color,20%)
$bg-header-color: darken($main-color,10%)
$bg-footer-color: darken($main-color,10%)
$bg-page-head-color : $secondary-color
$bg-panel-heading-color: lighten($secondary-color,30%)
@@ -68,11 +68,10 @@ $icon-color: #87C795
html, body
height: 100%
min-height: 700px
//min-height: 700px
body.fixed-top
position: relative
top: 35px
//position: relative
#header_infos
background-color: $bg-header-color
@@ -88,20 +87,22 @@ body.fixed-top
background-color: $badge-notif-color
#main
position: relative
min-height: 100%
height: auto!important
padding: 35px 0 60px
margin: 0 0 -60px
.container-fluid, .row-fluid
width: 100%
#content
min-height: 700px
padding: 90px 20px 20px
margin-left: 240px
@include transition-property(margin)
@include transition-duration(0.4s)
@include transition-timing-function(ease-out)
background-color: $bg-content-color
//background-image: url('../img/patterns/bedge_grunge.png') // texture
background-image: url('../img/patterns/bedge_grunge.png') // texture
fieldset, .panel
padding: 20px
margin-bottom: 20px
@@ -182,7 +183,6 @@ body.fixed-top
#sidebar
z-index: 9001
float: left
//position: absolute
width: 240px
background-color: $main-color
border-bottom: 1px solid lighten($main-color,5%)
@@ -204,22 +204,31 @@ body.fixed-top
display: block
background-color: white
> li
&:hover > a, &.active > a
@include contrasted($secondary-color)
&.active > a
color: contrast-color($main-color, #333, white, 30%)
background-color: $secondary-color
border-top: 1px solid lighten($secondary-color,10%)
border-bottom: 1px solid darken($secondary-color,10%)
@include box-shadow(darken($secondary-color,10%) -4px 0 0 inset)
i
color: $secondary-color!important
color: $brand-primary!important
background-color: white
&.active:hover > a
color: white
@include box-shadow(darken($secondary-color,10%) -4px 0 0 inset)
&:hover > a
@include box-shadow($brand-primary -4px 0 0 inset)
i
color: $brand-primary!important
background-color: white
> a
display: block
padding: 5px 0 5px 5px
padding: 3px 0 3px 5px
border-top: 1px solid lighten($main-color,5%)
border-bottom: 1px solid darken($main-color,10%)
$color: contrast-color($main-color, #333, white, 30%)
color: mix($color, $main-color, 60%)
color: mix($main-color, $color, 30%)
text-transform: uppercase
text-decoration: none
@include transition-property(background-color, border, box-shadow)
@@ -240,22 +249,26 @@ body.fixed-top
li
a
display: block
padding: 3px 10px 3px 10px
padding: 3px 5px 3px 10px
font-size: 12px
border: none
border-bottom: solid 1px #eee
background-color: white
@include box-shadow($main-color -4px 0 0 inset)
i
margin-top: 3px
color: $secondary-color
&:hover
background-color: lighten($secondary-color,35%)
color: $brand-primary
background-color: mix(white, $main-color, 90%)
text-decoration: none
@include box-shadow($brand-primary -4px 0 0 inset)
i
color: $main-color
&.active
a
@include contrasted(darken($secondary-color,0%))
background-color: darken($secondary-color,0%)
@include contrasted($brand-primary)
background-color: $brand-primary
i
color: $main-color
@@ -273,7 +286,6 @@ body.fixed-top
> ul > li:hover
width: 250px!important
position: relative
@include box-shadow(rgba(black,0.15) 4px 4px 0 )
span.title
display: inline-block
ul.submenu
@@ -281,7 +293,6 @@ body.fixed-top
position: absolute
left: 50px
width: 200px!important
@include box-shadow(rgba(black,0.30) 4px 4px 8px )
#content
margin-left: 50px
@@ -613,10 +624,11 @@ tr.filter
font-weight: 500
#footer
display: block
width: 100%
float: left
height: 60px
padding: 5px 0
background-color: black
background-color: $bg-footer-color
color: #888
a
color: #ccc
admin-dev/themes/default/css/bootstrap/_variables.scss
+4 -1
View File
@@ -19,7 +19,10 @@ $gray-lighter: lighten(#000, 93.5%) ; //#eee
// Brand colors
// -------------------------
$brand-primary: #EF1778 ;
//$brand-primary: #EF1778 ; //rose Prestashop
//$brand-primary: #1EAEC0 ; //bleu turquoise
$brand-primary: #33556E ;
$brand-success: #5cb85c ;
$brand-warning: #f0ad4e ;
$brand-danger: #d9534f ;
admin-dev/themes/default/template/header.tpl
+4 -4
View File
@@ -103,14 +103,14 @@
<link type="text/css" rel="stylesheet" href="{$base_url}css/admin-ie.css" />
<![endif]-->
{*if isset($brightness)*}
{if isset($brightness)}
<!--
/// multishop
<style type="text/css">
div#header_infos, div#header_infos a#header_shopname, div#header_infos a#header_logout, div#header_infos a#header_foaccess {ldelim}color:{$brightness}{rdelim}
</style>
-->
{*/if*}
{/if}
<link href='http://fonts.googleapis.com/css?family=Ubuntu:300|Open+Sans' rel='stylesheet' type='text/css'>
@@ -243,7 +243,7 @@
<div id="main">
<div id="sidebar" class="page-sidebar nav-collapse collapse">
<div id="sidebar" data-spy="affix" data-offset-top="0" class="page-sidebar nav-collapse collapse">
{if !$tab}
<div class="mainsubtablist" style="display:none"></div>
{/if}
@@ -277,7 +277,7 @@
<li {if $t2.current} class="active"{/if}>
<a href="{$t2.href|escape:'htmlall':'UTF-8'}">
{if $t2.name eq ''}{$t2.class_name}{else}{$t2.name|escape:'htmlall':'UTF-8'}{/if}
<i class="icon-chevron-sign-right pull-right"></i>
<!-- <i class="icon-chevron-sign-right pull-right"></i> -->
</a>
</li>
{/if}