paste files, images

static/css/styles.css

@@ -2111,6 +2111,149 @@ dialog::backdrop {
   max-height: calc(100vh - 210px);
 }
 
+.markdown-alias-image {
+  position: relative;
+  display: block;
+  width: max-content;
+  max-width: 100%;
+  margin: .45em 0;
+  line-height: 0;
+}
+
+.markdown-alias-image--left {
+  margin-right: auto;
+  margin-left: 0;
+}
+
+.markdown-alias-image--center {
+  margin-right: auto;
+  margin-left: auto;
+}
+
+.markdown-alias-image--right {
+  margin-right: 0;
+  margin-left: auto;
+}
+
+.markdown-alias-image--sized {
+  width: min(var(--image-width), 100%);
+  aspect-ratio: var(--image-aspect);
+}
+
+.markdown-alias-image>img {
+  margin: 0;
+}
+
+.markdown-alias-image--sized>img {
+  width: 100%;
+  height: 100%;
+  max-width: none;
+  object-fit: contain;
+}
+
+.preview .markdown-alias-image.is-selected {
+  border-radius: 8px;
+  outline: 2px solid var(--accent);
+  outline-offset: 3px;
+}
+
+.image-alias-tools {
+  position: absolute;
+  z-index: 4;
+  top: 8px;
+  right: 8px;
+  left: 8px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  flex-wrap: wrap;
+  padding: 6px;
+  border: 1px solid var(--border-strong);
+  border-radius: 8px;
+  background: var(--surface-dialog);
+  box-shadow: 0 8px 24px var(--shadow-28);
+  line-height: 1.2;
+}
+
+.image-alias-align,
+.image-alias-size {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+
+.image-alias-tools button,
+.image-alias-tools input {
+  min-height: 28px;
+  border: 1px solid var(--border);
+  border-radius: 6px;
+  background: var(--surface);
+  color: var(--text-max);
+  font: inherit;
+}
+
+.image-alias-tools button {
+  padding: 4px 8px;
+  cursor: pointer;
+}
+
+.image-alias-tools button:hover,
+.image-alias-tools button.active {
+  border-color: var(--accent);
+  background: color-mix(in srgb, var(--accent) 12%, transparent);
+}
+
+.image-alias-size label {
+  display: inline-flex;
+  align-items: center;
+  gap: 3px;
+  color: var(--muted);
+  font-size: .72rem;
+}
+
+.image-alias-size input {
+  width: 66px;
+  padding: 3px 5px;
+}
+
+.image-alias-resize {
+  position: absolute;
+  z-index: 5;
+  right: -7px;
+  bottom: -7px;
+  width: 18px;
+  height: 18px;
+  padding: 0;
+  border: 2px solid var(--surface);
+  border-radius: 50%;
+  background: var(--accent);
+  cursor: nwse-resize;
+  touch-action: none;
+}
+
+.markdown-alias-image.is-resizing {
+  user-select: none;
+}
+
+@media (max-width: 680px) {
+  .image-alias-tools {
+    top: 4px;
+    right: 4px;
+    left: 4px;
+    padding: 4px;
+  }
+
+  .image-alias-align,
+  .image-alias-size {
+    flex-wrap: wrap;
+  }
+
+  .image-alias-tools button {
+    padding-inline: 6px;
+  }
+}
+
 .note-card-wrap {
   position: relative;
   border: 1px solid var(--border);