/* Table of Contents ================================================== #Inline Editor */ /* #Inline Editor ================================================== */ @-webkit-keyframes pop-upwards { 0% { -webkit-transform: matrix(0.97, 0, 0, 1, 0, 12); -moz-transform: matrix(0.97, 0, 0, 1, 0, 12); -ms-transform: matrix(0.97, 0, 0, 1, 0, 12); -o-transform: matrix(0.97, 0, 0, 1, 0, 12); transform: matrix(0.97, 0, 0, 1, 0, 12); filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0); opacity: 0; } 20% { -webkit-transform: matrix(0.99, 0, 0, 1, 0, 2); -moz-transform: matrix(0.99, 0, 0, 1, 0, 2); -ms-transform: matrix(0.99, 0, 0, 1, 0, 2); -o-transform: matrix(0.99, 0, 0, 1, 0, 2); transform: matrix(0.99, 0, 0, 1, 0, 2); filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=70); opacity: 0.7; } 40% { -webkit-transform: matrix(1, 0, 0, 1, 0, -1); -moz-transform: matrix(1, 0, 0, 1, 0, -1); -ms-transform: matrix(1, 0, 0, 1, 0, -1); -o-transform: matrix(1, 0, 0, 1, 0, -1); transform: matrix(1, 0, 0, 1, 0, -1); filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100); opacity: 1; } 70% { -webkit-transform: matrix(1, 0, 0, 1, 0, 0); -moz-transform: matrix(1, 0, 0, 1, 0, 0); -ms-transform: matrix(1, 0, 0, 1, 0, 0); -o-transform: matrix(1, 0, 0, 1, 0, 0); transform: matrix(1, 0, 0, 1, 0, 0); filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100); opacity: 1; } 100% { -webkit-transform: matrix(1, 0, 0, 1, 0, 0); -moz-transform: matrix(1, 0, 0, 1, 0, 0); -ms-transform: matrix(1, 0, 0, 1, 0, 0); -o-transform: matrix(1, 0, 0, 1, 0, 0); transform: matrix(1, 0, 0, 1, 0, 0); filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100); opacity: 1; } } @-moz-keyframes pop-upwards { 0% { -webkit-transform: matrix(0.97, 0, 0, 1, 0, 12); -moz-transform: matrix(0.97, 0, 0, 1, 0, 12); -ms-transform: matrix(0.97, 0, 0, 1, 0, 12); -o-transform: matrix(0.97, 0, 0, 1, 0, 12); transform: matrix(0.97, 0, 0, 1, 0, 12); filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0); opacity: 0; } 20% { -webkit-transform: matrix(0.99, 0, 0, 1, 0, 2); -moz-transform: matrix(0.99, 0, 0, 1, 0, 2); -ms-transform: matrix(0.99, 0, 0, 1, 0, 2); -o-transform: matrix(0.99, 0, 0, 1, 0, 2); transform: matrix(0.99, 0, 0, 1, 0, 2); filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=70); opacity: 0.7; } 40% { -webkit-transform: matrix(1, 0, 0, 1, 0, -1); -moz-transform: matrix(1, 0, 0, 1, 0, -1); -ms-transform: matrix(1, 0, 0, 1, 0, -1); -o-transform: matrix(1, 0, 0, 1, 0, -1); transform: matrix(1, 0, 0, 1, 0, -1); filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100); opacity: 1; } 70% { -webkit-transform: matrix(1, 0, 0, 1, 0, 0); -moz-transform: matrix(1, 0, 0, 1, 0, 0); -ms-transform: matrix(1, 0, 0, 1, 0, 0); -o-transform: matrix(1, 0, 0, 1, 0, 0); transform: matrix(1, 0, 0, 1, 0, 0); filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100); opacity: 1; } 100% { -webkit-transform: matrix(1, 0, 0, 1, 0, 0); -moz-transform: matrix(1, 0, 0, 1, 0, 0); -ms-transform: matrix(1, 0, 0, 1, 0, 0); -o-transform: matrix(1, 0, 0, 1, 0, 0); transform: matrix(1, 0, 0, 1, 0, 0); filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100); opacity: 1; } } @-o-keyframes pop-upwards { 0% { -webkit-transform: matrix(0.97, 0, 0, 1, 0, 12); -moz-transform: matrix(0.97, 0, 0, 1, 0, 12); -ms-transform: matrix(0.97, 0, 0, 1, 0, 12); -o-transform: matrix(0.97, 0, 0, 1, 0, 12); transform: matrix(0.97, 0, 0, 1, 0, 12); filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0); opacity: 0; } 20% { -webkit-transform: matrix(0.99, 0, 0, 1, 0, 2); -moz-transform: matrix(0.99, 0, 0, 1, 0, 2); -ms-transform: matrix(0.99, 0, 0, 1, 0, 2); -o-transform: matrix(0.99, 0, 0, 1, 0, 2); transform: matrix(0.99, 0, 0, 1, 0, 2); filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=70); opacity: 0.7; } 40% { -webkit-transform: matrix(1, 0, 0, 1, 0, -1); -moz-transform: matrix(1, 0, 0, 1, 0, -1); -ms-transform: matrix(1, 0, 0, 1, 0, -1); -o-transform: matrix(1, 0, 0, 1, 0, -1); transform: matrix(1, 0, 0, 1, 0, -1); filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100); opacity: 1; } 70% { -webkit-transform: matrix(1, 0, 0, 1, 0, 0); -moz-transform: matrix(1, 0, 0, 1, 0, 0); -ms-transform: matrix(1, 0, 0, 1, 0, 0); -o-transform: matrix(1, 0, 0, 1, 0, 0); transform: matrix(1, 0, 0, 1, 0, 0); filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100); opacity: 1; } 100% { -webkit-transform: matrix(1, 0, 0, 1, 0, 0); -moz-transform: matrix(1, 0, 0, 1, 0, 0); -ms-transform: matrix(1, 0, 0, 1, 0, 0); -o-transform: matrix(1, 0, 0, 1, 0, 0); transform: matrix(1, 0, 0, 1, 0, 0); filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100); opacity: 1; } } @keyframes pop-upwards { 0% { -webkit-transform: matrix(0.97, 0, 0, 1, 0, 12); -moz-transform: matrix(0.97, 0, 0, 1, 0, 12); -ms-transform: matrix(0.97, 0, 0, 1, 0, 12); -o-transform: matrix(0.97, 0, 0, 1, 0, 12); transform: matrix(0.97, 0, 0, 1, 0, 12); filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0); opacity: 0; } 20% { -webkit-transform: matrix(0.99, 0, 0, 1, 0, 2); -moz-transform: matrix(0.99, 0, 0, 1, 0, 2); -ms-transform: matrix(0.99, 0, 0, 1, 0, 2); -o-transform: matrix(0.99, 0, 0, 1, 0, 2); transform: matrix(0.99, 0, 0, 1, 0, 2); filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=70); opacity: 0.7; } 40% { -webkit-transform: matrix(1, 0, 0, 1, 0, -1); -moz-transform: matrix(1, 0, 0, 1, 0, -1); -ms-transform: matrix(1, 0, 0, 1, 0, -1); -o-transform: matrix(1, 0, 0, 1, 0, -1); transform: matrix(1, 0, 0, 1, 0, -1); filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100); opacity: 1; } 70% { -webkit-transform: matrix(1, 0, 0, 1, 0, 0); -moz-transform: matrix(1, 0, 0, 1, 0, 0); -ms-transform: matrix(1, 0, 0, 1, 0, 0); -o-transform: matrix(1, 0, 0, 1, 0, 0); transform: matrix(1, 0, 0, 1, 0, 0); filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100); opacity: 1; } 100% { -webkit-transform: matrix(1, 0, 0, 1, 0, 0); -moz-transform: matrix(1, 0, 0, 1, 0, 0); -ms-transform: matrix(1, 0, 0, 1, 0, 0); -o-transform: matrix(1, 0, 0, 1, 0, 0); transform: matrix(1, 0, 0, 1, 0, 0); filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100); opacity: 1; } } .inline-editor-content a { color: rgba(58,144,216,1); } .inline-editor-content:focus { -webkit-appearance: none; -moz-appearance: none; border: none; box-shadow: none; outline: 0; } .inline-toolbar-arrow-under:after, .inline-toolbar-arrow-over:before { content: ""; border-style: solid; display: block; height: 0; left: 50%; margin-left: -8px; position: absolute; width: 0; } .inline-toolbar-arrow-under:after { border-color: rgba(58,144,216,1) transparent transparent transparent; border-width: 8px 8px 0 8px; top: 40px; } .inline-toolbar-arrow-over:before { border-color: transparent transparent rgba(58,144,216,1) transparent; border-width: 0 8px 8px 8px; top: -8px; } .inline-editor-toolbar { background-color: rgba(58,144,216,1); border: 1px solid rgba(28,114,186,1); border-radius: 3px; font-size: 16px; left: 0; position: absolute; -webkit-transition: top 0.075s ease-out,left 0.075s ease-out; -moz-transition: top 0.075s ease-out,left 0.075s ease-out; -o-transition: top 0.075s ease-out,left 0.075s ease-out; transition: top 0.075s ease-out,left 0.075s ease-out; top: 0; visibility: hidden; z-index: 2000; } .inline-editor-toolbar ul { margin: 0; padding: 0; } .inline-editor-toolbar li { float: left; list-style: none; margin: 0; padding: 0; } .inline-editor-toolbar li .inline-editor-action-underline { text-decoration: underline; } .inline-editor-toolbar li .inline-editor-button-active { background-color: rgba(28,114,186,1); color: rgba(255,255,255,1); } .inline-editor-toolbar li .inline-editor-button-first { border-top-left-radius: 3px; border-bottom-left-radius: 3px; } .inline-editor-toolbar li .inline-editor-button-last { border-right: none; border-top-right-radius: 3px; border-bottom-right-radius: 3px; } .inline-editor-toolbar li .inline-editor-action-pre { font-family: Monaco, Menlo, Consolas, "Courier New", monospace; font-size: 12px; font-weight: 100; padding: 15px 0; } .inline-editor-toolbar li button { background-color: transparent; border: none; border-right: 1px solid rgba(28,114,186,1); -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; color: rgba(255,255,255,1); display: block; font-size: 13px; height: 40px; min-width: 40px; padding: 12px 10px 10px 10px; text-decoration: none; -webkit-transition: background-color 0.2s ease-in,color 0.2s ease-in; -moz-transition: background-color 0.2s ease-in,color 0.2s ease-in; -o-transition: background-color 0.2s ease-in,color 0.2s ease-in; transition: background-color 0.2s ease-in,color 0.2s ease-in; width: 100%; } .inline-editor-toolbar li button:hover { background-color: rgba(28,114,186,1); color: rgba(255,255,255,1); } .inline-editor-toolbar-active { -webkit-animation: pop-upwards 160ms forwards linear; -moz-animation: pop-upwards 160ms forwards linear; -ms-animation: pop-upwards 160ms forwards linear; -o-animation: pop-upwards 160ms forwards linear; animation: pop-upwards 160ms forwards linear; -webkit-transition: top 0.075s ease-out,left 0.075s ease-out; -moz-transition: top 0.075s ease-out,left 0.075s ease-out; -o-transition: top 0.075s ease-out,left 0.075s ease-out; transition: top 0.075s ease-out,left 0.075s ease-out; visibility: visible; } .inline-editor-action-bold { font-weight: bold; } .inline-editor-action-italic { font-style: italic; } .inline-editor-toolbar-form-anchor { background: rgba(58,144,216,1); border-radius: 3px; color: rgba(255,255,255,1); display: none; } .inline-editor-toolbar-form-anchor input { color: rgba(255,255,255,1); background: rgba(58,144,216,1); border: none; display: inline-block; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; height: 40px; margin: 0; padding: 11px 10px 9px 10px; width: 240px; } .inline-editor-toolbar-form-anchor input::-webkit-input-placeholder { color: rgba(255,255,255,0.8); } .inline-editor-toolbar-form-anchor input:-ms-input-placeholder { color: rgba(255,255,255,0.8); } .inline-editor-toolbar-form-anchor input::-moz-placeholder { color: rgba(255,255,255,0.8); } .inline-editor-toolbar-form-anchor input:-moz-placeholder { color: rgba(255,255,255,0.8); } .inline-editor-toolbar-form-anchor input:focus { -webkit-appearance: none; -moz-appearance: none; border: none; box-shadow: none; outline: 0; } .inline-editor-toolbar-form-anchor a { color: rgba(255,255,255,1); display: inline-block; font-size: 24px; font-weight: bold; margin: 0 10px; text-decoration: none; } .inline-editor-placeholder { position: relative; } .inline-editor-placeholder:after { content: attr(data-placeholder); color: rgba(28,114,186,1); font-style: italic; left: 0; position: absolute; top: 0; }