www/css/login.css

   1 @import url('https://fonts.googleapis.com/css2?family=Montserrat&display=swap');
   2 @font-face {
   3   font-family: 'SaldaSoft Heavy';
   4   src: url("/fonts/saldasoftheavy.otf");
   5 }
   6
   7 body {
   8   background-color: #ebecf0;
   9   display: flex;
  10   flex-direction: column;
  11   align-items: center;
  12   justify-content: center;
  13   height: 100vh;
  14   font-family: 'Montserrat', sans-serif;
  15 }
  16
  17 body > .logo {
  18   font-family: 'SaldaSoft Heavy', sans-serif;
  19   font-size: 4rem;
  20   user-select: none;
  21   color: black;
  22   text-decoration: none;
  23 }
  24
  25 .center {
  26   background-color: white;
  27   box-shadow: 0 0px 8px 0 rgba(0, 0, 0, 0.1);
  28   display: flex;
  29   flex-direction: column;
  30   padding: 40px 30px;
  31   border-radius: 10px;
  32   width: 300px;
  33   margin-bottom: 5rem;
  34 }
  35
  36 .title {
  37   font-size: 22px;
  38   font-weight: 700;
  39   margin-bottom: 24px;
  40   user-select: none;
  41   text-align: center;
  42 }
  43
  44 .input-title {
  45   font-size: 14px;
  46   font-weight: 600;
  47   color: #252b35;
  48   user-select: none;
  49 }
  50
  51 .input {
  52   border: 1px solid #e3e4e8;
  53   border-radius: 7px;
  54   margin-bottom: 6px;
  55   display: flex;
  56 }
  57
  58 .input > input {
  59   border: none;
  60   background-color: transparent;
  61   font-size: 18px;
  62   color: #393f48;
  63   padding: 5px 10px;
  64   width: 100%;
  65   outline: none;
  66 }
  67
  68 .input > svg.error, .input > svg.success {
  69   height: 30px;
  70   fill: black;
  71   margin-right: 5px;
  72 }
  73
  74 .forgot {
  75   color: #747b87;
  76   text-decoration: underline;
  77   text-align: right;
  78   margin-bottom: 8px;
  79 }
  80
  81 .button-secondary {
  82   font-size: 16px;
  83   font-weight: 500;
  84   border-radius: 7px;
  85   padding: 5px;
  86   color: #252b35;
  87   text-align: center;
  88   cursor: pointer;
  89   border: 1px solid #e3e4e8;
  90   border-radius: 7px;
  91   flex: 1;
  92   user-select: none;
  93 }
  94
  95 .button {
  96   font-size: 16px;
  97   font-weight: 500;
  98   color: white;
  99   background-color: black;
 100   border-radius: 7px;
 101   padding: 5px;
 102   text-align: center;
 103   cursor: pointer;
 104   flex: 1;
 105   user-select: none;
 106 }
 107
 108 .button[disabled] {
 109   background-color: #e3e4e8;
 110   color: #747b87;
 111   cursor: not-allowed;
 112 }
 113
 114 .buttons {
 115   user-select: none;
 116   margin-top: 8px;
 117   display: flex;
 118   width: 100%;
 119 }
 120
 121 .buttons > a.button-secondary {
 122   margin-right: 5px;
 123 }
 124
 125 .buttons > a.button {
 126   margin-left: 5px;
 127 }
 128
 129 .signup {
 130   user-select: none;
 131   font-size: 16px;
 132   font-weight: 500;
 133   color: #747b87;
 134   text-align: center;
 135   margin-top: 8px;
 136 }
 137
 138 .signup > a {
 139   color: black;
 140   text-decoration: underline;
 141   cursor: pointer;
 142 }
 143
 144 .error {
 145   color: red;
 146   text-align: center;
 147 }
 148
 149 .account, .select {
 150   background-color: white;
 151   font-size: 18px;
 152   color: #393f48;
 153   padding: 10px;
 154   outline: none;
 155   border: 1px solid #e3e4e8;
 156   border-radius: 7px;
 157   margin-bottom: 6px;
 158   display: flex;
 159   align-items: center;
 160   user-select: none;
 161   cursor: pointer;
 162 }
 163
 164 .select > svg {
 165   width: 30px;
 166   height: 30px;
 167   margin-right: 15px;
 168   color: #252b35;
 169 }
 170
 171 .select > span {
 172   text-overflow: ellipsis;
 173   white-space: nowrap;
 174   overflow: hidden;
 175   width: 80%;
 176 }
 177
 178 .account > img {
 179   width: 40px;
 180   height: 40px;
 181   border-radius: 50%;
 182   margin-right: 15px;
 183   object-fit: cover;
 184 }
 185
 186 .account > .info {
 187   display: flex;
 188   flex-direction: column;
 189   justify-content: center;
 190   width: 100%;
 191 }
 192
 193 .account > .info > .name, .account > .info > .email {
 194   font-size: 14px;
 195   font-weight: 600;
 196   color: #252b35;
 197   text-overflow: ellipsis;
 198   white-space: nowrap;
 199   overflow: hidden;
 200   width: 80%;
 201 }
 202
 203 .account > .info > .email {
 204   font-size: 12px;
 205   font-weight: 500;
 206   color: #747b87;
 207 }
 208
 209 .check-code {
 210   font-size: 16px;
 211   font-weight: 600;
 212   color: #252b35;
 213   margin-top: 8px;
 214   user-select: none;
 215 }
 216
 217 .sent-code {
 218   font-size: 14px;
 219   font-weight: 500;
 220   color: #747b87;
 221   margin-bottom: 16px;
 222   user-select: none;
 223 }
 224
 225 input::-webkit-outer-spin-button,
 226 input::-webkit-inner-spin-button {
 227   -webkit-appearance: none;
 228   margin: 0;
 229 }
 230
 231 input[type=number] {
 232   -moz-appearance: textfield;
 233 }
 234
 235 .code-fa-wrapper {
 236   display: flex;
 237   width: 100%;
 238   align-items: center;
 239   justify-content: center;
 240 }
 241
 242 .code-fa {
 243   width: 100%;
 244   height: 40px;
 245   color: #393f48;
 246   margin-right: 5px;
 247   margin-left: 5px;
 248   text-align: center;
 249   background-color: white;
 250   font-size: 32px;
 251   color: #393f48;
 252   padding: 10px;
 253   outline: none;
 254   border: 1px solid #e3e4e8;
 255   border-radius: 7px;
 256   margin-bottom: 6px;
 257 }
 258
 259 .resend-code {
 260   font-size: 16px;
 261   font-weight: 500;
 262   color: #747b87;
 263   text-align: center;
 264   margin-top: 8px;
 265   margin-bottom: 8px;
 266   user-select: none;
 267 }
 268
 269 .resend-code > a {
 270   color: black;
 271   text-decoration: underline;
 272   cursor: pointer;
 273 }
 274
 275 .hidden {
 276   display: none;
 277 }