Yahoo Mail Beautification

Removes the top navigation bar, the frost on top of your theme's background, and spaces left by ad-blockers

// ==UserScript==
// @name        Yahoo Mail Beautification
// @namespace   https://greasyfork.org/en/users/34131-velc-gf
// @version     2.1.6
// @description Removes the top navigation bar, the frost on top of your theme's background, and spaces left by ad-blockers
// @author      Velarde, Louie C.
// @match       https://mail.yahoo.com/*
// @icon        https://www.google.com/s2/favicons?domain=mail.yahoo.com&sz=64
// @license     LGPL-3.0
// @run-at      document-end
// @grant       GM_addStyle
// ==/UserScript==

GM_addStyle('[role="banner"] {height:60px !important}');
GM_addStyle('[role="navigation"] {display:none}');
GM_addStyle('[data-test-id="content-area"] {background-color: transparent !important}');
GM_addStyle('[data-test-id="mail-app-component"] {background-color: transparent !important}');
GM_addStyle('[data-test-id="comms-properties-bar"] {background-color: transparent !important}');


GM_addStyle('[data-test-id="left-rail-scrolling-container"]::-webkit-scrollbar {height: 8px; width: 8px}');
GM_addStyle('[data-test-id="left-rail-scrolling-container"]::-webkit-scrollbar-thumb {background-color: rgba(255,255,255,0.4)}');
GM_addStyle('[data-test-id="left-rail-scrolling-container"]::-webkit-scrollbar-thumb:hover {background-color: rgba(255,255,255,0.8)}');
GM_addStyle('[data-test-id="left-rail-scrolling-container"]::-webkit-scrollbar-thumb:active {background-color: rgb(255,255,255)}');

GM_addStyle('[data-test-id="virtual-list"]::-webkit-scrollbar {height: 8px; width: 8px}');
GM_addStyle('[data-test-id="virtual-list"]::-webkit-scrollbar-thumb {background-color: rgba(255,255,255,0.4)}');
GM_addStyle('[data-test-id="virtual-list"]::-webkit-scrollbar-thumb:hover {background-color: rgba(255,255,255,0.8)}');
GM_addStyle('[data-test-id="virtual-list"]::-webkit-scrollbar-thumb:active {background-color: rgb(255,255,255)}');

let bg = '{background: url(https://s.yimg.com/nq/nr/img/yahoo_mail_global_english_white_1x.png) no-repeat center rgba(255,255,255,0.4); height: 64px; margin-top: 4px}';
GM_addStyle('div:has(>[data-test-id^="pencil-ad-messageList"]) ' + bg);


GM_addStyle('[data-test-id="right-rail-hidead-btn"] {display: none !important}');
GM_addStyle('[data-test-id="settings-link-label"] {display: none !important}');



let map = new WeakMap();

function collapseRightRail(entries, observer) {
  let rightRail = document.querySelector('[data-test-id="mail-right-rail"]');
  if (!observer && !map.has(rightRail)) {
    let rightRailObserver = new MutationObserver(collapseRightRail);
    rightRailObserver.observe(rightRail, {childList: true, subtree: true});
    map.set(rightRail, rightRailObserver);
  }

  let apps = rightRail.querySelector('[data-test-id="comms-properties"]');
  let appsBar = apps.parentNode;

  if (rightRail.querySelector('[data-test-id="calendar-right-rail-pane"]') ||
      rightRail.querySelector('[data-test-id="contact-card"]') ||
      rightRail.querySelector('[data-test-id="contact-details"]') ||
      rightRail.querySelector('[data-test-id="contacts-pane-search"]')) {
    if (appsBar.firstChild != apps) {
      appsBar.insertBefore(apps, appsBar.firstChild);
    }
    appsBar.style.flexDirection = 'row';
    apps.style.flexDirection = 'row';
    apps.style.marginTop = '0';

    for (let app of apps.children) {
      app.style.margin = '0 14px 0 0';
    }
  } else {
    if (appsBar.lastChild != apps) {
      appsBar.appendChild(apps);
    }
    appsBar.style.flexDirection = 'column';
    apps.style.flexDirection = 'column';
    apps.style.marginTop = '14px';

    for (let app of apps.children) {
      app.style.margin = '14px 0 0 0';
    }
  }
}
window.addEventListener('load', collapseRightRail);
window.addEventListener('popstate', collapseRightRail);