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

feat(calc-02): refine display button layout and icon styling

Browse Source
This commit is contained in:
MatMoul
2026-05-16 01:38:53 +02:00
parent 1e703bebe8
commit 5364208491
2 changed files with 71 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files
samples/calc-02/index.css
+66 -2
View File
@@ -72,7 +72,6 @@ body {
.display-block,
.display-panel,
.display-buttons-panel,
.keypad-panel,
.functions-panel,
.trigo-panel {
@@ -82,6 +81,13 @@ body {
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
.display-buttons-panel {
border-radius: 8px;
border: 1px solid rgba(255, 255, 255, 0.06);
background: rgba(6, 10, 16, 0.16);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
.display-block {
grid-area: display;
display: grid;
@@ -158,12 +164,48 @@ body {
align-items: stretch;
}
.display-button-spacer {
pointer-events: none;
visibility: hidden;
background: transparent;
border-color: transparent;
box-shadow: none;
}
.display-button {
background: linear-gradient(180deg, var(--btnTop), var(--btnBottom));
color: #eef2f7;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 3px 0 rgba(0, 0, 0, 0.28);
}
.display-button-offset {
padding-inline: 6px;
}
.display-button-symbol {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 1.2em;
font-size: 1.05em;
line-height: 1;
font-weight: 800;
transform: translateY(-0.01em);
}
.paste-symbol {
font-size: 1em;
}
.display-buttons-grid > button {
padding-top: 6px;
padding-bottom: 6px;
}
.display-button-offset {
padding-inline: 4px;
}
.mode-menu {
@@ -275,7 +317,7 @@ body {
button {
border: 1px solid rgba(14, 18, 25, 0.85);
border-radius: 8px;
padding: 10px 8px;
padding: 8px 8px;
font: inherit;
font-weight: 700;
@@ -374,6 +416,28 @@ button:active {
padding-inline: 4px;
letter-spacing: 0.01em;
}
.display-button-offset {
padding-inline: 4px;
}
.display-button-symbol {
min-width: 1.28em;
font-size: 1.3em;
}
.display-buttons-grid > button {
padding-top: 6px;
padding-bottom: 6px;
}
.display-button-offset {
padding-inline: 4px;
}
}
.hidden-input {
samples/calc-02/index.html
+5 -5
View File
@@ -26,13 +26,13 @@
<div class="display-buttons-panel">
<div class="display-buttons-grid">
<button id="modeButton" class="display-button">Mode</button>
<button id="pasteButton" class="display-button">⎘</button>
<button id="upButton" class="display-button">↑</button>
<button id="pasteButton" class="display-button"><span class="display-button-symbol paste-symbol">⎘</span></button>
<button id="upButton" class="display-button"><span class="display-button-symbol arrow-symbol">↑</span></button>
<button id="constButton" class="display-button">π</button>
<div class="display-button-spacer"></div>
<button id="leftButton" class="display-button display-button-offset">←</button>
<button id="downButton" class="display-button">↓</button>
<button id="rightButton" class="display-button">→</button>
<button id="leftButton" class="display-button display-button-offset"><span class="display-button-symbol arrow-symbol">←</span></button>
<button id="downButton" class="display-button"><span class="display-button-symbol arrow-symbol">↓</span></button>
<button id="rightButton" class="display-button"><span class="display-button-symbol arrow-symbol">→</span></button>
</div>
</div>