You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

202 lines
3.2 KiB

  1. code {
  2. font-family: 'Roboto Mono', monospace;
  3. font-weight: 400;
  4. }
  5. .form-container {
  6. max-width: 400px;
  7. padding: 20px;
  8. margin: 0 auto;
  9. }
  10. .simple_form {
  11. .input {
  12. margin-bottom: 15px;
  13. }
  14. .hint {
  15. display: block;
  16. color: rgba(255, 255, 255, 0.8);
  17. font-size: 12px;
  18. }
  19. .input.file, .input.select {
  20. padding: 15px 0;
  21. margin-bottom: 0;
  22. display: flex;
  23. label {
  24. font-family: inherit;
  25. font-size: 16px;
  26. color: #fff;
  27. width: 100px;
  28. display: block;
  29. flex: 0 0 auto;
  30. padding-top: 5px;
  31. }
  32. input[type=file], select {
  33. flex: 1 1 auto;
  34. }
  35. }
  36. .fields-group {
  37. margin-bottom: 25px;
  38. }
  39. .input.boolean {
  40. margin-bottom: 5px;
  41. label {
  42. font-family: inherit;
  43. font-size: 14px;
  44. color: white;
  45. display: block;
  46. }
  47. label.checkbox {
  48. position: relative;
  49. padding-left: 25px;
  50. }
  51. input[type=checkbox] {
  52. position: absolute;
  53. left: 0;
  54. top: 1px;
  55. margin: 0;
  56. }
  57. .hint {
  58. padding-left: 25px;
  59. }
  60. }
  61. input[type=text], input[type=email], input[type=password], textarea {
  62. background: transparent;
  63. box-sizing: border-box;
  64. border: 0;
  65. border-bottom: 2px solid #9baec8;
  66. border-radius: 2px 2px 0 0;
  67. padding: 7px 4px;
  68. font-size: 16px;
  69. color: #fff;
  70. display: block;
  71. width: 100%;
  72. outline: 0;
  73. font-family: inherit;
  74. &:invalid {
  75. box-shadow: none;
  76. }
  77. &:focus:invalid {
  78. border-bottom-color: #df405a;
  79. }
  80. &:required:valid {
  81. border-bottom-color: #79bd9a;
  82. }
  83. &:active, &:focus {
  84. border-bottom-color: #2b90d9;
  85. background: rgba(0, 0, 0, 0.1);
  86. }
  87. }
  88. .input.field_with_errors {
  89. input[type=text], input[type=email], input[type=password] {
  90. border-bottom-color: #df405a;
  91. }
  92. .error {
  93. font-weight: 500;
  94. color: #df405a;
  95. }
  96. }
  97. .actions {
  98. margin-top: 30px;
  99. }
  100. button {
  101. display: block;
  102. width: 100%;
  103. border: 0;
  104. border-radius: 4px;
  105. background: #2b90d9;
  106. color: #fff;
  107. font-size: 18px;
  108. padding: 10px;
  109. text-transform: uppercase;
  110. cursor: pointer;
  111. font-weight: 500;
  112. outline: 0;
  113. margin-bottom: 10px;
  114. &:hover {
  115. background-color: lighten(#2b90d9, 5%);
  116. }
  117. &:active, &:focus {
  118. position: relative;
  119. top: 1px;
  120. background-color: darken(#2b90d9, 5%);
  121. }
  122. &.negative {
  123. background: #df405a;
  124. &:hover {
  125. background-color: lighten(#df405a, 5%);
  126. }
  127. &:active, &:focus {
  128. background-color: darken(#df405a, 5%);
  129. }
  130. }
  131. }
  132. }
  133. .flash-message {
  134. background: #282c37;
  135. color: #9baec8;
  136. border-radius: 4px;
  137. padding: 15px 10px;
  138. margin-bottom: 30px;
  139. box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
  140. text-align: center;
  141. strong {
  142. font-weight: 500;
  143. }
  144. }
  145. .form-footer {
  146. margin-top: 30px;
  147. text-align: center;
  148. a {
  149. color: white;
  150. text-decoration: none;
  151. &:hover {
  152. text-decoration: underline;
  153. }
  154. }
  155. }
  156. .oauth-prompt, .follow-prompt {
  157. margin-bottom: 30px;
  158. text-align: center;
  159. color: #9baec8;
  160. h2 {
  161. font-size: 16px;
  162. margin-bottom: 30px;
  163. }
  164. strong {
  165. color: #d9e1e8;
  166. font-weight: 500;
  167. }
  168. }