Changeset 217 for trunk


Ignore:
Timestamp:
06/03/05 12:56:06 (15 years ago)
Author:
gocher
Message:

change all td/table elements to div elements in toolbar
change the stylesheet and the skins that it works

Location:
trunk
Files:
1 added
1 deleted
9 edited

Legend:

Unmodified
Added
Removed
  • trunk/htmlarea.css

    r213 r217  
    1 .htmlarea { background: #fff; } 
     1.htmlarea {margin: 2px; background: #fff; } 
    22 
    33.htmlarea .toolbar { 
     
    77  border: 1px solid; 
    88  border-color: ButtonHighlight ButtonShadow ButtonShadow ButtonHighlight; 
    9 } 
    10 .htmlarea .toolbar table { margin: 0; font-family: tahoma,verdana,sans-serif; font-size: 11px; } 
    11 .htmlarea .toolbar img { border: none; } 
    12 .htmlarea .toolbar .label { padding: 0px 3px; } 
    13  
    14 .htmlarea .toolbar .button { 
     9   
     10} 
     11.htmlarea .toolbar .toolbarRow { 
     12  margin: 0;  
     13  padding-left: 0px 0px 0px 2px; 
     14  font-family: Tahoma,Verdana,sans-serif;  
     15  font-size: 11px; 
     16} 
     17.htmlarea .toolbar .toolbarRow img { margin: 0; border: none;} 
     18.htmlarea .toolbar .toolbarRow .label { 
     19  vertical-align: top; 
     20  position: relative; 
     21  top: 5px; 
     22  padding-right: 2px; 
     23} 
     24.htmlarea .toolbar .toolbarRow .select {  
     25  vertical-align: top; 
     26  position: relative; 
     27  top: 2px; 
     28} 
     29 
     30.htmlarea .toolbar .toolbarRow .button { 
    1531  background: ButtonFace; 
    1632  color: ButtonText; 
    1733  border: 1px solid ButtonFace; 
    18   padding: 1px; 
    1934  margin: 0px; 
     35  width: 22px; 
     36  height: 22px; 
     37} 
     38 
     39.htmlarea .toolbar .toolbarRow .button .buttonImageContainer { 
     40  position: relative; 
     41  top: 2px; 
     42  left: 2px; 
    2043  width: 18px; 
    2144  height: 18px; 
    22 } 
    23 .htmlarea .toolbar a.button:hover { 
    24   border: 1px solid; 
    25   border-color: ButtonHighlight ButtonShadow ButtonShadow ButtonHighlight; 
    26 } 
    27 .htmlarea .toolbar a.buttonDisabled:hover { 
    28   border-color: ButtonFace; 
    29 } 
    30 .htmlarea .toolbar .buttonActive, 
    31 .htmlarea .toolbar .buttonPressed 
    32 { 
    33   padding: 2px 0px 0px 2px; 
     45  overflow: hidden; 
     46} 
     47 
     48.htmlarea .toolbar .toolbarRow .button.buttonHover { 
     49  cursor: pointer;   
     50  border: 1px solid; 
     51  border-color: ButtonHighlight ButtonShadow ButtonShadow ButtonHighlight; 
     52} 
     53.htmlarea .toolbar .toolbarRow .button.buttonDisabled { 
     54  border-color: none; 
     55} 
     56.htmlarea .toolbar .toolbarRow .buttonActive, 
     57.htmlarea .toolbar .toolbarRow .buttonPressed 
     58{ 
    3459  border: 1px solid; 
    3560  border-color: ButtonShadow ButtonHighlight ButtonHighlight ButtonShadow; 
    3661} 
    37 .htmlarea .toolbar .buttonPressed { 
     62.htmlarea .toolbar .toolbarRow .buttonPressed { 
    3863  background: ButtonHighlight; 
    3964} 
     
    4570  cursor: default; 
    4671  border: 1px solid ButtonShadow; 
    47 } 
    48  
    49 .htmlarea .toolbar .buttonDisabled img { 
     72  vertical-align: top; 
     73  position: relative; 
     74  top: 5px; 
     75} 
     76 
     77.htmlarea .toolbar .toolbarRow .buttonDisabled img { 
    5078  filter: gray() alpha(opacity = 25); 
    5179  -moz-opacity: 0.25; 
    5280} 
    5381 
    54 .htmlarea .toolbar .separator { 
    55   /*position: relative;*/ 
     82.htmlarea .toolbar .toolbarRow .separator { 
    5683  margin: 3px; 
    5784  border-left: 1px solid ButtonShadow; 
    5885  border-right: 1px solid ButtonHighlight; 
    5986  width: 0px; 
    60   height: 16px; 
     87  height: 18px; 
    6188  padding: 0px; 
     89  vertical-align: top; 
    6290} 
    6391 
  • trunk/htmlarea.js

    r216 r217  
    290290  this.toolbar = 
    291291  [ 
    292     ["popupeditor"], 
     292    ["separator","popupeditor"], 
    293293    ["separator","formatblock","fontname","fontsize","bold","italic","underline","strikethrough"], 
    294294    ["separator","forecolor","hilitecolor","textindicator"], 
     
    298298    ["separator","inserthorizontalrule","createlink","insertimage","inserttable"], 
    299299    ["separator","undo","redo","selectall"], (HTMLArea.is_gecko ? [] : ["cut","copy","paste","overwrite","saveas"]), 
    300     ["separator","killword","removeformat","toggleborders","lefttoright", "righttoleft","separator","htmlmode","about"] 
     300    ["separator","killword","clearfonts","removeformat","toggleborders","lefttoright", "righttoleft","separator","htmlmode","about"] 
    301301  ]; 
    302302 
     
    701701  toolbar.unselectable = "1"; 
    702702 
    703   var tb_row = null; 
    704703  var tb_objects = new Object(); 
    705704  this._toolbarObjects = tb_objects; 
     705  var tb_row = null; 
    706706 
    707707        this._createToolbar1(editor, toolbar, tb_objects); 
     
    721721// separate from previous createToolBar to allow dynamic change of toolbar 
    722722HTMLArea.prototype._createToolbar1 = function (editor, toolbar, tb_objects) { 
    723  
     723  function clearBoth() { 
    724724  // This shouldn't be necessary, but IE seems to float outside of the container 
    725725  // when we float toolbar sections, so we have to clear:both here as well 
    726726  // as at the end (which we do have to do). 
    727   if(editor.config.flowToolbars) 
    728   { 
    729     var brk = document.createElement('div'); 
    730     brk.style.height = 
     727    if(editor.config.flowToolbars) 
     728    { 
     729      var brk = document.createElement('div'); 
     730      brk.style.height = 
    731731      brk.style.width = 
    732732      brk.style.lineHeight = 
    733733      brk.style.fontSize = '1px'; 
    734     brk.style.clear = 'both'; 
    735     toolbar.appendChild(brk); 
     734      brk.style.clear = 'both'; 
     735      toolbar.appendChild(brk); 
     736    } 
    736737  } 
    737738 
     
    740741    if(typeof tb_row != 'undefined' && tb_row.childNodes.length == 0) return; 
    741742 
    742     var table = document.createElement("table"); 
    743     table.border = "0px"; 
    744     table.cellSpacing = "0px"; 
    745     table.cellPadding = "0px"; 
    746     if(editor.config.flowToolbars) 
    747     { 
    748       if(HTMLArea.is_ie) 
    749       { 
    750         table.style.styleFloat = "left"; 
    751       } 
    752       else 
    753       { 
    754         table.style.cssFloat = "left"; 
    755       } 
    756     } 
    757  
    758     toolbar.appendChild(table); 
    759     // TBODY is required for IE, otherwise you don't see anything 
    760     // in the TABLE. 
    761     var tb_body = document.createElement("tbody"); 
    762     table.appendChild(tb_body); 
    763     tb_row = document.createElement("tr"); 
    764     tb_body.appendChild(tb_row); 
    765  
    766     table.className = 'toolbarRow'; // meh, kinda. 
     743    tb_row = document.createElement("div"); 
     744    if(editor.config.flowToolbars) { 
     745      if(HTMLArea.is_ie) { 
     746        tb_row.style.styleFloat = "left"; 
     747      } else { 
     748        tb_row.style.cssFloat = "left"; 
     749      } 
     750    } 
     751    tb_row.className = 'toolbarRow'; // meh, kinda. 
     752    tb_row.style.whiteSpace = "nowrap"; 
     753    toolbar.appendChild(tb_row); 
    767754  }; // END of function: newLine 
    768  
    769   // init first line 
    770   newLine(); 
    771755 
    772756  // updates the state of a toolbar element.  This function is member of 
     
    841825    if (options) { 
    842826      el = document.createElement("select"); 
     827      el.className = "select"; 
    843828      el.title = tooltip; 
    844829      var obj = { 
     
    867852  // appends a new button to toolbar 
    868853  function createButton(txt) { 
     854    var btn = editor.config.btnList[txt]; 
     855    if (btn) { 
    869856    // the element that will be created 
    870     var el = null; 
    871     var btn = null; 
    872     switch (txt) { 
    873         case "separator": 
    874           if(editor.config.flowToolbars) newLine(); 
    875       el = document.createElement("div"); 
    876       el.className = "separator"; 
    877       break; 
    878         case "space": 
    879       el = document.createElement("div"); 
    880       el.className = "space"; 
    881       break; 
    882       case "linebreak": 
    883           newLine(); 
    884           return false; 
    885         case "textindicator": 
    886       el = document.createElement("div"); 
    887       el.appendChild(document.createTextNode("A")); 
    888       el.className = "indicator"; 
    889       el.title = HTMLArea._lc("Current style"); 
    890       var obj = { 
    891         name    : txt, // the button name (i.e. 'bold') 
    892         element : el, // the UI element (DIV) 
    893         enabled : true, // is it enabled? 
    894         active  : false, // is it pressed? 
    895         text    : false, // enabled in text mode? 
    896         cmd     : "textindicator", // the command ID 
    897         state   : setButtonStatus // for changing state 
    898       }; 
    899       tb_objects[txt] = obj; 
    900       break; 
    901         default: 
    902       btn = editor.config.btnList[txt]; 
    903     } 
    904     if (!el && btn) { 
    905       el = document.createElement("a"); 
    906       el.style.display = 'block'; 
    907       el.href = 'javascript:void(0)'; 
    908       el.style.textDecoration = 'none'; 
     857      var el = document.createElement("div"); 
     858      el.className = "button"; 
    909859      el.title = btn[0]; 
    910       el.className = "button"; 
    911860      // let's just pretend we have a button object, and 
    912861      // assign all the needed information to it. 
    913862      var obj = { 
    914         name    : txt, // the button name (i.e. 'bold') 
    915         element : el, // the UI element (DIV) 
    916         enabled : true, // is it enabled? 
    917         active  : false, // is it pressed? 
    918         text    : btn[2], // enabled in text mode? 
    919         cmd     : btn[3], // the command ID 
    920         state   : setButtonStatus, // for changing state 
    921         context : btn[4] || null // enabled in a certain context? 
     863        name: txt, // the button name (i.e. 'bold') 
     864        element: el, // the UI element (DIV) 
     865        enabled: true, // is it enabled? 
     866        active: false, // is it pressed? 
     867        text: btn[2], // enabled in text mode? 
     868        cmd: btn[3], // the command ID 
     869        state: setButtonStatus, // for changing state 
     870        context: btn[4] || null // enabled in a certain context? 
    922871      }; 
    923872      tb_objects[txt] = obj; 
    924873      // handlers to emulate nice flat toolbar buttons 
     874      HTMLArea._addEvent(el, "mouseover", function () { 
     875        if (obj.enabled) with (HTMLArea) { 
     876          _addClass(el, "buttonHover"); 
     877        } 
     878      }); 
     879 
    925880      HTMLArea._addEvent(el, "mouseout", function () { 
    926881        if (obj.enabled) with (HTMLArea) { 
    927           //_removeClass(el, "buttonHover"); 
     882          _removeClass(el, "buttonHover"); 
    928883          _removeClass(el, "buttonActive"); 
    929884          (obj.active) && _addClass(el, "buttonPressed"); 
     
    942897        if (obj.enabled) with (HTMLArea) { 
    943898          _removeClass(el, "buttonActive"); 
    944           //_removeClass(el, "buttonHover"); 
     899          _removeClass(el, "buttonHover"); 
    945900          if(HTMLArea.is_gecko) 
    946901          { 
     
    951906        } 
    952907      }); 
    953  
    954       var i_contain = HTMLArea.makeBtnImg(btn[1]); 
    955       var img = i_contain.firstChild; 
    956       el.appendChild(i_contain); 
    957  
     908       
     909      var img = HTMLArea.makeBtnImg(btn[1]); 
     910      var imgholder = document.createElement("div"); 
     911      imgholder.className = "buttonImageContainer"; 
     912      imgholder.appendChild(img); 
     913      el.appendChild(imgholder); 
     914       
    958915      obj.imgel = img; 
    959916      obj.swapImage = function(newimg) 
     
    965922          img.style.top  = newimg[2] ? ('-' + (18 * (newimg[2] + 1)) + 'px') : '-18px'; 
    966923          img.style.left = newimg[1] ? ('-' + (18 * (newimg[1] + 1)) + 'px') : '-18px'; 
     924         // img.style.bottom = newimg[2] ? ('-' + (18 * (newimg[2] + 19)) + 'px') : '-36px';           
     925         // img.style.right = newimg[1] ? ('-' + (18 * (newimg[1] + 19)) + 'px') : '-36px'; 
    967926        } 
    968927        else 
     
    973932        } 
    974933      } 
    975  
    976     } else if (!el) { 
    977       el = createSelect(txt); 
    978     } 
    979  
     934    }   
    980935    return el; 
    981936  }; 
    982937 
     938  clearBoth(); 
     939  newLine(); // init first line 
    983940  var first = true; 
    984941  for (var i = 0; i < this.config.toolbar.length; ++i) { 
     
    1000957        var label = RegExp.$2; 
    1001958        if (l7ed) { 
    1002           label = HTMLArea._lc(label); 
    1003         } 
    1004         var tb_cell = document.createElement("td"); 
    1005         tb_row.appendChild(tb_cell); 
    1006         tb_cell.className = "label"; 
    1007         tb_cell.innerHTML = label; 
     959                label = HTMLArea._lc(label); 
     960        } 
     961        var tb_element = document.createElement("div"); 
     962        tb_element.className = "label"; 
     963        tb_element.innerHTML = label; 
    1008964      } 
    1009965      else if(typeof code != 'function') 
    1010966      { 
    1011         var tb_element = createButton(code); 
    1012  
    1013         if (tb_element) 
    1014         { 
    1015           var tb_cell = document.createElement("td"); 
    1016           tb_cell.className = 'toolbarElement'; 
    1017           tb_row.appendChild(tb_cell); 
    1018           tb_cell.appendChild(tb_element); 
    1019         } 
    1020         else if (tb_element == null) 
    1021         { 
     967        var tb_element = null; 
     968        switch (code) { 
     969          case "separator": 
     970            if(editor.config.flowToolbars) newLine(); 
     971            tb_element = document.createElement("div"); 
     972            tb_element.className = "separator"; 
     973            break; 
     974          case "space": 
     975            tb_element = document.createElement("div"); 
     976            tb_element.className = "space"; 
     977            break; 
     978          case "linebreak": 
     979            newLine(); 
     980            break; 
     981          case "textindicator": 
     982            tb_element = document.createElement("div"); 
     983            tb_element.appendChild(document.createTextNode("A")); 
     984            tb_element.className = "indicator"; 
     985            tb_element.title = HTMLArea._lc("Current style"); 
     986            var obj = { 
     987              name      : code, // the button name (i.e. 'bold') 
     988              element : tb_element, // the UI element (DIV) 
     989              enabled : true, // is it enabled? 
     990              active    : false, // is it pressed? 
     991              text      : false, // enabled in text mode? 
     992              cmd       : "textindicator", // the command ID 
     993              state     : setButtonStatus // for changing state 
     994            }; 
     995            tb_objects[code] = obj; 
     996            break; 
     997        default: 
     998          tb_element = createButton(code); 
     999        } 
     1000      }   
     1001      if (code != "linebreak") { 
     1002        if (!tb_element) 
     1003          tb_element = createSelect(code); 
     1004        if (tb_element) { 
     1005          if(HTMLArea.is_ie) { 
     1006            tb_element.style.display = "inline"; 
     1007          } else { 
     1008            tb_element.style.cssFloat = "left"; 
     1009          } 
     1010          tb_row.appendChild(tb_element); 
     1011        } 
     1012        else if (tb_element == null) { 
    10221013          alert("FIXME: Unknown toolbar item: " + code); 
    10231014        } 
     
    10251016    } 
    10261017  } 
    1027  
    1028   if(editor.config.flowToolbars) 
    1029   { 
    1030     var brk = document.createElement('div'); 
    1031     brk.style.height = 
    1032       brk.style.width = 
    1033       brk.style.lineHeight = 
    1034       brk.style.fontSize = '1px'; 
    1035     brk.style.clear = 'both'; 
    1036     toolbar.appendChild(brk); 
    1037   } 
    1038  
     1018  clearBoth(); 
    10391019  return toolbar; 
    10401020}; 
     
    10491029    doc._htmlareaImgCache = { }; 
    10501030  } 
    1051  
    1052   var i_contain = null; 
    1053   if(HTMLArea.is_ie && ((!doc.compatMode) || (doc.compatMode && doc.compatMode == "BackCompat"))) 
    1054   { 
    1055     i_contain = doc.createElement('span'); 
    1056   } 
    1057   else 
    1058   { 
    1059     i_contain = doc.createElement('div'); 
    1060     i_contain.style.position = 'relative'; 
    1061   } 
    1062  
    1063   i_contain.style.overflow = 'hidden'; 
    1064   i_contain.style.width = "18px"; 
    1065   i_contain.style.height = "18px"; 
    1066   i_contain.className    = 'buttonImageContainer'; 
    1067  
    10681031  var img = null; 
    10691032  if(typeof imgDef == 'string') 
     
    11001063    img.style.left = imgDef[1] ? ('-' + (18 * (imgDef[1] + 1)) + 'px') : '-18px'; 
    11011064  } 
    1102   i_contain.appendChild(img); 
    1103   return i_contain; 
     1065  return img; 
    11041066} 
    11051067 
  • trunk/plugins/TableOperations/table-operations.js

    r81 r217  
    684684// the list of buttons added by this plugin 
    685685TableOperations.btnList = [ 
     686  null, 
    686687        // table properties button 
    687688    ["table-prop",       "table", "Table properties"], 
  • trunk/skins/blue-look/skin.css

    r194 r217  
    1 .htmlarea .toolbar, .htmlarea .toolbar .button 
     1.htmlarea .toolbar { background-color:#f7f8fd;} 
     2 
     3.htmlarea .toolbar .toolbarRow 
    24{ 
    3   background-color:#f7f8fd; 
     5  border: 1px solid #DEDEDE; 
     6  -moz-border-radius: 3px; 
    47} 
    5  
    6 .htmlarea .toolbarRow 
    7 { 
    8   margin-top:2px; 
    9   margin-bottom:2px; 
    10   border:1px dotted #DEDEDE; 
    11   padding:2px; 
    12   -moz-border-radius:3px; 
    13   margin:4px; 
    14 } 
    15  
    16 .htmlarea .toolbar .button 
     8.htmlarea .toolbar .toolbarRow .button 
    179{ 
    1810  background-image: url(button-background.png); 
    19   width:20px; 
    20   height:20px; 
    21   padding:0px; 
    2211  border:1px solid #f7f8fd; 
    2312} 
    24  
    25 .buttonImageContainer 
    26 { 
    27   position:relative; 
    28   left:1px; 
    29   top :1px; 
    30 } 
    31  
    32 .htmlarea .toolbar .separator { 
    33   margin:0px; 
     13.htmlarea .toolbar .toolbarRow .separator { 
    3414  background-image: url(separator.gif); 
    3515  border:1px #f7f8fd; 
    36   width:   7px; 
    37   height: 20px; 
    38   padding: 0px; 
     16  width:7px; 
    3917} 
    40  
    41 .htmlarea .toolbar a.button:hover 
     18.htmlarea .toolbar .toolbarRow .buttonHover 
    4219{ 
    43   border: 1px solid; 
    4420  border-color: white #CCC #CCC white; 
    4521} 
    46  
    47 .htmlarea .toolbar a.buttonDisabled:hover 
     22.htmlarea .toolbar .toolbarRow .buttonDisabled 
    4823{ 
    4924  border-color: #f7f8fd; 
    5025} 
    51  
    52 .htmlarea .toolbar .button.buttonActive, 
    53 .htmlarea .toolbar .button.buttonPressed 
     26.htmlarea .toolbar .toolbarRow .button.buttonActive, 
     27.htmlarea .toolbar .toolbarRow .button.buttonPressed 
    5428{ 
    5529  border: 1px solid; 
    5630  border-color: #CCC white white #CCC; 
    5731} 
    58  
    5932.htmlarea .statusBar { 
    6033  border-color: #CCC white white #CCC; 
     
    6740  font: 11px helvetica,arial,sans-serif; 
    6841} 
    69  
    7042.htmlarea .statusBar .statusBarTree 
    7143{ 
     
    7345  margin: 3px; 
    7446} 
    75  
    7647.htmlarea .statusBar .statusBarTree a 
    7748{ 
     
    8051  text-decoration:none; 
    8152} 
    82  
    8353.htmlarea .panel h1 
    8454{ 
  • trunk/skins/blue-metallic/skin.css

    r207 r217  
    1 .htmlarea .toolbar, .htmlarea .toolbar .button 
     1.htmlarea .toolbar { background-color:#f7f8fd;} 
     2 
     3.htmlarea .toolbar .toolbarRow 
    24{ 
    3   background-color:#f7f8fd; 
     5  background-image: url(button-background.png); 
     6  border:1px solid #DEDEDE; 
     7  -moz-border-radius:3px; 
    48} 
    59 
    6 .htmlarea .toolbarRow 
    7 { 
     10.htmlarea .toolbar .toolbarRow .button { 
    811  background-image: url(button-background.png); 
    9   margin-top:2px; 
    10   margin-bottom:2px; 
    11   border:1px dotted #DEDEDE; 
    12   padding:2px; 
    13   -moz-border-radius:3px; 
    14   margin:4px; 
     12  border:1px solid #f7f8fd; 
     13} 
     14.htmlarea .toolbar .toolbarRow .separator { 
     15  background-image: url(separator.gif); 
     16  border:1px #f7f8fd; 
     17  width:7px; 
    1518} 
    1619 
    17 .htmlarea .toolbar .button { 
    18   background-image: url(button-background.png); 
    19   width:20px; 
    20   height:20px; 
    21   padding:0px; 
    22   border:1px solid #f7f8fd; 
    23 } 
    24  
    25 .buttonImageContainer 
     20.htmlarea .toolbar .toolbarRow .buttonHover 
    2621{ 
    27   position:relative; 
    28   left:1px; 
    29   top :1px; 
    30 } 
    31  
    32 .htmlarea .toolbar .separator  
    33 { 
    34   margin:0px; 
    35   background-image: url(separator.gif); 
    36   border:1px #f7f8fd; 
    37   width:   7px; 
    38   height: 20px; 
    39   padding: 0px; 
    40 } 
    41  
    42 .htmlarea .toolbar a.button:hover 
    43 { 
    44   border: 1px solid; 
    4522  border-color: #316AC5; 
    4623  background-image: none !important; 
     
    4825} 
    4926 
    50 .htmlarea .toolbar a.buttonDisabled:hover 
     27.htmlarea .toolbar .toolbarRow .buttonDisabled 
    5128{ 
    52   border-color: #316AC5; 
    5329  background-color : #FFE1AC; 
    5430} 
    5531 
    56 .htmlarea .toolbar .button.buttonActive, 
    57 .htmlarea .toolbar .button.buttonPressed 
     32.htmlarea .toolbar .toolbarRow .button.buttonActive, 
     33.htmlarea .toolbar .toolbarRow .button.buttonPressed 
    5834{ 
    59   border: 1px solid; 
    6035  border-color: #79A4CC #FFFFFF #FFFFFF #79A4CC; 
    6136  background-image: none !important; 
  • trunk/skins/green-look/skin.css

    r201 r217  
    1 .htmlarea .toolbar, .htmlarea .toolbar .button 
     1.htmlarea .toolbar{ background-color:#f8fdf8; 
     2} 
     3.htmlarea .toolbar .toolbarRow 
    24{ 
    3   background-color:#f8fdf8; 
     5  border:1px solid #DEDEDE; 
     6  -moz-border-radius:3px; 
    47} 
    5 .htmlarea .toolbarRow 
     8.htmlarea .toolbar .toolbarRow .button 
    69{ 
    7   margin-top:2px; 
    8   margin-bottom:2px; 
    9   border:1px dotted #DEDEDE; 
    10   padding:2px; 
    11   -moz-border-radius:3px; 
    12   margin:4px; 
    13 } 
    14 .htmlarea .toolbar .button 
    15 { 
    16   background-image:url(button-background.gif); 
    17   width:20px; 
    18   height:20px; 
    19   padding:0; 
     10  background-image:url(button-background.png); 
    2011  border:1px solid #f8fdf8; 
    2112} 
    22 .buttonImageContainer 
    23 { 
    24   position:relative; 
    25   left:1px; 
    26   top:1px; 
    27 } 
    28 .htmlarea .toolbar .separator { 
    29   margin:0; 
     13.htmlarea .toolbar .toolbarRow .separator { 
    3014  background-image:url(separator.gif); 
    3115  border:1px #f8fdf8; 
    3216  width:7px; 
    33   height:20px; 
    34   padding:0; 
    3517} 
    36 .htmlarea .toolbar a.button:hover 
     18.htmlarea .toolbar .toolbarRow .buttonHover 
    3719{ 
    38   border:1px solid; 
    3920  border-color:#fff #ccc #ccc #fff; 
    4021} 
    41 .htmlarea .toolbar a.buttonDisabled:hover 
     22.htmlarea .toolbar .toolbarRow .buttonDisabled 
    4223{ 
    4324  border-color:#f8fdf8; 
    4425} 
    45 .htmlarea .toolbar .buttonActive, 
    46 .htmlarea .toolbar .buttonPressed 
     26.htmlarea .toolbar .toolbarRow .button.buttonActive, 
     27.htmlarea .toolbar .toolbarRow .button.buttonPressed 
    4728{ 
    4829  border:1px solid; 
    4930  border-color:#ccc #fff #fff #ccc; 
    50   background:#ffb166; 
    5131} 
    5232.htmlarea .statusBar { 
     
    5434  padding:0; 
    5535  height:20px; 
    56   background-image:url(button-background.gif); 
     36  background-image:url(button-background.png); 
    5737  background-repeat:repeat-x; 
    5838  background-color:#f8fdf8; 
     
    7353.htmlarea .panel h1 
    7454{ 
    75   background-image:url(button-background.gif); 
     55  background-image:url(button-background.png); 
    7656  background-repeat:repeat-x; 
    7757  background-color:#f8fdf8; 
  • trunk/skins/inditreuse/skin.css

    r201 r217  
    99  background-image:url(button-background.png); 
    1010} 
    11 .htmlarea .toolbar .button { 
     11.htmlarea .toolbar .toolbarRow .button{ 
    1212  width:20px; 
    1313  height:20px; 
     
    1616  background-image:url(button-background.png); 
    1717} 
    18 .buttonImageContainer { 
    19   position:relative; 
    20   left:1px; 
    21   top:1px; 
    22 } 
    23 .htmlarea .toolbar .separator { 
     18.htmlarea .toolbar .toolbarRow .separator { 
    2419  margin:0; 
    2520  background-image: url(separator.png); 
     
    2924  border:none; 
    3025} 
    31 .htmlarea .toolbar a.button:hover { 
     26.htmlarea .toolbar .toolbarRow .buttonHover { 
    3227  border:none; 
    3328  padding:1px; 
    3429  background-image:url(hover.png); 
    3530} 
    36 .htmlarea .toolbar .button.buttonPressed 
     31.htmlarea .toolbar .toolbarRow .button.buttonPressed 
    3732{ 
    3833  padding:1px; 
  • trunk/skins/xp-blue/skin.css

    r201 r217  
    44  background-repeat:repeat-y; 
    55} 
    6 .htmlarea .toolbarRow { 
     6.htmlarea .toolbar .toolbarRow { 
    77  margin-top:2px; 
    88  margin-bottom:2px; 
    99  background-image:url(button-background.png); 
    1010} 
    11 .htmlarea .toolbar .button { 
     11.htmlarea .toolbar .toolbarRow .button { 
    1212  width:20px; 
    1313  height:20px; 
     
    1616  background-image:url(button-background.png); 
    1717} 
    18 .buttonImageContainer { 
    19   position:relative; 
    20   left:1px; 
    21   top:1px; 
    22 } 
    23 .htmlarea .toolbar .separator { 
    24   margin:0; 
     18.htmlarea .toolbar .toolbarRow .separator { 
    2519  background-image:url(separator.png); 
    2620  width:7px; 
     
    2822  padding:0; 
    2923} 
    30 .separator { 
    31   border:none; 
     24.htmlarea .toolbar .toolbarRow .buttonHover { 
     25  background-image:url(hover.png); 
     26  padding:0; 
     27  border: 1px solid;   
     28  border-color: white #CCC #CCC white; 
    3229} 
    33 .htmlarea .toolbar a.button:hover { 
    34   border:1px solid #003355; 
    35   padding:0; 
    36   background-image:url(hover.png); 
    37 } 
    38 .htmlarea .toolbar .button.buttonPressed 
     30.htmlarea .toolbar .toolbarRow .button.buttonPressed 
    3931{ 
    4032  border:1px solid #003355; 
  • trunk/skins/xp-green/skin.css

    r201 r217  
    44  background-repeat:repeat-y; 
    55} 
    6 .htmlarea .toolbarRow { 
     6.htmlarea .toolbar .toolbarRow { 
    77  margin-top:2px; 
    88  margin-bottom:2px; 
    99  background-image:url(button-background.png); 
    1010} 
    11 .htmlarea .toolbar .button { 
     11.htmlarea .toolbar .toolbarRow .button { 
    1212  width:20px; 
    1313  height:20px; 
     
    1616  background-image:url(button-background.png); 
    1717} 
    18 .buttonImageContainer { 
    19   position:relative; 
    20   left:1px; 
    21   top:1px; 
    22 } 
    23 .htmlarea .toolbar .separator { 
    24   margin:0; 
     18.htmlarea .toolbar .toolbarRow .separator { 
    2519  background-image:url(separator.png); 
    2620  width:7px; 
     
    2822  padding:0; 
    2923} 
    30 .separator { 
    31   border:none; 
    32 } 
    33 .htmlarea .toolbar a.button:hover { 
     24.htmlarea .toolbar .toolbarRow .buttonHover { 
    3425  border:1px solid #335500; 
    3526  padding:0; 
    3627  background-image:url(hover.png); 
    3728} 
    38 .htmlarea .toolbar .button.buttonPressed 
     29.htmlarea .toolbar .toolbarRow .button.buttonPressed 
    3930{ 
    4031  border:1px solid #335500; 
Note: See TracChangeset for help on using the changeset viewer.