/* aqary-forms.css — AqaryPro form extension layer * Loaded after aqary-tokens.css in css-files.php and eng-css-files.php. * Contains ONLY the approved custom extensions listed in DESIGN.md §8. * Everything else uses standard Bootstrap 4.0 + aqary-skin.css. */ /* ── 1. btn-group-toggle active state ─────────────────────────────────── * aqary-skin.css sets background:transparent !important on .btn-outline-primary, * which blocks Bootstrap's built-in .active fill. Override it here. */ body .btn-group-toggle .btn-outline-primary.active, body .btn-group-toggle .btn-outline-primary:active { background-color: var(--aq-brand-500) !important; border-color: var(--aq-brand-500) !important; color: #fff !important; } body .btn-group-toggle .btn-outline-primary:not(.active):hover { background-color: var(--aq-brand-50) !important; color: var(--aq-brand-600) !important; } /* Utility toggle — warning (Yes) / secondary (No) variants */ body .btn-group-toggle .btn-outline-warning.active, body .btn-group-toggle .btn-outline-warning:active { background-color: var(--aq-warn-500, #ff9f43) !important; border-color: var(--aq-warn-500, #ff9f43) !important; color: #fff !important; } body .btn-group-toggle .btn-outline-secondary.active, body .btn-group-toggle .btn-outline-secondary:active { background-color: var(--aq-ink-400, #8f9bb3) !important; border-color: var(--aq-ink-400, #8f9bb3) !important; color: #fff !important; } /* ── 2. Card polish ───────────────────────────────────────────────────── * Soft shadow + 16-px radius over Bootstrap defaults. */ .card { box-shadow: var(--aq-shadow-card); border-radius: var(--aq-r-2xl); border: 1px solid var(--aq-surface-border); } .card-header { border-bottom: 1px solid var(--aq-surface-border); background: var(--aq-surface-card); border-radius: var(--aq-r-2xl) var(--aq-r-2xl) 0 0 !important; } .card-header .card-title { font-size: 1rem; font-weight: 600; color: var(--aq-ink-800); margin-bottom: 0; } .card-header .card-title .ph { color: var(--aq-brand-500); margin-left: .35em; /* RTL: icon on the right of text */ margin-right: 0; } /* ── 3. Sticky offset ─────────────────────────────────────────────────── * Keep sticky sidebar 80 px from top (clears the fixed top nav). */ .sticky-top { top: 80px; } /* ── LoadingOverlay v2 — token-driven backdrop + stacking ────────────────── * z-index 1030: above .sticky-top (1020) and all card stacking contexts, * below Bootstrap's modal-backdrop (1040) and modals (1050). * * position: fixed — the plugin defaults to position:absolute when the target * is not , anchoring the overlay to the document-offset of .app-content. * During programmatic scroll-to-top (e.g. validation error reveal) the overlay * scrolls with the page and disappears. Forcing fixed + inset-0 locks it to * the viewport for the full duration of any AJAX call, regardless of scroll. * resizeInterval is disabled in LoadingOverlaySetup so the plugin's setInterval * no longer fights this rule by writing absolute top/left inline styles. * * The plugin sets background inline (transparent via LoadingOverlaySetup), * so we own the backdrop entirely here using !important. * * backdrop-filter: blur(2px) gives the frosted-glass feel that matches the * modal pattern in this design system. */ .loadingoverlay { position: fixed !important; top: 0 !important; left: 0 !important; width: 100% !important; height: 100% !important; z-index: 1030 !important; background: rgba(244, 246, 249, 0.82) !important; /* --aq-surface @82% */ background: color-mix(in srgb, var(--aq-surface) 82%, transparent) !important; -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); } /* Brand-blue spinner: imageColor in LoadingOverlaySetup sets fill via inline * style. This rule acts as a CSS-level safety net for specificity edge cases. */ .loadingoverlay svg circle { fill: var(--aq-brand-500, #1E9FF2); } /* Full-height sticky summary card: header fixed, summary body scrolls, footer * pinned to the bottom. Desktop/tablet only — below lg the card returns to flow. */ @media (min-width: 992px) { .aq-form-page .card.sticky-top { display: flex; flex-direction: column; height: calc(100vh - 96px); } .aq-form-page .card.sticky-top > .card-header, .aq-form-page .card.sticky-top > .card-footer { flex: 0 0 auto; } .aq-form-page .card.sticky-top > .card-body { flex: 1 1 auto; min-height: 0; /* lets the flex child shrink below content so overflow-y engages */ overflow-y: auto; } } /* ── 4. Wizard step bar ───────────────────────────────────────────────── * Multi-step progress indicator for add/renew agreement second-step pages. */ .aq-wizard { display: flex; align-items: center; gap: 0; padding: 1rem 0 .5rem; } .aq-wizard__step { display: flex; flex-direction: column; align-items: center; gap: .3rem; flex: 0 0 auto; font-size: .8125rem; color: var(--aq-ink-400); } .aq-wizard__dot { width: 32px; height: 32px; border-radius: 50%; border: 2px solid var(--aq-ink-300); display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: .875rem; background: var(--aq-surface-card); color: var(--aq-ink-400); transition: all .2s ease; } .aq-wizard__step--active .aq-wizard__dot { border-color: var(--aq-brand-500); background: var(--aq-brand-500); color: #fff; } .aq-wizard__step--active { color: var(--aq-brand-500); font-weight: 600; } .aq-wizard__step--done .aq-wizard__dot { border-color: var(--aq-success-500); background: var(--aq-success-500); color: #fff; } .aq-wizard__step--done { color: var(--aq-success-600); } .aq-wizard__connector { flex: 1; height: 2px; background: var(--aq-surface-border); margin-bottom: 1.3rem; } .aq-wizard__step--done ~ .aq-wizard__connector, .aq-wizard__connector.done { background: var(--aq-success-500); } /* ── 5. Edit-mode diff arrow ─────────────────────────────────────────── */ .aq-diff-arrow { display: inline-block; margin: 0 .25em; color: var(--aq-ink-400); font-size: .85em; } /* ── 6. Field hint icon ──────────────────────────────────────────────── */ .aq-field-hint { display: inline-flex; align-items: center; color: var(--aq-ink-400); cursor: help; margin-right: .25em; /* RTL: sits to the right of the label */ vertical-align: middle; } .aq-field-hint:hover { color: var(--aq-brand-500); } /* ── 7. RTL-specific overrides ───────────────────────────────────────── */ [dir="rtl"] .card-header .card-title .ph { margin-left: 0; margin-right: .35em; } [dir="rtl"] .aq-field-hint { margin-right: 0; margin-left: .25em; } /* ── 8. Input-group corner-collapse ────────────────────────────────────── * aqary-skin.css sets border-radius:…!important on every .form-control and * .input-group-text, which defeats Bootstrap 4.0's built-in flatten rules. * Restore seamless join: flat on the join side, rounded on the outer end, * one shared 1px border (no gap). */ .input-group-text { border: 1px solid var(--aq-surface-border) !important; } /* LTR: append is on the right → flatten input's right corners + append's left corners */ .input-group > .form-control:not(:last-child) { border-top-right-radius: 0 !important; border-bottom-right-radius: 0 !important; } .input-group-append .input-group-text, .input-group-append .btn { border-top-left-radius: 0 !important; border-bottom-left-radius: 0 !important; } .input-group-append { margin-left: -1px; } /* RTL: append is on the visual left → flatten input's left corners + append's right corners */ [dir="rtl"] .input-group > .form-control:not(:last-child) { border-top-right-radius: var(--aq-r-lg) !important; border-bottom-right-radius: var(--aq-r-lg) !important; border-top-left-radius: 0 !important; border-bottom-left-radius: 0 !important; } [dir="rtl"] .input-group-append .input-group-text, [dir="rtl"] .input-group-append .btn { border-top-left-radius: var(--aq-r-lg) !important; border-bottom-left-radius: var(--aq-r-lg) !important; border-top-right-radius: 0 !important; border-bottom-right-radius:0 !important; } [dir="rtl"] .input-group-append { margin-left: 0; margin-right: -1px; } /* ── 9. btn-group / btn-group-toggle corner-collapse ───────────────────── * Same root cause as §8. Restore: first & last buttons keep outer radius; * middle buttons are fully flat; seam collapsed to one shared border. */ /* LTR: first button → flat right; last button → flat left; middle → both flat */ .btn-group > .btn:not(:last-child):not(.dropdown-toggle) { border-top-right-radius: 0 !important; border-bottom-right-radius: 0 !important; } .btn-group > .btn:not(:first-child) { border-top-left-radius: 0 !important; border-bottom-left-radius: 0 !important; margin-left: -1px; } /* RTL: first child is the rightmost (outer-right edge), last child is leftmost (outer-left edge). * Override the LTR rules for the two edge buttons; middle buttons stay all-flat. */ [dir="rtl"] .btn-group > .btn:first-child { border-top-right-radius: var(--aq-r-md) !important; border-bottom-right-radius: var(--aq-r-md) !important; border-top-left-radius: 0 !important; border-bottom-left-radius: 0 !important; } [dir="rtl"] .btn-group > .btn:last-child { border-top-left-radius: var(--aq-r-md) !important; border-bottom-left-radius: var(--aq-r-md) !important; border-top-right-radius: 0 !important; border-bottom-right-radius:0 !important; } [dir="rtl"] .btn-group > .btn:not(:first-child) { margin-left: 0; margin-right: -1px; } /* ── 10. Form page — unblock position:sticky + summary row restyle ─────── * .app-content.content has overflow:hidden (theme/app-assets/css/components.css) * which clips position:sticky. Scope the override via .aq-form-page added to * the root div of each affected view, so only those pages are touched. */ .app-content.content.aq-form-page { overflow: visible !important; } /* Summary sidebar rows */ .aq-summary-row { display: flex; align-items: center; padding: .45rem .75rem; border-bottom:1px solid var(--aq-surface-border); } .aq-summary-row:last-child { border-bottom: 0; } .aq-summary-row__label { flex: 0 0 50%; text-align: right; color: var(--aq-ink-400); font-size: .8125rem; padding-left:.5rem; } .aq-summary-row__value { flex: 1 1 auto; text-align: center; font-weight: 600; font-size: .875rem; } /* LTR mirror */ [dir="ltr"] .aq-summary-row__label { text-align: left; padding-left: 0; padding-right: .5rem; } /* ── 11. RTL arrow flip on forward-direction buttons ───────────────────── * ph-arrow-right points → which reads "backward" in RTL. Mirror the glyph. */ [dir="rtl"] .btn .ph-arrow-right { display: inline-block; transform: scaleX(-1); } /* ── 12. Contract History timeline (Agreements > View > Contract History tab) * Flex-row rail + panel per item rather than absolute-positioned dots on a * shared line — avoids left/right offset math entirely, so it reads correctly * in both RTL and LTR with no mirrored override needed. */ .aq-timeline { display: flex; flex-direction: column; } .aq-timeline__item { display: flex; gap: 14px; } .aq-timeline__rail { display: flex; flex-direction: column; align-items: center; flex: 0 0 auto; } .aq-timeline__dot { width: 12px; height: 12px; border-radius: 50%; flex: 0 0 auto; margin-top: 18px; background: var(--aq-brand-600); border: 2px solid var(--aq-surface-card); box-shadow: 0 0 0 2px var(--aq-surface-border); } .aq-timeline__line { width: 2px; flex: 1 1 auto; min-height: 12px; margin: 4px 0; background: var(--aq-surface-border); } .aq-timeline__item:last-child .aq-timeline__line { display: none; } .aq-timeline__panel { flex: 1 1 auto; min-width: 0; margin-bottom: 16px; } .aq-timeline__item:last-child .aq-timeline__panel { margin-bottom: 0; } /* ── 13. SweetAlert2 form-dialog fields (aq-dialog.js's aqFormDialog()) * Loaded app-wide (aq-dialog.js is a global include), not scoped to any one * realm — replaces the `style="margin:...; width:100%;"` attributes that * used to be hand-written on every swal2-input/select/textarea inside a * Swal `html:` template. */ .aq-swal-field { margin: 0 0 10px; } .aq-swal-field--full { width: 100%; } .aq-swal-field--last { margin: 0; } .aq-swal-code { font-size: 1.2rem; }