diff options
author | Thomas Bruederli <thomas@roundcube.net> | 2014-04-28 23:00:05 +0400 |
---|---|---|
committer | Thomas Bruederli <thomas@roundcube.net> | 2014-04-28 23:00:05 +0400 |
commit | 388b384ef1796484a0931e9da002cbd7c7f56ad2 (patch) | |
tree | 2784aa9a7e0d9e3e50ec8347d5309f222c33cec4 /skins | |
parent | d5038ee5d910ffe200e5cad60ca407f615b2691d (diff) |
Define globally available styles for UI buttons with icons
Diffstat (limited to 'skins')
-rw-r--r-- | skins/larry/images/buttons.png | bin | 39327 -> 39455 bytes | |||
-rw-r--r-- | skins/larry/styles.css | 54 | ||||
-rw-r--r-- | skins/larry/templates/message.html | 8 | ||||
-rw-r--r-- | skins/larry/templates/messagepreview.html | 12 |
4 files changed, 62 insertions, 12 deletions
diff --git a/skins/larry/images/buttons.png b/skins/larry/images/buttons.png Binary files differindex e64931278..df4b3afd5 100644 --- a/skins/larry/images/buttons.png +++ b/skins/larry/images/buttons.png diff --git a/skins/larry/styles.css b/skins/larry/styles.css index 6ec1572db..660daa943 100644 --- a/skins/larry/styles.css +++ b/skins/larry/styles.css @@ -325,6 +325,7 @@ input.button:active { margin-bottom: 0; } +a.button span.icon, .pagenav a.button span.inner { display: inline-block; width: 16px; @@ -334,56 +335,77 @@ input.button:active { 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 { display: inline-block; padding: 3px 1em 0 1em; @@ -398,7 +420,7 @@ input.button:active { a.iconbutton { display: inline-block; - width: 24px; + width: 20px; height: 18px; text-decoration: none; text-indent: -5000px; @@ -412,17 +434,45 @@ a.iconbutton.disabled { } 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; diff --git a/skins/larry/templates/message.html b/skins/larry/templates/message.html index 0343004f6..a661f5720 100644 --- a/skins/larry/templates/message.html +++ b/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 /> diff --git a/skins/larry/templates/messagepreview.html b/skins/larry/templates/messagepreview.html index f69f65125..06c3216f4 100644 --- a/skins/larry/templates/messagepreview.html +++ b/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> <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> <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="<-" /> - <roundcube:button command="reply-all" type="link" class="button replyall" classSel="button replyall pressed" innerClass="inner" title="replytoallmessage" content="<<-" /> - <roundcube:button command="forward" type="link" class="button forward" classSel="button forward pressed" innerClass="inner" title="forwardmessage" content="->" /> + <roundcube:button command="reply" type="link" class="button reply" classSel="button reply pressed" innerClass="icon" title="replytomessage" content="<-" /> + <roundcube:button command="reply-all" type="link" class="button replyall" classSel="button replyall pressed" innerClass="icon" title="replytoallmessage" content="<<-" /> + <roundcube:button command="forward" type="link" class="button forward" classSel="button forward pressed" innerClass="icon" title="forwardmessage" content="->" /> <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> |