diff options
| author | 2014-06-05 22:44:42 +0200 | |
|---|---|---|
| committer | 2014-06-05 22:44:42 +0200 | |
| commit | 1dab7402bc47a7992b7f868d587fcb14c579692b (patch) | |
| tree | c23f504041a0e7ddd17670a0636eb5ac272f9494 | |
| parent | 9d4269ddcbac7b2c4efed6e8a572cfb1c0ba8f65 (diff) | |
| parent | ce063a55770f5384b8201942853e8e1a41e60b59 (diff) | |
Merge branch '320-template' into dev
| -rwxr-xr-x | app/Controllers/configureController.php | 1 | ||||
| -rw-r--r-- | app/Models/Configuration.php | 10 | ||||
| -rw-r--r-- | app/i18n/en.php | 5 | ||||
| -rw-r--r-- | app/i18n/fr.php | 5 | ||||
| -rw-r--r-- | app/layout/layout.phtml | 2 | ||||
| -rw-r--r-- | app/views/configure/display.phtml | 21 | ||||
| -rw-r--r-- | app/views/helpers/view/normal_view.phtml | 4 | ||||
| -rw-r--r-- | app/views/helpers/view/reader_view.phtml | 3 | ||||
| -rw-r--r-- | app/views/javascript/actualize.phtml | 2 | ||||
| -rw-r--r-- | p/scripts/main.js | 9 | ||||
| -rw-r--r-- | p/themes/Dark/freshrss.css | 39 | ||||
| -rw-r--r-- | p/themes/Flat/freshrss.css | 53 | ||||
| -rw-r--r-- | p/themes/Flat/icons/view-global.svg | 1 | ||||
| -rw-r--r-- | p/themes/Flat/icons/view-normal.svg | 1 | ||||
| -rw-r--r-- | p/themes/Flat/icons/view-reader.svg | 1 | ||||
| -rw-r--r-- | p/themes/Origine/freshrss.css | 965 | ||||
| -rw-r--r-- | p/themes/Origine/global.css | 541 | ||||
| -rw-r--r-- | p/themes/Origine/metadata.json | 4 | ||||
| -rw-r--r-- | p/themes/Origine/origine.css | 1006 | ||||
| -rw-r--r-- | p/themes/Origine/template.css | 683 |
20 files changed, 1786 insertions, 1570 deletions
diff --git a/app/Controllers/configureController.php b/app/Controllers/configureController.php index df5212041..a117e0f9c 100755 --- a/app/Controllers/configureController.php +++ b/app/Controllers/configureController.php @@ -145,6 +145,7 @@ class FreshRSS_configure_Controller extends Minz_ActionController { $themeId = FreshRSS_Themes::defaultTheme; } $this->view->conf->_theme($themeId); + $this->view->conf->_content_width(Minz_Request::param('content_width', 'thin')); $this->view->conf->_topline_read(Minz_Request::param('topline_read', false)); $this->view->conf->_topline_favorite(Minz_Request::param('topline_favorite', false)); $this->view->conf->_topline_date(Minz_Request::param('topline_date', false)); diff --git a/app/Models/Configuration.php b/app/Models/Configuration.php index 8d3e69a1c..0d6666297 100644 --- a/app/Models/Configuration.php +++ b/app/Models/Configuration.php @@ -28,6 +28,7 @@ class FreshRSS_Configuration { 'reception' => false, ), 'theme' => 'Origine', + 'content_width' => 'thin', 'shortcuts' => array( 'mark_read' => 'r', 'mark_favorite' => 'f', @@ -221,6 +222,15 @@ class FreshRSS_Configuration { public function _theme($value) { $this->data['theme'] = $value; } + public function _content_width($value) { + if ($value === 'medium' || + $value === 'large' || + $value === 'no_limit') { + $this->data['content_width'] = $value; + } else { + $this->data['content_width'] = 'thin'; + } + } public function _token($value) { $this->data['token'] = $value; } diff --git a/app/i18n/en.php b/app/i18n/en.php index 21d37f475..a3c1dfeb7 100644 --- a/app/i18n/en.php +++ b/app/i18n/en.php @@ -240,6 +240,11 @@ return array ( 'optimize_bdd' => 'Optimize database', 'optimize_todo_sometimes' => 'To do occasionally to reduce the size of the database', 'theme' => 'Theme', + 'content_width' => 'Content width', + 'width_thin' => 'Thin', + 'width_medium' => 'Medium', + 'width_large' => 'Large', + 'width_no_limit' => 'No limit', 'more_information' => 'More information', 'activate_sharing' => 'Activate sharing', 'shaarli' => 'Shaarli', diff --git a/app/i18n/fr.php b/app/i18n/fr.php index f42115fcd..4acf5b397 100644 --- a/app/i18n/fr.php +++ b/app/i18n/fr.php @@ -240,6 +240,11 @@ return array ( 'optimize_bdd' => 'Optimiser la base de données', 'optimize_todo_sometimes' => 'À faire de temps en temps pour réduire la taille de la BDD', 'theme' => 'Thème', + 'content_width' => 'Largeur du contenu', + 'width_thin' => 'Fine', + 'width_medium' => 'Moyenne', + 'width_large' => 'Large', + 'width_no_limit' => 'Pas de limite', 'more_information' => 'Plus d’informations', 'activate_sharing' => 'Activer le partage', 'shaarli' => 'Shaarli', diff --git a/app/layout/layout.phtml b/app/layout/layout.phtml index c22288adb..d2e1e4b3b 100644 --- a/app/layout/layout.phtml +++ b/app/layout/layout.phtml @@ -53,7 +53,7 @@ invalidateHttpCache(); } ?> -<div id="notification" class="<?php echo $status; ?>"> +<div id="notification" class="notification <?php echo $status; ?>"> <span class="msg"><?php echo $msg; ?></span> <a class="close" href=""><?php echo FreshRSS_Themes::icon('close'); ?></a> </div> diff --git a/app/views/configure/display.phtml b/app/views/configure/display.phtml index 5a94376ad..955fc6747 100644 --- a/app/views/configure/display.phtml +++ b/app/views/configure/display.phtml @@ -35,6 +35,27 @@ </div> </div> + <?php $width = $this->conf->content_width; ?> + <div class="form-group"> + <label class="group-name" for="content_width"><?php echo Minz_Translate::t('content_width'); ?></label> + <div class="group-controls"> + <select name="content_width" id="content_width" required=""> + <option value="thin" <?php echo $width === 'thin'? 'selected="selected"' : ''; ?>> + <?php echo Minz_Translate::t('width_thin'); ?> + </option> + <option value="medium" <?php echo $width === 'medium'? 'selected="selected"' : ''; ?>> + <?php echo Minz_Translate::t('width_medium'); ?> + </option> + <option value="large" <?php echo $width === 'large'? 'selected="selected"' : ''; ?>> + <?php echo Minz_Translate::t('width_large'); ?> + </option> + <option value="no_limit" <?php echo $width === 'no_limit'? 'selected="selected"' : ''; ?>> + <?php echo Minz_Translate::t('width_no_limit'); ?> + </option> + </select> + </div> + </div> + <div class="form-group"> <label class="group-name" for="theme"><?php echo Minz_Translate::t ('article_icons'); ?></label> <table> diff --git a/app/views/helpers/view/normal_view.phtml b/app/views/helpers/view/normal_view.phtml index b5cdd3039..6f172d579 100644 --- a/app/views/helpers/view/normal_view.phtml +++ b/app/views/helpers/view/normal_view.phtml @@ -24,6 +24,8 @@ if (!empty($this->entries)) { $bottomline_tags = $this->conf->bottomline_tags; $bottomline_date = $this->conf->bottomline_date; $bottomline_link = $this->conf->bottomline_link; + + $content_width = $this->conf->content_width; ?> <div id="stream" class="normal<?php echo $hidePosts ? ' hide_posts' : ''; ?>"><?php @@ -87,7 +89,7 @@ if (!empty($this->entries)) { </ul> <div class="flux_content"> - <div class="content"> + <div class="content <?php echo $content_width; ?>"> <h1 class="title"><a target="_blank" href="<?php echo $item->link (); ?>"><?php echo $item->title (); ?></a></h1> <?php $author = $item->author (); diff --git a/app/views/helpers/view/reader_view.phtml b/app/views/helpers/view/reader_view.phtml index bda96e86d..e37c78cb4 100644 --- a/app/views/helpers/view/reader_view.phtml +++ b/app/views/helpers/view/reader_view.phtml @@ -3,6 +3,7 @@ $this->partial ('nav_menu'); if (!empty($this->entries)) { $lazyload = $this->conf->lazyload; + $content_width = $this->conf->content_width; ?> <div id="stream" class="reader"> @@ -10,7 +11,7 @@ if (!empty($this->entries)) { <div class="flux<?php echo !$item->isRead () ? ' not_read' : ''; ?><?php echo $item->isFavorite () ? ' favorite' : ''; ?>" id="flux_<?php echo $item->id (); ?>"> <div class="flux_content"> - <div class="content"> + <div class="content <?php echo $content_width; ?>"> <?php $feed = FreshRSS_CategoryDAO::findFeed($this->cat_aside, $item->feed ()); //We most likely already have the feed object in cache if (empty($feed)) $feed = $item->feed (true); diff --git a/app/views/javascript/actualize.phtml b/app/views/javascript/actualize.phtml index 3b12ad774..6a92e5642 100644 --- a/app/views/javascript/actualize.phtml +++ b/app/views/javascript/actualize.phtml @@ -9,7 +9,7 @@ var feeds = [<?php function initProgressBar(init) { if (init) { - $("body").after("\<div id=\"actualizeProgress\" class=\"actualizeProgress\">\ + $("body").after("\<div id=\"actualizeProgress\" class=\"notification good\">\ <?php echo Minz_Translate::t ('refresh'); ?> <span class=\"progress\">0 / " + feed_count + "</span><br />\ <progress id=\"actualizeProgressBar\" value=\"0\" max=\"" + feed_count + "\"></progress>\ </div>"); diff --git a/p/scripts/main.js b/p/scripts/main.js index d91166e09..f1dd7117c 100644 --- a/p/scripts/main.js +++ b/p/scripts/main.js @@ -714,6 +714,7 @@ function openNotification(msg, status) { notification_working = true; notification.removeClass(); + notification.addClass("notification"); notification.addClass(status); notification.find(".msg").html(msg); notification.fadeIn(300); @@ -1007,12 +1008,18 @@ function init_feed_observers() { function init_password_observers() { $('input[type="password"] + a.btn.toggle-password').on('click', function(e) { - e.preventDefault(); + var button = $(this); var passwordField = $(this).siblings('input[type="password"]'); + passwordField.attr('type', 'text'); + button.addClass('active'); + setTimeout(function() { passwordField.attr('type', 'password'); + button.removeClass('active'); }, 2000); + + return false; }); } diff --git a/p/themes/Dark/freshrss.css b/p/themes/Dark/freshrss.css index cd51b1a06..9e58855dc 100644 --- a/p/themes/Dark/freshrss.css +++ b/p/themes/Dark/freshrss.css @@ -564,7 +564,7 @@ } /*** NOTIFICATION ***/ -#notification { +.notification { position: absolute; top: 10px; left: 25%; right: 25%; @@ -580,10 +580,10 @@ font-weight: bold; z-index: 10; } - #notification.closed { + .notification.closed { display: none; } - #notification a.close { + .notification a.close { position: absolute; top: -10px; right: -10px; display: inline-block; @@ -600,25 +600,16 @@ display: none; } -.actualizeProgress { +#actualizeProgress { position: fixed; - top: 10px; - left: 25%; right: 25%; - padding: 5px; - background: #1a1a1a; - text-align: center; - border: 1px solid #2f2f2f; - border-radius: 5px; } - .actualizeProgress progress { - max-width: 100%; - vertical-align: middle; - } - .actualizeProgress .progress { - color: #888; - font-size: 90%; - vertical-align: middle; - } +#actualizeProgress progress { + max-width: 100%; + vertical-align: middle; +} +#actualizeProgress .progress { + vertical-align: middle; +} .logs { border: 1px solid #aaa; @@ -776,8 +767,8 @@ select.number option { text-shadow: none; } - #notification, - .actualizeProgress { + .notification, + #actualizeProgress { top: 0; left: 0; right: 0; @@ -785,7 +776,7 @@ select.number option { border: none; border-bottom: 1px solid #f4f899; } - #notification a.close { + .notification a.close { left: 0; right: 0; top: 0; bottom: 0; width: auto; @@ -793,7 +784,7 @@ select.number option { background: transparent; border: none; } - #notification a.close .icon { + .notification a.close .icon { display: none; } } diff --git a/p/themes/Flat/freshrss.css b/p/themes/Flat/freshrss.css index 91da094be..061bd4a84 100644 --- a/p/themes/Flat/freshrss.css +++ b/p/themes/Flat/freshrss.css @@ -567,7 +567,7 @@ body { } /*** NOTIFICATION ***/ -#notification { +.notification { position: absolute; top: 10px; left: 25%; right: 25%; @@ -581,18 +581,18 @@ body { font-weight: bold; z-index: 10; } - #notification.closed { + .notification.closed { display: none; } - #notification.good { + .notification.good { background: #1abc9c; color: #fff; } - #notification.bad { + .notification.bad { background: #e74c3c; color: #fff; } - #notification a.close { + .notification a.close { position: absolute; top: -6px; right: -6px; display: inline-block; @@ -602,10 +602,10 @@ body { border-radius: 3px; line-height: 16px; } - #notification.good a.close { + .notification.good a.close { background: #1abc9c; } - #notification.bad a.close { + .notification.bad a.close { background: #e74c3c; } @@ -613,28 +613,16 @@ body { display: none; } -.actualizeProgress { +#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; - } +#actualizeProgress progress { + max-width: 100%; + vertical-align: middle; +} +#actualizeProgress .progress { + vertical-align: middle; +} .logs { border: 1px solid #34495e; @@ -794,16 +782,15 @@ select.number option { text-shadow: none; } - #notification, - .actualizeProgress { + .notification { top: 0; left: 0; right: 0; border-radius: 0; } - #notification a.close, - #notification.good a.close, - #notification.bad a.close { + .notification a.close, + .notification.good a.close, + .notification.bad a.close { left: 0; right: 0; top: 0; bottom: 0; width: auto; @@ -811,7 +798,7 @@ select.number option { background: transparent; border: none; } - #notification a.close .icon { + .notification a.close .icon { display: none; } } diff --git a/p/themes/Flat/icons/view-global.svg b/p/themes/Flat/icons/view-global.svg new file mode 100644 index 000000000..9d2cd0f32 --- /dev/null +++ b/p/themes/Flat/icons/view-global.svg @@ -0,0 +1 @@ +<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><g transform="translate(-61-867)" fill="#fff" color="#000"><rect height="2" rx=".385" ry=".379" width="2" x="64" y="870"/><rect height="2" rx=".385" ry=".379" width="2" x="68" y="870"/><rect height="2" rx=".385" ry=".379" width="2" x="72" y="870"/><rect height="2" rx=".385" ry=".379" width="2" x="64" y="874.02"/><rect height="2" rx=".385" ry=".379" width="2" x="68" y="874.02"/><rect height="2" rx=".385" ry=".379" width="2" x="72" y="874.02"/><rect height="2" rx=".385" ry=".379" width="2" x="64" y="878"/><rect height="2" rx=".385" ry=".379" width="2" x="68" y="878"/><rect height="2" rx=".385" ry=".379" width="2" x="72" y="878"/></g></svg>
\ No newline at end of file diff --git a/p/themes/Flat/icons/view-normal.svg b/p/themes/Flat/icons/view-normal.svg new file mode 100644 index 000000000..8eda2047e --- /dev/null +++ b/p/themes/Flat/icons/view-normal.svg @@ -0,0 +1 @@ +<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><g transform="translate(-40-746)" fill="#fff" color="#fff"><path d="m43 749h10v2h-10z"/><path d="m43 753h10v2h-10z"/><path d="m43 757h10v2h-10z"/></g></svg>
\ No newline at end of file diff --git a/p/themes/Flat/icons/view-reader.svg b/p/themes/Flat/icons/view-reader.svg new file mode 100644 index 000000000..0e4f60a1a --- /dev/null +++ b/p/themes/Flat/icons/view-reader.svg @@ -0,0 +1 @@ +<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><g transform="translate(-181-867)" fill="#fff" color="#fff"><path d="m 181,868 0,1 0,11 0,1 1,0 5,0 c 0.1754,0 0.52538,0.15166 0.8125,0.34375 0.28712,0.19209 0.46875,0.375 0.46875,0.375 L 189,882.4375 l 0.71875,-0.75 c 0,0 0.8963,-0.6875 1.28125,-0.6875 l 5,0 1,0 0,-1 0,-11 0,-1 -1,0 -5,0 c -0.87652,0 -1.56017,0.34756 -2.03125,0.6875 -0.0301,-0.0207 -0.031,-0.0105 -0.0625,-0.0312 C 188.44557,868.35254 187.82811,868 187,868 l -5,0 -1,0 z m 2,2 4,0 c 0.13821,0 0.51476,0.14746 0.8125,0.34375 0.29774,0.19629 0.5,0.375 0.5,0.375 l 0.71875,0.6875 0.6875,-0.71875 c 0,0 0.89975,-0.6875 1.28125,-0.6875 l 4,0 0,9 -4,0 c -0.87693,0 -1.56008,0.34735 -2.03125,0.6875 -0.0196,-0.0135 -0.011,-0.0177 -0.0312,-0.0312 C 188.47725,879.34834 187.83512,879 187,879 l -4,0 0,-9 z"/><g transform="scale(-1 1)"><rect height="2" rx=".375" width="3" x="-187" y="872"/><rect height="2" rx=".375" width="3" x="-187" y="875"/><rect height="2" rx=".375" width="3" x="-194" y="872"/><rect height="2" rx=".375" width="3" x="-194" y="875"/></g></g></svg>
\ No newline at end of file diff --git a/p/themes/Origine/freshrss.css b/p/themes/Origine/freshrss.css deleted file mode 100644 index 9cf1a7cba..000000000 --- a/p/themes/Origine/freshrss.css +++ /dev/null @@ -1,965 +0,0 @@ -@charset "UTF-8"; - -/* 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; - white-space: nowrap; - } - .logo { - display: inline-block; - font-size: 48px; - height: 32px; - width: 32px; - padding: 10px; - } - .header > .item.title h1 { - display: inline-block; - margin: 0; - text-shadow: 1px -1px 0 #ccc; - } - .header > .item.search input { - width: 230px; - } - .header .item.search input:focus { - width: 330px; - } - .header > .item.configure { - width: 100px; - } - -.item a:hover { - text-decoration: none; -} - -#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 40px; - } - .aside.aside_feed .nav-form input { - width: 140px; - } - .aside.aside_feed .nav-form .dropdown .dropdown-menu { - right: -20px; - } - .aside.aside_feed .nav-form .dropdown .dropdown-menu:after { - right: 33px; - } - - .nav-login { - display: none; - } - - .nav_menu { - width: 100%; - background: #fafafa; - border-bottom: 1px solid #aaa; - text-align: center; - padding: 5px 0; - } - .nav_menu .search { - display:none; - } - .nav_menu .btn[aria-checked="true"]{ - border-color: #aaa #ddd #ddd #aaa; - box-shadow: 0 0 10px 3px #ddd inset; - } - -.favicon { - height: 16px; - width: 16px; -} - -.categories { - margin: 0; - padding: 0; - text-align: center; - list-style: none; -} - .category { - display: block; - width: 220px; - margin: 10px auto; - text-align: left; - overflow: hidden; - white-space: nowrap; - text-overflow: ellipsis; - } - .category .btn:first-child { - width: 195px; - position: relative; - } - .category.stick .btn:first-child { - width:160px; - } - .category .btn:first-child:not([data-unread="0"]):after { - content: attr(data-unread); - 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; - } - .category + .feeds:not(.active) { - display:none; - } - .categories .feeds { - width: 100%; - margin: 0; - list-style: none; - } - .categories .feeds .item.active { - background: #0062BE; - } - .categories .feeds .item.active .feed { - color: #fff; - } - .categories .feeds .item.empty .feed { - color: #e67e22; - } - .categories .feeds .item.empty.active { - background: #e67e22; - } - .categories .feeds .item.empty.active .feed { - color: #fff; - } - .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; - } - .feed:not([data-unread="0"]) { - font-weight:bold; - } - .feed:not([data-unread="0"]):before { - content: "(" attr(data-unread) ") "; - } - .categories .feeds .dropdown-menu { - left: 0; - } - .categories .feeds .dropdown-menu:after { - left: 2px; - } - .categories .feeds .item .dropdown-toggle > .icon { - visibility: hidden; - cursor: pointer; - } - .categories .feeds .item .dropdown-target:target ~ .dropdown-toggle > .icon, - .categories .feeds .item:hover .dropdown-toggle > .icon, - .categories .feeds .item.active .dropdown-toggle > .icon { - background-color: #fff; - border-radius: 3px; - visibility: visible; - } - -.post { - padding: 10px 50px; -} - .post form { - margin: 10px 0; - } - -.day { - min-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; -} - #new-article + .day { - border-top: none; - } - .day .name { - position: absolute; - right: 0; - width: 50%; - height: 1.5em; - padding: 0 10px 0 0; - overflow: hidden; - color: #aab; - font-size: 1.8em; - opacity: .3; - text-shadow: 0px -1px 0px #333; - font-style: italic; - white-space: nowrap; - text-overflow: ellipsis; - text-align: right; - } - -#new-article { - display: none; - min-height: 40px; - background: #0084CC; - text-align: center; -} - #new-article:hover { - background: #0066CC; - } - #new-article > a { - display: block; - line-height: 40px; - color: #fff; - font-weight: bold; - } - #new-article > a:hover { - text-decoration: none; - } - -.flux { - border-left: 3px solid #aaa; - background: #fafafa; -} - .flux:hover { - background: #fff; - } - .flux.not_read { - border-left: 3px solid #FF5300; - background: #FFF3ED; - } - .flux.favorite { - border-left: 3px solid #FFC300; - background: #FFF6DA; - } - .flux.current { - border-left: 3px solid #0062BE; - background: #fff; - } - - .horizontal-list > .item:not(.title):not(.website) > a { - display: block; - } - - .flux_header { - background: inherit; - height: 25px; - font-size: 12px; - border-top: 1px solid #ddd; - cursor: pointer; - } - .flux .item { - line-height: 40px; - white-space: nowrap; - } - .flux_header > .item { - overflow: hidden; - text-overflow: ellipsis; - } - .flux .item.manage { - width: 40px; - text-align: center; - } - .flux .item.website { - width: 200px; - } - .website .favicon { - padding: 5px; - } - .flux .item.title { - background: inherit; - } - .flux .title a { - color: #000; - outline: none; - } - .flux.not_read .item.title, - .flux.current .item.title { - font-weight: bold; - } - .flux .item.date { - width: 145px; - padding:0 5px 0 0; - text-align: right; - font-size: 10px; - color: #666; - } - .link { - width: 40px; - text-align: center; - } - -#stream.reader .flux { - padding: 0 0 30px; - border: none; - background: #f0f0f0; - color: #333; -} - #stream.reader .flux .author { - margin: 0 0 10px; - font-size: 90%; - color: #666; - } - -#stream.global { - text-align: center; -} - #stream.global .box-category { - display: inline-block; - width: 280px; - margin: 20px 10px; - vertical-align: top; - background: #fff; - border: 1px solid #aaa; - border-radius: 5px; - text-align: left; - box-shadow: 0 0 5px #bbb; - } - #stream.global .category { - width: 100%; - margin: 0; - } - #stream.global .btn { - display: block; - width: auto; - height: 35px; - margin: 0; - padding: 0 10px; - background: #eee; - border: none; - border-bottom: 1px solid #aaa; - border-radius: 5px 5px 0 0; - line-height: 35px; - font-size: 120%; - } - #stream.global .btn:not([data-unread="0"]) { - background: #0084CC; - color: #fff; - font-weight: bold; - text-shadow: none; - } - #stream.global .btn:first-child:not([data-unread="0"]):after { - top: 0; right: 5px; - border: 0; - background: none; - color: #fff; - font-weight: bold; - box-shadow: none; - text-shadow: none; - } - #stream.global .box-category .feeds { - display: block; - max-height: 250px; - margin: 0; - list-style: none; - overflow: auto; - } - #stream.global .box-category .feeds .item { - padding: 2px 10px; - font-size: 90%; - } - #stream.global .box-category .feed { - width: 220px; - } - -.content { - min-height: 150px; - max-width: 550px; - margin: 0 auto; - padding: 20px 10px; - line-height: 170%; - word-wrap: break-word; -} - .content h1, .content h2, .content h3 { - margin: 20px 0 5px; - } - .content > .title { - font-size: x-large; - margin: 0; - } - - .content p { - margin: 0 0 20px; - } - img.big { - display: block; - margin: 10px auto; - } - figure img.big { - margin: 0; - } - .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; - } - -#panel { - display: none; - position: fixed; - top: 10px; bottom: 10px; - left: 100px; right: 100px; - overflow: auto; - background: #fff; - border: 1px solid #95a5a6; - border-radius: 5px; -} - #panel .close { - position: fixed; - top: 10px; right: 0; - display: inline-block; - width: 26px; - height: 26px; - margin: 0 10px 0 0; - border: 1px solid #ccc; - border-radius: 20px; - text-align: center; - line-height: 26px; - background: #fff; - } - -#overlay { - display: none; - position: fixed; - top: 0; bottom: 0; - left: 0; right: 0; - background: rgba(0, 0, 0, 0.9); -} - -.flux_content .bottom { - font-size: 90%; - text-align: center; -} - -.hide_posts > :not(.active) > .flux_content { - display:none; -} - -/*** 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; - line-height: 40px; - } - .pagination .item.pager-current { - font-weight: bold; - font-size: 140%; - } - .pagination .pager-first, - .pagination .pager-previous, - .pagination .pager-next, - .pagination .pager-last { - width: 100px; - } - .pagination .item a { - display: block; - color: #333; - font-style: italic; - } - .pagination:first-child .item { - border-bottom: 1px solid #aaa; - } - .pagination:last-child .item { - border-top: 1px solid #aaa; - } - -#nav_entries { - display: table; - width: 250px; - height: 40px; - position: fixed; - bottom: 0; - left: 0; - margin: 0; - background: #fff; - border-top: 1px solid #ddd; - text-align: center; - line-height: 40px; - table-layout: fixed; -} - #nav_entries .item { - display: table-cell; - width: 30%; - } - #nav_entries a { - display: block; - } - #nav_entries .i_up { - margin: 5px 0 0; - vertical-align: top; - } - -.loading { - background: url("loader.gif") center center no-repeat; - font-size: 0; -} - -#bigMarkAsRead { - display: block; - font-style: normal; - padding: 32px 0 64px 0; - text-align: center; - text-decoration: none; - text-shadow: 0 -1px 0 #aaa; -} - #bigMarkAsRead:hover { - background: #333; - color: #fff; - } - .bigTick { - font-size: 72pt; - line-height: 1.6em; - } - -/*** NOTIFICATION ***/ -#notification { - position: absolute; - top: 10px; - left: 25%; right: 25%; - min-height: 30px; - padding: 10px; - line-height: 30px; - text-align: center; - border-radius: 5px; - box-shadow: 0 0 5px #666; - background: #ddd; - color: #666; - font-weight: bold; - z-index: 10; -} - #notification.closed { - display: none; - } - #notification.good { - background: #f4f899; - } - #notification.bad { - background: #f4a899; - } - #notification a.close { - position: absolute; - top: -10px; right: -10px; - display: inline-block; - width: 16px; - height: 16px; - padding: 5px; - background: #fff; - border-radius: 50px; - border: 1px solid #aaa; - line-height: 16px; - } - -.toggle_aside, .btn.toggle_aside { - display: none; -} - -.actualizeProgress { - position: fixed; - top: 10px; - left: 25%; right: 25%; - padding: 5px; - background: #fff; - text-align: center; - border: 1px solid #ddd; - border-radius: 5px; -} - .actualizeProgress progress { - max-width: 100%; - vertical-align: middle; - } - .actualizeProgress .progress { - color: #999; - font-size: 90%; - vertical-align: middle; - } - -.logs { - border: 1px solid #aaa; -} - .log { - padding: 5px 2%; - overflow: auto; - background: #fafafa; - border-bottom: 1px solid #999; - color: #333; - font-size: 90%; - } - .log .date { - display: block; - } - .log.error { - background: #fdd; - color: #844; - } - .log.warning { - background: #ffe; - color: #c95; - } - .log.notice { - background: #f4f4f4; - color: #aaa; - } - .log.debug { - background: #111; - color: #eee; - } - -.form-group table { - border-collapse:collapse; - margin:10px 0 0 220px; - text-align:center; -} - -.form-group tr, .form-group th, .form-group td { - border:1px solid #DDD; - font-weight:normal; - padding:.5em; -} - -select.number option { - text-align:right; -} - -@media(min-width: 841px) { - .flux:not(.current):hover .item.title { - max-width: calc(100% - 580px); - padding-right: 1.5em; - position: absolute; - } -} - -@media(max-width: 840px) { - .header, - .aside .btn-important, - .aside .feeds .dropdown, - .flux_header .item.website span, - .item.date { - display: none; - } - .flux_header .item.website { - width: 40px; - text-align: center; - } - .flux_header .item.website .favicon { - padding: 12px; - } - - .nav-login { - display: block; - } - - .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; - border-right: none; - z-index: 10; - transition: width 200ms linear; - } - .aside.aside_flux { - padding: 10px 0 0; - } - .aside:target { - width: 80%; - border-right: 1px solid #aaa; - overflow: auto; - } - .aside .toggle_aside { - position: absolute; - right: 0; - display: inline-block; - width: 26px; - height: 26px; - margin: 0 10px 0 0; - border: 1px solid #ccc; - border-radius: 20px; - text-align: center; - line-height: 26px; - } - .aside .categories { - margin: 30px 0; - } - - #nav_entries { - width: 100%; - } - - .nav_menu .btn { - margin: 5px 10px; - } - .nav_menu .stick { - margin: 0 10px; - } - .nav_menu .stick .btn { - margin: 5px 0; - } - .nav_menu .search { - display: inline-block; - max-width: 97%; - } - .nav_menu .search input { - max-width: 97%; - width: 90px; - } - .nav_menu .search input:focus { - width: 400px; - } - - #panel { - left: 5px; right: 5px; - } - - .day .date { - display: none; - } - .day .name { - height: 2.6em; - font-size: 1em; - text-shadow: none; - } - - #notification, - .actualizeProgress { - top: 0; - left: 0; - right: 0; - border-radius: 0; - } - #notification a.close { - left: 0; right: 0; - top: 0; bottom: 0; - width: auto; - height: auto; - background: transparent; - border: none; - } - #notification a.close .icon { - display: none; - } -} - -/*** FALLBACK ***/ -.btn { - background: #fff; - background: -moz-linear-gradient(top, #fff 0%, #eee 100%); - background: -webkit-linear-gradient(top, #fff 0%, #eee 100%); - background: -o-linear-gradient(top, #fff 0%, #eee 100%); - background: -ms-linear-gradient(top, #fff 0%, #eee 100%); -} - .btn:hover { - background: #f0f0f0; - background: -moz-linear-gradient(top, #f8f8f8 0%, #f0f0f0 100%); - background: -webkit-linear-gradient(top, #f8f8f8 0%, #f0f0f0 100%); - background: -o-linear-gradient(top, #f8f8f8 0%, #f0f0f0 100%); - background: -ms-linear-gradient(top, #f8f8f8 0%, #f0f0f0 100%); - } - .btn-important { - background: #0084CC; - background: -moz-linear-gradient(top, #0084CC 0%, #0045CC 100%); - background: -webkit-linear-gradient(top, #0084CC 0%, #0045CC 100%); - background: -o-linear-gradient(top, #0084CC 0%, #0045CC 100%); - background: -ms-linear-gradient(top, #0084CC 0%, #0045CC 100%); - } - .btn-important:hover { - background: -moz-linear-gradient(top, #0066CC 0%, #0045CC 100%); - background: -webkit-linear-gradient(top, #0066CC 0%, #0045CC 100%); - background: -o-linear-gradient(top, #0066CC 0%, #0045CC 100%); - background: -ms-linear-gradient(top, #0066CC 0%, #0045CC 100%); - } - .btn-attention { - background: #E95B57; - background: -moz-linear-gradient(top, #E95B57 0%, #BD362F 100%); - background: -webkit-linear-gradient(top, #E95B57 0%, #BD362F 100%); - background: -o-linear-gradient(top, #E95B57 0%, #BD362F 100%); - background: -ms-linear-gradient(top, #E95B57 0%, #BD362F 100%); - } - .btn-attention:hover { - background: -moz-linear-gradient(top, #D14641 0%, #BD362F 100%); - background: -webkit-linear-gradient(top, #D14641 0%, #BD362F 100%); - background: -o-linear-gradient(top, #D14641 0%, #BD362F 100%); - background: -ms-linear-gradient(top, #D14641 0%, #BD362F 100%); - } - -.dropdown-menu:after { - -moz-transform: rotate(45deg); - -webkit-transform: rotate(45deg); - -ms-transform: rotate(45deg); -} - -.nav-head { - background: #fff; - background: -moz-linear-gradient(top, #fff 0%, #f0f0f0 100%); - background: -webkit-linear-gradient(top, #fff 0%, #f0f0f0 100%); - background: -o-linear-gradient(top, #fff 0%, #f0f0f0 100%); - background: -ms-linear-gradient(top, #fff 0%, #f0f0f0 100%); -} - -input.extend { - -moz-transition: width 200ms linear; - -webkit-transition: width 200ms linear; - -o-transition: width 200ms linear; - -ms-transition: width 200ms linear; -} - -@media(max-width: 840px) { - .aside { - -moz-transition: width 200ms linear; - -webkit-transition: width 200ms linear; - -o-transition: width 200ms linear; - -ms-transition: width 200ms linear; - } -} - -@media print { - .header, - .aside, - .nav_menu, - .day, - .flux_header, - .flux_content .bottom, - .pagination { - display: none; - } - - html, body { - background: #fff; - color: #000; - font-family: Serif; - font-size: 12pt; - } - - #global, - .flux_content { - display: block !important; - } - - .flux_content .content { - width: 100% !important; - text-align: justify; - } - - .flux_content .content a { - color: #000; - } - .flux_content .content a:after { - content: " (" attr(href) ") "; - text-decoration: underline; - } -} - -.stat { - border:1px solid #aaa; - border-radius:10px; - box-shadow:2px 2px 5px #aaa; - margin:10px 0; - padding:0 5px; -} -.stat > h2 { - border-bottom:1px solid #aaa; - margin:0 -5px; - padding-left:5px; -} -.stat > div { - margin:5px 0; -} -.stat > table { - border-collapse:collapse; - margin:5px 0; - width:100%; -} -.stat > table > thead > tr { - border-bottom:2px solid #aaa; -} -.stat > table > tbody > tr { - border-bottom:1px solid #aaa; -} -.stat > table > tbody > tr:last-child { - border-bottom:0; -} -.stat > table th, .stat > table td { - border-left:2px solid #aaa; - padding:5px; -} -.stat > table th:first-child, .stat > table td:first-child { - border-left:0; -} -.stat > table td.numeric{ - margin:5px 0; - text-align:center; -}
\ No newline at end of file diff --git a/p/themes/Origine/global.css b/p/themes/Origine/global.css deleted file mode 100644 index 7fb3a8f95..000000000 --- a/p/themes/Origine/global.css +++ /dev/null @@ -1,541 +0,0 @@ -@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; -} - -/* 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 */ -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 #ddd; - 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: #fdfdfd; - border: 1px solid #bbb; - border-radius: 3px; - color: #666; - line-height: 25px; - vertical-align: middle; - box-shadow: 0 2px 2px #eee 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: #0062BE; - border-color: #33BBFF; - box-shadow: 0 2px 2px #DDDDFF inset; - } - 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: #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, - .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 #06f; - } - .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 input + .btn { - border-top: 1px solid #bbb; - } - .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 #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; - overflow: hidden; -} - a.btn { - min-height: 25px; - line-height: 25px; - } - .btn:hover { - background: linear-gradient(to bottom, #f8f8f8, #f0f0f0); - text-decoration: none; - } - .btn.active, - .btn:active, - .dropdown-target:target ~ .btn.dropdown-toggle { - box-shadow: 0px 2px 4px #e0e0e0 inset, 0px 1px 2px #fafafa; - background: #eee; - } - - .btn-important { - background: linear-gradient(to bottom, #0084CC, #0045CC); - color: #fff; - border: 1px solid #0062B7; - text-shadow: 0px -1px 0 #aaa; - } - .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: #fff; - border: 1px solid #C44742; - text-shadow: 0px -1px 0px #666; - } - .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: #fafafa; - } - .nav-list .item:hover a { - color: #003388; - } - .nav-list .item.active { - background: #0062BE; - color: #fff; - } - .nav-list .item.active a { - color: #fff; - } - .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; - color: #888; - background: #f4f4f4; - border-bottom: 1px solid #ddd; - font-weight: bold; - text-shadow: 0 0 1px #ddd; - } - .nav-list .separator { - display: block; - height: 0; - margin: 5px 0; - border-bottom: 1px solid #ddd; - } - - .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 #ddd; - 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: #fff; - border: 1px solid #ddd; - border-radius: 5px; - text-align: left; - box-shadow: 3px 3px 3px #ddd; - } - .dropdown-menu:after { - content: ""; - position: absolute; - top: -6px; - right: 13px; - width: 10px; - height: 10px; - background: #fff; - border-top: 1px solid #ddd; - border-left: 1px solid #ddd; - 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: #0062BE; - color: #fff; - } - .dropdown-menu > .item:hover > a { - color: #fff; - 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 #ddd; - } - .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: #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-head { - margin: 0; - font-weight: bold; - font-size: 110%; - } - .alert > a { - color: inherit; - text-decoration: underline; - } - .alert-warn { - background: #ffe; - border: 1px solid #eeb; - color: #c95; - } - .alert-success { - background: #dfd; - border: 1px solid #cec; - color: #484; - } - .alert-error { - background: #fdd; - border: 1px solid #ecc; - 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; - } diff --git a/p/themes/Origine/metadata.json b/p/themes/Origine/metadata.json index f93dcbc3f..59a45e8f6 100644 --- a/p/themes/Origine/metadata.json +++ b/p/themes/Origine/metadata.json @@ -2,6 +2,6 @@ "name": "Origine", "author": "Marien Fressinaud", "description": "Le thème par défaut pour FreshRSS", - "version": 0.1, - "files": ["global.css", "freshrss.css"] + "version": 0.2, + "files": ["template.css", "origine.css"] } diff --git a/p/themes/Origine/origine.css b/p/themes/Origine/origine.css new file mode 100644 index 000000000..3a32d54d3 --- /dev/null +++ b/p/themes/Origine/origine.css @@ -0,0 +1,1006 @@ +@charset "UTF-8"; + +/*=== FONTS */ +@font-face { + font-family: "OpenSans"; + src: url("../fonts/openSans.woff") format("woff"); +} + +/*=== GENERAL */ +/*============*/ +html, body { + height: 100%; + font-family: "OpenSans", "Cantarell", "Helvetica", "Arial", sans-serif; +} + +/*=== Links */ +a { + color: #0062be; +} + +/*=== Forms */ +legend { + margin: 20px 0 5px; + padding: 5px 0; + border-bottom: 1px solid #ddd; + font-size: 1.4em; +} +label { + min-height: 25px; + padding: 5px 0; + cursor: pointer; +} +textarea { + width: 360px; + height: 100px; +} +input, select, textarea { + 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; +} +option { + padding: 0 .5em; +} +input:focus, select:focus, textarea:focus { + color: #0062be; + border-color: #33bbff; + box-shadow: 0 2px 2px #ddddff inset; +} +input:invalid, select:invalid { + border-color: #f00; + box-shadow: 0 0 2px 2px #fdd inset; +} +input:disabled, select:disabled { + background: #eee; +} +input.extend { + transition: width 200ms linear; + -moz-transition: width 200ms linear; + -webkit-transition: width 200ms linear; + -o-transition: width 200ms linear; + -ms-transition: width 200ms linear; +} + +/*=== Tables */ +table { + border-collapse: collapse; +} + +tr, th, td { + padding: 0.5em; + border: 1px solid #ddd; +} +th { + background: #f6f6f6; +} +form td, +form th { + font-weight: normal; + text-align: center; +} + +/*=== COMPONENTS */ +/*===============*/ +/*=== Forms */ +.form-group.form-actions { + padding: 5px 0; + background: #f4f4f4; + border-top: 1px solid #ddd; +} +.form-group.form-actions .btn { + margin: 0 10px; +} +.form-group .group-name { + padding: 10px 0; + text-align: right; +} +.form-group .group-controls { + min-height: 25px; + padding: 5px 0; +} +.form-group table { + margin: 10px 0 0 220px; +} + +/*=== Buttons */ +.stick { + vertical-align: middle; + font-size: 0; +} +.stick input, +.stick .btn { + border-radius: 0; +} +.stick .btn:first-child, +.stick input:first-child { + border-radius: 3px 0 0 3px; +} +.stick .btn-important:first-child { + border-right: 1px solid #06f; +} +.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 input + .btn { + border-top: 1px solid #bbb; +} +.stick .btn + .dropdown > .btn { + border-left: none; + border-radius: 0 3px 3px 0; +} + +.btn { + display: inline-block; + min-height: 37px; + min-width: 15px; + margin: 0; + padding: 5px 10px; + background: #fff; + background: linear-gradient(to bottom, #fff 0%, #eee 100%); + background: -moz-linear-gradient(top, #fff 0%, #eee 100%); + background: -webkit-linear-gradient(top, #fff 0%, #eee 100%); + background: -o-linear-gradient(top, #fff 0%, #eee 100%); + background: -ms-linear-gradient(top, #fff 0%, #eee 100%); + 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; + font-size: 0.9rem; + vertical-align: middle; + cursor: pointer; + overflow: hidden; +} +a.btn { + min-height: 25px; + line-height: 25px; +} +.btn:hover { + background: #f0f0f0; + background: linear-gradient(to bottom, #f8f8f8, #f0f0f0); + background: -moz-linear-gradient(top, #f8f8f8 0%, #f0f0f0 100%); + background: -webkit-linear-gradient(top, #f8f8f8 0%, #f0f0f0 100%); + background: -o-linear-gradient(top, #f8f8f8 0%, #f0f0f0 100%); + background: -ms-linear-gradient(top, #f8f8f8 0%, #f0f0f0 100%); + text-decoration: none; +} +.btn.active, +.btn:active, +.dropdown-target:target ~ .btn.dropdown-toggle { + box-shadow: 0px 2px 4px #e0e0e0 inset, 0px 1px 2px #fafafa; + background: #eee; +} + +.btn-important { + background: #0084CC; + background: linear-gradient(to bottom, #0084CC, #0045CC); + background: -moz-linear-gradient(top, #0084CC 0%, #0045CC 100%); + background: -webkit-linear-gradient(top, #0084CC 0%, #0045CC 100%); + background: -o-linear-gradient(top, #0084CC 0%, #0045CC 100%); + background: -ms-linear-gradient(top, #0084CC 0%, #0045CC 100%); + color: #fff; + border: 1px solid #0062B7; + text-shadow: 0px -1px 0 #aaa; + font-weight: normal; +} +.btn-important:hover { + background: linear-gradient(to bottom, #0066CC, #0045CC); + background: -moz-linear-gradient(top, #0066CC 0%, #0045CC 100%); + background: -webkit-linear-gradient(top, #0066CC 0%, #0045CC 100%); + background: -o-linear-gradient(top, #0066CC 0%, #0045CC 100%); + background: -ms-linear-gradient(top, #0066CC 0%, #0045CC 100%); +} +.btn-important:active { + background: #0044CB; + box-shadow: none; +} + +.btn-attention { + background: #E95B57; + background: linear-gradient(to bottom, #E95B57, #BD362F); + background: -moz-linear-gradient(top, #E95B57 0%, #BD362F 100%); + background: -webkit-linear-gradient(top, #E95B57 0%, #BD362F 100%); + background: -o-linear-gradient(top, #E95B57 0%, #BD362F 100%); + background: -ms-linear-gradient(top, #E95B57 0%, #BD362F 100%); + color: #fff; + border: 1px solid #C44742; + text-shadow: 0px -1px 0px #666; +} +.btn-attention:hover { + background: linear-gradient(to bottom, #D14641, #BD362F); + background: -moz-linear-gradient(top, #D14641 0%, #BD362F 100%); + background: -webkit-linear-gradient(top, #D14641 0%, #BD362F 100%); + background: -o-linear-gradient(top, #D14641 0%, #BD362F 100%); + background: -ms-linear-gradient(top, #D14641 0%, #BD362F 100%); +} +.btn-attention:active { + background: #BD362F; + box-shadow: none; +} + +/*=== Navigation */ +.nav-list .nav-header, +.nav-list .item { + height: 2.5em; + line-height: 2.5em; + font-size: 0.9rem; +} +.nav-list .item:hover { + background: #fafafa; +} +.nav-list .item:hover a { + color: #003388; +} +.nav-list .item.active { + background: #0062BE; + color: #fff; +} +.nav-list .item.active a { + color: #fff; +} +.nav-list .disable { + color: #aaa; + background: #fafafa; + text-align: center; +} +.nav-list .item > a { + padding: 0 10px; +} +.nav-list a:hover { + text-decoration: none; +} +.nav-list .item.empty a { + color: #f39c12; +} +.nav-list .item.active.empty a { + color: #fff; + background: #f39c12; +} +.nav-list .item.error a { + color: #BD362F; +} +.nav-list .item.active.error a { + color: #fff; + background: #BD362F; +} + +.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-list .nav-form { + padding: 3px; + text-align: center; +} + +.nav-head { + margin: 0; + background: #fff; + background: linear-gradient(to bottom, #fff, #f0f0f0); + background: -moz-linear-gradient(top, #fff 0%, #f0f0f0 100%); + background: -webkit-linear-gradient(top, #fff 0%, #f0f0f0 100%); + background: -o-linear-gradient(top, #fff 0%, #f0f0f0 100%); + background: -ms-linear-gradient(top, #fff 0%, #f0f0f0 100%); + border-bottom: 1px solid #ddd; + text-align: right; +} +.nav-head .item { + padding: 5px 10px; + font-size: 0.9rem; + line-height: 1.5rem; +} + +/*=== Horizontal-list */ +.horizontal-list { + margin: 0; + padding: 0; +} +.horizontal-list .item { + vertical-align: middle; +} + +/*=== Dropdown */ +.dropdown-menu { + margin: 5px 0 0; + padding: 5px 0; + border: 1px solid #ddd; + border-radius: 5px; + box-shadow: 3px 3px 3px #ddd; + font-size: 0.8rem; + text-align: left; +} +.dropdown-menu:after { + content: ""; + position: absolute; + top: -6px; + right: 13px; + width: 10px; + height: 10px; + background: #fff; + border-top: 1px solid #ddd; + border-left: 1px solid #ddd; + z-index: -10; + transform: rotate(45deg); + -moz-transform: rotate(45deg); + -webkit-transform: rotate(45deg); + -ms-transform: rotate(45deg); +} +.dropdown-header { + padding: 0 5px 5px; + color: #888; + font-weight: bold; + text-align: left; +} +.dropdown-menu > .item { +} +.dropdown-menu > .item > a { + padding: 0 25px; + line-height: 2.5em; +} +.dropdown-menu > .item:hover { + background: #0062BE; + color: #fff; +} +.dropdown-menu > .item[aria-checked="true"] > a:before { + font-weight: bold; + margin: 0 0 0 -14px; +} +.dropdown-menu > .item:hover > a { + color: #fff; + text-decoration: none; +} +.dropdown-menu .input select, +.dropdown-menu .input input { + margin: 0 auto 5px; + padding: 2px 5px; + border-radius: 3px; +} + +.separator { + margin: 5px 0; + border-bottom: 1px solid #ddd; +} + +/*=== Alerts */ +.alert { + 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; + font-size: 0.9em; +} +.alert-head { + font-size: 1.2em; +} +.alert > a { + color: inherit; + text-decoration: underline; +} +.alert-warn { + background: #ffe; + border: 1px solid #eeb; + color: #c95; +} +.alert-success { + background: #dfd; + border: 1px solid #cec; + color: #484; +} +.alert-error { + background: #fdd; + border: 1px solid #ecc; + color: #844; +} + +/*=== Pagination */ +.pagination { + background: #fafafa; + text-align: center; + color: #333; + font-size: 0.8em; +} +.content .pagination { + margin: 0; + padding: 0; +} +.pagination .item.pager-current { + font-weight: bold; + font-size: 1.5em; +} +.pagination .item a { + display: block; + color: #333; + font-style: italic; + line-height: 3em; + text-decoration: none; +} +.pagination .item a:hover { + background: #ddd; +} +.pagination:first-child .item { + border-bottom: 1px solid #aaa; +} +.pagination:last-child .item { + border-top: 1px solid #aaa; +} + +/*=== STRUCTURE */ +/*===============*/ +/*=== Header */ +.header { + background: #f4f4f4; +} +.header > .item { + padding: 10px 0; + border-bottom: 1px solid #aaa; + vertical-align: middle; + text-align: center; +} +.header > .item.title h1 { + text-shadow: 1px -1px 0 #ccc; +} +.header > .item.title h1 a { + text-decoration: none; +} +.header > .item.search input { + width: 230px; +} +.header .item.search input:focus { + width: 350px; +} + +/*=== Body */ +#global { + background: #fafafa; +} +.aside { + border-right: 1px solid #aaa; + background: #fff; +} +.aside.aside_flux { + padding: 10px 0 40px; +} + +/*=== Aside main page (categories) */ +.categories { + text-align: center; +} +.category { + width: 220px; + margin: 10px auto; + text-align: left; +} +.category .btn:first-child { + position: relative; + width: 197px; +} +.category.stick .btn:first-child { + width: 160px; +} +.category .btn:first-child:not([data-unread="0"]):after { + position: absolute; + top: 3px; right: 3px; + padding: 1px 5px; + background: #ccc; + color: #fff; + border: 1px solid #bbb; + border-radius: 5px; + box-shadow: 1px 3px 3px #aaa inset; + text-shadow: 0 0 1px #aaa; +} + +/*=== Aside main page (feeds) */ +.categories .feeds .item.active { + background: #0062BE; +} +.categories .feeds .item.active .feed { + color: #fff; +} +.categories .feeds .item.empty .feed { + color: #e67e22; +} +.categories .feeds .item.empty.active { + background: #e67e22; +} +.categories .feeds .item.empty.active .feed { + color: #fff; +} +.categories .feeds .item.error .feed { + color: #BD362F; +} +.categories .feeds .item .feed { + margin: 0; + width: 165px; + line-height: 3em; + font-size: 0.8em; + text-align: left; + text-decoration: none; +} +.categories .feeds .feed:not([data-unread="0"]) { + font-weight: bold; +} +.categories .feeds .dropdown-menu:after { + left: 2px; +} +.categories .feeds .item .dropdown-target:target ~ .dropdown-toggle > .icon, +.categories .feeds .item:hover .dropdown-toggle > .icon, +.categories .feeds .item.active .dropdown-toggle > .icon { + background-color: #fff; + border-radius: 3px; + vertical-align: middle; +} + +/*=== Configuration pages */ +.post { + padding: 10px 50px; + font-size: 0.9em; +} +.post form { + margin: 10px 0; +} +.post.content { + max-width: 550px; +} + +/*=== Prompt (centered) */ +.prompt { + text-align: center; +} +.prompt label { + text-align: left; +} +.prompt form { + margin: 10px auto 20px auto; + width: 180px; +} +.prompt input { + margin: 5px auto; + width: 100%; +} +.prompt p { + margin: 20px 0; +} + +/*=== New article notification */ +#new-article { + background: #0084CC; + text-align: center; + font-size: 0.9em; +} +#new-article:hover { + background: #0066CC; +} +#new-article > a { + line-height: 3em; + color: #fff; + font-weight: bold; +} +#new-article > a:hover { + text-decoration: none; +} + +/*=== Day indication */ +.day { + padding: 0 10px; + font-weight: bold; + line-height: 3em; + background: #fff; + border-top: 1px solid #aaa; + border-bottom: 1px solid #aaa; +} +#new-article + .day { + border-top: none; +} +.day .name { + padding: 0 10px 0 0; + color: #aab; + font-size: 1.8em; + opacity: 0.3; + text-shadow: 0px -1px 0px #666; + font-style: italic; + text-align: right; +} + +/*=== Index menu */ +.nav_menu { + background: #fafafa; + border-bottom: 1px solid #aaa; + text-align: center; + padding: 5px 0; +} + +/*=== Feed articles */ +.flux { + border-left: 2px solid #aaa; + background: #fafafa; +} +.flux:hover { + background: #fff; +} +.flux.current { + border-left: 2px solid #0062BE; +} +.flux.not_read { + border-left: 2px solid #FF5300; + background: #FFF3ED; +} +.flux.not_read:not(.current):hover .item.title { + background: #FFF3ED; +} +.flux.favorite { + border-left: 2px solid #FFC300; + background: #FFF6DA; +} +.flux.favorite:not(.current):hover .item.title { + background: #FFF6DA; +} +.flux.current { + background: #fff; +} + + +.flux_header { + border-top: 1px solid #ddd; + font-size: 0.8rem; + cursor: pointer; +} +.flux .website .favicon { + padding: 5px; +} +.flux .date { + color: #666; + font-size: 0.7rem; +} +.flux:not(.current):hover .item.title { + top: 1px; +} + +.flux .bottom { + font-size: 0.8rem; + text-align: center; +} + +/*=== Content of feed articles */ +.content { + padding: 20px 10px; +} +.content > h1.title > a { + color: #000; +} + +.content hr { + margin: 30px 10px; + height: 1px; + background: #ddd; + border: 0; + box-shadow: 0 2px 5px #ccc; +} + +.content pre { + margin: 10px auto; + padding: 10px 20px; + overflow: auto; + background: #222; + color: #fff; + font-size: 0.9rem; + border-radius: 3px; +} +.content code { + padding: 2px 5px; + color: #dd1144; + background: #fafafa; + border: 1px solid #eee; + border-radius: 3px; +} +.content pre code { + background: transparent; + color: #fff; + border: none; +} + +.content blockquote { + display: block; + padding: 5px 20px; + border-top: 1px solid #ddd; + border-bottom: 1px solid #ddd; + background: #fafafa; + color: #333; +} +.content blockquote p { + margin: 0; +} + +/*=== Notification and actualize notification */ +.notification { + padding: 0 0 0 5px; + text-align: center; + border: 1px solid #eeb; + border-radius: 3px; + box-shadow: 0 0 5px #ddd; + font-weight: bold; + font-size: 0.9em; + line-height: 3em; + z-index: 10; + vertical-align: middle; +} +.notification.good { + background: #ffe; + border: 1px solid #eeb; + color: #c95; +} +.notification.bad { + background: #fdd; + border: 1px solid #ecc; + color: #844; +} +.notification a.close { + padding: 0 15px; + line-height: 3em; +} +.notification.good a.close:hover { + background: #eeb; +} +.notification.bad a.close:hover { + background: #ecc; +} + +.notification#actualizeProgress { + line-height: 2em; +} + +/*=== "Load more" part */ +#bigMarkAsRead { + text-align: center; + text-decoration: none; + text-shadow: 0 -1px 0 #aaa; + color: #666; + background: #fafafa; +} +#bigMarkAsRead:hover { + color: #000; + background: #ccc; + background: radial-gradient(circle at 50% -25% , #ccc 0%, #fafafa 50%); + background: -moz-radial-gradient(circle at 50% -25% , #ccc 0%, #fafafa 50%); + background: -webkit-radial-gradient(circle at 50% -25% , #ccc 0%, #fafafa 50%); + background: -o-radial-gradient(circle at 50% -25% , #ccc 0%, #fafafa 50%); + background: -ms-radial-gradient(circle at 50% -25% , #ccc 0%, #fafafa 50%); +} +#bigMarkAsRead:hover .bigTick { + text-shadow: 0 0 10px #666; +} + +/*=== Navigation menu (for articles) */ +#nav_entries { + margin: 0; + background: #fff; + border-top: 1px solid #ddd; + text-align: center; + line-height: 3em; + table-layout: fixed; +} + +/*=== READER VIEW */ +/*================*/ +#stream.reader .flux { + padding: 0 0 50px; + border: none; + background: #f0f0f0; + color: #333; +} +#stream.reader .flux .author { + margin: 0 0 10px; + font-size: 90%; + color: #666; +} + +/*=== GLOBAL VIEW */ +/*================*/ +#stream.global .box-category { + background: #fff; + border-radius: 5px; + text-align: left; + box-shadow: 0 0 3px #bbb; +} +#stream.global .category { + margin: 0; +} +#stream.global .btn { + width: auto; + height: 2em; + margin: 0; + padding: 0 10px; + background: #f6f6f6; + border: none; + border-bottom: 1px solid #ddd; + border-radius: 5px 5px 0 0; + line-height: 2em; + font-size: 1.2rem; +} +#stream.global .btn:not([data-unread="0"]) { + background: #0084CC; + color: #fff; + font-weight: bold; + text-shadow: none; +} +#stream.global .btn:first-child:not([data-unread="0"]):after { + top: 0; right: 5px; + border: 0; + background: none; + color: #fff; + font-weight: bold; + box-shadow: none; + text-shadow: none; +} +#stream.global .box-category .feeds { + max-height: 250px; +} +#stream.global .box-category .feeds .item { + padding: 2px 10px; + font-size: 0.9rem; +} + +/*=== DIVERS */ +/*===========*/ +.aside.aside_feed .nav-form input, +.aside.aside_feed .nav-form select { + width: 140px; +} +.aside.aside_feed .nav-form .dropdown .dropdown-menu { + right: -20px; +} +.aside.aside_feed .nav-form .dropdown .dropdown-menu:after { + right: 33px; +} + +/*=== STATISTICS */ +/*===============*/ +.stat { + margin: 10px 0 20px; +} + +.stat th, +.stat td, +.stat tr { + border: none; +} +.stat > table td, +.stat > table th { + border-bottom: 1px solid #ddd; + text-align: center; +} + +/*=== LOGS */ +/*=========*/ +.logs { + border: 1px solid #aaa; + border-radius: 5px; + overflow: hidden; +} +.log { + padding: 5px 10px; + background: #fafafa; + color: #333; + font-size: 90%; +} +.log+.log { + border-top: 1px solid #aaa; +} +.log .date { + display: block; + font-weight: bold; +} +.log.error { + background: #fdd; + color: #844; +} +.log.warning { + background: #ffe; + color: #c95; +} +.log.notice { + background: #f4f4f4; + color: #aaa; +} +.log.debug { + background: #333; + color: #eee; +} + +/*=== MOBILE */ +/*===========*/ +@media(max-width: 840px) { + .aside { + box-shadow: 3px 0 3px #aaa; + transition: width 200ms linear; + -moz-transition: width 200ms linear; + -webkit-transition: width 200ms linear; + -o-transition: width 200ms linear; + -ms-transition: width 200ms linear; + } + .aside .toggle_aside, + #panel .close { + position: absolute; + display: block; + top: 0; right: 0; + width: 30px; + height: 30px; + line-height: 30px; + text-align: center; + background: #f6f6f6; + border-left: 1px solid #ddd; + border-bottom: 1px solid #ddd; + border-radius: 0 0 0 5px; + } + + .nav_menu .btn { + margin: 5px 10px; + } + .nav_menu .stick { + margin: 0 10px; + } + .nav_menu .stick .btn { + margin: 5px 0; + } + .nav_menu .search { + display: inline-block; + max-width: 97%; + } + .nav_menu .search input { + max-width: 97%; + width: 90px; + } + .nav_menu .search input:focus { + width: 400px; + } + + .day .name { + font-size: 1.1rem; + text-shadow: none; + } + + .flux_header .item.website .favicon { + padding: 12px; + } + + .notification a.close { + display: block; + left: 0; + background: transparent; + } + .notification a.close:hover { + opacity: 0.5; + } + .notification a.close .icon { + display: none; + } +} diff --git a/p/themes/Origine/template.css b/p/themes/Origine/template.css new file mode 100644 index 000000000..8b14633b2 --- /dev/null +++ b/p/themes/Origine/template.css @@ -0,0 +1,683 @@ +@charset "UTF-8"; + +/*=== GENERAL */ +/*============*/ +html, body { + margin: 0; + padding: 0; + font-size: 100%; +} + +/*=== Links */ +a { + text-decoration: none; +} +a:hover { + text-decoration: underline; +} + +/*=== Lists */ +ul, ol, dd { + margin: 0; + padding: 0; +} + +/*=== Titles */ +h1 { + margin: 0.6em 0 0.3em; + font-size: 1.8em; +} +h2 { + margin: 0.5em 0 0.25em; + font-size: 1.6em; +} +h3 { + margin: 0.5em 0 0.25em; + font-size: 1.4em; +} + +/*=== Paragraphs */ +p { + margin: 1em 0 0.5em; + font-size: 1em; +} + +/*=== Images */ +img { + height: auto; + max-width: 100%; +} +img.favicon { + height: 16px; + width: 16px; + vertical-align: middle; +} + +/*=== Videos */ +iframe, embed, object, video { + max-width: 100%; +} + +/*=== Forms */ +legend { + display: block; + width: 100%; + clear: both; +} +label { + display: block; +} +input { + width: 180px; +} +textarea { + width: 300px; +} +input, select, textarea { + display: inline-block; + max-width: 100%; +} +input[type="radio"], +input[type="checkbox"] { + width: 15px !important; + min-height: 15px !important; +} +input.extend:focus { + width: 300px; +} + +/*=== COMPONENTS */ +/*===============*/ +/*=== Forms */ +.form-group:after { + content: ""; + display: block; + clear: both; +} +.form-group.form-actions { + min-width: 250px; +} +.form-group .group-name { + display: block; + float: left; + width: 200px; +} +.form-group .group-controls { + min-width: 250px; + margin: 0 0 0 220px; +} +.form-group .group-controls .control { + display: block; +} + +/*=== Buttons */ +.stick { + display: inline-block; + white-space: nowrap; +} +.btn, +a.btn { + display: inline-block; + cursor: pointer; + overflow: hidden; +} +.btn-important { + font-weight: bold; +} + +/*=== Navigation */ +.nav-list .nav-header, +.nav-list .item { + display: block; +} +.nav-list .item, +.nav-list .item > a { + display: block; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; +} +.nav-head { + display: block; +} +.nav-head .item { + display: inline-block; +} + +/*=== Horizontal-list */ +.horizontal-list { + display: table; + table-layout: fixed; + width: 100%; +} +.horizontal-list .item { + display: table-cell; +} + +/*=== Dropdown */ +.dropdown { + position: relative; + display: inline-block; +} +.dropdown-target { + display: none; +} +.dropdown-menu { + display: none; + min-width: 200px; + margin: 0; + position: absolute; + right: 0; + background: #fff; + border: 1px solid #aaa; +} +.dropdown-header { + display: block; +} +.dropdown-menu > .item { + display: block; +} +.dropdown-menu > .item > a { + display: block; +} +.dropdown-menu > .item[aria-checked="true"] > a:before { + content: '✓'; +} +.dropdown-menu .input { + display: block; +} +.dropdown-menu .input select, +.dropdown-menu .input input { + display: block; + max-width: 95%; +} +.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; +} +.separator { + display: block; + height: 0; + border-bottom: 1px solid #aaa; +} + +/*=== Alerts */ +.alert { + display: block; + width: 90%; +} +.alert-head { + margin: 0; + font-weight: bold; +} + +/*=== Icons */ +.icon { + display: inline-block; + width: 16px; + height: 16px; + vertical-align: middle; + line-height: 16px; +} + +/*=== Pagination */ +.pagination { + display: table; + width: 100%; + margin: 0; + padding: 0; + table-layout: fixed; +} +.pagination .item { + display: table-cell; +} +.pagination .pager-first, +.pagination .pager-previous, +.pagination .pager-next, +.pagination .pager-last { + width: 100px; +} + +/*=== STRUCTURE */ +/*===============*/ +/*=== Header */ +.header { + display: table; + width: 100%; + table-layout: fixed; +} +.header > .item { + display: table-cell; +} +.header > .item.title { + width: 250px; + white-space: nowrap; +} +.header > .item.title h1 { + display: inline-block; +} +.header > .item.title .logo { + display: inline-block; + height: 32px; + width: 32px; + vertical-align: middle; +} +.header > .item.configure { + width: 100px; +} + +/*=== Body */ +#global { + display: table; + width: 100%; + height: 100%; + table-layout: fixed; +} +.aside { + display: table-cell; + height: 100%; + width: 250px; + vertical-align: top; +} +.aside.aside_flux { + background: #fff; +} + +/*=== Aside main page (categories) */ +.categories { + list-style: none; + margin: 0; +} +.category { + display: block; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; +} +.category .btn:not([data-unread="0"]):after { + content: attr(data-unread); +} + +/*=== Aside main page (feeds) */ +.categories .feeds { + width: 100%; + list-style: none; +} +.categories .feeds:not(.active) { + display: none; +} +.categories .feeds .feed { + display: inline-block; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + vertical-align: middle; +} +.categories .feeds .feed:not([data-unread="0"]):before { + content: "(" attr(data-unread) ") "; +} +.categories .feeds .dropdown-menu { + left: 0; +} +.categories .feeds .item .dropdown-toggle > .icon { + visibility: hidden; + cursor: pointer; + vertical-align: top; +} +.categories .feeds .item .dropdown-target:target ~ .dropdown-toggle > .icon, +.categories .feeds .item:hover .dropdown-toggle > .icon, +.categories .feeds .item.active .dropdown-toggle > .icon { + visibility: visible; +} + +/*=== New article notification */ +#new-article { + display: none; +} +#new-article > a { + display: block; +} + +/*=== Day indication */ +.day .name { + position: absolute; + right: 0; + width: 50%; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; +} + +/*=== Feed article header and footer */ +.flux_header { + position: relative; +} +.flux .item { + line-height: 40px; + white-space: nowrap; +} +.flux .item.manage, +.flux .item.link { + width: 40px; + text-align: center; +} +.flux .item.website { + width: 200px; +} +.flux.not_read .item.title, +.flux.current .item.title { + font-weight: bold; +} +.flux:not(.current):hover .item.title { + position: absolute; + max-width: calc(100% - 320px); + background: #fff; +} +.flux .item.title a { + color: #000; + text-decoration: none; +} +.flux .item.date { + width: 145px; + text-align: right; +} +.flux .item > a { + display: block; +} +.flux .item > a { + display: block; + text-decoration: none; + white-space: nowrap; + text-overflow: ellipsis; + overflow: hidden; +} +.flux .item.share > a { + display: list-item; + list-style-position: inside; + list-style-type: decimal; +} + +/*=== Feed article content */ +.hide_posts > .flux:not(.active) > .flux_content { + display: none; +} +.content { + min-height: 20em; + margin: auto; + line-height: 1.7em; + word-wrap: break-word; +} +.content.large { + max-width: 1000px; +} +.content.medium { + max-width: 800px; +} +.content.thin { + max-width: 550px; +} +.content ul, +.content ol, +.content dd { + margin: 0 0 0 15px; + padding: 0 0 5px 15px; +} +.content pre { + overflow: auto; +} + +/*=== Notification and actualize notification */ +.notification { + position: absolute; + top: 1em; + left: 25%; right: 25%; + z-index: 10; + background: #fff; + border: 1px solid #aaa; +} +.notification.closed { + display: none; +} +.notification a.close { + position: absolute; + top: 0; bottom: 0; + right: 0; + display: inline-block; +} + +#actualizeProgress { + position: fixed; +} +#actualizeProgress progress { + max-width: 100%; + vertical-align: middle; +} +#actualizeProgress .progress { + vertical-align: middle; +} + +/*=== Navigation menu (for articles) */ +#nav_entries { + position: fixed; + bottom: 0; left: 0; + display: table; + width: 250px; + background: #fff; + table-layout: fixed; +} +#nav_entries .item { + display: table-cell; + width: 30%; +} +#nav_entries a { + display: block; +} + +/*=== "Load more" part */ +#load_more { + min-height: 40px; +} +.loading { + background: url("loader.gif") center center no-repeat; + font-size: 0; +} +#bigMarkAsRead { + display: block; + padding: 3em 0; + text-align: center; +} +.bigTick { + font-size: 7em; + line-height: 1.6em; +} + +/*=== Statistiques */ +.stat > table { + width: 100%; +} + +/*=== GLOBAL VIEW */ +/*================*/ +/*=== Category boxes */ +#stream.global .box-category { + display: inline-block; + width: 19em; + max-width: 95%; + margin: 20px 10px; + border: 1px solid #ccc; + vertical-align: top; +} +#stream.global .category { + width: 100%; +} +#stream.global .btn { + display: block; +} +#stream.global .box-category .feeds { + display: block; + overflow: auto; +} +#stream.global .box-category .feed { + width: 19em; + max-width: 90%; +} + +/*=== Panel */ +#overlay { + display: none; + position: fixed; + top: 0; bottom: 0; + left: 0; right: 0; + background: rgba(0, 0, 0, 0.9); +} +#panel { + display: none; + position: fixed; + top: 1em; bottom: 1em; + left: 2em; right: 2em; + overflow: auto; + background: #fff; +} +#panel .close { + position: fixed; + top: 0; bottom: 0; + left: 0; right: 0; + display: block; +} +#panel .close img { + display: none; +} + +/*=== DIVERS */ +/*===========*/ +.nav-login, +.nav_menu .search, +.nav_menu .toggle_aside { + display: none; +} + +.aside .toggle_aside { + position: absolute; + right: 0; + display: none; + width: 30px; + height: 30px; + line-height: 30px; + text-align: center; +} + +/*=== MOBILE */ +/*===========*/ +@media(max-width: 840px) { + .header, + .aside .btn-important, + .aside .feeds .dropdown, + .flux_header .item.website span, + .item.date, .day .date { + display: none; + } + .nav-login { + display: block; + } + .nav_menu .toggle_aside, + .aside .toggle_aside, + .nav_menu .search, + #panel .close img { + display: inline-block; + } + + .aside { + position: fixed; + top: 0; bottom: 0; + left: 0; + width: 0; + overflow: hidden; + z-index: 100; + } + .aside:target { + width: 90%; + overflow: auto; + } + .aside .categories { + margin: 10px 0 75px; + } + + .flux_header .item.website { + width: 40px; + } + + .flux:not(.current):hover .item.title { + position: relative; + width: auto; + white-space: nowrap; + } + + .notification { + top: 0; + left: 0; + right: 0; + } + + #nav_entries { + width: 100%; + } + + #stream.global .box-category { + margin: 10px 0; + } + + #panel { + top: 0; bottom: 0; + left: 0; right: 0; + } + #panel .close { + top: 0; right: 0; + left: auto; bottom: auto; + display: inline-block; + width: 30px; + height: 30px; + } +} + +/*=== PRINTER */ +/*============*/ +@media print { + .header, .aside, + .nav_menu, .day, + .flux_header, + .flux_content .bottom, + .pagination, + #nav_entries { + display: none; + } + html, body { + background: #fff; + color: #000; + font-family: Serif; + } + #global, + .flux_content { + display: block !important; + } + .flux_content .content { + width: 100% !important; + } + .flux_content .content a { + color: #000; + } + .flux_content .content a:after { + content: " [" attr(href) "] "; + font-style: italic; + } +} |
