Skip to content

Compact Block Categories by kylekart

Write a review Install Get Stylus

Details

Authorkylekart

LicenseNo License

CategoryTurboWarp

Created

Updated

Code size8.8 kB

Code checksum5cb5bd33

Statistics

Learn how we calculate statistics in the FAQ.

Failed to fetch stats.

Description

A theme that makes the Scratch 3.0 block categories more compact.

Notes

You can test the theme here.

My theme also adds custom icons using Material Icons (it works even without the icon addon).

Source code

/* ==UserStyle==
@name       Compact Block Categories
@version    20240930.07.20
@namespace  https://userstyles.world/user/ElmoBear02
@author     ElmoBear02
==/UserStyle== */

/* Icons */
.scratchCategoryId-strings .scratchCategoryItemBubble::after {
    background-image: url('https://raw.githubusercontent.com/KyleKart/tw_theme/main/tw/strings.svg');
}

.scratchCategoryId-motion .scratchCategoryItemBubble::after {
    background-image: url('https://raw.githubusercontent.com/KyleKart/tw_theme/main/tw/motion.svg');
}

.scratchCategoryId-looks .scratchCategoryItemBubble::after {
    background-image: url('https://raw.githubusercontent.com/KyleKart/tw_theme/main/tw/looks.svg');
}

.scratchCategoryId-operators .scratchCategoryItemBubble::after {
    background-image: url('https://raw.githubusercontent.com/KyleKart/tw_theme/main/tw/operators.svg');
}

.scratchCategoryId-Gamepad .scratchCategoryItemBubble::after {
    background-image: url('https://raw.githubusercontent.com/KyleKart/tw_theme/main/tw/gamepad.svg');
}

.scratchCategoryId-fetch .scratchCategoryItemBubble::after {
    background-image: url('https://raw.githubusercontent.com/KyleKart/tw_theme/main/tw/fetch.svg');
}

.scratchCategoryId-MouseCursor .scratchCategoryItemBubble::after {
    background-image: url('https://raw.githubusercontent.com/KyleKart/tw_theme/main/tw/mouse_cursor.svg');
}

.scratchCategoryId-sound .scratchCategoryItemBubble::after {
    background-image: url('https://raw.githubusercontent.com/KyleKart/tw_theme/main/tw/sound.svg');
}

.scratchCategoryId-sensing .scratchCategoryItemBubble::after {
    background-image: url('https://raw.githubusercontent.com/KyleKart/tw_theme/main/tw/sensing.svg');
}

.scratchCategoryId-events .scratchCategoryItemBubble::after {
    background-image: url('https://raw.githubusercontent.com/KyleKart/tw_theme/main/tw/events.svg');
}

.scratchCategoryId-control .scratchCategoryItemBubble::after {
    background-image: url('https://raw.githubusercontent.com/KyleKart/tw_theme/main/tw/control.svg');
}

.scratchCategoryId-variables .scratchCategoryItemBubble::after {
    background-image: url('https://raw.githubusercontent.com/KyleKart/tw_theme/main/tw/variables.svg');
}

.scratchCategoryId-lists .scratchCategoryItemBubble::after {
    background-image: url('https://raw.githubusercontent.com/KyleKart/tw_theme/main/tw/lists.svg');
}

.scratchCategoryId-myBlocks .scratchCategoryItemBubble::after {
    background-image: url('https://raw.githubusercontent.com/KyleKart/tw_theme/main/tw/my_blocks.svg');
}

.scratchCategoryId-files .scratchCategoryItemBubble::after {
    background-image: url('https://raw.githubusercontent.com/KyleKart/tw_theme/main/tw/files.svg');
}

.scratchCategoryId-pointerlock .scratchCategoryItemBubble::after {
    background-image: url('https://raw.githubusercontent.com/KyleKart/tw_theme/main/tw/mouse_lock.svg');
}

.scratchCategoryId-stretch .scratchCategoryItemBubble::after {
    background-image: url('https://raw.githubusercontent.com/KyleKart/tw_theme/main/tw/stretch.svg');
}

.scratchCategoryId-runtimeoptions .scratchCategoryItemBubble::after {
    background-image: url('https://raw.githubusercontent.com/KyleKart/tw_theme/main/tw/runtime.svg');
}

.scratchCategoryId-localstorage .scratchCategoryItemBubble::after {
    background-image: url('https://raw.githubusercontent.com/KyleKart/tw_theme/main/tw/local.svg');
}

.scratchCategoryId-notSound .scratchCategoryItemBubble::after {
    background-image: url('https://raw.githubusercontent.com/KyleKart/tw_theme/main/tw/sound.svg');
}

/* Other Styling */
.scratchCategoryItemBubble {
  position: relative;
  padding: 0.75rem;
  width: 0px;
  min-height: 1.6rem;
  border: 1px solid;
  border-radius: 100px;
  margin: 0 auto 0.125rem;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 500;
  font-size: 10px;
}

