Skip to content

Commit

Permalink
Improved: nord theme (FreshRSS#5810)
Browse files Browse the repository at this point in the history
* new-article banner: line-height deleted

* mobile: config menu: no border-radius anymore

* mobile: form-group.group-name in bold and with :

* improve .flux

* fix dropdown

* cleanup duplicate code from frss.css

* mark as read button

* load more button

* more margin of alerts on mobile screens

* option + optgroup

* vars cleaned up

* better help text lines

---------

Co-authored-by: math-gh <>
math-GH authored Nov 4, 2023
1 parent d66dff4 commit a4dc348
Showing 2 changed files with 292 additions and 316 deletions.
304 changes: 146 additions & 158 deletions p/themes/Nord/nord.css
Original file line number Diff line number Diff line change
@@ -19,30 +19,31 @@
/* --nord5-snowstorm: #e5e9f0; */
--nord6-snowstorm: #eceff4;

--nord7-frost: #8fbcbb;
/* --nord7-frost: #8fbcbb; */
--nord8-frost: #88c0d0;
--nord9-frost: #81a1c1;
/* -nord10-frost: #5e81ac; */
/* --nord10-frost: #5e81ac; */

--nord11-aurora: #bf616a;
/* --nord12-aurora: #d08770; */
--nord13-aurora: #ebcb8b;
--nord14-aurora: #a3be8c;
--nord15-aurora: #b48ead;

--bg: var(--nordX-background);
--main-background: var(--nordX-background);
--accent-bg: var(--nord0-polarnight);
--accent-border: var(--nord0-polarnight);
--light-bg: var(--nord1-polarnight);
--dropdown-bg: var(--nord2-polarnight);
--border-elements: var(--nord3-polarnight);
--text: var(--nord6-snowstorm);
--text-light: var(--nord4-snowstorm);
--text-accent: var(--nord4-snowstorm);
--text-default: var(--nord6-snowstorm);
--highlight: var(--nord8-frost);
--accent: var(--nord9-frost);
--accent-light: var(--nord11-aurora);
--code: var(--nord13-aurora);
--alert: var(--nord14-aurora);
--alert-bg: var(--nord2-polarnight);
--code-bg: var(--nord0-polarnight);
--red: var(--nord11-aurora);
--orange: var(--nord13-aurora);
--green: var(--nord14-aurora);
--purple: var(--nord15-aurora);

--frss-background-color-transparent: #2e34407f;

@@ -63,8 +64,8 @@
}

html, body {
background: var(--bg);
color: var(--text);
background: var(--main-background);
color: var(--text-default);
font-family: var(--sans-font);
}

@@ -77,9 +78,20 @@ a:hover {
color: var(--highlight);
}

p.help {
color: var(--text-accent);
font-size: 0.9em;
font-style: italic;
padding-left: 0.25rem;
}

p.help img {
height: 1em;
vertical-align: middle;
}

