mirror of
https://github.com/ether/etherpad-lite.git
synced 2025-02-01 03:12:42 +01:00
css: refactor element positioning
No more javascript to change css properties Remove a number of useless tables Try to stop positioning elements with absolute, but use flex-boxes instead Adds comment to pad template, and move popups and chatbox inside editorcontainerbox (so absolute positioning is straightforward) Make the design more consistent: always use base color, font-family and font-size. USe relative font size if necessary (.9rem instead of 11px for example) Remove two columns in the popups, just use one column Remove css meant to support old browser (like -webkit-box-shadow, -moz-box-shadow). Those css rules are quite common now, and If we want to support very old browser, we should use clean-css or other tools to add them automatically
This commit is contained in:
Sebastian Castro
muxator
parent
0603bf8097
commit
5fd6aeeea6
20 changed files with 839 additions and 1224 deletions
|
|
@ -1,46 +1,61 @@
|
|||
/* These CSS rules are included in both the outer and inner ACE iframe.
|
||||
Also see inner.css, included only in the inner one.
|
||||
/*
|
||||
These CSS rules are included in both the outer and inner ACE iframe (pad editor)
|
||||
*/
|
||||
|
||||
@import url('./lists_and_indents.css');
|
||||
|
||||
html.inner-editor {
|
||||
height: auto !important;
|
||||
}
|
||||
#outerdocbody {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
min-height: 100vh; /* take at least full height */
|
||||
}
|
||||
#outerdocbody iframe {
|
||||
flex: 1 auto;
|
||||
display: flex;
|
||||
}
|
||||
#outerdocbody #sidediv {
|
||||
order: -1; /* display it on the first row positionning, i.e. on the left */
|
||||
}
|
||||
|
||||
/* ACE-PAD Container (i.e. where the text is displayed) */
|
||||
#innerdocbody {
|
||||
padding: 10px;
|
||||
overflow: hidden;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
#innerdocbody, #sidediv {
|
||||
padding-top: 10px; /* Both must have same top padding, so line number are aligned with the rows */
|
||||
padding-bottom: 10px; /* some space when we scroll to the bottom */
|
||||
}
|
||||
|
||||
/* --------------------- */
|
||||
/* -- BROWSER SUPPORT -- */
|
||||
/* --------------------- */
|
||||
|
||||
body.mozilla, body.safari {
|
||||
display: table-cell; /* cause "body" area (e.g. where clicks are heard) to grow horizontally with text */
|
||||
}
|
||||
.safari div {
|
||||
padding-right: 1px; /* prevents the caret from disappearing on the longest line of the doc */
|
||||
}
|
||||
html { cursor: text; } /* in Safari, produces text cursor for whole doc (inc. below body) */
|
||||
span { cursor: auto; }
|
||||
|
||||
::selection {
|
||||
background: #acf;
|
||||
}
|
||||
::-moz-selection {
|
||||
background: #acf;
|
||||
}
|
||||
|
||||
a {
|
||||
cursor: pointer !important;
|
||||
white-space:pre-wrap;
|
||||
}
|
||||
/* -------------- */
|
||||
/* -- WRAPPING -- */
|
||||
/* -------------- */
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
white-space: nowrap;
|
||||
word-wrap: normal;
|
||||
}
|
||||
|
||||
#outerdocbody {
|
||||
background-color: #fff;
|
||||
}
|
||||
body.grayedout { background-color: #eee !important }
|
||||
|
||||
#innerdocbody {
|
||||
font-size: 12px; /* overridden by body.style */
|
||||
font-family:Arial, sans-serif; /* overridden by body.style */
|
||||
line-height: 16px; /* overridden by body.style */
|
||||
background-color: white;
|
||||
color: black;
|
||||
}
|
||||
|
||||
body.doesWrap {
|
||||
display: block !important;
|
||||
/* white-space: pre-wrap; */
|
||||
|
||||
/*
|
||||
Must be pre-wrap to keep trailing spaces. Otherwise you get a zombie caret,
|
||||
walking around your screen (see #1766).
|
||||
|
|
@ -53,81 +68,37 @@ body.doesWrap {
|
|||
*/
|
||||
word-wrap: break-word; /* fix for issue #1648 - firefox not wrapping long lines (without spaces) correctly */
|
||||
}
|
||||
|
||||
.noprewrap{
|
||||
white-space: normal;
|
||||
}
|
||||
|
||||
body.doesWrap:not(.noprewrap) > div{
|
||||
body.doesWrap:not(.noprewrap) > div {
|
||||
/* Related to #1766 */
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
|
||||
#innerdocbody {
|
||||
padding-top: 1px; /* important for some reason? */
|
||||
padding-right: 10px;
|
||||
padding-bottom: 8px;
|
||||
padding-left: 1px /* prevents characters from looking chopped off in FF3 -- Removed because it added too much whitespace */;
|
||||
overflow: hidden;
|
||||
/* blank 1x1 gif, so that IE8 doesn't consider the body transparent */
|
||||
background-image: url(data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==);
|
||||
}
|
||||
|
||||
/* ------------------------------------------ */
|
||||
/* -- SIDEDIV (line number, text author..) -- */
|
||||
/* ------------------------------------------ */
|
||||
|
||||
#sidediv {
|
||||
font-size: 11px;
|
||||
font-family: monospace;
|
||||
line-height: 16px; /* overridden by sideDiv.style */
|
||||
padding-top: 8px; /* EDIT_BODY_PADDING_TOP */
|
||||
padding-right: 3px; /* LINE_NUMBER_PADDING_RIGHT - 1 */
|
||||
position: absolute;
|
||||
width: 20px; /* MIN_LINEDIV_WIDTH */
|
||||
top: 0;
|
||||
left: 0;
|
||||
cursor: default;
|
||||
color: white;
|
||||
padding-right: 5px;
|
||||
padding-left: 5px;
|
||||
background-color: #eee;
|
||||
border-right: 1px solid #ccc;
|
||||
}
|
||||
|
||||
#sidedivinner {
|
||||
text-align: right;
|
||||
opacity: .7;
|
||||
}
|
||||
|
||||
.sidedivdelayed { /* class set after sizes are set */
|
||||
background-color: #eee;
|
||||
color: #888 !important;
|
||||
border-right: 1px solid #ccc;
|
||||
#sidediv:not(.sidedivdelayed) { /* before sidediv get initialized, hide text */
|
||||
color: transparent;
|
||||
}
|
||||
.sidedivhidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#outerdocbody iframe {
|
||||
display: block; /* codemirror says it suppresses bugs */
|
||||
position: relative;
|
||||
left: 32px; /* MIN_LINEDIV_WIDTH + LINE_NUMBER_PADDING_RIGHT + EDIT_BODY_PADDING_LEFT */
|
||||
top: 7px; /* EDIT_BODY_PADDING_TOP - 1*/
|
||||
border: 0;
|
||||
width: 1px; /* changed programmatically */
|
||||
height: 1px; /* changed programmatically */
|
||||
}
|
||||
|
||||
/* cause "body" area (e.g. where clicks are heard) to grow horizontally with text */
|
||||
body.mozilla, body.safari {
|
||||
display: table-cell;
|
||||
}
|
||||
|
||||
body.doesWrap {
|
||||
display: block !important;
|
||||
}
|
||||
|
||||
.safari div {
|
||||
/* prevents the caret from disappearing on the longest line of the doc */
|
||||
padding-right: 1px;
|
||||
}
|
||||
|
||||
p {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
#linemetricsdiv {
|
||||
position: absolute;
|
||||
left: -1000px;
|
||||
|
|
@ -137,11 +108,34 @@ p {
|
|||
font-size: 12px; /* overridden by lineMetricsDiv.style */
|
||||
font-family: monospace; /* overridden by lineMetricsDiv.style */
|
||||
}
|
||||
|
||||
/* Stops super long lines without being spaces such as aaaaaaaaaaaaaa*100 breaking the editor
|
||||
Commented out because it stops IE from being able to render the document, crazy IE bug is crazy. */
|
||||
/*
|
||||
.ace-line{
|
||||
overflow:hidden;
|
||||
@media (max-width: 720px) {
|
||||
#sidediv {
|
||||
/* Do not use display: none to hide the sidediv, otherwise the parent container does not
|
||||
get its height properly calculated by flexboxes */
|
||||
visibility: hidden;
|
||||
width: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
/* ----------- */
|
||||
/* -- OTHER -- */
|
||||
/* ----------- */
|
||||
|
||||
::selection {
|
||||
background: #acf;
|
||||
}
|
||||
::-moz-selection {
|
||||
background: #acf;
|
||||
}
|
||||
a {
|
||||
cursor: pointer !important;
|
||||
white-space:pre-wrap;
|
||||
}
|
||||
body.grayedout {
|
||||
background-color: #eee !important
|
||||
}
|
||||
*/
|
||||
|
|
|
|||
|
|
@ -10,22 +10,22 @@
|
|||
@import url("pad/gritter.css");
|
||||
@import url("pad/loadingbox.css");
|
||||
|
||||
*,
|
||||
html,
|
||||
body,
|
||||
p {
|
||||
html {
|
||||
font-size: 13px;
|
||||
font-family: Arial, sans-serif;
|
||||
line-height: 16px;
|
||||
background-color: white;
|
||||
color: #3e3e3e;
|
||||
}
|
||||
*, p {
|
||||
margin: 0;
|
||||
padding: 0px;
|
||||
padding: 0;
|
||||
}
|
||||
.clear {
|
||||
clear: both
|
||||
}
|
||||
body,
|
||||
textarea {
|
||||
font-family: Helvetica, Arial, sans-serif
|
||||
}
|
||||
.readonly .acl-write {
|
||||
display: none;
|
||||
a {
|
||||
color: inherit;
|
||||
}
|
||||
a img {
|
||||
border: 0
|
||||
|
|
@ -34,20 +34,10 @@ a img {
|
|||
padding: 0;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.buttontext:focus{
|
||||
/* Not sure why important is required here but it is */
|
||||
border: 1px solid #666 !important;
|
||||
}
|
||||
.time {
|
||||
float: right;
|
||||
color: #333;
|
||||
font-style: italic;
|
||||
font-size: 10px;
|
||||
margin-left: 3px;
|
||||
margin-right: 3px;
|
||||
margin-top: 2px;
|
||||
}
|
||||
.rtl {
|
||||
direction: RTL
|
||||
}
|
||||
|
|
@ -56,29 +46,9 @@ a img {
|
|||
input[type=checkbox] {
|
||||
vertical-align: -1px
|
||||
}
|
||||
input {
|
||||
color: inherit;
|
||||
}
|
||||
.right {
|
||||
float: right
|
||||
}
|
||||
|
||||
.row {
|
||||
float: left;
|
||||
width: 100%;
|
||||
}
|
||||
.row + .row {
|
||||
margin-top: 15px;
|
||||
}
|
||||
.column {
|
||||
float: left;
|
||||
width:50%;
|
||||
}
|
||||
|
||||
#passwordRequired, #permissionDenied, #wrongPassword, #noCookie {
|
||||
display:none;
|
||||
}
|
||||
|
||||
.hideControlsEditor{
|
||||
top:0px !important;
|
||||
}
|
||||
.hideControlsEditbar{
|
||||
display:none !important;
|
||||
}
|
||||
|
|
@ -1,38 +1,113 @@
|
|||
#chatbox {
|
||||
#chaticon, #chatbox {
|
||||
z-index: 400;
|
||||
position: absolute;
|
||||
bottom: 0px;
|
||||
right: 20px;
|
||||
width: 180px;
|
||||
height: 200px;
|
||||
z-index: 400;
|
||||
background-color: #f7f7f7;
|
||||
border-left: 1px solid #999;
|
||||
border-right: 1px solid #999;
|
||||
border-top: 1px solid #999;
|
||||
padding: 3px;
|
||||
padding-bottom: 10px;
|
||||
border-top-left-radius: 5px;
|
||||
border-top-right-radius: 5px;
|
||||
display: none;
|
||||
border: 1px solid #ccc;
|
||||
border-bottom: none;
|
||||
}
|
||||
#chatbox {
|
||||
width: 400px;
|
||||
height: 300px;
|
||||
z-index: 401;
|
||||
background-color: #f7f7f7;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
#chatbox.stickyChat {
|
||||
position: relative;
|
||||
width: auto;
|
||||
flex: 1 auto; /* take reminaning vertical space */
|
||||
height: auto;
|
||||
right: 0;
|
||||
background-color: #f1f1f1;
|
||||
border-radius: 0;
|
||||
border: none;
|
||||
border-left: 1px solid #ccc;
|
||||
}
|
||||
#chatbox.stickyChat .stick-to-screen-btn {
|
||||
display: none;
|
||||
}
|
||||
#chatbox.stickyChat.chatAndUsersChat .hide-reduce-btn {
|
||||
display:none;
|
||||
}
|
||||
|
||||
/* -- TITLE BAR -- */
|
||||
#titlebar {
|
||||
font-weight: bold;
|
||||
padding: 5px;
|
||||
}
|
||||
#titlebar #titlelabel {
|
||||
margin: 4px 0 0 4px;
|
||||
}
|
||||
#titlebar .stick-to-screen-btn,
|
||||
#titlebar .hide-reduce-btn {
|
||||
font-size: 25px;
|
||||
float: right;
|
||||
text-align: right;
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
#titlebar .stick-to-screen-btn {
|
||||
font-size: 10px;
|
||||
padding-top: 2px;
|
||||
}
|
||||
|
||||
/* -- MESSAGES -- */
|
||||
#chattext {
|
||||
background-color: white;
|
||||
border: 1px solid white;
|
||||
-ms-overflow-y: scroll;
|
||||
overflow-y: scroll;
|
||||
font-size: 12px;
|
||||
position: absolute;
|
||||
right: 0px;
|
||||
left: 0px;
|
||||
top: 25px;
|
||||
bottom: 25px;
|
||||
z-index: 1002;
|
||||
overflow-y: auto;
|
||||
flex: 1 auto;
|
||||
}
|
||||
#chattext p {
|
||||
padding: 3px;
|
||||
-ms-overflow-x: hidden;
|
||||
overflow-x: hidden;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
#chattext .time {
|
||||
float: right;
|
||||
font-style: italic;
|
||||
font-size: .85rem;
|
||||
opacity: .8;
|
||||
margin-left: 3px;
|
||||
margin-right: 2px;
|
||||
}
|
||||
|
||||
/* -- INPUT BOX -- */
|
||||
#chatinputbox {
|
||||
padding: 5px;
|
||||
}
|
||||
#chatinputbox #chatinput {
|
||||
border: 1px solid #ccc;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
|
||||
/* -- CHAT ICON -- */
|
||||
#chaticon {
|
||||
background-color: #fff;
|
||||
cursor: pointer;
|
||||
display: none;
|
||||
padding: 5px;
|
||||
}
|
||||
#chaticon a {
|
||||
text-decoration: none
|
||||
}
|
||||
#chaticon #chatlabel {
|
||||
font-weight: bold;
|
||||
text-decoration: none;
|
||||
margin-right: 3px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
#chaticon #chatcounter {
|
||||
font-size: .8rem;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
/* -- LOAD MESSAGES -- */
|
||||
.chatloadmessages
|
||||
{
|
||||
margin-bottom: 5px;
|
||||
|
|
@ -49,133 +124,10 @@
|
|||
{
|
||||
display: none;
|
||||
}
|
||||
#chatinputbox {
|
||||
padding: 3px 2px;
|
||||
position: absolute;
|
||||
bottom: 0px;
|
||||
right: 0px;
|
||||
left: 3px;
|
||||
}
|
||||
#chatlabel {
|
||||
font-size: 13px;
|
||||
font-weight: bold;
|
||||
color: #555;
|
||||
text-decoration: none;
|
||||
margin-right: 3px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
#chatinput {
|
||||
border: 1px solid #BBBBBB;
|
||||
width: 100%;
|
||||
float: right;
|
||||
}
|
||||
#chaticon {
|
||||
z-index: 400;
|
||||
position: fixed;
|
||||
bottom: 0px;
|
||||
right: 20px;
|
||||
padding: 5px;
|
||||
border-left: 1px solid #999;
|
||||
border-right: 1px solid #999;
|
||||
border-top: 1px solid #999;
|
||||
border-top-left-radius: 5px;
|
||||
border-top-right-radius: 5px;
|
||||
background-color: #fff;
|
||||
cursor: pointer;
|
||||
display: none;
|
||||
}
|
||||
#chaticon a {
|
||||
text-decoration: none
|
||||
}
|
||||
#chatcounter {
|
||||
color: #777;
|
||||
font-size: 10px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
#chattext p {
|
||||
word-wrap: break-word
|
||||
}
|
||||
|
||||
#titlebar {
|
||||
line-height: 16px;
|
||||
font-weight: bold;
|
||||
color: #555;
|
||||
position: relative;
|
||||
bottom: 2px;
|
||||
}
|
||||
#titlelabel {
|
||||
font-size: 13px;
|
||||
margin: 4px 0 0 4px;
|
||||
position: absolute;
|
||||
}
|
||||
#titlesticky{
|
||||
font-size: 10px;
|
||||
padding-top:2px;
|
||||
float: right;
|
||||
text-align: right;
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
color: #555;
|
||||
}
|
||||
#titlecross {
|
||||
font-size: 25px;
|
||||
float: right;
|
||||
text-align: right;
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
color: #555;
|
||||
}
|
||||
|
||||
.stickyChat {
|
||||
background-color: #f1f1f1 !important;
|
||||
right: 0px !important;
|
||||
top: 37px;
|
||||
-webkit-border-radius: 0px !important;
|
||||
-moz-border-radius: 0px !important;
|
||||
border-radius: 0px !important;
|
||||
height: auto !important;
|
||||
border: none !important;
|
||||
border-left: 1px solid #ccc !important;
|
||||
width: 185px !important;
|
||||
}
|
||||
.chatAndUsers{
|
||||
display:block !important;
|
||||
right:0px !important;
|
||||
border-radius:0px !important;
|
||||
width:182px !important;
|
||||
/* Below makes UI look weird when X makes editbar flow onto two lines */
|
||||
/* margin:2px 0 0 0 !important;*/
|
||||
border: none !important;
|
||||
border-bottom: 1px solid #ccc !important;
|
||||
height:155px !important;
|
||||
border-left: 1px solid #ccc !important;
|
||||
}
|
||||
.chatAndUsers > #otherusers{
|
||||
max-height: 100px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
.chatAndUsersChat > div > #titlecross{
|
||||
display:none;
|
||||
}
|
||||
.chatAndUsersChat{
|
||||
bottom:0px !important;
|
||||
padding:0 !important;
|
||||
margin: 165px 0px 0px 0px;
|
||||
right:0 !important;
|
||||
width:182px !important;
|
||||
border: none !important;
|
||||
padding:5px !important;
|
||||
border-left: 1px solid #ccc !important;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 720px) {
|
||||
#chaticon {
|
||||
position:fixed;
|
||||
right:48px;
|
||||
}
|
||||
#chatbox {
|
||||
position:fixed;
|
||||
bottom:33px !important;
|
||||
margin: 65px 0 0 0;
|
||||
right: 0;
|
||||
width: 80%;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -32,10 +32,9 @@
|
|||
}
|
||||
.gritter-item {
|
||||
display:block;
|
||||
color:#eee;
|
||||
padding:2px 11px 8px 11px;
|
||||
color: #eee;
|
||||
padding: 2px 11px 8px 11px;
|
||||
font-size: 11px;
|
||||
font-family:verdana;
|
||||
}
|
||||
.hover .gritter-item {
|
||||
background-position:right -40px;
|
||||
|
|
|
|||
|
|
@ -1,41 +1,45 @@
|
|||
html {
|
||||
font-size: 62.5%;
|
||||
html, body {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
body {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
#editbar {
|
||||
height: auto;
|
||||
}
|
||||
#editorcontainerbox {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
}
|
||||
#editorcontainer {
|
||||
position: absolute;
|
||||
top: 37px; /* + 1px border */
|
||||
left: 0px;
|
||||
right: 0px;
|
||||
bottom: 0px;
|
||||
z-index: 1;
|
||||
flex: 1 auto;
|
||||
position: relative; /* for nested popup to use absolute positionning */
|
||||
|
||||
/* Required to be able to scroll on iOS: */
|
||||
-webkit-overflow-scrolling: touch;
|
||||
/* For sticky chat */
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
}
|
||||
#editorcontainer iframe {
|
||||
#editorcontainerbox #editorcontainer {
|
||||
display: flex; /* transfer flex properties to nested elements, here the iframe */
|
||||
height: 100%;
|
||||
flex: 1 auto;
|
||||
}
|
||||
#editorcontainerbox #editorcontainer iframe {
|
||||
width: 100%;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
left: 0; /* Required for safari fixes RTL */
|
||||
}
|
||||
iframe {
|
||||
position: absolute
|
||||
#editorcontainerbox .sticky-container { /* container for #users, #chat, #toc (table of content) and so on... */
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 200px;
|
||||
max-width: 40%;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
@media all and (max-width: 400px) {
|
||||
#editorcontainer {
|
||||
top: 68px;
|
||||
}
|
||||
#editorcontainerbox .sticky-container:not(.stikyUsers):not(.stickyChat) {
|
||||
width: 0; /* hide when the container is empty */
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 720px) {
|
||||
#editorcontainer {
|
||||
margin-bottom: 33px
|
||||
#editorcontainerbox {
|
||||
margin-bottom: 37px; /* Leave space for the bottom toolbar on mobile */
|
||||
}
|
||||
}
|
||||
|
|
@ -56,3 +56,7 @@
|
|||
transform: rotate(359deg);
|
||||
}
|
||||
}
|
||||
|
||||
#passwordRequired, #permissionDenied, #wrongPassword, #noCookie {
|
||||
display:none;
|
||||
}
|
||||
|
|
@ -1,28 +1,21 @@
|
|||
.popup {
|
||||
font-size: 12px;
|
||||
width: 80%;
|
||||
max-width: 500px;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 20px;
|
||||
display: none;
|
||||
z-index: 500;
|
||||
min-width: 300px;
|
||||
max-width: 600px;
|
||||
padding: 10px;
|
||||
border-radius: 0 0 6px 6px;
|
||||
border: 1px solid #ccc;
|
||||
border-top: none;
|
||||
background: #f7f7f7;
|
||||
background: -webkit-linear-gradient(#F7F7F7, #EEE);
|
||||
background: -moz-linear-gradient(#F7F7F7, #EEE);
|
||||
background: -ms-linear-gradient(#F7F7F7, #EEE);
|
||||
background: -o-linear-gradient(#F7F7F7, #EEE);
|
||||
background: linear-gradient(#F7F7F7, #EEE);
|
||||
-webkit-box-shadow: 0 0 8px #888;
|
||||
-moz-box-shadow: 0 0 8px #888;
|
||||
box-shadow: 0 2px 4px #ddd;
|
||||
color: #222;
|
||||
background: #f7f7f7;
|
||||
}
|
||||
.popup input[type=text] {
|
||||
width: 100%;
|
||||
padding: 5px;
|
||||
-webkit-box-sizing: border-box;
|
||||
-moz-box-sizing: border-box;
|
||||
-ms-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
display: block;
|
||||
margin-top: 10px;
|
||||
|
|
@ -38,15 +31,16 @@
|
|||
text-decoration: none
|
||||
}
|
||||
.popup h1 {
|
||||
color: #555;
|
||||
font-size: 18px
|
||||
font-size: 1.4rem;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.popup h2 {
|
||||
color: #777;
|
||||
font-size: 15px
|
||||
opacity: .7;
|
||||
margin: 10px 0;
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
.popup p {
|
||||
margin: 5px 0
|
||||
margin: 5px 0;
|
||||
}
|
||||
.popup select {
|
||||
background: #fff;
|
||||
|
|
@ -57,58 +51,21 @@
|
|||
outline: none;
|
||||
width: 120px;
|
||||
}
|
||||
#settings,
|
||||
#import_export,
|
||||
#embed,
|
||||
#connectivity,
|
||||
#users {
|
||||
position: absolute;
|
||||
top: 38px;
|
||||
right: 20px;
|
||||
display: none;
|
||||
z-index: 500;
|
||||
}
|
||||
|
||||
@media all and (max-width: 400px){
|
||||
.popup {
|
||||
width:100%;
|
||||
max-width:300px;
|
||||
top: 72px !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* Mobile devices */
|
||||
@media only screen and (max-width: 720px) {
|
||||
#users {
|
||||
top: auto;
|
||||
right:0px !important;
|
||||
bottom: 33px;
|
||||
border-radius: 0px !important;
|
||||
height: 55px !important;
|
||||
overflow: auto;
|
||||
}
|
||||
#mycolorpicker {
|
||||
left: 0px;
|
||||
top:37px !important;
|
||||
position:fixed;
|
||||
}
|
||||
.popup {
|
||||
-webkit-border-radius: 0;
|
||||
-moz-border-radius: 0;
|
||||
border-radius: 0;
|
||||
-webkit-box-sizing: border-box;
|
||||
-moz-box-sizing: border-box;
|
||||
-ms-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
}
|
||||
#settings,
|
||||
#import_export,
|
||||
#connectivity,
|
||||
#embed {
|
||||
top:auto;
|
||||
top: auto;
|
||||
left: 0;
|
||||
bottom: 33px;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
max-height: 80vh;
|
||||
max-width: none;
|
||||
|
||||
border-radius: 6px 6px 0 0;
|
||||
border: 1px solid #ccc;
|
||||
border-bottom: none;
|
||||
box-shadow: 0 -2px 4px #ddd;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,39 +1,29 @@
|
|||
#exportColumn{
|
||||
margin-top:20px;
|
||||
.readonly .acl-write {
|
||||
display: none;
|
||||
}
|
||||
.exporttype {
|
||||
margin-top: 4px;
|
||||
background-repeat: no-repeat;
|
||||
padding-left: 25px;
|
||||
color: #333;
|
||||
text-decoration: none;
|
||||
padding-bottom:2px;
|
||||
display:inline;
|
||||
padding-left:5px;
|
||||
font-family: "Arial";
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
.exportlink{
|
||||
.exporttype:before{
|
||||
font-family: "fontawesome-etherpad";
|
||||
display:block;
|
||||
margin:5px;
|
||||
color:#666;
|
||||
margin-right: 5px;
|
||||
}
|
||||
#exporthtmla:before {
|
||||
#exporthtmla .exporttype:before {
|
||||
content: "\e826";
|
||||
}
|
||||
#exportplaina:before {
|
||||
#exportplaina .exporttype:before {
|
||||
content: "\e802";
|
||||
}
|
||||
#exportworda:before {
|
||||
#exportworda .exporttype:before {
|
||||
content: "\e804";
|
||||
}
|
||||
#exportpdfa:before {
|
||||
#exportpdfa .exporttype:before {
|
||||
content: "\e803";
|
||||
}
|
||||
#exportetherpada:before {
|
||||
#exportetherpada .exporttype:before {
|
||||
content: "\e806";
|
||||
}
|
||||
#exportopena:before {
|
||||
#exportopena .exporttype:before {
|
||||
content: "\e805";
|
||||
}
|
||||
|
||||
|
|
@ -51,5 +41,5 @@
|
|||
|
||||
#importsubmitinput {
|
||||
margin-top: 12px;
|
||||
padding:2px 4px 2px 4px;
|
||||
padding: 2px 4px 2px 4px;
|
||||
}
|
||||
|
|
@ -1,27 +1,50 @@
|
|||
#users {
|
||||
background: #f7f7f7;
|
||||
background: -webkit-linear-gradient( #F7F7F7,#EEE);
|
||||
background: -moz-linear-gradient( #F7F7F7,#EEE);
|
||||
background: -ms-linear-gradient( #F7F7F7,#EEE);
|
||||
background: -o-linear-gradient( #F7F7F7,#EEE);
|
||||
background: linear-gradient( #F7F7F7,#EEE);
|
||||
width: 160px;
|
||||
color: #fff;
|
||||
padding: 5px;
|
||||
border-radius: 0 0 6px 6px;
|
||||
border: 1px solid #ccc;
|
||||
/* --------------- */
|
||||
/* --- LAYOUT ---- */
|
||||
/* --------------- */
|
||||
|
||||
.popup#users {
|
||||
flex-direction: column;
|
||||
max-height: 500px;
|
||||
height: auto;
|
||||
}
|
||||
#otherusers {
|
||||
max-height: 400px;
|
||||
.popup#users #myuser {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.popup#users #otherusers {
|
||||
flex: 1 auto;
|
||||
overflow: auto;
|
||||
max-height: 200px;
|
||||
}
|
||||
|
||||
.popup#users.chatAndUsers {
|
||||
display: flex !important; /* always visible */
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
top: 0;
|
||||
right: 0;
|
||||
left: auto;
|
||||
border: none;
|
||||
border-bottom: 1px solid #ccc;
|
||||
border-left: 1px solid #ccc;
|
||||
border-right: 0;
|
||||
border-radius: 0;
|
||||
box-shadow: none;
|
||||
height: 200px;
|
||||
min-width: 0;
|
||||
box-sizing: border-box;
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
|
||||
/* --------------- */
|
||||
/* --- MY USER --- */
|
||||
/* --------------- */
|
||||
|
||||
#myswatchbox {
|
||||
position: absolute;
|
||||
left: 5px;
|
||||
top: 5px;
|
||||
float: left;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
border: 1px solid #000;
|
||||
border: 1px solid #ccc
|
||||
background: transparent;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
|
@ -30,18 +53,53 @@
|
|||
height: 100%;
|
||||
background: transparent; /*...initially*/
|
||||
}
|
||||
|
||||
#myusernameform {
|
||||
margin-left: 30px;
|
||||
}
|
||||
input#myusernameedit {
|
||||
height: 26px;
|
||||
font-size: 1.3em;
|
||||
padding: 3px;
|
||||
border: 1px solid #ccc;
|
||||
background-color: transparent;
|
||||
margin: 0;
|
||||
}
|
||||
input#myusernameedit:not(.editable) {
|
||||
color: grey;
|
||||
}
|
||||
#myuser .myusernameedithoverable:hover {
|
||||
background: white;
|
||||
}
|
||||
#myusernameform .editactive,
|
||||
#myusernameform .editempty {
|
||||
background: white;
|
||||
border-left: 1px solid #c3c3c3;
|
||||
border-top: 1px solid #c3c3c3;
|
||||
border-right: 1px solid #e6e6e6;
|
||||
border-bottom: 1px solid #e6e6e6;
|
||||
color: #000;
|
||||
}
|
||||
#myusernameform .editempty {
|
||||
color: #333
|
||||
}
|
||||
#myusernameedit, #otheruserstable .swatch {
|
||||
border: 1px solid #ccc;
|
||||
}
|
||||
|
||||
|
||||
/* --------------------------- */
|
||||
/* --- MY USER COLORPICKER --- */
|
||||
/* --------------------------- */
|
||||
|
||||
#mycolorpicker {
|
||||
display: none;
|
||||
width: 232px;
|
||||
height: 265px;
|
||||
position: absolute;
|
||||
left: -250px;
|
||||
top: 0px;
|
||||
right: calc(100% + 15px);
|
||||
top: 0;
|
||||
z-index: 101;
|
||||
display: none;
|
||||
border-radius: 0 0 6px 6px;
|
||||
background: #f7f7f7;
|
||||
border: 1px solid #ccc;
|
||||
border-top: 0;
|
||||
padding-left: 10px;
|
||||
padding-top: 10px;
|
||||
}
|
||||
|
|
@ -55,14 +113,7 @@
|
|||
#mycolorpickersave,
|
||||
#mycolorpickercancel {
|
||||
background: #fff;
|
||||
background: -webkit-linear-gradient(#fff, #ccc);
|
||||
background: -moz-linear-gradient(#fff, #ccc);
|
||||
background: -o-linear-gradient(#fff, #ccc);
|
||||
background: -ms-linear-gradient(#fff, #ccc);
|
||||
background: linear-gradient(#fff, #ccc);
|
||||
border: 1px solid #ccc;
|
||||
-webkit-border-radius: 4px;
|
||||
-moz-border-radius: 4px;
|
||||
border-radius: 4px;
|
||||
font-size: 12px;
|
||||
cursor: pointer;
|
||||
|
|
@ -87,110 +138,24 @@
|
|||
-moz-border-radius: 5px;
|
||||
border-radius: 5px;
|
||||
}
|
||||
#myusernameform {
|
||||
margin-left: 30px
|
||||
}
|
||||
#myusernameedit {
|
||||
font-size: 1.3em;
|
||||
color: #fff;
|
||||
padding: 3px;
|
||||
height: 18px;
|
||||
margin: 0;
|
||||
border: 0;
|
||||
width: 122px;
|
||||
background: transparent;
|
||||
}
|
||||
#myusernameform input.editable {
|
||||
border: 1px solid #444
|
||||
}
|
||||
#myuser .myusernameedithoverable:hover {
|
||||
background: white;
|
||||
color: black;
|
||||
}
|
||||
#mystatusform {
|
||||
margin-left: 35px;
|
||||
margin-top: 5px;
|
||||
}
|
||||
#mystatusedit {
|
||||
font-size: 1.2em;
|
||||
color: #777;
|
||||
font-style: italic;
|
||||
display: none;
|
||||
padding: 2px;
|
||||
height: 14px;
|
||||
margin: 0;
|
||||
border: 1px solid #bbb;
|
||||
width: 199px;
|
||||
background: transparent;
|
||||
}
|
||||
#myusernameform .editactive,
|
||||
#myusernameform .editempty {
|
||||
background: white;
|
||||
border-left: 1px solid #c3c3c3;
|
||||
border-top: 1px solid #c3c3c3;
|
||||
border-right: 1px solid #e6e6e6;
|
||||
border-bottom: 1px solid #e6e6e6;
|
||||
color: #000;
|
||||
}
|
||||
#myusernameform .editempty {
|
||||
color: #333
|
||||
}
|
||||
#myswatchbox, #myusernameedit, #otheruserstable .swatch {
|
||||
border: 1px solid #ccc !important;
|
||||
color: #333;
|
||||
}
|
||||
table#otheruserstable {
|
||||
display: none
|
||||
}
|
||||
|
||||
|
||||
/* ------------------- */
|
||||
/* --- OTHER USERS --- */
|
||||
/* ------------------- */
|
||||
|
||||
#otheruserstable td {
|
||||
height: 26px;
|
||||
vertical-align: middle;
|
||||
padding: 0 2px;
|
||||
color: #333;
|
||||
}
|
||||
#otheruserstable .swatch {
|
||||
border: 1px solid #000;
|
||||
border: 1px solid #ccc;
|
||||
width: 13px;
|
||||
height: 13px;
|
||||
overflow: hidden;
|
||||
margin: 0 4px;
|
||||
-webkit-touch-callout: none;
|
||||
-webkit-user-select: none;
|
||||
-khtml-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
.usertdswatch {
|
||||
width: 1%
|
||||
}
|
||||
.usertdname {
|
||||
font-size: 1.3em;
|
||||
color: #444;
|
||||
}
|
||||
.usertdstatus {
|
||||
font-size: 1.1em;
|
||||
font-style: italic;
|
||||
color: #999;
|
||||
}
|
||||
.usertdactivity {
|
||||
font-size: 1.1em;
|
||||
color: #777;
|
||||
}
|
||||
.usertdname input {
|
||||
border: 1px solid #bbb;
|
||||
width: 80px;
|
||||
padding: 2px;
|
||||
}
|
||||
.usertdname input.editactive,
|
||||
.usertdname input.editempty {
|
||||
background: white;
|
||||
border-left: 1px solid #c3c3c3;
|
||||
border-top: 1px solid #c3c3c3;
|
||||
border-right: 1px solid #e6e6e6;
|
||||
border-bottom: 1px solid #e6e6e6;
|
||||
}
|
||||
.usertdname input.editempty {
|
||||
color: #888;
|
||||
font-style: italic;
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
|
@ -1,129 +1,78 @@
|
|||
/* menu */
|
||||
.toolbar {
|
||||
display:none; /* hidden by default */
|
||||
}
|
||||
.toolbar {
|
||||
background: #f7f7f7;
|
||||
background: -webkit-linear-gradient(#f7f7f7, #f1f1f1 80%);
|
||||
background: -moz-linear-gradient(#f7f7f7, #f1f1f1 80%);
|
||||
background: -o-linear-gradient(#f7f7f7, #f1f1f1 80%);
|
||||
background: -ms-linear-gradient(#f7f7f7, #f1f1f1 80%);
|
||||
background: linear-gradient(#f7f7f7, #f1f1f1 80%);
|
||||
display: none;
|
||||
background-color: #f4f4f4;
|
||||
border-bottom: 1px solid #ccc;
|
||||
overflow: hidden;
|
||||
padding-top: 4px;
|
||||
width: 100%;
|
||||
white-space: nowrap;
|
||||
height: 32px;
|
||||
justify-content: space-between;
|
||||
padding: 0px 5px 5px 5px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.toolbar ul {
|
||||
position: absolute;
|
||||
list-style: none;
|
||||
padding-right: 3px;
|
||||
padding-left: 1px;
|
||||
z-index: 2;
|
||||
overflow: hidden;
|
||||
float: left
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: flex-start;
|
||||
}
|
||||
.toolbar ul.menu_left {
|
||||
flex-wrap: wrap; /* wrap left toolbar so if a lot of icons are present it goes on multiple lines */
|
||||
}
|
||||
.toolbar ul.menu_right {
|
||||
flex-shrink: 0; /* prevent from shrinking */
|
||||
}
|
||||
.toolbar ul li, .toolbar ul > div {
|
||||
display: flex; /* transfer flexbox positionning to children */
|
||||
}
|
||||
.toolbar ul li {
|
||||
float: left;
|
||||
margin-left: 2px;
|
||||
height:32px;
|
||||
cursor: pointer;
|
||||
margin-top: 5px; /* when icons goes multi rows, have space betwwen each row */
|
||||
}
|
||||
.toolbar ul li.separator {
|
||||
border: inherit;
|
||||
background: inherit;
|
||||
visibility: hidden;
|
||||
width: 0px;
|
||||
padding: 5px;
|
||||
height:22px;
|
||||
}
|
||||
.toolbar ul li a:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
.toolbar ul li a:hover {
|
||||
background: #fff;
|
||||
background: -webkit-linear-gradient(#f4f4f4, #e4e4e4);
|
||||
background: -moz-linear-gradient(#f4f4f4, #e4e4e4);
|
||||
background: -o-linear-gradient(#f4f4f4, #e4e4e4);
|
||||
background: -ms-linear-gradient(#f4f4f4, #e4e4e4);
|
||||
background: linear-gradient(#f4f4f4, #e4e4e4);
|
||||
}
|
||||
.toolbar ul li a:active {
|
||||
background: #eee;
|
||||
background: -webkit-linear-gradient(#ddd, #fff);
|
||||
background: -moz-linear-gradient(#ddd, #fff);
|
||||
background: -o-linear-gradient(#ddd, #fff);
|
||||
background: -ms-linear-gradient(#ddd, #fff);
|
||||
background: linear-gradient(#ddd, #fff);
|
||||
-webkit-box-shadow: 0 0 8px rgba(0,0,0,.1) inset;
|
||||
-moz-box-shadow: 0 0 8px rgba(0,0,0,.1) inset;
|
||||
box-shadow: 0 0 8px rgba(0,0,0,.1) inset;
|
||||
}
|
||||
.toolbar ul li .activeButton {
|
||||
background: #eee;
|
||||
background: -webkit-linear-gradient(#ddd, #fff);
|
||||
background: -moz-linear-gradient(#ddd, #fff);
|
||||
background: -o-linear-gradient(#ddd, #fff);
|
||||
background: -ms-linear-gradient(#ddd, #fff);
|
||||
background: linear-gradient(#ddd, #fff);
|
||||
-webkit-box-shadow: 0 0 8px rgba(0,0,0,.1) inset;
|
||||
-moz-box-shadow: 0 0 8px rgba(0,0,0,.1) inset;
|
||||
box-shadow: 0 0 8px rgba(0,0,0,.1) inset;
|
||||
width: 10px;
|
||||
}
|
||||
.toolbar ul li a {
|
||||
background: #fff;
|
||||
background: -webkit-linear-gradient(#fff, #f0f0f0);
|
||||
background: -moz-linear-gradient(#fff, #f0f0f0);
|
||||
background: -o-linear-gradient(#fff, #f0f0f0);
|
||||
background: -ms-linear-gradient(#fff, #f0f0f0);
|
||||
background: linear-gradient(#fff, #f0f0f0);
|
||||
border: 1px solid #ccc;
|
||||
cursor: pointer;
|
||||
border-radius: 3px;
|
||||
background: #fff;
|
||||
color: #ccc;
|
||||
cursor: pointer;
|
||||
display: inline-block;
|
||||
min-height: 18px;
|
||||
overflow: hidden;
|
||||
padding: 4px 5px;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
min-width: 18px;
|
||||
transition: background-color .1s;
|
||||
}
|
||||
.toolbar ul li a .buttonicon {
|
||||
position: relative;
|
||||
top: 1px;
|
||||
.toolbar ul li button:active, .toolbar ul li button:focus {
|
||||
outline: 0;
|
||||
border: none;
|
||||
}
|
||||
.toolbar ul li a .buttontext {
|
||||
color: #666;
|
||||
font-size: 14px;
|
||||
border:none;
|
||||
background:none;
|
||||
margin-top:1px;
|
||||
color:#666;
|
||||
.toolbar ul li a:hover {
|
||||
text-decoration: none;
|
||||
background-color: #f2f2f2;
|
||||
}
|
||||
.toolbar ul li a:active, .toolbar ul li a:focus {
|
||||
background: #ddd;
|
||||
}
|
||||
.toolbar ul li a.selected {
|
||||
background: #dadada !important;
|
||||
}
|
||||
|
||||
.toolbar ul li a.grouped-left {
|
||||
border-radius: 3px 0 0 3px;
|
||||
}
|
||||
.toolbar ul li a.grouped-middle {
|
||||
border-radius: 0;
|
||||
margin-left: -2px;
|
||||
border-left: 0;
|
||||
}
|
||||
.toolbar ul li a.grouped-right {
|
||||
border-radius: 0 3px 3px 0;
|
||||
margin-left: -2px;
|
||||
border-left: 0;
|
||||
}
|
||||
.toolbar ul li a.selected {
|
||||
background: #eee !important;
|
||||
background: -webkit-linear-gradient(#EEE, #F0F0F0) !important;
|
||||
background: -moz-linear-gradient(#EEE, #F0F0F0) !important;
|
||||
background: -o-linear-gradient(#EEE, #F0F0F0) !important;
|
||||
background: -ms-linear-gradient(#EEE, #F0F0F0) !important;
|
||||
background: linear-gradient(#EEE, #F0F0F0) !important;
|
||||
}
|
||||
|
||||
.toolbar ul li select {
|
||||
background: #fff;
|
||||
padding: 4px;
|
||||
|
|
@ -133,121 +82,58 @@
|
|||
border: 1px solid #ccc;
|
||||
outline: none;
|
||||
}
|
||||
.toolbar ul.menu_left {
|
||||
left: 0px;
|
||||
right: 210px;
|
||||
}
|
||||
|
||||
.toolbar ul.menu_right {
|
||||
right:0px;
|
||||
}
|
||||
li[data-key=showusers] > a {
|
||||
.toolbar ul li[data-key=showusers] > a {
|
||||
min-width: 30px;
|
||||
text-align: left;
|
||||
}
|
||||
li[data-key=showusers] > a #online_count {
|
||||
.toolbar ul li[data-key=showusers] > a #online_count {
|
||||
color: #777;
|
||||
font-size: 11px;
|
||||
position: relative;
|
||||
top: 2px;
|
||||
padding-left: 2px;
|
||||
}
|
||||
.toolbar #overlay {
|
||||
|
||||
.toolbar #toolbar-overlay {
|
||||
z-index: 500;
|
||||
display: none;
|
||||
background-repeat: repeat-both;
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
height: inherit;
|
||||
left: 0;
|
||||
top: 0;
|
||||
}
|
||||
* html #overlay {
|
||||
/* for IE 6+ */
|
||||
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
|
||||
filter: alpha(opacity=100);
|
||||
opacity: 1; /* in case this is looked at */
|
||||
background-image: none;
|
||||
background-repeat: no-repeat; /* scale the image */
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
@media all and (max-width: 400px){
|
||||
.toolbar {
|
||||
height: 62px;
|
||||
}
|
||||
.toolbar ul.menu_left {
|
||||
left:0px;
|
||||
right:100px;
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: 600px) {
|
||||
.toolbar ul li.separator {
|
||||
display: none;
|
||||
}
|
||||
.toolbar ul li a {
|
||||
padding: 4px 1px
|
||||
}
|
||||
.toolbar ul.menu_left {
|
||||
left:0px;
|
||||
right:150px;
|
||||
}
|
||||
}
|
||||
@media only screen and (max-width: 720px) {
|
||||
/* cancel non-mobile border (will be defined on ".toolbar ul.menu_left" bellow) */
|
||||
.toolbar {
|
||||
border-bottom: 0;
|
||||
}
|
||||
.toolbar ul {
|
||||
background: #f7f7f7;
|
||||
background: -webkit-linear-gradient(#f7f7f7, #f1f1f1 80%);
|
||||
background: -moz-linear-gradient(#f7f7f7, #f1f1f1 80%);
|
||||
background: -o-linear-gradient(#f7f7f7, #f1f1f1 80%);
|
||||
background: -ms-linear-gradient(#f7f7f7, #f1f1f1 80%);
|
||||
background: linear-gradient(#f7f7f7, #f1f1f1 80%);
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
.toolbar ul.menu_left {
|
||||
right:0px;
|
||||
position: relative;
|
||||
display: flex;
|
||||
top: 0;
|
||||
overflow-x: auto;
|
||||
padding: 4px 0 0 0;
|
||||
border-bottom: 1px solid #ccc;
|
||||
z-index: 10;
|
||||
.toolbar ul li.separator {
|
||||
width: 5px;
|
||||
}
|
||||
/* menu_right act like a new toolbar on the bottom of the screen */
|
||||
.toolbar ul.menu_right, .timeslider-bar .editbarright {
|
||||
right:0px !important;
|
||||
height: 32px;
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
left: 0;
|
||||
border-top: 1px solid #ccc;
|
||||
}
|
||||
.toolbar ul.menu_right > li:last-child {
|
||||
float: right;
|
||||
background-color: #f4f4f4;
|
||||
padding: 0 5px 5px 5px;
|
||||
}
|
||||
.toolbar ul.menu_right > li a {
|
||||
border-radius: 0;
|
||||
border: none;
|
||||
background: none;
|
||||
background-color: transparent;
|
||||
margin-left: 5px;
|
||||
}
|
||||
.toolbar ul.menu_right > li[data-key="showusers"] {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
margin: 0;
|
||||
padding: 8px;
|
||||
}
|
||||
.toolbar ul li a.selected {
|
||||
background: none !important
|
||||
}
|
||||
li[data-key="showusers"] > a {
|
||||
|
||||
margin-top:-10px;
|
||||
padding-top:2px !important;
|
||||
line-height:20px;
|
||||
vertical-align:top !important;
|
||||
}
|
||||
.toolbar ul li .separator {
|
||||
display: none
|
||||
}
|
||||
.toolbar #online_count {
|
||||
line-height: 24px
|
||||
.toolbar ul.menu_right > li[data-key="showusers"] a {
|
||||
padding-top: 10px;
|
||||
border-radius: 0;
|
||||
}
|
||||
}
|
||||
|
|
@ -201,7 +201,6 @@ stepper:active{
|
|||
background: linear-gradient(#F7F7F7, #F1F1F1 80%) repeat scroll 0% 0% transparent;
|
||||
padding:2px;
|
||||
border-radius:2px;
|
||||
font-family: Arial, sans-serif;
|
||||
font-size: 11px;
|
||||
left: 7px;
|
||||
position: absolute;
|
||||
|
|
|
|||
|
|
@ -225,7 +225,7 @@ function Ace2Editor()
|
|||
var iframeHTML = [];
|
||||
|
||||
iframeHTML.push(doctype);
|
||||
iframeHTML.push("<html><head>");
|
||||
iframeHTML.push("<html class='inner-editor'><head>");
|
||||
|
||||
// calls to these functions ($$INCLUDE_...) are replaced when this file is processed
|
||||
// and compressed, putting the compressed code from the named file directly into the
|
||||
|
|
@ -316,7 +316,7 @@ window.onload = function () {\n\
|
|||
}, 0);\n\
|
||||
}';
|
||||
|
||||
var outerHTML = [doctype, '<html><head>']
|
||||
var outerHTML = [doctype, '<html class="inner-editor outerdoc"><head>']
|
||||
|
||||
var includedCSS = [];
|
||||
var $$INCLUDE_CSS = function(filename) {includedCSS.push(filename)};
|
||||
|
|
|
|||
|
|
@ -69,12 +69,6 @@ function Ace2Inner(){
|
|||
var THE_TAB = ' '; //4
|
||||
var MAX_LIST_LEVEL = 16;
|
||||
|
||||
var LINE_NUMBER_PADDING_RIGHT = 4;
|
||||
var LINE_NUMBER_PADDING_LEFT = 4;
|
||||
var MIN_LINEDIV_WIDTH = 20;
|
||||
var EDIT_BODY_PADDING_TOP = 8;
|
||||
var EDIT_BODY_PADDING_LEFT = 8;
|
||||
|
||||
var FORMATTING_STYLES = ['bold', 'italic', 'underline', 'strikethrough'];
|
||||
var SELECT_BUTTON_CLASS = 'selected';
|
||||
|
||||
|
|
@ -127,12 +121,6 @@ function Ace2Inner(){
|
|||
var hasLineNumbers = true;
|
||||
var isStyled = true;
|
||||
|
||||
// space around the innermost iframe element
|
||||
var iframePadLeft = MIN_LINEDIV_WIDTH + LINE_NUMBER_PADDING_RIGHT + EDIT_BODY_PADDING_LEFT;
|
||||
var iframePadTop = EDIT_BODY_PADDING_TOP;
|
||||
var iframePadBottom = 0,
|
||||
iframePadRight = 0;
|
||||
|
||||
var console = (DEBUG && window.console);
|
||||
var documentAttributeManager;
|
||||
|
||||
|
|
@ -4766,70 +4754,7 @@ function Ace2Inner(){
|
|||
return;
|
||||
}
|
||||
|
||||
function setIfNecessary(obj, prop, value)
|
||||
{
|
||||
if (obj[prop] != value)
|
||||
{
|
||||
obj[prop] = value;
|
||||
}
|
||||
}
|
||||
|
||||
var lineNumberWidth = sideDiv.firstChild.offsetWidth;
|
||||
var newSideDivWidth = lineNumberWidth + LINE_NUMBER_PADDING_LEFT;
|
||||
if (newSideDivWidth < MIN_LINEDIV_WIDTH) newSideDivWidth = MIN_LINEDIV_WIDTH;
|
||||
iframePadLeft = EDIT_BODY_PADDING_LEFT;
|
||||
if (hasLineNumbers) iframePadLeft += newSideDivWidth + LINE_NUMBER_PADDING_RIGHT;
|
||||
setIfNecessary(iframe.style, "left", iframePadLeft + "px");
|
||||
setIfNecessary(sideDiv.style, "width", newSideDivWidth + "px");
|
||||
|
||||
for (var i = 0; i < 2; i++)
|
||||
{
|
||||
var newHeight = root.clientHeight;
|
||||
var newWidth = (browser.msie ? root.createTextRange().boundingWidth : root.clientWidth);
|
||||
var viewHeight = getInnerHeight() - iframePadBottom - iframePadTop;
|
||||
var viewWidth = getInnerWidth() - iframePadLeft - iframePadRight;
|
||||
if (newHeight < viewHeight)
|
||||
{
|
||||
newHeight = viewHeight;
|
||||
if (browser.msie) setIfNecessary(outerWin.document.documentElement.style, 'overflowY', 'auto');
|
||||
}
|
||||
else
|
||||
{
|
||||
if (browser.msie) setIfNecessary(outerWin.document.documentElement.style, 'overflowY', 'scroll');
|
||||
}
|
||||
if (doesWrap)
|
||||
{
|
||||
newWidth = viewWidth;
|
||||
}
|
||||
else
|
||||
{
|
||||
if (newWidth < viewWidth) newWidth = viewWidth;
|
||||
}
|
||||
setIfNecessary(iframe.style, "height", newHeight + "px");
|
||||
setIfNecessary(iframe.style, "width", newWidth + "px");
|
||||
setIfNecessary(sideDiv.style, "height", newHeight + "px");
|
||||
}
|
||||
if (browser.firefox)
|
||||
{
|
||||
if (!doesWrap)
|
||||
{
|
||||
// the body:display:table-cell hack makes mozilla do scrolling
|
||||
// correctly by shrinking the <body> to fit around its content,
|
||||
// but mozilla won't act on clicks below the body. We keep the
|
||||
// style.height property set to the viewport height (editor height
|
||||
// not including scrollbar), so it will never shrink so that part of
|
||||
// the editor isn't clickable.
|
||||
var body = root;
|
||||
var styleHeight = viewHeight + "px";
|
||||
setIfNecessary(body.style, "height", styleHeight);
|
||||
}
|
||||
else
|
||||
{
|
||||
setIfNecessary(root.style, "height", "");
|
||||
}
|
||||
}
|
||||
var win = outerWin;
|
||||
var r = 20;
|
||||
|
||||
enforceEditability();
|
||||
|
||||
|
|
@ -5160,7 +5085,6 @@ function Ace2Inner(){
|
|||
{
|
||||
var win = outerWin;
|
||||
var odoc = outerWin.document;
|
||||
pixelX += iframePadLeft;
|
||||
var distInsideLeft = pixelX - win.scrollX;
|
||||
var distInsideRight = win.scrollX + getInnerWidth() - pixelX;
|
||||
if (distInsideLeft < 0)
|
||||
|
|
@ -5358,7 +5282,7 @@ function Ace2Inner(){
|
|||
function initLineNumbers()
|
||||
{
|
||||
lineNumbersShown = 1;
|
||||
sideDiv.innerHTML = '<table border="0" cellpadding="0" cellspacing="0" align="right"><tr><td id="sidedivinner" class="sidedivinner"><div>1</div></td></tr></table>';
|
||||
sideDiv.innerHTML = '<div id="sidedivinner" class="sidedivinner"><div>1</div></div>';
|
||||
sideDivInner = outerWin.document.getElementById("sidedivinner");
|
||||
$(sideDiv).addClass("sidediv");
|
||||
}
|
||||
|
|
|
|||
|
|
@ -31,7 +31,7 @@ var chat = (function()
|
|||
show: function ()
|
||||
{
|
||||
$("#chaticon").hide();
|
||||
$("#chatbox").show();
|
||||
$("#chatbox").css('display', 'flex');
|
||||
$("#gritter-notice-wrapper").hide();
|
||||
self.scrollDown();
|
||||
chatMentions = 0;
|
||||
|
|
@ -46,42 +46,28 @@ var chat = (function()
|
|||
stickToScreen: function(fromInitialCall) // Make chat stick to right hand side of screen
|
||||
{
|
||||
chat.show();
|
||||
if(!isStuck || fromInitialCall) { // Stick it to
|
||||
padcookie.setPref("chatAlwaysVisible", true);
|
||||
$('#chatbox').addClass("stickyChat");
|
||||
$('#titlesticky').hide();
|
||||
$('#editorcontainer').css({"right":"192px"});
|
||||
$('.stickyChat').css("top",$('#editorcontainer').offset().top+"px");
|
||||
isStuck = true;
|
||||
} else { // Unstick it
|
||||
padcookie.setPref("chatAlwaysVisible", false);
|
||||
$('.stickyChat').css("top", "auto");
|
||||
$('#chatbox').removeClass("stickyChat");
|
||||
$('#titlesticky').show();
|
||||
$('#editorcontainer').css({"right":"0px"});
|
||||
isStuck = false;
|
||||
}
|
||||
isStuck = (!isStuck || fromInitialCall);
|
||||
|
||||
$('#chatbox, .sticky-container').toggleClass("stickyChat", isStuck);
|
||||
padcookie.setPref("chatAlwaysVisible", isStuck);
|
||||
$('#options-stickychat').prop('checked', isStuck);
|
||||
},
|
||||
chatAndUsers: function(fromInitialCall)
|
||||
{
|
||||
var toEnable = $('#options-chatandusers').is(":checked");
|
||||
if(toEnable || !userAndChat || fromInitialCall){
|
||||
padcookie.setPref("chatAndUsers", true);
|
||||
chat.stickToScreen(true);
|
||||
$('#options-stickychat').prop('checked', true)
|
||||
$('#options-chatandusers').prop('checked', true)
|
||||
$('#options-stickychat').prop("disabled", "disabled");
|
||||
$('#users').addClass("chatAndUsers");
|
||||
$("#chatbox").addClass("chatAndUsersChat");
|
||||
// redraw
|
||||
userAndChat = true;
|
||||
padeditbar.redrawHeight()
|
||||
}else{
|
||||
padcookie.setPref("chatAndUsers", false);
|
||||
$('#options-stickychat').prop("disabled", false);
|
||||
$('#users').removeClass("chatAndUsers");
|
||||
$("#chatbox").removeClass("chatAndUsersChat");
|
||||
userAndChat = false;
|
||||
}
|
||||
padcookie.setPref("chatAndUsers", userAndChat);
|
||||
$('#users, .sticky-container').toggleClass("chatAndUsers stickyUsers", userAndChat);
|
||||
$("#chatbox").toggleClass("chatAndUsersChat", userAndChat);
|
||||
},
|
||||
hide: function ()
|
||||
{
|
||||
|
|
|
|||
|
|
@ -73,7 +73,7 @@ function randomString()
|
|||
// callback: the function to call when all above succeeds, `val` is the value supplied by the user
|
||||
var getParameters = [
|
||||
{ name: "noColors", checkVal: "true", callback: function(val) { settings.noColors = true; $('#clearAuthorship').hide(); } },
|
||||
{ name: "showControls", checkVal: "false", callback: function(val) { $('#editbar').addClass('hideControlsEditbar'); $('#editorcontainer').addClass('hideControlsEditor'); } },
|
||||
{ name: "showControls", checkVal: "true", callback: function(val) { $('#editbar').css('display', 'flex') } },
|
||||
{ name: "showChat", checkVal: "true", callback: function(val) { $('#chaticon').show(); } },
|
||||
{ name: "showLineNumbers", checkVal: "false", callback: function(val) { settings.LineNumbersDisabled = true; } },
|
||||
{ name: "useMonospaceFont", checkVal: "true", callback: function(val) { settings.useMonospaceFontGlobal = true; } },
|
||||
|
|
|
|||
|
|
@ -141,11 +141,6 @@ var padeditbar = (function()
|
|||
init: function() {
|
||||
var self = this;
|
||||
self.dropdowns = [];
|
||||
// Listen for resize events (sucks but needed as iFrame ace_inner has to be position absolute
|
||||
// A CSS fix for this would be nice but I'm not sure how we'd do it.
|
||||
$(window).resize(function(){
|
||||
self.redrawHeight();
|
||||
});
|
||||
|
||||
$("#editbar .editbarbutton").attr("unselectable", "on"); // for IE
|
||||
$("#editbar").removeClass("disabledtoolbar").addClass("enabledtoolbar");
|
||||
|
|
@ -160,10 +155,6 @@ var padeditbar = (function()
|
|||
bodyKeyEvent(evt);
|
||||
});
|
||||
|
||||
$('#editbar').show();
|
||||
|
||||
this.redrawHeight();
|
||||
|
||||
registerDefaultCommands(self);
|
||||
|
||||
hooks.callAll("postToolbarInit", {
|
||||
|
|
@ -173,7 +164,6 @@ var padeditbar = (function()
|
|||
},
|
||||
isEnabled: function()
|
||||
{
|
||||
// return !$("#editbar").hasClass('disabledtoolbar');
|
||||
return true;
|
||||
},
|
||||
disable: function()
|
||||
|
|
@ -185,55 +175,6 @@ var padeditbar = (function()
|
|||
this.commands[cmd] = callback;
|
||||
return this;
|
||||
},
|
||||
calculateEditbarHeight: function() {
|
||||
// if we're on timeslider, there is nothing on editbar, so we just use zero
|
||||
var onTimeslider = $('.menu_left').length === 0;
|
||||
if (onTimeslider) return 0;
|
||||
|
||||
// if editbar has both menu left and right, its height must be
|
||||
// the max between the height of these two parts
|
||||
var leftMenuPosition = $('.menu_left').offset().top;
|
||||
var rightMenuPosition = $('.menu_right').offset().top;
|
||||
var editbarHasMenuLeftAndRight = (leftMenuPosition === rightMenuPosition);
|
||||
|
||||
var height;
|
||||
if (editbarHasMenuLeftAndRight) {
|
||||
height = Math.max($('.menu_left').height(), $('.menu_right').height());
|
||||
}
|
||||
else {
|
||||
height = $('.menu_left').height();
|
||||
}
|
||||
|
||||
return height;
|
||||
},
|
||||
redrawHeight: function(){
|
||||
var minimunEditbarHeight = self.calculateEditbarHeight();
|
||||
var editbarHeight = minimunEditbarHeight + 1 + "px";
|
||||
var containerTop = minimunEditbarHeight + 6 + "px";
|
||||
$('#editbar').css("height", editbarHeight);
|
||||
|
||||
$('#editorcontainer').css("top", containerTop);
|
||||
|
||||
// make sure pop ups are in the right place
|
||||
if($('#editorcontainer').offset()){
|
||||
$('.popup').css("top", $('#editorcontainer').offset().top + "px");
|
||||
}
|
||||
|
||||
// If sticky chat is enabled..
|
||||
if($('#options-stickychat').is(":checked")){
|
||||
if($('#editorcontainer').offset()){
|
||||
$('#chatbox').css("top", $('#editorcontainer').offset().top + "px");
|
||||
}
|
||||
};
|
||||
|
||||
// If chat and Users is enabled..
|
||||
if($('#options-chatandusers').is(":checked")){
|
||||
if($('#editorcontainer').offset()){
|
||||
$('#users').css("top", $('#editorcontainer').offset().top + "px");
|
||||
}
|
||||
}
|
||||
|
||||
},
|
||||
registerDropdownCommand: function (cmd, dropdown) {
|
||||
dropdown = dropdown || cmd;
|
||||
self.dropdowns.push(dropdown)
|
||||
|
|
@ -256,6 +197,11 @@ var padeditbar = (function()
|
|||
},
|
||||
toggleDropDown: function(moduleName, cb)
|
||||
{
|
||||
// do nothing if users are sticked
|
||||
if (moduleName === "users" && $('#users').hasClass('stickyUsers')) {
|
||||
return;
|
||||
}
|
||||
|
||||
// hide all modules and remove highlighting of all buttons
|
||||
if(moduleName == "none")
|
||||
{
|
||||
|
|
|
|||
|
|
@ -44,10 +44,10 @@ var padmodals = (function()
|
|||
});
|
||||
},
|
||||
showOverlay: function() {
|
||||
$("#overlay").show();
|
||||
$("#toolbar-overlay").show();
|
||||
},
|
||||
hideOverlay: function() {
|
||||
$("#overlay").hide();
|
||||
$("#toolbar-overlay").hide();
|
||||
}
|
||||
};
|
||||
return self;
|
||||
|
|
|
|||
|
|
@ -110,5 +110,5 @@
|
|||
right: 0;
|
||||
}
|
||||
|
||||
#titlesticky { display: none; }
|
||||
.stick-to-screen-btn { display: none; }
|
||||
}
|
||||
|
|
@ -1,5 +0,0 @@
|
|||
@media (max-width:600px) {
|
||||
#sidediv {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
|
|
@ -5,6 +5,7 @@
|
|||
;
|
||||
%>
|
||||
<!doctype html>
|
||||
|
||||
<% e.begin_block("htmlHead"); %>
|
||||
<html class="<%=hooks.clientPluginNames().join(' '); %>">
|
||||
<% e.end_block(); %>
|
||||
|
|
@ -57,10 +58,12 @@
|
|||
<!-- head and body had been removed intentionally -->
|
||||
|
||||
<% e.begin_block("body"); %>
|
||||
|
||||
<!----------------------------->
|
||||
<!--------- TOOLBAR ----------->
|
||||
<!----------------------------->
|
||||
<div id="editbar" class="toolbar" title="Toolbar (Alt F9)">
|
||||
<div id="overlay">
|
||||
<div id="overlay-inner"></div>
|
||||
</div>
|
||||
<div id="toolbar-overlay"></div>
|
||||
|
||||
<ul class="menu_left" role="toolbar">
|
||||
<% e.begin_block("editbarMenuLeft"); %>
|
||||
|
|
@ -73,33 +76,18 @@
|
|||
<% e.end_block(); %>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<% e.begin_block("afterEditbar"); %><% e.end_block(); %>
|
||||
|
||||
<div id="users">
|
||||
<% e.begin_block("userlist"); %>
|
||||
<div id="connectionstatus"></div>
|
||||
<div id="myuser">
|
||||
<div id="mycolorpicker">
|
||||
<div id="colorpicker"></div>
|
||||
<button id="mycolorpickersave" data-l10n-id="pad.colorpicker.save" class="btn btn-primary"></button>
|
||||
<button id="mycolorpickercancel" data-l10n-id="pad.colorpicker.cancel" class="btn btn-default"></button>
|
||||
<span id="mycolorpickerpreview" class="myswatchboxhoverable"></span>
|
||||
</div>
|
||||
<div id="myswatchbox"><div id="myswatch"></div></div>
|
||||
<div id="myusernameform"><input type="text" id="myusernameedit" disabled="disabled" data-l10n-id="pad.userlist.entername"></div>
|
||||
</div>
|
||||
<div id="otherusers" aria-role="document">
|
||||
<div id="guestprompts"></div>
|
||||
<table id="otheruserstable" cellspacing="0" cellpadding="0" border="0">
|
||||
<tr><td></td></tr>
|
||||
</table>
|
||||
</div>
|
||||
<div id="userlistbuttonarea"></div>
|
||||
<% e.end_block(); %>
|
||||
</div>
|
||||
|
||||
<div id="editorcontainerbox">
|
||||
|
||||
<% e.begin_block("editorContainerBox"); %>
|
||||
|
||||
<!----------------------------->
|
||||
<!--- PAD EDITOR (in iframe) -->
|
||||
<!----------------------------->
|
||||
<div id="editorcontainer" class="editorcontainer"></div>
|
||||
|
||||
<div id="editorloadingbox">
|
||||
<div id="passwordRequired">
|
||||
<p data-l10n-id="pad.passwordRequired">You need a password to access this pad</p>
|
||||
|
|
@ -121,12 +109,14 @@
|
|||
<% e.end_block(); %>
|
||||
<noscript><strong>Sorry, you have to enable Javascript in order to use this.</strong></noscript>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<!------------------------------------------------------------->
|
||||
<!-- SETTINGS POPUP (change font, language, chat parameters) -->
|
||||
<!------------------------------------------------------------->
|
||||
|
||||
<div id="settings" class="popup">
|
||||
<h1 data-l10n-id="pad.settings.padSettings"></h1>
|
||||
<div class="row">
|
||||
<div class="column">
|
||||
<% e.begin_block("mySettings"); %>
|
||||
<h2 data-l10n-id="pad.settings.myView"></h2>
|
||||
<p>
|
||||
|
|
@ -150,13 +140,9 @@
|
|||
<label for="options-rtlcheck" data-l10n-id="pad.settings.rtlcheck"></label>
|
||||
</p>
|
||||
<% e.end_block(); %>
|
||||
<table>
|
||||
|
||||
<% e.begin_block("mySettings.dropdowns"); %>
|
||||
<tr>
|
||||
<td>
|
||||
<label for="viewfontmenu" data-l10n-id="pad.settings.fontType">Font type:</label>
|
||||
</td>
|
||||
<td>
|
||||
<select id="viewfontmenu">
|
||||
<option value="normal" data-l10n-id="pad.settings.fontType.normal"></option>
|
||||
<option value="monospace" data-l10n-id="pad.settings.fontType.monospaced"></option>
|
||||
|
|
@ -179,37 +165,29 @@
|
|||
<option value="sansserif" data-l10n-id="pad.settings.fontType.sansserif"></option>
|
||||
<option value="serif" data-l10n-id="pad.settings.fontType.serif"></option>
|
||||
</select>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
|
||||
<label for="languagemenu" data-l10n-id="pad.settings.language">Language:</label>
|
||||
</td>
|
||||
<td>
|
||||
<select id="languagemenu">
|
||||
<% for (lang in langs) { %>
|
||||
<option value="<%=lang%>"><%=langs[lang].nativeName%></option>
|
||||
<% } %>
|
||||
</select>
|
||||
</td>
|
||||
</tr>
|
||||
<% e.end_block(); %>
|
||||
</table>
|
||||
</div>
|
||||
<div class="column">
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
|
||||
<h2 data-l10n-id="pad.settings.about">About</h2>
|
||||
<span data-l10n-id="pad.settings.poweredBy">Powered by</span>
|
||||
<a href="http://etherpad.org">Etherpad-lite</a>
|
||||
<% if (settings.exposeVersion) { %>(commit <%=settings.getGitCommit()%>)<% } %>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<!------------------------->
|
||||
<!-- IMPORT EXPORT POPUP -->
|
||||
<!------------------------->
|
||||
|
||||
<div id="import_export" class="popup">
|
||||
<h1 data-l10n-id="pad.importExport.import_export"></h1>
|
||||
<div class="column acl-write">
|
||||
<div class="acl-write">
|
||||
<% e.begin_block("importColumn"); %>
|
||||
<h2 data-l10n-id="pad.importExport.import"></h2>
|
||||
<div class="importmessage" id="importmessageabiword" data-l10n-id="pad.importExport.abiword.innerHTML"></div><br>
|
||||
|
|
@ -229,19 +207,36 @@
|
|||
</form>
|
||||
<% e.end_block(); %>
|
||||
</div>
|
||||
<div class="column" id="exportColumn">
|
||||
<div id="exportColumn">
|
||||
<h2 data-l10n-id="pad.importExport.export"></h2>
|
||||
<% e.begin_block("exportColumn"); %>
|
||||
<a id="exportetherpada" target="_blank" class="exportlink"><div class="exporttype" id="exportetherpad" data-l10n-id="pad.importExport.exportetherpad"></div></a>
|
||||
<a id="exporthtmla" target="_blank" class="exportlink"><div class="exporttype" id="exporthtml" data-l10n-id="pad.importExport.exporthtml"></div></a>
|
||||
<a id="exportplaina" target="_blank" class="exportlink"><div class="exporttype" id="exportplain" data-l10n-id="pad.importExport.exportplain"></div></a>
|
||||
<a id="exportworda" target="_blank" class="exportlink"><div class="exporttype" id="exportword" data-l10n-id="pad.importExport.exportword"></div></a>
|
||||
<a id="exportpdfa" target="_blank" class="exportlink"><div class="exporttype" id="exportpdf" data-l10n-id="pad.importExport.exportpdf"></div></a>
|
||||
<a id="exportopena" target="_blank" class="exportlink"><div class="exporttype" id="exportopen" data-l10n-id="pad.importExport.exportopen"></div></a>
|
||||
<a id="exportetherpada" target="_blank" class="exportlink">
|
||||
<div class="exporttype" id="exportetherpad" data-l10n-id="pad.importExport.exportetherpad"></div>
|
||||
</a>
|
||||
<a id="exporthtmla" target="_blank" class="exportlink">
|
||||
<div class="exporttype" id="exporthtml" data-l10n-id="pad.importExport.exporthtml"></div>
|
||||
</a>
|
||||
<a id="exportplaina" target="_blank" class="exportlink">
|
||||
<div class="exporttype" id="exportplain" data-l10n-id="pad.importExport.exportplain"></div>
|
||||
</a>
|
||||
<a id="exportworda" target="_blank" class="exportlink">
|
||||
<div class="exporttype" id="exportword" data-l10n-id="pad.importExport.exportword"></div>
|
||||
</a>
|
||||
<a id="exportpdfa" target="_blank" class="exportlink">
|
||||
<div class="exporttype" id="exportpdf" data-l10n-id="pad.importExport.exportpdf"></div>
|
||||
</a>
|
||||
<a id="exportopena" target="_blank" class="exportlink">
|
||||
<div class="exporttype" id="exportopen" data-l10n-id="pad.importExport.exportopen"></div>
|
||||
</a>
|
||||
<% e.end_block(); %>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<!---------------------------------------------------->
|
||||
<!-- CONNECTIVITY POPUP (when you get disconnected) -->
|
||||
<!---------------------------------------------------->
|
||||
|
||||
<div id="connectivity" class="popup">
|
||||
<% e.begin_block("modals"); %>
|
||||
<div class="connected visible">
|
||||
|
|
@ -309,18 +304,22 @@
|
|||
<% e.end_block(); %>
|
||||
</div>
|
||||
|
||||
|
||||
<!-------------------------------->
|
||||
<!-- EMBED POPUP (Share, embed) -->
|
||||
<!-------------------------------->
|
||||
|
||||
<div id="embed" class="popup">
|
||||
<% e.begin_block("embedPopup"); %>
|
||||
<div id="embedreadonly" class="right acl-write">
|
||||
<h1 data-l10n-id="pad.share"></h1>
|
||||
<div id="embedreadonly" class="acl-write">
|
||||
<input type="checkbox" id="readonlyinput">
|
||||
<label for="readonlyinput" data-l10n-id="pad.share.readonly"></label>
|
||||
</div>
|
||||
<h1 data-l10n-id="pad.share"></h1>
|
||||
<div id="linkcode">
|
||||
<h2 data-l10n-id="pad.share.link"></h2>
|
||||
<input id="linkinput" type="text" value="" onclick="this.select()">
|
||||
</div>
|
||||
<br>
|
||||
<div id="embedcode">
|
||||
<h2 data-l10n-id="pad.share.emebdcode"></h2>
|
||||
<input id="embedinput" type="text" value="" onclick="this.select()">
|
||||
|
|
@ -328,6 +327,42 @@
|
|||
<% e.end_block(); %>
|
||||
</div>
|
||||
|
||||
<div class="sticky-container">
|
||||
|
||||
<!---------------------------------------------------------------------->
|
||||
<!-- USERS POPUP (set username, color, see other users names & color) -->
|
||||
<!---------------------------------------------------------------------->
|
||||
|
||||
<div id="users" class="popup">
|
||||
<% e.begin_block("userlist"); %>
|
||||
<div id="connectionstatus"></div>
|
||||
<div id="myuser">
|
||||
<div id="mycolorpicker" class="popup">
|
||||
<div id="colorpicker"></div>
|
||||
<button id="mycolorpickersave" data-l10n-id="pad.colorpicker.save" class="btn btn-primary"></button>
|
||||
<button id="mycolorpickercancel" data-l10n-id="pad.colorpicker.cancel" class="btn btn-default"></button>
|
||||
<span id="mycolorpickerpreview" class="myswatchboxhoverable"></span>
|
||||
</div>
|
||||
<div id="myswatchbox"><div id="myswatch"></div></div>
|
||||
<div id="myusernameform">
|
||||
<input type="text" id="myusernameedit" disabled="disabled" data-l10n-id="pad.userlist.entername">
|
||||
</div>
|
||||
</div>
|
||||
<div id="otherusers" aria-role="document">
|
||||
<div id="guestprompts"></div>
|
||||
<table id="otheruserstable" cellspacing="0" cellpadding="0" border="0">
|
||||
<tr><td></td></tr>
|
||||
</table>
|
||||
</div>
|
||||
<div id="userlistbuttonarea"></div>
|
||||
<% e.end_block(); %>
|
||||
</div>
|
||||
|
||||
|
||||
<!----------------------------->
|
||||
<!----------- CHAT ------------>
|
||||
<!----------------------------->
|
||||
|
||||
<div id="chaticon" onclick="chat.show();return false;" title="Chat (Alt C)">
|
||||
<span id="chatlabel" data-l10n-id="pad.chat"></span>
|
||||
<span class="buttonicon buttonicon-chat"></span>
|
||||
|
|
@ -335,9 +370,10 @@
|
|||
</div>
|
||||
|
||||
<div id="chatbox">
|
||||
<div id="titlebar"><span id ="titlelabel" data-l10n-id="pad.chat"></span>
|
||||
<a id="titlecross" onClick="chat.hide();return false;">- </a>
|
||||
<a id="titlesticky" onClick="chat.stickToScreen(true);$('#options-stickychat').prop('checked', true);return false;" data-l10n-id="pad.chat.stick.title">█ </a>
|
||||
<div id="titlebar">
|
||||
<span id ="titlelabel" data-l10n-id="pad.chat"></span>
|
||||
<a id="titlecross" class="hide-reduce-btn" onClick="chat.hide();return false;">- </a>
|
||||
<a id="titlesticky" class="stick-to-screen-btn" onClick="chat.stickToScreen(true);return false;" data-l10n-id="pad.chat.stick.title">█ </a>
|
||||
</div>
|
||||
<div id="chattext" class="authorColors" aria-live="polite" aria-relevant="additions removals text" role="log" aria-atomic="false">
|
||||
<div alt="loading.." id="chatloadmessagesball" class="chatloadmessages loadingAnimation" align="top"></div>
|
||||
|
|
@ -349,11 +385,19 @@
|
|||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<% e.end_block(); %>
|
||||
|
||||
</div> <!-- End of #editorcontainerbox -->
|
||||
|
||||
<% e.end_block(); %>
|
||||
|
||||
|
||||
<!----------------------------->
|
||||
<!-------- JAVASCRIPT --------->
|
||||
<!----------------------------->
|
||||
|
||||
<% e.begin_block("scripts"); %>
|
||||
|
||||
<script type="text/javascript" src="../static/js/require-kernel.js"></script>
|
||||
|
|
|
|||
Loading…
Reference in a new issue