// -- 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; } } .view-shop { line-height: @top-bar-height; margin-right: 20px; float: right; a { color: #fff; text-decoration: none; } } } // -- Brandbar ---------------------------------------------------------------- .loginpage { .brandbar { width: 100%; } .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; } } } // -- 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; } // The action bar on the right .actions { text-align: right; } } // 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; .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; } } } } // 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: 18px; } // 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: 0px; } // 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; .btn-add-item { display: block; float: right; } } td, th { text-align: center; } 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; } }