colibris: style timeslider page

This commit is contained in:
Sebastian Castro 2018-11-08 21:56:39 +01:00
parent 8343afde84
commit 39ad22f78f
5 changed files with 177 additions and 26 deletions

View file

@ -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 */

View file

@ -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;

View file

@ -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 */
}

View file

@ -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;
}

View file

@ -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');
}