Shift button styling specifics into CSS.

This commit is contained in:
Chad Weider 2012-01-21 23:12:13 -08:00
parent e68643b67e
commit bdf0f203f9
3 changed files with 66 additions and 18 deletions

View File

@ -1035,6 +1035,54 @@ background-repeat: no-repeat;
margin-left: 1px; margin-left: 1px;
margin-top: 1px; margin-top: 1px;
} }
.buttonicon-bold {
background-position: 0px -116px;
}
.buttonicon-italic {
background-position: 0px 0px;
}
.buttonicon-underline {
background-position: 0px -236px;
}
.buttonicon-strikethrough {
background-position: 0px -200px;
}
.buttonicon-insertorderedlist {
background-position: 0px -477px
}
.buttonicon-insertunorderedlist {
background-position: 0px -34px;
}
.buttonicon-indent {
background-position: 0px -52px;
}
.buttonicon-outdent {
background-position: 0px -134px;
}
.buttonicon-undo {
background-position: 0px -255px;
}
.buttonicon-redo {
background-position :0px -166px;
}
.buttonicon-clearauthorship {
background-position: 0px -86px;
}
.buttonicon-import_export {
background-position: 0px -68px;
}
.buttonicon-embed {
background-position: 0px -18px;
}
.buttonicon-history {
background-position: 0px -218px;
}
.buttonicon-chat {
background-position: 0px -102px;
}
.buttonicon-showusers {
background-position: 0px -183px;
}
#usericon #usericon
{ {

View File

@ -23,88 +23,88 @@
<ul id="menu_left"> <ul id="menu_left">
<li onClick="window.pad&amp;&amp;pad.editbarClick('bold');return false" > <li onClick="window.pad&amp;&amp;pad.editbarClick('bold');return false" >
<a title="Bold (ctrl-B)"> <a title="Bold (ctrl-B)">
<div class="buttonicon" style="background-position:0px -116px"></div> <div class="buttonicon buttonicon-bold"></div>
</a> </a>
</li> </li>
<li onClick="window.pad&amp;&amp;pad.editbarClick('italic'); return false;" > <li onClick="window.pad&amp;&amp;pad.editbarClick('italic'); return false;" >
<a title="Italics (ctrl-I)"> <a title="Italics (ctrl-I)">
<div class="buttonicon" style="background-position:0px 0px"></div> <div class="buttonicon buttonicon-italic"></div>
</a> </a>
</li> </li>
<li onClick="window.pad&amp;&amp;pad.editbarClick('underline');return false;" > <li onClick="window.pad&amp;&amp;pad.editbarClick('underline');return false;" >
<a title="Underline (ctrl-U)"> <a title="Underline (ctrl-U)">
<div class="buttonicon" style="background-position:0px -236px;margin-top:1px;"></div> <div class="buttonicon buttonicon-underline" style="margin-top:1px;"></div>
</a> </a>
</li> </li>
<li onClick="window.pad&amp;&amp;pad.editbarClick('strikethrough');return false;" > <li onClick="window.pad&amp;&amp;pad.editbarClick('strikethrough');return false;" >
<a title="Strikethrough"> <a title="Strikethrough">
<div class="buttonicon" style="background-position:0px -200px"></div> <div class="buttonicon buttonicon-strikethrough"></div>
</a> </a>
</li> </li>
<li class="separator"></li> <li class="separator"></li>
<li onClick="window.pad&amp;&amp;pad.editbarClick('insertorderedlist');return false;" > <li onClick="window.pad&amp;&amp;pad.editbarClick('insertorderedlist');return false;" >
<a title="Toggle Ordered List"> <a title="Toggle Ordered List">
<div class="buttonicon" style="background-position:0px -477px"></div> <div class="buttonicon buttonicon-insertorderedlist"></div>
</a> </a>
</li> </li>
<li onClick="window.pad&amp;&amp;pad.editbarClick('insertunorderedlist');return false;" > <li onClick="window.pad&amp;&amp;pad.editbarClick('insertunorderedlist');return false;" >
<a title="Toggle Bullet List"> <a title="Toggle Bullet List">
<div class="buttonicon" style="background-position:0px -34px"></div> <div class="buttonicon buttonicon-insertunorderedlist"></div>
</a> </a>
</li> </li>
<li onClick="window.pad&amp;&amp;pad.editbarClick('indent');return false;" > <li onClick="window.pad&amp;&amp;pad.editbarClick('indent');return false;" >
<a title="Indent"> <a title="Indent">
<div class="buttonicon" style="background-position:0px -52px"></div> <div class="buttonicon buttonicon-indent"></div>
</a> </a>
</li> </li>
<li onClick="window.pad&amp;&amp;pad.editbarClick('outdent');return false;" > <li onClick="window.pad&amp;&amp;pad.editbarClick('outdent');return false;" >
<a title="Unindent"> <a title="Unindent">
<div class="buttonicon" style="background-position:0px -134px"></div> <div class="buttonicon buttonicon-outdent"></div>
</a> </a>
</li> </li>
<li class="separator"></li> <li class="separator"></li>
<li onClick="window.pad&amp;&amp;pad.editbarClick('undo');return false;" > <li onClick="window.pad&amp;&amp;pad.editbarClick('undo');return false;" >
<a title="Undo (ctrl-Z)"> <a title="Undo (ctrl-Z)">
<div class="buttonicon" style="background-position:0px -255px"></div> <div class="buttonicon buttonicon-undo"></div>
</a> </a>
</li> </li>
<li onClick="window.pad&amp;&amp;pad.editbarClick('redo');return false;" > <li onClick="window.pad&amp;&amp;pad.editbarClick('redo');return false;" >
<a title="Redo (ctrl-Y)"> <a title="Redo (ctrl-Y)">
<div class="buttonicon" style="background-position:0px -166px"></div> <div class="buttonicon buttonicon-redo"></div>
</a> </a>
</li> </li>
<li class="separator"></li> <li class="separator"></li>
<li id="clearAuthorship" onClick="window.pad&amp;&amp;pad.editbarClick('clearauthorship');return false;" > <li id="clearAuthorship" onClick="window.pad&amp;&amp;pad.editbarClick('clearauthorship');return false;" >
<a title="Clear Authorship Colors"> <a title="Clear Authorship Colors">
<div class="buttonicon" style="background-position:0px -86px"></div> <div class="buttonicon buttonicon-clearauthorship"></div>
</a> </a>
</li> </li>
</ul> </ul>
<ul id="menu_right"> <ul id="menu_right">
<li onClick="window.pad&amp;&amp;pad.editbarClick('settings');return false;"> <li onClick="window.pad&amp;&amp;pad.editbarClick('settings');return false;">
<a id="settingslink" title="Settings of this pad"> <a id="settingslink" title="Settings of this pad">
<div class="buttonicon" style="background-position:0px -436px"></div> <div class="buttonicon buttonicon-settings"></div>
</a> </a>
</li> </li>
<li onClick="window.pad&amp;&amp;pad.editbarClick('import_export');return false;"> <li onClick="window.pad&amp;&amp;pad.editbarClick('import_export');return false;">
<a id="exportlink" title="Import/Export from/to different document formats"> <a id="exportlink" title="Import/Export from/to different document formats">
<div class="buttonicon" style="background-position:0px -68px"></div> <div class="buttonicon buttonicon-import_export"></div>
</a> </a>
</li> </li>
<li onClick="window.pad&amp;&amp;pad.editbarClick('embed');return false;" > <li onClick="window.pad&amp;&amp;pad.editbarClick('embed');return false;" >
<a id="embedlink" title="Share and Embed this pad"> <a id="embedlink" title="Share and Embed this pad">
<div class="buttonicon" style="background-position:0px -18px"></div> <div class="buttonicon buttonicon-embed"></div>
</a> </a>
</li> </li>
<li class="separator"></li> <li class="separator"></li>
<li id="timesliderlink" onClick="document.location = document.location.pathname+ '/timeslider'"> <li id="timesliderlink" onClick="document.location = document.location.pathname+ '/timeslider'">
<a title="Show the history of this pad"> <a title="Show the history of this pad">
<div class="buttonicon" style="background-position:0px -218px"></div> <div class="buttonicon buttonicon-history"></div>
</a> </a>
</li> </li>
<li id="usericon" onClick="window.pad&amp;&amp;pad.editbarClick('showusers');return false;" > <li id="usericon" onClick="window.pad&amp;&amp;pad.editbarClick('showusers');return false;" >
<a title="Show connected users"> <a title="Show connected users">
<div class="buttonicon" id="usericonback" style="background-position:0px -183px;display:inline-block;"></div> <div class="buttonicon buttonicon-showusers" id="usericonback" style="display:inline-block;"></div>
<span id="online_count">1</span> <span id="online_count">1</span>
</a> </a>
</li> </li>
@ -228,7 +228,7 @@
<div id="chaticon"> <div id="chaticon">
<a onClick="chat.show();return false;" title="Open the chat for this pad"> <a onClick="chat.show();return false;" title="Open the chat for this pad">
<span id="chatlabel">Chat</span> <span id="chatlabel">Chat</span>
<div class="buttonicon" style="background-position:0px -102px;display:inline-block;"></div> <div class="buttonicon buttonicon-chat" style="display:inline-block;"></div>
</a> </a>
<span id="chatcounter">0</span> <span id="chatcounter">0</span>
</div> </div>

View File

@ -293,7 +293,7 @@
<ul> <ul>
<li onClick="window.padeditbar.toolbarClick('import_export');return false;"> <li onClick="window.padeditbar.toolbarClick('import_export');return false;">
<a id="exportlink" title="Export to different document formats"> <a id="exportlink" title="Export to different document formats">
<div class="buttonicon" style="background-position:0px -68px"></div> <div class="buttonicon buttonicon-import_export"></div>
</a> </a>
</li> </li>
</ul> </ul>