Second part of KaiRo bug 371 - Make design somewhat more appealing, make it work...

[authserver.git] / authsystem.css

/* This Source Code Form is subject to the terms of the Mozilla Public
 * License, v. 2.0. If a copy of the MPL was not distributed with this file,
 * You can obtain one at http://mozilla.org/MPL/2.0/. */

body {
  font-family: sans-serif;
/*  margin: 0; */
  background-color: #FFFFEE;
  padding-top: 5em; /* leave space for total height of h1: 4+1(r)em */
}

h1 {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  margin: 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; }
a:visited { color: #003366; }
a:hover, a:active { color: #88BBBB; }

ul.flat {
 list-style-type: none;
 margin: 0em;
 padding: 0px;
}
ul.flat li {
 margin: 0 0 0.2em 0;
 padding: 0px;
}
p.flat {
  border: 0px;
  margin: 0px;
  padding: 0px;
}
form.flat {
  border: 0px;
  margin: 0px;
  padding: 0px;
}

table.border {
 border-spacing: 0px;
 border-collapse: collapse;
 empty-cells: show;
 border-left: 1px solid #336699;
 border-top: 1px solid #336699;
}
table.border th, table.border td {
 border-bottom: 1px solid #336699;
 border-right: 1px solid #336699;
}
table.border td {
 padding-left: 3px;
 padding-right: 3px;
}

.loginheader {
  font-size: 1.2em;
  font-weight: bold;
  margin: 5px 10px 0; /* IE8 and older do not support rem */
  margin: 0.5rem 1rem 0;
}

.loginlinks {
  margin: 5px 10px 0; /* IE8 and older do not support rem */
  margin: 0.5rem 1rem 0;
}

.loginarea {
  margin: 5px 10px 0; /* IE8 and older do not support rem */
  margin: 0.5rem 1rem 0;
}

.resetinfo,
.verifyinfo,
.newpwdinfo {
  margin: 5px 10px 0; /* IE8 and older do not support rem */
  margin: 0.5rem 1rem 0;
}

.resetinfo.done,
.verifyinfo.done {
  padding-left: 20px;
  background-image: url("check.png");
  background-repeat: no-repeat;
  background-position: 0 50%;
}

.small {
  font-size: 0.75em;
}
.hidden {
  display: none;
}
.warn {
  color: red;
}
.donotshow {
  position: absolute;
  right: -1000px;
  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;
}