Merge pull request #3496 from seballot/develop

This commit merges the initial implementation for "colibris", a new skin
optionally shipped with Etherpad on top of the default one.

Resolves #3441

src/static/js/ace2_inner.js

@@ -975,9 +975,8 @@ function Ace2Inner(){
       showsuserselections: setClassPresenceNamed(root, "userSelections"),
       showslinenumbers : function(value){
         hasLineNumbers = !! value;
-        // disable line numbers on mobile devices
-        if (browser.mobile) hasLineNumbers = false;
         setClassPresence(sideDiv, "sidedivhidden", !hasLineNumbers);
+        setClassPresence(sideDiv.parentNode, "sidediv-hidden", !hasLineNumbers);
         fixView();
       },
       grayedout: setClassPresenceNamed(outerWin.document.body, "grayedout"),

src/static/skins/colibris/index.css

@@ -0,0 +1,82 @@
+#button,
+body,
+form {
+  border: none
+}
+
+body {
+  background: url(images/fond.jpg) center center no-repeat fixed #fff;
+  font-family: Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif !important;
+  font-size: 16px;
+  line-height: 1.42857143;
+  color: #333;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-size: cover;
+}
+
+#wrapper {
+  border-top: none;
+  margin-top: 0;
+  padding: 0;
+  background: 0 0;
+  box-shadow: none
+}
+
+#inner {
+  background: transparent;
+  padding-top: 0;
+  width: 350px;
+  max-width: 350px;
+  text-align: center;
+  color:#FFF;
+}
+
+#label {
+  text-shadow: none;
+  color: #FFF;
+  font-weight: normal;
+  text-align: center;
+}
+
+#button {
+  margin: 0 auto;
+  text-align: center;
+  width: 100%;
+  text-shadow: none;
+  font-size: 23px;
+  line-height: 1.8;
+  color: #64d29b;
+  background: #586a69;
+  border-radius: 3px;
+  box-shadow: none;
+  height: 53px;
+  border: none;
+  display: block;
+}
+
+
+button[type=submit] {
+  border-top-right-radius: 3px;
+  border-bottom-right-radius: 3px;
+  left: 305px;
+  color: #64d29b;
+  background: #586a69;
+  border: none;
+}
+
+#button:hover,
+button[type=submit]:hover {
+  cursor: pointer;
+  background: #64d29b;
+  border: 2px solid #586a69;
+  color: #586a69;
+}
+
+#padname {
+  height: 38px;
+  max-width: 350px;
+  padding: 0 12px;
+  position: relative;
+}

src/static/skins/colibris/index.js

@@ -0,0 +1,6 @@
+function customStart()
+{
+  //define your javascript here
+  //jquery is available - except index.js
+  //you can load extra scripts with $.getScript http://api.jquery.com/jQuery.getScript/
+}

src/static/skins/colibris/pad.css

