[e-mail] - firefox Package Compare versions

Comparing version 0.8.0 to 1.5.2

__MACOSX/._styles.css

+Mac OS X        	2q�ATTR��
�com.apple.provenance
*��5Lf

styles.css

+/* ===================================================================
+   YT-XL Main Stylesheet - FINAL CORRECTED VERSION
+   =================================================================== */
+
+/* --- Homepage Grid Layout (Always On, Dynamic via CSS Variable) --- */
+ytd-rich-grid-renderer #contents.ytd-rich-grid-renderer > ytd-rich-item-renderer {
+    width: calc((100% / var(--thumbnail-count, 3)) - 16px) !important;
+    margin-left: 8px !important;
+    margin-right: 8px !important;
+    max-width: none !important;
+}
+ytd-rich-section-renderer, ytd-reel-shelf-renderer { display: none !important; }
+
+
+/* --- [SWITCH] Watch Page: Big Theater Mode --- */
+/* Your original CSS for the fullscreen player and custom control layout */
+body.sye-theater-mode #movie_player {
+    top: 0 !important; left: 0 !important; width: 100vw !important; height: 100vh !important;
+    background-color: black !important; transform: none !important; margin: 0 !important; padding: 0 !important;
+}
+body.sye-theater-mode ytd-watch-flexy[full-bleed-player] #full-bleed-container.ytd-watch-flexy {
+    max-height: 100vh !important; height: 100vh!important;
+}
+/* The parent container for the controls and seekbar */
+body.sye-theater-mode .ytp-chrome-bottom {
+    bottom: 0; height: 68px!important; width: 100%; z-index: 59;
+    padding-top: 3px; text-align: left; direction: ltr;
+    opacity: 1 !important; /* THIS IS THE FIX: Force the container to always be visible */
+}
+/* The controls themselves, with your hover effect */
+body.sye-theater-mode .ytp-chrome-controls {
+    height: 68px!important; line-height: 68px!important; font-size: 109%;
+    padding-bottom: 20px!important; bottom:0px!important;
+    background-color: #22222234!important;
+    opacity:0!important; transition: opacity 250ms ease-in-out !important; 
+}
+body.sye-theater-mode .ytp-chrome-controls:hover {
+    opacity:1!important;
+}
+/* The seekbar, at the very bottom, now guaranteed to be visible */
+body.sye-theater-mode .ytp-progress-bar-container {
+    display: block; position: absolute; width: 100%; bottom: 0px !important; height: 5px;
+}
+/* Other minor elements from your original design */
+body.sye-theater-mode .ytp-time-display { line-height: 67px!important; }
+body.sye-theater-mode .ytp-gradient-bottom { display: none !important; }
+
+
+/* --- [SWITCH] Watch Page: Auto-Hiding Header --- */
+body.sye-header-hide #masthead {
+    opacity: 0 !important;
+    transition: opacity 250ms ease-in-out !important;
+}
+body.sye-header-hide #masthead:hover { opacity: 1 !important; }
+body.sye-header-hide ytd-page-manager { margin-top: 0 !important; }
+
+
+/* --- [SWITCH] Watch Page: Frosted Glass Player Controls --- */
+/* This is an ADD-ON. It only modifies the controls when enabled. */
+body.sye-frosted-controls .ytp-chrome-controls {
+    /* The frosted glass effect */
+    background-color: rgba(30, 30, 30, 0.15) !important; /* MORE TRANSPARENT: Was 0.65, now 0.45 */
+    backdrop-filter: blur(12px) !important;
+    -webkit-backdrop-filter: blur(7px) !important;
+    border-radius: 30px !important;                      /* MORE ROUNDED: Was 12px, now 16px */
+    border: 0px solid rgba(255, 255, 255, 0.1);
+    
+    /* WIDER & CENTERED: Set width to 98% and use 'auto' margins to center it */
+    width: 100% !important; 
+    margin: 0 auto 20px auto !important; /* Keeps bottom margin, centers horizontally */
+}
+body.sye-frosted-controls .ytp-button.ytp-mute-button {
+    padding-top: 14px !important;
+ }

__MACOSX/._content.js

@@ -1,1 +0,2 @@
-Mac OS X        	2q�ATTR��
�com.apple.provenance
*��5Lf
+Mac OS X        	2�
ATTR
�S�Hcom.apple.macl�com.apple.provenanceq\�CX���s?�
+�
*��5Lf

__MACOSX/._manifest.json

