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.
848 lines
16 KiB
848 lines
16 KiB
/* FONTS */ |
|
@font-face { |
|
font-family: 'OpenSans'; |
|
src: local('fonts/openSans.woff') format('woff'); |
|
} |
|
|
|
|
|
* { |
|
margin: 0; |
|
padding: 0; |
|
} |
|
html, body { |
|
height: 100%; |
|
font-size: 95%; |
|
font-family: "Cantarell", "Helvetica", "Arial", "sans-serif"; |
|
} |
|
|
|
/* LIENS */ |
|
a { |
|
color: #0062BE; |
|
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 */ |
|
img { |
|
max-width: 100%; |
|
vertical-align: middle; |
|
} |
|
a img { |
|
border: none; |
|
} |
|
|
|
/* FORMULAIRES */ |
|
legend { |
|
display: block; |
|
width: 100%; |
|
margin: 20px 0 5px; |
|
padding: 5px 0; |
|
border-bottom: 1px solid #ddd; |
|
font-size: 150%; |
|
clear: both; |
|
} |
|
label { |
|
display: block; |
|
min-height: 25px; |
|
padding: 5px 0; |
|
font-size: 14px; |
|
line-height: 25px; |
|
} |
|
input, select, textarea { |
|
display: inline-block; |
|
min-height: 25px; |
|
padding: 5px; |
|
background: #fdfdfd; |
|
border: 1px solid #bbb; |
|
border-radius: 3px; |
|
color: #666; |
|
line-height: 25px; |
|
vertical-align: middle; |
|
box-shadow: 0 2px 2px #eee inset; |
|
} |
|
input[type="radio"], |
|
input[type="checkbox"] { |
|
width: 15px; |
|
min-height: 15px; |
|
} |
|
input:focus, select:focus, textarea:focus { |
|
color: #0062BE; |
|
border-color: #33BBFF; |
|
box-shadow: 0 2px 2px #DDDDFF inset; |
|
} |
|
|
|
.form-group { |
|
margin: 0; |
|
clear: both; |
|
} |
|
.form-group.form-actions { |
|
min-width: 250px; |
|
padding: 5px 0; |
|
background: #f4f4f4; |
|
border-top: 1px solid #ddd; |
|
} |
|
.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 { |
|
border-radius: 0; |
|
font-size: 14px; |
|
} |
|
.stick .btn { |
|
border-radius: 0; |
|
font-size: 14px; |
|
} |
|
.stick .btn:first-child, |
|
.stick input:first-child { |
|
border-radius: 3px 0 0 3px; |
|
} |
|
.stick .btn:last-child, |
|
.stick input:last-child { |
|
border-radius: 0 3px 3px 0; |
|
} |
|
.stick .btn + .btn, |
|
.stick .btn + input, |
|
.stick input + .btn, |
|
.stick input + input { |
|
border-left: none; |
|
} |
|
.stick input + .btn { |
|
border-top: 1px solid #bbb; |
|
} |
|
.stick .btn + .dropdown > .btn { |
|
border-left: none; |
|
border-radius: 0 3px 3px 0; |
|
font-size: 0px; |
|
} |
|
.stick .btn + .dropdown a { |
|
font-size: 12px; |
|
} |
|
|
|
.btn { |
|
display: inline-block; |
|
min-height: 37px; |
|
min-width: 15px; |
|
padding: 5px 10px; |
|
background: #fff; |
|
background: linear-gradient(#fff, #eee); |
|
border-radius: 3px; |
|
border: 1px solid #ddd; |
|
border-bottom: 1px solid #aaa; |
|
border-right: 1px solid #aaa; |
|
color: #666; |
|
text-shadow: 0px -1px 0 #ddd; |
|
line-height: 20px; |
|
vertical-align: middle; |
|
cursor: pointer; |
|
} |
|
a.btn { |
|
min-height: 25px; |
|
line-height: 25px; |
|
} |
|
.btn:hover { |
|
background: #f0f0f0; |
|
background: linear-gradient(#f8f8f8, #f0f0f0); |
|
text-decoration: none; |
|
} |
|
.btn.active, |
|
.btn:active { |
|
box-shadow: 0px 2px 4px #e0e0e0 inset, 0px 1px 2px #fafafa; |
|
background: #eee; |
|
} |
|
|
|
.btn.btn-important { |
|
background: #0084CC; |
|
background: linear-gradient(#0084CC, #0045CC); |
|
color: #fff; |
|
border: 1px solid #0062B7; |
|
text-shadow: 0px -1px 0 #aaa; |
|
} |
|
.btn.btn-important:hover { |
|
background: linear-gradient(#0066CC, #0045CC); |
|
} |
|
.btn.btn-important:active { |
|
background: #0044CB; |
|
box-shadow: none; |
|
} |
|
|
|
.btn.btn-attention { |
|
background: #E95B57; |
|
background: linear-gradient(#E95B57, #BD362F); |
|
color: #fff; |
|
border: 1px solid #C44742; |
|
text-shadow: 0px -1px 0px #666; |
|
} |
|
.btn.btn-attention:hover { |
|
background: linear-gradient(#D14641, #BD362F); |
|
} |
|
.btn.btn-attention:active { |
|
background: #BD362F; |
|
box-shadow: none; |
|
} |
|
|
|
/* NAVIGATION */ |
|
.nav.nav-list .nav-header, |
|
.nav.nav-list .item { |
|
display: block; |
|
height: 35px; |
|
line-height: 35px; |
|
} |
|
.nav.nav-list .item:hover { |
|
background: #fafafa; |
|
} |
|
.nav.nav-list .item:hover a { |
|
color: #003388; |
|
} |
|
.nav.nav-list .item.active { |
|
background: #0062BE; |
|
color: #fff; |
|
} |
|
.nav.nav-list .item.active a { |
|
color: #fff; |
|
} |
|
.nav.nav-list .disable { |
|
color: #aaa; |
|
background: #fafafa; |
|
text-align: center; |
|
} |
|
.nav.nav-list .item > * { |
|
display: block; |
|
padding: 0 10px; |
|
overflow: hidden; |
|
white-space: nowrap; |
|
text-overflow: ellipsis; |
|
} |
|
.nav.nav-list a:hover { |
|
text-decoration: none; |
|
} |
|
|
|
.nav.nav-list .nav-header { |
|
padding: 0 10px; |
|
color: #888; |
|
background: #f4f4f4; |
|
border-bottom: 1px solid #ddd; |
|
font-weight: bold; |
|
text-shadow: 0 0 1px #ddd; |
|
} |
|
.nav.nav-list .separator { |
|
display: block; |
|
height: 0; |
|
margin: 5px 0; |
|
border-bottom: 1px solid #ddd; |
|
} |
|
|
|
.nav.nav-list .nav-form { |
|
padding: 3px; |
|
text-align: center; |
|
} |
|
|
|
.nav-head { |
|
display: block; |
|
margin: 0; |
|
background: #fff; |
|
background: linear-gradient(#fff, #f0f0f0); |
|
border-bottom: 1px solid #ddd; |
|
text-align: right; |
|
} |
|
.nav-head .item { |
|
display: inline-block; |
|
padding: 5px 10px; |
|
} |
|
|
|
/* DROPDOWN */ |
|
.dropdown { |
|
position: relative; |
|
display: inline-block; |
|
} |
|
.dropdown .dropdown-target { |
|
display: none; |
|
} |
|
|
|
.dropdown .dropdown-menu { |
|
display: none; |
|
min-width: 200px; |
|
margin: 5px 0 0; |
|
padding: 5px 0; |
|
position: absolute; |
|
right: 0px; |
|
background: #fff; |
|
border: 1px solid #ddd; |
|
border-radius: 5px; |
|
text-align: left; |
|
box-shadow: 3px 3px 3px #ddd; |
|
} |
|
.dropdown .dropdown-menu .dropdown-header { |
|
display: block; |
|
padding: 0 5px; |
|
color: #888; |
|
font-weight: bold; |
|
} |
|
.dropdown .dropdown-menu .item { |
|
display: block; |
|
height: 30px; |
|
padding: 0 25px; |
|
font-size: 90%; |
|
line-height: 30px; |
|
} |
|
.dropdown .dropdown-menu .item a { |
|
display: block; |
|
} |
|
.dropdown .dropdown-menu .item:hover { |
|
background: #0062BE; |
|
color: #fff; |
|
} |
|
.dropdown .dropdown-menu .item:hover a { |
|
color: #fff; |
|
text-decoration: none; |
|
} |
|
.dropdown .dropdown-menu .separator { |
|
display: block; |
|
height: 0; |
|
margin: 5px 0; |
|
border-bottom: 1px solid #ddd; |
|
} |
|
.dropdown .dropdown-target:target ~ .dropdown-menu { |
|
display: block; |
|
z-index: 10; |
|
} |
|
.dropdown .dropdown-close { |
|
display: inline-block; |
|
position: absolute; |
|
top: -16px; right: -16px; |
|
width: 16px; |
|
height: 16px; |
|
padding: 5px; |
|
background: #fff; |
|
border-radius: 50px; |
|
border: 1px solid #ddd; |
|
line-height: 16px; |
|
text-align: center; |
|
} |
|
.dropdown .dropdown-close:hover { |
|
background: #f4f4f4; |
|
} |
|
|
|
/* ALERTS */ |
|
.alert { |
|
display: block; |
|
width: 90%; |
|
margin: 15px auto; |
|
padding: 10px 15px; |
|
background: #f4f4f4; |
|
border: 1px solid #ccc; |
|
border-right: 1px solid #aaa; |
|
border-bottom: 1px solid #aaa; |
|
border-radius: 5px; |
|
color: #aaa; |
|
text-shadow: 0 0 1px #eee; |
|
box-shadow: 1px 1px 3px #aaa inset; |
|
} |
|
.alert .alert-head { |
|
margin: 0; |
|
font-weight: bold; |
|
font-size: 110%; |
|
} |
|
|
|
/* ICONES */ |
|
.icon { |
|
display: inline-block; |
|
width: 16px; |
|
height: 16px; |
|
vertical-align: middle; |
|
line-height: 16px; |
|
background: center center no-repeat; |
|
} |
|
.icon.i_refresh { |
|
background-image: url("icons/refresh.svg"); |
|
} |
|
.icon.i_bookmark { |
|
background-image: url("icons/starred.svg"); |
|
} |
|
.icon.i_not_bookmark { |
|
background-image: url("icons/unstarred.svg"); |
|
} |
|
.icon.i_read { |
|
background-image: url("icons/read.svg"); |
|
} |
|
.icon.i_unread { |
|
background-image: url("icons/unread.svg"); |
|
} |
|
.icon.i_all { |
|
background-image: url("icons/all.svg"); |
|
} |
|
.icon.i_close { |
|
background-image: url("icons/close.svg"); |
|
} |
|
.icon.i_search { |
|
background-image: url("icons/search.svg"); |
|
} |
|
.icon.i_configure { |
|
background-image: url("icons/configure.svg"); |
|
} |
|
.icon.i_login { |
|
background-image: url("icons/login.svg"); |
|
} |
|
.icon.i_logout { |
|
background-image: url("icons/logout.svg"); |
|
} |
|
.icon.i_add { |
|
background-image: url("icons/add.svg"); |
|
} |
|
.icon.i_link { |
|
background-image: url("icons/link.svg"); |
|
} |
|
.icon.i_down { |
|
background-image: url("icons/down.svg"); |
|
} |
|
.icon.i_up { |
|
background-image: url("icons/up.svg"); |
|
} |
|
.icon.i_help { |
|
background-image: url("icons/help.svg"); |
|
} |
|
.icon.i_note { |
|
background-image: url("icons/note.svg"); |
|
} |
|
.icon.i_note_empty { |
|
background-image: url("icons/note_empty.svg"); |
|
} |
|
|
|
/* STRUCTURE */ |
|
.header { |
|
display: table; |
|
width: 100%; |
|
background: #f4f4f4; |
|
table-layout: fixed; |
|
} |
|
.header > .item { |
|
display: table-cell; |
|
padding: 10px 0; |
|
border-bottom: 1px solid #aaa; |
|
vertical-align: middle; |
|
text-align: center; |
|
} |
|
.header > .item.title { |
|
width: 250px; |
|
} |
|
.header > .item.title h1 { |
|
margin: 0; |
|
text-shadow: 1px -1px 0 #ccc; |
|
} |
|
.header > .item.title a:hover { |
|
text-decoration: none; |
|
} |
|
.header > .item.search input { |
|
width: 200px; |
|
transition: all 200ms linear; |
|
} |
|
.header .item.search input:focus { |
|
width: 300px; |
|
} |
|
.header > .item.configure { |
|
width: 100px; |
|
} |
|
|
|
#global { |
|
display: table; |
|
width: 100%; |
|
height: 100%; |
|
background: #fafafa; |
|
table-layout: fixed; |
|
} |
|
.aside { |
|
display: table-cell; |
|
height: 100%; |
|
width: 250px; |
|
vertical-align: top; |
|
border-right: 1px solid #aaa; |
|
background: #fff; |
|
} |
|
.aside .nav-form input { |
|
width: 180px; |
|
} |
|
.aside.aside_flux { |
|
padding: 10px 0; |
|
} |
|
|
|
.nav_menu { |
|
width: 100%; |
|
background: #fafafa; |
|
border-bottom: 1px solid #aaa; |
|
text-align: center; |
|
padding: 5px 0; |
|
} |
|
|
|
.categories { |
|
margin: 0; |
|
padding: 0; |
|
text-align: center; |
|
list-style: none; |
|
} |
|
.categories .all, |
|
.categories .favorites, |
|
.categories .category { |
|
display: block; |
|
padding: 5px 0; |
|
width: 220px; |
|
margin: 5px auto; |
|
text-align: left; |
|
overflow: hidden; |
|
white-space: nowrap; |
|
text-overflow: ellipsis; |
|
} |
|
.categories .all .btn, |
|
.categories .favorites .btn, |
|
.categories .category .btn:first-child { |
|
width: 195px; |
|
position: relative; |
|
} |
|
.categories .feeds { |
|
width: 220px; |
|
margin: 0 auto; |
|
list-style: none; |
|
} |
|
.categories .feeds .item.active:after { |
|
content: "⇢"; |
|
line-height: 35px; |
|
float: right; |
|
} |
|
.categories .feeds .item .feed { |
|
display: inline-block; |
|
margin: 0; |
|
width: 165px; |
|
line-height: 35px; |
|
font-size: 90%; |
|
vertical-align: middle; |
|
text-align: left; |
|
overflow: hidden; |
|
white-space: nowrap; |
|
text-overflow: ellipsis; |
|
} |
|
.categories .feeds .dropdown .dropdown-menu { |
|
left: 0; |
|
} |
|
.categories .feeds .item .dropdown-toggle i { |
|
background-image: none; |
|
} |
|
.categories .feeds .item .dropdown-target:target ~ .dropdown-toggle i, |
|
.categories .feeds .item:hover .dropdown-toggle i { |
|
background-image: url("icons/configure.svg"); |
|
} |
|
.categories .notRead { |
|
position: absolute; |
|
top: 3px; right: 3px; |
|
padding: 1px 5px; |
|
background: #ccc; |
|
color: #fff; |
|
font-size: 90%; |
|
border: 1px solid #bbb; |
|
border-radius: 5px; |
|
box-shadow: 1px 3px 3px #aaa inset; |
|
text-shadow: 0 0 1px #aaa; |
|
} |
|
|
|
.post { |
|
padding: 10px 50px; |
|
} |
|
.post form { |
|
margin: 10px 0; |
|
} |
|
|
|
.day { |
|
height: 50px; |
|
padding: 0 10px; |
|
font-size: 130%; |
|
font-weight: bold; |
|
line-height: 50px; |
|
background: #fff; |
|
border-top: 1px solid #aaa; |
|
border-bottom: 1px solid #aaa; |
|
} |
|
.day:first-child { |
|
border-top: none; |
|
} |
|
|
|
.flux { |
|
border-left: 10px solid #aaa; |
|
background: #fafafa; |
|
} |
|
.flux:hover { |
|
background: #fff; |
|
} |
|
.flux.active { |
|
border-left: 10px solid #0062BE; |
|
background: #fff; |
|
} |
|
.flux.not_read { |
|
border-left: 10px solid #FF5300; |
|
background: #FFF3ED; |
|
} |
|
.flux.favorite { |
|
border-left: 10px solid #FFC300; |
|
background: #FFF6DA; |
|
} |
|
|
|
.flux_header { |
|
display: table; |
|
table-layout: fixed; |
|
margin: 0; |
|
padding: 0; |
|
width: 100%; |
|
height: 25px; |
|
font-size: 12px; |
|
line-height: 25px; |
|
border-top: 1px solid #ddd; |
|
} |
|
.flux_header .item { |
|
display: table-cell; |
|
vertical-align: middle; |
|
} |
|
.flux_header .item.manage { |
|
width: 90px; |
|
white-space: nowrap; |
|
font-size: 0px; |
|
vertical-align: middle; |
|
text-align: center; |
|
} |
|
.flux_header .item.manage .read { |
|
display: inline-block; |
|
width: 30px; |
|
height: 35px; |
|
background: url("icons/read.svg") center center no-repeat; |
|
vertical-align: middle; |
|
} |
|
.flux_header .item.manage .read:hover { |
|
text-decoration: none; |
|
} |
|
.flux.not_read .flux_header .item.manage .read { |
|
background: url("icons/unread.svg") center center no-repeat; |
|
} |
|
.flux_header .item.manage .bookmark { |
|
display: inline-block; |
|
width: 30px; |
|
height: 35px; |
|
background: url("icons/non-starred.svg") center center no-repeat; |
|
vertical-align: middle; |
|
} |
|
.flux_header .item.manage .bookmark:hover { |
|
text-decoration: none; |
|
} |
|
.flux.favorite .flux_header .item.manage .bookmark { |
|
background: url("icons/starred.svg") center center no-repeat; |
|
} |
|
.flux_header .item.manage .note { |
|
display: inline-block; |
|
width: 30px; |
|
height: 35px; |
|
vertical-align: middle; |
|
line-height: 35px; |
|
} |
|
.flux_header .item.website { |
|
width: 200px; |
|
padding: 0 5px; |
|
overflow: hidden; |
|
white-space: nowrap; |
|
text-overflow: ellipsis; |
|
} |
|
.flux_header .item.title { |
|
overflow: hidden; |
|
white-space: nowrap; |
|
text-overflow: ellipsis; |
|
cursor: pointer; |
|
} |
|
.flux_header .item.title h1 { |
|
font-size: 12px; |
|
margin: 0; |
|
font-weight: normal; |
|
} |
|
.flux.not_read .flux_header .item.title h1 { |
|
font-weight: bold; |
|
} |
|
.flux_header .item.date { |
|
width: 200px; |
|
overflow: hidden; |
|
white-space: nowrap; |
|
text-overflow: ellipsis; |
|
text-align: right; |
|
font-size: 10px; |
|
color: #666; |
|
cursor: pointer; |
|
} |
|
.flux_header .item.link { |
|
width: 35px; |
|
text-align: center; |
|
} |
|
.flux_header .item.link a { |
|
display: inline-block; |
|
width: 35px; |
|
height: 35px; |
|
background: url("icons/link.svg") center center no-repeat; |
|
vertical-align: middle; |
|
} |
|
.flux_header .item.link a:hover { |
|
text-decoration: none; |
|
} |
|
|
|
.content { |
|
max-width: 550px; |
|
margin: 0 auto; |
|
padding: 10px; |
|
line-height: 170%; |
|
font-family: 'OpenSans'; |
|
} |
|
.content h1, .content h2, .content h3 { |
|
margin: 20px 0 5px; |
|
} |
|
.content p { |
|
margin: 0 0 20px; |
|
} |
|
.content img.big { |
|
display: block; |
|
margin: 10px 0; |
|
width: 100%; |
|
box-shadow: 0 0 5px #000; |
|
border-radius: 5px; |
|
} |
|
.content pre { |
|
width: 90%; |
|
margin: 10px auto; |
|
padding: 10px; |
|
overflow: auto; |
|
background: #666; |
|
border: 1px solid #000; |
|
color: #fafafa; |
|
border-radius: 5px; |
|
} |
|
.content q, .content blockquote { |
|
display: block; |
|
margin: 5px 0; |
|
padding: 5px 20px; |
|
font-style: italic; |
|
border-left: 4px solid #ccc; |
|
color: #666; |
|
} |
|
.content blockquote p { |
|
margin: 0; |
|
} |
|
|
|
/*** PAGINATION ***/ |
|
.pagination { |
|
display: table; |
|
width: 100%; |
|
margin: 0; |
|
background: #fafafa; |
|
text-align: center; |
|
color: #333; |
|
font-size: 80%; |
|
line-height: 200%; |
|
table-layout: fixed; |
|
} |
|
.pagination .item { |
|
display: table-cell; |
|
padding: 5px 10px; |
|
border-top: 1px solid #aaa; |
|
} |
|
.pagination .item a { |
|
color: #333; |
|
font-style: italic; |
|
} |
|
.pagination .pager-previous, .pagination .pager-next { |
|
width: 200px; |
|
} |
|
.pagination .item.pager-current { |
|
font-weight: bold; |
|
} |
|
|
|
/*** NOTIFICATION ***/ |
|
.notification { |
|
position: fixed; |
|
bottom: 0; |
|
left: 5%; right: 5%; |
|
min-height: 30px; |
|
padding: 10px; |
|
line-height: 30px; |
|
text-align: center; |
|
border-radius: 5px 5px 0 0; |
|
box-shadow: 0 0 5px #666; |
|
background: #ddd; |
|
color: #666; |
|
font-weight: bold; |
|
} |
|
.notification.good { |
|
background: #f4f899; |
|
} |
|
.notification.bad { |
|
background: #f4a899; |
|
} |
|
.notification a.close { |
|
display: inline-block; |
|
width: 16px; |
|
height: 16px; |
|
float: right; |
|
margin: -20px -20px 0 0; |
|
padding: 5px; |
|
background: #fff; |
|
border-radius: 50px; |
|
border: 1px solid #aaa; |
|
line-height: 16px; |
|
} |
|
|
|
@media(max-width: 840px) { |
|
.header, |
|
.aside, |
|
.flux_header .item.website span, |
|
.flux_header .item.date { |
|
display: none; |
|
} |
|
.flux_header .item.website { |
|
width: 20px; |
|
} |
|
.pagination .pager-previous, .pagination .pager-next { |
|
width: 100px; |
|
} |
|
}
|
|
|