Changeset 6603

Timestamp:

Nov 18, 2014, 11:28:50 AM (8 years ago)

Author:

Nicklas Nordborg

Message:

References #1890: Improve skinnability of BASE

Updated some basic elements:

• buttons
• toolbars
• table listing
• tabs part of tabcontrol

Location:

trunk

Files:

• src/clients/web/net/sf/basedb/clients/web/extensions/toolbar/ToolbarButtonRenderer.java (modified) (1 diff)
• src/clients/web/net/sf/basedb/clients/web/taglib/Button.java (modified) (3 diffs)
• src/clients/web/net/sf/basedb/clients/web/taglib/table/Headers.java (modified) (1 diff)
• src/clients/web/net/sf/basedb/clients/web/taglib/table/Table.java (modified) (1 diff)
• www/include/styles/headertabcontrol.css (modified) (9 diffs)
• www/include/styles/login.css (modified) (2 diffs)
• www/include/styles/main.css (modified) (17 diffs)
• www/include/styles/popup.css (modified) (4 diffs)
• www/include/styles/tabcontrol.css (modified) (17 diffs)
• www/include/styles/table.css (modified) (20 diffs)
• www/include/styles/toolbar.css (modified) (3 diffs)

trunk/src/clients/web/net/sf/basedb/clients/web/extensions/toolbar/ToolbarButtonRenderer.java

@@ -141 +141 @@
     if (displayIcon && btn.getIcon() != null)
     {
-      sb.append("<table><tr>");
-      sb.append("<td><img src=\"").append(btn.getIcon()).append("\"");
+      sb.append("<img src=\"").append(btn.getIcon()).append("\"");
       sb.append(" alt=\"").append(HTML.encodeTags(btn.getTitle())).append("\"");
       if (btn.getId() != null) sb.append(" id=\"").append(btn.getId()).append(".icon").append("\"");
-      sb.append("></td>");
-      sb.append("<td>");
+      sb.append(">");
     }
     if (displayText && btn.getTitle() != null) 
     {
-      sb.append("<span style=\"padding: 0px 2px 0px 2px;\"");
+      sb.append("<span");
       if (btn.getId() != null) sb.append(" id=\"").append(btn.getId()).append(".text").append("\"");
       sb.append(">").append(btn.getTitle()).append("</span>");
-    }
-    if (displayIcon && btn.getIcon() != null)
-    {
-      sb.append("</td>");
-      sb.append("</tr></table>");
     }
     sb.append("</div>");

trunk/src/clients/web/net/sf/basedb/clients/web/taglib/Button.java

@@ -203 +203 @@
   public Button()
   {
-    super("basicbutton");
+    super("basicbutton button");
   }
   
@@ -368 +368 @@
     if (getTooltip() != null) sb.append(" title=\"").append(getTooltip()).append("\"");
     addDynamicAttributes(sb);
-    sb.append("><div>");
-    sb.append("<table><tr>");
+    sb.append(">");
     if (theImage != null)
     {
@@ -376 +375 @@
         theImage = page.getRoot() + "images/" + theImage;
       }
-      sb.append("<td class=\"icon\"><img src=\"").append(theImage).append("\"");
+      sb.append("<img src=\"").append(theImage).append("\"");
       sb.append(" alt=\"").append(HTML.encodeTags(getTitle())).append("\"");
-      sb.append("></td>");
+      sb.append(">");
     }
     if (getTitle() != null) 
     {
-      sb.append("<td class=\"title\">");
       sb.append(getTitle());
-      sb.append("</td>");
-    }
-    sb.append("</tr></table>");
-    sb.append("</div></div>");
+    }
+    sb.append("</div>");
 
     try

trunk/src/clients/web/net/sf/basedb/clients/web/taglib/table/Headers.java

@@ -52 +52 @@
   public Headers()
   {
-    super("headers");
+    super("headers bg-filled-100");
   }
   

trunk/src/clients/web/net/sf/basedb/clients/web/taglib/table/Table.java