@@ -1,1 +0,2 @@
-Mac OS X        	2


?ATTR
?�c�com.apple.lastuseddate#PS�Hcom.apple.macl
4com.apple.provenance�|h��@_� `�^C*�S#�DcO
:ｉ�%�
+Mac OS X        	2


?ATTR
?�c�com.apple.lastuseddate#PS�Hcom.apple.macl
4com.apple.provenance�XLh��:q\�CX���s?�
+�
:ｉ�%�

__MACOSX/._popup.js

@@ -1,1 +0,2 @@
-Mac OS X        	2q�ATTR��
�com.apple.provenance
*��5Lf
+Mac OS X        	2�
ATTR
�S�Hcom.apple.macl�com.apple.provenanceq\�CX���s?�
+�
*��5Lf

content.js

@@ -1,137 +0,72 @@
-// content.js (Simplified for Thumbnail Count Only)
-
-const STYLE_ID = 'simple-youtube-enhancer-styles';
-const WATCH_CSS_PATH = 'watchpage.css'; // Path to watch page CSS
-
-// --- Global Variables ---
+// A local copy of the settings for quick access
+let currentSettings = {};
+const STYLE_ID = 'yt-xl-styles';
 let styleElement = null;
-let watchPageCssCache = null; // Cache the watch page CSS content
-let currentThumbnailCount = 3; // Store current setting locally (default)
 
-// --- CSS Generation ---
-function generateHomepageCss(thumbnailCount) {
-    // Ensure thumbnailCount is within a reasonable range
-    thumbnailCount = parseInt(thumbnailCount, 10);
-    if (isNaN(thumbnailCount) || thumbnailCount < 1 || thumbnailCount > 12) { // Allow 1 to 12 now, fallback to 3
-        thumbnailCount = 3;
-    }
+// The main function to apply all visual changes
+function applyStyles() {
+    const isWatchPage = window.location.pathname.startsWith('/watch');
+    
+    // --- Body Class Toggling ---
+    // These classes enable/disable features in styles.css
+    document.body.classList.toggle('sye-theater-mode', isWatchPage && currentSettings.enableTheater);
+    document.body.classList.toggle('sye-frosted-controls', isWatchPage && currentSettings.enableFrosted);
+    document.body.classList.toggle('sye-header-hide', isWatchPage && currentSettings.enableHeaderHide);
 
-    // Calculate width percentage, subtracting a fixed gap (adjust 16px if needed)
-    const gap = 16; // Total horizontal gap (e.g., 8px margin left + 8px margin right)
-    const widthPercentage = `calc((100% / ${thumbnailCount}) - ${gap}px)`;
-    const marginValue = `${gap / 2}px`;
+    // --- CSS Variable for Thumbnails ---
+    // This dynamically controls the grid layout from styles.css
+    document.body.style.setProperty('--thumbnail-count', currentSettings.thumbnailCount);
 
-    // Return the dynamic CSS string
-    return `
-/* --- Homepage Specific Styles (Dynamic: ${thumbnailCount}/row) --- */
-/* Apply to items within the main grid */
-ytd-rich-grid-renderer > #contents {
-    /* Optional: Override default max-width if needed for many items */
-    /* max-width: none !important; */
+    console.log("YT-XL: Styles applied. Watch Page:", isWatchPage);
 }
 
