@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.5em; line-height: 1.6em; } h2 { margin: 0.5em 0 0.25em; font-size: 1.3em; line-height: 2em; } h3 { margin: 0.5em 0 0.25em; font-size: 1.1em; line-height: 2em; } /*=== Paragraphs */ p { margin: 1em 0 0.5em; font-size: 1em; } sup { line-height: 25px; position: relative; top: -0.8em; vertical-align: baseline; } /*=== 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, input[type="file"], input.long, input.extend:focus { width: 300px; } input, select, textarea { display: inline-block; max-width: 100%; font-size: initial; } input[type="radio"], input[type="checkbox"] { width: 15px !important; min-height: 15px !important; } button.as-link, button.as-link:hover, button.as-link:active { background: transparent; border: none; color: inherit; cursor: pointer; font-size: 1.1em; text-align: left; } /*=== Tables */ table { max-width: 100%; } th.numeric, td.numeric { text-align: center; } /*=== COMPONENTS */ /*===============*/ [aria-hidden="true"] { display: none; } /*=== 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; vertical-align: middle; } .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, .dropdown-menu > .item > .as-link, .dropdown-menu > .item > span { display: block; min-width: 200px; } .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%; } .group-controls .alert { width: 100% } .alert-head { margin: 0; font-weight: bold; } .alert ul { margin: 5px 20px; } /*=== 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; } /*=== Boxes */ .box { display: inline-block; width: 20rem; max-width: 95%; margin: 20px 10px; border: 1px solid #ccc; vertical-align: top; } .box .box-title { position: relative; font-size: 1.2rem; font-weight: bold; text-align: center; } .box .box-title a { display: block; } .box .box-title form { margin: 0; } .box .box-content { display: block; overflow: auto; } .box .box-content .item { display: block; } .box .box-content .item.disabled { text-align: center; font-style: italic; } .box .box-content-centered { padding: 30px 5px; text-align: center; } .box .box-content-centered .btn { margin: 20px 0 0; } /*=== Draggable */ .drag-hover { margin: 0 0 5px; border-bottom: 2px solid #ccc; } [draggable=true] { cursor: grab; } /*=== Tree */ .tree { margin: 0; padding: 0; list-style: none; text-align: left; } .tree-folder-items { padding: 0; list-style: none; } .tree-folder-title { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .tree-folder-title .title { display: inline-block; width: 100%; vertical-align: middle; } .tree-folder-items > .item { display: block; white-space: nowrap; } .tree-folder-items > .item > a { display: inline-block; vertical-align: middle; width: calc(100% - 32px); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } /*=== 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: 300px; vertical-align: top; } /*=== Aside main page */ .aside_feed .category .title { width: calc(100% - 35px); } .aside_feed .tree-folder-title .icon { padding: 5px; } .aside_feed .tree-folder-items .item.feed { padding: 0px 15px; } .aside_feed .tree-folder-items:not(.active) { display: none; } .aside_feed .tree-folder-items .dropdown { vertical-align: top; } .aside_feed .tree-folder-items .dropdown-menu { left: 0; } .aside_feed .tree-folder-items .item .dropdown-toggle > .icon { visibility: hidden; cursor: pointer; } .aside_feed .tree-folder-items .item .dropdown-target:target ~ .dropdown-toggle > .icon, .aside_feed .tree-folder-items .item:hover .dropdown-toggle > .icon, .aside_feed .tree-folder-items .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: 155px; text-align: right; overflow: hidden; } .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, .item.query > 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; } br { line-height: 1em; } br + br + br { display: none; } /*=== 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: 300px; 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; width: 100%; padding: 1em 0; text-align: center; font-size: 1.4em; } .bigTick { font-size: 4em; } /*=== Statistiques */ .stat { margin: 15px 0; } .stat.half { display: inline-block; width: 46%; padding: 0 2%; } .stat > table { width: 100%; } .statGraph { height: 300px; } /*=== GLOBAL VIEW */ /*================*/ #stream.global { text-align: center; } #stream.global .box { text-align: left; } /*=== 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; } #overlay .close { position: fixed; top: 0; bottom: 0; left: 0; right: 0; display: block; } #overlay .close img { display: none; } /*=== Slider */ #slider { position: fixed; top: 0; bottom: 0; left: 100%; right: 0; overflow: auto; background: #fff; border-left: 1px solid #aaa; transition: left 200ms linear; -moz-transition: left 200ms linear; -webkit-transition: left 200ms linear; -o-transition: left 200ms linear; -ms-transition: left 200ms linear; } #slider.active { left: 40%; } #close-slider { position: fixed; top: 0; bottom: 0; left: 100%; right: 0; cursor: pointer; } #close-slider.active { left: 0; } /*=== SLIDESHOW */ /*==============*/ .slides { padding: 0; height: 320px; display: block; position: relative; min-width: 260px; max-width: 640px; margin-bottom: 30px; border: 1px solid #aaa; } .slides input { display: none; } .slide-container { display: block; } .slide { top: 0; opacity: 0; width: 100%; height: 100%; display: block; position: absolute; transform: scale(0); transition: all .7s ease-in-out; } .slide img { width: 100%; height: 100%; } .nav label { width: 10%; height: 100%; display: none; position: absolute; opacity: 0; z-index: 9; cursor: pointer; transition: opacity .2s; color: #FFF; font-size: 1000%; text-align: center; line-height: 225%; font-family: "Varela Round", sans-serif; background-color: rgba(255, 255, 255, .3); text-shadow: 0px 0px 15px rgb(119, 119, 119); padding: 0; } .properties { display: none; bottom: 0; left: 0; right: 0; position: absolute; padding: 5px; background: rgba(255, 255, 255, 0.7); color: #000; border-top: 1px solid #aaa; z-index: 10; } .properties .page-number { right: 5px; top: 0; position: absolute; } .slide:hover + .nav label { opacity: 0.5; } .nav label:hover { opacity: 1; } .nav .next { right: 0; } input:checked + .slide-container .slide { opacity: 1; transform: scale(1); transition: opacity 1s ease-in-out; } input:checked + .slide-container .nav label { display: block; } input:checked + .slide-container .properties { display: block; } /*=== DIVERS */ /*===========*/ .category .title:not([data-unread="0"])::after { content: attr(data-unread); } .category .title.error::before { content: "⚠ "; color: #bd362f; } .feed .item-title:not([data-unread="0"])::before { content: "(" attr(data-unread) ") "; } .feed .item-title:not([data-unread="0"]) { font-weight: bold; } .state_unread .category:not(.active)[data-unread="0"], .state_unread .feed:not(.active)[data-unread="0"] { display: none; } .nav-login, .nav_menu .search, .aside .toggle_aside, .nav_menu .toggle_aside { display: none; } .enclosure > [download] { font-size: xx-large; margin-left: .8em; } /*=== MOBILE */ /*===========*/ @media(max-width: 840px) { .header, .aside .btn-important, .flux_header .item.website span, .item.date, .day .date, .dropdown-menu > .no-mobile, .no-mobile { display: none; } .aside .toggle_aside, .nav-login { display: block; } .nav_menu .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; } .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%; } #panel { top: 25px; bottom: 30px; 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; } }