git / moonbite-network / templates/partials/forum_style.html · raw
<style nonce="{{ csp_nonce }}"> /* Forum (index + thread): composes the ds- kit. Layout after Discourse's topic list and Reddit's right rail; composer after Circle. Tokens only. */ /* the legacy layer underlines unclassed links; tabs and panel links don't want it */ body.mbs-page .ds .fx-tabs a, body.mbs-page .ds .fx-panel a, body.mbs-page .ds .fx-meta a { text-decoration: none; } .fx-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 48px; align-items: start; } .fx-side { position: sticky; top: 96px; display: flex; flex-direction: column; gap: 16px; } .fx-panel { border: 1px solid var(--ds-line); background: var(--ds-slate); border-radius: 10px; padding: 24px; } .fx-panel h2 { margin: 0 0 16px; font: 400 12px/1.4 var(--ds-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ds-ash); } .fx-panel p { margin: 0; font-size: 14px; color: var(--ds-ash); } .fx-panel a:not(.ds-btn) { color: var(--ds-bone); border-bottom: 1px solid var(--ds-line-2); } .fx-panel a:not(.ds-btn):hover { border-color: var(--ds-bone); } .fx-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 0; } .fx-stats div { display: flex; flex-direction: column; gap: 2px; } .fx-stats dt { font-size: 12px; color: var(--ds-ash); order: 2; } .fx-stats dd { margin: 0; font: 400 24px/1.1 var(--ds-mono); font-variant-numeric: tabular-nums; color: var(--ds-bone); order: 1; } .fx-rules { list-style: none; margin: 0; padding: 0; counter-reset: fx-rule; display: flex; flex-direction: column; gap: 12px; } .fx-rules li { counter-increment: fx-rule; display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 8px; font-size: 14px; color: var(--ds-ash); } .fx-rules li::before { content: counter(fx-rule); font-family: var(--ds-mono); font-size: 12px; color: var(--ds-ash); padding-top: 2px; } .fx-rules b { color: var(--ds-bone); font-weight: 600; } .fx-links { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; font-size: 14px; } /* avatars: four neutral tones, hashed from the name */ .fx-av { width: 32px; height: 32px; flex: none; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font: 700 11px/1 var(--ds-mono); letter-spacing: .02em; border: 1px solid transparent; user-select: none; } .fx-av.lg { width: 40px; height: 40px; font-size: 13px; } .fx-av.t0 { background: var(--ds-raise); color: var(--ds-bone); border-color: var(--ds-line-2); } .fx-av.t1 { background: var(--ds-bone); color: var(--ds-void); } .fx-av.t2 { background: var(--ds-void); color: var(--ds-bone); border-color: var(--ds-line-2); } .fx-av.t3 { background: var(--ds-ash); color: var(--ds-void); } .fx-av.off { background: var(--ds-gold); } .fx-verified { display: inline-flex; align-items: center; gap: 4px; font: 600 12px var(--ds-sans); color: var(--ds-gold); white-space: nowrap; } .fx-auto { font: 400 11px var(--ds-mono); padding: 1px 6px; border-radius: 4px; border: 1px solid var(--ds-line-2); color: var(--ds-ash); white-space: nowrap; } .fx-stack { display: inline-flex; align-items: center; } .fx-stack .fx-av { width: 28px; height: 28px; font-size: 10px; box-shadow: 0 0 0 2px var(--ds-void); } .fx-stack .fx-av + .fx-av { margin-left: -8px; } .fx-stack .more { margin-left: 6px; font: 400 12px var(--ds-mono); color: var(--ds-ash); } .fx-cat { display: inline-flex; align-items: center; gap: 6px; font: 400 12px/1.4 var(--ds-mono); color: var(--ds-ash); white-space: nowrap; } .fx-cat::before { content: ""; width: 6px; height: 6px; border-radius: 2px; background: var(--ds-ash); } .fx-cat.c-mining::before { background: var(--ds-gold); } .fx-cat.c-wallets::before { background: var(--ds-bone); } .fx-cat.c-nodes::before { background: transparent; border: 1px solid var(--ds-bone); } .fx-cat.c-ideas::before { border-radius: 50%; background: var(--ds-bone); } a.fx-cat:hover { color: var(--ds-bone); } .fx-alert { margin-bottom: 24px; padding: 16px 20px; border-radius: 10px; border: 1px solid rgba(200, 64, 47, .5); background: rgba(200, 64, 47, .08); color: var(--ds-bone); font-size: 15px; display: flex; gap: 12px; align-items: center; } .fx-alert::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--ds-loss); flex: none; } /* composer (shared by new thread + reply) */ .fx-form { display: grid; gap: 16px; } .fx-form .row2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; } .fx-form textarea.ds-input { min-height: 168px; resize: vertical; line-height: 1.6; } .fx-form select.ds-input { appearance: none; -webkit-appearance: none; padding-right: 40px; cursor: pointer; background: var(--ds-ink) no-repeat right 16px center / 12px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 4l4 4 4-4' fill='none' stroke='%238A8580' stroke-width='1.6'/%3E%3C/svg%3E"); } .fx-form .foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; } .fx-form .hint { font-size: 13px; color: var(--ds-ash); } .fx-form .hint code { font-size: 12px; padding: 1px 6px; border-radius: 4px; background: var(--ds-raise); } .fx-form .count { font: 400 12px var(--ds-mono); color: var(--ds-ash); } .fx-form .count.low { color: var(--ds-gold); } .fx-hp { position: absolute !important; left: -10000px; width: 1px; height: 1px; overflow: hidden; } .fx-kbd { font: 400 11px var(--ds-mono); padding: 2px 6px; border: 1px solid var(--ds-line-2); border-radius: 4px; color: var(--ds-ash); } /* rendered post bodies */ .fx-body { color: var(--ds-bone); font-size: 16px; line-height: 1.7; overflow-wrap: anywhere; } body.mbs-page .fx-body > * { margin: 0; } body.mbs-page .fx-body > * + * { margin-top: 14px; } .fx-body blockquote { margin: 0; padding: 12px 16px; border-left: 2px solid var(--ds-line-2); background: var(--ds-ink); border-radius: 0 6px 6px 0; color: var(--ds-ash); font-size: 15px; } .fx-body code { font-family: var(--ds-mono); font-size: .88em; padding: 2px 6px; border-radius: 4px; background: var(--ds-raise); } .fx-body a { color: var(--ds-bone); text-decoration: underline; text-decoration-color: var(--ds-line-2); text-underline-offset: 3px; } .fx-body a:hover { text-decoration-color: var(--ds-bone); } /* emoji (forum only; Twemoji artwork, self-hosted) */ .fx-emoji { display: inline-block; width: 1.3em; height: 1.3em; vertical-align: -.3em; margin: 0 .05em; } .fx-jumbo .fx-emoji { width: 2.6em; height: 2.6em; vertical-align: middle; margin: 0 .1em 0 0; } .fx-emoji-btn { padding: 4px 8px; min-height: 32px; vertical-align: middle; margin-right: 4px; } .fx-picker { position: absolute; z-index: 40; width: min(344px, calc(100vw - 32px)); max-height: 360px; display: flex; flex-direction: column; border: 1px solid var(--ds-line-2); border-radius: 10px; background: var(--ds-slate); box-shadow: 0 16px 48px rgba(0, 0, 0, .5); overflow: hidden; } .fx-picker[hidden] { display: none; } .fx-picker .ds-input { min-height: 40px; margin: 10px; width: calc(100% - 20px); } .fx-picker .grid { overflow-y: auto; padding: 0 10px 10px; } .fx-picker h3 { margin: 10px 2px 6px; font: 400 11px var(--ds-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ds-ash); } .fx-picker .row { display: grid; grid-template-columns: repeat(8, 1fr); gap: 2px; } .fx-picker button { aspect-ratio: 1; display: flex; align-items: center; justify-content: center; border: 0; border-radius: 6px; background: transparent; cursor: pointer; padding: 5px; } .fx-picker button:hover, .fx-picker button:focus-visible { background: rgba(245, 242, 234, .1); } .fx-picker button img { width: 100%; height: 100%; } .fx-picker .foot { border-top: 1px solid var(--ds-line); padding: 8px 12px; font: 400 12px var(--ds-mono); color: var(--ds-ash); min-height: 34px; } .fx-picker .none { color: var(--ds-ash); font-size: 14px; padding: 12px 2px; } .fx-credit { margin-top: 16px !important; font-size: 12px !important; } /* moderation */ .fx-asoff { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--ds-ash); cursor: pointer; } .fx-asoff b { color: var(--ds-gold); } .fx-asoff input { width: 18px; height: 18px; accent-color: var(--ds-gold); } .fx-modf { display: inline; margin: 0; } .fx-mod-btn { color: var(--ds-gold); } .fx-mod-btn.danger { color: var(--ds-loss); } .fx-pin { font: 400 11px var(--ds-mono); padding: 1px 6px; border-radius: 4px; background: var(--ds-gold); color: var(--ds-void); } .fx-lockbar { display: flex; align-items: center; gap: 10px; margin-top: 24px; padding: 14px 18px; border-radius: 10px; border: 1px solid var(--ds-line-2); background: var(--ds-ink); color: var(--ds-ash); font-size: 15px; } .fx-removed { color: var(--ds-ash); font-style: italic; font-size: 14px; } .fx-modbar { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin-top: 8px; padding: 6px 8px; border-radius: 8px; border: 1px dashed rgba(217, 164, 65, .4); } .fx-modbar .lbl { font: 400 11px var(--ds-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ds-gold); margin-right: 6px; } .fx-reportbox { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 8px; padding: 10px; border-radius: 8px; background: var(--ds-ink); border: 1px solid var(--ds-line-2); font-size: 13px; color: var(--ds-ash); } .fx-reportbox button { border: 1px solid var(--ds-line-2); background: transparent; color: var(--ds-bone); border-radius: 999px; padding: 4px 12px; min-height: 32px; font: 400 13px var(--ds-sans); cursor: pointer; } .fx-reportbox button:hover { border-color: var(--ds-bone); } /* votes (after Reddit): column on posts, row on comments */ .fx-vote { display: inline-flex; align-items: center; gap: 2px; border-radius: 999px; position: relative; z-index: 1; } .fx-vote.col { flex-direction: column; gap: 4px; border-radius: 10px; padding: 4px 0; } .fx-vote.row { background: rgba(245, 242, 234, .04); } .fx-vote button { width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 999px; background: transparent; color: var(--ds-ash); cursor: pointer; transition: color var(--ds-t1) var(--ds-ease), background var(--ds-t1) var(--ds-ease), transform var(--ds-t1) var(--ds-ease); } .fx-vote.row button { width: 32px; height: 32px; } .fx-vote button:hover { background: rgba(245, 242, 234, .08); color: var(--ds-bone); } .fx-vote button:active { transform: scale(.88); } .fx-vote .sc { min-width: 24px; text-align: center; font: 700 13px var(--ds-mono); font-variant-numeric: tabular-nums; color: var(--ds-bone); } .fx-vote .up[aria-pressed="true"] { color: var(--ds-gold); } .fx-vote .up[aria-pressed="true"] svg path { fill: currentColor; } .fx-vote .dn[aria-pressed="true"] { color: var(--ds-bone); background: rgba(245, 242, 234, .1); } .fx-vote .dn[aria-pressed="true"] svg path { fill: currentColor; } .fx-vote.v1 .sc { color: var(--ds-gold); } .fx-vote.busy { opacity: .7; } .fx-act-btn { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 6px 12px; border-radius: 999px; border: 0; background: transparent; color: var(--ds-ash); font: 600 13px var(--ds-sans); cursor: pointer; position: relative; z-index: 1; transition: color var(--ds-t1) var(--ds-ease), background var(--ds-t1) var(--ds-ease); } .fx-act-btn:hover { color: var(--ds-bone); background: rgba(245, 242, 234, .06); } .fx-act-btn.pill { background: rgba(245, 242, 234, .04); } .fx-toast { position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 16px); opacity: 0; pointer-events: none; z-index: 50; padding: 10px 16px; border-radius: 999px; background: var(--ds-bone); color: var(--ds-void); font: 600 14px var(--ds-sans); transition: opacity var(--ds-t2) var(--ds-ease), transform var(--ds-t2) var(--ds-ease); } .fx-toast.on { opacity: 1; transform: translate(-50%, 0); } @media (max-width: 1023px) { .fx-layout { grid-template-columns: minmax(0, 1fr); gap: 32px; } .fx-side { position: static; } } @media (max-width: 767px) { .fx-form .row2 { grid-template-columns: minmax(0, 1fr); } }</style>