banananetwork
/
roundcubemail
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Define globally available styles for UI buttons with icons

Browse Source
pull/164/merge
Thomas Bruederli 11 years ago
parent d5038ee5d9
commit 388b384ef1
4 changed files with 62 additions and 12 deletions
Show Stats Download Patch File Download Diff File

BIN
skins/larry/images/buttons.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 38 KiB

After

Width:  |  Height:  |  Size: 38 KiB

54
skins/larry/styles.css
Unescape Escape View File

@ -325,6 +325,7 @@ input.button:active {
margin-bottom: 0; margin-bottom: 0;
} }
a.button span.icon,
.pagenav a.button span.inner { .pagenav a.button span.inner {
display: inline-block; display: inline-block;
width: 16px; width: 16px;
@ -334,56 +335,77 @@ input.button:active {
background: url(images/buttons.png) -6px -211px no-repeat; background: url(images/buttons.png) -6px -211px no-repeat;
} }
a.button.prevpage span.icon,
.pagenav a.prevpage span.inner { .pagenav a.prevpage span.inner {
background-position: -7px -226px; background-position: -7px -226px;
} }
a.button.nextpage span.icon,
.pagenav a.nextpage span.inner { .pagenav a.nextpage span.inner {
background-position: -28px -226px; background-position: -28px -226px;
} }
a.button.lastpage span.icon,
.pagenav a.lastpage span.inner { .pagenav a.lastpage span.inner {
background-position: -28px -211px; background-position: -28px -211px;
} }
a.button.pageup span.icon,
.pagenav a.pageup span.inner { .pagenav a.pageup span.inner {
background-position: -7px -241px; background-position: -7px -241px;
} }
a.button.pagedown span.icon,
.pagenav a.pagedown span.inner { .pagenav a.pagedown span.inner {
background-position: -29px -241px; background-position: -29px -241px;
} }
a.button.reply span.icon,
.pagenav a.reply span.inner { .pagenav a.reply span.inner {
background-position: -7px -256px; background-position: -7px -256px;
} }
a.button.forward span.icon,
.pagenav a.forward span.inner { .pagenav a.forward span.inner {
background-position: -29px -256px; background-position: -29px -256px;
} }
a.button.replyall span.icon,
.pagenav a.replyall span.inner { .pagenav a.replyall span.inner {
background-position: -7px -271px; background-position: -7px -271px;
} }
a.button.extwin span.icon,
.pagenav a.extwin span.inner { .pagenav a.extwin span.inner {
background-position: -29px -271px; background-position: -29px -271px;
} }
a.button.changeformat.html span.icon,
.pagenav a.changeformat.html span.inner { .pagenav a.changeformat.html span.inner {
background-position: -7px -1859px; background-position: -7px -1859px;
} }
a.button.changeformat.html.selected span.icon,
.pagenav a.changeformat.html.selected span.inner { .pagenav a.changeformat.html.selected span.inner {
background-position: -29px -1859px; background-position: -29px -1859px;
} }
a.button.changeformat.text span.icon,
.pagenav a.changeformat.text span.inner { .pagenav a.changeformat.text span.inner {
background-position: -7px -1874px; background-position: -7px -1874px;
} }
a.button.changeformat.text.selected span.icon,
.pagenav a.changeformat.text.selected span.inner { .pagenav a.changeformat.text.selected span.inner {
background-position: -29px -1874px; background-position: -29px -1874px;
} }
a.button.add span.icon {
background-position: -7px -2009px;
}
a.button.delete span.icon {
background-position: -29px -2009px;
}
.pagenav .countdisplay { .pagenav .countdisplay {
display: inline-block; display: inline-block;
padding: 3px 1em 0 1em; padding: 3px 1em 0 1em;
@ -398,7 +420,7 @@ input.button:active {
a.iconbutton { a.iconbutton {
display: inline-block; display: inline-block;
width: 24px; width: 20px;
height: 18px; height: 18px;
text-decoration: none; text-decoration: none;
text-indent: -5000px; text-indent: -5000px;
@ -412,17 +434,45 @@ a.iconbutton.disabled {
} }
a.iconbutton.searchoptions { a.iconbutton.searchoptions {
width: 24px;
background-position: -2px -317px; background-position: -2px -317px;
} }
a.iconbutton.reset { a.iconbutton.reset {
width: 24px;
background-position: -25px -317px; background-position: -25px -317px;
} }
a.iconbutton.remove,
a.iconbutton.cancel { 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 { a.iconlink {
display: inline-block; display: inline-block;
color: #888; color: #888;

8
skins/larry/templates/message.html
Unescape Escape View File

@ -57,15 +57,15 @@
</div> </div>
<roundcube:if condition="env:optional_format=='text'" /> <roundcube:if condition="env:optional_format=='text'" />
<div class="pagenav" id="formatcontrols"> <div id="formatcontrols">
<span class="buttongroup"> <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> </span>
</div> </div>
<roundcube:elseif condition="env:optional_format=='html'" /> <roundcube:elseif condition="env:optional_format=='html'" />
<div class="pagenav" id="formatcontrols"> <div id="formatcontrols">
<span class="buttongroup"> <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> </span>
</div> </div>
<roundcube:endif /> <roundcube:endif />

12
skins/larry/templates/messagepreview.html
Unescape Escape View File

@ -32,22 +32,22 @@
<div id="countcontrols" class="pagenav"> <div id="countcontrols" class="pagenav">
<roundcube:if condition="env:optional_format=='text'" /> <roundcube:if condition="env:optional_format=='text'" />
<span class="buttongroup"> <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> </span>
&nbsp; &nbsp;
<roundcube:elseif condition="env:optional_format=='html'" /> <roundcube:elseif condition="env:optional_format=='html'" />
<span class="buttongroup"> <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> </span>
&nbsp; &nbsp;
<roundcube:endif /> <roundcube:endif />
<roundcube:if condition="env:mailbox != config:drafts_mbox"> <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" 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="inner" title="replytoallmessage" content="&lt;&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="inner" title="forwardmessage" content="-&gt;" /> <roundcube:button command="forward" type="link" class="button forward" classSel="button forward pressed" innerClass="icon" title="forwardmessage" content="-&gt;" />
&nbsp; &nbsp;
<roundcube:endif /> <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>
</div> </div>

Write Preview
Loading…
Cancel
Save