Files
sterivein/templates/admin/default/assets/css/admin.less
2013-09-03 19:32:57 +02:00

807 lines
17 KiB
Plaintext
Executable File

// -- Tools --------------------------------------------------------------------
.rounded(@radius: 2px) {
-webkit-border-radius: @radius;
-moz-border-radius: @radius;
border-radius: @radius;
}
.border-radius(@topright: 0, @bottomright: 0, @bottomleft: 0, @topleft: 0) {
-webkit-border-top-right-radius: @topright;
-webkit-border-bottom-right-radius: @bottomright;
-webkit-border-bottom-left-radius: @bottomleft;
-webkit-border-top-left-radius: @topleft;
-moz-border-radius-topright: @topright;
-moz-border-radius-bottomright: @bottomright;
-moz-border-radius-bottomleft: @bottomleft;
-moz-border-radius-topleft: @topleft;
border-top-right-radius: @topright;
border-bottom-right-radius: @bottomright;
border-bottom-left-radius: @bottomleft;
border-top-left-radius: @topleft;
.background-clip(padding-box);
}
.background-clip(@argument: padding-box) {
-moz-background-clip: @argument;
-webkit-background-clip: @argument;
background-clip: @argument;
}
.box-shadow(@shadow: 0 1px 2px rgba(0,0,0,.05)) {
-webkit-box-shadow: @shadow;
-moz-box-shadow: @shadow;
box-shadow: @shadow;
}
// -- Base styling ------------------------------------------------------------
html, body {
height: 100%;
margin: 0;
padding: 0;
}
body {
background: url("img/bg.jpg") repeat;
font-size: 13px;
}
h3, h4 {
color: #5a6876;
background: -webkit-gradient(linear, left top, left bottom, from(#42505d), to(#72808e));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
h3 {
padding: 0px;
margin: 0px 0px 20px 0px;
text-align: left;
font-size : 18px;
}
h4 {
padding: 0px 0px 20px 0px;
margin: 0px;
text-align: left;
}
#wrapper {
padding-top: 20px;
}
a {
color: #e9720f;
font-weight: bold;
}
// Bootstrap Adjustements ------------------------------------------------------
hr {
border: 0;
border-top: 1px solid rgba(0, 0, 0, 0.1);
border-bottom: 1px solid rgba(250, 250, 250, 0.1);
width: 90%;
margin: 0 auto;
clear: both;
margin-top: 20px;
}
.btn-primary, .btn-large {
background: #e9730f;
background-image: linear-gradient(bottom, rgb(227,83,11) 0%, rgb(243,153,34) 100%);
background-image: -o-linear-gradient(bottom, rgb(227,83,11) 0%, rgb(243,153,34) 100%);
background-image: -moz-linear-gradient(bottom, rgb(227,83,11) 0%, rgb(243,153,34) 100%);
background-image: -webkit-linear-gradient(bottom, rgb(227,83,11) 0%, rgb(243,153,34) 100%);
background-image: -ms-linear-gradient(bottom, rgb(227,83,11) 0%, rgb(243,153,34) 100%);
background-image: -webkit-gradient(
linear,
left bottom,
left top,
color-stop(0, rgb(227,83,11)),
color-stop(1, rgb(243,153,34))
);
box-shadow: inset 0px 0px 2px rgba(250,250,250,0.5), 0px 1px 3px rgba(0,0,0,0.2);
color: white;
}
.btn-large:hover, .btn-primary:hover {
background: #e9730f;
background-image: linear-gradient(bottom, rgb(227,83,11) 0%, rgb(243,153,34) 100%);
background-image: -o-linear-gradient(bottom, rgb(227,83,11) 0%, rgb(243,153,34) 100%);
background-image: -moz-linear-gradient(bottom, rgb(227,83,11) 0%, rgb(243,153,34) 100%);
background-image: -webkit-linear-gradient(bottom, rgb(227,83,11) 0%, rgb(243,153,34) 100%);
background-image: -ms-linear-gradient(bottom, rgb(227,83,11) 0%, rgb(243,153,34) 100%);
background-image: -webkit-gradient(
linear,
left bottom,
left top,
color-stop(0, rgb(227,83,11)),
color-stop(1, rgb(243,153,34))
);
box-shadow: inset 0px 0px 2px rgba(250,250,250,0.8), 0px 1px 3px rgba(0,0,0,0.2);
color: white;
}
.footer {
background: none repeat scroll 0 0 transparent;
border: medium none;
box-shadow: none;
color: #7D756A;
margin-bottom: 0;
padding: 35px 15px 15px;
text-align: left;
}
// -- Top bar -----------------------------------------------------------------
.topbar {
@top-bar-height: 50px;
background: url("img/top.jpg") repeat-x;
color: #6d737b;
font-size: 13px;
font-weight: bold;
text-shadow: 0px 1px 1px black;
.form-search {
position: relative;
float: right;
margin: 0px;
.control-group {
margin-bottom: 0px;
}
input.search-query {
background: url("img/search.png") no-repeat;
width: 212px;
height: 20px;
outline: none;
border: none;
padding: 5px 20px 5px 20px;
.rounded(0px);
font-size: 12px;
color: #eee;
&:focus {
box-shadow: none;
color: white;
}
}
button.btn {
position: absolute;
right: 5px;
text-indent: -13337px;
background: url("img/search-icon.png") no-repeat;
width: 16px;
height: 15px;
display: block;
cursor: pointer;
outline: none;
border: none;
top: 17px;
box-shadow: none;
.rounded(0px);
z-index: 1337;
}
}
.container {
line-height: @top-bar-height;
}
.version-info {
float: left;
line-height: @top-bar-height;
background: url("img/top-bar-logo.png") left -3px no-repeat;
padding-left: 100px;
}
.user-info {
float: right;
line-height: @top-bar-height;
margin-left: 20px;
color: #fff;
a.logout {
text-indent: -13337px;
display: inline-block;
background: url("img/logout.png") left center no-repeat;
width: 23px;
height: @top-bar-height;
}
a.profile {
color: #fff;
}
}
.view-shop {
line-height: @top-bar-height;
margin-right: 20px;
float: right;
a {
color: #fff;
text-decoration: none;
}
}
}
// -- Brandbar ----------------------------------------------------------------
.loginpage {
.hero-unit {
background-color: transparent !important;
h1 {
margin-bottom: 25px;
}
}
.well {
background-color: #E4E3DE;
border: 1px solid rgba(0, 0, 0, 0.2);
box-shadow: 0 -4px 0 rgba(0, 0, 0, 0.05) inset;
}
}
.brandbar {
background: url("img/header.jpg") repeat-x;
height: 90px;
a.brand {
text-indent: -133337px;
display: block;
float: left;
margin-right: 20px;
background: url("img/logo.png") 0px 12px no-repeat;
width: 124px;
height: 63px;
}
.breadcrumb {
.rounded(0px);
padding: 25px 0px 25px 30px;
background: url("img/logo-light.png") left center no-repeat;
float: left;
margin: 12px 0px 0px 0px;
a {
color: #949aa1;
text-shadow: 0px 1px 0px rgba(0,0,0,0.8);
}
.active {
color: #FFF;
text-shadow: 0px 1px 0px rgba(0,0,0,0.8);
border-bottom: 1px dotted white;
}
}
.Blocmoncompte {
float: right;
margin: 0px;
padding: 0px;
margin-top: 35px;
color: white;
font-size: 13px;
text-shadow: 0px 1px 0px rgba(0,0,0,0.8);
}
dt {
float: left;
margin-right: 15px;
}
.deconnexion {
float: right;
margin: 0px;
a {
text-indent: -13337px;
display: block;
background: url("img/deconnexion.png") no-repeat;
width: 23px;
height: 24px;
}
}
}
.brandbar-wide {
width: 100%;
}
// -- Navigation bar ----------------------------------------------------------
.navbar {
margin-bottom: 0px;
}
.navbar-inner {
border-top: none;
.border-radius(0, 4px, 4px, 0);
.container{
width: 1170px;
}
}
// -- Breadcrumb --------------------------------------------------------------
.breadcrumb {
margin-top: 0;
background-color: transparent;
padding: 0 15px;
> li > .divider {
color: inherit;
}
> .active {
color: inherit;
}
}
// -- Feed list on home page --------------------------------------------------
.feed-list {
h2 {
font-size: 24px;
line-height: 120%;
color: #E9730F;
a {
&:hover {
color: inherit;
text-decoration: none;
}
}
}
h3 {
margin-bottom: 0;
padding-bottom: 0;
font-size: 90%;
line-height: 100%;
}
.feed-list-item{
padding: 10px 20px;
}
}
// -- Login form --------------------------------------------------------------
.form-signin {
max-width: 400px;
padding: 19px 29px 29px;
margin: 0 auto 20px;
background-color: #fff;
border: 1px solid #e5e5e5;
.rounded(5px);
.box-shadow;
}
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: 1px solid #E9730F;
box-shadow: 0px 0px 8px #FFA65A;
}
// -- Allow inline forms validation states ------------------------------------
form .warning .control-label,
form .warning .help-block,
form .warning .help-inline {
color: #c09853;
}
form .warning .checkbox,
form .warning .radio,
form .warning input,
form .warning select,
form .warning textarea {
color: #c09853;
}
form .warning input,
form .warning select,
form .warning textarea {
border-color: #c09853;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
-moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
}
form .warning input:focus,
form .warning select:focus,
form .warning textarea:focus {
border-color: #a47e3c;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #dbc59e;
-moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #dbc59e;
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #dbc59e;
}
form .warning .input-prepend .add-on,
form .warning .input-append .add-on {
color: #c09853;
background-color: #fcf8e3;
border-color: #c09853;
}
form .error .control-label,
form .error .help-block,
form .error .help-inline {
color: #b94a48;
}
form .error .checkbox,
form .error .radio,
form .error input,
form .error select,
form .error textarea {
color: #b94a48;
}
form .error input,
form .error select,
form .error textarea {
border-color: #b94a48;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
-moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
}
form .error input:focus,
form .error select:focus,
form .error textarea:focus {
border-color: #953b39;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #d59392;
-moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #d59392;
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #d59392;
}
form .error .input-prepend .add-on,
form .error .input-append .add-on {
color: #b94a48;
background-color: #f2dede;
border-color: #b94a48;
}
form .success .control-label,
form .success .help-block,
form .success .help-inline {
color: #468847;
}
form .success .checkbox,
form .success .radio,
form .success input,
form .success select,
form .success textarea {
color: #468847;
}
form .success input,
form .success select,
form .success textarea {
border-color: #468847;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
-moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
}
form .success input:focus,
form .success select:focus,
form .success textarea:focus {
border-color: #356635;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #7aba7b;
-moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #7aba7b;
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #7aba7b;
}
form .success .input-prepend .add-on,
form .success .input-append .add-on {
color: #468847;
background-color: #dff0d8;
border-color: #468847;
}
form .info .control-label,
form .info .help-block,
form .info .help-inline {
color: #3a87ad;
}
form .info .checkbox,
form .info .radio,
form .info input,
form .info select,
form .info textarea {
color: #3a87ad;
}
form .info input,
form .info select,
form .info textarea {
border-color: #3a87ad;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
-moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
}
form .info input:focus,
form .info select:focus,
form .info textarea:focus {
border-color: #2d6987;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #7ab5d3;
-moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #7ab5d3;
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #7ab5d3;
}
form .info .input-prepend .add-on,
form .info .input-append .add-on {
color: #3a87ad;
background-color: #d9edf7;
border-color: #3a87ad;
}
// -- General decoration of back-office boxes ---------------------------------
.general-block-decorator {
background: none repeat scroll 0 0 white;
border: 1px solid rgba(0, 0, 0, 0.2);
border-radius: 4px 4px 4px 4px;
box-shadow: 0 -4px 0 rgba(0, 0, 0, 0.05) inset, 0 2px 3px rgba(0, 0, 0, 0.1);
padding: 1em;
margin-bottom: 20px;
// The block title
.title {
color: #5A6876;
text-transform: uppercase;
font-weight: bold;
padding-bottom: 0.5em;
line-height: 30px;
}
.title-without-tabs {
border-bottom: 2px solid #A5CED8;
margin-bottom: 0.5em;
}
// The action bar on the right
.actions {
text-align: right;
}
.form {
margin-bottom: 0;
}
}
// Reduce bottom margin of admin tabs.
.admin-tabs {
margin-bottom: 1em;
}
// The overall form container
.form-container {
// The inner toolbar (flags & save buttons)
.inner-toolbar {
line-height: 30px;
margin-bottom: 1em;
border-bottom: 1px dotted #A5CED8;
padding-bottom: 0.5em;
.inner-actions {
text-align: right;
}
.nav-pills {
margin-bottom: 0;
li a {
padding: 4px;
opacity: 0.3;
}
li.active a {
opacity: 1;
background-color: #E7E7E7;
border: 1px solid #E9720F;
}
}
}
}
// Modal dialog tweaking ------------------------------------------------------
.modal {
form {
margin-bottom: 0;
}
}
// -- Admin forms tweaking ----------------------------------------------------
label {
font-weight: bold;
&.checkbox {
font-weight: normal;
}
}
.input-append.input-block-level .add-on img {
max-height: 16px;
}
// Information in field label
.label-help-block, .help-block {
color: lighten(#595959, 20);
display: block;
font-size: 80%;
font-style: italic;
line-height: 130%;
font-weight: normal;
}
.form-horizontal input + .help-block,
.form-horizontal select + .help-block,
.form-horizontal textarea + .help-block,
.form-horizontal .uneditable-input + .help-block,
.form-horizontal .input-prepend + .help-block,
.form-horizontal .input-append + .help-block
.help-block, .form-horizontal .help-block {
margin-top: 5px;
}
// Fix for append-fields shorter than others
// see http://stackoverflow.com/questions/13306670/bootstrap-prepended-and-appended-input-how-to-max-input-field-width
.input-append.input-block-level,
.input-prepend.input-block-level {
display: table;
}
.input-append.input-block-level .add-on,
.input-prepend.input-block-level .add-on {
display: table-cell;
width: 1%; /* remove this if you want default bootstrap button width */
}
.input-append.input-block-level > input,
.input-prepend.input-block-level > input {
box-sizing: border-box; /* use bootstrap mixin or include vendor variants */
display: table; /* table-cell is not working well in Chrome for small widths */
min-height: inherit;
width: 100%;
}
.input-append.input-block-level > input {
border-right: 0;
}
.input-prepend.input-block-level > input {
border-left: 0;
}
// -- Catalog Tables ----------------------------------------------------------
.table-striped {
background: white;
margin-bottom: 1em;
caption {
text-align: left;
color: #5A6876;
text-transform: uppercase;
font-weight: bold;
background-color: #fff;
padding-bottom: 0.5em;
border-bottom: 2px solid #A5CED8;
line-height: 30px;
.action-btn {
display: block;
float: right;
margin-left: 10px;
text-transform: none;
}
}
td, th {
text-align: center;
&.text-center {
text-align: center;
}
&.text-left {
text-align: left;
}
&.text-right {
text-align: right;
}
}
td.object-title, th.object-title {
text-align: left;
}
td.message {
// Center the alert box (20px bottom margin) in the table cell
padding: 20px 20px 0 20px;
}
th {
a {
color: inherit;
}
}
td {
vertical-align: middle;
img {
border: 2px solid white;
border-radius: 4px 4px 4px 4px;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}
&.actions {
text-align: right;
}
}
}
.menu-list-table .table-striped {
td, th {
text-align: left;
}
td:nth-child(2) {
text-align: right;
}
caption {
background-color: #FFFFFF;
border-bottom: 2px solid #A5CED8;
color: #5A6876;
font-weight: bold;
line-height: 30px;
text-align: left;
text-transform: uppercase;
}
}
.table-left-aligned {
th, td {
text-align: left;
}
select, textarea, input[type="text"], input[type="password"], input[type="datetime"], input[type="datetime-local"], input[type="date"], input[type="month"], input[type="time"], input[type="week"], input[type="number"], input[type="email"], input[type="url"], input[type="search"], input[type="tel"], input[type="color"], .uneditable-input {
margin-bottom: 0;
}
}
// Modal is no longer limited
.modal-body {
max-height: none;
}