@@ -0,0 +1,127 @@
+@import url("src/layout.css");
+@import url("src/pad-editor.css");
+
+@import url("src/components/buttons.css");
+@import url("src/components/popup.css");
+
+@import url("src/components/chat.css");
+@import url("src/components/sidediv.css");
+@import url("src/components/gritter.css");
+@import url("src/components/table-of-content.css");
+@import url("src/components/toolbar.css");
+@import url("src/components/users.css");
+@import url("src/components/form.css");
+@import url("src/components/import-export.css");
+
+@import url("src/plugins/brightcolorpicker.css");
+@import url("src/plugins/comments_page.css");
+@import url("src/plugins/font_color.css");
+@import url("src/plugins/set_title_on_pad.css");
+@import url("src/plugins/tables2.css");
+@import url("src/plugins/embedded_hyperlinks.css");
+@import url("src/plugins/author_hover.css");
+
+/* NEUTRAL COLOR */
+body,
+#innerdocbody
+#users,
+#chattext,
+#chatinput,
+#chatlabel,
+#toc,
+#tocItems a,
+.toolbar ul li a:hover .buttonicon,
+.toolbar ul li a,
+.toolbar ul li select,
+#mycolorpickercancel,
+.btn-default,
+.color\:black,
+[data-color=black],
+#chattext.authorColors p, #chattext.authorColors span,
+#chattext .time,
+#tbl_context_menu ul .yuimenuitemlabel,
+.yui-skin-sam .yui-split-button button em:not(.color-picker-button),
+#yui-picker-panel .button-group .yui-button:first-child button,
+#newComment .sidebar-comment input[type=reset], #newComment .sidebar-comment input[type=reset]:hover, 
+#newComment .sidebar-comment input[type=submit]:hover,
+.suggestion, .comment-reply-input, .reply-suggestion p:not(.reply-comment-suggest-from-p), .comment-text,
+.sidebar-comment textarea, .reply-comment-suggest label, .comment-suggest label, .comment-reply-input
+#comments, #newComments, .reply-comment-suggest-from-p,
+.comment-changeFrom-value,
+.comment-changeTo-value,
+.reply-suggestion .reply-comment-suggest-from,
+.suggestion .comment-suggest-from,
+.hyperlink-dialog>.hyperlink-url,
+.timeslider #padcontent span ,
+.exporttype, .timeslider #export > p 
+{ color: #2E3338 !important; }
+
+/* MENUS ICONS */
+#edit_title:before,
+#tbl-menu:before
+{ color: #767676 !important; }
+/* MENU BUTTONS */
+.timeslider #editbar .buttontext 
+{ background-color: #767676 !important; }
+
+/* PRIMARY BUTTONS */
+#mycolorpickersave,
+.btn-primary,
+#tbl_btn_close,
+#save_title button,
+#yui-picker-panel .button-group .yui-button:last-child button,
+#newComment.sidebar-comment input[type=submit],
+.comment-changeTo-approve input[type=submit],
+.hyperlink-dialog>.hyperlink-save,
+#importsubmitinput, #forcereconnect
+{ 
+  background-color: #64d29b; 
+  color: white;
+}
+
+/* PRIMARY COLOR */
+h1, 
+#titlelabel,
+.yui-skin-sam .yui-panel .hd,
+p[data-l10n-id="ep_comments_page.comment"],
+.comment-reply-input-label span,
+.stepper, #importmessageabiword, #importmessageabiword > a
+{ color: #64d29b; }
+#ui-slider-handle, #playpause_button_icon {
+  background-color: #64d29b; 
+}
+.stepper {
+  border-color: #64d29b;
+}
+
+/* BACKGROUND COLOR */
+#editorcontainer, #padmain  {
+  background-color: #f9f9f9 !important;
+}
+
+
+/* NEUTRAL FONT */
+body,
+#innerdocbody,
+#chatinput,
+.toolbar ul li select,
+button, input, select, textarea,
+td[name=tData],
+#comments, #newComments,
+#sidediv,
+#comments .sidebar-comment,
+#timeslider #timer, .exporttype
+{ font-family: Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif; }
+
+/* PRIMARY FONT */
+h1,
+#titlelabel,
+#chatlabel,
+.btn,
+.yui-skin-sam .yui-panel .hd,
+.reply-suggestion p:not(.reply-comment-suggest-from-p),
+p[data-l10n-id="ep_comments_page.comment"],
+#newComment.sidebar-comment input[type=submit],
+.comment-changeTo-approve input[type=submit],
+.hyperlink-dialog>.hyperlink-save
+{ font-family: Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif !important;  }

src/static/skins/colibris/pad.js

@@ -0,0 +1,4 @@
+function customStart()
+{
+  $('#pad_title').show();
+}

src/static/skins/colibris/src/components/buttons.css

@@ -0,0 +1,21 @@
+.btn, #mycolorpickercancel, #mycolorpickersave, #save_title button, #yui-picker-panel .button-group .yui-button button, .hyperlink-dialog>.hyperlink-save, .timeslider #editbar .buttontext,
+#importsubmitinput, #forcereconnect
+{
+  margin-right: 10px;
+  padding: 5px 20px;
+  border-radius: 4px;
+  font-size: 13px;
+  line-height: 1.5;
+  width: auto;
+  border: none !important;
+  font-weight: bold;
+  text-transform: uppercase;
+  position: relative;
+  background: none;
+  top: 0;
+  left: 0;
+}
+
+.btn:hover, #mycolorpickercancel:hover, #mycolorpickersave:hover, #save_title button:hover, .hyperlink-dialog>.hyperlink-save:hover, #importsubmitinput:hover, #forcereconnect:hover {
+  cursor: pointer;
+}

src/static/skins/colibris/src/components/chat.css

@@ -0,0 +1,100 @@
+#chatbox {
+  background: none;
+  padding: 0;
+  background-color: white;
+  border: none;
+  box-shadow: 0 0 0 1px rgba(99, 114, 130, 0.16), 0 8px 16px rgba(27, 39, 51, 0.08);
+  width: 400px;
+  height: 300px;
+}
+
+#titlebar {
+  bottom: 0;
+  line-height: 39px;
+  height: 44px;
+  padding: 0 7px;
+  z-index: 20000;
+  border-bottom: 1px solid #d2d2d2;
+}
+
+#titlelabel, #chatlabel {
+  text-transform: uppercase;
+  font-weight: bold;  
+}
+
+#titlelabel { font-size: 16px; }
+#chatlabel { margin-right: 15px; }
+
+#chattext {
+  top: 45px;
+  font-size: 13px;
+  padding: 10px;
+  bottom: 45px;
+  overflow-y: auto;
+}
+
+#chattext.authorColors p, #chattext.authorColors span {
+  background-color: transparent !important;
+}
+
+#chattext p b {
+  color: #4c4c4c;
+}
+
+#chattext::-webkit-scrollbar-track {
+  background-color: #f6f6f6;
+  border: 1px solid #f0f0f0;
+}
+
+#chattext::-webkit-scrollbar {
+  width: 7px;
+}
+
+#chattext::-webkit-scrollbar-thumb {
+  border-radius: 10px;
+  background-color: #C5C5C5;
+}
+
+#chatinputbox {
+  padding: 0 5px 5px 10px;
+}
+
+#chatinput {
+  width: calc(100% - 20px);
+  float: right;  
+}
+
+#chatbox.stickyChat {
+  width: 193px !important;
+  background-color: #f9f9f9 !important;
+  border: none !important;
+}
+
+#chatbox.stickyChat #chattext {
+  padding: 6px;
+}
+
+#chatbox.stickyChat #chatinputbox {
+  padding: 5px 5px 3px 5px;
+}
+
+#chaticon {
+  box-shadow: 0 0 0 1px rgba(99, 114, 130, 0.16), 0 8px 16px rgba(27, 39, 51, 0.08);
+  border: none;
+  padding: 10px 20px;
+  right: 30px;
+}
+
+@media (max-width: 720px) {
+  #chaticon {
+    right: 0;
+    bottom: 44px;
+  }
+
+  #chatbox {
+    width: 100%;
+    right: 0;
+  }
+
+  #titlesticky { display: none; }
+}

src/static/skins/colibris/src/components/form.css

@@ -0,0 +1,8 @@
+#input_title, #chatinput, .hyperlink-dialog>.hyperlink-url {
+  border: 1px solid #d2d2d2;
+  height: 18px;
+  border-radius: 3px;
+  padding: 8px 10px;
+  background: none !important;
+  box-shadow: none !important;
+}

src/static/skins/colibris/src/components/gritter.css

