mirrors/etherpad-lite
1
0
Fork 0
mirror of https://github.com/ether/etherpad-lite.git synced 2025-04-20 23:46:14 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

Styling generalization - use classes instead of id:s where applicable

Browse source
This commit is contained in:
Egil Moeller 2012-03-28 19:20:07 +02:00
parent 6120a0b7aa
commit b74447aa3c
2 changed files with 30 additions and 28 deletions
Download patch file Download diff file Expand all files Collapse all files

52
src/static/css/pad.css
View file

@ -24,7 +24,7 @@ a img
} }
/* menu */ /* menu */
#editbar ul .toolbar ul
{ {
position: relative; position: relative;
list-style: none; list-style: none;
@ -35,18 +35,20 @@ a img
} }
#editbar .toolbar
{ {
background: #f7f7f7; background: #f7f7f7;
background: linear-gradient(#f7f7f7, #f1f1f1 80%); background: linear-gradient(#f7f7f7, #f1f1f1 80%);
border-bottom: 1px solid #ccc; border-bottom: 1px solid #ccc;
height: 32px;
overflow: hidden; overflow: hidden;
padding-top: 3px; padding-top: 3px;
width: 100%; position: absolute;
left: 0;
right: 0;
height: 32px;
} }
#editbar ul li .toolbar ul li
{ {
background: #fff; background: #fff;
background: linear-gradient(#fff, #f0f0f0); background: linear-gradient(#fff, #f0f0f0);
@ -61,52 +63,52 @@ a img
width: 18px; width: 18px;
} }
#editbar ul li a .toolbar ul li a
{ {
text-decoration: none; text-decoration: none;
color: #ccc; color: #ccc;
position: absolute; position: absolute;
} }
#editbar ul li a span .toolbar ul li a span
{ {
position: relative; position: relative;
top:-2px top:-2px
} }
#editbar ul li:hover { .toolbar ul li:hover {
background: #fff; background: #fff;
background: linear-gradient(#f4f4f4, #e4e4e4); background: linear-gradient(#f4f4f4, #e4e4e4);
} }
#editbar ul li:active { .toolbar ul li:active {
background: #eee; background: #eee;
background: linear-gradient(#ddd, #fff); background: linear-gradient(#ddd, #fff);
box-shadow: 0 0 8px rgba(0,0,0,.1) inset; box-shadow: 0 0 8px rgba(0,0,0,.1) inset;
} }
#editbar ul li.separator .toolbar ul li.separator
{ {
border: inherit; border: inherit;
background: inherit; background: inherit;
visibility:hidden; visibility:hidden;
width: 0px; width: 0px;
} }
#editbar ul li a .toolbar ul li a
{ {
display: block; display: block;
} }
#editbar ul li a img .toolbar ul li a img
{ {
padding: 1px; padding: 1px;
} }
#editbar ul .toolbar ul
{ {
float: left; float: left;
} }
#editbar ul#menu_right .toolbar ul.menu_right
{ {
float: right; float: right;
} }
@ -320,7 +322,7 @@ a#hidetopmsg { position: absolute; right: 5px; bottom: 5px; }
z-index: 10; z-index: 10;
} }
#editbarsavetable .toolbarsavetable
{ {
position:absolute; position:absolute;
top: 6px; top: 6px;
@ -328,7 +330,7 @@ a#hidetopmsg { position: absolute; right: 5px; bottom: 5px; }
height: 24px; height: 24px;
} }
#editbarsavetable td, #editbartable td .toolbarsavetable td, .toolbartable td
{ {
white-space: nowrap; white-space: nowrap;
} }
@ -688,14 +690,14 @@ a#topbarmaximize {
background: url(static/img/maximize_maximized.png); background: url(static/img/maximize_maximized.png);
} }
#editbarinner h1 { .toolbarinner h1 {
line-height: 29px; line-height: 29px;
font-size: 16px; font-size: 16px;
padding-left: 6pt; padding-left: 6pt;
margin-top: 0; margin-top: 0;
} }
#editbarinner h1 a { .toolbarinner h1 a {
font-size: 12px; font-size: 12px;
} }
@ -1173,13 +1175,13 @@ input[type=checkbox] {
} }
@media screen and (max-width: 600px) { @media screen and (max-width: 600px) {
#editbar ul li { .toolbar ul li {
padding: 4px 1px; padding: 4px 1px;
} }
} }
@media only screen and (min-device-width: 320px) and (max-device-width: 720px) { @media only screen and (min-device-width: 320px) and (max-device-width: 720px) {
#editbar ul li { .toolbar ul li {
padding: 4px 3px; padding: 4px 3px;
} }
#users { #users {
@ -1194,7 +1196,7 @@ input[type=checkbox] {
#editorcontainer { #editorcontainer {
margin-bottom: 33px; margin-bottom: 33px;
} }
#editbar ul#menu_right { .toolbar ul.menu_right {
background: #f7f7f7; background: #f7f7f7;
background: linear-gradient(#f7f7f7, #f1f1f1 80%); background: linear-gradient(#f7f7f7, #f1f1f1 80%);
width: 100%; width: 100%;
@ -1204,7 +1206,7 @@ input[type=checkbox] {
bottom: 0; bottom: 0;
border-top: 1px solid #ccc; border-top: 1px solid #ccc;
} }
#editbar ul#menu_right li:last-child { .toolbar ul.menu_right li:last-child {
height: 24px; height: 24px;
border-radius: 0; border-radius: 0;
margin-top: 0; margin-top: 0;
@ -1226,7 +1228,7 @@ input[type=checkbox] {
border-top-right-radius: 0; border-top-right-radius: 0;
border-right: none; border-right: none;
} }
#editbar ul li a span { .toolbar ul li a span {
top: -3px; top: -3px;
} }
#usericonback { #usericonback {
@ -1235,10 +1237,10 @@ input[type=checkbox] {
#qrcode { #qrcode {
display: none; display: none;
} }
#editbar ul#menu_right li:not(:last-child) { .toolbar ul.menu_right li:not(:last-child) {
display: block; display: block;
} }
#editbar ul#menu_right > li { .toolbar ul.menu_right > li {
background: none; background: none;
border: none; border: none;
margin-top: 4px; margin-top: 4px;

