css: fix Colibris timeslider

src/static/css/iframe_editor.css

@@ -12,7 +12,6 @@ html.inner-editor {
   display: flex;
   flex-direction: row;
   min-height: 100vh; /* take at least full height */
-  background-color: #F4F4F4;
 }
 #outerdocbody iframe {
   flex: 1 auto;

src/static/css/pad.css

@@ -14,7 +14,6 @@ html {
   font-size: 13px;
   font-family: Arial, sans-serif;
   line-height: 16px;
-  background-color: white;
   color: #3e3e3e;
 }
 *, p {

src/static/css/timeslider.css

@@ -113,8 +113,8 @@
 
 /* PAD CONTENT */
 
-#editorcontainerbox {
+#outerdocbody {
-  overflow-y: scroll;
+  display: block;
 }
 
 #innerdocbody {

src/static/skins/colibris/pad.css

@@ -44,7 +44,7 @@ body,
 .reply-suggestion .reply-comment-suggest-from,
 .suggestion .comment-suggest-from,
 .hyperlink-dialog>.hyperlink-url,
-.timeslider #padcontent span ,
+.timeslider #innerdocbody span ,
 .exporttype, .timeslider #export > p
 { color: #2E3338 !important; }
 
@@ -77,17 +77,17 @@ h1,
 .yui-skin-sam .yui-panel .hd,
 p[data-l10n-id="ep_comments_page.comment"],
 .comment-reply-input-label span,
-.stepper, #importmessageabiword, #importmessageabiword > a
+#slider-btn-container .stepper, #importmessageabiword, #importmessageabiword > a
 { color: #64d29b; }
-#ui-slider-handle, #playpause_button_icon, .gritter-item:not(.error) {
+#timeslider-slider #ui-slider-handle, #playpause_button_icon, .gritter-item:not(.error) {
   background-color: #64d29b;
 }
-.stepper {
+#slider-btn-container button {
   border-color: #64d29b;
 }
 
 /* BACKGROUND COLOR */
-#editorcontainer, #padmain  {
+#editorcontainerbox {
   background-color: #f9f9f9 !important;
 }
 
@@ -106,5 +106,6 @@ h1,
 p[data-l10n-id="ep_comments_page.comment"],
 #newComment.sidebar-comment input[type=submit],
 .comment-changeTo-approve input[type=submit],
-.hyperlink-dialog>.hyperlink-save
+.hyperlink-dialog>.hyperlink-save,
+#sidedivinner>div:before
 { font-family: Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif !important;  }

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

@@ -1,11 +1,8 @@
-#outerdocbody, .timeslider #editorcontainerbox {
+#outerdocbody {
   max-width: 900px;
   margin: 0 auto;
   padding-top: 20px;
-}
+  width: 100%;
-
-#outerdocbody {
-  overflow-y: auto;
 }
 
 #editorcontainerbox .sticky-container {
@@ -23,13 +20,16 @@
   padding-left: 0; /* sidediv hidden */
 }
 
-#outerdocbody iframe, .timeslider #editorcontainerbox {
+#outerdocbody iframe, #outerdocbody > #innerdocbody {
   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;
 }
+#sidediv {
+  padding-top: 55px; /* = #outerdocbody iframe padding-top */
+}
 
 /* Fixs comments_page & author_hover does not take in account the document padding */
 .comment-modal { margin-top: 75px !important; margin-left: 45px; }
@@ -66,12 +66,12 @@
     max-width: none;
     padding-top: 0;
   }
-  #outerdocbody iframe, .timeslider #editorcontainerbox {
+  #outerdocbody iframe, #outerdocbody > #innerdocbody {
-    padding: 20px !important;
+    padding: 20px;
     border-radius: 0;
   }
   #sidediv {
-    top: 20px !important; /* = #outerdocbody iframe padding-top */
+    padding-top: 20px !important; /* = #outerdocbody iframe padding-top */
   }
 
   .comment-modal, .authortooltip { margin-top: 20px !important; }
@@ -90,12 +90,11 @@
   #outerdocbody {
     width: 100%;
   }
-  #outerdocbody iframe, .timeslider #editorcontainerbox {
+  #outerdocbody iframe, #outerdocbody > #innerdocbody {
-    padding: 15px !important;
+    padding: 15px;
   }
   #sidediv {
     display: none;
-    top: 15px !important; /* = #outerdocbody iframe padding-top */
   }
 }
 

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

@@ -1,21 +1,17 @@
-#innerdocbody, #padcontent {
+#innerdocbody, #innerdocbody {
   font-size: 15px;
   line-height: 25px;
   padding: 0;
 }
 
-#innerdocbody span, #padcontent span {
+#innerdocbody span, #innerdocbody span {
   padding: 4px 0 !important;
 }
 
-#innerdocbody h1 span, #padcontent h1 span {
+#innerdocbody h1 span, #innerdocbody h1 span {
   padding: 0;
 }
 
-body {
-  overflow: hidden;
-}
-
 option {
   text-transform: capitalize;
 }

src/static/skins/colibris/timeslider.css

@@ -1,4 +1,75 @@
-@media (max-width: 600px) { html { overflow: hidden } }
+#timeslider-slider #ui-slider-handle {
+  border-radius: 3px;
+  width: 12px;
+  height: 28px;
+}
+
+#editorcontainerbox {
+  overflow-y: auto;
+}
+
+button {
+  font-family: inherit;
+  cursor: pointer;
+}
+
+#timeslider-slider #ui-slider-bar {
+  border-radius: 3px;
+  background-color: #e4e4e4;
+}
+#slider-btn-container {
+  margin: 0 20px;
+  margin-top: -15px;
+}
+#slider-btn-container #playpause_button_icon {
+  color: white;
+  margin-right: 5px;
+}
+#slider-btn-container .stepper {
+  border: 2px solid;
+  height: 25px;
+  width: 25px;
+  margin-left: 5px;
+  font-size: 13px;
+}
+#slider-btn-container .stepper.disabled {
+  opacity: .5;
+}
+
+.timeslider #editbar .buttontext {
+  color: white;
+  margin: 0;
+}
+
+#editbar {
+  display: block;
+  padding-bottom: 5px;
+}
+
+#editbar li > a {
+  border-radius: 3px;
+}
+
+#timeslider-slider #timer {
+  opacity: .7;
+  top: -12px;
+  font-size: .8em;
+}
+
+.timeslider #authorsList .author {
+  padding: 2px 5px;
+  border-radius: 3px;
+}
+
+.timeslider-title {
+  font-size: 1.8rem !important;
+}
+.timeslider-subtitle {
+  margin-top: 6px;
+  font-size: .9em;
+}
+
+/*@media (max-width: 600px) { html { overflow: hidden } }
 
 @media (max-width: 1100px) {
   .timeslider #padeditor {
@@ -77,20 +148,7 @@
 
 #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;
@@ -100,10 +158,7 @@
   content: "\e836";
 }
 
-.timeslider #editbar .buttontext {
+
-  color: white;
-  margin: 0;
-}
 .timeslider #editbar .grouped-right {
   margin: 0;
   border-radius: 3px;
@@ -137,7 +192,4 @@
   padding-top: 2px;
 }
 
-.timeslider #authorsList .author {
+*/
-  padding: 2px 5px;
-  border-radius: 3px;
-}

src/static/skins/colibris/timeslider.js

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