1/* Meltdown Wrap 2=======================================================================*/ 3 4.meltdown_wrap { 5 position: relative; 6 margin-bottom: 10px; 7 padding: 5px; 8 background: #c8c8c8; 9 -moz-border-radius: 5px; 10 -webkit-border-radius: 5px; 11 border-radius: 5px; 12} 13 14/* Meltdown Font Icons 15=======================================================================*/ 16 17@font-face { 18 font-family: 'meltdown'; 19 src:url('../fonts/meltdown.eot'); 20 src:url('../fonts/meltdown.eot?#iefix') format('embedded-opentype'), 21 url('../fonts/meltdown.woff') format('woff'), 22 url('../fonts/meltdown.ttf') format('truetype'), 23 url('../fonts/meltdown.svg#meltdown') format('svg'); 24 font-weight: normal; 25 font-style: normal; 26} 27 28/* Use the following CSS code if you want to use data attributes for inserting your icons */ 29[data-icon]:before { 30 font-family: 'meltdown'; 31 content: attr(data-icon); 32 speak: none; 33 font-weight: normal; 34 line-height: 1; 35 -webkit-font-smoothing: antialiased; 36} 37 38/* Use the following CSS code if you want to have a class per icon */ 39/* 40Instead of a list of all class selectors, 41you can use the generic selector below, but it's slower: 42[class*="meltdown-icon-"]:before { 43*/ 44.meltdown-icon-eye-open:before, .meltdown-icon-eye-close:before, .meltdown-icon-table:before, .meltdown-icon-bold:before, .meltdown-icon-italic:before, .meltdown-icon-list-ol:before, .meltdown-icon-list-ul:before, .meltdown-icon-link:before, .meltdown-icon-code:before, .meltdown-icon-picture:before, .meltdown-icon-quote:before, .meltdown-icon-help:before, .meltdown-icon-code-block:before, .meltdown-icon-return:before, .meltdown-icon-footnote:before, .meltdown-icon-hr:before, .meltdown-icon-caret-down:before, .meltdown-icon-add-to-list:before { 45 font-family: 'meltdown'; 46 speak: none; 47 font-style: normal; 48 font-weight: normal; 49 line-height: 1; 50 -webkit-font-smoothing: antialiased; 51} 52.meltdown-icon-eye-open:before { 53 content: "\73"; 54} 55.meltdown-icon-eye-close:before { 56 content: "\68"; 57} 58.meltdown-icon-table:before { 59 content: "\74"; 60} 61.meltdown-icon-bold:before { 62 content: "\62"; 63} 64.meltdown-icon-italic:before { 65 content: "\69"; 66} 67.meltdown-icon-list-ol:before { 68 content: "\31"; 69} 70.meltdown-icon-list-ul:before { 71 content: "\2a"; 72} 73.meltdown-icon-link:before { 74 content: "\6c"; 75} 76.meltdown-icon-code:before { 77 content: "\3c"; 78} 79.meltdown-icon-picture:before { 80 content: "\70"; 81} 82.meltdown-icon-quote:before { 83 content: "\22"; 84} 85.meltdown-icon-help:before { 86 content: "\3f"; 87} 88.meltdown-icon-code-block:before { 89 content: "\5b"; 90} 91.meltdown-icon-return:before { 92 content: "\72"; 93} 94.meltdown-icon-footnote:before { 95 content: "\66"; 96} 97.meltdown-icon-hr:before { 98 content: "\5f"; 99} 100.meltdown-icon-caret-down:before { 101 content: "\76"; 102} 103.meltdown-icon-add-to-list:before { 104 content: "\2b"; 105} 106 107/* Meltdown Toolbar 108=======================================================================*/ 109 110.meltdown_bar { 111 position: relative; 112 padding: 5px 0; 113 margin: 0 0 3px; 114 height: 24px; 115 border: 1px solid #a8a8a8; 116 background: #fff; /* Old browsers */ 117 background: -moz-linear-gradient(top, #ffffff 0%, #e5e5e5 100%); /* FF3.6+ */ 118 background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#e5e5e5)); /* Chrome,Safari4+ */ 119 background: -webkit-linear-gradient(top, #ffffff 0%,#e5e5e5 100%); /* Chrome10+,Safari5.1+ */ 120 background: -o-linear-gradient(top, #ffffff 0%,#e5e5e5 100%); /* Opera 11.10+ */ 121 background: -ms-linear-gradient(top, #ffffff 0%,#e5e5e5 100%); /* IE10+ */ 122 background: linear-gradient(to bottom, #ffffff 0%,#e5e5e5 100%); /* W3C */ 123 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#e5e5e5',GradientType=0 ); /* IE6-9 */ 124 -moz-border-radius: 3px; 125 -webkit-border-radius: 3px; 126 border-radius: 3px; 127} 128ul.meltdown_controls { 129 float: left; 130 width: 100%; 131 margin: 0 !important; 132 padding: 0 !important; 133 list-style: none; 134} 135li.meltdown_control, 136li.meltdown_controlgroup { 137 position: relative; 138 float: left; 139 margin: 0 0 0 5px; 140 padding: 0; 141} 142 .meltdown_controls li.meltdown_control-preview { float: right; margin-right: 5px; } 143 .meltdown_controls li.meltdown_control-table, 144 .meltdown_controls li.meltdown_controlgroup-kitchenSink { padding-left: 5px; border-left: 1px solid #ccc; } 145li.meltdown_control span, 146li.meltdown_controlgroup > span { 147 float: left; 148 padding: 6px; 149 line-height: 1em; 150 height: 12px; 151 min-width: 12px; 152 -moz-border-radius: 2px; 153 -webkit-border-radius: 2px; 154 border-radius: 2px; 155 color: #333; 156 font-weight: bold; 157 font-size: 12px; 158 cursor: pointer; 159} 160li.meltdown_control:hover span, 161li.meltdown_control:focus span { 162 color: #06c; 163} 164.meltdown_controls li.meltdown_control-bold span, 165.meltdown_controls li.meltdown_control-italics span, 166.meltdown_controls li.meltdown_control-ul span, 167.meltdown_controls li.meltdown_control-ol span, 168.meltdown_controls li.meltdown_control-hr span, 169.meltdown_controls li.meltdown_control-table span, 170.meltdown_controls li.meltdown_control-preview span, 171.meltdown_controls li.meltdown_control-link span, 172.meltdown_controls li.meltdown_control-img span, 173.meltdown_controls li.meltdown_control-blockquote span, 174.meltdown_controls li.meltdown_control-codeblock span, 175.meltdown_controls li.meltdown_control-code span, 176.meltdown_controls li.meltdown_control-footnote span, 177.meltdown_controls li.meltdown_controlgroup-kitchenSink > span { 178 height: 12px; 179 position: relative; 180 text-indent: -9000em; 181 width: 12px; 182} 183.meltdown_controls li.meltdown_control-bold span:before, 184.meltdown_controls li.meltdown_control-italics span:before, 185.meltdown_controls li.meltdown_control-ul span:before, 186.meltdown_controls li.meltdown_control-ol span:before, 187.meltdown_controls li.meltdown_control-hr span:before, 188.meltdown_controls li.meltdown_control-table span:before, 189.meltdown_controls li.meltdown_control-preview span:before, 190.meltdown_controls li.meltdown_control-link span:before, 191.meltdown_controls li.meltdown_control-img span:before, 192.meltdown_controls li.meltdown_control-blockquote span:before, 193.meltdown_controls li.meltdown_control-codeblock span:before, 194.meltdown_controls li.meltdown_control-code span:before, 195.meltdown_controls li.meltdown_control-footnote span:before, 196.meltdown_controls li.meltdown_controlgroup-kitchenSink > span:before { 197 position: absolute; 198 left: 4px; 199 top: 4px; 200 font-family: 'meltdown'; 201 speak: none; 202 font-style: normal; 203 font-weight: normal; 204 font-size: 16px; 205 line-height: 1; 206 -webkit-font-smoothing: antialiased; 207 text-indent: 0; 208} 209/* Resize and reposition Bold */ 210.meltdown_controls li.meltdown_control-bold span:before { 211 content: "\62"; 212 font-size: 12px; 213 left: 7px; 214 top: 7px; 215} 216/* Resize and reposition Italics */ 217.meltdown_controls li.meltdown_control-italics span:before { 218 content: "\69"; 219 font-size: 12px; 220 left: 8px; 221 top: 7px; 222} 223.meltdown_controls li.meltdown_control-ul span:before { 224 content: "\2a"; 225} 226.meltdown_controls li.meltdown_control-ol span:before { 227 content: "\31"; 228} 229.meltdown_controls li.meltdown_control-table span:before { 230 content: "\74"; 231} 232.meltdown_controls li.meltdown_control-preview span:before { 233 content: "\73"; 234} 235 .meltdown_controls li.meltdown_preview-showing span:before { 236 content: "\68"; /* Toggle to Closed Eye */ 237 color: #06c; 238 } 239.meltdown_controls li.meltdown_controlgroup-kitchenSink > span:before { 240 content: "\2b"; 241} 242.meltdown_controls li.meltdown_control-link span:before { 243 content: "\6c"; 244} 245.meltdown_controls li.meltdown_control-img span:before { 246 content: "\70"; 247} 248.meltdown_controls li.meltdown_control-blockquote span:before { 249 content: "\22"; 250} 251.meltdown_controls li.meltdown_control-codeblock span:before { 252 content: "\5b"; 253} 254.meltdown_controls li.meltdown_control-code span:before { 255 content: "\3c"; 256} 257.meltdown_controls li.meltdown_control-footnote span:before { 258 content: "\66"; 259} 260.meltdown_controls li.meltdown_control-hr span:before { 261 content: "\5f"; 262} 263 264li.meltdown_controlgroup ul { 265 position: absolute; 266 left: 0; 267 top: 24px; 268 margin: 0 !important; 269 padding: 5px !important; 270 min-width: 100%; 271 background: #fff; 272 border: 1px solid #a8a8a8; 273 list-style: none; 274 -webkit-box-shadow: 0 3px 10px rgba(0,0,0,.2); 275 -moz-box-shadow: 0 3px 10px rgba(0,0,0,.2); 276 box-shadow: 0 3px 10px rgba(0,0,0,.2); 277 -webkit-background-clip: padding-box; 278 -moz-background-clip: padding; 279 background-clip: padding-box; 280 -moz-border-radius: 3px; 281 -webkit-border-radius: 3px; 282 border-radius: 3px; 283} 284 .meltdown_controls li.meltdown_controlgroup-kitchenSink > ul { 285 width: 120px; 286 } 287 li.meltdown_controlgroup-open > span { 288 color: #06c; 289 } 290.meltdown_controls li.meltdown_controlgroup i.meltdown-icon-caret-down { 291 292} 293li.meltdown_controlgroup li { 294 float: none; 295 margin: 0; 296} 297.meltdown_controls li.meltdown_controlgroup-kitchenSink li { float: left; margin-left: 5px; } 298li.meltdown_controlgroup li span { display: block; float: none; } 299 300 301/* Meltdown Preview 302=======================================================================*/ 303 304.meltdown_preview-header { 305 display: block; 306 padding: 2px 5px; 307 font-size: 11px; 308 font-weight: bold; 309 color: #666; 310 text-transform: uppercase; 311 text-align: center; 312 border: 1px solid #a8a8a8; 313 border-bottom-color: #ccc; 314 background: #eeeeee; /* Old browsers */ 315 background: -moz-linear-gradient(top, #eeeeee 0%, #eeeeee 100%); /* FF3.6+ */ 316 background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#eeeeee), color-stop(100%,#eeeeee)); /* Chrome,Safari4+ */ 317 background: -webkit-linear-gradient(top, #eeeeee 0%,#eeeeee 100%); /* Chrome10+,Safari5.1+ */ 318 background: -o-linear-gradient(top, #eeeeee 0%,#eeeeee 100%); /* Opera 11.10+ */ 319 background: -ms-linear-gradient(top, #eeeeee 0%,#eeeeee 100%); /* IE10+ */ 320 background: linear-gradient(to bottom, #eeeeee 0%,#eeeeee 100%); /* W3C */ 321 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eeeeee', endColorstr='#eeeeee',GradientType=0 ); /* IE6-9 */ 322 -webkit-border-top-left-radius: 3px; 323 -webkit-border-top-right-radius: 3px; 324 -moz-border-radius-topleft: 3px; 325 -moz-border-radius-topright: 3px; 326 border-top-left-radius: 3px; 327 border-top-right-radius: 3px; 328} 329.meltdown_preview { 330 border: 1px solid #a8a8a8; 331 border-top: 0; 332 margin-bottom: 3px; 333 padding: 5px; 334 overflow: auto; 335 background: #fff; 336 -webkit-border-bottom-right-radius: 3px; 337 -webkit-border-bottom-left-radius: 3px; 338 -moz-border-radius-bottomright: 3px; 339 -moz-border-radius-bottomleft: 3px; 340 border-bottom-right-radius: 3px; 341 border-bottom-left-radius: 3px; 342} 343 .meltdownvisible .meltdown_preview { 344 345 } 346.meltdown_wrap textarea { 347 margin: 0 !important; 348 padding: 5px; 349 border: 1px solid #a8a8a8; 350 -moz-border-radius: 3px; 351 -webkit-border-radius: 3px; 352 border-radius: 3px; 353} 354 .meltdown_wrap textarea:focus { 355 outline: none; 356 border-color: #5c8cd0; 357 }