new functions and js v=

2026-07-25 17:15:54 +02:00
parent d1d8bb0259
commit 0a02a0880e
31 changed files with 1035 additions and 610 deletions
@@ -3868,4 +3868,192 @@ dialog::backdrop {

 .markdown-body .contains-task-items>.task-list-item {
  list-style: none;
-}
+}
+
+/* Keep the editor gutter inside the mobile workspace. */
+@media (max-width: 720px) {
+  .pad-page .editor-shell {
+    grid-template-columns: 38px minmax(0, 1fr);
+    min-width: 0;
+    max-width: 100%;
+  }
+
+  .pad-page .line-gutter {
+    width: 38px;
+    min-width: 0;
+    padding-right: 0;
+    overflow: hidden;
+  }
+
+  .pad-page .line-gutter div {
+    padding-right: 6px;
+  }
+
+  .pad-page .owner-labels {
+    left: 38px;
+  }
+
+  .pad-page.hide-editor-line-numbers .editor-shell {
+    grid-template-columns: 0 minmax(0, 1fr);
+  }
+}
+
+.emoji-picker {
+  position: relative;
+}
+
+.emoji-picker > summary {
+  display: flex;
+  align-items: center;
+  min-height: 34px;
+  padding: 0 9px;
+  border: 1px solid transparent;
+  border-radius: 7px;
+  color: #b8c0cc;
+  font-size: .78rem;
+  list-style: none;
+  cursor: pointer;
+  white-space: nowrap;
+}
+
+.emoji-picker > summary::-webkit-details-marker {
+  display: none;
+}
+
+.emoji-picker > summary:hover,
+.emoji-picker[open] > summary {
+  border-color: var(--border);
+  background: var(--surface-2);
+  color: white;
+}
+
+.emoji-picker-panel {
+  position: absolute;
+  top: calc(100% + 8px);
+  left: 0;
+  z-index: 40;
+  width: min(360px, calc(100vw - 24px));
+  padding: 10px;
+  border: 1px solid var(--border-strong);
+  border-radius: 10px;
+  background: #11151c;
+  box-shadow: 0 14px 40px rgba(0, 0, 0, .45);
+}
+
+.emoji-search {
+  width: 100%;
+  min-height: 36px;
+  margin: 0 0 8px;
+}
+
+.emoji-categories {
+  display: flex;
+  gap: 3px;
+  padding-bottom: 7px;
+  overflow-x: auto;
+  scrollbar-width: thin;
+}
+
+.editor-toolbar .emoji-category,
+.editor-toolbar .emoji-item {
+  display: grid;
+  place-items: center;
+  flex: 0 0 auto;
+  padding: 0;
+  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
+}
+
+.editor-toolbar .emoji-category {
+  width: 31px;
+  min-height: 31px;
+  border-color: transparent;
+  font-size: 1rem;
+}
+
+.editor-toolbar .emoji-category[aria-pressed="true"] {
+  border-color: var(--border-strong);
+  background: var(--surface-2);
+}
+
+.emoji-grid {
+  display: grid;
+  grid-template-columns: repeat(8, minmax(0, 1fr));
+  gap: 3px;
+  max-height: 290px;
+  overflow-y: auto;
+  overscroll-behavior: contain;
+}
+
+.editor-toolbar .emoji-item {
+  width: 100%;
+  min-height: 38px;
+  border-color: transparent;
+  font-size: 1.45rem;
+  line-height: 1;
+}
+
+.editor-toolbar .emoji-item:hover,
+.editor-toolbar .emoji-item:focus-visible {
+  border-color: var(--border);
+  background: var(--surface-2);
+  transform: scale(1.08);
+}
+
+.emoji-empty {
+  margin: 18px 0 10px;
+  color: var(--muted);
+  text-align: center;
+  font-size: .82rem;
+}
+
+@media (max-width: 720px) {
+  .emoji-picker-panel {
+    position: fixed;
+    left: 12px;
+    right: 12px;
+    top: auto;
+    bottom: 58px;
+    width: auto;
+  }
+
+  .emoji-grid {
+    grid-template-columns: repeat(7, minmax(0, 1fr));
+    max-height: min(45vh, 320px);
+  }
+}
+
+.share-link-info {
+  display: grid;
+  gap: 6px;
+}
+
+.share-link-inline {
+  display: grid;
+  grid-template-columns: minmax(180px, 1fr) auto;
+  gap: 7px;
+  align-items: center;
+  margin-top: 3px;
+}
+
+.share-link-inline input {
+  width: 100%;
+  min-width: 0;
+  min-height: 36px;
+  padding: 0 10px;
+  border: 1px solid var(--border-strong);
+  border-radius: 7px;
+  background: #10141a;
+  color: var(--text);
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+  font-size: .76rem;
+}
+
+.share-link-legacy {
+  color: var(--warning, #d6a84b) !important;
+}
+
+@media (max-width: 800px) {
+  .share-link-inline {
+    grid-template-columns: 1fr;
+  }
+}