6
src/templates/pad.html
View file

@ -18,8 +18,8 @@
<!-- head and body had been removed intentionally --> <!-- head and body had been removed intentionally -->
<div id="editbar"> <div id="editbar" class="toolbar">
<ul id="menu_left"> <ul class="menu_left">
<% e.begin_block("editbarMenuLeft"); %> <% e.begin_block("editbarMenuLeft"); %>
<li id="bold" onClick="window.pad&amp;&amp;pad.editbarClick('bold');return false"> <li id="bold" onClick="window.pad&amp;&amp;pad.editbarClick('bold');return false">
<a class="buttonicon buttonicon-bold" title="Bold (ctrl-B)"></a> <a class="buttonicon buttonicon-bold" title="Bold (ctrl-B)"></a>
@ -59,7 +59,7 @@
</li> </li>
<% e.end_block(); %> <% e.end_block(); %>
</ul> </ul>
<ul id="menu_right"> <ul class="menu_right">
<% e.begin_block("editbarMenuRight"); %> <% e.begin_block("editbarMenuRight"); %>
<li id="settingslink" onClick="window.pad&amp;&amp;pad.editbarClick('settings');return false;"> <li id="settingslink" onClick="window.pad&amp;&amp;pad.editbarClick('settings');return false;">
<a class="buttonicon buttonicon-settings" id="settingslink" title="Settings of this pad"></a> <a class="buttonicon buttonicon-settings" id="settingslink" title="Settings of this pad"></a>