vue3plate-auth-sanctum/dist/style.css

Vue 3 authentication package for vue3plate boilerplate that integrates with Laravel Sanctum

.login-form[data-v-de152c65]{max-width:400px;width:100%;padding:2rem;background:white;border-radius:12px;box-shadow:0 10px 25px #0000001a}.form-header[data-v-de152c65]{text-align:center;margin-bottom:2rem}.form-title[data-v-de152c65]{font-size:1.75rem;font-weight:700;color:#1f2937;margin:0 0 .5rem}.form-subtitle[data-v-de152c65]{color:#6b7280;margin:0}.error-message[data-v-de152c65]{display:flex;align-items:center;gap:.5rem;padding:.75rem 1rem;background:#fef2f2;border:1px solid #fecaca;border-radius:8px;color:#dc2626;font-size:.875rem;margin-bottom:1.5rem}.form-group[data-v-de152c65]{margin-bottom:1.5rem}.form-label[data-v-de152c65]{display:block;font-weight:500;color:#374151;margin-bottom:.5rem}.input-group[data-v-de152c65]{position:relative}.input-icon[data-v-de152c65]{position:absolute;left:1rem;top:50%;transform:translateY(-50%);color:#9ca3af;z-index:1}.form-input[data-v-de152c65]{width:100%;padding:.75rem 1rem .75rem 2.75rem;border:1px solid #d1d5db;border-radius:8px;font-size:1rem;transition:all .15s ease;box-sizing:border-box}.form-input[data-v-de152c65]:focus{outline:none;border-color:#3b82f6;box-shadow:0 0 0 3px #3b82f61a}.form-input.error[data-v-de152c65]{border-color:#dc2626}.password-toggle[data-v-de152c65]{position:absolute;right:1rem;top:50%;transform:translateY(-50%);background:none;border:none;color:#9ca3af;cursor:pointer;padding:.25rem;z-index:1}.password-toggle[data-v-de152c65]:hover{color:#6b7280}.field-error[data-v-de152c65]{display:block;color:#dc2626;font-size:.875rem;margin-top:.25rem}.checkbox-label[data-v-de152c65]{display:flex;align-items:center;gap:.5rem;cursor:pointer;font-size:.875rem;color:#374151}.checkbox-input[data-v-de152c65]{display:none}.checkbox-custom[data-v-de152c65]{width:1rem;height:1rem;border:1px solid #d1d5db;border-radius:3px;position:relative;transition:all .15s ease}.checkbox-input:checked+.checkbox-custom[data-v-de152c65]{background:#3b82f6;border-color:#3b82f6}.checkbox-input:checked+.checkbox-custom[data-v-de152c65]:after{content:"✓";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);color:#fff;font-size:.75rem;font-weight:700}.submit-button[data-v-de152c65]{width:100%;padding:.875rem 1.5rem;background:#3b82f6;color:#fff;border:none;border-radius:8px;font-size:1rem;font-weight:500;cursor:pointer;transition:all .15s ease;display:flex;align-items:center;justify-content:center;gap:.5rem}.submit-button[data-v-de152c65]:hover:not(:disabled){background:#2563eb}.submit-button[data-v-de152c65]:disabled{opacity:.6;cursor:not-allowed}.button-icon[data-v-de152c65]{font-size:.875rem}.form-footer[data-v-de152c65]{margin-top:1.5rem;text-align:center}.forgot-link[data-v-de152c65]{color:#3b82f6;text-decoration:none;font-size:.875rem;margin-bottom:1rem;display:inline-block}.forgot-link[data-v-de152c65]:hover{text-decoration:underline}.signup-prompt[data-v-de152c65]{font-size:.875rem;color:#6b7280}.signup-link[data-v-de152c65]{color:#3b82f6;text-decoration:none;font-weight:500}.signup-link[data-v-de152c65]:hover{text-decoration:underline}@media (max-width: 480px){.login-form[data-v-de152c65]{padding:1.5rem}.form-title[data-v-de152c65]{font-size:1.5rem}}.login-page[data-v-999b0c89]{min-height:100vh;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#0f172a 0%,#1e293b 40%,#334155 100%);padding:2rem;position:relative;overflow:hidden}.login-page[data-v-999b0c89]:before{content:"";position:absolute;top:0;left:0;right:0;bottom:0;background:radial-gradient(circle at 20% 30%,rgba(59,130,246,.15) 0%,transparent 50%),radial-gradient(circle at 80% 70%,rgba(16,185,129,.1) 0%,transparent 50%),radial-gradient(circle at 40% 80%,rgba(139,92,246,.08) 0%,transparent 50%);z-index:1}.login-container[data-v-999b0c89]{max-width:900px;width:100%;position:relative;z-index:2}.login-content[data-v-999b0c89]{display:grid;grid-template-columns:1fr 1fr;gap:4rem;align-items:center;background:rgba(255,255,255,.95);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border-radius:20px;padding:3rem;box-shadow:0 25px 50px #0f172a66,0 0 60px #3b82f61a;border:1px solid rgba(148,163,184,.1)}.brand-section[data-v-999b0c89]{text-align:center;padding:2rem}.brand-logo[data-v-999b0c89]{width:80px;height:80px;background:linear-gradient(135deg,#3b82f6 0%,#8b5cf6 100%);border-radius:20px;display:flex;align-items:center;justify-content:center;margin:0 auto 2rem;font-size:2rem;color:#fff;box-shadow:0 10px 25px #3b82f64d}.brand-title[data-v-999b0c89]{font-size:3rem;font-weight:800;background:linear-gradient(135deg,#3b82f6 0%,#8b5cf6 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin:0 0 1rem;line-height:1.1}.brand-subtitle[data-v-999b0c89]{font-size:1.25rem;color:#6b7280;margin:0;font-weight:500}@media (max-width: 768px){.login-content[data-v-999b0c89]{grid-template-columns:1fr;gap:2rem;padding:2rem}.brand-section[data-v-999b0c89]{padding:1rem}.brand-title[data-v-999b0c89]{font-size:2.5rem}.brand-logo[data-v-999b0c89]{width:60px;height:60px;font-size:1.5rem}}@media (max-width: 480px){.login-page[data-v-999b0c89]{padding:1rem}.login-content[data-v-999b0c89]{padding:1.5rem}.brand-title[data-v-999b0c89]{font-size:2rem}.brand-subtitle[data-v-999b0c89]{font-size:1.1rem}}.register-form[data-v-be35a40f]{max-width:500px;width:100%;padding:2rem;background:white;border-radius:12px;box-shadow:0 10px 25px #0000001a}.form-header[data-v-be35a40f]{text-align:center;margin-bottom:2rem}.form-title[data-v-be35a40f]{font-size:1.75rem;font-weight:700;color:#1f2937;margin:0 0 .5rem}.form-subtitle[data-v-be35a40f]{color:#6b7280;margin:0}.error-message[data-v-be35a40f]{display:flex;align-items:center;gap:.5rem;padding:.75rem 1rem;background:#fef2f2;border:1px solid #fecaca;border-radius:8px;color:#dc2626;font-size:.875rem;margin-bottom:1.5rem}.form-row[data-v-be35a40f]{display:grid;grid-template-columns:1fr 1fr;gap:1rem}.form-group[data-v-be35a40f]{margin-bottom:1.5rem}.form-label[data-v-be35a40f]{display:block;font-weight:500;color:#374151;margin-bottom:.5rem;font-size:.875rem}.input-group[data-v-be35a40f]{position:relative}.input-icon[data-v-be35a40f]{position:absolute;left:1rem;top:50%;transform:translateY(-50%);color:#9ca3af;z-index:1}.form-input[data-v-be35a40f]{width:100%;padding:.75rem 1rem .75rem 2.75rem;border:1px solid #d1d5db;border-radius:8px;font-size:.875rem;transition:all .15s ease;box-sizing:border-box}.form-input[data-v-be35a40f]:focus{outline:none;border-color:#3b82f6;box-shadow:0 0 0 3px #3b82f61a}.form-input.error[data-v-be35a40f]{border-color:#dc2626}.password-toggle[data-v-be35a40f]{position:absolute;right:1rem;top:50%;transform:translateY(-50%);background:none;border:none;color:#9ca3af;cursor:pointer;padding:.25rem;z-index:1}.password-toggle[data-v-be35a40f]:hover{color:#6b7280}.field-error[data-v-be35a40f]{display:block;color:#dc2626;font-size:.75rem;margin-top:.25rem}.checkbox-label[data-v-be35a40f]{display:flex;align-items:flex-start;gap:.5rem;cursor:pointer;font-size:.875rem;color:#374151;line-height:1.4}.checkbox-input[data-v-be35a40f]{display:none}.checkbox-custom[data-v-be35a40f]{width:1rem;height:1rem;border:1px solid #d1d5db;border-radius:3px;position:relative;transition:all .15s ease;flex-shrink:0;margin-top:.125rem}.checkbox-input:checked+.checkbox-custom[data-v-be35a40f]{background:#3b82f6;border-color:#3b82f6}.checkbox-input:checked+.checkbox-custom[data-v-be35a40f]:after{content:"✓";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);color:#fff;font-size:.75rem;font-weight:700}.terms-link[data-v-be35a40f]{color:#3b82f6;text-decoration:none}.terms-link[data-v-be35a40f]:hover{text-decoration:underline}.submit-button[data-v-be35a40f]{width:100%;padding:.875rem 1.5rem;background:#3b82f6;color:#fff;border:none;border-radius:8px;font-size:1rem;font-weight:500;cursor:pointer;transition:all .15s ease;display:flex;align-items:center;justify-content:center;gap:.5rem}.submit-button[data-v-be35a40f]:hover:not(:disabled){background:#2563eb}.submit-button[data-v-be35a40f]:disabled{opacity:.6;cursor:not-allowed}.button-icon[data-v-be35a40f]{font-size:.875rem}.form-footer[data-v-be35a40f]{margin-top:1.5rem;text-align:center}.signin-prompt[data-v-be35a40f]{font-size:.875rem;color:#6b7280}.signin-link[data-v-be35a40f]{color:#3b82f6;text-decoration:none;font-weight:500}.signin-link[data-v-be35a40f]:hover{text-decoration:underline}@media (max-width: 640px){.register-form[data-v-be35a40f]{padding:1.5rem}.form-title[data-v-be35a40f]{font-size:1.5rem}.form-row[data-v-be35a40f]{grid-template-columns:1fr;gap:0}}.register-page[data-v-ea5bb4e2]{min-height:100vh;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#0f172a 0%,#1e293b 40%,#334155 100%);padding:2rem;position:relative;overflow:hidden}.register-page[data-v-ea5bb4e2]:before{content:"";position:absolute;top:0;left:0;right:0;bottom:0;background:radial-gradient(circle at 20% 30%,rgba(59,130,246,.15) 0%,transparent 50%),radial-gradient(circle at 80% 70%,rgba(16,185,129,.1) 0%,transparent 50%),radial-gradient(circle at 40% 80%,rgba(139,92,246,.08) 0%,transparent 50%);z-index:1}.register-container[data-v-ea5bb4e2]{max-width:1000px;width:100%;position:relative;z-index:2}.register-content[data-v-ea5bb4e2]{display:grid;grid-template-columns:1fr 1fr;gap:4rem;align-items:center;background:rgba(255,255,255,.95);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border-radius:20px;padding:3rem;box-shadow:0 25px 50px #0f172a66,0 0 60px #3b82f61a;border:1px solid rgba(148,163,184,.1)}.brand-section[data-v-ea5bb4e2]{text-align:center;padding:2rem}.brand-logo[data-v-ea5bb4e2]{width:80px;height:80px;background:linear-gradient(135deg,#10b981 0%,#3b82f6 100%);border-radius:20px;display:flex;align-items:center;justify-content:center;margin:0 auto 2rem;font-size:2rem;color:#fff;box-shadow:0 10px 25px #10b9814d}.brand-title[data-v-ea5bb4e2]{font-size:3rem;font-weight:800;background:linear-gradient(135deg,#10b981 0%,#3b82f6 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin:0 0 1rem;line-height:1.1}.brand-subtitle[data-v-ea5bb4e2]{font-size:1.25rem;color:#6b7280;margin:0;font-weight:500}@media (max-width: 768px){.register-content[data-v-ea5bb4e2]{grid-template-columns:1fr;gap:2rem;padding:2rem}.brand-section[data-v-ea5bb4e2]{padding:1rem}.brand-title[data-v-ea5bb4e2]{font-size:2.5rem}.brand-logo[data-v-ea5bb4e2]{width:60px;height:60px;font-size:1.5rem}}@media (max-width: 480px){.register-page[data-v-ea5bb4e2]{padding:1rem}.register-content[data-v-ea5bb4e2]{padding:1.5rem}.brand-title[data-v-ea5bb4e2]{font-size:2rem}.brand-subtitle[data-v-ea5bb4e2]{font-size:1.1rem}}.auth-guard-message[data-v-f42a8912]{display:flex;align-items:center;justify-content:center;min-height:300px;padding:2rem}.message-content[data-v-f42a8912]{text-align:center;max-width:400px}.lock-icon[data-v-f42a8912]{font-size:3rem;color:#6b7280;margin-bottom:1rem}.message-title[data-v-f42a8912]{font-size:1.5rem;font-weight:600;color:#1f2937;margin:0 0 .5rem}.message-text[data-v-f42a8912]{color:#6b7280;margin:0 0 2rem;line-height:1.6}.login-button[data-v-f42a8912]{display:inline-flex;align-items:center;gap:.5rem;padding:.75rem 1.5rem;background:#3b82f6;color:#fff;text-decoration:none;border-radius:8px;font-weight:500;transition:all .15s ease}.login-button[data-v-f42a8912]:hover{background:#2563eb;transform:translateY(-1px)}.auth-guard-loading[data-v-f42a8912]{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:200px;padding:2rem;color:#6b7280}.loading-icon[data-v-f42a8912]{font-size:2rem;margin-bottom:1rem}