fb-slides 0.8.0 → 0.9.1

package/runtime/theme.base.css

@@ -1228,16 +1228,99 @@ body.edit-open #deck-edit { transform: none; }
   transition: flex-grow 0.25s ease, flex-basis 0.25s ease,
     padding 0.25s ease, border-width 0.25s ease;
 }
-#deck-edit-source { flex: 1 1 0; }
+/* The slide box is the wrapper syntax.js builds around the textarea — or the
+   bare textarea itself, on a deck with no highlight plugin to build one, which
+   is what the child combinator tells apart. */
+#deck-edit > #deck-edit-source,
+#deck-edit .deck-edit-code { flex: 1 1 0; }
 #deck-edit-notes { flex: 0 0 120px; }
-#deck-edit[data-focus='notes'] #deck-edit-source {
+#deck-edit[data-focus='notes'] > #deck-edit-source,
+#deck-edit[data-focus='notes'] .deck-edit-code {
   flex: 0 0 0px;
-  padding-block: 0;
   border-width: 0;
-  overflow: hidden;
 }
+#deck-edit[data-focus='notes'] > #deck-edit-source { padding-block: 0; overflow: hidden; }
 #deck-edit[data-focus='notes'] #deck-edit-notes { flex: 1 1 0; }
 
+/* --- the slide box, coloured ---------------------------------------------
+   syntax.js wraps the slide's textarea in `.deck-edit-code` and slips a <pre>
+   of the same text under it, highlighted as markdown. The wrapper is the box
+   you see — background, border, radius, and the flex sizing above; the two
+   layers inside are stacked on it, sharing a font, a padding and a wrapping
+   mode so the letters land on each other. The textarea keeps its ink
+   transparent and lends only its caret, its selection and its scrollbar.
+
+   Without the highlight plugin the wrapper is never built and the plain
+   textarea rules above are the whole story. */
+#deck-edit .deck-edit-code {
+  position: relative;
+  margin: 0 12px;
+  min-height: 0;
+  overflow: hidden;
+  font: 400 13px/1.55 var(--mono);
+  background: color-mix(in srgb, var(--card) 70%, transparent);
+  border: 1px solid var(--line);
+  border-radius: 8px;
+  transition: flex-grow 0.25s ease, flex-basis 0.25s ease, border-width 0.25s ease;
+}
+#deck-edit .deck-edit-code:focus-within { border-color: color-mix(in srgb, var(--accent) 55%, transparent); }
+#deck-edit .deck-edit-code > textarea,
+#deck-edit .deck-edit-ink {
+  position: absolute;
+  inset: 0;
+  margin: 0;
+  padding: 10px 12px;
+  font: inherit;
+  border: 0;
+  background: transparent;
+  white-space: pre-wrap;
+  overflow-wrap: break-word;
+  -moz-tab-size: 2;
+  tab-size: 2;
+}
+/* The layer never scrolls itself — syntax.js hands it the textarea's offset —
+   and it stops short of the scrollbar's width, or the two would wrap at
+   different columns. Nothing on it can be clicked: the textarea is the page. */
+#deck-edit .deck-edit-ink {
+  right: var(--code-gutter, 0px);
+  overflow: hidden;
+  pointer-events: none;
+  color: var(--text);
+}
+/* The browser gives <code> a monospace of its own choosing, which is not the
+   one the textarea is wearing — half a pixel of advance is all it takes to
+   walk the two layers apart down a long line. */
+#deck-edit .deck-edit-ink > code { font: inherit; }
+#deck-edit .deck-edit-code > textarea {
+  color: transparent;
+  caret-color: var(--text);
+}
+/* A solid selection would paint over the colours; this one is a wash. */
+#deck-edit .deck-edit-code > textarea::selection {
+  background: color-mix(in srgb, var(--accent) 30%, transparent);
+}
+
+/* The markdown palette is this theme's, not the monokai the slides wear: these
+   selectors outrank that stylesheet's single classes, so the drawer follows
+   whatever the deck is dressed in — a light reveal theme included. Bold and
+   italic are safe in a monospace face, where they keep the same advance. */
+.deck-edit-ink .hljs-section { color: var(--accent); font-weight: 600; }
+.deck-edit-ink .hljs-bullet { color: var(--accent); font-weight: 600; }
+.deck-edit-ink .hljs-strong { color: var(--text); font-weight: 700; }
+.deck-edit-ink .hljs-emphasis { color: var(--accent-2); font-style: italic; font-weight: 400; }
+.deck-edit-ink .hljs-quote { color: var(--muted); font-style: italic; font-weight: 400; }
+.deck-edit-ink .hljs-code { color: var(--accent-2); font-weight: 400; }
+.deck-edit-ink .hljs-link { color: var(--accent); font-weight: 400; }
+.deck-edit-ink .hljs-string,
+.deck-edit-ink .hljs-symbol { color: var(--accent-2); font-weight: 400; }
+/* The HTML a slide drops into its markdown, and the `<!-- .element -->`
+   comments that steer reveal: chrome, not content. */
+.deck-edit-ink .hljs-tag { color: var(--muted); font-weight: 400; }
+.deck-edit-ink .hljs-name { color: var(--accent); font-weight: 600; }
+.deck-edit-ink .hljs-attr { color: var(--accent-2); font-weight: 400; }
+.deck-edit-ink .hljs-comment,
+.deck-edit-ink .hljs-meta { color: var(--muted); font-weight: 400; }
+
 #deck-edit > footer {
   display: flex;
   align-items: center;
