html/html/captive/assets/captive.css

   1 body {
   2         background-color: #eceff1;
   3         color: #263238;
   4
   5         display: flex;
   6         min-height: 100vh;
   7         flex-direction: column;
   8 }
   9
  10 body, input {
  11         font-family: "Ubuntu", sans-serif;
  12         font-size: 14px;
  13 }
  14
  15 .content {
  16         flex: 1;
  17 }
  18
  19 .box {
  20         margin: 272px 0 48px 0;
  21         padding: 0 30px 48px 30px;
  22
  23         position: relative;
  24         display: flex;
  25         flex-direction: column;
  26         background-color: white;
  27
  28         border: none;
  29         border-radius: 4px;
  30         box-shadow:
  31                 0 19px 38px 0 rgba(0, 0, 0, 0.3),
  32                 0 15px 12px 0 rgba(0, 0, 0, 0.22);
  33 }
  34
  35 .box-header {
  36         display: flex;
  37         align-items: center;
  38         justify-content: center;
  39         min-height: 128px;
  40 }
  41
  42 .box-header h1 {
  43         font-size: 40px;
  44 }
  45
  46 @media (min-width: 1200px) {
  47         .box-header {
  48                 min-height: none;
  49         }
  50
  51         .box-header h1 {
  52                 margin-top: 24px;
  53                 margin-bottom: 20px;
  54         }
  55 }
  56
  57 .box-block {
  58         padding: 24px 16px 24px 16px;
  59         margin: 0 -8px 40px -8px;
  60
  61         text-align: center;
  62         background-color: #b71c1c;
  63         color: white;
  64         border-radius: 4px;
  65 }
  66
  67 @media (min-width: 1200px) {
  68         .box-block {
  69                 padding: 18px 16px 18px 16px;
  70                 margin: 0 0 48px 0;
  71         }
  72 }
  73
  74 .box-block h4 {
  75         font-size: 20px;
  76 }
  77
  78 footer {
  79         height: 64px;
  80         background-color: rgba(84, 110, 122, 0.06); /* #546e7a */
  81 }
  82
  83 .footer {
  84         display: flex;
  85         align-items: center;
  86 }
  87
  88 .footer .logo {
  89         width: 64px;
  90         height: 64px;
  91         padding: 8px;
  92 }
  93
  94 .form-text {
  95         display: inline-block;
  96         height: 36px;
  97
  98         color: #263238;
  99         background-color: rgba(38, 49, 56, 0,08);
 100
 101         border: 0;
 102         border-radius: 2px;
 103         box-shadow: inset 0 -2px 0 0 #546e7a;
 104 }
 105
 106 .form-text .error {
 107         box-shadow: 0 -2px 0 0 #ff3d00;
 108 }
 109
 110 .form-submit {
 111         display: inline-block;
 112
 113         font-weight: 500;
 114         text-transform: uppercase;
 115
 116         height: 36px;
 117         padding: 0 16px 0 16px;
 118         margin: 0 8px 0 8px;
 119
 120         color: #263238;
 121         background-color: white;
 122
 123         border: none;
 124         border-radius: 2px;
 125         box-shadow:
 126                 0 2px 4px 0 rgba(0, 0, 0, 0.16),
 127                 0 1px 2px 0 rgba(0, 0, 0, 0.23);
 128 }
 129
 130 .form-submit:hover {
 131         box-shadow:
 132                 0 3px 6px 0 rgba(0, 0, 0, 0.16),
 133                 0 3px 6px 0 rgba(0, 0, 0, 0.23);
 134 }
 135
 136 .form-submit:active {
 137         background-color: black;
 138         opacity: 0.16;
 139         box-shadow: none;
 140 }
 141
 142 .checkbox {
 143         position: relative;
 144         display: block;
 145
 146         margin-top: 20px;
 147 }
 148
 149 .checkbox .form-checkbox {
 150         position: absolute;
 151         margin-top: 1px;
 152         margin-left: -24px;
 153
 154         width: 20px;
 155         height: 20px;
 156
 157         background-color: rgba(38, 49, 56, 0.08);
 158
 159         border: 2px solid #546e7a;
 160         border-radius: 2px;
 161 }