@bakapiano/ccsm 0.10.3 → 0.12.0

package/public/css/base.css

@@ -1,99 +1,99 @@
-/* Reset, root typography, global accents, scrollbars, inline code/kbd. */
-
-* { box-sizing: border-box; margin: 0; padding: 0; }
-[hidden] { display: none !important; }
-
-html {
-  /* No reserved scrollbar gutter — the sessions page is full-bleed and a
-     reserved right-side lane shows as visible empty space against the
-     terminal. Pages that overflow get the standard overlay scrollbar. */
-}
-html, body {
-  background: var(--bg);
-  color: var(--ink);
-  font-family: var(--body);
-  font-size: 14px;
-  line-height: 1.5;
-  font-variant-numeric: tabular-nums;
-  font-feature-settings: "ss01", "ss02", "cv11";
-  min-height: 100vh;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  text-rendering: optimizeLegibility;
-}
-
-/* Layer the paper grain over the entire app surface — fixed so panning
-   doesn't shift the noise pattern under the cursor. Subtle enough that
-   you only notice it on cream regions, never on terminals or images. */
-body::before {
-  content: "";
-  position: fixed;
-  inset: 0;
-  pointer-events: none;
-  z-index: 0;
-  background-image: var(--paper-noise);
-  opacity: 0.55;
-  mix-blend-mode: multiply;
-}
-#app { position: relative; z-index: 1; }
-
-::selection { background: var(--ink); color: var(--bg-elev); }
-::-moz-selection { background: var(--ink); color: var(--bg-elev); }
-
-code, .kbd {
-  font-family: var(--mono);
-  font-size: 11.5px;
-  padding: 1px 5px;
-  background: var(--bg);
-  border: 1px solid var(--border-soft);
-  border-radius: 4px;
-  color: var(--ink-mid);
-}
-
-/* Fixed scrollbar look so it doesn't fade in/out or shift width on focus.
-   WebKit (Edge/Chrome): pseudo-elements. Firefox: scrollbar-* properties. */
-* {
-  scrollbar-width: thin;
-  scrollbar-color: var(--border-strong) transparent;
-}
-::-webkit-scrollbar { width: 10px; height: 10px; background: transparent; }
-::-webkit-scrollbar-track { background: transparent; }
-::-webkit-scrollbar-thumb {
-  background: var(--border-strong);
-  border-radius: 4px;
-  border: 2px solid var(--bg);
-  /* Forced minimum height so dragging the thumb is always practical even on
-     very long pages. */
-  min-height: 32px;
-}
-::-webkit-scrollbar-thumb:hover { background: var(--ink-faint); }
-::-webkit-scrollbar-corner { background: transparent; }
-
-.row { display: flex; align-items: center; }
-.gap-row { gap: var(--s-3); flex-wrap: wrap; }
-.divider-dot { color: var(--ink-faint); padding: 0 var(--s-1); }
-
-.muted-text { color: var(--ink-muted); font-size: 12.5px; }
-.muted-text strong { color: var(--ink-mid); font-weight: 600; }
-
-.post-result {
-  margin-top: var(--s-3);
-  font-family: var(--mono);
-  font-size: 11.5px;
-  color: var(--ink-muted);
-}
-
-.empty {
-  padding: var(--s-12) var(--s-6);
-  text-align: center;
-  font-size: 13px;
-  color: var(--ink-muted);
-}
-.empty code {
-  font-family: var(--mono);
-  font-size: 12px;
-  color: var(--ink-mid);
-  background: var(--bg);
-  padding: 1px 5px;
-  border-radius: 4px;
-}
+/* Reset, root typography, global accents, scrollbars, inline code/kbd. */
+
+* { box-sizing: border-box; margin: 0; padding: 0; }
+[hidden] { display: none !important; }
+
+html {
+  /* No reserved scrollbar gutter — the sessions page is full-bleed and a
+     reserved right-side lane shows as visible empty space against the
+     terminal. Pages that overflow get the standard overlay scrollbar. */
+}
+html, body {
+  background: var(--bg);
+  color: var(--ink);
+  font-family: var(--body);
+  font-size: 14px;
+  line-height: 1.5;
+  font-variant-numeric: tabular-nums;
+  font-feature-settings: "ss01", "ss02", "cv11";
+  min-height: 100vh;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-rendering: optimizeLegibility;
+}
+
+/* Layer the paper grain over the entire app surface — fixed so panning
+   doesn't shift the noise pattern under the cursor. Subtle enough that
+   you only notice it on cream regions, never on terminals or images. */
+body::before {
+  content: "";
+  position: fixed;
+  inset: 0;
+  pointer-events: none;
+  z-index: 0;
+  background-image: var(--paper-noise);
+  opacity: 0.55;
+  mix-blend-mode: multiply;
+}
+#app { position: relative; z-index: 1; }
+
+::selection { background: var(--ink); color: var(--bg-elev); }
+::-moz-selection { background: var(--ink); color: var(--bg-elev); }
+
+code, .kbd {
+  font-family: var(--mono);
+  font-size: 11.5px;
+  padding: 1px 5px;
+  background: var(--bg);
+  border: 1px solid var(--border-soft);
+  border-radius: 4px;
+  color: var(--ink-mid);
+}
+
+/* Fixed scrollbar look so it doesn't fade in/out or shift width on focus.
+   WebKit (Edge/Chrome): pseudo-elements. Firefox: scrollbar-* properties. */
+* {
+  scrollbar-width: thin;
+  scrollbar-color: var(--border-strong) transparent;
+}
+::-webkit-scrollbar { width: 10px; height: 10px; background: transparent; }
+::-webkit-scrollbar-track { background: transparent; }
+::-webkit-scrollbar-thumb {
+  background: var(--border-strong);
+  border-radius: 4px;
+  border: 2px solid var(--bg);
+  /* Forced minimum height so dragging the thumb is always practical even on
+     very long pages. */
+  min-height: 32px;
+}
+::-webkit-scrollbar-thumb:hover { background: var(--ink-faint); }
+::-webkit-scrollbar-corner { background: transparent; }
+
+.row { display: flex; align-items: center; }
+.gap-row { gap: var(--s-3); flex-wrap: wrap; }
+.divider-dot { color: var(--ink-faint); padding: 0 var(--s-1); }
+
+.muted-text { color: var(--ink-muted); font-size: 12.5px; }
+.muted-text strong { color: var(--ink-mid); font-weight: 600; }
+
+.post-result {
+  margin-top: var(--s-3);
+  font-family: var(--mono);
+  font-size: 11.5px;
+  color: var(--ink-muted);
+}
+
+.empty {
+  padding: var(--s-12) var(--s-6);
+  text-align: center;
+  font-size: 13px;
+  color: var(--ink-muted);
+}
+.empty code {
+  font-family: var(--mono);
+  font-size: 12px;
+  color: var(--ink-mid);
+  background: var(--bg);
+  padding: 1px 5px;
+  border-radius: 4px;
+}

