/* song page header/footer/sidebar overrides.
Extracted verbatim from content-classic-test.php on 2026-06-10
(audit PERF-07 stage B): same rules, same cascade position via an
in-place , now cacheable instead of re-sent in every HTML. */
/* ─────────────────────────────────────────────────────────────────
Print stylesheet — what survives is: page title, artist name,
chord diagrams, lyrics with chord lines. Everything else is chrome.
───────────────────────────────────────────────────────────────── */
@media print {
/* ── 1. Hide UI chrome ───────────────────────────────────────── */
.header, .header--standard,
.footer, .uku-footer, /* both old + new footer */
.medium-padding80,
.olympus-theme-sidebar, .fixed-sidebar,
#ukutabs_sidewall_left,
.vc_col-sm-4,
.comments-area,
.wpdiscuz-loading-bar-auth, .wpdiscuz-comment-message-auth,
.jointhediscussion,
/* wpDiscuz comments + its "insert source code" modal (a textarea
and an Insert button). The modal is toggled by the editor JS and
can be re-parented outside .comments-area, so it is hidden by id
as well as via the .uku-comments-wrap container. It was printing
as an empty box at the foot of the song sheet. */
.uku-comments-wrap,
#wpd-editor-source-code-wrapper,
#wpd-editor-source-code-wrapper-bg,
.advert, .donotprint,
.ad-sticky, .ad-sticky-desktop-anchor, .ad-sticky-wrapper,
#primis_container_div,
.fs-sticky-footer, #fs-sticky-footer,
.fs-sticky-parent, .fs-sticky-wrapper, #fs-slot-footer-wrapper,
.qc-cmp2-persistent-link, .qc-cmp2-container,
#qc-cmp2-persistent-link, #qc-cmp2-container,
.wp-dark-mode-switcher,
.container.inner-relative-wrapper,
#notice-copyright,
.remember,
/* Our toolbars + popovers */
#ascro, .ukutoolbox, .uku-toolbar,
.sticky-chords,
.uku-settings-pop,
/* Theme picker (sun/moon square in top-left) — purely UI chrome. */
#uku-theme-toggle, .uku-theme-toggle,
/* Chord-toolbar pills (simplify, hide beginner chords, transpose
buttons) — were printing as visible UI noise above the song. */
.uku-cits-pill, .uku-cits-controls,
[class*="cits-pill"], [class*="cits-controls"],
/* Our song-head bar (gold "Song:") + meta strip — page title comes from #stunning-header instead */
.uku-songhead, .uku-songmeta,
.accordion h3,
/* Star rating widget at the bottom of the song */
#rate-this-song, .uku-rate-section,
.rmp-widgets-container, .rmp-rating-widget,
/* Stale / page-specific buttons */
.howtoread, #howtoreadbuttonn,
#tuneryourukulelebutton,
#tools, #ukutabs-tools,
#ulike, #alohah4,
#actionboxbottom,
.lefthandtoggle,
#headeralbum, #headergenre, #tuningselectionprint,
.onlysmall, .notonlysmall,
.vc_custom_1605774777343,
/* All FreeStar / Google ad slots and their containers. The
sidewall + sticky ads are runtime-injected (no static markup
to target by ID), so these wildcard class/attribute selectors
catch whatever the ad scripts add at load time. */
[data-freestar-ad],
[id^="ukutabs_"][id*="leaderboard"],
[id^="ukutabs_"][id*="siderail"],
[id^="ukutabs_"][id*="sidewall"], /* catches sidewall_left / sidewall_right + their -container suffixes */
[id^="ukutabs_"][id*="incontent"],
[id^="ukutabs_"][id*="sticky"],
[id^="ukutabs_"][id*="search_"],
#ukutabs_sidewall_left-container,
#ukutabs_sidewall_right-container,
._fs-slidewall-container,
.fs-sidewall-container, .fs-sidewall,
.fs-slot, [class^="fs-"][class*="-anchor"],
.ad-desktop-sticky-bottom, .ad-sticky-bottom, .ad-sticky-top,
.ad-desktop-sidewall, .ad-sidewall,
#ukutabs_sticky_footer,
#freestar-video-parent, #freestar-video-child,
iframe[id*="google_ads"],
iframe[src*="googleads"],
iframe[src*="googlesyndication"],
iframe[src*="doubleclick"],
/* Outstream / floating video player (the "primis floating video player"
above). It reparents itself OUT of #freestar-video-parent into its own
fixed overlay on , so hiding the placeholder containers never
reaches the real player. Its Skip-Ad chrome (not just the ad iframe) was
printing on the last page. Catch the provider container by name, case-
insensitively, wherever it injects itself. */
#FreeStarVideoAdContainer,
[id*="primis" i], [class*="primis" i],
[id*="connatix" i], [class*="connatix" i],
[id*="freestar-video" i], [class*="freestar-video" i],
[id*="fs-video" i], [class*="fs-video" i],
div[id*="video-ad" i], div[class*="video-ad" i],
.adsbygoogle {
display: none !important;
}
/* ── 2. Strip backgrounds + shadows everywhere; smaller print font. */
*, *::before, *::after {
background: transparent !important;
box-shadow: none !important;
-moz-box-shadow: none !important;
-webkit-box-shadow: none !important;
text-shadow: none !important;
}
html, body {
background: #fff !important;
color: #000 !important;
font-size: 12px !important; /* smaller base — lyrics + headings inherit */
}
/* ── 3. Width + spacing reset (use full page width) ─────────── */
.col-lg-9, .container, .row {
width: 100% !important;
max-width: 100% !important;
flex: 0 0 100%;
margin: 0 !important;
padding: 0 !important;
}
.page-has-left-panels { padding-left: 0; }
#content, article, #wrapperheader, .stunning-content-item {
margin: 0 !important;
padding: 0 !important;
}
table, td, tr { border: none !important; padding: 0 !important; }
/* ── 4. Title (page header) — centered ───────────────────────── */
#stunning-header,
#stunning-header .stunning-header-content-wrap,
#stunning-header .stunning-header-content-wrap * {
color: #000 !important;
text-align: center;
font-family: inherit;
text-transform: uppercase;
font-weight: 700;
font-size: 14px;
}
#stunning-header { padding: 0 !important; margin: 0 0 8px !important; }
.crumina-stunning-header {
border: none !important;
padding: 6px 0 0 !important;
}
/* Song pages use the "content-center" header variant, whose wrap is
pinned to width:60-80% (main-ukutabs.css line 437, css/main.css line
2225; both are plain @media all so they apply when printing too). That
confined the centered title to the middle of the page, so a long
title wrapped while the outer thirds sat empty. Reclaim full width. */
.stunning-header--content-center .stunning-header-content-wrap,
#stunning-header .stunning-header-content-wrap {
width: 100% !important;
}
/* id+element specificity (plus !important) so this reliably beats the
theme's responsive ".stunning-header-title { font-size:32px }", an
@media (max-width:1025px) rule that also matches in print because a
printed page is only ~700px wide. 20px fits long titles on one line
now that the wrap spans the full width. */
#stunning-header h1.stunning-header-title,
.stunning-header-title {
font-size: 20px !important;
line-height: 1.15 !important;
margin: 0 !important;
}
/* ── 5. Artist name (breadcrumbs — show only the last item) ──
The Olympus breadcrumbs template (framework-customizations/extensions/breadcrumbs/
views/breadcrumbs.php) inserts the " / " separator as a TEXT NODE directly inside
the
, between
items. CSS can't hide text nodes by selector, so we set
font-size: 0 on the
(collapses text nodes to nothing) and restore it on the
children so the visible artist still has a readable size. */
.breadcrumbs {
font-size: 0 !important;
line-height: 0 !important;
margin: 0 !important;
padding: 0 !important;
}
li {
display: none !important;
}
li:last-child {
display: block !important;
list-style: none !important;
font-size: 14px !important;
line-height: 1.2 !important;
margin: 0 !important;
padding: 0 !important;
}
li:last-child a, li:last-child a span,
.breadcrumbs-item a, .breadcrumbs-item a span,
.artistname {
color: #000 !important;
font-size: 14px !important;
opacity: 1 !important;
}
/* ── 6. Chord diagrams — centered, smaller ──────────────────── */
.cits-c { border: 1px solid #98988d; }
.cits-c-b {
transform: scale(0.78);
margin: -18px -8px; /* compensate for the scaled-down whitespace */
}
.chordsinthissong {
padding: 8px 0 8px;
}
/* ── 7. Lyrics + inline chord references — left-aligned ────── */
pre.qoate-code {
border: none !important;
padding: 4px 0 0 24px !important; /* 24px left indent */
margin: 0 !important;
width: auto;
font-size: 11px !important;
line-height: 14px !important;
text-align: left !important;
}
/* Keep the chord-letter colour the user has set, but tone it down for print so it
doesn't print noticeably brighter than what shows on screen against the cream
page background. color-mix darkens by ~22% (modern browsers); fallback uses a
darker hex for older engines. */
a.ukutabschord {
color: #963a25 !important; /* fallback for browsers without color-mix */
text-decoration: none !important;
font-weight: 700;
}
@supports (color: color-mix(in srgb, red 50%, black)) {
a.ukutabschord {
color: color-mix(in srgb, var(--chordcolor, #c7523a) 78%, #000) !important;
}
}
/* Chord-card watermark — now drawn as vector glyphs inside the
SVG (class .uku-chord-svg__watermark), not a CSS ::after. Force it
black for legibility on paper (screen uses the muted grey themed by
the light/dark CSS). */
.uku-chord-svg__watermark { fill: #000 !important; }
/* ── 8. Print-only copyright notice — appears once at the end of
the song content (and therefore on the last printed page only).
Static positioning (not fixed) so it doesn't repeat on every
page. Readable grey + visible separator line so it reads as an
intentional footnote rather than a faded artefact. The
`border: 0` + `border-top: 1px` + `border-radius: 0` combo wipes
any leftover styling from theme/plugin rules that might still
target the div by ID. */
@page {
margin: 0.5in;
}
#notice-print {
display: block !important;
position: static !important;
margin: 32px 0 0 !important;
padding: 12px 0 0 !important;
background: transparent !important;
background-color: transparent !important;
color: #555 !important;
font-size: 9px !important;
line-height: 1.5 !important;
border: 0 !important;
border-top: 1px solid #999 !important;
border-radius: 0 !important;
box-shadow: none !important;
text-shadow: none !important;
text-align: center !important;
}
}
/* Hide the print-only notice on screen — its visible counterpart is
the styled `#notice-copyright` card above. Without this the bare
sentence would also show on the live page. */
@media screen { #notice-print { display: none !important; } }