@font-face { font-family: 'Public Sans'; src: url("/javax.faces.resource/fonts/public-sans/static/PublicSans-Regular.ttf.xhtml?ln=linked2pay-custom") format('truetype'); font-weight: 400; font-style: normal; } @font-face { font-family: 'Public Sans'; src: url("/javax.faces.resource/fonts/public-sans/static/PublicSans-Bold.ttf.xhtml?ln=linked2pay-custom") format('truetype'); font-weight: 600; font-style: normal; } @font-face { font-family: 'Public Sans'; src: url("/javax.faces.resource/fonts/public-sans/static/PublicSans-Italic.ttf.xhtml?ln=linked2pay-custom") format('truetype'); font-weight: 400; font-style: italic; } /* l2p-font — composite family: Public Sans for letters/symbols, JetBrains Mono for digits (0-9) plus $ and %, split via unicode-range so the browser auto-picks those glyphs from JetBrains Mono and everything else from Public Sans. */ @font-face { font-family: 'l2p-font'; src: url("/javax.faces.resource/fonts/public-sans/static/PublicSans-Regular.ttf.xhtml?ln=linked2pay-custom") format('truetype'); font-weight: 400; font-style: normal; unicode-range: U+00-23, U+26-2F, U+3A-10FFFF; } @font-face { font-family: 'l2p-font'; src: url("/javax.faces.resource/fonts/JetbrainsMono/JetBrainsMono-Regular.ttf.xhtml?ln=linked2pay-custom") format('truetype'); font-weight: 400; font-style: normal; unicode-range: U+24-25, U+30-39; } @font-face { font-family: 'l2p-font'; src: url("/javax.faces.resource/fonts/public-sans/static/PublicSans-Bold.ttf.xhtml?ln=linked2pay-custom") format('truetype'); font-weight: 600; font-style: normal; unicode-range: U+00-23, U+26-2F, U+3A-10FFFF; } @font-face { font-family: 'l2p-font'; src: url("/javax.faces.resource/fonts/JetbrainsMono/JetBrainsMono-Bold.ttf.xhtml?ln=linked2pay-custom") format('truetype'); font-weight: 600; font-style: normal; unicode-range: U+24-25, U+30-39; } @font-face { font-family: 'l2p-font'; src: url("/javax.faces.resource/fonts/public-sans/static/PublicSans-Italic.ttf.xhtml?ln=linked2pay-custom") format('truetype'); font-weight: 400; font-style: italic; unicode-range: U+00-23, U+26-2F, U+3A-10FFFF; } @font-face { font-family: 'l2p-font'; src: url("/javax.faces.resource/fonts/JetbrainsMono/JetBrainsMono-Italic.ttf.xhtml?ln=linked2pay-custom") format('truetype'); font-weight: 400; font-style: italic; unicode-range: U+24-25, U+30-39; } /* Status/type badges get a thin outline in their own text color. */ .customer-badge { border: 1px solid currentColor; } /* Active component-theme color — server-rendered from L2pUserPreferences on initial load; the bean overrides this via setProperty on AJAX theme change. */ :root { --active-theme-color: #42A5F5; /* Card surface — Diamond bakes these per scheme in layout-*.css (.card background); mirrored here as a token so components can match the cards. */ --l2p-surface-card: #ffffff; /* Radius */ --l2p-radius-lg: 1.25rem; /* 20px — cards */ --l2p-radius: 0.5rem; /* 8px — (spare) */ --l2p-radius-md: 0.375rem; /* 6px — buttons, inputs */ /* Shadow scale — matches Tailwind v4 / shadcn (rgb(0 0 0 / a)) */ --l2p-shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.05); --l2p-shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1); --l2p-shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); /* Even, all-around soft shadow — cards, topbar, dialog all share this */ --l2p-shadow-float: 0 0 12px -2px rgb(0 0 0 / 0.12); } /* Scheme classes live on the .layout-wrapper div, NOT . */ .layout-wrapper.layout-dark { --l2p-surface-card: #1e1e1e; } .layout-wrapper.layout-dim { --l2p-surface-card: #1f2d40; } body, body .ui-widget { font-family: 'l2p-font', -apple-system, blinkmacsystemfont, "Segoe UI", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif !important; } body .ui-widget .ui-menu .ui-button { font-family: 'l2p-font', -apple-system, blinkmacsystemfont, "Segoe UI", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif !important; font-weight: 500; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } /* Elements with this style will still show a tooltip even when disabled */ .l2p-show-tooltip { pointer-events: all; } .l2p-dashboard-card { width:100%; text-align:left; } .l2p-left-border-card { position: relative; overflow: hidden; } /* Datatable rows with this style will have no bottom border. Should be applied as a rowStyleClass. */ .ui-datatable .ui-datatable-data > tr.l2p-row-no-bottom-border > td { border-bottom-width: 0; } /* This fixes toggleSwitch not centering icons correctly in the button */ .ui-toggleswitch-handler { position: absolute !important; } /*This fixes text editor not displaying icons properly in Primefaces 14 - 08/12/2024 - fm*/ .ui-texteditor .ui-editor-toolbar.ql-snow .ql-stroke { stroke: #818181 !important; } .ui-texteditor .ui-editor-toolbar.ql-snow .ql-picker .ql-picker-label { color: #818181 !important; } .ui-texteditor .ui-editor-toolbar.ql-snow .ql-fill { fill: #818181 !important; } /* Email wrapper makes it so text editors can preview signature footers 5/6/2026 - CA */ div.email-editor-wrapper { border: 1px solid #ced4da; /* Fallback light border */ border-radius: 4px; overflow: hidden; } /* Strip default borders and backgrounds inside the wrapper */ div.email-editor-wrapper .ui-texteditor.seamless-editor .ql-container.ql-snow { border: none !important; background: transparent !important; /* Forces it to use your native theme background */ } div.email-editor-wrapper .ui-texteditor.seamless-editor .ql-toolbar.ql-snow { border: none !important; border-bottom: 1px solid #ced4da !important; background: transparent !important; } /* The Dashed Footer Preview */ .email-footer-preview { padding: 15px; border-top: 1px dashed #ced4da; opacity: 0.6; /* Keeps the greyed-out illusion */ pointer-events: none; } /* DARK, DIM VERSION */ /* Update Wrapper border */ body.layout-dark div.email-editor-wrapper, body.layout-dim div.email-editor-wrapper { border-color: #606060 !important; } /* Update Toolbar separator border */ body.layout-dark div.email-editor-wrapper .ui-texteditor.seamless-editor .ql-toolbar.ql-snow, body.layout-dim div.email-editor-wrapper .ui-texteditor.seamless-editor .ql-toolbar.ql-snow { border-bottom-color: #606060 !important; } /* Update Footer dashed border */ body.layout-dark .email-footer-preview, body.layout-dim .email-footer-preview { border-top-color: #606060 !important; } /* This prevents the topbar dropdown menu from going off-screen on small windows - Skyler */ @media screen and (max-width: 991px) { .layout-wrapper .layout-topbar .topbar-menu { justify-content: space-around; /* instead of space-between */ } } /* This fixes checkboxes being set to too small of a value for the label to fit */ .ui-chkbox.labeledCheckbox { display: inline-flex; width: auto; height: auto; align-items: center; } .ui-columntoggler-all { height: 35px; } .ui-columntoggler .ui-columntoggler-all .ui-chkbox { margin-top: -15px !important; } /* This fixes tabmenu items having too small of a click area in diamond layout - 11/24 Skyler */ body .ui-tabmenu .ui-tabmenu-nav .ui-tabmenuitem { padding: 0; } body .ui-tabmenu .ui-tabmenu-nav .ui-tabmenuitem a { padding: 1rem; } /* This is for a custom select sort column in payouts.xhtml */ body .ui-datatable thead th.l2p-existing-agents-selection-column { width: 3rem; min-width: 3rem; text-align: left; white-space: nowrap; } body .ui-datatable thead th.l2p-existing-agents-selection-column .ui-chkbox-all, body .ui-datatable thead th.l2p-existing-agents-selection-column .ui-chkbox { display: inline-flex; vertical-align: middle; } body .ui-datatable thead th.l2p-existing-agents-selection-column .ui-sortable-column-icon { float: right; margin: 0.1rem 0 0 0; } body .ui-datatable tbody td.l2p-existing-agents-selection-column { width: 3rem; min-width: 3rem; text-align: left; } body .ui-datatable.l2p-table-no-header thead { display: none; } /* This fixes command links having a higher font weight (700) than command buttons, which have weight 400. */ span.ui-linkbutton { font-weight: 400; } /* This fixes command links and links in datatables becoming hard to see if the row is selected (especially in dark blue theme). The "not" rule means the new colors will only be applied to links without child elements: https://stackoverflow.com/a/76079959 This is required to ensure icons in links are still visible. - 1/25 Skyler */ body .ui-datatable .ui-datatable-data > tr > td a.ui-commandlink:not(:has(*)), body .ui-datatable .ui-datatable-data > tr > td a.ui-link:not(:has(*)) { color: #2196F3; } body .ui-datatable .ui-datatable-data > tr.ui-state-highlight > td a.ui-commandlink:not(:has(*)), body .ui-datatable .ui-datatable-data > tr.ui-state-highlight > td a.ui-link:not(:has(*)) { color: #ffffff; } /* This fixes command links and links that are NOT in datatables */ a.ui-commandlink:not(:has(*)), a.ui-link:not(:has(*)) { color: #2196F3; } body .ui-datatable .ui-datatable-header { background: none; padding-left: 0; padding-right: 0; } body .ui-datatable, body .ui-datatable .ui-datatable-header, .customers-table-header { overflow: visible !important; } .activeTab { color:#2195ed; } .passiveTab { color:#98a4aa; } /* This class can be used to give links an underline style when the user hovers over them. */ a.link-underline-on-hover { color: #2196F3; } a.link-underline-on-hover:hover { text-decoration: underline; } @-webkit-keyframes modal-in { from { background-color: transparent; } to { background-color: rgba(0, 0, 0, 0.6); } } @keyframes modal-in { from { background-color: transparent; } to { background-color: rgba(0, 0, 0, 0.6); } } .modal-in { -webkit-animation-name: modal-in; animation-name: modal-in; } .watch-list { background-color: #ffe2e3 !important; color: #ff4c51 !important; } /* Dark/dim cards keep a heavier shadow — the shadcn float shadow is nearly invisible on a dark background. Radius/border are set by the .card rules in the design-layer section at the end of this file. */ .layout-dark .card, .layout-dim .card { box-shadow: 0 0.25rem 1.125rem 0 rgba(0, 0, 0, 0.3); } .layout-menu ul a { font-size: 1.1rem !important; } body .ui-button.ui-button-icon-only .ui-icon { margin-left: -0.73rem; font-size: 1.2rem !important; } /* This customizes the menu button icon in the topbar to use angle-left and bars. */ body .layout-wrapper .layout-topbar .menu-button i:before { content: none; } body .layout-wrapper .layout-topbar .menu-button i.fa-light:before { content: var(--fa); } .menu-button .fa-angle-left { display: inline-block !important; } .menu-button .fa-bars { display: none !important; } .layout-wrapper.layout-static-inactive .menu-button .fa-angle-left { display: none !important; } .layout-wrapper.layout-static-inactive .menu-button .fa-bars { display: inline-block !important; } .layout-wrapper.layout-overlay .menu-button .fa-angle-left { display: none !important; } .layout-wrapper.layout-overlay .menu-button .fa-bars { display: inline-block !important; } .layout-wrapper.layout-overlay.layout-overlay-active .menu-button .fa-angle-left { display: inline-block !important; } .layout-wrapper.layout-overlay.layout-overlay-active .menu-button .fa-bars { display: none !important; } @media (max-width: 991px) { .layout-wrapper .menu-button .fa-angle-left { display: none !important; } .layout-wrapper .menu-button .fa-bars { display: inline-block !important; } } .layout-wrapper.layout-mobile-active .menu-button .fa-angle-left { display: inline-block !important; } .layout-wrapper.layout-mobile-active .menu-button .fa-bars { display: none !important; } /* End of menu button icon customization */ /* Light mode colors */ .card-icon-VISA-light { color: #1a1f71; } .card-icon-MC-light { color: #FF5F00; } .card-icon-AMEX-light { color: #2e77bb; } .card-icon-DISC-light { color: #6E6E6E; } .card-icon-JCB-light { color: #007bc1; } .card-icon-OTHER-light { color: #DA1884; } /* Dark mode overrides */ .card-icon-VISA-dark { color: #ffffff; } .card-icon-MC-dark { color: #ffffff; } .card-icon-AMEX-dark { color: #ffffff; } .card-icon-DISC-dark { color: #ffffff; } .card-icon-JCB-dark { color: #ffffff; } .card-icon-OTHER-dark { color: #ffffff; } /* Dim mode overrides */ .card-icon-VISA-dim { color: #ffffff; } .card-icon-MC-dim { color: #ffffff; } .card-icon-AMEX-dim { color: #ffffff; } .card-icon-DISC-dim { color: #ffffff; } .card-icon-JCB-dim { color: #ffffff; } .card-icon-OTHER-dim { color: #ffffff; } body .ui-menu.ui-menubar { background: #ffffff !important; } /* SCROLLBAR */ /* Dark & Dim Sidebars -> Global Dark Mode */ .layout-sidebar-dark .layout-menu-container, .layout-sidebar-dim .layout-menu-container, html:has(.layout-sidebar-dark), html:has(.layout-sidebar-dim) { color-scheme: dark; } /* Light & Colorful Sidebars -> Global Light Mode */ .layout-sidebar-light .layout-menu-container, .layout-sidebar-white .layout-menu-container, .layout-sidebar-blue .layout-menu-container, .layout-sidebar-bluegray .layout-menu-container, .layout-sidebar-purple .layout-menu-container, .layout-sidebar-indigo .layout-menu-container, html:has(.layout-sidebar-light), html:has(.layout-sidebar-white), html:has(.layout-sidebar-purple), html:has(.layout-sidebar-indigo), html:has(.layout-sidebar-blue), html:has(.layout-sidebar-bluegray) { color-scheme: light; } /* This applies to the Main Page and the White Sidebar by default */ * { scroll-behavior: smooth; } /* Keep the viewport width stable; scrollbar-color provides Firefox styling. */ html { scrollbar-gutter: stable; scrollbar-color: rgba(0, 0, 0, 0.25) transparent; /* Dark Grey Thumb */ } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { /* Default: Dark Grey (Visible on White pages) */ background: rgba(0, 0, 0, 0.25); border-radius: 10px; } /* If the sidebar is Dark/Dim, make EVERYTHING (Main page + Sidebar) White */ html:has(.layout-sidebar-dark) ::-webkit-scrollbar-thumb, html:has(.layout-sidebar-dim) ::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.2); } html:has(.layout-sidebar-dark), html:has(.layout-sidebar-dim) { scrollbar-color: rgba(255, 255, 255, 0.2) transparent; } /* The page is technically "Light Mode", but the sidebar background is Dark Blue/Purple. Therefore, the Sidebar Scrollbar MUST be White (Light) to be visible. */ .layout-sidebar-blue .layout-menu-container::-webkit-scrollbar-thumb, .layout-sidebar-bluegray .layout-menu-container::-webkit-scrollbar-thumb, .layout-sidebar-brown .layout-menu-container::-webkit-scrollbar-thumb, .layout-sidebar-cyan .layout-menu-container::-webkit-scrollbar-thumb, .layout-sidebar-darkgray .layout-menu-container::-webkit-scrollbar-thumb, .layout-sidebar-deeppurple .layout-menu-container::-webkit-scrollbar-thumb, .layout-sidebar-green .layout-menu-container::-webkit-scrollbar-thumb, .layout-sidebar-indigo .layout-menu-container::-webkit-scrollbar-thumb, .layout-sidebar-orange .layout-menu-container::-webkit-scrollbar-thumb, .layout-sidebar-pink .layout-menu-container::-webkit-scrollbar-thumb, .layout-sidebar-purple .layout-menu-container::-webkit-scrollbar-thumb, .layout-sidebar-teal .layout-menu-container::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.25) !important; } /* Firefox support for the Colorful Sidebar specific containers */ .layout-sidebar-blue .layout-menu-container, .layout-sidebar-bluegray .layout-menu-container, .layout-sidebar-brown .layout-menu-container, .layout-sidebar-cyan .layout-menu-container, .layout-sidebar-darkgray .layout-menu-container, .layout-sidebar-deeppurple .layout-menu-container, .layout-sidebar-green .layout-menu-container, .layout-sidebar-indigo .layout-menu-container, .layout-sidebar-orange .layout-menu-container, .layout-sidebar-pink .layout-menu-container, .layout-sidebar-purple .layout-menu-container, .layout-sidebar-teal .layout-menu-container { scrollbar-color: rgba(255, 255, 255, 0.25) transparent !important; } /* Ensure the sidebar menu handles overflow */ .layout-menu-container { overflow-y: auto; } /* --- Global Custom Glow (Powered by JS Theme Sniffer) --- */ body .ui-inputfield.ui-state-focus, body .ui-inputfield:focus, body .ui-selectonemenu.ui-state-focus, body .ui-selectcheckboxmenu.ui-state-focus, body .ui-autocomplete-multiple-container.ui-state-focus, body .ui-chips.ui-state-focus > ul { /* Force the hard border to match the exact extracted color */ border-width: 1px !important; border-color: var(--active-theme-color) !important; outline: 0 none !important; /* Apply the exact color to the gradient shadow math */ box-shadow: 0 0 5px 1px color-mix(in sRGB, var(--active-theme-color) 40%, transparent), 0 0 10px 2px color-mix(in sRGB, var(--active-theme-color) 15%, transparent) !important; } body .ui-selectonemenu .ui-inputfield, body .ui-selectcheckboxmenu .ui-inputfield { border: none !important; box-shadow: none !important; background: transparent !important; margin-top: 0 !important; /* <--- Resets the margin so the text stays perfectly centered! */ } /* Pushes the input down just enough to clear the shadow. Only applies to items not in in inputgroups, and to the inputgroup container itself. */ body .p-field .ui-inputgroup { margin-top: 0.2rem; } body .p-field:not(:has(.ui-inputgroup)) { .ui-inputfield, .ui-selectonemenu, .ui-selectcheckboxmenu, .ui-chips, .ui-datepicker-trigger { margin-top: 0.2rem; } } /* Keep that offset on the autocomplete as a whole, not between its parts. */ body .p-field:not(:has(.ui-inputgroup)) .ui-autocomplete:has(> .ui-autocomplete-dropdown.ui-button) { margin-top: 0.2rem; } body .p-field:not(:has(.ui-inputgroup)) .ui-autocomplete > .ui-inputfield, body .p-field:not(:has(.ui-inputgroup)) .ui-autocomplete > .ui-autocomplete-multiple-container, body .p-field:not(:has(.ui-inputgroup)) .ui-autocomplete > .ui-autocomplete-dropdown.ui-button { margin-top: 0; } /* Standard Outlined Buttons */ body .ui-button.outlined-button:not(.secondary-button):hover, body .ui-button.outlined-button:not(.secondary-button):focus { box-shadow: inset 0 0 0 9999px var(--active-theme-color), 0 0 5px 1px color-mix(in sRGB, var(--active-theme-color) 40%, transparent), 0 0 10px 2px color-mix(in sRGB, var(--active-theme-color) 15%, transparent) !important; border-color: var(--active-theme-color) !important; transition: box-shadow 0.2s ease-in-out, border-color 0.2s ease-in-out; } /* Danger Outlined Buttons */ body .ui-button.outlined-button:is(.help-button, .info-button, .success-button, .warning-button, .danger-button):hover, body .ui-button.outlined-button:is(.help-button, .info-button, .success-button, .warning-button, .danger-button):focus { box-shadow: inset 0 0 0 9999px currentColor, 0 0 5px 1px color-mix(in sRGB, currentColor 40%, transparent), 0 0 10px 2px color-mix(in sRGB, currentColor 15%, transparent) !important; border-color: currentColor !important; } body .ui-button.outlined-button:not(.secondary-button):hover *, body .ui-button.outlined-button:not(.secondary-button):focus * { color: #fff !important; } /* Custom Radio Buttons for merchant app */ /* Hide default radio */ .custom-radio-card .ui-radiobutton-box { display: none; } /* Card style */ /* wrapper */ .radio-wrapper { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; width: 100%; align-items: stretch; /* important */ } /* each grid item */ .custom-radio-card { display: flex; height: 100%; /* important */ } /* make label/card stretch */ .card-label { display: flex; flex-direction: column; justify-content: center; align-items: center; flex: 1; /* important */ min-height: 140px; /* optional fixed equal height */ padding: 20px; border: 2px solid #ddd; border-radius: 10px; cursor: pointer; text-align: center; transition: all 0.25s ease; box-sizing: border-box; } /* Icon */ .icon { font-size: 24px; color: #666; } .custom-radio-card:has(.ui-state-active) .icon { color: #2196F3; } /* Title */ .title { font-weight: 600; font-size: 16px; } /* Description */ .desc { font-size: 13px; color: #777; } /* Hover */ .custom-radio-card:not(:has(.ui-state-disabled)) .card-label:hover { border-color: #2196F3; } .custom-radio-card:has(.ui-state-disabled) .card-label:hover { border-color: #ddd; background: #f5f5f5; box-shadow: none; } /* ✅ Selected state (your working solution) */ /* Selected state ONLY when not disabled */ .custom-radio-card:has(.ui-state-active):not(:has(.ui-state-disabled)) .card-label { border-color: #2196F3; background-color: #F4F8FF; box-shadow: 0 2px 8px rgba(33,150,243,0.2); } /* Selected icon color ONLY when not disabled */ .custom-radio-card:has(.ui-state-active):not(:has(.ui-state-disabled)) .icon { color: #2196F3; } .custom-radio-card:has(.ui-state-disabled) .card-label { cursor: not-allowed; opacity: 0.6; border-color: #ddd !important; background: #f5f5f5; } /* Selected icon color */ .custom-radio-card:has(.ui-state-active) .icon { color: #2196F3; } /* Optional: subtle click effect */ .card-label:active { transform: scale(0.98); } /* Tablet */ @media (max-width: 1024px) { .radio-wrapper { grid-template-columns: repeat(2, 1fr); } } /* Mobile */ @media (max-width: 640px) { .radio-wrapper { grid-template-columns: 1fr; } } @media (max-width: 640px) { .card-label { padding: 16px; } .title { font-size: 15px; } .desc { font-size: 12px; } } @media (max-width: 900px) { .radio-wrapper { grid-template-columns: repeat(2, 1fr); } } .radio-wrapper { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; } /* Overrides to use Font Awesome icons in Datatable Row Editors */ body .ui-datatable .ui-datatable-data > tr .ui-row-editor .ui-icon.ui-icon-pencil, body .ui-datatable .ui-datatable-data > tr .ui-row-editor .ui-icon.ui-icon-check, body .ui-datatable .ui-datatable-data > tr .ui-row-editor .ui-icon.ui-icon-close { font-family: "Font Awesome 7 Pro" !important; font-weight: 400 !important; background-image: none !important; text-indent: 0 !important; font-size: 1.2rem; } body .ui-datatable .ui-datatable-data > tr .ui-row-editor .ui-icon.ui-icon-pencil:before { content: "\f044" !important; /* Unicode font value for fa-pen-to-square */ } body .ui-datatable .ui-datatable-data > tr .ui-row-editor .ui-icon.ui-icon-check:before { content: "\f00c" !important; /* Unicode font value for fa-check */ } body .ui-datatable .ui-datatable-data > tr .ui-row-editor .ui-icon.ui-icon-close:before { content: "\f00d" !important; /* Unicode font value for fa-xmark */ } .l2p-text-wrap { display: block; white-space: normal; overflow-wrap: anywhere; word-break: break-word; } /* ===================================================================== shadcn-inspired design layer (moved here from shadcn.css) STRUCTURE ONLY — radius, shadows, spacing, hairline borders. All colors stay owned by the Diamond theme; borders and muted text derive from `currentColor` so they adapt to every scheme. Kept at the END of custom.css so it wins over the earlier rules, and — since custom.css is loaded last by every portal's template — it applies portal-wide. ===================================================================== */ /* ---- Cards: hairline border + soft shadow + larger radius ----------- */ .card { border: 1px solid color-mix(in srgb, currentColor 12%, transparent); border-radius: var(--l2p-radius-lg) !important; /* beat the earlier .card 6px !important */ box-shadow: var(--l2p-shadow-float); /* even shadow, matches topbar + dialog */ margin-bottom: 1rem; /* halve Diamond's 2rem card-to-card gap */ } /* Secondary text: muted relative to the theme's own text color, so it adapts to every scheme (.text-secondary is not defined by the theme). */ .text-secondary { color: color-mix(in srgb, currentColor 60%, transparent); } /* ---- Buttons: medium weight + 6px radius (keep theme/severity color) */ body .ui-button:not(.ui-avatar):not(.rounded-button):not(.ui-button-rounded):not(.ui-paginator-page) { border-radius: var(--l2p-radius-md); font-weight: 500; } /* ---- Pill segmented control (l2p-pill-select) ------------------------ */ /* Add styleClass="l2p-pill-select" to a p:selectOneButton to render it as a single card-like pill. The container owns the card surface, float shadow and pill radius. Its segments stay borderless and are clipped to that pill shape, so active and hover colors reach every edge without seams. */ /* The pill itself — chrome matches .card */ body .ui-selectonebutton.l2p-pill-select { display: inline-flex; /* tight wrap; inline-block leaves a baseline gap */ align-items: stretch; margin: 0.4rem 0; /* reserve the height of a date field invisibly */ padding: 0; /* PrimeFaces adds 1px, leaving an unfilled rim */ overflow: hidden; /* clip segment states to the pill shape */ border-radius: 999px; background: var(--l2p-surface-card); border: 0 none; box-shadow: var(--l2p-shadow-float); } .layout-dark .ui-selectonebutton.l2p-pill-select, .layout-dim .ui-selectonebutton.l2p-pill-select { box-shadow: 0 0.25rem 1.125rem 0 rgba(0, 0, 0, 0.3); /* heavier dark/dim card shadow */ } /* Borderless segments let the selected color reach the pill boundary. */ body .ui-selectonebutton.l2p-pill-select .ui-button { align-self: stretch; margin: 0; border: 0 none; border-radius: 0 !important; } body .ui-selectonebutton.l2p-pill-select .ui-button.ui-state-active { background: var(--active-theme-color); } body .ui-selectonebutton.l2p-pill-select .ui-button .ui-button-text { padding-top: 0.25em; padding-bottom: 0.25em; } body .ui-selectonebutton.l2p-pill-select .ui-button:not(.ui-state-active):not(.ui-state-hover) { background: transparent; } /* ---- Status badges: full pill (demo-*.css ships them at 2px) -------- */ /* inline-block is required — inline badges render rounded-corner backgrounds jagged, with the row/cell color bleeding through the curve. */ body .order-badge, body .product-badge, body .customer-badge { border-radius: 999px; display: inline-block; } /* ---- Inputs: 6px radius + neutral hairline border ------------------- */ body .ui-inputtext, body .ui-inputfield, body .ui-selectonemenu, body .ui-selectcheckboxmenu, body .ui-dropdown, body .ui-multiselect, body .ui-chips > ul { border-radius: var(--l2p-radius-md); } /* ---- PrimeFaces date picker input + trigger: one connected control --- */ body .ui-calendar.ui-trigger-calendar { display: inline-flex; align-items: stretch; vertical-align: middle; } body .ui-calendar.ui-trigger-calendar > input.ui-inputfield { flex: 1 1 auto; min-width: 0; border-radius: var(--l2p-radius-md) 0 0 var(--l2p-radius-md) !important; } body .ui-calendar.ui-trigger-calendar > .ui-datepicker-trigger.ui-button { position: relative; right: auto; flex: 0 0 auto; margin-left: -1px; border-radius: 0 var(--l2p-radius-md) var(--l2p-radius-md) 0 !important; } /* ---- Autocomplete input + dropdown: one connected control ----------- */ body .ui-autocomplete:has(> .ui-autocomplete-dropdown.ui-button) { display: inline-flex; align-items: stretch; vertical-align: middle; } body .ui-autocomplete > .ui-autocomplete-input.ui-autocomplete-dd-input, body .ui-autocomplete > .ui-autocomplete-multiple-container.ui-autocomplete-dd-multiple-container { flex: 1 1 auto; min-width: 0; border-radius: var(--l2p-radius-md) 0 0 var(--l2p-radius-md) !important; } body .ui-autocomplete > .ui-autocomplete-dropdown.ui-button { position: relative; right: auto; flex: 0 0 auto; margin-left: -1px; border-radius: 0 var(--l2p-radius-md) var(--l2p-radius-md) 0 !important; } /* ---- Input groups: remove curves and double borders at inner seams -- */ body .ui-inputgroup > :not(:last-child), body .ui-inputgroup > :not(:last-child) .ui-inputfield { border-top-right-radius: 0 !important; border-bottom-right-radius: 0 !important; } body .ui-inputgroup > :not(:first-child) { margin-left: -1px; } body .ui-inputgroup > :not(:first-child), body .ui-inputgroup > :not(:first-child) .ui-inputfield { border-top-left-radius: 0 !important; border-bottom-left-radius: 0 !important; } body .ui-inputgroup > :first-child, body .ui-inputgroup > :first-child .ui-inputfield { border-top-left-radius: var(--l2p-radius-md) !important; border-bottom-left-radius: var(--l2p-radius-md) !important; } body .ui-inputgroup > :last-child, body .ui-inputgroup > :last-child .ui-inputfield { border-top-right-radius: var(--l2p-radius-md) !important; border-bottom-right-radius: var(--l2p-radius-md) !important; } /* ---- Paginator rows-per-page dropdown (20/30/50): structure only. Diamond only sets margin/display on it (bare native ignores CSS; opt into the styleable picker (Chromium 134+; other browsers keep the native popup). */ body .ui-paginator .ui-paginator-rpp-options, body .ui-paginator .ui-paginator-rpp-options::picker(select) { appearance: base-select; } /* base-select renders the value and the arrow as separate elements; lay the closed button out as a single row (Diamond's inline-block lets them stack). */ @supports (appearance: base-select) { body .ui-paginator .ui-paginator-rpp-options { display: inline-flex; align-items: center; gap: 0.3rem; white-space: nowrap; } } body .ui-paginator .ui-paginator-rpp-options::picker(select) { border: 1px solid color-mix(in srgb, currentColor 12%, transparent); border-radius: var(--l2p-radius-md); box-shadow: 0 0 5px 1px color-mix(in sRGB, var(--active-theme-color) 40%, transparent), 0 0 10px 2px color-mix(in sRGB, var(--active-theme-color) 15%, transparent); padding: 0.25rem; margin-top: 0.25rem; } body .ui-paginator .ui-paginator-rpp-options option { padding: 0.35rem 0.75rem; border-radius: calc(var(--l2p-radius-md) - 2px); cursor: pointer; } body .ui-paginator .ui-paginator-rpp-options option:hover { background: color-mix(in sRGB, var(--active-theme-color) 15%, transparent); } /* ---- Dialog + topbar: matching floating-surface style (radius/border/shadow) */ body .ui-dialog { border: 1px solid color-mix(in srgb, currentColor 12%, transparent) !important; border-radius: var(--l2p-radius-lg) !important; box-shadow: var(--l2p-shadow-float) !important; } /* Round the inner sections so their backgrounds follow the 20px corners, otherwise the square titlebar/content corners poke past the border. */ body .ui-dialog .ui-dialog-titlebar { border-top-left-radius: var(--l2p-radius-lg); border-top-right-radius: var(--l2p-radius-lg); } body .ui-dialog .ui-dialog-content:last-child { border-bottom-left-radius: var(--l2p-radius-lg); border-bottom-right-radius: var(--l2p-radius-lg); } body .ui-dialog .ui-dialog-footer { border-bottom-left-radius: var(--l2p-radius-lg); border-bottom-right-radius: var(--l2p-radius-lg); } /* ---- Topbar: matches the dialog (radius / border / shadow). Out-specifies the floating inline