User CSS to simplify the Scratch interface for the creation of instructional animated gifs. Text removed to make gifs useable across languages. This isn't intended to show the creation of specific block stacks, but rather general interactions like navigating the environment. Use with Stylus Chrome extension https://github.com/openstyles/stylus/w…

Simple_Scratch.user.css

/* ==UserStyle==
@name           Simple Scratch testing
@namespace      github.com/openstyles/stylus
@version        1.0.8
@description    Stylesheet to remove text and extraneous UI from Scratch. Used for localization-friendly screencasts
@author         @mrjoshida
==/UserStyle== */
@namespace xlink 'http://www.w3.org/1999/xlink';
@-moz-document domain("csfirstcoding.withgoogle.com"),
domain("scratch.mit.edu"),
url-prefix("https://csfirst.withgoogle.com/project/") {
    /* scratch.mit.edu only, remove header links */
    [class*="menu-bar_hoverable_"],
    [class*="menu-bar_divider"] {
        display: none;
    }

    /* CS First only, remove header links */
    .mdc-menu-surface--anchor,
    [class*="engeduElmsLmsScritchScritchMenuGroup"] div,
    .user-dropdown-wrapper {
        visibility: hidden;
    }
    [class*="engeduElmsLmsScritchScritchLogo"] {
        visibility: visible!important;
    }

    /* optional, remove header entirely */
    [class*="scritch-header"] {
        /*display: none;*/
    }
    #scratch-iframe {
        height: 100vh;
    }


    /* remove instructions dialog */
    [class*="Drawer_drawer_"] {
        display: none;
    }

    /* Top Nav */
    [class*="gui_tabs_"] li span {
        display: none;
    }
    [class*="gui_tabs_"] li img {
        width: 2rem;
    }

    /* Toolbox */
    .scratchCategoryMenuItemLabel,
    .blocklyFlyoutLabelText {
        display: none;
    }
    .scratchCategoryItemBubble {
        width: 2rem;
        height: 2rem;
        border-width: 2px;
    }

    /* Blocks */
    .blocklyText {
        visibility: hidden;
    }

    g:active {
        cursor: grabbing;
    }

    /* Increase outline and hide fields */
    .blocklyBlockBackground {
        stroke-width: 3;
    }
    .blocklyBlockBackground[*|fill="#FFFFFF"],
    [*|data-argument-type="dropdown"] .blocklyBlockBackground,
    [*|data-argument-type="variable"] .blocklyBlockBackground {
        fill-opacity: 0;
        stroke: none;
    }
    .blocklyEditableText image[*|href*="dropdown-arrow"],
    image[*|href*="rotate"] {
        visibility: hidden;
    }

    /* Exaggerate green flag */
    image[*|href*="green-flag"] {
        width: 50px;
        height: 50px;
        transform: translate(-30px, -15px)
    }

    /* Exaggerate add sprite, costume, and backdrop buttons */
    [class*="selector_add-button"] {
        bottom: 1.5rem;
    }
    [class*="selector_new-buttons"] {
        padding: 1.5rem 0
    }
    [class*="action-menu_main-button"] {
        width: 3rem;
        height: 3rem;
        box-shadow: 0 0 0 8px hsl(215deg 100% 65% / 35%);
    }
    [class*="action-menu_main-button"]:hover {
        width: 3rem;
        height: 3rem;
        box-shadow: 0 0 0 12px hsl(215deg 100% 65% / 35%);
    }
    [class*="action-menu_more-buttons-outer"] {
        border-top-left-radius: 2.5rem;
        border-top-right-radius: 2.5rem;
        width: 2.5rem;
        margin-left: calc((3rem - 2.5rem) / 2);
        margin-right: calc((3rem - 2.5rem) / 2);
    }
    .action-menu_more-button_1fMGZ {
        width: 2.5rem;
        height: 2.5rem;
    }
    [class*="action-menu_more-icon"] {
        width: calc(2.5rem - 1rem);
        height: calc(2.5rem - 1rem);
    }
    [class*="action-menu_more-buttons_"]:first-child {
        border-top-right-radius: 2.5rem;
        border-top-left-radius: 2.5rem;
    }


    /* Stage  and Sprite Properties*/
    [class*="stage-selector_header-title"],
    [class*="stage-selector_label"] {
        display: none;
    }

    /* Exaggerate sprite icons */
    [class*="sprite-selector_sprite-wrapper"] {
        min-width: 6rem;
        min-height: 6rem;
    }
    img[class*="sprite-selector-item_sprite-image"] {
        max-width: 64px;
        max-height: 64px;
    }

    /* Exaggerate backdrop icon */
    [class*="target-pane_stage-selector-wrapper"] {
        flex-basis: 120px;
    }
    [class*="stage-selector_costume-canvas"] {
        max-width: 96px;
        max-height: 72px;
    }

    /* Exaggerate start/stop icons */
    [class*="controls_controls-container"] img {
        width: 2.5rem;
        height: 2.5rem;
    }

    /* Costume / Sound tabs */
    /* Remove scroll bar from costume list */
    [class*="selector_list-area"] {
        overflow-y: auto;
    }

    [class*="selector_wrapper"] {
        width: 120px;
    }

    input::-webkit-inner-spin-button {
        -webkit-appearance: none;
        margin: 0;
    }

    [class*="input_input-small-range"] {
        width: 2rem;
    }

    /* Shrink image and sound editor panes to fit 1024x768 */
    [class*="paint-editor_top-align-row"],
    [class*="asset-panel_detail-area"],
    [class*="sound-editor_editor-container"] {
        min-width: 400px;
    }

    /* Shrink sound editor buttons to fit 1024x768 */
    [class*="sound-editor_tool-button"] img {
        width: 2rem;
    }

    [class*="selector_list-item"] {
        width: 6rem;
        height: 6rem;
    }
    [class*="sprite-selector-item_sprite-name"] {
        visibility: hidden;
    }
    [class*="sprite-selector-item_sprite-details"] {
        display: none;
    }
    [class*="label_input-label"],
    [class*="labeled-icon-button_edit-field-title"],
    [class*="paint-editor_button-text"],
    [class*="dropdown_dropdown"],
    .__react_component_tooltip {
        display: none;
    }

    [class*="icon-button_title"] {
        display: none;
    }

    /* Costume / Sound libraries */
    [class*="modal_header-item-title"],
    [class*="library_filter-bar-item"] div,
    [class*="modal_back-button"] div {
        visibility: hidden;
    }
    [class*="library-item_library-item-name"] {
        display: none;
    }
    [class*="library_filter-input"]::placeholder {
        color: white;
    }
    
    /* Redact text in instructions drawer */
    .engeduElmsLmsInstructiondrawerTitle {
        position: relative;
        white-space: pre;
        display: inline;
        color: rgba(0,0,0,0);
    }

    .engeduElmsLmsInstructiondrawerTitle:after {
        background: #E6E6E6;
        border-radius: 1em;
        box-shadow: 0 0 1px rgba(0, 0, 0, 0.35);
        content: " ";
        width: 100%;
        height: 1.2em;
        left: 0;
        position: absolute;
        max-width: 500px; 
    }
    
    .engeduElmsLmsInstructiondrawerContent p {
        position: relative;
        white-space: pre;
        display: inline;
        color: rgba(0,0,0,0);
        line-height: .2em;
    }

    .engeduElmsLmsInstructiondrawerContent p:after {
        background: #E6E6E6;
        border-radius: 1em;
        box-shadow: 0 0 1px rgba(0, 0, 0, 0.35);
        content: " ";
        width: 100%;
        /*height: 1.2em;*/
        left: 0;
        position: absolute;
        max-width: 500px; 
    }
    .engeduElmsLmsInstructiondrawerHighlight {
        display: none!important;
    }
}