/* ------------------------------------------------------------------------- * CSS3 Calculator * A retro-styled, themeable calculator. Colours are driven by CSS custom * properties so light/dark mode is a single attribute swap on . * ---------------------------------------------------------------------- */ @font-face { font-family: 'Digital'; src: url('../fonts/digital-7-webfont.woff') format('woff'), url('../fonts/digital-7-webfont.ttf') format('truetype'); font-weight: normal; font-style: normal; font-display: swap; } :root { --bg: #0d0d0f; --frame-1: #4a4a4a; --frame-2: #111; --screen-1: #adb8a7; --screen-2: #758571; --screen-text: #1c261a; --key-bg: rgba(0, 0, 0, .6); --key-text: rgba(255, 255, 255, .85); --key-fn-bg: rgba(255, 255, 255, .12); --op-bg: rgba(255, 255, 255, .7); --op-text: rgba(0, 0, 0, .85); --eq-bg: #ff7a18; --eq-text: #fff; --accent: #88fdfa; --history-bg: rgba(255, 255, 255, .04); --history-border: rgba(255, 255, 255, .08); --muted: rgba(255, 255, 255, .45); } [data-theme='light'] { --bg: #e9ecef; --frame-1: #cfd4da; --frame-2: #a9b0b8; --screen-1: #cdd6c7; --screen-2: #a7b39f; --screen-text: #1c261a; --key-bg: #ffffff; --key-text: #222; --key-fn-bg: #dfe3e8; --op-bg: #495057; --op-text: #fff; --eq-bg: #ff7a18; --eq-text: #fff; --accent: #0088a8; --history-bg: rgba(0, 0, 0, .03); --history-border: rgba(0, 0, 0, .1); --muted: rgba(0, 0, 0, .45); } * { box-sizing: border-box; } body { margin: 0; min-height: 100vh; display: flex; align-items: center; justify-content: center; gap: 20px; flex-wrap: wrap; padding: 24px; background: var(--bg); font-family: 'Orbitron', -apple-system, Segoe UI, Roboto, sans-serif; transition: background .3s ease; } /* ---------- frame ---------- */ .calc { display: flex; gap: 18px; align-items: stretch; flex-wrap: wrap; justify-content: center; } .calc__frame { width: 300px; padding: 16px; border-radius: 12px; background: linear-gradient(135deg, var(--frame-1), var(--frame-2)); box-shadow: 0 18px 40px rgba(0, 0, 0, .45); } .calc__topbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; color: var(--key-text); } .calc__brand { font-size: 12px; letter-spacing: 2px; opacity: .7; } .calc__theme { width: 30px; height: 30px; border: none; border-radius: 50%; background: var(--key-fn-bg); color: var(--key-text); font-size: 15px; cursor: pointer; transition: transform .2s ease, background .2s ease; } .calc__theme:hover { transform: rotate(20deg); } /* ---------- screen ---------- */ .calc__screen { position: relative; padding: 14px 16px 10px; margin-bottom: 16px; border-radius: 6px; border: 2px solid rgba(0, 0, 0, .4); background: linear-gradient(45deg, var(--screen-1), var(--screen-2)); overflow: hidden; } .calc__expression { display: block; min-height: 18px; text-align: right; font-size: 14px; color: rgba(28, 38, 26, .6); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .calc__display { display: block; text-align: right; font-family: 'Digital', 'Orbitron', monospace; font-size: 46px; line-height: 1.1; color: var(--screen-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .calc__display.is-error { color: #b00020; } .calc__memory-flag { position: absolute; left: 10px; bottom: 8px; font-size: 12px; font-weight: 700; color: var(--screen-text); opacity: 0; transition: opacity .2s ease; } .calc__memory-flag.is-active { opacity: .75; } /* ---------- keypad ---------- */ .calc__keys { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; } .key { height: 52px; border: none; border-radius: 8px; font-family: inherit; font-size: 20px; font-weight: 700; cursor: pointer; color: var(--key-text); background: var(--key-bg); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 2px 4px rgba(0, 0, 0, .35); transition: transform .05s ease, filter .15s ease, color .15s ease; } .key:hover { filter: brightness(1.15); } .key:active, .key.is-pressed { transform: translateY(1px); color: var(--accent); box-shadow: inset 0 0 18px rgba(0, 0, 0, .5); } .key:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .key--mem { height: 40px; font-size: 13px; background: var(--key-fn-bg); } .key--fn { background: var(--key-fn-bg); } .key--op { background: var(--op-bg); color: var(--op-text); font-size: 24px; } .key--eq { background: var(--eq-bg); color: var(--eq-text); font-size: 24px; } .key--eq:hover { filter: brightness(1.08); } /* ---------- history panel ---------- */ .calc__history { width: 220px; display: flex; flex-direction: column; padding: 14px; border-radius: 12px; background: var(--history-bg); border: 1px solid var(--history-border); color: var(--key-text); } .calc__history-head { display: flex; align-items: center; justify-content: space-between; font-size: 13px; letter-spacing: 1px; margin-bottom: 10px; opacity: .8; } .calc__history-clear { border: none; background: none; color: var(--muted); font-family: inherit; font-size: 11px; cursor: pointer; } .calc__history-clear:hover { color: var(--accent); } .calc__history-list { list-style: none; margin: 0; padding: 0; overflow-y: auto; max-height: 360px; flex: 1; } .calc__history-item { display: flex; flex-direction: column; padding: 8px 6px; border-bottom: 1px solid var(--history-border); cursor: pointer; border-radius: 6px; } .calc__history-item:hover { background: var(--history-border); } .calc__history-expr { font-size: 11px; color: var(--muted); } .calc__history-result { font-family: 'Digital', monospace; font-size: 20px; color: var(--accent); } .calc__history-empty { font-size: 12px; color: var(--muted); text-align: center; margin: auto 0; } /* ---------- responsive ---------- */ @media (max-width: 560px) { .calc { flex-direction: column; align-items: center; } .calc__frame { width: min(92vw, 340px); } .calc__history { width: min(92vw, 340px); max-height: 200px; } .calc__history-list { max-height: 150px; } }