/* ========================================================================== EMITARA CHILD THEME — style.css (FINAL) Drupal 11 + CiviCRM child theme of Tara. Loads after tara/global-styling via weight:9999 in emitara.libraries.yml ========================================================================== */ /* ========================================================================== 1) FONTS — Open Sans (TTF files in themes/custom/emitara/fonts/) Note: woff2 paths are wrong in Tara's preload, use TTF directly ========================================================================== */ @font-face { font-family: "Open Sans"; src: url("../fonts/OpenSans-Regular.ttf") format("truetype"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "Open Sans"; src: url("../fonts/OpenSans-Italic.ttf") format("truetype"); font-weight: 400; font-style: italic; font-display: swap; } @font-face { font-family: "Open Sans"; src: url("../fonts/OpenSans-SemiBold.ttf") format("truetype"); font-weight: 600; font-style: normal; font-display: swap; } @font-face { font-family: "Open Sans"; src: url("../fonts/OpenSans-Bold.ttf") format("truetype"); font-weight: 700; font-style: normal; font-display: swap; } /* ========================================================================== 2) DESIGN TOKENS ========================================================================== */ :root { --emit-beige: #f6debb; --emit-beige-2: #fff8ed; --emit-red: #9b1226; --emit-green: #127475; --emit-green-2: #0c5354; --emit-dark: #020122; --emit-row-alt: rgba(235, 242, 246, 0.5); --r-sm: 6px; --r-md: 20px; --btn-h: 40px; --max-w: 1800px; --ease: 0.2s ease-in-out; } body, p, div, span, a:not(.helpicon), li, td, th, label, blockquote, caption, input, select, textarea, button, h1, h2, h3, h4, h5, h6, .page-title, .crm-page-title { font-family: "Open Sans", Arial, Helvetica, sans-serif !important; } i.fa, i.fas, i.far, i.fal, i.fab, i[class*="fa-"], i.crm-i, .crm-i::before { font-family: "Font Awesome 5 Free", "Font Awesome 5 Pro", "FontAwesome", sans-serif !important; } body { color: var(--emit-dark); font-size: 16px; line-height: 1.6; } *::selection { background: var(--emit-green) !important; color: #fff !important; } *::-moz-selection { background: var(--emit-green) !important; color: #fff !important; } a, .page-civicrm a, .page-civicrm .crm-container a { color: var(--emit-red); transition: color var(--ease); } a:hover, a:focus, .page-civicrm a:hover, .page-civicrm .crm-container a:hover { color: var(--emit-green); } /* .container, .main-wrapper .container, .page-civicrm .container { width: 100%; max-width: none !important; padding-left: 24px !important; padding-right: 24px !important; margin: 0; } */ @media (min-width: 1801px) { .container, .main-wrapper .container, .page-civicrm .container { max-width: var(--max-w) !important; margin-left: auto; margin-right: auto; } } /* ========================================================================== 4) TYPOGRAPHY ========================================================================== */ h1, h1.page-title, .page-title-wrap h1, .block-page-title-block h1, .crm-page-title { font-size: 40px !important; font-weight: 700 !important; line-height: 1.15 !important; color: var(--emit-dark) !important; margin: 0 0 20px !important; } h2, h3, h4, h5, h6 { color: var(--emit-dark); font-weight: 700; } @media (max-width: 950px) { h1, h1.page-title, .crm-page-title { font-size: 28px !important; } } /* ========================================================================== 5) BUTTONS ========================================================================== */ button, .button, .btn, a.button, a.btn, input[type="submit"], input[type="button"], input[type="reset"], input.form-submit, .js-form-submit, .page-civicrm #bootstrap-theme .btn, .page-civicrm #bootstrap-theme .btn-primary, .page-civicrm #bootstrap-theme .btn-default, .page-civicrm .crm-container .btn, .page-civicrm .crm-container .btn-primary, .page-civicrm .crm-container .btn-default { /* min-height: var(--btn-h) !important; height: var(--btn-h) !important; padding: 0 20px !important; border: 0 !important; */ border-radius: var(--r-sm) !important; background: var(--emit-green) !important; color: #fff !important; font-size: 14px !important; font-weight: 700 !important; line-height: var(--btn-h) !important; text-transform: uppercase; text-decoration: none; box-shadow: none !important; transition: background var(--ease); display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; margin-bottom: 10px; } button:hover, .btn:hover, .button:hover, a.button:hover, a.btn:hover, input[type="submit"]:hover, .page-civicrm .crm-container .btn:hover { background: var(--emit-green-2) !important; color: #fff !important; } .page-civicrm .crm-container .btn-group > .btn.dropdown-toggle { padding-left: 10px !important; padding-right: 10px !important; } /* Small buttons (btn-sm) — used inside forms/popups for Add/Copy etc. */ .btn-sm, .btn.btn-sm, .page-civicrm .crm-container .btn-sm, .page-civicrm .crm-container .btn.btn-sm, .page-civicrm .crm-container .af-repeat-add-btn { min-height: 34px !important; height: 34px !important; padding: 0 14px !important; font-size: 12px !important; line-height: 34px !important; } /* Views-header action links (e.g. AirFiles "Add/Replace"). The global .btn rule has its horizontal padding commented out (so it can't squash the small table checkbox/search buttons), so restore it just for these view-header links. NOT scoped to .page-civicrm — these Views pages (e.g. /em-airfiles) are Drupal routes without the page-civicrm body class. .view-header keeps it well-scoped. */ .view-header a.btn, .view-header .btn { padding: 0 20px !important; } .page-civicrm .crm-search-display .form-inline { display: flex !important; flex-wrap: wrap !important; align-items: center !important; gap: 10px !important; margin-bottom: 18px !important; } .page-civicrm .crm-search-display .form-inline > * { margin: 0 !important; } /* Push the right-side buttons group to the right */ .page-civicrm .crm-search-display .form-inline .form-group.pull-right, .page-civicrm .crm-search-display .form-inline div[ng-include] { float: none !important; display: inline-flex !important; gap: 10px !important; margin: 0 0 0 auto !important; padding: 0 !important; } .page-civicrm .crm-search-display .form-inline .btn-group { margin: 0 !important; padding: 0 !important; } .page-civicrm .crm-search-display .form-inline .btn-group a.btn, .page-civicrm .crm-search-display .form-inline .btn-group button.btn { padding-left: 20px !important; padding-right: 20px !important; } /* Gear icon (settings) — positioned top-right of search display area */ .page-civicrm .af-admin-edit-form-link, body.page-civicrm #bootstrap-theme .af-admin-edit-form-link, body.page-civicrm .crm-container .af-admin-edit-form-link, .page-civicrm div.pull-right.btn-group.af-admin-edit-form-link { float: right !important; position: relative !important; /* display: inline-flex !important; */ margin: 0 0 10px 0 !important; z-index: 20 !important; } /* The gear button itself — proper sizing */ .page-civicrm .af-admin-edit-form-link > .btn, .page-civicrm .af-admin-edit-form-link > button, body.page-civicrm #bootstrap-theme .af-admin-edit-form-link > .btn { min-height: 40px !important; height: 40px !important; padding: 0 12px !important; } /* Gear icon (settings dropdown) — fix overlapping content */ .page-civicrm .crm-search-display .crm-search-display-settings, .page-civicrm .crm-search-display button[title*="Settings"], .page-civicrm .crm-search-display .btn-group:last-child, .page-civicrm .crm-search-display .dropdown:last-child { position: relative !important; z-index: 20 !important; } .page-civicrm .crm-search-display-table, .page-civicrm .table-responsive, .page-civicrm .crm-container .table-responsive { width: 100%; max-width: var(--max-w); margin: 0 auto; } @media (min-width: 1380px) { .page-civicrm .crm-search-display-table, .page-civicrm .table-responsive { overflow-x: visible !important; } .page-civicrm .crm-search-display-table table, .page-civicrm table.table { width: 100% !important; table-layout: fixed; } } @media (max-width: 1379px) { .page-civicrm .crm-search-display-table, .page-civicrm .table-responsive { overflow-x: auto !important; overflow-y: visible !important; } .page-civicrm .crm-search-display-table table, .page-civicrm table.table { min-width: 1200px !important; table-layout: auto; } } .page-civicrm .crm-search-display-table table, .page-civicrm table.table { margin: 0 auto; border-collapse: collapse; border-spacing: 0; border: 0 !important; box-shadow: none !important; } table thead th, .page-civicrm table.table thead th, .page-civicrm .crm-search-display-table table thead th { background: var(--emit-beige) !important; color: var(--emit-dark) !important; font-size: 12px !important; font-weight: 700 !important; text-transform: uppercase; padding: 12px 10px !important; border: 0 !important; vertical-align: middle; } table tbody tr, .page-civicrm table.table tbody tr { background: #fff !important; } table tbody tr:nth-child(even), .page-civicrm table.table tbody tr:nth-child(even) { background: var(--emit-row-alt) !important; } table tbody td, .page-civicrm table.table tbody td { background: transparent !important; color: var(--emit-dark) !important; font-size: 12px !important; line-height: 1.45 !important; padding: 12px 10px !important; border-top: 0 !important; border-left: 0 !important; border-right: 0 !important; border-bottom: 1px solid rgba(155, 18, 38, 0.12) !important; vertical-align: top; word-wrap: break-word; } /* ========================================================================== 13) TABLE FIRST COLUMN — select/checkbox controls Verified class: button.btn.btn-secondary-outline (NOT btn-default) No green bg, black border, aligned to bottom of header ========================================================================== */ .page-civicrm th.crm-search-result-select, .page-civicrm td.crm-search-result-select { width: 44px !important; min-width: 44px !important; max-width: 44px !important; padding: 2px 2px !important; text-align: center !important; vertical-align: bottom !important; } .page-civicrm table.table thead th.crm-search-result-select { background: var(--emit-beige) !important; vertical-align: bottom !important; } .page-civicrm table.table tbody td.crm-search-result-select { background: transparent !important; } .page-civicrm .crm-search-result-select .btn-group, .page-civicrm th.crm-search-result-select .btn-group { display: inline-flex !important; align-items: center !important; justify-content: center !important; height: 24px !important; margin: 0 !important; padding: 0 !important; background: transparent !important; } /* Override green button rule for checkbox controls — transparent bg, #000 border MUST use #bootstrap-theme to beat the global button rule that uses ID selector */ .page-civicrm #bootstrap-theme .crm-search-result-select .btn-group > .btn, .page-civicrm #bootstrap-theme .crm-search-result-select .btn-group > button, .page-civicrm #bootstrap-theme .crm-search-result-select button.btn-secondary-outline, .page-civicrm #bootstrap-theme .crm-search-result-select button.btn-default, body.page-civicrm #bootstrap-theme .crm-search-result-select .btn, body.page-civicrm #bootstrap-theme .crm-search-result-select button, .page-civicrm th.crm-search-result-select .btn-group > .btn, .page-civicrm th.crm-search-result-select .btn-group > button, .page-civicrm td.crm-search-result-select .btn-group > .btn, .page-civicrm td.crm-search-result-select .btn-group > button, body.page-civicrm .crm-container .crm-search-result-select .btn, body.page-civicrm .crm-container .crm-search-result-select button { background: transparent !important; border: 1px solid #000 !important; border-radius: 3px !important; color: var(--emit-dark) !important; min-height: 24px !important; height: 24px !important; line-height: 22px !important; padding: 0 3px !important; font-size: 11px !important; font-weight: 400 !important; box-shadow: none !important; text-transform: none !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; } .page-civicrm .crm-search-result-select button:hover, body.page-civicrm .crm-container .crm-search-result-select .btn:hover { background: rgba(0, 0, 0, 0.05) !important; color: var(--emit-dark) !important; } .page-civicrm .crm-search-result-select .btn-group > button:first-child, .page-civicrm .crm-search-result-select .btn-group > .btn:first-child { width: 22px !important; flex: 0 0 22px !important; border-top-right-radius: 0 !important; border-bottom-right-radius: 0 !important; border-right: 0 !important; } .page-civicrm .crm-search-result-select .btn-group > .dropdown-toggle { width: 14px !important; flex: 0 0 14px !important; border-top-left-radius: 0 !important; border-bottom-left-radius: 0 !important; padding: 0 !important; } /* Also align the sorting header cells to bottom */ .page-civicrm table.table thead th { vertical-align: bottom !important; } /* Sorting / column config buttons in table header — transparent bg, black border */ .page-civicrm #bootstrap-theme table thead th .btn, .page-civicrm #bootstrap-theme table thead th button, .page-civicrm #bootstrap-theme table thead th .btn-default, .page-civicrm #bootstrap-theme table thead th .btn-xs, .page-civicrm #bootstrap-theme table thead th .dropdown-toggle, body.page-civicrm .crm-container table thead th .btn, body.page-civicrm .crm-container table thead th button { background: transparent !important; border: 1px solid #000 !important; border-radius: 3px !important; color: #000 !important; min-height: 24px !important; height: 24px !important; line-height: 22px !important; padding: 0 4px !important; font-size: 11px !important; box-shadow: none !important; } .page-civicrm #bootstrap-theme table thead th .btn:hover, body.page-civicrm .crm-container table thead th .btn:hover { background: rgba(0, 0, 0, 0.08) !important; color: #000 !important; } /* Icons inside sorting buttons — black */ .page-civicrm table thead th .btn i, .page-civicrm table thead th .btn .crm-i, .page-civicrm table thead th .btn .fa, .page-civicrm table thead th .caret { color: #000 !important; } /* Table row action buttons (right side of each row) — dropdown z-index fix */ .page-civicrm table tbody td .btn-group { position: relative !important; } /* When open: the entire btn-group must be above ALL other rows */ .page-civicrm table tbody td .btn-group.open, .page-civicrm #bootstrap-theme table td .btn-group.open { z-index: 9000 !important; } .page-civicrm table tbody td .btn-group.open > .dropdown-menu, .page-civicrm #bootstrap-theme table td .btn-group.open > .dropdown-menu, .page-civicrm .crm-container table td .btn-group.open > .dropdown-menu { z-index: 9001 !important; position: absolute !important; display: block !important; } /* Also the entire row must be above other rows when dropdown is open */ .page-civicrm table tbody tr:has(.btn-group.open) { position: relative !important; z-index: 9000 !important; } .page-civicrm table tbody td .btn-group .dropdown-menu { right: 0 !important; left: auto !important; min-width: 200px !important; background: #fff !important; border: 1px solid rgba(2, 1, 34, 0.12) !important; border-radius: 8px !important; box-shadow: 0 8px 20px rgba(2, 1, 34, 0.12) !important; padding: 6px 0 !important; } .page-civicrm table tbody td .btn-group .dropdown-menu > li > a { padding: 8px 16px !important; color: var(--emit-dark) !important; font-size: 13px !important; background: #fff !important; min-height: 0 !important; height: auto !important; line-height: 1.4 !important; text-transform: none !important; } .page-civicrm table tbody td .btn-group .dropdown-menu > li > a:hover { background: var(--emit-beige-2) !important; color: var(--emit-green) !important; } /* ========================================================================== Z-INDEX LADDER (highest at top) 10200 CRM / Drupal notifications (#crm-notification-container) 10100 File-manager Bootstrap modal (.modal) [section 23] 10090 File-manager modal backdrop (.modal-backdrop)[section 23] 10080 CKEditor 5 dialog (.ck-dialog) [section 23] 10070 CKEditor 5 balloons, dialog overlay [section 23] 10060 Dropdowns/select2 INSIDE a CRM dialog 10050 CRM dialog (.ui-dialog) 10040 CRM dialog backdrop (.ui-widget-overlay) 10020 Primary nav submenu 10000 Drupal/Bootstrap inline messages 9001 Table row dropdown menu (open state) 9000 Table row action btn-group / parent row (open state) 1000 AngularJS .ng-scope dropdown (open state) 20 Page-level form controls (form-builder gear, search-display) 1 Submit-buttons stacking context ========================================================================== */ /* 14a. Dialog container — visual styling only, sizing left to CiviCRM standard */ .page-civicrm .ui-dialog, .crm-container .ui-dialog, body .ui-dialog { position: fixed !important; z-index: 10050 !important; border: 0 !important; border-radius: 12px !important; background: #fff !important; box-shadow: 0 18px 40px rgba(2, 1, 34, 0.18) !important; } .ui-widget-overlay, body .ui-widget-overlay { position: fixed !important; top: 0 !important; left: 0 !important; width: 100% !important; height: 100% !important; z-index: 10040 !important; } /* 14b. Titlebar — flex row so buttons sit side-by-side with consistent spacing. Using flex + position:static on the buttons (below) makes CiviCRM's inline style="right:2em"/"right:3.8em" inert (right only affects positioned elements), so no cache/cascade state can crowd the buttons again. */ .page-civicrm .ui-dialog .ui-dialog-titlebar, .crm-container .ui-dialog-titlebar, body .ui-dialog .ui-dialog-titlebar { border: 0 !important; background: var(--emit-beige) !important; color: var(--emit-dark) !important; position: relative !important; display: flex !important; align-items: center !important; gap: 8px !important; } /* jQuery UI clearfix pseudo-elements would become stray flex items — kill them */ .page-civicrm .ui-dialog .ui-dialog-titlebar::before, .page-civicrm .ui-dialog .ui-dialog-titlebar::after, body .ui-dialog .ui-dialog-titlebar::before, body .ui-dialog .ui-dialog-titlebar::after { display: none !important; } .page-civicrm .ui-dialog .ui-dialog-title { color: var(--emit-dark) !important; font-size: 18px !important; font-weight: 700 !important; margin: 0 auto 0 0 !important; /* auto-right margin pushes the buttons to the right edge */ padding: 0 !important; line-height: 60px !important; } /* 14c. Titlebar buttons (close, resize, print). position:relative (NOT static) keeps each button as the positioned ancestor for jQuery UI's absolutely-positioned icon span (.ui-button-icon, left:50%/top:50%), so the icon centers INSIDE the button. right:auto !important still neutralizes CiviCRM's inline style="right:3.8em" (important author beats non-important inline), so flex layout + the 8px gap still control position/spacing. */ .page-civicrm .ui-dialog .ui-dialog-titlebar-close, .page-civicrm .ui-dialog .crm-dialog-titlebar-resize, .page-civicrm .ui-dialog .crm-dialog-titlebar-print, body .ui-dialog .ui-dialog-titlebar-close { position: relative !important; top: auto !important; right: auto !important; left: auto !important; bottom: auto !important; transform: none !important; flex: 0 0 40px !important; width: 40px !important; height: 40px !important; min-height: 40px !important; padding: 0 !important; border: 0 !important; border-radius: 8px !important; background: var(--emit-green) !important; color: #fff !important; box-shadow: none !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; } /* Visual order: print | fullscreen | close. The close rule MUST stay first — resize & print ALSO carry .ui-dialog-titlebar-close, so listing close first lets the more specific resize/print rules win the source-order tiebreak. */ .page-civicrm .ui-dialog .ui-dialog-titlebar-close { order: 3 !important; } .page-civicrm .ui-dialog .crm-dialog-titlebar-resize { order: 2 !important; } .page-civicrm .ui-dialog .crm-dialog-titlebar-print { order: 1 !important; } /* 14d. Dialog content — standard CiviCRM sizing, just add padding */ .page-civicrm .ui-dialog .ui-dialog-content, body .ui-dialog .ui-dialog-content { padding: 20px 24px !important; background: #fff !important; } /* 14e. Dropdowns INSIDE popups — z-index fix */ .ui-dialog .select2-container, .ui-dialog .select2-drop, .ui-dialog .select2-drop-active, .ui-dialog .crm-container .select2-container, body .select2-drop { z-index: 10060 !important; } .select2-drop, .select2-drop-active, body .select2-drop, body .select2-drop-active { z-index: 10060 !important; } /* Also fix CiviCRM's own dropdown menus inside popups */ .ui-dialog .dropdown-menu, .ui-dialog .crm-container .dropdown-menu { z-index: 10060 !important; } /* 14f. Buttons inside popups */ .page-civicrm .ui-dialog .ui-dialog-content .crm-submit-buttons, .page-civicrm .ui-dialog .ui-dialog-content .form-actions { padding-top: 12px !important; margin-top: 12px !important; } /* 14e. FONT AWESOME ICONS IN jQuery UI DIALOGS Problem: .ui-icon applies background-image sprites from jquery-ui.min.css which hides Font Awesome ::before pseudo-elements (fa-times etc.) Fix: When .ui-icon also has a fa-* class, kill the sprite and restore FA */ .ui-dialog .ui-icon[class*="fa-"], .ui-dialog .ui-button-icon[class*="fa-"], .ui-dialog .ui-icon.fa-times, .ui-dialog .ui-icon.fa-window-maximize, .ui-dialog .ui-icon.fa-window-restore, .ui-dialog .ui-icon.fa-print, .ui-button .ui-icon[class*="fa-"], .ui-widget-header .ui-icon[class*="fa-"], body .ui-icon[class*="fa-"] { background-image: none !important; background-color: transparent !important; text-indent: 0 !important; overflow: visible !important; /* Restore Font Awesome rendering */ font-family: "Font Awesome 5 Free", "Font Awesome 5 Pro", "FontAwesome", sans-serif !important; font-weight: 900 !important; font-size: 16px !important; color: #fff !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; width: auto !important; height: auto !important; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* Also fix the generic .ui-icon-closethick (jQuery UI's own close icon class) */ .ui-dialog .ui-dialog-titlebar-close .ui-icon-closethick, .ui-dialog .ui-dialog-titlebar-close .ui-button-icon { background-image: none !important; text-indent: 0 !important; overflow: visible !important; font-family: "Font Awesome 5 Free", "FontAwesome", sans-serif !important; font-weight: 900 !important; font-size: 16px !important; color: #fff !important; } /* If no fa-* class, provide fallback X via content */ .ui-dialog .ui-dialog-titlebar-close .ui-icon-closethick::before { content: "\f00d"; /* fa-times */ font-family: "Font Awesome 5 Free", "FontAwesome", sans-serif !important; font-weight: 900; } /* ========================================================================== 15) MISC ========================================================================== */ .message summary, .page-civicrm #bootstrap-theme .alert-info { background-color: var(--emit-beige-2); color: var(--emit-dark); } li:has(a[href*="/civicrm/import/contact/xcm"]) { display: none !important; } /* Action-link buttons — need proper margin so they don't overlap content */ .page-civicrm .crm-container .action-link, .page-civicrm .action-link, .crm-container .action-link { height: auto !important; min-height: var(--btn-h) !important; margin-bottom: 14px !important; display: block !important; position: relative !important; z-index: 1 !important; clear: both !important; } /* ========================================================================== 16) MOBILE MENU — ≤950px Work with Tara's built-in mobile menu toggle system. Just adjust colors and sizing for our branding. ========================================================================== */ @media (max-width: 950px) { /* Header: let Tara handle stacking */ .header-container .header-right { margin-left: 0 !important; padding: 0 !important; border-radius: 0 !important; } /* Menu items: reduce size to fit */ nav#block-emitara-emtopmenu ul.menu > li, nav#block-emitara-myemit ul.menu > li, .primary-menu-wrapper nav ul.menu > li { min-width: 0 !important; height: auto !important; flex: 0 0 auto !important; } nav#block-emitara-emtopmenu ul.menu > li > a, nav#block-emitara-emtopmenu ul.menu > li > span, nav#block-emitara-myemit ul.menu > li > a, .primary-menu-wrapper nav ul.menu > li > a, .primary-menu-wrapper nav ul.menu > li > span { font-size: 11px !important; padding: 6px 8px !important; } nav#block-emitara-emtopmenu ul.menu > li > a::before, nav#block-emitara-myemit ul.menu > li > a::before, .primary-menu-wrapper nav ul.menu > li > a::before, .primary-menu-wrapper nav ul.menu > li > span::before { font-size: 16px !important; } /* Nav bar: smaller height */ nav#block-emitara-emtopmenu, nav#block-emitara-myemit, .primary-menu-wrapper nav.block-menu { min-height: 60px !important; } nav#block-emitara-emtopmenu ul.menu, nav#block-emitara-myemit ul.menu, .primary-menu-wrapper nav ul.menu { height: auto !important; flex-wrap: wrap !important; justify-content: center !important; gap: 2px !important; } /* Chevron smaller on mobile */ nav#block-emitara-emtopmenu ul.menu > li.menu-item-has-children > a::after, .primary-menu-wrapper nav ul.menu > li.menu-item-has-children > a::after { font-size: 6px !important; } } /* CRM notifications — sit at the very top of the stack so important messages remain visible even with a dialog open. 10200 gives ~100 units of headroom above the modal layer for future intermediates. */ #crm-notification-container, body #crm-notification-container, .page-civicrm #crm-notification-container { z-index: 10200 !important; } /* Drupal messages also need to be visible */ .page-civicrm .messages, .page-civicrm .alert, .page-civicrm #bootstrap-theme .alert, .page-civicrm .crm-container .alert, body .messages--status, body .messages--warning, body .messages--error, body .messages, body .message { position: relative !important; z-index: 10000 !important; } .mit2-hero__text { max-width: 900px; margin: 20px auto 40px; padding: 0; background: transparent; } .mit2-hero__actions { display: grid !important; grid-template-columns: repeat(3, 1fr) !important; gap: 20px !important; margin: 0 auto !important; padding: 0 !important; font-size: 0 !important; } .mit2-hero__actions br { display: none !important; } /* ALL buttons as icon cards */ .mit2-hero__actions button, .mit2-hero__actions .button--primary, .mit2-hero__actions .button--secondary { display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; width: 100% !important; min-height: 180px !important; height: auto !important; padding: 30px 20px 24px !important; border-radius: 16px !important; font-size: 15px !important; font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: 0.04em !important; cursor: pointer !important; transition: transform 0.2s, box-shadow 0.2s !important; border: 1px solid rgba(18, 116, 117, 0.15) !important; line-height: 1.3 !important; box-sizing: border-box !important; background: #fff !important; color: var(--emit-green) !important; box-shadow: 0 1px 4px rgba(2, 1, 34, 0.04) !important; gap: 0 !important; flex: none !important; } .mit2-hero__actions button:hover { transform: translateY(-3px) !important; box-shadow: 0 8px 20px rgba(18, 116, 117, 0.12) !important; } /* Icon circle */ .mit2-hero__actions button::before { display: flex !important; align-items: center !important; justify-content: center !important; width: 80px !important; height: 80px !important; border-radius: 50% !important; background: rgba(18, 116, 117, 0.08) !important; font-family: "Font Awesome 5 Free", "FontAwesome", sans-serif !important; font-weight: 900 !important; font-size: 32px !important; color: var(--emit-green) !important; margin-bottom: 16px !important; flex-shrink: 0 !important; line-height: 1 !important; -webkit-font-smoothing: antialiased; } /* Icon assignments based on onclick href */ .mit2-hero__actions button[onclick*="events-dashboard"]::before, .mit2-hero__actions button[onclick*="em-events"]::before { content: "\f073"; } /* fa-calendar */ .mit2-hero__actions button[onclick*="event/new"]::before { content: "\f271"; } /* fa-calendar-plus */ .mit2-hero__actions button[onclick*="suppliers"]::before { content: "\f2b5"; } /* fa-handshake */ .mit2-hero__actions button[onclick*="contact/add"]::before, .mit2-hero__actions button[onclick*="/supplier'"]::before { content: "\f234"; } /* fa-user-plus */ .mit2-hero__actions button[onclick*="participants"]::before, .mit2-hero__actions button[onclick*="event-participants"]::before { content: "\f0c0"; } /* fa-users */ .mit2-hero__actions button[onclick*="quick-participant"]::before { content: "\f234"; } /* fa-user-plus */ @media (max-width: 768px) { .mit2-hero__actions { grid-template-columns: repeat(2, 1fr) !important; gap: 14px !important; } .mit2-hero__actions button { min-height: 140px !important; padding: 20px 14px 18px !important; } .mit2-hero__actions button::before { width: 60px !important; height: 60px !important; font-size: 24px !important; margin-bottom: 12px !important; } } @media (max-width: 480px) { .mit2-hero__actions { grid-template-columns: 1fr !important; } } /* 18) DRUPAL MENUS — style like CiviCRM menu with beige bg + icons Targets: nav#block-emitara-emtopmenu (EM Top Menu) nav#block-emitara-myemit (My EMIT) .primary-menu-wrapper nav ========================================================================== */ /* Container: beige bar matching CiviCRM menu style */ .primary-menu-wrapper, .header-right .primary-menu-wrapper, .header-right { width: 100% !important; flex: 1 1 auto !important; } /* Header container needs to be flex row with logo + menu — NO padding, NO gap */ .header-container { display: flex !important; flex-direction: row !important; align-items: stretch !important; width: 100% !important; padding: 0 !important; gap: 0 !important; margin: 0 !important; } .header-container .site-branding-region, .header-container .site-branding { flex: 0 0 auto !important; /* margin-top: 10px !important; */ } /* Beige bg on header-right — small white gap to logo via margin-left, beige to right edge. 30px margin + 30px padding-left is enough visual breathing room without eating so much space that menu items shrink at medium-wide viewports (the old 150+150=300px gap pinched items below the container-query threshold between ~1500-1700px viewports). */ .header-container .header-right { flex: 1 1 auto !important; margin-left: 30px !important; /* small white gap between logo and beige */ margin-right: 0 !important; padding: 0 30px 12px 30px !important; /* 30px left inset, 30px right */ background: var(--emit-beige) !important; border-bottom-left-radius: var(--r-md) !important; } @media (max-width: 950px) { .header-container .header-right { margin-left: 0 !important; padding: 0 !important; border-radius: 0 !important; } } /* Below 1450px, drop the white gap entirely and use 10px padding-left so the first menu item ("Dashboard") still has a small breathing room from the beige left edge. */ @media (max-width: 1450px) { .header-container .header-right { margin-left: 0 !important; padding-left: 10px !important; } } /* === Responsive menu layout === Adapts to ANY number of items (Home/Login on logged-out page vs ~10 items for an event administrator) without hard-coded viewport breakpoints: - justify-content: center keeps few items centered in the beige area - gap: 20px gives consistent breathing room between items - min-width: 0 + flex: 0 1 auto lets items shrink uniformly when crowded, so they fit instead of being cut off - max-width: 140px prevents items growing absurdly wide when very few - container-type on the LI plus @container queries below shrinks fonts ONLY when the item itself becomes narrow (i.e. lots of items competing for space) — not just because the viewport happens to be narrow */ nav#block-emitara-emtopmenu ul.menu, nav#block-emitara-myemit ul.menu, .primary-menu-wrapper nav ul.menu { justify-content: center !important; flex-wrap: nowrap !important; gap: 20px !important; } nav#block-emitara-emtopmenu ul.menu > li, nav#block-emitara-myemit ul.menu > li, .primary-menu-wrapper nav ul.menu > li { container-type: inline-size !important; flex: 1 1 0 !important; min-width: 0 !important; max-width: 140px !important; } /* Center icon + text inside each menu item. flex: 1 1 0 on the LI grows it to a uniform width, but the inner / is content-width by default and would sit to one side. width:100% + flex column centers everything under the icon regardless of how wide the LI ends up. */ nav#block-emitara-emtopmenu ul.menu > li > a, nav#block-emitara-emtopmenu ul.menu > li > span, nav#block-emitara-myemit ul.menu > li > a, nav#block-emitara-myemit ul.menu > li > span, .primary-menu-wrapper nav ul.menu > li > a, .primary-menu-wrapper nav ul.menu > li > span { display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; text-align: center !important; width: 100% !important; } /* Below 90px wide item: text down to 10px, icon to 18px. Conservative threshold — only kicks in when items are genuinely too narrow for the default font sizes, so wide-viewport states never accidentally trigger shrinking. */ @container (max-width: 90px) { nav#block-emitara-emtopmenu ul.menu > li > a, nav#block-emitara-emtopmenu ul.menu > li > span, nav#block-emitara-myemit ul.menu > li > a, nav#block-emitara-myemit ul.menu > li > span, .primary-menu-wrapper nav ul.menu > li > a, .primary-menu-wrapper nav ul.menu > li > span { font-size: 10px !important; } nav#block-emitara-emtopmenu ul.menu > li > a::before, nav#block-emitara-emtopmenu ul.menu > li > span::before, nav#block-emitara-myemit ul.menu > li > a::before, nav#block-emitara-myemit ul.menu > li > span::before, .primary-menu-wrapper nav ul.menu > li > a::before, .primary-menu-wrapper nav ul.menu > li > span::before { font-size: 18px !important; } } /* Make header .container full-width so the beige bar extends to the right edge of the viewport. The Bootstrap default .container caps at ~1140-1320px depending on breakpoint, which leaves white space on the right of the beige. Scoped to
so other page content containers are unaffected. */ header .container, header#header .container { max-width: 100% !important; width: 100% !important; padding-left: 0 !important; padding-right: 0 !important; } /* Icons via ::before — assign per menu item (both and ) */ nav#block-emitara-emtopmenu ul.menu > li > a::before, nav#block-emitara-emtopmenu ul.menu > li > span::before, nav#block-emitara-myemit ul.menu > li > a::before, nav#block-emitara-myemit ul.menu > li > span::before, .primary-menu-wrapper nav ul.menu > li > a::before, .primary-menu-wrapper nav ul.menu > li > span::before { font-family: "Font Awesome 5 Free", "FontAwesome", sans-serif !important; font-weight: 900; display: flex; flex-direction: column; align-items: center; /* font-size: 22px !important; color: var(--emit-green) !important; line-height: 1 !important; margin: 0 !important; */ } /* Default icon for all items */ nav#block-emitara-emtopmenu ul.menu > li > a::before { content: "\f0c9"; } /* fa-bars */ nav#block-emitara-myemit ul.menu > li > a::before { content: "\f007"; } /* fa-user */ .primary-menu-wrapper nav ul.menu > li > a::before { content: "\f0c9"; } /* fa-bars (fallback) */ /* Default icon for span items (like Create Form) */ nav#block-emitara-emtopmenu ul.menu > li > span::before, nav#block-emitara-myemit ul.menu > li > span::before, .primary-menu-wrapper nav ul.menu > li > span::before { content: "\f15c"; } /* fa-file-alt */ /* Specific icons by link href or text */ nav ul.menu > li > a[href*="event/new"]::before, nav ul.menu > li > a[data-drupal-link-system-path*="event/new"]::before { content: "\f271" !important; } /* fa-calendar-plus */ nav ul.menu > li > a[href*="events-dashboard"]::before, nav ul.menu > li > a[href*="em-events-dashboard"]::before, nav ul.menu > li > a[data-drupal-link-system-path*="em-events-dashboard"]::before { content: "\f073" !important; } /* fa-calendar */ nav ul.menu > li > a[href*="messages"]::before, nav ul.menu > li > a[data-drupal-link-system-path*="messages"]::before { content: "\f0e0" !important; } /* fa-envelope */ nav ul.menu > li > a[href*="event_announcements"]::before, nav ul.menu > li > a[data-drupal-link-system-path*="event_announcements"]::before { content: "\f0a1" !important; } /* fa-bullhorn */ nav ul.menu > li > a[href*="user/edit"]::before, nav ul.menu > li > a[data-drupal-link-system-path*="user/edit"]::before { content: "\f013" !important; } /* fa-cog */ nav ul.menu > li > a[href*="participant"]::before, nav ul.menu > li > a[data-drupal-link-system-path*="participant"]::before { content: "\f0c0" !important; } /* fa-users */ nav ul.menu > li > a[href*="supplier"]::before, nav ul.menu > li > a[data-drupal-link-system-path*="supplier"]::before { content: "\f1b3" !important; } /* fa-cubes */ nav ul.menu > li > a[href*="willcommen"]::before, nav ul.menu > li > a[data-drupal-link-system-path*="willcommen"]::before { content: "\f015" !important; } /* fa-home */ nav ul.menu > li > a[href*="afform"]::before, nav ul.menu > li > a[href*="create-form"]::before, nav ul.menu > li > a[data-drupal-link-system-path*="afform"]::before { content: "\f15c" !important; } /* fa-file-alt */ /* Home — front page (logged-out menu) */ nav ul.menu > li > a[data-drupal-link-system-path=""]::before { content: "\f015" !important; } /* fa-home */ /* Login */ nav ul.menu > li > a[href*="user/login"]::before, nav ul.menu > li > a[data-drupal-link-system-path*="user/login"]::before { content: "\f2f6" !important; } /* fa-sign-in-alt */ /* Logout */ nav ul.menu > li > a[href*="user/logout"]::before, nav ul.menu > li > a[data-drupal-link-system-path*="user/logout"]::before { content: "\f2f5" !important; } /* fa-sign-out-alt */ /* Account */ nav ul.menu > li > a[href*="account"]::before, nav ul.menu > li > a[data-drupal-link-system-path*="account"]::before { content: "\f007" !important; } /* fa-user */ /* Events — client-dashboard */ nav ul.menu > li > a[href*="client-dashboard"]::before, nav ul.menu > li > a[data-drupal-link-system-path*="client-dashboard"]::before { content: "\f073" !important; } /* fa-calendar */ /* Messages — pmessage */ nav ul.menu > li > a[href*="pmessage"]::before, nav ul.menu > li > a[data-drupal-link-system-path*="pmessage"]::before { content: "\f0e0" !important; } /* fa-envelope */ /* Settings — participant-dashboard */ nav ul.menu > li > a[href*="participant-dashboard"]::before, nav ul.menu > li > a[data-drupal-link-system-path*="participant-dashboard"]::before { content: "\f013" !important; } /* fa-cog */ /* CiviCRM — only the main /civicrm link, not sub-paths */ nav ul.menu > li > a[href$="/civicrm"]::before, nav ul.menu > li > a[data-drupal-link-system-path="civicrm"]::before { content: "\f085" !important; } /* fa-cogs */ /* Home — first menu item in each nav block (overrides civicrm match for admin home) */ nav#block-emitara-eatopmenu ul.menu > li:first-child > a::before, nav#block-emitara-clientmenu ul.menu > li:first-child > a::before, nav#block-emitara-mainnavigation ul.menu > li:first-child > a::before, nav#block-emitara-emtopmenu ul.menu > li:first-child > a::before, nav#block-emitara-myemit ul.menu > li:first-child > a::before { content: "\f015" !important; } /* fa-home */ /* Drupal menu submenus. NOTE: this block is intentionally KEPT commented for reference until someone verifies whether parent Tara theme styles the dropdowns adequately. No active submenu rules exist in this file, so removing this block is only safe once submenu appearance/hover-to-show has been confirmed working without it. */ /* nav#block-emitara-emtopmenu ul.submenu, nav#block-emitara-myemit ul.submenu, .primary-menu-wrapper nav ul.submenu, nav#block-emitara-emtopmenu ul.menu ul, .primary-menu-wrapper nav ul.menu ul { position: absolute !important; top: 100% !important; left: 50% !important; transform: translateX(-50%) !important; min-width: 180px !important; width: max-content !important; background: #fff !important; border: 1px solid rgba(2,1,34,.08) !important; border-radius: 10px !important; box-shadow: 0 10px 24px rgba(2,1,34,.10) !important; padding: 8px 0 !important; z-index: 10020 !important; display: none !important; flex-direction: column !important; height: auto !important; } nav#block-emitara-emtopmenu ul.menu > li:hover > ul, nav#block-emitara-myemit ul.menu > li:hover > ul, .primary-menu-wrapper nav ul.menu > li:hover > ul { display: flex !important; } nav#block-emitara-emtopmenu ul.menu ul li, .primary-menu-wrapper nav ul.menu ul li { display: block !important; width: 100% !important; height: auto !important; min-height: 0 !important; flex: none !important; } nav#block-emitara-emtopmenu ul.menu ul a, .primary-menu-wrapper nav ul.menu ul a { display: block !important; padding: 9px 18px !important; font-size: 13px !important; color: var(--emit-dark) !important; text-transform: none !important; background: #fff !important; white-space: nowrap !important; min-height: 0 !important; height: auto !important; flex-direction: row !important; } nav#block-emitara-emtopmenu ul.menu ul a::before, .primary-menu-wrapper nav ul.menu ul a::before { display: none !important; } nav#block-emitara-emtopmenu ul.menu ul a:hover, .primary-menu-wrapper nav ul.menu ul a:hover { background: var(--emit-beige-2) !important; color: var(--emit-green) !important; } */ /* Drupal menu + counter badges (e.g. "Messages 2/4") */ /* The is flex-column (icon above text). But "Messages 2/4" has /* Messages link — CSS-only fix to get "Messages 2/4" on ONE line. Problem: flex-direction:column makes each text node a separate flex item. Fix: use display:block instead, so text flows inline naturally. ::before stays block (icon on its own line). */ nav#block-emitara-emtopmenu ul.menu > li > a[href*="/messages"], nav#block-emitara-emtopmenu ul.menu > li > a[data-drupal-link-system-path="messages"], nav#block-emitara-myemit ul.menu > li > a[href*="/messages"], .primary-menu-wrapper nav ul.menu > li > a[href*="/messages"] { display: block !important; text-align: center !important; flex-direction: unset !important; line-height: 1.3 !important; white-space: nowrap !important; } nav#block-emitara-emtopmenu ul.menu > li > a[href*="/messages"]::before, nav#block-emitara-myemit ul.menu > li > a[href*="/messages"]::before, .primary-menu-wrapper nav ul.menu > li > a[href*="/messages"]::before { display: block !important; text-align: center !important; margin-bottom: 3px !important; } nav#block-emitara-emtopmenu ul.menu > li > a .pm-badge-unread, nav#block-emitara-emtopmenu ul.menu > li > a .pm-badge-total, nav#block-emitara-myemit ul.menu > li > a .pm-badge-unread, nav#block-emitara-myemit ul.menu > li > a .pm-badge-total, .primary-menu-wrapper nav ul.menu > li > a .pm-badge-unread, .primary-menu-wrapper nav ul.menu > li > a .pm-badge-total { display: inline !important; font-size: inherit !important; background: transparent !important; color: inherit !important; padding: 0 !important; margin: 0 !important; } nav ul.menu > li > a .badge, nav ul.menu > li > a .counter { display: inline !important; background: transparent !important; padding: 0 !important; margin: 0 !important; } /* Submenu indicator — replace "+" with chevron. The "+" comes from Tara theme (via ::after on li or a, or expand-sub element). Kill ALL sources and add chevron on li::after. */ /* Hide any expand-sub buttons/spans Tara injects */ nav#block-emitara-emtopmenu .expand-sub, nav#block-emitara-myemit .expand-sub, .primary-menu-wrapper .expand-sub, nav#block-emitara-emtopmenu .sf-sub-indicator, .primary-menu-wrapper .sf-sub-indicator, nav#block-emitara-emtopmenu .menu-item__expand, .primary-menu-wrapper .menu-item__expand { display: none !important; width: 0 !important; height: 0 !important; overflow: hidden !important; font-size: 0 !important; visibility: hidden !important; } /* Kill ::after on li — Tara might put "+" there */ nav#block-emitara-emtopmenu ul.menu > li.menu-item-has-children::after, nav#block-emitara-myemit ul.menu > li.menu-item-has-children::after, .primary-menu-wrapper nav ul.menu > li.menu-item-has-children::after { content: none !important; display: none !important; } /* Chevron on a::after — absolute to , no effect on item position */ nav#block-emitara-emtopmenu ul.menu > li.menu-item-has-children > a, nav#block-emitara-myemit ul.menu > li.menu-item-has-children > a, .primary-menu-wrapper nav ul.menu > li.menu-item-has-children > a, nav#block-emitara-emtopmenu ul.menu > li.menu-item-has-children > span, nav#block-emitara-myemit ul.menu > li.menu-item-has-children > span, .primary-menu-wrapper nav ul.menu > li.menu-item-has-children > span { position: relative !important; } nav#block-emitara-emtopmenu ul.menu > li.menu-item-has-children > a::after, nav#block-emitara-myemit ul.menu > li.menu-item-has-children > a::after, .primary-menu-wrapper nav ul.menu > li.menu-item-has-children > a::after, nav#block-emitara-emtopmenu ul.menu > li.menu-item-has-children > span::after, nav#block-emitara-myemit ul.menu > li.menu-item-has-children > span::after, .primary-menu-wrapper nav ul.menu > li.menu-item-has-children > span::after { content: "\f078" !important; font-family: "Font Awesome 5 Free", "FontAwesome", sans-serif !important; font-weight: 900 !important; font-size: 7px !important; position: absolute !important; bottom: -4px !important; left: 50% !important; transform: translateX(-50%) !important; color: var(--emit-green) !important; display: block !important; background: none !important; border: none !important; margin: 0 !important; padding: 0 !important; width: auto !important; height: auto !important; pointer-events: none !important; } 19) AFFORM EDITOR — layout, buttons, inputs ========================================================================== */ /* Content area — remove unnecessary left gap/shift */ .page-civicrm .af-container, .page-civicrm .af-form, .page-civicrm .afform-container, .page-civicrm .af-admin-container, .page-civicrm #bootstrap-theme .af-container, .page-civicrm #bootstrap-theme .af-admin-container { max-width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; padding-left: 0 !important; overflow-x: visible !important; overflow-y: visible !important; } /* AfForm tabs — prevent overlap */ .page-civicrm .af-admin-list .nav-tabs, .page-civicrm .afform-list-table .nav-tabs, .page-civicrm #bootstrap-theme .nav-tabs { display: flex !important; flex-wrap: wrap !important; gap: 2px !important; border-bottom: 2px solid var(--emit-beige) !important; margin-bottom: 16px !important; } .page-civicrm #bootstrap-theme .nav-tabs > li, .page-civicrm .nav-tabs > li { flex: 0 0 auto !important; margin-bottom: -2px !important; } .page-civicrm #bootstrap-theme .nav-tabs > li > a, .page-civicrm .nav-tabs > li > a { min-height: 36px !important; height: 36px !important; padding: 6px 16px !important; font-size: 13px !important; line-height: 24px !important; background: transparent !important; color: var(--emit-dark) !important; border: 0 !important; border-bottom: 2px solid transparent !important; border-radius: 0 !important; white-space: nowrap !important; } .page-civicrm #bootstrap-theme .nav-tabs > li.active > a, .page-civicrm .nav-tabs > li.active > a { border-bottom-color: var(--emit-green) !important; color: var(--emit-green) !important; background: transparent !important; font-weight: 700 !important; } .page-civicrm #bootstrap-theme .nav-tabs > li > a:hover, .page-civicrm .nav-tabs > li > a:hover { background: var(--emit-beige-2) !important; color: var(--emit-green) !important; border-bottom-color: var(--emit-green) !important; } /* AfForm buttons — differentiate from primary action buttons */ .page-civicrm .af-container .btn-default, .page-civicrm .af-form .btn-default, .page-civicrm #bootstrap-theme .af-container .btn-default, .page-civicrm .afform-container .btn-default, .page-civicrm .af-admin-container .btn-default, .page-civicrm #bootstrap-theme .af-admin-container .btn-default { background: #fff !important; color: var(--emit-green) !important; border: 1px solid var(--emit-green) !important; min-height: 36px !important; height: 36px !important; line-height: 34px !important; font-size: 13px !important; font-weight: 600 !important; padding: 0 14px !important; } .page-civicrm .af-container .btn-default:hover, .page-civicrm #bootstrap-theme .af-container .btn-default:hover, .page-civicrm #bootstrap-theme .af-admin-container .btn-default:hover { background: var(--emit-beige-2) !important; color: var(--emit-green-2) !important; } /* AfForm btn-info, btn-warning, btn-danger — smaller, not green */ .page-civicrm #bootstrap-theme .af-container .btn-info, .page-civicrm #bootstrap-theme .af-admin-container .btn-info { background: #17a2b8 !important; min-height: 34px !important; height: 34px !important; font-size: 12px !important; padding: 0 12px !important; } .page-civicrm #bootstrap-theme .af-container .btn-danger, .page-civicrm #bootstrap-theme .af-admin-container .btn-danger { background: var(--emit-red) !important; min-height: 34px !important; height: 34px !important; font-size: 12px !important; padding: 0 12px !important; } .page-civicrm #bootstrap-theme .af-container .btn-warning, .page-civicrm #bootstrap-theme .af-admin-container .btn-warning { background: #e0a800 !important; color: #fff !important; min-height: 34px !important; font-size: 12px !important; padding: 0 12px !important; } /* AfForm inputs — softer borders and less padding */ .page-civicrm .af-container input[type="text"], .page-civicrm .af-container input[type="email"], .page-civicrm .af-container input[type="number"], .page-civicrm .af-container input[type="url"], .page-civicrm .af-container select, .page-civicrm .af-container textarea, .page-civicrm .af-form input[type="text"], .page-civicrm .af-form select, .page-civicrm .af-form textarea, .page-civicrm .afform-container input, .page-civicrm .afform-container select, .page-civicrm .afform-container textarea, .page-civicrm #bootstrap-theme .af-container input.form-control, .page-civicrm #bootstrap-theme .af-container select.form-control, .page-civicrm #bootstrap-theme .af-container textarea.form-control, .page-civicrm #bootstrap-theme .af-admin-container input.form-control, .page-civicrm #bootstrap-theme .af-admin-container select.form-control { border: 2px solid rgba(18, 116, 117, 0.35) !important; border-radius: 8px !important; padding: 6px 12px !important; min-height: 38px !important; font-size: 14px !important; line-height: normal !important; } .page-civicrm .af-container textarea, .page-civicrm #bootstrap-theme .af-container textarea.form-control { height: auto !important; min-height: 80px !important; } /* AfForm lists / tables — Name/Page columns don't overlap */ .page-civicrm .af-admin-list table, .page-civicrm .afform-list-table { table-layout: auto !important; width: 100% !important; } .page-civicrm .af-admin-list table td, .page-civicrm .af-admin-list table th { white-space: normal !important; word-break: break-word !important; padding: 8px 10px !important; vertical-align: middle !important; } /* ========================================================================== FORM STYLING — clean, modern form fields ========================================================================== */ /* All text inputs, selects, textareas */ .page-civicrm input[type="text"], .page-civicrm input[type="email"], .page-civicrm input[type="number"], .page-civicrm input[type="url"], .page-civicrm input[type="tel"], .page-civicrm input[type="password"], .page-civicrm input[type="search"], .page-civicrm input[type="date"], .page-civicrm select, .page-civicrm textarea, .page-civicrm .crm-container input[type="text"], .page-civicrm .crm-container select, .page-civicrm .crm-container textarea, .page-civicrm #bootstrap-theme .form-control { background: #f7f8fa !important; border: 1px solid #d0d5dd !important; border-radius: 8px !important; padding: 8px 12px !important; font-size: 14px !important; color: var(--emit-dark) !important; transition: border-color 0.2s, box-shadow 0.2s !important; } /* Focus state */ .page-civicrm input[type="text"]:focus, .page-civicrm select:focus, .page-civicrm textarea:focus, .page-civicrm .crm-container input:focus, .page-civicrm .crm-container select:focus { border-color: var(--emit-green) !important; box-shadow: 0 0 0 2px rgba(18, 116, 117, 0.12) !important; outline: none !important; } /* Select2 dropdowns — prevent double styling */ /* The .select2-container gets .form-control class which triggers our input styles. Override with higher specificity to reset the wrapper. */ .page-civicrm .form-control.select2-container, .page-civicrm .crm-container .form-control.select2-container, .page-civicrm #bootstrap-theme .form-control.select2-container, .page-civicrm .select2-container, .page-civicrm .crm-container .select2-container { background: transparent !important; border: none !important; border-radius: 0 !important; padding: 0 !important; max-height: none !important; height: auto !important; min-height: 0 !important; box-shadow: none !important; } /* Style only the visible choice element inside */ .page-civicrm .select2-container .select2-choice, .page-civicrm .select2-container--default .select2-selection { background: #f7f8fa !important; border: 1px solid #d0d5dd !important; border-radius: 8px !important; min-height: 38px !important; height: 38px !important; padding: 4px 12px !important; line-height: 30px !important; display: flex !important; align-items: center !important; } .page-civicrm .select2-container .select2-choice:hover, .page-civicrm .select2-container--default .select2-selection:hover { border-color: var(--emit-green) !important; } /* Form table rows — spacing */ .page-civicrm .crm-container table.form-layout td, .page-civicrm .crm-container table.form-layout-compressed td { padding: 8px 6px !important; vertical-align: middle !important; } /* Label cells */ .page-civicrm .crm-container table.form-layout td.label, .page-civicrm .crm-container table.form-layout-compressed td.label { font-weight: 600 !important; color: var(--emit-dark) !important; white-space: nowrap !important; padding-right: 12px !important; } /* Form section borders — subtle separators between rows */ .page-civicrm .crm-container table.form-layout > tbody > tr, .page-civicrm .crm-container table.form-layout-compressed > tbody > tr { border-bottom: 1px solid #eef0f3 !important; } /* ========================================================================== PATCHES ========================================================================== */ /* 1. Chrome top space — remove ALL spacing on header chain header#header, body header#header, body.page-civicrm header#header, body.page-civicrm .header, body.page-civicrm div.header, header#header .container, body.page-civicrm header#header .container, body.page-civicrm header#header div.header, body header .container, header .container { margin-top: 0 !important; margin-bottom: 30px !important; padding-top: 0 !important; padding-bottom: 0 !important; } */ /* Header container — override Tara _header.scss padding: 0 0 20px 0 */ header .header-container, header#header .header-container, .header .header-container { padding: 0 !important; gap: 0 !important; } /* Header wrapper — no border/separator gap */ header#header { border: 0 !important; box-shadow: none !important; margin-bottom: 10px !important; /* breadcrumb spacing */ } /* CiviCRM dialog-off-canvas — don't add extra padding on non-CiviCRM pages */ body:not(.page-civicrm) .dialog-off-canvas-main-canvas { padding-top: 0 !important; } /* Fix Chrome top space — CiviCRM sets top:40px/30px on menu when below-cms-menu. This creates extra space in Chrome. Override to 0. */ @media (min-width: 768px) { body.crm-menubar-below-cms-menu > #civicrm-menu-nav ul#civicrm-menu { top: 0 !important; } body.crm-menubar-below-cms-menu > #civicrm-menu-nav #civicrm-menu { top: 0 !important; } /* Body padding should match ONLY the menu height — no extra offset */ body.crm-menubar-visible.crm-menubar-below-cms-menu { padding-top: var(--crm-menubar-height) !important; } } /* 3. Buttons margin — action-link, toolbar buttons, submit buttons need spacing */ .page-civicrm .crm-container .crm-submit-buttons, .page-civicrm .crm-submit-buttons, .crm-container .crm-submit-buttons { margin-bottom: 14px !important; margin-top: 8px !important; } .page-civicrm .crm-container .action-link, .page-civicrm .action-link, .crm-container .action-link { height: auto !important; min-height: var(--btn-h) !important; margin-bottom: 14px !important; } /* Search task menu (ACTION dropdown) */ .page-civicrm .crm-search-tasks-menu, .page-civicrm crm-search-tasks-menu, .page-civicrm .crm-container crm-search-tasks-menu, .page-civicrm .form-inline { margin-bottom: 12px !important; } /* Toolbar buttons above search displays */ .page-civicrm .crm-search-display .form-inline, .page-civicrm .crm-container .form-inline { margin-bottom: 10px !important; } /* 5. Accordion headers — emit-green-2 background */ .page-civicrm .crm-container .crm-accordion-header, .page-civicrm .crm-accordion-header, .crm-container .crm-accordion-header, .crm-container details[open] > summary, .crm-container .crm-accordion-bold > summary, .page-civicrm #bootstrap-theme .crm-accordion-header, .page-civicrm details.crm-accordion-bold > summary { background-color: var(--emit-green-2) !important; background: var(--emit-green-2) !important; color: #fff !important; } .page-civicrm .crm-container .crm-accordion-header a, .crm-container .crm-accordion-header a { color: #fff !important; } /* 1. ng-scope btn-group (select all/action) — no margin, no z-index */ .page-civicrm .crm-container .btn-group.ng-scope, .page-civicrm .crm-container div.btn-group[ng-if*="settings.actions"] { margin-bottom: 0 !important; z-index: auto !important; position: static !important; } /* 1b. When dropdown is open, anchor it so the menu positions under the button */ .page-civicrm .crm-container .btn-group.ng-scope.open, .page-civicrm .crm-container div.btn-group[ng-if*="settings.actions"].open { position: relative !important; z-index: 1000 !important; } /* Ensure the dropdown menu sits below the button (vertical only — let Bootstrap handle left/right) */ .page-civicrm .crm-container .btn-group.ng-scope.open > .dropdown-menu, .page-civicrm .crm-container div.btn-group[ng-if*="settings.actions"].open > .dropdown-menu { top: 100% !important; bottom: auto !important; } /* 2. Form labels — more vertical spacing between form items */ .page-civicrm #bootstrap-theme label, .page-civicrm .crm-container label, label.crm-af-field-label { margin-top: 10px !important; } /* 3. Stacked form inputs — spacing between consecutive fields */ /* .page-civicrm .crm-af-field + .crm-af-field, .page-civicrm af-field + af-field, .page-civicrm .crm-form-date-wrapper + .crm-form-date-wrapper, .page-civicrm .form-group + .form-group { margin-top: 10px !important; } */ /* 6. AF pane headers — emit-green-2 bg */ .af-container-style-pane > .af-title, .page-civicrm .af-container-style-pane > .af-title, .page-civicrm #bootstrap-theme .af-container-style-pane > .af-title { background-color: var(--emit-green-2) !important; background: var(--emit-green-2) !important; color: #fff !important; padding: 8px 14px !important; border-radius: 4px 4px 0 0 !important; position: relative; } /* 13. Fix004 — CiviMail send-test buttons: no overlap, align with button bar */ .page-civicrm button.crmMailing-btn-primary, .page-civicrm button.crmMailing-btn { position: static !important; float: none !important; display: inline-block !important; vertical-align: bottom !important; margin-top: 15px !important; margin-bottom: 0 !important; } /* 14. Fix005 — inner padding for participant/contact forms and accordions */ .page-civicrm form.ng-isolate-scope > .af-container, .page-civicrm form[ng-form] > .af-container { padding: 15px 20px !important; } /* Reset inner .af-container padding inside panes (14c handles pane padding) */ .page-civicrm fieldset.af-container-style-pane .af-container, .page-civicrm details.af-container-style-pane .af-container { padding: 0 !important; margin: 0 !important; } .page-civicrm .crm-accordion-bold.crm-contactDetails-accordion > .crm-accordion-body, .page-civicrm .crm-accordion-bold.crm-address-accordion > .crm-accordion-body, .page-civicrm .crm-accordion-bold.crm-notesBlock-accordion > .crm-accordion-body { padding: 15px 20px !important; } /* 14b. Transparent table rows inside Fix005 containers only */ .page-civicrm form.ng-isolate-scope > .af-container table tr, .page-civicrm form[ng-form] > .af-container table tr, .page-civicrm .af-container.af-container-style-pane > .af-container table tr, .page-civicrm .crm-accordion-bold.crm-contactDetails-accordion > .crm-accordion-body table tr, .page-civicrm .crm-accordion-bold.crm-address-accordion > .crm-accordion-body table tr, .page-civicrm .crm-accordion-bold.crm-notesBlock-accordion > .crm-accordion-body table tr { background: transparent !important; background-color: transparent !important; } /* 14c. AfForm pane/fieldset/details padding (Quick Participant Registration etc.) */ .page-civicrm fieldset.af-container.af-container-style-pane, #bootstrap-theme fieldset.af-container.af-container-style-pane { padding: 0 !important; box-sizing: border-box !important; } .page-civicrm details.af-container.af-container-style-pane, #bootstrap-theme details.af-container.af-container-style-pane { padding: 0px !important; box-sizing: border-box !important; } /* Ensure inner content respects pane boundaries */ .page-civicrm .af-container-style-pane af-field, .page-civicrm .af-container-style-pane .crm-af-field { max-width: 100% !important; box-sizing: border-box !important; margin-left: 0 !important; padding-left: 0 !important; } .page-civicrm .af-container-style-pane af-field input, .page-civicrm .af-container-style-pane af-field select, .page-civicrm .af-container-style-pane af-field .select2-container, .page-civicrm .af-container-style-pane af-field .crm-form-date-wrapper { max-width: 100% !important; box-sizing: border-box !important; } /* Consistent vertical spacing between stacked fields in panes */ .page-civicrm .af-container-style-pane > af-field + af-field, .page-civicrm .af-container-style-pane > .crm-af-field + .crm-af-field, .page-civicrm .af-container-style-pane > af-field + fieldset, .page-civicrm .af-container-style-pane > fieldset + af-field { margin-top: 15px !important; } /* Inner crm-af-field wrapper should not add extra indentation */ .page-civicrm .af-container-style-pane af-field > div.crm-af-field { margin-left: 0 !important; padding-left: 0 !important; } /* Labels within panes aligned flush left */ .page-civicrm .af-container-style-pane label.crm-af-field-label { margin-left: 0 !important; padding-left: 0 !important; } /* 14d. Quick Participant Registration — outer div wrapper: no border, no padding-top */ .page-civicrm afform-quick-participant-registration div.af-container.af-container-style-pane { border: none !important; padding: 0 !important; } .crm-container .af-container.af-layout-cols { align-items: baseline; } #bootstrap-theme h4.af-title { background: var(--emit-green); color: #fff; padding: 1rem; } /* 18. WYSIWYG / CKEditor — reset toolbar buttons to default look */ .ck.ck-editor button, .ck.ck-editor .ck-button, .ck.ck-toolbar button, .ck.ck-toolbar .ck-button, .ck-editor button, .ck-editor .ck-button, .cke_toolbox button, .cke_toolbox a.cke_button, .js-text-format-wrapper .ck button, .text-format-wrapper .ck button { min-height: unset !important; height: unset !important; padding: unset !important; border: unset !important; border-radius: unset !important; background: unset !important; color: unset !important; font-size: unset !important; font-weight: unset !important; line-height: unset !important; text-transform: unset !important; box-shadow: unset !important; display: unset !important; align-items: unset !important; gap: unset !important; margin-top: unset !important; margin-bottom: unset !important; margin: unset !important; } .ck.ck-editor button:hover, .ck.ck-editor .ck-button:hover, .ck.ck-toolbar button:hover, .ck.ck-toolbar .ck-button:hover, .ck-editor button:hover, .ck-editor .ck-button:hover, .js-text-format-wrapper .ck button:hover, .text-format-wrapper .ck button:hover { background: unset !important; color: unset !important; } /* 19. Helpicon inside accordion headers — white color */ .crm-accordion-bold > summary a.helpicon, .crm-accordion-bold > summary .helpicon, .crm-accordion-header a.helpicon, .crm-accordion-header .helpicon, details.crm-accordion-bold > summary a.helpicon, details.crm-accordion-bold > summary .helpicon { color: #fff !important; } .crm-accordion-bold > summary a.helpicon:hover, .crm-accordion-bold > summary .helpicon:hover, .crm-accordion-header a.helpicon:hover, .crm-accordion-header .helpicon:hover, details.crm-accordion-bold > summary a.helpicon:hover, details.crm-accordion-bold > summary .helpicon:hover { color: #fff !important; } /* Node Preview */ .node-preview-container { background: #a9a9fe; position: static; } /* civicrm/participant-dashboard email buttons hide*/ body.page-civicrm-participant-dashboard #bootstrap-theme af-form[ng-form="afformMyDetails"] div[af-join="Email"] button.af-repeat-add-btn, body.page-civicrm-participant-dashboard #bootstrap-theme af-form[ng-form="afformMyDetails"] div[af-join="Email"] button.af-repeat-copy-btn { display: none; } @media (min-width: 768px) { body.role-event-manager.crm-menubar-visible { padding-top: 0 !important; } } /* ========================================================================== 22) WELCOME MESSAGE & PAGE TITLE — custom layout from design mockup ========================================================================== */ /* Welcome view (.view-pax-welcome-name) — white pill with waving hand. The wrapper is a
with block children; inline-block on the wrapper plus display:inline on the inner .view-content/.views-row makes it shrink-wrap to its content like a pill. */ .view-pax-welcome-name { display: inline-block; width: auto; background: #fff; border-radius: 999px; padding: 10px 24px; margin: 1.2rem 0 0.6rem; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08); } .view-pax-welcome-name .view-content, .view-pax-welcome-name .views-row { display: inline; } .view-pax-welcome-name .views-label { display: none; } .view-pax-welcome-name .field-content { font-size: 1rem; font-weight: 600; color: var(--emit-dark); } /* Replace the view's "Welcome" label with "Hi" */ .view-pax-welcome-name .field-content::before { content: 'Hi '; } /* Waving hand inline after the name. Upload emit_hello.svg to themes/custom/emitara/images/ for this to appear. */ .view-pax-welcome-name .views-field-display-name::after { content: ''; display: inline-block; vertical-align: middle; margin-left: 8px; width: 22px; height: 22px; background-image: url('../images/emit_hello.svg'); background-size: contain; background-repeat: no-repeat; background-position: center; } /* Page title — clean rounded white box (overrides the skewed background from parent theme's .page-title-wrap::before in _main.scss). */ .page-title-wrap { margin: 0.5rem 0 1.5rem !important; padding: 2rem 2.5rem !important; } .page-title-wrap::before { transform: none !important; border-radius: 24px !important; background-color: #fff !important; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06) !important; } .page-title-wrap h1.page-title, .page-title-wrap .page-title { margin: 0 !important; } @media (max-width: 950px) { .page-title-wrap { padding: 1.5rem !important; } } /* EM extra hides */ .role-event-manager #bootstrap-theme .af-admin-edit-form-link, .role-event-manager #civicrm-menu-nav, .page-civicrm-admin-afform.role-event-manager #afGuiEditor-palette .panel-body fieldset div.form-group:nth-of-type(3n), .page-civicrm-admin-afform.role-event-manager .af-gui-entity-values, .role-event-manager #crm-notification-container, .role-event-manager #node-amadeus-airfile-form .form-type-vertical-tabs, .role-anonymous #node-amadeus-airfile-form .form-type-vertical-tabs, .role-event-manager #node-amadeus-airfile-form .tabledrag-toggle-weight-wrapper, .role-anonymous #node-amadeus-airfile-form .tabledrag-toggle-weight-wrapper, .role-event-manager #node-amadeus-airfile-form #edit-status-wrapper{ display: none!important; } /* Hide Tags, Placement Order, and Verify submission, matched by a unique descendant so other form-group containers are unaffected. */ .page-civicrm-admin-afform.role-event-manager .form-group:has(#afform_tags), .page-civicrm-admin-afform.role-event-manager .form-group:has(#afform_placement_weight), .page-civicrm-admin-afform.role-event-manager .form-group:has(input[ng-model="editor.afform.manual_processing"]) { display: none; } /* ========================================================================== 23) Z-INDEX — CKEditor 5 (and file-manager popups) above CiviCRM popups -------------------------------------------------------------------------- The CRM dialog sits at z-index 10050 (rule 14a). CKEditor 5's defaults are --ck-z-panel: 1000 and --ck-z-dialog: 10000 — both below 10050, so when CKE5 is rendered inside a CRM popup its dialogs and balloons hide behind the dialog. File-manager popups opened from CKE5 (elFinder, IMCE, Roxy, Media Library, Entity Browser) hit the same problem in two ways: - If they use Bootstrap .modal: defaults to 1050, far below the CRM dialog. - If they use jQuery UI .ui-dialog: ties with the CRM dialog at 10050 (from rule 14a) and stacks unpredictably by DOM/focus order. New stack (see also the ladder comment near rule 14a): 10070 CKE5 balloons / dialog overlay 10080 CKE5 dialog (link, image, table, source-edit) 10090 File-manager .modal-backdrop 10100 File-manager .modal / File-manager .ui-dialog (via :has()) ========================================================================== */ /* CKEditor 5 — override the CSS variables it uses for stacking */ :root { --ck-z-panel: 10070; --ck-z-dialog: 10080; } /* Direct overrides in case a CKE5 build hardcodes the values instead of reading the variables. Balloons (toolbar dropdowns, link balloon) sit one notch below CKE5's own dialogs so dialogs win when both are open. */ .ck.ck-balloon-panel, .ck-balloon-panel, .ck.ck-dialog-overlay, .ck-dialog-overlay { z-index: 10070 !important; } .ck.ck-dialog, .ck-dialog { z-index: 10080 !important; } /* File managers that use Bootstrap modal (.modal) instead of jQuery UI dialog (.ui-dialog) default to Bootstrap's z-index 1050, far below the CRM dialog. Push them above. */ body .modal-backdrop { z-index: 10090 !important; } body .modal { z-index: 10100 !important; } /* elFinder file manager — applies .elfinder + .dialogelfinder to the SAME element (no .ui-dialog wrapper). The contrib ckeditor.css ships `.ui-front.dialogelfinder { z-index: 9000 }`, which sits below the CRM dialog (10050) so the file manager hides behind it. Direct selectors below match only elFinder's own classes — no other dialogs are affected. */ body .dialogelfinder, body .ui-front.dialogelfinder, body .elfinder.dialogelfinder { z-index: 10100 !important; } /* IMCE, Roxy, and other file managers that DO wrap in a .ui-dialog. The :has() selectors identify a .ui-dialog by characteristic content so only file-manager dialogs are boosted; regular CRM dialogs stay at 10050. */ body .ui-dialog:has(#imce), body .ui-dialog:has(.imce-frame), body .ui-dialog:has(iframe[id*="imce"]), body .ui-dialog:has(iframe[src*="imce"]), body .ui-dialog:has(iframe[src*="filemanager"]), body .ui-dialog:has(iframe[src*="file-manager"]), body .ui-dialog:has(iframe[src*="roxy"]), body .ui-dialog:has(.file-manager-container), body .ui-dialog:has(.file-browser) { z-index: 10100 !important; } /* ========================================================================== 24) PARTICIPANT DASHBOARD — Latest announcements + Upcoming events -------------------------------------------------------------------------- Two views on /participant-event: .view-event-announcements 3 newest announcements (3-col card grid) .view-participant-event upcoming events (stacked card rows) All styling is scoped to these two view classes — no other page is affected. Combines Drupal's .views-field-* divs into card layouts via CSS Grid; uses pseudo-elements + Font Awesome glyphs for icons and for the "—" / "," separators between date and location pairs. ========================================================================== */ /* Font Awesome family used by all icon pseudos in this section (fallback chain so FA4/5/6 all work) */ .view-event-announcements .view-header h2::before, .view-event-announcements [class*="views-field"]::before, .view-event-announcements .views-more-link::after, .view-participant-event .view-header h2::before, .view-participant-event [class*="views-field"]::before, .view-participant-event .views-field-title-1 a::after { font-family: "Font Awesome 6 Free", "Font Awesome 5 Free", "FontAwesome"; font-weight: 900; font-style: normal; display: inline-block; } /* ===== Shared section headings ===== */ .view-event-announcements > .view-header h2, .view-participant-event > .view-header h2 { display: flex !important; align-items: center !important; gap: 12px !important; color: var(--emit-dark) !important; margin: 32px 0 16px !important; font-size: 22px !important; } .view-event-announcements > .view-header h2::before { content: "\f0f3"; /* fa-bell */ color: var(--emit-green); } .view-participant-event > .view-header h2::before { content: "\f073"; /* fa-calendar */ color: var(--emit-green); } /* ========================================================================== 24a) Latest announcements — 3-column card grid ========================================================================== */ .view-event-announcements .view-content { display: grid !important; grid-template-columns: repeat(3, 1fr) !important; gap: 16px !important; margin-bottom: 16px; } @media (max-width: 768px) { .view-event-announcements .view-content { grid-template-columns: 1fr !important; } } .view-event-announcements .views-row { background: #fff; border: 0.5px solid rgba(2, 1, 34, 0.08); border-radius: var(--r-md); padding: 20px; display: flex; flex-direction: column; transition: box-shadow 0.18s ease; } .view-event-announcements .views-row:hover { box-shadow: 0 4px 14px rgba(2, 1, 34, 0.07); } /* Title (links to /node/X) */ .view-event-announcements .views-field-title { margin-bottom: 12px; } .view-event-announcements .views-field-title a { font-size: 16px; font-weight: 600; color: var(--emit-dark) !important; text-decoration: none !important; line-height: 1.35; display: block; } .view-event-announcements .views-field-title a:hover { color: var(--emit-red) !important; } /* Date row — hide "Updated:" label, add clock icon */ .view-event-announcements .views-label-changed, .view-event-announcements .views-field-changed .views-label { display: none !important; } .view-event-announcements .views-field-changed { font-size: 13px; color: rgba(2, 1, 34, 0.6); margin-bottom: 4px; } .view-event-announcements .views-field-changed::before { content: "\f017"; /* fa-clock */ margin-right: 6px; color: var(--emit-green); } /* Event context row ("Event: …") — hide label, add calendar-day icon */ .view-event-announcements .views-field-title-1 .views-label, .view-event-announcements .views-field-title-1 > .views-label { display: none !important; } .view-event-announcements .views-field-title-1 { font-size: 13px; color: rgba(2, 1, 34, 0.6); margin-bottom: 12px; } .view-event-announcements .views-field-title-1::before { content: "\f274"; /* fa-calendar-check (event-ish) */ margin-right: 6px; color: var(--emit-green); } .view-event-announcements .views-field-title-1 a { color: rgba(2, 1, 34, 0.6) !important; text-decoration: none !important; } .view-event-announcements .views-field-title-1 a:hover { color: var(--emit-red) !important; } /* Body — clamp to 3 lines so cards stay roughly equal height */ .view-event-announcements .views-field-body { flex: 1; font-size: 13px; color: rgba(2, 1, 34, 0.7); margin-bottom: 10px; } .view-event-announcements .views-field-body p { margin: 0; line-height: 1.55; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } /* Read more — inline red link with arrow */ .view-event-announcements .views-more-link { font-size: 13px; font-weight: 600; color: var(--emit-red) !important; text-decoration: none !important; align-self: flex-start; margin-top: 4px; } .view-event-announcements .views-more-link::after { content: "\f061"; /* fa-arrow-right */ font-size: 11px; margin-left: 6px; } .view-event-announcements .views-more-link:hover { color: var(--emit-dark) !important; } /* ========================================================================== 24b) Upcoming events — stacked card rows Layout: title (block) | dates (inline pair) | location (inline pair) with the button absolutely positioned on the right of the card. A CSS-only line break (\A + white-space:pre on end-date::after) drops city onto its own line so city and country sit immediately adjacent — avoids the column-width sharing a single grid would impose. ========================================================================== */ .view-participant-event .view-content { display: flex !important; flex-direction: column !important; gap: 12px !important; } .view-participant-event .views-row { position: relative; background: #fff; border: 0.5px solid rgba(2, 1, 34, 0.08); border-radius: var(--r-md); padding: 18px 240px 18px 22px; /* right padding reserves room for the button */ transition: box-shadow 0.18s ease; } .view-participant-event .views-row:hover { box-shadow: 0 4px 14px rgba(2, 1, 34, 0.07); } /* Title — block, own line */ .view-participant-event .views-field-title { font-size: 17px; font-weight: 600; color: var(--emit-dark); margin-bottom: 8px; line-height: 1.3; } /* All four date / location fields inline so they flow on a single line until the explicit line break below forces a wrap between the two pairs */ .view-participant-event .views-field-start-date, .view-participant-event .views-field-end-date, .view-participant-event .views-field-city, .view-participant-event .views-field-country-id { display: inline; font-size: 14px; color: rgba(2, 1, 34, 0.65); } /* Calendar icon before start-date */ .view-participant-event .views-field-start-date::before { content: "\f073"; /* fa-calendar */ margin-right: 6px; color: var(--emit-green); } /* "—" between start and end dates */ .view-participant-event .views-field-end-date::before { content: "—"; font-family: inherit; /* not Font Awesome */ margin: 0 6px; color: rgba(2, 1, 34, 0.4); } /* Hard line break after end-date so city starts on its own line. The "\A" is a literal line-feed character; white-space:pre tells the browser to render it as a visual break rather than collapsing it to a space. */ .view-participant-event .views-field-end-date::after { content: "\A"; white-space: pre; } /* Pin icon before city */ .view-participant-event .views-field-city::before { content: "\f3c5"; /* fa-location-dot */ margin-right: 6px; color: var(--emit-green); } /* ", " sits tight against the city — no gap between Brunswick and Australia. \00a0 is a non-breaking space (won't collapse like a regular trailing space). */ .view-participant-event .views-field-country-id::before { content: ",\00a0"; font-family: inherit; /* not Font Awesome */ } /* "Event details:" link → green pill button, absolutely positioned right */ .view-participant-event .views-label-title-1, .view-participant-event .views-field-title-1 .views-label { display: none !important; } .view-participant-event .views-field-title-1 { position: absolute; top: 50%; right: 22px; transform: translateY(-50%); } .view-participant-event .views-field-title-1 a { display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; background: var(--emit-green) !important; color: #fff !important; text-decoration: none !important; border-radius: 999px; font-size: 14px; font-weight: 500; white-space: nowrap; transition: background 0.15s ease; } .view-participant-event .views-field-title-1 a::after { content: "\f061"; /* fa-arrow-right */ font-size: 12px; } .view-participant-event .views-field-title-1 a:hover { background: var(--emit-dark) !important; } /* Narrow viewport: button drops below content full-width */ @media (max-width: 700px) { .view-participant-event .views-row { padding: 18px 22px; } .view-participant-event .views-field-title-1 { position: static; transform: none; display: block; margin-top: 12px; } .view-participant-event .views-field-title-1 a { display: flex; justify-content: center; width: 100%; } } /* ========================================================================== 25) PUBLIC EVENT PAGE — event detail view (.view-civicrm-events) -------------------------------------------------------------------------- Single-event detail page at /node/X. Same card pattern as section 24b (title, date pair inline, location inline) — no button (already on the detail page). Differences from .view-participant-event: - Every field has both a .views-label and .field-content sibling. All labels get hidden so only the icon + value remains. - DOM order is country first, then city (opposite of the dashboard). Country gets the pin icon, city gets a ", " prefix. If country has no .field-content (just an empty label), the country wrapper is hidden and city is reassigned the pin icon instead, via :has(). ========================================================================== */ /* Font Awesome family for all icon pseudos in this section */ .view-civicrm-events .view-header h2::before, .view-civicrm-events [class*="views-field"]::before { font-family: "Font Awesome 6 Free", "Font Awesome 5 Free", "FontAwesome"; font-weight: 900; font-style: normal; display: inline-block; } /* "Event Details" section heading (in .view-header) — calendar icon prefix */ .view-civicrm-events > .view-header h2 { display: flex !important; align-items: center !important; gap: 12px !important; color: var(--emit-dark) !important; margin: 32px 0 16px !important; font-size: 22px !important; } .view-civicrm-events > .view-header h2::before { content: "\f073"; /* fa-calendar */ color: var(--emit-green); } /* Card wrapper */ .view-civicrm-events .view-content { display: flex !important; flex-direction: column !important; gap: 12px !important; } .view-civicrm-events .views-row { background: #fff; border: 0.5px solid rgba(2, 1, 34, 0.08); border-radius: var(--r-md); padding: 22px 24px; transition: box-shadow 0.18s ease; } .view-civicrm-events .views-row:hover { box-shadow: 0 4px 14px rgba(2, 1, 34, 0.07); } /* Title prominent — no link (we're on the detail page already) */ .view-civicrm-events .views-field-title { font-size: 18px; font-weight: 600; color: var(--emit-dark); margin-bottom: 10px; line-height: 1.3; } /* Hide labels for the main fields (icons convey meaning). Scoped to known fields so additional-address labels stay readable. */ .view-civicrm-events .views-label-start-date, .view-civicrm-events .views-label-end-date, .view-civicrm-events .views-label-city, .view-civicrm-events .views-label-country-id { display: none !important; } /* Date pair — inline */ .view-civicrm-events .views-field-start-date, .view-civicrm-events .views-field-end-date { display: inline; font-size: 14px; color: rgba(2, 1, 34, 0.65); } .view-civicrm-events .views-field-start-date::before { content: "\f073"; /* fa-calendar */ margin-right: 6px; color: var(--emit-green); } .view-civicrm-events .views-field-end-date::before { content: "—"; font-family: inherit; margin: 0 6px; color: rgba(2, 1, 34, 0.4); } /* Hard line break after end-date so location starts on its own line */ .view-civicrm-events .views-field-end-date::after { content: "\A"; white-space: pre; } /* Location pair — inline. DOM order is country, city (opposite of dashboard). Default: country gets pin icon, city gets ", " prefix. */ .view-civicrm-events .views-field-country-id, .view-civicrm-events .views-field-city { display: inline; font-size: 14px; color: rgba(2, 1, 34, 0.65); } .view-civicrm-events .views-field-country-id::before { content: "\f3c5"; /* fa-location-dot */ margin-right: 6px; color: var(--emit-green); } .view-civicrm-events .views-field-city::before { content: ",\00a0"; font-family: inherit; } /* If country-id has no .field-content (empty value), hide the wrapper AND reassign the pin icon to city, dropping its comma prefix. */ .view-civicrm-events .views-field-country-id:not(:has(.field-content)) { display: none !important; } .view-civicrm-events .views-row:not(:has(.views-field-country-id .field-content)) .views-field-city::before { content: "\f3c5"; /* fa-location-dot */ font-family: "Font Awesome 6 Free", "Font Awesome 5 Free", "FontAwesome"; font-weight: 900; margin-right: 6px; color: var(--emit-green); } /* ========================================================================== 26) MESSAGES PAGE / INBOX — .view-messages (table → modern webmail rows) -------------------------------------------------------------------------- Drupal renders this Views display as a 9-column table. We override the table chrome to convert each into a card with an internal CSS Grid: Row 1 ▶ Subject (spans cols 1–5) Date (col 6, right) Row 2 ▶ Sender → Recipient [event chip] 💬 N [N new] Hidden columns: views-field-last-comment-name (redundant with sender / recipient pair), views-field-timestamp ("Has New Content" — observed empty across every row). Rows with new comments get a 3px green left edge (unread indicator) plus a green "N new" pill on the right (action signal — both ends of the row draw the eye). The event name renders as a teal-tinted chip; empty event cells are hidden via :empty. The "Add New Message" link in .view-header is promoted from a text link to a green pill CTA matching the dashboard's button style. Browser note: the unread indicator uses :has(), which is Chrome 105+, Firefox 121+, Safari 15.4+ — fine on every modern browser, falls back gracefully (no left edge) on older ones; the badge itself still shows. ========================================================================== */ /* Font Awesome family for every icon pseudo in this section */ .view-messages > .view-header a::before, .view-messages [class*="views-field"]::before { font-family: "Font Awesome 6 Free", "Font Awesome 5 Free", "FontAwesome"; font-weight: 900; font-style: normal; display: inline-block; } /* ----- Container width — narrows the inbox on wide screens -------------- */ .view-messages { max-width: 1200px !important; margin-left: auto !important; margin-right: auto !important; } /* ----- "Add New Message" — green pill CTA, right-aligned ----------------- */ .view-messages > .view-header { display: flex !important; justify-content: flex-end !important; margin-bottom: 14px !important; } .view-messages > .view-header a { display: inline-flex !important; align-items: center; gap: 8px; padding: 9px 18px !important; background: var(--emit-green) !important; color: #fff !important; text-decoration: none !important; border-radius: 999px !important; font-size: 14px; font-weight: 500; transition: background 0.15s ease; } .view-messages > .view-header a:hover { background: var(--emit-dark) !important; } .view-messages > .view-header a::before { content: "\f067"; /* fa-plus */ font-size: 11px; } /* ----- Strip table chrome ------------------------------------------------ */ .view-messages .view-content > table { display: block !important; width: 100% !important; background: transparent !important; border: none !important; border-collapse: separate !important; border-spacing: 0 !important; } .view-messages thead { display: none !important; } .view-messages tbody { display: block !important; } /* ----- Each becomes a card with internal grid ---------------------- :nth-child selectors are required to match the specificity of the global `table tbody tr:nth-child(even) { background: ... !important }` rule at line ~362 of this file. Without them the cream zebra color leaks through and even rows blend into the page background. */ .view-messages tbody tr, .view-messages tbody tr.odd, .view-messages tbody tr.even, .view-messages tbody tr:nth-child(odd), .view-messages tbody tr:nth-child(even) { display: grid !important; grid-template-columns: auto auto auto auto 1fr auto; grid-template-rows: auto auto; column-gap: 0; row-gap: 5px; align-items: baseline; padding: 16px 22px !important; margin-bottom: 10px !important; background: #fff !important; border: 0.5px solid rgba(2, 1, 34, 0.08) !important; border-radius: var(--r-md) !important; transition: box-shadow 0.18s ease; } .view-messages tbody tr:last-child { margin-bottom: 0 !important; } .view-messages tbody tr:hover { box-shadow: 0 4px 14px rgba(2, 1, 34, 0.07); } /* Unread / has-new indicator */ .view-messages tbody tr:has(.views-field-new-comments a), .view-messages tbody tr.node-new, .view-messages tbody tr.unread { border-left: 3px solid var(--emit-green) !important; padding-left: 19px !important; /* 22 − 3, keeps content alignment */ } /* Strip default styling, set base meta font. */ .view-messages tbody td { padding: 0 !important; border: none !important; background: transparent !important; vertical-align: baseline !important; font-size: 12.5px !important; line-height: 1.45 !important; color: rgba(2, 1, 34, 0.65) !important; } /* Hidden columns. views-field-last-comment-name is always hidden (redundant with sender / recipient pair). */ .view-messages .views-field-last-comment-name { display: none !important; } /* Timestamp cell: holds the grid slot. Cell itself is invisible chrome */ .view-messages .views-field-timestamp { grid-row: 2; grid-column: 6; justify-self: end; align-self: center; } .view-messages .views-field-timestamp > span:not(:empty) { display: inline-flex; align-items: center; padding: 2px 10px; background: var(--emit-green) !important; color: #fff !important; border-radius: 999px; font-size: 11.5px; font-weight: 500; text-transform: lowercase; } /* ----- Row 1: subject (left) + date (right) ----------------------------- */ .view-messages .views-field-title { grid-row: 1; grid-column: 1 / 6; font-size: 15px !important; font-weight: 600 !important; color: var(--emit-dark) !important; line-height: 1.3 !important; } .view-messages .views-field-title a { color: inherit !important; text-decoration: none !important; } .view-messages tbody tr:hover .views-field-title a { color: var(--emit-red) !important; } .view-messages .views-field-last-comment-timestamp { grid-row: 1; grid-column: 6; justify-self: end; font-size: 12.5px !important; color: rgba(2, 1, 34, 0.55) !important; white-space: nowrap; } /* ----- Row 2: sender → recipient · event-chip · replies · [N new] ------ */ /* Sender (col 1) */ .view-messages .views-field-uid { grid-row: 2; grid-column: 1; } .view-messages .views-field-uid a, .view-messages .views-field-name a { color: inherit !important; text-decoration: none !important; } .view-messages .views-field-uid a:hover, .view-messages .views-field-name a:hover { text-decoration: underline !important; } /* Recipient (col 2), prefixed by → arrow */ .view-messages .views-field-name { grid-row: 2; grid-column: 2; } .view-messages .views-field-name::before { content: "\f061"; /* fa-arrow-right */ margin: 0 6px; color: rgba(2, 1, 34, 0.35); font-size: 10px; } /* Event chip (col 3) */ .view-messages .views-field-title-1 { grid-row: 2; grid-column: 3; } .view-messages .views-field-title-1:not(:empty) { align-self: center; padding: 2px 10px 2px 9px !important; background: rgba(18, 116, 117, 0.08) !important; color: var(--emit-green) !important; border-radius: 999px !important; font-size: 11.5px !important; font-weight: 500 !important; margin-left: 14px; white-space: nowrap; } .view-messages .views-field-title-1:not(:empty)::before { content: "\f073"; /* fa-calendar */ margin-right: 5px; font-size: 10px; color: var(--emit-green) !important; } .view-messages .views-field-title-1:empty { display: none !important; } /* Replies count (col 4) */ .view-messages .views-field-comment-count { grid-row: 2; grid-column: 4; } .view-messages .views-field-comment-count::before { content: "\f0e6"; /* fa-comments */ margin: 0 5px 0 14px; color: rgba(2, 1, 34, 0.4); font-size: 11px; } .view-messages .views-field-comment-count::after { content: " reply"; } /* New-comments badge (col 6, right-aligned) */ .view-messages .views-field-new-comments { grid-row: 2; grid-column: 6; justify-self: end; align-self: center; } .view-messages .views-field-new-comments a { display: inline-flex; align-items: center; padding: 2px 10px; background: var(--emit-green) !important; color: #fff !important; border-radius: 999px; font-size: 11.5px; font-weight: 500; text-decoration: none !important; } .view-messages .views-field-new-comments a::after { content: " new"; } .view-messages .views-field-new-comments:not(:has(a)) { display: none !important; } /* ----- Pager — center-aligned (parent theme styles the buttons themselves) */ .view-messages .pager { display: flex !important; justify-content: center !important; margin-top: 20px !important; } /* ============================================================ Section 27 — Private Message Detail Page (/node/) ============================================================ /* Constrain reading width — long lines feel wrong for messages */ .node.node-type-pmessage.node-view-mode-full { max-width: 1000px; margin: 0 auto; } /* "Your Events" and "Message" as card blocks. Targets the two direct children of .node-content that wrap field labels+values, regardless of the exact field--name-*. */ .node.node-type-pmessage.node-view-mode-full > .node-content > .node-taxonomy-container, .node.node-type-pmessage.node-view-mode-full > .node-content > .field { background: #fff !important; border: 0.5px solid rgba(2, 1, 34, 0.08) !important; border-radius: var(--r-md) !important; padding: 18px 24px !important; margin: 0 0 12px 0 !important; } /* Field labels: small caps, muted, uniform across both blocks */ .node.node-type-pmessage.node-view-mode-full .field__label, .node.node-type-pmessage.node-view-mode-full .field-label { display: block !important; font-size: 11px !important; font-weight: 600 !important; text-transform: uppercase; letter-spacing: 0.06em; color: rgba(2, 1, 34, 0.55) !important; margin: 0 0 6px 0 !important; } /* Field values: readable body text */ .node.node-type-pmessage.node-view-mode-full .field-item, .node.node-type-pmessage.node-view-mode-full .field__item { font-size: 14.5px !important; line-height: 1.55 !important; color: var(--emit-dark) !important; } /* Comments section — extra breathing room above the thread */ .node.node-type-pmessage.node-view-mode-full section.comments { margin-top: 32px; } /* Each reply as a clean card. The article already has display:flex from somewhere (visible in DevTools as the "flex" badge), so we keep that and just wrap it in card chrome. */ .node.node-type-pmessage.node-view-mode-full article.js-comment { background: #fff !important; border: 0.5px solid rgba(2, 1, 34, 0.08) !important; border-radius: var(--r-md) !important; padding: 16px 22px !important; margin: 0 0 10px 0 !important; } /* Comment author + timestamp line, muted */ .node.node-type-pmessage.node-view-mode-full article.js-comment .submitted, .node.node-type-pmessage.node-view-mode-full article.js-comment .comment-submitted { font-size: 12.5px !important; color: rgba(2, 1, 34, 0.6) !important; margin-bottom: 6px !important; } /* Comment body */ .node.node-type-pmessage.node-view-mode-full article.js-comment .content, .node.node-type-pmessage.node-view-mode-full article.js-comment .field--name-comment-body { font-size: 14px !important; line-height: 1.55 !important; color: var(--emit-dark) !important; } /* Reply form — same card chrome as comments for visual consistency */ .node.node-type-pmessage.node-view-mode-full .comment-form-wrap { background: #fff; border: 0.5px solid rgba(2, 1, 34, 0.08); border-radius: var(--r-md); padding: 20px 24px; margin-top: 18px; } /* Form labels: match field label style for consistency */ .node.node-type-pmessage.node-view-mode-full .comment-form-wrap label { display: block; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: rgba(2, 1, 34, 0.55); margin-bottom: 6px; } /* Textarea / inputs — clean borders matching card style */ .node.node-type-pmessage.node-view-mode-full .comment-form-wrap textarea, .node.node-type-pmessage.node-view-mode-full .comment-form-wrap input[type="text"] { width: 100%; border: 0.5px solid rgba(2, 1, 34, 0.15); border-radius: 10px; padding: 10px 12px; font-size: 14px; color: var(--emit-dark); background: #fff; transition: border-color 0.15s ease; } .node.node-type-pmessage.node-view-mode-full .comment-form-wrap textarea:focus, .node.node-type-pmessage.node-view-mode-full .comment-form-wrap input[type="text"]:focus { border-color: var(--emit-green); outline: none; }