diff --git a/samples/calc-02/index.css b/samples/calc-02/index.css index 8030897..cf2038f 100644 --- a/samples/calc-02/index.css +++ b/samples/calc-02/index.css @@ -56,14 +56,15 @@ body { height: 100vh; max-height: 100vh; padding: 8px; + display: grid; + grid-template-rows: auto auto minmax(0, 1fr); + gap: 8px; border-radius: 8px; background: var(--panel); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08); justify-content: stretch; align-content: start; - overflow-y: auto; - scrollbar-width: thin; - scrollbar-color: rgba(46, 105, 135, 1); + overflow: hidden; } .display-block, @@ -139,6 +140,7 @@ body { .display-buttons-panel { padding: 8px; min-height: 0; + background: rgba(6, 10, 16, 0.16); } .display-buttons-grid { @@ -225,12 +227,17 @@ body { .calculator > .display-block, .calculator > .display-buttons-panel, -.calculator > .keypad-panel, -.calculator > .functions-panel, -.calculator > .trigo-panel { +.calculator > .keypad-scroll-area { justify-self: stretch; } +.keypad-scroll-area { + min-height: 0; + overflow-y: auto; + scrollbar-width: thin; + scrollbar-color: rgba(46, 105, 135, 1); +} + .status-bar { position: absolute; top: 0; @@ -287,7 +294,6 @@ button { border: 1px solid rgba(14, 18, 25, 0.85); border-radius: 8px; padding: 8px 8px; - font: inherit; font-weight: 700; color: var(--btnText); @@ -322,6 +328,7 @@ button:active { opacity: 0.7; } } + .stack-copy-button { padding: 4px; min-width: 24px; diff --git a/samples/calc-02/index.html b/samples/calc-02/index.html index 39b30ce..d3a64dd 100644 --- a/samples/calc-02/index.html +++ b/samples/calc-02/index.html @@ -9,7 +9,6 @@
-
@@ -36,19 +35,20 @@
-
- -
-
-
-
-
-
+
+
+
+
-
-
-
+
+
+
+ +
+
+
+