@robotical/martyblocksjr 3.5.34 → 4.0.1

package/editions/free/src/css/base.css

@@ -61,6 +61,83 @@ body {
     touch-action: none;
 }
 
+button,
+a,
+input,
+select,
+textarea {
+    font: inherit;
+}
+
+button {
+    background: none;
+    border: 0;
+    color: inherit;
+    cursor: pointer;
+    padding: 0;
+    appearance: none;
+    -webkit-appearance: none;
+}
+
+.skip-link {
+    position: absolute;
+    top: -48px;
+    left: 12px;
+    z-index: 200000;
+    padding: 8px 12px;
+    background: #133C46;
+    color: #ffffff;
+    text-decoration: none;
+    border-radius: 6px;
+}
+
+.skip-link:focus,
+.skip-link:active {
+    top: 12px;
+}
+
+.sr-only {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    border: 0;
+}
+
+.sr-only-focusable {
+    position: absolute;
+    top: 8px;
+    left: 8px;
+    opacity: 0;
+    pointer-events: none;
+}
+
+.sr-only-focusable:focus,
+.sr-only-focusable:focus-visible {
+    opacity: 1;
+    pointer-events: auto;
+    z-index: 5;
+    padding: 6px 10px;
+    background: rgba(19, 60, 70, 0.95);
+    color: #ffffff;
+    border-radius: 6px;
+}
+
+button:focus-visible,
+a:focus-visible,
+input:focus-visible,
+textarea:focus-visible,
+select:focus-visible,
+iframe:focus-visible,
+[tabindex]:focus-visible {
+    outline: 3px solid #133C46;
+    outline-offset: 3px;
+}
+
 /* Set default, padding, margin and font-size on block elements */
 h1 {
     font-size: 1.23em;
@@ -101,7 +178,7 @@ h4 {
 }
 
 @media screen and (orientation: portrait) {
-    html {
+    html:not(.embedded-in-parent-app) {
         transform: rotate(-90deg);
         transform-origin: left top;
         width: 100vh;

package/editions/free/src/css/connection-modal.css

@@ -63,10 +63,15 @@
 .cancel-button {
     background-color: var(--colour-MAIN_BLUE);
     border: none;
-    outline: none;
     color: white;
     padding: 10px 20px;
     border-radius: 5px;
     cursor: pointer;
 
 }
+
+.connect-button:focus-visible,
+.cancel-button:focus-visible {
+    outline: 3px solid #133C46;
+    outline-offset: 3px;
+}

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

@@ -113,6 +113,7 @@ div.frame {
 
 .pagethumb {
     background: none;
+    position: relative;
     display: inline-block;
     margin: ${css_vh(0)} ${css_vh(0)} ${css_vh(0.13)};
     padding: ${css_vh(0)};
@@ -120,6 +121,14 @@ div.frame {
     height: ${109 * scaleMultiplier}px;
 }
 
+.pagethumb[role="button"] {
+    cursor: pointer;
+}
+
+.pagethumb[role="button"]:focus-visible {
+    outline-offset: 4px;
+}
+
 .pagethumb.on {
     background: url('../assets/ui/pageOn.png');
     background-size: 100% 100%;
@@ -271,6 +280,25 @@ div.frame {
     overflow: hidden;
 }
 
+#blockspalette .categoryselector button,
+#blockspalette .categoryselectorright button{
+    display: block;
+    background: transparent;
+    border: 0;
+    padding: 0;
+    line-height: 0;
+    cursor: pointer;
+    overflow: hidden;
+    box-sizing: border-box;
+    appearance: none;
+    -webkit-appearance: none;
+}
+
+#blockspalette .categoryselector button:focus-visible,
+#blockspalette .categoryselectorright button:focus-visible{
+    outline-offset: 4px;
+}
+
 #blockspalette .categoryselectorright{
     display: inline-block;
     word-spacing: -1;
@@ -313,6 +341,16 @@ div.frame {
     overflow: hidden;
 }
 
+#blockspalette .paletteblock,
+#blockspalette .paletteRecordButton{
+    cursor: pointer;
+}
+
+#blockspalette .paletteblock:focus-visible,
+#blockspalette .paletteRecordButton:focus-visible{
+    outline-offset: 4px;
+}
+
 #blockspalette .yellow { background: #FFE75A;}    /* #ffe100;}{ background: #FFFA5A;} */
 #blockspalette .blue { background: #4B8CC2;}
 #blockspalette .pink { background: #CD7CD1;}
@@ -501,6 +539,20 @@ z-index: 5;
     position: absolute;
 }
 
+#scriptscontainer .keyboard-script-strip[role="button"] {
+    cursor: pointer;
+}
+
+#scriptscontainer .keyboard-script-strip:focus-visible {
+    outline-offset: 6px;
+    border-radius: 12px;
+}
+
+#scriptscontainer .keyboard-script-strip[aria-pressed="true"]:not(:focus-visible) {
+    box-shadow: 0 0 0 3px rgba(15, 95, 255, 0.35);
+    border-radius: 12px;
+}
+
 .watermark {
     position: absolute;
     top: ${css_vh(2.60)};
@@ -652,13 +704,13 @@ z-index: 5;
     background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255, 255, 255, 0.2)), color-stop(35%,rgba(255, 255, 255, 0)), color-stop(100%,rgba(255, 255, 255, 0)));
 }
 
