/* ========================================================================== classic.css — WorshipDocs "2011 professional" reskin Loaded LAST in , wrapped in @media screen so the print pipeline (print.css, enhanced-print.js, PDF output) is completely untouched. Chord-chart typography is safe: ChartPress elements declare their own font-family/size explicitly, and no universal font rules are used here. ========================================================================== */ @media screen { /* ---- 1. Geometry: square corners, no animation, flat shadows ---- */ *, *::before, *::after { border-radius: 0 !important; transition: none !important; animation-duration: 0s !important; } a:hover, .btn:hover, .song-item:hover, .card:hover, [class*="card"]:hover { transform: none !important; } .song-item, .card, .section, .settings-group, .modal, .dropdown-menu, .collapsible, .song-display, .toast { box-shadow: 0 1px 2px rgba(0, 0, 0, 0.10) !important; } /* ---- 2. Base typography & page ---- */ body { font-family: Tahoma, Geneva, Verdana, Arial, sans-serif !important; font-size: 13px !important; line-height: 1.5; color: #333; background: #e4e4e4 !important; } h1, h2, h3, h4, h5, h6 { font-family: Arial, Helvetica, sans-serif !important; font-weight: bold !important; color: #222; margin: 0 0 8px 0; } h1 { font-size: 20px !important; } h2 { font-size: 17px !important; } h3 { font-size: 15px !important; } h4, h5, h6 { font-size: 13px !important; } p { margin: 0 0 8px; } small { font-size: 11px !important; } a { color: #0b5394; text-decoration: none; } a:hover { color: #073763; text-decoration: underline; } main { max-width: 1024px; margin: 0 auto; padding: 8px 10px !important; min-height: 65vh; } .container, .content-container, .page-container { max-width: 1024px !important; padding: 0 10px !important; } /* ---- 3. Header / navigation: corporate gradient bar ---- */ .site-header, .nav-wrapper, nav.main-nav, header.site-header { background: linear-gradient(to bottom, #3f6fa8 0%, #2a4d78 50%, #223f63 100%) !important; border-bottom: 1px solid #16293f !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 1px 3px rgba(0, 0, 0, 0.3) !important; padding: 0 !important; } .nav-container, .nav-content { max-width: 1024px !important; min-height: 38px; padding: 0 10px !important; } .nav-logo { font: bold 16px Arial, sans-serif !important; color: #fff !important; text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.45); padding: 8px 10px 8px 0 !important; } .nav-logo-icon { font-size: 16px !important; } .nav-links a, .nav-links .nav-btn { font-size: 12px !important; font-weight: bold; color: #e8eef5 !important; text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.45); padding: 11px 12px !important; border-left: 1px solid rgba(255, 255, 255, 0.08); background: none !important; border-top: none; border-right: none; border-bottom: none; } .nav-links a:hover, .nav-links a.active, .nav-links .nav-btn:hover { background: rgba(0, 0, 0, 0.28) !important; color: #fff !important; text-decoration: none; } .nav-search input { font-size: 12px !important; padding: 3px 6px !important; border: 1px solid #16293f !important; box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.2) !important; } .dropdown-menu, .nav-dropdown { font-size: 12px !important; border: 1px solid #9aa4ae !important; background: #fff; padding: 2px 0 !important; } .dropdown-menu a { color: #333 !important; text-shadow: none; padding: 4px 14px !important; border: none !important; } .dropdown-menu a:hover { background: #dfe9f3 !important; } /* ---- 4. Buttons: gradient + 1px border + text-shadow ---- */ .btn, button.btn, a.btn, input[type="submit"], .nav-btn.cta { font: bold 12px Tahoma, Arial, sans-serif !important; padding: 4px 12px !important; border: 1px solid #9a9a9a !important; background: linear-gradient(to bottom, #fdfdfd, #dcdcdc); color: #333; text-shadow: 0 1px 0 #fff; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 1px 1px rgba(0, 0, 0, 0.15) !important; cursor: pointer; } .btn:hover, input[type="submit"]:hover { filter: brightness(0.93); text-decoration: none; } .btn:active { box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.25) !important; } .btn-primary, input[type="submit"].btn-primary { background: linear-gradient(to bottom, #5a94d6, #2f6cb3) !important; border-color: #1f4d85 !important; color: #fff !important; text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); } .btn-success { background: linear-gradient(to bottom, #6cc067, #3f9339) !important; border-color: #2e7028 !important; color: #fff !important; text-shadow: 0 -1px 0 rgba(0,0,0,.25); } .btn-danger { background: linear-gradient(to bottom, #e46a5f, #c23327) !important; border-color: #93261d !important; color: #fff !important; text-shadow: 0 -1px 0 rgba(0,0,0,.25); } .btn-warning { background: linear-gradient(to bottom, #fbd25c, #e8a91c) !important; border-color: #c58f13 !important; color: #5c4400 !important; } .btn-secondary { background: linear-gradient(to bottom, #fdfdfd, #dcdcdc) !important; border-color: #9a9a9a !important; color: #333 !important; } .btn-sm { padding: 2px 8px !important; font-size: 11px !important; } .btn-full { display: block; width: 100%; } /* ---- 5. Panels, sections, cards ---- */ .section, .card, .settings-group, .song-display, .collapsible, .auth-container, .form-container { background: #fff; border: 1px solid #c6c6c6 !important; padding: 10px !important; margin-bottom: 12px !important; } .section-header, .card-header { background: linear-gradient(to bottom, #fafafa, #e8e8e8) !important; border-bottom: 1px solid #c6c6c6 !important; margin: -10px -10px 10px !important; padding: 6px 10px !important; font: bold 12px Arial, sans-serif; } .song-item { border: 1px solid #c6c6c6 !important; background: #fff; margin-bottom: 6px !important; padding: 6px 10px !important; } .empty-state { padding: 14px !important; color: #777; } /* ---- 6. Forms ---- */ label, .form-group label { font: bold 12px Tahoma, Arial, sans-serif !important; margin-bottom: 2px; color: #333; } input[type="text"], input[type="email"], input[type="password"], input[type="search"], input[type="url"], input[type="number"], input[type="date"], select, textarea { font-family: Tahoma, Arial, sans-serif; font-size: 12px !important; padding: 3px 6px !important; border: 1px solid #a5a5a5 !important; box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.12) !important; background: #fff; } input:focus, select:focus, textarea:focus { outline: none; border-color: #4d90fe !important; box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.12), 0 0 3px rgba(77, 144, 254, 0.6) !important; } .form-group { margin-bottom: 8px !important; } .form-help, .form-text { font-size: 11px !important; color: #777; } .form-actions { margin-top: 10px !important; padding-top: 8px; border-top: 1px solid #e5e5e5; } /* ---- 7. Tables ---- */ table { font-size: 12px !important; border-collapse: collapse; } th { background: linear-gradient(to bottom, #f4f4f4, #e2e2e2) !important; border: 1px solid #c0c0c0 !important; font: bold 11px Arial, sans-serif; text-transform: uppercase; color: #444; padding: 4px 8px !important; text-align: left; } td { border: 1px solid #d4d4d4 !important; padding: 4px 8px !important; } tbody tr:nth-child(odd) td { background: #f7f7f7; } tbody tr:hover td { background: #e9f1f9; } .table-container { border: 1px solid #c6c6c6; } /* ---- 8. Alerts, badges, toasts, modals ---- */ .alert { font-size: 12px !important; padding: 7px 10px !important; margin-bottom: 10px !important; border: 1px solid transparent !important; } .alert-success { background: #dff0d8 !important; border-color: #c8e0b8 !important; color: #3c763d !important; } .alert-danger, .alert-error { background: #f2dede !important; border-color: #e0c1c4 !important; color: #a94442 !important; } .alert-warning { background: #fcf8e3 !important; border-color: #ebe0b8 !important; color: #8a6d3b !important; } .badge, .language-badge, .public-badge, .private-badge, .badge-public, .badge-private { font: bold 10px Tahoma, Arial, sans-serif !important; padding: 2px 6px !important; } .toast { border: 1px solid #9aa4ae !important; font-size: 12px !important; } .modal, .modal-content { border: 1px solid #8f8f8f !important; } .modal-header { background: linear-gradient(to bottom, #fafafa, #e6e6e6); border-bottom: 1px solid #c6c6c6 !important; padding: 7px 10px !important; } .modal-body { padding: 10px !important; } /* ---- 9. Hero / promo bands (home.css purple gradients) -> flat blue ---- */ .hero, .hero-section, [class*="hero"] { background: linear-gradient(to bottom, #2e5c8a, #1d3d5c) !important; padding: 18px 12px !important; border-bottom: 1px solid #142c44; color: #fff; } .hero h1, [class*="hero"] h1 { color: #fff; text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.4); } /* Auth pages: kill the pastel gradient background */ body.auth-page-simple { background: #e4e4e4 !important; } /* ---- 10. Statusbar: fixed application footer strip ---- */ footer, .app-statusbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 900; background: linear-gradient(to bottom, #3a3a3a, #262626) !important; border-top: 1px solid #4d4d4d; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08); padding: 3px 10px !important; font-size: 11px !important; color: #bbb !important; text-align: left; margin: 0 !important; display: flex; align-items: center; gap: 4px; white-space: nowrap; overflow: hidden; } footer p { margin: 0 !important; font-size: 11px; display: inline; } footer a { color: #9db8d6; margin: 0 4px; } footer a:hover { color: #fff; } .statusbar-right { margin-left: auto; color: #8a8a8a; } /* ---- 11. Chart safety ---- */ /* ChartPress (chartpress.css / unified-song-display.css) declares its own explicit font-family, font-size, and line-height on chart elements, and this sheet sets no rules that match chart internals — so chord/lyric alignment is untouched. Only letter-spacing is pinned as a belt-and- suspenders guard against any inherited tracking. */ [class^="cp-"], [class*=" cp-"] { letter-spacing: normal; } } /* end @media screen */ /* ========================================================================== APP SHELL v2 — fixed chrome + application components ========================================================================== */ @media screen { /* ---- 12. Fixed application chrome ---- */ .site-header { position: fixed; top: 0; left: 0; right: 0; z-index: 1000; } body { padding-top: 38px !important; padding-bottom: 24px !important; } /* ---- 13. Screen toolbar: title left, actions right ---- */ .app-toolbar { display: flex; align-items: center; gap: 6px; background: linear-gradient(to bottom, #fcfcfc, #ececec); border: 1px solid #c6c6c6; padding: 5px 8px; margin: 0 0 8px 0; box-shadow: inset 0 1px 0 #fff, 0 1px 2px rgba(0, 0, 0, 0.08); } .app-toolbar h1, .app-toolbar .app-title { font: bold 15px Arial, sans-serif !important; margin: 0 !important; color: #222; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .app-toolbar .app-subtitle { font-size: 11px; color: #777; white-space: nowrap; } .toolbar-actions { margin-left: auto; display: flex; gap: 4px; align-items: center; flex-wrap: wrap; } .toolbar-sep { width: 1px; align-self: stretch; background: #c6c6c6; box-shadow: 1px 0 0 #fff; margin: 0 3px; } .btn-group { display: inline-flex; } .btn-group .btn { margin: 0 !important; } .btn-group .btn + .btn { border-left: none !important; } /* ---- 14. Panels: sections become titled application panes ---- */ /* Any first h2/h3 inside a section/panel automatically becomes the pane's title bar — every existing template converts without markup changes. */ .panel { background: #fff; border: 1px solid #c6c6c6 !important; padding: 8px !important; margin-bottom: 8px !important; box-shadow: 0 1px 2px rgba(0,0,0,.1) !important; } .section, .settings-group, .card { padding: 8px !important; margin-bottom: 8px !important; } .section > h2:first-child, .section > h3:first-child, .panel > h2:first-child, .panel > h3:first-child, .settings-group > h3:first-child, .card > h3:first-child, .panel-head { display: block; background: linear-gradient(to bottom, #fafafa, #e8e8e8) !important; border-bottom: 1px solid #c6c6c6 !important; margin: -8px -8px 8px !important; padding: 5px 8px !important; font: bold 12px Arial, sans-serif !important; color: #333; } .panel-body { padding: 0; } /* ---- 15. Two-pane app layout ---- */ .app-cols { display: flex; gap: 8px; align-items: flex-start; } .app-side { flex: 0 0 220px; } .app-content { flex: 1 1 auto; min-width: 0; } @media (max-width: 768px) { .app-cols { display: block; } .app-side { margin-bottom: 8px; } } /* ---- 16. Tab bars (settings tabs and friends) ---- */ .settings-tabs, .tab-bar { display: flex; gap: 0; border-bottom: 1px solid #b5b5b5 !important; margin: 0 0 8px !important; padding: 0 !important; background: none !important; } .tab-button, .tab-bar a { font: bold 12px Tahoma, Arial, sans-serif !important; color: #555 !important; background: linear-gradient(to bottom, #f5f5f5, #e2e2e2) !important; border: 1px solid #b5b5b5 !important; border-bottom: none !important; padding: 4px 12px !important; margin: 0 2px -1px 0 !important; cursor: pointer; } .tab-button.active, .tab-bar a.active { background: #fff !important; color: #222 !important; padding-bottom: 5px !important; } .tab-button::after { display: none !important; } /* ---- 17. Dense app lists & key-value grids ---- */ .list-dense { border: 1px solid #c6c6c6; background: #fff; } .list-dense > * { display: block; padding: 4px 8px; border-bottom: 1px solid #e5e5e5; font-size: 12px; } .list-dense > *:nth-child(odd) { background: #f7f7f7; } .list-dense > *:hover { background: #e9f1f9; } .list-dense > *:last-child { border-bottom: none; } .kv { display: grid; grid-template-columns: max-content 1fr; gap: 2px 10px; font-size: 12px; } .kv dt { font-weight: bold; color: #555; } .kv dd { margin: 0; } /* ---- 18. Compact stat tiles (dashboards) ---- */ .stat-card, .stat-tile { background: linear-gradient(to bottom, #fdfdfd, #efefef) !important; border: 1px solid #c6c6c6 !important; padding: 6px 10px !important; box-shadow: inset 0 1px 0 #fff !important; } .stat-card h3, .stat-card .stat-value { font-size: 18px !important; margin: 0 !important; color: #1d3d5c; } .stat-card p, .stat-card .stat-label { font-size: 10px !important; text-transform: uppercase; color: #777; margin: 0 !important; letter-spacing: .04em; } } /* end app shell */ /* ---- 19. Auth screens as centered app panels (no markup changes) ---- */ @media screen { .auth-container { max-width: 380px; margin: 24px auto !important; } .auth-container > h1:first-child { background: linear-gradient(to bottom, #fafafa, #e8e8e8) !important; border-bottom: 1px solid #c6c6c6 !important; margin: -10px -10px 10px !important; padding: 6px 10px !important; font-size: 14px !important; } .auth-container > p:first-of-type { font-size: 11px; color: #777; margin-top: -4px; } .google-btn { width: 100%; border: 1px solid #9a9a9a !important; background: linear-gradient(to bottom, #fdfdfd, #dcdcdc) !important; padding: 5px !important; font: bold 12px Tahoma, Arial, sans-serif !important; cursor: pointer; } .divider { font-size: 10px; color: #999; text-align: center; margin: 8px 0; } .footer-link { font-size: 11px; text-align: center; } .recaptcha-notice { font-size: 10px; color: #999; } } /* ========================================================================== APP SHELL v2b — every page-header pattern becomes an application toolbar (pure CSS: no markup or JS-binding changes on these screens) ========================================================================== */ @media screen { /* ---- 20. Shared toolbar treatment for existing header wrappers ---- */ .page-header, .dashboard-header, .search-header .container, .song-header .container, .import-header { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; background: linear-gradient(to bottom, #fcfcfc, #ececec) !important; border: 1px solid #c6c6c6 !important; box-shadow: inset 0 1px 0 #fff, 0 1px 2px rgba(0, 0, 0, 0.08) !important; padding: 5px 8px !important; margin: 0 0 8px 0 !important; max-width: none !important; } .page-header h1, .dashboard-header h1, .search-header h1, .song-header h1.song-title, .site-index-header h1, .import-header h1 { font: bold 15px Arial, sans-serif !important; margin: 0 !important; color: #222 !important; } .search-header { background: none !important; padding: 0 !important; margin: 0 !important; } .search-header .search-info { margin: 0 !important; font-size: 11px !important; color: #777 !important; order: 2; } .song-header { background: none !important; border: none !important; padding: 0 !important; margin: 0 !important; box-shadow: none !important; } .song-header .song-info { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; min-width: 0; } .song-header .song-meta { font-size: 11px !important; color: #777; display: flex; gap: 5px; align-items: center; flex-wrap: wrap; margin: 0 !important; } .song-header .song-actions { margin-left: auto; display: flex; gap: 4px; } .author-avatar { width: 16px !important; height: 16px !important; font-size: 9px !important; line-height: 16px; } /* Site index: filter controls inline in the toolbar */ .site-index-header { background: none !important; border: none !important; box-shadow: none !important; padding: 0 !important; margin: 0 !important; } .site-index-header .container { max-width: none !important; padding: 0 !important; } .filter-controls { display: flex !important; gap: 8px !important; align-items: flex-end; flex-wrap: wrap; margin-left: auto; } .filter-item { margin: 0 !important; } .filter-item label { font-size: 10px !important; text-transform: uppercase; color: #777 !important; display: block; margin-bottom: 1px !important; } .filter-item input, .filter-item select { min-width: 120px; } .mobile-header-row { display: flex; align-items: center; gap: 8px; } .mobile-filter-panel { border: 1px solid #c6c6c6; background: #fff; padding: 8px !important; } /* ---- 21. Profile header: compact identity strip ---- */ .profile-header { background: #fff !important; border: 1px solid #c6c6c6 !important; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) !important; padding: 8px 10px !important; margin: 0 0 8px 0 !important; } .profile-header .profile-avatar, .profile-header .profile-avatar img { width: 48px !important; height: 48px !important; font-size: 18px !important; margin: 0 !important; } .profile-header h1.profile-name { font-size: 15px !important; margin: 0 !important; } .profile-header p, .profile-header .profile-bio { font-size: 11px !important; margin: 2px 0 0 !important; color: #666; } .profile-stats, .profile-header .stats { gap: 10px !important; font-size: 11px !important; margin: 4px 0 0 !important; } /* ---- 22. Static pages: h1 inside .section becomes the pane title ---- */ .section > h1:first-child { display: block; background: linear-gradient(to bottom, #fafafa, #e8e8e8) !important; border-bottom: 1px solid #c6c6c6 !important; margin: -8px -8px 8px !important; padding: 5px 8px !important; font: bold 14px Arial, sans-serif !important; } /* ---- 23. Song page + editor chrome density ---- */ .main-content .container { max-width: none !important; padding: 0 !important; } .controls { padding: 5px 8px !important; margin-bottom: 8px !important; border: 1px solid #c6c6c6; background: linear-gradient(to bottom, #fcfcfc, #ececec) !important; } .editor-header { border: 1px solid #c6c6c6 !important; background: linear-gradient(to bottom, #fcfcfc, #ececec) !important; padding: 4px 8px !important; } /* ---- 24. Song list rows read as an application list ---- */ .songs-list { border: 1px solid #c6c6c6; background: #fff; } .songs-list .song-item { border: none !important; border-bottom: 1px solid #e5e5e5 !important; margin: 0 !important; padding: 5px 10px !important; box-shadow: none !important; } .songs-list .song-item:nth-child(odd) { background: #f7f7f7; } .songs-list .song-item:hover { background: #e9f1f9 !important; } .songs-list .song-item:last-child { border-bottom: none !important; } .song-item .song-title { font-size: 12px !important; font-weight: bold; } .song-item .song-preview { font-size: 11px !important; color: #888; } } /* end v2b */ /* ========================================================================== APP SHELL v3 — arrangement fixes: alignment, ghosts, mobile overflow ========================================================================== */ @media screen { /* ---- 25. Hamburger: sized and positioned for the fixed 38px bar ---- */ .mobile-menu-toggle { top: 5px !important; right: 6px !important; left: auto !important; width: 28px; height: 28px; padding: 5px !important; background: rgba(0, 0, 0, 0.25) !important; border: 1px solid rgba(255, 255, 255, 0.25) !important; z-index: 1001 !important; } .mobile-menu-toggle span { width: 16px !important; height: 2px !important; margin: 3px auto !important; background: #fff !important; } /* ---- 26. Site index: one header at a time, aligned to the fixed nav ---- */ .site-index-header { position: sticky; top: 38px !important; z-index: 500 !important; } @media (min-width: 769px) { .site-index-header .desktop-filters { display: flex !important; align-items: flex-end; flex-wrap: wrap; gap: 6px 10px; background: linear-gradient(to bottom, #fcfcfc, #ececec) !important; border: 1px solid #c6c6c6 !important; box-shadow: inset 0 1px 0 #fff, 0 1px 2px rgba(0, 0, 0, 0.08) !important; padding: 5px 8px !important; margin: 0 0 8px 0 !important; } .site-index-header .mobile-header, .site-index-header .mobile-filter-panel { display: none !important; } } @media (max-width: 768px) { .site-index-header .desktop-filters { display: none !important; } .mobile-header { display: flex; flex-direction: column; gap: 4px; background: linear-gradient(to bottom, #fcfcfc, #ececec) !important; border: 1px solid #c6c6c6 !important; padding: 5px 8px !important; margin: 0 0 8px 0 !important; } .mobile-header h1 { color: #222 !important; } } .header-title { margin: 0 !important; } .filter-toggle-btn { font: bold 11px Tahoma, Arial, sans-serif !important; padding: 3px 8px !important; border: 1px solid #9a9a9a !important; background: linear-gradient(to bottom, #fdfdfd, #dcdcdc) !important; color: #333 !important; margin-left: auto; } /* Index list as the dense application list */ .site-index-content .container { max-width: none !important; padding: 0 !important; } .songs-index-list { border: 1px solid #c6c6c6; background: #fff; } .index-song-item { border: none !important; border-bottom: 1px solid #e5e5e5 !important; margin: 0 !important; box-shadow: none !important; } .index-song-item:nth-child(odd) { background: #f7f7f7; } .index-song-item:hover { background: #e9f1f9 !important; } .index-song-item:last-child { border-bottom: none !important; } .index-song-link { display: block; padding: 5px 10px !important; text-decoration: none; } .index-song-title { font-size: 12px !important; font-weight: bold; color: #0b5394; } .index-song-author { font-size: 11px !important; color: #555; margin-left: 6px; } .index-song-meta { font-size: 10px !important; color: #999; display: block; } .user-chip, .user-chip-desktop { font-size: 11px !important; padding: 2px 8px !important; border: 1px solid #b5b5b5 !important; background: linear-gradient(to bottom, #fdfdfd, #e6e6e6) !important; } .user-chip.active, .user-chip-desktop.active { background: #1d3d5c !important; color: #fff !important; border-color: #142c44 !important; } .workload-indicator { font-size: 9px !important; opacity: .85; } /* ---- 27. Mobile arrangement guards: no page-level horizontal scroll ---- */ @media (max-width: 768px) { html, body { max-width: 100%; overflow-x: hidden; } .app-toolbar, .toolbar-actions, .controls, .page-header, .dashboard-header, .song-header .container { flex-wrap: wrap !important; } .app-toolbar h1 { white-space: normal; } .song-display, .table-container { overflow-x: auto !important; -webkit-overflow-scrolling: touch; max-width: 100%; } .song-header .song-actions { margin-left: 0; width: 100%; } .app-statusbar a { margin: 0 2px; } main { padding: 6px !important; } img, video, iframe { max-width: 100%; height: auto; } } } /* end v3 */