m/mtm-rpn-js
1
0
Fork 0
Code Issues Actions Activity

feat: add stack copy buttons to calculator display

Browse Source
This commit is contained in:
MatMoul
2026-05-15 21:32:43 +02:00
parent 39659745a6
commit 80bcdac320
3 changed files with 120 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files
samples/calc-02/index.css
+63 -5
View File
@@ -87,15 +87,16 @@ body {
grid-area: display;
position: relative;
padding: clamp(12px, 1.5vw, 16px);
padding-bottom: clamp(4px, 0.6vw, 8px);
background: linear-gradient(180deg, var(--display), var(--display2));
color: var(--displayText);
font-family: "Courier New", monospace;
overflow: hidden;
height: clamp(112px, 18vw, 160px);
max-height: 140px;
height: auto;
min-height: clamp(112px, 18vw, 124px);
max-height: none;
align-self: start;
margin-bottom: 0;
min-height: 0;
}
.display-grid {
@@ -108,7 +109,7 @@ body {
.stack-cell {
display: grid;
grid-template-columns: 2.2ch 1fr;
grid-template-columns: 2.2ch 1fr auto;
align-items: center;
gap: 12px;
font-size: clamp(18px, 3vw, 30px);
@@ -283,7 +284,7 @@ button {
text-shadow: 0 1px 0 rgba(0, 0, 0, 0.35);
cursor: pointer;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 3px 0 rgba(0, 0, 0, 0.28);
transition: transform 120ms ease, filter 120ms ease, box-shadow 120ms ease;
transition: transform 120ms ease, filter 120ms ease, box-shadow 120ms ease, opacity 120ms ease;
line-height: 1;
}
@@ -304,6 +305,57 @@ button:active {
transform: translateY(2px);
}
.stack-copy-button {
padding: 4px;
border-radius: 999px;
min-width: 24px;
width: 24px;
height: 24px;
display: inline-grid;
place-items: center;
opacity: 0;
pointer-events: none;
transform: scale(0.9);
background: transparent;
box-shadow: none;
color: rgba(31, 42, 18, 0.58);
margin-left: 6px;
}
.stack-cell:last-child {
margin-bottom: 4px;
}
.stack-copy-button svg {
width: 13px;
height: 13px;
fill: currentColor;
display: block;
}
.stack-copy-button.is-visible {
opacity: 0.7;
pointer-events: auto;
transform: scale(1);
}
.stack-copy-button:hover {
opacity: 1;
filter: none;
color: rgba(31, 42, 18, 0.85);
}
.stack-copy-button:active {
transform: translateY(2px) scale(1);
color: rgba(31, 42, 18, 0.95);
}
.stack-copy-button:focus-visible {
outline: 1px solid rgba(31, 42, 18, 0.35);
outline-offset: 2px;
}
.key-default {
background: linear-gradient(180deg, var(--btnTop), var(--btnBottom));
color: #eef2f7;
@@ -385,6 +437,7 @@ button:active {
.display-panel {
padding: 10px;
padding-bottom: 8px;
}
.stack-cell {
@@ -392,6 +445,11 @@ button:active {
gap: 8px;
}
.stack-copy-button {
padding: 5px 7px;
min-width: 28px;
}
button {
border-radius: 10px;
padding: 8px 6px;