@@ -0,0 +1,28 @@
+/* Popups at the bottom of the page to indicate when the pad expires, and others stuff */
+
+.gritter-title {
+  text-shadow: none;
+}
+
+#gritter-notice-wrapper {
+  background-color: #fff;
+  box-shadow: 0 0 0 1px rgba(99, 114, 130, 0.16), 0 8px 16px rgba(27, 39, 51, 0.08);
+  border-radius: 3px;
+  padding: 15px 20px 5px 30px;
+  bottom: 50px !important;
+  right: 30px !important;
+}
+
+@media (max-width: 1100px) {
+  #gritter-notice-wrapper {
+    display: none;
+  }
+}
+
+.gritter-item {
+  font-family: Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif !important;
+  color: #4e545b;
+  font-size: 12px;
+  line-height: 20px;
+  padding: 0;
+}

src/static/skins/colibris/src/components/import-export.css

@@ -0,0 +1,33 @@
+#exportColumn {
+  margin-top: 0;
+  padding-left: 20px;
+  width: calc(50% - 20px);
+}
+
+#importmessageabiword { 
+  font-style: italic;
+  font-size: 13px;
+}
+#importmessageabiword > a {
+  font-weight: bold;
+  text-decoration: underline;
+}
+
+.exportlink {
+  font-size: 14px;
+  margin: 0;
+  margin-bottom: 7px;
+  margin-left: 10px;
+}
+
+.exporttype {
+  margin-left: 5px;
+  font-size: 14px;
+}
+
+#importmessagefail {
+  font-size: 13px;
+  margin-top: 10px;
+}
+
+#importsubmitinput[disabled] { opacity: .6; }

src/static/skins/colibris/src/components/popup.css

@@ -0,0 +1,30 @@
+#users,
+#mycolorpicker,
+.popup,
+.hyperlink-dialog {
+  border-radius: 3px;
+  padding: 20px 20px;
+  background: none;
+  background-color: white;
+  border: none;
+  box-shadow: 0 0 0 1px rgba(99, 114, 130, 0.16), 0 8px 16px rgba(27, 39, 51, 0.08);
+}
+
+#users input[type=text],
+.popup input[type=text] {
+  border: none !important;
+  border-bottom: 1px solid #d7d8da !important;
+}
+
+.popup h1 {
+  margin-bottom: 15px;
+}
+
+.popup h2 {
+  margin-bottom: 15px;
+}
+
+.popup p {
+  margin: 10px 0;
+}
+

src/static/skins/colibris/src/components/sidediv.css

@@ -0,0 +1,30 @@
+#sidediv {
+  background-color: transparent;
+  border: none;
+}
+
+#sidedivinner>div:before {
+  font-size: 13px;
+  padding-right: 18px !important;
+  color: #6a6a6b;
+  text-transform: uppercase;
+  font-size: 11px !important;
+  font-weight: bold;
+}
+
+#sidedivinner>div,
+#sidedivinner.authorColors>div,
+#sidedivinner.authorColors>div.primary-none {
+  padding-right: 5px !important;
+  border-right: 5px solid transparent;
+}
+
+#sidedivinner>div {  
+  line-height: 24px;
+  font-size: 10px !important;
+  color: #a0a0a0;
+}
+
+#sidedivinner.authorColors>div, #sidedivinner.authorColors>div.primary-none, #sidedivinner>div {
+  padding-right: 8px !important;
+}

src/static/skins/colibris/src/components/table-of-content.css

@@ -0,0 +1,11 @@
+#toc {
+  background: none !important;
+  background-color: rgb(249, 249, 249) !important;
+  padding: 20px !important;
+  width: 146px !important;
+  padding-left: 15px !important;
+}
+
+#tocItems {
+  line-height: 40px !important;
+}

src/static/skins/colibris/src/components/toolbar.css

@@ -0,0 +1,145 @@
+.toolbar {
+  height: 39px !important;
+  padding-top: 0;
+  margin: 0;
+  background-color: white !important;
+  background: none;
+  border: 1px solid #d2d2d2
+}
+
+.toolbar .buttonicon {
+  background-color: transparent;
+  font-size: 14px;
+  color: #767676;
+}
+
+.toolbar ul li.separator {
+  padding: 0;
+  visibility: visible;
+  width: 1px;
+  margin: 0 10px;
+  margin-right: 6px;
+  height: 39px;
+  background-color: rgba(78, 85, 92, 0.22);
+}
+
+.toolbar.condensed ul li {
+  margin-left: 0;
+}
+
+.toolbar.condensed ul li.separator {
+  margin: 0 5px;
+}
+
+.toolbar ul li a {
+  background-color: transparent;
+  background: none;
+  border: none;
+  margin-top: 6px;
+}
+
+.toolbar ul li a:hover,
+.toolbar ul li a.selected,
+.toolbar ul li a:focus {
+  background: none !important; 
+  border-radius: 0;
+}
+
+.toolbar ul li a:hover {
+  background:#f7f7f7!important
+}
+
+.toolbar ul li a.selected,
+.toolbar ul li a:focus {
+   background: #eaeaea!important;
+}
+
+.toolbar ul li select {
+  border: none;
+  border-bottom: 1px solid #d7d8da;
+  border-radius: 0;
+  width: 90px;
+  margin-top: 5px;
+}
+
+.toolbar ul {
+  height: 39px;
+}
+
+.toolbar ul.menu_left {
+  left: 8px;
+}
+
+.toolbar ul.menu_right {
+  right: 0;
+  padding: 0;
+}
+
+.toolbar ul li[data-key=showusers] a {
+  margin: 0;
+  height: 59px;
+  line-height: 25px;
+  width: 45px;
+  margin-left: -10px;
+  border-radius: 0;
+}
+
+@media (max-width: 1000px) {
+  .toolbar ul li.separator {
+    margin: 0 2px;
+    background: none;
+    display: block;
+  }
+
+  .toolbar ul li[data-key=showusers] a {
+    margin-left: 0 !important;
+  }
+}
+
+@media (max-width: 720px) {
+.toolbar ul {
+    height: 39px;
+    background: none;
+    background-color: transparent;
+    border: none !important;
+    padding: 0 !important;
+    overflow-x: visible;
+  }
+  .toolbar ul.menu_left {
+    padding-top: 2px !important;
+  }
+  .toolbar ul.menu_right {
+    left: 0;
+    padding-left: 8px !important;
+    padding-top: 8px !important;
+    height: 35px !important;
+    border-top: 1px solid #d2d2d2 !important;
+    background-color: white;
+  }
+  .toolbar ul li a {
+    padding: 4px 5px !important;
+  }
+
+  .toolbar ul li[data-key=showusers] {
+    position: absolute;
+    right: 0;
+    top: 0;
+  }
+  .toolbar ul li[data-key=showusers] a {
+    padding-top: 9px !important;
+  }
+  .toolbar ul li a:hover { background-color: transparent; }
+
+  #connectivity, #embed, #import_export, #settings { bottom: 42px; }
+
+  li.superscript,
+  li.subscript,
+  li[data-key="undo"],
+  li[data-key="redo"] {
+    display: none;
+  }
+
+  .toolbar ul li.separator { margin: 0; }
+}
+
+

