138 lines
2.8 KiB
CSS
138 lines
2.8 KiB
CSS
:root {
|
|
--bg-start: #d9f7d9;
|
|
--bg-end: #e9fbd7;
|
|
--btn-bg-1: #f7fff0;
|
|
--btn-bg-2: #efffe6;
|
|
--accent-1: #a6e3a1;
|
|
--accent-2: #8fd68b;
|
|
--text: #173b2b;
|
|
--text-soft: #406a53;
|
|
}
|
|
|
|
html, body { height: 100%; }
|
|
|
|
body {
|
|
margin: 0;
|
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', 'PingFang SC', 'Microsoft YaHei', 'Heiti SC', 'WenQuanYi Micro Hei', sans-serif;
|
|
background: linear-gradient(135deg, var(--bg-start), var(--bg-end));
|
|
color: var(--text);
|
|
overflow: auto; /* 保留滚动效果 */
|
|
-webkit-font-smoothing: antialiased;
|
|
-moz-osx-font-smoothing: grayscale;
|
|
}
|
|
|
|
/* 隐藏滚动条 */
|
|
html::-webkit-scrollbar, body::-webkit-scrollbar { display: none; width: 0; height: 0; }
|
|
html, body { scrollbar-width: none; }
|
|
|
|
.calculator {
|
|
max-width: 420px;
|
|
margin: 0 auto;
|
|
min-height: 100vh;
|
|
padding: 12px env(safe-area-inset-right) 24px env(safe-area-inset-left);
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 10px;
|
|
}
|
|
|
|
.topbar {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
|
|
.brand {
|
|
font-weight: 600;
|
|
letter-spacing: 0.5px;
|
|
}
|
|
|
|
.angle-toggle {
|
|
display: inline-flex;
|
|
background: rgba(255,255,255,0.35);
|
|
border-radius: 999px;
|
|
padding: 3px;
|
|
}
|
|
|
|
.angle-toggle button {
|
|
appearance: none;
|
|
border: none;
|
|
background: transparent;
|
|
padding: 8px 12px;
|
|
border-radius: 999px;
|
|
color: #24543a;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.angle-toggle button.active {
|
|
background: #b8e2b1;
|
|
box-shadow: 0 1px 2px rgba(0,0,0,0.08) inset;
|
|
}
|
|
|
|
.display {
|
|
background: rgba(255,255,255,0.6);
|
|
border-radius: 14px;
|
|
padding: 12px 14px;
|
|
box-shadow: 0 4px 12px rgba(0,0,0,0.06);
|
|
}
|
|
|
|
.expression {
|
|
min-height: 28px;
|
|
font-size: 18px;
|
|
color: var(--text-soft);
|
|
word-break: break-all;
|
|
}
|
|
|
|
.result {
|
|
font-size: 32px;
|
|
font-weight: 700;
|
|
text-align: right;
|
|
color: var(--text);
|
|
padding-top: 4px;
|
|
}
|
|
|
|
.result.error { color: #d35454; }
|
|
|
|
.keypad {
|
|
display: grid;
|
|
grid-template-columns: repeat(4, 1fr);
|
|
gap: 10px;
|
|
}
|
|
|
|
.keypad button {
|
|
appearance: none;
|
|
border: none;
|
|
border-radius: 12px;
|
|
padding: 14px 0;
|
|
min-height: 58px; /* 移动端友好触控 */
|
|
font-size: 18px;
|
|
font-weight: 600;
|
|
color: var(--text);
|
|
background: linear-gradient(180deg, var(--btn-bg-1), var(--btn-bg-2));
|
|
box-shadow: 0 2px 6px rgba(0,0,0,0.08);
|
|
-webkit-tap-highlight-color: transparent;
|
|
}
|
|
|
|
.keypad button:active {
|
|
transform: translateY(1px);
|
|
box-shadow: 0 1px 4px rgba(0,0,0,0.10);
|
|
}
|
|
|
|
.keypad .action {
|
|
background: linear-gradient(180deg, var(--accent-1), var(--accent-2));
|
|
color: #0f2a1f;
|
|
}
|
|
|
|
.keypad .span-2 { grid-column: span 2; }
|
|
|
|
.tips {
|
|
opacity: 0.7;
|
|
text-align: center;
|
|
font-size: 12px;
|
|
margin-top: auto;
|
|
padding-bottom: 8px;
|
|
}
|
|
|
|
@media (max-width: 360px) {
|
|
.keypad button { min-height: 52px; font-size: 16px; }
|
|
.result { font-size: 28px; }
|
|
} |