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

samples/calc-02/index.css

@@ -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

@@ -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="pasteButton" class="display-button"><span class="display-button-symbol paste-symbol">⎘</span></button>
-					<button id="upButton" class="display-button">↑</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="leftButton" class="display-button display-button-offset"><span class="display-button-symbol arrow-symbol">←</span></button>
-					<button id="downButton" class="display-button">↓</button>
+					<button id="downButton" class="display-button"><span class="display-button-symbol arrow-symbol">↓</span></button>
-					<button id="rightButton" class="display-button">→</button>
+					<button id="rightButton" class="display-button"><span class="display-button-symbol arrow-symbol">→</span></button>
 				</div>
 			</div>