-ytd-rich-grid-renderer #contents.ytd-rich-grid-renderer > ytd-rich-item-renderer {
-    width: ${widthPercentage} !important;
-    margin-left: ${marginValue} !important;
-    margin-right: ${marginValue} !important;
-    margin-bottom: 40px !important; /* Default YT bottom margin */
-    max-width: none !important; /* Allow item to actually use the calculated width */
-}
-
-/* Hide Shorts, Sections, etc. (Keep if desired) */
-ytd-rich-section-renderer,
-ytd-reel-shelf-renderer {
-    display: none !important;
-}
-/* --- End Homepage Styles --- */
-    `;
-}
-
-
-// Function to fetch Watch Page CSS content once
-async function getWatchPageCss() {
-    if (watchPageCssCache === null) {
-        try {
-            const cssUrl = chrome.runtime.getURL(WATCH_CSS_PATH);
-            const response = await fetch(cssUrl);
-            if (!response.ok) {
-                throw new Error(`Failed to fetch watch page CSS: ${response.statusText}`);
-            }
-            watchPageCssCache = await response.text();
-            console.log("SYE: Successfully fetched watch page CSS.");
-        } catch (error) {
-            console.error("SYE: Error fetching watch page CSS:", error);
-            watchPageCssCache = "/* CSS Fetch Error */"; // Prevent repeated fetch attempts
-        }
-    }
-    return watchPageCssCache;
-}
-
-// Function to add/update/remove the CSS content from the style tag
-async function updateStyles() {
-    // Ensure style element exists
-    if (!styleElement) {
-        styleElement = document.createElement('style');
-        styleElement.id = STYLE_ID;
-        (document.head || document.documentElement).appendChild(styleElement);
-        console.log("SYE: Created style element.");
-    }
-
-    const currentPath = window.location.pathname;
-    let cssToApply = ''; // Default to no styles
-
-    // Determine which CSS to apply based on path and settings
-    const isHomepage = currentPath === '/' || currentPath.startsWith('/feed/'); // Simplified homepage check
-
-    if (isHomepage) {
-        // Apply Dynamic Homepage CSS using the stored setting
-        cssToApply = generateHomepageCss(currentThumbnailCount);
-        console.log(`SYE: Applying Homepage styles for ${currentPath} (${currentThumbnailCount} thumbs/row)`);
-    } else if (currentPath.startsWith('/watch')) {
-        // Apply Watch Page CSS (fetch if needed)
-        cssToApply = await getWatchPageCss();
-        console.log("SYE: Applying Watch Page styles for", currentPath);
-    } else {
-        // Other pages - No custom styles for now
-        console.log("SYE: No specific styles for", currentPath);
-    }
-
-    // Update the style tag's content only if it changed
-    if (styleElement.textContent !== cssToApply) {
-        styleElement.textContent = cssToApply;
-    }
-}
-
-// --- Load Settings from Storage ---
-function loadCurrentSettingsAndUpdate() {
-    const defaultSettings = { thumbnailCount: 3 };
+// Function to load settings from storage and then apply styles
+function loadSettingsAndApply() {
+    const defaultSettings = {
+        thumbnailCount: 3,
+        enableTheater: true,
+        enableFrosted: true,
+        enableHeaderHide: true
+    };
     chrome.storage.sync.get(defaultSettings, (settings) => {
-        currentThumbnailCount = settings.thumbnailCount;
-        console.log("SYE: Loaded thumbnail count:", currentThumbnailCount);
-        updateStyles(); // Apply styles after loading settings
+        currentSettings = settings;
+        console.log("YT-XL: Settings loaded", currentSettings);
+        applyStyles();
     });
 }
 
-// --- Storage Change Listener ---
+// Listen for changes in storage (e.g., from the popup)
 chrome.storage.onChanged.addListener((changes, namespace) => {
-    if (namespace === 'sync' && changes.thumbnailCount) {
-        const newCount = changes.thumbnailCount.newValue;
-        if (currentThumbnailCount !== newCount) {
-            currentThumbnailCount = newCount;
-            console.log("SYE: Detected thumbnail count change, updating styles to:", currentThumbnailCount);
-            updateStyles(); // Re-apply styles with the new count
-        }
+    if (namespace === 'sync') {
+        console.log("YT-XL: Detected settings change.");
+        // Reload all settings to update our local copy, then re-apply styles
+        loadSettingsAndApply();
     }
 });
 
-// --- Event Listener for YouTube's SPA Navigation ---
-window.addEventListener('yt-navigate-finish', (event) => {
-    console.log("SYE: Detected yt-navigate-finish event.");
-    requestAnimationFrame(updateStyles); // Update styles after navigation
+// Listen for YouTube's navigation events
+window.addEventListener('yt-navigate-finish', () => {
+    console.log("YT-XL: Detected navigation.");
+    // Re-apply styles after navigation to handle page changes (e.g., from home to watch)
+    // A small delay can help ensure the page is ready
+    requestAnimationFrame(applyStyles);
 });
 
 // --- Initial Execution ---
-// Load settings first, then apply styles based on those settings
-loadCurrentSettingsAndUpdate();
+function initialize() {
+    console.log("YT-XL: Content script initializing...");
+    // Inject the main stylesheet only once
+    if (!document.getElementById(STYLE_ID)) {
+        styleElement = document.createElement('link');
+        styleElement.id = STYLE_ID;
+        styleElement.rel = 'stylesheet';
+        styleElement.type = 'text/css';
+        styleElement.href = chrome.runtime.getURL('styles.css');
+        document.head.appendChild(styleElement);
+        console.log("YT-XL: Main stylesheet injected.");
+    }
+    // Load settings from storage, which will then trigger the first style application
+    loadSettingsAndApply();
+}
 
-console.log("SYE: Content script loaded (Thumbnail Layout Only).");
+initialize();

manifest.json

 {
   "manifest_version": 3,
   "name": "YT-XL",
-  "version": "0.8.0",
-  "description": "Customize the number of thumbnails per row on the YouTube homepage (Firefox).",
+  "version": "1.5.2",
+  "description": "Customize YouTube homepage thumbnails and watch page styles.",
   "icons": {
@@ -14,5 +14,2 @@ "16": "icon.png",
   ],
-  "host_permissions": [
-    "*://*.youtube.com/*"
-  ],
   "action": {
@@ -40,3 +37,3 @@ "default_popup": "popup.html",
       "resources": [
-        "watchpage.css"
+        "styles.css"
       ],
@@ -43,0 +40,0 @@ "matches": [

popup.html

@@ -6,3 +6,3 @@ <!DOCTYPE html>
   <style>
-    /* Keep the dark mode styles from before, or simplify if you prefer */
+    /* RESTORED: Your sophisticated dark theme and layout */
     :root {
@@ -17,3 +17,3 @@ --bg-color: #282c34;
         --slider-thumb-hover-color: #7cc0ff;
-        --popup-width: 250px; /* Adjusted width slightly */
+        --popup-width: 280px; /* Increased width for better look */
         --border-radius: 4px;
@@ -28,3 +28,3 @@ --slider-track-height: 6px;
       width: var(--popup-width);
-      padding: 15px;
+      padding: 20px;
       margin: 0;
@@ -35,5 +35,7 @@ box-sizing: border-box;
       color: var(--primary-color);
-      text-align: center;
+      text-align: left;
       margin-top: 0;
       margin-bottom: 20px;
+      padding-bottom: 5px;
+      border-bottom: 1px solid var(--border-color);
       font-weight: 500;
@@ -43,39 +45,10 @@ font-size: 1.1em;
     .setting-group {
-      margin-bottom: 15px; /* Reduced bottom margin */
+      margin-bottom: 25px;
     }
-    label {
-      display: block;
-      margin-bottom: 8px;
-      font-weight: 500;
-      font-size: 0.9em;
-    }
-    input[type="range"] {
-        width: 100%;
-        height: var(--slider-thumb-size);
-        cursor: pointer;
-        appearance: none;
-        -webkit-appearance: none;
-        background: transparent;
-        margin-top: 5px;
-    }
-    input[type="range"]::-webkit-slider-runnable-track {
-        width: 100%; height: var(--slider-track-height); background: var(--slider-track-color);
-        border-radius: calc(var(--slider-track-height) / 2); border: none;
-    }
-    input[type="range"]::-moz-range-track {
-        width: 100%; height: var(--slider-track-height); background: var(--slider-track-color);
-        border-radius: calc(var(--slider-track-height) / 2); border: none;
-    }
-    input[type="range"]::-webkit-slider-thumb {
-        appearance: none; -webkit-appearance: none; height: var(--slider-thumb-size);
-        width: var(--slider-thumb-size); background: var(--slider-thumb-color);
-        border-radius: 50%; border: none;
-        margin-top: calc((var(--slider-track-height) - var(--slider-thumb-size)) / 2);
-        transition: background-color 0.15s ease-in-out;
-    }
-    input[type="range"]::-moz-range-thumb {
-        height: var(--slider-thumb-size); width: var(--slider-thumb-size);
-        background: var(--slider-thumb-color); border-radius: 50%; border: none;
-        transition: background-color 0.15s ease-in-out;
-    }
+    /* ... The rest of your detailed slider styles are perfect ... */
+    input[type="range"] { width: 100%; height: var(--slider-thumb-size); cursor: pointer; appearance: none; -webkit-appearance: none; background: transparent; margin-top: 5px; }
+    input[type="range"]::-webkit-slider-runnable-track { width: 100%; height: var(--slider-track-height); background: var(--slider-track-color); border-radius: calc(var(--slider-track-height) / 2); border: none; }
+    input[type="range"]::-moz-range-track { width: 100%; height: var(--slider-track-height); background: var(--slider-track-color); border-radius: calc(var(--slider-track-height) / 2); border: none; }
+    input[type="range"]::-webkit-slider-thumb { appearance: none; -webkit-appearance: none; height: var(--slider-thumb-size); width: var(--slider-thumb-size); background: var(--slider-thumb-color); border-radius: 50%; border: none; margin-top: calc((var(--slider-track-height) - var(--slider-thumb-size)) / 2); transition: background-color 0.15s ease-in-out; }
+    input[type="range"]::-moz-range-thumb { height: var(--slider-thumb-size); width: var(--slider-thumb-size); background: var(--slider-thumb-color); border-radius: 50%; border: none; transition: background-color 0.15s ease-in-out; }
     input[type="range"]:hover::-webkit-slider-thumb { background: var(--slider-thumb-hover-color); }
@@ -86,10 +59,16 @@ input[type="range"]:hover::-moz-range-thumb { background: var(--slider-thumb-hover-color); }
     input[type="range"]:focus::-moz-range-thumb { box-shadow: 0 0 0 3px rgba(97, 175, 239, 0.4); }
-    #thumbnailValue {
-      font-weight: bold; color: var(--primary-color); margin-left: 5px;
-    }
+    #thumbnailValue { font-weight: bold; color: var(--primary-color); margin-left: 5px; }
+    /* Toggle Switch Styles */
+    .toggle-container { display: flex; align-items: center; justify-content: space-between; margin-top: 15px; }
+    .toggle-label { font-weight: 500; font-size: 0.9em; }
+    .switch { position: relative; display: inline-block; width: 44px; height: 24px; }
+    .switch input { opacity: 0; width: 0; height: 0; }
+    .slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: var(--slider-track-color); transition: .4s; border-radius: 24px; }
+    .slider:before { position: absolute; content: ""; height: 18px; width: 18px; left: 3px; bottom: 3px; background-color: white; transition: .4s; border-radius: 50%; }
+    input:checked + .slider { background-color: var(--primary-color); }
+    input:checked + .slider:before { transform: translateX(20px); }
   </style>
 </head>
 <body>
-  <h2>Homepage Layout</h2> <!-- Simplified title -->
-
+  <h2>Homepage Layout</h2>
   <div class="setting-group">
@@ -100,3 +79,8 @@ <label for="thumbnailSlider">Thumbnails per Row: <span id="thumbnailValue"></span></label>
 
-  <!-- Removed Resolution and Speed sections -->
+  <h2>Watch Page Settings</h2>
+  <div class="setting-group">
+    <div class="toggle-container"><span class="toggle-label">Big Theater Mode</span><label class="switch"><input type="checkbox" id="theaterToggle"><span class="slider"></span></label></div>
+    <div class="toggle-container"><span class="toggle-label">Frosted Controls</span><label class="switch"><input type="checkbox" id="frostedToggle"><span class="slider"></span></label></div>
+    <div class="toggle-container"><span class="toggle-label">Auto-Hide Header</span><label class="switch"><input type="checkbox" id="headerToggle"><span class="slider"></span></label></div>
+  </div>
 
@@ -103,0 +87,0 @@ <script src="popup.js"></script>

popup.js

@@ -1,42 +0,50 @@
-// popup.js (Simplified)
+document.addEventListener('DOMContentLoaded', function() {
+    // Slider Controls
+    const thumbnailSlider = document.getElementById('thumbnailSlider');
+    const thumbnailValueSpan = document.getElementById('thumbnailValue');
+    // New Toggle Switches
+    const theaterToggle = document.getElementById('theaterToggle');
+    const frostedToggle = document.getElementById('frostedToggle');
+    const headerToggle = document.getElementById('headerToggle');
 
-const thumbnailSlider = document.getElementById('thumbnailSlider');
-const thumbnailValueSpan = document.getElementById('thumbnailValue');
+    const DEFAULT_SETTINGS = {
+        thumbnailCount: 3,
+        enableTheater: true,
+        enableFrosted: true,
+        enableHeaderHide: true
+    };
 
-// --- Default Settings ---
-const DEFAULT_SETTINGS = {
-    thumbnailCount: 3 // Only setting needed
-};
+    function loadSettings() {
+        chrome.storage.sync.get(DEFAULT_SETTINGS, (settings) => {
+            // Set slider
+            thumbnailSlider.value = settings.thumbnailCount;
+            thumbnailValueSpan.textContent = settings.thumbnailCount;
+            // Set toggles
+            theaterToggle.checked = settings.enableTheater;
+            frostedToggle.checked = settings.enableFrosted;
+            headerToggle.checked = settings.enableHeaderHide;
+        });
+    }
 
-// --- Load Settings ---
-function loadSettings() {
-    chrome.storage.sync.get(DEFAULT_SETTINGS, (settings) => {
-        thumbnailSlider.value = settings.thumbnailCount;
-        thumbnailValueSpan.textContent = settings.thumbnailCount;
-        console.log("YT-XL Popup: Thumbnail setting loaded", settings.thumbnailCount);
-    });
-}
+    function saveSettings() {
+        const settings = {
+            thumbnailCount: parseInt(thumbnailSlider.value, 10),
+            enableTheater: theaterToggle.checked,
+            enableFrosted: frostedToggle.checked,
+            enableHeaderHide: headerToggle.checked
+        };
+        chrome.storage.sync.set(settings);
+    }
 
-// --- Save Settings ---
-function saveSettings() {
-    const settings = {
-        thumbnailCount: parseInt(thumbnailSlider.value, 10)
-    };
-    chrome.storage.sync.set(settings, () => {
-        console.log("YT-XL Popup: Thumbnail setting saved", settings.thumbnailCount);
+    // --- Event Listeners ---
+    thumbnailSlider.addEventListener('input', () => {
+        thumbnailValueSpan.textContent = thumbnailSlider.value;
     });
-}
+    thumbnailSlider.addEventListener('change', saveSettings);
+    theaterToggle.addEventListener('change', saveSettings);
+    frostedToggle.addEventListener('change', saveSettings);
+    headerToggle.addEventListener('change', saveSettings);
 
-// --- Event Listeners ---
-thumbnailSlider.addEventListener('input', () => {
-    // Update the displayed value immediately as the slider moves
-    thumbnailValueSpan.textContent = thumbnailSlider.value;
-});
-
-thumbnailSlider.addEventListener('change', () => {
-    // Save the final value when the user releases the slider
-    saveSettings();
-});
-
-// --- Initial Load ---
-document.addEventListener('DOMContentLoaded', loadSettings);
+    // Initial Load
+    loadSettings();
+});

__MACOSX/._watchpage.css

-Mac OS X        	2q�ATTR��
�com.apple.provenance
*��5Lf

watchpage.css

-/* styles.css (v9.0 - Mimic Fullscreen) */
-
-  /* Target the actual player element */
-  body.tmxl-fullscreen-mimic #movie_player {
-      top: 0 !important;
-      left: 0 !important;
-      width: 100vw !important;  /* Use viewport width */
-      height: 100vh !important; /* Use viewport height */
-      background-color: black !important; /* Ensure no gaps */
-      transform: none !important;
-      margin: 0 !important;
-      padding: 0 !important;
-  }
-   /* header hide show */
-#masthead{
-    opacity: 0!important;
-    transition: opacity 250ms ease-in-out !important; 
-}
-#masthead:hover{opacity: 1 !important;}
-
-   /* remove the gap left by header*/
-  ytd-page-manager { margin-top: 0!important;}
-
-   /* position other elements under the player */
-ytd-watch-flexy[full-bleed-player] #full-bleed-container.ytd-watch-flexy {
-    max-height: 100vh !important;
-    height: 100vh!important;
-}
-  /* bottom bar parent of controler and seecbar */
-.ytp-chrome-bottom {
-    bottom: 0;
-    height: 68px!important;
-    width: 100%;
-    z-index: 59;
-    padding-top: 3px;
-    text-align: left;
-    direction: ltr;
-    opacity:1!important;
-}
-/* youtube controls children off chrome-bottom*/
-.ytp-chrome-controls {
-    height: 68px!important;
-    line-height: 68px!important;
-    font-size: 109%;
-    padding-bottom: 20px!important;
-    bottom:0px!important ;
-    background-color: #22222234!important;
-    opacity:0!important;
-    transition: opacity 250ms ease-in-out !important; 
-}
-.ytp-chrome-controls:hover {
-    height: 48px;
-    line-height: 48px;
-    font-size: 109%;
-    opacity:1!important;
-    transition: opacity 250ms ease-in-out !important; 
-}
-
-.ytp-time-display {
-    line-height: 67px!important;
-}
-/* stupid dradiant bg for controls*/
-.ytp-gradient-bottom {
-    height: 61px;
-    padding-top: 37px;
-    bottom: 0;
-    z-index: 24;
-    background-position: bottom;
-    display: none !important;
-}
-/* progresbarcontainer children off chrome-bottom*/
-.ytp-progress-bar-container {
-    display: block;
-    position: absolute;
-    width: 100%;
-    bottom: 0px !important;
-    height: 5px;
-}

No alert changes

No metric changes