kbd {
color: var(--code);
color: var(--orange);
border-color: var(--border-elements);
background-color: var(--accent-bg);
}
@@ -98,7 +110,7 @@ label {

input, select, textarea {
padding: 5px;
color: var(--text);
color: var(--text-default);
border: 1px solid var(--border-elements);
border-radius: 6px;
background-color: transparent;
@@ -110,7 +122,7 @@ input, select, textarea {
input:invalid,
select:invalid,
textarea:invalid {
border-color: var(--nord11-aurora);
border-color: var(--red);
}

select {
@@ -127,7 +139,7 @@ textarea:hover {
input:focus,
select:focus,
textarea:focus {
background-color: var(--bg);
background-color: var(--main-background);
border-color: var(--highlight);
outline: none;
}
@@ -136,17 +148,11 @@ textarea:focus {

input:disabled, select:disabled {
border-color: var(--border-elements);
color: var(--text-light);
}

button.as-link,
button.as-link:hover,
button.as-link:active {
background: transparent;
color: var(--text-accent);
}

button.as-link[disabled] {
color: var(--text-light);
color: var(--text-accent);
font-style: italic;
}

@@ -156,15 +162,8 @@ form th {
font-weight: normal;
}

.table-wrapper {
overflow-x: auto;
}

table {
max-width: 100%;

border-collapse: collapse;

}

table tr {
@@ -176,7 +175,7 @@ table th, table td {
}

.form-group.form-actions {
padding: 5px 0;
margin: 2rem 0 5rem 0;
}

.form-group .group-name {
@@ -206,7 +205,7 @@ table th, table td {
}

.btn.active {
background-color: var(--bg);
background-color: var(--main-background);
border: 1px solid var(--accent);
}

@@ -234,7 +233,7 @@ a:hover .icon,
.btn-important, #nav_menu_read_all .read_all, #actualize {
font-weight: bold !important;
background-color: var(--accent) !important;
color: var(--bg) !important;
color: var(--main-background) !important;
}

.btn-important:hover, #nav_menu_read_all .read_all:hover, #actualize:hover {
@@ -246,14 +245,14 @@ a:hover .icon,
}

.btn-attention {
color: var(--accent-light) !important;
border: 1px solid var(--accent-light) !important;
color: var(--red) !important;
border: 1px solid var(--red) !important;
}

.btn-attention:hover {
background: var(--accent-light);
background: var(--red);
transition: 0.2s background;
color: var(--bg) !important;
color: var(--main-background) !important;
}

.btn:hover,
@@ -274,16 +273,16 @@ svg:hover {
}

.dropdown-menu .stick input {
background-color: var(--nord1-polarnight);
border-color: var(--nord0-polarnight);
background-color: var(--light-bg);
border-color: var(--accent-border);
}

.dropdown-menu .stick input:focus {
background-color: var(--nord0-polarnight);
background-color: var(--accent-bg);
}

.dropdown-menu .stick .btn {
border-color: var(--nord0-polarnight);
border-color: var(--accent-border);
}

.stick input:hover,
@@ -305,6 +304,20 @@ svg:hover {
border-right-width: 1px;
}

.nav_menu .stick #mark-read-menu .read_all.btn {
margin-right: 0;
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}

.nav_menu .stick #mark-read-menu .dropdown-toggle.btn {
margin-left: 0;
border-left: 0;
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}


.stick .btn:last-child {
margin-right: 0;
border-top-right-radius: 6px;
@@ -349,7 +362,7 @@ svg:hover {
#slider .toggle_aside,
.dropdown-header-close a {
background: var(--accent-bg);
border: 1px solid var(--nord0-polarnight);
border: 1px solid var(--accent-border);
box-sizing: border-box;
transition: 0.2s;
}
@@ -358,7 +371,7 @@ svg:hover {
#slider .toggle_aside:hover,
#overlay .close:hover,
.dropdown-menu .toggle_aside:hover {
background-color: var(--bg) !important;
background-color: var(--main-background) !important;
border-color: var(--highlight) !important;
}

@@ -384,8 +397,8 @@ svg:hover {
.dropdown-menu .item > a:hover,
.dropdown-menu .item > button:hover:not([disabled]),
.dropdown-menu .item > label:hover:not(.noHover) {
background-color: var(--nord1-polarnight);
color: var(--text);
background-color: var(--light-bg);
color: var(--text-default);
transition: .2s;
}

@@ -447,20 +460,20 @@ svg:hover {
.item ~ .dropdown-header,
.dropdown-section ~ .dropdown-section,
.item.separator {
border-top-color: var(--nord0-polarnight);
border-top-color: var(--accent-border);
}

/*=== Alerts */
.alert {
color: var(--text-light);
color: var(--text-accent);
font-size: 0.9em;
border: 1px solid var(--nord3-polarnight);
border: 1px solid var(--border-elements);
border-radius: 6px;
background-color: var(--nord1-polarnight);
background-color: var(--light-bg);
}

.alert-success {
border-color: var(--nord14-aurora);
border-color: var(--green);
}

.alert-head {
@@ -472,11 +485,11 @@ svg:hover {
}

.alert-warn {
border-color: var(--nord13-aurora);
border-color: var(--orange);
}

.alert-error {
border-color: var(--nord11-aurora);
border-color: var(--red);
}

/*=== Icons */
@@ -485,7 +498,7 @@ svg:hover {
}

img.favicon {
background: var(--text-light);
background: var(--text-accent);
border-radius: 4px;
}

@@ -505,8 +518,8 @@ img.favicon {
}

.pagination .item a:hover {
background-color: var(--bg);
color: var(--text);
background-color: var(--main-background);
color: var(--text-default);
transition: .2s;
}

@@ -517,7 +530,6 @@ img.favicon {
}

.box .box-title {
margin: 0;
padding: 5px 10px;
}

@@ -529,7 +541,6 @@ img.favicon {
.box .box-content {
padding-bottom: 1.5rem;
list-style: none;
max-height: 260px;
}

.box .box-title .configure {
@@ -569,27 +580,27 @@ img.favicon {
}

.tree-folder.category {
border-bottom: 1px solid var(--bg);
border-bottom: 1px solid var(--main-background);
}

.tree-folder.category.active .tree-folder-title,
.tree-folder.category .tree-folder-title:hover,
.tree-folder.category:hover .tree-folder-title {
background: var(--nord1-polarnight);
background: var(--light-bg);
}

.tree-folder .tree-folder-title:hover a,
.tree-folder.category.active .tree-folder-title:hover a,
.tree-folder .tree-folder-items .item.feed:hover a {
color: var(--text);
color: var(--text-default);
}

.tree-folder.category.active .tree-folder-title a {
color: var(--highlight);
}

.tree-folder-items > .item {
color: var(--text);
color: var(--text-default);
font-size: 0.8rem;
}

@@ -657,8 +668,8 @@ img.favicon {
}

.aside.nav-list .nav-section .item a:hover {
background-color: var(--bg);
color: var(--text);
background-color: var(--main-background);
color: var(--text-default);
transition: .2s;
}

@@ -672,7 +683,7 @@ img.favicon {

.aside_feed .tree-folder-items.active {
padding-bottom: 2rem;
background-color: var(--bg);
background-color: var(--main-background);
}

.aside.aside_feed .nav-form input,
@@ -695,7 +706,7 @@ img.favicon {
}

.item.feed.error > .item-title {
color: var(--accent-light);
color: var(--red);
}

.item.feed.active {
@@ -711,7 +722,7 @@ img.favicon {
}

li.item.active {
background-color: var(--bg);
background-color: var(--main-background);
}

.item.feed:hover {
@@ -732,17 +743,16 @@ li.item.active {
#new-article > a {
margin: 1rem auto;
width: 90%;
color: var(--nord15-aurora);
border: 2px solid var(--nord15-aurora);
color: var(--purple);
border: 2px solid var(--purple);
border-radius: 6px;
line-height: 3em;
font-weight: bold;
transition: 0.2s background-color, .2s color;
}

#new-article > a:hover {
background-color: var(--nord15-aurora);
color: var(--bg);
background-color: var(--purple);
color: var(--main-background);
text-decoration: none;
}

@@ -779,21 +789,13 @@ li.item.active {

.flux .website .favicon {
padding: 0.25rem;
position: absolute;
}

.flux .tags .icon {
padding: 0.25rem;
}

.flux .website span {
margin-left: 2rem;
}

.flux .item.date {
width: 155px;
text-align: right;
overflow: hidden;
font-size: 0.7rem;
}

@@ -817,16 +819,18 @@ li.item.active {
}

.flux .item.title a {
color: var(--text);
color: var(--text-default);
}

.flux .item.title .summary {
color: var(--text-light);
color: var(--text-accent);
font-size: 0.8rem;
font-style: italic;
opacity: 0.8;
}

.flux .item.title .author {
color: var(--text-light);
color: var(--text-accent);
opacity: 0.8;
}

@@ -837,20 +841,16 @@ li.item.active {
}

.flux_content .content header h1.title a {
color: var(--nord8-frost);
}

.hide_posts > .flux:not(.active) > .flux_content {
display: none;
color: var(--highlight);
}

.content > footer .subtitle {
border-color: var(--nord2-polarnight);
border-color: var(--border-elements);
}

.content > header .dropdown-menu .dropdown-header,
.content > footer .dropdown-menu .dropdown-header {
color: var(--text);
color: var(--text-default);
}

.content hr {
@@ -882,23 +882,29 @@ li.item.active {
margin: 0;
}

#load_more.loading {
background-color: var(--accent);
}

#load_more.loading:hover {
background-color: var(--highlight);
}

/*=== Notification and actualize notification */
.notification {
padding: 0 0 0 5px;
background: var(--nord3-polarnight);
color: var(--text);
background: var(--dropdown-bg);
color: var(--text-default);
font-size: 0.9em;
border-radius: 6px;
border-color: var(--nord1-polarnight);
border-color: var(--border-elements);
z-index: 10;
text-align: center;
font-weight: bold;
line-height: 3em;
vertical-align: middle;
}

.notification.bad {
background-color: var(--nord11-aurora);
background-color: var(--red);
color: var(--nord0-polarnight);
}

@@ -930,7 +936,7 @@ li.item.active {
}

#nav_entries .item a:hover {
background-color: var(--bg);
background-color: var(--main-background);
}

#bigMarkAsRead {
@@ -943,7 +949,7 @@ li.item.active {
}

#bigMarkAsRead:hover .bigTick {
color: var(--text);
color: var(--text-default);
}

.bigTick {
@@ -969,7 +975,7 @@ li.item.active {
/*=== DIVERS */
/*===========*/
.category .title.error::before {
color: var(--accent-light);
color: var(--red);
}


@@ -983,7 +989,7 @@ li.item.active {
margin: .125rem;
}

.nav_menu .stick {
.nav_menu .group {
margin-right: 1rem;
margin-left: .125rem;
}
@@ -1038,7 +1044,7 @@ li.item.active {
/*=== PREVIEW */
/*===========*/
.preview_controls {
background-color: var(--nord1-polarnight);
background-color: var(--light-bg);
border-color: var(--border-elements);
}

@@ -1078,8 +1084,16 @@ textarea {
height: 100px;
}

option {
padding: 0 .5em;
option,
optgroup {
padding-left: 0.5rem;
}

optgroup::before {
padding-top: 1rem;
padding-bottom: 0.5rem;
color: var(--accent);
font-style: normal;
}

/*=== COMPONENTS */
@@ -1130,7 +1144,7 @@ option {
.dropdown-menu > .item > ul > .item > a,
.dropdown-menu > .item > ul > .item > span,
.dropdown-menu > .item > ul > .item > .as-link {
color: var(--text-light);
color: var(--text-accent) !important;
}

/*=== STRUCTURE */
@@ -1153,13 +1167,13 @@ option {
}

.aside .feed.active .item-title:not([data-unread="0"])::after {
color: var(--bg);
color: var(--main-background);
border: none;
background-color: var(--highlight);
}

.aside .feed.active:hover .item-title:not([data-unread="0"])::after {
background-color: var(--text);
background-color: var(--text-default);
}

/*=== Aside main page (feeds) */
@@ -1181,7 +1195,7 @@ option {
/*=== READER VIEW */
/*================*/
#stream.reader .flux {
background-color: var(--bg);
background-color: var(--main-background);
border: none;
}

@@ -1215,7 +1229,7 @@ option {
}

#panel {
background-color: var(--bg);
background-color: var(--main-background);
}

/*=== MOBILE */
@@ -1225,28 +1239,10 @@ option {
.aside:target + .close-aside,
.configure .dropdown-target:target ~ .dropdown-close {
backdrop-filter: grayscale(60%) blur(1px);
display: block;
font-size: 0;
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
cursor: pointer;
z-index: 99;
}

.nav_mobile {
display: block;
}

.aside {
position: fixed;
top: 0; bottom: 0;
left: 0;
width: 0;
overflow: hidden;
z-index: 100;
transition: width 200ms linear;
}

@@ -1263,26 +1259,6 @@ option {
max-width: 300px;
}

.aside:target,
.reader .aside:target {
width: 90%;
height: 100vh;
}

.aside_feed .configure-feeds {
margin-top: 10px;
}

.flux_header .item.website {
width: 40px;
}

.flux:not(.current):hover .item.title {
position: relative;
width: auto;
white-space: nowrap;
}

.flux .website .favicon {
position: relative;
}
@@ -1291,26 +1267,16 @@ option {
background-color: var(--accent-bg);
}

.notification {
top: 0;
left: 0;
right: 0;
}

#nav_entries {
width: 100%;
}

#slider.active {
background-color: var(--bg);
background-color: var(--main-background);
}

#close-slider img {
display: initial;
}

#close-slider.active {
background: var(--bg);
background: var(--main-background);
display: block;
width: 100%;
height: 50px;
@@ -1367,6 +1333,10 @@ option {
display: none;
}

.alert {
width: 85%;
}

.dropdown-menu {
margin: 0;
}
@@ -1378,4 +1348,22 @@ option {
.dropdown .dropdown-menu {
border-radius: 6px;
}

.header .configure .dropdown .dropdown-menu {
border-radius: 0;
}

.form-group .group-name {
font-weight: bold;
padding: 0 0 0.25rem 0;
}

.form-group .group-name::after {
content: ':';
}

.form-group {
margin-top: 2rem;
margin-bottom: 2rem;
}
}
304 changes: 146 additions & 158 deletions p/themes/Nord/nord.rtl.css
Original file line number Diff line number Diff line change
@@ -19,30 +19,31 @@
/* --nord5-snowstorm: #e5e9f0; */
--nord6-snowstorm: #eceff4;

--nord7-frost: #8fbcbb;
/* --nord7-frost: #8fbcbb; */
--nord8-frost: #88c0d0;
--nord9-frost: #81a1c1;
/* -nord10-frost: #5e81ac; */
/* --nord10-frost: #5e81ac; */

--nord11-aurora: #bf616a;
/* --nord12-aurora: #d08770; */
--nord13-aurora: #ebcb8b;
--nord14-aurora: #a3be8c;
--nord15-aurora: #b48ead;

--bg: var(--nordX-background);
--main-background: var(--nordX-background);
--accent-bg: var(--nord0-polarnight);
--accent-border: var(--nord0-polarnight);
--light-bg: var(--nord1-polarnight);
--dropdown-bg: var(--nord2-polarnight);
--border-elements: var(--nord3-polarnight);
--text: var(--nord6-snowstorm);
--text-light: var(--nord4-snowstorm);
--text-accent: var(--nord4-snowstorm);
--text-default: var(--nord6-snowstorm);
--highlight: var(--nord8-frost);
--accent: var(--nord9-frost);
--accent-light: var(--nord11-aurora);
--code: var(--nord13-aurora);
--alert: var(--nord14-aurora);
--alert-bg: var(--nord2-polarnight);
--code-bg: var(--nord0-polarnight);
--red: var(--nord11-aurora);
--orange: var(--nord13-aurora);
--green: var(--nord14-aurora);
--purple: var(--nord15-aurora);

--frss-background-color-transparent: #2e34407f;

@@ -63,8 +64,8 @@
}

html, body {
background: var(--bg);
color: var(--text);
background: var(--main-background);
color: var(--text-default);
font-family: var(--sans-font);
}

@@ -77,9 +78,20 @@ a:hover {
color: var(--highlight);
}

p.help {
color: var(--text-accent);
font-size: 0.9em;
font-style: italic;
padding-right: 0.25rem;
}

p.help img {
height: 1em;
vertical-align: middle;
}

kbd {
color: var(--code);
color: var(--orange);
border-color: var(--border-elements);
background-color: var(--accent-bg);
}
@@ -98,7 +110,7 @@ label {

input, select, textarea {
padding: 5px;
color: var(--text);
color: var(--text-default);
border: 1px solid var(--border-elements);
border-radius: 6px;
background-color: transparent;
@@ -110,7 +122,7 @@ input, select, textarea {
input:invalid,
select:invalid,
textarea:invalid {
border-color: var(--nord11-aurora);
border-color: var(--red);
}

select {
@@ -127,7 +139,7 @@ textarea:hover {
input:focus,
select:focus,
textarea:focus {
background-color: var(--bg);
background-color: var(--main-background);
border-color: var(--highlight);
outline: none;
}
@@ -136,17 +148,11 @@ textarea:focus {

input:disabled, select:disabled {
border-color: var(--border-elements);
color: var(--text-light);
}

button.as-link,
button.as-link:hover,
button.as-link:active {
background: transparent;
color: var(--text-accent);
}

button.as-link[disabled] {
color: var(--text-light);
color: var(--text-accent);
font-style: italic;
}

@@ -156,15 +162,8 @@ form th {
font-weight: normal;
}

.table-wrapper {
overflow-x: auto;
}

table {
max-width: 100%;

border-collapse: collapse;

}

table tr {
@@ -176,7 +175,7 @@ table th, table td {
}

.form-group.form-actions {
padding: 5px 0;
margin: 2rem 0 5rem 0;
}

.form-group .group-name {
@@ -206,7 +205,7 @@ table th, table td {
}

.btn.active {
background-color: var(--bg);
background-color: var(--main-background);
border: 1px solid var(--accent);
}

@@ -234,7 +233,7 @@ a:hover .icon,
.btn-important, #nav_menu_read_all .read_all, #actualize {
font-weight: bold !important;
background-color: var(--accent) !important;
color: var(--bg) !important;
color: var(--main-background) !important;
}

.btn-important:hover, #nav_menu_read_all .read_all:hover, #actualize:hover {
@@ -246,14 +245,14 @@ a:hover .icon,
}

.btn-attention {
color: var(--accent-light) !important;
border: 1px solid var(--accent-light) !important;
color: var(--red) !important;
border: 1px solid var(--red) !important;
}

.btn-attention:hover {
background: var(--accent-light);
background: var(--red);
transition: 0.2s background;
color: var(--bg) !important;
color: var(--main-background) !important;
}

.btn:hover,
@@ -274,16 +273,16 @@ svg:hover {
}

.dropdown-menu .stick input {
background-color: var(--nord1-polarnight);
border-color: var(--nord0-polarnight);
background-color: var(--light-bg);
border-color: var(--accent-border);
}

.dropdown-menu .stick input:focus {
background-color: var(--nord0-polarnight);
background-color: var(--accent-bg);
}

.dropdown-menu .stick .btn {
border-color: var(--nord0-polarnight);
border-color: var(--accent-border);
}

.stick input:hover,
@@ -305,6 +304,20 @@ svg:hover {
border-left-width: 1px;
}

.nav_menu .stick #mark-read-menu .read_all.btn {
margin-left: 0;
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}

.nav_menu .stick #mark-read-menu .dropdown-toggle.btn {
margin-right: 0;
border-right: 0;
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}


.stick .btn:last-child {
margin-left: 0;
border-top-left-radius: 6px;
@@ -349,7 +362,7 @@ svg:hover {
#slider .toggle_aside,
.dropdown-header-close a {
background: var(--accent-bg);
border: 1px solid var(--nord0-polarnight);
border: 1px solid var(--accent-border);
box-sizing: border-box;
transition: 0.2s;
}
@@ -358,7 +371,7 @@ svg:hover {
#slider .toggle_aside:hover,
#overlay .close:hover,
.dropdown-menu .toggle_aside:hover {
background-color: var(--bg) !important;
background-color: var(--main-background) !important;
border-color: var(--highlight) !important;
}

@@ -384,8 +397,8 @@ svg:hover {
.dropdown-menu .item > a:hover,
.dropdown-menu .item > button:hover:not([disabled]),
.dropdown-menu .item > label:hover:not(.noHover) {
background-color: var(--nord1-polarnight);
color: var(--text);
background-color: var(--light-bg);
color: var(--text-default);
transition: .2s;
}

@@ -447,20 +460,20 @@ svg:hover {
.item ~ .dropdown-header,
.dropdown-section ~ .dropdown-section,
.item.separator {
border-top-color: var(--nord0-polarnight);
border-top-color: var(--accent-border);
}

/*=== Alerts */
.alert {
color: var(--text-light);
color: var(--text-accent);
font-size: 0.9em;
border: 1px solid var(--nord3-polarnight);
border: 1px solid var(--border-elements);
border-radius: 6px;
background-color: var(--nord1-polarnight);
background-color: var(--light-bg);
}

.alert-success {
border-color: var(--nord14-aurora);
border-color: var(--green);
}

.alert-head {
@@ -472,11 +485,11 @@ svg:hover {
}

.alert-warn {
border-color: var(--nord13-aurora);
border-color: var(--orange);
}

.alert-error {
border-color: var(--nord11-aurora);
border-color: var(--red);
}

/*=== Icons */
@@ -485,7 +498,7 @@ svg:hover {
}

img.favicon {
background: var(--text-light);
background: var(--text-accent);
border-radius: 4px;
}

@@ -505,8 +518,8 @@ img.favicon {
}

.pagination .item a:hover {
background-color: var(--bg);
color: var(--text);
background-color: var(--main-background);
color: var(--text-default);
transition: .2s;
}

@@ -517,7 +530,6 @@ img.favicon {
}

.box .box-title {
margin: 0;
padding: 5px 10px;
}

@@ -529,7 +541,6 @@ img.favicon {
.box .box-content {
padding-bottom: 1.5rem;
list-style: none;
max-height: 260px;
}

.box .box-title .configure {
@@ -569,27 +580,27 @@ img.favicon {
}

.tree-folder.category {
border-bottom: 1px solid var(--bg);
border-bottom: 1px solid var(--main-background);
}

.tree-folder.category.active .tree-folder-title,
.tree-folder.category .tree-folder-title:hover,
.tree-folder.category:hover .tree-folder-title {
background: var(--nord1-polarnight);
background: var(--light-bg);
}

.tree-folder .tree-folder-title:hover a,
.tree-folder.category.active .tree-folder-title:hover a,
.tree-folder .tree-folder-items .item.feed:hover a {
color: var(--text);
color: var(--text-default);
}

.tree-folder.category.active .tree-folder-title a {
color: var(--highlight);
}

.tree-folder-items > .item {
color: var(--text);
color: var(--text-default);
font-size: 0.8rem;
}

@@ -657,8 +668,8 @@ img.favicon {
}

.aside.nav-list .nav-section .item a:hover {
background-color: var(--bg);
color: var(--text);
background-color: var(--main-background);
color: var(--text-default);
transition: .2s;
}

@@ -672,7 +683,7 @@ img.favicon {

.aside_feed .tree-folder-items.active {
padding-bottom: 2rem;
background-color: var(--bg);
background-color: var(--main-background);
}

.aside.aside_feed .nav-form input,
@@ -695,7 +706,7 @@ img.favicon {
}

.item.feed.error > .item-title {
color: var(--accent-light);
color: var(--red);
}

.item.feed.active {
@@ -711,7 +722,7 @@ img.favicon {
}

li.item.active {
background-color: var(--bg);
background-color: var(--main-background);
}

.item.feed:hover {
@@ -732,17 +743,16 @@ li.item.active {
#new-article > a {
margin: 1rem auto;
width: 90%;
color: var(--nord15-aurora);
border: 2px solid var(--nord15-aurora);
color: var(--purple);
border: 2px solid var(--purple);
border-radius: 6px;
line-height: 3em;
font-weight: bold;
transition: 0.2s background-color, .2s color;
}

#new-article > a:hover {
background-color: var(--nord15-aurora);
color: var(--bg);
background-color: var(--purple);
color: var(--main-background);
text-decoration: none;
}

@@ -779,21 +789,13 @@ li.item.active {

.flux .website .favicon {
padding: 0.25rem;
position: absolute;
}

.flux .tags .icon {
padding: 0.25rem;
}

.flux .website span {
margin-right: 2rem;
}

.flux .item.date {
width: 155px;
text-align: left;
overflow: hidden;
font-size: 0.7rem;
}

@@ -817,16 +819,18 @@ li.item.active {
}

.flux .item.title a {
color: var(--text);
color: var(--text-default);
}

.flux .item.title .summary {
color: var(--text-light);
color: var(--text-accent);
font-size: 0.8rem;
font-style: italic;
opacity: 0.8;
}

.flux .item.title .author {
color: var(--text-light);
color: var(--text-accent);
opacity: 0.8;
}

@@ -837,20 +841,16 @@ li.item.active {
}

.flux_content .content header h1.title a {
color: var(--nord8-frost);
}

.hide_posts > .flux:not(.active) > .flux_content {
display: none;
color: var(--highlight);
}

.content > footer .subtitle {
border-color: var(--nord2-polarnight);
border-color: var(--border-elements);
}

.content > header .dropdown-menu .dropdown-header,
.content > footer .dropdown-menu .dropdown-header {
color: var(--text);
color: var(--text-default);
}

.content hr {
@@ -882,23 +882,29 @@ li.item.active {
margin: 0;
}

#load_more.loading {
background-color: var(--accent);
}

#load_more.loading:hover {
background-color: var(--highlight);
}

/*=== Notification and actualize notification */
.notification {
padding: 0 5px 0 0;
background: var(--nord3-polarnight);
color: var(--text);
background: var(--dropdown-bg);
color: var(--text-default);
font-size: 0.9em;
border-radius: 6px;
border-color: var(--nord1-polarnight);
border-color: var(--border-elements);
z-index: 10;
text-align: center;
font-weight: bold;
line-height: 3em;
vertical-align: middle;
}

.notification.bad {
background-color: var(--nord11-aurora);
background-color: var(--red);
color: var(--nord0-polarnight);
}

@@ -930,7 +936,7 @@ li.item.active {
}

#nav_entries .item a:hover {
background-color: var(--bg);
background-color: var(--main-background);
}

#bigMarkAsRead {
@@ -943,7 +949,7 @@ li.item.active {
}

#bigMarkAsRead:hover .bigTick {
color: var(--text);
color: var(--text-default);
}

.bigTick {
@@ -969,7 +975,7 @@ li.item.active {
/*=== DIVERS */
/*===========*/
.category .title.error::before {
color: var(--accent-light);
color: var(--red);
}


@@ -983,7 +989,7 @@ li.item.active {
margin: .125rem;
}

.nav_menu .stick {
.nav_menu .group {
margin-left: 1rem;
margin-right: .125rem;
}
@@ -1038,7 +1044,7 @@ li.item.active {
/*=== PREVIEW */
/*===========*/
.preview_controls {
background-color: var(--nord1-polarnight);
background-color: var(--light-bg);
border-color: var(--border-elements);
}

@@ -1078,8 +1084,16 @@ textarea {
height: 100px;
}

option {
padding: 0 .5em;
option,
optgroup {
padding-right: 0.5rem;
}

optgroup::before {
padding-top: 1rem;
padding-bottom: 0.5rem;
color: var(--accent);
font-style: normal;
}

/*=== COMPONENTS */
@@ -1130,7 +1144,7 @@ option {
.dropdown-menu > .item > ul > .item > a,
.dropdown-menu > .item > ul > .item > span,
.dropdown-menu > .item > ul > .item > .as-link {
color: var(--text-light);
color: var(--text-accent) !important;
}

/*=== STRUCTURE */
@@ -1153,13 +1167,13 @@ option {
}

.aside .feed.active .item-title:not([data-unread="0"])::after {
color: var(--bg);
color: var(--main-background);
border: none;
background-color: var(--highlight);
}

.aside .feed.active:hover .item-title:not([data-unread="0"])::after {
background-color: var(--text);
background-color: var(--text-default);
}

/*=== Aside main page (feeds) */
@@ -1181,7 +1195,7 @@ option {
/*=== READER VIEW */
/*================*/
#stream.reader .flux {
background-color: var(--bg);
background-color: var(--main-background);
border: none;
}

@@ -1215,7 +1229,7 @@ option {
}

#panel {
background-color: var(--bg);
background-color: var(--main-background);
}

/*=== MOBILE */
@@ -1225,28 +1239,10 @@ option {
.aside:target + .close-aside,
.configure .dropdown-target:target ~ .dropdown-close {
backdrop-filter: grayscale(60%) blur(1px);
display: block;
font-size: 0;
position: fixed;
top: 0;
bottom: 0;
right: 0;
left: 0;
cursor: pointer;
z-index: 99;
}

.nav_mobile {
display: block;
}

.aside {
position: fixed;
top: 0; bottom: 0;
right: 0;
width: 0;
overflow: hidden;
z-index: 100;
transition: width 200ms linear;
}

@@ -1263,26 +1259,6 @@ option {
max-width: 300px;
}

.aside:target,
.reader .aside:target {
width: 90%;
height: 100vh;
}

.aside_feed .configure-feeds {
margin-top: 10px;
}

.flux_header .item.website {
width: 40px;
}

.flux:not(.current):hover .item.title {
position: relative;
width: auto;
white-space: nowrap;
}

.flux .website .favicon {
position: relative;
}
@@ -1291,26 +1267,16 @@ option {
background-color: var(--accent-bg);
}

.notification {
top: 0;
right: 0;
left: 0;
}

#nav_entries {
width: 100%;
}

#slider.active {
background-color: var(--bg);
background-color: var(--main-background);
}

#close-slider img {
display: initial;
}

#close-slider.active {
background: var(--bg);
background: var(--main-background);
display: block;
width: 100%;
height: 50px;
@@ -1367,6 +1333,10 @@ option {
display: none;
}

.alert {
width: 85%;
}

.dropdown-menu {
margin: 0;
}
@@ -1378,4 +1348,22 @@ option {
.dropdown .dropdown-menu {
border-radius: 6px;
}

.header .configure .dropdown .dropdown-menu {
border-radius: 0;
}

.form-group .group-name {
font-weight: bold;
padding: 0 0 0.25rem 0;
}

.form-group .group-name::after {
content: ':';
}

.form-group {
margin-top: 2rem;
margin-bottom: 2rem;
}
}

0 comments on commit a4dc348

Please sign in to comment.