fix: magnify button

examples/web/index.css

@@ -110,45 +110,3 @@ p {
     content: '';
     display: block;
 }
-
-.button-area {
-    user-select: none;
-    -o-user-select: none;
-    -ms-user-select: none;
-    -moz-user-select: none;
-    -khtml-user-select: none;
-    -webkit-user-select: none;
-}
-
-.button-area > * {
-    margin-bottom: 12px;
-}
-
-.magnify-button {
-    cursor: pointer;
-    display: inline-block;
-    transition: transform 0.35s cubic-bezier(0.075, 0.82, 0.165, 1);
-    -o-transition: transform 0.35s cubic-bezier(0.075, 0.82, 0.165, 1);
-    -ms-transition: transform 0.35s cubic-bezier(0.075, 0.82, 0.165, 1);
-    -moz-transition: transform 0.35s cubic-bezier(0.075, 0.82, 0.165, 1);
-    -khtml-transition: transform 0.35s cubic-bezier(0.075, 0.82, 0.165, 1);
-    -webkit-transition: transform 0.35s cubic-bezier(0.075, 0.82, 0.165, 1);
-}
-
-.magnify-button:hover {
-    transform: scale(1.3, 1.3);
-    -o-transform: scale(1.3, 1.3);
-    -ms-transform: scale(1.3, 1.3);
-    -moz-transform: scale(1.3, 1.3);
-    -khtml-transform: scale(1.3, 1.3);
-    -webkit-transform: scale(1.3, 1.3);
-}
-
-.magnify-button:active {
-    transform: scale(1.0, 1.0);
-    -o-transform: scale(1.0, 1.0);
-    -ms-transform: scale(1.0, 1.0);
-    -moz-transform: scale(1.0, 1.0);
-    -khtml-transform: scale(1.0, 1.0);
-    -webkit-transform: scale(1.0, 1.0);
-}

examples/web/react/app.tsx

@@ -501,18 +501,6 @@ export const App: FC<AppProps> = ({ emulator, backgrounds = ["264653"] }) => {
                                 />
                             }
                         />
-                        <Pair
-                            key="button-frequency"
-                            name={"CPU Frequency"}
-                            valueNode={
-                                <ButtonIncrement
-                                    value={200}
-                                    delta={100}
-                                    min={0}
-                                    suffix={"Hz"}
-                                />
-                            }
-                        />
                         <Pair
                             key="rom"
                             name={"ROM"}
@@ -523,6 +511,19 @@ export const App: FC<AppProps> = ({ emulator, backgrounds = ["264653"] }) => {
                             name={"ROM Size"}
                             value={romInfo.name ? `${romInfo.size} bytes` : "-"}
                         />
+
+                        <Pair
+                            key="button-frequency"
+                            name={"CPU Frequency"}
+                            valueNode={
+                                <ButtonIncrement
+                                    value={4.19}
+                                    delta={0.1}
+                                    min={0}
+                                    suffix={"MHz"}
+                                />
+                            }
+                        />
                         <Pair
                             key="rom-type"
                             name={"ROM Type"}

examples/web/react/components/display/display.css

@@ -15,6 +15,35 @@
     z-index: 6;
 }
 
+.display > .magnify-button {
+    cursor: pointer;
+    display: inline-block;
+    transition: transform 0.35s cubic-bezier(0.075, 0.82, 0.165, 1);
+    -o-transition: transform 0.35s cubic-bezier(0.075, 0.82, 0.165, 1);
+    -ms-transition: transform 0.35s cubic-bezier(0.075, 0.82, 0.165, 1);
+    -moz-transition: transform 0.35s cubic-bezier(0.075, 0.82, 0.165, 1);
+    -khtml-transition: transform 0.35s cubic-bezier(0.075, 0.82, 0.165, 1);
+    -webkit-transition: transform 0.35s cubic-bezier(0.075, 0.82, 0.165, 1);
+}
+
+.display > .magnify-button:hover {
+    transform: scale(1.3, 1.3);
+    -o-transform: scale(1.3, 1.3);
+    -ms-transform: scale(1.3, 1.3);
+    -moz-transform: scale(1.3, 1.3);
+    -khtml-transform: scale(1.3, 1.3);
+    -webkit-transform: scale(1.3, 1.3);
+}
+
+.display > .magnify-button:active {
+    transform: scale(1.0, 1.0);
+    -o-transform: scale(1.0, 1.0);
+    -ms-transform: scale(1.0, 1.0);
+    -moz-transform: scale(1.0, 1.0);
+    -khtml-transform: scale(1.0, 1.0);
+    -webkit-transform: scale(1.0, 1.0);
+}
+
 .display > .display-minimize {
     bottom: 22px;
     display: none;