New (custom) CSS processor, supports nested rules, background sprites, selector mixins, et cetera. Some styles have been updated to use this. History images now use sprites. All images have been optomized with advpng and optipng.

2026-09-24 16:30:27 +08:00 · 2009-07-24 16:14:46 -04:00
parent b6ea9ed1eb
commit 19f33d97fe
53 changed files with 765 additions and 250 deletions
@@ -14,8 +14,7 @@ from galaxy import util
 pkg_resources.require( "simplejson" )
 import simplejson

-pkg_resources.require( "WebHelpers" )
-import webhelpers
+import helpers

 pkg_resources.require( "PasteDeploy" )
 from paste.deploy.converters import asbool
@@ -567,19 +566,19 @@ class UniverseWebTransaction( base.DefaultWebTransaction ):
            return self.fill_template_mako( filename, **kwargs )
        else:
            template = Template( file=os.path.join(self.app.config.template_path, filename), 
-                                 searchList=[kwargs, self.template_context, dict(caller=self, t=self, h=webhelpers, util=util, request=self.request, response=self.response, app=self.app)] )
+                                 searchList=[kwargs, self.template_context, dict(caller=self, t=self, h=helpers, util=util, request=self.request, response=self.response, app=self.app)] )
            return str( template )
    def fill_template_mako( self, filename, **kwargs ):
        template = self.webapp.mako_template_lookup.get_template( filename )
        template.output_encoding = 'utf-8' 
-        data = dict( caller=self, t=self, trans=self, h=webhelpers, util=util, request=self.request, response=self.response, app=self.app )
+        data = dict( caller=self, t=self, trans=self, h=helpers, util=util, request=self.request, response=self.response, app=self.app )
        data.update( self.template_context )
        data.update( kwargs )
        return template.render( **data )
    def stream_template_mako( self, filename, **kwargs ):
        template = self.webapp.mako_template_lookup.get_template( filename )
        template.output_encoding = 'utf-8' 
-        data = dict( caller=self, t=self, trans=self, h=webhelpers, util=util, request=self.request, response=self.response, app=self.app )
+        data = dict( caller=self, t=self, trans=self, h=helpers, util=util, request=self.request, response=self.response, app=self.app )
        data.update( self.template_context )
        data.update( kwargs )
        ## return template.render( **data )
@@ -1,3 +1,6 @@
+import pkg_resources
+
+pkg_resources.require( "WebHelpers" )
 from webhelpers import *

 from datetime import datetime
@@ -9,4 +12,20 @@ def iff( a, b, c ):
    if a:
        return b
    else:
