mirror of
https://github.com/flynx/PortableMag.git
synced 2025-10-31 03:50:16 +00:00
split-off the editor, still need some polishing and sanding (yes, in that order ;) )...
Signed-off-by: Alex A. Naanou <alex.nanou@gmail.com>
This commit is contained in:
parent
78367961ac
commit
151c98ac8e
177
editor.js
177
editor.js
@ -209,4 +209,179 @@ function removePage(page){
|
|||||||
|
|
||||||
|
|
||||||
/*********************************************************************/
|
/*********************************************************************/
|
||||||
// vim:set ts=4 sw=4 :
|
|
||||||
|
// XXX this needs revision...
|
||||||
|
// XXX need better separation between full screen and ribbon modes...
|
||||||
|
// XXX need to split this into more generic parts...
|
||||||
|
|
||||||
|
function setupEditorToolbars(){
|
||||||
|
var indicator = $('<div class="current-page-indicator"/>')
|
||||||
|
.appendTo($('.magazine'))
|
||||||
|
.click(function(){
|
||||||
|
// NOTE: this does the same thing as handleClick...
|
||||||
|
togglePageView('on')
|
||||||
|
setCurrentPage(target)
|
||||||
|
setTransitionEasing(mag, 'cubic-bezier(0.33,0.66,0.66,1)')
|
||||||
|
})
|
||||||
|
|
||||||
|
// the toolbars...
|
||||||
|
var left_bar = $('<div class="left-toolbar"/>')
|
||||||
|
.appendTo(indicator)
|
||||||
|
var right_bar = $('<div class="right-toolbar"/>')
|
||||||
|
.appendTo(indicator)
|
||||||
|
|
||||||
|
$('<button class="button remove">×</button>')
|
||||||
|
.appendTo(indicator)
|
||||||
|
.click(function(){
|
||||||
|
setTransitionDuration($('.magazine'), 0)
|
||||||
|
removePage()
|
||||||
|
runMagazineTemplates()
|
||||||
|
|
||||||
|
return false
|
||||||
|
})
|
||||||
|
|
||||||
|
$('<button class="button shift">></button>')
|
||||||
|
.appendTo(right_bar)
|
||||||
|
.click(function(){
|
||||||
|
shiftPageRight()
|
||||||
|
runMagazineTemplates()
|
||||||
|
|
||||||
|
return false
|
||||||
|
})
|
||||||
|
$('<button class="button add">+</button>')
|
||||||
|
.appendTo(right_bar)
|
||||||
|
.click(function(){
|
||||||
|
|
||||||
|
return false
|
||||||
|
})
|
||||||
|
|
||||||
|
$('<button class="button shift"><</button>')
|
||||||
|
.appendTo(left_bar)
|
||||||
|
.click(function(){
|
||||||
|
shiftPageLeft()
|
||||||
|
runMagazineTemplates()
|
||||||
|
|
||||||
|
return false
|
||||||
|
})
|
||||||
|
$('<button class="button add">+</button>')
|
||||||
|
.appendTo(left_bar)
|
||||||
|
.click(function(){
|
||||||
|
|
||||||
|
return false
|
||||||
|
})
|
||||||
|
|
||||||
|
$('<div class="editor-status">Editor Mode</div>')
|
||||||
|
.appendTo($('.chrome'))
|
||||||
|
.click(function(){
|
||||||
|
toggleEditor('off')
|
||||||
|
})
|
||||||
|
}
|
||||||
|
function clearEditorToolbars(){
|
||||||
|
var indicator = $('.current-page-indicator').remove()
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
// general editor mode...
|
||||||
|
var toggleEditor = createCSSClassToggler(
|
||||||
|
'.chrome',
|
||||||
|
'editor',
|
||||||
|
function(){
|
||||||
|
setTransitionDuration($('.magazine'), 0)
|
||||||
|
},
|
||||||
|
function(action){
|
||||||
|
if(action == 'on'){
|
||||||
|
// make editable fields editable...
|
||||||
|
if(togglePageView('?') == 'on'){
|
||||||
|
toggleInlineEditor('on')
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
toggleInlineEditor('off')
|
||||||
|
}
|
||||||
|
setCurrentPage($('.current.page'))
|
||||||
|
})
|
||||||
|
// inline editor switcher...
|
||||||
|
var toggleInlineEditor = createCSSClassToggler(
|
||||||
|
'.chrome',
|
||||||
|
'inline-edior',
|
||||||
|
function(action){
|
||||||
|
// prevent switching on while not in editor mode...
|
||||||
|
if(toggleEditor('?') == 'off' && action == 'on'){
|
||||||
|
return false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
function(action){
|
||||||
|
if(action == 'on'){
|
||||||
|
MagazineScroller.stop()
|
||||||
|
$('[contenteditable]').attr({contenteditable: 'true'})
|
||||||
|
// ckeditor...
|
||||||
|
if(window.CKEDITOR){
|
||||||
|
CKEDITOR.inlineAll()
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
$('[contenteditable]')
|
||||||
|
.blur()
|
||||||
|
.attr({contenteditable: 'false'})
|
||||||
|
MagazineScroller.start()
|
||||||
|
// ckeditor...
|
||||||
|
if(window.CKEDITOR){
|
||||||
|
for( var i in CKEDITOR.instances){
|
||||||
|
CKEDITOR.instances[i].destroy()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
function setupEditor(){
|
||||||
|
// editable focus...
|
||||||
|
$('[contenteditable]')
|
||||||
|
.on('focus', function(){
|
||||||
|
if(toggleInlineEditor('?') == 'off'){
|
||||||
|
$(':focus').blur()
|
||||||
|
} else {
|
||||||
|
toggleInlineEditorMode('on')
|
||||||
|
}
|
||||||
|
})
|
||||||
|
.on('blur', function(){
|
||||||
|
toggleInlineEditorMode('off')
|
||||||
|
})
|
||||||
|
|
||||||
|
$('.viewer')
|
||||||
|
// move the page indicator...
|
||||||
|
// NOTE: this is to be used for page-specific toolbars etc.
|
||||||
|
.on('pageChanged', function(){
|
||||||
|
var cur = $('.current.page')
|
||||||
|
var indicator = $('.current-page-indicator')
|
||||||
|
var shift = getElementShift($('.magazine'))
|
||||||
|
// XXX this is a stub...
|
||||||
|
// reverse the align...
|
||||||
|
indicator
|
||||||
|
.width(cur.width())
|
||||||
|
.height(cur.height())
|
||||||
|
.css({
|
||||||
|
left: getPageInMagazineOffset(cur),
|
||||||
|
top: 0,
|
||||||
|
})
|
||||||
|
})
|
||||||
|
// switch between editor modes...
|
||||||
|
.on('fullScreenMode', function(){
|
||||||
|
$(':focus').blur()
|
||||||
|
if(toggleEditor('?') == 'on'){
|
||||||
|
toggleInlineEditor('on')
|
||||||
|
}
|
||||||
|
})
|
||||||
|
.on('ribbonMode', function(){
|
||||||
|
$(':focus').blur()
|
||||||
|
if(toggleEditor('?') == 'on'){
|
||||||
|
toggleInlineEditor('off')
|
||||||
|
}
|
||||||
|
})
|
||||||
|
setupEditorToolbars()
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
/**********************************************************************
|
||||||
|
* vim:set ts=4 sw=4 : */
|
||||||
|
|||||||
360
index.html
360
index.html
@ -9,6 +9,7 @@
|
|||||||
<link rel="stylesheet" href="magazine.css">
|
<link rel="stylesheet" href="magazine.css">
|
||||||
<link rel="stylesheet" href="magazine-themes.css">
|
<link rel="stylesheet" href="magazine-themes.css">
|
||||||
<link rel="stylesheet" href="magazine-custom.css">
|
<link rel="stylesheet" href="magazine-custom.css">
|
||||||
|
<link rel="stylesheet" href="magazine-editor.css">
|
||||||
<style>
|
<style>
|
||||||
|
|
||||||
.chrome {
|
.chrome {
|
||||||
@ -36,6 +37,7 @@
|
|||||||
transition: none;
|
transition: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
.scroller {
|
.scroller {
|
||||||
position: relative;
|
position: relative;
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
@ -45,6 +47,7 @@
|
|||||||
|
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
|
*/
|
||||||
|
|
||||||
|
|
||||||
/* vertical */
|
/* vertical */
|
||||||
@ -59,197 +62,6 @@
|
|||||||
display: block;
|
display: block;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
.current-page-indicator {
|
|
||||||
display: none;
|
|
||||||
position: absolute;
|
|
||||||
box-sizing:border-box;
|
|
||||||
opacity: 0.8;
|
|
||||||
|
|
||||||
-webkit-transition: all 0.3s ease;
|
|
||||||
-moz-transition: all 0.3s ease;
|
|
||||||
-o-transition: all 0.3s ease;
|
|
||||||
-ms-transition: all 0.3s ease;
|
|
||||||
transition: all 0.3s ease;
|
|
||||||
}
|
|
||||||
.editor .current-page-indicator {
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
.editor.page-fit-to-viewer .current-page-indicator {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.editor .current-page-indicator .button {
|
|
||||||
position: relative;
|
|
||||||
display: block;
|
|
||||||
width: 100px;
|
|
||||||
height: 100px;
|
|
||||||
|
|
||||||
margin: 15px;
|
|
||||||
|
|
||||||
font-size: 50px;
|
|
||||||
|
|
||||||
background: white;
|
|
||||||
color: black;
|
|
||||||
border: solid black 5px;
|
|
||||||
border-radius: 50%;
|
|
||||||
|
|
||||||
box-shadow: 5px 5px 50px 0px black;
|
|
||||||
}
|
|
||||||
.editor .current-page-indicator .button:hover {
|
|
||||||
box-shadow: 10px 10px 55px 0px black;
|
|
||||||
}
|
|
||||||
.editor.page-fit-to-viewer .current-page-indicator .button {
|
|
||||||
width: 50px;
|
|
||||||
height: 50px;
|
|
||||||
|
|
||||||
border: solid black 2px;
|
|
||||||
/*border-radius:25px;*/
|
|
||||||
font-size: 25px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.editor .current-page-indicator .button.remove {
|
|
||||||
position: absolute;
|
|
||||||
background: red;
|
|
||||||
color: white;
|
|
||||||
font-size: 72px;
|
|
||||||
margin: -50px;
|
|
||||||
top: 0px;
|
|
||||||
right: 0px;
|
|
||||||
}
|
|
||||||
.editor.page-fit-to-viewer .current-page-indicator .button.remove {
|
|
||||||
font-size: 36px;
|
|
||||||
margin: -25px;
|
|
||||||
margin: 15px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.editor .current-page-indicator .left-toolbar,
|
|
||||||
.editor .current-page-indicator .right-toolbar {
|
|
||||||
position: absolute;
|
|
||||||
|
|
||||||
top: 30%;
|
|
||||||
}
|
|
||||||
.editor.page-fit-to-viewer .current-page-indicator .left-toolbar,
|
|
||||||
.editor.page-fit-to-viewer .current-page-indicator .right-toolbar {
|
|
||||||
top: 40%;
|
|
||||||
}
|
|
||||||
.editor .current-page-indicator .left-toolbar {
|
|
||||||
left: 0px;
|
|
||||||
margin-left: -60px;
|
|
||||||
}
|
|
||||||
.editor .current-page-indicator .right-toolbar {
|
|
||||||
right: 0px;
|
|
||||||
margin-right: -60px;
|
|
||||||
}
|
|
||||||
.editor.page-fit-to-viewer .current-page-indicator .left-toolbar{
|
|
||||||
margin: 0px;
|
|
||||||
}
|
|
||||||
.editor.page-fit-to-viewer .current-page-indicator .right-toolbar {
|
|
||||||
margin: 0px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.editor .page.cover:after {
|
|
||||||
display: block;
|
|
||||||
position: absolute;
|
|
||||||
vertical-align: bottom;
|
|
||||||
text-align: left;
|
|
||||||
|
|
||||||
content: "Cover";
|
|
||||||
background: red;
|
|
||||||
color: white;
|
|
||||||
font-size: 50px;
|
|
||||||
width: 100%;
|
|
||||||
height: 60px;
|
|
||||||
bottom: 0px;
|
|
||||||
|
|
||||||
opacity: 0.2;
|
|
||||||
}
|
|
||||||
.editor .article {
|
|
||||||
margin-left: 40px;
|
|
||||||
padding-bottom: 5px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.editor .article:before {
|
|
||||||
display: block;
|
|
||||||
vertical-align: bottom;
|
|
||||||
position: absolute;
|
|
||||||
content: "Article";
|
|
||||||
color: white;
|
|
||||||
font-size: 50px;
|
|
||||||
bottom: -60px;
|
|
||||||
}
|
|
||||||
.editor .article:nth-child(odd) {
|
|
||||||
border-bottom: solid 50px gray;
|
|
||||||
}
|
|
||||||
.editor .article:nth-child(even) {
|
|
||||||
border-bottom: solid 50px silver;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
.editor-status {
|
|
||||||
display: block;
|
|
||||||
position: fixed;
|
|
||||||
top: 30px;
|
|
||||||
left: -200px;
|
|
||||||
z-index: 99999;
|
|
||||||
padding: 5px;
|
|
||||||
padding-left: 60px;
|
|
||||||
padding-right: 15px;
|
|
||||||
|
|
||||||
background: red;
|
|
||||||
color: white;
|
|
||||||
|
|
||||||
font-size: 14px;
|
|
||||||
font-weight: bold;
|
|
||||||
|
|
||||||
box-shadow: 5px 5px 25px 0px black;
|
|
||||||
|
|
||||||
cursor: hand;
|
|
||||||
|
|
||||||
-webkit-transform: skewX(10deg);
|
|
||||||
-moz-transform: skewX(10deg);
|
|
||||||
-o-transform: skewX(10deg);
|
|
||||||
-ms-transform: skewX(10deg);
|
|
||||||
transform: skewX(10deg);
|
|
||||||
|
|
||||||
-webkit-transition: all 0.3s ease;
|
|
||||||
-moz-transition: all 0.3s ease;
|
|
||||||
-o-transition: all 0.3s ease;
|
|
||||||
-ms-transition: all 0.3s ease;
|
|
||||||
transition: all 0.3s ease;
|
|
||||||
}
|
|
||||||
.editor-status:before {
|
|
||||||
content: "Editor Mode";
|
|
||||||
display: block;
|
|
||||||
position: absolute;
|
|
||||||
top: -1px;
|
|
||||||
left: 0px;
|
|
||||||
z-index: 99998;
|
|
||||||
padding: 5px;
|
|
||||||
padding-left: 60px;
|
|
||||||
padding-right: 15px;
|
|
||||||
|
|
||||||
background: red;
|
|
||||||
|
|
||||||
cursor: hand;
|
|
||||||
|
|
||||||
-webkit-transform: skewX(-30deg);
|
|
||||||
-moz-transform: skewX(-30deg);
|
|
||||||
-o-transform: skewX(-30deg);
|
|
||||||
-ms-transform: skewX(-30deg);
|
|
||||||
transform: skewX(-30deg);
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
.editor .editor-status {
|
|
||||||
display: block;
|
|
||||||
left: -30px;
|
|
||||||
}
|
|
||||||
.editor.inline-editor-mode .editor-status {
|
|
||||||
opacity: 0.4;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
</style>
|
</style>
|
||||||
|
|
||||||
<script src="ext-lib/jquery.js"></script>
|
<script src="ext-lib/jquery.js"></script>
|
||||||
@ -283,172 +95,6 @@ CKEDITOR.disableAutoInline = true
|
|||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
|
||||||
// XXX split this code off...
|
|
||||||
// XXX need better separation between full screen and ribbon modes...
|
|
||||||
function setupEditor(){
|
|
||||||
function setupEditorToolbars(){
|
|
||||||
var indicator = $('<div class="current-page-indicator"/>')
|
|
||||||
.appendTo($('.magazine'))
|
|
||||||
.click(function(){
|
|
||||||
// NOTE: this does the same thing as handleClick...
|
|
||||||
togglePageView('on')
|
|
||||||
setCurrentPage(target)
|
|
||||||
setTransitionEasing(mag, 'cubic-bezier(0.33,0.66,0.66,1)')
|
|
||||||
})
|
|
||||||
|
|
||||||
// the toolbars...
|
|
||||||
var left_bar = $('<div class="left-toolbar"/>')
|
|
||||||
.appendTo(indicator)
|
|
||||||
var right_bar = $('<div class="right-toolbar"/>')
|
|
||||||
.appendTo(indicator)
|
|
||||||
|
|
||||||
$('<button class="button remove">×</button>')
|
|
||||||
.appendTo(indicator)
|
|
||||||
.click(function(){
|
|
||||||
setTransitionDuration($('.magazine'), 0)
|
|
||||||
removePage()
|
|
||||||
runMagazineTemplates()
|
|
||||||
|
|
||||||
return false
|
|
||||||
})
|
|
||||||
|
|
||||||
$('<button class="button shift">></button>')
|
|
||||||
.appendTo(right_bar)
|
|
||||||
.click(function(){
|
|
||||||
shiftPageRight()
|
|
||||||
runMagazineTemplates()
|
|
||||||
|
|
||||||
return false
|
|
||||||
})
|
|
||||||
$('<button class="button add">+</button>')
|
|
||||||
.appendTo(right_bar)
|
|
||||||
.click(function(){
|
|
||||||
|
|
||||||
return false
|
|
||||||
})
|
|
||||||
|
|
||||||
$('<button class="button shift"><</button>')
|
|
||||||
.appendTo(left_bar)
|
|
||||||
.click(function(){
|
|
||||||
shiftPageLeft()
|
|
||||||
runMagazineTemplates()
|
|
||||||
|
|
||||||
return false
|
|
||||||
})
|
|
||||||
$('<button class="button add">+</button>')
|
|
||||||
.appendTo(left_bar)
|
|
||||||
.click(function(){
|
|
||||||
|
|
||||||
return false
|
|
||||||
})
|
|
||||||
|
|
||||||
$('<div class="editor-status">Editor Mode</div>')
|
|
||||||
.appendTo($('.chrome'))
|
|
||||||
.click(function(){
|
|
||||||
toggleEditor('off')
|
|
||||||
})
|
|
||||||
}
|
|
||||||
function clearEdiorToolbars(){
|
|
||||||
var indicator = $('.current-page-indicator').remove()
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
// general editor mode...
|
|
||||||
window.toggleEditor = createCSSClassToggler(
|
|
||||||
'.chrome',
|
|
||||||
'editor',
|
|
||||||
function(){
|
|
||||||
setTransitionDuration($('.magazine'), 0)
|
|
||||||
},
|
|
||||||
function(action){
|
|
||||||
if(action == 'on'){
|
|
||||||
// make editable fields editable...
|
|
||||||
if(togglePageView('?') == 'on'){
|
|
||||||
toggleInlineEditor('on')
|
|
||||||
}
|
|
||||||
} else {
|
|
||||||
toggleInlineEditor('off')
|
|
||||||
}
|
|
||||||
setCurrentPage($('.current.page'))
|
|
||||||
})
|
|
||||||
// inline editor switcher...
|
|
||||||
window.toggleInlineEditor = createCSSClassToggler(
|
|
||||||
'.chrome',
|
|
||||||
'inline-edior',
|
|
||||||
function(action){
|
|
||||||
// prevent switching on while not in editor mode...
|
|
||||||
if(toggleEditor('?') == 'off' && action == 'on'){
|
|
||||||
return false
|
|
||||||
}
|
|
||||||
},
|
|
||||||
function(action){
|
|
||||||
if(action == 'on'){
|
|
||||||
MagazineScroller.stop()
|
|
||||||
$('[contenteditable]').attr({contenteditable: 'true'})
|
|
||||||
// ckeditor...
|
|
||||||
if(window.CKEDITOR){
|
|
||||||
CKEDITOR.inlineAll()
|
|
||||||
}
|
|
||||||
} else {
|
|
||||||
$('[contenteditable]')
|
|
||||||
.blur()
|
|
||||||
.attr({contenteditable: 'false'})
|
|
||||||
MagazineScroller.start()
|
|
||||||
// ckeditor...
|
|
||||||
if(window.CKEDITOR){
|
|
||||||
for( var i in CKEDITOR.instances){
|
|
||||||
CKEDITOR.instances[i].destroy()
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
})
|
|
||||||
|
|
||||||
// editable focus...
|
|
||||||
$('[contenteditable]')
|
|
||||||
.on('focus', function(){
|
|
||||||
if(toggleInlineEditor('?') == 'off'){
|
|
||||||
$(':focus').blur()
|
|
||||||
} else {
|
|
||||||
toggleInlineEditorMode('on')
|
|
||||||
}
|
|
||||||
})
|
|
||||||
.on('blur', function(){
|
|
||||||
toggleInlineEditorMode('off')
|
|
||||||
})
|
|
||||||
|
|
||||||
$('.viewer')
|
|
||||||
// move the page indicator...
|
|
||||||
// NOTE: this is to be used for page-specific toolbars etc.
|
|
||||||
.on('pageChanged', function(){
|
|
||||||
var cur = $('.current.page')
|
|
||||||
var indicator = $('.current-page-indicator')
|
|
||||||
var shift = getElementShift($('.magazine'))
|
|
||||||
// XXX this is a stub...
|
|
||||||
// reverse the align...
|
|
||||||
indicator
|
|
||||||
.width(cur.width())
|
|
||||||
.height(cur.height())
|
|
||||||
.css({
|
|
||||||
left: getPageInMagazineOffset(cur),
|
|
||||||
top: 0,
|
|
||||||
})
|
|
||||||
})
|
|
||||||
// switch between editor modes...
|
|
||||||
.on('fullScreenMode', function(){
|
|
||||||
$(':focus').blur()
|
|
||||||
if(toggleEditor('?') == 'on'){
|
|
||||||
toggleInlineEditor('on')
|
|
||||||
}
|
|
||||||
})
|
|
||||||
.on('ribbonMode', function(){
|
|
||||||
$(':focus').blur()
|
|
||||||
if(toggleEditor('?') == 'on'){
|
|
||||||
toggleInlineEditor('off')
|
|
||||||
}
|
|
||||||
})
|
|
||||||
|
|
||||||
setupEditorToolbars()
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|||||||
190
magazine-editor.css
Executable file
190
magazine-editor.css
Executable file
@ -0,0 +1,190 @@
|
|||||||
|
.current-page-indicator {
|
||||||
|
display: none;
|
||||||
|
position: absolute;
|
||||||
|
box-sizing:border-box;
|
||||||
|
opacity: 0.8;
|
||||||
|
|
||||||
|
-webkit-transition: all 0.3s ease;
|
||||||
|
-moz-transition: all 0.3s ease;
|
||||||
|
-o-transition: all 0.3s ease;
|
||||||
|
-ms-transition: all 0.3s ease;
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
}
|
||||||
|
.editor .current-page-indicator {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
.editor.page-fit-to-viewer .current-page-indicator {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.editor .current-page-indicator .button {
|
||||||
|
position: relative;
|
||||||
|
display: block;
|
||||||
|
width: 100px;
|
||||||
|
height: 100px;
|
||||||
|
|
||||||
|
margin: 15px;
|
||||||
|
|
||||||
|
font-size: 50px;
|
||||||
|
|
||||||
|
background: white;
|
||||||
|
color: black;
|
||||||
|
border: solid black 5px;
|
||||||
|
border-radius: 50%;
|
||||||
|
|
||||||
|
box-shadow: 5px 5px 50px 0px black;
|
||||||
|
}
|
||||||
|
.editor .current-page-indicator .button:hover {
|
||||||
|
box-shadow: 10px 10px 55px 0px black;
|
||||||
|
}
|
||||||
|
.editor.page-fit-to-viewer .current-page-indicator .button {
|
||||||
|
width: 50px;
|
||||||
|
height: 50px;
|
||||||
|
|
||||||
|
border: solid black 2px;
|
||||||
|
/*border-radius:25px;*/
|
||||||
|
font-size: 25px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.editor .current-page-indicator .button.remove {
|
||||||
|
position: absolute;
|
||||||
|
background: red;
|
||||||
|
color: white;
|
||||||
|
font-size: 72px;
|
||||||
|
margin: -50px;
|
||||||
|
top: 0px;
|
||||||
|
right: 0px;
|
||||||
|
}
|
||||||
|
.editor.page-fit-to-viewer .current-page-indicator .button.remove {
|
||||||
|
font-size: 36px;
|
||||||
|
margin: -25px;
|
||||||
|
margin: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.editor .current-page-indicator .left-toolbar,
|
||||||
|
.editor .current-page-indicator .right-toolbar {
|
||||||
|
position: absolute;
|
||||||
|
|
||||||
|
top: 30%;
|
||||||
|
}
|
||||||
|
.editor.page-fit-to-viewer .current-page-indicator .left-toolbar,
|
||||||
|
.editor.page-fit-to-viewer .current-page-indicator .right-toolbar {
|
||||||
|
top: 40%;
|
||||||
|
}
|
||||||
|
.editor .current-page-indicator .left-toolbar {
|
||||||
|
left: 0px;
|
||||||
|
margin-left: -60px;
|
||||||
|
}
|
||||||
|
.editor .current-page-indicator .right-toolbar {
|
||||||
|
right: 0px;
|
||||||
|
margin-right: -60px;
|
||||||
|
}
|
||||||
|
.editor.page-fit-to-viewer .current-page-indicator .left-toolbar{
|
||||||
|
margin: 0px;
|
||||||
|
}
|
||||||
|
.editor.page-fit-to-viewer .current-page-indicator .right-toolbar {
|
||||||
|
margin: 0px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.editor .page.cover:after {
|
||||||
|
display: block;
|
||||||
|
position: absolute;
|
||||||
|
vertical-align: bottom;
|
||||||
|
text-align: left;
|
||||||
|
|
||||||
|
content: "Cover";
|
||||||
|
background: red;
|
||||||
|
color: white;
|
||||||
|
font-size: 50px;
|
||||||
|
width: 100%;
|
||||||
|
height: 60px;
|
||||||
|
bottom: 0px;
|
||||||
|
|
||||||
|
opacity: 0.2;
|
||||||
|
}
|
||||||
|
.editor .article {
|
||||||
|
margin-left: 40px;
|
||||||
|
padding-bottom: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.editor .article:before {
|
||||||
|
display: block;
|
||||||
|
vertical-align: bottom;
|
||||||
|
position: absolute;
|
||||||
|
content: "Article";
|
||||||
|
color: white;
|
||||||
|
font-size: 50px;
|
||||||
|
bottom: -60px;
|
||||||
|
}
|
||||||
|
.editor .article:nth-child(odd) {
|
||||||
|
border-bottom: solid 50px gray;
|
||||||
|
}
|
||||||
|
.editor .article:nth-child(even) {
|
||||||
|
border-bottom: solid 50px silver;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.editor-status {
|
||||||
|
display: block;
|
||||||
|
position: fixed;
|
||||||
|
top: 30px;
|
||||||
|
left: -200px;
|
||||||
|
z-index: 99999;
|
||||||
|
padding: 5px;
|
||||||
|
padding-left: 60px;
|
||||||
|
padding-right: 15px;
|
||||||
|
|
||||||
|
background: red;
|
||||||
|
color: white;
|
||||||
|
|
||||||
|
font-size: 14px;
|
||||||
|
font-weight: bold;
|
||||||
|
|
||||||
|
box-shadow: 5px 5px 25px 0px black;
|
||||||
|
|
||||||
|
cursor: hand;
|
||||||
|
|
||||||
|
-webkit-transform: skewX(10deg);
|
||||||
|
-moz-transform: skewX(10deg);
|
||||||
|
-o-transform: skewX(10deg);
|
||||||
|
-ms-transform: skewX(10deg);
|
||||||
|
transform: skewX(10deg);
|
||||||
|
|
||||||
|
-webkit-transition: all 0.3s ease;
|
||||||
|
-moz-transition: all 0.3s ease;
|
||||||
|
-o-transition: all 0.3s ease;
|
||||||
|
-ms-transition: all 0.3s ease;
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
}
|
||||||
|
.editor-status:before {
|
||||||
|
content: "Editor Mode";
|
||||||
|
display: block;
|
||||||
|
position: absolute;
|
||||||
|
top: -1px;
|
||||||
|
left: 0px;
|
||||||
|
z-index: 99998;
|
||||||
|
padding: 5px;
|
||||||
|
padding-left: 60px;
|
||||||
|
padding-right: 15px;
|
||||||
|
|
||||||
|
background: red;
|
||||||
|
|
||||||
|
cursor: hand;
|
||||||
|
|
||||||
|
-webkit-transform: skewX(-30deg);
|
||||||
|
-moz-transform: skewX(-30deg);
|
||||||
|
-o-transform: skewX(-30deg);
|
||||||
|
-ms-transform: skewX(-30deg);
|
||||||
|
transform: skewX(-30deg);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.editor .editor-status {
|
||||||
|
display: block;
|
||||||
|
left: -30px;
|
||||||
|
}
|
||||||
|
.editor.inline-editor-mode .editor-status {
|
||||||
|
opacity: 0.4;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
Loading…
x
Reference in New Issue
Block a user