html/html/captive/assets/captive.css

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