☰

LeetCode显示的多编程语言代码区域增加水平滚动条

Add a horizontal scrollbar to the div container of multi programming language Code

Verze ze dne 18. 08. 2024. Zobrazit nejnovější verzi.

  1. // ==UserScript==
  2. // @name         LeetCode显示的多编程语言代码区域增加水平滚动条
  3. // @name:zh-TW   LeetCode顯示的多程式設計語言程式碼區域新增水准滾動條
  4. // @name:en      LeetCode Horizontal Scroll for Multi Programming Language Code Div Container
  5. // @namespace    http://tampermonkey.net/
  6. // @version      0.2.3
  7. // @description:en Add a horizontal scrollbar to the div container of multi programming language Code
  8. // @description:zh-tw 在多程式設計語言Code的div容器中添加一個水准滾動條
  9. // @description  Add a horizontal scrollbar to the div container of multi programming language Code
  10. // @author       aspen138
  11. // @match        https://leetcode.cn/*
  12. // @match        https://leetcode.com/*
  13. // @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
  14. // @grant        none
  15. // @license      MIT
  16. // ==/UserScript==
  17.  
  18.  
  19.  
  20.  
  21. (function() {
  22.     'use strict';
  23.  
  24.     // Add your JavaScript code here
  25.     var css = `
  26.         .flex.select-none.bg-layer-2:not(.dark) {
  27.             overflow-x: auto; /* Trigger horizontal scrolling */
  28.             display: flex; /* Ensure the items are in a flex row */
  29.             white-space: nowrap; /* Prevent wrapping of items */
  30.         }
  31.         .flex.select-none.bg-layer-2:not(.dark) > div {
  32.             flex: 0 0 auto; /* Prevent flex items from shrinking */
  33.             display: inline-block; /* Treat each div as an inline block */
  34.         }
  35.         /* Styles for dark mode */
  36.         .flex.select-none.bg-layer-2.dark.bg-dark-layer-2 {
  37.             overflow-x: auto; /* Trigger horizontal scrolling for dark mode */
  38.             display: flex; /* Ensure the items are in a flex row for dark mode */
  39.             white-space: nowrap; /* Prevent wrapping of items for dark mode */
  40.         }
  41.         .flex.select-none.bg-layer-2.dark.bg-dark-layer-2 > div {
  42.             flex: 0 0 auto; /* Prevent flex items from shrinking in dark mode */
  43.             display: inline-block; /* Treat each div as an inline block in dark mode */
  44.         }
  45.     `;
  46.  
  47.     // Create a style element
  48.     var style = document.createElement('style');
  49.     style.type = 'text/css';
  50.     style.appendChild(document.createTextNode(css));
  51.     document.head.appendChild(style);
  52. })();