wrapping .sidebar-nav. -------------------------------------------------------------------------- */ /* Drawer positioning — use left instead of transform for reliability */ /* Extremely high specificity to beat Bootstrap-responsive [class*="span"] rules */ .sk-sidebar-col, div.sk-sidebar-col, .row-fluid .sk-sidebar-col, .row-fluid > .sk-sidebar-col, .container-fluid .row-fluid > .sk-sidebar-col, [class*="span"].sk-sidebar-col { position: fixed !important; top: 52px !important; left: -110vw !important; bottom: 0 !important; width: 280px !important; max-width: 82vw !important; height: calc(100% - 52px) !important; margin: 0 !important; padding: 0 !important; float: none !important; display: block !important; z-index: 1040 !important; background: var(--sk-drawer-bg) !important; color: var(--sk-drawer-fg); box-shadow: none; overflow-y: auto !important; -webkit-overflow-scrolling: touch; transition: left .28s cubic-bezier(.4,0,.2,1), box-shadow .28s ease; visibility: hidden; } /* Drawer open state — must match or exceed hide rule specificity */ body.sk-drawer-open .sk-sidebar-col, body.sk-drawer-open div.sk-sidebar-col, body.sk-drawer-open .row-fluid .sk-sidebar-col, body.sk-drawer-open .row-fluid > .sk-sidebar-col, body.sk-drawer-open .container-fluid .row-fluid > .sk-sidebar-col, body.sk-drawer-open [class*="span"].sk-sidebar-col { left: 0 !important; box-shadow: 4px 0 24px rgba(0,0,0,.5) !important; visibility: visible !important; border-right: 1px solid rgba(255,255,255,.08); } /* Inside the drawer — sidebar already starts below navbar (top:52px), so just a small top padding. !important beats Sendy's inline style="padding: 19px;" */ .sk-sidebar-col .sidebar-nav { padding-top: 12px !important; padding-bottom: 80px !important; min-height: 100% !important; box-sizing: border-box !important; } /* Ensure sidebar column scrolls on short viewports (sendykit-ofuc fix) */ @media (max-height: 700px) { .sk-sidebar-col, div.sk-sidebar-col, [class*="span"].sk-sidebar-col { overflow-y: scroll !important; } } /* ---- Drawer controls: brand picker + user nav moved from navbar ---- */ .sk-drawer-controls { padding: 12px 16px; border-bottom: 1px solid var(--sk-drawer-border); margin-bottom: 8px; overflow: visible; position: relative; z-index: 2; } /* Ensure dropdown menu shows when parent has .open class */ .sk-drawer-brand-picker.open .dropdown-menu { display: block !important; position: relative !important; width: 100% !important; margin-top: 4px; float: none !important; } .sk-drawer-controls .sk-drawer-brand-picker { margin-bottom: 12px; display: block; } .sk-drawer-controls .sk-drawer-brand-picker .btn { width: 100% !important; max-width: none !important; text-align: left !important; font-size: 14px !important; padding: 12px 16px !important; min-height: 48px; border-radius: 5px; background: rgba(255,255,255,.06) !important; border: 1px solid var(--sk-drawer-border) !important; color: var(--sk-drawer-fg) !important; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: flex !important; align-items: center; gap: 8px; } .sk-drawer-controls .sk-drawer-brand-picker .btn .caret { margin-left: auto; } .sk-drawer-controls .sk-drawer-brand-picker .dropdown-menu { width: 100%; border-radius: 5px; margin-top: 4px; } .sk-drawer-controls .sk-drawer-brand-picker .dropdown-menu a { padding: 12px 16px !important; font-size: 14px; min-height: 44px; display: flex; align-items: center; } .sk-drawer-user-nav { list-style: none; padding: 0; margin: 0; } .sk-drawer-user-nav li a { display: flex !important; align-items: center; gap: 10px; padding: 12px 16px !important; font-size: 14px !important; min-height: 44px; color: var(--sk-drawer-fg) !important; border-radius: 5px; transition: background .12s ease; } .sk-drawer-user-nav li a:hover { background: rgba(128,128,128,.1); text-decoration: none; } .sk-drawer-user-nav li a i { width: 20px; text-align: center; } /* Hide navbar elements that were moved to drawer */ .sk-hidden-mobile { display: none !important; } .sk-light .sk-drawer-controls .sk-drawer-brand-picker .btn { background: rgba(0,0,0,.04) !important; } /* Sidebar links — touch-friendly (44px minimum tap target) */ .sk-sidebar-col .sidebar-nav .nav-list > li > a { padding: 12px 18px !important; font-size: 14px !important; line-height: 1.4; min-height: 44px; display: flex !important; align-items: center; gap: 10px; border-bottom: 1px solid var(--sk-drawer-border); color: var(--sk-drawer-fg); transition: background .12s ease; } .sk-sidebar-col .sidebar-nav .nav-list > li:last-child > a { border-bottom: none; } .sk-sidebar-col .sidebar-nav .nav-list > li > a:hover, .sk-sidebar-col .sidebar-nav .nav-list > li > a:focus { background: rgba(128,128,128,.1); } .sk-sidebar-col .sidebar-nav .nav-list > li.active > a { font-weight: 600; color: var(--sk-accent-text) !important; } /* Sidebar icons — fixed width for alignment */ .sk-sidebar-col .sidebar-nav .nav-list > li > a > i, .sk-sidebar-col .sidebar-nav .nav-list > li > a > [class*="icon-"] { width: 20px; text-align: center; flex-shrink: 0; } /* Sidebar section headers */ .sk-sidebar-col .sidebar-nav .nav-header { padding: 16px 18px 6px !important; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .6px; color: var(--sk-drawer-fg); opacity: .6; } /* Keep navbar above overlay + drawer so hamburger stays clickable. Also explicitly raise the hamburger button to avoid stacking issues. */ body.sk-drawer-open .navbar-fixed-top { z-index: 1050 !important; } body.sk-drawer-open .btn-navbar { position: relative; z-index: 1051 !important; } /* Overlay behind drawer — uses visibility+opacity (not display:none) so the opacity transition actually runs instead of popping in. */ #sk-overlay { position: fixed; inset: 0; z-index: 1039; background: var(--sk-overlay); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .25s ease, visibility .25s ease; } body.sk-drawer-open #sk-overlay { opacity: 1; visibility: visible; pointer-events: auto; } /* -------------------------------------------------------------------------- 4. MAIN CONTENT — full-width on phone Override Bootstrap 2's .row-fluid [class*="span"] { width:...; float:left } -------------------------------------------------------------------------- */ /* All span columns stack vertically on phone */ .container-fluid > .row-fluid > [class*="span"] { width: 100% !important; margin-left: 0 !important; float: none !important; } /* Mobile body gutter — 7px each side = 361px usable at 375px viewport */ body { padding-left: 7px !important; padding-right: 7px !important; } /* Zero container-fluid on mobile — body gutter is sufficient */ .container-fluid { padding-left: 0 !important; padding-right: 0 !important; } /* -------------------------------------------------------------------------- 5. TYPOGRAPHY — scaled for phone, modern feel -------------------------------------------------------------------------- */ body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } .lead, p.lead, p.lead a { font-size: 18px !important; line-height: 1.45; } h1, .page-header h1 { font-size: 22px !important; font-weight: 300; letter-spacing: -0.3px; margin: 16px 0 8px; } h2 { font-size: 17px !important; font-weight: 400; margin-top: 12px; color: inherit; /* preserve native Sendy heading color, don't force gold */ } h3 { font-size: 15px !important; font-weight: 600; } /* Page title area — brand name + page heading */ .container-fluid h2:first-child, .container-fluid .lead:first-child { margin-top: 8px; } /* -------------------------------------------------------------------------- 6. TABLES — card layout on phone, scroll fallback CSS-only via .table selector (no JS dependency for layout). JS adds data-label attrs from headers (progressive enhancement). -------------------------------------------------------------------------- */ .sk-table-wrap { display: block; width: 100%; margin-bottom: 16px; } .sk-table-wrap > table { margin-bottom: 0; } /* ---- Neutralize Sendy's responsive-tables.js split/clone ---- */ /* Sendy clones tables into .pinned + .scrollable at <767px. We use card layout instead, so kill the clone entirely. Sendy's responsive-tables.css applies: .pinned { position:absolute; width:35% } .scrollable table { margin-left:35% } We must undo ALL of it. */ .table-wrapper .pinned { display: none !important; width: 0 !important; height: 0 !important; position: absolute !important; left: -9999px !important; } .table-wrapper .scrollable { overflow: visible !important; overflow-x: visible !important; overflow-y: visible !important; width: 100% !important; max-width: 100% !important; margin-left: 0 !important; } .table-wrapper .scrollable table, .table-wrapper div.scrollable table { margin-left: 0 !important; width: 100% !important; max-width: 100% !important; table-layout: fixed !important; } .table-wrapper { position: relative; overflow: visible !important; width: 100% !important; max-width: 100% !important; } /* Kill Sendy's responsive-tables.css first-child hiding + white-space */ table.responsive th:first-child, table.responsive td:first-child { display: block !important; } table.responsive td, table.responsive th { position: static !important; white-space: normal !important; overflow: visible !important; } /* Card table: each row becomes a card on mobile */ .table thead { display: none; } .table tbody tr { display: block; padding: 14px 0; border-bottom: 1px solid var(--sk-drawer-border); margin-bottom: 0; } .table tbody tr:last-child { border-bottom: none; } .table tbody td { display: flex; align-items: baseline; padding: 4px 0 !important; border: none !important; font-size: 14px; gap: 8px; word-break: break-word; overflow-wrap: break-word; } .table tbody td:before { content: attr(data-label); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .3px; opacity: .5; min-width: 90px; flex-shrink: 0; } /* Hide label for empty data-label cells (action columns) */ .table tbody td[data-label=""]:before, .table tbody td:not([data-label]):before { display: none; } /* Action cells — inline row, no label */ .table tbody td[data-label="Duplicate"], .table tbody td[data-label="Delete"], .table tbody td[data-label="Edit"], .table tbody td[data-label="Quick links"], .table tbody td[data-label="Export"], .table tbody td[data-label="Import"] { display: inline-flex; min-width: auto; gap: 4px; } .table tbody td[data-label="Duplicate"]:before, .table tbody td[data-label="Delete"]:before, .table tbody td[data-label="Edit"]:before, .table tbody td[data-label="Quick links"]:before, .table tbody td[data-label="Export"]:before, .table tbody td[data-label="Import"]:before { display: none; } /* First cell (Campaign/Brand name) — card title, block display */ .table tbody td:first-child { display: block !important; font-size: 15px; font-weight: 600; padding: 4px 0 10px !important; line-height: 1.4; border-bottom: 1px solid var(--sk-drawer-border) !important; margin-bottom: 6px; word-break: break-word; overflow-wrap: break-word; } .table tbody td:first-child:before { display: none; } /* Hide ID column on mobile — MUST come AFTER first-child to win equal specificity */ .table tbody td:first-child[data-label="ID"] { display: none !important; border: none !important; padding: 0 !important; margin: 0 !important; height: 0 !important; overflow: hidden !important; } /* Name cells — card title when ID is hidden */ .table tbody td[data-label="Brands"], .table tbody td[data-label="List"], .table tbody td[data-label="Campaign"], .table tbody td[data-label="Link (URL)"], .table tbody td[data-label="Name"], .table tbody td[data-label="Email"] { display: block !important; font-size: 15px; font-weight: 600; padding: 4px 0 10px !important; border-bottom: 1px solid var(--sk-drawer-border) !important; margin-bottom: 6px; word-break: break-word; overflow-wrap: break-word; } .table tbody td[data-label="Brands"]:before, .table tbody td[data-label="List"]:before, .table tbody td[data-label="Campaign"]:before, .table tbody td[data-label="Link (URL)"]:before, .table tbody td[data-label="Name"]:before, .table tbody td[data-label="Email"]:before { display: none; } /* Sends via — less important, smaller */ .table tbody td[data-label="Sends via"] { font-size: 12px; } .table tbody td[data-label="Sending limits"], .table tbody td[data-label="Used"] { font-size: 13px; } /* Hide empty cells — labels without visible content */ .table tbody td:empty { display: none; } /* Preview/Use columns — icon-only, inline */ .table tbody td[data-label="Preview"], .table tbody td[data-label="Use"] { display: inline-flex; min-width: auto; } .table tbody td[data-label="Preview"]:before, .table tbody td[data-label="Use"]:before { display: none; } /* -------------------------------------------------------------------------- 7. FORMS — comprehensive mobile-first treatment All inputs, selects, textareas full-width, 16px font (prevents iOS zoom), proper touch targets, consistent spacing across ALL Sendy pages. -------------------------------------------------------------------------- */ /* 7a. Text inputs — full bleed, large touch targets */ input[type="text"], input[type="email"], input[type="password"], input[type="search"], input[type="url"], input[type="number"], input[type="tel"], input[type="date"], input[type="datetime-local"], input[type="time"], textarea, select, .uneditable-input { width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; border-radius: 4px; padding: 8px 10px !important; font-size: 14px !important; line-height: 1.4; min-height: 36px; border: 1px solid var(--sk-drawer-border) !important; background-color: inherit; /* let Sendy's theme set the input bg */ color: inherit !important; /* let Sendy's theme set the text color */ transition: border-color .15s ease, box-shadow .15s ease; } .sk-light input[type="text"], .sk-light input[type="email"], .sk-light input[type="password"], .sk-light input[type="search"], .sk-light input[type="url"], .sk-light input[type="number"], .sk-light input[type="tel"], .sk-light textarea, .sk-light select, .sk-light .uneditable-input { background-color: #fff; border-color: #d0d5dd !important; color: #1a1a2e; } /* 7b. Focus state — accent ring */ input[type="text"]:focus, input[type="email"]:focus, input[type="password"]:focus, input[type="search"]:focus, input[type="url"]:focus, input[type="number"]:focus, input[type="tel"]:focus, textarea:focus, select:focus { border-color: var(--sk-accent) !important; box-shadow: 0 0 0 3px rgba(196,162,101,.18) !important; outline: none !important; } /* 7c. Select — custom dropdown arrow, full width */ select { -webkit-appearance: none; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23999' d='M6 8L1 3h10z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; padding-right: 36px !important; cursor: pointer; } /* 7d. Textarea — generous minimum height */ textarea { min-height: 120px; resize: vertical; } /* 7e. Bootstrap size classes — all full-width on mobile */ .input-xlarge, .input-xxlarge, .input-large, .input-medium, .input-small, .input-mini, .search-query, .input-block-level { width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; } /* 7f. Labels — consistent spacing, proper weight */ label, .control-label { display: block !important; font-size: 13px !important; font-weight: 500; text-transform: none; /* preserve native Sendy casing */ letter-spacing: normal; margin-bottom: 4px !important; margin-top: 14px; color: inherit; opacity: .85; } /* First label shouldn't have extra top margin */ .control-group:first-child label, .control-group:first-child .control-label, form > label:first-child { margin-top: 8px; } /* 7g. Control groups — proper stacking */ .control-group { margin-bottom: 4px !important; } .controls { margin-left: 0 !important; } .form-horizontal .controls { margin-left: 0 !important; } .form-horizontal .control-label { float: none !important; width: auto !important; text-align: left !important; padding-top: 0 !important; } /* 7h. File inputs — styled consistently */ input[type="file"] { width: 100% !important; box-sizing: border-box !important; padding: 12px !important; font-size: 14px !important; min-height: 48px; border: 1px dashed var(--sk-drawer-border) !important; border-radius: 5px; background: rgba(255,255,255,.03); cursor: pointer; } input[type="file"]::file-selector-button { padding: 8px 16px; border-radius: 5px; border: 1px solid var(--sk-drawer-border); background: rgba(255,255,255,.08); color: inherit; font-size: 14px; cursor: pointer; margin-right: 12px; } /* 7i. Inline inputs — exceptions */ .checkbox input[type="checkbox"], .radio input[type="radio"] { width: auto !important; min-height: auto; } /* 7j. Help text / hints */ .help-block, .help-inline { font-size: 13px; opacity: .6; margin-top: 4px; } /* 7k. Form-search stacks on phone */ .form-search { float: none !important; display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; margin-bottom: 12px; } .form-search .search-query { flex: 1; min-width: 0; width: 100% !important; max-width: none !important; margin-bottom: 8px; } /* 7l. Button groups (Yes/No/Anonymously toggles) — touch-friendly */ .btn-group { display: inline-flex; border-radius: 5px; overflow: hidden; } .btn-group > .btn { border-radius: 0 !important; min-height: 44px; padding: 10px 16px; font-size: 14px; } .btn-group > .btn:first-child { border-radius: 5px 0 0 5px !important; } .btn-group > .btn:last-child { border-radius: 0 5px 5px 0 !important; } /* 7m. Inline elements next to labels (eg info icons) */ label + a, label + .icon, .control-label + a { margin-left: 4px; } /* 7n. Input addons — search bar combos etc */ .input-append, .input-prepend { display: flex !important; width: 100%; } .input-append input, .input-prepend input { flex: 1 1 auto; border-radius: 5px 0 0 5px !important; } .input-append .btn, .input-append .add-on, .input-prepend .btn, .input-prepend .add-on { border-radius: 0 5px 5px 0 !important; flex-shrink: 0; } /* -------------------------------------------------------------------------- 8. BUTTONS — touch-friendly -------------------------------------------------------------------------- */ .btn { min-height: 44px; padding: 10px 16px; font-size: 14px; border-radius: 5px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; transition: background .12s ease, transform .1s ease; } .btn:active { transform: scale(.97); } .btn i[class*="icon-"], .btn i.icon, .btn span[class*="icon"] { margin-right: 0; font-size: 14px; } /* Primary action buttons — prominent */ .btn-primary, .btn-success { padding: 12px 20px; font-weight: 600; } /* Quick link icon buttons (brands page) — remove boxy outlines */ td .btn[title], td a.btn:not(.btn-primary):not(.btn-success):not(.btn-danger):not(.btn-inverse) { border: none !important; box-shadow: none !important; background: transparent !important; min-height: 40px; min-width: 40px; padding: 8px !important; border-radius: 50% !important; color: inherit; } td .btn[title]:hover, td .btn[title]:focus { background: rgba(128,128,128,.12) !important; } td .btn[title] .icon, td .btn[title] span[class*="icon"] { font-size: 16px; } /* -------------------------------------------------------------------------- 9. DROPDOWNS — wider on phone -------------------------------------------------------------------------- */ .dropdown-menu { min-width: 220px; border-radius: 5px; padding: 6px 0; box-shadow: 0 8px 24px rgba(0,0,0,.2); } .dropdown-menu > li > a { padding: 12px 16px; font-size: 14px; min-height: 44px; display: flex; align-items: center; gap: 8px; } .dropdown-menu > li > a:hover, .dropdown-menu > li > a:focus { border-radius: 5px; margin: 0 4px; } /* -------------------------------------------------------------------------- 10. MODALS — near-fullscreen on phone -------------------------------------------------------------------------- */ .modal { position: fixed !important; top: 8px !important; left: 8px !important; right: 8px !important; bottom: auto !important; width: auto !important; margin: 0 !important; max-height: 88vh; overflow-y: auto; -webkit-overflow-scrolling: touch; } .modal-body { max-height: 60vh; overflow-y: auto; } .modal-footer { text-align: center; } .modal-footer .btn { margin-bottom: 6px; } .modal-footer input[type="text"] { width: auto; max-width: 100%; } /* -------------------------------------------------------------------------- 11. FOOTER — centered, stacked -------------------------------------------------------------------------- */ footer { text-align: center; padding-bottom: 16px; } footer .footer-left, footer .footer-right { float: none !important; text-align: center; } footer .footer-left { margin-bottom: 10px; } #footer-mode.btn-group { display: inline-flex; justify-content: center; gap: 4px; } /* Theme toggle — 44px tap target, icon-only circles */ #footer-mode .btn, #footer-mode a.btn { min-height: 44px !important; min-width: 44px !important; max-width: 44px !important; max-height: 44px !important; width: 44px !important; height: 44px !important; padding: 0 !important; border-radius: 50% !important; font-size: 16px; line-height: 1; display: inline-flex !important; align-items: center; justify-content: center; background: var(--sk-drawer-bg, #1a1a2e); border: 1px solid var(--sk-drawer-border, #333); } #footer-mode .btn.active, #footer-mode a.btn.active { background: var(--sk-accent, #946f28); border-color: var(--sk-accent, #946f28); color: #fff; } .sk-light #footer-mode .btn, .sk-light #footer-mode a.btn { background: #f0f0f0; border-color: #ccc; } .sk-light #footer-mode .btn.active, .sk-light #footer-mode a.btn.active { background: var(--sk-accent, #946f28); border-color: var(--sk-accent, #946f28); color: #fff; } /* -------------------------------------------------------------------------- 12. WELLS, ALERTS — compact + modern -------------------------------------------------------------------------- */ .well, .alert { padding: 14px 16px !important; word-wrap: break-word; overflow-wrap: break-word; border-radius: 5px; line-height: 1.5; } .well { border: none; } /* -------------------------------------------------------------------------- 13. CAMPAIGN-SPECIFIC — clean stacking -------------------------------------------------------------------------- */ .dropdown[style*="float:left"], .dropdown[style*="float: left"] { float: none !important; margin-bottom: 16px; } .campaigns-rss-btn { float: none !important; display: inline-block; margin-bottom: 12px; margin-left: 8px; } /* Kill Sendy's hardcoded 55px gap above campaign/brand tables */ table.table[style*="margin-top"] { margin-top: 12px !important; } /* Search input — visible in dark mode */ .search-query, input.search-query { background: var(--sk-drawer-bg, #1a1a2e) !important; border: 1px solid var(--sk-drawer-border, #333) !important; color: var(--sk-drawer-fg, #fff) !important; } .sk-light .search-query, .sk-light input.search-query { background: #fff !important; border: 1px solid #ccc !important; color: #333 !important; } /* Form search — consolidated into section 7k above */ /* Labels — badge styling */ .label { padding: 3px 8px; border-radius: 5px; font-size: 11px; font-weight: 600; } /* Tabs — pill style buttons on mobile */ .nav-tabs, .nav-pills { border-bottom: none !important; display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; } .nav-tabs > li, .nav-pills > li { float: none !important; } .nav-tabs > li > a, .nav-pills > li > a { border-radius: 5px !important; padding: 8px 16px !important; font-size: 13px; white-space: nowrap; border: 1px solid var(--sk-drawer-border) !important; margin: 0 !important; } /* HR separator */ hr { border-color: var(--sk-drawer-border); margin: 16px 0; } /* -------------------------------------------------------------------------- 14. INNER GRID COLLAPSE — row-fluid spans stack on mobile Report pages, settings pages, etc. use inner span4/span6/span8 layouts. These must collapse to single column on <768px. -------------------------------------------------------------------------- */ /* All inner Bootstrap 2 div.span* → full width, no float on mobile */ /* Must use div[class*="span"] to avoid matching elements */ /* The sidebar (.sk-sidebar-col) is in the OUTER row-fluid, never in a nested one, so these selectors never match it — no :not() guard needed. Specificity: 0-3-1 (must match tablet restore to allow cascade override) */ .span10 .row-fluid > div[class*="span"], .row-fluid .row-fluid > div[class*="span"] { width: 100% !important; float: none !important; margin-left: 0 !important; margin-bottom: 16px; } /* -------------------------------------------------------------------------- 15. REPORT PAGE — charts, stats, link activity, subscribers -------------------------------------------------------------------------- */ /* Charts — contain within viewport, responsive */ #countries-container, #container, [id*="container"] { max-width: 100% !important; overflow: hidden; } /* Highcharts SVG — scale to fit */ .highcharts-container { max-width: 100% !important; width: 100% !important; } .highcharts-container svg { max-width: 100%; height: auto !important; } /* Report stat wells — stack vertical */ .span10 .well h3 { font-size: 16px !important; line-height: 1.5; margin-bottom: 8px; } .span10 .well h3 .badge { font-size: 13px !important; padding: 4px 8px; vertical-align: middle; } .span10 .well h3 .label { font-size: 11px; vertical-align: middle; display: inline; } /* Link activity URLs — truncate with ellipsis */ .span10 h4, .span10 h3 a, .span10 p a[href] { word-break: break-word; overflow-wrap: break-word; } /* Link activity tables — card layout on mobile */ table.table.table-hover { width: 100% !important; } /* Export/Import action buttons in report */ .notopened-export-btns, a[title*="Export"], a[title*="Import"] { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; } /* Float clears in report wells */ .well h3[style*="float"] { float: none !important; clear: both; } .well h3[style*="clear"] { margin-top: 12px !important; } /* -------------------------------------------------------------------------- 16. BRANDS PAGE — card layout for brand rows on mobile -------------------------------------------------------------------------- */ /* Brand table → stacked cards */ .sk-table-wrap > table td, .sk-table-wrap > table th { padding: 10px 8px; vertical-align: middle; } /* On the brands page, each brand row should breathe */ .sk-table-wrap > table > tbody > tr { border-bottom: 1px solid var(--sk-drawer-border); } .sk-table-wrap > table > tbody > tr:last-child { border-bottom: none; } /* Brand logos in table */ .sk-table-wrap > table img[src*="logo"], .sk-table-wrap > table img[src*="gravatar"] { width: 28px; height: 28px; border-radius: 5px; vertical-align: middle; margin-right: 6px; } /* Page content area — better spacing */ .container-fluid > .row-fluid > [class*="span"]:not(.sk-sidebar-col) { padding-top: 8px; } /* Content heading area */ .container-fluid h2:first-of-type { font-size: 20px !important; font-weight: 600; margin-top: 4px; margin-bottom: 12px; } /* Expandable sections (accordion-like on brand edit) */ .accordion-heading a, a[data-toggle="collapse"] { display: block; padding: 12px 0; font-size: 14px; font-weight: 500; } /* -------------------------------------------------------------------------- 17. SENDYKIT BRANDING — proxy-injected sidebar items -------------------------------------------------------------------------- */ .sendykit-proxy-badge { display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 5px; font-size: 9px; font-weight: 700; color: var(--sk-badge-fg); background: var(--sk-badge-bg); vertical-align: middle; letter-spacing: .4px; } .sidebar-nav .nav-header.sendykit-header { color: var(--sk-accent-text) !important; } .sidebar-nav .nav-list li a[href*="/sendykit/"]:hover { color: var(--sk-accent-hover) !important; } /* -------------------------------------------------------------------------- 3b. HIDE NAVBAR DUPES — sidebar owns settings + logout -------------------------------------------------------------------------- */ /* Sidebar owns: brand switcher, settings, logout — hide navbar dupes */ .navbar .dropdown-menu a[href*="/logout"], .navbar .dropdown-menu a[href*="/settings"] { display: none !important; } .navbar .dropdown-menu .divider:last-child { display: none !important; } /* Hide navbar brand switcher — sidebar has brands dropdown */ .navbar-inner > .container-fluid > .btn-group.pull-right:has(.btn-white) { display: none !important; } /* Sidebar brands dropdown — uses Bootstrap 2 dropdown, just themed */ .sidebar-nav .btn-group .btn-white, .sk-sidebar-col .btn-group .btn-white { background: var(--sk-bg-surface, #292929) !important; color: var(--sk-fg-secondary, #dfdfdf) !important; border: 1px solid var(--sk-border, #333) !important; } .sidebar-nav .btn-group .btn-white:hover, .sk-sidebar-col .btn-group .btn-white:hover { background: rgba(255,255,255,.08) !important; } /* Let dropdown float above sidebar — position:fixed escapes stacking context */ .sidebar-nav .btn-group.open > .dropdown-menu, .sk-sidebar-col .btn-group.open > .dropdown-menu { position: fixed !important; z-index: 99999; } /* -------------------------------------------------------------------------- 3c. HIDE SENDY NATIVE SES QUOTA — replaced by our enhanced SES widget -------------------------------------------------------------------------- */ /* Sendy's ses-quota.php renders