.scratchCategoryItemBubble:active {
    padding: 0.75rem;
}

.scratchCategoryItemBubble::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.scratchCategoryMenuItemLabel {
    display: none;
    content: "EBCB";
}

.scratchCategoryMenuItem {
  width: 100%;
  display: inline-flex;
  padding: 0px;
  overflow: visible;
  border-radius: 0.875rem;
}

.scratchCategoryItemIcon {
    background-repeat: no-repeat;
    background-size: cover;
    background-color: rgb(15, 189, 140);
    border-radius: 100%;
    height: 1.6rem;
    width: 1.6rem;
    overflow: visible;
}

.scratchCategoryMenuRow {
    display: flex;
}

.scratchCategoryMenu {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    justify-items: center;
    column-gap: 0 !important;
        width: 60px;
}

.blocklyToolboxDiv {
    height: auto !important;
}

.blocks_blockSearchIconWrapper_2yh0k {
    width: 61px;
}

@-moz-document url-prefix("file:///C:/Users/Plumr/Downloads/Scratch++") {
/* Dark Mode */
:root {
    --ui-primary: #111111;
    --ui-secondary: #1e1e1e;
    --ui-tertiary: #2e2e2e;
    --ui-modal-overlay: #333333aa;
    --ui-modal-background: #111111;
    --ui-modal-foreground: #eeeeee;
    --ui-modal-header-background: #333333;
    --ui-modal-header-foreground: #ffffff;
    --ui-white: #111111;
    --ui-black-transparent: #ffffff26;
    --text-primary: #eeeeee;
    --menu-bar-background: #333333;
    --assets-background: #111111;
    --input-background: #1e1e1e;
    --popover-background: #1e1e1e;
    --shadow: hsla(0, 0%, 0%, 0.15);
    --paint-ui-pane-border: var(--ui-black-transparent);
    --paint-text-primary: var(--text-primary);
    --paint-form-border: var(--ui-black-transparent);
    --paint-looks-secondary: var(--looks-secondary);
    --paint-looks-transparent: var(--looks-transparent);
    --paint-input-background: var(--input-background);
    --paint-popover-background: var(--popover-background);
}

.gui_body-wrapper_-N0sA {
    background-color: var(--ui-primary);
}

.sprite-selector_sprite-selector_2KgCX {
    background-color: var(--ui-secondary);
    border-color: var(--ui-black-transparent);
}

.sprite-info_sprite-info_3EyZh {
    background-color: var(--ui-white);
    color: var(--text-primary);
    border-bottom: 1px solid var(--ui-black-transparent);
}

.stage-header_stage-button_hkl9B {
    border: 1px solid var(--ui-black-transparent);
    background: var(--ui-white);
}

.stage-header_stage-size-row_14N65 > *, .stage-header_unselect-wrapper_1leRy {
    background-color: var(--ui-white);
}

.stage-selector_stage-selector_3oWOr {
    background-color: var(--ui-white);
    color: var(--text-primary);
    border-color: var(--ui-black-transparent);
}

.input_input-form_l9eYg {
    color: var(--text-primary);
    background-color: var(--input-background);
    border-color: var(--ui-black-transparent);
}
.input_input-form_1Y0wX {
    color: var(--paint-text-primary, #575e75);
    background-color: var(--paint-input-background, #FFFFFF);
    border-color: var(--paint-form-border, #E9EEF2);
}

.stage-selector_header_2GVr1 {
    background-color: var(--ui-white);
    color: var(--text-primary);
    border-bottom: 1px solid var(--ui-black-transparent);

}

.gui_tab_27Unf {
    border: 1px solid var(--ui-black-transparent);
    background-color: var(--ui-tertiary);
    color: white;

}

.gui_tab_27Unf.gui_is-selected_sHAiu {
    color: white;
    background-color: var(--ui-white);
}

.blocks_blocks_C530M .injectionDiv {
    border: 1px solid var(--ui-black-transparent);
}

.input_input-form_l9eYg {
    color: var(--text-primary);
    background-color: var(--input-background);
    border-color: var(--ui-black-transparent);
}

.blocklyFlyoutBackground {
    fill: #111111;
}

.blocklyToolboxDiv {
    background-color: #111111;
    color: #cccccc;
}

.scratchCategoryMenu {
    background: #111111;
    color: #cccccc;
}

.blocklySvg {
    background-color: var(--ui-secondary);
}

.blocklyZoom>image {
    filter: invert(100%);
}

.asset-panel_wrapper_366X0 {
    display: flex;
    flex-grow: 1;
    border: 1px solid var(--ui-black-transparent);
    background: var(--assets-background);
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 0.85rem;
}

.selector_wrapper_8_BHs {
    background: var(--ui-tertiary);
}
.paper-canvas_paper-canvas_1y588 {
    background-color: #222;
}

.menu-bar_menu-bar_JcuHF {
    background-color: #00cccd;
}

.style-module_body__ICmEP {
    background: var(--ui-secondary);
}
}

Reviews

No reviews yet.