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.

336 lines
5.8 KiB

  1. $primary-color: #ff7473;
  2. $secondary-color: #ffc952;
  3. $tertiary-color: #47b8e0;
  4. $quaternary-color: #34314c;
  5. $background-color: #fff;
  6. $darker-background-color: #e3dede;
  7. $text-color: #333030;
  8. $lighter-text-color: #8b8687;
  9. @import url(https://fonts.googleapis.com/css?family=Roboto:400,500,400italic);
  10. @import url(https://fonts.googleapis.com/css?family=Roboto+Mono:400,500);
  11. @import "font-awesome";
  12. /* http://meyerweb.com/eric/tools/css/reset/
  13. v2.0 | 20110126
  14. License: none (public domain)
  15. */
  16. html, body, div, span, applet, object, iframe,
  17. h1, h2, h3, h4, h5, h6, p, blockquote, pre,
  18. a, abbr, acronym, address, big, cite, code,
  19. del, dfn, em, img, ins, kbd, q, s, samp,
  20. small, strike, strong, sub, sup, tt, var,
  21. b, u, i, center,
  22. dl, dt, dd, ol, ul, li,
  23. fieldset, form, label, legend,
  24. table, caption, tbody, tfoot, thead, tr, th, td,
  25. article, aside, canvas, details, embed,
  26. figure, figcaption, footer, header, hgroup,
  27. menu, nav, output, ruby, section, summary,
  28. time, mark, audio, video {
  29. margin: 0;
  30. padding: 0;
  31. border: 0;
  32. font-size: 100%;
  33. font: inherit;
  34. vertical-align: baseline;
  35. }
  36. /* HTML5 display-role reset for older browsers */
  37. article, aside, details, figcaption, figure,
  38. footer, header, hgroup, menu, nav, section {
  39. display: block;
  40. }
  41. body {
  42. line-height: 1;
  43. }
  44. ol, ul {
  45. list-style: none;
  46. }
  47. blockquote, q {
  48. quotes: none;
  49. }
  50. blockquote:before, blockquote:after,
  51. q:before, q:after {
  52. content: '';
  53. content: none;
  54. }
  55. table {
  56. border-collapse: collapse;
  57. border-spacing: 0;
  58. }
  59. body {
  60. font-family: 'Roboto', sans-serif;
  61. background: #282c37 image-url('background-photo.jpeg');
  62. background-size: cover;
  63. background-attachment: fixed;
  64. font-size: 13px;
  65. line-height: 18px;
  66. font-weight: 400;
  67. color: #fff;
  68. padding-bottom: 140px;
  69. }
  70. .container {
  71. width: 700px;
  72. margin: 0 auto;
  73. margin-top: 40px;
  74. }
  75. .logo-container {
  76. width: 400px;
  77. margin: 100px auto;
  78. cursor: default;
  79. h1 {
  80. display: block;
  81. text-align: center;
  82. color: #fff;
  83. font-size: 48px;
  84. font-weight: 500;
  85. a {
  86. color: inherit;
  87. text-decoration: none;
  88. outline: 0;
  89. }
  90. small {
  91. display: block;
  92. font-size: 12px;
  93. font-weight: 400;
  94. font-family: 'Roboto Mono', monospace;
  95. }
  96. }
  97. }
  98. .form-container {
  99. width: 400px;
  100. margin: 0 auto;
  101. .field {
  102. margin-bottom: 15px;
  103. }
  104. input[type=text], input[type=email], input[type=password] {
  105. background: transparent;
  106. border: 0;
  107. border-bottom: 2px solid #9baec8;
  108. padding: 7px 0;
  109. font-size: 16px;
  110. color: #fff;
  111. display: block;
  112. width: 100%;
  113. outline: 0;
  114. &:invalid {
  115. box-shadow: none;
  116. }
  117. &:focus:invalid {
  118. border-bottom-color: #df405a;
  119. }
  120. &:required:valid {
  121. border-bottom-color: #79bd9a;
  122. }
  123. &:active, &:focus {
  124. border-bottom-color: #2b90d9;
  125. }
  126. }
  127. .field_with_error {
  128. input[type=text], input[type=email], input[type=password] {
  129. border-bottom-color: #df405a;
  130. }
  131. }
  132. .prompt {
  133. font-size: 16px;
  134. color: #9baec8;
  135. text-align: center;
  136. .prompt-highlight {
  137. font-weight: 500;
  138. color: #fff;
  139. }
  140. }
  141. code.copypasteable {
  142. display: block;
  143. font-family: 'Roboto Mono', monospace;
  144. font-weight: 400;
  145. font-size: 12px;
  146. margin-top: 20px;
  147. background: #282c37;
  148. border-radius: 4px;
  149. padding: 2px;
  150. word-wrap: break-word;
  151. }
  152. .actions {
  153. margin-top: 30px;
  154. button {
  155. display: block;
  156. width: 100%;
  157. border: 0;
  158. border-radius: 4px;
  159. background: #2b90d9;
  160. color: #fff;
  161. font-size: 18px;
  162. padding: 10px;
  163. text-transform: uppercase;
  164. cursor: pointer;
  165. font-weight: 500;
  166. outline: 0;
  167. margin-bottom: 10px;
  168. &:hover {
  169. background-color: lighten(#2b90d9, 5%);
  170. }
  171. &:active, &:focus {
  172. position: relative;
  173. top: 1px;
  174. background-color: darken(#2b90d9, 5%);
  175. }
  176. &.negative {
  177. background: #df405a;
  178. &:hover {
  179. background-color: lighten(#df405a, 5%);
  180. }
  181. &:active, &:focus {
  182. background-color: darken(#df405a, 5%);
  183. }
  184. }
  185. }
  186. }
  187. .form-footer {
  188. margin-top: 30px;
  189. text-align: center;
  190. a {
  191. color: #9baec8;
  192. text-decoration: none;
  193. &:hover {
  194. color: #d9e1e8;
  195. text-decoration: underline;
  196. }
  197. }
  198. }
  199. #error_explanation {
  200. background: #282c37;
  201. color: #9baec8;
  202. border-radius: 4px;
  203. padding: 15px 10px;
  204. margin-bottom: 30px;
  205. box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
  206. h2 {
  207. font-weight: 500;
  208. margin-bottom: 5px;
  209. }
  210. li {
  211. margin-left: 15px;
  212. list-style: circle;
  213. }
  214. }
  215. }
  216. .no-list {
  217. list-style: none;
  218. li {
  219. display: inline-block;
  220. margin: 0 5px;
  221. }
  222. }
  223. .footer {
  224. text-align: center;
  225. margin-top: 30px;
  226. .domain {
  227. font-size: 12px;
  228. font-weight: 400;
  229. font-family: 'Roboto Mono', monospace;
  230. }
  231. }
  232. .mastodon {
  233. $head: #282c37;
  234. $tusk: #d9e1e8;
  235. $backdrop: #2b90d9;
  236. $highlight: 18%;
  237. .mastodon-backdrop {
  238. fill: $backdrop;
  239. }
  240. #mastodon-ear {
  241. fill: lighten($head, 5%);
  242. &:hover, &.highlight {
  243. fill: lighten($head, $highlight);
  244. }
  245. }
  246. #mastodon-head-backdrop {
  247. fill: darken($head, 5%);
  248. &:hover, &.highlight {
  249. fill: darken($head, 5%);
  250. }
  251. }
  252. #mastodon-nose, #mastodon-cheek, #mastodon-forehead, #mastodon-backhead {
  253. fill: $head;
  254. &:hover, &.highlight {
  255. fill: lighten($head, $highlight);
  256. }
  257. }
  258. #mastodon-tusk-front {
  259. fill: lighten($tusk, 5%);
  260. }
  261. #mastodon-tusk-back {
  262. fill: $tusk;
  263. &:hover, &.highlight {
  264. fill: lighten($tusk, $highlight);
  265. }
  266. }
  267. .mastodon-shape {
  268. transition: all 0.8s ease;
  269. stroke: transparent;
  270. stroke-width: 0px;
  271. &:hover, &.highlight {
  272. transition-duration: 0.2s;
  273. }
  274. }
  275. }
  276. @import 'home';
  277. @import 'accounts';
  278. @import 'stream_entries';
  279. @import 'dashboard'