iqijun_obsidian-image-share/main.css

/* styles.css */
.image-share-modal {
  max-width: none;
  max-height: none;
}
.image-share-modal .resizable-container {
  position: relative;
  width: 680px;
  background: var(--background-primary);
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}
.image-share-modal .resize-handle {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 20px;
  height: 20px;
  cursor: se-resize;
  background: var(--interactive-accent);
  clip-path: polygon(100% 0, 100% 100%, 0 100%);
  opacity: 0.6;
  transition: opacity 0.2s ease;
}
.image-share-modal .resize-handle:hover {
  opacity: 1;
}
.image-share-modal .header {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 20px;
}
.image-share-modal .image-preview-container {
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: 20px 24px;
  box-sizing: border-box;
  gap: 16px;
  position: relative;
}
.image-share-modal .canvas-container {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: 16px;
  background: var(--background-secondary);
  border-radius: 8px;
  min-height: 200px;
  margin-bottom: 60px;
}
.image-share-modal h2 {
  margin: 0;
  color: var(--text-normal);
  font-size: 1.2em;
  font-weight: 600;
  padding: 4px 0;
}
.image-share-modal .download-button {
  position: absolute;
  bottom: 24px;
  right: 24px;
  background: var(--interactive-accent);
  border: none;
  border-radius: 50%;
  width: 48px;
  height: 48px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  padding: 12px;
  color: var(--text-on-accent);
  z-index: 100;
}
.image-share-modal .download-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
}
.image-share-modal .download-button svg {
  width: 24px;
  height: 24px;
}
.image-share-modal canvas {
  max-width: 100%;
  height: auto;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}
.image-share-modal .template-selector {
  display: flex;
  gap: 8px;
}
.image-share-modal .template-button {
  padding: 8px 16px;
  border: 1px solid var(--interactive-accent);
  border-radius: 6px;
  background: transparent;
  color: var(--interactive-accent);
  cursor: pointer;
  transition: all 0.2s ease;
  font-size: 14px;
  font-weight: 500;
}
.image-share-modal .template-button:hover {
  background: var(--interactive-accent);
  color: var(--text-on-accent);
}
.image-share-modal .template-button.active {
  background: var(--interactive-accent);
  color: var(--text-on-accent);
}
.markdown-preview-view {
  font-family:
    "PingFang SC",
    -apple-system,
    BlinkMacSystemFont,
    sans-serif;
  line-height: 1.6;
  overflow: visible;
  word-break: break-word;
  white-space: pre-wrap;
}
.markdown-preview-view h1,
.markdown-preview-view h2,
.markdown-preview-view h3 {
  margin: 0.5em 0;
  font-weight: 600;
}
.markdown-preview-view h1 {
  font-size: 1.5em;
}
.markdown-preview-view h2 {
  font-size: 1.3em;
}
.markdown-preview-view h3 {
  font-size: 1.1em;
}
.markdown-preview-view p {
  margin: 0.5em 0;
}
.markdown-preview-view strong {
  font-weight: 600;
}
.markdown-preview-view em {
  font-style: italic;
}
.markdown-preview-view ul,
.markdown-preview-view ol {
  margin: 0.5em 0;
  padding-left: 1.5em;
}
.markdown-preview-view li {
  margin: 0.2em 0;
}
.markdown-preview-view code {
  font-family: monospace;
  background: rgba(0, 0, 0, 0.1);
  padding: 0.2em 0.4em;
  border-radius: 3px;
}
.markdown-preview-view blockquote {
  border-left: 3px solid currentColor;
  margin: 0.5em 0;
  padding-left: 1em;
  opacity: 0.8;
}