package/public/css/cards.css

@@ -1,183 +1,183 @@
-/* Card surfaces · head with fold toggle · body · title with icon */
-
-.card {
-  background: var(--bg-elev);
-  border: 1px solid var(--border-soft);
-  border-radius: 6px;
-  overflow: hidden;
-  box-shadow: var(--shadow);
-  transition: box-shadow .2s ease, border-color .2s ease, transform .2s ease;
-}
-.card:hover {
-  box-shadow: var(--shadow-md);
-  border-color: var(--border);
-}
-
-.card-head {
-  padding: var(--s-4) var(--s-6) var(--s-3);
-  border-bottom: 1px solid var(--border-soft);
-  display: flex;
-  justify-content: flex-start;
-  align-items: center;
-  gap: var(--s-3);
-}
-/* Whole header clickable to fold, only when card is foldable */
-.card[data-fold-key] .card-head {
-  cursor: pointer;
-  user-select: none;
-  transition: background .12s ease;
-}
-.card[data-fold-key] .card-head:hover {
-  background: var(--bg);
-}
-.card[data-collapsed] .card-head { border-bottom-color: transparent; }
-.card-titles { flex: 1; min-width: 0; }
-
-.card-fold {
-  appearance: none;
-  background: transparent;
-  border: 0;
-  padding: 4px;
-  margin: 0;
-  cursor: pointer;
-  color: var(--ink-muted);
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  border-radius: 4px;
-  transition: color .12s ease, background .12s ease, transform .25s cubic-bezier(.4, 0, .2, 1);
-  line-height: 0;
-  flex: 0 0 auto;
-}
-.card-fold:hover {
-  color: var(--ink);
-  background: var(--bg);
-}
-.card[data-collapsed] .card-fold { transform: rotate(-90deg); }
-.card[data-collapsed] .card-body { display: none; }
-
-.card-title {
-  font-size: 15.5px;
-  font-weight: 600;
-  letter-spacing: -0.012em;
-  color: var(--ink);
-  line-height: 1.2;
-}
-.card-title .title-icon {
-  color: var(--ink-mid);
-  margin-right: 6px;
-  vertical-align: -2px;
-}
-.card-title .title-icon-after {
-  margin-right: 0;
-  margin-left: 6px;
-  vertical-align: -1px;
-}
-.card-meta {
-  margin-top: 2px;
-  font-size: 12.5px;
-  color: var(--ink-muted);
-  font-family: var(--body);
-}
-.card-meta code {
-  font-family: var(--mono);
-  font-size: 11.5px;
-  color: var(--ink-mid);
-  background: var(--bg);
-  padding: 1px 5px;
-  border-radius: 4px;
-  border: 1px solid var(--border-soft);
-}
-
-.card-body { padding: var(--s-5) var(--s-6); }
-.card-body-flush { padding: 0; }
-
-/* ── About page ── */
-.about-block { display: flex; flex-direction: column; gap: var(--s-5); max-width: 640px; }
-.about-hero { display: flex; gap: var(--s-4); align-items: center; }
-.about-mark { display: inline-flex; }
-.about-mark svg { width: 48px; height: 48px; }
-.about-name {
-  font-size: 22px;
-  font-weight: 600;
-  letter-spacing: -0.02em;
-  color: var(--ink);
-  line-height: 1.1;
-}
-.about-version {
-  font-family: var(--mono);
-  font-size: 12px;
-  color: var(--ink-muted);
-  margin-left: 6px;
-  font-weight: 400;
-}
-.about-version-row {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 16px;
-  flex-wrap: wrap;
-}
-.about-version-line {
-  font-size: 13px;
-  color: var(--ink);
-}
-.about-update-line {
-  margin-top: 4px;
-  font-size: 12.5px;
-  color: var(--ink-mid);
-  font-weight: 500;
-}
-.about-version-actions {
-  display: inline-flex;
-  align-items: center;
-  gap: 6px;
-}
-.muted-text {
-  font-size: 11.5px;
-  color: var(--ink-muted);
-  line-height: 1.5;
-}
-.about-tagline {
-  margin-top: 2px;
-  font-size: 13px;
-  color: var(--ink-mid);
-}
-.about-tagline code {
-  font-size: 11px;
-  padding: 1px 4px;
-}
-.about-copy {
-  font-size: 13.5px;
-  color: var(--ink-mid);
-  line-height: 1.6;
-  max-width: 560px;
-}
-.about-links {
-  display: flex;
-  gap: var(--s-3);
-  flex-wrap: wrap;
-}
-.about-links .action {
-  display: inline-flex;
-  align-items: center;
-  gap: 6px;
-  text-decoration: none;
-}
-.about-meta {
-  display: grid;
-  grid-template-columns: 140px 1fr;
-  gap: 8px var(--s-4);
-  font-size: 12.5px;
-  padding-top: var(--s-3);
-  border-top: 1px solid var(--border-soft);
-}
-.about-meta dt {
-  color: var(--ink-muted);
-  font-weight: 500;
-  text-transform: uppercase;
-  letter-spacing: 0.06em;
-  font-size: 10.5px;
-  padding-top: 2px;
-}
-.about-meta dd { color: var(--ink); }
+/* Card surfaces · head with fold toggle · body · title with icon */
+
+.card {
+  background: var(--bg-elev);
+  border: 1px solid var(--border-soft);
+  border-radius: 6px;
+  overflow: hidden;
+  box-shadow: var(--shadow);
+  transition: box-shadow .2s ease, border-color .2s ease, transform .2s ease;
+}
+.card:hover {
+  box-shadow: var(--shadow-md);
+  border-color: var(--border);
+}
+
+.card-head {
+  padding: var(--s-4) var(--s-6) var(--s-3);
+  border-bottom: 1px solid var(--border-soft);
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+  gap: var(--s-3);
+}
+/* Whole header clickable to fold, only when card is foldable */
+.card[data-fold-key] .card-head {
+  cursor: pointer;
+  user-select: none;
+  transition: background .12s ease;
+}
+.card[data-fold-key] .card-head:hover {
+  background: var(--bg);
+}
+.card[data-collapsed] .card-head { border-bottom-color: transparent; }
+.card-titles { flex: 1; min-width: 0; }
+
+.card-fold {
+  appearance: none;
+  background: transparent;
+  border: 0;
+  padding: 4px;
+  margin: 0;
+  cursor: pointer;
+  color: var(--ink-muted);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 4px;
+  transition: color .12s ease, background .12s ease, transform .25s cubic-bezier(.4, 0, .2, 1);
+  line-height: 0;
+  flex: 0 0 auto;
+}
+.card-fold:hover {
+  color: var(--ink);
+  background: var(--bg);
+}
+.card[data-collapsed] .card-fold { transform: rotate(-90deg); }
+.card[data-collapsed] .card-body { display: none; }
+
+.card-title {
+  font-size: 15.5px;
+  font-weight: 600;
+  letter-spacing: -0.012em;
+  color: var(--ink);
+  line-height: 1.2;
+}
+.card-title .title-icon {
+  color: var(--ink-mid);
+  margin-right: 6px;
+  vertical-align: -2px;
+}
+.card-title .title-icon-after {
+  margin-right: 0;
+  margin-left: 6px;
+  vertical-align: -1px;
+}
+.card-meta {
+  margin-top: 2px;
+  font-size: 12.5px;
+  color: var(--ink-muted);
+  font-family: var(--body);
+}
+.card-meta code {
+  font-family: var(--mono);
+  font-size: 11.5px;
+  color: var(--ink-mid);
+  background: var(--bg);
+  padding: 1px 5px;
+  border-radius: 4px;
+  border: 1px solid var(--border-soft);
+}
+
+.card-body { padding: var(--s-5) var(--s-6); }
+.card-body-flush { padding: 0; }
+
+/* ── About page ── */
+.about-block { display: flex; flex-direction: column; gap: var(--s-5); max-width: 640px; }
+.about-hero { display: flex; gap: var(--s-4); align-items: center; }
+.about-mark { display: inline-flex; }
+.about-mark svg { width: 48px; height: 48px; }
+.about-name {
+  font-size: 22px;
+  font-weight: 600;
+  letter-spacing: -0.02em;
+  color: var(--ink);
+  line-height: 1.1;
+}
+.about-version {
+  font-family: var(--mono);
+  font-size: 12px;
+  color: var(--ink-muted);
+  margin-left: 6px;
+  font-weight: 400;
+}
+.about-version-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 16px;
+  flex-wrap: wrap;
+}
+.about-version-line {
+  font-size: 13px;
+  color: var(--ink);
+}
+.about-update-line {
+  margin-top: 4px;
+  font-size: 12.5px;
+  color: var(--ink-mid);
+  font-weight: 500;
+}
+.about-version-actions {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+}
+.muted-text {
+  font-size: 11.5px;
+  color: var(--ink-muted);
+  line-height: 1.5;
+}
+.about-tagline {
+  margin-top: 2px;
+  font-size: 13px;
+  color: var(--ink-mid);
+}
+.about-tagline code {
+  font-size: 11px;
+  padding: 1px 4px;
+}
+.about-copy {
+  font-size: 13.5px;
+  color: var(--ink-mid);
+  line-height: 1.6;
+  max-width: 560px;
+}
+.about-links {
+  display: flex;
+  gap: var(--s-3);
+  flex-wrap: wrap;
+}
+.about-links .action {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  text-decoration: none;
+}
+.about-meta {
+  display: grid;
+  grid-template-columns: 140px 1fr;
+  gap: 8px var(--s-4);
+  font-size: 12.5px;
+  padding-top: var(--s-3);
+  border-top: 1px solid var(--border-soft);
+}
+.about-meta dt {
+  color: var(--ink-muted);
+  font-weight: 500;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  font-size: 10.5px;
+  padding-top: 2px;
+}
+.about-meta dd { color: var(--ink); }