Define globally available styles for UI buttons with icons

Thomas Bruederli

2014-04-28 388b384ef1796484a0931e9da002cbd7c7f56ad2

Define globally available styles for UI buttons with icons

 skins/larry/images/buttons.png

 skins/larry/styles.css

@@ -325,6 +325,7 @@
    margin-bottom: 0;
}

a.button span.icon,
.pagenav a.button span.inner {
    display: inline-block;
    width: 16px;
@@ -334,54 +335,75 @@
    background: url(images/buttons.png) -6px -211px no-repeat;
}

a.button.prevpage span.icon,
.pagenav a.prevpage span.inner {
    background-position: -7px -226px;
}

a.button.nextpage span.icon,
.pagenav a.nextpage span.inner {
    background-position: -28px -226px;
}

a.button.lastpage span.icon,
.pagenav a.lastpage span.inner {
    background-position: -28px -211px;
}

a.button.pageup span.icon,
.pagenav a.pageup span.inner {
    background-position: -7px -241px;
}

a.button.pagedown span.icon,
.pagenav a.pagedown span.inner {
    background-position: -29px -241px;
}

a.button.reply span.icon,
.pagenav a.reply span.inner {
    background-position: -7px -256px;
}

a.button.forward span.icon,
.pagenav a.forward span.inner {
    background-position: -29px -256px;
}

a.button.replyall span.icon,
.pagenav a.replyall span.inner {
    background-position: -7px -271px;
}

a.button.extwin span.icon,
.pagenav a.extwin span.inner {
    background-position: -29px -271px;
}

a.button.changeformat.html span.icon,
.pagenav a.changeformat.html span.inner {
    background-position: -7px -1859px;
}
a.button.changeformat.html.selected span.icon,
.pagenav a.changeformat.html.selected span.inner {
    background-position: -29px -1859px;
}

a.button.changeformat.text span.icon,
.pagenav a.changeformat.text span.inner {
    background-position: -7px -1874px;
}
a.button.changeformat.text.selected span.icon,
.pagenav a.changeformat.text.selected span.inner {
    background-position: -29px -1874px;
}

a.button.add span.icon {
    background-position: -7px -2009px;
}

a.button.delete span.icon {
    background-position: -29px -2009px;
}

