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. }
  6. .form-container {
  7.   max-width: 400px;
  8.   padding: 20px;
  9.   margin: 0 auto;
  10. }
  12. .simple_form {
  13.   .input {
  14.     margin-bottom: 15px;
  15.     overflow: hidden;
  16.   }
  18.   .row {
  19.     display: flex;
  20.     margin: 0 -5px;
  22.     .input {
  23.       box-sizing: border-box;
  24.       flex: 1 1 auto;
  25.       width: 50%;
  26.       padding: 0 5px;
  27.     }
  28.   }
  30.   span.hint {
  31.     display: block;
  32.     color: $ui-primary-color;
  33.     font-size: 12px;
  34.     margin-top: 4px;
  35.   }
  37.   p.hint {
  38.     margin-bottom: 15px;
  39.     color: $ui-primary-color;
  41.     &.subtle-hint {
  42.       text-align: center;
  43.       font-size: 12px;
  44.       line-height: 18px;
  45.       margin-top: 15px;
  46.       margin-bottom: 0;
  47.       color: $ui-primary-color;
  49.       a {
  50.         color: $ui-highlight-color;
  51.       }
  52.     }
  53.   }
  55.   .card {
  56.     margin-bottom: 15px;
  57.   }
  59.   strong {
  60.     font-weight: 500;
  62.     @each $lang in $cjk-langs {
  63.       &:lang(#{$lang}) {
  64.         font-weight: 700;
  65.       }
  66.     }
  67.   }
  69.   .label_input {
  70.     display: flex;
  72.     label {
  73.       flex: 0 0 auto;
  74.     }
  76.     input {
  77.       flex: 1 1 auto;
  78.     }
  79.   }
  81.   .input.with_label {
  82.     padding: 15px 0;
  83.     margin-bottom: 0;
  85.     .label_input {
  86.       flex-wrap: wrap;
  87.       align-items: flex-start;
  88.     }
  90.     &.select .label_input {
  91.       align-items: initial;
  92.     }
  94.     .label_input > label {
  95.       font-family: inherit;
  96.       font-size: 16px;
  97.       color: $primary-text-color;
  98.       display: block;
  99.       padding-top: 5px;
  100.       margin-bottom: 5px;
  101.       flex: 1;
  102.       min-width: 150px;
  103.       word-wrap: break-word;
  105.       &.select {
  106.         flex: 0;
  107.       }
  109.       & ~ * {
  110.         margin-left: 10px;
  111.       }
  112.     }
  114.     ul {
  115.       flex: 390px;
  116.     }
  118.     &.boolean {
  119.       padding: initial;
  120.       margin-bottom: initial;
  122.       .label_input > label {
  123.         font-family: inherit;
  124.         font-size: 14px;
  125.         color: $primary-text-color;
  126.         display: block;
  127.         width: auto;
  128.       }
  130.       label.checkbox {
  131.         position: relative;
  132.         padding-left: 25px;
  133.         flex: 1 1 auto;
  134.       }
  135.     }
  136.   }
  138.   .input.with_block_label {
  139.     & > label {
  140.       font-family: inherit;
  141.       font-size: 16px;
  142.       color: $primary-text-color;
  143.       display: block;
  144.       padding-top: 5px;
  145.     }
  147.     .hint {
  148.       margin-bottom: 15px;
  149.     }
  151.     li {
  152.       float: left;
  153.       width: 50%;
  154.     }
  155.   }
  157.   .fields-group {
  158.     margin-bottom: 25px;
  159.   }
  161.   .input.radio_buttons .radio label {
  162.     margin-bottom: 5px;
  163.     font-family: inherit;
  164.     font-size: 14px;
  165.     color: $primary-text-color;
  166.     display: block;
  167.     width: auto;
  168.   }
  170.   .input.boolean {
  171.     margin-bottom: 5px;
  173.     label {
  174.       font-family: inherit;
  175.       font-size: 14px;
  176.       color: $primary-text-color;
  177.       display: block;
  178.       width: auto;
  179.     }
  181.     label.checkbox {
  182.       position: relative;
  183.       padding-left: 25px;
  184.       flex: 1 1 auto;
  185.     }
  187.     input[type=checkbox] {
  188.       position: absolute;
  189.       left: 0;
  190.       top: 5px;
  191.       margin: 0;
  192.     }
  194.     .hint {
  195.       padding-left: 25px;
  196.       margin-left: 0;
  197.     }
  198.   }
  200.   .check_boxes {
  201.     .checkbox {
  202.       label {
  203.         font-family: inherit;
  204.         font-size: 14px;
  205.         color: $primary-text-color;
  206.         display: block;
  207.         width: auto;
  208.         position: relative;
  209.         padding-top: 5px;
  210.         padding-left: 25px;
  211.         flex: 1 1 auto;
  212.       }
  214.       input[type=checkbox] {
  215.         position: absolute;
  216.         left: 0;
  217.         top: 5px;
  218.         margin: 0;
  219.       }
  220.     }
  221.   }
  223.   input[type=text],
  224.   input[type=number],
  225.   input[type=email],
  226.   input[type=password],
  227.   textarea {
  228.     background: transparent;
  229.     box-sizing: border-box;
  230.     border: 0;
  231.     border-bottom: 2px solid $ui-primary-color;
  232.     border-radius: 2px 2px 0 0;
  233.     padding: 7px 4px;
  234.     font-size: 16px;
  235.     color: $primary-text-color;
  236.     display: block;
  237.     width: 100%;
  238.     outline: 0;
  239.     font-family: inherit;
  240.     resize: vertical;
  242.     &:invalid {
  243.       box-shadow: none;
  244.     }
  246.     &:focus:invalid {
  247.       border-bottom-color: $error-value-color;
  248.     }
  250.     &:required:valid {
  251.       border-bottom-color: $valid-value-color;
  252.     }
  254.     &:active,
  255.     &:focus {
  256.       border-bottom-color: $ui-highlight-color;
  257.       background: rgba($base-overlay-background, 0.1);
  258.     }
  259.   }
  261.   .input.field_with_errors {
  262.     label {
  263.       color: $error-value-color;
  264.     }
  266.     input[type=text],
  267.     input[type=email],
  268.     input[type=password] {
  269.       border-bottom-color: $error-value-color;
  270.     }
  272.     .error {
  273.       display: block;
  274.       font-weight: 500;
  275.       color: $error-value-color;
  276.       margin-top: 4px;
  277.     }
  278.   }
  280.   .actions {
  281.     margin-top: 30px;
  282.     display: flex;
  284.     &.actions--top {
  285.       margin-top: 0;
  286.       margin-bottom: 30px;
  287.     }
  288.   }
  290.   button,
  291.   .button,
  292.   .block-button {
  293.     display: block;
  294.     width: 100%;
  295.     border: 0;
  296.     border-radius: 4px;
  297.     background: $ui-highlight-color;
  298.     color: $primary-text-color;
  299.     font-size: 18px;
  300.     line-height: inherit;
  301.     height: auto;
  302.     padding: 10px;
  303.     text-transform: uppercase;
  304.     text-decoration: none;
  305.     text-align: center;
  306.     box-sizing: border-box;
  307.     cursor: pointer;
  308.     font-weight: 500;
  309.     outline: 0;
  310.     margin-bottom: 10px;
  311.     margin-right: 10px;
  313.     &:last-child {
  314.       margin-right: 0;
  315.     }
  317.     &:hover {
  318.       background-color: lighten($ui-highlight-color, 5%);
  319.     }
  321.     &:active,
  322.     &:focus {
  323.       background-color: darken($ui-highlight-color, 5%);
  324.     }
  326.     &.negative {
  327.       background: $error-value-color;
  329.       &:hover {
  330.         background-color: lighten($error-value-color, 5%);
  331.       }
  333.       &:active,
  334.       &:focus {
  335.         background-color: darken($error-value-color, 5%);
  336.       }
  337.     }
  338.   }
  340.   select {
  341.     font-size: 16px;
  342.     max-height: 29px;
  343.   }
  345.   .input-with-append {
  346.     position: relative;
  348.     .input input {
  349.       padding-right: 127px;
  350.     }
  352.     .append {
  353.       position: absolute;
  354.       right: 0;
  355.       top: 0;
  356.       padding: 7px 4px;
  357.       padding-bottom: 9px;
  358.       font-size: 16px;
  359.       color: $ui-base-lighter-color;
  360.       font-family: inherit;
  361.       pointer-events: none;
  362.       cursor: default;
  363.     }
  364.   }
  365. }
  367. .flash-message {
  368.   background: lighten($ui-base-color, 8%);
  369.   color: $ui-primary-color;
  370.   border-radius: 4px;
  371.   padding: 15px 10px;
  372.   margin-bottom: 30px;
  373.   box-shadow: 0 0 5px rgba($base-shadow-color, 0.2);
  374.   text-align: center;
  376.   p {
  377.     margin-bottom: 15px;
  378.   }
  380.   .oauth-code {
  381.     color: $ui-secondary-color;
  382.     outline: 0;
  383.     box-sizing: border-box;
  384.     display: block;
  385.     width: 100%;
  386.     border: none;
  387.     padding: 10px;
  388.     font-family: monospace;
  389.     background: $ui-base-color;
  390.     color: $ui-primary-color;
  391.     font-size: 14px;
  392.     margin: 0;
  394.     &::-moz-focus-inner {
  395.       border: 0;
  396.     }
  398.     &::-moz-focus-inner,
  399.     &:focus,
  400.     &:active {
  401.       outline: 0 !important;
  402.     }
  404.     &:focus {
  405.       background: lighten($ui-base-color, 4%);
  406.     }
  407.   }
  409.   strong {
  410.     font-weight: 500;
  412.     @each $lang in $cjk-langs {
  413.       &:lang(#{$lang}) {
  414.         font-weight: 700;
  415.       }
  416.     }
  417.   }
  419.   @media screen and (max-width: 740px) and (min-width: 441px) {
  420.     margin-top: 40px;
  421.   }
  422. }
  424. .form-footer {
  425.   margin-top: 30px;
  426.   text-align: center;
  428.   a {
  429.     color: $ui-primary-color;
  430.     text-decoration: none;
  432.     &:hover {
  433.       text-decoration: underline;
  434.     }
  435.   }
  436. }
  438. .oauth-prompt,
  439. .follow-prompt {
  440.   margin-bottom: 30px;
  441.   text-align: center;
  442.   color: $ui-primary-color;
  444.   h2 {
  445.     font-size: 16px;
  446.     margin-bottom: 30px;
  447.   }
  449.   strong {
  450.     color: $ui-secondary-color;
  451.     font-weight: 500;
  453.     @each $lang in $cjk-langs {
  454.       &:lang(#{$lang}) {
  455.         font-weight: 700;
  456.       }
  457.     }
  458.   }
  460.   @media screen and (max-width: 740px) and (min-width: 441px) {
  461.     margin-top: 40px;
  462.   }
  463. }
  465. .qr-wrapper {
  466.   display: flex;
  467.   flex-wrap: wrap;
  468.   align-items: flex-start;
  469. }
  471. .qr-code {
  472.   flex: 0 0 auto;
  473.   background: $simple-background-color;
  474.   padding: 4px;
  475.   margin: 0 10px 20px 0;
  476.   box-shadow: 0 0 15px rgba($base-shadow-color, 0.2);
  477.   display: inline-block;
  479.   svg {
  480.     display: block;
  481.     margin: 0;
  482.   }
  483. }
  485. .qr-alternative {
  486.   margin-bottom: 20px;
  487.   color: $ui-secondary-color;
  488.   flex: 150px;
  490.   samp {
  491.     display: block;
  492.     font-size: 14px;
  493.   }
  494. }
  496. .table-form {
  497.   p {
  498.     margin-bottom: 15px;
  500.     strong {
  501.       font-weight: 500;
  503.       @each $lang in $cjk-langs {
  504.         &:lang(#{$lang}) {
  505.           font-weight: 700;
  506.         }
  507.       }
  508.     }
  509.   }
  510. }
  512. .simple_form,
  513. .table-form {
  514.   .warning {
  515.     box-sizing: border-box;
  516.     background: rgba($error-value-color, 0.5);
  517.     color: $primary-text-color;
  518.     text-shadow: 1px 1px 0 rgba($base-shadow-color, 0.3);
  519.     box-shadow: 0 2px 6px rgba($base-shadow-color, 0.4);
  520.     border-radius: 4px;
  521.     padding: 10px;
  522.     margin-bottom: 15px;
  524.     a {
  525.       color: $primary-text-color;
  526.       text-decoration: underline;
  528.       &:hover,
  529.       &:focus,
  530.       &:active {
  531.         text-decoration: none;
  532.       }
  533.     }
  535.     strong {
  536.       font-weight: 600;
  537.       display: block;
  538.       margin-bottom: 5px;
  540.       @each $lang in $cjk-langs {
  541.         &:lang(#{$lang}) {
  542.           font-weight: 700;
  543.         }
  544.       }
  546.       .fa {
  547.         font-weight: 400;
  548.       }
  549.     }
  550.   }
  551. }
  553. .action-pagination {
  554.   display: flex;
  555.   flex-wrap: wrap;
  556.   align-items: center;
  558.   .actions,
  559.   .pagination {
  560.     flex: 1 1 auto;
  561.   }
  563.   .actions {
  564.     padding: 30px 0;
  565.     padding-right: 20px;
  566.     flex: 0 0 auto;
  567.   }
  568. }
  570. .post-follow-actions {
  571.   text-align: center;
  572.   color: $ui-primary-color;
  574.   div {
  575.     margin-bottom: 4px;
  576.   }
  577. }
  579. .alternative-login {
  580.   margin-top: 20px;
  581.   margin-bottom: 20px;
  583.   h4 {
  584.     font-size: 16px;
  585.     color: $ui-base-lighter-color;
  586.     text-align: center;
  587.     margin-bottom: 20px;
  588.     border: 0;
  589.     padding: 0;
  590.   }
  592.   .button {
  593.     display: block;
  594.   }
  595. }