Commit eb379d95 authored by Thibaut Frain's avatar Thibaut Frain

Added mercury editor gadget (not functionnal)

parent 8d556d5f
This source diff could not be displayed because it is too large. You can view the blob instead.
/*!
* Mercury Editor is a Coffeescript and jQuery based WYSIWYG editor. Documentation and other useful information can be
* found at https://github.com/jejacks0n/mercury
*
* Copyright (c) 2011 Jeremy Jackson
*
* Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated
* documentation files (the "Software"), to deal in the Software without restriction, including without limitation the
* rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit
* persons to whom the Software is furnished to do so, subject to the following conditions:
*
* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the
* Software.
*
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE
* WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
* COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR
* OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
*
*/
/*!
* This file is a derivative of the Twitter Bootstrap CSS. It only includes the form and button css.
*
* Bootstrap v2.0.4
*
* Copyright 2012 Twitter, Inc
* Licensed under the Apache License v2.0
* http://www.apache.org/licenses/LICENSE-2.0
*
* Designed and built with all the love in the world @twitter by @mdo and @fat.
*/
fieldset {
padding: 0;
margin: 0;
border: 0;
}
legend {
display: block;
width: 100%;
padding: 0;
margin-bottom: 27px;
font-size: 19.5px;
line-height: 36px;
color: #333333;
border: 0;
border-bottom: 1px solid #e5e5e5;
}
legend small {
font-size: 13.5px;
color: #999999;
}
label,
input,
button,
select,
textarea {
font-size: 13px;
font-weight: normal;
line-height: 18px;
}
input,
button,
select,
textarea {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
label {
display: block;
margin-bottom: 5px;
}
select,
textarea,
input[type="text"],
input[type="password"],
input[type="datetime"],
input[type="datetime-local"],
input[type="date"],
input[type="month"],
input[type="time"],
input[type="week"],
input[type="number"],
input[type="email"],
input[type="url"],
input[type="search"],
input[type="tel"],
input[type="color"],
.uneditable-input {
display: inline-block;
/*height: 18px;*/
padding: 4px;
margin-bottom: 9px;
font-size: 13px;
/*line-height: 18px;*/
color: #555555;
}
input,
textarea {
width: 210px;
}
textarea {
height: auto;
}
textarea,
input[type="text"],
input[type="password"],
input[type="datetime"],
input[type="datetime-local"],
input[type="date"],
input[type="month"],
input[type="time"],
input[type="week"],
input[type="number"],
input[type="email"],
input[type="url"],
input[type="search"],
input[type="tel"],
input[type="color"],
.uneditable-input {
background-color: #ffffff;
border: 1px solid #cccccc;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
-moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
-webkit-transition: border linear 0.2s, box-shadow linear 0.2s;
-moz-transition: border linear 0.2s, box-shadow linear 0.2s;
-ms-transition: border linear 0.2s, box-shadow linear 0.2s;
-o-transition: border linear 0.2s, box-shadow linear 0.2s;
transition: border linear 0.2s, box-shadow linear 0.2s;
}
textarea:focus,
input[type="text"]:focus,
input[type="password"]:focus,
input[type="datetime"]:focus,
input[type="datetime-local"]:focus,
input[type="date"]:focus,
input[type="month"]:focus,
input[type="time"]:focus,
input[type="week"]:focus,
input[type="number"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="search"]:focus,
input[type="tel"]:focus,
input[type="color"]:focus,
.uneditable-input:focus {
border-color: rgba(82, 168, 236, 0.8);
outline: 0;
outline: thin dotted \9;
/* IE6-9 */
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
-moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
}
input[type="radio"],
input[type="checkbox"] {
margin: 3px 0;
*margin-top: 0;
/* IE7 */
line-height: normal;
cursor: pointer;
}
input[type="submit"],
input[type="reset"],
input[type="button"],
input[type="radio"],
input[type="checkbox"] {
width: auto;
}
.uneditable-textarea {
width: auto;
height: auto;
}
select,
input[type="file"] {
height: 28px;
/* In IE7, the height of the select element cannot be changed by height, only font-size */
*margin-top: 4px;
/* For IE7, add top margin to align select with labels */
line-height: 28px;
}
select {
width: 220px;
border: 1px solid #bbb;
}
select[multiple],
select[size] {
height: auto;
}
select:focus,
input[type="file"]:focus,
input[type="radio"]:focus,
input[type="checkbox"]:focus {
outline: thin dotted #333;
outline: 5px auto -webkit-focus-ring-color;
outline-offset: -2px;
}
.radio,
.checkbox {
min-height: 18px;
padding-left: 18px;
}
.radio input[type="radio"],
.checkbox input[type="checkbox"] {
float: left;
margin-left: -18px;
}
.controls > .radio:first-child,
.controls > .checkbox:first-child {
padding-top: 5px;
}
.radio.inline,
.checkbox.inline {
display: inline-block;
padding-top: 5px;
margin-bottom: 0;
vertical-align: middle;
}
.radio.inline + .radio.inline,
.checkbox.inline + .checkbox.inline {
margin-left: 10px;
}
.input-mini {
width: 60px;
}
.input-small {
width: 90px;
}
.input-medium {
width: 150px;
}
.input-large {
width: 210px;
}
.input-xlarge {
width: 270px;
}
.input-xxlarge {
width: 530px;
}
input[class*="span"],
select[class*="span"],
textarea[class*="span"],
.uneditable-input[class*="span"],
.row-fluid input[class*="span"],
.row-fluid select[class*="span"],
.row-fluid textarea[class*="span"],
.row-fluid .uneditable-input[class*="span"] {
float: none;
margin-left: 0;
}
.input-append input[class*="span"],
.input-append .uneditable-input[class*="span"],
.input-prepend input[class*="span"],
.input-prepend .uneditable-input[class*="span"],
.row-fluid .input-prepend [class*="span"],
.row-fluid .input-append [class*="span"] {
display: inline-block;
}
input,
textarea,
.uneditable-input {
margin-left: 0;
}
input.span12,
textarea.span12,
.uneditable-input.span12 {
width: 930px;
}
input.span11,
textarea.span11,
.uneditable-input.span11 {
width: 850px;
}
input.span10,
textarea.span10,
.uneditable-input.span10 {
width: 770px;
}
input.span9,
textarea.span9,
.uneditable-input.span9 {
width: 690px;
}
input.span8,
textarea.span8,
.uneditable-input.span8 {
width: 610px;
}
input.span7,
textarea.span7,
.uneditable-input.span7 {
width: 530px;
}
input.span6,
textarea.span6,
.uneditable-input.span6 {
width: 450px;
}
input.span5,
textarea.span5,
.uneditable-input.span5 {
width: 370px;
}
input.span4,
textarea.span4,
.uneditable-input.span4 {
width: 290px;
}
input.span3,
textarea.span3,
.uneditable-input.span3 {
width: 210px;
}
input.span2,
textarea.span2,
.uneditable-input.span2 {
width: 130px;
}
input.span1,
textarea.span1,
.uneditable-input.span1 {
width: 50px;
}
input[disabled],
select[disabled],
textarea[disabled],
input[readonly],
select[readonly],
textarea[readonly] {
cursor: not-allowed;
background-color: #eeeeee;
border-color: #ddd;
}
input[type="radio"][disabled],
input[type="checkbox"][disabled],
input[type="radio"][readonly],
input[type="checkbox"][readonly] {
background-color: transparent;
}
.control-group.warning > label,
.control-group.warning .help-block,
.control-group.warning .help-inline {
color: #c09853;
}
.control-group.warning .checkbox,
.control-group.warning .radio,
.control-group.warning input,
.control-group.warning select,
.control-group.warning textarea {
color: #c09853;
border-color: #c09853;
}
.control-group.warning .checkbox:focus,
.control-group.warning .radio:focus,
.control-group.warning input:focus,
.control-group.warning select:focus,
.control-group.warning textarea:focus {
border-color: #a47e3c;
-webkit-box-shadow: 0 0 6px #dbc59e;
-moz-box-shadow: 0 0 6px #dbc59e;
box-shadow: 0 0 6px #dbc59e;
}
.control-group.warning .input-prepend .add-on,
.control-group.warning .input-append .add-on {
color: #c09853;
background-color: #fcf8e3;
border-color: #c09853;
}
.control-group.error > label,
.control-group.error .help-block,
.control-group.error .help-inline {
color: #b94a48;
}
.control-group.error .checkbox,
.control-group.error .radio,
.control-group.error input,
.control-group.error select,
.control-group.error textarea {
color: #b94a48;
border-color: #b94a48;
}
.control-group.error .checkbox:focus,
.control-group.error .radio:focus,
.control-group.error input:focus,
.control-group.error select:focus,
.control-group.error textarea:focus {
border-color: #953b39;
-webkit-box-shadow: 0 0 6px #d59392;
-moz-box-shadow: 0 0 6px #d59392;
box-shadow: 0 0 6px #d59392;
}
.control-group.error .input-prepend .add-on,
.control-group.error .input-append .add-on {
color: #b94a48;
background-color: #f2dede;
border-color: #b94a48;
}
.control-group.success > label,
.control-group.success .help-block,
.control-group.success .help-inline {
color: #468847;
}
.control-group.success .checkbox,
.control-group.success .radio,
.control-group.success input,
.control-group.success select,
.control-group.success textarea {
color: #468847;
border-color: #468847;
}
.control-group.success .checkbox:focus,
.control-group.success .radio:focus,
.control-group.success input:focus,
.control-group.success select:focus,
.control-group.success textarea:focus {
border-color: #356635;
-webkit-box-shadow: 0 0 6px #7aba7b;
-moz-box-shadow: 0 0 6px #7aba7b;
box-shadow: 0 0 6px #7aba7b;
}
.control-group.success .input-prepend .add-on,
.control-group.success .input-append .add-on {
color: #468847;
background-color: #dff0d8;
border-color: #468847;
}
input:focus:required:invalid,
textarea:focus:required:invalid,
select:focus:required:invalid {
color: #b94a48;
border-color: #ee5f5b;
}
input:focus:required:invalid:focus,
textarea:focus:required:invalid:focus,
select:focus:required:invalid:focus {
border-color: #e9322d;
-webkit-box-shadow: 0 0 6px #f8b9b7;
-moz-box-shadow: 0 0 6px #f8b9b7;
box-shadow: 0 0 6px #f8b9b7;
}
.form-actions {
padding: 17px 20px 18px;
margin-top: 18px;
margin-bottom: 18px;
background-color: #f5f5f5;
border-top: 1px solid #e5e5e5;
*zoom: 1;
}
.form-actions:before,
.form-actions:after {
display: table;
content: "";
}
.form-actions:after {
clear: both;
}
.uneditable-input {
overflow: hidden;
white-space: nowrap;
cursor: not-allowed;
background-color: #ffffff;
border-color: #eee;
-webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.025);
-moz-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.025);
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.025);
}
:-moz-placeholder {
color: #999999;
}
:-ms-input-placeholder {
color: #999999;
}
::-webkit-input-placeholder {
color: #999999;
}
.help-block,
.help-inline {
color: #555555;
}
.help-block {
display: block;
margin-bottom: 9px;
}
.help-inline {
display: inline-block;
*display: inline;
padding-left: 5px;
vertical-align: middle;
*zoom: 1;
}
.input-prepend,
.input-append {
margin-bottom: 5px;
}
.input-prepend input,
.input-append input,
.input-prepend select,
.input-append select,
.input-prepend .uneditable-input,
.input-append .uneditable-input {
position: relative;
margin-bottom: 0;
*margin-left: 0;
vertical-align: middle;
-webkit-border-radius: 0 3px 3px 0;
-moz-border-radius: 0 3px 3px 0;
border-radius: 0 3px 3px 0;
}
.input-prepend input:focus,
.input-append input:focus,
.input-prepend select:focus,
.input-append select:focus,
.input-prepend .uneditable-input:focus,
.input-append .uneditable-input:focus {
z-index: 2;
}
.input-prepend .uneditable-input,
.input-append .uneditable-input {
border-left-color: #ccc;
}
.input-prepend .add-on,
.input-append .add-on {
display: inline-block;
width: auto;
height: 18px;
min-width: 16px;
padding: 4px 5px;
font-weight: normal;
line-height: 18px;
text-align: center;
text-shadow: 0 1px 0 #ffffff;
vertical-align: middle;
background-color: #eeeeee;
border: 1px solid #ccc;
}
.input-prepend .add-on,
.input-append .add-on,
.input-prepend .btn,
.input-append .btn {
margin-left: -1px;
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0;
}
.input-prepend .active,
.input-append .active {
background-color: #a9dba9;
border-color: #46a546;
}
.input-prepend .add-on,
.input-prepend .btn {
margin-right: -1px;
}
.input-prepend .add-on:first-child,
.input-prepend .btn:first-child {
-webkit-border-radius: 3px 0 0 3px;
-moz-border-radius: 3px 0 0 3px;
border-radius: 3px 0 0 3px;
}
.input-append input,
.input-append select,
.input-append .uneditable-input {
-webkit-border-radius: 3px 0 0 3px;
-moz-border-radius: 3px 0 0 3px;
border-radius: 3px 0 0 3px;
}
.input-append .uneditable-input {
border-right-color: #ccc;
border-left-color: #eee;
}
.input-append .add-on:last-child,
.input-append .btn:last-child {
-webkit-border-radius: 0 3px 3px 0;
-moz-border-radius: 0 3px 3px 0;
border-radius: 0 3px 3px 0;
}
.input-prepend.input-append input,
.input-prepend.input-append select,
.input-prepend.input-append .uneditable-input {
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0;
}
.input-prepend.input-append .add-on:first-child,
.input-prepend.input-append .btn:first-child {
margin-right: -1px;
-webkit-border-radius: 3px 0 0 3px;
-moz-border-radius: 3px 0 0 3px;
border-radius: 3px 0 0 3px;
}
.input-prepend.input-append .add-on:last-child,
.input-prepend.input-append .btn:last-child {
margin-left: -1px;
-webkit-border-radius: 0 3px 3px 0;
-moz-border-radius: 0 3px 3px 0;
border-radius: 0 3px 3px 0;
}
.search-query {
padding-right: 14px;
padding-right: 4px \9;
padding-left: 14px;
padding-left: 4px \9;
/* IE7-8 doesn't have border-radius, so don't indent the padding */
margin-bottom: 0;
-webkit-border-radius: 14px;
-moz-border-radius: 14px;
border-radius: 14px;
}
.form-search input,
.form-inline input,
.form-horizontal input,
.form-search textarea,
.form-inline textarea,
.form-horizontal textarea,
.form-search select,
.form-inline select,
.form-horizontal select,
.form-search .help-inline,
.form-inline .help-inline,
.form-horizontal .help-inline,
.form-search .uneditable-input,
.form-inline .uneditable-input,
.form-horizontal .uneditable-input,
.form-search .input-prepend,
.form-inline .input-prepend,
.form-horizontal .input-prepend,
.form-search .input-append,
.form-inline .input-append,
.form-horizontal .input-append {
display: inline-block;
*display: inline;
margin-bottom: 0;
*zoom: 1;
}
.form-search .hide,
.form-inline .hide,
.form-horizontal .hide {
display: none;
}
.form-search label,
.form-inline label {
display: inline-block;
}
.form-search .input-append,
.form-inline .input-append,
.form-search .input-prepend,
.form-inline .input-prepend {
margin-bottom: 0;
}
.form-search .radio,
.form-search .checkbox,
.form-inline .radio,
.form-inline .checkbox {
padding-left: 0;
margin-bottom: 0;
vertical-align: middle;
}
.form-search .radio input[type="radio"],
.form-search .checkbox input[type="checkbox"],
.form-inline .radio input[type="radio"],
.form-inline .checkbox input[type="checkbox"] {
float: left;
margin-right: 3px;
margin-left: 0;
}
.control-group {
margin-bottom: 9px;
}
legend + .control-group {
margin-top: 18px;
-webkit-margin-top-collapse: separate;
}
.form-horizontal .control-group {
margin-bottom: 18px;
*zoom: 1;
}
.form-horizontal .control-group:before,
.form-horizontal .control-group:after {
display: table;
content: "";
}
.form-horizontal .control-group:after {
clear: both;
}
.form-horizontal .control-label {
float: left;
width: 140px;
padding-top: 5px;
text-align: right;
}
.form-horizontal .controls {
*display: inline-block;
*padding-left: 20px;
margin-left: 160px;
*margin-left: 0;
}
.form-horizontal .controls:first-child {
*padding-left: 160px;
}
.form-horizontal .help-block {
margin-top: 9px;
margin-bottom: 0;
}
.form-horizontal .form-actions {
padding-left: 160px;
}
.btn {
display: inline-block;
*display: inline;
padding: 4px 10px 4px;
margin-bottom: 0;
*margin-left: .3em;
font-size: 13px;
line-height: 18px;
*line-height: 20px;
color: #333333;
text-align: center;
text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
vertical-align: middle;
cursor: pointer;
background-color: #f5f5f5;
*background-color: #e6e6e6;
background-image: -ms-linear-gradient(top, #ffffff, #e6e6e6);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), to(#e6e6e6));
background-image: -webkit-linear-gradient(top, #ffffff, #e6e6e6);
background-image: -o-linear-gradient(top, #ffffff, #e6e6e6);
background-image: linear-gradient(top, #ffffff, #e6e6e6);
background-image: -moz-linear-gradient(top, #ffffff, #e6e6e6);
background-repeat: repeat-x;
border: 1px solid #cccccc;
*border: 0;
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
border-color: #e6e6e6 #e6e6e6 #bfbfbf;
border-bottom-color: #b3b3b3;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
filter: progid:dximagetransform.microsoft.gradient(startColorstr='#ffffff', endColorstr='#e6e6e6', GradientType=0);
filter: progid:dximagetransform.microsoft.gradient(enabled=false);
*zoom: 1;
-webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
-moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
}
.btn:hover,
.btn:active,
.btn.active,
.btn.disabled,
.btn[disabled] {
background-color: #e6e6e6;
*background-color: #d9d9d9;
}
.btn:active,
.btn.active {
background-color: #cccccc \9;
}
.btn:first-child {
*margin-left: 0;
}
.btn:hover {
color: #333333;
text-decoration: none;
background-color: #e6e6e6;
*background-color: #d9d9d9;
/* Buttons in IE7 don't get borders, so darken on hover */
background-position: 0 -15px;
-webkit-transition: background-position 0.1s linear;
-moz-transition: background-position 0.1s linear;
-ms-transition: background-position 0.1s linear;
-o-transition: background-position 0.1s linear;
transition: background-position 0.1s linear;
}
.btn:focus {
outline: thin dotted #333;
outline: 5px auto -webkit-focus-ring-color;
outline-offset: -2px;
}
.btn.active,
.btn:active {
background-color: #e6e6e6;
background-color: #d9d9d9 \9;
background-image: none;
outline: 0;
-webkit-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
-moz-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
}
.btn.disabled,
.btn[disabled] {
cursor: default;
background-color: #e6e6e6;
background-image: none;
opacity: 0.65;
filter: alpha(opacity=65);
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
}
.btn-large {
padding: 9px 14px;
font-size: 15px;
line-height: normal;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
.btn-large [class^="icon-"] {
margin-top: 1px;
}
.btn-small {
padding: 5px 9px;
font-size: 11px;
line-height: 16px;
}
.btn-small [class^="icon-"] {
margin-top: -1px;
}
.btn-mini {
padding: 2px 6px;
font-size: 11px;
line-height: 14px;
}
.btn-primary,
.btn-primary:hover,
.btn-warning,
.btn-warning:hover,
.btn-danger,
.btn-danger:hover,
.btn-success,
.btn-success:hover,
.btn-info,
.btn-info:hover,
.btn-inverse,
.btn-inverse:hover {
color: #ffffff;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
}
.btn-primary.active,
.btn-warning.active,
.btn-danger.active,
.btn-success.active,
.btn-info.active,
.btn-inverse.active {
color: rgba(255, 255, 255, 0.75);
}
.btn {
border-color: #ccc;
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
}
.btn-primary {
background-color: #0074cc;
*background-color: #0055cc;
background-image: -ms-linear-gradient(top, #0088cc, #0055cc);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#0088cc), to(#0055cc));
background-image: -webkit-linear-gradient(top, #0088cc, #0055cc);
background-image: -o-linear-gradient(top, #0088cc, #0055cc);
background-image: -moz-linear-gradient(top, #0088cc, #0055cc);
background-image: linear-gradient(top, #0088cc, #0055cc);
background-repeat: repeat-x;
border-color: #0055cc #0055cc #003580;
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
filter: progid:dximagetransform.microsoft.gradient(startColorstr='#0088cc', endColorstr='#0055cc', GradientType=0);
filter: progid:dximagetransform.microsoft.gradient(enabled=false);
}
.btn-primary:hover,
.btn-primary:active,
.btn-primary.active,
.btn-primary.disabled,
.btn-primary[disabled] {
background-color: #0055cc;
*background-color: #004ab3;
}
.btn-primary:active,
.btn-primary.active {
background-color: #004099 \9;
}
.btn-warning {
background-color: #faa732;
*background-color: #f89406;
background-image: -ms-linear-gradient(top, #fbb450, #f89406);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#fbb450), to(#f89406));
background-image: -webkit-linear-gradient(top, #fbb450, #f89406);
background-image: -o-linear-gradient(top, #fbb450, #f89406);
background-image: -moz-linear-gradient(top, #fbb450, #f89406);
background-image: linear-gradient(top, #fbb450, #f89406);
background-repeat: repeat-x;
border-color: #f89406 #f89406 #ad6704;
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
filter: progid:dximagetransform.microsoft.gradient(startColorstr='#fbb450', endColorstr='#f89406', GradientType=0);
filter: progid:dximagetransform.microsoft.gradient(enabled=false);
}
.btn-warning:hover,
.btn-warning:active,
.btn-warning.active,
.btn-warning.disabled,
.btn-warning[disabled] {
background-color: #f89406;
*background-color: #df8505;
}
.btn-warning:active,
.btn-warning.active {
background-color: #c67605 \9;
}
.btn-danger {
background-color: #da4f49;
*background-color: #bd362f;
background-image: -ms-linear-gradient(top, #ee5f5b, #bd362f);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ee5f5b), to(#bd362f));
background-image: -webkit-linear-gradient(top, #ee5f5b, #bd362f);
background-image: -o-linear-gradient(top, #ee5f5b, #bd362f);
background-image: -moz-linear-gradient(top, #ee5f5b, #bd362f);
background-image: linear-gradient(top, #ee5f5b, #bd362f);
background-repeat: repeat-x;
border-color: #bd362f #bd362f #802420;
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
filter: progid:dximagetransform.microsoft.gradient(startColorstr='#ee5f5b', endColorstr='#bd362f', GradientType=0);
filter: progid:dximagetransform.microsoft.gradient(enabled=false);
}
.btn-danger:hover,
.btn-danger:active,
.btn-danger.active,
.btn-danger.disabled,
.btn-danger[disabled] {
background-color: #bd362f;
*background-color: #a9302a;
}
.btn-danger:active,
.btn-danger.active {
background-color: #942a25 \9;
}
.btn-success {
background-color: #5bb75b;
*background-color: #51a351;
background-image: -ms-linear-gradient(top, #62c462, #51a351);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#62c462), to(#51a351));
background-image: -webkit-linear-gradient(top, #62c462, #51a351);
background-image: -o-linear-gradient(top, #62c462, #51a351);
background-image: -moz-linear-gradient(top, #62c462, #51a351);
background-image: linear-gradient(top, #62c462, #51a351);
background-repeat: repeat-x;
border-color: #51a351 #51a351 #387038;
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
filter: progid:dximagetransform.microsoft.gradient(startColorstr='#62c462', endColorstr='#51a351', GradientType=0);
filter: progid:dximagetransform.microsoft.gradient(enabled=false);
}
.btn-success:hover,
.btn-success:active,
.btn-success.active,
.btn-success.disabled,
.btn-success[disabled] {
background-color: #51a351;
*background-color: #499249;
}
.btn-success:active,
.btn-success.active {
background-color: #408140 \9;
}
.btn-info {
background-color: #49afcd;
*background-color: #2f96b4;
background-image: -ms-linear-gradient(top, #5bc0de, #2f96b4);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#5bc0de), to(#2f96b4));
background-image: -webkit-linear-gradient(top, #5bc0de, #2f96b4);
background-image: -o-linear-gradient(top, #5bc0de, #2f96b4);
background-image: -moz-linear-gradient(top, #5bc0de, #2f96b4);
background-image: linear-gradient(top, #5bc0de, #2f96b4);
background-repeat: repeat-x;
border-color: #2f96b4 #2f96b4 #1f6377;
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
filter: progid:dximagetransform.microsoft.gradient(startColorstr='#5bc0de', endColorstr='#2f96b4', GradientType=0);
filter: progid:dximagetransform.microsoft.gradient(enabled=false);
}
.btn-info:hover,
.btn-info:active,
.btn-info.active,
.btn-info.disabled,
.btn-info[disabled] {
background-color: #2f96b4;
*background-color: #2a85a0;
}
.btn-info:active,
.btn-info.active {
background-color: #24748c \9;
}
.btn-inverse {
background-color: #414141;
*background-color: #222222;
background-image: -ms-linear-gradient(top, #555555, #222222);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#555555), to(#222222));
background-image: -webkit-linear-gradient(top, #555555, #222222);
background-image: -o-linear-gradient(top, #555555, #222222);
background-image: -moz-linear-gradient(top, #555555, #222222);
background-image: linear-gradient(top, #555555, #222222);
background-repeat: repeat-x;
border-color: #222222 #222222 #000000;
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
filter: progid:dximagetransform.microsoft.gradient(startColorstr='#555555', endColorstr='#222222', GradientType=0);
filter: progid:dximagetransform.microsoft.gradient(enabled=false);
}
.btn-inverse:hover,
.btn-inverse:active,
.btn-inverse.active,
.btn-inverse.disabled,
.btn-inverse[disabled] {
background-color: #222222;
*background-color: #151515;
}
.btn-inverse:active,
.btn-inverse.active {
background-color: #080808 \9;
}
button.btn,
input[type="submit"].btn {
*padding-top: 2px;
*padding-bottom: 2px;
}
button.btn::-moz-focus-inner,
input[type="submit"].btn::-moz-focus-inner {
padding: 0;
border: 0;
}
button.btn.btn-large,
input[type="submit"].btn.btn-large {
*padding-top: 7px;
*padding-bottom: 7px;
}
button.btn.btn-small,
input[type="submit"].btn.btn-small {
*padding-top: 3px;
*padding-bottom: 3px;
}
button.btn.btn-mini,
input[type="submit"].btn.btn-mini {
*padding-top: 1px;
*padding-bottom: 1px;
}
.btn-group {
position: relative;
*margin-left: .3em;
*zoom: 1;
}
.btn-group:before,
.btn-group:after {
display: table;
content: "";
}
.btn-group:after {
clear: both;
}
.btn-group:first-child {
*margin-left: 0;
}
.btn-group + .btn-group {
margin-left: 5px;
}
.btn-toolbar {
margin-top: 9px;
margin-bottom: 9px;
}
.btn-toolbar .btn-group {
display: inline-block;
*display: inline;
/* IE7 inline-block hack */
*zoom: 1;
}
.btn-group > .btn {
position: relative;
float: left;
margin-left: -1px;
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0;
}
.btn-group > .btn:first-child {
margin-left: 0;
-webkit-border-bottom-left-radius: 4px;
border-bottom-left-radius: 4px;
-webkit-border-top-left-radius: 4px;
border-top-left-radius: 4px;
-moz-border-radius-bottomleft: 4px;
-moz-border-radius-topleft: 4px;
}
.btn-group > .btn:last-child,
.btn-group > .dropdown-toggle {
-webkit-border-top-right-radius: 4px;
border-top-right-radius: 4px;
-webkit-border-bottom-right-radius: 4px;
border-bottom-right-radius: 4px;
-moz-border-radius-topright: 4px;
-moz-border-radius-bottomright: 4px;
}
.btn-group > .btn.large:first-child {
margin-left: 0;
-webkit-border-bottom-left-radius: 6px;
border-bottom-left-radius: 6px;
-webkit-border-top-left-radius: 6px;
border-top-left-radius: 6px;
-moz-border-radius-bottomleft: 6px;
-moz-border-radius-topleft: 6px;
}
.btn-group > .btn.large:last-child,
.btn-group > .large.dropdown-toggle {
-webkit-border-top-right-radius: 6px;
border-top-right-radius: 6px;
-webkit-border-bottom-right-radius: 6px;
border-bottom-right-radius: 6px;
-moz-border-radius-topright: 6px;
-moz-border-radius-bottomright: 6px;
}
.btn-group > .btn:hover,
.btn-group > .btn:focus,
.btn-group > .btn:active,
.btn-group > .btn.active {
z-index: 2;
}
.btn-group .dropdown-toggle:active,
.btn-group.open .dropdown-toggle {
outline: 0;
}
.btn-group > .dropdown-toggle {
*padding-top: 4px;
padding-right: 8px;
*padding-bottom: 4px;
padding-left: 8px;
-webkit-box-shadow: inset 1px 0 0 rgba(255, 255, 255, 0.125), inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
-moz-box-shadow: inset 1px 0 0 rgba(255, 255, 255, 0.125), inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
box-shadow: inset 1px 0 0 rgba(255, 255, 255, 0.125), inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
}
.btn-group > .btn-mini.dropdown-toggle {
padding-right: 5px;
padding-left: 5px;
}
.btn-group > .btn-small.dropdown-toggle {
*padding-top: 4px;
*padding-bottom: 4px;
}
.btn-group > .btn-large.dropdown-toggle {
padding-right: 12px;
padding-left: 12px;
}
.btn-group.open .dropdown-toggle {
background-image: none;
-webkit-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
-moz-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
}
.btn-group.open .btn.dropdown-toggle {
background-color: #e6e6e6;
}
.btn-group.open .btn-primary.dropdown-toggle {
background-color: #0055cc;
}
.btn-group.open .btn-warning.dropdown-toggle {
background-color: #f89406;
}
.btn-group.open .btn-danger.dropdown-toggle {
background-color: #bd362f;
}
.btn-group.open .btn-success.dropdown-toggle {
background-color: #51a351;
}
.btn-group.open .btn-info.dropdown-toggle {
background-color: #2f96b4;
}
.btn-group.open .btn-inverse.dropdown-toggle {
background-color: #222222;
}
.btn .caret {
margin-top: 7px;
margin-left: 0;
}
.btn:hover .caret,
.open.btn-group .caret {
opacity: 1;
filter: alpha(opacity=100);
}
.btn-mini .caret {
margin-top: 5px;
}
.btn-small .caret {
margin-top: 6px;
}
.btn-large .caret {
margin-top: 6px;
border-top-width: 5px;
border-right-width: 5px;
border-left-width: 5px;
}
.dropup .btn-large .caret {
border-top: 0;
border-bottom: 5px solid #000000;
}
.btn-primary .caret,
.btn-warning .caret,
.btn-danger .caret,
.btn-info .caret,
.btn-success .caret,
.btn-inverse .caret {
border-top-color: #ffffff;
border-bottom-color: #ffffff;
opacity: 0.75;
filter: alpha(opacity=75);
}
/*
*/
/*
* General Layout
*---------------------------------------------------------------------------*/
/* Disable text sizing in webkit (ipad/iphone etc -- should apply to mercury only) */
html {
-webkit-text-size-adjust: none;
}
html, body {
-webkit-transition: -webkit-transform 3s;
margin: 0;
padding: 0;
}
.mercury-iframe {
position: absolute;
top: 0;
width: 100%;
visibility: hidden;
}
.mercury-focusable {
position: absolute;
opacity: 0;
}
.filter {
margin: 0;
padding: 0;
}
/*
* Bootsrap Overrides (overrides what's in bootstrap-ish)
*---------------------------------------------------------------------------*/
.btn-group > .btn {
margin-right: 0;
}
form {
margin-bottom: 0;
}
fieldset {
margin-bottom: 15px;
background: #F6F6F6;
border: 1px solid #CCC;
border-radius: 7px;
padding: 10px;
}
legend {
display: block;
position: relative;
margin-left: 10px;
margin-bottom: 0;
font-weight: bold;
width: auto;
padding: 0;
font-size: 12px;
color: #333333;
border: 0;
line-height: 1px;
}
select {
width: auto;
}
.form-actions {
margin-top: 0;
margin-bottom: 0;
background-color: transparent;
}
.control-group {
margin-bottom: 0;
}
legend + .control-group {
margin-top: 0;
-webkit-margin-top-collapse: separate;
}
.form-horizontal .control-group {
margin-bottom: 0;
}
.form-horizontal .controls {
margin-left: 150px;
}
.form-horizontal hr {
margin-left: 150px;
border: 0;
border-top: 1px solid #ccc;
}
label input[type=radio] {
margin-right: 5px;
}
.form-actions {
padding-bottom: 0;
}
/*
* Dialogs
*----------------------------------------------------------------------------*/
.mercury-dialog,
.mercury-select,
.mercury-palette {
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
position: absolute;
z-index: 10012;
width: 30px;
height: 30px;
border: 1px solid #727272;
border-radius: 2px;
-moz-border-radius: 2px;
margin-top: -1px;
background-color: #FFFFFF;
box-shadow: 1px 1px 4px rgba(0,0,0, .5);
-moz-box-shadow: 1px 1px 4px rgba(0,0,0, .5);
font-family: Helvetica, Tahoma, Arial, sans-serif;
font-size: 8.5pt;
color: #333;
}
.mercury-dialog.loading,
.mercury-select.loading,
.mercury-palette.loading {
background-repeat: no-repeat;
background-position: center;
}
/*
* Selects
*----------------------------------------------------------------------------*/
.mercury-select {
border-radius: 4px;
-moz-border-radius: 4px;
overflow: auto;
background-color: #FFF;
}
/*
* Panels
*----------------------------------------------------------------------------*/
.mercury-panel {
position: fixed;
z-index: 10011;
background-color: #f5f5f5;
opacity: .9;
box-shadow: 1px 1px 4px rgba(0,0,0, .5);
-moz-box-shadow: 1px 1px 4px rgba(0,0,0, .5);
border-radius: 6px;
-moz-border-radius: 6px;
color: #333;
font-family: Helvetica, Tahoma, Arial, sans-serif;
font-size: 9.5pt;
max-width: 500px;
}
.mercury-panel.loading {
background-repeat: no-repeat;
background-position: center;
}
.mercury-panel h1,
.mercury-panel h3 {
font-size: 9pt;
padding: 10px 15px 8px;
margin: 0;
background: #333;
white-space: nowrap;
line-height: normal;
}
.mercury-panel h1 {
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
-moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
-webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
-moz-border-radius-topleft: 4px;
-moz-border-radius-topright: 4px;
border-top-left-radius: 4px;
border-top-right-radius: 4px;
color: #f5f5f5;
font-size: 10pt;
text-shadow: 1px 1px 2px rgba(0,0,0, .9);
border-bottom: 1px solid #222;
height: 15px;
cursor: move;
}
.mercury-panel h1 span {
display: block;
width: 100%;
}
.mercury-panel h1 a.mercury-panel-close {
position: absolute;
right: -5px;
top: -4px;
width: 42px;
height: 42px;
cursor: default;
background-repeat: no-repeat;
background-position: center;
}
.mercury-panel h4,
.mercury-panel h5,
.mercury-panel h6 {
margin: 0;
}
.mercury-panel .mercury-panel-pane {
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
padding: 15px;
overflow-y: auto;
overflow-x: hidden;
width: 100%;
}
.mercury-panel .mercury-panel-pane h3 {
margin: 10px -15px;
font-size: 9.5pt;
font-weight: normal;
padding: 8px 14px;
}
/*
* Specific Dialogs (eg. color palettes, selects)
*----------------------------------------------------------------------------*/
.mercury-color-picker {
width: 170px;
height: auto;
padding: 1px;
cursor: default;
}
.mercury-color-picker .picker {
float: left;
width: 15px;
height: 15px;
margin: 1px;
}
.mercury-color-picker .picker:hover {
outline: 1px solid #333;
}
.mercury-color-picker .last-picked {
position: relative;
top: 1px;
width: 166px;
border: 1px solid #333;
border-radius: 2px;
margin: 1px 1px 2px 1px;
-moz-border-radius: 2px;
clear: left;
text-align: center;
}
.mercury-select-options {
margin: 10px 0;
white-space: nowrap;
}
.mercury-select-options * {
cursor: default;
padding: 0 10px;
margin: 0;
line-height: 1.6em;
}
.mercury-select-options div:hover,
.mercury-select-options h1:hover,
.mercury-select-options h2:hover,
.mercury-select-options h3:hover,
.mercury-select-options h4:hover,
.mercury-select-options h5:hover,
.mercury-select-options h6:hover,
.mercury-select-options pre:hover {
background-color: #E2E1E2 !important;
color: #000 !important;
}
.mercury-select-options div[data-tag=pre] {
font-family: monospace;
}
/*
* Specific Panels (eg. snippets, notes, todos)
*----------------------------------------------------------------------------*/
.mercury-snippet-panel {
width: 300px;
}
.mercury-snippet-panel input.filter {
outline: none;
font-size: 1em;
border-radius: 30px;
moz-border-radius: 30px;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
width: 100%;
height: auto;
padding-left: 20px;
background-color: #FFF;
background-repeat: no-repeat;
}
.mercury-snippet-panel ul {
font-size: .9em;
padding: 10px 0 0 0;
margin: 0;
list-style-type: none;
}
.mercury-snippet-panel ul li {
clear: both;
padding-top: 20px;
}
.mercury-snippet-panel ul li img {
float: left;
cursor: move;
}
.mercury-snippet-panel ul li h4,
.mercury-snippet-panel ul li .description {
float: right;
width: 245px;
}
.mercury-snippet-panel ul li h4 {
margin-bottom: 5px;
}
/* history / notes */
.mercury-history-panel,
.mercury-notes-panel {
width: 250px;
}
/*
* Lightview
*----------------------------------------------------------------------------*/
.mercury-lightview-overlay {
position: fixed;
z-index: 10030;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
display: none;
background: rgba(255, 255, 255, .8);
}
.mercury-lightview {
position: fixed;
z-index: 10040;
top: 20px;
background: rgba(239, 239, 239, .7);
opacity: 0;
overflow: hidden;
display: none;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
-moz-box-shadow: 0 0 40px rgba(0, 0, 0, .9);
box-shadow: 0 0 40px rgba(0, 0, 0, .9);
font: normal normal normal 12px/normal Helvetica, Tahoma, Arial, sans-serif;
-moz-box-sizing: border-box;
box-sizing: border-box;
color: #000;
}
.mercury-lightview.loading {
background-repeat: no-repeat;
background-position: center;
}
.mercury-lightview .mercury-lightview-content {
padding: 10px 20px 20px;
}
.mercury-lightview h1.mercury-lightview-title {
margin: 0;
padding: 10px 20px 8px;
border-bottom: 1px solid #CCC;
color: #000;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
font-size: 10pt;
white-space: nowrap;
text-shadow: 1px 1px 2px rgba(100, 100, 100, .5);
}
.mercury-lightview h1.mercury-lightview-title a.mercury-lightview-close {
float: right;
width: 32px;
height: 42px;
margin: -14px -20px;
background-repeat: no-repeat;
background-position: center;
}
.mercury-lightview .mercury-display-pane-container {
overflow: auto;
margin: -10px -20px 0;
padding: 20px 20px 10px;
}
.mercury-lightview .mercury-display-pane-container .mercury-display-pane {
float: left;
}
.mercury-lightview .mercury-display-controls {
padding: 15px 0 0;
border-top: 1px solid #333;
text-align: right;
}
/*
* Specific Lightviews
*----------------------------------------------------------------------------*/
/* about mercury */
#mercury_about {
width: 300px;
min-height: 100px;
font-size: 1.1em;
background-repeat: no-repeat;
}
#mercury_about ul {
float: left;
list-style: none;
padding: 0;
margin: 118px 0 0 0;
width: 120px;
text-align: center;
}
#mercury_about p {
margin: 0;
float: right;
width: 175px;
}
#mercury_about a {
color: #09F;
}
#mercury_about a:hover {
color: #333;
}
/*
* Modal
*----------------------------------------------------------------------------*/
.mercury-modal-overlay {
position: fixed;
z-index: 10040;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
display: none;
background: rgba(255, 255, 255, .8);
}
.mercury-modal {
position: fixed;
z-index: 10050;
top: 0;
width: 500px;
overflow: hidden;
padding: 0 0 10px;
background: #EFEFEF;
-webkit-border-bottom-left-radius: 4px;
-webkit-border-bottom-right-radius: 4px;
-moz-border-radius-bottomleft: 4px;
-moz-border-radius-bottomright: 4px;
border-bottom-left-radius: 4px;
border-bottom-right-radius: 4px;
-moz-box-shadow: 0 0 40px rgba(0, 0, 0, .9);
box-shadow: 0 0 40px rgba(0, 0, 0, .9);
font: normal normal normal 12px/normal Helvetica, Tahoma, Arial, sans-serif;
}
.mercury-modal.loading .mercury-modal-content-container {
background-color: #EFEFEF;
background-repeat: no-repeat;
background-position: center;
}
.mercury-modal h1.mercury-modal-title {
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
margin: 0;
padding: 2px 10px 0 10px;
background: #DDD;
border-bottom: 1px solid #CCC;
white-space: nowrap;
font-size: 14px;
line-height: 23px;
overflow: hidden;
}
.mercury-modal h1.mercury-modal-title:after {
content: '\00a0';
display: block;
visibility: hidden;
clear: both;
height: 0;
}
.mercury-modal h1.mercury-modal-title span {
float: left;
color: #000;
text-shadow: #EEE 1px 1px 0;
}
.mercury-modal h1.mercury-modal-title a {
display: block;
float: right;
font-size: 10px;
cursor: pointer;
color: #666;
padding: 0 4px;
line-height: 23px;
}
.mercury-modal h1.mercury-modal-title a:hover {
color: #333;
}
.mercury-modal .mercury-modal-content-container {
float: left;
width: 100%;
}
.mercury-modal .mercury-modal-content {
position: relative;
overflow: auto;
float: left;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
padding: 20px 20px 10px;
font-family: Helvetica, Tahoma, Arial, sans-serif;
color: #000;
}
.mercury-modal .mercury-modal-content:after {
display: block;
clear: both;
content: '\00a0';
visibility: hidden;
overflow: hidden;
height: 0;
}
.mercury-modal .mercury-display-pane-container {
overflow: auto;
margin: -20px -20px 0;
padding: 20px 20px 0;
}
.mercury-modal .mercury-display-pane-container .mercury-display-pane {
float: left;
}
.mercury-modal .mercury-display-controls {
padding-right: 0;
border-top: 1px solid #CCC;
text-align: right;
}
/*
* Specific Modals (eg. htmlEditor)
*----------------------------------------------------------------------------*/
/* html editor */
#mercury_html_editor textarea {
resize: none;
padding: 0;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
margin: 0 0 -2px 0;
border: 2px solid #CCC;
width: 100%;
}
/* character */
#mercury_character .character {
float: left;
width: 20px;
height: 20px;
border: 1px solid #999;
background: #FFF;
margin: 0 2px 2px 0;
text-align: center;
font-size: 11pt;
line-height: 23px;
cursor: pointer;
}
#mercury_character .character:hover {
position: relative;
margin: -11px -5px 1px -5px;
width: 32px;
height: 32px;
font-size: 19pt;
line-height: 35px;
background: #DDD;
}
/* table */
#mercury_table #table_display {
float: left;
margin-right: 13px;
overflow: auto;
padding: 0;
}
#mercury_table #table_display .controls {
margin: 0;
width: 225px;
height: 259px;
padding: 10px;
}
#mercury_table #table_display table {
width: 100%;
height: 100%;
}
#mercury_table #table_display .selected {
background: #09F;
}
/*
* Statusbar
*----------------------------------------------------------------------------*/
.mercury-statusbar {
position: fixed;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
z-index: 10020;
bottom: 0;
left: 0;
width: 100%;
height: 23px;
cursor: default;
padding: 0 10px;
background: #E2E1E2;
border-top: 1px solid #727272;
font-family: Helvetica, Tahoma, Arial, sans-serif;
font-size: 8.5pt;
line-height: 23px;
color: #222;
}
.mercury-statusbar .mercury-statusbar-about {
display: block;
float: right;
color: #333;
text-shadow: #EEE 0 1px 0;
text-decoration: none;
}
/*
* Toolbar
*----------------------------------------------------------------------------*/
.mercury-toolbar-container {
user-select: none;
position: fixed;
z-index: 10010;
top: 0;
left: 0;
width: 100%;
border-bottom: 1px solid #E2E1E2;
}
.mercury-toolbar {
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
background: #DDD;
background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, rgb(198,198,198)), color-stop(1, rgb(226,225,226)));
background-image: -moz-linear-gradient(center bottom, rgb(198,198,198) 0%, rgb(226,225,226) 100%);
border-bottom: 1px solid #727272;
cursor: default;
}
.mercury-toolbar-button-container {
float: left;
}
.mercury-toolbar-expander {
position: absolute;
display: none;
right: 0;
border-left: 1px solid #727272;
}
.mercury-button,
.mercury-button-group,
.mercury-separator,
.mercury-line-separator {
display: block;
float: left;
}
.mercury-separator,
.mercury-line-separator {
width: 1px;
border: 0;
margin: 0;
}
.mercury-line-separator {
width: 1px;
background: #727272;
}
.mercury-button {
cursor: pointer;
}
.mercury-button em {
display: block;
font-style: normal;
}
.mercury-expander {
padding: 5px 0;
border-radius: 4px;
-moz-border-radius: 4px;
}
.mercury-expander .mercury-expander-button {
cursor: default;
white-space: nowrap;
padding: 0 20px 0 10px;
}
.mercury-expander .mercury-expander-button:hover {
background: #CCC;
}
.mercury-expander .mercury-expander-button em {
display: inline-block;
float: left;
width: 20px;
height: 20px;
margin-right: 10px;
-webkit-background-size: 100% 100%;
-moz-background-size: 100% 100%;
background-size: 100% 100%;
}
.mercury-expander .mercury-expander-button span {
display: inline-block;
line-height: 20px;
}
.disabled .mercury-button,
.mercury-button.disabled {
opacity: 0.33;
}
/*
* Toolbar: Primary Toolbar
*----------------------------------------------------------------------------*/
.mercury-primary-toolbar {
position: relative;
height: 58px;
overflow: hidden;
text-shadow: #EEE 0 1px 0;
}
.mercury-primary-toolbar .mercury-button {
display: inline-block;
height: 58px;
margin-bottom: 20px;
min-width: 55px;
text-align: center;
white-space: nowrap;
text-decoration: none;
font-family: Helvetica, Tahoma, Arial, sans-serif;
}
.mercury-primary-toolbar .mercury-button.pressed {
background-repeat: no-repeat;
}
.mercury-primary-toolbar .mercury-button em {
margin: 0 -5px;
height: 15px;
padding-top: 41px;
background-repeat: no-repeat;
background-position: 50% 7px;
font-size: 8.5pt;
line-height: 15px;
color: #222;
}
.mercury-primary-toolbar .mercury-button.active em {
background-position: 51% 8px;
}
.mercury-primary-toolbar .mercury-separator,
.mercury-primary-toolbar .mercury-line-separator {
display: inline-block;
width: 1px;
height: 50px;
margin: 5px 20px 28px;
}
.mercury-primary-toolbar .mercury-toolbar-button-container {
white-space: nowrap;
padding-right: 10px;
}
.mercury-primary-toolbar .mercury-toolbar-expander {
width: 12px;
height: 58px;
background-color: rgba(0, 0, 0, .2);
background-repeat: no-repeat;
}
/*
* Toolbar: Editable Region Toolbar
*----------------------------------------------------------------------------*/
.mercury-editable-toolbar {
padding: 3px 13px 1px 10px;
border-top: 1px solid #E2E1E2;
background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, rgb(198,198,198)), color-stop(1, rgb(210,210,209)));
background-image: -moz-linear-gradient(center bottom, rgb(198,198,198) 0%, rgb(210,210,209) 100%);
}
.mercury-editable-toolbar:after {
content: '\00a0';
display: block;
visibility: hidden;
clear: both;
height: 0;
}
.mercury-editable-toolbar .mercury-separator,
.mercury-editable-toolbar .mercury-line-separator {
height: 18px;
padding: 0;
margin: 0 7px 2px;
}
.mercury-editable-toolbar .mercury-separator {
margin: 0 3px 2px;
}
.mercury-editable-toolbar .mercury-button-group {
white-space: nowrap;
}
.mercury-editable-toolbar .mercury-button-group .mercury-button:first-child {
width: 23px;
}
.mercury-editable-toolbar .mercury-button {
width: 22px;
height: 18px;
margin: 0 0 2px;
}
.mercury-editable-toolbar .mercury-button em {
display: none;
}
.mercury-editable-toolbar .mercury-button-palette {
width: 23px;
background-position: 0 -36px;
}
.mercury-editable-toolbar .mercury-button-select {
width: auto !important;
overflow: hidden;
padding-left: 6px;
background-position: -24px -36px;
}
.mercury-editable-toolbar .mercury-button-select em {
display: block;
padding-right: 15px;
background-position: right -36px;
cursor: pointer;
white-space: nowrap;
font-style: normal;
font-family: Helvetica, Tahoma, Arial, sans-serif;
font-size: 8.5pt;
line-height: 19px;
color: #222;
}
/* default buttons */
.mercury-editable-toolbar .mercury-bold-button { background-position: 0 0 }
.mercury-editable-toolbar .mercury-bold-button.active { background-position: 0 -18px }
.mercury-editable-toolbar .mercury-italic-button { background-position: -23px 0 }
.mercury-editable-toolbar .mercury-italic-button.active { background-position: -23px -18px }
.mercury-editable-toolbar .mercury-overline-button { background-position: -45px 0 }
.mercury-editable-toolbar .mercury-overline-button.active { background-position: -45px -18px }
.mercury-editable-toolbar .mercury-strikethrough-button { background-position: -67px 0 }
.mercury-editable-toolbar .mercury-strikethrough-button.active { background-position: -67px -18px }
.mercury-editable-toolbar .mercury-underline-button { background-position: -89px 0 }
.mercury-editable-toolbar .mercury-underline-button.active { background-position: -89px -18px }
.mercury-editable-toolbar .mercury-subscript-button { background-position: -112px 0 }
.mercury-editable-toolbar .mercury-subscript-button.active { background-position: -112px -18px }
.mercury-editable-toolbar .mercury-superscript-button { background-position: -135px 0 }
.mercury-editable-toolbar .mercury-superscript-button.active { background-position: -135px -18px }
.mercury-editable-toolbar .mercury-justifyLeft-button { background-position: -158px 0 }
.mercury-editable-toolbar .mercury-justifyLeft-button.active { background-position: -158px -18px }
.mercury-editable-toolbar .mercury-justifyCenter-button { background-position: -181px 0 }
.mercury-editable-toolbar .mercury-justifyCenter-button.active { background-position: -181px -18px }
.mercury-editable-toolbar .mercury-justifyRight-button { background-position: -203px 0 }
.mercury-editable-toolbar .mercury-justifyRight-button.active { background-position: -203px -18px }
.mercury-editable-toolbar .mercury-justifyFull-button { background-position: -225px 0 }
.mercury-editable-toolbar .mercury-justifyFull-button.active { background-position: -225px -18px }
.mercury-editable-toolbar .mercury-insertUnorderedList-button { background-position: -248px 0 }
.mercury-editable-toolbar .mercury-insertUnorderedList-button.active { background-position: -248px -18px }
.mercury-editable-toolbar .mercury-insertOrderedList-button { background-position: -271px 0 }
.mercury-editable-toolbar .mercury-insertOrderedList-button.active { background-position: -271px -18px }
.mercury-editable-toolbar .mercury-outdent-button { background-position: -294px 0 }
.mercury-editable-toolbar .mercury-outdent-button.active { background-position: -294px -18px }
.mercury-editable-toolbar .mercury-indent-button { background-position: -317px 0 }
.mercury-editable-toolbar .mercury-indent-button.active { background-position: -317px -18px }
.mercury-editable-toolbar .mercury-insertRowBefore-button { background-position: -340px 0 }
.mercury-editable-toolbar .mercury-insertRowBefore-button.active { background-position: -340px -18px }
.mercury-editable-toolbar .mercury-insertRowAfter-button { background-position: -363px 0 }
.mercury-editable-toolbar .mercury-insertRowAfter-button.active { background-position: -363px -18px }
.mercury-editable-toolbar .mercury-deleteRow-button { background-position: -385px 0 }
.mercury-editable-toolbar .mercury-deleteRow-button.active { background-position: -385px -18px }
.mercury-editable-toolbar .mercury-insertColumnBefore-button { background-position: -407px 0 }
.mercury-editable-toolbar .mercury-insertColumnBefore-button.active { background-position: -407px -18px }
.mercury-editable-toolbar .mercury-insertColumnAfter-button { background-position: -429px 0 }
.mercury-editable-toolbar .mercury-insertColumnAfter-button.active { background-position: -429px -18px }
.mercury-editable-toolbar .mercury-deleteColumn-button { background-position: -451px 0 }
.mercury-editable-toolbar .mercury-deleteColumn-button.active { background-position: -451px -18px }
.mercury-editable-toolbar .mercury-increaseColspan-button { background-position: -474px 0; width: 23px }
.mercury-editable-toolbar .mercury-increaseColspan-button.active { background-position: -474px -18px }
.mercury-editable-toolbar .mercury-decreaseColspan-button { background-position: -497px 0 }
.mercury-editable-toolbar .mercury-decreaseColspan-button.active { background-position: -497px -18px }
.mercury-editable-toolbar .mercury-increaseRowspan-button { background-position: -520px 0 }
.mercury-editable-toolbar .mercury-increaseRowspan-button.active { background-position: -520px -18px }
.mercury-editable-toolbar .mercury-decreaseRowspan-button { background-position: -542px 0 }
.mercury-editable-toolbar .mercury-decreaseRowspan-button.active { background-position: -542px -18px }
.mercury-editable-toolbar .mercury-horizontalRule-button { background-position: -564px 0 }
.mercury-editable-toolbar .mercury-horizontalRule-button.active { background-position: -564px -18px }
.mercury-editable-toolbar .mercury-removeFormatting-button { background-position: -588px 0 }
.mercury-editable-toolbar .mercury-removeFormatting-button.active { background-position: -588px -18px }
.mercury-editable-toolbar .mercury-htmlEditor-button { background-position: -612px 0 }
.mercury-editable-toolbar .mercury-htmlEditor-button.active { background-position: -612px -18px }
/*
* Toolbar: Snippets Region Toolbar
*----------------------------------------------------------------------------*/
.mercury-snippet-toolbar {
position: absolute;
top: 100px;
left: 15px;
border: 1px solid #727272;
border-radius: 3px;
-moz-border-radius: 3px;
box-shadow: 1px 1px 2px rgba(0, 0, 0, .5);
padding: 3px 7px 1px 7px;
}
.mercury-snippet-toolbar:after {
content: '\00a0';
display: block;
visibility: hidden;
clear: both;
height: 0;
}
.mercury-snippet-toolbar .mercury-separator,
.mercury-snippet-toolbar .mercury-line-separator {
height: 18px;
padding: 0;
margin: 0 7px 2px;
}
.mercury-snippet-toolbar .mercury-separator {
margin: 0 3px 2px;
}
.mercury-snippet-toolbar .mercury-button-group {
white-space: nowrap;
}
.mercury-snippet-toolbar .mercury-button-group .mercury-button:first-child {
width: 23px;
}
.mercury-snippet-toolbar .mercury-button {
width: 23px;
height: 18px;
margin: 0 0 2px;
}
.mercury-snippet-toolbar .mercury-button em {
display: none;
}
/* default buttons */
.mercury-snippet-toolbar .mercury-editSnippet-button { background-position: -24px 0 }
.mercury-snippet-toolbar .mercury-editSnippet-button.active { background-position: -24px -18px }
.mercury-snippet-toolbar .mercury-removeSnippet-button { background-position: -48px 0 }
.mercury-snippet-toolbar .mercury-removeSnippet-button.active { background-position: -48px -18px }
.mercury-snippet-toolbar .mercury-dragsnippet-button { background-position: -72px 0 }
.mercury-snippet-toolbar .mercury-dragsnippet-button.active { background-position: -72px -18px }
/*
* Tooltip
*----------------------------------------------------------------------------*/
.mercury-tooltip {
position: absolute;
top: 100px;
left: 100px;
max-width: 400px;
overflow: hidden;
background: rgba(0, 0, 0, .70);
padding: 2px 5px;
border-radius: 2px;
-moz-border-radius: 2px;
box-shadow: 0 0 5px rgba(0, 0, 0, .3);
-moz-box-shadow: 0 0 5px rgba(0, 0, 0, .3);
font: normal normal normal 11px/normal Helvetica, Tahoma, Arial, sans-serif;
color: #EEE;
word-wrap: break-word;
}
.mercury-tooltip a {
color: #EEE;
text-decoration: none;
}
.mercury-tooltip a:hover {
color: #FFF;
}
/*
* Uploader
*----------------------------------------------------------------------------*/
[draggable=true] {
-khtml-user-drag: element;
}
.mercury-uploader-overlay {
position: absolute;
z-index: 10040;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: .95;
background: rgba(255, 255, 255, .8);
}
.mercury-uploader {
position: absolute;
z-index: 10050;
top: 300px;
left: 400px;
width: 500px;
height: 150px;
overflow: hidden;
padding: 15px;
background: rgba(239, 239, 239, .70);
border-radius: 10px;
-moz-border-radius: 10px;
-moz-box-shadow: 0 0 40px rgba(0, 0, 0, .9);
box-shadow: 0 0 40px rgba(0, 0, 0, .9);
font: normal normal normal 12px/normal Helvetica, Tahoma, Arial, sans-serif;
color: #000;
}
.mercury-uploader .mercury-uploader-preview {
float: left;
width: 150px;
height: 150px;
border: 1px solid #CCC;
border-radius: 5px;
-moz-border-radius: 5px;
}
.mercury-uploader .mercury-uploader-preview b {
display: table-cell;
width: 150px;
height: 150px;
text-align: center;
vertical-align: middle;
}
.mercury-uploader .mercury-uploader-preview img {
margin: 5px;
max-width: 140px;
max-height: 140px;
}
.mercury-uploader .mercury-uploader-details {
width: 333px;
overflow: hidden;
float: left;
padding-left: 15px;
}
.mercury-uploader .mercury-uploader-details span {
color: #F00;
}
.mercury-uploader .mercury-uploader-progress {
position: absolute;
bottom: 15px;
right: 15px;
width: 333px;
}
.mercury-uploader .mercury-uploader-progress div.mercury-uploader-indicator {
width: 100%;
height: 30px;
margin: 5px 0 0;
position: relative;
border-radius: 35px;
-moz-border-radius: 35px;
background-color: #BABABA;
background: -webkit-gradient(linear, left bottom, left top, color-stop(0, #C7C7C7), color-stop(1, #B0B0B0));
background: -moz-linear-gradient(#B0B0B0 0%, #C7C7C7 100%);
-webkit-box-shadow: inset 0 1px 2px 0 rgba(0,0,0, 0.5), 0 1px 0 0 rgba(255,255,255, 0.3);
-moz-box-shadow: inset 0 1px 2px 0 rgba(0,0,0, 0.5), 0 1px 0 0 rgba(255,255,255, 0.3);
box-shadow: inset 0 1px 2px 0 rgba(0,0,0, 0.5), 0 1px 0 0 rgba(255,255,255, 0.3);
}
.mercury-uploader .mercury-uploader-progress div.mercury-uploader-indicator div {
min-width: 28px;
position: relative;
overflow: hidden;
height: 28px;
border-radius: 35px;
width: 0;
-moz-border-radius: 35px;
-webkit-animation: animate-stripes 2s linear infinite;
-webkit-background-size: 44px 44px;
background: -webkit-gradient(linear, 0 0, 44 44, color-stop(0.00, rgba(255,255,255, 0.17)), color-stop(0.25, rgba(255,255,255, 0.17)), color-stop(0.26, rgba(255,255,255, 0)), color-stop(0.50, rgba(255,255,255, 0)), color-stop(0.51, rgba(255,255,255, 0.17)), color-stop(0.75, rgba(255,255,255, 0.17)), color-stop(0.76, rgba(255,255,255, 0)), color-stop(1.00, rgba(255,255,255, 0))),
-webkit-gradient(linear, left bottom, left top, color-stop(0, rgba(255,255,255, 0.1)), color-stop(1, rgba(255,255,255, 0.37)));
background: -moz-repeating-linear-gradient(top left -30deg, rgba(255,255,255, 0.17), rgba(255,255,255, 0.17) 15px, rgba(255,255,255, 0) 15px, rgba(255,255,255, 0) 30px),
-moz-linear-gradient(rgba(255,255,255, 0.1) 0%, rgba(255,255,255, 0.37) 100%);
background-color: #09F;
border: 1px solid #0083DA;
box-shadow: inset 0 1px 0 0 rgba(255,255,255, 0.4), inset 0 -1px 1px rgba(0,0,0, 0.2);
-moz-box-shadow: inset 0 1px 0 0 rgba(255,255,255, 0.4), inset 0 -1px 1px rgba(0,0,0, 0.2);
}
.mercury-uploader .mercury-uploader-progress div.mercury-uploader-indicator div b {
display: none;
position: absolute;
right: 0;
line-height: 28px;
padding-right: 12px;
color: rgba(0, 0, 0, .6);
text-shadow: rgba(255, 255, 255, 0.45) 0 1px 0px;
white-space: nowrap;
}
/*
* mercury.css
*----------------------------------------------------------------------------*/
form fieldset.buttons .commit input {
background-image: url(/assets/mercury/button.png);
}
/*
* dialog.css
*----------------------------------------------------------------------------*/
.mercury-dialog.loading,
.mercury-select.loading,
.mercury-palette.loading {
background-image: url(/assets/mercury/loading-light.gif);
}
.mercury-panel.loading {
background-image: url(/assets/mercury/loading-dark.gif);
}
.mercury-panel h1 a.mercury-panel-close {
background-image: url(/assets/mercury/close.png);
}
.mercury-snippet-panel input.filter {
background-image: url(/assets/mercury/search-icon.png);
background-position: 4px center;
}
/*
* lightview.css
*----------------------------------------------------------------------------*/
.mercury-lightview.loading {
background-image: url(/assets/mercury/loading-dark.gif);
}
.mercury-lightview h1.mercury-lightview-title a.mercury-lightview-close {
background-image: url(/assets/mercury/close.png);
}
#mercury_about {
background-image: url(/assets/mercury/temp-logo.png);
background-position: 0 0;
}
/*
* modal.css
*----------------------------------------------------------------------------*/
.mercury-modal.loading .mercury-modal-content-container {
background-image: url(/assets/mercury/loading-light.gif);
}
/*
* toolbar.css
*----------------------------------------------------------------------------*/
.mercury-primary-toolbar .mercury-button.pressed {
background-image: url(/assets/mercury/toolbar/primary/_pressed.png);
background-position: top center;
}
.mercury-primary-toolbar .mercury-toolbar-expander {
background-image: url(/assets/mercury/toolbar/primary/_expander.png);
background-position: center 90%;
}
.mercury-primary-toolbar .mercury-save-button em,
.mercury-expander-button[data-button=save] em { background-image: url(/assets/mercury/toolbar/primary/save.png) }
.mercury-primary-toolbar .mercury-preview-button em,
.mercury-expander-button[data-button=preview] em { background-image: url(/assets/mercury/toolbar/primary/preview.png) }
.mercury-primary-toolbar .mercury-undo-button em,
.mercury-expander-button[data-button=undo] em { background-image: url(/assets/mercury/toolbar/primary/undo.png) }
.mercury-primary-toolbar .mercury-redo-button em,
.mercury-expander-button[data-button=redo] em { background-image: url(/assets/mercury/toolbar/primary/redo.png) }
.mercury-primary-toolbar .mercury-insertLink-button em,
.mercury-expander-button[data-button=insertLink] em { background-image: url(/assets/mercury/toolbar/primary/insertlink.png) }
.mercury-primary-toolbar .mercury-insertMedia-button em,
.mercury-expander-button[data-button=insertMedia] em { background-image: url(/assets/mercury/toolbar/primary/insertmedia.png) }
.mercury-primary-toolbar .mercury-insertTable-button em,
.mercury-expander-button[data-button=insertTable] em { background-image: url(/assets/mercury/toolbar/primary/inserttable.png) }
.mercury-primary-toolbar .mercury-insertCharacter-button em,
.mercury-expander-button[data-button=insertCharacter] em { background-image: url(/assets/mercury/toolbar/primary/insertcharacter.png) }
.mercury-primary-toolbar .mercury-snippetPanel-button em,
.mercury-expander-button[data-button=snippetPanel] em { background-image: url(/assets/mercury/toolbar/primary/snippetpanel.png) }
.mercury-primary-toolbar .mercury-historyPanel-button em,
.mercury-expander-button[data-button=historyPanel] em { background-image: url(/assets/mercury/toolbar/primary/historypanel.png) }
.mercury-primary-toolbar .mercury-notesPanel-button em,
.mercury-expander-button[data-button=notesPanel] em { background-image: url(/assets/mercury/toolbar/primary/notespanel.png) }
.mercury-primary-toolbar .mercury-userPanel-button em,
.mercury-expander-button[data-button=userPanel] em { background-image: url(/assets/mercury/toolbar/primary/user.png) }
.mercury-primary-toolbar .mercury-toolsPanel-button em,
.mercury-expander-button[data-button=toolsPanel] em { background-image: url(/assets/mercury/toolbar/primary/tools.png) }
.mercury-editable-toolbar .mercury-button {
background-image: url(/assets/mercury/toolbar/editable/buttons.png);
}
.mercury-editable-toolbar .mercury-button em {
background-image: url(/assets/mercury/toolbar/editable/buttons.png);
}
.mercury-snippet-toolbar .mercury-button {
background-image: url(/assets/mercury/toolbar/snippets/buttons.png);
}
.mercury-snippet-toolbar .mercury-button em {
background-image: url(/assets/mercury/toolbar/snippets/buttons.png);
}
<!DOCTYPE html>
<html>
<head>
<meta content="text/html;charset=utf-8" http-equiv="Content-Type"/>
<meta content="utf-8" http-equiv="encoding"/>
<title>Mercury editor</title>
<link rel="stylesheet" href="../css/mercury.css">
<script src="../lib/jquery.js"></script>
<script src="../lib/jschannel.js"></script>
<script src="../lib/renderjs.js"></script>
<script src="../lib/mercury/mercury_loader.js?pack=all"></script>
</head>
<body>
<div data-mercury="full" id="uniqueID">
</div>
</body>
</html>
......@@ -102,6 +102,13 @@
g.declareIframedGadget('./bootstrap-wysiwyg.html', main_context)
.then(registerIOButtons);
});
body
.route("add", "/mercury/", 1)
.done(function () {
g.declareIframedGadget('./mercury.html', main_context)
.then(registerIOButtons);
});
}
g.declareGadget('./io.html', g.context.find("#iogadget"))
......
/*global window, jQuery, rJS*/
"use strict";
(function (window, $, rJS) {
rJS(window).declareMethod('getContent', function () {
console.log("stub content get");
console.log($(window));
return "content stub";
})
.declareMethod('setContent', function () {
console.log("set content");
})
.declareMethod('clearContent', function () {
console.log("clear content");
});
}(window, jQuery, rJS));
This source diff could not be displayed because it is too large. You can view the blob instead.
This source diff could not be displayed because it is too large. You can view the blob instead.
This source diff could not be displayed because it is too large. You can view the blob instead.
if (!window.Mercury) window.Mercury = {preloadedViews: {}};
// -- LIGHTVIEWS --
Mercury.preloadedViews['/mercury/lightviews/about.html'] = "<div id=\"mercury_about\"> <p> Mercury Editor is an open source HTML5 WYSIWYG editor written in Coffeescript using jQuery. The project has been released under the MIT license. <br/><br/> Documentation and other useful information can be found on the project pages. </p> <ul> <li><a href=\"http://jejacks0n.github.com/mercury\" target=\"_blank\">Project Home</a></li> <li><a href=\"http://github.com/jejacks0n/mercury\" target=\"_blank\">Project Source</a></li> </ul></div>";
// -- MODALS --
Mercury.preloadedViews['/mercury/modals/character.html'] = "<form id=\"mercury_character\" class=\"mercury-form\" style=\"width:456px\"> <div class=\"mercury-display-pane-container\"> <div class=\"mercury-display-pane\"> <div class=\"character\" data-entity=\"#34\" title=\"quotation mark (APL quote)\">&#34;</div> <div class=\"character\" data-entity=\"#38\" title=\"ampersand\">&#38;</div> <div class=\"character\" data-entity=\"#60\" title=\"less-than sign\">&#60;</div> <div class=\"character\" data-entity=\"#62\" title=\"greater-than sign\">&#62;</div> <div class=\"character\" data-entity=\"#710\" title=\"modifier letter circumflex accent\">&#710;</div> <div class=\"character\" data-entity=\"#732\" title=\"small tilde\">&#732;</div> <div class=\"character\" data-entity=\"#160\" title=\"non-breaking space\">&#160;</div> <div class=\"character\" data-entity=\"#8194\" title=\"en space\">&#8194;</div> <div class=\"character\" data-entity=\"#8195\" title=\"em space\">&#8195;</div> <div class=\"character\" data-entity=\"#8201\" title=\"thin space\">&#8201;</div> <div class=\"character\" data-entity=\"#8211\" title=\"en dash\">&#8211;</div> <div class=\"character\" data-entity=\"#8212\" title=\"em dash\">&#8212;</div> <div class=\"character\" data-entity=\"#8216\" title=\"left single quotation mark\">&#8216;</div> <div class=\"character\" data-entity=\"#8217\" title=\"right single quotation mark\">&#8217;</div> <div class=\"character\" data-entity=\"#8218\" title=\"single low-9 quotation mark\">&#8218;</div> <div class=\"character\" data-entity=\"#8220\" title=\"left double quotation mark\">&#8220;</div> <div class=\"character\" data-entity=\"#8221\" title=\"right double quotation mark\">&#8221;</div> <div class=\"character\" data-entity=\"#8222\" title=\"double low-9 quotation mark\">&#8222;</div> <div class=\"character\" data-entity=\"#8224\" title=\"dagger\">&#8224;</div> <div class=\"character\" data-entity=\"#8225\" title=\"double dagger\">&#8225;</div> <div class=\"character\" data-entity=\"#8240\" title=\"per mille sign\">&#8240;</div> <div class=\"character\" data-entity=\"#8249\" title=\"single left-pointing angle quotation mark\">&#8249;</div> <div class=\"character\" data-entity=\"#8250\" title=\"single right-pointing angle quotation mark\">&#8250;</div> <div class=\"character\" data-entity=\"#161\" title=\"inverted exclamation mark\">&#161;</div> <div class=\"character\" data-entity=\"#162\" title=\"cent sign\">&#162;</div> <div class=\"character\" data-entity=\"#163\" title=\"pound sign\">&#163;</div> <div class=\"character\" data-entity=\"#164\" title=\"currency sign\">&#164;</div> <div class=\"character\" data-entity=\"#165\" title=\"yen sign\">&#165;</div> <div class=\"character\" data-entity=\"#166\" title=\"broken bar\">&#166;</div> <div class=\"character\" data-entity=\"#167\" title=\"section sign\">&#167;</div> <div class=\"character\" data-entity=\"#168\" title=\"spacing diaeresis\">&#168;</div> <div class=\"character\" data-entity=\"#169\" title=\"copyright sign\">&#169;</div> <div class=\"character\" data-entity=\"#170\" title=\"feminine ordinal indicator\">&#170;</div> <div class=\"character\" data-entity=\"#186\" title=\"masculine ordinal indicator\">&#186;</div> <div class=\"character\" data-entity=\"#171\" title=\"left pointing guillemet\">&#171;</div> <div class=\"character\" data-entity=\"#172\" title=\"not sign\">&#172;</div> <div class=\"character\" data-entity=\"#174\" title=\"registered trade mark sign\">&#174;</div> <div class=\"character\" data-entity=\"#175\" title=\"spacing macron\">&#175;</div> <div class=\"character\" data-entity=\"#176\" title=\"degree sign\">&#176;</div> <div class=\"character\" data-entity=\"#177\" title=\"plus-or-minus sign\">&#177;</div> <div class=\"character\" data-entity=\"#185\" title=\"superscript one\">&#185;</div> <div class=\"character\" data-entity=\"#178\" title=\"superscript digit two\">&#178;</div> <div class=\"character\" data-entity=\"#179\" title=\"superscript digit three\">&#179;</div> <div class=\"character\" data-entity=\"#180\" title=\"acute accent\">&#180;</div> <div class=\"character\" data-entity=\"#181\" title=\"micro sign\">&#181;</div> <div class=\"character\" data-entity=\"#182\" title=\"pilcrow sign\">&#182;</div> <div class=\"character\" data-entity=\"#183\" title=\"middle dot\">&#183;</div> <div class=\"character\" data-entity=\"#184\" title=\"cedilla\">&#184;</div> <div class=\"character\" data-entity=\"#187\" title=\"right-pointing double angle quotation mark\">&#187;</div> <div class=\"character\" data-entity=\"#188\" title=\"fraction one quarter\">&#188;</div> <div class=\"character\" data-entity=\"#189\" title=\"fraction one half\">&#189;</div> <div class=\"character\" data-entity=\"#190\" title=\"fraction three quarters\">&#190;</div> <div class=\"character\" data-entity=\"#191\" title=\"inverted question mark\">&#191;</div> <div class=\"character\" data-entity=\"#215\" title=\"multiplication sign\">&#215;</div> <div class=\"character\" data-entity=\"#247\" title=\"division sign\">&#247;</div> <div class=\"character\" data-entity=\"#192\" title=\"latin capital letter A with grave\">&#192;</div> <div class=\"character\" data-entity=\"#224\" title=\"latin small letter a with grave\">&#224;</div> <div class=\"character\" data-entity=\"#193\" title=\"latin capital letter A with acute\">&#193;</div> <div class=\"character\" data-entity=\"#225\" title=\"latin small letter a with acute\">&#225;</div> <div class=\"character\" data-entity=\"#194\" title=\"latin capital letter A with circumflex\">&#194;</div> <div class=\"character\" data-entity=\"#226\" title=\"latin small letter a with circumflex\">&#226;</div> <div class=\"character\" data-entity=\"#195\" title=\"latin capital letter A with tilde\">&#195;</div> <div class=\"character\" data-entity=\"#227\" title=\"latin small letter a with tilde\">&#227;</div> <div class=\"character\" data-entity=\"#196\" title=\"latin capital letter A with diaeresis\">&#196;</div> <div class=\"character\" data-entity=\"#228\" title=\"latin small letter a with diaeresis\">&#228;</div> <div class=\"character\" data-entity=\"#197\" title=\"latin capital letter A with ring above\">&#197;</div> <div class=\"character\" data-entity=\"#229\" title=\"latin small letter a with ring above\">&#229;</div> <div class=\"character\" data-entity=\"#200\" title=\"latin capital letter E with grave\">&#200;</div> <div class=\"character\" data-entity=\"#232\" title=\"latin small letter e with grave\">&#232;</div> <div class=\"character\" data-entity=\"#201\" title=\"latin capital letter E with acute\">&#201;</div> <div class=\"character\" data-entity=\"#233\" title=\"latin small letter e with acute\">&#233;</div> <div class=\"character\" data-entity=\"#202\" title=\"latin capital letter E with circumflex\">&#202;</div> <div class=\"character\" data-entity=\"#234\" title=\"latin small letter e with circumflex\">&#234;</div> <div class=\"character\" data-entity=\"#203\" title=\"latin capital letter E with diaeresis\">&#203;</div> <div class=\"character\" data-entity=\"#235\" title=\"latin small letter e with diaeresis\">&#235;</div> <div class=\"character\" data-entity=\"#204\" title=\"latin capital letter I with grave\">&#204;</div> <div class=\"character\" data-entity=\"#236\" title=\"latin small letter i with grave\">&#236;</div> <div class=\"character\" data-entity=\"#205\" title=\"latin capital letter I with acute\">&#205;</div> <div class=\"character\" data-entity=\"#237\" title=\"latin small letter i with acute\">&#237;</div> <div class=\"character\" data-entity=\"#206\" title=\"latin capital letter I with circumflex\">&#206;</div> <div class=\"character\" data-entity=\"#238\" title=\"latin small letter i with circumflex\">&#238;</div> <div class=\"character\" data-entity=\"#207\" title=\"latin capital letter I with diaeresis\">&#207;</div> <div class=\"character\" data-entity=\"#239\" title=\"latin small letter i with diaeresis\">&#239;</div> <div class=\"character\" data-entity=\"#210\" title=\"latin capital letter O with grave\">&#210;</div> <div class=\"character\" data-entity=\"#242\" title=\"latin small letter o with grave\">&#242;</div> <div class=\"character\" data-entity=\"#211\" title=\"latin capital letter O with acute\">&#211;</div> <div class=\"character\" data-entity=\"#243\" title=\"latin small letter o with acute\">&#243;</div> <div class=\"character\" data-entity=\"#212\" title=\"latin capital letter O with circumflex\">&#212;</div> <div class=\"character\" data-entity=\"#244\" title=\"latin small letter o with circumflex\">&#244;</div> <div class=\"character\" data-entity=\"#213\" title=\"latin capital letter O with tilde\">&#213;</div> <div class=\"character\" data-entity=\"#245\" title=\"latin small letter o with tilde\">&#245;</div> <div class=\"character\" data-entity=\"#214\" title=\"latin capital letter O with diaeresis\">&#214;</div> <div class=\"character\" data-entity=\"#246\" title=\"latin small letter o with diaeresis\">&#246;</div> <div class=\"character\" data-entity=\"#216\" title=\"latin capital letter O with stroke\">&#216;</div> <div class=\"character\" data-entity=\"#248\" title=\"latin small letter o with stroke\">&#248;</div> <div class=\"character\" data-entity=\"#217\" title=\"latin capital letter U with grave\">&#217;</div> <div class=\"character\" data-entity=\"#249\" title=\"latin small letter u with grave\">&#249;</div> <div class=\"character\" data-entity=\"#218\" title=\"latin capital letter U with acute\">&#218;</div> <div class=\"character\" data-entity=\"#250\" title=\"latin small letter u with acute\">&#250;</div> <div class=\"character\" data-entity=\"#219\" title=\"latin capital letter U with circumflex\">&#219;</div> <div class=\"character\" data-entity=\"#251\" title=\"latin small letter u with circumflex\">&#251;</div> <div class=\"character\" data-entity=\"#220\" title=\"latin capital letter U with diaeresis\">&#220;</div> <div class=\"character\" data-entity=\"#252\" title=\"latin small letter u with diaeresis\">&#252;</div> <div class=\"character\" data-entity=\"#221\" title=\"latin capital letter Y with acute\">&#221;</div> <div class=\"character\" data-entity=\"#253\" title=\"latin small letter y with acute\">&#253;</div> <div class=\"character\" data-entity=\"#376\" title=\"latin capital letter Y with diaeresis\">&#376;</div> <div class=\"character\" data-entity=\"#255\" title=\"latin small letter y with diaeresis\">&#255;</div> <div class=\"character\" data-entity=\"#198\" title=\"latin capital ligature AE\">&#198;</div> <div class=\"character\" data-entity=\"#230\" title=\"latin small ligature ae\">&#230;</div> <div class=\"character\" data-entity=\"#338\" title=\"latin capital ligature OE\">&#338;</div> <div class=\"character\" data-entity=\"#339\" title=\"latin small ligature oe\">&#339;</div> <div class=\"character\" data-entity=\"#352\" title=\"latin capital letter S with caron\">&#352;</div> <div class=\"character\" data-entity=\"#353\" title=\"latin small letter s with caron\">&#353;</div> <div class=\"character\" data-entity=\"#199\" title=\"latin capital letter C with cedilla\">&#199;</div> <div class=\"character\" data-entity=\"#231\" title=\"latin small letter c with cedilla\">&#231;</div> <div class=\"character\" data-entity=\"#208\" title=\"latin capital letter ETH\">&#208;</div> <div class=\"character\" data-entity=\"#240\" title=\"latin small letter eth\">&#240;</div> <div class=\"character\" data-entity=\"#209\" title=\"latin capital letter N with tilde\">&#209;</div> <div class=\"character\" data-entity=\"#241\" title=\"latin small letter n with tilde\">&#241;</div> <div class=\"character\" data-entity=\"#222\" title=\"latin capital letter THORN\">&#222;</div> <div class=\"character\" data-entity=\"#254\" title=\"latin small letter thorn\">&#254;</div> <div class=\"character\" data-entity=\"#223\" title=\"latin small letter sharp s (ess-zed)\">&#223;</div> <div class=\"character\" data-entity=\"#402\" title=\"latin small f with hook (function)\">&#402;</div> <div class=\"character\" data-entity=\"#913\" title=\"greek capital letter alpha\">&#913;</div> <div class=\"character\" data-entity=\"#914\" title=\"greek capital letter beta\">&#914;</div> <div class=\"character\" data-entity=\"#915\" title=\"greek capital letter gamma\">&#915;</div> <div class=\"character\" data-entity=\"#916\" title=\"greek capital letter delta\">&#916;</div> <div class=\"character\" data-entity=\"#917\" title=\"greek capital letter epsilon\">&#917;</div> <div class=\"character\" data-entity=\"#918\" title=\"greek capital letter zeta\">&#918;</div> <div class=\"character\" data-entity=\"#919\" title=\"greek capital letter eta\">&#919;</div> <div class=\"character\" data-entity=\"#920\" title=\"greek capital letter theta\">&#920;</div> <div class=\"character\" data-entity=\"#921\" title=\"greek capital letter iota\">&#921;</div> <div class=\"character\" data-entity=\"#922\" title=\"greek capital letter kappa\">&#922;</div> <div class=\"character\" data-entity=\"#923\" title=\"greek capital letter lambda\">&#923;</div> <div class=\"character\" data-entity=\"#924\" title=\"greek capital letter mu\">&#924;</div> <div class=\"character\" data-entity=\"#925\" title=\"greek capital letter nu\">&#925;</div> <div class=\"character\" data-entity=\"#926\" title=\"greek capital letter xi\">&#926;</div> <div class=\"character\" data-entity=\"#927\" title=\"greek capital letter omicron\">&#927;</div> <div class=\"character\" data-entity=\"#928\" title=\"greek capital letter pi\">&#928;</div> <div class=\"character\" data-entity=\"#929\" title=\"greek capital letter rho\">&#929;</div> <div class=\"character\" data-entity=\"#931\" title=\"greek capital letter sigma\">&#931;</div> <div class=\"character\" data-entity=\"#932\" title=\"greek capital letter tau\">&#932;</div> <div class=\"character\" data-entity=\"#933\" title=\"greek capital letter upsilon\">&#933;</div> <div class=\"character\" data-entity=\"#934\" title=\"greek capital letter phi\">&#934;</div> <div class=\"character\" data-entity=\"#935\" title=\"greek capital letter chi\">&#935;</div> <div class=\"character\" data-entity=\"#936\" title=\"greek capital letter psi\">&#936;</div> <div class=\"character\" data-entity=\"#937\" title=\"greek capital letter omega\">&#937;</div> <div class=\"character\" data-entity=\"#945\" title=\"greek small letter alpha\">&#945;</div> <div class=\"character\" data-entity=\"#946\" title=\"greek small letter beta\">&#946;</div> <div class=\"character\" data-entity=\"#947\" title=\"greek small letter gamma\">&#947;</div> <div class=\"character\" data-entity=\"#948\" title=\"greek small letter delta\">&#948;</div> <div class=\"character\" data-entity=\"#949\" title=\"greek small letter epsilon\">&#949;</div> <div class=\"character\" data-entity=\"#950\" title=\"greek small letter zeta\">&#950;</div> <div class=\"character\" data-entity=\"#951\" title=\"greek small letter eta\">&#951;</div> <div class=\"character\" data-entity=\"#952\" title=\"greek small letter theta\">&#952;</div> <div class=\"character\" data-entity=\"#953\" title=\"greek small letter iota\">&#953;</div> <div class=\"character\" data-entity=\"#954\" title=\"greek small letter kappa\">&#954;</div> <div class=\"character\" data-entity=\"#955\" title=\"greek small letter lambda\">&#955;</div> <div class=\"character\" data-entity=\"#956\" title=\"greek small letter mu\">&#956;</div> <div class=\"character\" data-entity=\"#957\" title=\"greek small letter nu\">&#957;</div> <div class=\"character\" data-entity=\"#958\" title=\"greek small letter xi\">&#958;</div> <div class=\"character\" data-entity=\"#959\" title=\"greek small letter omicron\">&#959;</div> <div class=\"character\" data-entity=\"#960\" title=\"greek small letter pi\">&#960;</div> <div class=\"character\" data-entity=\"#961\" title=\"greek small letter rho\">&#961;</div> <div class=\"character\" data-entity=\"#962\" title=\"greek small letter final sigma\">&#962;</div> <div class=\"character\" data-entity=\"#963\" title=\"greek small letter sigma\">&#963;</div> <div class=\"character\" data-entity=\"#964\" title=\"greek small letter tau\">&#964;</div> <div class=\"character\" data-entity=\"#965\" title=\"greek small letter upsilon\">&#965;</div> <div class=\"character\" data-entity=\"#966\" title=\"greek small letter phi\">&#966;</div> <div class=\"character\" data-entity=\"#967\" title=\"greek small letter chi\">&#967;</div> <div class=\"character\" data-entity=\"#968\" title=\"greek small letter psi\">&#968;</div> <div class=\"character\" data-entity=\"#969\" title=\"greek small letter omega\">&#969;</div> <div class=\"character\" data-entity=\"#977\" title=\"greek small letter theta symbol\">&#977;</div> <div class=\"character\" data-entity=\"#978\" title=\"greek upsilon with hook symbol\">&#978;</div> <div class=\"character\" data-entity=\"#982\" title=\"greek pi symbol\">&#982;</div> <div class=\"character\" data-entity=\"#8226\" title=\"bullet (black small circle)\">&#8226;</div> <div class=\"character\" data-entity=\"#8230\" title=\"horizontal ellipsis\">&#8230;</div> <div class=\"character\" data-entity=\"#8242\" title=\"prime (minutes/feet)\">&#8242;</div> <div class=\"character\" data-entity=\"#8243\" title=\"double prime (seconds/inches)\">&#8243;</div> <div class=\"character\" data-entity=\"#8254\" title=\"overline\">&#8254;</div> <div class=\"character\" data-entity=\"#8260\" title=\"fraction slash\">&#8260;</div> <div class=\"character\" data-entity=\"#8472\" title=\"Weierstrass p\">&#8472;</div> <div class=\"character\" data-entity=\"#8465\" title=\"imaginary part\">&#8465;</div> <div class=\"character\" data-entity=\"#8476\" title=\"real part symbol\">&#8476;</div> <div class=\"character\" data-entity=\"#8482\" title=\"trade mark sign\">&#8482;</div> <div class=\"character\" data-entity=\"#8501\" title=\"first transfinite cardinal\">&#8501;</div> <div class=\"character\" data-entity=\"#8592\" title=\"leftwards arrow\">&#8592;</div> <div class=\"character\" data-entity=\"#8593\" title=\"upwards arrow\">&#8593;</div> <div class=\"character\" data-entity=\"#8594\" title=\"rightwards arrow\">&#8594;</div> <div class=\"character\" data-entity=\"#8595\" title=\"downwards arrow\">&#8595;</div> <div class=\"character\" data-entity=\"#8596\" title=\"left right arrow\">&#8596;</div> <div class=\"character\" data-entity=\"#8629\" title=\"downwards arrow with corner leftwards\">&#8629;</div> <div class=\"character\" data-entity=\"#8656\" title=\"leftwards double arrow\">&#8656;</div> <div class=\"character\" data-entity=\"#8657\" title=\"upwards double arrow\">&#8657;</div> <div class=\"character\" data-entity=\"#8658\" title=\"rightwards double arrow\">&#8658;</div> <div class=\"character\" data-entity=\"#8659\" title=\"downwards double arrow\">&#8659;</div> <div class=\"character\" data-entity=\"#8660\" title=\"left right double arrow\">&#8660;</div> <div class=\"character\" data-entity=\"#8704\" title=\"for all\">&#8704;</div> <div class=\"character\" data-entity=\"#8706\" title=\"partial differential\">&#8706;</div> <div class=\"character\" data-entity=\"#8707\" title=\"there exists\">&#8707;</div> <div class=\"character\" data-entity=\"#8709\" title=\"empty set (null set/diameter)\">&#8709;</div> <div class=\"character\" data-entity=\"#8711\" title=\"nabla (backward difference)\">&#8711;</div> <div class=\"character\" data-entity=\"#8712\" title=\"element of\">&#8712;</div> <div class=\"character\" data-entity=\"#8713\" title=\"not an element of\">&#8713;</div> <div class=\"character\" data-entity=\"#8715\" title=\"contains as member\">&#8715;</div> <div class=\"character\" data-entity=\"#8719\" title=\"n-ary product (product sign)\">&#8719;</div> <div class=\"character\" data-entity=\"#8721\" title=\"n-ary sumation\">&#8721;</div> <div class=\"character\" data-entity=\"#8722\" title=\"minus sign\">&#8722;</div> <div class=\"character\" data-entity=\"#8727\" title=\"asterisk operator\">&#8727;</div> <div class=\"character\" data-entity=\"#8730\" title=\"square root (radical sign)\">&#8730;</div> <div class=\"character\" data-entity=\"#8733\" title=\"proportional to\">&#8733;</div> <div class=\"character\" data-entity=\"#8734\" title=\"infinity\">&#8734;</div> <div class=\"character\" data-entity=\"#8736\" title=\"angle\">&#8736;</div> <div class=\"character\" data-entity=\"#8743\" title=\"logical and (wedge)\">&#8743;</div> <div class=\"character\" data-entity=\"#8744\" title=\"logical or (vee)\">&#8744;</div> <div class=\"character\" data-entity=\"#8745\" title=\"intersection (cap)\">&#8745;</div> <div class=\"character\" data-entity=\"#8746\" title=\"union (cup)\">&#8746;</div> <div class=\"character\" data-entity=\"#8747\" title=\"integral\">&#8747;</div> <div class=\"character\" data-entity=\"#8756\" title=\"therefore\">&#8756;</div> <div class=\"character\" data-entity=\"#8764\" title=\"tilde operator (varies with/similar to)\">&#8764;</div> <div class=\"character\" data-entity=\"#8773\" title=\"approximately equal to\">&#8773;</div> <div class=\"character\" data-entity=\"#8776\" title=\"almost equal to (asymptotic to)\">&#8776;</div> <div class=\"character\" data-entity=\"#8800\" title=\"not equal to\">&#8800;</div> <div class=\"character\" data-entity=\"#8801\" title=\"identical to\">&#8801;</div> <div class=\"character\" data-entity=\"#8804\" title=\"less-than or equal to\">&#8804;</div> <div class=\"character\" data-entity=\"#8805\" title=\"greater-than or equal to\">&#8805;</div> <div class=\"character\" data-entity=\"#8834\" title=\"subset of\">&#8834;</div> <div class=\"character\" data-entity=\"#8835\" title=\"superset of\">&#8835;</div> <div class=\"character\" data-entity=\"#8836\" title=\"not a subset of\">&#8836;</div> <div class=\"character\" data-entity=\"#8838\" title=\"subset of or equal to\">&#8838;</div> <div class=\"character\" data-entity=\"#8839\" title=\"superset of or equal to\">&#8839;</div> <div class=\"character\" data-entity=\"#8853\" title=\"circled plus (direct sum)\">&#8853;</div> <div class=\"character\" data-entity=\"#8855\" title=\"circled times (vector product)\">&#8855;</div> <div class=\"character\" data-entity=\"#8869\" title=\"up tack (orthogonal to/perpendicular)\">&#8869;</div> <div class=\"character\" data-entity=\"#8901\" title=\"dot operator\">&#8901;</div> <div class=\"character\" data-entity=\"#8968\" title=\"left ceiling (apl upstile)\">&#8968;</div> <div class=\"character\" data-entity=\"#8969\" title=\"right ceiling\">&#8969;</div> <div class=\"character\" data-entity=\"#8970\" title=\"left floor (apl downstile)\">&#8970;</div> <div class=\"character\" data-entity=\"#8971\" title=\"right floor\">&#8971;</div> <div class=\"character\" data-entity=\"#9001\" title=\"left-pointing angle bracket (bra)\">&#9001;</div> <div class=\"character\" data-entity=\"#9002\" title=\"right-pointing angle bracket (ket)\">&#9002;</div> <div class=\"character\" data-entity=\"#9674\" title=\"lozenge\">&#9674;</div> <div class=\"character\" data-entity=\"#9824\" title=\"black spade suit\">&#9824;</div> <div class=\"character\" data-entity=\"#9827\" title=\"black club suit (shamrock)\">&#9827;</div> <div class=\"character\" data-entity=\"#9829\" title=\"black heart suit (valentine)\">&#9829;</div> <div class=\"character\" data-entity=\"#9830\" title=\"black diamond suit\">&#9830;</div> <div class=\"character\" data-entity=\"#x2603\" title=\"snowman\">&#x2603;</div> </div> </div></form>";
Mercury.preloadedViews['/mercury/modals/htmleditor.html'] = "<form id=\"mercury_html_editor\" class=\"mercury-form\" style=\"width:650px\"> <textarea class=\"mercury-display-pane-container\" rows=\"5\" style=\"width:100%\"></textarea> <div class=\"form-actions mercury-display-controls\"> <input class=\"btn btn-primary\" name=\"commit\" type=\"submit\" value=\"Save and Replace\"/> </div></form>";
Mercury.preloadedViews['/mercury/modals/link.html'] = "<form id=\"mercury_link\" class=\"form-horizontal\" style=\"width:615px\"> <div class=\"form-inputs mercury-display-pane-container\"> <fieldset id=\"link_text_container\"> <div class=\"control-group string optional\"> <label class=\"string optional control-label\" for=\"link_text\">Link Content</label> <div class=\"controls\"> <input class=\"span6 string optional\" id=\"link_text\" name=\"link[text]\" size=\"50\" type=\"text\"> </div> </div> </fieldset> <fieldset> <legend>Standard Links</legend> <div class=\"control-group url optional\"> <label class=\"url optional control-label\" for=\"link_external_url\"> <input name=\"link_type\" type=\"radio\" value=\"external_url\" checked=\"checked\"/>URL </label> <div class=\"controls\"> <input class=\"span6 string url optional\" id=\"link_external_url\" name=\"link[external_url]\" size=\"50\" type=\"text\"> </div> </div> </fieldset> <fieldset> <legend>Index / Bookmark Links</legend> <div class=\"control-group select optional\"> <label class=\"select optional control-label\" for=\"link_existing_bookmark\"> <input name=\"link_type\" type=\"radio\" value=\"existing_bookmark\"/>Existing Links </label> <div class=\"controls\"> <select class=\"select optional\" id=\"link_existing_bookmark\" name=\"link[existing_bookmark]\"></select> </div> </div> <div class=\"control-group string optional\"> <label class=\"string optional control-label\" for=\"link_new_bookmark\"> <input name=\"link_type\" type=\"radio\" value=\"new_bookmark\"/>Bookmark </label> <div class=\"controls\"> <input class=\"string optional\" id=\"link_new_bookmark\" name=\"link[new_bookmark]\" size=\"50\" type=\"text\"> </div> </div> </fieldset> <fieldset> <legend>Options</legend> <div class=\"control-group select optional\"> <label class=\"select optional control-label\" for=\"link_target\">Link Target</label> <div class=\"controls\"> <select class=\"select optional\" id=\"link_target\" name=\"link[target]\"> <option value=\"\">Self (the same window or tab)</option> <option value=\"_blank\">Blank (a new window or tab)</option> <option value=\"_top\">Top (removes any frames)</option> <option value=\"popup\">Popup Window (javascript new window popup)</option> </select> </div> </div> <div id=\"popup_options\" class=\"link-target-options\" style=\"display:none\"> <div class=\"control-group number optional\"> <label class=\"number optional control-label\" for=\"link_popup_width\">Popup Width</label> <div class=\"controls\"> <input class=\"span2 number optional\" id=\"link_popup_width\" name=\"link[popup_width]\" size=\"50\" type=\"number\" value=\"960\"> </div> </div> <div class=\"control-group number optional\"> <label class=\"number optional control-label\" for=\"link_popup_height\">Popup Height</label> <div class=\"controls\"> <input class=\"span2 number optional\" id=\"link_popup_height\" name=\"link[popup_height]\" size=\"50\" type=\"number\" value=\"800\"> </div> </div> </div> </fieldset> </div> <div class=\"form-actions mercury-display-controls\"> <input class=\"btn btn-primary\" name=\"commit\" type=\"submit\" value=\"Insert Link\"> </div></form>";
Mercury.preloadedViews['/mercury/modals/media.html'] = "<form id=\"mercury_media\" class=\"form-horizontal\" style=\"width:615px\"> <div class=\"form-inputs mercury-display-pane-container\"> <fieldset> <legend>Images</legend> <div class=\"control-group url optional\"> <label class=\"url optional control-label\" for=\"media_image_url\"> <input name=\"media_type\" type=\"radio\" value=\"image_url\" checked=\"checked\"/>URL </label> <div class=\"controls\"> <input class=\"span6 string url optional\" id=\"media_image_url\" name=\"media[image_url]\" size=\"50\" type=\"text\"> </div> </div> </fieldset> <fieldset> <legend>Videos</legend> <div class=\"control-group url optional\"> <label class=\"url optional control-label\" for=\"media_youtube_url\"> <input name=\"media_type\" type=\"radio\" value=\"youtube_url\"/>YouTube URL </label> <div class=\"controls\"> <input class=\"span6 string url optional\" id=\"media_youtube_url\" name=\"media[youtube_url]\" size=\"50\" type=\"text\" placeholder=\"http://youtu.be/Pny4hoN8eII\"> </div> </div> <div class=\"control-group url optional\"> <label class=\"url optional control-label\" for=\"media_vimeo_url\"> <input name=\"media_type\" type=\"radio\" value=\"vimeo_url\"/>Vimeo URL </label> <div class=\"controls\"> <input class=\"span6 string url optional\" id=\"media_vimeo_url\" name=\"media[vimeo_url]\" size=\"50\" type=\"text\" placeholder=\"http://vimeo.com/25708134\"> </div> </div> </fieldset> <fieldset> <legend>Options</legend> <div class=\"media-options\" id=\"image_url_options\"> <div class=\"control-group select optional\"> <label class=\"select optional control-label\" for=\"media_image_alignment\">Alignment</label> <div class=\"controls\"> <select class=\"select optional\" id=\"media_image_alignment\" name=\"media[image_alignment]\"> <option value=\"\">None</option> <option value=\"left\">Left</option> <option value=\"right\">Right</option> <option value=\"top\">Top</option> <option value=\"middle\">Middle</option> <option value=\"bottom\">Bottom</option> <option value=\"absmiddle\">Absolute Middle</option> <option value=\"absbottom\">Absolute Bottom</option> </select> </div> <label class=\"select optional control-label\" for=\"media_image_float\">Float</label> <div class=\"controls\"> <select class=\"select optional\" id=\"media_image_float\" name=\"media[image_float]\"> <option value=\"\">None</option> <option value=\"left\">Left</option> <option value=\"right\">Right</option> <option value=\"none\">None</option> <option value=\"inherit\">Inherit</option> </select> </div> </div> </div> <div class=\"media-options\" id=\"youtube_url_options\" style=\"display:none\"> <div class=\"control-group number optional\"> <label class=\"number optional control-label\" for=\"media_youtube_width\">Width</label> <div class=\"controls\"> <input class=\"span2 number optional\" id=\"media_youtube_width\" name=\"media[youtube_width]\" size=\"50\" type=\"number\" value=\"560\"> </div> </div> <div class=\"control-group number optional\"> <label class=\"number optional control-label\" for=\"media_youtube_height\">Height</label> <div class=\"controls\"> <input class=\"span2 number optional\" id=\"media_youtube_height\" name=\"media[youtube_height]\" size=\"50\" type=\"number\" value=\"349\"> </div> </div> </div> <div class=\"media-options\" id=\"vimeo_url_options\" style=\"display:none\"> <div class=\"control-group number optional\"> <label class=\"number optional control-label\" for=\"media_vimeo_width\">Width</label> <div class=\"controls\"> <input class=\"span2 number optional\" id=\"media_vimeo_width\" name=\"media[vimeo_width]\" size=\"50\" type=\"number\" value=\"400\"> </div> </div> <div class=\"control-group number optional\"> <label class=\"number optional control-label\" for=\"media_vimeo_height\">Height</label> <div class=\"controls\"> <input class=\"span2 number optional\" id=\"media_vimeo_height\" name=\"media[vimeo_height]\" size=\"50\" type=\"number\" value=\"225\"> </div> </div> </div> </fieldset> </div> <div class=\"form-actions mercury-display-controls\"> <input class=\"btn btn-primary\" name=\"commit\" type=\"submit\" value=\"Insert Media\"/> </div></form>";
Mercury.preloadedViews['/mercury/modals/table.html'] = "<form id=\"mercury_table\" class=\"form-horizontal\" style=\"width:700px\"> <div class=\"form-inputs mercury-display-pane-container\"> <fieldset id=\"table_display\"> <div class=\"control-group optional\"> <div class=\"controls\"> <table border=\"1\" cellspacing=\"0\"> <tr> <td>&nbsp;</td> <td>&nbsp;</td> <td>&nbsp;</td> </tr> <tr> <td>&nbsp;</td> <td>&nbsp;</td> <td>&nbsp;</td> </tr> </table> </div> </div> </fieldset> <fieldset> <div class=\"control-group buttons optional\"> <label class=\"buttons optional control-label\">Rows</label> <div class=\"controls btn-group\"> <button class=\"btn\" data-action=\"addRowBefore\">Add Before</button> <button class=\"btn\" data-action=\"addRowAfter\">Add After</button> <button class=\"btn\" data-action=\"removeRow\">Remove</button> </div> </div> <div class=\"control-group buttons optional\"> <label class=\"buttons optional control-label\">Columns</label> <div class=\"controls btn-group\"> <button class=\"btn\" data-action=\"addColumnBefore\">Add Before</button> <button class=\"btn\" data-action=\"addColumnAfter\">Add After</button> <button class=\"btn\" data-action=\"removeColumn\">Remove</button> </div> </div> <hr/> <div class=\"control-group buttons optional\"> <label class=\"buttons optional control-label\">Row Span</label> <div class=\"controls btn-group\"> <button class=\"btn\" data-action=\"increaseRowspan\">+</button> <button class=\"btn\" data-action=\"decreaseRowspan\">-</button> </div> </div> <div class=\"control-group buttons optional\"> <label class=\"buttons optional control-label\">Column Span</label> <div class=\"controls btn-group\"> <button class=\"btn\" data-action=\"increaseColspan\">+</button> <button class=\"btn\" data-action=\"decreaseColspan\">-</button> </div> </div> </fieldset> <fieldset> <legend>Options</legend> <div class=\"control-group select optional\"> <label class=\"select optional control-label\" for=\"table_alignment\">Alignment</label> <div class=\"controls\"> <select class=\"select optional\" id=\"table_alignment\" name=\"table[alignment]\"> <option value=\"\">None</option> <option value=\"right\">Right</option> <option value=\"left\">Left</option> </select> </div> </div> <div class=\"control-group number optional\"> <label class=\"number optional control-label\" for=\"table_border\">Border</label> <div class=\"controls\"> <input class=\"span1 number optional\" id=\"table_border\" name=\"table[border]\" size=\"50\" type=\"number\" value=\"1\"> </div> </div> <div class=\"control-group number optional\"> <label class=\"number optional control-label\" for=\"table_spacing\">Spacing</label> <div class=\"controls\"> <input class=\"span1 number optional\" id=\"table_spacing\" name=\"table[spacing]\" size=\"50\" type=\"number\" value=\"0\"> </div> </div> </fieldset> </div> <div class=\"form-actions mercury-display-controls\"> <input class=\"btn btn-primary\" name=\"commit\" type=\"submit\" value=\"Insert Table\"/> </div></form>";
// -- PALETTES --
Mercury.preloadedViews['/mercury/palettes/backcolor.html'] = "<div class=\"mercury-color-picker\"> <div class=\"picker\" style=\"background:#FFFFFF\"></div> <div class=\"picker\" style=\"background:#FFCCCC\"></div> <div class=\"picker\" style=\"background:#FFCC99\"></div> <div class=\"picker\" style=\"background:#FFFF99\"></div> <div class=\"picker\" style=\"background:#FFFFCC\"></div> <div class=\"picker\" style=\"background:#99FF99\"></div> <div class=\"picker\" style=\"background:#99FFFF\"></div> <div class=\"picker\" style=\"background:#CCFFFF\"></div> <div class=\"picker\" style=\"background:#CCCCFF\"></div> <div class=\"picker\" style=\"background:#FFCCFF\"></div> <div class=\"picker\" style=\"background:#CCCCCC\"></div> <div class=\"picker\" style=\"background:#FF6666\"></div> <div class=\"picker\" style=\"background:#FF9966\"></div> <div class=\"picker\" style=\"background:#FFFF66\"></div> <div class=\"picker\" style=\"background:#FFFF33\"></div> <div class=\"picker\" style=\"background:#66FF99\"></div> <div class=\"picker\" style=\"background:#33FFFF\"></div> <div class=\"picker\" style=\"background:#66FFFF\"></div> <div class=\"picker\" style=\"background:#9999FF\"></div> <div class=\"picker\" style=\"background:#FF99FF\"></div> <div class=\"picker\" style=\"background:#C0C0C0\"></div> <div class=\"picker\" style=\"background:#FF0000\"></div> <div class=\"picker\" style=\"background:#FF9900\"></div> <div class=\"picker\" style=\"background:#FFCC66\"></div> <div class=\"picker\" style=\"background:#FFFF00\"></div> <div class=\"picker\" style=\"background:#33FF33\"></div> <div class=\"picker\" style=\"background:#66CCCC\"></div> <div class=\"picker\" style=\"background:#33CCFF\"></div> <div class=\"picker\" style=\"background:#6666CC\"></div> <div class=\"picker\" style=\"background:#CC66CC\"></div> <div class=\"picker\" style=\"background:#999999\"></div> <div class=\"picker\" style=\"background:#CC0000\"></div> <div class=\"picker\" style=\"background:#FF6600\"></div> <div class=\"picker\" style=\"background:#FFCC33\"></div> <div class=\"picker\" style=\"background:#FFCC00\"></div> <div class=\"picker\" style=\"background:#33CC00\"></div> <div class=\"picker\" style=\"background:#00CCCC\"></div> <div class=\"picker\" style=\"background:#3366FF\"></div> <div class=\"picker\" style=\"background:#6633FF\"></div> <div class=\"picker\" style=\"background:#CC33CC\"></div> <div class=\"picker\" style=\"background:#666666\"></div> <div class=\"picker\" style=\"background:#990000\"></div> <div class=\"picker\" style=\"background:#CC6600\"></div> <div class=\"picker\" style=\"background:#CC9933\"></div> <div class=\"picker\" style=\"background:#999900\"></div> <div class=\"picker\" style=\"background:#009900\"></div> <div class=\"picker\" style=\"background:#339999\"></div> <div class=\"picker\" style=\"background:#3333FF\"></div> <div class=\"picker\" style=\"background:#6600CC\"></div> <div class=\"picker\" style=\"background:#993399\"></div> <div class=\"picker\" style=\"background:#333333\"></div> <div class=\"picker\" style=\"background:#660000\"></div> <div class=\"picker\" style=\"background:#993300\"></div> <div class=\"picker\" style=\"background:#996633\"></div> <div class=\"picker\" style=\"background:#666600\"></div> <div class=\"picker\" style=\"background:#006600\"></div> <div class=\"picker\" style=\"background:#336666\"></div> <div class=\"picker\" style=\"background:#000099\"></div> <div class=\"picker\" style=\"background:#333399\"></div> <div class=\"picker\" style=\"background:#663366\"></div> <div class=\"picker\" style=\"background:#000000\"></div> <div class=\"picker\" style=\"background:#330000\"></div> <div class=\"picker\" style=\"background:#663300\"></div> <div class=\"picker\" style=\"background:#663333\"></div> <div class=\"picker\" style=\"background:#333300\"></div> <div class=\"picker\" style=\"background:#003300\"></div> <div class=\"picker\" style=\"background:#003333\"></div> <div class=\"picker\" style=\"background:#000066\"></div> <div class=\"picker\" style=\"background:#330099\"></div> <div class=\"picker\" style=\"background:#330033\"></div> <div class=\"last-picked\">Last Color Picked</div></div>";
Mercury.preloadedViews['/mercury/palettes/forecolor.html'] = "<div class=\"mercury-color-picker\"> <div class=\"picker\" style=\"background:#FFFFFF\"></div> <div class=\"picker\" style=\"background:#FFCCCC\"></div> <div class=\"picker\" style=\"background:#FFCC99\"></div> <div class=\"picker\" style=\"background:#FFFF99\"></div> <div class=\"picker\" style=\"background:#FFFFCC\"></div> <div class=\"picker\" style=\"background:#99FF99\"></div> <div class=\"picker\" style=\"background:#99FFFF\"></div> <div class=\"picker\" style=\"background:#CCFFFF\"></div> <div class=\"picker\" style=\"background:#CCCCFF\"></div> <div class=\"picker\" style=\"background:#FFCCFF\"></div> <div class=\"picker\" style=\"background:#CCCCCC\"></div> <div class=\"picker\" style=\"background:#FF6666\"></div> <div class=\"picker\" style=\"background:#FF9966\"></div> <div class=\"picker\" style=\"background:#FFFF66\"></div> <div class=\"picker\" style=\"background:#FFFF33\"></div> <div class=\"picker\" style=\"background:#66FF99\"></div> <div class=\"picker\" style=\"background:#33FFFF\"></div> <div class=\"picker\" style=\"background:#66FFFF\"></div> <div class=\"picker\" style=\"background:#9999FF\"></div> <div class=\"picker\" style=\"background:#FF99FF\"></div> <div class=\"picker\" style=\"background:#C0C0C0\"></div> <div class=\"picker\" style=\"background:#FF0000\"></div> <div class=\"picker\" style=\"background:#FF9900\"></div> <div class=\"picker\" style=\"background:#FFCC66\"></div> <div class=\"picker\" style=\"background:#FFFF00\"></div> <div class=\"picker\" style=\"background:#33FF33\"></div> <div class=\"picker\" style=\"background:#66CCCC\"></div> <div class=\"picker\" style=\"background:#33CCFF\"></div> <div class=\"picker\" style=\"background:#6666CC\"></div> <div class=\"picker\" style=\"background:#CC66CC\"></div> <div class=\"picker\" style=\"background:#999999\"></div> <div class=\"picker\" style=\"background:#CC0000\"></div> <div class=\"picker\" style=\"background:#FF6600\"></div> <div class=\"picker\" style=\"background:#FFCC33\"></div> <div class=\"picker\" style=\"background:#FFCC00\"></div> <div class=\"picker\" style=\"background:#33CC00\"></div> <div class=\"picker\" style=\"background:#00CCCC\"></div> <div class=\"picker\" style=\"background:#3366FF\"></div> <div class=\"picker\" style=\"background:#6633FF\"></div> <div class=\"picker\" style=\"background:#CC33CC\"></div> <div class=\"picker\" style=\"background:#666666\"></div> <div class=\"picker\" style=\"background:#990000\"></div> <div class=\"picker\" style=\"background:#CC6600\"></div> <div class=\"picker\" style=\"background:#CC9933\"></div> <div class=\"picker\" style=\"background:#999900\"></div> <div class=\"picker\" style=\"background:#009900\"></div> <div class=\"picker\" style=\"background:#339999\"></div> <div class=\"picker\" style=\"background:#3333FF\"></div> <div class=\"picker\" style=\"background:#6600CC\"></div> <div class=\"picker\" style=\"background:#993399\"></div> <div class=\"picker\" style=\"background:#333333\"></div> <div class=\"picker\" style=\"background:#660000\"></div> <div class=\"picker\" style=\"background:#993300\"></div> <div class=\"picker\" style=\"background:#996633\"></div> <div class=\"picker\" style=\"background:#666600\"></div> <div class=\"picker\" style=\"background:#006600\"></div> <div class=\"picker\" style=\"background:#336666\"></div> <div class=\"picker\" style=\"background:#000099\"></div> <div class=\"picker\" style=\"background:#333399\"></div> <div class=\"picker\" style=\"background:#663366\"></div> <div class=\"picker\" style=\"background:#000000\"></div> <div class=\"picker\" style=\"background:#330000\"></div> <div class=\"picker\" style=\"background:#663300\"></div> <div class=\"picker\" style=\"background:#663333\"></div> <div class=\"picker\" style=\"background:#333300\"></div> <div class=\"picker\" style=\"background:#003300\"></div> <div class=\"picker\" style=\"background:#003333\"></div> <div class=\"picker\" style=\"background:#000066\"></div> <div class=\"picker\" style=\"background:#330099\"></div> <div class=\"picker\" style=\"background:#330033\"></div> <div class=\"last-picked\">Last Color Picked</div></div>";
// -- PANELS --
Mercury.preloadedViews['/mercury/panels/history.html'] = "<div class=\"mercury-history-panel\"> <p>The history panel is expected to be implemented with a server back end. Since this is a demo, we didn't include it.</p></div>";
Mercury.preloadedViews['/mercury/panels/notes.html'] = "<div class=\"mercury-notes-panel\"> <p>The notes panel is expected to be implemented with a server back end. Since this is a demo, we didn't include it.</p></div>";
Mercury.preloadedViews['/mercury/panels/snippets.html'] = "<div class=\"mercury-snippet-panel\"> <div class=\"filter\"> <input class=\"filter focusable\" type=\"text\"> </div> <ul> <li data-filter=\"example, snippet, favorite, beer\"> <img alt=\"Snippet Name\" data-snippet=\"example\" src=\"/assets/mercury/default-snippet.png\"/> <h4>Snippet Name</h4> <div class=\"description\">A one or two line long description of what this snippet does.</div> </li> <li data-filter=\"no options, snippet\"> <img alt=\"No Option Snippet\" data-snippet=\"no_options\" data-options=\"false\" src=\"/assets/mercury/default-snippet.png\"/> <h4>No Options Snippet</h4> <div class=\"description\">This snippet doesn't have options.</div> </li> </ul></div>";
// -- SELECTS --
Mercury.preloadedViews['/mercury/selects/formatblock.html'] = "<div class=\"mercury-select-options\"> <h1 data-tag=\"h1\">Heading 1 <span>&lt;h1&gt;</span></h1> <h2 data-tag=\"h2\">Heading 2 <span>&lt;h2&gt;</span></h2> <h3 data-tag=\"h3\">Heading 3 <span>&lt;h3&gt;</span></h3> <h4 data-tag=\"h4\">Heading 4 <span>&lt;h4&gt;</span></h4> <h5 data-tag=\"h5\">Heading 5 <span>&lt;h5&gt;</span></h5> <h6 data-tag=\"h6\">Heading 6 <span>&lt;h6&gt;</span></h6> <div data-tag=\"p\">Paragraph <span>&lt;p&gt;</span></div> <div data-tag=\"blockquote\">Blockquote <span>&lt;blockquote&gt;</span></div> <div data-tag=\"pre\">Formatted <span>&lt;pre&gt;</span></div></div>";
Mercury.preloadedViews['/mercury/selects/style.html'] = "<div class=\"mercury-select-options\"> <div class=\"red\" data-class=\"red\">Red text</div> <div class=\"large-bold\" data-class=\"large-bold\">Large bold text</div> <div class=\"blue\" data-class=\"blue\">Blue background</div></div>";
/*!
* Mercury Editor is a CoffeeScript and jQuery based WYSIWYG editor. Documentation and other useful information can be
* found at https://github.com/jejacks0n/mercury
*
* Copyright (c) 2011 Jeremy Jackson
*
* Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated
* documentation files (the "Software"), to deal in the Software without restriction, including without limitation the
* rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit
* persons to whom the Software is furnished to do so, subject to the following conditions:
*
* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the
* Software.
*
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE
* WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
* COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR
* OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
*
*/
// ## Default Packages
//
// Some default packages are provided for you. If you want to define your own, feel free to do so before including this
// script. These, or your own packages can be specified to the loader in query params (read below for details).
if (!window.mercuryPackages) window.mercuryPackages = {
all: {javascripts: 'deploy/lib/mercury/jquery-1.7.js,deploy/lib/mercury/mercury.min.js,deploy/lib/mercury/mercury_dialogs.js,deploy/js/gadget_mercury.js', stylesheets: 'deploy/css/mercury.bundle.css'},
development: {javascripts: 'jquery-1.7.js,mercury.js', stylesheets: 'mercury.css'},
bundled: {javascripts: 'javascripts/jquery-1.7.js,javascripts/mercury.min.js,javascripts/mercury_dialogs.js', stylesheets: 'stylesheets/mercury.bundle.css'}
};
// ## Mercury Loader
(function() {
// Useragent detection, which we use to determine if the client is supported. We do this method instead of checking
// features because many of the features are supported in IE, but aren't implemented to the W3C spec.
var browser = {
webkit: /(webkit)[ \/]([\w.]+)/,
opera: /(opera)(?:.*version)?[ \/]([\w.]+)/,
msie: /(msie) ([\w.]+)/,
mozilla: /(mozilla)(?:.*? rv:([\w.]+))?/
};
var ua = navigator.userAgent.toLowerCase();
var match = browser.webkit.exec(ua) || browser.opera.exec(ua) || browser.msie.exec(ua) || ua.indexOf("compatible") < 0 && browser.mozilla.exec(ua) || [];
browser = {version: match[2] || "0" };
browser[match[1] || ""] = true;
// If the browser isn't supported, we don't try to do anything more. We do direct userAgent detection here because IE
// thinks it's supported but isn't -- in part because it has it's own implementation of the contentEditable spec.
if (document.getElementsByTagName && document.getElementById && document.designMode && !browser.konqueror && !browser.msie) {
// supported
} else {
return;
}
// Default options, which can be overridden by specifying them in query params to the loader script.
// You can provide any additional options to the loader, and they will be passed to the PageEditor instance when it's
// created, so for instance you could put `visible=false`, and the editor be hidden after it's created.
var options = {
// A path or url from which the javascripts and css should be loaded.
src: window.location.origin,
// A value defined in the packages above. Development is used by default. If you want to provide your own package
// you can just define one before including this script.
pack: 'development'
};
// Hide the document during loading so there isn't a flicker while mercury is being loaded.
var head = document.getElementsByTagName("head")[0];
if (window == top) {
var style = document.createElement('style');
var rules = document.createTextNode('body{visibility:hidden;display:none}');
style.type = 'text/css';
if (style.styleSheet) style.styleSheet.cssText = rules.nodeValue;
else style.appendChild(rules);
head.appendChild(style);
}
// Because Mercury loads the document it's going to edit into an iframe we do some tweaks to the current document to
// make that feel more seamless.
function loadMercury() {
if (document.mercuryLoaded) return;
if (timer) window.clearTimeout(timer);
document.mercuryLoaded = true;
// If the current window is the top window, it means that Mercury hasn't been loaded yet. So we load it.
if (window == top) {
var i;
// Find the loader script and determine what options were provided so the defaults can be overridden. To provide
// options just pass them in as query params (eg. `mercury_loader.js?src=/asset_path&pack=bundled`)
var scripts = document.getElementsByTagName('script');
for (i = 0; i <= scripts.length - 1; i += 1) {
var match = scripts[i].src.match(/mercury_loader\.js\??(.*)?$/);
if (!match || !match[1]) continue;
match[1].replace(/([^&=]*)=([^&=]*)/g, function (m, attr, value) {
if (['true', 'false'].indexOf(value) >= 0) value = JSON.parse(value);
options[attr] = value;
});
}
var pack = window.mercuryPackages[options.pack];
setTimeout(function() {
// Once we're ready to load Mercury we clear the document contents, and add in the css and javascript tags.
// Once the script has loaded we display the body again, and instantiate a new instance of Mercury.PageEditor.
document.body.innerHTML = '<div style="height:0;overflow:hidden;">Mercury</div>';
for (i = 0; i <= document.styleSheets.length - 1; i += 1) {
document.styleSheets[i].disabled = true;
}
// Load all the stylesheets.
var stylesheets = pack.stylesheets.split(',');
for (i = 0; i <= stylesheets.length - 1; i += 1) {
var link = document.createElement('link');
link.href = options.src + '/' + stylesheets[i];
link.media = 'screen';
link.rel = 'stylesheet';
link.type = 'text/css';
head.appendChild(link);
}
// Load all the javascripts.
var javascripts = pack.javascripts.split(',');
var loaded = 0;
function loadScript(src) {
var script = document.createElement('script');
script.src = options.src + '/' + src;
script.type = 'text/javascript';
script.charset = 'utf-8';
head.appendChild(script);
script.onload = function() {
loaded += 1;
if (loaded >= javascripts.length) {
document.body.style.visibility = 'visible';
document.body.style.display = 'block';
// Instantiate the PageEditor, passing in the options that were provided to the loader.
new Mercury.PageEditor(null, options);
// If there's a mercuryLoaded function available, call it. You can provide one before the loading script
// and it will be called after everything is loaded, but before everything is initialized. You can bind
// to the mercury:ready event or use Mercury.bind('ready', function() {}).
if (typeof(window.mercuryLoaded) == 'function') {
window.mercuryLoaded();
}
} else {
loadScript(javascripts[loaded]);
}
};
}
loadScript(javascripts[loaded]);
}, 1);
} else if (top.Mercury) {
// Since this file will be included in the iframe as well, we use it to tell Mercury that the document is ready to
// be worked on. By firing this event we're able to build the regions and get everything ready without having to
// wait for assets and slow javascripts to load or complete.
window.Mercury = top.Mercury;
Mercury.trigger('initialize:frame');
}
}
// This is a common technique for determining if the document has loaded yet, and is based on the methods used in
// Prototype.js. The following portions just call loadMercury once it's appropriate to do so.
//
// Support for the DOMContentLoaded event is based on work by Dan Webb, Matthias Miller, Dean Edwards, John Resig,
// and Diego Perini.
var timer;
function checkReadyState() {
if (document.readyState === 'complete') {
document.stopObserving('readystatechange', checkReadyState);
loadMercury();
}
}
function pollDoScroll() {
try { document.documentElement.doScroll('left'); }
catch(e) {
timer = pollDoScroll.defer();
return;
}
loadMercury();
}
if (document.addEventListener) {
document.addEventListener('DOMContentLoaded', loadMercury, false);
} else {
document.observe('readystatechange', checkReadyState);
if (window == top) { timer = pollDoScroll.defer(); }
}
})();
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment