iqijun_obsidian-image-share/main.css

.image-share-modal{max-width:2000px;max-height:2000px;transition:width .3s ease,height .3s ease;animation:modal-in .3s ease;background-color:#121212;border:none;border-radius:0;box-shadow:0 10px 30px #00000080}.image-share-modal .resizable-container{position:relative;width:100%;height:100%;background:#121212;border-radius:0;box-shadow:none;overflow:hidden;transition:box-shadow .3s ease;display:flex;flex-direction:row;border:none}.theme-dark .image-share-modal .resizable-container{box-shadow:none}.image-share-modal .controls-panel{min-width:280px;width:280px;padding:0;border-right:1px solid var(--background-modifier-border);display:flex;flex-direction:column;gap:0;background:#181818;overflow-y:auto;overflow-x:hidden;height:100%;max-height:100%;color:#e0e0e0}.image-share-modal .controls-panel h2{background-color:#181818;margin:0;padding:20px;border-bottom:1px solid rgba(255,255,255,.1);text-align:center;color:#fff;font-size:1.2em;font-weight:500;letter-spacing:.02em}.image-share-modal .flex-spacer{flex-grow:1;min-height:20px}.image-share-modal .control-section{display:flex;flex-direction:column;gap:16px;padding:20px;border-bottom:1px solid rgba(255,255,255,.1)}.image-share-modal .control-section:last-child{border-bottom:none;padding-bottom:20px}.image-share-modal .download-section{margin-top:0}.image-share-modal .preview-panel{flex:1;display:flex;flex-direction:column;padding:0;overflow:hidden;background-color:#121212;position:relative;height:100%}.image-share-modal .preview-panel h2{margin:0;padding:20px;color:#fff;font-size:1.2em;font-weight:500;text-align:center;position:sticky;top:0;background-color:#121212;z-index:5;border-bottom:1px solid rgba(255,255,255,.1)}.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:.6;transition:opacity .2s ease}.image-share-modal .resize-handle:hover{opacity:1}.image-share-modal .header{display:flex;flex-direction:column;align-items:center;gap:16px;margin-bottom:24px;padding-bottom:16px;border-bottom:1px solid var(--background-modifier-border)}.image-share-modal .image-preview-container{height:100%;display:flex;flex-direction:column;box-sizing:border-box;gap:16px;position:relative;width:100%;font-size:16px;line-height:2;letter-spacing:.05em}.image-share-modal .canvas-container{display:flex;justify-content:center;align-items:flex-start;padding:20px;background:#121212;border-radius:0;min-height:200px;width:100%;flex:1;overflow:auto;-webkit-overflow-scrolling:touch;transition:background-color .3s ease}.image-share-modal h2{margin:0 0 16px;color:var(--text-normal);font-size:1.4em;font-weight:600;padding:4px 0;text-align:center;letter-spacing:.02em}.image-share-modal .section-title{font-size:1em;font-weight:500;margin:0 0 8px;color:#aaa;opacity:.9}.image-share-modal canvas{height:auto!important;border-radius:0;box-shadow:0 2px 12px #0003;image-rendering:-webkit-optimize-contrast;image-rendering:crisp-edges;transform:translateZ(0);backface-visibility:hidden;min-width:auto;min-height:auto}.image-share-modal .template-selector{display:flex;flex-direction:column;gap:12px;width:100%}.image-share-modal .template-button{padding:12px 16px;border:none;border-radius:8px;background:#252525;color:#e0e0e0;cursor:pointer;transition:all .2s ease;font-size:14px;font-weight:500;box-shadow:0 2px 4px #0003;display:flex;align-items:center;gap:8px;text-align:left}.image-share-modal .template-button svg{min-width:16px;color:#aaa}.image-share-modal .template-button:hover{background:#303030;transform:translateY(-2px);box-shadow:0 4px 8px #00000040}.image-share-modal .template-button.active{background:#7c5ef2;color:#fff;box-shadow:0 2px 8px #7c5ef266}.image-share-modal .template-button.active svg{color:#fff}.image-preview-container .markdown-preview-view{padding:24px}.text-preview-modal .text-preview-container{display:flex;flex-direction:column;height:100%}.text-preview-modal .preview-container{flex:1;overflow-y:auto;margin-bottom:16px}.text-preview-modal .button-container{display:flex;justify-content:center;padding:8px 0;border-top:1px solid var(--background-modifier-border)}.text-preview-modal .button-container button{padding:8px 16px}.elegant-download-button{width:100%;height:48px;border-radius:8px;background-color:#7c5ef2;box-shadow:0 4px 12px #7c5ef24d;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .3s cubic-bezier(.25,.8,.25,1);z-index:10;gap:8px;color:#fff;font-weight:500}.elegant-download-button:hover{background-color:#8f74f3;box-shadow:0 6px 16px #7c5ef266;transform:translateY(-2px)}.elegant-download-button svg{color:#fff;width:20px;height:20px}.elegant-download-button.clicked{transform:scale(.98);box-shadow:0 2px 8px #7c5ef233}.theme-dark .elegant-download-button{background-color:var(--interactive-accent)}.theme-dark .elegant-download-button:hover{background-color:var(--interactive-accent-hover)}.theme-dark .elegant-download-button svg{color:var(--text-on-accent)}.download-toast{position:fixed;bottom:30px;left:50%;transform:translate(-50%);padding:12px 20px;background-color:#252525;color:#e0e0e0;border-radius:8px;display:flex;align-items:center;gap:10px;box-shadow:0 4px 16px #0000004d;z-index:1000;animation:toast-in .3s ease forwards}.download-toast svg{width:20px;height:20px;color:#7c5ef2}.download-toast span{font-size:14px;font-weight:500}.download-toast.hide{animation:toast-out .3s ease forwards}@keyframes toast-in{0%{transform:translate(-50%,20px);opacity:0}to{transform:translate(-50%);opacity:1}}@keyframes toast-out{0%{transform:translate(-50%);opacity:1}to{transform:translate(-50%,20px);opacity:0}}.theme-dark .image-share-modal .canvas-container{background:#121212;box-shadow:none}@keyframes modal-in{0%{opacity:0;transform:scale(.98)}to{opacity:1;transform:scale(1)}}.theme-dark .image-share-modal .preview-panel{background-color:#121212}.image-share-modal .buttons-container{display:flex;gap:12px;width:100%}.image-share-modal .buttons-container.vertical{flex-direction:column;gap:16px}.elegant-button{flex:1;height:48px;border-radius:8px;background-color:#7c5ef2;box-shadow:0 4px 12px #7c5ef24d;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .3s cubic-bezier(.25,.8,.25,1);z-index:10;gap:8px;color:#fff;font-weight:500}.elegant-button:hover{background-color:#8f74f3;box-shadow:0 6px 16px #7c5ef266;transform:translateY(-2px)}.elegant-button svg{color:#fff;width:20px;height:20px}.elegant-button.clicked{transform:scale(.98);box-shadow:0 2px 8px #7c5ef233}.elegant-button.copy-button{background-color:#2d9e6d;box-shadow:0 4px 12px #2d9e6d4d}.elegant-button.copy-button:hover{background-color:#33b97e;box-shadow:0 6px 16px #2d9e6d66}.elegant-button.copy-button.clicked{box-shadow:0 2px 8px #2d9e6d33}.elegant-button.download-button{background-color:#7c5ef2;box-shadow:0 4px 12px #7c5ef24d}.temp-markdown-container{position:absolute;left:-9999px;box-sizing:border-box;word-break:break-word;overflow-wrap:break-word;word-wrap:break-word;hyphens:auto;font-family:PingFang SC,Microsoft YaHei,Hiragino Sans GB,WenQuanYi Micro Hei,sans-serif;height:auto;padding:24px}.temp-markdown-container.light-theme{background:#f8f9fc;color:#2c3e50}.temp-markdown-container.dark-theme{background:#2d3436;color:#e2e2e2}.temp-date-metadata{font-size:13px;margin-bottom:20px}.temp-date-metadata.light-theme{color:#666}.temp-date-metadata.dark-theme{color:#999}.enhanced-text-rendering{text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow:visible}.zoom-out-icon,.zoom-in-icon,.download-icon,.copy-icon,.light-template-icon,.dark-template-icon{display:inline-block}.modal-layout{display:flex;flex-direction:column}.modal-content-layout{width:100%;height:100%;display:flex;flex-direction:column}.canvas-preview{display:none}.markdown-style-base{font-size:16px;line-height:2em;letter-spacing:.12em}.markdown-style-base p{margin:1.8em 5px!important;padding:.2em 0}.markdown-style-base li{margin:12px 0;line-height:1.8em}.markdown-style-base h1,.markdown-style-base h2,.markdown-style-base h3,.markdown-style-base h4,.markdown-style-base h5,.markdown-style-base h6{margin:28px 0 18px!important;padding:.6em 1em!important;line-height:1.5em}.markdown-style-base blockquote,.markdown-style-base q{padding:10px 15px;margin:15px 0;line-height:1.8em}.markdown-style-base ul,.markdown-style-base ol{padding-left:25px;margin:15px 5px}.markdown-style-base pre{margin:15px 0;padding:12px;line-height:1.5em}.markdown-style-base .markdown-preview-sizer{padding:10px 5px}.markdown-style-base pre,.markdown-style-base code{font-size:14px;font-family:Roboto,Courier New,Consolas,Inconsolata,Courier,monospace;margin:auto 5px}.markdown-style-base code{white-space:pre-wrap;border-radius:2px;display:inline}.markdown-style-base pre{font-size:15px;line-height:1.4em;display:block!important}.markdown-style-base pre code{white-space:pre;overflow:auto;border-radius:3px;padding:1px;display:block!important}.markdown-style-base table{padding:0;border-collapse:collapse;border-spacing:0;font-size:1em;font:inherit;border:0;margin:0 auto}.markdown-style-base tbody{margin:0;padding:0;border:0}.markdown-style-base table tr{border:0;border-top:1px solid #CCC;background-color:#fff;margin:0;padding:0}.markdown-style-base table tr:nth-child(2n){background-color:#f8f8f8}.markdown-style-base table tr th,.markdown-style-base table tr td{font-size:16px;border:1px solid #CCC;margin:0;padding:5px 10px}.markdown-style-default strong,.markdown-style-default b{color:#bf360c}.markdown-style-default em,.markdown-style-default i{color:#009688}.markdown-style-default hr{border:1px solid #BF360C;margin:1.5em auto}.markdown-style-default blockquote,.markdown-style-default q{border-left:2px solid #009688;padding:0 10px;color:#777;quotes:none;margin-left:1em}.markdown-style-default h1,.markdown-style-default h2,.markdown-style-default h3,.markdown-style-default h4,.markdown-style-default h5,.markdown-style-default h6{font-style:bold!important;color:#009688!important;text-align:center!important;margin:1.5em 5px!important;padding:.5em 1em!important}.markdown-style-default h1{font-size:24px!important;border-bottom:1px solid #ddd!important}.markdown-style-default h2{font-size:20px!important;border-bottom:1px solid #eee!important}.markdown-style-default h3{font-size:18px}.markdown-style-default h4{font-size:16px}.markdown-style-default table tr th{font-weight:700;color:#eee;border:1px solid #009688;background-color:#009688}.markdown-style-modern strong,.markdown-style-modern b{color:#e91e63}.markdown-style-modern em,.markdown-style-modern i{color:#2196f3}.markdown-style-modern hr{border:1px solid #E91E63;margin:1.5em auto}.markdown-style-modern blockquote,.markdown-style-modern q{border-left:2px solid #2196F3;padding:0 10px;color:#555;quotes:none;margin-left:1em}.markdown-style-modern h1,.markdown-style-modern h2,.markdown-style-modern h3,.markdown-style-modern h4,.markdown-style-modern h5,.markdown-style-modern h6{font-style:bold!important;color:#2196f3!important;text-align:center!important;margin:1.5em 5px!important;padding:.5em 1em!important}.markdown-style-modern h1{font-size:24px!important;border-bottom:1px solid #eee!important}.markdown-style-modern h2{font-size:20px!important;border-bottom:1px solid #f5f5f5!important}.markdown-style-modern h3{font-size:18px}.markdown-style-modern h4{font-size:16px}.markdown-style-modern table tr th{font-weight:700;color:#fff;border:1px solid #2196F3;background-color:#2196f3}.markdown-style-minimal strong,.markdown-style-minimal b{color:#424242;font-weight:600}.markdown-style-minimal em,.markdown-style-minimal i{color:#616161}.markdown-style-minimal hr{border:1px solid #e0e0e0;margin:1.5em auto}.markdown-style-minimal blockquote,.markdown-style-minimal q{border-left:2px solid #e0e0e0;padding:0 10px;color:#757575;quotes:none;margin-left:1em}.markdown-style-minimal h1,.markdown-style-minimal h2,.markdown-style-minimal h3,.markdown-style-minimal h4,.markdown-style-minimal h5,.markdown-style-minimal h6{font-style:normal!important;color:#424242!important;text-align:left!important;margin:1.5em 5px!important;padding:.3em 0!important}.markdown-style-minimal h1{font-size:24px!important;border-bottom:1px solid #f5f5f5!important}.markdown-style-minimal h2{font-size:20px!important;border-bottom:1px solid #fafafa!important}.markdown-style-minimal h3{font-size:18px}.markdown-style-minimal h4{font-size:16px}.markdown-style-minimal table tr th{font-weight:500;color:#424242;border:1px solid #e0e0e0;background-color:#fafafa}.style-selector{display:flex;flex-direction:column;gap:12px;width:100%}.style-button{padding:12px 16px;border:none;border-radius:8px;background:#252525;color:#e0e0e0;cursor:pointer;transition:all .2s ease;font-size:14px;font-weight:500;box-shadow:0 2px 4px #0003;display:flex;align-items:center;gap:8px;text-align:left}.style-button:hover{background:#303030;transform:translateY(-2px);box-shadow:0 4px 8px #00000040}.style-button.active{background:#7c5ef2;color:#fff;box-shadow:0 2px 8px #7c5ef266}.cloned-preview-container{padding:24px;box-sizing:border-box}.temp-container{box-sizing:border-box;padding:24px}.template-width-760{width:760px}.template-width-800{width:800px}.dynamic-height{height:var(--content-height)}.temp-div{padding:24px;box-sizing:border-box}.style-description{display:block;font-size:12px;opacity:.7;margin-top:4px}.image-share-modal .zoom-controls,.image-share-modal .zoom-button,.image-share-modal .zoom-text,.zoom-out-icon,.zoom-in-icon,.canvas-preview{display:none}