-        return c
+        return c
+    
+# Quick helpers for static content
+
+def css( *args ):
+    """
+    Take a list of stylesheet names (no extension) and return appropriate string
+    of link tags. 
+    """
+    return "\n".join( [ stylesheet_link_tag( "/static/style/" + name + ".css" ) for name in args ] )
+        
+def js( *args ):
+    """
+    Take a list of javascript names (no extension) and return appropriate
+    string of script tags.
+    """
+    return "\n".join( [ javascript_include_tag( "/static/scripts/" + name + ".js" ) for name in args ] )
@@ -1,8 +1,9 @@
-@import url( "reset.css" );
+## Font settings from YUI + verdana
+body{font:13px/1.231 verdana,arial,helvetica,clean,sans-serif;*font-size:small;*font:x-small;}select,input,button,textarea,button{font:99% verdana,arial,helvetica,clean,sans-serif;}table{font-size:inherit;font:100%;}pre,code,kbd,samp,tt{font-family:monospace;*font-size:108%;line-height:100%;}
+body{font-size:75%;}

 body 
 {
-    font: 75% verdana, "Bitstream Vera Sans", geneva, arial, helvetica, helve, sans-serif; 
    background: $base_bg_bottom;
    color: $base_text;
    background-image: url(base_bg.png);
@@ -590,7 +591,7 @@ div.popupmenu-item:hover {
    font-size: 80%;
    cursor: pointer;
    text-decoration: none;
-    color: #555
+    color: #555;
 }

 .popup-arrow:hover {
@@ -1 +1,31 @@
-body{background:#C1C9E5;color:#303030;background-image:url(menu_bg.png);background-repeat:repeat-x;background-position:top;margin:5px;border:0;padding:0;}a{color:#base_text;}div.historyLinks{padding:5px;margin-top:5px;margin-bottom:5px;padding-right:5px;padding-left:5px;margin-bottom:5px;}div.historyItem{margin-right:-5px;margin-top:5px;margin-bottom:5px;padding:5px;padding-right:11px;border:solid #888 1px;border-left:solid #888 5px;border-right:none;background:#EEE;background-image:url(gray_bg.png);background-repeat:repeat-x;background-position:top;}div.historyItem div.historyItem{margin-right:-11px;}div.historyItem-ok{border-color:#6A6;background:#CFC;}div.historyItem-error,div.historyItem-empty{border-color:#A66;background:#FCC;}div.historyItem-running{border-color:#AA6;background:#FFC;}div.historyItem-upload{border-color:#66A;background:#CCF;}div.historyItem-noPermission{filter:alpha(opacity=60);-moz-opacity:.60;opacity:.60;}div.historyItemBody div{padding-top:2px;}pre.peek{background:white;color:black;width:100%;overflow:auto;}pre.peek th{color:white;background:#023858;}
+body{background:#C1C9E5;color:#303030;background-image:url(menu_bg.png);background-repeat:repeat-x;background-position:top;margin:5px;border:0;padding:0;}
+a{color:#base_text;}
+div.historyLinks{padding:5px;margin:5px 0 5px 0;}
+div.historyItem{margin:5px -5px 5px 0px;padding:5px 11px 5px 5px;border:solid #888888 1px;border-left:solid #888888 5px;border-right:none;background:#EEEEEE;}
+div.historyItem div.historyItemTitleBar{padding-left:20px;background-position:0 1px;background-repeat:no-repeat;}
+div.historyItem div.historyItem{margin-right:-11px;}
+div.historyItem-ok{border-color:#66AA66;background:#CCFFCC;}
+div.historyItem-ok div.historyItemTitleBar{padding-left:0;}
+div.historyItem-error{border-color:#AA6666;background:#FFCCCC;}
+div.historyItem-error div.historyItemTitleBar{background:url(history-states.png) no-repeat 0px -0px;}
+div.historyItem-empty{border-color:#AA6666;background:#FFCCCC;}
+div.historyItem-empty div.historyItemTitleBar{background:url(history-states.png) no-repeat 0px -25px;}
+div.historyItem-running{border-color:#AAAA66;background:#FFFFCC;}
+div.historyItem-running div.historyItemTitleBar{background-image:url(data_running.gif);}
+div.historyItem-upload{border-color:#6666AA;background:#CCCCFF;}
+div.historyItem-upload div.historyItemTitleBar{background-image:url(data_upload.gif);}
+div.historyItem-queued{background:#EEEEEE;}
+div.historyItem-queued div.historyItemTitleBar{background:url(history-states.png) no-repeat 0px -50px;}
+div.historyItem-noPermission{filter:alpha(opacity=60);-moz-opacity:.60;opacity:.60;}
+div.historyItemTitleBar.spinner{background:url(data_running.gif) 0 1px no-repeat !important;padding-left:20px !important;}
+div.historyItemButtons{float:right;}
+.icon-button{width:16px;height:16px;display:block;float:left;margin-left:2px;text-indent:20px;}
+.icon-button.display{background:url(history-buttons.png) no-repeat 0px -0px;}
+.icon-button.display:hover{background:url(history-buttons.png) no-repeat 0px -26px;}
+.icon-button.edit{background:url(history-buttons.png) no-repeat 0px -52px;}
+.icon-button.edit:hover{background:url(history-buttons.png) no-repeat 0px -78px;}
+.icon-button.delete{background:url(history-buttons.png) no-repeat 0px -104px;}
+.icon-button.delete:hover{background:url(history-buttons.png) no-repeat 0px -130px;}
+div.historyItemBody div{padding-top:2px;}
+pre.peek{background:white;color:black;width:100%;overflow:auto;}
+pre.peek th{color:white;background:#023858;}
@@ -1 +1,15 @@
-.libraryRow{background-color:#d2c099;}.datasetHighlighted{background-color:#C1C9E5;}.libraryItemDeleted-True{font-style:italic;}div.historyItemBody{padding:4px 4px 2px 4px;}li.folderRow,li.datasetRow{border-top:solid 1px #ddd;}li.folderRow:hover,li.datasetRow:hover{background-color:#C1C9E5;}img.expanderIcon{padding-right:4px;}input.datasetCheckbox,li,ul{padding:0;margin:0;}.rowTitle{padding:2px;}ul{list-style:none;}.libraryTitle th{text-align:left;}pre.peek{background:white;color:black;width:100%;overflow:auto;}pre.peek th{color:white;background:#023858;}a.expandLink{text-decoration:none;}span.expandLink{width:100%;height:100%;display:block;}
+.libraryRow{background-color:#d2c099;}
+.datasetHighlighted{background-color:#C1C9E5;}
+.libraryItemDeleted-True{font-style:italic;}
+div.historyItemBody{padding:4px 4px 2px 4px;}
+li.folderRow,li.datasetRow{border-top:solid 1px #ddd;}
+li.folderRow:hover,li.datasetRow:hover{background-color:#C1C9E5;}
+img.expanderIcon{padding-right:4px;}
+input.datasetCheckbox,li,ul{padding:0;margin:0;}
+.rowTitle{padding:2px;}
+ul{list-style:none;}
+.libraryTitle th{text-align:left;}
+pre.peek{background:white;color:black;width:100%;overflow:auto;}
+pre.peek th{color:white;background:#023858;}
+a.expandLink{text-decoration:none;}
+span.expandLink{width:100%;height:100%;display:block;}
@@ -1 +1,8 @@
-body{background:#2C3143 url(masthead_bg.png) bottom;color:#eee;padding:0;border:0;margin:3px;margin-right:5px;margin-left:5px;overflow:hidden;}div.pageTitle{font-size:175%;font-weight:bold;}div.pageTitle a:link,div.pageTitle a:visited,div.pageTitle a:active,div.pageTitle a:hover{text-decoration:none;}a:link,a:visited,a:active{color:#eee;}#tab-bar-bottom{z-index:-1;position:absolute;top:27px;left:0;width:100%;height:100%;background:#222532;}span.link-group{margin:0;padding:0;display:inline;padding-bottom:10px;margin-bottom:-10px;}span.link-group span{margin:0;padding:0;display:inline;}span.link-group span.active-link{background:#222532;padding-left:3px;padding-right:3px;margin-left:-3px;margin-right:-3px;padding-bottom:10px;margin-bottom:-10px;}
+body{background:#2C3143 url(masthead_bg.png) bottom;color:#eeeeee;padding:0;border:0;margin:3px;margin-right:5px;margin-left:5px;overflow:hidden;}
+div.pageTitle{font-size:175%;font-weight:bold;}
+div.pageTitle a:link,div.pageTitle a:visited,div.pageTitle a:active,div.pageTitle a:hover{text-decoration:none;}
+a:link,a:visited,a:active{color:#eeeeee;}
+#tab-bar-bottom{z-index:-1;position:absolute;top:27px;left:0;width:100%;height:100%;background:#222532;}
+span.link-group{margin:0;padding:0;display:inline;padding-bottom:10px;margin-bottom:-10px;}
+span.link-group span{margin:0;padding:0;display:inline;}
+span.link-group span.active-link{background:#222532;padding-left:3px;padding-right:3px;margin-left:-3px;margin-right:-3px;padding-bottom:10px;margin-bottom:-10px;}
@@ -1 +1,50 @@
-body,html{overflow:hidden;margin:0;padding:0;width:100%;height:100%;}body{font:75% verdana,"Bitstream Vera Sans",geneva,arial,helvetica,helve,sans-serif;background:#eee;}#background{position:absolute;background:#eee;z-index:-1;top:0;left:0;margin:0;padding:0;width:100%;height:100%;}#messagebox{position:absolute;top:33px;left:0;width:100%;height:24px!important;overflow:hidden;border-bottom:solid #999 1px;font-size:90%;}#left,#left-border,#center,#right-border,#right{position:absolute;top:39px;bottom:0;overflow:hidden;background:#fff;}#left,#center,#right{border-top:solid #999 1px;}#left-border,#right-border{background:#eee;border-left:solid #999 1px;border-right:solid #999 1px;padding-right:1px;padding-left:1px;width:5px;z-index:10000;}#left-border div,#right-border div{width:100%;height:100%;background-repeat:no-repeat;background-position:center center;position:absolute;width:5px;height:100%;}#left-border div,#right-border.hidden div{background-image:url(tiny_arrow_left.png);cursor:w-resize;}#left-border.hidden div,#right-border div{background-image:url(tiny_arrow_right.png);cursor:e-resize;}#left-border.hover div,#right-border.hover div{background-color:#AAE;}#left{left:0;width:250px;z-index:200;}#left-border{left:250px;}#center{left:259px;right:259px;overflow:hidden;z-index:1;}#right-border{right:250px;}#right{width:250px;right:0;z-index:200;}.unified-panel-header{height:2em;z-index:1000;background:#ccc;background-image:url(panel_header_bg.png);background-position:top center;background-repeat:repeat-x;border-bottom:solid #999 1px;margin:0;padding:0;padding-right:10px;padding-left:10px;color:#333;font-weight:bold;}.unified-panel-header-inner{padding-top:.45em;}.menu-bg{background:#C1C9E5 url(menu_bg.png) top repeat-x;}div.unified-panel-body{position:absolute;top:2em;bottom:0;width:100%;margin-top:1px;}.panel-header-button{color:#333;text-decoration:none;display:inline-block;cursor:pointer;margin:-1px;padding:1px;border:0;padding-right:.5em;padding-left:.5em;-moz-border-radius:.5em;-webkit-border-radius:.5em;border-radius:.5em;background:transparent;}.panel-header-button:hover{color:black;background:#aaa;}.panel-header-button:active{color:white;background:#aaa;}#overlay{position:fixed;top:0;left:0;width:100%;height:100%;z-index:20000;}.dialog-box-container{position:relative;margin-top:80px;margin-right:auto;margin-left:auto;}.dialog-box-wrapper{position:relative;padding:1em;background-color:rgba(0,0,0,0.5);-moz-border-radius:1em;-webkit-border-radius:1em;}.dialog-box{border:solid #999 1px;background:white;min-width:230px;z-index:80000;}.dialog-box .body,.dialog-box .buttons{padding:5px;}.panel-error-message,.panel-warning-message,.panel-done-message,.panel-info-message{height:24px;line-height:24px;color:#303030;padding:0;padding-left:26px;background-color:#FCC;background-image:url(error_small.png);background-repeat:no-repeat;background-position:6px 50%;}.panel-warning-message{background-image:url(warn_small.png);background-color:#FFC;}.panel-done-message{background-image:url(done_small.png);background-color:#CFC;}.panel-info-message{background-image:url(info_small.png);background-color:#CCF;}#masthead{position:absolute;top:0;left:0;width:100%;height:32px;background:#2C3143;color:#fff;border-bottom:solid #444 1px;z-index:15000;padding:0;}#masthead a{color:#eee;}#masthead .title{padding:3px 10px;font-size:175%;font-weight:bold;}#masthead a{text-decoration:none;}#masthead a:hover{text-decoration:underline;}.tab-group{margin:0;padding:0 10px;height:100%;white-space:nowrap;cursor:default;user-select:none;-moz-user-select:none;-webkit-user-select:none;}.tab-group .tab{background:#2C3143;position:relative;float:left;margin:0;padding:0 1em;height:32px;line-height:32px;text-align:left;}.tab-group .tab:hover>a{color:gold!important;}.tab-group .active{background:#010101;}.tab-group .tab .submenu{display:none;position:absolute;z-index:16000;left:0;top:32px;padding:1em;margin:-1em;padding-top:0;margin-top:0;background-color:rgba(0,0,0,0.5);-moz-border-radius:0 0 1em 1em;-webkit-border-bottom-right-radius:1em;-webkit-border-bottom-left-radius:1em;}.tab-group .tab .submenu ul{display:block;margin:0;padding:0;list-style-type:none;background:#2C3143;}.tab-group .tab .submenu ul li{display:block;padding:0 1em;white-space:nowrap;}
+body{font:13px/1.231 verdana,arial,helvetica,clean,sans-serif;*font-size:small;*font:x-small;}
+select,input,button,textarea,button{font:99% verdana,arial,helvetica,clean,sans-serif;}
+table{font-size:inherit;font:100%;}
+pre,code,kbd,samp,tt{font-family:monospace;*font-size:108%;line-height:100%;}
+body{font-size:75%;}
+body,html{overflow:hidden;margin:0;padding:0;width:100%;height:100%;}
+body{font:75% verdana, "Bitstream Vera Sans", geneva, arial, helvetica, helve, sans-serif;background:#eee;}
+.unselectable{user-select:none;-moz-user-select:none;-webkit-user-select:none;}
+#background{position:absolute;background:#eee;z-index:-1;top:0;left:0;margin:0;padding:0;width:100%;height:100%;}
+#messagebox{position:absolute;top:33px;left:0;width:100%;height:24px !important;overflow:hidden;border-bottom:solid #999 1px;font-size:90%;}
+#left,#left-border,#center,#right-border,#right{position:absolute;top:39px;bottom:0px;overflow:hidden;background:#fff;}
+#left,#center,#right{border-top:solid #999 1px;}
+#left-border,#right-border{background:#eeeeee;border-left:solid #999 1px;border-right:solid #999 1px;padding-right:1px;padding-left:1px;width:5px;z-index:10000;}
+#left-border div,#right-border div{width:100%;height:100%;background-repeat:no-repeat;background-position:center center;position:absolute;width:5px;height:100%;}
+#left-border div,#right-border.hidden div{background-image:url(tiny_arrow_left.png);cursor:w-resize;}
+#left-border.hidden div,#right-border div{background-image:url(tiny_arrow_right.png);cursor:e-resize;}
+#left-border.hover div,#right-border.hover div{background-color:#AAAAEE;}
+#left{left:0px;width:250px;z-index:200;}
+#left-border{left:250px;}
+#center{left:259px;right:259px;overflow:hidden;z-index:1;}
+#right-border{right:250px;}
+#right{width:250px;right:0px;z-index:200;}
+.unified-panel-header{height:2em;z-index:1000;background:#cccccc;background-image:url(panel_header_bg.png);background-position:top center;background-repeat:repeat-x;border-bottom:solid #999 1px;margin:0;padding:0;padding-right:10px;padding-left:10px;color:#333;font-weight:bold;}
+.unified-panel-header-inner{padding-top:0.45em;}
+.menu-bg{background:#C1C9E5 url(menu_bg.png) top repeat-x;}
+div.unified-panel-body{position:absolute;top:2em;bottom:0;width:100%;margin-top:1px;}
+.panel-header-button{color:#333;text-decoration:none;display:inline-block;cursor:pointer;margin:-1px;padding:1px;border:0px;padding-right:0.5em;padding-left:0.5em;-moz-border-radius:0.5em;-webkit-border-radius:0.5em;border-radius:0.5em;background:transparent;}
+.panel-header-button:hover{color:black;background:#aaaaaa;}
+.panel-header-button:active{color:white;background:#aaaaaa;}
+#overlay{position:fixed;top:0;left:0;width:100%;height:100%;z-index:20000;}
+.dialog-box-container{position:relative;margin-top:80px;margin-right:auto;margin-left:auto;}
+.dialog-box-wrapper{position:relative;padding:1em;background-color:rgba(0,0,0,0.5);-moz-border-radius:1em;-webkit-border-radius:1em;}
+.dialog-box{border:solid #999 1px;background:white;min-width:230px;z-index:80000;}
+.dialog-box .body,.dialog-box .buttons{padding:5px;}
+.panel-error-message,.panel-warning-message,.panel-done-message,.panel-info-message{height:24px;line-height:24px;color:#303030;padding:0px;padding-left:26px;background-color:#FFCCCC;background-image:url(error_small.png);background-repeat:no-repeat;background-position:6px 50%;}
+.panel-warning-message{background-image:url(warn_small.png);background-color:#FFFFCC;}
+.panel-done-message{background-image:url(done_small.png);background-color:#CCFFCC;}
+.panel-info-message{background-image:url(info_small.png);background-color:#CCCCFF;}
+#masthead{position:absolute;top:0;left:0;width:100%;height:32px;background:#2C3143;color:#fff;border-bottom:solid #444 1px;z-index:15000;padding:0;}
+#masthead a{color:#eeeeee;}
+#masthead .title{padding:3px 10px;font-size:175%;font-weight:bold;}
+#masthead a{text-decoration:none;}
+#masthead a:hover{text-decoration:underline;}
+.tab-group{margin:0;padding:0 10px;height:100%;white-space:nowrap;cursor:default;background:transparent;}
+.tab-group .tab{background:#2C3143;position:relative;float:left;margin:0;padding:0 1em;height:32px;line-height:32px;text-align:left;}
+.tab-group .tab .submenu{display:none;position:absolute;z-index:16000;left:0;top:32px;padding:1em;margin:-1em;padding-top:0;margin-top:0;background-color:rgba(0,0,0,0.5);-moz-border-radius:0 0 1em 1em;-webkit-border-bottom-right-radius:1em;-webkit-border-bottom-left-radius:1em;}
+.tab-group .tab .submenu ul{display:block;margin:0;padding:0;list-style-type:none;background:#2C3143;}
+.tab-group .tab .submenu ul li{display:block;padding:0 1em;white-space:nowrap;}
+.tab-group .tab:hover > a{color:gold !important;}
+.tab-group .active{background:rgb(1,1,1);}
@@ -1 +1,4 @@
-body{font:13px/1.231 arial,helvetica,clean,sans-serif;*font-size:small;*font:x-small;}select,input,button,textarea{font:99% arial,helvetica,clean,sans-serif;}table{font-size:inherit;font:100%;}pre,code,kbd,samp,tt{font-family:monospace;*font-size:108%;line-height:100%;}
+body{font:13px/1.231 arial,helvetica,clean,sans-serif;*font-size:small;*font:x-small;}
+select,input,button,textarea{font:99% arial,helvetica,clean,sans-serif;}
+table{font-size:inherit;font:100%;}
+pre,code,kbd,samp,tt{font-family:monospace;*font-size:108%;line-height:100%;}
@@ -1 +1,9 @@
-body{background:white;color:#303030;background:#C1C9E5 url(menu_bg.png) top repeat-x;margin:5px;margin-right:10px;margin-left:10px;}hr{border:none;height:0;margin-top:0;}div.toolSectionPad{margin:0;padding:0;height:5px;font-size:0;}div.toolSectionDetailsInner{margin-left:5px;margin-right:5px;}div.toolSectionTitle{font-weight:bold;}div.toolPanelLabel{padding-top:10px;padding-bottom:5px;font-weight:bold;color:gray;text-transform:uppercase;}div.toolTitle{padding-top:5px;padding-bottom:5px;margin-left:16px;margin-right:10px;display:list-item;list-style:square outside;}div.toolSectionBody div.toolPanelLabel{padding-top:5px;padding-bottom:5px;margin-left:16px;margin-right:10px;display:list-item;list-style:none outside;}div.toolTitleNoSection{padding-bottom:0;}
+body{background:white;color:#303030;background:#C1C9E5 url(menu_bg.png) top repeat-x;margin:5px;margin-right:10px;margin-left:10px;}
+hr{border:none;height:0px;margin-top:0px;}
+div.toolSectionPad{margin:0;padding:0;height:5px;font-size:0px;}
+div.toolSectionDetailsInner{margin-left:5px;margin-right:5px;}
+div.toolSectionTitle{font-weight:bold;}
+div.toolPanelLabel{padding-top:10px;padding-bottom:5px;font-weight:bold;color:gray;text-transform:uppercase;}
+div.toolTitle{padding-top:5px;padding-bottom:5px;margin-left:16px;margin-right:10px;display:list-item;list-style:square outside;}
+div.toolSectionBody div.toolPanelLabel{padding-top:5px;padding-bottom:5px;margin-left:16px;margin-right:10px;display:list-item;list-style:none outside;}
+div.toolTitleNoSection{padding-bottom:0px;}
@@ -1,5 +1,4 @@
-body
-{
+body {
    background: $menu_bg_over;
    color: $base_text;
    background-image: url(menu_bg.png);
@@ -10,108 +9,154 @@ body
    padding: 0;
 }

-a
-{
-    color: #base_text;
+a {
+    color: $base_text;
 }

-div.historyLinks
-{
+## Control links at top of history
+div.historyLinks {
    padding: 5px;
-    margin-top: 5px;
-    margin-bottom: 5px;
-    padding-right: 5px;
-    padding-left: 5px;
-    margin-bottom: 5px;
+    margin: 5px 0 5px 0;
 }

-div.historyItem
-{
-    margin-right: -5px;
-    margin-top: 5px;
-    margin-bottom: 5px;
-    padding: 5px;
-    padding-right: 11px;
-
+## Default history item appearend
+div.historyItem {
+    margin: 5px -5px 5px 0px;
+    padding: 5px 11px 5px 5px;
    border: solid $history_queued_border 1px;
    border-left: solid $history_queued_border 5px;
    border-right: none;
    background: $history_queued_bg;
-    background-image: url(gray_bg.png);
-    background-repeat: repeat-x;
-    background-position: top;
+    div.historyItemTitleBar {
+        padding-left: 20px;
+        background-position: 0 1px;
+        background-repeat: no-repeat;
+    }
 }

-div.historyItem div.historyItem
-{
+## Nested history items
+div.historyItem div.historyItem {
    margin-right: -11px;
 }

-div.historyItem-ok
-{
+## Change background/border color depending on state
+div.historyItem-ok {
    border-color: $history_ok_border;
    background: $history_ok_bg;
-    /*
-    background-image: url(ok_bg.png);
-    background-repeat: repeat-x;
-    background-position: top;
-    */
+    div.historyItemTitleBar {
+        padding-left: 0;
+    }
 }
-
-div.historyItem-error, div.historyItem-empty
-{
+div.historyItem-error {
    border-color: $history_error_border;
    background: $history_error_bg;
-    /*
-    background-image: url(error_bg.png);
-    background-repeat: repeat-x;
-    background-position: top;
-    */
+    div.historyItemTitleBar {
+        -sprite-group: history-states;
+        -sprite-image: data_error.png;
+    }
 }

-div.historyItem-running
-{
+div.historyItem-empty {
+    border-color: $history_error_border;
+    background: $history_error_bg;
+        div.historyItemTitleBar {
+        -sprite-group: history-states;
+        -sprite-image: data_empty.png;
+    }
+}
+
+div.historyItem-running {
    border-color: $history_running_border;
    background: $history_running_bg;
-    /*
-    background-image: url(warn_bg.png);
-    background-repeat: repeat-x;
-    background-position: top;
-    */
+    div.historyItemTitleBar {
+        background-image: url(data_running.gif);
+    }
 }

-div.historyItem-upload
-{
+div.historyItem-upload {
    border-color: $history_upload_border;
    background: $history_upload_bg;
+    div.historyItemTitleBar {
+        background-image: url(data_upload.gif);
+    }
 }

-div.historyItem-noPermission
-{
+div.historyItem-queued {
+    background: $history_queued_bg;
+    div.historyItemTitleBar {
+        -sprite-group: history-states;
+        -sprite-image: data_queued.png;
+    }
+}
+
+div.historyItem-noPermission {
    filter: alpha(opacity=60);
    -moz-opacity: .60;
    opacity: .60;
 }

-div.historyItem-queued
-{
+## Special case for showing the spinner but not changing the background
+div.historyItemTitleBar.spinner {
+    background: url(data_running.gif) 0 1px no-repeat !important;
+    padding-left: 20px !important;
 }

-div.historyItemBody div
-{
+## Buttons
+div.historyItemButtons {
+    float: right;
+}
+
+.icon-button  {
+    width: 16px;
+    height: 16px;
+    display: block;
+    float: left;
+    margin-left: 2px;
+    ## Allow alt text for screen readers
+    text-indent: 20px;
+}
+
+.icon-button.display {
+    -sprite-group: history-buttons;
+    -sprite-image: eye_icon.png;
+}
+
+.icon-button.display:hover {
+    -sprite-group: history-buttons;
+    -sprite-image: eye_icon_dark.png;
+}
+
+.icon-button.edit {
+    -sprite-group: history-buttons;
+    -sprite-image: pencil_icon.png;
+}
+
+.icon-button.edit:hover {
+    -sprite-group: history-buttons;
+    -sprite-image: pencil_icon_dark.png;
+}
+
+.icon-button.delete {
+    -sprite-group: history-buttons;
+    -sprite-image: delete_icon.png;
+}
+
+.icon-button.delete:hover {
+    -sprite-group: history-buttons;
+    -sprite-image: delete_icon_dark.png;
+}
+
+div.historyItemBody div {
    padding-top: 2px;
 }

-pre.peek
-{
+pre.peek {
    background: white;
    color: black;
    width: 100%; 
    overflow: auto;
-}
-
-pre.peek th
-{
-    color: white;
-    background: $peek_table_header;
+    th {
+        color: white;
+        background: $peek_table_header;
+    }
 }
@@ -57,33 +57,15 @@ shared_images = [
    # History icons
    ( "ok_small.png", "history_ok_bg", "data_ok.png" ),
    ( "error_small.png", "history_error_bg", "data_error.png" ),
-    ( "wait_small.png", "history_queued_bg", "data_queued.png" ) ]
+    ( "wait_small.png", "history_queued_bg", "data_queued.png" ),
+]


 vars, out_dir = sys.argv[1:]

-context = dict()
-for line in open( vars ):
-    if line.startswith( '#' ):
-        continue
-    key, value = line.rstrip("\r\n").split( '=' )
-    if value.startswith( '"' ) and value.endswith( '"' ):
-        value = value[1:-1]
-    context[key] = value
-
 for input, output in templates:
    print input ,"->", output
-    out_fname = os.path.join( out_dir, output )
-    temp_file = tempfile.NamedTemporaryFile()
-    # Write processed template to temporary file
-    print "Processing template..."
-    temp_file.write( str( Template( file=input, searchList=[context] ) ) )
-    temp_file.flush()
-    # Compress CSS with YUI
-    print "Compressing..."
-    subprocess.call( 
-        "java -jar ../../scripts/yuicompressor.jar --type css %s -o %s" % ( temp_file.name, out_fname ),
-        shell = True )
+    subprocess.call( "./process_css.py %s %s < %s > %s" % ( vars, out_dir, input, os.path.join( out_dir, output ) ), shell=True )

  
 """
@@ -1,26 +1,28 @@
-#set $unselectable = """
-    user-select: none;
-    -moz-user-select: none;
-    -webkit-user-select: none;
-"""
+## Font settings from YUI + verdana
+body{font:13px/1.231 verdana,arial,helvetica,clean,sans-serif;*font-size:small;*font:x-small;}select,input,button,textarea,button{font:99% verdana,arial,helvetica,clean,sans-serif;}table{font-size:inherit;font:100%;}pre,code,kbd,samp,tt{font-family:monospace;*font-size:108%;line-height:100%;}
+body{font-size:75%;}

-## Rules

-body, html
-{
+body, html {
    overflow: hidden;
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
 }
-body
-{
+
+body {
    font: 75% verdana, "Bitstream Vera Sans", geneva, arial, helvetica, helve, sans-serif; 
    background: ${layout_bg};
 }
-#background
-{
+
+.unselectable {
+    user-select: none;
+    -moz-user-select: none;
+    -webkit-user-select: none;
+}
+
+#background {
    position: absolute;
    background: ${layout_bg};
    z-index: -1;
@@ -32,8 +34,7 @@ body
    height: 100%;
 }

-#messagebox
-{
+#messagebox {
    position:absolute; 
    top:33px; 
    left:0; 
@@ -44,30 +45,25 @@ body
    font-size: 90%;
 }

-#left, #left-border, #center, #right-border, #right
-{
+#left, #left-border, #center, #right-border, #right {
    position: absolute; 
    top: 39px;
    bottom: 0px;
    overflow: hidden; 
    background: #fff;
 }
-#left, #center, #right
-{
+#left, #center, #right {
    border-top: solid ${layout_border} 1px;
 }
-#left-border, #right-border
-{
+#left-border, #right-border {
    background: #eeeeee;
    border-left: solid ${layout_border} 1px;
    border-right: solid ${layout_border} 1px;
    padding-right: 1px;
    padding-left: 1px;
    width: 5px;
-    z-index: 10000;
-}
-#left-border div, #right-border div
-{
+    z-index: 10000; }
+#left-border div, #right-border div {
    width: 100%;
    height: 100%;
    background-repeat: no-repeat; 
@@ -76,43 +72,35 @@ body
    width: 5px;
    height: 100%;
 }
-#left-border div, #right-border.hidden div
-{
+#left-border div, #right-border.hidden div {
    background-image: url(tiny_arrow_left.png);
    cursor: w-resize;
 }
-#left-border.hidden div, #right-border div
-{
+#left-border.hidden div, #right-border div {
    background-image: url(tiny_arrow_right.png);
    cursor: e-resize;
 }
-#left-border.hover div, #right-border.hover div
-{
+#left-border.hover div, #right-border.hover div {
    background-color: ${layout_hover};
 }
-#left 
-{
+#left  {
    left: 0px;
    width: 250px;
    z-index: 200;
 }
-#left-border 
-{
+#left-border  {
    left: 250px;
 }
-#center 
-{
+#center  {
    left:259px;
    right: 259px;
    overflow: hidden;
    z-index: 1;
 }
-#right-border 
-{
+#right-border  {
    right: 250px;
 }
-#right 
-{
+#right {
    width: 250px;
    right: 0px; 
    z-index: 200;
@@ -240,7 +228,7 @@ div.unified-panel-body {
    background-color: $info_message_bg;
 }

-## ---- Masthead styles ----
+## Masthead

 #masthead 
 {
@@ -280,66 +268,65 @@ div.unified-panel-body {

 ## Tabs

-.tab-group
-{
+.tab-group {
+
    margin: 0;
    padding: 0 10px;
    height: 100%;
    white-space: nowrap;
    cursor: default;
-    ${unselectable}
-}
+    background: transparent;
+   
+    .tab {
+    
+        background: ${masthead_bg};
+        position: relative;
+        float: left;
+        margin: 0;
+        padding: 0 1em;
+        height: 32px;
+        line-height: 32px;
+        text-align: left;
+        
+        .submenu {
+        
+            display: none;
+            position: absolute;
+            z-index: 16000;
+            left: 0;
+            top: 32px;
+            padding: 1em;
+            margin: -1em;
+            padding-top: 0;
+            margin-top: 0;
+            background-color: rgba(0,0,0,0.5);
+            -moz-border-radius: 0 0 1em 1em;
+            -webkit-border-bottom-right-radius: 1em;
+            -webkit-border-bottom-left-radius: 1em;
+        
+            ul {
+            
+                display: block;
+                margin: 0;
+                padding: 0;
+                list-style-type: none;
+                background: ${masthead_bg};
+            
+                li {
+                
+                    display: block;
+                    padding: 0 1em;
+                    white-space: nowrap;
+                }
+            }
+        }
+    }

-.tab-group .tab
-{
-    background: ${masthead_bg};
-    position: relative;
-    float: left;
-    margin: 0;
-    padding: 0 1em;
-    height: 32px;
-    line-height: 32px;
-    text-align: left;
-}
+    .tab:hover > a {
+        color: gold !important;
+    }

-.tab-group .tab:hover > a
-{
-    color: gold !important;
-}
-
-.tab-group .active
-{
-    background: rgb(1,1,1);
-}
-
-.tab-group .tab .submenu {
-    display: none;
-    position: absolute;
-    z-index: 16000;
-    left: 0;
-    top: 32px;
-    padding: 1em;
-    margin: -1em;
-    padding-top: 0;
-    margin-top: 0;
-    background-color: rgba(0,0,0,0.5);
-    -moz-border-radius: 0 0 1em 1em;
-    -webkit-border-bottom-right-radius: 1em;
-    -webkit-border-bottom-left-radius: 1em;
-}
-
-.tab-group .tab .submenu ul
-{
-    display: block;
-    margin: 0;
-    padding: 0;
-    list-style-type: none;
-    background: ${masthead_bg};
-}
-
-.tab-group .tab .submenu ul li
-{
-    display: block;
-    padding: 0 1em;
-    white-space: nowrap;
+    .active {
+        background: rgb(1,1,1);
+    }
 }
@@ -0,0 +1,236 @@
+#!/usr/bin/env python
+
+"""
+CSS processor for Galaxy style sheets. Supports the following features:
+
+- Nested rule definition
+- Mixins
+- Variable substitution in values
+
+"""
+
+import sys, string, os.path
+from pyparsing import *
+from galaxy.util.odict import odict
+import Image
+
+def cross_lists(*sets):
+    """
+    Return the cross product of the arguments
+    """
+    wheels = map(iter, sets) 
+    digits = [it.next() for it in wheels]
+    while True:
+        yield digits[:]
+        for i in range(len(digits)-1, -1, -1):
+            try:
+                digits[i] = wheels[i].next()
+                break
+            except StopIteration:
+                wheels[i] = iter(sets[i])
+                digits[i] = wheels[i].next()
+        else:
+            break
+
+def build_stylesheet_parser():
+    """
+    Returns a PyParsing parser object for CSS
+    """
+
+    # Forward declerations for recursion
+    rule = Forward()
+    
+    # Structural syntax, supressed from parser output
+    lbrace = Literal("{").suppress()
+    rbrace = Literal("}").suppress()
+    colon  = Literal(":").suppress()
+    semi   = Literal(";").suppress()
+    
+    ident = Word( alphas + "_", alphanums + "_-" ) 
+    
+    # Properties
+    prop_name  = Word( alphas + "_-*", alphanums + "_-" ) 
+    prop_value  = CharsNotIn( ";" )  # expand this as needed
+    property_def = Group( prop_name + colon + prop_value + semi ).setResultsName( "property_def" )
+    
+    # Selectors
+    #   Just match anything that looks like a selector, including element, class,
+    #   id, attribute, and pseudoclass. Attributes are not handled properly (spaces,
+    #   and even newlines in the quoted string are legal).
+    simple_selector = Word( alphanums + ".#*:()[]|=\"'_-" )
+    combinator = Literal( ">" ) | Literal( "+" )
+    selector = Group( simple_selector + ZeroOrMore( Optional( combinator ) + simple_selector ) )
+    selectors = Group( delimitedList( selector ) )
+    
+    selector_mixin = Group( selector + semi ).setResultsName( "selector_mixin" )
+    
+    # Rules
+    rule << Group( selectors +
+                   lbrace +
+                   Group( ZeroOrMore( property_def | rule | selector_mixin ) ) + 
+                   rbrace ).setResultsName( "rule" )
+    
+    # A whole stylesheet
+    stylesheet = ZeroOrMore( rule )
+    
+    # C-style comments should be ignored, as should "##" comments
+    stylesheet.ignore( cStyleComment )
+    stylesheet.ignore( "##" + restOfLine )
+    
+    return stylesheet
+
+stylesheet_parser = build_stylesheet_parser()
+
+class CSSProcessor( object ):
+    
+    def process( self, file, out, variables, image_dir ):
+        # Build parse tree
+        results = stylesheet_parser.parseFile( sys.stdin, parseAll=True )
+        # Expand rules (elimimate recursion and resolve mixins)
+        rules = self.expand_rules( results )
+        # Expand variables (inplace)
+        self.expand_variables( rules, variables )
+        # Do sprites
+        self.make_sprites( rules, image_dir )
+        # Print
+        self.print_rules( rules, out )
+        
+    def expand_rules( self, parse_results ):
+        mixins = {}
+        rules = []
+        # Visitor for recursively expanding rules
+        def visitor( r, selector_prefixes ):
+            # Concatenate combinations and build list of expanded selectors
+            selectors = [ " ".join( s ) for s in r[0] ]
+            full_selector_list = selector_prefixes + [selectors] 
+            full_selectors = []
+            for l in cross_lists( *full_selector_list ):
+                full_selectors.append(  " ".join( l ) )
+            # Separate properties from recursively defined rules
+            properties = []
+            children = []
+            for dec in r[1]:
+                type = dec.getName()
+                if type == "property_def":
+                    properties.append( dec )
+                elif type == "selector_mixin":
+                    properties.extend( mixins[dec[0][0]] )
+                else:
+                    children.append( dec )
+            rules.append( ( full_selectors, properties ) )
+            # Save by name for mixins (not smart enough to combine rules!)        
+            for s in full_selectors:
+                mixins[ s ] = properties;
+            # Visit children
+            for child in children:
+                visitor( child, full_selector_list )
+        # Call at top level
+        for p in parse_results:
+            visitor( p, [] )
+        # Return the list of expanded rules
+        return rules
+            
+    def expand_variables( self, rules, context ):
+        for selectors, properties in rules:
+            for p in properties:
+                p[1] = string.Template( p[1] ).substitute( context ).strip()
+    
+    def make_sprites( self, rules, image_dir ):
+        
+        pad = 10
+        
+        class SpriteGroup():
+            def __init__( self, name ):
+                self.name = name
+                self.offset = 0
+                self.sprites = odict()
+            def add_or_get_sprite( self, fname ):
+                if fname in self.sprites:
+                    return self.sprites[fname]
+                else:
+                    sprite = self.sprites[fname] = Sprite( fname, self.offset )
+                    self.offset += sprite.image.size[1] + pad
+                    return sprite
+        
+        class Sprite():
+            def __init__( self, fname, offset ):
+                self.fname = fname
+                self.image = Image.open( os.path.join( image_dir, fname ) )
+                self.offset = offset
+                
+        sprite_groups = {}
+        
+        for i in range( len( rules ) ):
+            properties = rules[i][1]
+            new_properties = []
+            # Find sprite properties (and remove them). Last takes precedence
+            sprite_group_name = None
+            sprite_filename = None
+            for name, value in properties:
+                if name == "-sprite-group":
+                    sprite_group_name = value
+                elif name == "-sprite-image":
+                    sprite_filename = value
+                else:
+                    new_properties.append( ( name, value ) )
+            # If a sprite filename was found, deal with it... 
+            if sprite_group_name and sprite_filename:
+                if sprite_group_name not in sprite_groups:
+                    sprite_groups[sprite_group_name] = SpriteGroup( sprite_group_name )
+                sprite_group = sprite_groups[sprite_group_name]
+                sprite = sprite_group.add_or_get_sprite( sprite_filename )
+                new_properties.append( ( "background", "url(%s.png) no-repeat 0px -%dpx" % ( sprite_group.name, sprite.offset ) ) )
+            # Save changed properties
+            rules[i] = ( rules[i][0], new_properties )
+        
+        # Generate new images
+        for group in sprite_groups.itervalues():
+            w = 0
+            h = 0
+            for sprite in group.sprites.itervalues():
+                sw, sh = sprite.image.size
+                w = max( w, sw )
+                h += sh + pad
+            master = Image.new( mode='RGBA', size=(w, h), color=(0,0,0,0) )
+            offset = 0
+            for sprite in group.sprites.itervalues():
+                master.paste( sprite.image, (0,offset) )
+                offset += sprite.image.size[1] + pad
+            master.save( os.path.join( image_dir, group.name + ".png" ) )
+            
+    def print_rules( self, rules, file ):
+        for selectors, properties in rules:
+            file.write( ",".join( selectors ) )
+            file.write( "{" )
+            for name, value in properties:
+                file.write( "%s:%s;" % ( name, value ) )
+            file.write( "}\n" )
+
+def main():
+
+    # Read variable definitions from a (sorta) ini file
+    context = dict()
+    for line in open( sys.argv[1] ):
+        if line.startswith( '#' ):
+            continue
+        key, value = line.rstrip("\r\n").split( '=' )
+        if value.startswith( '"' ) and value.endswith( '"' ):
+            value = value[1:-1]
+        context[key] = value
+        
+    image_dir = sys.argv[2]
+
+    try:
+        
+        processor = CSSProcessor()
+        processor.process( sys.stdin, sys.stdout, context, image_dir )
+        
+    except ParseException, e:
+        
+        print >> sys.stderr, "Error:", e
+        print >> sys.stderr, e.markInputline()
+        sys.exit( 1 )
+    
+
+if __name__ == "__main__":
+    main()
@@ -20,7 +20,7 @@

 ## Default stylesheets
 <%def name="stylesheets()">
-    <link rel="stylesheet" type="text/css" href="${h.url_for('/static/style/reset.css')}" />
+    ## <link rel="stylesheet" type="text/css" href="${h.url_for('/static/style/reset.css')}" />
    <link rel="stylesheet" type="text/css" href="${h.url_for('/static/style/panel_layout.css')}" />
    <style type="text/css">
    #center {
@@ -287,6 +287,7 @@
    </head>
    
    <body scroll="no" class="${self.body_class}">
+	<div id="everything" style="position: absolute; width: 100%; height: 100%; min-width: 960px; min-height: 400px;">
        ## Background displays first
        <div id="background"></div>
        ## Layer iframes over backgrounds
@@ -316,6 +317,7 @@
                ${self.right_panel()}
            </div>
        %endif
+	</div>
        ## Allow other body level elements
    </body>
    ## Scripts can be loaded later since they progressively add features to
@@ -13,17 +13,10 @@

 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <meta http-equiv="Pragma" content="no-cache">
-<link href="${h.url_for('/static/style/base.css')}" rel="stylesheet" type="text/css" />
-<link href="${h.url_for('/static/style/history.css')}" rel="stylesheet" type="text/css" />
-
-## <!--[if lt IE 7]>
-## <script defer type="text/javascript" src="/static/scripts/ie_pngfix.js"></script>
-## <![endif]-->
-
-<script type="text/javascript" src="${h.url_for('/static/scripts/jquery.js')}"></script>
-<script type="text/javascript" src="${h.url_for('/static/scripts/jquery.cookie.js')}"></script>
-<script type="text/javascript" src="${h.url_for('/static/scripts/cookie_set.js')}"></script>

+${h.css( "base", "history" )}
+${h.js( "jquery", "jquery.cookie", "cookie_set" )}
+  
 <script type="text/javascript">
    $( document ).ready( function() {
        initShowHide();
@@ -86,7 +79,7 @@
    //' Functionized so AJAX'd datasets can call them
    // Get shown/hidden state from cookie
    function initShowHide() {
-        $( "div.historyItemBody" ).hide();
+        // $( "div.historyItemBody" ).hide();
        // Load saved state and show as neccesary
        var state = new CookieSet( "galaxy.history.expand_state" );
 	for ( id in state.store ) {
@@ -128,10 +121,10 @@
                return false;
            });
            // Delete link
-            $(this).find( "a.historyItemDelete" ).each( function() {
+            $(this).find( "div.historyItemButtons > .delete" ).each( function() {
                var data_id = this.id.split( "-" )[1];
                $(this).click( function() {
-                    $( '#progress-' + data_id ).show();
+                    $( '#historyItem-' + data_id + "> div.historyItemTitleBar" ).addClass( "spinner" );
                    $.ajax({
                        url: "${h.url_for( action='delete_async', id='XXX' )}".replace( 'XXX', data_id ),
                        error: function() { alert( "Delete failed" ) },
@@ -157,7 +150,7 @@
            $(this).find( "a.historyItemUndelete" ).each( function() {
                var data_id = this.id.split( "-" )[1];
                $(this).click( function() {
-                    $( '#progress-' + data_id ).show();
+                    $( '#historyItem-' + data_id + " > div.historyItemTitleBar" ).addClass( "spinner" );
                    $.ajax({
                        url: "${h.url_for( controller='dataset', action='undelete_async', id='XXX' )}".replace( 'XXX', data_id ),
                        error: function() { alert( "Undelete failed" ) },
@@ -228,24 +221,19 @@
    };
 </script>

-<![if gte IE 7]>
-<script type="text/javascript">
-    $( document ).ready( function() {
-        // Add rollover effect to any image with a 'rollover' attribute
-        preload_images = {}
-        $( "img[rollover]" ).each( function() {
-            var r = $(this).attr('rollover');
-            var s = $(this).attr('src');
-            preload_images[r] = true;
-            $(this).hover( 
-                function() { $(this).attr( 'src', r ) },
-                function() { $(this).attr( 'src', s ) }
-            )
-        })
-        for ( r in preload_images ) { $( "<img>" ).attr( "src", r ) }
-    })
-</script>
-<![endif]>
+<style>
+.historyItemBody {
+    display: none;
+}
+</style>
+
+<noscript>
+<style>
+.historyItemBody {
+    display: block;
+}
+</style>
+</noscript>

 </head>

@@ -259,7 +247,7 @@
 </div>
    
 <div id="history-name-area" class="historyLinks" style="color: gray; font-weight: bold;">
-    <div style="float: right"><a id="history-rename" target="galaxy_main" href="${h.url_for( controller='history', action='rename' )}"><img src="${h.url_for('/static/images/pencil_icon.png')}"></a></div>
+    <div style="float: right"><a id="history-rename" title="Rename" class="icon-button edit" target="galaxy_main" href="${h.url_for( controller='history', action='rename' )}"></a></div>
    <div id="history-name">${history.name}</div>
 </div>

@@ -18,29 +18,21 @@
            <strong>This dataset has been deleted. Click <a href="${h.url_for( controller='dataset', action='undelete', id=data.id )}" class="historyItemUndelete" id="historyItemUndeleter-${data.id}" target="galaxy_history">here</a> to undelete.</strong>
        </div>
    %endif
+    
        ## Header row for history items (name, state, action buttons)
-	<div style="overflow: hidden;" class="historyItemTitleBar">
-	    <div style="float: left; padding-right: 3px;">
-		<div style='display: none;' id="progress-${data.id}">
-		    <img src="${h.url_for('/static/style/data_running.gif')}" border="0" align="middle" >
-		</div>
-		%if data_state == 'running':
-		    <div><img src="${h.url_for('/static/style/data_running.gif')}" border="0" align="middle"></div>
-                %elif data_state == 'upload':
-		    <div><img src="${h.url_for('/static/style/data_upload.gif')}" border="0" align="middle"></div>
-		%elif data_state != 'ok':
-		    <div><img src="${h.url_for( "/static/style/data_%s.png" % data_state )}" border="0" align="middle"></div>
-		%endif
-	    </div>			
-	    <div style="float: right;">
+	<div style="overflow: hidden;" class="historyItemTitleBar">		
+	    <div class="historyItemButtons">
            %if data_state == "upload":
-	        <img src="${h.url_for('/static/images/eye_icon_grey.png')}" width='16' height='16' alt='display data' title='display data' class='displayButton' border='0'>
-	        <img src="${h.url_for('/static/images/pencil_icon_grey.png')}" width='16' height='16' alt='edit attributes' title='edit attributes' class='editButton' border='0'>
+		## TODO: Make these CSS, just adding a "disabled" class to the normal
+		## links should be enough. However the number of datasets being uploaded
+		## at a time is usually small so the impact of these images is also small.
+	        <img src="${h.url_for('/static/images/eye_icon_grey.png')}" width='16' height='16' alt='display data' title='display data' class='button display' border='0'>
+	        <img src="${h.url_for('/static/images/pencil_icon_grey.png')}" width='16' height='16' alt='edit attributes' title='edit attributes' class='button edit' border='0'>
            %else:
-	        <a href="${h.url_for( controller='dataset', dataset_id=data.id, action='display', filename='index')}" target="galaxy_main"><img src="${h.url_for('/static/images/eye_icon.png')}" rollover="${h.url_for('/static/images/eye_icon_dark.png')}" width='16' height='16' alt='display data' title='display data' class='displayButton' border='0'></a>
-	        <a href="${h.url_for( controller='root', action='edit', id=data.id )}" target="galaxy_main"><img src="${h.url_for('/static/images/pencil_icon.png')}" rollover="${h.url_for('/static/images/pencil_icon_dark.png')}" width='16' height='16' alt='edit attributes' title='edit attributes' class='editButton' border='0'></a>
+	        <a class="icon-button display" title="display data" href="${h.url_for( controller='dataset', dataset_id=data.id, action='display', filename='index')}" target="galaxy_main"></a>
+	        <a class="icon-button edit" title="edit attributes" href="${h.url_for( controller='root', action='edit', id=data.id )}" target="galaxy_main"></a>
            %endif
-	    <a href="${h.url_for( action='delete', id=data.id, show_deleted_on_refresh=show_deleted_on_refresh )}" class="historyItemDelete" id="historyItemDeleter-${data.id}"><img src="${h.url_for('/static/images/delete_icon.png')}" rollover="${h.url_for('/static/images/delete_icon_dark.png')}" width='16' height='16' alt='delete' class='deleteButton' border='0'></a>
+	    <a class="icon-button delete" title="delete" href="${h.url_for( action='delete', id=data.id, show_deleted_on_refresh=show_deleted_on_refresh )}" id="historyItemDeleter-${data.id}"></a>
 	    </div>
 	    <span class="historyItemTitle"><b>${hid}: ${data.display_name()}</b></span>
 	</div>