elofgren: USABILITY: Move action buttons to bottom right of screen, make them look more like buttons, and add hover effect in order to fix usability issue #13 'Important Buttons Not Noticeable Enough'. More info: http://www.silverstripe.com/google-summer-of-code-forum/flat/1654

(merged from branches/gsoc)


git-svn-id: svn://svn.silverstripe.com/silverstripe/open/modules/cms/trunk@41859 467b73ca-7a2a-4603-9d3b-597d59a354a9
This commit is contained in:
Ingo Schommer 2007-09-15 00:57:46 +00:00
parent 9413acbc05
commit 708621f56b

View File

@ -330,30 +330,54 @@ table.CMSList tbody td.current td {
.ajaxActions { .ajaxActions {
position: absolute; position: absolute;
top: 0; bottom: 3px;
right: 0; right: 10px;
padding: 0; padding: 0;
margin: 0; margin: 0;
text-align: right; text-align: right;
/*
background-image:url(../images/textures/ToolBar.png); background-image:url(../images/textures/ToolBar.png);
height : 21px; height : 21px;
border-left : 1px solid #808080; border-left : 1px solid #808080;
border-bottom : 1px solid #808080; border-bottom : 1px solid #808080;
*/
} }
.ajaxActions input { .ajaxActions input {
/*
padding: 0; padding: 0;
border-style: none; border-style: none;
background-color:transparent; background-color:transparent;
*/
cursor: pointer; cursor: pointer;
float : left; float : left;
height : 22px; height : 25px;
/*
background-image:url(../images/textures/seperator.png); background-image:url(../images/textures/seperator.png);
background-repeat:no-repeat; background-repeat:no-repeat;
background-position:right; background-position:right;
*/
background-image: url(../images/textures/ToolBar.png);
padding-left: 10px; padding-left: 10px;
padding-right : 10px; padding-right : 10px;
margin : 0px; margin : 0px;
color : #333333; color : #333333;
overflow: visible;
width: auto;
border-color: #CCCCCC rgb(153, 153, 153) rgb(153, 153, 153) rgb(204, 204, 204);
border-style: double;
border-width: 3px;
margin: 1px;
}
.ajaxActions input:active {
background: #F4F4F4 none repeat scroll 0%;
border-color: #999999 rgb(204, 204, 204) rgb(204, 204, 204) rgb(153, 153, 153);
}
.ajaxActions input:hover {
background: #fff;
}
.ajaxActions input.delete:hover {
background: #ce0000;
color: #fff;
} }
.right form div.tab { .right form div.tab {
@ -614,29 +638,28 @@ div.TreeDropdownField a.editLink {
#statusMessage { #statusMessage {
position: absolute; position: absolute;
z-index: 500; z-index: 500;
bottom: 15px; bottom: 3px;
right: 30px; left: 3px;
text-align: left; text-align: left;
padding: 1px 1px 1px 40px;
padding: 15px 15px 15px 40px;
font-size: 16px; font-size: 16px;
font-weight: bold; font-weight: bold;
border: 1px solid #cc9; /* border: 1px solid #cc9; */
color: #660; color: #660;
background-color: #F9F9E3; /* background-color: #F9F9E3; */
margin: 2px;
} }
#statusMessage.good { #statusMessage.good {
border-color: #9c9; border-color: #9c9;
color: #060; color: #060;
background: url(../images/alert-good.gif) #E2F9E3 7px no-repeat; background: url(../images/alert-good.gif) /*#E2F9E3*/ 7px no-repeat;
} }
#statusMessage.bad { #statusMessage.bad {
border-color: #c99; border-color: #c99;
color: #fff; color: #c00;
background: url(../images/alert-bad.gif) #c00 7px no-repeat; background: url(../images/alert-bad.gif) /*#c00*/ 7px no-repeat;
max-height: 600px; max-height: 600px;
overflow: auto; overflow: auto;
} }