[Userscript] Bitcointalk Modern Theme - Yet another Bitcointalk Skin

[DYING_S0UL]

Due to caution toward closed-source software, I just edited the OP about the risks of using this kind of product, like Tampermonkey, as @gbianchi pointed out.
I am putting some highlights on this and a clear indication toward open source alternatives like ViolentMonkey.
The problem, of course, is not this script, which is quite sandboxed and with open source code, but rather the script handler itself, which has aggressive browser access.

Ok fair enough!
Warning noted,
Tampermonkey disabled,
Violetmonkey installed,
Scripts added.

And I can confirm, they work just fine as before. At least yours does without any hiccups.

[bitmover]

You could say your extensions applies to altcointalks as well. I think it already works in both websites as well.

[fillippone]

You could say your extensions applies to altcointalks as well. I think it already works in both websites as well.

Other forum have other extension. They are built slightly differerently. I am going to update also the other one, by the way.
On a side note: why is that image Is in Italian? Mine is in English! Are you Italian? 🤌🏻🍕

[bitmover]

Other forum have other extension. They are built slightly differerently. I am going to update also the other one, by the way.
On a side note: why is that image Is in Italian? Mine is in English! Are you Italian? 🤌🏻🍕

I thought it was the same extension. I created one that worked well in both. Maybe you can ask claude to merge them and ser if it works.
Take a look
https://greasyfork.org/en/scripts/488031-bitcoindata-extension

I am not italian, but i clicked in your link and saw an italian website of the greasyfork ...

[mikel_012]

Other forum have other extension. They are built slightly differerently. I am going to update also the other one, by the way.
On a side note: why is that image Is in Italian? Mine is in English! Are you Italian? 🤌🏻🍕

It is because of your link in the thread

https://greasyfork.org/it/scripts/575401-bitcointalk-modern-theme

The it in the link will take to the italian version of greasyfork

[fillippone]

Blimey.
Thanks for making me aware of this glitch.
OP has been fixed.
Another step toward perfection.

[MisFoxie]

Another step toward perfection.

It's good that you are making your fav tool toward perfection. If you don't mind I would recommend you to remove the color picker. we can't make anything good from color picker instead it's better to keep those theme remove the color picker when you have time make more theme although the theme that are already available are enough.

Actually forum have 10+ different type of color combination with just two color picker it's almost impossible to make a good looking theme.

[fillippone]

NEW UPDATE!

v 4.06

Code:

* Restored Bitcointalk's native red, bold, and italic presentation for negative Trust feedback in both light and dark themes.
* Restored the classic Verdana typography specifically in received, untrusted, and sent Trust feedback tables without changing the rest of the modern theme.

A small update, but another inconsistency has been fixed.

[changaa]

NEW UPDATE!

v 4.06

Code:

* Restored Bitcointalk's native red, bold, and italic presentation for negative Trust feedback in both light and dark themes.
* Restored the classic Verdana typography specifically in received, untrusted, and sent Trust feedback tables without changing the rest of the modern theme.

A small update, but another inconsistency has been fixed.

Great job, Filippone! i started using it a while ago and is fantastic. At least for my eyes, i find it really relaxing because light colors really bother me.
I am not photophobic, but they do bother me.
I really like it. Could you also add some other things from other codes? So i don't have to include them all?

[fillippone]

Could you also add some other things from other codes? So i don't have to include them all?

Can you be a little bit more specific? Which kind of addition are you requesting?
Anyway, I would like to keep this theme a little bit more concentrated on the look of the forum ,without adding "external" functions.

[fillippone]

NEW UPDATE!

v 4.0.7
A refactored the whole project with a new, improved Junior Dev.

Code:

v4.0.7

***Added

 Added an always-on reduced-motion fallback that disables theme animations, transitions and smooth scrolling when requested by the operating system.

***Fixed

