├── src ├── icon.png ├── capture.png └── theme.scss ├── .gitignore ├── package.json ├── README.md ├── script.js ├── LICENSE └── theme.css /src/icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/civilblur/youlag/HEAD/src/icon.png -------------------------------------------------------------------------------- /src/capture.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/civilblur/youlag/HEAD/src/capture.png -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Node modules 2 | node_modules/ 3 | 4 | # Logs 5 | npm-debug.log* 6 | 7 | # Build output 8 | /dist 9 | /build 10 | 11 | # .env files 12 | .env 13 | .env.*.local 14 | 15 | # OS-specific files 16 | .DS_Store 17 | Thumbs.db -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "youlag", 3 | "version": "1.0.0", 4 | "description": "

Youlag Theme for FreshRSS", 5 | "main": "script.js", 6 | "dependencies": {}, 7 | "devDependencies": { 8 | "sass": "^1.83.1" 9 | }, 10 | "scripts": { 11 | "test": "echo \"Error: no test specified\" && exit 1", 12 | "build-css": "sass src/theme.scss theme.css --no-source-map --style=compressed", 13 | "watch-css": "sass --watch src/theme.scss theme.css --no-source-map --style=compressed" 14 | }, 15 | "repository": { 16 | "type": "git", 17 | "url": "git+https://github.com/civilblur/youlag.git" 18 | }, 19 | "keywords": [], 20 | "author": "", 21 | "license": "ISC", 22 | "bugs": { 23 | "url": "https://github.com/civilblur/youlag/issues" 24 | }, 25 | "homepage": "https://github.com/civilblur/youlag#readme" 26 | } 27 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 |

2 | youlag icon 3 | 4 | Youlag 5 |
6 | Video extension for FreshRSS 7 |

8 | 9 |
10 | youlag screencapture 11 |
12 | 13 | 14 | ## About 15 | Youlag delivers a video-focused browsing experience for your YouTube RSS feeds in [FreshRSS](https://github.com/FreshRSS/FreshRSS), with a sleek theme and extra features. 16 | 17 | While it also supports regular feeds, this setup is tailored specifically for video content. Feel free and set up a separate instance for your video feeds if needed. 18 | 19 | ## Table of Content 20 | - [Features](#features) 21 | - [Install](#install) 22 | - [Additional Resources](#additional-resources) 23 | - [Contribution](#contribution) 24 | - [Attributions](#attributions) 25 | 26 | ## Features 27 | 28 | - ⭐ **Optimized for Video Viewing** 29 | - Browse your YouTube, Invidious, Piped RSS subscriptions with ease. 30 | - Clean, familiar video platform layout. 31 | - Fullscreen viewing for videos and articles. 32 | - Quickly exit videos with `Esc` key. 33 | - Shortcuts for external viewing: "Invidious", "YouTube", or "YouTube embed view" (for less distraction). 34 | - Dark mode. 35 | - 🖥️ **Desktop & Mobile** 36 | - Reponsive design. 37 | - Redesigned menus for better one-handed navigation. 38 | - Improved readability and legibility across devices. 39 | - 📺 **Features Offered by FreshRSS:** 40 | - Subscribe to YouTube creators without an account. 41 | 42 | ### Planned 43 | - [x] Minimize video, for background playback while browsing. 44 | - [ ] Local video queue, but without autoplay due to CORS limitation. 45 | - [ ] Clickable links in video descriptions. 46 | - [ ] Convert to an actual FreshRSS extension, with options for customizing the view and features. 47 | - [ ] Ability to specify which category to apply the video grid on, with the intention to only affect video feeds. 48 | 49 | ## Install 50 | 51 | 1. Download the [latest release here](https://github.com/civilblur/youlag/releases). 52 | 53 | 1. In FreshRSS, go to `Settings > Configuration > Display` and use these settings: 54 | - **Theme**: "Mapco — By: Thomas Guesnon". 55 | - **Website**: "Icon and name". (Optional) 56 | - **Thumbnail**: "Landscape". 57 | - **Article icons > Top line**: "[X] Summary". (Other "Top line" options are optional) 58 | 59 | 1. Go to `Settings > Extensions` and click the gear (⚙️) icon for each extension: 60 | - **User JS**: Copy the content from `script.js` paste it into the text field, and click "Submit". 61 | - **User CSS**: Copy the content from `theme.css`, paste it into the text field, and click "Submit". 62 | - Enable the extensions. 63 | 64 | > [!NOTE] 65 | > User JS and User CSS extensions now come with FreshRSS by default. 66 | > 67 | > If missing, get them from the [official extensions repository](https://github.com/FreshRSS/Extensions). 68 | 69 | ## Additional Resources 70 | 71 | - "[Invidious Video Feed](https://github.com/Korbak/freshrss-invidious)" FreshRSS extension by Korbak. 72 | - If you prefer to use Invidious instead. 73 | ## Contribution 74 | 75 | 1. Fork and make changes to the `dev` branch. 76 | 1. Install dependencies: `npm i`. 77 | 1. Make styling changes to the SASS file at `src/theme.scss` opposed to the compiled `theme.css` file. 78 | - Run `npm run watch-css` to compile `src/theme.scss` to `theme.css`. 79 | - [Learn more about SASS here](https://sass-lang.com/install/). 80 | 1. For structural and functional changes to the Youlag video modal, edit `script.js` in plain JavaScript. 81 | 82 | 83 | ## Attributions 84 | 85 | - **Icons used/remixed**: [SVG Repo](https://www.svgrepo.com/collection/design-and-development-elements/), [krystonschwarze](https://www.svgrepo.com/author/krystonschwarze/), [phosphor](https://www.svgrepo.com/author/phosphor/), [Solar Icons](https://www.svgrepo.com/svg/529779/playlist), [Dazzle UI](https://www.svgrepo.com/author/Dazzle%20UI/), [n3r4zzurr0/svg-spinners](https://github.com/n3r4zzurr0/svg-spinners). 86 | - **Tools**: [SVGOptimizer](https://jakearchibald.github.io/svgomg/), [b64.io](https://b64.io/). 87 | - **Featured channels on top image:** [Novaspirit Tech](https://www.youtube.com/channel/UCrjKdwxaQMSV_NDywgKXVmw), [Hardware Haven](https://www.youtube.com/channel/UCgdTVe88YVSrOZ9qKumhULQ). 88 | - Edit 2025-02-05: Rest in peace Don (Novaspirit Tech), thank you for your contribution to the community. 89 | 90 | ## License 91 | 92 | GNU General Public License v3.0 93 | -------------------------------------------------------------------------------- /script.js: -------------------------------------------------------------------------------- 1 | let youlagScriptLoaded = false; 2 | let youtubeExtensionInstalled = false; // Parse content differently in case user has the FreshRSS "YouTube Video Feed" extension enabled. 3 | let youtubeId; 4 | let modePip = false; 5 | let modeFullscreen = true; 6 | const modalContainerClassName = `youlag-theater-modal-container`; 7 | const modalContentClassName = `youlag-theater-modal-content`; 8 | const modalCloseIdName = `youlagCloseModal`; 9 | const modalMinimizeIdName = `youlagMinimizeModal`; 10 | const modalToggleFavoriteIdName = `youlagToggleFavorite`; 11 | const modalFavoriteClassName = `youlag-favorited`; 12 | 13 | 14 | function handleActiveRssItem(targetOrEvent) { 15 | // Coordinates the event for extracting the data triggering. 16 | let feedItem; 17 | if (targetOrEvent instanceof Event) { 18 | feedItem = targetOrEvent.target.closest('div[data-feed]'); 19 | } else { 20 | feedItem = targetOrEvent.closest('div[data-feed]'); 21 | } 22 | if (!feedItem) return; 23 | const data = extractFeedItemData(feedItem); 24 | data.feedItemEl = feedItem; 25 | createModalWithData(data); 26 | if (!modePip) { 27 | setModeFullscreen(true); 28 | } 29 | } 30 | 31 | function getVideoIdFromUrl(url) { 32 | // Match video ID without relying on base domain being "youtube"-specific, in order to support invidious and piped links. 33 | const regex = /(?:\/|^)(?:shorts\/|v\/|e(?:mbed)?\/|\S*?[?&]v=|\S*?[?&]id=|v=)([a-zA-Z0-9_-]{11})(?:[\/\?]|$)/; 34 | const match = url.match(regex); 35 | return match ? match[1] : ''; 36 | } 37 | 38 | function getBaseUrl(url) { 39 | try { 40 | const parsedUrl = new URL(url); 41 | return `${parsedUrl.protocol}//${parsedUrl.host}`; 42 | } catch (error) { 43 | console.error('Invalid URL:', error); 44 | return ''; 45 | } 46 | } 47 | 48 | 49 | function extractFeedItemData(feedItem) { 50 | // Extract data from the provided target element. 51 | let extractedVideoUrl = feedItem.querySelector('.item.titleAuthorSummaryDate a[href*="youtube"], .item.titleAuthorSummaryDate a[href*="/watch?v="]')?.href || ''; 52 | if (!extractedVideoUrl) { 53 | // Fallback to see if user has installed the YouTube video feed/Invidious video feed extension, as they create a different DOM structure. 54 | extractedVideoUrl = feedItem.querySelector('.enclosure-content a[href*="youtube"], .enclosure-content a[href*="/watch?v="]'); 55 | youtubeExtensionInstalled = extractedVideoUrl ? true : false; 56 | } 57 | const videoBaseUrl = getBaseUrl(extractedVideoUrl); 58 | youtubeId = extractedVideoUrl ? getVideoIdFromUrl(extractedVideoUrl) : ''; 59 | const youubeUrl = youtubeId ? `https://www.youtube.com/watch?v=${youtubeId}` : ''; 60 | const youtubeEmbedUrl = youtubeId ? `https://www.youtube.com/embed/${youtubeId}` : ''; 61 | const videoEmbedUrl = youtubeId ? `${videoBaseUrl}/embed/${youtubeId}` : ''; 62 | const authorElement = feedItem.querySelector('.flux_header'); 63 | const authorFilterElement = authorElement?.querySelector('.website a.item-element[href*="get=f_"]'); 64 | const invidiousRedirectPrefixUrl = 'https://redirect.invidious.io/watch?v='; 65 | 66 | return { 67 | author: authorElement?.getAttribute('data-article-authors') || '', 68 | author_filter_url: authorFilterElement?.href || '', 69 | favicon: feedItem.querySelector('img.favicon')?.src || '', 70 | favorite_toggle_url: feedItem.querySelector('a.item-element.bookmark')?.href || '', 71 | favorited: !feedItem.querySelector('.bookmark img[src*="non-starred"]'), 72 | thumbnail: feedItem.querySelector('.thumbnail img')?.src || '', 73 | title: feedItem.querySelector('.item-element.title')?.childNodes[0].textContent.trim() || '', 74 | external_link: feedItem.querySelector('.item-element.title')?.href || '', 75 | date: feedItem.querySelector('.flux_content .date')?.textContent.trim() || '', 76 | youtube_embed_url: youtubeEmbedUrl, 77 | video_embed_url: videoEmbedUrl, 78 | video_description: 79 | '
' + 80 | // If video description is found, use it, otherwise fallback to generic description element. 81 | (feedItem.querySelector('.enclosure-description')?.innerHTML.trim() || 82 | feedItem.querySelector('article div.text')?.innerHTML.trim() || '') + 83 | '
', 84 | video_youtube_url: youubeUrl, 85 | video_invidious_redirect_url: `${youtubeId ? invidiousRedirectPrefixUrl + youtubeId : ''}` 86 | }; 87 | } 88 | 89 | function createModalWithData(data) { 90 | // Create custom modal 91 | let modal = document.getElementById('youlagTheaterModal'); 92 | 93 | if (!modal) { 94 | modal = document.createElement('div'); 95 | modal.id = 'youlagTheaterModal'; 96 | modal.innerHTML = `
`; 97 | document.body.appendChild(modal); 98 | } 99 | 100 | // Add content to modal 101 | const container = modal.querySelector(`.${modalContainerClassName}`); 102 | container.innerHTML = ` 103 |
104 | 105 |
106 | 107 | 108 |
109 | 110 |
111 |
112 | 113 |
114 |
115 | 117 |
118 |
119 | 120 | 121 |
122 | 123 |
124 |

${data.title}

