mirror of
https://github.com/flynx/PortableMag.git
synced 2025-10-31 12:00:11 +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-themes.css">
|
||||
<link rel="stylesheet" href="magazine-custom.css">
|
||||
<link rel="stylesheet" href="magazine-editor.css">
|
||||
<style>
|
||||
|
||||
.chrome {
|
||||
@ -36,6 +37,7 @@
|
||||
transition: none;
|
||||
}
|
||||
|
||||
/*
|
||||
.scroller {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
@ -45,6 +47,7 @@
|
||||
|
||||
overflow: hidden;
|
||||
}
|
||||
*/
|
||||
|
||||
|
||||
/* vertical */
|
||||
@ -59,197 +62,6 @@
|
||||
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>
|
||||
|
||||
<script src="ext-lib/jquery.js"></script>
|
||||
@ -283,172 +95,6 @@ CKEDITOR.disableAutoInline = true
|
||||
|
||||
<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