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