/* ========================================================================= Ciris — App Styles Built on top of Bootstrap 5. Only app-specific overrides here. ========================================================================= */ /* ── CSS custom properties ────────────────────────────────────────────────── */ :root { --ciris-green: #2e7d32; --ciris-green-dark: #1b5e20; --ciris-green-light: #a5d6a7; --ciris-surface: #f8f9fa; --ciris-header-h: 52px; --ciris-nav-h: 60px; --ciris-card-radius: 10px; /* Override Bootstrap primary */ --bs-primary: #2e7d32; --bs-primary-rgb: 46, 125, 50; --bs-link-color: #2e7d32; --bs-link-color-rgb: 46, 125, 50; } /* ── Reset / base ──────────────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; } html, body { height: 100%; overflow: hidden; /* outer scroll is disabled; views scroll internally */ } /* ── Font size preferences (applied via data-font-size on ) ──────────── */ html[data-font-size="sm"] { font-size: 14px; } html[data-font-size="lg"] { font-size: 18px; } html[data-font-size="xl"] { font-size: 20px; } body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; background: var(--ciris-surface); padding-top: var(--ciris-header-h); padding-bottom: var(--ciris-nav-h); -webkit-tap-highlight-color: transparent; } /* ── Top header ────────────────────────────────────────────────────────────── */ .app-header { position: fixed; top: 0; left: 0; right: 0; height: var(--ciris-header-h); background: var(--ciris-green); color: #fff; display: flex; align-items: center; padding: 0 12px; gap: 8px; z-index: 1030; box-shadow: 0 2px 4px rgba(0,0,0,.25); } .btn-back { background: transparent; border: none; color: #fff; padding: 6px; border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: background .15s; } .btn-back:hover { background: rgba(255,255,255,.15); } .app-title { font-size: 1.2rem; font-weight: 700; letter-spacing: .5px; flex-shrink: 0; } .header-subtitle { font-size: .8rem; opacity: .75; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-left: 4px; } /* ── Bottom navigation ─────────────────────────────────────────────────────── */ .bottom-nav { position: fixed; bottom: 0; left: 0; right: 0; height: var(--ciris-nav-h); background: #fff; border-top: 1px solid #e0e0e0; display: flex; z-index: 1030; box-shadow: 0 -2px 8px rgba(0,0,0,.08); /* Safe area for phones with home indicator */ padding-bottom: env(safe-area-inset-bottom, 0); } .bottom-nav-item { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-decoration: none; color: #9e9e9e; padding: 6px 4px; gap: 3px; font-size: .65rem; font-weight: 500; transition: color .15s; -webkit-tap-highlight-color: transparent; } .bottom-nav-item:hover, .bottom-nav-item.active { color: var(--ciris-green); } .bottom-nav-item svg { transition: transform .15s; } .bottom-nav-item.active svg { transform: scale(1.1); } /* ── Main view ─────────────────────────────────────────────────────────────── */ .app-view { height: 100%; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; } /* ── Loading overlay ───────────────────────────────────────────────────────── */ .loading-overlay { position: fixed; inset: 0; background: #fff; display: flex; align-items: center; justify-content: center; z-index: 2000; } .loading-box { display: flex; flex-direction: column; align-items: center; padding: 32px; } .loading-msg { font-size: .95rem; color: #555; text-align: center; } .loading-progress { width: 200px; height: 6px; border-radius: 3px; } /* ── Update banner ─────────────────────────────────────────────────────────── */ .update-banner { position: fixed; bottom: calc(var(--ciris-nav-h) + 8px); left: 12px; right: 12px; background: var(--ciris-green-dark); color: #fff; padding: 10px 14px; border-radius: 8px; display: flex; align-items: center; justify-content: space-between; z-index: 1025; box-shadow: 0 4px 12px rgba(0,0,0,.25); font-size: .9rem; } /* ── Species list ──────────────────────────────────────────────────────────── */ .species-list-page { display: flex; flex-direction: column; height: 100%; } .search-bar-wrap { padding: 10px 12px 6px; background: #fff; border-bottom: 1px solid #e0e0e0; position: sticky; top: 0; z-index: 10; } .filter-row { display: flex; gap: 6px; padding: 6px 12px 8px; background: #fff; border-bottom: 1px solid #e0e0e0; overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; } .filter-row::-webkit-scrollbar { display: none; } .filter-row select { min-width: 0; flex: 1; font-size: .82rem; } /* Column picker — visible only on tablet/desktop */ .col-picker { display: none; flex-shrink: 0; align-items: center; gap: 2px; } @media (min-width: 768px) { .col-picker { display: flex; } } .col-btn { background: transparent; border: 1px solid #dee2e6; border-radius: 5px; padding: 4px 5px; cursor: pointer; color: #9e9e9e; display: flex; align-items: center; justify-content: center; transition: background .15s, color .15s, border-color .15s; -webkit-tap-highlight-color: transparent; } .col-btn.active { background: var(--ciris-green); border-color: var(--ciris-green); color: #fff; } .species-count { font-size: .75rem; color: #757575; padding: 4px 12px; } .species-scroll { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 8px 10px 12px; display: grid; grid-template-columns: 1fr; gap: 8px; align-content: start; } @media (min-width: 768px) { .species-scroll { grid-template-columns: repeat(var(--grid-cols, 1), 1fr); } } /* ── Species card ──────────────────────────────────────────────────────────── */ .species-card { background: #fff; border-radius: var(--ciris-card-radius); box-shadow: 0 1px 4px rgba(0,0,0,.1); padding: 10px 12px; cursor: pointer; transition: box-shadow .15s, transform .1s; display: grid; grid-template-columns: 1fr auto; gap: 4px 8px; } .species-card:active { transform: scale(.98); box-shadow: 0 1px 2px rgba(0,0,0,.12); } .card-body-col { grid-column: 1; } .card-action-col { grid-column: 2; display: flex; flex-direction: column; align-items: flex-end; gap: 8px; padding-top: 2px; } .card-name-es { font-size: 1rem; font-weight: 600; color: #212121; line-height: 1.2; margin: 0; } .card-name-en { font-size: .8rem; color: #757575; margin: 1px 0 2px; } .card-breadcrumb { font-size: .75rem; color: #78909c; margin: 2px 0 3px; line-height: 1.4; } .card-breadcrumb em { color: #455a64; font-style: italic; } .bc-sep { color: #b0bec5; margin: 0 1px; } .card-stats { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 3px; } .stat-chip { font-size: .68rem; background: #f1f8e9; color: #33691e; border-radius: 50px; padding: 1px 7px; font-weight: 500; white-space: nowrap; } .card-links { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 6px; grid-column: 1 / -1; } .link-btn { display: inline-flex; align-items: center; font-size: .7rem; font-weight: 600; padding: 2px 10px; border-radius: 50px; text-decoration: none; border: none; line-height: 1.6; white-space: nowrap; cursor: pointer; -webkit-tap-highlight-color: transparent; } .link-btn-ebird { background: #fff3e0; color: #e65100; } .link-btn-aab { background: #e3f2fd; color: #0d47a1; } .link-btn-bow { background: #f3e5f5; color: #6a1b9a; } .link-btn-avibase { background: #e8f5e9; color: #1b5e20; } .link-btn-xc { background: #fff8e1; color: #f57f17; } .link-btn-inat { background: #e0f2f1; color: #00695c; } .link-btn-wiki { background: #f5f5f5; color: #546e7a; } .fav-btn { background: transparent; border: none; padding: 4px; cursor: pointer; color: #bdbdbd; font-size: 1.3rem; line-height: 1; border-radius: 50%; transition: color .15s, transform .15s; -webkit-tap-highlight-color: transparent; } .fav-btn.is-fav { color: #f9a825; } .fav-btn:active { transform: scale(1.3); } /* ── Species detail ────────────────────────────────────────────────────────── */ .detail-page { padding: 0 0 24px; } .detail-header { background: var(--ciris-green); color: #fff; padding: 16px; } .detail-name-es { font-size: 1.4rem; font-weight: 700; line-height: 1.2; margin: 0 0 2px; } .detail-name-en { font-size: .95rem; opacity: .85; margin: 0 0 4px; } .detail-sci { font-size: .9rem; font-style: italic; opacity: .8; margin: 0 0 6px; } .detail-breadcrumb { font-size: .78rem; opacity: .8; margin: 0; line-height: 1.4; } .detail-breadcrumb .bc-sep { opacity: .6; margin: 0 1px; } .detail-taxonomy { display: flex; gap: 6px; flex-wrap: wrap; } .tax-chip { font-size: .75rem; background: rgba(255,255,255,.2); border-radius: 12px; padding: 2px 10px; font-weight: 500; } .detail-stats { display: flex; gap: 0; background: #fff; border-bottom: 1px solid #e0e0e0; } .stat-item { flex: 1; text-align: center; padding: 10px 4px; border-right: 1px solid #e0e0e0; } .stat-item:last-child { border-right: none; } .stat-value { font-size: 1rem; font-weight: 700; color: var(--ciris-green); display: block; } .stat-label { font-size: .65rem; color: #757575; text-transform: uppercase; letter-spacing: .5px; } .detail-links { display: flex; gap: 6px; flex-wrap: wrap; padding: 12px 16px; background: #fff; border-bottom: 1px solid #e0e0e0; } .detail-sections { padding: 8px 0; } .detail-section { background: #fff; border-bottom: 1px solid #e0e0e0; } .detail-section summary { padding: 12px 16px; font-weight: 600; font-size: .95rem; color: #333; cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; -webkit-tap-highlight-color: transparent; } .detail-section summary::-webkit-details-marker { display: none; } .detail-section summary::after { content: '›'; font-size: 1.2rem; color: #9e9e9e; transition: transform .2s; } .detail-section[open] summary::after { transform: rotate(90deg); } .detail-section-body { padding: 0 16px 16px; color: #444; font-size: .9rem; line-height: 1.6; } .empty-section { color: #9e9e9e; font-style: italic; } .detail-actions { background: #fff; border-top: 1px solid #e0e0e0; padding: 14px 16px; display: flex; align-items: center; gap: 10px; } .fav-btn-large { display: flex; align-items: center; gap: 6px; background: transparent; border: 2px solid #e0e0e0; border-radius: 24px; padding: 8px 16px; font-size: .9rem; font-weight: 600; color: #757575; cursor: pointer; transition: all .15s; } .fav-btn-large.is-fav { border-color: #f9a825; color: #f57f17; } .notes-section { background: #fff; border-top: 1px solid #e0e0e0; padding: 14px 16px; } .notes-section h6 { font-size: .85rem; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: #757575; margin-bottom: 8px; } .notes-textarea { width: 100%; border: 1px solid #e0e0e0; border-radius: 8px; padding: 10px 12px; font-size: .9rem; resize: vertical; min-height: 80px; color: #333; transition: border-color .15s; } .notes-textarea:focus { outline: none; border-color: var(--ciris-green); } .notes-save-btn { margin-top: 6px; font-size: .85rem; } .obs-section { background: #fff; border-top: 1px solid #e0e0e0; padding: 14px 16px; } .obs-section h6 { font-size: .85rem; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: #757575; margin-bottom: 8px; } .obs-list { list-style: none; padding: 0; margin: 0; } .obs-item { display: flex; justify-content: space-between; align-items: center; padding: 7px 0; border-bottom: 1px solid #f0f0f0; font-size: .85rem; } .obs-item:last-child { border-bottom: none; } .obs-date { color: #555; } .obs-loc { color: #757575; font-size: .78rem; margin-top: 1px; } .obs-count { font-weight: 700; color: var(--ciris-green); flex-shrink: 0; margin-left: 8px; } /* ── Location nav ──────────────────────────────────────────────────────────── */ .location-page { padding: 8px 0 16px; } .loc-section-title { font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .6px; color: #9e9e9e; padding: 10px 16px 4px; } .loc-list { list-style: none; padding: 0; margin: 0; background: #fff; border-top: 1px solid #e0e0e0; border-bottom: 1px solid #e0e0e0; } .loc-item { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; border-bottom: 1px solid #f0f0f0; cursor: pointer; font-size: .92rem; color: #333; -webkit-tap-highlight-color: transparent; transition: background .1s; } .loc-item:last-child { border-bottom: none; } .loc-item:hover, .loc-item:active { background: #f5f5f5; } .loc-item.selected { color: var(--ciris-green); font-weight: 600; background: #f1f8e9; } .loc-chevron { color: #bdbdbd; font-size: 1.1rem; } .loc-count { font-size: .75rem; color: #9e9e9e; margin-top: 1px; } .loc-coord { font-size: .72rem; color: #b0bec5; } /* ── Favorites page ────────────────────────────────────────────────────────── */ .empty-state { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 60px 24px; text-align: center; color: #9e9e9e; } .empty-state svg { opacity: .35; margin-bottom: 12px; } .empty-state p { font-size: .9rem; } /* ── Settings page ─────────────────────────────────────────────────────────── */ .settings-page { padding: 0 0 16px; } .settings-section { background: #fff; border-top: 1px solid #e0e0e0; border-bottom: 1px solid #e0e0e0; margin-top: 16px; } .settings-section-title { font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .6px; color: #9e9e9e; padding: 12px 16px 4px; } .settings-row { padding: 12px 16px; border-bottom: 1px solid #f0f0f0; font-size: .92rem; } .settings-row:last-child { border-bottom: none; } .settings-label { font-weight: 500; color: #333; margin-bottom: 2px; } .settings-desc { font-size: .8rem; color: #757575; margin-bottom: 8px; } .import-progress-wrap { margin-top: 8px; } /* Font size picker */ .font-size-picker { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 4px; } .font-size-btn { display: flex; flex-direction: column; align-items: center; gap: 2px; background: var(--ciris-surface); border: 2px solid #e0e0e0; border-radius: 8px; padding: 8px 14px; cursor: pointer; color: #424242; transition: border-color .15s, background .15s; -webkit-tap-highlight-color: transparent; min-width: 64px; } .font-size-btn.active { border-color: var(--ciris-green); background: #e8f5e9; color: var(--ciris-green-dark); } .font-size-label { font-size: .65rem; font-weight: 500; text-transform: uppercase; letter-spacing: .4px; color: inherit; } /* ── Utility ───────────────────────────────────────────────────────────────── */ .text-truncate-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } /* Bootstrap overrides */ .btn-success { --bs-btn-bg: var(--ciris-green); --bs-btn-border-color: var(--ciris-green); --bs-btn-hover-bg: var(--ciris-green-dark); --bs-btn-hover-border-color: var(--ciris-green-dark); } .form-control:focus, .form-select:focus { border-color: var(--ciris-green); box-shadow: 0 0 0 .2rem rgba(46,125,50,.2); } /* Scrollbar styling for desktop/tablet */ @media (min-width: 768px) { ::-webkit-scrollbar { width: 6px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: #ccc; border-radius: 3px; } } /* ── Theme picker (settings) ───────────────────────────────────────────────── */ .theme-picker { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 4px; } .theme-btn { display: flex; flex-direction: column; align-items: center; gap: 2px; background: var(--ciris-surface); border: 2px solid #e0e0e0; border-radius: 8px; padding: 8px 14px; cursor: pointer; color: #424242; transition: border-color .15s, background .15s; -webkit-tap-highlight-color: transparent; min-width: 64px; } .theme-btn.active { border-color: var(--ciris-green); background: #e8f5e9; color: var(--ciris-green-dark); } .theme-btn-icon { font-size: 1.2rem; line-height: 1; } .theme-btn-label { font-size: .65rem; font-weight: 500; text-transform: uppercase; letter-spacing: .4px; color: inherit; } /* ── Dark theme ────────────────────────────────────────────────────────────── */ [data-theme="dark"] { color-scheme: dark; } [data-theme="dark"] body { background: #121212; color: #e8e8e8; } [data-theme="dark"] .bottom-nav { background: #1e1e1e; border-top-color: #333; } [data-theme="dark"] .bottom-nav-item { color: #757575; } [data-theme="dark"] .bottom-nav-item:hover, [data-theme="dark"] .bottom-nav-item.active { color: #66bb6a; } [data-theme="dark"] .search-bar-wrap { background: #1e1e1e; border-bottom-color: #333; } [data-theme="dark"] .filter-row { background: #1e1e1e; border-bottom-color: #333; } [data-theme="dark"] .filter-row select, [data-theme="dark"] .filter-row .form-select { background-color: #2a2a2a; color: #e8e8e8; border-color: #444; } [data-theme="dark"] .col-btn { border-color: #444; color: #757575; } [data-theme="dark"] .col-btn.active { background: #2e7d32; border-color: #2e7d32; color: #fff; } [data-theme="dark"] .species-count { color: #9e9e9e; } [data-theme="dark"] .species-card { background: #1e1e1e; box-shadow: 0 1px 4px rgba(0,0,0,.5); } [data-theme="dark"] .card-name-es { color: #e8e8e8; } [data-theme="dark"] .card-name-en { color: #9e9e9e; } [data-theme="dark"] .card-breadcrumb { color: #8a9caa; } [data-theme="dark"] .card-breadcrumb em { color: #a5b8c2; } [data-theme="dark"] .bc-sep { color: #555; } [data-theme="dark"] .stat-chip { background: #1a2e1b; color: #81c784; } [data-theme="dark"] .link-btn-ebird { background: #2d1b00; color: #ffb74d; } [data-theme="dark"] .link-btn-aab { background: #0d1929; color: #64b5f6; } [data-theme="dark"] .link-btn-bow { background: #1a0a2e; color: #ce93d8; } [data-theme="dark"] .link-btn-avibase { background: #0a1f0a; color: #66bb6a; } [data-theme="dark"] .link-btn-xc { background: #2a1f00; color: #ffd54f; } [data-theme="dark"] .link-btn-inat { background: #001f1e; color: #4db6ac; } [data-theme="dark"] .link-btn-wiki { background: #1a1a1a; color: #90a4ae; } [data-theme="dark"] .fav-btn { color: #555; } [data-theme="dark"] .fav-btn.is-fav { color: #f9a825; } [data-theme="dark"] .loading-overlay { background: #121212; } /* Detail page */ [data-theme="dark"] .detail-stats { background: #1e1e1e; border-bottom-color: #333; } [data-theme="dark"] .stat-item { border-right-color: #333; } [data-theme="dark"] .stat-value { color: #66bb6a; } [data-theme="dark"] .stat-label { color: #9e9e9e; } [data-theme="dark"] .detail-links { background: #1e1e1e; border-bottom-color: #333; } [data-theme="dark"] .detail-section { background: #1e1e1e; border-bottom-color: #333; } [data-theme="dark"] .detail-section summary { color: #e8e8e8; } [data-theme="dark"] .detail-section summary::after { color: #666; } [data-theme="dark"] .detail-section-body { color: #b0b0b0; } [data-theme="dark"] .detail-actions { background: #1e1e1e; border-top-color: #333; } [data-theme="dark"] .fav-btn-large { border-color: #333; color: #9e9e9e; } [data-theme="dark"] .fav-btn-large.is-fav { border-color: #f9a825; color: #f57f17; } [data-theme="dark"] .notes-section { background: #1e1e1e; border-top-color: #333; } [data-theme="dark"] .notes-section h6 { color: #9e9e9e; } [data-theme="dark"] .notes-textarea { background: #2a2a2a; border-color: #444; color: #e8e8e8; } [data-theme="dark"] .notes-textarea:focus { border-color: #66bb6a; } [data-theme="dark"] .obs-section { background: #1e1e1e; border-top-color: #333; } [data-theme="dark"] .obs-section h6 { color: #9e9e9e; } [data-theme="dark"] .obs-item { border-bottom-color: #2a2a2a; } [data-theme="dark"] .obs-date { color: #b0b0b0; } [data-theme="dark"] .obs-loc { color: #9e9e9e; } [data-theme="dark"] .obs-count { color: #66bb6a; } /* Location nav */ [data-theme="dark"] .loc-list { background: #1e1e1e; border-color: #333; } [data-theme="dark"] .loc-item { color: #e8e8e8; border-bottom-color: #2a2a2a; } [data-theme="dark"] .loc-item:hover, [data-theme="dark"] .loc-item:active { background: #2a2a2a; } [data-theme="dark"] .loc-item.selected { color: #66bb6a; background: #0a1f0a; } [data-theme="dark"] .loc-chevron { color: #555; } [data-theme="dark"] .loc-section-title { color: #757575; } /* Settings */ [data-theme="dark"] .settings-section { background: #1e1e1e; border-color: #333; } [data-theme="dark"] .settings-section-title { color: #757575; } [data-theme="dark"] .settings-row { border-bottom-color: #2a2a2a; } [data-theme="dark"] .settings-label { color: #e8e8e8; } [data-theme="dark"] .settings-desc { color: #9e9e9e; } [data-theme="dark"] .font-size-btn { background: #2a2a2a; border-color: #444; color: #b0b0b0; } [data-theme="dark"] .font-size-btn.active { border-color: #66bb6a; background: #0a1f0a; color: #66bb6a; } [data-theme="dark"] .theme-btn { background: #2a2a2a; border-color: #444; color: #b0b0b0; } [data-theme="dark"] .theme-btn.active { border-color: #66bb6a; background: #0a1f0a; color: #66bb6a; } /* Bootstrap form controls */ [data-theme="dark"] .form-control, [data-theme="dark"] .form-select { background-color: #2a2a2a; border-color: #444; color: #e8e8e8; } [data-theme="dark"] .form-control::placeholder { color: #666; } [data-theme="dark"] .form-control:focus, [data-theme="dark"] .form-select:focus { border-color: #66bb6a; box-shadow: 0 0 0 .2rem rgba(102,187,106,.2); } /* Scrollbar dark */ @media (min-width: 768px) { [data-theme="dark"] ::-webkit-scrollbar-thumb { background: #444; } }