diff --git a/app/.jshintrc b/app/.jshintrc index fef383ad..26b6a1f0 100644 --- a/app/.jshintrc +++ b/app/.jshintrc @@ -16,7 +16,8 @@ "Tether", "Tooltip", "Drop", - "Dropzone" + "Dropzone", + "dragula" ], "browser": true, "boss": true, diff --git a/app/app/components/document/document-sidebar-toc.js b/app/app/components/document/document-sidebar-toc.js index ef0f239c..bd199a0d 100644 --- a/app/app/components/document/document-sidebar-toc.js +++ b/app/app/components/document/document-sidebar-toc.js @@ -1,11 +1,11 @@ // Copyright 2016 Documize Inc. . All rights reserved. // -// This software (Documize Community Edition) is licensed under +// This software (Documize Community Edition) is licensed under // GNU AGPL v3 http://www.gnu.org/licenses/agpl-3.0.en.html // // You can operate outside the AGPL restrictions by purchasing // Documize Enterprise Edition and obtaining a commercial license -// by contacting . +// by contacting . // // https://documize.com @@ -34,7 +34,7 @@ export default Ember.Component.extend(NotifierMixin, TooltipMixin, { didReceiveAttrs: function() { this.set('showToc', is.not.undefined(this.get('pages')) && this.get('pages').get('length') > 2); if (is.not.null(this.get('page'))) { - this.send('clickGotoPage', this.get('page')); + this.send('onEntryClick', this.get('page')); } }, @@ -52,6 +52,7 @@ export default Ember.Component.extend(NotifierMixin, TooltipMixin, { var s = $(".document-structure"); var pos = s.position(); + $(window).scroll(function() { var windowpos = $(window).scrollTop(); if (windowpos - 200 >= pos.top) { @@ -69,7 +70,7 @@ export default Ember.Component.extend(NotifierMixin, TooltipMixin, { }, onDocumentPageAdded(pageId) { - this.send('clickGotoPage', pageId); + this.send('onEntryClick', pageId); }, // Controls what user can do with the toc (left sidebar). @@ -253,7 +254,7 @@ export default Ember.Component.extend(NotifierMixin, TooltipMixin, { this.attrs.changePageSequence(pendingChanges); - this.send('clickGotoPage', this.get('page')); + this.send('onEntryClick', this.get('page')); this.audit.record("moved-page-up"); this.showNotification("Moved up"); }, @@ -326,7 +327,7 @@ export default Ember.Component.extend(NotifierMixin, TooltipMixin, { this.attrs.changePageSequence(pendingChanges); - this.send('clickGotoPage', this.get('page')); + this.send('onEntryClick', this.get('page')); this.audit.record("moved-page-down"); this.showNotification("Moved down"); }, @@ -362,9 +363,9 @@ export default Ember.Component.extend(NotifierMixin, TooltipMixin, { this.attrs.changePageLevel(pendingChanges); - this.send('clickGotoPage', this.get('page')); - this.audit.record("changed-page-sequence"); this.showNotification("Indent"); + this.audit.record("changed-page-sequence"); + this.send('onEntryClick', this.get('page')); }, // Outdent - changes a page from H3 to H2, etc. @@ -397,12 +398,13 @@ export default Ember.Component.extend(NotifierMixin, TooltipMixin, { } this.attrs.changePageLevel(pendingChanges); - this.audit.record("changed-page-sequence"); + this.showNotification("Outdent"); - this.send('clickGotoPage', this.get('page')); + this.audit.record("changed-page-sequence"); + this.send('onEntryClick', this.get('page')); }, - clickGotoPage(id) { + onEntryClick(id) { this.setState(id); this.attrs.gotoPage(id); }, diff --git a/app/app/components/document/index-entry.js b/app/app/components/document/index-entry.js new file mode 100644 index 00000000..c0be4928 --- /dev/null +++ b/app/app/components/document/index-entry.js @@ -0,0 +1,34 @@ +// Copyright 2016 Documize Inc. . All rights reserved. +// +// This software (Documize Community Edition) is licensed under +// GNU AGPL v3 http://www.gnu.org/licenses/agpl-3.0.en.html +// +// You can operate outside the AGPL restrictions by purchasing +// Documize Enterprise Edition and obtaining a commercial license +// by contacting . +// +// https://documize.com + +import Ember from 'ember'; + +export default Ember.Component.extend({ + page: {}, + tagName: "li", + classNames: ["item"], + + indentLevel: Ember.computed('page', function() { + let nodeLevel = this.get('page.level'); + let indent = (nodeLevel - 1) * 20; + return indent; + }), + + didReceiveAttrs() { + this.set('classNames', ["item", "margin-left-" + this.get("indentLevel")]); + }, + + actions: { + onClick(id) { + this.get('onClick')(id); + } + } +}); \ No newline at end of file diff --git a/app/app/helpers/document/toc-entry.js b/app/app/helpers/document/toc-entry.js deleted file mode 100644 index 2f35f025..00000000 --- a/app/app/helpers/document/toc-entry.js +++ /dev/null @@ -1,34 +0,0 @@ -// Copyright 2016 Documize Inc. . All rights reserved. -// -// This software (Documize Community Edition) is licensed under -// GNU AGPL v3 http://www.gnu.org/licenses/agpl-3.0.en.html -// -// You can operate outside the AGPL restrictions by purchasing -// Documize Enterprise Edition and obtaining a commercial license -// by contacting . -// -// https://documize.com - -import Ember from 'ember'; - -export function documentTocEntry(params) { - let currentPage = params[0]; - let nodeId = params[1]; - let nodeLevel = params[2]; - let html = ""; - let indent = (nodeLevel - 1) * 20; - - html += ""; - - if (currentPage === nodeId) { - html += ""; - html += ""; - } else { - html += ""; - html += ""; - } - - return new Ember.Handlebars.SafeString(html); -} - -export default Ember.Helper.helper(documentTocEntry); \ No newline at end of file diff --git a/app/app/pods/document/index/controller.js b/app/app/pods/document/index/controller.js index cf1e6787..f6d0c84f 100644 --- a/app/app/pods/document/index/controller.js +++ b/app/app/pods/document/index/controller.js @@ -54,11 +54,11 @@ export default Ember.Controller.extend(NotifierMixin, { }, onPageSequenceChange(changes) { - var self = this; + let self = this; this.get('documentService').changePageSequence(this.model.get('id'), changes).then(function() { _.each(changes, function(change) { - var pageContent = _.findWhere(self.get('pages'), { + let pageContent = _.findWhere(self.get('pages'), { id: change.pageId }); @@ -72,19 +72,23 @@ export default Ember.Controller.extend(NotifierMixin, { }, onPageLevelChange(changes) { - var self = this; - let pages = this.get('pages'); + let self = this; this.get('documentService').changePageLevel(this.model.get('id'), changes).then(function() { _.each(changes, function(change) { - let pageContent = pages.findBy("id", change.pageId); + let pageContent = _.findWhere(self.get('pages'), { + id: change.pageId + }); if (is.not.undefined(pageContent)) { pageContent.set('level', change.level); } }); - self.set('pages', _.sortBy(self.get('pages'), "sequence")); + let pages = self.get('pages'); + pages = _.sortBy(pages, "sequence"); + self.set('pages', []); + self.set('pages', pages); }); }, diff --git a/app/app/styles/app.scss b/app/app/styles/app.scss index 33b78293..f0837c73 100644 --- a/app/app/styles/app.scss +++ b/app/app/styles/app.scss @@ -1,11 +1,11 @@ // Copyright 2016 Documize Inc. . All rights reserved. // -// This software (Documize Community Edition) is licensed under +// This software (Documize Community Edition) is licensed under // GNU AGPL v3 http://www.gnu.org/licenses/agpl-3.0.en.html // // You can operate outside the AGPL restrictions by purchasing // Documize Enterprise Edition and obtaining a commercial license -// by contacting . +// by contacting . // // https://documize.com @@ -33,4 +33,6 @@ @import "section/trello.scss"; @import "section/gemini.scss"; @import "section/github.scss"; -@import "section/markdown.scss"; \ No newline at end of file +@import "section/markdown.scss"; +@import "section/table.scss"; +@import "section/code.scss"; diff --git a/app/app/styles/section/code.scss b/app/app/styles/section/code.scss new file mode 100644 index 00000000..62d6d87f --- /dev/null +++ b/app/app/styles/section/code.scss @@ -0,0 +1,495 @@ +/* BASICS */ +.CodeMirror { + /* Set height, width, borders, and global font properties here */ + font-family: monospace; + height: 300px; + color: black; +} + +/* PADDING */ + +.CodeMirror-lines { + padding: 4px 0; /* Vertical padding around content */ +} +.CodeMirror pre { + padding: 0 4px; /* Horizontal padding of content */ +} + +.CodeMirror-scrollbar-filler, .CodeMirror-gutter-filler { + background-color: white; /* The little square between H and V scrollbars */ +} + +/* GUTTER */ + +.CodeMirror-gutters { + border-right: 1px solid #ddd; + background-color: #f7f7f7; + white-space: nowrap; +} +.CodeMirror-linenumbers {} +.CodeMirror-linenumber { + padding: 0 3px 0 5px; + min-width: 20px; + text-align: right; + color: #999; + white-space: nowrap; +} + +.CodeMirror-guttermarker { color: black; } +.CodeMirror-guttermarker-subtle { color: #999; } + +/* CURSOR */ + +.CodeMirror-cursor { + border-left: 1px solid black; + border-right: none; + width: 0; +} +/* Shown when moving in bi-directional text */ +.CodeMirror div.CodeMirror-secondarycursor { + border-left: 1px solid silver; +} +.cm-fat-cursor .CodeMirror-cursor { + width: auto; + border: 0; + background: #7e7; +} +.cm-fat-cursor div.CodeMirror-cursors { + z-index: 1; +} + +.cm-animate-fat-cursor { + width: auto; + border: 0; + -webkit-animation: blink 1.06s steps(1) infinite; + -moz-animation: blink 1.06s steps(1) infinite; + animation: blink 1.06s steps(1) infinite; + background-color: #7e7; +} +@-moz-keyframes blink { + 0% {} + 50% { background-color: transparent; } + 100% {} +} +@-webkit-keyframes blink { + 0% {} + 50% { background-color: transparent; } + 100% {} +} +@keyframes blink { + 0% {} + 50% { background-color: transparent; } + 100% {} +} + +/* Can style cursor different in overwrite (non-insert) mode */ +.CodeMirror-overwrite .CodeMirror-cursor {} + +.cm-tab { display: inline-block; text-decoration: inherit; } + +.CodeMirror-ruler { + border-left: 1px solid #ccc; + position: absolute; +} + +/* DEFAULT THEME */ + +.cm-s-default .cm-header {color: blue;} +.cm-s-default .cm-quote {color: #090;} +.cm-negative {color: #d44;} +.cm-positive {color: #292;} +.cm-header, .cm-strong {font-weight: bold;} +.cm-em {font-style: italic;} +.cm-link {text-decoration: underline;} +.cm-strikethrough {text-decoration: line-through;} + +.cm-s-default .cm-keyword {color: #708;} +.cm-s-default .cm-atom {color: #219;} +.cm-s-default .cm-number {color: #164;} +.cm-s-default .cm-def {color: #00f;} +.cm-s-default .cm-variable, +.cm-s-default .cm-punctuation, +.cm-s-default .cm-property, +.cm-s-default .cm-operator {} +.cm-s-default .cm-variable-2 {color: #05a;} +.cm-s-default .cm-variable-3 {color: #085;} +.cm-s-default .cm-comment {color: #a50;} +.cm-s-default .cm-string {color: #a11;} +.cm-s-default .cm-string-2 {color: #f50;} +.cm-s-default .cm-meta {color: #555;} +.cm-s-default .cm-qualifier {color: #555;} +.cm-s-default .cm-builtin {color: #30a;} +.cm-s-default .cm-bracket {color: #997;} +.cm-s-default .cm-tag {color: #170;} +.cm-s-default .cm-attribute {color: #00c;} +.cm-s-default .cm-hr {color: #999;} +.cm-s-default .cm-link {color: #00c;} + +.cm-s-default .cm-error {color: #f00;} +.cm-invalidchar {color: #f00;} + +.CodeMirror-composing { border-bottom: 2px solid; } + +/* Default styles for common addons */ + +div.CodeMirror span.CodeMirror-matchingbracket {color: #0f0;} +div.CodeMirror span.CodeMirror-nonmatchingbracket {color: #f22;} +.CodeMirror-matchingtag { background: rgba(255, 150, 0, .3); } +.CodeMirror-activeline-background {background: #e8f2ff;} + +/* STOP */ + +/* The rest of this file contains styles related to the mechanics of + the editor. You probably shouldn't touch them. */ + +.CodeMirror { + position: relative; + overflow: hidden; + background: white; +} + +.CodeMirror-scroll { + overflow: scroll !important; /* Things will break if this is overridden */ + /* 30px is the magic margin used to hide the element's real scrollbars */ + /* See overflow: hidden in .CodeMirror */ + margin-bottom: -30px; margin-right: -30px; + padding-bottom: 30px; + height: 100%; + outline: none; /* Prevent dragging from highlighting the element */ + position: relative; +} +.CodeMirror-sizer { + position: relative; + border-right: 30px solid transparent; +} + +/* The fake, visible scrollbars. Used to force redraw during scrolling + before actual scrolling happens, thus preventing shaking and + flickering artifacts. */ +.CodeMirror-vscrollbar, .CodeMirror-hscrollbar, .CodeMirror-scrollbar-filler, .CodeMirror-gutter-filler { + position: absolute; + z-index: 6; + display: none; +} +.CodeMirror-vscrollbar { + right: 0; top: 0; + overflow-x: hidden; + overflow-y: scroll; +} +.CodeMirror-hscrollbar { + bottom: 0; left: 0; + overflow-y: hidden; + overflow-x: scroll; +} +.CodeMirror-scrollbar-filler { + right: 0; bottom: 0; +} +.CodeMirror-gutter-filler { + left: 0; bottom: 0; +} + +.CodeMirror-gutters { + position: absolute; left: 0; top: 0; + z-index: 3; +} +.CodeMirror-gutter { + white-space: normal; + height: 100%; + display: inline-block; + margin-bottom: -30px; + /* Hack to make IE7 behave */ + *zoom:1; + *display:inline; +} +.CodeMirror-gutter-wrapper { + position: absolute; + z-index: 4; + background: none !important; + border: none !important; +} +.CodeMirror-gutter-background { + position: absolute; + top: 0; bottom: 0; + z-index: 4; +} +.CodeMirror-gutter-elt { + position: absolute; + cursor: default; + z-index: 4; +} +.CodeMirror-gutter-wrapper { + -webkit-user-select: none; + -moz-user-select: none; + user-select: none; +} + +.CodeMirror-lines { + cursor: text; + min-height: 1px; /* prevents collapsing before first draw */ +} +.CodeMirror pre { + /* Reset some styles that the rest of the page might have set */ + -moz-border-radius: 0; -webkit-border-radius: 0; border-radius: 0; + border-width: 0; + background: transparent; + font-family: inherit; + font-size: inherit; + margin: 0; + white-space: pre; + word-wrap: normal; + line-height: inherit; + color: inherit; + z-index: 2; + position: relative; + overflow: visible; + -webkit-tap-highlight-color: transparent; +} +.CodeMirror-wrap pre { + word-wrap: break-word; + white-space: pre-wrap; + word-break: normal; +} + +.CodeMirror-linebackground { + position: absolute; + left: 0; right: 0; top: 0; bottom: 0; + z-index: 0; +} + +.CodeMirror-linewidget { + position: relative; + z-index: 2; + overflow: auto; +} + +.CodeMirror-widget {} + +.CodeMirror-code { + outline: none; +} + +/* Force content-box sizing for the elements where we expect it */ +.CodeMirror-scroll, +.CodeMirror-sizer, +.CodeMirror-gutter, +.CodeMirror-gutters, +.CodeMirror-linenumber { + -moz-box-sizing: content-box; + box-sizing: content-box; +} + +.CodeMirror-measure { + position: absolute; + width: 100%; + height: 0; + overflow: hidden; + visibility: hidden; +} + +.CodeMirror-cursor { position: absolute; } +.CodeMirror-measure pre { position: static; } + +div.CodeMirror-cursors { + visibility: hidden; + position: relative; + z-index: 3; +} +div.CodeMirror-dragcursors { + visibility: visible; +} + +.CodeMirror-focused div.CodeMirror-cursors { + visibility: visible; +} + +.CodeMirror-selected { background: #d9d9d9; } +.CodeMirror-focused .CodeMirror-selected { background: #d7d4f0; } +.CodeMirror-crosshair { cursor: crosshair; } +.CodeMirror-line::selection, .CodeMirror-line > span::selection, .CodeMirror-line > span > span::selection { background: #d7d4f0; } +.CodeMirror-line::-moz-selection, .CodeMirror-line > span::-moz-selection, .CodeMirror-line > span > span::-moz-selection { background: #d7d4f0; } + +.cm-searching { + background: #ffa; + background: rgba(255, 255, 0, .4); +} + +/* IE7 hack to prevent it from returning funny offsetTops on the spans */ +.CodeMirror span { *vertical-align: text-bottom; } + +/* Used to force a border model for a node */ +.cm-force-border { padding-right: .1px; } + +@media print { + /* Hide the cursor when printing */ + .CodeMirror div.CodeMirror-cursors { + visibility: hidden; + } +} + +/* See issue #2901 */ +.cm-tab-wrap-hack:after { content: ''; } + +/* Help users use markselection to safely style text background */ +span.CodeMirror-selectedtext { background: none; } + +/* +Solarized theme for code-mirror +http://ethanschoonover.com/solarized +*/ + +/* +Solarized color pallet +http://ethanschoonover.com/solarized/img/solarized-palette.png +*/ + +.solarized.base03 { color: #002b36; } +.solarized.base02 { color: #073642; } +.solarized.base01 { color: #586e75; } +.solarized.base00 { color: #657b83; } +.solarized.base0 { color: #839496; } +.solarized.base1 { color: #93a1a1; } +.solarized.base2 { color: #eee8d5; } +.solarized.base3 { color: #fdf6e3; } +.solarized.solar-yellow { color: #b58900; } +.solarized.solar-orange { color: #cb4b16; } +.solarized.solar-red { color: #dc322f; } +.solarized.solar-magenta { color: #d33682; } +.solarized.solar-violet { color: #6c71c4; } +.solarized.solar-blue { color: #268bd2; } +.solarized.solar-cyan { color: #2aa198; } +.solarized.solar-green { color: #859900; } + +/* Color scheme for code-mirror */ + +.cm-s-solarized { + line-height: 1.45em; + color-profile: sRGB; + rendering-intent: auto; +} +.cm-s-solarized.cm-s-dark { + color: #839496; + background-color: #002b36; + text-shadow: #002b36 0 1px; +} +.cm-s-solarized.cm-s-light { + background-color: #fdf6e3; + color: #657b83; + text-shadow: #eee8d5 0 1px; +} + +.cm-s-solarized .CodeMirror-widget { + text-shadow: none; +} + +.cm-s-solarized .cm-header { color: #586e75; } +.cm-s-solarized .cm-quote { color: #93a1a1; } + +.cm-s-solarized .cm-keyword { color: #cb4b16; } +.cm-s-solarized .cm-atom { color: #d33682; } +.cm-s-solarized .cm-number { color: #d33682; } +.cm-s-solarized .cm-def { color: #2aa198; } + +.cm-s-solarized .cm-variable { color: #839496; } +.cm-s-solarized .cm-variable-2 { color: #b58900; } +.cm-s-solarized .cm-variable-3 { color: #6c71c4; } + +.cm-s-solarized .cm-property { color: #2aa198; } +.cm-s-solarized .cm-operator { color: #6c71c4; } + +.cm-s-solarized .cm-comment { color: #586e75; font-style:italic; } + +.cm-s-solarized .cm-string { color: #859900; } +.cm-s-solarized .cm-string-2 { color: #b58900; } + +.cm-s-solarized .cm-meta { color: #859900; } +.cm-s-solarized .cm-qualifier { color: #b58900; } +.cm-s-solarized .cm-builtin { color: #d33682; } +.cm-s-solarized .cm-bracket { color: #cb4b16; } +.cm-s-solarized .CodeMirror-matchingbracket { color: #859900; } +.cm-s-solarized .CodeMirror-nonmatchingbracket { color: #dc322f; } +.cm-s-solarized .cm-tag { color: #93a1a1; } +.cm-s-solarized .cm-attribute { color: #2aa198; } +.cm-s-solarized .cm-hr { + color: transparent; + border-top: 1px solid #586e75; + display: block; +} +.cm-s-solarized .cm-link { color: #93a1a1; cursor: pointer; } +.cm-s-solarized .cm-special { color: #6c71c4; } +.cm-s-solarized .cm-em { + color: #999; + text-decoration: underline; + text-decoration-style: dotted; +} +.cm-s-solarized .cm-strong { color: #eee; } +.cm-s-solarized .cm-error, +.cm-s-solarized .cm-invalidchar { + color: #586e75; + border-bottom: 1px dotted #dc322f; +} + +.cm-s-solarized.cm-s-dark div.CodeMirror-selected { background: #073642; } +.cm-s-solarized.cm-s-dark.CodeMirror ::selection { background: rgba(7, 54, 66, 0.99); } +.cm-s-solarized.cm-s-dark .CodeMirror-line::-moz-selection, .cm-s-dark .CodeMirror-line > span::-moz-selection, .cm-s-dark .CodeMirror-line > span > span::-moz-selection { background: rgba(7, 54, 66, 0.99); } + +.cm-s-solarized.cm-s-light div.CodeMirror-selected { background: #eee8d5; } +.cm-s-solarized.cm-s-light .CodeMirror-line::selection, .cm-s-light .CodeMirror-line > span::selection, .cm-s-light .CodeMirror-line > span > span::selection { background: #eee8d5; } +.cm-s-solarized.cm-s-light .CodeMirror-line::-moz-selection, .cm-s-ligh .CodeMirror-line > span::-moz-selection, .cm-s-ligh .CodeMirror-line > span > span::-moz-selection { background: #eee8d5; } + +/* Editor styling */ + +/* Little shadow on the view-port of the buffer view */ +.cm-s-solarized.CodeMirror { + -moz-box-shadow: inset 7px 0 12px -6px #000; + -webkit-box-shadow: inset 7px 0 12px -6px #000; + box-shadow: inset 7px 0 12px -6px #000; +} + +/* Gutter border and some shadow from it */ +.cm-s-solarized .CodeMirror-gutters { + border-right: 1px solid; +} + +/* Gutter colors and line number styling based of color scheme (dark / light) */ + +/* Dark */ +.cm-s-solarized.cm-s-dark .CodeMirror-gutters { + background-color: #002b36; + border-color: #00232c; +} + +.cm-s-solarized.cm-s-dark .CodeMirror-linenumber { + text-shadow: #021014 0 -1px; +} + +/* Light */ +.cm-s-solarized.cm-s-light .CodeMirror-gutters { + background-color: #fdf6e3; + border-color: #eee8d5; +} + +/* Common */ +.cm-s-solarized .CodeMirror-linenumber { + color: #586e75; + padding: 0 5px; +} +.cm-s-solarized .CodeMirror-guttermarker-subtle { color: #586e75; } +.cm-s-solarized.cm-s-dark .CodeMirror-guttermarker { color: #ddd; } +.cm-s-solarized.cm-s-light .CodeMirror-guttermarker { color: #cb4b16; } + +.cm-s-solarized .CodeMirror-gutter .CodeMirror-gutter-text { + color: #586e75; +} + +.cm-s-solarized .CodeMirror-cursor { border-left: 1px solid #819090; } + +/* +Active line. Negative margin compensates left padding of the text in the +view-port +*/ +.cm-s-solarized.cm-s-dark .CodeMirror-activeline-background { + background: rgba(255, 255, 255, 0.10); +} +.cm-s-solarized.cm-s-light .CodeMirror-activeline-background { + background: rgba(0, 0, 0, 0.10); +} diff --git a/app/app/styles/section/table.scss b/app/app/styles/section/table.scss new file mode 100644 index 00000000..8bd2c2d7 --- /dev/null +++ b/app/app/styles/section/table.scss @@ -0,0 +1,1348 @@ +.fr-element, +.fr-element:focus { + outline: 0px solid transparent; +} +.fr-element { + background: transparent; + color: #000000; + position: relative; + z-index: 2; + text-align: initial; + -webkit-user-select: auto; +} +.fr-element img { + max-width: calc(100% - (2 * 5px)); +} +.fr-element.fr-disabled { + user-select: none; + -o-user-select: none; + -moz-user-select: none; + -khtml-user-select: none; + -webkit-user-select: none; + -ms-user-select: none; +} +.fr-element [contenteditable="false"] { + user-select: none; + -o-user-select: none; + -moz-user-select: none; + -khtml-user-select: none; + -webkit-user-select: none; + -ms-user-select: none; +} +.fr-box.fr-basic .fr-element { + padding: 10px; +} +iframe.fr-iframe { + width: 100%; + border: none; + position: relative; + display: block; + z-index: 2; + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; +} +.fr-wrapper { + position: relative; + overflow: auto; + z-index: 1; +} +.fr-wrapper .fr-placeholder { + position: absolute; + font-size: 12px; + color: #aaaaaa; + z-index: 1; + display: none; + top: 0; + left: 0; +} +.fr-wrapper.show-placeholder .fr-placeholder { + display: block; +} +.fr-wrapper ::selection { + background: #b5d6fd; + color: #000000; +} +.fr-wrapper ::-moz-selection { + background: #b5d6fd; + color: #000000; +} +.fr-box.fr-rtl .fr-wrapper .fr-placeholder { + right: 0; + left: auto; +} +.fr-box.fr-basic .fr-wrapper { + background: #ffffff; + border: 0px; + border-top: 0; +} +.fr-box.fr-basic .fr-wrapper .fr-placeholder { + top: 10px; + left: 10px; +} +.fr-box.fr-basic.fr-rtl .fr-wrapper .fr-placeholder { + right: 10px; + left: auto; +} +.fr-box.fr-basic.fr-top .fr-wrapper { + border-top: 0; + border-radius: 0 0 2px 2px; + -moz-border-radius: 0 0 2px 2px; + -webkit-border-radius: 0 0 2px 2px; + -moz-background-clip: padding; + -webkit-background-clip: padding-box; + background-clip: padding-box; + -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24); + -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24); + box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24); +} +.fr-box.fr-basic.fr-bottom .fr-wrapper { + border-radius: 2px 2px 0 0; + -moz-border-radius: 2px 2px 0 0; + -webkit-border-radius: 2px 2px 0 0; + -moz-background-clip: padding; + -webkit-background-clip: padding-box; + background-clip: padding-box; + border-bottom: 0; + -webkit-box-shadow: 0 -1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24); + -moz-box-shadow: 0 -1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24); + box-shadow: 0 -1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24); +} +.fr-tooltip { + position: absolute; + top: 0; + left: 0; + padding: 0 8px; + border-radius: 2px; + -moz-border-radius: 2px; + -webkit-border-radius: 2px; + -moz-background-clip: padding; + -webkit-background-clip: padding-box; + background-clip: padding-box; + -webkit-box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23); + -moz-box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23); + box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23); + background: #222222; + color: #ffffff; + font-size: 11px; + line-height: 22px; + font-family: Arial, Helvetica, sans-serif; + -webkit-transition: opacity 0.2s ease 0s; + -moz-transition: opacity 0.2s ease 0s; + -ms-transition: opacity 0.2s ease 0s; + -o-transition: opacity 0.2s ease 0s; + -webkit-opacity: 0; + -moz-opacity: 0; + opacity: 0; + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; + left: -3000px; + user-select: none; + -o-user-select: none; + -moz-user-select: none; + -khtml-user-select: none; + -webkit-user-select: none; + -ms-user-select: none; + z-index: 9997; +} +.fr-tooltip.fr-visible { + -webkit-opacity: 1; + -moz-opacity: 1; + opacity: 1; + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; +} +.fr-toolbar { + color: #222222; + background: #ffffff; + position: relative; + z-index: 4; + font-family: Arial, Helvetica, sans-serif; + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; + user-select: none; + -o-user-select: none; + -moz-user-select: none; + -khtml-user-select: none; + -webkit-user-select: none; + -ms-user-select: none; + padding: 0 2px; + border-radius: 2px; + -moz-border-radius: 2px; + -webkit-border-radius: 2px; + -moz-background-clip: padding; + -webkit-background-clip: padding-box; + background-clip: padding-box; + -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24); + -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24); + box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24); + text-align: left; + border: 0px; + border-top: 5px solid #222222; +} +.fr-toolbar::after { + clear: both; + display: block; + content: ""; +} +.fr-toolbar.fr-rtl { + text-align: right; +} +.fr-toolbar.fr-inline { + display: none; +} +.fr-toolbar.fr-inline.fr-desktop { + white-space: nowrap; + position: absolute; + margin-top: 10px; +} +.fr-toolbar.fr-inline.fr-desktop .fr-arrow { + width: 0; + height: 0; + border-left: 5px solid transparent; + border-right: 5px solid transparent; + border-bottom: 5px solid #222222; + position: absolute; + top: -9px; + left: 50%; + margin-left: -5px; + display: inline-block; +} +.fr-toolbar.fr-inline.fr-desktop.fr-above { + margin-top: -10px; + -webkit-box-shadow: 0 -1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24); + -moz-box-shadow: 0 -1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24); + box-shadow: 0 -1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24); + border-bottom: 5px solid #222222; + border-top: 0; +} +.fr-toolbar.fr-inline.fr-desktop.fr-above .fr-arrow { + top: auto; + bottom: -9px; + border-bottom: 0; + border-top-color: inherit; + border-top-style: solid; + border-top-width: 5px; +} +.fr-toolbar.fr-inline.fr-mobile { + left: 0; + right: 0; + width: auto !important; +} +.fr-toolbar.fr-top { + top: 0; + border-radius: 2px 2px 0 0; + -moz-border-radius: 2px 2px 0 0; + -webkit-border-radius: 2px 2px 0 0; + -moz-background-clip: padding; + -webkit-background-clip: padding-box; + background-clip: padding-box; + -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24); + -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24); + box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24); +} +.fr-toolbar.fr-bottom { + bottom: 0; + border-radius: 0 0 2px 2px; + -moz-border-radius: 0 0 2px 2px; + -webkit-border-radius: 0 0 2px 2px; + -moz-background-clip: padding; + -webkit-background-clip: padding-box; + background-clip: padding-box; + -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24); + -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24); + box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24); +} +.fr-separator { + background: #ebebeb; + display: block; + vertical-align: top; + float: left; +} +.fr-separator + .fr-separator { + display: none; +} +.fr-separator.fr-vs { + height: 42px; + width: 1px; + margin: 2px; +} +.fr-separator.fr-hs { + clear: both; + height: 1px; + width: calc(100% - (2 * 2px)); + margin: 0 2px; +} +.fr-separator.fr-hidden { + display: none !important; +} +.fr-rtl .fr-separator { + float: right; +} +.fr-toolbar.fr-inline .fr-separator.fr-hs { + float: none; +} +.fr-toolbar.fr-inline .fr-separator.fr-vs { + float: none; + display: inline-block; +} +.fr-toolbar .fr-command.fr-btn, +.fr-popup .fr-command.fr-btn { + background: transparent; + color: #222222; + -moz-outline: 0; + outline: 0; + border: 0; + line-height: 1; + cursor: pointer; + text-align: left; + margin: 0px 2px; + -webkit-transition: background 0.2s ease 0s; + -moz-transition: background 0.2s ease 0s; + -ms-transition: background 0.2s ease 0s; + -o-transition: background 0.2s ease 0s; + border-radius: 0; + -moz-border-radius: 0; + -webkit-border-radius: 0; + -moz-background-clip: padding; + -webkit-background-clip: padding-box; + background-clip: padding-box; + z-index: 2; + position: relative; + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; + text-decoration: none; + user-select: none; + -o-user-select: none; + -moz-user-select: none; + -khtml-user-select: none; + -webkit-user-select: none; + -ms-user-select: none; + float: left; + padding: 0; +} +.fr-toolbar .fr-command.fr-btn i, +.fr-popup .fr-command.fr-btn i { + font-size: 24px; + width: 24px; + margin: 11px 11.5px; + text-align: center; + float: none; +} +.fr-toolbar .fr-command.fr-btn span, +.fr-popup .fr-command.fr-btn span { + font-size: 24px; + display: block; + line-height: 14px; + margin: 11px 11.5px; + min-width: 24px; + float: left; + text-overflow: ellipsis; + overflow: hidden; + white-space: nowrap; + height: 24px; +} +.fr-toolbar .fr-command.fr-btn img, +.fr-popup .fr-command.fr-btn img { + margin: 11px 11.5px; + width: 24px; +} +.fr-toolbar .fr-command.fr-btn.fr-active, +.fr-popup .fr-command.fr-btn.fr-active { + color: #1e88e5; + background: transparent; +} +.fr-toolbar .fr-command.fr-btn.fr-dropdown, +.fr-popup .fr-command.fr-btn.fr-dropdown { + width: auto; +} +.fr-toolbar .fr-command.fr-btn.fr-dropdown i, +.fr-popup .fr-command.fr-btn.fr-dropdown i, +.fr-toolbar .fr-command.fr-btn.fr-dropdown span, +.fr-popup .fr-command.fr-btn.fr-dropdown span, +.fr-toolbar .fr-command.fr-btn.fr-dropdown img, +.fr-popup .fr-command.fr-btn.fr-dropdown img { + margin-left: 7.5px; + margin-right: 15.5px; +} +.fr-toolbar .fr-command.fr-btn.fr-dropdown.fr-active, +.fr-popup .fr-command.fr-btn.fr-dropdown.fr-active { + color: #222222; + background: #d6d6d6; +} +.fr-toolbar .fr-command.fr-btn.fr-dropdown.fr-active:hover, +.fr-popup .fr-command.fr-btn.fr-dropdown.fr-active:hover, +.fr-toolbar .fr-command.fr-btn.fr-dropdown.fr-active:focus, +.fr-popup .fr-command.fr-btn.fr-dropdown.fr-active:focus { + background: #d6d6d6 !important; + color: #222222 !important; +} +.fr-toolbar .fr-command.fr-btn.fr-dropdown.fr-active:hover::after, +.fr-popup .fr-command.fr-btn.fr-dropdown.fr-active:hover::after, +.fr-toolbar .fr-command.fr-btn.fr-dropdown.fr-active:focus::after, +.fr-popup .fr-command.fr-btn.fr-dropdown.fr-active:focus::after { + border-top-color: #222222 !important; +} +.fr-toolbar .fr-command.fr-btn.fr-dropdown::after, +.fr-popup .fr-command.fr-btn.fr-dropdown::after { + position: absolute; + width: 0; + height: 0; + border-left: 4px solid transparent; + border-right: 4px solid transparent; + border-top: 4px solid #222222; + right: 3.75px; + top: 16.5px; + content: ""; +} +.fr-toolbar .fr-command.fr-btn.fr-disabled, +.fr-popup .fr-command.fr-btn.fr-disabled { + color: #bdbdbd; + cursor: default; +} +.fr-toolbar .fr-command.fr-btn.fr-disabled::after, +.fr-popup .fr-command.fr-btn.fr-disabled::after { + border-top-color: #bdbdbd !important; +} +.fr-toolbar .fr-command.fr-btn.fr-hidden, +.fr-popup .fr-command.fr-btn.fr-hidden { + display: none; +} +.fr-toolbar.fr-disabled .fr-btn, +.fr-popup.fr-disabled .fr-btn, +.fr-toolbar.fr-disabled .fr-btn.fr-active, +.fr-popup.fr-disabled .fr-btn.fr-active { + color: #bdbdbd; +} +.fr-toolbar.fr-disabled .fr-btn.fr-dropdown::after, +.fr-popup.fr-disabled .fr-btn.fr-dropdown::after, +.fr-toolbar.fr-disabled .fr-btn.fr-active.fr-dropdown::after, +.fr-popup.fr-disabled .fr-btn.fr-active.fr-dropdown::after { + border-top-color: #bdbdbd; +} +.fr-toolbar.fr-rtl .fr-command.fr-btn, +.fr-popup.fr-rtl .fr-command.fr-btn { + float: right; +} +.fr-toolbar.fr-inline .fr-command.fr-btn { + float: none; +} +.fr-desktop .fr-command:hover, +.fr-desktop .fr-command:focus { + color: #222222; + background: #ebebeb; +} +.fr-desktop .fr-command:hover::after, +.fr-desktop .fr-command:focus::after { + border-top-color: #222222 !important; +} +.fr-desktop .fr-command.fr-selected { + color: #222222; + background: #d6d6d6; +} +.fr-desktop .fr-command.fr-active:hover, +.fr-desktop .fr-command.fr-active:focus { + color: #1e88e5; + background: #ebebeb; +} +.fr-desktop .fr-command.fr-active.fr-selected { + color: #1e88e5; + background: #d6d6d6; +} +.fr-desktop .fr-command.fr-disabled:hover, +.fr-desktop .fr-command.fr-disabled:focus, +.fr-desktop .fr-command.fr-disabled.fr-selected { + background: transparent; +} +.fr-desktop.fr-disabled .fr-command:hover, +.fr-desktop.fr-disabled .fr-command:focus, +.fr-desktop.fr-disabled .fr-command.fr-selected { + background: transparent; +} +.fr-toolbar.fr-mobile .fr-command.fr-blink, +.fr-popup.fr-mobile .fr-command.fr-blink { + background: transparent; +} +.fr-command.fr-btn + .fr-dropdown-menu { + display: inline-block; + position: absolute; + right: auto; + bottom: auto; + height: auto; + -webkit-box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23); + -moz-box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23); + box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23); + z-index: 3; + -webkit-overflow-scrolling: touch; + overflow: hidden; + border-radius: 0 0 2px 2px; + -moz-border-radius: 0 0 2px 2px; + -webkit-border-radius: 0 0 2px 2px; + -moz-background-clip: padding; + -webkit-background-clip: padding-box; + background-clip: padding-box; +} +.fr-command.fr-btn + .fr-dropdown-menu .fr-dropdown-wrapper { + background: #ffffff; + -webkit-box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23); + -moz-box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23); + box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23); + padding: 0; + margin: auto; + display: inline-block; + text-align: left; + position: relative; + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; + -webkit-transition: max-height 0.2s ease 0s; + -moz-transition: max-height 0.2s ease 0s; + -ms-transition: max-height 0.2s ease 0s; + -o-transition: max-height 0.2s ease 0s; + margin-top: 0; + float: left; + max-height: 0; + height: 0; + margin-top: 0 !important; +} +.fr-command.fr-btn + .fr-dropdown-menu .fr-dropdown-wrapper .fr-dropdown-content { + overflow: auto; + position: relative; + max-height: 275px; +} +.fr-command.fr-btn + .fr-dropdown-menu .fr-dropdown-wrapper .fr-dropdown-content ul.fr-dropdown-list { + list-style-type: none; + margin: 0; + padding: 0; +} +.fr-command.fr-btn + .fr-dropdown-menu .fr-dropdown-wrapper .fr-dropdown-content ul.fr-dropdown-list li { + padding: 0; + margin: 0; + font-size: 15px; +} +.fr-command.fr-btn + .fr-dropdown-menu .fr-dropdown-wrapper .fr-dropdown-content ul.fr-dropdown-list li a { + padding: 0 24px; + line-height: 200%; + display: block; + cursor: pointer; + white-space: nowrap; + color: inherit; + text-decoration: none; +} +.fr-command.fr-btn + .fr-dropdown-menu .fr-dropdown-wrapper .fr-dropdown-content ul.fr-dropdown-list li a.fr-active { + background: #d6d6d6; +} +.fr-command.fr-btn + .fr-dropdown-menu .fr-dropdown-wrapper .fr-dropdown-content ul.fr-dropdown-list li a.fr-disabled { + color: #bdbdbd; + cursor: default; +} +.fr-command.fr-btn.fr-active + .fr-dropdown-menu { + display: inline-block; +} +.fr-command.fr-btn.fr-active + .fr-dropdown-menu .fr-dropdown-wrapper { + height: auto; + max-height: 275px; +} +.fr-bottom > .fr-command.fr-btn + .fr-dropdown-menu { + border-radius: 2px 2px 0 0; + -moz-border-radius: 2px 2px 0 0; + -webkit-border-radius: 2px 2px 0 0; + -moz-background-clip: padding; + -webkit-background-clip: padding-box; + background-clip: padding-box; +} +.fr-toolbar.fr-rtl .fr-dropdown-wrapper, +.fr-popup.fr-rtl .fr-dropdown-wrapper { + text-align: right !important; +} +.fr-popup { + position: absolute; + display: none; + color: #222222; + background: #ffffff; + -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24); + -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24); + box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24); + border-radius: 2px; + -moz-border-radius: 2px; + -webkit-border-radius: 2px; + -moz-background-clip: padding; + -webkit-background-clip: padding-box; + background-clip: padding-box; + font-family: Arial, Helvetica, sans-serif; + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; + user-select: none; + -o-user-select: none; + -moz-user-select: none; + -khtml-user-select: none; + -webkit-user-select: none; + -ms-user-select: none; + margin-top: 10px; + z-index: 9995; + text-align: left; + border: 0px; + border-top: 5px solid #222222; +} +.fr-popup.fr-above { + margin-top: -10px; + border-top: 0; + border-bottom: 5px solid #222222; + -webkit-box-shadow: 0 -1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24); + -moz-box-shadow: 0 -1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24); + box-shadow: 0 -1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24); +} +.fr-popup.fr-active { + display: block; +} +.fr-popup.fr-hidden { + -webkit-opacity: 0; + -moz-opacity: 0; + opacity: 0; + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; +} +.fr-popup .fr-hs { + display: block !important; +} +.fr-popup .fr-input-line { + position: relative; + padding: 8px 0; +} +.fr-popup .fr-input-line input[type="text"], +.fr-popup .fr-input-line textarea { + width: 100%; + margin: 0px 0 1px 0; + border: none; + border-bottom: solid 1px #bdbdbd; + color: #222222; + font-size: 14px; + padding: 6px 0 2px; + background: rgba(0, 0, 0, 0); + position: relative; + z-index: 2; +} +.fr-popup .fr-input-line input[type="text"]:focus, +.fr-popup .fr-input-line textarea:focus { + border-bottom: solid 2px #1e88e5; + margin-bottom: 0px; +} +.fr-popup .fr-input-line input + span, +.fr-popup .fr-input-line textarea + span { + position: absolute; + top: 0; + left: 0; + font-size: 12px; + color: rgba(0, 0, 0, 0); + -webkit-transition: color 0.2s ease 0s; + -moz-transition: color 0.2s ease 0s; + -ms-transition: color 0.2s ease 0s; + -o-transition: color 0.2s ease 0s; + z-index: 1; +} +.fr-popup .fr-input-line input.fr-not-empty:focus + span, +.fr-popup .fr-input-line textarea.fr-not-empty:focus + span { + color: #1e88e5; +} +.fr-popup .fr-input-line input.fr-not-empty + span, +.fr-popup .fr-input-line textarea.fr-not-empty + span { + color: #808080; +} +.fr-popup input, +.fr-popup textarea { + user-select: text; + -o-user-select: text; + -moz-user-select: text; + -khtml-user-select: text; + -webkit-user-select: text; + -ms-user-select: text; + border-radius: 0; + -moz-border-radius: 0; + -webkit-border-radius: 0; + -moz-background-clip: padding; + -webkit-background-clip: padding-box; + background-clip: padding-box; + outline: none; +} +.fr-popup textarea { + resize: none; +} +.fr-popup .fr-buttons { + -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24); + -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24); + box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24); + padding: 0 2px; + white-space: nowrap; + line-height: 0; + border-bottom: 0px; +} +.fr-popup .fr-buttons::after { + clear: both; + display: block; + content: ""; +} +.fr-popup .fr-buttons .fr-btn { + display: inline-block; + float: none; +} +.fr-popup .fr-buttons .fr-btn i { + float: left; +} +.fr-popup .fr-buttons .fr-separator { + display: inline-block; + float: none; +} +.fr-popup .fr-layer { + width: 225px; + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; + margin: 10px; + display: none; +} +@media (min-width: 768px) { + .fr-popup .fr-layer { + width: 300px; + } +} +.fr-popup .fr-layer.fr-active { + display: inline-block; +} +.fr-popup .fr-action-buttons { + z-index: 7; + height: 36px; + text-align: right; +} +.fr-popup .fr-action-buttons button.fr-command { + height: 36px; + line-height: 1; + color: #1e88e5; + padding: 10px; + cursor: pointer; + text-decoration: none; + border: none; + background: none; + font-size: 16px; + outline: none; + -webkit-transition: background 0.2s ease 0s; + -moz-transition: background 0.2s ease 0s; + -ms-transition: background 0.2s ease 0s; + -o-transition: background 0.2s ease 0s; +} +.fr-popup .fr-action-buttons button.fr-command + button { + margin-left: 24px; +} +.fr-popup .fr-action-buttons button.fr-command:hover, +.fr-popup .fr-action-buttons button.fr-command:focus { + background: #ebebeb; + color: #1e88e5; +} +.fr-popup .fr-action-buttons button.fr-command:active { + background: #d6d6d6; + color: #1e88e5; +} +.fr-popup .fr-action-buttons button::-moz-focus-inner { + border: 0; +} +.fr-popup .fr-checkbox { + position: relative; + display: inline-block; + width: 16px; + height: 16px; + line-height: 1; + -webkit-box-sizing: content-box; + -moz-box-sizing: content-box; + box-sizing: content-box; + vertical-align: middle; +} +.fr-popup .fr-checkbox svg { + margin-left: 2px; + margin-top: 2px; + display: none; + width: 10px; + height: 10px; +} +.fr-popup .fr-checkbox span { + border: solid 1px #222222; + border-radius: 2px; + -moz-border-radius: 2px; + -webkit-border-radius: 2px; + -moz-background-clip: padding; + -webkit-background-clip: padding-box; + background-clip: padding-box; + width: 16px; + height: 16px; + display: inline-block; + position: relative; + z-index: 1; + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; + -webkit-transition: background 0.2s ease 0s, border-color 0.2s ease 0s; + -moz-transition: background 0.2s ease 0s, border-color 0.2s ease 0s; + -ms-transition: background 0.2s ease 0s, border-color 0.2s ease 0s; + -o-transition: background 0.2s ease 0s, border-color 0.2s ease 0s; +} +.fr-popup .fr-checkbox input { + position: absolute; + z-index: 2; + -webkit-opacity: 0; + -moz-opacity: 0; + opacity: 0; + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; + border: 0 none; + cursor: pointer; + height: 16px; + margin: 0; + padding: 0; + width: 16px; + top: 1px; + left: 1px; +} +.fr-popup .fr-checkbox input:checked + span { + background: #1e88e5; + border-color: #1e88e5; +} +.fr-popup .fr-checkbox input:checked + span svg { + display: block; +} +.fr-popup .fr-checkbox input:focus + span { + border-color: #1e88e5; +} +.fr-popup .fr-checkbox-line { + font-size: 14px; + line-height: 1.4px; + margin-top: 10px; +} +.fr-popup .fr-checkbox-line label { + cursor: pointer; + margin: 0 5px; + vertical-align: middle; +} +.fr-popup.fr-rtl { + direction: rtl; + text-align: right; +} +.fr-popup.fr-rtl .fr-action-buttons { + text-align: left; +} +.fr-popup.fr-rtl .fr-input-line input + span, +.fr-popup.fr-rtl .fr-input-line textarea + span { + left: auto; + right: 0; +} +.fr-popup.fr-desktop .fr-arrow { + width: 0; + height: 0; + border-left: 5px solid transparent; + border-right: 5px solid transparent; + border-bottom: 5px solid #222222; + position: absolute; + top: -9px; + left: 50%; + margin-left: -5px; + display: inline-block; +} +.fr-popup.fr-desktop.fr-above .fr-arrow { + top: auto; + bottom: -9px; + border-bottom: 0; + border-top-color: inherit; + border-top-style: solid; + border-top-width: 5px; +} +.fr-text-edit-layer { + width: 250px; + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; + display: block !important; +} +.fr-visibility-helper { + display: none; + margin-left: 0px !important; +} +@media (min-width: 768px) { + .fr-visibility-helper { + margin-left: 1px !important; + } +} +@media (min-width: 992px) { + .fr-visibility-helper { + margin-left: 2px !important; + } +} +@media (min-width: 1200px) { + .fr-visibility-helper { + margin-left: 3px !important; + } +} +.fr-opacity-0 { + -webkit-opacity: 0; + -moz-opacity: 0; + opacity: 0; + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; +} +.fr-box { + position: relative; +} +/** + * Postion sticky hacks. + */ +.fr-sticky { + position: -webkit-sticky; + position: -moz-sticky; + position: -ms-sticky; + position: -o-sticky; + position: sticky; +} +.fr-sticky-off { + position: relative; +} +.fr-sticky-on { + position: fixed; +} +.fr-sticky-on.fr-sticky-ios { + position: absolute; + left: 0; + right: 0; + width: auto !important; +} +.fr-sticky-dummy { + display: none; +} +.fr-sticky-on + .fr-sticky-dummy { + display: block; +} +.fr-popup .fr-colors-tabs { + -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24); + -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24); + box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24); + margin-bottom: 5px; + line-height: 16px; + margin-left: -2px; + margin-right: -2px; +} +.fr-popup .fr-colors-tabs .fr-colors-tab { + display: inline-block; + width: 50%; + cursor: pointer; + text-align: center; + color: #222222; + font-size: 13px; + padding: 8px 0; + position: relative; +} +.fr-popup .fr-colors-tabs .fr-colors-tab:hover { + color: #1e88e5; +} +.fr-popup .fr-colors-tabs .fr-colors-tab[data-param1="background"]::after { + position: absolute; + bottom: 0; + left: 0; + width: 100%; + height: 2px; + background: #1e88e5; + content: ''; + -webkit-transition: transform 0.2s ease 0s; + -moz-transition: transform 0.2s ease 0s; + -ms-transition: transform 0.2s ease 0s; + -o-transition: transform 0.2s ease 0s; +} +.fr-popup .fr-colors-tabs .fr-colors-tab.fr-selected-tab { + color: #1e88e5; +} +.fr-popup .fr-colors-tabs .fr-colors-tab.fr-selected-tab[data-param1="text"] ~ [data-param1="background"]::after { + -webkit-transform: translate3d(-100%, 0, 0); + -moz-transform: translate3d(-100%, 0, 0); + -ms-transform: translate3d(-100%, 0, 0); + -o-transform: translate3d(-100%, 0, 0); +} +.fr-popup .fr-separator + .fr-colors-tabs { + -webkit-box-shadow: none; + -moz-box-shadow: none; + box-shadow: none; + margin-left: 2px; + margin-right: 2px; +} +.fr-popup .fr-color-set { + line-height: 0; + display: none; +} +.fr-popup .fr-color-set.fr-selected-set { + display: block; +} +.fr-popup .fr-color-set > span { + display: inline-block; + width: 32px; + height: 32px; + position: relative; + z-index: 1; +} +.fr-popup .fr-color-set > span > i { + text-align: center; + line-height: 32px; + height: 32px; + width: 32px; + font-size: 13px; + position: absolute; + bottom: 0; + cursor: default; + left: 0; +} +.fr-popup .fr-color-set > span.fr-selected-color::after { + color: #ffffff; + content: "\f00c"; + font-family: FontAwesome; + font-size: 13px; + font-weight: 400; + line-height: 32px; + position: absolute; + top: 0; + bottom: 0; + right: 0; + left: 0; + text-align: center; + cursor: default; +} +.fr-popup .fr-color-set > span:hover, +.fr-popup .fr-color-set > span.fr-selected-color { + outline: 1px solid #222222; + z-index: 2; +} +.fr-rtl .fr-popup .fr-colors-tabs .fr-colors-tab.fr-selected-tab[data-param1="text"] ~ [data-param1="background"]::after { + -webkit-transform: translate3d(100%, 0, 0); + -moz-transform: translate3d(100%, 0, 0); + -ms-transform: translate3d(100%, 0, 0); + -o-transform: translate3d(100%, 0, 0); +} + +table td.fr-selected-cell, +table th.fr-selected-cell { + border: 1px double #1e88e5; +} +// table tr { +// user-select: none; +// -o-user-select: none; +// -moz-user-select: none; +// -khtml-user-select: none; +// -webkit-user-select: none; +// -ms-user-select: none; +// } +// table td, +// table th { +// user-select: text; +// -o-user-select: text; +// -moz-user-select: text; +// -khtml-user-select: text; +// -webkit-user-select: text; +// -ms-user-select: text; +// } +.fr-no-selection table td, +.fr-no-selection table th { + user-select: none; + -o-user-select: none; + -moz-user-select: none; + -khtml-user-select: none; + -webkit-user-select: none; + -ms-user-select: none; +} +.fr-table-resizer { + cursor: col-resize; + position: fixed; + z-index: 3; + display: none; +} +.fr-table-resizer.fr-moving { + z-index: 2; +} +.fr-table-resizer div { + -webkit-opacity: 0; + -moz-opacity: 0; + opacity: 0; + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; + border-right: 1px solid #1e88e5; +} +.fr-no-selection { + user-select: none; + -o-user-select: none; + -moz-user-select: none; + -khtml-user-select: none; + -webkit-user-select: none; + -ms-user-select: none; +} +.fr-popup .fr-table-size .fr-table-size-info { + text-align: center; + font-size: 14px; + padding: 8px; +} +.fr-popup .fr-table-size .fr-select-table-size { + line-height: 0; + padding: 0 5px 5px; + white-space: nowrap; +} +.fr-popup .fr-table-size .fr-select-table-size > span { + display: inline-block; + padding: 0px 4px 4px 0; +} +.fr-popup .fr-table-size .fr-select-table-size > span > span { + display: inline-block; + width: 18px; + height: 18px; + border: 1px solid #dddddd; +} +.fr-popup .fr-table-size .fr-select-table-size > span:hover, +.fr-popup .fr-table-size .fr-select-table-size > span.hover { + background: transparent; +} +.fr-popup .fr-table-size .fr-select-table-size > span:hover > span, +.fr-popup .fr-table-size .fr-select-table-size > span.hover > span { + background: rgba(30, 136, 229, 0.3); + border: solid 1px #1e88e5; +} +.fr-popup .fr-table-size .fr-select-table-size .new-line::after { + clear: both; + display: block; + content: ""; +} +.fr-popup.fr-above .fr-table-size .fr-select-table-size > span { + display: inline-block !important; +} +.fr-popup .fr-table-colors-buttons { + margin-bottom: 5px; +} +.fr-popup .fr-table-colors { + line-height: 0; + display: block; +} +.fr-popup .fr-table-colors > span { + display: inline-block; + width: 32px; + height: 32px; + position: relative; + z-index: 1; +} +.fr-popup .fr-table-colors > span > i { + text-align: center; + line-height: 32px; + height: 32px; + width: 32px; + font-size: 13px; + position: absolute; + bottom: 0; + cursor: default; + left: 0; +} +.fr-popup .fr-table-colors > span.fr-selected-color::after { + color: #ffffff; + content: "\f00c"; + font-family: FontAwesome; + font-size: 13px; + font-weight: 400; + line-height: 32px; + position: absolute; + top: 0; + bottom: 0; + right: 0; + left: 0; + text-align: center; + cursor: default; +} +.fr-popup .fr-table-colors > span:hover, +.fr-popup .fr-table-colors > span.fr-selected-color { + outline: 1px solid #222222; + z-index: 2; +} +.fr-popup.fr-desktop .fr-table-size .fr-select-table-size > span > span { + width: 12px; + height: 12px; +} +.fr-view { + /** + * Image style. + */ + /** + * Video style + */ +} +.fr-view table { + border: none; + border-collapse: collapse; + empty-cells: show; + max-width: 100%; +} +.fr-view table.fr-dashed-borders td, +.fr-view table.fr-dashed-borders th { + border-style: dashed; +} +.fr-view table.fr-alternate-rows tbody tr:nth-child(2n) { + background: #f5f5f5; +} +.fr-view table td, +.fr-view table th { + border: 1px solid #dddddd; +} +.fr-view table td:empty, +.fr-view table th:empty { + height: 20px; +} +.fr-view table td.fr-highlighted, +.fr-view table th.fr-highlighted { + border: 1px double red; +} +.fr-view table td.fr-thick, +.fr-view table th.fr-thick { + border-width: 2px; +} +.fr-view table th { + background: #e6e6e6; +} +.fr-view hr { + clear: both; + user-select: none; + -o-user-select: none; + -moz-user-select: none; + -khtml-user-select: none; + -webkit-user-select: none; + -ms-user-select: none; + page-break-after: always; +} +.fr-view .fr-file { + position: relative; +} +.fr-view .fr-file::after { + position: relative; + content: "\1F4CE"; + font-weight: normal; +} +.fr-view pre { + white-space: pre-wrap; + word-wrap: break-word; +} +.fr-view blockquote { + border-left: solid 2px #5e35b1; + margin-left: 0; + padding-left: 5px; + color: #5e35b1; +} +.fr-view blockquote blockquote { + border-color: #00bcd4; + color: #00bcd4; +} +.fr-view blockquote blockquote blockquote { + border-color: #43a047; + color: #43a047; +} +.fr-view a.fr-strong { + font-weight: 700; +} +.fr-view a.fr-green { + color: green; +} +.fr-view span.fr-emoticon { + font-weight: normal; + font-family: "Apple Color Emoji", "Segoe UI Emoji", "NotoColorEmoji", "Segoe UI Symbol", "Android Emoji", "EmojiSymbols"; + display: inline; + line-height: 0; +} +.fr-view .fr-text-gray { + color: #AAA !important; +} +.fr-view .fr-text-bordered { + border-top: solid 1px #222; + border-bottom: solid 1px #222; + padding: 10px 0; +} +.fr-view .fr-text-spaced { + letter-spacing: 1px; +} +.fr-view .fr-text-uppercase { + text-transform: uppercase; +} +.fr-view img { + z-index: 3; + position: relative; + overflow: auto; + cursor: pointer; +} +.fr-view img.fr-dib { + margin: auto; + display: block; + float: none; + vertical-align: top; + margin-top: 5px; + margin-bottom: 5px; +} +.fr-view img.fr-dib.fr-fil { + margin: 5px auto 5px 0; + left: 5px; +} +.fr-view img.fr-dib.fr-fir { + margin: 5px 0 5px auto; + right: 5px; +} +.fr-view img.fr-dii { + margin: auto; + display: inline-block; + float: none; + margin-top: 5px; + margin-bottom: 5px; +} +.fr-view img.fr-dii.fr-fil { + margin: 5px 10px 5px 0; + left: 5px; + float: left; +} +.fr-view img.fr-dii.fr-fir { + margin: 5px 0 5px 10px; + right: 5px; + float: right; +} +.fr-view img.fr-rounded { + border-radius: 100%; + -moz-border-radius: 100%; + -webkit-border-radius: 100%; + -moz-background-clip: padding; + -webkit-background-clip: padding-box; + background-clip: padding-box; +} +.fr-view img.fr-bordered { + border: solid 10px #CCC; + -webkit-box-sizing: content-box; + -moz-box-sizing: content-box; + box-sizing: content-box; +} +.fr-view .fr-video { + text-align: center; + position: relative; +} +.fr-view .fr-video > * { + -webkit-box-sizing: content-box; + -moz-box-sizing: content-box; + box-sizing: content-box; + max-width: 100%; + border: none; +} +.fr-view .fr-video.fr-dvb { + display: block; + clear: both; +} +.fr-view .fr-video.fr-dvb.fr-fvl { + text-align: left; +} +.fr-view .fr-video.fr-dvb.fr-fvr { + text-align: right; +} +.fr-view .fr-video.fr-dvi { + display: inline-block; +} +.fr-view .fr-video.fr-dvi.fr-fvl { + float: left; +} +.fr-view .fr-video.fr-dvi.fr-fvr { + float: right; +} + +.fr-view strong { + font-weight: bold; +} diff --git a/app/app/styles/vendor.scss b/app/app/styles/vendor.scss index c3d5e548..5439517b 100644 --- a/app/app/styles/vendor.scss +++ b/app/app/styles/vendor.scss @@ -1,1922 +1,31 @@ -/* START: qunit test runner (materialize css framework breaks) */ -#qunit -{ - label - { - color: #5E740B; - font-size: small; - } - - strong, b - { - font-weight: bold; - } - - [type="checkbox"] + label - { - position: relative; - cursor: pointer; - display: inline-block; - height: auto; - font-size: small; - } - - [type="checkbox"]:not(:checked), [type="checkbox"]:checked - { - position: relative; - left: 0; - visibility: visible; - } - - [type="checkbox"] + label:before - { - content: ''; - border: none; - border-radius: 0; - margin-top: 0; - transition: 0; - } - - select - { - display: inline-block; - padding: 0; - height: auto; - width: auto; - border-radius: 0; - background-color: rgb(248, 248, 248); - border: 1px solid rgb(166, 166, 166); - } - - input:not([type]), input[type=text], input[type=password], input[type=email], input[type=url], input[type=time], input[type=date], input[type=datetime-local], input[type=tel], input[type=number], input[type=search], textarea.materialize-textarea - { - background-color: white; - border: none; - border-radius: 0; - height: auto; - width: auto; - font-size: small; - margin: 0; - padding: 0; - box-shadow: none; - transition: none; - } - -} -/* FINISH: qunit test runner (materialize css framework breaks) */ - -/* START: table editor */ -.fr-element, -.fr-element:focus { - outline: 0px solid transparent; -} -.fr-element { - background: transparent; - color: #000000; - position: relative; - z-index: 2; - text-align: initial; - -webkit-user-select: auto; -} -.fr-element img { - max-width: calc(100% - (2 * 5px)); -} -.fr-element.fr-disabled { - user-select: none; - -o-user-select: none; - -moz-user-select: none; - -khtml-user-select: none; - -webkit-user-select: none; - -ms-user-select: none; -} -.fr-element [contenteditable="false"] { - user-select: none; - -o-user-select: none; - -moz-user-select: none; - -khtml-user-select: none; - -webkit-user-select: none; - -ms-user-select: none; -} -.fr-box.fr-basic .fr-element { - padding: 10px; -} -iframe.fr-iframe { - width: 100%; - border: none; - position: relative; - display: block; - z-index: 2; - -webkit-box-sizing: border-box; - -moz-box-sizing: border-box; - box-sizing: border-box; -} -.fr-wrapper { - position: relative; - overflow: auto; - z-index: 1; -} -.fr-wrapper .fr-placeholder { - position: absolute; - font-size: 12px; - color: #aaaaaa; - z-index: 1; - display: none; - top: 0; - left: 0; -} -.fr-wrapper.show-placeholder .fr-placeholder { - display: block; -} -.fr-wrapper ::selection { - background: #b5d6fd; - color: #000000; -} -.fr-wrapper ::-moz-selection { - background: #b5d6fd; - color: #000000; -} -.fr-box.fr-rtl .fr-wrapper .fr-placeholder { - right: 0; - left: auto; -} -.fr-box.fr-basic .fr-wrapper { - background: #ffffff; - border: 0px; - border-top: 0; -} -.fr-box.fr-basic .fr-wrapper .fr-placeholder { - top: 10px; - left: 10px; -} -.fr-box.fr-basic.fr-rtl .fr-wrapper .fr-placeholder { - right: 10px; - left: auto; -} -.fr-box.fr-basic.fr-top .fr-wrapper { - border-top: 0; - border-radius: 0 0 2px 2px; - -moz-border-radius: 0 0 2px 2px; - -webkit-border-radius: 0 0 2px 2px; - -moz-background-clip: padding; - -webkit-background-clip: padding-box; - background-clip: padding-box; - -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24); - -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24); - box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24); -} -.fr-box.fr-basic.fr-bottom .fr-wrapper { - border-radius: 2px 2px 0 0; - -moz-border-radius: 2px 2px 0 0; - -webkit-border-radius: 2px 2px 0 0; - -moz-background-clip: padding; - -webkit-background-clip: padding-box; - background-clip: padding-box; - border-bottom: 0; - -webkit-box-shadow: 0 -1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24); - -moz-box-shadow: 0 -1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24); - box-shadow: 0 -1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24); -} -.fr-tooltip { - position: absolute; - top: 0; - left: 0; - padding: 0 8px; - border-radius: 2px; - -moz-border-radius: 2px; - -webkit-border-radius: 2px; - -moz-background-clip: padding; - -webkit-background-clip: padding-box; - background-clip: padding-box; - -webkit-box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23); - -moz-box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23); - box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23); - background: #222222; - color: #ffffff; - font-size: 11px; - line-height: 22px; - font-family: Arial, Helvetica, sans-serif; - -webkit-transition: opacity 0.2s ease 0s; - -moz-transition: opacity 0.2s ease 0s; - -ms-transition: opacity 0.2s ease 0s; - -o-transition: opacity 0.2s ease 0s; - -webkit-opacity: 0; - -moz-opacity: 0; - opacity: 0; - -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; - left: -3000px; - user-select: none; - -o-user-select: none; - -moz-user-select: none; - -khtml-user-select: none; - -webkit-user-select: none; - -ms-user-select: none; - z-index: 9997; -} -.fr-tooltip.fr-visible { - -webkit-opacity: 1; - -moz-opacity: 1; - opacity: 1; - -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; -} -.fr-toolbar { - color: #222222; - background: #ffffff; - position: relative; - z-index: 4; - font-family: Arial, Helvetica, sans-serif; - -webkit-box-sizing: border-box; - -moz-box-sizing: border-box; - box-sizing: border-box; - user-select: none; - -o-user-select: none; - -moz-user-select: none; - -khtml-user-select: none; - -webkit-user-select: none; - -ms-user-select: none; - padding: 0 2px; - border-radius: 2px; - -moz-border-radius: 2px; - -webkit-border-radius: 2px; - -moz-background-clip: padding; - -webkit-background-clip: padding-box; - background-clip: padding-box; - -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24); - -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24); - box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24); - text-align: left; - border: 0px; - border-top: 5px solid #222222; -} -.fr-toolbar::after { - clear: both; - display: block; - content: ""; -} -.fr-toolbar.fr-rtl { - text-align: right; -} -.fr-toolbar.fr-inline { - display: none; -} -.fr-toolbar.fr-inline.fr-desktop { - white-space: nowrap; - position: absolute; - margin-top: 10px; -} -.fr-toolbar.fr-inline.fr-desktop .fr-arrow { - width: 0; - height: 0; - border-left: 5px solid transparent; - border-right: 5px solid transparent; - border-bottom: 5px solid #222222; - position: absolute; - top: -9px; - left: 50%; - margin-left: -5px; - display: inline-block; -} -.fr-toolbar.fr-inline.fr-desktop.fr-above { - margin-top: -10px; - -webkit-box-shadow: 0 -1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24); - -moz-box-shadow: 0 -1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24); - box-shadow: 0 -1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24); - border-bottom: 5px solid #222222; - border-top: 0; -} -.fr-toolbar.fr-inline.fr-desktop.fr-above .fr-arrow { - top: auto; - bottom: -9px; - border-bottom: 0; - border-top-color: inherit; - border-top-style: solid; - border-top-width: 5px; -} -.fr-toolbar.fr-inline.fr-mobile { - left: 0; - right: 0; - width: auto !important; -} -.fr-toolbar.fr-top { - top: 0; - border-radius: 2px 2px 0 0; - -moz-border-radius: 2px 2px 0 0; - -webkit-border-radius: 2px 2px 0 0; - -moz-background-clip: padding; - -webkit-background-clip: padding-box; - background-clip: padding-box; - -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24); - -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24); - box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24); -} -.fr-toolbar.fr-bottom { - bottom: 0; - border-radius: 0 0 2px 2px; - -moz-border-radius: 0 0 2px 2px; - -webkit-border-radius: 0 0 2px 2px; - -moz-background-clip: padding; - -webkit-background-clip: padding-box; - background-clip: padding-box; - -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24); - -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24); - box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24); -} -.fr-separator { - background: #ebebeb; - display: block; - vertical-align: top; - float: left; -} -.fr-separator + .fr-separator { - display: none; -} -.fr-separator.fr-vs { - height: 42px; - width: 1px; - margin: 2px; -} -.fr-separator.fr-hs { - clear: both; - height: 1px; - width: calc(100% - (2 * 2px)); - margin: 0 2px; -} -.fr-separator.fr-hidden { - display: none !important; -} -.fr-rtl .fr-separator { - float: right; -} -.fr-toolbar.fr-inline .fr-separator.fr-hs { - float: none; -} -.fr-toolbar.fr-inline .fr-separator.fr-vs { - float: none; - display: inline-block; -} -.fr-toolbar .fr-command.fr-btn, -.fr-popup .fr-command.fr-btn { - background: transparent; - color: #222222; - -moz-outline: 0; - outline: 0; - border: 0; - line-height: 1; - cursor: pointer; - text-align: left; - margin: 0px 2px; - -webkit-transition: background 0.2s ease 0s; - -moz-transition: background 0.2s ease 0s; - -ms-transition: background 0.2s ease 0s; - -o-transition: background 0.2s ease 0s; - border-radius: 0; - -moz-border-radius: 0; - -webkit-border-radius: 0; - -moz-background-clip: padding; - -webkit-background-clip: padding-box; - background-clip: padding-box; - z-index: 2; - position: relative; - -webkit-box-sizing: border-box; - -moz-box-sizing: border-box; - box-sizing: border-box; - text-decoration: none; - user-select: none; - -o-user-select: none; - -moz-user-select: none; - -khtml-user-select: none; - -webkit-user-select: none; - -ms-user-select: none; - float: left; - padding: 0; -} -.fr-toolbar .fr-command.fr-btn i, -.fr-popup .fr-command.fr-btn i { - font-size: 24px; - width: 24px; - margin: 11px 11.5px; - text-align: center; - float: none; -} -.fr-toolbar .fr-command.fr-btn span, -.fr-popup .fr-command.fr-btn span { - font-size: 24px; - display: block; - line-height: 14px; - margin: 11px 11.5px; - min-width: 24px; - float: left; - text-overflow: ellipsis; - overflow: hidden; - white-space: nowrap; - height: 24px; -} -.fr-toolbar .fr-command.fr-btn img, -.fr-popup .fr-command.fr-btn img { - margin: 11px 11.5px; - width: 24px; -} -.fr-toolbar .fr-command.fr-btn.fr-active, -.fr-popup .fr-command.fr-btn.fr-active { - color: #1e88e5; - background: transparent; -} -.fr-toolbar .fr-command.fr-btn.fr-dropdown, -.fr-popup .fr-command.fr-btn.fr-dropdown { - width: auto; -} -.fr-toolbar .fr-command.fr-btn.fr-dropdown i, -.fr-popup .fr-command.fr-btn.fr-dropdown i, -.fr-toolbar .fr-command.fr-btn.fr-dropdown span, -.fr-popup .fr-command.fr-btn.fr-dropdown span, -.fr-toolbar .fr-command.fr-btn.fr-dropdown img, -.fr-popup .fr-command.fr-btn.fr-dropdown img { - margin-left: 7.5px; - margin-right: 15.5px; -} -.fr-toolbar .fr-command.fr-btn.fr-dropdown.fr-active, -.fr-popup .fr-command.fr-btn.fr-dropdown.fr-active { - color: #222222; - background: #d6d6d6; -} -.fr-toolbar .fr-command.fr-btn.fr-dropdown.fr-active:hover, -.fr-popup .fr-command.fr-btn.fr-dropdown.fr-active:hover, -.fr-toolbar .fr-command.fr-btn.fr-dropdown.fr-active:focus, -.fr-popup .fr-command.fr-btn.fr-dropdown.fr-active:focus { - background: #d6d6d6 !important; - color: #222222 !important; -} -.fr-toolbar .fr-command.fr-btn.fr-dropdown.fr-active:hover::after, -.fr-popup .fr-command.fr-btn.fr-dropdown.fr-active:hover::after, -.fr-toolbar .fr-command.fr-btn.fr-dropdown.fr-active:focus::after, -.fr-popup .fr-command.fr-btn.fr-dropdown.fr-active:focus::after { - border-top-color: #222222 !important; -} -.fr-toolbar .fr-command.fr-btn.fr-dropdown::after, -.fr-popup .fr-command.fr-btn.fr-dropdown::after { - position: absolute; - width: 0; - height: 0; - border-left: 4px solid transparent; - border-right: 4px solid transparent; - border-top: 4px solid #222222; - right: 3.75px; - top: 16.5px; - content: ""; -} -.fr-toolbar .fr-command.fr-btn.fr-disabled, -.fr-popup .fr-command.fr-btn.fr-disabled { - color: #bdbdbd; - cursor: default; -} -.fr-toolbar .fr-command.fr-btn.fr-disabled::after, -.fr-popup .fr-command.fr-btn.fr-disabled::after { - border-top-color: #bdbdbd !important; -} -.fr-toolbar .fr-command.fr-btn.fr-hidden, -.fr-popup .fr-command.fr-btn.fr-hidden { - display: none; -} -.fr-toolbar.fr-disabled .fr-btn, -.fr-popup.fr-disabled .fr-btn, -.fr-toolbar.fr-disabled .fr-btn.fr-active, -.fr-popup.fr-disabled .fr-btn.fr-active { - color: #bdbdbd; -} -.fr-toolbar.fr-disabled .fr-btn.fr-dropdown::after, -.fr-popup.fr-disabled .fr-btn.fr-dropdown::after, -.fr-toolbar.fr-disabled .fr-btn.fr-active.fr-dropdown::after, -.fr-popup.fr-disabled .fr-btn.fr-active.fr-dropdown::after { - border-top-color: #bdbdbd; -} -.fr-toolbar.fr-rtl .fr-command.fr-btn, -.fr-popup.fr-rtl .fr-command.fr-btn { - float: right; -} -.fr-toolbar.fr-inline .fr-command.fr-btn { - float: none; -} -.fr-desktop .fr-command:hover, -.fr-desktop .fr-command:focus { - color: #222222; - background: #ebebeb; -} -.fr-desktop .fr-command:hover::after, -.fr-desktop .fr-command:focus::after { - border-top-color: #222222 !important; -} -.fr-desktop .fr-command.fr-selected { - color: #222222; - background: #d6d6d6; -} -.fr-desktop .fr-command.fr-active:hover, -.fr-desktop .fr-command.fr-active:focus { - color: #1e88e5; - background: #ebebeb; -} -.fr-desktop .fr-command.fr-active.fr-selected { - color: #1e88e5; - background: #d6d6d6; -} -.fr-desktop .fr-command.fr-disabled:hover, -.fr-desktop .fr-command.fr-disabled:focus, -.fr-desktop .fr-command.fr-disabled.fr-selected { - background: transparent; -} -.fr-desktop.fr-disabled .fr-command:hover, -.fr-desktop.fr-disabled .fr-command:focus, -.fr-desktop.fr-disabled .fr-command.fr-selected { - background: transparent; -} -.fr-toolbar.fr-mobile .fr-command.fr-blink, -.fr-popup.fr-mobile .fr-command.fr-blink { - background: transparent; -} -.fr-command.fr-btn + .fr-dropdown-menu { - display: inline-block; - position: absolute; - right: auto; - bottom: auto; - height: auto; - -webkit-box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23); - -moz-box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23); - box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23); - z-index: 3; - -webkit-overflow-scrolling: touch; - overflow: hidden; - border-radius: 0 0 2px 2px; - -moz-border-radius: 0 0 2px 2px; - -webkit-border-radius: 0 0 2px 2px; - -moz-background-clip: padding; - -webkit-background-clip: padding-box; - background-clip: padding-box; -} -.fr-command.fr-btn + .fr-dropdown-menu .fr-dropdown-wrapper { - background: #ffffff; - -webkit-box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23); - -moz-box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23); - box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23); - padding: 0; - margin: auto; - display: inline-block; - text-align: left; - position: relative; - -webkit-box-sizing: border-box; - -moz-box-sizing: border-box; - box-sizing: border-box; - -webkit-transition: max-height 0.2s ease 0s; - -moz-transition: max-height 0.2s ease 0s; - -ms-transition: max-height 0.2s ease 0s; - -o-transition: max-height 0.2s ease 0s; - margin-top: 0; - float: left; - max-height: 0; - height: 0; - margin-top: 0 !important; -} -.fr-command.fr-btn + .fr-dropdown-menu .fr-dropdown-wrapper .fr-dropdown-content { - overflow: auto; - position: relative; - max-height: 275px; -} -.fr-command.fr-btn + .fr-dropdown-menu .fr-dropdown-wrapper .fr-dropdown-content ul.fr-dropdown-list { - list-style-type: none; - margin: 0; - padding: 0; -} -.fr-command.fr-btn + .fr-dropdown-menu .fr-dropdown-wrapper .fr-dropdown-content ul.fr-dropdown-list li { - padding: 0; - margin: 0; - font-size: 15px; -} -.fr-command.fr-btn + .fr-dropdown-menu .fr-dropdown-wrapper .fr-dropdown-content ul.fr-dropdown-list li a { - padding: 0 24px; - line-height: 200%; - display: block; - cursor: pointer; - white-space: nowrap; - color: inherit; - text-decoration: none; -} -.fr-command.fr-btn + .fr-dropdown-menu .fr-dropdown-wrapper .fr-dropdown-content ul.fr-dropdown-list li a.fr-active { - background: #d6d6d6; -} -.fr-command.fr-btn + .fr-dropdown-menu .fr-dropdown-wrapper .fr-dropdown-content ul.fr-dropdown-list li a.fr-disabled { - color: #bdbdbd; - cursor: default; -} -.fr-command.fr-btn.fr-active + .fr-dropdown-menu { - display: inline-block; -} -.fr-command.fr-btn.fr-active + .fr-dropdown-menu .fr-dropdown-wrapper { - height: auto; - max-height: 275px; -} -.fr-bottom > .fr-command.fr-btn + .fr-dropdown-menu { - border-radius: 2px 2px 0 0; - -moz-border-radius: 2px 2px 0 0; - -webkit-border-radius: 2px 2px 0 0; - -moz-background-clip: padding; - -webkit-background-clip: padding-box; - background-clip: padding-box; -} -.fr-toolbar.fr-rtl .fr-dropdown-wrapper, -.fr-popup.fr-rtl .fr-dropdown-wrapper { - text-align: right !important; -} -.fr-popup { - position: absolute; - display: none; - color: #222222; - background: #ffffff; - -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24); - -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24); - box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24); - border-radius: 2px; - -moz-border-radius: 2px; - -webkit-border-radius: 2px; - -moz-background-clip: padding; - -webkit-background-clip: padding-box; - background-clip: padding-box; - font-family: Arial, Helvetica, sans-serif; - -webkit-box-sizing: border-box; - -moz-box-sizing: border-box; - box-sizing: border-box; - user-select: none; - -o-user-select: none; - -moz-user-select: none; - -khtml-user-select: none; - -webkit-user-select: none; - -ms-user-select: none; - margin-top: 10px; - z-index: 9995; - text-align: left; - border: 0px; - border-top: 5px solid #222222; -} -.fr-popup.fr-above { - margin-top: -10px; - border-top: 0; - border-bottom: 5px solid #222222; - -webkit-box-shadow: 0 -1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24); - -moz-box-shadow: 0 -1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24); - box-shadow: 0 -1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24); -} -.fr-popup.fr-active { - display: block; -} -.fr-popup.fr-hidden { - -webkit-opacity: 0; - -moz-opacity: 0; - opacity: 0; - -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; -} -.fr-popup .fr-hs { - display: block !important; -} -.fr-popup .fr-input-line { - position: relative; - padding: 8px 0; -} -.fr-popup .fr-input-line input[type="text"], -.fr-popup .fr-input-line textarea { - width: 100%; - margin: 0px 0 1px 0; - border: none; - border-bottom: solid 1px #bdbdbd; - color: #222222; - font-size: 14px; - padding: 6px 0 2px; - background: rgba(0, 0, 0, 0); - position: relative; - z-index: 2; -} -.fr-popup .fr-input-line input[type="text"]:focus, -.fr-popup .fr-input-line textarea:focus { - border-bottom: solid 2px #1e88e5; - margin-bottom: 0px; -} -.fr-popup .fr-input-line input + span, -.fr-popup .fr-input-line textarea + span { - position: absolute; - top: 0; - left: 0; - font-size: 12px; - color: rgba(0, 0, 0, 0); - -webkit-transition: color 0.2s ease 0s; - -moz-transition: color 0.2s ease 0s; - -ms-transition: color 0.2s ease 0s; - -o-transition: color 0.2s ease 0s; - z-index: 1; -} -.fr-popup .fr-input-line input.fr-not-empty:focus + span, -.fr-popup .fr-input-line textarea.fr-not-empty:focus + span { - color: #1e88e5; -} -.fr-popup .fr-input-line input.fr-not-empty + span, -.fr-popup .fr-input-line textarea.fr-not-empty + span { - color: #808080; -} -.fr-popup input, -.fr-popup textarea { - user-select: text; - -o-user-select: text; - -moz-user-select: text; - -khtml-user-select: text; - -webkit-user-select: text; - -ms-user-select: text; - border-radius: 0; - -moz-border-radius: 0; - -webkit-border-radius: 0; - -moz-background-clip: padding; - -webkit-background-clip: padding-box; - background-clip: padding-box; - outline: none; -} -.fr-popup textarea { - resize: none; -} -.fr-popup .fr-buttons { - -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24); - -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24); - box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24); - padding: 0 2px; - white-space: nowrap; - line-height: 0; - border-bottom: 0px; -} -.fr-popup .fr-buttons::after { - clear: both; - display: block; - content: ""; -} -.fr-popup .fr-buttons .fr-btn { - display: inline-block; - float: none; -} -.fr-popup .fr-buttons .fr-btn i { - float: left; -} -.fr-popup .fr-buttons .fr-separator { - display: inline-block; - float: none; -} -.fr-popup .fr-layer { - width: 225px; - -webkit-box-sizing: border-box; - -moz-box-sizing: border-box; - box-sizing: border-box; - margin: 10px; - display: none; -} -@media (min-width: 768px) { - .fr-popup .fr-layer { - width: 300px; - } -} -.fr-popup .fr-layer.fr-active { - display: inline-block; -} -.fr-popup .fr-action-buttons { - z-index: 7; - height: 36px; - text-align: right; -} -.fr-popup .fr-action-buttons button.fr-command { - height: 36px; - line-height: 1; - color: #1e88e5; - padding: 10px; - cursor: pointer; - text-decoration: none; - border: none; - background: none; - font-size: 16px; - outline: none; - -webkit-transition: background 0.2s ease 0s; - -moz-transition: background 0.2s ease 0s; - -ms-transition: background 0.2s ease 0s; - -o-transition: background 0.2s ease 0s; -} -.fr-popup .fr-action-buttons button.fr-command + button { - margin-left: 24px; -} -.fr-popup .fr-action-buttons button.fr-command:hover, -.fr-popup .fr-action-buttons button.fr-command:focus { - background: #ebebeb; - color: #1e88e5; -} -.fr-popup .fr-action-buttons button.fr-command:active { - background: #d6d6d6; - color: #1e88e5; -} -.fr-popup .fr-action-buttons button::-moz-focus-inner { - border: 0; -} -.fr-popup .fr-checkbox { - position: relative; - display: inline-block; - width: 16px; - height: 16px; - line-height: 1; - -webkit-box-sizing: content-box; - -moz-box-sizing: content-box; - box-sizing: content-box; - vertical-align: middle; -} -.fr-popup .fr-checkbox svg { - margin-left: 2px; - margin-top: 2px; - display: none; - width: 10px; - height: 10px; -} -.fr-popup .fr-checkbox span { - border: solid 1px #222222; - border-radius: 2px; - -moz-border-radius: 2px; - -webkit-border-radius: 2px; - -moz-background-clip: padding; - -webkit-background-clip: padding-box; - background-clip: padding-box; - width: 16px; - height: 16px; - display: inline-block; - position: relative; - z-index: 1; - -webkit-box-sizing: border-box; - -moz-box-sizing: border-box; - box-sizing: border-box; - -webkit-transition: background 0.2s ease 0s, border-color 0.2s ease 0s; - -moz-transition: background 0.2s ease 0s, border-color 0.2s ease 0s; - -ms-transition: background 0.2s ease 0s, border-color 0.2s ease 0s; - -o-transition: background 0.2s ease 0s, border-color 0.2s ease 0s; -} -.fr-popup .fr-checkbox input { - position: absolute; - z-index: 2; - -webkit-opacity: 0; - -moz-opacity: 0; - opacity: 0; - -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; - border: 0 none; - cursor: pointer; - height: 16px; - margin: 0; - padding: 0; - width: 16px; - top: 1px; - left: 1px; -} -.fr-popup .fr-checkbox input:checked + span { - background: #1e88e5; - border-color: #1e88e5; -} -.fr-popup .fr-checkbox input:checked + span svg { - display: block; -} -.fr-popup .fr-checkbox input:focus + span { - border-color: #1e88e5; -} -.fr-popup .fr-checkbox-line { - font-size: 14px; - line-height: 1.4px; - margin-top: 10px; -} -.fr-popup .fr-checkbox-line label { - cursor: pointer; - margin: 0 5px; - vertical-align: middle; -} -.fr-popup.fr-rtl { - direction: rtl; - text-align: right; -} -.fr-popup.fr-rtl .fr-action-buttons { - text-align: left; -} -.fr-popup.fr-rtl .fr-input-line input + span, -.fr-popup.fr-rtl .fr-input-line textarea + span { - left: auto; - right: 0; -} -.fr-popup.fr-desktop .fr-arrow { - width: 0; - height: 0; - border-left: 5px solid transparent; - border-right: 5px solid transparent; - border-bottom: 5px solid #222222; - position: absolute; - top: -9px; - left: 50%; - margin-left: -5px; - display: inline-block; -} -.fr-popup.fr-desktop.fr-above .fr-arrow { - top: auto; - bottom: -9px; - border-bottom: 0; - border-top-color: inherit; - border-top-style: solid; - border-top-width: 5px; -} -.fr-text-edit-layer { - width: 250px; - -webkit-box-sizing: border-box; - -moz-box-sizing: border-box; - box-sizing: border-box; - display: block !important; -} -.fr-visibility-helper { - display: none; - margin-left: 0px !important; -} -@media (min-width: 768px) { - .fr-visibility-helper { - margin-left: 1px !important; - } -} -@media (min-width: 992px) { - .fr-visibility-helper { - margin-left: 2px !important; - } -} -@media (min-width: 1200px) { - .fr-visibility-helper { - margin-left: 3px !important; - } -} -.fr-opacity-0 { - -webkit-opacity: 0; - -moz-opacity: 0; - opacity: 0; - -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; -} -.fr-box { - position: relative; -} -/** - * Postion sticky hacks. - */ -.fr-sticky { - position: -webkit-sticky; - position: -moz-sticky; - position: -ms-sticky; - position: -o-sticky; - position: sticky; -} -.fr-sticky-off { - position: relative; -} -.fr-sticky-on { - position: fixed; -} -.fr-sticky-on.fr-sticky-ios { - position: absolute; - left: 0; - right: 0; - width: auto !important; -} -.fr-sticky-dummy { - display: none; -} -.fr-sticky-on + .fr-sticky-dummy { - display: block; -} -.fr-popup .fr-colors-tabs { - -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24); - -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24); - box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24); - margin-bottom: 5px; - line-height: 16px; - margin-left: -2px; - margin-right: -2px; -} -.fr-popup .fr-colors-tabs .fr-colors-tab { - display: inline-block; - width: 50%; - cursor: pointer; - text-align: center; - color: #222222; - font-size: 13px; - padding: 8px 0; - position: relative; -} -.fr-popup .fr-colors-tabs .fr-colors-tab:hover { - color: #1e88e5; -} -.fr-popup .fr-colors-tabs .fr-colors-tab[data-param1="background"]::after { - position: absolute; - bottom: 0; - left: 0; - width: 100%; - height: 2px; - background: #1e88e5; - content: ''; - -webkit-transition: transform 0.2s ease 0s; - -moz-transition: transform 0.2s ease 0s; - -ms-transition: transform 0.2s ease 0s; - -o-transition: transform 0.2s ease 0s; -} -.fr-popup .fr-colors-tabs .fr-colors-tab.fr-selected-tab { - color: #1e88e5; -} -.fr-popup .fr-colors-tabs .fr-colors-tab.fr-selected-tab[data-param1="text"] ~ [data-param1="background"]::after { - -webkit-transform: translate3d(-100%, 0, 0); - -moz-transform: translate3d(-100%, 0, 0); - -ms-transform: translate3d(-100%, 0, 0); - -o-transform: translate3d(-100%, 0, 0); -} -.fr-popup .fr-separator + .fr-colors-tabs { - -webkit-box-shadow: none; - -moz-box-shadow: none; - box-shadow: none; - margin-left: 2px; - margin-right: 2px; -} -.fr-popup .fr-color-set { - line-height: 0; - display: none; -} -.fr-popup .fr-color-set.fr-selected-set { - display: block; -} -.fr-popup .fr-color-set > span { - display: inline-block; - width: 32px; - height: 32px; - position: relative; - z-index: 1; -} -.fr-popup .fr-color-set > span > i { - text-align: center; - line-height: 32px; - height: 32px; - width: 32px; - font-size: 13px; - position: absolute; - bottom: 0; - cursor: default; - left: 0; -} -.fr-popup .fr-color-set > span.fr-selected-color::after { - color: #ffffff; - content: "\f00c"; - font-family: FontAwesome; - font-size: 13px; - font-weight: 400; - line-height: 32px; - position: absolute; - top: 0; - bottom: 0; - right: 0; - left: 0; - text-align: center; - cursor: default; -} -.fr-popup .fr-color-set > span:hover, -.fr-popup .fr-color-set > span.fr-selected-color { - outline: 1px solid #222222; - z-index: 2; -} -.fr-rtl .fr-popup .fr-colors-tabs .fr-colors-tab.fr-selected-tab[data-param1="text"] ~ [data-param1="background"]::after { - -webkit-transform: translate3d(100%, 0, 0); - -moz-transform: translate3d(100%, 0, 0); - -ms-transform: translate3d(100%, 0, 0); - -o-transform: translate3d(100%, 0, 0); -} - -table td.fr-selected-cell, -table th.fr-selected-cell { - border: 1px double #1e88e5; -} -// table tr { -// user-select: none; -// -o-user-select: none; -// -moz-user-select: none; -// -khtml-user-select: none; -// -webkit-user-select: none; -// -ms-user-select: none; -// } -// table td, -// table th { -// user-select: text; -// -o-user-select: text; -// -moz-user-select: text; -// -khtml-user-select: text; -// -webkit-user-select: text; -// -ms-user-select: text; -// } -.fr-no-selection table td, -.fr-no-selection table th { - user-select: none; - -o-user-select: none; - -moz-user-select: none; - -khtml-user-select: none; - -webkit-user-select: none; - -ms-user-select: none; -} -.fr-table-resizer { - cursor: col-resize; - position: fixed; - z-index: 3; - display: none; -} -.fr-table-resizer.fr-moving { - z-index: 2; -} -.fr-table-resizer div { - -webkit-opacity: 0; - -moz-opacity: 0; - opacity: 0; - -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; - border-right: 1px solid #1e88e5; -} -.fr-no-selection { - user-select: none; - -o-user-select: none; - -moz-user-select: none; - -khtml-user-select: none; - -webkit-user-select: none; - -ms-user-select: none; -} -.fr-popup .fr-table-size .fr-table-size-info { - text-align: center; - font-size: 14px; - padding: 8px; -} -.fr-popup .fr-table-size .fr-select-table-size { - line-height: 0; - padding: 0 5px 5px; - white-space: nowrap; -} -.fr-popup .fr-table-size .fr-select-table-size > span { - display: inline-block; - padding: 0px 4px 4px 0; -} -.fr-popup .fr-table-size .fr-select-table-size > span > span { - display: inline-block; - width: 18px; - height: 18px; - border: 1px solid #dddddd; -} -.fr-popup .fr-table-size .fr-select-table-size > span:hover, -.fr-popup .fr-table-size .fr-select-table-size > span.hover { - background: transparent; -} -.fr-popup .fr-table-size .fr-select-table-size > span:hover > span, -.fr-popup .fr-table-size .fr-select-table-size > span.hover > span { - background: rgba(30, 136, 229, 0.3); - border: solid 1px #1e88e5; -} -.fr-popup .fr-table-size .fr-select-table-size .new-line::after { - clear: both; - display: block; - content: ""; -} -.fr-popup.fr-above .fr-table-size .fr-select-table-size > span { - display: inline-block !important; -} -.fr-popup .fr-table-colors-buttons { - margin-bottom: 5px; -} -.fr-popup .fr-table-colors { - line-height: 0; - display: block; -} -.fr-popup .fr-table-colors > span { - display: inline-block; - width: 32px; - height: 32px; - position: relative; - z-index: 1; -} -.fr-popup .fr-table-colors > span > i { - text-align: center; - line-height: 32px; - height: 32px; - width: 32px; - font-size: 13px; - position: absolute; - bottom: 0; - cursor: default; - left: 0; -} -.fr-popup .fr-table-colors > span.fr-selected-color::after { - color: #ffffff; - content: "\f00c"; - font-family: FontAwesome; - font-size: 13px; - font-weight: 400; - line-height: 32px; - position: absolute; - top: 0; - bottom: 0; - right: 0; - left: 0; - text-align: center; - cursor: default; -} -.fr-popup .fr-table-colors > span:hover, -.fr-popup .fr-table-colors > span.fr-selected-color { - outline: 1px solid #222222; - z-index: 2; -} -.fr-popup.fr-desktop .fr-table-size .fr-select-table-size > span > span { - width: 12px; - height: 12px; -} -.fr-view { - /** - * Image style. - */ - /** - * Video style - */ -} -.fr-view table { - border: none; - border-collapse: collapse; - empty-cells: show; - max-width: 100%; -} -.fr-view table.fr-dashed-borders td, -.fr-view table.fr-dashed-borders th { - border-style: dashed; -} -.fr-view table.fr-alternate-rows tbody tr:nth-child(2n) { - background: #f5f5f5; -} -.fr-view table td, -.fr-view table th { - border: 1px solid #dddddd; -} -.fr-view table td:empty, -.fr-view table th:empty { - height: 20px; -} -.fr-view table td.fr-highlighted, -.fr-view table th.fr-highlighted { - border: 1px double red; -} -.fr-view table td.fr-thick, -.fr-view table th.fr-thick { - border-width: 2px; -} -.fr-view table th { - background: #e6e6e6; -} -.fr-view hr { - clear: both; - user-select: none; - -o-user-select: none; - -moz-user-select: none; - -khtml-user-select: none; - -webkit-user-select: none; - -ms-user-select: none; - page-break-after: always; -} -.fr-view .fr-file { - position: relative; -} -.fr-view .fr-file::after { - position: relative; - content: "\1F4CE"; - font-weight: normal; -} -.fr-view pre { - white-space: pre-wrap; - word-wrap: break-word; -} -.fr-view blockquote { - border-left: solid 2px #5e35b1; - margin-left: 0; - padding-left: 5px; - color: #5e35b1; -} -.fr-view blockquote blockquote { - border-color: #00bcd4; - color: #00bcd4; -} -.fr-view blockquote blockquote blockquote { - border-color: #43a047; - color: #43a047; -} -.fr-view a.fr-strong { - font-weight: 700; -} -.fr-view a.fr-green { - color: green; -} -.fr-view span.fr-emoticon { - font-weight: normal; - font-family: "Apple Color Emoji", "Segoe UI Emoji", "NotoColorEmoji", "Segoe UI Symbol", "Android Emoji", "EmojiSymbols"; - display: inline; - line-height: 0; -} -.fr-view .fr-text-gray { - color: #AAA !important; -} -.fr-view .fr-text-bordered { - border-top: solid 1px #222; - border-bottom: solid 1px #222; - padding: 10px 0; -} -.fr-view .fr-text-spaced { - letter-spacing: 1px; -} -.fr-view .fr-text-uppercase { - text-transform: uppercase; -} -.fr-view img { - z-index: 3; - position: relative; - overflow: auto; - cursor: pointer; -} -.fr-view img.fr-dib { - margin: auto; - display: block; - float: none; - vertical-align: top; - margin-top: 5px; - margin-bottom: 5px; -} -.fr-view img.fr-dib.fr-fil { - margin: 5px auto 5px 0; - left: 5px; -} -.fr-view img.fr-dib.fr-fir { - margin: 5px 0 5px auto; - right: 5px; -} -.fr-view img.fr-dii { - margin: auto; - display: inline-block; - float: none; - margin-top: 5px; - margin-bottom: 5px; -} -.fr-view img.fr-dii.fr-fil { - margin: 5px 10px 5px 0; - left: 5px; - float: left; -} -.fr-view img.fr-dii.fr-fir { - margin: 5px 0 5px 10px; - right: 5px; - float: right; -} -.fr-view img.fr-rounded { - border-radius: 100%; - -moz-border-radius: 100%; - -webkit-border-radius: 100%; - -moz-background-clip: padding; - -webkit-background-clip: padding-box; - background-clip: padding-box; -} -.fr-view img.fr-bordered { - border: solid 10px #CCC; - -webkit-box-sizing: content-box; - -moz-box-sizing: content-box; - box-sizing: content-box; -} -.fr-view .fr-video { - text-align: center; - position: relative; -} -.fr-view .fr-video > * { - -webkit-box-sizing: content-box; - -moz-box-sizing: content-box; - box-sizing: content-box; - max-width: 100%; - border: none; -} -.fr-view .fr-video.fr-dvb { - display: block; - clear: both; -} -.fr-view .fr-video.fr-dvb.fr-fvl { - text-align: left; -} -.fr-view .fr-video.fr-dvb.fr-fvr { - text-align: right; -} -.fr-view .fr-video.fr-dvi { - display: inline-block; -} -.fr-view .fr-video.fr-dvi.fr-fvl { - float: left; -} -.fr-view .fr-video.fr-dvi.fr-fvr { - float: right; -} - -.fr-view strong { - font-weight: bold; -} -/* FINISH: table editor */ - -/* START: codemirror */ -/* BASICS */ -.CodeMirror { - /* Set height, width, borders, and global font properties here */ - font-family: monospace; - height: 300px; - color: black; -} - -/* PADDING */ - -.CodeMirror-lines { - padding: 4px 0; /* Vertical padding around content */ -} -.CodeMirror pre { - padding: 0 4px; /* Horizontal padding of content */ -} - -.CodeMirror-scrollbar-filler, .CodeMirror-gutter-filler { - background-color: white; /* The little square between H and V scrollbars */ -} - -/* GUTTER */ - -.CodeMirror-gutters { - border-right: 1px solid #ddd; - background-color: #f7f7f7; - white-space: nowrap; -} -.CodeMirror-linenumbers {} -.CodeMirror-linenumber { - padding: 0 3px 0 5px; - min-width: 20px; - text-align: right; - color: #999; - white-space: nowrap; -} - -.CodeMirror-guttermarker { color: black; } -.CodeMirror-guttermarker-subtle { color: #999; } - -/* CURSOR */ - -.CodeMirror-cursor { - border-left: 1px solid black; - border-right: none; - width: 0; -} -/* Shown when moving in bi-directional text */ -.CodeMirror div.CodeMirror-secondarycursor { - border-left: 1px solid silver; -} -.cm-fat-cursor .CodeMirror-cursor { - width: auto; - border: 0; - background: #7e7; -} -.cm-fat-cursor div.CodeMirror-cursors { - z-index: 1; -} - -.cm-animate-fat-cursor { - width: auto; - border: 0; - -webkit-animation: blink 1.06s steps(1) infinite; - -moz-animation: blink 1.06s steps(1) infinite; - animation: blink 1.06s steps(1) infinite; - background-color: #7e7; -} -@-moz-keyframes blink { - 0% {} - 50% { background-color: transparent; } - 100% {} -} -@-webkit-keyframes blink { - 0% {} - 50% { background-color: transparent; } - 100% {} -} -@keyframes blink { - 0% {} - 50% { background-color: transparent; } - 100% {} -} - -/* Can style cursor different in overwrite (non-insert) mode */ -.CodeMirror-overwrite .CodeMirror-cursor {} - -.cm-tab { display: inline-block; text-decoration: inherit; } - -.CodeMirror-ruler { - border-left: 1px solid #ccc; - position: absolute; -} - -/* DEFAULT THEME */ - -.cm-s-default .cm-header {color: blue;} -.cm-s-default .cm-quote {color: #090;} -.cm-negative {color: #d44;} -.cm-positive {color: #292;} -.cm-header, .cm-strong {font-weight: bold;} -.cm-em {font-style: italic;} -.cm-link {text-decoration: underline;} -.cm-strikethrough {text-decoration: line-through;} - -.cm-s-default .cm-keyword {color: #708;} -.cm-s-default .cm-atom {color: #219;} -.cm-s-default .cm-number {color: #164;} -.cm-s-default .cm-def {color: #00f;} -.cm-s-default .cm-variable, -.cm-s-default .cm-punctuation, -.cm-s-default .cm-property, -.cm-s-default .cm-operator {} -.cm-s-default .cm-variable-2 {color: #05a;} -.cm-s-default .cm-variable-3 {color: #085;} -.cm-s-default .cm-comment {color: #a50;} -.cm-s-default .cm-string {color: #a11;} -.cm-s-default .cm-string-2 {color: #f50;} -.cm-s-default .cm-meta {color: #555;} -.cm-s-default .cm-qualifier {color: #555;} -.cm-s-default .cm-builtin {color: #30a;} -.cm-s-default .cm-bracket {color: #997;} -.cm-s-default .cm-tag {color: #170;} -.cm-s-default .cm-attribute {color: #00c;} -.cm-s-default .cm-hr {color: #999;} -.cm-s-default .cm-link {color: #00c;} - -.cm-s-default .cm-error {color: #f00;} -.cm-invalidchar {color: #f00;} - -.CodeMirror-composing { border-bottom: 2px solid; } - -/* Default styles for common addons */ - -div.CodeMirror span.CodeMirror-matchingbracket {color: #0f0;} -div.CodeMirror span.CodeMirror-nonmatchingbracket {color: #f22;} -.CodeMirror-matchingtag { background: rgba(255, 150, 0, .3); } -.CodeMirror-activeline-background {background: #e8f2ff;} - -/* STOP */ - -/* The rest of this file contains styles related to the mechanics of - the editor. You probably shouldn't touch them. */ - -.CodeMirror { - position: relative; - overflow: hidden; - background: white; -} - -.CodeMirror-scroll { - overflow: scroll !important; /* Things will break if this is overridden */ - /* 30px is the magic margin used to hide the element's real scrollbars */ - /* See overflow: hidden in .CodeMirror */ - margin-bottom: -30px; margin-right: -30px; - padding-bottom: 30px; - height: 100%; - outline: none; /* Prevent dragging from highlighting the element */ - position: relative; -} -.CodeMirror-sizer { - position: relative; - border-right: 30px solid transparent; -} - -/* The fake, visible scrollbars. Used to force redraw during scrolling - before actual scrolling happens, thus preventing shaking and - flickering artifacts. */ -.CodeMirror-vscrollbar, .CodeMirror-hscrollbar, .CodeMirror-scrollbar-filler, .CodeMirror-gutter-filler { - position: absolute; - z-index: 6; - display: none; -} -.CodeMirror-vscrollbar { - right: 0; top: 0; - overflow-x: hidden; - overflow-y: scroll; -} -.CodeMirror-hscrollbar { - bottom: 0; left: 0; - overflow-y: hidden; - overflow-x: scroll; -} -.CodeMirror-scrollbar-filler { - right: 0; bottom: 0; -} -.CodeMirror-gutter-filler { - left: 0; bottom: 0; -} - -.CodeMirror-gutters { - position: absolute; left: 0; top: 0; - z-index: 3; -} -.CodeMirror-gutter { - white-space: normal; - height: 100%; - display: inline-block; - margin-bottom: -30px; - /* Hack to make IE7 behave */ - *zoom:1; - *display:inline; -} -.CodeMirror-gutter-wrapper { - position: absolute; - z-index: 4; - background: none !important; - border: none !important; -} -.CodeMirror-gutter-background { - position: absolute; - top: 0; bottom: 0; - z-index: 4; -} -.CodeMirror-gutter-elt { - position: absolute; - cursor: default; - z-index: 4; -} -.CodeMirror-gutter-wrapper { - -webkit-user-select: none; - -moz-user-select: none; - user-select: none; -} - -.CodeMirror-lines { - cursor: text; - min-height: 1px; /* prevents collapsing before first draw */ -} -.CodeMirror pre { - /* Reset some styles that the rest of the page might have set */ - -moz-border-radius: 0; -webkit-border-radius: 0; border-radius: 0; - border-width: 0; - background: transparent; - font-family: inherit; - font-size: inherit; - margin: 0; - white-space: pre; - word-wrap: normal; - line-height: inherit; - color: inherit; - z-index: 2; - position: relative; - overflow: visible; - -webkit-tap-highlight-color: transparent; -} -.CodeMirror-wrap pre { - word-wrap: break-word; - white-space: pre-wrap; - word-break: normal; -} - -.CodeMirror-linebackground { - position: absolute; - left: 0; right: 0; top: 0; bottom: 0; - z-index: 0; -} - -.CodeMirror-linewidget { - position: relative; - z-index: 2; - overflow: auto; -} - -.CodeMirror-widget {} - -.CodeMirror-code { - outline: none; -} - -/* Force content-box sizing for the elements where we expect it */ -.CodeMirror-scroll, -.CodeMirror-sizer, -.CodeMirror-gutter, -.CodeMirror-gutters, -.CodeMirror-linenumber { - -moz-box-sizing: content-box; - box-sizing: content-box; -} - -.CodeMirror-measure { - position: absolute; - width: 100%; - height: 0; - overflow: hidden; - visibility: hidden; -} - -.CodeMirror-cursor { position: absolute; } -.CodeMirror-measure pre { position: static; } - -div.CodeMirror-cursors { - visibility: hidden; - position: relative; - z-index: 3; -} -div.CodeMirror-dragcursors { - visibility: visible; -} - -.CodeMirror-focused div.CodeMirror-cursors { - visibility: visible; -} - -.CodeMirror-selected { background: #d9d9d9; } -.CodeMirror-focused .CodeMirror-selected { background: #d7d4f0; } -.CodeMirror-crosshair { cursor: crosshair; } -.CodeMirror-line::selection, .CodeMirror-line > span::selection, .CodeMirror-line > span > span::selection { background: #d7d4f0; } -.CodeMirror-line::-moz-selection, .CodeMirror-line > span::-moz-selection, .CodeMirror-line > span > span::-moz-selection { background: #d7d4f0; } - -.cm-searching { - background: #ffa; - background: rgba(255, 255, 0, .4); -} - -/* IE7 hack to prevent it from returning funny offsetTops on the spans */ -.CodeMirror span { *vertical-align: text-bottom; } - -/* Used to force a border model for a node */ -.cm-force-border { padding-right: .1px; } - -@media print { - /* Hide the cursor when printing */ - .CodeMirror div.CodeMirror-cursors { - visibility: hidden; - } -} - -/* See issue #2901 */ -.cm-tab-wrap-hack:after { content: ''; } - -/* Help users use markselection to safely style text background */ -span.CodeMirror-selectedtext { background: none; } - -/* -Solarized theme for code-mirror -http://ethanschoonover.com/solarized -*/ - -/* -Solarized color pallet -http://ethanschoonover.com/solarized/img/solarized-palette.png -*/ - -.solarized.base03 { color: #002b36; } -.solarized.base02 { color: #073642; } -.solarized.base01 { color: #586e75; } -.solarized.base00 { color: #657b83; } -.solarized.base0 { color: #839496; } -.solarized.base1 { color: #93a1a1; } -.solarized.base2 { color: #eee8d5; } -.solarized.base3 { color: #fdf6e3; } -.solarized.solar-yellow { color: #b58900; } -.solarized.solar-orange { color: #cb4b16; } -.solarized.solar-red { color: #dc322f; } -.solarized.solar-magenta { color: #d33682; } -.solarized.solar-violet { color: #6c71c4; } -.solarized.solar-blue { color: #268bd2; } -.solarized.solar-cyan { color: #2aa198; } -.solarized.solar-green { color: #859900; } - -/* Color scheme for code-mirror */ - -.cm-s-solarized { - line-height: 1.45em; - color-profile: sRGB; - rendering-intent: auto; -} -.cm-s-solarized.cm-s-dark { - color: #839496; - background-color: #002b36; - text-shadow: #002b36 0 1px; -} -.cm-s-solarized.cm-s-light { - background-color: #fdf6e3; - color: #657b83; - text-shadow: #eee8d5 0 1px; -} - -.cm-s-solarized .CodeMirror-widget { - text-shadow: none; -} - -.cm-s-solarized .cm-header { color: #586e75; } -.cm-s-solarized .cm-quote { color: #93a1a1; } - -.cm-s-solarized .cm-keyword { color: #cb4b16; } -.cm-s-solarized .cm-atom { color: #d33682; } -.cm-s-solarized .cm-number { color: #d33682; } -.cm-s-solarized .cm-def { color: #2aa198; } - -.cm-s-solarized .cm-variable { color: #839496; } -.cm-s-solarized .cm-variable-2 { color: #b58900; } -.cm-s-solarized .cm-variable-3 { color: #6c71c4; } - -.cm-s-solarized .cm-property { color: #2aa198; } -.cm-s-solarized .cm-operator { color: #6c71c4; } - -.cm-s-solarized .cm-comment { color: #586e75; font-style:italic; } - -.cm-s-solarized .cm-string { color: #859900; } -.cm-s-solarized .cm-string-2 { color: #b58900; } - -.cm-s-solarized .cm-meta { color: #859900; } -.cm-s-solarized .cm-qualifier { color: #b58900; } -.cm-s-solarized .cm-builtin { color: #d33682; } -.cm-s-solarized .cm-bracket { color: #cb4b16; } -.cm-s-solarized .CodeMirror-matchingbracket { color: #859900; } -.cm-s-solarized .CodeMirror-nonmatchingbracket { color: #dc322f; } -.cm-s-solarized .cm-tag { color: #93a1a1; } -.cm-s-solarized .cm-attribute { color: #2aa198; } -.cm-s-solarized .cm-hr { - color: transparent; - border-top: 1px solid #586e75; - display: block; -} -.cm-s-solarized .cm-link { color: #93a1a1; cursor: pointer; } -.cm-s-solarized .cm-special { color: #6c71c4; } -.cm-s-solarized .cm-em { - color: #999; - text-decoration: underline; - text-decoration-style: dotted; -} -.cm-s-solarized .cm-strong { color: #eee; } -.cm-s-solarized .cm-error, -.cm-s-solarized .cm-invalidchar { - color: #586e75; - border-bottom: 1px dotted #dc322f; -} - -.cm-s-solarized.cm-s-dark div.CodeMirror-selected { background: #073642; } -.cm-s-solarized.cm-s-dark.CodeMirror ::selection { background: rgba(7, 54, 66, 0.99); } -.cm-s-solarized.cm-s-dark .CodeMirror-line::-moz-selection, .cm-s-dark .CodeMirror-line > span::-moz-selection, .cm-s-dark .CodeMirror-line > span > span::-moz-selection { background: rgba(7, 54, 66, 0.99); } - -.cm-s-solarized.cm-s-light div.CodeMirror-selected { background: #eee8d5; } -.cm-s-solarized.cm-s-light .CodeMirror-line::selection, .cm-s-light .CodeMirror-line > span::selection, .cm-s-light .CodeMirror-line > span > span::selection { background: #eee8d5; } -.cm-s-solarized.cm-s-light .CodeMirror-line::-moz-selection, .cm-s-ligh .CodeMirror-line > span::-moz-selection, .cm-s-ligh .CodeMirror-line > span > span::-moz-selection { background: #eee8d5; } - -/* Editor styling */ - -/* Little shadow on the view-port of the buffer view */ -.cm-s-solarized.CodeMirror { - -moz-box-shadow: inset 7px 0 12px -6px #000; - -webkit-box-shadow: inset 7px 0 12px -6px #000; - box-shadow: inset 7px 0 12px -6px #000; -} - -/* Gutter border and some shadow from it */ -.cm-s-solarized .CodeMirror-gutters { - border-right: 1px solid; -} - -/* Gutter colors and line number styling based of color scheme (dark / light) */ - -/* Dark */ -.cm-s-solarized.cm-s-dark .CodeMirror-gutters { - background-color: #002b36; - border-color: #00232c; -} - -.cm-s-solarized.cm-s-dark .CodeMirror-linenumber { - text-shadow: #021014 0 -1px; -} - -/* Light */ -.cm-s-solarized.cm-s-light .CodeMirror-gutters { - background-color: #fdf6e3; - border-color: #eee8d5; -} - -/* Common */ -.cm-s-solarized .CodeMirror-linenumber { - color: #586e75; - padding: 0 5px; -} -.cm-s-solarized .CodeMirror-guttermarker-subtle { color: #586e75; } -.cm-s-solarized.cm-s-dark .CodeMirror-guttermarker { color: #ddd; } -.cm-s-solarized.cm-s-light .CodeMirror-guttermarker { color: #cb4b16; } - -.cm-s-solarized .CodeMirror-gutter .CodeMirror-gutter-text { - color: #586e75; -} - -.cm-s-solarized .CodeMirror-cursor { border-left: 1px solid #819090; } - -/* -Active line. Negative margin compensates left padding of the text in the -view-port -*/ -.cm-s-solarized.cm-s-dark .CodeMirror-activeline-background { - background: rgba(255, 255, 255, 0.10); -} -.cm-s-solarized.cm-s-light .CodeMirror-activeline-background { - background: rgba(0, 0, 0, 0.10); -} -/* FINISH codemirror */ - /* START dropzone.js */ .dz-success-mark, .dz-error-mark { display: none !important; } /* FINISH dropzone.js */ +/* START dragula.js */ +.gu-mirror { + position: fixed !important; + margin: 0 !important; + z-index: 9999 !important; + opacity: 0.8; + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)"; + filter: alpha(opacity=80); + list-style-type: none; +} +.gu-hide { + display: none !important; +} +.gu-unselectable { + -webkit-user-select: none !important; + -moz-user-select: none !important; + -ms-user-select: none !important; + user-select: none !important; +} +.gu-transit { + opacity: 0.2; + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=20)"; + filter: alpha(opacity=20); +} +/* FINISH dragula.js */ diff --git a/app/app/styles/view/document/sidebar.scss b/app/app/styles/view/document/sidebar.scss index a7790037..3c3d76ef 100644 --- a/app/app/styles/view/document/sidebar.scss +++ b/app/app/styles/view/document/sidebar.scss @@ -34,14 +34,15 @@ } } - > .entries { + .entries { padding: 0; list-style: none; font-size: 13px; overflow-x: hidden; + list-style-type: none; - > .item { - padding: 2px 0; + .item { + padding: 4px 0; text-overflow: ellipsis; word-wrap: break-word; white-space: nowrap; diff --git a/app/app/templates/components/document/document-sidebar-toc.hbs b/app/app/templates/components/document/document-sidebar-toc.hbs index a4d31153..5c2411e3 100644 --- a/app/app/templates/components/document/document-sidebar-toc.hbs +++ b/app/app/templates/components/document/document-sidebar-toc.hbs @@ -19,12 +19,9 @@ {{/if}} -
    - {{#each pages key="id" as |node index|}} -
  • - {{document/toc-entry page.id node.id node.level}} - {{node.title}} -
    • +
      + {{#each pages key="id" as |entry index|}} + {{document/index-entry page=entry onClick=(action 'onEntryClick')}} {{/each}}
    diff --git a/app/app/templates/components/document/index-entry.hbs b/app/app/templates/components/document/index-entry.hbs new file mode 100644 index 00000000..b46fb464 --- /dev/null +++ b/app/app/templates/components/document/index-entry.hbs @@ -0,0 +1 @@ +{{page.title}} \ No newline at end of file diff --git a/app/ember-cli-build.js b/app/ember-cli-build.js index f36b5ffe..2e634c8b 100644 --- a/app/ember-cli-build.js +++ b/app/ember-cli-build.js @@ -56,6 +56,7 @@ module.exports = function(defaults) { app.import('vendor/drop.js'); app.import('vendor/tooltip.js'); app.import('vendor/markdown-it.min.js'); + app.import('vendor/dragula.js'); return app.toTree(); }; diff --git a/app/vendor/dragula.js b/app/vendor/dragula.js new file mode 100644 index 00000000..c5e1ae9d --- /dev/null +++ b/app/vendor/dragula.js @@ -0,0 +1,905 @@ +(function(f){if(typeof exports==="object"&&typeof module!=="undefined"){module.exports=f()}else if(typeof define==="function"&&define.amd){define([],f)}else{var g;if(typeof window!=="undefined"){g=window}else if(typeof global!=="undefined"){g=global}else if(typeof self!=="undefined"){g=self}else{g=this}g.dragula = f()}})(function(){var define,module,exports;return (function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o 0 ? revert : o.revertOnSpill; + var item = _copy || _item; + var parent = getParent(item); + var initial = isInitialPlacement(parent); + if (initial === false && reverts) { + if (_copy) { + parent.removeChild(_copy); + } else { + _source.insertBefore(item, _initialSibling); + } + } + if (initial || reverts) { + drake.emit('cancel', item, _source, _source); + } else { + drake.emit('drop', item, parent, _source, _currentSibling); + } + cleanup(); + } + + function cleanup () { + var item = _copy || _item; + ungrab(); + removeMirrorImage(); + if (item) { + classes.rm(item, 'gu-transit'); + } + if (_renderTimer) { + clearTimeout(_renderTimer); + } + drake.dragging = false; + if (_lastDropTarget) { + drake.emit('out', item, _lastDropTarget, _source); + } + drake.emit('dragend', item); + _source = _item = _copy = _initialSibling = _currentSibling = _renderTimer = _lastDropTarget = null; + } + + function isInitialPlacement (target, s) { + var sibling; + if (s !== void 0) { + sibling = s; + } else if (_mirror) { + sibling = _currentSibling; + } else { + sibling = nextEl(_copy || _item); + } + return target === _source && sibling === _initialSibling; + } + + function findDropTarget (elementBehindCursor, clientX, clientY) { + var target = elementBehindCursor; + while (target && !accepted()) { + target = getParent(target); + } + return target; + + function accepted () { + var droppable = isContainer(target); + if (droppable === false) { + return false; + } + + var immediate = getImmediateChild(target, elementBehindCursor); + var reference = getReference(target, immediate, clientX, clientY); + var initial = isInitialPlacement(target, reference); + if (initial) { + return true; // should always be able to drop it right back where it was + } + return o.accepts(_item, target, _source, reference); + } + } + + function drag (e) { + if (!_mirror) { + return; + } + e.preventDefault(); + + var clientX = getCoord('clientX', e); + var clientY = getCoord('clientY', e); + var x = clientX - _offsetX; + var y = clientY - _offsetY; + + _mirror.style.left = x + 'px'; + _mirror.style.top = y + 'px'; + + var item = _copy || _item; + var elementBehindCursor = getElementBehindPoint(_mirror, clientX, clientY); + var dropTarget = findDropTarget(elementBehindCursor, clientX, clientY); + var changed = dropTarget !== null && dropTarget !== _lastDropTarget; + if (changed || dropTarget === null) { + out(); + _lastDropTarget = dropTarget; + over(); + } + var parent = getParent(item); + if (dropTarget === _source && _copy && !o.copySortSource) { + if (parent) { + parent.removeChild(item); + } + return; + } + var reference; + var immediate = getImmediateChild(dropTarget, elementBehindCursor); + if (immediate !== null) { + reference = getReference(dropTarget, immediate, clientX, clientY); + } else if (o.revertOnSpill === true && !_copy) { + reference = _initialSibling; + dropTarget = _source; + } else { + if (_copy && parent) { + parent.removeChild(item); + } + return; + } + if ( + (reference === null && changed) || + reference !== item && + reference !== nextEl(item) + ) { + _currentSibling = reference; + dropTarget.insertBefore(item, reference); + drake.emit('shadow', item, dropTarget, _source); + } + function moved (type) { drake.emit(type, item, _lastDropTarget, _source); } + function over () { if (changed) { moved('over'); } } + function out () { if (_lastDropTarget) { moved('out'); } } + } + + function spillOver (el) { + classes.rm(el, 'gu-hide'); + } + + function spillOut (el) { + if (drake.dragging) { classes.add(el, 'gu-hide'); } + } + + function renderMirrorImage () { + if (_mirror) { + return; + } + var rect = _item.getBoundingClientRect(); + _mirror = _item.cloneNode(true); + _mirror.style.width = getRectWidth(rect) + 'px'; + _mirror.style.height = getRectHeight(rect) + 'px'; + classes.rm(_mirror, 'gu-transit'); + classes.add(_mirror, 'gu-mirror'); + o.mirrorContainer.appendChild(_mirror); + touchy(documentElement, 'add', 'mousemove', drag); + classes.add(o.mirrorContainer, 'gu-unselectable'); + drake.emit('cloned', _mirror, _item, 'mirror'); + } + + function removeMirrorImage () { + if (_mirror) { + classes.rm(o.mirrorContainer, 'gu-unselectable'); + touchy(documentElement, 'remove', 'mousemove', drag); + getParent(_mirror).removeChild(_mirror); + _mirror = null; + } + } + + function getImmediateChild (dropTarget, target) { + var immediate = target; + while (immediate !== dropTarget && getParent(immediate) !== dropTarget) { + immediate = getParent(immediate); + } + if (immediate === documentElement) { + return null; + } + return immediate; + } + + function getReference (dropTarget, target, x, y) { + var horizontal = o.direction === 'horizontal'; + var reference = target !== dropTarget ? inside() : outside(); + return reference; + + function outside () { // slower, but able to figure out any position + var len = dropTarget.children.length; + var i; + var el; + var rect; + for (i = 0; i < len; i++) { + el = dropTarget.children[i]; + rect = el.getBoundingClientRect(); + if (horizontal && (rect.left + rect.width / 2) > x) { return el; } + if (!horizontal && (rect.top + rect.height / 2) > y) { return el; } + } + return null; + } + + function inside () { // faster, but only available if dropped inside a child element + var rect = target.getBoundingClientRect(); + if (horizontal) { + return resolve(x > rect.left + getRectWidth(rect) / 2); + } + return resolve(y > rect.top + getRectHeight(rect) / 2); + } + + function resolve (after) { + return after ? nextEl(target) : target; + } + } + + function isCopy (item, container) { + return typeof o.copy === 'boolean' ? o.copy : o.copy(item, container); + } +} + +function touchy (el, op, type, fn) { + var touch = { + mouseup: 'touchend', + mousedown: 'touchstart', + mousemove: 'touchmove' + }; + var pointers = { + mouseup: 'pointerup', + mousedown: 'pointerdown', + mousemove: 'pointermove' + }; + var microsoft = { + mouseup: 'MSPointerUp', + mousedown: 'MSPointerDown', + mousemove: 'MSPointerMove' + }; + if (global.navigator.pointerEnabled) { + crossvent[op](el, pointers[type], fn); + } else if (global.navigator.msPointerEnabled) { + crossvent[op](el, microsoft[type], fn); + } else { + crossvent[op](el, touch[type], fn); + crossvent[op](el, type, fn); + } +} + +function whichMouseButton (e) { + if (e.touches !== void 0) { return e.touches.length; } + if (e.which !== void 0 && e.which !== 0) { return e.which; } // see https://github.com/bevacqua/dragula/issues/261 + if (e.buttons !== void 0) { return e.buttons; } + var button = e.button; + if (button !== void 0) { // see https://github.com/jquery/jquery/blob/99e8ff1baa7ae341e94bb89c3e84570c7c3ad9ea/src/event.js#L573-L575 + return button & 1 ? 1 : button & 2 ? 3 : (button & 4 ? 2 : 0); + } +} + +function getOffset (el) { + var rect = el.getBoundingClientRect(); + return { + left: rect.left + getScroll('scrollLeft', 'pageXOffset'), + top: rect.top + getScroll('scrollTop', 'pageYOffset') + }; +} + +function getScroll (scrollProp, offsetProp) { + if (typeof global[offsetProp] !== 'undefined') { + return global[offsetProp]; + } + if (documentElement.clientHeight) { + return documentElement[scrollProp]; + } + return doc.body[scrollProp]; +} + +function getElementBehindPoint (point, x, y) { + var p = point || {}; + var state = p.className; + var el; + p.className += ' gu-hide'; + el = doc.elementFromPoint(x, y); + p.className = state; + return el; +} + +function never () { return false; } +function always () { return true; } +function getRectWidth (rect) { return rect.width || (rect.right - rect.left); } +function getRectHeight (rect) { return rect.height || (rect.bottom - rect.top); } +function getParent (el) { return el.parentNode === doc ? null : el.parentNode; } +function isInput (el) { return el.tagName === 'INPUT' || el.tagName === 'TEXTAREA' || el.tagName === 'SELECT' || isEditable(el); } +function isEditable (el) { + if (!el) { return false; } // no parents were editable + if (el.contentEditable === 'false') { return false; } // stop the lookup + if (el.contentEditable === 'true') { return true; } // found a contentEditable element in the chain + return isEditable(getParent(el)); // contentEditable is set to 'inherit' +} + +function nextEl (el) { + return el.nextElementSibling || manually(); + function manually () { + var sibling = el; + do { + sibling = sibling.nextSibling; + } while (sibling && sibling.nodeType !== 1); + return sibling; + } +} + +function getEventHost (e) { + // on touchend event, we have to use `e.changedTouches` + // see http://stackoverflow.com/questions/7192563/touchend-event-properties + // see https://github.com/bevacqua/dragula/issues/34 + if (e.targetTouches && e.targetTouches.length) { + return e.targetTouches[0]; + } + if (e.changedTouches && e.changedTouches.length) { + return e.changedTouches[0]; + } + return e; +} + +function getCoord (coord, e) { + var host = getEventHost(e); + var missMap = { + pageX: 'clientX', // IE8 + pageY: 'clientY' // IE8 + }; + if (coord in missMap && !(coord in host) && missMap[coord] in host) { + coord = missMap[coord]; + } + return host[coord]; +} + +module.exports = dragula; + +}).call(this,typeof global !== "undefined" ? global : typeof self !== "undefined" ? self : typeof window !== "undefined" ? window : {}) + +},{"./classes":1,"contra/emitter":4,"crossvent":8}],3:[function(require,module,exports){ +'use strict'; + +var ticky = require('ticky'); + +module.exports = function debounce (fn, args, ctx) { + if (!fn) { return; } + ticky(function run () { + fn.apply(ctx || null, args || []); + }); +}; + +},{"ticky":6}],4:[function(require,module,exports){ +'use strict'; + +var atoa = require('atoa'); +var debounce = require('./debounce'); + +module.exports = function emitter (thing, options) { + var opts = options || {}; + var evt = {}; + if (thing === undefined) { thing = {}; } + thing.on = function (type, fn) { + if (!evt[type]) { + evt[type] = [fn]; + } else { + evt[type].push(fn); + } + return thing; + }; + thing.once = function (type, fn) { + fn._once = true; // thing.off(fn) still works! + thing.on(type, fn); + return thing; + }; + thing.off = function (type, fn) { + var c = arguments.length; + if (c === 1) { + delete evt[type]; + } else if (c === 0) { + evt = {}; + } else { + var et = evt[type]; + if (!et) { return thing; } + et.splice(et.indexOf(fn), 1); + } + return thing; + }; + thing.emit = function () { + var args = atoa(arguments); + return thing.emitterSnapshot(args.shift()).apply(this, args); + }; + thing.emitterSnapshot = function (type) { + var et = (evt[type] || []).slice(0); + return function () { + var args = atoa(arguments); + var ctx = this || thing; + if (type === 'error' && opts.throws !== false && !et.length) { throw args.length === 1 ? args[0] : args; } + et.forEach(function emitter (listen) { + if (opts.async) { debounce(listen, args, ctx); } else { listen.apply(ctx, args); } + if (listen._once) { thing.off(type, listen); } + }); + return thing; + }; + }; + return thing; +}; + +},{"./debounce":3,"atoa":5}],5:[function(require,module,exports){ +module.exports = function atoa (a, n) { return Array.prototype.slice.call(a, n); } + +},{}],6:[function(require,module,exports){ +var si = typeof setImmediate === 'function', tick; +if (si) { + tick = function (fn) { setImmediate(fn); }; +} else { + tick = function (fn) { setTimeout(fn, 0); }; +} + +module.exports = tick; +},{}],7:[function(require,module,exports){ +(function (global){ + +var NativeCustomEvent = global.CustomEvent; + +function useNative () { + try { + var p = new NativeCustomEvent('cat', { detail: { foo: 'bar' } }); + return 'cat' === p.type && 'bar' === p.detail.foo; + } catch (e) { + } + return false; +} + +/** + * Cross-browser `CustomEvent` constructor. + * + * https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent.CustomEvent + * + * @public + */ + +module.exports = useNative() ? NativeCustomEvent : + +// IE >= 9 +'function' === typeof document.createEvent ? function CustomEvent (type, params) { + var e = document.createEvent('CustomEvent'); + if (params) { + e.initCustomEvent(type, params.bubbles, params.cancelable, params.detail); + } else { + e.initCustomEvent(type, false, false, void 0); + } + return e; +} : + +// IE <= 8 +function CustomEvent (type, params) { + var e = document.createEventObject(); + e.type = type; + if (params) { + e.bubbles = Boolean(params.bubbles); + e.cancelable = Boolean(params.cancelable); + e.detail = params.detail; + } else { + e.bubbles = false; + e.cancelable = false; + e.detail = void 0; + } + return e; +} + +}).call(this,typeof global !== "undefined" ? global : typeof self !== "undefined" ? self : typeof window !== "undefined" ? window : {}) + +},{}],8:[function(require,module,exports){ +(function (global){ +'use strict'; + +var customEvent = require('custom-event'); +var eventmap = require('./eventmap'); +var doc = global.document; +var addEvent = addEventEasy; +var removeEvent = removeEventEasy; +var hardCache = []; + +if (!global.addEventListener) { + addEvent = addEventHard; + removeEvent = removeEventHard; +} + +module.exports = { + add: addEvent, + remove: removeEvent, + fabricate: fabricateEvent +}; + +function addEventEasy (el, type, fn, capturing) { + return el.addEventListener(type, fn, capturing); +} + +function addEventHard (el, type, fn) { + return el.attachEvent('on' + type, wrap(el, type, fn)); +} + +function removeEventEasy (el, type, fn, capturing) { + return el.removeEventListener(type, fn, capturing); +} + +function removeEventHard (el, type, fn) { + var listener = unwrap(el, type, fn); + if (listener) { + return el.detachEvent('on' + type, listener); + } +} + +function fabricateEvent (el, type, model) { + var e = eventmap.indexOf(type) === -1 ? makeCustomEvent() : makeClassicEvent(); + if (el.dispatchEvent) { + el.dispatchEvent(e); + } else { + el.fireEvent('on' + type, e); + } + function makeClassicEvent () { + var e; + if (doc.createEvent) { + e = doc.createEvent('Event'); + e.initEvent(type, true, true); + } else if (doc.createEventObject) { + e = doc.createEventObject(); + } + return e; + } + function makeCustomEvent () { + return new customEvent(type, { detail: model }); + } +} + +function wrapperFactory (el, type, fn) { + return function wrapper (originalEvent) { + var e = originalEvent || global.event; + e.target = e.target || e.srcElement; + e.preventDefault = e.preventDefault || function preventDefault () { e.returnValue = false; }; + e.stopPropagation = e.stopPropagation || function stopPropagation () { e.cancelBubble = true; }; + e.which = e.which || e.keyCode; + fn.call(el, e); + }; +} + +function wrap (el, type, fn) { + var wrapper = unwrap(el, type, fn) || wrapperFactory(el, type, fn); + hardCache.push({ + wrapper: wrapper, + element: el, + type: type, + fn: fn + }); + return wrapper; +} + +function unwrap (el, type, fn) { + var i = find(el, type, fn); + if (i) { + var wrapper = hardCache[i].wrapper; + hardCache.splice(i, 1); // free up a tad of memory + return wrapper; + } +} + +function find (el, type, fn) { + var i, item; + for (i = 0; i < hardCache.length; i++) { + item = hardCache[i]; + if (item.element === el && item.type === type && item.fn === fn) { + return i; + } + } +} + +}).call(this,typeof global !== "undefined" ? global : typeof self !== "undefined" ? self : typeof window !== "undefined" ? window : {}) + +},{"./eventmap":9,"custom-event":7}],9:[function(require,module,exports){ +(function (global){ +'use strict'; + +var eventmap = []; +var eventname = ''; +var ron = /^on/; + +for (eventname in global) { + if (ron.test(eventname)) { + eventmap.push(eventname.slice(2)); + } +} + +module.exports = eventmap; + +}).call(this,typeof global !== "undefined" ? global : typeof self !== "undefined" ? self : typeof window !== "undefined" ? window : {}) + +},{}]},{},[2])(2) +});