Define a global style for tree lists

Thomas Bruederli

2013-01-31 b7ea947844b97fe4cb0e2bd37b84d79fff8014f4

Define a global style for tree lists

 skins/classic/common.css

@@ -622,6 +622,27 @@
  background-color: #929292;
}

ul.treelist li div.treetoggle
{
  position: absolute;
  left: 8px !important;
  left: -16px;
  top: 1px;
  width: 14px;
  height: 16px;
  cursor: pointer;
}

ul.treelist li div.collapsed
{
  background: url(images/icons/collapsed.png) bottom right no-repeat;
}

ul.treelist li div.expanded
{
  background: url(images/icons/expanded.png) bottom right no-repeat;
}


/***** mac-style quicksearch field *****/

@@ -666,6 +687,7 @@
  font-size: 11px;
  padding: 0px;
  border: none;
  outline: none;
}

/***** roundcube webmail pre-defined classes *****/

 skins/classic/mail.css

@@ -393,32 +393,6 @@
  border-bottom: none;
}

#mailboxlist li div
{
  position: absolute;
  left: 8px !important;
  left: -16px;
  top: 1px;
  width: 14px;
  height: 16px;
}

#mailboxlist li div.collapsed,
#mailboxlist li div.expanded
{
  cursor: pointer;
}

#mailboxlist li div.collapsed
{
  background: url(images/icons/collapsed.png) bottom right no-repeat;
}

#mailboxlist li div.expanded
{
  background: url(images/icons/expanded.png) bottom right no-repeat;
}

#mailboxlist li.inbox
{
  background-position: 5px -18px;

 skins/classic/templates/mail.html

@@ -28,7 +28,7 @@
<div id="mailboxlist-container">
<div id="mailboxlist-title" class="boxtitle"><roundcube:label name="mailboxlist" /></div>
<div id="mailboxlist-content"  class="boxlistcontent">
<roundcube:object name="mailboxlist" id="mailboxlist" folder_filter="mail" />
<roundcube:object name="mailboxlist" id="mailboxlist" class="treelist" folder_filter="mail" />
</div>
<div id="mailboxlist-footer" class="boxfooter">
  <roundcube:button name="mailboxmenulink" id="mailboxmenulink" type="link" title="folderactions" class="button groupactions" onclick="rcmail_ui.show_popup('mailboxmenu');return false" content=" " />

 skins/larry/mail.css

@@ -141,7 +141,7 @@
    background-position: 6px 2px;
}

#mailboxlist li:first-child {
#mailboxlist > li:first-child {
    border-radius: 4px 4px 0 0;
    border-top: 0;
}
@@ -247,32 +247,12 @@
    border-bottom: 0;
}

#mailboxlist li.mailbox div.collapsed,
#mailboxlist li.mailbox div.expanded {
    position: absolute;
#mailboxlist li.mailbox div.treetoggle {
    top: 13px;
    left: 19px;
    width: 13px;
    height: 13px;
    background: url(images/listicons.png) -3px -144px no-repeat;
    cursor: pointer;
}

#mailboxlist li.mailbox div.expanded {
    background-position: -3px -168px;
}

#mailboxlist li.mailbox.selected > div.collapsed {
    background-position: -23px -144px;
}

#mailboxlist li.mailbox.selected > div.expanded {
    background-position: -23px -168px;
}


#mailboxlist li.mailbox ul li div.collapsed,
#mailboxlist li.mailbox ul li div.expanded {
#mailboxlist li.mailbox ul li div.treetoggle {
    left: 43px;
    top: 14px;
}

 skins/larry/styles.css

@@ -986,6 +986,10 @@
    background-color: #d9ecf4;
}

ul.listing li ul {
    border-top: 1px solid #bbd3da;
}

ul.listing li.droptarget,
table.listing tr.droptarget td {
    background-color: #e8e798;
@@ -1002,6 +1006,28 @@
    vertical-align: top;
}

ul.treelist li div.treetoggle {
    position: absolute;
    top: 13px;
    left: 19px;
    width: 13px;
    height: 13px;
    background: url(images/listicons.png) -3px -144px no-repeat;
    cursor: pointer;
}

ul.treelist li div.treetoggle.expanded {
    background-position: -3px -168px;
}

ul.treelist li.selected > div.collapsed {
    background-position: -23px -144px;
}

ul.treelist li.selected > div.expanded {
    background-position: -23px -168px;
}

.listbox .boxfooter {
    position: absolute;
    bottom: 0;

 skins/larry/templates/mail.html

@@ -30,7 +30,7 @@
<div id="folderlist-header"></div>
<div id="mailboxcontainer" class="uibox listbox">
<div id="folderlist-content" class="scroller withfooter">
<roundcube:object name="mailboxlist" id="mailboxlist" class="listing" folder_filter="mail" unreadwrap="%s" />
<roundcube:object name="mailboxlist" id="mailboxlist" class="treelist listing" folder_filter="mail" unreadwrap="%s" />
</div>
<div id="folderlist-footer" class="boxfooter">
    <roundcube:button name="mailboxmenulink" id="mailboxmenulink" type="link" title="folderactions" class="listbutton groupactions" onclick="UI.show_popup('mailboxmenu');return false" innerClass="inner" content="&#9881;" />