colibris: add new skin, initial commit

Needs further development: responsive, plugins, configuration...

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,55 @@
+@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/editor-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/plugins/brightcolorpicker.css");
+@import url("src/plugins/comments_page.css");
+@import url("src/plugins/font_color.css");
+
+/* NEUTRAL COLOR */
+body,
+#innerdocbody
+#users,
+#chattext,
+#chatinput,
+#chatlabel,
+#toc,
+.toolbar ul li a:hover .buttonicon,
+.toolbar ul li select,
+#mycolorpickercancel,
+.btn-default,
+.color\:black,
+[data-color=black]
+{ color: #495057 !important; }
+
+/* PRIMARY COLOR */
+#mycolorpickersave,
+.btn-primary
+{ background-color: #64d29b; }
+
+h1, 
+#titlelabel 
+{ color: #64d29b; }
+
+/* NEUTRAL FONT */
+body,
+#innerdocbody,
+#chatinput,
+.toolbar ul li select
+{ font-family: Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif; }
+
+/* PRIMARY FONT */
+h1,
+#titlelabel,
+#chatlabel,
+.btn
+{ font-family: opendyslexic !important; }

src/static/skins/colibris/pad.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/src/components/buttons.css

@@ -0,0 +1,15 @@
+.btn, #mycolorpickercancel, #mycolorpickersave {
+  margin-right: 10px;
+  padding: 5px 20px;
+  border-radius: 4px;
+  font-size: 13px;
+  line-height: 1.5;
+  width: auto;
+  border: none;
+  font-weight: bold;
+  text-transform: uppercase;
+  position: relative;
+  background: none;
+  top: 0;
+  left: 0;
+}

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

@@ -0,0 +1,90 @@
+#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 {
+  border: 1px solid #d2d2d2;
+  width: calc(100% - 20px);
+  float: right;
+  height: 18px;
+  border-radius: 3px;
+  padding: 8px 10px;
+}
+
+#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;
+}

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

@@ -0,0 +1,28 @@
+#sidediv {
+  background-color: transparent;
+  border: none;
+  font-family: Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+}
+
+#sidedivinner>div:before {
+  font-size: 13px;
+  padding-right: 18px !important;
+  color: #6a6a6b;
+  font-family: Montserrat;
+  text-transform: uppercase;
+  font-size: 10px;
+}
+
+#sidedivinner>div,
+#sidedivinner.authorColors>div,
+#sidedivinner.authorColors>div.primary-none {
+  padding-right: 5px !important;
+  border-right: 5px solid transparent;
+}
+
+#sidedivinner>div {
+  padding-right: 5px;
+  line-height: 24px;
+  font-size: 10px;
+  color: #a0a0a0;
+}

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/popup.css

@@ -0,0 +1,28 @@
+#users,
+#mycolorpicker,
+.popup {
+  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/table-of-content.css

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

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

@@ -0,0 +1,103 @@
+.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;
+  height: 39px;
+  background-color: rgba(78, 85, 92, 0.22);
+}
+
+.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 a[data-l10n-id="pad.toolbar.showusers.title"] {
+  margin: 0;
+  height: 59px;
+  line-height: 25px;
+  width: 45px;
+  margin-left: -12px;
+  border-radius: 0;
+}
+
+@media (max-width: 800px) {
+.toolbar ul {
+    height: 39px;
+    background: none;
+    background-color: transparent;
+    border: none !important;
+    padding: 0 !important;
+  }
+  .toolbar ul.menu_right {
+    border-top: 1px solid #d2d2d2 !important;
+  }
+  .toolbar ul li a {
+    padding: 4px 5px !important;
+  }
+}
+
+@media (max-width: 1000px) {
+  .toolbar ul li.separator {
+    margin: 0 2px;
+    background: none;
+  }
+
+  .toolbar ul li a[data-l10n-id="pad.toolbar.showusers.title"] {
+    margin-left: 0 !important;
+  }
+}

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

@@ -0,0 +1,66 @@
+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;
+}

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

@@ -0,0 +1,118 @@
+#connectivity,
+#embed,
+#import_export,
+#settings,
+#users {
+  top: 38px !important;
+  right: 30px;
+}
+
+#editorcontainer {
+  top: 41px !important;
+  background-color: #e9e9e9;
+  padding-top: 0 !important;
+  background-color: #f9f9f9 !important;
+}
+
+#outerdocbody {
+  overflow-y: auto;
+  max-width: 900px;
+  margin: 0 auto;
+  position: relative;
+  padding-top: 20px;
+  background-color: transparent;  
+  padding-left: 40px; /* space for side div */
+}
+
+#outerdocbody iframe {
+  display: block;
+  position: relative;
+  left: 0 !important;
+  top: 0;
+  width: calc(100% - 110px) !important; /* 100% - padding */
+  padding: 45px 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;
+}
+
+#sidediv {
+  position: absolute;
+  right: calc(100% - 35px);
+  left: initial;
+  top: 64px !important;
+  padding: 0;
+}
+
+@media (max-width:1000px) {
+  #outerdocbody {
+    max-width: none;
+    padding-top: 0;
+  }
+  #outerdocbody iframe {
+    padding: 30px !important;
+    border-radius: 0;
+    width: calc(100% - 60px) !important; /* 100% - padding */
+  }
+  #sidediv { 
+    top: 30px !important; 
+  }
+}
+
+/*
+@media (min-width:800px) and (max-width:1200px) {
+  #outerdocbody iframe {
+    width: calc(100% - 60px) !important;
+    padding: 30px !important;
+    top: 0 !important;
+    border-radius: 0 !important;
+  }
+  #outerdocbody {
+    position: relative !important;
+    padding-left: 120px !important;
+    right: 0 !important;
+    left: 0 !important;
+    width: calc(100% - 320px) !important;
+    margin: 0;
+    max-width: none;
+    padding-top: 0 !important;
+  }
+  #outerdocbody #sidediv {
+    padding: 33px 0 0 !important;
+    right: calc(100% - 105px);
+  }
+  #comments {
+    right: 0px;
+    left: auto !important;
+  }
+}
+
+@media (min-width: 800px) and (max-width:955px) {
+  #outerdocbody {
+    padding-right: 0 !important;
+    width: calc(100% - 110px) !important;
+  }
+}
+
+@media (max-width: 800px) {
+  #outerdocbody iframe {
+    width: calc(100% - 12px) !important;
+    padding: 10px !important;
+    top: 0 !important;
+    border-radius: 0 !important;
+  }
+  #outerdocbody #sidediv,
+  #chaticon,
+  li.superscript,
+  li.subscript,
+  li[data-key="undo"],
+  li[data-key="redo"] {
+    display: none;
+  }
+  #outerdocbody {
+    padding-top: 0 !important;
+  }
+  
+}
+*/

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

