captive: Import new design

[people/pmueller/ipfire-2.x.git] / html / html / captive / assets / captive.css

diff --git a/html/html/captive/assets/captive.css b/html/html/captive/assets/captive.css
index 7e8eac6b3fdb535de8752973eb7daec59bd57c27..e405cc94a4b58da9df69bbfead0f1ceba31b6752 100644 (file)
--- a/html/html/captive/assets/captive.css
+++ b/html/html/captive/assets/captive.css
@@ -1,76 +1,161 @@
-h1{
-       font-family: sans-serif;
+body {
+       background-color: #eceff1;
+       color: #263238;
+
+       display: flex;
+       min-height: 100vh;
+       flex-direction: column;
 }
 
-body {
-       height: 100%;
-    background-image: url("internet.png");
-    background-size:     cover;                      /* <------ */
-    background-repeat:   no-repeat;
-    background-position: center center;
+body, input {
+       font-family: "Ubuntu", sans-serif;
+       font-size: 14px;
 }
 
-.title{
-       position: relative;
-       background: #f5f5f5;
-       border: 1px solid #FFF;
-       width: 40em;
-       height: 6em;
-       left: 1em;
-       top: 2em;
-       padding-left: 2em;
-       padding-right: 2em;
-       padding-top: 0,5em;
-       opacity: 0.9;
-       border-radius: 5px;
-       -moz-border-radius: 5px;
-       -webkit-border-radius: 5px;
-       box-shadow: 1px 2px 4px rgba(0,0,0,.4);
-}
-
-.login{
+.content {
+       flex: 1;
+}
+
+.box {
+       margin: 272px 0 48px 0;
+       padding: 0 30px 48px 30px;
+
        position: relative;
-       background: #f5f5f5;
-       border: 1px solid #FFF;
-       width: 40em;
-       left: 1em;
-       top: 2em;
-       margin-top: 0,2em;
-       padding-left: 2em;
-       padding-right: 2em;
-       padding-top: 1em;
-       text-align: left;
-       font-family: sans-serif;
-       border-radius: 5px;
-       -moz-border-radius: 5px;
-       -webkit-border-radius: 5px;
-       box-shadow: 1px 2px 4px rgba(0,0,0,.4);
-}
-
-.agb{
+       display: flex;
+       flex-direction: column;
+       background-color: white;
+
+       border: none;
+       border-radius: 4px;
+       box-shadow:
+               0 19px 38px 0 rgba(0, 0, 0, 0.3),
+               0 15px 12px 0 rgba(0, 0, 0, 0.22);
+}
+
+.box-header {
+       display: flex;
+       align-items: center;
+       justify-content: center;
+       min-height: 128px;
+}
+
+.box-header h1 {
+       font-size: 40px;
+}
+
+@media (min-width: 1200px) {
+       .box-header {
+               min-height: none;
+       }
+
+       .box-header h1 {
+               margin-top: 24px;
+               margin-bottom: 20px;
+       }
+}
+
+.box-block {
+       padding: 24px 16px 24px 16px;
+       margin: 0 -8px 40px -8px;
+
+       text-align: center;
+       background-color: #b71c1c;
+       color: white;
+       border-radius: 4px;
+}
+
+@media (min-width: 1200px) {
+       .box-block {
+               padding: 18px 16px 18px 16px;
+               margin: 0 0 48px 0;
+       }
+}
+
+.box-block h4 {
+       font-size: 20px;
+}
+
+footer {
+       height: 64px;
+       background-color: rgba(84, 110, 122, 0.06); /* #546e7a */
+}
+
+.footer {
+       display: flex;
+       align-items: center;
+}
+
+.footer .logo {
+       width: 64px;
+       height: 64px;
+       padding: 8px;
+}
+
+.form-text {
+       display: inline-block;
+       height: 36px;
+
+       color: #263238;
+       background-color: rgba(38, 49, 56, 0,08);
+
+       border: 0;
+       border-radius: 2px;
+       box-shadow: inset 0 -2px 0 0 #546e7a;
+}
+
+.form-text .error {
+       box-shadow: 0 -2px 0 0 #ff3d00;
+}
+
+.form-submit {
+       display: inline-block;
+
+       font-weight: 500;
+       text-transform: uppercase;
+
+       height: 36px;
+       padding: 0 16px 0 16px;
+       margin: 0 8px 0 8px;
+
+       color: #263238;
+       background-color: white;
+
+       border: none;
+       border-radius: 2px;
+       box-shadow:
+               0 2px 4px 0 rgba(0, 0, 0, 0.16),
+               0 1px 2px 0 rgba(0, 0, 0, 0.23);
+}
+
+.form-submit:hover {
+       box-shadow:
+               0 3px 6px 0 rgba(0, 0, 0, 0.16),
+               0 3px 6px 0 rgba(0, 0, 0, 0.23);
+}
+
+.form-submit:active {
+       background-color: black;
+       opacity: 0.16;
+       box-shadow: none;
+}
+
+.checkbox {
        position: relative;
-       background: #f5f5f5;
-       border: 1px solid #FFF;
-       width: 40em;
-       left: 1em;
-       top: 2em;
-       margin-top: 0,2em;
-       padding-left: 2em;
-       padding-right: 2em;
-       padding-top: 1em;
-       text-align: left;
-       font-family: sans-serif;
-       opacity: 0.9;
-       border-radius: 5px;
-       -moz-border-radius: 5px;
-       -webkit-border-radius: 5px;
-       box-shadow: 1px 2px 4px rgba(0,0,0,.4);
-}
-
-#agbtext{
-       font-size: 12px;
-       font-weight: normal;
-       resize: none;
-       overflow-y: scroll;
+       display: block;
+
+       margin-top: 20px;
 }
 
+.checkbox .form-checkbox {
+       position: absolute;
+       margin-top: 1px;
+       margin-left: -24px;
+
+       width: 20px;
+       height: 20px;
+
+       background-color: rgba(38, 49, 56, 0.08);
+
+       border: 2px solid #546e7a;
+       border-radius: 2px;
+}