596 lines
17 KiB
CSS
596 lines
17 KiB
CSS
/* Steam Punk theme — brass, copper, rivets, gears, aged parchment. */
|
|
|
|
: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;
|
|
}
|
|
|
|
* { box-sizing: border-box; margin: 0; padding: 0; }
|
|
|
|
body {
|
|
font-family: var(--font);
|
|
min-height: 100vh;
|
|
display: grid;
|
|
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);
|
|
}
|
|
|
|
/* ---------- window frame ---------- */
|
|
|
|
.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);
|
|
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: 38px;
|
|
background: var(--frame);
|
|
border-bottom: 2px solid #241b0b;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
.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);
|
|
user-select: none;
|
|
}
|
|
.titlebar-dots { display: none; }
|
|
.titlebtn {
|
|
margin-left: auto;
|
|
width: 40px;
|
|
height: 30px;
|
|
display: grid;
|
|
place-items: center;
|
|
font-size: 13px;
|
|
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 + .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: #201912;
|
|
border-bottom: 2px solid var(--brass-lo);
|
|
display: flex;
|
|
align-items: flex-end;
|
|
padding: 6px 8px 0;
|
|
gap: 4px;
|
|
}
|
|
.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;
|
|
border-bottom: none;
|
|
background: linear-gradient(180deg, #38291a, #241b10);
|
|
color: var(--parchment-dk);
|
|
font-size: 13px;
|
|
position: relative;
|
|
cursor: default;
|
|
}
|
|
.tab.active {
|
|
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: 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: 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, 230, 170, 0.15); opacity: 1; }
|
|
.tab.newtab {
|
|
width: 32px;
|
|
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;
|
|
}
|
|
.tab.newtab:hover { background: rgba(176, 141, 60, 0.15); }
|
|
|
|
/* ---------- nav toolbar / urlbar ---------- */
|
|
|
|
.navtoolbar {
|
|
background: var(--plate);
|
|
border-bottom: 2px solid #241b0b;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
padding: 10px 12px;
|
|
position: relative;
|
|
}
|
|
.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;
|
|
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 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: 38px;
|
|
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);
|
|
}
|
|
.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);
|
|
}
|
|
.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: #2e2008;
|
|
font-size: 14px;
|
|
font-family: var(--mono);
|
|
font-weight: 700;
|
|
}
|
|
.urlbar input::placeholder { color: #7c653a; font-family: var(--font); font-weight: 400; }
|
|
.urlbar-kbd {
|
|
font-size: 10px;
|
|
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; }
|
|
|
|
/* awesome bar dropdown */
|
|
.awesomebar {
|
|
position: absolute;
|
|
top: calc(100% + 4px);
|
|
left: 0; right: 0;
|
|
background: linear-gradient(180deg, #d9c393, #c3aa77);
|
|
border: 2px solid var(--brass-lo);
|
|
border-radius: var(--radius);
|
|
box-shadow: 0 12px 30px rgba(0, 0, 0, 0.65);
|
|
z-index: 40;
|
|
overflow: hidden;
|
|
color: var(--ink);
|
|
}
|
|
.sugg {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
padding: 8px 12px;
|
|
cursor: pointer;
|
|
font-size: 13px;
|
|
border-bottom: 1px dotted rgba(80, 55, 20, 0.4);
|
|
}
|
|
.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:
|
|
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:
|
|
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(--parchment-dk);
|
|
font-family: var(--mono);
|
|
min-height: 17px;
|
|
text-align: right;
|
|
overflow-wrap: anywhere;
|
|
}
|
|
.display-value {
|
|
font-size: 44px;
|
|
font-weight: 700;
|
|
text-align: right;
|
|
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: #e26d5c; text-shadow: 0 0 14px rgba(220, 90, 60, 0.7); }
|
|
.display-error {
|
|
margin-top: 6px;
|
|
text-align: right;
|
|
color: #e26d5c;
|
|
font-size: 13px;
|
|
font-family: var(--font);
|
|
}
|
|
|
|
/* keypad — riveted brass buttons on iron plate */
|
|
.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);
|
|
}
|
|
.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;
|
|
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;
|
|
}
|
|
.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:
|
|
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 { filter: brightness(1.1); }
|
|
|
|
.chipshelp { color: var(--parchment-dk); font-size: 12px; font-style: italic; }
|
|
|
|
/* ---------- library sidebar ---------- */
|
|
|
|
.library {
|
|
width: 272px;
|
|
flex-shrink: 0;
|
|
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: 16px;
|
|
letter-spacing: 1px;
|
|
color: var(--brass-hi);
|
|
text-shadow: 0 1px 0 rgba(0,0,0,.7);
|
|
}
|
|
.lib-tabs { display: flex; border-bottom: 2px solid var(--brass-lo); }
|
|
.lib-tab {
|
|
flex: 1;
|
|
background: none;
|
|
border: none;
|
|
color: var(--parchment-dk);
|
|
font-size: 13px;
|
|
font-family: var(--font);
|
|
padding: 8px 0 10px;
|
|
cursor: pointer;
|
|
position: relative;
|
|
}
|
|
.lib-tab.active { color: var(--glow-hi); }
|
|
.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);
|
|
}
|
|
.lib-panel { padding: 6px 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-item {
|
|
display: flex;
|
|
gap: 8px;
|
|
align-items: baseline;
|
|
padding: 8px 16px;
|
|
cursor: pointer;
|
|
font-size: 13px;
|
|
border-bottom: 1px solid rgba(122, 95, 36, 0.25);
|
|
}
|
|
.history-item:hover { background: rgba(176, 141, 60, 0.14); }
|
|
.h-main {
|
|
flex: 1;
|
|
min-width: 0;
|
|
font-family: var(--mono);
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
.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: 8px;
|
|
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);
|
|
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); }
|
|
.lib-note {
|
|
padding: 4px 16px 14px;
|
|
color: var(--parchment-dk);
|
|
font-size: 12px;
|
|
line-height: 1.5;
|
|
font-style: italic;
|
|
}
|
|
|
|
/* ---------- statusbar ---------- */
|
|
|
|
.statusbar {
|
|
height: 28px;
|
|
background: var(--frame);
|
|
border-top: 2px solid #241b0b;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 0 14px;
|
|
font-size: 11px;
|
|
color: #2a1d0b;
|
|
font-weight: 700;
|
|
letter-spacing: 0.5px;
|
|
text-shadow: 0 1px 0 rgba(255, 230, 170, 0.5);
|
|
}
|
|
|
|
/* ---------- modal ---------- */
|
|
|
|
.modal-veil {
|
|
position: fixed;
|
|
inset: 0;
|
|
background: rgba(15, 10, 4, 0.8);
|
|
display: grid;
|
|
place-items: center;
|
|
z-index: 100;
|
|
}
|
|
.modal-veil[hidden] { display: none; }
|
|
.modal {
|
|
width: min(560px, 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);
|
|
}
|
|
.modal-head {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: 14px 18px;
|
|
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: 1px solid #55391a;
|
|
border-radius: 50%;
|
|
color: #ffe9b8;
|
|
font-size: 12px;
|
|
cursor: pointer;
|
|
width: 26px; height: 26px;
|
|
}
|
|
.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 code {
|
|
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: #4a2c0c;
|
|
font-weight: 700;
|
|
}
|
|
|
|
/* ---------- responsive ---------- */
|
|
|
|
@media (max-width: 860px) {
|
|
.content { flex-direction: column; }
|
|
.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; }
|
|
}
|