@robotical/martyblocksjr 4.2.2 → 4.2.4

package/editions/free/src/inapp/style/interface.css

@@ -1,501 +1,226 @@
 @import url('../../css/font.css');
 
-html {
-	-webkit-user-select: none;
-	height: 100%;
-}
-
+html,
 body {
-    margin-top: ${css_vh(6)};
-}
-
-#content {
-    width: ${css_vh(164)};
-    margin-left: auto;
-    margin-right: auto;
-}
-
-#content-buffer {
-	color: #808080;
-	margin-left: ${css_vh(14.31)};
-	height: ${css_vh(7.24)};
-	font-size: ${css_vh(2.3)};
-}
-
-/* Guide Elements */
-
-.interface-dot {
-	height: ${Math.max(1, Math.ceil(5 * scaleMultiplier))}px;
-	width: ${Math.max(1, Math.ceil(5 * scaleMultiplier))}px;
-	border-radius: 50%;
-	background-color: #333333;
-	position: absolute;
-}
-
-.interface-vertical-line {
-	border-left: 1px solid black;
-	position: absolute;
-}
-
-.interface-horizontal-line {
-	border-top: 1px solid black;
-	position: absolute;
-}
-
-.interface-button {
-	font-family: 'Lato Regular', arial, sans-serif;
-	border-radius: 50%;
-	position: absolute;
-	background-color: #ffffff;
-	border: 1px solid #808080;
-	width: ${css_vh(5.26)};
-	height: ${css_vh(5.26)};
-	text-align: center;
-	cursor: pointer;
-	-webkit-tap-highlight-color: rgba(0,0,0,0);
-	padding: 0;
-}
-
-.interface-button-text {
-	padding: ${css_vh(1.15)};
-    font-size: ${css_vh(2.3)};
-}
-
-.interface-button-selected {
-	border: 1px solid #2898CD;
-	color: #2898CD;
-}
-
-/* Guide 1 - Interface Guide */
-
-/* 1. Save */
-
-#interface-button-save {
-	left: ${css_vh(30.59)};
-	top: ${css_vh(-6.25)};
-}
-
-#interface-vertical-line-save {
-	height: ${css_vh(2.47)};
-	top: ${css_vh(-0.82)};
-	left: ${css_vh(33.55)};
-}
-
-#interface-dot-save {
-	top: ${css_vh(1.15)};
-	left: ${css_vh(33.22)};
-}
-
-/* 2. Stage */
-
-#interface-button-stage {
-	left: ${css_vh(37.34)};
-	top: ${css_vh(-6.25)};
-}
-
-#interface-vertical-line-stage-1 {
-	height: ${css_vh(26.4)};
-	top: ${css_vh(-0.82)};
-	left: ${css_vh(39.97)};
-}
-
-#interface-horizontal-line-stage-1 {
-	width: ${css_vh(1.81)};
-	top: ${css_vh(25.59)};
-	left: ${css_vh(39.97)};
-}
-
-#interface-vertical-line-stage-2 {
-	height: ${css_vh(34.05)};
-	top: ${css_vh(7.07)};
-	left: ${css_vh(41.61)};
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+    -webkit-user-select: none;
 }
 