src/static/skins/colibris/src/components/users.css

@@ -0,0 +1,83 @@
+table#otheruserstable {
+  margin-top: 10px !important;
+}
+
+#otheruserstable .swatch {
+  border: none !important;
+  border-radius: 50%;
+  width: 18px;
+  height: 18px;
+  margin: 0;
+  margin-left: 1px;
+  margin-right: 15px;
+}
+
+#myusernameform {
+  margin-left: 35px;
+}
+
+#myusernameedit {
+  width: 110px;
+}
+
+#myswatchbox {
+  background: none;
+  float: left;
+  position: relative;
+  left: 0;
+  top: 0;
+  border: none !important;
+}
+
+#myswatch {
+  border-radius: 50%;
+}
+
+#nootherusers {
+  padding: 0;
+}
+
+#mycolorpicker {
+  width: auto;
+  height: auto;
+  left: -280px;
+}
+
+#colorpicker {
+  margin-bottom: 25px;
+}
+
+#mycolorpickercancel {
+  padding-left: 3px;
+}
+
+#mycolorpickersave {
+  color: #fff;
+}
+
+#mycolorpickerpreview {
+  float: right;
+  top: 0;
+  left: 0;
+  position: relative;
+  border-radius: 50%;
+  height: 20px;
+  width: 20px;
+}
+
+@media (max-width: 720px) {
+  #users {
+    bottom: 42px;
+    top: initial !important;
+    height: auto !important;
+  }
+
+  #mycolorpicker {
+    width: auto;
+    height: auto;
+    right: 0;
+    bottom: 42px;
+    left: initial;
+    top: initial !important;
+  } 
+}

src/static/skins/colibris/src/layout.css

@@ -0,0 +1,133 @@
+#connectivity,
+#embed,
+#import_export,
+#settings,
+#users {
+  top: 38px;
+  right: 30px;
+}
+
+#editorcontainer {
+  top: 41px !important;
+  padding-top: 0 !important;  
+}
+
+#outerdocbody, .timeslider #editorcontainerbox {  
+  max-width: 900px;
+  margin: 0 auto;  
+  padding-top: 20px;  
+}
+
+#outerdocbody {
+  overflow-y: auto;
+  position: relative;
+  background-color: transparent;  
+  padding-left: 40px; /* space for side div */
+}
+
+#outerdocbody.ep_author_neat {
+  padding-left: 120px; /* more space for sidediv */
+}
+@media (max-width:600px) { 
+  #outerdocbody.ep_author_neat { padding-left: 0; }
+  #options-linenoscheck { display:none; }
+  #options-linenoscheck ~ label { display:none; }
+}
+
+#outerdocbody.sidediv-hidden {
+  padding-left: 0; /* sidediv hidden */
+}
+
+#outerdocbody iframe {
+  display: block;
+  position: relative;
+  left: 0 !important;
+  top: 0;  
+}
+
+#outerdocbody iframe, .timeslider #editorcontainerbox {
+  padding: 55px;
+  box-shadow: 0 0 0 0.5px rgba(209, 209, 209, 0.32), 0 0 7pt 0pt rgba(204, 204, 204, 0.52);  
+  border: 0;
+  border-radius: 5px;
+  background-color: white;
+  width: calc(100% - 110px) !important; /* 100% - padding */  
+}
+
+#sidediv {
+  position: absolute;
+  right: calc(100% - 35px);
+  left: initial;
+  top: 74px !important;
+  padding: 0;
+}
+
+#outerdocbody.ep_author_neat #sidediv { 
+  right: calc(100% - 113px); 
+}
+
+/* Fixs comments_page & author_hover does not take in account the document padding */
+.comment-modal { margin-top: 75px !important; margin-left: 45px; }
+.authortooltip { margin-top: 65px !important; margin-left: 60px; }
+.caretindicator { margin-top: 61px!important; margin-left: 52px; }
+
+#outerdocbody.ep_author_neat .authortooltip{ margin-left: 145px; }
+#outerdocbody.ep_author_neat .caretindicator{ margin-left: 52px; margin-top: 65px!important;}
+@media (max-width:1000px) { 
+  #outerdocbody.ep_author_neat .authortooltip{ margin-left: 115px; } 
+  .caretindicator{ margin-left: 13px; } 
+  #outerdocbody.ep_author_neat .caretindicator{ margin-left: 17px; } 
+}
+
+@media (min-width: 1381px) { 
+  #outerdocbody.ep_comments_page  { padding-right: 150px; } }
+  #outerdocbody.ep_comments_page #comments { left: calc(100% - 150px) }
+@media (max-width: 1380px) { 
+  #outerdocbody.ep_comments_page #comments { left: calc(100% - 220px) }
+  #outerdocbody.ep_comments_page  { padding-right: 220px; } 
+}
+@media (max-width: 1278px) { 
+  #outerdocbody.ep_comments_page #comments { display: none; }
+  #outerdocbody.ep_comments_page  { padding-right: 0px; } 
+}
+
+@media (max-width:1000px) {
+  #outerdocbody {
+    max-width: none;
+    padding-top: 0;
+  }
+  #outerdocbody iframe, .timeslider #editorcontainerbox {
+    padding: 20px !important;
+    border-radius: 0;
+    width: calc(100% - 40px) !important; /* 100% - padding */
+  }
+  #sidediv { 
+    top: 20px !important; /* = #outerdocbody iframe padding-top */
+  }  
+
+  .comment-modal, .authortooltip { margin-top: 20px !important; }
+  .caretindicator { margin-top: 0px !important; }
+  #outerdocbody.ep_author_neat  .caretindicator { margin-top: 10px !important; }
+
+  #outerdocbody.ep_author_neat #sidedivinner>div:before { padding-right: 10px !important; }
+  #outerdocbody.ep_author_neat #sidedivinner.authorColors>div, 
+  #outerdocbody.ep_author_neat #sidedivinner.authorColors>div.primary-none, 
+  #outerdocbody.ep_author_neat #sidedivinner>div { padding-right: 6px!important; }
+  #outerdocbody.ep_author_neat #sidediv { padding-right: 0 !important; }
+}
+
+@media (max-width:600px) {
+  html { overflow: scroll; }
+  #outerdocbody {
+    width: 100%;
+  }
+  #outerdocbody iframe, .timeslider #editorcontainerbox {
+    padding: 15px !important;
+    width: calc(100% - 30px) !important; /* 100% - padding */
+  }
+  #sidediv { 
+    display: none;
+    top: 15px !important; /* = #outerdocbody iframe padding-top */
+  }
+}
+

