2025-05-01 10:47:40 +00:00
|
|
|
.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{
|