@@ -260 +260 @@
     The class names for even and odd row respectively.
   */
-  private static final String[] rowclass = new String[] { "evenrow", "oddrow" } ;
+  private static final String[] rowclass = new String[] { "bg-evenrow", "bg-oddrow" } ;
 
   /**

trunk/www/include/styles/headertabcontrol.css

@@ -29 +29 @@
 /* Main tab control */
 .tabcontrol
-{
-  border-color: #A0A0A0;
-  border-style: solid;
-  border-width: 0px;
-}
+{}
 
 /* Main content area */
 .tabcontrol .tabcontents
-{
-  background: #FFFFFF;
-}
-
-/* Add border on top or bottom depending on where tabs are */
-.tabsatbottom .tabcontents
-{
-  border: inherit;
-  border-width: 1px 1px 0px 1px;
-}
-
-.tabsattop .tabcontents
-{
-  border: inherit;
-  border-width: 0px 1px 1px 1px;
-}
+{}
 
 
 /* Tabs */
+.tabcontrol table.tabscontainer, .tabcontrol .tabs > table
+{
+  border-collapse: separate;
+}
+
 .tabcontrol .tab
 {
-  background: #E8E8E8;
-  white-space: nowrap;
-  cursor: pointer;
-  border: 1px solid #A0A0A0;
+  border-width: 1px;
   padding: 2px 6px 2px 4px;
 }
+
 
 /* Put blue-ish border around tab when hovering or tab is focused */
@@ -69 +53 @@
 {
   /* Decrese padding to avoid movement */
+  border-width: 2px;
   padding: 1px 5px 1px 3px;
-  border: 2px solid #2288AA;
-  outline: 0;
 }
 
@@ -83 +66 @@
 {
   background-color: #FFFFFF;
-}
-
-
-/* Revert to default for the active tab */
-.tabcontrol .tab.active:hover, .tabcontrol .tab.active:focus
-{
-  cursor: auto;
-  border: 1px solid #A0A0A0;
-  padding: 2px 6px 2px 4px;
 }
 
@@ -117 +91 @@
 .tabsattop .tab.active
 {
-  border-bottom: 1px solid #E8E8E8 !important;
-  border-top: 2px solid #2288AA !important;
-  padding-top: 1px !important;
+  border-bottom-color: transparent;
+  padding-top: 1px;
+  border-top-width: 2px;
+  border-top-color: #2288AA;
 }
 
-.tabsattop .tab.active.white
-{
-  border-bottom: 1px solid #FFFFFF !important;
-}
 
 /* Add bottom border on tabspace */
 .tabsattop .tabspace
 {
-  border-bottom: 1px solid #A0A0A0;
+  border-bottom-width: 1px;
 }
 
@@ -138 +109 @@
   min-width: 5px;
   max-width: 5px;
-  border-bottom: 1px solid #A0A0A0;
+  border-bottom-width: 1px;
 }
 
@@ -144 +115 @@
 {
   width: 99%;
-  border-bottom: 1px solid #A0A0A0;
+  border-bottom-width: 1px;
 }
 
@@ -151 +122 @@
   position: absolute;
   top: 2em;
-  left: 0px;
-  right: 0px;
-  bottom: 0px;
-  border-width: 0px !important;
+  left: 0;
+  right: 0;
+  bottom: 0;
   overflow: auto;
 }
@@ -160 +130 @@
 .mastertabcontrol.notabs > .tabcontents
 {
-  top: 0px;
+  top: 0;
 }
 
@@ -166 +136 @@
 {
   position: absolute;
-  top: 0px;
+  top: 0;
   height: 2em;
 }

trunk/www/include/styles/login.css

