@robotical/martyblocksjr 4.2.9 → 4.2.11

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)};
@@ -436,8 +451,8 @@ div.frame {
     position: relative;
     margin: ${css_vh(0)} ${css_vh(0)} ${css_vh(0)};
     height: ${64 * scaleMultiplier}px;
-    /* width: ${659 * scaleMultiplier}px; */
-    width: 85%;
+    /* Keep a fixed, height-scaled lane for undo/redo instead of a viewport percentage. */
+    width: calc(100% - ${120 * scaleMultiplier}px);
     z-index:4;
     overflow: hidden;
 }
@@ -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{
@@ -949,6 +977,172 @@ z-index: 5;
     outline-offset: 3px;
 }
 
+/* micro:bit connection and software installer */
+.microBitConnectionDialog {
+    position: fixed;
+    left: 50%;
+    top: 50%;
+    width: ${css_vh(56)};
+    min-height: ${css_vh(31)};
+    transform: translate(-50%, -50%);
+    z-index: 12000;
+    box-sizing: border-box;
+    padding: ${css_vh(3.2)} ${css_vh(3.4)} ${css_vh(3)};
+    border: 3px solid #F4AD46;
+    border-radius: 16px;
+    background: #FEDF8F;
+    box-shadow: 0 ${css_vh(0.65)} ${css_vh(2.2)} rgba(0, 0, 0, 0.32);
+    font-family: 'Lato Regular';
+}
+
+.microBitConnectionDialog.fade {
+    display: none;
+    opacity: 0;
+}
+
+.microBitConnectionDialog.fade.in {
+    display: block;
+    opacity: 1;
+}
+
+.microBitConnectionDialogClose {
+    position: absolute;
+    right: ${css_vh(1.1)};
+    top: ${css_vh(1.1)};
+    width: ${css_vh(4.3)};
+    height: ${css_vh(4.3)};
+    border: 0;
+    padding: 0;
+    background: url('../assets/ui/closeit.svg') no-repeat center center;
+    background-size: 100%;
+    cursor: pointer;
+    -webkit-tap-highlight-color: transparent;
+}
+
+.microBitConnectionDialogClose:disabled {
+    cursor: default;
+    opacity: 0.45;
+}
+
+.microBitConnectionDialogTitle {
+    color: #315F7B;
+    font-size: ${css_vh(3.4)};
+    font-weight: bold;
+    line-height: ${css_vh(4)};
+    text-align: center;
+    text-shadow: 0 ${css_vh(0.13)} #fff;
+}
+
+.microBitConnectionDialogBody {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    min-height: ${css_vh(17)};
+    padding-top: ${css_vh(1.6)};
+    text-align: center;
+}
+
+.microBitConnectionDialogIcon {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: ${css_vh(8)};
+    height: ${css_vh(8)};
+    border-radius: 50%;
+    background: #F9CF37;
+}
+
+.microBitConnectionDialogIcon svg {
+    width: ${css_vh(6.3)};
+    height: ${css_vh(6.3)};
+}
+
+.microBitConnectionDialogMessage {
+    max-width: ${css_vh(45)};
+    margin-top: ${css_vh(1.2)};
+    color: #315F7B;
+    font-size: ${css_vh(1.9)};
+    line-height: ${css_vh(2.6)};
+}
+
+.microBitConnectionDialogProgress {
+    display: none;
+    flex-direction: column;
+    align-items: center;
+    width: min(100%, ${css_vh(38)});
+    margin-top: ${css_vh(1.5)};
+}
+
+.microBitConnectionDialogProgressBar {
+    width: 100%;
+    height: ${css_vh(1.5)};
+    accent-color: #5D9CC8;
+}
+
+.microBitConnectionDialogProgressLabel {
+    margin-top: ${css_vh(0.5)};
+    color: #315F7B;
+    font-size: ${css_vh(1.65)};
+    font-weight: bold;
+}
+
+.microBitConnectionDialogError {
+    display: none;
+    max-width: ${css_vh(45)};
+    margin-top: ${css_vh(1)};
+    padding: ${css_vh(0.8)} ${css_vh(1)};
+    border-radius: 8px;
+    background: #FFF5D9;
+    color: #9E1F28;
+    font-size: ${css_vh(1.45)};
+    line-height: ${css_vh(2)};
+    overflow-wrap: anywhere;
+}
+
+.microBitConnectionDialogHelp {
+    display: none;
+    margin-top: ${css_vh(1)};
+    color: #255E83;
+    font-size: ${css_vh(1.6)};
+    font-weight: bold;
+}
+
+.microBitConnectionDialogActions {
+    display: flex;
+    justify-content: flex-end;
+    gap: ${css_vh(1)};
+    margin-top: ${css_vh(1.3)};
+}
+
+.microBitConnectionDialogButton {
+    min-width: ${css_vh(10)};
+    min-height: ${css_vh(4.2)};
+    padding: ${css_vh(0.5)} ${css_vh(1.3)};
+    border: 2px solid #315F7B;
+    border-radius: 10px;
+    color: #fff;
+    font-family: 'Lato Regular';
+    font-size: ${css_vh(1.7)};
+    font-weight: bold;
+    cursor: pointer;
+    -webkit-tap-highlight-color: transparent;
+}
+
+.microBitConnectionDialogButton.secondary {
+    background: #5D9CC8;
+}
+
+.microBitConnectionDialogButton.primary {
+    background: #2E9E66;
+}
+
+.microBitConnectionDialogClose:focus-visible,
+.microBitConnectionDialogButton:focus-visible,
+.microBitConnectionDialogHelp:focus-visible {
+    outline: 3px solid #133C46;
+    outline-offset: 3px;
+}
+
 /* parental gate */
 .parentalgate {
     position: fixed;
@@ -1534,9 +1728,9 @@ form.projectname {
 }
 
 *.microbitMatrixCell.on {
-    background: #35C1DF;
-    border-color: #1F8EA6;
-    box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.45), 0 0 0 2px rgba(255, 255, 255, 0.22);
+    background: #FFFFFF;
+    border-color: #C8CDD8;
+    box-shadow: inset 0 2px 0 rgba(65, 71, 87, 0.12), 0 0 0 2px rgba(65, 71, 87, 0.35);
 }
 
 *.microbitMatrixCell:active {

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

@@ -29,7 +29,7 @@
     border-radius: 10px;
     border: 3px solid #F4AD46;
 
-    width: ${css_vh(22.8)};
+    width: ${css_vh(34)};
     height: ${css_vh(12)};
 
     padding: 8px 4px;
@@ -69,20 +69,14 @@
 }
 
 .extensionAddButton {
-    position: absolute;
-    right: -${css_vh(1.45)};
-    bottom: -${css_vh(1.45)};
-    z-index: 5;
-    width: ${css_vh(5)};
-    height: ${css_vh(5)};
-    background: transparent;
-    border: 0;
-    display: none !important;
+    flex: 1 1 0;
+    min-width: 0;
+    width: auto;
+    height: 100%;
+    display: flex;
     justify-content: center;
     align-items: center;
-    cursor: pointer;
     padding: 0;
-    -webkit-tap-highlight-color: transparent;
 }
 
 .extensionAddIcon {
@@ -113,6 +107,39 @@
     transform: translateY(${css_vh(0.13)});
 }
 
