lagrange-library 0.2.3

A WASI-rendered Markdown static site facility — multilingual out of the box
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47

/* lagrange-comments component styles — editable source.
 *
 * The JS runtime injects an inlined copy of these rules into <head>
 * (idempotently, id `lagrange-comments-css`) so a single <script> tag ships
 * the whole component. This file is the human-editable source and the
 * override surface: a site can ship its own /assets/lagrange-comments.css
 * with higher specificity to restyle.
 *
 * All selectors scope under .lg-comments / .lg-c-* to avoid colliding with
 * the hikari-driven article theme (theme.rs).
 */

.lg-comments { margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid var(--border, #e2e2ea); font-size: .92rem; color: var(--fg, inherit); }
.lg-comments * { box-sizing: border-box; }
.lg-c-head-bar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1rem; gap: .5rem; flex-wrap: wrap; }
.lg-c-count { font-weight: 600; }
.lg-c-auth { display: flex; gap: .4rem; align-items: center; }
.lg-c-btn { padding: .35rem .7rem; border: 1px solid var(--border, #e2e2ea); border-radius: var(--radius, 6px); background: var(--bg, inherit); color: var(--fg, inherit); cursor: pointer; font-size: .82rem; transition: all .15s; }
.lg-c-btn:hover { border-color: var(--accent, #3a6ea5); }
.lg-c-btn:disabled { opacity: .5; cursor: default; }
.lg-c-btn.primary { background: var(--accent, #3a6ea5); color: #fff; border-color: var(--accent, #3a6ea5); }
.lg-c-list { display: flex; flex-direction: column; gap: .75rem; }
.lg-c-item { padding: .75rem .9rem; background: var(--bg-subtle, #f7f7fa); border: 1px solid var(--border, #e2e2ea); border-radius: var(--radius, 6px); }
.lg-c-item.reply { margin-left: 1.75rem; border-left: 3px solid var(--accent, #3a6ea5); }
.lg-c-row { display: flex; align-items: center; gap: .5rem; margin-bottom: .4rem; font-size: .82rem; flex-wrap: wrap; }
.lg-c-avatar { width: 1.5rem; height: 1.5rem; border-radius: 50%; object-fit: cover; }
.lg-c-name { font-weight: 600; }
.lg-c-anon { color: var(--fg-sec, #5a5a6a); font-style: italic; }
.lg-c-time { color: var(--fg-sec, #5a5a6a); font-size: .75rem; }
.lg-c-mod { font-size: .65rem; background: var(--accent, #3a6ea5); color: #fff; padding: .05rem .3rem; border-radius: 3px; text-transform: uppercase; }
.lg-c-body p { margin: .3rem 0; line-height: 1.55; }
.lg-c-body code { font-family: monospace; font-size: .88em; background: var(--code-bg, #f2f2f5); padding: .1em .35em; border-radius: 3px; }
.lg-c-actions { display: flex; gap: .3rem; margin-top: .4rem; font-size: .75rem; }
.lg-c-actions button { background: none; border: none; color: var(--fg-sec, #5a5a6a); cursor: pointer; padding: 0; font-size: .75rem; text-decoration: underline; }
.lg-c-actions button:hover { color: var(--accent, #3a6ea5); }
.lg-c-vote { display: flex; align-items: center; gap: .15rem; color: var(--fg-sec, #5a5a6a); }
.lg-c-compose { margin: 1rem 0; padding: .75rem; border: 1px solid var(--border, #e2e2ea); border-radius: var(--radius, 6px); background: var(--bg, inherit); }
.lg-c-compose textarea { width: 100%; min-height: 80px; padding: .5rem; border: 1px solid var(--border, #e2e2ea); border-radius: var(--radius, 6px); font-family: inherit; font-size: .9rem; background: var(--bg, inherit); color: var(--fg, inherit); resize: vertical; }
.lg-c-compose textarea:focus { outline: none; border-color: var(--accent, #3a6ea5); }
.lg-c-compose-row { display: flex; justify-content: space-between; align-items: center; margin-top: .4rem; gap: .5rem; }
.lg-c-hint { font-size: .72rem; color: var(--fg-sec, #5a5a6a); }
.lg-c-login { display: flex; gap: .4rem; flex-wrap: wrap; align-items: end; }
.lg-c-login input { padding: .35rem .5rem; border: 1px solid var(--border, #e2e2ea); border-radius: var(--radius, 6px); font-size: .82rem; background: var(--bg, inherit); color: var(--fg, inherit); }
.lg-c-note, .lg-c-empty { color: var(--fg-sec, #5a5a6a); font-style: italic; padding: .5rem 0; }
.lg-c-error { color: #c0392b; font-style: normal; }
.lg-c-spinner { display: inline-block; width: 14px; height: 14px; border: 2px solid var(--border, #e2e2ea); border-top-color: var(--accent, #3a6ea5); border-radius: 50%; animation: lgspin .6s linear infinite; }
@keyframes lgspin { to { transform: rotate(360deg); } }