From e6f4fe048114143fb93c02bb105eedbba777f664 Mon Sep 17 00:00:00 2001 From: Alexandre Alapetite Date: Tue, 11 Nov 2025 23:28:21 +0100 Subject: Reduce SCSS: rewrite Swage as CSS (#8200) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * Reduce unused SCSS * Rename Swage .scss to .css * Convert from SCSS to native CSS Contribute to https://github.com/FreshRSS/FreshRSS/issues/7611 Taking advantage of: * https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Nesting * https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Selectors/Nesting_selector * https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Colors/Using_relative_colors#using_math_functions This was mostly to get started and get a better idea of the difficulties. I am happy to see that the differences between the original SCSS and the native CSS are limited. The relevant diff to look at is: https://github.com/FreshRSS/FreshRSS/pull/8200/commits/dd1bc7c663cf7afdde7af3161ddc213d360247ef The main remaining issue is that the *CSS Color Module Level 4, Relative Color* is not mainstream yet, so a small compatibility section is needed with precomputed colour values. --- p/themes/Ansum/_mixins.scss | 38 - p/themes/Mapco/_mixins.scss | 38 - p/themes/Swage/swage.css | 1973 +++++++++++++++++++++++++----------------- p/themes/Swage/swage.css.map | 1 - p/themes/Swage/swage.rtl.css | 1973 +++++++++++++++++++++++++----------------- p/themes/Swage/swage.scss | 1676 ----------------------------------- 6 files changed, 2322 insertions(+), 3377 deletions(-) delete mode 100644 p/themes/Swage/swage.css.map delete mode 100644 p/themes/Swage/swage.scss (limited to 'p') diff --git a/p/themes/Ansum/_mixins.scss b/p/themes/Ansum/_mixins.scss index d86cf8f07..9ba940a88 100644 --- a/p/themes/Ansum/_mixins.scss +++ b/p/themes/Ansum/_mixins.scss @@ -1,45 +1,7 @@ -@use "sass:list"; /* stylelint-disable property-no-vendor-prefix */ /* FUNCTIONS */ -//animation - @mixin transition($target, $duration, $ease) { transition: $target $duration $ease; } - -//animation - -@mixin animation-delay($delay) { - animation-delay: $delay; -} - -//animation - -@mixin animation($animate...) { - $max: list.length($animate); - $animations: ''; - - @for $i from 1 through $max { - $animations: #{$animations + list.nth($animate, $i)}; - - @if $i < $max { - $animations: #{$animations + ", "}; - } - } - animation: #{$animations}; -} - -//keyframes - -@mixin keyframes($animationName) { - - @keyframes #{$animationName} { - @content; - } -} - -@mixin border-radius($radius: 4px) { - border-radius: $radius; -} diff --git a/p/themes/Mapco/_mixins.scss b/p/themes/Mapco/_mixins.scss index d86cf8f07..9ba940a88 100644 --- a/p/themes/Mapco/_mixins.scss +++ b/p/themes/Mapco/_mixins.scss @@ -1,45 +1,7 @@ -@use "sass:list"; /* stylelint-disable property-no-vendor-prefix */ /* FUNCTIONS */ -//animation - @mixin transition($target, $duration, $ease) { transition: $target $duration $ease; } - -//animation - -@mixin animation-delay($delay) { - animation-delay: $delay; -} - -//animation - -@mixin animation($animate...) { - $max: list.length($animate); - $animations: ''; - - @for $i from 1 through $max { - $animations: #{$animations + list.nth($animate, $i)}; - - @if $i < $max { - $animations: #{$animations + ", "}; - } - } - animation: #{$animations}; -} - -//keyframes - -@mixin keyframes($animationName) { - - @keyframes #{$animationName} { - @content; - } -} - -@mixin border-radius($radius: 4px) { - border-radius: $radius; -} diff --git a/p/themes/Swage/swage.css b/p/themes/Swage/swage.css index 852544e35..3e02bf336 100644 --- a/p/themes/Swage/swage.css +++ b/p/themes/Swage/swage.css @@ -1,85 +1,84 @@ +@charset "UTF-8"; + +/* colors */ :root { - --color-text-light: #f5f3f3; - --color-text-light-darker: #988484; - --color-text-dark: #181621; - --color-text-nav: #00488b; - --color-text-aside: #22303d; - --color-text-alert: #fa8052; - --color-text-good: #5eaabf; - --color-text-bad: #b0425b; - --color-text-bad-lighter: #c46178; - --color-text-shadow-light: #f5f3f3; - --color-box-shadow-light: #ded7d7; - --color-border-light: #f5f3f3; - --color-border-light-darker: #ded7d7; - --color-border-grey: #e3e3e3; - --color-border-nav: #00488b; - --color-border-bad: #b0425b; - --color-background-light: #f5f3f3; - --color-background-light-darker: #ded7d7; - --color-background-light-darker-transparent: rgba(217, 217, 217, 0.7333333333); - --color-background-dark: #181621; - --color-background-nav: #0062be; - --color-background-nav-darker: #00488b; - --color-background-aside: #22303d; - --color-background-alert: #fa8052; - --color-background-alert-darker: #f95c20; - --color-background-good: #5eaabf; - --color-background-bad: #c46178; - --color-background-stared: #fff6da; - --color-background-unread: #fff3ed; - --color-background-hover: #fff; + --color-base-text: #181621; + --color-base-light: #f5f3f3; + --color-base-nav: #0062be; + --color-base-aside: #22303d; + --color-base-alert: #fa8052; + --color-base-good: #5eaabf; + --color-base-bad: #b0425b; + --color-base-grey: #e3e3e3; + --color-base-grey-transparent: #d9d9d9bb; + --color-base-stared: #fff6da; + --color-base-unread: #fff3ed; + --color-base-hover: #fff; + + --color-text-light: var(--color-base-light); + --color-text-light-darker: color(from var(--color-base-light) hsl h s calc(l - 40%)); + --color-text-dark: var(--color-base-text); + --color-text-nav: color(from var(--color-base-nav) hsl h s calc(l - 10%)); + --color-text-aside: var(--color-base-aside); + --color-text-alert: var(--color-base-alert); + --color-text-good: var(--color-base-good); + --color-text-bad: var(--color-base-bad); + --color-text-bad-lighter: color(from var(--color-base-bad) hsl h s calc(l + 10%)); + + --color-text-shadow-light: var(--color-base-light); + --color-box-shadow-light: color(from var(--color-base-light) hsl h s calc(l - 10%)); + + --color-border-light: var(--color-base-light); + --color-border-light-darker: color(from var(--color-base-light) hsl h s calc(l - 10%)); + --color-border-grey: var(--color-base-grey); + --color-border-nav: color(from var(--color-base-nav) hsl h s calc(l - 10%)); + --color-border-bad: var(--color-base-bad); + + --color-background-light: var(--color-base-light); + --color-background-light-darker: color(from var(--color-base-light) hsl h s calc(l - 10%)); + --color-background-light-darker-transparent: var(--color-base-grey-transparent); + --color-background-dark: var(--color-base-text); + --color-background-nav: var(--color-base-nav); + --color-background-nav-darker: color(from var(--color-base-nav) hsl h s calc(l - 10%)); + --color-background-aside: var(--color-base-aside); + --color-background-alert: var(--color-base-alert); + --color-background-alert-darker: color(from var(--color-base-alert) hsl h s calc(l - 10%)); + --color-background-good: var(--color-base-good); + --color-background-bad: color(from var(--color-base-bad) hsl h s calc(l + 10%)); + --color-background-stared: var(--color-base-stared); + --color-background-unread: var(--color-base-unread); + --color-background-hover: var(--color-base-hover); + --frss-scrollbar-handle: rgba(0, 0, 0, 0.1); --frss-scrollbar-handle-hover: rgba(0, 0, 0, 0.4); --frss-scrollbar-track: rgba(0, 0, 0, 0.05); --frss-scrollbar-track-hover: rgba(0, 0, 0, 0.1); -} - -input, -select, textarea { - min-height: 25px; - margin-top: 4px; - background-color: var(--color-background-light); - border: 2px solid var(--color-border-grey); -} - -input:focus, -select:focus, textarea:focus { - border: 2px solid var(--color-background-dark); - outline: none; -} - -input:invalid, -select:invalid { - padding-left: 5px; - color: var(--color-text-bad); - border-left-color: var(--color-border-bad); - border-left-width: 5px; - box-shadow: none; -} -.nav-list .item .nav-header, .nav-list .item { - min-height: 2.5em; - line-height: 2.5; -} - -.dropdown-menu > .item a, -.dropdown-menu > .item > span, -.dropdown-menu > .item > .as-link, -.dropdown-menu > .item button, .dropdown-menu > .item { - padding: 0 22px; - color: var(--color-text-light); - font-size: 0.8rem; - line-height: 2.5; -} - -.flux::after, .form-group::after { - display: block; - clear: both; -} - -#nav_entries, .notification, #new-article, .aside, .header > .item.title, .stick.configure-feeds { - width: 231px; + --min-height-input: 25px; + --margin-top-input: 4px; + --border-input-default: 2px solid var(--color-border-grey); + --min-height-nav-list: 2.5em; + --line-height-nav-list: 2.5; + --padding-dropdown: 0 22px; + --font-size-dropdown: 0.8rem; + --line-height-dropdown: 2.5; + --width-aside: 231px; +} + +/* Compatibility: CSS Color Module Level 4, Relative Color */ +@supports not (color: color(from white hsl h s calc(l - 10%))) { + :root { + --color-text-light-darker: #988484; + --color-text-nav: #00488b; + --color-text-bad-lighter: #c46178; + --color-box-shadow-light: #ded7d7; + --color-border-light-darker: #ded7d7; + --color-border-nav: #00488b; + --color-background-light-darker: #ded7d7; + --color-background-nav-darker: #00488b; + --color-background-alert-darker: #f95c20; + --color-background-bad: #c46178; + } } html, @@ -93,17 +92,24 @@ li.tree-folder span.title { margin-left: 0.25rem; } -:root.file_query .nav-pagination { - margin-top: 6rem; -} -:root.file_query ul.pagination a { - padding: 0 0.2rem 0 0.2rem; -} -:root.file_query .view-rss > .icon { - filter: brightness(0); -} -:root.file_query main > h1:first-child { - margin-top: 2rem; +:root.file_query { + .nav-pagination { + margin-top: 6rem; + } + + ul.pagination { + a { + padding: 0 0.2rem 0 0.2rem; + } + } + + .view-rss > .icon { + filter: brightness(0); + } + + main > h1:first-child { + margin-top: 2rem; + } } #slider-content #feed_update fieldset .form-group:last-child { @@ -117,16 +123,20 @@ li.tree-folder span.title { a { color: var(--color-text-nav); outline: none; -} -a#btn-subscription { - width: 76%; -} -a#btn-add { - width: 5%; + + &#btn-subscription { + width: 76%; + } + + &#btn-add { + width: 5%; + } } -img.icon:hover { - background: none; +img { + &.icon:hover { + background: none; + } } sup { @@ -145,16 +155,37 @@ legend { } label { - min-height: 25px; + min-height: var(--min-height-input); } -input:disabled, -select:disabled { +:is(textarea, input, select) { + min-height: var(--min-height-input); + margin-top: var(--margin-top-input); background-color: var(--color-background-light); + border: var(--border-input-default); + + &:focus { + border: 2px solid var(--color-background-dark); + outline: none; + } +} + +:is(input, select) { + &:invalid { + padding-left: 5px; + color: var(--color-text-bad); + border-left-color: var(--color-border-bad); + border-left-width: 5px; + box-shadow: none; + } + + &:disabled { + background-color: var(--color-background-light); + } } option { - padding: 0 0.5em; + padding: 0 .5em; } table { @@ -170,53 +201,72 @@ th { background-color: var(--color-background-light); } -form td, -form th { - font-weight: normal; - text-align: center; +form { + td, + th { + font-weight: normal; + text-align: center; + } } -.category .title.error::before { - display: inline-block; - padding-right: 7px; - width: 16px; - content: url(../Swage/icons/error.svg); +.category { + .title.error::before { + display: inline-block; + padding-right: 7px; + width: 16px; + content: url(../Swage/icons/error.svg); + } } .form-group { padding: 5px; border: 1px solid transparent; -} -.form-group:hover { - background-color: var(--color-background-light); - border: 1px solid var(--color-border-light); -} -.form-group.form-actions { - margin: 15px 0 25px; - padding: 5px 0; - background-color: var(--color-background-light-darker-transparent); - border-top: 3px solid var(--color-border-light-darker); -} -.form-group.form-actions .btn, .form-group.form-actions a { - margin-left: 1rem; -} -.form-group .group-name { - padding: 10px 0; - text-align: right; -} -.form-group .group-controls { - min-height: 25px; - padding: 5px 0; -} -.form-group .group-controls .control { - line-height: 2; + + &:hover { + background-color: var(--color-background-light); + border: 1px solid var(--color-border-light); + } + + &.form-actions { + margin: 15px 0 25px; + padding: 5px 0; + background-color: var(--color-background-light-darker-transparent); + border-top: 3px solid var(--color-border-light-darker); + + .btn, a { + margin-left: 1rem; + } + } + + .group-name { + padding: 10px 0; + text-align: right; + } + + .group-controls { + min-height: 25px; + padding: 5px 0; + + .control { + line-height: 2.0; + } + } } -.stick select { - margin-top: 0; +.form-group::after { + display: block; + clear: both; } -.stick.configure-feeds { - margin: 0.5rem 0 1rem 0.3rem; + +.stick { + select { + margin-top: 0; + } + + &.configure-feeds { + margin: 0.5rem 0 1rem 0.3rem; + width: var(--width-aside); + } } .btn { @@ -231,169 +281,228 @@ form th { vertical-align: middle; line-height: 1.5; text-decoration: none; -} -.btn.active, .btn:active, .btn:hover { - background-color: var(--color-background-nav-darker); - text-decoration: none; -} -.btn .icon { - filter: brightness(3); + + &.active, + &:active, + &:hover { + background-color: var(--color-background-nav-darker); + text-decoration: none; + } + + .icon { + filter: brightness(3); + } } .btn-important, .btn-attention { font-weight: normal; background-color: var(--color-background-alert); color: var(--color-text-light); -} -.btn-important:hover, -.btn-important :active, .btn-attention:hover, -.btn-attention :active { - background-color: var(--color-background-alert-darker) !important; -} -.manage-list .configure .icon { - filter: brightness(0.4); - vertical-align: sub; + &:hover, + :active { + background-color: var(--color-background-alert-darker) !important; + } } -.manage-list .configure:hover { - filter: invert(56%) sepia(87%) saturate(1185%) hue-rotate(327deg) brightness(104%) contrast(96%); + +.manage-list { + .configure { + .icon { + filter: brightness(0.4); + vertical-align: sub; + } + + &:hover { + filter: invert(56%) sepia(87%) saturate(1185%) hue-rotate(327deg) brightness(104%) contrast(96%); + } + } } .switch.active { background-color: var(--color-background-nav); -} -.switch.active:hover { - background-image: url("./icons/disabled-light.svg"); + + &:hover { + background-image: url('./icons/disabled-light.svg'); + } } .nav-list { font-size: 0.9rem; -} -.nav-list .item .nav-header { - padding: 0 1rem; - font-weight: bold; - background-color: var(--color-background-aside); - color: var(--color-text-light); - cursor: default; -} -.nav-list .item a:hover, -.nav-list .item .as-link:hover { - background-color: var(--color-background-nav-darker); - color: var(--color-text-light); -} -.nav-list .item.active { - background: var(--color-background-nav-darker); - color: var(--color-text-light); -} -.nav-list .item.active a, -.nav-list .item.active .as-link { - color: var(--color-text-light); -} -.nav-list .item > a, -.nav-list .item > .as-link { - padding: 0 1.5rem; -} -.nav-list .item .icon { - filter: brightness(3); -} -.nav-list .nav-form { - padding: 3px; - text-align: center; -} -.nav-list a:hover, -.nav-list .as-link:hover { - text-decoration: none; + + .item { + min-height: var(--min-height-nav-list); + line-height: var(--line-height-nav-list); + + .nav-header { + min-height: var(--min-height-nav-list); + line-height: var(--line-height-nav-list); + padding: 0 1rem; + font-weight: bold; + background-color: var(--color-background-aside); + color: var(--color-text-light); + cursor: default; + } + + a:hover, + .as-link:hover { + background-color: var(--color-background-nav-darker); + color: var(--color-text-light); + } + + &.active { + background: var(--color-background-nav-darker); + color: var(--color-text-light); + + a, + .as-link { + color: var(--color-text-light); + } + } + + > a, + > .as-link { + padding: 0 1.5rem; + } + + .icon { + filter: brightness(3); + } + } + + .nav-form { + padding: 3px; + text-align: center; + } + + a:hover, + .as-link:hover { + text-decoration: none; + } } .dropdown-menu { padding: 0.5rem 0 1rem 0; - font-size: 0.8rem; + font-size: var(--font-size-dropdown); text-align: left; border: none; background-color: var(--color-background-nav-darker); -} -.dropdown-menu .item > a, -.dropdown-menu .item > .as-link, -.dropdown-menu .item > span { - width: 96% !important; -} -.dropdown-menu .dropdown-header { - cursor: default; - padding: 0.5rem 10px 0.5rem 10px; - font-weight: bold; - color: var(--color-text-light); -} -.dropdown-menu .dropdown-header a, -.dropdown-menu .dropdown-header .as-link { - padding: 0.1rem 0.3rem 0.3rem 0.3rem; - position: absolute; - right: 5px; - margin-top: -3px; -} -.dropdown-menu .dropdown-header a:hover, -.dropdown-menu .dropdown-header .as-link:hover { - background-color: var(--color-background-nav); -} -.dropdown-menu .dropdown-section .dropdown-section-title { - cursor: default; - padding: 0.25rem 0.5rem 0.125rem 0.25rem; - font-weight: bold; - color: var(--color-text-light); -} -.dropdown-menu .dropdown-section .item a, -.dropdown-menu .dropdown-section .item .as-link { - padding: 0 22px; -} -.dropdown-menu .dropdown-section .item a:hover, -.dropdown-menu .dropdown-section .item .as-link:hover { - background-color: var(--color-background-nav); -} -.dropdown-menu > .item { - padding: 0 0 0 0.5rem; -} -.dropdown-menu > .item > a { - min-width: initial; - white-space: nowrap; -} -.dropdown-menu > .item > a:hover, -.dropdown-menu > .item > button:hover { - background-color: var(--color-background-nav); - color: var(--color-text-light); -} -.dropdown-menu > .item[aria-checked=true] > a::before { - font-weight: bold; - margin: 0 0 0 -14px; -} -.dropdown-menu .help a { - color: var(--color-text-light); - text-decoration: underline; - text-decoration-style: dotted; -} -.dropdown-menu .help a:hover { - text-decoration-style: solid; -} -.dropdown-menu .input select, -.dropdown-menu .input input { - margin: 0 auto 5px; - padding: 2px 5px; + + .item > a, + .item > .as-link, + .item > span { + width: 96% !important; + } + + .dropdown-header { + cursor: default; + padding: 0.5rem 10px 0.5rem 10px; + font-weight: bold; + color: var(--color-text-light); + + a, + .as-link { + padding: 0.1rem 0.3rem 0.3rem 0.3rem; + position: absolute; + right: 5px; + margin-top: -3px; + + &:hover { + background-color: var(--color-background-nav); + } + } + } + + .dropdown-section { + .dropdown-section-title { + cursor: default; + padding: 0.25rem 0.5rem 0.125rem 0.25rem; + font-weight: bold; + color: var(--color-text-light); + } + + .item { + a, + .as-link { + padding: var(--padding-dropdown); + + &:hover { + background-color: var(--color-background-nav); + } + } + } + } + + & > .item { + padding: 0 0 0 0.5rem; + } + + .item { + color: var(--color-text-light); + font-size: var(--font-size-dropdown); + line-height: var(--line-height-dropdown); + + > :is(a, .as-link, span, button) { + padding: var(--padding-dropdown); + color: var(--color-text-light); + font-size: var(--font-size-dropdown); + line-height: var(--line-height-dropdown); + } + + > a { + min-width: initial; + white-space: nowrap; + } + + > :is(a, button):hover { + background-color: var(--color-background-nav); + color: var(--color-text-light); + } + } + + & > .item[aria-checked="true"] > a::before { + font-weight: bold; + margin: 0 0 0 -14px; + } + + .help a { + color: var(--color-text-light); + text-decoration: underline; + text-decoration-style: dotted; + + &:hover { + text-decoration-style: solid; + } + } + + .input { + select, + input { + margin: 0 auto 5px; + padding: 2px 5px; + } + } } #dropdown-search-wrapper .dropdown-menu { padding-top: 1rem; padding-bottom: 0.25rem; -} -#dropdown-search-wrapper .dropdown-menu a { - padding: 0; -} -#dropdown-search-wrapper .dropdown-menu .stick.search { - width: 100%; -} -#dropdown-search-wrapper .dropdown-menu .stick.search input[type=search] { - width: 100%; - border: 0; -} -#dropdown-search-wrapper .dropdown-menu .stick.search .btn:hover { - filter: brightness(0.9); + + a { + padding: 0; + } + + .stick.search { + width: 100%; + + input[type="search"] { + width: 100%; + border: 0; + } + + .btn:hover { + filter: brightness(0.9); + } + } } .item ~ .dropdown-header, @@ -413,10 +522,11 @@ li.item.separator { font-size: 0.9em; border: none; text-shadow: 0 0 1px var(--color-text-shadow-light); -} -.alert > a { - color: inherit; - text-decoration: underline; + + > a { + color: inherit; + text-decoration: underline; + } } .alert-head { @@ -447,9 +557,10 @@ li.item.separator { .pagination { background: var(--color-background-light-darker); color: var(--color_text); -} -.pagination .item a { - color: var(--color_text); + + .item a { + color: var(--color_text); + } } #load_more.loading, @@ -457,44 +568,52 @@ li.item.separator { background: url(loader.gif) center center no-repeat var(--color-background-aside); } + .content { padding: 20px 10px; -} -.content hr { - margin: 30px 10px; - background: var(--color-background-light-darker); - height: 1px; - border: 0; - box-shadow: 0 2px 5px var(--color-box-shadow-light); -} -.content pre { - background-color: var(--color-background-dark); - color: var(--color-text-light); -} -.content pre code { - background: transparent; - color: var(--color-text-light); - border: none; -} -.content code { - background-color: var(--color-background-light); - color: var(--color-text-bad); - border-color: var(--color-border-light); -} -.content blockquote { - margin: 0; - padding: 5px 20px; - background-color: var(--color-background-light); - display: block; - color: var(--color-text-light-darker); - border-top: 1px solid var(--color-border-light-darker); - border-bottom: 1px solid var(--color-border-light-darker); -} -.content blockquote p { - margin: 0; -} -.content > h1.title > a { - color: var(--color_text); + + hr { + margin: 30px 10px; + background: var(--color-background-light-darker); + height: 1px; + border: 0; + box-shadow: 0 2px 5px var(--color-box-shadow-light); + } + + pre { + background-color: var(--color-background-dark); + color: var(--color-text-light); + + code { + background: transparent; + color: var(--color-text-light); + border: none; + } + } + + code { + background-color: var(--color-background-light); + color: var(--color-text-bad); + border-color: var(--color-border-light); + } + + blockquote { + margin: 0; + padding: 5px 20px; + background-color: var(--color-background-light); + display: block; + color: var(--color-text-light-darker); + border-top: 1px solid var(--color-border-light-darker); + border-bottom: 1px solid var(--color-border-light-darker); + + p { + margin: 0; + } + } + + > h1.title > a { + color: var(--color_text); + } } main.post .drop-section li.item.feed a .icon { @@ -507,63 +626,83 @@ main.post .drop-section li.item.feed a:hover .icon { .box { border: 1px solid var(--color-border-light-darker); -} -.box .box-title { - margin: 0; - background-color: var(--color-background-aside); - color: var(--color-text-light); - border-bottom: 1px solid var(--color-border-light-darker); -} -.box .box-title a { - color: var(--color-text-light); -} -.box .box-title .configure { - margin-right: 4px; -} -.box .box-title .configure .icon:hover { - filter: invert(56%) sepia(87%) saturate(1185%) hue-rotate(327deg) brightness(104%) contrast(96%); -} -.box .box-content { - max-height: 260px; -} -.box .box-content .item { - padding: 0 10px; - font-size: 0.9rem; -} -.box .box-content .item .configure .icon { - vertical-align: middle; - filter: brightness(0.4); -} -.box .box-content .item .configure .icon:hover { - filter: invert(56%) sepia(87%) saturate(1185%) hue-rotate(327deg) brightness(104%) contrast(96%); -} -.box.category .box-title .title { - font-weight: normal; - text-decoration: none; - text-align: left; -} -.box.category:not([data-unread="0"]) .box-title { - background-color: var(--color-background-nav); -} -.box.category:not([data-unread="0"]) .box-title:active { - background: var(--color-background-nav-darker); -} -.box.category:not([data-unread="0"]) .box-title .title { - font-weight: bold; - color: var(--color-text-light); -} -.box.category .title:not([data-unread="0"])::after { - background: none; - border: 0; - box-shadow: none; - position: absolute; - top: 5px; - right: 10px; - font-weight: bold; - text-shadow: none; -} -.box.visible-semi { - border-style: solid; + + .box-title { + margin: 0; + background-color: var(--color-background-aside); + color: var(--color-text-light); + border-bottom: 1px solid var(--color-border-light-darker); + + a { + color: var(--color-text-light); + } + + .configure { + margin-right: 4px; + + .icon { + &:hover { + filter: invert(56%) sepia(87%) saturate(1185%) hue-rotate(327deg) brightness(104%) contrast(96%); + } + } + } + } + + .box-content { + max-height: 260px; + + .item { + padding: 0 10px; + font-size: 0.9rem; + + .configure { + .icon { + vertical-align: middle; + filter: brightness(0.4); + + &:hover { + filter: invert(56%) sepia(87%) saturate(1185%) hue-rotate(327deg) brightness(104%) contrast(96%); + } + } + } + } + } + + &.category { + .box-title .title { + font-weight: normal; + text-decoration: none; + text-align: left; + } + + &:not([data-unread="0"]) .box-title { + background-color: var(--color-background-nav); + + &:active { + background: var(--color-background-nav-darker); + } + + .title { + font-weight: bold; + color: var(--color-text-light); + } + } + + .title:not([data-unread="0"])::after { + background: none; + border: 0; + box-shadow: none; + position: absolute; + top: 5px; + right: 10px; + font-weight: bold; + text-shadow: none; + } + } + + &.visible-semi { + border-style: solid; + } } .tree { @@ -575,27 +714,32 @@ main.post .drop-section li.item.feed a:hover .icon { background-color: var(--color-background-aside); font-size: 1rem; position: relative; -} -.aside_feed .tree-folder-title .title { - background: inherit; - color: var(--color-text-light); -} -.aside_feed .tree-folder-title .title:hover { - text-decoration: none; + + .title { + background: inherit; + color: var(--color-text-light); + + &:hover { + text-decoration: none; + } + } } .tree-folder-items { background-color: var(--color-background-aside); -} -.tree-folder-items > .item { - font-size: 0.8rem; -} -.tree-folder-items > .item.active { - background-color: var(--color-background-nav-darker); -} -.tree-folder-items > .item > a { - text-decoration: none; - color: var(--color-text-light); + + > .item { + font-size: 0.8rem; + + &.active { + background-color: var(--color-background-nav-darker); + } + + > a { + text-decoration: none; + color: var(--color-text-light); + } + } } .item.search { @@ -604,94 +748,127 @@ main.post .drop-section li.item.feed a:hover .icon { .header { height: auto; -} -.header > .item { - padding: 0; - vertical-align: middle; -} -.header > .item.title { - position: absolute; - text-align: center; -} -.header > .item.title a { - padding: 0 1rem; -} -.header > .item.title a:hover .logo { - filter: grayscale(100%) brightness(100) opacity(90%); -} -.header > .item.title .logo { - display: inline-block; - height: 26px; - vertical-align: top; - position: relative; - top: 5px; - filter: grayscale(100%) brightness(100); -} -.header .item.configure { - position: fixed; - right: 0; - z-index: 95; - width: 35px; - text-align: center; - line-height: 0.8; -} -.header .item.configure > .icon { - filter: brightness(3); - margin-right: 5px; - margin-top: 3px; -} -.header .item.configure .dropdown .dropdown-menu { - max-height: calc(100vh - 45px); - overflow: auto; -} -.header .item.configure .dropdown .dropdown-menu .icon { - filter: brightness(3); + + > .item { + padding: 0; + vertical-align: middle; + + &.title { + width: var(--width-aside); + position: absolute; + text-align: center; + + a { + padding: 0 1rem; + + &:hover { + .logo { + filter: grayscale(100%) brightness(100) opacity(90%); + } + } + } + + .logo { + display: inline-block; + height: 26px; + vertical-align: top; + position: relative; + top: 5px; + filter: grayscale(100%) brightness(100); + } + } + } + + .item.configure { + position: fixed; + right: 0; + z-index: 95; + width: 35px; + text-align: center; + line-height: 0.8; + + > .icon { + filter: brightness(3); + margin-right: 5px; + margin-top: 3px; + } + + .dropdown .dropdown-menu { + max-height: calc(100vh - 45px); + overflow: auto; + + .icon { + filter: brightness(3); + } + } + } } .aside { background-color: var(--color-background-aside); padding-top: 2.5rem; -} -.aside.aside_feed .tree { - margin: 0 0 50px; -} -.aside.aside_feed .tree-folder .tree-folder-title:hover, -.aside.aside_feed .tree-folder .item.feed:hover { - background-color: var(--color-background-nav-darker); -} -.aside.aside_feed .nav-form input, -.aside.aside_feed .nav-form select { - width: 140px; -} -.aside.aside_feed .nav-form .dropdown .dropdown-menu { - right: -20px; -} -.aside.aside_feed .nav-form .dropdown .dropdown-menu::after { - right: 33px; + width: var(--width-aside); + + &.aside_feed { + .tree { + margin: 0 0 50px; + } + + .tree-folder { + .tree-folder-title, + .item.feed { + &:hover { + background-color: var(--color-background-nav-darker); + } + } + } + + .nav-form { + input, + select { + width: 140px; + } + + .dropdown { + .dropdown-menu { + right: -20px; + } + + .dropdown-menu::after { + right: 33px; + } + } + } + } } #aside_feed > ul > li:first-child { margin-top: 0.4rem; } -.aside_feed .category .title:not([data-unread="0"])::after { - margin: 0.5rem 0 0 0; - background-color: var(--color-background-nav-darker); - color: var(--color-text-light); -} -.aside_feed .feed .item-title:not([data-unread="0"])::after { - background-color: var(--color-background-nav); - color: var(--color-text-light); -} -.aside_feed .tree-folder-items .dropdown-menu::after { - left: 2px; -} -.aside_feed .about { - margin: 0.2rem 0 1rem 0; - display: block; - font-size: 0.8em; - text-align: center; - font-style: italic; +.aside_feed { + .category .title:not([data-unread="0"])::after { + margin: 0.5rem 0 0 0; + background-color: var(--color-background-nav-darker); + color: var(--color-text-light); + } + + .feed .item-title:not([data-unread="0"])::after { + background-color: var(--color-background-nav); + color: var(--color-text-light); + } + + .tree-folder-items .dropdown-menu::after { + left: 2px; + } + + .about { + margin: 0.2rem 0 1rem 0; + display: block; + font-size: 0.8em; + text-align: center; + font-style: italic; + } } .toggle_aside { @@ -702,22 +879,31 @@ main.post .drop-section li.item.feed a:hover .icon { border-bottom: 1px solid var(--frss-border-color); } -.reader .aside .toggle_aside { - background-color: var(--color-background-aside); -} -.reader .aside .toggle_aside .icon { - filter: brightness(3); -} -.reader .aside .toggle_aside:hover { - background-color: var(--color-background-nav); +.reader { + .aside { + .toggle_aside { + background-color: var(--color-background-aside); + + .icon { + filter: brightness(3); + } + + &:hover { + background-color: var(--color-background-nav); + } + } + } } .post { font-size: 0.9em; -} -.post input.long { - height: 33px; - margin-top: 0px; + + input { + &.long { + height: 33px; + margin-top: 0px; + } + } } #global { @@ -733,16 +919,19 @@ main.post .drop-section li.item.feed a:hover .icon { z-index: 900; left: 0; line-height: 1.5; -} -#new-article > a { - padding: 1rem; - line-height: 1.5; - font-weight: bold; - color: var(--color-text-light); -} -#new-article > a:hover { - text-decoration: none; - background-color: var(--color-background-nav-darker); + width: var(--width-aside); + + > a { + padding: 1rem; + line-height: 1.5; + font-weight: bold; + color: var(--color-text-light); + + &:hover { + text-decoration: none; + background-color: var(--color-background-nav-darker); + } + } } .transition { @@ -750,16 +939,20 @@ main.post .drop-section li.item.feed a:hover .icon { font-weight: bold; line-height: 3; text-align: center; -} -.transition .name { - display: none; + + .name { + display: none; + } } -.nav a, -.nav .as-link { - color: var(--color-text-light); +.nav { + a, + .as-link { + color: var(--color-text-light); + } } + .nav_menu { padding: 0; width: 100%; @@ -769,69 +962,86 @@ main.post .drop-section li.item.feed a:hover .icon { position: sticky; top: 0; z-index: 90; -} -.nav_menu .item.search { - display: inline-block; - position: absolute; - right: 40px; -} -.nav_menu .item.search input { - border-width: 0; - line-height: 1.95; -} -.nav_menu #toggle-unread .icon, -.nav_menu #toggle-starred .icon { - filter: brightness(1); + + .item.search { + display: inline-block; + position: absolute; + right: 40px; + + input { + border-width: 0; + line-height: 1.95; + } + } + + #toggle-unread, + #toggle-starred { + .icon { + filter: brightness(1); + } + } } .flux { padding-right: 10px; background-color: var(--color-background-light); -} -.flux::after { - margin: 0 auto; - width: 90%; - border-top: 1px solid var(--color-border-light-darker); -} -.flux .flux_header:hover, -.flux .current { - background-color: var(--color-background-hover); -} -.flux .flux_header:hover:not(.current):hover .item .title, -.flux .current:not(.current):hover .item .title { - background-color: var(--color-background-hover); -} -.flux.favorite:not(.current) { - background-color: var(--color-background-stared); -} -.flux.favorite:not(.current):hover .item .title { - background-color: var(--color-background-stared); -} -.flux.not_read:not(.current) { - background-color: var(--color-background-unread); -} -.flux.not_read:not(.current):hover .item .title { - background-color: var(--color-background-unread); -} -.flux .flux_header .date, -.flux .flux_content .bottom .date { - color: var(--color-text-light-darker); -} -.flux .bottom { - font-size: 0.8rem; - text-align: center; -} -.flux label { - color: var(--color-text-light); - cursor: pointer; + + &::after { + display: block; + clear: both; + margin: 0 auto; + width: 90%; + border-top: 1px solid var(--color-border-light-darker); + } + + .flux_header:hover, + .current { + background-color: var(--color-background-hover); + + &:not(.current):hover .item .title { + background-color: var(--color-background-hover); + } + } + + &.favorite:not(.current) { + background-color: var(--color-background-stared); + + &:hover .item .title { + background-color: var(--color-background-stared); + } + } + + &.not_read:not(.current) { + background-color: var(--color-background-unread); + + &:hover .item .title { + background-color: var(--color-background-unread); + } + } + + .flux_header .date, + .flux_content .bottom .date { + color: var(--color-text-light-darker); + } + + .bottom { + font-size: 0.8rem; + text-align: center; + } + + label { + color: var(--color-text-light); + cursor: pointer; + } } .flux_header { font-size: 0.8rem; cursor: pointer; -} -.flux_header .title { - font-size: 0.9rem; + + .title { + font-size: 0.9rem; + } } .notification { @@ -848,133 +1058,169 @@ main.post .drop-section li.item.feed a:hover .icon { bottom: 48px; left: 0; top: auto; -} -.notification.good, .notification.bad { - color: var(--color-text-light); -} -.notification.good { - background-color: var(--color-background-good); -} -.notification.good a.close:hover { - background-color: var(--color-background-good); -} -.notification.bad { - background-color: var(--color-background-bad); -} -.notification.bad a.close:hover { - background-color: var(--color-background-bad); -} -.notification a.close { - display: none; + width: var(--width-aside); + + &.good, + &.bad { + color: var(--color-text-light); + } + + &.good { + background-color: var(--color-background-good); + + a.close:hover { + background-color: var(--color-background-good); + } + } + + &.bad { + background-color: var(--color-background-bad); + + a.close:hover { + background-color: var(--color-background-bad); + } + } + + a.close { + display: none; + } } #bigMarkAsRead.big { text-align: center; text-decoration: none; background: var(--color-background-light-darker); -} -#bigMarkAsRead.big:hover { - background-color: var(--color-background-aside); - color: var(--color-text-light); + + &:hover { + background-color: var(--color-background-aside); + color: var(--color-text-light); + } } #nav_entries { + width: var(--width-aside); background-color: var(--color-background-aside); } .stat { margin: 10px 0 20px; -} -.stat th, -.stat td, -.stat tr { - border: none; -} -.stat > table td, -.stat > table th { - border-bottom: 1px solid var(--color-border-light-darker); + + th, + td, + tr { + border: none; + } + + > table { + td, + th { + border-bottom: 1px solid var(--color-border-light-darker); + } + } } #overlay { z-index: 100; -} -#overlay .close .icon { - filter: brightness(3); + + .close .icon { + filter: brightness(3); + } } #panel { z-index: 100; -} -#panel .nav_menu { - position: relative; -} -body:not(:has(nav#aside_feed)) #global { - height: 0; -} -body:not(:has(nav#aside_feed)) .logo { - right: 30px; -} -body:not(:has(nav#aside_feed)) .header { - background-color: var(--color-background-nav); - height: 2.4rem; - position: relative; -} -body:not(:has(nav#aside_feed)) .header > .item.configure { - width: auto; - position: absolute; - white-space: nowrap; + .nav_menu { + position: relative; + } } -body:not(:has(nav#aside_feed)) .header > .item.configure .icon { - filter: brightness(3); + +body:not(:has(nav#aside_feed)) { + #global { + height: 0; + } + + .logo { + right: 30px; + } + + .header { + background-color: var(--color-background-nav); + height: 2.4rem; + position: relative; + + > .item { + &.configure { + width: auto; + position: absolute; + white-space: nowrap; + + .icon { + filter: brightness(3); + } + } + } + } } .controller_error div.alert-error { margin-top: 3rem; } -body.register form div:last-child > a { - float: right; - position: relative; - right: 0.2rem; +body.register { + form div:last-child > a { + float: right; + position: relative; + right: 0.2rem; + } } a.signin { color: var(--color-text-light); font-size: 70%; + position: absolute; top: 0.5rem; right: 1.8rem; text-wrap: nowrap; transform: scale(1.5); -} -a.signin .icon { - filter: brightness(3); -} -.log-item.log-error { - background-color: var(--color-background-bad); - color: var(--color-text-light); -} -.log-item.log-warning { - background-color: var(--color-background-alert); - color: var(--color-text-light); -} -.log-item.log-debug { - background: var(--color-background-dark); - color: var(--color-text-light); + .icon { + filter: brightness(3); + } } -body.reader #nav_menu_toggle_aside { - margin-top: -2px; - height: 32px; -} -body.reader nav.aside_feed > a.toggle_aside { - text-align: center; +.log-item { + &.log-error { + background-color: var(--color-background-bad); + color: var(--color-text-light); + } + + &.log-warning { + background-color: var(--color-background-alert); + color: var(--color-text-light); + } + + &.log-debug { + background: var(--color-background-dark); + color: var(--color-text-light); + } } -body.reader .aside:target { - width: 231px; - padding-top: 0; + +body.reader { + #nav_menu_toggle_aside { + margin-top: -2px; + height: 32px; + } + + nav.aside_feed > a.toggle_aside { + text-align: center; + } + + .aside:target { + width: var(--width-aside); + padding-top: 0; + } } main.global { @@ -985,254 +1231,335 @@ main.global { margin-top: 0.4rem; } -.labels span.emptyLabels { - color: white; - margin-left: 1rem; -} -.labels ul.dropdown-menu-scrollable > li:nth-child(3) { - margin-top: 0.5rem; +.labels { + span.emptyLabels { + color: white; + margin-left: 1rem; + } + + ul.dropdown-menu-scrollable > li:nth-child(3) { + margin-top: 0.5rem; + } } @media (max-width: 840px) { - body:not(.formLogin, .register) .header .item .title { - display: none; - } - body.normal .item.configure, body.reader .item.configure, body.global .item.configure { - right: 76px; + body:not(.formLogin, .register) { + .header { + .item .title { + display: none; + } + } } - body.normal a.signin, body.reader a.signin, body.global a.signin { - right: 0; + + body.normal, body.reader, body.global { + .item.configure { + right: 76px; + } + + a.signin { + right: 0; + } } - .horizontal-list .dropdown { - position: inherit !important; + + .horizontal-list { + .dropdown { + position: inherit !important; + } } + #nav_menu_sort, -#nav_menu_sort .dropdown-menu, -#nav_menu_sort .dropdown, -#toggle-order { + #nav_menu_sort .dropdown-menu, + #nav_menu_sort .dropdown, + #toggle-order { position: fixed; right: 0; } + #nav_menu_sort .dropdown-menu, -#nav_menu_read_all .dropdown-menu, -#dropdown-search-wrapper .dropdown-menu, -#nav_menu_queries .dropdown-menu { + #nav_menu_read_all .dropdown-menu, + #dropdown-search-wrapper .dropdown-menu, + #nav_menu_queries .dropdown-menu { top: 4.4rem; } + #nav_menu_sort .dropdown-menu, -#nav_menu_read_all .dropdown-menu, -#nav_menu_actions .dropdown-menu { + #nav_menu_read_all .dropdown-menu, + #nav_menu_actions .dropdown-menu { position: fixed; } - body:not(.normal):not(.reader):not(.add) nav.configure a.dropdown-toggle { - position: fixed; - top: 0; - } - body:not(.normal):not(.reader):not(.add):not(.global) .nav_menu { - height: 2.2rem; - } - body:not(.normal):not(.reader):not(.add):not(.global) nav.configure a.dropdown-toggle { - right: 0; - } - body:not(.normal):not(.reader):not(.add).global nav.configure a.dropdown-toggle { - right: 2.4rem; - } - body.repartition .nav_menu { - position: fixed; - height: 3rem !important; - } - body.repartition main.post { - margin-top: 4rem; - } - body.repartition .nav_menu .btn { - display: block; + + body:not(.normal):not(.reader):not(.add) { + nav.configure a.dropdown-toggle { + position: fixed; + top: 0; + } + + &:not(.global) { + .nav_menu { + height: 2.2rem; + } + + nav.configure a.dropdown-toggle { + right: 0; + } + } + + &.global { + nav.configure a.dropdown-toggle { + right: 2.4rem; + } + } } - body.repartition .nav_menu #feed_select { - padding: 0; - display: block; - margin-left: 5rem; - margin-bottom: 0.5rem; + + body.repartition { + .nav_menu { + position: fixed; + height: 3rem !important; + } + + main.post { + margin-top: 4rem; + } + + .nav_menu .btn { + display: block; + } + + .nav_menu #feed_select { + padding: 0; + display: block; + margin-left: 5rem; + margin-bottom: 0.5rem; + } } + .form-group .group-name { padding-bottom: 0; text-align: left; } + .dropdown { position: relative; + + .dropdown-menu { + width: auto; + } } - .dropdown .dropdown-menu { - width: auto; - } + #new-article { margin-top: 2rem; width: 100%; } + .header { display: table; + + .item { + padding: 0; + } + + .item.configure { + padding: 0; + position: fixed; + + > .icon { + margin-top: 5px; + } + } } - .header .item { - padding: 0; - } - .header .item.configure { - padding: 0; - position: fixed; - } - .header .item.configure > .icon { - margin-top: 5px; - } + button.read_all.btn { display: none; } + .flux .item.manage, -.flux_header .item.website { + .flux_header .item.website { width: 35px; text-align: center; } + .flux:not(.current):hover .item .title { top: auto !important; } + .aside { padding: 0; width: 0; transition: width 200ms linear; + + .toggle_aside { + background-color: var(--color-background-aside); + + &:hover { + background-color: var(--color-background-nav); + } + + .icon { + filter: brightness(3); + } + } + + &.aside_feed .configure-feeds { + display: flex; + margin-top: 0; + margin-left: auto; + margin-right: auto; + } + + &:target { + width: 78% !important; + z-index: 1000; + } } - .aside .toggle_aside { - background-color: var(--color-background-aside); - } - .aside .toggle_aside:hover { - background-color: var(--color-background-nav); - } - .aside .toggle_aside .icon { - filter: brightness(3); - } - .aside.aside_feed .configure-feeds { - display: flex; - margin-top: 0; - margin-left: auto; - margin-right: auto; - } - .aside:target { - width: 78% !important; - z-index: 1000; - } - #slider .toggle_aside { - background-color: var(--color-background-aside); - } - #slider .toggle_aside:hover { - background-color: var(--color-background-nav); - } - #slider .toggle_aside .icon { - filter: brightness(3); + + #slider { + .toggle_aside { + background-color: var(--color-background-aside); + + &:hover { + background-color: var(--color-background-nav); + } + + .icon { + filter: brightness(3); + } + } } + .nav_menu { height: 71px; + + .btn { + margin: 0; + } + + .stick, + .group { + margin: 0; + + .btn { + margin: 0; + } + } + + .item.search { + top: 3px; + margin-left: 77px; + width: calc(100% - 4 * 38px); + position: relative; + + form { + display: block; + } + + input { + width: 100%; + } + } } - .nav_menu .btn { - margin: 0; - } - .nav_menu .stick, -.nav_menu .group { - margin: 0; - } - .nav_menu .stick .btn, -.nav_menu .group .btn { - margin: 0; - } - .nav_menu .item.search { - top: 3px; - margin-left: 77px; - width: calc(100% - 152px); - position: relative; - } - .nav_menu .item.search form { - display: block; - } - .nav_menu .item.search input { - width: 100%; - } + #overlay .close, -.dropdown-menu .toggle_aside { + .dropdown-menu .toggle_aside { background-color: var(--color-background-aside); display: block; height: 50px; line-height: 3.5; text-align: center; padding-right: 10px; + + &:hover { + background-color: var(--color-background-nav); + } } - #overlay .close:hover, -.dropdown-menu .toggle_aside:hover { - background-color: var(--color-background-nav); - } + .dropdown-target:target ~ .dropdown-toggle::after, -.dropdown-target:target ~ .dropdown-toggle.btn::after { + .dropdown-target:target ~ .dropdown-toggle.btn::after { display: none; } + .share .dropdown-menu { right: 3%; left: auto; } + .transition .name { font-size: 1.1rem; } + .notification { width: 100%; + + a.close { + background: transparent; + display: block; + left: 0; + + &:hover { + opacity: 0.5; + } + + .icon { + display: none; + } + } } - .notification a.close { - background: transparent; - display: block; - left: 0; - } - .notification a.close:hover { - opacity: 0.5; - } - .notification a.close .icon { - display: none; - } + #nav_entries { width: 100% !important; } + .post { padding-left: 15px; padding-right: 15px; } + div#stream { margin-top: 0px; } + a.btn.toggle_aside { position: absolute; top: 0; } + form#mark-read-menu, -a#actualize, -div#nav_menu_actions, -div#nav_menu_views { + a#actualize, + div#nav_menu_actions, + div#nav_menu_views { position: absolute; } + form#mark-read-menu { right: 38px; top: 0; } + a#actualize { right: 0; top: 0; } + a#toggle-order, -div#nav_menu_actions, -div#nav_menu_views { + div#nav_menu_actions, + div#nav_menu_views { top: 36px; } + div#nav_menu_actions { left: 0px; } + div#nav_menu_views { right: 32px; } } + @media (max-width: 410px) { .nav_menu .stick { margin: 0; } } + button.as-link { outline: none; } @@ -1246,63 +1573,85 @@ button.as-link { font-weight: bold; } -.feed.item.empty { - color: var(--color-text-alert); -} -.feed.item.empty.active { - background-color: var(--color-background-alert); - color: var(--color-text-light); -} -.feed.item.empty.active > a { - color: var(--color-text-light); -} -.feed.item.empty > a { - color: var(--color-text-alert); -} -.feed.item.error { - color: var(--color-text-bad-lighter); -} -.feed.item.error.active { - background-color: var(--color-background-bad); - color: var(--color-text-light); -} -.feed.item.error.active > a { - color: var(--color-text-light); -} -.feed.item.error > a { - color: var(--color-text-bad-lighter); +.feed.item { + &.empty { + color: var(--color-text-alert); + + &.active { + background-color: var(--color-background-alert); + color: var(--color-text-light); + + > a { + color: var(--color-text-light); + } + } + + > a { + color: var(--color-text-alert); + } + } + + &.error { + color: var(--color-text-bad-lighter); + + &.active { + background-color: var(--color-background-bad); + color: var(--color-text-light); + + > a { + color: var(--color-text-light); + } + } + + > a { + color: var(--color-text-bad-lighter); + } + } } #stream.reader .flux { background-color: var(--color-background-light); color: var(--color-text-aside); border: none; -} -#stream.reader .flux::after { - border: none; -} -#stream.reader .flux .flux_content { - border-color: var(--color-border-grey); -} -#stream.reader .flux .author { - color: var(--color-text-light-darker); -} -#nav_menu_actions ul.dropdown-menu { - left: 0; - right: auto; -} -#nav_menu_actions ul.dropdown-menu::after { - display: none; + &::after { + border: none; + } + + .flux_content { + border-color: var(--color-border-grey); + } + + .author { + color: var(--color-text-light-darker); + } } -#nav_menu_actions .dropdown.only-mobile { - display: initial !important; + +#nav_menu_actions { + ul.dropdown-menu { + left: 0; + right: auto; + + &::after { + display: none; + } + } + + .dropdown.only-mobile { + display: initial !important; + } } -#nav_menu_read_all ul.dropdown-menu::after { - display: none; +#nav_menu_read_all { + ul.dropdown-menu { + &::after { + display: none; + } + } } -#slider label { - min-height: initial; +#slider { + label { + min-height: initial; + } } diff --git a/p/themes/Swage/swage.css.map b/p/themes/Swage/swage.css.map deleted file mode 100644 index a6d1b327f..000000000 --- a/p/themes/Swage/swage.css.map +++ /dev/null @@ -1 +0,0 @@ -{"version":3,"sourceRoot":"","sources":["swage.scss"],"names":[],"mappings":"AAkBA;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EAEA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;;;AAKD;AAAA;EACC;EACA;EACA;EACA;EACA;EACA;EACA;;;AAED;AAAA;EACC;EACA;;;AAGD;AAAA;EACC;EACA;EACA;EACA;EACA;;;AAGD;EACC;EACA;;;AAGD;AAAA;AAAA;AAAA;EACC;EACA;EACA;EACA;;;AAGD;EACC;EACA;;;AAGD;EACC;;;AAID;AAAA;EAEC;EACA;;;AAGD;AAAA;EAEC;;;AAIA;EACC;;AAIA;EACC;;AAIF;EACC;;AAGD;EACC;;;AAIF;EACC;;;AAGD;EACC;;;AAGD;EACC;EACA;;AAEA;EACC;;AAGD;EACC;;;AAKD;EACC;;;AAIF;EACC;;;AAGD;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGD;EACC;;;AAGD;EACC;EACA;;;AAeA;AAAA;EACC;;;AAIF;EACC;EACA;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;AAAA;EAEC;;;AAGD;EACC;;;AAIA;AAAA;EAEC;EACA;;;AAKD;EACC;EACA;EACA;EACA;;;AAIF;EACC;EACA;;AAEA;EACC;EACA;;AAGD;EACC;EACA;EACA;EACA;;AAEA;EACC;;AAIF;EACC;EACA;;AAGD;EACC;EACA;;AAEA;EACC;;;AAWF;EACC;;AAGD;EACC;;;AAMF;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EAGC;EACA;;AAGD;EACC;;;AAIF;EACC;EACA;EACA;;AAEA;AAAA;AAAA;EAEC;;;AAMA;EACC;EACA;;AAGD;EACC;;;AAKH;EACC;;AAEA;EACC;;;AAIF;EACC;;AAMC;EAGC;EACA;EACA;EACA;EACA;;AAGD;AAAA;EAEC;EACA;;AAGD;EACC;EACA;;AAEA;AAAA;EAEC;;AAIF;AAAA;EAEC;;AAGD;EACC;;AAIF;EACC;EACA;;AAGD;AAAA;EAEC;;;AAIF;EACC;EACA;EACA;EACA;EACA;;AAEA;AAAA;AAAA;EAGC;;AAGD;EACC;EACA;EACA;EACA;;AAEA;AAAA;EAEC;EACA;EACA;EACA;;AAEA;AAAA;EACC;;AAMF;EACC;EACA;EACA;EACA;;AAIA;AAAA;EAEC;;AAEA;AAAA;EACC;;AAOH;EAGC;;AAUA;EACC;EACA;;AAGD;AAAA;EAEC;EACA;;AAIF;EACC;EACA;;AAIF;EACC;EACA;EACA;;AAEA;EACC;;AAKD;AAAA;EAEC;EACA;;;AAKH;EACC;EACA;;AAEA;EACC;;AAGD;EACC;;AAEA;EACC;EACA;;AAGD;EACC;;;AAKH;AAAA;EAEC;EACA;;;AAGD;EACC;;;AAGD;EACC;EACA;EACA;EACA;EACA;EACA;;AAEA;EACC;EACA;;;AAIF;EACC;;;AAGD;AAAA;AAAA;EAGC;;;AAGD;EACC;EACA;;;AAGD;EACC;EACA;;;AAGD;EACC;EACA;;;AAGD;EACC;EACA;;AAEA;EACC;;;AAIF;AAAA;EAEC;;;AAID;EACC;;AAEA;EACC;EACA;EACA;EACA;EACA;;AAGD;EACC;EACA;;AAEA;EACC;EACA;EACA;;AAIF;EACC;EACA;EACA;;AAGD;EACC;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACC;;AAIF;EACC;;;AAIF;EACC;;;AAGD;EACC;;;AAGD;EACC;;AAEA;EACC;EACA;EACA;EACA;;AAEA;EACC;;AAGD;EACC;;AAGC;EACC;;AAMJ;EACC;;AAEA;EACC;EACA;;AAGC;EACC;EACA;;AAEA;EACC;;AAQJ;EACC;EACA;EACA;;AAGD;EACC;;AAEA;EACC;;AAGD;EACC;EACA;;AAIF;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAIF;EACC;;;AAIF;EACC;;;AAGD;EACC;EACA;EACA;EACA;;AAEA;EACC;EACA;;AAEA;EACC;;;AAKH;EACC;;AAEA;EACC;;AAEA;EACC;;AAGD;EACC;EACA;;;AAKH;EACC;;;AAGD;EACC;;AAEA;EACC;EACA;;AAEA;EAGC;EACA;;AAEA;EACC;;AAGC;EACC;;AAKH;EACC;EACA;EACA;EACA;EACA;EACA;;AAKH;EACC;EACA;EACA;EACA;EACA;EACA;;AAEA;EACC;EACA;EACA;;AAGD;EACC;EACA;;AAEA;EACC;;;AAMJ;EACC;EACA;;AAKC;EACC;;AAMC;AAAA;EACC;;AAMF;AAAA;EAEC;;AAIA;EACC;;AAGD;EACC;;;AAOL;EACC;;;AAIA;EACC;EACA;EACA;;AAGD;EACC;EACA;;AAGD;EACC;;AAGD;EACC;EACA;EACA;EACA;EACA;;;AAIF;EACC;;;AAGD;EACC;;;AAKC;EACC;;AAEA;EACC;;AAGD;EACC;;;AAMJ;EACC;;AAGC;EACC;EACA;;;AAKH;EACC;;;AAGD;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAIA;EACC;EACA;EACA;EACA;;AAEA;EACC;EACA;;;AAKH;EACC;EACA;EACA;EACA;;AAEA;EACC;;;AAKD;AAAA;EAEC;;;AAKF;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACC;EACA;EACA;;AAEA;EACC;EACA;;AAMD;AAAA;EACC;;;AAKH;EACC;EACA;;AAEA;EAGC;EACA;EACA;;AAGD;AAAA;EAEC;;AAEA;AAAA;EACC;;AAIF;EACC;;AAEA;EACC;;AAIF;EACC;;AAEA;EACC;;AAIF;AAAA;EAEC;;AAGD;EACC;EACA;;AAGD;EACC;EACA;;;AAIF;EACC;EACA;;AAEA;EACC;;;AAIF;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAIA;EAEC;;AAGD;EACC;;AAEA;EACC;;AAIF;EACC;;AAEA;EACC;;AAIF;EACC;;;AAIF;EACC;EACA;EACA;;AAEA;EACC;EACA;;;AAIF;EAGC;;;AAGD;EACC;;AAEA;AAAA;AAAA;EAGC;;AAIA;AAAA;EAEC;;;AAKH;EACC;;AAEA;EACC;;;AAIF;EACC;;AAEA;EACC;;;AAKD;EACC;;AAGD;EACC;;AAGD;EACC;EACA;EACA;;AAGC;EACC;EACA;EACA;;AAEA;EACC;;;AAOL;EACC;;;AAIA;EACC;EACA;EACA;;;AAIF;EACC;EACA;EAEA;EACA;EACA;EACA;EACA;;AAEA;EACC;;;AAKD;EACC;EACA;;AAGD;EACC;EACA;;AAGD;EACC;EACA;;;AAKD;EACC;EACA;;AAGD;EACC;;AAGD;EACC;EACA;;;AAIF;EACC;;;AAGD;EACC;;;AAIA;EACC;EACA;;AAGD;EACC;;;AAIF;EAGG;IACC;;EAMF;IACC;;EAGD;IACC;;EAKD;IACC;;EAIF;AAAA;AAAA;AAAA;IAIC;IACA;;EAGD;AAAA;AAAA;AAAA;IAIC;;EAGD;AAAA;AAAA;IAGC;;EAIA;IACC;IACA;;EAIA;IACC;;EAGD;IACC;;EAKD;IACC;;EAMF;IACC;IACA;;EAGD;IACC;;EAGD;IACC;;EAGD;IACC;IACA;IACA;IACA;;EAIF;IACC;IACA;;EAGD;IACC;;EAEA;IACC;;EAIF;IACC;IACA;;EAGD;IACC;;EAEA;IACC;;EAGD;IACC;IACA;;EAEA;IACC;;EAKH;IACC;;EAGD;AAAA;IAEC;IACA;;EAGD;IACC;;EAGD;IACC;IACA;IACA;;EAEA;IACC;;EAEA;IACC;;EAGD;IACC;;EAIF;IACC;IACA;IACA;IACA;;EAGD;IACC;IACA;;EAKD;IACC;;EAEA;IACC;;EAGD;IACC;;EAKH;IACC;;EAEA;IACC;;EAGD;AAAA;IAEC;;EAEA;AAAA;IACC;;EAIF;IACC;IACA;IACA;IACA;;EAEA;IACC;;EAGD;IACC;;EAKH;AAAA;IAEC;IACA;IACA;IACA;IACA;IACA;;EAEA;AAAA;IACC;;EAIF;AAAA;IAEC;;EAGD;IACC;IACA;;EAGD;IACC;;EAGD;IACC;;EAEA;IACC;IACA;IACA;;EAEA;IACC;;EAGD;IACC;;EAKH;IACC;;EAGD;IACC;IACA;;EAGD;IACC;;EAGD;IACC;IACA;;EAGD;AAAA;AAAA;AAAA;IAIC;;EAGD;IACC;IACA;;EAGD;IACC;IACA;;EAGD;AAAA;AAAA;IAGC;;EAGD;IACC;;EAGD;IACC;;;AAIF;EACC;IACC;;;AAIF;EACC;;;AAGD;EACC;;;AAGD;EACC;EACA;;;AAIA;EACC;;AAEA;EACC;EACA;;AAEA;EACC;;AAIF;EACC;;AAIF;EACC;;AAEA;EACC;EACA;;AAEA;EACC;;AAIF;EACC;;;AAKH;EACC;EACA;EACA;;AAEA;EACC;;AAGD;EACC;;AAGD;EACC;;;AAKD;EACC;EACA;;AAEA;EACC;;AAIF;EACC;;;AAMA;EACC;;;AAMF;EACC","file":"swage.css"} diff --git a/p/themes/Swage/swage.rtl.css b/p/themes/Swage/swage.rtl.css index cb11e8ec1..0020335f5 100644 --- a/p/themes/Swage/swage.rtl.css +++ b/p/themes/Swage/swage.rtl.css @@ -1,85 +1,84 @@ +@charset "UTF-8"; + +/* colors */ :root { - --color-text-light: #f5f3f3; - --color-text-light-darker: #988484; - --color-text-dark: #181621; - --color-text-nav: #00488b; - --color-text-aside: #22303d; - --color-text-alert: #fa8052; - --color-text-good: #5eaabf; - --color-text-bad: #b0425b; - --color-text-bad-lighter: #c46178; - --color-text-shadow-light: #f5f3f3; - --color-box-shadow-light: #ded7d7; - --color-border-light: #f5f3f3; - --color-border-light-darker: #ded7d7; - --color-border-grey: #e3e3e3; - --color-border-nav: #00488b; - --color-border-bad: #b0425b; - --color-background-light: #f5f3f3; - --color-background-light-darker: #ded7d7; - --color-background-light-darker-transparent: rgba(217, 217, 217, 0.7333333333); - --color-background-dark: #181621; - --color-background-nav: #0062be; - --color-background-nav-darker: #00488b; - --color-background-aside: #22303d; - --color-background-alert: #fa8052; - --color-background-alert-darker: #f95c20; - --color-background-good: #5eaabf; - --color-background-bad: #c46178; - --color-background-stared: #fff6da; - --color-background-unread: #fff3ed; - --color-background-hover: #fff; + --color-base-text: #181621; + --color-base-light: #f5f3f3; + --color-base-nav: #0062be; + --color-base-aside: #22303d; + --color-base-alert: #fa8052; + --color-base-good: #5eaabf; + --color-base-bad: #b0425b; + --color-base-grey: #e3e3e3; + --color-base-grey-transparent: #d9d9d9bb; + --color-base-stared: #fff6da; + --color-base-unread: #fff3ed; + --color-base-hover: #fff; + + --color-text-light: var(--color-base-light); + --color-text-light-darker: color(from var(--color-base-light) hsl h s calc(l - 40%)); + --color-text-dark: var(--color-base-text); + --color-text-nav: color(from var(--color-base-nav) hsl h s calc(l - 10%)); + --color-text-aside: var(--color-base-aside); + --color-text-alert: var(--color-base-alert); + --color-text-good: var(--color-base-good); + --color-text-bad: var(--color-base-bad); + --color-text-bad-lighter: color(from var(--color-base-bad) hsl h s calc(l + 10%)); + + --color-text-shadow-light: var(--color-base-light); + --color-box-shadow-light: color(from var(--color-base-light) hsl h s calc(l - 10%)); + + --color-border-light: var(--color-base-light); + --color-border-light-darker: color(from var(--color-base-light) hsl h s calc(l - 10%)); + --color-border-grey: var(--color-base-grey); + --color-border-nav: color(from var(--color-base-nav) hsl h s calc(l - 10%)); + --color-border-bad: var(--color-base-bad); + + --color-background-light: var(--color-base-light); + --color-background-light-darker: color(from var(--color-base-light) hsl h s calc(l - 10%)); + --color-background-light-darker-transparent: var(--color-base-grey-transparent); + --color-background-dark: var(--color-base-text); + --color-background-nav: var(--color-base-nav); + --color-background-nav-darker: color(from var(--color-base-nav) hsl h s calc(l - 10%)); + --color-background-aside: var(--color-base-aside); + --color-background-alert: var(--color-base-alert); + --color-background-alert-darker: color(from var(--color-base-alert) hsl h s calc(l - 10%)); + --color-background-good: var(--color-base-good); + --color-background-bad: color(from var(--color-base-bad) hsl h s calc(l + 10%)); + --color-background-stared: var(--color-base-stared); + --color-background-unread: var(--color-base-unread); + --color-background-hover: var(--color-base-hover); + --frss-scrollbar-handle: rgba(0, 0, 0, 0.1); --frss-scrollbar-handle-hover: rgba(0, 0, 0, 0.4); --frss-scrollbar-track: rgba(0, 0, 0, 0.05); --frss-scrollbar-track-hover: rgba(0, 0, 0, 0.1); -} - -input, -select, textarea { - min-height: 25px; - margin-top: 4px; - background-color: var(--color-background-light); - border: 2px solid var(--color-border-grey); -} - -input:focus, -select:focus, textarea:focus { - border: 2px solid var(--color-background-dark); - outline: none; -} - -input:invalid, -select:invalid { - padding-right: 5px; - color: var(--color-text-bad); - border-right-color: var(--color-border-bad); - border-right-width: 5px; - box-shadow: none; -} -.nav-list .item .nav-header, .nav-list .item { - min-height: 2.5em; - line-height: 2.5; -} - -.dropdown-menu > .item a, -.dropdown-menu > .item > span, -.dropdown-menu > .item > .as-link, -.dropdown-menu > .item button, .dropdown-menu > .item { - padding: 0 22px; - color: var(--color-text-light); - font-size: 0.8rem; - line-height: 2.5; -} - -.flux::after, .form-group::after { - display: block; - clear: both; -} - -#nav_entries, .notification, #new-article, .aside, .header > .item.title, .stick.configure-feeds { - width: 231px; + --min-height-input: 25px; + --margin-top-input: 4px; + --border-input-default: 2px solid var(--color-border-grey); + --min-height-nav-list: 2.5em; + --line-height-nav-list: 2.5; + --padding-dropdown: 0 22px; + --font-size-dropdown: 0.8rem; + --line-height-dropdown: 2.5; + --width-aside: 231px; +} + +/* Compatibility: CSS Color Module Level 4, Relative Color */ +@supports not (color: color(from white hsl h s calc(l - 10%))) { + :root { + --color-text-light-darker: #988484; + --color-text-nav: #00488b; + --color-text-bad-lighter: #c46178; + --color-box-shadow-light: #ded7d7; + --color-border-light-darker: #ded7d7; + --color-border-nav: #00488b; + --color-background-light-darker: #ded7d7; + --color-background-nav-darker: #00488b; + --color-background-alert-darker: #f95c20; + --color-background-bad: #c46178; + } } html, @@ -93,17 +92,24 @@ li.tree-folder span.title { margin-right: 0.25rem; } -:root.file_query .nav-pagination { - margin-top: 6rem; -} -:root.file_query ul.pagination a { - padding: 0 0.2rem 0 0.2rem; -} -:root.file_query .view-rss > .icon { - filter: brightness(0); -} -:root.file_query main > h1:first-child { - margin-top: 2rem; +:root.file_query { + .nav-pagination { + margin-top: 6rem; + } + + ul.pagination { + a { + padding: 0 0.2rem 0 0.2rem; + } + } + + .view-rss > .icon { + filter: brightness(0); + } + + main > h1:first-child { + margin-top: 2rem; + } } #slider-content #feed_update fieldset .form-group:last-child { @@ -117,16 +123,20 @@ li.tree-folder span.title { a { color: var(--color-text-nav); outline: none; -} -a#btn-subscription { - width: 76%; -} -a#btn-add { - width: 5%; + + &#btn-subscription { + width: 76%; + } + + &#btn-add { + width: 5%; + } } -img.icon:hover { - background: none; +img { + &.icon:hover { + background: none; + } } sup { @@ -145,16 +155,37 @@ legend { } label { - min-height: 25px; + min-height: var(--min-height-input); } -input:disabled, -select:disabled { +:is(textarea, input, select) { + min-height: var(--min-height-input); + margin-top: var(--margin-top-input); background-color: var(--color-background-light); + border: var(--border-input-default); + + &:focus { + border: 2px solid var(--color-background-dark); + outline: none; + } +} + +:is(input, select) { + &:invalid { + padding-right: 5px; + color: var(--color-text-bad); + border-right-color: var(--color-border-bad); + border-right-width: 5px; + box-shadow: none; + } + + &:disabled { + background-color: var(--color-background-light); + } } option { - padding: 0 0.5em; + padding: 0 .5em; } table { @@ -170,53 +201,72 @@ th { background-color: var(--color-background-light); } -form td, -form th { - font-weight: normal; - text-align: center; +form { + td, + 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); +.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-color: var(--color-background-light); - border: 1px solid var(--color-border-light); -} -.form-group.form-actions { - margin: 15px 0 25px; - padding: 5px 0; - background-color: var(--color-background-light-darker-transparent); - border-top: 3px solid var(--color-border-light-darker); -} -.form-group.form-actions .btn, .form-group.form-actions a { - margin-right: 1rem; -} -.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; + + &:hover { + background-color: var(--color-background-light); + border: 1px solid var(--color-border-light); + } + + &.form-actions { + margin: 15px 0 25px; + padding: 5px 0; + background-color: var(--color-background-light-darker-transparent); + border-top: 3px solid var(--color-border-light-darker); + + .btn, a { + margin-right: 1rem; + } + } + + .group-name { + padding: 10px 0; + text-align: left; + } + + .group-controls { + min-height: 25px; + padding: 5px 0; + + .control { + line-height: 2.0; + } + } } -.stick select { - margin-top: 0; +.form-group::after { + display: block; + clear: both; } -.stick.configure-feeds { - margin: 0.5rem 0.3rem 1rem 0; + +.stick { + select { + margin-top: 0; + } + + &.configure-feeds { + margin: 0.5rem 0.3rem 1rem 0; + width: var(--width-aside); + } } .btn { @@ -231,169 +281,228 @@ form th { vertical-align: middle; line-height: 1.5; text-decoration: none; -} -.btn.active, .btn:active, .btn:hover { - background-color: var(--color-background-nav-darker); - text-decoration: none; -} -.btn .icon { - filter: brightness(3); + + &.active, + &:active, + &:hover { + background-color: var(--color-background-nav-darker); + text-decoration: none; + } + + .icon { + filter: brightness(3); + } } .btn-important, .btn-attention { font-weight: normal; background-color: var(--color-background-alert); color: var(--color-text-light); -} -.btn-important:hover, -.btn-important :active, .btn-attention:hover, -.btn-attention :active { - background-color: var(--color-background-alert-darker) !important; -} -.manage-list .configure .icon { - filter: brightness(0.4); - vertical-align: sub; + &:hover, + :active { + background-color: var(--color-background-alert-darker) !important; + } } -.manage-list .configure:hover { - filter: invert(56%) sepia(87%) saturate(1185%) hue-rotate(327deg) brightness(104%) contrast(96%); + +.manage-list { + .configure { + .icon { + filter: brightness(0.4); + vertical-align: sub; + } + + &:hover { + filter: invert(56%) sepia(87%) saturate(1185%) hue-rotate(327deg) brightness(104%) contrast(96%); + } + } } .switch.active { background-color: var(--color-background-nav); -} -.switch.active:hover { - background-image: url("./icons/disabled-light.svg"); + + &:hover { + background-image: url('./icons/disabled-light.svg'); + } } .nav-list { font-size: 0.9rem; -} -.nav-list .item .nav-header { - padding: 0 1rem; - font-weight: bold; - background-color: var(--color-background-aside); - color: var(--color-text-light); - cursor: default; -} -.nav-list .item a:hover, -.nav-list .item .as-link:hover { - background-color: var(--color-background-nav-darker); - color: var(--color-text-light); -} -.nav-list .item.active { - background: var(--color-background-nav-darker); - color: var(--color-text-light); -} -.nav-list .item.active a, -.nav-list .item.active .as-link { - color: var(--color-text-light); -} -.nav-list .item > a, -.nav-list .item > .as-link { - padding: 0 1.5rem; -} -.nav-list .item .icon { - filter: brightness(3); -} -.nav-list .nav-form { - padding: 3px; - text-align: center; -} -.nav-list a:hover, -.nav-list .as-link:hover { - text-decoration: none; + + .item { + min-height: var(--min-height-nav-list); + line-height: var(--line-height-nav-list); + + .nav-header { + min-height: var(--min-height-nav-list); + line-height: var(--line-height-nav-list); + padding: 0 1rem; + font-weight: bold; + background-color: var(--color-background-aside); + color: var(--color-text-light); + cursor: default; + } + + a:hover, + .as-link:hover { + background-color: var(--color-background-nav-darker); + color: var(--color-text-light); + } + + &.active { + background: var(--color-background-nav-darker); + color: var(--color-text-light); + + a, + .as-link { + color: var(--color-text-light); + } + } + + > a, + > .as-link { + padding: 0 1.5rem; + } + + .icon { + filter: brightness(3); + } + } + + .nav-form { + padding: 3px; + text-align: center; + } + + a:hover, + .as-link:hover { + text-decoration: none; + } } .dropdown-menu { padding: 0.5rem 0 1rem 0; - font-size: 0.8rem; + font-size: var(--font-size-dropdown); text-align: right; border: none; background-color: var(--color-background-nav-darker); -} -.dropdown-menu .item > a, -.dropdown-menu .item > .as-link, -.dropdown-menu .item > span { - width: 96% !important; -} -.dropdown-menu .dropdown-header { - cursor: default; - padding: 0.5rem 10px 0.5rem 10px; - font-weight: bold; - color: var(--color-text-light); -} -.dropdown-menu .dropdown-header a, -.dropdown-menu .dropdown-header .as-link { - padding: 0.1rem 0.3rem 0.3rem 0.3rem; - position: absolute; - left: 5px; - margin-top: -3px; -} -.dropdown-menu .dropdown-header a:hover, -.dropdown-menu .dropdown-header .as-link:hover { - background-color: var(--color-background-nav); -} -.dropdown-menu .dropdown-section .dropdown-section-title { - cursor: default; - padding: 0.25rem 0.25rem 0.125rem 0.5rem; - font-weight: bold; - color: var(--color-text-light); -} -.dropdown-menu .dropdown-section .item a, -.dropdown-menu .dropdown-section .item .as-link { - padding: 0 22px; -} -.dropdown-menu .dropdown-section .item a:hover, -.dropdown-menu .dropdown-section .item .as-link:hover { - background-color: var(--color-background-nav); -} -.dropdown-menu > .item { - padding: 0 0.5rem 0 0; -} -.dropdown-menu > .item > a { - min-width: initial; - white-space: nowrap; -} -.dropdown-menu > .item > a:hover, -.dropdown-menu > .item > button:hover { - background-color: var(--color-background-nav); - color: var(--color-text-light); -} -.dropdown-menu > .item[aria-checked=true] > a::before { - font-weight: bold; - margin: 0 -14px 0 0; -} -.dropdown-menu .help a { - color: var(--color-text-light); - text-decoration: underline; - text-decoration-style: dotted; -} -.dropdown-menu .help a:hover { - text-decoration-style: solid; -} -.dropdown-menu .input select, -.dropdown-menu .input input { - margin: 0 auto 5px; - padding: 2px 5px; + + .item > a, + .item > .as-link, + .item > span { + width: 96% !important; + } + + .dropdown-header { + cursor: default; + padding: 0.5rem 10px 0.5rem 10px; + font-weight: bold; + color: var(--color-text-light); + + a, + .as-link { + padding: 0.1rem 0.3rem 0.3rem 0.3rem; + position: absolute; + left: 5px; + margin-top: -3px; + + &:hover { + background-color: var(--color-background-nav); + } + } + } + + .dropdown-section { + .dropdown-section-title { + cursor: default; + padding: 0.25rem 0.25rem 0.125rem 0.5rem; + font-weight: bold; + color: var(--color-text-light); + } + + .item { + a, + .as-link { + padding: var(--padding-dropdown); + + &:hover { + background-color: var(--color-background-nav); + } + } + } + } + + & > .item { + padding: 0 0.5rem 0 0; + } + + .item { + color: var(--color-text-light); + font-size: var(--font-size-dropdown); + line-height: var(--line-height-dropdown); + + > :is(a, .as-link, span, button) { + padding: var(--padding-dropdown); + color: var(--color-text-light); + font-size: var(--font-size-dropdown); + line-height: var(--line-height-dropdown); + } + + > a { + min-width: initial; + white-space: nowrap; + } + + > :is(a, button):hover { + background-color: var(--color-background-nav); + color: var(--color-text-light); + } + } + + & > .item[aria-checked="true"] > a::before { + font-weight: bold; + margin: 0 -14px 0 0; + } + + .help a { + color: var(--color-text-light); + text-decoration: underline; + text-decoration-style: dotted; + + &:hover { + text-decoration-style: solid; + } + } + + .input { + select, + input { + margin: 0 auto 5px; + padding: 2px 5px; + } + } } #dropdown-search-wrapper .dropdown-menu { padding-top: 1rem; padding-bottom: 0.25rem; -} -#dropdown-search-wrapper .dropdown-menu a { - padding: 0; -} -#dropdown-search-wrapper .dropdown-menu .stick.search { - width: 100%; -} -#dropdown-search-wrapper .dropdown-menu .stick.search input[type=search] { - width: 100%; - border: 0; -} -#dropdown-search-wrapper .dropdown-menu .stick.search .btn:hover { - filter: brightness(0.9); + + a { + padding: 0; + } + + .stick.search { + width: 100%; + + input[type="search"] { + width: 100%; + border: 0; + } + + .btn:hover { + filter: brightness(0.9); + } + } } .item ~ .dropdown-header, @@ -413,10 +522,11 @@ li.item.separator { font-size: 0.9em; border: none; text-shadow: 0 0 1px var(--color-text-shadow-light); -} -.alert > a { - color: inherit; - text-decoration: underline; + + > a { + color: inherit; + text-decoration: underline; + } } .alert-head { @@ -447,9 +557,10 @@ li.item.separator { .pagination { background: var(--color-background-light-darker); color: var(--color_text); -} -.pagination .item a { - color: var(--color_text); + + .item a { + color: var(--color_text); + } } #load_more.loading, @@ -457,44 +568,52 @@ li.item.separator { background: url(loader.gif) center center no-repeat var(--color-background-aside); } + .content { padding: 20px 10px; -} -.content hr { - margin: 30px 10px; - background: var(--color-background-light-darker); - height: 1px; - border: 0; - box-shadow: 0 2px 5px var(--color-box-shadow-light); -} -.content pre { - background-color: var(--color-background-dark); - color: var(--color-text-light); -} -.content pre code { - background: transparent; - color: var(--color-text-light); - border: none; -} -.content code { - background-color: var(--color-background-light); - color: var(--color-text-bad); - border-color: var(--color-border-light); -} -.content blockquote { - margin: 0; - padding: 5px 20px; - background-color: var(--color-background-light); - display: block; - color: var(--color-text-light-darker); - border-top: 1px solid var(--color-border-light-darker); - border-bottom: 1px solid var(--color-border-light-darker); -} -.content blockquote p { - margin: 0; -} -.content > h1.title > a { - color: var(--color_text); + + hr { + margin: 30px 10px; + background: var(--color-background-light-darker); + height: 1px; + border: 0; + box-shadow: 0 2px 5px var(--color-box-shadow-light); + } + + pre { + background-color: var(--color-background-dark); + color: var(--color-text-light); + + code { + background: transparent; + color: var(--color-text-light); + border: none; + } + } + + code { + background-color: var(--color-background-light); + color: var(--color-text-bad); + border-color: var(--color-border-light); + } + + blockquote { + margin: 0; + padding: 5px 20px; + background-color: var(--color-background-light); + display: block; + color: var(--color-text-light-darker); + border-top: 1px solid var(--color-border-light-darker); + border-bottom: 1px solid var(--color-border-light-darker); + + p { + margin: 0; + } + } + + > h1.title > a { + color: var(--color_text); + } } main.post .drop-section li.item.feed a .icon { @@ -507,63 +626,83 @@ main.post .drop-section li.item.feed a:hover .icon { .box { border: 1px solid var(--color-border-light-darker); -} -.box .box-title { - margin: 0; - background-color: var(--color-background-aside); - color: var(--color-text-light); - border-bottom: 1px solid var(--color-border-light-darker); -} -.box .box-title a { - color: var(--color-text-light); -} -.box .box-title .configure { - margin-left: 4px; -} -.box .box-title .configure .icon:hover { - filter: invert(56%) sepia(87%) saturate(1185%) hue-rotate(327deg) brightness(104%) contrast(96%); -} -.box .box-content { - max-height: 260px; -} -.box .box-content .item { - padding: 0 10px; - font-size: 0.9rem; -} -.box .box-content .item .configure .icon { - vertical-align: middle; - filter: brightness(0.4); -} -.box .box-content .item .configure .icon:hover { - filter: invert(56%) sepia(87%) saturate(1185%) hue-rotate(327deg) brightness(104%) contrast(96%); -} -.box.category .box-title .title { - font-weight: normal; - text-decoration: none; - text-align: right; -} -.box.category:not([data-unread="0"]) .box-title { - background-color: var(--color-background-nav); -} -.box.category:not([data-unread="0"]) .box-title:active { - background: var(--color-background-nav-darker); -} -.box.category:not([data-unread="0"]) .box-title .title { - font-weight: bold; - color: var(--color-text-light); -} -.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.visible-semi { - border-style: solid; + + .box-title { + margin: 0; + background-color: var(--color-background-aside); + color: var(--color-text-light); + border-bottom: 1px solid var(--color-border-light-darker); + + a { + color: var(--color-text-light); + } + + .configure { + margin-left: 4px; + + .icon { + &:hover { + filter: invert(56%) sepia(87%) saturate(1185%) hue-rotate(327deg) brightness(104%) contrast(96%); + } + } + } + } + + .box-content { + max-height: 260px; + + .item { + padding: 0 10px; + font-size: 0.9rem; + + .configure { + .icon { + vertical-align: middle; + filter: brightness(0.4); + + &:hover { + filter: invert(56%) sepia(87%) saturate(1185%) hue-rotate(327deg) brightness(104%) contrast(96%); + } + } + } + } + } + + &.category { + .box-title .title { + font-weight: normal; + text-decoration: none; + text-align: right; + } + + &:not([data-unread="0"]) .box-title { + background-color: var(--color-background-nav); + + &:active { + background: var(--color-background-nav-darker); + } + + .title { + font-weight: bold; + color: var(--color-text-light); + } + } + + .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; + } + } + + &.visible-semi { + border-style: solid; + } } .tree { @@ -575,27 +714,32 @@ main.post .drop-section li.item.feed a:hover .icon { background-color: var(--color-background-aside); font-size: 1rem; position: relative; -} -.aside_feed .tree-folder-title .title { - background: inherit; - color: var(--color-text-light); -} -.aside_feed .tree-folder-title .title:hover { - text-decoration: none; + + .title { + background: inherit; + color: var(--color-text-light); + + &:hover { + text-decoration: none; + } + } } .tree-folder-items { background-color: var(--color-background-aside); -} -.tree-folder-items > .item { - font-size: 0.8rem; -} -.tree-folder-items > .item.active { - background-color: var(--color-background-nav-darker); -} -.tree-folder-items > .item > a { - text-decoration: none; - color: var(--color-text-light); + + > .item { + font-size: 0.8rem; + + &.active { + background-color: var(--color-background-nav-darker); + } + + > a { + text-decoration: none; + color: var(--color-text-light); + } + } } .item.search { @@ -604,94 +748,127 @@ main.post .drop-section li.item.feed a:hover .icon { .header { height: auto; -} -.header > .item { - padding: 0; - vertical-align: middle; -} -.header > .item.title { - position: absolute; - text-align: center; -} -.header > .item.title a { - padding: 0 1rem; -} -.header > .item.title a:hover .logo { - filter: grayscale(100%) brightness(100) opacity(90%); -} -.header > .item.title .logo { - display: inline-block; - height: 26px; - vertical-align: top; - position: relative; - top: 5px; - filter: grayscale(100%) brightness(100); -} -.header .item.configure { - position: fixed; - left: 0; - z-index: 95; - width: 35px; - text-align: center; - line-height: 0.8; -} -.header .item.configure > .icon { - filter: brightness(3); - margin-left: 5px; - margin-top: 3px; -} -.header .item.configure .dropdown .dropdown-menu { - max-height: calc(100vh - 45px); - overflow: auto; -} -.header .item.configure .dropdown .dropdown-menu .icon { - filter: brightness(3); + + > .item { + padding: 0; + vertical-align: middle; + + &.title { + width: var(--width-aside); + position: absolute; + text-align: center; + + a { + padding: 0 1rem; + + &:hover { + .logo { + filter: grayscale(100%) brightness(100) opacity(90%); + } + } + } + + .logo { + display: inline-block; + height: 26px; + vertical-align: top; + position: relative; + top: 5px; + filter: grayscale(100%) brightness(100); + } + } + } + + .item.configure { + position: fixed; + left: 0; + z-index: 95; + width: 35px; + text-align: center; + line-height: 0.8; + + > .icon { + filter: brightness(3); + margin-left: 5px; + margin-top: 3px; + } + + .dropdown .dropdown-menu { + max-height: calc(100vh - 45px); + overflow: auto; + + .icon { + filter: brightness(3); + } + } + } } .aside { background-color: var(--color-background-aside); padding-top: 2.5rem; -} -.aside.aside_feed .tree { - margin: 0 0 50px; -} -.aside.aside_feed .tree-folder .tree-folder-title:hover, -.aside.aside_feed .tree-folder .item.feed:hover { - background-color: var(--color-background-nav-darker); -} -.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; + width: var(--width-aside); + + &.aside_feed { + .tree { + margin: 0 0 50px; + } + + .tree-folder { + .tree-folder-title, + .item.feed { + &:hover { + background-color: var(--color-background-nav-darker); + } + } + } + + .nav-form { + input, + select { + width: 140px; + } + + .dropdown { + .dropdown-menu { + left: -20px; + } + + .dropdown-menu::after { + left: 33px; + } + } + } + } } #aside_feed > ul > li:first-child { margin-top: 0.4rem; } -.aside_feed .category .title:not([data-unread="0"])::after { - margin: 0.5rem 0 0 0; - background-color: var(--color-background-nav-darker); - color: var(--color-text-light); -} -.aside_feed .feed .item-title:not([data-unread="0"])::after { - background-color: var(--color-background-nav); - color: var(--color-text-light); -} -.aside_feed .tree-folder-items .dropdown-menu::after { - right: 2px; -} -.aside_feed .about { - margin: 0.2rem 0 1rem 0; - display: block; - font-size: 0.8em; - text-align: center; - font-style: italic; +.aside_feed { + .category .title:not([data-unread="0"])::after { + margin: 0.5rem 0 0 0; + background-color: var(--color-background-nav-darker); + color: var(--color-text-light); + } + + .feed .item-title:not([data-unread="0"])::after { + background-color: var(--color-background-nav); + color: var(--color-text-light); + } + + .tree-folder-items .dropdown-menu::after { + right: 2px; + } + + .about { + margin: 0.2rem 0 1rem 0; + display: block; + font-size: 0.8em; + text-align: center; + font-style: italic; + } } .toggle_aside { @@ -702,22 +879,31 @@ main.post .drop-section li.item.feed a:hover .icon { border-bottom: 1px solid var(--frss-border-color); } -.reader .aside .toggle_aside { - background-color: var(--color-background-aside); -} -.reader .aside .toggle_aside .icon { - filter: brightness(3); -} -.reader .aside .toggle_aside:hover { - background-color: var(--color-background-nav); +.reader { + .aside { + .toggle_aside { + background-color: var(--color-background-aside); + + .icon { + filter: brightness(3); + } + + &:hover { + background-color: var(--color-background-nav); + } + } + } } .post { font-size: 0.9em; -} -.post input.long { - height: 33px; - margin-top: 0px; + + input { + &.long { + height: 33px; + margin-top: 0px; + } + } } #global { @@ -733,16 +919,19 @@ main.post .drop-section li.item.feed a:hover .icon { z-index: 900; right: 0; line-height: 1.5; -} -#new-article > a { - padding: 1rem; - line-height: 1.5; - font-weight: bold; - color: var(--color-text-light); -} -#new-article > a:hover { - text-decoration: none; - background-color: var(--color-background-nav-darker); + width: var(--width-aside); + + > a { + padding: 1rem; + line-height: 1.5; + font-weight: bold; + color: var(--color-text-light); + + &:hover { + text-decoration: none; + background-color: var(--color-background-nav-darker); + } + } } .transition { @@ -750,16 +939,20 @@ main.post .drop-section li.item.feed a:hover .icon { font-weight: bold; line-height: 3; text-align: center; -} -.transition .name { - display: none; + + .name { + display: none; + } } -.nav a, -.nav .as-link { - color: var(--color-text-light); +.nav { + a, + .as-link { + color: var(--color-text-light); + } } + .nav_menu { padding: 0; width: 100%; @@ -769,69 +962,86 @@ main.post .drop-section li.item.feed a:hover .icon { position: sticky; top: 0; z-index: 90; -} -.nav_menu .item.search { - display: inline-block; - position: absolute; - left: 40px; -} -.nav_menu .item.search input { - border-width: 0; - line-height: 1.95; -} -.nav_menu #toggle-unread .icon, -.nav_menu #toggle-starred .icon { - filter: brightness(1); + + .item.search { + display: inline-block; + position: absolute; + left: 40px; + + input { + border-width: 0; + line-height: 1.95; + } + } + + #toggle-unread, + #toggle-starred { + .icon { + filter: brightness(1); + } + } } .flux { padding-left: 10px; background-color: var(--color-background-light); -} -.flux::after { - margin: 0 auto; - width: 90%; - border-top: 1px solid var(--color-border-light-darker); -} -.flux .flux_header:hover, -.flux .current { - background-color: var(--color-background-hover); -} -.flux .flux_header:hover:not(.current):hover .item .title, -.flux .current:not(.current):hover .item .title { - background-color: var(--color-background-hover); -} -.flux.favorite:not(.current) { - background-color: var(--color-background-stared); -} -.flux.favorite:not(.current):hover .item .title { - background-color: var(--color-background-stared); -} -.flux.not_read:not(.current) { - background-color: var(--color-background-unread); -} -.flux.not_read:not(.current):hover .item .title { - background-color: var(--color-background-unread); -} -.flux .flux_header .date, -.flux .flux_content .bottom .date { - color: var(--color-text-light-darker); -} -.flux .bottom { - font-size: 0.8rem; - text-align: center; -} -.flux label { - color: var(--color-text-light); - cursor: pointer; + + &::after { + display: block; + clear: both; + margin: 0 auto; + width: 90%; + border-top: 1px solid var(--color-border-light-darker); + } + + .flux_header:hover, + .current { + background-color: var(--color-background-hover); + + &:not(.current):hover .item .title { + background-color: var(--color-background-hover); + } + } + + &.favorite:not(.current) { + background-color: var(--color-background-stared); + + &:hover .item .title { + background-color: var(--color-background-stared); + } + } + + &.not_read:not(.current) { + background-color: var(--color-background-unread); + + &:hover .item .title { + background-color: var(--color-background-unread); + } + } + + .flux_header .date, + .flux_content .bottom .date { + color: var(--color-text-light-darker); + } + + .bottom { + font-size: 0.8rem; + text-align: center; + } + + label { + color: var(--color-text-light); + cursor: pointer; + } } .flux_header { font-size: 0.8rem; cursor: pointer; -} -.flux_header .title { - font-size: 0.9rem; + + .title { + font-size: 0.9rem; + } } .notification { @@ -848,133 +1058,169 @@ main.post .drop-section li.item.feed a:hover .icon { bottom: 48px; right: 0; top: auto; -} -.notification.good, .notification.bad { - color: var(--color-text-light); -} -.notification.good { - background-color: var(--color-background-good); -} -.notification.good a.close:hover { - background-color: var(--color-background-good); -} -.notification.bad { - background-color: var(--color-background-bad); -} -.notification.bad a.close:hover { - background-color: var(--color-background-bad); -} -.notification a.close { - display: none; + width: var(--width-aside); + + &.good, + &.bad { + color: var(--color-text-light); + } + + &.good { + background-color: var(--color-background-good); + + a.close:hover { + background-color: var(--color-background-good); + } + } + + &.bad { + background-color: var(--color-background-bad); + + a.close:hover { + background-color: var(--color-background-bad); + } + } + + a.close { + display: none; + } } #bigMarkAsRead.big { text-align: center; text-decoration: none; background: var(--color-background-light-darker); -} -#bigMarkAsRead.big:hover { - background-color: var(--color-background-aside); - color: var(--color-text-light); + + &:hover { + background-color: var(--color-background-aside); + color: var(--color-text-light); + } } #nav_entries { + width: var(--width-aside); background-color: var(--color-background-aside); } .stat { margin: 10px 0 20px; -} -.stat th, -.stat td, -.stat tr { - border: none; -} -.stat > table td, -.stat > table th { - border-bottom: 1px solid var(--color-border-light-darker); + + th, + td, + tr { + border: none; + } + + > table { + td, + th { + border-bottom: 1px solid var(--color-border-light-darker); + } + } } #overlay { z-index: 100; -} -#overlay .close .icon { - filter: brightness(3); + + .close .icon { + filter: brightness(3); + } } #panel { z-index: 100; -} -#panel .nav_menu { - position: relative; -} -body:not(:has(nav#aside_feed)) #global { - height: 0; -} -body:not(:has(nav#aside_feed)) .logo { - left: 30px; -} -body:not(:has(nav#aside_feed)) .header { - background-color: var(--color-background-nav); - height: 2.4rem; - position: relative; -} -body:not(:has(nav#aside_feed)) .header > .item.configure { - width: auto; - position: absolute; - white-space: nowrap; + .nav_menu { + position: relative; + } } -body:not(:has(nav#aside_feed)) .header > .item.configure .icon { - filter: brightness(3); + +body:not(:has(nav#aside_feed)) { + #global { + height: 0; + } + + .logo { + left: 30px; + } + + .header { + background-color: var(--color-background-nav); + height: 2.4rem; + position: relative; + + > .item { + &.configure { + width: auto; + position: absolute; + white-space: nowrap; + + .icon { + filter: brightness(3); + } + } + } + } } .controller_error div.alert-error { margin-top: 3rem; } -body.register form div:last-child > a { - float: left; - position: relative; - left: 0.2rem; +body.register { + form div:last-child > a { + float: left; + position: relative; + left: 0.2rem; + } } a.signin { color: var(--color-text-light); font-size: 70%; + position: absolute; top: 0.5rem; left: 1.8rem; text-wrap: nowrap; transform: scale(1.5); -} -a.signin .icon { - filter: brightness(3); -} -.log-item.log-error { - background-color: var(--color-background-bad); - color: var(--color-text-light); -} -.log-item.log-warning { - background-color: var(--color-background-alert); - color: var(--color-text-light); -} -.log-item.log-debug { - background: var(--color-background-dark); - color: var(--color-text-light); + .icon { + filter: brightness(3); + } } -body.reader #nav_menu_toggle_aside { - margin-top: -2px; - height: 32px; -} -body.reader nav.aside_feed > a.toggle_aside { - text-align: center; +.log-item { + &.log-error { + background-color: var(--color-background-bad); + color: var(--color-text-light); + } + + &.log-warning { + background-color: var(--color-background-alert); + color: var(--color-text-light); + } + + &.log-debug { + background: var(--color-background-dark); + color: var(--color-text-light); + } } -body.reader .aside:target { - width: 231px; - padding-top: 0; + +body.reader { + #nav_menu_toggle_aside { + margin-top: -2px; + height: 32px; + } + + nav.aside_feed > a.toggle_aside { + text-align: center; + } + + .aside:target { + width: var(--width-aside); + padding-top: 0; + } } main.global { @@ -985,254 +1231,335 @@ main.global { margin-top: 0.4rem; } -.labels span.emptyLabels { - color: white; - margin-right: 1rem; -} -.labels ul.dropdown-menu-scrollable > li:nth-child(3) { - margin-top: 0.5rem; +.labels { + span.emptyLabels { + color: white; + margin-right: 1rem; + } + + ul.dropdown-menu-scrollable > li:nth-child(3) { + margin-top: 0.5rem; + } } @media (max-width: 840px) { - body:not(.formLogin, .register) .header .item .title { - display: none; - } - body.normal .item.configure, body.reader .item.configure, body.global .item.configure { - left: 76px; + body:not(.formLogin, .register) { + .header { + .item .title { + display: none; + } + } } - body.normal a.signin, body.reader a.signin, body.global a.signin { - left: 0; + + body.normal, body.reader, body.global { + .item.configure { + left: 76px; + } + + a.signin { + left: 0; + } } - .horizontal-list .dropdown { - position: inherit !important; + + .horizontal-list { + .dropdown { + position: inherit !important; + } } + #nav_menu_sort, -#nav_menu_sort .dropdown-menu, -#nav_menu_sort .dropdown, -#toggle-order { + #nav_menu_sort .dropdown-menu, + #nav_menu_sort .dropdown, + #toggle-order { position: fixed; left: 0; } + #nav_menu_sort .dropdown-menu, -#nav_menu_read_all .dropdown-menu, -#dropdown-search-wrapper .dropdown-menu, -#nav_menu_queries .dropdown-menu { + #nav_menu_read_all .dropdown-menu, + #dropdown-search-wrapper .dropdown-menu, + #nav_menu_queries .dropdown-menu { top: 4.4rem; } + #nav_menu_sort .dropdown-menu, -#nav_menu_read_all .dropdown-menu, -#nav_menu_actions .dropdown-menu { + #nav_menu_read_all .dropdown-menu, + #nav_menu_actions .dropdown-menu { position: fixed; } - body:not(.normal):not(.reader):not(.add) nav.configure a.dropdown-toggle { - position: fixed; - top: 0; - } - body:not(.normal):not(.reader):not(.add):not(.global) .nav_menu { - height: 2.2rem; - } - body:not(.normal):not(.reader):not(.add):not(.global) nav.configure a.dropdown-toggle { - left: 0; - } - body:not(.normal):not(.reader):not(.add).global nav.configure a.dropdown-toggle { - left: 2.4rem; - } - body.repartition .nav_menu { - position: fixed; - height: 3rem !important; - } - body.repartition main.post { - margin-top: 4rem; - } - body.repartition .nav_menu .btn { - display: block; + + body:not(.normal):not(.reader):not(.add) { + nav.configure a.dropdown-toggle { + position: fixed; + top: 0; + } + + &:not(.global) { + .nav_menu { + height: 2.2rem; + } + + nav.configure a.dropdown-toggle { + left: 0; + } + } + + &.global { + nav.configure a.dropdown-toggle { + left: 2.4rem; + } + } } - body.repartition .nav_menu #feed_select { - padding: 0; - display: block; - margin-right: 5rem; - margin-bottom: 0.5rem; + + body.repartition { + .nav_menu { + position: fixed; + height: 3rem !important; + } + + main.post { + margin-top: 4rem; + } + + .nav_menu .btn { + display: block; + } + + .nav_menu #feed_select { + padding: 0; + display: block; + margin-right: 5rem; + margin-bottom: 0.5rem; + } } + .form-group .group-name { padding-bottom: 0; text-align: right; } + .dropdown { position: relative; + + .dropdown-menu { + width: auto; + } } - .dropdown .dropdown-menu { - width: auto; - } + #new-article { margin-top: 2rem; width: 100%; } + .header { display: table; + + .item { + padding: 0; + } + + .item.configure { + padding: 0; + position: fixed; + + > .icon { + margin-top: 5px; + } + } } - .header .item { - padding: 0; - } - .header .item.configure { - padding: 0; - position: fixed; - } - .header .item.configure > .icon { - margin-top: 5px; - } + button.read_all.btn { display: none; } + .flux .item.manage, -.flux_header .item.website { + .flux_header .item.website { width: 35px; text-align: center; } + .flux:not(.current):hover .item .title { top: auto !important; } + .aside { padding: 0; width: 0; transition: width 200ms linear; + + .toggle_aside { + background-color: var(--color-background-aside); + + &:hover { + background-color: var(--color-background-nav); + } + + .icon { + filter: brightness(3); + } + } + + &.aside_feed .configure-feeds { + display: flex; + margin-top: 0; + margin-right: auto; + margin-left: auto; + } + + &:target { + width: 78% !important; + z-index: 1000; + } } - .aside .toggle_aside { - background-color: var(--color-background-aside); - } - .aside .toggle_aside:hover { - background-color: var(--color-background-nav); - } - .aside .toggle_aside .icon { - filter: brightness(3); - } - .aside.aside_feed .configure-feeds { - display: flex; - margin-top: 0; - margin-right: auto; - margin-left: auto; - } - .aside:target { - width: 78% !important; - z-index: 1000; - } - #slider .toggle_aside { - background-color: var(--color-background-aside); - } - #slider .toggle_aside:hover { - background-color: var(--color-background-nav); - } - #slider .toggle_aside .icon { - filter: brightness(3); + + #slider { + .toggle_aside { + background-color: var(--color-background-aside); + + &:hover { + background-color: var(--color-background-nav); + } + + .icon { + filter: brightness(3); + } + } } + .nav_menu { height: 71px; + + .btn { + margin: 0; + } + + .stick, + .group { + margin: 0; + + .btn { + margin: 0; + } + } + + .item.search { + top: 3px; + margin-right: 77px; + width: calc(100% - 4 * 38px); + position: relative; + + form { + display: block; + } + + input { + width: 100%; + } + } } - .nav_menu .btn { - margin: 0; - } - .nav_menu .stick, -.nav_menu .group { - margin: 0; - } - .nav_menu .stick .btn, -.nav_menu .group .btn { - margin: 0; - } - .nav_menu .item.search { - top: 3px; - margin-right: 77px; - width: calc(100% - 152px); - position: relative; - } - .nav_menu .item.search form { - display: block; - } - .nav_menu .item.search input { - width: 100%; - } + #overlay .close, -.dropdown-menu .toggle_aside { + .dropdown-menu .toggle_aside { background-color: var(--color-background-aside); display: block; height: 50px; line-height: 3.5; text-align: center; padding-left: 10px; + + &:hover { + background-color: var(--color-background-nav); + } } - #overlay .close:hover, -.dropdown-menu .toggle_aside:hover { - background-color: var(--color-background-nav); - } + .dropdown-target:target ~ .dropdown-toggle::after, -.dropdown-target:target ~ .dropdown-toggle.btn::after { + .dropdown-target:target ~ .dropdown-toggle.btn::after { display: none; } + .share .dropdown-menu { left: 3%; right: auto; } + .transition .name { font-size: 1.1rem; } + .notification { width: 100%; + + a.close { + background: transparent; + display: block; + right: 0; + + &:hover { + opacity: 0.5; + } + + .icon { + display: none; + } + } } - .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; } + .post { padding-right: 15px; padding-left: 15px; } + div#stream { margin-top: 0px; } + a.btn.toggle_aside { position: absolute; top: 0; } + form#mark-read-menu, -a#actualize, -div#nav_menu_actions, -div#nav_menu_views { + a#actualize, + div#nav_menu_actions, + div#nav_menu_views { position: absolute; } + form#mark-read-menu { left: 38px; top: 0; } + a#actualize { left: 0; top: 0; } + a#toggle-order, -div#nav_menu_actions, -div#nav_menu_views { + div#nav_menu_actions, + div#nav_menu_views { top: 36px; } + div#nav_menu_actions { right: 0px; } + div#nav_menu_views { left: 32px; } } + @media (max-width: 410px) { .nav_menu .stick { margin: 0; } } + button.as-link { outline: none; } @@ -1246,63 +1573,85 @@ button.as-link { font-weight: bold; } -.feed.item.empty { - color: var(--color-text-alert); -} -.feed.item.empty.active { - background-color: var(--color-background-alert); - color: var(--color-text-light); -} -.feed.item.empty.active > a { - color: var(--color-text-light); -} -.feed.item.empty > a { - color: var(--color-text-alert); -} -.feed.item.error { - color: var(--color-text-bad-lighter); -} -.feed.item.error.active { - background-color: var(--color-background-bad); - color: var(--color-text-light); -} -.feed.item.error.active > a { - color: var(--color-text-light); -} -.feed.item.error > a { - color: var(--color-text-bad-lighter); +.feed.item { + &.empty { + color: var(--color-text-alert); + + &.active { + background-color: var(--color-background-alert); + color: var(--color-text-light); + + > a { + color: var(--color-text-light); + } + } + + > a { + color: var(--color-text-alert); + } + } + + &.error { + color: var(--color-text-bad-lighter); + + &.active { + background-color: var(--color-background-bad); + color: var(--color-text-light); + + > a { + color: var(--color-text-light); + } + } + + > a { + color: var(--color-text-bad-lighter); + } + } } #stream.reader .flux { background-color: var(--color-background-light); color: var(--color-text-aside); border: none; -} -#stream.reader .flux::after { - border: none; -} -#stream.reader .flux .flux_content { - border-color: var(--color-border-grey); -} -#stream.reader .flux .author { - color: var(--color-text-light-darker); -} -#nav_menu_actions ul.dropdown-menu { - right: 0; - left: auto; -} -#nav_menu_actions ul.dropdown-menu::after { - display: none; + &::after { + border: none; + } + + .flux_content { + border-color: var(--color-border-grey); + } + + .author { + color: var(--color-text-light-darker); + } } -#nav_menu_actions .dropdown.only-mobile { - display: initial !important; + +#nav_menu_actions { + ul.dropdown-menu { + right: 0; + left: auto; + + &::after { + display: none; + } + } + + .dropdown.only-mobile { + display: initial !important; + } } -#nav_menu_read_all ul.dropdown-menu::after { - display: none; +#nav_menu_read_all { + ul.dropdown-menu { + &::after { + display: none; + } + } } -#slider label { - min-height: initial; +#slider { + label { + min-height: initial; + } } diff --git a/p/themes/Swage/swage.scss b/p/themes/Swage/swage.scss deleted file mode 100644 index b9c0143d6..000000000 --- a/p/themes/Swage/swage.scss +++ /dev/null @@ -1,1676 +0,0 @@ -@use "sass:color"; - -@charset "UTF-8"; -//colors - -$color_text: #181621; -$color_light: #f5f3f3; -$color_nav: #0062be; -$color_aside: #22303d; -$color_alert: #fa8052; -$color_good: #5eaabf; -$color_bad: #b0425b; -$color_grey: #e3e3e3; -$color_grey_transparent: #d9d9d9bb; -$color_stared: #fff6da; -$color_unread: #fff3ed; -$color_hover: #fff; - -:root { - --color-text-light: #{$color_light}; - --color-text-light-darker: #{color.adjust( $color_light, $lightness: -40%)}; - --color-text-dark: #{$color_text}; - --color-text-nav: #{color.adjust( $color_nav, $lightness: -10%)}; - --color-text-aside: #{$color_aside}; - --color-text-alert: #{$color_alert}; - --color-text-good: #{$color_good}; - --color-text-bad: #{$color_bad}; - --color-text-bad-lighter: #{color.adjust( $color_bad, $lightness: 10%)}; - - --color-text-shadow-light: #{$color_light}; - --color-box-shadow-light: #{color.adjust( $color_light, $lightness: -10%)}; - - --color-border-light: #{$color_light}; - --color-border-light-darker: #{color.adjust( $color_light, $lightness: -10%)}; - --color-border-grey: #{$color_grey}; - --color-border-nav: #{color.adjust( $color_nav, $lightness: -10%)}; - --color-border-bad: #{$color_bad}; - - --color-background-light: #{$color_light}; - --color-background-light-darker: #{color.adjust( $color_light, $lightness: -10%)}; - --color-background-light-darker-transparent: #{$color_grey_transparent}; - --color-background-dark: #{$color_text}; - --color-background-nav: #{$color_nav}; - --color-background-nav-darker: #{color.adjust( $color_nav, $lightness: -10%)}; - --color-background-aside: #{$color_aside}; - --color-background-alert: #{$color_alert}; - --color-background-alert-darker: #{color.adjust( $color_alert, $lightness: -10%)}; - --color-background-good: #{$color_good}; - --color-background-bad: #{color.adjust( $color_bad, $lightness: 10%)}; - --color-background-stared: #{$color_stared}; - --color-background-unread: #{$color_unread}; - --color-background-hover: #{$color_hover}; - - --frss-scrollbar-handle: rgba(0, 0, 0, 0.1); - --frss-scrollbar-handle-hover: rgba(0, 0, 0, 0.4); - --frss-scrollbar-track: rgba(0, 0, 0, 0.05); - --frss-scrollbar-track-hover: rgba(0, 0, 0, 0.1); -} - - -// @extend-elements -%input { - min-height: 25px; - margin-top: 4px; - background-color: var(--color-background-light); - border: 2px solid var(--color-border-grey); -} -%input:focus { - border: 2px solid var(--color-background-dark); - outline: none; -} - -%invalid { - padding-left: 5px; - color: var(--color-text-bad); - border-left-color: var(--color-border-bad); - border-left-width: 5px; - box-shadow: none; -} - -%nav-list { - min-height: 2.5em; - line-height: 2.5; -} - -%dropdown { - padding: 0 22px; - color: var(--color-text-light); - font-size: 0.8rem; - line-height: 2.5; -} - -%after { - display: block; - clear: both; -} - -%aside-width { - width: 231px; -} - -// /@extend-elements -html, -body { - color: var(--color-text-dark); - font-family: Helvetica, Arial, sans-serif; -} - -body:not(.normal):not(.reader) nav.configure a.dropdown-toggle, -li.tree-folder span.title { - margin-left: 0.25rem; -} - -:root.file_query { - .nav-pagination { - margin-top: 6rem; - } - - ul.pagination { - a { - padding: 0 0.2rem 0 0.2rem; - } - } - - .view-rss > .icon { - filter: brightness(0); - } - - main > h1:first-child { - margin-top: 2rem; - } -} - -#slider-content #feed_update fieldset .form-group:last-child { - margin-bottom: 0.4rem; -} - -.configure.open-slider > .icon { - filter: brightness(0.4); -} - -a { - color: var(--color-text-nav); - outline: none; - - &#btn-subscription { - width: 76%; - } - - &#btn-add { - width: 5%; - } -} - -img { - &.icon:hover { - background: none; - } -} - -sup { - top: -0.3em; -} - -legend { - margin: 20px 0 5px; - padding: 5px 20px; - background-color: var(--color-background-aside); - display: inline-block; - width: auto; - color: var(--color-text-light); - font-size: 1.4em; - clear: both; -} - -label { - min-height: 25px; -} - -textarea { - - @extend %input; -} - -input, -select { - - @extend %input; - - &:invalid { - - @extend %invalid; - } - - &:disabled { - background-color: var(--color-background-light); - } -} - -option { - padding: 0 .5em; -} - -table { - border-collapse: collapse; -} - -td, -th { - border: 1px solid var(--color-border-light-darker); -} - -th { - background-color: var(--color-background-light); -} - -form { - td, - th { - font-weight: normal; - text-align: center; - } -} - -.category { - .title.error::before { - display: inline-block; - padding-right: 7px; - width: 16px; - content: url(../Swage/icons/error.svg); - } -} - -.form-group { - padding: 5px; - border: 1px solid transparent; - - &:hover { - background-color: var(--color-background-light); - border: 1px solid var(--color-border-light); - } - - &.form-actions { - margin: 15px 0 25px; - padding: 5px 0; - background-color: var(--color-background-light-darker-transparent); - border-top: 3px solid var(--color-border-light-darker); - - .btn, a { - margin-left: 1rem; - } - } - - .group-name { - padding: 10px 0; - text-align: right; - } - - .group-controls { - min-height: 25px; - padding: 5px 0; - - .control { - line-height: 2.0; - } - } -} - -.form-group::after { - - @extend %after; -} - -.stick { - select { - margin-top: 0; - } - - &.configure-feeds { - margin: 0.5rem 0 1rem 0.3rem; - - @extend %aside-width; - } -} - -.btn { - margin: 0; - padding: 0.25rem 0.5rem; - background-color: var(--color-background-nav); - color: var(--color-text-light); - font-size: 0.9rem; - border: none; - min-height: 25px; - min-width: 15px; - vertical-align: middle; - line-height: 1.5; - text-decoration: none; - - &.active, - &:active, - &:hover { - background-color: var(--color-background-nav-darker); - text-decoration: none; - } - - .icon { - filter: brightness(3); - } -} - -.btn-important, .btn-attention { - font-weight: normal; - background-color: var(--color-background-alert); - color: var(--color-text-light); - - &:hover, - :active { - background-color: var(--color-background-alert-darker) !important; - } -} - -.manage-list { - .configure { - .icon { - filter: brightness(0.4); - vertical-align: sub; - } - - &:hover { - filter: invert(56%) sepia(87%) saturate(1185%) hue-rotate(327deg) brightness(104%) contrast(96%); - } - } -} - -.switch.active { - background-color: var(--color-background-nav); - - &:hover { - background-image: url('./icons/disabled-light.svg'); - } -} - -.nav-list { - font-size: 0.9rem; - - .item { - - @extend %nav-list; - - .nav-header { - - @extend %nav-list; - padding: 0 1rem; - font-weight: bold; - background-color: var(--color-background-aside); - color: var(--color-text-light); - cursor: default; - } - - a:hover, - .as-link:hover { - background-color: var(--color-background-nav-darker); - color: var(--color-text-light); - } - - &.active { - background: var(--color-background-nav-darker); - color: var(--color-text-light); - - a, - .as-link { - color: var(--color-text-light); - } - } - - > a, - > .as-link { - padding: 0 1.5rem; - } - - .icon { - filter: brightness(3); - } - } - - .nav-form { - padding: 3px; - text-align: center; - } - - a:hover, - .as-link:hover { - text-decoration: none; - } -} - -.dropdown-menu { - padding: 0.5rem 0 1rem 0; - font-size: 0.8rem; - text-align: left; - border: none; - background-color: var(--color-background-nav-darker); - - .item > a, - .item > .as-link, - .item > span { - width: 96% !important; - } - - .dropdown-header { - cursor: default; - padding: 0.5rem 10px 0.5rem 10px; - font-weight: bold; - color: var(--color-text-light); - - a, - .as-link { - padding: 0.1rem 0.3rem 0.3rem 0.3rem; - position: absolute; - right: 5px; - margin-top: -3px; - - &:hover { - background-color: var(--color-background-nav); - } - } - } - - .dropdown-section { - .dropdown-section-title { - cursor: default; - padding: 0.25rem 0.5rem 0.125rem 0.25rem; - font-weight: bold; - color: var(--color-text-light); - } - - .item { - a, - .as-link { - padding: 0 22px; - - &:hover { - background-color: var(--color-background-nav); - } - } - } - } - - > { - .item { - - @extend %dropdown; - padding: 0 0 0 0.5rem; - - a, - > span, - > .as-link, - button { - - @extend %dropdown; - } - - > a { - min-width: initial; - white-space: nowrap; - } - - > a:hover, - > button:hover { - background-color: var(--color-background-nav); - color: var(--color-text-light); - } - } - - .item[aria-checked="true"] > a::before { - font-weight: bold; - margin: 0 0 0 -14px; - } - } - - .help a { - color: var(--color-text-light); - text-decoration: underline; - text-decoration-style: dotted; - - &:hover { - text-decoration-style: solid; - } - } - - .input { - select, - input { - margin: 0 auto 5px; - padding: 2px 5px; - } - } -} - -#dropdown-search-wrapper .dropdown-menu { - padding-top: 1rem; - padding-bottom: 0.25rem; - - a { - padding: 0; - } - - .stick.search { - width: 100%; - - input[type="search"] { - width: 100%; - border: 0; - } - - .btn:hover { - filter: brightness(0.9); - } - } -} - -.item ~ .dropdown-header, -.item.separator { - border-top-color: var(--color-border-light-darker); - cursor: default; -} - -li.item.separator { - padding-top: 0.4rem; -} - -.alert { - margin: 0.25rem auto; - background-color: var(--color-background-light); - color: var(--color-text-light-darker); - font-size: 0.9em; - border: none; - text-shadow: 0 0 1px var(--color-text-shadow-light); - - > a { - color: inherit; - text-decoration: underline; - } -} - -.alert-head { - font-size: 1.15em; -} - -.alert-warn, -.alert-success, -.alert-error { - border: none; -} - -.alert-warn { - background-color: var(--color-background-light); - color: var(--color-text-alert); -} - -.alert-success { - background-color: var(--color-background-light); - color: var(--color-text-good); -} - -.alert-error { - background-color: var(--color-background-light); - color: var(--color-text-bad); -} - -.pagination { - background: var(--color-background-light-darker); - color: var(--color_text); - - .item a { - color: var(--color_text); - } -} - -#load_more.loading, -#load_more.loading:hover { - background: url(loader.gif) center center no-repeat var(--color-background-aside); -} - - -.content { - padding: 20px 10px; - - hr { - margin: 30px 10px; - background: var(--color-background-light-darker); - height: 1px; - border: 0; - box-shadow: 0 2px 5px var(--color-box-shadow-light); - } - - pre { - background-color: var(--color-background-dark); - color: var(--color-text-light); - - code { - background: transparent; - color: var(--color-text-light); - border: none; - } - } - - code { - background-color: var(--color-background-light); - color: var(--color-text-bad); - border-color: var(--color-border-light); - } - - blockquote { - margin: 0; - padding: 5px 20px; - background-color: var(--color-background-light); - display: block; - color: var(--color-text-light-darker); - border-top: 1px solid var(--color-border-light-darker); - border-bottom: 1px solid var(--color-border-light-darker); - - p { - margin: 0; - } - } - - > h1.title > a { - color: var(--color_text); - } -} - -main.post .drop-section li.item.feed a .icon { - filter: brightness(0.4); -} - -main.post .drop-section li.item.feed a:hover .icon { - filter: invert(56%) sepia(87%) saturate(1185%) hue-rotate(327deg) brightness(104%) contrast(96%); -} - -.box { - border: 1px solid var(--color-border-light-darker); - - .box-title { - margin: 0; - background-color: var(--color-background-aside); - color: var(--color-text-light); - border-bottom: 1px solid var(--color-border-light-darker); - - a { - color: var(--color-text-light); - } - - .configure { - margin-right: 4px; - - .icon { - &:hover { - filter: invert(56%) sepia(87%) saturate(1185%) hue-rotate(327deg) brightness(104%) contrast(96%); - } - } - } - } - - .box-content { - max-height: 260px; - - .item { - padding: 0 10px; - font-size: 0.9rem; - - .configure { - .icon { - vertical-align: middle; - filter: brightness(0.4); - - &:hover { - filter: invert(56%) sepia(87%) saturate(1185%) hue-rotate(327deg) brightness(104%) contrast(96%); - } - } - } - } - } - - &.category { - .box-title .title { - font-weight: normal; - text-decoration: none; - text-align: left; - } - - &:not([data-unread="0"]) .box-title { - background-color: var(--color-background-nav); - - &:active { - background: var(--color-background-nav-darker); - } - - .title { - font-weight: bold; - color: var(--color-text-light); - } - } - - .title:not([data-unread="0"])::after { - background: none; - border: 0; - box-shadow: none; - position: absolute; - top: 5px; - right: 10px; - font-weight: bold; - text-shadow: none; - } - } - - &.visible-semi { - border-style: solid; - } -} - -.tree { - margin: 10px 0; -} - -.aside_feed .tree-folder-title { - padding: 0.3rem 0.75rem; - background-color: var(--color-background-aside); - font-size: 1rem; - position: relative; - - .title { - background: inherit; - color: var(--color-text-light); - - &:hover { - text-decoration: none; - } - } -} - -.tree-folder-items { - background-color: var(--color-background-aside); - - > .item { - font-size: 0.8rem; - - &.active { - background-color: var(--color-background-nav-darker); - } - - > a { - text-decoration: none; - color: var(--color-text-light); - } - } -} - -.item.search { - display: none; -} - -.header { - height: auto; - - > .item { - padding: 0; - vertical-align: middle; - - &.title { - - @extend %aside-width; - position: absolute; - text-align: center; - - a { - padding: 0 1rem; - - &:hover { - .logo { - filter: grayscale(100%) brightness(100) opacity(90%); - } - } - } - - .logo { - display: inline-block; - height: 26px; - vertical-align: top; - position: relative; - top: 5px; - filter: grayscale(100%) brightness(100); - } - } - } - - .item.configure { - position: fixed; - right: 0; - z-index: 95; - width: 35px; - text-align: center; - line-height: 0.8; - - > .icon { - filter: brightness(3); - margin-right: 5px; - margin-top: 3px; - } - - .dropdown .dropdown-menu { - max-height: calc(100vh - 45px); - overflow: auto; - - .icon { - filter: brightness(3); - } - } - } -} - -.aside { - background-color: var(--color-background-aside); - padding-top: 2.5rem; - - @extend %aside-width; - - &.aside_feed { - .tree { - margin: 0 0 50px; - } - - .tree-folder { - .tree-folder-title, - .item.feed { - &:hover { - background-color: var(--color-background-nav-darker); - } - } - } - - .nav-form { - input, - select { - width: 140px; - } - - .dropdown { - .dropdown-menu { - right: -20px; - } - - .dropdown-menu::after { - right: 33px; - } - } - } - } -} - -#aside_feed > ul > li:first-child { - margin-top: 0.4rem; -} - -.aside_feed { - .category .title:not([data-unread="0"])::after { - margin: 0.5rem 0 0 0; - background-color: var(--color-background-nav-darker); - color: var(--color-text-light); - } - - .feed .item-title:not([data-unread="0"])::after { - background-color: var(--color-background-nav); - color: var(--color-text-light); - } - - .tree-folder-items .dropdown-menu::after { - left: 2px; - } - - .about { - margin: 0.2rem 0 1rem 0; - display: block; - font-size: 0.8em; - text-align: center; - font-style: italic; - } -} - -.toggle_aside { - margin-bottom: 1rem; -} - -.aside:target .toggle_aside { - border-bottom: 1px solid var(--frss-border-color); -} - -.reader { - .aside { - .toggle_aside { - background-color: var(--color-background-aside); - - .icon { - filter: brightness(3); - } - - &:hover { - background-color: var(--color-background-nav); - } - } - } -} - -.post { - font-size: 0.9em; - - input { - &.long { - height: 33px; - margin-top: 0px; - } - } -} - -#global { - height: 100vh; -} - -#new-article { - background-color: var(--color-background-nav); - font-size: 1em; - text-align: center; - position: fixed; - bottom: 48px; - z-index: 900; - left: 0; - line-height: 1.5; - - @extend %aside-width; - - > a { - padding: 1rem; - line-height: 1.5; - font-weight: bold; - color: var(--color-text-light); - - &:hover { - text-decoration: none; - background-color: var(--color-background-nav-darker); - } - } -} - -.transition { - padding: 0 10px; - font-weight: bold; - line-height: 3; - text-align: center; - - .name { - display: none; - } -} - -.nav { - a, - .as-link { - color: var(--color-text-light); - } -} - - -.nav_menu { - padding: 0; - width: 100%; - font-size: 0; - background-color: var(--color-background-nav); - text-align: left; - position: sticky; - top: 0; - z-index: 90; - - .item.search { - display: inline-block; - position: absolute; - right: 40px; - - input { - border-width: 0; - line-height: 1.95; - } - } - - #toggle-unread, - #toggle-starred { - .icon { - filter: brightness(1); - } - } -} - -.flux { - padding-right: 10px; - background-color: var(--color-background-light); - - &::after { - - @extend %after; - margin: 0 auto; - width: 90%; - border-top: 1px solid var(--color-border-light-darker); - } - - .flux_header:hover, - .current { - background-color: var(--color-background-hover); - - &:not(.current):hover .item .title { - background-color: var(--color-background-hover); - } - } - - &.favorite:not(.current) { - background-color: var(--color-background-stared); - - &:hover .item .title { - background-color: var(--color-background-stared); - } - } - - &.not_read:not(.current) { - background-color: var(--color-background-unread); - - &:hover .item .title { - background-color: var(--color-background-unread); - } - } - - .flux_header .date, - .flux_content .bottom .date { - color: var(--color-text-light-darker); - } - - .bottom { - font-size: 0.8rem; - text-align: center; - } - - label { - color: var(--color-text-light); - cursor: pointer; - } -} - -.flux_header { - font-size: 0.8rem; - cursor: pointer; - - .title { - font-size: 0.9rem; - } -} - -.notification { - padding: 10px 0; - background-color: var(--color-background-light-darker); - height: auto; - color: var(--color-text-light-darker); - font-size: 1em; - border: none; - text-align: center; - font-weight: bold; - vertical-align: middle; - position: fixed; - bottom: 48px; - left: 0; - top: auto; - - @extend %aside-width; - - &.good, - &.bad { - color: var(--color-text-light); - } - - &.good { - background-color: var(--color-background-good); - - a.close:hover { - background-color: var(--color-background-good); - } - } - - &.bad { - background-color: var(--color-background-bad); - - a.close:hover { - background-color: var(--color-background-bad); - } - } - - a.close { - display: none; - } -} - -#bigMarkAsRead.big { - text-align: center; - text-decoration: none; - background: var(--color-background-light-darker); - - &:hover { - background-color: var(--color-background-aside); - color: var(--color-text-light); - } -} - -#nav_entries { - - @extend %aside-width; - background-color: var(--color-background-aside); -} - -.stat { - margin: 10px 0 20px; - - th, - td, - tr { - border: none; - } - - > table { - td, - th { - border-bottom: 1px solid var(--color-border-light-darker); - } - } -} - -#overlay { - z-index: 100; - - .close .icon { - filter: brightness(3); - } -} - -#panel { - z-index: 100; - - .nav_menu { - position: relative; - } -} - -body:not(:has(nav#aside_feed)) { - #global { - height: 0; - } - - .logo { - right: 30px; - } - - .header { - background-color: var(--color-background-nav); - height: 2.4rem; - position: relative; - - > .item { - &.configure { - width: auto; - position: absolute; - white-space: nowrap; - - .icon { - filter: brightness(3); - } - } - } - } -} - -.controller_error div.alert-error { - margin-top: 3rem; -} - -body.register { - form div:last-child > a { - float: right; - position: relative; - right: 0.2rem; - } -} - -a.signin { - color: var(--color-text-light); - font-size: 70%; - - position: absolute; - top: 0.5rem; - right: 1.8rem; - text-wrap: nowrap; - transform: scale(1.5); - - .icon { - filter: brightness(3); - } -} - -.log-item { - &.log-error { - background-color: var(--color-background-bad); - color: var(--color-text-light); - } - - &.log-warning { - background-color: var(--color-background-alert); - color: var(--color-text-light); - } - - &.log-debug { - background: var(--color-background-dark); - color: var(--color-text-light); - } -} - -body.reader { - #nav_menu_toggle_aside { - margin-top: -2px; - height: 32px; - } - - nav.aside_feed > a.toggle_aside { - text-align: center; - } - - .aside:target { - width: 231px; - padding-top: 0; - } -} - -main.global { - margin: 1rem; -} - -.dropdown .dropdown-section:last-child > ul:first-child { - margin-top: 0.4rem; -} - -.labels { - span.emptyLabels { - color: white; - margin-left: 1rem; - } - - ul.dropdown-menu-scrollable > li:nth-child(3) { - margin-top: 0.5rem; - } -} - -@media (max-width: 840px) { - body:not(.formLogin, .register) { - .header { - .item .title { - display: none; - } - } - } - - body.normal, body.reader, body.global { - .item.configure { - right: 76px; - } - - a.signin { - right: 0; - } - } - - .horizontal-list { - .dropdown { - position: inherit !important; - } - } - - #nav_menu_sort, - #nav_menu_sort .dropdown-menu, - #nav_menu_sort .dropdown, - #toggle-order { - position: fixed; - right: 0; - } - - #nav_menu_sort .dropdown-menu, - #nav_menu_read_all .dropdown-menu, - #dropdown-search-wrapper .dropdown-menu, - #nav_menu_queries .dropdown-menu { - top: 4.4rem; - } - - #nav_menu_sort .dropdown-menu, - #nav_menu_read_all .dropdown-menu, - #nav_menu_actions .dropdown-menu { - position: fixed; - } - - body:not(.normal):not(.reader):not(.add) { - nav.configure a.dropdown-toggle { - position: fixed; - top: 0; - } - - &:not(.global) { - .nav_menu { - height: 2.2rem; - } - - nav.configure a.dropdown-toggle { - right: 0; - } - } - - &.global { - nav.configure a.dropdown-toggle { - right: 2.4rem; - } - } - } - - body.repartition { - .nav_menu { - position: fixed; - height: 3rem !important; - } - - main.post { - margin-top: 4rem; - } - - .nav_menu .btn { - display: block; - } - - .nav_menu #feed_select { - padding: 0; - display: block; - margin-left: 5rem; - margin-bottom: 0.5rem; - } - } - - .form-group .group-name { - padding-bottom: 0; - text-align: left; - } - - .dropdown { - position: relative; - - .dropdown-menu { - width: auto; - } - } - - #new-article { - margin-top: 2rem; - width: 100%; - } - - .header { - display: table; - - .item { - padding: 0; - } - - .item.configure { - padding: 0; - position: fixed; - - > .icon { - margin-top: 5px; - } - } - } - - button.read_all.btn { - display: none; - } - - .flux .item.manage, - .flux_header .item.website { - width: 35px; - text-align: center; - } - - .flux:not(.current):hover .item .title { - top: auto !important; - } - - .aside { - padding: 0; - width: 0; - transition: width 200ms linear; - - .toggle_aside { - background-color: var(--color-background-aside); - - &:hover { - background-color: var(--color-background-nav); - } - - .icon { - filter: brightness(3); - } - } - - &.aside_feed .configure-feeds { - display: flex; - margin-top: 0; - margin-left: auto; - margin-right: auto; - } - - &:target { - width: 78% !important; - z-index: 1000; - } - } - - #slider { - .toggle_aside { - background-color: var(--color-background-aside); - - &:hover { - background-color: var(--color-background-nav); - } - - .icon { - filter: brightness(3); - } - } - } - - .nav_menu { - height: 71px; - - .btn { - margin: 0; - } - - .stick, - .group { - margin: 0; - - .btn { - margin: 0; - } - } - - .item.search { - top: 3px; - margin-left: 77px; - width: calc(100% - 4 * 38px); - position: relative; - - form { - display: block; - } - - input { - width: 100%; - } - } - } - - #overlay .close, - .dropdown-menu .toggle_aside { - background-color: var(--color-background-aside); - display: block; - height: 50px; - line-height: 3.5; - text-align: center; - padding-right: 10px; - - &:hover { - background-color: var(--color-background-nav); - } - } - - .dropdown-target:target ~ .dropdown-toggle::after, - .dropdown-target:target ~ .dropdown-toggle.btn::after { - display: none; - } - - .share .dropdown-menu { - right: 3%; - left: auto; - } - - .transition .name { - font-size: 1.1rem; - } - - .notification { - width: 100%; - - a.close { - background: transparent; - display: block; - left: 0; - - &:hover { - opacity: 0.5; - } - - .icon { - display: none; - } - } - } - - #nav_entries { - width: 100% !important; - } - - .post { - padding-left: 15px; - padding-right: 15px; - } - - div#stream { - margin-top: 0px; - } - - a.btn.toggle_aside { - position: absolute; - top: 0; - } - - form#mark-read-menu, - a#actualize, - div#nav_menu_actions, - div#nav_menu_views { - position: absolute; - } - - form#mark-read-menu { - right: 38px; - top: 0; - } - - a#actualize { - right: 0; - top: 0; - } - - a#toggle-order, - div#nav_menu_actions, - div#nav_menu_views { - top: 36px; - } - - div#nav_menu_actions { - left: 0px; - } - - div#nav_menu_views { - right: 32px; - } -} - -@media (max-width: 410px) { - .nav_menu .stick { - margin: 0; - } -} - -button.as-link { - outline: none; -} - -.dropdown-target:target ~ .btn.dropdown-toggle { - background-color: var(--color-background-nav-darker); -} - -.tree-folder.active .tree-folder-title { - background-color: var(--color-background-nav-darker); - font-weight: bold; -} - -.feed.item { - &.empty { - color: var(--color-text-alert); - - &.active { - background-color: var(--color-background-alert); - color: var(--color-text-light); - - > a { - color: var(--color-text-light); - } - } - - > a { - color: var(--color-text-alert); - } - } - - &.error { - color: var(--color-text-bad-lighter); - - &.active { - background-color: var(--color-background-bad); - color: var(--color-text-light); - - > a { - color: var(--color-text-light); - } - } - - > a { - color: var(--color-text-bad-lighter); - } - } -} - -#stream.reader .flux { - background-color: var(--color-background-light); - color: var(--color-text-aside); - border: none; - - &::after { - border: none; - } - - .flux_content { - border-color: var(--color-border-grey); - } - - .author { - color: var(--color-text-light-darker); - } -} - -#nav_menu_actions { - ul.dropdown-menu { - left: 0; - right: auto; - - &::after { - display: none; - } - } - - .dropdown.only-mobile { - display: initial !important; - } -} - -#nav_menu_read_all { - ul.dropdown-menu { - &::after { - display: none; - } - } -} - -#slider { - label { - min-height: initial; - } -} -- cgit v1.2.3