/* ============================================================ MEDIVOCA SKINS — skins.css Three themes: original | light | dark Applied via: ============================================================ */ /* ---- ORIGINAL SKIN (default — blue headers, Arial) ---- */ [data-skin="original"] { --skin-bg: #fafafa; --skin-text: #1a1a1a; --skin-font: Arial, sans-serif; --skin-primary: #007acc; --skin-primary-dark: #005f99; --skin-primary-hover: #005fa3; --skin-subtitle: #6b4c3b; --skin-tab-bg: #ffffff; --skin-tab-border: #c0d4e8; --skin-tab-text: #004d80; --skin-tab-active-bg: #007acc; --skin-tab-active-text: #ffffff; --skin-tab-hover-underline: #3399ff; --skin-search-bg: #ffffff; --skin-search-border: #ccc; --skin-search-focus-border: #66b7ff; --skin-search-focus-shadow: rgba(0, 122, 204, 0.25); --skin-alphabet-bg: #ffffff; --skin-alphabet-border: #c0d4e8; --skin-alphabet-text: #007acc; --skin-alphabet-hover-bg: #e6f2ff; --skin-alphabet-selected-bg: #007acc; --skin-alphabet-selected-text: #ffffff; --skin-table-header-bg: #007acc; --skin-table-header-text: #ffffff; --skin-table-border: #ccc; --skin-table-row-hover: #e6f7ff; --skin-table-col2-text: #007acc; --skin-table-col2-weight: bold; --skin-table-col2-align: center; --skin-divider-bg: #e6f2fb; --skin-divider-border: #c0d4e8; --skin-divider-text: #004d80; --skin-sticky-header-bg: #007acc; --skin-fp-bar-bg: rgba(255,255,255,0.92); --skin-fp-pill-bg: #007acc; --skin-fp-pill-text: #ffffff; --skin-fp-pill-hover: #005fa3; --skin-fp-secondary-bg: #e8f4ff; --skin-fp-secondary-text: #007acc; --skin-desktop-alpha-bg: white; --skin-hint-color: #007acc; --skin-suggestions-bg: rgba(255,255,255,0.85); --skin-history-bg: #ffffff; --skin-history-hover: #f5f7fa; --skin-select-bg: #ffffff; --skin-select-text: #555; --skin-info-icon-bg: #007acc; --skin-tooltip-bg: rgba(245,245,245,0.95); --skin-tooltip-text: #333; --skin-tooltip-border: #ccc; --skin-scrollbar-thumb: #007acc; --skin-scrollbar-track: #e6f2ff; } /* ---- LIGHT SKIN (GitHub version — Inter font, minimal) ---- */ [data-skin="light"] { --skin-bg: #fafafa; --skin-text: #1A1A1A; --skin-font: 'Inter', sans-serif; --skin-primary: #007acc; --skin-primary-dark: #005f99; --skin-primary-hover: #005fa3; --skin-subtitle: #6b4c3b; --skin-tab-bg: #ffffff; --skin-tab-border: #c0d4e8; --skin-tab-text: #004d80; --skin-tab-active-bg: #007acc; --skin-tab-active-text: #ffffff; --skin-tab-hover-underline: #3399ff; --skin-search-bg: #ffffff; --skin-search-border: #ccc; --skin-search-focus-border: #66b7ff; --skin-search-focus-shadow: rgba(0, 122, 204, 0.25); --skin-alphabet-bg: #ffffff; --skin-alphabet-border: #c0d4e8; --skin-alphabet-text: #007acc; --skin-alphabet-hover-bg: #e6f2ff; --skin-alphabet-selected-bg: #007acc; --skin-alphabet-selected-text: #ffffff; --skin-table-header-bg: #F5F5F5; --skin-table-header-text: #1A1A1A; --skin-table-border: rgba(0,0,0,0.1); --skin-table-row-hover: rgba(0,0,0,0.04); --skin-table-col2-text: #1A1A1A; --skin-table-col2-weight: 400; --skin-table-col2-align: left; --skin-divider-bg: #e6f2fb; --skin-divider-border: #c0d4e8; --skin-divider-text: #004d80; --skin-sticky-header-bg: #F5F5F5; --skin-fp-bar-bg: rgba(255,255,255,0.92); --skin-fp-pill-bg: #007acc; --skin-fp-pill-text: #ffffff; --skin-fp-pill-hover: #005fa3; --skin-fp-secondary-bg: #e8f4ff; --skin-fp-secondary-text: #007acc; --skin-desktop-alpha-bg: white; --skin-hint-color: #007acc; --skin-suggestions-bg: rgba(255,255,255,0.85); --skin-history-bg: #ffffff; --skin-history-hover: #f5f7fa; --skin-select-bg: #ffffff; --skin-select-text: #555; --skin-info-icon-bg: #007acc; --skin-tooltip-bg: rgba(245,245,245,0.95); --skin-tooltip-text: #333; --skin-tooltip-border: #ccc; --skin-scrollbar-thumb: #007acc; --skin-scrollbar-track: #e6f2ff; } /* ---- DARK SKIN ---- */ [data-skin="dark"] { --skin-bg: #0f1117; --skin-text: #e8eaf0; --skin-font: 'Inter', sans-serif; --skin-primary: #4da6e8; --skin-primary-dark: #3a8fcc; --skin-primary-hover: #3a8fcc; --skin-subtitle: #c09d8a; --skin-tab-bg: #1c2130; --skin-tab-border: #2e3a52; --skin-tab-text: #90b8d8; --skin-tab-active-bg: #1565a8; --skin-tab-active-text: #ffffff; --skin-tab-hover-underline: #4da6e8; --skin-search-bg: #1c2130; --skin-search-border: #2e3a52; --skin-search-focus-border: #4da6e8; --skin-search-focus-shadow: rgba(77, 166, 232, 0.25); --skin-alphabet-bg: #1c2130; --skin-alphabet-border: #2e3a52; --skin-alphabet-text: #4da6e8; --skin-alphabet-hover-bg: #1e3148; --skin-alphabet-selected-bg: #1565a8; --skin-alphabet-selected-text: #ffffff; --skin-table-header-bg: #1565a8; --skin-table-header-text: #ffffff; --skin-table-border: #2e3a52; --skin-table-row-hover: rgba(77, 166, 232, 0.08); --skin-table-col2-text: #4da6e8; --skin-table-col2-weight: 500; --skin-table-col2-align: left; --skin-divider-bg: #162236; --skin-divider-border: #2e3a52; --skin-divider-text: #90b8d8; --skin-sticky-header-bg: #1565a8; --skin-fp-bar-bg: rgba(15,17,23,0.92); --skin-fp-pill-bg: #1565a8; --skin-fp-pill-text: #ffffff; --skin-fp-pill-hover: #1050a0; --skin-fp-secondary-bg: #1c2130; --skin-fp-secondary-text: #4da6e8; --skin-desktop-alpha-bg: #0f1117; --skin-hint-color: #4da6e8; --skin-suggestions-bg: rgba(28,33,48,0.95); --skin-history-bg: #1c2130; --skin-history-hover: #1e2840; --skin-select-bg: #1c2130; --skin-select-text: #c0cce0; --skin-info-icon-bg: #1565a8; --skin-tooltip-bg: rgba(28,33,48,0.97); --skin-tooltip-text: #e8eaf0; --skin-tooltip-border: #2e3a52; --skin-scrollbar-thumb: #1565a8; --skin-scrollbar-track: #1c2130; } /* ============================================================ APPLYING CSS VARIABLES TO ALL ELEMENTS These rules consume the variables above. ============================================================ */ [data-skin] body { font-family: var(--skin-font); background: var(--skin-bg); color: var(--skin-text); } [data-skin] h1 { color: var(--skin-primary); } [data-skin] .subtitle { color: var(--skin-subtitle); } /* Tabs */ [data-skin] .tabs { background: var(--skin-tab-bg); box-shadow: inset 0 0 0 1px var(--skin-tab-border); } [data-skin] .tab { color: var(--skin-tab-text); border-right-color: var(--skin-tab-border); } [data-skin] .tab.active { background: var(--skin-tab-active-bg); color: var(--skin-tab-active-text); } [data-skin] .tab.active::after { border-color: var(--skin-tab-active-bg) transparent transparent transparent; } [data-skin] .tabs .tab:not(.active)::after { background-color: var(--skin-tab-hover-underline); } /* Search */ [data-skin] #searchBox { background-color: var(--skin-search-bg); border-color: var(--skin-search-border); color: var(--skin-text); } [data-skin] #searchBox:focus { border-color: var(--skin-search-focus-border); box-shadow: 0 0 0 3px var(--skin-search-focus-shadow); } [data-skin] #searchBox::placeholder { color: var(--skin-tab-text); opacity: 0.6; } [data-skin] .clear-icon { color: var(--skin-primary); } [data-skin] .clear-icon:hover { color: var(--skin-primary-dark); } /* Alphabet bar */ [data-skin] .alphabet-bar { background: var(--skin-alphabet-bg); box-shadow: inset 0 0 0 1px var(--skin-alphabet-border); } [data-skin] .alphabet-bar button { color: var(--skin-alphabet-text); } [data-skin] .alphabet-bar button:hover { background-color: var(--skin-alphabet-hover-bg); } [data-skin] .alphabet-bar button.selected { background-color: var(--skin-alphabet-selected-bg); color: var(--skin-alphabet-selected-text); } [data-skin] .alphabet-bar button:not(:last-child)::after { background-color: var(--skin-alphabet-border); } [data-skin] .arrow-icon path { stroke: var(--skin-primary); } /* Desktop alpha wrapper bg */ [data-skin] .desktop-alpha-wrapper { background: var(--skin-desktop-alpha-bg); } /* Table */ [data-skin] table { background: var(--skin-bg); border-color: var(--skin-table-border); } [data-skin] th, [data-skin] td { border-color: var(--skin-table-border); color: var(--skin-text); } [data-skin] th { background: var(--skin-table-header-bg); color: var(--skin-table-header-text) !important; } [data-skin] td:nth-child(2) { color: var(--skin-table-col2-text); font-weight: var(--skin-table-col2-weight); text-align: var(--skin-table-col2-align); } [data-skin] tr:hover { background: var(--skin-table-row-hover); } /* Alpha dividers */ [data-skin] .alpha-divider td { background: var(--skin-divider-bg); border-color: var(--skin-divider-border); color: var(--skin-divider-text); } /* Sticky header */ [data-skin] .table-wrapper thead th { background: var(--skin-sticky-header-bg); color: var(--skin-table-header-text); } /* Floating pagination */ [data-skin] .floating-pagination-bar { background: var(--skin-fp-bar-bg); } [data-skin] .fp-pill { background: var(--skin-fp-pill-bg); color: var(--skin-fp-pill-text); } [data-skin] .fp-pill:hover { background: var(--skin-fp-pill-hover); } [data-skin] .fp-secondary { background: var(--skin-fp-secondary-bg); color: var(--skin-fp-secondary-text); } [data-skin] .fp-secondary:hover { background: var(--skin-fp-secondary-bg); filter: brightness(0.95); } [data-skin] .floating-pagination-hint { color: var(--skin-hint-color); } /* Suggestions */ [data-skin] .suggestions { background: var(--skin-suggestions-bg); color: var(--skin-text); } [data-skin] .suggestions div.highlight { background: rgba(77,166,232,0.15); color: var(--skin-primary); } /* Search history */ [data-skin] .search-history { background: var(--skin-history-bg); color: var(--skin-text); } [data-skin] .search-history-item:hover { background: var(--skin-history-hover); } [data-skin] .search-history-icon { color: var(--skin-primary); } [data-skin] .search-history-icon svg { stroke: var(--skin-primary-dark); } [data-skin] .search-history-clearall { color: var(--skin-primary); border-top-color: var(--skin-table-border); } [data-skin] .search-history-clearall:hover { background: var(--skin-history-hover); } /* Select dropdown */ [data-skin] select { background-color: var(--skin-select-bg); color: var(--skin-select-text); border-bottom-color: var(--skin-table-border); } [data-skin] select:hover, [data-skin] select:focus { background-color: var(--skin-history-hover); color: var(--skin-text); } /* Info icon */ [data-skin] .info-icon { background-color: var(--skin-info-icon-bg); color: #fff; } [data-skin] .info-icon:hover { background-color: var(--skin-primary-dark); } /* Tooltip */ [data-skin] .tooltip { background: var(--skin-tooltip-bg); color: var(--skin-tooltip-text); border-color: var(--skin-tooltip-border); } [data-skin] .tooltip.below .tooltip-arrow::before { border-bottom-color: var(--skin-tooltip-border); } [data-skin] .tooltip.below .tooltip-arrow::after { border-bottom-color: var(--skin-tooltip-bg); } [data-skin] .tooltip.above .tooltip-arrow::before { border-top-color: var(--skin-tooltip-border); } [data-skin] .tooltip.above .tooltip-arrow::after { border-top-color: var(--skin-tooltip-bg); } /* Scrollbar */ [data-skin] .table-wrapper::-webkit-scrollbar-thumb { background-color: var(--skin-scrollbar-thumb); } [data-skin] .table-wrapper::-webkit-scrollbar-track { background: var(--skin-scrollbar-track); } /* Mobile nav */ [data-skin] .nav-text { color: var(--skin-primary); } [data-skin] .nav-text span:hover { color: var(--skin-primary-dark); } /* ---- BURGER MENU STYLES ---- */ .burger-btn { position: fixed; top: 14px; right: 16px; z-index: 10000; width: 40px; height: 40px; border: none; border-radius: 10px; cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; padding: 8px; transition: background 0.2s ease, box-shadow 0.2s ease; background: var(--skin-tab-bg, #fff); box-shadow: 0 2px 8px rgba(0,0,0,0.12); } .burger-btn:hover { box-shadow: 0 4px 14px rgba(0,0,0,0.18); } .burger-btn span { display: block; width: 20px; height: 2px; border-radius: 2px; background: var(--skin-primary, #007acc); transition: transform 0.25s ease, opacity 0.2s ease; } /* Animate to X when open */ .burger-btn.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .burger-btn.open span:nth-child(2) { opacity: 0; transform: scaleX(0); } .burger-btn.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } /* Menu panel */ .site-menu { position: fixed; top: 0; right: -300px; width: 280px; height: 100%; z-index: 9999; padding: 70px 0 24px; display: flex; flex-direction: column; overflow-y: auto; background: var(--skin-history-bg, #fff); box-shadow: -4px 0 20px rgba(0,0,0,0.12); transition: right 0.3s cubic-bezier(0.4,0,0.2,1); } .site-menu.open { right: 0; } /* Backdrop */ .menu-backdrop { position: fixed; inset: 0; z-index: 9998; background: rgba(0,0,0,0.3); opacity: 0; pointer-events: none; transition: opacity 0.3s ease; backdrop-filter: blur(2px); } .menu-backdrop.open { opacity: 1; pointer-events: auto; } /* Section headers */ .menu-section-label { font-size: 0.7rem; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: var(--skin-primary, #007acc); padding: 16px 20px 8px; opacity: 0.7; } /* Nav links */ .menu-nav-link { display: flex; align-items: center; gap: 12px; padding: 11px 20px; font-size: 0.95rem; font-weight: 500; color: var(--skin-text, #1a1a1a); cursor: pointer; text-decoration: none; transition: background 0.15s ease, color 0.15s ease; border-radius: 8px; margin: 0 8px; } .menu-nav-link:hover { background: var(--skin-history-hover, #f5f7fa); color: var(--skin-primary, #007acc); } .menu-nav-link svg { flex-shrink: 0; opacity: 0.7; stroke: currentColor; } .menu-nav-link.coming-soon { opacity: 0.45; cursor: default; pointer-events: none; } .menu-coming-badge { margin-left: auto; font-size: 0.65rem; font-weight: 600; letter-spacing: 0.5px; padding: 2px 6px; border-radius: 4px; background: var(--skin-alphabet-hover-bg, #e6f2ff); color: var(--skin-primary, #007acc); } /* Divider */ .menu-divider { height: 1px; background: var(--skin-table-border, #ccc); margin: 12px 20px; opacity: 0.5; } /* Skin options */ .skin-options { display: flex; flex-direction: column; gap: 6px; padding: 4px 8px; } .skin-option { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 10px; cursor: pointer; border: 2px solid transparent; transition: border-color 0.2s ease, background 0.15s ease; } .skin-option:hover { background: var(--skin-history-hover, #f5f7fa); } .skin-option.active { border-color: var(--skin-primary, #007acc); background: var(--skin-alphabet-hover-bg, #e6f2ff); } /* Skin preview swatch */ .skin-swatch { width: 36px; height: 36px; border-radius: 8px; flex-shrink: 0; border: 1.5px solid rgba(0,0,0,0.1); display: flex; align-items: flex-end; overflow: hidden; } .skin-swatch-original { background: linear-gradient(135deg, #fafafa 50%, #007acc 50%); } .skin-swatch-light { background: linear-gradient(135deg, #ffffff 50%, #F5F5F5 50%); border-color: rgba(0,0,0,0.15); } .skin-swatch-dark { background: linear-gradient(135deg, #0f1117 50%, #1565a8 50%); } .skin-option-info { display: flex; flex-direction: column; gap: 1px; } .skin-option-name { font-size: 0.88rem; font-weight: 600; color: var(--skin-text, #1a1a1a); } .skin-option-desc { font-size: 0.75rem; color: var(--skin-text, #1a1a1a); opacity: 0.55; } .skin-check { margin-left: auto; color: var(--skin-primary, #007acc); opacity: 0; transition: opacity 0.15s ease; } .skin-option.active .skin-check { opacity: 1; } /* Dark skin specific adjustments */ [data-skin="dark"] .burger-btn { box-shadow: 0 2px 8px rgba(0,0,0,0.4); } [data-skin="dark"] .site-menu { box-shadow: -4px 0 20px rgba(0,0,0,0.5); } [data-skin="dark"] .skin-option.active { background: rgba(77,166,232,0.12); } [data-skin="dark"] select { background-image: url('data:image/svg+xml;utf8,'); } /* Tab active outline for dark (replaces original @media dark) */ [data-skin="dark"] .tab.active { outline: 2px solid rgba(255,255,255,0.3); outline-offset: -2px; } /* Mobile adjustments */ @media (max-width: 600px) { .site-menu { width: 260px; } .burger-btn { top: 10px; right: 12px; } }