libre-service.eu/pad.libre-service.eu-etherpad
libre-service.eu/pad.libre-service.eu-etherpad
1
0
Fork 0
mirror of https://github.com/ether/etherpad-lite.git synced 2025-02-01 03:12:42 +01:00
Code Issues Projects Releases Wiki Activity

Add non-floating popups

Browse source
This commit is contained in:
0ip 2012-05-20 15:59:51 +02:00
parent 19cf43d0a3
commit caa56dd32a
2 changed files with 53 additions and 69 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -20,18 +20,17 @@ iframe {
position: absolute position: absolute
} }
#users { #users {
position: absolute; background: #f7f7f7;
z-index: 500; background: -webkit-linear-gradient( #F7F7F7,#EEE);
background-color: #000; background: -moz-linear-gradient( #F7F7F7,#EEE);
background-color: rgba(0,0,0,0.7); background: -ms-linear-gradient( #F7F7F7,#EEE);
background: -o-linear-gradient( #F7F7F7,#EEE);
background: linear-gradient( #F7F7F7,#EEE);
width: 160px; width: 160px;
right: 20px;
top: 40px;
color: #fff; color: #fff;
padding: 5px; padding: 5px;
-webkit-border-radius: 6px; border-radius: 0 0 6px 6px;
-moz-border-radius: 6px; border: 1px solid #ccc;
border-radius: 6px;
} }
#otherusers { #otherusers {
max-height: 400px; max-height: 400px;
@ -156,8 +155,14 @@ a img {
border: 1px solid #ccc; border: 1px solid #ccc;
outline: none; outline: none;
} }
#users { #usericon a {
display: none min-width: 30px;
}
#usericon a #online_count {
color: #777;
font-size: 10px;
position: relative;
top: 2px;
} }
#editorcontainer { #editorcontainer {
position: absolute; position: absolute;
@ -236,10 +241,10 @@ a img {
top: 0px; top: 0px;
z-index: 101; z-index: 101;
display: none; display: none;
-webkit-border-radius: 5px; border-radius: 0 0 6px 6px;
-moz-border-radius: 5px; background: #f7f7f7;
border-radius: 5px; border: 1px solid #ccc;
background: rgba(0, 0, 0, 0.7); border-top: 0;
padding-left: 10px; padding-left: 10px;
padding-top: 10px; padding-top: 10px;
} }
@ -333,6 +338,10 @@ a img {
#myusernameform .editempty { #myusernameform .editempty {
color: #333 color: #333
} }
#myswatchbox, #myusernameedit, #otheruserstable .swatch {
border: 1px solid #ccc !important;
color: #333;
}
table#otheruserstable { table#otheruserstable {
display: none display: none
} }
@ -349,7 +358,7 @@ table#otheruserstable {
height: 26px; height: 26px;
vertical-align: middle; vertical-align: middle;
padding: 0 2px; padding: 0 2px;
color: #fff; color: #333;
} }
#otheruserstable .swatch { #otheruserstable .swatch {
border: 1px solid #000; border: 1px solid #000;
@ -646,8 +655,8 @@ table#otheruserstable {
text-decoration: none text-decoration: none
} }
#chatcounter { #chatcounter {
color: #555; color: #777;
font-size: 9px; font-size: 10px;
vertical-align: middle; vertical-align: middle;
} }
#titlebar { #titlebar {
@ -680,11 +689,11 @@ table#otheruserstable {
margin-top: 2px; margin-top: 2px;
} }
.exporttype { .exporttype {
margin-top: 2px; margin-top: 4px;
background-repeat: no-repeat; background-repeat: no-repeat;
padding-left: 25px; padding-left: 25px;
background-image: url("../../static/img/etherpad_lite_icons.png"); background-image: url("../../static/img/etherpad_lite_icons.png");
color: #fff; color: #333;
text-decoration: none; text-decoration: none;
} }
#exporthtml { #exporthtml {
@ -837,22 +846,19 @@ input[type=checkbox] {
.popup { .popup {
font-size: 14px; font-size: 14px;
width: 450px; width: 450px;
z-index: 500;
padding: 10px; padding: 10px;
-webkit-border-radius: 6px; border-radius: 0 0 6px 6px;
-moz-border-radius: 6px; border: 1px solid #ccc;
border-radius: 6px; background: #f7f7f7;
background: #222; background: -webkit-linear-gradient(#F7F7F7, #EEE);
background: rgba(0,0,0,.7); background: -moz-linear-gradient(#F7F7F7, #EEE);
background: -webkit-linear-gradient(rgba(0,0,0,.6), rgba(0,0,0,.7) 35px, rgba(0,0,0,.6)); background: -ms-linear-gradient(#F7F7F7, #EEE);
background: -moz-linear-gradient(rgba(0,0,0,.6), rgba(0,0,0,.7) 35px, rgba(0,0,0,.6)); background: -o-linear-gradient(#F7F7F7, #EEE);
background: -o-linear-gradient(rgba(0,0,0,.6), rgba(0,0,0,.7) 35px, rgba(0,0,0,.6)); background: linear-gradient(#F7F7F7, #EEE);
background: -ms-linear-gradient(rgba(0,0,0,.6), rgba(0,0,0,.7) 35px, rgba(0,0,0,.6));
background: linear-gradient(rgba(0,0,0,.6), rgba(0,0,0,.7) 35px, rgba(0,0,0,.6));
-webkit-box-shadow: 0 0 8px #888; -webkit-box-shadow: 0 0 8px #888;
-moz-box-shadow: 0 0 8px #888; -moz-box-shadow: 0 0 8px #888;
box-shadow: 0 0 8px #888; box-shadow: 0 2px 4px #ddd;
color: #fff; color: #222;
} }
.popup input[type=text] { .popup input[type=text] {
width: 100%; width: 100%;
@ -864,13 +870,18 @@ input[type=checkbox] {
display: block; display: block;
margin-top: 10px; margin-top: 10px;
} }
.popup input[type=text], #users input[type=text] {
outline: none;
}
.popup a { .popup a {
text-decoration: none text-decoration: none
} }
.popup h1 { .popup h1 {
color: #555;
font-size: 18px font-size: 18px
} }
.popup h2 { .popup h2 {
color: #777;
font-size: 15px font-size: 15px
} }
.popup p { .popup p {
@ -884,14 +895,10 @@ input[type=checkbox] {
#importexport, #importexport,
#embed { #embed {
position: absolute; position: absolute;
top: 55px; top: 36px;
right: 20px; right: 20px;
display: none; display: none;
} z-index: 500;
.note {
color: #ddd;
font-size: 11px;
font-weight: bold;
} }
.stickyChat { .stickyChat {
background-color: #f1f1f1 !important; background-color: #f1f1f1 !important;
@ -922,20 +929,14 @@ input[type=checkbox] {
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) {
.toolbar ul li a {
padding: 4px 5px;
}
#users { #users {
right: 0;
top: 36px; top: 36px;
bottom: 33px; bottom: 40px;
-webkit-border-radius: none;
-moz-border-radius: none;
border-radius: none; border-radius: none;
} }
#mycolorpicker { #mycolorpicker {
left: -72px; left: -73px;
/* #mycolorpicker: width -#users: width */; /* #mycolorpicker: width -#users: width */;
} }
#editorcontainer { #editorcontainer {
@ -955,28 +956,15 @@ input[type=checkbox] {
bottom: 0; bottom: 0;
border-top: 1px solid #ccc; border-top: 1px solid #ccc;
} }
#usericonback {
margin-top: 4px
}
.toolbar ul.menu_right > li:last-child { .toolbar ul.menu_right > li:last-child {
float: right; float: right;
} }
.toolbar ul.menu_right > li:not(:last-child) a {
display: block;
}
.toolbar ul.menu_right > li {
padding: 0;
}
.toolbar ul.menu_right > li a { .toolbar ul.menu_right > li a {
height: 24px;
line-height: 24px;
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0; border-radius: 0;
border: none; border: none;
background: none; background: none;
margin: 0; margin: 0;
padding: 4px 8px; padding: 8px;
} }
.toolbar ul li a.selected { .toolbar ul li a.selected {
background: none !important background: none !important
@ -1005,7 +993,4 @@ input[type=checkbox] {
.toolbar ul li .separator { .toolbar ul li .separator {
display: none display: none
} }
#online_count {
line-height: 24px
}
} }

7
src/templates/pad.html
View file

@ -114,7 +114,7 @@
</li> </li>
<li id="usericon" data-key="showusers"> <li id="usericon" data-key="showusers">
<a title="Show connected users"> <a title="Show connected users">
<span class="buttonicon buttonicon-showusers" id="usericonback"></span> <span class="buttonicon buttonicon-showusers"></span>
<span id="online_count">1</span> <span id="online_count">1</span>
</a> </a>
</li> </li>
@ -179,16 +179,15 @@
<div class="column"> <div class="column">
<% e.begin_block("globalSettings"); %> <% e.begin_block("globalSettings"); %>
<h2>Global view</h2> <h2>Global view</h2>
<p>Currently nothing.</p>
<p class="note">These options affect everyone viewing this pad.</p>
<% e.end_block(); %> <% e.end_block(); %>
</div> </div>
</div> </div>
<div id="importexport" class="popup"> <div id="importexport" class="popup">
<h1>Import/Export</h1>
<div class="column"> <div class="column">
<% e.begin_block("importColumn"); %> <% e.begin_block("importColumn"); %>
<h2>Import from text file, HTML, PDF, Word, ODT or RTF</h2><br> <h2>Upload any text file or document</h2><br>
<form id="importform" method="post" action="" target="importiframe" enctype="multipart/form-data"> <form id="importform" method="post" action="" target="importiframe" enctype="multipart/form-data">
<div class="importformdiv" id="importformfilediv"> <div class="importformdiv" id="importformfilediv">
<input type="file" name="file" size="15" id="importfileinput"> <input type="file" name="file" size="15" id="importfileinput">