UNPKG

koco-tinymce

Version:

Knockout Components handlers and utilities for the TinyMCE editor

300 lines (261 loc) 7.66 kB
// Copyright (c) CBC/Radio-Canada. All rights reserved. // Licensed under the MIT license. See LICENSE file in the project root for full license information. body { padding: 0; margin: 8px 8px 0 8px; font-size: 11px; line-height: 14px; } label, input, button, 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"] { font-size: 11px; line-height: 14px; margin-bottom: 0; } select { height: 20px; padding: 0; } 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"] { height: 14px; padding: 2px 4px; } legend { font-size: 12px; line-height: 14px; font-weight: bold; margin-bottom: 5px; } label { display: inline-block; } form { margin: 0; } input[type="button"], #insert, #cancel { display: inline-block; *display: inline; padding: 4px 14px; margin-bottom: 0; *margin-left: .3em; font-size: 12px; line-height: 18px; *line-height: 18px; 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: -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(to bottom, #ffffff, #e6e6e6); background-image: -moz-linear-gradient(top, #ffffff, #e6e6e6); background-repeat: repeat-x; border: 1px solid #bbbbbb; *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: #a2a2a2; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; filter: progid:dximagetransform.microsoft.gradient(startColorstr='#ffffffff', endColorstr='#ffe6e6e6', 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); } input[type="button"]:hover, input[type="button"]:active, input[type="button"].active, input[type="button"].disabled, input[type="button"][disabled] { color: #333333; background-color: #e6e6e6; *background-color: #d9d9d9; } input[type="button"]:active, input[type="button"].active { background-color: #cccccc \9; } input[type="button"]:first-child { *margin-left: 0; } input[type="button"]: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; -o-transition: background-position 0.1s linear; transition: background-position 0.1s linear; } input[type="button"]:focus { outline: thin dotted #333; outline: 5px auto -webkit-focus-ring-color; outline-offset: -2px; } input[type="button"].active, input[type="button"]: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); } input[type="button"].disabled, input[type="button"][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; } #insert.active { color: rgba(255, 255, 255, 0.75); } input[type="button"] { border-color: #c5c5c5; border-color: rgba(0, 0, 0, 0.15) rgba(0, 0, 0, 0.15) rgba(0, 0, 0, 0.25); } #insert { color: #ffffff; text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); background-color: #006dcc; *background-color: #0044cc; background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#0088cc), to(#0044cc)); background-image: -webkit-linear-gradient(top, #0088cc, #0044cc); background-image: -o-linear-gradient(top, #0088cc, #0044cc); background-image: linear-gradient(to bottom, #0088cc, #0044cc); background-image: -moz-linear-gradient(top, #0088cc, #0044cc); background-repeat: repeat-x; border-color: #0044cc #0044cc #002a80; 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='#ff0088cc', endColorstr='#ff0044cc', GradientType=0); filter: progid:dximagetransform.microsoft.gradient(enabled=false); } #insert:hover, #insert:active, #insert.active, #insert.disabled, #insert[disabled] { color: #ffffff; background-color: #0044cc; *background-color: #003bb3; } #insert:active, #insert.active { background-color: #003399 \9; } .mceActionPanel { position: fixed; bottom: 0; left: 0; right: 0; padding: 2px 5px 0; margin: 0; text-align: right; background-color: #f5f5f5; border-top: 1px solid #ddd; -webkit-border-radius: 0 0 6px 6px; -moz-border-radius: 0 0 6px 6px; border-radius: 0 0 6px 6px; *zoom: 1; -webkit-box-shadow: inset 0 1px 0 #ffffff; -moz-box-shadow: inset 0 1px 0 #ffffff; box-shadow: inset 0 1px 0 #ffffff; } .mceActionPanel:before, .mceActionPanel:after { display: table; line-height: 0; content: ""; } .mceActionPanel:after { clear: both; } .mceActionPanel input[type="button"] + input[type="button"] { margin-bottom: 0; margin-left: 5px; } .tabs { margin-bottom: 10px; margin-left: 0; *zoom: 1; border-bottom: 1px solid #DDD; } .tabs > li > a { display: block; } .tabs > li > a:hover { text-decoration: none; background-color: #eeeeee; } .tabs:before, .tabs:after { display: table; line-height: 0; content: ""; } .tabs:after { clear: both; } .tabs > ul > li { float: left; margin-bottom: -1px; list-style: none; } .tabs > ul > li > span > a { font-size: 12px; display: block; padding-right: 12px; padding-left: 12px; margin-right: 2px; padding-top: 3px; padding-bottom: 3px; line-height: 14px; border: 1px solid transparent; -webkit-border-radius: 4px 4px 0 0; -moz-border-radius: 4px 4px 0 0; border-radius: 4px 4px 0 0; } .tabs > ul > li > span > a:hover { text-decoration: none; background-color: #eeeeee; border-color: #eeeeee #eeeeee #dddddd; } .tabs > ul > .current > span > a, .tabs > ul > .current > span > a:hover { color: #555555; cursor: default; background-color: #ffffff; border: 1px solid #ddd; border-bottom-color: transparent; } /* Panels */ .panel_wrapper div.panel {display:none;} .panel_wrapper div.current {display:block; width:100%; height:300px; overflow:visible;} .panel_wrapper {clear:both;}