diff options
Diffstat (limited to 'internal/web/static/dashboard.css')
| -rw-r--r-- | internal/web/static/dashboard.css | 342 |
1 files changed, 191 insertions, 151 deletions
diff --git a/internal/web/static/dashboard.css b/internal/web/static/dashboard.css index 8fe5f8a..b85d515 100644 --- a/internal/web/static/dashboard.css +++ b/internal/web/static/dashboard.css @@ -1,216 +1,256 @@ -/* Blogspace dashboard — "paper & ink": flat colours, 2px rules, hard shadows, - square corners. Plain CSS (no variables, no flex for layout) so it renders on - old browsers; works down to ~320px. */ +/* Blogspace dashboard — lean: neutral surfaces, 1px borders, one accent, system + sans. Flexbox/grid and custom properties are fine here (the public blog.css + stays float-based); works down to ~320px. */ +:root { + --bg: #f5f6f8; --surface: #fff; --surface-2: #f8f9fb; + --border: #e2e5ea; --border-strong: #c9ced6; + --text: #1f2328; --muted: #6b7280; + --accent: #2563eb; --accent-hover: #1d4ed8; --accent-soft: #eef3ff; --accent-ring: rgba(37, 99, 235, 0.25); + --danger: #dc2626; --danger-hover: #b91c1c; --danger-soft: #fef2f2; + --ok-bg: #ecfdf3; --ok-border: #a7e3bd; --ok-text: #14532d; + --err-bg: #fef2f2; --err-border: #f5b5b5; --err-text: #7f1d1d; + --radius: 8px; --radius-sm: 6px; + --shadow: 0 1px 2px rgba(16, 24, 40, 0.06), 0 1px 3px rgba(16, 24, 40, 0.04); + --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif; + --mono: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", "Courier New", monospace; +} * { box-sizing: border-box; } -html { background: #f4efe4; } -body { margin: 0; font-family: -apple-system, "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 16px; line-height: 1.5; color: #1d1a17; background: #f4efe4; } -a { color: #c8541a; } -a:hover { color: #a3420f; } -h1, h2, h3, .mono { font-family: "IBM Plex Mono", "SF Mono", Menlo, Consolas, "Liberation Mono", "Courier New", monospace; letter-spacing: -0.01em; } -h1 { font-size: 1.5em; margin: 0.2em 0 0.6em; line-height: 1.2; } -h2 { font-size: 1.05em; margin: 0 0 0.8em; text-transform: uppercase; letter-spacing: 0.06em; } -h3 { font-size: 0.95em; margin: 0 0 0.4em; text-transform: uppercase; letter-spacing: 0.06em; } -code { font-family: "IBM Plex Mono", "SF Mono", Menlo, Consolas, "Liberation Mono", "Courier New", monospace; background: #ebe5d6; padding: 0 0.3em; font-size: 0.92em; } +[hidden] { display: none !important; } +html { background: var(--bg); } +body { margin: 0; font-family: var(--font); font-size: 15px; line-height: 1.55; color: var(--text); background: var(--bg); -webkit-text-size-adjust: 100%; } +a { color: var(--accent); } +a:hover { color: var(--accent-hover); } +h1, h2, h3 { font-weight: 600; letter-spacing: -0.01em; line-height: 1.25; } +h1 { font-size: 1.5em; margin: 0 0 0.6em; } +h2 { font-size: 1.1em; margin: 0 0 0.8em; } +h3 { font-size: 0.95em; margin: 0 0 0.4em; } +code, .mono { font-family: var(--mono); } +code { background: var(--surface-2); border: 1px solid var(--border); border-radius: 4px; padding: 0 0.3em; font-size: 0.9em; } p { margin: 0.6em 0; } -.muted { color: #6b655c; } +.muted { color: var(--muted); } .nowrap { white-space: nowrap; } .narrow { max-width: 480px; } .center { margin-left: auto; margin-right: auto; } .small { font-size: 0.9em; } /* ---- bars ---------------------------------------------------------------- */ -.topbar { background: #1d1a17; color: #f4efe4; } -.topbar a { color: #f4efe4; text-decoration: none; } -.topbar-inner { max-width: 1100px; margin: 0 auto; padding: 0.55em 1em; overflow: hidden; } -.brand { font-family: "IBM Plex Mono", "SF Mono", Menlo, Consolas, "Liberation Mono", "Courier New", monospace; font-weight: bold; text-transform: uppercase; letter-spacing: 0.12em; margin-right: 1.2em; } -.who { color: #b8b0a3; font-size: 0.9em; } -.topbar .links { float: right; font-size: 0.9em; } -.topbar .links a, .topbar .links form { margin-left: 1.2em; } -.topbar .links a:hover, .topbar .links .linkbtn:hover { color: #f2a67c; } -.topbar .links a.active { border-bottom: 2px solid #f2a67c; } -.blogbar { background: #fffdf8; border-bottom: 2px solid #1d1a17; } -.blogbar .topbar-inner { padding: 0.5em 1em 0; } -.blogbar .blogname { display: inline-block; margin: 0 1em 0.5em 0; font-family: "IBM Plex Mono", "SF Mono", Menlo, Consolas, "Liberation Mono", "Courier New", monospace; } -.blogbar .tabs { display: inline-block; vertical-align: bottom; } -.blogbar .tabs a { display: inline-block; padding: 0.35em 0.8em; margin: 0 0.15em 0 0; text-decoration: none; color: #1d1a17; font-family: "IBM Plex Mono", "SF Mono", Menlo, Consolas, "Liberation Mono", "Courier New", monospace; font-size: 0.9em; border: 2px solid transparent; border-bottom: 0; } -.blogbar .tabs a:hover { border-color: #1d1a17; } -.blogbar .tabs a.active { background: #1d1a17; color: #f4efe4; border-color: #1d1a17; } -.blogbar .view { float: right; margin: 0 0 0.5em; padding: 0.25em 0.7em; border: 2px solid #1d1a17; color: #1d1a17; text-decoration: none; font-size: 0.85em; font-weight: bold; background: #fffdf8; } -.blogbar .view:hover { background: #1d1a17; color: #f4efe4; } +.topbar { background: var(--surface); border-bottom: 1px solid var(--border); } +.topbar a { color: var(--text); text-decoration: none; } +.topbar-inner { max-width: 1100px; margin: 0 auto; padding: 0.6em 1em; display: flex; align-items: center; flex-wrap: wrap; gap: 0.4em 1em; } +.brand { font-weight: 700; letter-spacing: -0.01em; } +.who { color: var(--muted); font-size: 0.9em; } +.topbar .links { margin-left: auto; font-size: 0.9em; display: flex; gap: 1.2em; align-items: center; } +.topbar .links a, .topbar .links .linkbtn { color: var(--muted); } +.topbar .links a:hover, .topbar .links .linkbtn:hover { color: var(--text); } +.topbar .links a.active { color: var(--text); font-weight: 600; } +.blogbar { background: var(--surface); border-bottom: 1px solid var(--border); } +.blogbar .topbar-inner { padding: 0.5em 1em 0; gap: 0 1.2em; } +.blogbar .blogname { font-weight: 600; padding-bottom: 0.55em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 20em; } +.blogbar .tabs { display: flex; gap: 0.2em; } +.blogbar .tabs a { display: inline-block; padding: 0.35em 0.7em 0.55em; text-decoration: none; color: var(--muted); font-size: 0.92em; font-weight: 500; border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; } +.blogbar .tabs a:hover { color: var(--text); } +.blogbar .tabs a.active { color: var(--accent); border-color: var(--accent); } +.blogbar .view { margin: 0 0 0.5em auto; padding: 0.3em 0.75em; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); color: var(--text); text-decoration: none; font-size: 0.85em; font-weight: 500; background: var(--surface); white-space: nowrap; } +.blogbar .view:hover { background: var(--surface-2); border-color: var(--muted); } /* ---- page ---------------------------------------------------------------- */ -.main { max-width: 1100px; margin: 0 auto; padding: 1.4em 1em 3em; } -.pagehead { overflow: hidden; margin-bottom: 0.8em; } -.pagehead h1 { float: left; margin: 0.1em 1em 0.3em 0; } -.pagehead .actions { float: right; margin-top: 0.1em; } -.pagehead .lead { clear: both; margin: 0; } -.card { background: #fffdf8; border: 2px solid #1d1a17; box-shadow: 4px 4px 0 #1d1a17; padding: 1.1em 1.3em; margin: 0 4px 1.6em 0; } +.main { max-width: 1100px; margin: 0 auto; padding: 1.5em 1em 3em; } +.pagehead { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4em 1em; margin-bottom: 1em; } +.pagehead h1 { margin: 0; flex: 1 1 auto; } +.pagehead .actions { margin-left: auto; } +.pagehead .lead { flex-basis: 100%; margin: 0; } +.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); padding: 1.25em 1.4em; margin: 0 0 1.4em; } .card > :last-child { margin-bottom: 0; } -.cols { overflow: hidden; } -.cols .card { float: left; width: 48.5%; margin-right: 3%; } -.cols .card + .card { margin-right: 4px; } -.flash { padding: 0.6em 1em; border: 2px solid #1d1a17; margin: 0 4px 1.2em 0; font-family: "IBM Plex Mono", "SF Mono", Menlo, Consolas, "Liberation Mono", "Courier New", monospace; font-size: 0.9em; } -.flash.ok { background: #e4f0dc; } -.flash.err { background: #f6dfd9; } -.tag { display: inline-block; font-family: "IBM Plex Mono", "SF Mono", Menlo, Consolas, "Liberation Mono", "Courier New", monospace; font-size: 0.7em; text-transform: uppercase; letter-spacing: 0.05em; border: 1px solid #1d1a17; color: #1d1a17; padding: 0 0.45em; margin-left: 0.5em; vertical-align: middle; line-height: 1.6; } -.tag.off { color: #6b655c; border-color: #b8b0a3; } +.cols { display: grid; grid-template-columns: 1fr 1fr; gap: 1.4em; margin-bottom: 1.4em; } +.cols .card { margin: 0; } +.flash { padding: 0.65em 1em; border: 1px solid; border-radius: var(--radius-sm); margin: 0 0 1.2em; font-size: 0.95em; } +.flash.ok { background: var(--ok-bg); border-color: var(--ok-border); color: var(--ok-text); } +.flash.err { background: var(--err-bg); border-color: var(--err-border); color: var(--err-text); } +.tag { display: inline-block; font-size: 0.7em; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; border-radius: 999px; background: var(--accent-soft); color: var(--accent-hover); padding: 0.1em 0.6em; margin-left: 0.5em; vertical-align: middle; line-height: 1.6; } +.tag.off { background: var(--surface-2); color: var(--muted); border: 1px solid var(--border); } /* ---- forms --------------------------------------------------------------- */ -label { display: block; margin: 0.8em 0; font-family: "IBM Plex Mono", "SF Mono", Menlo, Consolas, "Liberation Mono", "Courier New", monospace; font-size: 0.8em; text-transform: uppercase; letter-spacing: 0.05em; } -label .muted { text-transform: none; letter-spacing: 0; } -label code { text-transform: none; letter-spacing: 0; } -input[type=text], input[type=password], input[type=number], input[type=datetime-local], input:not([type]), input[type=file], select, textarea { - width: 100%; max-width: 100%; padding: 0.5em 0.6em; margin-top: 0.25em; border: 2px solid #1d1a17; font: inherit; font-family: -apple-system, "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 16px; text-transform: none; letter-spacing: 0; background: #fffdf8; color: #1d1a17; } -input:focus, select:focus, textarea:focus, button:focus, .btn:focus { outline: 2px solid #c8541a; outline-offset: 1px; } -input[type=color] { width: 4em; height: 2.3em; padding: 0.1em; margin-top: 0.25em; border: 2px solid #1d1a17; background: #fffdf8; } +label { display: block; margin: 0.9em 0; font-size: 0.875em; font-weight: 500; } +input[type=text], input[type=password], input[type=number], input[type=datetime-local], input[type=url], input[type=search], input:not([type]), input[type=file], select, textarea { + width: 100%; max-width: 100%; padding: 0.5em 0.65em; margin-top: 0.3em; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); font: inherit; font-size: 15px; font-weight: normal; background: var(--surface); color: var(--text); } +input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-ring); } +button:focus-visible, .btn:focus-visible, .tabs a:focus-visible, .view:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } +input[type=color] { width: 4em; height: 2.4em; padding: 0.15em; margin-top: 0.3em; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); background: var(--surface); } input[type=file] { padding: 0.35em; } -select { -webkit-appearance: none; appearance: none; padding-right: 1.8em; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%231d1a17' stroke-width='2'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 0.6em center; } -textarea { font-family: "IBM Plex Mono", "SF Mono", Menlo, Consolas, "Liberation Mono", "Courier New", monospace; font-size: 0.95em; line-height: 1.5; } -textarea.editor { min-height: 28em; } -label.check { text-transform: none; letter-spacing: 0; font-family: -apple-system, "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 1em; } -label.check input { width: auto; margin: 0 0.4em 0 0; vertical-align: middle; } -.row { overflow: hidden; } -.row label { float: left; margin-right: 1.5em; min-width: 12em; } -.row label:last-child { margin-right: 0; } -button, .btn { display: inline-block; font: inherit; font-family: "IBM Plex Mono", "SF Mono", Menlo, Consolas, "Liberation Mono", "Courier New", monospace; font-size: 0.9em; font-weight: bold; text-transform: uppercase; letter-spacing: 0.05em; padding: 0.5em 1.1em; border: 2px solid #1d1a17; background: #c8541a; color: #fffdf8; cursor: pointer; text-decoration: none; box-shadow: 3px 3px 0 #1d1a17; vertical-align: middle; } -button:hover, .btn:hover { background: #a3420f; color: #fffdf8; } -button:active, .btn:active { box-shadow: none; position: relative; top: 3px; left: 3px; } -.btn.secondary, button.secondary { background: #fffdf8; color: #1d1a17; } -.btn.secondary:hover, button.secondary:hover { background: #ebe5d6; color: #1d1a17; } -.btn.small { font-size: 0.75em; padding: 0.4em 0.9em; } -button.mini, .mini { font-size: 0.72em; padding: 0.15em 0.55em; background: #fffdf8; color: #1d1a17; border-width: 1px; box-shadow: none; font-weight: normal; } -button.mini:hover, .mini:hover { background: #1d1a17; color: #fffdf8; } -button.mini:active { top: 0; left: 0; } -button.danger { background: #a12b1e; } -button.danger:hover { background: #7d1f14; } -a.danger { color: #a12b1e; } -button.mini.danger { color: #a12b1e; border-color: #a12b1e; background: #fffdf8; } -button.mini.danger:hover { background: #a12b1e; color: #fffdf8; } -button.linkbtn { background: none; border: 0; padding: 0; color: inherit; font: inherit; cursor: pointer; text-decoration: none; box-shadow: none; text-transform: none; letter-spacing: 0; } -button.linkbtn:active { top: 0; left: 0; } +input[type=search] { -webkit-appearance: none; appearance: none; } +select { -webkit-appearance: none; appearance: none; padding-right: 1.9em; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%236b7280' stroke-width='1.8'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 0.7em center; } +textarea { font-family: var(--mono); font-size: 0.92em; line-height: 1.55; } +textarea.tall { min-height: 28em; } +label.check { font-weight: normal; font-size: 0.95em; } +label.check input { width: auto; margin: 0 0.45em 0 0; vertical-align: middle; accent-color: var(--accent); } +input[type=radio], input[type=checkbox] { accent-color: var(--accent); } +.row { display: flex; flex-wrap: wrap; gap: 0 1.5em; } +.row label { flex: 1 1 12em; min-width: 12em; } +button, .btn { display: inline-block; font: inherit; font-size: 0.9em; font-weight: 600; padding: 0.5em 1.05em; border: 1px solid var(--accent); border-radius: var(--radius-sm); background: var(--accent); color: #fff; cursor: pointer; text-decoration: none; vertical-align: middle; line-height: 1.4; } +button:hover, .btn:hover { background: var(--accent-hover); border-color: var(--accent-hover); color: #fff; } +.btn.secondary, button.secondary { background: var(--surface); color: var(--text); border-color: var(--border-strong); } +.btn.secondary:hover, button.secondary:hover { background: var(--surface-2); color: var(--text); border-color: var(--muted); } +.btn.small, button.small { font-size: 0.8em; padding: 0.4em 0.85em; } +button.mini, .mini { font-size: 0.75em; font-weight: 500; padding: 0.15em 0.55em; background: var(--surface); color: var(--text); border-color: var(--border-strong); } +button.mini:hover, .mini:hover { background: var(--surface-2); color: var(--text); border-color: var(--muted); } +button.danger { background: var(--danger); border-color: var(--danger); } +button.danger:hover { background: var(--danger-hover); border-color: var(--danger-hover); } +a.danger { color: var(--danger); } +button.mini.danger { color: var(--danger); border-color: var(--border-strong); background: var(--surface); } +button.mini.danger:hover { background: var(--danger-soft); border-color: var(--danger); } +button.linkbtn { background: none; border: 0; padding: 0; color: inherit; font: inherit; cursor: pointer; text-decoration: none; } form.inline, .inline { display: inline; } details.inline summary { display: inline; cursor: pointer; } -summary.mini { display: inline-block; list-style: none; } +summary.mini { display: inline-block; list-style: none; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); cursor: pointer; line-height: 1.4; } +summary.mini::-webkit-details-marker { display: none; } .filter { margin: 0 0 1em; } .filter label { display: inline-block; margin: 0; } .filter select { width: auto; margin: 0 0 0 0.4em; } -.actionrow { margin: 1.2em 0 0; } -.actionrow a { margin-left: 0.8em; } +.actionrow { margin: 1.2em 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: 0.6em 0.9em; } +.actionrow a:not(.btn) { font-size: 0.95em; } /* ---- tables & lists ------------------------------------------------------ */ table { border-collapse: collapse; width: 100%; } -th, td { text-align: left; padding: 0.5em 0.6em; border-bottom: 1px solid #ddd6c7; vertical-align: middle; } -th { font-family: "IBM Plex Mono", "SF Mono", Menlo, Consolas, "Liberation Mono", "Courier New", monospace; font-size: 0.75em; text-transform: uppercase; letter-spacing: 0.08em; color: #1d1a17; border-bottom: 2px solid #1d1a17; } -tr:nth-child(even) td { background: #f9f6ee; } -tr:hover td { background: #f1ecdf; } -tr.disabled td { color: #8f887c; } +th, td { text-align: left; padding: 0.55em 0.6em; border-bottom: 1px solid var(--border); vertical-align: middle; } +th { font-size: 0.75em; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); } +tr:last-child td { border-bottom: 0; } +tr:hover td { background: var(--surface-2); } +tr.disabled td { color: var(--muted); } ul.plain { list-style: none; padding: 0; margin: 0; } -ul.plain li { padding: 0.3em 0; border-bottom: 1px solid #ddd6c7; } +ul.plain li { padding: 0.35em 0; border-bottom: 1px solid var(--border); } ul.plain li:last-child { border-bottom: 0; } -details.help { margin: 0.8em 0 0; border: 2px dashed #1d1a17; padding: 0.5em 1em; background: #fbf8f0; } -details.help summary { cursor: pointer; font-family: "IBM Plex Mono", "SF Mono", Menlo, Consolas, "Liberation Mono", "Courier New", monospace; font-size: 0.85em; text-transform: uppercase; letter-spacing: 0.06em; } -details.help[open] summary { margin-bottom: 0.5em; } +details.help { margin: 0.8em 0 0; border: 1px dashed var(--border-strong); border-radius: var(--radius-sm); padding: 0.5em 1em; background: var(--surface-2); font-size: 0.95em; } +details.help summary { cursor: pointer; color: var(--muted); font-weight: 500; font-size: 0.9em; } +details.help[open] summary { margin-bottom: 0.5em; color: var(--text); } .cheat td { border: 0; padding: 0.2em 1em 0.2em 0; background: none; } +.cheat tr:hover td { background: none; } -.editor-tools { margin: 0.5em 0 0; font-size: 0.9em; } -.editor-tools .upload { display: inline-block; margin: 0 0.8em 0 0; padding: 0.25em 0.7em; border: 2px solid #1d1a17; background: #fffdf8; cursor: pointer; font-size: 0.8em; } -.editor-tools .upload:hover { background: #ebe5d6; } +/* ---- editor: toolbar, textarea and preview share one frame ------------------ */ +.editor { margin-top: 0.3em; } +.editor textarea { margin-top: 0; display: block; } +.editor.js textarea { border-top-left-radius: 0; border-top-right-radius: 0; } +.ed-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25em; padding: 0.35em 0.4em; background: var(--surface-2); border: 1px solid var(--border-strong); border-bottom: 0; border-radius: var(--radius-sm) var(--radius-sm) 0 0; } +.ed-group { display: inline-flex; gap: 0.1em; padding-right: 0.35em; margin-right: 0.1em; border-right: 1px solid var(--border-strong); } +.ed-group:last-of-type { border-right: 0; } +.ed-toolbar button[data-cmd] { width: 2em; height: 2em; padding: 0; border: 1px solid transparent; background: none; color: var(--text); border-radius: 5px; display: inline-flex; align-items: center; justify-content: center; } +.ed-toolbar button[data-cmd]:hover { background: var(--accent-soft); color: var(--accent-hover); border-color: transparent; } +.ed-toolbar svg { width: 16px; height: 16px; fill: currentColor; } +.ed-modes { margin-left: auto; display: inline-flex; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); overflow: hidden; } +.ed-modes button { font-size: 0.8em; font-weight: 500; padding: 0.25em 0.75em; border: 0; border-radius: 0; background: var(--surface); color: var(--muted); } +.ed-modes button + button { border-left: 1px solid var(--border-strong); } +.ed-modes button:hover { background: var(--surface-2); color: var(--text); } +.ed-modes button[aria-pressed=true] { background: var(--accent); color: #fff; } +.editor.previewing .ed-toolbar button[data-cmd] { opacity: 0.35; pointer-events: none; } +.ed-linkbox { display: flex; flex-wrap: wrap; gap: 0.4em; align-items: center; padding: 0.5em; background: var(--accent-soft); border: 1px solid var(--border-strong); border-bottom: 0; } +.ed-linkbox input { flex: 1 1 12em; margin: 0; padding: 0.35em 0.5em; font-size: 0.9em; } +.ed-preview { min-height: 10em; padding: 0.8em 1em; border: 1px solid var(--border-strong); border-radius: 0 0 var(--radius-sm) var(--radius-sm); background: var(--surface); overflow-x: auto; } +.ed-preview > :first-child { margin-top: 0; } +.ed-preview > :last-child { margin-bottom: 0; } +.ed-preview h1, .ed-preview h2, .ed-preview h3, .ed-preview h4 { margin: 1em 0 0.4em; } +.ed-preview h1 { font-size: 1.5em; } .ed-preview h2 { font-size: 1.3em; } .ed-preview h3 { font-size: 1.1em; } +.ed-preview img { max-width: 100%; height: auto; } +.ed-preview blockquote { margin: 0.8em 0; padding: 0.2em 1em; border-left: 3px solid var(--border-strong); color: var(--muted); } +.ed-preview pre { padding: 0.7em 0.9em; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm); overflow-x: auto; font-size: 0.9em; } +.ed-preview pre code { border: 0; padding: 0; background: none; } +.ed-preview table { width: auto; margin: 0.8em 0; } +.ed-preview th, .ed-preview td { border: 1px solid var(--border); } +.ed-preview hr { border: 0; border-top: 1px solid var(--border-strong); margin: 1.2em 0; } +.editor-tools { margin: 0.5em 0 0; font-size: 0.9em; display: flex; flex-wrap: wrap; align-items: center; gap: 0.3em 0.8em; } +.editor-tools .upload { display: inline-block; margin: 0; padding: 0.25em 0.7em; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); background: var(--surface); cursor: pointer; font-size: 0.85em; } +.editor-tools .upload:hover { background: var(--surface-2); } .editor-tools .upload input { display: inline-block; width: auto; max-width: 14em; margin: 0 0 0 0.4em; padding: 0; border: 0; background: none; font-size: 0.9em; } -.editor-tools .upload-status { font-family: "IBM Plex Mono", "SF Mono", Menlo, Consolas, "Liberation Mono", "Courier New", monospace; font-size: 0.85em; margin-right: 0.6em; } +.editor.js .editor-tools .upload { display: none; } /* the toolbar's Insert file button takes over */ +.editor-tools .upload-status { font-size: 0.9em; color: var(--muted); } +.editor-tools .upload-status:empty { display: none; } /* ---- files --------------------------------------------------------------- */ -.dropzone.over { border-style: dashed; background: #ebe5d6; } -.progress { list-style: none; margin: 0.6em 0 0; padding: 0; font-family: "IBM Plex Mono", "SF Mono", Menlo, Consolas, "Liberation Mono", "Courier New", monospace; font-size: 0.85em; } +.dropzone.over { border: 1px dashed var(--accent); background: var(--accent-soft); } +.progress { list-style: none; margin: 0.6em 0 0; padding: 0; font-size: 0.9em; color: var(--muted); } .progress:empty { display: none; } -.files-filter { overflow: hidden; } -.files-filter input[type=search] { width: auto; margin: 0 0.3em 0.5em 0; padding: 0.3em 0.5em; vertical-align: middle; } -.kinds { display: inline-block; margin: 0 1em 0.5em 0; vertical-align: middle; } -.kinds a { display: inline-block; padding: 0.2em 0.7em; margin: 0 0.3em 0.3em 0; border: 2px solid #1d1a17; color: #1d1a17; text-decoration: none; font-family: "IBM Plex Mono", "SF Mono", Menlo, Consolas, "Liberation Mono", "Courier New", monospace; font-size: 0.8em; text-transform: uppercase; letter-spacing: 0.05em; } -.kinds a:hover { background: #ebe5d6; } -.kinds a.active { background: #1d1a17; color: #f4efe4; } +.files-filter { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5em; } +.files-filter input[type=search] { width: auto; margin: 0; padding: 0.35em 0.6em; } +.kinds { display: inline-flex; flex-wrap: wrap; gap: 0.3em; margin-right: 0.5em; } +.kinds a { display: inline-block; padding: 0.25em 0.8em; border: 1px solid var(--border-strong); border-radius: 999px; color: var(--text); text-decoration: none; font-size: 0.85em; font-weight: 500; } +.kinds a:hover { background: var(--surface-2); } +.kinds a.active { background: var(--accent); color: #fff; border-color: var(--accent); } table.files td.icon { width: 56px; } -table.files .thumb { display: block; width: 48px; height: 48px; object-fit: contain; border: 1px solid #ddd6c7; background: #f4efe4; } -table.files .badge { display: block; width: 48px; padding: 0.9em 0; border: 1px solid #1d1a17; background: #fffdf8; text-align: center; font-family: "IBM Plex Mono", "SF Mono", Menlo, Consolas, "Liberation Mono", "Courier New", monospace; font-size: 0.65em; letter-spacing: 0.05em; overflow: hidden; } +table.files .thumb { display: block; width: 48px; height: 48px; object-fit: contain; border: 1px solid var(--border); border-radius: 4px; background: var(--surface-2); } +table.files .badge { display: block; width: 48px; padding: 0.9em 0; border: 1px solid var(--border-strong); border-radius: 4px; background: var(--surface); text-align: center; font-family: var(--mono); font-size: 0.65em; letter-spacing: 0.05em; overflow: hidden; } table.files td.name { word-break: break-all; } -table.files .copy { width: 100%; min-width: 11em; padding: 0.3em; font-family: "IBM Plex Mono", "SF Mono", Menlo, Consolas, "Liberation Mono", "Courier New", monospace; font-size: 0.75em; } -.pager { margin: 0 4px 1.6em 0; text-align: center; font-family: "IBM Plex Mono", "SF Mono", Menlo, Consolas, "Liberation Mono", "Courier New", monospace; font-size: 0.9em; } +table.files .copy { width: 100%; min-width: 11em; padding: 0.3em 0.4em; margin: 0; font-family: var(--mono); font-size: 0.75em; } +.pager { margin: 0 0 1.4em; text-align: center; font-size: 0.92em; } .pager a, .pager span { margin: 0 0.8em; } -.imagepick { margin-top: 0.5em; padding-top: 0.5em; border-top: 2px dashed #ddd6c7; } +.imagepick { margin-top: 0.8em; padding-top: 0.6em; border-top: 1px solid var(--border); } .imagepick > label { margin-bottom: 0.3em; } -.imagepick .picks { overflow: hidden; margin: 0.4em 0 0; } -.imagepick .pick { float: left; width: 120px; margin: 0 0.7em 0.7em 0; padding: 0.35em; border: 2px solid #ddd6c7; background: #fffdf8; text-align: center; font-size: 0.75em; text-transform: none; letter-spacing: 0; cursor: pointer; } -.imagepick .pick:hover { border-color: #1d1a17; } +.imagepick .picks { display: flex; flex-wrap: wrap; gap: 0.7em; margin: 0.4em 0 0; } +.imagepick .pick { width: 120px; margin: 0; padding: 0.4em; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); text-align: center; font-size: 0.75em; font-weight: normal; cursor: pointer; } +.imagepick .pick:hover { border-color: var(--border-strong); background: var(--surface-2); } .imagepick .pick input { display: block; width: auto; margin: 0 auto 0.3em; } -.imagepick .pick img, .imagepick .pick .swatch { display: block; width: 100%; height: 64px; margin: 0 auto 0.3em; border: 1px solid #ddd6c7; background: #f4efe4; } +.imagepick .pick img, .imagepick .pick .swatch { display: block; width: 100%; height: 64px; margin: 0 auto 0.3em; border: 1px solid var(--border); border-radius: 4px; background: var(--surface-2); } .imagepick .pick img { object-fit: contain; } -.imagepick .pick .swatch { line-height: 64px; font-size: 1.6em; color: #b8b0a3; } +.imagepick .pick .swatch { line-height: 64px; font-size: 1.6em; color: var(--muted); } .imagepick .pick .name { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } -.imagepick .pick input:checked ~ img, .imagepick .pick input:checked ~ .swatch { border: 3px solid #c8541a; } +.imagepick .pick input:checked ~ img, .imagepick .pick input:checked ~ .swatch { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent); } /* ---- design page ---------------------------------------------------------- */ -.jumps { margin: 0 0 1.2em; font-family: "IBM Plex Mono", "SF Mono", Menlo, Consolas, "Liberation Mono", "Courier New", monospace; font-size: 0.8em; text-transform: uppercase; letter-spacing: 0.05em; } -.jumps a { display: inline-block; margin: 0 0.8em 0.3em 0; color: #1d1a17; text-decoration: none; border-bottom: 2px solid #ddd6c7; } -.jumps a:hover { border-color: #c8541a; } -.presets { overflow: hidden; } -.presets .preset { float: left; width: 8.5em; margin: 0 0.9em 0.9em 0; padding: 0.45em; background: #fffdf8; color: #1d1a17; font-size: 0.8em; text-align: center; } -.presets .preset:hover { background: #ebe5d6; color: #1d1a17; } -.presets .sw { display: inline-block; width: 22%; height: 2.2em; margin: 0 1%; border: 1px solid rgba(0,0,0,0.25); vertical-align: middle; } +.jumps { display: flex; flex-wrap: wrap; gap: 0.4em; margin: 0 0 1.2em; font-size: 0.85em; } +.jumps a { display: inline-block; padding: 0.2em 0.75em; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); color: var(--text); text-decoration: none; } +.jumps a:hover { border-color: var(--accent); color: var(--accent); } +.presets { display: flex; flex-wrap: wrap; gap: 0.8em; } +.presets .preset { width: 8.5em; margin: 0; padding: 0.55em 0.45em; background: var(--surface); color: var(--text); border: 1px solid var(--border); border-radius: var(--radius-sm); font-size: 0.8em; font-weight: 500; text-align: center; } +.presets .preset:hover { background: var(--surface-2); color: var(--text); border-color: var(--border-strong); } +.presets .sw { display: inline-block; width: 22%; height: 2.2em; margin: 0 1%; border: 1px solid rgba(0,0,0,0.15); border-radius: 3px; vertical-align: middle; } .presets .pname { display: block; margin-top: 0.4em; } /* layout page: the column diagram, area cards with their module tables */ -.lay { margin: 0 0 1em; border: 2px solid #1d1a17; background: #f4efe4; font-family: "IBM Plex Mono", "SF Mono", Menlo, Consolas, "Liberation Mono", "Courier New", monospace; font-size: 0.75em; text-transform: uppercase; letter-spacing: 0.05em; text-align: center; } -.lay-row { padding: 0.5em; background: #1d1a17; color: #f4efe4; } -.lay-cols { overflow: hidden; padding: 0.5em 0; } -.lay-col { float: left; padding: 1.6em 0.3em; border: 1px dashed #1d1a17; background: #fffdf8; } -.lay-col.lay-main { background: #ebe5d6; } -.lay .off { opacity: 0.4; text-decoration: line-through; } +.lay { margin: 0 0 1em; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); background: var(--surface-2); font-size: 0.75em; font-weight: 500; text-align: center; overflow: hidden; } +.lay-row { padding: 0.5em; background: var(--text); color: #fff; } +.lay-cols { display: flex; padding: 0.5em; gap: 0.3em; } +.lay-col { padding: 1.6em 0.3em; border: 1px dashed var(--border-strong); border-radius: 4px; background: var(--surface); } +.lay-col.lay-main { background: var(--accent-soft); border-color: var(--accent); border-style: solid; color: var(--accent-hover); } +.lay .off { opacity: 0.45; text-decoration: line-through; } .lay-col.off { text-decoration: none; } .lay-col.empty { background: transparent; } .row input[type=number] { width: 6em; } -.cardhead { overflow: hidden; } -.cardhead h2 { float: left; margin-right: 1em; } -.cardhead .switch { float: right; margin-top: -0.2em; } +.cardhead { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5em 1em; } +.cardhead h2 { margin: 0 0 0.6em; } +.cardhead .switch { margin: 0 0 0.6em auto; } .card.area-off { border-style: dashed; box-shadow: none; } .card.area-off .modules, .card.area-off .addmod { opacity: 0.6; } table.modules { margin: 0.5em 0 1em; } table.modules td.order, table.modules td.actions { width: 1%; } table.modules th { width: 10em; } -.addmod { border-top: 2px dashed #ddd6c7; padding-top: 0.6em; } +.addmod { border-top: 1px solid var(--border); padding-top: 0.6em; } .addmod label, .add label { display: inline-block; margin: 0 0.8em 0.4em 0; min-width: 14em; } .addmod select, .add select, .add input { width: auto; min-width: 14em; } .addmod button, .add button { vertical-align: bottom; margin-bottom: 0.4em; } -.addrow { margin-top: 1em; border-top: 2px dashed #ddd6c7; padding-top: 0.6em; } -.addrow .add { float: left; width: 48%; margin-right: 4%; } -.addrow .add + .add { margin-right: 0; } +.addrow { margin-top: 1em; border-top: 1px solid var(--border); padding-top: 0.6em; margin-bottom: 0; } textarea.mono { font-size: 0.9em; } .hoverpick { margin: 0.8em 0; } .hoverpick > input { width: auto; margin: 0 0.4em 0 0; vertical-align: middle; } .hoverpick > label.check { display: inline; margin: 0; } .hoverpick .hover-color { margin: 0.4em 0 0 1.6em; } .hoverpick > input:not(:checked) ~ .hover-color { display: none; } -.savebar { position: sticky; bottom: 0; margin: 0 4px 0 0; padding: 0.8em 0; background: #f4efe4; border-top: 2px solid #1d1a17; } -.savebar .btn { margin-left: 0.8em; } +.savebar { position: sticky; bottom: 0; margin: 0; padding: 0.8em 0; background: var(--bg); border-top: 1px solid var(--border-strong); display: flex; gap: 0.8em; align-items: center; } details.reset { margin-top: 1.6em; } /* ---- login --------------------------------------------------------------- */ -.login-brand { text-align: center; font-family: "IBM Plex Mono", "SF Mono", Menlo, Consolas, "Liberation Mono", "Courier New", monospace; text-transform: uppercase; letter-spacing: 0.2em; margin: 2em 0 1em; } +.login-brand { text-align: center; font-weight: 700; font-size: 1.2em; letter-spacing: -0.01em; margin: 2.5em 0 1em; } @media (max-width: 700px) { - .cols .card, .row label { float: none; width: auto; margin-right: 4px; } - .imagepick .pick { width: 46%; margin-right: 4%; } - .presets .preset { width: 46%; margin-right: 4%; } - .addrow .add { float: none; width: auto; margin-right: 0; } - .cardhead h2, .cardhead .switch { float: none; margin-top: 0; } - .cardhead .switch { display: block; margin-bottom: 0.6em; } - .cols .card + .card { margin-right: 4px; } - .topbar .links { float: none; display: block; margin-top: 0.3em; } - .topbar .links a, .topbar .links form { margin-left: 0; margin-right: 1em; } - .blogbar .topbar-inner { overflow: visible; } - .blogbar .blogname { display: block; margin-right: 0; } - .blogbar .view { float: none; display: inline-block; margin: 0 0 0.6em; } - .blogbar .tabs { display: block; overflow-x: auto; white-space: nowrap; -webkit-overflow-scrolling: touch; margin: 0 -1em; padding: 0 1em; } - .pagehead h1, .pagehead .actions { float: none; } - .pagehead .actions { margin-bottom: 0.6em; } - .card { padding: 0.9em 1em; overflow-x: auto; } + body { font-size: 15px; } + .cols { grid-template-columns: 1fr; gap: 1.2em; } + .row { gap: 0; } + .row label { flex-basis: 100%; } + .imagepick .pick { width: 46%; } + .presets .preset { width: 46%; } + .topbar .links { margin-left: 0; flex-basis: 100%; gap: 1em; } + .blogbar .topbar-inner { display: block; } + .blogbar .blogname { display: block; max-width: none; padding-bottom: 0.3em; } + .blogbar .view { display: inline-block; margin: 0 0 0.6em; } + .blogbar .tabs { overflow-x: auto; white-space: nowrap; -webkit-overflow-scrolling: touch; margin: 0 -1em; padding: 0 1em; } + .pagehead .actions { margin-left: 0; } + .card { padding: 1em 1em; overflow-x: auto; } table { font-size: 0.9em; } - th, td { padding: 0.35em 0.3em; } + th, td { padding: 0.4em 0.35em; } + .ed-modes { margin-left: 0; } } |