├── loader.gif ├── thumbs └── original.png ├── metadata.json ├── README.md ├── LICENSE ├── icons ├── link.svg ├── share.svg ├── help.svg ├── read.svg ├── starred.svg └── unread.svg ├── nord.rtl.css └── nord.css /loader.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/joelchrono12/freshrss-nord-theme/HEAD/loader.gif -------------------------------------------------------------------------------- /thumbs/original.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/joelchrono12/freshrss-nord-theme/HEAD/thumbs/original.png -------------------------------------------------------------------------------- /metadata.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "Nord theme", 3 | "author": "joelchrono12", 4 | "description": "A simple theme based on Nord's color scheme", 5 | "version": 0.1, 6 | "files": ["_template.css","nord.css"] 7 | } 8 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # FreshRSS-Nord-Theme 2 | 3 | A simple theme based on Nord's color scheme for [FreshRSS](https://freshrss.org) 4 | 5 | You can see how it looks here. It features a compact layout and some custom icons. 6 | ![Example](./thumbs/original.png) 7 | 8 | # WIP 9 | - Complete icon set, some are still using default colors 10 | - Better mobile UI, some stuff looks janky 11 | - Other fixes for small problems 12 | 13 | # Installation 14 | To install the theme, simply clone the repository into your FreshRSS theme directory. 15 | Exactly where that is depends on where you installed FreshRSS, but it's usually in: 16 | ```shell 17 | FRESHRSS_INSTALL_DIR="/var/www/freshrss" 18 | ``` 19 | 20 | ```shell 21 | cd "$FRESHRSS_INSTALL_DIR/p/themes" 22 | git clone https://github.com/joelchrono12/freshrss-nord-theme.git 23 | ``` 24 | Clear your browser's cache and you should find the theme in FreshRSS' display options. 25 | 26 | # Contributing 27 | Overall, this is just a base anyone can work on, if you find something feel free to contribute and make a pull request with your changes! 28 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2022 Joel Garcia 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 | -------------------------------------------------------------------------------- /icons/link.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /icons/share.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /icons/help.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /icons/read.svg: -------------------------------------------------------------------------------- 1 | 2 | 13 | 15 | 26 | 33 | 34 | -------------------------------------------------------------------------------- /icons/starred.svg: -------------------------------------------------------------------------------- 1 | 2 | 13 | 15 | 26 | 29 | 36 | 37 | 38 | -------------------------------------------------------------------------------- /icons/unread.svg: -------------------------------------------------------------------------------- 1 | 2 | 13 | 15 | 26 | 31 | 35 | 39 | 40 | 41 | -------------------------------------------------------------------------------- /nord.rtl.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: #242933; 9 | --accent-bg: rgb(46, 52, 64); 10 | --text: #eceff4; 11 | --text-light: #d8dee9; 12 | --border: #88c0d0; 13 | --accent: #81a1c1; 14 | --accent-light: #bf616a; 15 | --code: #ebcb8b; 16 | --alert: #a3be8c; 17 | --alert-bg: #8fbcbb; 18 | --code-bg: #2e3440; 19 | } 20 | 21 | 22 | /*=== GENERAL */ 23 | /*============*/ 24 | 25 | @font-face { 26 | /* src: local('Open Sans'), local('OpenSans'), 27 | url('../fonts/OpenSans.woff2') format('woff2'), 28 | url('../fonts/OpenSans.woff') format('woff');*/ 29 | } 30 | 31 | html, body { 32 | background: var(--bg); 33 | color: var(--text); 34 | font-family: var(--sans-font); 35 | } 36 | 37 | /*=== Links */ 38 | a { 39 | color: var(--accent); 40 | } 41 | 42 | a:hover { 43 | color: var(--accent); 44 | } 45 | 46 | 47 | kbd { 48 | color: var(--code); 49 | background-color: var(--accent-bg); 50 | } 51 | 52 | legend { 53 | margin: 20px 0 5px; 54 | padding: 5px 0; 55 | font-size: 1.4em; 56 | } 57 | 58 | label { 59 | min-height: 25px; 60 | padding: 5px 0; 61 | cursor: pointer; 62 | } 63 | 64 | input, select, textarea { 65 | margin: 5px; 66 | padding: 5px; 67 | color: var(--text); 68 | border: 1px solid var(--border); 69 | border-radius: 6px; 70 | border-color: var(--border); 71 | background-color: var(--bg); 72 | min-height: 25px; 73 | line-height: 25px; 74 | vertical-align: middle; 75 | } 76 | 77 | button { 78 | font-family: var(--sans-font); 79 | } 80 | 81 | button.as-link, 82 | button.as-link:hover, 83 | button.as-link:active { 84 | background: transparent; 85 | /* background-color: var(--bg);A*/ 86 | } 87 | 88 | button.as-link[disabled] { 89 | color: #ddd !important; 90 | } 91 | 92 | /*=== Tables */ 93 | tr, th, td { 94 | padding: 0.5em; 95 | } 96 | 97 | form td, 98 | form th { 99 | font-weight: normal; 100 | } 101 | 102 | .table-wrapper { 103 | overflow-x: auto; 104 | } 105 | 106 | table { 107 | max-width: 100%; 108 | 109 | border-collapse: collapse; 110 | 111 | } 112 | 113 | table tr { 114 | border-bottom: 1px solid 115 | } 116 | 117 | table th, table td { 118 | padding: 10px 20px; 119 | } 120 | 121 | table td span { 122 | padding: 5px; 123 | color: dimgrey; 124 | /*display: none;*/ 125 | font-size: 10px; 126 | font-weight: bold; 127 | /*position: absolute;*/ 128 | } 129 | 130 | .form-group.form-actions { 131 | padding: 5px 0; 132 | } 133 | 134 | .form-group .group-name { 135 | padding: 10px 0; 136 | text-align: left; 137 | } 138 | 139 | .form-group .group-controls { 140 | padding: 5px 0; 141 | min-height: 25px; 142 | } 143 | 144 | /*=== Buttons */ 145 | .stick { 146 | font-size: 0; 147 | vertical-align: middle; 148 | } 149 | 150 | .btn, 151 | a.btn { 152 | margin: .3rem .3rem; 153 | background: var(--accent-bg); 154 | color: var(--accent); 155 | border: none; 156 | border-radius: 5px; 157 | 158 | text-decoration: none; 159 | transition: .4s; 160 | } 161 | 162 | a.btn.active { 163 | background-color: var(--accent-bg); 164 | border: 1px solid var(--border); 165 | } 166 | 167 | .btn { 168 | padding: 5px 10px; 169 | min-height: 37px; 170 | min-width: 15px; 171 | font-size: 0.9rem; 172 | vertical-align: middle; 173 | } 174 | 175 | a.btn { 176 | min-height: 25px; 177 | line-height: 25px; 178 | } 179 | 180 | .btn-important, .read_all, #actualize { 181 | font-weight: bold !important; 182 | background-color: var(--accent) !important; 183 | color: var(--bg) !important; 184 | } 185 | 186 | #btn-add.btn-important .icon, #actualize .icon { 187 | filter: brightness(0); 188 | } 189 | 190 | .btn:hover, svg:hover { 191 | opacity: .8; 192 | cursor: pointer; 193 | } 194 | /*=== Navigation */ 195 | .nav-list .nav-header, 196 | .nav-list .item { 197 | height: 2.5em; 198 | font-size: 0.9rem; 199 | line-height: 2.5em; 200 | } 201 | 202 | .nav-head { 203 | margin: 0; 204 | text-align: left; 205 | } 206 | 207 | .nav-head .item { 208 | padding: 5px 10px; 209 | font-size: 0.9rem; 210 | line-height: 1.5rem; 211 | } 212 | 213 | /*=== Horizontal-list */ 214 | .horizontal-list { 215 | margin: 0; 216 | padding: 0; 217 | } 218 | 219 | .dropdown-menu { 220 | margin: 5px 0 0; 221 | padding: 5px 0; 222 | background: var(--accent-bg); 223 | font-size: 0.8rem; 224 | border: 1px solid var(--border); 225 | border-radius: 6px; 226 | text-align: right; 227 | } 228 | 229 | .dropdown-header { 230 | padding: 0 5px 5px; 231 | font-weight: bold; 232 | text-align: right; 233 | } 234 | 235 | .dropdown-menu > .item > a, 236 | .dropdown-menu > .item > span, 237 | .dropdown-menu > .item > .as-link { 238 | padding: 0 22px; 239 | color: var(--text); 240 | line-height: 2.5em; 241 | min-width: 200px; 242 | } 243 | 244 | .dropdown-menu > .item[aria-checked="true"] > a::before { 245 | font-weight: bold; 246 | margin: 0 -14px 0 0; 247 | } 248 | 249 | .dropdown-menu .input select, 250 | .dropdown-menu .input input { 251 | margin: 0 auto 5px; 252 | padding: 2px 5px; 253 | } 254 | 255 | .dropdown-menu > .item:hover > a { 256 | text-decoration: none; 257 | } 258 | 259 | .dropdown-close { 260 | display: inline; 261 | } 262 | 263 | .dropdown-close a { 264 | background: none; 265 | display: block; 266 | font-size: 0; 267 | position: fixed; 268 | top: 0; bottom: 0; 269 | right: 0; left: 0; 270 | z-index: -11; 271 | cursor: default; 272 | } 273 | 274 | .dropdown-close a:hover { 275 | background: none; 276 | } 277 | 278 | .dropdown div.dropdown-close { 279 | display: none; 280 | } 281 | 282 | .dropdown-target:target ~ div.dropdown-close { 283 | display: block; 284 | z-index: 999; 285 | position: relative; 286 | } 287 | 288 | .dropdown-target:target ~ .dropdown-toggle::after { 289 | background-color: var(--accent-bg); 290 | border-top: 1px solid var(--border); 291 | border-right: 1px solid var(--border); 292 | } 293 | 294 | .dropdown-menu-scrollable .dropdown-close { 295 | display: none; 296 | } 297 | 298 | .separator { 299 | margin: 5px 0; 300 | border-bottom: 1px solid var(--border); 301 | } 302 | 303 | /*=== Alerts */ 304 | .alert { 305 | margin: 15px auto; 306 | padding: 10px 15px; 307 | font-size: 0.9em; 308 | border-radius: 6px; 309 | } 310 | 311 | .alert-success { 312 | color: var(--bg); 313 | background-color: var(--alert-bg) 314 | } 315 | 316 | .alert-head { 317 | font-size: 1.15em; 318 | } 319 | 320 | .alert > a { 321 | text-decoration: underline; 322 | } 323 | 324 | .alert-warn { 325 | border-radius: 6px; 326 | background-color: var(--code-bg); 327 | } 328 | 329 | .alert-error { 330 | background-color: var(--accent-light); 331 | color: var(--bg); 332 | } 333 | 334 | /*=== Icons */ 335 | .icon { 336 | filter: invert(74%) sepia(29%) saturate(411%) hue-rotate(171deg) brightness(130%) contrast(85%); 337 | } 338 | 339 | img.favicon { 340 | background: var(--text-light); 341 | border-radius: 4px; 342 | } 343 | 344 | /*=== Pagination */ 345 | .pagination { 346 | width: 100%; 347 | font-size: 0.8em; 348 | text-align: center; 349 | } 350 | 351 | .pagination .pager-first, 352 | .pagination .pager-previous, 353 | .pagination .pager-next, 354 | .pagination .pager-last { 355 | width: 100px; 356 | } 357 | 358 | /*=== Boxes */ 359 | .box { 360 | background-color: var(--accent-bg); 361 | border: 1px solid var(--border); 362 | border-radius: 6px; 363 | } 364 | 365 | .box .box-title { 366 | margin: 0; 367 | padding: 5px 10px; 368 | } 369 | 370 | .box .box-content { 371 | max-height: 260px; 372 | } 373 | 374 | .box .box-content .item { 375 | padding: 0 10px; 376 | font-size: 0.9rem; 377 | line-height: 2.5em; 378 | } 379 | 380 | /*=== Draggable */ 381 | .drag-hover { 382 | margin: 0 0 5px; 383 | border-bottom: 2px solid var(--border); 384 | } 385 | 386 | [draggable=true] { 387 | cursor: grab; 388 | } 389 | 390 | /*=== Tree */ 391 | .tree { 392 | margin: 10px 0; 393 | } 394 | 395 | .tree-folder-title .title { 396 | background: inherit; 397 | color: var(--text); 398 | } 399 | 400 | .tree-folder.category { 401 | border-bottom: 1px solid var(--bg); 402 | } 403 | 404 | .tree-folder-items > .item { 405 | padding: 0 10px; 406 | color: var(--text); 407 | font-size: 0.8rem; 408 | line-height: 2.5rem; 409 | } 410 | 411 | .tree-folder-items > .item > a { 412 | text-decoration: none; 413 | } 414 | 415 | .tree-folder-title { 416 | position: relative; 417 | padding: 0 10px; 418 | font-size: 1rem; 419 | line-height: 2.1rem; 420 | } 421 | 422 | .tree-folder-title .title:hover { 423 | text-decoration: none; 424 | } 425 | 426 | .tree-folder.active .tree-folder-title { 427 | font-weight: bold; 428 | } 429 | 430 | 431 | /*=== STRUCTURE */ 432 | /*===============*/ 433 | /*=== Header */ 434 | .header { 435 | height: 85px; 436 | } 437 | 438 | .header > .item { 439 | padding: 10px; 440 | vertical-align: middle; 441 | text-align: center; 442 | } 443 | 444 | 445 | .header > .item.title { 446 | width: 230px; 447 | } 448 | 449 | .header > .item.title h1 { 450 | margin: 0.5em 0; 451 | } 452 | 453 | .header > .item.title h1 a { 454 | text-decoration: none; 455 | } 456 | 457 | .header > .item.search input { 458 | width: 230px; 459 | } 460 | 461 | .header .item.search input:focus { 462 | width: 350px; 463 | } 464 | 465 | .header > .item.title .logo { 466 | filter: grayscale(100%) brightness(2.5); 467 | } 468 | 469 | /*=== Body */ 470 | #global { 471 | height: calc(100% - 85px); 472 | } 473 | 474 | .aside { 475 | background-color: var(--accent-bg); 476 | border-radius: 12px; 477 | } 478 | 479 | /*=== Aside main page */ 480 | .aside.aside_feed { 481 | padding: 10px 0; 482 | text-align: center; 483 | } 484 | 485 | .aside.aside_feed .tree { 486 | margin: 10px 0 50px; 487 | } 488 | 489 | .aside_feed .category .title:not([data-unread="0"]) { 490 | width: calc(100% - 35px - 20px); 491 | } 492 | 493 | .aside_feed .tree-folder-items.active { 494 | background-color: var(--bg); 495 | } 496 | 497 | .aside.aside_feed .nav-form input, 498 | .aside.aside_feed .nav-form select { 499 | width: 140px; 500 | } 501 | 502 | .aside.aside_feed .nav-form .dropdown .dropdown-menu { 503 | left: -20px; 504 | } 505 | 506 | .aside.aside_feed .nav-form .dropdown .dropdown-menu::after { 507 | left: 33px; 508 | } 509 | 510 | .aside_feed .tree-folder-items .item .dropdown-target:target ~ .dropdown-toggle > .icon, 511 | .aside_feed .tree-folder-items .item:hover .dropdown-toggle > .icon, 512 | .aside_feed .tree-folder-items .item.active .dropdown-toggle > .icon { 513 | border-radius: 3px; 514 | } 515 | 516 | .item.feed.error > .item-title { 517 | color: var(--accent-light); 518 | } 519 | 520 | .item.feed.active { 521 | background-color: var(--accent-bg); 522 | font-weight: bold; 523 | 524 | } 525 | 526 | .category .title:not([data-unread="0"])::after { 527 | content: attr(data-unread); 528 | } 529 | 530 | li.item.active { 531 | background-color: var(--bg); 532 | font-weight: bold; 533 | } 534 | 535 | .item.feed:hover { 536 | background-color: var(--accent-bg); 537 | transition: .4s; 538 | } 539 | 540 | /*=== New article notification */ 541 | #new-article { 542 | font-size: 0.9em; 543 | text-align: center; 544 | } 545 | 546 | #new-article > a { 547 | line-height: 3em; 548 | font-weight: bold; 549 | } 550 | 551 | #new-article > a:hover { 552 | text-decoration: none; 553 | } 554 | 555 | /*=== Day indication */ 556 | .day { 557 | padding: 0 10px; 558 | font-weight: bold; 559 | line-height: 3em; 560 | } 561 | 562 | .day .name { 563 | padding: 0 0 0 10px; 564 | font-size: 1.8em; 565 | opacity: 0.3; 566 | font-style: italic; 567 | text-align: left; 568 | } 569 | 570 | .name { 571 | display: none; 572 | } 573 | 574 | 575 | /*=== Feed article header and footer */ 576 | .flux_header { 577 | position: relative; 578 | font-size: 0.8rem; 579 | cursor: pointer; 580 | } 581 | 582 | .flux_header .title { 583 | font-size: 0.8rem; 584 | } 585 | 586 | .flux .website .favicon { 587 | padding: 3px; 588 | } 589 | 590 | .flux .item.date { 591 | width: 155px; 592 | text-align: left; 593 | overflow: hidden; 594 | font-size: 0.7rem; 595 | } 596 | 597 | .flux .bottom { 598 | font-size: 0.8rem; 599 | text-align: center; 600 | } 601 | 602 | 603 | .flux_header:hover { 604 | background-color: var(--accent-bg); 605 | transition: .4s; 606 | 607 | } 608 | 609 | .flux .item { 610 | line-height: 30px; 611 | } 612 | 613 | .flux.current { 614 | background: var(--accent-bg); 615 | } 616 | 617 | .flux:not(.current):hover .item.title { 618 | background: var(--accent-bg); 619 | transition: .4s; 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 5px 0 0; 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 | 695 | .notification a.close { 696 | padding: 0 15px; 697 | line-height: 3em; 698 | } 699 | 700 | .notification#actualizeProgress { 701 | line-height: 2em; 702 | } 703 | 704 | .notification.closed { 705 | opacity: 0; 706 | visibility: hidden; 707 | } 708 | 709 | /*=== Popup */ 710 | #popup { 711 | background-color: rgb(0,0,0,.4); 712 | } 713 | 714 | #popup-content { 715 | background-color: var(--accent-bg); 716 | box-shadow: 0 0 1px #d8dee9, -1px 2px 3px var(--bg); 717 | } 718 | 719 | #popup-close:hover, 720 | #popup-close:focus { 721 | color: #d8dee9; 722 | } 723 | 724 | #popup-txt { 725 | display: none; 726 | height: 100%; 727 | } 728 | 729 | /*=== Navigation menu (for articles) */ 730 | #nav_entries { 731 | margin: 0; 732 | background: var(--accent-bg); 733 | text-align: center; 734 | line-height: 3em; 735 | } 736 | 737 | #bigMarkAsRead { 738 | text-decoration: none; 739 | } 740 | 741 | .bigTick { 742 | font-size: 4em; 743 | } 744 | 745 | /*=== Statistiques */ 746 | .stat > table td, 747 | .stat > table th { 748 | text-align: center; 749 | } 750 | 751 | .stat > .horizontal-list { 752 | margin: 0 0 5px; 753 | } 754 | 755 | .stat > .horizontal-list .item { 756 | overflow: hidden; 757 | white-space: nowrap; 758 | text-overflow: ellipsis; 759 | } 760 | 761 | .stat > .horizontal-list .item:first-child { 762 | width: 250px; 763 | } 764 | 765 | 766 | .stat { 767 | margin: 10px 0 20px; 768 | } 769 | 770 | /*=== Slider */ 771 | #slider { 772 | background: var(--accent-bg); 773 | border-right: 1px solid var(--border); 774 | } 775 | 776 | /*=== DIVERS */ 777 | /*===========*/ 778 | .category .title.error::before { 779 | color: var(--accent-light); 780 | content: "⚠ "; 781 | } 782 | 783 | 784 | .nav_menu { 785 | padding: 5px 0; 786 | text-align: center; 787 | } 788 | 789 | /*=== MOBILE */ 790 | /*===========*/ 791 | 792 | @media (max-width: 840px) { 793 | .aside:target + .close-aside { 794 | background: rgba(0, 0, 0, 0.2); 795 | display: block; 796 | font-size: 0; 797 | position: fixed; 798 | top: 0; 799 | bottom: 0; 800 | right: 0; 801 | left: 0; 802 | cursor: pointer; 803 | z-index: 99; 804 | } 805 | 806 | .nav_mobile { 807 | display: block; 808 | } 809 | 810 | .aside { 811 | position: fixed; 812 | top: 0; bottom: 0; 813 | right: 0; 814 | width: 0; 815 | overflow: hidden; 816 | z-index: 100; 817 | } 818 | 819 | .aside:target, 820 | .reader .aside:target { 821 | width: 90%; 822 | height: 100vh; 823 | } 824 | 825 | .aside_feed .configure-feeds { 826 | margin-top: 10px; 827 | } 828 | 829 | .flux_header .item.website { 830 | width: 40px; 831 | } 832 | 833 | .flux:not(.current):hover .item.title { 834 | position: relative; 835 | width: auto; 836 | white-space: nowrap; 837 | } 838 | 839 | .notification { 840 | top: 0; 841 | right: 0; 842 | left: 0; 843 | } 844 | 845 | #nav_entries { 846 | width: 100%; 847 | } 848 | 849 | #panel { 850 | top: 25px; bottom: 30px; 851 | right: 0; left: 0; 852 | } 853 | 854 | #panel .close { 855 | top: 0; left: 0; 856 | right: auto; bottom: auto; 857 | display: inline-block; 858 | width: 30px; 859 | height: 30px; 860 | } 861 | 862 | #slider.active { 863 | right: 0; 864 | top: 50px; 865 | background-color: var(--bg); 866 | } 867 | 868 | #close-slider img { 869 | display: initial; 870 | } 871 | 872 | #close-slider.active { 873 | background: var(--bg); 874 | display: block; 875 | width: 100%; 876 | height: 50px; 877 | z-index: 10; 878 | text-align: center; 879 | line-height: 50px; 880 | border-bottom: 1px solid #ddd; 881 | } 882 | 883 | .stat.half { 884 | grid-column: 1 / span 2; 885 | } 886 | } 887 | 888 | /*=== PRINTER */ 889 | /*============*/ 890 | 891 | @media print { 892 | .header, .aside, 893 | .nav_menu, .day, 894 | .flux_header, 895 | .flux_content .bottom, 896 | .pagination, 897 | #nav_entries { 898 | display: none; 899 | } 900 | 901 | html, body { 902 | background: #fff; 903 | color: #000; 904 | font-family: Serif; 905 | } 906 | 907 | #global, 908 | .flux_content { 909 | display: block !important; 910 | } 911 | 912 | .flux_content .content { 913 | width: 100% !important; 914 | } 915 | 916 | .flux_content .content a { 917 | color: #000; 918 | } 919 | 920 | .flux_content .content a::after { 921 | content: " [" attr(href) "] "; 922 | font-style: italic; 923 | } 924 | } 925 | 926 | /*=== PREVIEW */ 927 | /*===========*/ 928 | .preview_controls { 929 | margin-right: auto; 930 | margin-left: auto; 931 | padding: 1rem; 932 | max-width: 1000px; 933 | text-align: center; 934 | background-color: #eee; 935 | border: 1px solid #e0e0e0; 936 | border-radius: .25rem; 937 | } 938 | 939 | .preview_controls label { 940 | display: inline; 941 | } 942 | 943 | .preview_controls label input[type="radio"] { 944 | margin-top: -4px; 945 | } 946 | 947 | .preview_controls label + label { 948 | margin-right: 1rem; 949 | } 950 | 951 | .preview_background { 952 | background-color: transparent; 953 | } 954 | 955 | .drag-drop-marker { 956 | margin: -1px; 957 | } 958 | 959 | .feed .item-title:not([data-unread="0"])::before { 960 | content: "(" attr(data-unread) ") "; 961 | display: none 962 | } 963 | 964 | .feed .item-title:not([data-unread="0"])::after { 965 | content: " (" attr(data-unread) ")"; 966 | } 967 | 968 | 969 | /*BEGINS BASE.CSS*/ 970 | 971 | /*=== GENERAL */ 972 | /*============*/ 973 | 974 | /*=== Links */ 975 | a, button.as-link { 976 | outline: none; 977 | } 978 | 979 | /*=== Forms */ 980 | textarea { 981 | width: 360px; 982 | height: 100px; 983 | } 984 | 985 | 986 | option { 987 | padding: 0 .5em; 988 | } 989 | 990 | 991 | input.extend { 992 | transition: width 200ms linear; 993 | } 994 | 995 | 996 | /*=== COMPONENTS */ 997 | /*===============*/ 998 | /*=== Forms */ 999 | .form-group.form-actions .btn { 1000 | margin: 0 10px; 1001 | } 1002 | 1003 | /*=== Navigation */ 1004 | .nav-list .disable { 1005 | text-align: center; 1006 | } 1007 | 1008 | .nav-list .item > a { 1009 | padding: 0 10px; 1010 | } 1011 | 1012 | .nav-list a:hover { 1013 | text-decoration: none; 1014 | } 1015 | 1016 | .nav-list .nav-header { 1017 | padding: 0 10px; 1018 | font-weight: bold; 1019 | } 1020 | 1021 | .nav-list .nav-form { 1022 | padding: 3px; 1023 | text-align: center; 1024 | } 1025 | 1026 | /*=== Dropdown */ 1027 | .dropdown-menu::after { 1028 | content: ""; 1029 | position: absolute; 1030 | top: -6px; 1031 | left: 13px; 1032 | width: 10px; 1033 | height: 10px; 1034 | z-index: -10; 1035 | transform: rotate(-45deg); 1036 | border-color: var(--border); 1037 | } 1038 | 1039 | 1040 | 1041 | .dropdown-menu > .item > a:hover, 1042 | .dropdown-menu > .item > span:hover, 1043 | .dropdown-menu > .item > .as-link:hover { 1044 | color: var(--accent); 1045 | transition: .4s; 1046 | } 1047 | 1048 | /*=== Pagination */ 1049 | .content .pagination { 1050 | margin: 0; 1051 | padding: 0; 1052 | } 1053 | 1054 | .pagination .item.pager-current { 1055 | font-weight: bold; 1056 | font-size: 1.5em; 1057 | } 1058 | 1059 | .pagination .item a { 1060 | display: block; 1061 | font-style: italic; 1062 | line-height: 3em; 1063 | text-decoration: none; 1064 | } 1065 | 1066 | .pagination .loading, 1067 | .pagination a:hover.loading { 1068 | font-size: 0; 1069 | } 1070 | 1071 | 1072 | 1073 | /*=== STRUCTURE */ 1074 | /*===============*/ 1075 | /*=== Header */ 1076 | 1077 | /*=== Body */ 1078 | /*=== Aside main page (categories) */ 1079 | .aside_feed .tree-folder-title > .title:not([data-unread="0"])::after { 1080 | position: absolute; 1081 | left: 0; 1082 | margin: 10px 0; 1083 | padding: 0 10px; 1084 | font-size: 0.9rem; 1085 | line-height: 1.5rem; 1086 | } 1087 | 1088 | /*=== Aside main page (feeds) */ 1089 | .aside_feed .tree-folder-items .dropdown-menu::after { 1090 | right: 2px; 1091 | } 1092 | 1093 | 1094 | /*=== Configuration pages */ 1095 | .post { 1096 | padding: 10px 50px; 1097 | font-size: 0.9em; 1098 | } 1099 | 1100 | .post form { 1101 | margin: 10px 0; 1102 | } 1103 | 1104 | .post.content { 1105 | max-width: 550px; 1106 | } 1107 | 1108 | /*=== Prompt (centered) */ 1109 | .prompt { 1110 | text-align: center; 1111 | } 1112 | 1113 | .prompt label { 1114 | text-align: right; 1115 | } 1116 | 1117 | .prompt form { 1118 | margin: 10px auto 20px auto; 1119 | width: 180px; 1120 | } 1121 | 1122 | .prompt input { 1123 | margin: 5px auto; 1124 | width: 100%; 1125 | } 1126 | 1127 | .prompt p { 1128 | margin: 20px 0; 1129 | } 1130 | 1131 | /*=== Navigation menu (for articles) */ 1132 | /*=== READER VIEW */ 1133 | /*================*/ 1134 | #stream.reader .flux { 1135 | padding: 0 0 50px; 1136 | } 1137 | 1138 | #stream.reader .flux .author { 1139 | margin: 0 0 10px; 1140 | font-size: 90%; 1141 | } 1142 | 1143 | /*=== GLOBAL VIEW */ 1144 | /*================*/ 1145 | .box.category .box-title .title { 1146 | font-weight: normal; 1147 | text-decoration: none; 1148 | text-align: right; 1149 | } 1150 | 1151 | .box.category .title:not([data-unread="0"])::after { 1152 | background: none; 1153 | border: 0; 1154 | position: absolute; 1155 | top: 5px; left: 10px; 1156 | font-weight: bold; 1157 | box-shadow: none; 1158 | text-shadow: none; 1159 | } 1160 | 1161 | .box.category .item.feed { 1162 | padding: 2px 10px; 1163 | font-size: 0.8rem; 1164 | } 1165 | 1166 | 1167 | 1168 | /*=== LOGS */ 1169 | /*=========*/ 1170 | .loglist { 1171 | overflow: hidden; 1172 | } 1173 | 1174 | .log { 1175 | padding: 5px 10px; 1176 | font-size: 0.8rem; 1177 | } 1178 | 1179 | .log .date { 1180 | display: block; 1181 | font-weight: bold; 1182 | } 1183 | 1184 | /*=== MOBILE */ 1185 | /*===========*/ 1186 | 1187 | @media (max-width: 840px) { 1188 | .aside { 1189 | transition: width 200ms linear; 1190 | } 1191 | 1192 | .aside .toggle_aside, 1193 | #panel .close { 1194 | display: block; 1195 | width: 100%; 1196 | height: 50px; 1197 | line-height: 50px; 1198 | text-align: center; 1199 | } 1200 | 1201 | .aside.aside_feed { 1202 | padding: 0; 1203 | } 1204 | 1205 | .nav_menu .btn { 1206 | margin: 5px 10px; 1207 | } 1208 | 1209 | .nav_menu .stick { 1210 | margin: 0 10px; 1211 | } 1212 | 1213 | .nav_menu .stick .btn { 1214 | margin: 5px 0; 1215 | } 1216 | 1217 | .nav_menu .search { 1218 | display: inline-block; 1219 | max-width: 97%; 1220 | } 1221 | 1222 | .nav_menu .search input { 1223 | max-width: 97%; 1224 | width: 90px; 1225 | } 1226 | 1227 | .nav_menu .search input:focus { 1228 | width: 400px; 1229 | } 1230 | 1231 | .day .name { 1232 | font-size: 1.1rem; 1233 | } 1234 | 1235 | .pagination { 1236 | margin: 0 0 3.5em; 1237 | } 1238 | 1239 | .notification a.close { 1240 | display: block; 1241 | right: 0; 1242 | } 1243 | 1244 | .notification a.close:hover { 1245 | opacity: 0.5; 1246 | } 1247 | 1248 | .notification a.close .icon { 1249 | display: none; 1250 | } 1251 | } 1252 | -------------------------------------------------------------------------------- /nord.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: #242933; 9 | --accent-bg: rgb(46, 52, 64); 10 | --text: #eceff4; 11 | --text-light: #d8dee9; 12 | --border: #88c0d0; 13 | --accent: #81a1c1; 14 | --accent-light: #bf616a; 15 | --code: #ebcb8b; 16 | --alert: #a3be8c; 17 | --alert-bg: #8fbcbb; 18 | --code-bg: #2e3440; 19 | } 20 | 21 | 22 | /*=== GENERAL */ 23 | /*============*/ 24 | 25 | @font-face { 26 | /* src: local('Open Sans'), local('OpenSans'), 27 | url('../fonts/OpenSans.woff2') format('woff2'), 28 | url('../fonts/OpenSans.woff') format('woff');*/ 29 | } 30 | 31 | html, body { 32 | background: var(--bg); 33 | color: var(--text); 34 | font-family: var(--sans-font); 35 | height: 100%; 36 | } 37 | 38 | /*=== Links */ 39 | a { 40 | color: var(--accent); 41 | } 42 | 43 | a:hover { 44 | color: var(--accent); 45 | } 46 | 47 | 48 | kbd { 49 | color: var(--code); 50 | background-color: var(--accent-bg); 51 | } 52 | 53 | legend { 54 | margin: 20px 0 5px; 55 | padding: 5px 0; 56 | font-size: 1.4em; 57 | } 58 | 59 | label { 60 | min-height: 25px; 61 | padding: 5px 0; 62 | cursor: pointer; 63 | } 64 | 65 | input, select, textarea { 66 | margin: 5px; 67 | padding: 5px; 68 | color: var(--text); 69 | border: 1px solid var(--border); 70 | border-radius: 6px; 71 | border-color: var(--border); 72 | background-color: var(--bg); 73 | min-height: 25px; 74 | line-height: 25px; 75 | vertical-align: middle; 76 | } 77 | 78 | button { 79 | font-family: var(--sans-font); 80 | } 81 | 82 | button.as-link, 83 | button.as-link:hover, 84 | button.as-link:active { 85 | background: transparent; 86 | /* background-color: var(--bg);A*/ 87 | } 88 | 89 | button.as-link[disabled] { 90 | color: #ddd !important; 91 | } 92 | 93 | /*=== Tables */ 94 | tr, th, td { 95 | padding: 0.5em; 96 | } 97 | 98 | form td, 99 | form th { 100 | font-weight: normal; 101 | } 102 | 103 | .table-wrapper { 104 | overflow-x: auto; 105 | } 106 | 107 | table { 108 | max-width: 100%; 109 | 110 | border-collapse: collapse; 111 | 112 | } 113 | 114 | table tr { 115 | border-bottom: 1px solid 116 | } 117 | 118 | table th, table td { 119 | padding: 10px 20px; 120 | } 121 | 122 | table td span { 123 | padding: 5px; 124 | color: dimgrey; 125 | /*display: none;*/ 126 | font-size: 10px; 127 | font-weight: bold; 128 | /*position: absolute;*/ 129 | } 130 | 131 | .form-group.form-actions { 132 | padding: 5px 0; 133 | } 134 | 135 | .form-group .group-name { 136 | padding: 10px 0; 137 | text-align: right; 138 | } 139 | 140 | .form-group .group-controls { 141 | padding: 5px 0; 142 | min-height: 25px; 143 | } 144 | 145 | /*=== Buttons */ 146 | .stick { 147 | font-size: 0; 148 | vertical-align: middle; 149 | } 150 | 151 | .btn, 152 | a.btn { 153 | margin: .3rem .3rem; 154 | background: var(--accent-bg); 155 | color: var(--accent); 156 | border: none; 157 | border-radius: 5px; 158 | 159 | text-decoration: none; 160 | transition: .4s; 161 | } 162 | 163 | a.btn.active { 164 | background-color: var(--accent-bg); 165 | border: 1px solid var(--border); 166 | } 167 | 168 | .btn { 169 | padding: 5px 10px; 170 | min-height: 37px; 171 | min-width: 15px; 172 | font-size: 0.9rem; 173 | vertical-align: middle; 174 | } 175 | 176 | a.btn { 177 | min-height: 25px; 178 | line-height: 25px; 179 | } 180 | 181 | .btn-important, .read_all, #actualize { 182 | font-weight: bold !important; 183 | background-color: var(--accent) !important; 184 | color: var(--bg) !important; 185 | } 186 | 187 | #btn-add.btn-important .icon, #actualize .icon { 188 | filter: brightness(0); 189 | } 190 | 191 | .btn:hover, svg:hover { 192 | opacity: .8; 193 | cursor: pointer; 194 | } 195 | /*=== Navigation */ 196 | .nav-list .nav-header, 197 | .nav-list .item { 198 | height: 2.5em; 199 | font-size: 0.9rem; 200 | line-height: 2.5em; 201 | } 202 | 203 | .nav-head { 204 | margin: 0; 205 | text-align: right; 206 | } 207 | 208 | .nav-head .item { 209 | padding: 5px 10px; 210 | font-size: 0.9rem; 211 | line-height: 1.5rem; 212 | } 213 | 214 | /*=== Horizontal-list */ 215 | .horizontal-list { 216 | margin: 0; 217 | padding: 0; 218 | } 219 | 220 | .dropdown-menu { 221 | margin: 5px 0 0; 222 | padding: 5px 0; 223 | background: var(--accent-bg); 224 | font-size: 0.8rem; 225 | border: 1px solid var(--border); 226 | border-radius: 6px; 227 | text-align: left; 228 | } 229 | 230 | .dropdown-header { 231 | padding: 0 5px 5px; 232 | font-weight: bold; 233 | text-align: left; 234 | } 235 | 236 | .dropdown-menu > .item > a, 237 | .dropdown-menu > .item > span, 238 | .dropdown-menu > .item > .as-link { 239 | padding: 0 22px; 240 | color: var(--text); 241 | line-height: 2.5em; 242 | min-width: 200px; 243 | } 244 | 245 | .dropdown-menu > .item[aria-checked="true"] > a::before { 246 | font-weight: bold; 247 | margin: 0 0 0 -14px; 248 | } 249 | 250 | .dropdown-menu .input select, 251 | .dropdown-menu .input input { 252 | margin: 0 auto 5px; 253 | padding: 2px 5px; 254 | } 255 | 256 | .dropdown-menu > .item:hover > a { 257 | text-decoration: none; 258 | } 259 | 260 | .dropdown-close { 261 | display: inline; 262 | } 263 | 264 | .dropdown-close a { 265 | background: none; 266 | display: block; 267 | font-size: 0; 268 | position: fixed; 269 | top: 0; bottom: 0; 270 | left: 0; right: 0; 271 | z-index: -11; 272 | cursor: default; 273 | } 274 | 275 | .dropdown-close a:hover { 276 | background: none; 277 | } 278 | 279 | .dropdown div.dropdown-close { 280 | display: none; 281 | } 282 | 283 | .dropdown-target:target ~ div.dropdown-close { 284 | display: block; 285 | z-index: 999; 286 | position: relative; 287 | } 288 | 289 | .dropdown-target:target ~ .dropdown-toggle::after { 290 | background-color: var(--accent-bg); 291 | border-top: 1px solid var(--border); 292 | border-left: 1px solid var(--border); 293 | } 294 | 295 | .dropdown-menu-scrollable .dropdown-close { 296 | display: none; 297 | } 298 | 299 | .separator { 300 | margin: 5px 0; 301 | border-bottom: 1px solid var(--border); 302 | } 303 | 304 | /*=== Alerts */ 305 | .alert { 306 | margin: 15px auto; 307 | padding: 10px 15px; 308 | font-size: 0.9em; 309 | border-radius: 6px; 310 | } 311 | 312 | .alert-success { 313 | color: var(--bg); 314 | background-color: var(--alert-bg) 315 | } 316 | 317 | .alert-head { 318 | font-size: 1.15em; 319 | } 320 | 321 | .alert > a { 322 | text-decoration: underline; 323 | } 324 | 325 | .alert-warn { 326 | border-radius: 6px; 327 | background-color: var(--code-bg); 328 | } 329 | 330 | .alert-error { 331 | background-color: var(--accent-light); 332 | color: var(--bg); 333 | } 334 | 335 | /*=== Icons */ 336 | .icon { 337 | filter: invert(74%) sepia(29%) saturate(411%) hue-rotate(171deg) brightness(130%) contrast(85%); 338 | } 339 | 340 | img.favicon { 341 | background: var(--text-light); 342 | border-radius: 4px; 343 | } 344 | 345 | /*=== Pagination */ 346 | .pagination { 347 | width: 100%; 348 | font-size: 0.8em; 349 | text-align: center; 350 | } 351 | 352 | .pagination .pager-first, 353 | .pagination .pager-previous, 354 | .pagination .pager-next, 355 | .pagination .pager-last { 356 | width: 100px; 357 | } 358 | 359 | /*=== Boxes */ 360 | .box { 361 | background-color: var(--accent-bg); 362 | border: 1px solid var(--border); 363 | border-radius: 6px; 364 | } 365 | 366 | .box .box-title { 367 | margin: 0; 368 | padding: 5px 10px; 369 | } 370 | 371 | .box .box-content { 372 | max-height: 260px; 373 | } 374 | 375 | .box .box-content .item { 376 | padding: 0 10px; 377 | font-size: 0.9rem; 378 | line-height: 2.5em; 379 | } 380 | 381 | /*=== Draggable */ 382 | .drag-hover { 383 | margin: 0 0 5px; 384 | border-bottom: 2px solid var(--border); 385 | } 386 | 387 | [draggable=true] { 388 | cursor: grab; 389 | } 390 | 391 | /*=== Tree */ 392 | .tree { 393 | margin: 10px 0; 394 | } 395 | 396 | .tree-folder-title .title { 397 | background: inherit; 398 | color: var(--text); 399 | } 400 | 401 | .tree-folder.category { 402 | border-bottom: 1px solid var(--bg); 403 | } 404 | 405 | .tree-folder-items > .item { 406 | padding: 0 10px; 407 | color: var(--text); 408 | font-size: 0.8rem; 409 | line-height: 2.5rem; 410 | } 411 | 412 | .tree-folder-items > .item > a { 413 | text-decoration: none; 414 | } 415 | 416 | .tree-folder-title { 417 | position: relative; 418 | padding: 0 10px; 419 | font-size: 1rem; 420 | line-height: 2.1rem; 421 | } 422 | 423 | .tree-folder-title .title:hover { 424 | text-decoration: none; 425 | } 426 | 427 | .tree-folder.active .tree-folder-title { 428 | font-weight: bold; 429 | } 430 | 431 | 432 | /*=== STRUCTURE */ 433 | /*===============*/ 434 | /*=== Header */ 435 | .header { 436 | height: 85px; 437 | } 438 | 439 | .header > .item { 440 | padding: 10px; 441 | vertical-align: middle; 442 | text-align: center; 443 | } 444 | 445 | 446 | .header > .item.title { 447 | width: 230px; 448 | } 449 | 450 | .header > .item.title h1 { 451 | margin: 0.5em 0; 452 | } 453 | 454 | .header > .item.title h1 a { 455 | text-decoration: none; 456 | } 457 | 458 | .header > .item.search input { 459 | width: 230px; 460 | } 461 | 462 | .header .item.search input:focus { 463 | width: 350px; 464 | } 465 | 466 | .header > .item.title .logo { 467 | filter: grayscale(100%) brightness(2.5); 468 | } 469 | 470 | /*=== Body */ 471 | #global { 472 | height: calc(100% - 85px); 473 | } 474 | 475 | .aside { 476 | background-color: var(--accent-bg); 477 | border-radius: 12px; 478 | } 479 | 480 | /*=== Aside main page */ 481 | .aside.aside_feed { 482 | padding: 10px 0; 483 | text-align: center; 484 | } 485 | 486 | .aside.aside_feed .tree { 487 | margin: 10px 0 50px; 488 | } 489 | 490 | .aside_feed .category .title:not([data-unread="0"]) { 491 | width: calc(100% - 35px - 20px); 492 | } 493 | 494 | .aside_feed .tree-folder-items.active { 495 | background-color: var(--bg); 496 | } 497 | 498 | .aside.aside_feed .nav-form input, 499 | .aside.aside_feed .nav-form select { 500 | width: 140px; 501 | } 502 | 503 | .aside.aside_feed .nav-form .dropdown .dropdown-menu { 504 | right: -20px; 505 | } 506 | 507 | .aside.aside_feed .nav-form .dropdown .dropdown-menu::after { 508 | right: 33px; 509 | } 510 | 511 | .aside_feed .tree-folder-items .item .dropdown-target:target ~ .dropdown-toggle > .icon, 512 | .aside_feed .tree-folder-items .item:hover .dropdown-toggle > .icon, 513 | .aside_feed .tree-folder-items .item.active .dropdown-toggle > .icon { 514 | border-radius: 3px; 515 | } 516 | 517 | .item.feed.error > .item-title { 518 | color: var(--accent-light); 519 | } 520 | 521 | .item.feed.active { 522 | background-color: var(--accent-bg); 523 | font-weight: bold; 524 | 525 | } 526 | 527 | .category .title:not([data-unread="0"])::after { 528 | content: attr(data-unread); 529 | } 530 | 531 | li.item.active { 532 | background-color: var(--bg); 533 | font-weight: bold; 534 | } 535 | 536 | .item.feed:hover { 537 | background-color: var(--accent-bg); 538 | transition: .4s; 539 | } 540 | 541 | /*=== New article notification */ 542 | #new-article { 543 | font-size: 0.9em; 544 | text-align: center; 545 | } 546 | 547 | #new-article > a { 548 | line-height: 3em; 549 | font-weight: bold; 550 | } 551 | 552 | #new-article > a:hover { 553 | text-decoration: none; 554 | } 555 | 556 | /*=== Day indication */ 557 | .day { 558 | padding: 0 10px; 559 | font-weight: bold; 560 | line-height: 3em; 561 | } 562 | 563 | .day .name { 564 | padding: 0 10px 0 0; 565 | font-size: 1.8em; 566 | opacity: 0.3; 567 | font-style: italic; 568 | text-align: right; 569 | } 570 | 571 | .name { 572 | display: none; 573 | } 574 | 575 | 576 | /*=== Feed article header and footer */ 577 | .flux_header { 578 | position: relative; 579 | font-size: 0.8rem; 580 | cursor: pointer; 581 | } 582 | 583 | .flux_header .title { 584 | font-size: 0.8rem; 585 | } 586 | 587 | .flux .website .favicon { 588 | padding: 3px; 589 | } 590 | 591 | .flux .item.date { 592 | width: 155px; 593 | text-align: right; 594 | overflow: hidden; 595 | font-size: 0.7rem; 596 | } 597 | 598 | .flux .bottom { 599 | font-size: 0.8rem; 600 | text-align: center; 601 | } 602 | 603 | 604 | .flux_header:hover { 605 | background-color: var(--accent-bg); 606 | transition: .4s; 607 | 608 | } 609 | 610 | .flux .item { 611 | line-height: 30px; 612 | } 613 | 614 | .flux.current { 615 | background: var(--accent-bg); 616 | } 617 | 618 | .flux:not(.current):hover .item.title { 619 | background: var(--accent-bg); 620 | transition: .4s; 621 | position: relative; 622 | } 623 | 624 | .flux .item.title a { 625 | color: var(--text); 626 | } 627 | 628 | .flux .item.title .summary { 629 | color: var(--text-light); 630 | opacity: 0.8; 631 | } 632 | 633 | .flux .item.title .author { 634 | color: var(--text-light); 635 | opacity: 0.8; 636 | } 637 | 638 | 639 | /*=== Feed article content */ 640 | .content { 641 | margin: auto; 642 | padding: 20px 10px; 643 | min-height: 20em; 644 | line-height: 1.7em; 645 | word-wrap: break-word; 646 | } 647 | 648 | .hide_posts > .flux:not(.active) > .flux_content { 649 | display: none; 650 | } 651 | 652 | .content hr { 653 | margin: 30px 10px; 654 | height: 1px; 655 | } 656 | 657 | .content pre { 658 | margin: 10px auto; 659 | padding: 10px 20px; 660 | overflow: auto; 661 | font-size: 0.9rem; 662 | border: 1px solid var(--accent); 663 | border-radius: 6px; 664 | 665 | } 666 | 667 | .content code { 668 | padding: 2px 5px; 669 | } 670 | 671 | .content blockquote { 672 | margin: 0; 673 | padding: 5px 20px; 674 | display: block; 675 | } 676 | 677 | .content blockquote p { 678 | margin: 0; 679 | } 680 | 681 | /*=== Notification and actualize notification */ 682 | .notification { 683 | padding: 0 0 0 5px; 684 | background: var(--bg); 685 | color: var(--text); 686 | font-size: 0.9em; 687 | /*border: 1px solid #aaa;*/ 688 | border-radius: 6px; 689 | z-index: 10; 690 | text-align: center; 691 | font-weight: bold; 692 | line-height: 3em; 693 | vertical-align: middle; 694 | } 695 | 696 | 697 | .notification a.close { 698 | padding: 0 15px; 699 | line-height: 3em; 700 | } 701 | 702 | .notification#actualizeProgress { 703 | line-height: 2em; 704 | } 705 | 706 | .notification.closed { 707 | opacity: 0; 708 | visibility: hidden; 709 | } 710 | 711 | /*=== Popup */ 712 | #popup { 713 | background-color: rgb(0,0,0,.4); 714 | } 715 | 716 | #popup-content { 717 | background-color: var(--accent-bg); 718 | box-shadow: 0 0 1px #d8dee9, 1px 2px 3px var(--bg); 719 | } 720 | 721 | #popup-close:hover, 722 | #popup-close:focus { 723 | color: #d8dee9; 724 | } 725 | 726 | #popup-txt { 727 | display: none; 728 | height: 100%; 729 | } 730 | 731 | /*=== Navigation menu (for articles) */ 732 | #nav_entries { 733 | margin: 0; 734 | background: var(--accent-bg); 735 | text-align: center; 736 | line-height: 3em; 737 | } 738 | 739 | #bigMarkAsRead { 740 | text-decoration: none; 741 | } 742 | 743 | .bigTick { 744 | font-size: 4em; 745 | } 746 | 747 | /*=== Statistiques */ 748 | .stat > table td, 749 | .stat > table th { 750 | text-align: center; 751 | } 752 | 753 | .stat > .horizontal-list { 754 | margin: 0 0 5px; 755 | } 756 | 757 | .stat > .horizontal-list .item { 758 | overflow: hidden; 759 | white-space: nowrap; 760 | text-overflow: ellipsis; 761 | } 762 | 763 | .stat > .horizontal-list .item:first-child { 764 | width: 250px; 765 | } 766 | 767 | 768 | .stat { 769 | margin: 10px 0 20px; 770 | } 771 | 772 | /*=== Slider */ 773 | #slider { 774 | background: var(--accent-bg); 775 | border-left: 1px solid var(--border); 776 | } 777 | 778 | /*=== DIVERS */ 779 | /*===========*/ 780 | .category .title.error::before { 781 | color: var(--accent-light); 782 | content: "⚠ "; 783 | } 784 | 785 | 786 | .nav_menu { 787 | padding: 5px 0; 788 | text-align: center; 789 | } 790 | 791 | /*=== MOBILE */ 792 | /*===========*/ 793 | 794 | @media (max-width: 840px) { 795 | .aside:target + .close-aside { 796 | background: rgba(0, 0, 0, 0.2); 797 | display: block; 798 | font-size: 0; 799 | position: fixed; 800 | top: 0; 801 | bottom: 0; 802 | left: 0; 803 | right: 0; 804 | cursor: pointer; 805 | z-index: 99; 806 | } 807 | 808 | .nav_mobile { 809 | display: block; 810 | } 811 | 812 | .aside { 813 | position: fixed; 814 | top: 0; bottom: 0; 815 | left: 0; 816 | width: 0; 817 | overflow: hidden; 818 | z-index: 100; 819 | } 820 | 821 | .aside:target, 822 | .reader .aside:target { 823 | width: 90%; 824 | height: 100vh; 825 | } 826 | 827 | .aside_feed .configure-feeds { 828 | margin-top: 10px; 829 | } 830 | 831 | .flux_header .item.website { 832 | width: 40px; 833 | } 834 | 835 | .flux:not(.current):hover .item.title { 836 | position: relative; 837 | width: auto; 838 | white-space: nowrap; 839 | } 840 | 841 | .notification { 842 | top: 0; 843 | left: 0; 844 | right: 0; 845 | } 846 | 847 | #nav_entries { 848 | width: 100%; 849 | } 850 | 851 | #panel { 852 | top: 25px; bottom: 30px; 853 | left: 0; right: 0; 854 | } 855 | 856 | #panel .close { 857 | top: 0; right: 0; 858 | left: auto; bottom: auto; 859 | display: inline-block; 860 | width: 30px; 861 | height: 30px; 862 | } 863 | 864 | #slider.active { 865 | left: 0; 866 | top: 50px; 867 | background-color: var(--bg); 868 | } 869 | 870 | #close-slider img { 871 | display: initial; 872 | } 873 | 874 | #close-slider.active { 875 | background: var(--bg); 876 | display: block; 877 | width: 100%; 878 | height: 50px; 879 | z-index: 10; 880 | text-align: center; 881 | line-height: 50px; 882 | border-bottom: 1px solid #ddd; 883 | } 884 | 885 | .stat.half { 886 | grid-column: 1 / span 2; 887 | } 888 | } 889 | 890 | /*=== PRINTER */ 891 | /*============*/ 892 | 893 | @media print { 894 | .header, .aside, 895 | .nav_menu, .day, 896 | .flux_header, 897 | .flux_content .bottom, 898 | .pagination, 899 | #nav_entries { 900 | display: none; 901 | } 902 | 903 | html, body { 904 | background: #fff; 905 | color: #000; 906 | font-family: Serif; 907 | } 908 | 909 | #global, 910 | .flux_content { 911 | display: block !important; 912 | } 913 | 914 | .flux_content .content { 915 | width: 100% !important; 916 | } 917 | 918 | .flux_content .content a { 919 | color: #000; 920 | } 921 | 922 | .flux_content .content a::after { 923 | content: " [" attr(href) "] "; 924 | font-style: italic; 925 | } 926 | } 927 | 928 | /*=== PREVIEW */ 929 | /*===========*/ 930 | .preview_controls { 931 | margin-left: auto; 932 | margin-right: auto; 933 | padding: 1rem; 934 | max-width: 1000px; 935 | text-align: center; 936 | background-color: #eee; 937 | border: 1px solid #e0e0e0; 938 | border-radius: .25rem; 939 | } 940 | 941 | .preview_controls label { 942 | display: inline; 943 | } 944 | 945 | .preview_controls label input[type="radio"] { 946 | margin-top: -4px; 947 | } 948 | 949 | .preview_controls label + label { 950 | margin-left: 1rem; 951 | } 952 | 953 | .preview_background { 954 | background-color: transparent; 955 | } 956 | 957 | .drag-drop-marker { 958 | margin: -1px; 959 | } 960 | 961 | .feed .item-title:not([data-unread="0"])::before { 962 | content: "(" attr(data-unread) ") "; 963 | display: none 964 | } 965 | 966 | .feed .item-title:not([data-unread="0"])::after { 967 | content: " (" attr(data-unread) ")"; 968 | } 969 | 970 | 971 | /*BEGINS BASE.CSS*/ 972 | 973 | /*=== GENERAL */ 974 | /*============*/ 975 | 976 | /*=== Links */ 977 | a, button.as-link { 978 | outline: none; 979 | } 980 | 981 | /*=== Forms */ 982 | textarea { 983 | width: 360px; 984 | height: 100px; 985 | } 986 | 987 | 988 | option { 989 | padding: 0 .5em; 990 | } 991 | 992 | 993 | input.extend { 994 | transition: width 200ms linear; 995 | } 996 | 997 | 998 | /*=== COMPONENTS */ 999 | /*===============*/ 1000 | /*=== Forms */ 1001 | .form-group.form-actions .btn { 1002 | margin: 0 10px; 1003 | } 1004 | 1005 | /*=== Navigation */ 1006 | .nav-list .disable { 1007 | text-align: center; 1008 | } 1009 | 1010 | .nav-list .item > a { 1011 | padding: 0 10px; 1012 | } 1013 | 1014 | .nav-list a:hover { 1015 | text-decoration: none; 1016 | } 1017 | 1018 | .nav-list .nav-header { 1019 | padding: 0 10px; 1020 | font-weight: bold; 1021 | } 1022 | 1023 | .nav-list .nav-form { 1024 | padding: 3px; 1025 | text-align: center; 1026 | } 1027 | 1028 | /*=== Dropdown */ 1029 | .dropdown-menu::after { 1030 | content: ""; 1031 | position: absolute; 1032 | top: -6px; 1033 | right: 13px; 1034 | width: 10px; 1035 | height: 10px; 1036 | z-index: -10; 1037 | transform: rotate(45deg); 1038 | border-color: var(--border); 1039 | } 1040 | 1041 | 1042 | 1043 | .dropdown-menu > .item > a:hover, 1044 | .dropdown-menu > .item > span:hover, 1045 | .dropdown-menu > .item > .as-link:hover { 1046 | color: var(--accent); 1047 | transition: .4s; 1048 | } 1049 | 1050 | /*=== Pagination */ 1051 | .content .pagination { 1052 | margin: 0; 1053 | padding: 0; 1054 | } 1055 | 1056 | .pagination .item.pager-current { 1057 | font-weight: bold; 1058 | font-size: 1.5em; 1059 | } 1060 | 1061 | .pagination .item a { 1062 | display: block; 1063 | font-style: italic; 1064 | line-height: 3em; 1065 | text-decoration: none; 1066 | } 1067 | 1068 | .pagination .loading, 1069 | .pagination a:hover.loading { 1070 | font-size: 0; 1071 | } 1072 | 1073 | 1074 | 1075 | /*=== STRUCTURE */ 1076 | /*===============*/ 1077 | /*=== Header */ 1078 | 1079 | /*=== Body */ 1080 | /*=== Aside main page (categories) */ 1081 | .aside_feed .tree-folder-title > .title:not([data-unread="0"])::after { 1082 | position: absolute; 1083 | right: 0; 1084 | margin: 10px 0; 1085 | padding: 0 10px; 1086 | font-size: 0.9rem; 1087 | line-height: 1.5rem; 1088 | } 1089 | 1090 | /*=== Aside main page (feeds) */ 1091 | .aside_feed .tree-folder-items .dropdown-menu::after { 1092 | left: 2px; 1093 | } 1094 | 1095 | 1096 | /*=== Configuration pages */ 1097 | .post { 1098 | padding: 10px 50px; 1099 | font-size: 0.9em; 1100 | } 1101 | 1102 | .post form { 1103 | margin: 10px 0; 1104 | } 1105 | 1106 | .post.content { 1107 | max-width: 550px; 1108 | } 1109 | 1110 | /*=== Prompt (centered) */ 1111 | .prompt { 1112 | text-align: center; 1113 | } 1114 | 1115 | .prompt label { 1116 | text-align: left; 1117 | } 1118 | 1119 | .prompt form { 1120 | margin: 10px auto 20px auto; 1121 | width: 180px; 1122 | } 1123 | 1124 | .prompt input { 1125 | margin: 5px auto; 1126 | width: 100%; 1127 | } 1128 | 1129 | .prompt p { 1130 | margin: 20px 0; 1131 | } 1132 | 1133 | /*=== Navigation menu (for articles) */ 1134 | /*=== READER VIEW */ 1135 | /*================*/ 1136 | #stream.reader .flux { 1137 | padding: 0 0 50px; 1138 | } 1139 | 1140 | #stream.reader .flux .author { 1141 | margin: 0 0 10px; 1142 | font-size: 90%; 1143 | } 1144 | 1145 | /*=== GLOBAL VIEW */ 1146 | /*================*/ 1147 | .box.category .box-title .title { 1148 | font-weight: normal; 1149 | text-decoration: none; 1150 | text-align: left; 1151 | } 1152 | 1153 | .box.category .title:not([data-unread="0"])::after { 1154 | background: none; 1155 | border: 0; 1156 | position: absolute; 1157 | top: 5px; right: 10px; 1158 | font-weight: bold; 1159 | box-shadow: none; 1160 | text-shadow: none; 1161 | } 1162 | 1163 | .box.category .item.feed { 1164 | padding: 2px 10px; 1165 | font-size: 0.8rem; 1166 | } 1167 | 1168 | 1169 | 1170 | /*=== LOGS */ 1171 | /*=========*/ 1172 | .loglist { 1173 | overflow: hidden; 1174 | } 1175 | 1176 | .log { 1177 | padding: 5px 10px; 1178 | font-size: 0.8rem; 1179 | } 1180 | 1181 | .log .date { 1182 | display: block; 1183 | font-weight: bold; 1184 | } 1185 | 1186 | /*=== MOBILE */ 1187 | /*===========*/ 1188 | 1189 | @media (max-width: 840px) { 1190 | .aside { 1191 | transition: width 200ms linear; 1192 | } 1193 | 1194 | .aside .toggle_aside, 1195 | #panel .close { 1196 | display: block; 1197 | width: 100%; 1198 | height: 50px; 1199 | line-height: 50px; 1200 | text-align: center; 1201 | } 1202 | 1203 | .aside.aside_feed { 1204 | padding: 0; 1205 | } 1206 | 1207 | .nav_menu .btn { 1208 | margin: 5px 10px; 1209 | } 1210 | 1211 | .nav_menu .stick { 1212 | margin: 0 10px; 1213 | } 1214 | 1215 | .nav_menu .stick .btn { 1216 | margin: 5px 0; 1217 | } 1218 | 1219 | .nav_menu .search { 1220 | display: inline-block; 1221 | max-width: 97%; 1222 | } 1223 | 1224 | .nav_menu .search input { 1225 | max-width: 97%; 1226 | width: 90px; 1227 | } 1228 | 1229 | .nav_menu .search input:focus { 1230 | width: 400px; 1231 | } 1232 | 1233 | .day .name { 1234 | font-size: 1.1rem; 1235 | } 1236 | 1237 | .pagination { 1238 | margin: 0 0 3.5em; 1239 | } 1240 | 1241 | .notification a.close { 1242 | display: block; 1243 | left: 0; 1244 | } 1245 | 1246 | .notification a.close:hover { 1247 | opacity: 0.5; 1248 | } 1249 | 1250 | .notification a.close .icon { 1251 | display: none; 1252 | } 1253 | } 1254 | --------------------------------------------------------------------------------