/* ═══════════════════════════════════════════════════════════
styles.css — Currency Exchange Rate Application
Theme: site_style.css — Dark Teal Terminal
Fonts required: 'DM Mono' (monospace), 'Syne' (sans-serif)
Add to index.html :
═══════════════════════════════════════════════════════════ */
/* ═══════════════════════════════════════════════════════════
1. DESIGN TOKENS — exact mirror of site_style.css :root
═══════════════════════════════════════════════════════════ */
:root {
--bg: #080d0d;
--sidebar: #0b1212;
--surface: #0f1a1a;
--border: #142020;
--border2: #1e3030;
--teal: #00e5b4;
--teal-dim: rgba(0, 229, 180, 0.08);
--teal-mid: rgba(0, 229, 180, 0.18);
--text: #d4ede8;
--muted: #3a6060;
--dim: #1a2a2a;
--danger: #ff4d6a;
--amber: #ffa940;
/* App-specific aliases mapped to site tokens */
--color-bg: var(--bg);
--color-surface: var(--surface);
--color-nav-bg: var(--sidebar);
--color-border: var(--border2);
--color-text: var(--text);
--color-muted: var(--muted);
--color-accent: var(--teal);
--color-positive: #4ade80; /* green — retained; no site equivalent */
--color-negative: var(--danger);
}
/* ═══════════════════════════════════════════════════════════
2. RESET AND BASE
═══════════════════════════════════════════════════════════ */
*, *::before, *::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html, body {
height: 100%;
overflow: hidden;
}
ul { list-style: none; }
a { text-decoration: none; }
/* ═══════════════════════════════════════════════════════════
3. TYPOGRAPHY
═══════════════════════════════════════════════════════════ */
body {
font-family: 'DM Mono', monospace;
font-size: 13px;
color: var(--text);
background: var(--bg);
display: flex;
flex-direction: column;
height: 100vh;
}
/* ═══════════════════════════════════════════════════════════
4. NAVIGATION BAR (#menu)
Styled as site .content-topbar — surface bg, border-bottom
═══════════════════════════════════════════════════════════ */
#menu {
display: flex;
gap: 4px;
background: var(--surface);
padding: 0 24px;
height: 44px;
min-height: 44px;
flex-shrink: 0;
width: 100%;
border-bottom: 1px solid var(--border2);
align-items: center;
}
/* Nav buttons — match site .nav-item */
#menu button {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px 12px;
border: 1px solid transparent;
border-radius: 4px;
background: transparent;
color: var(--muted);
font-family: 'DM Mono', monospace;
font-size: 12px;
font-weight: 400;
letter-spacing: 0.02em;
cursor: pointer;
transition: background 0.15s, border-color 0.15s, color 0.15s;
white-space: nowrap;
}
#menu button:hover {
background: var(--teal-dim);
border-color: var(--border2);
color: var(--text);
}
/* Active nav button — match site .nav-item.active */
#menu button.active {
background: var(--teal-mid);
border-color: rgba(0, 229, 180, 0.25);
color: var(--teal);
}
/* ═══════════════════════════════════════════════════════════
5. MAIN CONTENT AREA
═══════════════════════════════════════════════════════════ */
main {
flex: 1;
min-height: 0;
padding: 24px;
display: flex;
flex-direction: column;
max-width: 1200px;
width: 100%;
margin: 0 auto;
overflow: hidden;
}
/* Panel visibility — toggled via .hidden class only, never inline display */
.hidden {
display: none !important;
}
/* ═══════════════════════════════════════════════════════════
6. LOADING & ERROR STATES
═══════════════════════════════════════════════════════════ */
/* Panel-level loading message */
.panel-loading {
padding: 32px;
text-align: center;
color: var(--muted);
font-size: 13px;
letter-spacing: 0.04em;
}
/* Panel-level inline error — matches site .form-error.visible pattern */
.panel-error {
padding: 10px 14px;
background: rgba(255, 77, 106, 0.06);
border: 1px solid rgba(255, 77, 106, 0.25);
border-radius: 4px;
color: var(--danger);
font-size: 12px;
margin-bottom: 12px;
letter-spacing: 0.02em;
}
/* ═══════════════════════════════════════════════════════════
7. LATEST RATES PANEL (#panel-rates)
═══════════════════════════════════════════════════════════ */
#panel-rates:not(.hidden) {
display: flex;
flex-direction: column;
height: 100%;
}
/* Filter row above table */
.panel-toolbar {
margin-bottom: 12px;
display: flex;
align-items: center;
gap: 10px;
}
/* Filter input — matches site .form-input */
#filter-rates {
padding: 8px 12px;
border: 1px solid var(--border2);
border-radius: 4px;
font-family: 'DM Mono', monospace;
font-size: 12px;
width: 260px;
background: var(--dim);
color: var(--teal);
outline: none;
transition: border-color 0.15s;
letter-spacing: 0.02em;
}
#filter-rates::placeholder {
color: var(--muted);
}
#filter-rates:focus {
border-color: rgba(0, 229, 180, 0.40);
box-shadow: 0 0 0 3px rgba(0, 229, 180, 0.07);
}
/* Scrollable table wrapper */
.table-scroll {
flex: 1;
min-height: 0;
overflow-y: auto;
border: 1px solid var(--border2);
border-radius: 4px;
background: var(--surface);
scrollbar-width: thin;
scrollbar-color: var(--dim) transparent;
}
.table-scroll::-webkit-scrollbar { width: 4px; }
.table-scroll::-webkit-scrollbar-track { background: transparent; }
.table-scroll::-webkit-scrollbar-thumb { background: var(--dim); border-radius: 2px; }
/* Rates table */
#rates-table {
width: 100%;
border-collapse: collapse;
font-size: 13px;
font-variant-numeric: tabular-nums;
}
/* Sticky header row — sidebar background so it feels like a nav bar */
#rates-table thead tr {
background: var(--sidebar);
position: sticky;
top: 0;
z-index: 1;
}
/* Column headers — match site .nav-section-label style */
#rates-table th {
border: 1px solid var(--border2);
padding: 8px 12px;
font-family: 'DM Mono', monospace;
font-weight: 500;
font-size: 10px;
letter-spacing: 0.15em;
text-transform: uppercase;
cursor: pointer;
user-select: none;
color: var(--muted);
transition: color 0.15s;
}
#rates-table th:hover { color: var(--teal); }
#rates-table th:first-child { text-align: center; width: 32px; padding: 8px 4px; }
#rates-table th:nth-child(2) { text-align: left; }
#rates-table th:nth-child(n+3) { text-align: right; }
/* Body cells */
#rates-table td {
border: 1px solid rgba(30, 48, 48, 0.5);
padding: 8px 12px;
color: var(--text);
transition: background 0.1s;
}
#rates-table tbody tr:hover td {
background: var(--teal-dim);
}
#rates-table td:first-child {
text-align: center;
width: 32px;
padding: 8px 4px;
}
/* Currency code cell — teal accent, matching site .bc-active / .repo-name */
#rates-table td:nth-child(2) {
text-align: left;
color: var(--teal);
font-weight: 500;
font-size: 12px;
letter-spacing: 0.06em;
}
#rates-table td:nth-child(n+3) { text-align: right; }
/* Pin / copy interaction cells */
#rates-table td.pin-active { color: var(--teal); cursor: pointer; font-size: 16px; }
#rates-table td.pin-inactive { color: var(--muted); cursor: pointer; font-size: 16px; }
#rates-table td.rate-value { cursor: pointer; }
#rates-table td.rate-copied { color: var(--color-positive); }
/* Currency name/symbol beneath code */
.currency-symbol {
margin-left: 6px;
font-size: 10px;
color: var(--muted);
font-weight: 400;
}
.currency-name {
display: block;
font-size: 10px;
color: var(--muted);
font-weight: 400;
letter-spacing: 0;
}
/* Change / % Change colour coding */
#rates-table td.positive { color: var(--color-positive); }
#rates-table td.negative { color: var(--color-negative); }
/* ═══════════════════════════════════════════════════════════
8. CONVERT CURRENCY PANEL (#panel-convert)
═══════════════════════════════════════════════════════════ */
#panel-convert:not(.hidden) {
display: flex;
justify-content: center;
padding-top: 48px;
}
/* Card — matches site .contact-card / .repo-item pattern */
.converter-card {
background: var(--surface);
border: 1px solid var(--border2);
border-radius: 6px;
padding: 32px;
width: 610px;
display: flex;
flex-direction: column;
gap: 20px;
transition: border-color 0.15s;
}
.converter-field {
display: flex;
flex-direction: column;
gap: 6px;
}
/* Field labels — match site .form-label / .panel-eyebrow */
.converter-field label {
font-family: 'DM Mono', monospace;
font-size: 10px;
font-weight: 500;
color: var(--muted);
text-transform: uppercase;
letter-spacing: 0.15em;
}
.converter-input-group {
display: flex;
gap: 8px;
}
/* Amount input — matches site .form-input */
#convert-amount {
flex: 1;
padding: 9px 12px;
border: 1px solid var(--border2);
border-radius: 4px;
font-family: 'DM Mono', monospace;
font-size: 15px;
font-variant-numeric: tabular-nums;
background: var(--dim);
color: var(--teal);
outline: none;
transition: border-color 0.15s;
}
#convert-amount:focus {
border-color: rgba(0, 229, 180, 0.40);
box-shadow: 0 0 0 3px rgba(0, 229, 180, 0.07);
}
/* Currency selects — match site form inputs */
#base-currency,
#quote-currency {
padding: 9px 12px;
border: 1px solid var(--border2);
border-radius: 4px;
font-family: 'DM Mono', monospace;
font-size: 13px;
font-weight: 500;
background: var(--dim);
color: var(--text);
cursor: pointer;
outline: none;
transition: border-color 0.15s;
}
#base-currency option,
#quote-currency option {
background: var(--surface);
color: var(--text);
}
#quote-currency { width: 100%; }
#base-currency:focus,
#quote-currency:focus {
border-color: rgba(0, 229, 180, 0.40);
}
/* Swap button row */
.converter-swap-row {
display: flex;
justify-content: center;
}
/* Swap button — site .btn-ghost style */
#btn-swap {
display: inline-flex;
align-items: center;
font-family: 'DM Mono', monospace;
font-size: 12px;
padding: 8px 28px;
border: 1px solid var(--border2);
border-radius: 4px;
background: transparent;
color: var(--muted);
cursor: pointer;
letter-spacing: 0.03em;
transition: border-color 0.15s, color 0.15s, background 0.15s;
}
#btn-swap:hover {
border-color: rgba(0, 229, 180, 0.30);
color: var(--text);
background: var(--teal-dim);
}
/* Result display — matches site .form-success visual weight */
.result-label {
padding: 16px;
background: var(--dim);
border: 1px solid var(--border2);
border-radius: 4px;
font-family: 'DM Mono', monospace;
font-size: 18px;
font-weight: 500;
font-variant-numeric: tabular-nums;
text-align: center;
color: var(--teal);
min-height: 56px;
display: flex;
align-items: center;
justify-content: center;
letter-spacing: 0.02em;
transition: border-color 0.15s;
}
/* ═══════════════════════════════════════════════════════════
9. HISTORICAL DATA PANEL (#panel-historical)
═══════════════════════════════════════════════════════════ */
#panel-historical:not(.hidden) {
display: flex;
flex-direction: column;
height: 100%;
}
/* Chart type toggle toolbar (Line / Area / etc.) */
.chart-type-toolbar {
display: flex;
justify-content: flex-end;
gap: 4px;
margin-bottom: 8px;
flex-shrink: 0;
}
/* Chart-type buttons — ghost style matching menu secondary buttons */
.chart-type-toolbar button {
display: inline-flex;
align-items: center;
padding: 5px 12px;
border: 1px solid transparent;
border-radius: 4px;
background: transparent;
color: var(--muted);
font-family: 'DM Mono', monospace;
font-size: 11px;
font-weight: 400;
cursor: pointer;
letter-spacing: 0.04em;
transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.chart-type-toolbar button:hover {
background: var(--teal-dim);
border-color: var(--border2);
color: var(--text);
}
.chart-type-toolbar button.active {
background: var(--teal-mid);
border-color: rgba(0, 229, 180, 0.25);
color: var(--teal);
}
/* Two-column layout: controls left, chart right */
.historical-layout {
display: flex;
gap: 24px;
flex: 1;
min-height: 0;
}
/* ── Left controls column ── */
.historical-controls {
width: 180px;
flex-shrink: 0;
display: flex;
flex-direction: column;
gap: 16px;
}
/* Date preset buttons row */
.preset-group {
display: flex;
flex-wrap: wrap;
gap: 4px;
}
/* Preset buttons — site .nav-item compact variant */
.preset-btn {
padding: 4px 8px;
border: 1px solid var(--border2);
border-radius: 4px;
background: transparent;
color: var(--muted);
font-family: 'DM Mono', monospace;
font-size: 11px;
cursor: pointer;
letter-spacing: 0.04em;
transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.preset-btn:hover {
background: var(--teal-dim);
border-color: var(--border2);
color: var(--text);
}
.preset-btn.active {
background: var(--teal-mid);
border-color: rgba(0, 229, 180, 0.25);
color: var(--teal);
}
/* Control group: label + input stacked */
.control-group {
display: flex;
flex-direction: column;
gap: 6px;
}
/* Control labels — site .form-label / .panel-eyebrow */
.control-group label {
font-family: 'DM Mono', monospace;
font-size: 10px;
font-weight: 500;
color: var(--muted);
text-transform: uppercase;
letter-spacing: 0.15em;
}
/* Currency multi-select — site .form-input */
#currency-select {
flex: 1;
min-height: 140px;
border: 1px solid var(--border2);
border-radius: 4px;
font-family: 'DM Mono', monospace;
font-size: 12px;
padding: 4px;
background: var(--dim);
color: var(--text);
outline: none;
transition: border-color 0.15s;
scrollbar-width: thin;
scrollbar-color: var(--dim) transparent;
}
#currency-select:focus {
border-color: rgba(0, 229, 180, 0.40);
}
#currency-select option:checked {
background: var(--teal-mid);
color: var(--teal);
}
/* Date inputs — site .form-input */
#start-date,
#end-date {
padding: 8px 10px;
border: 1px solid var(--border2);
border-radius: 4px;
font-family: 'DM Mono', monospace;
font-size: 12px;
background: var(--dim);
color: var(--text);
width: 100%;
outline: none;
transition: border-color 0.15s;
color-scheme: dark;
}
#start-date:focus,
#end-date:focus {
border-color: rgba(0, 229, 180, 0.40);
box-shadow: 0 0 0 3px rgba(0, 229, 180, 0.07);
}
/* Date validation error — site .form-error pattern */
.date-error:not(.hidden) {
display: block;
color: var(--danger);
font-family: 'DM Mono', monospace;
font-size: 11px;
padding: 8px 10px;
background: rgba(255, 77, 106, 0.06);
border: 1px solid rgba(255, 77, 106, 0.25);
border-radius: 4px;
letter-spacing: 0.02em;
}
/* ── Right chart area ── */
.historical-chart-area {
flex: 1;
min-width: 0;
min-height: 0;
position: relative;
background: var(--surface);
border: 1px solid var(--border2);
border-radius: 4px;
padding: 16px;
}
/* "No data" overlay */
.chart-no-data:not(.hidden) {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
font-family: 'DM Mono', monospace;
font-size: 13px;
color: var(--muted);
background: var(--surface);
border-radius: 4px;
letter-spacing: 0.04em;
}
/* Loading overlay — semi-transparent over existing chart */
.chart-loading:not(.hidden) {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
font-family: 'DM Mono', monospace;
font-size: 12px;
color: var(--teal);
background: rgba(8, 13, 13, 0.75);
border-radius: 4px;
z-index: 10;
letter-spacing: 0.06em;
}
/* Chart panel inline error — sits at bottom of chart area */
.chart-panel-error {
position: absolute;
bottom: 16px;
left: 16px;
right: 16px;
margin-bottom: 0;
/* Inherits .panel-error styles above */
}
/* ═══════════════════════════════════════════════════════════
10. ANIMATIONS — exact copies from site_style.css
═══════════════════════════════════════════════════════════ */
@keyframes fadeIn {
from { opacity: 0; transform: translateY(6px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes pulse {
0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(0, 229, 180, 0.4); }
50% { opacity: 0.6; box-shadow: 0 0 0 4px rgba(0, 229, 180, 0); }
}