/* * * ========================================================== * ADMIN.SCSS * ========================================================== * * Main style file of the administration area. Written in SCSS. * */ /* * * ========================================================== * SHARED.SCSS * ========================================================== * * File shared by both admin and client * */ /* * * ========================================================== * ICONS.SCSS * ========================================================== * * Icons file shared by admin and client * */ /* Light-theme variables (default). Dark overrides live on .uxc-dark-mode (later in this file, equal specificity, wins when the class is on ). */ :root { --uxc-bg-primary: #ffffff; --uxc-bg-secondary: rgba(127, 127, 127, 0.06); --uxc-bg-tertiary: #f5f5f5; --uxc-text-primary: #1a1a1a; --uxc-text-secondary: #6b6b6b; --uxc-text-muted: #999999; --uxc-border-color: #b0b0b0; --uxc-accent: #a37a29; --uxc-accent-rgb: 163, 122, 41; --uxc-error: #ca3434; --uxc-success: #4caf50; --uxc-warning: #ffc107; --uxc-hover-bg: rgba(0, 0, 0, 0.05); --uxc-input-bg: #ffffff; --uxc-card-bg: #ffffff; --uxc-shadow: rgba(0, 0, 0, 0.1); } @font-face { font-family: 'Uncheckout Icons'; src: url("../media/fonts/icons.ttf?v1") format("truetype"), url("../media/fonts/icons.woff?v1") format("woff"), url("../media/fonts/icons.svg?v1#Uncheckout-Icons") format("svg"); font-weight: normal; font-style: normal; font-display: block; } [class^="uxc-icon-"]:before, [class*=" uxc-icon-"]:before { font-family: "Uncheckout Icons" !important; font-style: normal !important; font-weight: normal !important; font-variant: normal !important; text-transform: none !important; speak: none; line-height: 1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* Icons rendered as inline (nav items, etc.) must not also paint the font glyph via ::before — that doubled every nav icon (old font glyph + new SVG). */ [class^="uxc-icon-"]:has(svg)::before, [class*=" uxc-icon-"]:has(svg)::before { content: none; } .uxc-icon-copy:before { content: "\e90d"; } .uxc-icon-back:before { content: "\e90c"; } .uxc-icon-search:before { content: "\e90b"; } .uxc-icon-shuffle:before { content: "\e904"; } .uxc-icon-automation:before { content: "\e905"; } .uxc-icon-bar-chart:before { content: "\e906"; } .uxc-icon-delete:before { content: "\e907"; } .uxc-icon-menu:before { content: "\e908"; } .uxc-icon-plus-2:before { content: "\e909"; } .uxc-icon-settings:before { content: "\e90a"; } .uxc-icon-close:before { content: "\e903"; } .uxc-icon-help:before { content: "\e902"; } .uxc-icon-check:before { content: "\e901"; } .uxc-icon-loader:before { content: "\e900"; } .uxc-icon-download:before { content: "\66"; } .uxc-icon-clip:before { content: "\65"; } .uxc-icon-filters:before { content: "\e90e"; } .uxc-icon-arrow-down:before { content: "\61"; } .uxc-icon-user:before { content: "\6e"; } .uxc-icon-arrow-right:before { content: "\ea3c"; } .uxc-icon-arrow-left:before { content: "\ea40"; } .uxc-icon-clock:before { content: "\46"; } .uxc-icon-calendar:before { content: "\62"; } .uxc-icon-image:before { content: "\e90f"; } .uxc-icon-theme-toggle:before { content: "\e910"; } /* Nav icons now use inline ; suppress the legacy icon-font glyph (::before) for them. Scoped to .uxc-nav so icon-font usage elsewhere is unaffected. :has(svg) covers any converted icon; the explicit classes are a fallback for older browsers. */ .uxc-nav i:has(svg):before, .uxc-nav i.uxc-icon-bar-chart:before, .uxc-nav i.uxc-icon-settings:before, .uxc-nav i.uxc-icon-user:before, .uxc-nav i.uxc-icon-calendar:before { content: none; } /* Moon and sun icons for theme toggle */ .uxc-icon-moon, .uxc-icon-sun { width: 16px; height: 16px; display: inline-block; position: relative; vertical-align: middle; } .uxc-icon-moon:before, .uxc-icon-sun:before { width: 16px; height: 16px; background-repeat: no-repeat; background-position: center; background-size: contain; } .uxc-icon-moon:before { content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .uxc-icon-sun:before { content: ""; position: absolute; top: 52%; left: 50%; transform: translate(-50%, -50%); } /* Specific overrides for theme toggle button icons */ .uxc-btn-icon#uxc-theme-toggle .uxc-icon-moon, .uxc-btn-icon#uxc-theme-toggle .uxc-icon-sun { width: 16px !important; height: 24px !important; } .uxc-btn-icon#uxc-theme-toggle .uxc-icon-moon:before, .uxc-btn-icon#uxc-theme-toggle .uxc-icon-sun:before { width: 16px !important; height: 24px !important; top: 50% !important; } /* Moon icon SVG */ .uxc-icon-moon:before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='800px' height='800px' viewBox='0 0 16 16' fill='%23464646' class='bi bi-moon-stars-fill'%3E%0A %3Cpath d='M6 .278a.768.768 0 0 1 .08.858 7.208 7.208 0 0 0-.878 3.46c0 4.021 3.278 7.277 7.318 7.277.527 0 1.04-.055 1.533-.16a.787.787 0 0 1 .81.316.733.733 0 0 1-.031.893A8.349 8.349 0 0 1 8.344 16C3.734 16 0 12.286 0 7.71 0 4.266 2.114 1.312 5.124.06A.752.752 0 0 1 6 .278z'/%3E%0A %3Cpath d='M10.794 3.148a.217.217 0 0 1 .412 0l.387 1.162c.173.518.579.924 1.097 1.097l1.162.387a.217.217 0 0 1 0 .412l-1.162.387a1.734 1.734 0 0 0-1.097 1.097l-.387 1.162a.217.217 0 0 1-.412 0l-.387-1.162A1.734 1.734 0 0 0 9.31 6.593l-1.162-.387a.217.217 0 0 1 0-.412l1.162-.387a1.734 1.734 0 0 0 1.097-1.097l.387-1.162zM13.863.099a.145.145 0 0 1 .274 0l.258.774c.115.346.386.617.732.732l.774.258a.145.145 0 0 1 0 .274l-.774.258a1.156 1.156 0 0 0-.732.732l-.258.774a.145.145 0 0 1-.274 0l-.258-.774a1.156 1.156 0 0 0-.732-.732l-.774-.258a.145.145 0 0 1 0-.274l.774-.258c.346-.115.617-.386.732-.732L13.863.1z'/%3E%0A%3C/svg%3E%0A"); } /* Sun icon SVG */ .uxc-icon-sun:before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%0A%3Cg%3E%0A %3Cpath fill='%23464646' d='M31.998%2C14.002c-9.941%2C0-18%2C8.059-18%2C18s8.059%2C18%2C18%2C18 s18-8.059%2C18-18S41.939%2C14.002%2C31.998%2C14.002z M42.998%2C33.002c-0.553%2C0-1-0.447-1-1c0-5.523-4.478-10-10-10c-0.553%2C0-1-0.447-1-1 s0.447-1%2C1-1c6.627%2C0%2C12%2C5.373%2C12%2C12C43.998%2C32.555%2C43.551%2C33.002%2C42.998%2C33.002z'/%3E%0A %3Cpath fill='%23464646' d='M63%2C31H53c-0.553%2C0-1%2C0.447-1%2C1s0.447%2C1%2C1%2C1h10 c0.553%2C0%2C1-0.447%2C1-1S63.553%2C31%2C63%2C31z'/%3E%0A %3Cpath fill='%23464646' d='M11.457%2C36.47l-3.863%2C1.035c-0.534%2C0.144-0.851%2C0.692-0.707%2C1.226 c0.143%2C0.533%2C0.69%2C0.85%2C1.225%2C0.706l3.863-1.035c0.533-0.143%2C0.85-0.69%2C0.707-1.225C12.539%2C36.644%2C11.99%2C36.327%2C11.457%2C36.47z'/%3E%0A %3Cpath fill='%23464646' d='M49.32%2C22c0.277%2C0.479%2C0.888%2C0.643%2C1.367%2C0.366l8.66-5 c0.479-0.276%2C0.643-0.888%2C0.365-1.366c-0.275-0.479-0.887-0.642-1.365-0.365l-8.66%2C5C49.208%2C20.912%2C49.045%2C21.521%2C49.32%2C22z'/%3E%0A %3Cpath fill='%23464646' d='M17.858%2C46.143c-0.39-0.391-1.023-0.389-1.414%2C0l-2.828%2C2.828 c-0.391%2C0.391-0.39%2C1.025%2C0.001%2C1.415c0.39%2C0.391%2C1.022%2C0.39%2C1.413-0.001l2.828-2.828C18.249%2C47.168%2C18.249%2C46.534%2C17.858%2C46.143z'/%3E%0A %3Cpath fill='%23464646' d='M42%2C14.68c0.479%2C0.276%2C1.09%2C0.113%2C1.367-0.366l5-8.66 C48.644%2C5.175%2C48.48%2C4.563%2C48%2C4.287c-0.478-0.276-1.088-0.112-1.365%2C0.366l-4.999%2C8.661C41.358%2C13.793%2C41.522%2C14.403%2C42%2C14.68z'/%3E%0A %3Cpath fill='%23464646' d='M26.824%2C51.318c-0.532-0.143-1.08%2C0.176-1.225%2C0.707l-1.035%2C3.863 c-0.143%2C0.535%2C0.176%2C1.083%2C0.709%2C1.226c0.533%2C0.144%2C1.08-0.173%2C1.223-0.708l1.035-3.863C27.676%2C52.012%2C27.359%2C51.463%2C26.824%2C51.318 z'/%3E%0A %3Cpath fill='%23464646' d='M32%2C12c0.554%2C0%2C1.001-0.446%2C1.002-1V1c0-0.553-0.447-1-1.002-1 c-0.551%2C0-0.998%2C0.447-0.999%2C1l0.001%2C10C31.002%2C11.553%2C31.449%2C12%2C32%2C12z'/%3E%0A %3Cpath fill='%23464646' d='M38.402%2C52.025c-0.141-0.532-0.689-0.85-1.225-0.707 c-0.533%2C0.143-0.848%2C0.692-0.707%2C1.225l1.035%2C3.863c0.144%2C0.535%2C0.693%2C0.85%2C1.227%2C0.707s0.849-0.689%2C0.705-1.225L38.402%2C52.025z'/%3E%0A %3Cpath fill='%23464646' d='M20.637%2C14.312c0.275%2C0.479%2C0.887%2C0.643%2C1.363%2C0.367 c0.48-0.277%2C0.645-0.887%2C0.368-1.367l-5-8.66C17.092%2C4.174%2C16.48%2C4.01%2C16%2C4.287c-0.477%2C0.275-0.641%2C0.887-0.365%2C1.365 L20.637%2C14.312z'/%3E%0A %3Cpath fill='%23464646' d='M47.558%2C46.142c-0.388-0.39-1.022-0.39-1.414%2C0 c-0.391%2C0.39-0.388%2C1.024%2C0%2C1.414l2.828%2C2.828c0.392%2C0.392%2C1.025%2C0.389%2C1.415-0.001c0.391-0.39%2C0.391-1.021-0.001-1.413 L47.558%2C46.142z'/%3E%0A %3Cpath fill='%23464646' d='M4.654%2C17.365l8.662%2C4.999c0.477%2C0.276%2C1.088%2C0.113%2C1.363-0.364 c0.277-0.479%2C0.115-1.09-0.364-1.367l-8.661-5C5.176%2C15.356%2C4.564%2C15.52%2C4.287%2C16C4.013%2C16.477%2C4.176%2C17.089%2C4.654%2C17.365z'/%3E%0A %3Cpath fill='%23464646' d='M52.027%2C38.4l3.863%2C1.035c0.535%2C0.145%2C1.082-0.176%2C1.225-0.709 c0.144-0.532-0.172-1.079-0.707-1.223l-3.863-1.035c-0.531-0.145-1.081%2C0.173-1.225%2C0.707C51.176%2C37.709%2C51.496%2C38.256%2C52.027%2C38.4 z'/%3E%0A %3Cpath fill='%23464646' d='M12%2C32c0.001-0.554-0.445-1-0.998-1.002L1%2C31 c-0.552%2C0-1%2C0.445-1%2C1c0.001%2C0.551%2C0.448%2C1%2C1.001%2C1l10.001-0.002C11.553%2C32.998%2C12.001%2C32.552%2C12%2C32z'/%3E%0A %3Cpath fill='%23464646' d='M52.545%2C27.529l3.863-1.035c0.535-0.143%2C0.85-0.693%2C0.706-1.227 c-0.142-0.531-0.688-0.848-1.224-0.705l-3.863%2C1.035c-0.533%2C0.141-0.85%2C0.691-0.707%2C1.225 C51.461%2C27.356%2C52.012%2C27.67%2C52.545%2C27.529z'/%3E%0A %3Cpath fill='%23464646' d='M14.68%2C42c-0.275-0.48-0.886-0.644-1.365-0.368l-8.661%2C5.002 C4.176%2C46.91%2C4.01%2C47.52%2C4.287%2C48c0.277%2C0.477%2C0.889%2C0.641%2C1.367%2C0.365l8.66-5.002C14.791%2C43.088%2C14.957%2C42.479%2C14.68%2C42z'/%3E%0A %3Cpath fill='%23464646' d='M46.144%2C17.856c0.389%2C0.392%2C1.022%2C0.388%2C1.414%2C0l2.828-2.828 c0.392-0.392%2C0.39-1.024-0.002-1.415c-0.388-0.39-1.021-0.391-1.412%2C0.001l-2.828%2C2.828C45.752%2C16.83%2C45.754%2C17.466%2C46.144%2C17.856 z'/%3E%0A %3Cpath fill='%23464646' d='M22%2C49.32c-0.479-0.277-1.088-0.113-1.365%2C0.364l-5%2C8.663 c-0.275%2C0.478-0.115%2C1.088%2C0.365%2C1.365c0.479%2C0.274%2C1.09%2C0.11%2C1.367-0.367l4.998-8.662C22.641%2C50.207%2C22.48%2C49.597%2C22%2C49.32z'/%3E%0A %3Cpath fill='%23464646' d='M37.178%2C12.68c0.531%2C0.145%2C1.078-0.176%2C1.225-0.707l1.035-3.863 c0.143-0.535-0.176-1.083-0.709-1.225c-0.531-0.144-1.08%2C0.172-1.223%2C0.707l-1.035%2C3.863C36.324%2C11.986%2C36.645%2C12.536%2C37.178%2C12.68 z'/%3E%0A %3Cpath fill='%23464646' d='M32%2C52c-0.553-0.002-0.998%2C0.446-1%2C0.998l0.002%2C10.004 C31.002%2C63.552%2C31.445%2C64%2C32%2C64c0.553%2C0%2C1-0.449%2C1.001-1l-0.003-10.002C32.998%2C52.447%2C32.555%2C52%2C32%2C52z'/%3E%0A %3Cpath fill='%23464646' d='M25.6%2C11.973c0.139%2C0.533%2C0.691%2C0.85%2C1.225%2C0.707 c0.532-0.141%2C0.846-0.691%2C0.707-1.225l-1.035-3.863c-0.145-0.535-0.693-0.851-1.227-0.706c-0.531%2C0.142-0.85%2C0.688-0.705%2C1.224 L25.6%2C11.973z'/%3E%0A %3Cpath fill='%23464646' d='M43.363%2C49.687c-0.275-0.478-0.883-0.644-1.363-0.365 c-0.479%2C0.274-0.641%2C0.885-0.367%2C1.364l5.004%2C8.661c0.275%2C0.478%2C0.883%2C0.644%2C1.363%2C0.366c0.479-0.277%2C0.642-0.889%2C0.367-1.367 L43.363%2C49.687z'/%3E%0A %3Cpath fill='%23464646' d='M16.443%2C17.856c0.387%2C0.394%2C1.023%2C0.39%2C1.414%2C0 c0.391-0.388%2C0.387-1.021%2C0-1.414l-2.828-2.828c-0.393-0.392-1.025-0.39-1.415%2C0.002c-0.39%2C0.388-0.392%2C1.021%2C0.001%2C1.412 L16.443%2C17.856z'/%3E%0A %3Cpath fill='%23464646' d='M59.348%2C46.633l-8.663-4.997 c-0.478-0.276-1.087-0.116-1.363%2C0.366c-0.278%2C0.477-0.112%2C1.086%2C0.364%2C1.364l8.664%2C4.999c0.477%2C0.275%2C1.086%2C0.115%2C1.363-0.365 C59.988%2C47.521%2C59.824%2C46.91%2C59.348%2C46.633z'/%3E%0A %3Cpath fill='%23464646' d='M11.974%2C25.599L8.11%2C24.563c-0.536-0.144-1.083%2C0.175-1.225%2C0.708 c-0.144%2C0.531%2C0.171%2C1.08%2C0.707%2C1.225l3.863%2C1.034c0.531%2C0.146%2C1.081-0.175%2C1.225-0.707C12.825%2C26.293%2C12.505%2C25.746%2C11.974%2C25.599 z'/%3E%0A%3C/g%3E%0A%3C/svg%3E%0A"); } /* Dark mode specific icons with explicit colors */ .uxc-dark-mode .uxc-icon-moon:before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='800px' height='800px' viewBox='0 0 16 16' fill='%23e4e4e4' class='bi bi-moon-stars-fill'%3E%0A %3Cpath d='M6 .278a.768.768 0 0 1 .08.858 7.208 7.208 0 0 0-.878 3.46c0 4.021 3.278 7.277 7.318 7.277.527 0 1.04-.055 1.533-.16a.787.787 0 0 1 .81.316.733.733 0 0 1-.031.893A8.349 8.349 0 0 1 8.344 16C3.734 16 0 12.286 0 7.71 0 4.266 2.114 1.312 5.124.06A.752.752 0 0 1 6 .278z'/%3E%0A %3Cpath d='M10.794 3.148a.217.217 0 0 1 .412 0l.387 1.162c.173.518.579.924 1.097 1.097l1.162.387a.217.217 0 0 1 0 .412l-1.162.387a1.734 1.734 0 0 0-1.097 1.097l-.387 1.162a.217.217 0 0 1-.412 0l-.387-1.162A1.734 1.734 0 0 0 9.31 6.593l-1.162-.387a.217.217 0 0 1 0-.412l1.162-.387a1.734 1.734 0 0 0 1.097-1.097l.387-1.162zM13.863.099a.145.145 0 0 1 .274 0l.258.774c.115.346.386.617.732.732l.774.258a.145.145 0 0 1 0 .274l-.774.258a1.156 1.156 0 0 0-.732.732l-.258.774a.145.145 0 0 1-.274 0l-.258-.774a1.156 1.156 0 0 0-.732-.732l-.774-.258a.145.145 0 0 1 0-.274l.774-.258c.346-.115.617-.386.732-.732L13.863.1z'/%3E%0A%3C/svg%3E%0A"); } .uxc-dark-mode .uxc-icon-sun:before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%0A%3Cg%3E%0A %3Cpath fill='%23e4e4e4' d='M31.998%2C14.002c-9.941%2C0-18%2C8.059-18%2C18s8.059%2C18%2C18%2C18 s18-8.059%2C18-18S41.939%2C14.002%2C31.998%2C14.002z M42.998%2C33.002c-0.553%2C0-1-0.447-1-1c0-5.523-4.478-10-10-10c-0.553%2C0-1-0.447-1-1 s0.447-1%2C1-1c6.627%2C0%2C12%2C5.373%2C12%2C12C43.998%2C32.555%2C43.551%2C33.002%2C42.998%2C33.002z'/%3E%0A %3Cpath fill='%23e4e4e4' d='M63%2C31H53c-0.553%2C0-1%2C0.447-1%2C1s0.447%2C1%2C1%2C1h10 c0.553%2C0%2C1-0.447%2C1-1S63.553%2C31%2C63%2C31z'/%3E%0A %3Cpath fill='%23e4e4e4' d='M11.457%2C36.47l-3.863%2C1.035c-0.534%2C0.144-0.851%2C0.692-0.707%2C1.226 c0.143%2C0.533%2C0.69%2C0.85%2C1.225%2C0.706l3.863-1.035c0.533-0.143%2C0.85-0.69%2C0.707-1.225C12.539%2C36.644%2C11.99%2C36.327%2C11.457%2C36.47z'/%3E%0A %3Cpath fill='%23e4e4e4' d='M49.32%2C22c0.277%2C0.479%2C0.888%2C0.643%2C1.367%2C0.366l8.66-5 c0.479-0.276%2C0.643-0.888%2C0.365-1.366c-0.275-0.479-0.887-0.642-1.365-0.365l-8.66%2C5C49.208%2C20.912%2C49.045%2C21.521%2C49.32%2C22z'/%3E%0A %3Cpath fill='%23e4e4e4' d='M17.858%2C46.143c-0.39-0.391-1.023-0.389-1.414%2C0l-2.828%2C2.828 c-0.391%2C0.391-0.39%2C1.025%2C0.001%2C1.415c0.39%2C0.391%2C1.022%2C0.39%2C1.413-0.001l2.828-2.828C18.249%2C47.168%2C18.249%2C46.534%2C17.858%2C46.143z'/%3E%0A %3Cpath fill='%23e4e4e4' d='M42%2C14.68c0.479%2C0.276%2C1.09%2C0.113%2C1.367-0.366l5-8.66 C48.644%2C5.175%2C48.48%2C4.563%2C48%2C4.287c-0.478-0.276-1.088-0.112-1.365%2C0.366l-4.999%2C8.661C41.358%2C13.793%2C41.522%2C14.403%2C42%2C14.68z'/%3E%0A %3Cpath fill='%23e4e4e4' d='M26.824%2C51.318c-0.532-0.143-1.08%2C0.176-1.225%2C0.707l-1.035%2C3.863 c-0.143%2C0.535%2C0.176%2C1.083%2C0.709%2C1.226c0.533%2C0.144%2C1.08-0.173%2C1.223-0.708l1.035-3.863C27.676%2C52.012%2C27.359%2C51.463%2C26.824%2C51.318 z'/%3E%0A %3Cpath fill='%23e4e4e4' d='M32%2C12c0.554%2C0%2C1.001-0.446%2C1.002-1V1c0-0.553-0.447-1-1.002-1 c-0.551%2C0-0.998%2C0.447-0.999%2C1l0.001%2C10C31.002%2C11.553%2C31.449%2C12%2C32%2C12z'/%3E%0A %3Cpath fill='%23e4e4e4' d='M38.402%2C52.025c-0.141-0.532-0.689-0.85-1.225-0.707 c-0.533%2C0.143-0.848%2C0.692-0.707%2C1.225l1.035%2C3.863c0.144%2C0.535%2C0.693%2C0.85%2C1.227%2C0.707s0.849-0.689%2C0.705-1.225L38.402%2C52.025z'/%3E%0A %3Cpath fill='%23e4e4e4' d='M20.637%2C14.312c0.275%2C0.479%2C0.887%2C0.643%2C1.363%2C0.367 c0.48-0.277%2C0.645-0.887%2C0.368-1.367l-5-8.66C17.092%2C4.174%2C16.48%2C4.01%2C16%2C4.287c-0.477%2C0.275-0.641%2C0.887-0.365%2C1.365 L20.637%2C14.312z'/%3E%0A %3Cpath fill='%23e4e4e4' d='M47.558%2C46.142c-0.388-0.39-1.022-0.39-1.414%2C0 c-0.391%2C0.39-0.388%2C1.024%2C0%2C1.414l2.828%2C2.828c0.392%2C0.392%2C1.025%2C0.389%2C1.415-0.001c0.391-0.39%2C0.391-1.021-0.001-1.413 L47.558%2C46.142z'/%3E%0A %3Cpath fill='%23e4e4e4' d='M4.654%2C17.365l8.662%2C4.999c0.477%2C0.276%2C1.088%2C0.113%2C1.363-0.364 c0.277-0.479%2C0.115-1.09-0.364-1.367l-8.661-5C5.176%2C15.356%2C4.564%2C15.52%2C4.287%2C16C4.013%2C16.477%2C4.176%2C17.089%2C4.654%2C17.365z'/%3E%0A %3Cpath fill='%23e4e4e4' d='M52.027%2C38.4l3.863%2C1.035c0.535%2C0.145%2C1.082-0.176%2C1.225-0.709 c0.144-0.532-0.172-1.079-0.707-1.223l-3.863-1.035c-0.531-0.145-1.081%2C0.173-1.225%2C0.707C51.176%2C37.709%2C51.496%2C38.256%2C52.027%2C38.4 z'/%3E%0A %3Cpath fill='%23e4e4e4' d='M12%2C32c0.001-0.554-0.445-1-0.998-1.002L1%2C31 c-0.552%2C0-1%2C0.445-1%2C1c0.001%2C0.551%2C0.448%2C1%2C1.001%2C1l10.001-0.002C11.553%2C32.998%2C12.001%2C32.552%2C12%2C32z'/%3E%0A %3Cpath fill='%23e4e4e4' d='M52.545%2C27.529l3.863-1.035c0.535-0.143%2C0.85-0.693%2C0.706-1.227 c-0.142-0.531-0.688-0.848-1.224-0.705l-3.863%2C1.035c-0.533%2C0.141-0.85%2C0.691-0.707%2C1.225 C51.461%2C27.356%2C52.012%2C27.67%2C52.545%2C27.529z'/%3E%0A %3Cpath fill='%23e4e4e4' d='M14.68%2C42c-0.275-0.48-0.886-0.644-1.365-0.368l-8.661%2C5.002 C4.176%2C46.91%2C4.01%2C47.52%2C4.287%2C48c0.277%2C0.477%2C0.889%2C0.641%2C1.367%2C0.365l8.66-5.002C14.791%2C43.088%2C14.957%2C42.479%2C14.68%2C42z'/%3E%0A %3Cpath fill='%23e4e4e4' d='M46.144%2C17.856c0.389%2C0.392%2C1.022%2C0.388%2C1.414%2C0l2.828-2.828 c0.392-0.392%2C0.39-1.024-0.002-1.415c-0.388-0.39-1.021-0.391-1.412%2C0.001l-2.828%2C2.828C45.752%2C16.83%2C45.754%2C17.466%2C46.144%2C17.856 z'/%3E%0A %3Cpath fill='%23e4e4e4' d='M22%2C49.32c-0.479-0.277-1.088-0.113-1.365%2C0.364l-5%2C8.663 c-0.275%2C0.478-0.115%2C1.088%2C0.365%2C1.365c0.479%2C0.274%2C1.09%2C0.11%2C1.367-0.367l4.998-8.662C22.641%2C50.207%2C22.48%2C49.597%2C22%2C49.32z'/%3E%0A %3Cpath fill='%23e4e4e4' d='M37.178%2C12.68c0.531%2C0.145%2C1.078-0.176%2C1.225-0.707l1.035-3.863 c0.143-0.535-0.176-1.083-0.709-1.225c-0.531-0.144-1.08%2C0.172-1.223%2C0.707l-1.035%2C3.863C36.324%2C11.986%2C36.645%2C12.536%2C37.178%2C12.68 z'/%3E%0A %3Cpath fill='%23e4e4e4' d='M32%2C52c-0.553-0.002-0.998%2C0.446-1%2C0.998l0.002%2C10.004 C31.002%2C63.552%2C31.445%2C64%2C32%2C64c0.553%2C0%2C1-0.449%2C1.001-1l-0.003-10.002C32.998%2C52.447%2C32.555%2C52%2C32%2C52z'/%3E%0A %3Cpath fill='%23e4e4e4' d='M25.6%2C11.973c0.139%2C0.533%2C0.691%2C0.85%2C1.225%2C0.707 c0.532-0.141%2C0.846-0.691%2C0.707-1.225l-1.035-3.863c-0.145-0.535-0.693-0.851-1.227-0.706c-0.531%2C0.142-0.85%2C0.688-0.705%2C1.224 L25.6%2C11.973z'/%3E%0A %3Cpath fill='%23e4e4e4' d='M43.363%2C49.687c-0.275-0.478-0.883-0.644-1.363-0.365 c-0.479%2C0.274-0.641%2C0.885-0.367%2C1.364l5.004%2C8.661c0.275%2C0.478%2C0.883%2C0.644%2C1.363%2C0.366c0.479-0.277%2C0.642-0.889%2C0.367-1.367 L43.363%2C49.687z'/%3E%0A %3Cpath fill='%23e4e4e4' d='M16.443%2C17.856c0.387%2C0.394%2C1.023%2C0.39%2C1.414%2C0 c0.391-0.388%2C0.387-1.021%2C0-1.414l-2.828-2.828c-0.393-0.392-1.025-0.39-1.415%2C0.002c-0.39%2C0.388-0.392%2C1.021%2C0.001%2C1.412 L16.443%2C17.856z'/%3E%0A %3Cpath fill='%23e4e4e4' d='M59.348%2C46.633l-8.663-4.997 c-0.478-0.276-1.087-0.116-1.363%2C0.366c-0.278%2C0.477-0.112%2C1.086%2C0.364%2C1.364l8.664%2C4.999c0.477%2C0.275%2C1.086%2C0.115%2C1.363-0.365 C59.988%2C47.521%2C59.824%2C46.91%2C59.348%2C46.633z'/%3E%0A %3Cpath fill='%23e4e4e4' d='M11.974%2C25.599L8.11%2C24.563c-0.536-0.144-1.083%2C0.175-1.225%2C0.708 c-0.144%2C0.531%2C0.171%2C1.08%2C0.707%2C1.225l3.863%2C1.034c0.531%2C0.146%2C1.081-0.175%2C1.225-0.707C12.825%2C26.293%2C12.505%2C25.746%2C11.974%2C25.599 z'/%3E%0A%3C/g%3E%0A%3C/svg%3E%0A"); } /* Ensure theme toggle button centers the icon properly */ #uxc-theme-toggle i { display: inline-block; width: 16px; height: 16px; line-height: 16px; vertical-align: middle; } /* Theme toggle: 3-state (Light/Dark/System). Icon + label driven by data-uxc-theme (set by admin.js). */ #uxc-theme-toggle .uxc-theme-sun, #uxc-theme-toggle .uxc-theme-moon, #uxc-theme-toggle .uxc-theme-auto { display: none; } #uxc-theme-toggle[data-uxc-theme="light"] .uxc-theme-sun, #uxc-theme-toggle[data-uxc-theme="dark"] .uxc-theme-moon, #uxc-theme-toggle[data-uxc-theme="system"] .uxc-theme-auto { display: block; } #uxc-theme-toggle .uxc-theme-label-light, #uxc-theme-toggle .uxc-theme-label-dark, #uxc-theme-toggle .uxc-theme-label-system { display: none !important; } #uxc-theme-toggle[data-uxc-theme="light"] .uxc-theme-label-light, #uxc-theme-toggle[data-uxc-theme="dark"] .uxc-theme-label-dark, #uxc-theme-toggle[data-uxc-theme="system"] .uxc-theme-label-system { display: inline !important; } /* Refactor theme toggle button */ .uxc-btn-icon#uxc-theme-toggle, .uxc-btn-icon[href*="pay.u.cash"] { width: 24px !important; height: 24px !important; border: none !important; padding: 0 !important; border-radius: 0; background: transparent !important; opacity: 1; } .uxc-btn-icon#uxc-theme-toggle:hover, .uxc-btn-icon[href*="pay.u.cash"]:hover { background: transparent !important; border-color: transparent !important; opacity: 0.8; } .uxc-btn-icon#uxc-theme-toggle i, .uxc-btn-icon[href*="pay.u.cash"] i { width: 16px !important; height: 16px !important; line-height: 20px !important; margin-top: -4px; display: inline-block !important; } /* Ensure theme toggle icons render correctly */ .uxc-btn-icon#uxc-theme-toggle .uxc-icon-moon:before, .uxc-btn-icon#uxc-theme-toggle .uxc-icon-sun:before { display: inline-block !important; width: 16px !important; height: 16px !important; background-repeat: no-repeat !important; background-position: center !important; background-size: contain !important; } /* Force correct icon SVGs for theme toggle in light mode */ .uxc-btn-icon#uxc-theme-toggle .uxc-icon-moon:before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='800px' height='800px' viewBox='0 0 16 16' fill='%23464646' class='bi bi-moon-stars-fill'%3E%0A %3Cpath d='M6 .278a.768.768 0 0 1 .08.858 7.208 7.208 0 0 0-.878 3.46c0 4.021 3.278 7.277 7.318 7.277.527 0 1.04-.055 1.533-.16a.787.787 0 0 1 .81.316.733.733 0 0 1-.031.893A8.349 8.349 0 0 1 8.344 16C3.734 16 0 12.286 0 7.71 0 4.266 2.114 1.312 5.124.06A.752.752 0 0 1 6 .278z'/%3E%0A %3Cpath d='M10.794 3.148a.217.217 0 0 1 .412 0l.387 1.162c.173.518.579.924 1.097 1.097l1.162.387a.217.217 0 0 1 0 .412l-1.162.387a1.734 1.734 0 0 0-1.097 1.097l-.387 1.162a.217.217 0 0 1-.412 0l-.387-1.162A1.734 1.734 0 0 0 9.31 6.593l-1.162-.387a.217.217 0 0 1 0-.412l1.162-.387a1.734 1.734 0 0 0 1.097-1.097l.387-1.162zM13.863.099a.145.145 0 0 1 .274 0l.258.774c.115.346.386.617.732.732l.774.258a.145.145 0 0 1 0 .274l-.774.258a1.156 1.156 0 0 0-.732.732l-.258.774a.145.145 0 0 1-.274 0l-.258-.774a1.156 1.156 0 0 0-.732-.732l-.774-.258a.145.145 0 0 1 0-.274l.774-.258c.346-.115.617-.386.732-.732L13.863.1z'/%3E%0A%3C/svg%3E%0A") !important; } .uxc-btn-icon#uxc-theme-toggle .uxc-icon-sun:before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%0A%3Cg%3E%0A %3Cpath fill='%23464646' d='M31.998%2C14.002c-9.941%2C0-18%2C8.059-18%2C18s8.059%2C18%2C18%2C18 s18-8.059%2C18-18S41.939%2C14.002%2C31.998%2C14.002z M42.998%2C33.002c-0.553%2C0-1-0.447-1-1c0-5.523-4.478-10-10-10c-0.553%2C0-1-0.447-1-1 s0.447-1%2C1-1c6.627%2C0%2C12%2C5.373%2C12%2C12C43.998%2C32.555%2C43.551%2C33.002%2C42.998%2C33.002z'/%3E%0A %3Cpath fill='%23464646' d='M63%2C31H53c-0.553%2C0-1%2C0.447-1%2C1s0.447%2C1%2C1%2C1h10 c0.553%2C0%2C1-0.447%2C1-1S63.553%2C31%2C63%2C31z'/%3E%0A %3Cpath fill='%23464646' d='M11.457%2C36.47l-3.863%2C1.035c-0.534%2C0.144-0.851%2C0.692-0.707%2C1.226 c0.143%2C0.533%2C0.69%2C0.85%2C1.225%2C0.706l3.863-1.035c0.533-0.143%2C0.85-0.69%2C0.707-1.225C12.539%2C36.644%2C11.99%2C36.327%2C11.457%2C36.47z'/%3E%0A %3Cpath fill='%23464646' d='M49.32%2C22c0.277%2C0.479%2C0.888%2C0.643%2C1.367%2C0.366l8.66-5 c0.479-0.276%2C0.643-0.888%2C0.365-1.366c-0.275-0.479-0.887-0.642-1.365-0.365l-8.66%2C5C49.208%2C20.912%2C49.045%2C21.521%2C49.32%2C22z'/%3E%0A %3Cpath fill='%23464646' d='M17.858%2C46.143c-0.39-0.391-1.023-0.389-1.414%2C0l-2.828%2C2.828 c-0.391%2C0.391-0.39%2C1.025%2C0.001%2C1.415c0.39%2C0.391%2C1.022%2C0.39%2C1.413-0.001l2.828-2.828C18.249%2C47.168%2C18.249%2C46.534%2C17.858%2C46.143z'/%3E%0A %3Cpath fill='%23464646' d='M42%2C14.68c0.479%2C0.276%2C1.09%2C0.113%2C1.367-0.366l5-8.66 C48.644%2C5.175%2C48.48%2C4.563%2C48%2C4.287c-0.478-0.276-1.088-0.112-1.365%2C0.366l-4.999%2C8.661C41.358%2C13.793%2C41.522%2C14.403%2C42%2C14.68z'/%3E%0A %3Cpath fill='%23464646' d='M26.824%2C51.318c-0.532-0.143-1.08%2C0.176-1.225%2C0.707l-1.035%2C3.863 c-0.143%2C0.535%2C0.176%2C1.083%2C0.709%2C1.226c0.533%2C0.144%2C1.08-0.173%2C1.223-0.708l1.035-3.863C27.676%2C52.012%2C27.359%2C51.463%2C26.824%2C51.318 z'/%3E%0A %3Cpath fill='%23464646' d='M32%2C12c0.554%2C0%2C1.001-0.446%2C1.002-1V1c0-0.553-0.447-1-1.002-1 c-0.551%2C0-0.998%2C0.447-0.999%2C1l0.001%2C10C31.002%2C11.553%2C31.449%2C12%2C32%2C12z'/%3E%0A %3Cpath fill='%23464646' d='M38.402%2C52.025c-0.141-0.532-0.689-0.85-1.225-0.707 c-0.533%2C0.143-0.848%2C0.692-0.707%2C1.225l1.035%2C3.863c0.144%2C0.535%2C0.693%2C0.85%2C1.227%2C0.707s0.849-0.689%2C0.705-1.225L38.402%2C52.025z'/%3E%0A %3Cpath fill='%23464646' d='M20.637%2C14.312c0.275%2C0.479%2C0.887%2C0.643%2C1.363%2C0.367 c0.48-0.277%2C0.645-0.887%2C0.368-1.367l-5-8.66C17.092%2C4.174%2C16.48%2C4.01%2C16%2C4.287c-0.477%2C0.275-0.641%2C0.887-0.365%2C1.365 L20.637%2C14.312z'/%3E%0A %3Cpath fill='%23464646' d='M47.558%2C46.142c-0.388-0.39-1.022-0.39-1.414%2C0 c-0.391%2C0.39-0.388%2C1.024%2C0%2C1.414l2.828%2C2.828c0.392%2C0.392%2C1.025%2C0.389%2C1.415-0.001c0.391-0.39%2C0.391-1.021-0.001-1.413 L47.558%2C46.142z'/%3E%0A %3Cpath fill='%23464646' d='M4.654%2C17.365l8.662%2C4.999c0.477%2C0.276%2C1.088%2C0.113%2C1.363-0.364 c0.277-0.479%2C0.115-1.09-0.364-1.367l-8.661-5C5.176%2C15.356%2C4.564%2C15.52%2C4.287%2C16C4.013%2C16.477%2C4.176%2C17.089%2C4.654%2C17.365z'/%3E%0A %3Cpath fill='%23464646' d='M52.027%2C38.4l3.863%2C1.035c0.535%2C0.145%2C1.082-0.176%2C1.225-0.709 c0.144-0.532-0.172-1.079-0.707-1.223l-3.863-1.035c-0.531-0.145-1.081%2C0.173-1.225%2C0.707C51.176%2C37.709%2C51.496%2C38.256%2C52.027%2C38.4 z'/%3E%0A %3Cpath fill='%23464646' d='M12%2C32c0.001-0.554-0.445-1-0.998-1.002L1%2C31 c-0.552%2C0-1%2C0.445-1%2C1c0.001%2C0.551%2C0.448%2C1%2C1.001%2C1l10.001-0.002C11.553%2C32.998%2C12.001%2C32.552%2C12%2C32z'/%3E%0A %3Cpath fill='%23464646' d='M52.545%2C27.529l3.863-1.035c0.535-0.143%2C0.85-0.693%2C0.706-1.227 c-0.142-0.531-0.688-0.848-1.224-0.705l-3.863%2C1.035c-0.533%2C0.141-0.85%2C0.691-0.707%2C1.225 C51.461%2C27.356%2C52.012%2C27.67%2C52.545%2C27.529z'/%3E%0A %3Cpath fill='%23464646' d='M14.68%2C42c-0.275-0.48-0.886-0.644-1.365-0.368l-8.661%2C5.002 C4.176%2C46.91%2C4.01%2C47.52%2C4.287%2C48c0.277%2C0.477%2C0.889%2C0.641%2C1.367%2C0.365l8.66-5.002C14.791%2C43.088%2C14.957%2C42.479%2C14.68%2C42z'/%3E%0A %3Cpath fill='%23464646' d='M46.144%2C17.856c0.389%2C0.392%2C1.022%2C0.388%2C1.414%2C0l2.828-2.828 c0.392-0.392%2C0.39-1.024-0.002-1.415c-0.388-0.39-1.021-0.391-1.412%2C0.001l-2.828%2C2.828C45.752%2C16.83%2C45.754%2C17.466%2C46.144%2C17.856 z'/%3E%0A %3Cpath fill='%23464646' d='M22%2C49.32c-0.479-0.277-1.088-0.113-1.365%2C0.364l-5%2C8.663 c-0.275%2C0.478-0.115%2C1.088%2C0.365%2C1.365c0.479%2C0.274%2C1.09%2C0.11%2C1.367-0.367l4.998-8.662C22.641%2C50.207%2C22.48%2C49.597%2C22%2C49.32z'/%3E%0A %3Cpath fill='%23464646' d='M37.178%2C12.68c0.531%2C0.145%2C1.078-0.176%2C1.225-0.707l1.035-3.863 c0.143-0.535-0.176-1.083-0.709-1.225c-0.531-0.144-1.08%2C0.172-1.223%2C0.707l-1.035%2C3.863C36.324%2C11.986%2C36.645%2C12.536%2C37.178%2C12.68 z'/%3E%0A %3Cpath fill='%23464646' d='M32%2C52c-0.553-0.002-0.998%2C0.446-1%2C0.998l0.002%2C10.004 C31.002%2C63.552%2C31.445%2C64%2C32%2C64c0.553%2C0%2C1-0.449%2C1.001-1l-0.003-10.002C32.998%2C52.447%2C32.555%2C52%2C32%2C52z'/%3E%0A %3Cpath fill='%23464646' d='M25.6%2C11.973c0.139%2C0.533%2C0.691%2C0.85%2C1.225%2C0.707 c0.532-0.141%2C0.846-0.691%2C0.707-1.225l-1.035-3.863c-0.145-0.535-0.693-0.851-1.227-0.706c-0.531%2C0.142-0.85%2C0.688-0.705%2C1.224 L25.6%2C11.973z'/%3E%0A %3Cpath fill='%23464646' d='M43.363%2C49.687c-0.275-0.478-0.883-0.644-1.363-0.365 c-0.479%2C0.274-0.641%2C0.885-0.367%2C1.364l5.004%2C8.661c0.275%2C0.478%2C0.883%2C0.644%2C1.363%2C0.366c0.479-0.277%2C0.642-0.889%2C0.367-1.367 L43.363%2C49.687z'/%3E%0A %3Cpath fill='%23464646' d='M16.443%2C17.856c0.387%2C0.394%2C1.023%2C0.39%2C1.414%2C0 c0.391-0.388%2C0.387-1.021%2C0-1.414l-2.828-2.828c-0.393-0.392-1.025-0.39-1.415%2C0.002c-0.39%2C0.388-0.392%2C1.021%2C0.001%2C1.412 L16.443%2C17.856z'/%3E%0A %3Cpath fill='%23464646' d='M59.348%2C46.633l-8.663-4.997 c-0.478-0.276-1.087-0.116-1.363%2C0.366c-0.278%2C0.477-0.112%2C1.086%2C0.364%2C1.364l8.664%2C4.999c0.477%2C0.275%2C1.086%2C0.115%2C1.363-0.365 C59.988%2C47.521%2C59.824%2C46.91%2C59.348%2C46.633z'/%3E%0A %3Cpath fill='%23464646' d='M11.974%2C25.599L8.11%2C24.563c-0.536-0.144-1.083%2C0.175-1.225%2C0.708 c-0.144%2C0.531%2C0.171%2C1.08%2C0.707%2C1.225l3.863%2C1.034c0.531%2C0.146%2C1.081-0.175%2C1.225-0.707C12.825%2C26.293%2C12.505%2C25.746%2C11.974%2C25.599 z'/%3E%0A%3C/g%3E%0A%3C/svg%3E%0A") !important; } /* Fix vertical alignment for help icon */ .uxc-btn-icon[href*="pay.u.cash"] .uxc-icon-help { vertical-align: baseline; transform: translateY(-1px); } .uxc-dark-mode .uxc-btn-icon[href*="pay.u.cash"] .uxc-icon-help { color: var(--uxc-text-primary); } .uxc-btn-icon#uxc-theme-toggle i:before, .uxc-btn-icon[href*="pay.u.cash"] i:before { width: 16px !important; height: 24px !important; } /* Ensure theme toggle icons are light colored in dark mode */ .uxc-dark-mode .uxc-btn-icon#uxc-theme-toggle .uxc-icon-moon, .uxc-dark-mode .uxc-btn-icon#uxc-theme-toggle .uxc-icon-sun { color: #e4e4e4 !important; } .uxc-dark-mode .uxc-btn-icon#uxc-theme-toggle .uxc-icon-moon:before, .uxc-dark-mode .uxc-btn-icon#uxc-theme-toggle .uxc-icon-sun:before { filter: brightness(1.2); } /* Force correct icon SVGs for theme toggle in dark mode */ .uxc-dark-mode .uxc-btn-icon#uxc-theme-toggle .uxc-icon-moon:before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='800px' height='800px' viewBox='0 0 16 16' fill='%23e4e4e4' class='bi bi-moon-stars-fill'%3E%0A %3Cpath d='M6 .278a.768.768 0 0 1 .08.858 7.208 7.208 0 0 0-.878 3.46c0 4.021 3.278 7.277 7.318 7.277.527 0 1.04-.055 1.533-.16a.787.787 0 0 1 .81.316.733.733 0 0 1-.031.893A8.349 8.349 0 0 1 8.344 16C3.734 16 0 12.286 0 7.71 0 4.266 2.114 1.312 5.124.06A.752.752 0 0 1 6 .278z'/%3E%0A %3Cpath d='M10.794 3.148a.217.217 0 0 1 .412 0l.387 1.162c.173.518.579.924 1.097 1.097l1.162.387a.217.217 0 0 1 0 .412l-1.162.387a1.734 1.734 0 0 0-1.097 1.097l-.387 1.162a.217.217 0 0 1-.412 0l-.387-1.162A1.734 1.734 0 0 0 9.31 6.593l-1.162-.387a.217.217 0 0 1 0-.412l1.162-.387a1.734 1.734 0 0 0 1.097-1.097l.387-1.162zM13.863.099a.145.145 0 0 1 .274 0l.258.774c.115.346.386.617.732.732l.774.258a.145.145 0 0 1 0 .274l-.774.258a1.156 1.156 0 0 0-.732.732l-.258.774a.145.145 0 0 1-.274 0l-.258-.774a1.156 1.156 0 0 0-.732-.732l-.774-.258a.145.145 0 0 1 0-.274l.774-.258c.346-.115.617-.386.732-.732L13.863.1z'/%3E%0A%3C/svg%3E%0A") !important; } .uxc-dark-mode .uxc-btn-icon#uxc-theme-toggle .uxc-icon-sun:before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%0A%3Cg%3E%0A %3Cpath fill='%23e4e4e4' d='M31.998%2C14.002c-9.941%2C0-18%2C8.059-18%2C18s8.059%2C18%2C18%2C18 s18-8.059%2C18-18S41.939%2C14.002%2C31.998%2C14.002z M42.998%2C33.002c-0.553%2C0-1-0.447-1-1c0-5.523-4.478-10-10-10c-0.553%2C0-1-0.447-1-1 s0.447-1%2C1-1c6.627%2C0%2C12%2C5.373%2C12%2C12C43.998%2C32.555%2C43.551%2C33.002%2C42.998%2C33.002z'/%3E%0A %3Cpath fill='%23e4e4e4' d='M63%2C31H53c-0.553%2C0-1%2C0.447-1%2C1s0.447%2C1%2C1%2C1h10 c0.553%2C0%2C1-0.447%2C1-1S63.553%2C31%2C63%2C31z'/%3E%0A %3Cpath fill='%23e4e4e4' d='M11.457%2C36.47l-3.863%2C1.035c-0.534%2C0.144-0.851%2C0.692-0.707%2C1.226 c0.143%2C0.533%2C0.69%2C0.85%2C1.225%2C0.706l3.863-1.035c0.533-0.143%2C0.85-0.69%2C0.707-1.225C12.539%2C36.644%2C11.99%2C36.327%2C11.457%2C36.47z'/%3E%0A %3Cpath fill='%23e4e4e4' d='M49.32%2C22c0.277%2C0.479%2C0.888%2C0.643%2C1.367%2C0.366l8.66-5 c0.479-0.276%2C0.643-0.888%2C0.365-1.366c-0.275-0.479-0.887-0.642-1.365-0.365l-8.66%2C5C49.208%2C20.912%2C49.045%2C21.521%2C49.32%2C22z'/%3E%0A %3Cpath fill='%23e4e4e4' d='M17.858%2C46.143c-0.39-0.391-1.023-0.389-1.414%2C0l-2.828%2C2.828 c-0.391%2C0.391-0.39%2C1.025%2C0.001%2C1.415c0.39%2C0.391%2C1.022%2C0.39%2C1.413-0.001l2.828-2.828C18.249%2C47.168%2C18.249%2C46.534%2C17.858%2C46.143z'/%3E%0A %3Cpath fill='%23e4e4e4' d='M42%2C14.68c0.479%2C0.276%2C1.09%2C0.113%2C1.367-0.366l5-8.66 C48.644%2C5.175%2C48.48%2C4.563%2C48%2C4.287c-0.478-0.276-1.088-0.112-1.365%2C0.366l-4.999%2C8.661C41.358%2C13.793%2C41.522%2C14.403%2C42%2C14.68z'/%3E%0A %3Cpath fill='%23e4e4e4' d='M26.824%2C51.318c-0.532-0.143-1.08%2C0.176-1.225%2C0.707l-1.035%2C3.863 c-0.143%2C0.535%2C0.176%2C1.083%2C0.709%2C1.226c0.533%2C0.144%2C1.08-0.173%2C1.223-0.708l1.035-3.863C27.676%2C52.012%2C27.359%2C51.463%2C26.824%2C51.318 z'/%3E%0A %3Cpath fill='%23e4e4e4' d='M32%2C12c0.554%2C0%2C1.001-0.446%2C1.002-1V1c0-0.553-0.447-1-1.002-1 c-0.551%2C0-0.998%2C0.447-0.999%2C1l0.001%2C10C31.002%2C11.553%2C31.449%2C12%2C32%2C12z'/%3E%0A %3Cpath fill='%23e4e4e4' d='M38.402%2C52.025c-0.141-0.532-0.689-0.85-1.225-0.707 c-0.533%2C0.143-0.848%2C0.692-0.707%2C1.225l1.035%2C3.863c0.144%2C0.535%2C0.693%2C0.85%2C1.227%2C0.707s0.849-0.689%2C0.705-1.225L38.402%2C52.025z'/%3E%0A %3Cpath fill='%23e4e4e4' d='M20.637%2C14.312c0.275%2C0.479%2C0.887%2C0.643%2C1.363%2C0.367 c0.48-0.277%2C0.645-0.887%2C0.368-1.367l-5-8.66C17.092%2C4.174%2C16.48%2C4.01%2C16%2C4.287c-0.477%2C0.275-0.641%2C0.887-0.365%2C1.365 L20.637%2C14.312z'/%3E%0A %3Cpath fill='%23e4e4e4' d='M47.558%2C46.142c-0.388-0.39-1.022-0.39-1.414%2C0 c-0.391%2C0.39-0.388%2C1.024%2C0%2C1.414l2.828%2C2.828c0.392%2C0.392%2C1.025%2C0.389%2C1.415-0.001c0.391-0.39%2C0.391-1.021-0.001-1.413 L47.558%2C46.142z'/%3E%0A %3Cpath fill='%23e4e4e4' d='M4.654%2C17.365l8.662%2C4.999c0.477%2C0.276%2C1.088%2C0.113%2C1.363-0.364 c0.277-0.479%2C0.115-1.09-0.364-1.367l-8.661-5C5.176%2C15.356%2C4.564%2C15.52%2C4.287%2C16C4.013%2C16.477%2C4.176%2C17.089%2C4.654%2C17.365z'/%3E%0A %3Cpath fill='%23e4e4e4' d='M52.027%2C38.4l3.863%2C1.035c0.535%2C0.145%2C1.082-0.176%2C1.225-0.709 c0.144-0.532-0.172-1.079-0.707-1.223l-3.863-1.035c-0.531-0.145-1.081%2C0.173-1.225%2C0.707C51.176%2C37.709%2C51.496%2C38.256%2C52.027%2C38.4 z'/%3E%0A %3Cpath fill='%23e4e4e4' d='M12%2C32c0.001-0.554-0.445-1-0.998-1.002L1%2C31 c-0.552%2C0-1%2C0.445-1%2C1c0.001%2C0.551%2C0.448%2C1%2C1.001%2C1l10.001-0.002C11.553%2C32.998%2C12.001%2C32.552%2C12%2C32z'/%3E%0A %3Cpath fill='%23e4e4e4' d='M52.545%2C27.529l3.863-1.035c0.535-0.143%2C0.85-0.693%2C0.706-1.227 c-0.142-0.531-0.688-0.848-1.224-0.705l-3.863%2C1.035c-0.533%2C0.141-0.85%2C0.691-0.707%2C1.225 C51.461%2C27.356%2C52.012%2C27.67%2C52.545%2C27.529z'/%3E%0A %3Cpath fill='%23e4e4e4' d='M14.68%2C42c-0.275-0.48-0.886-0.644-1.365-0.368l-8.661%2C5.002 C4.176%2C46.91%2C4.01%2C47.52%2C4.287%2C48c0.277%2C0.477%2C0.889%2C0.641%2C1.367%2C0.365l8.66-5.002C14.791%2C43.088%2C14.957%2C42.479%2C14.68%2C42z'/%3E%0A %3Cpath fill='%23e4e4e4' d='M46.144%2C17.856c0.389%2C0.392%2C1.022%2C0.388%2C1.414%2C0l2.828-2.828 c0.392-0.392%2C0.39-1.024-0.002-1.415c-0.388-0.39-1.021-0.391-1.412%2C0.001l-2.828%2C2.828C45.752%2C16.83%2C45.754%2C17.466%2C46.144%2C17.856 z'/%3E%0A %3Cpath fill='%23e4e4e4' d='M22%2C49.32c-0.479-0.277-1.088-0.113-1.365%2C0.364l-5%2C8.663 c-0.275%2C0.478-0.115%2C1.088%2C0.365%2C1.365c0.479%2C0.274%2C1.09%2C0.11%2C1.367-0.367l4.998-8.662C22.641%2C50.207%2C22.48%2C49.597%2C22%2C49.32z'/%3E%0A %3Cpath fill='%23e4e4e4' d='M37.178%2C12.68c0.531%2C0.145%2C1.078-0.176%2C1.225-0.707l1.035-3.863 c0.143-0.535-0.176-1.083-0.709-1.225c-0.531-0.144-1.08%2C0.172-1.223%2C0.707l-1.035%2C3.863C36.324%2C11.986%2C36.645%2C12.536%2C37.178%2C12.68 z'/%3E%0A %3Cpath fill='%23e4e4e4' d='M32%2C52c-0.553-0.002-0.998%2C0.446-1%2C0.998l0.002%2C10.004 C31.002%2C63.552%2C31.445%2C64%2C32%2C64c0.553%2C0%2C1-0.449%2C1.001-1l-0.003-10.002C32.998%2C52.447%2C32.555%2C52%2C32%2C52z'/%3E%0A %3Cpath fill='%23e4e4e4' d='M25.6%2C11.973c0.139%2C0.533%2C0.691%2C0.85%2C1.225%2C0.707 c0.532-0.141%2C0.846-0.691%2C0.707-1.225l-1.035-3.863c-0.145-0.535-0.693-0.851-1.227-0.706c-0.531%2C0.142-0.85%2C0.688-0.705%2C1.224 L25.6%2C11.973z'/%3E%0A %3Cpath fill='%23e4e4e4' d='M43.363%2C49.687c-0.275-0.478-0.883-0.644-1.363-0.365 c-0.479%2C0.274-0.641%2C0.885-0.367%2C1.364l5.004%2C8.661c0.275%2C0.478%2C0.883%2C0.644%2C1.363%2C0.366c0.479-0.277%2C0.642-0.889%2C0.367-1.367 L43.363%2C49.687z'/%3E%0A %3Cpath fill='%23e4e4e4' d='M16.443%2C17.856c0.387%2C0.394%2C1.023%2C0.39%2C1.414%2C0 c0.391-0.388%2C0.387-1.021%2C0-1.414l-2.828-2.828c-0.393-0.392-1.025-0.39-1.415%2C0.002c-0.39%2C0.388-0.392%2C1.021%2C0.001%2C1.412 L16.443%2C17.856z'/%3E%0A %3Cpath fill='%23e4e4e4' d='M59.348%2C46.633l-8.663-4.997 c-0.478-0.276-1.087-0.116-1.363%2C0.366c-0.278%2C0.477-0.112%2C1.086%2C0.364%2C1.364l8.664%2C4.999c0.477%2C0.275%2C1.086%2C0.115%2C1.363-0.365 C59.988%2C47.521%2C59.824%2C46.91%2C59.348%2C46.633z'/%3E%0A %3Cpath fill='%23e4e4e4' d='M11.974%2C25.599L8.11%2C24.563c-0.536-0.144-1.083%2C0.175-1.225%2C0.708 c-0.144%2C0.531%2C0.171%2C1.08%2C0.707%2C1.225l3.863%2C1.034c0.531%2C0.146%2C1.081-0.175%2C1.225-0.707C12.825%2C26.293%2C12.505%2C25.746%2C11.974%2C25.599 z'/%3E%0A%3C/g%3E%0A%3C/svg%3E%0A") !important; } @font-face { font-family: "Uncheckout"; src: url("../media/fonts/regular.woff2?v2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "Uncheckout"; src: url("../media/fonts/medium.woff2?v2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: "Uncheckout"; src: url("../media/fonts/bold.woff2?v2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; } @keyframes uxc-loading { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } @keyframes uxc-fade-in { 0% { opacity: 0; } 100% { opacity: 1; } } @keyframes uxc-fade-out { 0% { opacity: 1; } 90% { opacity: 1; } 100% { opacity: 0; } } @keyframes uxc-fade-bottom { 0% { transform: translateY(15px); opacity: 0; } 100% { transform: none; opacity: 1; } } @keyframes uxc-fade-bottom-center { 0% { transform: translateY(15px); opacity: 0; } 100% { transform: none; opacity: 1; } } @keyframes uxc-pulse { 0% { transform: scale(1); } 50% { transform: scale(1.2); } 100% { transform: scale(1); } } @keyframes uxc-ping { 0% { transform: scale(0.2); opacity: 0.8; } 80% { transform: scale(1.2); opacity: 0; } 100% { transform: scale(2.2); opacity: 0; } } /* GLOBAL ========================================================== */ .uxc-main, .uxc-main input, .uxc-main select, .uxc-main textarea, .uxc-btn, button, .uxc-box, #uxc-lightbox { font-family: "Uncheckout", "Helvetica Neue", "Apple Color Emoji", Helvetica, Arial, sans-serif; box-sizing: border-box; } .uxc-main * { box-sizing: content-box; outline: none; } .uxc-main input, .uxc-main input[text], .uxc-main textarea, .uxc-main input[email] { -webkit-appearance: none; -moz-appearance: none; appearance: none; } .uxc-main input:-webkit-autofill, .uxc-main select:-webkit-autofill { box-shadow: 0 0 0 30px transparent inset !important; } .uxc-main input:-webkit-autofill:focus, .uxc-main select:-webkit-autofill:focus { box-shadow: 0 0 0 30px transparent inset !important; } .uxc-main input:-autofill, .uxc-main select:-autofill { box-shadow: 0 0 0 30px transparent inset !important; } .uxc-main input:autofill:focus, .uxc-main select:autofill:focus { box-shadow: 0 0 0 30px transparent inset !important; } .uxc-loading:before, .uxc-select p:before, .uxc-btn-main:before { font-family: "Uncheckout Icons"; font-style: normal; font-weight: normal; text-transform: none; text-indent: 0; position: absolute; z-index: 1; } .uxc-loader:before { content: "\e900"; } .uxc-loading{ position: relative; text-indent: -999995px; overflow: hidden; min-height: 150px; display: flex; align-items: center; justify-content: center; } .uxc-loading i{ display: none; } .uxc-loading:before{ content: ""; animation: uxc-loading 0.6s linear infinite; display: block; width: 36px; height: 36px; border: 3px solid rgba(var(--uxc-accent-rgb), 0.2); border-top-color: var(--uxc-accent); border-radius: 0; position: absolute; text-indent: 0; left: 50%; top: calc(50% - 10px); margin-top: -18px; margin-left: -18px; } .uxc-loading:after{ content: "Loading..."; position: absolute; text-indent: 0; left: 50%; top: calc(50% - 10px); margin-top: 28px; transform: translateX(-50%); font-size: 13px; font-weight: 500; color: #5c7171; letter-spacing: 0.3px; } .uxc-loading div, .uxc-loading ul, .uxc-loading h1, .uxc-loading h2, .uxc-loading h3, .uxc-loading h4, .uxc-loading p, .uxc-loading span, .uxc-loading table, .uxc-loading a{ opacity: 0; } .uxc-btn.uxc-loading { min-height: 0; display: inline-block; } .uxc-btn.uxc-loading img { display: none !important; } .uxc-btn.uxc-loading:before { border: 3px solid rgba(255, 255, 255, 0.3); border-top-color: var(--uxc-border-color); width: 22px; height: 22px; margin-top: -11px; margin-left: -11px; top: 50%; } .uxc-btn.uxc-loading:after { display: none; } .uxc-hidden { position: absolute !important; width: 0 !important; max-width: 0 !important; min-width: 0 !important; height: 0 !important; opacity: 0 !important; padding: 0 !important; } .uxc-scrollbar { overflow-y: scroll !important; scrollbar-color: var(--uxc-accent) transparent; scrollbar-width: thin; } .uxc-scrollbar::-webkit-scrollbar { width: 6px; } .uxc-scrollbar::-webkit-scrollbar-track { background: #f5f5f5; border-radius: 0; } .uxc-scrollbar::-webkit-scrollbar-thumb { background: var(--uxc-accent); border-radius: 0; transition: all 0.3s ease; box-shadow: 0 1px 3px rgba(var(--uxc-accent-rgb), 0.3); } .uxc-scrollbar::-webkit-scrollbar-thumb:hover { background: color-mix(in srgb, var(--uxc-accent), #fff 18%); box-shadow: 0 1px 5px rgba(var(--uxc-accent-rgb), 0.5); } /* TYPOGRAPHY ========================================================== */ .uxc-title { font-size: 18px; line-height: 18px; font-weight: 600; margin: 0; } .uxc-text { font-size: 15px; letter-spacing: .2px; } /* ELEMENTS ========================================================== */ .uxc-select ul, .uxc-ul { padding: 10px 0 !important; display: none; overflow: hidden; position: absolute; margin: 0; background: #fff; border-radius: 0; padding: 10px 0; box-shadow: 0 4px 14px 0 rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(0, 0, 0, 0.05); list-style: none; z-index: 9999995; } .uxc-select ul.uxc-active, .uxc-ul.uxc-active { display: block; margin-bottom: 15px; } .uxc-select ul li, .uxc-ul li { cursor: pointer; padding: 6px 25px 6px 12px; margin: 0; font-weight: 500; font-size: 13px; letter-spacing: .3px; line-height: 20px; white-space: nowrap; list-style: none; transition: all 0.1s; } .uxc-select ul li.uxc-active, .uxc-select ul li .uxc-label div, .uxc-ul li.uxc-active, .uxc-ul li .uxc-label div { display: none; } .uxc-select ul li .uxc-label, .uxc-ul li .uxc-label { transition: none; /* Tighter in list rows: no trailing gap, half the leading gap (operator 8/23). */ margin: 0 0 0 7px; padding: 3px 0 3px 4px; } .uxc-select ul li:hover, .uxc-select ul li:hover .uxc-label, .uxc-ul li:hover, .uxc-ul li:hover .uxc-label { background-color: var(--uxc-accent); color: #fff; border-color: var(--uxc-border-color); } .uxc-select { position: relative; color: #464646; font-size: 14px; height: 35px; line-height: 35px; display: inline-block; } .uxc-select p { position: relative; padding: 0 20px 0 0; margin: 0; cursor: pointer; font-weight: 500; letter-spacing: .3px; font-size: 13px !important; line-height: 35px !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: all 0.4s; } .uxc-select p span { font-weight: 400; opacity: 0.7; } .uxc-select p .uxc-label { border: none; margin: 0; font-size: 13px; line-height: 35px; padding: 0; opacity: 1; font-weight: 500; } .uxc-select p .uxc-label div { display: none; } .uxc-select p:before { content: "\61"; top: 0; right: 1px; font-size: 9px; line-height: 35px; } .uxc-select p:hover, .uxc-select p:hover span { color: var(--uxc-accent); } .uxc-select.uxc-loading { overflow: visible; } .uxc-select.uxc-right ul { right: 0; } .uxc-select + .uxc-select { margin-left: 20px; } .uxc-input { display: flex; justify-content: space-between; align-items: flex-start; } .uxc-input span { display: block; flex-grow: 1; font-weight: 600; font-size: 11px; letter-spacing: 0.3px; color: #464646; } .uxc-input input, .uxc-input select, .uxc-input textarea { position: static; border-radius: 0; color: #464646; font-size: 13px; line-height: 35px; font-weight: 400; border: 1px solid var(--uxc-border-color); background-color: transparent; outline: none; height: 42px; min-height: 42px; min-width: 170px; max-width: none; padding: 0 10px; transition: all 0.4s; width: 100%; margin: 0 !important; box-sizing: border-box; box-shadow: none; } .uxc-input input:focus, .uxc-input input.uxc-focus, .uxc-input select:focus, .uxc-input select.uxc-focus, .uxc-input textarea:focus, .uxc-input textarea.uxc-focus { border: 1px solid var(--uxc-accent); box-shadow: 0 0 5px rgba(39, 255, 222, 0.2); background: transparent; color: #464646; outline: none !important; } /* Hide number input spinners globally */ input[type="number"] { -webkit-appearance: textfield; -moz-appearance: textfield; appearance: textfield; } /* Hide number input spinners for WebKit browsers */ input[type="number"]::-webkit-outer-spin-button, input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; -moz-appearance: none; appearance: none; margin: 0; } /* Hide number input spinners for Firefox */ input[type="number"] { -moz-appearance: textfield; } .uxc-input select { min-height: 37px; } .uxc-input textarea { line-height: 20px; min-height: 75px; padding: 8px 10px; } .uxc-input > div { padding-right: 30px; } .uxc-input > div p, .uxc-input > div p a { font-size: 13px; line-height: 22px; letter-spacing: 0.3px; margin: 5px 0 0 0; color: #5c7171; font-weight: 400; } .uxc-input > div p a, .uxc-input > div p a a { margin: 0 0 0 5px; text-decoration: none; } .uxc-input > div p a:hover, .uxc-input > div p a a:hover { text-decoration: underline; } .uxc-input input[type="checkbox"] { background: #fff; clear: none; cursor: pointer; display: inline-block; line-height: 0; height: 42px; min-height: 42px; width: 42px; min-width: 42px; outline: 0; padding: 0; margin: 0; text-align: center; vertical-align: middle; outline: none; box-shadow: none; background-color: transparent; -webkit-appearance: none; } .uxc-input input[type="checkbox"]:checked:before { content: "\e901" !important; font-family: "Uncheckout Icons" !important; font-style: normal !important; font-weight: normal !important; font-variant: normal !important; text-transform: none !important; line-height: 42px; font-size: 15px; color: var(--uxc-accent); margin: 0; width: 100%; height: 100%; } /* Raw form checkbox rows (label span + lone checkbox) sit on ONE line - label left, checkbox right - matching the settings data-type="checkbox" rows. :has() scopes it to rows that end in a checkbox; rows carrying hint divs or slider toggles keep their own layouts. Mirrored across the admin surfaces (pay + siblings). */ .uxc-admin .uxc-input:has(> span + input[type="checkbox"]), .uxc-admin .uxc-input:has(> input[type="checkbox"]:last-child), .uxc-admin .uxc-input[data-type="checkbox"]:has(> input[type="checkbox"]) { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: nowrap; } /* Custom domain on/off slider toggle — sits on the #custom-domain row, far right of the label line. Overrides the generic .uxc-input input[type=checkbox] 42x42 box + checkmark glyph for this control. */ .uxc-premium-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; width: 100%; } .uxc-premium-toggle { position: relative; display: inline-block; width: 36px; height: 20px; margin: 0 0 0 12px; cursor: pointer; flex-shrink: 0; } .uxc-input .uxc-premium-toggle input[type="checkbox"] { opacity: 0 !important; width: 0 !important; height: 0 !important; min-width: 0 !important; min-height: 0 !important; margin: 0 !important; display: block !important; -webkit-appearance: none !important; } .uxc-input .uxc-premium-toggle input[type="checkbox"]:checked:before { content: "" !important; } .uxc-premium-slider { position: absolute; inset: 0; background: #666; border-radius: 0; transition: background .2s; } .uxc-premium-slider:before { content: ""; position: absolute; height: 14px; width: 14px; left: 3px; top: 3px; background: #fff; border-radius: 0; transition: transform .2s; box-shadow: 0 1px 2px rgba(0,0,0,.25); } .uxc-premium-toggle input[type="checkbox"]:checked + .uxc-premium-slider { background: var(--uxc-accent); } .uxc-premium-toggle input[type="checkbox"]:checked + .uxc-premium-slider:before { transform: translateX(16px); } .uxc-premium-toggle input[type="checkbox"]:disabled + .uxc-premium-slider { background: #555; cursor: not-allowed; } /* Dark-mode color toggle: same slider visual as .uxc-premium-toggle (reuses the .uxc-premium-slider track + knob) but a dedicated label class so the premium-toggle JS hooks, which drive -enabled meta-values and disable the input when off, leave this genuine checkbox value alone. No em dashes. */ .uxc-color-toggle { position: relative; display: inline-block; width: 36px; height: 20px; margin: 0 0 0 12px; cursor: pointer; flex-shrink: 0; } .uxc-input .uxc-color-toggle input[type="checkbox"] { opacity: 0 !important; width: 0 !important; height: 0 !important; min-width: 0 !important; min-height: 0 !important; margin: 0 !important; display: block !important; -webkit-appearance: none !important; } .uxc-color-toggle input[type="checkbox"]:checked + .uxc-premium-slider { background: var(--uxc-accent); } .uxc-color-toggle input[type="checkbox"]:checked + .uxc-premium-slider:before { transform: translateX(16px); } .uxc-input + .uxc-input { margin-top: 10px; } .uxc-input.uxc-error input, .uxc-input.uxc-error select, .uxc-input.uxc-error textarea { border: 1px solid var(--uxc-error); box-shadow: 0 0 5px rgba(202, 52, 52, 0.25); } .uxc-input-btn .uxc-btn { margin-left: 15px; border-radius: 0; height: 39px !important; line-height: 39px !important; flex: 0 0 auto; } .uxc-input-btn .uxc-btn:not(:hover) { border-color: var(--uxc-border-color); } .uxc-input-btn .uxc-btn.uxc-loading:before { border-color: rgba(var(--uxc-accent-rgb), 0.2); border-top-color: var(--uxc-accent); } .uxc-label, .uxc-admin .uxc-input span.uxc-label { display: inline-block; width: auto; min-width: 0; margin: 0 15px; border: 1px solid var(--uxc-accent); color: var(--uxc-accent); font-size: 11px; line-height: 11px; padding: 3px 7px; font-weight: 500; border-radius: 0; letter-spacing: .2px; white-space: nowrap; transition: color .4s, border-color .4s, background-color .4s; } .uxc-clipboard { cursor: pointer; z-index: 2; transition: all 0.4s; } .uxc-toolip-cnt { position: relative; overflow: visible !important; } .uxc-toolip-cnt:hover .uxc-toolip, .uxc-toolip-cnt.uxc-active .uxc-toolip { display: block !important; animation: uxc-fade-bottom-center 1s; } .uxc-toolip { position: absolute; display: none !important; top: 0; right: 0; transform: none; font-weight: 400 !important; font-style: normal; white-space: nowrap; letter-spacing: .2px; font-size: 13px !important; line-height: 20px; z-index: 995; background: #464646; border-radius: 0; padding: 3px 12px; color: #fff !important; margin-top: -40px; min-width: 0 !important; max-width: none !important; width: auto !important; text-align: center; } .uxc-toolip:after { position: absolute; bottom: -3px; right: 8px; transform: translateY(8px); content: " "; border-width: 6px; border-style: solid; border-color: var(--uxc-border-color) transparent transparent; } .uxc-info { font-size: 13px; line-height: 20px; color: #fff; background-color: #ca3434; right: 0; left: 0; top: 0; padding: 15px 20px; border-radius: 0; display: none; } .uxc-info:not(:empty) { display: block; animation: uxc-fade-animation 0.4s; } .uxc-btn { font-size: 14px; line-height: 39px; letter-spacing: 0.5px; font-weight: 500; border-radius: 0; min-width: 0; background-color: transparent; text-decoration: none; color: var(--uxc-accent); height: 38px; position: relative; display: inline-block; border: 1px solid var(--uxc-accent); text-align: center; cursor: pointer; outline: none; box-shadow: none; padding: 0 10px; overflow: hidden; white-space: nowrap; transition: color .4s, background-color .4s, border-color .4s, opacity .4s; } .uxc-btn i { font-size: 17px; display: inline-block; font-weight: 400; line-height: 0; transform: translateY(3px); margin: 0 7px 0 -5px; } .uxc-btn.uxc-btn-border { background: transparent !important; border: 1px solid var(--uxc-accent); color: var(--uxc-accent); height: 36px; line-height: 37px; } .uxc-btn.uxc-btn-border:hover, .uxc-btn.uxc-btn-border:active { color: #000; border-color: var(--uxc-border-color); } .uxc-btn.uxc-btn-img { padding-left: 43px; padding-right: 15px; } .uxc-btn.uxc-btn-img img { position: absolute; height: 18px; left: 16px; top: 7px; } .uxc-btn:hover, .uxc-btn:active { background-color: transparent; color: #000; border-color: var(--uxc-border-color); } .uxc-btn.uxc-disabled { background-color: #e3ebeb !important; color: #aeb7b7 !important; cursor: not-allowed !important; } .uxc-btn-icon { position: relative; cursor: pointer; width: 33px; height: 33px; border: 1px solid rgba(255, 255, 255, 0); opacity: 1; border-radius: 0; display: inline-block; text-align: center; transition: all 0.4s; text-decoration: none !important; overflow: hidden; color: #464646; } .uxc-btn-icon i { line-height: 33px; font-size: 18px; width: 33px; } .uxc-btn-icon i:before { font-size: 18px; line-height: 35px; } .uxc-btn-icon:before { font-size: 23px; line-height: 35px; } .uxc-btn-icon.uxc-loading:before { width: 22px; height: 22px; border: 3px solid rgba(var(--uxc-accent-rgb), 0.2); border-top-color: var(--uxc-accent); border-radius: 0; margin-top: -11px; margin-left: -11px; line-height: 30px; } .uxc-btn-icon.uxc-loading:after { display: none; } .uxc-btn-icon:hover { opacity: 1; color: var(--uxc-accent); } .uxc-btn-icon svg { width: 18px; height: 18px; } .uxc-btn-icon.uxc-icon-btn-svg { display: inline-flex; align-items: center; justify-content: center; } .uxc-checkouts-panel { flex: 0 0 100%; min-width: 0; max-width: 100%; margin-top: 15px; order: 10; } .uxc-checkouts-panel .uxc-transactions-info { margin-top: 0; min-width: 0; max-width: 100%; } .uxc-checkouts-panel pre { font-size: 12px; padding: 10px; margin: 10px 0 0; max-width: 100%; white-space: pre-wrap; overflow-wrap: anywhere; word-break: break-word; background: var(--uxc-bg-secondary, rgba(127, 127, 127, 0.06)); border: 1px solid var(--uxc-border-color, rgba(127, 127, 127, 0.18)); } .uxc-checkouts-panel-actions { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; } .uxc-checkouts-panel-actions .uxc-dl-row { display: flex; flex-wrap: wrap; gap: 8px; } .uxc-btn-text { cursor: pointer; transition: all 0.4s; } /* Icon-left-of-text buttons (e.g. Create Payment Request, + Add Staff): nudge the leading svg down to the text middle and give it breathing room before the label. */ .uxc-btn:not(.uxc-act):not(.uxc-pos-act):not(.uxc-upload-btn) > svg:first-child { vertical-align: middle; position: relative; top: -2px; margin-right: 8px; } .uxc-btn-text i { margin-right: 15px; display: inline-block; } .uxc-btn-text:hover { color: var(--uxc-accent); } .uxc-btn-red:hover { border-color: var(--uxc-error) !important; color: #ca3434 !important; background-color: rgba(202, 52, 52, 0.1) !important; } .uxc-btn-red:hover i { color: #ca3434 !important; } .uxc-btn-red.uxc-loading:before { border-color: rgba(202, 52, 52, 0.2); border-top-color: var(--uxc-error); } .uxc-btn-red.uxc-link:hover:after { background-color: #ca3434 !important; } .uxc-btn-red.uxc-link:hover { background-color: transparent !important; } .uxc-link, .uxc-underline { cursor: pointer; letter-spacing: .5px; transition: all 0.4s; } .uxc-link:hover, .uxc-link:active, .uxc-underline:hover, .uxc-underline:active { color: var(--uxc-accent); } .uxc-underline { position: relative; display: inline-block; text-decoration: none; } .uxc-underline:after { content: ""; position: absolute; bottom: -3px; left: 0; right: 0; height: 1px; transition: all 0.4s; background-color: #888888; } .uxc-underline:hover:after { background-color: var(--uxc-accent); } .uxc-box { max-width: 600px; margin: 30px auto; padding: 45px; border-radius: 0; background: transparent; position: relative; } .uxc-box + .uxc-box { margin-top: 15px; } .uxc-flex { display: flex; justify-content: space-between; align-items: center; align-content: center; } .uxc-flex .uxc-input + .uxc-input { margin: 0 0 0 15px !important; padding-top: 0 !important; border: none !important; } hr { display: block; clear: both; height: 0; margin: 30px 0; } @keyframes uxc-lightbox-animation { 0% { transform: translateY(-50px); opacity: 0; } 100% { transform: translateY(0); opacity: 1; } } /* GLOBAL ========================================================== */ body, html { margin: 0; padding: 0; min-height: 100%; } .uxc-loading-global { position: absolute; z-index: 99995; width: 36px; height: 36px; left: 50%; margin-left: -18px; } /* ELEMENTS ========================================================== */ .uxc-nav-wide { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; padding: 4px 0 12px; } /* When .uxc-nav-wide is also a .uxc-page-header (transactions bar), drop the gap so items sit flush like the dashboard header. */ .uxc-nav-wide.uxc-page-header { gap: 0; } .uxc-nav-wide.uxc-page-header > #uxc-download-transitions, .uxc-nav-wide.uxc-page-header > #uxc-filters, .uxc-nav-wide.uxc-page-header > #uxc-upload-checkouts, .uxc-nav-wide.uxc-page-header > #uxc-checkouts-download { align-self: stretch; height: auto; width: 42px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border-left: 1px solid var(--uxc-border-color, #e6e6e6); padding: 0; background: none; cursor: pointer; color: var(--uxc-text-muted, #999); } /* SVG header icons sit 1px high vs the icon-font glyphs; nudge down to share the baseline. */ .uxc-nav-wide.uxc-page-header > #uxc-download-transitions svg, .uxc-nav-wide.uxc-page-header > #uxc-checkouts-download svg, .uxc-nav-wide.uxc-page-header #uxc-create-checkout svg { position: relative; top: 1px; } .uxc-nav-wide.uxc-page-header > #uxc-filters i { position: relative; top: 3px; } .uxc-nav-wide.uxc-page-header > #uxc-download-transitions i { position: relative; top: 2px; } .uxc-nav-wide.uxc-page-header > .uxc-nav-filters { align-self: stretch; align-items: center; border-left: 1px solid var(--uxc-border-color, #e6e6e6); border-right: 1px solid var(--uxc-border-color, #e6e6e6); padding: 0 10px; } /* Break the transactions header out of .uxc-body's left/right padding (match the dashboard header's edge-to-edge behavior). */ @media (min-width: 768px) { [data-area="transactions"] > .uxc-nav-wide.uxc-page-header { margin-left: calc(-1 * var(--uxc-content-left, 190px)); margin-right: -12px; padding-left: calc(var(--uxc-content-left, 172px) - 16px); padding-right: 0; } } .uxc-color-cnt { position: relative; } .uxc-color-cnt i { position: absolute; right: 12px; top: 25px; font-size: 10px; cursor: pointer; z-index: 2; transition: all 0.4s; } .uxc-color-cnt i:hover { color: #ca3434; } [data-type="multi-input"] { margin-bottom: -15px; } /* 15px below every settings input row (text/number/checkbox, e.g. 2FA "Active"). Excludes buttons, the address rows (.uxc-addr-row; input nested), and .uxc-input rows (input nested in .uxc-setting-input; those keep their own rule above). */ [data-type]:has(> input, > select, > textarea):not([data-type="button"]):not(.uxc-addr-row) { margin-bottom: 15px; } /* Stack the title above the input with a 5px gap for text/number rows. Checkboxes keep their label inline with the box, so they are excluded here. */ [data-type]:has(> input):not([data-type="checkbox"]):not([data-type="button"]):not(.uxc-addr-row) > span { display: block; margin-bottom: 5px; } [data-type="multi-input"] [data-type="checkbox"], [data-type="multi-input"] [data-type="button"] { display: flex; justify-content: space-between; align-items: flex-start; } [data-type="multi-input"] [data-type="checkbox"] span, [data-type="multi-input"] [data-type="button"] span { max-width: 350px !important; width: auto !important; padding-top: 7px; } [data-type="multi-input"] [data-type="checkbox"] input, [data-type="multi-input"] [data-type="button"] input { margin-top: 0 !important; } [data-type="multi-input"] .uxc-btn { background: transparent; color: var(--uxc-accent); border: 1px solid var(--uxc-accent); margin-bottom: 15px; } [data-type="multi-input"] .uxc-btn:hover { border-color: var(--uxc-border-color); color: #000; background: transparent; } [data-type="multi-input"] .uxc-btn.uxc-loading:before { border-color: rgba(var(--uxc-accent-rgb), 0.2); border-top-color: var(--uxc-accent); } [data-type="upload-file"] .uxc-btn-icon { min-width: 40px; height: 40px; border: 1px solid var(--uxc-border-color); margin-left: 5px; background-color: transparent; opacity: 1; } [data-type="upload-file"] .uxc-btn-icon i { line-height: 46px; color: #5c7171; transition: all 0.4s; } [data-type="upload-file"] .uxc-btn-icon:hover { border-color: var(--uxc-accent); } [data-type="upload-file"] .uxc-btn-icon:hover i { color: var(--uxc-accent); } .uxc-flex .uxc-input { min-width: 0; } .uxc-flex .uxc-input input, .uxc-flex .uxc-input select { min-width: 0; } .uxc-table { margin: 0; width: 100%; max-width: 100%; border-collapse: collapse; table-layout: auto; } .uxc-table th { white-space: nowrap; padding: 9px 15px; text-align: left; border-top: 1px solid var(--uxc-border-color, #e6e6e6); border-bottom: 1px solid var(--uxc-border-color, #e6e6e6); font-size: 15px; line-height: 20px; font-weight: 600; color: var(--uxc-text-primary, #1a1a1a); letter-spacing: .3px; } .uxc-table thead th:first-child { border-left: 1px solid var(--uxc-border-color, #e6e6e6); } .uxc-table thead th:last-child { border-right: 1px solid var(--uxc-border-color, #e6e6e6); } .uxc-dark-mode .uxc-table th { color: var(--uxc-text-primary); border-bottom-color: var(--uxc-border-color); } .uxc-table td { white-space: nowrap; padding: 12px 15px; text-align: left; font-size: 14px; height: auto; letter-spacing: .3px; border-bottom: 1px solid var(--uxc-border-color, #e6e6e6); transition: all 0.4s; } .uxc-dark-mode .uxc-table td { border-bottom-color: var(--uxc-border-color); } .uxc-table .uxc-title { font-weight: 500; } .uxc-table .uxc-title + .uxc-text { line-height: 15px; margin-top: 5px; } .uxc-table .uxc-title, .uxc-table .uxc-text, .uxc-table .uxc-link { font-size: 14px; white-space: nowrap; text-overflow: ellipsis; } .uxc-table .uxc-cell-wrap { white-space: normal; overflow-wrap: anywhere; } /* Hover = brand treatment, never a background wash: the row's cell borders + text + icons go gold (the grey fill historically hurt readability). Same shape as .uxc-chain-badge:hover. */ .uxc-table tr:hover td { cursor: pointer; background-color: transparent; border-color: var(--uxc-accent) !important; color: var(--uxc-accent); } .uxc-table tr:hover td i, .uxc-table tr:hover td svg { color: var(--uxc-accent); } /* The console wraps every cell text in .uxc-title/.uxc-text; their own color (set in dark mode) beats td inheritance - target the wrappers directly so the gold reaches the VISIBLE text. Badges/pending pills keep their semantic colors. */ .uxc-table tr:hover td .uxc-title, .uxc-table tr:hover td .uxc-text, .uxc-table tr:hover td .uxc-link { color: var(--uxc-accent); } .uxc-table img { max-height: 35px; margin-right: 15px; } .uxc-table .uxc-flex { justify-content: flex-start; } .uxc-table .uxc-text:empty { display: none; } .uxc-table .uxc-table-muted { color: var(--uxc-text-muted, #999); white-space: nowrap; } .uxc-table .uxc-table-actions { text-align: right; white-space: nowrap; } /* Action buttons are icon-only squares by default (titles + aria-labels carry the labels): staff rows carry up to 5 actions and text labels overflow the card. Matches the mobile layout. */ .uxc-pos-act-ico { display: inline-flex; } .uxc-pos-act-text { display: none; } .uxc-pos-act { width: 38px; height: 38px; min-width: 38px; padding: 0; display: inline-flex; align-items: center; justify-content: center; } .uxc-act-ico { display: inline-flex; } .uxc-act-text { display: none; } .uxc-act { width: 38px; height: 38px; min-width: 38px; padding: 0; display: inline-flex; align-items: center; justify-content: center; } /* Very wide screens: restore the short text label next to the icon. The 1760px breakpoint leaves the actions cell room for the widest rows (staff's 5 actions, POS terminal row). */ @media (min-width: 1760px) { .uxc-act, .uxc-pos-act { width: auto; min-width: 38px; padding: 0 12px; gap: 6px; } .uxc-act-text, .uxc-pos-act-text { display: inline; white-space: nowrap; } } .uxc-table-checkbox-col { width: 34px; } .uxc-staff-email { font-size: 12px; color: var(--uxc-text-muted, #999); overflow-wrap: anywhere; } .uxc-staff-suspended { color: #d33; font-weight: 600; } .uxc-staff-matrix-head { cursor: pointer; user-select: none; display: flex; align-items: center; justify-content: space-between; } .uxc-staff-matrix-toggle { margin-left: 8px; color: var(--uxc-text-muted, #5c7171); font-size: 24px; line-height: 1; transition: transform 0.2s; } .uxc-staff-matrix.uxc-staff-matrix-collapsed .uxc-staff-matrix-body { display: none; } .uxc-staff-matrix.uxc-staff-matrix-collapsed .uxc-staff-matrix-head { margin-bottom: 0; padding-bottom: 0; border-bottom: none; } .uxc-staff-matrix.uxc-staff-matrix-collapsed .uxc-staff-matrix-toggle { transform: rotate(-90deg); } .uxc-stat-tile-foot { margin-top: 8px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .uxc-bal-updated { font-size: 11px; color: var(--uxc-text-muted, #999); } .uxc-balance-meta { margin: 4px 0; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } /* Mobile: keep the transactions table as a proper table (not card-style); horizontal scroll if needed. */ @media (max-width: 768px) { /* Scroll the wrapper, keep the table a real width:100% table so it fills the box (display:block + width:max-content collapses the inner table to its content and leaves a gap). */ .uxc-table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; width: 100%; } /* Checkouts File panel: Download + Upload as side-by-side cards (stacked on mobile). */ .uxc-checkouts-file-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin: 16px 0; } .uxc-checkouts-file-cards .uxc-card-title { margin-bottom: 8px; } .uxc-checkouts-file-cards pre { white-space: pre-wrap; word-break: break-all; font-size: 11px; background: transparent; padding: 8px; margin: 8px 0; } @media (max-width: 768px) { .uxc-checkouts-file-cards { grid-template-columns: 1fr; } } /* Download/Upload sub-cards: flat, square, no background (match the pushdown card treatment). */ .uxc-checkouts-file-cards .uxc-card { background: transparent; border-radius: 0; box-shadow: none; margin-bottom: 12px; } .uxc-checkouts-file-cards .uxc-card:hover { border-color: var(--uxc-border-color); box-shadow: none; } /* Transactions card-stack on mobile (same pattern as checkouts + the account tables). */ #uxc-table-transactions { display: block; width: 100%; } #uxc-table-transactions thead { display: none; } #uxc-table-transactions tbody { display: block; } #uxc-table-transactions tr { display: flex; flex-wrap: wrap; border: 1px solid var(--uxc-border-color, #e6e6e6); border-radius: 0; margin-bottom: 16px; padding: 12px; } #uxc-table-transactions td { display: flex; justify-content: space-between; align-items: center; width: 100%; border: none; padding: 4px 0; white-space: normal; text-align: right; } #uxc-table-transactions td::before { content: attr(data-label); font-weight: 600; color: var(--uxc-text-muted, #999); margin-right: 12px; text-align: left; } #uxc-table-transactions tr:hover td { background-color: transparent; } .uxc-transactions-info { display: block !important; } /* ...but the create editors hide it (inline style on checkouts, state css on payment request), which the rule above would defeat; the editors' state classes on .uxc-main outrank it. */ .uxc-main.uxc-area-create-checkout .uxc-transactions-info, .uxc-main.uxc-area-payment-request .uxc-transactions-info { display: none !important; } #uxc-table-audit { display: block; width: 100%; } #uxc-table-audit thead { display: none; } #uxc-table-audit tbody { display: block; } #uxc-table-audit tr { display: flex; flex-wrap: wrap; border: 1px solid var(--uxc-border-color, #e6e6e6); border-radius: 0; margin-bottom: 12px; padding: 12px; } #uxc-table-audit td { display: flex; justify-content: space-between; align-items: center; width: 100%; border: none; padding: 4px 0; white-space: normal; text-align: right; } #uxc-table-audit td::before { content: attr(data-label); font-weight: 600; color: var(--uxc-text-muted, #999); margin-right: 12px; text-align: left; } #uxc-table-audit tr:hover td { background-color: transparent; } /* Audit detail: clamp long diffs to ~3 lines; click to expand (JS marks .uxc-clampable). */ #uxc-table-audit .uxc-cell-wrap.uxc-clampable { max-height: 4.8em; overflow: hidden; position: relative; cursor: pointer; } #uxc-table-audit .uxc-cell-wrap.uxc-clampable::after { content: 'Show more'; position: absolute; right: 0; bottom: 0; padding: 0 0 0 10px; color: var(--uxc-accent); font-weight: 600; background: linear-gradient(to right, transparent, var(--uxc-bg-primary, #fff) 55%); } #uxc-table-audit .uxc-cell-wrap.uxc-clampable.uxc-expanded { max-height: none; } #uxc-table-audit .uxc-cell-wrap.uxc-clampable.uxc-expanded::after { content: 'Show less'; position: static; display: inline-block; margin-top: 4px; padding: 0; background: none; } #uxc-table-staff { display: block; width: 100%; } #uxc-table-staff thead { display: none; } #uxc-table-staff tbody { display: block; } #uxc-table-staff tr { display: flex; flex-wrap: wrap; border: 1px solid var(--uxc-border-color, #e6e6e6); border-radius: 0; margin-bottom: 12px; padding: 12px; } #uxc-table-staff td { display: flex; justify-content: space-between; align-items: center; width: 100%; border: none; padding: 4px 0; white-space: normal; text-align: right; } #uxc-table-staff td::before { content: attr(data-label); font-weight: 600; color: var(--uxc-text-muted, #999); margin-right: 12px; text-align: left; } #uxc-table-staff tr:hover td { background-color: transparent; } /* Archived staff: card-stack (reuses this data-label pattern). */ #uxc-table-staff-archived { display: block; width: 100%; } #uxc-table-staff-archived thead { display: none; } #uxc-table-staff-archived tbody { display: block; } #uxc-table-staff-archived tr { display: flex; flex-wrap: wrap; border: 1px solid var(--uxc-border-color, #e6e6e6); border-radius: 0; margin-bottom: 12px; padding: 12px; } #uxc-table-staff-archived td { display: flex; justify-content: space-between; align-items: center; width: 100%; border: none; padding: 4px 0; white-space: normal; text-align: right; } #uxc-table-staff-archived td::before { content: attr(data-label); font-weight: 600; color: var(--uxc-text-muted, #999); margin-right: 12px; text-align: left; } #uxc-table-staff-archived tr:hover td { background-color: transparent; } /* Staff action buttons: "Actions" label on its own line, icon-only buttons below. */ #uxc-table-staff .uxc-table-actions, #uxc-table-staff-archived .uxc-table-actions { justify-content: flex-start; flex-wrap: wrap; gap: 6px; } #uxc-table-staff .uxc-table-actions::before, #uxc-table-staff-archived .uxc-table-actions::before { width: 100%; margin-bottom: 4px; } .uxc-act-ico { display: inline-flex; } .uxc-act-text { display: none; } .uxc-act { width: 38px; height: 38px; min-width: 38px; padding: 0; display: inline-flex; align-items: center; justify-content: center; } /* POS registers + terminals tables: card-stack (reuses this data-label pattern) + icon-only action buttons. */ #uxc-table-pos-registers, #uxc-table-pos-terminals { display: block; width: 100%; } #uxc-table-pos-registers thead, #uxc-table-pos-terminals thead { display: none; } #uxc-table-pos-registers tbody, #uxc-table-pos-terminals tbody { display: block; } #uxc-table-pos-registers tr, #uxc-table-pos-terminals tr { display: flex; flex-wrap: wrap; border: 1px solid var(--uxc-border-color, #e6e6e6); border-radius: 0; margin-bottom: 12px; padding: 12px; } #uxc-table-pos-registers td, #uxc-table-pos-terminals td { display: flex; justify-content: space-between; align-items: center; width: 100%; border: none; padding: 4px 0; white-space: normal; text-align: right; } #uxc-table-pos-registers td::before, #uxc-table-pos-terminals td::before { content: attr(data-label); font-weight: 600; color: var(--uxc-text-muted, #999); margin-right: 12px; text-align: left; } #uxc-table-pos-registers tr:hover td, #uxc-table-pos-terminals tr:hover td { background-color: transparent; } #uxc-table-pos-registers .uxc-pos-token, #uxc-table-pos-terminals .uxc-pos-token { word-break: break-all; overflow-wrap: anywhere; min-width: 0; max-width: 60%; text-align: right; } #uxc-table-pos-registers .uxc-table-actions, #uxc-table-pos-terminals .uxc-table-actions { justify-content: flex-end; flex-wrap: wrap; gap: 6px; } #uxc-table-pos-registers .uxc-pos-act-ico, #uxc-table-pos-terminals .uxc-pos-act-ico { display: inline-flex; } #uxc-table-pos-registers .uxc-pos-act-text, #uxc-table-pos-terminals .uxc-pos-act-text { display: none; } #uxc-table-pos-registers .uxc-pos-act, #uxc-table-pos-terminals .uxc-pos-act { width: 38px; height: 38px; min-width: 38px; padding: 0; display: inline-flex; align-items: center; justify-content: center; } #uxc-pos-new-name, #uxc-pos-add { width: 100%; } /* GENERIC card-stack (the standard mobile table style): any .uxc-table whose cells carry data-label flattens to bordered cards on phones - the checkouts/payments/transactions pattern. The id-specific blocks above stay (they carry per-table extras); this catches every table that was never given one (e.g. the POS staff list). */ @media (max-width: 768px) { .uxc-table:has(tbody td[data-label]) { display: block; width: 100%; } .uxc-table:has(tbody td[data-label]) thead { display: none; } .uxc-table:has(tbody td[data-label]) tbody { display: block; } .uxc-table:has(tbody td[data-label]) tr { display: flex; flex-wrap: wrap; border: 1px solid var(--uxc-border-color, #e6e6e6); border-radius: 0; margin-bottom: 12px; padding: 12px; } .uxc-table:has(tbody td[data-label]) td { display: flex; justify-content: space-between; align-items: center; width: 100%; border: none; padding: 4px 0; white-space: normal; text-align: right; } .uxc-table:has(tbody td[data-label]) td::before { content: attr(data-label); font-weight: 600; color: var(--uxc-text-muted, #999); margin-right: 12px; text-align: left; } .uxc-table:has(tbody td[data-label]) tr:hover td { background-color: transparent; } } /* Checkouts (payment links): card-stack on mobile (thead hidden; row td's carry data-label). */ #uxc-table-checkouts { display: block; width: 100%; } #uxc-table-checkouts thead { display: none; } #uxc-table-checkouts tbody { display: block; } #uxc-table-checkouts tr { display: flex; flex-wrap: wrap; border: 1px solid var(--uxc-border-color, #e6e6e6); border-radius: 0; margin-bottom: 12px; padding: 12px; } #uxc-table-checkouts td { display: flex; justify-content: space-between; align-items: center; width: 100%; border: none; padding: 4px 0; white-space: normal; text-align: right; } #uxc-table-checkouts td::before { content: attr(data-label); font-weight: 600; color: var(--uxc-text-muted, #999); margin-right: 12px; text-align: left; } #uxc-table-checkouts tr:hover td { background-color: transparent; } /* Hide the bulk-select checkbox row in the mobile card view (unnecessary on phones). */ #uxc-table-checkouts td[data-label="Select"] { display: none; } /* Landers (lander builder): card-stack on mobile; the Edit button reuses the generic .uxc-act icon-only rules. */ #uxc-table-landers { display: block; width: 100%; } #uxc-table-landers thead { display: none; } #uxc-table-landers tbody { display: block; } #uxc-table-landers tr { display: flex; flex-wrap: wrap; border: 1px solid var(--uxc-border-color, #e6e6e6); border-radius: 0; margin-bottom: 12px; padding: 12px; } #uxc-table-landers td { display: flex; justify-content: space-between; align-items: center; width: 100%; border: none; padding: 4px 0; white-space: normal; text-align: right; } #uxc-table-landers td::before { content: attr(data-label); font-weight: 600; color: var(--uxc-text-muted, #999); margin-right: 12px; text-align: left; } #uxc-table-landers tr:hover td { background-color: transparent; } /* Landers empty state (colspan cell): centered full-width block, no row label. */ #uxc-table-landers td[colspan] { display: block; flex: 1 0 100%; width: 100%; text-align: center; padding: 18px 0; } #uxc-table-landers td[colspan]::before { content: none; } /* Account tables (Payments, Ledger, UCASH History, Balance Activity): card-stack on mobile (same pattern). */ #uxc-table-payments, #uxc-table-ledger, #uxc-table-ucash-history, #uxc-table-balance-activity { display: block; width: 100%; } #uxc-table-payments thead, #uxc-table-ledger thead, #uxc-table-ucash-history thead, #uxc-table-balance-activity thead { display: none; } #uxc-table-payments tbody, #uxc-table-ledger tbody, #uxc-table-ucash-history tbody, #uxc-table-balance-activity tbody { display: block; } #uxc-table-payments tr, #uxc-table-ledger tr, #uxc-table-ucash-history tr, #uxc-table-balance-activity tr { display: flex; flex-wrap: wrap; border: 1px solid var(--uxc-border-color, #e6e6e6); border-radius: 0; margin-bottom: 12px; padding: 12px; } #uxc-table-payments td, #uxc-table-ledger td, #uxc-table-ucash-history td, #uxc-table-balance-activity td { display: flex; justify-content: space-between; align-items: center; width: 100%; border: none !important; padding: 4px 0; white-space: normal; text-align: right; } #uxc-table-payments td::before, #uxc-table-ledger td::before, #uxc-table-ucash-history td::before, #uxc-table-balance-activity td::before { content: attr(data-label); font-weight: 600; color: var(--uxc-text-muted, #999); margin-right: 12px; text-align: left; } #uxc-table-payments tr:hover td, #uxc-table-ledger tr:hover td, #uxc-table-ucash-history tr:hover td, #uxc-table-balance-activity tr:hover td { background-color: transparent; } /* Balances (wallet addresses): card-stack on mobile; per-address sub-rows nest under their crypto. */ #uxc-table-balances { display: block; width: 100%; } #uxc-table-balances thead { display: none; } #uxc-table-balances tbody { display: block; } #uxc-table-balances tr { display: flex; flex-wrap: wrap; border: 1px solid var(--uxc-border-color, #e6e6e6); border-radius: 0; margin-bottom: 12px; padding: 12px; } #uxc-table-balances td { display: flex; justify-content: space-between; align-items: center; width: 100%; border: none; padding: 4px 0; white-space: normal; text-align: right; } #uxc-table-balances td::before { content: attr(data-label); font-weight: 600; color: var(--uxc-text-muted, #999); margin-right: 12px; text-align: left; } #uxc-table-balances tr:hover td { background-color: transparent; } /* Parent + its address sub-rows form ONE card: parent opens it (no bottom border/margin), sub-rows are full-width inner rows (no indent, no card of their own, a top divider between them, content spans the full card width), and the last sub-row closes the card. Single-address rows keep the default standalone-card treatment. */ #uxc-table-balances tr.uxc-balance-parent { border-bottom: 1px solid var(--uxc-border-color, #e6e6e6); margin-bottom: 0; } /* own box now: the grey bands below are standalone (operator 8/23) */ #uxc-table-balances tr.uxc-balance-sub { margin: 0; background: rgba(127, 127, 127, .04); border: 0; } #uxc-table-balances tr.uxc-balance-sub td::before { font-weight: 400; } /* a parent group's LAST band closes the group with the same bottom margin. */ #uxc-table-balances tr.uxc-balance-sub:not(:has(~ tr.uxc-balance-sub)) { margin-bottom: 8px; } } .uxc-search { position: relative; } .uxc-search input { padding-right: 60px; } .uxc-search input:focus + input + i { color: var(--uxc-accent); } .uxc-search i { position: absolute; right: 15px; font-size: 18px; line-height: 0; top: 50%; margin-top: -10px; width: 20px; height: 20px; color: #5c7171; transition: all 0.4s; } .uxc-search i.sb-loading { margin-top: 0; } .uxc-mobile-menu > i, .uxc-mobile-menu > svg { display: none; } .uxc-repater-line, .uxc-upload-image { position: relative; } .uxc-repater-line > i, .uxc-upload-image > i { position: absolute; right: 0; top: 38px; font-size: 10px; color: #5c7171; width: 25px; height: 25px; line-height: 25px; text-align: right; cursor: pointer; transition: all 0.4s; } .uxc-repater-line > i:hover, .uxc-upload-image > i:hover { color: #ca3434; } .uxc-repater-line hr { height: 1px; margin: 15px 0 30px 0; background: #888888; } .uxc-upload-image .uxc-btn-icon { margin: 0; width: 100%; height: 150px; line-height: 160px; background-size: cover; background-position: center center; } .uxc-upload-image .uxc-btn-icon i { color: #7f9494; } .uxc-upload-image .uxc-btn-icon i:before { font-size: 18px; line-height: 160px; } .uxc-upload-image .uxc-btn-icon[style] i { display: none; } .uxc-upload-image .uxc-btn-icon[style] + i { display: block; } .uxc-upload-image input { display: none !important; } .uxc-upload-image > i { top: calc(50% - 12.5px); right: -20px; display: none; } /* ADMIN AREA ========================================================== */ .uxc-nav-filters { padding: 20px; display: none; width: 100%; flex: 0 0 100%; flex-direction: row; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; order: 10; } .uxc-nav-filters .uxc-input { margin-right: 0; display: flex; justify-content: center; align-items: center; gap: 10px; } .uxc-nav-filters.uxc-active { display: flex; margin-top: 20px; animation: uxc-fade-in .5s; } .uxc-nav-filters > .uxc-select { display: inline-block; margin: 0; } .uxc-nav-filters .uxc-filter-checkout > p { max-width: 100%; } /* Card title (mobile-only; markup lives in uxc_admin_filters()). */ .uxc-nav-filters-title { display: none; } /* Download-CSV filter panel (mirrors .uxc-nav-filters; toggled by #uxc-download-transitions). */ .uxc-download-filters { padding: 20px; display: none; width: 100%; flex: 0 0 100%; flex-direction: row; align-items: center; justify-content: center; flex-wrap: wrap; gap: 16px; order: 11; } .uxc-download-filters.uxc-active { display: flex; margin-top: 20px; animation: uxc-fade-in .5s; } .uxc-download-presets { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; } .uxc-download-label { font-weight: 600; font-size: 15px; color: #464646; margin-right: 4px; } .uxc-download-preset { background: transparent; border: 1px solid var(--uxc-border-color); color: #464646; padding: 8px 14px; font-size: 13px; font-weight: 500; cursor: pointer; border-radius: 0; transition: all 0.2s; } .uxc-download-preset:hover { border-color: var(--uxc-accent); color: var(--uxc-accent); } .uxc-download-preset.uxc-active { background: var(--uxc-accent); border-color: var(--uxc-accent); color: #fff; } /* Dark theme: active chip text goes dark on the gold bg, matching the filter-card chips. */ .uxc-dark-mode .uxc-download-preset.uxc-active, .uxc-dark-mode .uxc-download-preset.uxc-active:hover { color: #1a1a1a; } .uxc-download-filters .uxc-btn { background: var(--uxc-accent); color: #fff; border: none; padding: 0 24px; font-weight: 600; } /* Support contact form */ .uxc-support-form { max-width: 640px; display: flex; flex-direction: column; gap: 16px; } .uxc-support-form .uxc-input { flex-direction: column; align-items: stretch; } .uxc-support-form .uxc-input span { margin-bottom: 6px; flex-grow: 0; } .uxc-support-form .uxc-input input, .uxc-support-form .uxc-input textarea, .uxc-support-form .uxc-input select { width: 100%; } .uxc-support-message-wrap textarea { height: auto !important; min-height: 160px; resize: vertical; line-height: 22px; } .uxc-support-status { min-height: 20px; font-size: 14px; margin: 0; } .uxc-support-status.uxc-error { color: #ca3434; } .uxc-support-status.uxc-success { color: var(--uxc-accent); font-weight: 600; } /* Support: two-column layout — form on the left, contact sidebar on the right at >=769px, stacked below. */ .uxc-support-layout { display: flex; flex-direction: column; gap: 24px; } @media (min-width: 769px) { .uxc-support-layout { flex-direction: row; align-items: flex-start; } .uxc-support-form { flex: 1 1 480px; max-width: none; } } .uxc-support-aside { border: 1px solid var(--uxc-border-color, #ddd); padding: 20px; background: transparent; } .uxc-support-aside-title { font-size: 15px; font-weight: 600; color: #464646; margin: 0 0 14px 0; } .uxc-support-aside-row { display: flex; align-items: baseline; gap: 8px; margin: 0 0 8px 0; font-size: 14px; } .uxc-support-aside-label { font-weight: 600; color: #464646; } .uxc-support-aside-row a { color: var(--uxc-accent); text-decoration: none; } .uxc-support-aside-row a:hover { text-decoration: underline; } .uxc-support-aside-note { font-size: 13px; line-height: 20px; color: #5c7171; margin: 0 0 10px 0; } .uxc-support-learn-title { margin-top: 8px; } .uxc-support-learn { list-style: none; margin: 8px 0 0 0; padding: 0; } .uxc-support-learn li { margin: 0 0 6px 0; } .uxc-support-learn a { color: var(--uxc-accent); font-size: 14px; text-decoration: none; cursor: pointer; } .uxc-support-learn a:hover { text-decoration: underline; } input.uxc-filter-date, input.uxc-filter-date-2 { min-width: 0; width: 100px; text-align: center; } input.uxc-filter-date-2 { margin-left: 10px !important; } .uxc-filter-checkout > p { max-width: 100px; } .uxc-admin { color: #000; } .uxc-admin main { padding: 0; position: relative; } .uxc-admin main > div { min-height: 50px; } .uxc-admin main > div.uxc-active { animation: uxc-fade-in .5s; } .uxc-admin main > div:not(.uxc-active) { display: none; } .uxc-admin main > div.uxc-loading:before { content: ""; width: 48px; height: 48px; margin-top: -24px; margin-left: -24px; top: calc(50% - 10px); left: 50%; border: none; background: var(--uxc-loading-icon) center center / contain no-repeat; animation: uxc-spin 1.1s linear infinite; } .uxc-dark-mode .uxc-admin main > div.uxc-loading:before { background-image: var(--uxc-loading-icon-dark); } .uxc-admin main > div.uxc-loading:after { top: calc(50% - 10px); } .uxc-admin .uxc-input span { flex-shrink: 0; } .uxc-admin .uxc-input .uxc-setting-input { width: 100%; padding-right: 0; } .uxc-admin .uxc-input .uxc-setting-content { max-width: 420px; } .uxc-admin .uxc-setting-content { box-sizing: border-box; } .uxc-admin .uxc-input .uxc-icon-help { transform: translateY(1px); margin: 0 0 0 5px; font-size: 12px; color: #b1c2d1; text-decoration: none; display: inline-block; } .uxc-admin .uxc-input .uxc-icon-help:hover { color: var(--uxc-accent); } /* Inline Read More / See Less links */ .uxc-setting-description { font-size: 13px; line-height: 22px; letter-spacing: 0.3px; margin: 0 0 5px 0; color: #5c7171; font-weight: 400; } .uxc-help-short, .uxc-help-full { font-size: 13px; line-height: 22px; letter-spacing: 0.3px; color: #5c7171; font-weight: 400; } .uxc-help-full { display: none; } /* Help content wiki/documentation style */ .uxc-help-content { display: block; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--uxc-border-color); font-family: monospace, Consolas, Monaco, "Courier New"; font-size: 12px; line-height: 1.4; color: #555; } .uxc-help-content h4 { margin: 12px 0 8px 0; font-size: 12px; font-weight: 600; color: #333; } .uxc-help-content p { margin: 0 0 8px 0; font-size: 10px; } .uxc-help-content ul { margin: 8px 0 12px 0; padding-left: 18px; } .uxc-read-more, .uxc-see-less { font-weight: 600; color: var(--uxc-accent); text-decoration: none; cursor: pointer; transition: color 0.3s; margin: 0 0 0 5px; font-family: "Uncheckout", "Helvetica Neue", "Apple Color Emoji", Helvetica, Arial, sans-serif; } .uxc-read-more:hover, .uxc-see-less:hover { color: #8a6622; text-decoration: underline; } /* Dark mode support */ .uxc-dark-mode .uxc-setting-description, .uxc-dark-mode .uxc-help-short, .uxc-dark-mode .uxc-help-full { color: var(--uxc-text-secondary); } .uxc-dark-mode .uxc-help-content { border-top-color: var(--uxc-border-color); color: var(--uxc-text-secondary); } .uxc-dark-mode .uxc-help-content h4 { color: var(--uxc-text-primary); } .uxc-dark-mode .uxc-read-more, .uxc-dark-mode .uxc-see-less { color: var(--uxc-accent); } .uxc-dark-mode .uxc-read-more:hover, .uxc-dark-mode .uxc-see-less:hover { color: #e6c07a; } /* Fee information box styling */ .uxc-fees-info-box { padding: 25px; border: 1px solid var(--uxc-border-color); margin-bottom: 15px; } .uxc-fees-info-box h4 { font-size: 14px; font-weight: 600; margin: 15px 0 8px 0; color: #464646; } .uxc-fees-info-box h4:first-child { margin-top: 0; } .uxc-fees-info-box ul { margin: 8px 0; padding-left: 20px; } .uxc-fees-info-box li { margin: 5px 0; font-size: 14px; color: #5c7171; } /* Dark mode support */ .uxc-dark-mode .uxc-fees-info-box { border-color: var(--uxc-border-color); } .uxc-dark-mode .uxc-fees-info-box h4 { color: var(--uxc-text-primary); } .uxc-dark-mode .uxc-fees-info-box li { color: var(--uxc-text-secondary); } .uxc-admin.uxc-agent #uxc-create-checkout, .uxc-admin.uxc-agent #uxc-save-checkout, .uxc-admin.uxc-agent #uxc-delete-checkout { display: none !important; } /* Stack multi-input sections vertically for better space allocation */ .uxc-admin .uxc-input[data-type="multi-input"] { flex-direction: column; } .uxc-admin .uxc-input[data-type="multi-input"] .uxc-setting-content { width: 100%; max-width: 100%; padding-right: 0; margin-bottom: 20px; } /* Wrapped checkbox rows (setting-content label + setting-input holding a lone checkbox): label left, checkbox right. Placed AFTER the label-above rules above so it wins even for rows built without data-type=checkbox (POS gates, credit toggles, anything future). */ .uxc-admin .uxc-input:has(> .uxc-setting-content + .uxc-setting-input > input[type="checkbox"]:only-child), .uxc-admin .uxc-input[data-type="checkbox"]:has(> .uxc-setting-content) { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: nowrap; } .uxc-admin .uxc-input[data-type="multi-input"] .uxc-setting-input { width: 100%; max-width: 100%; } /* Stack settings labels full-width above their controls — matches multi-input above and the Account section. :has(> .uxc-setting-content) targets ONLY settings rows (the Checkouts form and super-admin config use a bare , not .uxc-setting-content). Checkboxes stay inline. */ .uxc-admin .uxc-input:has(> .uxc-setting-content):not([data-type="checkbox"]):not([data-type="multi-input"]) { flex-direction: column; align-items: stretch; margin-bottom: 15px; } .uxc-admin .uxc-input:has(> .uxc-setting-content):not([data-type="checkbox"]):not([data-type="multi-input"]) .uxc-setting-content { width: 100%; max-width: 100%; padding-right: 0; margin-bottom: 5px; } /* Grey out a token row's fields when no network is selected (Disabled) */ .uxc-token-row-disabled { opacity: 0.4; pointer-events: none; } .uxc-settings-title { text-align: left !important; border: 1px solid var(--uxc-accent) !important; background-color: rgba(var(--uxc-accent-rgb), 0.25) !important; border-radius: 0; padding: 14px 20px !important; margin-top: 50px !important; } .uxc-settings-title span { font-size: 18px !important; color: var(--uxc-accent) !important; width: auto !important; } .uxc-settings-title .uxc-read-more { display: block; margin: 0; } .uxc-dark-mode .uxc-settings-title { border-color: var(--uxc-accent) !important; background-color: rgba(var(--uxc-accent-rgb), 0.1) !important; } .uxc-dark-mode .uxc-settings-title span { color: var(--uxc-accent) !important; } /* Settings section nav */ /* Section title bars are retired: every subpaged area carries a centered pill bar and the content cards carry their own titles. The bars stay in the DOM (anchors for the subpage tagger + the hosted descriptions the settings intro moves into the card) - hidden only. */ .uxc-settings-title { display: none !important; } .uxc-settings-nav { display: flex; flex-wrap: wrap; gap: 10px; padding: 15px 0; justify-content: center; } .uxc-settings-nav-btn { font-size: 13px; font-weight: 500; padding: 6px 14px; border: 1px solid var(--uxc-accent); border-radius: 0; background-color: transparent; color: var(--uxc-accent); text-decoration: none; cursor: pointer; transition: all 0.2s ease; } .uxc-settings-nav-btn:hover { color: #000; border-color: var(--uxc-border-color); background-color: rgba(var(--uxc-accent-rgb), 0.08); } .uxc-dark-mode .uxc-settings-nav-btn { color: var(--uxc-accent); border-color: var(--uxc-accent); } .uxc-dark-mode .uxc-settings-nav-btn:hover { color: #fff; border-color: var(--uxc-border-color); } .uxc-dark-mode .uxc-settings-nav { border-bottom-color: var(--uxc-border-color); } /* Settings section subpages (/settings/): pills are