samples/sample.css

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