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.

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