diff --git a/samples/calc-02/index.css b/samples/calc-02/index.css index 140084f..40c6486 100644 --- a/samples/calc-02/index.css +++ b/samples/calc-02/index.css @@ -75,8 +75,7 @@ body { .display-buttons-panel, .keypad-panel, .functions-panel, -.trigo-panel, -.status-line { +.trigo-panel { border-radius: 8px; border: 1px solid rgba(255, 255, 255, 0.06); background: rgba(6, 10, 16, 0.16); @@ -108,10 +107,6 @@ body { margin-bottom: 0; } -.display-frame { - margin: 0; - padding: 0; -} .display-grid { height: 100%; @@ -169,14 +164,7 @@ body { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 3px 0 rgba(0, 0, 0, 0.28); } -.display-button-offset { - grid-column-start: 2; -} -.display-button-spacer { - opacity: 0; - pointer-events: none; -} .mode-menu { position: fixed; @@ -303,18 +291,12 @@ button:hover { filter: brightness(1.06); } -.display-button:hover { - filter: brightness(1.08); -} button:active { transform: translateY(2px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 1px 0 rgba(0, 0, 0, 0.25); } -.display-button:active { - transform: translateY(2px); -} .stack-copy-button { padding: 4px; @@ -376,11 +358,6 @@ button:active { color: #eef2f7; } -.key-alt { - background: linear-gradient(180deg, var(--btnAltTop), var(--btnAltBottom)); - color: #eef2f7; -} - .key-danger { background: linear-gradient(180deg, var(--btnDangerTop), var(--btnDangerBottom)); color: #eef2f7; @@ -389,6 +366,14 @@ button:active { .key-enter { background: linear-gradient(180deg, var(--btnEnterTop), var(--btnEnterBottom)); color: #eef2f7; + padding-inline: 6px; +} + +@media (max-width: 700px) { + .key-enter { + padding-inline: 4px; + letter-spacing: 0.01em; + } } .hidden-input { diff --git a/samples/calc-02/index.html b/samples/calc-02/index.html index 4c94b79..b453ec2 100644 --- a/samples/calc-02/index.html +++ b/samples/calc-02/index.html @@ -29,10 +29,10 @@ +
-