☰

Koodo Reader Style overwrite

Overwrite Koodo Reader CSS.

// ==UserScript==
// @name         Koodo Reader Style overwrite
// @namespace    http://wiidede.github.io/
// @license      MIT
// @version      0.5
// @description  Overwrite Koodo Reader CSS.
// @author       wiidede
// @match        https://reader.960960.xyz/*
// @icon         https://www.google.com/s2/favicons?sz=64&domain=reader.960960.xyz
// @grant        none
// ==/UserScript==

(async function () {
  'use strict'

  const css = `
.background-box1, .background-box2, .background-box3 {
  display: none !important;
}

.html-viewer-page.scrolling-html-viewer-page {
  margin: 0 !important;
  font-size: var(--reader-font-size, inherit) !important;
  padding-left: calc(50vw - 32.5ch) !important;
  padding-right: calc(50vw - 32.5ch) !important;
}

.popup-menu-container {
  opacity: 30% !important;
  left: 10px !important;
  transform: translateY(-100%) !important;
}

.popup-menu-container .menu-list {
  width: fit-content !important;
  height: fit-content !important;
}

.popup-menu-container .menu-list > div:not(.speaker-option) {
  display: none !important;
}

.popup-menu-container .color-option-container {
  display: none !important;
}
    `

  const iframeCss = `
p.kookit-text {
  font-family: Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,"Apple Color Emoji","Segoe UI Emoji",Segoe UI Symbol,"Noto Color Emoji" !important;
  font-weight: normal !important;
  line-height: 1.75 !important;
}
  `

  function selectElement(selector, interval) {
    return new Promise((resolve) => {
      const select = () => {
        const element = document.querySelector(selector)
        if (element)
          resolve(element)
        else
          setTimeout(select, interval)
      }
      select()
    })
  }

  function addStyle(doc, css) {
    const style = doc.createElement('style')
    style.type = 'text/css'

    if (style.styleSheet)
      style.styleSheet.cssText = css
    else
      style.appendChild(doc.createTextNode(css))

    doc.head.appendChild(style)
  }

  addStyle(document, css)

  function getReaderFontSize(configStr) {
    try {
      const config = JSON.parse(configStr)
      const size = Number.parseInt(config.fontSize)
      return size || 16
    }
    catch {
      return 16
    }
  }

  function setSizeCssVar(size) {
    document.documentElement.style.setProperty('--reader-font-size', `${size}px`)
  }

  setSizeCssVar(getReaderFontSize(localStorage.getItem('readerConfig')))

  const pageEl = await selectElement('#page-area')
  const pageObserver = new MutationObserver((e) => {
    const iframe = Array.from(e[0].addedNodes).find(el => el.tagName === 'IFRAME')
    if (iframe) {
      setSizeCssVar(getReaderFontSize(localStorage.getItem('readerConfig')))
      addStyle(iframe.contentDocument, iframeCss)
    }
  })
  pageObserver.observe(pageEl, { childList: true })
})()