ttu-custom.tm.user.js

// ==UserScript==
// @name         TTU.app E-Ink & Touch UI Enhancements
// @namespace    http://tampermonkey.net/
// @version      3.6
// @description  Applies CSS styles for e-ink, touch UI, layout fixes, and forces top bar buttons to show on mobile.
// @author       KanjiEater (updated by Gemini)
// @match        https://reader.ttsu.app/*
// @grant        GM_addStyle
// @run-at       document-idle
// @noframes
// ==/UserScript==

(function() {
    'use strict';

    const allCustomStyles = `
        /*
         * SECTION 1: E-INK HIGHLIGHT STYLE
         * Purpose: Changes the default text highlight from a solid background color
         * to a simple underline. This is much friendlier for e-ink screens,
         * as it avoids "ghosting" and slow screen refreshes.
        */
        span[class^="ttu-whispersync-line-highlight-"].active,
        span[class^="ttu-whispersync-line-highlight-"].menu-open {
            background: none !important; padding: 0 !important; margin: 0 !important; color: inherit !important;
            text-decoration-line: underline !important; text-decoration-style: solid !important;
            text-decoration-thickness: 2px !important; text-decoration-color: #333 !important;
            text-underline-position: left !important; text-underline-offset: 4px !important;
        }
        rt span[class^="ttu-whispersync-line-highlight-"].active,
        rt span[class^="ttu-whispersync-line-highlight-"].menu-open {
            text-decoration: none !important;
        }


        /*
         * SECTION 2: TOP BAR VISIBILITY
         * Purpose: Forces all top bar buttons (like "Go to Book Manager") to be
         * visible on all screen sizes, including mobile, instead of being hidden
         * behind a "more options" menu.
        */
        .elevation-4 .hidden.sm\\:flex {
            display: flex !important;
        }
        .elevation-4 .flex.sm\\:hidden {
            display: none !important;
        }


        /*
         * SECTION 3: E-INK ANIMATION FIX
         * Purpose: Disables the pulsing/flashing animation on the sync icon in the footer.
         * Animations cause excessive screen refreshes and ghosting on e-ink.
        */
        #ttu-page-footer .animate-pulse {
            animation: none !important;
        }


        /*
         * SECTION 4: LAYOUT & FOOTER ENHANCEMENTS
         * Purpose: A collection of fixes to improve the layout, especially for
         * vertical text and touch screen usability.
        */
        
        /* Adds padding at the end of the book text to prevent it from
         * being covered by the footer bar below. Affects both standard and Calibre books. */
        .book-content--writing-vertical-rl .main,
        .book-content--writing-vertical-rl .ttu-book-body-wrapper:not(:has(.main)) {
            padding-bottom: 35px !important;
            box-sizing: border-box !important;
        }

        /* Prevents the progress percentage text from wrapping onto a second line. */
        div[title="Click to copy Progress"] {
            white-space: nowrap !important;
            width: auto !important;
        }
        
        /* The following rules make the footer bar taller and the buttons/icons
         * larger, which is much better for touch screen devices. */
        #ttu-page-footer {
            height: 70px !important;
            align-items: center !important;
        }
        #ttu-page-footer > div[style*="width: 3.8rem"] {
            width: auto !important;
        }
        #ttu-page-footer button,
        #ttu-page-footer div[role="button"]:not([title="Click to copy Progress"]) {
            width: 66px !important; height: 66px !important;
            display: flex !important; align-items: center !important;
            justify-content: center !important; flex-shrink: 0;
        }
        #ttu-page-footer svg {
            width: 2.2rem !important;
            height: 2.2rem !important;
        }
    `;

    GM_addStyle(allCustomStyles);
    console.log('✅ TTU UI Enhancements: Annotated styles injected successfully.');

})();