From c79ad1e504df16bc24545aa5545b63576fe65c61 Mon Sep 17 00:00:00 2001 From: Sebastian Castro Date: Fri, 3 Apr 2020 17:41:47 +0200 Subject: [PATCH] css: fix Colibris timeslider --- src/static/css/iframe_editor.css | 1 - src/static/css/pad.css | 1 - src/static/css/timeslider.css | 4 +- src/static/skins/colibris/pad.css | 13 +-- src/static/skins/colibris/src/layout.css | 23 +++-- src/static/skins/colibris/src/pad-editor.css | 10 +- src/static/skins/colibris/timeslider.css | 96 +++++++++++++++----- src/static/skins/colibris/timeslider.js | 3 - 8 files changed, 97 insertions(+), 54 deletions(-) diff --git a/src/static/css/iframe_editor.css b/src/static/css/iframe_editor.css index a688bb527..e872c48f4 100644 --- a/src/static/css/iframe_editor.css +++ b/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; diff --git a/src/static/css/pad.css b/src/static/css/pad.css index ea5689959..f1e12d2ac 100644 --- a/src/static/css/pad.css +++ b/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 { diff --git a/src/static/css/timeslider.css b/src/static/css/timeslider.css index 558e4e130..288513c18 100644 --- a/src/static/css/timeslider.css +++ b/src/static/css/timeslider.css @@ -113,8 +113,8 @@ /* PAD CONTENT */ -#editorcontainerbox { - overflow-y: scroll; +#outerdocbody { + display: block; } #innerdocbody { diff --git a/src/static/skins/colibris/pad.css b/src/static/skins/colibris/pad.css index b3bb12752..71a503b0d 100644 --- a/src/static/skins/colibris/pad.css +++ b/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; } diff --git a/src/static/skins/colibris/src/layout.css b/src/static/skins/colibris/src/layout.css index c84fb0154..0f88b0e2e 100644 --- a/src/static/skins/colibris/src/layout.css +++ b/src/static/skins/colibris/src/layout.css @@ -1,11 +1,8 @@ -#outerdocbody, .timeslider #editorcontainerbox { +#outerdocbody { max-width: 900px; margin: 0 auto; padding-top: 20px; -} - -#outerdocbody { - overflow-y: auto; + width: 100%; } #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 { - padding: 20px !important; + #outerdocbody iframe, #outerdocbody > #innerdocbody { + 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 { - padding: 15px !important; + #outerdocbody iframe, #outerdocbody > #innerdocbody { + padding: 15px; } #sidediv { display: none; - top: 15px !important; /* = #outerdocbody iframe padding-top */ } } diff --git a/src/static/skins/colibris/src/pad-editor.css b/src/static/skins/colibris/src/pad-editor.css index aae79bf84..a31d408a2 100644 --- a/src/static/skins/colibris/src/pad-editor.css +++ b/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; } diff --git a/src/static/skins/colibris/timeslider.css b/src/static/skins/colibris/timeslider.css index ee45c3bcb..12573e9d8 100644 --- a/src/static/skins/colibris/timeslider.css +++ b/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; -} \ No newline at end of file +*/ \ No newline at end of file diff --git a/src/static/skins/colibris/timeslider.js b/src/static/skins/colibris/timeslider.js index c94a55778..1322ec4c8 100644 --- a/src/static/skins/colibris/timeslider.js +++ b/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'); }