Add a horizontal scrollbar to the div container of multi programming language Code
// ==UserScript==
// @name LeetCode显示的多编程语言代码区域增加水平滚动条
// @name:zh-TW LeetCode顯示的多程式設計語言程式碼區域新增水准滾動條
// @name:en LeetCode Horizontal Scroll for Multi Programming Language Code Div Container
// @namespace http://tampermonkey.net/
// @version 0.2.2
// @description:en Add a horizontal scrollbar to the div container of multi programming language Code
// @description:zh-tw 在多程式設計語言Code的div容器中添加一個水准滾動條
// @description Add a horizontal scrollbar to the div container of multi programming language Code
// @author aspen138
// @match https://leetcode.cn/*
// @match https://leetcode.com/*
// @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);
})();