190 lines
6.9 KiB
CSS
190 lines
6.9 KiB
CSS
/* comments.css — Isso × PaperMod tidy layout (no JS hacks) */
|
||
#isso-thread{
|
||
/* light theme */
|
||
--bg: #fff;
|
||
--card: #fff;
|
||
--text: #1f2937;
|
||
--muted: #6b7280;
|
||
--border: rgba(0,0,0,.14);
|
||
--hover: rgba(0,0,0,.045);
|
||
--shadow: 0 1px 2px rgba(0,0,0,.06), 0 8px 24px rgba(0,0,0,.08);
|
||
--accent: #2563eb;
|
||
--accent-weak: #dbeafe;
|
||
color: var(--text);
|
||
}
|
||
html.dark #isso-thread,
|
||
body.dark #isso-thread,
|
||
html[data-theme="dark"] #isso-thread{
|
||
--bg:#0b1220; --card:#0f1525; --text:#e5e7eb; --muted:#a1a1aa;
|
||
--border: rgba(255,255,255,.16);
|
||
--hover: rgba(255,255,255,.06);
|
||
--shadow: 0 1px 2px rgba(0,0,0,.35), 0 8px 24px rgba(0,0,0,.28);
|
||
--accent:#60a5fa; --accent-weak: rgba(96,165,250,.15);
|
||
}
|
||
#isso-thread a{ color:var(--accent); }
|
||
|
||
/* Cards: composer / preview / comments */
|
||
#isso-thread .isso-postbox,
|
||
#isso-thread .isso-comment,
|
||
#isso-thread .isso-preview{
|
||
background: var(--card);
|
||
border: 1px solid var(--border);
|
||
border-radius: 14px;
|
||
box-shadow: var(--shadow);
|
||
padding: 1rem;
|
||
}
|
||
#isso-thread .isso-comment{ margin-top: 1rem; }
|
||
|
||
/* Composer layout: fields left, buttons right */
|
||
#isso-thread .isso-postbox > form{
|
||
display:grid;
|
||
grid-template-columns: minmax(0,1fr) max-content;
|
||
column-gap: 1rem;
|
||
align-items:start;
|
||
}
|
||
|
||
/* Inputs */
|
||
#isso-thread .isso-postbox .isso-auth-section,
|
||
#isso-thread .isso-postbox .auth-section{
|
||
display:flex; flex-direction:column; gap:.6rem;
|
||
}
|
||
#isso-thread .isso-postbox textarea,
|
||
#isso-thread .isso-postbox input[type="text"],
|
||
#isso-thread .isso-postbox input[type="email"],
|
||
#isso-thread .isso-postbox input[type="url"],
|
||
#isso-thread .isso-postbox input[name="author"],
|
||
#isso-thread .isso-postbox input[name="email"],
|
||
#isso-thread .isso-postbox input[name="website"]{
|
||
width:100%; max-width:none; box-sizing:border-box;
|
||
margin-top:.5rem; background:transparent; color:var(--text);
|
||
border:1px solid var(--border); border-radius:10px;
|
||
padding:.75rem .9rem; font:inherit; line-height:1.4; outline:none;
|
||
}
|
||
#isso-thread .isso-postbox textarea{ min-height:140px; resize:vertical; }
|
||
#isso-thread .isso-postbox input:focus,
|
||
#isso-thread .isso-postbox textarea:focus{
|
||
border-color:var(--accent);
|
||
box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent);
|
||
}
|
||
|
||
/* Action rail (native Isso) — keep visible & tidy */
|
||
#isso-thread .isso-postbox .isso-post-action,
|
||
#isso-thread .isso-postbox .post-action{
|
||
grid-column:2; grid-row:1 / -1;
|
||
display:flex; gap:.6rem; justify-content:flex-end; align-items:center;
|
||
min-width:max-content; flex-wrap:nowrap;
|
||
}
|
||
#isso-thread .isso-postbox .isso-post-action > *,
|
||
#isso-thread .isso-postbox .post-action > *{
|
||
flex:0 0 auto; white-space:nowrap;
|
||
}
|
||
|
||
/* Buttons look */
|
||
#isso-thread .isso-postbox .isso-post-action input[type="submit"],
|
||
#isso-thread .isso-postbox .post-action input[type="submit"],
|
||
#isso-thread .isso-postbox .isso-post-action input.submit,
|
||
#isso-thread .isso-postbox .post-action input.submit{
|
||
background:var(--accent); color:#fff; border:0;
|
||
padding:.6rem 1rem; border-radius:10px; font-weight:600; line-height:1;
|
||
cursor:pointer;
|
||
}
|
||
#isso-thread .isso-postbox .isso-post-action input[name="preview"],
|
||
#isso-thread .isso-postbox .post-action input[name="preview"],
|
||
#isso-thread .isso-postbox .isso-post-action input[type="button"],
|
||
#isso-thread .isso-postbox .post-action input[type="button"]{
|
||
background:transparent; color:var(--accent);
|
||
border:1px solid var(--accent);
|
||
padding:.6rem 1rem; border-radius:10px; font-weight:600; line-height:1;
|
||
cursor:pointer;
|
||
}
|
||
|
||
/* Mobile: stack the rail under fields */
|
||
@media (max-width:700px){
|
||
#isso-thread .isso-postbox>form{ grid-template-columns:1fr; }
|
||
#isso-thread .isso-postbox .isso-post-action,
|
||
#isso-thread .isso-postbox .post-action{
|
||
grid-column:1; grid-row:auto; justify-content:flex-end; flex-wrap:wrap; margin-top:.7rem;
|
||
}
|
||
}
|
||
|
||
/* Comment body */
|
||
#isso-thread .isso-comment .isso-meta{
|
||
display:flex; gap:.5rem; flex-wrap:wrap; align-items:baseline;
|
||
color:var(--muted); font-size:.92rem; margin-bottom:.35rem;
|
||
}
|
||
#isso-thread .isso-comment .isso-author{ color:var(--text); font-weight:600; }
|
||
#isso-thread .isso-comment .isso-text,
|
||
#isso-thread .isso-comment .text{ line-height:1.65; }
|
||
#isso-thread .isso-comment .isso-text a,
|
||
#isso-thread .isso-comment .text a{ color:var(--accent); text-decoration:underline; }
|
||
#isso-thread .isso-comment blockquote{
|
||
margin:.5rem 0; padding:.5rem .75rem; border-left:3px solid var(--accent);
|
||
background:var(--hover); border-radius:8px;
|
||
}
|
||
#isso-thread .isso-comment pre{
|
||
background:var(--hover); border-radius:10px; padding:.6rem .75rem; overflow:auto;
|
||
}
|
||
#isso-thread .isso-avatar img,
|
||
#isso-thread .isso-avatar svg,
|
||
#isso-thread .isso-avatar canvas{ width:28px; height:28px; border-radius:999px; }
|
||
|
||
/* Per-comment actions */
|
||
#isso-thread .isso-comment .isso-actions,
|
||
#isso-thread .isso-comment .actions,
|
||
#isso-thread .isso-comment .footer{
|
||
display:flex; align-items:center; flex-wrap:wrap; gap:.5rem; margin-top:.5rem;
|
||
}
|
||
#isso-thread .isso-comment .isso-actions a,
|
||
#isso-thread .isso-comment .actions a,
|
||
#isso-thread .isso-comment .footer a,
|
||
#isso-thread .isso-comment a.reply,
|
||
#isso-thread .isso-comment a.edit,
|
||
#isso-thread .isso-comment a.delete,
|
||
#isso-thread .isso-comment .isso-actions button,
|
||
#isso-thread .isso-comment .actions button,
|
||
#isso-thread .isso-comment .footer button,
|
||
#isso-thread .isso-comment .isso-actions input,
|
||
#isso-thread .isso-comment .actions input,
|
||
#isso-thread .isso-comment .footer input{
|
||
appearance:none; background:transparent; color:var(--accent);
|
||
border:1px solid var(--accent); border-radius:10px;
|
||
padding:.35rem .6rem; text-decoration:none; line-height:1; font:inherit; cursor:pointer;
|
||
}
|
||
#isso-thread .isso-comment .isso-actions a:hover,
|
||
#isso-thread .isso-comment .actions a:hover,
|
||
#isso-thread .isso-comment .footer a:hover,
|
||
#isso-thread .isso-comment .isso-actions button:hover,
|
||
#isso-thread .isso-comment .actions button:hover,
|
||
#isso-thread .isso-comment .footer button:hover{
|
||
background:var(--accent-weak);
|
||
}
|
||
|
||
/* Preview: never blank the UI */
|
||
#isso-thread .isso-preview{ /* default hidden until Isso shows it */
|
||
display:none;
|
||
padding:1rem;
|
||
border:1px solid var(--border);
|
||
border-radius:14px;
|
||
box-shadow:var(--shadow);
|
||
overflow:hidden;
|
||
}
|
||
/* Show preview when Isso toggles it (inline style) or if some build uses a class */
|
||
#isso-thread .isso-preview[style*="block"],
|
||
#isso-thread .isso-postbox.is-previewing .isso-preview{
|
||
display:block;
|
||
}
|
||
/* Don’t double-style the fake comment inside the preview */
|
||
#isso-thread .isso-preview > .isso-comment{
|
||
background:transparent; border:0; box-shadow:none; padding:0; margin:0;
|
||
}
|
||
|
||
/* Replies indentation */
|
||
#isso-thread .isso-follow-up{ margin-left:2.25rem; }
|
||
@media (max-width:520px){ #isso-thread .isso-follow-up{ margin-left:1rem; } }
|
||
|
||
/* Small spacing tweaks from your set */
|
||
#isso-thread .isso-delete {margin-left:5px;}
|
||
#isso-thread .isso-permalink {margin-left:5px; margin-right:5px;}
|
||
#isso-thread .isso-note {margin-left:auto; margin-right:5px;}
|
||
#isso-thread .post-meta-item {margin-left:15px;}
|
||
|