html/html/captive/assets/captive.css

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