@robotical/martyblocksjr 4.2.8 → 4.2.10

package/editions/free/src/css/editor.css

@@ -168,8 +168,39 @@ div.frame {
     cursor: default;
 }
 
-.pageactionrow.delete-mode .duplicatepage {
-    visibility: hidden;
+.deletepage {
+    appearance: none;
+    position: absolute;
+    right: 0;
+    bottom: 0;
+    width: ${24 * scaleMultiplier}px;
+    height: ${24 * scaleMultiplier}px;
+    padding: 0;
+    border: 0;
+    border-radius: 50%;
+    background: url('../assets/ui/closeit.svg') no-repeat center;
+    background-size: 100.5%;
+    cursor: pointer;
+    opacity: 0.55;
+    pointer-events: auto;
+    transition: opacity 0.15s ease, transform 0.1s ease;
+    -webkit-user-select: none;
+}
+
+.deletepage:hover:not(:disabled),
+.deletepage:focus-visible:not(:disabled) {
+    filter: brightness(1.08);
+    opacity: 1;
+}
+
+.deletepage:active:not(:disabled) {
+    opacity: 1;
+    transform: scale(0.94);
+}
+
+.deletepage:disabled {
+    opacity: 0.24;
+    cursor: default;
 }
 
 .duplicatepageicon,
@@ -301,22 +332,6 @@ div.frame {
     background-size: 65%;
 }
 
-.deletethumb {
-    position: relative;
-    margin: ${css_vh(-3.9)} ${css_vh(0)} ${css_vh(0)};
-    width: ${css_vh(5.86)};
-    height: ${css_vh(5.73)};
-    background: url('../assets/ui/closeit.svg');
-    background-size: 100.5%; /* webview pixelates the image unless we do this */
-    visibility: hidden;
-    z-index: 5;
-    -webkit-user-select: none;
-}
-
-.deletethumb.on {visibility: visible; }
-
-.deletethumb.off {visibility: hidden; }
-
 .circle {
     position: absolute;
     width: ${css_vh(2.6)};
@@ -487,52 +502,65 @@ div.frame {
 
 /* Palette animations */
 
-.deleteasset {
+.delete-recorded-sound {
+    appearance: none;
     position: absolute;
-    /* margin: ${css_vh(-13.02)} ${css_vh(0)} ${css_vh(0)}; */
-    top: 0; /* top: 0 seems to work better than negative margin as it's not affected by the height of the image which can be variable */
-    width: ${css_vh(5.86)};
-    height: ${css_vh(5.73)};
-    background: url('../assets/ui/closeit.svg');
+    width: ${css_vh(4.69)};
+    height: ${css_vh(4.69)};
+    padding: 0;
+    border: 0;
+    border-radius: 50%;
+    background: url('../assets/ui/closeit.svg') no-repeat center;
     background-size: 100.5%; /* webview pixelates the image unless we do this */
     z-index: 5;
+    cursor: pointer;
+    opacity: 0.55;
+    transition: opacity 0.15s ease, transform 0.1s ease;
     -webkit-user-select: none;
 }
 
-/* Palette animations */
+.delete-recorded-sound:hover,
+.delete-recorded-sound:focus-visible {
+    filter: brightness(1.08);
+    opacity: 1;
+}
 
-.deletesound {
-    position: absolute;
-    margin: ${css_vh(-0.78)} ${css_vh(-0.78)} ${css_vh(0)};
-    width: ${css_vh(5.86)};
-    height: ${css_vh(5.73)};
-    background: url('../assets/ui/closeit.svg');
-    background-size: 100.5%; /* webview pixelates the image unless we do this */
-    z-index: 5;
-    zoom: 75%;
-    -webkit-user-select: none;
+.delete-recorded-sound:active {
+    opacity: 1;
+    transform: scale(0.94);
 }
 
-.deletesprite {
+.textsprite-delete-button {
+    appearance: none;
     position: absolute;
-    margin: ${css_vh(0)} ${css_vh(0)} ${css_vh(0)};
-    width: 45px;
-    height: 44px;
-    background: url('../assets/ui/closeit.svg');
+    top: -18px;
+    width: 36px;
+    height: 36px;
+    padding: 0;
+    border: 0;
+    border-radius: 50%;
+    background: url('../assets/ui/closeit.svg') no-repeat center;
     background-size: 100.5%; /* webview pixelates the image unless we do this */
     z-index: 5;
+    cursor: pointer;
+    opacity: 0.55;
+    transition: opacity 0.15s ease, transform 0.1s ease;
     -webkit-user-select: none;
 }
 
-.deletetext {
-    position: absolute;
-    margin: ${css_vh(-2.08)} ${css_vh(-4.17)} ${css_vh(0)};
-    width: ${css_vh(5.86)};
-    height: ${css_vh(5.73)};
-    background: url('../assets/ui/closeit.svg');
-    background-size: 100.5%; /* webview pixelates the image unless we do this */
-z-index: 5;
-    -webkit-user-select: none;
+.textsprite-delete-button:hover,
+.textsprite-delete-button:focus-visible {
+    filter: brightness(1.08);
+    opacity: 1;
+}
+
+.textsprite-delete-button:active {
+    opacity: 1;
+    transform: scale(0.94);
+}
+
+.stage.fullscreen .textsprite-delete-button {
+    display: none;
 }
 
 .shakeme{

package/editions/free/src/css/editorleftpanel.css

@@ -287,7 +287,7 @@
     top: 0px;
     right: 0;
     width: ${css_vh(1.04)};
-    height: ${css_vh(25.63)};
+    height: ${css_vh(39.58)};
     background: rgba(255,255,255,0.5);
     touch-action: none;
     z-index: 8;
@@ -319,7 +319,7 @@
     padding: 0px;
     top: ${css_vh(14.75)};
     left: ${css_vh(7.55)};
-    width: ${css_vh(33.85)};
+    width: ${css_vh(27.34)};
     overflow-x: hidden;
 }
 
@@ -330,8 +330,8 @@
     display: block;
     overflow-y: scroll;
     overflow-x: hidden;
-    width: ${css_vh(33.85)};
-    max-height: ${css_vh(25.63)};
+    width: ${css_vh(27.34)};
+    max-height: ${css_vh(39.58)};
 }
 
 .spritethumbs::-webkit-scrollbar {
@@ -345,6 +345,23 @@
     width:  ${css_vh(29.95)};
 }
 
+#library .spritethumbs .spriteactions {
+    position: absolute;
+    top: 0;
+    left: ${css_vh(2.34)};
+    width: ${css_vh(29.95)};
+    z-index: 7;
+    pointer-events: none;
+}
+
+.spriteactionrow {
+    position: relative;
+    width: ${css_vh(23.18)};
+    height: ${css_vh(10.16)};
+    margin: 0 0 ${css_vh(-0.39)};
+    pointer-events: none;
+}
+
 #library .addsprite {
     position: relative;
     display: inline-block;
@@ -461,28 +478,34 @@
     background-size: 100% 100%;
 }
 
-.spritethumb.on .deletespritethumb {
+.deletespritethumb {
+    appearance: none;
     position: absolute;
-    margin: 0px 0px 0px;
-    left: 0px;
-    width: ${css_vh(5.86)};
-    height: ${css_vh(5.73)};
-    background: url('../assets/ui/closeit.svg');
+    top: ${css_vh(0.39)};
+    right: ${css_vh(0.52)};
+    width: ${css_vh(3.13)};
+    height: ${css_vh(3.13)};
+    padding: 0;
+    border: 0;
+    border-radius: 50%;
+    background: url('../assets/ui/closeit.svg') no-repeat center;
     background-size: 100.5%; /* webview pixelates the image unless we do this */
-    z-index: 5;
+    cursor: pointer;
+    opacity: 0.55;
+    pointer-events: auto;
+    transition: opacity 0.15s ease, transform 0.1s ease;
     -webkit-user-select: none;
 }
 
-.spritethumb.off .deletespritethumb {
-    position: absolute;
-    margin: 0px 0px 0px;
-    left: 0px;
-    width: ${css_vh(5.86)};
-    height: ${css_vh(5.73)};
-    background: url('../assets/ui/closeit.svg');
-    background-size: 100.5%; /* webview pixelates the image unless we do this */
-    z-index: 5;
-    -webkit-user-select: none;
+.deletespritethumb:hover,
+.deletespritethumb:focus-visible {
+    filter: brightness(1.08);
+    opacity: 1;
+}
+
+.deletespritethumb:active {
+    opacity: 1;
+    transform: scale(0.94);
 }
 
 .spritethumb .icon{

package/editions/free/src/css/librarymodal.css

@@ -200,6 +200,7 @@ hr.bigdivide{
 }
 
 .assetbox {
+    position: relative;
     display: inline-block;
     vertical-align: top;
     width: ${css_vh(17.84)};
@@ -208,6 +209,37 @@ hr.bigdivide{
     padding: ${css_vh(0.65)};
 }
 
+.asset-delete-button {
+    appearance: none;
+    position: absolute;
+    top: ${css_vh(0.39)};
+    right: ${css_vh(0.39)};
+    width: ${css_vh(3.13)};
+    height: ${css_vh(3.13)};
+    padding: 0;
+    border: 0;
+    border-radius: 50%;
+    background: url('../assets/ui/closeit.svg') no-repeat center;
+    background-size: 100.5%;
+    cursor: pointer;
+    opacity: 0.55;
+    pointer-events: auto;
+    transition: opacity 0.15s ease, transform 0.1s ease;
+    z-index: 20;
+    -webkit-user-select: none;
+}
+
+.asset-delete-button:hover,
+.asset-delete-button:focus-visible {
+    filter: brightness(1.08);
+    opacity: 1;
+}
+
+.asset-delete-button:active {
+    opacity: 1;
+    transform: scale(0.94);
+}
+
 .assetbox.off {
     background: url('../assets/paint/thumbOff.png') no-repeat center top;
     background-size: 100%;

package/editions/free/src/css/thumbs.css

@@ -3,7 +3,7 @@
     position: relative;
     margin: 0px;
     padding: 0px;
-    width: ${css_vw(21.68)};
+    width: ${css_vh(28.91)};
     height: ${css_vh(26.04)};
     vertical-align: top;
 }
@@ -30,6 +30,8 @@
     left: ${5 * scaleMultiplier}px;
     width: ${css_vh(25)};
     height: ${css_vh(18.75)};
+    -webkit-touch-callout: none;
+    -webkit-user-drag: none;
 }
 
 .aproject.empty {
@@ -157,21 +159,121 @@
     left: 8px;
 }
 
-.card-action-delete {
-    left: auto;
-    right: 8px;
+.project-delete-button {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    position: absolute;
+    top: ${css_vh(1.1)};
+    right: ${css_vh(0.8)};
+    z-index: 8;
+    width: ${css_vh(5.2)};
+    height: ${css_vh(5.2)};
+    padding: 0 0 ${css_vh(0.3)};
+    border: 2px solid #fff;
+    border-radius: 50%;
+    background: #E43D44;
+    box-shadow: 0 0 0 2px #9E1F28, 0 ${css_vh(0.25)} ${css_vh(0.55)} rgba(27, 62, 78, 0.35);
+    color: #fff;
+    cursor: pointer;
+    font-family: 'Lato Regular';
+    font-size: ${css_vh(3.8)};
+    font-weight: bold;
+    line-height: 1;
+    opacity: 0.55;
+    transition: opacity 0.15s ease, transform 0.1s ease;
+    -webkit-tap-highlight-color: transparent;
 }
 
-.closex {
-    position: relative;
-    float: left;
-    top: ${css_vh(-54.17)};
-    z-index: 5;
-    visibility: hidden;
-    width: ${css_vh(5.86)};
-    height: ${css_vh(5.73)};
-    background:  url('../assets/ui/closeit.svg');
-    background-size: 101%;
+.project-delete-button:hover,
+.project-delete-button:focus-visible {
+    background: #C92F37;
+    opacity: 1;
+    outline: 3px solid #133C46;
+    outline-offset: 3px;
+}
+
+.project-delete-button:active {
+    opacity: 1;
+    transform: scale(0.94);
+}
+
+.project-delete-dialog-backdrop {
+    position: fixed;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    z-index: 12000;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: ${css_vh(3)};
+    background: rgba(27, 51, 66, 0.72);
+}
+
+.project-delete-dialog {
+    box-sizing: border-box;
+    width: ${css_vh(52)};
+    max-width: 90vw;
+    padding: ${css_vh(3)};
+    border: ${css_vh(0.4)} solid #315F7B;
+    border-radius: 18px;
+    background: #FFFDF7;
+    box-shadow: 0 ${css_vh(0.8)} ${css_vh(2)} rgba(0, 0, 0, 0.35);
+    text-align: center;
+}
+
+.project-delete-dialog-title {
+    margin: 0;
+    color: #315F7B;
+    font-family: 'Lato Regular';
+    font-size: ${css_vh(3.2)};
+    line-height: 1.2;
+}
+
+.project-delete-dialog-description {
+    margin: ${css_vh(1.6)} 0 0;
+    color: #416E86;
+    font-family: 'Lato Regular';
+    font-size: ${css_vh(2.1)};
+    line-height: 1.35;
+}
+
+.project-delete-dialog-actions {
+    display: flex;
+    justify-content: center;
+    gap: ${css_vh(1.4)};
+    margin-top: ${css_vh(2.6)};
+}
+
+.project-delete-cancel,
+.project-delete-confirm {
+    min-width: ${css_vh(14)};
+    min-height: ${css_vh(5.2)};
+    padding: ${css_vh(0.8)} ${css_vh(1.5)};
+    border: 2px solid #315F7B;
+    border-radius: 10px;
+    color: #fff;
+    cursor: pointer;
+    font-family: 'Lato Regular';
+    font-size: ${css_vh(1.9)};
+    font-weight: bold;
+}
+
+.project-delete-cancel {
+    background: #5D9CC8;
+}
+
+.project-delete-confirm {
+    border-color: #9E1F28;
+    background: #E43D44;
+}
+
+.project-delete-cancel:focus-visible,
+.project-delete-confirm:focus-visible {
+    outline: 3px solid #133C46;
+    outline-offset: 3px;
 }
 
 .share {

package/editions/free/src/settings.json

@@ -17,6 +17,9 @@
     "categoryStopColor": "#D62222",
     "paletteBlockShadowOpacity": 0.8,
     "autoSaveInterval": 30000,
+    "curriculumArtifactAllowedOrigins": [
+        "https://cdn.sanity.io"
+    ],
     "defaultLocale": "en",
     "defaultLocaleShort": "en",
     "supportedLocales": {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@robotical/martyblocksjr",
-  "version": "4.2.8",
+  "version": "4.2.10",
   "description": "ScratchJr",
   "repository": {
     "type": "git",