src/static/skins/colibris/src/pad-editor.css

@@ -0,0 +1,43 @@
+#innerdocbody, #padcontent {
+  font-size: 15px;
+  line-height: 25px; 
+  padding: 0;
+}
+
+#innerdocbody span, #padcontent span {
+  padding: 4px 0 !important;
+}
+
+#innerdocbody h1 span, #padcontent h1 span {
+  padding: 0;
+}
+
+body {
+  overflow: hidden;
+}
+
+option {
+  text-transform: capitalize;
+}
+
+h1 {
+  font-size: 2.5em !important;
+}
+
+h3 {
+  font-size: 1.15em;
+  letter-spacing: 1px;
+}
+
+a {
+  color: #3f51b5;
+}
+
+h1, h2, h3, h4, h5, h6 {
+  line-height: 120%;
+}
+
+
+
+
+

src/static/skins/colibris/src/plugins/author_hover.css

@@ -0,0 +1,10 @@
+.authortooltip {
+  opacity: 1!important;
+  border-radius: 2px;
+  padding: 4px 10px 3px!important;
+  text-transform: uppercase;
+  font-size: 13px!important;
+  font-weight: 700;
+  color: #000;
+  background-color: rgba(255, 255, 255, 0.85) !important;
+}

src/static/skins/colibris/src/plugins/brightcolorpicker.css

@@ -0,0 +1,20 @@
+#colorpicker {
+    left: -200px !important;
+    top: 0px !important;
+}
+
+#colorpicker a.brightColorPicker-cancelButton {
+    background: none;
+    padding: 0;
+    padding-top: 10px;
+    font-family: Arial, sans-serif;
+    font-weight: bold;
+    border: none;
+}
+
+.brightColorPicker-colorPanel {
+    background-color: white !important;
+    box-shadow: 0 0 0 1px rgba(99, 114, 130, 0.16), 0 8px 16px rgba(27, 39, 51, 0.08) !important;
+    border-radius: 3px !important;
+    padding: 15px !important;
+}

src/static/skins/colibris/src/plugins/comments_page.css

