25'ten fazla konu seçemezsiniz Konular bir harf veya rakamla başlamalı, kısa çizgiler ('-') içerebilir ve en fazla 35 karakter uzunluğunda olabilir.
 
 
 

116 satır
2.1 KiB

  1. @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap');
  2. :host {
  3. --naw-primary: #4f46e5;
  4. --naw-primary-hover: #4338ca;
  5. --naw-bg: #ffffff;
  6. --naw-text: #1f2937;
  7. --naw-text-secondary: #6b7280;
  8. --naw-border: #d1d5db;
  9. --naw-input-bg: #f9fafb;
  10. --naw-error: #ef4444;
  11. --naw-radius: 8px;
  12. --naw-font: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  13. display: block;
  14. font-family: var(--naw-font);
  15. }
  16. :host([theme="dark"]) {
  17. --naw-primary: #818cf8;
  18. --naw-primary-hover: #6366f1;
  19. --naw-bg: #1f2937;
  20. --naw-text: #f9fafb;
  21. --naw-text-secondary: #9ca3af;
  22. --naw-border: #374151;
  23. --naw-input-bg: #374151;
  24. --naw-error: #f87171;
  25. }
  26. .naw-container {
  27. max-width: 400px;
  28. margin: 0 auto;
  29. padding: 32px 24px;
  30. background: var(--naw-bg);
  31. border-radius: 16px;
  32. }
  33. .naw-title {
  34. text-align: center;
  35. font-size: 24px;
  36. font-weight: 600;
  37. color: var(--naw-text);
  38. margin: 0 0 32px 0;
  39. }
  40. .naw-form {
  41. display: flex;
  42. flex-direction: column;
  43. gap: 16px;
  44. }
  45. .naw-field {
  46. display: flex;
  47. flex-direction: column;
  48. gap: 6px;
  49. }
  50. .naw-label {
  51. font-size: 14px;
  52. font-weight: 500;
  53. color: var(--naw-text);
  54. }
  55. .naw-input {
  56. width: 100%;
  57. box-sizing: border-box;
  58. padding: 10px 14px;
  59. font-size: 15px;
  60. border: 1px solid var(--naw-border);
  61. border-radius: var(--naw-radius);
  62. background: var(--naw-input-bg);
  63. color: var(--naw-text);
  64. outline: none;
  65. transition: border-color 0.2s;
  66. font-family: var(--naw-font);
  67. }
  68. .naw-input:focus {
  69. border-color: var(--naw-primary);
  70. }
  71. .naw-input::placeholder {
  72. color: var(--naw-text-secondary);
  73. }
  74. .naw-button {
  75. width: 100%;
  76. padding: 12px;
  77. font-size: 15px;
  78. font-weight: 600;
  79. color: #ffffff;
  80. background: var(--naw-primary);
  81. border: none;
  82. border-radius: var(--naw-radius);
  83. cursor: pointer;
  84. transition: background 0.2s;
  85. font-family: var(--naw-font);
  86. }
  87. .naw-button:hover {
  88. background: var(--naw-primary-hover);
  89. }
  90. .naw-button:disabled {
  91. opacity: 0.6;
  92. cursor: not-allowed;
  93. }
  94. .naw-error-msg {
  95. color: var(--naw-error);
  96. font-size: 13px;
  97. text-align: center;
  98. margin: 0;
  99. min-height: 20px;
  100. }