/* src/confettiManager.css */ div:has(> confetti-piece) { position: absolute; inset: 0; overflow: hidden; pointer-events: none; } confetti-piece { position: absolute; top: -10px; width: var(--size); height: var(--size); background: currentColor; transform: translate3d(var(--x), -10vh, 0) rotate(var(--rot)); animation: fall var(--duration) linear var(--delay); will-change: transform; pointer-events: none; } @keyframes fall { to { transform: translate3d(var(--x), 110vh, 0) rotate(calc(var(--rot) + 720deg)); } } /* src/overlay.css */ .bm-screenreader { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .bm-window { --bm-surface-strong: rgba(9, 20, 42, 0.5); --bm-surface-soft: rgba(24, 41, 74, 0.28); --bm-surface-glass: rgba(255, 255, 255, 0.1); --bm-surface-glass-strong: rgba(255, 255, 255, 0.18); --bm-border-soft: rgba(255, 255, 255, 0.18); --bm-border-strong: rgba(163, 228, 255, 0.34); --bm-text-primary: rgba(17, 36, 66, 0.96); --bm-text-secondary: rgba(36, 57, 90, 0.84); --bm-accent-start: #baf6ff; --bm-accent-end: #81b6ff; --bm-accent-shadow: rgba(132, 182, 255, 0.22); --bm-font-body: "Rajdhani", "Segoe UI Variable Text", "Segoe UI", sans-serif; --bm-font-display: "Michroma", "Orbitron", "Segoe UI", sans-serif; --bm-font-mono: "Roboto Mono", "Rajdhani", "Courier New", monospace; position: fixed; isolation: isolate; overflow: hidden; background: radial-gradient( circle at 14% 12%, rgba(255, 255, 255, 0.24), transparent 18%), radial-gradient( circle at 86% 8%, rgba(186, 246, 255, 0.22), transparent 24%), radial-gradient( circle at 82% 84%, rgba(129, 182, 255, 0.18), transparent 28%), linear-gradient( 145deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.06) 22%, rgba(105, 145, 212, 0.08) 54%, rgba(9, 20, 42, 0.18)); color: var(--bm-text-primary); padding: 6px; border-radius: 16px; border: 1px solid var(--bm-border-soft); box-shadow: 0 18px 40px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.22), inset 0 -1px 0 rgba(255, 255, 255, 0.05); z-index: 9000; transition: background 320ms ease, border-color 220ms ease, box-shadow 220ms ease, opacity 220ms ease, transform 0s, width 220ms ease, max-width 220ms ease, max-height 220ms ease; top: 75px; left: 60px; width: auto; max-height: fit-content; max-width: calc(100% - 135px); backdrop-filter: blur(26px) saturate(1.25); font-family: var(--bm-font-body); letter-spacing: 0.04em; } .bm-window::before, .bm-window::after { content: ""; position: absolute; inset: 0; pointer-events: none; } .bm-window::before { border-radius: inherit; padding: 1px; background: linear-gradient( 135deg, rgba(255, 255, 255, 0.45), rgba(255, 255, 255, 0.12) 24%, rgba(186, 246, 255, 0.22) 58%, rgba(129, 182, 255, 0.3)); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity: 0.85; } .bm-window::after { border-radius: inherit; background: linear-gradient( 180deg, rgba(255, 255, 255, 0.2), transparent 24%), radial-gradient( circle at 18% 0%, rgba(255, 255, 255, 0.22), transparent 22%), radial-gradient( circle at 88% 16%, rgba(186, 246, 255, 0.18), transparent 18%); opacity: 1; } .bm-dragbar { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 0.28ch; padding: 0.18rem 0.24rem; border-radius: 10px; border: 1px solid rgba(255, 255, 255, 0.16); background: radial-gradient( circle at 0 0, rgba(255, 255, 255, 0.22) 0, transparent 42%), linear-gradient( 135deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.08)); cursor: grab; width: 100%; height: fit-content; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16), 0 6px 18px rgba(0, 0, 0, 0.1); } .bm-dragbar.bm-dragging { cursor: grabbing; } .bm-window:has(.bm-dragbar.bm-dragging) { pointer-events: none; user-select: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; } .bm-dragbar.bm-dragging { pointer-events: auto; } .bm-favicon { display: inline-block; height: 2.2em; margin-right: 0.45ch; padding: 0.2rem; border-radius: 12px; vertical-align: middle; background: linear-gradient( 135deg, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0.08)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16), 0 8px 18px rgba(0, 0, 0, 0.12); } .bm-window h1 { display: inline-block; font-size: 1rem; font-weight: 700; vertical-align: middle; font-family: var(--bm-font-display); text-transform: uppercase; letter-spacing: 0.14em; color: rgba(16, 33, 60, 0.96); } .bm-dragbar h1, .bm-dragbar-text { font-size: 0.78rem; user-select: none; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-family: var(--bm-font-display); letter-spacing: 0.14em; color: rgba(18, 37, 66, 0.95); text-shadow: 0 1px 0 rgba(255, 255, 255, 0.28); } .bm-dragbar div:has(h1) { display: contents; } .bm-window h2 { display: inline-block; font-size: 0.88rem; font-weight: 700; vertical-align: middle; font-family: var(--bm-font-display); letter-spacing: 0.1em; color: rgba(18, 35, 64, 0.96); } .bm-window h3 { display: inline-block; font-size: large; font-weight: 700; font-family: var(--bm-font-display); letter-spacing: 0.08em; color: rgba(18, 35, 64, 0.96); } .bm-window p { color: var(--bm-text-secondary); line-height: 1.5; letter-spacing: 0.035em; } .bm-window hr { border: none; height: 1px; margin: 0.32rem 0; background: linear-gradient( 90deg, transparent, rgba(255, 255, 255, 0.28), transparent); } .bm-container.bm-center-vertically { width: fit-content; margin-left: auto; margin-right: auto; } .bm-container { margin: 0.24em 0; } .bm-window input, .bm-window select, .bm-window textarea, .bm-window button { font: inherit; } .bm-window button { appearance: none; color: var(--bm-text-primary); font-family: var(--bm-font-display); background: linear-gradient( 135deg, rgba(255, 255, 255, 0.22), rgba(164, 208, 255, 0.14)); border: 1px solid rgba(255, 255, 255, 0.22); border-radius: 999px; padding: 0.28em 0.62em; min-height: 1.78em; font-weight: 600; letter-spacing: 0.1em; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 8px 20px rgba(0, 0, 0, 0.1); transition: background 180ms ease, border-color 180ms ease, box-shadow 180ms ease, filter 180ms ease, opacity 180ms ease, transform 180ms ease; } .bm-window button:hover, .bm-window button:focus-visible { background: linear-gradient( 135deg, rgba(255, 255, 255, 0.28), rgba(186, 246, 255, 0.18)); border-color: rgba(230, 245, 255, 0.36); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.26), 0 10px 22px rgba(0, 0, 0, 0.12); transform: translateY(-1px); } .bm-window button:focus-visible, .bm-window input:focus-visible, .bm-window select:focus-visible, .bm-window textarea:focus-visible { outline: none; border-color: rgba(116, 231, 255, 0.62); box-shadow: 0 0 0 3px rgba(116, 231, 255, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.12); } .bm-window button:active { transform: translateY(0) scale(0.98); filter: brightness(0.98); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 8px 16px rgba(18, 36, 78, 0.24); } .bm-window button:disabled { opacity: 0.56; cursor: not-allowed; text-decoration: none; transform: none; filter: saturate(0.72); box-shadow: none; } .bm-window button.bm-button-primary { color: #07203b; background: linear-gradient( 135deg, rgba(255, 255, 255, 0.42), rgba(186, 246, 255, 0.34)); border-color: rgba(239, 248, 255, 0.42); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.44), 0 10px 22px rgba(129, 182, 255, 0.14); } .bm-window button.bm-button-primary:hover, .bm-window button.bm-button-primary:focus-visible { background: linear-gradient( 135deg, rgba(255, 255, 255, 0.52), rgba(204, 250, 255, 0.36)); } .bm-window button.bm-button-secondary { background: linear-gradient( 135deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.08)); border-color: rgba(255, 255, 255, 0.18); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 8px 20px rgba(0, 0, 0, 0.08); } .bm-window button.bm-button-secondary:hover, .bm-window button.bm-button-secondary:focus-visible { background: linear-gradient( 135deg, rgba(255, 255, 255, 0.24), rgba(186, 246, 255, 0.12)); } .bm-button-circle { display: inline-flex; align-items: center; justify-content: center; border: 1px solid rgba(255, 255, 255, 0.16); inline-size: 1.62rem; block-size: 1.62rem; min-height: 1.62rem !important; min-width: 1.62rem; margin-top: 0; text-align: center; line-height: 1; padding: 0 !important; aspect-ratio: 1 / 1; border-radius: 50% !important; background: linear-gradient( 135deg, rgba(255, 255, 255, 0.24), rgba(255, 255, 255, 0.1)) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 8px 18px rgba(0, 0, 0, 0.1) !important; overflow: hidden; flex: 0 0 auto; font-size: 0.74rem; } .bm-button-circle svg { display: block; width: 70%; height: 70%; flex: 0 0 auto; margin: auto; color: currentColor; pointer-events: none; transform: translateZ(0); overflow: visible; } .bm-button-circle .bm-button-icon-settings { width: 68%; height: 68%; transform: translateY(0.5px) translateZ(0); } .bm-button-circle .bm-button-icon-minimize { width: 62%; height: 62%; transform: translateY(0.75px) translateZ(0); } #bm-window-filter.bm-windowed .bm-button-circle .bm-button-icon-minimize { transform: translateZ(0); } .bm-button-pin { vertical-align: middle; } .bm-button-pin svg { width: 50%; margin: 0 auto; fill: #111; } .bm-window button.bm-button-trans { background: transparent !important; box-shadow: none !important; border-color: transparent !important; } .bm-button-trans.bm-button-hover-white:hover, .bm-button-trans.bm-button-hover-white:focus { background-color: rgba(255, 255, 255, 0.18) !important; } .bm-button-trans.bm-button-hover-white:active { background-color: rgba(255, 255, 255, 0.24) !important; } .bm-button-trans.bm-button-hover-black:hover, .bm-button-trans.bm-button-hover-black:focus { background-color: rgba(0, 0, 0, 0.14) !important; } .bm-button-trans.bm-button-hover-black:active { background-color: rgba(0, 0, 0, 0.2) !important; } .bm-window input[type=number], .bm-window select, .bm-window textarea { color: var(--bm-text-primary); font-family: var(--bm-font-body); background: linear-gradient( 180deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.06)); border: 1px solid rgba(255, 255, 255, 0.18); border-radius: 12px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12); } input[type=number].bm-input-coords { appearance: auto; -moz-appearance: textfield; width: 5.9ch; margin-left: 1ch; padding: 0.2em 0.35ch; font-size: small; } input[type=number].bm-input-coords::-webkit-outer-spin-button, input[type=number].bm-input-coords::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } div:has(> .bm-input-file) > button { width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .bm-input-file, input[type=file] { display: none !important; visibility: hidden !important; position: absolute !important; left: -9999px !important; top: -9999px !important; width: 0 !important; height: 0 !important; opacity: 0 !important; z-index: -9999 !important; pointer-events: none !important; } .bm-window select { padding: 0.22em 0.45ch; } .bm-window label:has(input[type=checkbox]) { display: flex; width: fit-content; gap: 1ch; align-items: center; color: var(--bm-text-secondary); } .bm-window input[type=checkbox] { width: 1em; accent-color: #74e7ff; } .bm-window-content { overflow: hidden; max-height: calc(100% - 5px); transition: height 300ms cubic-bezier(.4, 0, .2, 1); } .bm-window textarea { font-size: small; padding: 0.38em 0.52em; height: 4em; width: 100%; resize: vertical; line-height: 1.45; } .bm-window textarea::placeholder, .bm-window input::placeholder { color: rgba(47, 68, 102, 0.6); } .bm-window a:not(:has(*)) { color: rgba(21, 88, 164, 0.94); text-decoration: underline; text-decoration-color: rgba(21, 88, 164, 0.35); } .bm-window small { font-size: x-small; font-family: var(--bm-font-display); letter-spacing: 0.12em; color: var(--bm-text-secondary); } .bm-window ul li { list-style: disc; margin-left: 5ch; } .bm-window .bm-container.bm-scrollable { max-height: var(--bm-scrollable-max-height, calc(80vh - 150px)); overflow: auto; scrollbar-width: thin; scrollbar-color: rgba(146, 221, 255, 0.42) rgba(255, 255, 255, 0.05); } .bm-window .bm-container.bm-scrollable::-webkit-scrollbar { width: 10px; height: 10px; } .bm-window .bm-container.bm-scrollable::-webkit-scrollbar-thumb { background: linear-gradient( 180deg, rgba(116, 231, 255, 0.48), rgba(83, 141, 255, 0.4)); border-radius: 999px; border: 2px solid transparent; background-clip: padding-box; } .bm-window .bm-container.bm-scrollable::-webkit-scrollbar-track { background: rgba(255, 255, 255, 0.04); border-radius: 999px; } .bm-flex-between { display: flex; align-content: center; justify-content: space-between; align-items: center; gap: 0.35ch; } .bm-flex-center { display: flex; align-content: center; justify-content: center; align-items: center; gap: 0.35ch; } .bm-ascii { white-space: pre; letter-spacing: 0; line-height: 1 !important; font-size: 1.6em; font-family: monospace; } .bm-windowed .bm-container:not(#bm-window-main .bm-container) { margin-top: 0.18em; margin-bottom: 0.18em; } .bm-windowed h1:not(#bm-window-main h1) { font-size: 1em; } /* src/WindowFilter.css */ #bm-window-filter .bm-filter-eye-icon { display: block; width: 1.28em; height: 1.28em; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; overflow: visible; } #bm-window-filter p svg { display: inline-block; height: 1em; width: 1em; color: currentColor; vertical-align: -0.16em; } #bm-window-filter:not(.bm-windowed) { width: min(50rem, calc(100vw - 0.55rem)); max-width: min(50rem, calc(100vw - 0.55rem)) !important; } #bm-window-filter .bm-filter-header { padding-top: 0.08rem; } #bm-window-filter .bm-filter-toolbar { gap: 0.22rem; flex-wrap: wrap; width: 100%; padding: 0.16rem; } #bm-window-filter .bm-filter-toolbar > button { flex: 1 1 10rem; } #bm-window-filter .bm-filter-scrollable { padding-right: 0.08rem; } #bm-window-filter .bm-filter-insights { display: block; margin: 0 0.18rem; } #bm-window-filter .bm-filter-stat-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)) minmax(8.7rem, 1.28fr); gap: 0.24rem; } #bm-window-filter .bm-filter-stat-card, #bm-window-filter .bm-filter-sort-panel { min-width: 0; border-radius: 11px; border: 1px solid rgba(255, 255, 255, 0.18); background: linear-gradient( 155deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.07)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16), 0 8px 20px rgba(0, 0, 0, 0.08); } #bm-window-filter .bm-filter-stat-card { min-height: 2.28rem; display: flex; flex-direction: column; justify-content: center; gap: 0.04rem; padding: 0.24rem 0.42rem; color: rgba(18, 35, 63, 0.96); line-height: 1.12; } #bm-window-filter .bm-filter-stat-label { color: rgba(49, 71, 105, 0.82); font-size: 0.62rem; letter-spacing: 0; font-family: var(--bm-font-display); text-transform: uppercase; } #bm-window-filter .bm-filter-stat-value { display: inline-block; min-width: 0; color: rgba(15, 31, 56, 0.96); font-size: 1em; font-weight: 700; overflow-wrap: anywhere; } #bm-window-filter .bm-filter-stat-card time { font-family: var(--bm-font-mono); font-size: 0.9em; letter-spacing: 0; white-space: nowrap; } #bm-window-filter .bm-filter-sort-panel { padding: 0.38rem 0.48rem; } #bm-window-filter .bm-filter-sort-panel fieldset { border: none; padding: 0; margin: 0; } #bm-window-filter .bm-filter-sort-panel legend { margin-bottom: 0.12rem; } #bm-window-filter .bm-filter-sort-panel .bm-container { margin-top: 0.1rem; margin-bottom: 0.1rem; } #bm-window-filter .bm-filter-sort-actions { display: flex; justify-content: flex-start; } #bm-window-filter .bm-filter-sort-actions button { min-width: 7.8rem; } #bm-filter-flex { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: flex-start; align-items: stretch; gap: 0.38rem; } #bm-window-filter .bm-filter-color { position: relative; overflow: hidden; width: fit-content; max-width: 35ch; padding: 0.28rem; gap: 0.28rem; border-radius: 13px; border: 1px solid rgba(255, 255, 255, 0.18); background: linear-gradient( 160deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.07)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16), 0 8px 20px rgba(0, 0, 0, 0.08); transition: background 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease; } #bm-window-filter .bm-filter-color::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient( circle at top right, rgba(255, 255, 255, 0.18), transparent 24%), radial-gradient( circle at 18% 0%, rgba(186, 246, 255, 0.12), transparent 22%); } #bm-window-filter:not(.bm-windowed) .bm-filter-color::before { background: linear-gradient( 180deg, rgba(255, 255, 255, 0.08), rgba(0, 0, 0, 0.04)); } #bm-window-filter:not(.bm-windowed) .bm-filter-color::after { content: none; } #bm-window-filter .bm-filter-color-toggle { cursor: pointer; } #bm-window-filter .bm-filter-color:hover, #bm-window-filter .bm-filter-color:focus-within { transform: translateY(-2px); border-color: rgba(146, 221, 255, 0.26); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 10px 24px rgba(0, 0, 0, 0.1); } #bm-window-filter:not(.bm-windowed) .bm-filter-color { width: min(100%, 23.5rem); max-width: 23.5rem; min-height: 6.15rem; display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(7.6rem, 0.8fr); align-items: stretch; gap: 0.48rem; padding: 0.5rem; color: var(--bm-filter-card-fg); background-color: var(--bm-filter-card-bg); background-image: none; } #bm-window-filter:not(.bm-windowed) .bm-filter-color[data-id="-2"][data-state=shown] { background-image: conic-gradient( #aa0000 0%, #aaaa00 16.6%, #00aa00 33.3%, #00aaaa 50%, #0000aa 66.6%, #aa00aa 83.3%, #aa0000 100%); } #bm-window-filter:not(.bm-windowed) .bm-filter-color[data-id="-1"][data-state=shown], #bm-window-filter:not(.bm-windowed) .bm-filter-color[data-id="0"][data-state=shown] { background-image: url('data:image/svg+xml;utf8,'); background-color: rgba(255, 255, 255, 0.18); } #bm-window-filter:not(.bm-windowed) .bm-filter-color[data-state=hidden] { color: var(--bm-filter-card-fg); border-color: rgba(255, 255, 255, 0.16); background-color: var(--bm-filter-card-bg); background-image: none; } #bm-window-filter:not(.bm-windowed) .bm-filter-color[data-id="-2"][data-state=hidden] { background-image: conic-gradient( #aa0000 0%, #aaaa00 16.6%, #00aa00 33.3%, #00aaaa 50%, #0000aa 66.6%, #aa00aa 83.3%, #aa0000 100%); } #bm-window-filter:not(.bm-windowed) .bm-filter-color[data-id="-1"][data-state=hidden], #bm-window-filter:not(.bm-windowed) .bm-filter-color[data-id="0"][data-state=hidden] { background-image: url('data:image/svg+xml;utf8,'); background-color: rgba(255, 255, 255, 0.18); } #bm-window-filter:not(.bm-windowed) .bm-filter-color[data-state=hidden]::before { opacity: 0.16; } #bm-window-filter:not(.bm-windowed) .bm-filter-color > * { position: relative; z-index: 1; } #bm-window-filter:not(.bm-windowed) .bm-filter-premium-star { display: none; } #bm-window-filter:not(.bm-windowed) .bm-filter-color[data-premium="1"] .bm-filter-premium-star { position: absolute; top: 50%; right: -3.2rem; z-index: 0; display: block; width: 10.5rem; aspect-ratio: 1; background: currentColor; clip-path: polygon(50% 5%, 62% 38%, 98% 38%, 69% 59%, 80% 93%, 50% 72%, 20% 93%, 31% 59%, 2% 38%, 38% 38%); opacity: 0.12; pointer-events: none; transform: translateY(-50%); } #bm-window-filter:not(.bm-windowed) .bm-filter-color[data-premium="1"][data-state=hidden] .bm-filter-premium-star { opacity: 0.18; } #bm-window-filter:not(.bm-windowed) .bm-filter-color-main, #bm-window-filter:not(.bm-windowed) .bm-filter-color-meta, #bm-window-filter:not(.bm-windowed) .bm-filter-color-progress { min-width: 0; display: flex; flex-direction: column; } #bm-window-filter:not(.bm-windowed) .bm-filter-color-main { position: static; justify-content: flex-start; gap: 0.4rem; } #bm-window-filter:not(.bm-windowed) .bm-filter-color-title { min-width: 0; } #bm-window-filter:not(.bm-windowed) .bm-filter-color-meta { align-items: flex-end; justify-content: flex-start; gap: 0.36rem; text-align: right; } #bm-window-filter:not(.bm-windowed) .bm-filter-color-progress { align-items: flex-end; gap: 0.18rem; } #bm-window-filter:not(.bm-windowed) .bm-filter-color .bm-filter-color-pxl-cnt { font-family: var(--bm-font-display); font-size: 1rem; font-weight: 700; line-height: 1.15; min-height: 2.3em; overflow-wrap: anywhere; } #bm-window-filter .bm-filter-color-toggle:focus-visible { outline: none; border-color: rgba(116, 231, 255, 0.62); box-shadow: 0 0 0 3px rgba(116, 231, 255, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 10px 24px rgba(0, 0, 0, 0.1); } #bm-window-filter .bm-filter-container-rgb { display: block; width: fit-content; height: fit-content; padding: 0.26rem; border: 1px solid rgba(255, 255, 255, 0.18); border-radius: 10px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 6px 16px rgba(0, 0, 0, 0.08); } #bm-window-filter .bm-filter-color[data-id="-2"] .bm-filter-container-rgb { background: conic-gradient( #aa0000 0%, #aaaa00 16.6%, #00aa00 33.3%, #00aaaa 50%, #0000aa 66.6%, #aa00aa 83.3%, #aa0000 100%); } #bm-window-filter .bm-filter-color[data-id="-1"] .bm-filter-container-rgb { background: url('data:image/svg+xml;utf8,') repeat; background-color: transparent !important; } #bm-window-filter .bm-filter-color[data-id="-1"] .bm-filter-container-rgb svg { color: white !important; } #bm-window-filter .bm-filter-color[data-id="0"] .bm-filter-container-rgb { background-color: transparent !important; } #bm-window-filter .bm-filter-container-rgb button { display: inline-flex; align-items: center; justify-content: center; padding: 0.24em; min-width: 2.05rem; min-height: 2.05rem; border-radius: 999px; line-height: 1; } #bm-window-filter .bm-filter-container-rgb .bm-filter-eye-icon { width: 1.55rem; height: 1.55rem; filter: drop-shadow(0 1px 0 rgba(255, 255, 255, 0.18)); } #bm-window-filter:not(.bm-windowed) .bm-filter-container-rgb { position: absolute; left: 0.52rem; bottom: 0.46rem; z-index: 1; display: inline-flex; width: 1.65rem; height: 1.65rem; align-items: center; justify-content: center; padding: 0; color: currentColor; background: transparent !important; border: none; border-radius: 0; box-shadow: none; opacity: 0.72; pointer-events: none; } #bm-window-filter:not(.bm-windowed) .bm-filter-color[data-state=hidden] .bm-filter-container-rgb { opacity: 0.88; } #bm-window-filter:not(.bm-windowed) .bm-filter-container-rgb button { min-width: 1.65rem; min-height: 1.65rem; padding: 0; border-radius: 0; color: currentColor !important; pointer-events: none; } #bm-window-filter:not(.bm-windowed) .bm-filter-container-rgb .bm-filter-eye-icon { width: 1.65rem; height: 1.65rem; filter: none; } #bm-window-filter .bm-filter-color-visibility.bm-filter-eye-animate-hide .bm-filter-eye-icon path:nth-of-type(3), #bm-window-filter .bm-filter-color-visibility.bm-filter-eye-animate-show .bm-filter-eye-icon path:nth-of-type(3) { stroke-dasharray: 20; } #bm-window-filter .bm-filter-color-visibility.bm-filter-eye-animate-hide .bm-filter-eye-icon path:nth-of-type(3) { stroke-dashoffset: 20; animation: bm-filter-eye-slash-draw 220ms ease-out forwards; } #bm-window-filter .bm-filter-color-visibility.bm-filter-eye-animate-show .bm-filter-eye-icon path:nth-of-type(3) { stroke-dashoffset: 0; animation: bm-filter-eye-slash-erase 220ms ease-in forwards; } @keyframes bm-filter-eye-slash-draw { to { stroke-dashoffset: 0; } } @keyframes bm-filter-eye-slash-erase { to { stroke-dashoffset: 20; } } #bm-window-filter .bm-filter-color > .bm-flex-between { flex-direction: column; align-items: flex-start; gap: 0.02rem; } #bm-window-filter .bm-filter-color h2 { margin: 0.04rem 0 0; } #bm-window-filter:not(.bm-windowed) .bm-filter-color h2 { display: block; max-width: 100%; margin: 0.08rem 0 0; color: currentColor; font-size: 1.02rem; letter-spacing: 0; line-height: 1.12; overflow-wrap: anywhere; } #bm-window-filter .bm-filter-color .bm-filter-color-pxl-desc { margin: 0.1rem 0 0; } #bm-window-filter .bm-filter-color small { font-size: 0.75em; } #bm-window-filter:not(.bm-windowed) .bm-filter-color small { color: currentColor; letter-spacing: 0; opacity: 0.82; } #bm-window-filter .bm-filter-color.bm-color-hide { display: none; } #bm-window-filter.bm-windowed { --bm-scrollable-max-height: 100%; display: grid; grid-template-rows: auto minmax(0, 1fr); width: 360px; height: min(60vh, 22rem); min-width: 360px; min-height: 180px; max-width: min(1000px, calc(100vw - 16px)) !important; max-height: min(1400px, calc(100vh - 16px)) !important; overflow: hidden; box-sizing: border-box; position: fixed; transition: background 320ms ease, border-color 220ms ease, box-shadow 220ms ease, transform 0s; } #bm-window-filter.bm-windowed .bm-window-content { display: grid; grid-template-rows: auto auto auto auto minmax(0, 1fr); grid-row: 2; min-height: 0; min-width: 0; overflow: hidden; } #bm-window-filter.bm-windowed .bm-filter-toolbar { gap: 0.16rem; flex-wrap: nowrap; width: 100%; padding: 0.12rem; } #bm-window-filter.bm-windowed .bm-filter-toolbar > button { flex: 1 1 0; min-width: 0; } #bm-window-filter.bm-windowed #bm-filter-flex { flex-direction: column; align-items: stretch; gap: 0.16rem; width: 100%; align-self: stretch; min-width: 0; box-sizing: border-box; } #bm-window-filter.bm-windowed .bm-filter-color { width: 100%; max-width: none; align-self: stretch; flex: 1 1 auto; min-width: 0; margin: 0; padding: 0.12rem; border-radius: 11px; box-sizing: border-box; } #bm-window-filter.bm-windowed .bm-filter-color > .bm-flex-between { width: 100%; min-width: 0; flex: 1 1 auto; } #bm-window-filter.bm-windowed .bm-container.bm-scrollable { display: block; grid-row: 5; min-height: 0; min-width: 0; height: 100%; width: 100%; max-height: 100% !important; overflow: auto; box-sizing: border-box; } #bm-window-filter.bm-windowed .bm-resize-corner { position: absolute; right: 4px; bottom: 4px; display: flex; width: 20px; height: 20px; align-items: flex-end; justify-content: flex-end; padding-right: 4px; padding-bottom: 4px; box-sizing: border-box; z-index: 5; cursor: nwse-resize; pointer-events: auto; opacity: 0.78; touch-action: none; user-select: none; color: rgba(255, 255, 255, 0.86); background: linear-gradient( 135deg, rgba(255, 255, 255, 0.14), rgba(83, 141, 255, 0.14)); border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 8px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08); } #bm-window-filter.bm-windowed .bm-resize-corner:hover, #bm-window-filter.bm-windowed .bm-resize-corner.bm-resizing { opacity: 1; border-color: rgba(146, 221, 255, 0.36); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 8px 16px rgba(0, 0, 0, 0.16); } #bm-window-filter.bm-windowed .bm-filter-container-rgb { display: flex; width: 100%; min-width: 0; flex: 1 1 auto; gap: 0.5ch; align-items: center; padding: 0.1rem 0.2rem; border: none; border-radius: 8px; box-sizing: border-box; } #bm-window-filter.bm-windowed .bm-filter-container-rgb button { padding: 0.2em; flex: 0 0 auto; } #bm-window-filter.bm-windowed .bm-filter-container-rgb .bm-filter-eye-icon { width: 1.36rem; height: 1.36rem; } #bm-window-filter.bm-windowed .bm-filter-color h2 { font-size: 0.78rem; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } #bm-window-filter #bm-filter-windowed-color-totals { display: inline-flex; align-items: center; padding: 0.08rem 0.24rem; border-radius: 999px; background: rgba(255, 255, 255, 0.12); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08); font-size: 1em; } @media (max-width: 980px) { #bm-window-filter:not(.bm-windowed) { width: min(100vw - 0.35rem, 50rem); max-width: min(100vw - 0.35rem, 50rem) !important; } #bm-window-filter .bm-filter-stat-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } #bm-window-filter .bm-filter-stat-card-wide { grid-column: span 2; } } @media (max-width: 620px) { #bm-window-filter .bm-filter-stat-grid { grid-template-columns: 1fr; } #bm-window-filter .bm-filter-stat-card-wide { grid-column: auto; } #bm-window-filter:not(.bm-windowed) .bm-filter-color { width: 100%; max-width: none; grid-template-columns: 1fr; } #bm-window-filter:not(.bm-windowed) .bm-filter-color-meta, #bm-window-filter:not(.bm-windowed) .bm-filter-color-progress { align-items: flex-start; text-align: left; } } /* src/WindowMain.css */ #bm-window-main { width: min(25.5rem, calc(100vw - 0.65rem)); max-width: min(25.5rem, calc(100vw - 0.65rem)) !important; } #bm-window-main .bm-window-content { display: flex; flex-direction: column; } #bm-window-main .bm-main-hero, #bm-window-main .bm-main-shell { position: relative; overflow: hidden; border-radius: 14px; border: 1px solid rgba(255, 255, 255, 0.18); background: linear-gradient( 150deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.08)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 10px 24px rgba(0, 0, 0, 0.1); } #bm-window-main .bm-main-hero::before, #bm-window-main .bm-main-shell::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient( circle at top right, rgba(255, 255, 255, 0.2), transparent 26%), radial-gradient( circle at 20% 0%, rgba(186, 246, 255, 0.16), transparent 24%); } #bm-window-main .bm-main-hero { display: flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 0.48rem 0.58rem; text-align: center; } #bm-window-main .bm-main-hero .bm-favicon, #bm-window-main .bm-main-hero h1 { position: relative; z-index: 1; } #bm-window-main .bm-main-hero .bm-favicon { margin-right: 0; padding: 0; background: none; border-radius: 0; box-shadow: none; } #bm-window-main .bm-main-hero h1 { margin: 0; } #bm-window-main .bm-main-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.24rem; } #bm-window-main .bm-main-stat-card { min-width: 0; min-height: 2.55rem; display: flex; align-items: flex-start; padding: 0.34rem 0.45rem; border-radius: 11px; border: 1px solid rgba(255, 255, 255, 0.18); background: linear-gradient( 160deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.07)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16); color: rgba(18, 35, 63, 0.96); line-height: 1.22; } #bm-window-main .bm-main-stat-card > span, #bm-window-main .bm-main-stat-card > time { min-width: 0; } #bm-window-main .bm-main-stat-card-value, #bm-window-main .bm-main-stat-card-timer { flex-direction: column; justify-content: center; gap: 0.08rem; } #bm-window-main .bm-main-stat-value { display: inline-block; font-size: 1.3em; color: rgba(15, 31, 56, 0.96); white-space: normal; overflow-wrap: anywhere; } #bm-window-main .bm-main-stat-value b { font-size: 1em; } #bm-window-main .bm-main-stat-label { color: rgba(49, 71, 105, 0.82); font-size: 0.62rem; letter-spacing: 0.08em; font-family: var(--bm-font-display); text-transform: uppercase; } #bm-window-main .bm-main-stat-card time { white-space: nowrap; font-family: inherit; font-size: 1.3em; letter-spacing: inherit; } #bm-window-main .bm-main-shell { padding: 0.48rem; } #bm-window-main .bm-main-coords { display: grid; grid-template-columns: auto repeat(4, minmax(0, 1fr)); gap: 0.22rem; align-items: center; } #bm-window-main .bm-main-coords .bm-button-pin { width: 1.8rem; height: 1.8rem; } #bm-window-main .bm-main-coords .bm-input-coords { width: 100%; margin-left: 0; text-align: center; } #bm-window-main .bm-main-upload, #bm-window-main .bm-main-status { margin-top: 0.24rem; } #bm-window-main .bm-main-upload > div { width: 100%; } #bm-window-main .bm-main-actions { gap: 0.24rem; margin-top: 0.3rem; } #bm-window-main .bm-main-actions > button { flex: 1 1 0; } #bm-window-main .bm-main-status textarea { min-height: 4.1rem; } @media (max-width: 720px) { #bm-window-main { width: min(100vw - 0.45rem, 25.5rem); max-width: min(100vw - 0.45rem, 25.5rem) !important; } #bm-window-main .bm-main-stats { grid-template-columns: 1fr; } #bm-window-main .bm-main-coords { grid-template-columns: repeat(2, minmax(0, 1fr)); } #bm-window-main .bm-main-coords .bm-button-pin { grid-column: 1 / -1; width: 100%; aspect-ratio: auto; height: 1.8rem; } #bm-window-main .bm-main-actions { flex-direction: column; } } /* src/WindowSettings.css */ #bm-window-settings div:has(> .bm-highlight-preset-container) { width: fit-content; justify-content: flex-start; } #bm-window-settings .bm-highlight-preset-container { display: flex; flex-direction: column; width: 13%; } #bm-window-settings .bm-highlight-preset-container span { width: fit-content; margin: auto; font-size: 0.7em; } #bm-window-settings .bm-highlight-preset-container button { width: fit-content; padding: 0; border-radius: 0; } #bm-window-settings .bm-highlight-preset-container svg { stroke: #333; stroke-width: 0.02px; width: 100%; min-width: 1.5ch; max-width: 14.5ch; } #bm-window-settings .bm-highlight-preset-container button:hover svg, #bm-window-settings .bm-highlight-preset-container button:focus svg { opacity: 0.9; } #bm-window-settings .bm-highlight-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; width: 25%; min-width: 3ch; max-width: 15ch; } #bm-window-settings .bm-highlight-grid > button { width: 100%; padding: 0; aspect-ratio: 1 / 1; background-color: white; border: #333 1px solid; border-radius: 0; box-sizing: border-box; } #bm-window-settings .bm-highlight-grid > button[data-status=Incorrect] { background-color: brown; } #bm-window-settings .bm-highlight-grid > button[data-status=Template] { background-color: darkslategray; } #bm-window-settings .bm-highlight-grid > button:hover, #bm-window-settings .bm-highlight-grid > button:focus { opacity: 0.8; } /* src/WindowWizard.css */ #bm-wizard-tlist { display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; } #bm-wizard-tlist > .bm-container { width: 100%; justify-content: flex-start; background-color: rgba(21, 48, 99, 0.9); border-radius: 1em; padding: 0.5em; transition: background-color 0.3s ease; } #bm-wizard-tlist > .bm-container:hover, #bm-wizard-tlist > .bm-container:focus-within { background-color: rgba(17, 40, 85, 0.9); } #bm-wizard-tlist .bm-wizard-template-container-image { height: 100%; font-size: xxx-large; } #bm-wizard-tlist .bm-wizard-template-container-flavor { flex-direction: column; align-items: flex-start; gap: 0; } /* src/main.css */ /* Build Hash: 1839ba740765 */