/* * Responsive retrofit layer for legacy Drupal 5 default theme. * Keep desktop behavior intact and only adjust at smaller breakpoints. */ html, body { max-width: 100%; overflow-x: hidden; } .resizable-textarea { width: 100%; box-sizing: border-box; } .soar_manage_member, .soar_manage_leader { width: 100%; } .soar_manage_member table, .soar_manage_leader table { width: 100% !important; } #col-colright { width: 200px; } /* Override 650px fixed desktop width on roster/full so tables fill #content. */ .contentff { width: auto !important; max-width: 100%; box-sizing: border-box; } img { max-width: 100%; height: auto; } /* Make fixed-width spacer images non-blocking on small screens. */ img[width="208px"], img[width="208"] { max-width: 100%; width: auto; height: auto; } /* Signup admin command icons (edit/delete/cart) ship with height="13" but the global img { height: auto } rule causes them to render at intrinsic 48px. Restore the intended size and give mobile a larger tap target. Selector chained with #content to beat the #content img tablet rule. max-width: none keeps the global img max-width:100% from squeezing the icon when the parent is narrow. Two size variants: -icon (16px desktop / 20px mobile) for inline row icons; -icon-lg (25px) for header export/print icons. */ img.signup-cmd-icon, #content img.signup-cmd-icon { height: 16px !important; width: 16px !important; max-width: none !important; } img.signup-cmd-icon-lg, #content img.signup-cmd-icon-lg { height: 25px !important; width: 25px !important; max-width: none !important; } /* Space the export/print icons horizontally and widen their tap target. */ @media (min-width: 981px) { a.signup-cmd:has(img.signup-cmd-icon-lg) { display: inline-block; padding-left: 10px; padding-right: 10px; } } @media (max-width: 980px) { a.signup-cmd { display: inline-block; padding: 6px; } #content img.signup-cmd-icon { height: 20px !important; width: 20px !important; } } @media (max-width: 480px) { a.signup-cmd { padding: 8px; } #content img.signup-cmd-icon { height: 20px !important; width: 20px !important; } } /* Signup attendee list: vertically center cell content so the icon and name align in the middle of each row. The PHP emits valign="top" inline, so we override it with !important. */ #signup-attendees td { vertical-align: middle !important; } /* SOAR-173: Mobile hamburger menu. The button, backdrop, and drawer are created by responsive-menu.js. Hidden by default at all widths; mobile media query reveals them. The .soar-js class on is added by responsive-menu.js, used to hide the inline menu only when JS is active (graceful degradation). */ #soar-mobile-menu-button { display: none; } #soar-mobile-menu-backdrop { display: none; } #soar-mobile-menu-drawer { /* On desktop the drawer is empty (JS moves the blocks back into #colleft), so it should occupy no space. The mobile media query below makes it visible and turns it into the off-canvas drawer. */ display: none; } @media (max-width: 980px) { /* Hamburger button: rendered inline at the top of the content cell, so it sits just below the header in its own predictable location regardless of theme. Block-level so it occupies its own row rather than sharing space with content text. Covers tablet and mobile viewports; desktop (>980px) keeps the inline sidebar. */ #soar-mobile-menu-button { display: block; margin: 8px 0 0 0; width: 40px; height: 40px; padding: 8px; background: rgba(255, 255, 255, 0.85); border: 1px solid rgba(0, 0, 0, 0.2); border-radius: 4px; cursor: pointer; box-sizing: border-box; } /* The rounded-* themes follow the button with a decorative … corner sprite stack that abuts the button with no breathing room. Push the button down instead of the sprite stack (pushing the sprites down misaligns the corners). Body class is set by responsive-menu.js once it detects the active theme. */ body.theme-rounded-1 #soar-mobile-menu-button, body.theme-rounded-1-sifr #soar-mobile-menu-button, body.theme-rounded-2 #soar-mobile-menu-button, body.theme-rounded-2-sifr #soar-mobile-menu-button { margin-bottom: 8px; } #soar-mobile-menu-button .soar-hamburger-bar { display: block; width: 100%; height: 3px; background: #333; margin: 3px 0; border-radius: 2px; } /* When the drawer is open, float the button at the top-left of the viewport so it stays visible above the drawer and can serve as a close affordance. Returns to its inline location when the drawer closes. */ body.soar-mobile-menu-open #soar-mobile-menu-button { position: fixed; top: 8px; left: 8px; margin: 0; z-index: 10001; } #breadcrumb { margin-top: 8px; } /* Hide the inline menu when JS is active (drawer replaces it). Without JS, the .soar-js class is absent and the menu renders normally at its inline DOM location. */ html.soar-js #soar-mobile-menu-drawer { display: block; position: fixed; top: 0; left: -85vw; width: 80vw; max-width: 320px; height: 100vh; background: #fff; z-index: 10000; overflow-y: auto; box-shadow: 2px 0 8px rgba(0, 0, 0, 0.3); transition: left 0.25s ease-out; padding: 60px 12px 12px 12px; box-sizing: border-box; } html.soar-js body.soar-mobile-menu-open #soar-mobile-menu-drawer { left: 0; } /* Theme inheritance: the drawer is rendered as a child of #colleft so the theme's '#colleft .block', '#colleft .block .title', etc. rules apply automatically. We only override the few structural things that break in a narrow drawer (fixed widths, decorative corner sprites, max-heights that would clip scrolling content). */ /* Strip block container constraints that assume wide-column placement, but preserve theme background, border, font, and color. */ html.soar-js #soar-mobile-menu-drawer .block { width: auto !important; max-width: none !important; max-height: none !important; overflow: visible !important; margin: 0 0 12px 0 !important; } html.soar-js #soar-mobile-menu-drawer .block .content { max-height: none !important; overflow: visible !important; } /* Hide the rounded-corner decoration tags some themes inject around blocks. These render as horizontal colored lines (b.b1f through b.b4f are stacked thin borders). We hide them inside the drawer (where the narrow drawer width would misalign the sprites) AND in the now-empty sidebar (#colleft / #colright), where the sprites were left behind when JS moved their parent blocks into the drawer. */ html.soar-js #soar-mobile-menu-drawer b.b1f, html.soar-js #soar-mobile-menu-drawer b.b2f, html.soar-js #soar-mobile-menu-drawer b.b3f, html.soar-js #soar-mobile-menu-drawer b.b4f, html.soar-js #soar-mobile-menu-drawer .block-after, html.soar-js #colleft b.b1f, html.soar-js #colleft b.b2f, html.soar-js #colleft b.b3f, html.soar-js #colleft b.b4f, html.soar-js #colleft .block-after, html.soar-js #colright b.b1f, html.soar-js #colright b.b2f, html.soar-js #colright b.b3f, html.soar-js #colright b.b4f, html.soar-js #colright .block-after, html.soar-js #scolleft b.b1f, html.soar-js #scolleft b.b2f, html.soar-js #scolleft b.b3f, html.soar-js #scolleft b.b4f, html.soar-js #scolleft .block-after { display: none !important; } /* The now-empty sidebar columns leave behind their padding, background, and any non-block descendants (e.g. theme.soar's wrapper divs), which render as a visible empty strip below the content. Collapse them to zero size when JS is active. The drawer is position:fixed inside the sidebar so its rendering is independent of the parent's box. #scolleft is the splash-page equivalent of #colleft. */ html.soar-js #colleft, html.soar-js #colright, html.soar-js #scolleft { height: 0 !important; min-height: 0 !important; padding: 0 !important; margin: 0 !important; border: 0 !important; background: transparent !important; overflow: visible; } /* Lists: strip default browser list indentation so menu items align with the block edge. Theme title-bar styling (background, color) is inherited from '#colleft .block .title'. */ html.soar-js #soar-mobile-menu-drawer .block ul, html.soar-js #soar-mobile-menu-drawer .block li { list-style: none; padding-left: 0; margin-left: 0; } /* Drupal's expandable menu items (User block) carry an extra padding/background-image gutter for the expand/collapse triangle. Strip it inside the drawer so collapsed/expanded items align with leaf items. */ html.soar-js #soar-mobile-menu-drawer .block li.collapsed, html.soar-js #soar-mobile-menu-drawer .block li.expanded { background-image: none !important; padding-left: 0 !important; margin-left: 0 !important; list-style-image: none !important; } /* Neutralize the hanging-indent theme rules that target .block-menu specifically (most themes pair text-indent:-13px with padding-left:10px so menu items hang). Inside the drawer we set our own padding on links below, so reset only text-indent to undo the hanging behavior without stomping our own padding. */ html.soar-js #soar-mobile-menu-drawer .block-menu li, html.soar-js #soar-mobile-menu-drawer .block-menu ul li a, html.soar-js #soar-mobile-menu-drawer .block-menu ul li a:link, html.soar-js #soar-mobile-menu-drawer .block-menu ul li a:visited, html.soar-js #soar-mobile-menu-drawer .block-menu ul li a:active { text-indent: 0 !important; } /* Themes style .block-menu link color but don't apply equivalent styling to .block-user, so the soar menu falls back to browser default link colors (typically blue) which clashes with the theme. Force the user block to inherit its container color, which the theme sets on #colleft .block (or the right-column equivalent). */ html.soar-js #soar-mobile-menu-drawer .block-user a, html.soar-js #soar-mobile-menu-drawer .block-user a:link, html.soar-js #soar-mobile-menu-drawer .block-user a:visited, html.soar-js #soar-mobile-menu-drawer .block-user a:active { color: inherit; } /* Structural layout rules (display, padding, border) — applied to every block type so all menu items have consistent tap targets and dividers. Color/font are not touched here so theme branding flows through. */ html.soar-js #soar-mobile-menu-drawer .block a { display: block; line-height: 1.2; padding: 4px 20px; border-bottom: 0 !important; } html.soar-js #soar-mobile-menu-drawer .block li { border-bottom: 1px dashed rgba(0, 0, 0, 0.25); } /* Splash-screen login block hardcodes
tags between its Login/Password/Register links. Inside the drawer those
tags produce vertical gaps because the links are already block-level via our .block a rule. The block ID varies by theme: #block-soar-0 for most themes, #sblock-soar-0 for the rounded splash variants. */ html.soar-js #soar-mobile-menu-drawer #block-soar-0 br, html.soar-js #soar-mobile-menu-drawer #sblock-soar-0 br { display: none; } /* Patrol filter checkboxes sit flush against the block's left edge. Push them in to match the indentation of menu items in adjacent blocks. */ #block-soar-3 #soar_block_filter .form-item { padding-left: 15px; } /* Indent nested menu items so hierarchy is visible. */ html.soar-js #soar-mobile-menu-drawer .block li li a { padding-left: 30px; font-size: 15px; } html.soar-js #soar-mobile-menu-drawer .block li li li a { padding-left: 42px; font-size: 14px; } /* Submenu chevron toggle: a tap target on the right edge of a collapsible item that expands or collapses its children without navigating. The parent
  • becomes a flex container so the link grows to fill space while the button anchors to the right edge. */ html.soar-js #soar-mobile-menu-drawer .block li.soar-has-toggle { display: flex; align-items: center; flex-wrap: wrap; } html.soar-js #soar-mobile-menu-drawer .block li.soar-has-toggle > a { flex: 1 1 auto; } /* The button is sized just to the chevron — it does not stretch to the full row height, so the parent
  • 's bottom separator line continues uninterrupted underneath the chevron column. */ html.soar-js #soar-mobile-menu-drawer .soar-submenu-toggle { flex: 0 0 44px; height: 24px; background: transparent; border: 0; padding: 0; margin: 0; cursor: pointer; display: flex; align-items: center; justify-content: center; border-radius: 4px; } html.soar-js #soar-mobile-menu-drawer .soar-chevron { display: inline-block; width: 8px; height: 8px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; /* Closed: chevron points right (▶). Two adjacent borders form an "L"; rotating -45deg orients the corner toward the right. */ transform: rotate(-45deg); transition: transform 0.15s ease-out; opacity: 0.6; } html.soar-js #soar-mobile-menu-drawer .soar-submenu-toggle[aria-expanded="true"] .soar-chevron { /* Open: chevron points down (▼). 90° clockwise from the right-pointing state lands the corner pointing downward. */ transform: rotate(45deg); } html.soar-js #soar-mobile-menu-drawer .soar-submenu-toggle.soar-loading .soar-chevron { border-color: transparent; border-top: 2px solid currentColor; border-right: 2px solid currentColor; border-radius: 50%; transform: rotate(0); animation: soar-spin 0.8s linear infinite; } html.soar-js #soar-mobile-menu-drawer .soar-submenu-toggle:hover, html.soar-js #soar-mobile-menu-drawer .soar-submenu-toggle:focus { background: rgba(0, 0, 0, 0.04); } /* The child
      needs to wrap to a full-width row inside the flex parent
    • , so it sits beneath the link + chevron rather than next to them. */ html.soar-js #soar-mobile-menu-drawer .block li.soar-has-toggle > ul { flex: 1 0 100%; margin: 0; padding: 0; } } @keyframes soar-spin { to { transform: rotate(360deg); } } @media (max-width: 980px) { html.soar-js #soar-mobile-menu-drawer .soarlink { padding: 12px 8px; font-size: 12px; text-align: center; border-top: 1px solid rgba(0, 0, 0, 0.06); margin-top: 12px; opacity: 0.7; } /* Backdrop */ html.soar-js #soar-mobile-menu-backdrop { display: block; position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: rgba(0, 0, 0, 0.4); z-index: 9999; opacity: 0; pointer-events: none; transition: opacity 0.2s ease-out; } html.soar-js body.soar-mobile-menu-open #soar-mobile-menu-backdrop { opacity: 1; pointer-events: auto; } /* Prevent body scroll when drawer is open */ html.soar-js body.soar-mobile-menu-open { overflow: hidden; } } table { max-width: 100%; } #container, #scontainer { width: 100%; box-sizing: border-box; table-layout: fixed; margin: 0 auto !important; } @media (min-width: 981px) { .sbackground { padding: 5px !important; } } /* Tablet and below */ @media (max-width: 980px) { #scontainer { margin-top: 0 !important; margin-bottom: 0 !important; } #scontainer #content { border-left: none !important; border-right: none !important; } /* Make container block so header colspan is irrelevant and full-width is guaranteed. */ #container, #container > tbody, #container > tbody > tr > td, #scontainer, #scontainer > tbody, #scontainer > tbody > tr > td { display: block !important; width: 100% !important; box-sizing: border-box; } /* Content-first ordering: flex column on the content row so #content appears before sidebars. */ #container > tbody > tr, #scontainer > tbody > tr { display: flex !important; flex-direction: column; width: 100% !important; } #content { order: 1; } #colleft, #scolleft { order: 2; } #colright { order: 3; } /* Home page: right column has event/counter widgets — show before left nav. */ body:has(#homepage) #colright { order: 2; } body:has(#homepage) #colleft { order: 3; } body { font-size: 16px; line-height: 1.45; } /* Account page Past Transactions: allow #content to scroll so the wide table isn't clipped. */ #content { overflow-x: auto; -webkit-overflow-scrolling: touch; } /* Account page Past Transactions: wide table — scroll horizontally instead of wrapping. */ #sacct-past-transactions table { display: table !important; table-layout: auto !important; width: auto !important; min-width: 500px; white-space: nowrap; } #sacct-past-transactions table td, #sacct-past-transactions table th { white-space: nowrap; width: auto !important; text-align: left !important; } /* Include padding in image width so padded images don't overflow their container. */ img { box-sizing: border-box; } /* Rounded theme: stretch background to full viewport height when content is short. */ div.background { min-height: 100vh; } /* Rounded theme: hide CSS stepped rounded-corner elements on header and infobar. At tablet and below the sections span full width, making the steps look like artifacts. Replace with native border-radius on .headerf so the yellow box still appears. */ .h1f, .h2f, .h3f, .h4f, .i1f, .i2f, .i3f, .i4f { display: none !important; } .headerf { border-radius: 8px; margin: 6px 8px; } .width, .minwidth, .minccontainer, .mincontainer, .background, .sbackground { width: 100%; min-width: 0; min-height: 0; } /* Remove asymmetric desktop padding (15px left vs 5px right) and top padding on mobile. */ .background, .sbackground { padding-left: 0; padding-right: 0; padding-top: 0; } #header, #headerbottom, #footer, #content, #colleft, #colright, #scolleft { width: auto; } /* Let the sidebar grow with its content instead of clipping at 500px. */ #colleft, #colright, #scolleft { height: auto; min-height: 0; } /* Roster: wide tables scroll horizontally at tablet. */ .soar_manage_member, .soar_manage_leader { overflow-x: auto; -webkit-overflow-scrolling: touch; } #colright { min-width: 0 !important; box-sizing: border-box; word-break: break-word; overflow-wrap: anywhere; vertical-align: top !important; padding-top: 0 !important; } #colright .block, #colright .block .title, #colright .block .content { box-sizing: border-box; max-width: 100%; } #content { box-sizing: border-box; vertical-align: top !important; padding-top: 0 !important; } #content .links { text-align: left !important; } .soar-file-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; } .soar-file-scroll table { word-break: break-word; overflow-wrap: anywhere; } #content img { max-width: 100% !important; width: auto !important; height: auto !important; } #colleft { height: auto !important; } /* Header: flex row so left icon, title, right icon stay on one line at all widths. Must beat #container > tbody > tr > td specificity, so we chain the selector. */ #container > tbody > tr > td#header, #header { display: flex !important; align-items: center !important; justify-content: space-between !important; flex-wrap: nowrap !important; padding: 8px 10px !important; box-sizing: border-box !important; width: 100% !important; } /* cslogo-1: the stock theme hardcodes pixel positions for #headcs (Cub Scout logo) and #headpacknum (Pack ### number stack), which collide and stack vertically below the tablet breakpoint. Override positioning with a flex row so the two graphics sit side by side: logo 60% left, pack number 30% right. Flex avoids the whitespace-gap problem that inline-block exhibits (inter-tag whitespace makes 60%+30% exceed 100%, causing wrap). Header height auto-fits the smaller images. All selectors target IDs unique to cslogo-1, so other themes are unaffected. */ body.theme-cslogo-1 #header, body.theme-cslogo-1 #container > tbody > tr > td#header { height: auto !important; min-height: 70px; display: flex !important; flex-direction: row; align-items: center; justify-content: space-between; padding: 8px !important; box-sizing: border-box; } body.theme-cslogo-1 #headcs { position: static !important; flex: 0 0 60%; text-align: left; } body.theme-cslogo-1 #headpacknum { position: static !important; flex: 0 0 30%; text-align: right; white-space: nowrap; /* Collapse the inter-tag whitespace between #headpack and #headnum0/1/2 (which are emitted on separate lines by page.tpl.php). With the children set to inline-block, that whitespace would render as visible gaps between the digits. */ font-size: 0; } /* The inner #headpack / #headnumN children are themselves absolutely positioned at hardcoded pixel offsets that align them on desktop. Reset to inline-block so they flow inside the 30% container. */ body.theme-cslogo-1 #headpack, body.theme-cslogo-1 #headnum0, body.theme-cslogo-1 #headnum1, body.theme-cslogo-1 #headnum2, body.theme-cslogo-1 #headnum3, body.theme-cslogo-1 #headnum4 { position: static !important; display: inline-block; vertical-align: middle; } /* Scale the Cub Scout logo to fill its 60% column. The pack/number images have a hardcoded height="63" attribute in page.tpl.php that must be overridden via max-height + height:auto to allow scaling. */ body.theme-cslogo-1 #headcs img { width: 100% !important; height: auto !important; } body.theme-cslogo-1 #headpack img, body.theme-cslogo-1 #headnum0 img, body.theme-cslogo-1 #headnum1 img, body.theme-cslogo-1 #headnum2 img, body.theme-cslogo-1 #headnum3 img, body.theme-cslogo-1 #headnum4 img { max-height: 40px !important; height: auto !important; width: auto; } /* Hide elements that would interfere with the flex layout. */ body.theme-cslogo-1 #headcitystate, body.theme-cslogo-1 #headpics { display: none !important; } #headpicleft { position: static !important; flex-shrink: 0; padding: 0 !important; margin: 0 !important; order: -1; } #headpicright { position: static !important; flex-shrink: 0; padding: 0 !important; margin: 0 !important; order: 1; } #headtitle { flex: 1; width: auto !important; min-width: 0; font-size: 20px !important; padding: 0 8px !important; order: 0; } /* Themes with pic divs (default, rounded-2): center the title between the icons. */ #header:has(#headpicleft) #headtitle { text-align: center !important; } /* Rounded theme: .headerff inner wrapper must not interfere with flex layout. .headerf is kept as a real block so border-radius applies (gives the rounded box). */ .headerff { display: contents; } .headerf { display: flex !important; align-items: center; justify-content: space-between !important; flex: 1 !important; width: 100%; box-sizing: border-box; } /* Remove fixed header height for all themes. */ #header { height: auto !important; padding: 0 !important; overflow: visible !important; } /* 3colfixed themes: background-image is on #header itself — clear the color so the image shows through, and scale it to cover the full header width. */ #header:has(.header-image) { background-color: transparent !important; background-size: 100% 100% !important; background-repeat: no-repeat !important; } /* 3colfixed themes: .header-image div also carries the image in some configs. Maintain aspect ratio at any viewport width. */ .header-image { height: auto !important; aspect-ratio: 900 / 120; background-size: 100% 100%; background-position: left top; width: 100%; } #headtitle { margin-left: 0 !important; } /* Drop the decorative silhouette background that bleeds through stacked content. */ #container { background-image: none; } #content { padding: 0 12px 12px 12px; box-sizing: border-box; } /* Files/Links pages: unfloat folder box and stack file rows. */ .folderadd { float: none !important; width: auto !important; margin-bottom: 12px; } /* Files/Links: let tables scroll horizontally inside #content (which already has overflow-x: auto). No overflow-x on the wrapper div — that would clip the background-image icon. */ .soar_file, #soar_file { margin-left: 0 !important; } .soar_file table, #soar_file table, .soar_link table, #soar_link table { width: max-content !important; min-width: 100%; white-space: nowrap; } .soar_file table td, #soar_file table td, .soar_link table td, #soar_link table td { white-space: nowrap; } .soar_link { margin-left: 0 !important; } /* Files page: suppress spacer div between folder description and file list. */ .term-end { display: none; } #colleft, #colright, #scolleft { padding: 12px; box-sizing: border-box; } .headpicleftimage, .headpicrightimage { max-height: 72px; width: auto; } } /* cslogo-1 tablet-only header tweaks (regular page). At tablet widths (481-980px) the 60% logo column from the shared rule above renders the CS logo too tall (since width:100% scales it relative to a wider viewport). Narrow the logo column to 40% and grow the pack-number digits to balance the visual weight. Mobile (<=480px) keeps the original 60/30 proportions. The splash version has its own override block further down (must come after the splash @media block to win source-order ties). */ @media (min-width: 481px) and (max-width: 980px) { body.theme-cslogo-1 #headcs { flex: 0 0 40%; } body.theme-cslogo-1 #headpack img, body.theme-cslogo-1 #headnum0 img, body.theme-cslogo-1 #headnum1 img, body.theme-cslogo-1 #headnum2 img, body.theme-cslogo-1 #headnum3 img, body.theme-cslogo-1 #headnum4 img { max-height: 60px !important; } } /* Tablet and below: Drupal admin tabs need horizontal scroll so the inner ul.tabs can let tab borders bleed above its baseline (the visual "tab sticking up" effect). Applies down to mobile since the same overflow problem exists there too. The :not(ul) avoids matching ul.tabs.primary. */ @media (max-width: 980px) { div.tabs:not(ul) { overflow-x: auto; -webkit-overflow-scrolling: touch; padding: 6px 0 4px; } div.tabs ul.primary, div.tabs ul.secondary { white-space: nowrap; overflow: visible; } } /* Phone */ @media (max-width: 760px) { /* Collapse legacy table-based layouts into stacked blocks. Scoped to direct children so nested content tables (calendar, etc.) are unaffected. */ #container, #container > tbody, #container > tbody > tr > td, #container > tr > td, #scontainer, #scontainer > tbody, #scontainer > tbody > tr > td, #scontainer > tr > td { display: block; width: 100% !important; box-sizing: border-box; } /* Each layout-table row becomes a flex column so we can reorder content vs. sidebar. */ #container > tbody > tr, #container > tr, #scontainer > tbody > tr, #scontainer > tr { display: flex !important; flex-direction: column; width: 100% !important; } /* Put main content above the left sidebar on mobile. */ #content { order: 1; } #colleft, #scolleft { order: 2; } #colright { order: 3; } /* Home page: right column has event/counter widgets — show before left nav. */ body:has(#homepage) #colright { order: 2; } body:has(#homepage) #colleft { order: 3; } /* Splash header uses an inner for left/title/right. */ #header > table, #header > table tbody, #header > table tr, #header > table td { display: block; width: 100% !important; text-align: center; } #header, #headerbottom, #footer { display: block; } #colleft, #colright, #scolleft { margin-top: 8px; } #headtitle, #sheadtitle { font-size: 1.25rem; line-height: 1.2; padding: 8px 10px; } /* Flag themes: #headtitle/#sheadtitle is a direct child of #header (no wrapper divs). White text ensures legibility over the flag background image. */ #header > #headtitle, #header > #sheadtitle { color: white !important; text-shadow: 2px 2px 6px rgba(0,0,64,0.95) !important; margin-left: 0 !important; height: auto !important; overflow: visible !important; } #sheadpicleft, #sheadpicright { text-align: center; } .breadcrumb, .messages { word-wrap: break-word; overflow-wrap: anywhere; } .page-content, .node, .block { max-width: 100%; box-sizing: border-box; } .soarlink { font-size: 0.9rem; } /* Event calendar: keep the 7-column grid intact and scroll horizontally instead of letting the global table { max-width: 100% } collapse it. */ .event-calendar { overflow-x: auto; -webkit-overflow-scrolling: touch; } .event-calendar table { max-width: none; width: auto; min-width: 560px; } /* Calendar month/year jump form: the inline desktop style applies a padding-left:330px to push it past the calendar header. On phones it just shoves the dropdowns off-screen to the right. */ .caljumpdiv { padding-left: 0 !important; margin-bottom: 8px; } .caljumpdiv .cjmonth { max-width: 45%; } /* Signup admin "Event Registration Guide" yellow box (signup.module emits it as an inline-styled float-right div). On phones, unfloat it so it stacks above the form rather than overflowing the viewport. */ div[style*="background-color: yellow"][style*="float: right"] { float: none !important; width: auto !important; margin: 0 0 12px 0 !important; } /* Form items: prevent labels and descriptions from being cut off on the right. */ .form-item, .form-item .description { max-width: 100%; box-sizing: border-box; word-wrap: break-word; overflow-wrap: anywhere; } /* fieldset ignores overflow in some browsers due to special UA rendering, constrain via max-width rather than clipping #content — clipping #content would prevent horizontal scrolling on files/links/snews pages. */ fieldset { max-width: 100%; box-sizing: border-box; min-width: 0; } /* Account page: two-column Details/Options layout table inside form. Stack vertically on mobile for better readability. */ form > div > table { display: block; width: 100%; } form > div > table tbody { display: block; } form > div > table tr { display: block; width: 100%; } form > div > table td { display: block; width: 100% !important; } /* Account page Options fieldset: restore table display and distribute buttons evenly. */ fieldset > table { display: table !important; } fieldset > table tbody { display: table-row-group !important; } fieldset > table tr { display: table-row !important; } fieldset > table td, fieldset > table th { display: table-cell !important; } /* Account page Options: distribute Upgrade/Renew/Cancel evenly across the fieldset. */ #sacct_cp fieldset > table { width: 100% !important; table-layout: fixed !important; } #sacct_cp fieldset > table td { width: auto !important; text-align: center !important; } /* Event Costs and other data tables with wide columns inside fieldsets need horizontal scroll. Use overflow on the fieldset instead. */ fieldset { overflow-x: auto; -webkit-overflow-scrolling: touch; } /* Force all form elements and their containers to respect the viewport. */ form, #content form, .form-item, .form-item label, .form-item .description, .container-inline { max-width: 100%; box-sizing: border-box; } /* drupal.css forces .container-inline div { display: inline }, which prevents description text inside fieldsets from wrapping. Scope this override to fieldset context only — time picker and other intentional inline groups (e.g. event edit form) must remain inline. */ fieldset .container-inline .description, fieldset .container-inline > .form-item > .description { display: block !important; white-space: normal !important; word-break: break-word; overflow-wrap: anywhere; } /* drupal.css sets white-space:nowrap on .form-item inside tr.odd/tr.even. */ tr.odd .form-item, tr.even .form-item, .form-item .description, tr.odd .form-item .description, tr.even .form-item .description, fieldset .description { white-space: normal !important; word-break: break-word; overflow-wrap: anywhere; } /* Wide text inputs (e.g. size="60") blow out narrow fieldsets. */ input[type="text"], input[type="email"], input[type="password"], textarea { max-width: 100%; box-sizing: border-box; } /* Files page: .folderadd box is float:right with fixed width 130px from style.css — unfloat it so it stacks above the file listing. */ .folderadd { float: none !important; width: auto !important; margin-bottom: 12px; } /* Email list tables (Manual/Automated/Event Email Lists) on /smail pages. These are direct children of #content. Restore table structure and allow horizontal scroll by making the table auto-width with overflow. */ #content > table { display: table; width: auto; min-width: 100%; } #content > table tbody { display: table-row-group; } #content > table tr { display: table-row; } #content > table td, #content > table th { display: table-cell; } /* Wrap #content itself in a scroll container for tables that are wider than viewport. */ #content { overflow-x: auto; -webkit-overflow-scrolling: touch; } /* Data tables (Adult Leaders, Scouts, etc.) inside .soar_manage_member. These are multi-column tables that don't fit phone widths. Allow horizontal scroll so all columns remain visible and readable. */ .soar_manage_member { overflow-x: auto; -webkit-overflow-scrolling: touch; } .soar_manage_member table { min-width: 600px; } /* Roster page: two-column table (Troop | Patrols) inside #smember_roster. Stack columns vertically and keep icon+label pairs on one line. */ #smember_roster table { display: block; width: 100% !important; } #smember_roster table tbody, #smember_roster table tr { display: block; width: 100%; } #smember_roster .main > table > tbody > tr > td, #smember_roster .main > table > tr > td { display: block; width: 100% !important; box-sizing: border-box; } /* Keep icon + link text on one line within each roster entry. */ #smember_roster img[align="middle"] { vertical-align: middle; } } /* Rounded theme adjustments for mobile. */ @media (max-width: 760px) { /* Add left/right padding inside the content box — desktop uses 0 horizontal padding which looks fine at full width but cramped when the box fills the phone viewport. */ .contentff { padding-left: 12px !important; padding-right: 12px !important; } .contentff { width: auto !important; min-width: 0 !important; margin-left: 0 !important; margin-right: 0 !important; } .contentf { width: 100%; box-sizing: border-box; } .n1f, .n2f, .n3f, .n4f { margin-left: 0 !important; margin-right: 0 !important; } } /* Sidebar block alignment fixes on mobile. Float-right elements in event/signup blocks look misaligned when stacked. */ @media (max-width: 760px) { .block-event .event-subunit, .block-signup .event-subunit, .block-signup .event-restrict { float: none !important; text-align: left !important; max-width: 100% !important; } /* Site counter: right-aligned by .soarcounterimages — left-align on mobile. */ .soarcounterimages { text-align: left !important; margin-right: 0 !important; } } /* snews page: prevent date column from wrapping; let table scroll horizontally on mobile. The full /snews page outputs a plain
      directly in #content. The homepage widget uses .snews_container > table.snews_recent. */ @media (max-width: 760px) { /* Homepage news ticker widget */ .snews_container { overflow-x: auto !important; -webkit-overflow-scrolling: touch; width: 100%; } table.snews_recent { width: max-content !important; min-width: 100%; white-space: nowrap; } table.snews_recent td { white-space: nowrap; } /* Full /snews listing page — plain table directly in #content */ #content > table[cellpadding="2"] { width: max-content !important; min-width: 100%; white-space: nowrap; } #content > table[cellpadding="2"] td { white-space: nowrap; } } /* smail/import admin pages: stack two-column fieldset rows vertically at tablet and below. */ @media (max-width: 980px) { #content td[width="50%"], #content td[width="45%"], #content td[width="55%"] { display: block; width: 100% !important; box-sizing: border-box; } } /* smail icon tables: collapse spacer TD on mobile so icons distribute evenly. */ @media (max-width: 760px) { fieldset table td[width="*"] { width: 0 !important; padding: 0 !important; } } /* Email list mod: stack List Members and Authorized Senders panels vertically. */ @media (max-width: 980px) { table.emailmemlist, table.emailmemlist tbody, table.emailmemlist tr, table.emailmemlist td { display: block; width: 100% !important; box-sizing: border-box; } } /* stheme/select: theme picker flex layout — works at all sizes. */ .stheme-list { display: flex; flex-direction: column; gap: 16px; margin-top: 12px; } .stheme-row { display: flex; flex-direction: row; align-items: flex-start; gap: 16px; } .stheme-thumb-cell { flex-shrink: 0; } .stheme-thumb { display: block; max-width: 120px; height: auto !important; } #content .stheme-thumb { width: 120px !important; max-width: 120px !important; } .stheme-desc-cell { flex: 1; min-width: 0; word-wrap: break-word; overflow-wrap: anywhere; } .themename { font-weight: bold; margin-bottom: 4px; } /* cslogo-1 pack theme: center rank badge strip within its column. */ #colrank { background-position: center top !important; } /* cslogo-1 pack theme: fix fixed-size homepage panel at all breakpoints. */ #shomepage { width: auto !important; height: auto !important; min-height: 0 !important; overflow-y: visible !important; } #shomepage .node { width: auto !important; } #shomepage .cpcontentff { width: auto !important; height: auto !important; overflow-y: visible !important; } /* cslogo-1 splash page: match the regular page header's 60/30 side-by-side layout. The splash markup wraps everything-but-#sheadpics in #sheadlogo, so we make #sheadlogo a flex row that contains #sheadcs (60%) on the left and the pack-number digits group (30%) on the right. */ @media (max-width: 980px) { body.theme-cslogo-1 #scontainer #header, body.theme-cslogo-1 #scontainer td#header { height: auto !important; min-height: 70px; padding: 8px !important; box-sizing: border-box; background-color: #FFCC00 !important; } body.theme-cslogo-1 #sheadlogo { display: flex !important; flex-direction: row; align-items: center; width: 100%; /* Collapse inter-tag whitespace between the flat siblings #sheadpack and #sheadnum0/1/2 so the digits group visually without gaps. */ font-size: 0; } body.theme-cslogo-1 #sheadcs { position: static !important; flex: 0 0 60%; text-align: left; } body.theme-cslogo-1 #sheadcs img { width: 100% !important; height: auto !important; } /* #sheadpack + #sheadnumN are flat flex siblings inside #sheadlogo on the splash page (vs nested under #headpacknum on the regular page). Push #sheadpack to the right edge with margin-left:auto; the digits follow it as additional flex items, grouped visually because we killed the whitespace with font-size:0 on the parent. */ body.theme-cslogo-1 #sheadpack { position: static !important; flex: 0 0 auto; margin-left: auto; } body.theme-cslogo-1 #sheadnum0, body.theme-cslogo-1 #sheadnum1, body.theme-cslogo-1 #sheadnum2, body.theme-cslogo-1 #sheadnum3, body.theme-cslogo-1 #sheadnum4 { position: static !important; flex: 0 0 auto; } body.theme-cslogo-1 #sheadpack img, body.theme-cslogo-1 #sheadnum0 img, body.theme-cslogo-1 #sheadnum1 img, body.theme-cslogo-1 #sheadnum2 img, body.theme-cslogo-1 #sheadnum3 img, body.theme-cslogo-1 #sheadnum4 img { max-height: 40px !important; height: auto !important; width: auto; } /* Hide elements that would compete for space in the flex row. */ body.theme-cslogo-1 #sheadpics, body.theme-cslogo-1 #sheadcitystate { display: none !important; } } /* cslogo-1 splash page tablet-only header tweaks. Mirrors the same adjustments we apply to the regular page's #headcs/#headnumN at tablet width: shrink the CS logo column to 40% and grow the pack-number digits to 60px. Must come AFTER the splash @media (max-width: 980px) block above, because the 60% flex rule there has equal specificity to our 40% override and would otherwise win on source order. */ @media (min-width: 481px) and (max-width: 980px) { body.theme-cslogo-1 #sheadcs { flex: 0 0 40%; } body.theme-cslogo-1 #sheadpack img, body.theme-cslogo-1 #sheadnum0 img, body.theme-cslogo-1 #sheadnum1 img, body.theme-cslogo-1 #sheadnum2 img, body.theme-cslogo-1 #sheadnum3 img, body.theme-cslogo-1 #sheadnum4 img { max-height: 60px !important; } } /* cslogo-1 splash page desktop sizing. The splash markup lacks the absolute-positioning constraints the regular page uses, so images render at their natural sizes and look mismatched. Lock all header images to a uniform max-height and let widths auto-scale, so the CS logo, PACK graphic, and number digits visually align on a single baseline. Also collapse the inter-tag whitespace between #sheadpack and #sheadnumN (which page-splash.tpl.php emits on separate lines, rendering as visible gaps between the digits). Scoped to body.theme-cslogo-1 + splash-only IDs, so no other theme is affected. */ @media (min-width: 981px) { body.theme-cslogo-1 #sheadlogo { font-size: 0; } body.theme-cslogo-1 #sheadcs img, body.theme-cslogo-1 #sheadpack img, body.theme-cslogo-1 #sheadnum0 img, body.theme-cslogo-1 #sheadnum1 img, body.theme-cslogo-1 #sheadnum2 img, body.theme-cslogo-1 #sheadnum3 img, body.theme-cslogo-1 #sheadnum4 img { max-height: 80px; height: auto !important; width: auto; } /* Vertical alignment tweaks: the theme's stock #sheadpack/#sheadnumN 'top' offsets are designed for the original natural-size images. With our 80px max-height, the digits sit too high. Override the theme's 'top' values to bring them back into alignment with #sheadcs. */ body.theme-cslogo-1 #sheadpack { top: 0; } body.theme-cslogo-1 #sheadnum0, body.theme-cslogo-1 #sheadnum1, body.theme-cslogo-1 #sheadnum2 { top: -7px; } } /* original-1 pack theme: fix tall splash header on mobile. The inner table has fixed height via #sheadtitle; shrink images and clear heights. */ @media (max-width: 600px) { #scontainer #header, #scontainer td#header { height: auto !important; min-height: 0 !important; } #sheadtitle { height: auto !important; min-height: 0 !important; overflow: visible !important; font-size: 20px !important; padding: 4px 8px !important; } /* Undo the block/width:100% that the global 760px rule applies to inner table cells. */ #scontainer #header > table { display: table !important; width: 100% !important; } #scontainer #header > table tbody { display: table-row-group !important; } #scontainer #header > table tr { display: table-row !important; width: auto !important; } #scontainer #header > table td { display: table-cell !important; width: auto !important; } #sheadpicleft, #sheadpicright { display: flex !important; align-items: center !important; } #sheadpicleft .headpicleftimage, #sheadpicright .headpicrightimage { max-height: 60px !important; max-width: 60px !important; width: auto !important; height: auto !important; object-fit: contain; } } /* cslogo-1 pack theme: absolutely-positioned header elements at tablet and mobile. At desktop the #header is 110px tall and elements are placed by pixel offsets. At tablet/mobile we use a #headpacknum wrapper (added in PHP) to group the pack word + digits as a single flex item alongside the CS logo. */ @media (max-width: 980px) { } /* Very small devices */ @media (max-width: 480px) { body { font-size: 15px; } /* cslogo-1 mobile header layout is handled by the unified 60/30 side-by-side rule in the @media (max-width: 980px) block above, which applies to both tablet and mobile. The previous mobile-specific block here (full-width CS logo on top, pack digits below) was superseded and removed. */ #content, #colleft, #colright, #scolleft { padding-left: 10px; padding-right: 10px; } .comment { margin: 1em 10px 0 10px; } }