├── .editorconfig ├── LICENSE ├── README.md ├── assets ├── frappe.png ├── latte.png ├── macchiato.png ├── mocha.png └── res.webp ├── freshrss.tera ├── justfile ├── renovate.json └── themes ├── catppuccin-frappe.css ├── catppuccin-latte.css ├── catppuccin-macchiato.css └── catppuccin-mocha.css /.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 | Logo
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 | -------------------------------------------------------------------------------- /assets/frappe.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/catppuccin/freshrss/6794590bb6a3dfbe229e971dc47a363ab43a7eb1/assets/frappe.png -------------------------------------------------------------------------------- /assets/latte.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/catppuccin/freshrss/6794590bb6a3dfbe229e971dc47a363ab43a7eb1/assets/latte.png -------------------------------------------------------------------------------- /assets/macchiato.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/catppuccin/freshrss/6794590bb6a3dfbe229e971dc47a363ab43a7eb1/assets/macchiato.png -------------------------------------------------------------------------------- /assets/mocha.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/catppuccin/freshrss/6794590bb6a3dfbe229e971dc47a363ab43a7eb1/assets/mocha.png -------------------------------------------------------------------------------- /assets/res.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/catppuccin/freshrss/6794590bb6a3dfbe229e971dc47a363ab43a7eb1/assets/res.webp -------------------------------------------------------------------------------- /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 blockquote { 677 | margin: 0; 678 | padding: 5px 20px; 679 | display: block; 680 | } 681 | 682 | .content blockquote p { 683 | margin: 0; 684 | } 685 | 686 | /*=== Notification and actualize notification */ 687 | .notification { 688 | padding: 0 0 0 5px; 689 | background: var(--bg); 690 | color: var(--text); 691 | font-size: 0.9em; 692 | /*border: 1px solid #aaa;*/ 693 | border-radius: 6px; 694 | z-index: 10; 695 | text-align: center; 696 | font-weight: bold; 697 | line-height: 3em; 698 | vertical-align: middle; 699 | } 700 | 701 | .notification.closed { 702 | opacity: 0; 703 | visibility: hidden; 704 | } 705 | 706 | /*=== Popup */ 707 | #popup { 708 | background-color: rgb(0, 0, 0, .4); 709 | } 710 | 711 | #popup-content { 712 | background-color: var(--accent-bg); 713 | box-shadow: 0 0 1px #d8dee9, 1px 2px 3px var(--bg); 714 | } 715 | 716 | #popup-close:hover, 717 | #popup-close:focus { 718 | color: #d8dee9; 719 | } 720 | 721 | #popup-txt { 722 | display: none; 723 | height: 100%; 724 | } 725 | 726 | /*=== Navigation menu (for articles) */ 727 | #nav_entries { 728 | margin: 0; 729 | background: var(--accent-bg); 730 | text-align: center; 731 | line-height: 3em; 732 | } 733 | 734 | #bigMarkAsRead { 735 | text-decoration: none; 736 | } 737 | 738 | .bigTick { 739 | font-size: 4em; 740 | } 741 | 742 | /*=== Statistiques */ 743 | .stat>table td, 744 | .stat>table th { 745 | text-align: center; 746 | } 747 | 748 | .stat { 749 | margin: 10px 0 20px; 750 | } 751 | 752 | /*=== Slider */ 753 | #slider { 754 | background: var(--accent-bg); 755 | border-left: 1px solid var(--border); 756 | } 757 | 758 | /*=== DIVERS */ 759 | /*===========*/ 760 | .category .title.error::before { 761 | color: var(--accent-light); 762 | } 763 | 764 | 765 | .nav_menu { 766 | padding: 5px 0; 767 | text-align: center; 768 | } 769 | 770 | /*=== PRINTER */ 771 | /*============*/ 772 | 773 | @media print { 774 | 775 | .header, 776 | .aside, 777 | .nav_menu, 778 | .day, 779 | .flux_header, 780 | .flux_content .bottom, 781 | .pagination, 782 | #nav_entries { 783 | display: none; 784 | } 785 | 786 | html, 787 | body { 788 | background: #fff; 789 | color: #000; 790 | font-family: Serif; 791 | } 792 | 793 | #global, 794 | .flux_content { 795 | display: block !important; 796 | } 797 | 798 | .flux_content .content { 799 | width: 100% !important; 800 | } 801 | 802 | .flux_content .content a { 803 | color: #000; 804 | } 805 | } 806 | 807 | /*=== PREVIEW */ 808 | /*===========*/ 809 | .preview_controls { 810 | margin-left: auto; 811 | margin-right: auto; 812 | padding: 1rem; 813 | max-width: 1000px; 814 | text-align: center; 815 | background-color: #eee; 816 | border: 1px solid #e0e0e0; 817 | border-radius: .25rem; 818 | } 819 | 820 | .preview_controls label { 821 | display: inline; 822 | } 823 | 824 | .preview_controls label input[type="radio"] { 825 | margin-top: -4px; 826 | } 827 | 828 | .preview_controls label+label { 829 | margin-left: 1rem; 830 | } 831 | 832 | .preview_background { 833 | background-color: transparent; 834 | } 835 | 836 | .drag-drop-marker { 837 | margin: -1px; 838 | } 839 | 840 | 841 | /*BEGINS BASE.CSS*/ 842 | 843 | /*=== GENERAL */ 844 | /*============*/ 845 | 846 | /*=== Links */ 847 | a, 848 | button.as-link { 849 | outline: none; 850 | } 851 | 852 | /*=== Forms */ 853 | textarea { 854 | width: 360px; 855 | height: 100px; 856 | } 857 | 858 | option { 859 | padding: 0 .5em; 860 | } 861 | 862 | /*=== COMPONENTS */ 863 | /*===============*/ 864 | /*=== Forms */ 865 | .form-group.form-actions .btn { 866 | margin: 0 10px; 867 | } 868 | 869 | /*=== Navigation */ 870 | .nav-list { 871 | font-size: 0.9rem; 872 | } 873 | 874 | .nav-list .item, 875 | .nav-list .item.nav-header { 876 | min-height: 2.5em; 877 | line-height: 2.5; 878 | } 879 | 880 | .nav-list .item>a { 881 | padding: 0 1rem; 882 | } 883 | 884 | .nav-list a:hover { 885 | text-decoration: none; 886 | background-color: var(--hover); 887 | } 888 | 889 | .nav-list .nav-header { 890 | padding: 0 1rem; 891 | font-weight: bold; 892 | } 893 | 894 | .nav-list .nav-form { 895 | padding: 3px; 896 | text-align: center; 897 | } 898 | 899 | /*=== Dropdown */ 900 | .dropdown-menu::after { 901 | position: absolute; 902 | top: -6px; 903 | right: 13px; 904 | width: 10px; 905 | height: 10px; 906 | z-index: -10; 907 | transform: rotate(45deg); 908 | border-color: var(--border); 909 | } 910 | 911 | .dropdown-menu>.item>a:hover, 912 | .dropdown-menu>.item>span:hover, 913 | .dropdown-menu>.item>.as-link:hover { 914 | color: var(--main-text); 915 | background-color: var(--hover); 916 | transition: .4s; 917 | } 918 | 919 | /*=== Pagination */ 920 | .pagination .item a { 921 | font-style: italic; 922 | } 923 | 924 | /*=== STRUCTURE */ 925 | /*===============*/ 926 | /*=== Header */ 927 | 928 | /*=== Body */ 929 | /*=== Aside main page (categories) */ 930 | .aside_feed .tree-folder-title>.title:not([data-unread="0"])::after { 931 | position: absolute; 932 | right: 0; 933 | margin: 10px 0; 934 | padding: 0 10px; 935 | font-size: 0.9rem; 936 | } 937 | 938 | /*=== Aside main page (feeds) */ 939 | .aside_feed .tree-folder-items .dropdown-menu::after { 940 | left: 2px; 941 | } 942 | 943 | 944 | /*=== Configuration pages */ 945 | .post { 946 | padding: 10px 50px; 947 | font-size: 0.9em; 948 | } 949 | 950 | .post form { 951 | margin: 10px 0; 952 | } 953 | 954 | .post.content { 955 | max-width: 550px; 956 | } 957 | 958 | /*=== Prompt (centered) */ 959 | .prompt input { 960 | margin: 5px auto; 961 | width: 100%; 962 | } 963 | 964 | /*=== Navigation menu (for articles) */ 965 | /*=== READER VIEW */ 966 | /*================*/ 967 | #stream.reader .flux { 968 | background: #242933; 969 | border: none; 970 | } 971 | 972 | #stream.reader .flux .content { 973 | background-color: #2e3440; 974 | border: none; 975 | } 976 | 977 | #stream.reader .flux .author { 978 | margin: 0 0 10px; 979 | font-size: 90%; 980 | } 981 | 982 | /*=== GLOBAL VIEW */ 983 | /*================*/ 984 | .box.category .box-title .title { 985 | font-weight: normal; 986 | text-decoration: none; 987 | text-align: left; 988 | } 989 | 990 | .box.category .title:not([data-unread="0"])::after { 991 | background: none; 992 | border: 0; 993 | position: absolute; 994 | top: 5px; 995 | right: 10px; 996 | font-weight: bold; 997 | box-shadow: none; 998 | text-shadow: none; 999 | } 1000 | 1001 | #panel { 1002 | background-color: var(--bg); 1003 | } 1004 | 1005 | /*=== MOBILE */ 1006 | /*===========*/ 1007 | 1008 | @media (max-width: 840px) { 1009 | .aside:target+.close-aside { 1010 | background: rgba(0, 0, 0, 0.2); 1011 | display: block; 1012 | font-size: 0; 1013 | position: fixed; 1014 | top: 0; 1015 | bottom: 0; 1016 | left: 0; 1017 | right: 0; 1018 | cursor: pointer; 1019 | z-index: 99; 1020 | } 1021 | 1022 | .nav_mobile { 1023 | display: block; 1024 | } 1025 | 1026 | .aside { 1027 | position: fixed; 1028 | top: 0; 1029 | bottom: 0; 1030 | left: 0; 1031 | width: 0; 1032 | overflow: hidden; 1033 | z-index: 100; 1034 | transition: width 200ms linear; 1035 | } 1036 | 1037 | .aside.aside_feed { 1038 | padding: 0; 1039 | } 1040 | 1041 | .aside:target, 1042 | .reader .aside:target { 1043 | width: 90%; 1044 | height: 100vh; 1045 | } 1046 | 1047 | .aside_feed .configure-feeds { 1048 | margin-top: 10px; 1049 | } 1050 | 1051 | .flux_header .item.website { 1052 | width: 40px; 1053 | } 1054 | 1055 | .flux:not(.current):hover .item.title { 1056 | position: relative; 1057 | width: auto; 1058 | white-space: nowrap; 1059 | } 1060 | 1061 | .flux .website .favicon { 1062 | position: relative; 1063 | } 1064 | 1065 | .notification { 1066 | top: 0; 1067 | left: 0; 1068 | right: 0; 1069 | } 1070 | 1071 | #nav_entries { 1072 | width: 100%; 1073 | } 1074 | 1075 | #panel { 1076 | top: 25px; 1077 | bottom: 30px; 1078 | left: 0; 1079 | right: 0; 1080 | } 1081 | 1082 | #panel .close { 1083 | top: 0; 1084 | right: 0; 1085 | left: auto; 1086 | bottom: auto; 1087 | display: inline-block; 1088 | width: 30px; 1089 | height: 30px; 1090 | } 1091 | 1092 | #slider.active { 1093 | left: 0; 1094 | top: 50px; 1095 | background-color: var(--bg); 1096 | } 1097 | 1098 | #close-slider img { 1099 | display: initial; 1100 | } 1101 | 1102 | #close-slider.active { 1103 | background: var(--bg); 1104 | display: block; 1105 | width: 100%; 1106 | height: 50px; 1107 | z-index: 10; 1108 | text-align: center; 1109 | line-height: 50px; 1110 | border-bottom: 1px solid #ddd; 1111 | } 1112 | 1113 | .stat.half { 1114 | grid-column: 1 / span 2; 1115 | } 1116 | 1117 | .nav_menu .btn { 1118 | margin: 5px 10px; 1119 | } 1120 | 1121 | .nav_menu .stick { 1122 | margin: 0 10px; 1123 | } 1124 | 1125 | .nav_menu .stick .btn { 1126 | margin: 5px 0; 1127 | } 1128 | 1129 | .nav_menu .search { 1130 | display: inline-block; 1131 | max-width: 97%; 1132 | } 1133 | 1134 | .nav_menu .search input { 1135 | max-width: 97%; 1136 | width: 90px; 1137 | } 1138 | 1139 | .nav_menu .search input:focus { 1140 | width: 400px; 1141 | } 1142 | 1143 | .post { 1144 | padding: 1rem; 1145 | } 1146 | 1147 | .day .name { 1148 | font-size: 1.1rem; 1149 | } 1150 | 1151 | .pagination { 1152 | margin: 0 0 3.5em; 1153 | } 1154 | 1155 | .notification a.close { 1156 | display: block; 1157 | left: 0; 1158 | } 1159 | 1160 | .notification a.close:hover { 1161 | opacity: 0.5; 1162 | } 1163 | 1164 | .notification a.close .icon { 1165 | display: none; 1166 | } 1167 | } 1168 | -------------------------------------------------------------------------------- /justfile: -------------------------------------------------------------------------------- 1 | _default: 2 | @just --list 3 | 4 | build: 5 | whiskers freshrss.tera 6 | -------------------------------------------------------------------------------- /renovate.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://docs.renovatebot.com/renovate-schema.json", 3 | "extends": [ 4 | "local>catppuccin/renovate-config" 5 | ] 6 | } 7 | -------------------------------------------------------------------------------- /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 blockquote { 670 | margin: 0; 671 | padding: 5px 20px; 672 | display: block; 673 | } 674 | 675 | .content blockquote p { 676 | margin: 0; 677 | } 678 | 679 | /*=== Notification and actualize notification */ 680 | .notification { 681 | padding: 0 0 0 5px; 682 | background: var(--bg); 683 | color: var(--text); 684 | font-size: 0.9em; 685 | /*border: 1px solid #aaa;*/ 686 | border-radius: 6px; 687 | z-index: 10; 688 | text-align: center; 689 | font-weight: bold; 690 | line-height: 3em; 691 | vertical-align: middle; 692 | } 693 | 694 | .notification.closed { 695 | opacity: 0; 696 | visibility: hidden; 697 | } 698 | 699 | /*=== Popup */ 700 | #popup { 701 | background-color: rgb(0, 0, 0, .4); 702 | } 703 | 704 | #popup-content { 705 | background-color: var(--accent-bg); 706 | box-shadow: 0 0 1px #d8dee9, 1px 2px 3px var(--bg); 707 | } 708 | 709 | #popup-close:hover, 710 | #popup-close:focus { 711 | color: #d8dee9; 712 | } 713 | 714 | #popup-txt { 715 | display: none; 716 | height: 100%; 717 | } 718 | 719 | /*=== Navigation menu (for articles) */ 720 | #nav_entries { 721 | margin: 0; 722 | background: var(--accent-bg); 723 | text-align: center; 724 | line-height: 3em; 725 | } 726 | 727 | #bigMarkAsRead { 728 | text-decoration: none; 729 | } 730 | 731 | .bigTick { 732 | font-size: 4em; 733 | } 734 | 735 | /*=== Statistiques */ 736 | .stat>table td, 737 | .stat>table th { 738 | text-align: center; 739 | } 740 | 741 | .stat { 742 | margin: 10px 0 20px; 743 | } 744 | 745 | /*=== Slider */ 746 | #slider { 747 | background: var(--accent-bg); 748 | border-left: 1px solid var(--border); 749 | } 750 | 751 | /*=== DIVERS */ 752 | /*===========*/ 753 | .category .title.error::before { 754 | color: var(--accent-light); 755 | } 756 | 757 | 758 | .nav_menu { 759 | padding: 5px 0; 760 | text-align: center; 761 | } 762 | 763 | /*=== PRINTER */ 764 | /*============*/ 765 | 766 | @media print { 767 | 768 | .header, 769 | .aside, 770 | .nav_menu, 771 | .day, 772 | .flux_header, 773 | .flux_content .bottom, 774 | .pagination, 775 | #nav_entries { 776 | display: none; 777 | } 778 | 779 | html, 780 | body { 781 | background: #fff; 782 | color: #000; 783 | font-family: Serif; 784 | } 785 | 786 | #global, 787 | .flux_content { 788 | display: block !important; 789 | } 790 | 791 | .flux_content .content { 792 | width: 100% !important; 793 | } 794 | 795 | .flux_content .content a { 796 | color: #000; 797 | } 798 | } 799 | 800 | /*=== PREVIEW */ 801 | /*===========*/ 802 | .preview_controls { 803 | margin-left: auto; 804 | margin-right: auto; 805 | padding: 1rem; 806 | max-width: 1000px; 807 | text-align: center; 808 | background-color: #eee; 809 | border: 1px solid #e0e0e0; 810 | border-radius: .25rem; 811 | } 812 | 813 | .preview_controls label { 814 | display: inline; 815 | } 816 | 817 | .preview_controls label input[type="radio"] { 818 | margin-top: -4px; 819 | } 820 | 821 | .preview_controls label+label { 822 | margin-left: 1rem; 823 | } 824 | 825 | .preview_background { 826 | background-color: transparent; 827 | } 828 | 829 | .drag-drop-marker { 830 | margin: -1px; 831 | } 832 | 833 | 834 | /*BEGINS BASE.CSS*/ 835 | 836 | /*=== GENERAL */ 837 | /*============*/ 838 | 839 | /*=== Links */ 840 | a, 841 | button.as-link { 842 | outline: none; 843 | } 844 | 845 | /*=== Forms */ 846 | textarea { 847 | width: 360px; 848 | height: 100px; 849 | } 850 | 851 | option { 852 | padding: 0 .5em; 853 | } 854 | 855 | /*=== COMPONENTS */ 856 | /*===============*/ 857 | /*=== Forms */ 858 | .form-group.form-actions .btn { 859 | margin: 0 10px; 860 | } 861 | 862 | /*=== Navigation */ 863 | .nav-list { 864 | font-size: 0.9rem; 865 | } 866 | 867 | .nav-list .item, 868 | .nav-list .item.nav-header { 869 | min-height: 2.5em; 870 | line-height: 2.5; 871 | } 872 | 873 | .nav-list .item>a { 874 | padding: 0 1rem; 875 | } 876 | 877 | .nav-list a:hover { 878 | text-decoration: none; 879 | background-color: var(--hover); 880 | } 881 | 882 | .nav-list .nav-header { 883 | padding: 0 1rem; 884 | font-weight: bold; 885 | } 886 | 887 | .nav-list .nav-form { 888 | padding: 3px; 889 | text-align: center; 890 | } 891 | 892 | /*=== Dropdown */ 893 | .dropdown-menu::after { 894 | position: absolute; 895 | top: -6px; 896 | right: 13px; 897 | width: 10px; 898 | height: 10px; 899 | z-index: -10; 900 | transform: rotate(45deg); 901 | border-color: var(--border); 902 | } 903 | 904 | .dropdown-menu>.item>a:hover, 905 | .dropdown-menu>.item>span:hover, 906 | .dropdown-menu>.item>.as-link:hover { 907 | color: var(--main-text); 908 | background-color: var(--hover); 909 | transition: .4s; 910 | } 911 | 912 | /*=== Pagination */ 913 | .pagination .item a { 914 | font-style: italic; 915 | } 916 | 917 | /*=== STRUCTURE */ 918 | /*===============*/ 919 | /*=== Header */ 920 | 921 | /*=== Body */ 922 | /*=== Aside main page (categories) */ 923 | .aside_feed .tree-folder-title>.title:not([data-unread="0"])::after { 924 | position: absolute; 925 | right: 0; 926 | margin: 10px 0; 927 | padding: 0 10px; 928 | font-size: 0.9rem; 929 | } 930 | 931 | /*=== Aside main page (feeds) */ 932 | .aside_feed .tree-folder-items .dropdown-menu::after { 933 | left: 2px; 934 | } 935 | 936 | 937 | /*=== Configuration pages */ 938 | .post { 939 | padding: 10px 50px; 940 | font-size: 0.9em; 941 | } 942 | 943 | .post form { 944 | margin: 10px 0; 945 | } 946 | 947 | .post.content { 948 | max-width: 550px; 949 | } 950 | 951 | /*=== Prompt (centered) */ 952 | .prompt input { 953 | margin: 5px auto; 954 | width: 100%; 955 | } 956 | 957 | /*=== Navigation menu (for articles) */ 958 | /*=== READER VIEW */ 959 | /*================*/ 960 | #stream.reader .flux { 961 | background: #242933; 962 | border: none; 963 | } 964 | 965 | #stream.reader .flux .content { 966 | background-color: #2e3440; 967 | border: none; 968 | } 969 | 970 | #stream.reader .flux .author { 971 | margin: 0 0 10px; 972 | font-size: 90%; 973 | } 974 | 975 | /*=== GLOBAL VIEW */ 976 | /*================*/ 977 | .box.category .box-title .title { 978 | font-weight: normal; 979 | text-decoration: none; 980 | text-align: left; 981 | } 982 | 983 | .box.category .title:not([data-unread="0"])::after { 984 | background: none; 985 | border: 0; 986 | position: absolute; 987 | top: 5px; 988 | right: 10px; 989 | font-weight: bold; 990 | box-shadow: none; 991 | text-shadow: none; 992 | } 993 | 994 | #panel { 995 | background-color: var(--bg); 996 | } 997 | 998 | /*=== MOBILE */ 999 | /*===========*/ 1000 | 1001 | @media (max-width: 840px) { 1002 | .aside:target+.close-aside { 1003 | background: rgba(0, 0, 0, 0.2); 1004 | display: block; 1005 | font-size: 0; 1006 | position: fixed; 1007 | top: 0; 1008 | bottom: 0; 1009 | left: 0; 1010 | right: 0; 1011 | cursor: pointer; 1012 | z-index: 99; 1013 | } 1014 | 1015 | .nav_mobile { 1016 | display: block; 1017 | } 1018 | 1019 | .aside { 1020 | position: fixed; 1021 | top: 0; 1022 | bottom: 0; 1023 | left: 0; 1024 | width: 0; 1025 | overflow: hidden; 1026 | z-index: 100; 1027 | transition: width 200ms linear; 1028 | } 1029 | 1030 | .aside.aside_feed { 1031 | padding: 0; 1032 | } 1033 | 1034 | .aside:target, 1035 | .reader .aside:target { 1036 | width: 90%; 1037 | height: 100vh; 1038 | } 1039 | 1040 | .aside_feed .configure-feeds { 1041 | margin-top: 10px; 1042 | } 1043 | 1044 | .flux_header .item.website { 1045 | width: 40px; 1046 | } 1047 | 1048 | .flux:not(.current):hover .item.title { 1049 | position: relative; 1050 | width: auto; 1051 | white-space: nowrap; 1052 | } 1053 | 1054 | .flux .website .favicon { 1055 | position: relative; 1056 | } 1057 | 1058 | .notification { 1059 | top: 0; 1060 | left: 0; 1061 | right: 0; 1062 | } 1063 | 1064 | #nav_entries { 1065 | width: 100%; 1066 | } 1067 | 1068 | #panel { 1069 | top: 25px; 1070 | bottom: 30px; 1071 | left: 0; 1072 | right: 0; 1073 | } 1074 | 1075 | #panel .close { 1076 | top: 0; 1077 | right: 0; 1078 | left: auto; 1079 | bottom: auto; 1080 | display: inline-block; 1081 | width: 30px; 1082 | height: 30px; 1083 | } 1084 | 1085 | #slider.active { 1086 | left: 0; 1087 | top: 50px; 1088 | background-color: var(--bg); 1089 | } 1090 | 1091 | #close-slider img { 1092 | display: initial; 1093 | } 1094 | 1095 | #close-slider.active { 1096 | background: var(--bg); 1097 | display: block; 1098 | width: 100%; 1099 | height: 50px; 1100 | z-index: 10; 1101 | text-align: center; 1102 | line-height: 50px; 1103 | border-bottom: 1px solid #ddd; 1104 | } 1105 | 1106 | .stat.half { 1107 | grid-column: 1 / span 2; 1108 | } 1109 | 1110 | .nav_menu .btn { 1111 | margin: 5px 10px; 1112 | } 1113 | 1114 | .nav_menu .stick { 1115 | margin: 0 10px; 1116 | } 1117 | 1118 | .nav_menu .stick .btn { 1119 | margin: 5px 0; 1120 | } 1121 | 1122 | .nav_menu .search { 1123 | display: inline-block; 1124 | max-width: 97%; 1125 | } 1126 | 1127 | .nav_menu .search input { 1128 | max-width: 97%; 1129 | width: 90px; 1130 | } 1131 | 1132 | .nav_menu .search input:focus { 1133 | width: 400px; 1134 | } 1135 | 1136 | .post { 1137 | padding: 1rem; 1138 | } 1139 | 1140 | .day .name { 1141 | font-size: 1.1rem; 1142 | } 1143 | 1144 | .pagination { 1145 | margin: 0 0 3.5em; 1146 | } 1147 | 1148 | .notification a.close { 1149 | display: block; 1150 | left: 0; 1151 | } 1152 | 1153 | .notification a.close:hover { 1154 | opacity: 0.5; 1155 | } 1156 | 1157 | .notification a.close .icon { 1158 | display: none; 1159 | } 1160 | } 1161 | -------------------------------------------------------------------------------- /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 blockquote { 670 | margin: 0; 671 | padding: 5px 20px; 672 | display: block; 673 | } 674 | 675 | .content blockquote p { 676 | margin: 0; 677 | } 678 | 679 | /*=== Notification and actualize notification */ 680 | .notification { 681 | padding: 0 0 0 5px; 682 | background: var(--bg); 683 | color: var(--text); 684 | font-size: 0.9em; 685 | /*border: 1px solid #aaa;*/ 686 | border-radius: 6px; 687 | z-index: 10; 688 | text-align: center; 689 | font-weight: bold; 690 | line-height: 3em; 691 | vertical-align: middle; 692 | } 693 | 694 | .notification.closed { 695 | opacity: 0; 696 | visibility: hidden; 697 | } 698 | 699 | /*=== Popup */ 700 | #popup { 701 | background-color: rgb(0, 0, 0, .4); 702 | } 703 | 704 | #popup-content { 705 | background-color: var(--accent-bg); 706 | box-shadow: 0 0 1px #d8dee9, 1px 2px 3px var(--bg); 707 | } 708 | 709 | #popup-close:hover, 710 | #popup-close:focus { 711 | color: #d8dee9; 712 | } 713 | 714 | #popup-txt { 715 | display: none; 716 | height: 100%; 717 | } 718 | 719 | /*=== Navigation menu (for articles) */ 720 | #nav_entries { 721 | margin: 0; 722 | background: var(--accent-bg); 723 | text-align: center; 724 | line-height: 3em; 725 | } 726 | 727 | #bigMarkAsRead { 728 | text-decoration: none; 729 | } 730 | 731 | .bigTick { 732 | font-size: 4em; 733 | } 734 | 735 | /*=== Statistiques */ 736 | .stat>table td, 737 | .stat>table th { 738 | text-align: center; 739 | } 740 | 741 | .stat { 742 | margin: 10px 0 20px; 743 | } 744 | 745 | /*=== Slider */ 746 | #slider { 747 | background: var(--accent-bg); 748 | border-left: 1px solid var(--border); 749 | } 750 | 751 | /*=== DIVERS */ 752 | /*===========*/ 753 | .category .title.error::before { 754 | color: var(--accent-light); 755 | } 756 | 757 | 758 | .nav_menu { 759 | padding: 5px 0; 760 | text-align: center; 761 | } 762 | 763 | /*=== PRINTER */ 764 | /*============*/ 765 | 766 | @media print { 767 | 768 | .header, 769 | .aside, 770 | .nav_menu, 771 | .day, 772 | .flux_header, 773 | .flux_content .bottom, 774 | .pagination, 775 | #nav_entries { 776 | display: none; 777 | } 778 | 779 | html, 780 | body { 781 | background: #fff; 782 | color: #000; 783 | font-family: Serif; 784 | } 785 | 786 | #global, 787 | .flux_content { 788 | display: block !important; 789 | } 790 | 791 | .flux_content .content { 792 | width: 100% !important; 793 | } 794 | 795 | .flux_content .content a { 796 | color: #000; 797 | } 798 | } 799 | 800 | /*=== PREVIEW */ 801 | /*===========*/ 802 | .preview_controls { 803 | margin-left: auto; 804 | margin-right: auto; 805 | padding: 1rem; 806 | max-width: 1000px; 807 | text-align: center; 808 | background-color: #eee; 809 | border: 1px solid #e0e0e0; 810 | border-radius: .25rem; 811 | } 812 | 813 | .preview_controls label { 814 | display: inline; 815 | } 816 | 817 | .preview_controls label input[type="radio"] { 818 | margin-top: -4px; 819 | } 820 | 821 | .preview_controls label+label { 822 | margin-left: 1rem; 823 | } 824 | 825 | .preview_background { 826 | background-color: transparent; 827 | } 828 | 829 | .drag-drop-marker { 830 | margin: -1px; 831 | } 832 | 833 | 834 | /*BEGINS BASE.CSS*/ 835 | 836 | /*=== GENERAL */ 837 | /*============*/ 838 | 839 | /*=== Links */ 840 | a, 841 | button.as-link { 842 | outline: none; 843 | } 844 | 845 | /*=== Forms */ 846 | textarea { 847 | width: 360px; 848 | height: 100px; 849 | } 850 | 851 | option { 852 | padding: 0 .5em; 853 | } 854 | 855 | /*=== COMPONENTS */ 856 | /*===============*/ 857 | /*=== Forms */ 858 | .form-group.form-actions .btn { 859 | margin: 0 10px; 860 | } 861 | 862 | /*=== Navigation */ 863 | .nav-list { 864 | font-size: 0.9rem; 865 | } 866 | 867 | .nav-list .item, 868 | .nav-list .item.nav-header { 869 | min-height: 2.5em; 870 | line-height: 2.5; 871 | } 872 | 873 | .nav-list .item>a { 874 | padding: 0 1rem; 875 | } 876 | 877 | .nav-list a:hover { 878 | text-decoration: none; 879 | background-color: var(--hover); 880 | } 881 | 882 | .nav-list .nav-header { 883 | padding: 0 1rem; 884 | font-weight: bold; 885 | } 886 | 887 | .nav-list .nav-form { 888 | padding: 3px; 889 | text-align: center; 890 | } 891 | 892 | /*=== Dropdown */ 893 | .dropdown-menu::after { 894 | position: absolute; 895 | top: -6px; 896 | right: 13px; 897 | width: 10px; 898 | height: 10px; 899 | z-index: -10; 900 | transform: rotate(45deg); 901 | border-color: var(--border); 902 | } 903 | 904 | .dropdown-menu>.item>a:hover, 905 | .dropdown-menu>.item>span:hover, 906 | .dropdown-menu>.item>.as-link:hover { 907 | color: var(--main-text); 908 | background-color: var(--hover); 909 | transition: .4s; 910 | } 911 | 912 | /*=== Pagination */ 913 | .pagination .item a { 914 | font-style: italic; 915 | } 916 | 917 | /*=== STRUCTURE */ 918 | /*===============*/ 919 | /*=== Header */ 920 | 921 | /*=== Body */ 922 | /*=== Aside main page (categories) */ 923 | .aside_feed .tree-folder-title>.title:not([data-unread="0"])::after { 924 | position: absolute; 925 | right: 0; 926 | margin: 10px 0; 927 | padding: 0 10px; 928 | font-size: 0.9rem; 929 | } 930 | 931 | /*=== Aside main page (feeds) */ 932 | .aside_feed .tree-folder-items .dropdown-menu::after { 933 | left: 2px; 934 | } 935 | 936 | 937 | /*=== Configuration pages */ 938 | .post { 939 | padding: 10px 50px; 940 | font-size: 0.9em; 941 | } 942 | 943 | .post form { 944 | margin: 10px 0; 945 | } 946 | 947 | .post.content { 948 | max-width: 550px; 949 | } 950 | 951 | /*=== Prompt (centered) */ 952 | .prompt input { 953 | margin: 5px auto; 954 | width: 100%; 955 | } 956 | 957 | /*=== Navigation menu (for articles) */ 958 | /*=== READER VIEW */ 959 | /*================*/ 960 | #stream.reader .flux { 961 | background: #242933; 962 | border: none; 963 | } 964 | 965 | #stream.reader .flux .content { 966 | background-color: #2e3440; 967 | border: none; 968 | } 969 | 970 | #stream.reader .flux .author { 971 | margin: 0 0 10px; 972 | font-size: 90%; 973 | } 974 | 975 | /*=== GLOBAL VIEW */ 976 | /*================*/ 977 | .box.category .box-title .title { 978 | font-weight: normal; 979 | text-decoration: none; 980 | text-align: left; 981 | } 982 | 983 | .box.category .title:not([data-unread="0"])::after { 984 | background: none; 985 | border: 0; 986 | position: absolute; 987 | top: 5px; 988 | right: 10px; 989 | font-weight: bold; 990 | box-shadow: none; 991 | text-shadow: none; 992 | } 993 | 994 | #panel { 995 | background-color: var(--bg); 996 | } 997 | 998 | /*=== MOBILE */ 999 | /*===========*/ 1000 | 1001 | @media (max-width: 840px) { 1002 | .aside:target+.close-aside { 1003 | background: rgba(0, 0, 0, 0.2); 1004 | display: block; 1005 | font-size: 0; 1006 | position: fixed; 1007 | top: 0; 1008 | bottom: 0; 1009 | left: 0; 1010 | right: 0; 1011 | cursor: pointer; 1012 | z-index: 99; 1013 | } 1014 | 1015 | .nav_mobile { 1016 | display: block; 1017 | } 1018 | 1019 | .aside { 1020 | position: fixed; 1021 | top: 0; 1022 | bottom: 0; 1023 | left: 0; 1024 | width: 0; 1025 | overflow: hidden; 1026 | z-index: 100; 1027 | transition: width 200ms linear; 1028 | } 1029 | 1030 | .aside.aside_feed { 1031 | padding: 0; 1032 | } 1033 | 1034 | .aside:target, 1035 | .reader .aside:target { 1036 | width: 90%; 1037 | height: 100vh; 1038 | } 1039 | 1040 | .aside_feed .configure-feeds { 1041 | margin-top: 10px; 1042 | } 1043 | 1044 | .flux_header .item.website { 1045 | width: 40px; 1046 | } 1047 | 1048 | .flux:not(.current):hover .item.title { 1049 | position: relative; 1050 | width: auto; 1051 | white-space: nowrap; 1052 | } 1053 | 1054 | .flux .website .favicon { 1055 | position: relative; 1056 | } 1057 | 1058 | .notification { 1059 | top: 0; 1060 | left: 0; 1061 | right: 0; 1062 | } 1063 | 1064 | #nav_entries { 1065 | width: 100%; 1066 | } 1067 | 1068 | #panel { 1069 | top: 25px; 1070 | bottom: 30px; 1071 | left: 0; 1072 | right: 0; 1073 | } 1074 | 1075 | #panel .close { 1076 | top: 0; 1077 | right: 0; 1078 | left: auto; 1079 | bottom: auto; 1080 | display: inline-block; 1081 | width: 30px; 1082 | height: 30px; 1083 | } 1084 | 1085 | #slider.active { 1086 | left: 0; 1087 | top: 50px; 1088 | background-color: var(--bg); 1089 | } 1090 | 1091 | #close-slider img { 1092 | display: initial; 1093 | } 1094 | 1095 | #close-slider.active { 1096 | background: var(--bg); 1097 | display: block; 1098 | width: 100%; 1099 | height: 50px; 1100 | z-index: 10; 1101 | text-align: center; 1102 | line-height: 50px; 1103 | border-bottom: 1px solid #ddd; 1104 | } 1105 | 1106 | .stat.half { 1107 | grid-column: 1 / span 2; 1108 | } 1109 | 1110 | .nav_menu .btn { 1111 | margin: 5px 10px; 1112 | } 1113 | 1114 | .nav_menu .stick { 1115 | margin: 0 10px; 1116 | } 1117 | 1118 | .nav_menu .stick .btn { 1119 | margin: 5px 0; 1120 | } 1121 | 1122 | .nav_menu .search { 1123 | display: inline-block; 1124 | max-width: 97%; 1125 | } 1126 | 1127 | .nav_menu .search input { 1128 | max-width: 97%; 1129 | width: 90px; 1130 | } 1131 | 1132 | .nav_menu .search input:focus { 1133 | width: 400px; 1134 | } 1135 | 1136 | .post { 1137 | padding: 1rem; 1138 | } 1139 | 1140 | .day .name { 1141 | font-size: 1.1rem; 1142 | } 1143 | 1144 | .pagination { 1145 | margin: 0 0 3.5em; 1146 | } 1147 | 1148 | .notification a.close { 1149 | display: block; 1150 | left: 0; 1151 | } 1152 | 1153 | .notification a.close:hover { 1154 | opacity: 0.5; 1155 | } 1156 | 1157 | .notification a.close .icon { 1158 | display: none; 1159 | } 1160 | } 1161 | -------------------------------------------------------------------------------- /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 blockquote { 670 | margin: 0; 671 | padding: 5px 20px; 672 | display: block; 673 | } 674 | 675 | .content blockquote p { 676 | margin: 0; 677 | } 678 | 679 | /*=== Notification and actualize notification */ 680 | .notification { 681 | padding: 0 0 0 5px; 682 | background: var(--bg); 683 | color: var(--text); 684 | font-size: 0.9em; 685 | /*border: 1px solid #aaa;*/ 686 | border-radius: 6px; 687 | z-index: 10; 688 | text-align: center; 689 | font-weight: bold; 690 | line-height: 3em; 691 | vertical-align: middle; 692 | } 693 | 694 | .notification.closed { 695 | opacity: 0; 696 | visibility: hidden; 697 | } 698 | 699 | /*=== Popup */ 700 | #popup { 701 | background-color: rgb(0, 0, 0, .4); 702 | } 703 | 704 | #popup-content { 705 | background-color: var(--accent-bg); 706 | box-shadow: 0 0 1px #d8dee9, 1px 2px 3px var(--bg); 707 | } 708 | 709 | #popup-close:hover, 710 | #popup-close:focus { 711 | color: #d8dee9; 712 | } 713 | 714 | #popup-txt { 715 | display: none; 716 | height: 100%; 717 | } 718 | 719 | /*=== Navigation menu (for articles) */ 720 | #nav_entries { 721 | margin: 0; 722 | background: var(--accent-bg); 723 | text-align: center; 724 | line-height: 3em; 725 | } 726 | 727 | #bigMarkAsRead { 728 | text-decoration: none; 729 | } 730 | 731 | .bigTick { 732 | font-size: 4em; 733 | } 734 | 735 | /*=== Statistiques */ 736 | .stat>table td, 737 | .stat>table th { 738 | text-align: center; 739 | } 740 | 741 | .stat { 742 | margin: 10px 0 20px; 743 | } 744 | 745 | /*=== Slider */ 746 | #slider { 747 | background: var(--accent-bg); 748 | border-left: 1px solid var(--border); 749 | } 750 | 751 | /*=== DIVERS */ 752 | /*===========*/ 753 | .category .title.error::before { 754 | color: var(--accent-light); 755 | } 756 | 757 | 758 | .nav_menu { 759 | padding: 5px 0; 760 | text-align: center; 761 | } 762 | 763 | /*=== PRINTER */ 764 | /*============*/ 765 | 766 | @media print { 767 | 768 | .header, 769 | .aside, 770 | .nav_menu, 771 | .day, 772 | .flux_header, 773 | .flux_content .bottom, 774 | .pagination, 775 | #nav_entries { 776 | display: none; 777 | } 778 | 779 | html, 780 | body { 781 | background: #fff; 782 | color: #000; 783 | font-family: Serif; 784 | } 785 | 786 | #global, 787 | .flux_content { 788 | display: block !important; 789 | } 790 | 791 | .flux_content .content { 792 | width: 100% !important; 793 | } 794 | 795 | .flux_content .content a { 796 | color: #000; 797 | } 798 | } 799 | 800 | /*=== PREVIEW */ 801 | /*===========*/ 802 | .preview_controls { 803 | margin-left: auto; 804 | margin-right: auto; 805 | padding: 1rem; 806 | max-width: 1000px; 807 | text-align: center; 808 | background-color: #eee; 809 | border: 1px solid #e0e0e0; 810 | border-radius: .25rem; 811 | } 812 | 813 | .preview_controls label { 814 | display: inline; 815 | } 816 | 817 | .preview_controls label input[type="radio"] { 818 | margin-top: -4px; 819 | } 820 | 821 | .preview_controls label+label { 822 | margin-left: 1rem; 823 | } 824 | 825 | .preview_background { 826 | background-color: transparent; 827 | } 828 | 829 | .drag-drop-marker { 830 | margin: -1px; 831 | } 832 | 833 | 834 | /*BEGINS BASE.CSS*/ 835 | 836 | /*=== GENERAL */ 837 | /*============*/ 838 | 839 | /*=== Links */ 840 | a, 841 | button.as-link { 842 | outline: none; 843 | } 844 | 845 | /*=== Forms */ 846 | textarea { 847 | width: 360px; 848 | height: 100px; 849 | } 850 | 851 | option { 852 | padding: 0 .5em; 853 | } 854 | 855 | /*=== COMPONENTS */ 856 | /*===============*/ 857 | /*=== Forms */ 858 | .form-group.form-actions .btn { 859 | margin: 0 10px; 860 | } 861 | 862 | /*=== Navigation */ 863 | .nav-list { 864 | font-size: 0.9rem; 865 | } 866 | 867 | .nav-list .item, 868 | .nav-list .item.nav-header { 869 | min-height: 2.5em; 870 | line-height: 2.5; 871 | } 872 | 873 | .nav-list .item>a { 874 | padding: 0 1rem; 875 | } 876 | 877 | .nav-list a:hover { 878 | text-decoration: none; 879 | background-color: var(--hover); 880 | } 881 | 882 | .nav-list .nav-header { 883 | padding: 0 1rem; 884 | font-weight: bold; 885 | } 886 | 887 | .nav-list .nav-form { 888 | padding: 3px; 889 | text-align: center; 890 | } 891 | 892 | /*=== Dropdown */ 893 | .dropdown-menu::after { 894 | position: absolute; 895 | top: -6px; 896 | right: 13px; 897 | width: 10px; 898 | height: 10px; 899 | z-index: -10; 900 | transform: rotate(45deg); 901 | border-color: var(--border); 902 | } 903 | 904 | .dropdown-menu>.item>a:hover, 905 | .dropdown-menu>.item>span:hover, 906 | .dropdown-menu>.item>.as-link:hover { 907 | color: var(--main-text); 908 | background-color: var(--hover); 909 | transition: .4s; 910 | } 911 | 912 | /*=== Pagination */ 913 | .pagination .item a { 914 | font-style: italic; 915 | } 916 | 917 | /*=== STRUCTURE */ 918 | /*===============*/ 919 | /*=== Header */ 920 | 921 | /*=== Body */ 922 | /*=== Aside main page (categories) */ 923 | .aside_feed .tree-folder-title>.title:not([data-unread="0"])::after { 924 | position: absolute; 925 | right: 0; 926 | margin: 10px 0; 927 | padding: 0 10px; 928 | font-size: 0.9rem; 929 | } 930 | 931 | /*=== Aside main page (feeds) */ 932 | .aside_feed .tree-folder-items .dropdown-menu::after { 933 | left: 2px; 934 | } 935 | 936 | 937 | /*=== Configuration pages */ 938 | .post { 939 | padding: 10px 50px; 940 | font-size: 0.9em; 941 | } 942 | 943 | .post form { 944 | margin: 10px 0; 945 | } 946 | 947 | .post.content { 948 | max-width: 550px; 949 | } 950 | 951 | /*=== Prompt (centered) */ 952 | .prompt input { 953 | margin: 5px auto; 954 | width: 100%; 955 | } 956 | 957 | /*=== Navigation menu (for articles) */ 958 | /*=== READER VIEW */ 959 | /*================*/ 960 | #stream.reader .flux { 961 | background: #242933; 962 | border: none; 963 | } 964 | 965 | #stream.reader .flux .content { 966 | background-color: #2e3440; 967 | border: none; 968 | } 969 | 970 | #stream.reader .flux .author { 971 | margin: 0 0 10px; 972 | font-size: 90%; 973 | } 974 | 975 | /*=== GLOBAL VIEW */ 976 | /*================*/ 977 | .box.category .box-title .title { 978 | font-weight: normal; 979 | text-decoration: none; 980 | text-align: left; 981 | } 982 | 983 | .box.category .title:not([data-unread="0"])::after { 984 | background: none; 985 | border: 0; 986 | position: absolute; 987 | top: 5px; 988 | right: 10px; 989 | font-weight: bold; 990 | box-shadow: none; 991 | text-shadow: none; 992 | } 993 | 994 | #panel { 995 | background-color: var(--bg); 996 | } 997 | 998 | /*=== MOBILE */ 999 | /*===========*/ 1000 | 1001 | @media (max-width: 840px) { 1002 | .aside:target+.close-aside { 1003 | background: rgba(0, 0, 0, 0.2); 1004 | display: block; 1005 | font-size: 0; 1006 | position: fixed; 1007 | top: 0; 1008 | bottom: 0; 1009 | left: 0; 1010 | right: 0; 1011 | cursor: pointer; 1012 | z-index: 99; 1013 | } 1014 | 1015 | .nav_mobile { 1016 | display: block; 1017 | } 1018 | 1019 | .aside { 1020 | position: fixed; 1021 | top: 0; 1022 | bottom: 0; 1023 | left: 0; 1024 | width: 0; 1025 | overflow: hidden; 1026 | z-index: 100; 1027 | transition: width 200ms linear; 1028 | } 1029 | 1030 | .aside.aside_feed { 1031 | padding: 0; 1032 | } 1033 | 1034 | .aside:target, 1035 | .reader .aside:target { 1036 | width: 90%; 1037 | height: 100vh; 1038 | } 1039 | 1040 | .aside_feed .configure-feeds { 1041 | margin-top: 10px; 1042 | } 1043 | 1044 | .flux_header .item.website { 1045 | width: 40px; 1046 | } 1047 | 1048 | .flux:not(.current):hover .item.title { 1049 | position: relative; 1050 | width: auto; 1051 | white-space: nowrap; 1052 | } 1053 | 1054 | .flux .website .favicon { 1055 | position: relative; 1056 | } 1057 | 1058 | .notification { 1059 | top: 0; 1060 | left: 0; 1061 | right: 0; 1062 | } 1063 | 1064 | #nav_entries { 1065 | width: 100%; 1066 | } 1067 | 1068 | #panel { 1069 | top: 25px; 1070 | bottom: 30px; 1071 | left: 0; 1072 | right: 0; 1073 | } 1074 | 1075 | #panel .close { 1076 | top: 0; 1077 | right: 0; 1078 | left: auto; 1079 | bottom: auto; 1080 | display: inline-block; 1081 | width: 30px; 1082 | height: 30px; 1083 | } 1084 | 1085 | #slider.active { 1086 | left: 0; 1087 | top: 50px; 1088 | background-color: var(--bg); 1089 | } 1090 | 1091 | #close-slider img { 1092 | display: initial; 1093 | } 1094 | 1095 | #close-slider.active { 1096 | background: var(--bg); 1097 | display: block; 1098 | width: 100%; 1099 | height: 50px; 1100 | z-index: 10; 1101 | text-align: center; 1102 | line-height: 50px; 1103 | border-bottom: 1px solid #ddd; 1104 | } 1105 | 1106 | .stat.half { 1107 | grid-column: 1 / span 2; 1108 | } 1109 | 1110 | .nav_menu .btn { 1111 | margin: 5px 10px; 1112 | } 1113 | 1114 | .nav_menu .stick { 1115 | margin: 0 10px; 1116 | } 1117 | 1118 | .nav_menu .stick .btn { 1119 | margin: 5px 0; 1120 | } 1121 | 1122 | .nav_menu .search { 1123 | display: inline-block; 1124 | max-width: 97%; 1125 | } 1126 | 1127 | .nav_menu .search input { 1128 | max-width: 97%; 1129 | width: 90px; 1130 | } 1131 | 1132 | .nav_menu .search input:focus { 1133 | width: 400px; 1134 | } 1135 | 1136 | .post { 1137 | padding: 1rem; 1138 | } 1139 | 1140 | .day .name { 1141 | font-size: 1.1rem; 1142 | } 1143 | 1144 | .pagination { 1145 | margin: 0 0 3.5em; 1146 | } 1147 | 1148 | .notification a.close { 1149 | display: block; 1150 | left: 0; 1151 | } 1152 | 1153 | .notification a.close:hover { 1154 | opacity: 0.5; 1155 | } 1156 | 1157 | .notification a.close .icon { 1158 | display: none; 1159 | } 1160 | } 1161 | -------------------------------------------------------------------------------- /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 blockquote { 670 | margin: 0; 671 | padding: 5px 20px; 672 | display: block; 673 | } 674 | 675 | .content blockquote p { 676 | margin: 0; 677 | } 678 | 679 | /*=== Notification and actualize notification */ 680 | .notification { 681 | padding: 0 0 0 5px; 682 | background: var(--bg); 683 | color: var(--text); 684 | font-size: 0.9em; 685 | /*border: 1px solid #aaa;*/ 686 | border-radius: 6px; 687 | z-index: 10; 688 | text-align: center; 689 | font-weight: bold; 690 | line-height: 3em; 691 | vertical-align: middle; 692 | } 693 | 694 | .notification.closed { 695 | opacity: 0; 696 | visibility: hidden; 697 | } 698 | 699 | /*=== Popup */ 700 | #popup { 701 | background-color: rgb(0, 0, 0, .4); 702 | } 703 | 704 | #popup-content { 705 | background-color: var(--accent-bg); 706 | box-shadow: 0 0 1px #d8dee9, 1px 2px 3px var(--bg); 707 | } 708 | 709 | #popup-close:hover, 710 | #popup-close:focus { 711 | color: #d8dee9; 712 | } 713 | 714 | #popup-txt { 715 | display: none; 716 | height: 100%; 717 | } 718 | 719 | /*=== Navigation menu (for articles) */ 720 | #nav_entries { 721 | margin: 0; 722 | background: var(--accent-bg); 723 | text-align: center; 724 | line-height: 3em; 725 | } 726 | 727 | #bigMarkAsRead { 728 | text-decoration: none; 729 | } 730 | 731 | .bigTick { 732 | font-size: 4em; 733 | } 734 | 735 | /*=== Statistiques */ 736 | .stat>table td, 737 | .stat>table th { 738 | text-align: center; 739 | } 740 | 741 | .stat { 742 | margin: 10px 0 20px; 743 | } 744 | 745 | /*=== Slider */ 746 | #slider { 747 | background: var(--accent-bg); 748 | border-left: 1px solid var(--border); 749 | } 750 | 751 | /*=== DIVERS */ 752 | /*===========*/ 753 | .category .title.error::before { 754 | color: var(--accent-light); 755 | } 756 | 757 | 758 | .nav_menu { 759 | padding: 5px 0; 760 | text-align: center; 761 | } 762 | 763 | /*=== PRINTER */ 764 | /*============*/ 765 | 766 | @media print { 767 | 768 | .header, 769 | .aside, 770 | .nav_menu, 771 | .day, 772 | .flux_header, 773 | .flux_content .bottom, 774 | .pagination, 775 | #nav_entries { 776 | display: none; 777 | } 778 | 779 | html, 780 | body { 781 | background: #fff; 782 | color: #000; 783 | font-family: Serif; 784 | } 785 | 786 | #global, 787 | .flux_content { 788 | display: block !important; 789 | } 790 | 791 | .flux_content .content { 792 | width: 100% !important; 793 | } 794 | 795 | .flux_content .content a { 796 | color: #000; 797 | } 798 | } 799 | 800 | /*=== PREVIEW */ 801 | /*===========*/ 802 | .preview_controls { 803 | margin-left: auto; 804 | margin-right: auto; 805 | padding: 1rem; 806 | max-width: 1000px; 807 | text-align: center; 808 | background-color: #eee; 809 | border: 1px solid #e0e0e0; 810 | border-radius: .25rem; 811 | } 812 | 813 | .preview_controls label { 814 | display: inline; 815 | } 816 | 817 | .preview_controls label input[type="radio"] { 818 | margin-top: -4px; 819 | } 820 | 821 | .preview_controls label+label { 822 | margin-left: 1rem; 823 | } 824 | 825 | .preview_background { 826 | background-color: transparent; 827 | } 828 | 829 | .drag-drop-marker { 830 | margin: -1px; 831 | } 832 | 833 | 834 | /*BEGINS BASE.CSS*/ 835 | 836 | /*=== GENERAL */ 837 | /*============*/ 838 | 839 | /*=== Links */ 840 | a, 841 | button.as-link { 842 | outline: none; 843 | } 844 | 845 | /*=== Forms */ 846 | textarea { 847 | width: 360px; 848 | height: 100px; 849 | } 850 | 851 | option { 852 | padding: 0 .5em; 853 | } 854 | 855 | /*=== COMPONENTS */ 856 | /*===============*/ 857 | /*=== Forms */ 858 | .form-group.form-actions .btn { 859 | margin: 0 10px; 860 | } 861 | 862 | /*=== Navigation */ 863 | .nav-list { 864 | font-size: 0.9rem; 865 | } 866 | 867 | .nav-list .item, 868 | .nav-list .item.nav-header { 869 | min-height: 2.5em; 870 | line-height: 2.5; 871 | } 872 | 873 | .nav-list .item>a { 874 | padding: 0 1rem; 875 | } 876 | 877 | .nav-list a:hover { 878 | text-decoration: none; 879 | background-color: var(--hover); 880 | } 881 | 882 | .nav-list .nav-header { 883 | padding: 0 1rem; 884 | font-weight: bold; 885 | } 886 | 887 | .nav-list .nav-form { 888 | padding: 3px; 889 | text-align: center; 890 | } 891 | 892 | /*=== Dropdown */ 893 | .dropdown-menu::after { 894 | position: absolute; 895 | top: -6px; 896 | right: 13px; 897 | width: 10px; 898 | height: 10px; 899 | z-index: -10; 900 | transform: rotate(45deg); 901 | border-color: var(--border); 902 | } 903 | 904 | .dropdown-menu>.item>a:hover, 905 | .dropdown-menu>.item>span:hover, 906 | .dropdown-menu>.item>.as-link:hover { 907 | color: var(--main-text); 908 | background-color: var(--hover); 909 | transition: .4s; 910 | } 911 | 912 | /*=== Pagination */ 913 | .pagination .item a { 914 | font-style: italic; 915 | } 916 | 917 | /*=== STRUCTURE */ 918 | /*===============*/ 919 | /*=== Header */ 920 | 921 | /*=== Body */ 922 | /*=== Aside main page (categories) */ 923 | .aside_feed .tree-folder-title>.title:not([data-unread="0"])::after { 924 | position: absolute; 925 | right: 0; 926 | margin: 10px 0; 927 | padding: 0 10px; 928 | font-size: 0.9rem; 929 | } 930 | 931 | /*=== Aside main page (feeds) */ 932 | .aside_feed .tree-folder-items .dropdown-menu::after { 933 | left: 2px; 934 | } 935 | 936 | 937 | /*=== Configuration pages */ 938 | .post { 939 | padding: 10px 50px; 940 | font-size: 0.9em; 941 | } 942 | 943 | .post form { 944 | margin: 10px 0; 945 | } 946 | 947 | .post.content { 948 | max-width: 550px; 949 | } 950 | 951 | /*=== Prompt (centered) */ 952 | .prompt input { 953 | margin: 5px auto; 954 | width: 100%; 955 | } 956 | 957 | /*=== Navigation menu (for articles) */ 958 | /*=== READER VIEW */ 959 | /*================*/ 960 | #stream.reader .flux { 961 | background: #242933; 962 | border: none; 963 | } 964 | 965 | #stream.reader .flux .content { 966 | background-color: #2e3440; 967 | border: none; 968 | } 969 | 970 | #stream.reader .flux .author { 971 | margin: 0 0 10px; 972 | font-size: 90%; 973 | } 974 | 975 | /*=== GLOBAL VIEW */ 976 | /*================*/ 977 | .box.category .box-title .title { 978 | font-weight: normal; 979 | text-decoration: none; 980 | text-align: left; 981 | } 982 | 983 | .box.category .title:not([data-unread="0"])::after { 984 | background: none; 985 | border: 0; 986 | position: absolute; 987 | top: 5px; 988 | right: 10px; 989 | font-weight: bold; 990 | box-shadow: none; 991 | text-shadow: none; 992 | } 993 | 994 | #panel { 995 | background-color: var(--bg); 996 | } 997 | 998 | /*=== MOBILE */ 999 | /*===========*/ 1000 | 1001 | @media (max-width: 840px) { 1002 | .aside:target+.close-aside { 1003 | background: rgba(0, 0, 0, 0.2); 1004 | display: block; 1005 | font-size: 0; 1006 | position: fixed; 1007 | top: 0; 1008 | bottom: 0; 1009 | left: 0; 1010 | right: 0; 1011 | cursor: pointer; 1012 | z-index: 99; 1013 | } 1014 | 1015 | .nav_mobile { 1016 | display: block; 1017 | } 1018 | 1019 | .aside { 1020 | position: fixed; 1021 | top: 0; 1022 | bottom: 0; 1023 | left: 0; 1024 | width: 0; 1025 | overflow: hidden; 1026 | z-index: 100; 1027 | transition: width 200ms linear; 1028 | } 1029 | 1030 | .aside.aside_feed { 1031 | padding: 0; 1032 | } 1033 | 1034 | .aside:target, 1035 | .reader .aside:target { 1036 | width: 90%; 1037 | height: 100vh; 1038 | } 1039 | 1040 | .aside_feed .configure-feeds { 1041 | margin-top: 10px; 1042 | } 1043 | 1044 | .flux_header .item.website { 1045 | width: 40px; 1046 | } 1047 | 1048 | .flux:not(.current):hover .item.title { 1049 | position: relative; 1050 | width: auto; 1051 | white-space: nowrap; 1052 | } 1053 | 1054 | .flux .website .favicon { 1055 | position: relative; 1056 | } 1057 | 1058 | .notification { 1059 | top: 0; 1060 | left: 0; 1061 | right: 0; 1062 | } 1063 | 1064 | #nav_entries { 1065 | width: 100%; 1066 | } 1067 | 1068 | #panel { 1069 | top: 25px; 1070 | bottom: 30px; 1071 | left: 0; 1072 | right: 0; 1073 | } 1074 | 1075 | #panel .close { 1076 | top: 0; 1077 | right: 0; 1078 | left: auto; 1079 | bottom: auto; 1080 | display: inline-block; 1081 | width: 30px; 1082 | height: 30px; 1083 | } 1084 | 1085 | #slider.active { 1086 | left: 0; 1087 | top: 50px; 1088 | background-color: var(--bg); 1089 | } 1090 | 1091 | #close-slider img { 1092 | display: initial; 1093 | } 1094 | 1095 | #close-slider.active { 1096 | background: var(--bg); 1097 | display: block; 1098 | width: 100%; 1099 | height: 50px; 1100 | z-index: 10; 1101 | text-align: center; 1102 | line-height: 50px; 1103 | border-bottom: 1px solid #ddd; 1104 | } 1105 | 1106 | .stat.half { 1107 | grid-column: 1 / span 2; 1108 | } 1109 | 1110 | .nav_menu .btn { 1111 | margin: 5px 10px; 1112 | } 1113 | 1114 | .nav_menu .stick { 1115 | margin: 0 10px; 1116 | } 1117 | 1118 | .nav_menu .stick .btn { 1119 | margin: 5px 0; 1120 | } 1121 | 1122 | .nav_menu .search { 1123 | display: inline-block; 1124 | max-width: 97%; 1125 | } 1126 | 1127 | .nav_menu .search input { 1128 | max-width: 97%; 1129 | width: 90px; 1130 | } 1131 | 1132 | .nav_menu .search input:focus { 1133 | width: 400px; 1134 | } 1135 | 1136 | .post { 1137 | padding: 1rem; 1138 | } 1139 | 1140 | .day .name { 1141 | font-size: 1.1rem; 1142 | } 1143 | 1144 | .pagination { 1145 | margin: 0 0 3.5em; 1146 | } 1147 | 1148 | .notification a.close { 1149 | display: block; 1150 | left: 0; 1151 | } 1152 | 1153 | .notification a.close:hover { 1154 | opacity: 0.5; 1155 | } 1156 | 1157 | .notification a.close .icon { 1158 | display: none; 1159 | } 1160 | } 1161 | --------------------------------------------------------------------------------