From 49ce9a5ece19f5782ee482ccc6e249d5c6c24fea Mon Sep 17 00:00:00 2001 From: MaterArc <105017592+MaterArc@users.noreply.github.com> Date: Sat, 28 Dec 2024 12:21:39 -0500 Subject: [PATCH] Use `Attribute Selectors` to fix Dark Mode Refactor feature to utilize Attribute Selectors instead of hashed class names. Previously, the use of hashed class names led to issues as they became outdated, causing the feature to break. --- features/editor-dark-mode.js | 614 ++++++++++++++++++----------------- 1 file changed, 310 insertions(+), 304 deletions(-) diff --git a/features/editor-dark-mode.js b/features/editor-dark-mode.js index 0de48d63..01a11870 100644 --- a/features/editor-dark-mode.js +++ b/features/editor-dark-mode.js @@ -1,306 +1,312 @@ if ( - window.location.href.includes("https://scratch.mit.edu/projects/") && - window.location.href.includes("/editor") -) { - var style = document.createElement("style"); - style.id = "scratchtoolseditor"; - style.innerHTML = ` -/* 3.Darker CSS. -Built by infinitytec. -Version 1.8. -*/ - - -/*3.0 Theme Userscript Framework by infinitytec. Released under the MIT license.*/ -/*Set colors for the editor. Names should explain what they are. They will automatically be applied to different parts of the editor. For the purpose of simplification, the red cancel button and the hover/active/focus effects are hard-coded. The effects use filters so they should be good-to-go in most cases.*/ -:root { - --main-bg: #111111; - --secondary-bg: #151515; - --accent: #202020; - --text: #bfbfbf; - --editorDarkMode-primary-text: #ffffff; -} - -/*Main UI bar, similar bars, and dropdown menu*/ -.menu-bar_main-menu_3wjWH, -.modal_header_1h7ps, -.menu-bar_account-info-group_MeJZP, -.menu_menu_3k7QT, -.project-title-input_title-field_en5Gd:focus { - background: var(--accent); -} - -/*Main background*/ -.gui_body-wrapper_-N0sA, -.blocklySvg { - background: var(--main-bg); -} - -/*Scripting area background*/ -.blocklyMainBackground { - fill: var(--secondary-bg) !important; -} - -/*Right-click & pop-ups*/ -.context-menu_context-menu_2SJM-, -.blocklyWidgetDiv .goog-menu, -.Popover-body { - background: var(--accent) !important; - color: var(--text) !important; - border: 1px solid white; -} - -.goog-menuitem-content, -.color-picker_row-header_173LQ { - color: var(--text); -} - -/*Highlight*/ -.blocklyWidgetDiv .goog-menuitem-highlight, -.blocklyWidgetDiv .goog-menuitem-hover, -.context-menu_menu-item_3cioN:hover { - background-color: #ffffff33 !important; -} - -/*Palette*/ -.blocklyFlyoutBackground { - fill: var(--accent) !important; -} - -/*Palette text*/ -.blocklyFlyoutLabelText { - fill: var(--text) !important; -} - -/*Toolbox, extension connection box*/ -.connection-modal_bottom-area_AHeQ3, -.connection-modal_body_3YO9j, -.blocklyToolboxDiv, -.scratchCategoryMenu { - background: var(--accent); - color: var(--text); -} - -/*Selected category*/ -.scratchCategoryMenuItem.categorySelected { - background: #ffffff22; -} - -/*Sprite and stage selection area*/ -.sprite-selector_sprite-selector_2KgCX, -.stage-selector_stage-selector_3oWOr, -.stage-selector_label_1MCfr, -.stage-selector_count_2QK7D { - background: var(--accent); - color: var(--text); -} - -.sprite-info_sprite-info_3EyZh, -.stage-selector_header_2GVr1, -.stage-selector_header-title_33xCt, -.stage-selector_header-title_33xCt, -.sprite-selector-item_sprite-selector-item_kQm-i:hover { - background: var(--secondary-bg); - color: var(--text); -} - -/*Palette Buttons*/ -.blocklyFlyoutButtonBackground { - fill: var(--accent) !important; -} - -.blocklyFlyoutButtonBackground:hover, -.blocklyFlyoutButton:hover { - fill: var(--accent) !important; - filter: brightness(110%) !important; -} - -blocklyFlyoutButton>text.blocklyText { - fill: var(--text) !important; -} - -/*Text fill of "Make A" buttons*/ -.blocklyFlyoutButton .blocklyText { - fill: var(--text) !important; -} - -/*Backpack header*/ -.backpack_backpack-header_6ltCS { - background: var(--accent); - color: var(--text); -} - -/*Backpack*/ -.backpack_backpack-list-inner_10a2A { - background: var(--secondary-bg); -} - -.backpack_backpack-item_hwqzQ, -.sprite-selector-item_sprite-image-outer_Xs0wN, -.backpack_backpack-item_hwqzQ>div { - background: var(--main-bg); -} - -.backpack_backpack-item_hwqzQ img { - mix-blend-mode: normal; -} - -/*Paint & sound editor sidebar*/ -.selector_list-area_1Xbj_ { - background: var(--accent); -} - -.selector_new-buttons_2qHDd::before { - background: none; -} - -/*Paint & sound editor main*/ -.asset-panel_wrapper_366X0 { - background: var(--secondary-bg); - color: var(--text); -} - -.sound-editor_effect-button_2zuzT, -.sound-editor_trim-button_lSENI { - color: var(--text); -} - -/*Paint and sound editor buttons*/ -img.tool-select-base_tool-select-icon_tJ-rr, -.sound-editor_trim-button_lSENI { - filter: brightness(2); -} - -/*Sprite costume selector text*/ -.selector_list-item_3N_u7, -.sprite-selector-item_sprite-name_1PXjh, -.sprite-selector-item_sprite-details_2UVpA { - color: var(--text); -} - -/*Tabs*/ -.gui_tab_27Unf.gui_is-selected_sHAiu { - background: var(--accent); - color: var(--text); -} - -.gui_tab_27Unf { - background: var(--secondary-bg); - color: var(--text); -} - -.gui_tab_27Unf:hover { - background: var(--accent); - filter: brightness(90%); - color: var(--text); -} - -/*New variable/list/custom block*/ -.prompt_body_18Z-I, -.custom-procedures_body_SQBv6, -div.custom-procedures_option-card_BtHt3 { - background: var(--accent); - color: var(--text); -} - -.custom-procedures_button-row_2jBu3>button:nth-child(1), -.prompt_button-row_3Wc5Z>button:nth-child(1), -.prompt_button-row_3Wc5Z>button:nth-child(1) { - background: #ff3a5b; -} - -/*Fullscreen view*/ -.stage_stage-wrapper-overlay_fmZuD, -.stage-header_stage-header-wrapper-overlay_5vfJa { - background: black; -} - -.stage_stage-overlay-content_ePv_6 { - border: none; -} - -/*Library and card backgrounds*/ -.library_library-scroll-grid_1jyXm, -.modal_modal-content_1h3ll.modal_full-screen_FA4cr, -.card_step-body_2bFkf, -.card_left-card_1KpEh, -.card_right-card_3IrbD { - background: var(--accent); - color: var(--text); -} - -/*Library items & filter bar*/ -.library-item_library-item-extension_3xus9, -.library-item_library-item_1DcMO, -.library_filter-bar_1W0DW { - background: var(--accent); -} - -.library-item_library-item-extension_3xus9 span, -.library-item_featured-extension-metadata_3D8E8, -.library-item_library-item-name_2qMXu { - color: var(--text) !important; -} - -/*Text input*/ -input[type=text], -.input_input-form_1Y0wX, -.prompt_variable-name-text-input_1iu8- { - background: var(--accent); - color: var(--text) !important; -} - -input[type=text]:hover, -input[type=text]:focus { - background: var(--accent); - filter: brightness(90%); -} - -/*Buttons (inverted for dark theme)*/ -.blocklyZoom, -.stage-header_stage-button_hkl9B, -.sound-editor_round-button_3NLcW, -.sound-editor_button-group_SFPoV { - filter: invert(100) hue-rotate(180deg); -} - -/*Set the selected costume/backdrop to have a transparent background as default*/ -.sprite-selector-item_is-selected_24tQj { - background: transparent !important; -} - -/*Fixing white area around the paint editor*/ -.paint-editor_canvas-container_x2D0a { - border: 1px solid var(--accent); - overflow: hidden; -} - -/*Tweaks for updated paint editor*/ -.paper-canvas_paper-canvas_1y588 { - background-color: var(--secondary-bg); - border-radius: .4rem; -} - -.paint-editor_canvas-container_x2D0a { - border: 2px solid var(--accent); - border-radius: .4rem; -} - -/*Tweaks for users not signed in*/ -.card_card_3GG7C, -.card_left-card_1KpEh, -.card_right-card_3IrbD { - border: 1px solid hsla(216, 49%, 90%, 0.14); -} - -/*Scrollbar*/ -.blocklyScrollbarHandle { - fill: #CECDCE55; -} -`; - document.body.appendChild(style); -} else { - if (document.querySelector("style#scratchtoolseditor") !== null) { - document.querySelector("style#scratchtoolseditor").remove(); + window.location.href.includes("https://scratch.mit.edu/projects/") && + window.location.href.includes("/editor") + ) { + var style = document.createElement("style"); + style.id = "scratchtoolseditor"; + style.innerHTML = ` + /* 3.Darker CSS. + Built by infinitytec. + Version 1.8. */ + + /*3.0 Theme Userscript Framework by infinitytec. Released under the MIT license.*/ + /*Set colors for the editor. Names should explain what they are. They will automatically be applied to different parts of the editor. + For the purpose of simplification, the red cancel button and the hover/active/focus effects are hard-coded. The effects use filters so they should be good-to-go in most cases.*/ + + :root { + --main-bg: #111111; + --secondary-bg: #151515; + --accent: #202020; + --text: #bfbfbf; + --editorDarkMode-primary-text: #ffffff; + } + + /*Main UI bar, similar bars, and dropdown menu*/ + [class^="menu-bar_main-menu_"], + [class^="modal_header_"], + [class^="menu-bar_account-info-group_"], + [class^="menu_menu_"], + [class^="project-title-input_title-field_"]:focus { + background: var(--accent); + } + + /*Main background*/ + [class^="gui_body-wrapper_"], + [class^="blocklySvg"] { + background: var(--main-bg); + } + + /*Scripting area background*/ + [class^="blocklyMainBackground"] { + fill: var(--secondary-bg) !important; + } + + /*Right-click & pop-ups*/ + [class^="context-menu_context-menu_"], + [class^="blocklyWidgetDiv .goog-menu"], + [class^="Popover-body"] { + background: var(--accent) !important; + color: var(--text) !important; + border: 1px solid white; + } + + [class^="goog-menuitem-content"], + [class^="color-picker_row-header_"] { + color: var(--text); + } + + /*Highlight*/ + [class^="blocklyWidgetDiv .goog-menuitem-highlight"], + [class^="blocklyWidgetDiv .goog-menuitem-hover"], + [class^="context-menu_menu-item_"]:hover { + background-color: #ffffff33 !important; + } + + /*Palette*/ + [class^="blocklyFlyoutBackground"] { + fill: var(--accent) !important; + } + + /*Palette text*/ + [class^="blocklyFlyoutLabelText"] { + fill: var(--text) !important; + } + + /*Toolbox, extension connection box*/ + [class^="connection-modal_bottom-area_"], + [class^="connection-modal_body_"], + [class^="blocklyToolboxDiv"], + [class*="scratchCategoryMenuItem"][class*="categorySelected"], + [class^="scratchCategoryMenu"] { + background: var(--accent); + color: var(--text); + } + + /*Selected category*/ + [class^="scratchCategoryMenuItem.categorySelected"] { + background: #ffffff22; + } + + /*Sprite and stage selection area*/ + [class^="sprite-selector_sprite-selector_"], + [class^="stage-selector_stage-selector_"], + [class^="stage-selector_label_"], + [class^="stage-selector_count_"] { + background: var(--accent); + color: var(--text); + } + + [class^="sprite-info_sprite-info_"], + [class^="stage-selector_header_"], + [class^="stage-selector_header-title_"], + [class^="sprite-selector-item_sprite-selector-item_"]:hover { + background: var(--secondary-bg); + color: var(--text); + } + + /*Palette Buttons*/ + [class^="blocklyFlyoutButtonBackground"] { + fill: var(--accent) !important; + } + + [class^="blocklyFlyoutButtonBackground"]:hover, + [class^="blocklyFlyoutButton"]:hover { + fill: var(--accent) !important; + filter: brightness(110%) !important; + } + + [class^="blocklyFlyoutButton"] > text[class^="blocklyText"] { + fill: var(--text) !important; + } + + /*Text fill of "Make A" buttons*/ + [class^="blocklyFlyoutButton"] .blocklyText { + fill: var(--text) !important; + } + + /*Backpack header*/ + [class^="backpack_backpack-header_"] { + background: var(--accent); + color: var(--text); + } + + /*Backpack*/ + [class^="backpack_backpack-list-inner_"] { + background: var(--secondary-bg); + } + + [class^="backpack_backpack-item_"], + [class^="sprite-selector-item_sprite-image-outer_"], + [class^="backpack_backpack-item_"] > div { + background: var(--main-bg); + } + + [class^="backpack_backpack-item_"] img { + mix-blend-mode: normal; + } + + /*Paint & sound editor sidebar*/ + [class^="selector_list-area_"] { + background: var(--accent); + } + + [class^="selector_new-buttons_"]::before { + background: none; + } + + /*Paint & sound editor main*/ + [class^="asset-panel_wrapper_"] { + background: var(--secondary-bg); + color: var(--text); + } + + [class^="sound-editor_effect-button_"], + [class^="sound-editor_trim-button_"] { + color: var(--text); + } + + /*Paint and sound editor buttons*/ + [class^="img.tool-select-base_tool-select-icon_"], + [class^="sound-editor_trim-button_"] { + filter: brightness(2); + } + + /*Sprite costume selector text*/ + [class^="selector_list-item_"], + [class^="sprite-selector-item_sprite-name_"], + [class^="sprite-selector-item_sprite-details_"] { + color: var(--text); + } + + /*Tabs*/ + [class^="react-tabs_react-tabs__tab_"] { + background: var(--accent); + color: var(--text); + } + + [class~="gui_tab_cxXL7"][class~="gui_is-selected_XzCUQ"] { + background: var(--accent); + color: var(--text); + } + + [class*="gui_tab_"]:hover { + background: var(--accent); + filter: brightness(90%); + color: var(--text); + } + + [class^="gui_tab_"] { + background: var(--secondary-bg); + color: var(--text); + } + + /*New variable/list/custom block*/ + [class^="prompt_body_"], + [class^="custom-procedures_body_"], + [class^="div.custom-procedures_option-card_"] { + background: var(--accent); + color: var(--text); + } + + [class^="custom-procedures_button-row_"] > button:nth-child(1), + [class^="prompt_button-row_"] > button:nth-child(1) { + background: #ff3a5b; + } + + /*Fullscreen view*/ + [class^="stage_stage-wrapper-overlay_"], + [class^="stage-header_stage-header-wrapper-overlay_"] { + background: black; + } + + [class^="stage_stage-overlay-content_"] { + border: none; + } + + /*Library and card backgrounds*/ + [class^="library_library-scroll-grid_"], + [class^="modal_modal-content_"].modal_full-screen_, + [class^="card_step-body_"], + [class^="card_left-card_"], + [class^="card_right-card_"] { + background: var(--accent); + color: var(--text); + } + + /*Library items & filter bar*/ + [class^="library-item_library-item-extension_"], + [class^="library-item_library-item_"], + [class^="library_filter-bar_"] { + background: var(--accent); + } + + [class^="library-item_library-item-extension_"] span, + [class^="library-item_featured-extension-metadata_"], + [class^="library-item_library-item-name_"] { + color: var(--text) !important; + } + + /*Text input*/ + input[type="text"], + [class^="input_input-form_"], + [class^="prompt_variable-name-text-input_"] { + background: var(--accent); + color: var(--text) !important; + } + + input[type="text"]:hover, + input[type="text"]:focus { + background: var(--accent); + filter: brightness(90%); + } + + /*Buttons (inverted for dark theme)*/ + [class^="blocklyZoom"], + [class^="stage-header_stage-button_"], + [class^="sound-editor_round-button_"], + [class^="sound-editor_button-group_"] { + filter: invert(100) hue-rotate(180deg); + } + + /*Set the selected costume/backdrop to have a transparent background as default*/ + [class^="sprite-selector-item_is-selected_"] { + background: transparent !important; + } + + /*Fixing white area around the paint editor*/ + [class^="paint-editor_canvas-container_"] { + border: 1px solid var(--accent); + overflow: hidden; + } + + /*Tweaks for updated paint editor*/ + [class^="paper-canvas_paper-canvas_"] { + background-color: var(--secondary-bg); + border-radius: .4rem; + } + + [class^="paint-editor_canvas-container_"] { + border: 2px solid var(--accent); + border-radius: .4rem; + } + + /*Tweaks for users not signed in*/ + [class^="card_card_"], + [class^="card_left-card_"], + [class^="card_right-card_"] { + border: 1px solid hsla(216, 49%, 90%, 0.14); + } + + /*Scrollbar*/ + [class^="blocklyScrollbarHandle"] { + fill: #CECDCE55; + } + `; + + document.body.appendChild(style); + } else { + if (document.querySelector("style#scratchtoolseditor") !== null) { + document.querySelector("style#scratchtoolseditor").remove(); + } } -} +