@@ -0,0 +1,25 @@
+#innerdocbody {
+  font-size: 15px;
+  line-height: 20px; /* increase this line-height to 25px when no background color for text */
+}
+
+body {
+  overflow: hidden;
+}
+
+option {
+  text-transform: capitalize;
+}
+
+h1 {
+  font-size: 2.5em;
+  padding: 9px 0; /* need when coloring background text because it overlap previous and next line */
+}
+
+h3 {
+  font-size: 1.15em;
+  letter-spacing: 1px;
+}
+
+
+

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,271 @@
+#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;
+  color: #64d29b;
+  font-family: Montserrat;
+  text-transform: uppercase;
+  margin-bottom: 10px;
+}
+
+.sidebar-comment textarea {
+  border: 1px solid #d2d2d2;
+  width: calc(100% - 20px);
+  border-radius: 3px;
+  padding: 8px 10px;
+  color: #495057;
+  height: 60px;
+  font-family: Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif !important;
+}
+
+.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;
+  color: #495057;
+}
+
+.sidebar-comment input,
+.comment-buttons input {
+  border-radius: 4px;
+  text-transform: uppercase;
+  font-weight: 900;
+  font-family: Montserrat;
+  font-size: 13px;
+  line-height: 1.5;
+  width: auto;
+  border: none;
+}
+
+.sidebar-comment input[type=submit] {
+  background-color: #64d29b;
+  color: white;
+  margin-right: 10px;
+  padding: 0 10px;
+}
+
+.sidebar-comment input[type=reset] {
+  background-color: white;
+  color: #495057;
+}
+
+.comment-content:focus {
+  border: 2px solid rgba(33, 150, 243, 0.51);
+}
+
+.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: normal;
+  color: #495057;
+  font-size: 11px;
+  text-transform: uppercase;
+  font-family: Montserrat;
+}
+
+#comments {
+  top: 65px;
+  left: calc(100% - 100px);
+}
+
+#comments .sidebar-comment {
+  background-color: transparent;
+  font-size: 13px;
+  font-family: Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif !important;
+  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;
+  display: block;
+}
+
+.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 {
+  color: #5cc390;
+  font-weight: bold;
+}
+
+.comment-reply-input {
+  border: 1px solid #d2d2d2 !important;
+  width: calc(100% - 20px) !important;
+  padding: 8px 10px;
+  font-family: Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif !important;
+  text-transform: none !important;
+  color: #495057;
+  margin-top: 5px;
+  margin-bottom: 10px;
+}
+
+.reply-suggestion p:not(.reply-comment-suggest-from-p) {
+  text-transform: uppercase;
+  color: #495057;
+  font-size: 11px;
+  font-weight: 400;
+  text-transform: uppercase;
+  font-family: Montserrat;
+}
+
+.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;
+  color: #495057;
+}
+
+.sidebar-comment-reply:nth-child(even) {
+  background-color: transparent;
+}
+
+.sidebar-comment-reply {
+  padding: 0;
+  margin-bottom: 10px;
+}
+
+.comment-author-name {
+  font-style: normal;
+  color: #4c4c4c;
+}
+
+.comment-changeFrom-label,
+.comment-changeTo-label {
+  font-family: Montserrat;
+  text-transform: uppercase;
+  font-size: 11px;
+  font-weight: normal;
+}
+
+.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: 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;
+}

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

@@ -0,0 +1,39 @@
+li.acl-write.font-color-icon.ep_font_color {
+  display: none;
+}
+
+#font-color {
+  display: list-item !important;
+}
+
+
+
+h3 .color\:black,
+[data-color=black] {
+    color: #656f71;
+}
+
+.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/timeslider.css

@@ -0,0 +1,8 @@
+/*
+  custom css files are loaded after core css files. Simply use the same selector to override a style.
+  Example:
+      #editbar LI {border:1px solid #000;}
+    overrides
+      #editbar LI {border:1px solid #d5d5d5;}
+    from pad.css
+*/

src/static/skins/colibris/timeslider.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/
+}