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

   1 * {
   2   box-sizing: border-box;
   3 }
   4
   5 :root {
   6   --brand-color: #d8a070;
   7   --background-color: #121a24;
   8   --foreground-color: #182230;
   9   --primary-text-color: #b9b9ba;
  10   --muted-text-color: #89898a;
  11 }
  12
  13 body {
  14   background-color: var(--background-color);
  15   font-family: sans-serif;
  16   color: var(--primary-text-color);
  17   padding: 0;
  18   margin: 0;
  19 }
  20
  21 .instance-header {
  22   height: 60px;
  23   padding: 10px;
  24   background: var(--foreground-color);
  25   box-shadow: 0 1px 4px 0px rgba(0, 0, 0, 0.5);
  26 }
  27
  28 .instance-header__content {
  29   display: flex;
  30   align-items: center;
  31   max-width: 400px;
  32   margin: 0 auto;
  33 }
  34
  35 .instance-header__thumbnail {
  36   max-width: 40px;
  37   border-radius: 4px;
  38   margin-right: 12px;
  39 }
  40
  41 .instance-header__title {
  42   font-size: 16px;
  43   font-weight: bold;
  44   color: var(--primary-text-color);
  45 }
  46
  47 .container {
  48   max-width: 400px;
  49   background-color: var(--foreground-color);
  50   border-radius: 4px;
  51   overflow: hidden;
  52   margin: 35px auto;
  53   box-shadow: 0 1px 4px 0px rgba(0, 0, 0, 0.5);
  54   padding: 0em 1em 0em 1em;
  55 }
  56
  57 .container__content {
  58   padding: 0 20px;
  59 }
  60
  61 h1 {
  62   margin: 0;
  63   font-size: 24px;
  64   text-align: center;
  65 }
  66
  67 h2 {
  68   color: var(--primary-text-color);
  69   font-weight: normal;
  70   font-size: 18px;
  71   margin-bottom: 20px;
  72 }
  73
  74 a {
  75   color: var(--brand-color);
  76   text-decoration: none;
  77 }
  78
  79 form {
  80   width: 100%;
  81 }
  82
  83 .input {
  84   color: var(--muted-text-color);
  85   display: flex;
  86   flex-direction: column;
  87 }
  88
  89 input {
  90   padding: 10px;
  91   margin-top: 5px;
  92   margin-bottom: 10px;
  93   background-color: var(--background-color);
  94   color: var(--primary-text-color);
  95   border: 0;
  96   transition-property: border-bottom;
  97   transition-duration: 0.35s;
  98   border-bottom: 2px solid #2a384a;
  99   font-size: 14px;
 100   width: inherit;
 101   box-sizing: border-box;
 102 }
 103
 104 .scopes-input {
 105   display: flex;
 106   flex-direction: column;
 107   margin: 1em 0;
 108   color: var(--muted-text-color);
 109 }
 110
 111 .scopes-input label:first-child {
 112   height: 2em;
 113 }
 114
 115 .scopes {
 116   display: flex;
 117   flex-wrap: wrap;
 118   color: var(--primary-text-color);
 119 }
 120
 121 .scope {
 122   display: flex;
 123   flex-basis: 100%;
 124   height: 2em;
 125   align-items: center;
 126 }
 127
 128 .scope:before {
 129   color: var(--primary-text-color);
 130   content: "✔\fe0e";
 131   margin-left: 1em;
 132   margin-right: 1em;
 133 }
 134
 135 [type="checkbox"] + label {
 136   display: none;
 137   cursor: pointer;
 138   margin: 0.5em;
 139 }
 140
 141 [type="checkbox"] {
 142   display: none;
 143 }
 144
 145 [type="checkbox"] + label:before {
 146   cursor: pointer;
 147   display: inline-block;
 148   color: white;
 149   background-color: var(--background-color);
 150   border: 4px solid var(--background-color);
 151   box-shadow: 0px 0px 1px 0 var(--brand-color);
 152   width: 1.2em;
 153   height: 1.2em;
 154   margin-right: 1.0em;
 155   content: "";
 156   transition-property: background-color;
 157   transition-duration: 0.35s;
 158   color: var(--background-color);
 159   margin-bottom: -0.2em;
 160   border-radius: 2px;
 161 }
 162
 163 [type="checkbox"]:checked + label:before {
 164   background-color: var(--brand-color);
 165 }
 166
 167 input:focus {
 168   outline: none;
 169   border-bottom: 2px solid var(--brand-color);
 170 }
 171
 172 .actions {
 173   display: flex;
 174   justify-content: flex-end;
 175 }
 176
 177 .actions button,
 178 .actions a.button {
 179   width: auto;
 180   margin-left: 10px;
 181 }
 182
 183 a.button,
 184 button {
 185   width: 100%;
 186   background-color: #1c2a3a;
 187   color: var(--primary-text-color);
 188   border-radius: 4px;
 189   border: none;
 190   padding: 10px 16px;
 191   margin-top: 20px;
 192   margin-bottom: 20px;
 193   text-transform: uppercase;
 194   font-size: 16px;
 195   box-shadow: 0px 0px 2px 0px black,
 196     0px 1px 0px 0px rgba(255, 255, 255, 0.2) inset,
 197     0px -1px 0px 0px rgba(0, 0, 0, 0.2) inset;
 198 }
 199
 200 a.button:hover,
 201 button:hover {
 202   cursor: pointer;
 203   box-shadow: 0px 0px 0px 1px var(--brand-color),
 204     0px 1px 0px 0px rgba(255, 255, 255, 0.2) inset,
 205     0px -1px 0px 0px rgba(0, 0, 0, 0.2) inset;
 206 }
 207
 208 .alert-danger {
 209   width: 100%;
 210   background-color: #931014;
 211   border: 1px solid #a06060;
 212   border-radius: 4px;
 213   padding: 10px;
 214   margin-top: 20px;
 215   font-weight: 500;
 216   font-size: 16px;
 217 }
 218
 219 .alert-info {
 220   width: 100%;
 221   border-radius: 4px;
 222   border: 1px solid #7d796a;
 223   padding: 10px;
 224   margin-top: 20px;
 225   font-weight: 500;
 226   font-size: 16px;
 227 }
 228
 229 .account-header__banner {
 230   width: 100%;
 231   height: 112px;
 232   background-size: cover;
 233   background-position: center;
 234 }
 235
 236 .account-header__avatar {
 237   width: 94px;
 238   height: 94px;
 239   background-size: cover;
 240   background-position: center;
 241   margin: -47px 10px 0;
 242   border: 6px solid var(--foreground-color);
 243   border-radius: 999px;
 244 }
 245
 246 .account-header__meta {
 247   padding: 6px 20px 17px;
 248 }
 249
 250 .account-header__display-name {
 251   font-size: 20px;
 252   font-weight: bold;
 253 }
 254
 255 .account-header__nickname {
 256   font-size: 14px;
 257   color: var(--muted-text-color);
 258 }
 259
 260 @media all and (max-width: 420px) {
 261   .container {
 262     margin: 0 auto;
 263     border-radius: 0;
 264   }
 265
 266   .scope {
 267     flex-basis: 0%;
 268   }
 269
 270   .scope:before {
 271     content: "";
 272     margin-left: 0em;
 273     margin-right: 1em;
 274   }
 275
 276   .scope:first-child:before {
 277     margin-left: 1em;
 278     content: "✔\fe0e";
 279   }
 280
 281   .scope:after {
 282     content: ",";
 283   }
 284
 285   .scope:last-child:after {
 286     content: "";
 287   }
 288 }
 289 .form-row {
 290   display: flex;
 291 }
 292 .form-row > label {
 293   line-height: 47px;
 294   flex: 1;
 295 }
 296 .form-row > input {
 297   flex: 2;
 298 }