@@ -112 +112 @@
 {
   position: absolute;
-  top: 0px;
-  bottom: 0px;
-  left: 0px;
-  right: 0px;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
   border-top: 1px solid #A0A0A0;
   background: #E8E8E8;
@@ -131 +131 @@
 .welcomesection 
 {
-  border: 1px solid #A0A0A0; 
-  border-top: 0px;
+  border-width: 0 1px 1px 1px;
   padding: 2px;
 }

trunk/www/include/styles/main.css

@@ -33 +33 @@
   --------------  
 */
+*
+{
+  border-color: #A0A0A0;
+  border-style: solid;
+  border-width: 0;
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
 
 body 
 {
   color: #000000;
-  background: #FFFFFF;
+  background-color: #FFFFFF;
   font-family: verdana, arial, sans-serif;
-  padding-left: 0px;
-  padding-right: 0px;
-}
-
-iframe
-{
-  border: 0px;
-  margin: 0px;
-}
-
-
-/* No border around images, align with text */
+}
+
+/* Align with text */
 img
 {
-  border: 0px;
   vertical-align: text-bottom;
 }
 
-img.disabled
-{
+/* Disabled elements */
+.disabled
+{
+  color: #666666;
   filter: url(filters.svg#grayscale); /* Firfox, etc */
   filter: gray; /* IE */
+}
+
+.disabled img, img.disabled
+{
   opacity: 0.5;
 }
+
 
 /* Monospace:ed elements should use same font size in IE and Firefox */
@@ -74 +80 @@
 table
 {
-  border: 0px;
-  padding: 0px;
-  border-spacing: 0px;
-}
-td, th
-{
-  padding: 0px;
-  border: 0px;
-}
+  border-spacing: 0;
+  border-collapse: collapse;
+}
+
 
 /* Linked elements should display a pointer cursor and be underlined on hover only */
@@ -108 +109 @@
 }
 
-
-/* 
-  Add a large padding to make sure that old pages start below
-  absolutely-positioned menu and page title. Should be removed
-  when all pages (including extension) have been fixed to use
-  absolute positioning.
-*/
-body.default
-{
-  padding-top: 5em;
-}
-
-body.default h1
+/* Common header styles (eg. color, font-size, etc.) */
+h1
 {
   position: absolute;
-  left: 0px;
-  right: 0px;
+  left: 0;
+  right: 0;
+  /* NOTE! Use 'rem' unit to avoid font-size multiplier */
   top:  2.25rem;
-  /* NOTE! Use 'rem' unit to avoid font-size multiplier */
   height: 2.25rem;
   font-size: 1.4em;
   font-weight: bold;
   color: #224488;
-  margin: 0px;
   white-space: nowrap;
 }
 
-body.default h1:before
-{
+h1:before
+{
+  color: #2288AA;
   content: '::';
-  padding-left: 4px;
+  padding-left: 8px;
   padding-right: 4px;
-  color: #2288AA;
 }
 
@@ -159 +148 @@
   font-weight: bold;
   color: #224488;
-  margin: 0px;
   white-space: nowrap;
 }
@@ -168 +156 @@
 .hideablesection
 {
+  border-bottom-width: 1px;
+  border-bottom-style: dotted;
   margin-top: 0.5em;
-  border-bottom: 1px dotted #A0A0A0;
   padding-bottom: 0.5em;
 }
@@ -176 +165 @@
 .hideablesection > h2
 {
-  padding: 0px 2px 2px 2px;
+  padding: 0 2px 2px 2px;
 }
 
@@ -184 +173 @@
   padding-left: 18px; 
   padding-right: 8px;
-}
-
-.hideablesection .messagecontainer
-{
-  margin: 0px;
 }
 
@@ -208 +192 @@
   /* Adds 6px between each button */
   border-spacing: 6px 0px;
+  border-collapse: separate;
 }
 
@@ -215 +200 @@
 }
 
