请求编写Tampermonkey脚本修改Smartsheet今日时间线样式

Here's a targeted script that modifies only the specific today line you described, without affecting other elements:

// ==UserScript==
// @name         Smartsheet Timeline Today Line Customizer
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  Adjusts the today line in Smartsheet's timeline to 3px red dashed
// @author       You
// @match        https://app.smartsheet.com/*
// @grant        none
// ==/UserScript==

function customizeTodayLine() {
    // Targets the first direct child div of elements with class "clsGAW"
    const todayLine = document.querySelector('.clsGAW > div:first-child');
    
    if (todayLine) {
        // Override the line's style properties
        todayLine.style.borderLeft = '3px dashed red';
        // If the line uses border-right instead (adjust if needed):
        // todayLine.style.borderRight = '3px dashed red';
        
        // Optional: Ensure no leftover original styles
        todayLine.style.borderLeftColor = 'red';
        todayLine.style.borderLeftWidth = '3px';
        todayLine.style.borderLeftStyle = 'dashed';
    }
}

// Watch for dynamic content loading (Smartsheet loads elements asynchronously)
const observer = new MutationObserver(() => {
    customizeTodayLine();
});

// Start observing the entire document for changes
observer.observe(document.body, { childList: true, subtree: true });

// Run once immediately in case the element is already loaded
customizeTodayLine();

How It Works: #

• Precise Targeting: The selector .clsGAW > div:first-child ensures we only modify the first direct child div of elements with the clsGAW class, so no other elements are affected.
• Dynamic Content Handling: Uses MutationObserver to detect when the timeline (and today line) loads dynamically, which is common in Smartsheet.
• Style Overrides: Directly sets the border properties to replace the original 1px gray dashed line with your desired 3px red dashed style.

Installation Steps: #

1. Open Tampermonkey in your browser and create a new script.
2. Replace the default code with the script above.
3. Save the script and refresh your Smartsheet timeline page.

Note: If the line doesn't update, check if the original line uses border-right instead of border-left and adjust the script accordingly. You can inspect the element in your browser's dev tools to confirm the correct border property.

内容的提问来源于stack exchange，提问作者Fritz Borrego