/* === license_form.css - SharePoint Fluent UI style for the license pages === * Matches amrein-spmodern.css: Segoe UI, #0078d4 primary, #faf9f8 background, * white cards with #edebe9 borders and subtle shadows. * The .lic-choice rows replace Bootstrap's .form-check (whose absolutely * positioned .form-check-input hangs outside the card) — radios are inline * flex items inside a bordered, highlightable row instead. */ .lic-card { background: #fff; border: 1px solid #edebe9; border-radius: 8px; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06); max-width: 720px; margin: 32px auto; font-family: "Segoe UI", "Segoe UI Web", -apple-system, system-ui, sans-serif; color: #323130; overflow: hidden; } .lic-card-header { padding: 20px 28px 16px; border-bottom: 1px solid #edebe9; background: #fff; } .lic-card-header h4 { margin: 0 0 4px; font: 600 20px "Segoe UI", sans-serif; color: #201f1e; } .lic-card-header .lic-sub { margin: 0; font: 400 13px "Segoe UI", sans-serif; color: #605e5c; } .lic-card-body { padding: 24px 28px 28px; } /* --- hero banner --- The license pages run under the DEFAULT layout (plain * ), which does NOT load amrein-spmodern.css where the .hp-hero base * styles live (and those are body.amrein-body-scoped anyway). These pages * would render an unstyled header with a missing background image, so the * full hero treatment is embedded here, scoped to .lic-hero (mirrors the * amrein-spmodern look: light SharePoint-blue gradient + faint banner image * + Fluent badge/headline/CTAs). Self-contained on purpose. */ .hp-hero.lic-hero { background: linear-gradient(135deg, #f3f9fd 0%, #deecf9 55%, #c7e0f4 100%); color: #323130; padding: 64px 0 88px; position: relative; overflow: hidden; margin-bottom: 0 !important; font-family: "Segoe UI", "Segoe UI Web", -apple-system, system-ui, sans-serif; } .hp-hero.lic-hero::before { content: ''; position: absolute; inset: 0; pointer-events: none; background: url('/images/amrein/pic/banners/tilestack3.jpg') right center / cover no-repeat; opacity: 0.16; } .lic-hero .hp-hero-inner { position: relative; z-index: 2; } .lic-hero .hp-hero-content { max-width: 720px; } .lic-hero .hp-hero-badge { display: inline-flex; align-items: center; gap: 8px; padding: 5px 14px; border-radius: 20px; border: 1px solid #0078d4; background: #deecf9; color: #0078d4; font: 600 11px/1 "Segoe UI", sans-serif; letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: 22px; } .lic-hero .hp-hero-badge .badge-dot { width: 7px; height: 7px; border-radius: 50%; background: #0078d4; display: inline-block; } .lic-hero h1 { font-size: 42px; font-weight: 700; line-height: 1.15; margin: 0 0 18px; letter-spacing: -0.02em; color: #323130; } .lic-hero h1 strong { color: #0078d4; } .lic-hero .hp-hero-subtitle { font-size: 16px; line-height: 1.65; color: #605e5c; margin: 0 0 30px; max-width: 600px; } .lic-hero .hp-hero-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 20px; } .lic-hero .hp-btn { display: inline-block; font: 600 14px/1.2 "Segoe UI", sans-serif; padding: 11px 22px; border-radius: 6px; transition: all 0.18s; text-decoration: none; } .lic-hero .hp-btn-primary { background: #0078d4; color: #fff; } .lic-hero .hp-btn-primary:hover { background: #005a9e; color: #fff; text-decoration: none; } .lic-hero .hp-btn-outline { background: #fff; color: #0078d4; border: 1px solid #0078d4; } .lic-hero .hp-btn-outline:hover { background: #deecf9; color: #005a9e; border-color: #005a9e; text-decoration: none; } .lic-hero + .container { margin-top: 32px !important; } /* farm-id chip on the dark hero: white on translucent white bg (AA on the blue band) */ .lic-farmid-hero { background: rgba(255,255,255,0.16); border: 1px solid rgba(255,255,255,0.4); color: #fff; } /* --- two-column layout (form left, info right) --- */ .lic-card-wide { max-width: 1080px; } .lic-cols { display: grid; grid-template-columns: 3fr 2fr; gap: 0; } .lic-col-form { padding: 24px 28px 28px; border-right: 1px solid #edebe9; } .lic-col-info { padding: 24px 28px 28px; background: #faf9f8; border-radius: 0 0 8px 0; } /* collapse to one column on narrow screens */ @media (max-width: 900px) { .lic-cols { grid-template-columns: 1fr; } .lic-col-form { border-right: none; border-bottom: 1px solid #edebe9; } .lic-col-info { border-radius: 0 0 8px 8px; } } /* info panel content */ .lic-infohead { margin: 0 0 12px; font: 600 14px "Segoe UI", sans-serif; color: #201f1e; } .lic-col-info .lic-infohead:not(:first-child) { margin-top: 24px; } .lic-steps { list-style: none; margin: 0; padding: 0; counter-reset: step; } .lic-steps li { counter-increment: step; position: relative; padding: 0 0 14px 38px; } .lic-steps li::before { content: counter(step); position: absolute; left: 0; top: 0; width: 24px; height: 24px; background: #0078d4; color: #fff; border-radius: 50%; font: 600 12px/24px "Segoe UI", sans-serif; text-align: center; } .lic-steps li strong { display: block; font: 600 13px "Segoe UI", sans-serif; color: #201f1e; } .lic-steps li small { font: 400 12px "Segoe UI", sans-serif; color: #605e5c; } .lic-needlist { margin: 0; padding-left: 18px; font: 400 13px/1.6 "Segoe UI", sans-serif; color: #323130; } .lic-infobox { margin-top: 24px; padding: 14px 16px; background: #fff; border: 1px solid #edebe9; border-left: 3px solid #0078d4; border-radius: 4px; font: 400 13px "Segoe UI", sans-serif; color: #323130; } .lic-infobox p { margin: 6px 0 10px; color: #605e5c; font-size: 12px; } .lic-infobox strong { color: #201f1e; font-size: 13px; } /* --- fields --- */ .lic-field { margin-bottom: 20px; } .lic-label { display: block; font: 600 13px "Segoe UI", sans-serif; color: #323130; margin-bottom: 6px; } .lic-input, .lic-select { display: block; width: 100%; padding: 8px 12px; font: 400 14px "Segoe UI", sans-serif; color: #323130; background: #fff; border: 1px solid #8a8886; border-radius: 4px; outline: none; transition: border-color 0.12s, box-shadow 0.12s; } .lic-select-inline { width: auto; display: inline-block; padding: 2px 8px; font-size: 13px; } .lic-input:focus, .lic-select:focus { border-color: #0078d4; box-shadow: 0 0 0 1px #0078d4; } .lic-input::placeholder { color: #a19f9c; } .lic-hint { display: block; margin-top: 4px; font: 400 12px "Segoe UI", sans-serif; color: #605e5c; } .lic-hint a { color: #0078d4; text-decoration: none; } .lic-hint a:hover { text-decoration: underline; } /* --- choice rows (radios as bordered Fluent rows) --- */ .lic-choice { display: flex; align-items: flex-start; gap: 10px; padding: 10px 14px; margin-bottom: 8px; border: 1px solid #edebe9; border-radius: 4px; background: #faf9f8; cursor: pointer; transition: border-color 0.12s, background 0.12s, box-shadow 0.12s; } .lic-choice:hover { border-color: #a19f9c; background: #f3f2f1; } .lic-choice input[type="radio"] { position: absolute; opacity: 0; pointer-events: none; } .lic-choice-indicator { flex: 0 0 auto; width: 18px; height: 18px; margin-top: 2px; border: 1px solid #8a8886; border-radius: 50%; background: #fff; position: relative; transition: border-color 0.12s; } .lic-choice input[type="radio"]:checked + .lic-choice-indicator { border-color: #0078d4; border-width: 1px; } .lic-choice input[type="radio"]:checked + .lic-choice-indicator::after { content: ''; position: absolute; top: 3px; left: 3px; width: 10px; height: 10px; border-radius: 50%; background: #0078d4; } .lic-choice input[type="radio"]:checked ~ .lic-choice-text strong { color: #0078d4; } .lic-choice:has(input[type="radio"]:checked) { border-color: #0078d4; background: #f3f9fd; box-shadow: inset 0 0 0 1px #0078d4; } .lic-choice-text { display: flex; flex-direction: column; gap: 2px; } .lic-choice-text strong { font: 600 14px "Segoe UI", sans-serif; color: #201f1e; } .lic-choice-text small { font: 400 12px "Segoe UI", sans-serif; color: #605e5c; } .lic-term-inline { margin: 2px 0; } .lic-choice-text .lic-select-inline { margin-top: 4px; } /* --- price summary --- */ .lic-pricesummary { display: flex; align-items: baseline; justify-content: space-between; padding: 14px 16px; background: #f3f9fd; border: 1px solid #0078d4; border-radius: 4px; margin-bottom: 16px; } .lic-pricelabel { font: 400 14px "Segoe UI", sans-serif; color: #323130; } .lic-price { font: 700 14px "Segoe UI", sans-serif; color: #201f1e; white-space: nowrap; } /* --- per-year price table on the form --- */ .lic-pricetable { width: 100%; max-width: 380px; border-collapse: collapse; font: 400 13px "Segoe UI", sans-serif; color: #323130; background: #fff; border: 1px solid #edebe9; } .lic-pricetable th { text-align: left; font: 600 12px "Segoe UI", sans-serif; color: #605e5c; text-transform: uppercase; letter-spacing: 0.4px; background: #faf9f8; padding: 7px 12px; border-bottom: 1px solid #edebe9; } .lic-pricetable td { padding: 7px 12px; border-bottom: 1px solid #f3f2f1; font-weight: 600; color: #201f1e; } .lic-pricetable tr:last-child td { border-bottom: none; white-space: nowrap; font: 700 14px "Segoe UI", sans-serif; color: #201f1e; } /* --- buttons --- */ .lic-btn-primary { display: inline-block; width: 100%; padding: 10px 20px; font: 600 14px "Segoe UI", sans-serif; color: #fff; background: #0078d4; border: none; border-radius: 4px; cursor: pointer; transition: background 0.12s; } .lic-btn-primary:hover { background: #106ebe; } .lic-btn-secondary { display: inline-block; padding: 6px 16px; font: 600 13px "Segoe UI", sans-serif; color: #323130; background: #fff; border: 1px solid #8a8886; border-radius: 4px; cursor: pointer; transition: background 0.12s; } .lic-btn-secondary:hover { background: #f3f2f1; } /* --- alerts --- */ .lic-alert { padding: 10px 14px; border-radius: 4px; font: 400 13px "Segoe UI", sans-serif; margin-bottom: 18px; } .lic-alert-warning { background: #fff4ce; border: 1px solid #ffb900; color: #8a6d00; } .lic-alert-danger { background: #fde7e9; border: 1px solid #a4262c; color: #a4262c; } /* --- dev box --- */ .lic-devbox { margin-top: 24px; padding: 14px 16px; background: #f3f9fd; border: 1px dashed #0078d4; border-radius: 4px; font: 400 13px "Segoe UI", sans-serif; color: #323130; } .lic-devform { margin-top: 10px; } /* --- success page --- */ /* Banner: dark SharePoint green #107c10 with white text (contrast 4.8:1, AA). */ .lic-card-success .lic-success-banner { display: flex; align-items: center; gap: 14px; padding: 20px 28px; background: #107c10; border-bottom: 1px solid #edebe9; } .lic-success-icon { flex: 0 0 auto; width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; background: #0b5e0b; /* darker circle on green: keeps icon edge visible */ border-radius: 50%; } .lic-success-banner h4 { margin: 0; font: 600 18px "Segoe UI", sans-serif; color: #fff; } .lic-success-banner .lic-success-sub { margin: 2px 0 0; font: 400 13px "Segoe UI", sans-serif; color: #d6f5d6; } .lic-success-text { font: 400 14px "Segoe UI", sans-serif; color: #323130; margin: 0 0 16px; } /* Key display: light neutral box, dark text (contrast 12:1) */ .lic-keyrow { display: flex; align-items: center; gap: 10px; } .lic-key { flex: 1 1 auto; display: inline-block; padding: 10px 16px; background: #f3f2f1; border: 1px solid #edebe9; border-radius: 4px; font: 600 16px "Segoe UI Mono", Consolas, monospace; color: #201f1e; letter-spacing: 1px; user-select: all; } .lic-copy-btn { flex: 0 0 auto; } .lic-nextlist { margin: 0; padding-left: 18px; font: 400 13px/1.6 "Segoe UI", sans-serif; color: #323130; } .lic-nextlist li { margin-bottom: 4px; } .lic-success-actions { display: flex; gap: 10px; margin-top: 24px; } .lic-btn-link { display: inline-block; width: auto; text-decoration: none; color: #fff !important; /* anchor default colors lose against theme rules */ background-color: #0078d4; line-height: 1; } .lic-btn-link:hover { color: #fff !important; background-color: #106ebe; text-decoration: none; } /* --- dashboard --- */ /* Full width: same container as the top navigation (Bootstrap .container). */ .lic-pagehead { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; } .lic-pagetitle { margin: 0; font: 600 22px "Segoe UI", sans-serif; color: #201f1e; } .lic-pagesub { font: 400 13px "Segoe UI", sans-serif; color: #605e5c; } .lic-farmid { font: 600 13px "Segoe UI Mono", Consolas, monospace; background: #f3f2f1; border: 1px solid #edebe9; border-radius: 3px; padding: 2px 8px; color: #201f1e; } .lic-card-flat { margin-bottom: 20px; max-width: none; width: 100%; } /* dashboard cards: use the full .container width like the top nav */ .lic-card-flat.lic-pane { margin-left: 0; margin-right: 0; } .lic-card-flat .lic-card-header h4 { margin: 0 0 2px; font: 600 16px "Segoe UI", sans-serif; color: #201f1e; } .lic-card-flat .lic-card-header .lic-sub { margin: 0; font: 400 12px "Segoe UI", sans-serif; color: #605e5c; } .lic-card-flat .lic-card-header { padding: 16px 24px 12px; } .lic-card-flat .lic-card-body { padding: 0; } /* Fluent-style data table */ .lic-tablewrap { overflow-x: auto; } .lic-table { width: 100%; border-collapse: collapse; font: 400 13px "Segoe UI", sans-serif; color: #323130; } .lic-table th { text-align: left; font: 600 12px "Segoe UI", sans-serif; color: #605e5c; text-transform: uppercase; letter-spacing: 0.4px; padding: 10px 16px; border-bottom: 1px solid #edebe9; background: #faf9f8; white-space: nowrap; } .lic-table td { padding: 12px 16px; border-bottom: 1px solid #f3f2f1; vertical-align: middle; } .lic-table tbody tr:hover { background: #f3f9fd; } .lic-table tbody tr:last-child td { border-bottom: none; } .lic-muted { color: #a19f9c; } /* status / attribute pills */ .lic-pill { display: inline-block; padding: 2px 10px; border-radius: 10px; font: 600 11px "Segoe UI", sans-serif; background: #f3f2f1; color: #605e5c; white-space: nowrap; } .lic-pill-green { background: #dff6dd; color: #0b5e0b; } /* 7:1 on green-tint */ .lic-pill-blue { background: #deecf9; color: #005a9e; } /* 6.9:1 */ .lic-pill-gray { background: #edebe9; color: #605e5c; } /* key chip */ .lic-key-sm { font: 600 12px "Segoe UI Mono", Consolas, monospace; background: #f3f2f1; border: 1px solid #edebe9; border-radius: 3px; padding: 2px 8px; color: #201f1e; white-space: nowrap; } /* inline forms in table cells */ .lic-inlineform { display: flex; align-items: center; gap: 8px; margin: 0; } .lic-emailform { min-width: 320px; } .lic-input-sm { padding: 5px 10px; font-size: 13px; width: 100%; min-width: 200px; } .lic-btn-sm { padding: 6px 14px; font-size: 12px; } .lic-btn-warning { padding: 6px 14px; font: 600 12px "Segoe UI", sans-serif; color: #6b5900; /* dark on amber tint: 7.2:1 contrast */ background: #fff4ce; border: 1px solid #ffb900; border-radius: 4px; cursor: pointer; white-space: nowrap; transition: background 0.12s; } .lic-btn-warning:hover { background: #ffe8a3; } /* success alert variant (green, AA contrast) */ .lic-alert-success { margin: 0 0 20px; background: #dff6dd; border: 1px solid #107c10; color: #0b5e0b; padding: 12px 16px; border-radius: 4px; font: 400 13px "Segoe UI", sans-serif; } .lic-alert-success strong { color: #0b5e0b; } /* --- Fluent tabs (underline style, SharePoint modern) --- */ .lic-tabs { display: flex; gap: 4px; border-bottom: 1px solid #edebe9; margin-bottom: 16px; } .lic-tab { appearance: none; background: transparent; border: none; border-bottom: 2px solid transparent; padding: 10px 16px; font: 600 14px "Segoe UI", sans-serif; color: #605e5c; cursor: pointer; transition: color 0.12s, border-color 0.12s; display: inline-flex; align-items: center; gap: 6px; } .lic-tab:hover { color: #201f1e; background: #f3f2f1; } .lic-tab.active { color: #0078d4; border-bottom-color: #0078d4; } .lic-tabcount { display: inline-block; min-width: 18px; padding: 0 5px; border-radius: 9px; background: #0078d4; color: #fff; font: 600 11px/18px "Segoe UI", sans-serif; text-align: center; } /* filter row in the card header (All tab) */ .lic-filterhead { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; } .lic-filter { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; } .lic-filter label { font: 600 13px "Segoe UI", sans-serif; color: #323130; white-space: nowrap; } /* sortable column headers */ .lic-table th[data-sort] { cursor: pointer; user-select: none; } .lic-table th[data-sort]:hover { color: #201f1e; background: #f3f2f1; } .lic-table th.lic-sort-asc::after { content: ' \25B4'; color: #0078d4; } .lic-table th.lic-sort-desc::after { content: ' \25BE'; color: #0078d4; } .lic-empty { text-align: center; color: #605e5c; font-style: italic; padding: 24px 16px !important; } /* ============ masked key cells + full-key dialog (dashboard) ============ */ .lic-keycell { white-space: nowrap; } .lic-keycell .lic-key-mask { margin-right: 8px; } .lic-keyview { font: 600 11px 'Segoe UI', sans-serif; color: #004e8c; background: #fff; border: 1px solid #c8cdd3; border-radius: 4px; padding: 3px 10px; cursor: pointer; transition: all 0.15s; vertical-align: middle; } .lic-keyview:hover { background: #004e8c; color: #fff; border-color: #004e8c; } .lic-keydialog { border: none; border-radius: 8px; padding: 0; max-width: 620px; width: calc(100vw - 32px); box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25); background: #fff; color: #201f1e; } .lic-keydialog::backdrop { background: rgba(0, 0, 0, 0.45); } .lic-keydialog-inner { padding: 20px 22px; } .lic-keydialog-head { display: flex; align-items: center; justify-content: space-between; } .lic-keydialog-head h4 { margin: 0; font: 700 16px 'Segoe UI', sans-serif; } .lic-dialog-close { background: none; border: none; font-size: 22px; line-height: 1; color: #605e5c; cursor: pointer; padding: 2px 6px; border-radius: 4px; } .lic-dialog-close:hover { background: #f3f2f1; color: #201f1e; } .lic-keydialog .lic-sub { margin: 6px 0 10px; } .lic-key-full { display: block; font-family: Consolas, 'Courier New', monospace; font-size: 14px; background: #faf9f8; border: 1px solid #e1e1e1; border-radius: 4px; padding: 12px 14px; word-break: break-all; white-space: pre-wrap; user-select: all; } .lic-keydialog-actions { margin-top: 14px; text-align: right; } @media (max-width: 640px) { .lic-keycell { white-space: normal; } .lic-keycell .lic-key-mask { display: block; margin: 0 0 6px; } } /* dialog close (×) is a method=dialog form — reset form chrome */ .lic-keydialog .lic-dlg-form { margin: 0; padding: 0; display: inline; } /* ============ full-key overlay (plain fixed div; no native dialog) ============ */ .lic-keydialog { display: flex; align-items: center; justify-content: center; position: fixed; inset: 0; z-index: 12000; /* above loader/theme overlays */ background: rgba(0, 0, 0, 0.45); } .lic-keydialog[hidden] { display: none !important; } .lic-keydialog .lic-keydialog-inner { background: #fff; border-radius: 8px; padding: 20px 22px; max-width: 620px; width: calc(100% - 32px); margin: auto; box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25); color: #201f1e; } /* overlay panel stretches to (near) full viewport width so long v2 keys fit */ .lic-keydialog .lic-keydialog-inner { max-width: calc(100vw - 40px); width: calc(100vw - 40px); } .lic-keydialog .lic-key-full { font-size: 13px; } /* panel back to its intended max 620px (the dark backdrop stays full viewport) */ .lic-keydialog .lic-keydialog-inner { width: calc(100% - 40px); max-width: 620px; } /* strip the dead native-