Koodo Reader Style overwrite

Overwrite Koodo Reader CSS.

Aby zainstalować ten skrypt, wymagana jest instalacje jednego z następujących rozszerzeń: Tampermonkey, Greasemonkey lub Violentmonkey.

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

Aby zainstalować ten skrypt, wymagana jest instalacje jednego z następujących rozszerzeń: Tampermonkey, Violentmonkey.

Aby zainstalować ten skrypt, wymagana będzie instalacja rozszerzenia Tampermonkey lub Userscripts.

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

Aby zainstalować ten skrypt, musisz zainstalować rozszerzenie menedżera skryptów użytkownika.

(Mam już menedżera skryptów użytkownika, pozwól mi to zainstalować!)

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.

Będziesz musiał zainstalować rozszerzenie menedżera stylów użytkownika, aby zainstalować ten styl.

Będziesz musiał zainstalować rozszerzenie menedżera stylów użytkownika, aby zainstalować ten styl.

Musisz zainstalować rozszerzenie menedżera stylów użytkownika, aby zainstalować ten styl.

(Mam już menedżera stylów użytkownika, pozwól mi to zainstalować!)

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