diff --git a/samples/calc-02/index.css b/samples/calc-02/index.css index 865e6b9..8030897 100644 --- a/samples/calc-02/index.css +++ b/samples/calc-02/index.css @@ -32,6 +32,7 @@ html, body { margin: 0; min-height: 100%; + overflow-y: hidden; } body { @@ -52,62 +53,22 @@ body { .calculator { width: 100%; max-width: 460px; - height: 100%; - max-height: 100%; - display: grid; + height: 100vh; + max-height: 100vh; padding: 8px; border-radius: 8px; background: var(--panel); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08); - grid-template-columns: 1fr; - grid-template-rows: auto auto auto auto auto; - gap: 6px; justify-content: stretch; align-content: start; overflow-y: auto; -} - -.calculator > .display-block { - grid-row: 1; -} - -.calculator > .display-buttons-panel { - grid-row: 2; -} - -.calculator > .keypad-panel { - grid-row: 3; -} - -.calculator > .functions-panel { - grid-row: 4; -} - -.calculator > .trigo-panel { - grid-row: 5; -} - -.display-buttons-panel, -.keypad-panel, -.functions-panel, -.trigo-panel { - align-self: start; - justify-self: stretch; -} - -.keypad-panel, -.functions-panel, -.trigo-panel { - overflow: auto; - min-height: 0; -} - -.calculator > .trigo-panel { - margin-top: 0; + scrollbar-width: thin; + scrollbar-color: rgba(46, 105, 135, 1); } .display-block, .display-panel, +.display-buttons-panel, .keypad-panel, .functions-panel, .trigo-panel { @@ -117,13 +78,6 @@ body { box-shadow: none; } -.display-buttons-panel { - border-radius: 8px; - border: 1px solid rgba(255, 255, 255, 0.06); - background: rgba(6, 10, 16, 0.16); - box-shadow: none; -} - .display-block { display: grid; gap: 0; diff --git a/samples/calc-02/index.html b/samples/calc-02/index.html index c38e255..28cd242 100644 --- a/samples/calc-02/index.html +++ b/samples/calc-02/index.html @@ -9,30 +9,32 @@
-
-
-
-
-
-
T:
-
Z:
-
Y:
-
X:
+
+
+
+
+
+
+
T:
+
Z:
+
Y:
+
X:
+
-
-
-
- - - - -
- - - +
+
+ + + + +
+ + + +