Web UI — тема Fallout (Pip-Boy 3000) (#7)
This commit is contained in:
admin committed
1 parent
771cdb35be
commit
a90e5f1b22
2 files changed
+375
-334
No files matched your search
+12
-12
@@ -3,16 +3,16 @@
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Калькулятор — Стимпанк</title>
|
||||
<title>Калькулятор — Pip-Boy 3000</title>
|
||||
<link rel="stylesheet" href="style.css">
|
||||
<link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><text y='13' font-size='13'>⚙</text></svg>">
|
||||
<link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><text y='13' font-size='13'>☢</text></svg>">
|
||||
</head>
|
||||
<body>
|
||||
<div class="ff-window">
|
||||
|
||||
<!-- Заголовок окна -->
|
||||
<div class="titlebar">
|
||||
<span class="titlebar-caption">Калькулятор — Медная мастерская v0.6</span>
|
||||
<span class="titlebar-caption">Pip-Boy 3000 Mark IV — CALC v0.7</span>
|
||||
<span class="titlebar-dots"></span>
|
||||
<span class="titlebtn min" title="Свернуть">–</span>
|
||||
<span class="titlebtn max" title="Развернуть">□</span>
|
||||
@@ -20,9 +20,10 @@
|
||||
</div>
|
||||
|
||||
<!-- Панель вкладок -->
|
||||
<div class="screen-bezel">
|
||||
<div class="tabbar">
|
||||
<div class="tab active">
|
||||
<span class="tab-icon">⚙</span>
|
||||
<span class="tab-icon">☢</span>
|
||||
<span class="tab-title">Калькулятор</span>
|
||||
<span class="tab-close">✕</span>
|
||||
</div>
|
||||
@@ -60,12 +61,6 @@
|
||||
<!-- Контент -->
|
||||
<div class="content">
|
||||
|
||||
<div class="steam-gears" aria-hidden="true">
|
||||
<svg class="g1" viewBox="0 0 100 100"><path fill="#b08d3c" d="M50 12l6 8h-12zM50 88l-6-8h12zM12 50l8-6v12zM88 50l-8 6v-12zM23 23l10 2-8 8zM77 77l-10-2 8-8zM77 23l-2 10-8-8zM23 77l2-10 8 8z"/><circle cx="50" cy="50" r="30" fill="none" stroke="#b08d3c" stroke-width="12"/><circle cx="50" cy="50" r="12" fill="#b08d3c"/></svg>
|
||||
<svg class="g2" viewBox="0 0 100 100"><path fill="#a05a2c" d="M50 8l5 9h-10zM50 92l-5-9h10zM8 50l9-5v10zM92 50l-9 5v-10zM20 20l11 1-9 9zM80 80l-11-1 9-9zM80 20l-1 11-9-9zM20 80l1-11 9 9z"/><circle cx="50" cy="50" r="32" fill="none" stroke="#a05a2c" stroke-width="10"/><circle cx="50" cy="50" r="10" fill="#a05a2c"/></svg>
|
||||
<svg class="g3" viewBox="0 0 100 100"><path fill="#e8c56a" d="M50 10l6 8h-12zM50 90l-6-8h12zM10 50l8-6v12zM90 50l-8 6v-12zM22 22l10 3-9 8zM78 78l-10-3 9-8zM78 22l-3 10-8-9zM22 78l3-10 9 8z"/><circle cx="50" cy="50" r="28" fill="none" stroke="#e8c56a" stroke-width="11"/><circle cx="50" cy="50" r="11" fill="#e8c56a"/></svg>
|
||||
</div>
|
||||
|
||||
<main class="page">
|
||||
<section class="display-card">
|
||||
<div class="display-expr" id="exprEcho"> </div>
|
||||
@@ -111,7 +106,7 @@
|
||||
</section>
|
||||
|
||||
<section class="chipshelp">
|
||||
<span class="hints">Функции: кликните справа в Библиотеке → вставьте в строку адреса</span>
|
||||
<span class="hints">// ФУНКЦИИ: ВКЛАДКА «ФУНКЦИИ» СПРАВА — КУРСОР В СТРОКУ ВВОДА</span>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
@@ -157,9 +152,14 @@
|
||||
|
||||
<!-- Строка состояния -->
|
||||
<div class="statusbar">
|
||||
<span id="statusText">Готово — медный движок AST v0.6</span>
|
||||
<span id="statusText">READY — ROBCO INDUSTRIES UNIFIED OPERATING SYSTEM v0.7</span>
|
||||
<span class="status-right" id="statusVars">ans = 0</span>
|
||||
</div>
|
||||
|
||||
</div><!-- /screen-bezel -->
|
||||
|
||||
<!-- CRT-оверлей: сканлайны, виньетка, мерцание -->
|
||||
<div class="crt-layer" aria-hidden="true"></div>
|
||||
</div>
|
||||
|
||||
<!-- Модальное окно справки -->
|
||||
|
||||
+363
-322
@@ -1,29 +1,20 @@
|
||||
/* Steam Punk theme — brass, copper, rivets, gears, aged parchment. */
|
||||
/* Fallout Pip-Boy 3000 style — green phosphor CRT, scanlines, terminal chrome. */
|
||||
|
||||
:root {
|
||||
--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;
|
||||
--pb-green: #2eff7b;
|
||||
--pb-green-hi: #8fffb0;
|
||||
--pb-green-dim: #1c9e52;
|
||||
--pb-green-ghost: rgba(46, 255, 123, 0.12);
|
||||
--pb-amber: #ffb03a;
|
||||
--pb-bg: #031408;
|
||||
--pb-bg2: #06230f;
|
||||
--pb-panel: rgba(10, 50, 22, 0.55);
|
||||
--pb-line: rgba(46, 255, 123, 0.35);
|
||||
--pb-line-soft: rgba(46, 255, 123, 0.16);
|
||||
--danger: #ff5b4a;
|
||||
--glowtext: 0 0 6px rgba(46, 255, 123, 0.8), 0 0 18px rgba(46, 255, 123, 0.35);
|
||||
--font: "Cascadia Mono", "Courier New", Consolas, monospace;
|
||||
--radius: 4px;
|
||||
}
|
||||
|
||||
* { box-sizing: border-box; margin: 0; padding: 0; }
|
||||
@@ -35,143 +26,185 @@ body {
|
||||
place-items: center;
|
||||
padding: 24px 12px;
|
||||
background:
|
||||
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);
|
||||
radial-gradient(900px 600px at 50% 45%, rgba(20, 90, 45, 0.18), transparent 70%),
|
||||
radial-gradient(1200px 800px at 80% 100%, rgba(10, 40, 20, 0.35), transparent 60%),
|
||||
#020a05;
|
||||
color: var(--pb-green);
|
||||
}
|
||||
|
||||
/* ---------- window frame ---------- */
|
||||
/* ==================== Pip-Boy casing ==================== */
|
||||
|
||||
.ff-window {
|
||||
width: min(1020px, 100%);
|
||||
border-radius: 10px;
|
||||
box-shadow: var(--shadow), 0 0 0 1px #000;
|
||||
overflow: hidden;
|
||||
background: var(--iron-dk);
|
||||
border: 3px solid #6e4a22;
|
||||
outline: 1px solid var(--brass-lo);
|
||||
width: min(1060px, 100%);
|
||||
border-radius: 26px 26px 14px 14px;
|
||||
background: linear-gradient(160deg, #1b1f1a, #101310 55%, #070907);
|
||||
border: 1px solid #30352e;
|
||||
box-shadow:
|
||||
0 30px 80px rgba(0, 0, 0, 0.85),
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.06),
|
||||
0 0 60px rgba(46, 255, 123, 0.06);
|
||||
padding: 12px;
|
||||
position: relative;
|
||||
}
|
||||
.ff-window::before {
|
||||
/* side casings */
|
||||
.ff-window::before,
|
||||
.ff-window::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 40px;
|
||||
width: 22px;
|
||||
height: 140px;
|
||||
border-radius: 6px;
|
||||
background: linear-gradient(90deg, #262b24, #141714);
|
||||
border: 1px solid #383f36;
|
||||
}
|
||||
.ff-window::before { left: -14px; }
|
||||
.ff-window::after { right: -14px; }
|
||||
|
||||
/* CRT screen bezel wraps everything below the titlebar */
|
||||
.screen-bezel {
|
||||
border-radius: 12px;
|
||||
border: 2px solid #2c322b;
|
||||
background: var(--pb-bg);
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
box-shadow: inset 0 0 60px rgba(0, 0, 0, 0.9);
|
||||
}
|
||||
|
||||
/* scanlines + vignette + flicker — pure CSS CRT */
|
||||
.crt-layer {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
pointer-events: none;
|
||||
z-index: 70;
|
||||
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;
|
||||
repeating-linear-gradient(180deg,
|
||||
rgba(0, 0, 0, 0.22) 0 1px,
|
||||
transparent 1px 3px),
|
||||
radial-gradient(120% 100% at 50% 50%, transparent 55%, rgba(0, 0, 0, 0.55) 100%);
|
||||
mix-blend-mode: multiply;
|
||||
animation: crt-flicker 4s steps(60) infinite;
|
||||
}
|
||||
@keyframes crt-flicker {
|
||||
0%, 100% { opacity: 0.92; }
|
||||
7% { opacity: 0.98; }
|
||||
9% { opacity: 0.88; }
|
||||
41% { opacity: 0.96; }
|
||||
43% { opacity: 0.9; }
|
||||
77% { opacity: 0.99; }
|
||||
}
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.crt-layer { animation: none; }
|
||||
}
|
||||
|
||||
/* ---------- titlebar ---------- */
|
||||
/* ==================== titlebar ==================== */
|
||||
|
||||
.titlebar {
|
||||
position: relative;
|
||||
height: 38px;
|
||||
background: var(--frame);
|
||||
border-bottom: 2px solid #241b0b;
|
||||
height: 34px;
|
||||
background: linear-gradient(180deg, #171b16, #0e100d);
|
||||
border-bottom: 1px solid var(--pb-line-soft);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
border-radius: 10px 10px 0 0;
|
||||
margin: -12px -12px 0;
|
||||
padding: 0 46px 0 18px;
|
||||
}
|
||||
.titlebar-caption {
|
||||
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);
|
||||
font-size: 11px;
|
||||
letter-spacing: 2px;
|
||||
color: var(--pb-green-dim);
|
||||
text-transform: uppercase;
|
||||
user-select: none;
|
||||
}
|
||||
.titlebar-dots { display: none; }
|
||||
.titlebtn {
|
||||
margin-left: auto;
|
||||
width: 40px;
|
||||
height: 30px;
|
||||
position: absolute;
|
||||
top: 9px;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
border-radius: 50%;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
font-size: 13px;
|
||||
color: #2a1d0b;
|
||||
font-size: 0;
|
||||
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;
|
||||
background: #22271f;
|
||||
border: 1px solid #3a4137;
|
||||
}
|
||||
.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; }
|
||||
.titlebtn.min { right: 64px; }
|
||||
.titlebtn.max { right: 42px; }
|
||||
.titlebtn.close { right: 20px; }
|
||||
.titlebtn:hover { border-color: var(--pb-green-dim); }
|
||||
.titlebtn.close:hover { background: rgba(255, 91, 74, 0.25); border-color: var(--danger); }
|
||||
.titlebtn::after {
|
||||
content: "";
|
||||
width: 6px; height: 6px;
|
||||
border-radius: 50%;
|
||||
background: #454c43;
|
||||
}
|
||||
.titlebtn.close::after { background: #63312c; }
|
||||
|
||||
/* ---------- tabstrip ---------- */
|
||||
/* ==================== tabstrip ==================== */
|
||||
|
||||
.tabbar {
|
||||
background: #201912;
|
||||
border-bottom: 2px solid var(--brass-lo);
|
||||
background: var(--pb-bg2);
|
||||
border-bottom: 1px solid var(--pb-line);
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
padding: 6px 8px 0;
|
||||
gap: 4px;
|
||||
align-items: stretch;
|
||||
padding: 8px 12px 0;
|
||||
gap: 6px;
|
||||
}
|
||||
.tab {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
max-width: 250px;
|
||||
height: 36px;
|
||||
padding: 0 10px 0 12px;
|
||||
border-radius: 10px 10px 0 0;
|
||||
border: 1px solid #4c3a1c;
|
||||
height: 30px;
|
||||
padding: 0 14px;
|
||||
border: 1px solid var(--pb-line-soft);
|
||||
border-bottom: none;
|
||||
background: linear-gradient(180deg, #38291a, #241b10);
|
||||
color: var(--parchment-dk);
|
||||
font-size: 13px;
|
||||
position: relative;
|
||||
border-radius: var(--radius) var(--radius) 0 0;
|
||||
background: rgba(46, 255, 123, 0.04);
|
||||
color: var(--pb-green-dim);
|
||||
font-size: 12px;
|
||||
letter-spacing: 1px;
|
||||
text-transform: uppercase;
|
||||
cursor: default;
|
||||
position: relative;
|
||||
max-width: 300px;
|
||||
}
|
||||
.tab.active {
|
||||
background: var(--plate-raised);
|
||||
color: #ffe9b8;
|
||||
text-shadow: 0 1px 0 rgba(0,0,0,.6);
|
||||
border-color: var(--brass);
|
||||
background: var(--pb-panel);
|
||||
color: var(--pb-green);
|
||||
border-color: var(--pb-line);
|
||||
text-shadow: var(--glowtext);
|
||||
}
|
||||
.tab.active::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0; left: 10px; right: 10px;
|
||||
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);
|
||||
top: 0; left: 0; right: 0;
|
||||
height: 2px;
|
||||
background: var(--pb-green);
|
||||
box-shadow: 0 0 10px var(--pb-green);
|
||||
}
|
||||
.tab-icon { font-size: 15px; filter: sepia(0.5); }
|
||||
.tab-icon { font-size: 13px; }
|
||||
.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, 230, 170, 0.15); opacity: 1; }
|
||||
.tab-close { margin-left: 10px; opacity: 0.55; font-size: 11px; }
|
||||
.tab-close:hover { opacity: 1; color: var(--danger); }
|
||||
.tab.newtab {
|
||||
width: 32px;
|
||||
width: 34px;
|
||||
justify-content: center;
|
||||
font-size: 17px;
|
||||
color: var(--brass-hi);
|
||||
background: transparent;
|
||||
border: 1px dashed #5b4522;
|
||||
border-radius: 8px 8px 0 0;
|
||||
height: 32px;
|
||||
align-self: center;
|
||||
font-size: 15px;
|
||||
background: none;
|
||||
border-style: dashed;
|
||||
color: var(--pb-green-dim);
|
||||
}
|
||||
.tab.newtab:hover { background: rgba(176, 141, 60, 0.15); }
|
||||
.tab.newtab:hover { color: var(--pb-green); border-color: var(--pb-line); }
|
||||
|
||||
/* ---------- nav toolbar / urlbar ---------- */
|
||||
/* ==================== nav toolbar / urlbar ==================== */
|
||||
|
||||
.navtoolbar {
|
||||
background: var(--plate);
|
||||
border-bottom: 2px solid #241b0b;
|
||||
background: rgba(6, 30, 14, 0.6);
|
||||
border-bottom: 1px solid var(--pb-line);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
@@ -180,28 +213,32 @@ body {
|
||||
}
|
||||
.nav-btns { display: flex; gap: 4px; }
|
||||
.nav-btn {
|
||||
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;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
border: 1px solid var(--pb-line-soft);
|
||||
border-radius: var(--radius);
|
||||
background: rgba(46, 255, 123, 0.05);
|
||||
color: var(--pb-green);
|
||||
font-size: 14px;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
cursor: pointer;
|
||||
}
|
||||
.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: 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:hover {
|
||||
border-color: var(--pb-green-dim);
|
||||
background: var(--pb-green-ghost);
|
||||
text-shadow: var(--glowtext);
|
||||
}
|
||||
.nav-btn svg path { stroke: #241a08; }
|
||||
.nav-btn:hover svg path { stroke: #1a1206; }
|
||||
.nav-btn:active { transform: scale(0.93); }
|
||||
.nav-btn.fwd { opacity: 0.25; pointer-events: none; transform: scaleX(-1); }
|
||||
.nav-btn.reload { font-size: 16px; }
|
||||
.nav-btn.active {
|
||||
border-color: var(--pb-green);
|
||||
background: var(--pb-green-ghost);
|
||||
text-shadow: var(--glowtext);
|
||||
box-shadow: 0 0 12px rgba(46, 255, 123, 0.35), inset 0 0 8px rgba(46, 255, 123, 0.2);
|
||||
}
|
||||
.nav-btn svg path { stroke: var(--pb-green); }
|
||||
.nav-right { display: flex; gap: 4px; margin-left: auto; }
|
||||
|
||||
.urlbar-wrap { flex: 1; position: relative; }
|
||||
@@ -209,41 +246,42 @@ body {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
height: 38px;
|
||||
height: 36px;
|
||||
padding: 0 12px;
|
||||
border-radius: var(--radius);
|
||||
border: 2px solid var(--brass-lo);
|
||||
background:
|
||||
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);
|
||||
border: 1px solid var(--pb-line);
|
||||
background: rgba(2, 18, 8, 0.85);
|
||||
box-shadow: inset 0 0 14px rgba(46, 255, 123, 0.12);
|
||||
}
|
||||
.urlbar:focus-within {
|
||||
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);
|
||||
border-color: var(--pb-green);
|
||||
box-shadow: inset 0 0 14px rgba(46, 255, 123, 0.2), 0 0 16px rgba(46, 255, 123, 0.25);
|
||||
}
|
||||
.urlbar-icon { opacity: 0.9; font-size: 14px; filter: sepia(0.6) saturate(1.4); }
|
||||
.urlbar-icon { color: var(--pb-green-dim); font-size: 12px; }
|
||||
.urlbar input {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
background: transparent;
|
||||
border: none;
|
||||
outline: none;
|
||||
color: #2e2008;
|
||||
font-size: 14px;
|
||||
font-family: var(--mono);
|
||||
font-weight: 700;
|
||||
color: var(--pb-green-hi);
|
||||
font-size: 15px;
|
||||
font-family: var(--font);
|
||||
caret-color: var(--pb-green);
|
||||
text-shadow: var(--glowtext);
|
||||
}
|
||||
.urlbar input::placeholder {
|
||||
color: rgba(46, 255, 123, 0.35);
|
||||
text-shadow: none;
|
||||
font-size: 12px;
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
.urlbar input::placeholder { color: #7c653a; font-family: var(--font); font-weight: 400; }
|
||||
.urlbar-kbd {
|
||||
font-size: 10px;
|
||||
color: #5b4726;
|
||||
border: 1px solid #8a6f3d;
|
||||
color: var(--pb-green-dim);
|
||||
border: 1px solid var(--pb-line-soft);
|
||||
border-radius: 3px;
|
||||
padding: 1px 5px;
|
||||
background: rgba(255, 245, 220, 0.5);
|
||||
font-family: var(--mono);
|
||||
padding: 1px 6px;
|
||||
}
|
||||
.urlbar:focus-within .urlbar-kbd { display: none; }
|
||||
|
||||
@@ -252,13 +290,12 @@ body {
|
||||
position: absolute;
|
||||
top: calc(100% + 4px);
|
||||
left: 0; right: 0;
|
||||
background: linear-gradient(180deg, #d9c393, #c3aa77);
|
||||
border: 2px solid var(--brass-lo);
|
||||
background: #05190b;
|
||||
border: 1px solid var(--pb-green);
|
||||
border-radius: var(--radius);
|
||||
box-shadow: 0 12px 30px rgba(0, 0, 0, 0.65);
|
||||
box-shadow: 0 0 24px rgba(46, 255, 123, 0.3), inset 0 0 20px rgba(0, 0, 0, 0.8);
|
||||
z-index: 40;
|
||||
overflow: hidden;
|
||||
color: var(--ink);
|
||||
}
|
||||
.sugg {
|
||||
display: flex;
|
||||
@@ -267,163 +304,153 @@ body {
|
||||
padding: 8px 12px;
|
||||
cursor: pointer;
|
||||
font-size: 13px;
|
||||
border-bottom: 1px dotted rgba(80, 55, 20, 0.4);
|
||||
border-bottom: 1px solid var(--pb-line-soft);
|
||||
}
|
||||
.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; }
|
||||
.sugg:hover { background: var(--pb-green-ghost); }
|
||||
.sugg-icon { color: var(--pb-green-dim); width: 16px; text-align: center; }
|
||||
.sugg-expr { flex: 1; color: var(--pb-green-hi); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
||||
.sugg-res { color: var(--pb-amber); }
|
||||
|
||||
/* ---------- content ---------- */
|
||||
/* ==================== content ==================== */
|
||||
|
||||
.content {
|
||||
display: flex;
|
||||
background:
|
||||
radial-gradient(1200px 400px at 50% 0%, rgba(255, 179, 71, 0.05), transparent 60%),
|
||||
linear-gradient(180deg, #241a10, #1a130b);
|
||||
min-height: 420px;
|
||||
radial-gradient(1000px 500px at 50% 0%, rgba(46, 255, 123, 0.05), transparent 65%),
|
||||
linear-gradient(180deg, var(--pb-bg2), var(--pb-bg));
|
||||
min-height: 440px;
|
||||
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; }
|
||||
/* background hex/terminal pattern */
|
||||
.content::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
pointer-events: none;
|
||||
opacity: 0.05;
|
||||
background-image:
|
||||
repeating-linear-gradient(60deg, var(--pb-green) 0 1px, transparent 1px 26px),
|
||||
repeating-linear-gradient(-60deg, var(--pb-green) 0 1px, transparent 1px 26px);
|
||||
}
|
||||
|
||||
.page {
|
||||
flex: 1;
|
||||
padding: 22px 24px 26px;
|
||||
padding: 20px 24px 24px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 18px;
|
||||
gap: 16px;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
/* display — round brass dial with amber glow */
|
||||
/* display — big phosphor readout */
|
||||
.display-card {
|
||||
background:
|
||||
radial-gradient(circle at 30% 20%, rgba(255, 230, 170, 0.10), transparent 45%),
|
||||
var(--plate-raised);
|
||||
border: 2px solid var(--brass);
|
||||
background: rgba(3, 20, 8, 0.9);
|
||||
border: 1px solid var(--pb-line);
|
||||
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);
|
||||
padding: 14px 18px 12px;
|
||||
box-shadow: inset 0 0 30px rgba(0, 0, 0, 0.85), inset 0 0 12px rgba(46, 255, 123, 0.12);
|
||||
position: relative;
|
||||
}
|
||||
.display-card::before,
|
||||
.display-card::after {
|
||||
content: "";
|
||||
.display-card::before {
|
||||
content: "CALCULATIONS";
|
||||
position: absolute;
|
||||
top: 8px; bottom: 8px;
|
||||
width: 4px;
|
||||
background: repeating-linear-gradient(180deg, transparent 0 6px, rgba(30, 20, 5, 0.7) 6px 7px);
|
||||
top: -8px;
|
||||
left: 14px;
|
||||
padding: 0 8px;
|
||||
background: var(--pb-bg);
|
||||
font-size: 10px;
|
||||
letter-spacing: 3px;
|
||||
color: var(--pb-green-dim);
|
||||
}
|
||||
.display-card::before { left: 8px; }
|
||||
.display-card::after { right: 8px; }
|
||||
.display-expr {
|
||||
font-size: 13px;
|
||||
color: var(--parchment-dk);
|
||||
font-family: var(--mono);
|
||||
color: var(--pb-green-dim);
|
||||
min-height: 17px;
|
||||
text-align: right;
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
.display-value {
|
||||
font-size: 44px;
|
||||
font-size: 46px;
|
||||
font-weight: 700;
|
||||
text-align: right;
|
||||
letter-spacing: 1px;
|
||||
letter-spacing: 2px;
|
||||
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);
|
||||
margin-top: 2px;
|
||||
color: var(--pb-green);
|
||||
text-shadow: 0 0 8px rgba(46, 255, 123, 0.9), 0 0 26px rgba(46, 255, 123, 0.45),
|
||||
0 0 60px rgba(46, 255, 123, 0.2);
|
||||
}
|
||||
.display-value::after {
|
||||
content: "_";
|
||||
animation: cursor-blink 1.1s steps(1) infinite;
|
||||
color: var(--pb-green-hi);
|
||||
}
|
||||
@keyframes cursor-blink { 50% { opacity: 0; } }
|
||||
.display-value.is-err {
|
||||
color: var(--danger);
|
||||
text-shadow: 0 0 8px rgba(255, 91, 74, 0.8), 0 0 24px rgba(255, 91, 74, 0.35);
|
||||
}
|
||||
.display-value.is-err { color: #e26d5c; text-shadow: 0 0 14px rgba(220, 90, 60, 0.7); }
|
||||
.display-error {
|
||||
margin-top: 6px;
|
||||
margin-top: 4px;
|
||||
text-align: right;
|
||||
color: #e26d5c;
|
||||
color: var(--danger);
|
||||
font-size: 13px;
|
||||
font-family: var(--font);
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.display-value::after { animation: none; }
|
||||
}
|
||||
|
||||
/* keypad — riveted brass buttons on iron plate */
|
||||
/* keypad */
|
||||
.keypad {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(6, 1fr);
|
||||
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);
|
||||
gap: 8px;
|
||||
}
|
||||
.k {
|
||||
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;
|
||||
height: 50px;
|
||||
border: 1px solid var(--pb-line-soft);
|
||||
border-radius: var(--radius);
|
||||
background: linear-gradient(180deg, rgba(46, 255, 123, 0.10), rgba(46, 255, 123, 0.04));
|
||||
color: var(--pb-green-hi);
|
||||
font-size: 16px;
|
||||
font-family: var(--font);
|
||||
font-weight: 700;
|
||||
font-family: var(--mono);
|
||||
cursor: pointer;
|
||||
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;
|
||||
text-shadow: 0 0 6px rgba(46, 255, 123, 0.5);
|
||||
box-shadow: inset 0 1px 0 rgba(46, 255, 123, 0.15), 0 2px 0 rgba(0, 0, 0, 0.6);
|
||||
}
|
||||
.k::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
right: 4px; bottom: 4px;
|
||||
width: 4px; height: 4px;
|
||||
border-radius: 50%;
|
||||
background: var(--rivet);
|
||||
.k:hover {
|
||||
background: var(--pb-green-ghost);
|
||||
border-color: var(--pb-green-dim);
|
||||
box-shadow: 0 0 14px rgba(46, 255, 123, 0.35), inset 0 1px 0 rgba(46, 255, 123, 0.2);
|
||||
}
|
||||
.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:active { transform: translateY(1px); box-shadow: 0 1px 0 rgba(0, 0, 0, 0.6); }
|
||||
.k.num { font-size: 18px; }
|
||||
.k.op { color: var(--pb-amber); text-shadow: 0 0 6px rgba(255, 176, 58, 0.6); }
|
||||
.k.fn { font-size: 13px; color: var(--pb-green-dim); }
|
||||
.k.warn { color: var(--danger); text-shadow: 0 0 6px rgba(255, 91, 74, 0.6); }
|
||||
.k.eq {
|
||||
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);
|
||||
background: var(--pb-green);
|
||||
border-color: var(--pb-green-hi);
|
||||
color: #04150a;
|
||||
font-size: 22px;
|
||||
text-shadow: none;
|
||||
box-shadow: 0 0 20px rgba(46, 255, 123, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.4);
|
||||
}
|
||||
.k.eq:hover { filter: brightness(1.1); }
|
||||
.k.eq:hover { background: var(--pb-green-hi); }
|
||||
|
||||
.chipshelp { color: var(--parchment-dk); font-size: 12px; font-style: italic; }
|
||||
.chipshelp { color: var(--pb-green-dim); font-size: 11px; letter-spacing: 1px; text-transform: uppercase; }
|
||||
|
||||
/* ---------- library sidebar ---------- */
|
||||
/* ==================== library sidebar ==================== */
|
||||
|
||||
.library {
|
||||
width: 272px;
|
||||
width: 280px;
|
||||
flex-shrink: 0;
|
||||
background: linear-gradient(180deg, #2a2015, #1d1610);
|
||||
border-left: 3px solid var(--brass-lo);
|
||||
background: rgba(4, 22, 10, 0.92);
|
||||
border-left: 1px solid var(--pb-line);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
position: relative;
|
||||
@@ -431,165 +458,179 @@ body {
|
||||
}
|
||||
.library.hidden { display: none; }
|
||||
.lib-header {
|
||||
padding: 14px 16px 10px;
|
||||
padding: 14px 16px 8px;
|
||||
font-weight: 700;
|
||||
font-size: 16px;
|
||||
letter-spacing: 1px;
|
||||
color: var(--brass-hi);
|
||||
text-shadow: 0 1px 0 rgba(0,0,0,.7);
|
||||
font-size: 13px;
|
||||
letter-spacing: 3px;
|
||||
text-transform: uppercase;
|
||||
color: var(--pb-green);
|
||||
text-shadow: var(--glowtext);
|
||||
}
|
||||
.lib-tabs { display: flex; border-bottom: 2px solid var(--brass-lo); }
|
||||
.lib-tabs { display: flex; border-bottom: 1px solid var(--pb-line); }
|
||||
.lib-tab {
|
||||
flex: 1;
|
||||
background: none;
|
||||
border: none;
|
||||
color: var(--parchment-dk);
|
||||
font-size: 13px;
|
||||
color: var(--pb-green-dim);
|
||||
font-size: 11px;
|
||||
font-family: var(--font);
|
||||
letter-spacing: 2px;
|
||||
text-transform: uppercase;
|
||||
padding: 8px 0 10px;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
}
|
||||
.lib-tab.active { color: var(--glow-hi); }
|
||||
.lib-tab.active { color: var(--pb-green); text-shadow: var(--glowtext); }
|
||||
.lib-tab.active::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 18%; right: 18%; bottom: 0;
|
||||
height: 3px;
|
||||
border-radius: 2px;
|
||||
background: linear-gradient(90deg, transparent, var(--glow), transparent);
|
||||
box-shadow: 0 0 8px rgba(255, 179, 71, 0.8);
|
||||
left: 22%; right: 22%; bottom: 0;
|
||||
height: 2px;
|
||||
background: var(--pb-green);
|
||||
box-shadow: 0 0 10px var(--pb-green);
|
||||
}
|
||||
.lib-panel { padding: 6px 0; overflow-y: auto; }
|
||||
.lib-panel { padding: 4px 0; overflow-y: auto; }
|
||||
.history-list { list-style: none; }
|
||||
.history-empty { padding: 18px 16px; color: var(--parchment-dk); font-size: 13px; font-style: italic; }
|
||||
.history-empty { padding: 16px; color: var(--pb-green-dim); font-size: 12px; }
|
||||
.history-item {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
align-items: baseline;
|
||||
padding: 8px 16px;
|
||||
padding: 7px 16px;
|
||||
cursor: pointer;
|
||||
font-size: 13px;
|
||||
border-bottom: 1px solid rgba(122, 95, 36, 0.25);
|
||||
font-size: 12px;
|
||||
border-bottom: 1px solid rgba(46, 255, 123, 0.08);
|
||||
}
|
||||
.history-item:hover { background: rgba(176, 141, 60, 0.14); }
|
||||
.history-item::before { content: "> "; color: var(--pb-green-dim); }
|
||||
.history-item:hover { background: var(--pb-green-ghost); }
|
||||
.h-main {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
font-family: var(--mono);
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
color: var(--pb-green-hi);
|
||||
}
|
||||
.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; }
|
||||
.h-res { color: var(--pb-amber); }
|
||||
.history-item.bad .h-res { color: var(--danger); }
|
||||
.history-item.bad .h-main { opacity: 0.5; }
|
||||
|
||||
.funcs-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 8px;
|
||||
gap: 7px;
|
||||
padding: 12px 16px;
|
||||
}
|
||||
.func {
|
||||
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);
|
||||
background: rgba(46, 255, 123, 0.06);
|
||||
border: 1px solid var(--pb-line-soft);
|
||||
border-radius: var(--radius);
|
||||
color: var(--pb-green-hi);
|
||||
font-size: 12px;
|
||||
font-family: var(--font);
|
||||
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 { filter: brightness(1.15); border-color: var(--glow); }
|
||||
.func:hover {
|
||||
border-color: var(--pb-green);
|
||||
background: var(--pb-green-ghost);
|
||||
text-shadow: var(--glowtext);
|
||||
}
|
||||
.lib-note {
|
||||
padding: 4px 16px 14px;
|
||||
color: var(--parchment-dk);
|
||||
font-size: 12px;
|
||||
line-height: 1.5;
|
||||
font-style: italic;
|
||||
color: var(--pb-green-dim);
|
||||
font-size: 11px;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
/* ---------- statusbar ---------- */
|
||||
/* ==================== statusbar ==================== */
|
||||
|
||||
.statusbar {
|
||||
height: 28px;
|
||||
background: var(--frame);
|
||||
border-top: 2px solid #241b0b;
|
||||
background: rgba(6, 28, 12, 0.9);
|
||||
border-top: 1px solid var(--pb-line);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 0 14px;
|
||||
padding: 0 16px;
|
||||
font-size: 11px;
|
||||
color: #2a1d0b;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.5px;
|
||||
text-shadow: 0 1px 0 rgba(255, 230, 170, 0.5);
|
||||
letter-spacing: 1px;
|
||||
text-transform: uppercase;
|
||||
color: var(--pb-green-dim);
|
||||
}
|
||||
.statusbar::before { content: "■"; color: var(--pb-green); margin-right: 8px; animation: cursor-blink 2s steps(1) infinite; }
|
||||
|
||||
/* ---------- modal ---------- */
|
||||
/* ==================== modal ==================== */
|
||||
|
||||
.modal-veil {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
background: rgba(15, 10, 4, 0.8);
|
||||
background: rgba(1, 8, 3, 0.85);
|
||||
display: grid;
|
||||
place-items: center;
|
||||
z-index: 100;
|
||||
}
|
||||
.modal-veil[hidden] { display: none; }
|
||||
.modal {
|
||||
width: min(560px, 92vw);
|
||||
width: min(580px, 92vw);
|
||||
max-height: 80vh;
|
||||
overflow-y: auto;
|
||||
background: linear-gradient(180deg, #d9c393, #c8ae7d);
|
||||
border: 3px solid var(--brass-lo);
|
||||
border-radius: 8px;
|
||||
box-shadow: var(--shadow);
|
||||
color: var(--ink);
|
||||
background: #041608;
|
||||
border: 1px solid var(--pb-green);
|
||||
border-radius: var(--radius);
|
||||
box-shadow: 0 0 40px rgba(46, 255, 123, 0.35), inset 0 0 30px rgba(0, 0, 0, 0.8);
|
||||
color: var(--pb-green-hi);
|
||||
font-family: var(--font);
|
||||
}
|
||||
.modal-head {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 14px 18px;
|
||||
border-bottom: 2px solid var(--brass-lo);
|
||||
padding: 13px 18px;
|
||||
border-bottom: 1px solid var(--pb-line);
|
||||
font-weight: 700;
|
||||
font-size: 16px;
|
||||
background: var(--plate-raised);
|
||||
color: #ffe9b8;
|
||||
text-shadow: 0 1px 0 rgba(0,0,0,.6);
|
||||
font-size: 13px;
|
||||
letter-spacing: 2px;
|
||||
text-transform: uppercase;
|
||||
color: var(--pb-green);
|
||||
text-shadow: var(--glowtext);
|
||||
}
|
||||
.modal-close {
|
||||
background: none;
|
||||
border: 1px solid #55391a;
|
||||
border-radius: 50%;
|
||||
color: #ffe9b8;
|
||||
border: 1px solid var(--pb-line-soft);
|
||||
color: var(--pb-green-dim);
|
||||
font-size: 12px;
|
||||
cursor: pointer;
|
||||
width: 26px; height: 26px;
|
||||
border-radius: var(--radius);
|
||||
}
|
||||
.modal-close:hover { color: var(--danger); border-color: var(--danger); }
|
||||
.modal-body { padding: 16px 20px; font-size: 13px; line-height: 1.5; }
|
||||
.modal-body h3 {
|
||||
margin: 14px 0 6px;
|
||||
font-size: 12px;
|
||||
letter-spacing: 3px;
|
||||
text-transform: uppercase;
|
||||
color: var(--pb-amber);
|
||||
}
|
||||
.modal-close:hover { filter: brightness(1.2); }
|
||||
.modal-body { padding: 16px 20px; font-size: 14px; }
|
||||
.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 h3::before { content: "### "; }
|
||||
.modal-body ul { padding-left: 4px; display: flex; flex-direction: column; gap: 5px; list-style: none; }
|
||||
.modal-body li::before { content: "> "; color: var(--pb-green-dim); }
|
||||
.modal-body code {
|
||||
background: rgba(60, 40, 12, 0.15);
|
||||
border: 1px solid rgba(122, 95, 36, 0.5);
|
||||
background: rgba(46, 255, 123, 0.1);
|
||||
border: 1px solid var(--pb-line-soft);
|
||||
padding: 1px 6px;
|
||||
border-radius: 3px;
|
||||
font-size: 13px;
|
||||
color: #4a2c0c;
|
||||
font-weight: 700;
|
||||
font-size: 12px;
|
||||
color: var(--pb-amber);
|
||||
}
|
||||
|
||||
/* ---------- responsive ---------- */
|
||||
/* ==================== responsive ==================== */
|
||||
|
||||
@media (max-width: 860px) {
|
||||
.content { flex-direction: column; }
|
||||
.library { width: auto; border-left: none; border-top: 3px solid var(--brass-lo); }
|
||||
.library { width: auto; border-left: none; border-top: 1px solid var(--pb-line); }
|
||||
.keypad { grid-template-columns: repeat(3, 1fr); }
|
||||
.display-value { font-size: 34px; }
|
||||
}
|
||||
Reference in new issue
Block a user