-/* A single button */
+/* Generic button, standalone or in a toolbar, define colors only */
+.button, .tab
+{
+  background-color: #E8E8E8;
+  cursor: pointer; 
+  white-space: nowrap;
+}
+
+.button:hover, .button:focus, .tab:hover, .tab:focus
+{
+  border-color: #2288AA;
+  outline: 0;
+}
+
+.button.disabled
+{
+  pointer-events: none;
+  cursor: default;
+  cursor: not-allowed;
+}
+
+/* A single standalone button */
 .basicbutton 
 {
-  background: #E8E8E8;
-  color: #000000;
+  display: inline-block;
   margin: 1px;
-  border: 1px solid #A0A0A0;
+  border-width: 1px;
   border-radius: 4px;
-}
-
-/* Highlight the button when the mouse is over it */
-.basicbutton:hover, .basicbutton:focus
-{
-  /* 1+1=0+2 so that the button is not moving */
-  margin: 0px;
-  border: 2px solid #2288AA;
-  cursor: pointer;
-  outline: 0;
-}
-
-/* The second div is used to for a 3d effect */
-.basicbutton > div
-{
   padding: 1px 5px 2px 5px;
   text-align: center;
@@ -243 +233 @@
 }
 
-.basicbutton.square > div
+.buttongroup .basicbutton
+{
+  display: block;
+}
+
+/* Make room for the icon */
+.basicbutton > img
+{
+  padding-right: 2px;
+}
+
+/* Highlight the button when the mouse is over it */
+.basicbutton:hover, .basicbutton:focus
+{
+  /* 1+1=0+2 so that the button is not moving */
+  margin: 0;
+  border-width: 2px;
+  cursor: pointer;
+}
+
+.basicbutton.square 
 {
   padding: 4px;
 }
 
-.basicbutton > div > table
-{
-  /* Center the table inside the div */
-  margin-left: auto;
-  margin-right: auto;
-}
-
-.basicbutton td.icon
-{
-  width: 16px;
-}
-
-.basicbutton td.title
+.basicbutton.leftaligned
 {
   text-align: left;
-  padding-left: 2px;
-}
-
-.basicbutton.leftaligned > div > table
-{
-  margin-left: 0px;
 }
 
@@ -274 +266 @@
 .basicbutton.disabled, .basicbutton.disabled:hover
 {
-  color: #808080;
-  pointer-events: none;
   margin: 1px;
-  border: 1px solid #A0A0A0;
-  cursor: default;
-  cursor: not-allowed;
-}
-.basicbutton.disabled img
-{
-  filter: url(filters.svg#grayscale); /* Firfox, etc */
-  filter: gray; /* IE */
-  opacity: 0.5;
-}
+  border-width: 1px;
+}
+
 
 .filled .basicbutton
@@ -296 +279 @@
 {
   cursor: pointer;
-  background: transparent;
-}
-
-.icon.disabled, img.disabled
-{
-  color: #808080;
-  pointer-events: none;
-}
-
-.icon.disabled img
-{
-  filter: url(filters.svg#grayscale); /* Firfox, etc */
-  filter: gray; /* IE */
-  opacity: 0.5;
-}
+}
+
 
 /* 
@@ -322 +292 @@
   margin: 0.5em;
   padding: 0.5em;
-  border: 1px solid #A0A0A0;
+  border-width: 1px;
   border-radius: 5px;
-
 }
 
@@ -333 +302 @@
   background-color: #C80000 !important;
   font-weight: normal !important;
+  border-color: #A00000;
 }
 
 .messagecontainer.error
 {
-  border: 2px solid #A00000;
+  border-width: 2px;
 }
 
@@ -485 +455 @@
 }
 
-
-/* Debug messages which are useful for developers */
-.debug 
-{
-  position: absolute;
-  bottom: 0px;
-  left: 0px;
-  right: 0px;
-  height: 5em;
-  font-family: monospace,Courier New;
-  background: #DDDDFF;
-  border-top: 1px solid #2288AA;
-  z-index: 999;
-  overflow: auto;
-}
-
-.debug > div 
-{
-  border-bottom: 1px dotted #2288AA;
-}
-
 /*
   Invisible data-holder container
@@ -658 +607 @@
 */
 