-#interface-horizontal-line-stage-2 {
-	width: ${css_vh(1.32)};
-	top: ${css_vh(7.07)};
-	left: ${css_vh(41.61)};
-}
-
-#interface-horizontal-line-stage-3 {
-	width: ${css_vh(1.32)};
-	top: ${css_vh(41.12)};
-	left: ${css_vh(41.61)};
-}
-
-/* 3. Presentation Mode */
-
-#interface-button-presentation-mode {
-    left: ${css_vh(43.09)};
-    top: ${css_vh(-6.25)};
-}
-
-#interface-vertical-line-presentation-mode {
-    height: ${css_vh(2.47)};
-    top: ${css_vh(-0.82)};
-    left: ${css_vh(45.72)};
-}
-
-#interface-dot-presentation-mode {
-    top: ${css_vh(1.32)};
-    left: ${css_vh(45.39)};
-}
-
-/* 4. Grid */
-
-#interface-button-grid {
-    left: ${css_vh(48.85)};
-    top: ${css_vh(-6.25)};
-}
-
-#interface-vertical-line-grid {
-    height: ${css_vh(2.14)};
-    top: ${css_vh(-0.82)};
-    left: ${css_vh(51.64)};
-}
-
-#interface-dot-grid {
-    top: ${css_vh(1.32)};
-    left: ${css_vh(51.32)};
-}
-
-/* 5. Change Background */
-
-#interface-button-add-text {
-    left: ${css_vh(60.69)};
-    top: ${css_vh(-6.25)};
-}
-
-#interface-vertical-line-add-text {
-    height: ${css_vh(1.97)};
-    top: ${css_vh(-0.82)};
-    left: ${css_vh(63.32)};
-}
-
-#interface-dot-add-text {
-    top: ${css_vh(1.15)};
-    left: ${css_vh(62.99)};
-}
-
-/* 6. Add Text */
-
-#interface-button-change-background {
-    left: ${css_vh(66.78)};
-    top: ${css_vh(-6.25)};
-}
-
-#interface-vertical-line-change-background {
-    height: ${css_vh(2.14)};
-    top: ${css_vh(-0.82)};
-    left: ${css_vh(69.41)};
-}
-
-#interface-dot-change-background {
-    top: ${css_vh(1.32)};
-    left: ${css_vh(69.08)};
-}
-
-/* 7. Reset Characters */
-
-#interface-button-reset-characters {
-    left: ${css_vh(77.47)};
-    top: ${css_vh(-6.25)};
-}
-
-#interface-vertical-line-reset-characters {
-    height: ${css_vh(1.81)};
-    top: ${css_vh(-0.82)};
-    left: ${css_vh(80.10)};
-}
-
-#interface-dot-reset-characters {
-    top: ${css_vh(0.99)};
-    left: ${css_vh(79.77)};
-}
-
-/* 8. Green Flag */
-
-#interface-button-green-flag {
-    left: ${css_vh(83.39)};
-    top: ${css_vh(-6.25)};
-}
-
-#interface-vertical-line-green-flag {
-    height: ${css_vh(1.81)};
-    top: ${css_vh(-0.82)};
-    left: ${css_vh(86.18)};
-}
-
-#interface-dot-green-flag {
-    top: ${css_vh(0.99)};
-    left: ${css_vh(85.86)};
-}
-
-/* 9. Pages */
-
-#interface-button-pages {
-    left: ${css_vh(96.22)};
-    top: ${css_vh(-6.25)};
-}
-
-#interface-vertical-line-pages {
-    height: ${css_vh(2.47)};
-    top: ${css_vh(-0.82)};
-    left: ${css_vh(99.01)};
-}
-
-#interface-dot-pages {
-    top: ${css_vh(1.64)};
-    left: ${css_vh(98.68)};
-}
-
-/* 10. Project Information */
-
-#interface-button-project-information {
-    left: ${css_vh(106.09)};
-    top: ${css_vh(-6.25)};
-}
-
-#interface-vertical-line-project-information {
-    height: ${css_vh(2.14)};
-    top: ${css_vh(-0.82)};
-    left: ${css_vh(108.88)};
-}
-
-#interface-dot-project-information {
-    top: ${css_vh(1.32)};
-    left: ${css_vh(108.55)};
-}
-
-/* 16. Characters */
-
-#interface-button-characters {
-    left: ${css_vh(18.91)};
-    top: ${css_vh(73.68)};
-}
-
-#interface-vertical-line-characters-1 {
-    height: ${css_vh(1.32)};
-    top: ${css_vh(36.18)};
-    left: ${css_vh(15.95)};
-}
-
-#interface-vertical-line-characters-3 {
-    height: ${css_vh(1.32)};
-    top: ${css_vh(36.18)};
-    left: ${css_vh(37.17)};
-}
-
-#interface-horizontal-line-characters {
-    width: ${css_vh(21.5)};
-    top: ${css_vh(37.50)};
-    left: ${css_vh(15.95)};
-}
-
-#interface-vertical-line-characters-2 {
-    height: ${css_vh(36.18)};
-    top: ${css_vh(37.50)};
-    left: ${css_vh(21.71)};
-}
-
-/* 15. Block Categories */
-
-#interface-button-block-categories {
-    left: ${css_vh(29.61)};
-    top: ${css_vh(73.68)};
-}
-
-#interface-vertical-line-block-categories-1 {
-    height: ${css_vh(0.99)};
-    top: ${css_vh(50.00)};
-    left: ${css_vh(15.63)};
-}
-
-#interface-vertical-line-block-categories-3 {
-    height: ${css_vh(0.99)};
-    top: ${css_vh(50.00)};
-    left: ${css_vh(46.05)};
-}
-
-#interface-horizontal-line-block-categories {
-    width: ${css_vh(30.59)};
-    top: ${css_vh(50.99)};
-    left: ${css_vh(15.63)};
-}
-
-#interface-vertical-line-block-categories-2 {
-    height: ${css_vh(22.70)};
-    top: ${css_vh(50.99)};
-    left: ${css_vh(32.40)};
-}
-
-/* 14. Block Palette */
-
-#interface-button-block-palette {
-    left: ${css_vh(59.70)};
-    top: ${css_vh(73.68)};
-}
-
-#interface-vertical-line-blocks-palette-1 {
-    height: ${css_vh(1.32)};
-    top: ${css_vh(50.66)};
-    left: ${css_vh(48.36)};
-}
-
-#interface-vertical-line-blocks-palette-3 {
-    height: ${css_vh(1.32)};
-    top: ${css_vh(50.66)};
-    left: ${css_vh(98.1)};
-}
-
-#interface-horizontal-line-blocks-palette {
-    width: ${css_vh(50.16)};
-    top: ${css_vh(51.97)};
-    left: ${css_vh(48.36)};
-}
-
-#interface-vertical-line-blocks-palette-2 {
-    height: ${css_vh(21.71)};
-    top: ${css_vh(51.97)};
-    left: ${css_vh(62.50)};
-}
-
-/* 13. Programming Area */
-
-#interface-button-programming-area {
-    left: ${css_vh(68.09)};
-    top: ${css_vh(73.68)};
+body {
+    background: #F9F8F2;
 }
 
