2 | 
3 |
4 | Youlag
5 |
6 | Video extension for FreshRSS
7 |
8 |
9 | 
11 | 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 |
--------------------------------------------------------------------------------
/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 | const modalContainerClassName = `youlag-theater-modal-container`;
5 | const modalContentClassName = `youlag-theater-modal-content`;
6 | const modalCloseIdName = `youlagCloseModal`;
7 | const modalToggleFavoriteIdName = `youlagToggleFavorite`;
8 | const modalFavoriteClassName = `youlag-favorited`;
9 |
10 |
11 | function handleActiveRssItem(targetOrEvent) {
12 | // Coordinates the event for extracting the data triggering.
13 | let feedItem;
14 | if (targetOrEvent instanceof Event) {
15 | feedItem = targetOrEvent.target.closest('div[data-feed]');
16 | } else {
17 | feedItem = targetOrEvent.closest('div[data-feed]');
18 | }
19 | if (!feedItem) return;
20 | disableBodyScroll(true);
21 | const data = extractFeedItemData(feedItem);
22 | data.feedItemEl = feedItem;
23 | createModalWithData(data);
24 | }
25 |
26 | function getVideoIdFromUrl(url) {
27 | // Match video ID without relying on base domain being "youtube"-specific, in order to support invidious and piped links.
28 | const regex = /(?:\/|^)(?:v\/|e(?:mbed)?\/|\S*?[?&]v=|\S*?[?&]id=|v=)([a-zA-Z0-9_-]{11})(?:[\/\?]|$)/;
29 | const match = url.match(regex);
30 | return match ? match[1] : '';
31 | }
32 |
33 | function getBaseUrl(url) {
34 | try {
35 | const parsedUrl = new URL(url);
36 | return `${parsedUrl.protocol}//${parsedUrl.host}`;
37 | } catch (error) {
38 | console.error('Invalid URL:', error);
39 | return '';
40 | }
41 | }
42 |
43 |
44 | function extractFeedItemData(feedItem) {
45 | // Extract data from the provided target element.
46 | let extractedVideoUrl = feedItem.querySelector('.item.titleAuthorSummaryDate a[href*="youtube"], .item.titleAuthorSummaryDate a[href*="/watch?v="]')?.href || '';
47 | if (!extractedVideoUrl) {
48 | // Fallback to see if user has installed the YouTube video feed/Invidious video feed extension, as they create a different DOM structure.
49 | extractedVideoUrl = feedItem.querySelector('.enclosure-content a[href*="youtube"], .enclosure-content a[href*="/watch?v="]');
50 | youtubeExtensionInstalled = extractedVideoUrl ? true : false;
51 | }
52 | const videoBaseUrl = getBaseUrl(extractedVideoUrl);
53 | youtubeId = extractedVideoUrl ? getVideoIdFromUrl(extractedVideoUrl) : '';
54 | const youubeUrl = youtubeId ? `https://www.youtube.com/watch?v=${youtubeId}` : '';
55 | const youtubeEmbedUrl = youtubeId ? `https://www.youtube.com/embed/${youtubeId}` : '';
56 | const videoEmbedUrl = youtubeId ? `${videoBaseUrl}/embed/${youtubeId}` : '';
57 | const authorElement = feedItem.querySelector('.flux_header');
58 | const authorFilterElement = authorElement?.querySelector('.website a.item-element[href*="get=f_"]');
59 | const invidiousRedirectPrefixUrl = 'https://redirect.invidious.io/watch?v=';
60 |
61 | return {
62 | author: authorElement?.getAttribute('data-article-authors') || '',
63 | author_filter_url: authorFilterElement?.href || '',
64 | favicon: feedItem.querySelector('img.favicon')?.src || '',
65 | favorite_toggle_url: feedItem.querySelector('a.item-element.bookmark')?.href || '',
66 | favorited: !feedItem.querySelector('.bookmark img[src*="non-starred"]'),
67 | thumbnail: feedItem.querySelector('.thumbnail img')?.src || '',
68 | title: feedItem.querySelector('.item-element.title')?.childNodes[0].textContent.trim() || '',
69 | external_link: feedItem.querySelector('.item-element.title')?.href || '',
70 | date: feedItem.querySelector('.flux_content .date')?.textContent.trim() || '',
71 | youtube_embed_url: youtubeEmbedUrl,
72 | video_embed_url: videoEmbedUrl,
73 | video_description:
74 | '' +
75 | // If video description is found, use it, otherwise fallback to generic description element.
76 | (feedItem.querySelector('.enclosure-description')?.innerHTML.trim() ||
77 | feedItem.querySelector('article div.text')?.innerHTML.trim() || '') +
78 | '',
79 | video_youtube_url: youubeUrl,
80 | video_invidious_redirect_url: `${youtubeId ? invidiousRedirectPrefixUrl + youtubeId : ''}`
81 | };
82 | }
83 |
84 | function createModalWithData(data) {
85 | // Create custom modal
86 | let modal = document.getElementById('youlagTheaterModal');
87 |
88 | if (!modal) {
89 | modal = document.createElement('div');
90 | modal.id = 'youlagTheaterModal';
91 | modal.innerHTML = ``;
92 | document.body.appendChild(modal);
93 | }
94 |
95 | // Add content to modal
96 | const container = modal.querySelector(`.${modalContainerClassName}`);
97 | container.innerHTML = `
98 |
99 |
100 |
101 |
102 |
103 |
104 |
105 |
106 | 
107 |
108 |
109 |
111 |
112 |
113 |
114 |
115 |
116 |
117 |
118 | ${data.title}
119 |
120 |
121 |
122 |
123 | 
124 |
125 |
126 |
127 |
130 |
131 |
132 |
133 |
134 |
135 |
138 |
139 |
140 |
141 | Source
142 |
143 |
144 |
145 | Invidious
146 |
147 |
148 |
156 |
157 |
158 |
159 |
160 |
161 |
162 |
163 |
164 |
165 |
166 | ${data.video_description}
167 |
168 |
169 |
170 |
171 |
172 | `;
173 |
174 |
175 | if (!youtubeId) {
176 | // Not a video feed item
177 | modal.classList.add('youlag-modal-feed-item--text');
178 | let iframeContainer = document.querySelector('.youlag-iframe-container');
179 | if (iframeContainer) {
180 | document.querySelector('.youlag-iframe-container').remove();
181 | }
182 | }
183 |
184 |
185 | container.querySelector(`#${modalCloseIdName}`)?.addEventListener('click', closeModal);
186 | container.querySelector(`#${modalToggleFavoriteIdName}`)?.addEventListener('click', (e) => {
187 | // Toggle favorites state in background
188 | e.preventDefault();
189 | toggleFavorite(data.favorite_toggle_url, container, data.feedItemEl);
190 | });
191 |
192 | // Push a new state to the history, to allow modal close when routing back.
193 | history.pushState({ modalOpen: true }, '', '');
194 |
195 | // Close theater modal on Esc key
196 | document.addEventListener('keydown', (event) => {
197 | if (event.key === 'Escape') {
198 | closeModal();
199 | }
200 | });
201 |
202 | window.addEventListener('popstate', closeModal);
203 | }
204 |
205 | function toggleFavorite(url, container, feedItemEl) {
206 | const favoriteButton = container.querySelector(`#${modalToggleFavoriteIdName}`);
207 | if (!favoriteButton) return;
208 |
209 | fetch(url, { method: 'GET' })
210 | .then(response => {
211 | if (response.ok) {
212 | // Toggle favorite classes and icons
213 | const currentlyTrue = favoriteButton.classList.contains(`${modalFavoriteClassName}--true`);
214 | const bookmarkIcon = feedItemEl.querySelector('.item-element.bookmark img.icon');
215 | favoriteButton.classList.remove(`${modalFavoriteClassName}--${currentlyTrue}`);
216 | favoriteButton.classList.add(`${modalFavoriteClassName}--${!currentlyTrue}`);
217 |
218 | if (currentlyTrue) {
219 | feedItemEl.classList.remove('favorite');
220 | if (bookmarkIcon) {
221 | bookmarkIcon.src = '../themes/Mapco/icons/non-starred.svg';
222 | }
223 | } else {
224 | feedItemEl.classList.add('favorite');
225 | if (bookmarkIcon) {
226 | bookmarkIcon.src = '../themes/Mapco/icons/starred.svg';
227 | }
228 | }
229 | } else {
230 | console.error('Failed to toggle favorite status');
231 | }
232 | })
233 | .catch(error => console.error('Error:', error));
234 | }
235 |
236 | function closeModal() {
237 | disableBodyScroll(false);
238 | const modal = document.getElementById('youlagTheaterModal');
239 | if (modal) modal.remove();
240 | if (history.state && history.state.modalOpen) {
241 | history.back();
242 | }
243 | }
244 |
245 | function setupClickListener() {
246 | const streamContainer = document.querySelector('#stream');
247 |
248 | if (streamContainer) {
249 | streamContainer.addEventListener('click', (event) => {
250 | // Prevent activation if clicked element is inside .flux_header li.
251 | // These are the feed item actions buttons.
252 | if (event.target.closest('div[data-feed] .flux_header li.manage')) return;
253 | if (event.target.closest('div[data-feed] .flux_header li.labels')) return;
254 | if (event.target.closest('div[data-feed] .flux_header li.share')) return;
255 | if (event.target.closest('div[data-feed] .flux_header li.link')) return;
256 | if (event.target.closest('div[data-feed] .flux_header .website a[href^="./?get=f_"]')) return;
257 | const target = event.target.closest('div[data-feed]');
258 |
259 | if (target) {
260 | handleActiveRssItem(event);
261 | collapseBackgroundFeedItem(target);
262 | }
263 | });
264 | }
265 | }
266 |
267 | function collapseBackgroundFeedItem(target) {
268 | // Workaround: If user has YouTube Video Feed extension installed, prevent it from showing the default embedded
269 | // in favor of Youlag theater view modal. This collapses down the original feed item that activates by FreshRSS clickevent.
270 |
271 | const feedItem = target;
272 | let isActive = feedItem.classList.contains('active') && feedItem.classList.contains('current');
273 | const iframes = feedItem.querySelectorAll('iframe');
274 |
275 | if (iframes || youtubeExtensionInstalled) {
276 | iframes.forEach(iframe => {
277 | // Disable iframes to prevent autoplay
278 | const src = iframe.getAttribute('src');
279 | if (src) {
280 | iframe.setAttribute('data-original', src);
281 | iframe.setAttribute('src', '');
282 | }
283 | });
284 | }
285 |
286 | if (isActive) {
287 | // Collapse the feed item
288 | feedItem.classList.remove('active');
289 | feedItem.classList.remove('current');
290 | }
291 | }
292 |
293 | function disableBodyScroll(scroll) {
294 | document.body.style.overflow = scroll ? 'hidden' : 'auto';
295 | }
296 |
297 | function init() {
298 | setupClickListener();
299 | removeYoulagLoadingState();
300 | youlagScriptLoaded = true;
301 | }
302 |
303 | function removeYoulagLoadingState() {
304 | // By default, the youlag CSS is set to a loading state.
305 | // This will remove the loading state when the script is ready.
306 | document.body.classList.add('youlag-loaded');
307 | }
308 |
309 | function initFallback() {
310 | if (document.readyState === 'complete' || document.readyState === 'interactive' || youlagScriptLoaded === true) {
311 | init();
312 | } else {
313 | document.addEventListener('DOMContentLoaded', init);
314 | window.addEventListener('load', init);
315 | }
316 | }
317 |
318 | // Fallback interval check
319 | const checkInitInterval = setInterval(() => {
320 | if (document.readyState === 'complete' || youlagScriptLoaded === true) {
321 | init();
322 | clearInterval(checkInitInterval);
323 | }
324 | }, 1000);
325 |
326 | // Ensure init runs
327 | initFallback();
--------------------------------------------------------------------------------
/src/capture.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/civilblur/youlag/67940135294bae938804705d80363db9654c7f63/src/capture.png
--------------------------------------------------------------------------------
/src/icon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/civilblur/youlag/67940135294bae938804705d80363db9654c7f63/src/icon.png
--------------------------------------------------------------------------------
/src/theme.scss:
--------------------------------------------------------------------------------
1 | /*****************************************
2 | *
3 | * Youlag Theme for FreshRSS
4 | *
5 | * Version: 3.0.5
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 | *
31 | *
32 | * NOTE
33 | * (1)
34 | * To revert Mapco theme to light mode,
35 | * comment out the CSS in the
36 | * "Mapco theme dark mode" section.
37 | *
38 | * (2)
39 | * This is a fallback view of displaying
40 | * feed items, if the Youlag script is not
41 | * utilized or fails to load.
42 | *
43 | *
44 | * TODO
45 | * - Refactor values to CSS variable, such as
46 | * colors, border-radius, margin, padding,
47 | * spacing, etc.
48 | *
49 | ****************************************/
50 |
51 |
52 |
53 | /*****************************************
54 | * BEGIN "VARIABLES AND KEYFRAMES"
55 | ****************************************/
56 |
57 |
58 |
59 |
60 | :root {
61 | --yl-space-3xs: clamp(0.3125rem, 0.3125rem + 0vw, 0.3125rem);
62 | --yl-space-2xs: clamp(0.5625rem, 0.5408rem + 0.1087vw, 0.625rem);
63 | --yl-space-xs: clamp(0.875rem, 0.8533rem + 0.1087vw, 0.9375rem);
64 | --yl-space-sm: clamp(1.125rem, 1.0815rem + 0.2174vw, 1.25rem);
65 | --yl-space-md: clamp(1.6875rem, 1.6223rem + 0.3261vw, 1.875rem);
66 | --yl-space-lg: clamp(2.25rem, 2.163rem + 0.4348vw, 2.5rem);
67 | --yl-space-xl: clamp(3.375rem, 3.2446rem + 0.6522vw, 3.75rem);
68 | --yl-space-2xl: clamp(4.5rem, 4.3261rem + 0.8696vw, 5rem);
69 | --yl-space-3xl: clamp(6.75rem, 6.4891rem + 1.3043vw, 7.5rem);
70 |
71 | --yl-p-3xs: var(--yl-space-3xs);
72 | --yl-p-2xs: var(--yl-space-2xs);
73 | --yl-p-xs: var(--yl-space-xs);
74 | --yl-p-sm: var(--yl-space-sm);
75 | --yl-p-md: var(--yl-space-md);
76 | --yl-p-lg: var(--yl-space-lg);
77 | --yl-p-xl: var(--yl-space-xl);
78 | --yl-p-2xl: var(--yl-space-2xl);
79 | --yl-p-3xl: var(--yl-space-3xl);
80 |
81 | --yl-m-3xs: var(--yl-space-3xs);
82 | --yl-m-2xs: var(--yl-space-2xs);
83 | --yl-m-xs: var(--yl-space-xs);
84 | --yl-m-sm: var(--yl-space-sm);
85 | --yl-m-md: var(--yl-space-md);
86 | --yl-m-lg: var(--yl-space-lg);
87 | --yl-m-xl: var(--yl-space-xl);
88 | --yl-m-2xl: var(--yl-space-2xl);
89 | --yl-m-3xl: var(--yl-space-3xl);
90 |
91 | --yl-text-2xs: clamp(0.7813rem, 0.7747rem + 0.0326vw, 0.8rem);
92 | --yl-text-xs: clamp(0.9375rem, 0.9158rem + 0.1087vw, 1rem);
93 | --yl-text-sm: clamp(1.125rem, 1.0815rem + 0.2174vw, 1.25rem);
94 | --yl-text-md: clamp(1.35rem, 1.2761rem + 0.3696vw, 1.5625rem);
95 | --yl-text-lg: clamp(1.62rem, 1.5041rem + 0.5793vw, 1.9531rem);
96 | --yl-text-xl: clamp(1.944rem, 1.771rem + 0.8651vw, 2.4414rem);
97 | --yl-text-2xl: clamp(2.3328rem, 2.0827rem + 1.2504vw, 3.0518rem);
98 | --yl-text-3xl: clamp(2.7994rem, 2.4462rem + 1.7658vw, 3.8147rem);
99 |
100 | --favicon-avatar-size: 34px;
101 | --favicon-avatar-size-margin: 6px;
102 | --feed-day-title-font-size: 2.3rem;
103 | }
104 |
105 | @media (max-width: 840px) {
106 | :root {
107 | --favicon-avatar-size: 42px;
108 | }
109 | }
110 |
111 | @keyframes pulse {
112 | 0%, 100% {
113 | filter: brightness(1);
114 | }
115 | 50% {
116 | filter: brightness(0.6);
117 | }
118 | }
119 |
120 |
121 | // TODO 2025-02-22: Create an utility classes section and move these classes to it.
122 | .yl-flex {
123 | display: flex;
124 | }
125 |
126 | .yl-flex-col {
127 | flex-direction: column;
128 | }
129 |
130 | .yt-items-center {
131 | align-items: center;
132 | }
133 |
134 | .yt-flex-1 {
135 | flex: 1;
136 | }
137 |
138 | .yl-gap-3xs {
139 | gap: var(--yl-space-3xs);
140 | }
141 |
142 | .yl-mb-md {
143 | margin-bottom: var(--yl-m-md);
144 | }
145 |
146 | .w-100 {
147 | width: 100%;
148 | }
149 |
150 |
151 |
152 | /*****************************************
153 | * END "VARIABLES AND KEYFRAMES"
154 | ****************************************/
155 |
156 |
157 |
158 |
159 |
160 |
161 | /*****************************************
162 | *
163 | * BEGIN "FEED GRID LAYOUT"
164 | *
165 | * Turn the feed table view to grid view.
166 | *
167 | ****************************************/
168 |
169 | body:not(.reader) main#stream {
170 | display: grid;
171 | grid-template-columns: repeat(3, minmax(150px, 1fr));
172 | gap: 4px;
173 | padding: 1.5rem;
174 |
175 | @media (max-width: 840px) {
176 | grid-template-columns: minmax(200px, 1fr);
177 | }
178 |
179 | @media (min-width: 600px) {
180 | grid-template-columns: repeat(2, minmax(200px, 1fr));
181 | }
182 |
183 | @media (max-width: 600px) {
184 | grid-row-gap: 2rem;
185 | }
186 |
187 | @media (min-width: 1144px) {
188 | grid-template-columns: repeat(2, minmax(200px, 1fr));
189 | }
190 |
191 | @media (min-width: 1360px) {
192 | grid-template-columns: repeat(3, minmax(240px, 1fr));
193 | }
194 |
195 | @media (min-width: 1800px) {
196 | grid-template-columns: repeat(4, minmax(200px, 1fr));
197 | }
198 | }
199 |
200 |
201 | /*****************************************
202 | * END "FEED GRID LAYOUT"
203 | ****************************************/
204 |
205 |
206 |
207 |
208 |
209 |
210 |
211 |
212 | /*****************************************
213 | *
214 | * BEGIN "COMMON LAYOUT ELEMENTS"
215 | *
216 | * For misc. elements such as navigation,
217 | * structural titles, etc.
218 | *
219 | ****************************************/
220 |
221 | @media (max-width: 840px) {
222 | body {
223 | padding-top: 61px; // Encompass mobile fixed header
224 | }
225 | }
226 |
227 |
228 | nav.aside.aside_feed {
229 | /* Position and adjust behavior of "Subscriptions management" button */
230 | text-align: unset;
231 |
232 | /* Manage feeds ("Subscriptions management") button */
233 | .stick.configure-feeds {
234 | position: relative;
235 |
236 | &:before {
237 | content: "Manage feeds";
238 | position: absolute;
239 | top: 50%;
240 | left: 69px;
241 | transform: translateY(-50%);
242 | z-index: 1;
243 | font-weight: normal;
244 | pointer-events: none;
245 | }
246 |
247 | &:after {
248 | content: "";
249 | position: absolute;
250 | top: 50%;
251 | left: 21px;
252 | transform: translateY(-50%);
253 | z-index: 1;
254 | filter: invert(1);
255 | width: 20px;
256 | height: 20px;
257 | pointer-events: none;
258 | background-repeat: no-repeat;
259 | /* RSS icon */
260 | background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbDpzcGFjZT0icHJlc2VydmUiIHZpZXdCb3g9IjAgMCA0OTAgNDkwIj48cGF0aCBkPSJNNDY4LjIgNDg5LjVIMjAuOEM5LjQgNDg5LjUgMCA0ODAuMSAwIDQ2OC43VjIxLjNDMCA5LjkgOS40LjUgMjAuOC41aDQ0OC40QzQ4MC42LjUgNDkwIDkuOSA0OTAgMjEuM3Y0NDguNGMtMSAxMC40LTEwLjQgMTkuOC0yMS44IDE5Ljh6TTQwLjYgNDQ4LjloNDA3LjhWNDEuMUg0MC42djQwNy44eiIvPjxwYXRoIGQ9Ik0yNjAuMSA0MTkuOGMtMTEuNCAwLTIwLjgtOS40LTIwLjgtMjAuOCAwLTc3LTYyLjQtMTM5LjQtMTM5LjQtMTM5LjQtMTEuNCAwLTIwLjgtOS40LTIwLjgtMjAuOFM4OC41IDIxOCA5OS45IDIxOGM5OS45IDAgMTgxIDgxLjEgMTgxIDE4MSAwIDExLjQtOS40IDIwLjgtMjAuOCAyMC44eiIvPjxwYXRoIGQ9Ik0zNDcuNSA0MTkuOGMtMTEuNCAwLTIwLjgtOS40LTIwLjgtMjAuOCAwLTEyNC44LTEwMi0yMjcuOC0yMjcuOC0yMjcuOC0xMS40IDAtMjAuOC05LjQtMjAuOC0yMC44czkuNC0yMC44IDIwLjgtMjAuOGMxNDcuNyAwIDI2OC40IDEyMC43IDI2OC40IDI2OC40IDEgMTIuNC04LjQgMjEuOC0xOS44IDIxLjh6TTE3My43IDQxOS44Yy0xMS40IDAtMjAuOC05LjQtMjAuOC0yMC44IDAtMjkuMS0yMy45LTUzLjEtNTMuMS01My4xLTExLjQgMC0yMC44LTkuNC0yMC44LTIwLjhzOS40LTIwLjggMjAuOC0yMC44YzUyIDAgOTQuNyA0Mi43IDk0LjcgOTQuNyAwIDExLjQtOS4zIDIwLjgtMjAuOCAyMC44eiIvPjwvc3ZnPg==);
261 | }
262 |
263 | #btn-subscription,
264 | #btn-add {
265 | transition: 0s;
266 | }
267 |
268 | #btn-subscription:hover,
269 | #btn-subscription:hover ~ #btn-add,
270 | #btn-add:hover {
271 | background-color: #303136;
272 | }
273 |
274 | #btn-add {
275 | border-top-right-radius: 8px;
276 | border-bottom-right-radius: 8px;
277 |
278 | &:before {
279 | /* Hack: When hovering #btn-add, also highlight #btn-subscription */
280 | content: "";
281 | width: calc(100% - 68px);
282 | height: 100%;
283 | background: #303136;
284 | left: 8px;
285 | position: absolute;
286 | border-top-left-radius: 8px;
287 | border-bottom-left-radius: 8px;
288 | pointer-events: none;
289 | opacity: 0;
290 | transition: 0s;
291 | }
292 |
293 | &:hover {
294 | background-color: #424348;
295 |
296 | &:before {
297 | opacity: 1;
298 | }
299 | }
300 | }
301 |
302 | #btn-subscription {
303 | /* Hide text, later replace with psuedo element :before text */
304 | font-size: 0;
305 | flex: 1;
306 | height: 52px;
307 | margin-left: 8px;
308 | border-top-left-radius: 8px;
309 | border-bottom-left-radius: 8px;
310 | }
311 |
312 | #btn-subscription,
313 | #btn-add {
314 | text-transform: capitalize;
315 | font-weight: normal;
316 | display: flex;
317 | align-items: center;
318 | background: none;
319 | box-sizing: border-box;
320 | }
321 |
322 | #btn-add {
323 | font-size: 1rem;
324 | border-top-right-radius: 8px;
325 | border-bottom-right-radius: 8px;
326 | background: none;
327 | border: none;
328 | width: 60px;
329 | display: flex;
330 | justify-content: center;
331 | align-items: center;
332 |
333 | .icon {
334 | filter: brightness(3);
335 | height: 1.5rem;
336 | }
337 |
338 | &:hover {
339 | background-color: #424348;
340 | }
341 | }
342 | }
343 |
344 | #mark-read-aside ul#sidebar {
345 |
346 | .tree-folder.category {
347 | .tree-folder-title .title {
348 | font-weight: normal;
349 | }
350 | }
351 |
352 | & > li.tree-folder ul.tree-folder-items li.item.feed > .dropdown {
353 | margin-right: 0;
354 | }
355 |
356 | /* Subscriptions ("Main stream") button */
357 | .tree-folder.category.all {
358 | .tree-folder-title .title {
359 | font-size: 0;
360 |
361 | &:before {
362 | content: "Subscriptions";
363 | }
364 | }
365 |
366 | .icon {
367 | opacity: 0;
368 | pointer-events: none;
369 | }
370 |
371 | .tree-folder-title:before {
372 | /* Video icon */
373 | content:"";
374 | width:20px;
375 | height:20px;
376 | position: absolute;
377 | filter: invert(1);
378 | pointer-events: none;
379 | background-repeat: no-repeat;
380 | background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA4MDAgODAwIj48cGF0aCBkPSJNNzY2LjE5Ni43MzVIMzMuOTY2QzE1LjM1LjczNSAwIDE2LjA4NSAwIDM0Ljd2NjAxLjQyN2MwIDE4LjYxNiAxNS4zNSAzMy45NjcgMzMuOTY2IDMzLjk2N2g3MzAuNDMzYzE4LjYxNiAwIDMzLjk2Ni0xNS4zNTEgMzUuNTk5LTMyLjMzNFYzNC43MDFDODAwLjE2MiAxNi4wODUgNzg0LjgxMi43MzUgNzY2LjE5Ni43MzVabS0zMy45NjYgNjAzLjA2SDY2LjNWNjcuMDM0aDY2NS45M3Y1MzYuNzYxWk03NjYuMTk2IDczMS4zMzJIMzMuOTY2QzE1LjM1IDczMS4zMzIgMCA3NDYuNjgyIDAgNzY1LjI5OHMxNS4zNSAzMy45NjYgMzMuOTY2IDMzLjk2Nmg3MzAuNDMzYzE4LjYxNiAwIDM1LjU5OS0xNS4zNSAzNS41OTktMzMuOTY2LjE2NC0xOC43OC0xNS4xODYtMzMuOTY2LTMzLjgwMi0zMy45NjZaIi8+PHBhdGggZD0iTTUxNi40MDggMzA4LjIwOCAzNDYuNjEyIDE5NC40MTJjLTIyLjIwNC0xNC41My01MC45MzkgMi4xMjMtNTAuOTM5IDI3LjEwMnYyMjcuNTkyYzAgMjYuMjg2IDI4LjczNSA0MS40NjkgNTAuOTM5IDI3LjEwMmwxNjkuNzk2LTExMy43OTZjMTUuMTg0LTguMTYzIDI0LjY1My0zNi4yNDUgMC01NC4yMDRabS0xNTQuNjEyIDc4LjA0MVYyODQuMzcxbDc2LjQwOCA1MC45MzktNzYuNDA4IDUwLjkzOVoiLz48L3N2Zz4=);
381 | }
382 | }
383 |
384 |
385 | /* Important feeds button */
386 | .tree-folder.category.important {
387 | .tree-folder-title .title {
388 | font-size: 0;
389 |
390 | &:before {
391 | content: "Important";
392 | }
393 | }
394 |
395 | .icon {
396 | opacity: 0;
397 | pointer-events: none;
398 | }
399 |
400 | .tree-folder-title:before {
401 | /* Bell icon */
402 | content:"";
403 | width:20px;
404 | height:20px;
405 | position: absolute;
406 | filter: invert(1);
407 | background-repeat: no-repeat;
408 | background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbDpzcGFjZT0icHJlc2VydmUiIHZpZXdCb3g9IjAgMCA0ODcuNzcgNDg3Ljc3Ij48cGF0aCBkPSJNNDg2LjIgMjEwLjI2Yy02LjMtMTguOC0yNi4xLTIxLjktNDQuOC0yNS0xOS44LTMuMS00Mi43LTYuMy01OS40LTI0LTc2LjEtODMuNC0xNDEuOC0xMDEuMS0xODMuNS0xMDIuMS0xNy43LS41LTM0LjYgMi4yLTUwLjMgNy44LTMuOC0zNy40LTM1LjUtNjYuOC03My45LTY2LjhDMzMuMy4xNiAwIDMzLjQ2IDAgNzQuNDZjMCAzOC44IDI5LjggNzAuNyA2Ny43IDc0LTUuNiAxNS44LTguMyAzMi42LTcuOCA1MC40IDEgNDEuNyAxOS44IDEwNi4zIDEwMi4yIDE4My41IDE3LjcgMTYuNyAyMC45IDM5LjYgMjQgNTkuNCAzLjEgMTguOCA2IDM5LjUgMjUgNDQuOCAyMC4xIDUuNiA0Ny0xMSA5NC01NC41IDE3LjEgMTYuMyA0MC4yIDI1LjkgNjQuMyAyNS45IDUxLjIgMCA5Mi45LTQxLjcgOTIuOS05Mi45IDAtMjQuNi05LjgtNDgtMjYuOC02NS4zIDQ5LjUtNTQgNTYuMS03MS43IDUwLjctODkuNXpNNDAuOSA3NC40NmMwLTE4LjQgMTQuOS0zMy4zIDMzLjMtMzMuM3MzMy4zIDE0LjkgMzMuMyAzMy4zLTE0LjkgMzMuMy0zMy4zIDMzLjMtMzMuMy0xNC45LTMzLjMtMzMuM3ptMzI4LjQgMzQyLjVjLTEzIDAtMjUuMi00LjgtMzQuNi0xMy4xIDExLjEtMTEuMSA2My02NS4xIDcyLjQtNzQuMyA4LjkgOS41IDE0LjEgMjIuMiAxNC4xIDM1LjUgMCAyOC42LTIzLjMgNTEuOS01MS45IDUxLjl6bS0xNDIuNyAyNy45YzAtMy4xLTkuNC02NS43LTM3LjUtOTEuNy01Ny4zLTUzLjItODcuNi0xMDYuMy04OC42LTE1NC4zIDAtMjguMSAxOC42LTEwMC4yIDk4LTk5IDQ4IC43IDEwMS4xIDMxLjMgMTU0LjMgODguNiAyNi4xIDI4LjEgODguNiAzNy41IDkxLjcgMzcuNS0xNC43IDI2LjgtMTkyIDIwNC42LTIxNy45IDIxOC45eiIvPjwvc3ZnPg==);
409 | }
410 | }
411 |
412 |
413 | /* Favorites button */
414 | .tree-folder.category.favorites {
415 | .icon {
416 | opacity: 0;
417 | pointer-events: none;
418 | }
419 |
420 | .tree-folder-title:before {
421 | /* Star icon */
422 | content:"";
423 | width:20px;
424 | height:20px;
425 | position: absolute;
426 | filter: invert(1);
427 | pointer-events: none;
428 | background-repeat: no-repeat;
429 | background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGZpbGw9Im5vbmUiIHZpZXdCb3g9IjAgMCAyNCAyNCI+PGcgY2xpcC1wYXRoPSJ1cmwoI2EpIj48cGF0aCBzdHJva2U9IiMwMDAiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgc3Ryb2tlLXdpZHRoPSIyIiBkPSJNMTEuMDkxIDIuNjM1Yy4yODgtLjY0Ny40MzItLjk3LjYzMy0xLjA3YS42MjEuNjIxIDAgMCAxIC41NTIgMGMuMjAxLjEuMzQ1LjQyMy42MzMgMS4wN2wyLjI5NCA1LjE1Yy4wODUuMTkyLjEyOC4yODcuMTk0LjM2LjA1OC4wNjUuMTMuMTE3LjIwOS4xNTMuMDkuMDQuMTk0LjA1LjQwMi4wNzNsNS42MDMuNTkyYy43MDMuMDc0IDEuMDU1LjExMSAxLjIxMi4yNzEuMTM2LjE0LjE5OS4zMzQuMTcuNTI3LS4wMzIuMjIxLS4yOTUuNDU4LS44Mi45MzJsLTQuMTg2IDMuNzc2Yy0uMTU1LjE0LS4yMzMuMjEtLjI4Mi4yOTVhLjYyNC42MjQgMCAwIDAtLjA4LjI0NmMtLjAxLjA5OC4wMTEuMi4wNTUuNDA1bDEuMTY5IDUuNTE3Yy4xNDcuNjkzLjIyIDEuMDQuMTE2IDEuMjM4YS42MjIuNjIyIDAgMCAxLS40NDcuMzI1Yy0uMjIuMDM3LS41MjctLjE0LTEuMTQtLjQ5M2wtNC44OC0yLjgxOGMtLjE4Mi0uMTA1LS4yNzItLjE1Ny0uMzY5LS4xNzdhLjYyMi42MjIgMCAwIDAtLjI1OCAwYy0uMDk3LjAyLS4xODcuMDcyLS4zNjguMTc3bC00Ljg4MSAyLjgxOGMtLjYxMy4zNTQtLjkyLjUzLTEuMTQuNDkzYS42MjIuNjIyIDAgMCAxLS40NDctLjMyNWMtLjEwNC0uMTk5LS4wMy0uNTQ1LjExNi0xLjIzOGwxLjE3LTUuNTE3Yy4wNDMtLjIwNC4wNjQtLjMwNy4wNTQtLjQwNWEuNjI0LjYyNCAwIDAgMC0uMDgtLjI0NmMtLjA0OS0uMDg1LS4xMjctLjE1NS0uMjgyLS4yOTVsLTQuMTg1LTMuNzc2Yy0uNTI2LS40NzQtLjc4OS0uNzEtLjgyMS0uOTMyYS42MjMuNjIzIDAgMCAxIC4xNy0uNTI3Yy4xNTctLjE2LjUwOS0uMTk3IDEuMjEyLS4yNzFsNS42MDQtLjU5MmMuMjA4LS4wMjIuMzEyLS4wMzMuNDAxLS4wNzNhLjYyMi42MjIgMCAwIDAgLjIxLS4xNTJjLjA2NS0uMDc0LjEwOC0uMTcuMTkzLS4zNmwyLjI5NC01LjE1MVoiLz48L2c+PGRlZnM+PGNsaXBQYXRoIGlkPSJhIj48cGF0aCBkPSJNMCAwaDI0djI0SDB6Ii8+PC9jbGlwUGF0aD48L2RlZnM+PC9zdmc+);
430 | }
431 | }
432 |
433 | /* Playlists ("My labels") button */
434 | #tags {
435 | /* Always display Playlist ("My Labels") button */
436 | display: list-item !important;
437 |
438 | .tree-folder-title .title {
439 | font-size: 0;
440 |
441 | &:before {
442 | content: "Playlists";
443 | }
444 | }
445 |
446 | button.dropdown-toggle .icon {
447 | /* Hide playlist ("My Labels") dropdown toggle icon while keeping its functionality */
448 | opacity: 0;
449 | }
450 |
451 | & > .tree-folder-items .item.feed .item-title .icon {
452 | /* Remove tag item icons */
453 | display: none;
454 | }
455 |
456 | .tree-folder-title:before {
457 | /* Playlist icon */
458 | content:"";
459 | width:20px;
460 | height:20px;
461 | position: absolute;
462 | filter: invert(1);
463 | background-repeat: no-repeat;
464 | background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGZpbGw9Im5vbmUiIHZpZXdCb3g9IjAgMCA4MDAgODAwIj48cGF0aCBmaWxsPSIjMDAwIiBkPSJNMCA5MC41QTM3LjUgMzcuNSAwIDAgMSAzNy41IDUzaDcyNUEzNy40OTcgMzcuNDk3IDAgMCAxIDgwMCA5MC41YTM3LjUgMzcuNSAwIDAgMS0zNy41IDM3LjVoLTcyNUEzNy40OTggMzcuNDk4IDAgMCAxIDAgOTAuNVpNMzcuNSAzMjhoNzI1YTM3LjQ5NiAzNy40OTYgMCAwIDAgMjYuNTE2LTEwLjk4NCAzNy40OTYgMzcuNDk2IDAgMCAwIDAtNTMuMDMzQTM3LjUgMzcuNSAwIDAgMCA3NjIuNSAyNTNoLTcyNUEzNy41MDIgMzcuNTAyIDAgMCAwIDAgMjkwLjUgMzcuNDk3IDM3LjQ5NyAwIDAgMCAzNy41IDMyOFptMjQ0IDEyNWgtMjQ0QTM3LjUwMiAzNy41MDIgMCAwIDAgMCA0OTAuNSAzNy40OTcgMzcuNDk3IDAgMCAwIDM3LjUgNTI4aDI0NGEzNy41IDM3LjUgMCAwIDAgMC03NVpNMzcuNSA2NTNoMjQ0YTM3LjUgMzcuNSAwIDAgMSAwIDc1aC0yNDRhMzcuNDk5IDM3LjQ5OSAwIDAgMSAwLTc1WiIvPjxwYXRoIHN0cm9rZT0iIzAwMCIgc3Ryb2tlLXdpZHRoPSI2NSIgZD0iTTYzNi44MzMgNDY5Ljg4YzgwLjExOCA0Ni4zNTggMTIwLjE4MSA2OS41MzQgMTI2LjA2MiAxMDIuOTc0YTcyLjkzNyA3Mi45MzcgMCAwIDEgMCAyNS4yOTNjLTUuODgxIDMzLjQzOS00NS45NDQgNTYuNjE1LTEyNi4wNjIgMTAyLjk3My04MC4xMTcgNDYuMzUzLTEyMC4xODEgNjkuNTI5LTE1Mi4wMTggNTcuOTE2YTcyLjU2NiA3Mi41NjYgMCAwIDEtMjEuODU4LTEyLjY0NkM0MzcgNzI0LjU2MyA0MzcgNjc4LjIxIDQzNyA1ODUuNWMwLTkyLjcxIDAtMTM5LjA2MyAyNS45NTctMTYwLjg5YTcyLjY3IDcyLjY3IDAgMCAxIDIxLjg1OC0xMi42NDZjMzEuODM3LTExLjYxMyA3MS45MDEgMTEuNTY0IDE1Mi4wMTggNTcuOTE2WiIvPjwvc3ZnPg==);
465 | }
466 | }
467 |
468 | }
469 |
470 | /**
471 | * Side navigation button label font adjustment:
472 | * - Manage feed ("Subscriptions management")
473 | * - Subscriptions ("Main stream")
474 | * - Important
475 | * - Favorites
476 | * - Playlists ("My labels")
477 | * - User's category
478 | */
479 | .stick.configure-feeds:before,
480 | .tree-folder.category.all .tree-folder-title .title:before,
481 | .tree-folder.category.important .tree-folder-title .title:before,
482 | .tree-folder.category.favorites .tree-folder-title .title:before,
483 | #tags .tree-folder-title .title:before,
484 | .tree-folder.category .tree-folder-title .title {
485 | font-size: 1.2rem;
486 | letter-spacing: 1px;
487 | font-weight: normal;
488 | }
489 |
490 |
491 | /* Keep "Subscriptions management" button sticky on scroll */
492 | .stick.configure-feeds {
493 | position: sticky;
494 | top: 20px;
495 | z-index: 10;
496 | width: 292px;
497 | }
498 |
499 | @media (max-width: 840px) {
500 | .stick.configure-feeds {
501 | width: calc(100% - 8px);
502 | }
503 | }
504 |
505 | #mark-read-aside {
506 | top: calc(20px + 52px); /* Padding-top of container + height of "Subscriptions management" button */
507 | }
508 | }
509 |
510 |
511 | /* Settings page buttons */
512 | #aside_feed .item.nav-section a[href="./?c=tag"] {
513 | font-size: 0;
514 |
515 | &:before {
516 | content: "Playlist management";
517 | font-size: 1.2rem;
518 | }
519 | }
520 |
521 | /* Change text in settings page containing "Label" to "Playlist" */
522 | main.post:has(#add_tag) {
523 | > h1:first-of-type {
524 | font-size: 0;
525 |
526 | &:before {
527 | content: "Playlist management";
528 | font-size: 2rem;
529 | }
530 | }
531 |
532 | > h2:first-of-type {
533 | font-size: 0;
534 |
535 | &:before {
536 | content: "Create a playlist";
537 | font-size: 1.5rem;
538 | }
539 | }
540 | }
541 |
542 | @media (max-width: 840px) {
543 | .header {
544 | // Header on mobile
545 | position: fixed;
546 | top: 0;
547 | left: 0;
548 | z-index: 50;
549 |
550 | &:has(.configure .dropdown-target:target) {
551 | // On mobile, prevent the fixed hamburger menu `nav_menu .toggle_aside`
552 | // to sit on top of the settings menu. Applies for feed and non-feed pages.
553 | z-index: 110;
554 | }
555 |
556 | .configure .dropdown .dropdown-menu {
557 | // Remove gap on left side.
558 | left: 0 !important;
559 | }
560 | }
561 |
562 | #slider {
563 |
564 | .btn.toggle_aside {
565 | // Reset fixed navigation for non-feed pages.
566 | max-width: 49px;
567 | margin: 0;
568 | padding: 0.85rem 1.25rem;
569 | background: #303136;
570 | border: none;
571 |
572 | &:hover {
573 | background-color: #424348;
574 | }
575 | }
576 | }
577 |
578 | .aside {
579 | &:target ~ aside#slider a.toggle_aside {
580 | // Hide the fixed hamburger menu on non-feed page when its `aside_feed` menu is opened,
581 | // to prevent overlapping.
582 | opacity: 0;
583 | pointer-events: none;
584 | transition: opacity 0s;
585 | }
586 |
587 | & ~ aside#slider a.toggle_aside {
588 | // Fade in the hamburger menu on non-feed page,
589 | // to prevent abrupt display of the button while `aside_feed` is being collapse animated.
590 | transition: opacity 0.3s;
591 | }
592 |
593 | }
594 |
595 |
596 |
597 | body:not(.normal) #aside_feed.nav.nav-list.aside {
598 | padding-top: 0;
599 | }
600 |
601 | }
602 |
603 | .header {
604 | min-height: 61px;
605 | box-sizing: border-box;
606 |
607 |
608 | /* Page logo */
609 | .item.title {
610 | position: relative;
611 | text-align: unset;
612 | padding-left: 5px;
613 | min-height: 61px;
614 | box-sizing: border-box;
615 |
616 | & > a {
617 | align-content: center;
618 | }
619 |
620 |
621 | @media (max-width: 840px) {
622 | /* Center logo as sidenav toggle button is on the left side for mobile view */
623 | display: flex;
624 | justify-content: center;
625 | position: absolute;
626 | width: 100%;
627 | }
628 | }
629 |
630 | /* Header search bar */
631 | .item.search {
632 | input {
633 | width: 600px;
634 | padding: 0.8rem 1.6rem;
635 | border-top-left-radius: 99px;
636 | border-bottom-left-radius: 99px;
637 |
638 | &:focus,
639 | &:hover {
640 | background-color: #26272a;
641 | color: white;
642 |
643 | & ~ .btn {
644 | background-color: #57575a;
645 | }
646 | }
647 | }
648 |
649 | .btn {
650 | border-top-right-radius: 99px;
651 | border-bottom-right-radius: 99px;
652 | width: 75px;
653 |
654 | &:hover {
655 | background-color: #57575a;
656 | }
657 | }
658 | }
659 |
660 | /* Header settings button */
661 | .item.configure .btn {
662 | width: 46px;
663 | height: 46px;
664 | display: flex;
665 | align-items: center;
666 | justify-content: center;
667 | background: #26272a;
668 | border-radius: 50%;
669 | padding: 0;
670 | box-sizing: border-box;
671 |
672 | &:hover {
673 | background-color: #57575a;
674 | }
675 |
676 | > img {
677 | /* Sizing for default settings button */
678 | width: 18px;
679 | height: 18px;
680 | }
681 |
682 | /*
683 | > img {
684 | // Hide default settings icon
685 | opacity: 0;
686 | pointer-events: none;
687 | }
688 |
689 | // Issue with loading base64 image in settings page due to "Content Security Policy directive: "default-src 'self'".
690 | &:before {
691 | // User icon
692 | content:"";
693 | width: 20px;
694 | height: 20px;
695 | position: absolute;
696 | filter: invert(1);
697 | background-repeat: no-repeat;
698 | background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+PHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBkPSJNMTIgMy4yYy0xLjg2NCAwLTMuMzc1IDEuNDc3LTMuMzc1IDMuMyAwIDEuODIzIDEuNTExIDMuMyAzLjM3NSAzLjNzMy4zNzUtMS40NzcgMy4zNzUtMy4zYzAtMS44MjMtMS41MTEtMy4zLTMuMzc1LTMuM1pNNi4zNzUgNi41QzYuMzc1IDMuNDYyIDguODkzIDEgMTIgMXM1LjYyNSAyLjQ2MiA1LjYyNSA1LjVTMTUuMTA3IDEyIDEyIDEyIDYuMzc1IDkuNTM4IDYuMzc1IDYuNVpNMTIgMTUuM2MtMy43MjggMC02Ljc1IDIuOTU1LTYuNzUgNi42IDAgLjYwOC0uNTA0IDEuMS0xLjEyNSAxLjFBMS4xMTMgMS4xMTMgMCAwIDEgMyAyMS45YzAtNC44NiA0LjAzLTguOCA5LTguOHM5IDMuOTQgOSA4LjhjMCAuNjA4LS41MDQgMS4xLTEuMTI1IDEuMWExLjExMyAxLjExMyAwIDAgMS0xLjEyNS0xLjFjMC0zLjY0NS0zLjAyMi02LjYtNi43NS02LjZaIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiLz48L3N2Zz4=);
699 | }
700 | */
701 | }
702 | }
703 |
704 | @media (max-width: 840px) {
705 |
706 | header.header {
707 | .item.configure {
708 | display: flex;
709 | align-items: center;
710 | height: 50px;
711 | justify-content: flex-end;
712 | padding-right: 14px;
713 |
714 | .btn {
715 | width: 40px;
716 | height: 40px;
717 | }
718 | }
719 | }
720 |
721 | #global .nav_menu {
722 |
723 | a.btn[href="#aside_feed"] {
724 | /* Place mobile sidenav expand button toggle on header */
725 | position: fixed;
726 | top: 0;
727 | left: 0;
728 | min-height: 61px;
729 | box-sizing: border-box;
730 | border-radius: 0;
731 | z-index: 60;
732 |
733 | .icon {
734 | /* Hide existing sidenav toggle icon */
735 | display: none;
736 | }
737 |
738 | &:after {
739 | /* Add new sidenav toggle icon */
740 | content: "";
741 | display: block;
742 | width: 14px;
743 | height: 36px; // For centering the icon vertically, actual icon size is determined by the width.
744 | background-image: url('../themes/Mapco/icons/view-normal.svg'); // Existing image from FreshRSS theme "Mapco"
745 | background-size: contain;
746 | background-position: center;
747 | background-repeat: no-repeat;
748 | filter: brightness(3);
749 | }
750 | }
751 |
752 | .item.configure {
753 |
754 | .btn {
755 | width: 40px;
756 | height: 40px;
757 | }
758 | }
759 |
760 |
761 | }
762 |
763 |
764 |
765 | }
766 |
767 |
768 |
769 |
770 | /* End of feed footer */
771 | main#stream #stream-footer,
772 | #overlay #panel #stream-footer {
773 | grid-column: 1 / -1;
774 | border-top: none;
775 | margin-top: 3rem;
776 |
777 | .stream-footer-inner {
778 | /* Hide text, then, apply new text using psuedo element :before/:after */
779 | font-size: 0;
780 | display: flex;
781 | flex-direction: column;
782 |
783 | &:before {
784 | content: "(╯°□°)╯︵ ┻━┻";
785 | font-size: 2.4rem;
786 | margin-bottom: 2rem;
787 | opacity: 0.75;
788 | }
789 |
790 | &:after {
791 | content: "You've reached the end";
792 | font-size: 1.4rem;
793 | order: -1;
794 | margin-bottom: 0.5rem;
795 | opacity: 0.75;
796 | }
797 | }
798 |
799 | button#bigMarkAsRead {
800 | /* Mark as read button */
801 | border-radius: 12px;
802 | margin-top: 4rem;
803 | padding-left: 8px;
804 | padding-right: 8px;
805 | padding-top: 1rem;
806 | padding-bottom: 2rem;
807 | margin-bottom: 0;
808 | max-width: 600px;
809 | margin-left: auto;
810 | margin-right: auto;
811 | }
812 | }
813 |
814 | #load_more.loading,
815 | #load_more.loading:hover {
816 | /* Infinite scroll loading spinner */
817 | border-radius: 8px;
818 | }
819 |
820 | /* Feed menu */
821 | .nav_menu {
822 | padding: 2rem 1rem 0 1rem;
823 | box-sizing: border-box;
824 |
825 | #nav_menu_actions {
826 | flex-wrap: wrap;
827 | }
828 |
829 | #mark-read-menu {
830 | align-items: center;
831 |
832 | .read_all.btn {
833 | width: 100%;
834 | height: 100%;
835 | }
836 | }
837 |
838 | }
839 |
840 | /* Card day section title */
841 | main#stream .day {
842 | grid-column: 1 / -1;
843 | font-size: var(--feed-day-title-font-size);
844 | opacity: 0.8;
845 | padding: 0 8px;
846 | line-height: 1.2;
847 | margin-top: 8rem;
848 | margin-bottom: 2rem;
849 |
850 |
851 | .date,
852 | .name {
853 | display: none;
854 | }
855 |
856 | &#day_before_yesterday {
857 | /* Hide text, then, apply new text using psuedo element :before */
858 | font-size: 0 !important;
859 |
860 | &:before {
861 | content: "Past";
862 | font-size: var(--feed-day-title-font-size);
863 | }
864 | }
865 | }
866 |
867 | main#stream {
868 | /* Reduce margin-top on the first day that appears at the top of the feed */
869 | #new-article + .day {
870 | margin-top: 2rem;
871 | }
872 |
873 | /* Hide title "Past" if it is the only day-title on the feed */
874 | #new-article + #day_before_yesterday {
875 | visibility: hidden;
876 | margin-bottom: 0;
877 | pointer-events: none;
878 | user-select: none;
879 | }
880 |
881 | .flux:has(li.item.labels .item-element.dropdown .dropdown-target:target) {
882 | /* Prevent card item favicon avatar to be placed above Playlist (labels) dropdown */
883 | z-index: 20;
884 | }
885 |
886 | }
887 |
888 |
889 |
890 |
891 |
892 | a.signout img.icon {
893 | display: none;
894 | }
895 |
896 |
897 | /*****************************************
898 | *
899 | * BEGIN "CARD"
900 | *
901 | * Feed items are referred to as cards,
902 | * as they're styled as grid cells opposed
903 | * to FreshRSS' table view.
904 | *
905 | ****************************************/
906 |
907 | /* Cards default state in feed */
908 | body:not(.reader) main#stream div.flux {
909 | display: flex;
910 | flex-direction: column;
911 | align-items: center;
912 | border-radius: 12px;
913 | margin-bottom: auto; /* Prevents card from becoming incredibly tall affected by other grid cells, e.g. #bigMarkAsRead. */
914 |
915 | /* Card hover effect */
916 | &:not(.active):hover {
917 | background-color: hsl(0deg 0% 0% / 6%);
918 | }
919 |
920 | &:not(.not_read),
921 | &.favorite:not(.current),
922 | &:not(.current):hover .item .title {
923 | background: unset;
924 | background-color: unset;
925 | }
926 |
927 | /* Card container */
928 | .flux_header {
929 | /* In card default state, the header is the card container itself, unlike in card expended view where it is used as a header/toolbar. */
930 | border-radius: 12px;
931 | display: flex;
932 | flex-direction: row;
933 | flex-wrap: wrap;
934 | height: 100%;
935 | max-width: 100%;
936 | padding: 8px;
937 | box-sizing: border-box;
938 | border: none;
939 | background: unset;
940 |
941 | &:hover,
942 | &:hover:not(.current):hover .item .title {
943 | /* Prevent background change on hover. */
944 | background-color: unset;
945 | background: unset;
946 | }
947 |
948 |
949 | &:before {
950 | // Decorative attr(data-article-authors) text on thumbnail placeholder, visible for feeds without images
951 | // Alternative: content: attr(data-website-name);
952 | content: attr(data-article-authors);
953 | position: absolute;
954 | top: 0;
955 | left: 0;
956 | z-index: 0;
957 | width: calc(100% - 24px);
958 | height: 0;
959 | padding-top: 16%;
960 | padding-bottom: calc(40.2% - 12px);
961 | padding-left: 20px;
962 | font-size: min(1.7rem,5vw);
963 | color: #fff;
964 | box-sizing: border-box;
965 | overflow: hidden;
966 | background: linear-gradient(to right, #5c8dff, #4cffdd);
967 | background-clip: border-box;
968 | background-clip: border-box;
969 | -webkit-background-clip: text;
970 | -webkit-text-fill-color: rgba(0,0,0,0);
971 | }
972 |
973 | .item.titleAuthorSummaryDate {
974 | display: flex;
975 | flex-direction: column;
976 | width: 100%;
977 | margin: 4px 0;
978 |
979 |
980 | @media (min-width: 600px) {
981 | & {
982 | /* Hack: On desktop, keep position consistent while allowing 100% vertical stretch of .flux and .flux-header */
983 | height: 105px;
984 | }
985 | }
986 |
987 |
988 | a.item-element.title.multiline {
989 | display: flex;
990 | flex-direction: column;
991 | padding: 0;
992 | position: static;
993 | padding-left: 2px;
994 | padding-right: 2px;
995 | min-width: unset;
996 | font-size: 1.2rem;
997 | white-space: normal;
998 | display: -webkit-box;
999 | -webkit-box-orient: vertical;
1000 | -webkit-line-clamp: 4;
1001 | line-clamp: 4;
1002 | overflow: hidden;
1003 |
1004 | .author {
1005 | padding: 0;
1006 | display: block;
1007 | margin-top: 4px;
1008 | font-size: 1rem;
1009 | line-height: 1.2;
1010 | color: hsla(0, 0%, 100%, 0.59);
1011 | }
1012 | }
1013 |
1014 | span.item-element.date {
1015 | padding: 0;
1016 | position: static;
1017 | text-align: left;
1018 | margin-top: 4px;
1019 | padding-left: 2px;
1020 | padding-right: 2px;
1021 | display: flex;
1022 | width: 100%;
1023 | font-size: 1rem;
1024 | }
1025 | }
1026 |
1027 | .item.thumbnail {
1028 | /* Card thumbnail */
1029 | position: relative;
1030 |
1031 | order: -1; /* Position thumbnail first within card, at the top */
1032 | width: 100%;
1033 | height: auto;
1034 | aspect-ratio: 16 / 9;
1035 | flex: 0 0 100%;
1036 | box-sizing: border-box;
1037 | margin-bottom: 4px;
1038 | padding: 0;
1039 | overflow: hidden;
1040 |
1041 | img {
1042 | position: relative;
1043 | width: 100%;
1044 | height: auto;
1045 | border-radius: 12px;
1046 | background: #303136;
1047 | aspect-ratio: 16 / 9;
1048 | object-fit: cover;
1049 | object-position: center;
1050 | z-index: 1;
1051 | }
1052 |
1053 | &:before {
1054 | // Placeholder for empty thumbnails
1055 | content: "";
1056 | width: 100%;
1057 | position: absolute;
1058 | top: 0;
1059 | left: 0;
1060 | padding-top: 56.25%;
1061 | background-color: #303136;
1062 | background-image: linear-gradient(45deg, #121417, #17253f);
1063 | border-radius: 12px;
1064 | z-index: 0;
1065 | }
1066 | }
1067 |
1068 | }
1069 |
1070 | }
1071 |
1072 | /* Card expanded state in feed */
1073 | body:not(.reader) main#stream div.flux.active.current {
1074 |
1075 | /* Card expanded header, serves as a top panel. */
1076 | .flux_header {
1077 | position: sticky;
1078 | top: -4px;
1079 | left: 0;
1080 | background-color: var(--frss-background-color, white);
1081 | z-index: 1;
1082 | padding: 12px;
1083 | margin-top: -4px;
1084 | border-bottom-left-radius: 2px;
1085 | border-bottom-right-radius: 2px;
1086 | pointer-events: none; /* Prevents card header clicks from closing the rss item. */
1087 |
1088 |
1089 | .item a,
1090 | .item .dropdown-close,
1091 | .item .dropdown-menu {
1092 | /* Reenable action buttons within card header */
1093 | pointer-events: all;
1094 | }
1095 |
1096 | .item .dropdown-menu {
1097 | z-index: 1100;
1098 |
1099 | li.item.share {
1100 | min-width: 100%;
1101 | margin: 0;
1102 | }
1103 | }
1104 |
1105 | .item.titleAuthorSummaryDate {
1106 | display: flex;
1107 | flex-direction: column;
1108 | flex-wrap: wrap;
1109 | order: -1;
1110 | min-width: unset;
1111 | flex: 0 0 100%;
1112 | margin-bottom: 6px;
1113 | z-index: 10;
1114 | height: auto;
1115 |
1116 |
1117 | /* Card title */
1118 | a {
1119 | /* Shorten width to prevent overlap with close button. */
1120 | max-width: calc(100% - 50px);
1121 | pointer-events: none;
1122 | }
1123 |
1124 | .item-element.date {
1125 | /* Hide date in theater mode to save vertical space */
1126 | display: none;
1127 | }
1128 | }
1129 |
1130 |
1131 | li.item.website {
1132 | /* Hide website icon in theater mode expanded view */
1133 | display: none;
1134 | }
1135 |
1136 | li.item.thumbnail {
1137 | /* Hide thumbnail in theater mode expanded view */
1138 | display: none;
1139 | }
1140 |
1141 | }
1142 |
1143 | /* Card content container */
1144 | article {
1145 | display: flex;
1146 | flex-direction: column;
1147 | background-color: hsl(0deg 0% 9%);
1148 | }
1149 | }
1150 |
1151 | /* Card icons and button behavior */
1152 | body:not(.reader) main#stream {
1153 | div.flux {
1154 |
1155 | li.item.share,
1156 | li.item.labels {
1157 | /**
1158 | * Specific adjustment due to these card buttons containing dropdown menu
1159 | * - Share button
1160 | * - Playlists button (labels)
1161 | */
1162 |
1163 | &:has(.dropdown-target:target) {
1164 | /* Temporarily elevate z-index to prevent other buttons to show on top of dropdown. */
1165 | z-index: 15;
1166 | }
1167 |
1168 | .item-element.dropdown {
1169 | display: flex;
1170 | width: 100%;
1171 | height: 100%;
1172 | padding: 0;
1173 |
1174 | a.dropdown-toggle {
1175 | /* Make button clickable across the entire button area, opposed to only the icon. */
1176 | width: 100%;
1177 | display: inline-flex;
1178 | margin: 0;
1179 | padding: 0;
1180 | height: 100%;
1181 | border-radius: 999px;
1182 | justify-content: center;
1183 | align-items: center;
1184 | gap: 4px;
1185 | }
1186 | }
1187 | }
1188 |
1189 | .flux_header {
1190 | .summary {
1191 | /* No support for summary */
1192 | display: none;
1193 | }
1194 |
1195 | li.item.manage a,
1196 | li.item.website.icon a,
1197 | li.item.link a,
1198 | li.item.labels a,
1199 | li.item.share > a {
1200 | display: flex;
1201 | align-items: center;
1202 | justify-content: center;
1203 | height: 100%;
1204 | box-sizing: border-box;
1205 | }
1206 |
1207 | li.item.website.full,
1208 | li.item.website.name {
1209 | /* For user's who set website setting to "icon and name" or "name" */
1210 | a {
1211 | color: white;
1212 | padding: 0;
1213 | }
1214 | }
1215 |
1216 | li.item.manage,
1217 | li.item.website.icon,
1218 | li.item.website.full,
1219 | li.item.link,
1220 | li.item.labels,
1221 | li.item.share {
1222 | flex: 1;
1223 | background-color: unset;
1224 | display: inline-flex;
1225 | height: auto;
1226 | justify-content: center;
1227 | border-radius: 999px;
1228 | margin: 0 2px;
1229 | padding: 0;
1230 | z-index: 10;
1231 | transition: background-color 0.1s;
1232 | order: 2;
1233 | min-height: 34px;
1234 |
1235 | li.item.share {
1236 | width: 100%;
1237 | }
1238 |
1239 | a {
1240 | padding: 4px 6px;
1241 | text-align: center;
1242 | width: 100%;
1243 | }
1244 |
1245 | &:nth-child(2) {
1246 | /* Place favorite button to the far left */
1247 | order: 1;
1248 | }
1249 |
1250 | &:hover {
1251 | background-color: hsla(0, 0%, 100%, 0.08)
1252 | }
1253 | }
1254 |
1255 |
1256 | li.item.labels {
1257 |
1258 | .dropdown-header {
1259 | display: flex;
1260 | font-size: 0;
1261 |
1262 | &:before {
1263 | content: "Playlists";
1264 | letter-spacing: 1px;
1265 | text-transform: uppercase;
1266 | font-size: 1rem;
1267 | }
1268 |
1269 | a[href="./?c=tag"] {
1270 | margin-left: 8px;
1271 | font-size: 1rem;
1272 | visibility: visible;
1273 | width: unset;
1274 | }
1275 | }
1276 |
1277 | .item-element.dropdown:not(:has(.dropdown-target:target)) {
1278 | /* Playlists button (labels) on card: Hide close button as it displays even after onblur. */
1279 | a.dropdown-close {
1280 | display: none;
1281 | }
1282 | }
1283 |
1284 | }
1285 |
1286 |
1287 | li.item.manage:hover,
1288 | li.item.website.icon:hover,
1289 | li.item.link:hover,
1290 | li.item.labels:hover,
1291 | li.item.share:hover {
1292 | background-color: hsla(0, 0%, 100%, 0.08)
1293 | }
1294 |
1295 | &:not(.active) {
1296 | li.item.manage a,
1297 | li.item.website.icon a,
1298 | li.item.link a,
1299 | li.item.labels a,
1300 | li.item.share a {
1301 | /* Hide card actions by default */
1302 | visibility: hidden;
1303 | background-color: unset;
1304 | }
1305 |
1306 | &:hover {
1307 | /* Display card actions on hover */
1308 | li.item.manage a,
1309 | li.item.website.icon a,
1310 | li.item.link a,
1311 | li.item.labels a,
1312 | li.item.share a {
1313 | visibility: visible;
1314 | }
1315 | }
1316 |
1317 | @media (max-width: 600px) {
1318 | /* Always display card actions on mobile */
1319 | li.item.manage a,
1320 | li.item.website.icon a,
1321 | li.item.link a,
1322 | li.item.labels a,
1323 | li.item.share a {
1324 | visibility: visible !important;
1325 | }
1326 | }
1327 | }
1328 |
1329 | .website a:hover .favicon,
1330 | a.website:hover .favicon {
1331 | /* Disable greyscale effect on website icon hover */
1332 | filter: unset;
1333 | }
1334 |
1335 | li.item.share {
1336 | order: 3;
1337 | }
1338 | }
1339 |
1340 | &.active.current .flux_header {
1341 | li.item.manage a,
1342 | li.item.website.icon a,
1343 | li.item.link a,
1344 | li.item.labels a,
1345 | li.item.share a {
1346 | visibility: visible;
1347 | }
1348 | }
1349 |
1350 | /* Favorites (bookmark) button */
1351 | &.favorite {
1352 | .flux_header li.item.manage a.bookmark {
1353 | visibility: visible;
1354 | filter: brightness(1.5) sepia(1) hue-rotate(-25deg) saturate(4) contrast(1.2);
1355 | }
1356 |
1357 | .flux_header li.item.manage:nth-child(2) {
1358 | background-color: hsl(33.65deg 100% 54.9% / 13%);
1359 |
1360 | &:hover {
1361 | background-color: hsl(33.65deg 100% 54.9% / 20%);
1362 | }
1363 | }
1364 | }
1365 |
1366 | /* Favicon as avatar */
1367 | .flux_header {
1368 | position: relative;
1369 |
1370 | li.item.website.icon,
1371 | li.item.website.full {
1372 | /* If user set "Website: Icon" in Display settings */
1373 | display: flex;
1374 | width: 100%;
1375 | flex: 0 0 100%;
1376 | max-width: unset;
1377 | flex-direction: column;
1378 | position: absolute;
1379 | top: 0;
1380 | left: 0;
1381 | justify-content: flex-start;
1382 | border-radius: 0;
1383 | pointer-events: none;
1384 |
1385 | .websiteName {
1386 | /* No support for favicon website name. Instead, use display setting "Article icons: Author" */
1387 | display: none;
1388 | }
1389 |
1390 | & ~ .item.titleAuthorSummaryDate {
1391 | /* If website favicon exist, add padding to make space for it. */
1392 | padding-left: calc(var(--favicon-avatar-size) + var(--favicon-avatar-size-margin));
1393 | }
1394 |
1395 | &:hover {
1396 | background-color: unset;
1397 | }
1398 |
1399 | &:before {
1400 | /* Position favicon responsively. knowing that the thumbnail will always be 16:9 */
1401 | content: "";
1402 | width: 100%;
1403 | height: auto;
1404 | aspect-ratio: 16 / 9;
1405 | z-index: -1;
1406 | position: relative;
1407 | visibility: hidden;
1408 | pointer-events: none;
1409 | }
1410 |
1411 | a.item-element {
1412 | display: flex;
1413 | width: calc(var(--favicon-avatar-size) + var(--favicon-avatar-size-margin));
1414 | visibility: visible;
1415 | pointer-events: all;
1416 | box-sizing: unset;
1417 | }
1418 |
1419 | img.favicon {
1420 | height: var(--favicon-avatar-size);
1421 | width: var(--favicon-avatar-size);
1422 | background-color: hsl(0deg 0% 100% / 18%);
1423 | padding: 8px;
1424 | box-sizing: border-box;
1425 | border-radius: 50%;
1426 | margin-top: 2px;
1427 | }
1428 |
1429 | }
1430 | }
1431 |
1432 | /* Change card footer from "My labels" to "+ Add to playlist" */
1433 | &.active.current article.flux_content {
1434 | footer ul.horizontal-list.bottom .item.labels .item-element.dropdown a[href^="#dropdown-labels-"] {
1435 | font-size: 0;
1436 | white-space: nowrap;
1437 | color: white;
1438 |
1439 | &:before {
1440 | content: "+ Add to playlist";
1441 | font-weight: bold;
1442 | font-size: 14px;
1443 | }
1444 |
1445 | & + .dropdown-menu .dropdown-header {
1446 | font-size: 0;
1447 |
1448 | &:before {
1449 | content: "Playlists";
1450 | letter-spacing: 1px;
1451 | text-transform: uppercase;
1452 | font-size: 1rem;
1453 | }
1454 |
1455 | a[href="./?c=tag"] {
1456 | margin-left: 8px;
1457 | font-size: 1rem;
1458 | }
1459 | }
1460 |
1461 | .icon {
1462 | display: none;
1463 | }
1464 | }
1465 |
1466 | .content .text {
1467 | overflow-x: hidden;
1468 | }
1469 |
1470 | }
1471 | }
1472 | }
1473 |
1474 | /*****************************************
1475 | * END "CARD"
1476 | ****************************************/
1477 |
1478 |
1479 |
1480 |
1481 |
1482 |
1483 | /*****************************************
1484 | *
1485 | * BEGIN "MAPCO THEME DARK MODE"
1486 | *
1487 | * Applies dark mode to the "Mapco" theme.
1488 | * Content within `` is usually
1489 | * light mode; this styling switches it to
1490 | * dark mode, along with the left side
1491 | * navigation.
1492 | *
1493 | ****************************************/
1494 |
1495 |
1496 | /* ====================================
1497 | * BEGIN "Dark mode: Global styles"
1498 | * ==================================== */
1499 |
1500 | html {
1501 | /* Note: Wrapping in an `html` selector is for IDE toggling only; it has no impact on the actual styles. */
1502 |
1503 | /* Global background and text color */
1504 | body,
1505 | #slider,
1506 | .aside.aside_feed,
1507 | .nav.nav-list.aside,
1508 | .nav.nav-list.aside ul,
1509 | .nav-list .item,
1510 | .tree .tree-folder .tree-folder-title {
1511 | background-color: #0f0f0f;
1512 | --frss-font-color-dark: white;
1513 | color: white;
1514 | }
1515 |
1516 | /* Text and link colors */
1517 | label,
1518 | .content h1.title a,
1519 | .content h1 a,
1520 | .content.thin h1.title a,
1521 | .content.thin h1 a,
1522 | .flux .website a,
1523 | .day,
1524 | .day .name,
1525 | .post h1,
1526 | .post h2,
1527 | .dropdown-menu .item > a,
1528 | .dropdown-menu .item > span,
1529 | .dropdown-menu .item > .as-link,
1530 | .dropdown-menu .dropdown-header,
1531 | .dropdown-menu .dropdown-section .dropdown-section-title,
1532 | .tree .tree-folder .tree-folder-items .dropdown-menu .item a,
1533 | .tree .tree-folder .tree-folder-items .dropdown-menu .item button {
1534 | --frss-font-color-dark: white;
1535 | color: white;
1536 | }
1537 |
1538 | article .content figure figcaption {
1539 | font-style: normal;
1540 | }
1541 |
1542 | /* Input, button, and focus */
1543 | input,
1544 | select,
1545 | textarea,
1546 | button,
1547 | .btn,
1548 | kbd,
1549 | input:focus,
1550 | select:focus,
1551 | textarea:focus,
1552 | .nav_menu,
1553 | .pagination .item,
1554 | .nav_menu .btn {
1555 | background-color: #303136;
1556 | border-color: #303136;
1557 | border-top-color: #303136;
1558 | color: white;
1559 |
1560 | & .stick .btn,
1561 | & .group .btn,
1562 | & .stick .btn.read_all,
1563 | & .group .btn.read_all,
1564 | & .btn + .btn:not(.btn-important),
1565 | & .btn + input,
1566 | & .btn + .dropdown > .btn,
1567 | & input + .btn,
1568 | & input + input,
1569 | & input + .dropdown > .btn,
1570 | & .dropdown + .btn,
1571 | & .dropdown + input,
1572 | & .dropdown + .dropdown > .btn {
1573 | background-color: #303136;
1574 | border-color: #303136;
1575 | border-top-color: #303136;
1576 | color: white;
1577 | }
1578 |
1579 | .icon {
1580 | filter: brightness(1.6);
1581 | }
1582 | }
1583 |
1584 |
1585 | /* Button hover */
1586 | .btn:hover,
1587 | .nav_menu .stick .btn:not(.active):hover,
1588 | .nav_menu .group .btn:not(.active):hover,
1589 | .nav_menu .stick .btn.read_all:hover,
1590 | .nav_menu .group .btn.read_all:hover,
1591 | .pagination .item:hover,
1592 | .nav_menu .btn:hover,
1593 | .nav-list .item a:hover {
1594 | background-color: #424348;
1595 | }
1596 |
1597 | .nav_menu {
1598 | background-color: unset;
1599 | border-color: unset;
1600 |
1601 | .stick .btn.active,
1602 | .group .btn.active {
1603 | background-color: #36c;
1604 |
1605 | .icon {
1606 | filter: brightness(3);
1607 | }
1608 | }
1609 | }
1610 |
1611 | /* Kbd Styles */
1612 | kbd a {
1613 | filter: brightness(1.6) saturate(0.8);
1614 | }
1615 |
1616 | /* Disabled input */
1617 | input:disabled,
1618 | select:disabled {
1619 | background-color: #303136;
1620 | border-color: #303136;
1621 | border-style: solid;
1622 | background-image: repeating-linear-gradient(
1623 | 45deg,
1624 | #303136,
1625 | #303136 10px,
1626 | #424348 10px,
1627 | #424348 20px
1628 | );
1629 | }
1630 |
1631 |
1632 | table th {
1633 | background: hsl(0deg 0% 100% / 12%);
1634 | }
1635 | }
1636 |
1637 | /* ====================================
1638 | * END "Dark mode: Global styles"
1639 | * ==================================== */
1640 |
1641 |
1642 |
1643 |
1644 |
1645 | /* ====================================
1646 | * BEGIN "Dark mode: Dropdown, dialog, box"
1647 | * ==================================== */
1648 |
1649 | @media (max-width: 840px) {
1650 | /* Mobile dropdown, with media query increase selector specificity */
1651 | .dropdown-target:target ~ .dropdown-toggle::after {
1652 | /* Mobile dropdown triangle */
1653 | background-color: #303136;
1654 | border-color: #303136;
1655 | }
1656 |
1657 | body:not(.reader) main#stream div.flux li.item.share,
1658 | body:not(.reader) main#stream div.flux li.item.labels,
1659 | .nav_menu #mark-read-menu,
1660 | .nav_menu #nav_menu_actions {
1661 | /**
1662 | * Turn dropdowns into bottom sheets on mobile
1663 | * - Share button
1664 | * - Playlists button (labels)
1665 | * - Mark read butto group within feed nav menu
1666 | * - Feed actions button group within feed nav menu
1667 | */
1668 |
1669 | .dropdown-toggle:after {
1670 | /* Hide dropdown triangle on mobile */
1671 | display: none;
1672 | }
1673 |
1674 | li.item,
1675 | li.item button {
1676 | margin: 0;
1677 | font-size: 1.4rem;
1678 |
1679 | label {
1680 | padding: 10px;
1681 | text-indent: 0;
1682 | }
1683 |
1684 | input[type="checkbox"] {
1685 | width: 1.4rem !important;
1686 | height: 1.4rem !important;
1687 | margin-right: 1rem;
1688 | }
1689 | }
1690 |
1691 | .dropdown-menu {
1692 | /* Card dropdown menu on mobile */
1693 | position: fixed;
1694 | bottom: 0;
1695 | height: calc(100vh - 50%);
1696 | left: 0 !important;
1697 | right: 0 !important;
1698 | border-bottom-left-radius: 0;
1699 | border-bottom-right-radius: 0;
1700 | overflow: auto;
1701 | animation: slideUp 0.15s ease-in-out forwards; // Animate bottom sheet from bottom to up
1702 |
1703 | & > ul {
1704 | overflow: auto;
1705 |
1706 | .item.addItem {
1707 | /* Sticky "add new" playlist (label) */
1708 | position: sticky;
1709 | top: 0;
1710 | margin-right: 0;
1711 | padding-right: 0;
1712 | width: unset;
1713 | background-color: #303136;
1714 | }
1715 |
1716 | }
1717 |
1718 | p.help {
1719 | display: flex;
1720 | flex-wrap: wrap;
1721 | word-break: break-all;
1722 | line-height: 1.4;
1723 | justify-content: center;
1724 |
1725 | .btn {
1726 | background-color: #424348;
1727 | }
1728 |
1729 | .icon {
1730 | display: none;
1731 | }
1732 | }
1733 | }
1734 | }
1735 |
1736 |
1737 | .dropdown .dropdown-menu,
1738 | .dropdown-target:target ~ .dropdown-menu {
1739 | border-radius: 12px;
1740 | }
1741 |
1742 | #dropdown-configure ~ .dropdown-menu {
1743 | border-radius: unset;
1744 |
1745 | .toggle_aside {
1746 | border: none;
1747 | }
1748 | }
1749 |
1750 | #overlay a.close {
1751 | border: none;
1752 | }
1753 |
1754 |
1755 | .extension_smartmenu ul {
1756 | list-style-position: inside;
1757 | list-style-type: none;
1758 | }
1759 |
1760 | #nav_menu_views_dropdown ul.dropdown-menu,
1761 | #nav_menu_actions_dropdown ul.dropdown-menu {
1762 | .item a {
1763 | width: 100%;
1764 | }
1765 | }
1766 | }
1767 |
1768 | .dropdown {
1769 | position: relative;
1770 | }
1771 |
1772 | .tree .tree-folder .tree-folder-items .item.active .dropdown li a,
1773 | .dropdown .dropdown-menu .item a {
1774 | color: white;
1775 | }
1776 |
1777 | .dropdown-menu,
1778 | .box {
1779 | background-color: #303136;
1780 | color: white;
1781 | border-radius: 12px;
1782 |
1783 | li.item {
1784 | &:hover {
1785 | background-color: hsla(0,0%,100%,.06);
1786 | }
1787 | }
1788 |
1789 | .box-content .item {
1790 | background-color: #303136;
1791 | }
1792 |
1793 | .box-content .item,
1794 | .box-content .item a {
1795 | background-color: #303136;
1796 | color: white;
1797 | }
1798 |
1799 | .item.dropdown-section ~ .dropdown-section,
1800 | .item.separator {
1801 | border-top-color: #646464;
1802 | border-bottom-color: #646464;
1803 | border-color: #646464;
1804 | }
1805 | }
1806 |
1807 | .box .box-title {
1808 | background-color: #424348;
1809 | color: white;
1810 |
1811 | .configure {
1812 | border-radius: 8px;
1813 | }
1814 | }
1815 |
1816 | .box .box-content {
1817 | .configure {
1818 | border-radius: 8px;
1819 | }
1820 | }
1821 |
1822 |
1823 | main#stream .box.category {
1824 | .box-content {
1825 | padding: 1rem;
1826 |
1827 | li.item.feed {
1828 | border: none;
1829 |
1830 | a,
1831 | a:hover {
1832 | color: white;
1833 | }
1834 | }
1835 | }
1836 |
1837 | .box-title a.title,
1838 | .box-title a.title:hover {
1839 | color: white;
1840 |
1841 | &:not([data-unread="0"]):after {
1842 | background-color: rgba(137, 137, 137, 0.4392156863);
1843 | }
1844 | }
1845 | }
1846 |
1847 |
1848 | .box .box-title .icon,
1849 | .manage-list .icon,
1850 | .dropdown-header .icon,
1851 | .tree-folder-items .dropdown-toggle .icon,
1852 | .tree-folder-items .item.feed .dropdown-toggle .icon {
1853 | filter: brightness(2);
1854 | }
1855 |
1856 | .dropdown-menu input,
1857 | .dropdown-menu .btn,
1858 | .stick input + .btn {
1859 | background-color: #424348;
1860 | border-color: #424348;
1861 | }
1862 |
1863 |
1864 |
1865 | main.post {
1866 | /* Subscription management page boxes */
1867 | .box {
1868 | border-radius: 12px;
1869 | overflow: hidden;
1870 |
1871 | ul {
1872 | list-style-position: inside;
1873 | }
1874 |
1875 | .box-title {
1876 | padding: 1rem;
1877 | }
1878 |
1879 | .box-content {
1880 | padding: 1rem;
1881 |
1882 | .item,
1883 | .item.feed {
1884 | border: none;
1885 | }
1886 | }
1887 |
1888 | }
1889 | }
1890 |
1891 |
1892 |
1893 | #global #overlay {
1894 |
1895 | #panel {
1896 | background: #0f0f0f;
1897 |
1898 | .flux.not_read:not(.current) {
1899 | background: #0f0f0f;
1900 |
1901 | a {
1902 | color: white;
1903 | }
1904 | }
1905 |
1906 | .flux .flux_header {
1907 | border-color: #6464646b;
1908 | padding: 1rem;
1909 | box-sizing: border-box;
1910 |
1911 | &:hover {
1912 | background: #252525;
1913 | }
1914 | }
1915 |
1916 | .flux .flux_header:hover:not(.current):hover .item .title {
1917 | background: unset;
1918 | }
1919 | }
1920 | }
1921 |
1922 |
1923 |
1924 |
1925 | /* ====================================
1926 | * END "Dark mode: Dropdown, dialog, box"
1927 | * ==================================== */
1928 |
1929 |
1930 |
1931 |
1932 |
1933 | /* ====================================
1934 | * BEGIN "Dark mode: Feed side navigation"
1935 | * ==================================== */
1936 |
1937 | .tree {
1938 | .tree-folder {
1939 | border: none;
1940 | margin: 0 8px;
1941 |
1942 | .tree-folder-title {
1943 | display: flex;
1944 | align-items: center;
1945 | padding: 1rem;
1946 | border-radius: 8px;
1947 | text-transform: unset;
1948 | font-size: 1rem;
1949 | font-weight: normal;
1950 |
1951 | &:hover {
1952 | text-decoration: none;
1953 | background-color: #303136; // Hover effect
1954 | }
1955 |
1956 | img.icon {
1957 | width: 20px;
1958 | height: 20px;
1959 | margin-right: 2rem;
1960 | filter: brightness(3) !important; /* Prevent chevron icon from having its filter removed on hover */
1961 | }
1962 |
1963 | button.dropdown-toggle {
1964 | margin-right: 0;
1965 |
1966 | img.icon {
1967 | /* Resize chevron icon utilizing padding, to keep global sidebar icon size untouched. */
1968 | padding: 2px;
1969 | box-sizing: border-box;
1970 |
1971 | &[src*="down.svg"] {
1972 | /* Rotate chevron to point right when collapsed */
1973 | transform: rotate(270deg);
1974 | }
1975 |
1976 | &[src*="up.svg"] {
1977 | /* Rotate chevron to point down when expanded */
1978 | transform: rotate(180deg);
1979 | }
1980 | }
1981 | }
1982 | }
1983 |
1984 | &.active .tree-folder-title {
1985 | background-color: #303136; // Active state
1986 | }
1987 |
1988 |
1989 | ul.tree-folder-items {
1990 | background-color: unset;
1991 |
1992 | li.item {
1993 | border-radius: 6px;
1994 | background-color: unset;
1995 | display: list-item !important; /* Always display all labels on side navigation expand */
1996 |
1997 | &:hover {
1998 | background-color: #303136;
1999 | }
2000 |
2001 | a.dropdown-toggle {
2002 | width: 20px;
2003 | padding-right: 10px;
2004 | padding-left: 15px;
2005 | }
2006 |
2007 | a.item-title {
2008 | padding-left: 15px;
2009 | width: calc(100% - 70px);
2010 |
2011 | &:not(.active) {
2012 | padding-left: 62px;
2013 | }
2014 |
2015 | img.favicon {
2016 | width: 18px;
2017 | height: 18px;
2018 | margin-right: 8px;
2019 | }
2020 |
2021 | &:has(img.favicon) {
2022 | padding-left: 15px;
2023 | }
2024 |
2025 | &:not([data-unread="0"]) {
2026 | width: calc(100% - 110px);
2027 | font-size: 1rem;
2028 | font-weight: normal;
2029 | letter-spacing: 0.5px;
2030 | }
2031 |
2032 | }
2033 |
2034 | &.active {
2035 | background-color: #303136;
2036 | }
2037 |
2038 | &.active a:after {
2039 | border: none;
2040 | }
2041 | }
2042 | }
2043 | }
2044 |
2045 | li.tree-folder.category {
2046 | &.tags {
2047 | .item.feed a.item-title {
2048 |
2049 | @media (min-width: 840px) {
2050 | &:not(.active) {
2051 | padding-left: 15px;
2052 | }
2053 | }
2054 | }
2055 | }
2056 | }
2057 | }
2058 |
2059 |
2060 | .flux {
2061 | .flux_header {
2062 | .date {
2063 | color: hsl(0deg 0% 100% / 59%);
2064 | }
2065 | }
2066 |
2067 | .flux_content {
2068 | .bottom {
2069 | .date {
2070 | color: hsl(0deg 0% 100% / 59%);
2071 | }
2072 | }
2073 | }
2074 |
2075 | &.not_read {
2076 | .item {
2077 | .date {
2078 | color: hsl(0deg 0% 100% / 59%);
2079 | }
2080 | }
2081 | }
2082 | }
2083 |
2084 | .aside.aside_feed {
2085 |
2086 | @media (min-width: 840px) {
2087 | /* Desktop, add padding-top on feed sidenav */
2088 | padding-top: 2rem;
2089 |
2090 | & > * {
2091 | /* On desktop, prevent side navigation to stretch when main content isn't loaded, caused by the layout relying on "display: table" */
2092 | max-width: 300px;
2093 | }
2094 | }
2095 |
2096 |
2097 | a.toggle_aside {
2098 | border: none;
2099 | }
2100 |
2101 |
2102 | .category .title:not([data-unread="0"])::after {
2103 | top: 50%;
2104 | transform: translateY(-50%);
2105 | margin: 0;
2106 | background-color: #89898970;
2107 | font-weight: bold;
2108 | }
2109 | }
2110 |
2111 | .tree#sidebar {
2112 | padding-top: 0;
2113 | margin-top: 0;
2114 | }
2115 |
2116 | /**
2117 | * Highlight only current page in the side navigation, remove highlight from folder if item is active:
2118 | * - Playlists ("My labels")
2119 | * - User's category
2120 | */
2121 | #tags:has(> ul.tree-folder-items.active .item.feed.active) > .tree-folder-title,
2122 | [id^="c_"].tree-folder.category.active:has(> ul.tree-folder-items.active .item.feed.active) > .tree-folder-title {
2123 | background-color: unset;
2124 | }
2125 |
2126 |
2127 | /* ====================================
2128 | * END "Dark mode: Side navigation"
2129 | * ==================================== */
2130 |
2131 |
2132 |
2133 |
2134 |
2135 | /* ====================================
2136 | * BEGIN "Dark mode: Settings side navigation"
2137 | * ==================================== */
2138 |
2139 | /* Settings page side nav */
2140 | body:not(.normal) {
2141 | .nav.nav-list.aside {
2142 | padding-top: 2rem;
2143 |
2144 | .item.nav-section {
2145 |
2146 | li.item {
2147 | margin: 0 8px;
2148 | border-radius: 12px;
2149 | min-height: 1rem;
2150 | line-height: 1;
2151 |
2152 | &.active,
2153 | &.active a {
2154 | background: #303136;
2155 | background-color: #303136;
2156 | }
2157 |
2158 | &:hover,
2159 | &:hover a {
2160 | background: #303136;
2161 | background-color: #303136;
2162 | }
2163 | }
2164 |
2165 | li.item a {
2166 | padding: 16px;
2167 | line-height: 1;
2168 | font-size: 1.2rem;
2169 | }
2170 |
2171 | }
2172 |
2173 | }
2174 | }
2175 |
2176 |
2177 | /* Settings page back button */
2178 | .post a[href="./"] {
2179 | background-color: #303136;
2180 | border-color: #303136;
2181 | color: white;
2182 | }
2183 |
2184 | /* ====================================
2185 | * END "Dark mode: Settings side navigation"
2186 | * ==================================== */
2187 |
2188 |
2189 |
2190 |
2191 |
2192 |
2193 | /* ====================================
2194 | * BEGIN "Dark mode: Card"
2195 | * ==================================== */
2196 |
2197 | body:not(.reader) main#stream {
2198 | div.flux {
2199 | &.not_read {
2200 | position: relative;
2201 | background-color: unset;
2202 |
2203 | &:after {
2204 | content: "New";
2205 | position: absolute;
2206 | top: 18px;
2207 | left: 18px;
2208 | padding: 2px 6px;
2209 | background-color: rgb(255, 0, 0, 0.76);
2210 | box-shadow: 0 2px 8px 3px hsl(0deg 0% 0% / 13%);
2211 | border-radius: 6px;
2212 | font-weight: bold;
2213 | pointer-events: none;
2214 | }
2215 | }
2216 |
2217 | &:not(.active):hover {
2218 | /* Card hover effect/background */
2219 | background-color: hsl(0deg 0% 100% / 6%);
2220 | }
2221 |
2222 | @media (max-width: 600px) {
2223 | &:not(.active),
2224 | &:not(.active).favorite:not(.current) {
2225 | /* Mobile, always display hover effect/background */
2226 | background-color: hsl(0deg 0% 100% / 6%);
2227 | }
2228 | }
2229 |
2230 |
2231 | &.active.current .flux_header {
2232 | background-color: hsl(0deg 2.56% 15.29%); // Card opened state
2233 | }
2234 |
2235 | .flux_header {
2236 | li.item.manage,
2237 | li.item.website.icon,
2238 | li.item.link,
2239 | li.item.labels,
2240 | li.item.share {
2241 | background-color: unset;
2242 | }
2243 | }
2244 | }
2245 |
2246 | div.flux:not(.favorite) .flux_header li.item.manage .item-element.bookmark img,
2247 | div.flux:not(.not_read) .flux_header li.item.manage .item-element.read img,
2248 | div.flux .flux_header li.item.link img,
2249 | div.flux .flux_header li.item.labels img,
2250 | div.flux .flux_header li.item.share img
2251 | {
2252 | filter: brightness(1.6);
2253 | }
2254 |
2255 | div.flux.not_read .flux_header li.item.manage .item-element.read img {
2256 | filter: grayscale(1) brightness(1.4);
2257 | }
2258 |
2259 | }
2260 |
2261 |
2262 | main#stream,
2263 | #overlay #panel {
2264 | button#bigMarkAsRead {
2265 | background: #303136;
2266 | color: #ffffffa3;
2267 | margin-bottom: 0;
2268 |
2269 | .bigTick {
2270 | filter: brightness(5);
2271 | opacity: 0.6;
2272 | }
2273 |
2274 | &:hover {
2275 | background: #424348;
2276 | color: #ffffff;
2277 |
2278 | .bigTick {
2279 | filter: brightness(5);
2280 | opacity: 1;
2281 | }
2282 | }
2283 | }
2284 | }
2285 |
2286 |
2287 | #new-article {
2288 | /* Feed updated notification banner */
2289 | grid-column: 1 / -1;
2290 | border-radius: 8px;
2291 | margin: 1rem 4px;
2292 | overflow: hidden;
2293 | }
2294 |
2295 | /* ====================================
2296 | * END "Dark mode: Card"
2297 | * ==================================== */
2298 |
2299 |
2300 | /*****************************************
2301 | * END "MAPCO THEME DARK MODE"
2302 | ****************************************/
2303 |
2304 |
2305 |
2306 |
2307 |
2308 |
2309 |
2310 | /*****************************************
2311 | *
2312 | * BEGIN "CARD EXPANDED - INLINE VIEW MODE"
2313 | *
2314 | * Expand cards inline without covering
2315 | * the entire screen. Used as a fallback
2316 | * when "Theater mode" is removed.
2317 | *
2318 | ****************************************/
2319 |
2320 | main#stream div.flux.active.current {
2321 | /* Card content on expanded inline view */
2322 | grid-column: 1 / -1;
2323 | max-height: calc(100vh - 275px);
2324 | overflow: auto;
2325 |
2326 | @media (max-height: 900px) {
2327 | /* When viewport height is small, card expands to full height on inline view. */
2328 | height: 100vh;
2329 | max-height: 100vh;
2330 | }
2331 |
2332 | @media (max-width: 840px) {
2333 | /* Card expands to full height on mobile by default for inline view */
2334 | height: 100vh;
2335 | max-height: 100vh;
2336 | }
2337 | }
2338 |
2339 | /*****************************************
2340 | * END "CARD EXPANDED - INLINE VIEW MODE"
2341 | ****************************************/
2342 |
2343 |
2344 |
2345 |
2346 |
2347 |
2348 |
2349 |
2350 |
2351 | /*****************************************
2352 | *
2353 | * BEGIN "FAVORITES PAGE"
2354 | *
2355 | * Applies dark mode to the "Mapco" theme.
2356 | * Content within `` is usually
2357 | * light mode; this styling switches it to
2358 | * dark mode, along with the left side
2359 | * navigation.
2360 | *
2361 | ****************************************/
2362 |
2363 | body:has(.tree-folder.category.favorites.active) {
2364 | main#stream div.flux.favorite:not(.active) {
2365 | .flux_header {
2366 | li.item.manage:nth-child(2) {
2367 | /* In "Favorites", do not use special highlight effect. */
2368 | background-color: inherit;
2369 |
2370 | /* In "Favorites", use regular special hover color. */
2371 | &:hover {
2372 | background-color: hsl(0deg 0% 100% / 8%);
2373 | }
2374 | }
2375 | }
2376 | .flux_header:not(:hover) {
2377 | li.item.manage:nth-child(2) {
2378 | /* In "Favorites", do not constantly highlight favorites button. */
2379 | visibility: hidden;
2380 | }
2381 |
2382 | a.bookmark {
2383 | /* In "Favorites", hide by favorites icon by default; behave like other icons. */
2384 | visibility: hidden;
2385 | }
2386 | }
2387 | }
2388 | }
2389 |
2390 | /*****************************************
2391 | * END "FAVORITES PAGE"
2392 | ****************************************/
2393 |
2394 |
2395 |
2396 |
2397 |
2398 |
2399 |
2400 | /*****************************************
2401 | *
2402 | * BEGIN "READER VIEW PAGE"
2403 | *
2404 | ****************************************/
2405 |
2406 |
2407 | #stream.reader .flux {
2408 | border-bottom: 1px solid #646464;
2409 |
2410 | &,
2411 | .content{
2412 | background: #0f0f0f;
2413 | }
2414 |
2415 | &,
2416 | .text {
2417 | color: white;
2418 | }
2419 |
2420 | .go_website {
2421 | font-family: Arial, Helvetica, sans-serif;
2422 | }
2423 |
2424 | .flux_content {
2425 | background: #0f0f0f;
2426 | }
2427 | }
2428 |
2429 | /*****************************************
2430 | * END "READER VIEW PAGE"
2431 | ****************************************/
2432 |
2433 |
2434 |
2435 |
2436 |
2437 | /*****************************************
2438 | *
2439 | * BEGIN "
2440 | * - YOULAG THEATER VIEW MODAL"
2441 | *
2442 | ****************************************/
2443 |
2444 | @keyframes slideUp {
2445 | from {
2446 | transform: translateY(100%);
2447 | }
2448 | to {
2449 | transform: translateY(0%);
2450 | }
2451 | }
2452 |
2453 | /*****************************************
2454 | * END "ANIMATION KEYFRAMES"
2455 | ****************************************/
2456 |
2457 |
2458 |
2459 |
2460 | /*****************************************
2461 | *
2462 | * BEGIN "YOULAG THEATER VIEW MODAL"
2463 | *
2464 | * 2025-02-22: Big refactor to move away
2465 | * from relying on CSS to display theater
2466 | * mode. Instead, use the script to handle
2467 | * the view and functionality.
2468 | *
2469 | ****************************************/
2470 | body:has(#global main#stream):before {
2471 | // Loading spinner, before the youlag script has fully loaded. Only on feed stream pages.
2472 | content: "Loading Youlag features";
2473 | position: fixed;
2474 | top: 89px;
2475 | right: 39px;
2476 | width: 280px;
2477 | height: 82px;
2478 | 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");
2479 | background-repeat: no-repeat;
2480 | filter: invert(1);
2481 | background-position: 20px;
2482 | background-size: 32px;
2483 | background-color: #ffffffd4;
2484 | opacity: 0.8;
2485 | z-index: 9999;
2486 | transition: opacity 0.2s;
2487 | color: black;
2488 | display: flex;
2489 | justify-content: flex-start;
2490 | align-items: center;
2491 | padding-left: 68px;
2492 | box-sizing: border-box;
2493 | font-family: arial;
2494 | font-size: var(--yl-text-sm);
2495 | white-space: pre;
2496 | pointer-events: none;
2497 | border-radius: 12px;
2498 | }
2499 |
2500 | body.youlag-loaded:before {
2501 | display: none !important;
2502 | }
2503 |
2504 | main#stream > .flux {
2505 | cursor: pointer;
2506 | }
2507 |
2508 | #youlagTheaterModal {
2509 | position: fixed;
2510 | z-index: 99999;
2511 | top: 0px;
2512 | left: 0px;
2513 | height: 100vh;
2514 | width: 100vw;
2515 | background: #060606;
2516 | overflow-y: auto;
2517 | overflow-x: hidden;
2518 | box-sizing: border-box;
2519 | // For browsers with subpixel rendering issues, hide background content peeking through.
2520 | box-shadow: 0 0 0 10px #060606;
2521 |
2522 | &.youlag-modal-feed-item--text {
2523 | // For feed items that are not video feeds.
2524 | .youlag-iframe-container {
2525 | display: none;
2526 | }
2527 |
2528 | .youlag-video-container {
2529 | // For text feeds, the thumbnail is displayed in the video area instead.
2530 | max-height: 50vh;
2531 |
2532 | .youlag-thumbnail-container {
2533 | animation: none !important;
2534 | width: 100% !important;
2535 | height: auto !important;
2536 | padding-bottom: 0 !important;
2537 |
2538 | .youlag-video-thumbnail {
2539 | position: static !important;
2540 | transform: none !important;
2541 | }
2542 | }
2543 | }
2544 |
2545 |
2546 |
2547 | .youlag-video-description-content {
2548 | margin: 0 auto;
2549 |
2550 | a {
2551 | color: #fff;
2552 | box-shadow: #fff 0 -1px 0 inset;
2553 | }
2554 |
2555 | ul {
2556 | list-style-position: inside;
2557 | }
2558 |
2559 | img {
2560 | border-radius: 8px;
2561 | }
2562 |
2563 | pre {
2564 | overflow: auto;
2565 | background-color: #ffffff1c;
2566 | border-radius: 8px;
2567 | padding: 1rem;
2568 | }
2569 | }
2570 | }
2571 | }
2572 |
2573 | .youlag-theater-modal-container {
2574 | width: 100%;
2575 | }
2576 |
2577 | .youlag-theater-modal-content {
2578 | width: 100%;
2579 | }
2580 |
2581 | .youlag-video-header {
2582 | position: sticky;
2583 | top: 0;
2584 | left: 0;
2585 | z-index: 1;
2586 | display: flex;
2587 | justify-content: flex-end;
2588 | padding: var(--yl-p-xs);
2589 | }
2590 |
2591 | .youlag-video-container {
2592 | position: relative;
2593 | max-height: 80vh;
2594 | overflow: hidden;
2595 |
2596 | .youlag-iframe-container {
2597 | position: absolute;
2598 | top: 0;
2599 | left: 0;
2600 | width: 100%;
2601 |
2602 | .youlag-iframe {
2603 | width: 100%;
2604 | height: auto;
2605 | max-height: 80vh;
2606 | aspect-ratio: 16 / 9;
2607 | overflow: hidden;
2608 | }
2609 | }
2610 |
2611 | .youlag-thumbnail-container {
2612 | width: 100%;
2613 | height: 0;
2614 | // Use this method of setting 16:9 aspect ratio, due to a subpixel peaking below the iframe that sits on top.
2615 | padding-bottom: calc(56.25% - 1px);
2616 | position: relative;
2617 | overflow: hidden;
2618 | animation: pulse 4s infinite ease-in-out;
2619 |
2620 |
2621 | .youlag-video-thumbnail {
2622 | position: absolute;
2623 | top: 50%;
2624 | left: 0;
2625 | width: 100%;
2626 | transform: translateY(-50%);
2627 | }
2628 | }
2629 | }
2630 |
2631 |
2632 | .youlag-video-details {
2633 | padding-top: var(--yl-p-xs);
2634 | padding-left: var(--yl-p-md);
2635 | padding-right: var(--yl-p-md);
2636 |
2637 | .youlag-video-metadata-container {
2638 | margin-bottom: var(--yl-m-lg);
2639 |
2640 | .youlag-video-metadata-title {
2641 | font-size: 1.4rem;
2642 | line-height: 1.4;
2643 | margin-bottom: var(--yl-m-sm);
2644 | }
2645 |
2646 | .youlag-video-metadata-favicon {
2647 | width: 42px;
2648 | height: 42px;
2649 | background-color: hsla(0, 0%, 100%, .18);
2650 | padding: 8px;
2651 | box-sizing: border-box;
2652 | border-radius: 50%;
2653 | margin-top: 2px;
2654 |
2655 | &[src=""] {
2656 | display: none;
2657 | }
2658 | }
2659 | }
2660 | }
2661 |
2662 |
2663 | .youlag-video-metadata-panel {
2664 | display: flex;
2665 | flex-wrap: wrap;
2666 | align-items: center;
2667 | gap: var(--yl-m-sm);
2668 | margin-bottom: var(--yl-m-md);
2669 |
2670 | .youlag-video-author-section {
2671 | display: flex;
2672 | flex: 1;
2673 | gap: var(--yl-m-2xs);
2674 | align-items: center;
2675 | min-width: 400px;
2676 |
2677 |
2678 | .youlag-video-metadata-author a {
2679 | font-size: var(--yl-text-sm);
2680 | ;
2681 | line-height: 1.66;
2682 | font-weight: 600;
2683 | color: #fff;
2684 | }
2685 |
2686 | .youlag-video-metadata-date {
2687 | font-size: var(--yl-text-xs);
2688 | line-height: 1;
2689 | opacity: 0.8;
2690 | }
2691 | }
2692 |
2693 | .youlag-video-actions-container {
2694 | display: flex;
2695 | gap: var(--yl-m-2xs);
2696 | flex-wrap: wrap;
2697 | }
2698 | }
2699 |
2700 | .youlag-video-metadata-favicon-link:has(.youlag-video-metadata-favicon[src=""]) {
2701 | display: none;
2702 | }
2703 |
2704 | .youlag-favorited {
2705 | min-width: 60px;
2706 |
2707 | &.youlag-favorited--false .youlag-favorited-icon {
2708 | background-image: url('../themes/Mapco/icons/non-starred.svg');
2709 | filter: brightness(1.6);
2710 | }
2711 |
2712 | &.youlag-favorited--true .youlag-favorited-icon {
2713 | background-image: url('../themes/Mapco/icons/starred.svg');
2714 | filter: brightness(1.5) sepia(1) hue-rotate(-25deg) saturate(4) contrast(1.2);
2715 | }
2716 |
2717 | .youlag-favorited-icon {
2718 | width: 20px;
2719 | height: 20px;
2720 | filter: invert(1);
2721 | background-repeat: no-repeat;
2722 | background-position: center;
2723 | width: 100%;
2724 | }
2725 | }
2726 |
2727 |
2728 |
2729 | .youlag-video-description-container {
2730 | background-color: rgb(255, 255, 255, 0.1);
2731 | margin-bottom: var(--yl-m-lg);
2732 | padding: var(--yl-p-sm);
2733 | border-radius: 1rem;
2734 |
2735 | .youlag-video-description-content {
2736 | font-size: var(--yl-text-sm);
2737 | word-break: break-word;
2738 | max-width: 700px;
2739 | }
2740 |
2741 | &:has(.youlag-video-description-content:empty) {
2742 | // Hide description container if no description within content.
2743 | display: none;
2744 | }
2745 | }
2746 |
2747 |
2748 |
2749 | a.yl-video-action-button {
2750 | background-color: #303136;
2751 | color: #fff;
2752 | font-weight: 600;
2753 | font-size: var(--yl-text-xs);
2754 | border-radius: 999px;
2755 | padding: var(--yl-p-xs) var(--yl-p-sm);
2756 | display: inline-block;
2757 | text-decoration: none;
2758 | transition: background-color 0.2s;
2759 |
2760 | &:hover {
2761 | text-decoration: none;
2762 | background-color: #424348;
2763 | }
2764 |
2765 | span.yl-video-action-button__icon {
2766 | margin-right: var(--yl-m-2xs);
2767 | }
2768 | }
2769 |
2770 |
2771 | .yl-video-action-button-group {
2772 | // For placing related buttons into one group
2773 | display: flex;
2774 | border-radius: 999px;
2775 | overflow: hidden;
2776 |
2777 | a.yl-video-action-button {
2778 | // Reset rounded corners of buttons in group
2779 | border-radius: 0;
2780 | }
2781 |
2782 | .yl-video-action-button:first-child {
2783 | border-top-left-radius: 999px;
2784 | border-bottom-left-radius: 999px;
2785 | }
2786 |
2787 | .yl-video-action-button:last-child {
2788 | border-top-right-radius: 999px;
2789 | border-bottom-right-radius: 999px;
2790 | }
2791 |
2792 | .yl-video-action-button:not(:last-child) {
2793 | border-right: 1px solid rgba(255, 255, 255, 0.26);
2794 | }
2795 |
2796 | .yl-video-action-button:only-child {
2797 | border-top-left-radius: 0;
2798 | border-bottom-left-radius: 0;
2799 | border-top-right-radius: 0;
2800 | border-bottom-right-radius: 0;
2801 | border: none;
2802 | }
2803 | }
2804 |
2805 | a.yl-video-action-button[href=""] {
2806 | // Hide button if no link was able to be fetched
2807 | display: none;
2808 | }
2809 |
2810 |
2811 | #youlagCloseModal {
2812 | cursor: pointer;
2813 | padding: var(--yl-p-sm);
2814 | display: flex;
2815 | align-items: center;
2816 | justify-content: center;
2817 | text-align: center;
2818 | line-height: 1;
2819 | border-radius: 999px;
2820 | width: 40px;
2821 | height: 40px;
2822 | font-size: var(--yl-text-lg);
2823 | background-color: #303136;
2824 | box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.4);
2825 | transition: background-color 0.2s;
2826 |
2827 | &:hover {
2828 | background-color: #424348;
2829 | }
2830 | }
2831 |
2832 | /*****************************************
2833 | * END "YOULAG THEATER VIEW MODAL"
2834 | ****************************************/
--------------------------------------------------------------------------------
/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}@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.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%)}}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;top:0px;left:0px;height:100vh;width:100vw;background:#060606;overflow-y:auto;overflow-x:hidden;box-sizing:border-box;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{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{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{background-color:#424348}
2 |
--------------------------------------------------------------------------------
101 |
102 |
103 |
104 |
105 |
113 |
114 |
115 |
106 |
107 |
108 |
109 |
111 |
112 |
116 |
117 |
170 |
171 |
118 |
162 |
163 |
164 |
165 | ${data.title}
119 |
120 |
121 |
122 |
123 |
124 |
125 |
126 |
133 |
134 |
135 |
138 |
139 |
140 |
141 | Source
142 |
143 |
144 |
145 | Invidious
146 |
147 |
148 |
156 |
157 |
158 |
159 |
160 |
161 |
127 |
130 |
131 |
132 |
166 | ${data.video_description}
167 |
168 |
169 |