vue-camera-kit/dist/index.css

A versatile Vue 3 camera component for capturing photos and videos with advanced features

.camera-overlay[data-v-49bfc96b]{position:absolute;top:0;left:0;right:0;bottom:0;pointer-events:none;z-index:2}.grid-overlay[data-v-49bfc96b]{position:absolute;top:0;left:0;right:0;bottom:0;border:2px solid rgba(255,255,255,.5)}.watermark[data-v-49bfc96b]{position:absolute;z-index:3;object-fit:contain;pointer-events:none;filter:drop-shadow(0 2px 4px rgba(0,0,0,.3))}.rule-of-thirds[data-v-49bfc96b]{background-image:linear-gradient(rgba(255,255,255,.5) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.5) 1px,transparent 1px);background-size:33.33% 33.33%;background-position:-1px -1px}.golden-ratio[data-v-49bfc96b]{background-image:linear-gradient(rgba(255,255,255,.5) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.5) 1px,transparent 1px);background-size:38.2% 38.2%;background-position:-1px -1px}.center[data-v-49bfc96b]{background-image:linear-gradient(rgba(255,255,255,.5) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.5) 1px,transparent 1px);background-size:50% 50%;background-position:-1px -1px}.vue-camera-kit[data-v-14158381]{position:relative;width:100%;max-width:var(--a1462450);margin:0 auto;overflow:hidden;background:#000;border-radius:8px}.vue-camera-kit video[data-v-14158381]{width:100%;height:auto;max-width:100%;object-fit:cover}.vue-camera-kit.is-recording video[data-v-14158381]{border:2px solid red}.camera-controls[data-v-14158381]{position:absolute;bottom:20px;left:0;right:0;display:flex;justify-content:center;gap:20px;padding:10px}.control-btn[data-v-14158381]{width:60px;height:60px;border-radius:50%;border:none;background:#fffc;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .3s ease}.control-btn[data-v-14158381]:hover{background:#ffffffe6;transform:scale(1.1)}.control-btn[data-v-14158381]:disabled{opacity:.5;cursor:not-allowed}.control-btn.record-video.is-recording[data-v-14158381]{background:#f00c}.preview-modal[data-v-14158381]{position:fixed;top:0;left:0;right:0;bottom:0;background:#000c;display:flex;align-items:center;justify-content:center;z-index:1000}.preview-content[data-v-14158381]{max-width:90%;max-height:90vh;background:#fff;padding:20px;border-radius:8px}.preview-content img[data-v-14158381],.preview-content video[data-v-14158381]{max-width:100%;max-height:70vh}.preview-controls[data-v-14158381]{margin-top:20px;display:flex;justify-content:center;gap:10px}.preview-controls button[data-v-14158381]{padding:10px 20px;border:none;border-radius:4px;background:#007bff;color:#fff;cursor:pointer;transition:background .3s ease}.preview-controls button[data-v-14158381]:hover{background:#0056b3}.control-btn.active[data-v-14158381]{background:#007bffcc;color:#fff}.control-btn.toggle-grid .icon[data-v-14158381],.control-btn.aspect-ratio .icon[data-v-14158381]{font-size:24px}@media (max-width: 768px){.camera-controls[data-v-14158381]{padding:15px;gap:15px}.control-btn[data-v-14158381]{width:50px;height:50px}}@supports (-webkit-touch-callout: none){.vue-camera-kit video[data-v-14158381]{position:relative;z-index:1;width:100%;height:100%;object-fit:cover}}