vue3-watermark-camera/dist/style.css

A Vue 3 component for taking photos with watermark support

.watermark-camera[data-v-6321a964]{display:inline-block}.camera-btn-group[data-v-6321a964]{display:flex;gap:16px}.camera-btn[data-v-6321a964]{width:80px;height:80px;background:#f7f8fa;border-radius:8px;display:flex;flex-direction:column;align-items:center;justify-content:center;box-shadow:0 8px 32px #0000000a;border:none;cursor:pointer;transition:box-shadow .2s;position:relative}.camera-btn[data-v-6321a964]:active{box-shadow:0 4px 16px #00000014}.camera-icon[data-v-6321a964]{display:block;width:28px;height:28px;background:url(data:image/png;base64,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) center center no-repeat;background-size:contain;opacity:.5;margin-bottom:4px}.camera-icon.flip[data-v-6321a964]{transform:scaleX(-1)}.camera-label[data-v-6321a964]{font-size:12px;color:#888}.photo-thumb[data-v-6321a964]{position:relative;display:inline-block}.thumb-img[data-v-6321a964]{width:80px;height:80px;object-fit:cover;border-radius:8px;border:1px solid #eee;cursor:pointer}.delete-btn[data-v-6321a964]{position:absolute;top:4px;right:4px;background:#00000080;border-radius:50%;width:24px;height:24px;display:flex;align-items:center;justify-content:center;cursor:pointer}.modal-mask[data-v-6321a964]{position:fixed;left:0;top:0;right:0;bottom:0;background:#000000d9;display:flex;align-items:center;justify-content:center;z-index:9999}.close-btn[data-v-6321a964]{position:absolute;top:30px;right:10px;width:40px;height:40px;background:#0009;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:10000;transition:background-color .2s}.close-btn[data-v-6321a964]:hover{background:#000c}.close-btn[data-v-6321a964]:active{background:#000000e6}.modal-content[data-v-6321a964]{position:relative;display:flex;align-items:center;justify-content:center;width:100%;height:100%}.modal-img-full[data-v-6321a964]{max-width:96vw;max-height:90vh;border-radius:12px;object-fit:contain;box-shadow:0 4px 24px #00000040;background:#e25656}