diff --git a/p/themes/Nord/nord.css b/p/themes/Nord/nord.css index 1e7a9425ccd..c6626f11e3b 100644 --- a/p/themes/Nord/nord.css +++ b/p/themes/Nord/nord.css @@ -19,10 +19,10 @@ /* --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; */ @@ -30,19 +30,20 @@ --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,19 +580,19 @@ 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 { @@ -589,7 +600,7 @@ img.favicon { } .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,18 +1267,8 @@ 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 { @@ -1310,7 +1276,7 @@ option { } #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; + } } diff --git a/p/themes/Nord/nord.rtl.css b/p/themes/Nord/nord.rtl.css index b54a4245ab2..6b6e9c1ebef 100644 --- a/p/themes/Nord/nord.rtl.css +++ b/p/themes/Nord/nord.rtl.css @@ -19,10 +19,10 @@ /* --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; */ @@ -30,19 +30,20 @@ --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,19 +580,19 @@ 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 { @@ -589,7 +600,7 @@ img.favicon { } .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,18 +1267,8 @@ 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 { @@ -1310,7 +1276,7 @@ option { } #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; + } }