git.squeep.com Git - akkoma/blob - priv/static/static-fe/forms.css

   1 form {
   2     width: 100%;
   3 }
   4
   5 .input {
   6     color: var(--muted-text-color);
   7     display: flex;
   8     margin-left: 1em;
   9     margin-right: 1em;
  10     flex-direction: column;
  11 }
  12
  13 input {
  14     padding: 10px;
  15     margin-top: 5px;
  16     margin-bottom: 10px;
  17     background-color: var(--background-color);
  18     color: var(--primary-text-color);
  19     border: 0;
  20     transition-property: border-bottom;
  21     transition-duration: 0.35s;
  22     border-bottom: 2px solid #2a384a;
  23     font-size: 14px;
  24     width: inherit;
  25     box-sizing: border-box;
  26 }
  27
  28 .scopes-input {
  29     display: flex;
  30     flex-direction: column;
  31     margin: 1em 0;
  32     color: var(--muted-text-color);
  33 }
  34
  35 .scopes-input label:first-child {
  36     height: 2em;
  37 }
  38
  39 .scopes {
  40     display: flex;
  41     flex-wrap: wrap;
  42     color: var(--primary-text-color);
  43 }
  44
  45 .scope {
  46     display: flex;
  47     flex-basis: 100%;
  48     height: 2em;
  49     align-items: center;
  50 }
  51
  52 .scope:before {
  53     color: var(--primary-text-color);
  54     content: "✔\fe0e";
  55     margin-left: 1em;
  56     margin-right: 1em;
  57 }
  58
  59 [type="checkbox"]+label {
  60     display: none;
  61     cursor: pointer;
  62     margin: 0.5em;
  63 }
  64
  65 [type="checkbox"] {
  66     display: none;
  67 }
  68
  69 [type="checkbox"]+label:before {
  70     cursor: pointer;
  71     display: inline-block;
  72     color: white;
  73     background-color: var(--background-color);
  74     border: 4px solid var(--background-color);
  75     box-shadow: 0px 0px 1px 0 var(--brand-color);
  76     width: 1.2em;
  77     height: 1.2em;
  78     margin-right: 1.0em;
  79     content: "";
  80     transition-property: background-color;
  81     transition-duration: 0.35s;
  82     color: var(--background-color);
  83     margin-bottom: -0.2em;
  84     border-radius: 2px;
  85 }
  86
  87 [type="checkbox"]:checked+label:before {
  88     background-color: var(--brand-color);
  89 }
  90
  91 a.button,
  92 button {
  93   width: 100%;
  94   background-color: #1c2a3a;
  95   color: var(--primary-text-color);
  96   border-radius: 4px;
  97   border: none;
  98   padding: 10px 16px;
  99   margin-top: 20px;
 100   margin-bottom: 20px;
 101   text-transform: uppercase;
 102   font-size: 16px;
 103   box-shadow: 0px 0px 2px 0px black,
 104     0px 1px 0px 0px rgba(255, 255, 255, 0.2) inset,
 105     0px -1px 0px 0px rgba(0, 0, 0, 0.2) inset;
 106 }
 107
 108 a.button:hover,
 109 button:hover {
 110   cursor: pointer;
 111   box-shadow: 0px 0px 0px 1px var(--brand-color),
 112     0px 1px 0px 0px rgba(255, 255, 255, 0.2) inset,
 113     0px -1px 0px 0px rgba(0, 0, 0, 0.2) inset;
 114 }