.pagenav .countdisplay {
@@ -398,7 +420,7 @@

a.iconbutton {
    display: inline-block;
    width: 24px;
    width: 20px;
    height: 18px;
    text-decoration: none;
    text-indent: -5000px;
@@ -412,17 +434,45 @@
}

a.iconbutton.searchoptions {
    width: 24px;
    background-position: -2px -317px;
}

a.iconbutton.reset {
    width: 24px;
    background-position: -25px -317px;
}

a.iconbutton.remove,
a.iconbutton.cancel {
    background-position: -7px -377px;
    background-position: -7px -378px;
}

a.iconbutton.delete {
    background-position: -7px -338px;
}

a.iconbutton.add {
    background-position: -7px -358px;
}

a.iconbutton.remove {
    background-position: -7px -379px;
}

a.iconbutton.cancel {
    background-position: -7px -398px;
}

a.iconbutton.edit {
    background-position: -7px -418px;
}

a.iconbutton.upload {
    background-position: -6px -438px;
}


a.iconlink {
    display: inline-block;
    color: #888;

 skins/larry/templates/message.html

@@ -57,15 +57,15 @@
</div>

<roundcube:if condition="env:optional_format=='text'" />
<div class="pagenav" id="formatcontrols">
<div id="formatcontrols">
    <span class="buttongroup">
        <roundcube:button command="change-format" prop="html" type="link" class="button first changeformat html selected" innerClass="inner" title="changeformathtml" /><roundcube:button command="change-format" prop="text" type="link" class="button last changeformat text" classSel="button last changeformat text pressed" innerClass="inner" title="changeformattext" />
        <roundcube:button command="change-format" prop="html" type="link" class="button first changeformat html selected" innerClass="icon" title="changeformathtml" /><roundcube:button command="change-format" prop="text" type="link" class="button last changeformat text" classSel="button last changeformat text pressed" innerClass="icon" title="changeformattext" />
    </span>
</div>
<roundcube:elseif condition="env:optional_format=='html'" />
<div class="pagenav" id="formatcontrols">
<div id="formatcontrols">
    <span class="buttongroup">
        <roundcube:button command="change-format" prop="html" type="link" class="button first changeformat html" classSel="button first changeformat html pressed" innerClass="inner" title="changeformathtml" /><roundcube:button command="change-format" prop="text" type="link" class="button last changeformat text selected" innerClass="inner" title="changeformattext" />
        <roundcube:button command="change-format" prop="html" type="link" class="button first changeformat html" classSel="button first changeformat html pressed" innerClass="icon" title="changeformathtml" /><roundcube:button command="change-format" prop="text" type="link" class="button last changeformat text selected" innerClass="icon" title="changeformattext" />
    </span>
</div>
<roundcube:endif />

 skins/larry/templates/messagepreview.html

@@ -32,22 +32,22 @@
<div id="countcontrols" class="pagenav">
<roundcube:if condition="env:optional_format=='text'" />
    <span class="buttongroup">
        <roundcube:button command="change-format" prop="html" type="link" class="button first changeformat html selected" innerClass="inner" title="changeformathtml" content="HTML" /><roundcube:button command="change-format" prop="text" type="link" class="button last changeformat text" classSel="button changeformat text pressed" innerClass="inner" title="changeformattext" content="Text" />
        <roundcube:button command="change-format" prop="html" type="link" class="button first changeformat html selected" innerClass="icon" title="changeformathtml" content="HTML" /><roundcube:button command="change-format" prop="text" type="link" class="button last changeformat text" classSel="button changeformat text pressed" innerClass="icon" title="changeformattext" content="Text" />
    </span>
    &nbsp;
<roundcube:elseif condition="env:optional_format=='html'" />
    <span class="buttongroup">
        <roundcube:button command="change-format" prop="html" type="link" class="button first changeformat html" classSel="button changeformat html pressed" innerClass="inner" title="changeformathtml" content="HTML" /><roundcube:button command="change-format" prop="text" type="link" class="button last changeformat text selected" innerClass="inner" title="changeformattext" content="Text" />
        <roundcube:button command="change-format" prop="html" type="link" class="button first changeformat html" classSel="button changeformat html pressed" innerClass="icon" title="changeformathtml" content="HTML" /><roundcube:button command="change-format" prop="text" type="link" class="button last changeformat text selected" innerClass="icon" title="changeformattext" content="Text" />
    </span>
    &nbsp;
<roundcube:endif />
<roundcube:if condition="env:mailbox != config:drafts_mbox">
    <roundcube:button command="reply" type="link" class="button reply" classSel="button reply pressed" innerClass="inner" title="replytomessage" content="&lt;-" />
    <roundcube:button command="reply-all" type="link" class="button replyall" classSel="button replyall pressed" innerClass="inner" title="replytoallmessage" content="&lt;&lt;-" />
    <roundcube:button command="forward" type="link" class="button forward" classSel="button forward pressed" innerClass="inner" title="forwardmessage" content="-&gt;" />
    <roundcube:button command="reply" type="link" class="button reply" classSel="button reply pressed" innerClass="icon" title="replytomessage" content="&lt;-" />
    <roundcube:button command="reply-all" type="link" class="button replyall" classSel="button replyall pressed" innerClass="icon" title="replytoallmessage" content="&lt;&lt;-" />
    <roundcube:button command="forward" type="link" class="button forward" classSel="button forward pressed" innerClass="icon" title="forwardmessage" content="-&gt;" />
    &nbsp;
<roundcube:endif />
    <roundcube:button command="extwin" type="link" class="button extwin" classSel="button extwin pressed" innerClass="inner" title="openinextwin" content="[]" />
    <roundcube:button command="extwin" type="link" class="button extwin" classSel="button extwin pressed" innerClass="icon" title="openinextwin" content="[]" />
</div>

</div>