KaiRo bug 393 - Create a grouping mechanism for user names so people with multiple...

[authserver.git] / authsystem.css

diff --git a/authsystem.css b/authsystem.css
index 17c113b99961f6bfc1be3e4ec9ddb77a9e6af8eb..4c8dd5f8a787e1949f9d16584d396939a9362e9f 100644 (file)
--- a/authsystem.css
+++ b/authsystem.css
@@ -15,16 +15,36 @@ h1 {
   left: 0;
   right: 0;
   margin: 0;
-  padding: 10px 130px 0; /* IE8 and older do not support rem */
-  padding: 1rem 130px 0;
+  padding: 10px 0 0 130px; /* IE8 and older do not support rem */
+  padding: 1rem 0 0 130px;
   height: 60px; /* IE8 and older do not support rem */
   height: 4rem;
   min-height: calc(70px - 1rem);
+  font-size: 2em;
   background-color: #003366;
   color: #FFFFEE;
   background-image: url("KaiRoLogo-100x62.png");
   background-repeat: no-repeat;
   background-position: 10px 50%;
+  overflow: hidden;
+}
+@media screen and (max-width: 550px) {
+  h1 {
+    font-size: 1.5em;
+  }
+}
+@media screen and (max-width: 375px) {
+  h1 {
+    font-size: 1.2em;
+    padding-left: 120px;
+  }
+}
+@media screen and (max-width: 325px) {
+  h1 {
+    padding-top: 0.5rem;
+    height: 4.5rem;
+    min-height: calc(70px - 0.5rem);
+  }
 }
 
 a:link { color: #669999; }
@@ -74,6 +94,12 @@ table.border td {
   margin: 0.5rem 1rem 0;
 }
 
+.loginheader > .groupmails {
+  font-weight: normal;
+  margin: 5px 0; /* IE8 and older do not support rem */
+  margin: 0.5rem 0;
+}
+
 .loginlinks {
   margin: 5px 10px 0; /* IE8 and older do not support rem */
   margin: 0.5rem 1rem 0;
@@ -86,7 +112,9 @@ table.border td {
 
 .resetinfo,
 .verifyinfo,
-.newpwdinfo {
+.addemailinfo,
+.newpwdinfo,
+.signinwelcome {
   margin: 5px 10px 0; /* IE8 and older do not support rem */
   margin: 0.5rem 1rem 0;
 }
@@ -99,6 +127,19 @@ table.border td {
   background-position: 0 50%;
 }
 
+.signinwelcome {
+  font-size: 1.2em;
+}
+
+.otheremaillinks > a {
+  background-color: #EEEEDD;
+  text-decoration: none;
+  padding: .2em;
+  border-radius: 3px;
+}
+.otheremaillinks > a:link, .otheremaillinks > a:visited { color: #BBBBBB; }
+.otheremaillinks > a:hover, .otheremaillinks > a:active { color: #808080; }
+
 .small {
   font-size: 0.75em;
 }
@@ -114,6 +155,21 @@ table.border td {
   opacity: 0;
 }
 
+input,
+select {
+  font-size: .9em;
+}
+
+@media screen and (max-width: 375px) {
+  /* On smaller devices, make the form elements into larger touch targets. */
+  input,
+  select {
+    font-size: 1em;
+    padding-top: 0.5em;
+    padding-bottom: 0.5em;
+  }
+}
+
 input:invalid {
   box-shadow: 0 0 2px 1px red;
 }