@@ -1319,13 +1402,21 @@ body.edit-open #deck-edit { transform: none; }
 }
 .deck-edit-confirm-delete:hover { background: #f2555a; }
 
-/* The label line over the slide box carries the block picker's `+`. */
+/* The label line over the slide box carries the block picker's `+` and the
+   drop button beside it. */
 .deck-edit-row {
   display: flex;
   align-items: center;
   justify-content: space-between;
   padding-right: 12px;
 }
+.deck-edit-row-acts {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+.deck-edit-drop[hidden] { display: none; }
+.deck-edit-drop,
 .deck-edit-snip {
   display: grid;
   place-items: center;
@@ -1338,10 +1429,12 @@ body.edit-open #deck-edit { transform: none; }
   color: var(--muted);
   cursor: pointer;
 }
+.deck-edit-drop:hover,
 .deck-edit-snip:hover {
   border-color: color-mix(in srgb, var(--accent) 55%, transparent);
   color: var(--text);
 }
+.deck-edit-drop svg,
 .deck-edit-snip svg { display: block; width: 14px; height: 14px; }
 
 /* The block picker (snippets.js) — over the drawer, like the delete question,
@@ -1388,6 +1481,7 @@ body.edit-open #deck-edit { transform: none; }
   border-radius: 8px;
   cursor: pointer;
 }
+.deck-snip-list[hidden],
 .deck-snip-list li[hidden] { display: none; }
 .deck-snip-list li span { font: 600 13px/1.3 var(--sans); color: var(--text); }
 .deck-snip-list li small { font: 400 11.5px/1.45 var(--sans); color: var(--muted); }
@@ -1395,21 +1489,386 @@ body.edit-open #deck-edit { transform: none; }
    the pointer moving over an entry takes it. */
 .deck-snip-list li.is-current { background: color-mix(in srgb, var(--accent) 18%, transparent); }
 
+/* The group headers are furniture between the rows — quiet, and never a target. */
+.deck-snip-list li.deck-snip-head {
+  padding: 10px 10px 2px;
+  font: 600 10.5px/1.3 var(--sans);
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  color: color-mix(in srgb, var(--muted) 75%, transparent);
+  cursor: default;
+}
+
+/* Under the list: the markup the highlighted row would write, and the line
+   for a search that came back with nothing. */
+.deck-snip-preview {
+  flex: 0 0 auto;
+  max-height: 140px;
+  overflow: auto;
+  margin: 0;
+  padding: 9px 12px;
+  font: 400 11px/1.55 var(--mono);
+  color: var(--muted);
+  background: color-mix(in srgb, var(--card) 80%, transparent);
+  border: 1px solid var(--line);
+  border-radius: 8px;
+  white-space: pre;
+}
+.deck-snip-preview[hidden] { display: none; }
+.deck-snip-preview:empty { display: none; }
+
+.deck-snip-empty {
+  margin: 0;
+  padding: 2px 10px;
+  font: 400 12.5px/1.4 var(--sans);
+  color: var(--muted);
+}
+.deck-snip-empty[hidden] { display: none; }
+
 /* The hairline the outline list and the drawer's boxes wear. */
-.deck-snip-list::-webkit-scrollbar { width: 5px; }
-.deck-snip-list::-webkit-scrollbar-track { background: transparent; }
-.deck-snip-list::-webkit-scrollbar-thumb {
+.deck-snip-list::-webkit-scrollbar,
+.deck-snip-preview::-webkit-scrollbar { width: 5px; height: 5px; }
+.deck-snip-list::-webkit-scrollbar-track,
+.deck-snip-preview::-webkit-scrollbar-track { background: transparent; }
+.deck-snip-list::-webkit-scrollbar-thumb,
+.deck-snip-preview::-webkit-scrollbar-thumb {
   border-radius: 999px;
   background: var(--outline-bar);
 }
-.deck-snip-list::-webkit-scrollbar-thumb:hover { background: var(--outline-bar-hover); }
+.deck-snip-list::-webkit-scrollbar-thumb:hover,
+.deck-snip-preview::-webkit-scrollbar-thumb:hover { background: var(--outline-bar-hover); }
 @supports not selector(::-webkit-scrollbar) {
-  .deck-snip-list {
+  .deck-snip-list,
+  .deck-snip-preview {
     scrollbar-width: thin;
     scrollbar-color: var(--outline-bar) transparent;
   }
 }
 
+
+/* --- dropping files into assets/ (assets.js) -------------------------------
+   The panel is the picker's neighbour — an overlay inside the drawer — and the
+   sheet is the whole page: while the drawer is open, a file dragged anywhere
+   over the deck is a file for this talk, and the folders are the targets. */
+
+.deck-assets {
+  position: absolute;
+  inset: 0;
+  z-index: 3;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  padding: 14px 12px;
+  background: color-mix(in srgb, var(--bg) 80%, transparent);
+  backdrop-filter: blur(6px);
+}
+.deck-assets[hidden] { display: none; }
+
+.deck-assets > header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+.deck-assets-title,
+.deck-assets-where label {
+  font: 600 10px/1 var(--sans);
+  letter-spacing: 0.12em;
+  text-transform: uppercase;
+  color: var(--muted);
+}
+.deck-assets-close {
+  display: grid;
+  place-items: center;
+  width: 24px;
+  height: 24px;
+  padding: 0;
+  border: 0;
+  border-radius: 999px;
+  background: transparent;
+  color: var(--muted);
+  cursor: pointer;
+}
+.deck-assets-close:hover { background: color-mix(in srgb, var(--text) 10%, transparent); color: var(--text); }
+.deck-assets-close svg { display: block; width: 14px; height: 14px; }
+
+.deck-assets-where {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+.deck-assets-dir,
+.deck-assets-new {
+  flex: 1;
+  min-width: 0;
+  padding: 7px 10px;
+  font: 400 12.5px/1.3 var(--mono);
+  color: var(--text);
+  background: color-mix(in srgb, var(--card) 80%, transparent);
+  border: 1px solid var(--line);
+  border-radius: 8px;
+}
+.deck-assets-dir:focus,
+.deck-assets-new:focus {
+  outline: none;
+  border-color: color-mix(in srgb, var(--accent) 55%, transparent);
+}
+
+.deck-assets-name-row { display: flex; gap: 8px; }
+.deck-assets-name-row[hidden] { display: none; }
+.deck-assets-go {
+  flex: 0 0 auto;
+  padding: 7px 12px;
+  font: 600 12px/1 var(--sans);
+  color: #fff;
+  background: var(--accent);
+  border: 0;
+  border-radius: 8px;
+  cursor: pointer;
+}
+.deck-assets-go[hidden] { display: none; }
+.deck-assets-go:hover { background: color-mix(in srgb, var(--accent) 85%, #fff); }
+
+.deck-assets-waiting {
+  margin: -4px 0 0;
+  font: 400 11.5px/1.4 var(--sans);
+  color: var(--accent-2);
+}
+.deck-assets-waiting[hidden] { display: none; }
+
+/* The zone is a reminder more than a control: the gesture is the drag, and the
+   click is for the times the file is not in a window you can drag from. */
+.deck-assets-zone {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  align-items: center;
+  padding: 20px 12px;
+  font: 500 13px/1.4 var(--sans);
+  color: var(--muted);
+  background: transparent;
+  border: 1px dashed color-mix(in srgb, var(--text) 22%, transparent);
+  border-radius: 10px;
+  cursor: pointer;
+}
+.deck-assets-zone:hover {
+  border-color: color-mix(in srgb, var(--accent) 55%, transparent);
+  color: var(--text);
+}
+.deck-assets-zone small { font: 400 11.5px/1.4 var(--sans); }
+
+.deck-assets-list {
+  flex: 1 1 auto;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  overflow-y: auto;
+}
+.deck-assets-list li {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  padding: 7px 10px;
+  border-radius: 8px;
+  background: color-mix(in srgb, var(--card) 55%, transparent);
+}
+.deck-assets-list code {
+  min-width: 0;
+  font: 500 11.5px/1.5 var(--mono);
+  color: var(--accent-2);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.deck-assets-file {
+  min-width: 0;
+  font: 400 12px/1.5 var(--sans);
+  color: var(--text);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.deck-assets-pct,
+.deck-assets-size {
+  flex: 0 0 auto;
+  font: 400 11px/1.5 var(--mono);
+  color: var(--muted);
+}
+/* The row grows to the path and the size is pinned right of it, so a long name
+   truncates rather than pushing the buttons off the edge. */
+.deck-assets-list li code { flex: 1 1 auto; }
+/* Put there in this session — the row you are most likely reaching for. */
+.deck-assets-list li.is-fresh { background: color-mix(in srgb, var(--accent) 14%, transparent); }
+.deck-assets-none {
+  justify-content: center;
+  padding: 14px 10px;
+  font: 400 12px/1.5 var(--sans);
+  color: var(--muted);
+  background: none;
+}
+.deck-assets-list li.is-failed { background: color-mix(in srgb, #e5484d 16%, transparent); }
+.deck-assets-list li.is-failed .deck-assets-pct { color: #ff8589; }
+
+.deck-assets-acts {
+  flex: 0 0 auto;
+  display: flex;
+  gap: 4px;
+}
+.deck-assets-copy,
+.deck-assets-insert,
+.deck-assets-trash {
+  display: grid;
+  place-items: center;
+  width: 24px;
+  height: 24px;
+  padding: 0;
+  border: 1px solid var(--line);
+  border-radius: 999px;
+  background: transparent;
+  color: var(--muted);
+  cursor: pointer;
+}
+.deck-assets-copy:hover,
+.deck-assets-insert:hover {
+  border-color: color-mix(in srgb, var(--accent) 55%, transparent);
+  color: var(--text);
+}
+/* The one button here that takes something away wears the colour that says so. */
+.deck-assets-trash:hover { border-color: #e5484d; color: #ff8589; }
+/* The one moment of feedback a copy can have: the button answers for a beat. */
+.deck-assets-copy.is-done {
+  border-color: var(--accent);
+  color: var(--accent);
+}
+.deck-assets-copy svg,
+.deck-assets-insert svg,
+.deck-assets-trash svg { display: block; width: 13px; height: 13px; }
+
+/* Deleting is the only thing in this drawer a reload cannot undo, so it is a
+   layer of its own over the list — and the word has to be typed. */
+.deck-assets-confirm {
+  position: absolute;
+  inset: 0;
+  z-index: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 14px;
+  padding: 24px;
+  text-align: center;
+  background: color-mix(in srgb, var(--bg) 80%, transparent);
+  backdrop-filter: blur(5px);
+}
+.deck-assets-confirm[hidden] { display: none; }
+.deck-assets-confirm p {
+  margin: 0;
+  font: 400 13px/1.6 var(--sans);
+  color: var(--text);
+}
+.deck-assets-confirm p code {
+  font: 500 12px var(--mono);
+  color: var(--accent-2);
+  overflow-wrap: anywhere;
+}
+.deck-assets-word {
+  width: 190px;
+  padding: 8px 12px;
+  font: 600 13px/1.2 var(--mono);
+  letter-spacing: 0.14em;
+  text-align: center;
+  color: var(--text);
+  background: color-mix(in srgb, var(--card) 80%, transparent);
+  border: 1px solid var(--line);
+  border-radius: 8px;
+}
+.deck-assets-word:focus {
+  outline: none;
+  border-color: color-mix(in srgb, #e5484d 60%, transparent);
+}
+.deck-assets-confirm > div { display: flex; gap: 10px; }
+.deck-assets-cancel,
+.deck-assets-confirm-delete {
+  padding: 8px 16px;
+  font: 600 12.5px/1 var(--sans);
+  border-radius: 8px;
+  cursor: pointer;
+}
+.deck-assets-cancel {
+  color: var(--text);
+  background: transparent;
+  border: 1px solid var(--line);
+}
+.deck-assets-cancel:hover { background: color-mix(in srgb, var(--text) 10%, transparent); }
+.deck-assets-confirm-delete {
+  color: #fff;
+  background: #e5484d;
+  border: 0;
+}
+.deck-assets-confirm-delete:hover { background: #f2555a; }
+/* Until the word is typed it is a button that plainly does nothing yet. */
+.deck-assets-confirm-delete:disabled {
+  opacity: 0.4;
+  cursor: default;
+  background: #e5484d;
+}
+
+/* The sheet — over everything, drawer included: the drop is the whole page. */
+#deck-drop {
+  position: fixed;
+  inset: 0;
+  z-index: 70;
+  display: grid;
+  place-items: center;
+  background: color-mix(in srgb, var(--bg) 74%, transparent);
+  backdrop-filter: blur(8px);
+}
+#deck-drop[hidden] { display: none; }
+
+.deck-drop-sheet {
+  width: min(620px, 80vw);
+  text-align: center;
+}
+.deck-drop-sheet h2 {
+  margin: 0 0 18px;
+  font: 600 17px/1.35 var(--sans);
+  color: var(--text);
+}
+.deck-drop-sheet h2 code { font: 600 16px var(--mono); color: var(--accent-2); }
+
+.deck-drop-targets {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 10px;
+  justify-content: center;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+.deck-drop-targets li {
+  min-width: 130px;
+  padding: 16px 18px;
+  font: 500 13px/1.3 var(--mono);
+  color: var(--muted);
+  background: color-mix(in srgb, var(--card) 70%, transparent);
+  border: 1px dashed color-mix(in srgb, var(--text) 24%, transparent);
+  border-radius: 12px;
+  transition: transform 0.12s ease, border-color 0.12s ease, background 0.12s ease;
+}
+/* Where the last drop went: the one you probably mean again. */
+.deck-drop-targets li.is-last { color: var(--text); border-style: solid; }
+.deck-drop-targets li.is-new { font-family: var(--sans); }
+.deck-drop-targets li.is-over {
+  color: var(--text);
+  background: color-mix(in srgb, var(--accent) 22%, transparent);
+  border-color: var(--accent);
+  border-style: solid;
+  transform: scale(1.04);
+}
+
 /* The open drawer's button wears the accent — it draws in nothing, like the
    pointer's; the id outweighs the generic armed-tool rule. */
 #tool-edit[aria-pressed='true'] {
@@ -1647,6 +2106,7 @@ html.deck-pointer-on * { cursor: none !important; }
   #deck-tools,
   #deck-menu,
   #deck-outline,
+  #deck-drop,
   #deck-edit { display: none; }
   /* The signature stays on the exported PDF — but the pill behind it does not
      survive a white page. */