/* Sitecore Icon Search — modern UI Replaces Bootstrap 3 / DataTables styling. Theming via CSS custom properties; `.dark-mode` on switches palettes (persisted in localStorage as 'theme'). */ :root { --bg: #fafafa; --surface: #ffffff; --surface-2: #f3f3f4; --text: #1c1c1e; --text-secondary: #6b6b70; /* --text-faint is used for small text (tile category, footer, toast path), so it has to clear WCAG AA 4.5:1 against both --surface and the darker --bg. */ --text-faint: #707076; --border: #e6e6e9; --border-strong: #d5d5da; --accent: #d60824; --accent-soft: rgba(214, 8, 36, 0.08); --accent-contrast: #ffffff; --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04); --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.08); --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.14); --header-bg: rgba(255, 255, 255, 0.82); --radius: 12px; --radius-sm: 8px; } .dark-mode { --bg: #101012; --surface: #1a1a1d; --surface-2: #232327; --text: #ececee; --text-secondary: #a3a3ab; --text-faint: #8a8a92; --border: #2a2a2f; --border-strong: #3a3a41; --accent: #ff435c; --accent-soft: rgba(255, 67, 92, 0.12); --accent-contrast: #ffffff; --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4); --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.5); --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.6); --header-bg: rgba(16, 16, 18, 0.82); } * { box-sizing: border-box; } /* The UA rule for [hidden] is display:none, which any author `display` here would silently outrank — so state it once, with weight. */ [hidden] { display: none !important; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; font-size: 15px; line-height: 1.5; background: var(--bg); color: var(--text); transition: background-color 0.25s ease, color 0.25s ease; } a { color: var(--accent); text-decoration: none; } a:hover { text-decoration: underline; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0; } .sr-only-focusable:focus { position: fixed; top: 8px; left: 8px; z-index: 100; width: auto; height: auto; clip: auto; padding: 8px 14px; background: var(--surface); border-radius: var(--radius-sm); box-shadow: var(--shadow-md); } /* ---------- Header ---------- */ .site-header { position: sticky; top: 0; z-index: 50; background: var(--header-bg); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-bottom: 1px solid var(--border); } .site-header .wrap { max-width: 1200px; margin: 0 auto; padding: 0 20px; height: 60px; display: flex; align-items: center; gap: 16px; } .brand { display: flex; align-items: center; gap: 10px; font-weight: 600; font-size: 17px; color: var(--text); white-space: nowrap; } .brand:hover { text-decoration: none; color: var(--accent); } .brand img { width: 24px; height: 24px; } .dark-mode .brand img { filter: drop-shadow(0 0 1px white) drop-shadow(0 0 1px white) brightness(1.2); } .site-nav { margin-left: auto; display: flex; align-items: center; gap: 4px; } .site-nav a, .site-nav button { display: inline-flex; align-items: center; gap: 7px; padding: 7px 12px; border: none; border-radius: var(--radius-sm); background: transparent; font: inherit; font-size: 14px; font-weight: 500; color: var(--text-secondary); cursor: pointer; transition: background-color 0.15s ease, color 0.15s ease; } .site-nav a:hover, .site-nav button:hover { background: var(--surface-2); color: var(--text); text-decoration: none; } .site-nav img { width: 18px; height: 18px; } .site-nav .icon-btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } /* Show one of the two theme glyphs depending on mode */ #theme-toggle .sun { display: none; } #theme-toggle .moon { display: block; } .dark-mode #theme-toggle .sun { display: block; } .dark-mode #theme-toggle .moon { display: none; } @media (max-width: 560px) { .site-nav .nav-label { display: none; } } /* ---------- Layout ---------- */ .page { max-width: 1200px; margin: 0 auto; padding: 0 20px 60px; } /* ---------- Hero + search ---------- */ .hero { text-align: center; padding: 44px 0 8px; } .hero h1 { margin: 0 0 6px; font-size: clamp(24px, 4vw, 34px); font-weight: 700; letter-spacing: -0.02em; } .hero h1 .accent { color: var(--accent); } .hero p { margin: 0; font-size: 16px; color: var(--text-secondary); } .search-wrap { position: relative; max-width: 620px; margin: 26px auto 0; } /* Fixed width so the count-up animation never reflows the centered line. */ #icon-count { display: inline-block; min-width: 5ch; font-variant-numeric: tabular-nums; } /* ---------- Hero entrance & flourishes (motion-safe only) ---------- */ @media (prefers-reduced-motion: no-preference) { .hero h1, .hero p, .hero .search-wrap { animation: rise-in 0.6s cubic-bezier(0.22, 1, 0.36, 1) backwards; } .hero p { animation-delay: 0.12s; } .hero .search-wrap { animation-delay: 0.24s; } @keyframes rise-in { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } } /* Slow highlight sweep across the accent words; the gradient midpoint is a lighter red so it reads in both themes. inline-block gives the span a normal box so background-position percentages behave predictably, and both endpoints (0% and 100%) park the highlight just outside the text, so the hold phase and the loop restart are invisible. */ .hero .accent { display: inline-block; background: linear-gradient(110deg, var(--accent) 45%, #ff8496 50%, var(--accent) 55%); background-size: 250% 100%; background-position: 0% 0; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; animation: accent-sweep 6s ease-in-out 1.2s infinite; } @keyframes accent-sweep { 0% { background-position: 100% 0; } 28%, 100% { background-position: 0% 0; } } /* Tiles cascade in on each fresh render; per-tile delay set inline by app.js. */ .tile { animation: tile-in 0.32s ease backwards; } @keyframes tile-in { from { opacity: 0; transform: scale(0.96) translateY(8px); } to { opacity: 1; transform: none; } } } .search-wrap .search-icon { position: absolute; left: 18px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; stroke: var(--text-faint); stroke-width: 2; fill: none; stroke-linecap: round; pointer-events: none; } #search { width: 100%; padding: 14px 84px 14px 48px; font: inherit; font-size: 16px; color: var(--text); background: var(--surface); border: 1px solid var(--border-strong); border-radius: 999px; box-shadow: var(--shadow-sm); outline: none; transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.25s ease; } #search::placeholder { color: var(--text-faint); } /* Hide the browser's built-in clear button; .clear-btn is ours and is themed. */ #search::-webkit-search-cancel-button, #search::-webkit-search-decoration { -webkit-appearance: none; appearance: none; } #search:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft), var(--shadow-sm); } .search-wrap kbd { position: absolute; right: 16px; top: 50%; transform: translateY(-50%); padding: 2px 8px; font-family: inherit; font-size: 12px; color: var(--text-faint); background: var(--surface-2); border: 1px solid var(--border); border-radius: 6px; pointer-events: none; } .search-wrap .clear-btn { position: absolute; right: 46px; top: 50%; transform: translateY(-50%); display: none; align-items: center; justify-content: center; width: 24px; height: 24px; padding: 0; border: none; border-radius: 50%; background: var(--surface-2); color: var(--text-secondary); font-size: 14px; line-height: 1; cursor: pointer; } .search-wrap .clear-btn:hover { background: var(--border); color: var(--text); } .search-wrap.has-value .clear-btn { display: inline-flex; } /* ---------- Toolbar ---------- Every control here is one pill of the same height, so the row reads as a single band instead of a set of mismatched widgets. --control-h is the one knob: it grows on touch devices to keep tap targets comfortable. */ .toolbar { --control-h: 36px; display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 30px 0 18px; } .chip, .size-control, #category-filter { height: var(--control-h); font: inherit; font-size: 13px; font-weight: 500; color: var(--text-secondary); background: var(--surface); border: 1px solid var(--border-strong); border-radius: 999px; white-space: nowrap; cursor: pointer; } .chip:focus-visible, #category-filter:focus-visible, .size-control input[type='range']:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } #result-count { font-size: 13px; font-weight: 500; color: var(--text-secondary); margin-right: auto; } /* Divides the view setting (preview size) from the filters that follow. */ .toolbar-sep { width: 1px; height: 20px; margin: 0 2px; background: var(--border-strong); } .chip-row { display: flex; align-items: center; gap: 8px; } .chip { display: inline-flex; align-items: center; gap: 7px; padding: 0 14px; transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.1s ease; } .chip:hover { border-color: var(--accent); color: var(--text); } /* Flex blockifies this span, so the chip's gap — sized for the icon glyphs — lands between two words. Trim it back to roughly a word space. */ .chip-more { margin-left: -3px; } .chip:active { transform: scale(0.97); } .chip[aria-pressed='true'] { background: var(--accent); border-color: var(--accent); color: var(--accent-contrast); } /* Icon preview size: 3-stop slider (16 / 24 / 32) */ .size-control { display: inline-flex; align-items: center; gap: 10px; padding: 0 14px; cursor: default; } .size-control input[type='range'] { width: 74px; height: 14px; margin: 0; appearance: none; -webkit-appearance: none; background: transparent; cursor: pointer; } /* Track carries three tick marks so the discrete stops are visible. */ .size-control input[type='range']::-webkit-slider-runnable-track { height: 4px; border-radius: 2px; background: radial-gradient(circle at 2px 50%, var(--text-faint) 1.5px, transparent 1.6px), radial-gradient(circle at 50% 50%, var(--text-faint) 1.5px, transparent 1.6px), radial-gradient(circle at calc(100% - 2px) 50%, var(--text-faint) 1.5px, transparent 1.6px), var(--border-strong); } .size-control input[type='range']::-moz-range-track { height: 4px; border-radius: 2px; background: var(--border-strong); } .size-control input[type='range']::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 14px; height: 14px; margin-top: -5px; border: none; border-radius: 50%; background: var(--accent); } .size-control input[type='range']::-moz-range-thumb { width: 14px; height: 14px; border: none; border-radius: 50%; background: var(--accent); } .size-control input[type='range']:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 999px; } .size-value { min-width: 32px; font-size: 12.5px; font-weight: 600; color: var(--text-secondary); font-variant-numeric: tabular-nums; } #category-filter { padding: 0 32px 0 14px; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23888' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 13px center; transition: border-color 0.15s ease, color 0.15s ease; } #category-filter:hover, #category-filter:focus { border-color: var(--accent); color: var(--text); } /* A non-default category is a filter that's easy to forget about, so it gets the same accent treatment as a pressed chip. */ #category-filter.is-set { border-color: var(--accent); color: var(--accent); font-weight: 600; } /* Fingers need a bigger target than a cursor does. */ @media (pointer: coarse) { .toolbar { --control-h: 42px; } } /* Wide enough for one row: park the controls under the header so filters stay reachable while scrolling 9,000 icons. Left in flow on small screens, where the toolbar is three rows and would eat the viewport. */ @media (min-width: 621px) { .toolbar { position: sticky; top: 60px; z-index: 20; margin: 30px 0 8px; padding: 10px 0; background: var(--header-bg); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); } } /* Below that, three predictable rows beat a ragged wrap: count + size · category · filter chips. */ @media (max-width: 620px) { .toolbar { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 10px 8px; } #result-count { margin-right: 0; } .toolbar-sep { display: none; } #category-filter, .chip-row { grid-column: 1 / -1; } #category-filter { width: 100%; } .chip-row { flex-wrap: wrap; } } /* Shed the long label before the layout has to reflow — with Recent showing, the full row is a few pixels too wide for a tablet otherwise. */ @media (max-width: 820px) { .chip-more { display: none; } } /* ---------- Icon grid ---------- */ /* Holds the loading, empty and grid states at a stable minimum height so the footer below starts off-screen and doesn't shift when results render. */ #results { min-height: 80vh; } /* ---------- Recent ---------- Recent is a filter, not a second grid: the chip swaps the results over to what you've copied. This strip only explains the swap while it's on. */ #recent-bar { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; padding-bottom: 14px; border-bottom: 1px solid var(--border); font-size: 12.5px; color: var(--text-faint); } #recent-bar span { margin-right: auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .link-btn { flex: none; padding: 0; font: inherit; font-size: 12.5px; color: var(--text-faint); background: none; border: none; cursor: pointer; text-decoration: underline; } .link-btn:hover { color: var(--accent); } /* ---------- Collection chips (Recent / Favorites) ---------- */ .chip .star { color: var(--accent); font-size: 13px; } .chip .glyph { width: 14px; height: 14px; stroke: var(--accent); stroke-width: 2; fill: none; stroke-linecap: round; } .chip[aria-pressed='true'] .star, .chip[aria-pressed='true'] .glyph { color: var(--accent-contrast); stroke: var(--accent-contrast); } .fav-btn { position: absolute; top: 5px; left: 6px; padding: 0 3px; font-size: 13px; line-height: 1.2; color: var(--border-strong); background: none; border: none; border-radius: 4px; cursor: pointer; opacity: 0; transition: opacity 0.12s ease, color 0.12s ease; } .tile:hover .fav-btn, .tile:focus-visible .fav-btn, .fav-btn[aria-pressed='true'] { opacity: 1; } .fav-btn[aria-pressed='true'] { color: var(--accent); } .fav-btn:hover { color: var(--accent); } /* Tile metrics driven by the size toggle; the grid tightens up at 24px so the smaller previews don't float in oversized tiles. */ .grid { --icon-size: 32px; display: grid; grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)); gap: 10px; } .grid.size-24 { --icon-size: 24px; grid-template-columns: repeat(auto-fill, minmax(124px, 1fr)); gap: 8px; } .grid.size-16 { --icon-size: 16px; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 7px; } .tile { position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 18px 10px 14px; font: inherit; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); cursor: pointer; color: var(--text); text-align: center; transition: border-color 0.12s ease, box-shadow 0.12s ease, transform 0.12s ease; } .tile:hover, .tile:focus-visible { border-color: var(--accent); box-shadow: var(--shadow-md); transform: translateY(-2px); outline: none; } /* Roving tabindex means only one tile is tabbable; make keyboard focus loud. */ .tile:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .tile:active { transform: translateY(0); } .tile img { width: var(--icon-size); height: var(--icon-size); image-rendering: pixelated; } .grid.size-24 .tile { padding: 14px 8px 11px; } .grid.size-16 .tile { padding: 12px 8px 10px; gap: 6px; } /* The officewhite set is white line art meant for Sitecore's dark chrome — it is invisible on a white tile, so those previews get a dark chip in light mode. (Measured: officewhite averages luminance 255; every other category 125–191.) */ .tile.on-dark img { background: #45454d; border-radius: 4px; } .dark-mode .tile.on-dark img { background: none; } .tile .tile-name { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12.5px; font-weight: 500; color: var(--text-secondary); } .tile:hover .tile-name { color: var(--text); } .tile .tile-cat { font-size: 10.5px; color: var(--text-faint); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .jss-badge { position: absolute; top: 7px; right: 7px; padding: 2px 7px; font-size: 9.5px; font-weight: 700; letter-spacing: 0.04em; color: var(--accent); background: var(--accent-soft); border: none; border-radius: 999px; cursor: pointer; font-family: inherit; } .jss-badge:hover { background: var(--accent); color: var(--accent-contrast); } /* ---------- States ---------- */ #loading, #empty-state { padding: 70px 20px; text-align: center; color: var(--text-secondary); } #loading .spinner { width: 34px; height: 34px; margin: 0 auto 16px; border: 3px solid var(--border); border-top-color: var(--accent); border-radius: 50%; animation: spin 0.8s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } #empty-state { display: none; } #empty-state .emoji { display: block; font-size: 40px; margin-bottom: 12px; } #empty-message { margin: 0 0 16px; } #empty-actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; } .empty-action { padding: 7px 14px; font: inherit; font-size: 13px; font-weight: 500; color: var(--text); background: var(--surface); border: 1px solid var(--border-strong); border-radius: 999px; cursor: pointer; transition: border-color 0.15s ease, color 0.15s ease; } .empty-action:hover { border-color: var(--accent); color: var(--accent); } #scroll-sentinel { height: 1px; } /* ---------- Toast ---------- */ /* 76px clears the 60px sticky header plus a gap, so the toast reads as "just under the nav" rather than overlapping it. */ #toast { position: fixed; left: 50%; top: 76px; z-index: 90; transform: translate(-50%, -16px); display: flex; flex-direction: column; gap: 5px; max-width: min(92vw, 460px); padding: 16px 20px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-lg); opacity: 0; pointer-events: none; transition: opacity 0.2s ease, transform 0.2s ease; } #toast.visible { opacity: 1; transform: translate(-50%, 0); } #toast .toast-title { font-weight: 600; font-size: 15px; margin-bottom: 2px; } #toast .toast-detail, #toast .toast-hint { font-size: 13.5px; color: var(--text-secondary); } #toast .toast-path { margin-top: 4px; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12px; color: var(--text-faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* ---------- Footer ---------- */ .site-footer { margin-top: 50px; padding: 24px 0 0; border-top: 1px solid var(--border); display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px 18px; font-size: 13px; color: var(--text-faint); } .site-footer a { color: var(--text-secondary); } .site-footer a:hover { color: var(--accent); } /* Links sitting inside a run of text need more than colour to be identifiable. */ .site-footer span a { text-decoration: underline; } /* ---------- Content pages (About / Feedback) ---------- */ .content-page { max-width: 860px; margin: 0 auto; padding: 44px 20px 60px; } .content-page h1 { font-size: clamp(24px, 4vw, 32px); font-weight: 700; letter-spacing: -0.02em; margin: 0 0 24px; } .content-page h1 .accent { color: var(--accent); } .content-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 28px 32px; box-shadow: var(--shadow-sm); } .content-card + .content-card { margin-top: 20px; } .content-card h2 { margin: 0 0 16px; font-size: 19px; font-weight: 700; letter-spacing: -0.01em; } .changelog { list-style: none; margin: 0; padding: 0; } .changelog li { display: flex; gap: 18px; padding: 12px 0; } .changelog li + li { border-top: 1px solid var(--border); } .changelog .cl-date { flex: none; width: 76px; font-size: 12.5px; font-weight: 600; color: var(--accent); padding-top: 2px; } .changelog code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12.5px; background: var(--surface-2); padding: 1px 5px; border-radius: 4px; } .pull-quote { margin: 0; padding: 0; border: none; text-align: center; } .pull-quote p { font-size: 19px; font-style: italic; color: var(--text); margin: 0 0 14px; } .pull-quote footer { font-size: 13.5px; color: var(--text-secondary); } .author-card { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; } .author-card img { width: 88px; height: 88px; border-radius: 50%; object-fit: cover; } .author-card .author-meta { display: flex; flex-direction: column; gap: 4px; } .author-card .author-meta strong { font-size: 16px; } .demo-img { max-width: 100%; border-radius: var(--radius-sm); border: 1px solid var(--border); } .form-embed { width: 100%; min-height: 520px; border: none; border-radius: var(--radius-sm); background: #fff; }