samples/sample.css

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