-/* Add a 1-pixel gray border around the element */
+/* Add a 1-pixel border around the element */
 .fullborder
 {
-  border: 1px solid #A0A0A0 !important;
-}
-
-/* Add a 1-pixel gray border to the bottom om an element */
+  border-width: 1px;
+}
+
+/* Add a 1-pixel border to the bottom om an element */
 .bottomborder
 {
-  border-bottom: 1px solid #A0A0A0 !important;
-}
-
-/* Add a 1-pixel gray border to the top of an element */
+  border-bottom-width: 1px;
+}
+
+/* Add a 1-pixel border to the top of an element */
 .topborder
 {
-  border-top: 1px solid #A0A0A0 !important;
-}
-
-/* Add a 1-pixel gray border to the right of an element */
+  border-top-width: 1px;
+}
+
+/* Add a 1-pixel border to the right of an element */
 .rightborder
 {
-  border-right: 1px solid #A0A0A0 !important;
-}
-
-/* Add a 1-pixel gray border to the left of an element */
+  border-right-width: 1px;
+}
+
+/* Add a 1-pixel border to the left of an element */
 .leftborder
 {
-  border-left: 1px solid #A0A0A0 !important;
-}
-
-/* Fill the element with the common gray background color */
-.filled
-{
-  background: #E8E8E8 !important;
+  border-left-width: 1px;
+}
+
+/* Fill the element with the common background color */
+.bg-filled-100, .filled
+{
+  background-color: rgb(232, 232, 232);
+}
+
+/* Semi-transparant versions of the above */
+.bg-filled-50
+{
+  background-color: rgba(208, 208, 208, 0.5);
 }
 
@@ -698 +653 @@
 {
   position: absolute; 
-  top: 0px; 
-  bottom: 0px; 
-  left: 0px; 
-  right: 0px;
+  top: 0; 
+  bottom: 0; 
+  left: 0; 
+  right: 0;
   overflow: auto;
 }

trunk/www/include/styles/popup.css

@@ -35 +35 @@
 {
   position: absolute;
-  top: 0px;
-  left: 0px;
-  right: 0px;
+  top: 0;
+  left: 0;
+  right: 0;
   /* NOTE! Total height in base units is 1.4*1.4=1.96em */
   height: 1.4em;
   font-size: 1.4em;
   color: #F0F0F0;
-  margin: 0px;
   background-image: url('backgrounds/popup_h1.png');
   background-color: #224488;
@@ -52 +51 @@
 .popup h1:before
 {
+  color: #2288AA;
   content: '::';
   padding-left: 4px;
   padding-right: 4px;
-  color: #2288AA;
 }
 
@@ -119 +118 @@
   position:absolute; 
   bottom: 1rem; 
-  height: 4rem; 
+  height: 3.5rem; 
   right: 0.5rem; 
   width: 15.5rem; 
@@ -140 +139 @@
 {
   position: absolute;
-  bottom: 0px;
-  left: 0px; 
-  right: 0px;
-  /* NOTE! Total height is 2+0.6+0.4=3em */
-  height: 2em;
-  padding-top: 0.6em;
-  padding-bottom: 0.4em;
+  bottom: 0;
+  left: 0; 
+  right: 0;
+  height: 3em;
+  padding-top: 0.5em;
 }
 

trunk/www/include/styles/tabcontrol.css

@@ -30 +30 @@
 /* Main tab control */
 .tabcontrol
-{
-  border-color: #A0A0A0;
-  border-style: solid;
-  border-width: 0px;
-}
+{}
 
 /* Main content area */
 .tabcontrol .tabcontents
-{
-  background: #E8E8E8;
-}
-
-/* Add border on top or bottom depending on where tabs are */
-.tabsatbottom .tabcontents
-{
-  border: inherit;
-  border-width: 1px 1px 0px 1px;
-}
-
-.tabsontop .tabcontents
-{
-  border: inherit;
-  border-width: 0px 1px 1px 1px;
-}
+{}
 
 /* Each tab should fill up the main content area */
@@ -62 +43 @@
 
 /* Tabs */
+.tabcontrol table.tabscontainer, .tabcontrol .tabs > table
+{
+  border-collapse: separate;
+}
+
 .tabcontrol .tab
 {
-  background: #E8E8E8;
-  white-space: nowrap;
-  cursor: pointer;
-  border: 1px solid #A0A0A0;
+  border-width: 1px;
   padding: 2px 6px 2px 4px;
 }
@@ -75 +58 @@
 {
   /* Decrese padding to avoid movement */
+  border-width: 2px;
   padding: 1px 5px 1px 3px;
-  border: 2px solid #2288AA;
-  outline: 0;
 }
 
@@ -89 +71 @@
 {
   background-color: #FFFFFF;
-}
-
-/* Revert to default for the active tab */
-.tabcontrol .tab.active:hover, .tabcontrol .tab.active:focus
-{
-  cursor: auto;
-  border: 1px solid #A0A0A0;
-  padding: 2px 6px 2px 4px;
 }
 
@@ -116 +90 @@
 {
   /* Rounded corners at bottom */
-  border-radius: 0px 0px 5px 5px;
+  border-radius: 0 0 5px 5px;
 }
 
@@ -122 +96 @@
 .tabsatbottom .tab.active
 {
-  border-top: 1px solid #E8E8E8 !important;
-  border-bottom: 2px solid #2288AA !important;
-  padding-bottom: 1px !important;
-}
-
-.tabsatbottom .tab.active.white
-{
-  border-top: 1px solid #FFFFFF !important;
+  border-top-color: transparent;
+  border-bottom-width: 2px;
+  padding-bottom: 1px;
+  border-bottom-color: #2288AA;
+}
+
+/* Revert to default for the active tab */
+.tabsatbottom .tab.active:hover, .tabsatbottom .tab.active:focus
+{
+  cursor: auto;
+  border-width: 1px 1px 2px 1px;
+  padding: 2px 6px 1px 4px;
 }
 
@@ -135 +113 @@
 .tabsatbottom .tabspace
 {
-  border-top: 1px solid #A0A0A0;
+  border-top-width: 1px;
 }
 
@@ -143 +121 @@
   min-width: 5px;
   max-width: 5px;
-  border-top: 1px solid #A0A0A0;
+  border-top-width: 1px;
 }
 