* Kept unsupported standalone topic-status images visible instead of hiding them without a replacement, and correctly resolved topic titles named exactly “New”.
* Removed the optional font stylesheet when switching to Balanced, Lite or OFF, and cleaned up the completed startup paint guard.
* Guaranteed WCAG AA contrast for generated accent labels and light-theme active navigation labels.
* Restored incremental updates for unread-PM counts and dynamically populated menu tabs.
* Added keyboard semantics, accessible names and visible focus treatment to standalone replacement controls, plus missing focus treatment for URL and number fields.

One small patch for Bitcointalk, one giant leap out of 2009 🚀

[fillippone]

NEW UPDATE!

v 4.0.9
I refactored the whole project with a new, improved Junior Dev, made the whole theme lighter to load, and made some aesthetic adjustments.

Code:

v4.0.9

- Slimmer desktop navigation bar, reduced from 34px to 26px.
- Preserved dividers, active states, unread-message indicator, and keyboard focus.
- Faster navigation styling by removing expensive CSS selectors.
- More efficient handling of dynamic page updates.
- Fewer repeated preference reads, reducing browser workload.
- Optimized topic and message action bars.
- New versioned local build with red version and LOCAL badges.
- Automatic consistency checks across source, public, and local builds.
- New regression tests covering Full, Balanced, and Lite modes, light and dark themes, and multiple viewport sizes.

“Slimmer on top, faster under the hood.”

[Royal Cap]

I actually really loved the this script, I mean the modern theme. It works great on desktop, but the problem is that when using it on mobile, it was a bit difficult to read due to the small font and access navigation menu.

So I modified the script a little to make browsing the forum on mobile more comfortable. Meaning, to make it mobile friendly, Although I had previously created a mobile friendly script for this forum, But implementing it into your script was quite a hassle. I didn't change much of your original code, just improved the mobile detection function a little and added some CSS for mobile at the end. (I took help from Gemini to write the code.)

Changes made to mobile view:

• Comfortable mobile font size: For easy reading on mobile, I adjusted the text sized.
• Full-width navigation: Fixed the top menu to fit the entire screen.
• Responsive images and tables: Prevented overflow on mobile screens.

Here is the Full Code Link

Below are the parts I have updated and added:

1. Automatic mobile detection update (shouldUseAutomaticMobilePerformance):

Code:

  function shouldUseAutomaticMobilePerformance() {
    const compactViewport = !!(
      window.matchMedia && window.matchMedia('(max-width: 820px)').matches
    );
    const compactScreen = !!(
      window.screen && Math.min(window.screen.width || Infinity, window.screen.height || Infinity) <= 820
    );
    const coarsePointer = !!(
      (window.matchMedia && window.matchMedia('(any-pointer: coarse)').matches) ||
      (navigator && navigator.maxTouchPoints > 0)
    );
    const mobileUA = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini|Mobile/i.test(
      (navigator && navigator.userAgent) || ''
    );
    return compactViewport || ((coarsePointer || mobileUA) && compactScreen) || (mobileUA && coarsePointer);
  }

2. Mobile view CSS (const css = added at the very end):

