- 🦊
+ ⚙
Калькулятор
✕
@@ -60,6 +60,12 @@
+
+
@@ -151,7 +157,7 @@
- Готово — движок AST v0.5
+ Готово — медный движок AST v0.6
ans = 0
diff --git a/web/style.css b/web/style.css
index 9e31647..b242c73 100644
--- a/web/style.css
+++ b/web/style.css
@@ -1,23 +1,29 @@
-/* Firefox Proton-style theme (dark) for the calculator shell. */
+/* Steam Punk theme — brass, copper, rivets, gears, aged parchment. */
:root {
- --chrome: #1c1b22;
- --chrome-alt: #2a2a3a;
- --content-bg: #15141a;
- --field: #42414d;
- --field-hover: #525268;
- --text: #fbfbfe;
- --subtext: #cfcfd8;
- --dimtext: #9b9bab;
- --accent: #00ddff;
- --orange: #ff9500;
- --red: #ff5f70;
- --pink: #ff7bd5;
- --border: #3a3944;
- --fox-gradient: linear-gradient(90deg, #ff3650, #ff9500, #9059ff, #00ddff);
- --shadow: 0 16px 48px rgba(0, 0, 0, 0.55);
- --radius: 8px;
- --font: "Segoe UI", "Ubuntu", "Helvetica Neue", system-ui, sans-serif;
+ --brass: #b08d3c;
+ --brass-hi: #e8c56a;
+ --brass-lo: #7a5f24;
+ --copper: #a05a2c;
+ --copper-hi: #d2854a;
+ --iron: #2e2a26;
+ --iron-dk: #1d1a17;
+ --wood: #3b2a1c;
+ --parchment: #d9c393;
+ --parchment-dk: #b99e6b;
+ --ink: #322515;
+ --glow: #ffb347;
+ --glow-hi: #ffd98a;
+ --danger: #b3382c;
+ --green: #7fae6a;
+ --plate: linear-gradient(160deg, #6b5426 0%, #4a3a1c 45%, #5d4a22 70%, #3c2f16 100%);
+ --plate-raised: linear-gradient(160deg, #8a6c30, #5d4a22 60%, #71592a);
+ --frame: linear-gradient(90deg, #8a5a2e, #b08d3c, #7a4c26, #c99b52, #8a5a2e);
+ --rivet: radial-gradient(circle at 35% 35%, #f0d28a, #96762c 55%, #4c3c15 80%, #241b0b);
+ --shadow: 0 18px 50px rgba(0, 0, 0, 0.7);
+ --radius: 6px;
+ --font: Georgia, "Palatino Linotype", "Book Antiqua", serif;
+ --mono: "Courier New", Courier, monospace;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
@@ -29,191 +35,215 @@ body {
place-items: center;
padding: 24px 12px;
background:
- radial-gradient(1100px 500px at 15% -10%, rgba(144, 89, 255, 0.25), transparent 60%),
- radial-gradient(900px 480px at 95% 110%, rgba(0, 221, 255, 0.16), transparent 55%),
- radial-gradient(700px 400px at 60% 40%, rgba(255, 54, 80, 0.10), transparent 60%),
- #0c0b14;
- color: var(--text);
+ radial-gradient(900px 500px at 20% -10%, rgba(255, 179, 71, 0.10), transparent 60%),
+ radial-gradient(700px 500px at 90% 110%, rgba(160, 90, 44, 0.16), transparent 55%),
+ repeating-linear-gradient(45deg, rgba(0,0,0,0.14) 0 6px, transparent 6px 12px),
+ linear-gradient(180deg, #171209, #241a10 50%, #140f0a);
+ color: var(--parchment);
}
+/* ---------- window frame ---------- */
+
.ff-window {
width: min(1020px, 100%);
- border-radius: 10px 10px 4px 4px;
- box-shadow: var(--shadow);
+ border-radius: 10px;
+ box-shadow: var(--shadow), 0 0 0 1px #000;
overflow: hidden;
- background: var(--chrome);
- border: 1px solid rgba(255, 255, 255, 0.06);
+ background: var(--iron-dk);
+ border: 3px solid #6e4a22;
+ outline: 1px solid var(--brass-lo);
+ position: relative;
+}
+.ff-window::before {
+ content: "";
+ position: absolute;
+ inset: 0;
+ pointer-events: none;
+ background:
+ radial-gradient(circle at 12px 12px, var(--rivet) 0 5px, transparent 6px),
+ radial-gradient(circle at calc(100% - 12px) 12px, var(--rivet) 0 5px, transparent 6px),
+ radial-gradient(circle at 12px calc(100% - 12px), var(--rivet) 0 5px, transparent 6px),
+ radial-gradient(circle at calc(100% - 12px) calc(100% - 12px), var(--rivet) 0 5px, transparent 6px);
+ z-index: 60;
}
/* ---------- titlebar ---------- */
.titlebar {
position: relative;
- height: 36px;
- background: var(--chrome);
+ height: 38px;
+ background: var(--frame);
+ border-bottom: 2px solid #241b0b;
display: flex;
align-items: center;
}
.titlebar-caption {
- padding-left: 14px;
- font-size: 12px;
- color: var(--subtext);
- opacity: 0.85;
+ padding-left: 16px;
+ font-size: 13px;
+ font-weight: 700;
+ letter-spacing: 1px;
+ color: #2a1d0b;
+ text-shadow: 0 1px 0 rgba(255, 230, 170, 0.6);
user-select: none;
}
-.titlebar-dots {
- position: absolute;
- left: 50%;
- transform: translateX(-50%);
- width: 74px;
- height: 10px;
- background:
- radial-gradient(circle at 8% 50%, #4fc3f7 0 4px, transparent 5px),
- radial-gradient(circle at 30% 28%, #ffb74d 0 4px, transparent 5px),
- radial-gradient(circle at 52% 62%, #ef7d57 0 5px, transparent 6px),
- radial-gradient(circle at 75% 35%, #ba68c8 0 4px, transparent 5px),
- radial-gradient(circle at 93% 55%, #f06292 0 3px, transparent 4px);
- opacity: 0.8;
-}
+.titlebar-dots { display: none; }
.titlebtn {
margin-left: auto;
- width: 46px;
- height: 36px;
+ width: 40px;
+ height: 30px;
display: grid;
place-items: center;
font-size: 13px;
- color: var(--subtext);
+ color: #2a1d0b;
cursor: default;
user-select: none;
+ border: 1px solid #55391a;
+ border-radius: 4px;
+ background: radial-gradient(circle at 35% 30%, #e8c56a, #96762c 60%, #5c4718);
+ box-shadow: inset 0 1px 1px rgba(255,240,200,.7), 0 2px 3px rgba(0,0,0,.6);
+ margin-top: 4px;
+ margin-bottom: 4px;
}
-.titlebtn:hover { background: var(--chrome-alt); }
-.titlebtn.close:hover { background: #d43a3a; color: #fff; }
-.titlebtn.max { margin-left: 0; }
+.titlebtn + .titlebtn { margin-left: 4px; }
+.titlebtn:hover { filter: brightness(1.12); }
+.titlebtn.close { background: radial-gradient(circle at 35% 30%, #e08a6a, #96412c 60%, #5c2418); color: #fff2dd; }
+.titlebtn.max { margin-left: 4px; }
/* ---------- tabstrip ---------- */
.tabbar {
- background: #18181b;
+ background: #201912;
+ border-bottom: 2px solid var(--brass-lo);
display: flex;
align-items: flex-end;
- padding: 5px 5px 0;
- gap: 3px;
+ padding: 6px 8px 0;
+ gap: 4px;
}
.tab {
display: flex;
align-items: center;
gap: 8px;
- max-width: 240px;
- height: 34px;
+ max-width: 250px;
+ height: 36px;
padding: 0 10px 0 12px;
- background: #2a2a3a;
- border-radius: 8px 8px 0 0;
- color: var(--subtext);
+ border-radius: 10px 10px 0 0;
+ border: 1px solid #4c3a1c;
+ border-bottom: none;
+ background: linear-gradient(180deg, #38291a, #241b10);
+ color: var(--parchment-dk);
font-size: 13px;
position: relative;
cursor: default;
}
.tab.active {
- background: var(--chrome);
- color: var(--text);
+ background: var(--plate-raised);
+ color: #ffe9b8;
+ text-shadow: 0 1px 0 rgba(0,0,0,.6);
+ border-color: var(--brass);
}
.tab.active::before {
content: "";
position: absolute;
top: 0; left: 10px; right: 10px;
- height: 2px;
- border-radius: 2px;
- background: var(--fox-gradient);
+ height: 3px;
+ border-radius: 0 0 3px 3px;
+ background: linear-gradient(90deg, transparent, var(--glow-hi), var(--brass-hi), var(--glow-hi), transparent);
+ box-shadow: 0 0 8px rgba(255, 200, 100, 0.8);
}
-.tab-icon { font-size: 14px; }
+.tab-icon { font-size: 15px; filter: sepia(0.5); }
.tab-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tab-close { margin-left: auto; opacity: 0.6; font-size: 11px; padding: 2px 4px; border-radius: 4px; }
-.tab-close:hover { background: rgba(255, 255, 255, 0.12); opacity: 1; }
+.tab-close:hover { background: rgba(255, 230, 170, 0.15); opacity: 1; }
.tab.newtab {
- width: 30px;
+ width: 32px;
justify-content: center;
- font-size: 16px;
- color: var(--subtext);
+ font-size: 17px;
+ color: var(--brass-hi);
background: transparent;
- border: none;
- border-radius: 6px;
- height: 30px;
+ border: 1px dashed #5b4522;
+ border-radius: 8px 8px 0 0;
+ height: 32px;
align-self: center;
}
-.tab.newtab:hover { background: var(--chrome-alt); }
+.tab.newtab:hover { background: rgba(176, 141, 60, 0.15); }
/* ---------- nav toolbar / urlbar ---------- */
.navtoolbar {
- background: var(--chrome);
+ background: var(--plate);
+ border-bottom: 2px solid #241b0b;
display: flex;
align-items: center;
gap: 6px;
- padding: 8px 10px;
+ padding: 10px 12px;
position: relative;
}
-.nav-btns { display: flex; gap: 2px; }
+.nav-btns { display: flex; gap: 4px; }
.nav-btn {
- width: 32px;
- height: 32px;
- border: none;
- border-radius: 4px;
- background: transparent;
- color: var(--text);
+ width: 34px;
+ height: 34px;
+ border: 1px solid #55391a;
+ border-radius: 50%;
+ background: radial-gradient(circle at 35% 30%, #caa24f, #7a5f24 55%, #463412 90%);
+ box-shadow: inset 0 1px 2px rgba(255,240,200,.55), inset 0 -2px 3px rgba(0,0,0,.55), 0 2px 3px rgba(0,0,0,.6);
+ color: #241a08;
font-size: 15px;
display: grid;
place-items: center;
cursor: pointer;
}
-.nav-btn:hover { background: rgba(255, 255, 255, 0.08); }
-.nav-btn:active { transform: scale(0.94); }
+.nav-btn:hover { filter: brightness(1.15); }
+.nav-btn:active { transform: translateY(1px); box-shadow: inset 0 2px 4px rgba(0,0,0,.7); }
.nav-btn.fwd { opacity: 0.35; pointer-events: none; transform: scaleX(-1); }
.nav-btn.reload { font-size: 17px; }
-.nav-btn.active { background: rgba(0, 221, 255, 0.12); color: var(--accent); }
-.nav-right { display: flex; gap: 2px; margin-left: auto; }
+.nav-btn.active {
+ background: radial-gradient(circle at 35% 30%, #ffd98a, #c98a2e 55%, #6e4a12 90%);
+ box-shadow: 0 0 10px rgba(255, 190, 90, 0.7), inset 0 1px 2px rgba(255,240,200,.6);
+}
+.nav-btn svg path { stroke: #241a08; }
+.nav-btn:hover svg path { stroke: #1a1206; }
+.nav-right { display: flex; gap: 4px; margin-left: auto; }
.urlbar-wrap { flex: 1; position: relative; }
.urlbar {
display: flex;
align-items: center;
gap: 8px;
- height: 36px;
- padding: 0 10px;
- border-radius: 4px;
- border: 2px solid transparent;
+ height: 38px;
+ padding: 0 12px;
+ border-radius: var(--radius);
+ border: 2px solid var(--brass-lo);
background:
- linear-gradient(var(--field), var(--field)) padding-box,
- transparent border-box;
- transition: background 120ms ease;
-}
-.urlbar:hover {
- background:
- linear-gradient(var(--field-hover), var(--field-hover)) padding-box,
- transparent border-box;
+ linear-gradient(180deg, #cbb488, #b99e6b),
+ radial-gradient(rgba(0,0,0,0.04) 1px, transparent 1px);
+ box-shadow: inset 0 2px 5px rgba(60, 40, 10, 0.5), 0 1px 0 rgba(255, 230, 170, 0.25);
+ color: var(--ink);
}
.urlbar:focus-within {
- background:
- linear-gradient(#38384a, #38384a) padding-box,
- var(--fox-gradient) border-box;
+ border-color: var(--glow);
+ box-shadow: inset 0 2px 5px rgba(60, 40, 10, 0.5), 0 0 12px rgba(255, 179, 71, 0.55);
}
-.urlbar-icon { opacity: 0.85; font-size: 13px; }
+.urlbar-icon { opacity: 0.9; font-size: 14px; filter: sepia(0.6) saturate(1.4); }
.urlbar input {
flex: 1;
min-width: 0;
background: transparent;
border: none;
outline: none;
- color: var(--text);
+ color: #2e2008;
font-size: 14px;
- font-family: "JetBrains Mono", "Fira Code", Consolas, monospace;
+ font-family: var(--mono);
+ font-weight: 700;
}
-.urlbar input::placeholder { color: var(--dimtext); font-family: var(--font); }
+.urlbar input::placeholder { color: #7c653a; font-family: var(--font); font-weight: 400; }
.urlbar-kbd {
font-size: 10px;
- color: var(--dimtext);
- border: 1px solid var(--border);
+ color: #5b4726;
+ border: 1px solid #8a6f3d;
border-radius: 3px;
padding: 1px 5px;
+ background: rgba(255, 245, 220, 0.5);
+ font-family: var(--mono);
}
.urlbar:focus-within .urlbar-kbd { display: none; }
@@ -222,12 +252,13 @@ body {
position: absolute;
top: calc(100% + 4px);
left: 0; right: 0;
- background: var(--chrome-alt);
- border: 1px solid var(--border);
+ background: linear-gradient(180deg, #d9c393, #c3aa77);
+ border: 2px solid var(--brass-lo);
border-radius: var(--radius);
- box-shadow: var(--shadow);
+ box-shadow: 0 12px 30px rgba(0, 0, 0, 0.65);
z-index: 40;
overflow: hidden;
+ color: var(--ink);
}
.sugg {
display: flex;
@@ -236,130 +267,202 @@ body {
padding: 8px 12px;
cursor: pointer;
font-size: 13px;
+ border-bottom: 1px dotted rgba(80, 55, 20, 0.4);
}
-.sugg:hover { background: rgba(0, 221, 255, 0.08); }
-.sugg-icon { color: var(--dimtext); width: 16px; text-align: center; }
-.sugg-expr { flex: 1; font-family: Consolas, monospace; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-.sugg-res { color: var(--accent); font-family: Consolas, monospace; }
+.sugg:last-child { border-bottom: none; }
+.sugg:hover { background: rgba(176, 141, 60, 0.35); }
+.sugg-icon { color: var(--brass-lo); width: 16px; text-align: center; }
+.sugg-expr { flex: 1; font-family: var(--mono); font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.sugg-res { color: #7a3c10; font-family: var(--mono); font-weight: 700; }
/* ---------- content ---------- */
.content {
display: flex;
- background: var(--content-bg);
+ background:
+ radial-gradient(1200px 400px at 50% 0%, rgba(255, 179, 71, 0.05), transparent 60%),
+ linear-gradient(180deg, #241a10, #1a130b);
min-height: 420px;
+ position: relative;
}
+
+/* background gears */
+.steam-gears { position: absolute; inset: 0; overflow: hidden; pointer-events: none; opacity: 0.16; }
+.steam-gears svg { position: absolute; }
+.g1 { top: -40px; right: 60px; width: 170px; animation: spin 26s linear infinite; }
+.g2 { bottom: -55px; left: 30px; width: 130px; animation: spin 18s linear infinite reverse; }
+.g3 { top: 42%; right: 34%; width: 90px; animation: spin 12s linear infinite; }
+@keyframes spin { to { transform: rotate(360deg); } }
+@media (prefers-reduced-motion: reduce) {
+ .steam-gears svg { animation: none; }
+}
+
.page {
flex: 1;
padding: 22px 24px 26px;
display: flex;
flex-direction: column;
gap: 18px;
+ position: relative;
+ z-index: 1;
}
+/* display — round brass dial with amber glow */
.display-card {
- background: var(--chrome);
- border: 1px solid var(--border);
+ background:
+ radial-gradient(circle at 30% 20%, rgba(255, 230, 170, 0.10), transparent 45%),
+ var(--plate-raised);
+ border: 2px solid var(--brass);
border-radius: var(--radius);
padding: 16px 18px 14px;
+ box-shadow: inset 0 0 24px rgba(0, 0, 0, 0.55), 0 4px 10px rgba(0, 0, 0, 0.6);
+ position: relative;
}
+.display-card::before,
+.display-card::after {
+ content: "";
+ position: absolute;
+ top: 8px; bottom: 8px;
+ width: 4px;
+ background: repeating-linear-gradient(180deg, transparent 0 6px, rgba(30, 20, 5, 0.7) 6px 7px);
+}
+.display-card::before { left: 8px; }
+.display-card::after { right: 8px; }
.display-expr {
font-size: 13px;
- color: var(--dimtext);
- font-family: Consolas, monospace;
+ color: var(--parchment-dk);
+ font-family: var(--mono);
min-height: 17px;
text-align: right;
overflow-wrap: anywhere;
}
.display-value {
font-size: 44px;
- font-weight: 200;
+ font-weight: 700;
text-align: right;
- letter-spacing: 0.5px;
+ letter-spacing: 1px;
overflow-wrap: anywhere;
margin-top: 4px;
+ font-family: var(--mono);
+ color: var(--glow);
+ text-shadow: 0 0 14px rgba(255, 179, 71, 0.75), 0 0 34px rgba(255, 150, 40, 0.35);
}
-.display-value.is-err { color: var(--red); }
+.display-value.is-err { color: #e26d5c; text-shadow: 0 0 14px rgba(220, 90, 60, 0.7); }
.display-error {
margin-top: 6px;
text-align: right;
- color: var(--red);
+ color: #e26d5c;
font-size: 13px;
+ font-family: var(--font);
}
-/* keypad */
+/* keypad — riveted brass buttons on iron plate */
.keypad {
display: grid;
grid-template-columns: repeat(6, 1fr);
- gap: 8px;
+ gap: 9px;
+ background: linear-gradient(180deg, #262019, #1b1612);
+ border: 2px solid #4c3a1c;
+ border-radius: var(--radius);
+ padding: 14px;
+ box-shadow: inset 0 0 18px rgba(0, 0, 0, 0.6);
}
.k {
- height: 50px;
- border: 1px solid transparent;
- border-radius: 4px;
- background: var(--chrome-alt);
- color: var(--text);
+ height: 52px;
+ border: 1px solid #55391a;
+ border-radius: 6px;
+ background:
+ radial-gradient(circle at 30% 25%, rgba(255, 240, 200, 0.5), transparent 45%),
+ linear-gradient(180deg, #a8843b, #7a5f24 65%, #55401a);
+ color: #241a08;
font-size: 17px;
+ font-weight: 700;
+ font-family: var(--mono);
cursor: pointer;
- transition: background 90ms ease, transform 60ms ease;
+ box-shadow: inset 0 1px 1px rgba(255, 245, 210, 0.7), inset 0 -3px 4px rgba(0, 0, 0, 0.45),
+ 0 3px 5px rgba(0, 0, 0, 0.55);
+ text-shadow: 0 1px 0 rgba(255, 240, 200, 0.5);
+ position: relative;
}
-.k:hover { background: #3a3944; border-color: var(--border); }
-.k:active { transform: scale(0.96); background: #003e96; }
-.k.num { background: #363644; font-weight: 600; }
-.k.num:hover { background: #44445a; }
-.k.op { color: var(--orange); font-weight: 700; }
-.k.fn { color: var(--subtext); font-size: 15px; }
-.k.warn { color: var(--pink); }
+.k::after {
+ content: "";
+ position: absolute;
+ right: 4px; bottom: 4px;
+ width: 4px; height: 4px;
+ border-radius: 50%;
+ background: var(--rivet);
+}
+.k:hover { filter: brightness(1.12); }
+.k:active { transform: translateY(2px); box-shadow: inset 0 3px 6px rgba(0, 0, 0, 0.7); }
+.k.num {
+ background:
+ radial-gradient(circle at 30% 25%, rgba(255, 246, 220, 0.55), transparent 45%),
+ linear-gradient(180deg, #d9c393, #b99e6b 65%, #8a6f3d);
+ font-size: 19px;
+}
+.k.op { color: #5c1e10; }
+.k.fn { font-size: 14px; color: #3a2a10; }
+.k.warn { color: #fff; text-shadow: none; background: radial-gradient(circle at 30% 25%, #e08a6a, transparent 45%), linear-gradient(180deg, #b3482c, #7c2e1a 65%, #4e1a0c); border-color: #5c2418; }
.k.eq {
- background: linear-gradient(135deg, #ff9500, #e66000);
- color: #fff;
- font-weight: 800;
- font-size: 22px;
+ background:
+ radial-gradient(circle at 30% 25%, rgba(255, 255, 210, 0.8), transparent 45%),
+ linear-gradient(180deg, #e0a52e, #c07818 60%, #8a5410);
+ color: #2e1604;
+ font-size: 24px;
+ border-color: #8a5410;
+ box-shadow: 0 0 14px rgba(255, 180, 60, 0.55), inset 0 1px 1px rgba(255, 245, 210, 0.8),
+ inset 0 -3px 4px rgba(0, 0, 0, 0.4), 0 3px 5px rgba(0, 0, 0, 0.55);
}
-.k.eq:hover { background: linear-gradient(135deg, #ffae3d, #ff7a1a); }
-.k.eq:active { transform: scale(0.96); }
+.k.eq:hover { filter: brightness(1.1); }
-.chipshelp { color: var(--dimtext); font-size: 12px; }
+.chipshelp { color: var(--parchment-dk); font-size: 12px; font-style: italic; }
/* ---------- library sidebar ---------- */
.library {
width: 272px;
flex-shrink: 0;
- background: var(--chrome);
- border-left: 1px solid var(--border);
+ background: linear-gradient(180deg, #2a2015, #1d1610);
+ border-left: 3px solid var(--brass-lo);
display: flex;
flex-direction: column;
+ position: relative;
+ z-index: 1;
}
.library.hidden { display: none; }
.lib-header {
padding: 14px 16px 10px;
font-weight: 700;
- font-size: 15px;
+ font-size: 16px;
+ letter-spacing: 1px;
+ color: var(--brass-hi);
+ text-shadow: 0 1px 0 rgba(0,0,0,.7);
}
-.lib-tabs { display: flex; border-bottom: 1px solid var(--border); }
+.lib-tabs { display: flex; border-bottom: 2px solid var(--brass-lo); }
.lib-tab {
flex: 1;
background: none;
border: none;
- color: var(--dimtext);
+ color: var(--parchment-dk);
font-size: 13px;
+ font-family: var(--font);
padding: 8px 0 10px;
cursor: pointer;
position: relative;
}
-.lib-tab.active { color: var(--text); }
+.lib-tab.active { color: var(--glow-hi); }
.lib-tab.active::after {
content: "";
position: absolute;
left: 18%; right: 18%; bottom: 0;
- height: 2px;
+ height: 3px;
border-radius: 2px;
- background: var(--fox-gradient);
+ background: linear-gradient(90deg, transparent, var(--glow), transparent);
+ box-shadow: 0 0 8px rgba(255, 179, 71, 0.8);
}
.lib-panel { padding: 6px 0; overflow-y: auto; }
.history-list { list-style: none; }
-.history-empty { padding: 18px 16px; color: var(--dimtext); font-size: 13px; }
+.history-empty { padding: 18px 16px; color: var(--parchment-dk); font-size: 13px; font-style: italic; }
.history-item {
display: flex;
gap: 8px;
@@ -367,55 +470,62 @@ body {
padding: 8px 16px;
cursor: pointer;
font-size: 13px;
+ border-bottom: 1px solid rgba(122, 95, 36, 0.25);
}
-.history-item:hover { background: var(--chrome-alt); }
+.history-item:hover { background: rgba(176, 141, 60, 0.14); }
.h-main {
flex: 1;
min-width: 0;
- font-family: Consolas, monospace;
+ font-family: var(--mono);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
-.h-res { color: var(--accent); font-family: Consolas, monospace; }
-.history-item.bad .h-res { color: var(--red); }
+.h-res { color: var(--glow); font-family: var(--mono); font-weight: 700; }
+.history-item.bad .h-res { color: #e26d5c; }
.history-item.bad .h-main { opacity: 0.6; }
.funcs-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
- gap: 7px;
+ gap: 8px;
padding: 12px 16px;
}
.func {
- background: var(--chrome-alt);
- border: 1px solid var(--border);
- border-radius: 4px;
- color: var(--text);
+ background: linear-gradient(180deg, #8a6c30, #5d4a22 70%, #463412);
+ border: 1px solid #6e5222;
+ border-radius: 14px / 8px;
+ color: #ffe9b8;
font-size: 13px;
+ font-family: var(--mono);
padding: 7px 0;
cursor: pointer;
+ box-shadow: inset 0 1px 1px rgba(255, 240, 200, 0.4), 0 2px 3px rgba(0,0,0,.5);
}
-.func:hover { background: #3a3944; border-color: var(--accent); }
+.func:hover { filter: brightness(1.15); border-color: var(--glow); }
.lib-note {
padding: 4px 16px 14px;
- color: var(--dimtext);
+ color: var(--parchment-dk);
font-size: 12px;
line-height: 1.5;
+ font-style: italic;
}
/* ---------- statusbar ---------- */
.statusbar {
- height: 26px;
- background: var(--chrome);
- border-top: 1px solid var(--border);
+ height: 28px;
+ background: var(--frame);
+ border-top: 2px solid #241b0b;
display: flex;
align-items: center;
justify-content: space-between;
- padding: 0 12px;
+ padding: 0 14px;
font-size: 11px;
- color: var(--dimtext);
+ color: #2a1d0b;
+ font-weight: 700;
+ letter-spacing: 0.5px;
+ text-shadow: 0 1px 0 rgba(255, 230, 170, 0.5);
}
/* ---------- modal ---------- */
@@ -423,7 +533,7 @@ body {
.modal-veil {
position: fixed;
inset: 0;
- background: rgba(8, 8, 15, 0.72);
+ background: rgba(15, 10, 4, 0.8);
display: grid;
place-items: center;
z-index: 100;
@@ -433,46 +543,53 @@ body {
width: min(560px, 92vw);
max-height: 80vh;
overflow-y: auto;
- background: var(--chrome-alt);
- border: 1px solid var(--border);
- border-radius: 10px;
+ background: linear-gradient(180deg, #d9c393, #c8ae7d);
+ border: 3px solid var(--brass-lo);
+ border-radius: 8px;
box-shadow: var(--shadow);
+ color: var(--ink);
}
.modal-head {
display: flex;
justify-content: space-between;
align-items: center;
padding: 14px 18px;
- border-bottom: 1px solid var(--border);
+ border-bottom: 2px solid var(--brass-lo);
font-weight: 700;
+ font-size: 16px;
+ background: var(--plate-raised);
+ color: #ffe9b8;
+ text-shadow: 0 1px 0 rgba(0,0,0,.6);
}
.modal-close {
background: none;
- border: none;
- color: var(--subtext);
- font-size: 14px;
+ border: 1px solid #55391a;
+ border-radius: 50%;
+ color: #ffe9b8;
+ font-size: 12px;
cursor: pointer;
- padding: 4px 8px;
- border-radius: 4px;
+ width: 26px; height: 26px;
}
-.modal-close:hover { background: rgba(255, 255, 255, 0.1); }
+.modal-close:hover { filter: brightness(1.2); }
.modal-body { padding: 16px 20px; font-size: 14px; }
-.modal-body h3 { margin: 12px 0 6px; font-size: 14px; color: var(--accent); }
+.modal-body h3 { margin: 12px 0 6px; font-size: 15px; color: #6e3c10; letter-spacing: 1px; }
.modal-body h3:first-child { margin-top: 0; }
.modal-body ul { padding-left: 20px; display: flex; flex-direction: column; gap: 5px; }
.modal-body code {
- background: #1c1b22;
+ background: rgba(60, 40, 12, 0.15);
+ border: 1px solid rgba(122, 95, 36, 0.5);
padding: 1px 6px;
border-radius: 3px;
font-size: 13px;
- color: var(--orange);
+ color: #4a2c0c;
+ font-weight: 700;
}
/* ---------- responsive ---------- */
@media (max-width: 860px) {
.content { flex-direction: column; }
- .library { width: auto; border-left: none; border-top: 1px solid var(--border); }
+ .library { width: auto; border-left: none; border-top: 3px solid var(--brass-lo); }
.keypad { grid-template-columns: repeat(3, 1fr); }
.display-value { font-size: 34px; }
}