GUAC-932: Restyle login page and general UI.

This commit is contained in:
Michael Jumper
2014-11-23 01:31:47 -08:00
parent b68f9a0a26
commit b58a9b284f
13 changed files with 216 additions and 200 deletions

View File

@@ -28,26 +28,19 @@ input[type="submit"], button, a.button {
background-color: #3C3C3C;
border: 1px solid rgba(0, 0, 0, 0.4);
-moz-border-radius: 0.25em;
-webkit-border-radius: 0.25em;
-khtml-border-radius: 0.25em;
border-radius: 0.25em;
color: white;
text-shadow: -1px -1px rgba(0, 0, 0, 0.3);
font-size: 1em;
font-weight: bold;
box-shadow: inset -1px -1px 0.1em rgba(0, 0, 0, 0.25),
inset 1px 1px 0.1em rgba(255, 255, 255, 0.25),
-1px -1px 0.1em rgba(0, 0, 0, 0.25),
1px 1px 0.1em rgba(255, 255, 255, 0.25);
padding: 0.35em;
padding-right: 1em;
padding-left: 1em;
padding: 0.35em 1em;
min-width: 5em;
margin: 0.25em;
border-bottom: rgba(0, 0, 0, 0.25);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
}
input[type="submit"]:hover, button:hover, a.button:hover {

View File

@@ -0,0 +1,43 @@
/*
* Copyright (C) 2014 Glyptodon LLC
*
* Permission is hereby granted, free of charge, to any person obtaining a copy
* of this software and associated documentation files (the "Software"), to deal
* in the Software without restriction, including without limitation the rights
* to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
* copies of the Software, and to permit persons to whom the Software is
* furnished to do so, subject to the following conditions:
*
* The above copyright notice and this permission notice shall be included in
* all copies or substantial portions of the Software.
*
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
* IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
* FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
* AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
* LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
* THE SOFTWARE.
*/
/*
* The Carlito font is licensed under the SIL Open Font License, and thus is
* freely redistributable so long as it is distributed with software.
*
* The SIL OFL license can be found at http://scripts.sil.org/OFL or in the
* "LICENSE" file within the same directory as the Carlito-*.woff font files.
*/
@font-face {
font-family: 'Carlito';
font-weight: normal;
font-style: normal;
src: url('fonts/carlito/Carlito-Regular.woff') format('woff');
}
@font-face {
font-family: 'Carlito';
font-weight: bold;
font-style: normal;
src: url('fonts/carlito/Carlito-Bold.woff') format('woff');
}

View File

@@ -33,7 +33,7 @@ div.location, input[type=text], input[type=number], input[type=password], textar
width: 100%;
max-width: 16em;
padding: 0.25em;
font-size: 10pt;
font-size: 0.8em;
background: white;
cursor: text;
}
@@ -45,82 +45,3 @@ textarea {
white-space: nowrap;
overflow: auto;
}
input[type="submit"], button, a.button {
-webkit-appearance: none;
text-decoration: none;
background-color: #3C3C3C;
border: 1px solid rgba(0, 0, 0, 0.4);
-moz-border-radius: 0.25em;
-webkit-border-radius: 0.25em;
-khtml-border-radius: 0.25em;
border-radius: 0.25em;
color: white;
text-shadow: -1px -1px rgba(0, 0, 0, 0.3);
font-size: 1em;
box-shadow: inset -1px -1px 0.1em rgba(0, 0, 0, 0.25),
inset 1px 1px 0.1em rgba(255, 255, 255, 0.25),
-1px -1px 0.1em rgba(0, 0, 0, 0.25),
1px 1px 0.1em rgba(255, 255, 255, 0.25);
padding: 0.35em;
padding-right: 1em;
padding-left: 1em;
min-width: 5em;
margin: 0.25em;
}
input[type="submit"]:hover, button:hover, a.button:hover {
background-color: #5A5A5A;
}
input[type="submit"]:active, button:active, a.button:active {
background-color: #2C2C2C;
box-shadow:
inset 1px 1px 0.25em rgba(0, 0, 0, 0.25),
-1px -1px 0.25em rgba(0, 0, 0, 0.25),
1px 1px 0.25em rgba(255, 255, 255, 0.25);
}
button.danger, a.button.danger {
background: #A43;
}
button.danger:hover, a.button.danger:hover {
background: #C54;
}
button.danger:active, a.button.danger:active {
background: #932;
}
a.button {
display: inline-block;
}
.button.logout, .button.manage, .button.back {
background-repeat: no-repeat;
background-size: 1em;
background-position: 0.5em 0.45em;
padding-left: 1.8em;
}
.button.logout {
background-image: url('images/action-icons/guac-logout.png');
}
.button.manage {
background-image: url('images/action-icons/guac-config.png');
}
.button.back {
background-image: url('images/action-icons/guac-back.png');
}

View File

@@ -49,32 +49,29 @@
}
.status {
max-width: 75%;
width: 4in;
width: 75%;
max-width: 5in;
margin-left: auto;
margin-right: auto;
overflow: auto;
border: 1px solid rgba(0, 0, 0, 0.5);
background: #E7E7E7;
-moz-border-radius: 0.2em;
-webkit-border-radius: 0.2em;
-khtml-border-radius: 0.2em;
border-radius: 0.2em;
box-shadow: 0.1em 0.1em 0.2em rgba(0, 0, 0, 0.6);
background: white;
border: 1px solid rgba(0, 0, 0, 0.25);
box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.25);
text-align: left;
font-size: 0.8em;
}
.status .title {
font-size: 1.1em;
font-size: 1.25em;
font-weight: bold;
border-bottom: 1px solid black;
margin-bottom: 0.5em;
background: rgba(0, 0, 0, 0.04);
border-bottom: 1px solid rgba(0, 0, 0, 0.125);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.125);
margin: 0;
padding: 0.5em 1em;
}
.status.error {
@@ -83,7 +80,7 @@
}
.status > * {
margin: 0.75em;
margin: 1.25em;
}
/* Fade entire status area in/out based on shown status */

View File

@@ -28,12 +28,16 @@
}
body {
background: #EEE;
font-family: FreeSans, Helvetica, Arial, sans-serif;
background: white;
font-family: Carlito, FreeSans, Helvetica, Arial, sans-serif;
padding: 0;
margin: 0;
}
input[type="submit"], button {
font-family: Carlito, FreeSans, Helvetica, Arial, sans-serif;
}
img {
border: none;
vertical-align: middle;
@@ -52,17 +56,23 @@ h1 {
h2 {
border-top: 1px solid #AAA;
border-bottom: 1px solid #AAA;
background: rgba(0, 0, 0, 0.07);
font-size: 1.25em;
font-weight: bold;
padding: 0.75em 0.5em;
padding: 0.5em;
margin: 0;
font-size: 1.5em;
text-transform: uppercase;
border-bottom: 1px solid rgba(0, 0, 0, 0.125);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.125);
background: rgba(0, 0, 0, 0.04);
font-weight: lighter;
text-shadow: 1px 1px white;
margin-bottom: 1em;
margin-top: 0;
border-top: none;
}
h2 ~ h2 {
margin-top: 1em;
border-top: 1px solid rgba(0, 0, 0, 0.125);
}
div.section {