Amazon SES Quota

/
/ as direct children of .sidebar-nav, before the

nav-list elements. Our .sk-ses-widget replaces this — hide all non-ul/non-sk direct children. */ .sidebar-nav.sidebar-box > h3, .sidebar-nav.sidebar-box > p, .sidebar-nav.sidebar-box > br, .sidebar-nav.sidebar-box > span { display: none !important; } /* -------------------------------------------------------------------------- 4. SES QUOTA WIDGET — collapsible at top of sidebar -------------------------------------------------------------------------- */ .sk-ses-widget { margin: 0 10px 6px; border-radius: 5px; background: rgba(255,255,255,.04); border: 1px solid var(--sk-border, #333); overflow: hidden; } .sk-light .sk-ses-widget { background: rgba(0,0,0,.02); } .sk-ses-toggle { display: flex !important; align-items: center; gap: 6px; padding: 8px 10px; font-size: 11px; font-weight: 600; color: var(--sk-fg-dim, #999) !important; text-decoration: none !important; text-transform: uppercase; letter-spacing: .5px; cursor: pointer; } .sk-ses-toggle:hover { color: var(--sk-fg-secondary, #dfdfdf) !important; text-decoration: none !important; } .sk-ses-arrow { display: inline-block; font-size: 14px; font-weight: 700; transition: transform .15s; width: 10px; text-align: center; } .sk-ses-arrow.sk-open { transform: rotate(90deg); } .sk-ses-label { flex: 1; } .sk-ses-badge { font-size: 10px; font-weight: 600; padding: 2px 6px; border-radius: 3px; background: rgba(74,222,128,.12); color: var(--sk-success, #4ade80); letter-spacing: 0; text-transform: none; } .sk-ses-body { padding: 0 10px 10px; } .sk-ses-row { display: flex; justify-content: space-between; font-size: 11px; padding: 3px 0; color: var(--sk-fg-muted, #d1d1d6); } .sk-ses-row span:last-child { font-weight: 600; color: var(--sk-fg-secondary, #dfdfdf); } .sk-ses-bar { height: 4px; background: rgba(255,255,255,.06); border-radius: 2px; margin-top: 6px; overflow: hidden; } .sk-light .sk-ses-bar { background: rgba(0,0,0,.06); } .sk-ses-fill { height: 100%; border-radius: 2px; width: 0; transition: width .5s ease; } /* -------------------------------------------------------------------------- 5. SIDEBAR PROFILE — gravatar + name + logout at bottom of sidebar -------------------------------------------------------------------------- */ .sk-sidebar-profile { display: flex; align-items: center; gap: 10px; padding: 12px 14px; margin-top: 8px; border-top: 1px solid var(--sk-border, #333); } .sk-sidebar-profile-link { display: flex !important; align-items: center; gap: 10px; flex: 1; min-width: 0; text-decoration: none !important; color: var(--sk-fg-dim, #999) !important; transition: color .15s; } .sk-sidebar-profile-link:hover { color: var(--sk-fg-secondary, #dfdfdf) !important; text-decoration: none !important; } .sk-sidebar-avatar { width: 28px; height: 28px; border-radius: 50%; flex-shrink: 0; opacity: .8; } .sk-sidebar-profile-link:hover .sk-sidebar-avatar { opacity: 1; } .sk-sidebar-name { font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sk-sidebar-logout { display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; flex-shrink: 0; border-radius: 5px; color: var(--sk-fg-dim, #999) !important; text-decoration: none !important; transition: all .15s; } .sk-sidebar-logout:hover { background: rgba(239,68,68,.12); color: var(--sk-danger, #ef4444) !important; text-decoration: none !important; } .sk-sidebar-logout i { font-size: 13px; } /* ========================================================================== TABLET — min-width: 768px Restore two-column sidebar + content layout. ========================================================================== */ @media (min-width: 768px) { /* -- Navbar -- */ .navbar-fixed-top .navbar-inner { padding-left: 12px; padding-right: 12px; } .navbar-fixed-top .brand { max-width: 50vw; font-size: 14px; padding: 10px 10px 10px 12px; } .navbar-fixed-top .brand .main-gravatar { width: 28px; height: 28px; margin-right: 5px; } .navbar-fixed-top .btn-group .btn { padding: 5px 10px; font-size: 12px; } /* Hamburger hidden on tablet+ */ .navbar-fixed-top .btn-navbar { display: none !important; } /* Restore nav-collapse (Bootstrap dropdowns) Bootstrap 2 .collapse sets height:0; overflow:hidden — must override */ .navbar-fixed-top .nav-collapse, .navbar-fixed-top .nav-collapse.collapse { display: block !important; height: auto !important; overflow: visible !important; } /* Restore navbar layout */ .navbar-fixed-top { position: relative !important; z-index: auto !important; } .navbar-fixed-top .navbar-inner { background-image: none !important; } .navbar-fixed-top .navbar-inner > .container-fluid { display: block !important; padding: 0 !important; } .navbar-fixed-top .separator { display: block !important; } .navbar-fixed-top .brand { flex: none !important; overflow: visible !important; } /* Navbar btn-groups restore */ .navbar-fixed-top .btn-group.pull-right { float: right !important; } /* btn-group overflow restore (mobile sets hidden for toggle groups) */ .btn-group { overflow: visible !important; } .btn-group > .btn { min-height: auto !important; } /* Hide drawer-only elements */ .sk-drawer-controls { display: none !important; } .sk-hidden-mobile { display: inline-block !important; } /* -- Sidebar: back in normal flow -- */ /* Must match high specificity + !important from base mobile rules */ .sk-sidebar-col, div.sk-sidebar-col, .row-fluid .sk-sidebar-col, .row-fluid > .sk-sidebar-col, .container-fluid .row-fluid > .sk-sidebar-col, [class*="span"].sk-sidebar-col { position: relative !important; top: auto !important; left: auto !important; bottom: auto !important; width: auto !important; max-width: none !important; height: auto !important; margin: 0 !important; padding: 0 !important; float: left !important; display: block !important; z-index: auto !important; background: transparent !important; color: inherit; box-shadow: none !important; overflow: visible !important; transition: none !important; visibility: visible !important; } .sk-sidebar-col .sidebar-nav { padding-top: 0 !important; padding-bottom: 0 !important; } /* Reset touch-friendly overrides */ .sk-sidebar-col .sidebar-nav .nav-list > li > a { padding: 3px 15px !important; font-size: inherit !important; min-height: auto; display: list-item !important; border-bottom: none; gap: 0; color: inherit; } .sk-sidebar-col .sidebar-nav .nav-header { padding: 3px 15px !important; font-size: 11px; } /* Overlay always hidden on tablet+ */ #sk-overlay { display: none !important; visibility: hidden !important; pointer-events: none !important; } body.sk-drawer-open .sk-sidebar-col { left: auto !important; } /* -- Restore Bootstrap 2 grid -- */ .container-fluid > .row-fluid > .span2 { width: 14.52991% !important; /* Bootstrap 2 default */ float: left !important; margin-left: 2.12766% !important; } .container-fluid > .row-fluid > .span2:first-child { margin-left: 0 !important; } .container-fluid > .row-fluid > .span10 { width: 82.97872% !important; /* Bootstrap 2 default */ float: left !important; margin-left: 2.12766% !important; } .container-fluid > .row-fluid > .span9 { width: 74.46808% !important; float: left !important; margin-left: 2.12766% !important; } .container-fluid > .row-fluid > .span3 { width: 23.40425% !important; float: left !important; margin-left: 2.12766% !important; } .container-fluid > .row-fluid > .span5 { width: 40.42553% !important; float: left !important; margin-left: 2.12766% !important; } /* Desktop: body padding 0, container-fluid handles gutters */ body { padding-left: 0 !important; padding-right: 0 !important; } .container-fluid { padding-left: 20px !important; padding-right: 20px !important; } /* -- Typography restore -- */ .lead, p.lead, p.lead a { font-size: 21px !important; } h2 { font-size: 24px !important; } h3 { font-size: 18px !important; } /* -- Forms restore — !important to beat base mobile rules -- */ input[type="text"], input[type="email"], input[type="password"], input[type="search"], input[type="url"], input[type="number"], input[type="tel"], input[type="date"], input[type="datetime-local"], input[type="time"], textarea, select, .uneditable-input { width: auto !important; max-width: none !important; border-radius: 5px !important; padding: 4px 6px !important; font-size: inherit !important; line-height: inherit !important; min-height: auto !important; background-color: inherit !important; } textarea { min-height: auto !important; } .input-xlarge { width: 280px !important; } .input-xxlarge { width: 530px !important; } .input-large { width: 210px !important; } .input-medium { width: 150px !important; } .form-search .search-query { width: 200px !important; } .form-search { float: right !important; margin-top: 0; } /* Control group restore — !important to beat base mobile rules */ label, .control-label, .control-group label { display: inline !important; font-size: inherit !important; font-weight: inherit !important; text-transform: none !important; letter-spacing: normal !important; margin-bottom: 5px !important; margin-top: 0 !important; opacity: 1 !important; } .control-group { margin-bottom: 10px !important; } .controls { margin-left: 0 !important; } .form-horizontal .control-label { float: left !important; width: 160px !important; text-align: right !important; padding-top: 5px !important; } .form-horizontal .controls { margin-left: 180px !important; } /* File input restore */ input[type="file"] { border: none !important; padding: 0 !important; min-height: auto !important; border-radius: 0 !important; } /* Button group restore */ .btn-group { display: inline-flex; border-radius: 5px; } /* -- Sendy responsive-tables restore -- */ .table-wrapper .pinned { display: block !important; } .table-wrapper .scrollable { overflow: auto !important; } /* -- Table card → horizontal restore -- */ .table thead { display: table-header-group; } .table tbody tr { display: table-row; padding: 0; border-bottom: none; } .table tbody td, .table tbody td[data-label="ID"], .table tbody td[data-label="Quick links"], .table tbody td[data-label="Brands"], .table tbody td[data-label="List"], .table tbody td[data-label="Campaign"], .table tbody td[data-label="Link (URL)"], .table tbody td[data-label="Name"], .table tbody td[data-label="Email"], .table tbody td[data-label="Export"], .table tbody td[data-label="Import"], .table tbody td[data-label="Preview"], .table tbody td[data-label="Use"] { display: table-cell !important; padding: 8px !important; border-top: 1px solid var(--sk-drawer-border) !important; border-bottom: none !important; margin-bottom: 0; font-size: inherit; min-width: auto; } .table tbody td:before { display: none; } .table tbody td:first-child, .table tbody td:first-child[data-label="ID"] { display: table-cell !important; font-size: inherit; font-weight: inherit; border-bottom: none !important; margin-bottom: 0; } /* Quick link buttons restore */ td .btn[title], td a.btn:not(.btn-primary):not(.btn-success):not(.btn-danger):not(.btn-inverse) { border: 1px solid #ddd !important; border-radius: 5px !important; min-height: auto; min-width: auto; padding: 4px 8px !important; } /* Navbar restore */ .navbar-fixed-top .navbar-inner { display: block; } .navbar-fixed-top .brand { max-width: none; font-size: 14px !important; padding: 10px 10px 10px 12px; } .navbar-fixed-top .btn-group.pull-right .btn-inverse { font-size: 13px !important; padding: 5px 10px; } .navbar-fixed-top .btn-group.pull-right .btn-inverse .caret { display: inline-block; } /* Buttons restore */ .btn { min-height: auto; border-radius: 5px; padding: 4px 12px; font-size: 13px; } .btn:active { transform: none; } /* Dropdown restore */ .dropdown-menu { border-radius: 5px; } .dropdown-menu > li > a { padding: 3px 20px; font-size: inherit; min-height: auto; display: block; } .dropdown-menu > li > a:hover { margin: 0; border-radius: 0; } /* Tabs restore */ .nav-tabs, .nav-pills { display: block; gap: 0; } .nav-tabs > li > a, .nav-pills > li > a { border-radius: 5px 5px 0 0 !important; padding: 8px 12px !important; border: inherit !important; } /* Typography restore */ h1, .page-header h1 { font-size: 30px !important; font-weight: inherit; letter-spacing: normal; } h2 { color: inherit; } /* -- Modal restore -- */ .modal { position: fixed !important; top: 10% !important; left: 50% !important; right: auto !important; width: 560px !important; margin-left: -280px !important; max-height: none; } .modal-body { max-height: none; } .modal-footer { text-align: right; } /* -- Inner span restore — report page side-by-side layouts -- */ .span10 .row-fluid > div[class*="span"], .row-fluid .row-fluid > div[class*="span"] { width: auto !important; float: left !important; margin-bottom: 0; } /* Specific Bootstrap 2 inner span widths — must match or exceed the inner span restore specificity (0-3-1) so cascade order wins. */ .span10 .row-fluid > div.span4, .row-fluid .row-fluid > div.span4 { width: 31.91489% !important; } .span10 .row-fluid > div.span6, .row-fluid .row-fluid > div.span6 { width: 48.93617% !important; } .span10 .row-fluid > div.span8, .row-fluid .row-fluid > div.span8 { width: 65.95744% !important; } .span10 .row-fluid > div.span12, .row-fluid .row-fluid > div.span12 { width: 100% !important; float: none !important; } /* -- Footer restore -- */ footer .footer-left { float: left !important; text-align: left; } footer .footer-right { float: right !important; text-align: right; } } /* ========================================================================== DESKTOP — min-width: 980px Full polish. ========================================================================== */ @media (min-width: 980px) { .navbar-fixed-top .brand { max-width: none; font-size: 16px; } .navbar-fixed-top .btn-group .btn { padding: 6px 12px; font-size: 13px; } .navbar-fixed-top .btn-group.pull-right .btn-white { max-width: none; } } /* ========================================================================== VERY SMALL PHONE — max-width: 380px refinements ========================================================================== */ @media (max-width: 380px) { .navbar-fixed-top .brand { max-width: 32vw; font-size: 10px; padding-left: 4px; } .navbar-fixed-top .btn-group .btn { padding: 3px 5px; font-size: 10px; } .sk-table-wrap table { font-size: 12px; } } /* ========================================================================== REDUCED MOTION — respect vestibular disorder preferences ========================================================================== */ /* ========================================================================== GLOBAL BREADCRUMBS — Brand-rooted navigation context ========================================================================== */ .sk-global-breadcrumbs { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--sk-fg-dim); margin: 2px 0 10px; padding: 0; } .sk-global-breadcrumbs a { color: var(--sk-accent); text-decoration: none; } .sk-global-breadcrumbs a:hover { text-decoration: underline; } .sk-global-breadcrumbs .sep { color: var(--sk-fg-dim); opacity: .8; } @media (max-width: 767px) { .sk-global-breadcrumbs { font-size: 11px; margin-bottom: 8px; padding: 0 2px; } /* Hide table headers on mobile - show cards instead */ table thead, .table thead, .plan-table thead, .pay-table thead { display: none !important; } /* Force table to card layout on mobile */ table tbody tr, .table tbody tr, .plan-table tbody tr, .pay-table tbody tr { display: block; padding: 12px 0; border-bottom: 1px solid var(--sk-border); margin-bottom: 8px; } table tbody td, .table tbody td, .plan-table tbody td, .pay-table tbody td { display: flex; padding: 4px 0; } table tbody td:before, .table tbody td:before, .plan-table tbody td:before, .pay-table tbody td:before { content: attr(data-label); width: 90px; flex-shrink: 0; color: var(--sk-fg-muted); font-size: 11px; text-transform: uppercase; } } /* ── Brand cards ──────────────────────────────────────── */ /* Mobile: brand cards — grid layout */ @media (max-width: 767px) { #brands-table tbody tr { display: grid !important; grid-template-columns: 1fr auto auto; grid-template-rows: auto auto; gap: 0 8px; align-items: center; border: 1px solid var(--sk-border, #333) !important; border-radius: 5px; padding: 12px 14px !important; margin-bottom: 10px; } /* Kill Bootstrap 2 stripe/hover on individual TDs — card owns the background */ #brands-table.table-striped tbody tr td, #brands-table.table-striped tbody tr:nth-child(odd) td, #brands-table.table tbody tr:hover td, #brands-table.table tbody tr:hover th { background-color: transparent !important; } #brands-table tbody tr:active { background: rgba(255,255,255,.04); } /* Hide: ID, SMTP, Sending limits, Used */ #brands-table tbody tr td:nth-child(1), #brands-table tbody tr td:nth-child(3), #brands-table tbody tr td:nth-child(5), #brands-table tbody tr td:nth-child(6) { display: none !important; } /* Row 1: Brand name | edit | delete */ #brands-table tbody tr td:nth-child(2) { grid-column: 1; grid-row: 1; font-size: 15px; font-weight: 600; padding: 0 !important; border: none !important; } #brands-table tbody tr td:nth-child(2) a { color: var(--sk-fg, #fff); text-decoration: none; } #brands-table tbody tr td:nth-child(2) img { width: 24px !important; height: 24px !important; border-radius: 4px; margin: -2px 8px 0 0 !important; vertical-align: middle; } #brands-table tbody tr td:nth-child(7) { grid-column: 2; grid-row: 1; display: block !important; padding: 0 !important; border: none !important; text-align: right; } #brands-table tbody tr td:nth-child(8) { grid-column: 3; grid-row: 1; display: block !important; padding: 0 !important; border: none !important; } /* Row 2: Quick links span full width */ #brands-table tbody tr td:nth-child(4) { grid-column: 1 / -1; grid-row: 2; display: flex !important; gap: 6px; flex-wrap: wrap; align-items: center; padding: 8px 0 0 !important; border: none !important; font-size: 12px; color: var(--sk-fg-muted, #999); } #brands-table tbody tr td:nth-child(4) .btn { padding: 5px 8px; border-radius: 4px; font-size: 12px; } } /* Tablet: fix word-wrap and cramped columns */ @media (min-width: 768px) and (max-width: 1199px) { #brands-table td:nth-child(2) { min-width: 160px; } #brands-table td:nth-child(2) a { white-space: nowrap; } /* Quick links + status text — don't break mid-word */ #brands-table td:nth-child(4) { min-width: 200px; white-space: nowrap; } } @media (prefers-reduced-motion: reduce) { /* Kill all transitions and animations globally */ .sk-sidebar-col, div.sk-sidebar-col, .row-fluid .sk-sidebar-col, .row-fluid > .sk-sidebar-col, .container-fluid .row-fluid > .sk-sidebar-col, [class*="span"].sk-sidebar-col { transition: none !important; } #sk-overlay { transition: none !important; } .btn, .btn:active { transition: none !important; transform: none !important; } .navbar-fixed-top .btn-navbar .icon-bar { transition: none !important; } .sk-sidebar-col .sidebar-nav .nav-list > li > a, .sk-drawer-user-nav li a { transition: none !important; } } /* ========================================================================== GLOBAL INPUT CONSISTENCY - Mobile First Applied to ALL inputs EXCEPT checkboxes/radios, selects, textareas across SendyKit ========================================================================== */ html body input:not([type="checkbox"]):not([type="radio"]), html body select, html body textarea, html body .uneditable-input, /* Duplicate input block removed — was overriding the primary input styles above with dark-mode-only values (white text, dark bg) that broke light theme pages. Primary input styles are at line ~700. */ input:not([type="checkbox"]):not([type="radio"]):focus, select:not([type="checkbox"]):not([type="radio"]):focus, textarea:not([type="checkbox"]):not([type="radio"]):focus, .uneditable-input:focus { outline: none !important; border-color: var(--sk-accent, #946f28) !important; box-shadow: 0 0 0 3px rgba(196,162,101,0.15) !important; } input::placeholder { color: var(--sk-fg-dim, #666) !important; opacity: 1 !important; } select { padding-right: 36px !important; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23999' d='M6 8L1 3h10z'/%3E%3C/svg%3E") !important; background-repeat: no-repeat !important; background-position: right 12px center !important; cursor: pointer !important; -webkit-appearance: none !important; appearance: none !important; } textarea { min-height: 100px !important; resize: vertical !important; } /* Collapsible Event Rows */ .event-details-row { display: none; } tr.expanded + .event-details-row { display: table-row; } .event-details-row td { padding: 12px 18px !important; background: var(--sk-bg-surface) !important; } .event-details-row pre { margin: 8px 0 0 !important; padding: 8px !important; background: rgba(0,0,0,0.3) !important; border-radius: 4px !important; overflow-x: auto !important; font-size: 11px !important; } tr[style*="cursor: pointer"] { cursor: pointer !important; } /* Fix Sendy native select dropdowns - wide enough for brand names */ .controls select, .form-horizontal .controls select, .row-fluid .controls select, select.chzn-single, select.input-lg, table .controls select, select { width: 160% !important; max-width: 160% !important; overflow: visible !important; } .controls, .form-horizontal .control-group .controls, .row-fluid [class*="span"] .controls, table .controls, td, th { overflow: visible !important; } /* ────────────────────────────────────────────────────────── Mobile: hide profile footer + SES widget (Spec 99 §3.4, §3.5) Profile → avatar dropdown in top bar handles this SES → not actionable from phone, check Health page ────────────────────────────────────────────────────────── */ @media (max-width: 767px) { .sk-sidebar-profile { display: none !important; } .sk-ses-widget { display: none !important; } } /* ────────────────────────────────────────────────────────── Desktop sidebar width + top bar spacing (Spec 99 UI polish) Sendy default span2 = 16.67% ≈ 190px on 1140px container. We need 200px+ for text not to break. ────────────────────────────────────────────────────────── */ @media (min-width: 1024px) { .container-fluid > .row-fluid > .span2, .row-fluid > .span2 { width: 200px !important; min-width: 200px !important; float: left !important; } .container-fluid > .row-fluid > .span10, .row-fluid > .span10 { margin-left: 210px !important; width: auto !important; float: none !important; } /* Top bar breathing room */ .navbar-fixed-top .btn-group.pull-right { margin-left: 8px; } .navbar-fixed-top .btn-group.pull-right .btn { padding: 4px 12px; } } /* ────────────────────────────────────────────────────────── Brand dropdown — must load AFTER Bootstrap's CSS to win specificity on .dropdown-menu { display: none } ────────────────────────────────────────────────────────── */ .sk-brands-group { position: relative !important; } .sk-brands-group .dropdown-menu { display: none !important; position: absolute !important; top: 100% !important; left: 0 !important; z-index: 9999 !important; min-width: 100% !important; background: #292929 !important; border: 1px solid #444 !important; border-radius: 4px !important; padding: 4px 0 !important; margin: 2px 0 0 !important; box-shadow: 0 6px 12px rgba(0,0,0,.3) !important; list-style: none !important; } .sk-brands-group.open .dropdown-menu { display: block !important; } .sk-brands-group .dropdown-menu li { list-style: none !important; } .sk-brands-group .dropdown-menu li a { display: block !important; padding: 6px 12px !important; color: #dfdfdf !important; text-decoration: none !important; font-size: 13px !important; white-space: nowrap !important; } .sk-brands-group .dropdown-menu li a:hover { background: rgba(255,255,255,.06) !important; color: #fff !important; } /* Prevent sidebar from clipping dropdown */ .sidebar-nav, .sidebar-box, .sidebar-nav.sidebar-box { overflow: visible !important; } /* ── Bottom tab bar (native Sendy pages) ─────────────── */ @media (max-width: 1023px) { .sk-bottom-nav { display: flex; position: fixed; bottom: 0; left: 0; right: 0; z-index: 9990; background: var(--sk-drawer-bg, #1a1a1a); border-top: 1px solid var(--sk-border, #333); padding: 6px 0 max(6px, env(safe-area-inset-bottom)); } .sk-bottom-nav a { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; text-decoration: none; color: var(--sk-fg-dim, #888); font-size: 9px; padding: 4px 0; transition: color .15s; } .sk-bottom-nav a:hover, .sk-bottom-nav a.active { color: #C4A265; } .sk-bottom-nav a i { font-size: 16px; } /* Prevent content from hiding behind bottom nav */ body { padding-bottom: 64px !important; } } @media (min-width: 1024px) { .sk-bottom-nav { display: none !important; } /* At 1024px+, .sk-sidebar-col is NOT added by JS. Bootstrap's native span2/span10 grid works as-is. No CSS overrides needed. */ } /* Sovereign upsell modal (Spec 50 §4.2.1) */ .sk-upsell-overlay{position:fixed;inset:0;background:rgba(0,0,0,.75);z-index:99999;display:none;align-items:center;justify-content:center;padding:16px} .sk-upsell-active{display:flex} .sk-upsell-box{background:var(--sk-bg-surface,#292929);border:2px solid var(--sk-accent,#C4A265);border-radius:12px;padding:32px;max-width:480px;width:100%;text-align:center} .sk-upsell-title{font-size:20px;font-weight:700;color:var(--sk-accent,#C4A265);margin:0 0 12px} .sk-upsell-msg{font-size:14px;color:var(--sk-fg,#e0e0e0);line-height:1.6;margin:0 0 12px} .sk-upsell-feature{font-size:12px;color:var(--sk-fg-muted,#888);margin:0 0 20px} .sk-upsell-cta{display:inline-block;padding:12px 24px;background:var(--sk-accent,#C4A265);color:#000;font-weight:600;font-size:14px;border-radius:6px;text-decoration:none;margin-bottom:12px} .sk-upsell-cta:hover{background:#B08D4E} .sk-upsell-close{display:block;margin:8px auto 0;background:none;border:1px solid var(--sk-border,#404040);color:var(--sk-fg-muted,#888);padding:8px 16px;border-radius:6px;font-size:13px;cursor:pointer} .sk-upsell-close:hover{border-color:var(--sk-fg-muted,#888);color:var(--sk-fg,#e0e0e0)} /* Fix radio button text splitting in narrow columns */ .btn-group[data-toggle="buttons-radio"] .btn, .btn-group[data-toggle="buttons-radio"] a.btn { white-space: nowrap !important; padding: 4px 8px !important; font-size: 12px !important; min-width: auto !important; } /* === BUG FIXES 2026-04-01 === */ /* sendykit-15qx: Reduce drawer section header spacing on mobile */ @media (max-width: 1023px) { .sk-sidebar-col .nav-list .nav-header { padding: 6px 12px 4px !important; margin-top: 4px !important; } .sk-sidebar-col .nav-list > li > a { padding: 10px 12px !important; } } /* sendykit-qvya: Drawer overlay */ .sk-drawer-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.6); z-index: 1039; } body.sk-drawer-open .sk-drawer-overlay { display: block; } /* sendykit-mauq: Search input placeholder color */ input::placeholder, .search-query::placeholder { color: var(--sk-fg-dim, #999) !important; opacity: 1 !important; } /* sendykit-h0gv: Bottom nav active state */ .sk-bottom-nav a.sk-nav-active, .sk-bottom-nav a[data-nav].sk-nav-active { color: var(--sk-accent, #C4A265) !important; } /* sendykit-o69a: Bottom nav z-index above gear/dark-mode */ .sk-bottom-nav { z-index: 1060 !important; } /* Push gear/dark toggle above bottom nav */ #footer-mode, .footer-right { margin-bottom: 60px !important; } /* sendykit-su2n: Allow more brand name space in navbar */ @media (max-width: 767px) { .navbar-fixed-top .brand { max-width: 55vw !important; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } } /* sendykit-njgp: Prevent mid-word breaks in campaign titles on mobile */ .table tbody td a { word-break: break-word !important; overflow-wrap: break-word !important; }