diff options
| author | 2020-03-01 21:15:17 +0100 | |
|---|---|---|
| committer | 2020-03-01 21:15:17 +0100 | |
| commit | 25666ec5d3edbd614b01594399b03d107c8341ff (patch) | |
| tree | acc9bf81b3b87af4eb9515496aa0f68bfda5223b /p | |
| parent | bfc731632cd32635eace9cfe99095e7971c8a4f8 (diff) | |
[UI] Add RTL support with RTLCSS (#2776)
* Add dir info to gen.php & install.php!
* Add `make rtl` command
Using rtlcss because it has actually has a command-line application!
Diffstat (limited to 'p')
| -rw-r--r-- | p/themes/Ansum/ansum.rtl.css | 1293 | ||||
| -rw-r--r-- | p/themes/BlueLagoon/BlueLagoon.rtl.css | 1362 | ||||
| -rw-r--r-- | p/themes/Dark/dark.rtl.css | 1180 | ||||
| -rw-r--r-- | p/themes/Flat/flat.rtl.css | 1170 | ||||
| -rw-r--r-- | p/themes/Mapco/mapco.rtl.css | 1302 | ||||
| -rw-r--r-- | p/themes/Origine-compact/origine-compact.rtl.css | 1224 | ||||
| -rw-r--r-- | p/themes/Origine/origine.css | 3 | ||||
| -rw-r--r-- | p/themes/Origine/origine.rtl.css | 1174 | ||||
| -rw-r--r-- | p/themes/Pafat/pafat.rtl.css | 1176 | ||||
| -rw-r--r-- | p/themes/Screwdriver/screwdriver.rtl.css | 1356 | ||||
| -rw-r--r-- | p/themes/Swage/swage.rtl.css | 907 | ||||
| -rw-r--r-- | p/themes/base-theme/base.rtl.css | 944 | ||||
| -rw-r--r-- | p/themes/base-theme/template.rtl.css | 1312 | ||||
| -rw-r--r-- | p/themes/p.rtl.css | 20 |
14 files changed, 14422 insertions, 1 deletions
diff --git a/p/themes/Ansum/ansum.rtl.css b/p/themes/Ansum/ansum.rtl.css new file mode 100644 index 000000000..45b61afdc --- /dev/null +++ b/p/themes/Ansum/ansum.rtl.css @@ -0,0 +1,1293 @@ +@font-face { + font-family: "lato"; + font-style: normal; + font-stretch: normal; + font-weight: 400; + src: local("Lato"), url("../fonts/LatoLatin-Regular.woff") format("woff"); } +@font-face { + font-family: "lato"; + font-style: italic; + font-stretch: normal; + font-weight: 400; + src: local("Lato"), url("../fonts/LatoLatin-Italic.woff") format("woff"); } +@font-face { + font-family: "lato"; + font-style: normal; + font-stretch: normal; + font-weight: 700; + src: local("Lato"), url("../fonts/LatoLatin-Bold.woff") format("woff"); } +@font-face { + font-family: "lato"; + font-style: italic; + font-stretch: normal; + font-weight: 700; + src: local("Lato"), url("../fonts/LatoLatin-BoldItalic.woff") format("woff"); } +@font-face { + font-family: "spectral"; + font-style: normal; + font-stretch: normal; + font-weight: 400; + src: local("Spectral"), url("../fonts/Spectral-Regular.woff") format("woff"); } +@font-face { + font-family: "spectral"; + font-style: italic; + font-stretch: normal; + font-weight: 400; + src: local("Spectral"), url("../fonts/Spectral-Italic.woff") format("woff"); } +@font-face { + font-family: "spectral"; + font-style: normal; + font-stretch: normal; + font-weight: 700; + src: local("Spectral"), url("../fonts/Spectral-Bold.woff") format("woff"); } +@font-face { + font-family: "spectral"; + font-style: italic; + font-stretch: normal; + font-weight: 700; + src: local("Spectral"), url("../fonts/Spectral-BoldItalic.woff") format("woff"); } +/* stylelint-disable property-no-vendor-prefix */ +/* FUNCTIONS */ +/* btns */ +.btn { + margin: 0; + padding: 0.5rem 1.5rem; + background: #fcfaf8; + display: inline-block; + color: #766556; + font-size: 1rem; + border: none; + border-radius: 5px; + min-height: 38px; + min-width: 15px; + line-height: 25px; + vertical-align: middle; + cursor: pointer; + overflow: hidden; + -webkit-transition: all 0.15s ease-in-out; + -moz-transition: all 0.15s ease-in-out; + -o-transition: all 0.15s ease-in-out; + transition: all 0.15s ease-in-out; } + .btn.btn-important { + background: #ca7227; + color: #fff; } + .btn.btn-important:hover, .btn.btn-important:active { + background: #b7641d; } + .btn.btn-attention { + background: #f5633e; + color: #fff; } + .btn.btn-attention:hover, .btn.btn-attention:active { + background: #73341f; } + .btn:hover { + text-decoration: none; } + +a.btn { + min-height: 25px; + line-height: 25px; } + +/*=== Forms */ +legend { + margin: 2rem 0 1rem 0; + padding: 0; + display: inline-block; + width: auto; + font-size: 1rem; + clear: both; + text-transform: uppercase; + letter-spacing: 1px; + font-weight: 700; } + +label { + min-height: 25px; + padding: 5px 0; + cursor: pointer; + color: #766556; } + +textarea { + width: 360px; + height: 100px; } + +input, select, textarea, button { + padding: 5px 10px; + background: #fff; + color: #766556; + font-family: "lato", "Helvetica", "Arial", sans-serif; + font-size: 1rem; + border: 1px solid #f5f0ec; + border-radius: 2px; + min-height: 25px; + line-height: 25px; + vertical-align: middle; } + +option { + padding: 0 .5em; } + +input:focus, select:focus, textarea:focus { + color: #363330; + border-color: #ca7227; } + +input:invalid, select:invalid { + color: #f5633e; + border-color: #f5633e; + box-shadow: none; } + +input:disabled, select:disabled { + background: #f5f0ec; } + +input.extend { + transition: width 200ms linear; } + +.form-group { + padding: 5px; + border-radius: 3px; } + .form-group::after { + content: ""; + display: block; + clear: both; } + .form-group .group-name { + padding: 10px 0; + text-align: left; } + .form-group .group-controls { + min-height: 25px; + padding: 5px 0; } + .form-group .group-controls .control { + line-height: 2.0em; } + .form-group table { + margin: 10px 220px 0 0; } + .form-group.form-actions { + margin: 15px 0 25px; + padding: 5px 0; } + .form-group.form-actions .btn { + margin: 0 0 0 0.5rem; } + +/*=== Tables */ +table { + border-collapse: collapse; } + +tr, th, td { + padding: 0.5em; + border: 1px solid #e4d8cc; } + +th { + background: #fcfaf8; } + +form td, +form th { + font-weight: normal; + text-align: center; } + +/*=== COMPONENTS */ +/*===============*/ +/*=== Forms */ +/*=== Horizontal-list */ +.horizontal-list { + margin: 0; + padding: 0.1rem 0; } + .horizontal-list .item { + vertical-align: middle; } + .horizontal-list .item:first-child { + padding-right: 0.5rem; } + +/*=== Dropdown */ +.dropdown-menu { + margin: 0; + padding: 0.5rem 0 1rem 0; + background: #fcfaf8; + font-size: 1rem; + border: none; + border-radius: 3px; + box-shadow: 0px 6px 8px 0px rgba(0, 0, 0, 0.35); + text-align: right; } + .dropdown-menu::after { + background: white; + width: 10px; + height: 10px; + content: ""; + position: absolute; + top: -4px; + left: 13px; + z-index: -10; + transform: rotate(-45deg); } + .dropdown-menu .dropdown-header { + margin: 1.75rem 2rem 0.5rem 0; + font-weight: bold; + text-align: right; + color: #766556; + text-transform: uppercase; + letter-spacing: 1px; } + .dropdown-menu .item { + -webkit-transition: all 0.075s ease-in-out; + -moz-transition: all 0.075s ease-in-out; + -o-transition: all 0.075s ease-in-out; + transition: all 0.075s ease-in-out; } + .dropdown-menu .item a, .dropdown-menu .item span, .dropdown-menu .item .as-link { + padding: 0 2rem; + color: #363330; + font-size: 1rem; + line-height: 2.5em; } + .dropdown-menu .item:hover { + background: #ca7227; + color: #fff; } + .dropdown-menu .item:hover a, .dropdown-menu .item:hover button { + text-decoration: none; + color: #fff; } + .dropdown-menu .item[aria-checked="true"] a::before { + margin: 0 -14px 0 0; + font-weight: bold; } + .dropdown-menu .input select, .dropdown-menu .input input { + margin: 0 auto 5px; + padding: 2px 5px; + border-radius: 3px; } + .dropdown-menu .separator { + margin: 0.75rem 0; + border-bottom: 1px solid #f5f0ec; } + +.tree .tree-folder .tree-folder-items .dropdown-menu .item { + padding: 0; } + .tree .tree-folder .tree-folder-items .dropdown-menu .item a, + .tree .tree-folder .tree-folder-items .dropdown-menu .item button { + color: #363330; } + .tree .tree-folder .tree-folder-items .dropdown-menu .item a:hover, + .tree .tree-folder .tree-folder-items .dropdown-menu .item button:hover { + color: #fff; } + .tree .tree-folder .tree-folder-items .dropdown-menu .item:hover { + background: #ca7227; } + +/*=== Alerts */ +.alert { + margin: 1rem 0; + padding: 1rem; + background: #fcfaf8; + color: #766556; + font-size: 1rem; + border: 1px solid #d9ccbf; + border-radius: 3px; + text-shadow: 0 0 1px #f5f0ec; } + +.alert-head { + font-size: 1.15em; } + +.alert > a { + text-decoration: underline; + color: inherit; } + +.alert-warn { + background: #fdfde0; + color: #73762f; + border: 1px solid #73762f33; } + +.alert-success { + background: #cffdef; + color: #0c7556; + border: 1px solid #0c755633; } + +.alert-error { + background: #fde0d8; + color: #73341f; + border: 1px solid #73341f33; } + +/*=== Pagination */ +.pagination { + background: #f5f0ec; + color: #363330; + font-size: 0.8em; + text-align: center; } + .pagination .item.pager-current { + background: #fbf9f6; + color: #f5f0ec; + font-size: 1.5em; + font-weight: bold; } + .pagination .item a { + display: block; + color: #363330; + font-style: italic; + line-height: 3em; + text-decoration: none; } + .pagination .item a:hover { + background: #363330; + color: #f5f0ec; } + .pagination .loading, + .pagination a:hover.loading { + background: url("loader.gif") center center no-repeat #34495e; + font-size: 0; } + +.content .pagination { + margin: 0; + padding: 0; } + +/*=== Boxes */ +.box { + background: #fff; + border: none; + border-radius: 3px; + box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.25); } + .box .box-title { + margin: 0; + padding: 0.5rem 0.75rem; + background: #f5f0ec; + color: #363330; + border-radius: 2px 2px 0 0; } + .box .box-title img { + margin-left: 0.75rem; } + .box .box-title:hover .configure { + background: url("icons/cog.svg") no-repeat 4px 4px; + display: block; + float: right; + width: 1.75rem; + height: 1.75rem; + border-radius: 2px; + visibility: visible; + margin-left: 0.5rem; } + .box .box-title:hover .configure .icon { + display: none; + border-radius: 3px; + vertical-align: middle; } + .box .box-title:hover .configure:hover { + background: url("icons/cog-white.svg") no-repeat 4px 4px #ca7227; } + .box .box-title .configure { + visibility: hidden; } + .box .box-title form input { + width: 85%; } + .box .box-title form .dropdown { + float: left; } + .box .box-title form .dropdown a.dropdown-toggle { + padding: 0; + border-radius: 0; + background-image: url(icons/more.svg); + background-repeat: no-repeat; + background-position: left 8px; } + .box .box-title form .dropdown a.dropdown-toggle img { + display: none; } + .box .box-content .item { + padding: 0.5rem 0.75rem; + color: #363330; + font-size: 1rem; + border-bottom: 1px solid #f5f0ec; + line-height: 1.7em; } + .box .box-content .item img { + margin-left: 0.75rem; } + .box .box-content .item .configure { + background: url("icons/cog.svg") no-repeat 4px 4px; + display: block; + float: right; + width: 1.75rem; + height: 1.75rem; + border-radius: 2px; + visibility: hidden; + margin-left: 0.5rem; } + .box .box-content .item .configure .icon { + display: none; + border-radius: 3px; + vertical-align: middle; } + .box .box-content .item .configure:hover { + background: url("icons/cog-white.svg") no-repeat 4px 4px #ca7227; } + .box .box-content .item:hover .configure { + visibility: visible; } + .box .box-content .item:last-child { + border-bottom: none; } + +/*=== "Load more" part */ +#bigMarkAsRead { + text-align: center; + text-decoration: none; + background: #fdf6ef; + color: #ca7227; + -webkit-transition: all 0.15s ease-in-out; + -moz-transition: all 0.15s ease-in-out; + -o-transition: all 0.15s ease-in-out; + transition: all 0.15s ease-in-out; } + #bigMarkAsRead:hover { + background: #ca7227; + color: #fff; } + #bigMarkAsRead:hover .bigTick { + background: url(icons/tick-white.svg) center no-repeat; } + #bigMarkAsRead .bigTick { + margin: 0.5rem 0; + background: url(icons/tick-color.svg) center no-repeat; + display: inline-block; + width: 64px; + height: 64px; + text-indent: -9999px; + white-space: nowrap; } + +.formLogin { + background: #fbf9f6; } + .formLogin .header .configure { + padding-left: 1rem; } + .formLogin .header .configure img { + margin-left: 0.5rem; } + .formLogin .header .configure a.signin { + color: #fff; } + .formLogin h1 { + color: #fff; } + .formLogin form#crypto-form div { + margin-bottom: 1rem; } + .formLogin form#crypto-form div label { + color: #d9ccbf; + font-size: 1rem; } + .formLogin form#crypto-form div input { + background: #221f1d; } + .formLogin form#crypto-form div input:focus { + background: #fcfaf8; + color: #363330; } + +/*=== 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; } + +/*=== Tree */ +.tree { + margin: 10px 0; } + .tree#sidebar { + scrollbar-color: rgba(255, 255, 0, 0.1) rgba(0, 0, 0, 0.05); + scrollbar-color: #36333033 #36333022; } + .tree .tree-folder { + border-bottom: 1px solid #f0e7da; + box-shadow: inset 1px -11px 8px #0003; } + .tree .tree-folder .tree-folder-title { + padding: 12px 16px; + background: #fbf9f6; + position: relative; + font-size: 0.85rem; + letter-spacing: 1px; + font-weight: 700; + text-transform: uppercase; } + .tree .tree-folder .tree-folder-title .title { + background: inherit; + color: #363330; } + .tree .tree-folder .tree-folder-title .title:hover { + text-decoration: none; } + .tree .tree-folder.active .tree-folder-title { + background: #fbf9f6; + font-weight: bold; } + .tree .tree-folder .tree-folder-items { + background: #f7f2ea; } + .tree .tree-folder .tree-folder-items .item { + padding: 0 1rem; + line-height: 2.5rem; + font-size: 1rem; + font-weight: 400; + -webkit-transition: all 0.15s ease-in-out; + -moz-transition: all 0.15s ease-in-out; + -o-transition: all 0.15s ease-in-out; + transition: all 0.15s ease-in-out; } + .tree .tree-folder .tree-folder-items .item.active { + background: #ca7227; } + .tree .tree-folder .tree-folder-items .item.active .dropdown li a { + color: #363330; } + .tree .tree-folder .tree-folder-items .item.active .dropdown li a:hover { + color: #363330; } + .tree .tree-folder .tree-folder-items .item.active a { + color: #fff; } + .tree .tree-folder .tree-folder-items .item:hover { + background: #efe3d3; } + .tree .tree-folder .tree-folder-items .item a { + text-decoration: none; + color: #363330; } + .tree .tree-folder .tree-folder-items .feed .item-title:not([data-unread="0"])::before { + margin: 11px 4px 0 6px; + padding: 3px 4px; + background: rgba(35, 35, 0, 0.15); + display: block; + float: right; + font-size: 0.75rem; + border-radius: 12px; + content: attr(data-unread); + text-align: center; + line-height: 0.75rem; } + +/*=== Buttons */ +.stick { + vertical-align: middle; + font-size: 0; } + .stick input, .stick .btn { + border-radius: 0; } + .stick .btn:first-child, + .stick input:first-child { + border-radius: 0 5px 5px 0; } + .stick .btn:last-child, .stick input:last-child, .stick .btn + .dropdown > .btn { + border-radius: 5px 0 0 5px; } + .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: 1px solid #e4d8cc; } + +.aside { + background: #fbf9f6; } + .aside.aside_feed { + padding: 10px 0; + text-align: center; + background: #fbf9f6; + border-left: 1px solid #f0e7da; } + .aside.aside_feed .tree { + margin: 10px 0 50px; } + +/* Sidebar des pages de configuration */ +/*=== Navigation */ +.nav-list .nav-header, +.nav-list .item { + height: 2.5em; + line-height: 2.5em; + font-size: 1rem; } +.nav-list .item { + background: #fbf9f6; + -webkit-transition: all 0.15s ease-in-out; + -moz-transition: all 0.15s ease-in-out; + -o-transition: all 0.15s ease-in-out; + transition: all 0.15s ease-in-out; } + .nav-list .item a { + padding: 0 1rem; + color: #363330; } + .nav-list .item .error a { + color: #f5633e; } + .nav-list .item:hover { + background: #efe3d3; + color: #363330; } + .nav-list .item:hover .error a { + background: #ca7227; + color: #363330; } + .nav-list .item:hover .empty a { + background: #f4f762; + color: #363330; } + .nav-list .item:hover a { + color: #363330; + text-decoration: none; } + .nav-list .item.active { + background: #ca7227; + color: #fff; } + .nav-list .item.active .error a { + background: #ca7227; + color: #fff; } + .nav-list .item.active .empty a { + background: #f4f762; + color: #fff; } + .nav-list .item.active a { + color: #fff; + text-decoration: none; } +.nav-list.empty a { + color: #f4f762; } +.nav-list .disable { + text-align: center; + background: #fcfaf8; + color: #ba9; } +.nav-list .nav-header { + padding: 0 10px; + font-weight: bold; + color: #766556; + text-transform: uppercase; + letter-spacing: 1px; + margin-top: 1rem; } +.nav-list .nav-form { + padding: 3px; + text-align: center; } +.nav-list .nav-head { + margin: 0; + text-align: left; + color: #fff; } + .nav-list .nav-head a { + color: #fff; } + .nav-list .nav-head .item { + padding: 5px 10px; + font-size: 0.9rem; + line-height: 1.5rem; } + +/*=== Aside main page (categories) */ +.aside_feed .tree-folder-title > .title:not([data-unread="0"])::after { + margin: -0.5rem 0 0 1rem; + padding: 0 0.75rem; + background: rgba(35, 35, 0, 0.15); + border-radius: 12px; + position: absolute; + left: 0; + line-height: 1.5rem; + text-align: center; } + +.feed.item.empty.active { + background: #766556; } + +.feed.item.error.active { + background: #766556; } + +.feed.item.empty, +.feed.item.empty > a { + color: #766556; } + +.feed.item.error, +.feed.item.error > a { + color: #766556; } + +.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:hover .dropdown-toggle > .icon, +.aside_feed .tree-folder-items .item.active .dropdown-toggle > .icon { + border-radius: 3px; } + +.aside_feed .stick #btn-importExport { + border-right-color: #fbf9f6; } + +/*=== STRUCTURE */ +/*===============*/ +/*=== Header */ +.header { + padding: 0.5rem 1.35rem; + background: #fbf9f6; + display: block; + width: auto; + table-layout: none; } + .header .item { + vertical-align: middle; } + .header .item.title { + width: 280px; + font-weight: 400; } + .header .item.title h1 a { + text-decoration: none; + color: #363330; + font-size: 1rem; + text-transform: uppercase; + letter-spacing: 1px; } + .header .item.title h1 a img { + margin-left: 0.5rem; } + .header .item.search input { + width: 230px; + color: #363330; + border: none; + border-radius: 0 2px 2px 0; + background-color: #f7f2ea; + -webkit-transition: all 0.15s ease-in-out; + -moz-transition: all 0.15s ease-in-out; + -o-transition: all 0.15s ease-in-out; + transition: all 0.15s ease-in-out; } + .header .item.search input:hover { + background-color: #efe3d3; } + .header .item.search input:focus { + width: 350px; + color: #766556; + background-color: #fff; } + .header .item.search .btn { + width: 3rem; + border-radius: 2px 0 0 2px; + background-color: #ca7227; + background-position: center; + background-repeat: no-repeat; + background-image: url(icons/magnifier.svg); + border-right-width: 0; + min-height: 35px; } + .header .item.search .btn img { + display: none; } + .header .item.search .btn:hover { + background-color: #b7641d; } + .header .item.configure { + width: 2rem; + position: absolute; + left: 1rem; + top: 1.25rem; + text-align: center; } + .header .item.configure .btn { + padding: 0 0.5rem; + background-color: transparent; + background-position: center; + background-repeat: no-repeat; + background-image: url(icons/cog.svg); } + .header .item.configure .btn img { + display: none; } + +/*=== Body */ +#global { + height: calc(100% - 85px); } + +/*=== Prompt (centered) */ +.prompt { + text-align: center; } + +.prompt label { + text-align: right; } + +.prompt form { + margin: 10px auto 20px auto; + width: 200px; } + +.prompt input { + margin: 5px auto; + width: 100%; } + +.prompt p { + margin: 20px 0; } + +/*=== New article notification */ +#new-article { + background: #ca7227; + font-size: 1rem; + text-align: center; } + +#new-article:hover { + background: #b7641d; } + +#new-article > a { + line-height: 3em; + font-weight: bold; + color: #fff; } + +#new-article > a:hover { + text-decoration: none; } + +/*=== Day indication */ +.day { + padding: 1rem 1.25rem 0 0; + color: #6d655f; + font-size: 0.875rem; + font-weight: 700; + line-height: 3em; + letter-spacing: 1px; + text-transform: uppercase; } + .day .name { + padding: 0 1rem 0 1rem; + color: #363330; + font-size: 0.875rem; + position: relative; + right: 0; + text-transform: uppercase; } + +/*=== Index menu */ +.nav_menu { + text-align: center; + padding: 5px 0; } + .nav_menu .btn { + border-right-width: 0; + padding: 0.5rem 1rem; + background-color: #fcfaf8; + background-position: center; + background-repeat: no-repeat; } + .nav_menu .btn:hover { + background-color: #f5f0ec; } + .nav_menu .stick { + background: #fcfaf8; } + .nav_menu .stick .btn { + border-right-width: 0; + padding: 0.5rem 1rem; + background-color: #fcfaf8; + background-position: center; + background-repeat: no-repeat; + -webkit-transition: all 0.15s ease-in-out; + -moz-transition: all 0.15s ease-in-out; + -o-transition: all 0.15s ease-in-out; + transition: all 0.15s ease-in-out; } + .nav_menu .stick .btn:hover { + background-color: #e4d8cc; } + .nav_menu .stick .btn.active { + background-color: #ca7227; } + .nav_menu .stick .btn img.icon { + display: none; } + .nav_menu .stick .btn#toggle-read { + background-image: url(icons/read.svg); } + .nav_menu .stick .btn#toggle-read.active { + background-image: url(icons/read-white.svg); } + .nav_menu .stick .btn#toggle-unread { + background-image: url(icons/unread.svg); } + .nav_menu .stick .btn#toggle-unread.active { + background-image: url(icons/unread-white.svg); } + .nav_menu .stick .btn#toggle-starred { + background-image: url(icons/starred.svg); } + .nav_menu .stick .btn#toggle-starred.active { + background-image: url(icons/starred-white.svg); } + .nav_menu .stick .btn#toggle-non-starred { + background-image: url(icons/non-starred.svg); } + .nav_menu .stick .btn#toggle-non-starred.active { + background-image: url(icons/non-starred-white.svg); } + .nav_menu .stick .btn.read_all { + padding: 5px 16px; + color: #363330; + background-color: #fcfaf8; + -webkit-transition: all 0.15s ease-in-out; + -moz-transition: all 0.15s ease-in-out; + -o-transition: all 0.15s ease-in-out; + transition: all 0.15s ease-in-out; } + .nav_menu .stick .btn.read_all:hover { + background-color: #e4d8cc; } + .nav_menu .stick .btn.view-normal { + background-image: url(icons/view-list.svg); } + .nav_menu .stick .btn.view-normal.active { + background-image: url(icons/view-list-white.svg); } + .nav_menu .stick .btn.view-global { + background-image: url(icons/view-global.svg); } + .nav_menu .stick .btn.view-global.active { + background-image: url(icons/view-global-white.svg); } + .nav_menu .stick .btn.view-reader { + background-image: url(icons/view-reader.svg); } + .nav_menu .stick .btn.view-reader.active { + background-image: url(icons/view-reader-white.svg); } + .nav_menu .stick .btn.view-rss { + background-image: url(icons/rss.svg); } + .nav_menu .stick .dropdown a.dropdown-toggle { + border-right-width: 0; + background-image: url(icons/more.svg); } + +#dropdown-query ~ .dropdown-menu .dropdown-header .icon { + vertical-align: middle; + background-color: #ba9; + border-radius: 3px; } + +/*=== Content of feed articles */ +.content, .content.thin { + padding: 20px 10px; + font-size: 1.125rem; + line-height: 1.8rem; } + .content h1.title a, .content h1 a, .content.thin h1.title a, .content.thin h1 a { + color: #363330; + font-family: "spectral", serif; + font-size: 2rem; } + .content h1.title a:hover, .content h1 a:hover, .content.thin h1.title a:hover, .content.thin h1 a:hover { + color: #ca7227; + text-decoration: none; } + .content .author, .content.thin .author { + color: #6d655f; + font-size: 1.125rem; } + .content p, .content ul, .content.thin p, .content.thin ul { + font-size: 1.125rem; + line-height: 1.8rem; } + .content .content hr, .content.thin .content hr { + margin: 30px 10px; + background: #e4d8cc; + height: 1px; + border: 0; + box-shadow: 0 2px 5px #ccc; } + .content pre, .content.thin pre { + margin: 10px auto; + padding: 10px 20px; + overflow: auto; + background: #221f1d; + color: #fff; + font-size: 0.9rem; + border-radius: 3px; } + .content pre code, .content.thin pre code { + background: transparent; + color: #fff; + border: none; } + .content code, .content.thin code { + padding: 2px 5px; + background: #fcfaf8; + color: #f5f0ec; + border: 1px solid #f5f0ec; + border-radius: 3px; } + .content blockquote, .content.thin blockquote { + margin: 0; + padding: 5px 20px; + background: #fcfaf8; + display: block; + color: #363330; + border-top: 1px solid #e4d8cc; + border-bottom: 1px solid #e4d8cc; } + .content blockquote p, .content.thin blockquote p { + margin: 0; } + +/*=== Notification and actualize notification */ +.notification { + padding: 1rem 0; + background: #e4d8cc; + width: 100%; + height: 3rem; + color: #766556; + font-size: 1em; + border: none; + position: fixed; + top: auto; + bottom: 0; + right: 0; + left: 0; + text-align: center; + line-height: 3em; + z-index: 10; + vertical-align: middle; } + .notification .msg { + display: inline-block; + font-size: 1rem; } + .notification.good { + background: #10f5b2; + color: #fff; } + .notification.bad { + background: #f5633e; + color: #fff; } + .notification a.close { + padding: 0 15px; + border-radius: 3px 0 0 3px; + line-height: 3em; } + .notification.good a.close:hover { + background: #0c7556; } + .notification.bad a.close:hover { + background: #73341f; } + .notification#actualizeProgress { + line-height: 2em; } + .notification#actualizeProgress br { + display: none; } + +/*=== Navigation menu (for articles) */ +#nav_entries { + margin: 0; + text-align: center; + line-height: 3em; + table-layout: fixed; + background: #fbf9f6; } + +/*=== Feed articles */ +.flux { + background: #fff; + -webkit-transition: all 0.15s ease-in-out; + -moz-transition: all 0.15s ease-in-out; + -o-transition: all 0.15s ease-in-out; + transition: all 0.15s ease-in-out; } + .flux:hover { + background: #fcfaf8; } + .flux:hover:not(.current):hover .item.title { + background: #fcfaf8; } + .flux.current { + background: #fff; + border-right-color: #ca7227; } + .flux.not_read:not(.current) { + background: #f2f6f8; } + .flux.not_read:not(.current):hover .item.title { + background: #f2f6f8; } + .flux.not_read .item.title a { + color: #161a38; } + .flux.not_read .item.website a { + color: #161a38; } + .flux.not_read .item.date { + color: #161a3899; } + .flux.favorite { + border-right-color: #ffc300; + -webkit-transition: all 0.15s ease-in-out; + -moz-transition: all 0.15s ease-in-out; + -o-transition: all 0.15s ease-in-out; + transition: all 0.15s ease-in-out; } + .flux.favorite:not(.current) { + background: #fff6da; } + .flux.favorite:not(.current):hover .item.title { + background: #fff6da; } + .flux .website a { + color: #363330; + opacity: 0.75; } + .flux .website .favicon { + padding: 5px; } + .flux .date { + color: #363330; + font-size: 0.85rem; + opacity: 0.75; } + .flux .bottom { + font-size: 1rem; + text-align: center; } + +.flux_header { + font-size: 1rem; + cursor: pointer; + border-top: 1px solid #f5f0ec; } + .flux_header .title { + font-size: 1rem; } + +/*=== GLOBAL VIEW */ +/*================*/ +#stream .box.category:not([data-unread="0"]) .box-title .title { + font-weight: bold; } +#stream .box.category .box-title { + padding: 1.5rem; + background: none; } + #stream .box.category .box-title a.title { + color: #766556; + font-size: 1rem; + font-weight: normal; + text-decoration: none; + text-align: right; + text-transform: uppercase; + letter-spacing: 1px; } + #stream .box.category .box-title a.title:not([data-unread="0"])::after { + margin: -0.5rem 0 0 1rem; + padding: 0 0.75rem; + background: #f5f0ec; + border-radius: 12px; + position: absolute; + top: 1.75rem; + left: 0; + line-height: 1.5rem; + text-align: center; } + #stream .box.category .box-title a.title:hover { + color: #ca7227; } +#stream .box.category .box-content { + padding-bottom: 0.5rem; } + #stream .box.category .box-content .item.feed { + padding: 0.5rem 1.5rem; + font-size: 1rem; } + #stream .box.category .box-content .item.feed a { + color: #363330; + font-weight: 400; } + #stream .box.category .box-content .item.feed a:hover { + color: #ca7227; + text-decoration: none; } + +#overlay { + background: rgba(0, 0, 0, 0.65); } + +#panel { + top: 3rem; + left: 3rem; + bottom: 3rem; + right: 3rem; + border-radius: 3px; } + +/*=== READER VIEW */ +/*================*/ +#stream.reader .flux { + padding: 0 0 50px; + background: #f5f0ec; + color: #363330; + border: none; } + +#stream.reader .flux .author { + margin: 0 0 10px; + color: #ba9; + font-size: 90%; } + +/*=== Configuration pages */ +.post { + padding: 1rem 2rem; + font-size: 1rem; } + .post form { + margin: 1rem 0; } + .post form .horizontal-list { + margin-bottom: 0.5rem; } + .post.content { + max-width: 550px; } + .post h1, .post h2 { + color: #363330; + font-size: 3rem; + margin-top: 1.75rem; + font-weight: 300; + line-height: 1.2em; } + .post a[href="./"] { + margin: 0; + padding: 0.75rem 1.5rem; + background: #fcfaf8; + display: inline-block; + color: #766556; + font-size: 1rem; + border: 1px solid #e4d8cc; + border-radius: 5px; + min-width: 15px; + line-height: 25px; + vertical-align: middle; + cursor: pointer; + overflow: hidden; } + .post a[href="./"]:hover { + background: #ca7227; + color: white; + border: 1px solid #ca7227; + text-decoration: none; } + +#slider { + border-right: none; + box-shadow: 0px 6px 8px 0px rgba(0, 0, 0, 0.35); } + +.slide-container .properties { + padding: 1rem; + background: rgba(0, 0, 0, 0.75); + color: white; + border: 0; } + .slide-container .properties .page-number { + left: 1rem; + top: 1rem; } + +/*=== LOGS */ +/*=========*/ +.loglist { + overflow: hidden; + border: 1px solid #ba9; } + +.log { + margin: 10px 0; + padding: 5px 2%; + background: #fcfaf8; + color: #766556; + font-size: 0.8rem; + overflow: auto; } + +.log > .date { + margin: 0 0 0 10px; + padding: 5px 10px; + border-radius: 20px; } + +.log.error > .date { + background: #f5633e; + color: #fff; } + +.log.warning > .date { + background: #f4f762; } + +.log.notice > .date { + background: #f5f0ec; } + +.log.debug > .date { + background: #221f1d; + color: #fff; } + +/*=== STATISTICS */ +/*===============*/ +.stat { + margin: 10px 0 20px; } + +.stat th, +.stat td, +.stat tr { + border: none; } + +.stat > table td, +.stat > table th { + border-bottom: 1px solid #e4d8cc; } + +.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; } + +/*=== MOBILE */ +/*===========*/ +@media (max-width: 840px) { + ul.nav .item { + width: 100%; } + ul.nav .item img { + display: none; } + ul.nav .item a { + padding: 1rem 2.5rem 1rem 1rem; + background: url("../../themes/icons/logout.svg") no-repeat #efe3d3 97% center; + display: inline-block; + width: 100%; + color: #363330; + -webkit-transition: all 0.2s ease-in-out; + -moz-transition: all 0.2s ease-in-out; + -o-transition: all 0.2s ease-in-out; + transition: all 0.2s ease-in-out; } + ul.nav .item a:hover, ul.nav .item a:active { + background: url("../../themes/icons/logout.svg") no-repeat #f5633e 97% center; + text-decoration: none; + color: #fff; } + + .aside { + -webkit-transition: all 0.2s ease-in-out; + -moz-transition: all 0.2s ease-in-out; + -o-transition: all 0.2s ease-in-out; + transition: all 0.2s ease-in-out; } + .aside.aside_feed { + padding: 0; } + .aside .tree .tree-folder .tree-folder-items .item a { + padding: 0.5rem 1rem; } + + .aside .toggle_aside, + #panel .close { + background: #b7641d; + display: block; + width: 100%; + height: 50px; + line-height: 50px; + text-align: center; } + + .header { + padding: 0.5rem; } + .header .item.title { + display: none; } + .header .item.search input { + width: 90%; + height: 3.5rem; } + .header .item.search input:focus { + width: 100%; } + .header .item.search .btn { + min-height: 49px; + padding: 0.5rem 2rem; } + .header .item.configure { + width: 2.75rem; + top: 3.125rem; } + .header .item.configure .dropdown .btn { + padding: 1.125rem; } + + .nav_menu .btn { + margin: 0; + padding: 0.85rem 1.25rem; } + .nav_menu .stick { + margin: 0.5rem 0.5rem; } + .nav_menu .stick .btn { + margin: 0; + padding: 0.85rem 1.25rem; } + .nav_menu .stick .btn.read_all { + padding: 0.85rem 1.25rem; } + .nav_menu .search { + display: none; + max-width: 97%; } + .nav_menu .search .input { + max-width: 97%; + width: 90px; } + .nav_menu .search .input:focus { + width: 400px; } + + #stream .flux .flux_header { + padding: 0.5rem 0; } + + .day { + text-align: center; + padding: 1rem 0; } + .day .name { + padding: 0; + display: block; + width: 100%; + line-height: 1.5rem; + margin-bottom: 1rem; } + + .pagination { + margin: 0 0 3.5em; } + + #nav_entries { + line-height: 4.5rem; } + + .notification { + border-radius: 0; } + .notification a.close { + background: transparent; + display: block; + right: 0; } + .notification a.close:hover { + opacity: 0.5; } + .notification a.close .icon { + display: none; } } +/*=== GENERAL */ +/*============*/ +html, body { + background: #f5f0ec; + height: 100%; + font-family: "lato", "Helvetica", "Arial", sans-serif; + font-size: 0.875rem; } + +/*=== Links */ +a, button.as-link { + outline: none; + color: #ca7227; } diff --git a/p/themes/BlueLagoon/BlueLagoon.rtl.css b/p/themes/BlueLagoon/BlueLagoon.rtl.css new file mode 100644 index 000000000..b8f526003 --- /dev/null +++ b/p/themes/BlueLagoon/BlueLagoon.rtl.css @@ -0,0 +1,1362 @@ +@charset "UTF-8"; + +/*=== GENERAL */ +/*============*/ +html, body { + background: #fafafa; + height: 100%; + font-family: "OpenSans", "Cantarell", "Helvetica", "Arial", "PingFang SC", "Microsoft YaHei", sans-serif; + font-size: 92%; +} + +/*=== Links */ +a, button.as-link { + color: #0062be; + outline: none; +} + +/*=== Forms */ +.form-group { + display: inline-block; + float: right; + width: 100%; + height: auto; +} + +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: 5px; + background: #fff; + color: #222; + border: 1px solid #ccc; + border-radius: 3px; + box-shadow: 0 1px 2px #ccc inset, 0 1px #fff; + min-height: 25px; + line-height: 25px; + vertical-align: middle; +} + +option { + padding: 0 .5em; +} + +input:focus, select:focus, textarea:focus { + color: #0f0f0f; + border: solid 1px #0062bf; + box-shadow: 0 0 3px #0062bf; +} + +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; + border-radius: 4px; + box-shadow: 0 1px rgba(255,255,255,0.08) inset; +} + +.form-group .group-name { + padding: 10px 0; + text-align: left; +} + +.form-group .group-controls { + min-height: 25px; + padding: 5px 0; +} + +.form-group table { + margin: 10px 220px 0 0; +} + +/*=== Buttons */ +button.as-link[disabled] { + color: #555 !important; +} + +.dropdown-menu .input select, .dropdown-menu .input input { + margin: 0 auto 5px; + padding: 2px 5px; + background: #444; + color: #fff; + border: solid 1px #171717; + border-radius: 3px; + box-shadow: 0 2px 2px #222 inset, 0px 1px rgba(255, 255, 255, 0.08); +} + +.stick { + vertical-align: middle; + font-size: 0; +} + +.stick input, +.stick .btn { + border-radius: 0; +} + +.stick .btn:first-child,.stick input:first-child { + border-radius: 0 6px 6px 0; +} + +.stick .btn:last-child, .stick input:last-child { + border-radius: 6px 0 0 6px; +} + +.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 .btn + .dropdown > .btn { + border-right: none; + border-radius: 3px 0 0 3px; +} + +.btn { + margin: 0; + padding: 5px 10px; + background: linear-gradient(0deg, #ede7de 0%, #fff 100%) #ede7de; + background: -webkit-linear-gradient(bottom, #ede7de 0%, #fff 100%); + display: inline-block; + color: #222; + font-size: 0.9rem; + border: solid 1px #ccc; + border-radius: 4px; + min-height: 37px; + min-width: 15px; + text-shadow: 0px -1px rgba(255,255,255,0.08); + vertical-align: middle; + cursor: pointer; + overflow: hidden; +} + +a.btn { + min-height: 25px; + line-height: 25px; +} + +.btn:hover { + text-shadow: 0 0 2px #fff; + text-decoration: none; +} + +.btn.active,.btn:active,.dropdown-target:target ~ .btn.dropdown-toggle { + background: linear-gradient(-180deg, #ede7de 0%, #fff 100%) #ede7de; + background: -webkit-linear-gradient(top, #ede7de 0%, #fff 100%); +} + +.nav_menu .btn.active, .nav_menu .btn:active, .nav_menu .dropdown-target:target ~ .btn.dropdown-toggle { + background: linear-gradient(-180deg, #ede7de 0%, #f6f6f6 100%) #ede7de; + background: -webkit-linear-gradient(top, #ede7de 0%, #f6f6f6 100%); + border: solid 1px #ccc; + border-radius: 4px; + box-shadow: 0 1px #fff; +} + +.nav_menu .btn { + background: transparent; + border: 0; +} + +.read_all { + color: #222; +} + +.btn.dropdown-toggle[href="#dropdown-configure"] { + background: linear-gradient(0deg, #ede7de 0%, #fff 100%) #ede7de; + background: -webkit-linear-gradient(bottom, #ede7de 0%, #fff 100%); + border: solid 1px #ccc; + border-radius: 4px; + box-shadow: 0 1px #fff; +} + +.btn.dropdown-toggle:active { + background: transparent; +} + +.btn-important { + background: linear-gradient(-180deg, #0090ff 0%, #0062be 100%) #e4992c; + background: -webkit-linear-gradient(top, #0090ff 0%, #0062be 100%); + color: #fff; + border-radius: 4px; + box-shadow: 0 1px rgba(255,255,255,0.08) inset; + text-shadow: 0px -1px rgba(255,255,255,0.08); + font-weight: normal; +} + +.btn-important:active { + background: linear-gradient(0deg, #e4992c 0%, #d18114 100%) #e4992c; + background: -webkit-linear-gradient(bottom, #e4992c 0%, #d18114 100%); +} + +.btn-attention { + background: #e95b57; + background: linear-gradient(to bottom, #e95b57, #bd362f); + background: -webkit-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: -webkit-linear-gradient(top, #d14641 0%, #bd362f 100%); +} + +.btn-attention:active { + background: #bd362f; + box-shadow: none; +} + +.btn[type="reset"] { + background: linear-gradient(-180deg, #222 0%, #171717 100%) #171717; + background: -webkit-linear-gradient(top, #222 0%, #171717 100%); + color: #fff; + box-shadow: 0 -1px rgba(255,255,255,0.08) inset; +} +/*=== Navigation */ +.nav-list .nav-header, +.nav-list .item { + height: 2.5em; + line-height: 2.5em; + font-size: 0.9rem; +} + +.nav-list .item:hover { + text-shadow: 0 0 2px rgba(255,255,255,0.28); + color: #fff; +} + +.nav-list .item.active { + margin: 0; + background: linear-gradient(-180deg, #0090ff 0%, #0062be 100%) #e4992c; + background: -webkit-linear-gradient(top, #0090ff 0%, #0062be 100%); + box-shadow: 1px 2px 2px #171717, 0px 1px rgba(255, 255, 255, 0.08) inset; + border-width: medium medium 1px; + border-style: none none solid; + border-color: -moz-use-text-color -moz-use-text-color #171717; +} + +.nav-list .item.active a { + color: #fff; +} + +.nav-list .disable { + background: #fafafa; + color: #aaa; + text-align: center; +} + +.nav-list .item > a { + padding: 0 10px; + color: #ccc; +} + +.nav-list a:hover { + text-decoration: none; +} + +.nav-list .item.empty a { + color: #f39c12; +} + +.nav-list .item.active.empty a { + background: linear-gradient(-180deg, #e4992c 0%, #d18114 100%) #e4992c; + background: -webkit-linear-gradient(-180deg, #e4992c 0%, #d18114 100%); + 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: transparent; + color: #222; +} + +.nav-list .nav-form { + padding: 3px; + text-align: center; +} + +.nav-head { + margin: 0; + background: linear-gradient(0deg, #ede7de 0%, #fff 100%) #ede7de; + background: -webkit-linear-gradient(bottom, #ede7de 0%, #fff 100%); + text-align: left; +} + +.nav-head .item { + padding: 5px 10px; + font-size: 0.9rem; + line-height: 1.5rem; +} + +/*=== Horizontal-list */ +.horizontal-list { + margin: 0; + padding: 0; +} + +.horizontal-list .item { + vertical-align: middle; +} + +/*=== Dropdown */ +.dropdown-menu { + margin: 5px 0 0; + padding: 5px 0; + background: #222; + font-size: 0.8rem; + border: 1px solid #171717; + border-radius: 4px; + box-shadow: 0 0 3px #000; + text-align: right; +} + +.dropdown-menu::after { + background: #222; + width: 10px; + height: 10px; + border-top: 1px solid #171717; + border-right: 1px solid #171717; + content: ""; + position: absolute; + top: -6px; + left: 13px; + z-index: -10; + transform: rotate(-45deg); +} + +.dropdown-header { + display: none; +} + +.dropdown-menu > .item > a, +.dropdown-menu > .item > span, +.dropdown-menu > .item > .as-link { + padding: 0 22px; + line-height: 2.5em; + color: #ccc; + font-size: 0.8rem; +} + +.dropdown-menu > .item > label { + color: #ccc; +} + +.dropdown-menu > .item:hover { + background: linear-gradient(-180deg, #0090ff 0%, #0062be 100%) #e4992c; + background: -webkit-linear-gradient(top, #0090ff 0%, #0062be 100%); + color: #fff; +} + +.dropdown-menu > .item[aria-checked="true"] > a::before { + font-weight: bold; + margin: 0 -14px 0 0; +} + +.dropdown-menu > .item:hover > a { + color: #fff; + text-decoration: none; +} + +.separator { + margin: 5px 0; + border-bottom: 1px solid #171717; + box-shadow: 0 1px rgba(255,255,255,0.08); +} + +/*=== 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; + text-align: center; + color: #333; + font-size: 0.8em; +} + +.content .pagination { + margin: 0; + padding: 0; +} + +.pagination .item.pager-current { + font-weight: bold; + font-size: 1.5em; +} + +.pagination .item a { + display: block; + color: #333; + font-style: italic; + line-height: 3em; + text-decoration: none; +} + +.pagination .item a:hover { + background: #ddd; +} + +.pagination:first-child .item { + border-bottom: 1px solid #aaa; +} + +.pagination:last-child .item { + border-top: 1px solid #ddd; +} + +.pagination .loading, +.pagination a:hover.loading { + background: url("loader.gif") center center no-repeat #fff; + height: 55px; + font-size: 0 +} + +/*=== Boxes */ +.box { + background: #f9f7f4; + border-radius: 4px; + box-shadow: 0 1px #fff; +} + +.box .box-title { + margin: 0; + padding: 5px 10px; + background: linear-gradient(0deg, #ede7de 0%, #fff 100%) #171717; + background: -webkit-linear-gradient(bottom, #ede7de 0%, #fff 100%); + color: #888; + font-size: 1.1rem; + border-radius: 4px 4px 0 0; + box-shadow: 0px -1px #fff inset,0 -2px #ccc inset; + text-shadow: 0 1px #ccc; + font-weight: normal; +} + +.box .box-content { + max-height: 260px; +} + +.box .box-content .item { + padding: 0 10px; + font-size: 0.9rem; + line-height: 2.5em; +} + +.box .box-title .configure, +.box .box-content .item .configure { + visibility: hidden; +} + +.box .box-title:hover .configure, +.box .box-content .item:hover .configure { + visibility: visible; +} + +/*=== Tree */ +.tree { + margin: 10px 0; +} + +.tree-folder-title { + position: relative; + padding: 0 10px; + line-height: 2.5rem; + font-size: 0.9rem; +} + +.tree-folder-title .title { + background: inherit; + color: #fff; +} + +.tree-folder-title .title:hover { + text-decoration: none; +} + +.tree-folder.active .tree-folder-title { + background: linear-gradient(-180deg, #222 0%, #171717 100%) #171717; + background: -webkit-linear-gradient(top, #222 0%, #171717 100%); + color: #fff; + box-shadow: 0px 1px #171717, 0px 1px rgba(255, 255, 255, 0.08) inset; + text-shadow: 0 0 2px rgba(255,255,255,0.28); +} + +.tree-folder.active > .tree-folder-title > a.title { + color: #0090ff; + text-shadow: 0 1px rgba(255,255,255,0.08); +} + +.tree-folder-items { + padding: 8px 0; + background: #171717; + box-shadow: 0 4px 4px #171717 inset, 0 1px rgba(255,255,255,0.08),0 -1px rgba(255,255,255,0.08); +} + +.tree-folder-items > .item { + padding: 0 10px; + line-height: 2.5rem; + font-size: 0.8rem; +} + +.tree-folder-items > .item.active { + margin: 0px 8px; + background: linear-gradient(-180deg, #222 0%, #171717 100%) #171717; + background: -webkit-linear-gradient(top, #222 0%, #171717 100%); + border-radius: 4px; + box-shadow: 0px 1px #171717, 0px 1px rgba(255, 255, 255, 0.08) inset, 0 2px 2px #111; +} + +.tree-folder-items > .item > a { + text-decoration: none; + color: #fff; + font-size: 0.92em; +} + +.tree-folder-items > .item.active > a { + 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 { + background: linear-gradient(0deg, #ede7de 0%, #fff 100%) #ede7de; + background: -webkit-linear-gradient(bottom, #ede7de 0%, #fff 100%); + border-bottom: solid 1px #bdb7ae; + box-shadow: 0 -1px rgba(255,255,255,0.28) inset; +} + +.header > .item { + padding: 0; + vertical-align: middle; + text-align: center; +} + +.header > .item.title .logo { + width: 40px; + height: 40px; +} + +.header > .item.title { + width: 250px; +} + +.header > .item.title h1 { + margin: 10px 0; +} + +.header > .item.title h1 a { + color: #222; + font-size: 28px; + text-decoration: none; + text-shadow: 0 1px #fff; +} + +.header > .item.search input { + width: 230px; +} + +.header .item.search input:focus { + width: 350px; +} + +/*=== Body */ +#global { + background: #f9f7f4; + /* Header : 60px + 1px border bottom */ + height: calc(100% - 61px); +} + +.aside { + background: #222; + width: 235px; + box-shadow: 0 2px 2px #171717 inset; +} + +.aside.aside_feed { + padding: 10px 0; + text-align: center; +} + +.aside.aside_feed .tree { + margin: 10px 0 50px; +} + +/*=== Aside main page (categories) */ +.aside_feed .tree-folder-title > .title:not([data-unread="0"])::after { + position: absolute; + left: 3px; + padding: 1px 5px; + color: #fff; + text-shadow: 0 1px rgba(255,255,255,0.08); +} + +.aside_feed .btn-important { + border: none; +} + +/*=== Aside main page (feeds) */ +.feed.item.empty, +.feed.item.empty > a { + color: #e67e22; +} + +.feed.item.error, +.feed.item.error > a { + color: #bd362f; +} + +.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:hover .dropdown-toggle > .icon, +.aside_feed .tree-folder-items .item.active .dropdown-toggle > .icon { + 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 { + text-align: center; + padding: 14px 0px; + text-shadow: 0 1px rgba(255,255,255,0.08); +} + +.prompt label { + text-align: right; +} + +.prompt form { + margin: 10px auto 20px auto; + width: 180px; +} + +.prompt input { + margin: 5px auto; + width: 100%; +} + +.prompt p { + margin: 20px 0; +} + +.prompt input#username,.prompt input#passwordPlain { + background: #fff; + border: solid 1px #ccc; + box-shadow: 0 4px -4px #ccc inset,0px 1px rgba(255, 255, 255, 0.08); +} + +.prompt input#username:focus,.prompt input#passwordPlain:focus { + border: solid 1px #0062be; + box-shadow: 0 0 3px #0062be; +} + +/*=== New article notification */ +#new-article { + background: #0084cc; + text-align: center; + font-size: 0.9em; +} + +#new-article:hover { + background: #06c; +} + +#new-article > a { + line-height: 3em; + color: #fff; + font-weight: bold; +} + +#new-article > a:hover { + text-decoration: none; +} + +/*=== Day indication */ +.day { + padding: 0 10px; + background: #f9f7f4; + color: #666; + box-shadow: 0 -1px #ccc, 0 -1px rgba(255,255,255,0.28) inset; + font-style: italic; + line-height: 3em; + text-shadow: 0 1px rgba(255,255,255,0.28); + text-align: center; +} + +#new-article + .day { + border-top: none; +} + +.day .name { + display: none; +} + +/*=== Index menu */ +.nav_menu { + padding: 5px 0; + background: linear-gradient(0deg, #ede7de 0%, #c2bcb3 100%) #ede7de; + background: -webkit-linear-gradient(bottom, #ede7de 0%, #c2bcb3 100%); + border-bottom: 1px solid #ccc; + box-shadow: 0 -1px rgba(255, 255, 255, 0.28) inset; + text-align: center; +} + +#panel >.nav_menu { + background: linear-gradient(0deg, #ede7de 0%, #fff 100%) #ede7de; + background: -webkit-linear-gradient(bottom, #ede7de 0%, #fff 100%); +} + +#panel > .nav_menu > #nav_menu_read_all { + background: linear-gradient(0deg, #ede7de 0%, #fff 100%) #ede7de; + background: -webkit-linear-gradient(bottom, #ede7de 0%, #fff 100%); + border: 1px solid #ccc; + border-radius: 4px; + box-shadow: 0px 1px #fff; +} + +#panel > .nav_menu > #nav_menu_read_all .dropdown > .btn.dropdown-toggle { + border: none; + border-right: solid 1px #ccc; + border-radius: 4px 0 0 4px; +} + +/*=== Feed articles */ +.flux_content { + background: #fff; +} + +.flux { + background: #f9f7f4; +} + +.flux:hover { + background: #f9f7f4; +} + +.flux:not(.current):hover .item.title { + background: #f9f7f4; +} + +.flux.current .flux .item.title a { + text-shadow: 0 0 2px #ccc; +} + +.flux.not_read:not(.current):hover .item.title { + opacity: 0.85; +} + +.flux.favorite { + background: #fff6da; +} + +.flux.favorite:not(.current):hover { + background: #f9f7f4; +} + +.flux.favorite:not(.current):hover .item.title { + background: #f9f7f4; +} + +.flux.current { + background: linear-gradient(0deg, #dad4cb 0%, #fff 100%) #dad4cb; + background: -webkit-linear-gradient(bottom, #dad4cb 0%, #fff 100%); + border-right: solid 4px #0062bf; + box-shadow: 0 -1px #fff inset, 0 2px #ccc; +} + +.flux .item.title { + opacity: 0.35; +} + +.flux.favorite .item.title { + opacity: 1; +} + +.flux.not_read .item.title { + opacity: 1; +} + +.flux.current .item.title a { + color: #0f0f0f; +} + +.flux .item.title a { + color: #333; +} + +.flux_header { + font-size: 0.8rem; + border-top: 1px solid #ddd; + box-shadow: 0 -1px rgba(255,255,255,0.28) inset; + cursor: pointer; +} + +.flux_header .title { + font-size: 0.9rem; +} + +.flux .website .favicon { + padding: 5px; +} + +.flux .date { + color: #666; + font-size: 0.7rem; +} + +.flux .bottom { + font-size: 0.8rem; + text-align: center; +} + +/*=== Content of feed articles */ +.content { + padding: 20px 10px; +} + +.content > h1.title > a { + color: #000; +} + +.content hr { + margin: 30px 10px; + 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 { + padding: 0 5px 0 0; + background: #222; + color: #fff; + font-size: 0.9em; + border: none; + border-radius: 0 0 6px 6px; + box-shadow: 0px 0px 4px rgba(0,0,0,0.45), 0 -1px rgba(255,255,255,0.08) inset, 0 2px 2px #171717 inset; + text-align: center; + font-weight: bold; + line-height: 3em; + position: absolute; + top: 0; + z-index: 10; + vertical-align: middle; +} + +.notification.good { + color: #fff; +} + +.notification.bad { + background: #222; + color: #eb2901; +} + +.notification a.close { + padding: 0 15px; + line-height: 3em; +} + +.notification#actualizeProgress { + line-height: 2em; +} + +/*=== "Load more" part */ +#bigMarkAsRead { + background: #f9f7f4; + color: #666; + box-shadow: 0 1px rgba(255,255,255,0.28)inset; + text-align: center; + text-decoration: none; + text-shadow: 0 -1px 0 #aaa; +} + +#bigMarkAsRead:hover { + background: #f9f7f4; + background: radial-gradient(circle at 50% -25% , #ccc 0%, #f9f7f4 50%); + color: #000; +} + +#bigMarkAsRead:hover .bigTick { + text-shadow: 0 0 10px #666; +} + +/*=== Navigation menu (for articles) */ +#nav_entries { + background: linear-gradient(-180deg, #222 0%, #171717 100%) #222; + background: -webkit-linear-gradient(top, #222 0%, #171717 100%); + width: 235px; + border-top: 1px solid #171717; + box-shadow: 0 1px rgba(255,255,255,0.08) inset, 0 -2px 2px #171717; + text-align: center; + line-height: 3em; + 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 */ +/*================*/ +#stream.global { + padding: 24px 0; +} + +.box.category .box-title { + background: linear-gradient(0deg, #ede7de 0%, #fff 100%) #171717; + font-size: 1.2rem; + border-radius: none; + box-shadow: 0px -1px #fff inset,0 -2px #ccc inset; + line-height: 2em; + text-shadow: 0 1px #ccc; +} + +.box.category .box-title .title { + font-weight: normal; + text-decoration: none; + text-align: right; + color: #888; +} + +.box.category:not([data-unread="0"]) .box-title .title { + color: #222; + font-weight: bold; +} + +.box.category .title:not([data-unread="0"])::after { + background: none; + border: 0; + position: absolute; + top: 5px; left: 10px; + font-weight: bold; +} + +.box.category .item.feed { + padding: 2px 10px; + font-size: 0.8rem; +} + +.box.category .item.feed:not(.empty):not(.error) .item-title { + color: #222; +} + +/*=== PANEL */ +/*===========*/ +#panel { + background: #f9f7f4; + border-radius: 8px; + box-shadow: 0px 0px 4px #000; +} +/*=== DIVERS */ +/*===========*/ +.aside.aside_feed .nav-form input,.aside.aside_feed .nav-form select { + width: 130px; +} + +.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 { + background: rgba(255,255,255,0.38); + border-bottom: 1px solid #ccc; + box-shadow: 0 1px #fff; +} + +.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: 250px; +} + +/*=== LOGS */ +/*=========*/ +.loglist { + border: 1px solid #aaa; + border-radius: 5px; + overflow: hidden; +} + +.log { + padding: 5px 10px; + background: #fafafa; + color: #333; + font-size: 0.8rem; +} + +.log+.log { + border-top: 1px solid #aaa; +} + +.log .date { + display: block; + font-weight: bold; +} + +.log.error { + background: #fdd; + color: #844; +} + +.log.warning { + background: #ffe; + color: #c95; +} + +.log.notice { + background: #f4f4f4; + color: #aaa; +} + +.log.debug { + background: #333; + color: #eee; +} + +#slider.active { + background: #f8f8f8; + box-shadow: 4px 0 4px rgba(15, 15, 15, 0.55); +} + +#close-slider.active { + background: rgba(15, 15, 15, 0.35); +} + +/*=== MOBILE */ +/*===========*/ + +@media screen and (max-width: 840px) { + .header { + display: table; + } + + .nav-login { + display: none; + } + + .aside { + width: 0; + border-top: none; + box-shadow: -3px 0 3px #000; + transition: width 200ms linear; + } + + .aside:target { + width: 235px; + } + + .aside .toggle_aside, + #panel .close { + background: #171717; + display: block; + width: 100%; + height: 40px; + line-height: 40px; + text-align: center; + box-shadow: 0 1px rgba(255,255,255,0.08); + } + + .aside .btn-important { + margin: 20px 0 0; + display: inline-block; + } + + .aside.aside_feed { + padding: 0; + } + + .nav_menu .btn { + margin: 5px 10px; + } + + .nav_menu .stick { + margin: 0 10px; + } + + .nav_menu .stick .btn { + margin: 5px 0; + } + + .nav_menu .search { + display: none; + } + + .nav_menu .search input { + max-width: 97%; + width: 90px; + } + + .nav_menu .search input:focus { + width: 400px; + } + + .day .name { + display: none; + } + + .pagination { + margin: 0 0 3.5em; + } + + .notification a.close { + background: transparent; + display: block; + right: 0; + } + + .notification a.close:hover { + opacity: 0.5; + } + + .notification a.close .icon { + display: none; + } + + #nav_entries { + width: 100%; + } +} + +@media (max-width: 700px) { + .header { + display: none; + } + + .nav-login { + display: inline-block; + width: 100%; + } + + .nav_menu .search { + display: inline-block; + } + + .aside .btn-important { + display: none; + } +} diff --git a/p/themes/Dark/dark.rtl.css b/p/themes/Dark/dark.rtl.css new file mode 100644 index 000000000..e2a0b4cae --- /dev/null +++ b/p/themes/Dark/dark.rtl.css @@ -0,0 +1,1180 @@ +@charset "UTF-8"; + +/*=== GENERAL */ +/*============*/ +html, body { + background: #1c1c1c; + height: 100%; + color: #888; + font-family: "OpenSans", "Cantarell", "Helvetica", "Arial", "PingFang SC", "Microsoft YaHei", sans-serif; +} + +/*=== Links */ +a, button.as-link { + color: #6986b2; + outline: none; +} + +/*=== Images */ +img.favicon { + background: #fff; + border-radius: 2px; +} + +/*=== Forms */ +legend { + margin: 20px 0 5px; + padding: 5px 0; + font-size: 1.4em; + border-bottom: 1px solid #2f2f2f; +} + +label { + min-height: 25px; + padding: 5px 0; + cursor: pointer; +} + +textarea { + width: 360px; + height: 100px; +} + +input, select, textarea { + padding: 5px; + background: #333; + color: #999; + border: 1px solid #000; + border-radius: 3px; + box-shadow: 0 2px 2px #1d1d1d inset; + min-height: 25px; + line-height: 25px; + vertical-align: middle; +} + +option { + padding: 0 .5em; +} + +input:focus, select:focus, textarea:focus { + color: #6986b2; + border-color: #2f2f2f; +} + +input:invalid, select:invalid { + border-color: #f00; + box-shadow: 0 0 2px 1px #f00; +} + +input:disabled, select:disabled { + background: #666; + color: #aaa; +} + +input.extend { + transition: width 200ms linear; +} + +/*=== Tables */ +table { + border-collapse: collapse; +} + +tr, th, td { + padding: 0.5em; + border: 1px solid #333; +} + +th { + background: #222; +} + +form td, +form th { + font-weight: normal; + text-align: center; +} + +/*=== COMPONENTS */ +/*===============*/ +/*=== Forms */ +.form-group.form-actions { + padding: 5px 0; + background: #1a1a1a; + border-top: 1px solid #2f2f2f; +} + +.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: 5px 0; +} + +.form-group table { + margin: 10px 220px 0 0; +} + +/*=== Buttons */ +button.as-link[disabled] { + color: #445 !important; +} + +.stick { + vertical-align: middle; + font-size: 0; +} + +.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 #000; +} + +.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:focus+input { + border-right: 1px solid #000; +} + +.stick input+input:focus { + border-right: 1px solid #333; +} + +.stick .btn + .dropdown > .btn { + border-right: none; + border-radius: 3px 0 0 3px; +} + +.btn { + margin: 0; + padding: 5px 10px; + background: #111; + display: inline-block; + color: #888; + font-size: 0.9rem; + border: 1px solid #000; + border-radius: 3px; + min-height: 37px; + min-width: 15px; + line-height: 25px; + vertical-align: middle; + cursor: pointer; + overflow: hidden; +} + +a.btn { + min-height: 25px; + line-height: 25px; +} + +.btn:hover { + text-decoration: none; + background: linear-gradient(to top, #4a5d7a 0%, #26303f 100%); +} + +.btn.active, +.dropdown-target:target ~ .btn.dropdown-toggle { + background: #333; +} + +.btn:active { + background: #26303f; +} + +.btn-important { + font-weight: normal; + background: #26303f; +} + +.btn-important:hover { + background: linear-gradient(to top, #4a5d7a 0%, #26303f 100%); +} + +.btn-important:active { + background: #26303f; +} + +.btn-attention { + background: #801; +} + +.btn-attention:hover { + background: linear-gradient(to top, #c04 0%, #801 100%); +} + +.btn-attention:active { + background: #801; +} + +/*=== Navigation */ +.nav-list .nav-header, +.nav-list .item { + height: 2.5em; + line-height: 2.5em; + font-size: 0.9rem; +} + +.nav-list .item:hover { + background: #26303f; +} + +.nav-list .item.active { + background: #333; +} + +.nav-list .item:hover a, +.nav-list .item.active a { + color: #888; +} + +.nav-list .disable { + background: #fafafa; + color: #aaa; + text-align: center; +} + +.nav-list .item > a { + padding: 0 10px; +} + +.nav-list a:hover { + text-decoration: none; +} + +.nav-list .item.empty a { + color: #c95; +} + +.nav-list .item:hover.empty a, +.nav-list .item.active.empty a { + background: #c95; + color: #fff; +} + +.nav-list .item.error a { + color: #a44; +} + +.nav-list .item:hover.error a, +.nav-list .item.active.error a { + background: #a44; + color: #fff; +} + +.nav-list .nav-header { + padding: 0 10px; + font-weight: bold; + background: #111; + border-bottom: 1px solid #333; +} + +.nav-list .nav-form { + padding: 3px; + text-align: center; +} + +.nav-head { + margin: 0; + text-align: left; + background: #1c1c1c; + border-bottom: 1px solid #333; +} + +.nav-head .item { + padding: 5px 10px; + font-size: 0.9rem; + line-height: 1.5rem; +} + +/*=== Horizontal-list */ +.horizontal-list { + margin: 0; + padding: 0; +} + +.horizontal-list .item { + vertical-align: middle; +} + +/*=== Dropdown */ +.dropdown-menu { + margin: 5px 0 0; + padding: 5px 0; + background: #1a1a1a; + font-size: 0.8rem; + border: 1px solid #888; + border-radius: 5px; + text-align: right; +} + +.dropdown-menu::after { + background: #1a1a1a; + width: 10px; + height: 10px; + border-top: 1px solid #888; + border-right: 1px solid #888; + content: ""; + position: absolute; + top: -6px; + left: 13px; + z-index: -10; + transform: rotate(-45deg); +} + +.dropdown-header { + padding: 0 5px 5px; + font-weight: bold; + text-align: right; + color: #888; +} + +.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:hover { + background: #26303f; + color: #888; +} + +.dropdown-menu > .item[aria-checked="true"] > a::before { + font-weight: bold; + margin: 0 -14px 0 0; +} + +.dropdown-menu > .item:hover > a { + text-decoration: none; + color: #888; +} + +.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 #333; +} + +/*=== Alerts */ +.alert { + margin: 15px auto; + padding: 10px 15px; + background: #111; + color: #aaa; + font-size: 0.9em; + border: 1px solid #888; + border-radius: 5px; +} + +.alert-head { + font-size: 1.15em; +} + +.alert > a { + text-decoration: underline; + color: inherit; +} + +.alert-warn { + color: #c95; + border: 1px solid #c95; +} + +.alert-success { + color: #484; + border: 1px solid #484; +} + +.alert-error { + color: #a44; + border: 1px solid #a44; +} + +/*=== Pagination */ +.pagination { + background: #1c1c1c; + color: #888; + font-size: 0.8em; + text-align: center; +} + +.content .pagination { + margin: 0; + padding: 0; +} + +.pagination .item.pager-current { + background: #111; + font-size: 1.5em; + font-weight: bold; +} + +.pagination .item a { + display: block; + font-style: italic; + line-height: 3em; + text-decoration: none; + color: #666; +} + +.pagination .item a:hover { + background-color: #111; +} + +.pagination:first-child .item { + border-bottom: 1px solid #333; +} + +.pagination:last-child .item { + border-top: 1px solid #333; +} + +.pagination .loading, +.pagination a:hover.loading { + background: url("loader.gif") center center no-repeat; + font-size: 0; +} + +/*=== Boxes */ +.box { + border: 1px solid #000; + border-radius: 5px; +} + +.box .box-title { + margin: 0; + padding: 5px 10px; + background: #26303f; + border-bottom: 1px solid #000; + border-radius: 5px 5px 0 0; +} + +.box .box-content { + max-height: 260px; +} + +.box .box-content .item { + padding: 0 10px; + font-size: 0.9rem; + line-height: 2.5em; +} + +.box .box-title .configure, +.box .box-content .item .configure { + visibility: hidden; +} + +.box .box-title:hover .configure, +.box .box-content .item:hover .configure { + visibility: visible; +} + +/*=== Tree */ +.tree { + margin: 10px 0; +} + +.tree-folder-title { + padding: 0 10px; + background: #1c1c1c; + font-size: 1rem; + position: relative; + line-height: 2.5rem; +} + +.tree-folder-title .title { + background: inherit; + color: #888; +} + +.tree-folder-title .title:hover { + text-decoration: none; +} + +.tree-folder.active .tree-folder-title { + background: #2c2c2c; + font-weight: bold; +} + +.tree-folder-items { + background: #161616; + border-top: 1px solid #222; + border-bottom: 1px solid #222; +} + +.tree-folder-items > .item { + padding: 0 10px; + line-height: 2.5rem; + font-size: 0.8rem; +} + +.tree-folder-items > .item.active { + background: #1c1c1c; +} + +.tree-folder-items > .item > a { + text-decoration: none; +} + +.tree-folder-items > .item.active > a { + 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 */ +.header { + height: 85px; +} + +.header > .item { + padding: 10px; + vertical-align: middle; + text-align: center; + border-bottom: 1px solid #333; +} + +.header > .item.title { + width: 230px; +} + +.header > .item.title h1 { + margin: 0.5em 0; +} + +.header > .item.title h1 a { + text-decoration: none; +} + +.header > .item.search input { + width: 230px; +} + +.header .item.search input:focus { + width: 350px; +} + +/*=== Body */ +#global { + height: calc(100% - 85px); +} + +.aside { + background: #1c1c1c; + border-left: 1px solid #333; +} + +.aside.aside_feed { + padding: 10px 0; + text-align: center; +} + +.aside.aside_feed .tree { + margin: 10px 0 50px; +} + +/*=== Aside main page (categories) */ +.aside_feed .tree-folder-title > .title:not([data-unread="0"])::after { + margin: 10px 0; + padding: 0 10px; + background: inherit; + font-size: 0.9rem; + position: absolute; + left: 0; + line-height: 1.5rem; +} + +/*=== Aside main page (feeds) */ +.feed.item.empty.active { + background: #c95; +} + +.feed.item.error.active { + background: #a44; +} + +.feed.item.empty, +.feed.item.empty > a { + color: #c95; +} + +.feed.item.error, +.feed.item.error > a { + color: #a44; +} + +.feed.item.empty.active, +.feed.item.empty.active > a { + color: #111; +} + +.feed.item.error.active, +.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:hover .dropdown-toggle > .icon, +.aside_feed .tree-folder-items .item.active .dropdown-toggle > .icon { + border-radius: 3px; + background-color: #111; +} + +/*=== Configuration pages */ +.post { + padding: 10px 50px; + font-size: 0.9em; +} + +.post form { + margin: 10px 0; +} + +.post.content { + max-width: 550px; +} + +/*=== Prompt (centered) */ +.prompt { + text-align: center; +} + +.prompt label { + text-align: right; +} + +.prompt form { + margin: 10px auto 20px auto; + width: 200px; +} + +.prompt input { + margin: 5px auto; + width: 100%; +} + +.prompt p { + margin: 20px 0; +} + +/*=== New article notification */ +#new-article { + background: #26303f; + font-size: 0.9em; + text-align: center; +} + +#new-article:hover { + background: #4a5d7a; +} + +#new-article > a { + line-height: 3em; + font-weight: bold; + color: #fff; +} + +#new-article > a:hover { + text-decoration: none; +} + +/*=== Day indication */ +.day { + padding: 0 10px; + font-weight: bold; + line-height: 3em; + border-top: 1px solid #333; + border-bottom: 1px solid #333; +} + +.day .name { + padding: 0 0 0 10px; + color: #aab; + font-size: 1.8em; + opacity: 0.3; + font-style: italic; + text-align: left; + text-shadow: 0px -1px 0px #333; +} + +/*=== Index menu */ +.nav_menu { + text-align: center; + padding: 5px 0; + border-bottom: 1px solid #2f2f2f; +} + +/*=== Feed articles */ +.flux { + border-right: 2px solid #2f2f2f; +} + +.flux:hover { + background: #111; +} + +.flux.current { + background: #111; + border-right: 2px solid #0062be; +} + +.flux.not_read { + border-right: 2px solid #ff5300; +} + +.flux.favorite { + border-right: 2px solid #ffc300; +} + + +.flux_header { + font-size: 0.8rem; + cursor: pointer; +} + +.flux_header .title { + font-size: 0.9rem; +} + +.flux_header .item.title a { + color: #888; +} + +.flux .website .favicon { + margin: 5px; +} + +.flux .date { + color: #666; + font-size: 0.7rem; +} + +.flux:not(.current):hover .item.title { + background: #111; +} + +.flux .bottom { + font-size: 0.8rem; + text-align: center; +} + +/*=== Content of feed articles */ +.content { + padding: 20px 10px; +} + +.content > h1.title > a { + color: #888; +} + +.content hr { + margin: 30px 10px; + background: #666; + height: 1px; + border: 0; + box-shadow: 0 2px 5px #666; +} + +.content pre { + margin: 10px auto; + padding: 10px 20px; + background: #222; + color: #fff; + font-size: 0.9rem; + border: 1px solid #000; + border-radius: 3px; + overflow: auto; +} + +.content code { + padding: 2px 5px; + background: #000; + color: #d14; + border: 1px solid #333; + border-radius: 3px; +} + +.content pre code { + background: transparent; + color: #fff; + border: none; +} + +.content blockquote { + margin: 0; + padding: 5px 20px; + background: #222; + display: block; + color: #999; + border-top: 1px solid #444; + border-bottom: 1px solid #444; +} + +.content blockquote p { + margin: 0; +} + +/*=== Notification and actualize notification */ +.notification { + padding: 0 5px 0 0; + background: #111; + color: #c95; + font-size: 0.9em; + border: 1px solid #c95; + border-radius: 5px; + box-shadow: 0 0 5px #666; + text-align: center; + font-weight: bold; + line-height: 3em; + z-index: 10; + vertical-align: middle; +} + +.notification.good { + border-color: #484; + color: #484; +} + +.notification.bad { + border-color: #a44; + color: #a44; +} + +.notification a.close { + padding: 0 15px; + line-height: 3em; +} + +.notification a.close:hover { + background: #222; + border-radius: 3px 0 0 3px; +} + +.notification.good a.close:hover { + background: #484; +} + +.notification.bad a.close:hover { + background: #a44; +} + +.notification#actualizeProgress { + line-height: 2em; +} + +/*=== "Load more" part */ +#bigMarkAsRead { + text-align: center; + text-decoration: none; +} + +#bigMarkAsRead:hover { + background: #111; + color: #aaa; +} + +/*=== Navigation menu (for articles) */ +#nav_entries { + margin: 0; + text-align: center; + line-height: 3em; + table-layout: fixed; + background: #111; + border-top: 1px solid #333; +} + +/*=== READER VIEW */ +/*================*/ +#stream.reader .flux { + padding: 0 0 50px; + background: #111; + border: none; +} + +#stream.reader .flux .author { + margin: 0 0 10px; + color: #666; + font-size: 90%; +} + +/*=== GLOBAL VIEW */ +/*================*/ +.box.category .box-title .title { + font-weight: normal; + text-decoration: none; + text-align: right; + color: #888; +} + +.box.category:not([data-unread="0"]) .box-title { + background: #34495e; +} + +.box.category:not([data-unread="0"]) .box-title:active { + background: #26303f; +} + +.box.category:not([data-unread="0"]) .box-title .title { + color: #fff; + font-weight: bold; +} + +.box.category .title:not([data-unread="0"])::after { + background: none; + border: 0; + position: absolute; + top: 5px; left: 10px; + font-weight: bold; + box-shadow: none; + text-shadow: none; +} + +.box.category .item.feed { + padding: 2px 10px; + font-size: 0.8rem; +} + +/*=== Panel */ +#panel { + background: #1c1c1c; + border: 1px solid #666; + border-radius: 3px; +} + +/*=== Slider */ +#slider { + background-color: #1c1c1c; + border-right: 1px solid #666; +} + +/*=== 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 #333; +} + +.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; +} + +/*=== LOGS */ +/*=========*/ +.loglist { + overflow: hidden; + border: 1px solid #333; +} + +.log { + padding: 5px 10px; + background: #111; + color: #888; + font-size: 0.8rem; +} + +.log+.log { + border-top: 1px solid #333; +} + +.log .date { + display: block; + font-weight: bold; +} + +.log.error { + background: #a44; + color: #fff; +} + +.log.warning { + background: #c95; + color: #fff; +} + +.log.notice { + background: #ec9; + color: #000; +} + +.log.debug { + background: #111; + color: #eee; +} + +/*=== MOBILE */ +/*===========*/ + +@media (max-width: 840px) { + .aside { + transition: width 200ms linear; + } + + .aside .toggle_aside, + #panel .close { + background: #111; + display: block; + width: 100%; + height: 50px; + border-bottom: 1px solid #333; + line-height: 50px; + text-align: center; + } + + .aside.aside_feed { + padding: 0; + } + + .nav_menu .btn { + margin: 5px 10px; + } + + .nav_menu .stick { + margin: 0 10px; + } + + .nav_menu .stick .btn { + margin: 5px 0; + } + + .nav_menu .search { + display: inline-block; + max-width: 97%; + } + + .nav_menu .search input { + max-width: 97%; + width: 90px; + } + + .nav_menu .search input:focus { + width: 400px; + } + + .day .name { + font-size: 1.1rem; + } + + .pagination { + margin: 0 0 3.5em; + } + + .notification { + border-top: none; + border-left: none; + border-right: none; + border-radius: 0; + } + + .notification a.close { + display: block; + right: 0; + } + + .notification a.close:hover { + opacity: 0.5; + } + + .notification a.close .icon { + display: none; + } +} diff --git a/p/themes/Flat/flat.rtl.css b/p/themes/Flat/flat.rtl.css new file mode 100644 index 000000000..8fe568d99 --- /dev/null +++ b/p/themes/Flat/flat.rtl.css @@ -0,0 +1,1170 @@ +@charset "UTF-8"; + +/*=== GENERAL */ +/*============*/ +html, body { + background: #fafafa; + height: 100%; + font-family: "OpenSans", "Cantarell", "Helvetica", "Arial", "PingFang SC", "Microsoft YaHei", sans-serif; +} + +/*=== Links */ +a, button.as-link { + color: #2980b9; + outline: none; +} + +/*=== Forms */ +legend { + margin: 20px 0 5px; + padding: 5px 20px; + background: #ecf0f1; + display: inline-block; + width: auto; + font-size: 1.4em; + border-radius: 20px; + clear: both; +} + +label { + min-height: 25px; + padding: 5px 0; + cursor: pointer; + color: #444; +} + +textarea { + width: 360px; + height: 100px; +} + +input, select, textarea { + padding: 5px; + background: #fff; + color: #666; + border: none; + border-bottom: 3px solid #ddd; + border-right-color: #ddd; + border-radius: 5px; + min-height: 25px; + line-height: 25px; + vertical-align: middle; +} + +option { + padding: 0 .5em; +} + +input:focus, select:focus, textarea:focus { + color: #333; + border-color: #2980b9; +} + +input:invalid, select:invalid { + color: #f00; + border-color: #f00; + box-shadow: none; +} + +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 { + padding: 5px; + border: 1px solid transparent; + border-radius: 3px; +} + +.form-group::after { + content: ""; + display: block; + clear: both; +} + +.form-group:hover { + background: #fff; + border: 1px solid #eee; + border-radius: 3px; +} + +.form-group.form-actions { + margin: 15px 0 25px; + padding: 5px 0; + background: #ecf0f1; + border-top: 3px solid #bdc3c7; + border-radius: 5px 5px 0 0; +} + +.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: 5px 0; +} + +.form-group .group-controls .control { + line-height: 2.0em; +} + +.form-group table { + margin: 10px 220px 0 0; +} + +/*=== Buttons */ +.stick { + vertical-align: middle; + font-size: 0; +} + +.stick input, +.stick .btn { + border-radius: 0; +} + +.stick .btn:first-child, +.stick input:first-child { + border-radius: 0 5px 5px 0; +} + +.stick .btn:last-child, +.stick input:last-child, +.stick .btn + .dropdown > .btn { + border-radius: 5px 0 0 5px; +} + +.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-width: 1px; + border-right-style: solid; +} + +.btn { + margin: 0; + padding: 5px 10px; + background: #3498db; + display: inline-block; + color: #fff; + font-size: 0.9rem; + border: none; + border-bottom: 3px solid #2980b9; + border-right-color: #2980b9; + border-radius: 5px; + min-height: 38px; + min-width: 15px; + line-height: 25px; + vertical-align: middle; + cursor: pointer; + overflow: hidden; +} + +a.btn { + min-height: 25px; + line-height: 25px; +} + +.btn:hover { + text-decoration: none; +} + +.btn.active, +.btn:active, +.btn:hover, +.dropdown-target:target ~ .btn.dropdown-toggle { + background: #2980b9; +} + +.btn-important { + font-weight: normal; + background: #e67e22; + color: #fff; + border-bottom: 3px solid #d35400; + border-right-color: #d35400; +} + +.btn-important:hover, +.btn-important:active { + background: #d35400; +} + +.btn-attention { + background: #e74c3c; + color: #fff; + border-bottom: 3px solid #c0392b; + border-right-color: #c0392b; +} + +.btn-attention:hover, +.btn-attention:active { + background: #c0392b; +} + +/*=== Navigation */ +.nav-list .nav-header, +.nav-list .item { + height: 2.5em; + line-height: 2.5em; + font-size: 0.9rem; +} + +.nav-list .item:hover, +.nav-list .item.active { + background: #2980b9; + color: #fff; +} + +.nav-list .item:hover a, +.nav-list .item.active a { + color: #fff; +} + +.nav-list .disable { + text-align: center; + background: #fafafa; + color: #aaa; +} + +.nav-list .item > a { + padding: 0 10px; +} + +.nav-list a:hover { + text-decoration: none; +} + +.nav-list .item.empty a { + color: #f39c12; +} + +.nav-list .item:hover.empty a, +.nav-list .item.active.empty a { + background: #f39c12; + color: #fff; +} + +.nav-list .item.error a { + color: #bd362f; +} + +.nav-list .item:hover.error a, +.nav-list .item.active.error a { + background: #bd362f; + color: #fff; +} + +.nav-list .nav-header { + padding: 0 10px; + font-weight: bold; + background: #34495e; + color: #fff; +} + +.nav-list .nav-form { + padding: 3px; + text-align: center; +} + +.nav-head { + margin: 0; + text-align: left; + background: #34495e; + color: #fff; +} + +.nav-head a { + color: #fff; +} + +.nav-head .item { + padding: 5px 10px; + font-size: 0.9rem; + line-height: 1.5rem; +} + +/*=== Horizontal-list */ +.horizontal-list { + margin: 0; + padding: 0; +} + +.horizontal-list .item { + vertical-align: middle; +} + +/*=== Dropdown */ +.dropdown-menu { + margin: 5px 0 0; + padding: 5px 0; + background: #fafafa; + font-size: 0.8rem; + border: 1px solid #95a5a6; + border-radius: 3px; + text-align: right; +} + +.dropdown-menu::after { + background: #fff; + width: 10px; + height: 10px; + border-top: 1px solid #95a5a6; + border-right: 1px solid #95a5a6; + content: ""; + position: absolute; + top: -6px; + left: 13px; + z-index: -10; + transform: rotate(-45deg); +} + +.dropdown-header { + padding: 0 5px 5px; + font-weight: bold; + text-align: right; + color: #34495e; +} + +.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:hover { + background: #2980b9; + color: #fff; +} + +.dropdown-menu > .item[aria-checked="true"] > a::before { + font-weight: bold; + margin: 0 -14px 0 0; +} + +.dropdown-menu > .item:hover > a { + text-decoration: none; + color: #fff; +} + +.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 { + text-decoration: underline; + color: inherit; +} + +.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: #ecf0f1; + color: #000; + font-size: 0.8em; + text-align: center; +} + +.content .pagination { + margin: 0; + padding: 0; +} + +.pagination .item.pager-current { + background: #34495e; + color: #ecf0f1; + font-size: 1.5em; + font-weight: bold; +} + +.pagination .item a { + display: block; + font-style: italic; + line-height: 3em; + text-decoration: none; + color: #000; +} + +.pagination .item a:hover { + background: #34495e; + color: #ecf0f1; +} + +.pagination .loading, +.pagination a:hover.loading { + background: url("loader.gif") center center no-repeat #34495e; + font-size: 0; +} + +/*=== Boxes */ +.box { + border: 1px solid #ddd; + border-radius: 5px; +} + +.box .box-title { + margin: 0; + padding: 5px 10px; + background: #ecf0f1; + color: #333; + border-bottom: 1px solid #ddd; + border-radius: 5px 5px 0 0; +} + +.box .box-content { + max-height: 260px; +} + +.box .box-content .item { + padding: 0 10px; + font-size: 0.9rem; + line-height: 2.5em; +} + +.box .box-title .configure, +.box .box-content .item .configure { + visibility: hidden; +} + +.box .box-content .item .configure .icon { + vertical-align: middle; + background-color: #95a5a6; + border-radius: 3px; +} + +.box .box-title:hover .configure, +.box .box-content .item:hover .configure { + visibility: visible; +} + +/*=== Tree */ +.tree { + margin: 10px 0; +} + +.tree-folder-title { + position: relative; + padding: 0 10px; + background: #34495e; + line-height: 2.5rem; + font-size: 1rem; +} + +.tree-folder-title .title { + background: inherit; + color: #fff; +} + +.tree-folder-title .title:hover { + text-decoration: none; +} + +.tree-folder.active .tree-folder-title { + background: #2980b9; + font-weight: bold; +} + +.tree-folder-items { + background: #2c3e50; +} + +.tree-folder-items > .item { + padding: 0 10px; + line-height: 2.5rem; + font-size: 0.8rem; +} + +.tree-folder-items > .item.active { + background: #2980b9; +} + +.tree-folder-items > .item > a { + text-decoration: none; + 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 */ +.header { + background: #ecf0f1; + height: 85px; +} + +.header > .item { + padding: 10px; + vertical-align: middle; + text-align: center; +} + +.header > .item.title { + width: 230px; +} + +.header > .item.title h1 { + margin: 0.5em 0; +} + +.header > .item.title h1 a { + text-decoration: none; +} + +.header > .item.search input { + width: 230px; +} + +.header .item.search input:focus { + width: 350px; +} + +/*=== Body */ +#global { + height: calc(100% - 85px); +} + +.aside { + background: #ecf0f1; +} + +.aside.aside_feed { + padding: 10px 0; + text-align: center; + background: #34495e; + border-radius: 10px 0 0 0; +} + +.aside.aside_feed .tree { + margin: 10px 0 50px; +} + +/*=== Aside main page (categories) */ +.aside_feed .tree-folder-title > .title:not([data-unread="0"])::after { + margin: 10px 0; + padding: 0 10px; + background: inherit; + font-size: 0.9rem; + position: absolute; + left: 0; + line-height: 1.5rem; +} + +/*=== Aside main page (feeds) */ +.feed.item.empty.active { + background: #f39c12; +} + +.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:hover .dropdown-toggle > .icon, +.aside_feed .tree-folder-items .item.active .dropdown-toggle > .icon { + 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 { + text-align: center; +} + +.prompt label { + text-align: right; +} + +.prompt form { + margin: 10px auto 20px auto; + width: 200px; +} + +.prompt input { + margin: 5px auto; + width: 100%; +} + +.prompt p { + margin: 20px 0; +} + +/*=== New article notification */ +#new-article { + background: #3498db; + font-size: 0.9em; + text-align: center; +} + +#new-article:hover { + background: #2980b9; +} + +#new-article > a { + line-height: 3em; + font-weight: bold; + color: #fff; +} + +#new-article > a:hover { + text-decoration: none; +} + +/*=== Day indication */ +.day { + padding: 0 10px; + font-weight: bold; + line-height: 3em; + border-right: 2px solid #ecf0f1; +} + +.day .name { + padding: 0 0 0 10px; + color: #aab; + font-size: 1.8em; + opacity: 0.3; + font-style: italic; + text-align: left; +} + +/*=== Index menu */ +.nav_menu { + text-align: center; + padding: 5px 0; +} + +#dropdown-query ~ .dropdown-menu .dropdown-header .icon { + vertical-align: middle; + background-color: #95a5a6; + border-radius: 3px; +} + +/*=== Feed articles */ +.flux { + border-right: 2px solid #ecf0f1; +} + +.flux:hover { + background: #fff; +} + +.flux.current { + background: #fff; + border-right-color: #3498db; +} + +.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-color: #ffc300; +} + +.flux.favorite:not(.current) { + background: #fff6da; +} + +.flux.favorite:not(.current):hover .item.title { + background: #fff6da; +} + +.flux_header { + font-size: 0.8rem; + cursor: pointer; + border-top: 1px solid #ecf0f1; +} + +.flux_header .title { + font-size: 0.9rem; +} + +.flux .website .favicon { + padding: 5px; +} + +.flux .date { + color: #666; + font-size: 0.7rem; +} + +.flux .bottom { + font-size: 0.8rem; + text-align: center; +} + +/*=== Content of feed articles */ +.content { + padding: 20px 10px; +} + +.content > h1.title > a { + color: #000; +} + +.content hr { + margin: 30px 10px; + 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 { + padding: 0 5px 0 0; + background: #ddd; + color: #666; + font-size: 0.9em; + border: none; + border-radius: 3px; + text-align: center; + font-weight: bold; + line-height: 3em; + z-index: 10; + vertical-align: middle; +} + +.notification.good { + background: #1abc9c; + color: #fff; +} + +.notification.bad { + background: #e74c3c; + color: #fff; +} + +.notification a.close { + padding: 0 15px; + line-height: 3em; + border-radius: 3px 0 0 3px; +} + +.notification.good a.close:hover { + background: #16a085; +} + +.notification.bad a.close:hover { + background: #c0392b; +} + +.notification#actualizeProgress { + line-height: 2em; +} + +/*=== "Load more" part */ +#bigMarkAsRead { + text-align: center; + text-decoration: none; + background: #ecf0f1; +} + +#bigMarkAsRead:hover { + background: #34495e; + color: #fff; +} + +/*=== Navigation menu (for articles) */ +#nav_entries { + margin: 0; + text-align: center; + line-height: 3em; + table-layout: fixed; + background: #34495e; +} + +/*=== READER VIEW */ +/*================*/ +#stream.reader .flux { + padding: 0 0 50px; + background: #ecf0f1; + color: #34495e; + border: none; +} + +#stream.reader .flux .author { + margin: 0 0 10px; + color: #999; + font-size: 90%; +} + +/*=== GLOBAL VIEW */ +/*================*/ +.box.category .box-title .title { + font-weight: normal; + text-decoration: none; + text-align: right; +} + +.box.category:not([data-unread="0"]) .box-title { + background: #3498db; +} + +.box.category:not([data-unread="0"]) .box-title:active { + background: #2980b9; +} + +.box.category:not([data-unread="0"]) .box-title .title { + font-weight: bold; + color: #fff; +} + +.box.category .title:not([data-unread="0"])::after { + background: none; + border: 0; + position: absolute; + top: 5px; left: 10px; + font-weight: bold; + box-shadow: none; + 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; +} + +.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; +} + +/*=== LOGS */ +/*=========*/ +.loglist { + overflow: hidden; + border: 1px solid #aaa; +} + +.log { + margin: 10px 0; + padding: 5px 2%; + background: #fafafa; + color: #666; + font-size: 0.8rem; + overflow: auto; +} + +.log > .date { + margin: 0 0 0 10px; + padding: 5px 10px; + border-radius: 20px; +} + +.log.error > .date { + background: #e74c3c; + color: #fff; +} + +.log.warning > .date { + background: #f39c12; +} + +.log.notice > .date { + background: #ecf0f1; +} + +.log.debug > .date { + background: #111; + color: #eee; +} + +/*=== MOBILE */ +/*===========*/ + +@media (max-width: 840px) { + .aside { + transition: width 200ms linear; + } + + .aside .toggle_aside, + #panel .close { + background: #2c3e50; + display: block; + width: 100%; + height: 50px; + line-height: 50px; + text-align: center; + } + + .aside.aside_feed { + padding: 0; + } + + .nav_menu .btn { + margin: 5px 10px; + } + + .nav_menu .stick { + margin: 0 10px; + } + + .nav_menu .stick .btn { + margin: 5px 0; + } + + .nav_menu .search { + display: inline-block; + max-width: 97%; + } + + .nav_menu .search input { + max-width: 97%; + width: 90px; + } + + .nav_menu .search input:focus { + width: 400px; + } + + .day .name { + font-size: 1.1rem; + } + + .pagination { + margin: 0 0 3.5em; + } + + .notification { + border-radius: 0; + } + + .notification a.close { + background: transparent; + display: block; + right: 0; + } + + .notification a.close:hover { + opacity: 0.5; + } + + .notification a.close .icon { + display: none; + } +} diff --git a/p/themes/Mapco/mapco.rtl.css b/p/themes/Mapco/mapco.rtl.css new file mode 100644 index 000000000..4f56b1453 --- /dev/null +++ b/p/themes/Mapco/mapco.rtl.css @@ -0,0 +1,1302 @@ +@font-face { + font-family: "lato"; + font-style: normal; + font-stretch: normal; + font-weight: 400; + src: local("Lato"), url("../fonts/LatoLatin-Regular.woff") format("woff"); } +@font-face { + font-family: "lato"; + font-style: italic; + font-stretch: normal; + font-weight: 400; + src: local("Lato"), url("../fonts/LatoLatin-Italic.woff") format("woff"); } +@font-face { + font-family: "lato"; + font-style: normal; + font-stretch: normal; + font-weight: 700; + src: local("Lato"), url("../fonts/LatoLatin-Bold.woff") format("woff"); } +@font-face { + font-family: "lato"; + font-style: italic; + font-stretch: normal; + font-weight: 700; + src: local("Lato"), url("../fonts/LatoLatin-BoldItalic.woff") format("woff"); } +@font-face { + font-family: "spectral"; + font-style: normal; + font-stretch: normal; + font-weight: 400; + src: local("Spectral"), url("../fonts/Spectral-Regular.woff") format("woff"); } +@font-face { + font-family: "spectral"; + font-style: italic; + font-stretch: normal; + font-weight: 400; + src: local("Spectral"), url("../fonts/Spectral-Italic.woff") format("woff"); } +@font-face { + font-family: "spectral"; + font-style: normal; + font-stretch: normal; + font-weight: 700; + src: local("Spectral"), url("../fonts/Spectral-Bold.woff") format("woff"); } +@font-face { + font-family: "spectral"; + font-style: italic; + font-stretch: normal; + font-weight: 700; + src: local("Spectral"), url("../fonts/Spectral-BoldItalic.woff") format("woff"); } +/* stylelint-disable property-no-vendor-prefix */ +/* FUNCTIONS */ +/* btns */ +.btn { + margin: 0; + padding: 0.5rem 1.5rem; + background: #f9fafb; + display: inline-block; + color: #5b6871; + font-size: 1rem; + border: none; + border-radius: 5px; + min-height: 38px; + min-width: 15px; + line-height: 25px; + vertical-align: middle; + cursor: pointer; + overflow: hidden; + -webkit-transition: all 0.15s ease-in-out; + -moz-transition: all 0.15s ease-in-out; + -o-transition: all 0.15s ease-in-out; + -ms-transition: all 0.15s ease-in-out; + transition: all 0.15s ease-in-out; } + .btn.btn-important { + background: #36c; + color: #fff; } + .btn.btn-important:hover, .btn.btn-important:active { + background: #25c; } + .btn.btn-attention { + background: #f5633e; + color: #fff; } + .btn.btn-attention:hover, .btn.btn-attention:active { + background: #73341f; } + .btn:hover { + text-decoration: none; } + +a.btn { + min-height: 25px; + line-height: 25px; } + +/*=== Forms */ +legend { + margin: 2rem 0 1rem 0; + padding: 0; + display: inline-block; + width: auto; + font-size: 1rem; + clear: both; + text-transform: uppercase; + letter-spacing: 1px; + font-weight: 700; } + +label { + min-height: 25px; + padding: 5px 0; + cursor: pointer; + color: #5b6871; } + +textarea { + width: 360px; + height: 100px; } + +input, select, textarea, button { + padding: 5px 10px; + background: #fff; + color: #5b6871; + font-family: "lato", "Helvetica", "Arial", sans-serif; + font-size: 1rem; + border: 1px solid #eff0f2; + border-radius: 2px; + min-height: 25px; + line-height: 25px; + vertical-align: middle; } + +option { + padding: 0 .5em; } + +input:focus, select:focus, textarea:focus { + color: #303136; + border-color: #36c; } + +input:invalid, select:invalid { + color: #f5633e; + border-color: #f5633e; + box-shadow: none; } + +input:disabled, select:disabled { + background: #eff0f2; } + +input.extend { + transition: width 200ms linear; } + +.form-group { + padding: 5px; + border-radius: 3px; } + .form-group::after { + content: ""; + display: block; + clear: both; } + .form-group .group-name { + padding: 10px 0; + text-align: left; } + .form-group .group-controls { + min-height: 25px; + padding: 5px 0; } + .form-group .group-controls .control { + line-height: 2.0em; } + .form-group table { + margin: 10px 220px 0 0; } + .form-group.form-actions { + margin: 15px 0 25px; + padding: 5px 0; } + .form-group.form-actions .btn { + margin: 0 0 0 0.5rem; } + +/*=== Tables */ +table { + border-collapse: collapse; } + +tr, th, td { + padding: 0.5em; + border: 1px solid #d5d8db; } + +th { + background: #f9fafb; } + +form td, +form th { + font-weight: normal; + text-align: center; } + +/*=== COMPONENTS */ +/*===============*/ +/*=== Forms */ +/*=== Horizontal-list */ +.horizontal-list { + margin: 0; + padding: 0.1rem 0; } + .horizontal-list .item { + vertical-align: middle; } + .horizontal-list .item:first-child { + padding-right: 0.5rem; } + +/*=== Dropdown */ +.dropdown-menu { + margin: 0; + padding: 0.5rem 0 1rem 0; + background: #f9fafb; + font-size: 1rem; + border: none; + border-radius: 3px; + box-shadow: 0px 6px 8px 0px rgba(0, 0, 0, 0.35); + text-align: right; } + .dropdown-menu::after { + background: white; + width: 10px; + height: 10px; + content: ""; + position: absolute; + top: -4px; + left: 13px; + z-index: -10; + transform: rotate(-45deg); } + .dropdown-menu .dropdown-header { + margin: 1.75rem 2rem 0.5rem 0; + font-weight: bold; + text-align: right; + color: #5b6871; + text-transform: uppercase; + letter-spacing: 1px; } + .dropdown-menu .item { + -webkit-transition: all 0.075s ease-in-out; + -moz-transition: all 0.075s ease-in-out; + -o-transition: all 0.075s ease-in-out; + -ms-transition: all 0.075s ease-in-out; + transition: all 0.075s ease-in-out; } + .dropdown-menu .item a, .dropdown-menu .item span, .dropdown-menu .item .as-link { + padding: 0 2rem; + color: #303136; + font-size: 1rem; + line-height: 2.5em; } + .dropdown-menu .item:hover { + background: #36c; + color: #fff; } + .dropdown-menu .item:hover a, .dropdown-menu .item:hover button { + text-decoration: none; + color: #fff; } + .dropdown-menu .item[aria-checked="true"] a::before { + margin: 0 -14px 0 0; + font-weight: bold; } + .dropdown-menu .input select, .dropdown-menu .input input { + margin: 0 auto 5px; + padding: 2px 5px; + border-radius: 3px; } + .dropdown-menu .separator { + margin: 0.75rem 0; + border-bottom: 1px solid #eff0f2; } + +.tree .tree-folder .tree-folder-items .dropdown-menu .item { + padding: 0; } + .tree .tree-folder .tree-folder-items .dropdown-menu .item a, + .tree .tree-folder .tree-folder-items .dropdown-menu .item button { + color: #303136; } + .tree .tree-folder .tree-folder-items .dropdown-menu .item a:hover, + .tree .tree-folder .tree-folder-items .dropdown-menu .item button:hover { + color: #fff; } + .tree .tree-folder .tree-folder-items .dropdown-menu .item:hover { + background: #36c; } + +/*=== Alerts */ +.alert { + margin: 1rem 0; + padding: 1rem; + background: #f9fafb; + color: #5b6871; + font-size: 1rem; + border: 1px solid #c5ced3; + border-radius: 3px; + text-shadow: 0 0 1px #eff0f2; } + +.alert-head { + font-size: 1.15em; } + +.alert > a { + text-decoration: underline; + color: inherit; } + +.alert-warn { + background: #fdfde0; + color: #73762f; + border: 1px solid #73762f33; } + +.alert-success { + background: #cffde7; + color: #0c7540; + border: 1px solid #0c754033; } + +.alert-error { + background: #fde0d8; + color: #73341f; + border: 1px solid #73341f33; } + +/*=== Pagination */ +.pagination { + background: #eff0f2; + color: #303136; + font-size: 0.8em; + text-align: center; } + .pagination .item.pager-current { + background: #303136; + color: #eff0f2; + font-size: 1.5em; + font-weight: bold; } + .pagination .item a { + display: block; + color: #303136; + font-style: italic; + line-height: 3em; + text-decoration: none; } + .pagination .item a:hover { + background: #303136; + color: #eff0f2; } + .pagination .loading, + .pagination a:hover.loading { + background: url("loader.gif") center center no-repeat #34495e; + font-size: 0; } + +.content .pagination { + margin: 0; + padding: 0; } + +/*=== Boxes */ +.box { + background: #fff; + border: none; + border-radius: 3px; + box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.25); } + .box .box-title { + margin: 0; + padding: 5px 10px; + background: #eff0f2; + color: #303136; + border-radius: 2px 2px 0 0; } + .box .box-title img { + margin-left: 0.75rem; } + .box .box-title:hover .configure { + background: url("icons/cog.svg") no-repeat 4px 4px; + display: block; + float: right; + width: 1.75rem; + height: 1.75rem; + border-radius: 2px; + visibility: visible; + margin-left: 0.5rem; } + .box .box-title:hover .configure .icon { + display: none; + border-radius: 3px; + vertical-align: middle; } + .box .box-title:hover .configure:hover { + background: url("icons/cog-white.svg") no-repeat 4px 4px #36c; } + .box .box-title .configure { + visibility: hidden; } + .box .box-title form input { + width: 85%; } + .box .box-title form .dropdown { + float: left; } + .box .box-title form .dropdown a.dropdown-toggle { + padding: 0; + border-radius: 0; + background-image: url(icons/more.svg); + background-repeat: no-repeat; + background-position: left 8px; } + .box .box-title form .dropdown a.dropdown-toggle img { + display: none; } + .box .box-content .item { + padding: 0.5rem 0.75rem; + color: #303136; + font-size: 1rem; + border-bottom: 1px solid #eff0f2; + line-height: 1.7em; } + .box .box-content .item img { + margin-left: 0.75rem; } + .box .box-content .item .configure { + background: url("icons/cog.svg") no-repeat 4px 4px; + display: block; + float: right; + width: 1.75rem; + height: 1.75rem; + border-radius: 2px; + visibility: hidden; + margin-left: 0.5rem; } + .box .box-content .item .configure .icon { + display: none; + border-radius: 3px; + vertical-align: middle; } + .box .box-content .item .configure:hover { + background: url("icons/cog-white.svg") no-repeat 4px 4px #36c; } + .box .box-content .item:hover .configure { + visibility: visible; } + .box .box-content .item:last-child { + border-bottom: none; } + +/*=== "Load more" part */ +#bigMarkAsRead { + text-align: center; + text-decoration: none; + background: #effcfd; + color: #36c; + -webkit-transition: all 0.15s ease-in-out; + -moz-transition: all 0.15s ease-in-out; + -o-transition: all 0.15s ease-in-out; + -ms-transition: all 0.15s ease-in-out; + transition: all 0.15s ease-in-out; } + #bigMarkAsRead:hover { + background: #36c; + color: #fff; } + #bigMarkAsRead:hover .bigTick { + background: url(icons/tick-white.svg) center no-repeat; } + #bigMarkAsRead .bigTick { + margin: 0.5rem 0; + background: url(icons/tick-color.svg) center no-repeat; + display: inline-block; + width: 64px; + height: 64px; + text-indent: -9999px; + white-space: nowrap; } + +.formLogin { + background: #303136; } + .formLogin .header .configure { + padding-left: 1rem; } + .formLogin .header .configure img { + margin-left: 0.5rem; } + .formLogin .header .configure a.signin { + color: #fff; } + .formLogin h1 { + color: #fff; } + .formLogin form#crypto-form div { + margin-bottom: 1rem; } + .formLogin form#crypto-form div label { + color: #c5ced3; + font-size: 1rem; } + .formLogin form#crypto-form div input { + background: #1d1e22; } + .formLogin form#crypto-form div input:focus { + background: #f9fafb; + color: #303136; } + +/*=== 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; } + +/*=== Tree */ +.tree { + margin: 10px 0; } + .tree#sidebar { + scrollbar-color: rgba(255, 255, 0, 0.1) rgba(0, 0, 0, 0.05); + scrollbar-color: #fff33 #fff22; } + .tree .tree-folder { + border-bottom: 1px solid #3f3f3f; } + .tree .tree-folder .tree-folder-title { + padding: 12px 16px; + background: #303136; + position: relative; + font-size: 0.85rem; + letter-spacing: 1px; + font-weight: 700; + text-transform: uppercase; } + .tree .tree-folder .tree-folder-title .title { + background: inherit; + color: #fff; } + .tree .tree-folder .tree-folder-title .title:hover { + text-decoration: none; } + .tree .tree-folder.active .tree-folder-title { + background: #303136; + font-weight: bold; } + .tree .tree-folder .tree-folder-items { + background: #26272a; } + .tree .tree-folder .tree-folder-items .item { + padding: 0 1rem; + line-height: 2.5rem; + font-size: 1rem; + font-weight: 400; + -webkit-transition: all 0.15s ease-in-out; + -moz-transition: all 0.15s ease-in-out; + -o-transition: all 0.15s ease-in-out; + -ms-transition: all 0.15s ease-in-out; + transition: all 0.15s ease-in-out; } + .tree .tree-folder .tree-folder-items .item.active { + background: #36c; } + .tree .tree-folder .tree-folder-items .item.active .dropdown li a { + color: #303136; } + .tree .tree-folder .tree-folder-items .item.active .dropdown li a:hover { + color: #fff; } + .tree .tree-folder .tree-folder-items .item.active a { + color: #fff; } + .tree .tree-folder .tree-folder-items .item:hover { + background: #17181a; } + .tree .tree-folder .tree-folder-items .item a { + text-decoration: none; + color: #fff; } + .tree .tree-folder .tree-folder-items .feed .item-title:not([data-unread="0"])::before { + margin: 11px 4px 0 6px; + padding: 3px 4px; + background: rgba(0, 0, 0, 0.25); + display: block; + float: right; + font-size: 0.75rem; + border-radius: 12px; + content: attr(data-unread); + text-align: center; + line-height: 0.75rem; } + +/*=== Buttons */ +.stick { + vertical-align: middle; + font-size: 0; } + .stick input, .stick .btn { + border-radius: 0; } + .stick .btn:first-child, + .stick input:first-child { + border-radius: 0 5px 5px 0; } + .stick .btn:last-child, .stick input:last-child, .stick .btn + .dropdown > .btn { + border-radius: 5px 0 0 5px; } + .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: 1px solid #d5d8db; } + +.aside { + background: #303136; } + .aside.aside_feed { + padding: 10px 0; + text-align: center; + background: #303136; } + .aside.aside_feed .tree { + margin: 10px 0 50px; } + +/* Sidebar des pages de configuration */ +/*=== Navigation */ +.nav-list .nav-header, +.nav-list .item { + height: 2.5em; + line-height: 2.5em; + font-size: 1rem; } +.nav-list .item { + background: #303136; + -webkit-transition: all 0.15s ease-in-out; + -moz-transition: all 0.15s ease-in-out; + -o-transition: all 0.15s ease-in-out; + -ms-transition: all 0.15s ease-in-out; + transition: all 0.15s ease-in-out; } + .nav-list .item a { + padding: 0 1rem; + color: #fff; } + .nav-list .item .error a { + color: #f5633e; } + .nav-list .item:hover { + background: #17181a; + color: #fff; } + .nav-list .item:hover .error a { + background: #36c; + color: #fff; } + .nav-list .item:hover .empty a { + background: #f4f762; + color: #fff; } + .nav-list .item:hover a { + color: #fff; + text-decoration: none; } + .nav-list .item.active { + background: #36c; + color: #fff; } + .nav-list .item.active .error a { + background: #36c; + color: #fff; } + .nav-list .item.active .empty a { + background: #f4f762; + color: #fff; } + .nav-list .item.active a { + color: #fff; + text-decoration: none; } +.nav-list.empty a { + color: #f4f762; } +.nav-list .disable { + text-align: center; + background: #f9fafb; + color: #a6a7ae; } +.nav-list .nav-header { + padding: 0 10px; + font-weight: bold; + color: #5b6871; + text-transform: uppercase; + letter-spacing: 1px; + margin-top: 1rem; } +.nav-list .nav-form { + padding: 3px; + text-align: center; } +.nav-list .nav-head { + margin: 0; + text-align: left; + color: #fff; } + .nav-list .nav-head a { + color: #fff; } + .nav-list .nav-head .item { + padding: 5px 10px; + font-size: 0.9rem; + line-height: 1.5rem; } + +/*=== Aside main page (categories) */ +.aside_feed .tree-folder-title > .title:not([data-unread="0"])::after { + margin: -0.5rem 0 0 1rem; + padding: 0 0.75rem; + background: rgba(0, 0, 0, 0.25); + border-radius: 12px; + position: absolute; + left: 0; + line-height: 1.5rem; + text-align: center; } + +.feed.item.empty.active { + background: #5b6871; } + +.feed.item.error.active { + background: #5b6871; } + +.feed.item.empty, +.feed.item.empty > a { + color: #5b6871; } + +.feed.item.error, +.feed.item.error > a { + color: #5b6871; } + +.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:hover .dropdown-toggle > .icon, +.aside_feed .tree-folder-items .item.active .dropdown-toggle > .icon { + border-radius: 3px; } + +.aside_feed .stick #btn-importExport { + border-right-color: #303136; } + +/*=== STRUCTURE */ +/*===============*/ +/*=== Header */ +.header { + padding: 0.5rem 1.35rem; + background: #303136; + display: block; + width: auto; + table-layout: none; } + .header .item { + vertical-align: middle; } + .header .item.title { + width: 280px; + font-weight: 400; } + .header .item.title h1 a { + text-decoration: none; + color: #fff; + font-size: 1rem; + text-transform: uppercase; + letter-spacing: 1px; } + .header .item.title h1 a img { + margin-left: 0.5rem; } + .header .item.search input { + width: 230px; + color: #fff; + border: none; + border-radius: 0 2px 2px 0; + background-color: #26272a; + -webkit-transition: all 0.15s ease-in-out; + -moz-transition: all 0.15s ease-in-out; + -o-transition: all 0.15s ease-in-out; + -ms-transition: all 0.15s ease-in-out; + transition: all 0.15s ease-in-out; } + .header .item.search input:hover { + background-color: #17181a; } + .header .item.search input:focus { + width: 350px; + color: #5b6871; + background-color: #fff; } + .header .item.search .btn { + width: 3rem; + border-radius: 2px 0 0 2px; + background-color: #36c; + background-position: center; + background-repeat: no-repeat; + background-image: url(icons/magnifier.svg); + border-right-width: 0; + min-height: 35px; } + .header .item.search .btn img { + display: none; } + .header .item.search .btn:hover { + background-color: #25c; } + .header .item.configure { + width: 2rem; + position: absolute; + left: 1rem; + top: 1.25rem; + text-align: center; } + .header .item.configure .btn { + padding: 0 0.5rem; + background-color: transparent; + background-position: center; + background-repeat: no-repeat; + background-image: url(icons/cog-white.svg); } + .header .item.configure .btn img { + display: none; } + +/*=== Body */ +#global { + height: calc(100% - 85px); } + +/*=== Prompt (centered) */ +.prompt { + text-align: center; } + +.prompt label { + text-align: right; } + +.prompt form { + margin: 10px auto 20px auto; + width: 200px; } + +.prompt input { + margin: 5px auto; + width: 100%; } + +.prompt p { + margin: 20px 0; } + +/*=== New article notification */ +#new-article { + background: #36c; + font-size: 1rem; + text-align: center; } + +#new-article:hover { + background: #25c; } + +#new-article > a { + line-height: 3em; + font-weight: bold; + color: #fff; } + +#new-article > a:hover { + text-decoration: none; } + +/*=== Day indication */ +.day { + padding: 1rem 1.25rem 0 0; + color: #5b6871; + font-size: 0.875rem; + font-weight: 700; + line-height: 3em; + letter-spacing: 1px; + text-transform: uppercase; } + .day .name { + padding: 0 1rem 0 1rem; + color: #303136; + font-size: 0.875rem; + position: relative; + right: 0; + text-transform: uppercase; } + +/*=== Index menu */ +.nav_menu { + text-align: center; + padding: 5px 0; } + .nav_menu .btn { + border-right-width: 0; + padding: 0.5rem 1rem; + background-color: #f9fafb; + background-position: center; + background-repeat: no-repeat; } + .nav_menu .btn:hover { + background-color: #eff0f2; } + .nav_menu .stick { + background: #f9fafb; } + .nav_menu .stick .btn { + border-right-width: 0; + padding: 0.5rem 1rem; + background-color: #f9fafb; + background-position: center; + background-repeat: no-repeat; + -webkit-transition: all 0.15s ease-in-out; + -moz-transition: all 0.15s ease-in-out; + -o-transition: all 0.15s ease-in-out; + -ms-transition: all 0.15s ease-in-out; + transition: all 0.15s ease-in-out; } + .nav_menu .stick .btn:hover { + background-color: #d5d8db; } + .nav_menu .stick .btn.active { + background-color: #36c; } + .nav_menu .stick .btn img.icon { + display: none; } + .nav_menu .stick .btn#toggle-read { + background-image: url(icons/read.svg); } + .nav_menu .stick .btn#toggle-read.active { + background-image: url(icons/read-white.svg); } + .nav_menu .stick .btn#toggle-unread { + background-image: url(icons/unread.svg); } + .nav_menu .stick .btn#toggle-unread.active { + background-image: url(icons/unread-white.svg); } + .nav_menu .stick .btn#toggle-starred { + background-image: url(icons/starred.svg); } + .nav_menu .stick .btn#toggle-starred.active { + background-image: url(icons/starred-white.svg); } + .nav_menu .stick .btn#toggle-non-starred { + background-image: url(icons/non-starred.svg); } + .nav_menu .stick .btn#toggle-non-starred.active { + background-image: url(icons/non-starred-white.svg); } + .nav_menu .stick .btn.read_all { + padding: 5px 16px; + color: #303136; + background-color: #f9fafb; + -webkit-transition: all 0.15s ease-in-out; + -moz-transition: all 0.15s ease-in-out; + -o-transition: all 0.15s ease-in-out; + -ms-transition: all 0.15s ease-in-out; + transition: all 0.15s ease-in-out; } + .nav_menu .stick .btn.read_all:hover { + background-color: #d5d8db; } + .nav_menu .stick .btn.view-normal { + background-image: url(icons/view-list.svg); } + .nav_menu .stick .btn.view-normal.active { + background-image: url(icons/view-list-white.svg); } + .nav_menu .stick .btn.view-global { + background-image: url(icons/view-global.svg); } + .nav_menu .stick .btn.view-global.active { + background-image: url(icons/view-global-white.svg); } + .nav_menu .stick .btn.view-reader { + background-image: url(icons/view-reader.svg); } + .nav_menu .stick .btn.view-reader.active { + background-image: url(icons/view-reader-white.svg); } + .nav_menu .stick .btn.view-rss { + background-image: url(icons/rss.svg); } + .nav_menu .stick .dropdown a.dropdown-toggle { + border-right-width: 0; + background-image: url(icons/more.svg); } + +#dropdown-query ~ .dropdown-menu .dropdown-header .icon { + vertical-align: middle; + background-color: #a6a7ae; + border-radius: 3px; } + +/*=== Content of feed articles */ +.content, .content.thin { + padding: 20px 10px; + font-size: 1.125rem; + line-height: 1.8rem; } + .content h1.title a, .content h1 a, .content.thin h1.title a, .content.thin h1 a { + color: #303136; + font-family: "spectral", serif; + font-size: 2rem; } + .content h1.title a:hover, .content h1 a:hover, .content.thin h1.title a:hover, .content.thin h1 a:hover { + color: #36c; + text-decoration: none; } + .content .author, .content.thin .author { + color: #5b6871; + font-size: 1.125rem; } + .content p, .content ul, .content.thin p, .content.thin ul { + font-size: 1.125rem; + line-height: 1.8rem; } + .content .content hr, .content.thin .content hr { + margin: 30px 10px; + background: #d5d8db; + height: 1px; + border: 0; + box-shadow: 0 2px 5px #ccc; } + .content pre, .content.thin pre { + margin: 10px auto; + padding: 10px 20px; + overflow: auto; + background: #1d1e22; + color: #fff; + font-size: 0.9rem; + border-radius: 3px; } + .content pre code, .content.thin pre code { + background: transparent; + color: #fff; + border: none; } + .content code, .content.thin code { + padding: 2px 5px; + background: #f9fafb; + color: #eff0f2; + border: 1px solid #eff0f2; + border-radius: 3px; } + .content blockquote, .content.thin blockquote { + margin: 0; + padding: 5px 20px; + background: #f9fafb; + display: block; + color: #303136; + border-top: 1px solid #d5d8db; + border-bottom: 1px solid #d5d8db; } + .content blockquote p, .content.thin blockquote p { + margin: 0; } + +/*=== Notification and actualize notification */ +.notification { + padding: 1rem 0; + background: #d5d8db; + width: 100%; + height: 3rem; + color: #5b6871; + font-size: 1em; + border: none; + position: fixed; + top: auto; + bottom: 0; + right: 0; + left: 0; + text-align: center; + line-height: 3em; + z-index: 10; + vertical-align: middle; } + .notification .msg { + display: inline-block; + font-size: 1rem; } + .notification.good { + background: #10f587; + color: #fff; } + .notification.bad { + background: #f5633e; + color: #fff; } + .notification a.close { + padding: 0 15px; + border-radius: 3px 0 0 3px; + line-height: 3em; } + .notification.good a.close:hover { + background: #0c7540; } + .notification.bad a.close:hover { + background: #73341f; } + .notification#actualizeProgress { + line-height: 2em; } + .notification#actualizeProgress br { + display: none; } + +/*=== Navigation menu (for articles) */ +#nav_entries { + margin: 0; + text-align: center; + line-height: 3em; + table-layout: fixed; + background: #303136; } + +/*=== Feed articles */ +.flux { + background: #fff; + -webkit-transition: all 0.15s ease-in-out; + -moz-transition: all 0.15s ease-in-out; + -o-transition: all 0.15s ease-in-out; + -ms-transition: all 0.15s ease-in-out; + transition: all 0.15s ease-in-out; } + .flux:hover { + background: #f9fafb; } + .flux:hover:not(.current):hover .item.title { + background: #f9fafb; } + .flux.current { + background: #f9fafb; + border-right-color: #36c; } + .flux.not_read:not(.current) { + background: #f2f6f8; } + .flux.not_read:not(.current):hover .item.title { + background: #f2f6f8; } + .flux.not_read .item.title a { + color: #36c; } + .flux.not_read .item.website a { + color: #36c; } + .flux.not_read .item.date { + color: #36c99; } + .flux.favorite { + border-right-color: #ffc300; + -webkit-transition: all 0.15s ease-in-out; + -moz-transition: all 0.15s ease-in-out; + -o-transition: all 0.15s ease-in-out; + -ms-transition: all 0.15s ease-in-out; + transition: all 0.15s ease-in-out; } + .flux.favorite:not(.current) { + background: #fff6da; } + .flux.favorite:not(.current):hover .item.title { + background: #fff6da; } + .flux .website a { + color: #303136; + opacity: 0.75; } + .flux .website .favicon { + padding: 5px; } + .flux .date { + color: #303136; + font-size: 0.85rem; + opacity: 0.75; } + .flux .bottom { + font-size: 1rem; + text-align: center; } + +.flux_header { + font-size: 1rem; + cursor: pointer; + border-top: 1px solid #eff0f2; } + .flux_header .title { + font-size: 1rem; } + +/*=== GLOBAL VIEW */ +/*================*/ +#stream .box.category:not([data-unread="0"]) .box-title .title { + font-weight: bold; } +#stream .box.category .box-title { + padding: 1.5rem; + background: none; } + #stream .box.category .box-title a.title { + color: #5b6871; + font-size: 1rem; + font-weight: normal; + text-decoration: none; + text-align: right; + text-transform: uppercase; + letter-spacing: 1px; } + #stream .box.category .box-title a.title:not([data-unread="0"])::after { + margin: -0.5rem 0 0 1rem; + padding: 0 0.75rem; + background: #eff0f2; + border-radius: 12px; + position: absolute; + top: 1.75rem; + left: 0; + line-height: 1.5rem; + text-align: center; } + #stream .box.category .box-title a.title:hover { + color: #36c; } +#stream .box.category .box-content { + padding-bottom: 0.5rem; } + #stream .box.category .box-content .item.feed { + padding: 0.5rem 1.5rem; + font-size: 1rem; } + #stream .box.category .box-content .item.feed a { + color: #303136; + font-weight: 400; } + #stream .box.category .box-content .item.feed a:hover { + color: #36c; + text-decoration: none; } + +#overlay { + background: rgba(0, 0, 0, 0.65); } + +#panel { + top: 3rem; + left: 3rem; + bottom: 3rem; + right: 3rem; + border-radius: 3px; } + +/*=== READER VIEW */ +/*================*/ +#stream.reader .flux { + padding: 0 0 50px; + background: #eff0f2; + color: #303136; + border: none; } + +#stream.reader .flux .author { + margin: 0 0 10px; + color: #a6a7ae; + font-size: 90%; } + +/*=== Configuration pages */ +.post { + padding: 1rem 2rem; + font-size: 1rem; } + .post form { + margin: 1rem 0; } + .post form .horizontal-list { + margin-bottom: 0.5rem; } + .post.content { + max-width: 550px; } + .post h1, .post h2 { + color: #303136; + font-size: 3rem; + margin-top: 1.75rem; + font-weight: 300; + line-height: 1.2em; } + .post a[href="./"] { + margin: 0; + padding: 0.75rem 1.5rem; + background: #f9fafb; + display: inline-block; + color: #5b6871; + font-size: 1rem; + border: 1px solid #d5d8db; + border-radius: 5px; + min-width: 15px; + line-height: 25px; + vertical-align: middle; + cursor: pointer; + overflow: hidden; } + .post a[href="./"]:hover { + background: #36c; + color: white; + border: 1px solid #36c; + text-decoration: none; } + +#slider { + border-right: none; + box-shadow: 0px 6px 8px 0px rgba(0, 0, 0, 0.35); } + +.slide-container .properties { + padding: 1rem; + background: rgba(0, 0, 0, 0.75); + color: white; + border: 0; } + .slide-container .properties .page-number { + left: 1rem; + top: 1rem; } + +/*=== LOGS */ +/*=========*/ +.loglist { + overflow: hidden; + border: 1px solid #a6a7ae; } + +.log { + margin: 10px 0; + padding: 5px 2%; + background: #f9fafb; + color: #5b6871; + font-size: 0.8rem; + overflow: auto; } + +.log > .date { + margin: 0 0 0 10px; + padding: 5px 10px; + border-radius: 20px; } + +.log.error > .date { + background: #f5633e; + color: #fff; } + +.log.warning > .date { + background: #f4f762; } + +.log.notice > .date { + background: #eff0f2; } + +.log.debug > .date { + background: #1d1e22; + color: #fff; } + +/*=== STATISTICS */ +/*===============*/ +.stat { + margin: 10px 0 20px; } + +.stat th, +.stat td, +.stat tr { + border: none; } + +.stat > table td, +.stat > table th { + border-bottom: 1px solid #d5d8db; } + +.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; } + +/*=== MOBILE */ +/*===========*/ +@media (max-width: 840px) { + ul.nav .item { + width: 100%; } + ul.nav .item img { + display: none; } + ul.nav .item a { + padding: 1rem 2.5rem 1rem 1rem; + background: url("../../themes/icons/logout.svg") no-repeat #17181a 97% center; + display: inline-block; + width: 100%; + color: #fff; + -webkit-transition: all 0.2s ease-in-out; + -moz-transition: all 0.2s ease-in-out; + -o-transition: all 0.2s ease-in-out; + -ms-transition: all 0.2s ease-in-out; + transition: all 0.2s ease-in-out; } + ul.nav .item a:hover, ul.nav .item a:active { + background: url("../../themes/icons/logout.svg") no-repeat #f5633e 97% center; + text-decoration: none; } + + .aside { + -webkit-transition: all 0.2s ease-in-out; + -moz-transition: all 0.2s ease-in-out; + -o-transition: all 0.2s ease-in-out; + -ms-transition: all 0.2s ease-in-out; + transition: all 0.2s ease-in-out; } + .aside.aside_feed { + padding: 0; } + .aside .tree .tree-folder .tree-folder-items .item a { + padding: 0.5rem 1rem; } + + .aside .toggle_aside, + #panel .close { + background: #25c; + display: block; + width: 100%; + height: 50px; + line-height: 50px; + text-align: center; } + + .header { + padding: 0.5rem; } + .header .item.title { + display: none; } + .header .item.search input { + width: 90%; + height: 3.5rem; } + .header .item.search input:focus { + width: 100%; } + .header .item.search .btn { + min-height: 49px; + padding: 0.5rem 2rem; } + .header .item.configure { + width: 2.75rem; + top: 3.125rem; } + .header .item.configure .dropdown .btn { + padding: 1.125rem; } + + .nav_menu .btn { + margin: 0; + padding: 0.85rem 1.25rem; } + .nav_menu .stick { + margin: 0.5rem 0.5rem; } + .nav_menu .stick .btn { + margin: 0; + padding: 0.85rem 1.25rem; } + .nav_menu .stick .btn.read_all { + padding: 0.85rem 1.25rem; } + .nav_menu .search { + display: none; + max-width: 97%; } + .nav_menu .search .input { + max-width: 97%; + width: 90px; } + .nav_menu .search .input:focus { + width: 400px; } + + #stream .flux .flux_header { + padding: 0.5rem 0; } + + .day { + text-align: center; + padding: 1rem 0; } + .day .name { + padding: 0; + display: block; + width: 100%; + line-height: 1.5rem; + margin-bottom: 1rem; } + + .pagination { + margin: 0 0 3.5em; } + + #nav_entries { + line-height: 4.5rem; } + + .notification { + border-radius: 0; } + .notification a.close { + background: transparent; + display: block; + right: 0; } + .notification a.close:hover { + opacity: 0.5; } + .notification a.close .icon { + display: none; } } +/*=== GENERAL */ +/*============*/ +html, body { + background: #eff0f2; + height: 100%; + font-family: "lato", "Helvetica", "Arial", sans-serif; + font-size: 0.875rem; } + +/*=== Links */ +a, button.as-link { + outline: none; + color: #36c; } diff --git a/p/themes/Origine-compact/origine-compact.rtl.css b/p/themes/Origine-compact/origine-compact.rtl.css new file mode 100644 index 000000000..90ea7b41e --- /dev/null +++ b/p/themes/Origine-compact/origine-compact.rtl.css @@ -0,0 +1,1224 @@ +@charset "UTF-8"; + +/*=== GENERAL */ +/*============*/ +html, body { + background: #fafafa; + height: 100%; + 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; +} + +.form-group table { + margin: 10px 220px 0 0; +} + +/*=== Buttons */ +.stick { + vertical-align: middle; + font-size: 0; +} + +.stick input, +.stick .btn { + border-radius: 0; +} + +.stick .btn:first-child, +.stick input:first-child { + border-radius: 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, +.stick .btn { + min-height: 20px; + 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-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 .disable { + background: #fafafa; + color: #aaa; + text-align: center; +} + +.nav-list .item > a { + padding: 0 10px; +} + +.nav-list a:hover { + text-decoration: none; +} + +.nav-list .item.empty a { + color: #f39c12; +} + +.nav-list .item.active.empty a { + 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 { + margin: 0; + padding: 0; + font-size: 0.9rem; +} + +.horizontal-list .item { + vertical-align: middle; + line-height: 30px; +} + +/*=== 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:hover { + background: #0062be; + color: #fff; +} + +.dropdown-menu > .item[aria-checked="true"] > a::before { + font-weight: bold; + margin: 0 -14px 0 0; +} + +.dropdown-menu > .item:hover > a { + color: #fff; + text-decoration: none; +} + +.dropdown-menu .input select, +.dropdown-menu .input input { + margin: 0 auto 5px; + padding: 2px 5px; + border-radius: 3px; +} + +.separator { + margin: 5px 0; + border-bottom: 1px solid #ddd; +} + +/*=== Alerts */ +.alert { + margin: 15px auto; + padding: 10px 15px; + background: #f4f4f4; + 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; + text-align: center; + color: #333; + font-size: 0.8em; +} + +.content .pagination { + margin: 0; + padding: 0; +} + +.pagination .item.pager-current { + font-weight: bold; + font-size: 1.5em; +} + +.pagination .item a { + display: block; + color: #333; + font-style: italic; + line-height: 3em; + text-decoration: none; +} + +.pagination .item a:hover { + background: #ddd; +} + +.pagination:first-child .item { + border-bottom: 1px solid #aaa; +} + +.pagination:last-child .item { + border-top: 1px solid #aaa; +} + +.pagination .loading, +.pagination a:hover.loading { + background: url("loader.gif") center center no-repeat #fff; + font-size: 0; +} + +/*=== 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-content { + min-height: 2.5em; + max-height: 260px; +} + +.box .box-content .item { + padding: 0 10px; + font-size: 0.9rem; + line-height: 2.5em; +} + +.box .box-title .configure, +.box .box-content .item .configure { + visibility: hidden; +} + +.box .box-title:hover .configure, +.box .box-content .item:hover .configure { + visibility: visible; +} + +/*=== 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.title h1 { + margin: 0; + font-size: 1em; +} + +.header > .item.title h1 a { + text-decoration: none; +} + +.header .item.configure .btn, +.header .item.search .btn { + min-height: 18px; + padding: 4px 10px; + line-height: 18px; +} + +.header > .item.title .logo { + width: 25px; + height: 25px; +} + +.header > .item.search input { + padding: 1px 5px; + width: 230px; +} + +.header .item.search input:focus { + width: 350px; +} + +/*=== Body */ +#global { + height: calc(100% - 85px); +} + +.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_feed .category .title:not([data-unread="0"])::after { + margin: 10px 0; + padding: 0 10px; + background: inherit; + font-size: 0.8rem; + position: absolute; + left: 0; + line-height: 0.9rem; +} + +/*=== 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 { + text-align: center; +} + +.prompt label { + text-align: right; +} + +.prompt form { + margin: 10px auto 20px auto; + width: 200px; +} + +.prompt input { + margin: 5px auto; + width: 100%; +} + +.prompt p { + margin: 20px 0; +} + +/*=== New article notification */ +#new-article { + background: #0084cc; + text-align: center; + font-size: 0.9em; +} + +#new-article:hover { + background: #06c; +} + +#new-article > a { + line-height: 3em; + color: #fff; + font-weight: bold; +} + +#new-article > a:hover { + text-decoration: none; +} + +/*=== 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; +} + +.flux .website .favicon { + padding: 5px; +} + +.flux .date { + color: #666; + font-size: 0.7rem; +} + +.flux .bottom { + font-size: 0.8rem; + text-align: center; +} + +/*=== Content of feed articles */ +.content { + padding: 10px 10px; +} + +#stream.normal .content > h1.title { + 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 { + padding: 0 5px 0 0; + font-size: 0.9em; + border: 1px solid #eeb; + border-radius: 3px; + box-shadow: 0 0 5px #ddd; + text-align: center; + font-weight: bold; + line-height: 3em; + z-index: 10; + 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 .box-title .title { + font-weight: normal; + text-decoration: none; + text-align: right; +} + +.box.category:not([data-unread="0"]) .box-title { + background: #0084cc; +} + +.box.category:not([data-unread="0"]) .box-title:active { + background: #3498db; +} + +.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; +} + +.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; +} + +/*=== LOGS */ +/*=========*/ +.loglist { + border: 1px solid #aaa; + border-radius: 5px; + overflow: hidden; +} + +.log { + padding: 5px 10px; + background: #fafafa; + color: #333; + font-size: 0.8rem; +} + +.log+.log { + border-top: 1px solid #aaa; +} + +.log .date { + display: block; + font-weight: bold; +} + +.log.error { + background: #fdd; + color: #844; +} + +.log.warning { + background: #ffe; + color: #c95; +} + +.log.notice { + background: #f4f4f4; + color: #aaa; +} + +.log.debug { + background: #333; + color: #eee; +} + +/*=== MOBILE */ +/*===========*/ + +@media (max-width: 840px) { + .aside { + box-shadow: -3px 0 3px #aaa; + transition: width 200ms linear; + } + + .aside .toggle_aside, + #panel .close { + 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; + } + + .nav_menu .stick { + margin: 0 10px; + } + + .nav_menu .stick .btn { + margin: 5px 0; + } + + .nav_menu .search { + display: inline-block; + max-width: 97%; + } + + .nav_menu .search input { + max-width: 97%; + width: 90px; + } + + .nav_menu .search input:focus { + width: 400px; + } + + .day .name { + font-size: 1.1rem; + text-shadow: none; + } + + .pagination { + margin: 0 0 3.5em; + } + + .notification a.close { + background: transparent; + display: block; + right: 0; + } + + .notification a.close:hover { + opacity: 0.5; + } + + .notification a.close .icon { + display: none; + } +} diff --git a/p/themes/Origine/origine.css b/p/themes/Origine/origine.css index 4016ac5bd..ec2eda215 100644 --- a/p/themes/Origine/origine.css +++ b/p/themes/Origine/origine.css @@ -165,7 +165,7 @@ form th { margin: 0; padding: 5px 10px; background: #fff; - background: linear-gradient(to bottom, #fff 0%, #eee 100%); + background-image: linear-gradient(to bottom, #fff 0%, #eee 100%); display: inline-block; color: #666; font-size: 0.9rem; @@ -346,6 +346,7 @@ a.btn { width: 10px; height: 10px; border-top: 1px solid #ddd; + /* @noflip */ border-left: 1px solid #ddd; content: ""; position: absolute; diff --git a/p/themes/Origine/origine.rtl.css b/p/themes/Origine/origine.rtl.css new file mode 100644 index 000000000..f6bc6d223 --- /dev/null +++ b/p/themes/Origine/origine.rtl.css @@ -0,0 +1,1174 @@ +@charset "UTF-8"; + +/*=== GENERAL */ +/*============*/ +html, body { + background: #fafafa; + height: 100%; + 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: 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: 5px 0; +} + +.form-group table { + margin: 10px 220px 0 0; +} + +/*=== Buttons */ +.stick { + vertical-align: middle; + font-size: 0; +} + +.stick input, +.stick .btn { + border-radius: 0; +} + +.stick .btn:first-child, +.stick input:first-child { + border-radius: 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-image: linear-gradient(to bottom, #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: 37px; + min-width: 15px; + line-height: 25px; + text-shadow: 0px -1px 0 #ddd; + vertical-align: middle; + cursor: pointer; + overflow: hidden; +} + +a.btn { + min-height: 25px; + line-height: 25px; +} + +.btn:hover { + background: #f0f0f0; + background: linear-gradient(to bottom, #f8f8f8, #f0f0f0); + 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); + 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); +} + +.btn-important:active { + background: #0044cb; + box-shadow: none; +} + +.btn-attention { + background: #e95b57; + background: linear-gradient(to bottom, #e95b57, #bd362f); + color: #fff; + border: 1px solid #c44742; + text-shadow: 0px -1px 0px #666; +} + +.btn-attention:hover { + background: linear-gradient(to bottom, #d14641, #bd362f); +} + +.btn-attention:active { + background: #bd362f; + box-shadow: none; +} + +/*=== Navigation */ +.nav-list .nav-header, +.nav-list .item { + 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 .disable { + background: #fafafa; + color: #aaa; + text-align: center; +} + +.nav-list .item > a { + padding: 0 10px; +} + +.nav-list a:hover { + text-decoration: none; +} + +.nav-list .item.empty a { + color: #f39c12; +} + +.nav-list .item.active.empty a { + 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); + 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 { + margin: 0; + padding: 0; +} + +.horizontal-list .item { + vertical-align: middle; +} + +/*=== 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; + /* @noflip */ + 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:hover { + background: #0062be; + color: #fff; +} + +.dropdown-menu > .item[aria-checked="true"] > a::before { + font-weight: bold; + margin: 0 -14px 0 0; +} + +.dropdown-menu > .item:hover > a { + color: #fff; + text-decoration: none; +} + +.dropdown-menu .input select, +.dropdown-menu .input input { + margin: 0 auto 5px; + padding: 2px 5px; + border-radius: 3px; +} + +.separator { + margin: 5px 0; + border-bottom: 1px solid #ddd; +} + +/*=== Alerts */ +.alert { + margin: 15px auto; + padding: 10px 15px; + background: #f4f4f4; + 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; + text-align: center; + color: #333; + font-size: 0.8em; +} + +.content .pagination { + margin: 0; + padding: 0; +} + +.pagination .item.pager-current { + font-weight: bold; + font-size: 1.5em; +} + +.pagination .item a { + display: block; + color: #333; + font-style: italic; + line-height: 3em; + text-decoration: none; +} + +.pagination .item a:hover { + background: #ddd; +} + +.pagination:first-child .item { + border-bottom: 1px solid #aaa; +} + +.pagination:last-child .item { + border-top: 1px solid #aaa; +} + +.pagination .loading, +.pagination a:hover.loading { + background: url("loader.gif") center center no-repeat #fff; + font-size: 0; +} + +/*=== 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-content { + min-height: 2.5em; + max-height: 260px; +} + +.box .box-content .item { + padding: 0 10px; + font-size: 0.9rem; + line-height: 2.5em; +} + +.box .box-title .configure, +.box .box-content .item .configure { + visibility: hidden; +} + +.box .box-title:hover .configure, +.box .box-content .item:hover .configure { + visibility: visible; +} + +/*=== Tree */ +.tree { + margin: 10px 0; +} + +.tree-folder-title { + position: relative; + padding: 0 10px; + background: #fff; + line-height: 2.5rem; + font-size: 1rem; +} + +.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.5rem; + 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: 85px; +} + +.header > .item { + padding: 10px; + border-bottom: 1px solid #aaa; + vertical-align: middle; + text-align: center; +} + +.header > .item.title { + width: 230px; +} + +.header > .item.title h1 { + margin: 0.5em 0; + text-shadow: -1px -1px 0 #ccc; +} + +.header > .item.title h1 a { + text-decoration: none; +} + +.header > .item.search input { + width: 230px; +} + +.header .item.search input:focus { + width: 350px; +} + +/*=== Body */ +#global { + height: calc(100% - 85px); +} + +.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_feed .category .title:not([data-unread="0"])::after { + margin: 10px 0; + padding: 0 10px; + background: inherit; + font-size: 0.9rem; + position: absolute; + left: 0; + line-height: 1.5rem; +} + +/*=== 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 { + text-align: center; +} + +.prompt label { + text-align: right; +} + +.prompt form { + margin: 10px auto 20px auto; + width: 200px; +} + +.prompt input { + margin: 5px auto; + width: 100%; +} + +.prompt p { + margin: 20px 0; +} + +/*=== New article notification */ +#new-article { + background: #0084cc; + text-align: center; + font-size: 0.9em; +} + +#new-article:hover { + background: #06c; +} + +#new-article > a { + line-height: 3em; + color: #fff; + font-weight: bold; +} + +#new-article > a:hover { + text-decoration: none; +} + +/*=== Day indication */ +.day { + padding: 0 10px; + font-weight: bold; + line-height: 3em; + background: #fff; + border-top: 1px solid #aaa; + border-bottom: 1px solid #aaa; +} + +#new-article + .day { + border-top: none; +} + +.day .name { + padding: 0 0 0 10px; + color: #aab; + font-size: 1.8em; + opacity: 0.3; + text-shadow: 0px -1px 0px #666; + 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: 2px solid #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.9rem; +} + +.flux .website .favicon { + padding: 5px; +} + +.flux .date { + color: #666; + font-size: 0.7rem; +} + +.flux .bottom { + font-size: 0.8rem; + text-align: center; +} + +/*=== Content of feed articles */ +.content { + padding: 20px 10px; +} + +.content > h1.title > a { + color: #000; +} + +.content hr { + margin: 30px 10px; + 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 { + padding: 0 5px 0 0; + font-size: 0.9em; + border: 1px solid #eeb; + border-radius: 3px; + box-shadow: 0 0 5px #ddd; + text-align: center; + font-weight: bold; + line-height: 3em; + z-index: 10; + 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; + text-align: center; + text-decoration: none; + text-shadow: 0 -1px 0 #aaa; +} + +#bigMarkAsRead:hover { + background: #fff; + color: #0062be; + box-shadow: 0 -5px 10px #eee inset; +} + +#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: 3em; + 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 .box-title .title { + font-weight: normal; + text-decoration: none; + text-align: right; +} + +.box.category:not([data-unread="0"]) .box-title { + background: #0084cc; +} + +.box.category:not([data-unread="0"]) .box-title:active { + background: #3498db; +} + +.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; +} + +.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; +} + +/*=== LOGS */ +/*=========*/ +.loglist { + border: 1px solid #aaa; + border-radius: 5px; + overflow: hidden; +} + +.log { + padding: 5px 10px; + background: #fafafa; + color: #333; + font-size: 0.8rem; +} + +.log+.log { + border-top: 1px solid #aaa; +} + +.log .date { + display: block; + font-weight: bold; +} + +.log.error { + background: #fdd; + color: #844; +} + +.log.warning { + background: #ffe; + color: #c95; +} + +.log.notice { + background: #f4f4f4; + color: #aaa; +} + +.log.debug { + background: #333; + color: #eee; +} + +/*=== MOBILE */ +/*===========*/ + +@media (max-width: 840px) { + .aside { + box-shadow: -3px 0 3px #aaa; + transition: width 200ms linear; + } + + .aside .toggle_aside, + #panel .close { + 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; + } + + .nav_menu .stick { + margin: 0 10px; + } + + .nav_menu .stick .btn { + margin: 5px 0; + } + + .nav_menu .search { + display: inline-block; + max-width: 97%; + } + + .nav_menu .search input { + max-width: 97%; + width: 90px; + } + + .nav_menu .search input:focus { + width: 400px; + } + + .day .name { + font-size: 1.1rem; + text-shadow: none; + } + + .pagination { + margin: 0 0 3.5em; + } + + .notification a.close { + background: transparent; + display: block; + right: 0; + } + + .notification a.close:hover { + opacity: 0.5; + } + + .notification a.close .icon { + display: none; + } +} diff --git a/p/themes/Pafat/pafat.rtl.css b/p/themes/Pafat/pafat.rtl.css new file mode 100644 index 000000000..07e72159c --- /dev/null +++ b/p/themes/Pafat/pafat.rtl.css @@ -0,0 +1,1176 @@ +@charset "UTF-8"; + +/*=== GENERAL */ +/*============*/ +html, body { + background: #fafafa; + height: 100%; + color: #666; + font-family: "OpenSans", "Cantarell", "Helvetica", "Arial", "PingFang SC", "Microsoft YaHei", sans-serif; +} + +/*=== Links */ +a { + color: #2980b9; + 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: 1px; + background: #fdfdfd; + color: #666; + border: 1px solid #bbb; + border-radius: 3px; + min-height: 25px; + line-height: 21px; + vertical-align: middle; +} + +option { + padding: 0 .5em; +} + +input:focus, select:focus, textarea:focus { + outline-color: #aaa; +} + +input:invalid, select:invalid { + border-color: #f00; + box-shadow: 0 0 2px 2px #fdd inset; + outline-color: #fdd; +} + +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 { + margin: 10px 220px 10px 0; + padding: 5px 0; + min-height: 25px; + +} + +.form-group table { + margin: 10px 220px 0 0; +} + +/*=== Buttons */ +.stick { + vertical-align: middle; + font-size: 0; + min-width: 215px; +} + +.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 { + width: 176px; +} + +.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 .btn + .dropdown > .btn { + border-right: none; + border-radius: 3px 0 0 3px; +} + +.btn { + margin: 0; + padding: 1px 5px; + background: #fff; + display: inline-block; + color: #666; + font-size: 0.9rem; + border: 1px solid #aaa; + border-radius: 3px; + min-height: 29px; + min-width: 15px; + line-height: 25px; + vertical-align: middle; + cursor: pointer; + overflow: hidden; +} + +a.btn { + min-height: 25px; + line-height: 25px; +} + +.read_all.btn { + height: 29px; +} + +.btn:hover { + background: #f0f0f0; + text-decoration: none; +} + +.btn.active, +.btn:active, +.dropdown-target:target ~ .btn.dropdown-toggle { + background: #eee; +} + +.btn-important { + background: #5cb85c; + color: #fff; + border-color: #5cb85c; + font-weight: normal; +} + +.btn-important:hover, .btn-important:active { + background: #47a447; + border-color: #47a447; + box-shadow: none; +} + +.btn-attention { + background: #d9534f; + color: #fff; + border: 1px solid #d9534f; + outline-color: #aaa; +} + +.btn-attention:hover { + background: #d2322d; + border-color: #d2322d; +} + +.btn-attention:active { + background: #d2322d; + 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: #3498db; + color: #fff; +} + +.nav-list .item.active a { + color: #fff; +} + +.nav-list .disable { + background: #fafafa; + color: #aaa; + text-align: center; +} + +.nav-list .item > a { + padding: 0 10px; +} + +.nav-list a:hover { + text-decoration: none; +} + +.nav-list .item.empty a { + color: #f39c12; +} + +.nav-list .item.active.empty a { + 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; +} + +.nav-list .nav-form { + padding: 3px; + text-align: center; +} + +.nav-head { + margin: 0; + background: #fff; + background: linear-gradient(to bottom, #fff, #f0f0f0); + text-align: left; +} + +.nav-head .item { + padding: 5px 10px; + font-size: 0.9rem; + line-height: 1.5rem; +} + +/*=== Horizontal-list */ +.horizontal-list { + margin: 0; + padding: 0; +} + +.horizontal-list .item { + vertical-align: middle; +} + +/*=== Dropdown */ +.dropdown-menu { + margin: 5px 0 0; + padding: 5px 0; + font-size: 0.8rem; + border: 1px solid #aaa; + border-radius: 5px; + text-align: right; +} + +.dropdown-menu::after { + background: #fff; + width: 10px; + height: 10px; + border-top: 1px solid #aaa; + border-right: 1px solid #aaa; + 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; + color: #666; + font-size: 0.8rem; +} + +.dropdown-menu > .item:hover { + background: #eee; + color: #666; +} + +.dropdown-menu > .item[aria-checked="true"] > a::before { + font-weight: bold; + margin: 0 -14px 0 0; +} + +.dropdown-menu > .item:hover > a { + color: #666; + text-decoration: none; +} + +.dropdown-menu .input select, +.dropdown-menu .input input { + margin: 0 auto 5px; + padding: 2px 5px; + border-radius: 3px; +} + +.separator { + margin: 5px 0; + border-bottom: 1px solid #ddd; +} + +/*=== Alerts */ +.alert { + margin: 15px auto; + padding: 10px 15px; + background: #f4f4f4; + color: #aaa; + font-size: 0.9em; + border: 1px solid #ccc; + border-left: 1px solid #aaa; + border-bottom: 1px solid #aaa; + border-radius: 5px; +} + +.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: #fff; + text-align: center; + color: #41444f; + font-size: 0.8em; +} + +.content .pagination { + margin: 0; + padding: 0; +} + +.pagination .item.pager-current { + font-weight: bold; + font-size: 1.5em; +} + +.pagination .item a { + display: block; + color: #41444f; + font-style: italic; + line-height: 3em; + text-decoration: none; +} + +.pagination .item a:hover { + background: #ddd; +} + +.pagination:first-child .item { + border-bottom: 1px solid #aaa; +} + +.pagination:last-child .item { + border-top: 1px solid #aaa; +} + +.pagination .loading, +.pagination a:hover.loading { + background: url("loader.gif") center center no-repeat #fff; + font-size: 0; +} + +/*=== Boxes */ +.box { + border: 1px solid #aaa; + border-radius: 5px; +} + +.box .box-title { + margin: 0; + padding: 5px 10px; + background: #f6f6f6; + border-bottom: 1px solid #aaa; + border-radius: 5px 5px 0 0; +} + +.box .box-content { + max-height: 260px; +} + +.box .box-content .item { + padding: 0 10px; + font-size: 0.9rem; + line-height: 2.5em; +} + +.box .box-title .configure, +.box .box-content .item .configure { + visibility: hidden; +} + +.box .box-title:hover .configure, +.box .box-content .item:hover .configure { + visibility: visible; +} + +/*=== Tree */ +.tree { + margin: 10px 0; +} + +.tree-folder-title { + margin: 5px; + padding: 0 10px; + background: #5bc0de; + color: #fff; + font-size: 0.9rem; + border-top: 1px solid transparent; + border-bottom: 1px solid transparent; + border-radius: 5px; + position: relative; + line-height: 2rem; +} + +.tree-folder-title .title { + background: inherit; + color: #fff; +} + +.tree-folder-title .title:hover { + text-decoration: none; +} + +.tree-folder.active .tree-folder-title { + background: #39b3d7; + font-weight: bold; + font-size: 1rem; + border-top: 1px solid #666; + border-bottom: 1px solid #666; +} + +.tree-folder-items > .item { + padding: 0 10px; + line-height: 2.5rem; + font-size: 0.8rem; +} + +.tree-folder-items > .item.active { + background: #5cb85c; +} + +.tree-folder-items > .item > a { + text-decoration: none; +} + +.tree-folder-items > .item.active > a { + color: #fff; +} + +/*=== STRUCTURE */ +/*===============*/ +/*=== Header */ +.header { + background: #41444f; + height: 85px; +} + +.header > .item { + padding: 10px; + border-bottom: 1px solid #aaa; + vertical-align: middle; + text-align: center; +} + +.header > .item.title { + width: 230px; +} + +.header > .item.title h1 { + margin: 0.5em 0; +} + +.header > .item.title h1 a, a.signin { + text-decoration: none; + color: #c5c6ca; +} + +.header > .item.search input { + width: 230px; + height: 29px; + box-sizing: border-box; +} + +.header > .item.search button { + box-sizing: border-box; + height: 29px; +} + +.header .item.search input:focus { + width: 350px; +} + +/*=== Body */ +#global { + height: calc(100% - 85px); +} + +.aside { + background: #fff; + border-left: 1px solid #aaa; +} + +.aside.aside_feed { + padding: 10px 0; + text-align: center; +} + +.aside.aside_feed .tree { + margin: 10px 0 50px; +} + +/*=== Aside main page (categories) */ +.aside_feed .tree-folder-title > .title:not([data-unread="0"])::after { + padding: 0px 5px; + font-size: 0.8rem; + border: 1px solid #fff; + border-radius: 3px; + position: absolute; + top: 0.25rem; left: 3px; + line-height: 1.5rem; +} + +.aside_feed .tree-folder.all .tree-folder-title { + background: #428bca; +} + +.aside_feed .tree-folder.all.active .tree-folder-title { + background: #3276b1; +} + +.aside_feed .tree-folder.favorites .tree-folder-title { + background: #f0ad4e; +} + +.aside_feed .tree-folder.favorites.active .tree-folder-title { + background: #ed9c28; +} + +/*=== 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:hover .dropdown-toggle > .icon, +.aside_feed .tree-folder-items .item.active .dropdown-toggle > .icon { + border-radius: 3px; + background-color: #fff; +} + +/*=== Configuration pages */ +.post { + padding: 10px 50px; + font-size: 0.9em; +} + +.post form { + margin: 10px 0; +} + +.post.content { + max-width: 550px; +} + +/*=== Prompt (centered) */ +.prompt { + text-align: center; +} + +.prompt label { + text-align: right; +} + +.prompt form { + margin: 10px auto 20px auto; + width: 200px; +} + +.prompt input { + margin: 5px auto; + width: 100%; +} + +.prompt p { + margin: 20px 0; +} + +/*=== New article notification */ +#new-article { + background: #428bca; + text-align: center; + font-size: 0.9em; +} + +#new-article:hover { + background: #3276b1; +} + +#new-article > a { + line-height: 3em; + color: #fff; + font-weight: bold; +} + +#new-article > a:hover { + text-decoration: none; +} + +/*=== Day indication */ +.day { + padding: 0 10px; + background: #fff; + color: #666; + border-top: 1px solid #aaa; + border-bottom: 1px solid #aaa; + font-weight: bold; + line-height: 3em; +} + +#new-article + .day { + border-top: none; +} + +.day .name { + padding: 0 0 0 10px; + color: #666; + font-size: 1.8em; + opacity: 0.3; + 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: 3px solid #5cb85c; +} + +.flux:hover { + background: #fff; +} + +.flux.current { + background: #fff; + border-right: 3px solid #39b3d7; +} + +.flux.not_read { + border-right: 3px solid #d9534f; +} + +.flux .item.title a, .flux.not_read:not(.current):hover .item.title { + color: #333; +} + +.flux.favorite { + border-right: 2px solid #428bca; +} + +.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.9rem; +} + +.flux .website .favicon { + padding: 5px; +} + +.flux .date { + color: #666; + font-size: 0.7rem; +} + +.flux .bottom { + font-size: 0.8rem; + text-align: center; +} + +/*=== Content of feed articles */ +.content { + padding: 20px 10px; +} + +.content > h1.title > a { + color: #333; +} + +.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: #41444f; + border-top: 1px solid #ddd; + border-bottom: 1px solid #ddd; +} + +.content blockquote p { + margin: 0; +} + +/*=== Notification and actualize notification */ +.notification { + padding: 0 5px 0 0; + font-size: 0.9em; + border: 1px solid #eeb; + border-radius: 3px; + box-shadow: 0 0 5px #ddd; + text-align: center; + font-weight: bold; + line-height: 3em; + z-index: 10; + 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; + text-align: center; + text-decoration: none; +} + +#bigMarkAsRead:hover { + background: #f0f0f0; + color: #000; +} + +#bigMarkAsRead:hover .bigTick { + /* text-shadow: 0 0 10px #666;*/ +} + +/*=== Navigation menu (for articles) */ +#nav_entries { + margin: 0; + background: #fff; + border-top: 1px solid #ddd; + text-align: center; + line-height: 3em; + table-layout: fixed; +} + +#nav_entries .item:hover { + background: #eee ; +} +/*=== READER VIEW */ +/*================*/ +#stream.reader .flux { + padding: 0 0 50px; + background: #f0f0f0; + color: #41444f; + border: none; +} + +#stream.reader .flux .author { + margin: 0 0 10px; + color: #666; + font-size: 90%; +} + +/*=== GLOBAL VIEW */ +/*================*/ +.box.category .box-title .title { + font-weight: normal; + text-decoration: none; + text-align: right; +} + +.box.category:not([data-unread="0"]) .box-title { + background: #5bc0de; +} + +.box.category:not([data-unread="0"]) .box-title .title { + font-weight: bold; + color: #fff; +} + +.box.category .title:not([data-unread="0"])::after { + background: none; + font-size: 0.8rem; + border: 0; + box-shadow: none; + position: absolute; + top: 5px; left: 10px; + font-weight: bold; + text-shadow: none; + line-height: 1.6rem; +} + +.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; + text-align: center; +} + +.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: 250px; +} + +/*=== LOGS */ +/*=========*/ +.loglist { + border: 1px solid #aaa; + border-radius: 5px; + overflow: hidden; +} + +.log { + padding: 5px 10px; + background: #fafafa; + color: #41444f; + font-size: 0.8rem; +} + +.log+.log { + border-top: 1px solid #aaa; +} + +.log .date { + display: block; + font-weight: bold; +} + +.log.error { + background: #fdd; + color: #844; +} + +.log.warning { + background: #ffe; + color: #c95; +} + +.log.notice { + background: #f4f4f4; + color: #aaa; +} + +.log.debug { + background: #41444f; + color: #eee; +} + +/*=== MOBILE */ +/*===========*/ + +@media (max-width: 840px) { + .aside { + box-shadow: -3px 0 3px #aaa; + transition: width 200ms linear; + } + + .aside .toggle_aside, + #panel .close { + background: #f6f6f6; + display: block; + width: 100%; + height: 40px; + border-bottom: 1px solid #ddd; + line-height: 40px; + text-align: center; + } + + .aside.aside_feed { + padding: 0; + } + + .nav_menu .btn { + margin: 5px 10px; + } + + .nav_menu .stick { + margin: 0 10px; + } + + .nav_menu .stick .btn { + margin: 5px 0; + } + + .nav_menu .search { + display: inline-block; + max-width: 97%; + } + + .nav_menu .search input { + max-width: 97%; + width: 90px; + } + + .nav_menu .search input:focus { + width: 400px; + } + + .day .name { + font-size: 1.1rem; + text-shadow: none; + } + + .pagination { + margin: 0 0 3.5em; + } + + .notification a.close { + background: transparent; + display: block; + right: 0; + } + + .notification a.close:hover { + opacity: 0.5; + } + + .notification a.close .icon { + display: none; + } +} diff --git a/p/themes/Screwdriver/screwdriver.rtl.css b/p/themes/Screwdriver/screwdriver.rtl.css new file mode 100644 index 000000000..48b1ab564 --- /dev/null +++ b/p/themes/Screwdriver/screwdriver.rtl.css @@ -0,0 +1,1356 @@ +@charset "UTF-8"; + +/*=== GENERAL */ +/*============*/ +html, body { + background: #fafafa; + height: 100%; + font-family: "OpenSans", "Cantarell", "Helvetica", "Arial", "PingFang SC", "Microsoft YaHei", sans-serif; + font-size: 92%; +} + +/*=== Links */ +a, button.as-link { + color: #d18114; + outline: none; +} + +/*=== Forms */ +.form-group { + display: inline-block; + float: right; + width: 100%; + height: auto; +} + +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: 5px; + background: #fff; + color: #222; + border: 1px solid #ccc; + border-radius: 3px; + box-shadow: 0 1px 2px #ccc inset, 0 1px #fff; + min-height: 25px; + line-height: 25px; + vertical-align: middle; +} + +option { + padding: 0 .5em; +} + +input:focus, select:focus, textarea:focus { + color: #0f0f0f; + border: solid 1px #e7ab34; + box-shadow: 0 0 3px #e7ab34; +} + +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; + border-radius: 4px; + box-shadow: 0 1px rgba(255,255,255,0.08) inset; +} + +.form-group .group-name { + padding: 10px 0; + text-align: left; +} + +.form-group .group-controls { + min-height: 25px; + padding: 5px 0; +} + +.form-group table { + margin: 10px 220px 0 0; +} + +/*=== Buttons */ +button.as-link[disabled] { + color: #555 !important; +} + +.dropdown-menu .input select, .dropdown-menu .input input { + margin: 0 auto 5px; + padding: 2px 5px; + background: #444; + color: #fff; + border: solid 1px #171717; + border-radius: 3px; + box-shadow: 0 2px 2px #222 inset, 0px 1px rgba(255, 255, 255, 0.08); +} + +.stick { + vertical-align: middle; + font-size: 0; +} + +.stick input, +.stick .btn { + border-radius: 0; +} + +.stick .btn:first-child,.stick input:first-child { + border-radius: 0 6px 6px 0; +} + +.stick .btn:last-child, .stick input:last-child { + border-radius: 6px 0 0 6px; +} + +.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 .btn + .dropdown > .btn { + border-right: none; + border-radius: 3px 0 0 3px; +} + +.btn { + margin: 0; + padding: 5px 10px; + background: linear-gradient(0deg, #ede7de 0%, #fff 100%) #ede7de; + background: -webkit-linear-gradient(bottom, #ede7de 0%, #fff 100%); + display: inline-block; + color: #222; + font-size: 0.9rem; + border: solid 1px #ccc; + border-radius: 4px; + min-height: 37px; + min-width: 15px; + text-shadow: 0px -1px rgba(255,255,255,0.08); + vertical-align: middle; + cursor: pointer; + overflow: hidden; +} + +a.btn { + min-height: 25px; + line-height: 25px; +} + +.btn:hover { + text-shadow: 0 0 2px #fff; + text-decoration: none; +} + +.btn.active,.btn:active,.dropdown-target:target ~ .btn.dropdown-toggle { + background: linear-gradient(-180deg, #ede7de 0%, #fff 100%) #ede7de; + background: -webkit-linear-gradient(top, #ede7de 0%, #fff 100%); +} + +.nav_menu .btn.active, .nav_menu .btn:active, .nav_menu .dropdown-target:target ~ .btn.dropdown-toggle { + background: linear-gradient(-180deg, #ede7de 0%, #f6f6f6 100%) #ede7de; + background: -webkit-linear-gradient(top, #ede7de 0%, #f6f6f6 100%); + border: solid 1px #ccc; + border-radius: 4px; + box-shadow: 0 1px #fff; +} + +.nav_menu .btn { + background: transparent; + border: 0; +} + +.read_all { + color: #222; +} + +.btn.dropdown-toggle[href="#dropdown-configure"] { + background: linear-gradient(0deg, #ede7de 0%, #fff 100%) #ede7de; + background: -webkit-linear-gradient(bottom, #ede7de 0%, #fff 100%); + border: solid 1px #ccc; + border-radius: 4px; + box-shadow: 0 1px #fff; +} + +.btn.dropdown-toggle:active { + background: transparent; +} + +.btn-important { + background: linear-gradient(-180deg, #e4992c 0%, #d18114 100%) #e4992c; + background: -webkit-linear-gradient(top, #e4992c 0%, #d18114 100%); + color: #fff; + border-radius: 4px; + box-shadow: 0 1px rgba(255,255,255,0.08) inset; + text-shadow: 0px -1px rgba(255,255,255,0.08); + font-weight: normal; +} + +.btn-important:active { + background: linear-gradient(0deg, #e4992c 0%, #d18114 100%) #e4992c; + background: -webkit-linear-gradient(bottom, #e4992c 0%, #d18114 100%); +} + +.btn-attention { + background: #e95b57; + background: linear-gradient(to bottom, #e95b57, #bd362f); + background: -webkit-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: -webkit-linear-gradient(top, #d14641 0%, #bd362f 100%); +} + +.btn-attention:active { + background: #bd362f; + box-shadow: none; +} + +.btn[type="reset"] { + background: linear-gradient(-180deg, #222 0%, #171717 100%) #171717; + background: -webkit-linear-gradient(top, #222 0%, #171717 100%); + color: #fff; + box-shadow: 0 -1px rgba(255,255,255,0.08) inset; +} +/*=== Navigation */ +.nav-list .nav-header, +.nav-list .item { + height: 2.5em; + line-height: 2.5em; + font-size: 0.9rem; +} + +.nav-list .item:hover { + text-shadow: 0 0 2px rgba(255,255,255,0.28); + color: #fff; +} + +.nav-list .item.active { + margin: 0; + background: linear-gradient(-180deg, #222 0%, #171717 100%) repeat scroll 100% 0% #171717; + background: -webkit-linear-gradient(-180deg, #222 0%, #171717 100%); + box-shadow: 1px 2px 2px #171717, 0px 1px rgba(255, 255, 255, 0.08) inset; + border-width: medium medium 1px; + border-style: none none solid; + border-color: -moz-use-text-color -moz-use-text-color #171717; +} + +.nav-list .item.active a { + color: #d18114; +} + +.nav-list .disable { + background: #fafafa; + color: #aaa; + text-align: center; +} + +.nav-list .item > a { + padding: 0 10px; + color: #ccc; +} + +.nav-list a:hover { + text-decoration: none; +} + +.nav-list .item.empty a { + color: #f39c12; +} + +.nav-list .item.active.empty a { + background: linear-gradient(-180deg, #e4992c 0%, #d18114 100%) #e4992c; + background: -webkit-linear-gradient(-180deg, #e4992c 0%, #d18114 100%); + 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: transparent; + color: #222; +} + +.nav-list .nav-form { + padding: 3px; + text-align: center; +} + +.nav-head { + margin: 0; + background: linear-gradient(0deg, #ede7de 0%, #fff 100%) #ede7de; + background: -webkit-linear-gradient(bottom, #ede7de 0%, #fff 100%); + text-align: left; +} + +.nav-head .item { + padding: 5px 10px; + font-size: 0.9rem; + line-height: 1.5rem; +} + +/*=== Horizontal-list */ +.horizontal-list { + margin: 0; + padding: 0; +} + +.horizontal-list .item { + vertical-align: middle; +} + +/*=== Dropdown */ +.dropdown-menu { + margin: 5px 0 0; + padding: 5px 0; + background: #222; + font-size: 0.8rem; + border: 1px solid #171717; + border-radius: 4px; + box-shadow: 0 0 3px #000; + text-align: right; +} + +.dropdown-menu::after { + background: #222; + width: 10px; + height: 10px; + border-top: 1px solid #171717; + border-right: 1px solid #171717; + content: ""; + position: absolute; + top: -6px; + left: 13px; + z-index: -10; + transform: rotate(-45deg); +} + +.dropdown-header { + display: none; +} + +.dropdown-menu > .item > a, +.dropdown-menu > .item > span, +.dropdown-menu > .item > .as-link { + padding: 0 22px; + line-height: 2.5em; + color: #ccc; + font-size: 0.8rem; +} + +.dropdown-menu > .item > label { + color: #ccc; +} + +.dropdown-menu > .item:hover { + background: #171717; + color: #fff; +} + +.dropdown-menu > .item[aria-checked="true"] > a::before { + font-weight: bold; + margin: 0 -14px 0 0; +} + +.dropdown-menu > .item:hover > a { + color: #fff; + text-decoration: none; +} + +.separator { + margin: 5px 0; + border-bottom: 1px solid #171717; + box-shadow: 0 1px rgba(255,255,255,0.08); +} + +/*=== 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; + text-align: center; + color: #333; + font-size: 0.8em; +} + +.content .pagination { + margin: 0; + padding: 0; +} + +.pagination .item.pager-current { + font-weight: bold; + font-size: 1.5em; +} + +.pagination .item a { + display: block; + color: #333; + font-style: italic; + line-height: 3em; + text-decoration: none; +} + +.pagination .item a:hover { + background: #ddd; +} + +.pagination:first-child .item { + border-bottom: 1px solid #aaa; +} + +.pagination:last-child .item { + border-top: 1px solid #ddd; +} + +.pagination .loading, +.pagination a:hover.loading { + background: url("loader.gif") center center no-repeat #fff; + font-size: 0; +} + +/*=== Boxes */ +.box { + background: #ede7de; + border-radius: 4px; + box-shadow: 0 1px #fff; +} + +.box .box-title { + margin: 0; + padding: 5px 10px; + background: linear-gradient(0deg, #ede7de 0%, #fff 100%) #171717; + background: -webkit-linear-gradient(bottom, #ede7de 0%, #fff 100%); + color: #888; + font-size: 1.1rem; + border-radius: 4px 4px 0 0; + box-shadow: 0px -1px #fff inset,0 -2px #ccc inset; + text-shadow: 0 1px #ccc; + font-weight: normal; +} + +.box .box-content { + max-height: 260px; +} + +.box .box-content .item { + padding: 0 10px; + font-size: 0.9rem; + line-height: 2.5em; +} + +.box .box-title .configure, +.box .box-content .item .configure { + visibility: hidden; +} + +.box .box-title:hover .configure, +.box .box-content .item:hover .configure { + visibility: visible; +} + +/*=== Tree */ +.tree { + margin: 10px 0; +} + +.tree-folder-title { + position: relative; + padding: 0 10px; + line-height: 2.5rem; + font-size: 0.9rem; +} + +.tree-folder-title .title { + background: inherit; + color: #fff; +} + +.tree-folder-title .title:hover { + text-decoration: none; +} + +.tree-folder.active .tree-folder-title { + background: linear-gradient(-180deg, #222 0%, #171717 100%) #171717; + background: -webkit-linear-gradient(top, #222 0%, #171717 100%); + color: #fff; + box-shadow: 0px 1px #171717, 0px 1px rgba(255, 255, 255, 0.08) inset; + text-shadow: 0 0 2px rgba(255,255,255,0.28); +} + +.tree-folder-items { + padding: 8px 0; + background: #171717; + box-shadow: 0 4px 4px #171717 inset, 0 1px rgba(255,255,255,0.08),0 -1px rgba(255,255,255,0.08); +} + +.tree-folder-items > .item { + padding: 0 10px; + line-height: 2.5rem; + font-size: 0.8rem; +} + +.tree-folder-items > .item.active { + margin: 0px 8px; + background: linear-gradient(-180deg, #222 0%, #171717 100%) #171717; + background: -webkit-linear-gradient(top, #222 0%, #171717 100%); + border-radius: 4px; + box-shadow: 0px 1px #171717, 0px 1px rgba(255, 255, 255, 0.08) inset, 0 2px 2px #111; +} + +.tree-folder-items > .item > a { + text-decoration: none; + color: #fff; + font-size: 0.92em; +} + +/*=== 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 { + background: linear-gradient(0deg, #ede7de 0%, #fff 100%) #ede7de; + background: -webkit-linear-gradient(bottom, #ede7de 0%, #fff 100%); + height: 55px; +} + +.header > .item { + padding: 0; + vertical-align: middle; + text-align: center; +} + +.header > .item.title .logo { + width: 60px; + height: 60px; +} + +.header > .item.title { + width: 250px; +} + +.header > .item.title h1 { + margin: 0.5em 0; +} + +.header > .item.title h1 a { + color: #222; + font-size: 28px; + text-decoration: none; + text-shadow: 0 1px #fff; +} + +.header > .item.search input { + width: 230px; +} + +.header .item.search input:focus { + width: 350px; +} + +/*=== Body */ +#global { + background: #ede7de; + height: calc(100% - 60px); +} + +.aside { + background: #222; + width: 235px; + border-top: 1px solid #ccc; + border-radius: 12px 0px 0px 0px; + box-shadow: 0px -1px #fff, 0 2px 2px #171717 inset; +} + +.aside.aside_feed { + padding: 10px 0; + text-align: center; +} + +.aside.aside_feed .tree { + margin: 10px 0 50px; +} + +/*=== Aside main page (categories) */ +.aside_feed .tree-folder-title > .title:not([data-unread="0"])::after { + position: absolute; + left: 3px; + padding: 1px 5px; + color: #fff; + text-shadow: 0 1px rgba(255,255,255,0.08); +} + +.aside_feed .btn-important { + border: none; +} + +/*=== Aside main page (feeds) */ +.feed.item.empty, +.feed.item.empty > a { + color: #e67e22; +} + +.feed.item.error, +.feed.item.error > a { + color: #bd362f; +} + +.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:hover .dropdown-toggle > .icon, +.aside_feed .tree-folder-items .item.active .dropdown-toggle > .icon { + 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 { + text-align: center; + padding: 14px 0px; + text-shadow: 0 1px rgba(255,255,255,0.08); +} + +.prompt label { + text-align: right; +} + +.prompt form { + margin: 10px auto 20px auto; + width: 180px; +} + +.prompt input { + margin: 5px auto; + width: 100%; +} + +.prompt p { + margin: 20px 0; +} + +.prompt input#username,.prompt input#passwordPlain { + background: #fff; + border: solid 1px #ccc; + box-shadow: 0 4px -4px #ccc inset,0px 1px rgba(255, 255, 255, 0.08); +} + +.prompt input#username:focus,.prompt input#passwordPlain:focus { + border: solid 1px #e7ab34; + box-shadow: 0 0 3px #e7ab34; +} + +/*=== New article notification */ +#new-article { + background: #0084cc; + text-align: center; + font-size: 0.9em; +} + +#new-article:hover { + background: #06c; +} + +#new-article > a { + line-height: 3em; + color: #fff; + font-weight: bold; +} + +#new-article > a:hover { + text-decoration: none; +} + +/*=== Day indication */ +.day { + padding: 0 10px; + background: linear-gradient(0deg, #ede7de 0%, #c2bcb3 100%) #ede7de; + background: -webkit-linear-gradient(bottom, #c2bcb3 0%, #fff 100%); + color: #666; + box-shadow: 0 1px #bdb7ae inset, 0 -1px rgba(255,255,255,0.28) inset; + font-style: italic; + line-height: 3em; + text-shadow: 0 1px rgba(255,255,255,0.28); + text-align: center; +} + +#new-article + .day { + border-top: none; +} + +.day .name { + display: none; +} + +/*=== Index menu */ +.nav_menu { + padding: 5px 0; + background: #ede7de; + border-bottom: 1px solid #ccc; + box-shadow: 0 -1px rgba(255, 255, 255, 0.28) inset; + text-align: center; +} + +#panel >.nav_menu { + background: linear-gradient(0deg, #ede7de 0%, #fff 100%) #ede7de; + background: -webkit-linear-gradient(bottom, #ede7de 0%, #fff 100%); +} + +#panel > .nav_menu > #nav_menu_read_all { + background: linear-gradient(0deg, #ede7de 0%, #fff 100%) #ede7de; + background: -webkit-linear-gradient(bottom, #ede7de 0%, #fff 100%); + border: 1px solid #ccc; + border-radius: 4px; + box-shadow: 0px 1px #fff; +} + +#panel > .nav_menu > #nav_menu_read_all .dropdown > .btn.dropdown-toggle { + border: none; + border-right: solid 1px #ccc; + border-radius: 4px 0 0 4px; +} + +/*=== Feed articles */ +.flux_content { + background: #fff; + border-radius: 10px; +} + +.flux { + background: #ede7de; +} + +.flux:hover { + background: #f9f7f4; +} + +.flux:not(.current):hover .item.title { + background: #f9f7f4; +} + +.flux.current .flux .item.title a { + text-shadow: 0 0 2px #ccc; +} + +.flux.not_read:not(.current):hover .item.title { + opacity: 0.85; +} + +.flux.favorite { + background: #fff6da; +} + +.flux.favorite:not(.current):hover { + background: #f9f7f4; +} + +.flux.favorite:not(.current):hover .item.title { + background: #f9f7f4; +} + +.flux.current { + margin: 3px 6px; + background: linear-gradient(0deg, #ede7de 0%, #fff 100%) #ede7de; + background: -webkit-linear-gradient(bottom, #ede7de 0%, #fff 100%); + border-radius: 10px; + box-shadow: 0 -1px #fff inset, 0 2px #ccc; +} + +.flux .item.title { + opacity: 0.35; +} + +.flux.favorite .item.title { + opacity: 1; +} + +.flux.not_read .item.title { + opacity: 1; +} + +.flux.current .item.title a { + color: #0f0f0f; +} + +.flux .item.title a { + color: #333; +} + +.flux_header { + font-size: 0.8rem; + border-top: 1px solid #ddd; + box-shadow: 0 -1px rgba(255,255,255,0.28) inset; + cursor: pointer; +} + +.flux_header .title { + font-size: 0.9rem; +} + +.flux .website .favicon { + padding: 5px; +} + +.flux .date { + color: #666; + font-size: 0.7rem; +} + +.flux .bottom { + font-size: 0.8rem; + text-align: center; +} + +/*=== Content of feed articles */ +.content { + padding: 20px 10px; +} + +.content > h1.title > a { + color: #000; +} + +.content hr { + margin: 30px 10px; + 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 { + padding: 0 5px 0 0; + background: #222; + color: #fff; + font-size: 0.9em; + border: none; + border-radius: 0 0 12px 12px; + box-shadow: 0px 0px 4px rgba(0,0,0,0.45), 0 -1px rgba(255,255,255,0.08) inset, 0 2px 2px #171717 inset; + text-align: center; + font-weight: bold; + line-height: 3em; + position: absolute; + top: 0; + z-index: 10; + vertical-align: middle; +} + +.notification.good { + color: #c95; +} + +.notification.bad { + background: #fdd; + color: #844; +} + +.notification a.close { + padding: 0 15px; + line-height: 3em; +} + +.notification#actualizeProgress { + line-height: 2em; +} + +/*=== "Load more" part */ +#bigMarkAsRead { + background: #ede7de; + color: #666; + box-shadow: 0 1px rgba(255,255,255,0.28)inset; + text-align: center; + text-decoration: none; + text-shadow: 0 -1px 0 #aaa; +} + +#bigMarkAsRead:hover { + background: #ede7de; + background: radial-gradient(circle at 50% -25% , #ccc 0%, #ede7de 50%); + color: #000; +} + +#bigMarkAsRead:hover .bigTick { + text-shadow: 0 0 10px #666; +} + +/*=== Navigation menu (for articles) */ +#nav_entries { + background: linear-gradient(-180deg, #222 0%, #171717 100%) #222; + background: -webkit-linear-gradient(top, #222 0%, #171717 100%); + width: 235px; + border-top: 1px solid #171717; + box-shadow: 0 1px rgba(255,255,255,0.08) inset, 0 -2px 2px #171717; + text-align: center; + line-height: 3em; + 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 */ +/*================*/ +#stream.global { + padding: 24px 0; + box-shadow: 0px 8px 8px #c2bcb3 inset; +} + +.box.category .box-title { + background: linear-gradient(0deg, #ede7de 0%, #fff 100%) #171717; + background: -webkit-linear-gradient(bottom, #ede7de 0%, #fff 100%); + font-size: 1.2rem; + border-radius: none; + box-shadow: 0px -1px #fff inset,0 -2px #ccc inset; + line-height: 2em; + text-shadow: 0 1px #ccc; +} + +.box.category .box-title .title { + font-weight: normal; + text-decoration: none; + text-align: right; + color: #888; +} + +.box.category:not([data-unread="0"]) .box-title .title { + color: #222; + font-weight: bold; +} + +.box.category .title:not([data-unread="0"])::after { + background: none; + border: 0; + position: absolute; + top: 5px; left: 10px; + font-weight: bold; +} + +.box.category .item.feed { + padding: 2px 10px; + font-size: 0.8rem; +} + +.box.category .item.feed:not(.empty):not(.error) .item-title { + color: #222; +} + +/*=== PANEL */ +/*===========*/ +#panel { + background: #ede7de; + border-radius: 8px; + box-shadow: 0px 0px 4px #000; +} +/*=== DIVERS */ +/*===========*/ +.aside.aside_feed .nav-form input,.aside.aside_feed .nav-form select { + width: 130px; +} + +.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 { + background: rgba(255,255,255,0.38); + border-bottom: 1px solid #ccc; + box-shadow: 0 1px #fff; +} + +.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: 250px; +} + +/*=== LOGS */ +/*=========*/ +.loglist { + border: 1px solid #aaa; + border-radius: 5px; + overflow: hidden; +} + +.log { + padding: 5px 10px; + background: #fafafa; + color: #333; + font-size: 0.8rem; +} + +.log+.log { + border-top: 1px solid #aaa; +} + +.log .date { + display: block; + font-weight: bold; +} + +.log.error { + background: #fdd; + color: #844; +} + +.log.warning { + background: #ffe; + color: #c95; +} + +.log.notice { + background: #f4f4f4; + color: #aaa; +} + +.log.debug { + background: #333; + color: #eee; +} + +#slider.active { + background: #f8f8f8; + box-shadow: 4px 0 4px rgba(15, 15, 15, 0.55); +} + +#close-slider.active { + background: rgba(15, 15, 15, 0.35); +} + +/*=== MOBILE */ +/*===========*/ + +@media screen and (max-width: 840px) { + .header { + display: table; + } + + .nav-login { + display: none; + } + + .aside { + width: 0; + border-top: none; + box-shadow: -3px 0 3px #000; + transition: width 200ms linear; + } + + .aside:target { + width: 235px; + } + + .aside .toggle_aside, + #panel .close { + background: #171717; + display: block; + width: 100%; + height: 40px; + border-radius: 8px 0 8px 0; + box-shadow: 0 1px rgba(255,255,255,0.08); + line-height: 40px; + text-align: center; + } + + .aside .btn-important { + margin: 20px 0 0; + display: inline-block; + } + + .aside.aside_feed { + padding: 0; + } + + .nav_menu .btn { + margin: 5px 10px; + } + + .nav_menu .stick { + margin: 0 10px; + } + + .nav_menu .stick .btn { + margin: 5px 0; + } + + .nav_menu .search { + display: none; + } + + .nav_menu .search input { + max-width: 97%; + width: 90px; + } + + .nav_menu .search input:focus { + width: 400px; + } + + .day .name { + display: none; + } + + .pagination { + margin: 0 0 3.5em; + } + + .notification a.close { + background: transparent; + display: block; + right: 0; + } + + .notification a.close:hover { + opacity: 0.5; + } + + .notification a.close .icon { + display: none; + } + + #nav_entries { + width: 100%; + } +} + +@media (max-width: 700px) { + .header { + display: none; + } + + .nav-login { + display: inline-block; + width: 100%; + } + + .nav_menu .search { + display: inline-block; + } + + .aside .btn-important { + display: none; + } +} diff --git a/p/themes/Swage/swage.rtl.css b/p/themes/Swage/swage.rtl.css new file mode 100644 index 000000000..e04a45efb --- /dev/null +++ b/p/themes/Swage/swage.rtl.css @@ -0,0 +1,907 @@ +textarea, input, +select { + min-height: 25px; + margin-top: 4px; + line-height: 25px; + vertical-align: middle; + background: #fcfcfc; + border: none; + padding-right: 5px; } + +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: 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; + color: #fcfcfc; + font-size: 0.8rem; + line-height: 2.5em; } + +.form-group::after, .flux::after { + content: ""; + display: block; + clear: both; } + +.stick.configure-feeds, .header > .item.title, .aside, #new-article, .notification, #nav_entries { + width: 231px; } + +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; } + a.btn:hover { + background: #00488b; } + a#btn-subscription { + width: 76%; } + a#btn-importExport { + width: 5%; } + +img.icon:hover { + background: none; } + +div#stream { + margin-top: 35px; } + +sup { + top: -0.3em; } + +legend { + margin: 20px 0 5px; + padding: 5px 20px; + background: #e3e3e3; + display: inline-block; + width: auto; + font-size: 1.4em; + clear: both; } + +label { + min-height: 25px; } + +textarea { + background: #e3e3e3; + width: 360px; + height: 100px; } + textarea:focus { + border-color: #00488b; } + +input:focus, +select:focus { + border-color: #00488b; } +input:disabled, +select:disabled { + background: #fcfcfc; } + +select { + background: #e3e3e3; } + +input.extend { + transition: width 200ms linear; } + +option { + padding: 0 .5em; } + +table { + border-collapse: collapse; } + +tr, +td, +th { + padding: 0.5em; + border: 1px solid #e3e3e3; } + +th { + background: #fcfcfc; } + +form td, +form th { + font-weight: normal; + text-align: center; } + +.category .title.error::before { + display: inline-block; + padding-left: 7px; + width: 16px; + content: url(../Swage/icons/error.svg); } + +.form-group { + padding: 5px; + border: 1px solid transparent; } + .form-group:hover { + background: #fcfcfc; + border: 1px solid #fcfcfc; } + .form-group.form-actions { + margin: 15px 0 25px; + padding: 5px 0; + background: #e3e3e3; + border-top: 3px solid #e3e3e3; } + .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: 5px 0; } + .form-group .group-controls .control { + line-height: 2.0em; } + .form-group table { + margin: 10px 220px 0 0; } + +.stick { + vertical-align: middle; + font-size: 0; } + +.btn { + margin: 0; + padding: 5px 10px; + background: #0062be; + display: inline-block; + color: #fcfcfc; + font-size: 0.9rem; + border: none; + min-height: 35px; + min-width: 15px; + vertical-align: middle; + cursor: pointer; + overflow: hidden; } + .btn.active, + .btn :active, + .btn :hover { + background: #00488b; + text-decoration: none; } + +.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; } + +.nav-list .nav-header { + 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 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.active.empty a { + background: #fa8052; } + .nav-list .item:hover.error a, .nav-list .item.active.error a { + background: #c46178; } +.nav-list .item > a { + padding: 0 10px; } +.nav-list .item.empty a { + color: #fa8052; } +.nav-list .item.error a { + color: #c46178; } +.nav-list .disable { + text-align: center; + background: #fcfcfc; + color: #969696; } +.nav-list .nav-form { + padding: 3px; + text-align: center; } +.nav-list a:hover { + text-decoration: none; } + +.nav-head { + margin: 0; + text-align: left; + background: #22303d; + color: #fcfcfc; } + .nav-head a { + color: #fcfcfc; } + .nav-head .item { + padding: 5px 10px; + font-size: 0.9rem; + line-height: 1.5rem; } + +.horizontal-list { + margin: 0; + padding: 0; } + .horizontal-list .item { + vertical-align: middle; } + +.dropdown-menu { + padding: 5px 0; + font-size: 0.8rem; + text-align: right; + border: none; + background-color: #00488b; } + .dropdown-menu .dropdown-header { + cursor: default; } + .dropdown-menu > .item { + padding: 0; + margin-right: 10px; } + .dropdown-menu > .item > a { + min-width: initial; + white-space: nowrap; } + .dropdown-menu > .item:hover { + background: #0062be; + color: #fcfcfc; } + .dropdown-menu > .item:hover > a { + text-decoration: none; + color: #fcfcfc; } + .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; } + +.dropdown-header { + padding: 0 5px 5px; + font-weight: bold; + text-align: right; + color: #fcfcfc; } + +.separator { + margin: 5px 0; + border-bottom: 1px solid #e3e3e3; + cursor: default; } + +.alert { + margin: 5px auto; + padding: 10px 15px; + background: #fcfcfc; + color: #969696; + font-size: 0.9em; + border: none; + text-shadow: 0 0 1px #fcfcfc; } + .alert > a { + color: inherit; + text-decoration: underline; } + +.alert-head { + font-size: 1.15em; } + +.alert-warn, +.alert-success, +.alert-error { + border: none; } + +.alert-warn { + background: #fcfcfc; + color: #fa8052; } + +.alert-success { + background: #fcfcfc; + color: #5eaabf; } + +.alert-error { + background: #fcfcfc; + color: #b0425b; } + +.pagination { + background: #e3e3e3; + color: #181621; + font-size: 0.8em; + text-align: center; } + .pagination .item.pager-current { + background: #22303d; + color: #e3e3e3; + font-size: 1.5em; + font-weight: bold; } + .pagination .item a { + display: block; + color: #181621; + font-style: italic; + line-height: 3em; + text-decoration: none; } + .pagination .item a:hover { + background: #22303d; + color: #e3e3e3; } + .pagination .loading, + .pagination a:hover.loading { + background: url(loader.gif) center center no-repeat #22303d; + font-size: 0; } + +.content { + padding: 20px 10px; } + .content .pagination { + margin: 0; + padding: 0; } + .content hr { + margin: 30px 10px; + background: #e3e3e3; + height: 1px; + border: 0; + box-shadow: 0 2px 5px #e3e3e3; } + .content pre { + 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; } + .content code { + padding: 2px 5px; + background: #fcfcfc; + color: #b0425b; + border: 1px solid #fcfcfc; } + .content blockquote { + margin: 0; + padding: 5px 20px; + background: #fcfcfc; + display: block; + color: #969696; + border-top: 1px solid #e3e3e3; + border-bottom: 1px solid #e3e3e3; } + .content blockquote p { + margin: 0; } + .content > h1.title > a { + color: #181621; } + +.box { + border: 1px solid #e3e3e3; } + .box .box-title { + margin: 0; + padding: 5px 10px; + background: #e3e3e3; + color: #969696; + border-bottom: 1px solid #e3e3e3; } + .box .box-content { + max-height: 260px; } + .box .box-content .item { + padding: 0 10px; + font-size: 0.9rem; + line-height: 2.5em; } + .box .box-content .item .configure { + visibility: hidden; } + .box .box-content .item .configure .icon { + vertical-align: middle; + background-color: #e3e3e3; } + .box .box-content .item:hover .configure { + visibility: visible; } + .box.category .box-title .title { + font-weight: normal; + text-decoration: none; + text-align: right; } + .box.category:not([data-unread="0"]) .box-title { + background: #0062be; } + .box.category:not([data-unread="0"]) .box-title:active { + background: #00488b; } + .box.category:not([data-unread="0"]) .box-title .title { + font-weight: bold; + color: #fcfcfc; } + .box.category .title:not([data-unread="0"])::after { + background: none; + 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; } + +.tree { + margin: 10px 0; } + +.tree-folder-title { + padding: 0 10px; + background: #22303d; + height: 35px; + font-size: 1rem; + position: relative; + line-height: 2.3rem; } + .tree-folder-title .title { + background: inherit; + color: #fcfcfc; } + .tree-folder-title .title:hover { + text-decoration: none; } + +.tree-folder-items { + background: #22303d; } + .tree-folder-items > .item { + padding: 0 10px; + line-height: 2.5rem; + font-size: 0.8rem; } + .tree-folder-items > .item.active { + background: #00488b; } + .tree-folder-items > .item > a { + text-decoration: none; + color: #fcfcfc; } + +@supports (scrollbar-width: thin) { + #sidebar { + scrollbar-color: rgba(255, 255, 255, 0.05) rgba(0, 0, 0, 0); } + + #sidebar:hover { + scrollbar-color: rgba(255, 255, 255, 0.3) rgba(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; } + .header > .item.title { + position: absolute; } + .header > .item.title h1 { + margin: 0; + display: block; } + .header > .item.title h1 a { + text-decoration: none; + color: #fcfcfc; } + .header > .item.title .logo { + display: inline-block; + height: 26px; + vertical-align: top; + position: relative; + top: 5px; } + .header > .item.search input { + width: 230px; } +.header .item.search input:focus { + width: 350px; } +.header .item.search { + display: none; } +.header .item.configure { + position: fixed; + left: 0px; + z-index: 1000; + width: 35px; } +.header h1 { + text-align: center; + font-size: 1.5em; } + +.aside { + padding: 35px 0; + background: #22303d; } + .aside.aside_feed .tree { + margin: 0 0 50px; } + .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; } + +.aside_feed .tree-folder-title > .title:not([data-unread="0"])::after { + margin: 6px 0; + padding: 0 10px; + background: inherit; + font-size: 0.9rem; + position: absolute; + left: 0; + line-height: 1.5rem; } +.aside_feed .tree-folder-items .dropdown-menu::after { + right: 2px; } + +.post { + padding: 10px 50px; + font-size: 0.9em; } + .post input { + background: #e3e3e3; } + .post input.long { + height: 33px; + margin-top: 0px; } + .post form { + margin: 10px 0; } + .post.content { + max-width: 550px; } + +.prompt { + text-align: center; } + .prompt label { + text-align: right; } + .prompt form { + margin: 10px auto 20px auto; + width: 200px; } + .prompt input { + margin: 5px auto; + width: 100%; } + .prompt p { + margin: 20px 0; } + +#new-article { + background: #0062be; + font-size: 1em; + text-align: center; + position: fixed; + bottom: 48px; + z-index: 900; + right: 0; + line-height: 1.5em; } + #new-article:hover { + background: #00488b; } + #new-article > a { + line-height: 1.5em; + font-weight: bold; + color: #fcfcfc; } + #new-article > a:hover { + text-decoration: none; } + +.day { + padding: 0 10px; + font-weight: bold; + line-height: 3em; + text-align: center; } + .day .name { + display: none; } + +.nav a { + color: #fcfcfc; } + +.nav_menu { + width: 100%; + font-size: 0; + background-color: #0062be; + position: fixed; + z-index: 900; } + .nav_menu .item.search { + display: inline-block; + position: fixed; + left: 40px; } + +.flux { + padding-left: 10px; + background: #fcfcfc; } + .flux::after { + margin: 0 auto; + width: 90%; + border-top: 1px solid #e3e3e3; } + .flux:hover, + .flux .current { + background: #fff; } + .flux:hover:not(.current):hover .item.title, + .flux .current:not(.current):hover .item.title { + background: #fff; } + .flux.favorite:not(.current) { + background: #fff6da; } + .flux.favorite:not(.current):hover .item.title { + background: #fff6da; } + .flux.not_read:not(.current) { + background: #fff3ed; } + .flux.not_read:not(.current):hover .item.title { + background: #fff3ed; } + .flux .date { + color: #969696; + font-size: 0.7rem; } + .flux .bottom { + font-size: 0.8rem; + text-align: center; } + .flux .website .favicon { + padding: 5px; } + .flux label { + color: #fcfcfc; + cursor: pointer; } + +.flux_header { + font-size: 0.8rem; + cursor: pointer; } + .flux_header .title { + font-size: 0.9rem; } + +.notification { + padding: 10px 0; + background: #e3e3e3; + height: auto; + color: #969696; + font-size: 1em; + border: none; + text-align: center; + font-weight: bold; + z-index: 10; + vertical-align: middle; + position: fixed; + bottom: 48px; + right: 0; + top: auto; } + .notification.good, + .notification .bad { + color: #fcfcfc; } + .notification.good { + background: #5eaabf; } + .notification.good a.close:hover { + background: #5eaabf; } + .notification.bad { + background: #c46178; } + .notification.bad a.close:hover { + background: #c46178; } + .notification#actualizeProgress { + line-height: 2em; } + .notification a.close { + display: none; } + +#bigMarkAsRead { + text-align: center; + text-decoration: none; + background: #e3e3e3; } + #bigMarkAsRead:hover { + background: #22303d; + color: #fcfcfc; } + +#nav_entries { + margin: 0; + text-align: center; + line-height: 3em; + table-layout: fixed; + background: #22303d; } + +.stat { + 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; } + +.formLogin #global { + height: 0; } +.formLogin .header { + background: #22303d; + height: 55px; } + .formLogin .header > .item.configure { + width: 200px; + position: unset; } + .formLogin .header > .item.title h1 { + display: unset; } +.formLogin a.signin { + color: #fcfcfc; + padding-right: 5px; } +.formLogin input { + border-top: 1px #e3e3e3; + border-left: 1px #e3e3e3; + border-bottom: 1px #e3e3e3; + border-right: 5px solid; } + +.loglist { + overflow: hidden; + border: 1px solid #969696; } + +.log { + padding: 5px 2%; + background: #fcfcfc; + font-size: 0.8rem; + overflow: auto; } + .log > .date { + margin: 0 0 0 10px; + padding: 5px 10px; } + .log.error > .date { + background: #c46178; + color: #fcfcfc; } + .log.warning > .date { + background: #fa8052; + color: #fcfcfc; } + .log.notice > .date { + background: #e3e3e3; + color: #fcfcfc; } + .log.debug > .date { + background: #181621; + color: #fcfcfc; } + +@media (max-width: 840px) { + .formLogin .header { + display: none; } + + .dropdown-header, .dropdown-menu > .item { + padding: 12px; } + + #new-article { + width: 100%; + position: sticky; + top: 0; } + + .header { + display: table; } + .header .item.title .logo { + display: none; } + + .header > .item.title h1 a { + display: block; + position: absolute; + top: -35px; + right: 10px; + font-size: 0.6em; } + + .header .item.configure, + button.read_all.btn { + display: none; } + + .flux .item.manage, + .flux_header .item.website { + width: 35px; + text-align: center; } + + .aside { + width: 0; + transition: width 200ms linear; } + .aside .toggle_aside { + background: #22303d; + display: block; + height: 50px; + line-height: 50px; + text-align: left; + padding-left: 10px; } + .aside.aside_feed { + padding: 0; } + .aside:target { + width: 78%; + z-index: 1000; } + + .nav_menu { + position: initial; + height: 71px; } + .nav_menu .btn { + margin: 5px 10px; } + .nav_menu .stick { + margin: 0 10px; } + .nav_menu .stick .btn { + margin: 5px 0; } + .nav_menu .search { + position: absolute !important; + top: 35px; + right: 55px; } + .nav_menu .search input { + width: 85%; } + + .pagination { + margin: 0 0 3.5em; } + + #panel .close { + background: #22303d; + display: block; + height: 50px; + line-height: 50px; + text-align: left; + padding-left: 10px; } + + .day .name { + font-size: 1.1rem; } + + .notification { + width: 100%; } + .notification a.close { + background: transparent; + display: block; + right: 0; } + .notification a.close:hover { + opacity: 0.5; } + .notification a.close .icon { + display: none; } + + #nav_entries { + width: 100% !important; } + + div#stream { + margin-top: 0px; } + + a.btn.toggle_aside { + 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 { + left: 46px; + top: 30px; + z-index: 1100; } + + a#actualize, + a#toggle-order { + left: 0px; } + + a#actualize { + top: 29px; } + + a#toggle-order, + div#nav_menu_actions, + div#nav_menu_views { + top: 65px; } + + div#nav_menu_actions { + right: 0px; } + + div#nav_menu_views { + left: 50px; } } +@media (max-width: 410px) { + .nav_menu .stick { + margin: 0; } } +@media (max-width: 374px) { + #nav_menu_views { + display: none; } } +button.as-link { + color: #fcfcfc; + outline: none; } + +.dropdown-target:target ~ .btn.dropdown-toggle { + background: #00488b; } + +.tree-folder.active .tree-folder-title { + background: #00488b; + font-weight: bold; } + +.feed.item.empty { + color: #fa8052; } + .feed.item.empty.active { + background: #fa8052; + color: #fcfcfc; } + .feed.item.empty.active > a { + color: #fcfcfc; } + .feed.item.empty > a { + color: #fa8052; } +.feed.item.error { + color: #c46178; } + .feed.item.error.active { + background: #c46178; + color: #fcfcfc; } + .feed.item.error.active > a { + color: #fcfcfc; } + .feed.item.error > a { + color: #c46178; } + +#dropdown-query ~ .dropdown-menu .dropdown-header .icon { + vertical-align: middle; + float: left; } + +#stream.reader .flux { + padding: 0 0 50px; + background: #fcfcfc; + color: #22303d; + border: none; } + #stream.reader .flux .author { + margin: 0 0 10px; + color: #969696; + font-size: 90%; } + +#nav_menu_actions ul.dropdown-menu, #nav_menu_read_all ul.dropdown-menu { + right: 0px; } + +#slider label { + min-height: initial; } +#slider .form-group:hover { + background: inital; } diff --git a/p/themes/base-theme/base.rtl.css b/p/themes/base-theme/base.rtl.css new file mode 100644 index 000000000..00c56641b --- /dev/null +++ b/p/themes/base-theme/base.rtl.css @@ -0,0 +1,944 @@ +/* stylelint-disable block-no-empty */ + +@charset "UTF-8"; + +/*=== GENERAL */ +/*============*/ +html, body { + height: 100%; + font-family: "OpenSans", "Cantarell", "Helvetica", "Arial", "PingFang SC", "Microsoft YaHei", sans-serif; +} + +/*=== Links */ +a, button.as-link { + outline: none; +} + +/*=== Forms */ +legend { + margin: 20px 0 5px; + padding: 5px 0; + font-size: 1.4em; +} + +label { + min-height: 25px; + padding: 5px 0; + cursor: pointer; +} + +textarea { + width: 360px; + height: 100px; +} + +input, select, textarea { + min-height: 25px; + padding: 5px; + line-height: 25px; + vertical-align: middle; +} + +option { + padding: 0 .5em; +} + +input:focus, select:focus, textarea:focus { +} + +input:invalid, select:invalid { +} + +input:disabled, select:disabled { +} + +input.extend { + transition: width 200ms linear; +} + +/*=== Tables */ +table { + border-collapse: collapse; +} + +tr, th, td { + padding: 0.5em; +} + +th { +} + +form td, +form th { + font-weight: normal; + text-align: center; +} + +/*=== COMPONENTS */ +/*===============*/ +/*=== Forms */ +.form-group.form-actions { + padding: 5px 0; +} + +.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: 5px 0; +} + +.form-group table { + margin: 10px 220px 0 0; +} + +/*=== Buttons */ +.stick { + vertical-align: middle; + font-size: 0; +} + +.stick input, +.stick .btn { +} + +.stick .btn:first-child, +.stick input:first-child { +} + +.stick .btn-important:first-child { +} + +.stick .btn:last-child, +.stick input:last-child { +} + +.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 { +} + +.stick input + .btn { +} + +.stick .btn + .dropdown > .btn { +} + +.btn { + margin: 0; + padding: 5px 10px; + display: inline-block; + min-height: 37px; + min-width: 15px; + font-size: 0.9rem; + vertical-align: middle; + cursor: pointer; + overflow: hidden; +} + +a.btn { + min-height: 25px; + line-height: 25px; +} + +.btn:hover { + text-decoration: none; +} + +.btn.active, +.btn:active, +.dropdown-target:target ~ .btn.dropdown-toggle { +} + +.btn-important { + font-weight: normal; +} + +.btn-important:hover { +} + +.btn-important:active { +} + +.btn-attention { +} + +.btn-attention:hover { +} + +.btn-attention:active { +} + +/*=== Navigation */ +.nav-list .nav-header, +.nav-list .item { + height: 2.5em; + line-height: 2.5em; + font-size: 0.9rem; +} + +.nav-list .item:hover { +} + +.nav-list .item:hover a { +} + +.nav-list .item.active { +} + +.nav-list .item.active a { +} + +.nav-list .disable { + text-align: center; +} + +.nav-list .item > a { + padding: 0 10px; +} + +.nav-list a:hover { + text-decoration: none; +} + +.nav-list .item.empty a { +} + +.nav-list .item.active.empty a { +} + +.nav-list .item.error a { +} + +.nav-list .item.active.error a { +} + +.nav-list .nav-header { + padding: 0 10px; + font-weight: bold; +} + +.nav-list .nav-form { + padding: 3px; + text-align: center; +} + +.nav-head { + margin: 0; + text-align: left; +} + +.nav-head .item { + padding: 5px 10px; + font-size: 0.9rem; + line-height: 1.5rem; +} + +/*=== Horizontal-list */ +.horizontal-list { + margin: 0; + padding: 0; +} + +.horizontal-list .item { + vertical-align: middle; +} + +/*=== Dropdown */ +.dropdown-menu { + margin: 5px 0 0; + padding: 5px 0; + font-size: 0.8rem; + text-align: right; +} + +.dropdown-menu::after { + content: ""; + position: absolute; + top: -6px; + left: 13px; + width: 10px; + height: 10px; + z-index: -10; + transform: rotate(-45deg); +} + +.dropdown-header { + padding: 0 5px 5px; + font-weight: bold; + text-align: right; +} + +.dropdown-menu > .item { +} + +.dropdown-menu > .item > a, +.dropdown-menu > .item > span, +.dropdown-menu > .item > .as-link { + padding: 0 22px; + line-height: 2.5em; +} + +.dropdown-menu > .item:hover { +} + +.dropdown-menu > .item[aria-checked="true"] > a::before { + font-weight: bold; + margin: 0 -14px 0 0; +} + +.dropdown-menu > .item:hover > a { + text-decoration: none; +} + +.dropdown-menu .input select, +.dropdown-menu .input input { + margin: 0 auto 5px; + padding: 2px 5px; +} + +.separator { + margin: 5px 0; +} + +/*=== Alerts */ +.alert { + margin: 15px auto; + padding: 10px 15px; + font-size: 0.9em; +} + +.alert-head { + font-size: 1.15em; +} + +.alert > a { + text-decoration: underline; +} + +.alert-warn { +} + +.alert-success { +} + +.alert-error { +} + +/*=== Pagination */ +.pagination { + text-align: center; + font-size: 0.8em; +} + +.content .pagination { + margin: 0; + padding: 0; +} + +.pagination .item.pager-current { + font-weight: bold; + font-size: 1.5em; +} + +.pagination .item a { + display: block; + font-style: italic; + line-height: 3em; + text-decoration: none; +} + +.pagination .item a:hover { +} + +.pagination:first-child .item { +} + +.pagination:last-child .item { +} + +.pagination .loading, +.pagination a:hover.loading { + font-size: 0; +} + +/*=== Boxes */ +.box { +} + +.box .box-title { + margin: 0; + padding: 5px 10px; +} + +.box .box-content { + max-height: 260px; +} + +.box .box-content .item { + padding: 0 10px; + font-size: 0.9rem; + line-height: 2.5em; +} + +.box .box-content .item .configure { + visibility: hidden; +} + +.box .box-content .item:hover .configure { + visibility: visible; +} + +/*=== Tree */ +.tree { + margin: 10px 0; +} + +.tree-folder-title { + position: relative; + padding: 0 10px; + line-height: 2.5rem; + font-size: 1rem; +} + +.tree-folder-title .title { + background: inherit; +} + +.tree-folder-title .title:hover { + text-decoration: none; +} + +.tree-folder.active .tree-folder-title { + font-weight: bold; +} + +.tree-folder.active .tree-folder-title .title { +} + +.tree-folder-items { +} + +.tree-folder-items > .item { + padding: 0 10px; + line-height: 2.5rem; + font-size: 0.8rem; +} + +.tree-folder-items > .item.active { +} + +.tree-folder-items > .item > a { + text-decoration: none; +} + +.tree-folder-items > .item.active > a { +} + +/*=== STRUCTURE */ +/*===============*/ +/*=== Header */ +.header { + height: 85px; +} + +.header > .item { + padding: 10px; + vertical-align: middle; + text-align: center; +} + +.header > .item.title { + width: 230px; +} + +.header > .item.title h1 { + margin: 0.5em 0; +} + +.header > .item.title h1 a { + text-decoration: none; +} + +.header > .item.search input { + width: 230px; +} + +.header .item.search input:focus { + width: 350px; +} + +/*=== Body */ +#global { + height: calc(100% - 85px); +} + +.aside { +} + +.aside.aside_feed { + padding: 10px 0; + text-align: center; +} + +.aside.aside_feed .tree { + margin: 10px 0 50px; +} + +/*=== Aside main page (categories) */ +.aside_feed .tree-folder-title > .title:not([data-unread="0"])::after { + position: absolute; + left: 0; + margin: 10px 0; + padding: 0 10px; + font-size: 0.9rem; + line-height: 1.5rem; +} + +/*=== Aside main page (feeds) */ +.feed.item.empty.active { +} + +.feed.item.error.active { +} + +.feed.item.empty, +.feed.item.empty > a { +} + +.feed.item.error, +.feed.item.error > a { +} + +.feed.item.empty.active, +.feed.item.error.active, +.feed.item.empty.active > a, +.feed.item.error.active > a { +} + +.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:hover .dropdown-toggle > .icon, +.aside_feed .tree-folder-items .item.active .dropdown-toggle > .icon { + 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 { + text-align: center; +} + +.prompt label { + text-align: right; +} + +.prompt form { + margin: 10px auto 20px auto; + width: 180px; +} + +.prompt input { + margin: 5px auto; + width: 100%; +} + +.prompt p { + margin: 20px 0; +} + +/*=== New article notification */ +#new-article { + text-align: center; + font-size: 0.9em; +} + +#new-article:hover { +} + +#new-article > a { + line-height: 3em; + font-weight: bold; +} + +#new-article > a:hover { + text-decoration: none; +} + +/*=== Day indication */ +.day { + padding: 0 10px; + font-weight: bold; + line-height: 3em; +} + +#new-article + .day { +} + +.day .name { + padding: 0 0 0 10px; + font-size: 1.8em; + opacity: 0.3; + font-style: italic; + text-align: left; +} + +/*=== Index menu */ +.nav_menu { + text-align: center; + padding: 5px 0; +} + +/*=== Feed articles */ +.flux { +} + +.flux:hover { +} + +.flux.current { +} + +.flux.not_read { +} + +.flux.not_read:not(.current):hover .item.title { +} + +.flux.favorite { +} + +.flux.favorite:not(.current):hover .item.title { +} + +.flux_header { + font-size: 0.8rem; + cursor: pointer; +} + +.flux_header .title { + font-size: 0.9rem; +} + +.flux .website .favicon { + padding: 5px; +} + +.flux .date { + font-size: 0.7rem; +} + +.flux:not(.current):hover .item.title { +} + +.flux .bottom { + font-size: 0.8rem; + text-align: center; +} + +/*=== Content of feed articles */ +.content { + padding: 20px 10px; +} + +.content > h1.title > a { +} + +.content hr { + margin: 30px 10px; + height: 1px; +} + +.content pre { + margin: 10px auto; + padding: 10px 20px; + overflow: auto; + font-size: 0.9rem; +} + +.content code { + padding: 2px 5px; +} + +.content pre code { +} + +.content blockquote { + margin: 0; + padding: 5px 20px; + display: block; +} + +.content blockquote p { + margin: 0; +} + +/*=== Notification and actualize notification */ +.notification { + padding: 0 5px 0 0; + text-align: center; + font-weight: bold; + font-size: 0.9em; + line-height: 3em; + z-index: 10; + vertical-align: middle; +} + +.notification.good { +} + +.notification.bad { +} + +.notification a.close { + padding: 0 15px; + line-height: 3em; +} + +.notification.good a.close:hover { +} + +.notification.bad a.close:hover { +} + +.notification#actualizeProgress { + line-height: 2em; +} + +/*=== "Load more" part */ +#bigMarkAsRead { + text-align: center; + text-decoration: none; +} + +#bigMarkAsRead:hover { +} + +#bigMarkAsRead:hover .bigTick { +} + +/*=== Navigation menu (for articles) */ +#nav_entries { + margin: 0; + text-align: center; + line-height: 3em; + table-layout: fixed; +} + +/*=== READER VIEW */ +/*================*/ +#stream.reader .flux { + padding: 0 0 50px; +} + +#stream.reader .flux .author { + margin: 0 0 10px; + font-size: 90%; +} + +/*=== GLOBAL VIEW */ +/*================*/ +.box.category .box-title .title { + font-weight: normal; + text-decoration: none; + text-align: right; +} + +.box.category:not([data-unread="0"]) .box-title { +} + +.box.category:not([data-unread="0"]) .box-title:active { +} + +.box.category:not([data-unread="0"]) .box-title .title { + font-weight: bold; +} + +.box.category .title:not([data-unread="0"])::after { + background: none; + border: 0; + position: absolute; + top: 5px; left: 10px; + font-weight: bold; + box-shadow: none; + 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 { +} + +.stat > table td, +.stat > table th { + text-align: center; +} + +.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: 250px; +} + +/*=== LOGS */ +/*=========*/ +.loglist { + overflow: hidden; +} + +.log { + padding: 5px 10px; + font-size: 0.8rem; +} + +.log+.log { +} + +.log .date { + display: block; + font-weight: bold; +} + +.log.error { +} + +.log.warning { +} + +.log.notice { +} + +.log.debug { +} + +/*=== MOBILE */ +/*===========*/ + +@media (max-width: 840px) { + .aside { + transition: width 200ms linear; + } + + .aside .toggle_aside, + #panel .close { + display: block; + width: 100%; + height: 50px; + line-height: 50px; + text-align: center; + } + + .aside.aside_feed { + padding: 0; + } + + .nav_menu .btn { + margin: 5px 10px; + } + + .nav_menu .stick { + margin: 0 10px; + } + + .nav_menu .stick .btn { + margin: 5px 0; + } + + .nav_menu .search { + display: inline-block; + max-width: 97%; + } + + .nav_menu .search input { + max-width: 97%; + width: 90px; + } + + .nav_menu .search input:focus { + width: 400px; + } + + .day .name { + font-size: 1.1rem; + } + + .pagination { + margin: 0 0 3.5em; + } + + .notification a.close { + display: block; + right: 0; + } + + .notification a.close:hover { + opacity: 0.5; + } + + .notification a.close .icon { + display: none; + } +} diff --git a/p/themes/base-theme/template.rtl.css b/p/themes/base-theme/template.rtl.css new file mode 100644 index 000000000..a0a7b7d5a --- /dev/null +++ b/p/themes/base-theme/template.rtl.css @@ -0,0 +1,1312 @@ +@charset "UTF-8"; + +/*=== GENERAL */ +/*============*/ + +@font-face { + font-family: 'OpenSans'; + font-style: normal; + font-weight: 400; + src: local('Open Sans'), local('OpenSans'), + url('../fonts/OpenSans.woff2') format('woff2'), + url('../fonts/OpenSans.woff') format('woff'); +} + +html, body { + margin: 0; + padding: 0; + font-family: "OpenSans", "Cantarell", "Helvetica", "Arial", sans-serif; + font-size: 100%; +} + +/*=== Links */ +a { + text-decoration: none; +} + +a:hover { + text-decoration: underline; +} + +/*=== Lists */ +ul, ol, dd { + margin: 0; + padding: 0; +} + +/*=== Titles */ +h1 { + margin: 0.6em 0 0.3em; + font-size: 1.5em; + line-height: 1.6em; +} + +h2 { + margin: 0.5em 0 0.25em; + font-size: 1.3em; + line-height: 2em; +} + +h3 { + margin: 0.5em 0 0.25em; + font-size: 1.1em; + line-height: 2em; +} + +/*=== Paragraphs */ +p { + margin: 1em 0 0.5em; + font-size: 1em; +} + +sup { + line-height: 25px; + position: relative; + top: -0.8em; + vertical-align: baseline; +} + +/*=== Images */ +img { + max-width: 100%; + height: auto; +} + +img.favicon { + width: 16px; + height: 16px; + vertical-align: middle; +} + +.feed.mute::before { + content: '🔇'; +} + +/*=== Videos */ +iframe, embed, object, video { + max-width: 100%; +} + +/*=== Forms */ +legend { + display: block; + width: 100%; + clear: both; +} + +label { + display: block; +} + +input { + width: 180px; +} + +input[type=number] { + width: 6em; +} + +textarea, +input[type="file"], +input.long, +input.extend:focus { + 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; +} + +.dropdown-menu label > input[type="text"] { + width: 150px; + width: calc(99% - 5em); +} + +.dropdown-menu input[type="checkbox"] { + margin-right: 1em; + margin-left: .5em; +} + +button.as-link, +button.as-link:hover, +button.as-link:active { + background: transparent; + color: inherit; + font-size: 1.1em; + border: none; + cursor: pointer; + text-align: right; +} + +button.as-link[disabled] { + color: #ddd !important; +} + +/*=== Tables */ +table { + max-width: 100%; +} + +th.numeric, +td.numeric { + text-align: center; +} + +/*=== COMPONENTS */ +/*===============*/ +[aria-hidden="true"] { + display: none !important; +} + +/*=== Forms */ +.form-group::after { + content: ""; + display: block; + clear: both; +} + +.form-group.form-actions { + min-width: 250px; +} + +.form-group .group-name { + display: block; + float: right; + width: 200px; +} + +.form-group .group-controls { + min-width: 250px; + margin: 0 220px 0 0; +} + +.form-group .group-controls .control { + display: block; +} + +@supports (position: sticky) { + #mark-read-aside { + position: sticky; + top: 0; + } +} + +/*=== Buttons */ +.stick { + display: inline-block; + white-space: nowrap; +} + +.btn, +a.btn { + display: inline-block; + cursor: pointer; + overflow: hidden; +} + +.btn-important { + font-weight: bold; +} + +/*=== Navigation */ +.nav-list .nav-header, +.nav-list .item { + display: block; +} + +.nav-list .item, +.nav-list .item > a { + display: block; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; +} + +.nav-head { + display: block; +} + +.nav-head .item { + display: inline-block; +} + +/*=== Horizontal-list */ +.horizontal-list { + display: table; + table-layout: fixed; + width: 100%; +} + +.horizontal-list .item { + display: table-cell; +} + +/*=== Dropdown */ +.dropdown { + position: relative; + display: inline-block; + vertical-align: middle; +} + +.dropdown-target { + display: none; +} + +.dropdown-menu { + margin: 0; + background: #fff; + display: none; + border: 1px solid #aaa; + min-width: 200px; + position: absolute; + left: 0; +} + +.dropdown-menu-scrollable { + max-height: 75vh; + overflow-x: hidden; + overflow-y: auto; +} + +.dropdown-header { + display: block; +} + +.dropdown-menu > .item { + display: block; +} + +.dropdown-menu > .item > a, +.dropdown-menu > .item > .as-link, +.dropdown-menu > .item > span { + display: block; + min-width: 200px; + white-space: nowrap; +} + +.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: 1000; +} + +.dropdown-close { + display: inline; +} + +.dropdown-close a { + display: block; + font-size: 0; + position: fixed; + top: 0; bottom: 0; + right: 0; left: 0; + z-index: -11; + cursor: default; +} + +.dropdown div.dropdown-close { + display: none; +} + +.dropdown-target:target ~ div.dropdown-close { + display: block; + z-index: 999; + position: relative; +} + +.dropdown-menu-scrollable .dropdown-close { + display: none; +} + +.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 { + margin: 0; + padding: 0; + display: table; + width: 100%; + table-layout: fixed; +} + +.pagination .item { + display: table-cell; +} + +.pagination .pager-first, +.pagination .pager-previous, +.pagination .pager-next, +.pagination .pager-last { + width: 100px; +} + +/*=== Boxes */ +.box { + margin: 20px 10px; + display: inline-block; + max-width: 95%; + width: 20rem; + border: 1px solid #ccc; + vertical-align: top; +} + +.box .box-title { + position: relative; + font-size: 1.2rem; + font-weight: bold; +} + +.box .box-title form { + margin: 0; +} + +.box .box-content { + display: block; + overflow: auto; +} + +.box .box-content .item { + display: block; +} + +.box .box-content .item.disabled { + text-align: center; + font-style: italic; +} + +.box .box-content-centered { + padding: 30px 5px; + text-align: center; +} + +.box .box-content-centered .btn { + margin: 20px 0 0; +} + +/*=== Draggable */ +.drag-hover { + margin: 0 0 5px; + border-bottom: 2px solid #ccc; +} + +[draggable=true] { + cursor: grab; +} + +/*=== 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); + display: unset; + border-radius: 5px; + } + + #sidebar:hover::-webkit-scrollbar-thumb { + background: rgba(0, 0, 0, 0.3); + } +} + +/*=== Tree */ +.tree { + margin: 0; + max-height: 99vh; + list-style: none; + text-align: right; + overflow-x: hidden; +} + +.tree-folder-items { + padding: 0; + max-height: 200em; + list-style: none; + transition: max-height .3s linear; +} + +.tree-folder-title { + display: block; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; +} + +.tree-folder-title .title { + display: inline-block; + width: 100%; + vertical-align: middle; +} + +.tree-folder-items > .item { + display: block; + white-space: nowrap; +} + +.tree-folder-items > .item > a { + display: inline-block; + vertical-align: middle; + width: calc(100% - 32px); + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; +} + +.tree-bottom { + visibility: hidden; + margin-bottom: 18em; +} + +/*=== 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; + width: 32px; + height: 32px; + vertical-align: middle; +} + +.header > .item.configure { + width: 100px; +} + +/*=== Body */ +#global { + display: table; + width: 100%; + height: 100%; + table-layout: fixed; +} + +.aside { + display: table-cell; + width: 300px; + vertical-align: top; +} + +/*=== Aside main page */ +.aside_feed .category .title { + width: calc(100% - 35px); +} + +.aside_feed .tree-folder-title .icon { + padding: 5px; +} + +.aside_feed .tree-folder-items .item.feed { + padding: 0px 15px; +} + +.aside_feed .tree-folder-items:not(.active) { + margin: 0; + padding: 0; + max-height: 0; + border: none; + overflow: hidden; +} + +.aside_feed .tree-folder-items .dropdown { + vertical-align: top; +} + +.aside_feed .tree-folder-items .dropdown-menu { + right: 0; +} + +.aside_feed .tree-folder-items .item .dropdown-toggle > .icon { + visibility: hidden; + cursor: pointer; +} + +.aside_feed .tree-folder-items .item .dropdown-target:target ~ .dropdown-toggle > .icon, +.aside_feed .tree-folder-items .item:hover .dropdown-toggle > .icon, +.aside_feed .tree-folder-items .item.active .dropdown-toggle > .icon { + visibility: visible; +} + +/*=== New article notification */ +#new-article { + display: none; +} + +#new-article > a { + display: block; +} + +/*=== Day indication */ +.day .name { + position: absolute; + left: 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 { + background: #fff; + max-width: calc(100% - 320px); + position: absolute; +} + +.flux .item.title a { + color: #000; + text-decoration: none; +} + +.flux .item.title .author { + padding-right: 1rem; + color: #555; + font-size: .9rem; + font-weight: normal; +} + +.flux .item.date { + width: 155px; + text-align: left; + overflow: hidden; +} + +.flux .item > a { + display: block; + text-decoration: none; + white-space: nowrap; + text-overflow: ellipsis; + overflow: hidden; +} + +.flux .item.share > a, +.item.query > a { + display: list-item; + list-style-position: inside; + list-style-type: decimal; +} + +/*=== Feed article content */ +.hide_posts > .flux:not(.active) > .flux_content { + display: none; +} + +.content { + min-height: 20em; + margin: auto; + line-height: 1.7em; + word-wrap: break-word; +} + +.content.large { + max-width: 1000px; +} + +.content.medium { + max-width: 800px; +} + +.content.thin { + max-width: 550px; +} + +.content ul, +.content ol, +.content dd { + margin: 0 15px 0 0; + padding: 0 15px 5px 0; +} + +.content pre { + overflow: auto; +} + +br { + line-height: 1em; +} + +/*=== Notification and actualize notification */ +.notification { + position: absolute; + top: 1em; + right: 25%; left: 25%; + z-index: 10; + background: #fff; + border: 1px solid #aaa; + opacity: 1; + visibility: visible; + transition: visibility 0s, opacity .3s linear; +} + +.notification.closed { + opacity: 0; + visibility: hidden; +} + +.notification a.close { + position: absolute; + top: 0; bottom: 0; + left: 0; + display: inline-block; +} + +#actualizeProgress { + position: fixed; +} + +#actualizeProgress progress { + max-width: 100%; + vertical-align: middle; +} + +#actualizeProgress .progress { + vertical-align: middle; +} + +/*=== Popup */ +#popup { + display: none; + position: fixed; + z-index: 1; + right: 0; + top: 0; + width: 100%; + height: 100%; + overflow: auto; + background-color: #eee; + background-color: rgba(0,0,0,0.4); +} + +#popup-content { + margin: 5rem auto; + display: table; + width: 80%; + height: 80%; + overflow: hidden; + background-color: #fafafa; + border-radius: .25rem; + box-shadow: 0 0 1px #737373, -1px 2px 3px #4a4a4f; +} + +.popup-row { + display: table-row; + width: 100%; +} + +#popup-close { + float: left; + width: 27px; + height: 27px; + padding-bottom: 5px; + color: #aaa; + font-size: 28px; + font-weight: bold; +} + +#popup-close:hover, +#popup-close:focus { + color: #000; + text-decoration: none; + cursor: pointer; +} + +#popup-txt { + display: none; + height: 100%; +} + +#popup-iframe-container { + display: none; + height: 100%; +} + +#popup-iframe-sub { + padding: 10px; + height: 100%; +} + +#popup-iframe { + width: 100%; + height: 100%; +} + +/*=== Navigation menu (for articles) */ +#nav_entries { + background: #fff; + display: table; + position: fixed; + bottom: 0; right: 0; + width: 300px; + 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 { + margin: 0 0 100% 0; + margin: 0 0 100vh 0; + padding: 1em 0 50px 0; + display: block; + width: 100%; + text-align: center; + font-size: 1.4em; +} + +.bigTick { + font-size: 4em; +} + +/*=== Statistiques */ +.stat { + margin: 15px 0; +} + +.stat.half { + padding: 0 2%; + display: inline-block; + width: 46%; +} + +.stat > table { + width: 100%; +} + +.statGraph { + height: 300px; +} + +/*=== LOGIN VIEW */ +/*================*/ +.formLogin .header > .item { + padding: 10px 30px; +} + +.formLogin .header > .item.title { + text-align: right; +} + +.formLogin .header > .item.configure { + text-align: left; +} + + +/*=== GLOBAL VIEW */ +/*================*/ +#stream.global { + text-align: center; +} + +#stream.global .box { + text-align: right; +} + +#global > #panel { + bottom: 99vh; + display: block; + transition: visibility .3s, bottom .3s; + visibility: hidden; +} + +#global > #panel.visible { + bottom: 1em; + visibility: visible; +} +/*=== Panel */ +#overlay { + position: fixed; + top: 0; bottom: 0; + right: 0; left: 0; + background: rgba(0, 0, 0, 0.9); + opacity: 0; + transition: visibility .3s, opacity .3s; + visibility: hidden; +} + +#overlay.visible { + opacity: 1; + visibility: visible; +} + +#panel { + background: #fff; + display: none; + position: fixed; + top: 1em; bottom: 1em; + right: 2em; left: 2em; + overflow: auto; +} + +#overlay .close { + position: fixed; + top: 0; bottom: 0; + right: 0; left: 0; + display: block; +} + +#overlay .close img { + display: none; +} + +/*=== Slider */ +#slider { + position: fixed; + top: 0; bottom: 0; + right: 100%; left: 0; + overflow: auto; + background: #fff; + border-right: 1px solid #aaa; + transition: right 200ms linear; +} + +#slider.active { + right: 40%; +} + +#close-slider { + position: fixed; + top: 0; bottom: 0; + right: 100%; left: 0; + cursor: pointer; +} + +#close-slider.active { + right: 0; +} + +/*=== SLIDESHOW */ +/*==============*/ +.slides { + padding: 0; + display: block; + max-width: 640px; + height: 320px; + border: 1px solid #aaa; + position: relative; + min-width: 260px; + margin-bottom: 30px; +} + +.slides input { + display: none; +} + +.slide-container { + display: block; +} + +.slide { + display: block; + width: 100%; + height: 100%; + top: 0; + opacity: 0; + position: absolute; + transform: scale(0); + transition: all .7s ease-in-out; +} + +.slide img { + width: 100%; + height: 100%; +} + +.nav label { + padding: 0; + display: none; + width: 10%; + height: 100%; + color: #fff; + font-family: "Varela Round", sans-serif; + font-size: 1000%; + position: absolute; + opacity: 0; + z-index: 9; + cursor: pointer; + transition: opacity .2s; + text-align: center; + line-height: 225%; + background-color: rgba(255, 255, 255, .3); + text-shadow: 0px 0px 15px rgb(119, 119, 119); +} + +.properties { + padding: 5px; + background: rgba(255, 255, 255, 0.7); + display: none; + color: #000; + border-top: 1px solid #aaa; + bottom: 0; + right: 0; left: 0; + position: absolute; + z-index: 10; +} + +.properties .page-number { + left: 5px; + top: 0; + position: absolute; +} + +.slide:hover + .nav label { + opacity: 0.5; +} + +.nav label:hover { + opacity: 1; +} + +.nav .next { + left: 0; +} + +input:checked + .slide-container .slide { + opacity: 1; + transform: scale(1); + transition: opacity 1s ease-in-out; +} + +input:checked + .slide-container .nav label { + display: block; +} + +input:checked + .slide-container .properties { + display: block; +} + +/*=== DIVERS */ +/*===========*/ +.category .title:not([data-unread="0"])::after { + content: attr(data-unread); +} + +.category .title.error::before { + content: "⚠"; + color: #bd362f; +} + +.feed .item-title:not([data-unread="0"])::before { + content: "(" attr(data-unread) ") "; +} + +.feed .item-title:not([data-unread="0"]) { + font-weight: bold; +} + +.state_unread .category:not(.active)[data-unread="0"], +.state_unread .feed:not(.active)[data-unread="0"] { + display: none; +} + +.nav-login, +.nav_menu .search, +.aside .toggle_aside, +.nav_menu .toggle_aside { + display: none; +} + +.enclosure [download] { + font-size: xx-large; + margin-right: .8em; +} + +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) { + .header, + .aside .btn-important, + .flux_header .item.website span, + .item.date, .day .date, + .dropdown-menu > .no-mobile, + .no-mobile { + display: none; + } + + .dropdown .dropdown-menu { + width: 100%; + border-radius: 0; + bottom: 0; + position: fixed; + } + + .dropdown-menu::after { + display: none; + } + + .aside .toggle_aside, + .nav-login { + display: block; + } + + .nav_menu .toggle_aside, + .nav_menu .search, + #panel .close img { + display: inline-block; + } + + .aside { + position: fixed; + top: 0; bottom: 0; + right: 0; + width: 0; + overflow: hidden; + z-index: 100; + } + + .aside:target { + width: 90%; + } + + .flux_header .item.website { + width: 40px; + } + + .flux:not(.current):hover .item.title { + position: relative; + width: auto; + white-space: nowrap; + } + + .notification { + top: 0; + right: 0; + left: 0; + } + + #nav_entries { + width: 100%; + } + + #panel { + top: 25px; bottom: 30px; + right: 0; left: 0; + } + + #panel .close { + top: 0; left: 0; + right: 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; + } +} + +/*=== PREVIEW */ +/*===========*/ +.preview_controls { + margin-right: auto; + margin-left: auto; + padding: 1rem; + max-width: 1000px; + text-align: center; + background-color: #eee; + border: 1px solid #e0e0e0; + border-radius: .25rem; +} + +.preview_controls label { + display: inline; +} + +.preview_controls label input[type="radio"] { + margin-top: -4px; +} + +.preview_controls label + label { + margin-right: 1rem; +} + +.preview_background { + background-color: transparent; +} diff --git a/p/themes/p.rtl.css b/p/themes/p.rtl.css new file mode 100644 index 000000000..db45295a1 --- /dev/null +++ b/p/themes/p.rtl.css @@ -0,0 +1,20 @@ +@charset "UTF-8"; + +body { + font-family: sans-serif; + text-align: center; +} + +h1 { + font-size: xx-large; + text-shadow: -1px -1px 0 #ccc; +} + +h1 a { + color: #0062be; + text-decoration: none; +} + +img { + border: 0; +} |