-#interface-vertical-line-programming-area {
-    height: ${css_vh(4.11)};
-    top: ${css_vh(69.74)};
-    left: ${css_vh(70.72)};
+#content,
+#ipad-project-view-wrapper {
+    box-sizing: border-box;
+    width: 100%;
+    height: 100%;
 }
 
-#interface-dot-programming-area {
-    top: ${css_vh(69.08)};
-    left: ${css_vh(70.39)};
+#content {
+    padding: 2vh 1.5vw;
 }
 
-/* 12. Programming Script */
-
-#interface-button-programming-script {
-    left: ${css_vh(76.48)};
-    top: ${css_vh(73.68)};
+.learn-tab {
+    display: none;
 }
 
-#interface-vertical-line-programming-script-1 {
-    height: ${css_vh(1.64)};
-    top: ${css_vh(63.32)};
-    left: ${css_vh(65.79)};
+.learn-tab-selected {
+    display: flex;
 }
 
-#interface-vertical-line-programming-script-3 {
-    height: ${css_vh(1.64)};
-    top: ${css_vh(63.32)};
-    left: ${css_vh(93.09)};
+.learn-interface {
+    box-sizing: border-box;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    height: 100%;
 }
 
-#interface-horizontal-line-programming-script {
-    width: ${css_vh(27.47)};
-    top: ${css_vh(64.97)};
-    left: ${css_vh(65.79)};
+.interface-preview {
+    position: relative;
+    flex: 0 1 auto;
+    width: min(72vw, calc(80vh * 1.93731));
+    min-width: 0;
+    margin-right: 1.5vw;
+    border: 2px solid #D8D2C1;
+    border-radius: 12px;
+    background: #FFFFFF;
+    box-shadow: 0 5px 18px rgba(38, 38, 38, 0.18);
 }
 
-#interface-vertical-line-programming-script-2 {
-    height: ${css_vh(8.55)};
-    top: ${css_vh(65.13)};
-    left: ${css_vh(79.11)};
+.ipad-project-view {
+    position: relative;
+    z-index: 0;
+    display: block;
+    width: 100%;
+    height: auto;
+    border-radius: 10px;
 }
 
-/* 11. Undo Redo */
-
-#interface-button-undo-redo {
-    left: ${css_vh(102.80)};
-    top: ${css_vh(73.68)};
+.interface-connectors {
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: 1;
+    width: 100%;
+    height: 100%;
+    overflow: visible;
+    pointer-events: none;
 }
 
-#interface-vertical-line-undo-redo-1 {
-    height: ${css_vh(1.32)};
-    top: ${css_vh(50.66)};
-    left: ${css_vh(100.66)};
+.interface-connector line {
+    fill: none;
+    stroke: #4A4A4A;
+    stroke-width: 2;
+    stroke-linecap: round;
+    vector-effect: non-scaling-stroke;
 }
 
-#interface-vertical-line-undo-redo-3 {
-    height: ${css_vh(1.32)};
-    top: ${css_vh(50.66)};
-    left: ${css_vh(110.20)};
+.interface-connector circle {
+    fill: #FFFFFF;
+    stroke: #4A4A4A;
+    stroke-width: 2;
+    vector-effect: non-scaling-stroke;
 }
 
-#interface-horizontal-line-undo-redo {
-    width: ${css_vh(9.70)};
-    top: ${css_vh(51.97)};
-    left: ${css_vh(100.66)};
+.interface-connector-selected line,
+.interface-connector-selected circle {
+    stroke: #167DA8;
+    stroke-width: 3;
 }
 
-#interface-vertical-line-undo-redo-2 {
-    height: ${css_vh(21.88)};
-    top: ${css_vh(51.97)};
-    left: ${css_vh(105.43)};
+.interface-connector-selected circle {
+    fill: #167DA8;
 }
 
