logo

mastofe

My custom branche(s) on git.pleroma.social/pleroma/mastofe git clone https://hacktivis.me/git/mastofe.git

forms.scss (9713B)


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