From 39ad22f78fc9daa6d985e487ca8daf2e6e0841cf Mon Sep 17 00:00:00 2001
From: Sebastian Castro <90scastro@gmail.com>
Date: Thu, 8 Nov 2018 21:56:39 +0100
Subject: [PATCH] colibris: style timeslider page

---
 src/static/skins/colibris/pad.css             |  25 ++-
 .../skins/colibris/src/components/buttons.css |   2 +-
 src/static/skins/colibris/src/layout.css      |  27 ++--
 src/static/skins/colibris/timeslider.css      | 143 +++++++++++++++++-
 src/static/skins/colibris/timeslider.js       |   6 +-
 5 files changed, 177 insertions(+), 26 deletions(-)

diff --git a/src/static/skins/colibris/pad.css b/src/static/skins/colibris/pad.css
index 1aa74cd2..1dc73cea 100644
--- a/src/static/skins/colibris/pad.css
+++ b/src/static/skins/colibris/pad.css
@@ -49,13 +49,17 @@ body,
 .comment-changeTo-value,
 .reply-suggestion .reply-comment-suggest-from,
 .suggestion .comment-suggest-from,
-.hyperlink-dialog>.hyperlink-url
+.hyperlink-dialog>.hyperlink-url,
+.timeslider #padcontent span 
 { color: #495057 !important; }
 
 /* MENUS ICONS */
 #edit_title:before,
 #tbl-menu:before
 { color: #767676 !important; }
+/* MENU BUTTONS */
+.timeslider #editbar .buttontext 
+{ background-color: #767676 !important; }
 
 /* PRIMARY BUTTONS */
 #mycolorpickersave,
@@ -71,12 +75,26 @@ body,
   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
+.comment-reply-input-label span,
+.stepper
 { 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,
@@ -87,7 +105,8 @@ button, input, select, textarea,
 td[name=tData],
 #comments, #newComments,
 #sidediv,
-#comments .sidebar-comment
+#comments .sidebar-comment,
+#timeslider #timer
 { font-family: Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif; }
 
 /* PRIMARY FONT */
diff --git a/src/static/skins/colibris/src/components/buttons.css b/src/static/skins/colibris/src/components/buttons.css
index 44c97005..ef23840e 100644
--- a/src/static/skins/colibris/src/components/buttons.css
+++ b/src/static/skins/colibris/src/components/buttons.css
@@ -1,4 +1,4 @@
-.btn, #mycolorpickercancel, #mycolorpickersave, #save_title button, #yui-picker-panel .button-group .yui-button button, .hyperlink-dialog>.hyperlink-save
+.btn, #mycolorpickercancel, #mycolorpickersave, #save_title button, #yui-picker-panel .button-group .yui-button button, .hyperlink-dialog>.hyperlink-save, .timeslider #editbar .buttontext 
 {
   margin-right: 10px;
   padding: 5px 20px;
diff --git a/src/static/skins/colibris/src/layout.css b/src/static/skins/colibris/src/layout.css
index dfca79bd..cbc73268 100644
--- a/src/static/skins/colibris/src/layout.css
+++ b/src/static/skins/colibris/src/layout.css
@@ -9,17 +9,18 @@
 
 #editorcontainer {
   top: 41px !important;
-  background-color: #e9e9e9;
-  padding-top: 0 !important;
-  background-color: #f9f9f9 !important;
+  padding-top: 0 !important;  
+}
+
+#outerdocbody, .timeslider #editorcontainerbox {  
+  max-width: 900px;
+  margin: 0 auto;  
+  padding-top: 20px;  
 }
 
 #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 */
 }
@@ -33,12 +34,16 @@
   position: relative;
   left: 0 !important;
   top: 0;
-  width: calc(100% - 110px) !important; /* 100% - padding */
+  
+}
+
+#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 {
@@ -70,10 +75,10 @@
     max-width: none;
     padding-top: 0;
   }
-  #outerdocbody iframe {
-    padding: 30px !important;
+  #outerdocbody iframe, .timeslider #editorcontainerbox {
+    padding: 20px !important;
     border-radius: 0;
-    width: calc(100% - 60px) !important; /* 100% - padding */
+    width: calc(100% - 40px) !important; /* 100% - padding */
   }
   #sidediv { 
     top: 30px !important; 
@@ -91,7 +96,7 @@
   #outerdocbody {
     width: 100%;
   }
-  #outerdocbody iframe {
+  #outerdocbody iframe, .timeslider #editorcontainerbox {
     padding: 15px !important;
     width: calc(100% - 30px) !important; /* 100% - padding */
   }
diff --git a/src/static/skins/colibris/timeslider.css b/src/static/skins/colibris/timeslider.css
index 236251d9..be4a9d62 100644
--- a/src/static/skins/colibris/timeslider.css
+++ b/src/static/skins/colibris/timeslider.css
@@ -1,8 +1,135 @@
-/*
-  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
-*/
+@media (max-width: 600px) { html { overflow: hidden } }
+
+@media (max-width: 1100px) {
+  .timeslider #padeditor {
+    padding: 0 !important;
+  }
+}
+
+.timeslider #import_export, #settings{
+  top: 115px !important;
+}
+
+.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; }
+
+.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;
+}
\ No newline at end of file
diff --git a/src/static/skins/colibris/timeslider.js b/src/static/skins/colibris/timeslider.js
index 152c3d5d..c94a5577 100644
--- a/src/static/skins/colibris/timeslider.js
+++ b/src/static/skins/colibris/timeslider.js
@@ -1,6 +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/
+  console.log("custom start", $('#timeslider-wrapper').length);
+  // inverse display order betwwen slidebar and titles
+  $('#timeslider-wrapper').appendTo('#timeslider-top');
 }