Code:

       INTEGRATED BITCOINTALK MOBILE VIEW
       Active whenever Mobile mode is enabled (Auto on mobile/compact screens,
       Balanced, or Lite) and the theme is ON.

    :root[data-bt-active="true"][data-bt-mobile-lite="true"] {
      --bt-fs-base: 18px;
      --bt-fs-small: 15px;
      --bt-fs-micro: 13px;
      --bt-fs-post: 20px;
      --bt-fs-pagelinks: 14px;
      --bt-fs-compose: 16px;
      --bt-lh-base: 1.5;
      --bt-lh-post: 1.6;
    }

    html[data-bt-active="true"][data-bt-mobile-lite="true"],
    html[data-bt-active="true"][data-bt-mobile-lite="true"] body {
      width: 100% !important;
      max-width: 100vw !important;
      overflow-x: hidden !important;
      margin: 0 !important;
      padding: 5px !important;
      box-sizing: border-box !important;
      font-size: 18px !important;
      line-height: 1.5 !important;
    }

    /* Base Typography for Mobile (18px, strictly excluding switcher UI and signatures) */
    html[data-bt-active="true"][data-bt-mobile-lite="true"]:not([data-bt-page="merit"]) body #bodyarea,
    html[data-bt-active="true"][data-bt-mobile-lite="true"]:not([data-bt-page="merit"]) body #content_section,
    html[data-bt-active="true"][data-bt-mobile-lite="true"]:not([data-bt-page="merit"]) body #main_content_section,
    html[data-bt-active="true"][data-bt-mobile-lite="true"]:not([data-bt-page="merit"]) body p:not(#bt-switcher *):not(.signature):not(.signature *),
    html[data-bt-active="true"][data-bt-mobile-lite="true"]:not([data-bt-page="merit"]) body div:not(#bt-switcher):not(#bt-switcher *):not(.post):not(.personalmessage):not(.quote):not(.code):not(.quoteheader):not(.codeheader):not(.smalltext):not(.middletext):not(.signature):not(.signature *),
    html[data-bt-active="true"][data-bt-mobile-lite="true"]:not([data-bt-page="merit"]) body span:not(#bt-switcher *):not(.smalltext):not(.middletext):not(.prevnext):not(.bt-bbc-icon):not(.bt-topic-icon):not(.bt-smiley):not(.bt-post-action):not(.signature):not(.signature *),
    html[data-bt-active="true"][data-bt-mobile-lite="true"]:not([data-bt-page="merit"]) body td:not(.post):not(.personalmessage):not(.smalltext):not(.middletext):not(.poster_info):not(.signature):not(.signature *),
    html[data-bt-active="true"][data-bt-mobile-lite="true"]:not([data-bt-page="merit"]) body th:not(.signature):not(.signature *),
    html[data-bt-active="true"][data-bt-mobile-lite="true"]:not([data-bt-page="merit"]) body a:not(#bt-switcher *):not(.bt-post-action):not(.poster_info *):not(.signature):not(.signature *) {
      font-size: 18px !important;
      line-height: 1.5 !important;
    }

    /* Link readability on mobile (underline standard links, keep buttons/tabs/signatures clean) */
    html[data-bt-active="true"][data-bt-mobile-lite="true"] body a:link:not(.nav):not(.bt-post-action):not(.button):not([class*="button"]):not(#bt-switcher *):not(.signature):not(.signature *),
    html[data-bt-active="true"][data-bt-mobile-lite="true"] body a:visited:not(.nav):not(.bt-post-action):not(.button):not([class*="button"]):not(#bt-switcher *):not(.signature):not(.signature *) {
      text-decoration: underline !important;
    }

    html[data-bt-active="true"][data-bt-mobile-lite="true"] body [class*="maintab_"] a,
    html[data-bt-active="true"][data-bt-mobile-lite="true"] body [class*="mirrortab_"] a,
    html[data-bt-active="true"][data-bt-mobile-lite="true"] body #main_menu a,
    html[data-bt-active="true"][data-bt-mobile-lite="true"] body .dropmenu a,
    html[data-bt-active="true"][data-bt-mobile-lite="true"] body .nav,
    html[data-bt-active="true"][data-bt-mobile-lite="true"] body .nav a,
    html[data-bt-active="true"][data-bt-mobile-lite="true"] body a:hover {
      text-decoration: none !important;
    }

    /* Main Post Text Sizing (20px) */
    html[data-bt-active="true"][data-bt-mobile-lite="true"]:not([data-bt-page="merit"]) body .post,
    html[data-bt-active="true"][data-bt-mobile-lite="true"]:not([data-bt-page="merit"]) body td.post,
    html[data-bt-active="true"][data-bt-mobile-lite="true"]:not([data-bt-page="merit"]) body .personalmessage,
    html[data-bt-active="true"][data-bt-mobile-lite="true"]:not([data-bt-page="merit"]) body td.personalmessage,
    html[data-bt-active="true"][data-bt-mobile-lite="true"]:not([data-bt-page="merit"]) body #preview_body,
    html[data-bt-active="true"][data-bt-mobile-lite="true"]:not([data-bt-page="merit"]) body #preview_section,
    html[data-bt-active="true"][data-bt-mobile-lite="true"]:not([data-bt-page="merit"]) body #preview_section td,
    html[data-bt-active="true"][data-bt-mobile-lite="true"]:not([data-bt-page="merit"]) body .post > div:not(.quote):not(.code):not(.quoteheader):not(.codeheader):not(.signature),
    html[data-bt-active="true"][data-bt-mobile-lite="true"]:not([data-bt-page="merit"]) body .post > td:not(.signature),
    html[data-bt-active="true"][data-bt-mobile-lite="true"]:not([data-bt-page="merit"]) body .post td:not(.signature):not(.signature *),
    html[data-bt-active="true"][data-bt-mobile-lite="true"]:not([data-bt-page="merit"]) body .post span:not(.bt-smiley):not(.bt-post-action):not(.signature):not(.signature *),
    html[data-bt-active="true"][data-bt-mobile-lite="true"]:not([data-bt-page="merit"]) body .post a:not(.bt-post-action):not(.signature):not(.signature *) {
      font-size: 20px !important;
      line-height: 1.6 !important;
    }

    html[data-bt-active="true"][data-bt-mobile-lite="true"]:not([data-bt-page="merit"]) body .post h4,
    html[data-bt-active="true"][data-bt-mobile-lite="true"]:not([data-bt-page="merit"]) body .post h5 {
      font-size: 22px !important;
      font-weight: bold !important;
      line-height: 1.4 !important;
    }

    /* Quotes and Code Blocks (17px, theme-aware borders) */
    html[data-bt-active="true"][data-bt-mobile-lite="true"]:not([data-bt-page="merit"]) body .quote,
    html[data-bt-active="true"][data-bt-mobile-lite="true"]:not([data-bt-page="merit"]) body .quote p,
    html[data-bt-active="true"][data-bt-mobile-lite="true"]:not([data-bt-page="merit"]) body .quote div:not(.quoteheader):not(.codeheader),
    html[data-bt-active="true"][data-bt-mobile-lite="true"]:not([data-bt-page="merit"]) body .quote span:not(.bt-smiley),
    html[data-bt-active="true"][data-bt-mobile-lite="true"]:not([data-bt-page="merit"]) body .quote td,
    html[data-bt-active="true"][data-bt-mobile-lite="true"]:not([data-bt-page="merit"]) body .quote a,
    html[data-bt-active="true"][data-bt-mobile-lite="true"]:not([data-bt-page="merit"]) body .code,
    html[data-bt-active="true"][data-bt-mobile-lite="true"]:not([data-bt-page="merit"]) body .code span,
    html[data-bt-active="true"][data-bt-mobile-lite="true"]:not([data-bt-page="merit"]) body .code a {
      font-size: 17px !important;
      line-height: 1.4 !important;
    }

    html[data-bt-active="true"][data-bt-mobile-lite="true"]:not([data-bt-page="merit"]) body .quote,
    html[data-bt-active="true"][data-bt-mobile-lite="true"]:not([data-bt-page="merit"]) body .code {
      border: 1px solid var(--bt-border-2) !important;
      padding: 8px !important;
      margin: 6px 0 !important;
    }

    html[data-bt-active="true"][data-bt-mobile-lite="true"]:not([data-bt-page="merit"]) body .quote {
      border-left: 3px solid var(--bt-accent) !important;
    }

    html[data-bt-active="true"][data-bt-mobile-lite="true"]:not([data-bt-page="merit"]) body .quoteheader,
    html[data-bt-active="true"][data-bt-mobile-lite="true"]:not([data-bt-page="merit"]) body .quoteheader a,
    html[data-bt-active="true"][data-bt-mobile-lite="true"]:not([data-bt-page="merit"]) body .codeheader {
      font-size: 14px !important;
      line-height: 1.35 !important;
    }

    /* Smalltext & Poster Metadata (15px, strictly excluding .signature and its children!) */
    html[data-bt-active="true"][data-bt-mobile-lite="true"]:not([data-bt-page="merit"]) body .smalltext:not(.signature):not(.signature *),
    html[data-bt-active="true"][data-bt-mobile-lite="true"]:not([data-bt-page="merit"]) body .smalltext span:not(.bt-topic-icon):not(.bt-post-action):not(.signature):not(.signature *),
    html[data-bt-active="true"][data-bt-mobile-lite="true"]:not([data-bt-page="merit"]) body .smalltext a:not(.bt-post-action):not(.signature):not(.signature *),
    html[data-bt-active="true"][data-bt-mobile-lite="true"]:not([data-bt-page="merit"]) body .middletext:not(.signature):not(.signature *),
    html[data-bt-active="true"][data-bt-mobile-lite="true"]:not([data-bt-page="merit"]) body .small_header,
    html[data-bt-active="true"][data-bt-mobile-lite="true"]:not([data-bt-page="merit"]) body .lastpostcol,
    html[data-bt-active="true"][data-bt-mobile-lite="true"]:not([data-bt-page="merit"]) body .lastpostcol a,
    html[data-bt-active="true"][data-bt-mobile-lite="true"]:not([data-bt-page="merit"]) body .poster_info,
    html[data-bt-active="true"][data-bt-mobile-lite="true"]:not([data-bt-page="merit"]) body td.poster_info,
    html[data-bt-active="true"][data-bt-mobile-lite="true"]:not([data-bt-page="merit"]) body .poster_info a,
    html[data-bt-active="true"][data-bt-mobile-lite="true"]:not([data-bt-page="merit"]) body .poster ul,
    html[data-bt-active="true"][data-bt-mobile-lite="true"]:not([data-bt-page="merit"]) body .poster li {
      font-size: 15px !important;
      line-height: 1.4 !important;
    }

    /* Navigation, Headers, and Prev/Next */
    html[data-bt-active="true"][data-bt-mobile-lite="true"] body .nav,
    html[data-bt-active="true"][data-bt-mobile-lite="true"] body div.nav.nav,
    html[data-bt-active="true"][data-bt-mobile-lite="true"] body div.nav.nav *,
    html[data-bt-active="true"][data-bt-mobile-lite="true"] body .navigate_section.navigate_section,
    html[data-bt-active="true"][data-bt-mobile-lite="true"] body .navigate_section.navigate_section *,
    html[data-bt-active="true"][data-bt-mobile-lite="true"] body td.middletext .nav,
    html[data-bt-active="true"][data-bt-mobile-lite="true"] body td.middletext .nav *,
    html[data-bt-active="true"][data-bt-mobile-lite="true"] body #header,
    html[data-bt-active="true"][data-bt-mobile-lite="true"] body #footer {
      font-size: 18px !important;
      line-height: 1.45 !important;
      width: 100% !important;
    }

    html[data-bt-active="true"][data-bt-mobile-lite="true"] body span.prevnext a:link,
    html[data-bt-active="true"][data-bt-mobile-lite="true"] body span.prevnext a:visited {
      font-size: 22px !important;
    }

    /* Full-width Main Navigation Menu on Mobile (HOME | HELP | SEARCH | PROFILE | MY MESSAGES | MEMBERS | MORE | LOGOUT) */
    html[data-bt-active="true"][data-bt-mobile-lite="true"] body table:not(.bt-topic-action-bar):has(td[class*="maintab_"]) {
      display: table !important;
      width: 100% !important;
      max-width: 100% !important;
      margin-left: 0 !important;
      margin-right: 0 !important;
      border-collapse: collapse !important;
      table-layout: auto !important;
    }

    html[data-bt-active="true"][data-bt-mobile-lite="true"] body table:not(.bt-topic-action-bar):has(td[class*="maintab_"]) > tbody {
      display: table-row-group !important;
      width: 100% !important;
    }

    html[data-bt-active="true"][data-bt-mobile-lite="true"] body table:not(.bt-topic-action-bar):has(td[class*="maintab_"]) > tbody > tr {
      display: table-row !important;
      width: 100% !important;
    }

    html[data-bt-active="true"][data-bt-mobile-lite="true"] body td.maintab_first:not(.bt-topic-action-cell),
    html[data-bt-active="true"][data-bt-mobile-lite="true"] body td.maintab_last:not(.bt-topic-action-cell),
    html[data-bt-active="true"][data-bt-mobile-lite="true"] body td.maintab_active_first:not(.bt-topic-action-cell),
    html[data-bt-active="true"][data-bt-mobile-lite="true"] body td.maintab_active_last:not(.bt-topic-action-cell) {
      display: none !important;
    }

    html[data-bt-active="true"][data-bt-mobile-lite="true"] body td.maintab_back:not(.bt-topic-action-cell),
    html[data-bt-active="true"][data-bt-mobile-lite="true"] body td.maintab_active_back:not(.bt-topic-action-cell) {
      display: table-cell !important;
      width: auto !important;
      text-align: center !important;
      vertical-align: middle !important;
      border: 1px solid var(--bt-border-2) !important;
      border-radius: 0 !important;
    }

    html[data-bt-active="true"][data-bt-mobile-lite="true"] body td.maintab_back:not(.bt-topic-action-cell) > a,
    html[data-bt-active="true"][data-bt-mobile-lite="true"] body td.maintab_active_back:not(.bt-topic-action-cell) > a {
      display: block !important;
      width: 100% !important;
      box-sizing: border-box !important;
      text-align: center !important;
      padding: 8px 6px !important;
      font-size: 16px !important;
      white-space: nowrap !important;
    }

    /* Layout & Controls */
    html[data-bt-active="true"][data-bt-mobile-lite="true"] body table:not(.signature table):not(.bt-topic-action-bar) {
      width: 100% !important;
      max-width: 100% !important;
      box-sizing: border-box !important;
    }

    html[data-bt-active="true"][data-bt-mobile-lite="true"] body table.bt-topic-action-bar {
      max-width: 100% !important;
      white-space: normal !important;
    }

    html[data-bt-active="true"][data-bt-mobile-lite="true"] body td:not(.signature td) {
      word-wrap: break-word !important;
      overflow-wrap: break-word !important;
      max-width: 100% !important;
    }

    html[data-bt-active="true"][data-bt-mobile-lite="true"] body input:not([type="color"]):not([type="checkbox"]):not([type="radio"]),
    html[data-bt-active="true"][data-bt-mobile-lite="true"] body textarea,
    html[data-bt-active="true"][data-bt-mobile-lite="true"] body select {
      border: 1px solid var(--bt-border-2) !important;
      font-size: 16px !important;
      padding: 6px !important;
    }

    html[data-bt-active="true"][data-bt-mobile-lite="true"] body textarea {
      font-family: var(--bt-font), verdana, sans-serif !important;
      width: 95% !important;
      max-width: 100% !important;
      box-sizing: border-box !important;
    }

    /* Image Sizing Fixes */
    html[data-bt-active="true"][data-bt-mobile-lite="true"] body img[src*="buttons"],
    html[data-bt-active="true"][data-bt-mobile-lite="true"] body img[src*="smiley"],
    html[data-bt-active="true"][data-bt-mobile-lite="true"] body img[src*="Smileys"],
    html[data-bt-active="true"][data-bt-mobile-lite="true"] body img[src*="icons"] {
      max-width: none !important;
      height: auto !important;
    }

    html[data-bt-active="true"][data-bt-mobile-lite="true"] body .post img:not(.signature img):not([data-bt-replaced="1"]):not([data-bt-smiley="1"]):not(.smiley):not([src*="Smileys/"]):not([src*="/smileys/"]):not([src*="buttons"]):not([src*="icons"]) {
      max-width: 80% !important;
      max-height: 350px !important;
      width: auto !important;
      height: auto !important;
      display: block !important;
      margin: 8px 0 !important;
      object-fit: contain !important;
    }

    /* Signature Preservation (100% faithful BBCode sizing, alignment, and smooth horizontal scroll) */
    html[data-bt-active="true"][data-bt-mobile-lite="true"] body .signature,
    html[data-bt-active="true"][data-bt-mobile-lite="true"] body td.signature,
    html[data-bt-active="true"][data-bt-mobile-lite="true"] body div.signature {
      display: block !important;
      width: 100% !important;
      max-width: 100% !important;
      overflow-x: auto !important;
      overflow-y: hidden !important;
      -webkit-overflow-scrolling: touch !important;
      margin-top: 10px !important;
      padding-top: 6px !important;
      padding-bottom: 4px !important;
      border-top: 1px solid var(--bt-border) !important;
      color: var(--bt-text-3) !important;
      background: transparent !important;
      font-size: 11px !important;
      line-height: 1.3em !important;
      white-space: normal !important;
      box-sizing: border-box !important;
    }

    html[data-bt-active="true"][data-bt-mobile-lite="true"] body table.bordercolor .signature table,
    html[data-bt-active="true"][data-bt-mobile-lite="true"] body .tborder .signature table,
    html[data-bt-active="true"][data-bt-mobile-lite="true"] body .signature table {
      width: max-content !important;
      max-width: none !important;
      table-layout: auto !important;
      border-collapse: separate !important;
      border-spacing: 0 !important;
      background: transparent !important;
      border: none !important;
      box-shadow: none !important;
      font-size: inherit !important;
      line-height: inherit !important;
      white-space: normal !important;
    }

    html[data-bt-active="true"][data-bt-mobile-lite="true"] body table.bordercolor .signature tbody,
    html[data-bt-active="true"][data-bt-mobile-lite="true"] body table.bordercolor .signature tr,
    html[data-bt-active="true"][data-bt-mobile-lite="true"] body .signature tbody,
    html[data-bt-active="true"][data-bt-mobile-lite="true"] body .signature tr {
      font-size: inherit !important;
      line-height: inherit !important;
      white-space: normal !important;
      background: transparent !important;
    }

    html[data-bt-active="true"][data-bt-mobile-lite="true"] body table.bordercolor .signature td,
    html[data-bt-active="true"][data-bt-mobile-lite="true"] body .tborder .signature td,
    html[data-bt-active="true"][data-bt-mobile-lite="true"] body [class*="windowbg"] .signature td,
    html[data-bt-active="true"][data-bt-mobile-lite="true"] body .signature td {
      width: auto !important;
      max-width: none !important;
      padding: 0 2px !important;
      vertical-align: top !important;
      font-size: inherit !important;
      line-height: inherit !important;
      word-wrap: normal !important;
      overflow-wrap: normal !important;
      white-space: nowrap !important;
      background: transparent !important;
      border: none !important;
    }

    html[data-bt-active="true"][data-bt-mobile-lite="true"] body .signature img {
      max-width: none !important;
      height: auto !important;
      display: inline-block !important;
    }

    /* Keep Theme Switcher UI compact on mobile */
    html[data-bt-active="true"][data-bt-mobile-lite="true"] body #bt-switcher {
      font-size: 13px !important;
      line-height: 1 !important;
    }

Here is the differences :

BEFORE	AFTER

[fillippone]

I actually really loved the this script, I mean the modern theme. It works great on desktop, but the problem is that when using it on mobile, it was a bit difficult to read due to the small font and access navigation menu.
<...>

Thank you vey much for the addition!
I will feed your improvement to my junior developer to see what he will build with it!