Fix issue #86 : possibilité de changer de thème
Désormais il est possible de créer des thèmes. Le thème peut être changé sur la page de configuration. Les thèmes sont détectés grâce à un fichier metadata.json détaillant le nom du thème, son auteur, une petite description et une version. Un nouveau thème "Flat design" a été ajouté et est pleinement fonctionnelpull/141/head
@ -0,0 +1,38 @@ |
||||
<?php |
||||
|
||||
class RSSThemes extends Model { |
||||
private static $themes_dir = '/themes'; |
||||
|
||||
private static $list = array(); |
||||
|
||||
public static function init() { |
||||
$basedir = PUBLIC_PATH . self::$themes_dir; |
||||
|
||||
$themes_list = array_diff( |
||||
scandir($basedir), |
||||
array('..', '.') |
||||
); |
||||
|
||||
foreach ($themes_list as $theme_dir) { |
||||
$json_filename = $basedir . '/' . $theme_dir . '/metadata.json'; |
||||
if(file_exists($json_filename)) { |
||||
$content = file_get_contents($json_filename); |
||||
$res = json_decode($content, true); |
||||
|
||||
if($res && |
||||
isset($res['name']) && |
||||
isset($res['author']) && |
||||
isset($res['description']) && |
||||
isset($res['version'])) { |
||||
$theme = $res; |
||||
$theme['path'] = $theme_dir; |
||||
self::$list[] = $theme; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
|
||||
public static function get() { |
||||
return self::$list; |
||||
} |
||||
} |
@ -1 +1,2 @@ |
||||
* |
||||
favicons |
||||
Configuration.array.php |
||||
|
After Width: | Height: | Size: 56 B |
@ -1,3 +1,6 @@ |
||||
@import url('global.css'); |
||||
@import url('fallback.css'); |
||||
|
||||
/* STRUCTURE */ |
||||
.header { |
||||
display: table; |
Before Width: | Height: | Size: 246 B After Width: | Height: | Size: 246 B |
Before Width: | Height: | Size: 3.0 KiB After Width: | Height: | Size: 3.0 KiB |
Before Width: | Height: | Size: 223 B After Width: | Height: | Size: 223 B |
Before Width: | Height: | Size: 3.5 KiB After Width: | Height: | Size: 3.5 KiB |
Before Width: | Height: | Size: 294 B After Width: | Height: | Size: 294 B |
Before Width: | Height: | Size: 3.3 KiB After Width: | Height: | Size: 3.3 KiB |
Before Width: | Height: | Size: 405 B After Width: | Height: | Size: 405 B |
Before Width: | Height: | Size: 2.5 KiB After Width: | Height: | Size: 2.5 KiB |
Before Width: | Height: | Size: 526 B After Width: | Height: | Size: 526 B |
Before Width: | Height: | Size: 5.0 KiB After Width: | Height: | Size: 5.0 KiB |
Before Width: | Height: | Size: 460 B After Width: | Height: | Size: 460 B |
Before Width: | Height: | Size: 4.1 KiB After Width: | Height: | Size: 4.1 KiB |
Before Width: | Height: | Size: 687 B After Width: | Height: | Size: 687 B |
Before Width: | Height: | Size: 5.3 KiB After Width: | Height: | Size: 5.3 KiB |
Before Width: | Height: | Size: 719 B After Width: | Height: | Size: 719 B |
Before Width: | Height: | Size: 8.0 KiB After Width: | Height: | Size: 8.0 KiB |
Before Width: | Height: | Size: 333 B After Width: | Height: | Size: 333 B |
Before Width: | Height: | Size: 4.2 KiB After Width: | Height: | Size: 4.2 KiB |
Before Width: | Height: | Size: 339 B After Width: | Height: | Size: 339 B |
Before Width: | Height: | Size: 4.1 KiB After Width: | Height: | Size: 4.1 KiB |
Before Width: | Height: | Size: 373 B After Width: | Height: | Size: 373 B |
Before Width: | Height: | Size: 4.0 KiB After Width: | Height: | Size: 4.0 KiB |
Before Width: | Height: | Size: 600 B After Width: | Height: | Size: 600 B |
Before Width: | Height: | Size: 8.2 KiB After Width: | Height: | Size: 8.2 KiB |
Before Width: | Height: | Size: 427 B After Width: | Height: | Size: 427 B |
Before Width: | Height: | Size: 3.3 KiB After Width: | Height: | Size: 3.3 KiB |
Before Width: | Height: | Size: 517 B After Width: | Height: | Size: 517 B |
Before Width: | Height: | Size: 3.9 KiB After Width: | Height: | Size: 3.9 KiB |
Before Width: | Height: | Size: 395 B After Width: | Height: | Size: 395 B |
Before Width: | Height: | Size: 4.0 KiB After Width: | Height: | Size: 4.0 KiB |
Before Width: | Height: | Size: 656 B After Width: | Height: | Size: 656 B |
Before Width: | Height: | Size: 4.7 KiB After Width: | Height: | Size: 4.7 KiB |
Before Width: | Height: | Size: 577 B After Width: | Height: | Size: 577 B |
Before Width: | Height: | Size: 4.6 KiB After Width: | Height: | Size: 4.6 KiB |
Before Width: | Height: | Size: 483 B After Width: | Height: | Size: 483 B |
Before Width: | Height: | Size: 4.0 KiB After Width: | Height: | Size: 4.0 KiB |
Before Width: | Height: | Size: 571 B After Width: | Height: | Size: 571 B |
Before Width: | Height: | Size: 4.7 KiB After Width: | Height: | Size: 4.7 KiB |
Before Width: | Height: | Size: 541 B After Width: | Height: | Size: 541 B |
Before Width: | Height: | Size: 5.2 KiB After Width: | Height: | Size: 5.2 KiB |
Before Width: | Height: | Size: 528 B After Width: | Height: | Size: 528 B |
Before Width: | Height: | Size: 4.1 KiB After Width: | Height: | Size: 4.1 KiB |
Before Width: | Height: | Size: 196 B After Width: | Height: | Size: 196 B |
Before Width: | Height: | Size: 3.7 KiB After Width: | Height: | Size: 3.7 KiB |
Before Width: | Height: | Size: 434 B After Width: | Height: | Size: 434 B |
Before Width: | Height: | Size: 4.2 KiB After Width: | Height: | Size: 4.2 KiB |
Before Width: | Height: | Size: 411 B After Width: | Height: | Size: 411 B |
Before Width: | Height: | Size: 4.1 KiB After Width: | Height: | Size: 4.1 KiB |
Before Width: | Height: | Size: 4.1 KiB After Width: | Height: | Size: 4.1 KiB |
@ -0,0 +1,6 @@ |
||||
{ |
||||
"name": "Default", |
||||
"author": "Marien Fressinaud", |
||||
"description": "Le thème par défaut pour FreshRSS", |
||||
"version": 0.1 |
||||
} |
@ -0,0 +1,3 @@ |
||||
@import url('global.css'); |
||||
@import url('freshrss.css'); |
||||
@import url('fallback.css'); |
@ -0,0 +1,625 @@ |
||||
/* STRUCTURE */ |
||||
body { |
||||
background: #fafafa; |
||||
} |
||||
|
||||
.header { |
||||
display: table; |
||||
width: 100%; |
||||
table-layout: fixed; |
||||
background: #ecf0f1; |
||||
} |
||||
.header > .item { |
||||
display: table-cell; |
||||
padding: 10px 0; |
||||
vertical-align: middle; |
||||
text-align: center; |
||||
} |
||||
.header > .item.title { |
||||
width: 250px; |
||||
} |
||||
.header > .item.title .logo { |
||||
display: inline-block; |
||||
width: 32px; |
||||
padding: 10px; |
||||
} |
||||
.header > .item.title h1 { |
||||
display: inline-block; |
||||
margin: 0; |
||||
vertical-align: bottom; |
||||
} |
||||
.header > .item.title a:hover { |
||||
text-decoration: none; |
||||
} |
||||
.header > .item.search input { |
||||
width: 250px; |
||||
transition: width 200ms linear; |
||||
border-radius: 5px 0 0 5px; |
||||
} |
||||
.header .item.search input:focus { |
||||
width: 300px; |
||||
} |
||||
.header > .item.configure { |
||||
width: 100px; |
||||
} |
||||
|
||||
#global { |
||||
display: table; |
||||
width: 100%; |
||||
height: 100%; |
||||
table-layout: fixed; |
||||
} |
||||
.aside { |
||||
display: table-cell; |
||||
height: 100%; |
||||
width: 250px; |
||||
vertical-align: top; |
||||
background: #ecf0f1; |
||||
} |
||||
.aside .nav-form input { |
||||
width: 180px; |
||||
} |
||||
.aside.aside_flux { |
||||
padding: 10px 0 40px; |
||||
} |
||||
.aside.aside_feed .nav-form input { |
||||
width: 140px; |
||||
} |
||||
.aside.aside_feed .nav-form .dropdown .dropdown-menu { |
||||
right: -20px; |
||||
} |
||||
|
||||
.nav_menu { |
||||
width: 100%; |
||||
text-align: center; |
||||
padding: 5px 0; |
||||
} |
||||
|
||||
.favicon { |
||||
height: 16px; |
||||
width: 16px; |
||||
} |
||||
|
||||
.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.error .feed { |
||||
color: #BD362F; |
||||
} |
||||
.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, |
||||
.categories .feeds .item.active .dropdown-toggle i { |
||||
background-image: url("icons/configure.png"); |
||||
background-image: url("icons/configure.svg"); |
||||
background-color: #95a5a6; |
||||
} |
||||
.categories .notRead { |
||||
position: absolute; |
||||
top: 5px; right: 3px; |
||||
color: #fff; |
||||
font-size: 90%; |
||||
} |
||||
|
||||
.post { |
||||
padding: 10px 50px; |
||||
} |
||||
.post form { |
||||
margin: 10px 0; |
||||
} |
||||
|
||||
.day { |
||||
display: inline; |
||||
min-height: 50px; |
||||
padding: 5px 15px; |
||||
font-size: 130%; |
||||
font-weight: bold; |
||||
line-height: 50px; |
||||
background: #ecf0f1; |
||||
border-radius: 0 20px 20px 0; |
||||
} |
||||
|
||||
.flux { |
||||
} |
||||
.flux.active { |
||||
border-left: 3px solid #3498db; |
||||
background: #fff; |
||||
} |
||||
.flux.not_read { |
||||
border-left: 3px solid #FF5300; |
||||
background: #FFF3ED; |
||||
} |
||||
.flux.favorite { |
||||
border-left: 3px solid #FFC300; |
||||
background: #FFF6DA; |
||||
} |
||||
|
||||
.flux_header { |
||||
height: 25px; |
||||
font-size: 12px; |
||||
line-height: 25px; |
||||
border-top: 1px solid #ecf0f1; |
||||
} |
||||
.item.manage { |
||||
width: 80px; |
||||
white-space: nowrap; |
||||
font-size: 0px; |
||||
text-align: center; |
||||
} |
||||
.item.manage .read { |
||||
display: inline-block; |
||||
width: 40px; |
||||
height: 40px; |
||||
background: url("icons/read.png") center center no-repeat; |
||||
background: url("icons/read.svg") center center no-repeat; |
||||
vertical-align: middle; |
||||
} |
||||
.item.manage .read:hover { |
||||
text-decoration: none; |
||||
} |
||||
.flux.not_read .item.manage .read { |
||||
background: url("icons/unread.png") center center no-repeat; |
||||
background: url("icons/unread.svg") center center no-repeat; |
||||
} |
||||
.item.manage .bookmark { |
||||
display: inline-block; |
||||
width: 40px; |
||||
height: 40px; |
||||
background: url("icons/non-starred.png") center center no-repeat; |
||||
background: url("icons/non-starred.svg") center center no-repeat; |
||||
vertical-align: middle; |
||||
} |
||||
.item.manage .bookmark:hover { |
||||
text-decoration: none; |
||||
} |
||||
.flux.favorite .item.manage .bookmark { |
||||
background: url("icons/starred.png") center center no-repeat; |
||||
background: url("icons/starred.svg") center center no-repeat; |
||||
} |
||||
.flux_header .item.website { |
||||
width: 200px; |
||||
overflow: hidden; |
||||
white-space: nowrap; |
||||
text-overflow: ellipsis; |
||||
line-height: 40px; |
||||
} |
||||
.flux_header .item.website .favicon { |
||||
padding: 5px; |
||||
} |
||||
.flux_header .item.website a { |
||||
display: block; |
||||
height: 40px; |
||||
} |
||||
.flux_header .item.title { |
||||
overflow: hidden; |
||||
white-space: nowrap; |
||||
text-overflow: ellipsis; |
||||
cursor: pointer; |
||||
} |
||||
.flux.not_read .flux_header .item.title { |
||||
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: 40px; |
||||
text-align: center; |
||||
} |
||||
.flux_header .item.link a { |
||||
display: inline-block; |
||||
width: 40px; |
||||
height: 40px; |
||||
background: url("icons/link.png") center center no-repeat; |
||||
background: url("icons/link.svg") center center no-repeat; |
||||
vertical-align: middle; |
||||
} |
||||
.flux_header .item.link a:hover { |
||||
text-decoration: none; |
||||
} |
||||
|
||||
#stream.reader .flux { |
||||
padding: 0 0 30px; |
||||
border: none; |
||||
background: #ecf0f1; |
||||
color: #34495e; |
||||
font-size: 120%; |
||||
} |
||||
#stream.reader .flux a { |
||||
} |
||||
#stream.reader .flux .author { |
||||
margin: 0 0 10px; |
||||
font-size: 90%; |
||||
color: #aaa; |
||||
} |
||||
|
||||
#stream.global { |
||||
text-align: center; |
||||
} |
||||
#stream.global .category { |
||||
display: inline-block; |
||||
width: 280px; |
||||
margin: 20px 10px; |
||||
vertical-align: top; |
||||
border: 1px solid #aaa; |
||||
border-radius: 5px; |
||||
text-align: left; |
||||
box-shadow: 0 0 5px #bbb; |
||||
} |
||||
#stream.global .cat_header { |
||||
height: 35px; |
||||
padding: 0 10px; |
||||
background: #eee; |
||||
border-bottom: 1px solid #aaa; |
||||
border-radius: 5px 5px 0 0; |
||||
line-height: 35px; |
||||
font-size: 120%; |
||||
} |
||||
#stream.global .cat_header a { |
||||
color: #333; |
||||
text-shadow: 0 -1px 0px #aaa; |
||||
} |
||||
#stream.global .category .feeds { |
||||
max-height: 250px; |
||||
margin: 0; |
||||
list-style: none; |
||||
overflow: auto; |
||||
} |
||||
#stream.global .category .feeds .item { |
||||
padding: 2px 10px; |
||||
font-size: 90%; |
||||
} |
||||
|
||||
.content { |
||||
min-height: 300px; |
||||
max-width: 550px; |
||||
margin: 0 auto; |
||||
padding: 20px 10px; |
||||
line-height: 170%; |
||||
word-wrap: break-word; |
||||
} |
||||
.content .title { |
||||
margin: 0 0 5px; |
||||
} |
||||
.content h1, .content h2, .content h3 { |
||||
margin: 20px 0 5px; |
||||
} |
||||
|
||||
.content p { |
||||
margin: 0 0 20px; |
||||
} |
||||
.content img.big { |
||||
display: block; |
||||
margin: 10px auto; |
||||
} |
||||
.content hr { |
||||
margin: 30px 0; |
||||
height: 1px; |
||||
background: #ddd; |
||||
border: 0; |
||||
} |
||||
.content pre { |
||||
margin: 10px auto; |
||||
padding: 10px; |
||||
overflow: auto; |
||||
background: #000; |
||||
color: #fff; |
||||
font-size: 110%; |
||||
} |
||||
.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; |
||||
} |
||||
|
||||
.flux_content .bottom { |
||||
font-size: 90%; |
||||
text-align: center; |
||||
} |
||||
|
||||
/*** PAGINATION ***/ |
||||
.pagination { |
||||
display: table; |
||||
width: 100%; |
||||
margin: 0; |
||||
background: #ecf0f1; |
||||
text-align: center; |
||||
color: #000; |
||||
font-size: 80%; |
||||
line-height: 200%; |
||||
table-layout: fixed; |
||||
font-weight: bold; |
||||
} |
||||
.pagination .item { |
||||
display: table-cell; |
||||
line-height: 40px; |
||||
vertical-align: top; |
||||
} |
||||
.pagination .item.pager-current { |
||||
font-weight: bold; |
||||
font-size: 140%; |
||||
color: #ecf0f1; |
||||
background: #34495e; |
||||
} |
||||
.pagination .item.pager-first, |
||||
.pagination .item.pager-previous, |
||||
.pagination .item.pager-next, |
||||
.pagination .item.pager-last { |
||||
width: 100px; |
||||
} |
||||
.pagination .item a { |
||||
display: block; |
||||
color: #000; |
||||
font-weight: bold; |
||||
line-height: 40px; |
||||
} |
||||
.pagination .item a:hover { |
||||
color: #ecf0f1; |
||||
background: #34495e; |
||||
text-decoration: none; |
||||
} |
||||
|
||||
.nav_entries { |
||||
display: table; |
||||
width: 250px; |
||||
height: 40px; |
||||
position: fixed; |
||||
bottom: 0; |
||||
left: 0; |
||||
margin: 0; |
||||
background: #34495e; |
||||
text-align: center; |
||||
line-height: 40px; |
||||
table-layout: fixed; |
||||
} |
||||
.nav_entries .item { |
||||
display: table-cell; |
||||
width: 30%; |
||||
} |
||||
.nav_entries .item a { |
||||
display: block; |
||||
} |
||||
.nav_entries .item .icon.i_up { |
||||
margin: 5px 0 0; |
||||
vertical-align: top; |
||||
} |
||||
|
||||
.pagination .loading, |
||||
.pagination a:hover.loading { |
||||
background: url("loader.gif") center center no-repeat #34495e; |
||||
font-size: 0; |
||||
} |
||||
|
||||
/*** NOTIFICATION ***/ |
||||
.notification { |
||||
position: fixed; |
||||
top: 10px; |
||||
left: 10%; right: 10%; |
||||
min-height: 30px; |
||||
padding: 10px; |
||||
line-height: 30px; |
||||
text-align: center; |
||||
border-radius: 3px; |
||||
background: #ddd; |
||||
color: #666; |
||||
font-weight: bold; |
||||
} |
||||
.notification.good { |
||||
background: #1abc9c; |
||||
color: #fff; |
||||
} |
||||
.notification.bad { |
||||
background: #e74c3c; |
||||
color: #fff; |
||||
} |
||||
.notification a.close { |
||||
display: inline-block; |
||||
width: 16px; |
||||
height: 16px; |
||||
float: right; |
||||
margin: -16px -16px 0 0; |
||||
padding: 5px; |
||||
border-radius: 3px; |
||||
line-height: 16px; |
||||
} |
||||
.notification.good a.close { |
||||
background: #1abc9c; |
||||
} |
||||
.notification.bad a.close { |
||||
background: #e74c3c; |
||||
} |
||||
|
||||
.toggle_aside, .btn.toggle_aside { |
||||
display: none; |
||||
} |
||||
|
||||
.actualizeProgress { |
||||
position: fixed; |
||||
top: 10px; left: 25%; right: 25%; |
||||
padding: 5px; |
||||
background: #3498db; |
||||
color: #fff; |
||||
text-align: center; |
||||
border-radius: 3px; |
||||
font-weight: bold; |
||||
} |
||||
.actualizeProgress progress { |
||||
max-width: 100%; |
||||
width: 250px; |
||||
height: 15px; |
||||
vertical-align: middle; |
||||
background: #fff; |
||||
border: none; |
||||
} |
||||
.actualizeProgress .progress { |
||||
color: #ecf0f1; |
||||
} |
||||
|
||||
.logs { |
||||
border: 1px solid #34495e; |
||||
} |
||||
.logs .log { |
||||
margin: 10px 0; |
||||
padding: 5px 2%; |
||||
overflow: auto; |
||||
background: #fafafa; |
||||
color: #666; |
||||
font-size: 90%; |
||||
} |
||||
.logs .log .date { |
||||
margin: 0 10px 0 0; |
||||
padding: 5px 10px; |
||||
border-radius: 20px; |
||||
} |
||||
.logs .log.error .date { |
||||
background: #e74c3c; |
||||
color: #fff; |
||||
} |
||||
.logs .log.warning .date { |
||||
background: #f39c12; |
||||
} |
||||
.logs .log.notice .date { |
||||
background: #ecf0f1; |
||||
} |
||||
|
||||
@media(max-width: 840px) { |
||||
.header, |
||||
.aside .btn-important, |
||||
.aside .feeds .dropdown, |
||||
.flux_header .item.website span, |
||||
.flux_header .item.date { |
||||
display: none; |
||||
} |
||||
.flux_header .item.website { |
||||
width: 40px; |
||||
text-align: center; |
||||
} |
||||
.flux_header .item.website .favicon { |
||||
padding: 12px; |
||||
} |
||||
|
||||
.content { |
||||
font-size: 120%; |
||||
} |
||||
|
||||
.pagination { |
||||
margin: 0 0 40px; |
||||
} |
||||
.pagination .pager-previous, .pagination .pager-next { |
||||
width: 100px; |
||||
} |
||||
|
||||
.toggle_aside, .btn.toggle_aside { |
||||
display: inline-block; |
||||
} |
||||
.aside { |
||||
position: fixed; |
||||
top: 0; left: 0; |
||||
width: 0; |
||||
overflow: hidden; |
||||
z-index: 10; |
||||
transition: width 200ms linear; |
||||
background: #ecf0f1; |
||||
} |
||||
.aside.aside_flux { |
||||
padding: 10px 0 0; |
||||
} |
||||
.aside:target { |
||||
width: 80%; |
||||
border-right: 1px solid #aaa; |
||||
overflow: auto; |
||||
} |
||||
.aside .toggle_aside { |
||||
position: absolute; |
||||
right: 10px; |
||||
display: inline-block; |
||||
width: 26px; |
||||
height: 26px; |
||||
margin: 0 10px 0 0; |
||||
border-radius: 3px; |
||||
text-align: center; |
||||
line-height: 24px; |
||||
background: #95a5a6; |
||||
} |
||||
.aside .toggle_aside:hover { |
||||
background: #7f8c8d; |
||||
} |
||||
.aside .categories { |
||||
margin: 30px 0; |
||||
} |
||||
|
||||
.nav_entries { |
||||
width: 100%; |
||||
} |
||||
|
||||
.nav_menu .btn { |
||||
margin: 10px; |
||||
} |
||||
.nav_menu .stick { |
||||
margin: 0 10px; |
||||
} |
||||
.nav_menu .stick .btn { |
||||
margin: 10px 0; |
||||
} |
||||
} |
@ -0,0 +1,543 @@ |
||||
/* 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"; |
||||
} |
||||
|
||||
/* LIENS */ |
||||
a { |
||||
color: #2980b9; |
||||
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 { |
||||
height: auto; |
||||
max-width: 100%; |
||||
vertical-align: middle; |
||||
} |
||||
a img { |
||||
border: none; |
||||
} |
||||
|
||||
/* VIDEOS */ |
||||
iframe, embed, object, video { |
||||
max-width: 100%; |
||||
} |
||||
|
||||
/* FORMULAIRES */ |
||||
legend { |
||||
display: inline-block; |
||||
margin: 20px 0 5px; |
||||
padding: 5px 20px; |
||||
font-size: 150%; |
||||
clear: both; |
||||
background: #ecf0f1; |
||||
border-radius: 20px; |
||||
} |
||||
label { |
||||
display: block; |
||||
min-height: 25px; |
||||
padding: 5px 0; |
||||
font-size: 12px; |
||||
line-height: 25px; |
||||
cursor: pointer; |
||||
font-weight: bold; |
||||
color: #444; |
||||
} |
||||
input, select, textarea { |
||||
display: inline-block; |
||||
max-width: 100%; |
||||
min-height: 25px; |
||||
padding: 5px; |
||||
background: #FFF; |
||||
border: none; |
||||
border-bottom: 3px solid #ddd; |
||||
color: #666; |
||||
line-height: 25px; |
||||
vertical-align: middle; |
||||
} |
||||
input[type="radio"], |
||||
input[type="checkbox"] { |
||||
width: 15px !important; |
||||
min-height: 15px !important; |
||||
} |
||||
input:focus, select:focus, textarea:focus { |
||||
color: #333; |
||||
border-color: #2980b9; |
||||
} |
||||
|
||||
.form-group { |
||||
margin: 0; |
||||
clear: both; |
||||
} |
||||
.form-group.form-actions { |
||||
min-width: 250px; |
||||
margin: 20px 0; |
||||
padding: 5px 0; |
||||
background: #ecf0f1; |
||||
border-top: 3px solid #bdc3c7; |
||||
border-radius: 5px 5px 0 0; |
||||
} |
||||
.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 label { |
||||
font-weight: normal; |
||||
font-size: 14px; |
||||
color: #000; |
||||
} |
||||
.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 { |
||||
font-size: 14px; |
||||
} |
||||
.stick .btn { |
||||
border-radius: 0; |
||||
font-size: 14px; |
||||
} |
||||
.stick .btn:first-child { |
||||
border-radius: 5px 0 0 5px; |
||||
} |
||||
.stick .btn:last-child { |
||||
border-radius: 0 5px 5px 0; |
||||
} |
||||
.stick .btn + .dropdown > .btn { |
||||
border-radius: 0 5px 5px 0; |
||||
} |
||||
.stick .btn + .dropdown a { |
||||
font-size: 12px; |
||||
} |
||||
|
||||
.btn { |
||||
display: inline-block; |
||||
min-height: 38px; |
||||
min-width: 18px; |
||||
padding: 5px 10px; |
||||
background: #3498db; |
||||
border-radius: 5px; |
||||
border: none; |
||||
border-bottom: 3px solid #2980b9; |
||||
color: #fff; |
||||
line-height: 20px; |
||||
vertical-align: middle; |
||||
cursor: pointer; |
||||
overflow: hidden; |
||||
} |
||||
a.btn { |
||||
min-height: 25px; |
||||
line-height: 25px; |
||||
} |
||||
.btn:hover { |
||||
background: #2980b9; |
||||
text-decoration: none; |
||||
} |
||||
.btn.active, |
||||
.btn:active { |
||||
background: #2980b9; |
||||
} |
||||
|
||||
.btn.btn-important { |
||||
background: #e67e22; |
||||
color: #fff; |
||||
border-bottom: 3px solid #d35400; |
||||
} |
||||
.btn.btn-important:hover { |
||||
background: #d35400; |
||||
} |
||||
.btn.btn-important:active { |
||||
background: #d35400; |
||||
} |
||||
|
||||
.btn.btn-attention { |
||||
background: #e74c3c; |
||||
color: #fff; |
||||
border-bottom: 3px solid #c0392b; |
||||
} |
||||
.btn.btn-attention:hover { |
||||
background: #c0392b; |
||||
} |
||||
.btn.btn-attention:active { |
||||
background: #c0392b; |
||||
} |
||||
|
||||
/* NAVIGATION */ |
||||
.nav.nav-list { |
||||
border-right: 1px solid #ecf0f1; |
||||
} |
||||
.nav.nav-list .nav-header, |
||||
.nav.nav-list .item { |
||||
display: block; |
||||
height: 35px; |
||||
line-height: 35px; |
||||
margin: 5px 0; |
||||
} |
||||
.nav.nav-list .item:hover, |
||||
.nav.nav-list .item.active { |
||||
background: #2980b9; |
||||
color: #fff; |
||||
} |
||||
.nav.nav-list .item:hover a, |
||||
.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 .item.error a { |
||||
color: #BD362F; |
||||
} |
||||
.nav.nav-list .item.active.error a { |
||||
color: #fff; |
||||
background: #BD362F; |
||||
} |
||||
|
||||
.nav.nav-list .nav-header { |
||||
padding: 0 10px; |
||||
margin: 0; |
||||
color: #fff; |
||||
background: #34495e; |
||||
font-weight: bold; |
||||
} |
||||
.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: #34495e; |
||||
color: #fff; |
||||
text-align: right; |
||||
} |
||||
.nav-head a { |
||||
color: #fff; |
||||
} |
||||
.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 .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 #95a5a6; |
||||
border-radius: 3px; |
||||
text-align: left; |
||||
} |
||||
.dropdown .dropdown-menu .dropdown-header { |
||||
display: block; |
||||
padding: 0 5px; |
||||
color: #34495e; |
||||
font-weight: bold; |
||||
font-size: 14px; |
||||
line-height: 30px; |
||||
} |
||||
.dropdown .dropdown-menu .item { |
||||
display: block; |
||||
height: 30px; |
||||
font-size: 90%; |
||||
line-height: 30px; |
||||
} |
||||
.dropdown .dropdown-menu .item > * { |
||||
display: block; |
||||
padding: 0 25px; |
||||
line-height: 30px; |
||||
} |
||||
.dropdown .dropdown-menu .item:hover { |
||||
background: #2980b9; |
||||
color: #fff; |
||||
} |
||||
.dropdown .dropdown-menu .item:hover > * { |
||||
color: #fff; |
||||
text-decoration: none; |
||||
} |
||||
.dropdown .dropdown-menu .input { |
||||
display: block; |
||||
height: 40px; |
||||
font-size: 90%; |
||||
line-height: 30px; |
||||
} |
||||
.dropdown .dropdown-menu label { |
||||
font-weight: normal; |
||||
} |
||||
.dropdown .dropdown-menu .input input { |
||||
display: block; |
||||
height: 20px; |
||||
width: 95%; |
||||
margin: auto; |
||||
padding: 2px 5px; |
||||
border-radius: 3px; |
||||
} |
||||
.dropdown .dropdown-menu .separator { |
||||
display: block; |
||||
height: 0; |
||||
margin: 5px 0; |
||||
border-bottom: 1px solid #95a5a6; |
||||
} |
||||
.dropdown .dropdown-target:target ~ .dropdown-menu { |
||||
display: block; |
||||
z-index: 10; |
||||
} |
||||
.dropdown .dropdown-close { |
||||
display: inline-block; |
||||
position: absolute; |
||||
top: -10px; right: -10px; |
||||
width: 26px; |
||||
height: 26px; |
||||
background: #95a5a6; |
||||
line-height: 24px; |
||||
text-align: center; |
||||
border-radius: 3px; |
||||
} |
||||
.dropdown .dropdown-close a { |
||||
display: block; |
||||
width: 100%; |
||||
height: 100%; |
||||
} |
||||
.dropdown .dropdown-close:hover { |
||||
background: #7f8c8d; |
||||
} |
||||
|
||||
/* 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; |
||||
} |
||||
.alert .alert-head { |
||||
margin: 0; |
||||
font-weight: bold; |
||||
font-size: 110%; |
||||
} |
||||
.alert.alert-warn { |
||||
background: #ffe; |
||||
border: 1px solid #eeb; |
||||
color: #c95; |
||||
} |
||||
.alert.alert-success { |
||||
background: #dfd; |
||||
border: 1px solid #cec; |
||||
color: #484; |
||||
} |
||||
.alert.alert-error { |
||||
background: #fdd; |
||||
border: 1px solid #ecc; |
||||
color: #844; |
||||
} |
||||
|
||||
/* 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.png"); |
||||
background-image: url("icons/refresh.svg"); |
||||
} |
||||
.icon.i_bookmark { |
||||
background-image: url("icons/starred.png"); |
||||
background-image: url("icons/starred.svg"); |
||||
} |
||||
.icon.i_not_bookmark { |
||||
background-image: url("icons/unstarred.png"); |
||||
background-image: url("icons/unstarred.svg"); |
||||
} |
||||
.icon.i_read { |
||||
background-image: url("icons/read.png"); |
||||
background-image: url("icons/read.svg"); |
||||
} |
||||
.icon.i_unread { |
||||
background-image: url("icons/unread.png"); |
||||
background-image: url("icons/unread.svg"); |
||||
} |
||||
.icon.i_all { |
||||
background-image: url("icons/all.png"); |
||||
background-image: url("icons/all.svg"); |
||||
} |
||||
.icon.i_close { |
||||
background-image: url("icons/close.png"); |
||||
background-image: url("icons/close.svg"); |
||||
} |
||||
.icon.i_search { |
||||
background-image: url("icons/search.png"); |
||||
background-image: url("icons/search.svg"); |
||||
} |
||||
.icon.i_configure { |
||||
background-image: url("icons/configure.png"); |
||||
background-image: url("icons/configure.svg"); |
||||
} |
||||
.icon.i_login { |
||||
background-image: url("icons/login.png"); |
||||
background-image: url("icons/login.svg"); |
||||
} |
||||
.icon.i_logout { |
||||
background-image: url("icons/logout.png"); |
||||
background-image: url("icons/logout.svg"); |
||||
} |
||||
.icon.i_add { |
||||
background-image: url("icons/add.png"); |
||||
background-image: url("icons/add.svg"); |
||||
} |
||||
.icon.i_link { |
||||
background-image: url("icons/link.png"); |
||||
background-image: url("icons/link.svg"); |
||||
} |
||||
.icon.i_down { |
||||
background-image: url("icons/down.png"); |
||||
background-image: url("icons/down.svg"); |
||||
} |
||||
.icon.i_up { |
||||
background-image: url("icons/up.png"); |
||||
background-image: url("icons/up.svg"); |
||||
} |
||||
.icon.i_next { |
||||
background-image: url("icons/next.png"); |
||||
background-image: url("icons/next.svg"); |
||||
} |
||||
.icon.i_prev { |
||||
background-image: url("icons/previous.png"); |
||||
background-image: url("icons/previous.svg"); |
||||
} |
||||
.icon.i_help { |
||||
background-image: url("icons/help.png"); |
||||
background-image: url("icons/help.svg"); |
||||
} |
||||
.icon.i_note { |
||||
background-image: url("icons/note.png"); |
||||
background-image: url("icons/note.svg"); |
||||
} |
||||
.icon.i_note_empty { |
||||
background-image: url("icons/note_empty.png"); |
||||
background-image: url("icons/note_empty.svg"); |
||||
} |
||||
.icon.i_category { |
||||
background-image: url("icons/category.png"); |
||||
background-image: url("icons/category.svg"); |
||||
} |
||||
.icon.i_rss { |
||||
background-image: url("icons/rss.png"); |
||||
background-image: url("icons/rss.svg"); |
||||
} |
||||
.icon.i_share { |
||||
background-image: url("icons/share.png"); |
||||
background-image: url("icons/share.svg"); |
||||
} |
||||
.icon.i_tag { |
||||
background-image: url("icons/tag.png"); |
||||
background-image: url("icons/tag.svg"); |
||||
} |
After Width: | Height: | Size: 154 B |
After Width: | Height: | Size: 3.0 KiB |
After Width: | Height: | Size: 152 B |
After Width: | Height: | Size: 3.5 KiB |
After Width: | Height: | Size: 203 B |
After Width: | Height: | Size: 3.3 KiB |
After Width: | Height: | Size: 243 B |
After Width: | Height: | Size: 2.5 KiB |
After Width: | Height: | Size: 358 B |
After Width: | Height: | Size: 5.0 KiB |
After Width: | Height: | Size: 271 B |
After Width: | Height: | Size: 4.1 KiB |
After Width: | Height: | Size: 687 B |
After Width: | Height: | Size: 5.3 KiB |
After Width: | Height: | Size: 719 B |
After Width: | Height: | Size: 8.0 KiB |
After Width: | Height: | Size: 213 B |
After Width: | Height: | Size: 4.2 KiB |
After Width: | Height: | Size: 220 B |
After Width: | Height: | Size: 4.1 KiB |
After Width: | Height: | Size: 265 B |
After Width: | Height: | Size: 4.0 KiB |
After Width: | Height: | Size: 600 B |
After Width: | Height: | Size: 8.2 KiB |
After Width: | Height: | Size: 427 B |
After Width: | Height: | Size: 3.3 KiB |
After Width: | Height: | Size: 517 B |
After Width: | Height: | Size: 3.9 KiB |
After Width: | Height: | Size: 266 B |
After Width: | Height: | Size: 4.0 KiB |
After Width: | Height: | Size: 656 B |
After Width: | Height: | Size: 4.7 KiB |
After Width: | Height: | Size: 319 B |