Koodo Reader Style overwrite

Overwrite Koodo Reader CSS.

You will need to install an extension such as Tampermonkey, Greasemonkey or Violentmonkey to install this script.

You will need to install an extension such as Tampermonkey to install this script.

You will need to install an extension such as Tampermonkey or Violentmonkey to install this script.

You will need to install an extension such as Tampermonkey or Userscripts to install this script.

You will need to install an extension such as Tampermonkey to install this script.

You will need to install a user script manager extension to install this script.

(I already have a user script manager, let me install it!)

You will need to install an extension such as Stylus to install this style.

You will need to install an extension such as Stylus to install this style.

You will need to install an extension such as Stylus to install this style.

You will need to install a user style manager extension to install this style.

You will need to install a user style manager extension to install this style.

You will need to install a user style manager extension to install this style.

(I already have a user style manager, let me install it!)

// ==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 })
})()