mirror of
https://github.com/FreshRSS/FreshRSS.git
synced 2026-05-15 10:43:55 -04:00
1a3565f26c
There was not enough difference between selected and not-selected articles, especially not due to hovering using the same style. Already relevant as is, and more relevant for a future feature depending on selected article. Additional help welcome to further improve the styling, in this PR or a future one, also for the other themes. In this example, the third article is the one selected: <img width="443" height="189" alt="image" src="https://github.com/user-attachments/assets/06168e9f-1b91-47e2-9b64-4fd8ca6c7186" /> * Compensate the increased border-left-width * Implement in Pafat * Implement in Nord * Shorten comment * Implement in Alternative Dark * Implement for Flat * Implement for Swage * Implement in Ansum and Mapco * Call stylelint_fix before rtlcss So that RTLCSS includes the fixes from previous step
1376 lines
24 KiB
CSS
1376 lines
24 KiB
CSS
@charset "UTF-8";
|
|
|
|
/*******************
|
|
* Theme is based on the Nord theme: https://www.nordtheme.com/docs/colors-and-palettes (archived: https://archive.ph/LVpdB)
|
|
*******************/
|
|
|
|
:root {
|
|
/* Set sans-serif & mono fonts */
|
|
--sans-font: Inter, Lato,Helvetica,"IBM Plex Sans","Roboto",-apple-system,BlinkMacSystemFont,"Nimbus Sans L",Avenir,"Noto Sans", "Segoe UI",Arial,Helvetica,"Helvetica Neue",sans-serif;
|
|
--mono-font: "mononoki Nerd Font","IBM Plex Mono","Roboto Mono","Ubuntu Mono","Fira Code","Overpass Mono", Monaco,"Droid Sans Mono",monospace;
|
|
/* given theme colors: */
|
|
--nordX-background: #242933;
|
|
--nord0-polarnight: #2e3440;
|
|
--nord1-polarnight: #3b4252;
|
|
--nord2-polarnight: #434c5e;
|
|
--nord3-polarnight: #4c566a;
|
|
|
|
--nord4-snowstorm: #d8dee9;
|
|
/* --nord5-snowstorm: #e5e9f0; */
|
|
--nord6-snowstorm: #eceff4;
|
|
|
|
/* --nord7-frost: #8fbcbb; */
|
|
--nord8-frost: #88c0d0;
|
|
--nord9-frost: #81a1c1;
|
|
/* --nord10-frost: #5e81ac; */
|
|
|
|
--nord11-aurora: #bf616a;
|
|
/* --nord12-aurora: #d08770; */
|
|
--nord13-aurora: #ebcb8b;
|
|
--nord14-aurora: #a3be8c;
|
|
--nord15-aurora: #b48ead;
|
|
|
|
--main-background: var(--nordX-background);
|
|
--main-background-transparent: #242933cc;
|
|
--accent-bg: var(--nord0-polarnight);
|
|
--accent-border: var(--nord0-polarnight);
|
|
--light-bg: var(--nord1-polarnight);
|
|
--dropdown-bg: var(--nord2-polarnight);
|
|
--border-elements: var(--nord3-polarnight);
|
|
--text-accent: var(--nord4-snowstorm);
|
|
--text-default: var(--nord6-snowstorm);
|
|
--highlight: var(--nord8-frost);
|
|
--accent: var(--nord9-frost);
|
|
--red: var(--nord11-aurora);
|
|
--orange: var(--nord13-aurora);
|
|
--green: var(--nord14-aurora);
|
|
--purple: var(--nord15-aurora);
|
|
|
|
--frss-background-color-transparent: #2e34407f;
|
|
--frss-background-color: var(--main-background);
|
|
--frss-box-shadow-color-transparent: #111;
|
|
--frss-switch-accent-color: var(--nord14-aurora);
|
|
--frss-background-color-middle: var(--highlight);
|
|
--frss-background-color-dark: var(--light-bg);
|
|
--frss-background-color-error-transparent: #bf616a40;
|
|
--frss-border-color: var(--border-elements);
|
|
|
|
--frss-scrollbar-handle: #0002;
|
|
--frss-scrollbar-handle-hover: var(--nord1-polarnight);
|
|
--frss-scrollbar-track: transparent;
|
|
--frss-scrollbar-track-hover: transparent;
|
|
}
|
|
|
|
|
|
/*=== GENERAL */
|
|
/*============*/
|
|
|
|
@font-face {
|
|
font-family: 'Lato';
|
|
src: local('Lato'),
|
|
url('../fonts/LatoLatin-Regular.woff') format('woff'),
|
|
url('../fonts/LatoLatin-Bold.woff') format('woff'),
|
|
url('../fonts/LatoLatin-Bolditalic.woff') format('woff'),
|
|
url('../fonts/LatoLatin-Italic.woff') format('woff');
|
|
}
|
|
|
|
@font-face {
|
|
font-family: 'Noto Sans';
|
|
src: local('Noto Sans'), local('NotoSans');
|
|
}
|
|
|
|
html, body {
|
|
background: var(--main-background);
|
|
color: var(--text-default);
|
|
font-family: var(--sans-font);
|
|
}
|
|
|
|
/*=== Links */
|
|
a, .as-link, button.as-link {
|
|
color: var(--accent);
|
|
}
|
|
|
|
a:hover, .as-link:hover, button.as-link:hover {
|
|
color: var(--highlight);
|
|
}
|
|
|
|
p.help {
|
|
color: var(--text-accent);
|
|
font-size: 0.9em;
|
|
font-style: italic;
|
|
padding-left: 0.25rem;
|
|
}
|
|
|
|
p.help img {
|
|
height: 1em;
|
|
vertical-align: middle;
|
|
}
|
|
|
|
kbd {
|
|
color: var(--orange);
|
|
border-color: var(--border-elements);
|
|
background-color: var(--accent-bg);
|
|
}
|
|
|
|
legend {
|
|
margin: 20px 0 5px;
|
|
padding: 5px 0;
|
|
font-size: 1.4em;
|
|
}
|
|
|
|
label {
|
|
min-height: 25px;
|
|
padding: 5px 0;
|
|
cursor: pointer;
|
|
}
|
|
|
|
input, select, textarea {
|
|
color: var(--text-default);
|
|
border: 1px solid var(--border-elements);
|
|
border-radius: 6px;
|
|
background-color: transparent;
|
|
min-height: 25px;
|
|
line-height: 1;
|
|
}
|
|
|
|
input:invalid,
|
|
select:invalid,
|
|
textarea:invalid {
|
|
border-color: var(--red);
|
|
}
|
|
|
|
input:hover,
|
|
select:hover,
|
|
textarea:hover {
|
|
border-color: var(--accent);
|
|
}
|
|
|
|
input:focus,
|
|
select:focus,
|
|
textarea:focus {
|
|
background-color: var(--main-background);
|
|
border-color: var(--highlight);
|
|
outline: none;
|
|
}
|
|
|
|
|
|
|
|
input:disabled, select:disabled {
|
|
border-color: var(--border-elements);
|
|
color: var(--text-accent);
|
|
}
|
|
|
|
button.as-link[disabled] {
|
|
color: var(--text-accent);
|
|
font-style: italic;
|
|
}
|
|
|
|
/*=== Tables */
|
|
.config-articleicons td,
|
|
.config-articleicons th {
|
|
font-weight: normal;
|
|
}
|
|
|
|
table {
|
|
border-collapse: collapse;
|
|
}
|
|
|
|
table tr {
|
|
border-bottom: 1px solid var(--border-elements);
|
|
}
|
|
|
|
table th, table td {
|
|
padding: 10px 20px;
|
|
}
|
|
|
|
.form-group.form-actions {
|
|
margin: 2rem 0 5rem 0;
|
|
background-color: var(--main-background-transparent);
|
|
}
|
|
|
|
.form-group .group-name {
|
|
padding: 10px 0;
|
|
}
|
|
|
|
.form-group .group-controls {
|
|
padding: 5px 0;
|
|
min-height: 25px;
|
|
}
|
|
|
|
/*=== Buttons */
|
|
.btn {
|
|
margin: .3rem .6rem 0.3rem 0;
|
|
padding: 0.25rem 0.5rem;
|
|
background: var(--accent-bg);
|
|
color: var(--accent);
|
|
font-size: 0.9rem;
|
|
border: 1px solid var(--border-elements);
|
|
border-radius: 5px;
|
|
text-decoration: none;
|
|
transition: .2s;
|
|
min-height: 25px;
|
|
min-width: 15px;
|
|
vertical-align: middle;
|
|
line-height: 25px;
|
|
}
|
|
|
|
.btn.active {
|
|
background-color: var(--main-background);
|
|
border: 1px solid var(--accent);
|
|
}
|
|
|
|
div:target ~ .btn {
|
|
background-color: var(--highlight);
|
|
border: 1px solid var(--highlight);
|
|
}
|
|
|
|
div:target ~ .btn .icon {
|
|
filter: brightness(30%);
|
|
}
|
|
|
|
.btn:hover {
|
|
color: var(--highlight);
|
|
border: 1px solid var(--highlight);
|
|
text-decoration: none;
|
|
}
|
|
|
|
a:hover .icon,
|
|
.btn:hover .icon {
|
|
filter: invert(86%) sepia(8%) saturate(1976%) hue-rotate(159deg) brightness(180%) contrast(100%);
|
|
transition: .2s filter;
|
|
}
|
|
|
|
.btn-important, #nav_menu_read_all .read_all, #actualize {
|
|
font-weight: bold !important;
|
|
background-color: var(--accent) !important;
|
|
color: var(--main-background) !important;
|
|
}
|
|
|
|
.btn-important:hover, #nav_menu_read_all .read_all:hover, #actualize:hover {
|
|
background-color: var(--highlight) !important;
|
|
}
|
|
|
|
#btn-add.btn-important .icon, #actualize .icon {
|
|
filter: brightness(0);
|
|
}
|
|
|
|
.btn-attention {
|
|
color: var(--red) !important;
|
|
border: 1px solid var(--red) !important;
|
|
}
|
|
|
|
.btn-attention:hover {
|
|
background: var(--red);
|
|
transition: 0.2s background;
|
|
color: var(--main-background) !important;
|
|
}
|
|
|
|
.btn:hover,
|
|
svg:hover {
|
|
cursor: pointer;
|
|
}
|
|
|
|
.stick input,
|
|
.stick select,
|
|
.stick .btn {
|
|
border-radius: 0;
|
|
}
|
|
|
|
.stick input:first-child,
|
|
.stick select:first-child,
|
|
.stick .btn:first-child {
|
|
border-top-left-radius: 6px;
|
|
border-bottom-left-radius: 6px;
|
|
border-right-width: 0;
|
|
}
|
|
|
|
.dropdown-menu .stick input {
|
|
background-color: var(--light-bg);
|
|
border-color: var(--accent-border);
|
|
}
|
|
|
|
.dropdown-menu .stick input:focus {
|
|
background-color: var(--accent-bg);
|
|
}
|
|
|
|
.dropdown-menu .stick .btn {
|
|
border-color: var(--accent-border);
|
|
}
|
|
|
|
.stick input:hover,
|
|
.stick:hover input,
|
|
.stick:hover .btn {
|
|
border-color: var(--accent) !important
|
|
}
|
|
|
|
.stick .btn:hover,
|
|
.stick input:focus,
|
|
.stick input:focus ~ .btn {
|
|
border-color: var(--highlight) !important
|
|
}
|
|
|
|
|
|
.nav_menu .stick input,
|
|
.nav_menu .stick .btn {
|
|
border-radius: 6px;
|
|
border-right-width: 1px;
|
|
}
|
|
|
|
.nav_menu .stick #mark-read-menu .read_all.btn,
|
|
.nav_menu .dropdown-menu .stick.search input {
|
|
margin-right: 0;
|
|
border-top-right-radius: 0;
|
|
border-bottom-right-radius: 0;
|
|
}
|
|
|
|
.nav_menu .stick #mark-read-menu .dropdown-toggle.btn,
|
|
.nav_menu .dropdown-menu .stick.search .btn {
|
|
margin-left: 0;
|
|
border-left: 0;
|
|
border-top-left-radius: 0;
|
|
border-bottom-left-radius: 0;
|
|
}
|
|
|
|
|
|
.stick .btn:last-child {
|
|
margin-right: 0;
|
|
border-top-right-radius: 6px;
|
|
border-bottom-right-radius: 6px;
|
|
}
|
|
|
|
.stick .btn {
|
|
margin-top: 0;
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.stick.configure-feeds .btn {
|
|
margin-right: 0;
|
|
}
|
|
|
|
.header .stick,
|
|
.header .btn {
|
|
margin: 0
|
|
}
|
|
|
|
/*=== Navigation */
|
|
.dropdown-menu {
|
|
margin: 5px 0 0;
|
|
padding: 0.5rem 0 0.25rem 0;
|
|
background: var(--dropdown-bg);
|
|
font-size: 0.8rem;
|
|
border: none;
|
|
border-radius: 6px;
|
|
text-align: left;
|
|
}
|
|
|
|
.dropdown-header,
|
|
.dropdown-section .dropdown-section-title {
|
|
padding: 0.5rem 0.75rem;
|
|
font-weight: bold;
|
|
text-align: left;
|
|
}
|
|
|
|
.dropdown-menu .item > a,
|
|
.dropdown-menu .item > span,
|
|
.dropdown-menu .item > .as-link {
|
|
padding: 0 22px;
|
|
line-height: 2.5em;
|
|
font-size: inherit;
|
|
min-width: 200px;
|
|
}
|
|
|
|
.dropdown-menu .dropdown-section .item > a,
|
|
.dropdown-menu .dropdown-section .item > span,
|
|
.dropdown-menu .dropdown-section .item > .as-link {
|
|
padding-left: 2rem;
|
|
}
|
|
|
|
.dropdown-menu .dropdown-section .item:last-child {
|
|
margin-bottom: 0.5rem;
|
|
}
|
|
|
|
.dropdown-menu .item > a:focus,
|
|
.dropdown-menu .item > a:hover,
|
|
.dropdown-menu .item > button:focus:not([disabled]),
|
|
.dropdown-menu .item > button:hover:not([disabled]),
|
|
.dropdown-menu .item > label:focus:not(.noHover),
|
|
.dropdown-menu .item > label:hover:not(.noHover) {
|
|
background-color: var(--light-bg);
|
|
color: var(--text-default);
|
|
transition: .2s;
|
|
}
|
|
|
|
.dropdown-menu > .item[aria-checked="true"] > a::before {
|
|
font-weight: bold;
|
|
margin: 0 0 0 -14px;
|
|
}
|
|
|
|
.dropdown-menu .input select,
|
|
.dropdown-menu .input input {
|
|
margin: 0 auto 5px;
|
|
padding: 2px 5px;
|
|
}
|
|
|
|
.dropdown-menu > .item:hover > a {
|
|
text-decoration: none;
|
|
}
|
|
|
|
.dropdown-close {
|
|
backdrop-filter: grayscale(25%) brightness(0.9);
|
|
}
|
|
|
|
.dropdown-close a:hover {
|
|
background: none;
|
|
}
|
|
|
|
.dropdown-target:target ~ .dropdown-toggle::after {
|
|
background-color: var(--dropdown-bg);
|
|
border: none;
|
|
right: 13px;
|
|
bottom: -14px;
|
|
}
|
|
|
|
.dropdown-menu-scrollable .dropdown-close {
|
|
display: none;
|
|
}
|
|
|
|
.item ~ .dropdown-header,
|
|
.dropdown-section ~ .dropdown-section,
|
|
.item.separator {
|
|
border-top-color: var(--accent-border);
|
|
}
|
|
|
|
/*=== Alerts */
|
|
.alert {
|
|
color: var(--text-accent);
|
|
font-size: 0.9em;
|
|
border: 1px solid var(--border-elements);
|
|
border-radius: 6px;
|
|
background-color: var(--light-bg);
|
|
}
|
|
|
|
.alert-success {
|
|
border-color: var(--green);
|
|
}
|
|
|
|
.alert-head {
|
|
font-size: 1.15em;
|
|
}
|
|
|
|
.alert > a {
|
|
text-decoration: underline;
|
|
}
|
|
|
|
.alert-warn {
|
|
border-color: var(--orange);
|
|
}
|
|
|
|
.alert-error {
|
|
border-color: var(--red);
|
|
}
|
|
|
|
/*=== Icons */
|
|
.icon {
|
|
filter: invert(74%) sepia(29%) saturate(411%) hue-rotate(171deg) brightness(130%) contrast(85%);
|
|
}
|
|
|
|
img.favicon {
|
|
background: var(--text-accent);
|
|
border-radius: 4px;
|
|
}
|
|
|
|
/*=== Pagination */
|
|
.pagination {
|
|
padding: 0.5rem;
|
|
background-color: var(--accent-bg);
|
|
}
|
|
|
|
.pagination .item a {
|
|
border-radius: 6px;
|
|
}
|
|
|
|
.pagination .item.active a {
|
|
color: var(--highlight);
|
|
font-weight: bold;
|
|
}
|
|
|
|
.pagination .item a:hover {
|
|
background-color: var(--main-background);
|
|
color: var(--text-default);
|
|
transition: .2s;
|
|
}
|
|
|
|
/*=== Boxes */
|
|
.box {
|
|
background-color: var(--accent-bg);
|
|
border-radius: 10px;
|
|
}
|
|
|
|
.box .box-content {
|
|
padding-bottom: 1.5rem;
|
|
list-style: none;
|
|
}
|
|
|
|
.box .box-title {
|
|
padding-top: 0.75rem;
|
|
padding-bottom: 0.5rem;
|
|
border-bottom: 1px solid var(--nordX-background);
|
|
}
|
|
|
|
.box .box-title .configure {
|
|
padding-right: .25rem;
|
|
}
|
|
|
|
.box .box-title h2 {
|
|
color: var(--accent);
|
|
font-size: 1rem;
|
|
}
|
|
|
|
.box .box-title .configure:not([data-cat-position=""])::after {
|
|
top: .5rem;
|
|
}
|
|
|
|
.box .box-content .item {
|
|
padding: 0;
|
|
font-size: 0.9rem;
|
|
}
|
|
|
|
/*=== Draggable */
|
|
.drag-hover {
|
|
margin: 0 0 5px;
|
|
}
|
|
|
|
[draggable=true] {
|
|
cursor: grab;
|
|
}
|
|
|
|
/*=== Tree */
|
|
.tree {
|
|
margin: 10px 0;
|
|
}
|
|
|
|
.tree-folder-title .title {
|
|
background: inherit;
|
|
}
|
|
|
|
.tree-folder-title:hover button.dropdown-toggle .icon {
|
|
filter: invert(74%) sepia(29%) saturate(411%) hue-rotate(171deg) brightness(130%) contrast(85%);
|
|
}
|
|
|
|
.tree-folder-title button.dropdown-toggle:hover .icon {
|
|
filter: invert(86%) sepia(8%) saturate(1976%) hue-rotate(159deg) brightness(180%) contrast(100%);
|
|
}
|
|
|
|
.tree-folder.category {
|
|
border-bottom: 1px solid var(--main-background);
|
|
}
|
|
|
|
.tree-folder.category.active .tree-folder-title,
|
|
.tree-folder.category .tree-folder-title:hover,
|
|
.tree-folder.category:hover .tree-folder-title {
|
|
background: var(--light-bg);
|
|
}
|
|
|
|
.tree-folder .tree-folder-title:hover a,
|
|
.tree-folder.category.active .tree-folder-title:hover a,
|
|
.tree-folder .tree-folder-items .item.feed:hover a {
|
|
color: var(--text-default);
|
|
}
|
|
|
|
.tree-folder.category.active .tree-folder-title a {
|
|
color: var(--highlight);
|
|
}
|
|
|
|
.tree-folder-items > .item {
|
|
color: var(--text-default);
|
|
font-size: 0.8rem;
|
|
}
|
|
|
|
.tree-folder-items > .item > a {
|
|
text-decoration: none;
|
|
}
|
|
|
|
.tree-folder-title {
|
|
position: relative;
|
|
padding: 0.25rem 0.75rem;
|
|
font-size: 1rem;
|
|
}
|
|
|
|
.tree-folder-title .title:hover {
|
|
text-decoration: none;
|
|
}
|
|
|
|
.tree-folder.active .tree-folder-title {
|
|
font-weight: bold;
|
|
}
|
|
|
|
|
|
/*=== STRUCTURE */
|
|
/*===============*/
|
|
/*=== Header */
|
|
.header > .item {
|
|
vertical-align: middle;
|
|
text-align: center;
|
|
}
|
|
|
|
.header > .item.title h1 {
|
|
margin: 0.5em 0;
|
|
}
|
|
|
|
.header > .item.title h1 a {
|
|
text-decoration: none;
|
|
}
|
|
|
|
.header > .item.search input {
|
|
width: 350px;
|
|
}
|
|
|
|
.header > .item.title .logo {
|
|
filter: grayscale(100%) brightness(2.5);
|
|
}
|
|
|
|
.header > .item.title a:hover .logo {
|
|
filter: grayscale(85%) brightness(2.5);
|
|
}
|
|
|
|
/*=== Body */
|
|
.aside {
|
|
background-color: var(--accent-bg);
|
|
border-top-right-radius: 12px;
|
|
}
|
|
|
|
/*=== Aside main page */
|
|
.aside.aside_feed {
|
|
padding: 10px 0;
|
|
text-align: center;
|
|
}
|
|
|
|
.aside.nav-list .nav-section .item.active a,
|
|
.aside.nav-list .nav-section .item.active .as-link {
|
|
color: var(--highlight);
|
|
font-weight: bold;
|
|
}
|
|
|
|
.aside.nav-list .nav-section .item a:hover,
|
|
.aside.nav-list .nav-section .item .as-link:hover {
|
|
background-color: var(--main-background);
|
|
color: var(--text-default);
|
|
transition: .2s;
|
|
}
|
|
|
|
.aside.aside_feed .tree {
|
|
margin: 10px 0 50px;
|
|
}
|
|
|
|
.aside_feed .category .title:not([data-unread="0"]) {
|
|
width: calc(100% - 35px - 20px);
|
|
}
|
|
|
|
.aside_feed .tree-folder-items.active {
|
|
padding-bottom: 1rem;
|
|
background-color: var(--main-background);
|
|
}
|
|
|
|
.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;
|
|
}
|
|
|
|
.aside_feed .tree-folder-title button.dropdown-toggle {
|
|
margin: -0.5rem 0 -0.5rem -0.75rem;
|
|
padding: 0.5rem 0 0.5rem 0.75rem;
|
|
}
|
|
|
|
.aside_feed .tree-folder-items .item .dropdown-target:target ~ .dropdown-toggle > .icon,
|
|
.aside_feed .tree-folder-items .item:hover .dropdown-toggle > .icon,
|
|
.aside_feed .tree-folder-items .item.active .dropdown-toggle > .icon {
|
|
border-radius: 3px;
|
|
}
|
|
|
|
.aside .toggle_aside,
|
|
.dropdown-menu .toggle_aside,
|
|
#slider .toggle_aside,
|
|
.dropdown-header-close a {
|
|
background: var(--accent-bg);
|
|
border: 1px solid var(--accent-border);
|
|
box-sizing: border-box;
|
|
transition: 0.2s;
|
|
}
|
|
|
|
.aside .toggle_aside:hover,
|
|
#slider .toggle_aside:hover,
|
|
.dropdown-menu .toggle_aside:hover {
|
|
background-color: var(--main-background) !important;
|
|
border-color: var(--highlight) !important;
|
|
}
|
|
|
|
.item.feed.error > .item-title {
|
|
color: var(--red);
|
|
}
|
|
|
|
.item.feed.active {
|
|
background-color: var(--accent-bg);
|
|
}
|
|
|
|
.item.feed.active a {
|
|
color: var(--highlight);
|
|
}
|
|
|
|
.item.feed.active .item-title {
|
|
font-weight: bold;
|
|
}
|
|
|
|
li.item.active {
|
|
background-color: var(--main-background);
|
|
}
|
|
|
|
.item.feed:hover {
|
|
background-color: var(--accent-bg);
|
|
transition: .3s;
|
|
}
|
|
|
|
.feed .item-title:not([data-unread="0"]) {
|
|
font-weight: normal;
|
|
}
|
|
|
|
/*=== New article notification */
|
|
#new-article {
|
|
font-size: 0.9em;
|
|
text-align: center;
|
|
}
|
|
|
|
#new-article > a {
|
|
margin: 1rem auto;
|
|
width: 90%;
|
|
color: var(--purple);
|
|
border: 2px solid var(--purple);
|
|
border-radius: 6px;
|
|
font-weight: bold;
|
|
transition: 0.2s background-color, .2s color;
|
|
}
|
|
|
|
#new-article > a:hover {
|
|
background-color: var(--purple);
|
|
color: var(--main-background);
|
|
text-decoration: none;
|
|
}
|
|
|
|
/*=== Transition indication, e.g. day */
|
|
.transition {
|
|
padding: 0 10px;
|
|
font-weight: bold;
|
|
line-height: 3em;
|
|
}
|
|
|
|
.transition .name {
|
|
padding: 0 10px 0 0;
|
|
font-size: 1.8em;
|
|
opacity: 0.3;
|
|
font-style: italic;
|
|
text-align: right;
|
|
}
|
|
|
|
/*=== Feed article header and footer */
|
|
.flux_header {
|
|
position: relative;
|
|
font-size: 0.8rem;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.flux_header .title {
|
|
font-size: 0.8rem;
|
|
}
|
|
|
|
.flux .website .favicon {
|
|
padding: 0.25rem;
|
|
}
|
|
|
|
.flux .content .tags .icon {
|
|
padding: 0.25rem;
|
|
}
|
|
|
|
.flux .bottom {
|
|
font-size: 0.8rem;
|
|
text-align: center;
|
|
}
|
|
|
|
.flux_header:hover {
|
|
background-color: var(--accent-bg);
|
|
transition: .3s;
|
|
}
|
|
|
|
.flux.current {
|
|
background: var(--accent-bg);
|
|
border-left: 1px solid var(--highlight);
|
|
}
|
|
|
|
.flux.current > .flux_header {
|
|
background: linear-gradient(to right, transparent 0, transparent 1px, var(--accent-bg) 1px);
|
|
margin-left: -1px; /* Compensate increased border-left-width */
|
|
}
|
|
|
|
.flux:not(.current):hover .item .title {
|
|
background: var(--accent-bg);
|
|
transition: .3s;
|
|
}
|
|
|
|
.flux .flux_header .item .title {
|
|
color: var(--text-default);
|
|
}
|
|
|
|
.flux .flux_header .item .title .summary {
|
|
color: var(--text-accent);
|
|
font-size: 0.8rem;
|
|
font-style: italic;
|
|
opacity: 0.8;
|
|
}
|
|
|
|
.flux .flux_header .item .title .author {
|
|
color: var(--text-accent);
|
|
opacity: 0.8;
|
|
}
|
|
|
|
|
|
/*=== Feed article content */
|
|
.flux_content .content header h1.title {
|
|
margin: 1.5rem 0px;
|
|
}
|
|
|
|
.flux_content .content header h1.title a {
|
|
color: var(--highlight);
|
|
}
|
|
|
|
.content > footer .subtitle {
|
|
border-color: var(--border-elements);
|
|
}
|
|
|
|
.content > header .dropdown-menu .dropdown-header,
|
|
.content > footer .dropdown-menu .dropdown-header {
|
|
color: var(--text-default);
|
|
}
|
|
|
|
.content hr {
|
|
margin: 30px 10px;
|
|
height: 1px;
|
|
}
|
|
|
|
.content pre {
|
|
border: 1px solid var(--accent);
|
|
border-radius: 6px;
|
|
}
|
|
|
|
.content pre code {
|
|
border: none;
|
|
}
|
|
|
|
.content blockquote {
|
|
margin: 0;
|
|
padding: 5px 20px;
|
|
display: block;
|
|
}
|
|
|
|
.content blockquote p {
|
|
margin: 0;
|
|
}
|
|
|
|
#load_more.loading {
|
|
background-color: var(--accent);
|
|
}
|
|
|
|
#load_more.loading:hover {
|
|
background-color: var(--highlight);
|
|
}
|
|
|
|
/*=== Notification and actualize notification */
|
|
.notification {
|
|
background: var(--dropdown-bg);
|
|
color: var(--text-default);
|
|
font-size: 0.9rem;
|
|
border-radius: 6px;
|
|
border-color: var(--border-elements);
|
|
z-index: 9999;
|
|
font-weight: bold;
|
|
box-shadow: 0px 0px 10px var(--frss-box-shadow-color-transparent);
|
|
}
|
|
|
|
.notification.bad {
|
|
background-color: var(--red);
|
|
color: var(--nord0-polarnight);
|
|
}
|
|
|
|
.notification.bad .icon {
|
|
filter: brightness(60%);
|
|
}
|
|
|
|
.notification .close {
|
|
padding: 1.25rem;
|
|
line-height: 1;
|
|
}
|
|
|
|
.notification .close:hover {
|
|
background-color: var(--border-elements);
|
|
}
|
|
|
|
.notification .close:hover .icon {
|
|
filter: invert(86%) sepia(8%) saturate(1976%) hue-rotate(159deg) brightness(180%) contrast(100%);
|
|
}
|
|
|
|
/*=== Popup */
|
|
#popup-content {
|
|
background-color: var(--accent-bg);
|
|
}
|
|
|
|
#popup-txt {
|
|
display: none;
|
|
height: 100%;
|
|
}
|
|
|
|
/*=== Navigation menu (for articles) */
|
|
#nav_entries {
|
|
background: var(--accent-bg);
|
|
}
|
|
|
|
#nav_entries .item a:hover {
|
|
background-color: var(--main-background);
|
|
}
|
|
|
|
#bigMarkAsRead.big {
|
|
text-decoration: none;
|
|
}
|
|
|
|
#bigMarkAsRead:hover {
|
|
background-color: var(--accent-bg);
|
|
transition: .3s;
|
|
}
|
|
|
|
#bigMarkAsRead:hover .bigTick {
|
|
color: var(--text-default);
|
|
}
|
|
|
|
.bigTick {
|
|
color: var(--accent);
|
|
font-size: 4em;
|
|
}
|
|
|
|
/*=== Statistiques */
|
|
.stat > table td,
|
|
.stat > table th {
|
|
text-align: center;
|
|
}
|
|
|
|
.stat {
|
|
margin: 10px 0 20px;
|
|
}
|
|
|
|
/*=== Slider */
|
|
#slider {
|
|
background: var(--accent-bg);
|
|
}
|
|
|
|
/*=== DIVERS */
|
|
/*===========*/
|
|
.category .title.error::before {
|
|
color: var(--red);
|
|
}
|
|
|
|
|
|
.nav_menu {
|
|
padding: 5px 0;
|
|
text-align: center;
|
|
}
|
|
|
|
.nav_menu .btn {
|
|
margin: .125rem;
|
|
}
|
|
|
|
.nav_menu .group {
|
|
margin-right: 1rem;
|
|
margin-left: .125rem;
|
|
}
|
|
|
|
.theme-preview-list,
|
|
.theme-preview-list .properties {
|
|
border-color: var(--border-elements);
|
|
}
|
|
|
|
.theme-preview-list:hover,
|
|
.theme-preview-list:hover .properties {
|
|
border-color: var(--highlight);
|
|
}
|
|
|
|
.theme-preview-list .nav label {
|
|
color: var(--accent);
|
|
}
|
|
|
|
.theme-preview-list .nav label:hover {
|
|
color: var(--highlight)
|
|
}
|
|
|
|
/*=== PRINTER */
|
|
/*============*/
|
|
|
|
@media print {
|
|
.header, .aside,
|
|
.nav_menu, .transition,
|
|
.flux_header,
|
|
.flux_content .bottom,
|
|
.pagination,
|
|
#nav_entries {
|
|
display: none;
|
|
}
|
|
|
|
html, body {
|
|
background: #fff;
|
|
color: #000;
|
|
font-family: Serif;
|
|
}
|
|
|
|
#global,
|
|
.flux_content {
|
|
display: block !important;
|
|
}
|
|
|
|
.flux_content .content {
|
|
width: 100% !important;
|
|
}
|
|
}
|
|
|
|
/*=== PREVIEW */
|
|
/*===========*/
|
|
.preview_controls {
|
|
background-color: var(--light-bg);
|
|
border-color: var(--border-elements);
|
|
}
|
|
|
|
.preview_controls label {
|
|
display: inline;
|
|
}
|
|
|
|
.preview_controls label input[type="radio"] {
|
|
margin-top: -4px;
|
|
}
|
|
|
|
.preview_controls label + label {
|
|
margin-left: 1rem;
|
|
}
|
|
|
|
.preview_background {
|
|
background-color: transparent;
|
|
}
|
|
|
|
.drag-drop-marker {
|
|
border: 2px dashed var(--highlight);
|
|
}
|
|
|
|
/*BEGINS BASE.CSS*/
|
|
|
|
/*=== GENERAL */
|
|
/*============*/
|
|
|
|
/*=== Links */
|
|
a, button.as-link {
|
|
outline: none;
|
|
}
|
|
|
|
/*=== Forms */
|
|
option,
|
|
optgroup {
|
|
padding-left: 0.5rem;
|
|
}
|
|
|
|
optgroup::before {
|
|
padding-top: 1rem;
|
|
padding-bottom: 0.5rem;
|
|
color: var(--accent);
|
|
font-style: normal;
|
|
}
|
|
|
|
/*=== COMPONENTS */
|
|
/*===============*/
|
|
/*=== Forms */
|
|
.form-group.form-actions .btn {
|
|
margin-right: 1rem;
|
|
}
|
|
|
|
/*=== Navigation */
|
|
.nav-list {
|
|
font-size: 0.9rem;
|
|
}
|
|
|
|
.nav-list .item,
|
|
.nav-list .item.nav-header {
|
|
min-height: 2.5em;
|
|
line-height: 2.5;
|
|
}
|
|
|
|
.nav-list .item > a,
|
|
.nav-list .item > .as-link {
|
|
padding: 0 1rem;
|
|
}
|
|
|
|
.nav-list a:hover {
|
|
text-decoration: none;
|
|
}
|
|
|
|
.nav-list .nav-header {
|
|
padding: 0 1rem;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.nav-list .nav-form {
|
|
padding: 3px;
|
|
text-align: center;
|
|
}
|
|
|
|
/*=== Dropdown */
|
|
.dropdown-menu::after {
|
|
top: -5px;
|
|
border: none;
|
|
}
|
|
|
|
.dropdown-menu > .item > a,
|
|
.dropdown-menu > .item > span,
|
|
.dropdown-menu > .item > .as-link,
|
|
.dropdown-menu > .item > ul > .item > a,
|
|
.dropdown-menu > .item > ul > .item > span,
|
|
.dropdown-menu > .item > ul > .item > .as-link {
|
|
color: var(--text-accent) !important;
|
|
}
|
|
|
|
/*=== STRUCTURE */
|
|
/*===============*/
|
|
/*=== Header */
|
|
|
|
/*=== Body */
|
|
/*=== Aside main page (categories) */
|
|
.aside_feed .tree-folder-title > .title:not([data-unread="0"])::after {
|
|
margin: 10px 0;
|
|
padding: 0 0.5rem;
|
|
font-size: 0.9rem;
|
|
}
|
|
|
|
.aside .category .title:not([data-unread="0"])::after,
|
|
.aside .feed .item-title:not([data-unread="0"])::after {
|
|
margin: calc(var(--frss-padding-top-bottom)) 0 0 0;
|
|
text-align: right;
|
|
right: 0.25rem;
|
|
}
|
|
|
|
.aside .feed.active .item-title:not([data-unread="0"])::after {
|
|
color: var(--main-background);
|
|
border: none;
|
|
background-color: var(--highlight);
|
|
}
|
|
|
|
.aside .feed.active:hover .item-title:not([data-unread="0"])::after {
|
|
background-color: var(--text-default);
|
|
}
|
|
|
|
/*=== Aside main page (feeds) */
|
|
.aside_feed .tree-folder-items .dropdown-menu::after {
|
|
left: 2px;
|
|
}
|
|
|
|
/*=== Prompt (centered) */
|
|
.prompt input {
|
|
margin: 5px auto;
|
|
width: 100%;
|
|
}
|
|
|
|
/*=== Navigation menu (for articles) */
|
|
#stream-footer {
|
|
border-top: 0;
|
|
}
|
|
|
|
/*=== READER VIEW */
|
|
/*================*/
|
|
#stream.reader .flux {
|
|
background-color: var(--main-background);
|
|
border: none;
|
|
}
|
|
|
|
#stream.reader .flux .flux_content {
|
|
background-color: var(--accent-bg);
|
|
border: none;
|
|
border-radius: 12px;
|
|
}
|
|
|
|
/*=== GLOBAL VIEW */
|
|
/*================*/
|
|
.box.category .box-title .title {
|
|
font-weight: normal;
|
|
text-decoration: none;
|
|
text-align: left;
|
|
}
|
|
|
|
.box.category .title:not([data-unread="0"])::after {
|
|
background: none;
|
|
border: 0;
|
|
position: absolute;
|
|
top: 5px; right: 10px;
|
|
font-weight: bold;
|
|
box-shadow: none;
|
|
text-shadow: none;
|
|
}
|
|
|
|
#panel {
|
|
background-color: var(--main-background);
|
|
}
|
|
|
|
/*=== MOBILE */
|
|
/*===========*/
|
|
|
|
@media (max-width: 840px) {
|
|
.aside:target + .close-aside,
|
|
.configure .dropdown-target:target ~ .dropdown-close {
|
|
backdrop-filter: grayscale(60%) blur(1px);
|
|
}
|
|
|
|
.aside {
|
|
left: 0;
|
|
transition: width 200ms linear;
|
|
}
|
|
|
|
.aside.aside_feed {
|
|
padding: 0;
|
|
}
|
|
|
|
.nav.aside {
|
|
max-width: 300px;
|
|
border-radius: 0;
|
|
}
|
|
|
|
.configure .dropdown .dropdown-menu {
|
|
max-width: 300px;
|
|
}
|
|
|
|
.flux .website .favicon {
|
|
position: relative;
|
|
}
|
|
|
|
#overlay {
|
|
background-color: var(--accent-bg);
|
|
}
|
|
|
|
#slider.active {
|
|
background-color: var(--main-background);
|
|
}
|
|
|
|
#close-slider img {
|
|
display: initial;
|
|
}
|
|
|
|
#close-slider.active {
|
|
background: var(--main-background);
|
|
display: block;
|
|
width: 100%;
|
|
height: 50px;
|
|
z-index: 10;
|
|
text-align: center;
|
|
line-height: 50px;
|
|
border-bottom: 1px solid #ddd;
|
|
}
|
|
|
|
.stat.half {
|
|
grid-column: 1 / span 2;
|
|
}
|
|
|
|
.nav_menu .btn {
|
|
margin-bottom: .5rem;
|
|
}
|
|
|
|
.nav_menu .search input {
|
|
max-width: 97%;
|
|
width: 90px;
|
|
}
|
|
|
|
.nav_menu .search input:focus {
|
|
width: 400px;
|
|
}
|
|
|
|
.dropdown .dropdown-menu .item .stick.search {
|
|
width: 100%;
|
|
}
|
|
|
|
.post {
|
|
padding: 1rem;
|
|
}
|
|
|
|
.transition .name {
|
|
font-size: 1.1rem;
|
|
}
|
|
|
|
.pagination {
|
|
margin: 0 0 3.5em;
|
|
}
|
|
|
|
.notification {
|
|
top: 1%;
|
|
left: 2%;
|
|
right: 2%;
|
|
}
|
|
|
|
.notification .close {
|
|
display: block;
|
|
left: 0;
|
|
}
|
|
|
|
.notification .close:hover {
|
|
opacity: 0.5;
|
|
}
|
|
|
|
.notification .close .icon {
|
|
display: none;
|
|
}
|
|
|
|
.alert {
|
|
width: 85%;
|
|
}
|
|
|
|
.dropdown-menu {
|
|
margin: 0;
|
|
}
|
|
|
|
.dropdown .dropdown-menu {
|
|
border-radius: 6px;
|
|
}
|
|
|
|
#overlay .close {
|
|
background: var(--accent-bg);
|
|
border: 1px solid var(--accent-border);
|
|
box-sizing: border-box;
|
|
transition: 0.2s;
|
|
}
|
|
|
|
#overlay .close:hover {
|
|
background-color: var(--main-background) !important;
|
|
border-color: var(--highlight) !important;
|
|
}
|
|
|
|
.header .configure .dropdown .dropdown-menu {
|
|
border-radius: 0;
|
|
}
|
|
|
|
.form-group .group-name {
|
|
font-weight: bold;
|
|
padding: 0 0 0.25rem 0;
|
|
}
|
|
|
|
.form-group .group-name::after {
|
|
content: ':';
|
|
}
|
|
|
|
.form-group {
|
|
margin-top: 2rem;
|
|
margin-bottom: 2rem;
|
|
}
|
|
}
|