Owen Leonard
87a0b79a65
This patch updates the image replacement technique used for Koha's login page. The old technique used a negative text-indent value to move the text offscreen, but that begins to fail more and more often as screens get larger. The new technqiue is described here: http://www.zeldman.com/2012/03/01/replacing-the-9999px-hack-new-image-replacement/ Note: This patch has not been tested in any Internet Explorer version! To test you must have a screen which is wider than 2000 pixels. Apply the patch, clear your browser cache and view the staff client login page. The logo on the login form should look correct with no corresponding text appearing anywhere on the screen. Signed-off-by: Christopher Brannon <cbrannon@debian.localdomain> Signed-off-by: Kyle M Hall <kyle@bywatersolutions.com> Signed-off-by: Tomas Cohen Arazi <tomascohen@gmail.com>
178 lines
3.4 KiB
CSS
178 lines
3.4 KiB
CSS
a.edit, a.delete, a.edit:hover, a.delete:hover {
|
|
border-bottom: none;
|
|
display: block;
|
|
padding: 5px 0;
|
|
text-align: center;
|
|
}
|
|
|
|
a.edit:hover {
|
|
background: #ccc;
|
|
color: #036;
|
|
}
|
|
|
|
a:visited {
|
|
color: #006;
|
|
}
|
|
|
|
a:hover {
|
|
/* border-bottom: 1px solid #3a75ae;*/
|
|
color: #069;
|
|
}
|
|
|
|
body {
|
|
background: #f5f5f5;
|
|
}
|
|
|
|
form, label input {
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
input:focus, textarea:focus, label:focus {
|
|
background: #fff;
|
|
border: 1px solid #686868;
|
|
}
|
|
|
|
label {
|
|
display : block;
|
|
margin : .2em 0;
|
|
}
|
|
|
|
#logo { margin-bottom: 2em; }
|
|
|
|
#login {
|
|
background: #fff;
|
|
border: 1px solid #a2a2a2;
|
|
margin: 4em auto;
|
|
padding: 1.5em;
|
|
position : relative;
|
|
top : auto;
|
|
right : auto;
|
|
width: 25em;
|
|
}
|
|
|
|
#login #login_error {
|
|
background: #D23F3F;
|
|
border: 1px solid #a40000;
|
|
color: #fff;
|
|
font-size: 120%;
|
|
line-height: 140%;
|
|
font-weight: bold;
|
|
margin: 1em 0;
|
|
padding: .5em;
|
|
text-align: center;
|
|
text-shadow: 0px 1px 1px #6C1010;
|
|
filter: dropshadow(color=#6C1010, offx=0, offy=1);
|
|
-moz-border-radius: 5px;
|
|
border-radius: 5px;
|
|
}
|
|
|
|
#login #login_error a:link,
|
|
#login #login_error a:visited {
|
|
color : #FFC;
|
|
}
|
|
|
|
#login #login_error a:hover,
|
|
#login #login_error a:active {
|
|
color : #FCFC4D;
|
|
}
|
|
|
|
#login h1 {
|
|
background: url(../../img/koha-logo.gif) no-repeat top center;
|
|
margin-top: 0;
|
|
margin-bottom : .5em;
|
|
}
|
|
|
|
#login h1 a {
|
|
/* http://www.zeldman.com/2012/03/01/replacing-the-9999px-hack-new-image-replacement/ */
|
|
display: block;
|
|
height: 74px;
|
|
text-indent: 100%;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
}
|
|
|
|
#login input {
|
|
padding: 3px;
|
|
}
|
|
|
|
#login ul {
|
|
list-style: none;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
#login ul li {
|
|
display: inline;
|
|
margin-left: 1.4em;
|
|
text-align: center;
|
|
}
|
|
|
|
#login #userid, #password {
|
|
font-size: 1.7em;
|
|
width: 97%;
|
|
}
|
|
|
|
#login #branch {
|
|
width : 99%;
|
|
}
|
|
|
|
#login #submit, #login .button {
|
|
font-size: 1.4em;
|
|
padding : .3em .6em;
|
|
}
|
|
|
|
#login #onerror_actions {
|
|
margin-bottom: 1em;
|
|
text-align: center;
|
|
}
|
|
|
|
#login #onerror_actions .button {
|
|
margin: 3px;
|
|
color: #333333;
|
|
}
|
|
|
|
#footer {
|
|
text-align: center;
|
|
border-top: 1px solid #ccc;
|
|
padding-top: 1em;
|
|
font-style: italic;
|
|
}
|
|
|
|
.submit input, .submit input:focus, .button {
|
|
border: 1px outset #999999;
|
|
border-top-color: #666;
|
|
border-left-color: #666;
|
|
-moz-border-radius : 2px;
|
|
padding: 0.25em;
|
|
background: #ffffff; /* Old browsers */
|
|
background: -moz-linear-gradient(top, #ffffff 0%, #f7f7f7 35%, #e0e0e0 100%); /* FF3.6+ */
|
|
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(35%,#f7f7f7), color-stop(100%,#e0e0e0)); /* Chrome,Safari4+ */
|
|
background: -webkit-linear-gradient(top, #ffffff 0%,#f7f7f7 35%,#e0e0e0 100%); /* Chrome10+,Safari5.1+ */
|
|
background: -o-linear-gradient(top, #ffffff 0%,#f7f7f7 35%,#e0e0e0 100%); /* Opera11.10+ */
|
|
background: -ms-linear-gradient(top, #ffffff 0%,#f7f7f7 35%,#e0e0e0 100%); /* IE10+ */
|
|
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#e0e0e0',GradientType=0 ); /* IE6-9 */
|
|
background: linear-gradient(top, #ffffff 0%,#f7f7f7 35%,#e0e0e0 100%); /* W3C */
|
|
color: #333333;
|
|
padding: 0.25em;
|
|
}
|
|
|
|
.submit input:active, .button:active {
|
|
background: #f4f4f4;
|
|
border: 1px solid #999;
|
|
border-left-color: #999;
|
|
border-top-color: #999;
|
|
}
|
|
|
|
.submit, .editform th, #postcustomsubmit {
|
|
text-align: right;
|
|
}
|
|
|
|
textarea, input, select {
|
|
background: #f4f4f4;
|
|
border: 1px solid #b2b2b2;
|
|
color: #000;
|
|
font: 13px Verdana, Arial, Helvetica, sans-serif;
|
|
margin: 1px;
|
|
padding: 3px;
|
|
}
|