Added pretty buttons.
This commit is contained in:
@@ -188,6 +188,8 @@ dist_img_DATA := \
|
||||
src/www/img/dialog-error-32.png \
|
||||
src/www/img/dialog-information-32.png \
|
||||
src/www/img/dialog-warning.png \
|
||||
src/www/img/form_buttons.png \
|
||||
src/www/img/form_buttons.gif \
|
||||
src/www/img/help-browser.png \
|
||||
src/www/img/locked.png \
|
||||
src/www/img/locale.png \
|
||||
|
||||
+186
-1
@@ -1,7 +1,7 @@
|
||||
/*
|
||||
Bongo web administration interface (aka Hawkeye) stylesheet
|
||||
(c) 2007 Alexander Hixon <hixon.alexander@mediati.org> - see COPYING for details
|
||||
Last modified: Sunday May 13, 2007
|
||||
Last modified: Monday May 14, 2007
|
||||
|
||||
=======[ Global Styles ]=======
|
||||
*/
|
||||
@@ -279,3 +279,188 @@ ul.nav{
|
||||
color: #eeeeec;
|
||||
border: 3px solid #204a85;
|
||||
}
|
||||
|
||||
/*
|
||||
=======[ Button Styles ]=======
|
||||
http://www.hedgerwow.com/360/dhtml/css-round-button/
|
||||
*/
|
||||
|
||||
a.button, span.button, del.button {
|
||||
display:-moz-inline-box;
|
||||
display:inline-block;
|
||||
cursor:pointer;
|
||||
border:none;
|
||||
font-size:0;
|
||||
line-height:0;
|
||||
|
||||
/*
|
||||
for Safari, read this first
|
||||
http://creativebits.org/webdev/safari_background_repeat_bug_fix
|
||||
*/
|
||||
background-position:0 0;
|
||||
background-repeat:no-repeat;
|
||||
height:30px;
|
||||
text-decoration:none;
|
||||
color:#2e523b;
|
||||
font-style:normal;
|
||||
margin:0 6px 0px 0;
|
||||
padding:0 10px 0 0;
|
||||
vertical-align:middle;
|
||||
|
||||
padding-top:-2px;
|
||||
_position:relative;
|
||||
_width:10px;
|
||||
_overflow-y:hidden;
|
||||
}
|
||||
|
||||
a.button, span.button, del.button,
|
||||
a.button span, span.button button, span.button input, del.button span {
|
||||
background-image:url('/img/form_buttons.png');
|
||||
_background-image:url('/img/form_buttons.gif');
|
||||
}
|
||||
|
||||
|
||||
a.button span, span.button button, span.button input, del.button span {
|
||||
white-space:nowrap;
|
||||
cursor:pointer;
|
||||
color:#222;
|
||||
display:-moz-inline-box;
|
||||
display:inline-block;
|
||||
line-height:1;
|
||||
/*letter-spacing:0 !important;
|
||||
font-family:"Arial" !important;
|
||||
font-size:12px !important;*/
|
||||
font-style:normal;
|
||||
background-color:transparent;
|
||||
background-position:100% 0;
|
||||
background-repeat:no-repeat;
|
||||
height:30px;
|
||||
padding:8px 20px 0 10px;
|
||||
margin:0 -16px 0 10px;
|
||||
border:none;
|
||||
vertical-align:text-top;
|
||||
zoom:1;
|
||||
_position:relative;
|
||||
_padding-left:0px;
|
||||
_padding-right:12px;
|
||||
_margin-right:-10px;
|
||||
_display:block;
|
||||
_top:0;
|
||||
_right:-5px;
|
||||
}
|
||||
|
||||
|
||||
span.button button {
|
||||
line-height:2.5; /*Opera need this*/
|
||||
}
|
||||
|
||||
html.safari a.button span,
|
||||
html.safari del.button span {
|
||||
line-height:1.3;
|
||||
}
|
||||
|
||||
html.safari span.button button {
|
||||
line-height:2.6;
|
||||
}
|
||||
|
||||
html.safari a.button:focus,
|
||||
html.safari span.button button:focus {
|
||||
outline:none;
|
||||
}
|
||||
|
||||
del.button {
|
||||
/* cursor:not-allowed; */
|
||||
background-position:0 -120px;
|
||||
}
|
||||
|
||||
del.button span {
|
||||
cursor:default;
|
||||
color:#aaa !important;
|
||||
background-position:100% -120px;
|
||||
}
|
||||
|
||||
span.button button, span.button input {
|
||||
padding-top:0px;
|
||||
line-height:2.5; /*Opera need this*/
|
||||
}
|
||||
|
||||
/*Hover Style*/
|
||||
a.button:hover,
|
||||
span.button:hover,
|
||||
a.button:focus,
|
||||
|
||||
a.dom-button-focus,
|
||||
span.button-behavior-hover {
|
||||
background-position:0 -60px;
|
||||
color:#222;
|
||||
text-decoration:none;
|
||||
}
|
||||
|
||||
a.button:hover span,
|
||||
span.button:hover button,
|
||||
a.button:focus span,
|
||||
|
||||
span.button-behavior-hover button,
|
||||
span.button-behavior-hover input {
|
||||
background-position:100% -60px;
|
||||
}
|
||||
|
||||
a.button:active, a.button:focus span {
|
||||
color:#444;
|
||||
}
|
||||
|
||||
del.button-behavior-hover, del.button:hover {
|
||||
background-position:0 -180px;
|
||||
/* cursor:not-allowed; */
|
||||
}
|
||||
|
||||
del.button-behavior-hover span, del.button:hover span {
|
||||
background-position:100% -180px;
|
||||
/* cursor:not-allowed; */
|
||||
|
||||
}
|
||||
|
||||
/*Optional hack for IE6 to simulate :hover selector*/
|
||||
|
||||
span.button button, del.button span, span.button input{
|
||||
|
||||
|
||||
|
||||
_behavior:expression(
|
||||
(function(el){
|
||||
|
||||
if( typeof( behavior_onMouseEnter) == 'undefined'){
|
||||
|
||||
|
||||
behavior_onMouseEnter = function(el){
|
||||
|
||||
var dEl = this.parentNode;
|
||||
var sClass = dEl.className ;
|
||||
dEl.__defaultClassName = sClass ;
|
||||
dEl.className = sClass + ' button-behavior-hover';
|
||||
this.setCapture();
|
||||
};
|
||||
|
||||
behavior_onMouseLeave = function(el) {
|
||||
var dEl = this.parentNode;
|
||||
dEl.className = dEl.__defaultClassName ;
|
||||
dEl.__defaultClassName = undefined;
|
||||
this.releaseCapture();
|
||||
};
|
||||
|
||||
|
||||
};
|
||||
|
||||
|
||||
el.runtimeStyle.behavior = 'none';
|
||||
el.onmouseenter = behavior_onMouseEnter;
|
||||
el.onmouseleave = behavior_onMouseLeave;
|
||||
|
||||
|
||||
})(this));
|
||||
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
@@ -16,9 +16,9 @@
|
||||
<input type="password" name="bongo-password" class="password inputbox"/><br />
|
||||
<select name="lang" class="lang">
|
||||
<option value="en">English</option>
|
||||
<option value="fr">Français</option>
|
||||
<!-- <option value="fr">Français</option> -->
|
||||
</select>
|
||||
<div class="submit"><input type="submit" value="Log in"></div>
|
||||
<div class="submit"><span class="button"><button type="submit" value="Log in">Log in</button></span></div>
|
||||
</form>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
@@ -21,10 +21,11 @@
|
||||
</tr>
|
||||
</table>
|
||||
<br />
|
||||
<input type="submit" value="Save" />
|
||||
<span class="button"><button type="submit" value="Save">Save</button></span>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
</p>
|
||||
|
||||
<br />
|
||||
%(include|footer.tpl)s
|
||||
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 5.5 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.3 KiB |
Reference in New Issue
Block a user