@@ -149 +127 @@
 {
   width: 99%;
-  border-top: 1px solid #A0A0A0;
+  border-top-width: 1px;
 }
 
@@ -168 +146 @@
 .tabsattop .tab.active
 {
-  border-bottom: 1px solid #E8E8E8 !important;
-  border-top: 2px solid #2288AA !important;
-  padding-top: 1px !important;
+  border-bottom-color: transparent;
+  padding-top: 1px;
+  border-top-width: 2px;
+  border-top-color: #2288AA;
+}
+
+/* Revert to default for the active tab */
+.tabsattop .tab.active:hover, .tabsattop .tab.active:focus
+{
+  cursor: auto;
+  border-width: 2px 1px 1px 1px;
+  padding: 1px 6px 2px 4px;
 }
 
@@ -176 +163 @@
 .tabsattop .tabspace
 {
-  border-bottom: 1px solid #A0A0A0;
+  border-bottom-width: 1px;
 }
 
@@ -184 +171 @@
   min-width: 5px;
   max-width: 5px;
-  border-bottom: 1px solid #A0A0A0;
+  border-bottom-width: 1px;
 }
 
@@ -190 +177 @@
 {
   width: 99%;
-  border-bottom: 1px solid #A0A0A0;
+  border-bottom-width: 1px;
 }
 
@@ -198 +185 @@
 {
   position: absolute;
-  top: 0px;
-  left: 0px;
-  right: 0px;
+  top: 0;
+  left: 0;
+  right: 0;
   bottom: 2em;
-  border-width: 0px !important;
   overflow: auto;
 }
@@ -209 +195 @@
 {
   position: absolute;
-  bottom: 0px;
+  bottom: 0;
   height: 2em;
 }
@@ -218 +204 @@
   position: absolute;
   top: 2em;
-  left: 0px;
-  right: 0px;
-  bottom: 0px;
-  border-width: 0px !important;
+  left: 0;
+  right: 0;
+  bottom: 0;
   overflow: auto;
 }
