north-star / commit
background is now white again
src/app.js | 5 +---- src/style.css | 57 +++++++++++++++++++++++++++++++-------------------------- 2 files changed, 32 insertions(+), 30 deletions(-) diff --git a/src/app.js b/src/app.js index 3a9c63a..c55079f 100644 --- a/src/app.js +++ b/src/app.js @@ -1071,7 +1071,7 @@ const getParticipantsToRender = () => { participantsToRender.push({ id: NORTH_MARKER_ID, name: 'North', - color: '#ffffff', + color: '#000000', position: { lat: selfPosition.lat + 0.001, lon: selfPosition.lon @@ -1179,9 +1179,6 @@ const render = () => { } }); - // set the background color to self color - document.body.style.backgroundColor = selfParticipant.color; - // output debug info logDebug(`Name: ${selfParticipant.name} | Real participants: ${participants.length} | Commit: ${isLocalCommit ? 'local' : `<a href="https://gitlab.com/PavelSafronov/north-star/-/commit/${GIT_COMMIT}" target="_blank">${GIT_COMMIT}</a>`}`); }; diff --git a/src/style.css b/src/style.css index 1ad8e65..36112e7 100644 --- a/src/style.css +++ b/src/style.css @@ -18,15 +18,15 @@ body { box-sizing: border-box; gap: 8px; padding: max(10px, env(safe-area-inset-top)) 12px max(10px, env(safe-area-inset-bottom)); - background: #a2b8ed; - color: #f8fafc; + background: #ffffff; + color: #0f172a; font-family: system-ui, sans-serif; overflow-x: hidden; } a { - color: #ffffff; - text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8); + color: #1d4ed8; + text-shadow: none; } .app-title { @@ -47,8 +47,8 @@ a { margin: 0; font-size: clamp(12px, 1.8vmin, 16px); font-weight: 600; - color: #f8fafc; - text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8); + color: #334155; + text-shadow: none; position: relative; z-index: 2; text-align: center; @@ -74,18 +74,18 @@ a { } .room-links span { - color: rgba(248, 250, 252, 0.8); + color: rgba(51, 65, 85, 0.8); } .room-link-status { min-width: 58px; - color: #86efac; + color: #166534; font-size: 0.9em; - text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8); + text-shadow: none; } .room-link-status.error { - color: #fecaca; + color: #b91c1c; } .name-form { @@ -99,8 +99,10 @@ a { width: min(100%, 520px); box-sizing: border-box; border-radius: 12px; - background: rgba(15, 23, 42, 0.68); - backdrop-filter: blur(8px); + background: rgba(255, 255, 255, 0.94); + border: 1px solid #cbd5e1; + box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08); + backdrop-filter: blur(6px); position: relative; z-index: 2; } @@ -108,7 +110,7 @@ a { .name-form label { font-size: 14px; font-weight: 600; - color: #e2e8f0; + color: #334155; } .name-form input { @@ -171,10 +173,10 @@ a { .participants-toggle { padding: 6px 10px; - border: 0; + border: 1px solid #cbd5e1; border-radius: 8px; - background: rgba(15, 23, 42, 0.75); - color: #f8fafc; + background: rgba(255, 255, 255, 0.94); + color: #0f172a; font-size: 12px; font-weight: 700; cursor: pointer; @@ -192,7 +194,7 @@ a { .participants-toggle.compass-error { border: 2px solid #f97316; - background: rgba(124, 45, 18, 0.85); + background: rgba(255, 237, 213, 0.96); } .participants-panel { @@ -205,7 +207,9 @@ a { overflow: auto; padding: 8px; border-radius: 10px; - background: rgba(15, 23, 42, 0.65); + background: rgba(255, 255, 255, 0.94); + border: 1px solid #cbd5e1; + box-shadow: 0 10px 28px rgba(15, 23, 42, 0.1); backdrop-filter: blur(6px); z-index: 3; } @@ -260,10 +264,10 @@ a { .participant-drag-handle { width: 24px; height: 24px; - border: 0; + border: 1px solid #cbd5e1; border-radius: 6px; - background: rgba(255, 255, 255, 0.2); - color: #f8fafc; + background: rgba(255, 255, 255, 0.96); + color: #334155; font-size: 14px; font-weight: 700; line-height: 1; @@ -276,11 +280,11 @@ a { } .participant-row.drag-over-before { - box-shadow: inset 0 2px 0 rgba(248, 250, 252, 0.8); + box-shadow: inset 0 2px 0 rgba(59, 130, 246, 0.9); } .participant-row.drag-over-after { - box-shadow: inset 0 -2px 0 rgba(248, 250, 252, 0.8); + box-shadow: inset 0 -2px 0 rgba(59, 130, 246, 0.9); } .participant-row.is-dragging { @@ -346,9 +350,10 @@ a { width: min(100%, 720px); padding: 6px 10px; border-radius: 10px; - background: rgba(0, 0, 0, 0.45); - color: #f8fafc; - text-shadow: 0 1px 2px rgba(0, 0, 0, 0.85); + background: rgba(248, 250, 252, 0.96); + color: #334155; + border: 1px solid #cbd5e1; + text-shadow: none; z-index: 2; text-align: center; font-size: clamp(12px, 1.8vmin, 14px);