From e3ca4ded2b3a461785b4e10efbb7eb5a158a04fe Mon Sep 17 00:00:00 2001 From: maTh Date: Thu, 29 Sep 2022 12:40:50 +0200 Subject: [PATCH] Rename template.css (#4644) * Fix conflicts * Update doc * Misses * Update prefix in CSS Co-authored-by: Alexandre Alapetite --- app/install.php | 2 +- docs/en/developers/04_Frontend/02_Design.md | 4 +- p/themes/Alternative-Dark/metadata.json | 2 +- p/themes/Ansum/metadata.json | 2 +- p/themes/BlueLagoon/metadata.json | 2 +- p/themes/Dark-pink/metadata.json | 2 +- p/themes/Dark/metadata.json | 2 +- p/themes/Flat/metadata.json | 4 +- p/themes/Mapco/metadata.json | 2 +- p/themes/Nord/metadata.json | 2 +- p/themes/Origine-compact/metadata.json | 2 +- p/themes/Origine/metadata.json | 2 +- p/themes/Pafat/metadata.json | 2 +- p/themes/Screwdriver/metadata.json | 2 +- p/themes/Swage/metadata.json | 2 +- .../base-theme/{template.css => frss.css} | 192 +++++++++--------- .../{template.rtl.css => frss.rtl.css} | 192 +++++++++--------- p/themes/base-theme/metadata.json | 2 +- 18 files changed, 210 insertions(+), 210 deletions(-) rename p/themes/base-theme/{template.css => frss.css} (85%) rename p/themes/base-theme/{template.rtl.css => frss.rtl.css} (85%) diff --git a/app/install.php b/app/install.php index b0363efbc93..9d0d855b814 100644 --- a/app/install.php +++ b/app/install.php @@ -670,7 +670,7 @@ function printStep5() { <?= _t('install.title') ?>: <?= _t('install.step', STEP + 1) ?> - + diff --git a/docs/en/developers/04_Frontend/02_Design.md b/docs/en/developers/04_Frontend/02_Design.md index f3dbc10eb66..a497ac29d63 100644 --- a/docs/en/developers/04_Frontend/02_Design.md +++ b/docs/en/developers/04_Frontend/02_Design.md @@ -11,7 +11,7 @@ The easiest way to create a theme is by copying and modifying the base theme (or - an **icons** folder containing .svg, .ico, and .png files to override existing icons - a **thumbs** folder containing a file, **original.png** that will be used as the preview for the theme -"_template.css" is normally added to the metadata file as a fallback for missing aspects. The file is taken from the base theme. If submitting a pull request for a theme, please know that [pull request themes must include this file.](https://github.com/FreshRSS/FreshRSS/pull/2938#issuecomment-624085450) +"_frss.css" is normally added to the metadata file as a fallback for missing aspects. The file is taken from the base theme. If submitting a pull request for a theme, please know that [pull request themes must include this file.](https://github.com/FreshRSS/FreshRSS/pull/2938#issuecomment-624085450) ## RTL Support @@ -31,7 +31,7 @@ To replace the default icons, add an "icons" folder to your theme’s folder. Us "author": "Theme author", "description": "Theme description", "version": 0.1, - "files": ["_template.css", "file1.css", "file2.css"] + "files": ["_frss.css", "file1.css", "file2.css"] } ``` diff --git a/p/themes/Alternative-Dark/metadata.json b/p/themes/Alternative-Dark/metadata.json index ea97e9fa03a..707ed1da51e 100644 --- a/p/themes/Alternative-Dark/metadata.json +++ b/p/themes/Alternative-Dark/metadata.json @@ -3,5 +3,5 @@ "author": "Ghost", "description": "Save my eyes!!!", "version": 0.1, - "files": ["_template.css", "adark.css"] + "files": ["_frss.css", "adark.css"] } diff --git a/p/themes/Ansum/metadata.json b/p/themes/Ansum/metadata.json index c76c3fa9ca2..23b1a96cce3 100644 --- a/p/themes/Ansum/metadata.json +++ b/p/themes/Ansum/metadata.json @@ -3,5 +3,5 @@ "author": "Thomas Guesnon", "description": "Thème sablonneux", "version": 0.1, - "files": ["_template.css", "ansum.css"] + "files": ["_frss.css", "ansum.css"] } diff --git a/p/themes/BlueLagoon/metadata.json b/p/themes/BlueLagoon/metadata.json index 71f364ad9f5..7822d73468c 100644 --- a/p/themes/BlueLagoon/metadata.json +++ b/p/themes/BlueLagoon/metadata.json @@ -3,5 +3,5 @@ "author": "Mister aiR", "description": "C’est un cocktail (bis)! C’est la version plus fresh de Screwdriver. C’est… c’est… un thème pour l’agrégateur de flux RSS FreshRSS. En toute modestie, ce thème tue du Nyan Cat.", "version": 1.0, - "files": ["_template.css","BlueLagoon.css"] + "files": ["_frss.css","BlueLagoon.css"] } diff --git a/p/themes/Dark-pink/metadata.json b/p/themes/Dark-pink/metadata.json index 0d69fa2d6b0..7e582eefd2e 100644 --- a/p/themes/Dark-pink/metadata.json +++ b/p/themes/Dark-pink/metadata.json @@ -3,5 +3,5 @@ "author": "Miicat_47", "description": "Nice dawk pink theme. >_< UwU", "version": 0.1, - "files": ["_template.css", "../Alternative-Dark/adark.css", "pinkdark.css"] + "files": ["_frss.css", "../Alternative-Dark/adark.css", "pinkdark.css"] } diff --git a/p/themes/Dark/metadata.json b/p/themes/Dark/metadata.json index 7a85bd6cf2f..b3842899516 100644 --- a/p/themes/Dark/metadata.json +++ b/p/themes/Dark/metadata.json @@ -3,5 +3,5 @@ "author": "AD", "description": "The dark side of the “Origine” theme", "version": 0.2, - "files": ["_template.css", "dark.css"] + "files": ["_frss.css", "dark.css"] } diff --git a/p/themes/Flat/metadata.json b/p/themes/Flat/metadata.json index 3afdc98af8c..27a83fe83a0 100644 --- a/p/themes/Flat/metadata.json +++ b/p/themes/Flat/metadata.json @@ -3,5 +3,5 @@ "author": "Marien Fressinaud", "description": "Thème plat pour FreshRSS", "version": 0.2, - "files": ["_template.css", "flat.css"] -} \ No newline at end of file + "files": ["_frss.css", "flat.css"] +} diff --git a/p/themes/Mapco/metadata.json b/p/themes/Mapco/metadata.json index 24bb04b87c2..353d0908a53 100644 --- a/p/themes/Mapco/metadata.json +++ b/p/themes/Mapco/metadata.json @@ -3,5 +3,5 @@ "author": "Thomas Guesnon", "description": "Thème pour FreshRSS", "version": 0.1, - "files": ["_template.css", "mapco.css"] + "files": ["_frss.css", "mapco.css"] } diff --git a/p/themes/Nord/metadata.json b/p/themes/Nord/metadata.json index aaaf64c44d6..eeb9ef808f3 100644 --- a/p/themes/Nord/metadata.json +++ b/p/themes/Nord/metadata.json @@ -3,5 +3,5 @@ "author": "joelchrono12", "description": "A simple theme based on Nord's color scheme", "version": 0.1, - "files": ["_template.css","nord.css"] + "files": ["_frss.css","nord.css"] } diff --git a/p/themes/Origine-compact/metadata.json b/p/themes/Origine-compact/metadata.json index 67038e17320..ded2f0616d4 100644 --- a/p/themes/Origine-compact/metadata.json +++ b/p/themes/Origine-compact/metadata.json @@ -3,5 +3,5 @@ "author": "Kevin Papst", "description": "A theme that tries to use the screen size more efficiently, based on Origine", "version": 0.1, - "files": ["_template.css", "../Origine/origine.css", "origine-compact.css"] + "files": ["_frss.css", "../Origine/origine.css", "origine-compact.css"] } diff --git a/p/themes/Origine/metadata.json b/p/themes/Origine/metadata.json index 774320eb40d..721f9af8b97 100644 --- a/p/themes/Origine/metadata.json +++ b/p/themes/Origine/metadata.json @@ -3,5 +3,5 @@ "author": "Marien Fressinaud", "description": "Le thème par défaut pour FreshRSS", "version": 0.2, - "files": ["_template.css", "origine.css"] + "files": ["_frss.css", "origine.css"] } diff --git a/p/themes/Pafat/metadata.json b/p/themes/Pafat/metadata.json index ba82e0a0980..f70442378b9 100644 --- a/p/themes/Pafat/metadata.json +++ b/p/themes/Pafat/metadata.json @@ -3,5 +3,5 @@ "author": "Plopoyop", "description": "Un thème pour FreshRSS", "version": 0.2, - "files": ["_template.css", "pafat.css"] + "files": ["_frss.css", "pafat.css"] } diff --git a/p/themes/Screwdriver/metadata.json b/p/themes/Screwdriver/metadata.json index f07769d6a6a..08654e51d0a 100644 --- a/p/themes/Screwdriver/metadata.json +++ b/p/themes/Screwdriver/metadata.json @@ -3,5 +3,5 @@ "author": "Mister aiR", "description": "C’est un cocktail ! C’est chaud mais « fresh » à la fois. Ce thème tue du chaton.", "version": 1.1, - "files": ["_template.css","screwdriver.css"] + "files": ["_frss.css","screwdriver.css"] } diff --git a/p/themes/Swage/metadata.json b/p/themes/Swage/metadata.json index a81c10cfd58..d51b026ccf8 100644 --- a/p/themes/Swage/metadata.json +++ b/p/themes/Swage/metadata.json @@ -3,5 +3,5 @@ "author": "Patrick Crandol", "description": "A Fresh take on the interface, inspired by the Flat Theme.", "version": 1.0, - "files": ["_template.css", "swage.css"] + "files": ["_frss.css", "swage.css"] } diff --git a/p/themes/base-theme/template.css b/p/themes/base-theme/frss.css similarity index 85% rename from p/themes/base-theme/template.css rename to p/themes/base-theme/frss.css index da43d86318a..bcc6f2827ea 100644 --- a/p/themes/base-theme/template.css +++ b/p/themes/base-theme/frss.css @@ -3,40 +3,40 @@ /*=== GENERAL */ /*============*/ :root { - --template-font-color-dark: #000; - --template-font-color-grey-dark: #666; - --template-font-color-grey-light: #aaa; - --template-font-color-light: #fff; - --template-background-color-error-transparent: #ff000040; - --template-font-color-error: #f00; + --frss-font-color-dark: #000; + --frss-font-color-grey-dark: #666; + --frss-font-color-grey-light: #aaa; + --frss-font-color-light: #fff; + --frss-background-color-error-transparent: #ff000040; + --frss-font-color-error: #f00; - --template-background-color: #fff; - --template-background-color-transparent: #ffffff7f; - --template-background-color-middle: #eee; - --template-background-color-dark: #ccc; + --frss-background-color: #fff; + --frss-background-color-transparent: #ffffff7f; + --frss-background-color-middle: #eee; + --frss-background-color-dark: #ccc; - --template-border-color: #999; - --template-border-color-error: #f00; + --frss-border-color: #999; + --frss-border-color-error: #f00; - --template-switch-accent-color: #85d885; + --frss-switch-accent-color: #85d885; - --template-dragdrop-color: #ff0; - --template-dragdrop-color-transparent: #ff02; + --frss-dragdrop-color: #ff0; + --frss-dragdrop-color-transparent: #ff02; - --template-noThumbnailImage-background-color: #ddd; + --frss-noThumbnailImage-background-color: #ddd; - --template-darken-background-hover-transparent: #6662; + --frss-darken-background-hover-transparent: #6662; - --template-modal-background-color-transparent: #0007; + --frss-modal-background-color-transparent: #0007; - --template-box-shadow-color-transparent: #0003; + --frss-box-shadow-color-transparent: #0003; - --template-scrollbar-handle: #0002; - --template-scrollbar-handle-hover: #0005; - --template-scrollbar-track: #0001; - --template-scrollbar-track-hover: #0001; + --frss-scrollbar-handle: #0002; + --frss-scrollbar-handle-hover: #0005; + --frss-scrollbar-track: #0001; + --frss-scrollbar-track-hover: #0001; - --template-loading-image: url("loader.gif"); + --frss-loading-image: url("loader.gif"); } @font-face { @@ -51,7 +51,7 @@ html, body { margin: 0; padding: 0; - background-color: var(--template-background-color); + background-color: var(--frss-background-color); height: 100%; font-family: "OpenSans", "Cantarell", "Helvetica", "Arial", sans-serif; font-size: 100%; @@ -123,11 +123,11 @@ sup { } kbd { - background-color: var(--template-background-color-middle); + background-color: var(--frss-background-color-middle); padding: 2px 4px 2px 24px; display: inline-block; - color: var(--template-font-color-grey-dark); - border: 1px solid var(--template-border-color); + color: var(--frss-font-color-grey-dark); + border: 1px solid var(--frss-border-color); border-radius: 3px; text-indent: -20px; white-space: pre-wrap; @@ -246,7 +246,7 @@ textarea[rows="2"] { } textarea:invalid { - border: 2px dashed var(--template-border-color-error); + border: 2px dashed var(--frss-border-color-error); } .prompt textarea, @@ -262,9 +262,9 @@ input:disabled, select:disabled { background-color: transparent; min-width: 75px; - color: var(--template-font-color-grey-light); + color: var(--frss-font-color-grey-light); font-style: italic; - border: 1px dashed var(--template-border-color); + border: 1px dashed var(--frss-border-color); } input[type="radio"], @@ -317,7 +317,7 @@ button.as-link:active { } button.as-link[disabled] { - color: var(--template-font-color-grey-light) !important; + color: var(--frss-font-color-grey-light) !important; } /*=== Tables */ @@ -455,7 +455,7 @@ a.btn { height: 1.75em; border: 0; border-radius: 1em; - background-color: var(--template-background-color-dark); + background-color: var(--frss-background-color-dark); cursor: pointer; box-sizing: content-box; background-repeat: no-repeat; @@ -471,7 +471,7 @@ a.btn { } .switch.active { - background-color: var(--template-switch-accent-color); + background-color: var(--frss-switch-accent-color); background-repeat: no-repeat; background-position: center center; background-image: url('../icons/enabled.svg'); @@ -502,7 +502,7 @@ a.btn { top: 0.2em; width: 1.5em; height: 1.5em; - background-color: var(--template-background-color); + background-color: var(--frss-background-color); background-image: url('../icons/disabled.svg'); background-repeat: no-repeat; background-position: center center; @@ -511,7 +511,7 @@ a.btn { } .switch:not([disabled]):hover::before { - background-color: var(--template-background-color-middle); + background-color: var(--frss-background-color-middle); } .switch.active::before { @@ -544,7 +544,7 @@ a.btn { .btn:focus-visible, input[type="checkbox"]:focus-visible { - outline: 2px solid var(--template-border-color); + outline: 2px solid var(--frss-border-color); } /*=== Navigation */ @@ -624,9 +624,9 @@ input[type="checkbox"]:focus-visible { .dropdown-menu { margin: 0; - background-color: var(--template-background-color); + background-color: var(--frss-background-color); display: none; - border: 1px solid var(--template-border-color); + border: 1px solid var(--frss-border-color); min-width: 200px; position: absolute; right: 0; @@ -638,7 +638,7 @@ input[type="checkbox"]:focus-visible { height: 10px; border-width: 1px 0 0 1px; border-style: solid; - border-color: var(--template-border-color); + border-color: var(--frss-border-color); content: ""; position: absolute; top: -6px; @@ -706,7 +706,7 @@ input[type="checkbox"]:focus-visible { .separator { display: block; height: 0; - border-bottom: 1px solid var(--template-border-color); + border-bottom: 1px solid var(--frss-border-color); } /*=== Alerts */ @@ -751,7 +751,7 @@ input[type="checkbox"]:focus-visible { margin: 0 0 5em; padding: 1em 0; width: 100%; - border-top: 1px solid var(--template-border-color); + border-top: 1px solid var(--frss-border-color); text-align: center; } @@ -860,7 +860,7 @@ input[type="checkbox"]:focus-visible { } .dragging { - background-color: var(--template-dragdrop-color) + background-color: var(--frss-dragdrop-color) } .dragging .icon { @@ -872,17 +872,17 @@ input[type="checkbox"]:focus-visible { } .drag-active .drop-zone:not(.drag-disallowed) { - background: repeating-linear-gradient(45deg, transparent, transparent 40px, var(--template-dragdrop-color-transparent) 40px, var(--template-dragdrop-color-transparent) 60px); + background: repeating-linear-gradient(45deg, transparent, transparent 40px, var(--frss-dragdrop-color-transparent) 40px, var(--frss-dragdrop-color-transparent) 60px); } .drag-active .drag-hover.drop-zone { - background-color: var(--template-dragdrop-color-transparent); + background-color: var(--frss-dragdrop-color-transparent); transition: background 0.5s; } li.drag-hover { margin: 0 0 5px; - border-bottom: 2px solid var(--template-border-color); + border-bottom: 2px solid var(--frss-border-color); } .drag-drop { @@ -892,11 +892,11 @@ li.drag-hover { @keyframes droppedKeyframe { 0% { - background-color: var(--template-dragdrop-color-transparent); + background-color: var(--frss-dragdrop-color-transparent); } 50% { - background-color: var(--template-dragdrop-color); + background-color: var(--frss-dragdrop-color); } 100% { @@ -909,38 +909,38 @@ li.drag-hover { @supports (scrollbar-width: thin) { #sidebar, .scrollbar-thin { - scrollbar-color: var(--template-scrollbar-handle) var(--template-scrollbar-track); + scrollbar-color: var(--frss-scrollbar-handle) var(--frss-scrollbar-track); scrollbar-width: thin; } #sidebar:hover, .scrollbar-thin:hover { - scrollbar-color: var(--template-scrollbar-handle-hover) var(--template-scrollbar-track-hover); + scrollbar-color: var(--frss-scrollbar-handle-hover) var(--frss-scrollbar-track-hover); } } @supports not (scrollbar-width: thin) { #sidebar::-webkit-scrollbar, .scrollbar-thin::-webkit-scrollbar { - background-color: var(--template-scrollbar-track); + background-color: var(--frss-scrollbar-track); width: 8px; } #sidebar:hover::-webkit-scrollbar, .scrollbar-thin:hover::-webkit-scrollbar { - background-color: var(--template-scrollbar-track-hover); + background-color: var(--frss-scrollbar-track-hover); } #sidebar::-webkit-scrollbar-thumb, .scrollbar-thin::-webkit-scrollbar-thumb { - background-color: var(--template-scrollbar-handle); + background-color: var(--frss-scrollbar-handle); display: unset; border-radius: 5px; } #sidebar:hover::-webkit-scrollbar-thumb, .scrollbar-thin:hover::-webkit-scrollbar-thumb { - background-color: var(--template-scrollbar-handle-hover); + background-color: var(--frss-scrollbar-handle-hover); } } @@ -1099,7 +1099,7 @@ input[type="search"] { #panel .close:hover, #slider .toggle_aside:hover, .dropdown-menu .toggle_aside:hover { - background-color: var(--template-darken-background-hover-transparent); + background-color: var(--frss-darken-background-hover-transparent); } /*=== New article notification */ @@ -1159,7 +1159,7 @@ a.website:hover .favicon { } .flux:not(.current):hover .item.title { - background-color: var(--template-background-color); + background-color: var(--frss-background-color); max-width: calc(100% - 320px); position: absolute; } @@ -1175,7 +1175,7 @@ a.website:hover .favicon { } .flux .item.title a { - color: var(--template-font-color-dark); + color: var(--frss-font-color-dark); text-decoration: none; } @@ -1214,7 +1214,7 @@ a.website:hover .favicon { } .flux .item.thumbnail img { - background: repeating-linear-gradient( -45deg, var(--template-noThumbnailImage-background-color), var(--template-noThumbnailImage-background-color) 5px, transparent 5px, transparent 10px ); + background: repeating-linear-gradient( -45deg, var(--frss-noThumbnailImage-background-color), var(--frss-noThumbnailImage-background-color) 5px, transparent 5px, transparent 10px ); display: inline-block; width: 100%; height: 100%; @@ -1224,7 +1224,7 @@ a.website:hover .favicon { .flux .item.title .summary { max-height: 3em; - color: var(--template-font-color-grey-dark); + color: var(--frss-font-color-grey-dark); font-size: 0.9em; line-height: 1.5em; font-weight: normal; @@ -1235,7 +1235,7 @@ a.website:hover .favicon { .flux .item.title .author { padding-left: 1rem; - color: var(--template-font-color-grey-dark); + color: var(--frss-font-color-grey-dark); font-size: .9rem; font-weight: normal; } @@ -1315,14 +1315,14 @@ a.website:hover .favicon { .content > header, .content > footer { - color: var(--template-font-color-grey-light); + color: var(--frss-font-color-grey-light); font-size: .9rem; } .content > footer { margin: 2rem 0 2rem; padding-top: 1rem; - border-top: 2px solid var(--template-border-color); + border-top: 2px solid var(--frss-border-color); clear: both; } @@ -1395,8 +1395,8 @@ br { top: 1em; left: 25%; right: 25%; z-index: 9999; - background-color: var(--template-background-color); - border: 1px solid var(--template-border-color); + background-color: var(--frss-background-color); + border: 1px solid var(--frss-border-color); opacity: 1; line-height: 2; visibility: visible; @@ -1416,7 +1416,7 @@ br { } .notification a.close:hover { - background-color: var(--template-darken-background-hover-transparent); + background-color: var(--frss-darken-background-hover-transparent); } .notification a.close:hover .icon { @@ -1446,7 +1446,7 @@ br { width: 100%; height: 100%; overflow: auto; - background-color: var(--template-modal-background-color-transparent); + background-color: var(--frss-modal-background-color-transparent); } #popup-content { @@ -1455,9 +1455,9 @@ br { width: 80%; height: 80%; overflow: hidden; - background-color: var(--template-background-color); + background-color: var(--frss-background-color); border-radius: .25rem; - box-shadow: 3px 3px 5px var(--template-box-shadow-color-transparent); + box-shadow: 3px 3px 5px var(--frss-box-shadow-color-transparent); } .popup-row { @@ -1470,14 +1470,14 @@ br { width: 27px; height: 27px; padding-bottom: 5px; - color: var(--template-font-color-grey-light); + color: var(--frss-font-color-grey-light); font-size: 28px; font-weight: bold; } #popup-close:hover, #popup-close:focus { - color: var(--template-font-color-dark); + color: var(--frss-font-color-dark); text-decoration: none; cursor: pointer; } @@ -1528,12 +1528,12 @@ br { #load_more.loading, #load_more.loading:hover { padding: 10px 20px; - background: var(--template-loading-image) center center no-repeat var(--template-background-color); + background: var(--frss-loading-image) center center no-repeat var(--frss-background-color); font-size: 0; } .loading { - background: var(--template-loading-image) center center no-repeat; + background: var(--frss-loading-image) center center no-repeat; font-size: 0; } @@ -1600,7 +1600,7 @@ br { position: fixed; top: 0; bottom: 0; left: 0; right: 0; - background-color: var(--template-modal-background-color-transparent); + background-color: var(--frss-modal-background-color-transparent); opacity: 0; transition: visibility .3s, opacity .3s; visibility: hidden; @@ -1612,7 +1612,7 @@ br { } #panel { - background-color: var(--template-background-color); + background-color: var(--frss-background-color); display: none; position: fixed; top: 2%; bottom: 2%; @@ -1633,7 +1633,7 @@ br { /*=== Slider */ #slider { - background-color: var(--template-background-color); + background-color: var(--frss-background-color); width: 0; position: fixed; top: 0; bottom: 0; @@ -1644,7 +1644,7 @@ br { #slider.active:target { width: 750px; - box-shadow: -3px 3px 5px var(--template-box-shadow-color-transparent); + box-shadow: -3px 3px 5px var(--frss-box-shadow-color-transparent); } #slider.sliding { @@ -1659,7 +1659,7 @@ br { } #slider.active:target + #close-slider { - background-color: var(--template-modal-background-color-transparent); + background-color: var(--frss-modal-background-color-transparent); font-size: 0; left: 0; z-index: 99; @@ -1692,7 +1692,7 @@ br { display: block; max-width: 640px; height: 320px; - border: 1px solid var(--template-border-color); + border: 1px solid var(--frss-border-color); position: relative; min-width: 260px; margin-bottom: 30px; @@ -1727,7 +1727,7 @@ br { display: none; width: 65px; height: 100%; - color: var(--template-font-color-light); + color: var(--frss-font-color-light); font-family: "Varela Round", sans-serif; font-size: 1000%; position: absolute; @@ -1737,15 +1737,15 @@ br { transition: opacity .2s; text-align: center; line-height: 225%; - background-color: var(--template-background-color-transparent); + background-color: var(--frss-background-color-transparent); text-shadow: 0px 0px 15px rgb(119, 119, 119); } .properties { padding: 5px; - background-color: var(--template-background-color-transparent); + background-color: var(--frss-background-color-transparent); display: none; - border-top: 1px solid var(--template-border-color); + border-top: 1px solid var(--frss-border-color); bottom: 0; left: 0; right: 0; position: absolute; @@ -1792,18 +1792,18 @@ input:checked + .slide-container .properties { } .log-item.log-error { - background-color: var(--template-background-color-error-transparent); + background-color: var(--frss-background-color-error-transparent); } .item.share.error a::after, .category .title.error::before, .item.feed.error .item-title::before { content: " ⚠ "; - color: var(--template-font-color-error); + color: var(--frss-font-color-error); } .feed.item.error.active .item-title::before { - color: var(--template-font-color-light); + color: var(--frss-font-color-light); } .aside .category .title:not([data-unread="0"])::after, @@ -1844,8 +1844,8 @@ input:checked + .slide-container .properties { } .feed.active .item-title:not([data-unread="0"])::after { - color: var(--template-font-color-light); - border: 1px solid var(--template-border-color); + color: var(--frss-font-color-light); + border: 1px solid var(--frss-border-color); font-weight: bold; } @@ -1943,7 +1943,7 @@ input:checked + .slide-container .properties { } .aside:target { - box-shadow: 3px 3px 5px var(--template-box-shadow-color-transparent); + box-shadow: 3px 3px 5px var(--frss-box-shadow-color-transparent); } .aside .toggle_aside, @@ -1953,7 +1953,7 @@ input:checked + .slide-container .properties { display: block; width: 100%; height: 50px; - border-bottom: 1px solid var(--template-border-color); + border-bottom: 1px solid var(--frss-border-color); line-height: 50px; text-align: center; } @@ -2002,7 +2002,7 @@ input:checked + .slide-container .properties { } .dropdown-target:target ~ .dropdown-toggle::after { - background-color: var(--template-background-color); + background-color: var(--frss-background-color); width: 10px; height: 10px; content: ""; @@ -2029,7 +2029,7 @@ input:checked + .slide-container .properties { padding-top: 0; margin-top: 0; overflow: auto; - box-shadow: -3px 0 3px var(--template-box-shadow-color-transparent); + box-shadow: -3px 0 3px var(--frss-box-shadow-color-transparent); } .configure .dropdown-target:target ~ .dropdown-toggle::after { @@ -2060,7 +2060,7 @@ input:checked + .slide-container .properties { .aside:target + .close-aside, .configure .dropdown-target:target ~ .dropdown-close { - background-color: var(--template-modal-background-color-transparent); + background-color: var(--frss-modal-background-color-transparent); display: block; font-size: 0; position: fixed; @@ -2203,7 +2203,7 @@ input:checked + .slide-container .properties { } html, body { - background-color: var(--template-background-color); + background-color: var(--frss-background-color); font-family: Serif; } @@ -2217,7 +2217,7 @@ input:checked + .slide-container .properties { } .flux_content .content a { - color: var(--template-font-color-dark); + color: var(--frss-font-color-dark); } .flux_content .content a::after { @@ -2234,8 +2234,8 @@ input:checked + .slide-container .properties { padding: 1rem; max-width: 1000px; text-align: center; - background-color: var(--template-background-color-middle); - border: 1px solid var(--template-border-color); + background-color: var(--frss-background-color-middle); + border: 1px solid var(--frss-border-color); border-radius: .25rem; } diff --git a/p/themes/base-theme/template.rtl.css b/p/themes/base-theme/frss.rtl.css similarity index 85% rename from p/themes/base-theme/template.rtl.css rename to p/themes/base-theme/frss.rtl.css index cfdf3fadab7..38be907a354 100644 --- a/p/themes/base-theme/template.rtl.css +++ b/p/themes/base-theme/frss.rtl.css @@ -3,40 +3,40 @@ /*=== GENERAL */ /*============*/ :root { - --template-font-color-dark: #000; - --template-font-color-grey-dark: #666; - --template-font-color-grey-light: #aaa; - --template-font-color-light: #fff; - --template-background-color-error-transparent: #ff000040; - --template-font-color-error: #f00; + --frss-font-color-dark: #000; + --frss-font-color-grey-dark: #666; + --frss-font-color-grey-light: #aaa; + --frss-font-color-light: #fff; + --frss-background-color-error-transparent: #ff000040; + --frss-font-color-error: #f00; - --template-background-color: #fff; - --template-background-color-transparent: #ffffff7f; - --template-background-color-middle: #eee; - --template-background-color-dark: #ccc; + --frss-background-color: #fff; + --frss-background-color-transparent: #ffffff7f; + --frss-background-color-middle: #eee; + --frss-background-color-dark: #ccc; - --template-border-color: #999; - --template-border-color-error: #f00; + --frss-border-color: #999; + --frss-border-color-error: #f00; - --template-switch-accent-color: #85d885; + --frss-switch-accent-color: #85d885; - --template-dragdrop-color: #ff0; - --template-dragdrop-color-transparent: #ff02; + --frss-dragdrop-color: #ff0; + --frss-dragdrop-color-transparent: #ff02; - --template-noThumbnailImage-background-color: #ddd; + --frss-noThumbnailImage-background-color: #ddd; - --template-darken-background-hover-transparent: #6662; + --frss-darken-background-hover-transparent: #6662; - --template-modal-background-color-transparent: #0007; + --frss-modal-background-color-transparent: #0007; - --template-box-shadow-color-transparent: #0003; + --frss-box-shadow-color-transparent: #0003; - --template-scrollbar-handle: #0002; - --template-scrollbar-handle-hover: #0005; - --template-scrollbar-track: #0001; - --template-scrollbar-track-hover: #0001; + --frss-scrollbar-handle: #0002; + --frss-scrollbar-handle-hover: #0005; + --frss-scrollbar-track: #0001; + --frss-scrollbar-track-hover: #0001; - --template-loading-image: url("loader.gif"); + --frss-loading-image: url("loader.gif"); } @font-face { @@ -51,7 +51,7 @@ html, body { margin: 0; padding: 0; - background-color: var(--template-background-color); + background-color: var(--frss-background-color); height: 100%; font-family: "OpenSans", "Cantarell", "Helvetica", "Arial", sans-serif; font-size: 100%; @@ -123,11 +123,11 @@ sup { } kbd { - background-color: var(--template-background-color-middle); + background-color: var(--frss-background-color-middle); padding: 2px 24px 2px 4px; display: inline-block; - color: var(--template-font-color-grey-dark); - border: 1px solid var(--template-border-color); + color: var(--frss-font-color-grey-dark); + border: 1px solid var(--frss-border-color); border-radius: 3px; text-indent: -20px; white-space: pre-wrap; @@ -246,7 +246,7 @@ textarea[rows="2"] { } textarea:invalid { - border: 2px dashed var(--template-border-color-error); + border: 2px dashed var(--frss-border-color-error); } .prompt textarea, @@ -262,9 +262,9 @@ input:disabled, select:disabled { background-color: transparent; min-width: 75px; - color: var(--template-font-color-grey-light); + color: var(--frss-font-color-grey-light); font-style: italic; - border: 1px dashed var(--template-border-color); + border: 1px dashed var(--frss-border-color); } input[type="radio"], @@ -317,7 +317,7 @@ button.as-link:active { } button.as-link[disabled] { - color: var(--template-font-color-grey-light) !important; + color: var(--frss-font-color-grey-light) !important; } /*=== Tables */ @@ -455,7 +455,7 @@ a.btn { height: 1.75em; border: 0; border-radius: 1em; - background-color: var(--template-background-color-dark); + background-color: var(--frss-background-color-dark); cursor: pointer; box-sizing: content-box; background-repeat: no-repeat; @@ -471,7 +471,7 @@ a.btn { } .switch.active { - background-color: var(--template-switch-accent-color); + background-color: var(--frss-switch-accent-color); background-repeat: no-repeat; background-position: center center; background-image: url('../icons/enabled.svg'); @@ -502,7 +502,7 @@ a.btn { top: 0.2em; width: 1.5em; height: 1.5em; - background-color: var(--template-background-color); + background-color: var(--frss-background-color); background-image: url('../icons/disabled.svg'); background-repeat: no-repeat; background-position: center center; @@ -511,7 +511,7 @@ a.btn { } .switch:not([disabled]):hover::before { - background-color: var(--template-background-color-middle); + background-color: var(--frss-background-color-middle); } .switch.active::before { @@ -544,7 +544,7 @@ a.btn { .btn:focus-visible, input[type="checkbox"]:focus-visible { - outline: 2px solid var(--template-border-color); + outline: 2px solid var(--frss-border-color); } /*=== Navigation */ @@ -624,9 +624,9 @@ input[type="checkbox"]:focus-visible { .dropdown-menu { margin: 0; - background-color: var(--template-background-color); + background-color: var(--frss-background-color); display: none; - border: 1px solid var(--template-border-color); + border: 1px solid var(--frss-border-color); min-width: 200px; position: absolute; left: 0; @@ -638,7 +638,7 @@ input[type="checkbox"]:focus-visible { height: 10px; border-width: 1px 1px 0 0; border-style: solid; - border-color: var(--template-border-color); + border-color: var(--frss-border-color); content: ""; position: absolute; top: -6px; @@ -706,7 +706,7 @@ input[type="checkbox"]:focus-visible { .separator { display: block; height: 0; - border-bottom: 1px solid var(--template-border-color); + border-bottom: 1px solid var(--frss-border-color); } /*=== Alerts */ @@ -751,7 +751,7 @@ input[type="checkbox"]:focus-visible { margin: 0 0 5em; padding: 1em 0; width: 100%; - border-top: 1px solid var(--template-border-color); + border-top: 1px solid var(--frss-border-color); text-align: center; } @@ -860,7 +860,7 @@ input[type="checkbox"]:focus-visible { } .dragging { - background-color: var(--template-dragdrop-color) + background-color: var(--frss-dragdrop-color) } .dragging .icon { @@ -872,17 +872,17 @@ input[type="checkbox"]:focus-visible { } .drag-active .drop-zone:not(.drag-disallowed) { - background: repeating-linear-gradient(-45deg, transparent, transparent 40px, var(--template-dragdrop-color-transparent) 40px, var(--template-dragdrop-color-transparent) 60px); + background: repeating-linear-gradient(-45deg, transparent, transparent 40px, var(--frss-dragdrop-color-transparent) 40px, var(--frss-dragdrop-color-transparent) 60px); } .drag-active .drag-hover.drop-zone { - background-color: var(--template-dragdrop-color-transparent); + background-color: var(--frss-dragdrop-color-transparent); transition: background 0.5s; } li.drag-hover { margin: 0 0 5px; - border-bottom: 2px solid var(--template-border-color); + border-bottom: 2px solid var(--frss-border-color); } .drag-drop { @@ -892,11 +892,11 @@ li.drag-hover { @keyframes droppedKeyframe { 0% { - background-color: var(--template-dragdrop-color-transparent); + background-color: var(--frss-dragdrop-color-transparent); } 50% { - background-color: var(--template-dragdrop-color); + background-color: var(--frss-dragdrop-color); } 100% { @@ -909,38 +909,38 @@ li.drag-hover { @supports (scrollbar-width: thin) { #sidebar, .scrollbar-thin { - scrollbar-color: var(--template-scrollbar-handle) var(--template-scrollbar-track); + scrollbar-color: var(--frss-scrollbar-handle) var(--frss-scrollbar-track); scrollbar-width: thin; } #sidebar:hover, .scrollbar-thin:hover { - scrollbar-color: var(--template-scrollbar-handle-hover) var(--template-scrollbar-track-hover); + scrollbar-color: var(--frss-scrollbar-handle-hover) var(--frss-scrollbar-track-hover); } } @supports not (scrollbar-width: thin) { #sidebar::-webkit-scrollbar, .scrollbar-thin::-webkit-scrollbar { - background-color: var(--template-scrollbar-track); + background-color: var(--frss-scrollbar-track); width: 8px; } #sidebar:hover::-webkit-scrollbar, .scrollbar-thin:hover::-webkit-scrollbar { - background-color: var(--template-scrollbar-track-hover); + background-color: var(--frss-scrollbar-track-hover); } #sidebar::-webkit-scrollbar-thumb, .scrollbar-thin::-webkit-scrollbar-thumb { - background-color: var(--template-scrollbar-handle); + background-color: var(--frss-scrollbar-handle); display: unset; border-radius: 5px; } #sidebar:hover::-webkit-scrollbar-thumb, .scrollbar-thin:hover::-webkit-scrollbar-thumb { - background-color: var(--template-scrollbar-handle-hover); + background-color: var(--frss-scrollbar-handle-hover); } } @@ -1099,7 +1099,7 @@ input[type="search"] { #panel .close:hover, #slider .toggle_aside:hover, .dropdown-menu .toggle_aside:hover { - background-color: var(--template-darken-background-hover-transparent); + background-color: var(--frss-darken-background-hover-transparent); } /*=== New article notification */ @@ -1159,7 +1159,7 @@ a.website:hover .favicon { } .flux:not(.current):hover .item.title { - background-color: var(--template-background-color); + background-color: var(--frss-background-color); max-width: calc(100% - 320px); position: absolute; } @@ -1173,7 +1173,7 @@ a.website:hover .favicon { } .flux .item.title a { - color: var(--template-font-color-dark); + color: var(--frss-font-color-dark); text-decoration: none; } @@ -1212,7 +1212,7 @@ a.website:hover .favicon { } .flux .item.thumbnail img { - background: repeating-linear-gradient( 45deg, var(--template-noThumbnailImage-background-color), var(--template-noThumbnailImage-background-color) 5px, transparent 5px, transparent 10px ); + background: repeating-linear-gradient( 45deg, var(--frss-noThumbnailImage-background-color), var(--frss-noThumbnailImage-background-color) 5px, transparent 5px, transparent 10px ); display: inline-block; width: 100%; height: 100%; @@ -1222,7 +1222,7 @@ a.website:hover .favicon { .flux .item.title .summary { max-height: 3em; - color: var(--template-font-color-grey-dark); + color: var(--frss-font-color-grey-dark); font-size: 0.9em; line-height: 1.5em; font-weight: normal; @@ -1233,7 +1233,7 @@ a.website:hover .favicon { .flux .item.title .author { padding-right: 1rem; - color: var(--template-font-color-grey-dark); + color: var(--frss-font-color-grey-dark); font-size: .9rem; font-weight: normal; } @@ -1295,14 +1295,14 @@ a.website:hover .favicon { .content > header, .content > footer { - color: var(--template-font-color-grey-light); + color: var(--frss-font-color-grey-light); font-size: .9rem; } .content > footer { margin: 2rem 0 2rem; padding-top: 1rem; - border-top: 2px solid var(--template-border-color); + border-top: 2px solid var(--frss-border-color); clear: both; } @@ -1375,8 +1375,8 @@ br { top: 1em; right: 25%; left: 25%; z-index: 9999; - background-color: var(--template-background-color); - border: 1px solid var(--template-border-color); + background-color: var(--frss-background-color); + border: 1px solid var(--frss-border-color); opacity: 1; line-height: 2; visibility: visible; @@ -1396,7 +1396,7 @@ br { } .notification a.close:hover { - background-color: var(--template-darken-background-hover-transparent); + background-color: var(--frss-darken-background-hover-transparent); } .notification a.close:hover .icon { @@ -1426,7 +1426,7 @@ br { width: 100%; height: 100%; overflow: auto; - background-color: var(--template-modal-background-color-transparent); + background-color: var(--frss-modal-background-color-transparent); } #popup-content { @@ -1435,9 +1435,9 @@ br { width: 80%; height: 80%; overflow: hidden; - background-color: var(--template-background-color); + background-color: var(--frss-background-color); border-radius: .25rem; - box-shadow: -3px 3px 5px var(--template-box-shadow-color-transparent); + box-shadow: -3px 3px 5px var(--frss-box-shadow-color-transparent); } .popup-row { @@ -1450,14 +1450,14 @@ br { width: 27px; height: 27px; padding-bottom: 5px; - color: var(--template-font-color-grey-light); + color: var(--frss-font-color-grey-light); font-size: 28px; font-weight: bold; } #popup-close:hover, #popup-close:focus { - color: var(--template-font-color-dark); + color: var(--frss-font-color-dark); text-decoration: none; cursor: pointer; } @@ -1508,12 +1508,12 @@ br { #load_more.loading, #load_more.loading:hover { padding: 10px 20px; - background: var(--template-loading-image) center center no-repeat var(--template-background-color); + background: var(--frss-loading-image) center center no-repeat var(--frss-background-color); font-size: 0; } .loading { - background: var(--template-loading-image) center center no-repeat; + background: var(--frss-loading-image) center center no-repeat; font-size: 0; } @@ -1580,7 +1580,7 @@ br { position: fixed; top: 0; bottom: 0; right: 0; left: 0; - background-color: var(--template-modal-background-color-transparent); + background-color: var(--frss-modal-background-color-transparent); opacity: 0; transition: visibility .3s, opacity .3s; visibility: hidden; @@ -1592,7 +1592,7 @@ br { } #panel { - background-color: var(--template-background-color); + background-color: var(--frss-background-color); display: none; position: fixed; top: 2%; bottom: 2%; @@ -1613,7 +1613,7 @@ br { /*=== Slider */ #slider { - background-color: var(--template-background-color); + background-color: var(--frss-background-color); width: 0; position: fixed; top: 0; bottom: 0; @@ -1624,7 +1624,7 @@ br { #slider.active:target { width: 750px; - box-shadow: 3px 3px 5px var(--template-box-shadow-color-transparent); + box-shadow: 3px 3px 5px var(--frss-box-shadow-color-transparent); } #slider.sliding { @@ -1639,7 +1639,7 @@ br { } #slider.active:target + #close-slider { - background-color: var(--template-modal-background-color-transparent); + background-color: var(--frss-modal-background-color-transparent); font-size: 0; right: 0; z-index: 99; @@ -1672,7 +1672,7 @@ br { display: block; max-width: 640px; height: 320px; - border: 1px solid var(--template-border-color); + border: 1px solid var(--frss-border-color); position: relative; min-width: 260px; margin-bottom: 30px; @@ -1707,7 +1707,7 @@ br { display: none; width: 65px; height: 100%; - color: var(--template-font-color-light); + color: var(--frss-font-color-light); font-family: "Varela Round", sans-serif; font-size: 1000%; position: absolute; @@ -1717,15 +1717,15 @@ br { transition: opacity .2s; text-align: center; line-height: 225%; - background-color: var(--template-background-color-transparent); + background-color: var(--frss-background-color-transparent); text-shadow: 0px 0px 15px rgb(119, 119, 119); } .properties { padding: 5px; - background-color: var(--template-background-color-transparent); + background-color: var(--frss-background-color-transparent); display: none; - border-top: 1px solid var(--template-border-color); + border-top: 1px solid var(--frss-border-color); bottom: 0; right: 0; left: 0; position: absolute; @@ -1772,18 +1772,18 @@ input:checked + .slide-container .properties { } .log-item.log-error { - background-color: var(--template-background-color-error-transparent); + background-color: var(--frss-background-color-error-transparent); } .item.share.error a::after, .category .title.error::before, .item.feed.error .item-title::before { content: " ⚠ "; - color: var(--template-font-color-error); + color: var(--frss-font-color-error); } .feed.item.error.active .item-title::before { - color: var(--template-font-color-light); + color: var(--frss-font-color-light); } .aside .category .title:not([data-unread="0"])::after, @@ -1824,8 +1824,8 @@ input:checked + .slide-container .properties { } .feed.active .item-title:not([data-unread="0"])::after { - color: var(--template-font-color-light); - border: 1px solid var(--template-border-color); + color: var(--frss-font-color-light); + border: 1px solid var(--frss-border-color); font-weight: bold; } @@ -1923,7 +1923,7 @@ input:checked + .slide-container .properties { } .aside:target { - box-shadow: -3px 3px 5px var(--template-box-shadow-color-transparent); + box-shadow: -3px 3px 5px var(--frss-box-shadow-color-transparent); } .aside .toggle_aside, @@ -1933,7 +1933,7 @@ input:checked + .slide-container .properties { display: block; width: 100%; height: 50px; - border-bottom: 1px solid var(--template-border-color); + border-bottom: 1px solid var(--frss-border-color); line-height: 50px; text-align: center; } @@ -1982,7 +1982,7 @@ input:checked + .slide-container .properties { } .dropdown-target:target ~ .dropdown-toggle::after { - background-color: var(--template-background-color); + background-color: var(--frss-background-color); width: 10px; height: 10px; content: ""; @@ -2009,7 +2009,7 @@ input:checked + .slide-container .properties { padding-top: 0; margin-top: 0; overflow: auto; - box-shadow: 3px 0 3px var(--template-box-shadow-color-transparent); + box-shadow: 3px 0 3px var(--frss-box-shadow-color-transparent); } .configure .dropdown-target:target ~ .dropdown-toggle::after { @@ -2040,7 +2040,7 @@ input:checked + .slide-container .properties { .aside:target + .close-aside, .configure .dropdown-target:target ~ .dropdown-close { - background-color: var(--template-modal-background-color-transparent); + background-color: var(--frss-modal-background-color-transparent); display: block; font-size: 0; position: fixed; @@ -2162,7 +2162,7 @@ input:checked + .slide-container .properties { } html, body { - background-color: var(--template-background-color); + background-color: var(--frss-background-color); font-family: Serif; } @@ -2176,7 +2176,7 @@ input:checked + .slide-container .properties { } .flux_content .content a { - color: var(--template-font-color-dark); + color: var(--frss-font-color-dark); } .flux_content .content a::after { @@ -2193,8 +2193,8 @@ input:checked + .slide-container .properties { padding: 1rem; max-width: 1000px; text-align: center; - background-color: var(--template-background-color-middle); - border: 1px solid var(--template-border-color); + background-color: var(--frss-background-color-middle); + border: 1px solid var(--frss-border-color); border-radius: .25rem; } diff --git a/p/themes/base-theme/metadata.json b/p/themes/base-theme/metadata.json index 4d59365a8c9..8ba17b10165 100644 --- a/p/themes/base-theme/metadata.json +++ b/p/themes/base-theme/metadata.json @@ -3,5 +3,5 @@ "author": "Your name", "description": "A wonderful base theme", "version": 0.1, - "files": ["template.css", "base.css"] + "files": ["frss.css", "base.css"] }