From b34bd30cc888e13050c401a45429c1b38294b4c6 Mon Sep 17 00:00:00 2001 From: maTh Date: Tue, 27 Sep 2022 17:56:24 +0200 Subject: Improved: Origine compact inherit from origine (#4636) * Update metadata.json * clean Origine compact * fix * RTL * fix * fix line-height --- p/themes/Origine-compact/metadata.json | 2 +- p/themes/Origine-compact/origine-compact.css | 952 ----------------------- p/themes/Origine-compact/origine-compact.rtl.css | 952 ----------------------- p/themes/Origine/origine.css | 3 +- p/themes/Origine/origine.rtl.css | 3 +- 5 files changed, 5 insertions(+), 1907 deletions(-) (limited to 'p') diff --git a/p/themes/Origine-compact/metadata.json b/p/themes/Origine-compact/metadata.json index eba82defd..67038e173 100644 --- a/p/themes/Origine-compact/metadata.json +++ b/p/themes/Origine-compact/metadata.json @@ -3,5 +3,5 @@ "author": "Kevin Papst", "description": "A theme that tries to use the screen size more efficiently, based on Origine", "version": 0.1, - "files": ["_template.css", "origine-compact.css"] + "files": ["_template.css", "../Origine/origine.css", "origine-compact.css"] } diff --git a/p/themes/Origine-compact/origine-compact.css b/p/themes/Origine-compact/origine-compact.css index 8fea0808a..c97b83dd0 100644 --- a/p/themes/Origine-compact/origine-compact.css +++ b/p/themes/Origine-compact/origine-compact.css @@ -2,177 +2,29 @@ /*=== GENERAL */ /*============*/ -html, body { - background: #fafafa; - font-family: "OpenSans", "Cantarell", "Helvetica", "Arial", "PingFang SC", "Microsoft YaHei", sans-serif; -} - -/*=== Links */ -a, button.as-link { - color: #0062be; - outline: none; -} - -/*=== Forms */ -legend { - margin: 20px 0 5px; - padding: 5px 0; - font-size: 1.4em; - border-bottom: 1px solid #ddd; -} - -label { - min-height: 25px; - padding: 5px 0; - cursor: pointer; -} - -textarea { - width: 360px; - height: 100px; -} - input, select, textarea { padding: 3px 5px 2px 5px; - background: #fdfdfd; - color: #666; - border: 1px solid #bbb; - border-radius: 3px; - box-shadow: 0 2px 2px #eee inset; min-height: 25px; line-height: 25px; - vertical-align: middle; -} - -option { - padding: 0 .5em; -} - -input:focus, select:focus, textarea:focus { - color: #0062be; - border-color: #3bf; - box-shadow: 0 2px 2px #ddf 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; -} - -/*=== 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: 8px 0; } /*=== Buttons */ -.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 { 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%); - display: inline-block; - color: #666; - font-size: 0.9rem; - border: 1px solid #ddd; - border-right: 1px solid #aaa; - border-bottom: 1px solid #aaa; - border-radius: 3px; min-height: 32px; - min-width: 15px; - text-shadow: 0px -1px 0 #ddd; - vertical-align: middle; - cursor: pointer; - overflow: hidden; } a.btn, @@ -181,161 +33,7 @@ a.btn, line-height: 20px; } -.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 { - background: #eee; - box-shadow: 0px 2px 4px #e0e0e0 inset, 0px 1px 2px #fafafa; -} - -.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, #06c, #0045cc); - background: -moz-linear-gradient(top, #06c 0%, #0045cc 100%); - background: -webkit-linear-gradient(top, #06c 0%, #0045cc 100%); - background: -o-linear-gradient(top, #06c 0%, #0045cc 100%); - background: -ms-linear-gradient(top, #06c 0%, #0045cc 100%); -} - -.btn-important:active { - background: #0044cb; - box-shadow: none; -} - -.btn-important .icon { - filter: brightness(3); -} - -.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: #038; -} - -.nav-list .item.active { - background: #0062be; - color: #fff; -} - -.nav-list .item.active a { - color: #fff; -} - -.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 { - background: #f39c12; - color: #fff; -} - -.nav-list .item.error a { - color: #bd362f; -} - -.nav-list .item.active.error a { - background: #bd362f; - color: #fff; -} - -.nav-list .nav-header { - padding: 0 10px; - background: #f4f4f4; - color: #888; - 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 { @@ -347,237 +45,29 @@ a.btn, } /*=== Dropdown */ -.dropdown-menu { - margin: 5px 0 0; - padding: 5px 0; - font-size: 0.8rem; - border: 1px solid #ddd; - border-radius: 5px; - box-shadow: 3px 3px 3px #ddd; - text-align: left; -} - -.dropdown-menu::after { - background: #fff; - width: 10px; - height: 10px; - border-top: 1px solid #ddd; - border-left: 1px solid #ddd; - content: ""; - position: absolute; - top: -6px; - right: 13px; - z-index: -10; - transform: rotate(45deg); -} - -.dropdown-header { - padding: 0 5px 5px; - color: #888; - font-weight: bold; - text-align: left; -} - -.dropdown-menu > .item > a, -.dropdown-menu > .item > span, -.dropdown-menu > .item > .as-link { - padding: 0 22px; - line-height: 2.5em; - font-size: 0.8rem; -} - -.dropdown-menu > .item > a:hover, -.dropdown-menu > .item > button:hover { - background: #0062be; - color: #fff; -} - -.dropdown-menu > .item:hover .icon { - filter: grayscale(100%) brightness(2.5); -} - -.dropdown-menu > .item[aria-checked="true"] > a::before { - font-weight: bold; - margin: 0 0 0 -14px; -} - -.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; - color: #aaa; - font-size: 0.9em; - border: 1px solid #ccc; - border-right: 1px solid #aaa; - border-bottom: 1px solid #aaa; - border-radius: 5px; - text-shadow: 0 0 1px #eee; -} - -.alert-head { - font-size: 1.15em; -} - -.alert > a { - color: inherit; - text-decoration: underline; -} - -.alert-warn { - background: #ffe; - color: #c95; - border: 1px solid #eeb; -} - -.alert-success { - background: #dfd; - color: #484; - border: 1px solid #cec; -} - -.alert-error { - background: #fdd; - color: #844; - border: 1px solid #ecc; -} - /*=== Pagination */ -.pagination { - background: #fafafa; - color: #333; -} - -.pagination .item a { - color: #333; -} - -.pagination .item a:hover { - background: #ddd; -} - -.pagination:first-child .item { - border-bottom: 1px solid #aaa; -} - -.pagination:last-child .item { - border-top: 1px solid #aaa; -} - /*=== Boxes */ -.box { - background: #fff; - border-radius: 5px; - box-shadow: 0 0 3px #bbb; -} - -.box .box-title { - margin: 0; - padding: 5px 10px; - background: #f6f6f6; - border-bottom: 1px solid #ddd; - border-radius: 5px 5px 0 0; -} - -.box .box-title .configure { - margin-right: 4px; -} - -.box .box-content { - padding-left: 30px; - min-height: 2.5em; - max-height: 260px; -} - -.box .box-content .item { - font-size: 0.9rem; - line-height: 2.5em; -} - /*=== Tree */ -.tree { - margin: 10px 0; -} - .tree-folder-title { - position: relative; padding: 0 5px; - background: #fff; line-height: 2rem; font-size: 0.9rem; } -.tree-folder-title .title { - background: inherit; - color: #444; -} - -.tree-folder-title .title:hover { - text-decoration: none; -} - -.tree-folder.active .tree-folder-title { - background: #f0f0f0; - font-weight: bold; -} - -.tree-folder.active .tree-folder-title .title { - color: #0062be; -} - -.tree-folder-items { - background: #f6f6f6; - border-top: 1px solid #ccc; - border-bottom: 1px solid #ccc; -} - .tree-folder-items > .item { - padding: 0 10px; line-height: 2.2rem; - font-size: 0.8rem; -} - -.tree-folder-items > .item.active { - background: #0062be; -} - -.tree-folder-items > .item > a { - text-decoration: none; -} - -.tree-folder-items > .item.active > a { - color: #fff; } /*=== STRUCTURE */ /*===============*/ /*=== Header */ .header { - background: #f4f4f4; height: 40px; } .header > .item { padding: 0px; - border-bottom: 1px solid #aaa; - vertical-align: middle; - text-align: center; -} - -.header > .item.title { - width: 230px; } .header .item.configure .btn, @@ -593,11 +83,6 @@ a.btn, .header > .item.search input { padding: 1px 5px; - width: 230px; -} - -.header .item.search input:focus { - width: 350px; } /*=== Body */ @@ -605,202 +90,37 @@ a.btn, height: calc(100vh - 40px); } -.aside { - background: #fff; - border-right: 1px solid #aaa; -} - -.aside.aside_feed { - padding: 10px 0; - text-align: center; - background: #fff; -} - -.aside.aside_feed .tree { - margin: 10px 0 50px; -} - /*=== Aside main page (categories) */ .aside.aside_feed .category .title:not([data-unread="0"])::after, .global .box.category .title:not([data-unread="0"])::after { margin: 0.5em 0 0 0; - background-color: #f6f6f6; - color: #444; } .aside.aside_feed .feed .item-title:not([data-unread="0"])::after { margin: 0.75em 0 0 0; - background-color: white; - color: #444; } /*=== Aside main page (feeds) */ -.feed.item.empty.active { - background: #e67e22; -} - -.feed.item.error.active { - background: #bd362f; -} - -.feed.item.empty, -.feed.item.empty > a { - color: #e67e22; -} - -.feed.item.error, -.feed.item.error > a { - color: #bd362f; -} - -.feed.item.empty.active, -.feed.item.error.active, -.feed.item.empty.active > a, -.feed.item.error.active > a { - color: #fff; -} - -.aside_feed .tree-folder-items .dropdown-menu::after { - left: 2px; -} - -.aside_feed .tree-folder-items .item .dropdown-target:target ~ .dropdown-toggle > .icon, -.aside_feed .tree-folder-items .item.active .dropdown-toggle > .icon { - background-color: #fff; - border-radius: 3px; -} - /*=== Configuration pages */ -.post { - padding: 10px 50px; - font-size: 0.9em; -} - -.post form { - margin: 10px 0; -} - -.post.content { - max-width: 550px; -} - /*=== Prompt (centered) */ -.prompt .form-group { - margin-bottom: 1rem; -} - -.prompt .form-group::after { - display: none; -} - -.prompt .form-group.form-group-actions { - display: flex; - margin-top: 2rem; - align-items: center; - justify-content: space-between; -} - -.prompt .btn.btn-important { - padding-left: 1.5rem; - padding-right: 1.5rem; - font-size: 1.1rem; -} - /*=== New article notification */ -#new-article { - background: #0084cc; - text-align: center; - font-size: 0.9em; -} - #new-article > a { line-height: 3em; - color: #fff; - font-weight: bold; -} - -#new-article > a:hover { - text-decoration: none; - background: #06c; } /*=== Day indication */ .day { - padding: 0 10px; - background: #fff; font-size: 0.9rem; - border-top: 1px solid #aaa; - border-bottom: 1px solid #aaa; - font-weight: bold; line-height: 2em; } -#new-article + .day { - border-top: none; -} - .day .name { - padding: 0 10px 0 0; - color: #aab; font-size: 1em; opacity: 0.6; - font-style: italic; - text-align: right; } /*=== Index menu */ -.nav_menu { - padding: 5px 0; - background: #fafafa; - border-bottom: 1px solid #aaa; - text-align: center; -} - /*=== Feed articles */ -.flux { - background: #fafafa; - border-left: 2px solid #aaa; -} - -.flux:hover { - background: #fff; -} - -.flux.current { - background: #fff; - border-left: 2px solid #0062be; -} - -.flux.not_read { - border-left-color: #ff5300; -} - -.flux.not_read:not(.current) { - background: #fff3ed; -} - -.flux.not_read:not(.current):hover .item.title { - background: inherit; -} - -.flux.favorite { - border-left: 2px solid #ffc300; -} - -.flux.favorite:not(.current) { - background: #fff6da; -} - -.flux.favorite:not(.current):hover .item.title { - background: #fff6da; -} - -.flux_header { - font-size: 0.8rem; - border-top: 1px solid #ddd; - cursor: pointer; -} - .flux_header .title { font-size: 0.8rem; } @@ -842,20 +162,6 @@ a.btn, max-height: 1.5em; } -.flux .website .favicon { - padding: 5px; -} - -.flux .item.date { - color: #666; - font-size: 0.7rem; -} - -.flux .bottom { - font-size: 0.8rem; - text-align: center; -} - /*=== Content of feed articles */ .content { padding: 10px 10px; @@ -865,299 +171,41 @@ a.btn, display: none; } -.content > h1.title > a { - color: #000; -} - -.content hr { - margin: 30px 10px; - background: #ddd; - height: 1px; - 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; - background: #fafafa; - color: #d14; - border: 1px solid #eee; - border-radius: 3px; -} - -.content pre code { - background: transparent; - color: #fff; - border: none; -} - -.content blockquote { - margin: 0; - padding: 5px 20px; - background: #fafafa; - display: block; - color: #333; - border-top: 1px solid #ddd; - border-bottom: 1px solid #ddd; -} - -.content blockquote p { - margin: 0; -} - /*=== Notification and actualize notification */ -.notification { - font-size: 0.9em; - border: 1px solid #eeb; - border-radius: 3px; - box-shadow: 0 0 5px #ddd; - text-align: center; - font-weight: bold; - vertical-align: middle; -} - -.notification.good { - background: #ffe; - color: #c95; - border: 1px solid #eeb; -} - -.notification.bad { - background: #fdd; - color: #844; - border: 1px solid #ecc; -} - -.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 { - background: #fafafa; - color: #666; font-size: 1.2em; - text-align: center; - text-decoration: none; -} - -#bigMarkAsRead:hover { - background: #fff; - color: #0062be; - box-shadow: 0 -5px 10px #eee inset; } #bigMarkAsRead .bigTick { font-size: 3em; } -#bigMarkAsRead:hover .bigTick { - text-shadow: 0 0 5px #0062be; -} - /*=== Navigation menu (for articles) */ #nav_entries { - margin: 0; - background: #fff; - border-top: 1px solid #ddd; - text-align: center; line-height: 2.2em; - table-layout: fixed; } /*=== READER VIEW */ /*================*/ -#stream.reader .flux { - padding: 0 0 50px; - background: #f0f0f0; - color: #333; - border: none; -} - -#stream.reader .flux .author { - margin: 0 0 10px; - color: #666; - font-size: 90%; -} - /*=== GLOBAL VIEW */ /*================*/ -.box.category:not([data-unread="0"]) .box-title { - background: #0084cc; -} - -.box.category .box-title .title { - display: block; - font-weight: normal; -} - -.box.category:not([data-unread="0"]) .box-title .title { - color: #fff; - font-weight: bold; -} - -.box.category .title:not([data-unread="0"])::after { - background: none; - color: #fff; - border: 0; - box-shadow: none; - position: absolute; - top: 5px; right: 10px; - font-weight: bold; - text-shadow: none; -} - -.box.category .item.feed { - padding: 2px 10px; - font-size: 0.8rem; -} - /*=== 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; -} - /*=== MOBILE */ /*===========*/ @media (max-width: 840px) { - .form-group .group-name { - padding-bottom: 0; - text-align: left; - } - - .aside { - transition: width 200ms linear; - } - - .aside:target { - box-shadow: 3px 0 3px #aaa; - } - - .aside .toggle_aside, - #panel .close, - .dropdown-menu .toggle_aside { - background: #f6f6f6; - display: block; - width: 100%; - height: 50px; - border-bottom: 1px solid #ddd; - line-height: 50px; - text-align: center; - } - - .aside.aside_feed { - padding: 0; - } - - .nav_menu .btn { - margin: 5px 10px; - padding: 3px 5px; - min-height: 0; - } - - .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 { padding: 1px 5px; - max-width: 97%; - width: 90px; - } - - .nav_menu .search input:focus { - width: 400px; - } - - .dropdown-target:target ~ .dropdown-toggle::after { - background-color: #fff; - border-top: 1px solid #ddd; - border-left: 1px solid #ddd; } .dropdown-target:target ~ .dropdown-toggle:not(.btn) ~ .dropdown-menu { margin-top: 5px; } - .day .name { - font-size: 1.1rem; - text-shadow: none; - } - - .notification a.close { - background: transparent; - display: block; - left: 0; - } - - .notification a.close:hover { - opacity: 0.5; - } - - .notification a.close .icon { - display: none; - } - .post { padding-left: 15px; padding-right: 15px; diff --git a/p/themes/Origine-compact/origine-compact.rtl.css b/p/themes/Origine-compact/origine-compact.rtl.css index 0315c32dc..4b6601cb0 100644 --- a/p/themes/Origine-compact/origine-compact.rtl.css +++ b/p/themes/Origine-compact/origine-compact.rtl.css @@ -2,177 +2,29 @@ /*=== GENERAL */ /*============*/ -html, body { - background: #fafafa; - font-family: "OpenSans", "Cantarell", "Helvetica", "Arial", "PingFang SC", "Microsoft YaHei", sans-serif; -} - -/*=== Links */ -a, button.as-link { - color: #0062be; - outline: none; -} - -/*=== Forms */ -legend { - margin: 20px 0 5px; - padding: 5px 0; - font-size: 1.4em; - border-bottom: 1px solid #ddd; -} - -label { - min-height: 25px; - padding: 5px 0; - cursor: pointer; -} - -textarea { - width: 360px; - height: 100px; -} - input, select, textarea { padding: 3px 5px 2px 5px; - background: #fdfdfd; - color: #666; - border: 1px solid #bbb; - border-radius: 3px; - box-shadow: 0 2px 2px #eee inset; min-height: 25px; line-height: 25px; - vertical-align: middle; -} - -option { - padding: 0 .5em; -} - -input:focus, select:focus, textarea:focus { - color: #0062be; - border-color: #3bf; - box-shadow: 0 2px 2px #ddf 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; -} - -/*=== 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: left; -} - .form-group .group-controls { min-height: 25px; padding: 8px 0; } /*=== Buttons */ -.stick input, -.stick .btn { - border-radius: 0; -} - -.stick .btn:first-child, -.stick input:first-child { - border-radius: 0 3px 3px 0; -} - -.stick .btn-important:first-child { - border-left: 1px solid #06f; -} - -.stick .btn:last-child, -.stick input:last-child { - border-radius: 3px 0 0 3px; -} - -.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-right: none; -} - -.stick input + .btn { - border-top: 1px solid #bbb; -} - -.stick .btn + .dropdown > .btn { - border-right: none; - border-radius: 3px 0 0 3px; -} - .btn { 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%); - display: inline-block; - color: #666; - font-size: 0.9rem; - border: 1px solid #ddd; - border-left: 1px solid #aaa; - border-bottom: 1px solid #aaa; - border-radius: 3px; min-height: 32px; - min-width: 15px; - text-shadow: 0px -1px 0 #ddd; - vertical-align: middle; - cursor: pointer; - overflow: hidden; } a.btn, @@ -181,161 +33,7 @@ a.btn, line-height: 20px; } -.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 { - background: #eee; - box-shadow: 0px 2px 4px #e0e0e0 inset, 0px 1px 2px #fafafa; -} - -.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, #06c, #0045cc); - background: -moz-linear-gradient(top, #06c 0%, #0045cc 100%); - background: -webkit-linear-gradient(top, #06c 0%, #0045cc 100%); - background: -o-linear-gradient(top, #06c 0%, #0045cc 100%); - background: -ms-linear-gradient(top, #06c 0%, #0045cc 100%); -} - -.btn-important:active { - background: #0044cb; - box-shadow: none; -} - -.btn-important .icon { - filter: brightness(3); -} - -.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: #038; -} - -.nav-list .item.active { - background: #0062be; - color: #fff; -} - -.nav-list .item.active a { - color: #fff; -} - -.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 { - background: #f39c12; - color: #fff; -} - -.nav-list .item.error a { - color: #bd362f; -} - -.nav-list .item.active.error a { - background: #bd362f; - color: #fff; -} - -.nav-list .nav-header { - padding: 0 10px; - background: #f4f4f4; - color: #888; - 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: left; -} - -.nav-head .item { - padding: 5px 10px; - font-size: 0.9rem; - line-height: 1.5rem; -} /*=== Horizontal-list */ .horizontal-list { @@ -347,237 +45,29 @@ a.btn, } /*=== Dropdown */ -.dropdown-menu { - margin: 5px 0 0; - padding: 5px 0; - font-size: 0.8rem; - border: 1px solid #ddd; - border-radius: 5px; - box-shadow: -3px 3px 3px #ddd; - text-align: right; -} - -.dropdown-menu::after { - background: #fff; - width: 10px; - height: 10px; - border-top: 1px solid #ddd; - border-right: 1px solid #ddd; - content: ""; - position: absolute; - top: -6px; - left: 13px; - z-index: -10; - transform: rotate(-45deg); -} - -.dropdown-header { - padding: 0 5px 5px; - color: #888; - font-weight: bold; - text-align: right; -} - -.dropdown-menu > .item > a, -.dropdown-menu > .item > span, -.dropdown-menu > .item > .as-link { - padding: 0 22px; - line-height: 2.5em; - font-size: 0.8rem; -} - -.dropdown-menu > .item > a:hover, -.dropdown-menu > .item > button:hover { - background: #0062be; - color: #fff; -} - -.dropdown-menu > .item:hover .icon { - filter: grayscale(100%) brightness(2.5); -} - -.dropdown-menu > .item[aria-checked="true"] > a::before { - font-weight: bold; - margin: 0 -14px 0 0; -} - -.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; - color: #aaa; - font-size: 0.9em; - border: 1px solid #ccc; - border-left: 1px solid #aaa; - border-bottom: 1px solid #aaa; - border-radius: 5px; - text-shadow: 0 0 1px #eee; -} - -.alert-head { - font-size: 1.15em; -} - -.alert > a { - color: inherit; - text-decoration: underline; -} - -.alert-warn { - background: #ffe; - color: #c95; - border: 1px solid #eeb; -} - -.alert-success { - background: #dfd; - color: #484; - border: 1px solid #cec; -} - -.alert-error { - background: #fdd; - color: #844; - border: 1px solid #ecc; -} - /*=== Pagination */ -.pagination { - background: #fafafa; - color: #333; -} - -.pagination .item a { - color: #333; -} - -.pagination .item a:hover { - background: #ddd; -} - -.pagination:first-child .item { - border-bottom: 1px solid #aaa; -} - -.pagination:last-child .item { - border-top: 1px solid #aaa; -} - /*=== Boxes */ -.box { - background: #fff; - border-radius: 5px; - box-shadow: 0 0 3px #bbb; -} - -.box .box-title { - margin: 0; - padding: 5px 10px; - background: #f6f6f6; - border-bottom: 1px solid #ddd; - border-radius: 5px 5px 0 0; -} - -.box .box-title .configure { - margin-left: 4px; -} - -.box .box-content { - padding-right: 30px; - min-height: 2.5em; - max-height: 260px; -} - -.box .box-content .item { - font-size: 0.9rem; - line-height: 2.5em; -} - /*=== Tree */ -.tree { - margin: 10px 0; -} - .tree-folder-title { - position: relative; padding: 0 5px; - background: #fff; line-height: 2rem; font-size: 0.9rem; } -.tree-folder-title .title { - background: inherit; - color: #444; -} - -.tree-folder-title .title:hover { - text-decoration: none; -} - -.tree-folder.active .tree-folder-title { - background: #f0f0f0; - font-weight: bold; -} - -.tree-folder.active .tree-folder-title .title { - color: #0062be; -} - -.tree-folder-items { - background: #f6f6f6; - border-top: 1px solid #ccc; - border-bottom: 1px solid #ccc; -} - .tree-folder-items > .item { - padding: 0 10px; line-height: 2.2rem; - font-size: 0.8rem; -} - -.tree-folder-items > .item.active { - background: #0062be; -} - -.tree-folder-items > .item > a { - text-decoration: none; -} - -.tree-folder-items > .item.active > a { - color: #fff; } /*=== STRUCTURE */ /*===============*/ /*=== Header */ .header { - background: #f4f4f4; height: 40px; } .header > .item { padding: 0px; - border-bottom: 1px solid #aaa; - vertical-align: middle; - text-align: center; -} - -.header > .item.title { - width: 230px; } .header .item.configure .btn, @@ -593,11 +83,6 @@ a.btn, .header > .item.search input { padding: 1px 5px; - width: 230px; -} - -.header .item.search input:focus { - width: 350px; } /*=== Body */ @@ -605,202 +90,37 @@ a.btn, height: calc(100vh - 40px); } -.aside { - background: #fff; - border-left: 1px solid #aaa; -} - -.aside.aside_feed { - padding: 10px 0; - text-align: center; - background: #fff; -} - -.aside.aside_feed .tree { - margin: 10px 0 50px; -} - /*=== Aside main page (categories) */ .aside.aside_feed .category .title:not([data-unread="0"])::after, .global .box.category .title:not([data-unread="0"])::after { margin: 0.5em 0 0 0; - background-color: #f6f6f6; - color: #444; } .aside.aside_feed .feed .item-title:not([data-unread="0"])::after { margin: 0.75em 0 0 0; - background-color: white; - color: #444; } /*=== Aside main page (feeds) */ -.feed.item.empty.active { - background: #e67e22; -} - -.feed.item.error.active { - background: #bd362f; -} - -.feed.item.empty, -.feed.item.empty > a { - color: #e67e22; -} - -.feed.item.error, -.feed.item.error > a { - color: #bd362f; -} - -.feed.item.empty.active, -.feed.item.error.active, -.feed.item.empty.active > a, -.feed.item.error.active > a { - color: #fff; -} - -.aside_feed .tree-folder-items .dropdown-menu::after { - right: 2px; -} - -.aside_feed .tree-folder-items .item .dropdown-target:target ~ .dropdown-toggle > .icon, -.aside_feed .tree-folder-items .item.active .dropdown-toggle > .icon { - background-color: #fff; - border-radius: 3px; -} - /*=== Configuration pages */ -.post { - padding: 10px 50px; - font-size: 0.9em; -} - -.post form { - margin: 10px 0; -} - -.post.content { - max-width: 550px; -} - /*=== Prompt (centered) */ -.prompt .form-group { - margin-bottom: 1rem; -} - -.prompt .form-group::after { - display: none; -} - -.prompt .form-group.form-group-actions { - display: flex; - margin-top: 2rem; - align-items: center; - justify-content: space-between; -} - -.prompt .btn.btn-important { - padding-right: 1.5rem; - padding-left: 1.5rem; - font-size: 1.1rem; -} - /*=== New article notification */ -#new-article { - background: #0084cc; - text-align: center; - font-size: 0.9em; -} - #new-article > a { line-height: 3em; - color: #fff; - font-weight: bold; -} - -#new-article > a:hover { - text-decoration: none; - background: #06c; } /*=== Day indication */ .day { - padding: 0 10px; - background: #fff; font-size: 0.9rem; - border-top: 1px solid #aaa; - border-bottom: 1px solid #aaa; - font-weight: bold; line-height: 2em; } -#new-article + .day { - border-top: none; -} - .day .name { - padding: 0 0 0 10px; - color: #aab; font-size: 1em; opacity: 0.6; - font-style: italic; - text-align: left; } /*=== Index menu */ -.nav_menu { - padding: 5px 0; - background: #fafafa; - border-bottom: 1px solid #aaa; - text-align: center; -} - /*=== Feed articles */ -.flux { - background: #fafafa; - border-right: 2px solid #aaa; -} - -.flux:hover { - background: #fff; -} - -.flux.current { - background: #fff; - border-right: 2px solid #0062be; -} - -.flux.not_read { - border-right-color: #ff5300; -} - -.flux.not_read:not(.current) { - background: #fff3ed; -} - -.flux.not_read:not(.current):hover .item.title { - background: inherit; -} - -.flux.favorite { - border-right: 2px solid #ffc300; -} - -.flux.favorite:not(.current) { - background: #fff6da; -} - -.flux.favorite:not(.current):hover .item.title { - background: #fff6da; -} - -.flux_header { - font-size: 0.8rem; - border-top: 1px solid #ddd; - cursor: pointer; -} - .flux_header .title { font-size: 0.8rem; } @@ -842,20 +162,6 @@ a.btn, max-height: 1.5em; } -.flux .website .favicon { - padding: 5px; -} - -.flux .item.date { - color: #666; - font-size: 0.7rem; -} - -.flux .bottom { - font-size: 0.8rem; - text-align: center; -} - /*=== Content of feed articles */ .content { padding: 10px 10px; @@ -865,299 +171,41 @@ a.btn, display: none; } -.content > h1.title > a { - color: #000; -} - -.content hr { - margin: 30px 10px; - background: #ddd; - height: 1px; - 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; - background: #fafafa; - color: #d14; - border: 1px solid #eee; - border-radius: 3px; -} - -.content pre code { - background: transparent; - color: #fff; - border: none; -} - -.content blockquote { - margin: 0; - padding: 5px 20px; - background: #fafafa; - display: block; - color: #333; - border-top: 1px solid #ddd; - border-bottom: 1px solid #ddd; -} - -.content blockquote p { - margin: 0; -} - /*=== Notification and actualize notification */ -.notification { - font-size: 0.9em; - border: 1px solid #eeb; - border-radius: 3px; - box-shadow: 0 0 5px #ddd; - text-align: center; - font-weight: bold; - vertical-align: middle; -} - -.notification.good { - background: #ffe; - color: #c95; - border: 1px solid #eeb; -} - -.notification.bad { - background: #fdd; - color: #844; - border: 1px solid #ecc; -} - -.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 { - background: #fafafa; - color: #666; font-size: 1.2em; - text-align: center; - text-decoration: none; -} - -#bigMarkAsRead:hover { - background: #fff; - color: #0062be; - box-shadow: 0 -5px 10px #eee inset; } #bigMarkAsRead .bigTick { font-size: 3em; } -#bigMarkAsRead:hover .bigTick { - text-shadow: 0 0 5px #0062be; -} - /*=== Navigation menu (for articles) */ #nav_entries { - margin: 0; - background: #fff; - border-top: 1px solid #ddd; - text-align: center; line-height: 2.2em; - table-layout: fixed; } /*=== READER VIEW */ /*================*/ -#stream.reader .flux { - padding: 0 0 50px; - background: #f0f0f0; - color: #333; - border: none; -} - -#stream.reader .flux .author { - margin: 0 0 10px; - color: #666; - font-size: 90%; -} - /*=== GLOBAL VIEW */ /*================*/ -.box.category:not([data-unread="0"]) .box-title { - background: #0084cc; -} - -.box.category .box-title .title { - display: block; - font-weight: normal; -} - -.box.category:not([data-unread="0"]) .box-title .title { - color: #fff; - font-weight: bold; -} - -.box.category .title:not([data-unread="0"])::after { - background: none; - color: #fff; - border: 0; - box-shadow: none; - position: absolute; - top: 5px; left: 10px; - font-weight: bold; - text-shadow: none; -} - -.box.category .item.feed { - padding: 2px 10px; - font-size: 0.8rem; -} - /*=== DIVERS */ /*===========*/ -.aside.aside_feed .nav-form input, -.aside.aside_feed .nav-form select { - width: 140px; -} - -.aside.aside_feed .nav-form .dropdown .dropdown-menu { - left: -20px; -} - -.aside.aside_feed .nav-form .dropdown .dropdown-menu::after { - left: 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; -} - /*=== MOBILE */ /*===========*/ @media (max-width: 840px) { - .form-group .group-name { - padding-bottom: 0; - text-align: right; - } - - .aside { - transition: width 200ms linear; - } - - .aside:target { - box-shadow: -3px 0 3px #aaa; - } - - .aside .toggle_aside, - #panel .close, - .dropdown-menu .toggle_aside { - background: #f6f6f6; - display: block; - width: 100%; - height: 50px; - border-bottom: 1px solid #ddd; - line-height: 50px; - text-align: center; - } - - .aside.aside_feed { - padding: 0; - } - - .nav_menu .btn { - margin: 5px 10px; - padding: 3px 5px; - min-height: 0; - } - - .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 { padding: 1px 5px; - max-width: 97%; - width: 90px; - } - - .nav_menu .search input:focus { - width: 400px; - } - - .dropdown-target:target ~ .dropdown-toggle::after { - background-color: #fff; - border-top: 1px solid #ddd; - border-right: 1px solid #ddd; } .dropdown-target:target ~ .dropdown-toggle:not(.btn) ~ .dropdown-menu { margin-top: 5px; } - .day .name { - font-size: 1.1rem; - text-shadow: none; - } - - .notification a.close { - background: transparent; - display: block; - right: 0; - } - - .notification a.close:hover { - opacity: 0.5; - } - - .notification a.close .icon { - display: none; - } - .post { padding-right: 15px; padding-left: 15px; diff --git a/p/themes/Origine/origine.css b/p/themes/Origine/origine.css index 85362c9db..31ab79391 100644 --- a/p/themes/Origine/origine.css +++ b/p/themes/Origine/origine.css @@ -188,7 +188,8 @@ form th { overflow: hidden; } -a.btn { +a.btn, +.stick .btn { min-height: 25px; line-height: 25px; } diff --git a/p/themes/Origine/origine.rtl.css b/p/themes/Origine/origine.rtl.css index 2d506f120..fa0e97a0f 100644 --- a/p/themes/Origine/origine.rtl.css +++ b/p/themes/Origine/origine.rtl.css @@ -188,7 +188,8 @@ form th { overflow: hidden; } -a.btn { +a.btn, +.stick .btn { min-height: 25px; line-height: 25px; } -- cgit v1.2.3