You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
531 lines
9.1 KiB
531 lines
9.1 KiB
@charset "UTF-8"; |
|
|
|
/* FONTS */ |
|
@font-face { |
|
font-family: "OpenSans"; |
|
src: url("../fonts/openSans.woff") format("woff"); |
|
} |
|
|
|
|
|
* { |
|
margin: 0; |
|
padding: 0; |
|
} |
|
html, body { |
|
height: 100%; |
|
font-size: 95%; |
|
font-family: "OpenSans", "Cantarell", "Helvetica", "Arial", sans-serif; |
|
color: #888; |
|
} |
|
|
|
/* LIENS */ |
|
a { |
|
color: #6986B2; |
|
text-decoration: none; |
|
} |
|
a:hover { |
|
text-decoration: underline; |
|
} |
|
|
|
/* LISTES */ |
|
ul, ol, dl { |
|
margin: 10px 0 10px 30px; |
|
line-height: 190%; |
|
} |
|
dd { |
|
margin: 0 0 10px 30px; |
|
} |
|
|
|
/* TITRES */ |
|
h1, h2, h3 { |
|
min-height: 40px; |
|
margin: 15px 0 5px; |
|
line-height: 40px; |
|
} |
|
|
|
/* IMG */ |
|
figure { |
|
margin: 5px 0 10px; |
|
text-align: center; |
|
} |
|
figcaption { |
|
display: inline-block; |
|
padding: 3px 20px; |
|
color: #999; |
|
font-style: italic; |
|
border-bottom: 1px solid #ccc; |
|
} |
|
img { |
|
height: auto; |
|
max-width: 100%; |
|
vertical-align: middle; |
|
} |
|
a img { |
|
border: none; |
|
} |
|
|
|
/* VIDEOS */ |
|
iframe, embed, object, video { |
|
max-width: 100%; |
|
} |
|
|
|
/* FORMULAIRES */ |
|
legend { |
|
display: block; |
|
width: 100%; |
|
margin: 20px 0 5px; |
|
padding: 5px 0; |
|
border-bottom: 1px solid #2f2f2f; |
|
font-size: 150%; |
|
clear: both; |
|
} |
|
label { |
|
display: block; |
|
min-height: 25px; |
|
padding: 5px 0; |
|
font-size: 14px; |
|
line-height: 25px; |
|
cursor: pointer; |
|
} |
|
input { |
|
width: 180px; |
|
} |
|
textarea { |
|
width: 360px; |
|
height: 100px; |
|
} |
|
input, select, textarea { |
|
display: inline-block; |
|
max-width: 100%; |
|
min-height: 25px; |
|
padding: 5px; |
|
background: #333; |
|
border: 1px solid #000; |
|
border-radius: 3px; |
|
color: #999; |
|
line-height: 25px; |
|
vertical-align: middle; |
|
box-shadow: 0 2px 2px #1d1d1d inset; |
|
} |
|
option { |
|
padding:0 .5em 0 .5em; |
|
} |
|
input[type="radio"], |
|
input[type="checkbox"] { |
|
width: 15px !important; |
|
min-height: 15px !important; |
|
} |
|
input:focus, select:focus, textarea:focus { |
|
color: #6986b2; |
|
border-color: #2f2f2f; |
|
} |
|
input:invalid, select:invalid { |
|
border-color: red; |
|
box-shadow: 0 0 2px 1px red; |
|
} |
|
input:focus.extend { |
|
width: 300px; |
|
transition: width 200ms linear; |
|
} |
|
|
|
.form-group { |
|
margin: 0; |
|
} |
|
.form-group:after { |
|
content: ""; |
|
display: block; |
|
clear: both; |
|
} |
|
.form-group.form-actions { |
|
min-width: 250px; |
|
padding: 5px 0; |
|
background: #1a1a1a; |
|
border-top: 1px solid #2f2f2f; |
|
} |
|
.form-group.form-actions .btn { |
|
margin: 0 10px; |
|
} |
|
.form-group .group-name { |
|
display: block; |
|
float: left; |
|
width: 200px; |
|
padding: 10px 0; |
|
text-align: right; |
|
} |
|
.form-group .group-controls { |
|
min-width: 250px; |
|
min-height: 25px; |
|
margin: 0 0 0 220px; |
|
padding: 5px 0; |
|
} |
|
.form-group .group-controls .control { |
|
display: block; |
|
min-height: 30px; |
|
padding: 5px 0; |
|
line-height: 25px; |
|
font-size: 14px; |
|
} |
|
|
|
.stick { |
|
display: inline-block; |
|
white-space: nowrap; |
|
font-size: 0px; |
|
vertical-align: middle; |
|
} |
|
.stick input, |
|
.stick .btn { |
|
border-radius: 0; |
|
font-size: 14px; |
|
} |
|
.stick .btn:first-child, |
|
.stick input:first-child { |
|
border-radius: 3px 0 0 3px; |
|
} |
|
.stick .btn-important:first-child { |
|
border-right: 1px solid #000; |
|
} |
|
.stick .btn:last-child, |
|
.stick input:last-child { |
|
border-radius: 0 3px 3px 0; |
|
} |
|
.stick .btn + .btn, |
|
.stick .btn + input, |
|
.stick .btn + .dropdown > .btn, |
|
.stick input + .btn, |
|
.stick input + input, |
|
.stick input + .dropdown > .btn, |
|
.stick .dropdown + .btn, |
|
.stick .dropdown + input, |
|
.stick .dropdown + .dropdown > .btn { |
|
border-left: none; |
|
} |
|
.stick .btn + .dropdown > .btn { |
|
border-left: none; |
|
border-radius: 0 3px 3px 0; |
|
} |
|
.stick .btn + .dropdown a { |
|
font-size: 12px; |
|
} |
|
|
|
.btn { |
|
display: inline-block; |
|
min-height: 37px; |
|
min-width: 15px; |
|
padding: 5px 10px; |
|
background: linear-gradient(to bottom, #fff 0%, #eee 100%); |
|
border-radius: 3px; |
|
border: 1px solid #000; |
|
color: #888; |
|
line-height: 20px; |
|
vertical-align: middle; |
|
cursor: pointer; |
|
overflow: hidden; |
|
} |
|
a.btn { |
|
min-height: 25px; |
|
line-height: 25px; |
|
} |
|
.btn:hover { |
|
background: linear-gradient(to bottom, #4A5D7A, #26303F); |
|
text-decoration: none; |
|
} |
|
.btn.active, |
|
.btn:active, |
|
.dropdown-target:target ~ .btn.dropdown-toggle { |
|
background: #26303F; |
|
} |
|
|
|
.btn-important { |
|
background: linear-gradient(to bottom, #0084CC, #0045CC); |
|
color: #888888; |
|
border: 1px solid #000000; |
|
} |
|
.btn-important:hover { |
|
background: linear-gradient(to bottom, #0066CC, #0045CC); |
|
} |
|
.btn-important:active { |
|
background: #0044CB; |
|
box-shadow: none; |
|
} |
|
|
|
.btn-attention { |
|
background: linear-gradient(to bottom, #E95B57, #BD362F); |
|
color: #888888; |
|
border: 1px solid #000000; |
|
} |
|
.btn-attention:hover { |
|
background: linear-gradient(to bottom, #D14641, #BD362F); |
|
} |
|
.btn-attention:active { |
|
background: #BD362F; |
|
box-shadow: none; |
|
} |
|
|
|
/* NAVIGATION */ |
|
.nav-list .nav-header, |
|
.nav-list .item { |
|
display: block; |
|
height: 35px; |
|
line-height: 35px; |
|
} |
|
.nav-list .item:hover { |
|
background: #1a1a1a; |
|
} |
|
.nav-list .item:hover a { |
|
color: #26303F; |
|
} |
|
.nav-list .item.active { |
|
background: #26303F; |
|
color: #1a1a1a; |
|
} |
|
.nav-list .item.active a { |
|
color: #888; |
|
} |
|
.nav-list .disable { |
|
color: #aaa; |
|
background: #fafafa; |
|
text-align: center; |
|
} |
|
.nav-list .item > * { |
|
display: block; |
|
padding: 0 10px; |
|
overflow: hidden; |
|
white-space: nowrap; |
|
text-overflow: ellipsis; |
|
} |
|
.nav-list a:hover { |
|
text-decoration: none; |
|
} |
|
.nav-list .item.error a { |
|
color: #BD362F; |
|
} |
|
.nav-list .item.active.error a { |
|
color: #fff; |
|
background: #BD362F; |
|
} |
|
.nav-list .item.empty a { |
|
color: #f39c12; |
|
} |
|
.nav-list .item.active.empty a { |
|
color: #fff; |
|
background: #f39c12; |
|
} |
|
|
|
.nav-list .nav-header { |
|
padding: 0 10px; |
|
background: #1a1a1a; |
|
border-bottom: 1px solid #2f2f2f; |
|
font-weight: bold; |
|
} |
|
.nav-list .separator { |
|
display: block; |
|
height: 0; |
|
margin: 5px 0; |
|
border-bottom: 1px solid #2f2f2f; |
|
} |
|
|
|
.nav-list .nav-form { |
|
padding: 3px; |
|
text-align: center; |
|
} |
|
|
|
.nav-head { |
|
display: block; |
|
margin: 0; |
|
background: linear-gradient(to bottom, #fff, #f0f0f0); |
|
border-bottom: 1px solid #2f2f2f; |
|
text-align: right; |
|
} |
|
.nav-head .item { |
|
display: inline-block; |
|
padding: 5px 10px; |
|
} |
|
|
|
/* HORIZONTAL-LIST */ |
|
.horizontal-list { |
|
display: table; |
|
table-layout: fixed; |
|
margin: 0; |
|
padding: 0; |
|
width: 100%; |
|
} |
|
.horizontal-list .item { |
|
display: table-cell; |
|
vertical-align: middle; |
|
} |
|
|
|
/* DROPDOWN */ |
|
.dropdown { |
|
position: relative; |
|
display: inline-block; |
|
} |
|
.dropdown-target { |
|
display: none; |
|
} |
|
|
|
.dropdown-menu { |
|
display: none; |
|
min-width: 200px; |
|
margin: 5px 0 0; |
|
padding: 5px 0; |
|
position: absolute; |
|
right: 0px; |
|
background: #1a1a1a; |
|
border: 1px solid #888; |
|
border-radius: 5px; |
|
text-align: left; |
|
} |
|
.dropdown-menu:after { |
|
content: ""; |
|
position: absolute; |
|
top: -6px; |
|
right: 13px; |
|
width: 10px; |
|
height: 10px; |
|
background: #1a1a1a; |
|
border-top: 1px solid #888; |
|
border-left: 1px solid #888; |
|
z-index: -10; |
|
transform: rotate(45deg); |
|
} |
|
.dropdown-header { |
|
display: block; |
|
padding: 0 5px; |
|
color: #888; |
|
font-weight: bold; |
|
font-size: 14px; |
|
line-height: 30px; |
|
} |
|
.dropdown-menu .item { |
|
display: block; |
|
height: 30px; |
|
font-size: 90%; |
|
line-height: 30px; |
|
} |
|
.dropdown-menu > .item > a { |
|
display: block; |
|
padding: 0 25px; |
|
line-height: 30px; |
|
} |
|
.dropdown-menu > .item.share > a { |
|
display: list-item; |
|
list-style-position:inside; |
|
list-style-type:decimal; |
|
} |
|
.dropdown-menu > .item:hover { |
|
background: #26303F; |
|
color: #888; |
|
} |
|
.dropdown-menu > .item[aria-checked="true"] > a:before { |
|
content: '✓ '; |
|
font-weight: bold; |
|
margin: 0 0 0 -1.2em; |
|
padding: 0 0.2em 0 0; |
|
} |
|
.dropdown-menu > .item:hover > a { |
|
color: #888; |
|
text-decoration: none; |
|
} |
|
.dropdown-menu .input { |
|
display: block; |
|
height: 40px; |
|
font-size: 90%; |
|
line-height: 30px; |
|
} |
|
.dropdown-menu .input select, |
|
.dropdown-menu .input input { |
|
display: block; |
|
height: 20px; |
|
width: 95%; |
|
margin: auto; |
|
padding: 2px 5px; |
|
border-radius: 3px; |
|
} |
|
.dropdown-menu .input select { |
|
width: 70%; |
|
height: auto; |
|
} |
|
.dropdown-menu .separator { |
|
display: block; |
|
height: 0; |
|
margin: 5px 0; |
|
border-bottom: 1px solid #888; |
|
} |
|
.dropdown-target:target ~ .dropdown-menu { |
|
display: block; |
|
z-index: 10; |
|
} |
|
.dropdown-close { |
|
display: inline; |
|
} |
|
.dropdown-close a { |
|
font-size: 0; |
|
position: fixed; |
|
top: 0; bottom: 0; |
|
left: 0; right: 0; |
|
display: block; |
|
z-index: -10; |
|
} |
|
|
|
/* ALERTS */ |
|
.alert { |
|
display: block; |
|
width: 90%; |
|
margin: 15px auto; |
|
padding: 10px 15px; |
|
background: #1a1a1a; |
|
border: 1px solid #ccc; |
|
border-right: 1px solid #aaa; |
|
border-bottom: 1px solid #aaa; |
|
border-radius: 5px; |
|
color: #aaa; |
|
} |
|
.alert-head { |
|
margin: 0; |
|
font-weight: bold; |
|
font-size: 110%; |
|
} |
|
.alert > a { |
|
color: inherit; |
|
text-decoration: underline; |
|
} |
|
.alert-warn { |
|
border: 1px solid #c95; |
|
color: #c95; |
|
} |
|
.alert-success { |
|
border: 1px solid #484; |
|
color: #484; |
|
} |
|
.alert-error { |
|
border: 1px solid #844; |
|
color: #844; |
|
} |
|
|
|
/* ICÔNES */ |
|
.icon { |
|
display: inline-block; |
|
width: 16px; |
|
height: 16px; |
|
vertical-align: middle; |
|
line-height: 16px; |
|
} |
|
|
|
/* Prompt (centré) */ |
|
.prompt { |
|
text-align: center; |
|
} |
|
.prompt label { |
|
text-align: left; |
|
} |
|
.prompt form { |
|
margin: 1em auto 2.5em auto; |
|
width: 10em; |
|
} |
|
.prompt input { |
|
margin: .4em auto 1.1em auto; |
|
width: 100%; |
|
} |
|
.prompt p { |
|
margin: 20px 0; |
|
}
|
|
|