diff options
Diffstat (limited to 'p/themes')
| -rw-r--r-- | p/themes/BlueLagoon/BlueLagoon.css | 31 | ||||
| -rw-r--r-- | p/themes/BlueLagoon/icons/icon.svg | 2 | ||||
| -rw-r--r-- | p/themes/BlueLagoon/template.css | 696 | ||||
| -rw-r--r-- | p/themes/Dark/dark.css | 18 | ||||
| -rw-r--r-- | p/themes/Flat/flat.css | 18 | ||||
| -rw-r--r-- | p/themes/Origine-compact/origine-compact.css | 5 | ||||
| -rw-r--r-- | p/themes/Screwdriver/icons/icon.svg | 2 | ||||
| -rw-r--r-- | p/themes/Screwdriver/screwdriver.css | 18 | ||||
| -rw-r--r-- | p/themes/Swage/swage.css | 1280 | ||||
| -rw-r--r-- | p/themes/Swage/swage.scss | 91 | ||||
| -rw-r--r-- | p/themes/base-theme/template.css | 97 |
11 files changed, 848 insertions, 1410 deletions
diff --git a/p/themes/BlueLagoon/BlueLagoon.css b/p/themes/BlueLagoon/BlueLagoon.css index 164088f4b..94eb8e3a8 100644 --- a/p/themes/BlueLagoon/BlueLagoon.css +++ b/p/themes/BlueLagoon/BlueLagoon.css @@ -137,8 +137,6 @@ button.as-link[disabled] { .stick .btn:first-child,.stick input:first-child { border-radius: 6px 0 0 6px; } -.stick .btn-important:first-child { -} .stick .btn:last-child, .stick input:last-child { border-radius: 0 6px 6px 0; } @@ -566,11 +564,29 @@ a.btn { color: #0090FF } +/*=== Scrollbar */ + +@supports (scrollbar-width: thin) { + #sidebar { + scrollbar-color: rgba(255, 255, 255, 0.05) rgba(0, 0, 0, 0.0); + } + #sidebar:hover { + scrollbar-color: rgba(255, 255, 255, 0.3) rgba(0, 0, 0, 0.0); + } +} +@supports not (scrollbar-width: thin) { + #sidebar::-webkit-scrollbar-thumb { + background: rgba(255, 255, 255, 0.1); + } + #sidebar:hover::-webkit-scrollbar-thumb { + background: rgba(255, 255, 255, 0.3); + } +} + /*=== STRUCTURE */ /*===============*/ /*=== Header */ .header { - height: 55px; background: linear-gradient(0deg, #EDE7DE 0%, #FFF 100%) #EDE7DE; background: -webkit-linear-gradient(bottom, #EDE7DE 0%, #FFF 100%); border-bottom: solid 1px #BDB7AE; @@ -582,14 +598,14 @@ a.btn { text-align: center; } .header > .item.title .logo { - height: 60px; - width: 60px; + height: 40px; + width: 40px; } .header > .item.title{ width: 250px; } .header > .item.title h1 { - margin: 0.5em 0; + margin: 10px 0; } .header > .item.title h1 a { text-decoration: none; @@ -607,7 +623,8 @@ a.btn { /*=== Body */ #global { background:#F9F7F4; - height: calc(100% - 60px); + /* Header : 60px + 1px border bottom */ + height: calc(100% - 61px); } .aside { box-shadow: 0 2px 2px #171717 inset; diff --git a/p/themes/BlueLagoon/icons/icon.svg b/p/themes/BlueLagoon/icons/icon.svg index 8abfea179..777e85de1 100644 --- a/p/themes/BlueLagoon/icons/icon.svg +++ b/p/themes/BlueLagoon/icons/icon.svg @@ -1,5 +1,5 @@ <!-- Created with Inkscape (http://www.inkscape.org/) --> -<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> +<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 59.4 59.7"> <defs> <linearGradient id="linearGradient3796"> <stop stop-color="#0090ff" offset="0"/> diff --git a/p/themes/BlueLagoon/template.css b/p/themes/BlueLagoon/template.css deleted file mode 100644 index 4bc0fb735..000000000 --- a/p/themes/BlueLagoon/template.css +++ /dev/null @@ -1,696 +0,0 @@ -@charset "UTF-8"; - -/*=== GENERAL */ -/*============*/ -html, body { - margin: 0; - padding: 0; - font-size: 92%; -} - -/*=== 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; -} - -/*=== 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%; - font-size: 0.8rem; -} -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, -.dropdown-menu > .item > span { - 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%; -} -.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; -} - -/*=== 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, - .dropdown-menu > .no-mobile, - .no-mobile { - 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; - } -} diff --git a/p/themes/Dark/dark.css b/p/themes/Dark/dark.css index 31ff514a2..28ea253ff 100644 --- a/p/themes/Dark/dark.css +++ b/p/themes/Dark/dark.css @@ -502,6 +502,24 @@ a.btn { color: #888; } +/*=== Scrollbar */ +@supports (scrollbar-width: thin) { + #sidebar { + scrollbar-color: rgba(255, 255, 255, 0.05) rgba(0, 0, 0, 0.0); + } + #sidebar:hover { + scrollbar-color: rgba(255, 255, 255, 0.3) rgba(0, 0, 0, 0.0); + } +} +@supports not (scrollbar-width: thin) { + #sidebar::-webkit-scrollbar-thumb { + background: rgba(255, 255, 255, 0.1); + } + #sidebar:hover::-webkit-scrollbar-thumb { + background: rgba(255, 255, 255, 0.3); + } +} + /*=== STRUCTURE */ /*===============*/ /*=== Header */ diff --git a/p/themes/Flat/flat.css b/p/themes/Flat/flat.css index be047a394..1c5c3e795 100644 --- a/p/themes/Flat/flat.css +++ b/p/themes/Flat/flat.css @@ -505,6 +505,24 @@ a.btn { color: #fff; } +/*=== Scrollbar */ +@supports (scrollbar-width: thin) { + #sidebar { + scrollbar-color: rgba(255, 255, 255, 0.05) rgba(0, 0, 0, 0.0); + } + #sidebar:hover { + scrollbar-color: rgba(255, 255, 255, 0.3) rgba(0, 0, 0, 0.0); + } +} +@supports not (scrollbar-width: thin) { + #sidebar::-webkit-scrollbar-thumb { + background: rgba(255, 255, 255, 0.1); + } + #sidebar:hover::-webkit-scrollbar-thumb { + background: rgba(255, 255, 255, 0.3); + } +} + /*=== STRUCTURE */ /*===============*/ /*=== Header */ diff --git a/p/themes/Origine-compact/origine-compact.css b/p/themes/Origine-compact/origine-compact.css index 26129415a..11f3b3b25 100644 --- a/p/themes/Origine-compact/origine-compact.css +++ b/p/themes/Origine-compact/origine-compact.css @@ -167,7 +167,8 @@ form th { cursor: pointer; overflow: hidden; } -a.btn { +a.btn, +.stick .btn { min-height: 20px; line-height: 20px; } @@ -571,7 +572,7 @@ a.btn { .header > .item.search input { width: 230px; - padding: 1px 5px 0px 5px; + padding: 1px 5px; } .header .item.search input:focus { width: 350px; diff --git a/p/themes/Screwdriver/icons/icon.svg b/p/themes/Screwdriver/icons/icon.svg index 268814463..b388fa5d3 100644 --- a/p/themes/Screwdriver/icons/icon.svg +++ b/p/themes/Screwdriver/icons/icon.svg @@ -1,4 +1,4 @@ -<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> +<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 57.9 58.2"> <defs> <linearGradient id="linearGradient4149"> <stop stop-color="#d18114" offset="0"/> diff --git a/p/themes/Screwdriver/screwdriver.css b/p/themes/Screwdriver/screwdriver.css index 1bc49c2db..2576c485f 100644 --- a/p/themes/Screwdriver/screwdriver.css +++ b/p/themes/Screwdriver/screwdriver.css @@ -559,6 +559,24 @@ a.btn { .tree-folder-items > .item.active > a { } +/*=== Scrollbar */ +@supports (scrollbar-width: thin) { + #sidebar { + scrollbar-color: rgba(255, 255, 255, 0.05) rgba(0, 0, 0, 0.0); + } + #sidebar:hover { + scrollbar-color: rgba(255, 255, 255, 0.3) rgba(0, 0, 0, 0.0); + } +} +@supports not (scrollbar-width: thin) { + #sidebar::-webkit-scrollbar-thumb { + background: rgba(255, 255, 255, 0.1); + } + #sidebar:hover::-webkit-scrollbar-thumb { + background: rgba(255, 255, 255, 0.3); + } +} + /*=== STRUCTURE */ /*===============*/ /*=== Header */ diff --git a/p/themes/Swage/swage.css b/p/themes/Swage/swage.css index 5cab13bd7..24a3ccbed 100644 --- a/p/themes/Swage/swage.css +++ b/p/themes/Swage/swage.css @@ -1,1211 +1,1127 @@ -textarea,input,select { -min-height:25px; -margin-top:4px; -line-height:25px; -vertical-align:middle; -background:#FCFCFC; -border:none; -padding-left:5px +textarea, input, select { +min-height: 25px; +margin-top: 4px; +line-height: 25px; +vertical-align: middle; +background: #FCFCFC; +border: none; +padding-left: 5px; } -input:invalid,select:invalid { -color:#B0425B; -border-color:#B0425B; -box-shadow:none +input:invalid, select:invalid { +color: #B0425B; +border-color: #B0425B; +box-shadow: none; } -.nav-list .nav-header,.nav-list .item { -height:2.5em; -line-height:2.5em; -font-size:.9rem +.nav-list .nav-header, .nav-list .item { +height: 2.5em; +line-height: 2.5em; +font-size: 0.9rem; } -.dropdown-menu > .item,.dropdown-menu > .item > a,.dropdown-menu > .item > span,.dropdown-menu > .item > as-link,.dropdown-menu > .item button { -padding:0 22px; -line-height:2.5em; -font-size:.8rem; -color:#FCFCFC +.dropdown-menu > .item, .dropdown-menu > .item > a, .dropdown-menu > .item > span, .dropdown-menu > .item > as-link, .dropdown-menu > .item button { +padding: 0 22px; +line-height: 2.5em; +font-size: 0.8rem; +color: #FCFCFC; } -.form-group::after,.flux::after { -content:""; -display:block; -clear:both +.form-group::after, .flux::after { +content: ""; +display: block; +clear: both; } -html,body { -height:100%; -font-family:Helvetica,Arial,sans-serif +.stick.configure-feeds, .header > .item.title, .aside, #new-article, .notification, #nav_entries { +width: 231px; } -a { -color:#00488b; -outline:none +html, body { +height: 100%; +font-family: Helvetica, Arial, sans-serif; } +a { +color: #00488b; +outline: none; +} a.btn { -min-height:25px; -line-height:25px; -text-decoration:none +min-height: 25px; +line-height: 25px; +text-decoration: none; } - a.btn:hover { -background:#00488b +background: #00488b; +} +a#btn-subscription { +width: 76%; +} +a#btn-importExport { +width: 5%; } img.icon:hover { -background:none +background: none; } div#stream { -margin-top:35px +margin-top: 35px; } sup { -top:-.3em +top: -0.3em; } legend { -display:inline-block; -width:auto; -margin:20px 0 5px; -padding:5px 20px; -font-size:1.4em; -clear:both; -background:#e3e3e3 +display: inline-block; +width: auto; +margin: 20px 0 5px; +padding: 5px 20px; +font-size: 1.4em; +clear: both; +background: #e3e3e3; } label { -min-height:25px +min-height: 25px; } textarea { -width:360px; -height:100px; -background:#e3e3e3 +width: 360px; +height: 100px; +background: #e3e3e3; } - textarea:focus { -border-color:#00488b +border-color: #00488b; } -input:focus,select:focus { -border-color:#00488b +input:focus, select:focus { +border-color: #00488b; } - -input:disabled,select:disabled { -background:#FCFCFC +input:disabled, select:disabled { +background: #FCFCFC; } select { -background:#e3e3e3 +background: #e3e3e3; } input.extend { -transition:width 200ms linear +transition: width 200ms linear; } option { -padding:0 .5em +padding: 0 .5em; } table { -border-collapse:collapse +border-collapse: collapse; } -tr,td,th { -padding:.5em; -border:1px solid #e3e3e3 +tr, td, th { +padding: 0.5em; +border: 1px solid #e3e3e3; } th { -background:#FCFCFC +background: #FCFCFC; } -form td,form th { -font-weight:400; -text-align:center +form td, form th { +font-weight: normal; +text-align: center; } .category .title.error::before { -display:inline-block; -padding-right:7px; -width:16px; -content:url(../Swage/icons/error.svg) +display: inline-block; +padding-right: 7px; +width: 16px; +content: url(../Swage/icons/error.svg); } .form-group { -padding:5px; -border:1px solid transparent +padding: 5px; +border: 1px solid transparent; } - .form-group:hover { -background:#FCFCFC; -border:1px solid #FCFCFC +background: #FCFCFC; +border: 1px solid #FCFCFC; } - .form-group.form-actions { -margin:15px 0 25px; -padding:5px 0; -background:#e3e3e3; -border-top:3px solid #e3e3e3 +margin: 15px 0 25px; +padding: 5px 0; +background: #e3e3e3; +border-top: 3px solid #e3e3e3; } - .form-group.form-actions .btn { -margin:0 10px +margin: 0 10px; } - .form-group .group-name { -padding:10px 0; -text-align:right +padding: 10px 0; +text-align: right; } - .form-group .group-controls { -min-height:25px; -padding:5px 0 +min-height: 25px; +padding: 5px 0; } - .form-group .group-controls .control { -line-height:2em +line-height: 2.0em; } - .form-group table { -margin:10px 0 0 220px +margin: 10px 0 0 220px; } .stick { -vertical-align:middle; -font-size:0 +vertical-align: middle; +font-size: 0; } .btn { -display:inline-block; -min-height:35px; -min-width:15px; -margin:0; -padding:5px 10px; -font-size:.9rem; -vertical-align:middle; -cursor:pointer; -overflow:hidden; -background:#0062be; -border:none; -color:#FCFCFC +display: inline-block; +min-height: 35px; +min-width: 15px; +margin: 0; +padding: 5px 10px; +font-size: 0.9rem; +vertical-align: middle; +cursor: pointer; +overflow: hidden; +background: #0062be; +border: none; +color: #FCFCFC; } - -.btn.active,.btn :active,.btn :hover { -background:#00488b; -text-decoration:none +.btn.active, .btn :active, .btn :hover { +background: #00488b; +text-decoration: none; } -.btn-important,.btn-attention { -font-weight:400; -background:#FA8052; -color:#FCFCFC +.btn-important, .btn-attention { +font-weight: normal; +background: #FA8052; +color: #FCFCFC; } - -.btn-important:hover,.btn-important :active,.btn-attention:hover,.btn-attention :active { -background:#f95c20!important +.btn-important:hover, .btn-important :active, .btn-attention:hover, .btn-attention :active { +background: #f95c20 !important; } .nav-list .nav-header { -padding:0 10px; -font-weight:700; -background:#22303d; -color:#FCFCFC; -cursor:default +padding: 0 10px; +font-weight: bold; +background: #22303d; +color: #FCFCFC; +cursor: default; } - -.nav-list .item:hover,.nav-list .item .active { -background:#00488b; -color:#FCFCFC +.nav-list .item:hover, .nav-list .item.active { +background: #00488b; +color: #FCFCFC; } - -.nav-list .item:hover a,.nav-list .item .active a { -color:#FCFCFC +.nav-list .item:hover a, .nav-list .item.active a { +color: #FCFCFC; } - -.nav-list .item:hover.empty a,.nav-list .item:hover .error a,.nav-list .item .active.empty a,.nav-list .item .active .error a { -color:#FCFCFC +.nav-list .item:hover.empty a, .nav-list .item:hover .error a, .nav-list .item.active.empty a, .nav-list .item.active .error a { +color: #FCFCFC; } - -.nav-list .item:hover.empty a,.nav-list .item .active.empty a { -background:#FA8052 +.nav-list .item:hover.empty a, .nav-list .item.active.empty a { +background: #FA8052; } - -.nav-list .item:hover.error a,.nav-list .item .active.error a { -background:#c46178 +.nav-list .item:hover.error a, .nav-list .item.active.error a { +background: #c46178; } - .nav-list .item > a { -padding:0 10px +padding: 0 10px; } - .nav-list .item.empty a { -color:#FA8052 +color: #FA8052; } - .nav-list .item.error a { -color:#c46178 +color: #c46178; } - .nav-list .disable { -text-align:center; -background:#FCFCFC; -color:#969696 +text-align: center; +background: #FCFCFC; +color: #969696; } - .nav-list .nav-form { -padding:3px; -text-align:center +padding: 3px; +text-align: center; } - .nav-list a:hover { -text-decoration:none +text-decoration: none; } .nav-head { -margin:0; -text-align:right; -background:#22303d; -color:#FCFCFC +margin: 0; +text-align: right; +background: #22303d; +color: #FCFCFC; } - .nav-head a { -color:#FCFCFC +color: #FCFCFC; } - .nav-head .item { -padding:5px 10px; -font-size:.9rem; -line-height:1.5rem +padding: 5px 10px; +font-size: 0.9rem; +line-height: 1.5rem; } .horizontal-list { -margin:0; -padding:0 +margin: 0; +padding: 0; } - .horizontal-list .item { -vertical-align:middle +vertical-align: middle; } .dropdown-menu { -padding:5px 0; -font-size:.8rem; -text-align:left; -border:none; -background-color:#00488b +padding: 5px 0; +font-size: 0.8rem; +text-align: left; +border: none; +background-color: #00488b; } - .dropdown-menu .dropdown-header { -cursor:default +cursor: default; } - .dropdown-menu > .item { -padding:0; -margin-left:10px +padding: 0; +margin-left: 10px; } - .dropdown-menu > .item > a { -min-width:initial; -white-space:nowrap +min-width: initial; +white-space: nowrap; } - .dropdown-menu > .item:hover { -background:#0062be; -color:#FCFCFC +background: #0062be; +color: #FCFCFC; } - .dropdown-menu > .item:hover > a { -text-decoration:none; -color:#FCFCFC +text-decoration: none; +color: #FCFCFC; } - .dropdown-menu > .item[aria-checked="true"] > a::before { -font-weight:700; -margin:0 0 0 -14px +font-weight: bold; +margin: 0 0 0 -14px; } - -.dropdown-menu .input select,.dropdown-menu .input input { -margin:0 auto 5px; -padding:2px 5px +.dropdown-menu .input select, .dropdown-menu .input input { +margin: 0 auto 5px; +padding: 2px 5px; } .dropdown-header { -padding:0 5px 5px; -font-weight:700; -text-align:left; -color:#FCFCFC +padding: 0 5px 5px; +font-weight: bold; +text-align: left; +color: #FCFCFC; } .separator { -margin:5px 0; -border-bottom:1px solid #e3e3e3; -cursor:default +margin: 5px 0; +border-bottom: 1px solid #e3e3e3; +cursor: default; } .alert { -margin:5px auto; -padding:10px 15px; -font-size:.9em; -background:#FCFCFC; -border:none; -color:#969696; -text-shadow:0 0 1px #FCFCFC +margin: 5px auto; +padding: 10px 15px; +font-size: 0.9em; +background: #FCFCFC; +border: none; +color: #969696; +text-shadow: 0 0 1px #FCFCFC; } - .alert > a { -text-decoration:underline; -color:inherit +text-decoration: underline; +color: inherit; } .alert-head { -font-size:1.15em +font-size: 1.15em; } -.alert-warn,.alert-success,.alert-error { -border:none +.alert-warn, .alert-success, .alert-error { +border: none; } .alert-warn { -background:#FCFCFC; -color:#FA8052 +background: #FCFCFC; +color: #FA8052; } .alert-success { -background:#FCFCFC; -color:#5EAABF +background: #FCFCFC; +color: #5EAABF; } .alert-error { -background:#FCFCFC; -color:#B0425B +background: #FCFCFC; +color: #B0425B; } .pagination { -text-align:center; -font-size:.8em; -background:#e3e3e3; -color:#181621 +text-align: center; +font-size: 0.8em; +background: #e3e3e3; +color: #181621; } - .pagination .item.pager-current { -font-weight:700; -font-size:1.5em; -background:#22303d; -color:#e3e3e3 +font-weight: bold; +font-size: 1.5em; +background: #22303d; +color: #e3e3e3; } - .pagination .item a { -display:block; -font-style:italic; -line-height:3em; -text-decoration:none; -color:#181621 +display: block; +font-style: italic; +line-height: 3em; +text-decoration: none; +color: #181621; } - .pagination .item a:hover { -background:#22303d; -color:#e3e3e3 +background: #22303d; +color: #e3e3e3; } - -.pagination .loading,.pagination a:hover.loading { -font-size:0; -background:url(loader.gif) center center no-repeat #22303d +.pagination .loading, .pagination a:hover.loading { +font-size: 0; +background: url(loader.gif) center center no-repeat #22303d; } .content { -padding:20px 10px +padding: 20px 10px; } - .content .pagination { -margin:0; -padding:0 +margin: 0; +padding: 0; } - .content hr { -margin:30px 10px; -height:1px; -background:#e3e3e3; -border:0; -box-shadow:0 2px 5px #e3e3e3 +margin: 30px 10px; +height: 1px; +background: #e3e3e3; +border: 0; +box-shadow: 0 2px 5px #e3e3e3; } - .content pre { -margin:10px auto; -padding:10px 20px; -overflow:auto; -background:#181621; -color:#FCFCFC; -font-size:.9rem +margin: 10px auto; +padding: 10px 20px; +overflow: auto; +background: #181621; +color: #FCFCFC; +font-size: 0.9rem; } - .content pre code { -background:transparent; -color:#FCFCFC; -border:none +background: transparent; +color: #FCFCFC; +border: none; } - .content code { -padding:2px 5px; -color:#B0425B; -background:#FCFCFC; -border:1px solid #FCFCFC +padding: 2px 5px; +color: #B0425B; +background: #FCFCFC; +border: 1px solid #FCFCFC; } - .content blockquote { -display:block; -margin:0; -padding:5px 20px; -border-top:1px solid #e3e3e3; -border-bottom:1px solid #e3e3e3; -background:#FCFCFC; -color:#969696 +display: block; +margin: 0; +padding: 5px 20px; +border-top: 1px solid #e3e3e3; +border-bottom: 1px solid #e3e3e3; +background: #FCFCFC; +color: #969696; } - .content blockquote p { -margin:0 +margin: 0; } - .content > h1.title > a { -color:#181621 +color: #181621; } .box { -border:1px solid #e3e3e3 +border: 1px solid #e3e3e3; } - .box .box-title { -margin:0; -padding:5px 10px; -background:#e3e3e3; -color:#969696; -border-bottom:1px solid #e3e3e3 +margin: 0; +padding: 5px 10px; +background: #e3e3e3; +color: #969696; +border-bottom: 1px solid #e3e3e3; } - .box .box-content { -max-height:260px +max-height: 260px; } - .box .box-content .item { -padding:0 10px; -font-size:.9rem; -line-height:2.5em +padding: 0 10px; +font-size: 0.9rem; +line-height: 2.5em; } - .box .box-content .item .configure { -visibility:hidden +visibility: hidden; } - .box .box-content .item .configure .icon { -vertical-align:middle; -background-color:#e3e3e3 +vertical-align: middle; +background-color: #e3e3e3; } - .box .box-content .item:hover .configure { -visibility:visible +visibility: visible; } - .box.category .box-title .title { -font-weight:400; -text-decoration:none; -text-align:left +font-weight: normal; +text-decoration: none; +text-align: left; } - .box.category:not([data-unread="0"]) .box-title { -background:#0062be +background: #0062be; } - .box.category:not([data-unread="0"]) .box-title:active { -background:#00488b +background: #00488b; } - .box.category:not([data-unread="0"]) .box-title .title { -font-weight:700; -color:#FCFCFC +font-weight: bold; +color: #FCFCFC; } - .box.category .title:not([data-unread="0"])::after { -position:absolute; -top:5px; -right:10px; -border:0; -background:none; -font-weight:700; -box-shadow:none; -text-shadow:none +position: absolute; +top: 5px; +right: 10px; +border: 0; +background: none; +font-weight: bold; +box-shadow: none; +text-shadow: none; } - .box.category .item.feed { -padding:2px 10px; -font-size:.8rem +padding: 2px 10px; +font-size: 0.8rem; } .tree { -margin:10px 0 +margin: 10px 0; } .tree-folder-title { -position:relative; -padding:0 10px; -background:#22303d; -line-height:2.3rem; -font-size:1rem; -height:35px +position: relative; +padding: 0 10px; +background: #22303d; +line-height: 2.3rem; +font-size: 1rem; +height: 35px; } - .tree-folder-title .title { -background:inherit; -color:#FCFCFC +background: inherit; +color: #FCFCFC; } - .tree-folder-title .title:hover { -text-decoration:none +text-decoration: none; } .tree-folder-items { -background:#22303d +background: #22303d; } - .tree-folder-items > .item { -padding:0 10px; -line-height:2.5rem; -font-size:.8rem +padding: 0 10px; +line-height: 2.5rem; +font-size: 0.8rem; } - .tree-folder-items > .item.active { -background:#00488b +background: #00488b; } - .tree-folder-items > .item > a { -text-decoration:none; -color:#FCFCFC +text-decoration: none; +color: #FCFCFC; } -.header > .item { -vertical-align:middle +@supports (scrollbar-width: thin) { + #sidebar { +scrollbar-color: rgba(255, 255, 255, 0.05) rgba(0, 0, 0, 0.0); +} +#sidebar:hover { +scrollbar-color: rgba(255, 255, 255, 0.3) rgba(0, 0, 0, 0.0); +} } -.header > .item.title { -width:231px; -position:absolute +@supports not (scrollbar-width: thin) { +#sidebar::-webkit-scrollbar-thumb { +background: rgba(255, 255, 255, 0.1); +} +#sidebar:hover::-webkit-scrollbar-thumb { +background: rgba(255, 255, 255, 0.3); +} } +.header > .item { +vertical-align: middle; +} +.header > .item.title { +position: absolute; +} .header > .item.title h1 { -margin:0; -display:block +margin: 0; +display: block; } - .header > .item.title h1 a { -text-decoration:none; -color:#FCFCFC +text-decoration: none; +color: #FCFCFC; } - .header > .item.title .logo { -display:inline-block; -height:26px; -vertical-align:top; -position:relative; -top:5px +display: inline-block; +height: 26px; +vertical-align: top; +position: relative; +top: 5px; } - .header > .item.search input { -width:230px +width: 230px; } - .header .item.search input:focus { -width:350px +width: 350px; } - .header .item.search { -display:none +display: none; } - .header .item.configure { -position:fixed; -right:0; -z-index:1000; -width:35px +position: fixed; +right: 0px; +z-index: 1000; +width: 35px; } - .header h1 { -text-align:center; -font-size:1.5em +text-align: center; +font-size: 1.5em; } .aside { -background:#22303d; -padding:35px 0; -width:231px +background: #22303d; +padding: 35px 0; } - .aside.aside_feed .tree { -margin:0 0 50px +margin: 0 0 50px; } - -.aside.aside_feed .nav-form input,.aside.aside_feed .nav-form select { -width:140px +.aside.aside_feed .nav-form input, .aside.aside_feed .nav-form select { +width: 140px; } - .aside.aside_feed .nav-form .dropdown .dropdown-menu { -right:-20px +right: -20px; } - .aside.aside_feed .nav-form .dropdown .dropdown-menu::after { -right:33px +right: 33px; } .aside_feed .tree-folder-title > .title:not([data-unread="0"])::after { -position:absolute; -right:0; -margin:6px 0; -padding:0 10px; -font-size:.9rem; -line-height:1.5rem; -background:inherit +position: absolute; +right: 0; +margin: 6px 0; +padding: 0 10px; +font-size: 0.9rem; +line-height: 1.5rem; +background: inherit; } - .aside_feed .tree-folder-items .dropdown-menu::after { -left:2px +left: 2px; } .post { -padding:10px 50px; -font-size:.9em +padding: 10px 50px; +font-size: 0.9em; } - .post input { -background:#e3e3e3 +background: #e3e3e3; +} +.post input.long { +height: 33px; +margin-top: 0px; } - .post form { -margin:10px 0 +margin: 10px 0; } - .post.content { -max-width:550px +max-width: 550px; } .prompt { -text-align:center +text-align: center; } - .prompt label { -text-align:left +text-align: left; } - .prompt form { -margin:10px auto 20px; -width:200px +margin: 10px auto 20px auto; +width: 200px; } - .prompt input { -margin:5px auto; -width:100% +margin: 5px auto; +width: 100%; } - .prompt p { -margin:20px 0 +margin: 20px 0; } #new-article { -text-align:center; -font-size:1em; -background:#0062be; -position:fixed; -bottom:48px; -z-index:900; -left:0; -width:231px; -line-height:1.5em +text-align: center; +font-size: 1em; +background: #0062be; +position: fixed; +bottom: 48px; +z-index: 900; +left: 0; +line-height: 1.5em; } - #new-article:hover { -background:#00488b +background: #00488b; } - #new-article > a { -line-height:1.5em; -font-weight:700; -color:#FCFCFC +line-height: 1.5em; +font-weight: bold; +color: #FCFCFC; } - #new-article > a:hover { -text-decoration:none +text-decoration: none; } .day { -padding:0 10px; -font-weight:700; -line-height:3em; -text-align:center +padding: 0 10px; +font-weight: bold; +line-height: 3em; +text-align: center; } - .day .name { -display:none +display: none; } .nav a { -color:#FCFCFC +color: #FCFCFC; } .nav_menu { -font-size:0; -background-color:#0062be; -position:fixed; -width:100%; -z-index:900 +font-size: 0; +background-color: #0062be; +position: fixed; +width: 100%; +z-index: 900; } - .nav_menu .item.search { -display:inline-block; -position:fixed; -right:40px +display: inline-block; +position: fixed; +right: 40px; } .flux { -padding-right:10px; -background:#FCFCFC +padding-right: 10px; +background: #FCFCFC; } - .flux::after { -margin:0 auto; -width:90%; -border-top:1px solid #e3e3e3 +margin: 0 auto; +width: 90%; +border-top: 1px solid #e3e3e3; } - -.flux:hover,.flux .current { -background:#FFF +.flux:hover, .flux .current { +background: #FFFFFF; } - -.flux:hover:not(.current):hover .item.title,.flux .current:not(.current):hover .item.title { -background:#FFF +.flux:hover:not(.current):hover .item.title, .flux .current:not(.current):hover .item.title { +background: #FFFFFF; } - .flux.not_read { -background:#FFF3ED +background: #FFF3ED; } - .flux.not_read:not(.current):hover .item.title { -background:#FFF3ED +background: #FFF3ED; } - .flux.favorite { -background:#FFF6DA +background: #FFF6DA; } - .flux.favorite:not(.current):hover .item.title { -background:#FFF6DA +background: #FFF6DA; } - .flux .date { -font-size:.7rem; -color:#969696 +font-size: 0.7rem; +color: #969696; } - .flux .bottom { -font-size:.8rem; -text-align:center +font-size: 0.8rem; +text-align: center; } - .flux .website .favicon { -padding:5px +padding: 5px; } - .flux label { -color:#FCFCFC; -cursor:pointer +color: #FCFCFC; +cursor: pointer; } .flux_header { -font-size:.8rem; -cursor:pointer +font-size: 0.8rem; +cursor: pointer; } - .flux_header .title { -font-size:.9rem +font-size: 0.9rem; } .notification { -text-align:center; -font-weight:700; -font-size:1em; -padding:10px 0; -z-index:10; -vertical-align:middle; -background:#e3e3e3; -color:#969696; -border:none; -position:fixed; -bottom:48px; -left:0; -top:auto; -width:231px; -height:auto -} - -.notification.good,.notification .bad { -color:#FCFCFC +text-align: center; +font-weight: bold; +font-size: 1em; +padding: 10px 0; +z-index: 10; +vertical-align: middle; +background: #e3e3e3; +color: #969696; +border: none; +position: fixed; +bottom: 48px; +left: 0; +top: auto; +height: auto; +} +.notification.good, .notification .bad { +color: #FCFCFC; } - .notification.good { -background:#5EAABF +background: #5EAABF; } - .notification.good a.close:hover { -background:#5EAABF +background: #5EAABF; } - .notification.bad { -background:#c46178 +background: #c46178; } - .notification.bad a.close:hover { -background:#c46178 +background: #c46178; } - .notification#actualizeProgress { -line-height:2em +line-height: 2em; } - .notification a.close { -display:none +display: none; } #bigMarkAsRead { -text-align:center; -text-decoration:none; -background:#e3e3e3; -padding:20px!important +text-align: center; +text-decoration: none; +background: #e3e3e3; } - #bigMarkAsRead:hover { -background:#22303d; -color:#FCFCFC +background: #22303d; +color: #FCFCFC; } #nav_entries { -margin:0; -text-align:center; -line-height:3em; -table-layout:fixed; -width:231px; -background:#22303d +margin: 0; +text-align: center; +line-height: 3em; +table-layout: fixed; +background: #22303d; } .stat { -margin:10px 0 20px +margin: 10px 0 20px; +} +.stat th, .stat td, .stat tr { +border: none; +} +.stat > table td, .stat > table th { +border-bottom: 1px solid #e3e3e3; +} +.stat > .horizontal-list { +margin: 0 0 5px; +} +.stat > .horizontal-list .item { +overflow: hidden; +white-space: nowrap; +text-overflow: ellipsis; +} +.stat > .horizontal-list .item:first-child { +width: 270px; } -.stat th,.stat td,.stat tr { -border:none +.formLogin #global { +height: 0; } -.stat > table td,.stat > table th { -border-bottom:1px solid #e3e3e3 +.formLogin .header { +height: 55px; +background: #22303d; } -.stat > .horizontal-list { -margin:0 0 5px +.formLogin .header > .item.configure { +width: 200px; +position: unset; } -.stat > .horizontal-list .item { -overflow:hidden; -white-space:nowrap; -text-overflow:ellipsis +.formLogin a.signin { + color: #FCFCFC; + padding-left: 5px; } -.stat > .horizontal-list .item:first-child { -width:270px +.formLogin .header > .item.title h1 { + display: unset; +} + +.formLogin input { + border-left: 5px solid; + border-right: 1px solid #e3e3e3; + border-top: 1px solid #e3e3e3; + border-bottom: 1px solid #e3e3e3; } .loglist { -overflow:hidden; -border:1px solid #969696 +overflow: hidden; +border: 1px solid #969696; } .log { -padding:5px 2%; -overflow:auto; -font-size:.8rem; -background:#FCFCFC +padding: 5px 2%; +overflow: auto; +font-size: 0.8rem; +background: #FCFCFC; } - .log > .date { -margin:0 10px 0 0; -padding:5px 10px +margin: 0 10px 0 0; +padding: 5px 10px; } - .log.error > .date { -background:#c46178; -color:#FCFCFC +background: #c46178; +color: #FCFCFC; } - .log.warning > .date { -background:#FA8052; -color:#FCFCFC +background: #FA8052; +color: #FCFCFC; } - .log.notice > .date { -background:#e3e3e3; -color:#FCFCFC +background: #e3e3e3; +color: #FCFCFC; } - .log.debug > .date { -background:#181621; -color:#FCFCFC +background: #181621; +color: #FCFCFC; } @media (max-width: 840px) { -.dropdown-header,.dropdown-menu > .item { -padding:12px +.formLogin .header { +display: none; +} + +.dropdown-header, .dropdown-menu > .item { +padding: 12px; } #new-article { -width:100%; -bottom:initial +width: 100%; +bottom: initial; } .header { -display:table +display: table; } - .header .item.title .logo { -display:none +display: none; } .header > .item.title h1 a { -display:block; -position:absolute; -top:-35px; -left:10px; -font-size:.6em +display: block; +position: absolute; +top: -35px; +left: 10px; +font-size: 0.6em; } -.header .item.configure,button.read_all.btn { -display:none +.header .item.configure, button.read_all.btn { +display: none; } -.flux .item.manage,.flux_header .item.website { -width:35px; -text-align:center +.flux .item.manage, .flux_header .item.website { +width: 35px; +text-align: center; } .aside { -width:0; -transition:width 200ms linear +width: 0; +transition: width 200ms linear; } - .aside .toggle_aside { -display:block; -height:50px; -line-height:50px; -text-align:right; -padding-right:10px; -background:#22303d +display: block; +height: 50px; +line-height: 50px; +text-align: right; +padding-right: 10px; +background: #22303d; } - .aside.aside_feed { -padding:0 +padding: 0; } - .aside:target { -width:78% +width: 78%; } .nav_menu { -position:initial; -height:71px +position: initial; +height: 71px; } - .nav_menu .btn { -margin:5px 10px +margin: 5px 10px; } - .nav_menu .stick { -margin:0 10px +margin: 0 10px; } - .nav_menu .stick .btn { -margin:5px 0 +margin: 5px 0; } - .nav_menu .search { -position:absolute!important; -top:35px; -left:55px +position: absolute !important; +top: 35px; +left: 55px; } - .nav_menu .search input { -width:85% +width: 85%; } .pagination { -margin:0 0 3.5em +margin: 0 0 3.5em; } #panel .close { -display:block; -height:50px; -line-height:50px; -text-align:right; -padding-right:10px; -background:#22303d +display: block; +height: 50px; +line-height: 50px; +text-align: right; +padding-right: 10px; +background: #22303d; } .day .name { -font-size:1.1rem +font-size: 1.1rem; } .notification { -width:100% +width: 100%; } - .notification a.close { -display:block; -left:0; -background:transparent +display: block; +left: 0; +background: transparent; } - .notification a.close:hover { -opacity:.5 +opacity: 0.5; } - .notification a.close .icon { -display:none +display: none; } #nav_entries { -width:100%!important +width: 100% !important; } div#stream { -margin-top:0 +margin-top: 0px; } a.btn.toggle_aside { -position:absolute; -top:29px +position: absolute; +top: 29px; } -form#mark-read-menu,a#actualize,a#toggle-order,div#nav_menu_actions,div#nav_menu_views { -position:absolute +form#mark-read-menu, a#actualize, a#toggle-order, div#nav_menu_actions, div#nav_menu_views { +position: absolute; } form#mark-read-menu { -right:46px; -top:30px; -z-index:1100 +right: 46px; +top: 30px; +z-index: 1100; } -a#actualize,a#toggle-order { -right:0 +a#actualize, a#toggle-order { +right: 0px; } a#actualize { -top:29px +top: 29px; } -a#toggle-order,div#nav_menu_actions,div#nav_menu_views { -top:65px +a#toggle-order, div#nav_menu_actions, div#nav_menu_views { +top: 65px; } div#nav_menu_actions { -left:0 +left: 0px; } div#nav_menu_views { -right:50px +right: 50px; } } - @media (max-width: 410px) { .nav_menu .stick { -margin:0 +margin: 0; } } - @media (max-width: 374px) { #nav_menu_views { -display:none +display: none; } } - button.as-link { -color:#FCFCFC; -outline:none +color: #FCFCFC; +outline: none; } .dropdown-target:target ~ .btn.dropdown-toggle { -background:#00488b +background: #00488b; } .tree-folder.active .tree-folder-title { -background:#00488b; -font-weight:700 +background: #00488b; +font-weight: bold; } .feed.item.empty { -color:#FA8052 +color: #FA8052; } - .feed.item.empty.active { -background:#FA8052; -color:#FCFCFC +background: #FA8052; +color: #FCFCFC; } - .feed.item.empty.active > a { -color:#FCFCFC +color: #FCFCFC; } - .feed.item.empty > a { -color:#FA8052 +color: #FA8052; } - .feed.item.error { -color:#c46178 +color: #c46178; } - .feed.item.error.active { -background:#c46178; -color:#FCFCFC +background: #c46178; +color: #FCFCFC; } - .feed.item.error.active > a { -color:#FCFCFC +color: #FCFCFC; } - .feed.item.error > a { -color:#c46178 +color: #c46178; } #dropdown-query ~ .dropdown-menu .dropdown-header .icon { -vertical-align:middle; -float:right +vertical-align: middle; +float: right; } #stream.reader .flux { -padding:0 0 50px; -background:#FCFCFC; -color:#22303d; -border:none +padding: 0 0 50px; +background: #FCFCFC; +color: #22303d; +border: none; } - #stream.reader .flux .author { -margin:0 0 10px; -font-size:90%; -color:#969696 +margin: 0 0 10px; +font-size: 90%; +color: #969696; } -#nav_menu_actions ul.dropdown-menu,#nav_menu_read_all ul.dropdown-menu { -left:0 +#nav_menu_actions ul.dropdown-menu, #nav_menu_read_all ul.dropdown-menu { +left: 0px; } #slider label { -min-height:initial +min-height: initial; } - #slider .form-group:hover { -background:inital -}
\ No newline at end of file +background: inital; +} diff --git a/p/themes/Swage/swage.scss b/p/themes/Swage/swage.scss index 9bd0326d9..ecacba832 100644 --- a/p/themes/Swage/swage.scss +++ b/p/themes/Swage/swage.scss @@ -12,6 +12,7 @@ $color_stared: #FFF6DA; $color_unread: #FFF3ED; $color_hover: #FFFFFF; + // @extend-elements %input { min-height: 25px; @@ -48,6 +49,10 @@ $color_hover: #FFFFFF; clear: both; } +%aside-width { + width: 231px; +} + // /@extend-elements html, body { @@ -66,6 +71,12 @@ a { background: darken( $color_nav, 10%); } } + &#btn-subscription { + width: 76%; + } + &#btn-importExport { + width: 5%; + } } img { @@ -205,6 +216,9 @@ form { .stick { vertical-align: middle; font-size: 0; + &.configure-feeds { + @extend %aside-width; + } } .btn { @@ -250,7 +264,7 @@ form { .item { @extend %nav-list; &:hover, - .active { + &.active { background: darken( $color_nav, 10%); color: $color_light; a { @@ -337,7 +351,7 @@ form { > a { min-width: initial; white-space: nowrap; - } + } &:hover { background: $color_nav; color: $color_light; @@ -589,11 +603,29 @@ form { } } +@supports (scrollbar-width: thin) { + #sidebar { + scrollbar-color: rgba(255, 255, 255, 0.05) rgba(0, 0, 0, 0.0); + } + #sidebar:hover { + scrollbar-color: rgba(255, 255, 255, 0.3) rgba(0, 0, 0, 0.0); + } +} + +@supports not (scrollbar-width: thin) { + #sidebar::-webkit-scrollbar-thumb { + background: rgba(255, 255, 255, 0.1); + } + #sidebar:hover::-webkit-scrollbar-thumb { + background: rgba(255, 255, 255, 0.3); + } +} + .header { > .item { vertical-align: middle; &.title { - width: 231px; + @extend %aside-width; position: absolute; h1 { margin: 0; @@ -636,7 +668,7 @@ form { .aside { background: $color_aside; padding: 35px 0; - width: 231px; + @extend %aside-width; &.aside_feed { .tree { margin: 0 0 50px; @@ -678,6 +710,10 @@ form { font-size: 0.9em; input { background: darken( $color_light, 10% ); + &.long{ + height: 33px; + margin-top: 0px; + } } form { margin: 10px 0; @@ -713,7 +749,7 @@ form { bottom: 48px; z-index: 900; left: 0; - width: 231px; + @extend %aside-width; line-height: 1.5em; &:hover { background: darken( $color_nav, 10%); @@ -825,7 +861,7 @@ form { bottom: 48px; left: 0; top: auto; - width: 231px; + @extend %aside-width; height: auto; &.good, .bad { @@ -855,7 +891,6 @@ form { text-align: center; text-decoration: none; background: darken( $color_light, 10%); - padding: 20px !IMPORTANT; &:hover { background: $color_aside; color: $color_light; @@ -867,7 +902,7 @@ form { text-align: center; line-height: 3em; table-layout: fixed; - width: 231px; + @extend %aside-width; background: $color_aside; } @@ -897,6 +932,37 @@ form { } } +.formLogin { + #global { + height: 0; + } + + .header { + height: 55px; + background: $color_aside; + > .item { + &.configure { + width: 200px; + position: unset; + } + &.title h1 { + display: unset; + } + } + } + a.signin { + color: $color_light; + padding-left: 5px; + } + + input { + border-left: 5px solid; + border-right: 1px darken( $color_light, 10%); + border-top: 1px darken( $color_light, 10%); + border-bottom: 1px darken( $color_light, 10%); + } +} + .loglist { overflow: hidden; border: 1px solid darken( $color_light, 40% ); @@ -930,10 +996,13 @@ form { } @media(max-width: 840px) { + .formLogin .header { + display: none; + } .dropdown-header, .dropdown-menu > .item { padding: 12px; } - + #new-article { width: 100%; bottom: initial; @@ -1156,5 +1225,5 @@ button.as-link { background: inital; } } - -}
\ No newline at end of file + +} diff --git a/p/themes/base-theme/template.css b/p/themes/base-theme/template.css index b211d0516..099aee916 100644 --- a/p/themes/base-theme/template.css +++ b/p/themes/base-theme/template.css @@ -109,7 +109,7 @@ input[type="checkbox"] { min-height: 15px !important; } .dropdown-menu label > input[type="text"] { - with: 150px; + width: 150px; width: calc(99% - 5em); } .dropdown-menu input[type="checkbox"] { @@ -143,7 +143,7 @@ td.numeric { /*===============*/ [aria-hidden="true"] { - display: none; + display: none !important; } /*=== Forms */ @@ -168,6 +168,13 @@ td.numeric { display: block; } +@supports (position: sticky) { + #mark-read-aside { + position: sticky; + top: 0; + } +} + /*=== Buttons */ .stick { display: inline-block; @@ -230,6 +237,11 @@ a.btn { background: #fff; border: 1px solid #aaa; } +.dropdown-menu-scrollable { + max-height: 75vh; + overflow-x: hidden; + overflow-y: auto; +} .dropdown-header { display: block; } @@ -256,7 +268,7 @@ a.btn { } .dropdown-target:target ~ .dropdown-menu { display: block; - z-index: 10; + z-index: 1000; } .dropdown-close { display: inline; @@ -268,6 +280,7 @@ a.btn { left: 0; right: 0; display: block; z-index: -10; + cursor: default; } .separator { display: block; @@ -368,16 +381,40 @@ a.btn { cursor: grab; } +/*=== Scrollbar */ +@supports (scrollbar-width: thin) { + #sidebar { + overflow-y: auto; + scrollbar-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.05); + scrollbar-width: thin; + } + #sidebar:hover { + scrollbar-color: rgba(0, 0, 0, 0.3) rgba(0, 0, 0, 0.05); + } +} + +@supports not (scrollbar-width: thin) { + #sidebar::-webkit-scrollbar { + background: rgba(0, 0, 0, 0.05); + width: 8px; + } + #sidebar::-webkit-scrollbar-thumb { + background: rgba(0, 0, 0, 0.1); + border-radius: 5px; + display: unset; + } + #sidebar:hover::-webkit-scrollbar-thumb { + background: rgba(0, 0, 0, 0.3); + } +} + /*=== Tree */ .tree { margin: 0; - padding: 0 0 2em 0; + max-height: 99vh; list-style: none; text-align: left; -} - -.treepadding { - padding: 0 0 15em 0; + overflow-x: hidden; } .tree-folder-items { @@ -407,6 +444,10 @@ a.btn { white-space: nowrap; text-overflow: ellipsis; } +.tree-bottom { + visibility: hidden; + margin-bottom: 18em; +} /*=== STRUCTURE */ /*===============*/ @@ -445,7 +486,6 @@ a.btn { } .aside { display: table-cell; - height: 100%; width: 300px; vertical-align: top; } @@ -667,6 +707,21 @@ br + br + br { height: 300px; } +/*=== LOGIN VIEW */ +/*================*/ +.formLogin .header > .item { + padding: 10px 30px; +} + +.formLogin .header > .item.title { + text-align: left; +} + +.formLogin .header > .item.configure { + text-align: right; +} + + /*=== GLOBAL VIEW */ /*================*/ #stream.global { @@ -854,6 +909,29 @@ pre.enclosure-description { white-space: pre-line; } +/*=== READER */ +/*===========*/ +.reader .nav_menu .toggle_aside { + display: inline-block; +} + +.reader .aside .toggle_aside { + display: block; + width: 100%; +} + +.reader .aside { + width: 0; +} + +.reader .aside:target { + width: 300px; +} + +.reader .aside .stick { + display: none; +} + /*=== MOBILE */ /*===========*/ @media(max-width: 840px) { @@ -894,7 +972,6 @@ pre.enclosure-description { } .aside:target { width: 90%; - overflow: auto; } .flux_header .item.website { |
