|
- @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap');
-
- :host {
- --naw-primary: #4f46e5;
- --naw-primary-hover: #4338ca;
- --naw-bg: #ffffff;
- --naw-text: #1f2937;
- --naw-text-secondary: #6b7280;
- --naw-border: #d1d5db;
- --naw-input-bg: #f9fafb;
- --naw-error: #ef4444;
- --naw-radius: 8px;
- --naw-font: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
-
- display: block;
- font-family: var(--naw-font);
- }
-
- :host([theme="dark"]) {
- --naw-primary: #818cf8;
- --naw-primary-hover: #6366f1;
- --naw-bg: #1f2937;
- --naw-text: #f9fafb;
- --naw-text-secondary: #9ca3af;
- --naw-border: #374151;
- --naw-input-bg: #374151;
- --naw-error: #f87171;
- }
-
- .naw-container {
- max-width: 400px;
- margin: 0 auto;
- padding: 32px 24px;
- background: var(--naw-bg);
- border-radius: 16px;
- }
-
- .naw-title {
- text-align: center;
- font-size: 24px;
- font-weight: 600;
- color: var(--naw-text);
- margin: 0 0 32px 0;
- }
-
- .naw-form {
- display: flex;
- flex-direction: column;
- gap: 16px;
- }
-
- .naw-field {
- display: flex;
- flex-direction: column;
- gap: 6px;
- }
-
- .naw-label {
- font-size: 14px;
- font-weight: 500;
- color: var(--naw-text);
- }
-
- .naw-input {
- width: 100%;
- box-sizing: border-box;
- padding: 10px 14px;
- font-size: 15px;
- border: 1px solid var(--naw-border);
- border-radius: var(--naw-radius);
- background: var(--naw-input-bg);
- color: var(--naw-text);
- outline: none;
- transition: border-color 0.2s;
- font-family: var(--naw-font);
- }
-
- .naw-input:focus {
- border-color: var(--naw-primary);
- }
-
- .naw-input::placeholder {
- color: var(--naw-text-secondary);
- }
-
- .naw-button {
- width: 100%;
- padding: 12px;
- font-size: 15px;
- font-weight: 600;
- color: #ffffff;
- background: var(--naw-primary);
- border: none;
- border-radius: var(--naw-radius);
- cursor: pointer;
- transition: background 0.2s;
- font-family: var(--naw-font);
- }
-
- .naw-button:hover {
- background: var(--naw-primary-hover);
- }
-
- .naw-button:disabled {
- opacity: 0.6;
- cursor: not-allowed;
- }
-
- .naw-error-msg {
- color: var(--naw-error);
- font-size: 13px;
- text-align: center;
- margin: 0;
- min-height: 20px;
- }
|