@@ -0,0 +1,290 @@
+.comment.selected {
+  color: #a28239;
+}
+
+#newComment {
+  box-shadow: 0 0 0 1px rgba(99, 114, 130, 0.16), 0 8px 16px rgba(27, 39, 51, 0.08);
+  border: none;
+  padding: 15px;
+}
+
+p[data-l10n-id="ep_comments_page.comment"] {
+  font-weight: 900;
+  font-size: 16px;
+  text-transform: uppercase;
+  margin-bottom: 10px;
+}
+
+#newComment.sidebar-comment textarea:not(.comment-suggest-from) {
+  border: 1px solid #d2d2d2;
+  border-radius: 3px;
+  padding: 8px 10px;
+  height: 80px;
+  padding: 8px;
+  font-size: 14px;
+  width: calc(100% - 15px);
+}
+
+#newComment.sidebar-comment .comment-suggest-from {
+  height: auto !important;
+  font-size: 14px;
+  padding: 8px;
+  width: calc(100% - 15px) !important;
+  background-color: #f9f9f9;
+  margin-top: 8px;
+  border: 1px solid #f3eeee;
+  border-left: 4px solid #a7a7a7;
+  border-radius: 3px;
+}
+
+.comment-suggest {
+  margin-bottom: 8px;
+}
+
+.reply-comment-suggest input,
+.comment-suggest input {
+  vertical-align: -2px;
+  margin-right: 5px;
+}
+
+.reply-comment-suggest label,
+.comment-suggest label {
+  font-style: italic;
+  font-weight: normal;
+}
+
+.sidebar-comment input,
+.comment-buttons input {
+  border-radius: 4px;
+  text-transform: uppercase;
+  font-weight: 900;
+  font-size: 13px;
+  line-height: 1.5;
+  width: auto;
+  border: none;
+}
+
+#newComment.sidebar-comment input[type=submit] {
+  color: white;
+  margin-right: 10px;
+  padding: 0 10px;
+  border: none;
+}
+
+#newComment.sidebar-comment input[type=reset] {
+  background-color: white;
+  border: none;
+}
+
+.comment-content:focus {
+  border: 2px solid rgba(33, 150, 243, 0.51);
+}
+
+.comment-changeTo-approve input[type=submit] { width: 100%; font-size: 12px;}
+
+.reply-comment-suggest-from-p,
+.comment-changeFrom-value,
+.comment-changeTo-value,
+.reply-suggestion .reply-comment-suggest-from,
+.suggestion .comment-suggest-from {
+  border: none;
+  font-weight: normal;
+  font-style: italic;
+  padding-left: 0;
+  width: 100% !important;
+  padding: 0;
+  padding-top: 8px;
+  /* width: inherit !important; */
+  /*color: rgba(41, 125, 191, 0.85);*/
+}
+
+textarea.comment-suggest-to {
+  margin-bottom: 8px;
+}
+
+.suggestion {
+  font-weight: bold;
+  font-size: 11px;
+  text-transform: uppercase;
+}
+
+#comments {
+  top: 82px;
+}
+
+#comments .sidebar-comment {
+  background-color: transparent;
+  font-size: 13px;
+  border: none;
+  box-shadow: none;
+}
+
+@media (min-width: 1200px) {
+  #comments .sidebar-comment:hover,
+  #comments .sidebar-comment.mouseover,
+  .comment-modal {
+    margin-right: -30px;
+  }
+}
+
+#comments .sidebar-comment:hover,
+#comments .sidebar-comment.mouseover,
+.comment-modal {
+  background-color: #fff;
+  padding: 0;
+  padding-top: 10px;
+  margin-top: -8px;
+  width: 250px;
+  box-shadow: 0 0 0 1px rgba(99, 114, 130, 0.16), 0 8px 16px rgba(27, 39, 51, 0.08);
+}
+
+#comments .sidebar-comment:hover time,
+#comments .sidebar-comment.mouseover time,
+.comment-modal-comment>time {
+  display: block !important;
+}
+
+#comments .sidebar-comment:hover>section,
+#comments .sidebar-comment.mouseover>section,
+.comment-modal-comment>section {
+  padding: 0 15px;
+  padding-bottom: 10px;
+  margin-top: 5px;
+  display: block;
+  line-height: 20px;
+  margin-top: 8px;
+}
+
+.comment-delete-container {
+  float: right;
+  margin: 0;
+  height: 15px;
+  font-size: 15px;
+  background-color: transparent;
+  padding: 6px 15px 4px 8px;
+  color: #7b7777;
+}
+
+.comment-reply {
+  border-top: 1px solid #d2d2d2;
+  background-color: #f9f9f9;
+  margin: 0;
+  padding: 10px 15px 3px;
+}
+
+.comment-reply-input-label span {
+  font-weight: bold;
+}
+
+.comment-reply-input {
+  border: 1px solid #d2d2d2 !important;
+  width: calc(100% - 20px) !important;
+  padding: 8px 10px;
+  text-transform: none !important;
+  margin-top: 5px;
+  margin-bottom: 10px;
+  font-weight: normal;
+}
+
+.reply-suggestion p:not(.reply-comment-suggest-from-p) {
+  text-transform: uppercase;
+  font-size: 11px;
+  font-weight: 400;
+  text-transform: uppercase;
+}
+
+.comment-changeTo-approve input {
+  height: 25px;
+  margin: 0;
+  margin-top: 5px;
+}
+
+.reply-suggestion {
+  margin-top: 8px;
+}
+
+.reply-comment-suggest-from-p {
+  padding: 0
+}
+
+.comment-text {
+  font-weight: normal;
+  line-height: 20px;
+}
+
+.sidebar-comment-reply:nth-child(even) {
+  background-color: transparent;
+}
+
+.sidebar-comment-reply {
+  padding: 0;
+  margin-bottom: 10px;
+}
+
+.comment-author-name {
+  font-style: normal;
+}
+
+.comment-changeFrom-label,
+.comment-changeTo-label {
+  text-transform: uppercase;
+  font-size: 11px;
+}
+
+.comment-reply note {
+  line-height: 16px;
+}
+
+.reply-comment-suggest {
+  display: none !important
+}
+
+.comment-changeTo-form {
+  margin-bottom: 5px;
+  padding: 0 15px;
+}
+
+.sidebar-comment>.comment-author-name,
+.comment-modal-comment>.comment-author-name {
+  padding-left: 0px;
+}
+
+#comments .sidebar-comment:hover >.comment-author-name,
+#comments .sidebar-comment.mouseover >.comment-author-name {
+  margin-top: 2px;
+  display: inline-block;
+  padding-left: 15px;
+}
+
+.sidebar-comment>time,
+.comment-modal-comment>time {
+  position: absolute;
+  top: 11px;
+  font-size: 11px;
+  right: 36px;
+  color: #555555;
+  font-style: italic;
+}
+
+.comment-changeTo-approve {
+  margin-bottom: 14px;
+  margin-top: 5px;
+}
+
+.comment-reply note:first-child {
+  margin-top: 8px;
+}
+
+.comment-modal {
+  padding: 0;
+  border: none;
+  width: 350px !important;
+  margin-top: 0;
+  padding-top: 10px;
+}
+
+.comment-modal-comment>.comment-author-name {
+  padding-left: 14px;
+}
+
+

src/static/skins/colibris/src/plugins/embedded_hyperlinks.css

@@ -0,0 +1,6 @@
+.hyperlink-dialog>.hyperlink-save{
+  height: 34px;
+  margin-top: 1px;
+  margin-right: 0;
+  margin-left: 2px;
+}

src/static/skins/colibris/src/plugins/font_color.css