+.microBitRemoveButton {
+    box-sizing: border-box;
+    position: absolute;
+    right: -${css_vh(0.9)};
+    top: -${css_vh(0.9)};
+    z-index: 6;
+    width: ${css_vh(3.4)};
+    height: ${css_vh(3.4)};
+    display: none;
+    align-items: center;
+    justify-content: center;
+    padding: 0;
+    border: 0;
+    border-radius: 50%;
+    background: url('../assets/connection/remove_extension-default.svg') no-repeat center center;
+    background-size: 100%;
+    cursor: pointer;
+    -webkit-tap-highlight-color: transparent;
+}
+
+.microBitRemoveIcon {
+    display: none;
+}
+
+.microBitRemoveButton:focus-visible {
+    outline: ${css_vh(0.3)} solid #133C46;
+    outline-offset: ${css_vh(0.15)};
+}
+
+.microBitRemoveButton:active {
+    transform: translateY(${css_vh(0.13)});
+}
+
 .connectButtonConnected {
     /* background: #4bfaa3; */
     display: grid;
@@ -168,10 +195,58 @@
     height: ${css_vh(3)};
     background-image: url('../assets/connection/disconnect_btn-default.svg');
 }
+
+#microBitConnectionButton .connectedButtonContainer {
+    position: static;
+    width: ${css_vh(8)};
+    height: ${css_vh(1.8)};
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    align-self: center;
+    justify-self: center;
+    border-radius: ${css_vh(0.9)};
+    background-color: #f173a6;
+    background-image: none;
+    color: #fff;
+    font-family: 'Lato Regular';
+    font-size: ${css_vh(0.9)};
+    font-weight: bold;
+    line-height: 1;
+}
+
+#microBitConnectionButton.connectButtonConnected {
+    grid-template-rows:
+        minmax(0, 2.4fr)
+        minmax(0, 0.85fr)
+        minmax(0, 1fr);
+}
+
+#microBitConnectionButton.connectButtonConnected .connectIcon {
+    width: ${css_vh(4.4)};
+    height: ${css_vh(4.4)};
+}
+
+#microBitConnectionButton .batteryAndSignalContainer {
+    display: none;
+}
+
+#microBitConnectionButton .raftNameConnectButton {
+    width: auto;
+    min-width: ${css_vh(4.8)};
+    height: ${css_vh(1.55)};
+    justify-content: center;
+    text-align: center;
+}
 @media (hover: hover) and (pointer: fine) {
     .connectButton:hover .connectedButtonContainer {
         background-image: url('../assets/connection/disconnect_btn-hover.svg');
     }
+
+    #microBitConnectionButton:hover .connectedButtonContainer {
+        background-color: #e71167;
+        background-image: none;
+    }
 }
 
 .raftNameConnectButton {
@@ -287,7 +362,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 +394,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 +405,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 +420,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 +553,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%;