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.

600 lines
9.6 KiB

  1. code {
  2. font-family: 'mastodon-font-monospace', 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. overflow: hidden;
  14. }
  15. .row {
  16. display: flex;
  17. margin: 0 -5px;
  18. .input {
  19. box-sizing: border-box;
  20. flex: 1 1 auto;
  21. width: 50%;
  22. padding: 0 5px;
  23. }
  24. }
  25. span.hint {
  26. display: block;
  27. color: $darker-text-color;
  28. font-size: 12px;
  29. margin-top: 4px;
  30. }
  31. p.hint {
  32. margin-bottom: 15px;
  33. color: $darker-text-color;
  34. &.subtle-hint {
  35. text-align: center;
  36. font-size: 12px;
  37. line-height: 18px;
  38. margin-top: 15px;
  39. margin-bottom: 0;
  40. color: $darker-text-color;
  41. a {
  42. color: $highlight-text-color;
  43. }
  44. }
  45. }
  46. .card {
  47. margin-bottom: 15px;
  48. }
  49. strong {
  50. font-weight: 500;
  51. @each $lang in $cjk-langs {
  52. &:lang(#{$lang}) {
  53. font-weight: 700;
  54. }
  55. }
  56. }
  57. .label_input {
  58. display: flex;
  59. label {
  60. flex: 0 0 auto;
  61. }
  62. input {
  63. flex: 1 1 auto;
  64. }
  65. }
  66. .input.with_label {
  67. padding: 15px 0;
  68. margin-bottom: 0;
  69. .label_input {
  70. flex-wrap: wrap;
  71. align-items: flex-start;
  72. }
  73. &.file .label_input {
  74. flex-wrap: nowrap;
  75. }
  76. &.select .label_input {
  77. align-items: initial;
  78. }
  79. .label_input > label {
  80. font-family: inherit;
  81. font-size: 16px;
  82. color: $primary-text-color;
  83. display: block;
  84. padding-top: 5px;
  85. margin-bottom: 5px;
  86. flex: 1;
  87. min-width: 150px;
  88. word-wrap: break-word;
  89. &.select {
  90. flex: 0;
  91. }
  92. & ~ * {
  93. margin-left: 10px;
  94. }
  95. }
  96. ul {
  97. flex: 390px;
  98. }
  99. &.boolean {
  100. padding: initial;
  101. margin-bottom: initial;
  102. .label_input > label {
  103. font-family: inherit;
  104. font-size: 14px;
  105. color: $primary-text-color;
  106. display: block;
  107. width: auto;
  108. }
  109. label.checkbox {
  110. position: relative;
  111. padding-left: 25px;
  112. flex: 1 1 auto;
  113. }
  114. }
  115. }
  116. .input.with_block_label {
  117. padding-top: 15px;
  118. & > label {
  119. font-family: inherit;
  120. font-size: 16px;
  121. color: $primary-text-color;
  122. display: block;
  123. padding-top: 5px;
  124. }
  125. .hint {
  126. margin-bottom: 15px;
  127. }
  128. li {
  129. float: left;
  130. width: 50%;
  131. }
  132. }
  133. .fields-group {
  134. margin-bottom: 25px;
  135. }
  136. .input.radio_buttons .radio label {
  137. margin-bottom: 5px;
  138. font-family: inherit;
  139. font-size: 14px;
  140. color: $primary-text-color;
  141. display: block;
  142. width: auto;
  143. }
  144. .input.boolean {
  145. margin-bottom: 5px;
  146. label {
  147. font-family: inherit;
  148. font-size: 14px;
  149. color: $primary-text-color;
  150. display: block;
  151. width: auto;
  152. }
  153. label.checkbox {
  154. position: relative;
  155. padding-left: 25px;
  156. flex: 1 1 auto;
  157. }
  158. input[type=checkbox] {
  159. position: absolute;
  160. left: 0;
  161. top: 5px;
  162. margin: 0;
  163. }
  164. .hint {
  165. padding-left: 25px;
  166. margin-left: 0;
  167. }
  168. }
  169. .check_boxes {
  170. .checkbox {
  171. label {
  172. font-family: inherit;
  173. font-size: 14px;
  174. color: $primary-text-color;
  175. display: block;
  176. width: auto;
  177. position: relative;
  178. padding-top: 5px;
  179. padding-left: 25px;
  180. flex: 1 1 auto;
  181. }
  182. input[type=checkbox] {
  183. position: absolute;
  184. left: 0;
  185. top: 5px;
  186. margin: 0;
  187. }
  188. }
  189. }
  190. input[type=text],
  191. input[type=number],
  192. input[type=email],
  193. input[type=password],
  194. textarea {
  195. background: transparent;
  196. box-sizing: border-box;
  197. border: 0;
  198. border-bottom: 2px solid $ui-primary-color;
  199. border-radius: 2px 2px 0 0;
  200. padding: 7px 4px;
  201. font-size: 16px;
  202. color: $primary-text-color;
  203. display: block;
  204. width: 100%;
  205. outline: 0;
  206. font-family: inherit;
  207. resize: vertical;
  208. &:invalid {
  209. box-shadow: none;
  210. }
  211. &:focus:invalid {
  212. border-bottom-color: lighten($error-red, 12%);
  213. }
  214. &:required:valid {
  215. border-bottom-color: $valid-value-color;
  216. }
  217. &:active,
  218. &:focus {
  219. border-bottom-color: $highlight-text-color;
  220. background: rgba($base-overlay-background, 0.1);
  221. }
  222. }
  223. .input.field_with_errors {
  224. label {
  225. color: lighten($error-red, 12%);
  226. }
  227. input[type=text],
  228. input[type=email],
  229. input[type=password] {
  230. border-bottom-color: $valid-value-color;
  231. }
  232. .error {
  233. display: block;
  234. font-weight: 500;
  235. color: lighten($error-red, 12%);
  236. margin-top: 4px;
  237. }
  238. }
  239. .actions {
  240. margin-top: 30px;
  241. display: flex;
  242. &.actions--top {
  243. margin-top: 0;
  244. margin-bottom: 30px;
  245. }
  246. }
  247. button,
  248. .button,
  249. .block-button {
  250. display: block;
  251. width: 100%;
  252. border: 0;
  253. border-radius: 4px;
  254. background: $ui-highlight-color;
  255. color: $primary-text-color;
  256. font-size: 18px;
  257. line-height: inherit;
  258. height: auto;
  259. padding: 10px;
  260. text-transform: uppercase;
  261. text-decoration: none;
  262. text-align: center;
  263. box-sizing: border-box;
  264. cursor: pointer;
  265. font-weight: 500;
  266. outline: 0;
  267. margin-bottom: 10px;
  268. margin-right: 10px;
  269. &:last-child {
  270. margin-right: 0;
  271. }
  272. &:hover {
  273. background-color: lighten($ui-highlight-color, 5%);
  274. }
  275. &:active,
  276. &:focus {
  277. background-color: darken($ui-highlight-color, 5%);
  278. }
  279. &.negative {
  280. background: $error-value-color;
  281. &:hover {
  282. background-color: lighten($error-value-color, 5%);
  283. }
  284. &:active,
  285. &:focus {
  286. background-color: darken($error-value-color, 5%);
  287. }
  288. }
  289. }
  290. select {
  291. font-size: 16px;
  292. max-height: 29px;
  293. }
  294. .input-with-append {
  295. position: relative;
  296. .input input {
  297. padding-right: 127px;
  298. }
  299. .append {
  300. position: absolute;
  301. right: 0;
  302. top: 0;
  303. padding: 7px 4px;
  304. padding-bottom: 9px;
  305. font-size: 16px;
  306. color: $dark-text-color;
  307. font-family: inherit;
  308. pointer-events: none;
  309. cursor: default;
  310. }
  311. }
  312. }
  313. .flash-message {
  314. background: lighten($ui-base-color, 8%);
  315. color: $darker-text-color;
  316. border-radius: 4px;
  317. padding: 15px 10px;
  318. margin-bottom: 30px;
  319. box-shadow: 0 0 5px rgba($base-shadow-color, 0.2);
  320. text-align: center;
  321. p {
  322. margin-bottom: 15px;
  323. }
  324. .oauth-code {
  325. outline: 0;
  326. box-sizing: border-box;
  327. display: block;
  328. width: 100%;
  329. border: none;
  330. padding: 10px;
  331. font-family: 'mastodon-font-monospace', monospace;
  332. background: $ui-base-color;
  333. color: $primary-text-color;
  334. font-size: 14px;
  335. margin: 0;
  336. &::-moz-focus-inner {
  337. border: 0;
  338. }
  339. &::-moz-focus-inner,
  340. &:focus,
  341. &:active {
  342. outline: 0 !important;
  343. }
  344. &:focus {
  345. background: lighten($ui-base-color, 4%);
  346. }
  347. }
  348. strong {
  349. font-weight: 500;
  350. @each $lang in $cjk-langs {
  351. &:lang(#{$lang}) {
  352. font-weight: 700;
  353. }
  354. }
  355. }
  356. @media screen and (max-width: 740px) and (min-width: 441px) {
  357. margin-top: 40px;
  358. }
  359. }
  360. .form-footer {
  361. margin-top: 30px;
  362. text-align: center;
  363. a {
  364. color: $darker-text-color;
  365. text-decoration: none;
  366. &:hover {
  367. text-decoration: underline;
  368. }
  369. }
  370. }
  371. .oauth-prompt,
  372. .follow-prompt {
  373. margin-bottom: 30px;
  374. text-align: center;
  375. color: $darker-text-color;
  376. h2 {
  377. font-size: 16px;
  378. margin-bottom: 30px;
  379. }
  380. strong {
  381. color: $secondary-text-color;
  382. font-weight: 500;
  383. @each $lang in $cjk-langs {
  384. &:lang(#{$lang}) {
  385. font-weight: 700;
  386. }
  387. }
  388. }
  389. @media screen and (max-width: 740px) and (min-width: 441px) {
  390. margin-top: 40px;
  391. }
  392. }
  393. .qr-wrapper {
  394. display: flex;
  395. flex-wrap: wrap;
  396. align-items: flex-start;
  397. }
  398. .qr-code {
  399. flex: 0 0 auto;
  400. background: $simple-background-color;
  401. padding: 4px;
  402. margin: 0 10px 20px 0;
  403. box-shadow: 0 0 15px rgba($base-shadow-color, 0.2);
  404. display: inline-block;
  405. svg {
  406. display: block;
  407. margin: 0;
  408. }
  409. }
  410. .qr-alternative {
  411. margin-bottom: 20px;
  412. color: $secondary-text-color;
  413. flex: 150px;
  414. samp {
  415. display: block;
  416. font-size: 14px;
  417. }
  418. }
  419. .table-form {
  420. p {
  421. margin-bottom: 15px;
  422. strong {
  423. font-weight: 500;
  424. @each $lang in $cjk-langs {
  425. &:lang(#{$lang}) {
  426. font-weight: 700;
  427. }
  428. }
  429. }
  430. }
  431. }
  432. .simple_form,
  433. .table-form {
  434. .warning {
  435. box-sizing: border-box;
  436. background: rgba($error-value-color, 0.5);
  437. color: $primary-text-color;
  438. text-shadow: 1px 1px 0 rgba($base-shadow-color, 0.3);
  439. box-shadow: 0 2px 6px rgba($base-shadow-color, 0.4);
  440. border-radius: 4px;
  441. padding: 10px;
  442. margin-bottom: 15px;
  443. a {
  444. color: $primary-text-color;
  445. text-decoration: underline;
  446. &:hover,
  447. &:focus,
  448. &:active {
  449. text-decoration: none;
  450. }
  451. }
  452. strong {
  453. font-weight: 600;
  454. display: block;
  455. margin-bottom: 5px;
  456. @each $lang in $cjk-langs {
  457. &:lang(#{$lang}) {
  458. font-weight: 700;
  459. }
  460. }
  461. .fa {
  462. font-weight: 400;
  463. }
  464. }
  465. }
  466. }
  467. .action-pagination {
  468. display: flex;
  469. flex-wrap: wrap;
  470. align-items: center;
  471. .actions,
  472. .pagination {
  473. flex: 1 1 auto;
  474. }
  475. .actions {
  476. padding: 30px 0;
  477. padding-right: 20px;
  478. flex: 0 0 auto;
  479. }
  480. }
  481. .post-follow-actions {
  482. text-align: center;
  483. color: $darker-text-color;
  484. div {
  485. margin-bottom: 4px;
  486. }
  487. }
  488. .alternative-login {
  489. margin-top: 20px;
  490. margin-bottom: 20px;
  491. h4 {
  492. font-size: 16px;
  493. color: $primary-text-color;
  494. text-align: center;
  495. margin-bottom: 20px;
  496. border: 0;
  497. padding: 0;
  498. }
  499. .button {
  500. display: block;
  501. }
  502. }