@@ -0,0 +1,32 @@
+li.acl-write.font-color-icon.ep_font_color {
+  display: none;
+}
+
+#font-color {
+  display: list-item !important;
+}
+
+.color\:red,
+[data-color=red] {
+    color: #F44336;
+}
+
+.color\:green,
+[data-color=green] {
+    color: #66d29c;
+}
+
+.color\:blue,
+[data-color=blue] {
+    color: #2196f3;
+}
+
+.color\:yellow,
+[data-color=yellow] {
+    color: #e0d776;
+}
+
+.color\:orange,
+[data-color=orange] {
+    color: #d2a564;
+}

src/static/skins/colibris/src/plugins/set_title_on_pad.css

@@ -0,0 +1,34 @@
+#pad_title {
+  margin-bottom: 15px !important;
+  margin-top: 5px !important;
+  display: none; /* display only when page is loaded via javascript */
+}
+
+@media (max-width:720px) {
+  #pad_title { display: none !important; }  
+}
+
+#edit_title {
+  color: white;
+}
+#edit_title:before {
+  font-family: fontawesome-etherpad;
+  position: absolute;
+  top: 20px;
+  font-size: 14px;
+  content: "\E839";
+  margin-left: 10px;
+}
+
+#input_title {
+  background-color: #f9f9f9 !important;
+  height: auto !important;
+  margin-top: 3px;
+  width: calc(100% - 110px) !important;
+  padding: 8px 10px !important;
+}
+
+#save_title button {
+  height: 30px !important;
+  padding: 5px 20px !important;
+}

src/static/skins/colibris/src/plugins/tables2.css

@@ -0,0 +1,239 @@
+/* MENU ICON*/
+#editbar #tbl_menu_list {
+  width: auto !important;
+}
+#tbl-menu {
+  background: none !important;
+  width: 18px !important;
+  padding-left: 2px !important;
+}    
+#tbl-menu:before {
+  content: "\F0CE";
+}
+
+#tbl_menu_list > a {
+  font-size: 16px;
+  margin-top: 8px;
+  padding-left: 0;
+  padding-right: 2px;
+  padding-bottom: 4px;
+}
+
+/* DROP DOWN MENU */
+#tbl_context_menu {
+  margin-left: -24px;
+  border: none;
+  margin-top: 9px;
+  box-shadow: 0 0 0 1px rgba(99, 114, 130, 0.16), 0 8px 16px rgba(27, 39, 51, 0.08);
+  border-radius: 3px;
+  background-color: white;
+  font-size: 100%;
+  line-height: 1.7;
+}
+
+#tbl_context_menu > .bd {
+  border: none;
+  background-color: transparent;
+}
+
+#tbl_context_menu > .bd > ul {
+  padding: 6px 0;
+}
+
+/* TABLE SIZE PICKER */
+#tbl_insert  {
+  background-color: white;
+  box-shadow: 0 0 0 1px rgba(99, 114, 130, 0.16), 0 8px 16px rgba(27, 39, 51, 0.08);
+  border-radius: 3px;
+}
+
+#tbl_insert .bd {
+  border: none;
+  text-align: center;
+  background-color: transparent;
+  padding-top: 4px;  
+}
+
+#tbl_insert .yuimenuitemlabel { text-align: center; }
+
+#tbl_insert .ft {
+  margin: 0;
+  border: none;
+  background-color: transparent;
+  padding: 6px;
+  padding-top: 0;
+}
+
+#matrix_table tr td {
+  border: 1px solid #d7d7d7;
+  height: 1px;
+  padding: 7px;
+  width: 11px;
+  background-color: #fbfbfb;
+  border-radius: 1px;
+}
+#matrix_table tr td.selected {
+  border: 1px solid #789dce;
+  background-color: #b3d4ff;
+}
+
+/* TABLE SETTINGS POPUP */
+.yui-skin-sam .yui-panel-container {
+  padding: 0;
+  margin: 0;
+  background-color: #fff;
+  box-shadow: 0 0 0 1px rgba(99, 114, 130, 0.16), 0 8px 16px rgba(27, 39, 51, 0.08);
+  border-radius: 5px;
+  padding-bottom: 15px;
+}
+
+.yui-skin-sam .yui-panel-container .yui-panel {
+  border: none !important;
+  background: none;
+  box-shadow: none !important;
+}
+
+.yui-skin-sam .yui-panel-container .yui-panel .hd {
+  cursor: move;
+  padding: 0;
+  border: 0;
+  background: 0;
+  margin: 0;
+  font-size: 14px;
+  line-height: 40px;
+  text-transform: uppercase;
+  padding: 0 15px;
+  padding-top: 5px;
+  font-weight: bold;
+  border-bottom: 1px solid #d2d2d2;
+}
+
+.yui-skin-sam .yui-panel-container .yui-panel .container-close {
+  top: 15px;
+  border: none;
+  background: none;
+  color: white;
+  text-indent: 0;
+}
+.yui-skin-sam .yui-panel-container .yui-panel .container-close::before {
+  content: "x";
+  color: #6f757a;
+  font-size: 16px;
+  font-weight: bold;
+}
+
+.yui-skin-sam .yui-panel-container .yui-panel .bd {
+  background: none;
+  border: none;
+  box-shadow: none;
+  padding: 15px;
+  background-color: transparent !important;
+}
+
+.yui-panel .underlay, .yui-skin-sam .yui-panel-container.shadow .underlay {
+  display: none !important;
+}
+
+#div_tbl_btn_close {
+  float: right;
+  position: relative;
+  width: 100%;
+  margin-top: 10px;
+  right: 0;
+  bottom: 0;
+}
+
+#tbl_btn_close {
+  border: none;
+  color: #ffffff;
+  height: 30px;
+  width: 100%;
+  border-radius: 3px;
+  text-transform: uppercase;
+}
+#tbl_btn_close:hover { cursor: pointer; }
+
+.yui-skin-sam .yui-button {
+  background: none;
+  background-color: white;
+  border: none;
+  height: 24px;
+  margin-bottom: -4px;
+  margin-top: 5px;
+}
+
+.yui-skin-sam .yui-button .first-child { margin: 0; border: none; }
+
+.yui-skin-sam .yui-split-button button {
+  padding: 0;
+  background: none !important;
+}
+
+.yui-skin-sam .yui-split-button button em:not(.color-picker-button) {
+  font-style: normal !important;
+  border-bottom: 1px solid #b5b7b7;
+  padding: 0 5px;
+  margin: 0 5px;
+  padding-bottom: 3px;
+}
+
+button#yui-gen13-button {
+  margin-left: -5px;
+}
+
+button .color-picker-button {
+  border: 1px solid #c1c2c2;
+  border-radius: 50%;
+  width: 16px;
+  height: 16px;
+  margin-top: 2px;
+}
+
+#even-row-bg-color, #single-row-bg-color {
+  margin-right: 5px;
+}
+#single-col-bg-color, #odd-row-bg-color {
+  margin-left: 7px;
+}
+
+#yui-tbl-prop-panel .text-input[type=text] {
+  border: 1px solid #d2d2d2;
+  float: right;
+  height: 10px;
+  border-radius: 3px;
+  padding: 8px 10px;
+}
+
+#text_input_message {
+  background-color: #64d29b;
+  padding: 0 5px;
+  color: white;
+  font-size: 12px;
+  border-radius: 5px;
+  font-weight: bold;
+  display: none;
+}
+
+/* TABLES INSIDE THE PAD */
+td[name=tData] {
+  /*border: 1px solid grey !important;*/
+}
+
+#yui-picker-panel_c
+{
+  padding-bottom: 40px;
+}
+
+div#yui-picker-panel_h {
+  line-height: 1.8em;
+  font-size: 13px;
+  padding: 9px 15px 5px;
+}
+
+#yui-picker-panel .ft {
+  position: relative;
+  border: none;
+  width: 100%;
+  padding: 0;
+  margin-top: 20px;
+}