-div.infoboxParentsSection {
+.infoboxParentsSection {
    width: 51%;
    margin: auto;
    margin-top: 8%;
 }
 
-div.infoboxParentsButton {
+.infoboxParentsButton {
    color: #fff;
    background-image: linear-gradient(0deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0) 50%, rgba(255,255,255,0.2) 51%);
    text-transform: uppercase;
@@ -676,14 +728,14 @@ div.infoboxParentsButton {
    margin: auto;
 }
 
-div.infoboxShareButtons {
+.infoboxShareButtons {
    width: 51%;
    margin: auto;
    margin-top: 8%;
    visibility: hidden;
 }
 
-div.infoboxShareButton {
+.infoboxShareButton {
    color: #fff;
    background-image: linear-gradient(0deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0) 50%, rgba(255,255,255,0.2) 51%);
    text-transform: uppercase;
@@ -701,7 +753,7 @@ div.infoboxShareButton {
    margin: auto;
 }
 
-div.infoboxCloudSection {
+.infoboxCloudSection {
    width: 60%;
    margin: auto;
    margin-top: 6%;
@@ -710,7 +762,7 @@ div.infoboxCloudSection {
    align-items: center;
 }
 
-div.infoboxCloudButton {
+.infoboxCloudButton {
    color: #fff;
    background-image: linear-gradient(0deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0) 50%, rgba(255,255,255,0.2) 51%);
    text-transform: uppercase;
@@ -727,11 +779,11 @@ div.infoboxCloudButton {
    border: 2px solid #c19f21;
 }
 
-div.infoboxCloudButton:active {
+.infoboxCloudButton:active {
    filter: brightness(0.9);
 }
 
-div.infoboxCloudControls {
+.infoboxCloudControls {
    display: flex;
    justify-content: center;
    gap: ${css_vw(1.5)};
@@ -739,7 +791,7 @@ div.infoboxCloudControls {
    width: 100%;
 }
 
-div.infoboxCloudToggleButton {
+.infoboxCloudToggleButton {
    color: #fff;
    background: rgba(255,255,255,0.1);
    text-transform: uppercase;
@@ -752,16 +804,16 @@ div.infoboxCloudToggleButton {
    cursor: pointer;
 }
 
-div.infoboxCloudToggleButton.active {
+.infoboxCloudToggleButton.active {
    background: #f4a621;
    border-color: #9b6f14;
 }
 
-div.infoboxCloudPanels {
+.infoboxCloudPanels {
    width: 100%;
 }
 
-div.infoboxCloudPanel {
+.infoboxCloudPanel {
    display: none;
    margin-top: ${css_vh(2)};
    padding: ${css_vh(1.2)} ${css_vw(2)};
@@ -771,18 +823,18 @@ div.infoboxCloudPanel {
    box-sizing: border-box;
 }
 
-div.infoboxCloudPanel.show {
+.infoboxCloudPanel.show {
    display: block;
 }
 
-div.infoboxCloudDescription {
+.infoboxCloudDescription {
    text-align: center;
    color: #5b3c00;
    font-weight: bold;
    margin-bottom: ${css_vh(1.2)};
 }
 
-div.infoboxCloudLoadActions {
+.infoboxCloudLoadActions {
    display: flex;
    justify-content: center;
    gap: ${css_vw(1.2)};
@@ -790,7 +842,7 @@ div.infoboxCloudLoadActions {
    margin-bottom: ${css_vh(1)};
 }
 
-div.infoboxCloudSecondaryButton {
+.infoboxCloudSecondaryButton {
    color: #fff;
    background: rgba(255,255,255,0.1);
    text-transform: uppercase;
@@ -803,11 +855,11 @@ div.infoboxCloudSecondaryButton {
    cursor: pointer;
 }
 
-div.infoboxCloudSecondaryButton:active {
+.infoboxCloudSecondaryButton:active {
    filter: brightness(0.92);
 }
 
-div.infoboxCloudList {
+.infoboxCloudList {
    width: 100%;
    max-height: ${css_vh(30)};
    overflow-y: auto;
@@ -815,8 +867,8 @@ div.infoboxCloudList {
    border-radius: 12px;
 }
 
-div.infoboxCloudListHeader,
-div.infoboxCloudRow {
+.infoboxCloudListHeader,
+.infoboxCloudRow {
    display: grid;
    grid-template-columns: 2fr 2fr 2fr 1.5fr;
    align-items: center;
@@ -824,36 +876,36 @@ div.infoboxCloudRow {
    padding: ${css_vh(0.8)} ${css_vw(1)};
 }
 
-div.infoboxCloudCell {
+.infoboxCloudCell {
    overflow-wrap: anywhere;
    color: #3d2800;
 }
 
-div.infoboxCloudListHeader {
+.infoboxCloudListHeader {
    font-weight: bold;
    color: #5b3c00;
    border-bottom: 2px solid rgba(91,60,0,0.2);
 }
 
-div.infoboxCloudRow:nth-child(even) {
+.infoboxCloudRow:nth-child(even) {
    background: rgba(255,255,255,0.08);
 }
 
-div.infoboxCloudListEmpty {
+.infoboxCloudListEmpty {
    text-align: center;
    color: #5b3c00;
    font-style: italic;
    padding: ${css_vh(1.2)};
 }
 
-div.infoboxCloudCell.actions {
+.infoboxCloudCell.actions {
    display: flex;
    gap: ${css_vw(0.8)};
    justify-content: flex-end;
    flex-wrap: wrap;
 }
 
-div.infoboxCloudActionButton {
+.infoboxCloudActionButton {
    color: #fff;
    font-weight: bold;
    text-transform: uppercase;
@@ -864,26 +916,26 @@ div.infoboxCloudActionButton {
    cursor: pointer;
 }
 
-div.infoboxCloudActionButton.primary {
+.infoboxCloudActionButton.primary {
    background: #32a852;
    border-color: #1f6d35;
 }
 
-div.infoboxCloudActionButton.danger {
+.infoboxCloudActionButton.danger {
    background: #d9534f;
    border-color: #8a2d2b;
 }
 
-div.infoboxCloudActionButton:active {
+.infoboxCloudActionButton:active {
    filter: brightness(0.9);
 }
 
-div.infoboxCloudCell.id {
+.infoboxCloudCell.id {
    font-family: 'Courier New', Courier, monospace;
    font-size: 12pt;
 }
 
-div#infoboxShareButtonEmail::before {
+#infoboxShareButtonEmail::before {
    content: "";
    position: absolute;
    display: block;
@@ -897,7 +949,7 @@ div#infoboxShareButtonEmail::before {
    margin-top: -4%;
 }
 
-div#infoboxShareButtonAirdrop::before {
+#infoboxShareButtonAirdrop::before {
    content: "";
    position: absolute;
    display: block;
@@ -1265,7 +1317,7 @@ Blocks text fields and input fields
     background: #ffffff;
     -moz-border-radius: ${5 * scaleMultiplier}px;
     -webkit-border-radius: ${5 * scaleMultiplier}px;
-    outline: 0px solid;
+    outline: 2px solid transparent;
     text-align: center;
     color: #77787b;
     font-family: Verdana;
@@ -1280,7 +1332,7 @@ Blocks text fields and input fields
     border: 2px solid  #28A5DA;
     -moz-border-radius: ${5 * scaleMultiplier}px;
     -webkit-border-radius: ${5 * scaleMultiplier}px;
-    outline-color: rgba(0, 0, 0, 0);
+    outline-color: #133C46;
     width: ${css_vh(62.51)};
     height: ${css_vh(6.25)};
     font-size: ${css_vh(3.13)};

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

@@ -261,6 +261,14 @@
     padding: 0px;
 }
 
+.spritethumb[role="button"] {
+    cursor: pointer;
+}
+
+.spritethumb[role="button"]:focus-visible {
+    outline-offset: 4px;
+}
+
 .spritethumb .thumbcanvas{
     position: absolute;
     margin: ${css_vh(0.65)} ${css_vh(0.65)} 0px;

package/editions/free/src/css/editorstage.css

@@ -196,7 +196,11 @@
     cursor: default;
     background: white;
     width: ${css_vh(62.50)};
-    outline: 0px;
+    outline: 2px solid transparent;
+}
+
+*.edittext:focus-visible {
+    outline-color: #133C46;
 }
 
 .pagetextactions {

package/editions/free/src/css/lobby.css

@@ -52,6 +52,13 @@ div.frame {
     border-right: 1px solid #ADACA6;
 }
 
+.topbar-tab {
+    display: block;
+    height: ${css_vh(10.29)};
+    width: 100%;
+    padding: 0;
+}
+
 #topbar ul.topbar-nav>div {
     display: inline-block;
     margin: 1px -3px 0px;
@@ -61,10 +68,15 @@ div.frame {
     background: white;
 }
 
-#topbar ul.topbar-nav li.logo {
+#topbar ul.topbar-nav>li>button.logo {
     width: ${css_vh(32)};
 }
 
+#logotab {
+    visibility: hidden;
+    pointer-events: none;
+}
+
 #topbar ul.topbar-nav .logo .logo-icon {
     display: block;
     width: ${css_vh(28.65)};
@@ -75,7 +87,7 @@ div.frame {
     margin: auto auto;
 }
 
-#topbar ul.topbar-nav li.home {
+#topbar ul.topbar-nav>li>button.home {
     width: ${css_vh(16)};
 }
 
@@ -89,7 +101,7 @@ div.frame {
     margin: auto auto;
 }
 
-#topbar ul.topbar-nav li.help {
+#topbar ul.topbar-nav>li>button.help {
     width: ${css_vh(16)};
 }
 
@@ -123,7 +135,6 @@ div.frame {
 }
 
 #topbar ul.reference>li {
-    width: ${css_vh(16)};
     display: inline-block;
     margin: 1px 0px 0px;
     padding: 0px;
@@ -132,6 +143,10 @@ div.frame {
     border-left: 1px solid white;
 }
 
+#topbar ul.reference>li>button {
+    width: ${css_vh(16)};
+}
+
 #topbar ul.reference .book .book-icon {
     display: block;
     width: ${css_vh(12.63)};
@@ -229,7 +244,7 @@ ul#settings.reference {
     vertical-align: middle;
 }
 
-.topsection.home >div.tabicon {
+.topsection.home > .tabicon {
     display: none;
 }
 
@@ -270,7 +285,7 @@ ul#settings.reference {
     border-bottom: 1px solid #E8E3CA;
 }
 
-.topsection.help >div.tabicon {
+.topsection.help > .tabicon {
     display: block;
     margin: 0px auto ${css_vh(1.3)};
     width: ${css_vh(39)};
@@ -294,7 +309,7 @@ div.languagebuttons {
     display: inline-block;
 }
 
-div.localizationselect {
+.localizationselect {
     border-radius: 15px;
     width: ${css_vw(23)};
     height: 47pt;
@@ -310,13 +325,14 @@ div.localizationselect {
     margin: 0 ${css_vw(1.68)} ${css_vw(2)};
     padding-top: 2%;
     background-image: linear-gradient(0deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0) 50%, rgba(255,255,255,0.2) 51%);
+    padding: 0;
 }
 
-div.localizationselect.selected {
+.localizationselect.selected {
     background-color: #F9A737;
 }
 
-div.localizationselect.selected:after {
+.localizationselect.selected:after {
     display: block;
     content: ' ';
     background-image: url('../assets/ui/languageConfirm.svg');
@@ -372,6 +388,9 @@ div.localizationselect.selected:after {
     position: absolute;
     width: ${css_vw(16.66)};
     height: ${css_vh(10.15)};
+    display: block;
+    padding: 0;
+    color: inherit;
 }
 
 #footer ul.footer-nav .tab,

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

@@ -8,6 +8,11 @@
     vertical-align: top;
 }
 
+.projectthumb:focus-within,
+.samplethumb:focus-within {
+    z-index: 10;
+}
+
 .aproject {
     margin: 0px;
     padding: 0px;
@@ -143,6 +148,19 @@
 .samplethumb .thumb.pos6 { -webkit-transform: rotateZ(-0.3deg);}
 .samplethumb .thumb.pos7 { -webkit-transform: rotateZ(1deg);}
 
+.lobby-card-action {
+    min-width: ${css_vh(12)};
+}
+
+.card-action-open {
+    left: 8px;
+}
+
+.card-action-delete {
+    left: auto;
+    right: 8px;
+}
+
 .closex {
     position: relative;
     float: left;

package/editions/free/src/css/tutorial.css

@@ -172,6 +172,7 @@
     /* padding: 2.5px 5px; */
     margin-left: -12px;
     cursor: pointer;
+    padding: 0;
 }
 .speechBubbleNextStep {
     background: #E6E6E6;
@@ -180,6 +181,7 @@
     /* padding: 2.5px 5px; */
     margin-right: -12px;
     cursor: pointer;
+    padding: 0;
 
 }
 
@@ -234,6 +236,9 @@
     font-size: 28px;
     font-weight: bold;
     cursor: pointer;
+    background: none;
+    border: 0;
+    line-height: 1;
 }
 
 .closeModal:hover,
@@ -286,4 +291,4 @@
     100% {
       transform: scale(2);
     }
-  }
+  }