☰

Figma Layer Panel Horizontal Scroll Fix

Improves horizontal scrolling in Figma's layer panel

  1. // ==UserScript==
  2. // @name         Figma Layer Panel Horizontal Scroll Fix
  3. // @name:zh-TW   Figma 圖層面板水平捲動修復
  4. // @author       gstar
  5. // @license      MIT
  6. // @namespace    https://github.com/gstar175/
  7. // @version      0.0.1
  8. // @description  Improves horizontal scrolling in Figma's layer panel
  9. // @description:zh-TW  改善 Figma 圖層面板的水平捲動功能
  10. // @match        https://www.figma.com/design/*
  11. // @grant        none
  12. // ==/UserScript==
  13.  
  14. (function() {
  15.   'use strict';
  16.  
  17.   // 創建樣式元素
  18.   const style = document.createElement('style');
  19.   style.textContent = `
  20.       [class^="pages_panel--objectPanelContent"] [class^="scroll_container--scrollContainer"] {
  21.           overflow-x: scroll !important;
  22.       }
  23.       [class^="pages_panel--objectPanelContent"] [class^="objects_panel--rowContainer"] [data-testid="layer-row"], 
  24.       [class^="pages_panel--objectPanelContent"] [class^="objects_panel--rowContainer"] [data-testid="layer-row-with-children"] {
  25.           min-width: fit-content;
  26.       }
  27.       [class^="pages_panel--objectPanelContent"] [class^="objects_panel--rowContainer"] [class^="object_row--rowText"] {
  28.           width: auto !important;
  29.           min-width: fit-content;
  30.       }
  31.       [class^="pages_panel--objectPanelContent"] [class^="objects_panel--rowContainer"] [class^="object_row--rowName"] {
  32.           min-width: fit-content;
  33.       }
  34.       [class^="pages_panel--objectPanelContent"] [class^="objects_panel--rowContainer"] [class^="object_row--row"] input[type="text"] {
  35.           width: auto !important;
  36.           min-width: fit-content;
  37.       }
  38.       [class^="pages_panel--objectPanelContent"] [class^="objects_panel--rowContainer"] [class^="object_row--rowActions"] {
  39.           position: sticky;
  40.           right: 0;
  41.           padding-left: 0.25rem;
  42.           background-color: var(--color-bg, #fff);
  43.       }
  44.       [class^="pages_panel--objectPanelContent"] [class^="objects_panel--rowContainer"] [class^="object_row--row"][class*="selected"] [class^="object_row--rowActions"] {
  45.           background-color: var(--color-bg-selected, #daebf7);
  46.       }
  47.       [class^="pages_panel--objectPanelContent"] [class^="objects_panel--rowContainer"] [class^="object_row--row"][class*="parentSelected"] [class^="object_row--rowActions"] {
  48.           background-color: var(--color-bg-selected-secondary, #edf5fa);
  49.       }
  50.   `;
  51.  
  52.   // 將樣式添加到文檔頭部
  53.   document.head.appendChild(style);
  54. })();