[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!
This commit is contained in:
Frans de Jonge authored and GitHub committed 2020-03-01 21:15:17 +01:00
1 parent bfc731632c
commit 25666ec5d3
34 files changed
+14457 -3

No files matched your search

+2
View File
@@ -2,3 +2,5 @@
p/themes/Ansum/*.css
p/themes/Mapco/*.css
p/themes/Swage/*.css
# Ignore RTLCSS auto-generated CSS
*.rtl.css
+4
View File
@@ -115,6 +115,10 @@ endif
@$(PHP) ./cli/manipulate.translation.php -a ignore -k $(key) -l $(lang)
@echo Key ignored.
.PHONY: rtl
rtl: ## Generate RTL CSS files
rtlcss -d p/themes
##########
## HELP ##
##########
+4
View File
@@ -103,6 +103,10 @@ class FreshRSS extends Minz_FrontController {
$theme_id = $theme['id'];
$filename = $file;
}
if (_t('gen.dir') === 'rtl') {
$filename = substr($filename, 0, -4);
$filename = $filename . '.rtl.css';
}
$filetime = @filemtime(PUBLIC_PATH . '/themes/' . $theme_id . '/' . $filename);
$url = '/themes/' . $theme_id . '/' . $filename . '?' . $filetime;
Minz_View::prependStyle(Minz_Url::display($url));
+1
View File
@@ -103,6 +103,7 @@ return array(
'wed' => 'St',
'yesterday' => 'Včera',
),
'dir' => 'ltr',
'freshrss' => array(
'about' => 'O FreshRSS',
'_' => 'FreshRSS', // TODO - Translation
+1
View File
@@ -103,6 +103,7 @@ return array(
'wed' => 'Mi',
'yesterday' => 'Gestern',
),
'dir' => 'ltr',
'freshrss' => array(
'about' => 'Über FreshRSS',
'_' => 'FreshRSS', // TODO - Translation
+1
View File
@@ -103,6 +103,7 @@ return array(
'wed' => 'Wed',
'yesterday' => 'Yesterday',
),
'dir' => 'ltr',
'freshrss' => array(
'about' => 'About FreshRSS',
'_' => 'FreshRSS',
+1
View File
@@ -103,6 +103,7 @@ return array(
'wed' => 'Mie',
'yesterday' => 'Ayer',
),
'dir' => 'ltr',
'freshrss' => array(
'about' => 'Acerca de FreshRSS',
'_' => 'FreshRSS', // TODO - Translation
+1
View File
@@ -103,6 +103,7 @@ return array(
'wed' => 'mer.',
'yesterday' => 'Hier',
),
'dir' => 'ltr',
'freshrss' => array(
'about' => 'À propos de FreshRSS',
'_' => 'FreshRSS',
+1
View File
@@ -103,6 +103,7 @@ return array(
'wed' => 'Wed', // TODO - Translation
'yesterday' => 'אתמול',
),
'dir' => 'rtl',
'freshrss' => array(
'about' => 'אודות FreshRSS',
'_' => 'FreshRSS', // TODO - Translation
+1
View File
@@ -103,6 +103,7 @@ return array(
'wed' => 'Wed', // TODO - Translation
'yesterday' => 'Ieri',
),
'dir' => 'ltr',
'freshrss' => array(
'about' => 'Informazioni',
'_' => 'Feed RSS Reader',
+1
View File
@@ -103,6 +103,7 @@ return array(
'wed' => '수',
'yesterday' => '어제',
),
'dir' => 'ltr',
'freshrss' => array(
'about' => '정보',
'_' => 'FreshRSS',
+1
View File
@@ -103,6 +103,7 @@ return array(
'wed' => 'Wo',
'yesterday' => 'Gisteren',
),
'dir' => 'ltr',
'freshrss' => array(
'about' => 'Over FreshRSS',
'_' => 'FreshRSS',
+1
View File
@@ -103,6 +103,7 @@ return array(
'wed' => 'Dc',
'yesterday' => 'Ièr',
),
'dir' => 'ltr',
'freshrss' => array(
'about' => 'A prepaus de FreshRSS',
'_' => 'FreshRSS',
+1
View File
@@ -103,6 +103,7 @@ return array(
'wed' => 'Qua',
'yesterday' => 'Ontem',
),
'dir' => 'ltr',
'freshrss' => array(
'about' => 'Sobre FreshRSS',
'_' => 'FreshRSS', // TODO - Translation
+1
View File
@@ -103,6 +103,7 @@ return array(
'wed' => 'Wed', // TODO - Translation
'yesterday' => 'Yesterday', // TODO - Translation
),
'dir' => 'ltr',
'freshrss' => array(
'about' => 'About FreshRSS', // TODO - Translation
'_' => 'FreshRSS', // TODO - Translation
+1
View File
@@ -103,6 +103,7 @@ return array(
'wed' => 'St',
'yesterday' => 'Včera',
),
'dir' => 'ltr',
'freshrss' => array(
'about' => 'O FreshRSS',
'_' => 'FreshRSS',
+1
View File
@@ -103,6 +103,7 @@ return array(
'wed' => 'Çar',
'yesterday' => 'Dün',
),
'dir' => 'ltr',
'freshrss' => array(
'about' => 'FreshRSS hakkında',
'_' => 'FreshRSS', // TODO - Translation
+1
View File
@@ -103,6 +103,7 @@ return array(
'wed' => '周三',
'yesterday' => '昨天',
),
'dir' => 'ltr',
'freshrss' => array(
'about' => '关于 FreshRSS',
'_' => 'FreshRSS',
+5 -1
View File
@@ -680,7 +680,11 @@ case 5:
}
?>
<!DOCTYPE html>
<html>
<html<?php
if (_t('gen.dir') === 'rtl') {
echo ' dir="rtl" class="rtl"';
}
?>>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="initial-scale=1.0" />
+5 -1
View File
@@ -1,6 +1,10 @@
<?php FreshRSS::preLayout(); ?>
<!DOCTYPE html>
<html lang="<?= FreshRSS_Context::$user_conf->language ?>" xml:lang="<?= FreshRSS_Context::$user_conf->language ?>">
<html lang="<?= FreshRSS_Context::$user_conf->language ?>" xml:lang="<?= FreshRSS_Context::$user_conf->language ?>"<?php
if (_t('gen.dir') === 'rtl') {
echo ' dir="rtl" class="rtl"';
}
?>>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="initial-scale=1.0" />
File diff suppressed because it is too large. Load diff
File diff suppressed because it is too large. Load diff
File diff suppressed because it is too large. Load diff
File diff suppressed because it is too large. Load diff
File diff suppressed because it is too large. Load diff
File diff suppressed because it is too large. Load diff
+2 -1
View File
@@ -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;
File diff suppressed because it is too large. Load diff
File diff suppressed because it is too large. Load diff
File diff suppressed because it is too large. Load diff
+907
View File
@@ -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; }
+944
View File
@@ -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;
}
}
File diff suppressed because it is too large. Load diff
+20
View File
@@ -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;
}