New Home Page

features/features.json

@@ -1,4 +1,9 @@
 [
+  {
+    "version": 2,
+    "id": "new-look",
+    "versionAdded": "v4.0.0"
+  },
   {
     "version": 2,
     "id": "select-self",

features/new-look/data.json

@@ -0,0 +1,16 @@
+{
+    "title": "New Look",
+    "description": "Changes the look of the Scratch Site to a more modern, fresh look.",
+    "credits": [
+      { "username": "LifeCoderBoy", "url": "https://scratch.mit.edu/users/LifeCoderBoy/" },
+      { "username": "_nix", "url": "https://scratch.mit.edu/users/_nix/" }
+    ],
+    "styles": [{ "file": "scratch-www.css", "runOn": "/" }, { "file": "scratch-editor.css", "runOn": "/projects/*" }, { "file": "scratch-profile.css", "runOn": "/users/*" }],
+    "scripts": [{"file": "scratch-www.js", "runOn": "/"}, { "file": "scratch-profile.js", "runOn": "/users/*" }],
+    "tags": ["Theme", "New"],
+    "type": ["Website", "Editor"],
+    "options": [{ "id": "theme", "name": "Mode", "type": 0 }],
+    "dynamic": true,
+    "resources": []
+  } 
+

features/new-look/scratch-editor.css

@@ -0,0 +1,321 @@
+/*  Created by @towerofnix  */
+body {
+    background-color: black;
+}
+
+.blocklyMainBackground {
+    fill: #444 !important;
+}
+
+/*.blocklyBlockCanvas { filter: brightness(0.9) saturate(0) !important; }*/
+.blocklySvg {
+    background-color: #222 !important;
+}
+
+.blocklyFlyoutBackground {
+    fill: #222 !important;
+}
+
+.blocklyFlyout {
+    border-right-color: #000 !important;
+}
+
+.blocklyZoom image {
+    opacity: 0.25;
+}
+
+.blocklyScrollbarHandle {
+    fill: #555 !important;
+}
+
+.blocklyWidgetDiv .goog-menu {
+    background: #555 !important;
+    border-color: #111;
+}
+
+.blocklyWidgetDiv .goog-menuitem {
+    color: #FFF !important;
+}
+
+.blocklyWidgetDiv .goog-menuitem-highlight {
+    background-color: #999 !important;
+    border-top: 1px solid #333;
+    border-bottom: 1px solid #333
+}
+
+.blocklyWidgetDiv .goog-menuitem-disabled .goog-menuitem-content {
+    color: #AAA !important;
+}
+
+.scratchCategoryMenu,
+.blocklyToolboxDiv,
+[class^=selector_wrapper] {
+    background: #333 !important;
+    color: #EEE;
+}
+
+.scratchCategoryMenuItem.categorySelected {
+    background: #444 !important;
+}
+
+[class^=menu-bar_menu-bar_] {
+    background: #222 !important;
+}
+
+[class^=sprite-selector_],
+[class^=stage-selector_] {
+    background: #333 !important;
+    color: #EEE;
+}
+
+[class*=sprite-selector-item] {
+    background: #3A3A3A !important;
+    color: #EEE;
+}
+
+[class^=selector_new-buttons]::before {
+    background: none !important;
+}
+
+[class^=sprite-info] {
+    background: #333 !important;
+    color: #EEE;
+}
+
+[class^=gui_extension-button-container] {
+    background: #444 !important;
+    border-color: #222 !important;
+}
+
+[class^=gui_body-wrapper] {
+    background-color: #2E2E2E !important;
+}
+
+[class*=gui_tab_] {
+    background-color: #444 !important;
+    border-bottom-color: #2E2E2E !important;
+}
+
+[class*=gui_tab_][class*=gui_is-selected] {
+    background-color: #555 !important;
+}
+
+[class^=asset-panel_] {
+    background-color: #444 !important;
+    color: #EEE;
+}
+
+[class^=sound-editor_round-button] {
+    filter: brightness(0.75) saturate(0) !important;
+}
+
+[class*=button_button],
+[class^=sound-editor_button] {
+    background: #555 !important;
+    border-color: #333 !important;
+}
+
+.injectionDiv,
+.blocklyToolboxDiv,
+[class^=stage_stage-wrapper],
+[class^=asset-panel_],
+[class^=sprite-selector],
+[class^=stage-selector] {
+    border-color: #111 !important;
+}
+
+[class^=stage_stage-wrapper-overlay] {
+    background-color: #000;
+}
+
+[class*=stage_stage-overlay-content] {
+    border: 1px solid #333 !important;
+}
+
+[class^=stage-header_stage-header-wrapper-overlay] {
+    background-color: #000;
+}
+
+[class^=react-tabs]:focus::after {
+    display: none;
+}
+
+[class^=input_input-form_],
+[class^=sprite-info],
+[class^=stage-header] {
+    border-color: #666 !important;
+}
+
+[class^=backpack_backpack-header] {
+    background: #444;
+    color: white;
+}
+
+[class^=menu-bar_help-icon] {
+    filter: brightness(0.5);
+}
+
+.Popover-body {
+    background: #333;
+    border-color: #222;
+}
+
+.Popover-tipShape {
+    fill: #333;
+    stroke: #222;
+}
+
+[class^=color-picker_row-header] {
+    color: #EEE;
+}
+
+[class^=color-picker_divider] {
+    border-color: #555;
+}
+
+[class^=color-picker_swatch] {
+    border-color: #666;
+}
+
+[class^=slider_handle] {
+    background-color: #EEE;
+}
+
+/* recent changes :P */
+
+.blocklyFlyoutButton>.blocklyText,
+.blocklyFlyoutLabelText {
+    fill: #eed !important;
+}
+
+[class^=gui_tab] span {
+    font-weight: 800;
+}
+
+[class^=gui_tab] li:not([aria-selected=true])>span {
+    color: hsla(215, 100%, 85%, 0.5) !important;
+}
+
+/* Makes block text a little easier to read. */
+.blocklyDraggable>.blocklyText,
+.blocklyDraggable>g>text {
+    text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.4);
+}
+
+[class^=button_outlined-button]:not([class*=menu-bar]):not([class*=modal]):not([class*=tag-button_active]) {
+    background: #444 !important;
+}
+
+[class*=modal_modal-overlay] {
+    background-color: hsla(215, 20%, 35%, 0.9);
+}
+
+[class^=prompt_body] {
+    background-color: hsla(0, 0%, 90%, 0.9);
+}
+
+.blocklyFlyoutButton:hover {
+    fill: hsla(215, 60%, 40%, 1) !important;
+}
+
+input {
+    background: #444;
+    color: #FFF !important;
+}
+
+input::placeholder {
+    color: #DDD;
+}
+
+input:focus {
+    box-shadow: 0 0 0 0.25rem hsla(215, 100%, 55%, 0.45) !important;
+}
+
+[class^="stage_stage-wrapper-overlay"],
+[class^="stage-header_stage-header-wrapper-overlay"] {
+    background-color: #222;
+}
+
+/* Menu bar */
+
+[class^=gui_menu-bar],
+[class^=modal_header] {
+    background-color: hsla(215, 20%, 35%, 1);
+}
+
+[class^=menu_menu] {
+    background-color: hsla(215, 20%, 35%, 1);
+}
+
+[class*=project-title-input_title-field] {
+    background-color: hsla(215, 20%, 32%, 1);
+    border-color: hsla(0, 0%, 0%, 0.15) !important;
+}
+
+[class*=project-title-input_title-field]:hover {
+    background-color: hsla(215, 20%, 29%, 1);
+}
+
+[class*=project-title-input_title-field]:focus {
+    background-color: hsla(215, 20%, 25%, 1);
+}
+
+/* Context menus */
+
+[class*=context-menu_context-menu] {
+    background-color: #555;
+}
+
+/* Libraries */
+
+[class*=modal_modal-content],
+[class^=library_library-scroll-grid] {
+    background-color: #2E2E2E !important;
+}
+
+[class^=library_library-scroll-grid]>[class^=library-item_library-item] {
+    background-color: #3A3A3A;
+    border-color: #111;
+    color: white;
+}
+
+[class^=library_library-scroll-grid]>[class^=library-item_library-item]:hover {
+    border-color: hsla(215, 100%, 65%, 1);
+}
+
+[class^=library-item_featured-extension] {
+    color: white !important;
+}
+
+[class^=library-item_featured-extension-metadata-detail] img {
+    filter: brightness(2.0) saturate(0);
+}
+
+[class^=library-item_library-item-inset-image-container] {
+    border-color: #2C2C2C;
+}
+
+[class^=library_filter-bar] {
+    background-color: hsla(215, 20%, 45%, 1);
+}
+
+[class^=filter_filter-input] {
+    border-color: #666;
+    background: #444;
+    color: #FFF !important;
+    border-radius: 10rem;
+}
+
+[class^=filter_filter-input]::placeholder {
+    color: #FFF !important;
+}
+
+[class*=tag-button_active] {
+    background-color: hsla(30, 100%, 55%, 1) !important;
+}
+
+/* Paint editor */
+
+[class^=tool-select-base_tool-select] {
+    filter: brightness(2.0) saturate(0.25);
+}