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.
484 lines
8.9 KiB
484 lines
8.9 KiB
* { |
|
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 { |
|
margin: 10px 0 10px 30px; |
|
line-height: 190%; |
|
} |
|
|
|
/* TITRES */ |
|
h1, h2, h3 { |
|
min-height: 40px; |
|
padding: 10px 0 0; |
|
line-height: 40px; |
|
} |
|
|
|
/* IMG */ |
|
img { |
|
max-width: 100%; |
|
vertical-align: middle; |
|
} |
|
a img { |
|
border: none; |
|
} |
|
|
|
/* FORMULAIRES */ |
|
form { |
|
width: 450px; |
|
max-width: 100%; |
|
margin: 20px auto; |
|
padding: 20px; |
|
background: #f0f0f0; |
|
border: 1px solid #ddd; |
|
border-radius: 3px; |
|
box-shadow: 0 1px 3px #aaa; |
|
} |
|
label { |
|
display: block; |
|
margin: 20px 0 0; |
|
padding: 0 20px 0 0; |
|
font-weight: bold; |
|
} |
|
input:focus, textarea:focus { |
|
color: #3366cc !important; |
|
border: 1px solid #3366cc !important; |
|
} |
|
input[type="text"], input[type="url"], input[type="email"], input[type="number"], textarea { |
|
display: block; |
|
height: 30px; |
|
width: 430px; |
|
max-width: 95%; |
|
margin: 5px 0 5px; |
|
padding: 5px 10px; |
|
background: #fff; |
|
border: 1px solid #ccc; |
|
border-radius: 5px; |
|
font-size: 90%; |
|
} |
|
textarea { |
|
min-height: 100px; |
|
font-size: 110%; |
|
line-height: 150%; |
|
font-family: Monospace; |
|
} |
|
input[type="submit"], button { |
|
display: block; |
|
height: 40px; |
|
width: 100%; |
|
margin: 5px 0 5px; |
|
padding: 5px 0; |
|
} |
|
select { |
|
width: 100%; |
|
padding: 5px; |
|
} |
|
.radio_group, .checkbox_group { |
|
line-height: 35px; |
|
} |
|
.radio_group label, .checkbox_group label { |
|
display: inline-block; |
|
margin: 0; |
|
padding: 0 0 0 5px; |
|
font-weight: normal; |
|
} |
|
.btn { |
|
display: inline-block; |
|
height: 30px; |
|
padding: 5px 10px; |
|
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 1px #ddd; |
|
line-height: 30px; |
|
vertical-align: middle; |
|
} |
|
.btn:hover { |
|
background: linear-gradient(#fafafa, #f0f0f0); |
|
text-decoration: none; |
|
} |
|
.btn:active { |
|
box-shadow: 0px 2px 4px #e0e0e0 inset, 0px 1px 2px #fafafa; |
|
} |
|
|
|
/* *** */ |
|
.refresh { |
|
display: inline-block; |
|
width: 30px; |
|
height: 30px; |
|
background: url("refresh.svg") center center no-repeat; |
|
} |
|
|
|
/* STRUCTURE */ |
|
#global { |
|
display: table; |
|
width: 100%; |
|
height: 100%; |
|
background: #fafafa; |
|
} |
|
.aside { |
|
display: table-cell; |
|
height: 100%; |
|
width: 250px; |
|
vertical-align: top; |
|
border-right: 1px solid #aaa; |
|
background: #fff; |
|
} |
|
.aside ul { |
|
margin: 0; |
|
list-style: none; |
|
} |
|
.aside li { |
|
width: 100%; |
|
height: 50px; |
|
overflow: hidden; |
|
line-height: 50px; |
|
} |
|
.aside li > a, .aside li > span { |
|
display: block; |
|
width: 230px; |
|
padding: 0 10px; |
|
} |
|
.aside li > a:hover, .aside li > span:hover { |
|
text-decoration: none; |
|
background: #fafafa; |
|
} |
|
.aside li.disable > span { |
|
background: #fff; |
|
} |
|
.aside li > a > span { |
|
float: right; |
|
padding: 0 5px; |
|
font-size: 80%; |
|
} |
|
.aside li.active > a { |
|
background: #0062BE; |
|
color: #fff; |
|
} |
|
.aside li > h2 { |
|
height: 50px; |
|
padding: 0; |
|
text-align: center; |
|
background: #eee; |
|
line-height: 50px; |
|
} |
|
|
|
.aside form { |
|
display: table; |
|
width: 250px; |
|
margin: 0; |
|
padding: 0; |
|
background: #f0f0f0; |
|
border: none; |
|
border-bottom: 1px solid #aaa; |
|
border-radius: 0; |
|
box-shadow: none; |
|
} |
|
.aside form input { |
|
display: inline-block; |
|
height: 48px; |
|
line-height: 48px; |
|
} |
|
.aside form input[type="url"] { |
|
width: 200px; |
|
margin: 0; |
|
padding: 0; |
|
border: none !important; |
|
border-radius: 0; |
|
} |
|
.aside form input[type="submit"] { |
|
width: 50px; |
|
margin: 0; |
|
padding: 0; |
|
border: none; |
|
border-radius: 0; |
|
} |
|
#categories { |
|
height: 69%; |
|
overflow: auto; |
|
border-top: 1px solid #aaa; |
|
} |
|
#main { |
|
display: table-cell; |
|
height: 100%; |
|
line-height: 180%; |
|
background: #fafafa; |
|
vertical-align: top; |
|
} |
|
#top { |
|
width: 100%; |
|
background: #fafafa; |
|
border-bottom: 1px solid #aaa; |
|
text-align: center; |
|
padding: 5px 0; |
|
} |
|
#top .btn { |
|
margin: 0 10px; |
|
} |
|
#main .table { |
|
display: table; |
|
width: 100%; |
|
height: 100%; |
|
table-layout: fixed; |
|
} |
|
#main .nothing { |
|
display: table-cell; |
|
width: 100%; |
|
height: 100%; |
|
vertical-align: middle; |
|
text-align: center; |
|
} |
|
|
|
.post { |
|
} |
|
.post.flux { |
|
font-family: Palatino, "Times New Roman", serif; |
|
border-left: 10px solid #aaa; |
|
background: #fafafa; |
|
} |
|
.post.flux:hover { |
|
background: #fff; |
|
} |
|
.post.flux .content { |
|
padding: 20px 100px; |
|
line-height: 170%; |
|
} |
|
.post.flux .content h1, .post.flux .content h2, .post.flux .content h3 { |
|
margin: 20px 0 5px; |
|
} |
|
.post.flux .content p { |
|
margin: 10px 0; |
|
} |
|
.post.flux .content img { |
|
margin: 0; |
|
border-radius: 5px; |
|
} |
|
.post.flux .content pre { |
|
width: 90%; |
|
margin: 10px auto; |
|
padding: 10px; |
|
overflow: auto; |
|
background: #666; |
|
border: 1px solid #000; |
|
color: #fafafa; |
|
border-radius: 5px; |
|
} |
|
.post.flux .content q, .post.flux .content blockquote { |
|
display: block; |
|
margin: 0; |
|
padding: 10px 20px; |
|
font-style: italic; |
|
border-left: 4px solid #ccc; |
|
color: #666; |
|
} |
|
.post.flux.active { |
|
border-left: 10px solid #0062BE; |
|
background: #fff; |
|
} |
|
.post.flux.not_read { |
|
border-left: 10px solid #FF5300; |
|
background: #FFF3ED; |
|
} |
|
.post.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: 50px; |
|
} |
|
.flux_header .item.manage .read { |
|
display: inline-block; |
|
width: 25px; |
|
height: 25px; |
|
background: url("read.svg") center center no-repeat; |
|
vertical-align: middle; |
|
} |
|
.flux_header .item.manage .read:hover { |
|
text-decoration: none; |
|
} |
|
.post.flux.not_read .flux_header .item.manage .read { |
|
background: url("unread.svg") center center no-repeat; |
|
} |
|
.flux_header .item.manage .bookmark { |
|
display: inline-block; |
|
width: 25px; |
|
height: 25px; |
|
background: url("non-starred.svg") center center no-repeat; |
|
vertical-align: middle; |
|
} |
|
.flux_header .item.manage .bookmark:hover { |
|
text-decoration: none; |
|
} |
|
.post.flux.favorite .flux_header .item.manage .bookmark { |
|
background: url("starred.svg") center center no-repeat; |
|
} |
|
.flux_header .item.website { |
|
width: 200px; |
|
overflow: hidden; |
|
white-space: nowrap; |
|
text-overflow: ellipsis; |
|
} |
|
.flux_header .item.title { |
|
overflow: hidden; |
|
white-space: nowrap; |
|
text-overflow: ellipsis; |
|
} |
|
.flux_header .item.title h1 { |
|
font-size: 12px; |
|
padding: 0; |
|
font-weight: normal; |
|
} |
|
.post.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; |
|
} |
|
.flux_header .item.link { |
|
width: 35px; |
|
text-align: center; |
|
} |
|
.flux_header .item.link a { |
|
display: inline-block; |
|
width: 25px; |
|
height: 25px; |
|
background: url("website.svg") center center no-repeat; |
|
vertical-align: middle; |
|
} |
|
.flux_header .item.link a:hover { |
|
text-decoration: none; |
|
} |
|
|
|
/*** PAGINATION ***/ |
|
.pagination { |
|
display: block; |
|
margin: 0; |
|
background: #fafafa; |
|
text-align: center; |
|
color: #333; |
|
font-size: 80%; |
|
line-height: 200%; |
|
border-top: 1px solid #aaa; |
|
} |
|
.pagination .item { |
|
display: inline-block; |
|
padding: 5px 10px; |
|
} |
|
.pagination .item a { |
|
color: #333; |
|
font-style: italic; |
|
} |
|
.pagination .item.pager-current { |
|
font-weight: bold; |
|
} |
|
|
|
/*** NOTIFICATION ***/ |
|
.notification { |
|
position: fixed; |
|
bottom: 0; |
|
left: 25%; |
|
width: 50%; |
|
height: 50px; |
|
padding: 0 50px; |
|
line-height: 50px; |
|
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: 25px; |
|
height: 25px; |
|
float: right; |
|
margin: -10px -60px 0 0; |
|
background: #fff; |
|
border-radius: 50px; |
|
border: 1px solid #aaa; |
|
line-height: 25px; |
|
color: #666; |
|
} |
|
.notification a.close:hover { |
|
text-decoration: none; |
|
} |
|
|
|
@media(max-width: 840px) { |
|
#global { |
|
table-layout: fixed; |
|
} |
|
#main_aside { |
|
display: none; |
|
} |
|
#main { |
|
width: 100%; |
|
padding: 0; |
|
} |
|
#top { |
|
width: 100%; |
|
position: static; |
|
} |
|
#stream { |
|
padding: 0; |
|
} |
|
.flux_header .item.website span, |
|
.flux_header .item.date { |
|
display: none; |
|
} |
|
.flux_header .item.website { |
|
width: 20px; |
|
} |
|
.post.flux .content { |
|
padding: 10px; |
|
} |
|
a#read_mode { |
|
display: none; |
|
} |
|
}
|
|
|