/* Theme Name: 5 Tool Players Theme Theme URI: https://rubberduckyinteractive.com Description: Child theme for 5 Tool Players. Custom styling and templates for the 5toolplayers.com build. Author: Rubber Ducky Interactive Author URI: https://rubberduckyinteractive.com Template: hello-elementor Version: 1.0.0 Text Domain: fivetoolplayers License: GNU General Public License v3 or later. License URI: https://www.gnu.org/licenses/gpl-3.0.html Tags: flexible-header, custom-colors, custom-menu, custom-logo, editor-style, featured-images, rtl-language-support, threaded-comments, translation-ready */ /* ----------------------------------------------------------------------------- 5 Tool Players — custom styles ----------------------------------------------------------------------------- House rule: use Elementor settings first. Only add CSS here when Elementor has no control for it. When you do, say why in a comment. Nothing has been moved here yet. The roster table CSS/JS currently lives in HTML widgets duplicated across nine roster pages; consolidating it here is the next step. -------------------------------------------------------------------------- */ /* ========================================================================== Printable Schedule - page 910223 These two things have no equivalent in the Elementor panel, which is why they are CSS and not widget settings: 1. The Events Calendar hard-codes its venue block as a two-column grid so the details can sit beside the map. The map is off on this page, so without this the venue name is squeezed into a 137px column and wraps one word per line. 2. Print rules. Elementor has no print controls at all. ========================================================================== */ .page-id-910223 .tec-events-elementor-event-widget__venue .tec-events-elementor-event-widget__venue-container { display: block; max-width: none; margin: 0; border: 0; border-radius: 0; } .page-id-910223 .tec-events-elementor-event-widget__venue .tec-events-elementor-event-widget__venue-details { width: auto; padding: 0; } .page-id-910223 .tec-events-elementor-event-widget__venue-name { margin: 0 0 2px; } .page-id-910223 .elementor-loop-container > .e-loop-item { border-bottom: 1px solid var(--e-global-color-hairline, #d8c7a4); } .page-id-910223 .elementor-loop-container > .e-loop-item:last-child { border-bottom: 0; } .page-id-910223 .elementor-loop-container > .e-loop-item > .e-con { padding-top: 8px; padding-bottom: 8px; } @media print { html, body { background: #fff !important; color: #000 !important; } .elementor-location-header, .elementor-location-footer, #wpadminbar, .tec-events-elementor-event-widget__venue-address-map-link, .page-id-910223 a[href*='google.com/maps'] { display: none !important; } .page-id-910223 .e-con, .page-id-910223 .e-con-inner { max-width: none !important; width: auto !important; padding-left: 0 !important; padding-right: 0 !important; background: none !important; } .page-id-910223 .elementor-loop-container > .e-loop-item { break-inside: avoid; page-break-inside: avoid; border-bottom: 1pt solid #999 !important; padding: 6pt 0 !important; } .page-id-910223 h1 { font-size: 20pt !important; margin: 0 0 2pt !important; } .page-id-910223 h2 { font-size: 11pt !important; margin: 0 0 10pt !important; } .page-id-910223 .elementor-widget-heading, .page-id-910223 .tec-events-elementor-event-widget__venue-name, .page-id-910223 .elementor-widget-container { color: #000 !important; } @page { margin: 14mm; } } /* =================================================================== Roster table ------------------------------------------------------------------- /roster/, /roster/las-vegas/ and every /roster/-team/ page show the same table: a sortable header row (.tp-head) above an Elementor loop grid of player rows built from the "Loop - Roster Row" template. This block used to be pasted into an HTML widget on each of those sixteen pages. The copies had already drifted: seven were scoped to another page's ID, so their layout rules did nothing. The body class below is added in functions.php, which also prints the click-to-sort script. Element IDs such as 7b09246 and 383d77a belong to the loop template, so they are the same on every roster page. Kept as CSS because Elementor has no control for it: - alternating row colour (the loop grid has no zebra option) - heading hover colour and the name-link underline (the heading widget has no hover state) - column widths, which per-widget width does not honour inside a loop item - the stacked-card layout for phones and its generated labels - the print rules Row hover background and its transition are set natively on the loop template container (Loop - Roster Row, container 7b09246). =================================================================== */ body.tp-roster-page .elementor-loop-container{background:#fff;border:1px solid #E2D3B4;border-top:0;border-radius:0 0 6px 6px;overflow:hidden} body.tp-roster-page .elementor-loop-container > div.elementor:nth-of-type(even){background:#FBF7EC} body.tp-roster-page .tp-head .elementor-widget-heading{cursor:pointer;user-select:none} body.tp-roster-page .tp-head .elementor-widget-heading:hover .elementor-heading-title{color:#FFFFFF} body.tp-roster-page .tp-head .elementor-widget-heading[data-arrow] .elementor-heading-title:after{content:attr(data-a);margin-left:5px;font-size:9px;position:relative;top:-1px} body.tp-roster-page .tp-hint{font-size:13px;color:#6B7785;margin:12px 2px 0} /* shared column model — keeps header and rows aligned */ body.tp-roster-page .tp-head > .elementor-widget:nth-child(1),body.tp-roster-page .elementor-loop-container > div.elementor .e-con > .elementor-widget:nth-child(1){flex:0 0 34px;max-width:34px} body.tp-roster-page .tp-head > .elementor-widget:nth-child(2),body.tp-roster-page .elementor-loop-container > div.elementor .e-con > .elementor-widget:nth-child(2){flex:0 0 200px;max-width:200px} body.tp-roster-page .tp-head > .elementor-widget:nth-child(3),body.tp-roster-page .elementor-loop-container > div.elementor .e-con > .elementor-widget:nth-child(3){flex:0 0 86px;max-width:86px} body.tp-roster-page .tp-head > .elementor-widget:nth-child(4),body.tp-roster-page .elementor-loop-container > div.elementor .e-con > .elementor-widget:nth-child(4){flex:0 0 30px;max-width:30px} body.tp-roster-page .tp-head > .elementor-widget:nth-child(5),body.tp-roster-page .elementor-loop-container > div.elementor .e-con > .elementor-widget:nth-child(5){flex:0 0 30px;max-width:30px} body.tp-roster-page .tp-head > .elementor-widget:nth-child(6),body.tp-roster-page .elementor-loop-container > div.elementor .e-con > .elementor-widget:nth-child(6){flex:0 0 52px;max-width:52px} body.tp-roster-page .tp-head > .elementor-widget:nth-child(7),body.tp-roster-page .elementor-loop-container > div.elementor .e-con > .elementor-widget:nth-child(7){flex:0 0 46px;max-width:46px} body.tp-roster-page .tp-head > .elementor-widget:nth-child(8),body.tp-roster-page .elementor-loop-container > div.elementor .e-con > .elementor-widget:nth-child(8){flex:0 0 52px;max-width:52px} body.tp-roster-page .tp-head > .elementor-widget:nth-child(9),body.tp-roster-page .elementor-loop-container > div.elementor .e-con > .elementor-widget:nth-child(9){flex:1 1 auto;min-width:0} @media(max-width:880px){body.tp-roster-page .tp-head{display:none}body.tp-roster-page .tp-head > .elementor-widget,body.tp-roster-page .elementor-loop-container > div.elementor .e-con > .elementor-widget{flex:0 0 auto!important;max-width:none!important}} /* Phones: each row becomes a stacked card. */ @media (max-width:767px){ body.tp-roster-page .tp-hint{display:none !important} body.tp-roster-page .elementor-element-7b09246{display:flex !important;flex-wrap:wrap !important;flex-direction:row !important;align-items:baseline !important;column-gap:0 !important;row-gap:2px !important;padding:13px 16px !important} body.tp-roster-page .elementor-element-7b09246 > div.elementor-widget{flex:0 0 auto !important;width:auto !important;max-width:none !important;text-align:left !important} body.tp-roster-page .elementor-loop-container > div.elementor .e-con.elementor-element-7b09246 > div.elementor-element-383d77a{flex:1 1 calc(100% - 34px) !important;width:auto !important;max-width:calc(100% - 34px) !important;margin-bottom:2px !important} body.tp-roster-page .elementor-loop-container > div.elementor .e-con.elementor-element-7b09246 > div.elementor-element-4f21a80{flex:0 0 28px !important;width:28px !important;max-width:28px !important;margin-right:6px !important;margin-bottom:2px !important} body.tp-roster-page .elementor-element-4f21a80 .elementor-heading-title{font-size:17px !important;line-height:1.2 !important;color:#55677A !important} body.tp-roster-page .elementor-element-383d77a .elementor-heading-title{font-size:17px !important;line-height:1.2 !important} body.tp-roster-page .elementor-element-7b09246 .elementor-heading-title{font-size:14px !important;line-height:1.5 !important;white-space:normal !important} body.tp-roster-page .elementor-element-bd86705 .elementor-heading-title::after, body.tp-roster-page .elementor-element-a61e71d .elementor-heading-title::after, body.tp-roster-page .elementor-element-65c195f .elementor-heading-title::after, body.tp-roster-page .elementor-element-d01acdf .elementor-heading-title::after{content:"\00a0\00b7\00a0";opacity:.45} body.tp-roster-page .elementor-element-e45b2c1 .elementor-heading-title::after{content:"/"} body.tp-roster-page .elementor-element-09f8481 .elementor-heading-title::after{content:"\00a0lb\00a0\00b7\00a0";opacity:1} body.tp-roster-page .elementor-element-d01acdf .elementor-heading-title::before{content:"Class of\00a0"} } /* Player name link. */ body.tp-roster-page .elementor-element-383d77a a{color:inherit;text-decoration:none} body.tp-roster-page .elementor-element-383d77a a:hover{text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px} /* Print. */ @media print { body.tp-roster-page header, body.tp-roster-page footer, body.tp-roster-page .elementor-location-header, body.tp-roster-page .elementor-location-footer, body.tp-roster-page #wpadminbar, body.tp-roster-page .tp-hint, body.tp-roster-page .page-header, body.tp-roster-page .tribe-events-c-view-selector, body.tp-roster-page .elementor-widget-button{ display:none !important; } body.tp-roster-page{ background:#fff !important; color:#000 !important; font-size:11pt; } body.tp-roster-page .e-con, body.tp-roster-page .e-con-inner{ padding-top:0 !important; padding-bottom:0 !important; } body.tp-roster-page .elementor-loop-container{ border:0 !important; } body.tp-roster-page .elementor-loop-container > div.elementor, body.tp-roster-page .elementor-loop-container > .e-loop-item{ background:#fff !important; border-bottom:1px solid #999 !important; page-break-inside:avoid; } body.tp-roster-page .elementor-heading-title{ color:#000 !important; } body.tp-roster-page a[href]:after{ content:"" !important; } @page { margin:14mm; } } /* =================================================================== Homepage and Commits helper classes ------------------------------------------------------------------- These rules came out of per-widget "Custom CSS" boxes, which are the least discoverable place in Elementor to leave anything. Each widget now carries the matching class in its CSS Classes field instead. Everything with an Elementor control was converted and deleted instead of being moved: heading text shadow, image border. No Elementor control exists for what is left: - layered repeating gradients (the container overlay allows one plain gradient) - a border that hugs the text rather than the widget box - aspect-ratio cropping on the Image widget - a phone-only item limit on a loop grid (posts per page is one number for every device) - text-wrap: balance =================================================================== */ /* Hero band: diagonal weave, dark fade to the right, gold stripe along the bottom. */ .tp-hero, .elementor-element-7725d3f9{position:relative;overflow:hidden} .tp-hero::before, .elementor-element-7725d3f9::before{content:'';position:absolute;inset:0;pointer-events:none;z-index:0;background:repeating-linear-gradient(115deg,rgba(14,36,27,.2) 0 2px,transparent 2px 14px),linear-gradient(100deg,rgba(24,57,43,.95) 0%,rgba(24,57,43,.85) 38%,rgba(24,57,43,.40) 68%,rgba(24,57,43,.14) 100%)} .tp-hero::after, .elementor-element-7725d3f9::after{content:'';position:absolute;left:0;right:0;bottom:0;height:11px;z-index:2;pointer-events:none;background:repeating-linear-gradient(115deg,#FFC629 0 2px,transparent 2px 11px)} .tp-hero > .e-con-inner, .tp-hero > *, .elementor-element-7725d3f9 > .e-con-inner, .elementor-element-7725d3f9 > *{position:relative;z-index:1} /* Gold rule under a heading, only as wide as the words. */ .tp-rule .elementor-heading-title{display:inline-block;border-bottom:2px solid #C99B62;padding-bottom:3px;text-decoration:none} /* Thin diagonal stripe divider. */ .tp-stripe, .elementor-element-78ae547a{background:repeating-linear-gradient(115deg,#C99B62 0 2px,transparent 2px 11px)} /* Keep a headline's last line from stranding one word. */ .tp-balance .elementor-heading-title{text-wrap:balance} /* Photo cropped to 3:2 whatever the upload. */ .tp-photo-3x2 img{aspect-ratio:3/2;object-fit:cover;width:100%;height:auto} /* Phones: show only the first six cards in the grid. */ @media (max-width:767px){ .tp-first-six .e-loop-item:nth-of-type(n+7){display:none} }