<!doctype html>
<html>
<head>
<title>Spytext Demo</title>
<link rel="stylesheet" href="spytext-toolbar.css" />
<link rel="stylesheet" href="style.css" />
<script src="https://npmcdn.com/spytext@latest/dist/spytext.min.js"></script>
<script src="script.js"></script>
</head>
<body>
<main>
<h1>Spytext Demo</h1>
<div id="spytext-field" class="spytext-field" contenteditable="true"><h1>Lorem ipsum</h1><p> dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p><ul><li>001<br><ul><li>002<br><ul><li>003<br></li><li>004<br></li><li>005<br></li><li>006<br></li></ul></li></ul></li><li>007<br></li><li>008<br></li><li>009<br></li><li>010<br></li><li>011<br></li><li>012</li></ul><h2>Lorem ipsum</h2><p>Dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p><ul><li>001<br><ul></ul></li><li>002<br><ul></ul></li><li>003<br><ul></ul></li><li>004<br><ul><li>005<br><ul><li>006<br><ul><li>007<br><ul></ul></li></ul></li></ul></li></ul></li><li>008<br><ul></ul></li><li>009<br><ul></ul></li><li>010<br><ul></ul></li><li>011<br><ul><li>012</li></ul></li></ul><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p></div>
</main>
<footer>
Footer
</footer>
</body>
</html>
document.addEventListener('DOMContentLoaded', function () {
var spytext03 = new Spytext({ el: document.getElementById('spytext-field') });
}, false);
/* Styles go here */
.spytext-field {
outline: 1px solid red;
padding: 10px;
}
.spytext-field > :first-child {
margin-top: 0;
padding-top: 0;
}
.spytext-toolbar {
display: flex;
position: fixed;
padding: 5px;
top: -200px;
z-index: 6010;
width: 100%;
transition: top 0.5s; }
.spytext-toolbar.active {
top: 0; }
.spytext-toolbar > .container {
background-color: #eee;
padding: 5px;
border: 1px solid #d0d0d0;
margin: 0 auto; }
.spytext-toolbar > .container:after {
content: "";
display: block;
height: 0;
clear: both; }
.spytext-toolbar > .container > ul {
float: left;
display: block;
list-style-type: none;
margin: 0;
padding: 0;
margin-right: 10px; }
.spytext-toolbar > .container > ul:after {
content: "";
display: block;
height: 0;
clear: both; }
.spytext-toolbar > .container > ul.spytext-dropdown {
height: 36px;
overflow: hidden;
position: relative; }
.spytext-toolbar > .container > ul.spytext-dropdown:hover {
overflow: visible; }
.spytext-toolbar > .container > ul.spytext-dropdown:not(:hover).pseudo:before {
display: block;
background: #E4E4E4;
width: 100%;
text-align: center;
line-height: 36px;
height: 36px; }
.spytext-toolbar > .container > ul.spytext-dropdown:not(:hover).pseudo-list:before {
content: 'List'; }
.spytext-toolbar > .container > ul.spytext-dropdown:not(:hover).pseudo-multiple:before {
content: 'Multiple'; }
.spytext-toolbar > .container > ul.spytext-dropdown:not(:hover) > li.active {
position: absolute;
z-index: 9999;
top: 0; }
.spytext-toolbar > .container > ul.spytext-dropdown > li {
border-bottom: 1px solid #cbcbcb; }
.spytext-toolbar > .container > ul.spytext-dropdown > li > button {
/*Reset's every elements apperance*/
background: none repeat scroll 0 0 transparent;
border: medium none;
border-spacing: 0;
border-radius: 0;
font-family: inherit;
font-size: inherit;
font-weight: inherit;
line-height: inherit;
margin: 0;
padding: 0;
text-align: left;
text-decoration: none;
text-transform: inherit;
text-indent: 0;
line-height: 2.25rem;
height: 2.25rem;
padding: 0 2.5rem;
font-size: 1em;
background: #E4E4E4;
color: black; }
.spytext-toolbar > .container > ul.spytext-dropdown > li > button:focus {
outline: 0; }
.spytext-toolbar > .container > ul.spytext-dropdown > li > button::-moz-focus-inner {
border: 0;
padding: 0; }
.spytext-toolbar > .container > ul.spytext-dropdown > li > button:hover {
cursor: pointer;
background: #d2d2d2; }
.spytext-toolbar > .container > ul.spytext-dropdown > li.active > button {
background: silver; }
.spytext-toolbar > .container > ul.spytext-dropdown > li:last-child {
border: none; }
.spytext-toolbar > .container > ul.spytext-button-group > li {
display: block;
float: left; }
.spytext-toolbar > .container > ul.spytext-button-group button.spytext-button {
/*Reset's every elements apperance*/
background: none repeat scroll 0 0 transparent;
border: medium none;
border-spacing: 0;
border-radius: 0;
font-family: inherit;
font-size: inherit;
font-weight: inherit;
line-height: inherit;
margin: 0;
padding: 0;
text-align: left;
text-decoration: none;
text-transform: inherit;
text-indent: 0;
display: block;
vertical-align: baseline;
margin: 0;
border: none;
padding: 10px 20px;
height: inherit;
line-height: 1;
text-decoration: none;
text-align: center;
background-color: #E4E4E4;
color: #333333;
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5) inset;
transition: background-color 0.3s; }
.spytext-toolbar > .container > ul.spytext-button-group button.spytext-button:focus {
outline: 0; }
.spytext-toolbar > .container > ul.spytext-button-group button.spytext-button::-moz-focus-inner {
border: 0;
padding: 0; }
.spytext-toolbar > .container > ul.spytext-button-group button.spytext-button:disabled {
cursor: default;
color: #999; }
.spytext-toolbar > .container > ul.spytext-button-group button.spytext-button:disabled:before {
opacity: 0.4; }
.spytext-toolbar > .container > ul.spytext-button-group button.spytext-button.active {
background: #CCC; }
.spytext-toolbar > .container > ul.spytext-button-group button.spytext-button:not(:disabled):not(.active):hover:active {
box-shadow: 0 0 2px 2px #aaa; }
.spytext-toolbar > .container > ul.spytext-button-group button.spytext-button:not(:disabled):not(.active):hover {
cursor: pointer;
background-color: #d2d2d2; }
.spytext-toolbar > .container > ul.spytext-button-group button.spytext-button:before {
content: "";
display: block;
width: 16px;
height: 16px;
background-position: center center;
background-size: auto 100%;
background-repeat: no-repeat; }
.spytext-toolbar > .container > ul.spytext-button-group button.spytext-button > span {
display: none; }
.spytext-toolbar > .container > ul.spytext-button-group button.spytext-button.type-paragraph:before {
width: auto;
content: "<P>"; }
.spytext-toolbar > .container > ul.spytext-button-group button.spytext-button.type-heading-1:before {
width: auto;
content: "<H1>"; }
.spytext-toolbar > .container > ul.spytext-button-group button.spytext-button.type-heading-2:before {
width: auto;
content: "<H2>"; }
.spytext-toolbar > .container > ul.spytext-button-group button.spytext-button.type-heading-3:before {
width: auto;
content: "<H3>"; }
.spytext-toolbar > .container > ul.spytext-button-group button.spytext-button.type-heading-4:before {
width: auto;
content: "<H4>"; }
.spytext-toolbar > .container > ul.spytext-button-group button.spytext-button.type-heading-5:before {
width: auto;
content: "<H5>"; }
.spytext-toolbar > .container > ul.spytext-button-group button.spytext-button.type-heading-6:before {
width: auto;
content: "<H6>"; }
.spytext-toolbar > .container > ul.spytext-button-group button.spytext-button.undo:before {
background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzODQuNTI2IiBoZWlnaHQ9IjQxMS45OTgiIHZpZXdCb3g9IjAgMCAzODQuNTI2MzcgNDExLjk5NzUiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDUxMiA1MTIiPjxwYXRoIGQ9Ik0zMjQuMTkxIDYwLjMzNGMtODAuMzI0LTgwLjMyNS0yMTAuNDc5LTgwLjQ0My0yOTAuOTU1LS4zNjNsLTMzLjEzMS0zMy4xMzItLjEwNSAxMjIuODM4IDEyMi44MzgtLjEwNS0zMS4zMzYtMzEuMzM1YzQ4LjI5OS00Ny45MDEgMTI2LjI3OS00Ny43ODMgMTc0LjQyNC4zNjMgNDguMjcgNDguMjY5IDQ4LjI3IDEyNi41MjkgMCAxNzQuNzk3LTI0LjEzNSAyNC4xMzQtNTUuNzY2IDM2LjIwMS04Ny4zOTggMzYuMjAxdjgyLjRjNTIuNzIxIDAgMTA1LjQzOS0yMC4xMTIgMTQ1LjY2NC02MC4zMzYgODAuNDQ2LTgwLjQ0OCA4MC40NDYtMjEwLjg4LS4wMDEtMjkxLjMyOHoiLz48L3N2Zz4=); }
.spytext-toolbar > .container > ul.spytext-button-group button.spytext-button.redo:before {
background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzODQuNTI2IiBoZWlnaHQ9IjQxMS45OTYiIHZpZXdCb3g9IjAgMCAzODQuNTI2MzcgNDExLjk5NTY0IiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCA1MTIgNTEyIj48cGF0aCBkPSJNNjAuMzM1IDYwLjMzM2M4MC4zMjQtODAuMzI0IDIxMC40NzktODAuNDQyIDI5MC45NTUtLjM2MmwzMy4xMzEtMzMuMTMyLjEwNSAxMjIuODM4LTEyMi44MzgtLjEwNSAzMS4zMzYtMzEuMzM2Yy00OC4yOTktNDcuOS0xMjYuMjc5LTQ3Ljc4Mi0xNzQuNDI0LjM2My00OC4yNyA0OC4yNy00OC4yNyAxMjYuNTI5IDAgMTc0Ljc5NiAyNC4xMzUgMjQuMTM1IDU1Ljc2NiAzNi4yMDEgODcuMzk4IDM2LjIwMXY4Mi40Yy01Mi43MjEgMC0xMDUuNDM5LTIwLjExMS0xNDUuNjY0LTYwLjMzNi04MC40NDYtODAuNDQ2LTgwLjQ0Ni0yMTAuODc4LjAwMS0yOTEuMzI3eiIvPjwvc3ZnPg==); }
.spytext-toolbar > .container > ul.spytext-button-group button.spytext-button.bold:before {
background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzNjYuNTg2IiBoZWlnaHQ9IjQxMiIgdmlld0JveD0iMCAwIDM2Ni41ODU4MiA0MTIiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDUxMiA1MTIiPjxwYXRoIGQ9Ik0zMDIuMTM0IDE5MC45MDZjNzkuMDM2LTQwLjQyNyA3Ni4yMDYtMTg4LjY1OC03NS4xODMtMTkwLjkwNmgtMjI2Ljk1MXY1MGMzNC4yNTMgMCA0OS44NDcgMTIuODg5IDQ5Ljg0NyA0Ni4wNTV2MjIxLjE2OWMwIDI4Ljk5OS03LjkyOCA0NC43NzYtNDkuODQ3IDQ0Ljc3NnY1MGgyMTMuNDg3YzE4OC45NTIgMCAxODMuNTQ1LTE4Ni41OTUgODguNjQ3LTIyMS4wOTR6bS0xNzAuMTExLTEzMi4zNTFoNjMuNjIyYzQwLjQ1NyAwIDcwLjgxNyAxNy43NTUgNzAuODE3IDU3LjQ0MiAwIDM0Ljk0NC0yNC45MzkgNTMuMzk5LTYwLjMwNSA1My4zOTloLTc0LjEzNHYtMTEwLjg0MXptNzQuMDI3IDI5NC44OWgtNzQuMDI3di0xMjkuODQ4aDc1LjQwN2MzOC43OTQuNDExIDY3LjQxOCAyNS4yOTIgNjcuNDE4IDYwLjE1MS4wMDEgMzQuNDc0LTIxLjAzNiA2OS42OTctNjguNzk4IDY5LjY5N3oiLz48L3N2Zz4=); }
.spytext-toolbar > .container > ul.spytext-button-group button.spytext-button.italic:before {
background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMTAuMzQ0IiBoZWlnaHQ9IjQxMiIgdmlld0JveD0iMCAwIDMxMC4zNDM5OSA0MTIiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDUxMiA1MTIiPjxwYXRoIGQ9Ik0xMTIuNzA0IDM1Ni44ODljLTYuMTk5IDEyLjU2Mi0xLjE2NyAyMC4xNDEgMTEuMjM0IDIwLjE0MWgyNC40MTJ2MzQuOTdoLTE0OC4zNXYtMzQuOTcxaDE1LjQxMmMyMy4yODggMCAyOC43MTMtMTUuNzE3IDM3LjAzMS0zMC40MzVsMTQ0LjY1OC0yODguNjdjNi45MDUtMTQuNjI2LTIuNTY1LTIyLjk1NC0xNC42OTUtMjIuOTU0aC0xOS40MTJ2LTM0Ljk3aDE0Ny4zNXYzNC45NzFoLTE0LjQxMWMtMjAuMDY1IDAtMjcuMzk5IDExLjA4Ni0zNS4zNjEgMjYuMDIxbC0xNDcuODY4IDI5NS44OTd6Ii8+PC9zdmc+); }
.spytext-toolbar > .container > ul.spytext-button-group button.spytext-button.underline:before, .spytext-toolbar > .container > ul.spytext-button-group button.spytext-button[data-st-button-type="underline"]:before, .spytext-toolbar > .container > ul.spytext-button-group button.spytext-button[st-button-type="underline"]:before {
background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzNTQuOTU2IiBoZWlnaHQ9IjQxMS45OTgiIHZpZXdCb3g9IjAgMCAzNTQuOTU1OTkgNDExLjk5Nzk5IiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCA1MTIgNTEyIj48cGF0aCBkPSJNMzI2LjMzMiA0MTEuOTk4aC0yOTcuOTMydi00MC4wMjFoMjk3LjkzMnY0MC4wMjF6bS0xMDIuMzQtNDExLjk5OHYzNS4wMThjMjguNzM2IDAgMzYuODM3IDE2LjQzOCAzNi44MzcgMjYuNTd2MTQyLjYyMWMwIDUwLjA3OC0zMi45NSA3OS45ODYtODMuMzUgNzkuOTg2LTUwLjQgMC04My4zNS0yOS45MDgtODMuMzUtNzkuOTg2di0xNDIuNjIxYzAtMTAuMTMzIDguMTAxLTI2LjU3IDM2LjgzNy0yNi41N3YtMzUuMDE4aC0xMzAuOTY2djM1LjAxOGMyOS40NjUgMCAzNi4zOTkgMTAuMjE1IDM2LjM5OSAyNi41N3YxNDIuNzgzYzAgOTEuODUxIDU0LjAzMSAxMzYuNjk5IDE0MS4wNzkgMTM2LjY5OSA4Ni45NTIgMCAxNDEuMDc5LTQ0Ljg0OSAxNDEuMDc5LTEzNi42OTl2LTE0Mi43ODNjMC0xNi4zNTUgNi45MzUtMjYuNTcgMzYuMzk5LTI2LjU3di0zNS4wMThoLTEzMC45NjR6Ii8+PC9zdmc+); }
.spytext-toolbar > .container > ul.spytext-button-group button.spytext-button.strike-through:before {
background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0MTIiIGhlaWdodD0iNDEyLjAwMiIgdmlld0JveD0iMCAwIDQxMiA0MTIuMDAxNjIiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDUxMiA1MTIiPjxwYXRoIGQ9Ik0zMzEuOTkyIDI1Mi43NjljNi4xNDUgMTIuNjk4IDkuNjk5IDI3LjQ1OCA5LjY5OSA0NC44ODkgMCAxMTguNzc5LTE1My42NyAxMzYuOTgyLTI1OS42MjMgOTEuMzJ2LTc1Ljk2NWgzNy42MTNjMy45IDMxLjA0NCAyOC45IDQ3LjA3NCA3My4wMDYgNDcuMDc0IDQyLjk3MyAwIDc3LjkyOC0xNy41NDYgODEuNjIzLTU1Ljg4NCAyLjE4NC0yMi42ODYtOC4zNzMtMzguNTg5LTI1LjU3OC01MS40MzVoODMuMjZ6bS04OC43MjgtNzAuMDAxYy01My42MjMtMjQuMDA5LTEwNy4xODItNDAuOTk1LTk2Ljc5Ny05MS4yNDQgMTAuNzE5LTUxLjg3MiAxMjMuMTE1LTYxLjQ2OCAxMzMuMjQ4LjQ1OGgzNy4yMjF2LTc2LjY4N2MtMTM0LjkxNC00MC4xMzUtMjM4LjYyNyAxLjEzNC0yMzguNjI3IDk1LjUwMSAwIDMyLjYwNSAxNC43OTkgNTQuOTM4IDM2LjI2OCA3MS45NzJoLTExNC41Nzd2NDBoNDEydi00MGgtMTY4LjczNnoiLz48L3N2Zz4=); }
.spytext-toolbar > .container > ul.spytext-button-group button.spytext-button.remove-format:before {
width: 18px;
background-size: 100% auto;
background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iNzE0LjI0IiB3aWR0aD0iMTA3MS4zMzMiPjxwYXRoIGQ9Ik00OTkuOTU0IDY0Mi44MTZsMTg3LjQ4OC0yMTQuMjcyaC00MjguNTQ0bC0xODcuNDg4IDIxNC4yNzJoNDI4LjU0NHptNTY1LjI1NC02MDAuOTY2cTguMzcgMTguOTcyIDUuMzAxIDM5Ljg5Ny0zLjA2OSAyMC45MjUtMTcuMDE5IDM2LjU0OWwtNDk5Ljk2OCA1NzEuMzkycS0yMS4yMDQgMjQuNTUyLTUzLjU2OCAyNC41NTJoLTQyOC41NDRxLTIxLjIwNCAwLTM4Ljc4MS0xMS40MzktMTcuNTc3LTExLjQzOS0yNi41MDUtMzAuNDExLTguMzctMTguOTcyLTUuMzAxLTM5Ljg5NyAzLjA2OS0yMC45MjUgMTcuMDE5LTM2LjU0OWw0OTkuOTY4LTU3MS4zOTJxMjEuMjA0LTI0LjU1MiA1My41NjgtMjQuNTUyaDQyOC41NDRxMjEuMjA0IDAgMzguNzgxIDExLjQzOSAxNy41NzcgMTEuNDM5IDI2LjUwNSAzMC40MTF6Ii8+PC9zdmc+); }
.spytext-toolbar > .container > ul.spytext-button-group button.spytext-button.link:before {
background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI1MTIiIGhlaWdodD0iNTEyIiB2aWV3Qm94PSIwIDAgNTEyIDUxMiI+PHBhdGggZD0iTTE1Ni4yMjYgMTk5LjY3OWM3LjU0MS03LjU0IDE1LjkwMi0xMy43NTcgMjQuNzk0LTE4LjY1OSA0OS41NTYtMjcuMzE4IDExMy4xMTctMTIuNzg4IDE0NC45NyAzNS41MThsLTM4LjU0NyAzOC41NDdjLTExLjA1OS0yNS4yMjctMzguNS0zOS41NjUtNjUuODEzLTMzLjQ1Ni0xMC4yODIgMi4zLTIwLjA1NCA3LjQyNy0yOC4wMzkgMTUuNDEzbC03My44OTggNzMuODk2Yy0yMi40MzMgMjIuNDMzLTIyLjQzMiA1OC45MzYuMDAyIDgxLjM2OSAyMi40MzMgMjIuNDMzIDU4LjkzNSAyMi40MzMgODEuMzY4IDBsMjIuNzgtMjIuNzc5YzIwLjcxIDguMjE3IDQyLjkzOCAxMS41MDggNjQuODYyIDkuODYzbC01MC4yNzggNTAuMjc4Yy00My4xMDUgNDMuMTA1LTExMi45OTEgNDMuMTA1LTE1Ni4wOTYgMC00My4xMDUtNDMuMTA0LTQzLjEwNi0xMTIuOTkxLS4wMDEtMTU2LjA5Nmw3My44OTYtNzMuODk0em0xMTcuMzQ4LTExNy4zNDlsLTUwLjI3OCA1MC4yNzhjMjEuOTI4LTEuNjQzIDQ0LjE1MiAxLjY0OCA2NC44NjMgOS44NjVsMjIuNzc5LTIyLjc4YzIyLjQzNC0yMi40MzQgNTguOTM2LTIyLjQzNCA4MS4zNyAwIDIyLjQzNCAyMi40MzQgMjIuNDM0IDU4LjkzNiAwIDgxLjM3bC03My44OTcgNzMuODk1Yy0yMi41MDEgMjIuNTAxLTU5LjA2MSAyMi4zMTEtODEuMzY4IDAtNS4yMDItNS4yMDEtOS42OTQtMTEuNjc4LTEyLjQ4NC0xOC4wNGwtMzguNTQ2IDM4LjU0NmM0LjA0OSA2LjE0MiA4LjI2MSAxMS40NTMgMTMuNjY2IDE2Ljg1OCAxMy45NDkgMTMuOTUgMzEuNjk4IDI0LjMzOSA1Mi4xMTcgMjkuMjUxIDI2LjQ2NiA2LjM3IDU0LjgyMyAyLjgzOSA3OS4xODUtMTAuNTkyIDguODkyLTQuOTAzIDE3LjI1NC0xMS4xMTkgMjQuNzk0LTE4LjY1OWw3My44OTYtNzMuODk1YzQzLjEwNS00My4xMDUgNDMuMTA1LTExMi45OTEuMDAxLTE1Ni4wOTctNDMuMTA2LTQzLjEwNS0xMTIuOTkyLTQzLjEwNS0xNTYuMDk4IDB6Ii8+PC9zdmc+); }
.spytext-toolbar > .container > ul.spytext-button-group button.spytext-button.align-left:before {
background-size: 100% auto;
background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0MTIiIGhlaWdodD0iMzU5Ljk5OCIgdmlld0JveD0iMCAwIDQxMiAzNTkuOTk3OTkiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDUxMiA1MTIiPjxwYXRoIGQ9Ik00MTIgNDBoLTQxMnYtNDBoNDEydjQwem0tMTgyIDgwaC0yMzB2LTQwaDIzMHY0MHptMTgyIDc5Ljk5OGgtNDEydi0zOS45OThoNDEydjM5Ljk5OHptLTE4MiA4MGgtMjMwdi00MGgyMzB2NDB6bTE4MiA4MGgtNDEydi00MGg0MTJ2NDB6Ii8+PC9zdmc+); }
.spytext-toolbar > .container > ul.spytext-button-group button.spytext-button.align-center:before {
background-size: 100% auto;
background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0MTIiIGhlaWdodD0iMzU5Ljk5OCIgdmlld0JveD0iMCAwIDQxMiAzNTkuOTk3OTkiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDUxMiA1MTIiPjxwYXRoIGQ9Ik00MTIgNDBoLTQxMnYtNDBoNDEydjQwem0wIDE1OS45OThoLTQxMnYtMzkuOTk4aDQxMnYzOS45OTh6bS05MS03OS45OThoLTIzMHYtNDBoMjMwdjQwem0wIDE1OS45OThoLTIzMHYtNDBoMjMwdjQwem05MSA4MGgtNDEydi00MGg0MTJ2NDB6Ii8+PC9zdmc+); }
.spytext-toolbar > .container > ul.spytext-button-group button.spytext-button.align-right:before {
background-size: 100% auto;
background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0MTIiIGhlaWdodD0iMzU5Ljk5OCIgdmlld0JveD0iMCAwIDQxMiAzNTkuOTk3OTkiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDUxMiA1MTIiPjxwYXRoIGQ9Ik0wIDBoNDEydjQwaC00MTJ2LTQwem0xODIgODBoMjMwdjQwaC0yMzB2LTQwem0tMTgyIDgwaDQxMnYzOS45OThoLTQxMnYtMzkuOTk4em0xODIgNzkuOTk4aDIzMHY0MGgtMjMwdi00MHptLTE4MiA4MGg0MTJ2NDBoLTQxMnYtNDB6Ii8+PC9zdmc+); }
.spytext-toolbar > .container > ul.spytext-button-group button.spytext-button.align-justify:before {
background-size: 100% auto;
background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0MTIiIGhlaWdodD0iMzU5Ljk5OCIgdmlld0JveD0iMCAwIDQxMiAzNTkuOTk3OTkiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDUxMiA1MTIiPjxwYXRoIGQ9Ik0wIDBoNDEydjQwaC00MTJ2LTQwem0wIDgwaDQxMnY0MGgtNDEydi00MHptMCA4MGg0MTJ2MzkuOTk4aC00MTJ2LTM5Ljk5OHptMCA3OS45OThoNDEydjQwaC00MTJ2LTQwem0wIDgwaDQxMnY0MGgtNDEydi00MHoiLz48L3N2Zz4=); }
.spytext-toolbar > .container > ul.spytext-button-group button.spytext-button.unordered-list:before {
background-size: 100% auto;
background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0MTIiIGhlaWdodD0iMzIwIiB2aWV3Qm94PSIwIDAgNDEyIDMyMCIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgNTEyIDUxMiI+PHBhdGggZD0iTTEyOC43MjEgMjBoMjgzLjI3OXY0MGgtMjgzLjI3OXYtNDB6bTAgMTIwaDI4My4yNzl2NDBoLTI4My4yNzl2LTQwem0wIDEyMGgyODMuMjc5djQwaC0yODMuMjc5di00MHptLTg4LjcyMS0yNjBjLTIyLjA5IDAtNDAgMTcuOTA4LTQwIDQwIDAgMjIuMDkgMTcuOTEgNDAgNDAgNDAgMjIuMDkyIDAgNDAtMTcuOTEgNDAtNDAgMC0yMi4wOTItMTcuOTA4LTQwLTQwLTQwem0wIDEyMGMtMjIuMDkgMC00MCAxNy45MDgtNDAgNDAgMCAyMi4wOSAxNy45MSA0MCA0MCA0MCAyMi4wOTIgMCA0MC0xNy45MSA0MC00MCAwLTIyLjA5Mi0xNy45MDgtNDAtNDAtNDB6bTAgMTIwYy0yMi4wOSAwLTQwIDE3LjkwOC00MCA0MCAwIDIyLjA5IDE3LjkxIDQwIDQwIDQwIDIyLjA5MiAwIDQwLTE3LjkxIDQwLTQwIDAtMjIuMDkyLTE3LjkwOC00MC00MC00MHoiLz48L3N2Zz4=); }
.spytext-toolbar > .container > ul.spytext-button-group button.spytext-button.ordered-list:before {
background-size: 100% auto;
background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzOTEuODU3IiBoZWlnaHQ9IjMyNi4yODEiIHZpZXdCb3g9IjAgMCAzOTEuODU2OTkgMzI2LjI4MTAxIiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCA1MTIgNTEyIj48cGF0aCBkPSJNMTA4LjU3OCAyNC41aDI4My4yNzl2NDBoLTI4My4yNzl2LTQwem0wIDEyMGgyODMuMjc5djQwaC0yODMuMjc5di00MHptMCAxMjBoMjgzLjI3OXY0MGgtMjgzLjI3OXYtNDB6bS04Ni40MzctMTc5LjUzOWgyMC4xMDl2LTg0Ljk2MWgtMTYuOTQ1djEuNWMwIDExLjg3My0xMS43ODUgMTMuMDYyLTIzLjE0NSAxMy41NjV2MTQuMzAyaDE5Ljk4djU1LjU5NHptMzYuMTc2IDk5LjAwMWgtMjcuMTY0YzEyLjIzMi0xMC4xOTcgMjUuNjA1LTIyLjQyIDI1LjYwNS0zOC4zMzkgMC0xNS43ODEtMTEuMzI4LTI1Ljk3OS0yOC44NTktMjUuOTc5LTkuNTUzIDAtMTkuMTYgMi44MDMtMjcuMjUyIDkuMDQybDYuMjk3IDE1LjgxNWM1LjIzLTMuODQ3IDEwLjYzNS03LjIxOSAxNy4zNTUtNy4yMTkgNy4yMzQgMCAxMS4yMTkgMy41MTYgMTEuMjE5IDkuODgxLS4xMzkgMTAuNjYzLTEyLjc4OSAyMS4wNS0zNS41MTggNDEuNTkydjEzLjIwNWg1OC4zMTZ2LTE3Ljk5OHptLTEyLjk0MiA5Ny41NzdjNy40MjgtMy43MDkgMTEuNDYzLTkuOTY3IDExLjQ2My0xNy45NTYgMC0xMC40MjItOC40NDEtMjAuOTM4LTI3LjI5OS0yMC45MzgtOC40OSAwLTE4LjQ1MyAxLjk2Ni0yNS44NjUgNi43MTZsNC41NjEgMTYuMTgyYzYuNDMtMy45NTcgMTIuMzU0LTUuNDk4IDE3LjEwNC01LjQ5OCA2LjM2NyAwIDEwLjAyIDIuNDI3IDEwLjAyIDYuNjU5IDAgNS45Mi03LjczIDcuNS0xMi4yOTkgNy41aC04LjU4djE2LjA3OWg4LjkzOWM2LjUwNCAwIDE0LjEgMi41NjIgMTQuMSA5Ljc3OSAwIDUuNDQtNC44OTYgOC44Mi0xMi43NzkgOC44Mi02LjcwMyAwLTEzLjE4Ni0yLjI3NS0xOS4wNjgtNS41NDNsLTQuNTE0IDE2Ljc0MWM3LjQzOSA0LjQ5OCAxNi41MDggNi4yMDEgMjQuOTAyIDYuMjAxIDE5Ljk4OCAwIDMzLjQxOC0xMC4xNTEgMzMuNDE4LTI1LjI2LS4wMDEtOC45OTctNS41MjEtMTYuNDE5LTE0LjEwMy0xOS40ODJ6Ii8+PC9zdmc+); }
.spytext-toolbar > .container > ul.spytext-button-group button.spytext-button.indent:before {
background-size: 100% auto;
background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjwhLS0gQ3JlYXRlZCB3aXRoIElua3NjYXBlIChodHRwOi8vd3d3Lmlua3NjYXBlLm9yZy8pIC0tPgoKPHN2ZwogICB4bWxuczpkYz0iaHR0cDovL3B1cmwub3JnL2RjL2VsZW1lbnRzLzEuMS8iCiAgIHhtbG5zOmNjPSJodHRwOi8vY3JlYXRpdmVjb21tb25zLm9yZy9ucyMiCiAgIHhtbG5zOnJkZj0iaHR0cDovL3d3dy53My5vcmcvMTk5OS8wMi8yMi1yZGYtc3ludGF4LW5zIyIKICAgeG1sbnM6c3ZnPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIKICAgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIgogICB2ZXJzaW9uPSIxLjEiCiAgIHdpZHRoPSI0MTIiCiAgIGhlaWdodD0iMzYwIgogICB2aWV3Qm94PSIwIDAgNDEyIDM2MCIKICAgaWQ9InN2ZzM0NDgiCiAgIHhtbDpzcGFjZT0icHJlc2VydmUiPjxtZXRhZGF0YQogICAgIGlkPSJtZXRhZGF0YTM0NTUiPjxyZGY6UkRGPjxjYzpXb3JrCiAgICAgICAgIHJkZjphYm91dD0iIj48ZGM6Zm9ybWF0PmltYWdlL3N2Zyt4bWw8L2RjOmZvcm1hdD48ZGM6dHlwZQogICAgICAgICAgIHJkZjpyZXNvdXJjZT0iaHR0cDovL3B1cmwub3JnL2RjL2RjbWl0eXBlL1N0aWxsSW1hZ2UiIC8+PGRjOnRpdGxlPjwvZGM6dGl0bGU+PC9jYzpXb3JrPjwvcmRmOlJERj48L21ldGFkYXRhPjxkZWZzCiAgICAgaWQ9ImRlZnMzNDUzIiAvPjxwYXRoCiAgICAgZD0iTSAwLDAgSCA0MTIgViA0MCBIIDAgViAwIHogbSAxNjEsODAgaCAyNTEgdiA0MCBIIDE2MSBWIDgwIHogbSAwLDgwIGggMjUxIHYgNDAgSCAxNjEgdiAtNDAgeiBtIDAsODAgaCAyNTEgdiA0MCBIIDE2MSBWIDI0MCB6IE0gMCwzMjAgaCA0MTIgdiA0MCBIIDAgViAzMjAgeiBNIDAsMTAwLjY3MyBWIDI1OS4zMjcgTCAxMTYsMTgwIDAsMTAwLjY3MyB6IgogICAgIGlkPSJpbmRlbnQtaWNvbiIgLz48L3N2Zz4=); }
.spytext-toolbar > .container > ul.spytext-button-group button.spytext-button.outdent:before {
background-size: 100% auto;
background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjwhLS0gQ3JlYXRlZCB3aXRoIElua3NjYXBlIChodHRwOi8vd3d3Lmlua3NjYXBlLm9yZy8pIC0tPgoKPHN2ZwogICB4bWxuczpkYz0iaHR0cDovL3B1cmwub3JnL2RjL2VsZW1lbnRzLzEuMS8iCiAgIHhtbG5zOmNjPSJodHRwOi8vY3JlYXRpdmVjb21tb25zLm9yZy9ucyMiCiAgIHhtbG5zOnJkZj0iaHR0cDovL3d3dy53My5vcmcvMTk5OS8wMi8yMi1yZGYtc3ludGF4LW5zIyIKICAgeG1sbnM6c3ZnPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIKICAgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIgogICB2ZXJzaW9uPSIxLjEiCiAgIHdpZHRoPSI0MTIiCiAgIGhlaWdodD0iMzYwIgogICB2aWV3Qm94PSIwIDAgNDEyIDM2MCIKICAgaWQ9InN2ZzMzMTUiCiAgIHhtbDpzcGFjZT0icHJlc2VydmUiPjxtZXRhZGF0YQogICAgIGlkPSJtZXRhZGF0YTMzMjIiPjxyZGY6UkRGPjxjYzpXb3JrCiAgICAgICAgIHJkZjphYm91dD0iIj48ZGM6Zm9ybWF0PmltYWdlL3N2Zyt4bWw8L2RjOmZvcm1hdD48ZGM6dHlwZQogICAgICAgICAgIHJkZjpyZXNvdXJjZT0iaHR0cDovL3B1cmwub3JnL2RjL2RjbWl0eXBlL1N0aWxsSW1hZ2UiIC8+PGRjOnRpdGxlPjwvZGM6dGl0bGU+PC9jYzpXb3JrPjwvcmRmOlJERj48L21ldGFkYXRhPjxkZWZzCiAgICAgaWQ9ImRlZnMzMzIwIiAvPjxwYXRoCiAgICAgZD0iTSAwLDAgSCA0MTIgViA0MCBIIDAgViAwIHogbSAxNjEsODAgaCAyNTEgdiA0MCBIIDE2MSBWIDgwIHogbSAwLDgwIGggMjUxIHYgNDAgSCAxNjEgdiAtNDAgeiBtIDAsODAgaCAyNTEgdiA0MCBIIDE2MSBWIDI0MCB6IE0gMCwzMjAgaCA0MTIgdiA0MCBIIDAgViAzMjAgeiBNIDExNiwyNTkuMzI3IFYgMTAwLjY3MyBMIDAsMTgwIDExNiwyNTkuMzI3IHoiCiAgICAgaWQ9ImRlZGVudC1pY29uIiAvPjwvc3ZnPg==); }