src/static/skins/colibris/timeslider.css

@@ -0,0 +1,142 @@
+@media (max-width: 600px) { html { overflow: hidden } }
+
+@media (max-width: 1100px) {
+  .timeslider #padeditor {
+    padding: 0 !important;
+  }
+}
+
+.timeslider #import_export, .timeslider #settings{
+  top: 108px !important;
+  right: 55px;
+}
+
+.timeslider #export > p {
+  font-size: 15px;
+  margin-top: 0;
+  margin-bottom: 20px;
+}
+
+.timeslider #padpage {
+  display: flex;
+  flex-direction: column;
+}
+
+.timeslider #timeslider-top {
+  position: relative;
+  border-bottom: 1px solid #e4e4e4; 
+}
+
+.timeslider-bar { background: none; }
+.timeslider-bar p { margin: 8px; font-size: 12px;}
+
+.timeslider-bar #editbar {
+  border: none;
+  background: none !important;
+  margin-right: 10px;
+}
+
+.timeslider #padmain {
+  position: relative;
+  top: 0 !important;
+  flex: 1 auto;
+  overflow: auto;
+}
+
+.timeslider #padeditor {
+  height: 100%;
+  padding-top: 30px;
+}
+
+.timeslider #editorcontainerbox {
+  height: 100%;
+  overflow: visible;
+  margin-top: 0 !important;
+}
+
+#timeslider {
+  margin-top: -20px;
+  margin-left: 0;
+  background-color: transparent;
+}
+
+#timeslider, #timeslider-left, #timeslider-right { 
+  height: 57px; 
+  background-color: transparent;
+}
+
+#timeslider #timer {
+  opacity: 0.8;
+  font-style: italic;
+  right: 158px;
+  top: -3px;
+  left: initial;
+  background: none;
+}
+
+#timeslider #timeslider-slider { margin-left: 4px; }
+
+#ui-slider-handle {
+  z-index: 5;
+  border-radius: 3px;
+  height: 28px;
+  top: 19px;
+}
+
+#ui-slider-bar {
+  height: 10px;
+  margin-top: 28px;
+  margin-right: 180px;
+  border-radius: 3px;
+  background-color: #e4e4e4;
+}
+
+#timeslider .star {
+  top: 25px;
+}
+#timeslider .star:before {
+  color: #da9700;
+  content: "\e836";
+}
+
+.timeslider #editbar .buttontext {
+  color: white;
+  margin: 0;
+}
+.timeslider #editbar .grouped-right {
+  margin: 0; padding: 0;
+  margin-top: 5px;
+  margin-left: 5px;
+}
+
+.timeslider #playpause_button {
+  right: 95px;
+  top: 1px;
+}
+#playpause_button_icon {
+  border:none;
+}
+#playpause_button_icon:before { color: white; }
+
+.timeslider #leftstep {
+  right: 60px;
+  top: 12px;
+}
+
+.timeslider #rightstep {
+  top: 12px;
+  right: 30px;
+}
+
+.stepper {
+  border: 2px solid;
+  text-align: center;
+  border-radius: 50%;
+  height: 25px;
+  padding-top: 2px;  
+}
+
+.timeslider #authorsList .author {
+  padding: 2px 5px;
+  border-radius: 3px;
+}

src/static/skins/colibris/timeslider.js

@@ -0,0 +1,6 @@
+function customStart()
+{
+  console.log("custom start", $('#timeslider-wrapper').length);
+  // inverse display order betwwen slidebar and titles
+  $('#timeslider-wrapper').appendTo('#timeslider-top');
+}

src/static/skins/no-skin/pad.css

@@ -1,8 +1,5 @@
-/*
+@media (max-width:600px) {
-  custom css files are loaded after core css files. Simply use the same selector to override a style.
+  #sidediv { 
-  Example:
+    display: none !important;
-      #editbar LI {border:1px solid #000;}
+  }
-    overrides
+}
-      #editbar LI {border:1px solid #d5d5d5;}
-    from pad.css
-*/