125 |
126 | 127 |
128 | 129 | 130 | 131 | 132 |
133 |
134 | ${data.author} 135 |
136 |
${data.date}
137 |
138 |
139 | 140 |
141 | 144 |
145 | 146 | 147 | 🌐Source 148 | 149 | 150 | 151 | 📺Invidious 152 | 153 | 154 |
155 | 156 | ▶️YouTube 157 | 158 | 159 | View embed 160 | 161 |
162 | 163 |
164 | 165 |
166 | 167 |
168 | 169 | 170 | 171 |
172 | ${data.video_description} 173 |
174 | 175 |
176 | 177 |
178 | `; 179 | 180 | 181 | if (!youtubeId) { 182 | // Not a video feed item 183 | modal.classList.add('youlag-modal-feed-item--text'); 184 | let iframeContainer = document.querySelector('.youlag-iframe-container'); 185 | if (iframeContainer) { 186 | document.querySelector('.youlag-iframe-container').remove(); 187 | } 188 | } 189 | 190 | 191 | container.querySelector(`#${modalCloseIdName}`)?.addEventListener('click', closeModal); 192 | container.querySelector(`#${modalMinimizeIdName}`)?.addEventListener('click', togglePipMode); 193 | container.querySelector(`#${modalToggleFavoriteIdName}`)?.addEventListener('click', (e) => { 194 | // Toggle favorites state in background 195 | e.preventDefault(); 196 | toggleFavorite(data.favorite_toggle_url, container, data.feedItemEl); 197 | }); 198 | 199 | // Push a new state to the history, to allow modal close when routing back. 200 | history.pushState({ modalOpen: true }, '', ''); 201 | 202 | // Close theater modal on Esc key 203 | document.addEventListener('keydown', (event) => { 204 | if (event.key === 'Escape') { 205 | closeModal(); 206 | } 207 | }); 208 | 209 | window.addEventListener('popstate', closeModal); 210 | } 211 | 212 | function toggleFavorite(url, container, feedItemEl) { 213 | const favoriteButton = container.querySelector(`#${modalToggleFavoriteIdName}`); 214 | if (!favoriteButton) return; 215 | 216 | fetch(url, { method: 'GET' }) 217 | .then(response => { 218 | if (response.ok) { 219 | // Toggle favorite classes and icons 220 | const currentlyTrue = favoriteButton.classList.contains(`${modalFavoriteClassName}--true`); 221 | const bookmarkIcon = feedItemEl.querySelector('.item-element.bookmark img.icon'); 222 | favoriteButton.classList.remove(`${modalFavoriteClassName}--${currentlyTrue}`); 223 | favoriteButton.classList.add(`${modalFavoriteClassName}--${!currentlyTrue}`); 224 | 225 | if (currentlyTrue) { 226 | feedItemEl.classList.remove('favorite'); 227 | if (bookmarkIcon) { 228 | bookmarkIcon.src = '../themes/Mapco/icons/non-starred.svg'; 229 | } 230 | } else { 231 | feedItemEl.classList.add('favorite'); 232 | if (bookmarkIcon) { 233 | bookmarkIcon.src = '../themes/Mapco/icons/starred.svg'; 234 | } 235 | } 236 | } else { 237 | console.error('Failed to toggle favorite status'); 238 | } 239 | }) 240 | .catch(error => console.error('Error:', error)); 241 | } 242 | 243 | function closeModal() { 244 | const modal = document.getElementById('youlagTheaterModal'); 245 | if (modal) modal.remove(); 246 | if (history.state && history.state.modalOpen) { 247 | history.back(); 248 | } 249 | setModePip(false); 250 | setModeFullscreen(false); 251 | } 252 | 253 | function togglePipMode() { 254 | if (modePip) { 255 | setModePip(false); 256 | setModeFullscreen(true); 257 | } 258 | else { 259 | setModePip(true); 260 | setModeFullscreen(false); 261 | } 262 | } 263 | 264 | function setModePip(state) { 265 | if (state === true) { 266 | document.body.classList.add('youlag-mode--pip'); 267 | modePip = true; 268 | modeFullscreen = false; 269 | } 270 | else if (state === false) { 271 | document.body.classList.remove('youlag-mode--pip'); 272 | modePip = false; 273 | } 274 | } 275 | 276 | function setModeFullscreen(state) { 277 | if (state === true) { 278 | document.body.classList.add('youlag-mode--fullscreen'); 279 | document.body.classList.remove('youlag-mode--pip'); 280 | modeFullscreen = true; 281 | modePip = false; 282 | } 283 | else if (state === false) { 284 | document.body.classList.remove('youlag-mode--fullscreen'); 285 | modeFullscreen = false; 286 | } 287 | } 288 | 289 | function setupClickListener() { 290 | const streamContainer = document.querySelector('#stream'); 291 | 292 | if (streamContainer) { 293 | streamContainer.addEventListener('click', (event) => { 294 | // Prevent activation if clicked element is inside .flux_header li. 295 | // These are the feed item actions buttons. 296 | if (event.target.closest('div[data-feed] .flux_header li.manage')) return; 297 | if (event.target.closest('div[data-feed] .flux_header li.labels')) return; 298 | if (event.target.closest('div[data-feed] .flux_header li.share')) return; 299 | if (event.target.closest('div[data-feed] .flux_header li.link')) return; 300 | if (event.target.closest('div[data-feed] .flux_header .website a[href^="./?get=f_"]')) return; 301 | const target = event.target.closest('div[data-feed]'); 302 | 303 | if (target) { 304 | handleActiveRssItem(event); 305 | collapseBackgroundFeedItem(target); 306 | } 307 | }); 308 | } 309 | } 310 | 311 | function collapseBackgroundFeedItem(target) { 312 | // Workaround: If user has YouTube Video Feed extension installed, prevent it from showing the default embedded 313 | // in favor of Youlag theater view modal. This collapses down the original feed item that activates by FreshRSS clickevent. 314 | 315 | const feedItem = target; 316 | let isActive = feedItem.classList.contains('active') && feedItem.classList.contains('current'); 317 | const iframes = feedItem.querySelectorAll('iframe'); 318 | 319 | if (iframes || youtubeExtensionInstalled) { 320 | iframes.forEach(iframe => { 321 | // Disable iframes to prevent autoplay 322 | const src = iframe.getAttribute('src'); 323 | if (src) { 324 | iframe.setAttribute('data-original', src); 325 | iframe.setAttribute('src', ''); 326 | } 327 | }); 328 | } 329 | 330 | if (isActive) { 331 | // Collapse the feed item 332 | feedItem.classList.remove('active'); 333 | feedItem.classList.remove('current'); 334 | } 335 | } 336 | 337 | function init() { 338 | setupClickListener(); 339 | removeYoulagLoadingState(); 340 | youlagScriptLoaded = true; 341 | } 342 | 343 | function removeYoulagLoadingState() { 344 | // By default, the youlag CSS is set to a loading state. 345 | // This will remove the loading state when the script is ready. 346 | document.body.classList.add('youlag-loaded'); 347 | } 348 | 349 | function initFallback() { 350 | if (document.readyState === 'complete' || document.readyState === 'interactive' || youlagScriptLoaded === true) { 351 | init(); 352 | } else { 353 | document.addEventListener('DOMContentLoaded', init); 354 | window.addEventListener('load', init); 355 | } 356 | } 357 | 358 | // Fallback interval check 359 | const checkInitInterval = setInterval(() => { 360 | if (document.readyState === 'complete' || youlagScriptLoaded === true) { 361 | init(); 362 | clearInterval(checkInitInterval); 363 | } 364 | }, 1000); 365 | 366 | // Ensure init runs 367 | initFallback(); -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | GNU GENERAL PUBLIC LICENSE 2 | Version 3, 29 June 2007 3 | 4 | Copyright (C) 2007 Free Software Foundation, Inc. 5 | Everyone is permitted to copy and distribute verbatim copies 6 | of this license document, but changing it is not allowed. 7 | 8 | Preamble 9 | 10 | The GNU General Public License is a free, copyleft license for 11 | software and other kinds of works. 12 | 13 | The licenses for most software and other practical works are designed 14 | to take away your freedom to share and change the works. By contrast, 15 | the GNU General Public License is intended to guarantee your freedom to 16 | share and change all versions of a program--to make sure it remains free 17 | software for all its users. We, the Free Software Foundation, use the 18 | GNU General Public License for most of our software; it applies also to 19 | any other work released this way by its authors. You can apply it to 20 | your programs, too. 21 | 22 | When we speak of free software, we are referring to freedom, not 23 | price. Our General Public Licenses are designed to make sure that you 24 | have the freedom to distribute copies of free software (and charge for 25 | them if you wish), that you receive source code or can get it if you 26 | want it, that you can change the software or use pieces of it in new 27 | free programs, and that you know you can do these things. 28 | 29 | To protect your rights, we need to prevent others from denying you 30 | these rights or asking you to surrender the rights. Therefore, you have 31 | certain responsibilities if you distribute copies of the software, or if 32 | you modify it: responsibilities to respect the freedom of others. 33 | 34 | For example, if you distribute copies of such a program, whether 35 | gratis or for a fee, you must pass on to the recipients the same 36 | freedoms that you received. You must make sure that they, too, receive 37 | or can get the source code. And you must show them these terms so they 38 | know their rights. 39 | 40 | Developers that use the GNU GPL protect your rights with two steps: 41 | (1) assert copyright on the software, and (2) offer you this License 42 | giving you legal permission to copy, distribute and/or modify it. 43 | 44 | For the developers' and authors' protection, the GPL clearly explains 45 | that there is no warranty for this free software. For both users' and 46 | authors' sake, the GPL requires that modified versions be marked as 47 | changed, so that their problems will not be attributed erroneously to 48 | authors of previous versions. 49 | 50 | Some devices are designed to deny users access to install or run 51 | modified versions of the software inside them, although the manufacturer 52 | can do so. This is fundamentally incompatible with the aim of 53 | protecting users' freedom to change the software. The systematic 54 | pattern of such abuse occurs in the area of products for individuals to 55 | use, which is precisely where it is most unacceptable. Therefore, we 56 | have designed this version of the GPL to prohibit the practice for those 57 | products. If such problems arise substantially in other domains, we 58 | stand ready to extend this provision to those domains in future versions 59 | of the GPL, as needed to protect the freedom of users. 60 | 61 | Finally, every program is threatened constantly by software patents. 62 | States should not allow patents to restrict development and use of 63 | software on general-purpose computers, but in those that do, we wish to 64 | avoid the special danger that patents applied to a free program could 65 | make it effectively proprietary. To prevent this, the GPL assures that 66 | patents cannot be used to render the program non-free. 67 | 68 | The precise terms and conditions for copying, distribution and 69 | modification follow. 70 | 71 | TERMS AND CONDITIONS 72 | 73 | 0. Definitions. 74 | 75 | "This License" refers to version 3 of the GNU General Public License. 76 | 77 | "Copyright" also means copyright-like laws that apply to other kinds of 78 | works, such as semiconductor masks. 79 | 80 | "The Program" refers to any copyrightable work licensed under this 81 | License. Each licensee is addressed as "you". "Licensees" and 82 | "recipients" may be individuals or organizations. 83 | 84 | To "modify" a work means to copy from or adapt all or part of the work 85 | in a fashion requiring copyright permission, other than the making of an 86 | exact copy. The resulting work is called a "modified version" of the 87 | earlier work or a work "based on" the earlier work. 88 | 89 | A "covered work" means either the unmodified Program or a work based 90 | on the Program. 91 | 92 | To "propagate" a work means to do anything with it that, without 93 | permission, would make you directly or secondarily liable for 94 | infringement under applicable copyright law, except executing it on a 95 | computer or modifying a private copy. Propagation includes copying, 96 | distribution (with or without modification), making available to the 97 | public, and in some countries other activities as well. 98 | 99 | To "convey" a work means any kind of propagation that enables other 100 | parties to make or receive copies. Mere interaction with a user through 101 | a computer network, with no transfer of a copy, is not conveying. 102 | 103 | An interactive user interface displays "Appropriate Legal Notices" 104 | to the extent that it includes a convenient and prominently visible 105 | feature that (1) displays an appropriate copyright notice, and (2) 106 | tells the user that there is no warranty for the work (except to the 107 | extent that warranties are provided), that licensees may convey the 108 | work under this License, and how to view a copy of this License. If 109 | the interface presents a list of user commands or options, such as a 110 | menu, a prominent item in the list meets this criterion. 111 | 112 | 1. Source Code. 113 | 114 | The "source code" for a work means the preferred form of the work 115 | for making modifications to it. "Object code" means any non-source 116 | form of a work. 117 | 118 | A "Standard Interface" means an interface that either is an official 119 | standard defined by a recognized standards body, or, in the case of 120 | interfaces specified for a particular programming language, one that 121 | is widely used among developers working in that language. 122 | 123 | The "System Libraries" of an executable work include anything, other 124 | than the work as a whole, that (a) is included in the normal form of 125 | packaging a Major Component, but which is not part of that Major 126 | Component, and (b) serves only to enable use of the work with that 127 | Major Component, or to implement a Standard Interface for which an 128 | implementation is available to the public in source code form. A 129 | "Major Component", in this context, means a major essential component 130 | (kernel, window system, and so on) of the specific operating system 131 | (if any) on which the executable work runs, or a compiler used to 132 | produce the work, or an object code interpreter used to run it. 133 | 134 | The "Corresponding Source" for a work in object code form means all 135 | the source code needed to generate, install, and (for an executable 136 | work) run the object code and to modify the work, including scripts to 137 | control those activities. However, it does not include the work's 138 | System Libraries, or general-purpose tools or generally available free 139 | programs which are used unmodified in performing those activities but 140 | which are not part of the work. For example, Corresponding Source 141 | includes interface definition files associated with source files for 142 | the work, and the source code for shared libraries and dynamically 143 | linked subprograms that the work is specifically designed to require, 144 | such as by intimate data communication or control flow between those 145 | subprograms and other parts of the work. 146 | 147 | The Corresponding Source need not include anything that users 148 | can regenerate automatically from other parts of the Corresponding 149 | Source. 150 | 151 | The Corresponding Source for a work in source code form is that 152 | same work. 153 | 154 | 2. Basic Permissions. 155 | 156 | All rights granted under this License are granted for the term of 157 | copyright on the Program, and are irrevocable provided the stated 158 | conditions are met. This License explicitly affirms your unlimited 159 | permission to run the unmodified Program. The output from running a 160 | covered work is covered by this License only if the output, given its 161 | content, constitutes a covered work. This License acknowledges your 162 | rights of fair use or other equivalent, as provided by copyright law. 163 | 164 | You may make, run and propagate covered works that you do not 165 | convey, without conditions so long as your license otherwise remains 166 | in force. You may convey covered works to others for the sole purpose 167 | of having them make modifications exclusively for you, or provide you 168 | with facilities for running those works, provided that you comply with 169 | the terms of this License in conveying all material for which you do 170 | not control copyright. Those thus making or running the covered works 171 | for you must do so exclusively on your behalf, under your direction 172 | and control, on terms that prohibit them from making any copies of 173 | your copyrighted material outside their relationship with you. 174 | 175 | Conveying under any other circumstances is permitted solely under 176 | the conditions stated below. Sublicensing is not allowed; section 10 177 | makes it unnecessary. 178 | 179 | 3. Protecting Users' Legal Rights From Anti-Circumvention Law. 180 | 181 | No covered work shall be deemed part of an effective technological 182 | measure under any applicable law fulfilling obligations under article 183 | 11 of the WIPO copyright treaty adopted on 20 December 1996, or 184 | similar laws prohibiting or restricting circumvention of such 185 | measures. 186 | 187 | When you convey a covered work, you waive any legal power to forbid 188 | circumvention of technological measures to the extent such circumvention 189 | is effected by exercising rights under this License with respect to 190 | the covered work, and you disclaim any intention to limit operation or 191 | modification of the work as a means of enforcing, against the work's 192 | users, your or third parties' legal rights to forbid circumvention of 193 | technological measures. 194 | 195 | 4. Conveying Verbatim Copies. 196 | 197 | You may convey verbatim copies of the Program's source code as you 198 | receive it, in any medium, provided that you conspicuously and 199 | appropriately publish on each copy an appropriate copyright notice; 200 | keep intact all notices stating that this License and any 201 | non-permissive terms added in accord with section 7 apply to the code; 202 | keep intact all notices of the absence of any warranty; and give all 203 | recipients a copy of this License along with the Program. 204 | 205 | You may charge any price or no price for each copy that you convey, 206 | and you may offer support or warranty protection for a fee. 207 | 208 | 5. Conveying Modified Source Versions. 209 | 210 | You may convey a work based on the Program, or the modifications to 211 | produce it from the Program, in the form of source code under the 212 | terms of section 4, provided that you also meet all of these conditions: 213 | 214 | a) The work must carry prominent notices stating that you modified 215 | it, and giving a relevant date. 216 | 217 | b) The work must carry prominent notices stating that it is 218 | released under this License and any conditions added under section 219 | 7. This requirement modifies the requirement in section 4 to 220 | "keep intact all notices". 221 | 222 | c) You must license the entire work, as a whole, under this 223 | License to anyone who comes into possession of a copy. This 224 | License will therefore apply, along with any applicable section 7 225 | additional terms, to the whole of the work, and all its parts, 226 | regardless of how they are packaged. This License gives no 227 | permission to license the work in any other way, but it does not 228 | invalidate such permission if you have separately received it. 229 | 230 | d) If the work has interactive user interfaces, each must display 231 | Appropriate Legal Notices; however, if the Program has interactive 232 | interfaces that do not display Appropriate Legal Notices, your 233 | work need not make them do so. 234 | 235 | A compilation of a covered work with other separate and independent 236 | works, which are not by their nature extensions of the covered work, 237 | and which are not combined with it such as to form a larger program, 238 | in or on a volume of a storage or distribution medium, is called an 239 | "aggregate" if the compilation and its resulting copyright are not 240 | used to limit the access or legal rights of the compilation's users 241 | beyond what the individual works permit. Inclusion of a covered work 242 | in an aggregate does not cause this License to apply to the other 243 | parts of the aggregate. 244 | 245 | 6. Conveying Non-Source Forms. 246 | 247 | You may convey a covered work in object code form under the terms 248 | of sections 4 and 5, provided that you also convey the 249 | machine-readable Corresponding Source under the terms of this License, 250 | in one of these ways: 251 | 252 | a) Convey the object code in, or embodied in, a physical product 253 | (including a physical distribution medium), accompanied by the 254 | Corresponding Source fixed on a durable physical medium 255 | customarily used for software interchange. 256 | 257 | b) Convey the object code in, or embodied in, a physical product 258 | (including a physical distribution medium), accompanied by a 259 | written offer, valid for at least three years and valid for as 260 | long as you offer spare parts or customer support for that product 261 | model, to give anyone who possesses the object code either (1) a 262 | copy of the Corresponding Source for all the software in the 263 | product that is covered by this License, on a durable physical 264 | medium customarily used for software interchange, for a price no 265 | more than your reasonable cost of physically performing this 266 | conveying of source, or (2) access to copy the 267 | Corresponding Source from a network server at no charge. 268 | 269 | c) Convey individual copies of the object code with a copy of the 270 | written offer to provide the Corresponding Source. This 271 | alternative is allowed only occasionally and noncommercially, and 272 | only if you received the object code with such an offer, in accord 273 | with subsection 6b. 274 | 275 | d) Convey the object code by offering access from a designated 276 | place (gratis or for a charge), and offer equivalent access to the 277 | Corresponding Source in the same way through the same place at no 278 | further charge. You need not require recipients to copy the 279 | Corresponding Source along with the object code. If the place to 280 | copy the object code is a network server, the Corresponding Source 281 | may be on a different server (operated by you or a third party) 282 | that supports equivalent copying facilities, provided you maintain 283 | clear directions next to the object code saying where to find the 284 | Corresponding Source. Regardless of what server hosts the 285 | Corresponding Source, you remain obligated to ensure that it is 286 | available for as long as needed to satisfy these requirements. 287 | 288 | e) Convey the object code using peer-to-peer transmission, provided 289 | you inform other peers where the object code and Corresponding 290 | Source of the work are being offered to the general public at no 291 | charge under subsection 6d. 292 | 293 | A separable portion of the object code, whose source code is excluded 294 | from the Corresponding Source as a System Library, need not be 295 | included in conveying the object code work. 296 | 297 | A "User Product" is either (1) a "consumer product", which means any 298 | tangible personal property which is normally used for personal, family, 299 | or household purposes, or (2) anything designed or sold for incorporation 300 | into a dwelling. In determining whether a product is a consumer product, 301 | doubtful cases shall be resolved in favor of coverage. For a particular 302 | product received by a particular user, "normally used" refers to a 303 | typical or common use of that class of product, regardless of the status 304 | of the particular user or of the way in which the particular user 305 | actually uses, or expects or is expected to use, the product. A product 306 | is a consumer product regardless of whether the product has substantial 307 | commercial, industrial or non-consumer uses, unless such uses represent 308 | the only significant mode of use of the product. 309 | 310 | "Installation Information" for a User Product means any methods, 311 | procedures, authorization keys, or other information required to install 312 | and execute modified versions of a covered work in that User Product from 313 | a modified version of its Corresponding Source. The information must 314 | suffice to ensure that the continued functioning of the modified object 315 | code is in no case prevented or interfered with solely because 316 | modification has been made. 317 | 318 | If you convey an object code work under this section in, or with, or 319 | specifically for use in, a User Product, and the conveying occurs as 320 | part of a transaction in which the right of possession and use of the 321 | User Product is transferred to the recipient in perpetuity or for a 322 | fixed term (regardless of how the transaction is characterized), the 323 | Corresponding Source conveyed under this section must be accompanied 324 | by the Installation Information. But this requirement does not apply 325 | if neither you nor any third party retains the ability to install 326 | modified object code on the User Product (for example, the work has 327 | been installed in ROM). 328 | 329 | The requirement to provide Installation Information does not include a 330 | requirement to continue to provide support service, warranty, or updates 331 | for a work that has been modified or installed by the recipient, or for 332 | the User Product in which it has been modified or installed. Access to a 333 | network may be denied when the modification itself materially and 334 | adversely affects the operation of the network or violates the rules and 335 | protocols for communication across the network. 336 | 337 | Corresponding Source conveyed, and Installation Information provided, 338 | in accord with this section must be in a format that is publicly 339 | documented (and with an implementation available to the public in 340 | source code form), and must require no special password or key for 341 | unpacking, reading or copying. 342 | 343 | 7. Additional Terms. 344 | 345 | "Additional permissions" are terms that supplement the terms of this 346 | License by making exceptions from one or more of its conditions. 347 | Additional permissions that are applicable to the entire Program shall 348 | be treated as though they were included in this License, to the extent 349 | that they are valid under applicable law. If additional permissions 350 | apply only to part of the Program, that part may be used separately 351 | under those permissions, but the entire Program remains governed by 352 | this License without regard to the additional permissions. 353 | 354 | When you convey a copy of a covered work, you may at your option 355 | remove any additional permissions from that copy, or from any part of 356 | it. (Additional permissions may be written to require their own 357 | removal in certain cases when you modify the work.) You may place 358 | additional permissions on material, added by you to a covered work, 359 | for which you have or can give appropriate copyright permission. 360 | 361 | Notwithstanding any other provision of this License, for material you 362 | add to a covered work, you may (if authorized by the copyright holders of 363 | that material) supplement the terms of this License with terms: 364 | 365 | a) Disclaiming warranty or limiting liability differently from the 366 | terms of sections 15 and 16 of this License; or 367 | 368 | b) Requiring preservation of specified reasonable legal notices or 369 | author attributions in that material or in the Appropriate Legal 370 | Notices displayed by works containing it; or 371 | 372 | c) Prohibiting misrepresentation of the origin of that material, or 373 | requiring that modified versions of such material be marked in 374 | reasonable ways as different from the original version; or 375 | 376 | d) Limiting the use for publicity purposes of names of licensors or 377 | authors of the material; or 378 | 379 | e) Declining to grant rights under trademark law for use of some 380 | trade names, trademarks, or service marks; or 381 | 382 | f) Requiring indemnification of licensors and authors of that 383 | material by anyone who conveys the material (or modified versions of 384 | it) with contractual assumptions of liability to the recipient, for 385 | any liability that these contractual assumptions directly impose on 386 | those licensors and authors. 387 | 388 | All other non-permissive additional terms are considered "further 389 | restrictions" within the meaning of section 10. If the Program as you 390 | received it, or any part of it, contains a notice stating that it is 391 | governed by this License along with a term that is a further 392 | restriction, you may remove that term. If a license document contains 393 | a further restriction but permits relicensing or conveying under this 394 | License, you may add to a covered work material governed by the terms 395 | of that license document, provided that the further restriction does 396 | not survive such relicensing or conveying. 397 | 398 | If you add terms to a covered work in accord with this section, you 399 | must place, in the relevant source files, a statement of the 400 | additional terms that apply to those files, or a notice indicating 401 | where to find the applicable terms. 402 | 403 | Additional terms, permissive or non-permissive, may be stated in the 404 | form of a separately written license, or stated as exceptions; 405 | the above requirements apply either way. 406 | 407 | 8. Termination. 408 | 409 | You may not propagate or modify a covered work except as expressly 410 | provided under this License. Any attempt otherwise to propagate or 411 | modify it is void, and will automatically terminate your rights under 412 | this License (including any patent licenses granted under the third 413 | paragraph of section 11). 414 | 415 | However, if you cease all violation of this License, then your 416 | license from a particular copyright holder is reinstated (a) 417 | provisionally, unless and until the copyright holder explicitly and 418 | finally terminates your license, and (b) permanently, if the copyright 419 | holder fails to notify you of the violation by some reasonable means 420 | prior to 60 days after the cessation. 421 | 422 | Moreover, your license from a particular copyright holder is 423 | reinstated permanently if the copyright holder notifies you of the 424 | violation by some reasonable means, this is the first time you have 425 | received notice of violation of this License (for any work) from that 426 | copyright holder, and you cure the violation prior to 30 days after 427 | your receipt of the notice. 428 | 429 | Termination of your rights under this section does not terminate the 430 | licenses of parties who have received copies or rights from you under 431 | this License. If your rights have been terminated and not permanently 432 | reinstated, you do not qualify to receive new licenses for the same 433 | material under section 10. 434 | 435 | 9. Acceptance Not Required for Having Copies. 436 | 437 | You are not required to accept this License in order to receive or 438 | run a copy of the Program. Ancillary propagation of a covered work 439 | occurring solely as a consequence of using peer-to-peer transmission 440 | to receive a copy likewise does not require acceptance. However, 441 | nothing other than this License grants you permission to propagate or 442 | modify any covered work. These actions infringe copyright if you do 443 | not accept this License. Therefore, by modifying or propagating a 444 | covered work, you indicate your acceptance of this License to do so. 445 | 446 | 10. Automatic Licensing of Downstream Recipients. 447 | 448 | Each time you convey a covered work, the recipient automatically 449 | receives a license from the original licensors, to run, modify and 450 | propagate that work, subject to this License. You are not responsible 451 | for enforcing compliance by third parties with this License. 452 | 453 | An "entity transaction" is a transaction transferring control of an 454 | organization, or substantially all assets of one, or subdividing an 455 | organization, or merging organizations. If propagation of a covered 456 | work results from an entity transaction, each party to that 457 | transaction who receives a copy of the work also receives whatever 458 | licenses to the work the party's predecessor in interest had or could 459 | give under the previous paragraph, plus a right to possession of the 460 | Corresponding Source of the work from the predecessor in interest, if 461 | the predecessor has it or can get it with reasonable efforts. 462 | 463 | You may not impose any further restrictions on the exercise of the 464 | rights granted or affirmed under this License. For example, you may 465 | not impose a license fee, royalty, or other charge for exercise of 466 | rights granted under this License, and you may not initiate litigation 467 | (including a cross-claim or counterclaim in a lawsuit) alleging that 468 | any patent claim is infringed by making, using, selling, offering for 469 | sale, or importing the Program or any portion of it. 470 | 471 | 11. Patents. 472 | 473 | A "contributor" is a copyright holder who authorizes use under this 474 | License of the Program or a work on which the Program is based. The 475 | work thus licensed is called the contributor's "contributor version". 476 | 477 | A contributor's "essential patent claims" are all patent claims 478 | owned or controlled by the contributor, whether already acquired or 479 | hereafter acquired, that would be infringed by some manner, permitted 480 | by this License, of making, using, or selling its contributor version, 481 | but do not include claims that would be infringed only as a 482 | consequence of further modification of the contributor version. For 483 | purposes of this definition, "control" includes the right to grant 484 | patent sublicenses in a manner consistent with the requirements of 485 | this License. 486 | 487 | Each contributor grants you a non-exclusive, worldwide, royalty-free 488 | patent license under the contributor's essential patent claims, to 489 | make, use, sell, offer for sale, import and otherwise run, modify and 490 | propagate the contents of its contributor version. 491 | 492 | In the following three paragraphs, a "patent license" is any express 493 | agreement or commitment, however denominated, not to enforce a patent 494 | (such as an express permission to practice a patent or covenant not to 495 | sue for patent infringement). To "grant" such a patent license to a 496 | party means to make such an agreement or commitment not to enforce a 497 | patent against the party. 498 | 499 | If you convey a covered work, knowingly relying on a patent license, 500 | and the Corresponding Source of the work is not available for anyone 501 | to copy, free of charge and under the terms of this License, through a 502 | publicly available network server or other readily accessible means, 503 | then you must either (1) cause the Corresponding Source to be so 504 | available, or (2) arrange to deprive yourself of the benefit of the 505 | patent license for this particular work, or (3) arrange, in a manner 506 | consistent with the requirements of this License, to extend the patent 507 | license to downstream recipients. "Knowingly relying" means you have 508 | actual knowledge that, but for the patent license, your conveying the 509 | covered work in a country, or your recipient's use of the covered work 510 | in a country, would infringe one or more identifiable patents in that 511 | country that you have reason to believe are valid. 512 | 513 | If, pursuant to or in connection with a single transaction or 514 | arrangement, you convey, or propagate by procuring conveyance of, a 515 | covered work, and grant a patent license to some of the parties 516 | receiving the covered work authorizing them to use, propagate, modify 517 | or convey a specific copy of the covered work, then the patent license 518 | you grant is automatically extended to all recipients of the covered 519 | work and works based on it. 520 | 521 | A patent license is "discriminatory" if it does not include within 522 | the scope of its coverage, prohibits the exercise of, or is 523 | conditioned on the non-exercise of one or more of the rights that are 524 | specifically granted under this License. You may not convey a covered 525 | work if you are a party to an arrangement with a third party that is 526 | in the business of distributing software, under which you make payment 527 | to the third party based on the extent of your activity of conveying 528 | the work, and under which the third party grants, to any of the 529 | parties who would receive the covered work from you, a discriminatory 530 | patent license (a) in connection with copies of the covered work 531 | conveyed by you (or copies made from those copies), or (b) primarily 532 | for and in connection with specific products or compilations that 533 | contain the covered work, unless you entered into that arrangement, 534 | or that patent license was granted, prior to 28 March 2007. 535 | 536 | Nothing in this License shall be construed as excluding or limiting 537 | any implied license or other defenses to infringement that may 538 | otherwise be available to you under applicable patent law. 539 | 540 | 12. No Surrender of Others' Freedom. 541 | 542 | If conditions are imposed on you (whether by court order, agreement or 543 | otherwise) that contradict the conditions of this License, they do not 544 | excuse you from the conditions of this License. If you cannot convey a 545 | covered work so as to satisfy simultaneously your obligations under this 546 | License and any other pertinent obligations, then as a consequence you may 547 | not convey it at all. For example, if you agree to terms that obligate you 548 | to collect a royalty for further conveying from those to whom you convey 549 | the Program, the only way you could satisfy both those terms and this 550 | License would be to refrain entirely from conveying the Program. 551 | 552 | 13. Use with the GNU Affero General Public License. 553 | 554 | Notwithstanding any other provision of this License, you have 555 | permission to link or combine any covered work with a work licensed 556 | under version 3 of the GNU Affero General Public License into a single 557 | combined work, and to convey the resulting work. The terms of this 558 | License will continue to apply to the part which is the covered work, 559 | but the special requirements of the GNU Affero General Public License, 560 | section 13, concerning interaction through a network will apply to the 561 | combination as such. 562 | 563 | 14. Revised Versions of this License. 564 | 565 | The Free Software Foundation may publish revised and/or new versions of 566 | the GNU General Public License from time to time. Such new versions will 567 | be similar in spirit to the present version, but may differ in detail to 568 | address new problems or concerns. 569 | 570 | Each version is given a distinguishing version number. If the 571 | Program specifies that a certain numbered version of the GNU General 572 | Public License "or any later version" applies to it, you have the 573 | option of following the terms and conditions either of that numbered 574 | version or of any later version published by the Free Software 575 | Foundation. If the Program does not specify a version number of the 576 | GNU General Public License, you may choose any version ever published 577 | by the Free Software Foundation. 578 | 579 | If the Program specifies that a proxy can decide which future 580 | versions of the GNU General Public License can be used, that proxy's 581 | public statement of acceptance of a version permanently authorizes you 582 | to choose that version for the Program. 583 | 584 | Later license versions may give you additional or different 585 | permissions. However, no additional obligations are imposed on any 586 | author or copyright holder as a result of your choosing to follow a 587 | later version. 588 | 589 | 15. Disclaimer of Warranty. 590 | 591 | THERE IS NO WARRANTY FOR THE PROGRAM, TO THE EXTENT PERMITTED BY 592 | APPLICABLE LAW. EXCEPT WHEN OTHERWISE STATED IN WRITING THE COPYRIGHT 593 | HOLDERS AND/OR OTHER PARTIES PROVIDE THE PROGRAM "AS IS" WITHOUT WARRANTY 594 | OF ANY KIND, EITHER EXPRESSED OR IMPLIED, INCLUDING, BUT NOT LIMITED TO, 595 | THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR 596 | PURPOSE. THE ENTIRE RISK AS TO THE QUALITY AND PERFORMANCE OF THE PROGRAM 597 | IS WITH YOU. SHOULD THE PROGRAM PROVE DEFECTIVE, YOU ASSUME THE COST OF 598 | ALL NECESSARY SERVICING, REPAIR OR CORRECTION. 599 | 600 | 16. Limitation of Liability. 601 | 602 | IN NO EVENT UNLESS REQUIRED BY APPLICABLE LAW OR AGREED TO IN WRITING 603 | WILL ANY COPYRIGHT HOLDER, OR ANY OTHER PARTY WHO MODIFIES AND/OR CONVEYS 604 | THE PROGRAM AS PERMITTED ABOVE, BE LIABLE TO YOU FOR DAMAGES, INCLUDING ANY 605 | GENERAL, SPECIAL, INCIDENTAL OR CONSEQUENTIAL DAMAGES ARISING OUT OF THE 606 | USE OR INABILITY TO USE THE PROGRAM (INCLUDING BUT NOT LIMITED TO LOSS OF 607 | DATA OR DATA BEING RENDERED INACCURATE OR LOSSES SUSTAINED BY YOU OR THIRD 608 | PARTIES OR A FAILURE OF THE PROGRAM TO OPERATE WITH ANY OTHER PROGRAMS), 609 | EVEN IF SUCH HOLDER OR OTHER PARTY HAS BEEN ADVISED OF THE POSSIBILITY OF 610 | SUCH DAMAGES. 611 | 612 | 17. Interpretation of Sections 15 and 16. 613 | 614 | If the disclaimer of warranty and limitation of liability provided 615 | above cannot be given local legal effect according to their terms, 616 | reviewing courts shall apply local law that most closely approximates 617 | an absolute waiver of all civil liability in connection with the 618 | Program, unless a warranty or assumption of liability accompanies a 619 | copy of the Program in return for a fee. 620 | 621 | END OF TERMS AND CONDITIONS 622 | 623 | How to Apply These Terms to Your New Programs 624 | 625 | If you develop a new program, and you want it to be of the greatest 626 | possible use to the public, the best way to achieve this is to make it 627 | free software which everyone can redistribute and change under these terms. 628 | 629 | To do so, attach the following notices to the program. It is safest 630 | to attach them to the start of each source file to most effectively 631 | state the exclusion of warranty; and each file should have at least 632 | the "copyright" line and a pointer to where the full notice is found. 633 | 634 | 635 | Copyright (C) 636 | 637 | This program is free software: you can redistribute it and/or modify 638 | it under the terms of the GNU General Public License as published by 639 | the Free Software Foundation, either version 3 of the License, or 640 | (at your option) any later version. 641 | 642 | This program is distributed in the hope that it will be useful, 643 | but WITHOUT ANY WARRANTY; without even the implied warranty of 644 | MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the 645 | GNU General Public License for more details. 646 | 647 | You should have received a copy of the GNU General Public License 648 | along with this program. If not, see . 649 | 650 | Also add information on how to contact you by electronic and paper mail. 651 | 652 | If the program does terminal interaction, make it output a short 653 | notice like this when it starts in an interactive mode: 654 | 655 | Copyright (C) 656 | This program comes with ABSOLUTELY NO WARRANTY; for details type `show w'. 657 | This is free software, and you are welcome to redistribute it 658 | under certain conditions; type `show c' for details. 659 | 660 | The hypothetical commands `show w' and `show c' should show the appropriate 661 | parts of the General Public License. Of course, your program's commands 662 | might be different; for a GUI interface, you would use an "about box". 663 | 664 | You should also get your employer (if you work as a programmer) or school, 665 | if any, to sign a "copyright disclaimer" for the program, if necessary. 666 | For more information on this, and how to apply and follow the GNU GPL, see 667 | . 668 | 669 | The GNU General Public License does not permit incorporating your program 670 | into proprietary programs. If your program is a subroutine library, you 671 | may consider it more useful to permit linking proprietary applications with 672 | the library. If this is what you want to do, use the GNU Lesser General 673 | Public License instead of this License. But first, please read 674 | . 675 | -------------------------------------------------------------------------------- /theme.css: -------------------------------------------------------------------------------- 1 | :root{--yl-space-3xs: clamp(0.3125rem, 0.3125rem + 0vw, 0.3125rem);--yl-space-2xs: clamp(0.5625rem, 0.5408rem + 0.1087vw, 0.625rem);--yl-space-xs: clamp(0.875rem, 0.8533rem + 0.1087vw, 0.9375rem);--yl-space-sm: clamp(1.125rem, 1.0815rem + 0.2174vw, 1.25rem);--yl-space-md: clamp(1.6875rem, 1.6223rem + 0.3261vw, 1.875rem);--yl-space-lg: clamp(2.25rem, 2.163rem + 0.4348vw, 2.5rem);--yl-space-xl: clamp(3.375rem, 3.2446rem + 0.6522vw, 3.75rem);--yl-space-2xl: clamp(4.5rem, 4.3261rem + 0.8696vw, 5rem);--yl-space-3xl: clamp(6.75rem, 6.4891rem + 1.3043vw, 7.5rem);--yl-p-3xs: var(--yl-space-3xs);--yl-p-2xs: var(--yl-space-2xs);--yl-p-xs: var(--yl-space-xs);--yl-p-sm: var(--yl-space-sm);--yl-p-md: var(--yl-space-md);--yl-p-lg: var(--yl-space-lg);--yl-p-xl: var(--yl-space-xl);--yl-p-2xl: var(--yl-space-2xl);--yl-p-3xl: var(--yl-space-3xl);--yl-m-3xs: var(--yl-space-3xs);--yl-m-2xs: var(--yl-space-2xs);--yl-m-xs: var(--yl-space-xs);--yl-m-sm: var(--yl-space-sm);--yl-m-md: var(--yl-space-md);--yl-m-lg: var(--yl-space-lg);--yl-m-xl: var(--yl-space-xl);--yl-m-2xl: var(--yl-space-2xl);--yl-m-3xl: var(--yl-space-3xl);--yl-text-2xs: clamp(0.7813rem, 0.7747rem + 0.0326vw, 0.8rem);--yl-text-xs: clamp(0.9375rem, 0.9158rem + 0.1087vw, 1rem);--yl-text-sm: clamp(1.125rem, 1.0815rem + 0.2174vw, 1.25rem);--yl-text-md: clamp(1.35rem, 1.2761rem + 0.3696vw, 1.5625rem);--yl-text-lg: clamp(1.62rem, 1.5041rem + 0.5793vw, 1.9531rem);--yl-text-xl: clamp(1.944rem, 1.771rem + 0.8651vw, 2.4414rem);--yl-text-2xl: clamp(2.3328rem, 2.0827rem + 1.2504vw, 3.0518rem);--yl-text-3xl: clamp(2.7994rem, 2.4462rem + 1.7658vw, 3.8147rem);--favicon-avatar-size: 34px;--favicon-avatar-size-margin: 6px;--feed-day-title-font-size: 2.3rem;--video-pip-width: min(500px, 60%)}@media(max-width: 840px){:root{--favicon-avatar-size: 42px}}@keyframes pulse{0%,100%{filter:brightness(1)}50%{filter:brightness(0.6)}}.yl-flex{display:flex}.yl-flex-col{flex-direction:column}.yt-items-center{align-items:center}.yt-flex-1{flex:1}.yl-gap-3xs{gap:var(--yl-space-3xs)}.yl-mb-md{margin-bottom:var(--yl-m-md)}.w-100{width:100%}body:not(.reader) main#stream{display:grid;grid-template-columns:repeat(3, minmax(150px, 1fr));gap:4px;padding:1.5rem}@media(max-width: 840px){body:not(.reader) main#stream{grid-template-columns:minmax(200px, 1fr)}}@media(min-width: 600px){body:not(.reader) main#stream{grid-template-columns:repeat(2, minmax(200px, 1fr))}}@media(max-width: 600px){body:not(.reader) main#stream{grid-row-gap:2rem}}@media(min-width: 1144px){body:not(.reader) main#stream{grid-template-columns:repeat(2, minmax(200px, 1fr))}}@media(min-width: 1360px){body:not(.reader) main#stream{grid-template-columns:repeat(3, minmax(240px, 1fr))}}@media(min-width: 1800px){body:not(.reader) main#stream{grid-template-columns:repeat(4, minmax(200px, 1fr))}}@media(max-width: 840px){body{padding-top:61px}}nav.aside.aside_feed{text-align:unset}nav.aside.aside_feed .stick.configure-feeds{position:relative}nav.aside.aside_feed .stick.configure-feeds:before{content:"Manage feeds";position:absolute;top:50%;left:69px;transform:translateY(-50%);z-index:1;font-weight:normal;pointer-events:none}nav.aside.aside_feed .stick.configure-feeds:after{content:"";position:absolute;top:50%;left:21px;transform:translateY(-50%);z-index:1;filter:invert(1);width:20px;height:20px;pointer-events:none;background-repeat:no-repeat;background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbDpzcGFjZT0icHJlc2VydmUiIHZpZXdCb3g9IjAgMCA0OTAgNDkwIj48cGF0aCBkPSJNNDY4LjIgNDg5LjVIMjAuOEM5LjQgNDg5LjUgMCA0ODAuMSAwIDQ2OC43VjIxLjNDMCA5LjkgOS40LjUgMjAuOC41aDQ0OC40QzQ4MC42LjUgNDkwIDkuOSA0OTAgMjEuM3Y0NDguNGMtMSAxMC40LTEwLjQgMTkuOC0yMS44IDE5Ljh6TTQwLjYgNDQ4LjloNDA3LjhWNDEuMUg0MC42djQwNy44eiIvPjxwYXRoIGQ9Ik0yNjAuMSA0MTkuOGMtMTEuNCAwLTIwLjgtOS40LTIwLjgtMjAuOCAwLTc3LTYyLjQtMTM5LjQtMTM5LjQtMTM5LjQtMTEuNCAwLTIwLjgtOS40LTIwLjgtMjAuOFM4OC41IDIxOCA5OS45IDIxOGM5OS45IDAgMTgxIDgxLjEgMTgxIDE4MSAwIDExLjQtOS40IDIwLjgtMjAuOCAyMC44eiIvPjxwYXRoIGQ9Ik0zNDcuNSA0MTkuOGMtMTEuNCAwLTIwLjgtOS40LTIwLjgtMjAuOCAwLTEyNC44LTEwMi0yMjcuOC0yMjcuOC0yMjcuOC0xMS40IDAtMjAuOC05LjQtMjAuOC0yMC44czkuNC0yMC44IDIwLjgtMjAuOGMxNDcuNyAwIDI2OC40IDEyMC43IDI2OC40IDI2OC40IDEgMTIuNC04LjQgMjEuOC0xOS44IDIxLjh6TTE3My43IDQxOS44Yy0xMS40IDAtMjAuOC05LjQtMjAuOC0yMC44IDAtMjkuMS0yMy45LTUzLjEtNTMuMS01My4xLTExLjQgMC0yMC44LTkuNC0yMC44LTIwLjhzOS40LTIwLjggMjAuOC0yMC44YzUyIDAgOTQuNyA0Mi43IDk0LjcgOTQuNyAwIDExLjQtOS4zIDIwLjgtMjAuOCAyMC44eiIvPjwvc3ZnPg==)}nav.aside.aside_feed .stick.configure-feeds #btn-subscription,nav.aside.aside_feed .stick.configure-feeds #btn-add{transition:0s}nav.aside.aside_feed .stick.configure-feeds #btn-subscription:hover,nav.aside.aside_feed .stick.configure-feeds #btn-subscription:hover~#btn-add,nav.aside.aside_feed .stick.configure-feeds #btn-add:hover{background-color:#303136}nav.aside.aside_feed .stick.configure-feeds #btn-add{border-top-right-radius:8px;border-bottom-right-radius:8px}nav.aside.aside_feed .stick.configure-feeds #btn-add:before{content:"";width:calc(100% - 68px);height:100%;background:#303136;left:8px;position:absolute;border-top-left-radius:8px;border-bottom-left-radius:8px;pointer-events:none;opacity:0;transition:0s}nav.aside.aside_feed .stick.configure-feeds #btn-add:hover{background-color:#424348}nav.aside.aside_feed .stick.configure-feeds #btn-add:hover:before{opacity:1}nav.aside.aside_feed .stick.configure-feeds #btn-subscription{font-size:0;flex:1;height:52px;margin-left:8px;border-top-left-radius:8px;border-bottom-left-radius:8px}nav.aside.aside_feed .stick.configure-feeds #btn-subscription,nav.aside.aside_feed .stick.configure-feeds #btn-add{text-transform:capitalize;font-weight:normal;display:flex;align-items:center;background:none;box-sizing:border-box}nav.aside.aside_feed .stick.configure-feeds #btn-add{font-size:1rem;border-top-right-radius:8px;border-bottom-right-radius:8px;background:none;border:none;width:60px;display:flex;justify-content:center;align-items:center}nav.aside.aside_feed .stick.configure-feeds #btn-add .icon{filter:brightness(3);height:1.5rem}nav.aside.aside_feed .stick.configure-feeds #btn-add:hover{background-color:#424348}nav.aside.aside_feed #mark-read-aside ul#sidebar .tree-folder.category .tree-folder-title .title{font-weight:normal}nav.aside.aside_feed #mark-read-aside ul#sidebar>li.tree-folder ul.tree-folder-items li.item.feed>.dropdown{margin-right:0}nav.aside.aside_feed #mark-read-aside ul#sidebar .tree-folder.category.all .tree-folder-title .title{font-size:0}nav.aside.aside_feed #mark-read-aside ul#sidebar .tree-folder.category.all .tree-folder-title .title:before{content:"Subscriptions"}nav.aside.aside_feed #mark-read-aside ul#sidebar .tree-folder.category.all .icon{opacity:0;pointer-events:none}nav.aside.aside_feed #mark-read-aside ul#sidebar .tree-folder.category.all .tree-folder-title:before{content:"";width:20px;height:20px;position:absolute;filter:invert(1);pointer-events:none;background-repeat:no-repeat;background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA4MDAgODAwIj48cGF0aCBkPSJNNzY2LjE5Ni43MzVIMzMuOTY2QzE1LjM1LjczNSAwIDE2LjA4NSAwIDM0Ljd2NjAxLjQyN2MwIDE4LjYxNiAxNS4zNSAzMy45NjcgMzMuOTY2IDMzLjk2N2g3MzAuNDMzYzE4LjYxNiAwIDMzLjk2Ni0xNS4zNTEgMzUuNTk5LTMyLjMzNFYzNC43MDFDODAwLjE2MiAxNi4wODUgNzg0LjgxMi43MzUgNzY2LjE5Ni43MzVabS0zMy45NjYgNjAzLjA2SDY2LjNWNjcuMDM0aDY2NS45M3Y1MzYuNzYxWk03NjYuMTk2IDczMS4zMzJIMzMuOTY2QzE1LjM1IDczMS4zMzIgMCA3NDYuNjgyIDAgNzY1LjI5OHMxNS4zNSAzMy45NjYgMzMuOTY2IDMzLjk2Nmg3MzAuNDMzYzE4LjYxNiAwIDM1LjU5OS0xNS4zNSAzNS41OTktMzMuOTY2LjE2NC0xOC43OC0xNS4xODYtMzMuOTY2LTMzLjgwMi0zMy45NjZaIi8+PHBhdGggZD0iTTUxNi40MDggMzA4LjIwOCAzNDYuNjEyIDE5NC40MTJjLTIyLjIwNC0xNC41My01MC45MzkgMi4xMjMtNTAuOTM5IDI3LjEwMnYyMjcuNTkyYzAgMjYuMjg2IDI4LjczNSA0MS40NjkgNTAuOTM5IDI3LjEwMmwxNjkuNzk2LTExMy43OTZjMTUuMTg0LTguMTYzIDI0LjY1My0zNi4yNDUgMC01NC4yMDRabS0xNTQuNjEyIDc4LjA0MVYyODQuMzcxbDc2LjQwOCA1MC45MzktNzYuNDA4IDUwLjkzOVoiLz48L3N2Zz4=)}nav.aside.aside_feed #mark-read-aside ul#sidebar .tree-folder.category.important .tree-folder-title .title{font-size:0}nav.aside.aside_feed #mark-read-aside ul#sidebar .tree-folder.category.important .tree-folder-title .title:before{content:"Important"}nav.aside.aside_feed #mark-read-aside ul#sidebar .tree-folder.category.important .icon{opacity:0;pointer-events:none}nav.aside.aside_feed #mark-read-aside ul#sidebar .tree-folder.category.important .tree-folder-title:before{content:"";width:20px;height:20px;position:absolute;filter:invert(1);background-repeat:no-repeat;background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbDpzcGFjZT0icHJlc2VydmUiIHZpZXdCb3g9IjAgMCA0ODcuNzcgNDg3Ljc3Ij48cGF0aCBkPSJNNDg2LjIgMjEwLjI2Yy02LjMtMTguOC0yNi4xLTIxLjktNDQuOC0yNS0xOS44LTMuMS00Mi43LTYuMy01OS40LTI0LTc2LjEtODMuNC0xNDEuOC0xMDEuMS0xODMuNS0xMDIuMS0xNy43LS41LTM0LjYgMi4yLTUwLjMgNy44LTMuOC0zNy40LTM1LjUtNjYuOC03My45LTY2LjhDMzMuMy4xNiAwIDMzLjQ2IDAgNzQuNDZjMCAzOC44IDI5LjggNzAuNyA2Ny43IDc0LTUuNiAxNS44LTguMyAzMi42LTcuOCA1MC40IDEgNDEuNyAxOS44IDEwNi4zIDEwMi4yIDE4My41IDE3LjcgMTYuNyAyMC45IDM5LjYgMjQgNTkuNCAzLjEgMTguOCA2IDM5LjUgMjUgNDQuOCAyMC4xIDUuNiA0Ny0xMSA5NC01NC41IDE3LjEgMTYuMyA0MC4yIDI1LjkgNjQuMyAyNS45IDUxLjIgMCA5Mi45LTQxLjcgOTIuOS05Mi45IDAtMjQuNi05LjgtNDgtMjYuOC02NS4zIDQ5LjUtNTQgNTYuMS03MS43IDUwLjctODkuNXpNNDAuOSA3NC40NmMwLTE4LjQgMTQuOS0zMy4zIDMzLjMtMzMuM3MzMy4zIDE0LjkgMzMuMyAzMy4zLTE0LjkgMzMuMy0zMy4zIDMzLjMtMzMuMy0xNC45LTMzLjMtMzMuM3ptMzI4LjQgMzQyLjVjLTEzIDAtMjUuMi00LjgtMzQuNi0xMy4xIDExLjEtMTEuMSA2My02NS4xIDcyLjQtNzQuMyA4LjkgOS41IDE0LjEgMjIuMiAxNC4xIDM1LjUgMCAyOC42LTIzLjMgNTEuOS01MS45IDUxLjl6bS0xNDIuNyAyNy45YzAtMy4xLTkuNC02NS43LTM3LjUtOTEuNy01Ny4zLTUzLjItODcuNi0xMDYuMy04OC42LTE1NC4zIDAtMjguMSAxOC42LTEwMC4yIDk4LTk5IDQ4IC43IDEwMS4xIDMxLjMgMTU0LjMgODguNiAyNi4xIDI4LjEgODguNiAzNy41IDkxLjcgMzcuNS0xNC43IDI2LjgtMTkyIDIwNC42LTIxNy45IDIxOC45eiIvPjwvc3ZnPg==)}nav.aside.aside_feed #mark-read-aside ul#sidebar .tree-folder.category.favorites .icon{opacity:0;pointer-events:none}nav.aside.aside_feed #mark-read-aside ul#sidebar .tree-folder.category.favorites .tree-folder-title:before{content:"";width:20px;height:20px;position:absolute;filter:invert(1);pointer-events:none;background-repeat:no-repeat;background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGZpbGw9Im5vbmUiIHZpZXdCb3g9IjAgMCAyNCAyNCI+PGcgY2xpcC1wYXRoPSJ1cmwoI2EpIj48cGF0aCBzdHJva2U9IiMwMDAiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgc3Ryb2tlLXdpZHRoPSIyIiBkPSJNMTEuMDkxIDIuNjM1Yy4yODgtLjY0Ny40MzItLjk3LjYzMy0xLjA3YS42MjEuNjIxIDAgMCAxIC41NTIgMGMuMjAxLjEuMzQ1LjQyMy42MzMgMS4wN2wyLjI5NCA1LjE1Yy4wODUuMTkyLjEyOC4yODcuMTk0LjM2LjA1OC4wNjUuMTMuMTE3LjIwOS4xNTMuMDkuMDQuMTk0LjA1LjQwMi4wNzNsNS42MDMuNTkyYy43MDMuMDc0IDEuMDU1LjExMSAxLjIxMi4yNzEuMTM2LjE0LjE5OS4zMzQuMTcuNTI3LS4wMzIuMjIxLS4yOTUuNDU4LS44Mi45MzJsLTQuMTg2IDMuNzc2Yy0uMTU1LjE0LS4yMzMuMjEtLjI4Mi4yOTVhLjYyNC42MjQgMCAwIDAtLjA4LjI0NmMtLjAxLjA5OC4wMTEuMi4wNTUuNDA1bDEuMTY5IDUuNTE3Yy4xNDcuNjkzLjIyIDEuMDQuMTE2IDEuMjM4YS42MjIuNjIyIDAgMCAxLS40NDcuMzI1Yy0uMjIuMDM3LS41MjctLjE0LTEuMTQtLjQ5M2wtNC44OC0yLjgxOGMtLjE4Mi0uMTA1LS4yNzItLjE1Ny0uMzY5LS4xNzdhLjYyMi42MjIgMCAwIDAtLjI1OCAwYy0uMDk3LjAyLS4xODcuMDcyLS4zNjguMTc3bC00Ljg4MSAyLjgxOGMtLjYxMy4zNTQtLjkyLjUzLTEuMTQuNDkzYS42MjIuNjIyIDAgMCAxLS40NDctLjMyNWMtLjEwNC0uMTk5LS4wMy0uNTQ1LjExNi0xLjIzOGwxLjE3LTUuNTE3Yy4wNDMtLjIwNC4wNjQtLjMwNy4wNTQtLjQwNWEuNjI0LjYyNCAwIDAgMC0uMDgtLjI0NmMtLjA0OS0uMDg1LS4xMjctLjE1NS0uMjgyLS4yOTVsLTQuMTg1LTMuNzc2Yy0uNTI2LS40NzQtLjc4OS0uNzEtLjgyMS0uOTMyYS42MjMuNjIzIDAgMCAxIC4xNy0uNTI3Yy4xNTctLjE2LjUwOS0uMTk3IDEuMjEyLS4yNzFsNS42MDQtLjU5MmMuMjA4LS4wMjIuMzEyLS4wMzMuNDAxLS4wNzNhLjYyMi42MjIgMCAwIDAgLjIxLS4xNTJjLjA2NS0uMDc0LjEwOC0uMTcuMTkzLS4zNmwyLjI5NC01LjE1MVoiLz48L2c+PGRlZnM+PGNsaXBQYXRoIGlkPSJhIj48cGF0aCBkPSJNMCAwaDI0djI0SDB6Ii8+PC9jbGlwUGF0aD48L2RlZnM+PC9zdmc+)}nav.aside.aside_feed #mark-read-aside ul#sidebar #tags{display:list-item !important}nav.aside.aside_feed #mark-read-aside ul#sidebar #tags .tree-folder-title .title{font-size:0}nav.aside.aside_feed #mark-read-aside ul#sidebar #tags .tree-folder-title .title:before{content:"Playlists"}nav.aside.aside_feed #mark-read-aside ul#sidebar #tags button.dropdown-toggle .icon{opacity:0}nav.aside.aside_feed #mark-read-aside ul#sidebar #tags>.tree-folder-items .item.feed .item-title .icon{display:none}nav.aside.aside_feed #mark-read-aside ul#sidebar #tags .tree-folder-title:before{content:"";width:20px;height:20px;position:absolute;filter:invert(1);background-repeat:no-repeat;background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGZpbGw9Im5vbmUiIHZpZXdCb3g9IjAgMCA4MDAgODAwIj48cGF0aCBmaWxsPSIjMDAwIiBkPSJNMCA5MC41QTM3LjUgMzcuNSAwIDAgMSAzNy41IDUzaDcyNUEzNy40OTcgMzcuNDk3IDAgMCAxIDgwMCA5MC41YTM3LjUgMzcuNSAwIDAgMS0zNy41IDM3LjVoLTcyNUEzNy40OTggMzcuNDk4IDAgMCAxIDAgOTAuNVpNMzcuNSAzMjhoNzI1YTM3LjQ5NiAzNy40OTYgMCAwIDAgMjYuNTE2LTEwLjk4NCAzNy40OTYgMzcuNDk2IDAgMCAwIDAtNTMuMDMzQTM3LjUgMzcuNSAwIDAgMCA3NjIuNSAyNTNoLTcyNUEzNy41MDIgMzcuNTAyIDAgMCAwIDAgMjkwLjUgMzcuNDk3IDM3LjQ5NyAwIDAgMCAzNy41IDMyOFptMjQ0IDEyNWgtMjQ0QTM3LjUwMiAzNy41MDIgMCAwIDAgMCA0OTAuNSAzNy40OTcgMzcuNDk3IDAgMCAwIDM3LjUgNTI4aDI0NGEzNy41IDM3LjUgMCAwIDAgMC03NVpNMzcuNSA2NTNoMjQ0YTM3LjUgMzcuNSAwIDAgMSAwIDc1aC0yNDRhMzcuNDk5IDM3LjQ5OSAwIDAgMSAwLTc1WiIvPjxwYXRoIHN0cm9rZT0iIzAwMCIgc3Ryb2tlLXdpZHRoPSI2NSIgZD0iTTYzNi44MzMgNDY5Ljg4YzgwLjExOCA0Ni4zNTggMTIwLjE4MSA2OS41MzQgMTI2LjA2MiAxMDIuOTc0YTcyLjkzNyA3Mi45MzcgMCAwIDEgMCAyNS4yOTNjLTUuODgxIDMzLjQzOS00NS45NDQgNTYuNjE1LTEyNi4wNjIgMTAyLjk3My04MC4xMTcgNDYuMzUzLTEyMC4xODEgNjkuNTI5LTE1Mi4wMTggNTcuOTE2YTcyLjU2NiA3Mi41NjYgMCAwIDEtMjEuODU4LTEyLjY0NkM0MzcgNzI0LjU2MyA0MzcgNjc4LjIxIDQzNyA1ODUuNWMwLTkyLjcxIDAtMTM5LjA2MyAyNS45NTctMTYwLjg5YTcyLjY3IDcyLjY3IDAgMCAxIDIxLjg1OC0xMi42NDZjMzEuODM3LTExLjYxMyA3MS45MDEgMTEuNTY0IDE1Mi4wMTggNTcuOTE2WiIvPjwvc3ZnPg==)}nav.aside.aside_feed .stick.configure-feeds:before,nav.aside.aside_feed .tree-folder.category.all .tree-folder-title .title:before,nav.aside.aside_feed .tree-folder.category.important .tree-folder-title .title:before,nav.aside.aside_feed .tree-folder.category.favorites .tree-folder-title .title:before,nav.aside.aside_feed #tags .tree-folder-title .title:before,nav.aside.aside_feed .tree-folder.category .tree-folder-title .title{font-size:1.2rem;letter-spacing:1px;font-weight:normal}nav.aside.aside_feed .stick.configure-feeds{position:sticky;top:20px;z-index:10;width:292px}@media(max-width: 840px){nav.aside.aside_feed .stick.configure-feeds{width:calc(100% - 8px)}}nav.aside.aside_feed #mark-read-aside{top:72px}#aside_feed .item.nav-section a[href="./?c=tag"]{font-size:0}#aside_feed .item.nav-section a[href="./?c=tag"]:before{content:"Playlist management";font-size:1.2rem}main.post:has(#add_tag)>h1:first-of-type{font-size:0}main.post:has(#add_tag)>h1:first-of-type:before{content:"Playlist management";font-size:2rem}main.post:has(#add_tag)>h2:first-of-type{font-size:0}main.post:has(#add_tag)>h2:first-of-type:before{content:"Create a playlist";font-size:1.5rem}@media(max-width: 840px){.header{position:fixed;top:0;left:0;z-index:50}.header:has(.configure .dropdown-target:target){z-index:110}.header .configure .dropdown .dropdown-menu{left:0 !important}#slider .btn.toggle_aside{max-width:49px;margin:0;padding:.85rem 1.25rem;background:#303136;border:none}#slider .btn.toggle_aside:hover{background-color:#424348}.aside:target~aside#slider a.toggle_aside{opacity:0;pointer-events:none;transition:opacity 0s}.aside~aside#slider a.toggle_aside{transition:opacity .3s}body:not(.normal) #aside_feed.nav.nav-list.aside{padding-top:0}}.header{min-height:61px;box-sizing:border-box}.header .item.title{position:relative;text-align:unset;padding-left:5px;min-height:61px;box-sizing:border-box}.header .item.title>a{align-content:center}@media(max-width: 840px){.header .item.title{display:flex;justify-content:center;position:absolute;width:100%}}.header .item.search input{width:600px;padding:.8rem 1.6rem;border-top-left-radius:99px;border-bottom-left-radius:99px}.header .item.search input:focus,.header .item.search input:hover{background-color:#26272a;color:#fff}.header .item.search input:focus~.btn,.header .item.search input:hover~.btn{background-color:#57575a}.header .item.search .btn{border-top-right-radius:99px;border-bottom-right-radius:99px;width:75px}.header .item.search .btn:hover{background-color:#57575a}.header .item.configure .btn{width:46px;height:46px;display:flex;align-items:center;justify-content:center;background:#26272a;border-radius:50%;padding:0;box-sizing:border-box}.header .item.configure .btn:hover{background-color:#57575a}.header .item.configure .btn>img{width:18px;height:18px}@media(max-width: 840px){header.header .item.configure{display:flex;align-items:center;height:50px;justify-content:flex-end;padding-right:14px}header.header .item.configure .btn{width:40px;height:40px}#global .nav_menu a.btn[href="#aside_feed"]{position:fixed;top:0;left:0;min-height:61px;box-sizing:border-box;border-radius:0;z-index:60}#global .nav_menu a.btn[href="#aside_feed"] .icon{display:none}#global .nav_menu a.btn[href="#aside_feed"]:after{content:"";display:block;width:14px;height:36px;background-image:url("../themes/Mapco/icons/view-normal.svg");background-size:contain;background-position:center;background-repeat:no-repeat;filter:brightness(3)}#global .nav_menu .item.configure .btn{width:40px;height:40px}}main#stream #stream-footer,#overlay #panel #stream-footer{grid-column:1/-1;border-top:none;margin-top:3rem}main#stream #stream-footer .stream-footer-inner,#overlay #panel #stream-footer .stream-footer-inner{font-size:0;display:flex;flex-direction:column}main#stream #stream-footer .stream-footer-inner:before,#overlay #panel #stream-footer .stream-footer-inner:before{content:"(╯°□°)╯︵ ┻━┻";font-size:2.4rem;margin-bottom:2rem;opacity:.75}main#stream #stream-footer .stream-footer-inner:after,#overlay #panel #stream-footer .stream-footer-inner:after{content:"You've reached the end";font-size:1.4rem;order:-1;margin-bottom:.5rem;opacity:.75}main#stream #stream-footer button#bigMarkAsRead,#overlay #panel #stream-footer button#bigMarkAsRead{border-radius:12px;margin-top:4rem;padding-left:8px;padding-right:8px;padding-top:1rem;padding-bottom:2rem;margin-bottom:0;max-width:600px;margin-left:auto;margin-right:auto}#load_more.loading,#load_more.loading:hover{border-radius:8px}.nav_menu{padding:2rem 1rem 0 1rem;box-sizing:border-box}.nav_menu #nav_menu_actions{flex-wrap:wrap}.nav_menu #mark-read-menu{align-items:center}.nav_menu #mark-read-menu .read_all.btn{width:100%;height:100%}main#stream .day{grid-column:1/-1;font-size:var(--feed-day-title-font-size);opacity:.8;padding:0 8px;line-height:1.2;margin-top:8rem;margin-bottom:2rem}main#stream .day .date,main#stream .day .name{display:none}main#stream .day#day_before_yesterday{font-size:0 !important}main#stream .day#day_before_yesterday:before{content:"Past";font-size:var(--feed-day-title-font-size)}main#stream #new-article+.day{margin-top:2rem}main#stream #new-article+#day_before_yesterday{visibility:hidden;margin-bottom:0;pointer-events:none;user-select:none}main#stream .flux:has(li.item.labels .item-element.dropdown .dropdown-target:target){z-index:20}a.signout img.icon{display:none}body:not(.reader) main#stream div.flux{display:flex;flex-direction:column;align-items:center;border-radius:12px;margin-bottom:auto}body:not(.reader) main#stream div.flux:not(.active):hover{background-color:rgba(0,0,0,.06)}body:not(.reader) main#stream div.flux:not(.not_read),body:not(.reader) main#stream div.flux.favorite:not(.current),body:not(.reader) main#stream div.flux:not(.current):hover .item .title{background:unset;background-color:unset}body:not(.reader) main#stream div.flux .flux_header{border-radius:12px;display:flex;flex-direction:row;flex-wrap:wrap;height:100%;max-width:100%;padding:8px;box-sizing:border-box;border:none;background:unset}body:not(.reader) main#stream div.flux .flux_header:hover,body:not(.reader) main#stream div.flux .flux_header:hover:not(.current):hover .item .title{background-color:unset;background:unset}body:not(.reader) main#stream div.flux .flux_header:before{content:attr(data-article-authors);position:absolute;top:0;left:0;z-index:0;width:calc(100% - 24px);height:0;padding-top:16%;padding-bottom:calc(40.2% - 12px);padding-left:20px;font-size:min(1.7rem,5vw);color:#fff;box-sizing:border-box;overflow:hidden;background:linear-gradient(to right, #5c8dff, #4cffdd);background-clip:border-box;background-clip:border-box;-webkit-background-clip:text;-webkit-text-fill-color:rgba(0,0,0,0)}body:not(.reader) main#stream div.flux .flux_header .item.titleAuthorSummaryDate{display:flex;flex-direction:column;width:100%;margin:4px 0}@media(min-width: 600px){body:not(.reader) main#stream div.flux .flux_header .item.titleAuthorSummaryDate{height:105px}}body:not(.reader) main#stream div.flux .flux_header .item.titleAuthorSummaryDate a.item-element.title.multiline{display:flex;flex-direction:column;padding:0;position:static;padding-left:2px;padding-right:2px;min-width:unset;font-size:1.2rem;white-space:normal;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:4;line-clamp:4;overflow:hidden}body:not(.reader) main#stream div.flux .flux_header .item.titleAuthorSummaryDate a.item-element.title.multiline .author{padding:0;display:block;margin-top:4px;font-size:1rem;line-height:1.2;color:hsla(0,0%,100%,.59)}body:not(.reader) main#stream div.flux .flux_header .item.titleAuthorSummaryDate span.item-element.date{padding:0;position:static;text-align:left;margin-top:4px;padding-left:2px;padding-right:2px;display:flex;width:100%;font-size:1rem}body:not(.reader) main#stream div.flux .flux_header .item.thumbnail{position:relative;order:-1;width:100%;height:auto;aspect-ratio:16/9;flex:0 0 100%;box-sizing:border-box;margin-bottom:4px;padding:0;overflow:hidden}body:not(.reader) main#stream div.flux .flux_header .item.thumbnail img{position:relative;width:100%;height:auto;border-radius:12px;background:#303136;aspect-ratio:16/9;object-fit:cover;object-position:center;z-index:1}body:not(.reader) main#stream div.flux .flux_header .item.thumbnail:before{content:"";width:100%;position:absolute;top:0;left:0;padding-top:56.25%;background-color:#303136;background-image:linear-gradient(45deg, #121417, #17253f);border-radius:12px;z-index:0}body:not(.reader) main#stream div.flux.active.current .flux_header{position:sticky;top:-4px;left:0;background-color:var(--frss-background-color, white);z-index:1;padding:12px;margin-top:-4px;border-bottom-left-radius:2px;border-bottom-right-radius:2px;pointer-events:none}body:not(.reader) main#stream div.flux.active.current .flux_header .item a,body:not(.reader) main#stream div.flux.active.current .flux_header .item .dropdown-close,body:not(.reader) main#stream div.flux.active.current .flux_header .item .dropdown-menu{pointer-events:all}body:not(.reader) main#stream div.flux.active.current .flux_header .item .dropdown-menu{z-index:1100}body:not(.reader) main#stream div.flux.active.current .flux_header .item .dropdown-menu li.item.share{min-width:100%;margin:0}body:not(.reader) main#stream div.flux.active.current .flux_header .item.titleAuthorSummaryDate{display:flex;flex-direction:column;flex-wrap:wrap;order:-1;min-width:unset;flex:0 0 100%;margin-bottom:6px;z-index:10;height:auto}body:not(.reader) main#stream div.flux.active.current .flux_header .item.titleAuthorSummaryDate a{max-width:calc(100% - 50px);pointer-events:none}body:not(.reader) main#stream div.flux.active.current .flux_header .item.titleAuthorSummaryDate .item-element.date{display:none}body:not(.reader) main#stream div.flux.active.current .flux_header li.item.website{display:none}body:not(.reader) main#stream div.flux.active.current .flux_header li.item.thumbnail{display:none}body:not(.reader) main#stream div.flux.active.current article{display:flex;flex-direction:column;background-color:hsl(0,0%,9%)}body:not(.reader) main#stream div.flux li.item.share:has(.dropdown-target:target),body:not(.reader) main#stream div.flux li.item.labels:has(.dropdown-target:target){z-index:15}body:not(.reader) main#stream div.flux li.item.share .item-element.dropdown,body:not(.reader) main#stream div.flux li.item.labels .item-element.dropdown{display:flex;width:100%;height:100%;padding:0}body:not(.reader) main#stream div.flux li.item.share .item-element.dropdown a.dropdown-toggle,body:not(.reader) main#stream div.flux li.item.labels .item-element.dropdown a.dropdown-toggle{width:100%;display:inline-flex;margin:0;padding:0;height:100%;border-radius:999px;justify-content:center;align-items:center;gap:4px}body:not(.reader) main#stream div.flux .flux_header .summary{display:none}body:not(.reader) main#stream div.flux .flux_header li.item.manage a,body:not(.reader) main#stream div.flux .flux_header li.item.website.icon a,body:not(.reader) main#stream div.flux .flux_header li.item.link a,body:not(.reader) main#stream div.flux .flux_header li.item.labels a,body:not(.reader) main#stream div.flux .flux_header li.item.share>a{display:flex;align-items:center;justify-content:center;height:100%;box-sizing:border-box}body:not(.reader) main#stream div.flux .flux_header li.item.website.full a,body:not(.reader) main#stream div.flux .flux_header li.item.website.name a{color:#fff;padding:0}body:not(.reader) main#stream div.flux .flux_header li.item.manage,body:not(.reader) main#stream div.flux .flux_header li.item.website.icon,body:not(.reader) main#stream div.flux .flux_header li.item.website.full,body:not(.reader) main#stream div.flux .flux_header li.item.link,body:not(.reader) main#stream div.flux .flux_header li.item.labels,body:not(.reader) main#stream div.flux .flux_header li.item.share{flex:1;background-color:unset;display:inline-flex;height:auto;justify-content:center;border-radius:999px;margin:0 2px;padding:0;z-index:10;transition:background-color .1s;order:2;min-height:34px}body:not(.reader) main#stream div.flux .flux_header li.item.manage li.item.share,body:not(.reader) main#stream div.flux .flux_header li.item.website.icon li.item.share,body:not(.reader) main#stream div.flux .flux_header li.item.website.full li.item.share,body:not(.reader) main#stream div.flux .flux_header li.item.link li.item.share,body:not(.reader) main#stream div.flux .flux_header li.item.labels li.item.share,body:not(.reader) main#stream div.flux .flux_header li.item.share li.item.share{width:100%}body:not(.reader) main#stream div.flux .flux_header li.item.manage a,body:not(.reader) main#stream div.flux .flux_header li.item.website.icon a,body:not(.reader) main#stream div.flux .flux_header li.item.website.full a,body:not(.reader) main#stream div.flux .flux_header li.item.link a,body:not(.reader) main#stream div.flux .flux_header li.item.labels a,body:not(.reader) main#stream div.flux .flux_header li.item.share a{padding:4px 6px;text-align:center;width:100%}body:not(.reader) main#stream div.flux .flux_header li.item.manage:nth-child(2),body:not(.reader) main#stream div.flux .flux_header li.item.website.icon:nth-child(2),body:not(.reader) main#stream div.flux .flux_header li.item.website.full:nth-child(2),body:not(.reader) main#stream div.flux .flux_header li.item.link:nth-child(2),body:not(.reader) main#stream div.flux .flux_header li.item.labels:nth-child(2),body:not(.reader) main#stream div.flux .flux_header li.item.share:nth-child(2){order:1}body:not(.reader) main#stream div.flux .flux_header li.item.manage:hover,body:not(.reader) main#stream div.flux .flux_header li.item.website.icon:hover,body:not(.reader) main#stream div.flux .flux_header li.item.website.full:hover,body:not(.reader) main#stream div.flux .flux_header li.item.link:hover,body:not(.reader) main#stream div.flux .flux_header li.item.labels:hover,body:not(.reader) main#stream div.flux .flux_header li.item.share:hover{background-color:hsla(0,0%,100%,.08)}body:not(.reader) main#stream div.flux .flux_header li.item.labels .dropdown-header{display:flex;font-size:0}body:not(.reader) main#stream div.flux .flux_header li.item.labels .dropdown-header:before{content:"Playlists";letter-spacing:1px;text-transform:uppercase;font-size:1rem}body:not(.reader) main#stream div.flux .flux_header li.item.labels .dropdown-header a[href="./?c=tag"]{margin-left:8px;font-size:1rem;visibility:visible;width:unset}body:not(.reader) main#stream div.flux .flux_header li.item.labels .item-element.dropdown:not(:has(.dropdown-target:target)) a.dropdown-close{display:none}body:not(.reader) main#stream div.flux .flux_header li.item.manage:hover,body:not(.reader) main#stream div.flux .flux_header li.item.website.icon:hover,body:not(.reader) main#stream div.flux .flux_header li.item.link:hover,body:not(.reader) main#stream div.flux .flux_header li.item.labels:hover,body:not(.reader) main#stream div.flux .flux_header li.item.share:hover{background-color:hsla(0,0%,100%,.08)}body:not(.reader) main#stream div.flux .flux_header:not(.active) li.item.manage a,body:not(.reader) main#stream div.flux .flux_header:not(.active) li.item.website.icon a,body:not(.reader) main#stream div.flux .flux_header:not(.active) li.item.link a,body:not(.reader) main#stream div.flux .flux_header:not(.active) li.item.labels a,body:not(.reader) main#stream div.flux .flux_header:not(.active) li.item.share a{visibility:hidden;background-color:unset}body:not(.reader) main#stream div.flux .flux_header:not(.active):hover li.item.manage a,body:not(.reader) main#stream div.flux .flux_header:not(.active):hover li.item.website.icon a,body:not(.reader) main#stream div.flux .flux_header:not(.active):hover li.item.link a,body:not(.reader) main#stream div.flux .flux_header:not(.active):hover li.item.labels a,body:not(.reader) main#stream div.flux .flux_header:not(.active):hover li.item.share a{visibility:visible}@media(max-width: 600px){body:not(.reader) main#stream div.flux .flux_header:not(.active) li.item.manage a,body:not(.reader) main#stream div.flux .flux_header:not(.active) li.item.website.icon a,body:not(.reader) main#stream div.flux .flux_header:not(.active) li.item.link a,body:not(.reader) main#stream div.flux .flux_header:not(.active) li.item.labels a,body:not(.reader) main#stream div.flux .flux_header:not(.active) li.item.share a{visibility:visible !important}}body:not(.reader) main#stream div.flux .flux_header .website a:hover .favicon,body:not(.reader) main#stream div.flux .flux_header a.website:hover .favicon{filter:unset}body:not(.reader) main#stream div.flux .flux_header li.item.share{order:3}body:not(.reader) main#stream div.flux.active.current .flux_header li.item.manage a,body:not(.reader) main#stream div.flux.active.current .flux_header li.item.website.icon a,body:not(.reader) main#stream div.flux.active.current .flux_header li.item.link a,body:not(.reader) main#stream div.flux.active.current .flux_header li.item.labels a,body:not(.reader) main#stream div.flux.active.current .flux_header li.item.share a{visibility:visible}body:not(.reader) main#stream div.flux.favorite .flux_header li.item.manage a.bookmark{visibility:visible;filter:brightness(1.5) sepia(1) hue-rotate(-25deg) saturate(4) contrast(1.2)}body:not(.reader) main#stream div.flux.favorite .flux_header li.item.manage:nth-child(2){background-color:hsla(33.65,100%,54.9%,.13)}body:not(.reader) main#stream div.flux.favorite .flux_header li.item.manage:nth-child(2):hover{background-color:hsla(33.65,100%,54.9%,.2)}body:not(.reader) main#stream div.flux .flux_header{position:relative}body:not(.reader) main#stream div.flux .flux_header li.item.website.icon,body:not(.reader) main#stream div.flux .flux_header li.item.website.full{display:flex;width:100%;flex:0 0 100%;max-width:unset;flex-direction:column;position:absolute;top:0;left:0;justify-content:flex-start;border-radius:0;pointer-events:none}body:not(.reader) main#stream div.flux .flux_header li.item.website.icon .websiteName,body:not(.reader) main#stream div.flux .flux_header li.item.website.full .websiteName{display:none}body:not(.reader) main#stream div.flux .flux_header li.item.website.icon~.item.titleAuthorSummaryDate,body:not(.reader) main#stream div.flux .flux_header li.item.website.full~.item.titleAuthorSummaryDate{padding-left:calc(var(--favicon-avatar-size) + var(--favicon-avatar-size-margin))}body:not(.reader) main#stream div.flux .flux_header li.item.website.icon:hover,body:not(.reader) main#stream div.flux .flux_header li.item.website.full:hover{background-color:unset}body:not(.reader) main#stream div.flux .flux_header li.item.website.icon:before,body:not(.reader) main#stream div.flux .flux_header li.item.website.full:before{content:"";width:100%;height:auto;aspect-ratio:16/9;z-index:-1;position:relative;visibility:hidden;pointer-events:none}body:not(.reader) main#stream div.flux .flux_header li.item.website.icon a.item-element,body:not(.reader) main#stream div.flux .flux_header li.item.website.full a.item-element{display:flex;width:calc(var(--favicon-avatar-size) + var(--favicon-avatar-size-margin));visibility:visible;pointer-events:all;box-sizing:unset}body:not(.reader) main#stream div.flux .flux_header li.item.website.icon img.favicon,body:not(.reader) main#stream div.flux .flux_header li.item.website.full img.favicon{height:var(--favicon-avatar-size);width:var(--favicon-avatar-size);background-color:hsla(0,0%,100%,.18);padding:8px;box-sizing:border-box;border-radius:50%;margin-top:2px}body:not(.reader) main#stream div.flux.active.current article.flux_content footer ul.horizontal-list.bottom .item.labels .item-element.dropdown a[href^="#dropdown-labels-"]{font-size:0;white-space:nowrap;color:#fff}body:not(.reader) main#stream div.flux.active.current article.flux_content footer ul.horizontal-list.bottom .item.labels .item-element.dropdown a[href^="#dropdown-labels-"]:before{content:"+ Add to playlist";font-weight:bold;font-size:14px}body:not(.reader) main#stream div.flux.active.current article.flux_content footer ul.horizontal-list.bottom .item.labels .item-element.dropdown a[href^="#dropdown-labels-"]+.dropdown-menu .dropdown-header{font-size:0}body:not(.reader) main#stream div.flux.active.current article.flux_content footer ul.horizontal-list.bottom .item.labels .item-element.dropdown a[href^="#dropdown-labels-"]+.dropdown-menu .dropdown-header:before{content:"Playlists";letter-spacing:1px;text-transform:uppercase;font-size:1rem}body:not(.reader) main#stream div.flux.active.current article.flux_content footer ul.horizontal-list.bottom .item.labels .item-element.dropdown a[href^="#dropdown-labels-"]+.dropdown-menu .dropdown-header a[href="./?c=tag"]{margin-left:8px;font-size:1rem}body:not(.reader) main#stream div.flux.active.current article.flux_content footer ul.horizontal-list.bottom .item.labels .item-element.dropdown a[href^="#dropdown-labels-"] .icon{display:none}body:not(.reader) main#stream div.flux.active.current article.flux_content .content .text{overflow-x:hidden}html body,html #slider,html .aside.aside_feed,html .nav.nav-list.aside,html .nav.nav-list.aside ul,html .nav-list .item,html .tree .tree-folder .tree-folder-title{background-color:#0f0f0f;--frss-font-color-dark: white;color:#fff}html label,html .content h1.title a,html .content h1 a,html .content.thin h1.title a,html .content.thin h1 a,html .flux .website a,html .day,html .day .name,html .post h1,html .post h2,html .dropdown-menu .item>a,html .dropdown-menu .item>span,html .dropdown-menu .item>.as-link,html .dropdown-menu .dropdown-header,html .dropdown-menu .dropdown-section .dropdown-section-title,html .tree .tree-folder .tree-folder-items .dropdown-menu .item a,html .tree .tree-folder .tree-folder-items .dropdown-menu .item button{--frss-font-color-dark: white;color:#fff}html article .content figure figcaption{font-style:normal}html input,html select,html textarea,html button,html .btn,html kbd,html input:focus,html select:focus,html textarea:focus,html .nav_menu,html .pagination .item,html .nav_menu .btn{background-color:#303136;border-color:#303136;border-top-color:#303136;color:#fff}html input .stick .btn,html input .group .btn,html input .stick .btn.read_all,html input .group .btn.read_all,html input .btn+.btn:not(.btn-important),html input .btn+input,html input .btn+.dropdown>.btn,html input input+.btn,html input input+input,html input input+.dropdown>.btn,html input .dropdown+.btn,html input .dropdown+input,html input .dropdown+.dropdown>.btn,html select .stick .btn,html select .group .btn,html select .stick .btn.read_all,html select .group .btn.read_all,html select .btn+.btn:not(.btn-important),html select .btn+input,html select .btn+.dropdown>.btn,html select input+.btn,html select input+input,html select input+.dropdown>.btn,html select .dropdown+.btn,html select .dropdown+input,html select .dropdown+.dropdown>.btn,html textarea .stick .btn,html textarea .group .btn,html textarea .stick .btn.read_all,html textarea .group .btn.read_all,html textarea .btn+.btn:not(.btn-important),html textarea .btn+input,html textarea .btn+.dropdown>.btn,html textarea input+.btn,html textarea input+input,html textarea input+.dropdown>.btn,html textarea .dropdown+.btn,html textarea .dropdown+input,html textarea .dropdown+.dropdown>.btn,html button .stick .btn,html button .group .btn,html button .stick .btn.read_all,html button .group .btn.read_all,html button .btn+.btn:not(.btn-important),html button .btn+input,html button .btn+.dropdown>.btn,html button input+.btn,html button input+input,html button input+.dropdown>.btn,html button .dropdown+.btn,html button .dropdown+input,html button .dropdown+.dropdown>.btn,html .btn .stick .btn,html .btn .group .btn,html .btn .stick .btn.read_all,html .btn .group .btn.read_all,html .btn .btn+.btn:not(.btn-important),html .btn .btn+input,html .btn .btn+.dropdown>.btn,html .btn input+.btn,html .btn input+input,html .btn input+.dropdown>.btn,html .btn .dropdown+.btn,html .btn .dropdown+input,html .btn .dropdown+.dropdown>.btn,html kbd .stick .btn,html kbd .group .btn,html kbd .stick .btn.read_all,html kbd .group .btn.read_all,html kbd .btn+.btn:not(.btn-important),html kbd .btn+input,html kbd .btn+.dropdown>.btn,html kbd input+.btn,html kbd input+input,html kbd input+.dropdown>.btn,html kbd .dropdown+.btn,html kbd .dropdown+input,html kbd .dropdown+.dropdown>.btn,html input:focus .stick .btn,html input:focus .group .btn,html input:focus .stick .btn.read_all,html input:focus .group .btn.read_all,html input:focus .btn+.btn:not(.btn-important),html input:focus .btn+input,html input:focus .btn+.dropdown>.btn,html input:focus input+.btn,html input:focus input+input,html input:focus input+.dropdown>.btn,html input:focus .dropdown+.btn,html input:focus .dropdown+input,html input:focus .dropdown+.dropdown>.btn,html select:focus .stick .btn,html select:focus .group .btn,html select:focus .stick .btn.read_all,html select:focus .group .btn.read_all,html select:focus .btn+.btn:not(.btn-important),html select:focus .btn+input,html select:focus .btn+.dropdown>.btn,html select:focus input+.btn,html select:focus input+input,html select:focus input+.dropdown>.btn,html select:focus .dropdown+.btn,html select:focus .dropdown+input,html select:focus .dropdown+.dropdown>.btn,html textarea:focus .stick .btn,html textarea:focus .group .btn,html textarea:focus .stick .btn.read_all,html textarea:focus .group .btn.read_all,html textarea:focus .btn+.btn:not(.btn-important),html textarea:focus .btn+input,html textarea:focus .btn+.dropdown>.btn,html textarea:focus input+.btn,html textarea:focus input+input,html textarea:focus input+.dropdown>.btn,html textarea:focus .dropdown+.btn,html textarea:focus .dropdown+input,html textarea:focus .dropdown+.dropdown>.btn,html .nav_menu .stick .btn,html .nav_menu .group .btn,html .nav_menu .stick .btn.read_all,html .nav_menu .group .btn.read_all,html .nav_menu .btn+.btn:not(.btn-important),html .nav_menu .btn+input,html .nav_menu .btn+.dropdown>.btn,html .nav_menu input+.btn,html .nav_menu input+input,html .nav_menu input+.dropdown>.btn,html .nav_menu .dropdown+.btn,html .nav_menu .dropdown+input,html .nav_menu .dropdown+.dropdown>.btn,html .pagination .item .stick .btn,html .pagination .item .group .btn,html .pagination .item .stick .btn.read_all,html .pagination .item .group .btn.read_all,html .pagination .item .btn+.btn:not(.btn-important),html .pagination .item .btn+input,html .pagination .item .btn+.dropdown>.btn,html .pagination .item input+.btn,html .pagination .item input+input,html .pagination .item input+.dropdown>.btn,html .pagination .item .dropdown+.btn,html .pagination .item .dropdown+input,html .pagination .item .dropdown+.dropdown>.btn,html .nav_menu .btn .stick .btn,html .nav_menu .btn .group .btn,html .nav_menu .btn .stick .btn.read_all,html .nav_menu .btn .group .btn.read_all,html .nav_menu .btn .btn+.btn:not(.btn-important),html .nav_menu .btn .btn+input,html .nav_menu .btn .btn+.dropdown>.btn,html .nav_menu .btn input+.btn,html .nav_menu .btn input+input,html .nav_menu .btn input+.dropdown>.btn,html .nav_menu .btn .dropdown+.btn,html .nav_menu .btn .dropdown+input,html .nav_menu .btn .dropdown+.dropdown>.btn{background-color:#303136;border-color:#303136;border-top-color:#303136;color:#fff}html input .icon,html select .icon,html textarea .icon,html button .icon,html .btn .icon,html kbd .icon,html input:focus .icon,html select:focus .icon,html textarea:focus .icon,html .nav_menu .icon,html .pagination .item .icon,html .nav_menu .btn .icon{filter:brightness(1.6)}html .btn:hover,html .nav_menu .stick .btn:not(.active):hover,html .nav_menu .group .btn:not(.active):hover,html .nav_menu .stick .btn.read_all:hover,html .nav_menu .group .btn.read_all:hover,html .pagination .item:hover,html .nav_menu .btn:hover,html .nav-list .item a:hover{background-color:#424348}html .nav_menu{background-color:unset;border-color:unset}html .nav_menu .stick .btn.active,html .nav_menu .group .btn.active{background-color:#36c}html .nav_menu .stick .btn.active .icon,html .nav_menu .group .btn.active .icon{filter:brightness(3)}html kbd a{filter:brightness(1.6) saturate(0.8)}html input:disabled,html select:disabled{background-color:#303136;border-color:#303136;border-style:solid;background-image:repeating-linear-gradient(45deg, #303136, #303136 10px, #424348 10px, #424348 20px)}html table th{background:hsla(0,0%,100%,.12)}@media(max-width: 840px){.dropdown-target:target~.dropdown-toggle::after{background-color:#303136;border-color:#303136}body:not(.reader) main#stream div.flux li.item.share .dropdown-toggle:after,body:not(.reader) main#stream div.flux li.item.labels .dropdown-toggle:after,.nav_menu #mark-read-menu .dropdown-toggle:after,.nav_menu #nav_menu_actions .dropdown-toggle:after{display:none}body:not(.reader) main#stream div.flux li.item.share li.item,body:not(.reader) main#stream div.flux li.item.share li.item button,body:not(.reader) main#stream div.flux li.item.labels li.item,body:not(.reader) main#stream div.flux li.item.labels li.item button,.nav_menu #mark-read-menu li.item,.nav_menu #mark-read-menu li.item button,.nav_menu #nav_menu_actions li.item,.nav_menu #nav_menu_actions li.item button{margin:0;font-size:1.4rem}body:not(.reader) main#stream div.flux li.item.share li.item label,body:not(.reader) main#stream div.flux li.item.share li.item button label,body:not(.reader) main#stream div.flux li.item.labels li.item label,body:not(.reader) main#stream div.flux li.item.labels li.item button label,.nav_menu #mark-read-menu li.item label,.nav_menu #mark-read-menu li.item button label,.nav_menu #nav_menu_actions li.item label,.nav_menu #nav_menu_actions li.item button label{padding:10px;text-indent:0}body:not(.reader) main#stream div.flux li.item.share li.item input[type=checkbox],body:not(.reader) main#stream div.flux li.item.share li.item button input[type=checkbox],body:not(.reader) main#stream div.flux li.item.labels li.item input[type=checkbox],body:not(.reader) main#stream div.flux li.item.labels li.item button input[type=checkbox],.nav_menu #mark-read-menu li.item input[type=checkbox],.nav_menu #mark-read-menu li.item button input[type=checkbox],.nav_menu #nav_menu_actions li.item input[type=checkbox],.nav_menu #nav_menu_actions li.item button input[type=checkbox]{width:1.4rem !important;height:1.4rem !important;margin-right:1rem}body:not(.reader) main#stream div.flux li.item.share .dropdown-menu,body:not(.reader) main#stream div.flux li.item.labels .dropdown-menu,.nav_menu #mark-read-menu .dropdown-menu,.nav_menu #nav_menu_actions .dropdown-menu{position:fixed;bottom:0;height:calc(100vh - 50%);left:0 !important;right:0 !important;border-bottom-left-radius:0;border-bottom-right-radius:0;overflow:auto;animation:slideUp .15s ease-in-out forwards}body:not(.reader) main#stream div.flux li.item.share .dropdown-menu>ul,body:not(.reader) main#stream div.flux li.item.labels .dropdown-menu>ul,.nav_menu #mark-read-menu .dropdown-menu>ul,.nav_menu #nav_menu_actions .dropdown-menu>ul{overflow:auto}body:not(.reader) main#stream div.flux li.item.share .dropdown-menu>ul .item.addItem,body:not(.reader) main#stream div.flux li.item.labels .dropdown-menu>ul .item.addItem,.nav_menu #mark-read-menu .dropdown-menu>ul .item.addItem,.nav_menu #nav_menu_actions .dropdown-menu>ul .item.addItem{position:sticky;top:0;margin-right:0;padding-right:0;width:unset;background-color:#303136}body:not(.reader) main#stream div.flux li.item.share .dropdown-menu p.help,body:not(.reader) main#stream div.flux li.item.labels .dropdown-menu p.help,.nav_menu #mark-read-menu .dropdown-menu p.help,.nav_menu #nav_menu_actions .dropdown-menu p.help{display:flex;flex-wrap:wrap;word-break:break-all;line-height:1.4;justify-content:center}body:not(.reader) main#stream div.flux li.item.share .dropdown-menu p.help .btn,body:not(.reader) main#stream div.flux li.item.labels .dropdown-menu p.help .btn,.nav_menu #mark-read-menu .dropdown-menu p.help .btn,.nav_menu #nav_menu_actions .dropdown-menu p.help .btn{background-color:#424348}body:not(.reader) main#stream div.flux li.item.share .dropdown-menu p.help .icon,body:not(.reader) main#stream div.flux li.item.labels .dropdown-menu p.help .icon,.nav_menu #mark-read-menu .dropdown-menu p.help .icon,.nav_menu #nav_menu_actions .dropdown-menu p.help .icon{display:none}.dropdown .dropdown-menu,.dropdown-target:target~.dropdown-menu{border-radius:12px}#dropdown-configure~.dropdown-menu{border-radius:unset}#dropdown-configure~.dropdown-menu .toggle_aside{border:none}#overlay a.close{border:none}.extension_smartmenu ul{list-style-position:inside;list-style-type:none}#nav_menu_views_dropdown ul.dropdown-menu .item a,#nav_menu_actions_dropdown ul.dropdown-menu .item a{width:100%}}.dropdown{position:relative}.tree .tree-folder .tree-folder-items .item.active .dropdown li a,.dropdown .dropdown-menu .item a{color:#fff}.dropdown-menu,.box{background-color:#303136;color:#fff;border-radius:12px}.dropdown-menu li.item:hover,.box li.item:hover{background-color:hsla(0,0%,100%,.06)}.dropdown-menu .box-content .item,.box .box-content .item{background-color:#303136}.dropdown-menu .box-content .item,.dropdown-menu .box-content .item a,.box .box-content .item,.box .box-content .item a{background-color:#303136;color:#fff}.dropdown-menu .item.dropdown-section~.dropdown-section,.dropdown-menu .item.separator,.box .item.dropdown-section~.dropdown-section,.box .item.separator{border-top-color:#646464;border-bottom-color:#646464;border-color:#646464}.box .box-title{background-color:#424348;color:#fff}.box .box-title .configure{border-radius:8px}.box .box-content .configure{border-radius:8px}main#stream .box.category .box-content{padding:1rem}main#stream .box.category .box-content li.item.feed{border:none}main#stream .box.category .box-content li.item.feed a,main#stream .box.category .box-content li.item.feed a:hover{color:#fff}main#stream .box.category .box-title a.title,main#stream .box.category .box-title a.title:hover{color:#fff}main#stream .box.category .box-title a.title:not([data-unread="0"]):after,main#stream .box.category .box-title a.title:hover:not([data-unread="0"]):after{background-color:rgba(137,137,137,0.4392156863)}.box .box-title .icon,.manage-list .icon,.dropdown-header .icon,.tree-folder-items .dropdown-toggle .icon,.tree-folder-items .item.feed .dropdown-toggle .icon{filter:brightness(2)}.dropdown-menu input,.dropdown-menu .btn,.stick input+.btn{background-color:#424348;border-color:#424348}main.prompt{background:#303136}main.post .box{border-radius:12px;overflow:hidden}main.post .box ul{list-style-position:inside}main.post .box .box-title{padding:1rem}main.post .box .box-content{padding:1rem}main.post .box .box-content .item,main.post .box .box-content .item.feed{border:none}#global #overlay #panel{background:#0f0f0f}#global #overlay #panel .flux.not_read:not(.current){background:#0f0f0f}#global #overlay #panel .flux.not_read:not(.current) a{color:#fff}#global #overlay #panel .flux .flux_header{border-color:rgba(100,100,100,.4196078431);padding:1rem;box-sizing:border-box}#global #overlay #panel .flux .flux_header:hover{background:#252525}#global #overlay #panel .flux .flux_header:hover:not(.current):hover .item .title{background:unset}.tree .tree-folder{border:none;margin:0 8px}.tree .tree-folder .tree-folder-title{display:flex;align-items:center;padding:1rem;border-radius:8px;text-transform:unset;font-size:1rem;font-weight:normal}.tree .tree-folder .tree-folder-title:hover{text-decoration:none;background-color:#303136}.tree .tree-folder .tree-folder-title img.icon{width:20px;height:20px;margin-right:2rem;filter:brightness(3) !important}.tree .tree-folder .tree-folder-title button.dropdown-toggle{margin-right:0}.tree .tree-folder .tree-folder-title button.dropdown-toggle img.icon{padding:2px;box-sizing:border-box}.tree .tree-folder .tree-folder-title button.dropdown-toggle img.icon[src*="down.svg"]{transform:rotate(270deg)}.tree .tree-folder .tree-folder-title button.dropdown-toggle img.icon[src*="up.svg"]{transform:rotate(180deg)}.tree .tree-folder.active .tree-folder-title{background-color:#303136}.tree .tree-folder ul.tree-folder-items{background-color:unset}.tree .tree-folder ul.tree-folder-items li.item{border-radius:6px;background-color:unset;display:list-item !important}.tree .tree-folder ul.tree-folder-items li.item:hover{background-color:#303136}.tree .tree-folder ul.tree-folder-items li.item a.dropdown-toggle{width:20px;padding-right:10px;padding-left:15px}.tree .tree-folder ul.tree-folder-items li.item a.item-title{padding-left:15px;width:calc(100% - 70px)}.tree .tree-folder ul.tree-folder-items li.item a.item-title:not(.active){padding-left:62px}.tree .tree-folder ul.tree-folder-items li.item a.item-title img.favicon{width:18px;height:18px;margin-right:8px}.tree .tree-folder ul.tree-folder-items li.item a.item-title:has(img.favicon){padding-left:15px}.tree .tree-folder ul.tree-folder-items li.item a.item-title:not([data-unread="0"]){width:calc(100% - 110px);font-size:1rem;font-weight:normal;letter-spacing:.5px}.tree .tree-folder ul.tree-folder-items li.item.active{background-color:#303136}.tree .tree-folder ul.tree-folder-items li.item.active a:after{border:none}@media(min-width: 840px){.tree li.tree-folder.category.tags .item.feed a.item-title:not(.active){padding-left:15px}}.flux .flux_header .date{color:hsla(0,0%,100%,.59)}.flux .flux_content .bottom .date{color:hsla(0,0%,100%,.59)}.flux.not_read .item .date{color:hsla(0,0%,100%,.59)}@media(min-width: 840px){.aside.aside_feed{padding-top:2rem}.aside.aside_feed>*{max-width:300px}}.aside.aside_feed a.toggle_aside{border:none}.aside.aside_feed .category .title:not([data-unread="0"])::after{top:50%;transform:translateY(-50%);margin:0;background-color:rgba(137,137,137,.4392156863);font-weight:bold}.tree#sidebar{padding-top:0;margin-top:0}#tags:has(>ul.tree-folder-items.active .item.feed.active)>.tree-folder-title,[id^=c_].tree-folder.category.active:has(>ul.tree-folder-items.active .item.feed.active)>.tree-folder-title{background-color:unset}body:not(.normal) .nav.nav-list.aside{padding-top:2rem}body:not(.normal) .nav.nav-list.aside .item.nav-section li.item{margin:0 8px;border-radius:12px;min-height:1rem;line-height:1}body:not(.normal) .nav.nav-list.aside .item.nav-section li.item.active,body:not(.normal) .nav.nav-list.aside .item.nav-section li.item.active a{background:#303136;background-color:#303136}body:not(.normal) .nav.nav-list.aside .item.nav-section li.item:hover,body:not(.normal) .nav.nav-list.aside .item.nav-section li.item:hover a{background:#303136;background-color:#303136}body:not(.normal) .nav.nav-list.aside .item.nav-section li.item a{padding:16px;line-height:1;font-size:1.2rem}.post a[href="./"]{background-color:#303136;border-color:#303136;color:#fff}body:not(.reader) main#stream div.flux.not_read{position:relative;background-color:unset}body:not(.reader) main#stream div.flux.not_read:after{content:"New";position:absolute;top:18px;left:18px;padding:2px 6px;background-color:rgba(255,0,0,.76);box-shadow:0 2px 8px 3px rgba(0,0,0,.13);border-radius:6px;font-weight:bold;pointer-events:none}body:not(.reader) main#stream div.flux:not(.active):hover{background-color:hsla(0,0%,100%,.06)}@media(max-width: 600px){body:not(.reader) main#stream div.flux:not(.active),body:not(.reader) main#stream div.flux:not(.active).favorite:not(.current){background-color:hsla(0,0%,100%,.06)}}body:not(.reader) main#stream div.flux.active.current .flux_header{background-color:hsl(0,2.56%,15.29%)}body:not(.reader) main#stream div.flux .flux_header li.item.manage,body:not(.reader) main#stream div.flux .flux_header li.item.website.icon,body:not(.reader) main#stream div.flux .flux_header li.item.link,body:not(.reader) main#stream div.flux .flux_header li.item.labels,body:not(.reader) main#stream div.flux .flux_header li.item.share{background-color:unset}body:not(.reader) main#stream div.flux:not(.favorite) .flux_header li.item.manage .item-element.bookmark img,body:not(.reader) main#stream div.flux:not(.not_read) .flux_header li.item.manage .item-element.read img,body:not(.reader) main#stream div.flux .flux_header li.item.link img,body:not(.reader) main#stream div.flux .flux_header li.item.labels img,body:not(.reader) main#stream div.flux .flux_header li.item.share img{filter:brightness(1.6)}body:not(.reader) main#stream div.flux.not_read .flux_header li.item.manage .item-element.read img{filter:grayscale(1) brightness(1.4)}main#stream button#bigMarkAsRead,#overlay #panel button#bigMarkAsRead{background:#303136;color:hsla(0,0%,100%,.6392156863);margin-bottom:0}main#stream button#bigMarkAsRead .bigTick,#overlay #panel button#bigMarkAsRead .bigTick{filter:brightness(5);opacity:.6}main#stream button#bigMarkAsRead:hover,#overlay #panel button#bigMarkAsRead:hover{background:#424348;color:#fff}main#stream button#bigMarkAsRead:hover .bigTick,#overlay #panel button#bigMarkAsRead:hover .bigTick{filter:brightness(5);opacity:1}#new-article{grid-column:1/-1;border-radius:8px;margin:1rem 4px;overflow:hidden}main#stream div.flux.active.current{grid-column:1/-1;max-height:calc(100vh - 275px);overflow:auto}@media(max-height: 900px){main#stream div.flux.active.current{height:100vh;max-height:100vh}}@media(max-width: 840px){main#stream div.flux.active.current{height:100vh;max-height:100vh}}body:has(.tree-folder.category.favorites.active) main#stream div.flux.favorite:not(.active) .flux_header li.item.manage:nth-child(2){background-color:inherit}body:has(.tree-folder.category.favorites.active) main#stream div.flux.favorite:not(.active) .flux_header li.item.manage:nth-child(2):hover{background-color:hsla(0,0%,100%,.08)}body:has(.tree-folder.category.favorites.active) main#stream div.flux.favorite:not(.active) .flux_header:not(:hover) li.item.manage:nth-child(2){visibility:hidden}body:has(.tree-folder.category.favorites.active) main#stream div.flux.favorite:not(.active) .flux_header:not(:hover) a.bookmark{visibility:hidden}#stream.reader .flux{border-bottom:1px solid #646464}#stream.reader .flux,#stream.reader .flux .content{background:#0f0f0f}#stream.reader .flux,#stream.reader .flux .text{color:#fff}#stream.reader .flux .go_website{font-family:Arial,Helvetica,sans-serif}#stream.reader .flux .flux_content{background:#0f0f0f}@keyframes slideUp{from{transform:translateY(100%)}to{transform:translateY(0%)}}.youlag-mode--fullscreen{overflow:hidden}.youlag-mode--pip{overflow:auto}body:has(#global main#stream):before{content:"Loading Youlag features";position:fixed;top:89px;right:39px;width:280px;height:82px;background-image:url("data:image/svg+xml,%3Csvg width='24' height='24' stroke='%23000' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cstyle%3E.spinner_V8m1%7Btransform-origin%3Acenter%3Banimation%3Aspinner_zKoa 2s linear infinite%7D.spinner_V8m1 circle%7Bstroke-linecap%3Around%3Banimation%3Aspinner_YpZS 1.5s ease-in-out infinite%7D%40keyframes spinner_zKoa%7B100%25%7Btransform%3Arotate(360deg)%7D%7D%40keyframes spinner_YpZS%7B0%25%7Bstroke-dasharray%3A0 150%3Bstroke-dashoffset%3A0%7D47.5%25%7Bstroke-dasharray%3A42 150%3Bstroke-dashoffset%3A-16%7D95%25%2C100%25%7Bstroke-dasharray%3A42 150%3Bstroke-dashoffset%3A-59%7D%7D%3C/style%3E%3Cg class='spinner_V8m1'%3E%3Ccircle cx='12' cy='12' r='9.5' fill='none' stroke-width='3'%3E%3C/circle%3E%3C/g%3E%3C/svg%3E");background-repeat:no-repeat;filter:invert(1);background-position:20px;background-size:32px;background-color:hsla(0,0%,100%,.831372549);opacity:.8;z-index:9999;transition:opacity .2s;color:#000;display:flex;justify-content:flex-start;align-items:center;padding-left:68px;box-sizing:border-box;font-family:arial;font-size:var(--yl-text-sm);white-space:pre;pointer-events:none;border-radius:12px}body.youlag-loaded:before{display:none !important}main#stream>.flux{cursor:pointer}#youlagTheaterModal{position:fixed;z-index:99999;bottom:0px;right:0px;height:100vh;width:100vw;background:#060606;overflow-y:auto;overflow-x:hidden;box-sizing:border-box;transition:.2s;box-shadow:0 0 0 10px #060606}#youlagTheaterModal.youlag-modal-feed-item--text .youlag-iframe-container{display:none}#youlagTheaterModal.youlag-modal-feed-item--text .youlag-video-container{max-height:50vh}#youlagTheaterModal.youlag-modal-feed-item--text .youlag-video-container .youlag-thumbnail-container{animation:none !important;width:100% !important;height:auto !important;padding-bottom:0 !important}#youlagTheaterModal.youlag-modal-feed-item--text .youlag-video-container .youlag-thumbnail-container .youlag-video-thumbnail{position:static !important;transform:none !important}#youlagTheaterModal.youlag-modal-feed-item--text .youlag-video-description-content{margin:0 auto}#youlagTheaterModal.youlag-modal-feed-item--text .youlag-video-description-content a{color:#fff;box-shadow:#fff 0 -1px 0 inset}#youlagTheaterModal.youlag-modal-feed-item--text .youlag-video-description-content ul{list-style-position:inside}#youlagTheaterModal.youlag-modal-feed-item--text .youlag-video-description-content img{border-radius:8px}#youlagTheaterModal.youlag-modal-feed-item--text .youlag-video-description-content pre{overflow:auto;background-color:hsla(0,0%,100%,.1098039216);border-radius:8px;padding:1rem}.youlag-theater-modal-container{width:100%}.youlag-theater-modal-content{width:100%}.youlag-video-header{display:flex;gap:var(--yl-m-3xs);position:sticky;top:0;left:0;z-index:1;display:flex;justify-content:flex-end;padding:var(--yl-p-xs)}.youlag-video-container{position:relative;max-height:80vh;overflow:hidden}.youlag-video-container .youlag-iframe-container{position:absolute;top:0;left:0;width:100%}.youlag-video-container .youlag-iframe-container .youlag-iframe{width:100%;height:auto;max-height:80vh;aspect-ratio:16/9;overflow:hidden}.youlag-video-container .youlag-thumbnail-container{width:100%;height:0;padding-bottom:calc(56.25% - 1px);position:relative;overflow:hidden;animation:pulse 4s infinite ease-in-out}.youlag-video-container .youlag-thumbnail-container .youlag-video-thumbnail{position:absolute;top:50%;left:0;width:100%;transform:translateY(-50%)}.youlag-video-details{padding-top:var(--yl-p-xs);padding-left:var(--yl-p-md);padding-right:var(--yl-p-md)}.youlag-video-details .youlag-video-metadata-container{margin-bottom:var(--yl-m-lg)}.youlag-video-details .youlag-video-metadata-container .youlag-video-metadata-title{font-size:1.4rem;line-height:1.4;margin-bottom:var(--yl-m-sm)}.youlag-video-details .youlag-video-metadata-container .youlag-video-metadata-favicon{width:42px;height:42px;background-color:hsla(0,0%,100%,.18);padding:8px;box-sizing:border-box;border-radius:50%;margin-top:2px}.youlag-video-details .youlag-video-metadata-container .youlag-video-metadata-favicon[src=""]{display:none}.youlag-video-metadata-panel{display:flex;flex-wrap:wrap;align-items:center;gap:var(--yl-m-sm);margin-bottom:var(--yl-m-md)}.youlag-video-metadata-panel .youlag-video-author-section{display:flex;flex:1;gap:var(--yl-m-2xs);align-items:center;min-width:400px}.youlag-video-metadata-panel .youlag-video-author-section .youlag-video-metadata-author a{font-size:var(--yl-text-sm);line-height:1.66;font-weight:600;color:#fff}.youlag-video-metadata-panel .youlag-video-author-section .youlag-video-metadata-date{font-size:var(--yl-text-xs);line-height:1;opacity:.8}.youlag-video-metadata-panel .youlag-video-actions-container{display:flex;gap:var(--yl-m-2xs);flex-wrap:wrap}.youlag-video-metadata-favicon-link:has(.youlag-video-metadata-favicon[src=""]){display:none}.youlag-favorited{min-width:60px}.youlag-favorited.youlag-favorited--false .youlag-favorited-icon{background-image:url("../themes/Mapco/icons/non-starred.svg");filter:brightness(1.6)}.youlag-favorited.youlag-favorited--true .youlag-favorited-icon{background-image:url("../themes/Mapco/icons/starred.svg");filter:brightness(1.5) sepia(1) hue-rotate(-25deg) saturate(4) contrast(1.2)}.youlag-favorited .youlag-favorited-icon{width:20px;height:20px;filter:invert(1);background-repeat:no-repeat;background-position:center;width:100%}.youlag-video-description-container{background-color:hsla(0,0%,100%,.1);margin-bottom:var(--yl-m-lg);padding:var(--yl-p-sm);border-radius:1rem}.youlag-video-description-container .youlag-video-description-content{font-size:var(--yl-text-sm);word-break:break-word;max-width:700px}.youlag-video-description-container:has(.youlag-video-description-content:empty){display:none}a.yl-video-action-button{background-color:#303136;color:#fff;font-weight:600;font-size:var(--yl-text-xs);border-radius:999px;padding:var(--yl-p-xs) var(--yl-p-sm);display:inline-block;text-decoration:none;transition:background-color .2s}a.yl-video-action-button:hover{text-decoration:none;background-color:#424348}a.yl-video-action-button span.yl-video-action-button__icon{margin-right:var(--yl-m-2xs)}.yl-video-action-button-group{display:flex;border-radius:999px;overflow:hidden}.yl-video-action-button-group a.yl-video-action-button{border-radius:0}.yl-video-action-button-group .yl-video-action-button:first-child{border-top-left-radius:999px;border-bottom-left-radius:999px}.yl-video-action-button-group .yl-video-action-button:last-child{border-top-right-radius:999px;border-bottom-right-radius:999px}.yl-video-action-button-group .yl-video-action-button:not(:last-child){border-right:1px solid hsla(0,0%,100%,.26)}.yl-video-action-button-group .yl-video-action-button:only-child{border-top-left-radius:0;border-bottom-left-radius:0;border-top-right-radius:0;border-bottom-right-radius:0;border:none}a.yl-video-action-button[href=""]{display:none}#youlagCloseModal,#youlagMinimizeModal{cursor:pointer;padding:var(--yl-p-sm);display:flex;align-items:center;justify-content:center;text-align:center;line-height:1;border-radius:999px;width:40px;height:40px;font-size:var(--yl-text-lg);background-color:#303136;box-shadow:0px 4px 8px 0px rgba(0,0,0,.4);transition:background-color .2s}#youlagCloseModal:hover,#youlagMinimizeModal:hover{background-color:#424348}#youlagMinimizeModal{font-size:var(--yl-text-md)}.youlag-mode--pip #youlagTheaterModal{width:var(--video-pip-width);bottom:1rem;right:2rem;aspect-ratio:16/9;height:auto;border-radius:12px;background:#303136;box-shadow:0 0 0 6px #303136}.youlag-mode--pip #youlagTheaterModal .youlag-video-header{position:absolute;left:auto;right:0;padding:3px}.youlag-mode--pip #youlagTheaterModal #youlagCloseModal,.youlag-mode--pip #youlagTheaterModal #youlagMinimizeModal{padding:var(--yl-p-xs);width:20px;height:20px;font-size:var(--yl-text-sm)}.youlag-mode--pip #youlagTheaterModal .youlag-video-details{display:none} 2 | -------------------------------------------------------------------------------- /src/theme.scss: -------------------------------------------------------------------------------- 1 | /***************************************** 2 | * 3 | * Youlag Theme for FreshRSS 4 | * 5 | * Version: 3.0.7 6 | * License: GNU General Public License v3.0 7 | * Author: civilblur @ github 8 | * 9 | ****************************************/ 10 | 11 | 12 | /***************************************** 13 | * 14 | * INDEX 15 | * - Variables and keyframes 16 | * - Feed grid layout 17 | * - Common layout elements 18 | * - Card 19 | * - Mapco theme dark mode (1) 20 | * - Dark mode: Global styles 21 | * - Dark mode: Dropdown, dialog, box 22 | * - Dark mode: Feed side navigation 23 | * - Dark mode: Settings side navigation 24 | * - Dark mode: Card 25 | * - Card expanded - Inline view mode (2) 26 | * - Favorites page 27 | * - Reader view page 28 | * - Animation keyframes 29 | * - Youlag theater view modal 30 | * - Youlag theater pip view 31 | * 32 | * 33 | * NOTE 34 | * (1) 35 | * To revert Mapco theme to light mode, 36 | * comment out the CSS in the 37 | * "Mapco theme dark mode" section. 38 | * 39 | * (2) 40 | * This is a fallback view of displaying 41 | * feed items, if the Youlag script is not 42 | * utilized or fails to load. 43 | * 44 | * 45 | * TODO 46 | * - Refactor values to CSS variable, such as 47 | * colors, border-radius, margin, padding, 48 | * spacing, etc. 49 | * 50 | ****************************************/ 51 | 52 | 53 | 54 | /***************************************** 55 | * BEGIN "VARIABLES AND KEYFRAMES" 56 | ****************************************/ 57 | 58 | 59 | 60 | 61 | :root { 62 | --yl-space-3xs: clamp(0.3125rem, 0.3125rem + 0vw, 0.3125rem); 63 | --yl-space-2xs: clamp(0.5625rem, 0.5408rem + 0.1087vw, 0.625rem); 64 | --yl-space-xs: clamp(0.875rem, 0.8533rem + 0.1087vw, 0.9375rem); 65 | --yl-space-sm: clamp(1.125rem, 1.0815rem + 0.2174vw, 1.25rem); 66 | --yl-space-md: clamp(1.6875rem, 1.6223rem + 0.3261vw, 1.875rem); 67 | --yl-space-lg: clamp(2.25rem, 2.163rem + 0.4348vw, 2.5rem); 68 | --yl-space-xl: clamp(3.375rem, 3.2446rem + 0.6522vw, 3.75rem); 69 | --yl-space-2xl: clamp(4.5rem, 4.3261rem + 0.8696vw, 5rem); 70 | --yl-space-3xl: clamp(6.75rem, 6.4891rem + 1.3043vw, 7.5rem); 71 | 72 | --yl-p-3xs: var(--yl-space-3xs); 73 | --yl-p-2xs: var(--yl-space-2xs); 74 | --yl-p-xs: var(--yl-space-xs); 75 | --yl-p-sm: var(--yl-space-sm); 76 | --yl-p-md: var(--yl-space-md); 77 | --yl-p-lg: var(--yl-space-lg); 78 | --yl-p-xl: var(--yl-space-xl); 79 | --yl-p-2xl: var(--yl-space-2xl); 80 | --yl-p-3xl: var(--yl-space-3xl); 81 | 82 | --yl-m-3xs: var(--yl-space-3xs); 83 | --yl-m-2xs: var(--yl-space-2xs); 84 | --yl-m-xs: var(--yl-space-xs); 85 | --yl-m-sm: var(--yl-space-sm); 86 | --yl-m-md: var(--yl-space-md); 87 | --yl-m-lg: var(--yl-space-lg); 88 | --yl-m-xl: var(--yl-space-xl); 89 | --yl-m-2xl: var(--yl-space-2xl); 90 | --yl-m-3xl: var(--yl-space-3xl); 91 | 92 | --yl-text-2xs: clamp(0.7813rem, 0.7747rem + 0.0326vw, 0.8rem); 93 | --yl-text-xs: clamp(0.9375rem, 0.9158rem + 0.1087vw, 1rem); 94 | --yl-text-sm: clamp(1.125rem, 1.0815rem + 0.2174vw, 1.25rem); 95 | --yl-text-md: clamp(1.35rem, 1.2761rem + 0.3696vw, 1.5625rem); 96 | --yl-text-lg: clamp(1.62rem, 1.5041rem + 0.5793vw, 1.9531rem); 97 | --yl-text-xl: clamp(1.944rem, 1.771rem + 0.8651vw, 2.4414rem); 98 | --yl-text-2xl: clamp(2.3328rem, 2.0827rem + 1.2504vw, 3.0518rem); 99 | --yl-text-3xl: clamp(2.7994rem, 2.4462rem + 1.7658vw, 3.8147rem); 100 | 101 | --favicon-avatar-size: 34px; 102 | --favicon-avatar-size-margin: 6px; 103 | --feed-day-title-font-size: 2.3rem; 104 | --video-pip-width: min(500px, 60%); 105 | } 106 | 107 | @media (max-width: 840px) { 108 | :root { 109 | --favicon-avatar-size: 42px; 110 | } 111 | } 112 | 113 | @keyframes pulse { 114 | 0%, 100% { 115 | filter: brightness(1); 116 | } 117 | 50% { 118 | filter: brightness(0.6); 119 | } 120 | } 121 | 122 | 123 | // TODO 2025-02-22: Create an utility classes section and move these classes to it. 124 | .yl-flex { 125 | display: flex; 126 | } 127 | 128 | .yl-flex-col { 129 | flex-direction: column; 130 | } 131 | 132 | .yt-items-center { 133 | align-items: center; 134 | } 135 | 136 | .yt-flex-1 { 137 | flex: 1; 138 | } 139 | 140 | .yl-gap-3xs { 141 | gap: var(--yl-space-3xs); 142 | } 143 | 144 | .yl-mb-md { 145 | margin-bottom: var(--yl-m-md); 146 | } 147 | 148 | .w-100 { 149 | width: 100%; 150 | } 151 | 152 | 153 | 154 | /***************************************** 155 | * END "VARIABLES AND KEYFRAMES" 156 | ****************************************/ 157 | 158 | 159 | 160 | 161 | 162 | 163 | /***************************************** 164 | * 165 | * BEGIN "FEED GRID LAYOUT" 166 | * 167 | * Turn the feed table view to grid view. 168 | * 169 | ****************************************/ 170 | 171 | body:not(.reader) main#stream { 172 | display: grid; 173 | grid-template-columns: repeat(3, minmax(150px, 1fr)); 174 | gap: 4px; 175 | padding: 1.5rem; 176 | 177 | @media (max-width: 840px) { 178 | grid-template-columns: minmax(200px, 1fr); 179 | } 180 | 181 | @media (min-width: 600px) { 182 | grid-template-columns: repeat(2, minmax(200px, 1fr)); 183 | } 184 | 185 | @media (max-width: 600px) { 186 | grid-row-gap: 2rem; 187 | } 188 | 189 | @media (min-width: 1144px) { 190 | grid-template-columns: repeat(2, minmax(200px, 1fr)); 191 | } 192 | 193 | @media (min-width: 1360px) { 194 | grid-template-columns: repeat(3, minmax(240px, 1fr)); 195 | } 196 | 197 | @media (min-width: 1800px) { 198 | grid-template-columns: repeat(4, minmax(200px, 1fr)); 199 | } 200 | } 201 | 202 | 203 | /***************************************** 204 | * END "FEED GRID LAYOUT" 205 | ****************************************/ 206 | 207 | 208 | 209 | 210 | 211 | 212 | 213 | 214 | /***************************************** 215 | * 216 | * BEGIN "COMMON LAYOUT ELEMENTS" 217 | * 218 | * For misc. elements such as navigation, 219 | * structural titles, etc. 220 | * 221 | ****************************************/ 222 | 223 | @media (max-width: 840px) { 224 | body { 225 | padding-top: 61px; // Encompass mobile fixed header 226 | } 227 | } 228 | 229 | 230 | nav.aside.aside_feed { 231 | /* Position and adjust behavior of "Subscriptions management" button */ 232 | text-align: unset; 233 | 234 | /* Manage feeds ("Subscriptions management") button */ 235 | .stick.configure-feeds { 236 | position: relative; 237 | 238 | &:before { 239 | content: "Manage feeds"; 240 | position: absolute; 241 | top: 50%; 242 | left: 69px; 243 | transform: translateY(-50%); 244 | z-index: 1; 245 | font-weight: normal; 246 | pointer-events: none; 247 | } 248 | 249 | &:after { 250 | content: ""; 251 | position: absolute; 252 | top: 50%; 253 | left: 21px; 254 | transform: translateY(-50%); 255 | z-index: 1; 256 | filter: invert(1); 257 | width: 20px; 258 | height: 20px; 259 | pointer-events: none; 260 | background-repeat: no-repeat; 261 | /* RSS icon */ 262 | background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbDpzcGFjZT0icHJlc2VydmUiIHZpZXdCb3g9IjAgMCA0OTAgNDkwIj48cGF0aCBkPSJNNDY4LjIgNDg5LjVIMjAuOEM5LjQgNDg5LjUgMCA0ODAuMSAwIDQ2OC43VjIxLjNDMCA5LjkgOS40LjUgMjAuOC41aDQ0OC40QzQ4MC42LjUgNDkwIDkuOSA0OTAgMjEuM3Y0NDguNGMtMSAxMC40LTEwLjQgMTkuOC0yMS44IDE5Ljh6TTQwLjYgNDQ4LjloNDA3LjhWNDEuMUg0MC42djQwNy44eiIvPjxwYXRoIGQ9Ik0yNjAuMSA0MTkuOGMtMTEuNCAwLTIwLjgtOS40LTIwLjgtMjAuOCAwLTc3LTYyLjQtMTM5LjQtMTM5LjQtMTM5LjQtMTEuNCAwLTIwLjgtOS40LTIwLjgtMjAuOFM4OC41IDIxOCA5OS45IDIxOGM5OS45IDAgMTgxIDgxLjEgMTgxIDE4MSAwIDExLjQtOS40IDIwLjgtMjAuOCAyMC44eiIvPjxwYXRoIGQ9Ik0zNDcuNSA0MTkuOGMtMTEuNCAwLTIwLjgtOS40LTIwLjgtMjAuOCAwLTEyNC44LTEwMi0yMjcuOC0yMjcuOC0yMjcuOC0xMS40IDAtMjAuOC05LjQtMjAuOC0yMC44czkuNC0yMC44IDIwLjgtMjAuOGMxNDcuNyAwIDI2OC40IDEyMC43IDI2OC40IDI2OC40IDEgMTIuNC04LjQgMjEuOC0xOS44IDIxLjh6TTE3My43IDQxOS44Yy0xMS40IDAtMjAuOC05LjQtMjAuOC0yMC44IDAtMjkuMS0yMy45LTUzLjEtNTMuMS01My4xLTExLjQgMC0yMC44LTkuNC0yMC44LTIwLjhzOS40LTIwLjggMjAuOC0yMC44YzUyIDAgOTQuNyA0Mi43IDk0LjcgOTQuNyAwIDExLjQtOS4zIDIwLjgtMjAuOCAyMC44eiIvPjwvc3ZnPg==); 263 | } 264 | 265 | #btn-subscription, 266 | #btn-add { 267 | transition: 0s; 268 | } 269 | 270 | #btn-subscription:hover, 271 | #btn-subscription:hover ~ #btn-add, 272 | #btn-add:hover { 273 | background-color: #303136; 274 | } 275 | 276 | #btn-add { 277 | border-top-right-radius: 8px; 278 | border-bottom-right-radius: 8px; 279 | 280 | &:before { 281 | /* Hack: When hovering #btn-add, also highlight #btn-subscription */ 282 | content: ""; 283 | width: calc(100% - 68px); 284 | height: 100%; 285 | background: #303136; 286 | left: 8px; 287 | position: absolute; 288 | border-top-left-radius: 8px; 289 | border-bottom-left-radius: 8px; 290 | pointer-events: none; 291 | opacity: 0; 292 | transition: 0s; 293 | } 294 | 295 | &:hover { 296 | background-color: #424348; 297 | 298 | &:before { 299 | opacity: 1; 300 | } 301 | } 302 | } 303 | 304 | #btn-subscription { 305 | /* Hide text, later replace with psuedo element :before text */ 306 | font-size: 0; 307 | flex: 1; 308 | height: 52px; 309 | margin-left: 8px; 310 | border-top-left-radius: 8px; 311 | border-bottom-left-radius: 8px; 312 | } 313 | 314 | #btn-subscription, 315 | #btn-add { 316 | text-transform: capitalize; 317 | font-weight: normal; 318 | display: flex; 319 | align-items: center; 320 | background: none; 321 | box-sizing: border-box; 322 | } 323 | 324 | #btn-add { 325 | font-size: 1rem; 326 | border-top-right-radius: 8px; 327 | border-bottom-right-radius: 8px; 328 | background: none; 329 | border: none; 330 | width: 60px; 331 | display: flex; 332 | justify-content: center; 333 | align-items: center; 334 | 335 | .icon { 336 | filter: brightness(3); 337 | height: 1.5rem; 338 | } 339 | 340 | &:hover { 341 | background-color: #424348; 342 | } 343 | } 344 | } 345 | 346 | #mark-read-aside ul#sidebar { 347 | 348 | .tree-folder.category { 349 | .tree-folder-title .title { 350 | font-weight: normal; 351 | } 352 | } 353 | 354 | & > li.tree-folder ul.tree-folder-items li.item.feed > .dropdown { 355 | margin-right: 0; 356 | } 357 | 358 | /* Subscriptions ("Main stream") button */ 359 | .tree-folder.category.all { 360 | .tree-folder-title .title { 361 | font-size: 0; 362 | 363 | &:before { 364 | content: "Subscriptions"; 365 | } 366 | } 367 | 368 | .icon { 369 | opacity: 0; 370 | pointer-events: none; 371 | } 372 | 373 | .tree-folder-title:before { 374 | /* Video icon */ 375 | content:""; 376 | width:20px; 377 | height:20px; 378 | position: absolute; 379 | filter: invert(1); 380 | pointer-events: none; 381 | background-repeat: no-repeat; 382 | background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA4MDAgODAwIj48cGF0aCBkPSJNNzY2LjE5Ni43MzVIMzMuOTY2QzE1LjM1LjczNSAwIDE2LjA4NSAwIDM0Ljd2NjAxLjQyN2MwIDE4LjYxNiAxNS4zNSAzMy45NjcgMzMuOTY2IDMzLjk2N2g3MzAuNDMzYzE4LjYxNiAwIDMzLjk2Ni0xNS4zNTEgMzUuNTk5LTMyLjMzNFYzNC43MDFDODAwLjE2MiAxNi4wODUgNzg0LjgxMi43MzUgNzY2LjE5Ni43MzVabS0zMy45NjYgNjAzLjA2SDY2LjNWNjcuMDM0aDY2NS45M3Y1MzYuNzYxWk03NjYuMTk2IDczMS4zMzJIMzMuOTY2QzE1LjM1IDczMS4zMzIgMCA3NDYuNjgyIDAgNzY1LjI5OHMxNS4zNSAzMy45NjYgMzMuOTY2IDMzLjk2Nmg3MzAuNDMzYzE4LjYxNiAwIDM1LjU5OS0xNS4zNSAzNS41OTktMzMuOTY2LjE2NC0xOC43OC0xNS4xODYtMzMuOTY2LTMzLjgwMi0zMy45NjZaIi8+PHBhdGggZD0iTTUxNi40MDggMzA4LjIwOCAzNDYuNjEyIDE5NC40MTJjLTIyLjIwNC0xNC41My01MC45MzkgMi4xMjMtNTAuOTM5IDI3LjEwMnYyMjcuNTkyYzAgMjYuMjg2IDI4LjczNSA0MS40NjkgNTAuOTM5IDI3LjEwMmwxNjkuNzk2LTExMy43OTZjMTUuMTg0LTguMTYzIDI0LjY1My0zNi4yNDUgMC01NC4yMDRabS0xNTQuNjEyIDc4LjA0MVYyODQuMzcxbDc2LjQwOCA1MC45MzktNzYuNDA4IDUwLjkzOVoiLz48L3N2Zz4=); 383 | } 384 | } 385 | 386 | 387 | /* Important feeds button */ 388 | .tree-folder.category.important { 389 | .tree-folder-title .title { 390 | font-size: 0; 391 | 392 | &:before { 393 | content: "Important"; 394 | } 395 | } 396 | 397 | .icon { 398 | opacity: 0; 399 | pointer-events: none; 400 | } 401 | 402 | .tree-folder-title:before { 403 | /* Bell icon */ 404 | content:""; 405 | width:20px; 406 | height:20px; 407 | position: absolute; 408 | filter: invert(1); 409 | background-repeat: no-repeat; 410 | background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbDpzcGFjZT0icHJlc2VydmUiIHZpZXdCb3g9IjAgMCA0ODcuNzcgNDg3Ljc3Ij48cGF0aCBkPSJNNDg2LjIgMjEwLjI2Yy02LjMtMTguOC0yNi4xLTIxLjktNDQuOC0yNS0xOS44LTMuMS00Mi43LTYuMy01OS40LTI0LTc2LjEtODMuNC0xNDEuOC0xMDEuMS0xODMuNS0xMDIuMS0xNy43LS41LTM0LjYgMi4yLTUwLjMgNy44LTMuOC0zNy40LTM1LjUtNjYuOC03My45LTY2LjhDMzMuMy4xNiAwIDMzLjQ2IDAgNzQuNDZjMCAzOC44IDI5LjggNzAuNyA2Ny43IDc0LTUuNiAxNS44LTguMyAzMi42LTcuOCA1MC40IDEgNDEuNyAxOS44IDEwNi4zIDEwMi4yIDE4My41IDE3LjcgMTYuNyAyMC45IDM5LjYgMjQgNTkuNCAzLjEgMTguOCA2IDM5LjUgMjUgNDQuOCAyMC4xIDUuNiA0Ny0xMSA5NC01NC41IDE3LjEgMTYuMyA0MC4yIDI1LjkgNjQuMyAyNS45IDUxLjIgMCA5Mi45LTQxLjcgOTIuOS05Mi45IDAtMjQuNi05LjgtNDgtMjYuOC02NS4zIDQ5LjUtNTQgNTYuMS03MS43IDUwLjctODkuNXpNNDAuOSA3NC40NmMwLTE4LjQgMTQuOS0zMy4zIDMzLjMtMzMuM3MzMy4zIDE0LjkgMzMuMyAzMy4zLTE0LjkgMzMuMy0zMy4zIDMzLjMtMzMuMy0xNC45LTMzLjMtMzMuM3ptMzI4LjQgMzQyLjVjLTEzIDAtMjUuMi00LjgtMzQuNi0xMy4xIDExLjEtMTEuMSA2My02NS4xIDcyLjQtNzQuMyA4LjkgOS41IDE0LjEgMjIuMiAxNC4xIDM1LjUgMCAyOC42LTIzLjMgNTEuOS01MS45IDUxLjl6bS0xNDIuNyAyNy45YzAtMy4xLTkuNC02NS43LTM3LjUtOTEuNy01Ny4zLTUzLjItODcuNi0xMDYuMy04OC42LTE1NC4zIDAtMjguMSAxOC42LTEwMC4yIDk4LTk5IDQ4IC43IDEwMS4xIDMxLjMgMTU0LjMgODguNiAyNi4xIDI4LjEgODguNiAzNy41IDkxLjcgMzcuNS0xNC43IDI2LjgtMTkyIDIwNC42LTIxNy45IDIxOC45eiIvPjwvc3ZnPg==); 411 | } 412 | } 413 | 414 | 415 | /* Favorites button */ 416 | .tree-folder.category.favorites { 417 | .icon { 418 | opacity: 0; 419 | pointer-events: none; 420 | } 421 | 422 | .tree-folder-title:before { 423 | /* Star icon */ 424 | content:""; 425 | width:20px; 426 | height:20px; 427 | position: absolute; 428 | filter: invert(1); 429 | pointer-events: none; 430 | background-repeat: no-repeat; 431 | background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGZpbGw9Im5vbmUiIHZpZXdCb3g9IjAgMCAyNCAyNCI+PGcgY2xpcC1wYXRoPSJ1cmwoI2EpIj48cGF0aCBzdHJva2U9IiMwMDAiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgc3Ryb2tlLXdpZHRoPSIyIiBkPSJNMTEuMDkxIDIuNjM1Yy4yODgtLjY0Ny40MzItLjk3LjYzMy0xLjA3YS42MjEuNjIxIDAgMCAxIC41NTIgMGMuMjAxLjEuMzQ1LjQyMy42MzMgMS4wN2wyLjI5NCA1LjE1Yy4wODUuMTkyLjEyOC4yODcuMTk0LjM2LjA1OC4wNjUuMTMuMTE3LjIwOS4xNTMuMDkuMDQuMTk0LjA1LjQwMi4wNzNsNS42MDMuNTkyYy43MDMuMDc0IDEuMDU1LjExMSAxLjIxMi4yNzEuMTM2LjE0LjE5OS4zMzQuMTcuNTI3LS4wMzIuMjIxLS4yOTUuNDU4LS44Mi45MzJsLTQuMTg2IDMuNzc2Yy0uMTU1LjE0LS4yMzMuMjEtLjI4Mi4yOTVhLjYyNC42MjQgMCAwIDAtLjA4LjI0NmMtLjAxLjA5OC4wMTEuMi4wNTUuNDA1bDEuMTY5IDUuNTE3Yy4xNDcuNjkzLjIyIDEuMDQuMTE2IDEuMjM4YS42MjIuNjIyIDAgMCAxLS40NDcuMzI1Yy0uMjIuMDM3LS41MjctLjE0LTEuMTQtLjQ5M2wtNC44OC0yLjgxOGMtLjE4Mi0uMTA1LS4yNzItLjE1Ny0uMzY5LS4xNzdhLjYyMi42MjIgMCAwIDAtLjI1OCAwYy0uMDk3LjAyLS4xODcuMDcyLS4zNjguMTc3bC00Ljg4MSAyLjgxOGMtLjYxMy4zNTQtLjkyLjUzLTEuMTQuNDkzYS42MjIuNjIyIDAgMCAxLS40NDctLjMyNWMtLjEwNC0uMTk5LS4wMy0uNTQ1LjExNi0xLjIzOGwxLjE3LTUuNTE3Yy4wNDMtLjIwNC4wNjQtLjMwNy4wNTQtLjQwNWEuNjI0LjYyNCAwIDAgMC0uMDgtLjI0NmMtLjA0OS0uMDg1LS4xMjctLjE1NS0uMjgyLS4yOTVsLTQuMTg1LTMuNzc2Yy0uNTI2LS40NzQtLjc4OS0uNzEtLjgyMS0uOTMyYS42MjMuNjIzIDAgMCAxIC4xNy0uNTI3Yy4xNTctLjE2LjUwOS0uMTk3IDEuMjEyLS4yNzFsNS42MDQtLjU5MmMuMjA4LS4wMjIuMzEyLS4wMzMuNDAxLS4wNzNhLjYyMi42MjIgMCAwIDAgLjIxLS4xNTJjLjA2NS0uMDc0LjEwOC0uMTcuMTkzLS4zNmwyLjI5NC01LjE1MVoiLz48L2c+PGRlZnM+PGNsaXBQYXRoIGlkPSJhIj48cGF0aCBkPSJNMCAwaDI0djI0SDB6Ii8+PC9jbGlwUGF0aD48L2RlZnM+PC9zdmc+); 432 | } 433 | } 434 | 435 | /* Playlists ("My labels") button */ 436 | #tags { 437 | /* Always display Playlist ("My Labels") button */ 438 | display: list-item !important; 439 | 440 | .tree-folder-title .title { 441 | font-size: 0; 442 | 443 | &:before { 444 | content: "Playlists"; 445 | } 446 | } 447 | 448 | button.dropdown-toggle .icon { 449 | /* Hide playlist ("My Labels") dropdown toggle icon while keeping its functionality */ 450 | opacity: 0; 451 | } 452 | 453 | & > .tree-folder-items .item.feed .item-title .icon { 454 | /* Remove tag item icons */ 455 | display: none; 456 | } 457 | 458 | .tree-folder-title:before { 459 | /* Playlist icon */ 460 | content:""; 461 | width:20px; 462 | height:20px; 463 | position: absolute; 464 | filter: invert(1); 465 | background-repeat: no-repeat; 466 | background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGZpbGw9Im5vbmUiIHZpZXdCb3g9IjAgMCA4MDAgODAwIj48cGF0aCBmaWxsPSIjMDAwIiBkPSJNMCA5MC41QTM3LjUgMzcuNSAwIDAgMSAzNy41IDUzaDcyNUEzNy40OTcgMzcuNDk3IDAgMCAxIDgwMCA5MC41YTM3LjUgMzcuNSAwIDAgMS0zNy41IDM3LjVoLTcyNUEzNy40OTggMzcuNDk4IDAgMCAxIDAgOTAuNVpNMzcuNSAzMjhoNzI1YTM3LjQ5NiAzNy40OTYgMCAwIDAgMjYuNTE2LTEwLjk4NCAzNy40OTYgMzcuNDk2IDAgMCAwIDAtNTMuMDMzQTM3LjUgMzcuNSAwIDAgMCA3NjIuNSAyNTNoLTcyNUEzNy41MDIgMzcuNTAyIDAgMCAwIDAgMjkwLjUgMzcuNDk3IDM3LjQ5NyAwIDAgMCAzNy41IDMyOFptMjQ0IDEyNWgtMjQ0QTM3LjUwMiAzNy41MDIgMCAwIDAgMCA0OTAuNSAzNy40OTcgMzcuNDk3IDAgMCAwIDM3LjUgNTI4aDI0NGEzNy41IDM3LjUgMCAwIDAgMC03NVpNMzcuNSA2NTNoMjQ0YTM3LjUgMzcuNSAwIDAgMSAwIDc1aC0yNDRhMzcuNDk5IDM3LjQ5OSAwIDAgMSAwLTc1WiIvPjxwYXRoIHN0cm9rZT0iIzAwMCIgc3Ryb2tlLXdpZHRoPSI2NSIgZD0iTTYzNi44MzMgNDY5Ljg4YzgwLjExOCA0Ni4zNTggMTIwLjE4MSA2OS41MzQgMTI2LjA2MiAxMDIuOTc0YTcyLjkzNyA3Mi45MzcgMCAwIDEgMCAyNS4yOTNjLTUuODgxIDMzLjQzOS00NS45NDQgNTYuNjE1LTEyNi4wNjIgMTAyLjk3My04MC4xMTcgNDYuMzUzLTEyMC4xODEgNjkuNTI5LTE1Mi4wMTggNTcuOTE2YTcyLjU2NiA3Mi41NjYgMCAwIDEtMjEuODU4LTEyLjY0NkM0MzcgNzI0LjU2MyA0MzcgNjc4LjIxIDQzNyA1ODUuNWMwLTkyLjcxIDAtMTM5LjA2MyAyNS45NTctMTYwLjg5YTcyLjY3IDcyLjY3IDAgMCAxIDIxLjg1OC0xMi42NDZjMzEuODM3LTExLjYxMyA3MS45MDEgMTEuNTY0IDE1Mi4wMTggNTcuOTE2WiIvPjwvc3ZnPg==); 467 | } 468 | } 469 | 470 | } 471 | 472 | /** 473 | * Side navigation button label font adjustment: 474 | * - Manage feed ("Subscriptions management") 475 | * - Subscriptions ("Main stream") 476 | * - Important 477 | * - Favorites 478 | * - Playlists ("My labels") 479 | * - User's category 480 | */ 481 | .stick.configure-feeds:before, 482 | .tree-folder.category.all .tree-folder-title .title:before, 483 | .tree-folder.category.important .tree-folder-title .title:before, 484 | .tree-folder.category.favorites .tree-folder-title .title:before, 485 | #tags .tree-folder-title .title:before, 486 | .tree-folder.category .tree-folder-title .title { 487 | font-size: 1.2rem; 488 | letter-spacing: 1px; 489 | font-weight: normal; 490 | } 491 | 492 | 493 | /* Keep "Subscriptions management" button sticky on scroll */ 494 | .stick.configure-feeds { 495 | position: sticky; 496 | top: 20px; 497 | z-index: 10; 498 | width: 292px; 499 | } 500 | 501 | @media (max-width: 840px) { 502 | .stick.configure-feeds { 503 | width: calc(100% - 8px); 504 | } 505 | } 506 | 507 | #mark-read-aside { 508 | top: calc(20px + 52px); /* Padding-top of container + height of "Subscriptions management" button */ 509 | } 510 | } 511 | 512 | 513 | /* Settings page buttons */ 514 | #aside_feed .item.nav-section a[href="./?c=tag"] { 515 | font-size: 0; 516 | 517 | &:before { 518 | content: "Playlist management"; 519 | font-size: 1.2rem; 520 | } 521 | } 522 | 523 | /* Change text in settings page containing "Label" to "Playlist" */ 524 | main.post:has(#add_tag) { 525 | > h1:first-of-type { 526 | font-size: 0; 527 | 528 | &:before { 529 | content: "Playlist management"; 530 | font-size: 2rem; 531 | } 532 | } 533 | 534 | > h2:first-of-type { 535 | font-size: 0; 536 | 537 | &:before { 538 | content: "Create a playlist"; 539 | font-size: 1.5rem; 540 | } 541 | } 542 | } 543 | 544 | @media (max-width: 840px) { 545 | .header { 546 | // Header on mobile 547 | position: fixed; 548 | top: 0; 549 | left: 0; 550 | z-index: 50; 551 | 552 | &:has(.configure .dropdown-target:target) { 553 | // On mobile, prevent the fixed hamburger menu `nav_menu .toggle_aside` 554 | // to sit on top of the settings menu. Applies for feed and non-feed pages. 555 | z-index: 110; 556 | } 557 | 558 | .configure .dropdown .dropdown-menu { 559 | // Remove gap on left side. 560 | left: 0 !important; 561 | } 562 | } 563 | 564 | #slider { 565 | 566 | .btn.toggle_aside { 567 | // Reset fixed navigation for non-feed pages. 568 | max-width: 49px; 569 | margin: 0; 570 | padding: 0.85rem 1.25rem; 571 | background: #303136; 572 | border: none; 573 | 574 | &:hover { 575 | background-color: #424348; 576 | } 577 | } 578 | } 579 | 580 | .aside { 581 | &:target ~ aside#slider a.toggle_aside { 582 | // Hide the fixed hamburger menu on non-feed page when its `aside_feed` menu is opened, 583 | // to prevent overlapping. 584 | opacity: 0; 585 | pointer-events: none; 586 | transition: opacity 0s; 587 | } 588 | 589 | & ~ aside#slider a.toggle_aside { 590 | // Fade in the hamburger menu on non-feed page, 591 | // to prevent abrupt display of the button while `aside_feed` is being collapse animated. 592 | transition: opacity 0.3s; 593 | } 594 | 595 | } 596 | 597 | 598 | 599 | body:not(.normal) #aside_feed.nav.nav-list.aside { 600 | padding-top: 0; 601 | } 602 | 603 | } 604 | 605 | .header { 606 | min-height: 61px; 607 | box-sizing: border-box; 608 | 609 | 610 | /* Page logo */ 611 | .item.title { 612 | position: relative; 613 | text-align: unset; 614 | padding-left: 5px; 615 | min-height: 61px; 616 | box-sizing: border-box; 617 | 618 | & > a { 619 | align-content: center; 620 | } 621 | 622 | 623 | @media (max-width: 840px) { 624 | /* Center logo as sidenav toggle button is on the left side for mobile view */ 625 | display: flex; 626 | justify-content: center; 627 | position: absolute; 628 | width: 100%; 629 | } 630 | } 631 | 632 | /* Header search bar */ 633 | .item.search { 634 | input { 635 | width: 600px; 636 | padding: 0.8rem 1.6rem; 637 | border-top-left-radius: 99px; 638 | border-bottom-left-radius: 99px; 639 | 640 | &:focus, 641 | &:hover { 642 | background-color: #26272a; 643 | color: white; 644 | 645 | & ~ .btn { 646 | background-color: #57575a; 647 | } 648 | } 649 | } 650 | 651 | .btn { 652 | border-top-right-radius: 99px; 653 | border-bottom-right-radius: 99px; 654 | width: 75px; 655 | 656 | &:hover { 657 | background-color: #57575a; 658 | } 659 | } 660 | } 661 | 662 | /* Header settings button */ 663 | .item.configure .btn { 664 | width: 46px; 665 | height: 46px; 666 | display: flex; 667 | align-items: center; 668 | justify-content: center; 669 | background: #26272a; 670 | border-radius: 50%; 671 | padding: 0; 672 | box-sizing: border-box; 673 | 674 | &:hover { 675 | background-color: #57575a; 676 | } 677 | 678 | > img { 679 | /* Sizing for default settings button */ 680 | width: 18px; 681 | height: 18px; 682 | } 683 | 684 | /* 685 | > img { 686 | // Hide default settings icon 687 | opacity: 0; 688 | pointer-events: none; 689 | } 690 | 691 | // Issue with loading base64 image in settings page due to "Content Security Policy directive: "default-src 'self'". 692 | &:before { 693 | // User icon 694 | content:""; 695 | width: 20px; 696 | height: 20px; 697 | position: absolute; 698 | filter: invert(1); 699 | background-repeat: no-repeat; 700 | background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+PHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBkPSJNMTIgMy4yYy0xLjg2NCAwLTMuMzc1IDEuNDc3LTMuMzc1IDMuMyAwIDEuODIzIDEuNTExIDMuMyAzLjM3NSAzLjNzMy4zNzUtMS40NzcgMy4zNzUtMy4zYzAtMS44MjMtMS41MTEtMy4zLTMuMzc1LTMuM1pNNi4zNzUgNi41QzYuMzc1IDMuNDYyIDguODkzIDEgMTIgMXM1LjYyNSAyLjQ2MiA1LjYyNSA1LjVTMTUuMTA3IDEyIDEyIDEyIDYuMzc1IDkuNTM4IDYuMzc1IDYuNVpNMTIgMTUuM2MtMy43MjggMC02Ljc1IDIuOTU1LTYuNzUgNi42IDAgLjYwOC0uNTA0IDEuMS0xLjEyNSAxLjFBMS4xMTMgMS4xMTMgMCAwIDEgMyAyMS45YzAtNC44NiA0LjAzLTguOCA5LTguOHM5IDMuOTQgOSA4LjhjMCAuNjA4LS41MDQgMS4xLTEuMTI1IDEuMWExLjExMyAxLjExMyAwIDAgMS0xLjEyNS0xLjFjMC0zLjY0NS0zLjAyMi02LjYtNi43NS02LjZaIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiLz48L3N2Zz4=); 701 | } 702 | */ 703 | } 704 | } 705 | 706 | @media (max-width: 840px) { 707 | 708 | header.header { 709 | .item.configure { 710 | display: flex; 711 | align-items: center; 712 | height: 50px; 713 | justify-content: flex-end; 714 | padding-right: 14px; 715 | 716 | .btn { 717 | width: 40px; 718 | height: 40px; 719 | } 720 | } 721 | } 722 | 723 | #global .nav_menu { 724 | 725 | a.btn[href="#aside_feed"] { 726 | /* Place mobile sidenav expand button toggle on header */ 727 | position: fixed; 728 | top: 0; 729 | left: 0; 730 | min-height: 61px; 731 | box-sizing: border-box; 732 | border-radius: 0; 733 | z-index: 60; 734 | 735 | .icon { 736 | /* Hide existing sidenav toggle icon */ 737 | display: none; 738 | } 739 | 740 | &:after { 741 | /* Add new sidenav toggle icon */ 742 | content: ""; 743 | display: block; 744 | width: 14px; 745 | height: 36px; // For centering the icon vertically, actual icon size is determined by the width. 746 | background-image: url('../themes/Mapco/icons/view-normal.svg'); // Existing image from FreshRSS theme "Mapco" 747 | background-size: contain; 748 | background-position: center; 749 | background-repeat: no-repeat; 750 | filter: brightness(3); 751 | } 752 | } 753 | 754 | .item.configure { 755 | 756 | .btn { 757 | width: 40px; 758 | height: 40px; 759 | } 760 | } 761 | 762 | 763 | } 764 | 765 | 766 | 767 | } 768 | 769 | 770 | 771 | 772 | /* End of feed footer */ 773 | main#stream #stream-footer, 774 | #overlay #panel #stream-footer { 775 | grid-column: 1 / -1; 776 | border-top: none; 777 | margin-top: 3rem; 778 | 779 | .stream-footer-inner { 780 | /* Hide text, then, apply new text using psuedo element :before/:after */ 781 | font-size: 0; 782 | display: flex; 783 | flex-direction: column; 784 | 785 | &:before { 786 | content: "(╯°□°)╯︵ ┻━┻"; 787 | font-size: 2.4rem; 788 | margin-bottom: 2rem; 789 | opacity: 0.75; 790 | } 791 | 792 | &:after { 793 | content: "You've reached the end"; 794 | font-size: 1.4rem; 795 | order: -1; 796 | margin-bottom: 0.5rem; 797 | opacity: 0.75; 798 | } 799 | } 800 | 801 | button#bigMarkAsRead { 802 | /* Mark as read button */ 803 | border-radius: 12px; 804 | margin-top: 4rem; 805 | padding-left: 8px; 806 | padding-right: 8px; 807 | padding-top: 1rem; 808 | padding-bottom: 2rem; 809 | margin-bottom: 0; 810 | max-width: 600px; 811 | margin-left: auto; 812 | margin-right: auto; 813 | } 814 | } 815 | 816 | #load_more.loading, 817 | #load_more.loading:hover { 818 | /* Infinite scroll loading spinner */ 819 | border-radius: 8px; 820 | } 821 | 822 | /* Feed menu */ 823 | .nav_menu { 824 | padding: 2rem 1rem 0 1rem; 825 | box-sizing: border-box; 826 | 827 | #nav_menu_actions { 828 | flex-wrap: wrap; 829 | } 830 | 831 | #mark-read-menu { 832 | align-items: center; 833 | 834 | .read_all.btn { 835 | width: 100%; 836 | height: 100%; 837 | } 838 | } 839 | 840 | } 841 | 842 | /* Card day section title */ 843 | main#stream .day { 844 | grid-column: 1 / -1; 845 | font-size: var(--feed-day-title-font-size); 846 | opacity: 0.8; 847 | padding: 0 8px; 848 | line-height: 1.2; 849 | margin-top: 8rem; 850 | margin-bottom: 2rem; 851 | 852 | 853 | .date, 854 | .name { 855 | display: none; 856 | } 857 | 858 | &#day_before_yesterday { 859 | /* Hide text, then, apply new text using psuedo element :before */ 860 | font-size: 0 !important; 861 | 862 | &:before { 863 | content: "Past"; 864 | font-size: var(--feed-day-title-font-size); 865 | } 866 | } 867 | } 868 | 869 | main#stream { 870 | /* Reduce margin-top on the first day that appears at the top of the feed */ 871 | #new-article + .day { 872 | margin-top: 2rem; 873 | } 874 | 875 | /* Hide title "Past" if it is the only day-title on the feed */ 876 | #new-article + #day_before_yesterday { 877 | visibility: hidden; 878 | margin-bottom: 0; 879 | pointer-events: none; 880 | user-select: none; 881 | } 882 | 883 | .flux:has(li.item.labels .item-element.dropdown .dropdown-target:target) { 884 | /* Prevent card item favicon avatar to be placed above Playlist (labels) dropdown */ 885 | z-index: 20; 886 | } 887 | 888 | } 889 | 890 | 891 | 892 | 893 | 894 | a.signout img.icon { 895 | display: none; 896 | } 897 | 898 | 899 | /***************************************** 900 | * 901 | * BEGIN "CARD" 902 | * 903 | * Feed items are referred to as cards, 904 | * as they're styled as grid cells opposed 905 | * to FreshRSS' table view. 906 | * 907 | ****************************************/ 908 | 909 | /* Cards default state in feed */ 910 | body:not(.reader) main#stream div.flux { 911 | display: flex; 912 | flex-direction: column; 913 | align-items: center; 914 | border-radius: 12px; 915 | margin-bottom: auto; /* Prevents card from becoming incredibly tall affected by other grid cells, e.g. #bigMarkAsRead. */ 916 | 917 | /* Card hover effect */ 918 | &:not(.active):hover { 919 | background-color: hsl(0deg 0% 0% / 6%); 920 | } 921 | 922 | &:not(.not_read), 923 | &.favorite:not(.current), 924 | &:not(.current):hover .item .title { 925 | background: unset; 926 | background-color: unset; 927 | } 928 | 929 | /* Card container */ 930 | .flux_header { 931 | /* In card default state, the header is the card container itself, unlike in card expended view where it is used as a header/toolbar. */ 932 | border-radius: 12px; 933 | display: flex; 934 | flex-direction: row; 935 | flex-wrap: wrap; 936 | height: 100%; 937 | max-width: 100%; 938 | padding: 8px; 939 | box-sizing: border-box; 940 | border: none; 941 | background: unset; 942 | 943 | &:hover, 944 | &:hover:not(.current):hover .item .title { 945 | /* Prevent background change on hover. */ 946 | background-color: unset; 947 | background: unset; 948 | } 949 | 950 | 951 | &:before { 952 | // Decorative attr(data-article-authors) text on thumbnail placeholder, visible for feeds without images 953 | // Alternative: content: attr(data-website-name); 954 | content: attr(data-article-authors); 955 | position: absolute; 956 | top: 0; 957 | left: 0; 958 | z-index: 0; 959 | width: calc(100% - 24px); 960 | height: 0; 961 | padding-top: 16%; 962 | padding-bottom: calc(40.2% - 12px); 963 | padding-left: 20px; 964 | font-size: min(1.7rem,5vw); 965 | color: #fff; 966 | box-sizing: border-box; 967 | overflow: hidden; 968 | background: linear-gradient(to right, #5c8dff, #4cffdd); 969 | background-clip: border-box; 970 | background-clip: border-box; 971 | -webkit-background-clip: text; 972 | -webkit-text-fill-color: rgba(0,0,0,0); 973 | } 974 | 975 | .item.titleAuthorSummaryDate { 976 | display: flex; 977 | flex-direction: column; 978 | width: 100%; 979 | margin: 4px 0; 980 | 981 | 982 | @media (min-width: 600px) { 983 | & { 984 | /* Hack: On desktop, keep position consistent while allowing 100% vertical stretch of .flux and .flux-header */ 985 | height: 105px; 986 | } 987 | } 988 | 989 | 990 | a.item-element.title.multiline { 991 | display: flex; 992 | flex-direction: column; 993 | padding: 0; 994 | position: static; 995 | padding-left: 2px; 996 | padding-right: 2px; 997 | min-width: unset; 998 | font-size: 1.2rem; 999 | white-space: normal; 1000 | display: -webkit-box; 1001 | -webkit-box-orient: vertical; 1002 | -webkit-line-clamp: 4; 1003 | line-clamp: 4; 1004 | overflow: hidden; 1005 | 1006 | .author { 1007 | padding: 0; 1008 | display: block; 1009 | margin-top: 4px; 1010 | font-size: 1rem; 1011 | line-height: 1.2; 1012 | color: hsla(0, 0%, 100%, 0.59); 1013 | } 1014 | } 1015 | 1016 | span.item-element.date { 1017 | padding: 0; 1018 | position: static; 1019 | text-align: left; 1020 | margin-top: 4px; 1021 | padding-left: 2px; 1022 | padding-right: 2px; 1023 | display: flex; 1024 | width: 100%; 1025 | font-size: 1rem; 1026 | } 1027 | } 1028 | 1029 | .item.thumbnail { 1030 | /* Card thumbnail */ 1031 | position: relative; 1032 | 1033 | order: -1; /* Position thumbnail first within card, at the top */ 1034 | width: 100%; 1035 | height: auto; 1036 | aspect-ratio: 16 / 9; 1037 | flex: 0 0 100%; 1038 | box-sizing: border-box; 1039 | margin-bottom: 4px; 1040 | padding: 0; 1041 | overflow: hidden; 1042 | 1043 | img { 1044 | position: relative; 1045 | width: 100%; 1046 | height: auto; 1047 | border-radius: 12px; 1048 | background: #303136; 1049 | aspect-ratio: 16 / 9; 1050 | object-fit: cover; 1051 | object-position: center; 1052 | z-index: 1; 1053 | } 1054 | 1055 | &:before { 1056 | // Placeholder for empty thumbnails 1057 | content: ""; 1058 | width: 100%; 1059 | position: absolute; 1060 | top: 0; 1061 | left: 0; 1062 | padding-top: 56.25%; 1063 | background-color: #303136; 1064 | background-image: linear-gradient(45deg, #121417, #17253f); 1065 | border-radius: 12px; 1066 | z-index: 0; 1067 | } 1068 | } 1069 | 1070 | } 1071 | 1072 | } 1073 | 1074 | /* Card expanded state in feed */ 1075 | body:not(.reader) main#stream div.flux.active.current { 1076 | 1077 | /* Card expanded header, serves as a top panel. */ 1078 | .flux_header { 1079 | position: sticky; 1080 | top: -4px; 1081 | left: 0; 1082 | background-color: var(--frss-background-color, white); 1083 | z-index: 1; 1084 | padding: 12px; 1085 | margin-top: -4px; 1086 | border-bottom-left-radius: 2px; 1087 | border-bottom-right-radius: 2px; 1088 | pointer-events: none; /* Prevents card header clicks from closing the rss item. */ 1089 | 1090 | 1091 | .item a, 1092 | .item .dropdown-close, 1093 | .item .dropdown-menu { 1094 | /* Reenable action buttons within card header */ 1095 | pointer-events: all; 1096 | } 1097 | 1098 | .item .dropdown-menu { 1099 | z-index: 1100; 1100 | 1101 | li.item.share { 1102 | min-width: 100%; 1103 | margin: 0; 1104 | } 1105 | } 1106 | 1107 | .item.titleAuthorSummaryDate { 1108 | display: flex; 1109 | flex-direction: column; 1110 | flex-wrap: wrap; 1111 | order: -1; 1112 | min-width: unset; 1113 | flex: 0 0 100%; 1114 | margin-bottom: 6px; 1115 | z-index: 10; 1116 | height: auto; 1117 | 1118 | 1119 | /* Card title */ 1120 | a { 1121 | /* Shorten width to prevent overlap with close button. */ 1122 | max-width: calc(100% - 50px); 1123 | pointer-events: none; 1124 | } 1125 | 1126 | .item-element.date { 1127 | /* Hide date in theater mode to save vertical space */ 1128 | display: none; 1129 | } 1130 | } 1131 | 1132 | 1133 | li.item.website { 1134 | /* Hide website icon in theater mode expanded view */ 1135 | display: none; 1136 | } 1137 | 1138 | li.item.thumbnail { 1139 | /* Hide thumbnail in theater mode expanded view */ 1140 | display: none; 1141 | } 1142 | 1143 | } 1144 | 1145 | /* Card content container */ 1146 | article { 1147 | display: flex; 1148 | flex-direction: column; 1149 | background-color: hsl(0deg 0% 9%); 1150 | } 1151 | } 1152 | 1153 | /* Card icons and button behavior */ 1154 | body:not(.reader) main#stream { 1155 | div.flux { 1156 | 1157 | li.item.share, 1158 | li.item.labels { 1159 | /** 1160 | * Specific adjustment due to these card buttons containing dropdown menu 1161 | * - Share button 1162 | * - Playlists button (labels) 1163 | */ 1164 | 1165 | &:has(.dropdown-target:target) { 1166 | /* Temporarily elevate z-index to prevent other buttons to show on top of dropdown. */ 1167 | z-index: 15; 1168 | } 1169 | 1170 | .item-element.dropdown { 1171 | display: flex; 1172 | width: 100%; 1173 | height: 100%; 1174 | padding: 0; 1175 | 1176 | a.dropdown-toggle { 1177 | /* Make button clickable across the entire button area, opposed to only the icon. */ 1178 | width: 100%; 1179 | display: inline-flex; 1180 | margin: 0; 1181 | padding: 0; 1182 | height: 100%; 1183 | border-radius: 999px; 1184 | justify-content: center; 1185 | align-items: center; 1186 | gap: 4px; 1187 | } 1188 | } 1189 | } 1190 | 1191 | .flux_header { 1192 | .summary { 1193 | /* No support for summary */ 1194 | display: none; 1195 | } 1196 | 1197 | li.item.manage a, 1198 | li.item.website.icon a, 1199 | li.item.link a, 1200 | li.item.labels a, 1201 | li.item.share > a { 1202 | display: flex; 1203 | align-items: center; 1204 | justify-content: center; 1205 | height: 100%; 1206 | box-sizing: border-box; 1207 | } 1208 | 1209 | li.item.website.full, 1210 | li.item.website.name { 1211 | /* For user's who set website setting to "icon and name" or "name" */ 1212 | a { 1213 | color: white; 1214 | padding: 0; 1215 | } 1216 | } 1217 | 1218 | li.item.manage, 1219 | li.item.website.icon, 1220 | li.item.website.full, 1221 | li.item.link, 1222 | li.item.labels, 1223 | li.item.share { 1224 | flex: 1; 1225 | background-color: unset; 1226 | display: inline-flex; 1227 | height: auto; 1228 | justify-content: center; 1229 | border-radius: 999px; 1230 | margin: 0 2px; 1231 | padding: 0; 1232 | z-index: 10; 1233 | transition: background-color 0.1s; 1234 | order: 2; 1235 | min-height: 34px; 1236 | 1237 | li.item.share { 1238 | width: 100%; 1239 | } 1240 | 1241 | a { 1242 | padding: 4px 6px; 1243 | text-align: center; 1244 | width: 100%; 1245 | } 1246 | 1247 | &:nth-child(2) { 1248 | /* Place favorite button to the far left */ 1249 | order: 1; 1250 | } 1251 | 1252 | &:hover { 1253 | background-color: hsla(0, 0%, 100%, 0.08) 1254 | } 1255 | } 1256 | 1257 | 1258 | li.item.labels { 1259 | 1260 | .dropdown-header { 1261 | display: flex; 1262 | font-size: 0; 1263 | 1264 | &:before { 1265 | content: "Playlists"; 1266 | letter-spacing: 1px; 1267 | text-transform: uppercase; 1268 | font-size: 1rem; 1269 | } 1270 | 1271 | a[href="./?c=tag"] { 1272 | margin-left: 8px; 1273 | font-size: 1rem; 1274 | visibility: visible; 1275 | width: unset; 1276 | } 1277 | } 1278 | 1279 | .item-element.dropdown:not(:has(.dropdown-target:target)) { 1280 | /* Playlists button (labels) on card: Hide close button as it displays even after onblur. */ 1281 | a.dropdown-close { 1282 | display: none; 1283 | } 1284 | } 1285 | 1286 | } 1287 | 1288 | 1289 | li.item.manage:hover, 1290 | li.item.website.icon:hover, 1291 | li.item.link:hover, 1292 | li.item.labels:hover, 1293 | li.item.share:hover { 1294 | background-color: hsla(0, 0%, 100%, 0.08) 1295 | } 1296 | 1297 | &:not(.active) { 1298 | li.item.manage a, 1299 | li.item.website.icon a, 1300 | li.item.link a, 1301 | li.item.labels a, 1302 | li.item.share a { 1303 | /* Hide card actions by default */ 1304 | visibility: hidden; 1305 | background-color: unset; 1306 | } 1307 | 1308 | &:hover { 1309 | /* Display card actions on hover */ 1310 | li.item.manage a, 1311 | li.item.website.icon a, 1312 | li.item.link a, 1313 | li.item.labels a, 1314 | li.item.share a { 1315 | visibility: visible; 1316 | } 1317 | } 1318 | 1319 | @media (max-width: 600px) { 1320 | /* Always display card actions on mobile */ 1321 | li.item.manage a, 1322 | li.item.website.icon a, 1323 | li.item.link a, 1324 | li.item.labels a, 1325 | li.item.share a { 1326 | visibility: visible !important; 1327 | } 1328 | } 1329 | } 1330 | 1331 | .website a:hover .favicon, 1332 | a.website:hover .favicon { 1333 | /* Disable greyscale effect on website icon hover */ 1334 | filter: unset; 1335 | } 1336 | 1337 | li.item.share { 1338 | order: 3; 1339 | } 1340 | } 1341 | 1342 | &.active.current .flux_header { 1343 | li.item.manage a, 1344 | li.item.website.icon a, 1345 | li.item.link a, 1346 | li.item.labels a, 1347 | li.item.share a { 1348 | visibility: visible; 1349 | } 1350 | } 1351 | 1352 | /* Favorites (bookmark) button */ 1353 | &.favorite { 1354 | .flux_header li.item.manage a.bookmark { 1355 | visibility: visible; 1356 | filter: brightness(1.5) sepia(1) hue-rotate(-25deg) saturate(4) contrast(1.2); 1357 | } 1358 | 1359 | .flux_header li.item.manage:nth-child(2) { 1360 | background-color: hsl(33.65deg 100% 54.9% / 13%); 1361 | 1362 | &:hover { 1363 | background-color: hsl(33.65deg 100% 54.9% / 20%); 1364 | } 1365 | } 1366 | } 1367 | 1368 | /* Favicon as avatar */ 1369 | .flux_header { 1370 | position: relative; 1371 | 1372 | li.item.website.icon, 1373 | li.item.website.full { 1374 | /* If user set "Website: Icon" in Display settings */ 1375 | display: flex; 1376 | width: 100%; 1377 | flex: 0 0 100%; 1378 | max-width: unset; 1379 | flex-direction: column; 1380 | position: absolute; 1381 | top: 0; 1382 | left: 0; 1383 | justify-content: flex-start; 1384 | border-radius: 0; 1385 | pointer-events: none; 1386 | 1387 | .websiteName { 1388 | /* No support for favicon website name. Instead, use display setting "Article icons: Author" */ 1389 | display: none; 1390 | } 1391 | 1392 | & ~ .item.titleAuthorSummaryDate { 1393 | /* If website favicon exist, add padding to make space for it. */ 1394 | padding-left: calc(var(--favicon-avatar-size) + var(--favicon-avatar-size-margin)); 1395 | } 1396 | 1397 | &:hover { 1398 | background-color: unset; 1399 | } 1400 | 1401 | &:before { 1402 | /* Position favicon responsively. knowing that the thumbnail will always be 16:9 */ 1403 | content: ""; 1404 | width: 100%; 1405 | height: auto; 1406 | aspect-ratio: 16 / 9; 1407 | z-index: -1; 1408 | position: relative; 1409 | visibility: hidden; 1410 | pointer-events: none; 1411 | } 1412 | 1413 | a.item-element { 1414 | display: flex; 1415 | width: calc(var(--favicon-avatar-size) + var(--favicon-avatar-size-margin)); 1416 | visibility: visible; 1417 | pointer-events: all; 1418 | box-sizing: unset; 1419 | } 1420 | 1421 | img.favicon { 1422 | height: var(--favicon-avatar-size); 1423 | width: var(--favicon-avatar-size); 1424 | background-color: hsl(0deg 0% 100% / 18%); 1425 | padding: 8px; 1426 | box-sizing: border-box; 1427 | border-radius: 50%; 1428 | margin-top: 2px; 1429 | } 1430 | 1431 | } 1432 | } 1433 | 1434 | /* Change card footer from "My labels" to "+ Add to playlist" */ 1435 | &.active.current article.flux_content { 1436 | footer ul.horizontal-list.bottom .item.labels .item-element.dropdown a[href^="#dropdown-labels-"] { 1437 | font-size: 0; 1438 | white-space: nowrap; 1439 | color: white; 1440 | 1441 | &:before { 1442 | content: "+ Add to playlist"; 1443 | font-weight: bold; 1444 | font-size: 14px; 1445 | } 1446 | 1447 | & + .dropdown-menu .dropdown-header { 1448 | font-size: 0; 1449 | 1450 | &:before { 1451 | content: "Playlists"; 1452 | letter-spacing: 1px; 1453 | text-transform: uppercase; 1454 | font-size: 1rem; 1455 | } 1456 | 1457 | a[href="./?c=tag"] { 1458 | margin-left: 8px; 1459 | font-size: 1rem; 1460 | } 1461 | } 1462 | 1463 | .icon { 1464 | display: none; 1465 | } 1466 | } 1467 | 1468 | .content .text { 1469 | overflow-x: hidden; 1470 | } 1471 | 1472 | } 1473 | } 1474 | } 1475 | 1476 | /***************************************** 1477 | * END "CARD" 1478 | ****************************************/ 1479 | 1480 | 1481 | 1482 | 1483 | 1484 | 1485 | /***************************************** 1486 | * 1487 | * BEGIN "MAPCO THEME DARK MODE" 1488 | * 1489 | * Applies dark mode to the "Mapco" theme. 1490 | * Content within `
` is usually 1491 | * light mode; this styling switches it to 1492 | * dark mode, along with the left side 1493 | * navigation. 1494 | * 1495 | ****************************************/ 1496 | 1497 | 1498 | /* ==================================== 1499 | * BEGIN "Dark mode: Global styles" 1500 | * ==================================== */ 1501 | 1502 | html { 1503 | /* Note: Wrapping in an `html` selector is for IDE toggling only; it has no impact on the actual styles. */ 1504 | 1505 | /* Global background and text color */ 1506 | body, 1507 | #slider, 1508 | .aside.aside_feed, 1509 | .nav.nav-list.aside, 1510 | .nav.nav-list.aside ul, 1511 | .nav-list .item, 1512 | .tree .tree-folder .tree-folder-title { 1513 | background-color: #0f0f0f; 1514 | --frss-font-color-dark: white; 1515 | color: white; 1516 | } 1517 | 1518 | /* Text and link colors */ 1519 | label, 1520 | .content h1.title a, 1521 | .content h1 a, 1522 | .content.thin h1.title a, 1523 | .content.thin h1 a, 1524 | .flux .website a, 1525 | .day, 1526 | .day .name, 1527 | .post h1, 1528 | .post h2, 1529 | .dropdown-menu .item > a, 1530 | .dropdown-menu .item > span, 1531 | .dropdown-menu .item > .as-link, 1532 | .dropdown-menu .dropdown-header, 1533 | .dropdown-menu .dropdown-section .dropdown-section-title, 1534 | .tree .tree-folder .tree-folder-items .dropdown-menu .item a, 1535 | .tree .tree-folder .tree-folder-items .dropdown-menu .item button { 1536 | --frss-font-color-dark: white; 1537 | color: white; 1538 | } 1539 | 1540 | article .content figure figcaption { 1541 | font-style: normal; 1542 | } 1543 | 1544 | /* Input, button, and focus */ 1545 | input, 1546 | select, 1547 | textarea, 1548 | button, 1549 | .btn, 1550 | kbd, 1551 | input:focus, 1552 | select:focus, 1553 | textarea:focus, 1554 | .nav_menu, 1555 | .pagination .item, 1556 | .nav_menu .btn { 1557 | background-color: #303136; 1558 | border-color: #303136; 1559 | border-top-color: #303136; 1560 | color: white; 1561 | 1562 | & .stick .btn, 1563 | & .group .btn, 1564 | & .stick .btn.read_all, 1565 | & .group .btn.read_all, 1566 | & .btn + .btn:not(.btn-important), 1567 | & .btn + input, 1568 | & .btn + .dropdown > .btn, 1569 | & input + .btn, 1570 | & input + input, 1571 | & input + .dropdown > .btn, 1572 | & .dropdown + .btn, 1573 | & .dropdown + input, 1574 | & .dropdown + .dropdown > .btn { 1575 | background-color: #303136; 1576 | border-color: #303136; 1577 | border-top-color: #303136; 1578 | color: white; 1579 | } 1580 | 1581 | .icon { 1582 | filter: brightness(1.6); 1583 | } 1584 | } 1585 | 1586 | 1587 | /* Button hover */ 1588 | .btn:hover, 1589 | .nav_menu .stick .btn:not(.active):hover, 1590 | .nav_menu .group .btn:not(.active):hover, 1591 | .nav_menu .stick .btn.read_all:hover, 1592 | .nav_menu .group .btn.read_all:hover, 1593 | .pagination .item:hover, 1594 | .nav_menu .btn:hover, 1595 | .nav-list .item a:hover { 1596 | background-color: #424348; 1597 | } 1598 | 1599 | .nav_menu { 1600 | background-color: unset; 1601 | border-color: unset; 1602 | 1603 | .stick .btn.active, 1604 | .group .btn.active { 1605 | background-color: #36c; 1606 | 1607 | .icon { 1608 | filter: brightness(3); 1609 | } 1610 | } 1611 | } 1612 | 1613 | /* Kbd Styles */ 1614 | kbd a { 1615 | filter: brightness(1.6) saturate(0.8); 1616 | } 1617 | 1618 | /* Disabled input */ 1619 | input:disabled, 1620 | select:disabled { 1621 | background-color: #303136; 1622 | border-color: #303136; 1623 | border-style: solid; 1624 | background-image: repeating-linear-gradient( 1625 | 45deg, 1626 | #303136, 1627 | #303136 10px, 1628 | #424348 10px, 1629 | #424348 20px 1630 | ); 1631 | } 1632 | 1633 | 1634 | table th { 1635 | background: hsl(0deg 0% 100% / 12%); 1636 | } 1637 | } 1638 | 1639 | /* ==================================== 1640 | * END "Dark mode: Global styles" 1641 | * ==================================== */ 1642 | 1643 | 1644 | 1645 | 1646 | 1647 | /* ==================================== 1648 | * BEGIN "Dark mode: Dropdown, dialog, box" 1649 | * ==================================== */ 1650 | 1651 | @media (max-width: 840px) { 1652 | /* Mobile dropdown, with media query increase selector specificity */ 1653 | .dropdown-target:target ~ .dropdown-toggle::after { 1654 | /* Mobile dropdown triangle */ 1655 | background-color: #303136; 1656 | border-color: #303136; 1657 | } 1658 | 1659 | body:not(.reader) main#stream div.flux li.item.share, 1660 | body:not(.reader) main#stream div.flux li.item.labels, 1661 | .nav_menu #mark-read-menu, 1662 | .nav_menu #nav_menu_actions { 1663 | /** 1664 | * Turn dropdowns into bottom sheets on mobile 1665 | * - Share button 1666 | * - Playlists button (labels) 1667 | * - Mark read butto group within feed nav menu 1668 | * - Feed actions button group within feed nav menu 1669 | */ 1670 | 1671 | .dropdown-toggle:after { 1672 | /* Hide dropdown triangle on mobile */ 1673 | display: none; 1674 | } 1675 | 1676 | li.item, 1677 | li.item button { 1678 | margin: 0; 1679 | font-size: 1.4rem; 1680 | 1681 | label { 1682 | padding: 10px; 1683 | text-indent: 0; 1684 | } 1685 | 1686 | input[type="checkbox"] { 1687 | width: 1.4rem !important; 1688 | height: 1.4rem !important; 1689 | margin-right: 1rem; 1690 | } 1691 | } 1692 | 1693 | .dropdown-menu { 1694 | /* Card dropdown menu on mobile */ 1695 | position: fixed; 1696 | bottom: 0; 1697 | height: calc(100vh - 50%); 1698 | left: 0 !important; 1699 | right: 0 !important; 1700 | border-bottom-left-radius: 0; 1701 | border-bottom-right-radius: 0; 1702 | overflow: auto; 1703 | animation: slideUp 0.15s ease-in-out forwards; // Animate bottom sheet from bottom to up 1704 | 1705 | & > ul { 1706 | overflow: auto; 1707 | 1708 | .item.addItem { 1709 | /* Sticky "add new" playlist (label) */ 1710 | position: sticky; 1711 | top: 0; 1712 | margin-right: 0; 1713 | padding-right: 0; 1714 | width: unset; 1715 | background-color: #303136; 1716 | } 1717 | 1718 | } 1719 | 1720 | p.help { 1721 | display: flex; 1722 | flex-wrap: wrap; 1723 | word-break: break-all; 1724 | line-height: 1.4; 1725 | justify-content: center; 1726 | 1727 | .btn { 1728 | background-color: #424348; 1729 | } 1730 | 1731 | .icon { 1732 | display: none; 1733 | } 1734 | } 1735 | } 1736 | } 1737 | 1738 | 1739 | .dropdown .dropdown-menu, 1740 | .dropdown-target:target ~ .dropdown-menu { 1741 | border-radius: 12px; 1742 | } 1743 | 1744 | #dropdown-configure ~ .dropdown-menu { 1745 | border-radius: unset; 1746 | 1747 | .toggle_aside { 1748 | border: none; 1749 | } 1750 | } 1751 | 1752 | #overlay a.close { 1753 | border: none; 1754 | } 1755 | 1756 | 1757 | .extension_smartmenu ul { 1758 | list-style-position: inside; 1759 | list-style-type: none; 1760 | } 1761 | 1762 | #nav_menu_views_dropdown ul.dropdown-menu, 1763 | #nav_menu_actions_dropdown ul.dropdown-menu { 1764 | .item a { 1765 | width: 100%; 1766 | } 1767 | } 1768 | } 1769 | 1770 | .dropdown { 1771 | position: relative; 1772 | } 1773 | 1774 | .tree .tree-folder .tree-folder-items .item.active .dropdown li a, 1775 | .dropdown .dropdown-menu .item a { 1776 | color: white; 1777 | } 1778 | 1779 | .dropdown-menu, 1780 | .box { 1781 | background-color: #303136; 1782 | color: white; 1783 | border-radius: 12px; 1784 | 1785 | li.item { 1786 | &:hover { 1787 | background-color: hsla(0,0%,100%,.06); 1788 | } 1789 | } 1790 | 1791 | .box-content .item { 1792 | background-color: #303136; 1793 | } 1794 | 1795 | .box-content .item, 1796 | .box-content .item a { 1797 | background-color: #303136; 1798 | color: white; 1799 | } 1800 | 1801 | .item.dropdown-section ~ .dropdown-section, 1802 | .item.separator { 1803 | border-top-color: #646464; 1804 | border-bottom-color: #646464; 1805 | border-color: #646464; 1806 | } 1807 | } 1808 | 1809 | .box .box-title { 1810 | background-color: #424348; 1811 | color: white; 1812 | 1813 | .configure { 1814 | border-radius: 8px; 1815 | } 1816 | } 1817 | 1818 | .box .box-content { 1819 | .configure { 1820 | border-radius: 8px; 1821 | } 1822 | } 1823 | 1824 | 1825 | main#stream .box.category { 1826 | .box-content { 1827 | padding: 1rem; 1828 | 1829 | li.item.feed { 1830 | border: none; 1831 | 1832 | a, 1833 | a:hover { 1834 | color: white; 1835 | } 1836 | } 1837 | } 1838 | 1839 | .box-title a.title, 1840 | .box-title a.title:hover { 1841 | color: white; 1842 | 1843 | &:not([data-unread="0"]):after { 1844 | background-color: rgba(137, 137, 137, 0.4392156863); 1845 | } 1846 | } 1847 | } 1848 | 1849 | 1850 | .box .box-title .icon, 1851 | .manage-list .icon, 1852 | .dropdown-header .icon, 1853 | .tree-folder-items .dropdown-toggle .icon, 1854 | .tree-folder-items .item.feed .dropdown-toggle .icon { 1855 | filter: brightness(2); 1856 | } 1857 | 1858 | .dropdown-menu input, 1859 | .dropdown-menu .btn, 1860 | .stick input + .btn { 1861 | background-color: #424348; 1862 | border-color: #424348; 1863 | } 1864 | 1865 | main.prompt { 1866 | background: #303136; 1867 | } 1868 | 1869 | main.post { 1870 | /* Subscription management page boxes */ 1871 | .box { 1872 | border-radius: 12px; 1873 | overflow: hidden; 1874 | 1875 | ul { 1876 | list-style-position: inside; 1877 | } 1878 | 1879 | .box-title { 1880 | padding: 1rem; 1881 | } 1882 | 1883 | .box-content { 1884 | padding: 1rem; 1885 | 1886 | .item, 1887 | .item.feed { 1888 | border: none; 1889 | } 1890 | } 1891 | 1892 | } 1893 | } 1894 | 1895 | 1896 | 1897 | #global #overlay { 1898 | 1899 | #panel { 1900 | background: #0f0f0f; 1901 | 1902 | .flux.not_read:not(.current) { 1903 | background: #0f0f0f; 1904 | 1905 | a { 1906 | color: white; 1907 | } 1908 | } 1909 | 1910 | .flux .flux_header { 1911 | border-color: #6464646b; 1912 | padding: 1rem; 1913 | box-sizing: border-box; 1914 | 1915 | &:hover { 1916 | background: #252525; 1917 | } 1918 | } 1919 | 1920 | .flux .flux_header:hover:not(.current):hover .item .title { 1921 | background: unset; 1922 | } 1923 | } 1924 | } 1925 | 1926 | 1927 | 1928 | 1929 | /* ==================================== 1930 | * END "Dark mode: Dropdown, dialog, box" 1931 | * ==================================== */ 1932 | 1933 | 1934 | 1935 | 1936 | 1937 | /* ==================================== 1938 | * BEGIN "Dark mode: Feed side navigation" 1939 | * ==================================== */ 1940 | 1941 | .tree { 1942 | .tree-folder { 1943 | border: none; 1944 | margin: 0 8px; 1945 | 1946 | .tree-folder-title { 1947 | display: flex; 1948 | align-items: center; 1949 | padding: 1rem; 1950 | border-radius: 8px; 1951 | text-transform: unset; 1952 | font-size: 1rem; 1953 | font-weight: normal; 1954 | 1955 | &:hover { 1956 | text-decoration: none; 1957 | background-color: #303136; // Hover effect 1958 | } 1959 | 1960 | img.icon { 1961 | width: 20px; 1962 | height: 20px; 1963 | margin-right: 2rem; 1964 | filter: brightness(3) !important; /* Prevent chevron icon from having its filter removed on hover */ 1965 | } 1966 | 1967 | button.dropdown-toggle { 1968 | margin-right: 0; 1969 | 1970 | img.icon { 1971 | /* Resize chevron icon utilizing padding, to keep global sidebar icon size untouched. */ 1972 | padding: 2px; 1973 | box-sizing: border-box; 1974 | 1975 | &[src*="down.svg"] { 1976 | /* Rotate chevron to point right when collapsed */ 1977 | transform: rotate(270deg); 1978 | } 1979 | 1980 | &[src*="up.svg"] { 1981 | /* Rotate chevron to point down when expanded */ 1982 | transform: rotate(180deg); 1983 | } 1984 | } 1985 | } 1986 | } 1987 | 1988 | &.active .tree-folder-title { 1989 | background-color: #303136; // Active state 1990 | } 1991 | 1992 | 1993 | ul.tree-folder-items { 1994 | background-color: unset; 1995 | 1996 | li.item { 1997 | border-radius: 6px; 1998 | background-color: unset; 1999 | display: list-item !important; /* Always display all labels on side navigation expand */ 2000 | 2001 | &:hover { 2002 | background-color: #303136; 2003 | } 2004 | 2005 | a.dropdown-toggle { 2006 | width: 20px; 2007 | padding-right: 10px; 2008 | padding-left: 15px; 2009 | } 2010 | 2011 | a.item-title { 2012 | padding-left: 15px; 2013 | width: calc(100% - 70px); 2014 | 2015 | &:not(.active) { 2016 | padding-left: 62px; 2017 | } 2018 | 2019 | img.favicon { 2020 | width: 18px; 2021 | height: 18px; 2022 | margin-right: 8px; 2023 | } 2024 | 2025 | &:has(img.favicon) { 2026 | padding-left: 15px; 2027 | } 2028 | 2029 | &:not([data-unread="0"]) { 2030 | width: calc(100% - 110px); 2031 | font-size: 1rem; 2032 | font-weight: normal; 2033 | letter-spacing: 0.5px; 2034 | } 2035 | 2036 | } 2037 | 2038 | &.active { 2039 | background-color: #303136; 2040 | } 2041 | 2042 | &.active a:after { 2043 | border: none; 2044 | } 2045 | } 2046 | } 2047 | } 2048 | 2049 | li.tree-folder.category { 2050 | &.tags { 2051 | .item.feed a.item-title { 2052 | 2053 | @media (min-width: 840px) { 2054 | &:not(.active) { 2055 | padding-left: 15px; 2056 | } 2057 | } 2058 | } 2059 | } 2060 | } 2061 | } 2062 | 2063 | 2064 | .flux { 2065 | .flux_header { 2066 | .date { 2067 | color: hsl(0deg 0% 100% / 59%); 2068 | } 2069 | } 2070 | 2071 | .flux_content { 2072 | .bottom { 2073 | .date { 2074 | color: hsl(0deg 0% 100% / 59%); 2075 | } 2076 | } 2077 | } 2078 | 2079 | &.not_read { 2080 | .item { 2081 | .date { 2082 | color: hsl(0deg 0% 100% / 59%); 2083 | } 2084 | } 2085 | } 2086 | } 2087 | 2088 | .aside.aside_feed { 2089 | 2090 | @media (min-width: 840px) { 2091 | /* Desktop, add padding-top on feed sidenav */ 2092 | padding-top: 2rem; 2093 | 2094 | & > * { 2095 | /* On desktop, prevent side navigation to stretch when main content isn't loaded, caused by the layout relying on "display: table" */ 2096 | max-width: 300px; 2097 | } 2098 | } 2099 | 2100 | 2101 | a.toggle_aside { 2102 | border: none; 2103 | } 2104 | 2105 | 2106 | .category .title:not([data-unread="0"])::after { 2107 | top: 50%; 2108 | transform: translateY(-50%); 2109 | margin: 0; 2110 | background-color: #89898970; 2111 | font-weight: bold; 2112 | } 2113 | } 2114 | 2115 | .tree#sidebar { 2116 | padding-top: 0; 2117 | margin-top: 0; 2118 | } 2119 | 2120 | /** 2121 | * Highlight only current page in the side navigation, remove highlight from folder if item is active: 2122 | * - Playlists ("My labels") 2123 | * - User's category 2124 | */ 2125 | #tags:has(> ul.tree-folder-items.active .item.feed.active) > .tree-folder-title, 2126 | [id^="c_"].tree-folder.category.active:has(> ul.tree-folder-items.active .item.feed.active) > .tree-folder-title { 2127 | background-color: unset; 2128 | } 2129 | 2130 | 2131 | /* ==================================== 2132 | * END "Dark mode: Side navigation" 2133 | * ==================================== */ 2134 | 2135 | 2136 | 2137 | 2138 | 2139 | /* ==================================== 2140 | * BEGIN "Dark mode: Settings side navigation" 2141 | * ==================================== */ 2142 | 2143 | /* Settings page side nav */ 2144 | body:not(.normal) { 2145 | .nav.nav-list.aside { 2146 | padding-top: 2rem; 2147 | 2148 | .item.nav-section { 2149 | 2150 | li.item { 2151 | margin: 0 8px; 2152 | border-radius: 12px; 2153 | min-height: 1rem; 2154 | line-height: 1; 2155 | 2156 | &.active, 2157 | &.active a { 2158 | background: #303136; 2159 | background-color: #303136; 2160 | } 2161 | 2162 | &:hover, 2163 | &:hover a { 2164 | background: #303136; 2165 | background-color: #303136; 2166 | } 2167 | } 2168 | 2169 | li.item a { 2170 | padding: 16px; 2171 | line-height: 1; 2172 | font-size: 1.2rem; 2173 | } 2174 | 2175 | } 2176 | 2177 | } 2178 | } 2179 | 2180 | 2181 | /* Settings page back button */ 2182 | .post a[href="./"] { 2183 | background-color: #303136; 2184 | border-color: #303136; 2185 | color: white; 2186 | } 2187 | 2188 | /* ==================================== 2189 | * END "Dark mode: Settings side navigation" 2190 | * ==================================== */ 2191 | 2192 | 2193 | 2194 | 2195 | 2196 | 2197 | /* ==================================== 2198 | * BEGIN "Dark mode: Card" 2199 | * ==================================== */ 2200 | 2201 | body:not(.reader) main#stream { 2202 | div.flux { 2203 | &.not_read { 2204 | position: relative; 2205 | background-color: unset; 2206 | 2207 | &:after { 2208 | content: "New"; 2209 | position: absolute; 2210 | top: 18px; 2211 | left: 18px; 2212 | padding: 2px 6px; 2213 | background-color: rgb(255, 0, 0, 0.76); 2214 | box-shadow: 0 2px 8px 3px hsl(0deg 0% 0% / 13%); 2215 | border-radius: 6px; 2216 | font-weight: bold; 2217 | pointer-events: none; 2218 | } 2219 | } 2220 | 2221 | &:not(.active):hover { 2222 | /* Card hover effect/background */ 2223 | background-color: hsl(0deg 0% 100% / 6%); 2224 | } 2225 | 2226 | @media (max-width: 600px) { 2227 | &:not(.active), 2228 | &:not(.active).favorite:not(.current) { 2229 | /* Mobile, always display hover effect/background */ 2230 | background-color: hsl(0deg 0% 100% / 6%); 2231 | } 2232 | } 2233 | 2234 | 2235 | &.active.current .flux_header { 2236 | background-color: hsl(0deg 2.56% 15.29%); // Card opened state 2237 | } 2238 | 2239 | .flux_header { 2240 | li.item.manage, 2241 | li.item.website.icon, 2242 | li.item.link, 2243 | li.item.labels, 2244 | li.item.share { 2245 | background-color: unset; 2246 | } 2247 | } 2248 | } 2249 | 2250 | div.flux:not(.favorite) .flux_header li.item.manage .item-element.bookmark img, 2251 | div.flux:not(.not_read) .flux_header li.item.manage .item-element.read img, 2252 | div.flux .flux_header li.item.link img, 2253 | div.flux .flux_header li.item.labels img, 2254 | div.flux .flux_header li.item.share img 2255 | { 2256 | filter: brightness(1.6); 2257 | } 2258 | 2259 | div.flux.not_read .flux_header li.item.manage .item-element.read img { 2260 | filter: grayscale(1) brightness(1.4); 2261 | } 2262 | 2263 | } 2264 | 2265 | 2266 | main#stream, 2267 | #overlay #panel { 2268 | button#bigMarkAsRead { 2269 | background: #303136; 2270 | color: #ffffffa3; 2271 | margin-bottom: 0; 2272 | 2273 | .bigTick { 2274 | filter: brightness(5); 2275 | opacity: 0.6; 2276 | } 2277 | 2278 | &:hover { 2279 | background: #424348; 2280 | color: #ffffff; 2281 | 2282 | .bigTick { 2283 | filter: brightness(5); 2284 | opacity: 1; 2285 | } 2286 | } 2287 | } 2288 | } 2289 | 2290 | 2291 | #new-article { 2292 | /* Feed updated notification banner */ 2293 | grid-column: 1 / -1; 2294 | border-radius: 8px; 2295 | margin: 1rem 4px; 2296 | overflow: hidden; 2297 | } 2298 | 2299 | /* ==================================== 2300 | * END "Dark mode: Card" 2301 | * ==================================== */ 2302 | 2303 | 2304 | /***************************************** 2305 | * END "MAPCO THEME DARK MODE" 2306 | ****************************************/ 2307 | 2308 | 2309 | 2310 | 2311 | 2312 | 2313 | 2314 | /***************************************** 2315 | * 2316 | * BEGIN "CARD EXPANDED - INLINE VIEW MODE" 2317 | * 2318 | * Expand cards inline without covering 2319 | * the entire screen. Used as a fallback 2320 | * when "Theater mode" is removed. 2321 | * 2322 | ****************************************/ 2323 | 2324 | main#stream div.flux.active.current { 2325 | /* Card content on expanded inline view */ 2326 | grid-column: 1 / -1; 2327 | max-height: calc(100vh - 275px); 2328 | overflow: auto; 2329 | 2330 | @media (max-height: 900px) { 2331 | /* When viewport height is small, card expands to full height on inline view. */ 2332 | height: 100vh; 2333 | max-height: 100vh; 2334 | } 2335 | 2336 | @media (max-width: 840px) { 2337 | /* Card expands to full height on mobile by default for inline view */ 2338 | height: 100vh; 2339 | max-height: 100vh; 2340 | } 2341 | } 2342 | 2343 | /***************************************** 2344 | * END "CARD EXPANDED - INLINE VIEW MODE" 2345 | ****************************************/ 2346 | 2347 | 2348 | 2349 | 2350 | 2351 | 2352 | 2353 | 2354 | 2355 | /***************************************** 2356 | * 2357 | * BEGIN "FAVORITES PAGE" 2358 | * 2359 | * Applies dark mode to the "Mapco" theme. 2360 | * Content within `
` is usually 2361 | * light mode; this styling switches it to 2362 | * dark mode, along with the left side 2363 | * navigation. 2364 | * 2365 | ****************************************/ 2366 | 2367 | body:has(.tree-folder.category.favorites.active) { 2368 | main#stream div.flux.favorite:not(.active) { 2369 | .flux_header { 2370 | li.item.manage:nth-child(2) { 2371 | /* In "Favorites", do not use special highlight effect. */ 2372 | background-color: inherit; 2373 | 2374 | /* In "Favorites", use regular special hover color. */ 2375 | &:hover { 2376 | background-color: hsl(0deg 0% 100% / 8%); 2377 | } 2378 | } 2379 | } 2380 | .flux_header:not(:hover) { 2381 | li.item.manage:nth-child(2) { 2382 | /* In "Favorites", do not constantly highlight favorites button. */ 2383 | visibility: hidden; 2384 | } 2385 | 2386 | a.bookmark { 2387 | /* In "Favorites", hide by favorites icon by default; behave like other icons. */ 2388 | visibility: hidden; 2389 | } 2390 | } 2391 | } 2392 | } 2393 | 2394 | /***************************************** 2395 | * END "FAVORITES PAGE" 2396 | ****************************************/ 2397 | 2398 | 2399 | 2400 | 2401 | 2402 | 2403 | 2404 | /***************************************** 2405 | * 2406 | * BEGIN "READER VIEW PAGE" 2407 | * 2408 | ****************************************/ 2409 | 2410 | 2411 | #stream.reader .flux { 2412 | border-bottom: 1px solid #646464; 2413 | 2414 | &, 2415 | .content{ 2416 | background: #0f0f0f; 2417 | } 2418 | 2419 | &, 2420 | .text { 2421 | color: white; 2422 | } 2423 | 2424 | .go_website { 2425 | font-family: Arial, Helvetica, sans-serif; 2426 | } 2427 | 2428 | .flux_content { 2429 | background: #0f0f0f; 2430 | } 2431 | } 2432 | 2433 | /***************************************** 2434 | * END "READER VIEW PAGE" 2435 | ****************************************/ 2436 | 2437 | 2438 | 2439 | 2440 | 2441 | /***************************************** 2442 | * 2443 | * BEGIN " 2444 | * - YOULAG THEATER VIEW MODAL" 2445 | * 2446 | ****************************************/ 2447 | 2448 | @keyframes slideUp { 2449 | from { 2450 | transform: translateY(100%); 2451 | } 2452 | to { 2453 | transform: translateY(0%); 2454 | } 2455 | } 2456 | 2457 | /***************************************** 2458 | * END "ANIMATION KEYFRAMES" 2459 | ****************************************/ 2460 | 2461 | 2462 | 2463 | 2464 | /***************************************** 2465 | * 2466 | * BEGIN "YOULAG THEATER VIEW MODAL" 2467 | * 2468 | * 2025-02-22: Big refactor to move away 2469 | * from relying on CSS to display theater 2470 | * mode. Instead, use the script to handle 2471 | * the view and functionality. 2472 | * 2473 | ****************************************/ 2474 | 2475 | .youlag-mode--fullscreen { 2476 | overflow: hidden; 2477 | } 2478 | 2479 | .youlag-mode--pip { 2480 | overflow: auto; 2481 | } 2482 | 2483 | body:has(#global main#stream):before { 2484 | // Loading spinner, before the youlag script has fully loaded. Only on feed stream pages. 2485 | content: "Loading Youlag features"; 2486 | position: fixed; 2487 | top: 89px; 2488 | right: 39px; 2489 | width: 280px; 2490 | height: 82px; 2491 | background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' stroke='%23000' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cstyle%3E.spinner_V8m1%7Btransform-origin%3Acenter%3Banimation%3Aspinner_zKoa 2s linear infinite%7D.spinner_V8m1 circle%7Bstroke-linecap%3Around%3Banimation%3Aspinner_YpZS 1.5s ease-in-out infinite%7D%40keyframes spinner_zKoa%7B100%25%7Btransform%3Arotate(360deg)%7D%7D%40keyframes spinner_YpZS%7B0%25%7Bstroke-dasharray%3A0 150%3Bstroke-dashoffset%3A0%7D47.5%25%7Bstroke-dasharray%3A42 150%3Bstroke-dashoffset%3A-16%7D95%25%2C100%25%7Bstroke-dasharray%3A42 150%3Bstroke-dashoffset%3A-59%7D%7D%3C/style%3E%3Cg class='spinner_V8m1'%3E%3Ccircle cx='12' cy='12' r='9.5' fill='none' stroke-width='3'%3E%3C/circle%3E%3C/g%3E%3C/svg%3E"); 2492 | background-repeat: no-repeat; 2493 | filter: invert(1); 2494 | background-position: 20px; 2495 | background-size: 32px; 2496 | background-color: #ffffffd4; 2497 | opacity: 0.8; 2498 | z-index: 9999; 2499 | transition: opacity 0.2s; 2500 | color: black; 2501 | display: flex; 2502 | justify-content: flex-start; 2503 | align-items: center; 2504 | padding-left: 68px; 2505 | box-sizing: border-box; 2506 | font-family: arial; 2507 | font-size: var(--yl-text-sm); 2508 | white-space: pre; 2509 | pointer-events: none; 2510 | border-radius: 12px; 2511 | } 2512 | 2513 | body.youlag-loaded:before { 2514 | display: none !important; 2515 | } 2516 | 2517 | main#stream > .flux { 2518 | cursor: pointer; 2519 | } 2520 | 2521 | #youlagTheaterModal { 2522 | position: fixed; 2523 | z-index: 99999; 2524 | bottom: 0px; 2525 | right: 0px; 2526 | height: 100vh; 2527 | width: 100vw; 2528 | background: #060606; 2529 | overflow-y: auto; 2530 | overflow-x: hidden; 2531 | box-sizing: border-box; 2532 | transition: 0.2s; 2533 | // For browsers with subpixel rendering issues, hide background content peeking through. 2534 | box-shadow: 0 0 0 10px #060606; 2535 | 2536 | &.youlag-modal-feed-item--text { 2537 | // For feed items that are not video feeds. 2538 | .youlag-iframe-container { 2539 | display: none; 2540 | } 2541 | 2542 | .youlag-video-container { 2543 | // For text feeds, the thumbnail is displayed in the video area instead. 2544 | max-height: 50vh; 2545 | 2546 | .youlag-thumbnail-container { 2547 | animation: none !important; 2548 | width: 100% !important; 2549 | height: auto !important; 2550 | padding-bottom: 0 !important; 2551 | 2552 | .youlag-video-thumbnail { 2553 | position: static !important; 2554 | transform: none !important; 2555 | } 2556 | } 2557 | } 2558 | 2559 | 2560 | 2561 | .youlag-video-description-content { 2562 | margin: 0 auto; 2563 | 2564 | a { 2565 | color: #fff; 2566 | box-shadow: #fff 0 -1px 0 inset; 2567 | } 2568 | 2569 | ul { 2570 | list-style-position: inside; 2571 | } 2572 | 2573 | img { 2574 | border-radius: 8px; 2575 | } 2576 | 2577 | pre { 2578 | overflow: auto; 2579 | background-color: #ffffff1c; 2580 | border-radius: 8px; 2581 | padding: 1rem; 2582 | } 2583 | } 2584 | } 2585 | } 2586 | 2587 | .youlag-theater-modal-container { 2588 | width: 100%; 2589 | } 2590 | 2591 | .youlag-theater-modal-content { 2592 | width: 100%; 2593 | } 2594 | 2595 | .youlag-video-header { 2596 | display: flex; 2597 | gap: var(--yl-m-3xs); 2598 | position: sticky; 2599 | top: 0; 2600 | left: 0; 2601 | z-index: 1; 2602 | display: flex; 2603 | justify-content: flex-end; 2604 | padding: var(--yl-p-xs); 2605 | } 2606 | 2607 | .youlag-video-container { 2608 | position: relative; 2609 | max-height: 80vh; 2610 | overflow: hidden; 2611 | 2612 | .youlag-iframe-container { 2613 | position: absolute; 2614 | top: 0; 2615 | left: 0; 2616 | width: 100%; 2617 | 2618 | .youlag-iframe { 2619 | width: 100%; 2620 | height: auto; 2621 | max-height: 80vh; 2622 | aspect-ratio: 16 / 9; 2623 | overflow: hidden; 2624 | } 2625 | } 2626 | 2627 | .youlag-thumbnail-container { 2628 | width: 100%; 2629 | height: 0; 2630 | // Use this method of setting 16:9 aspect ratio, due to a subpixel peaking below the iframe that sits on top. 2631 | padding-bottom: calc(56.25% - 1px); 2632 | position: relative; 2633 | overflow: hidden; 2634 | animation: pulse 4s infinite ease-in-out; 2635 | 2636 | 2637 | .youlag-video-thumbnail { 2638 | position: absolute; 2639 | top: 50%; 2640 | left: 0; 2641 | width: 100%; 2642 | transform: translateY(-50%); 2643 | } 2644 | } 2645 | } 2646 | 2647 | 2648 | .youlag-video-details { 2649 | padding-top: var(--yl-p-xs); 2650 | padding-left: var(--yl-p-md); 2651 | padding-right: var(--yl-p-md); 2652 | 2653 | .youlag-video-metadata-container { 2654 | margin-bottom: var(--yl-m-lg); 2655 | 2656 | .youlag-video-metadata-title { 2657 | font-size: 1.4rem; 2658 | line-height: 1.4; 2659 | margin-bottom: var(--yl-m-sm); 2660 | } 2661 | 2662 | .youlag-video-metadata-favicon { 2663 | width: 42px; 2664 | height: 42px; 2665 | background-color: hsla(0, 0%, 100%, .18); 2666 | padding: 8px; 2667 | box-sizing: border-box; 2668 | border-radius: 50%; 2669 | margin-top: 2px; 2670 | 2671 | &[src=""] { 2672 | display: none; 2673 | } 2674 | } 2675 | } 2676 | } 2677 | 2678 | 2679 | .youlag-video-metadata-panel { 2680 | display: flex; 2681 | flex-wrap: wrap; 2682 | align-items: center; 2683 | gap: var(--yl-m-sm); 2684 | margin-bottom: var(--yl-m-md); 2685 | 2686 | .youlag-video-author-section { 2687 | display: flex; 2688 | flex: 1; 2689 | gap: var(--yl-m-2xs); 2690 | align-items: center; 2691 | min-width: 400px; 2692 | 2693 | 2694 | .youlag-video-metadata-author a { 2695 | font-size: var(--yl-text-sm); 2696 | ; 2697 | line-height: 1.66; 2698 | font-weight: 600; 2699 | color: #fff; 2700 | } 2701 | 2702 | .youlag-video-metadata-date { 2703 | font-size: var(--yl-text-xs); 2704 | line-height: 1; 2705 | opacity: 0.8; 2706 | } 2707 | } 2708 | 2709 | .youlag-video-actions-container { 2710 | display: flex; 2711 | gap: var(--yl-m-2xs); 2712 | flex-wrap: wrap; 2713 | } 2714 | } 2715 | 2716 | .youlag-video-metadata-favicon-link:has(.youlag-video-metadata-favicon[src=""]) { 2717 | display: none; 2718 | } 2719 | 2720 | .youlag-favorited { 2721 | min-width: 60px; 2722 | 2723 | &.youlag-favorited--false .youlag-favorited-icon { 2724 | background-image: url('../themes/Mapco/icons/non-starred.svg'); 2725 | filter: brightness(1.6); 2726 | } 2727 | 2728 | &.youlag-favorited--true .youlag-favorited-icon { 2729 | background-image: url('../themes/Mapco/icons/starred.svg'); 2730 | filter: brightness(1.5) sepia(1) hue-rotate(-25deg) saturate(4) contrast(1.2); 2731 | } 2732 | 2733 | .youlag-favorited-icon { 2734 | width: 20px; 2735 | height: 20px; 2736 | filter: invert(1); 2737 | background-repeat: no-repeat; 2738 | background-position: center; 2739 | width: 100%; 2740 | } 2741 | } 2742 | 2743 | 2744 | 2745 | .youlag-video-description-container { 2746 | background-color: rgb(255, 255, 255, 0.1); 2747 | margin-bottom: var(--yl-m-lg); 2748 | padding: var(--yl-p-sm); 2749 | border-radius: 1rem; 2750 | 2751 | .youlag-video-description-content { 2752 | font-size: var(--yl-text-sm); 2753 | word-break: break-word; 2754 | max-width: 700px; 2755 | } 2756 | 2757 | &:has(.youlag-video-description-content:empty) { 2758 | // Hide description container if no description within content. 2759 | display: none; 2760 | } 2761 | } 2762 | 2763 | 2764 | 2765 | a.yl-video-action-button { 2766 | background-color: #303136; 2767 | color: #fff; 2768 | font-weight: 600; 2769 | font-size: var(--yl-text-xs); 2770 | border-radius: 999px; 2771 | padding: var(--yl-p-xs) var(--yl-p-sm); 2772 | display: inline-block; 2773 | text-decoration: none; 2774 | transition: background-color 0.2s; 2775 | 2776 | &:hover { 2777 | text-decoration: none; 2778 | background-color: #424348; 2779 | } 2780 | 2781 | span.yl-video-action-button__icon { 2782 | margin-right: var(--yl-m-2xs); 2783 | } 2784 | } 2785 | 2786 | 2787 | .yl-video-action-button-group { 2788 | // For placing related buttons into one group 2789 | display: flex; 2790 | border-radius: 999px; 2791 | overflow: hidden; 2792 | 2793 | a.yl-video-action-button { 2794 | // Reset rounded corners of buttons in group 2795 | border-radius: 0; 2796 | } 2797 | 2798 | .yl-video-action-button:first-child { 2799 | border-top-left-radius: 999px; 2800 | border-bottom-left-radius: 999px; 2801 | } 2802 | 2803 | .yl-video-action-button:last-child { 2804 | border-top-right-radius: 999px; 2805 | border-bottom-right-radius: 999px; 2806 | } 2807 | 2808 | .yl-video-action-button:not(:last-child) { 2809 | border-right: 1px solid rgba(255, 255, 255, 0.26); 2810 | } 2811 | 2812 | .yl-video-action-button:only-child { 2813 | border-top-left-radius: 0; 2814 | border-bottom-left-radius: 0; 2815 | border-top-right-radius: 0; 2816 | border-bottom-right-radius: 0; 2817 | border: none; 2818 | } 2819 | } 2820 | 2821 | a.yl-video-action-button[href=""] { 2822 | // Hide button if no link was able to be fetched 2823 | display: none; 2824 | } 2825 | 2826 | 2827 | #youlagCloseModal, 2828 | #youlagMinimizeModal { 2829 | cursor: pointer; 2830 | padding: var(--yl-p-sm); 2831 | display: flex; 2832 | align-items: center; 2833 | justify-content: center; 2834 | text-align: center; 2835 | line-height: 1; 2836 | border-radius: 999px; 2837 | width: 40px; 2838 | height: 40px; 2839 | font-size: var(--yl-text-lg); 2840 | background-color: #303136; 2841 | box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.4); 2842 | transition: background-color 0.2s; 2843 | 2844 | &:hover { 2845 | background-color: #424348; 2846 | } 2847 | } 2848 | 2849 | #youlagMinimizeModal { 2850 | font-size: var(--yl-text-md); 2851 | } 2852 | 2853 | /***************************************** 2854 | * END "YOULAG THEATER VIEW MODAL" 2855 | ****************************************/ 2856 | 2857 | 2858 | 2859 | /***************************************** 2860 | * BEGIN "YOULAG THEATER PIP VIEW" 2861 | * Picture-in-picture mode 2862 | ****************************************/ 2863 | 2864 | .youlag-mode--pip #youlagTheaterModal { 2865 | & { 2866 | width: var(--video-pip-width); 2867 | bottom: 1rem; 2868 | right: 2rem; 2869 | aspect-ratio: 16 / 9; 2870 | height: auto; 2871 | border-radius: 12px; 2872 | background: #303136; 2873 | box-shadow: 0 0 0 6px #303136; 2874 | } 2875 | 2876 | .youlag-video-header { 2877 | position: absolute; 2878 | left: auto; 2879 | right: 0; 2880 | padding: 3px; 2881 | } 2882 | 2883 | #youlagCloseModal, 2884 | #youlagMinimizeModal { 2885 | padding: var(--yl-p-xs); 2886 | width: 20px; 2887 | height: 20px; 2888 | font-size: var(--yl-text-sm); 2889 | } 2890 | 2891 | .youlag-video-details { 2892 | display: none; 2893 | } 2894 | 2895 | } 2896 | 2897 | /***************************************** 2898 | * END "YOULAG THEATER PIP VIEW" 2899 | ****************************************/ --------------------------------------------------------------------------------