diff --git a/examples/web/index.css b/examples/web/index.css index b04f343ef68c88436568065ffe6d125bbb4ed092..d8dd1b1daf19c6ae8772aadec8ad2ac13a9123ab 100644 --- a/examples/web/index.css +++ b/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); -} diff --git a/examples/web/react/app.tsx b/examples/web/react/app.tsx index e7191f855a83d2c72088beb7bb40f00cfd0f510c..089ac297291365f365488d3d791893109adf40d4 100644 --- a/examples/web/react/app.tsx +++ b/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"} diff --git a/examples/web/react/components/display/display.css b/examples/web/react/components/display/display.css index 1912fc41e8776596267b7f70496f50ae768bdd59..0781b767f944e7c3e73c50e0533e63bd6cd9f49c 100644 --- a/examples/web/react/components/display/display.css +++ b/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;