diff --git a/dist/BlueMarble-For-GreasyFork.user.css b/dist/BlueMarble-For-GreasyFork.user.css
index 6accc48..e7dc47f 100644
--- a/dist/BlueMarble-For-GreasyFork.user.css
+++ b/dist/BlueMarble-For-GreasyFork.user.css
@@ -35,36 +35,141 @@ confetti-piece {
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;
- background-color: rgba(21, 48, 99, 0.9);
- color: white;
- padding: 10px;
- border-radius: 8px;
+ 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: all 0.3s ease, transform 0s;
+ 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);
- font-family:
- "Roboto Mono",
- "Courier New",
- "Monaco",
- "DejaVu Sans Mono",
- monospace,
- "Arial";
- letter-spacing: 0.05em;
+ 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.5ch;
- background: url('data:image/svg+xml;utf8,') repeat;
+ 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;
@@ -81,46 +186,75 @@ confetti-piece {
}
.bm-favicon {
display: inline-block;
- height: 2.5em;
- margin-right: 1ch;
+ 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: x-large;
- font-weight: bold;
+ 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: 1.2em;
+ font-size: 0.78rem;
user-select: none;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
- text-shadow:
- 3px 0px rgba(21, 48, 99, 0.5),
- -3px 0px rgba(21, 48, 99, 0.5),
- 0px 3px rgba(21, 48, 99, 0.5),
- 0px -3px rgba(21, 48, 99, 0.5),
- 3px 3px rgba(21, 48, 99, 0.5),
- -3px 3px rgba(21, 48, 99, 0.5),
- 3px -3px rgba(21, 48, 99, 0.5),
- -3px -3px rgba(21, 48, 99, 0.5);
+ 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: larger;
+ 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;
@@ -128,34 +262,133 @@ confetti-piece {
margin-right: auto;
}
.bm-container {
- margin: 0.5em 0;
+ margin: 0.24em 0;
+}
+.bm-window input,
+.bm-window select,
+.bm-window textarea,
+.bm-window button {
+ font: inherit;
}
.bm-window button {
- background-color: #144eb9;
- border-radius: 1em;
- padding: 0 0.75ch;
+ 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-color: #1061e5;
+ 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:active,
-.bm-window button:disabled {
- background-color: #2e97ff;
+.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,
.bm-window button:disabled {
- text-decoration: line-through;
+ 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 {
- border: white 1px solid;
- height: 1.5em;
- width: 1.5em;
- margin-top: 2px;
+ 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: 1em;
+ 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 {
+ width: 70%;
+ height: 70%;
}
.bm-button-pin {
vertical-align: middle;
@@ -166,29 +399,44 @@ confetti-piece {
fill: #111;
}
.bm-window button.bm-button-trans {
- background-color: unset;
+ 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.17);
+ background-color: rgba(255, 255, 255, 0.18) !important;
}
.bm-button-trans.bm-button-hover-white:active {
- background-color: rgba(255, 255, 255, 0.22);
+ 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.17);
+ background-color: rgba(0, 0, 0, 0.14) !important;
}
.bm-button-trans.bm-button-hover-black:active {
- background-color: rgba(0, 0, 0, 0.22);
+ 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.5ch;
+ width: 5.9ch;
margin-left: 1ch;
- background-color: rgba(0, 0, 0, 0.2);
- padding: 0 0.5ch;
+ padding: 0.2em 0.35ch;
font-size: small;
}
input[type=number].bm-input-coords::-webkit-outer-spin-button,
@@ -216,18 +464,18 @@ input[type=file] {
pointer-events: none !important;
}
.bm-window select {
- color: white;
- background-color: #144eb9;
- border-radius: 1em;
- padding: 0 0.5ch;
+ 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;
@@ -236,17 +484,26 @@ input[type=file] {
}
.bm-window textarea {
font-size: small;
- background-color: rgba(0, 0, 0, 0.2);
- padding: 0 0.5ch;
- height: 5.25em;
+ 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;
- color: lightgray;
+ font-family: var(--bm-font-display);
+ letter-spacing: 0.12em;
+ color: var(--bm-text-secondary);
}
.bm-window ul li {
list-style: disc;
@@ -255,20 +512,40 @@ input[type=file] {
.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.5ch;
+ gap: 0.35ch;
}
.bm-flex-center {
display: flex;
align-content: center;
justify-content: center;
align-items: center;
- gap: 0.5ch;
+ gap: 0.35ch;
}
.bm-ascii {
white-space: pre;
@@ -278,8 +555,8 @@ input[type=file] {
font-family: monospace;
}
.bm-windowed .bm-container:not(#bm-window-main .bm-container) {
- margin-top: 0.25em;
- margin-bottom: 0.25em;
+ margin-top: 0.18em;
+ margin-bottom: 0.18em;
}
.bm-windowed h1:not(#bm-window-main h1) {
font-size: 1em;
@@ -291,32 +568,150 @@ input[type=file] {
height: 1em;
fill: white;
}
+#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: grid;
+ grid-template-columns: minmax(16rem, 20rem) minmax(0, 1fr);
+ gap: 0.24rem 0.3rem;
+ align-items: stretch;
+}
+#bm-window-filter .bm-filter-insights > hr,
+#bm-window-filter .bm-filter-sort-panel {
+ grid-column: 1 / -1;
+}
+#bm-window-filter .bm-filter-stats-card,
+#bm-window-filter .bm-filter-note,
+#bm-window-filter .bm-filter-sort-panel {
+ padding: 0.38rem 0.48rem;
+ border-radius: 13px;
+ 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-stats-card {
+ display: grid;
+ gap: 0.18rem;
+}
+#bm-window-filter .bm-filter-stats-card br {
+ display: none;
+}
+#bm-window-filter .bm-filter-stats-card span {
+ display: block;
+ padding: 0.28rem 0.38rem;
+ border-radius: 10px;
+ background:
+ linear-gradient(
+ 180deg,
+ rgba(255, 255, 255, 0.2),
+ rgba(255, 255, 255, 0.08));
+}
+#bm-window-filter .bm-filter-note p {
+ margin: 0;
+}
+#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: center;
- gap: 1em 3ch;
+ align-items: stretch;
+ gap: 0.3rem;
}
#bm-window-filter .bm-filter-color {
+ position: relative;
+ overflow: hidden;
width: fit-content;
max-width: 35ch;
- background-color: rgba(21, 48, 99, 0.9);
- border-radius: 1em;
- padding: 0.5em;
- gap: 1ch;
- transition: background-color 0.3s ease;
+ 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 .bm-filter-color:hover,
-#bm-window-filter.bm-filter-color:focus-within {
- background-color: rgba(17, 40, 85, 0.9);
+#bm-window-filter .bm-filter-color:focus-within {
+ transform: translateY(-2px);
+ border-color: rgba(146, 221, 255, 0.26);
+ background:
+ linear-gradient(
+ 160deg,
+ rgba(255, 255, 255, 0.22),
+ rgba(186, 246, 255, 0.1));
+ box-shadow: 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;
- border: thick double darkslategray;
width: fit-content;
height: fit-content;
- padding: 1ch;
+ 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:
@@ -340,7 +735,7 @@ input[type=file] {
background-color: transparent !important;
}
#bm-window-filter .bm-filter-container-rgb button {
- padding: 0.75em 0.5ch;
+ padding: 0.26em 0.14ch;
}
#bm-window-filter .bm-filter-container-rgb svg {
width: 4ch;
@@ -348,7 +743,13 @@ input[type=file] {
#bm-window-filter .bm-filter-color > .bm-flex-between {
flex-direction: column;
align-items: flex-start;
- gap: 0;
+ gap: 0.02rem;
+}
+#bm-window-filter .bm-filter-color h2 {
+ margin: 0.04rem 0 0;
+}
+#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;
@@ -360,29 +761,43 @@ input[type=file] {
--bm-scrollable-max-height: 100%;
display: grid;
grid-template-rows: auto minmax(0, 1fr);
- width: 300px;
- height: min(70vh, 32rem);
- min-width: 260px;
- min-height: 220px;
+ width: 268px;
+ height: min(60vh, 22rem);
+ min-width: 228px;
+ 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: transform 0s;
+ 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 minmax(0, 1fr);
+ 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.25em;
+ gap: 0.16rem;
width: 100%;
align-self: stretch;
min-width: 0;
@@ -395,7 +810,8 @@ input[type=file] {
flex: 1 1 auto;
min-width: 0;
margin: 0;
- padding: 0;
+ padding: 0.12rem;
+ border-radius: 11px;
box-sizing: border-box;
}
#bm-window-filter.bm-windowed .bm-filter-color > .bm-flex-between {
@@ -405,7 +821,7 @@ input[type=file] {
}
#bm-window-filter.bm-windowed .bm-container.bm-scrollable {
display: block;
- grid-row: 4;
+ grid-row: 5;
min-height: 0;
min-width: 0;
height: 100%;
@@ -416,24 +832,37 @@ input[type=file] {
}
#bm-window-filter.bm-windowed .bm-resize-corner {
position: absolute;
- right: 0;
- bottom: 0;
- display: block;
- width: 28px;
- height: 28px;
+ 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: 1;
+ opacity: 0.78;
touch-action: none;
user-select: none;
- background: transparent;
- border: none;
- box-shadow: 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;
@@ -442,28 +871,206 @@ input[type=file] {
flex: 1 1 auto;
gap: 0.5ch;
align-items: center;
- padding: 0.1em 0.5ch;
+ padding: 0.1rem 0.2rem;
border: none;
- border-radius: 1em;
+ border-radius: 8px;
box-sizing: border-box;
}
#bm-window-filter.bm-windowed .bm-filter-container-rgb button {
- padding: 0.5em 0.25ch;
+ padding: 0.2em 0.1ch;
flex: 0 0 auto;
}
#bm-window-filter.bm-windowed .bm-filter-container-rgb svg {
- width: 3ch;
+ width: 2.7ch;
}
#bm-window-filter.bm-windowed .bm-filter-color h2 {
- font-size: 0.75em;
+ 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-insights {
+ grid-template-columns: 1fr;
+ }
+ #bm-window-filter .bm-filter-note,
+ #bm-window-filter .bm-filter-sort-panel,
+ #bm-window-filter .bm-filter-insights > hr {
+ grid-column: auto;
+ }
+}
+
+/* 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;
+ gap: 0.5rem;
+ padding: 0.48rem 0.58rem;
+}
+#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: var(--bm-font-mono);
+ letter-spacing: 0.06em;
+}
+#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) {
@@ -554,4 +1161,4 @@ input[type=file] {
/* src/main.css */
-/* Build Hash: 4336138174a3 */
+/* Build Hash: 974f8e45028a */
diff --git a/dist/BlueMarble-For-GreasyFork.user.js b/dist/BlueMarble-For-GreasyFork.user.js
index d77e574..3a2eff5 100644
--- a/dist/BlueMarble-For-GreasyFork.user.js
+++ b/dist/BlueMarble-For-GreasyFork.user.js
@@ -2300,65 +2300,8 @@ Getting Y ${pixelY}-${pixelY + drawSizeY}`);
};
customElements.define("confetti-piece", BlueMarbleConfettiPiece);
- // src/WindowCredits.js
- var WindowCredts = class extends Overlay {
- /** Constructor for the Credits window
- * @param {string} name - The name of the userscript
- * @param {string} version - The version of the userscript
- * @since 0.90.9
- * @see {@link Overlay#constructor} for examples
- */
- constructor(name2, version2) {
- super(name2, version2);
- this.window = null;
- this.windowID = "bm-window-credits";
- this.windowParent = document.body;
- }
- /** Spawns a Credits window.
- * If another credits window already exists, we DON'T spawn another!
- * Parent/child relationships in the DOM structure below are indicated by indentation.
- * @since 0.90.9
- */
- buildWindow() {
- const ascii = `
-\u2588\u2588\u2588\u2588\u2588\u2588\u2557 \u2588\u2588\u2557 \u2588\u2588\u2557 \u2588\u2588\u2557\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2557
-\u2588\u2588\u2554\u2550\u2550\u2588\u2588\u2557\u2588\u2588\u2551 \u2588\u2588\u2551 \u2588\u2588\u2551\u2588\u2588\u2554\u2550\u2550\u2550\u2550\u255D
-\u2588\u2588\u2588\u2588\u2588\u2588\u2554\u255D\u2588\u2588\u2551 \u2588\u2588\u2551 \u2588\u2588\u2551\u2588\u2588\u2588\u2588\u2588\u2557
-\u2588\u2588\u2554\u2550\u2550\u2588\u2588\u2557\u2588\u2588\u2551 \u2588\u2588\u2551 \u2588\u2588\u2551\u2588\u2588\u2554\u2550\u2550\u255D
-\u2588\u2588\u2588\u2588\u2588\u2588\u2554\u255D\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2557\u255A\u2588\u2588\u2588\u2588\u2588\u2588\u2554\u255D\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2557
-\u255A\u2550\u2550\u2550\u2550\u2550\u255D \u255A\u2550\u2550\u2550\u2550\u2550\u2550\u255D \u255A\u2550\u2550\u2550\u2550\u2550\u255D \u255A\u2550\u2550\u2550\u2550\u2550\u2550\u255D
-
-\u2588\u2588\u2588\u2557 \u2588\u2588\u2588\u2557 \u2588\u2588\u2588\u2588\u2588\u2557 \u2588\u2588\u2588\u2588\u2588\u2588\u2557 \u2588\u2588\u2588\u2588\u2588\u2588\u2557 \u2588\u2588\u2557 \u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2557
-\u2588\u2588\u2588\u2588\u2557 \u2588\u2588\u2588\u2588\u2551\u2588\u2588\u2554\u2550\u2550\u2588\u2588\u2557\u2588\u2588\u2554\u2550\u2550\u2588\u2588\u2557\u2588\u2588\u2554\u2550\u2550\u2588\u2588\u2557\u2588\u2588\u2551 \u2588\u2588\u2554\u2550\u2550\u2550\u2550\u255D
-\u2588\u2588\u2554\u2588\u2588\u2588\u2588\u2554\u2588\u2588\u2551\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2551\u2588\u2588\u2588\u2588\u2588\u2588\u2554\u255D\u2588\u2588\u2588\u2588\u2588\u2588\u2554\u255D\u2588\u2588\u2551 \u2588\u2588\u2588\u2588\u2588\u2557
-\u2588\u2588\u2551\u255A\u2588\u2588\u2554\u255D\u2588\u2588\u2551\u2588\u2588\u2554\u2550\u2550\u2588\u2588\u2551\u2588\u2588\u2554\u2550\u2550\u2588\u2588\u2557\u2588\u2588\u2554\u2550\u2550\u2588\u2588\u2557\u2588\u2588\u2551 \u2588\u2588\u2554\u2550\u2550\u255D
-\u2588\u2588\u2551 \u255A\u2550\u255D \u2588\u2588\u2551\u2588\u2588\u2551 \u2588\u2588\u2551\u2588\u2588\u2551 \u2588\u2588\u2551\u2588\u2588\u2588\u2588\u2588\u2588\u2554\u255D\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2557\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2557
-\u255A\u2550\u255D \u255A\u2550\u255D\u255A\u2550\u255D \u255A\u2550\u255D\u255A\u2550\u255D \u255A\u2550\u255D\u255A\u2550\u2550\u2550\u2550\u2550\u255D \u255A\u2550\u2550\u2550\u2550\u2550\u2550\u255D\u255A\u2550\u2550\u2550\u2550\u2550\u2550\u255D
-`;
- if (document.querySelector(`#${this.windowID}`)) {
- document.querySelector(`#${this.windowID}`).remove();
- return;
- }
- this.window = this.addDiv({ "id": this.windowID, "class": "bm-window" }, (instance, div) => {
- }).addDragbar().addButton({ "class": "bm-button-circle", "textContent": "\u25BC", "aria-label": 'Minimize window "Credits"', "data-button-status": "expanded" }, (instance, button) => {
- button.onclick = () => instance.handleMinimization(button);
- button.ontouchend = () => {
- button.click();
- };
- }).buildElement().addDiv().buildElement().addButton({ "class": "bm-button-circle", "textContent": "\u2716", "aria-label": 'Close window "Credits"' }, (instance, button) => {
- button.onclick = () => {
- document.querySelector(`#${this.windowID}`)?.remove();
- };
- button.ontouchend = () => {
- button.click();
- };
- }).buildElement().buildElement().addDiv({ "class": "bm-window-content" }).addDiv({ "class": "bm-container bm-center-vertically" }).addHeader(1, { "textContent": "Credits" }).buildElement().buildElement().addHr().buildElement().addDiv({ "class": "bm-container bm-scrollable" }).addSpan({ "role": "img", "aria-label": this.name }).addSpan({ "innerHTML": ascii, "class": "bm-ascii", "aria-hidden": "true" }).buildElement().buildElement().addBr().buildElement().addHr().buildElement().addBr().buildElement().addSpan({ "textContent": '"Blue Marble" userscript is made by SwingTheVine.' }).buildElement().addBr().buildElement().addSpan({ "innerHTML": 'The Blue Marble Website is made by crqch.' }).buildElement().addBr().buildElement().addSpan({ "textContent": `The Blue Marble Website used until ${localizeDate(new Date(1756069320 * 1e3))} was made by Camille Daguin.` }).buildElement().addBr().buildElement().addSpan({ "textContent": 'The favicon "Blue Marble" is owned by NASA. (The image of the Earth is owned by NASA)' }).buildElement().addBr().buildElement().addSpan({ "textContent": "Special Thanks:" }).buildElement().addUl().addLi({ "textContent": "Espresso, Meqa, and Robot for moderating SwingTheVine's community." }).buildElement().addLi({ "innerHTML": 'nof, darkness for creating similar userscripts!' }).buildElement().addLi({ "innerHTML": 'Wonda for the Blue Marble banner image!' }).buildElement().addLi({ "innerHTML": 'BullStein, allanf181 for being early beta testers!' }).buildElement().addLi({ "innerHTML": 'guidu_ and Nick-machado for the original "Minimize" Button code!' }).buildElement().addLi({ "innerHTML": 'Nomad and Gustav for the tutorials!' }).buildElement().addLi({ "innerHTML": 'cfp for creating the template overlay that Blue Marble was based on!' }).buildElement().addLi({ "innerHTML": 'Force Network for hosting the telemetry server!' }).buildElement().addLi({ "innerHTML": 'TheBlueCorner for getting me interested in online pixel canvases!' }).buildElement().buildElement().addBr().buildElement().addSpan({ "innerHTML": 'Donators:' }).buildElement().addUl().addLi({ "textContent": "Soultree" }).buildElement().addLi({ "textContent": "Espresso" }).buildElement().addLi({ "textContent": "BEST FAN" }).buildElement().addLi({ "textContent": "FuchsDresden" }).buildElement().addLi({ "textContent": "Jack" }).buildElement().addLi({ "textContent": "raiken_au" }).buildElement().addLi({ "textContent": "Jacob" }).buildElement().addLi({ "textContent": "StupidOne" }).buildElement().addLi({ "textContent": "2 Anonymous Supporters" }).buildElement().buildElement().buildElement().buildElement().buildElement().buildOverlay(this.windowParent);
- this.handleDrag(`#${this.windowID}.bm-window`, `#${this.windowID} .bm-dragbar`);
- }
- };
-
// src/WindowFilter.js
- var _WindowFilter_instances, getWindowState_fn, prefersWindowedMode_fn, setWindowModePreference_fn, syncSortFormControls_fn, closeWindow_fn, cleanupWindowPersistence_fn, clampWindowDimension_fn, clampWindowPosition_fn, restoreWindowState_fn, saveWindowState_fn, scheduleWindowStateSave_fn, initializeWindowedPersistence_fn, buildColorList_fn, sortColorList_fn, selectColorList_fn, calculatePixelStatistics_fn;
+ var _WindowFilter_instances, getWindowState_fn, prefersWindowedMode_fn, setWindowModePreference_fn, syncSortFormControls_fn, closeWindow_fn, startAutoRefresh_fn, stopAutoRefresh_fn, cleanupWindowPersistence_fn, clampWindowDimension_fn, clampWindowPosition_fn, restoreWindowState_fn, saveWindowState_fn, scheduleWindowStateSave_fn, initializeWindowedPersistence_fn, buildColorList_fn, sortColorList_fn, selectColorList_fn, calculatePixelStatistics_fn;
var WindowFilter = class extends Overlay {
/** Constructor for the color filter window
* @param {*} executor - The executing class
@@ -2378,6 +2321,8 @@ Getting Y ${pixelY}-${pixelY + drawSizeY}`);
this.windowResizeObserver = null;
this.windowViewportResizeHandler = null;
this.windowSaveTimeout = null;
+ this.colorRefreshInterval = null;
+ this.colorRefreshIntervalMS = 1e4;
this.windowMinWidth = 260;
this.windowMinHeight = 220;
this.windowMaxWidth = 1e3;
@@ -2439,17 +2384,11 @@ Getting Y ${pixelY}-${pixelY + drawSizeY}`);
button.ontouchend = () => {
button.click();
};
- }).buildElement().buildElement().buildElement().addDiv({ "class": "bm-window-content" }).addDiv({ "class": "bm-container bm-center-vertically" }).addHeader(1, { "textContent": "Color Filter" }).buildElement().buildElement().addHr().buildElement().addDiv({ "class": "bm-container bm-flex-between bm-center-vertically", "style": "gap: 1.5ch;" }).addButton({ "textContent": "Hide All Colors" }, (instance, button) => {
+ }).buildElement().buildElement().buildElement().addDiv({ "class": "bm-window-content" }).addDiv({ "class": "bm-container bm-center-vertically bm-filter-header" }).addHeader(1, { "textContent": "Color Filter" }).buildElement().buildElement().addHr().buildElement().addDiv({ "class": "bm-container bm-flex-between bm-center-vertically bm-filter-toolbar", "style": "gap: 1.5ch;" }).addButton({ "class": "bm-button-secondary", "textContent": "Hide All Colors" }, (instance, button) => {
button.onclick = () => __privateMethod(this, _WindowFilter_instances, selectColorList_fn).call(this, false);
- }).buildElement().addButton({ "textContent": "Refresh Data" }, (instance, button) => {
- button.onclick = () => {
- button.disabled = true;
- this.updateColorList();
- button.disabled = false;
- };
- }).buildElement().addButton({ "textContent": "Show All Colors" }, (instance, button) => {
+ }).buildElement().addButton({ "class": "bm-button-secondary", "textContent": "Show All Colors" }, (instance, button) => {
button.onclick = () => __privateMethod(this, _WindowFilter_instances, selectColorList_fn).call(this, true);
- }).buildElement().buildElement().addDiv({ "class": "bm-container bm-scrollable" }).addDiv({ "class": "bm-container", "style": "margin-left: 2.5ch; margin-right: 2.5ch;" }).addDiv({ "class": "bm-container" }).addSpan({ "id": "bm-filter-tile-load", "innerHTML": "Tiles Loaded: 0 / ???" }).buildElement().addBr().buildElement().addSpan({ "id": "bm-filter-tot-correct", "innerHTML": "Correct Pixels: ???" }).buildElement().addBr().buildElement().addSpan({ "id": "bm-filter-tot-total", "innerHTML": "Total Pixels: ???" }).buildElement().addBr().buildElement().addSpan({ "id": "bm-filter-tot-remaining", "innerHTML": "Complete: ??? (???)" }).buildElement().addBr().buildElement().addSpan({ "id": "bm-filter-tot-completed", "innerHTML": "??? ???" }).buildElement().buildElement().addDiv({ "class": "bm-container" }).addP({ "innerHTML": `Press the \u{1F5D7} button to make this window smaller. Colors with the icon ${this.eyeOpen.replace("