-#right-column {
-	display: block;
-	overflow: auto;
-	width: ${css_vh(45.39)};
+.interface-button {
+    box-sizing: border-box;
+    position: absolute;
+    left: var(--x);
+    top: var(--y);
+    z-index: 2;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 2.1vw;
+    min-width: 24px;
+    max-width: 34px;
+    height: 2.1vw;
+    min-height: 24px;
+    max-height: 34px;
+    border: 2px solid #777777;
+    border-radius: 50%;
+    background: rgba(255, 255, 255, 0.96);
+    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.32);
+    color: #4A4A4A;
+    font-family: 'Lato Regular', Arial, sans-serif;
+    font-size: 13px;
+    font-weight: bold;
+    line-height: 1;
+    cursor: pointer;
+    transform: translate(-50%, -50%);
+    transition: background 120ms ease, border-color 120ms ease, color 120ms ease, transform 120ms ease;
+    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+}
+
+.interface-button > span {
+    position: relative;
+    z-index: 1;
+    color: inherit;
+}
+
+.interface-button:hover,
+.interface-button:focus {
+    border-color: #167DA8;
+    color: #167DA8;
+    transform: translate(-50%, -50%) scale(1.1);
+}
+
+.interface-button-selected,
+.interface-button-selected:hover,
+.interface-button-selected:focus {
+    border: 3px solid #167DA8;
+    background: #FFFFFF;
+    box-shadow: 0 0 0 2px rgba(22, 125, 168, 0.22), 0 2px 5px rgba(0, 0, 0, 0.32);
+    color: #0D668D;
+}
+
+.interface-button:focus,
+.interface-button-selected:focus {
+    outline: none;
+    box-shadow: 0 0 0 2px #FFFFFF, 0 0 0 5px #167DA8, 0 2px 5px rgba(0, 0, 0, 0.32);
 }
 
 #interface-key {
-	width: ${css_vh(36.35)};
-	height: ${css_vh(72.53)};
-	float: left;
-	margin-left: ${css_vh(9.05)};
-	background-image: url("../images/keybackground.png");
-	background-size: 100%;
-	background-repeat: no-repeat;
+    box-sizing: border-box;
+    flex: 0 0 auto;
+    width: min(24vw, 340px);
+    min-width: 220px;
+    max-height: 88vh;
+    overflow: auto;
+    padding: 22px 22px 24px;
+    border: 3px solid #F4AD46;
+    border-radius: 16px;
+    background: #FFFDF5;
+    box-shadow: 0 4px 14px rgba(38, 38, 38, 0.14);
+}
+
+.interface-key-eyebrow {
+    margin-bottom: 10px;
+    color: #996116;
+    font-size: 13px;
+    font-weight: bold;
+    letter-spacing: 0.08em;
+    text-transform: uppercase;
 }
 
 #interface-key-header {
-	font-size: ${css_vh(3)};
-	padding-top: ${css_vh(1.64)};
-	padding-left: ${css_vh(1.64)};
-	color: #2898CD;
+    color: #167DA8;
+    font-size: 24px;
+    font-weight: bold;
+    line-height: 1.2;
 }
 
 #interface-key-description {
-    color: #808080;
-    line-height: ${css_vh(3.62)};
-    padding-top: ${css_vh(0.82)};
-    padding-right: ${css_vh(2.47)};
-    font-size: ${css_vh(2.3)};
-    margin-right: ${css_vh(0.82)};
-    margin-left: ${css_vh(3.29)};
-}
-
-#video-wrapper {
-    margin-top: ${css_vh(1.97)};
-    float: left;
-    margin-left: ${css_vh(9.05)};
+    margin-top: 14px;
+    color: #555555;
+    font-size: 17px;
+    line-height: 1.45;
 }
 
-#ipad-project-view-wrapper {
-	position: relative;
+.interface-key-hint {
+    margin-top: 24px;
+    padding-top: 16px;
+    border-top: 1px solid #E3D8BF;
+    color: #777777;
+    font-size: 14px;
+    line-height: 1.4;
 }
 
-.learn-tab {
-	display: none;
-}
+@media (max-width: 900px) {
+    #content {
+        padding: 1.5vh 1vw;
+    }
 
-.learn-tab-selected {
-	display: inline;
-}
+    .interface-preview {
+        width: min(70vw, calc(80vh * 1.93731));
+        margin-right: 1vw;
+    }
 
-.ipad-project-view {
-	margin-left: ${css_vh(14.31)};
-	float: left;
-	height: ${css_vh(72.70)};
-}
+    #interface-key {
+        width: 27vw;
+        min-width: 190px;
+        padding: 16px;
+    }
 
+    #interface-key-header {
+        font-size: 20px;
+    }
 
-/* End Guide 3 - Block Descriptions */
+    #interface-key-description {
+        font-size: 15px;
+    }
+}