skins/ckeditor/samples/sample.css

   1 /*
   2 Copyright (c) 2003-2014, CKSource - Frederico Knabben. All rights reserved.
   3 For licensing, see LICENSE.md or http://ckeditor.com/license
   4 */
   5
   6 html, body, h1, h2, h3, h4, h5, h6, div, span, blockquote, p, address, form, fieldset, img, ul, ol, dl, dt, dd, li, hr, table, td, th, strong, em, sup, sub, dfn, ins, del, q, cite, var, samp, code, kbd, tt, pre
   7 {
   8         line-height: 1.5;
   9 }
  10
  11 body
  12 {
  13         padding: 10px 30px;
  14 }
  15
  16 input, textarea, select, option, optgroup, button, td, th
  17 {
  18         font-size: 100%;
  19 }
  20
  21 pre, code, kbd, samp, tt
  22 {
  23         font-family: monospace,monospace;
  24         font-size: 1em;
  25 }
  26
  27 body {
  28     width: 960px;
  29     margin: 0 auto;
  30 }
  31
  32 code
  33 {
  34         background: #f3f3f3;
  35         border: 1px solid #ddd;
  36         padding: 1px 4px;
  37
  38         -moz-border-radius: 3px;
  39         -webkit-border-radius: 3px;
  40         border-radius: 3px;
  41 }
  42
  43 abbr
  44 {
  45         border-bottom: 1px dotted #555;
  46         cursor: pointer;
  47 }
  48
  49 .new, .beta
  50 {
  51         text-transform: uppercase;
  52         font-size: 10px;
  53         font-weight: bold;
  54         padding: 1px 4px;
  55         margin: 0 0 0 5px;
  56         color: #fff;
  57         float: right;
  58
  59         -moz-border-radius: 3px;
  60         -webkit-border-radius: 3px;
  61         border-radius: 3px;
  62 }
  63
  64 .new
  65 {
  66         background: #FF7E00;
  67         border: 1px solid #DA8028;
  68         text-shadow: 0 1px 0 #C97626;
  69
  70         -moz-box-shadow: 0 2px 3px 0 #FFA54E inset;
  71         -webkit-box-shadow: 0 2px 3px 0 #FFA54E inset;
  72         box-shadow: 0 2px 3px 0 #FFA54E inset;
  73 }
  74
  75 .beta
  76 {
  77         background: #18C0DF;
  78         border: 1px solid #19AAD8;
  79         text-shadow: 0 1px 0 #048CAD;
  80         font-style: italic;
  81
  82         -moz-box-shadow: 0 2px 3px 0 #50D4FD inset;
  83         -webkit-box-shadow: 0 2px 3px 0 #50D4FD inset;
  84         box-shadow: 0 2px 3px 0 #50D4FD inset;
  85 }
  86
  87 h1.samples
  88 {
  89         color: #0782C1;
  90         font-size: 200%;
  91         font-weight: normal;
  92         margin: 0;
  93         padding: 0;
  94 }
  95
  96 h1.samples a
  97 {
  98         color: #0782C1;
  99         text-decoration: none;
 100         border-bottom: 1px dotted #0782C1;
 101 }
 102
 103 .samples a:hover
 104 {
 105         border-bottom: 1px dotted #0782C1;
 106 }
 107
 108 h2.samples
 109 {
 110         color: #000000;
 111         font-size: 130%;
 112         margin: 15px 0 0 0;
 113         padding: 0;
 114 }
 115
 116 p, blockquote, address, form, pre, dl, h1.samples, h2.samples
 117 {
 118         margin-bottom: 15px;
 119 }
 120
 121 ul.samples
 122 {
 123         margin-bottom: 15px;
 124 }
 125
 126 .clear
 127 {
 128         clear: both;
 129 }
 130
 131 fieldset
 132 {
 133         margin: 0;
 134         padding: 10px;
 135 }
 136
 137 body, input, textarea
 138 {
 139         color: #333333;
 140         font-family: Arial, Helvetica, sans-serif;
 141 }
 142
 143 body
 144 {
 145         font-size: 75%;
 146 }
 147
 148 a.samples
 149 {
 150         color: #189DE1;
 151         text-decoration: none;
 152 }
 153
 154 form
 155 {
 156         margin: 0;
 157         padding: 0;
 158 }
 159
 160 pre.samples
 161 {
 162         background-color: #F7F7F7;
 163         border: 1px solid #D7D7D7;
 164         overflow: auto;
 165         padding: 0.25em;
 166         white-space: pre-wrap; /* CSS 2.1 */
 167         word-wrap: break-word; /* IE7 */
 168         -moz-tab-size: 4;
 169         -o-tab-size: 4;
 170         -webkit-tab-size: 4;
 171         tab-size: 4;
 172 }
 173
 174 #footer
 175 {
 176         clear: both;
 177         padding-top: 10px;
 178 }
 179
 180 #footer hr
 181 {
 182         margin: 10px 0 15px 0;
 183         height: 1px;
 184         border: solid 1px gray;
 185         border-bottom: none;
 186 }
 187
 188 #footer p
 189 {
 190         margin: 0 10px 10px 10px;
 191         float: left;
 192 }
 193
 194 #footer #copy
 195 {
 196         float: right;
 197 }
 198
 199 #outputSample
 200 {
 201         width: 100%;
 202         table-layout: fixed;
 203 }
 204
 205 #outputSample thead th
 206 {
 207         color: #dddddd;
 208         background-color: #999999;
 209         padding: 4px;
 210         white-space: nowrap;
 211 }
 212
 213 #outputSample tbody th
 214 {
 215         vertical-align: top;
 216         text-align: left;
 217 }
 218
 219 #outputSample pre
 220 {
 221         margin: 0;
 222         padding: 0;
 223 }
 224
 225 .description
 226 {
 227         border: 1px dotted #B7B7B7;
 228         margin-bottom: 10px;
 229         padding: 10px 10px 0;
 230         overflow: hidden;
 231 }
 232
 233 label
 234 {
 235         display: block;
 236         margin-bottom: 6px;
 237 }
 238
 239 /**
 240  *      CKEditor editables are automatically set with the "cke_editable" class
 241  *      plus cke_editable_(inline|themed) depending on the editor type.
 242  */
 243
 244 /* Style a bit the inline editables. */
 245 .cke_editable.cke_editable_inline
 246 {
 247         cursor: pointer;
 248 }
 249
 250 /* Once an editable element gets focused, the "cke_focus" class is
 251    added to it, so we can style it differently. */
 252 .cke_editable.cke_editable_inline.cke_focus
 253 {
 254         box-shadow: inset 0px 0px 20px 3px #ddd, inset 0 0 1px #000;
 255         outline: none;
 256         background: #eee;
 257         cursor: text;
 258 }
 259
 260 /* Avoid pre-formatted overflows inline editable. */
 261 .cke_editable_inline pre
 262 {
 263         white-space: pre-wrap;
 264         word-wrap: break-word;
 265 }
 266
 267 /**
 268  *      Samples index styles.
 269  */
 270
 271 .twoColumns,
 272 .twoColumnsLeft,
 273 .twoColumnsRight
 274 {
 275         overflow: hidden;
 276 }
 277
 278 .twoColumnsLeft,
 279 .twoColumnsRight
 280 {
 281         width: 45%;
 282 }
 283
 284 .twoColumnsLeft
 285 {
 286         float: left;
 287 }
 288
 289 .twoColumnsRight
 290 {
 291         float: right;
 292 }
 293
 294 dl.samples
 295 {
 296         padding: 0 0 0 40px;
 297 }
 298 dl.samples > dt
 299 {
 300         display: list-item;
 301         list-style-type: disc;
 302         list-style-position: outside;
 303         margin: 0 0 3px;
 304 }
 305 dl.samples > dd
 306 {
 307         margin: 0 0 3px;
 308 }
 309 .warning
 310 {
 311     color: #ff0000;
 312         background-color: #FFCCBA;
 313     border: 2px dotted #ff0000;
 314         padding: 15px 10px;
 315         margin: 10px 0;
 316 }
 317
 318 /* Used on inline samples */
 319
 320 blockquote
 321 {
 322         font-style: italic;
 323         font-family: Georgia, Times, "Times New Roman", serif;
 324         padding: 2px 0;
 325         border-style: solid;
 326         border-color: #ccc;
 327         border-width: 0;
 328 }
 329
 330 .cke_contents_ltr blockquote
 331 {
 332         padding-left: 20px;
 333         padding-right: 8px;
 334         border-left-width: 5px;
 335 }
 336
 337 .cke_contents_rtl blockquote
 338 {
 339         padding-left: 8px;
 340         padding-right: 20px;
 341         border-right-width: 5px;
 342 }
 343
 344 img.right {
 345     border: 1px solid #ccc;
 346     float: right;
 347     margin-left: 15px;
 348     padding: 5px;
 349 }
 350
 351 img.left {
 352     border: 1px solid #ccc;
 353     float: left;
 354     margin-right: 15px;
 355     padding: 5px;
 356 }