.page-content { padding-left: 10%; padding-right: 0px; padding-top: 0px; margin-left: 0px; } .framework-switch { margin-top: 50px; } .doc-quick-start-steps { min-width: 100% !important; } .doc-quick-start-steps code { color: #333; margin-bottom: 0px; } .classes, #toc-runtime-react-component, #toc-runtime-angular-component, #toc-runtime-vue-component, #toc-runtime-class { display: none !important; } .smart-api-docs { position: relative; font-family: inherit; max-width: 72rem; margin-left: auto; margin-right: auto; padding-left: 1rem; padding-right: 1rem; box-sizing: border-box; } .smart-api-docs a{ transition: color 0.2s; color: #004080; text-decoration: none; } .smart-api-docs a:hover { color: #41444A; } .smart-api-docs .interfaces { display: grid; grid-template-columns: 1fr 1fr 1fr; grid-auto-flow: column; } .smart-api-docs .components { display: flex; flex-direction: column; } @media only screen and (max-width: 700px) { .smart-api-docs .interfaces { display: grid; grid-template-columns: none; grid-template-rows:none !important; grid-auto-flow: row !important; } } .smart-api-docs .field { display: inline-block; } .smart-api-docs h1, .smart-api-docs h2, .smart-api-docs h3, .smart-api-docs h4, .smart-api-docs h5, .smart-api-docs h6 { margin-top: 5px; margin-bottom: 5px; } .smart-api-docs h1 { margin-top: 24px; margin-bottom: 12px; font-weight: bold; background-color:rgba(0, 0, 0, 0); box-sizing:border-box; color:#1B3666; cursor:pointer; font-size:48px; font-weight:700; height:auto; line-height:52px; text-align:left; text-decoration-color:rgb(51, 102, 204); text-decoration-line:none; text-decoration-style:solid; text-rendering:optimizelegibility; text-size-adjust:100%; } .smart-api-docs h2.smart-interface { font-size:48px; } .smart-api-docs p { margin: 0; } .smart-api-docs h2 { color:#1B3666; margin-top: 16px; margin-bottom: 16px; font-size: 40px; } .smart-api-docs h3 { font-size: 18px; font-weight: normal; line-height: 28px; margin-top: 16px; margin-bottom: 8px; display: flex; align-items: center; } .smart-api-docs h1>a, .smart-api-docs h2>a { background-color:rgba(0, 0, 0, 0); box-sizing:border-box; color: inherit; cursor:pointer; display:inline; font-size: inherit; font-weight:700; height:auto; line-height:40px; text-align:left; text-decoration-color:rgb(0, 0, 0); text-decoration-line:none; text-decoration-style:solid; text-rendering:optimizelegibility; text-size-adjust:100%; width:auto; -webkit-font-smoothing:antialiased; -webkit-tap-highlight-color:rgba(0, 0, 0, 0); } .smart-api-docs h3>a { background-color:rgba(0, 0, 0, 0); box-sizing:border-box; color:#004080; cursor:pointer; display:inline; font-weight:400; height:auto; line-height:28px; text-align:left; text-decoration-color:#004080; text-decoration-line:none; text-decoration-style:solid; text-rendering:optimizelegibility; text-size-adjust:100%; width:auto; -webkit-font-smoothing:antialiased; -webkit-tap-highlight-color:rgba(0, 0, 0, 0); } .smart-api-docs [level="1"] h2>a, .smart-api-docs [level="2"] h2>a, .smart-api-docs [level="3"] h2>a, .smart-api-docs [level="4"] h2>a, .smart-api-docs [level="5"] h2>a { font-size:24px; } .smart-api-docs [level="1"] h3>a, .smart-api-docs [level="2"] h3>a, .smart-api-docs [level="3"] h3>a, .smart-api-docs [level="4"] h3>a, .smart-api-docs [level="5"] h3>a { font-size:16px; } .smart-api-docs .code a{ color:inherit; text-decoration: none; } .smart-api-docs .code { display: inline-block; margin-bottom: 3px; } .smart-api-docs .code, .smart-api-docs .value, .smart-api-docs .smart-parameter-type { background-color: #004080; color: #fff; margin-top: 3px; margin-left: 10px; padding: 6px 12px; font-size: 14px; font-weight: normal; line-height: 16px; border-radius: 8px; } .smart-api-docs [level="1"], .smart-api-docs .code[level="1"] { margin-left: 20px; } .smart-api-docs [level="2"], .smart-api-docs .code[level="2"] { margin-left: 40px; } .smart-api-docs [level="3"], .smart-api-docs .code[level="3"] { margin-left: 60px; } .smart-api-docs [level="4"], .smart-api-docs .code[level="4"] { margin-left: 80px; } .smart-api-docs [level="5"], .smart-api-docs .code[level="5"] { margin-left: 100px; } .smart-api-docs [level] [level] { margin-left: 20px; } .smart-api-docs .value { color: white; background: #004080; position: relative; padding-left: 5px; padding-right: 5px; } .smart-api-docs .smart-property-default-value { margin-left: 20px; margin-bottom: 20px; } .smart-api-docs .smart-property-fields { display: none; flex-direction: column; gap: 8px 12px; align-items: start; margin: 6px 0 12px; } .smart-api-docs .smart-property-fields h4 { grid-column: 1 / -1; margin: 0 0 4px 0; } .smart-api-docs .smart-property-fields .field { display: flex; align-items: center; width: 100%; margin: 0; min-width: 0; } @media only screen and (max-width: 700px) { .smart-api-docs .smart-property-fields { grid-template-columns: 1fr; } } .smart-api-docs .smart-property-fields .field .code { margin: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .smart-api-docs .smart-property-fields .field > a.code, .smart-api-docs .smart-property-fields .field .tooltip > a.code { text-decoration: none; color: #fff; } .smart-api-docs .smart-property-fields .field .tooltip > a.code:hover { color: #fff; opacity: 0.92; } .smart-api-docs .smart-property-fields .field .code a, .smart-api-map .field a { position: relative; z-index: 2; pointer-events: auto; cursor: pointer; } .smart-api-map .field { display: inline-flex; align-content: center; align-items: center; text-overflow: ellipsis; } .smart-api-docs .smart-property-fields .code { background: #004080; padding-left: 5px; padding-right: 5px; } .smart-api-map { display: grid; grid-template-columns: 1fr 1fr 1fr; } /* Property-index filter: drop fixed row tracks and column flow so hidden entries do not leave blank grid gaps (inline styles often set grid-auto-flow: column). */ .smart-api-map.doc-map-filter-active { grid-template-rows: none !important; grid-auto-rows: auto; grid-auto-flow: row !important; } @media only screen and (max-width: 700px) { .smart-api-map { display: grid; grid-template-columns: none; grid-template-rows:none !important; grid-auto-flow: row !important; } } .smart-api-map .property>a, .smart-api-map .method>a, .smart-api-map .event>a{ padding-left: 5px; padding-right: 5px; text-decoration: none;; box-sizing: border-box; color: #004080; cursor: pointer; font-weight: 400; text-align: left; font-size: 16px; margin-left: 6px; text-rendering: optimizelegibility; text-decoration: none; text-size-adjust: 100%; -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); margin-top: 10px; margin-bottom: 10px; } .smart-api-map .property.code, .smart-api-map .method.code, .smart-api-map .event.code { border-radius: 50%; padding: 12px; width: 16px; height: 16px; display: flex; align-items: center; justify-content: center; } .smart-api-map .property>a { color: #004080 !important; } .smart-api-map .method.code { background: #0073E6; } .smart-api-map .method>a { color: #0073E6 !important; } .smart-api-map .event.code { background: #E1E4F5; color: #004080; } .smart-api-map .event>a { color: #004080 !important; } .map-navigation .smart-api-map .field { border-radius: 8px; transition: background-color 0.18s ease, box-shadow 0.18s ease; } .map-navigation .smart-api-map .field.active-map-item { background: #e8eeff; box-shadow: inset 0 0 0 1px #c8d7ff; } .map-navigation .smart-api-map .field.active-map-item a { color: #1B3666 !important; font-weight: 700; } /* “Popular” marker beside property index entries */ @keyframes doc-popular-badge-glow { 0%, 100% { box-shadow: 0 0 2px rgba(0, 115, 230, 0.85), 0 0 6px rgba(0, 115, 230, 0.45); } 50% { box-shadow: 0 0 5px rgba(0, 115, 230, 1), 0 0 12px rgba(0, 115, 230, 0.65), 0 0 18px rgba(0, 115, 230, 0.35); } } .doc-popular-badge { display: inline-block; width: 8px; height: 8px; padding: 0; margin: 0 0 0 5px; border: none; border-radius: 50%; background: rgb(0, 115, 230); vertical-align: middle; flex-shrink: 0; box-sizing: border-box; animation: doc-popular-badge-glow 2s ease-in-out infinite; } @media (prefers-reduced-motion: reduce) { .doc-popular-badge { animation: none; box-shadow: 0 0 4px rgba(0, 115, 230, 0.65); } } .map-navigation .map-category-title { margin-top: 12px; margin-bottom: 6px; } .map-navigation .map-collapsible-heading { cursor: pointer; display: flex; align-items: center; gap: 6px; } .map-navigation .map-collapsible-toggle { width: 8px; height: 8px; border-right: 2px solid #004080; border-bottom: 2px solid #004080; transform: rotate(45deg); transition: transform 0.18s ease; flex: 0 0 auto; margin-right: 2px; } .map-navigation .map-collapsible-heading.collapsed .map-collapsible-toggle { transform: rotate(-45deg); } /* Popup map scrolls in a fixed panel — native tooltips clip; use floating overlay (see setupFloatingApiMapTooltips in scripts/docs.js). */ .map-navigation .tooltip .tooltiptext { display: none !important; } /* Nested + API map tooltips: floating overlay only (hide inline duplicate). */ .smart-api-docs .smart-property-fields .tooltip .tooltiptext, .smart-api-docs .smart-api-map .tooltip .tooltiptext, .smart-api-docs h3 .tooltip .tooltiptext { display: none !important; } .smart-api-docs .smart-property-fields .field .tooltip { display: inline; } /* Material 3 Dark Tooltip */ .doc-map-tooltip-overlay { /* Dark surface + contrast text */ --m3-tooltip-surface: #1a1a1c; --m3-tooltip-on-surface: #ececec; /* Dark scrollbars */ --doc-tooltip-scrollbar-thumb: rgba(236, 236, 236, 0.26); --doc-tooltip-scrollbar-thumb-hover: rgba(236, 236, 236, 0.45); --doc-tooltip-scrollbar-track: rgba(255, 255, 255, 0.05); position: fixed; z-index: 2147483646; display: none; pointer-events: none; box-sizing: border-box; background-color: var(--m3-tooltip-surface); color: var(--m3-tooltip-on-surface); border-radius: 6px; padding: 8px 12px; font-family: "Roboto", "Segoe UI", system-ui, -apple-system, sans-serif; font-size: 12px; font-weight: 400; line-height: 1.45; letter-spacing: 0.006rem; max-width: min(520px, calc(100vw - 24px)); max-height: min(45vh, 272px); max-height: min(45dvh, 272px); overflow-x: hidden; overflow-y: auto; overflow-wrap: anywhere; word-wrap: break-word; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; scrollbar-width: thin; scrollbar-color: var(--doc-tooltip-scrollbar-thumb) var(--doc-tooltip-scrollbar-track); -webkit-font-smoothing: antialiased; /* Modern M3 dark shadow */ box-shadow: 0 4px 12px rgba(0, 0, 0, 0.45), 0 8px 24px rgba(0, 0, 0, 0.35); } .doc-map-tooltip-overlay.active { display: block; pointer-events: auto; } .doc-map-tooltip-overlay::-webkit-scrollbar { width: 8px; } .doc-map-tooltip-overlay::-webkit-scrollbar-track { background: var(--doc-tooltip-scrollbar-track); border-radius: 100px; margin: 4px 0; } .doc-map-tooltip-overlay::-webkit-scrollbar-thumb { background: var(--doc-tooltip-scrollbar-thumb); border-radius: 100px; border: 2px solid transparent; background-clip: padding-box; } .doc-map-tooltip-overlay::-webkit-scrollbar-thumb:hover { background: var(--doc-tooltip-scrollbar-thumb-hover); border: 2px solid transparent; background-clip: padding-box; } .doc-map-tooltip-overlay::-webkit-scrollbar-corner, .tooltip .tooltiptext::-webkit-scrollbar-corner { background: var(--doc-tooltip-scrollbar-track); } .doc-map-tooltip-overlay p { margin: 0.35em 0; line-height: inherit; } .doc-map-tooltip-overlay p:first-child { margin-top: 0; } .doc-map-tooltip-overlay p:last-child { margin-bottom: 0; } .doc-map-tooltip-overlay ul { margin: 0.35em 0; padding-left: 1.15em; } .doc-map-tooltip-overlay li { margin: 0.2em 0; line-height: inherit; } .doc-map-tooltip-overlay strong { font-weight: 600; color: inherit; } .doc-map-tooltip-overlay a { color: #b8c7ff; text-decoration: underline; text-underline-offset: 2px; } .doc-map-tooltip-overlay a:hover { color: #e8eaff; } .smart-api-docs .smart-property-default-value .code { background: #004080; padding-left: 5px; padding-right: 5px; } .smart-api-docs h4 { box-sizing:border-box; color: #34373B; display:block; font-size:16px; font-weight:400; height:24px; line-height:24px; margin-block-end:8px; margin-block-start:0px; margin-bottom:8px; margin-inline-end:0px; margin-inline-start:0px; margin-top:20px; text-align:left; text-rendering:optimizelegibility; text-size-adjust:100%; } .smart-api-docs h5, .smart-api-docs h6 { color: #34373B; } .smart-api-docs h6 { margin-left: 10px; } .smart-api-docs .smart-event-args { margin-left: 10px; } .smart-api-docs .smart-event-parameter span { font-weight: 400; color: #333; } .smart-api-docs .smart-method-parameter-description { margin-left: 10px; font-size: 12px; } .smart-api-docs .smart-event-args h5, .smart-api-docs .smart-event-args h6 { font-weight: normal; font-size: 16px; margin: 10px; } .smart-api-docs .toggle-button { color: #004080; font-family: FontAwesome; font-size: 13px !important; margin-right: 5px; transition: all 0.2s; transform: rotate(0deg); } .smart-api-docs .active > .toggle-button { transform: rotate(90deg); } .smart-api-docs .toggle-button:hover { color: #1B3666; } .smart-api-docs h3:has(.toggle-button) { cursor: pointer; } /* Enforced collapsed content for member/property sections (runtime toggles this class). */ .smart-api-docs .doc-collapsed-node { display: none !important; } .smart-api-docs .doc-collapsed-node.doc-member-revealed { display: revert !important; } .smart-api-docs [name] { display: none; } .smart-api-docs [name].search { transition: none; } .smart-api-docs [name].visible { display: block; } .smart-api-docs [name].active { } .smart-api-docs .code-example { margin-left: 20px; } .smart-api-docs .code-example.main { margin-left: 0px; } .smart-api-docs .code-example strong { color: #1B3666; } .smart-api-docs .code-example a { background-color: rgba(0, 0, 0, 0); box-sizing: border-box; color: #004080; cursor: pointer; font-weight: 400; text-align: left; text-rendering: optimizelegibility; text-decoration: none; text-size-adjust: 100%; -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); display: block; margin-top: 10px; margin-bottom: 10px; } #scrollTopButton { position: fixed; bottom: 24px; right: 24px; background: #004080; width: 50px; height: 50px; display: flex; align-items: center; justify-content: center; text-decoration: none; border: none; cursor: pointer; padding: 0; border-radius: 35px; transition: all 0.3s ease; color: white; transform: scale(0); z-index: 99; } @media only screen and (max-width: 700px) { #scrollTopButton { bottom: 16px; right: 16px; width: 46px; height: 46px; } } #scrollTopButton.active { transform: scale(1); } #scrollTopButton i { margin-top: -1px; } #scrollTopButton:hover, #searchHandler:hover, #search a:hover { background: #1B3666; } #search { font-family: FontAwesome, sans-serif; position: fixed; right: 30px; bottom: 30px; left: auto; top: auto; z-index: 99; margin: 0; padding: 0; display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; gap: 0; line-height: 1; border-bottom-left-radius: 4px; /* Fixed UI must not participate in document flow */ width: auto; height: 50px; overflow: visible; pointer-events: auto; display: none; } #searchHandler { transition: all 0.2s ease; width: 50px; height: 50px; transform: scale(0); display: flex; justify-content: center; align-items: center; cursor: pointer; border-radius: 100%; background: #004080; color: white; } #searchHandler.active { transform: scale(1); } #search .wrap { flex-direction: row; align-items: center; transition: all 0.3s ease; width: 0px; background: #1B3666; color: white; height: 0px; transform: scale(0); visibility: hidden; opacity: 0; border-bottom-left-radius: 5px; } #search .wrap.active { display: flex; flex-wrap: nowrap; align-items: stretch; opacity: 1; transform: scale(1); width: 352px; height: 35px; max-height: 35px; visibility: visible; overflow: hidden; } #search #match { display: inline-flex; align-items: center; justify-content: center; font-size: 11px; line-height: 1; min-width: 56px; padding: 0 8px; border-right: 1px solid #aaa; white-space: nowrap; height: 100%; box-sizing: border-box; } #search input { border: none; height: 100%; min-height: 0; background: inherit; color: inherit; outline: none; padding: 5px 8px; box-sizing: border-box; border-bottom-left-radius: 5px; font-family: system-ui, -apple-system, Segoe UI, sans-serif; font-size: 13px; line-height: 1.2; } #search input::placeholder { color: #eee; } #search input::selection { background: white; color: black; } #search a { text-decoration: none; color: #aaa; font-weight: 400; font-style: normal; font-size: 10px; width: 30px; display: flex; height: 100%; justify-content: center; align-items: center; } #search a.active { color: white; } #search .equals { text-decoration: underline overline; } pre { white-space: pre-wrap; word-wrap: break-word; overflow: auto; } /* Material 3 plain tooltip (inline, e.g. grid category maps not using floating overlay) */ .tooltip { position: relative; } .tooltip .tooltiptext { --m3-tooltip-surface: #322f35; --m3-tooltip-on-surface: #f4eff4; --doc-tooltip-scrollbar-thumb: rgba(244, 239, 244, 0.38); --doc-tooltip-scrollbar-thumb-hover: rgba(244, 239, 244, 0.55); --doc-tooltip-scrollbar-track: rgba(255, 255, 255, 0.08); visibility: hidden; opacity: 0; box-sizing: border-box; width: auto; min-width: min(200px, max-content); max-width: min(520px, calc(100vw - 24px)); max-height: min(45vh, 272px); max-height: min(45dvh, 272px); background-color: var(--m3-tooltip-surface); color: var(--m3-tooltip-on-surface); border-radius: 4px; padding: 8px 12px; font-family: "Roboto", "Segoe UI", system-ui, -apple-system, sans-serif; font-size: 12px; font-weight: 400; line-height: 1.45; letter-spacing: 0.006rem; margin: 0 0 0 8px; position: absolute; z-index: 1; left: 100%; top: 50%; transform: translateY(-50%); overflow-x: hidden; overflow-y: auto; overflow-wrap: anywhere; word-wrap: break-word; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; scrollbar-width: thin; scrollbar-color: var(--doc-tooltip-scrollbar-thumb) var(--doc-tooltip-scrollbar-track); -webkit-font-smoothing: antialiased; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2), 0 2px 6px 2px rgba(0, 0, 0, 0.12); transition: opacity 150ms cubic-bezier(0.2, 0, 0, 1), visibility 150ms step-end; } .tooltip .tooltiptext::-webkit-scrollbar { width: 8px; } .tooltip .tooltiptext::-webkit-scrollbar-track { background: var(--doc-tooltip-scrollbar-track); border-radius: 100px; margin: 4px 0; } .tooltip .tooltiptext::-webkit-scrollbar-thumb { background: var(--doc-tooltip-scrollbar-thumb); border-radius: 100px; border: 2px solid transparent; background-clip: padding-box; } .tooltip .tooltiptext::-webkit-scrollbar-thumb:hover { background: var(--doc-tooltip-scrollbar-thumb-hover); border: 2px solid transparent; background-clip: padding-box; } .tooltip .tooltiptext::after { display: none; } .tooltip .tooltiptext ul { margin: 0.35em 0; padding-left: 1.15em; } .tooltip .tooltiptext li { margin: 0.2em 0; line-height: inherit; } .tooltip .tooltiptext strong { font-weight: 600; color: inherit; } .tooltip:hover .tooltiptext, .tooltip:focus-within .tooltiptext { visibility: visible; opacity: 1; transition: opacity 150ms cubic-bezier(0.2, 0, 0, 1), visibility 0s step-start; } /* User-friendly doc layout: sticky TOC, quick start, copy buttons, long descriptions */ .doc-user-friendly-collapsible { margin: 0 0 1.5rem; } .doc-user-friendly-toggle { cursor: pointer; user-select: none; margin: 0 0 0.7rem; padding: 0.5rem 0.75rem; border: 1px solid #dbe3f0; border-radius: 8px; background: #f8fafc; color: #1b3666; font-weight: 700; font-size: 0.95rem; } .doc-user-friendly-toggle:hover { background: #f1f5fb; } .doc-user-friendly-top { display: grid; grid-template-columns: minmax(12rem, 16rem) 1fr; gap: 1.25rem 1.5rem; align-items: start; margin-bottom: 0; } @media (prefers-reduced-motion: reduce) { .tooltip .tooltiptext { transition: opacity 80ms ease, visibility 80ms step-end; } .tooltip:hover .tooltiptext, .tooltip:focus-within .tooltiptext { transition: opacity 80ms ease, visibility 0s step-start; } } .prettyprint{background:#fff;font-family:Menlo,Bitstream Vera Sans Mono,DejaVu Sans Mono,Monaco,Consolas,monospace;border:0!important}.pln{color:#333}ol.linenums{margin-top:0;margin-bottom:0;color:#ccc}li.L0,li.L1,li.L2,li.L3,li.L4,li.L5,li.L6,li.L7,li.L8,li.L9{padding-left:1em;background-color:#fff;list-style-type:decimal}@media screen{.str{color:#183691}.kwd{color:#a71d5d}.com{color:#969896}.typ{color:#0086b3}.lit{color:#0086b3}.pun{color:#333}.opn{color:#333}.clo{color:#333}.tag{color:navy}.atn{color:#795da3}.atv{color:#183691}.dec{color:#333}.var{color:teal}.fun{color:#900}} /* User-friendly doc layout: sticky TOC, quick start, copy buttons, long descriptions */ .doc-user-friendly-collapsible { margin: 0 0 1.5rem; } .doc-user-friendly-toggle { cursor: pointer; user-select: none; margin: 0 0 0.7rem; padding: 0.5rem 0.75rem; border: 1px solid #dbe3f0; border-radius: 8px; background: #f8fafc; color: #1b3666; font-weight: 700; font-size: 0.95rem; } .doc-user-friendly-toggle:hover { background: #f1f5fb; } .doc-user-friendly-top { display: grid; grid-template-columns: minmax(12rem, 16rem) 1fr; gap: 1.25rem 1.5rem; align-items: start; margin-bottom: 0; } @media (max-width: 900px) { .doc-user-friendly-top { grid-template-columns: 1fr; } } .doc-page-nav { position: sticky; top: 0.5rem; z-index: 8; background: #f5f7fb; border: 1px solid #dbe3f0; border-radius: 8px; padding: 0.75rem 1rem; max-height: calc(100vh - 2rem); overflow: auto; box-shadow: 0 1px 3px rgba(27, 54, 102, 0.08); } .doc-page-nav-title { margin: 0 0 0.5rem; font-size: 0.95rem; font-weight: 700; color: #1B3666; } .doc-page-nav-list { margin: 0; padding-left: 1.1rem; font-size: 0.85rem; line-height: 1.5; color: #333; } .doc-page-nav-list a { color: #004080; text-decoration: none; } .doc-page-nav-list a:hover { text-decoration: underline; } .doc-quick-start { background: #fff; border: 1px solid #dbe3f0; border-radius: 8px; padding: 1rem 1.25rem; } .doc-quick-start-title { margin: 0 0 0.35rem; font-size: 1.1rem; color: #1B3666; } .doc-quick-start-hint { margin: 0 0 0.75rem; font-size: 0.9rem; color: #555; line-height: 1.4; } pre.doc-quick-start-code { margin: 0; border: 1px solid #e0e0e0; border-radius: 6px; padding: 0.75rem 1rem !important; font-size: 1rem; } .smart-property-desc-details { margin: 0.5rem 0 1rem; border: 1px solid #e8ecf3; border-radius: 6px; padding: 0.35rem 0.75rem; background: #fafbfd; } .smart-property-desc-summary { cursor: pointer; font-weight: 600; color: #1B3666; padding: 0.25rem 0; } .smart-property-desc-details .smart-property-description { margin: 0.5rem 0 0; } .doc-pre-wrap { position: relative; margin: 0.75rem 0; } .doc-pre-wrap .doc-pre-copy-btn { position: absolute; top: 6px; right: 6px; z-index: 3; font-size: 0.72rem; padding: 0.2rem 0.55rem; border-radius: 4px; border: 1px solid #c5cee0; background: #fff; color: #1B3666; cursor: pointer; font-family: system-ui, sans-serif; } .doc-pre-wrap .doc-pre-copy-btn:hover { background: #eef1f8; } .doc-pre-wrap .doc-pre-copy-btn:focus { outline: 2px solid #004080; outline-offset: 1px; } .doc-pre-wrap > pre.prettyprint { padding-top: 2.1rem !important; padding-right: 4rem !important; } .doc-map-filter-count { font-size: 0.8rem; color: #555; margin: 0 0 0.35rem; min-height: 0; } .doc-map-filter-count:not(:empty) { min-height: 1.2em; } .doc-map-filter-count:empty { margin: 0; padding: 0; height: 0; overflow: hidden; } /* Quick picks: same visual language as .smart-api-map .field (letter badge + member link) */ .doc-quick-picks { margin: 1rem 0 1rem; --doc-map-property: #004080; --doc-map-method: #0073e6; --doc-map-event-fg: #004080; --doc-map-event-bg: #e1e4f5; } .doc-quick-picks h4 { margin: 0 0 0.5rem; font-size: 0.9rem; font-weight: 700; color: var(--doc-map-property); letter-spacing: 0.01em; } .doc-quick-picks-wrap { display: flex; flex-wrap: wrap; gap: 0.35rem 1rem; align-items: center; } .doc-quick-pick-chip { display: inline-flex; align-items: center; max-width: 100%; min-height: 36px; padding: 4px 2px; border-radius: 8px; font-size: 16px; line-height: 1.35; font-weight: 400; text-decoration: none; text-rendering: optimizelegibility; -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); border: none; background: transparent; box-shadow: none; transition: background-color 0.18s ease; } .doc-quick-pick-chip:hover { background: rgba(0, 64, 128, 0.06); box-shadow: none; } .doc-quick-pick-chip:focus { outline: none; } .doc-quick-pick-chip:focus-visible { outline: 2px solid var(--doc-map-property); outline-offset: 2px; border-radius: 8px; } .doc-quick-pick-chip-icon { border-radius: 50%; width: 16px; height: 16px; padding: 12px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 10px; font-weight: 600; line-height: 1; box-sizing: border-box; } .doc-quick-pick-chip--property .doc-quick-pick-chip-icon { background: var(--doc-map-property); color: #fff; } .doc-quick-pick-chip--method .doc-quick-pick-chip-icon { background: var(--doc-map-method); color: #fff; } .doc-quick-pick-chip--event .doc-quick-pick-chip-icon { background: var(--doc-map-event-bg); color: var(--doc-map-event-fg); } .doc-quick-pick-chip-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; margin-left: 6px; padding: 0 5px; box-sizing: border-box; } .doc-quick-pick-chip--property .doc-quick-pick-chip-name { color: var(--doc-map-property) !important; } .doc-quick-pick-chip--method .doc-quick-pick-chip-name { color: var(--doc-map-method) !important; } .doc-quick-pick-chip--event .doc-quick-pick-chip-name { color: var(--doc-map-event-fg) !important; } /* Top-of-section map filter — Material 3–aligned search field (see setupApiMapFilterInputs in scripts/docs.js) */ .map-input { margin: 0 0 1rem; } .smart-api-docs .map-input { font-family: "Roboto", "Segoe UI", system-ui, sans-serif; display: block; width: 100%; margin: 1.5rem 0 1.1rem; padding: 0; border: none; min-height: 0; background: transparent; } .doc-map-search-suggestions { margin-top: 10px; } .doc-map-search-suggestions-title { margin-bottom: 10px; padding-bottom: 10px; } .smart-api-docs .map-input #searchMapHandler { color: #004080; font-size: 14px; } .smart-api-docs .map-input .wrap { display: flex; flex: 1; min-width: 0; } .smart-api-docs .map-input #searchField2 { width: 100%; min-width: 0; outline: none; border: none; background: transparent; font-family: "Segoe UI", Arial, sans-serif; font-size: 13px; line-height: 1.3; } .smart-api-docs .map-input #searchField2::placeholder { color: #6b7280; } .smart-api-docs .doc-map-filter-m3 { font-family: "Roboto", "Font Awesome 6 Free", "Segoe UI", system-ui, sans-serif; display: flex; flex-direction: column; align-items: stretch; gap: 0.35rem; --m3-primary: #004080; --m3-on-surface: #1c1b1f; --m3-on-surface-variant: #49454f; --m3-outline: #cac4d0; --m3-surface: #fafbff; --m3-surface-container: #eef3fb; } .smart-api-docs .doc-map-filter-label { font-family: "Roboto", "Segoe UI", system-ui, -apple-system, sans-serif; font-size: 0.875rem; font-weight: 500; line-height: 1.25rem; letter-spacing: 0.00625em; color: var(--m3-on-surface); padding: 0 0 0 4px; cursor: pointer; } .smart-api-docs .doc-map-filter-leading-icon { display: flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 1.5rem; margin-right: 4px; color: var(--m3-on-surface-variant); font-size: 1.0625rem; line-height: 1; opacity: 0.88; pointer-events: none; } .smart-api-docs .doc-map-filter-control:focus-within .doc-map-filter-leading-icon { color: var(--m3-primary); opacity: 1; } .smart-api-docs .doc-map-filter-control { position: relative; display: flex; align-items: center; min-height: 52px; padding: 0 16px; max-width: 28rem; box-sizing: border-box; border: 1px solid var(--m3-outline); border-radius: 12px; background: var(--m3-surface); transition: border-color 0.2s cubic-bezier(0.2, 0, 0, 1), box-shadow 0.2s cubic-bezier(0.2, 0, 0, 1), background-color 0.2s cubic-bezier(0.2, 0, 0, 1); box-shadow: 0 1px 2px rgba(27, 54, 102, 0.06); } .smart-api-docs .doc-map-filter-control:hover:not(:focus-within) { border-color: #938f99; background-color: var(--m3-surface-container); } .smart-api-docs .doc-map-filter-control:focus-within { border-color: var(--m3-primary); box-shadow: 0 0 0 1px var(--m3-primary), 0 2px 10px rgba(0, 64, 128, 0.14); } .smart-api-docs .map-input .doc-map-filter-input { -webkit-appearance: none; appearance: none; flex: 1; min-width: 0; min-height: 48px; margin: 0; padding: 10px 0 10px 4px; border: none; border-radius: 0; background: transparent; box-sizing: border-box; width: 100%; font-family: "Roboto", "Segoe UI", system-ui, -apple-system, sans-serif; font-size: 1rem; font-weight: 400; line-height: 1.5; letter-spacing: 0.03125em; color: var(--m3-on-surface); caret-color: var(--m3-primary); } .smart-api-docs .map-input .doc-map-filter-input::placeholder { color: var(--m3-on-surface-variant); opacity: 0.85; } .smart-api-docs .map-input .doc-map-filter-input:focus { outline: none; border-color: transparent; box-shadow: none; } .doc-framework-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 14px; align-items: center; } .doc-framework-chips .tab-item { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border: 1px solid #d1d5db; border-radius: 999px; background: #ffffff; color: #0f172a !important; text-decoration: none !important; font-size: 12px; font-weight: 600; line-height: 1; box-shadow: 0 1px 3px rgba(15, 23, 42, 0.1); transition: all 0.2s ease; } .doc-framework-chips .tab-item:hover { transform: translateY(-1px); box-shadow: 0 4px 10px rgba(15, 23, 42, 0.12); border-color: #94a3b8; } .doc-framework-chips .tab-item.active, .doc-framework-chips .tab-item[aria-current="page"] { border-color: #0C3D78; background: #0C3D78; color: #ffffff !important; box-shadow: 0 6px 16px rgba(15, 23, 42, 0.22); } .doc-framework-chips .doc-framework-tab-icon { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 999px; background: #f8fafc; line-height: 0; } .doc-framework-chips .tab-item.active .doc-framework-tab-icon, .doc-framework-chips .tab-item[aria-current="page"] .doc-framework-tab-icon { background: rgba(255, 255, 255, 0.14); } .doc-framework-chips .doc-framework-tab-label { letter-spacing: 0.01em; } @media (prefers-reduced-motion: reduce) { .smart-api-docs .doc-map-filter-control { transition: none; } } /* Map filter: qualified member links (e.g. columns.cellsAlign) */ .smart-api-docs .doc-map-filter-hits { margin-top: 0.4rem; padding: 0.55rem 0.65rem 0.65rem; border-radius: 12px; background: var(--m3-surface-container, #eef3fb); border: 1px solid rgba(0, 64, 128, 0.14); box-sizing: border-box; } .smart-api-docs .doc-map-filter-hits[hidden] { display: none !important; } .smart-api-docs .doc-map-filter-hits-title { font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.045em; text-transform: uppercase; color: #49454f; margin: 0 0 0.45rem 0; font-family: "Roboto", "Segoe UI", system-ui, -apple-system, sans-serif; } .smart-api-docs .doc-map-filter-hit { display: inline-block; margin: 0 0.35rem 0.35rem 0; padding: 0.4rem 0.75rem; border-radius: 999px; background: #fff; border: 1px solid rgba(0, 64, 128, 0.22); color: #004080 !important; font-family: "Roboto Mono", ui-monospace, monospace; font-size: 0.8125rem; font-weight: 500; text-decoration: none !important; line-height: 1.3; transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease; box-shadow: 0 1px 2px rgba(27, 54, 102, 0.06); } .smart-api-docs .doc-map-filter-hit:hover { background: #e8f0fc; border-color: #004080; color: #1b3666 !important; box-shadow: 0 2px 6px rgba(0, 64, 128, 0.12); } .smart-api-docs .doc-map-filter-hits-more { flex: 1 0 100%; font-size: 0.75rem; color: #49454f; margin-top: 0.15rem; padding-left: 2px; font-family: "Roboto", "Segoe UI", system-ui, -apple-system, sans-serif; } .smart-api-docs .doc-map-filter-trailing-ai-icon { display: flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 1.5rem; margin-left: 6px; color: #5c6b8a; font-size: 1.0625rem; line-height: 1; opacity: 0.92; pointer-events: none; } .smart-api-docs .doc-map-filter-control:focus-within .doc-map-filter-trailing-ai-icon { color: var(--m3-primary); opacity: 1; } .smart-api-docs .doc-map-filter-ai { margin-top: 0.45rem; padding: 0.75rem 0.9rem; border-radius: 12px; background: linear-gradient(135deg, #f0f4fc 0%, #fafbff 100%); border: 1px solid rgba(0, 64, 128, 0.16); box-sizing: border-box; max-width: 26rem; font-family: "Roboto", "Segoe UI", system-ui, -apple-system, sans-serif; } .smart-api-docs .doc-map-filter-ai[hidden] { display: none !important; } .smart-api-docs .doc-map-filter-ai-status { font-size: 0.8125rem; color: #49454f; margin-bottom: 0.35rem; font-style: italic; } .smart-api-docs .doc-map-filter-ai-answer { font-size: 0.875rem; line-height: 1.55; color: var(--m3-on-surface, #1c1b1f); white-space: normal; word-break: break-word; } .smart-api-docs .doc-map-filter-ai-answer p { margin: 0 0 0.6rem; } .smart-api-docs .doc-map-filter-ai-answer ul, .smart-api-docs .doc-map-filter-ai-answer ol { margin: 0.25rem 0 0.65rem 1.1rem; padding: 0; } .smart-api-docs .doc-map-filter-ai-answer code { font-family: "Roboto Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.8125rem; padding: 1px 5px; border-radius: 6px; background: rgba(0, 64, 128, 0.08); color: #0b3d79; } .smart-api-docs .doc-map-filter-ai-answer pre.doc-map-ai-code { margin: 0.4rem 0 0.7rem; padding: 0.7rem 0.8rem; border-radius: 10px; border: 1px solid rgba(0, 64, 128, 0.16); background: #f6f9ff; overflow-x: auto; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55); } .smart-api-docs .doc-map-filter-ai-answer pre.doc-map-ai-code code { display: block; padding: 0; border-radius: 0; background: transparent; color: #1b3666; font-size: 0.8rem; line-height: 1.45; } /* Injected above nested member headings when map filter resolves to one child member */ .smart-api-docs .doc-nested-member-nav { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.75rem; margin: 0 0 0.75rem 0; padding: 0.65rem 0.9rem; border-radius: 12px; background: linear-gradient(135deg, #e8eef9 0%, #f2f6fc 100%); border: 1px solid rgba(0, 64, 128, 0.2); font-family: "Roboto", "Segoe UI", system-ui, -apple-system, sans-serif; font-size: 0.8125rem; line-height: 1.4; color: var(--m3-on-surface, #1c1b1f); box-shadow: 0 1px 3px rgba(27, 54, 102, 0.08); } .smart-api-docs .doc-nested-member-nav__eyebrow { flex: 1 1 100%; font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: #49454f; } .smart-api-docs .doc-nested-member-nav__parent { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.45rem 1rem; border-radius: 999px; background: #004080; color: #fff !important; text-decoration: none !important; font-weight: 600; font-size: 0.8125rem; box-shadow: 0 1px 3px rgba(0, 32, 80, 0.35); transition: background-color 0.15s ease, box-shadow 0.15s ease; } .smart-api-docs .doc-nested-member-nav__parent:hover { background: #1b3666; color: #fff !important; box-shadow: 0 2px 6px rgba(0, 32, 80, 0.35); } .smart-api-docs .doc-nested-member-nav__parent strong { font-weight: 700; } .smart-api-docs .doc-nested-member-nav__close { margin-left: auto; flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; padding: 0; border: none; border-radius: 999px; background: transparent; color: #49454f; font-size: 1.35rem; line-height: 1; cursor: pointer; transition: background-color 0.15s ease, color 0.15s ease; } .smart-api-docs .doc-nested-member-nav__close:hover { background: rgba(0, 64, 128, 0.1); color: #004080; } .doc-search-hint { font-size: 10px; color: #ddd; padding: 0 4px; white-space: nowrap; } .doc-map-search-suggestions { margin: 6px 0 10px 0; padding: 10px 12px; border: 1px solid #dbe3f0; border-radius: 10px; background: #f8fbff; color: #1b3666; font-size: 13px; } .doc-map-search-suggestions-title { margin: 0 0 6px 0; font-weight: 600; } .doc-map-search-suggestions a, .doc-map-search-suggestions button[data-doc-map-suggestion] { display: inline-block; margin: 0 8px 6px 0; padding: 3px 8px; border-radius: 999px; border: 1px solid #cddcf7; background: #fff; color: #1e4c9a; text-decoration: none; cursor: pointer; font: inherit; } .doc-map-search-suggestions a:hover, .doc-map-search-suggestions button[data-doc-map-suggestion]:hover { background: #eaf2ff; border-color: #b6ccf4; } .doc-intro { margin: 0 0 0.75rem; font-size: 0.9rem; color: #444; line-height: 1.45; } .doc-code-lead { margin: 0.65rem 0 0.35rem; font-weight: 600; color: #1b3666; line-height: 1.35; } pre.doc-code-example { margin: 0 0 0.5rem !important; border: 1px solid #e8ecf3; border-radius: 6px; padding: 0.65rem 0.85rem !important; font-size: 0.8rem; line-height: 1.45; } .code-example > .doc-code-lead:first-of-type { margin-top: 0; } /* Grid API category accordion (docs-theme + smooth motion) */ .smart-api-docs .smart-api-category-group { margin: 0.8rem 0; border: 1px solid #dbe3f0; border-radius: 14px; background: #fff; box-shadow: 0 1px 2px rgba(27, 54, 102, 0.08); overflow: hidden; transition: border-color 0.22s ease, box-shadow 0.22s ease, transform 0.22s ease; } .smart-api-docs .smart-api-category-group:hover { border-color: #c7d4ea; box-shadow: 0 4px 12px rgba(27, 54, 102, 0.10); transform: translateY(-1px); } .smart-api-docs .smart-api-category-group[open] { border-color: #b9c9e6; box-shadow: 0 6px 18px rgba(27, 54, 102, 0.13); /* Let API map tooltips escape the card; raise above following sections while interacting */ overflow: visible; position: relative; z-index: 1; } .smart-api-docs .smart-api-category-group[open]:hover, .smart-api-docs .smart-api-category-group[open]:focus-within { z-index: 100; } .smart-api-docs .smart-api-category-summary { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; list-style: none; cursor: pointer; padding: 0.85rem 1rem; margin: 0; user-select: none; color: #1B3666; font-size: 1rem; line-height: 1.3; transition: background 0.2s ease, color 0.2s ease; } .smart-api-docs .smart-api-category-summary::-webkit-details-marker { display: none; } .smart-api-docs .smart-api-category-summary::marker { content: ''; } .smart-api-docs .smart-api-category-summary::after { content: ''; width: 8px; height: 8px; border-right: 2px solid #004080; border-bottom: 2px solid #004080; transform: rotate(45deg); transition: transform 0.24s ease, border-color 0.2s ease; flex: 0 0 auto; margin-right: 4px; } .smart-api-docs .smart-api-category-group[open] > .smart-api-category-summary::after { transform: rotate(225deg); border-color: #1B3666; } .smart-api-docs .smart-api-category-summary:hover { background: linear-gradient(180deg, #f4f8ff 0%, #eef4ff 100%); } .smart-api-docs .smart-api-category-summary:focus-visible { outline: 2px solid #004080; outline-offset: -2px; } .smart-api-docs .smart-api-category-title { font-size: 1.02rem; font-weight: 700; color: inherit; letter-spacing: 0.01em; } .smart-api-docs .smart-api-category-content { display: block; max-height: 0; opacity: 0; overflow: hidden; padding: 0 1rem; border-top: 1px solid transparent; background: #fff; transform: translateY(-4px); transition: max-height 0.35s cubic-bezier(0.2, 0, 0, 1), opacity 0.22s ease, padding 0.22s ease, border-color 0.22s ease, transform 0.22s ease; } .smart-api-docs .smart-api-category-group[open] > .smart-api-category-content { max-height: 2200px; opacity: 1; padding: 0.3rem 1rem 1rem; border-top-color: #e4ecf8; transform: translateY(0); overflow: visible; } .smart-api-docs .smart-api-category-content h4 { margin-top: 0.9rem; } @media (prefers-reduced-motion: reduce) { .smart-api-docs a, #search .wrap, #scrollTopButton, .smart-api-docs .smart-api-category-group, .smart-api-docs .smart-api-category-summary, .smart-api-docs .smart-api-category-summary::after, .smart-api-docs .smart-api-category-content { transition: none !important; } } /* ========================================================================= Dark mode Activated by adding the `dark-mode` class to