Add a horizontal scrollbar to the div container of multi programming language Code
As of
// ==UserScript==
// @name LeetCode Horizontal Scroll for Multi Language Code
// @name:ar LeetCode شريط تمرير أفقي لأكواد متعددة اللغات
// @name:bg LeetCode Хоризонтален скрол за код на мн. езици
// @name:cs LeetCode Horizontální posuvník pro kód více jazyků
// @name:da LeetCode Vandret rullebjælke til fler-sprog kode
// @name:de LeetCode Horizontale Leiste für Mehrsprach-Code
// @name:el LeetCode Οριζόντια κύλιση για κώδικα πολλών γλωσσών
// @name:en LeetCode Horizontal Scroll for Multi Language Code
// @name:eo LeetCode Horizontala Rulŝtango por Plurlingva Kodo
// @name:es LeetCode Barra horizontal para código multilenguaje
// @name:fi LeetCode Vaakavvieritys monikieliselle koodille
// @name:fr LeetCode Défilement horizontal pour code multilangue
// @name:fr-CA LeetCode Défilement horizontal pour code multi
// @name:he LeetCode גלילה אופקית לקוד רב-שפות
// @name:hr LeetCode Vodoravni klizač za višejezični kod
// @name:hu LeetCode Vízszintes görgető többnyelvű kódhoz
// @name:id LeetCode Gulir Horizontal untuk Kode Multibahasa
// @name:it LeetCode Barra orizzontale per codice multilingue
// @name:ja LeetCode マルチ言語コード用水平スクロール
// @name:ka LeetCode ჰორიზონტალური გადახვევა მრავალენოვანი
// @name:ko LeetCode 다중 언어 코드용 수평 스크롤
// @name:nb LeetCode Vannrett rullefelt for fler-språk kode
// @name:nl LeetCode Horizontale balk voor meertalige code
// @name:pl LeetCode Poziomy pasek dla kodu wielojęzycznego
// @name:pt-BR LeetCode Rolagem horizontal para código multi
// @name:ro LeetCode Bară orizontală pentru cod multilingv
// @name:ru LeetCode Горизонтальная прокрутка для кода мн. языков
// @name:sk LeetCode Horizontálny posuvník pre viacjazyčný kód
// @name:sr LeetCode Хоризонтални клизач за вишејезични код
// @name:sv LeetCode Horisontell rullning för flerspråkig kod
// @name:th LeetCode แถบเลื่อนแนวนอนสำหรับโค้ดหลายภาษา
// @name:tr LeetCode Yatay Kaydırma Çok Dilli Kod için
// @name:ug LeetCode يانتۇ سۈرگۈچ كۆپ تىللىق كود ئۈچۈن
// @name:uk LeetCode Горизонтальна прокрутка для коду мн. мов
// @name:vi LeetCode Thanh cuộn ngang cho mã đa ngôn ngữ
// @name:zh LeetCode 多语言代码水平滚动条
// @name:zh-CN LeetCode 多语言代码水平滚动条
// @name:zh-HK LeetCode 多語言程式碼水平滾動條
// @name:zh-SG LeetCode 多语言代码水平滚动条
// @name:zh-TW LeetCode 多語言程式碼區水平滾動條
// @description Add a horizontal scrollbar to the div container of multi programming language Code
// @description:ar إضافة شريط تمرير أفقي إلى حاوية div لأكواد البرمجة متعددة اللغات
// @description:bg Добавяне на хоризонтален скролбар към контейнера div с код на множество програмни езици
// @description:cs Přidat horizontální posuvník do kontejneru div s kódem ve více programovacích jazycích
// @description:da Tilføj en vandret rullebjælke til div-beholderen med kode i flere programmeringssprog
// @description:de Fügen Sie eine horizontale Bildlaufleiste zum div-Container mit Code in mehreren Programmiersprachen hinzu
// @description:el Προσθήκη οριζόντιας γραμμής κύλισης στον περιέκτη div κώδικα πολλαπλών γλωσσών προγραμματισμού
// @description:en Add a horizontal scrollbar to the div container of multi programming language Code
// @description:eo Aldonu horizontala rulŝtango al la div-ujo de plurlingva programa kodo
// @description:es Agregar una barra de desplazamiento horizontal al contenedor div de código en múltiples lenguajes de programación
// @description:fi Lisää vaakasuora vierityspalkki monikielisen ohjelmointikoodin div-säiliöön
// @description:fr Ajouter une barre de défilement horizontale au conteneur div de code en plusieurs langages de programmation
// @description:fr-CA Ajouter une barre de défilement horizontale au conteneur div de code en plusieurs langages de programmation
// @description:he הוסף גלילה אופקית למיכל ה-div של קוד בשפות תכנות מרובות
// @description:hr Dodaj vodoravni klizač u spremnik div koda u više programskih jezika
// @description:hu Adjon vízszintes görgetősávot a több programozási nyelvű kód div tárolójához
// @description:id Tambahkan bilah gulir horizontal ke kontainer div kode bahasa pemrograman ganda
// @description:it Aggiungi una barra di scorrimento orizzontale al contenitore div di codice in più linguaggi di programmazione
// @description:ja マルチプログラミング言語コードのdivコンテナに水平スクロールバーを追加する
// @description:ka დაამატეთ ჰორიზონტალური გადახვევის ზოლი მრავალი პროგრამირების ენის კოდის div კონტეინერს
// @description:ko 다중 프로그래밍 언어 코드의 div 컨테이너에 수평 스크롤바를 추가하세요
// @description:nb Legg til et vannrett rullefelt i div-beholderen med kode i flere programmeringsspråk
// @description:nl Voeg een horizontale schuifbalk toe aan de div-container met code in meerdere programmeertalen
// @description:pl Dodaj poziomy pasek przewijania do kontenera div z kodem w wielu językach programowania
// @description:pt-BR Adicione uma barra de rolagem horizontal ao contêiner div de código em várias linguagens de programação
// @description:ro Adăugați o bară de derulare orizontală la containerul div de cod în mai multe limbaje de programare
// @description:ru Добавить горизонтальную прокрутку к контейнеру div с кодом на нескольких языках программирования
// @description:sk Pridajte horizontálny posuvník do kontajnera div s kódom vo viacerých programovacích jazykoch
// @description:sr Додај хоризонтални клизач у контејнер div кода у више програмских језика
// @description:sv Lägg till en horisontell rullningslist i div-behållaren med kod för flera programmeringsspråk
// @description:th เพิ่มแถบเลื่อนแนวนอนให้กับคอนเทนเนอร์ div ของโค้ดหลายภาษาการเขียนโปรแกรม
// @description:tr Çoklu programlama dili kodunun div konteynerine yatay kaydırma çubuğu ekle
// @description:ug كۆپ تىللىق پروگرامما كودىنىڭ div قاچىسىغا يانتۇ سۈرگۈچ قوشۇڭ
// @description:uk Додайте горизонтальну прокрутку до контейнера div з кодом на кількох мовах програмування
// @description:vi Thêm thanh cuộn ngang vào vùng chứa div của mã code đa ngôn ngữ lập trình
// @description:zh 为多编程语言代码的div容器添加水平滚动条
// @description:zh-CN 为多编程语言代码的div容器添加水平滚动条
// @description:zh-HK 為多編程語言程式碼嘅div容器添加水平滾動條
// @description:zh-SG 为多编程语言代码的div容器添加水平滚动条
// @description:zh-tw 在多程式設計語言Code的div容器中添加一個水平滾動條
// @namespace http://tampermonkey.net/
// @version 0.2.3.1
// @author aspen138
// @match https://leetcode.cn/*
// @match https://leetcode.com/*
// @icon https://assets.leetcode.cn/aliyun-lc-upload/uploaded_files/2021/03/73c9f099-abbe-4d94-853f-f8abffd459cd/leetcode.png?x-oss-process=image%2Fformat%2Cwebp
// @grant none
// @license MIT
// ==/UserScript==
(function() {
'use strict';
// Add your JavaScript code here
var css = `
.flex.select-none.bg-layer-2:not(.dark) {
overflow-x: auto; /* Trigger horizontal scrolling */
display: flex; /* Ensure the items are in a flex row */
white-space: nowrap; /* Prevent wrapping of items */
}
.flex.select-none.bg-layer-2:not(.dark) > div {
flex: 0 0 auto; /* Prevent flex items from shrinking */
display: inline-block; /* Treat each div as an inline block */
}
/* Styles for dark mode */
.flex.select-none.bg-layer-2.dark.bg-dark-layer-2 {
overflow-x: auto; /* Trigger horizontal scrolling for dark mode */
display: flex; /* Ensure the items are in a flex row for dark mode */
white-space: nowrap; /* Prevent wrapping of items for dark mode */
}
.flex.select-none.bg-layer-2.dark.bg-dark-layer-2 > div {
flex: 0 0 auto; /* Prevent flex items from shrinking in dark mode */
display: inline-block; /* Treat each div as an inline block in dark mode */
}
`;
// Create a style element
var style = document.createElement('style');
style.type = 'text/css';
style.appendChild(document.createTextNode(css));
document.head.appendChild(style);
})();