/* markdown-sspai.css */
body {
  font-size: 15px;
  color: #333;
  background: #fff;
  font-family:
    Helvetica,
    Arial,
    "PingFang SC",
    "Microsoft YaHei",
    "WenQuanYi Micro Hei",
    "tohoma,sans-serif";
  margin: 0;
  padding: 10%;
}
h1 {
  font-size: 2.2em;
  font-weight: 700;
  line-height: 1.1;
  padding-top: 16px;
  margin-bottom: 4px;
}
h2,
h3,
h4,
h5,
h6 {
  line-height: 1.5em;
  margin-top: 2.2em;
  margin-bottom: 4px;
}
h2 {
  font-size: 1.4em;
  margin: 40px 10px 20px 0;
  padding-left: 9px;
  border-left: 6px solid #ff7e79;
  font-weight: 700;
  line-height: 1.4;
}
h3 {
  font-weight: 700;
  font-size: 1.2em;
  line-height: 1.4;
  margin: 10px 0 5px;
  padding-top: 10px;
}
h4 {
  font-weight: 700;
  text-transform: uppercase;
  font-size: 1.1em;
  line-height: 1.4;
  margin: 10px 0 5px;
  padding-top: 10px;
}
h5,
h6 {
  font-size: .9em;
}
h5 {
  font-weight: bold;
  text-transform: uppercase;
}
h6 {
  font-weight: normal;
  color: #AAA;
}
img {
  width: 100%;
  border-radius: 5px;
  display: block;
  margin-bottom: 15px;
  height: auto;
}
dl,
ol,
ul {
  margin-top: 12px;
  margin-bottom: 20px;
  padding-left: 5%;
  line-height: 1.8;
}
p {
  margin: 0 0 20px;
  padding: 0;
  line-height: 1.8;
}
a {
  color: #f22f27;
  text-decoration: none;
}
a:hover {
  color: #f55852;
  text-decoration: underline;
}
a:focus {
  outline-offset: -2px;
}
blockquote {
  font-size: 1em;
  font-style: normal;
  padding: 30px 38px;
  margin: 0 0 15px;
  position: relative;
  line-height: 1.8;
  text-indent: 0;
  border: none;
  color: #888;
}
blockquote:before {
  content: "\201c";
  left: 12px;
  top: 0;
  color: #E0E0E0;
  font-size: 4em;
  font-family: Arial, serif;
  line-height: 1em;
  font-weight: 700;
  position: absolute;
}
blockquote:after {
  content: "\201d";
  right: 12px;
  bottom: -26px;
  color: #E0E0E0;
  font-size: 4em;
  font-family: Arial, serif;
  line-height: 1em;
  font-weight: 700;
  position: absolute;
  bottom: -31px;
}
strong,
dfn {
  font-weight: 700;
}
em,
dfn {
  font-style: italic;
  font-weight: 400;
}
del {
  text-decoration: line-through;
}
pre {
  margin: 0 0 10px;
  font-size: 13px;
  line-height: 1.42857;
  word-break: break-all;
  word-wrap: break-word;
  border-radius: 4px;
  white-space: pre-wrap;
  display: block;
  background: #f8f8f8;
  padding: 10px 20px;
  border: none;
  margin-bottom: 25px;
  color: #666;
  font-family: Courier, sans-serif;
}
code {
  color: #c7254e;
  background-color: #f9f2f4;
  border-radius: 4px;
  font-family:
    Menlo,
    Monaco,
    Consolas,
    "Courier New",
    monospace;
  padding: 2px 4px;
  font-size: 90%;
}
p > code {
  color: #c7264e;
  background-color: #f9f2f4;
  font-size: .95em;
  border-radius: 3px;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
}
figure {
  margin: 1em 0;
}
figcaption {
  font-size: 0.75em;
  padding: 0.5em 2em;
  margin-bottom: 2em;
}
figure img {
  margin-bottom: 0px;
}
hr {
  margin-top: 20px;
  margin-bottom: 20px;
  border: 0;
  border-top: 1px solid #eee;
}
ol p,
ul p {
  margin-bottom: 0px;
}
li {
  margin-bottom: 0.75em;
  margin-top: 0.75em;
}
ol#footnotes {
  font-size: 0.95em;
  padding-top: 1em;
  margin-top: 1em;
  margin-left: 0;
  border-top: 1px solid #eaeaea;
  counter-reset: footer-counter;
  list-style: none;
  color: #555;
  padding-left: 5%;
  margin: 20px 0;
}
ol#footnotes li {
  margin-bottom: 10px;
  margin-left: 16px;
  font-weight: 400;
  line-height: 2;
  list-style-type: none;
}
ol#footnotes li:before {
  content: counter(footer-counter) ". ";
  counter-increment: footer-counter;
  font-weight: 800;
  font-size: .95em;
}
@keyframes highfade {
  0% {
    background-color: none;
  }
  20% {
    background-color: yellow;
  }
  100% {
    background-color: none;
  }
}
@-webkit-keyframes highfade {
  0% {
    background-color: none;
  }
  20% {
    background-color: yellow;
  }
  100% {
    background-color: none;
  }
}
a:target,
ol#footnotes li:target,
sup a:target {
  animation-name: highfade;
  animation-duration: 2s;
  animation-iteration-count: 1;
  animation-timing-function: ease-in-out;
  -webkit-animation-name: highfade;
  -webkit-animation-duration: 2s;
  -webkit-animation-iteration-count: 1;
  -webkit-animation-timing-function: ease-in-out;
}
a:target {
  border: 0;
  outline: 0;
}
/*# sourceMappingURL=data:application/json;base64,ewogICJ2ZXJzaW9uIjogMywKICAic291cmNlcyI6IFsic3R5bGVzLmNzcyIsICJtYXJrZG93bi1zc3BhaS5jc3MiXSwKICAic291cmNlc0NvbnRlbnQiOiBbIi8qXG5cblRoaXMgQ1NTIGZpbGUgd2lsbCBiZSBpbmNsdWRlZCB3aXRoIHlvdXIgcGx1Z2luLCBhbmRcbmF2YWlsYWJsZSBpbiB0aGUgYXBwIHdoZW4geW91ciBwbHVnaW4gaXMgZW5hYmxlZC5cblxuSWYgeW91ciBwbHVnaW4gZG9lcyBub3QgbmVlZCBDU1MsIGRlbGV0ZSB0aGlzIGZpbGUuXG5cbiovXG5cbi5pbWFnZS1zaGFyZS1tb2RhbCB7XG4gICAgbWF4LXdpZHRoOiBub25lO1xuICAgIG1heC1oZWlnaHQ6IG5vbmU7XG59XG5cbi5pbWFnZS1zaGFyZS1tb2RhbCAucmVzaXphYmxlLWNvbnRhaW5lciB7XG4gICAgcG9zaXRpb246IHJlbGF0aXZlO1xuICAgIHdpZHRoOiA2ODBweDtcbiAgICBiYWNrZ3JvdW5kOiB2YXIoLS1iYWNrZ3JvdW5kLXByaW1hcnkpO1xuICAgIGJvcmRlci1yYWRpdXM6IDEycHg7XG4gICAgYm94LXNoYWRvdzogMCAycHggOHB4IHJnYmEoMCwgMCwgMCwgMC4xKTtcbiAgICBvdmVyZmxvdzogaGlkZGVuO1xufVxuXG4uaW1hZ2Utc2hhcmUtbW9kYWwgLnJlc2l6ZS1oYW5kbGUge1xuICAgIHBvc2l0aW9uOiBhYnNvbHV0ZTtcbiAgICByaWdodDogMDtcbiAgICBib3R0b206IDA7XG4gICAgd2lkdGg6IDIwcHg7XG4gICAgaGVpZ2h0OiAyMHB4O1xuICAgIGN1cnNvcjogc2UtcmVzaXplO1xuICAgIGJhY2tncm91bmQ6IHZhcigtLWludGVyYWN0aXZlLWFjY2VudCk7XG4gICAgY2xpcC1wYXRoOiBwb2x5Z29uKDEwMCUgMCwgMTAwJSAxMDAlLCAwIDEwMCUpO1xuICAgIG9wYWNpdHk6IDAuNjtcbiAgICB0cmFuc2l0aW9uOiBvcGFjaXR5IDAuMnMgZWFzZTtcbn1cblxuLmltYWdlLXNoYXJlLW1vZGFsIC5yZXNpemUtaGFuZGxlOmhvdmVyIHtcbiAgICBvcGFjaXR5OiAxO1xufVxuXG4uaW1hZ2Utc2hhcmUtbW9kYWwgLmhlYWRlciB7XG4gICAgZGlzcGxheTogZmxleDtcbiAgICBmbGV4LWRpcmVjdGlvbjogY29sdW1uO1xuICAgIGdhcDogMTZweDtcbiAgICBtYXJnaW4tYm90dG9tOiAyMHB4O1xufVxuXG4uaW1hZ2Utc2hhcmUtbW9kYWwgLmltYWdlLXByZXZpZXctY29udGFpbmVyIHtcbiAgICBoZWlnaHQ6IDEwMCU7XG4gICAgZGlzcGxheTogZmxleDtcbiAgICBmbGV4LWRpcmVjdGlvbjogY29sdW1uO1xuICAgIHBhZGRpbmc6IDIwcHggMjRweDtcbiAgICBib3gtc2l6aW5nOiBib3JkZXItYm94O1xuICAgIGdhcDogMTZweDtcbiAgICBwb3NpdGlvbjogcmVsYXRpdmU7XG59XG5cbi5pbWFnZS1zaGFyZS1tb2RhbCAuY2FudmFzLWNvbnRhaW5lciB7XG4gICAgZGlzcGxheTogZmxleDtcbiAgICBqdXN0aWZ5LWNvbnRlbnQ6IGNlbnRlcjtcbiAgICBhbGlnbi1pdGVtczogZmxleC1zdGFydDtcbiAgICBwYWRkaW5nOiAxNnB4O1xuICAgIGJhY2tncm91bmQ6IHZhcigtLWJhY2tncm91bmQtc2Vjb25kYXJ5KTtcbiAgICBib3JkZXItcmFkaXVzOiA4cHg7XG4gICAgbWluLWhlaWdodDogMjAwcHg7XG4gICAgbWFyZ2luLWJvdHRvbTogNjBweDtcbn1cblxuLmltYWdlLXNoYXJlLW1vZGFsIGgyIHtcbiAgICBtYXJnaW46IDA7XG4gICAgY29sb3I6IHZhcigtLXRleHQtbm9ybWFsKTtcbiAgICBmb250LXNpemU6IDEuMmVtO1xuICAgIGZvbnQtd2VpZ2h0OiA2MDA7XG4gICAgcGFkZGluZzogNHB4IDA7XG59XG5cbi5pbWFnZS1zaGFyZS1tb2RhbCAuZG93bmxvYWQtYnV0dG9uIHtcbiAgICBwb3NpdGlvbjogYWJzb2x1dGU7XG4gICAgYm90dG9tOiAyNHB4O1xuICAgIHJpZ2h0OiAyNHB4O1xuICAgIGJhY2tncm91bmQ6IHZhcigtLWludGVyYWN0aXZlLWFjY2VudCk7XG4gICAgYm9yZGVyOiBub25lO1xuICAgIGJvcmRlci1yYWRpdXM6IDUwJTtcbiAgICB3aWR0aDogNDhweDtcbiAgICBoZWlnaHQ6IDQ4cHg7XG4gICAgY3Vyc29yOiBwb2ludGVyO1xuICAgIGRpc3BsYXk6IGZsZXg7XG4gICAgYWxpZ24taXRlbXM6IGNlbnRlcjtcbiAgICBqdXN0aWZ5LWNvbnRlbnQ6IGNlbnRlcjtcbiAgICB0cmFuc2l0aW9uOiBhbGwgMC4ycyBlYXNlO1xuICAgIGJveC1zaGFkb3c6IDAgNHB4IDEycHggcmdiYSgwLCAwLCAwLCAwLjE1KTtcbiAgICBwYWRkaW5nOiAxMnB4O1xuICAgIGNvbG9yOiB2YXIoLS10ZXh0LW9uLWFjY2VudCk7XG4gICAgei1pbmRleDogMTAwO1xufVxuXG4uaW1hZ2Utc2hhcmUtbW9kYWwgLmRvd25sb2FkLWJ1dHRvbjpob3ZlciB7XG4gICAgdHJhbnNmb3JtOiB0cmFuc2xhdGVZKC0ycHgpO1xuICAgIGJveC1zaGFkb3c6IDAgNnB4IDE2cHggcmdiYSgwLCAwLCAwLCAwLjIpO1xufVxuXG4uaW1hZ2Utc2hhcmUtbW9kYWwgLmRvd25sb2FkLWJ1dHRvbiBzdmcge1xuICAgIHdpZHRoOiAyNHB4O1xuICAgIGhlaWdodDogMjRweDtcbn1cblxuLmltYWdlLXNoYXJlLW1vZGFsIGNhbnZhcyB7XG4gICAgbWF4LXdpZHRoOiAxMDAlO1xuICAgIGhlaWdodDogYXV0bztcbiAgICBib3JkZXItcmFkaXVzOiA4cHg7XG4gICAgYm94LXNoYWRvdzogMCAycHggMTJweCByZ2JhKDAsIDAsIDAsIDAuMSk7XG59XG5cbi5pbWFnZS1zaGFyZS1tb2RhbCAudGVtcGxhdGUtc2VsZWN0b3Ige1xuICAgIGRpc3BsYXk6IGZsZXg7XG4gICAgZ2FwOiA4cHg7XG59XG5cbi5pbWFnZS1zaGFyZS1tb2RhbCAudGVtcGxhdGUtYnV0dG9uIHtcbiAgICBwYWRkaW5nOiA4cHggMTZweDtcbiAgICBib3JkZXI6IDFweCBzb2xpZCB2YXIoLS1pbnRlcmFjdGl2ZS1hY2NlbnQpO1xuICAgIGJvcmRlci1yYWRpdXM6IDZweDtcbiAgICBiYWNrZ3JvdW5kOiB0cmFuc3BhcmVudDtcbiAgICBjb2xvcjogdmFyKC0taW50ZXJhY3RpdmUtYWNjZW50KTtcbiAgICBjdXJzb3I6IHBvaW50ZXI7XG4gICAgdHJhbnNpdGlvbjogYWxsIDAuMnMgZWFzZTtcbiAgICBmb250LXNpemU6IDE0cHg7XG4gICAgZm9udC13ZWlnaHQ6IDUwMDtcbn1cblxuLmltYWdlLXNoYXJlLW1vZGFsIC50ZW1wbGF0ZS1idXR0b246aG92ZXIge1xuICAgIGJhY2tncm91bmQ6IHZhcigtLWludGVyYWN0aXZlLWFjY2VudCk7XG4gICAgY29sb