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