├── assets
├── latte.png
├── mocha.png
├── res.webp
├── frappe.png
└── macchiato.png
├── renovate.json
├── .github
└── workflows
│ └── whiskers-check.yml
├── .editorconfig
├── LICENSE
├── README.md
├── themes
├── catppuccin-frappe.css
├── catppuccin-latte.css
├── catppuccin-macchiato.css
└── catppuccin-mocha.css
└── freshrss.tera
/assets/latte.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/catppuccin/freshrss/HEAD/assets/latte.png
--------------------------------------------------------------------------------
/assets/mocha.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/catppuccin/freshrss/HEAD/assets/mocha.png
--------------------------------------------------------------------------------
/assets/res.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/catppuccin/freshrss/HEAD/assets/res.webp
--------------------------------------------------------------------------------
/assets/frappe.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/catppuccin/freshrss/HEAD/assets/frappe.png
--------------------------------------------------------------------------------
/assets/macchiato.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/catppuccin/freshrss/HEAD/assets/macchiato.png
--------------------------------------------------------------------------------
/renovate.json:
--------------------------------------------------------------------------------
1 | {
2 | "$schema": "https://docs.renovatebot.com/renovate-schema.json",
3 | "extends": [
4 | "local>catppuccin/renovate-config"
5 | ]
6 | }
7 |
--------------------------------------------------------------------------------
/.github/workflows/whiskers-check.yml:
--------------------------------------------------------------------------------
1 | name: whiskers
2 |
3 | on:
4 | workflow_dispatch:
5 | push:
6 | branches: [main]
7 | pull_request:
8 | branches: [main]
9 |
10 | jobs:
11 | run:
12 | uses: catppuccin/actions/.github/workflows/whiskers-check.yml@v1
13 | with:
14 | args: freshrss.tera
15 | secrets: inherit
16 |
--------------------------------------------------------------------------------
/.editorconfig:
--------------------------------------------------------------------------------
1 | # EditorConfig helps developers define and maintain consistent
2 | # coding styles between different editors and IDEs
3 | # EditorConfig is awesome: https://EditorConfig.org
4 |
5 | root = true
6 |
7 | [*]
8 | charset = utf-8
9 | indent_size = 2
10 | indent_style = space
11 | end_of_line = lf
12 | insert_final_newline = true
13 | trim_trailing_whitespace = true
14 |
15 | # go
16 | [*.go]
17 | indent_style = tab
18 | indent_size = 4
19 |
20 | # python
21 | [*.{ini,py,py.tpl,rst}]
22 | indent_size = 4
23 |
24 | # rust
25 | [*.rs]
26 | indent_size = 4
27 |
28 | # documentation, utils
29 | [*.{md,mdx,diff}]
30 | trim_trailing_whitespace = false
31 |
32 | # windows shell scripts
33 | [*.{cmd,bat,ps1}]
34 | end_of_line = crlf
35 |
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | MIT License
2 |
3 | Copyright (c) 2021 Catppuccin
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 |
2 | 
3 | 
4 | Catppuccin for FreshRSS
5 |
6 |
7 |
8 |
9 | 
10 | 
11 | 
12 |
13 |
14 |
15 | 
16 |
17 |
18 | ## Previews
19 |
20 |
21 | 🌻 Latte
22 | 
23 |
24 |
25 | 🪴 Frappé
26 | 
27 |
28 |
29 | 🌺 Macchiato
30 | 
31 |
32 |
33 | 🌿 Mocha
34 | 
35 |
36 |
37 | ## Usage
38 |
39 | 1. Copy the contents of your preferred flavor from [`themes/`](./themes/).
40 | 2. Navigate to **Settings** > **Configuration: Display**.
41 | 3. Change **Theme** to "Nord theme" by joelchrono12.
42 | 4. Navigate to **Configuration: Extensions** and make sure the "Custom CSS" plugin by Marien Fressinaud is installed.
43 | 5. Click the gear icon and paste the CSS copied in Step 1.
44 | 6. Click _Submit_ and refresh the page.
45 |
46 | ## 💝 Thanks to
47 |
48 | - [Isabel Roses](https://github.com/isabelroses)
49 |
50 |
51 |
52 |
53 | 
54 |
55 |
56 |
57 | Copyright © 2021-present Catppuccin Org
58 |
59 |
60 |
61 | 
62 |
63 |
--------------------------------------------------------------------------------
/themes/catppuccin-frappe.css:
--------------------------------------------------------------------------------
1 | @charset "UTF-8";
2 |
3 | :root {
4 | /* Set sans-serif & mono fonts */
5 | --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;
6 | --mono-font: "mononoki Nerd Font", "IBM Plex Mono", "Roboto Mono", "Ubuntu Mono", "Fira Code", "Overpass Mono", Monaco, "Droid Sans Mono", monospace;
7 | /*This is my dark themed color scheme*/
8 | --bg: #303446;
9 | --accent-bg: rgb(41, 44, 60);
10 | --text: #c6d0f5;
11 | --text-light: #b5bfe2;
12 | --border: #292c3c;
13 | --accent: #a5adce;
14 | --accent-light: #e78284;
15 | --code: #ef9f76;
16 | --alert: #a6d189;
17 | --alert-bg: #85c1dc;
18 | --code-bg: #414559;
19 | --hover: #626880;
20 |
21 | --frss-background-color-transparent: #303446;
22 | }
23 |
24 | /*=== GENERAL */
25 | /*============*/
26 |
27 | @font-face {
28 | /* src: local('Open Sans'), local('OpenSans'),
29 | url('../fonts/OpenSans.woff2') format('woff2'),
30 | url('../fonts/OpenSans.woff') format('woff');*/
31 | }
32 |
33 | html,
34 | body {
35 | background: var(--bg);
36 | color: var(--text);
37 | font-family: var(--sans-font);
38 | }
39 |
40 | /*=== Links */
41 | a {
42 | color: var(--accent);
43 | }
44 |
45 | a:hover {
46 | color: var(--accent);
47 | }
48 |
49 |
50 | kbd {
51 | color: var(--code);
52 | background-color: var(--accent-bg);
53 | }
54 |
55 | legend {
56 | margin: 20px 0 5px;
57 | padding: 5px 0;
58 | font-size: 1.4em;
59 | }
60 |
61 | label {
62 | min-height: 25px;
63 | padding: 5px 0;
64 | cursor: pointer;
65 | }
66 |
67 | input,
68 | select,
69 | textarea {
70 | margin: 5px;
71 | padding: 5px;
72 | color: var(--text);
73 | border: 1px solid var(--accent);
74 | border-radius: 6px;
75 | border-color: var(--accent);
76 | background-color: var(--bg);
77 | min-height: 25px;
78 | line-height: 25px;
79 | vertical-align: middle;
80 | }
81 |
82 | input:disabled,
83 | select:disabled {
84 | color: #aaa;
85 | border-color: var(--accent);
86 | }
87 |
88 | button {
89 | font-family: var(--sans-font);
90 | }
91 |
92 | button.as-link,
93 | button.as-link:hover,
94 | button.as-link:active {
95 | background: transparent;
96 | /* background-color: var(--bg);A*/
97 | }
98 |
99 | button.as-link[disabled] {
100 | color: #ddd !important;
101 | }
102 |
103 | /*=== Tables */
104 | form td,
105 | form th {
106 | font-weight: normal;
107 | }
108 |
109 | .table-wrapper {
110 | overflow-x: auto;
111 | }
112 |
113 | table {
114 | max-width: 100%;
115 |
116 | border-collapse: collapse;
117 |
118 | }
119 |
120 | table tr {
121 | border-bottom: 1px solid
122 | }
123 |
124 | table th,
125 | table td {
126 | padding: 10px 20px;
127 | }
128 |
129 | table td span {
130 | padding: 5px;
131 | color: dimgrey;
132 | /*display: none;*/
133 | font-size: 10px;
134 | font-weight: bold;
135 | /*position: absolute;*/
136 | }
137 |
138 | .form-group.form-actions {
139 | padding: 5px 0;
140 | }
141 |
142 | .form-group .group-name {
143 | padding: 10px 0;
144 | }
145 |
146 | .form-group .group-controls {
147 | padding: 5px 0;
148 | min-height: 25px;
149 | }
150 |
151 | /*=== Buttons */
152 | .btn,
153 | a.btn {
154 | margin: .3rem .3rem;
155 | background: var(--accent-bg);
156 | color: var(--accent);
157 | border: none;
158 | border-radius: 5px;
159 |
160 | text-decoration: none;
161 | transition: .4s;
162 | }
163 |
164 | a.btn.active {
165 | background-color: var(--accent-bg);
166 | border: 1px solid var(--border);
167 | }
168 |
169 | .btn {
170 | padding: 5px 10px;
171 | min-height: 37px;
172 | min-width: 15px;
173 | font-size: 0.9rem;
174 | vertical-align: middle;
175 | }
176 |
177 | a.btn {
178 | min-height: 25px;
179 | line-height: 25px;
180 | }
181 |
182 | .btn-important,
183 | #nav_menu_read_all .read_all,
184 | #actualize {
185 | font-weight: bold !important;
186 | background-color: var(--accent) !important;
187 | color: var(--bg) !important;
188 | }
189 |
190 | .flux .horizontal-list .item .read .icon {
191 | filter: invert(74%) sepia(29%) saturate(411%) hue-rotate(171deg) brightness(200%) contrast(95%);
192 | }
193 |
194 | #btn-add {
195 | margin: 0;
196 | }
197 |
198 | #btn-add.btn-important .icon,
199 | #actualize .icon {
200 | filter: brightness(0);
201 | }
202 |
203 | .btn:hover,
204 | svg:hover {
205 | opacity: .8;
206 | cursor: pointer;
207 | border: 0;
208 | }
209 |
210 | .stick input {
211 | margin: 0 0 0 0;
212 | }
213 |
214 | .stick .btn {
215 | margin-top: 0;
216 | margin-bottom: 0;
217 | }
218 |
219 | .stick {
220 | margin: 0 5px;
221 | }
222 |
223 | .header .stick,
224 | .header .btn {
225 | margin: 0
226 | }
227 |
228 | /*=== Navigation */
229 | .dropdown-menu {
230 | margin: 5px 0 0;
231 | padding: 0.5rem 0 0.25rem 0;
232 | background: var(--accent-bg);
233 | font-size: 0.8rem;
234 | border: 1px solid var(--border);
235 | border-radius: 6px;
236 | text-align: left;
237 | }
238 |
239 | .dropdown-header,
240 | .dropdown-section .dropdown-section-title {
241 | padding: 0 5px 5px;
242 | font-weight: bold;
243 | text-align: left;
244 | }
245 |
246 | .dropdown-menu .item>a,
247 | .dropdown-menu .item>span,
248 | .dropdown-menu .item>.as-link {
249 | padding: 0 22px;
250 | color: var(--text);
251 | line-height: 2.5em;
252 | font-size: inherit;
253 | min-width: 200px;
254 | }
255 |
256 | .dropdown-menu .dropdown-section .item>a,
257 | .dropdown-menu .dropdown-section .item>span,
258 | .dropdown-menu .dropdown-section .item>.as-link {
259 | padding-left: 2rem;
260 | }
261 |
262 | .dropdown-menu .dropdown-section .item:last-child {
263 | margin-bottom: 0.5rem;
264 | }
265 |
266 | .dropdown-menu .item>a:hover,
267 | .dropdown-menu .item>button:hover:not([disabled]),
268 | .dropdown-menu .item>label:hover:not(.noHover) {
269 | /* no hover color */
270 | }
271 |
272 | .dropdown-menu>.item[aria-checked="true"]>a::before {
273 | font-weight: bold;
274 | margin: 0 0 0 -14px;
275 | }
276 |
277 | .dropdown-menu .input select,
278 | .dropdown-menu .input input {
279 | margin: 0 auto 5px;
280 | padding: 2px 5px;
281 | }
282 |
283 | .dropdown-menu>.item:hover>a {
284 | text-decoration: none;
285 | }
286 |
287 | .dropdown-close {
288 | display: inline;
289 | }
290 |
291 | .dropdown-close a {
292 | background: none;
293 | display: block;
294 | font-size: 0;
295 | position: fixed;
296 | top: 0;
297 | bottom: 0;
298 | left: 0;
299 | right: 0;
300 | z-index: -11;
301 | cursor: default;
302 | }
303 |
304 | .dropdown-close a:hover {
305 | background: none;
306 | }
307 |
308 | .dropdown div.dropdown-close {
309 | display: none;
310 | }
311 |
312 | .dropdown-target:target~div.dropdown-close {
313 | display: block;
314 | z-index: 999;
315 | position: relative;
316 | }
317 |
318 | .dropdown-target:target~.dropdown-toggle::after {
319 | background-color: var(--accent-bg);
320 | border-top: 1px solid var(--border);
321 | border-left: 1px solid var(--border);
322 | }
323 |
324 | .dropdown-menu-scrollable .dropdown-close {
325 | display: none;
326 | }
327 |
328 | .item~.dropdown-header,
329 | .dropdown-section~.dropdown-section,
330 | .item.separator {
331 | border-top-color: var(--border);
332 | }
333 |
334 | /*=== Alerts */
335 | .alert {
336 | font-size: 0.9em;
337 | border-radius: 6px;
338 | }
339 |
340 | .alert-success {
341 | color: var(--bg);
342 | background-color: var(--alert-bg)
343 | }
344 |
345 | .alert-head {
346 | font-size: 1.15em;
347 | }
348 |
349 | .alert>a {
350 | text-decoration: underline;
351 | }
352 |
353 | .alert-warn {
354 | border-radius: 6px;
355 | background-color: var(--code-bg);
356 | }
357 |
358 | .alert-error {
359 | background-color: var(--accent-light);
360 | color: var(--bg);
361 | }
362 |
363 | /*=== Icons */
364 | .icon {
365 | filter: invert(74%) sepia(29%) saturate(411%) hue-rotate(171deg) brightness(130%) contrast(85%);
366 | }
367 |
368 | img.favicon {
369 | background: var(--text-light);
370 | border-radius: 4px;
371 | }
372 |
373 | /*=== Pagination */
374 | .pagination {
375 | width: 100%;
376 | }
377 |
378 | .pagination .pager-first,
379 | .pagination .pager-previous,
380 | .pagination .pager-next,
381 | .pagination .pager-last {
382 | width: 100px;
383 | }
384 |
385 | /*=== Boxes */
386 | .box {
387 | background-color: var(--accent-bg);
388 | border: 1px solid var(--border);
389 | border-radius: 6px;
390 | }
391 |
392 | .box .box-title {
393 | margin: 0;
394 | padding: 5px 10px;
395 | }
396 |
397 | .box .box-content {
398 | max-height: 260px;
399 | }
400 |
401 | .box .box-content .item {
402 | padding: 0 10px;
403 | font-size: 0.9rem;
404 | }
405 |
406 | /*=== Draggable */
407 | .drag-hover {
408 | margin: 0 0 5px;
409 | border-bottom: 2px solid var(--border);
410 | }
411 |
412 | [draggable=true] {
413 | cursor: grab;
414 | }
415 |
416 | /*=== Tree */
417 | .tree {
418 | margin: 10px 0;
419 | }
420 |
421 | .tree-folder-title .title {
422 | background: inherit;
423 | color: var(--text);
424 | }
425 |
426 | .tree-folder.category {
427 | border-bottom: 1px solid var(--bg);
428 | }
429 |
430 | .tree-folder-items>.item {
431 | color: var(--text);
432 | font-size: 0.8rem;
433 | }
434 |
435 | .tree-folder-items>.item>a {
436 | text-decoration: none;
437 | }
438 |
439 | .tree-folder-title {
440 | position: relative;
441 | padding: 0.25rem 0.75rem;
442 | font-size: 1rem;
443 | }
444 |
445 | .tree-folder-title .title:hover {
446 | text-decoration: none;
447 | }
448 |
449 | .tree-folder.active .tree-folder-title {
450 | font-weight: bold;
451 | }
452 |
453 |
454 | /*=== STRUCTURE */
455 | /*===============*/
456 | /*=== Header */
457 | .header>.item {
458 | vertical-align: middle;
459 | text-align: center;
460 | }
461 |
462 | .header>.item.title h1 {
463 | margin: 0.5em 0;
464 | }
465 |
466 | .header>.item.title h1 a {
467 | text-decoration: none;
468 | }
469 |
470 | .header>.item.search input {
471 | width: 350px;
472 | }
473 |
474 | .header>.item.title .logo {
475 | filter: grayscale(100%) brightness(2.5);
476 | }
477 |
478 | .header>.item.title a:hover .logo {
479 | filter: grayscale(85%) brightness(2.5);
480 | }
481 |
482 | /*=== Body */
483 | .aside {
484 | background-color: var(--accent-bg);
485 | border-radius: 12px;
486 | }
487 |
488 | /*=== Aside main page */
489 | .aside.aside_feed {
490 | padding: 10px 0;
491 | text-align: center;
492 | }
493 |
494 | .aside.aside_feed .tree {
495 | margin: 10px 0 50px;
496 | }
497 |
498 | .aside_feed .category .title:not([data-unread="0"]) {
499 | width: calc(100% - 35px - 20px);
500 | }
501 |
502 | .aside_feed .tree-folder-items.active {
503 | background-color: var(--bg);
504 | }
505 |
506 | .aside.aside_feed .nav-form input,
507 | .aside.aside_feed .nav-form select {
508 | width: 140px;
509 | }
510 |
511 | .aside.aside_feed .nav-form .dropdown .dropdown-menu {
512 | right: -20px;
513 | }
514 |
515 | .aside.aside_feed .nav-form .dropdown .dropdown-menu::after {
516 | right: 33px;
517 | }
518 |
519 | .aside_feed .tree-folder-items .item .dropdown-target:target~.dropdown-toggle>.icon,
520 | .aside_feed .tree-folder-items .item:hover .dropdown-toggle>.icon,
521 | .aside_feed .tree-folder-items .item.active .dropdown-toggle>.icon {
522 | border-radius: 3px;
523 | }
524 |
525 | .item.feed.error>.item-title {
526 | color: var(--accent-light);
527 | }
528 |
529 | .item.feed.active {
530 | background-color: var(--accent-bg);
531 | font-weight: bold;
532 |
533 | }
534 |
535 | li.item.active {
536 | background-color: var(--bg);
537 | font-weight: bold;
538 | }
539 |
540 | .item.feed:hover {
541 | background-color: var(--hover);
542 | transition: .4s;
543 | }
544 |
545 | /*=== New article notification */
546 | #new-article {
547 | font-size: 0.9em;
548 | text-align: center;
549 | }
550 |
551 | #new-article>a {
552 | line-height: 3em;
553 | font-weight: bold;
554 | }
555 |
556 | #new-article>a:hover {
557 | text-decoration: none;
558 | }
559 |
560 | /*=== Day indication */
561 | .day {
562 | padding: 0 10px;
563 | font-weight: bold;
564 | line-height: 3em;
565 | }
566 |
567 | .day .name {
568 | padding: 0 10px 0 0;
569 | font-size: 1.8em;
570 | opacity: 0.3;
571 | font-style: italic;
572 | text-align: right;
573 | }
574 |
575 | .name {
576 | display: none;
577 | }
578 |
579 |
580 | /*=== Feed article header and footer */
581 | .flux_header {
582 | position: relative;
583 | font-size: 0.8rem;
584 | cursor: pointer;
585 | }
586 |
587 | .flux_header .title {
588 | font-size: 0.8rem;
589 | }
590 |
591 | .flux .website .favicon {
592 | padding: 0.25rem;
593 | position: absolute;
594 | }
595 |
596 | .flux .website span {
597 | margin-left: 2rem;
598 | }
599 |
600 | .flux .item.date {
601 | width: 155px;
602 | text-align: right;
603 | overflow: hidden;
604 | font-size: 0.7rem;
605 | }
606 |
607 | .flux .bottom {
608 | font-size: 0.8rem;
609 | text-align: center;
610 | }
611 |
612 | .flux:not(.current) .flux_header:hover,
613 | .flux:not(.current) .flux_header:hover .item.title {
614 | background-color: var(--hover);
615 | transition: false;
616 | }
617 |
618 | .flux.current {
619 | background: var(--accent-bg);
620 | }
621 |
622 | .flux .item.title a {
623 | color: var(--text);
624 | }
625 |
626 | .flux .item.title .summary {
627 | color: var(--text-light);
628 | opacity: 0.8;
629 | }
630 |
631 | .flux .item.title .author {
632 | color: var(--text-light);
633 | opacity: 0.8;
634 | }
635 |
636 |
637 | /*=== Feed article content */
638 | .content {
639 | margin: auto;
640 | padding: 20px 10px;
641 | min-height: 20em;
642 | line-height: 1.7em;
643 | word-wrap: break-word;
644 | }
645 |
646 | .hide_posts>.flux:not(.active)>.flux_content {
647 | display: none;
648 | }
649 |
650 | .content hr {
651 | margin: 30px 10px;
652 | height: 1px;
653 | }
654 |
655 | .content pre {
656 | margin: 10px auto;
657 | padding: 10px 20px;
658 | overflow: auto;
659 | font-size: 0.9rem;
660 | border: 1px solid var(--accent);
661 | border-radius: 6px;
662 |
663 | }
664 |
665 | .content code {
666 | padding: 2px 5px;
667 | }
668 |
669 | .content pre code {
670 | border: none;
671 | }
672 |
673 | .content blockquote {
674 | margin: 0;
675 | padding: 5px 20px;
676 | display: block;
677 | }
678 |
679 | .content blockquote p {
680 | margin: 0;
681 | }
682 |
683 | /*=== Notification and actualize notification */
684 | .notification {
685 | padding: 0 0 0 5px;
686 | background: var(--bg);
687 | color: var(--text);
688 | font-size: 0.9em;
689 | /*border: 1px solid #aaa;*/
690 | border-radius: 6px;
691 | z-index: 10;
692 | text-align: center;
693 | font-weight: bold;
694 | line-height: 3em;
695 | vertical-align: middle;
696 | }
697 |
698 | .notification.closed {
699 | opacity: 0;
700 | visibility: hidden;
701 | }
702 |
703 | /*=== Popup */
704 | #popup {
705 | background-color: rgb(0, 0, 0, .4);
706 | }
707 |
708 | #popup-content {
709 | background-color: var(--accent-bg);
710 | box-shadow: 0 0 1px #d8dee9, 1px 2px 3px var(--bg);
711 | }
712 |
713 | #popup-close:hover,
714 | #popup-close:focus {
715 | color: #d8dee9;
716 | }
717 |
718 | #popup-txt {
719 | display: none;
720 | height: 100%;
721 | }
722 |
723 | /*=== Navigation menu (for articles) */
724 | #nav_entries {
725 | margin: 0;
726 | background: var(--accent-bg);
727 | text-align: center;
728 | line-height: 3em;
729 | }
730 |
731 | #bigMarkAsRead {
732 | text-decoration: none;
733 | }
734 |
735 | .bigTick {
736 | font-size: 4em;
737 | }
738 |
739 | /*=== Statistiques */
740 | .stat>table td,
741 | .stat>table th {
742 | text-align: center;
743 | }
744 |
745 | .stat {
746 | margin: 10px 0 20px;
747 | }
748 |
749 | /*=== Slider */
750 | #slider {
751 | background: var(--accent-bg);
752 | border-left: 1px solid var(--border);
753 | }
754 |
755 | /*=== DIVERS */
756 | /*===========*/
757 | .category .title.error::before {
758 | color: var(--accent-light);
759 | }
760 |
761 |
762 | .nav_menu {
763 | padding: 5px 0;
764 | text-align: center;
765 | }
766 |
767 | /*=== PRINTER */
768 | /*============*/
769 |
770 | @media print {
771 |
772 | .header,
773 | .aside,
774 | .nav_menu,
775 | .day,
776 | .flux_header,
777 | .flux_content .bottom,
778 | .pagination,
779 | #nav_entries {
780 | display: none;
781 | }
782 |
783 | html,
784 | body {
785 | background: #fff;
786 | color: #000;
787 | font-family: Serif;
788 | }
789 |
790 | #global,
791 | .flux_content {
792 | display: block !important;
793 | }
794 |
795 | .flux_content .content {
796 | width: 100% !important;
797 | }
798 |
799 | .flux_content .content a {
800 | color: #000;
801 | }
802 | }
803 |
804 | /*=== PREVIEW */
805 | /*===========*/
806 | .preview_controls {
807 | margin-left: auto;
808 | margin-right: auto;
809 | padding: 1rem;
810 | max-width: 1000px;
811 | text-align: center;
812 | background-color: #eee;
813 | border: 1px solid #e0e0e0;
814 | border-radius: .25rem;
815 | }
816 |
817 | .preview_controls label {
818 | display: inline;
819 | }
820 |
821 | .preview_controls label input[type="radio"] {
822 | margin-top: -4px;
823 | }
824 |
825 | .preview_controls label+label {
826 | margin-left: 1rem;
827 | }
828 |
829 | .preview_background {
830 | background-color: transparent;
831 | }
832 |
833 | .drag-drop-marker {
834 | margin: -1px;
835 | }
836 |
837 |
838 | /*BEGINS BASE.CSS*/
839 |
840 | /*=== GENERAL */
841 | /*============*/
842 |
843 | /*=== Links */
844 | a,
845 | button.as-link {
846 | outline: none;
847 | }
848 |
849 | /*=== Forms */
850 | textarea {
851 | width: 360px;
852 | height: 100px;
853 | }
854 |
855 | option {
856 | padding: 0 .5em;
857 | }
858 |
859 | /*=== COMPONENTS */
860 | /*===============*/
861 | /*=== Forms */
862 | .form-group.form-actions .btn {
863 | margin: 0 10px;
864 | }
865 |
866 | /*=== Navigation */
867 | .nav-list {
868 | font-size: 0.9rem;
869 | }
870 |
871 | .nav-list .item,
872 | .nav-list .item.nav-header {
873 | min-height: 2.5em;
874 | line-height: 2.5;
875 | }
876 |
877 | .nav-list .item>a {
878 | padding: 0 1rem;
879 | }
880 |
881 | .nav-list a:hover {
882 | text-decoration: none;
883 | background-color: var(--hover);
884 | }
885 |
886 | .nav-list .nav-header {
887 | padding: 0 1rem;
888 | font-weight: bold;
889 | }
890 |
891 | .nav-list .nav-form {
892 | padding: 3px;
893 | text-align: center;
894 | }
895 |
896 | /*=== Dropdown */
897 | .dropdown-menu::after {
898 | position: absolute;
899 | top: -6px;
900 | right: 13px;
901 | width: 10px;
902 | height: 10px;
903 | z-index: -10;
904 | transform: rotate(45deg);
905 | border-color: var(--border);
906 | }
907 |
908 | .dropdown-menu>.item>a:hover,
909 | .dropdown-menu>.item>span:hover,
910 | .dropdown-menu>.item>.as-link:hover {
911 | color: var(--main-text);
912 | background-color: var(--hover);
913 | transition: .4s;
914 | }
915 |
916 | /*=== Pagination */
917 | .pagination .item a {
918 | font-style: italic;
919 | }
920 |
921 | /*=== STRUCTURE */
922 | /*===============*/
923 | /*=== Header */
924 |
925 | /*=== Body */
926 | /*=== Aside main page (categories) */
927 | .aside_feed .tree-folder-title>.title:not([data-unread="0"])::after {
928 | position: absolute;
929 | right: 0;
930 | margin: 10px 0;
931 | padding: 0 10px;
932 | font-size: 0.9rem;
933 | }
934 |
935 | /*=== Aside main page (feeds) */
936 | .aside_feed .tree-folder-items .dropdown-menu::after {
937 | left: 2px;
938 | }
939 |
940 |
941 | /*=== Configuration pages */
942 | .post {
943 | padding: 10px 50px;
944 | font-size: 0.9em;
945 | }
946 |
947 | .post form {
948 | margin: 10px 0;
949 | }
950 |
951 | .post.content {
952 | max-width: 550px;
953 | }
954 |
955 | /*=== Prompt (centered) */
956 | .prompt input {
957 | margin: 5px auto;
958 | width: 100%;
959 | }
960 |
961 | /*=== Navigation menu (for articles) */
962 | /*=== READER VIEW */
963 | /*================*/
964 | #stream.reader .flux {
965 | background: #242933;
966 | border: none;
967 | }
968 |
969 | #stream.reader .flux .content {
970 | background-color: #2e3440;
971 | border: none;
972 | }
973 |
974 | #stream.reader .flux .author {
975 | margin: 0 0 10px;
976 | font-size: 90%;
977 | }
978 |
979 | /*=== GLOBAL VIEW */
980 | /*================*/
981 | .box.category .box-title .title {
982 | font-weight: normal;
983 | text-decoration: none;
984 | text-align: left;
985 | }
986 |
987 | .box.category .title:not([data-unread="0"])::after {
988 | background: none;
989 | border: 0;
990 | position: absolute;
991 | top: 5px;
992 | right: 10px;
993 | font-weight: bold;
994 | box-shadow: none;
995 | text-shadow: none;
996 | }
997 |
998 | #panel {
999 | background-color: var(--bg);
1000 | }
1001 |
1002 | /*=== MOBILE */
1003 | /*===========*/
1004 |
1005 | @media (max-width: 840px) {
1006 | .aside:target+.close-aside {
1007 | background: rgba(0, 0, 0, 0.2);
1008 | display: block;
1009 | font-size: 0;
1010 | position: fixed;
1011 | top: 0;
1012 | bottom: 0;
1013 | left: 0;
1014 | right: 0;
1015 | cursor: pointer;
1016 | z-index: 99;
1017 | }
1018 |
1019 | .nav_mobile {
1020 | display: block;
1021 | }
1022 |
1023 | .aside {
1024 | position: fixed;
1025 | top: 0;
1026 | bottom: 0;
1027 | left: 0;
1028 | width: 0;
1029 | overflow: hidden;
1030 | z-index: 100;
1031 | transition: width 200ms linear;
1032 | }
1033 |
1034 | .aside.aside_feed {
1035 | padding: 0;
1036 | }
1037 |
1038 | .aside:target,
1039 | .reader .aside:target {
1040 | width: 90%;
1041 | height: 100vh;
1042 | }
1043 |
1044 | .aside_feed .configure-feeds {
1045 | margin-top: 10px;
1046 | }
1047 |
1048 | .flux_header .item.website {
1049 | width: 40px;
1050 | }
1051 |
1052 | .flux:not(.current):hover .item.title {
1053 | position: relative;
1054 | width: auto;
1055 | white-space: nowrap;
1056 | }
1057 |
1058 | .flux .website .favicon {
1059 | position: relative;
1060 | }
1061 |
1062 | .notification {
1063 | top: 0;
1064 | left: 0;
1065 | right: 0;
1066 | }
1067 |
1068 | #nav_entries {
1069 | width: 100%;
1070 | }
1071 |
1072 | #panel {
1073 | top: 25px;
1074 | bottom: 30px;
1075 | left: 0;
1076 | right: 0;
1077 | }
1078 |
1079 | #panel .close {
1080 | top: 0;
1081 | right: 0;
1082 | left: auto;
1083 | bottom: auto;
1084 | display: inline-block;
1085 | width: 30px;
1086 | height: 30px;
1087 | }
1088 |
1089 | #slider.active {
1090 | left: 0;
1091 | top: 50px;
1092 | background-color: var(--bg);
1093 | }
1094 |
1095 | #close-slider img {
1096 | display: initial;
1097 | }
1098 |
1099 | #close-slider.active {
1100 | background: var(--bg);
1101 | display: block;
1102 | width: 100%;
1103 | height: 50px;
1104 | z-index: 10;
1105 | text-align: center;
1106 | line-height: 50px;
1107 | border-bottom: 1px solid #ddd;
1108 | }
1109 |
1110 | .stat.half {
1111 | grid-column: 1 / span 2;
1112 | }
1113 |
1114 | .nav_menu .btn {
1115 | margin: 5px 10px;
1116 | }
1117 |
1118 | .nav_menu .stick {
1119 | margin: 0 10px;
1120 | }
1121 |
1122 | .nav_menu .stick .btn {
1123 | margin: 5px 0;
1124 | }
1125 |
1126 | .nav_menu .search {
1127 | display: inline-block;
1128 | max-width: 97%;
1129 | }
1130 |
1131 | .nav_menu .search input {
1132 | max-width: 97%;
1133 | width: 90px;
1134 | }
1135 |
1136 | .nav_menu .search input:focus {
1137 | width: 400px;
1138 | }
1139 |
1140 | .post {
1141 | padding: 1rem;
1142 | }
1143 |
1144 | .day .name {
1145 | font-size: 1.1rem;
1146 | }
1147 |
1148 | .pagination {
1149 | margin: 0 0 3.5em;
1150 | }
1151 |
1152 | .notification a.close {
1153 | display: block;
1154 | left: 0;
1155 | }
1156 |
1157 | .notification a.close:hover {
1158 | opacity: 0.5;
1159 | }
1160 |
1161 | .notification a.close .icon {
1162 | display: none;
1163 | }
1164 | }
1165 |
--------------------------------------------------------------------------------
/themes/catppuccin-latte.css:
--------------------------------------------------------------------------------
1 | @charset "UTF-8";
2 |
3 | :root {
4 | /* Set sans-serif & mono fonts */
5 | --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;
6 | --mono-font: "mononoki Nerd Font", "IBM Plex Mono", "Roboto Mono", "Ubuntu Mono", "Fira Code", "Overpass Mono", Monaco, "Droid Sans Mono", monospace;
7 | /*This is my dark themed color scheme*/
8 | --bg: #eff1f5;
9 | --accent-bg: rgb(230, 233, 239);
10 | --text: #4c4f69;
11 | --text-light: #5c5f77;
12 | --border: #e6e9ef;
13 | --accent: #6c6f85;
14 | --accent-light: #d20f39;
15 | --code: #fe640b;
16 | --alert: #40a02b;
17 | --alert-bg: #209fb5;
18 | --code-bg: #ccd0da;
19 | --hover: #acb0be;
20 |
21 | --frss-background-color-transparent: #eff1f5;
22 | }
23 |
24 | /*=== GENERAL */
25 | /*============*/
26 |
27 | @font-face {
28 | /* src: local('Open Sans'), local('OpenSans'),
29 | url('../fonts/OpenSans.woff2') format('woff2'),
30 | url('../fonts/OpenSans.woff') format('woff');*/
31 | }
32 |
33 | html,
34 | body {
35 | background: var(--bg);
36 | color: var(--text);
37 | font-family: var(--sans-font);
38 | }
39 |
40 | /*=== Links */
41 | a {
42 | color: var(--accent);
43 | }
44 |
45 | a:hover {
46 | color: var(--accent);
47 | }
48 |
49 |
50 | kbd {
51 | color: var(--code);
52 | background-color: var(--accent-bg);
53 | }
54 |
55 | legend {
56 | margin: 20px 0 5px;
57 | padding: 5px 0;
58 | font-size: 1.4em;
59 | }
60 |
61 | label {
62 | min-height: 25px;
63 | padding: 5px 0;
64 | cursor: pointer;
65 | }
66 |
67 | input,
68 | select,
69 | textarea {
70 | margin: 5px;
71 | padding: 5px;
72 | color: var(--text);
73 | border: 1px solid var(--accent);
74 | border-radius: 6px;
75 | border-color: var(--accent);
76 | background-color: var(--bg);
77 | min-height: 25px;
78 | line-height: 25px;
79 | vertical-align: middle;
80 | }
81 |
82 | input:disabled,
83 | select:disabled {
84 | color: #aaa;
85 | border-color: var(--accent);
86 | }
87 |
88 | button {
89 | font-family: var(--sans-font);
90 | }
91 |
92 | button.as-link,
93 | button.as-link:hover,
94 | button.as-link:active {
95 | background: transparent;
96 | /* background-color: var(--bg);A*/
97 | }
98 |
99 | button.as-link[disabled] {
100 | color: #ddd !important;
101 | }
102 |
103 | /*=== Tables */
104 | form td,
105 | form th {
106 | font-weight: normal;
107 | }
108 |
109 | .table-wrapper {
110 | overflow-x: auto;
111 | }
112 |
113 | table {
114 | max-width: 100%;
115 |
116 | border-collapse: collapse;
117 |
118 | }
119 |
120 | table tr {
121 | border-bottom: 1px solid
122 | }
123 |
124 | table th,
125 | table td {
126 | padding: 10px 20px;
127 | }
128 |
129 | table td span {
130 | padding: 5px;
131 | color: dimgrey;
132 | /*display: none;*/
133 | font-size: 10px;
134 | font-weight: bold;
135 | /*position: absolute;*/
136 | }
137 |
138 | .form-group.form-actions {
139 | padding: 5px 0;
140 | }
141 |
142 | .form-group .group-name {
143 | padding: 10px 0;
144 | }
145 |
146 | .form-group .group-controls {
147 | padding: 5px 0;
148 | min-height: 25px;
149 | }
150 |
151 | /*=== Buttons */
152 | .btn,
153 | a.btn {
154 | margin: .3rem .3rem;
155 | background: var(--accent-bg);
156 | color: var(--accent);
157 | border: none;
158 | border-radius: 5px;
159 |
160 | text-decoration: none;
161 | transition: .4s;
162 | }
163 |
164 | a.btn.active {
165 | background-color: var(--accent-bg);
166 | border: 1px solid var(--border);
167 | }
168 |
169 | .btn {
170 | padding: 5px 10px;
171 | min-height: 37px;
172 | min-width: 15px;
173 | font-size: 0.9rem;
174 | vertical-align: middle;
175 | }
176 |
177 | a.btn {
178 | min-height: 25px;
179 | line-height: 25px;
180 | }
181 |
182 | .btn-important,
183 | #nav_menu_read_all .read_all,
184 | #actualize {
185 | font-weight: bold !important;
186 | background-color: var(--accent) !important;
187 | color: var(--bg) !important;
188 | }
189 |
190 | .flux .horizontal-list .item .read .icon {
191 | filter: invert(74%) sepia(29%) saturate(411%) hue-rotate(171deg) brightness(200%) contrast(95%);
192 | }
193 |
194 | #btn-add {
195 | margin: 0;
196 | }
197 |
198 | #btn-add.btn-important .icon,
199 | #actualize .icon {
200 | filter: brightness(0);
201 | }
202 |
203 | .btn:hover,
204 | svg:hover {
205 | opacity: .8;
206 | cursor: pointer;
207 | border: 0;
208 | }
209 |
210 | .stick input {
211 | margin: 0 0 0 0;
212 | }
213 |
214 | .stick .btn {
215 | margin-top: 0;
216 | margin-bottom: 0;
217 | }
218 |
219 | .stick {
220 | margin: 0 5px;
221 | }
222 |
223 | .header .stick,
224 | .header .btn {
225 | margin: 0
226 | }
227 |
228 | /*=== Navigation */
229 | .dropdown-menu {
230 | margin: 5px 0 0;
231 | padding: 0.5rem 0 0.25rem 0;
232 | background: var(--accent-bg);
233 | font-size: 0.8rem;
234 | border: 1px solid var(--border);
235 | border-radius: 6px;
236 | text-align: left;
237 | }
238 |
239 | .dropdown-header,
240 | .dropdown-section .dropdown-section-title {
241 | padding: 0 5px 5px;
242 | font-weight: bold;
243 | text-align: left;
244 | }
245 |
246 | .dropdown-menu .item>a,
247 | .dropdown-menu .item>span,
248 | .dropdown-menu .item>.as-link {
249 | padding: 0 22px;
250 | color: var(--text);
251 | line-height: 2.5em;
252 | font-size: inherit;
253 | min-width: 200px;
254 | }
255 |
256 | .dropdown-menu .dropdown-section .item>a,
257 | .dropdown-menu .dropdown-section .item>span,
258 | .dropdown-menu .dropdown-section .item>.as-link {
259 | padding-left: 2rem;
260 | }
261 |
262 | .dropdown-menu .dropdown-section .item:last-child {
263 | margin-bottom: 0.5rem;
264 | }
265 |
266 | .dropdown-menu .item>a:hover,
267 | .dropdown-menu .item>button:hover:not([disabled]),
268 | .dropdown-menu .item>label:hover:not(.noHover) {
269 | /* no hover color */
270 | }
271 |
272 | .dropdown-menu>.item[aria-checked="true"]>a::before {
273 | font-weight: bold;
274 | margin: 0 0 0 -14px;
275 | }
276 |
277 | .dropdown-menu .input select,
278 | .dropdown-menu .input input {
279 | margin: 0 auto 5px;
280 | padding: 2px 5px;
281 | }
282 |
283 | .dropdown-menu>.item:hover>a {
284 | text-decoration: none;
285 | }
286 |
287 | .dropdown-close {
288 | display: inline;
289 | }
290 |
291 | .dropdown-close a {
292 | background: none;
293 | display: block;
294 | font-size: 0;
295 | position: fixed;
296 | top: 0;
297 | bottom: 0;
298 | left: 0;
299 | right: 0;
300 | z-index: -11;
301 | cursor: default;
302 | }
303 |
304 | .dropdown-close a:hover {
305 | background: none;
306 | }
307 |
308 | .dropdown div.dropdown-close {
309 | display: none;
310 | }
311 |
312 | .dropdown-target:target~div.dropdown-close {
313 | display: block;
314 | z-index: 999;
315 | position: relative;
316 | }
317 |
318 | .dropdown-target:target~.dropdown-toggle::after {
319 | background-color: var(--accent-bg);
320 | border-top: 1px solid var(--border);
321 | border-left: 1px solid var(--border);
322 | }
323 |
324 | .dropdown-menu-scrollable .dropdown-close {
325 | display: none;
326 | }
327 |
328 | .item~.dropdown-header,
329 | .dropdown-section~.dropdown-section,
330 | .item.separator {
331 | border-top-color: var(--border);
332 | }
333 |
334 | /*=== Alerts */
335 | .alert {
336 | font-size: 0.9em;
337 | border-radius: 6px;
338 | }
339 |
340 | .alert-success {
341 | color: var(--bg);
342 | background-color: var(--alert-bg)
343 | }
344 |
345 | .alert-head {
346 | font-size: 1.15em;
347 | }
348 |
349 | .alert>a {
350 | text-decoration: underline;
351 | }
352 |
353 | .alert-warn {
354 | border-radius: 6px;
355 | background-color: var(--code-bg);
356 | }
357 |
358 | .alert-error {
359 | background-color: var(--accent-light);
360 | color: var(--bg);
361 | }
362 |
363 | /*=== Icons */
364 | .icon {
365 | filter: invert(74%) sepia(29%) saturate(411%) hue-rotate(171deg) brightness(130%) contrast(85%);
366 | }
367 |
368 | img.favicon {
369 | background: var(--text-light);
370 | border-radius: 4px;
371 | }
372 |
373 | /*=== Pagination */
374 | .pagination {
375 | width: 100%;
376 | }
377 |
378 | .pagination .pager-first,
379 | .pagination .pager-previous,
380 | .pagination .pager-next,
381 | .pagination .pager-last {
382 | width: 100px;
383 | }
384 |
385 | /*=== Boxes */
386 | .box {
387 | background-color: var(--accent-bg);
388 | border: 1px solid var(--border);
389 | border-radius: 6px;
390 | }
391 |
392 | .box .box-title {
393 | margin: 0;
394 | padding: 5px 10px;
395 | }
396 |
397 | .box .box-content {
398 | max-height: 260px;
399 | }
400 |
401 | .box .box-content .item {
402 | padding: 0 10px;
403 | font-size: 0.9rem;
404 | }
405 |
406 | /*=== Draggable */
407 | .drag-hover {
408 | margin: 0 0 5px;
409 | border-bottom: 2px solid var(--border);
410 | }
411 |
412 | [draggable=true] {
413 | cursor: grab;
414 | }
415 |
416 | /*=== Tree */
417 | .tree {
418 | margin: 10px 0;
419 | }
420 |
421 | .tree-folder-title .title {
422 | background: inherit;
423 | color: var(--text);
424 | }
425 |
426 | .tree-folder.category {
427 | border-bottom: 1px solid var(--bg);
428 | }
429 |
430 | .tree-folder-items>.item {
431 | color: var(--text);
432 | font-size: 0.8rem;
433 | }
434 |
435 | .tree-folder-items>.item>a {
436 | text-decoration: none;
437 | }
438 |
439 | .tree-folder-title {
440 | position: relative;
441 | padding: 0.25rem 0.75rem;
442 | font-size: 1rem;
443 | }
444 |
445 | .tree-folder-title .title:hover {
446 | text-decoration: none;
447 | }
448 |
449 | .tree-folder.active .tree-folder-title {
450 | font-weight: bold;
451 | }
452 |
453 |
454 | /*=== STRUCTURE */
455 | /*===============*/
456 | /*=== Header */
457 | .header>.item {
458 | vertical-align: middle;
459 | text-align: center;
460 | }
461 |
462 | .header>.item.title h1 {
463 | margin: 0.5em 0;
464 | }
465 |
466 | .header>.item.title h1 a {
467 | text-decoration: none;
468 | }
469 |
470 | .header>.item.search input {
471 | width: 350px;
472 | }
473 |
474 | .header>.item.title .logo {
475 | filter: grayscale(100%) brightness(2.5);
476 | }
477 |
478 | .header>.item.title a:hover .logo {
479 | filter: grayscale(85%) brightness(2.5);
480 | }
481 |
482 | /*=== Body */
483 | .aside {
484 | background-color: var(--accent-bg);
485 | border-radius: 12px;
486 | }
487 |
488 | /*=== Aside main page */
489 | .aside.aside_feed {
490 | padding: 10px 0;
491 | text-align: center;
492 | }
493 |
494 | .aside.aside_feed .tree {
495 | margin: 10px 0 50px;
496 | }
497 |
498 | .aside_feed .category .title:not([data-unread="0"]) {
499 | width: calc(100% - 35px - 20px);
500 | }
501 |
502 | .aside_feed .tree-folder-items.active {
503 | background-color: var(--bg);
504 | }
505 |
506 | .aside.aside_feed .nav-form input,
507 | .aside.aside_feed .nav-form select {
508 | width: 140px;
509 | }
510 |
511 | .aside.aside_feed .nav-form .dropdown .dropdown-menu {
512 | right: -20px;
513 | }
514 |
515 | .aside.aside_feed .nav-form .dropdown .dropdown-menu::after {
516 | right: 33px;
517 | }
518 |
519 | .aside_feed .tree-folder-items .item .dropdown-target:target~.dropdown-toggle>.icon,
520 | .aside_feed .tree-folder-items .item:hover .dropdown-toggle>.icon,
521 | .aside_feed .tree-folder-items .item.active .dropdown-toggle>.icon {
522 | border-radius: 3px;
523 | }
524 |
525 | .item.feed.error>.item-title {
526 | color: var(--accent-light);
527 | }
528 |
529 | .item.feed.active {
530 | background-color: var(--accent-bg);
531 | font-weight: bold;
532 |
533 | }
534 |
535 | li.item.active {
536 | background-color: var(--bg);
537 | font-weight: bold;
538 | }
539 |
540 | .item.feed:hover {
541 | background-color: var(--hover);
542 | transition: .4s;
543 | }
544 |
545 | /*=== New article notification */
546 | #new-article {
547 | font-size: 0.9em;
548 | text-align: center;
549 | }
550 |
551 | #new-article>a {
552 | line-height: 3em;
553 | font-weight: bold;
554 | }
555 |
556 | #new-article>a:hover {
557 | text-decoration: none;
558 | }
559 |
560 | /*=== Day indication */
561 | .day {
562 | padding: 0 10px;
563 | font-weight: bold;
564 | line-height: 3em;
565 | }
566 |
567 | .day .name {
568 | padding: 0 10px 0 0;
569 | font-size: 1.8em;
570 | opacity: 0.3;
571 | font-style: italic;
572 | text-align: right;
573 | }
574 |
575 | .name {
576 | display: none;
577 | }
578 |
579 |
580 | /*=== Feed article header and footer */
581 | .flux_header {
582 | position: relative;
583 | font-size: 0.8rem;
584 | cursor: pointer;
585 | }
586 |
587 | .flux_header .title {
588 | font-size: 0.8rem;
589 | }
590 |
591 | .flux .website .favicon {
592 | padding: 0.25rem;
593 | position: absolute;
594 | }
595 |
596 | .flux .website span {
597 | margin-left: 2rem;
598 | }
599 |
600 | .flux .item.date {
601 | width: 155px;
602 | text-align: right;
603 | overflow: hidden;
604 | font-size: 0.7rem;
605 | }
606 |
607 | .flux .bottom {
608 | font-size: 0.8rem;
609 | text-align: center;
610 | }
611 |
612 | .flux:not(.current) .flux_header:hover,
613 | .flux:not(.current) .flux_header:hover .item.title {
614 | background-color: var(--hover);
615 | transition: false;
616 | }
617 |
618 | .flux.current {
619 | background: var(--accent-bg);
620 | }
621 |
622 | .flux .item.title a {
623 | color: var(--text);
624 | }
625 |
626 | .flux .item.title .summary {
627 | color: var(--text-light);
628 | opacity: 0.8;
629 | }
630 |
631 | .flux .item.title .author {
632 | color: var(--text-light);
633 | opacity: 0.8;
634 | }
635 |
636 |
637 | /*=== Feed article content */
638 | .content {
639 | margin: auto;
640 | padding: 20px 10px;
641 | min-height: 20em;
642 | line-height: 1.7em;
643 | word-wrap: break-word;
644 | }
645 |
646 | .hide_posts>.flux:not(.active)>.flux_content {
647 | display: none;
648 | }
649 |
650 | .content hr {
651 | margin: 30px 10px;
652 | height: 1px;
653 | }
654 |
655 | .content pre {
656 | margin: 10px auto;
657 | padding: 10px 20px;
658 | overflow: auto;
659 | font-size: 0.9rem;
660 | border: 1px solid var(--accent);
661 | border-radius: 6px;
662 |
663 | }
664 |
665 | .content code {
666 | padding: 2px 5px;
667 | }
668 |
669 | .content pre code {
670 | border: none;
671 | }
672 |
673 | .content blockquote {
674 | margin: 0;
675 | padding: 5px 20px;
676 | display: block;
677 | }
678 |
679 | .content blockquote p {
680 | margin: 0;
681 | }
682 |
683 | /*=== Notification and actualize notification */
684 | .notification {
685 | padding: 0 0 0 5px;
686 | background: var(--bg);
687 | color: var(--text);
688 | font-size: 0.9em;
689 | /*border: 1px solid #aaa;*/
690 | border-radius: 6px;
691 | z-index: 10;
692 | text-align: center;
693 | font-weight: bold;
694 | line-height: 3em;
695 | vertical-align: middle;
696 | }
697 |
698 | .notification.closed {
699 | opacity: 0;
700 | visibility: hidden;
701 | }
702 |
703 | /*=== Popup */
704 | #popup {
705 | background-color: rgb(0, 0, 0, .4);
706 | }
707 |
708 | #popup-content {
709 | background-color: var(--accent-bg);
710 | box-shadow: 0 0 1px #d8dee9, 1px 2px 3px var(--bg);
711 | }
712 |
713 | #popup-close:hover,
714 | #popup-close:focus {
715 | color: #d8dee9;
716 | }
717 |
718 | #popup-txt {
719 | display: none;
720 | height: 100%;
721 | }
722 |
723 | /*=== Navigation menu (for articles) */
724 | #nav_entries {
725 | margin: 0;
726 | background: var(--accent-bg);
727 | text-align: center;
728 | line-height: 3em;
729 | }
730 |
731 | #bigMarkAsRead {
732 | text-decoration: none;
733 | }
734 |
735 | .bigTick {
736 | font-size: 4em;
737 | }
738 |
739 | /*=== Statistiques */
740 | .stat>table td,
741 | .stat>table th {
742 | text-align: center;
743 | }
744 |
745 | .stat {
746 | margin: 10px 0 20px;
747 | }
748 |
749 | /*=== Slider */
750 | #slider {
751 | background: var(--accent-bg);
752 | border-left: 1px solid var(--border);
753 | }
754 |
755 | /*=== DIVERS */
756 | /*===========*/
757 | .category .title.error::before {
758 | color: var(--accent-light);
759 | }
760 |
761 |
762 | .nav_menu {
763 | padding: 5px 0;
764 | text-align: center;
765 | }
766 |
767 | /*=== PRINTER */
768 | /*============*/
769 |
770 | @media print {
771 |
772 | .header,
773 | .aside,
774 | .nav_menu,
775 | .day,
776 | .flux_header,
777 | .flux_content .bottom,
778 | .pagination,
779 | #nav_entries {
780 | display: none;
781 | }
782 |
783 | html,
784 | body {
785 | background: #fff;
786 | color: #000;
787 | font-family: Serif;
788 | }
789 |
790 | #global,
791 | .flux_content {
792 | display: block !important;
793 | }
794 |
795 | .flux_content .content {
796 | width: 100% !important;
797 | }
798 |
799 | .flux_content .content a {
800 | color: #000;
801 | }
802 | }
803 |
804 | /*=== PREVIEW */
805 | /*===========*/
806 | .preview_controls {
807 | margin-left: auto;
808 | margin-right: auto;
809 | padding: 1rem;
810 | max-width: 1000px;
811 | text-align: center;
812 | background-color: #eee;
813 | border: 1px solid #e0e0e0;
814 | border-radius: .25rem;
815 | }
816 |
817 | .preview_controls label {
818 | display: inline;
819 | }
820 |
821 | .preview_controls label input[type="radio"] {
822 | margin-top: -4px;
823 | }
824 |
825 | .preview_controls label+label {
826 | margin-left: 1rem;
827 | }
828 |
829 | .preview_background {
830 | background-color: transparent;
831 | }
832 |
833 | .drag-drop-marker {
834 | margin: -1px;
835 | }
836 |
837 |
838 | /*BEGINS BASE.CSS*/
839 |
840 | /*=== GENERAL */
841 | /*============*/
842 |
843 | /*=== Links */
844 | a,
845 | button.as-link {
846 | outline: none;
847 | }
848 |
849 | /*=== Forms */
850 | textarea {
851 | width: 360px;
852 | height: 100px;
853 | }
854 |
855 | option {
856 | padding: 0 .5em;
857 | }
858 |
859 | /*=== COMPONENTS */
860 | /*===============*/
861 | /*=== Forms */
862 | .form-group.form-actions .btn {
863 | margin: 0 10px;
864 | }
865 |
866 | /*=== Navigation */
867 | .nav-list {
868 | font-size: 0.9rem;
869 | }
870 |
871 | .nav-list .item,
872 | .nav-list .item.nav-header {
873 | min-height: 2.5em;
874 | line-height: 2.5;
875 | }
876 |
877 | .nav-list .item>a {
878 | padding: 0 1rem;
879 | }
880 |
881 | .nav-list a:hover {
882 | text-decoration: none;
883 | background-color: var(--hover);
884 | }
885 |
886 | .nav-list .nav-header {
887 | padding: 0 1rem;
888 | font-weight: bold;
889 | }
890 |
891 | .nav-list .nav-form {
892 | padding: 3px;
893 | text-align: center;
894 | }
895 |
896 | /*=== Dropdown */
897 | .dropdown-menu::after {
898 | position: absolute;
899 | top: -6px;
900 | right: 13px;
901 | width: 10px;
902 | height: 10px;
903 | z-index: -10;
904 | transform: rotate(45deg);
905 | border-color: var(--border);
906 | }
907 |
908 | .dropdown-menu>.item>a:hover,
909 | .dropdown-menu>.item>span:hover,
910 | .dropdown-menu>.item>.as-link:hover {
911 | color: var(--main-text);
912 | background-color: var(--hover);
913 | transition: .4s;
914 | }
915 |
916 | /*=== Pagination */
917 | .pagination .item a {
918 | font-style: italic;
919 | }
920 |
921 | /*=== STRUCTURE */
922 | /*===============*/
923 | /*=== Header */
924 |
925 | /*=== Body */
926 | /*=== Aside main page (categories) */
927 | .aside_feed .tree-folder-title>.title:not([data-unread="0"])::after {
928 | position: absolute;
929 | right: 0;
930 | margin: 10px 0;
931 | padding: 0 10px;
932 | font-size: 0.9rem;
933 | }
934 |
935 | /*=== Aside main page (feeds) */
936 | .aside_feed .tree-folder-items .dropdown-menu::after {
937 | left: 2px;
938 | }
939 |
940 |
941 | /*=== Configuration pages */
942 | .post {
943 | padding: 10px 50px;
944 | font-size: 0.9em;
945 | }
946 |
947 | .post form {
948 | margin: 10px 0;
949 | }
950 |
951 | .post.content {
952 | max-width: 550px;
953 | }
954 |
955 | /*=== Prompt (centered) */
956 | .prompt input {
957 | margin: 5px auto;
958 | width: 100%;
959 | }
960 |
961 | /*=== Navigation menu (for articles) */
962 | /*=== READER VIEW */
963 | /*================*/
964 | #stream.reader .flux {
965 | background: #242933;
966 | border: none;
967 | }
968 |
969 | #stream.reader .flux .content {
970 | background-color: #2e3440;
971 | border: none;
972 | }
973 |
974 | #stream.reader .flux .author {
975 | margin: 0 0 10px;
976 | font-size: 90%;
977 | }
978 |
979 | /*=== GLOBAL VIEW */
980 | /*================*/
981 | .box.category .box-title .title {
982 | font-weight: normal;
983 | text-decoration: none;
984 | text-align: left;
985 | }
986 |
987 | .box.category .title:not([data-unread="0"])::after {
988 | background: none;
989 | border: 0;
990 | position: absolute;
991 | top: 5px;
992 | right: 10px;
993 | font-weight: bold;
994 | box-shadow: none;
995 | text-shadow: none;
996 | }
997 |
998 | #panel {
999 | background-color: var(--bg);
1000 | }
1001 |
1002 | /*=== MOBILE */
1003 | /*===========*/
1004 |
1005 | @media (max-width: 840px) {
1006 | .aside:target+.close-aside {
1007 | background: rgba(0, 0, 0, 0.2);
1008 | display: block;
1009 | font-size: 0;
1010 | position: fixed;
1011 | top: 0;
1012 | bottom: 0;
1013 | left: 0;
1014 | right: 0;
1015 | cursor: pointer;
1016 | z-index: 99;
1017 | }
1018 |
1019 | .nav_mobile {
1020 | display: block;
1021 | }
1022 |
1023 | .aside {
1024 | position: fixed;
1025 | top: 0;
1026 | bottom: 0;
1027 | left: 0;
1028 | width: 0;
1029 | overflow: hidden;
1030 | z-index: 100;
1031 | transition: width 200ms linear;
1032 | }
1033 |
1034 | .aside.aside_feed {
1035 | padding: 0;
1036 | }
1037 |
1038 | .aside:target,
1039 | .reader .aside:target {
1040 | width: 90%;
1041 | height: 100vh;
1042 | }
1043 |
1044 | .aside_feed .configure-feeds {
1045 | margin-top: 10px;
1046 | }
1047 |
1048 | .flux_header .item.website {
1049 | width: 40px;
1050 | }
1051 |
1052 | .flux:not(.current):hover .item.title {
1053 | position: relative;
1054 | width: auto;
1055 | white-space: nowrap;
1056 | }
1057 |
1058 | .flux .website .favicon {
1059 | position: relative;
1060 | }
1061 |
1062 | .notification {
1063 | top: 0;
1064 | left: 0;
1065 | right: 0;
1066 | }
1067 |
1068 | #nav_entries {
1069 | width: 100%;
1070 | }
1071 |
1072 | #panel {
1073 | top: 25px;
1074 | bottom: 30px;
1075 | left: 0;
1076 | right: 0;
1077 | }
1078 |
1079 | #panel .close {
1080 | top: 0;
1081 | right: 0;
1082 | left: auto;
1083 | bottom: auto;
1084 | display: inline-block;
1085 | width: 30px;
1086 | height: 30px;
1087 | }
1088 |
1089 | #slider.active {
1090 | left: 0;
1091 | top: 50px;
1092 | background-color: var(--bg);
1093 | }
1094 |
1095 | #close-slider img {
1096 | display: initial;
1097 | }
1098 |
1099 | #close-slider.active {
1100 | background: var(--bg);
1101 | display: block;
1102 | width: 100%;
1103 | height: 50px;
1104 | z-index: 10;
1105 | text-align: center;
1106 | line-height: 50px;
1107 | border-bottom: 1px solid #ddd;
1108 | }
1109 |
1110 | .stat.half {
1111 | grid-column: 1 / span 2;
1112 | }
1113 |
1114 | .nav_menu .btn {
1115 | margin: 5px 10px;
1116 | }
1117 |
1118 | .nav_menu .stick {
1119 | margin: 0 10px;
1120 | }
1121 |
1122 | .nav_menu .stick .btn {
1123 | margin: 5px 0;
1124 | }
1125 |
1126 | .nav_menu .search {
1127 | display: inline-block;
1128 | max-width: 97%;
1129 | }
1130 |
1131 | .nav_menu .search input {
1132 | max-width: 97%;
1133 | width: 90px;
1134 | }
1135 |
1136 | .nav_menu .search input:focus {
1137 | width: 400px;
1138 | }
1139 |
1140 | .post {
1141 | padding: 1rem;
1142 | }
1143 |
1144 | .day .name {
1145 | font-size: 1.1rem;
1146 | }
1147 |
1148 | .pagination {
1149 | margin: 0 0 3.5em;
1150 | }
1151 |
1152 | .notification a.close {
1153 | display: block;
1154 | left: 0;
1155 | }
1156 |
1157 | .notification a.close:hover {
1158 | opacity: 0.5;
1159 | }
1160 |
1161 | .notification a.close .icon {
1162 | display: none;
1163 | }
1164 | }
1165 |
--------------------------------------------------------------------------------
/themes/catppuccin-macchiato.css:
--------------------------------------------------------------------------------
1 | @charset "UTF-8";
2 |
3 | :root {
4 | /* Set sans-serif & mono fonts */
5 | --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;
6 | --mono-font: "mononoki Nerd Font", "IBM Plex Mono", "Roboto Mono", "Ubuntu Mono", "Fira Code", "Overpass Mono", Monaco, "Droid Sans Mono", monospace;
7 | /*This is my dark themed color scheme*/
8 | --bg: #24273a;
9 | --accent-bg: rgb(30, 32, 48);
10 | --text: #cad3f5;
11 | --text-light: #b8c0e0;
12 | --border: #1e2030;
13 | --accent: #a5adcb;
14 | --accent-light: #ed8796;
15 | --code: #f5a97f;
16 | --alert: #a6da95;
17 | --alert-bg: #7dc4e4;
18 | --code-bg: #363a4f;
19 | --hover: #5b6078;
20 |
21 | --frss-background-color-transparent: #24273a;
22 | }
23 |
24 | /*=== GENERAL */
25 | /*============*/
26 |
27 | @font-face {
28 | /* src: local('Open Sans'), local('OpenSans'),
29 | url('../fonts/OpenSans.woff2') format('woff2'),
30 | url('../fonts/OpenSans.woff') format('woff');*/
31 | }
32 |
33 | html,
34 | body {
35 | background: var(--bg);
36 | color: var(--text);
37 | font-family: var(--sans-font);
38 | }
39 |
40 | /*=== Links */
41 | a {
42 | color: var(--accent);
43 | }
44 |
45 | a:hover {
46 | color: var(--accent);
47 | }
48 |
49 |
50 | kbd {
51 | color: var(--code);
52 | background-color: var(--accent-bg);
53 | }
54 |
55 | legend {
56 | margin: 20px 0 5px;
57 | padding: 5px 0;
58 | font-size: 1.4em;
59 | }
60 |
61 | label {
62 | min-height: 25px;
63 | padding: 5px 0;
64 | cursor: pointer;
65 | }
66 |
67 | input,
68 | select,
69 | textarea {
70 | margin: 5px;
71 | padding: 5px;
72 | color: var(--text);
73 | border: 1px solid var(--accent);
74 | border-radius: 6px;
75 | border-color: var(--accent);
76 | background-color: var(--bg);
77 | min-height: 25px;
78 | line-height: 25px;
79 | vertical-align: middle;
80 | }
81 |
82 | input:disabled,
83 | select:disabled {
84 | color: #aaa;
85 | border-color: var(--accent);
86 | }
87 |
88 | button {
89 | font-family: var(--sans-font);
90 | }
91 |
92 | button.as-link,
93 | button.as-link:hover,
94 | button.as-link:active {
95 | background: transparent;
96 | /* background-color: var(--bg);A*/
97 | }
98 |
99 | button.as-link[disabled] {
100 | color: #ddd !important;
101 | }
102 |
103 | /*=== Tables */
104 | form td,
105 | form th {
106 | font-weight: normal;
107 | }
108 |
109 | .table-wrapper {
110 | overflow-x: auto;
111 | }
112 |
113 | table {
114 | max-width: 100%;
115 |
116 | border-collapse: collapse;
117 |
118 | }
119 |
120 | table tr {
121 | border-bottom: 1px solid
122 | }
123 |
124 | table th,
125 | table td {
126 | padding: 10px 20px;
127 | }
128 |
129 | table td span {
130 | padding: 5px;
131 | color: dimgrey;
132 | /*display: none;*/
133 | font-size: 10px;
134 | font-weight: bold;
135 | /*position: absolute;*/
136 | }
137 |
138 | .form-group.form-actions {
139 | padding: 5px 0;
140 | }
141 |
142 | .form-group .group-name {
143 | padding: 10px 0;
144 | }
145 |
146 | .form-group .group-controls {
147 | padding: 5px 0;
148 | min-height: 25px;
149 | }
150 |
151 | /*=== Buttons */
152 | .btn,
153 | a.btn {
154 | margin: .3rem .3rem;
155 | background: var(--accent-bg);
156 | color: var(--accent);
157 | border: none;
158 | border-radius: 5px;
159 |
160 | text-decoration: none;
161 | transition: .4s;
162 | }
163 |
164 | a.btn.active {
165 | background-color: var(--accent-bg);
166 | border: 1px solid var(--border);
167 | }
168 |
169 | .btn {
170 | padding: 5px 10px;
171 | min-height: 37px;
172 | min-width: 15px;
173 | font-size: 0.9rem;
174 | vertical-align: middle;
175 | }
176 |
177 | a.btn {
178 | min-height: 25px;
179 | line-height: 25px;
180 | }
181 |
182 | .btn-important,
183 | #nav_menu_read_all .read_all,
184 | #actualize {
185 | font-weight: bold !important;
186 | background-color: var(--accent) !important;
187 | color: var(--bg) !important;
188 | }
189 |
190 | .flux .horizontal-list .item .read .icon {
191 | filter: invert(74%) sepia(29%) saturate(411%) hue-rotate(171deg) brightness(200%) contrast(95%);
192 | }
193 |
194 | #btn-add {
195 | margin: 0;
196 | }
197 |
198 | #btn-add.btn-important .icon,
199 | #actualize .icon {
200 | filter: brightness(0);
201 | }
202 |
203 | .btn:hover,
204 | svg:hover {
205 | opacity: .8;
206 | cursor: pointer;
207 | border: 0;
208 | }
209 |
210 | .stick input {
211 | margin: 0 0 0 0;
212 | }
213 |
214 | .stick .btn {
215 | margin-top: 0;
216 | margin-bottom: 0;
217 | }
218 |
219 | .stick {
220 | margin: 0 5px;
221 | }
222 |
223 | .header .stick,
224 | .header .btn {
225 | margin: 0
226 | }
227 |
228 | /*=== Navigation */
229 | .dropdown-menu {
230 | margin: 5px 0 0;
231 | padding: 0.5rem 0 0.25rem 0;
232 | background: var(--accent-bg);
233 | font-size: 0.8rem;
234 | border: 1px solid var(--border);
235 | border-radius: 6px;
236 | text-align: left;
237 | }
238 |
239 | .dropdown-header,
240 | .dropdown-section .dropdown-section-title {
241 | padding: 0 5px 5px;
242 | font-weight: bold;
243 | text-align: left;
244 | }
245 |
246 | .dropdown-menu .item>a,
247 | .dropdown-menu .item>span,
248 | .dropdown-menu .item>.as-link {
249 | padding: 0 22px;
250 | color: var(--text);
251 | line-height: 2.5em;
252 | font-size: inherit;
253 | min-width: 200px;
254 | }
255 |
256 | .dropdown-menu .dropdown-section .item>a,
257 | .dropdown-menu .dropdown-section .item>span,
258 | .dropdown-menu .dropdown-section .item>.as-link {
259 | padding-left: 2rem;
260 | }
261 |
262 | .dropdown-menu .dropdown-section .item:last-child {
263 | margin-bottom: 0.5rem;
264 | }
265 |
266 | .dropdown-menu .item>a:hover,
267 | .dropdown-menu .item>button:hover:not([disabled]),
268 | .dropdown-menu .item>label:hover:not(.noHover) {
269 | /* no hover color */
270 | }
271 |
272 | .dropdown-menu>.item[aria-checked="true"]>a::before {
273 | font-weight: bold;
274 | margin: 0 0 0 -14px;
275 | }
276 |
277 | .dropdown-menu .input select,
278 | .dropdown-menu .input input {
279 | margin: 0 auto 5px;
280 | padding: 2px 5px;
281 | }
282 |
283 | .dropdown-menu>.item:hover>a {
284 | text-decoration: none;
285 | }
286 |
287 | .dropdown-close {
288 | display: inline;
289 | }
290 |
291 | .dropdown-close a {
292 | background: none;
293 | display: block;
294 | font-size: 0;
295 | position: fixed;
296 | top: 0;
297 | bottom: 0;
298 | left: 0;
299 | right: 0;
300 | z-index: -11;
301 | cursor: default;
302 | }
303 |
304 | .dropdown-close a:hover {
305 | background: none;
306 | }
307 |
308 | .dropdown div.dropdown-close {
309 | display: none;
310 | }
311 |
312 | .dropdown-target:target~div.dropdown-close {
313 | display: block;
314 | z-index: 999;
315 | position: relative;
316 | }
317 |
318 | .dropdown-target:target~.dropdown-toggle::after {
319 | background-color: var(--accent-bg);
320 | border-top: 1px solid var(--border);
321 | border-left: 1px solid var(--border);
322 | }
323 |
324 | .dropdown-menu-scrollable .dropdown-close {
325 | display: none;
326 | }
327 |
328 | .item~.dropdown-header,
329 | .dropdown-section~.dropdown-section,
330 | .item.separator {
331 | border-top-color: var(--border);
332 | }
333 |
334 | /*=== Alerts */
335 | .alert {
336 | font-size: 0.9em;
337 | border-radius: 6px;
338 | }
339 |
340 | .alert-success {
341 | color: var(--bg);
342 | background-color: var(--alert-bg)
343 | }
344 |
345 | .alert-head {
346 | font-size: 1.15em;
347 | }
348 |
349 | .alert>a {
350 | text-decoration: underline;
351 | }
352 |
353 | .alert-warn {
354 | border-radius: 6px;
355 | background-color: var(--code-bg);
356 | }
357 |
358 | .alert-error {
359 | background-color: var(--accent-light);
360 | color: var(--bg);
361 | }
362 |
363 | /*=== Icons */
364 | .icon {
365 | filter: invert(74%) sepia(29%) saturate(411%) hue-rotate(171deg) brightness(130%) contrast(85%);
366 | }
367 |
368 | img.favicon {
369 | background: var(--text-light);
370 | border-radius: 4px;
371 | }
372 |
373 | /*=== Pagination */
374 | .pagination {
375 | width: 100%;
376 | }
377 |
378 | .pagination .pager-first,
379 | .pagination .pager-previous,
380 | .pagination .pager-next,
381 | .pagination .pager-last {
382 | width: 100px;
383 | }
384 |
385 | /*=== Boxes */
386 | .box {
387 | background-color: var(--accent-bg);
388 | border: 1px solid var(--border);
389 | border-radius: 6px;
390 | }
391 |
392 | .box .box-title {
393 | margin: 0;
394 | padding: 5px 10px;
395 | }
396 |
397 | .box .box-content {
398 | max-height: 260px;
399 | }
400 |
401 | .box .box-content .item {
402 | padding: 0 10px;
403 | font-size: 0.9rem;
404 | }
405 |
406 | /*=== Draggable */
407 | .drag-hover {
408 | margin: 0 0 5px;
409 | border-bottom: 2px solid var(--border);
410 | }
411 |
412 | [draggable=true] {
413 | cursor: grab;
414 | }
415 |
416 | /*=== Tree */
417 | .tree {
418 | margin: 10px 0;
419 | }
420 |
421 | .tree-folder-title .title {
422 | background: inherit;
423 | color: var(--text);
424 | }
425 |
426 | .tree-folder.category {
427 | border-bottom: 1px solid var(--bg);
428 | }
429 |
430 | .tree-folder-items>.item {
431 | color: var(--text);
432 | font-size: 0.8rem;
433 | }
434 |
435 | .tree-folder-items>.item>a {
436 | text-decoration: none;
437 | }
438 |
439 | .tree-folder-title {
440 | position: relative;
441 | padding: 0.25rem 0.75rem;
442 | font-size: 1rem;
443 | }
444 |
445 | .tree-folder-title .title:hover {
446 | text-decoration: none;
447 | }
448 |
449 | .tree-folder.active .tree-folder-title {
450 | font-weight: bold;
451 | }
452 |
453 |
454 | /*=== STRUCTURE */
455 | /*===============*/
456 | /*=== Header */
457 | .header>.item {
458 | vertical-align: middle;
459 | text-align: center;
460 | }
461 |
462 | .header>.item.title h1 {
463 | margin: 0.5em 0;
464 | }
465 |
466 | .header>.item.title h1 a {
467 | text-decoration: none;
468 | }
469 |
470 | .header>.item.search input {
471 | width: 350px;
472 | }
473 |
474 | .header>.item.title .logo {
475 | filter: grayscale(100%) brightness(2.5);
476 | }
477 |
478 | .header>.item.title a:hover .logo {
479 | filter: grayscale(85%) brightness(2.5);
480 | }
481 |
482 | /*=== Body */
483 | .aside {
484 | background-color: var(--accent-bg);
485 | border-radius: 12px;
486 | }
487 |
488 | /*=== Aside main page */
489 | .aside.aside_feed {
490 | padding: 10px 0;
491 | text-align: center;
492 | }
493 |
494 | .aside.aside_feed .tree {
495 | margin: 10px 0 50px;
496 | }
497 |
498 | .aside_feed .category .title:not([data-unread="0"]) {
499 | width: calc(100% - 35px - 20px);
500 | }
501 |
502 | .aside_feed .tree-folder-items.active {
503 | background-color: var(--bg);
504 | }
505 |
506 | .aside.aside_feed .nav-form input,
507 | .aside.aside_feed .nav-form select {
508 | width: 140px;
509 | }
510 |
511 | .aside.aside_feed .nav-form .dropdown .dropdown-menu {
512 | right: -20px;
513 | }
514 |
515 | .aside.aside_feed .nav-form .dropdown .dropdown-menu::after {
516 | right: 33px;
517 | }
518 |
519 | .aside_feed .tree-folder-items .item .dropdown-target:target~.dropdown-toggle>.icon,
520 | .aside_feed .tree-folder-items .item:hover .dropdown-toggle>.icon,
521 | .aside_feed .tree-folder-items .item.active .dropdown-toggle>.icon {
522 | border-radius: 3px;
523 | }
524 |
525 | .item.feed.error>.item-title {
526 | color: var(--accent-light);
527 | }
528 |
529 | .item.feed.active {
530 | background-color: var(--accent-bg);
531 | font-weight: bold;
532 |
533 | }
534 |
535 | li.item.active {
536 | background-color: var(--bg);
537 | font-weight: bold;
538 | }
539 |
540 | .item.feed:hover {
541 | background-color: var(--hover);
542 | transition: .4s;
543 | }
544 |
545 | /*=== New article notification */
546 | #new-article {
547 | font-size: 0.9em;
548 | text-align: center;
549 | }
550 |
551 | #new-article>a {
552 | line-height: 3em;
553 | font-weight: bold;
554 | }
555 |
556 | #new-article>a:hover {
557 | text-decoration: none;
558 | }
559 |
560 | /*=== Day indication */
561 | .day {
562 | padding: 0 10px;
563 | font-weight: bold;
564 | line-height: 3em;
565 | }
566 |
567 | .day .name {
568 | padding: 0 10px 0 0;
569 | font-size: 1.8em;
570 | opacity: 0.3;
571 | font-style: italic;
572 | text-align: right;
573 | }
574 |
575 | .name {
576 | display: none;
577 | }
578 |
579 |
580 | /*=== Feed article header and footer */
581 | .flux_header {
582 | position: relative;
583 | font-size: 0.8rem;
584 | cursor: pointer;
585 | }
586 |
587 | .flux_header .title {
588 | font-size: 0.8rem;
589 | }
590 |
591 | .flux .website .favicon {
592 | padding: 0.25rem;
593 | position: absolute;
594 | }
595 |
596 | .flux .website span {
597 | margin-left: 2rem;
598 | }
599 |
600 | .flux .item.date {
601 | width: 155px;
602 | text-align: right;
603 | overflow: hidden;
604 | font-size: 0.7rem;
605 | }
606 |
607 | .flux .bottom {
608 | font-size: 0.8rem;
609 | text-align: center;
610 | }
611 |
612 | .flux:not(.current) .flux_header:hover,
613 | .flux:not(.current) .flux_header:hover .item.title {
614 | background-color: var(--hover);
615 | transition: false;
616 | }
617 |
618 | .flux.current {
619 | background: var(--accent-bg);
620 | }
621 |
622 | .flux .item.title a {
623 | color: var(--text);
624 | }
625 |
626 | .flux .item.title .summary {
627 | color: var(--text-light);
628 | opacity: 0.8;
629 | }
630 |
631 | .flux .item.title .author {
632 | color: var(--text-light);
633 | opacity: 0.8;
634 | }
635 |
636 |
637 | /*=== Feed article content */
638 | .content {
639 | margin: auto;
640 | padding: 20px 10px;
641 | min-height: 20em;
642 | line-height: 1.7em;
643 | word-wrap: break-word;
644 | }
645 |
646 | .hide_posts>.flux:not(.active)>.flux_content {
647 | display: none;
648 | }
649 |
650 | .content hr {
651 | margin: 30px 10px;
652 | height: 1px;
653 | }
654 |
655 | .content pre {
656 | margin: 10px auto;
657 | padding: 10px 20px;
658 | overflow: auto;
659 | font-size: 0.9rem;
660 | border: 1px solid var(--accent);
661 | border-radius: 6px;
662 |
663 | }
664 |
665 | .content code {
666 | padding: 2px 5px;
667 | }
668 |
669 | .content pre code {
670 | border: none;
671 | }
672 |
673 | .content blockquote {
674 | margin: 0;
675 | padding: 5px 20px;
676 | display: block;
677 | }
678 |
679 | .content blockquote p {
680 | margin: 0;
681 | }
682 |
683 | /*=== Notification and actualize notification */
684 | .notification {
685 | padding: 0 0 0 5px;
686 | background: var(--bg);
687 | color: var(--text);
688 | font-size: 0.9em;
689 | /*border: 1px solid #aaa;*/
690 | border-radius: 6px;
691 | z-index: 10;
692 | text-align: center;
693 | font-weight: bold;
694 | line-height: 3em;
695 | vertical-align: middle;
696 | }
697 |
698 | .notification.closed {
699 | opacity: 0;
700 | visibility: hidden;
701 | }
702 |
703 | /*=== Popup */
704 | #popup {
705 | background-color: rgb(0, 0, 0, .4);
706 | }
707 |
708 | #popup-content {
709 | background-color: var(--accent-bg);
710 | box-shadow: 0 0 1px #d8dee9, 1px 2px 3px var(--bg);
711 | }
712 |
713 | #popup-close:hover,
714 | #popup-close:focus {
715 | color: #d8dee9;
716 | }
717 |
718 | #popup-txt {
719 | display: none;
720 | height: 100%;
721 | }
722 |
723 | /*=== Navigation menu (for articles) */
724 | #nav_entries {
725 | margin: 0;
726 | background: var(--accent-bg);
727 | text-align: center;
728 | line-height: 3em;
729 | }
730 |
731 | #bigMarkAsRead {
732 | text-decoration: none;
733 | }
734 |
735 | .bigTick {
736 | font-size: 4em;
737 | }
738 |
739 | /*=== Statistiques */
740 | .stat>table td,
741 | .stat>table th {
742 | text-align: center;
743 | }
744 |
745 | .stat {
746 | margin: 10px 0 20px;
747 | }
748 |
749 | /*=== Slider */
750 | #slider {
751 | background: var(--accent-bg);
752 | border-left: 1px solid var(--border);
753 | }
754 |
755 | /*=== DIVERS */
756 | /*===========*/
757 | .category .title.error::before {
758 | color: var(--accent-light);
759 | }
760 |
761 |
762 | .nav_menu {
763 | padding: 5px 0;
764 | text-align: center;
765 | }
766 |
767 | /*=== PRINTER */
768 | /*============*/
769 |
770 | @media print {
771 |
772 | .header,
773 | .aside,
774 | .nav_menu,
775 | .day,
776 | .flux_header,
777 | .flux_content .bottom,
778 | .pagination,
779 | #nav_entries {
780 | display: none;
781 | }
782 |
783 | html,
784 | body {
785 | background: #fff;
786 | color: #000;
787 | font-family: Serif;
788 | }
789 |
790 | #global,
791 | .flux_content {
792 | display: block !important;
793 | }
794 |
795 | .flux_content .content {
796 | width: 100% !important;
797 | }
798 |
799 | .flux_content .content a {
800 | color: #000;
801 | }
802 | }
803 |
804 | /*=== PREVIEW */
805 | /*===========*/
806 | .preview_controls {
807 | margin-left: auto;
808 | margin-right: auto;
809 | padding: 1rem;
810 | max-width: 1000px;
811 | text-align: center;
812 | background-color: #eee;
813 | border: 1px solid #e0e0e0;
814 | border-radius: .25rem;
815 | }
816 |
817 | .preview_controls label {
818 | display: inline;
819 | }
820 |
821 | .preview_controls label input[type="radio"] {
822 | margin-top: -4px;
823 | }
824 |
825 | .preview_controls label+label {
826 | margin-left: 1rem;
827 | }
828 |
829 | .preview_background {
830 | background-color: transparent;
831 | }
832 |
833 | .drag-drop-marker {
834 | margin: -1px;
835 | }
836 |
837 |
838 | /*BEGINS BASE.CSS*/
839 |
840 | /*=== GENERAL */
841 | /*============*/
842 |
843 | /*=== Links */
844 | a,
845 | button.as-link {
846 | outline: none;
847 | }
848 |
849 | /*=== Forms */
850 | textarea {
851 | width: 360px;
852 | height: 100px;
853 | }
854 |
855 | option {
856 | padding: 0 .5em;
857 | }
858 |
859 | /*=== COMPONENTS */
860 | /*===============*/
861 | /*=== Forms */
862 | .form-group.form-actions .btn {
863 | margin: 0 10px;
864 | }
865 |
866 | /*=== Navigation */
867 | .nav-list {
868 | font-size: 0.9rem;
869 | }
870 |
871 | .nav-list .item,
872 | .nav-list .item.nav-header {
873 | min-height: 2.5em;
874 | line-height: 2.5;
875 | }
876 |
877 | .nav-list .item>a {
878 | padding: 0 1rem;
879 | }
880 |
881 | .nav-list a:hover {
882 | text-decoration: none;
883 | background-color: var(--hover);
884 | }
885 |
886 | .nav-list .nav-header {
887 | padding: 0 1rem;
888 | font-weight: bold;
889 | }
890 |
891 | .nav-list .nav-form {
892 | padding: 3px;
893 | text-align: center;
894 | }
895 |
896 | /*=== Dropdown */
897 | .dropdown-menu::after {
898 | position: absolute;
899 | top: -6px;
900 | right: 13px;
901 | width: 10px;
902 | height: 10px;
903 | z-index: -10;
904 | transform: rotate(45deg);
905 | border-color: var(--border);
906 | }
907 |
908 | .dropdown-menu>.item>a:hover,
909 | .dropdown-menu>.item>span:hover,
910 | .dropdown-menu>.item>.as-link:hover {
911 | color: var(--main-text);
912 | background-color: var(--hover);
913 | transition: .4s;
914 | }
915 |
916 | /*=== Pagination */
917 | .pagination .item a {
918 | font-style: italic;
919 | }
920 |
921 | /*=== STRUCTURE */
922 | /*===============*/
923 | /*=== Header */
924 |
925 | /*=== Body */
926 | /*=== Aside main page (categories) */
927 | .aside_feed .tree-folder-title>.title:not([data-unread="0"])::after {
928 | position: absolute;
929 | right: 0;
930 | margin: 10px 0;
931 | padding: 0 10px;
932 | font-size: 0.9rem;
933 | }
934 |
935 | /*=== Aside main page (feeds) */
936 | .aside_feed .tree-folder-items .dropdown-menu::after {
937 | left: 2px;
938 | }
939 |
940 |
941 | /*=== Configuration pages */
942 | .post {
943 | padding: 10px 50px;
944 | font-size: 0.9em;
945 | }
946 |
947 | .post form {
948 | margin: 10px 0;
949 | }
950 |
951 | .post.content {
952 | max-width: 550px;
953 | }
954 |
955 | /*=== Prompt (centered) */
956 | .prompt input {
957 | margin: 5px auto;
958 | width: 100%;
959 | }
960 |
961 | /*=== Navigation menu (for articles) */
962 | /*=== READER VIEW */
963 | /*================*/
964 | #stream.reader .flux {
965 | background: #242933;
966 | border: none;
967 | }
968 |
969 | #stream.reader .flux .content {
970 | background-color: #2e3440;
971 | border: none;
972 | }
973 |
974 | #stream.reader .flux .author {
975 | margin: 0 0 10px;
976 | font-size: 90%;
977 | }
978 |
979 | /*=== GLOBAL VIEW */
980 | /*================*/
981 | .box.category .box-title .title {
982 | font-weight: normal;
983 | text-decoration: none;
984 | text-align: left;
985 | }
986 |
987 | .box.category .title:not([data-unread="0"])::after {
988 | background: none;
989 | border: 0;
990 | position: absolute;
991 | top: 5px;
992 | right: 10px;
993 | font-weight: bold;
994 | box-shadow: none;
995 | text-shadow: none;
996 | }
997 |
998 | #panel {
999 | background-color: var(--bg);
1000 | }
1001 |
1002 | /*=== MOBILE */
1003 | /*===========*/
1004 |
1005 | @media (max-width: 840px) {
1006 | .aside:target+.close-aside {
1007 | background: rgba(0, 0, 0, 0.2);
1008 | display: block;
1009 | font-size: 0;
1010 | position: fixed;
1011 | top: 0;
1012 | bottom: 0;
1013 | left: 0;
1014 | right: 0;
1015 | cursor: pointer;
1016 | z-index: 99;
1017 | }
1018 |
1019 | .nav_mobile {
1020 | display: block;
1021 | }
1022 |
1023 | .aside {
1024 | position: fixed;
1025 | top: 0;
1026 | bottom: 0;
1027 | left: 0;
1028 | width: 0;
1029 | overflow: hidden;
1030 | z-index: 100;
1031 | transition: width 200ms linear;
1032 | }
1033 |
1034 | .aside.aside_feed {
1035 | padding: 0;
1036 | }
1037 |
1038 | .aside:target,
1039 | .reader .aside:target {
1040 | width: 90%;
1041 | height: 100vh;
1042 | }
1043 |
1044 | .aside_feed .configure-feeds {
1045 | margin-top: 10px;
1046 | }
1047 |
1048 | .flux_header .item.website {
1049 | width: 40px;
1050 | }
1051 |
1052 | .flux:not(.current):hover .item.title {
1053 | position: relative;
1054 | width: auto;
1055 | white-space: nowrap;
1056 | }
1057 |
1058 | .flux .website .favicon {
1059 | position: relative;
1060 | }
1061 |
1062 | .notification {
1063 | top: 0;
1064 | left: 0;
1065 | right: 0;
1066 | }
1067 |
1068 | #nav_entries {
1069 | width: 100%;
1070 | }
1071 |
1072 | #panel {
1073 | top: 25px;
1074 | bottom: 30px;
1075 | left: 0;
1076 | right: 0;
1077 | }
1078 |
1079 | #panel .close {
1080 | top: 0;
1081 | right: 0;
1082 | left: auto;
1083 | bottom: auto;
1084 | display: inline-block;
1085 | width: 30px;
1086 | height: 30px;
1087 | }
1088 |
1089 | #slider.active {
1090 | left: 0;
1091 | top: 50px;
1092 | background-color: var(--bg);
1093 | }
1094 |
1095 | #close-slider img {
1096 | display: initial;
1097 | }
1098 |
1099 | #close-slider.active {
1100 | background: var(--bg);
1101 | display: block;
1102 | width: 100%;
1103 | height: 50px;
1104 | z-index: 10;
1105 | text-align: center;
1106 | line-height: 50px;
1107 | border-bottom: 1px solid #ddd;
1108 | }
1109 |
1110 | .stat.half {
1111 | grid-column: 1 / span 2;
1112 | }
1113 |
1114 | .nav_menu .btn {
1115 | margin: 5px 10px;
1116 | }
1117 |
1118 | .nav_menu .stick {
1119 | margin: 0 10px;
1120 | }
1121 |
1122 | .nav_menu .stick .btn {
1123 | margin: 5px 0;
1124 | }
1125 |
1126 | .nav_menu .search {
1127 | display: inline-block;
1128 | max-width: 97%;
1129 | }
1130 |
1131 | .nav_menu .search input {
1132 | max-width: 97%;
1133 | width: 90px;
1134 | }
1135 |
1136 | .nav_menu .search input:focus {
1137 | width: 400px;
1138 | }
1139 |
1140 | .post {
1141 | padding: 1rem;
1142 | }
1143 |
1144 | .day .name {
1145 | font-size: 1.1rem;
1146 | }
1147 |
1148 | .pagination {
1149 | margin: 0 0 3.5em;
1150 | }
1151 |
1152 | .notification a.close {
1153 | display: block;
1154 | left: 0;
1155 | }
1156 |
1157 | .notification a.close:hover {
1158 | opacity: 0.5;
1159 | }
1160 |
1161 | .notification a.close .icon {
1162 | display: none;
1163 | }
1164 | }
1165 |
--------------------------------------------------------------------------------
/themes/catppuccin-mocha.css:
--------------------------------------------------------------------------------
1 | @charset "UTF-8";
2 |
3 | :root {
4 | /* Set sans-serif & mono fonts */
5 | --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;
6 | --mono-font: "mononoki Nerd Font", "IBM Plex Mono", "Roboto Mono", "Ubuntu Mono", "Fira Code", "Overpass Mono", Monaco, "Droid Sans Mono", monospace;
7 | /*This is my dark themed color scheme*/
8 | --bg: #1e1e2e;
9 | --accent-bg: rgb(24, 24, 37);
10 | --text: #cdd6f4;
11 | --text-light: #bac2de;
12 | --border: #181825;
13 | --accent: #a6adc8;
14 | --accent-light: #f38ba8;
15 | --code: #fab387;
16 | --alert: #a6e3a1;
17 | --alert-bg: #74c7ec;
18 | --code-bg: #313244;
19 | --hover: #585b70;
20 |
21 | --frss-background-color-transparent: #1e1e2e;
22 | }
23 |
24 | /*=== GENERAL */
25 | /*============*/
26 |
27 | @font-face {
28 | /* src: local('Open Sans'), local('OpenSans'),
29 | url('../fonts/OpenSans.woff2') format('woff2'),
30 | url('../fonts/OpenSans.woff') format('woff');*/
31 | }
32 |
33 | html,
34 | body {
35 | background: var(--bg);
36 | color: var(--text);
37 | font-family: var(--sans-font);
38 | }
39 |
40 | /*=== Links */
41 | a {
42 | color: var(--accent);
43 | }
44 |
45 | a:hover {
46 | color: var(--accent);
47 | }
48 |
49 |
50 | kbd {
51 | color: var(--code);
52 | background-color: var(--accent-bg);
53 | }
54 |
55 | legend {
56 | margin: 20px 0 5px;
57 | padding: 5px 0;
58 | font-size: 1.4em;
59 | }
60 |
61 | label {
62 | min-height: 25px;
63 | padding: 5px 0;
64 | cursor: pointer;
65 | }
66 |
67 | input,
68 | select,
69 | textarea {
70 | margin: 5px;
71 | padding: 5px;
72 | color: var(--text);
73 | border: 1px solid var(--accent);
74 | border-radius: 6px;
75 | border-color: var(--accent);
76 | background-color: var(--bg);
77 | min-height: 25px;
78 | line-height: 25px;
79 | vertical-align: middle;
80 | }
81 |
82 | input:disabled,
83 | select:disabled {
84 | color: #aaa;
85 | border-color: var(--accent);
86 | }
87 |
88 | button {
89 | font-family: var(--sans-font);
90 | }
91 |
92 | button.as-link,
93 | button.as-link:hover,
94 | button.as-link:active {
95 | background: transparent;
96 | /* background-color: var(--bg);A*/
97 | }
98 |
99 | button.as-link[disabled] {
100 | color: #ddd !important;
101 | }
102 |
103 | /*=== Tables */
104 | form td,
105 | form th {
106 | font-weight: normal;
107 | }
108 |
109 | .table-wrapper {
110 | overflow-x: auto;
111 | }
112 |
113 | table {
114 | max-width: 100%;
115 |
116 | border-collapse: collapse;
117 |
118 | }
119 |
120 | table tr {
121 | border-bottom: 1px solid
122 | }
123 |
124 | table th,
125 | table td {
126 | padding: 10px 20px;
127 | }
128 |
129 | table td span {
130 | padding: 5px;
131 | color: dimgrey;
132 | /*display: none;*/
133 | font-size: 10px;
134 | font-weight: bold;
135 | /*position: absolute;*/
136 | }
137 |
138 | .form-group.form-actions {
139 | padding: 5px 0;
140 | }
141 |
142 | .form-group .group-name {
143 | padding: 10px 0;
144 | }
145 |
146 | .form-group .group-controls {
147 | padding: 5px 0;
148 | min-height: 25px;
149 | }
150 |
151 | /*=== Buttons */
152 | .btn,
153 | a.btn {
154 | margin: .3rem .3rem;
155 | background: var(--accent-bg);
156 | color: var(--accent);
157 | border: none;
158 | border-radius: 5px;
159 |
160 | text-decoration: none;
161 | transition: .4s;
162 | }
163 |
164 | a.btn.active {
165 | background-color: var(--accent-bg);
166 | border: 1px solid var(--border);
167 | }
168 |
169 | .btn {
170 | padding: 5px 10px;
171 | min-height: 37px;
172 | min-width: 15px;
173 | font-size: 0.9rem;
174 | vertical-align: middle;
175 | }
176 |
177 | a.btn {
178 | min-height: 25px;
179 | line-height: 25px;
180 | }
181 |
182 | .btn-important,
183 | #nav_menu_read_all .read_all,
184 | #actualize {
185 | font-weight: bold !important;
186 | background-color: var(--accent) !important;
187 | color: var(--bg) !important;
188 | }
189 |
190 | .flux .horizontal-list .item .read .icon {
191 | filter: invert(74%) sepia(29%) saturate(411%) hue-rotate(171deg) brightness(200%) contrast(95%);
192 | }
193 |
194 | #btn-add {
195 | margin: 0;
196 | }
197 |
198 | #btn-add.btn-important .icon,
199 | #actualize .icon {
200 | filter: brightness(0);
201 | }
202 |
203 | .btn:hover,
204 | svg:hover {
205 | opacity: .8;
206 | cursor: pointer;
207 | border: 0;
208 | }
209 |
210 | .stick input {
211 | margin: 0 0 0 0;
212 | }
213 |
214 | .stick .btn {
215 | margin-top: 0;
216 | margin-bottom: 0;
217 | }
218 |
219 | .stick {
220 | margin: 0 5px;
221 | }
222 |
223 | .header .stick,
224 | .header .btn {
225 | margin: 0
226 | }
227 |
228 | /*=== Navigation */
229 | .dropdown-menu {
230 | margin: 5px 0 0;
231 | padding: 0.5rem 0 0.25rem 0;
232 | background: var(--accent-bg);
233 | font-size: 0.8rem;
234 | border: 1px solid var(--border);
235 | border-radius: 6px;
236 | text-align: left;
237 | }
238 |
239 | .dropdown-header,
240 | .dropdown-section .dropdown-section-title {
241 | padding: 0 5px 5px;
242 | font-weight: bold;
243 | text-align: left;
244 | }
245 |
246 | .dropdown-menu .item>a,
247 | .dropdown-menu .item>span,
248 | .dropdown-menu .item>.as-link {
249 | padding: 0 22px;
250 | color: var(--text);
251 | line-height: 2.5em;
252 | font-size: inherit;
253 | min-width: 200px;
254 | }
255 |
256 | .dropdown-menu .dropdown-section .item>a,
257 | .dropdown-menu .dropdown-section .item>span,
258 | .dropdown-menu .dropdown-section .item>.as-link {
259 | padding-left: 2rem;
260 | }
261 |
262 | .dropdown-menu .dropdown-section .item:last-child {
263 | margin-bottom: 0.5rem;
264 | }
265 |
266 | .dropdown-menu .item>a:hover,
267 | .dropdown-menu .item>button:hover:not([disabled]),
268 | .dropdown-menu .item>label:hover:not(.noHover) {
269 | /* no hover color */
270 | }
271 |
272 | .dropdown-menu>.item[aria-checked="true"]>a::before {
273 | font-weight: bold;
274 | margin: 0 0 0 -14px;
275 | }
276 |
277 | .dropdown-menu .input select,
278 | .dropdown-menu .input input {
279 | margin: 0 auto 5px;
280 | padding: 2px 5px;
281 | }
282 |
283 | .dropdown-menu>.item:hover>a {
284 | text-decoration: none;
285 | }
286 |
287 | .dropdown-close {
288 | display: inline;
289 | }
290 |
291 | .dropdown-close a {
292 | background: none;
293 | display: block;
294 | font-size: 0;
295 | position: fixed;
296 | top: 0;
297 | bottom: 0;
298 | left: 0;
299 | right: 0;
300 | z-index: -11;
301 | cursor: default;
302 | }
303 |
304 | .dropdown-close a:hover {
305 | background: none;
306 | }
307 |
308 | .dropdown div.dropdown-close {
309 | display: none;
310 | }
311 |
312 | .dropdown-target:target~div.dropdown-close {
313 | display: block;
314 | z-index: 999;
315 | position: relative;
316 | }
317 |
318 | .dropdown-target:target~.dropdown-toggle::after {
319 | background-color: var(--accent-bg);
320 | border-top: 1px solid var(--border);
321 | border-left: 1px solid var(--border);
322 | }
323 |
324 | .dropdown-menu-scrollable .dropdown-close {
325 | display: none;
326 | }
327 |
328 | .item~.dropdown-header,
329 | .dropdown-section~.dropdown-section,
330 | .item.separator {
331 | border-top-color: var(--border);
332 | }
333 |
334 | /*=== Alerts */
335 | .alert {
336 | font-size: 0.9em;
337 | border-radius: 6px;
338 | }
339 |
340 | .alert-success {
341 | color: var(--bg);
342 | background-color: var(--alert-bg)
343 | }
344 |
345 | .alert-head {
346 | font-size: 1.15em;
347 | }
348 |
349 | .alert>a {
350 | text-decoration: underline;
351 | }
352 |
353 | .alert-warn {
354 | border-radius: 6px;
355 | background-color: var(--code-bg);
356 | }
357 |
358 | .alert-error {
359 | background-color: var(--accent-light);
360 | color: var(--bg);
361 | }
362 |
363 | /*=== Icons */
364 | .icon {
365 | filter: invert(74%) sepia(29%) saturate(411%) hue-rotate(171deg) brightness(130%) contrast(85%);
366 | }
367 |
368 | img.favicon {
369 | background: var(--text-light);
370 | border-radius: 4px;
371 | }
372 |
373 | /*=== Pagination */
374 | .pagination {
375 | width: 100%;
376 | }
377 |
378 | .pagination .pager-first,
379 | .pagination .pager-previous,
380 | .pagination .pager-next,
381 | .pagination .pager-last {
382 | width: 100px;
383 | }
384 |
385 | /*=== Boxes */
386 | .box {
387 | background-color: var(--accent-bg);
388 | border: 1px solid var(--border);
389 | border-radius: 6px;
390 | }
391 |
392 | .box .box-title {
393 | margin: 0;
394 | padding: 5px 10px;
395 | }
396 |
397 | .box .box-content {
398 | max-height: 260px;
399 | }
400 |
401 | .box .box-content .item {
402 | padding: 0 10px;
403 | font-size: 0.9rem;
404 | }
405 |
406 | /*=== Draggable */
407 | .drag-hover {
408 | margin: 0 0 5px;
409 | border-bottom: 2px solid var(--border);
410 | }
411 |
412 | [draggable=true] {
413 | cursor: grab;
414 | }
415 |
416 | /*=== Tree */
417 | .tree {
418 | margin: 10px 0;
419 | }
420 |
421 | .tree-folder-title .title {
422 | background: inherit;
423 | color: var(--text);
424 | }
425 |
426 | .tree-folder.category {
427 | border-bottom: 1px solid var(--bg);
428 | }
429 |
430 | .tree-folder-items>.item {
431 | color: var(--text);
432 | font-size: 0.8rem;
433 | }
434 |
435 | .tree-folder-items>.item>a {
436 | text-decoration: none;
437 | }
438 |
439 | .tree-folder-title {
440 | position: relative;
441 | padding: 0.25rem 0.75rem;
442 | font-size: 1rem;
443 | }
444 |
445 | .tree-folder-title .title:hover {
446 | text-decoration: none;
447 | }
448 |
449 | .tree-folder.active .tree-folder-title {
450 | font-weight: bold;
451 | }
452 |
453 |
454 | /*=== STRUCTURE */
455 | /*===============*/
456 | /*=== Header */
457 | .header>.item {
458 | vertical-align: middle;
459 | text-align: center;
460 | }
461 |
462 | .header>.item.title h1 {
463 | margin: 0.5em 0;
464 | }
465 |
466 | .header>.item.title h1 a {
467 | text-decoration: none;
468 | }
469 |
470 | .header>.item.search input {
471 | width: 350px;
472 | }
473 |
474 | .header>.item.title .logo {
475 | filter: grayscale(100%) brightness(2.5);
476 | }
477 |
478 | .header>.item.title a:hover .logo {
479 | filter: grayscale(85%) brightness(2.5);
480 | }
481 |
482 | /*=== Body */
483 | .aside {
484 | background-color: var(--accent-bg);
485 | border-radius: 12px;
486 | }
487 |
488 | /*=== Aside main page */
489 | .aside.aside_feed {
490 | padding: 10px 0;
491 | text-align: center;
492 | }
493 |
494 | .aside.aside_feed .tree {
495 | margin: 10px 0 50px;
496 | }
497 |
498 | .aside_feed .category .title:not([data-unread="0"]) {
499 | width: calc(100% - 35px - 20px);
500 | }
501 |
502 | .aside_feed .tree-folder-items.active {
503 | background-color: var(--bg);
504 | }
505 |
506 | .aside.aside_feed .nav-form input,
507 | .aside.aside_feed .nav-form select {
508 | width: 140px;
509 | }
510 |
511 | .aside.aside_feed .nav-form .dropdown .dropdown-menu {
512 | right: -20px;
513 | }
514 |
515 | .aside.aside_feed .nav-form .dropdown .dropdown-menu::after {
516 | right: 33px;
517 | }
518 |
519 | .aside_feed .tree-folder-items .item .dropdown-target:target~.dropdown-toggle>.icon,
520 | .aside_feed .tree-folder-items .item:hover .dropdown-toggle>.icon,
521 | .aside_feed .tree-folder-items .item.active .dropdown-toggle>.icon {
522 | border-radius: 3px;
523 | }
524 |
525 | .item.feed.error>.item-title {
526 | color: var(--accent-light);
527 | }
528 |
529 | .item.feed.active {
530 | background-color: var(--accent-bg);
531 | font-weight: bold;
532 |
533 | }
534 |
535 | li.item.active {
536 | background-color: var(--bg);
537 | font-weight: bold;
538 | }
539 |
540 | .item.feed:hover {
541 | background-color: var(--hover);
542 | transition: .4s;
543 | }
544 |
545 | /*=== New article notification */
546 | #new-article {
547 | font-size: 0.9em;
548 | text-align: center;
549 | }
550 |
551 | #new-article>a {
552 | line-height: 3em;
553 | font-weight: bold;
554 | }
555 |
556 | #new-article>a:hover {
557 | text-decoration: none;
558 | }
559 |
560 | /*=== Day indication */
561 | .day {
562 | padding: 0 10px;
563 | font-weight: bold;
564 | line-height: 3em;
565 | }
566 |
567 | .day .name {
568 | padding: 0 10px 0 0;
569 | font-size: 1.8em;
570 | opacity: 0.3;
571 | font-style: italic;
572 | text-align: right;
573 | }
574 |
575 | .name {
576 | display: none;
577 | }
578 |
579 |
580 | /*=== Feed article header and footer */
581 | .flux_header {
582 | position: relative;
583 | font-size: 0.8rem;
584 | cursor: pointer;
585 | }
586 |
587 | .flux_header .title {
588 | font-size: 0.8rem;
589 | }
590 |
591 | .flux .website .favicon {
592 | padding: 0.25rem;
593 | position: absolute;
594 | }
595 |
596 | .flux .website span {
597 | margin-left: 2rem;
598 | }
599 |
600 | .flux .item.date {
601 | width: 155px;
602 | text-align: right;
603 | overflow: hidden;
604 | font-size: 0.7rem;
605 | }
606 |
607 | .flux .bottom {
608 | font-size: 0.8rem;
609 | text-align: center;
610 | }
611 |
612 | .flux:not(.current) .flux_header:hover,
613 | .flux:not(.current) .flux_header:hover .item.title {
614 | background-color: var(--hover);
615 | transition: false;
616 | }
617 |
618 | .flux.current {
619 | background: var(--accent-bg);
620 | }
621 |
622 | .flux .item.title a {
623 | color: var(--text);
624 | }
625 |
626 | .flux .item.title .summary {
627 | color: var(--text-light);
628 | opacity: 0.8;
629 | }
630 |
631 | .flux .item.title .author {
632 | color: var(--text-light);
633 | opacity: 0.8;
634 | }
635 |
636 |
637 | /*=== Feed article content */
638 | .content {
639 | margin: auto;
640 | padding: 20px 10px;
641 | min-height: 20em;
642 | line-height: 1.7em;
643 | word-wrap: break-word;
644 | }
645 |
646 | .hide_posts>.flux:not(.active)>.flux_content {
647 | display: none;
648 | }
649 |
650 | .content hr {
651 | margin: 30px 10px;
652 | height: 1px;
653 | }
654 |
655 | .content pre {
656 | margin: 10px auto;
657 | padding: 10px 20px;
658 | overflow: auto;
659 | font-size: 0.9rem;
660 | border: 1px solid var(--accent);
661 | border-radius: 6px;
662 |
663 | }
664 |
665 | .content code {
666 | padding: 2px 5px;
667 | }
668 |
669 | .content pre code {
670 | border: none;
671 | }
672 |
673 | .content blockquote {
674 | margin: 0;
675 | padding: 5px 20px;
676 | display: block;
677 | }
678 |
679 | .content blockquote p {
680 | margin: 0;
681 | }
682 |
683 | /*=== Notification and actualize notification */
684 | .notification {
685 | padding: 0 0 0 5px;
686 | background: var(--bg);
687 | color: var(--text);
688 | font-size: 0.9em;
689 | /*border: 1px solid #aaa;*/
690 | border-radius: 6px;
691 | z-index: 10;
692 | text-align: center;
693 | font-weight: bold;
694 | line-height: 3em;
695 | vertical-align: middle;
696 | }
697 |
698 | .notification.closed {
699 | opacity: 0;
700 | visibility: hidden;
701 | }
702 |
703 | /*=== Popup */
704 | #popup {
705 | background-color: rgb(0, 0, 0, .4);
706 | }
707 |
708 | #popup-content {
709 | background-color: var(--accent-bg);
710 | box-shadow: 0 0 1px #d8dee9, 1px 2px 3px var(--bg);
711 | }
712 |
713 | #popup-close:hover,
714 | #popup-close:focus {
715 | color: #d8dee9;
716 | }
717 |
718 | #popup-txt {
719 | display: none;
720 | height: 100%;
721 | }
722 |
723 | /*=== Navigation menu (for articles) */
724 | #nav_entries {
725 | margin: 0;
726 | background: var(--accent-bg);
727 | text-align: center;
728 | line-height: 3em;
729 | }
730 |
731 | #bigMarkAsRead {
732 | text-decoration: none;
733 | }
734 |
735 | .bigTick {
736 | font-size: 4em;
737 | }
738 |
739 | /*=== Statistiques */
740 | .stat>table td,
741 | .stat>table th {
742 | text-align: center;
743 | }
744 |
745 | .stat {
746 | margin: 10px 0 20px;
747 | }
748 |
749 | /*=== Slider */
750 | #slider {
751 | background: var(--accent-bg);
752 | border-left: 1px solid var(--border);
753 | }
754 |
755 | /*=== DIVERS */
756 | /*===========*/
757 | .category .title.error::before {
758 | color: var(--accent-light);
759 | }
760 |
761 |
762 | .nav_menu {
763 | padding: 5px 0;
764 | text-align: center;
765 | }
766 |
767 | /*=== PRINTER */
768 | /*============*/
769 |
770 | @media print {
771 |
772 | .header,
773 | .aside,
774 | .nav_menu,
775 | .day,
776 | .flux_header,
777 | .flux_content .bottom,
778 | .pagination,
779 | #nav_entries {
780 | display: none;
781 | }
782 |
783 | html,
784 | body {
785 | background: #fff;
786 | color: #000;
787 | font-family: Serif;
788 | }
789 |
790 | #global,
791 | .flux_content {
792 | display: block !important;
793 | }
794 |
795 | .flux_content .content {
796 | width: 100% !important;
797 | }
798 |
799 | .flux_content .content a {
800 | color: #000;
801 | }
802 | }
803 |
804 | /*=== PREVIEW */
805 | /*===========*/
806 | .preview_controls {
807 | margin-left: auto;
808 | margin-right: auto;
809 | padding: 1rem;
810 | max-width: 1000px;
811 | text-align: center;
812 | background-color: #eee;
813 | border: 1px solid #e0e0e0;
814 | border-radius: .25rem;
815 | }
816 |
817 | .preview_controls label {
818 | display: inline;
819 | }
820 |
821 | .preview_controls label input[type="radio"] {
822 | margin-top: -4px;
823 | }
824 |
825 | .preview_controls label+label {
826 | margin-left: 1rem;
827 | }
828 |
829 | .preview_background {
830 | background-color: transparent;
831 | }
832 |
833 | .drag-drop-marker {
834 | margin: -1px;
835 | }
836 |
837 |
838 | /*BEGINS BASE.CSS*/
839 |
840 | /*=== GENERAL */
841 | /*============*/
842 |
843 | /*=== Links */
844 | a,
845 | button.as-link {
846 | outline: none;
847 | }
848 |
849 | /*=== Forms */
850 | textarea {
851 | width: 360px;
852 | height: 100px;
853 | }
854 |
855 | option {
856 | padding: 0 .5em;
857 | }
858 |
859 | /*=== COMPONENTS */
860 | /*===============*/
861 | /*=== Forms */
862 | .form-group.form-actions .btn {
863 | margin: 0 10px;
864 | }
865 |
866 | /*=== Navigation */
867 | .nav-list {
868 | font-size: 0.9rem;
869 | }
870 |
871 | .nav-list .item,
872 | .nav-list .item.nav-header {
873 | min-height: 2.5em;
874 | line-height: 2.5;
875 | }
876 |
877 | .nav-list .item>a {
878 | padding: 0 1rem;
879 | }
880 |
881 | .nav-list a:hover {
882 | text-decoration: none;
883 | background-color: var(--hover);
884 | }
885 |
886 | .nav-list .nav-header {
887 | padding: 0 1rem;
888 | font-weight: bold;
889 | }
890 |
891 | .nav-list .nav-form {
892 | padding: 3px;
893 | text-align: center;
894 | }
895 |
896 | /*=== Dropdown */
897 | .dropdown-menu::after {
898 | position: absolute;
899 | top: -6px;
900 | right: 13px;
901 | width: 10px;
902 | height: 10px;
903 | z-index: -10;
904 | transform: rotate(45deg);
905 | border-color: var(--border);
906 | }
907 |
908 | .dropdown-menu>.item>a:hover,
909 | .dropdown-menu>.item>span:hover,
910 | .dropdown-menu>.item>.as-link:hover {
911 | color: var(--main-text);
912 | background-color: var(--hover);
913 | transition: .4s;
914 | }
915 |
916 | /*=== Pagination */
917 | .pagination .item a {
918 | font-style: italic;
919 | }
920 |
921 | /*=== STRUCTURE */
922 | /*===============*/
923 | /*=== Header */
924 |
925 | /*=== Body */
926 | /*=== Aside main page (categories) */
927 | .aside_feed .tree-folder-title>.title:not([data-unread="0"])::after {
928 | position: absolute;
929 | right: 0;
930 | margin: 10px 0;
931 | padding: 0 10px;
932 | font-size: 0.9rem;
933 | }
934 |
935 | /*=== Aside main page (feeds) */
936 | .aside_feed .tree-folder-items .dropdown-menu::after {
937 | left: 2px;
938 | }
939 |
940 |
941 | /*=== Configuration pages */
942 | .post {
943 | padding: 10px 50px;
944 | font-size: 0.9em;
945 | }
946 |
947 | .post form {
948 | margin: 10px 0;
949 | }
950 |
951 | .post.content {
952 | max-width: 550px;
953 | }
954 |
955 | /*=== Prompt (centered) */
956 | .prompt input {
957 | margin: 5px auto;
958 | width: 100%;
959 | }
960 |
961 | /*=== Navigation menu (for articles) */
962 | /*=== READER VIEW */
963 | /*================*/
964 | #stream.reader .flux {
965 | background: #242933;
966 | border: none;
967 | }
968 |
969 | #stream.reader .flux .content {
970 | background-color: #2e3440;
971 | border: none;
972 | }
973 |
974 | #stream.reader .flux .author {
975 | margin: 0 0 10px;
976 | font-size: 90%;
977 | }
978 |
979 | /*=== GLOBAL VIEW */
980 | /*================*/
981 | .box.category .box-title .title {
982 | font-weight: normal;
983 | text-decoration: none;
984 | text-align: left;
985 | }
986 |
987 | .box.category .title:not([data-unread="0"])::after {
988 | background: none;
989 | border: 0;
990 | position: absolute;
991 | top: 5px;
992 | right: 10px;
993 | font-weight: bold;
994 | box-shadow: none;
995 | text-shadow: none;
996 | }
997 |
998 | #panel {
999 | background-color: var(--bg);
1000 | }
1001 |
1002 | /*=== MOBILE */
1003 | /*===========*/
1004 |
1005 | @media (max-width: 840px) {
1006 | .aside:target+.close-aside {
1007 | background: rgba(0, 0, 0, 0.2);
1008 | display: block;
1009 | font-size: 0;
1010 | position: fixed;
1011 | top: 0;
1012 | bottom: 0;
1013 | left: 0;
1014 | right: 0;
1015 | cursor: pointer;
1016 | z-index: 99;
1017 | }
1018 |
1019 | .nav_mobile {
1020 | display: block;
1021 | }
1022 |
1023 | .aside {
1024 | position: fixed;
1025 | top: 0;
1026 | bottom: 0;
1027 | left: 0;
1028 | width: 0;
1029 | overflow: hidden;
1030 | z-index: 100;
1031 | transition: width 200ms linear;
1032 | }
1033 |
1034 | .aside.aside_feed {
1035 | padding: 0;
1036 | }
1037 |
1038 | .aside:target,
1039 | .reader .aside:target {
1040 | width: 90%;
1041 | height: 100vh;
1042 | }
1043 |
1044 | .aside_feed .configure-feeds {
1045 | margin-top: 10px;
1046 | }
1047 |
1048 | .flux_header .item.website {
1049 | width: 40px;
1050 | }
1051 |
1052 | .flux:not(.current):hover .item.title {
1053 | position: relative;
1054 | width: auto;
1055 | white-space: nowrap;
1056 | }
1057 |
1058 | .flux .website .favicon {
1059 | position: relative;
1060 | }
1061 |
1062 | .notification {
1063 | top: 0;
1064 | left: 0;
1065 | right: 0;
1066 | }
1067 |
1068 | #nav_entries {
1069 | width: 100%;
1070 | }
1071 |
1072 | #panel {
1073 | top: 25px;
1074 | bottom: 30px;
1075 | left: 0;
1076 | right: 0;
1077 | }
1078 |
1079 | #panel .close {
1080 | top: 0;
1081 | right: 0;
1082 | left: auto;
1083 | bottom: auto;
1084 | display: inline-block;
1085 | width: 30px;
1086 | height: 30px;
1087 | }
1088 |
1089 | #slider.active {
1090 | left: 0;
1091 | top: 50px;
1092 | background-color: var(--bg);
1093 | }
1094 |
1095 | #close-slider img {
1096 | display: initial;
1097 | }
1098 |
1099 | #close-slider.active {
1100 | background: var(--bg);
1101 | display: block;
1102 | width: 100%;
1103 | height: 50px;
1104 | z-index: 10;
1105 | text-align: center;
1106 | line-height: 50px;
1107 | border-bottom: 1px solid #ddd;
1108 | }
1109 |
1110 | .stat.half {
1111 | grid-column: 1 / span 2;
1112 | }
1113 |
1114 | .nav_menu .btn {
1115 | margin: 5px 10px;
1116 | }
1117 |
1118 | .nav_menu .stick {
1119 | margin: 0 10px;
1120 | }
1121 |
1122 | .nav_menu .stick .btn {
1123 | margin: 5px 0;
1124 | }
1125 |
1126 | .nav_menu .search {
1127 | display: inline-block;
1128 | max-width: 97%;
1129 | }
1130 |
1131 | .nav_menu .search input {
1132 | max-width: 97%;
1133 | width: 90px;
1134 | }
1135 |
1136 | .nav_menu .search input:focus {
1137 | width: 400px;
1138 | }
1139 |
1140 | .post {
1141 | padding: 1rem;
1142 | }
1143 |
1144 | .day .name {
1145 | font-size: 1.1rem;
1146 | }
1147 |
1148 | .pagination {
1149 | margin: 0 0 3.5em;
1150 | }
1151 |
1152 | .notification a.close {
1153 | display: block;
1154 | left: 0;
1155 | }
1156 |
1157 | .notification a.close:hover {
1158 | opacity: 0.5;
1159 | }
1160 |
1161 | .notification a.close .icon {
1162 | display: none;
1163 | }
1164 | }
1165 |
--------------------------------------------------------------------------------
/freshrss.tera:
--------------------------------------------------------------------------------
1 | ---
2 | whiskers:
3 | version: "^2.3.0"
4 | matrix:
5 | - flavor
6 | filename: "themes/catppuccin-{{ flavor.identifier }}.css"
7 | ---
8 | @charset "UTF-8";
9 |
10 | :root {
11 | /* Set sans-serif & mono fonts */
12 | --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;
13 | --mono-font: "mononoki Nerd Font", "IBM Plex Mono", "Roboto Mono", "Ubuntu Mono", "Fira Code", "Overpass Mono", Monaco, "Droid Sans Mono", monospace;
14 | /*This is my dark themed color scheme*/
15 | --bg: #{{ base.hex }};
16 | --accent-bg: {{ mantle | css_rgb }};
17 | --text: #{{ text.hex }};
18 | --text-light: #{{ subtext1.hex }};
19 | --border: #{{ mantle.hex }};
20 | --accent: #{{ subtext0.hex }};
21 | --accent-light: #{{ red.hex }};
22 | --code: #{{ peach.hex }};
23 | --alert: #{{ green.hex }};
24 | --alert-bg: #{{ sapphire.hex }};
25 | --code-bg: #{{ surface0.hex }};
26 | --hover: #{{ surface2.hex }};
27 |
28 | --frss-background-color-transparent: #{{ base.hex }};
29 | }
30 |
31 | /*=== GENERAL */
32 | /*============*/
33 |
34 | @font-face {
35 | /* src: local('Open Sans'), local('OpenSans'),
36 | url('../fonts/OpenSans.woff2') format('woff2'),
37 | url('../fonts/OpenSans.woff') format('woff');*/
38 | }
39 |
40 | html,
41 | body {
42 | background: var(--bg);
43 | color: var(--text);
44 | font-family: var(--sans-font);
45 | }
46 |
47 | /*=== Links */
48 | a {
49 | color: var(--accent);
50 | }
51 |
52 | a:hover {
53 | color: var(--accent);
54 | }
55 |
56 |
57 | kbd {
58 | color: var(--code);
59 | background-color: var(--accent-bg);
60 | }
61 |
62 | legend {
63 | margin: 20px 0 5px;
64 | padding: 5px 0;
65 | font-size: 1.4em;
66 | }
67 |
68 | label {
69 | min-height: 25px;
70 | padding: 5px 0;
71 | cursor: pointer;
72 | }
73 |
74 | input,
75 | select,
76 | textarea {
77 | margin: 5px;
78 | padding: 5px;
79 | color: var(--text);
80 | border: 1px solid var(--accent);
81 | border-radius: 6px;
82 | border-color: var(--accent);
83 | background-color: var(--bg);
84 | min-height: 25px;
85 | line-height: 25px;
86 | vertical-align: middle;
87 | }
88 |
89 | input:disabled,
90 | select:disabled {
91 | color: #aaa;
92 | border-color: var(--accent);
93 | }
94 |
95 | button {
96 | font-family: var(--sans-font);
97 | }
98 |
99 | button.as-link,
100 | button.as-link:hover,
101 | button.as-link:active {
102 | background: transparent;
103 | /* background-color: var(--bg);A*/
104 | }
105 |
106 | button.as-link[disabled] {
107 | color: #ddd !important;
108 | }
109 |
110 | /*=== Tables */
111 | form td,
112 | form th {
113 | font-weight: normal;
114 | }
115 |
116 | .table-wrapper {
117 | overflow-x: auto;
118 | }
119 |
120 | table {
121 | max-width: 100%;
122 |
123 | border-collapse: collapse;
124 |
125 | }
126 |
127 | table tr {
128 | border-bottom: 1px solid
129 | }
130 |
131 | table th,
132 | table td {
133 | padding: 10px 20px;
134 | }
135 |
136 | table td span {
137 | padding: 5px;
138 | color: dimgrey;
139 | /*display: none;*/
140 | font-size: 10px;
141 | font-weight: bold;
142 | /*position: absolute;*/
143 | }
144 |
145 | .form-group.form-actions {
146 | padding: 5px 0;
147 | }
148 |
149 | .form-group .group-name {
150 | padding: 10px 0;
151 | }
152 |
153 | .form-group .group-controls {
154 | padding: 5px 0;
155 | min-height: 25px;
156 | }
157 |
158 | /*=== Buttons */
159 | .btn,
160 | a.btn {
161 | margin: .3rem .3rem;
162 | background: var(--accent-bg);
163 | color: var(--accent);
164 | border: none;
165 | border-radius: 5px;
166 |
167 | text-decoration: none;
168 | transition: .4s;
169 | }
170 |
171 | a.btn.active {
172 | background-color: var(--accent-bg);
173 | border: 1px solid var(--border);
174 | }
175 |
176 | .btn {
177 | padding: 5px 10px;
178 | min-height: 37px;
179 | min-width: 15px;
180 | font-size: 0.9rem;
181 | vertical-align: middle;
182 | }
183 |
184 | a.btn {
185 | min-height: 25px;
186 | line-height: 25px;
187 | }
188 |
189 | .btn-important,
190 | #nav_menu_read_all .read_all,
191 | #actualize {
192 | font-weight: bold !important;
193 | background-color: var(--accent) !important;
194 | color: var(--bg) !important;
195 | }
196 |
197 | .flux .horizontal-list .item .read .icon {
198 | filter: invert(74%) sepia(29%) saturate(411%) hue-rotate(171deg) brightness(200%) contrast(95%);
199 | }
200 |
201 | #btn-add {
202 | margin: 0;
203 | }
204 |
205 | #btn-add.btn-important .icon,
206 | #actualize .icon {
207 | filter: brightness(0);
208 | }
209 |
210 | .btn:hover,
211 | svg:hover {
212 | opacity: .8;
213 | cursor: pointer;
214 | border: 0;
215 | }
216 |
217 | .stick input {
218 | margin: 0 0 0 0;
219 | }
220 |
221 | .stick .btn {
222 | margin-top: 0;
223 | margin-bottom: 0;
224 | }
225 |
226 | .stick {
227 | margin: 0 5px;
228 | }
229 |
230 | .header .stick,
231 | .header .btn {
232 | margin: 0
233 | }
234 |
235 | /*=== Navigation */
236 | .dropdown-menu {
237 | margin: 5px 0 0;
238 | padding: 0.5rem 0 0.25rem 0;
239 | background: var(--accent-bg);
240 | font-size: 0.8rem;
241 | border: 1px solid var(--border);
242 | border-radius: 6px;
243 | text-align: left;
244 | }
245 |
246 | .dropdown-header,
247 | .dropdown-section .dropdown-section-title {
248 | padding: 0 5px 5px;
249 | font-weight: bold;
250 | text-align: left;
251 | }
252 |
253 | .dropdown-menu .item>a,
254 | .dropdown-menu .item>span,
255 | .dropdown-menu .item>.as-link {
256 | padding: 0 22px;
257 | color: var(--text);
258 | line-height: 2.5em;
259 | font-size: inherit;
260 | min-width: 200px;
261 | }
262 |
263 | .dropdown-menu .dropdown-section .item>a,
264 | .dropdown-menu .dropdown-section .item>span,
265 | .dropdown-menu .dropdown-section .item>.as-link {
266 | padding-left: 2rem;
267 | }
268 |
269 | .dropdown-menu .dropdown-section .item:last-child {
270 | margin-bottom: 0.5rem;
271 | }
272 |
273 | .dropdown-menu .item>a:hover,
274 | .dropdown-menu .item>button:hover:not([disabled]),
275 | .dropdown-menu .item>label:hover:not(.noHover) {
276 | /* no hover color */
277 | }
278 |
279 | .dropdown-menu>.item[aria-checked="true"]>a::before {
280 | font-weight: bold;
281 | margin: 0 0 0 -14px;
282 | }
283 |
284 | .dropdown-menu .input select,
285 | .dropdown-menu .input input {
286 | margin: 0 auto 5px;
287 | padding: 2px 5px;
288 | }
289 |
290 | .dropdown-menu>.item:hover>a {
291 | text-decoration: none;
292 | }
293 |
294 | .dropdown-close {
295 | display: inline;
296 | }
297 |
298 | .dropdown-close a {
299 | background: none;
300 | display: block;
301 | font-size: 0;
302 | position: fixed;
303 | top: 0;
304 | bottom: 0;
305 | left: 0;
306 | right: 0;
307 | z-index: -11;
308 | cursor: default;
309 | }
310 |
311 | .dropdown-close a:hover {
312 | background: none;
313 | }
314 |
315 | .dropdown div.dropdown-close {
316 | display: none;
317 | }
318 |
319 | .dropdown-target:target~div.dropdown-close {
320 | display: block;
321 | z-index: 999;
322 | position: relative;
323 | }
324 |
325 | .dropdown-target:target~.dropdown-toggle::after {
326 | background-color: var(--accent-bg);
327 | border-top: 1px solid var(--border);
328 | border-left: 1px solid var(--border);
329 | }
330 |
331 | .dropdown-menu-scrollable .dropdown-close {
332 | display: none;
333 | }
334 |
335 | .item~.dropdown-header,
336 | .dropdown-section~.dropdown-section,
337 | .item.separator {
338 | border-top-color: var(--border);
339 | }
340 |
341 | /*=== Alerts */
342 | .alert {
343 | font-size: 0.9em;
344 | border-radius: 6px;
345 | }
346 |
347 | .alert-success {
348 | color: var(--bg);
349 | background-color: var(--alert-bg)
350 | }
351 |
352 | .alert-head {
353 | font-size: 1.15em;
354 | }
355 |
356 | .alert>a {
357 | text-decoration: underline;
358 | }
359 |
360 | .alert-warn {
361 | border-radius: 6px;
362 | background-color: var(--code-bg);
363 | }
364 |
365 | .alert-error {
366 | background-color: var(--accent-light);
367 | color: var(--bg);
368 | }
369 |
370 | /*=== Icons */
371 | .icon {
372 | filter: invert(74%) sepia(29%) saturate(411%) hue-rotate(171deg) brightness(130%) contrast(85%);
373 | }
374 |
375 | img.favicon {
376 | background: var(--text-light);
377 | border-radius: 4px;
378 | }
379 |
380 | /*=== Pagination */
381 | .pagination {
382 | width: 100%;
383 | }
384 |
385 | .pagination .pager-first,
386 | .pagination .pager-previous,
387 | .pagination .pager-next,
388 | .pagination .pager-last {
389 | width: 100px;
390 | }
391 |
392 | /*=== Boxes */
393 | .box {
394 | background-color: var(--accent-bg);
395 | border: 1px solid var(--border);
396 | border-radius: 6px;
397 | }
398 |
399 | .box .box-title {
400 | margin: 0;
401 | padding: 5px 10px;
402 | }
403 |
404 | .box .box-content {
405 | max-height: 260px;
406 | }
407 |
408 | .box .box-content .item {
409 | padding: 0 10px;
410 | font-size: 0.9rem;
411 | }
412 |
413 | /*=== Draggable */
414 | .drag-hover {
415 | margin: 0 0 5px;
416 | border-bottom: 2px solid var(--border);
417 | }
418 |
419 | [draggable=true] {
420 | cursor: grab;
421 | }
422 |
423 | /*=== Tree */
424 | .tree {
425 | margin: 10px 0;
426 | }
427 |
428 | .tree-folder-title .title {
429 | background: inherit;
430 | color: var(--text);
431 | }
432 |
433 | .tree-folder.category {
434 | border-bottom: 1px solid var(--bg);
435 | }
436 |
437 | .tree-folder-items>.item {
438 | color: var(--text);
439 | font-size: 0.8rem;
440 | }
441 |
442 | .tree-folder-items>.item>a {
443 | text-decoration: none;
444 | }
445 |
446 | .tree-folder-title {
447 | position: relative;
448 | padding: 0.25rem 0.75rem;
449 | font-size: 1rem;
450 | }
451 |
452 | .tree-folder-title .title:hover {
453 | text-decoration: none;
454 | }
455 |
456 | .tree-folder.active .tree-folder-title {
457 | font-weight: bold;
458 | }
459 |
460 |
461 | /*=== STRUCTURE */
462 | /*===============*/
463 | /*=== Header */
464 | .header>.item {
465 | vertical-align: middle;
466 | text-align: center;
467 | }
468 |
469 | .header>.item.title h1 {
470 | margin: 0.5em 0;
471 | }
472 |
473 | .header>.item.title h1 a {
474 | text-decoration: none;
475 | }
476 |
477 | .header>.item.search input {
478 | width: 350px;
479 | }
480 |
481 | .header>.item.title .logo {
482 | filter: grayscale(100%) brightness(2.5);
483 | }
484 |
485 | .header>.item.title a:hover .logo {
486 | filter: grayscale(85%) brightness(2.5);
487 | }
488 |
489 | /*=== Body */
490 | .aside {
491 | background-color: var(--accent-bg);
492 | border-radius: 12px;
493 | }
494 |
495 | /*=== Aside main page */
496 | .aside.aside_feed {
497 | padding: 10px 0;
498 | text-align: center;
499 | }
500 |
501 | .aside.aside_feed .tree {
502 | margin: 10px 0 50px;
503 | }
504 |
505 | .aside_feed .category .title:not([data-unread="0"]) {
506 | width: calc(100% - 35px - 20px);
507 | }
508 |
509 | .aside_feed .tree-folder-items.active {
510 | background-color: var(--bg);
511 | }
512 |
513 | .aside.aside_feed .nav-form input,
514 | .aside.aside_feed .nav-form select {
515 | width: 140px;
516 | }
517 |
518 | .aside.aside_feed .nav-form .dropdown .dropdown-menu {
519 | right: -20px;
520 | }
521 |
522 | .aside.aside_feed .nav-form .dropdown .dropdown-menu::after {
523 | right: 33px;
524 | }
525 |
526 | .aside_feed .tree-folder-items .item .dropdown-target:target~.dropdown-toggle>.icon,
527 | .aside_feed .tree-folder-items .item:hover .dropdown-toggle>.icon,
528 | .aside_feed .tree-folder-items .item.active .dropdown-toggle>.icon {
529 | border-radius: 3px;
530 | }
531 |
532 | .item.feed.error>.item-title {
533 | color: var(--accent-light);
534 | }
535 |
536 | .item.feed.active {
537 | background-color: var(--accent-bg);
538 | font-weight: bold;
539 |
540 | }
541 |
542 | li.item.active {
543 | background-color: var(--bg);
544 | font-weight: bold;
545 | }
546 |
547 | .item.feed:hover {
548 | background-color: var(--hover);
549 | transition: .4s;
550 | }
551 |
552 | /*=== New article notification */
553 | #new-article {
554 | font-size: 0.9em;
555 | text-align: center;
556 | }
557 |
558 | #new-article>a {
559 | line-height: 3em;
560 | font-weight: bold;
561 | }
562 |
563 | #new-article>a:hover {
564 | text-decoration: none;
565 | }
566 |
567 | /*=== Day indication */
568 | .day {
569 | padding: 0 10px;
570 | font-weight: bold;
571 | line-height: 3em;
572 | }
573 |
574 | .day .name {
575 | padding: 0 10px 0 0;
576 | font-size: 1.8em;
577 | opacity: 0.3;
578 | font-style: italic;
579 | text-align: right;
580 | }
581 |
582 | .name {
583 | display: none;
584 | }
585 |
586 |
587 | /*=== Feed article header and footer */
588 | .flux_header {
589 | position: relative;
590 | font-size: 0.8rem;
591 | cursor: pointer;
592 | }
593 |
594 | .flux_header .title {
595 | font-size: 0.8rem;
596 | }
597 |
598 | .flux .website .favicon {
599 | padding: 0.25rem;
600 | position: absolute;
601 | }
602 |
603 | .flux .website span {
604 | margin-left: 2rem;
605 | }
606 |
607 | .flux .item.date {
608 | width: 155px;
609 | text-align: right;
610 | overflow: hidden;
611 | font-size: 0.7rem;
612 | }
613 |
614 | .flux .bottom {
615 | font-size: 0.8rem;
616 | text-align: center;
617 | }
618 |
619 | .flux:not(.current) .flux_header:hover,
620 | .flux:not(.current) .flux_header:hover .item.title {
621 | background-color: var(--hover);
622 | transition: false;
623 | }
624 |
625 | .flux.current {
626 | background: var(--accent-bg);
627 | }
628 |
629 | .flux .item.title a {
630 | color: var(--text);
631 | }
632 |
633 | .flux .item.title .summary {
634 | color: var(--text-light);
635 | opacity: 0.8;
636 | }
637 |
638 | .flux .item.title .author {
639 | color: var(--text-light);
640 | opacity: 0.8;
641 | }
642 |
643 |
644 | /*=== Feed article content */
645 | .content {
646 | margin: auto;
647 | padding: 20px 10px;
648 | min-height: 20em;
649 | line-height: 1.7em;
650 | word-wrap: break-word;
651 | }
652 |
653 | .hide_posts>.flux:not(.active)>.flux_content {
654 | display: none;
655 | }
656 |
657 | .content hr {
658 | margin: 30px 10px;
659 | height: 1px;
660 | }
661 |
662 | .content pre {
663 | margin: 10px auto;
664 | padding: 10px 20px;
665 | overflow: auto;
666 | font-size: 0.9rem;
667 | border: 1px solid var(--accent);
668 | border-radius: 6px;
669 |
670 | }
671 |
672 | .content code {
673 | padding: 2px 5px;
674 | }
675 |
676 | .content pre code {
677 | border: none;
678 | }
679 |
680 | .content blockquote {
681 | margin: 0;
682 | padding: 5px 20px;
683 | display: block;
684 | }
685 |
686 | .content blockquote p {
687 | margin: 0;
688 | }
689 |
690 | /*=== Notification and actualize notification */
691 | .notification {
692 | padding: 0 0 0 5px;
693 | background: var(--bg);
694 | color: var(--text);
695 | font-size: 0.9em;
696 | /*border: 1px solid #aaa;*/
697 | border-radius: 6px;
698 | z-index: 10;
699 | text-align: center;
700 | font-weight: bold;
701 | line-height: 3em;
702 | vertical-align: middle;
703 | }
704 |
705 | .notification.closed {
706 | opacity: 0;
707 | visibility: hidden;
708 | }
709 |
710 | /*=== Popup */
711 | #popup {
712 | background-color: rgb(0, 0, 0, .4);
713 | }
714 |
715 | #popup-content {
716 | background-color: var(--accent-bg);
717 | box-shadow: 0 0 1px #d8dee9, 1px 2px 3px var(--bg);
718 | }
719 |
720 | #popup-close:hover,
721 | #popup-close:focus {
722 | color: #d8dee9;
723 | }
724 |
725 | #popup-txt {
726 | display: none;
727 | height: 100%;
728 | }
729 |
730 | /*=== Navigation menu (for articles) */
731 | #nav_entries {
732 | margin: 0;
733 | background: var(--accent-bg);
734 | text-align: center;
735 | line-height: 3em;
736 | }
737 |
738 | #bigMarkAsRead {
739 | text-decoration: none;
740 | }
741 |
742 | .bigTick {
743 | font-size: 4em;
744 | }
745 |
746 | /*=== Statistiques */
747 | .stat>table td,
748 | .stat>table th {
749 | text-align: center;
750 | }
751 |
752 | .stat {
753 | margin: 10px 0 20px;
754 | }
755 |
756 | /*=== Slider */
757 | #slider {
758 | background: var(--accent-bg);
759 | border-left: 1px solid var(--border);
760 | }
761 |
762 | /*=== DIVERS */
763 | /*===========*/
764 | .category .title.error::before {
765 | color: var(--accent-light);
766 | }
767 |
768 |
769 | .nav_menu {
770 | padding: 5px 0;
771 | text-align: center;
772 | }
773 |
774 | /*=== PRINTER */
775 | /*============*/
776 |
777 | @media print {
778 |
779 | .header,
780 | .aside,
781 | .nav_menu,
782 | .day,
783 | .flux_header,
784 | .flux_content .bottom,
785 | .pagination,
786 | #nav_entries {
787 | display: none;
788 | }
789 |
790 | html,
791 | body {
792 | background: #fff;
793 | color: #000;
794 | font-family: Serif;
795 | }
796 |
797 | #global,
798 | .flux_content {
799 | display: block !important;
800 | }
801 |
802 | .flux_content .content {
803 | width: 100% !important;
804 | }
805 |
806 | .flux_content .content a {
807 | color: #000;
808 | }
809 | }
810 |
811 | /*=== PREVIEW */
812 | /*===========*/
813 | .preview_controls {
814 | margin-left: auto;
815 | margin-right: auto;
816 | padding: 1rem;
817 | max-width: 1000px;
818 | text-align: center;
819 | background-color: #eee;
820 | border: 1px solid #e0e0e0;
821 | border-radius: .25rem;
822 | }
823 |
824 | .preview_controls label {
825 | display: inline;
826 | }
827 |
828 | .preview_controls label input[type="radio"] {
829 | margin-top: -4px;
830 | }
831 |
832 | .preview_controls label+label {
833 | margin-left: 1rem;
834 | }
835 |
836 | .preview_background {
837 | background-color: transparent;
838 | }
839 |
840 | .drag-drop-marker {
841 | margin: -1px;
842 | }
843 |
844 |
845 | /*BEGINS BASE.CSS*/
846 |
847 | /*=== GENERAL */
848 | /*============*/
849 |
850 | /*=== Links */
851 | a,
852 | button.as-link {
853 | outline: none;
854 | }
855 |
856 | /*=== Forms */
857 | textarea {
858 | width: 360px;
859 | height: 100px;
860 | }
861 |
862 | option {
863 | padding: 0 .5em;
864 | }
865 |
866 | /*=== COMPONENTS */
867 | /*===============*/
868 | /*=== Forms */
869 | .form-group.form-actions .btn {
870 | margin: 0 10px;
871 | }
872 |
873 | /*=== Navigation */
874 | .nav-list {
875 | font-size: 0.9rem;
876 | }
877 |
878 | .nav-list .item,
879 | .nav-list .item.nav-header {
880 | min-height: 2.5em;
881 | line-height: 2.5;
882 | }
883 |
884 | .nav-list .item>a {
885 | padding: 0 1rem;
886 | }
887 |
888 | .nav-list a:hover {
889 | text-decoration: none;
890 | background-color: var(--hover);
891 | }
892 |
893 | .nav-list .nav-header {
894 | padding: 0 1rem;
895 | font-weight: bold;
896 | }
897 |
898 | .nav-list .nav-form {
899 | padding: 3px;
900 | text-align: center;
901 | }
902 |
903 | /*=== Dropdown */
904 | .dropdown-menu::after {
905 | position: absolute;
906 | top: -6px;
907 | right: 13px;
908 | width: 10px;
909 | height: 10px;
910 | z-index: -10;
911 | transform: rotate(45deg);
912 | border-color: var(--border);
913 | }
914 |
915 | .dropdown-menu>.item>a:hover,
916 | .dropdown-menu>.item>span:hover,
917 | .dropdown-menu>.item>.as-link:hover {
918 | color: var(--main-text);
919 | background-color: var(--hover);
920 | transition: .4s;
921 | }
922 |
923 | /*=== Pagination */
924 | .pagination .item a {
925 | font-style: italic;
926 | }
927 |
928 | /*=== STRUCTURE */
929 | /*===============*/
930 | /*=== Header */
931 |
932 | /*=== Body */
933 | /*=== Aside main page (categories) */
934 | .aside_feed .tree-folder-title>.title:not([data-unread="0"])::after {
935 | position: absolute;
936 | right: 0;
937 | margin: 10px 0;
938 | padding: 0 10px;
939 | font-size: 0.9rem;
940 | }
941 |
942 | /*=== Aside main page (feeds) */
943 | .aside_feed .tree-folder-items .dropdown-menu::after {
944 | left: 2px;
945 | }
946 |
947 |
948 | /*=== Configuration pages */
949 | .post {
950 | padding: 10px 50px;
951 | font-size: 0.9em;
952 | }
953 |
954 | .post form {
955 | margin: 10px 0;
956 | }
957 |
958 | .post.content {
959 | max-width: 550px;
960 | }
961 |
962 | /*=== Prompt (centered) */
963 | .prompt input {
964 | margin: 5px auto;
965 | width: 100%;
966 | }
967 |
968 | /*=== Navigation menu (for articles) */
969 | /*=== READER VIEW */
970 | /*================*/
971 | #stream.reader .flux {
972 | background: #242933;
973 | border: none;
974 | }
975 |
976 | #stream.reader .flux .content {
977 | background-color: #2e3440;
978 | border: none;
979 | }
980 |
981 | #stream.reader .flux .author {
982 | margin: 0 0 10px;
983 | font-size: 90%;
984 | }
985 |
986 | /*=== GLOBAL VIEW */
987 | /*================*/
988 | .box.category .box-title .title {
989 | font-weight: normal;
990 | text-decoration: none;
991 | text-align: left;
992 | }
993 |
994 | .box.category .title:not([data-unread="0"])::after {
995 | background: none;
996 | border: 0;
997 | position: absolute;
998 | top: 5px;
999 | right: 10px;
1000 | font-weight: bold;
1001 | box-shadow: none;
1002 | text-shadow: none;
1003 | }
1004 |
1005 | #panel {
1006 | background-color: var(--bg);
1007 | }
1008 |
1009 | /*=== MOBILE */
1010 | /*===========*/
1011 |
1012 | @media (max-width: 840px) {
1013 | .aside:target+.close-aside {
1014 | background: rgba(0, 0, 0, 0.2);
1015 | display: block;
1016 | font-size: 0;
1017 | position: fixed;
1018 | top: 0;
1019 | bottom: 0;
1020 | left: 0;
1021 | right: 0;
1022 | cursor: pointer;
1023 | z-index: 99;
1024 | }
1025 |
1026 | .nav_mobile {
1027 | display: block;
1028 | }
1029 |
1030 | .aside {
1031 | position: fixed;
1032 | top: 0;
1033 | bottom: 0;
1034 | left: 0;
1035 | width: 0;
1036 | overflow: hidden;
1037 | z-index: 100;
1038 | transition: width 200ms linear;
1039 | }
1040 |
1041 | .aside.aside_feed {
1042 | padding: 0;
1043 | }
1044 |
1045 | .aside:target,
1046 | .reader .aside:target {
1047 | width: 90%;
1048 | height: 100vh;
1049 | }
1050 |
1051 | .aside_feed .configure-feeds {
1052 | margin-top: 10px;
1053 | }
1054 |
1055 | .flux_header .item.website {
1056 | width: 40px;
1057 | }
1058 |
1059 | .flux:not(.current):hover .item.title {
1060 | position: relative;
1061 | width: auto;
1062 | white-space: nowrap;
1063 | }
1064 |
1065 | .flux .website .favicon {
1066 | position: relative;
1067 | }
1068 |
1069 | .notification {
1070 | top: 0;
1071 | left: 0;
1072 | right: 0;
1073 | }
1074 |
1075 | #nav_entries {
1076 | width: 100%;
1077 | }
1078 |
1079 | #panel {
1080 | top: 25px;
1081 | bottom: 30px;
1082 | left: 0;
1083 | right: 0;
1084 | }
1085 |
1086 | #panel .close {
1087 | top: 0;
1088 | right: 0;
1089 | left: auto;
1090 | bottom: auto;
1091 | display: inline-block;
1092 | width: 30px;
1093 | height: 30px;
1094 | }
1095 |
1096 | #slider.active {
1097 | left: 0;
1098 | top: 50px;
1099 | background-color: var(--bg);
1100 | }
1101 |
1102 | #close-slider img {
1103 | display: initial;
1104 | }
1105 |
1106 | #close-slider.active {
1107 | background: var(--bg);
1108 | display: block;
1109 | width: 100%;
1110 | height: 50px;
1111 | z-index: 10;
1112 | text-align: center;
1113 | line-height: 50px;
1114 | border-bottom: 1px solid #ddd;
1115 | }
1116 |
1117 | .stat.half {
1118 | grid-column: 1 / span 2;
1119 | }
1120 |
1121 | .nav_menu .btn {
1122 | margin: 5px 10px;
1123 | }
1124 |
1125 | .nav_menu .stick {
1126 | margin: 0 10px;
1127 | }
1128 |
1129 | .nav_menu .stick .btn {
1130 | margin: 5px 0;
1131 | }
1132 |
1133 | .nav_menu .search {
1134 | display: inline-block;
1135 | max-width: 97%;
1136 | }
1137 |
1138 | .nav_menu .search input {
1139 | max-width: 97%;
1140 | width: 90px;
1141 | }
1142 |
1143 | .nav_menu .search input:focus {
1144 | width: 400px;
1145 | }
1146 |
1147 | .post {
1148 | padding: 1rem;
1149 | }
1150 |
1151 | .day .name {
1152 | font-size: 1.1rem;
1153 | }
1154 |
1155 | .pagination {
1156 | margin: 0 0 3.5em;
1157 | }
1158 |
1159 | .notification a.close {
1160 | display: block;
1161 | left: 0;
1162 | }
1163 |
1164 | .notification a.close:hover {
1165 | opacity: 0.5;
1166 | }
1167 |
1168 | .notification a.close .icon {
1169 | display: none;
1170 | }
1171 | }
1172 |
--------------------------------------------------------------------------------