amadan

eleven / ocho Public

web: remove ~200 lines of dead CSS left from the single-group rewrite

Drops rules with zero references in the current HTML/JS: the old .chat layout +
.native-embed shell, the loading spinner / .feed-wrap, .lightbox-close, the
file-chip / preview-chip attachment families, .bubble-row, .msg-image-wrap,
.reply-count, .modal-backdrop, the orphaned #banner pill (replaced by
.conn-status), .menu-who, .header-actions, .notif, and .jumbo-emoji. Kept rules
that are now live again (.msg.cont, .drop-overlay). Verified: every dead selector
gone, all live selectors present, braces balanced, page still renders.
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Paul Campbell 789055ed5c4a580de0f268e9eb95ac0c1e7c2a51 parent 7c0d81c
1 file changed, +1 −197
  • web/static/style.css +1 −197
diff --git a/web/static/style.css b/web/static/style.css
index 4f915da..c9c5858 100644
--- a/web/static/style.css
+++ b/web/static/style.css
@@ -80,56 +80,7 @@ input:focus, textarea:focus { outline: 2px solid var(--accent); border-color: tr
.card p { margin: 0 0 18px; color: var(--muted); }
.card .row { display: flex; gap: 10px; margin-top: 14px; }
-/* ---- chat ---- */
-.chat {
- display: flex;
- flex-direction: column;
- height: 100%;
- max-width: 720px;
- margin: 0 auto;
- background: var(--panel);
- border-left: 1px solid var(--border);
- border-right: 1px solid var(--border);
- position: relative; /* anchors the drag-and-drop overlay */
-}
-/* Native shell (iOS/macOS) embeds only the message feed — the app draws its own
- title bar and composer. Drop the centered max-width column + side borders so the
- feed is full width, and hide the web header/composer. Gated on body.native-embed,
- which only chat.js sets when window.__lchatEmbed is injected; browsers are
- unaffected. */
-.native-embed .chat {
- max-width: none;
- border-left: none;
- border-right: none;
-}
-.native-embed .chat header,
-.native-embed .composer,
-.native-embed .composer-reply,
-.native-embed .composer-edit {
- display: none;
-}
-/* Keep the attachment preview visible: it's how a staged photo/file shows up just
- above the native composer (drag-drop or the native + button stage into it). The
- composer below is hidden, so add the bottom padding the composer would have
- provided. */
-.native-embed .composer-preview { padding-bottom: 10px; }
-
-.chat header {
- padding: 14px 18px;
- border-bottom: 1px solid var(--border);
- display: flex;
- align-items: center;
- justify-content: space-between;
- background: var(--panel);
-}
-.chat header .title {
- font-weight: 700;
- font-size: 17px;
- overflow: hidden;
- text-overflow: ellipsis;
- white-space: nowrap;
- padding-right: 10px;
-}
+
/* kebab settings menu */
.icon-btn {
@@ -158,11 +109,6 @@ input:focus, textarea:focus { outline: 2px solid var(--accent); border-color: tr
padding: 6px;
z-index: 20;
}
-.menu-who {
- font-size: 12px;
- color: var(--muted);
- padding: 8px 12px 6px;
-}
.menu-item {
display: block;
width: 100%;
@@ -179,32 +125,6 @@ input:focus, textarea:focus { outline: 2px solid var(--accent); border-color: tr
.menu-item.disabled,
.menu-item.disabled:hover { color: var(--muted); cursor: default; background: transparent; }
-.feed-wrap {
- position: relative;
- flex: 1;
- display: flex;
- flex-direction: column;
- min-height: 0;
-}
-/* shown only if the initial history load/decrypt is slow (>500ms) */
-.chat-loading {
- position: absolute;
- inset: 0;
- z-index: 10;
- display: flex;
- align-items: center;
- justify-content: center;
- background: var(--panel);
-}
-.spinner {
- width: 28px;
- height: 28px;
- border-radius: 50%;
- border: 3px solid var(--border);
- border-top-color: var(--accent);
- animation: spin 0.8s linear infinite;
-}
-@keyframes spin { to { transform: rotate(360deg); } }
#feed {
flex: 1;
min-height: 0;
@@ -266,9 +186,6 @@ input:focus, textarea:focus { outline: 2px solid var(--accent); border-color: tr
.msg.me .bubble { background: var(--bubble-me); color: #fff; border-bottom-right-radius: 6px; }
.msg.them .bubble { border-bottom-left-radius: 6px; }
.msg .bubble a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
-/* a message of just a few emoji: large and bubble-less, no background or padding (see fillContent) */
-.msg .bubble.jumbo-emoji,
-.msg.me .bubble.jumbo-emoji { background: none; color: inherit; padding: 2px 0; font-size: 44px; line-height: 1.15; }
/* centered time separator that opens a burst (replaces per-message timestamps) */
.time-sep {
@@ -332,8 +249,6 @@ input:focus, textarea:focus { outline: 2px solid var(--accent); border-color: tr
}
.msg.me .content { align-items: flex-end; }
-/* inline attachments */
-.msg-image-wrap { max-width: 240px; }
.msg-image {
max-width: min(260px, 100%);
max-height: 320px;
@@ -375,21 +290,6 @@ input:focus, textarea:focus { outline: 2px solid var(--accent); border-color: tr
.lightbox img,
.msg.appear { animation: none; }
}
-.lightbox-close {
- position: fixed;
- top: 14px;
- right: 16px;
- width: 40px;
- height: 40px;
- padding: 0;
- border-radius: 50%;
- background: rgba(255, 255, 255, 0.16);
- color: #fff;
- display: inline-flex;
- align-items: center;
- justify-content: center;
-}
-.lightbox-close svg { width: 20px; height: 20px; }
/* drag-and-drop overlay */
.drop-overlay {
@@ -407,20 +307,6 @@ input:focus, textarea:focus { outline: 2px solid var(--accent); border-color: tr
color: var(--accent);
pointer-events: none;
}
-.file-chip {
- display: inline-flex;
- align-items: center;
- gap: 6px;
- background: var(--bubble-them);
- color: var(--ink);
- padding: 10px 14px;
- border-radius: var(--radius);
- text-decoration: none;
- font-size: 14px;
- max-width: 260px;
- word-break: break-word;
-}
-.msg.me .file-chip { background: var(--bubble-me); color: #fff; }
/* link (OpenGraph) preview card */
.link-preview {
@@ -457,46 +343,7 @@ input:focus, textarea:focus { outline: 2px solid var(--accent); border-color: tr
border-radius: 50%; background: rgba(0, 0, 0, 0.6); color: #fff; font-size: 16px; line-height: 1;
display: inline-flex; align-items: center; justify-content: center;
}
-.preview-chip {
- position: relative;
- display: inline-flex;
- align-items: center;
- gap: 8px;
- background: var(--bubble-them);
- border-radius: 12px;
- padding: 6px 34px 6px 8px;
- max-width: 100%;
-}
-.preview-chip img { width: 40px; height: 40px; object-fit: cover; border-radius: 8px; }
-.preview-file { font-size: 24px; }
-.preview-name {
- font-size: 13px;
- color: var(--ink);
- overflow: hidden;
- text-overflow: ellipsis;
- white-space: nowrap;
- max-width: 220px;
-}
-.preview-remove {
- position: absolute;
- right: 6px;
- top: 50%;
- transform: translateY(-50%);
- background: var(--ink);
- color: #fff;
- width: 22px;
- height: 22px;
- padding: 0;
- border-radius: 50%;
- display: inline-flex;
- align-items: center;
- justify-content: center;
-}
-.preview-remove svg { width: 13px; height: 13px; }
-/* reactions */
-.bubble-row { display: flex; align-items: center; gap: 6px; max-width: 100%; min-width: 0; }
-.msg.me .bubble-row { flex-direction: row-reverse; }
/* Text selection works everywhere now: desktop reacts with a stationary hold
(drag-select cancels it) and touch reacts with a double-tap, so long-press is
free for native selection/copy on mobile. */
@@ -574,14 +421,6 @@ input:focus, textarea:focus { outline: 2px solid var(--accent); border-color: tr
white-space: nowrap;
}
.msg.me .reply-quote-text { margin-left: auto; }
-.reply-count {
- font-size: 11px;
- font-weight: 600;
- color: var(--accent);
- margin: 3px 6px 0;
- cursor: pointer;
-}
-.reply-count[hidden] { display: none; }
/* flash a message when you jump to it from a quote */
.msg.flash { animation: flash-msg 1.2s ease; border-radius: var(--radius); }
@keyframes flash-msg {
@@ -714,13 +553,6 @@ input:focus, textarea:focus { outline: 2px solid var(--accent); border-color: tr
line-height: 1;
}
-.modal-backdrop {
- position: fixed;
- inset: 0;
- z-index: 50;
- background: rgba(20, 30, 80, 0.45);
- overflow: auto;
-}
/* invite QR (admin) — full-screen opaque takeover so nothing else is on screen */
.qr-screen {
@@ -770,24 +602,6 @@ input:focus, textarea:focus { outline: 2px solid var(--accent); border-color: tr
}
.banner.warn { color: #b4530a; }
-/* connection status as a floating pill so it never reflows the message list */
-#banner {
- position: absolute;
- top: 8px;
- left: 50%;
- transform: translateX(-50%);
- z-index: 6;
- padding: 5px 14px;
- border-radius: 999px;
- background: var(--ink);
- color: #fff;
- font-size: 12px;
- font-weight: 600;
- box-shadow: 0 6px 20px rgba(20, 30, 80, 0.18);
- pointer-events: none;
- white-space: nowrap;
-}
-#banner.warn { background: #b4530a; color: #fff; }
/* ---- admin ---- */
.admin { max-width: 760px; margin: 0 auto; padding: 24px; }
@@ -812,7 +626,6 @@ input:focus, textarea:focus { outline: 2px solid var(--accent); border-color: tr
.invite .meta { flex: 1; min-width: 0; }
.invite .meta .label { font-weight: 600; }
.invite .meta .status { font-size: 12px; color: var(--muted); }
-.invite .status.revoked { color: #c2410c; }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; }
.key-box {
background: var(--bubble-them);
@@ -830,15 +643,6 @@ input:focus, textarea:focus { outline: 2px solid var(--accent); border-color: tr
}
.toast.show { opacity: 1; }
-.header-actions { display: flex; gap: 8px; align-items: center; }
-.notif {
- background: var(--bubble-them);
- color: var(--ink);
- font-size: 13px;
- font-weight: 600;
- padding: 7px 12px;
- white-space: nowrap;
-}
/* full-screen onboarding cards */
.card.onboard { text-align: center; }