@@ -228 +213 @@
 {
   position: absolute;
-  top: 0px;
+  top: 0;
   height: 2em;
 }

trunk/www/include/styles/table.css

@@ -33 +33 @@
 {
   width: 100%;
-  background: #E8E8E8;
-  padding: 0px;
-  margin: 0px;
 }
 
@@ -41 +38 @@
 .itemlist div.panel
 {
-  padding: 1px 2px 2px 2px;
-  height: 1.6em;
-  max-height: 1.75em;
-  background: #E8E8E8;
+  padding: 0 2px 0 2px;
+  
+  xheight: 1.6em;
+  xmax-height: 1.75em;
+  xbackground: #E8E8E8;
 }
 
@@ -50 +48 @@
 {
   padding: 1px 4px 2px 6px;
-  background: #E8E8E8;
+  xbackground: #E8E8E8;
 }
 
@@ -56 +54 @@
 .itemlist div.panelgroup
 {
-  background: #E8E8E8;
-}
-
-/* Do not display <div> as block */
-.itemlist div.presetselector, .itemlist div.navigator
-{
-  display: inline-block;
-  border-right: 1px solid #A0A0A0;
-  padding-right: 4px;
-}
-
-/* Try to align images with text */
-div.presetselector img, div.navigator img
-{
-  vertical-align: middle;
-  padding-bottom: 2px;
+  xbackground: #E8E8E8;
+  xborder-bottom-width: 1px;
+}
+
+/* Float <div>:s to left */
+.itemlist div.panelgroup div.panel > div
+{
+  float: left;
+  border-right-width: 1px;
+  padding: 2px 4px 2px 4px;
+}
+
+.itemlist div.panel div.presetselector
+{
+  padding-top: 1px;
 }
 
@@ -93 +90 @@
   padding-right: 1px;
   padding-left: 1px;
+  text-decoration: none;
 }
 
 /* The container <div> for the data table */
 .itemlist div.data 
-{
-  border: 1px solid #A0A0A0;
-  border-bottom: 0px;
-}
+{}
 
 /* The actual table containing data */
@@ -106 +101 @@
 {
   width: 100%;
-  border-collapse: collapse;
-  border-bottom: 1px solid #A0A0A0;
+  border-width: 1px;
 }
 
@@ -113 +107 @@
 .itemlist div.data > table > thead 
 {
-  border-bottom: 1px solid #A0A0A0;
-  background: #E8E8E8;
+  border-bottom-width: 1px;
 }
 
@@ -130 +123 @@
   font-weight: bold;
   white-space: nowrap;
-  border-left: 1px dotted #A0A0A0;
+  border-left-width: 1px;
+  border-left-style: dotted;
   padding: 1px 2px 1px 2px;
   vertical-align: middle;
@@ -138 +132 @@
 .itemlist div.data > table > thead > tr > th:first-child
 {
-  border-left: 0px;
+  border-left: 0;
 }
 
