colibris: style timeslider page
This commit is contained in:
Sebastian Castro
parent
8343afde84
commit
39ad22f78f
5 changed files with 177 additions and 26 deletions
|
|
@ -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 */
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -9,17 +9,18 @@
|
|||
|
||||
#editorcontainer {
|
||||
top: 41px !important;
|
||||
background-color: #e9e9e9;
|
||||
padding-top: 0 !important;
|
||||
background-color: #f9f9f9 !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 */
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -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');
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue