Changeset 6603


Ignore:
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:
11 edited

Legend:

Unmodified
Added
Removed
  • trunk/src/clients/web/net/sf/basedb/clients/web/extensions/toolbar/ToolbarButtonRenderer.java

    r6305 r6603  
    141141    if (displayIcon && btn.getIcon() != null)
    142142    {
    143       sb.append("<table><tr>");
    144       sb.append("<td><img src=\"").append(btn.getIcon()).append("\"");
     143      sb.append("<img src=\"").append(btn.getIcon()).append("\"");
    145144      sb.append(" alt=\"").append(HTML.encodeTags(btn.getTitle())).append("\"");
    146145      if (btn.getId() != null) sb.append(" id=\"").append(btn.getId()).append(".icon").append("\"");
    147       sb.append("></td>");
    148       sb.append("<td>");
     146      sb.append(">");
    149147    }
    150148    if (displayText && btn.getTitle() != null)
    151149    {
    152       sb.append("<span style=\"padding: 0px 2px 0px 2px;\"");
     150      sb.append("<span");
    153151      if (btn.getId() != null) sb.append(" id=\"").append(btn.getId()).append(".text").append("\"");
    154152      sb.append(">").append(btn.getTitle()).append("</span>");
    155     }
    156     if (displayIcon && btn.getIcon() != null)
    157     {
    158       sb.append("</td>");
    159       sb.append("</tr></table>");
    160153    }
    161154    sb.append("</div>");
  • trunk/src/clients/web/net/sf/basedb/clients/web/taglib/Button.java

    r6576 r6603  
    203203  public Button()
    204204  {
    205     super("basicbutton");
     205    super("basicbutton button");
    206206  }
    207207 
     
    368368    if (getTooltip() != null) sb.append(" title=\"").append(getTooltip()).append("\"");
    369369    addDynamicAttributes(sb);
    370     sb.append("><div>");
    371     sb.append("<table><tr>");
     370    sb.append(">");
    372371    if (theImage != null)
    373372    {
     
    376375        theImage = page.getRoot() + "images/" + theImage;
    377376      }
    378       sb.append("<td class=\"icon\"><img src=\"").append(theImage).append("\"");
     377      sb.append("<img src=\"").append(theImage).append("\"");
    379378      sb.append(" alt=\"").append(HTML.encodeTags(getTitle())).append("\"");
    380       sb.append("></td>");
     379      sb.append(">");
    381380    }
    382381    if (getTitle() != null)
    383382    {
    384       sb.append("<td class=\"title\">");
    385383      sb.append(getTitle());
    386       sb.append("</td>");
    387     }
    388     sb.append("</tr></table>");
    389     sb.append("</div></div>");
     384    }
     385    sb.append("</div>");
    390386
    391387    try
  • trunk/src/clients/web/net/sf/basedb/clients/web/taglib/table/Headers.java

    r6183 r6603  
    5252  public Headers()
    5353  {
    54     super("headers");
     54    super("headers bg-filled-100");
    5555  }
    5656 
  • trunk/src/clients/web/net/sf/basedb/clients/web/taglib/table/Table.java

    r6336 r6603  
    260260    The class names for even and odd row respectively.
    261261  */
    262   private static final String[] rowclass = new String[] { "evenrow", "oddrow" } ;
     262  private static final String[] rowclass = new String[] { "bg-evenrow", "bg-oddrow" } ;
    263263
    264264  /**
  • trunk/www/include/styles/headertabcontrol.css

    r6096 r6603  
    2929/* Main tab control */
    3030.tabcontrol
    31 {
    32   border-color: #A0A0A0;
    33   border-style: solid;
    34   border-width: 0px;
    35 }
     31{}
    3632
    3733/* Main content area */
    3834.tabcontrol .tabcontents
    39 {
    40   background: #FFFFFF;
    41 }
    42 
    43 /* Add border on top or bottom depending on where tabs are */
    44 .tabsatbottom .tabcontents
    45 {
    46   border: inherit;
    47   border-width: 1px 1px 0px 1px;
    48 }
    49 
    50 .tabsattop .tabcontents
    51 {
    52   border: inherit;
    53   border-width: 0px 1px 1px 1px;
    54 }
     35{}
    5536
    5637
    5738/* Tabs */
     39.tabcontrol table.tabscontainer, .tabcontrol .tabs > table
     40{
     41  border-collapse: separate;
     42}
     43
    5844.tabcontrol .tab
    5945{
    60   background: #E8E8E8;
    61   white-space: nowrap;
    62   cursor: pointer;
    63   border: 1px solid #A0A0A0;
     46  border-width: 1px;
    6447  padding: 2px 6px 2px 4px;
    6548}
     49
    6650
    6751/* Put blue-ish border around tab when hovering or tab is focused */
     
    6953{
    7054  /* Decrese padding to avoid movement */
     55  border-width: 2px;
    7156  padding: 1px 5px 1px 3px;
    72   border: 2px solid #2288AA;
    73   outline: 0;
    7457}
    7558
     
    8366{
    8467  background-color: #FFFFFF;
    85 }
    86 
    87 
    88 /* Revert to default for the active tab */
    89 .tabcontrol .tab.active:hover, .tabcontrol .tab.active:focus
    90 {
    91   cursor: auto;
    92   border: 1px solid #A0A0A0;
    93   padding: 2px 6px 2px 4px;
    9468}
    9569
     
    11791.tabsattop .tab.active
    11892{
    119   border-bottom: 1px solid #E8E8E8 !important;
    120   border-top: 2px solid #2288AA !important;
    121   padding-top: 1px !important;
     93  border-bottom-color: transparent;
     94  padding-top: 1px;
     95  border-top-width: 2px;
     96  border-top-color: #2288AA;
    12297}
    12398
    124 .tabsattop .tab.active.white
    125 {
    126   border-bottom: 1px solid #FFFFFF !important;
    127 }
    12899
    129100/* Add bottom border on tabspace */
    130101.tabsattop .tabspace
    131102{
    132   border-bottom: 1px solid #A0A0A0;
     103  border-bottom-width: 1px;
    133104}
    134105
     
    138109  min-width: 5px;
    139110  max-width: 5px;
    140   border-bottom: 1px solid #A0A0A0;
     111  border-bottom-width: 1px;
    141112}
    142113
     
    144115{
    145116  width: 99%;
    146   border-bottom: 1px solid #A0A0A0;
     117  border-bottom-width: 1px;
    147118}
    148119
     
    151122  position: absolute;
    152123  top: 2em;
    153   left: 0px;
    154   right: 0px;
    155   bottom: 0px;
    156   border-width: 0px !important;
     124  left: 0;
     125  right: 0;
     126  bottom: 0;
    157127  overflow: auto;
    158128}
     
    160130.mastertabcontrol.notabs > .tabcontents
    161131{
    162   top: 0px;
     132  top: 0;
    163133}
    164134
     
    166136{
    167137  position: absolute;
    168   top: 0px;
     138  top: 0;
    169139  height: 2em;
    170140}
  • trunk/www/include/styles/login.css

    r6426 r6603  
    112112{
    113113  position: absolute;
    114   top: 0px;
    115   bottom: 0px;
    116   left: 0px;
    117   right: 0px;
     114  top: 0;
     115  bottom: 0;
     116  left: 0;
     117  right: 0;
    118118  border-top: 1px solid #A0A0A0;
    119119  background: #E8E8E8;
     
    131131.welcomesection
    132132{
    133   border: 1px solid #A0A0A0;
    134   border-top: 0px;
     133  border-width: 0 1px 1px 1px;
    135134  padding: 2px;
    136135}
  • trunk/www/include/styles/main.css

    r6428 r6603  
    3333  -------------- 
    3434*/
     35*
     36{
     37  border-color: #A0A0A0;
     38  border-style: solid;
     39  border-width: 0;
     40  margin: 0;
     41  padding: 0;
     42  box-sizing: border-box;
     43}
    3544
    3645body
    3746{
    3847  color: #000000;
    39   background: #FFFFFF;
     48  background-color: #FFFFFF;
    4049  font-family: verdana, arial, sans-serif;
    41   padding-left: 0px;
    42   padding-right: 0px;
    43 }
    44 
    45 iframe
    46 {
    47   border: 0px;
    48   margin: 0px;
    49 }
    50 
    51 
    52 /* No border around images, align with text */
     50}
     51
     52/* Align with text */
    5353img
    5454{
    55   border: 0px;
    5655  vertical-align: text-bottom;
    5756}
    5857
    59 img.disabled
    60 {
     58/* Disabled elements */
     59.disabled
     60{
     61  color: #666666;
    6162  filter: url(filters.svg#grayscale); /* Firfox, etc */
    6263  filter: gray; /* IE */
     64}
     65
     66.disabled img, img.disabled
     67{
    6368  opacity: 0.5;
    6469}
     70
    6571
    6672/* Monospace:ed elements should use same font size in IE and Firefox */
     
    7480table
    7581{
    76   border: 0px;
    77   padding: 0px;
    78   border-spacing: 0px;
    79 }
    80 td, th
    81 {
    82   padding: 0px;
    83   border: 0px;
    84 }
     82  border-spacing: 0;
     83  border-collapse: collapse;
     84}
     85
    8586
    8687/* Linked elements should display a pointer cursor and be underlined on hover only */
     
    108109}
    109110
    110 
    111 /*
    112   Add a large padding to make sure that old pages start below
    113   absolutely-positioned menu and page title. Should be removed
    114   when all pages (including extension) have been fixed to use
    115   absolute positioning.
    116 */
    117 body.default
    118 {
    119   padding-top: 5em;
    120 }
    121 
    122 body.default h1
     111/* Common header styles (eg. color, font-size, etc.) */
     112h1
    123113{
    124114  position: absolute;
    125   left: 0px;
    126   right: 0px;
     115  left: 0;
     116  right: 0;
     117  /* NOTE! Use 'rem' unit to avoid font-size multiplier */
    127118  top:  2.25rem;
    128   /* NOTE! Use 'rem' unit to avoid font-size multiplier */
    129119  height: 2.25rem;
    130120  font-size: 1.4em;
    131121  font-weight: bold;
    132122  color: #224488;
    133   margin: 0px;
    134123  white-space: nowrap;
    135124}
    136125
    137 body.default h1:before
    138 {
     126h1:before
     127{
     128  color: #2288AA;
    139129  content: '::';
    140   padding-left: 4px;
     130  padding-left: 8px;
    141131  padding-right: 4px;
    142   color: #2288AA;
    143132}
    144133
     
    159148  font-weight: bold;
    160149  color: #224488;
    161   margin: 0px;
    162150  white-space: nowrap;
    163151}
     
    168156.hideablesection
    169157{
     158  border-bottom-width: 1px;
     159  border-bottom-style: dotted;
    170160  margin-top: 0.5em;
    171   border-bottom: 1px dotted #A0A0A0;
    172161  padding-bottom: 0.5em;
    173162}
     
    176165.hideablesection > h2
    177166{
    178   padding: 0px 2px 2px 2px;
     167  padding: 0 2px 2px 2px;
    179168}
    180169
     
    184173  padding-left: 18px;
    185174  padding-right: 8px;
    186 }
    187 
    188 .hideablesection .messagecontainer
    189 {
    190   margin: 0px;
    191175}
    192176
     
    208192  /* Adds 6px between each button */
    209193  border-spacing: 6px 0px;
     194  border-collapse: separate;
    210195}
    211196
     
    215200}
    216201
    217 /* A single button */
     202/* Generic button, standalone or in a toolbar, define colors only */
     203.button, .tab
     204{
     205  background-color: #E8E8E8;
     206  cursor: pointer;
     207  white-space: nowrap;
     208}
     209
     210.button:hover, .button:focus, .tab:hover, .tab:focus
     211{
     212  border-color: #2288AA;
     213  outline: 0;
     214}
     215
     216.button.disabled
     217{
     218  pointer-events: none;
     219  cursor: default;
     220  cursor: not-allowed;
     221}
     222
     223/* A single standalone button */
    218224.basicbutton
    219225{
    220   background: #E8E8E8;
    221   color: #000000;
     226  display: inline-block;
    222227  margin: 1px;
    223   border: 1px solid #A0A0A0;
     228  border-width: 1px;
    224229  border-radius: 4px;
    225 }
    226 
    227 /* Highlight the button when the mouse is over it */
    228 .basicbutton:hover, .basicbutton:focus
    229 {
    230   /* 1+1=0+2 so that the button is not moving */
    231   margin: 0px;
    232   border: 2px solid #2288AA;
    233   cursor: pointer;
    234   outline: 0;
    235 }
    236 
    237 /* The second div is used to for a 3d effect */
    238 .basicbutton > div
    239 {
    240230  padding: 1px 5px 2px 5px;
    241231  text-align: center;
     
    243233}
    244234
    245 .basicbutton.square > div
     235.buttongroup .basicbutton
     236{
     237  display: block;
     238}
     239
     240/* Make room for the icon */
     241.basicbutton > img
     242{
     243  padding-right: 2px;
     244}
     245
     246/* Highlight the button when the mouse is over it */
     247.basicbutton:hover, .basicbutton:focus
     248{
     249  /* 1+1=0+2 so that the button is not moving */
     250  margin: 0;
     251  border-width: 2px;
     252  cursor: pointer;
     253}
     254
     255.basicbutton.square
    246256{
    247257  padding: 4px;
    248258}
    249259
    250 .basicbutton > div > table
    251 {
    252   /* Center the table inside the div */
    253   margin-left: auto;
    254   margin-right: auto;
    255 }
    256 
    257 .basicbutton td.icon
    258 {
    259   width: 16px;
    260 }
    261 
    262 .basicbutton td.title
     260.basicbutton.leftaligned
    263261{
    264262  text-align: left;
    265   padding-left: 2px;
    266 }
    267 
    268 .basicbutton.leftaligned > div > table
    269 {
    270   margin-left: 0px;
    271263}
    272264
     
    274266.basicbutton.disabled, .basicbutton.disabled:hover
    275267{
    276   color: #808080;
    277   pointer-events: none;
    278268  margin: 1px;
    279   border: 1px solid #A0A0A0;
    280   cursor: default;
    281   cursor: not-allowed;
    282 }
    283 .basicbutton.disabled img
    284 {
    285   filter: url(filters.svg#grayscale); /* Firfox, etc */
    286   filter: gray; /* IE */
    287   opacity: 0.5;
    288 }
     269  border-width: 1px;
     270}
     271
    289272
    290273.filled .basicbutton
     
    296279{
    297280  cursor: pointer;
    298   background: transparent;
    299 }
    300 
    301 .icon.disabled, img.disabled
    302 {
    303   color: #808080;
    304   pointer-events: none;
    305 }
    306 
    307 .icon.disabled img
    308 {
    309   filter: url(filters.svg#grayscale); /* Firfox, etc */
    310   filter: gray; /* IE */
    311   opacity: 0.5;
    312 }
     281}
     282
    313283
    314284/*
     
    322292  margin: 0.5em;
    323293  padding: 0.5em;
    324   border: 1px solid #A0A0A0;
     294  border-width: 1px;
    325295  border-radius: 5px;
    326 
    327296}
    328297
     
    333302  background-color: #C80000 !important;
    334303  font-weight: normal !important;
     304  border-color: #A00000;
    335305}
    336306
    337307.messagecontainer.error
    338308{
    339   border: 2px solid #A00000;
     309  border-width: 2px;
    340310}
    341311
     
    485455}
    486456
    487 
    488 /* Debug messages which are useful for developers */
    489 .debug
    490 {
    491   position: absolute;
    492   bottom: 0px;
    493   left: 0px;
    494   right: 0px;
    495   height: 5em;
    496   font-family: monospace,Courier New;
    497   background: #DDDDFF;
    498   border-top: 1px solid #2288AA;
    499   z-index: 999;
    500   overflow: auto;
    501 }
    502 
    503 .debug > div
    504 {
    505   border-bottom: 1px dotted #2288AA;
    506 }
    507 
    508457/*
    509458  Invisible data-holder container
     
    658607*/
    659608
    660 /* Add a 1-pixel gray border around the element */
     609/* Add a 1-pixel border around the element */
    661610.fullborder
    662611{
    663   border: 1px solid #A0A0A0 !important;
    664 }
    665 
    666 /* Add a 1-pixel gray border to the bottom om an element */
     612  border-width: 1px;
     613}
     614
     615/* Add a 1-pixel border to the bottom om an element */
    667616.bottomborder
    668617{
    669   border-bottom: 1px solid #A0A0A0 !important;
    670 }
    671 
    672 /* Add a 1-pixel gray border to the top of an element */
     618  border-bottom-width: 1px;
     619}
     620
     621/* Add a 1-pixel border to the top of an element */
    673622.topborder
    674623{
    675   border-top: 1px solid #A0A0A0 !important;
    676 }
    677 
    678 /* Add a 1-pixel gray border to the right of an element */
     624  border-top-width: 1px;
     625}
     626
     627/* Add a 1-pixel border to the right of an element */
    679628.rightborder
    680629{
    681   border-right: 1px solid #A0A0A0 !important;
    682 }
    683 
    684 /* Add a 1-pixel gray border to the left of an element */
     630  border-right-width: 1px;
     631}
     632
     633/* Add a 1-pixel border to the left of an element */
    685634.leftborder
    686635{
    687   border-left: 1px solid #A0A0A0 !important;
    688 }
    689 
    690 /* Fill the element with the common gray background color */
    691 .filled
    692 {
    693   background: #E8E8E8 !important;
     636  border-left-width: 1px;
     637}
     638
     639/* Fill the element with the common background color */
     640.bg-filled-100, .filled
     641{
     642  background-color: rgb(232, 232, 232);
     643}
     644
     645/* Semi-transparant versions of the above */
     646.bg-filled-50
     647{
     648  background-color: rgba(208, 208, 208, 0.5);
    694649}
    695650
     
    698653{
    699654  position: absolute;
    700   top: 0px;
    701   bottom: 0px;
    702   left: 0px;
    703   right: 0px;
     655  top: 0;
     656  bottom: 0;
     657  left: 0;
     658  right: 0;
    704659  overflow: auto;
    705660}
  • trunk/www/include/styles/popup.css

    r6257 r6603  
    3535{
    3636  position: absolute;
    37   top: 0px;
    38   left: 0px;
    39   right: 0px;
     37  top: 0;
     38  left: 0;
     39  right: 0;
    4040  /* NOTE! Total height in base units is 1.4*1.4=1.96em */
    4141  height: 1.4em;
    4242  font-size: 1.4em;
    4343  color: #F0F0F0;
    44   margin: 0px;
    4544  background-image: url('backgrounds/popup_h1.png');
    4645  background-color: #224488;
     
    5251.popup h1:before
    5352{
     53  color: #2288AA;
    5454  content: '::';
    5555  padding-left: 4px;
    5656  padding-right: 4px;
    57   color: #2288AA;
    5857}
    5958
     
    119118  position:absolute;
    120119  bottom: 1rem;
    121   height: 4rem;
     120  height: 3.5rem;
    122121  right: 0.5rem;
    123122  width: 15.5rem;
     
    140139{
    141140  position: absolute;
    142   bottom: 0px;
    143   left: 0px;
    144   right: 0px;
    145   /* NOTE! Total height is 2+0.6+0.4=3em */
    146   height: 2em;
    147   padding-top: 0.6em;
    148   padding-bottom: 0.4em;
     141  bottom: 0;
     142  left: 0;
     143  right: 0;
     144  height: 3em;
     145  padding-top: 0.5em;
    149146}
    150147
  • trunk/www/include/styles/tabcontrol.css

    r6096 r6603  
    3030/* Main tab control */
    3131.tabcontrol
    32 {
    33   border-color: #A0A0A0;
    34   border-style: solid;
    35   border-width: 0px;
    36 }
     32{}
    3733
    3834/* Main content area */
    3935.tabcontrol .tabcontents
    40 {
    41   background: #E8E8E8;
    42 }
    43 
    44 /* Add border on top or bottom depending on where tabs are */
    45 .tabsatbottom .tabcontents
    46 {
    47   border: inherit;
    48   border-width: 1px 1px 0px 1px;
    49 }
    50 
    51 .tabsontop .tabcontents
    52 {
    53   border: inherit;
    54   border-width: 0px 1px 1px 1px;
    55 }
     36{}
    5637
    5738/* Each tab should fill up the main content area */
     
    6243
    6344/* Tabs */
     45.tabcontrol table.tabscontainer, .tabcontrol .tabs > table
     46{
     47  border-collapse: separate;
     48}
     49
    6450.tabcontrol .tab
    6551{
    66   background: #E8E8E8;
    67   white-space: nowrap;
    68   cursor: pointer;
    69   border: 1px solid #A0A0A0;
     52  border-width: 1px;
    7053  padding: 2px 6px 2px 4px;
    7154}
     
    7558{
    7659  /* Decrese padding to avoid movement */
     60  border-width: 2px;
    7761  padding: 1px 5px 1px 3px;
    78   border: 2px solid #2288AA;
    79   outline: 0;
    8062}
    8163
     
    8971{
    9072  background-color: #FFFFFF;
    91 }
    92 
    93 /* Revert to default for the active tab */
    94 .tabcontrol .tab.active:hover, .tabcontrol .tab.active:focus
    95 {
    96   cursor: auto;
    97   border: 1px solid #A0A0A0;
    98   padding: 2px 6px 2px 4px;
    9973}
    10074
     
    11690{
    11791  /* Rounded corners at bottom */
    118   border-radius: 0px 0px 5px 5px;
     92  border-radius: 0 0 5px 5px;
    11993}
    12094
     
    12296.tabsatbottom .tab.active
    12397{
    124   border-top: 1px solid #E8E8E8 !important;
    125   border-bottom: 2px solid #2288AA !important;
    126   padding-bottom: 1px !important;
    127 }
    128 
    129 .tabsatbottom .tab.active.white
    130 {
    131   border-top: 1px solid #FFFFFF !important;
     98  border-top-color: transparent;
     99  border-bottom-width: 2px;
     100  padding-bottom: 1px;
     101  border-bottom-color: #2288AA;
     102}
     103
     104/* Revert to default for the active tab */
     105.tabsatbottom .tab.active:hover, .tabsatbottom .tab.active:focus
     106{
     107  cursor: auto;
     108  border-width: 1px 1px 2px 1px;
     109  padding: 2px 6px 1px 4px;
    132110}
    133111
     
    135113.tabsatbottom .tabspace
    136114{
    137   border-top: 1px solid #A0A0A0;
     115  border-top-width: 1px;
    138116}
    139117
     
    143121  min-width: 5px;
    144122  max-width: 5px;
    145   border-top: 1px solid #A0A0A0;
     123  border-top-width: 1px;
    146124}
    147125
     
    149127{
    150128  width: 99%;
    151   border-top: 1px solid #A0A0A0;
     129  border-top-width: 1px;
    152130}
    153131
     
    168146.tabsattop .tab.active
    169147{
    170   border-bottom: 1px solid #E8E8E8 !important;
    171   border-top: 2px solid #2288AA !important;
    172   padding-top: 1px !important;
     148  border-bottom-color: transparent;
     149  padding-top: 1px;
     150  border-top-width: 2px;
     151  border-top-color: #2288AA;
     152}
     153
     154/* Revert to default for the active tab */
     155.tabsattop .tab.active:hover, .tabsattop .tab.active:focus
     156{
     157  cursor: auto;
     158  border-width: 2px 1px 1px 1px;
     159  padding: 1px 6px 2px 4px;
    173160}
    174161
     
    176163.tabsattop .tabspace
    177164{
    178   border-bottom: 1px solid #A0A0A0;
     165  border-bottom-width: 1px;
    179166}
    180167
     
    184171  min-width: 5px;
    185172  max-width: 5px;
    186   border-bottom: 1px solid #A0A0A0;
     173  border-bottom-width: 1px;
    187174}
    188175
     
    190177{
    191178  width: 99%;
    192   border-bottom: 1px solid #A0A0A0;
     179  border-bottom-width: 1px;
    193180}
    194181
     
    198185{
    199186  position: absolute;
    200   top: 0px;
    201   left: 0px;
    202   right: 0px;
     187  top: 0;
     188  left: 0;
     189  right: 0;
    203190  bottom: 2em;
    204   border-width: 0px !important;
    205191  overflow: auto;
    206192}
     
    209195{
    210196  position: absolute;
    211   bottom: 0px;
     197  bottom: 0;
    212198  height: 2em;
    213199}
     
    218204  position: absolute;
    219205  top: 2em;
    220   left: 0px;
    221   right: 0px;
    222   bottom: 0px;
    223   border-width: 0px !important;
     206  left: 0;
     207  right: 0;
     208  bottom: 0;
    224209  overflow: auto;
    225210}
     
    228213{
    229214  position: absolute;
    230   top: 0px;
     215  top: 0;
    231216  height: 2em;
    232217}
  • trunk/www/include/styles/table.css

    r6388 r6603  
    3333{
    3434  width: 100%;
    35   background: #E8E8E8;
    36   padding: 0px;
    37   margin: 0px;
    3835}
    3936
     
    4138.itemlist div.panel
    4239{
    43   padding: 1px 2px 2px 2px;
    44   height: 1.6em;
    45   max-height: 1.75em;
    46   background: #E8E8E8;
     40  padding: 0 2px 0 2px;
     41 
     42  xheight: 1.6em;
     43  xmax-height: 1.75em;
     44  xbackground: #E8E8E8;
    4745}
    4846
     
    5048{
    5149  padding: 1px 4px 2px 6px;
    52   background: #E8E8E8;
     50  xbackground: #E8E8E8;
    5351}
    5452
     
    5654.itemlist div.panelgroup
    5755{
    58   background: #E8E8E8;
    59 }
    60 
    61 /* Do not display <div> as block */
    62 .itemlist div.presetselector, .itemlist div.navigator
    63 {
    64   display: inline-block;
    65   border-right: 1px solid #A0A0A0;
    66   padding-right: 4px;
    67 }
    68 
    69 /* Try to align images with text */
    70 div.presetselector img, div.navigator img
    71 {
    72   vertical-align: middle;
    73   padding-bottom: 2px;
     56  xbackground: #E8E8E8;
     57  xborder-bottom-width: 1px;
     58}
     59
     60/* Float <div>:s to left */
     61.itemlist div.panelgroup div.panel > div
     62{
     63  float: left;
     64  border-right-width: 1px;
     65  padding: 2px 4px 2px 4px;
     66}
     67
     68.itemlist div.panel div.presetselector
     69{
     70  padding-top: 1px;
    7471}
    7572
     
    9390  padding-right: 1px;
    9491  padding-left: 1px;
     92  text-decoration: none;
    9593}
    9694
    9795/* The container <div> for the data table */
    9896.itemlist div.data
    99 {
    100   border: 1px solid #A0A0A0;
    101   border-bottom: 0px;
    102 }
     97{}
    10398
    10499/* The actual table containing data */
     
    106101{
    107102  width: 100%;
    108   border-collapse: collapse;
    109   border-bottom: 1px solid #A0A0A0;
     103  border-width: 1px;
    110104}
    111105
     
    113107.itemlist div.data > table > thead
    114108{
    115   border-bottom: 1px solid #A0A0A0;
    116   background: #E8E8E8;
     109  border-bottom-width: 1px;
    117110}
    118111
     
    130123  font-weight: bold;
    131124  white-space: nowrap;
    132   border-left: 1px dotted #A0A0A0;
     125  border-left-width: 1px;
     126  border-left-style: dotted;
    133127  padding: 1px 2px 1px 2px;
    134128  vertical-align: middle;
     
    138132.itemlist div.data > table > thead > tr > th:first-child
    139133{
    140   border-left: 0px;
     134  border-left: 0;
    141135}
    142136
     
    145139.itemlist div.data th.index
    146140{
    147   border-left: 0px;
     141  border-left: 0;
    148142  text-align: right;
    149143  width: 3em;
     
    154148.itemlist div.data th.check
    155149{
    156   border-left: 0px;
     150  border-left: 0;
    157151  text-align: center;
    158152  width: 2em;
     
    164158{
    165159  width: 40px; /* Should be enough to hold two icons */
    166   border-left: 0px;
     160  border-left: 0;
     161  text-align: right;
    167162  white-space: nowrap;
    168   text-align: right;
    169163}
    170164.itemlist div.data th.icons img
    171165{
    172166  margin: 1px;
     167  vertical-align: middle;
    173168}
    174169
     
    195190.itemlist div.data > table > tbody.rows > tr
    196191{
    197   border-top: 1px dotted #A0A0A0;
    198   border-bottom: 1px dotted #A0A0A0;
     192  border-top-width: 1px;
     193  border-top-style: dotted;
     194  border-bottom-width: 1px;
     195  border-bottom-style: dotted;
    199196}
    200197
     
    204201}
    205202
    206 
    207 /* Alternating background color between rows */
    208 .itemlist div.data tr.evenrow
    209 {
    210   background: #E0E0E0;
    211 }
    212 .itemlist div.data tr.oddrow
    213 {
    214   background: #F0F0F0;
    215 }
     203.bg-evenrow
     204{
     205  background: rgba(224, 224, 224, 0.5);
     206}
     207
     208.bg-oddrow
     209{
     210  background: rgba(240, 240, 240, 0.5);
     211}
     212
    216213
    217214/* A data cell */
    218215.itemlist div.data td.cell
    219216{
    220   border-left: 1px dotted #A0A0A0;
     217  border-left-width: 1px;
     218  border-left-style: dotted;
    221219  padding: 1px 2px 1px 2px;
    222220  vertical-align: middle;
     
    226224.itemlist div.data td.cell:first-child
    227225{
    228   border-left: 0px;
     226  border-left: 0;
    229227}
    230228
     
    232230.itemlist div.data td.cell.error
    233231{
    234   border: 1px solid #A00000;
    235 }
    236 
     232  border-width: 1px;
     233  border-style: solid;
     234}
     235
     236.itemlist div.data div.panel
     237{
     238  padding: 5px;
     239}
    237240
    238241/* A table using the entire content area */
     
    240243{
    241244  position: absolute;
    242   top: 0px;
    243   bottom: 0px;
    244   left: 0px;
    245   right: 0px;
     245  top: 0;
     246  bottom: 0;
     247  left: 0;
     248  right: 0;
    246249  overflow: hidden;
    247   border: 0px;
    248   background: #FFFFFF;
    249   border-top: 1px solid #A0A0A0;
     250  border-top-width: 1px;
    250251}
    251252
     
    253254{
    254255  position: absolute;
    255   top: 0px;
    256   left: 0px;
    257   right: 0px;
    258   height: 3.75em;
     256  top: 0;
     257  left: 0;
     258  right: 0;
     259  height: 3.85em;
    259260}
    260261
     
    262263{
    263264  position: absolute;
    264   top: 3.75em;
    265   bottom: 0px;
    266   left: 0px;
    267   right: 0px;
     265  top: 3.85em;
     266  bottom: 0;
     267  left: 0;
     268  right: 0;
    268269  overflow: auto;
    269   margin-top: 1px;
    270270}
    271271
    272272.popup .fulltable
    273273{
    274   border-bottom: 1px solid #A0A0A0;
    275   background: #E8E8E8;
     274  border-top-width: 0;
     275  border-bottom-width: 1px;
     276  xbackground: #E8E8E8;
    276277}
    277278
     
    283284.fulltable div.data
    284285{
    285   border: 0px !important;
     286  xborder: 0px !important;
    286287}
    287288
    288289.fulltable div.data > table
    289290{
    290   border-bottom: 1px solid #A0A0A0 !important;
     291  border-width: 0 0 1px 0;
    291292}
    292293
  • trunk/www/include/styles/toolbar.css

    r6286 r6603  
    3131
    3232.toolbar
    33 {
    34   background: #E8E8E8;
    35   padding: 0px;
    36   padding-left: 2px;
    37   margin: 0px;
    38 }
     33{}
    3934
    4035.toolbar > table
     
    4641.toolbar > table > tbody > tr > td
    4742{
    48   border-right: 1px solid #A0A0A0;
     43  border-right-width: 1px;
    4944  height: 100%;
    5045}
     
    5247.toolbar .button
    5348{
    54   padding: 2px;
    55   cursor: pointer;
    56   white-space: nowrap;
     49  padding: 2px 4px 2px 4px;
     50}
     51
     52.toolbar .button img
     53{
     54  padding-right: 2px;
    5755}
    5856
    5957.toolbar .button:hover, .toolbar .button:focus
    6058{
    61   border: 2px solid #2288AA;
    62   padding: 0px;
     59  border-width: 2px;
     60  padding: 0 2px 0 2px;
    6361  border-radius: 4px;
    6462  outline: 0;
    65 }
    66 
    67 .toolbar .button.disabled, .toolbar .button.disabled:hover
    68 {
    69   color: #808080;
    70   pointer-events: none;
    71   cursor: default;
    72   cursor: not-allowed;
    73   border: 0px;
    74   padding: 2px;
    75 }
    76 
    77 .toolbar .button.disabled img
    78 {
    79   filter: url(filters.svg#grayscale); /* Firfox, etc */
    80   filter: gray; /* IE */
    81   opacity: 0.5;
    8263}
    8364
Note: See TracChangeset for help on using the changeset viewer.