@@ -145 +139 @@
 .itemlist div.data th.index
 {
-  border-left: 0px;
+  border-left: 0;
   text-align: right;
   width: 3em;
@@ -154 +148 @@
 .itemlist div.data th.check 
 {
-  border-left: 0px;
+  border-left: 0;
   text-align: center;
   width: 2em;
@@ -164 +158 @@
 {
   width: 40px; /* Should be enough to hold two icons */
-  border-left: 0px;
+  border-left: 0;
+  text-align: right;
   white-space: nowrap;
-  text-align: right;
 }
 .itemlist div.data th.icons img
 {
   margin: 1px;
+  vertical-align: middle;
 }
 
@@ -195 +190 @@
 .itemlist div.data > table > tbody.rows > tr
 {
-  border-top: 1px dotted #A0A0A0;
-  border-bottom: 1px dotted #A0A0A0;
+  border-top-width: 1px;
+  border-top-style: dotted;
+  border-bottom-width: 1px;
+  border-bottom-style: dotted;
 }
 
@@ -204 +201 @@
 }
 
-
-/* Alternating background color between rows */
-.itemlist div.data tr.evenrow 
-{
-  background: #E0E0E0;
-}
-.itemlist div.data tr.oddrow 
-{
-  background: #F0F0F0;
-}
+.bg-evenrow
+{
+  background: rgba(224, 224, 224, 0.5);
+}
+
+.bg-oddrow
+{
+  background: rgba(240, 240, 240, 0.5);
+}
+
 
 /* A data cell */
 .itemlist div.data td.cell 
 {
-  border-left: 1px dotted #A0A0A0;
+  border-left-width: 1px;
+  border-left-style: dotted;
   padding: 1px 2px 1px 2px;
   vertical-align: middle;
@@ -226 +224 @@
 .itemlist div.data td.cell:first-child
 {
-  border-left: 0px;
+  border-left: 0;
 }
 
@@ -232 +230 @@
 .itemlist div.data td.cell.error 
 {
-  border: 1px solid #A00000;
-}
-
+  border-width: 1px;
+  border-style: solid;
+}
+
+.itemlist div.data div.panel
+{
+  padding: 5px;
+}
 
 /* A table using the entire content area */
@@ -240 +243 @@
 {
   position: absolute;
-  top: 0px;
-  bottom: 0px;
-  left: 0px;
-  right: 0px;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
   overflow: hidden;
-  border: 0px;
-  background: #FFFFFF;
-  border-top: 1px solid #A0A0A0;
+  border-top-width: 1px;
 }
 
@@ -253 +254 @@
 {
   position: absolute;
-  top: 0px;
-  left: 0px;
-  right: 0px;
-  height: 3.75em;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 3.85em;
 }
 
@@ -262 +263 @@
 {
   position: absolute;
-  top: 3.75em;
-  bottom: 0px;
-  left: 0px;
-  right: 0px;
+  top: 3.85em;
+  bottom: 0;
+  left: 0;
+  right: 0;
   overflow: auto;
-  margin-top: 1px;
 }
 
 .popup .fulltable
 {
-  border-bottom: 1px solid #A0A0A0;
-  background: #E8E8E8;
+  border-top-width: 0;
+  border-bottom-width: 1px;
+  xbackground: #E8E8E8;
 }
 
@@ -283 +284 @@
 .fulltable div.data
 {
-  border: 0px !important;
+  xborder: 0px !important;
 }
 
 .fulltable div.data > table
 {
-  border-bottom: 1px solid #A0A0A0 !important;
+  border-width: 0 0 1px 0;
 }
 

trunk/www/include/styles/toolbar.css

@@ -31 +31 @@
 
 .toolbar 
-{
-  background: #E8E8E8;
-  padding: 0px;
-  padding-left: 2px;
-  margin: 0px;
-}
+{}
 
 .toolbar > table
@@ -46 +41 @@
 .toolbar > table > tbody > tr > td
 {
-  border-right: 1px solid #A0A0A0;
+  border-right-width: 1px;
   height: 100%;
 }
@@ -52 +47 @@
 .toolbar .button
 {
-  padding: 2px;
-  cursor: pointer; 
-  white-space: nowrap;
+  padding: 2px 4px 2px 4px;
+}
+
+.toolbar .button img
+{
+  padding-right: 2px;
 }
 
 .toolbar .button:hover, .toolbar .button:focus
 {
-  border: 2px solid #2288AA;
-  padding: 0px;
+  border-width: 2px;
+  padding: 0 2px 0 2px;
   border-radius: 4px;
   outline: 0;
-}
-
-.toolbar .button.disabled, .toolbar .button.disabled:hover
-{
-  color: #808080;
-  pointer-events: none;
-  cursor: default;
-  cursor: not-allowed;
-  border: 0px;
-  padding: 2px;
-}
-
-.toolbar .button.disabled img
-{
-  filter: url(filters.svg#grayscale); /* Firfox, etc */
-  filter: gray; /* IE */
-  opacity: 0.5;
 }