_source/skins/kama/toolbar.css

   1 /*\r
   2 Copyright (c) 2003-2011, CKSource - Frederico Knabben. All rights reserved.\r
   3 For licensing, see LICENSE.html or http://ckeditor.com/license\r
   4 */\r
   5 \r
   6 @media print\r
   7 {\r
   8         /* For printing, we simply hide the toolbar */\r
   9 \r
  10         .cke_skin_kama .cke_toolbox\r
  11         {\r
  12                 display: none;\r
  13         }\r
  14 }\r
  15 \r
  16 .cke_skin_kama .cke_browser_webkit .cke_toolbox,\r
  17 .cke_skin_kama .cke_browser_webkit .cke_toolbox > span\r
  18 {\r
  19         white-space: normal;\r
  20 }\r
  21 \r
  22 .cke_skin_kama .cke_toolbox\r
  23 {\r
  24         clear: both;\r
  25         /* Define the padding-bottom otherwise the collapser button will not be clickable #4932*/\r
  26         padding-bottom: 1px;\r
  27 }\r
  28 \r
  29 .cke_skin_kama a.cke_toolbox_collapser,\r
  30 .cke_skin_kama a:hover.cke_toolbox_collapser\r
  31 {\r
  32         /* arrowtop.gif */\r
  33         background-image: url(images/sprites.png);\r
  34         _background-image: url(images/sprites_ie6.png);\r
  35         background-position: 3px -1366px; /* +3px +4px */\r
  36         background-repeat: no-repeat;\r
  37         width: 11px;\r
  38         height: 11px;\r
  39         float: right;\r
  40         border: 1px outset #D3D3D3;\r
  41         margin: 11px 0 2px;\r
  42         cursor: pointer;\r
  43 }\r
  44 \r
  45 .cke_skin_kama .cke_rtl a.cke_toolbox_collapser,\r
  46 .cke_skin_kama .cke_rtl a:hover.cke_toolbox_collapser\r
  47 {\r
  48         float: left;\r
  49 }\r
  50 \r
  51 .cke_skin_kama a.cke_toolbox_collapser span\r
  52 {\r
  53         display: none;\r
  54 }\r
  55 \r
  56 .cke_skin_kama .cke_hc a.cke_toolbox_collapser span\r
  57 {\r
  58         font-size: 10px;\r
  59         font-weight: bold;\r
  60         font-family: Arial;\r
  61         display: inline;\r
  62 }\r
  63 \r
  64 .cke_skin_kama a.cke_toolbox_collapser_min,\r
  65 .cke_skin_kama a:hover.cke_toolbox_collapser_min\r
  66 {\r
  67         /* arrowleft.gif*/\r
  68         background-image: url(images/sprites.png);\r
  69         _background-image: url(images/sprites_ie6.png);\r
  70         background-position: 4px -1387px; /* +4px +3px */\r
  71         background-repeat: no-repeat;\r
  72         margin: 2px 4px;\r
  73 }\r
  74 \r
  75 .cke_skin_kama .cke_rtl a.cke_toolbox_collapser_min,\r
  76 .cke_skin_kama .cke_rtl a:hover.cke_toolbox_collapser_min\r
  77 {\r
  78         /* arrowright.gif*/\r
  79         background-position: 4px -1408px; /* +2px +3px */\r
  80 }\r
  81 \r
  82 .cke_skin_kama .cke_toolbar\r
  83 {\r
  84         display: inline;\r
  85 }\r
  86 \r
  87 .cke_skin_kama .cke_separator\r
  88 {\r
  89         display: none;\r
  90 }\r
  91 \r
  92 .cke_skin_kama .cke_break\r
  93 {\r
  94         font-size: 0;\r
  95         clear: left;\r
  96 }\r
  97 \r
  98 .cke_skin_kama .cke_rtl .cke_break\r
  99 {\r
 100         clear: right;\r
 101 }\r
 102 \r
 103 .cke_skin_kama .cke_toolbar_start\r
 104 {\r
 105         display: none;\r
 106 }\r
 107 \r
 108 .cke_skin_kama .cke_toolgroup\r
 109 {\r
 110         -moz-border-radius:5px;\r
 111         -webkit-border-radius: 5px;\r
 112         border-radius: 5px;\r
 113         background-image: url(images/sprites.png);\r
 114         _background-image: url(images/sprites_ie6.png);\r
 115         background-repeat: repeat-x;\r
 116         background-position: 0 -500px;\r
 117         float: left;\r
 118         margin-right: 6px;\r
 119         margin-bottom: 5px;\r
 120         padding: 2px;\r
 121         display: inline;\r
 122 }\r
 123 \r
 124 .cke_skin_kama .cke_rtl .cke_toolgroup\r
 125 {\r
 126         float: right;\r
 127         margin-right: 0;\r
 128         margin-left: 6px;\r
 129 }\r
 130 \r
 131 .cke_skin_kama .cke_toolgroup\r
 132 {\r
 133         display: block;\r
 134         height: 22px;\r
 135 }\r
 136 \r
 137 .cke_skin_kama .cke_button a,\r
 138 .cke_skin_kama .cke_button a:hover,\r
 139 .cke_skin_kama .cke_button a:focus,\r
 140 .cke_skin_kama .cke_button a:active,\r
 141 .cke_skin_kama .cke_button a.cke_off\r
 142 {\r
 143         border-radius: 3px;\r
 144         outline: none;\r
 145         padding: 2px 4px;\r
 146         height: 18px;\r
 147         display: inline-block;\r
 148         cursor: default;\r
 149 }\r
 150 \r
 151 .cke_skin_kama .cke_button a,\r
 152 .cke_skin_kama .cke_button a.cke_off\r
 153 {\r
 154         filter: alpha(opacity=70); /* IE */\r
 155         opacity: 0.70; /* Safari, Opera and Mozilla */\r
 156         -moz-border-radius: 3px;\r
 157         -webkit-border-radius: 3px;\r
 158 }\r
 159 \r
 160 .cke_skin_kama .cke_hc .cke_button a,\r
 161 .cke_skin_kama .cke_hc .cke_button a.cke_off\r
 162 {\r
 163         opacity: 1.0;\r
 164         filter: alpha(opacity=100);\r
 165         border: 1px solid white;\r
 166 }\r
 167 \r
 168 .cke_skin_kama .cke_button a.cke_on\r
 169 {\r
 170         background-color: #a3d7ff;\r
 171         filter: alpha(opacity=100); /* IE */\r
 172         opacity: 1; /* Safari, Opera and Mozilla */\r
 173         padding: 2px 4px;\r
 174 }\r
 175 \r
 176 .cke_skin_kama .cke_hc .cke_button a.cke_on\r
 177 {\r
 178         padding: 0 2px !important;\r
 179         border-width: 3px;\r
 180 }\r
 181 \r
 182 .cke_skin_kama .cke_button a.cke_disabled *\r
 183 {\r
 184         filter: alpha(opacity=30); /* IE */\r
 185         opacity: 0.3; /* Safari, Opera and Mozilla */\r
 186 }\r
 187 \r
 188 /* IE with zoom != 100% will distort the icons otherwise #4821 */\r
 189 .cke_skin_kama .cke_browser_ie .cke_button a.cke_disabled *,\r
 190 .cke_skin_kama .cke_browser_ie a:hover.cke_button .cke_disabled *\r
 191 {\r
 192         filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod='scale'), alpha(opacity=30);\r
 193 }\r
 194 .cke_skin_kama .cke_browser_ie .cke_rtl .cke_button a.cke_disabled *,\r
 195 .cke_skin_kama .cke_browser_ie .cke_rtl a:hover.cke_button .cke_disabled *\r
 196 {\r
 197         filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod='scale'), alpha(opacity=30);\r
 198 }\r
 199 .cke_skin_kama .cke_browser_ie6 .cke_button a.cke_disabled *,\r
 200 .cke_skin_kama .cke_browser_ie6 a:hover.cke_button .cke_disabled *,\r
 201 .cke_skin_kama .cke_browser_ie .cke_button.cke_noalphafix a.cke_disabled *\r
 202 {\r
 203         filter: alpha(opacity=30);\r
 204 }\r
 205 \r
 206 .cke_skin_kama .cke_hc .cke_button a.cke_disabled *,\r
 207 .cke_skin_kama .cke_browser_ie.cke_hc a:hover.cke_button .cke_disabled *\r
 208 {\r
 209         filter: alpha(opacity=60);\r
 210         opacity: 0.6;\r
 211 }\r
 212 \r
 213 .cke_skin_kama .cke_button a:hover.cke_on,\r
 214 .cke_skin_kama .cke_button a:focus.cke_on,\r
 215 .cke_skin_kama .cke_button a:active.cke_on,     /* IE */\r
 216 .cke_skin_kama .cke_button a:hover.cke_off,\r
 217 .cke_skin_kama .cke_button a:focus.cke_off,\r
 218 .cke_skin_kama .cke_button a:active.cke_off     /* IE */\r
 219 {\r
 220         filter: alpha(opacity=100); /* IE */\r
 221         opacity: 1; /* Safari, Opera and Mozilla */\r
 222         padding: 2px 4px;\r
 223 }\r
 224 \r
 225 .cke_skin_kama .cke_button a:hover,\r
 226 .cke_skin_kama .cke_button a:focus,\r
 227 .cke_skin_kama .cke_button a:active     /* IE */\r
 228 {\r
 229         background-color: #dff1ff;\r
 230 }\r
 231 \r
 232 .cke_skin_kama .cke_button a:hover.cke_on,\r
 233 .cke_skin_kama .cke_button a:focus.cke_on,\r
 234 .cke_skin_kama .cke_button a:active.cke_on      /* IE */\r
 235 {\r
 236         background-color: #86caff;\r
 237 }\r
 238 \r
 239 .cke_skin_kama .cke_hc .cke_button a:hover,\r
 240 .cke_skin_kama .cke_hc .cke_button a:focus,\r
 241 .cke_skin_kama .cke_hc .cke_button a:active     /* IE */\r
 242 {\r
 243         padding: 0 2px !important;\r
 244         border-width: 3px;\r
 245 }\r
 246 \r
 247 .cke_skin_kama .cke_button .cke_icon\r
 248 {\r
 249         background-image: url(icons.png);\r
 250         background-position: 100px;\r
 251         background-repeat: no-repeat;\r
 252         margin-top: 1px;\r
 253         width: 16px;\r
 254         height: 16px;\r
 255         display: inline-block;\r
 256         float: left;\r
 257         cursor: default;\r
 258 }\r
 259 \r
 260 .cke_skin_kama .cke_rtl .cke_button .cke_icon\r
 261 {\r
 262         background-image: url(icons_rtl.png);\r
 263 }\r
 264 /* IE with zoom != 100% will distort the icons otherwise #4821 */\r
 265 .cke_skin_kama .cke_browser_ie .cke_button .cke_icon\r
 266 {\r
 267         filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod='scale');\r
 268 }\r
 269 .cke_skin_kama .cke_browser_ie .cke_rtl .cke_button .cke_icon\r
 270 {\r
 271         filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod='scale');\r
 272 }\r
 273 .cke_skin_kama .cke_browser_ie6 .cke_button .cke_icon,\r
 274 .cke_skin_kama .cke_browser_ie6 .cke_rtl .cke_button .cke_icon,\r
 275 .cke_skin_kama .cke_browser_ie .cke_button.cke_noalphafix .cke_icon,\r
 276 .cke_skin_kama .cke_browser_ie .cke_rtl .cke_button.cke_noalphafix .cke_icon\r
 277 {\r
 278         filter: ;\r
 279 }\r
 280 \r
 281 .cke_skin_kama .cke_rtl .cke_button .cke_icon\r
 282 {\r
 283         float: right;\r
 284 }\r
 285 \r
 286 .cke_skin_kama .cke_button .cke_label\r
 287 {\r
 288         cursor: default;\r
 289         display: none;\r
 290         padding-left: 3px;\r
 291         line-height: 18px;\r
 292         vertical-align: middle;\r
 293         float: left;\r
 294 }\r
 295 \r
 296 .cke_skin_kama .cke_rtl .cke_button .cke_label\r
 297 {\r
 298         padding-left: 0;\r
 299         padding-right: 3px;\r
 300         float: right;\r
 301 }\r
 302 \r
 303 .cke_skin_kama .cke_hc .cke_button .cke_label\r
 304 {\r
 305         padding: 0;\r
 306         display: inline-block;\r
 307 }\r
 308 \r
 309 .cke_skin_kama .cke_hc .cke_button .cke_icon\r
 310 {\r
 311         display: none;\r
 312 }\r
 313 \r
 314 .cke_skin_kama .cke_accessibility\r
 315 {\r
 316         position: absolute;\r
 317         display: block;\r
 318         width: 0;\r
 319         height: 0;\r
 320         overflow: hidden;\r
 321 }\r
 322 \r
 323 .cke_skin_kama .cke_button .cke_buttonarrow\r
 324 {\r
 325         display: inline-block;\r
 326         height: 17px;\r
 327         width: 8px;\r
 328         background-position: 2px -1469px; /* (+2, -5) */\r
 329         background-image: url(images/sprites.png);\r
 330         _background-image: url(images/sprites_ie6.png);\r
 331         background-repeat: no-repeat;\r
 332         float: left;\r
 333         cursor: default;\r
 334 }\r
 335 \r
 336 /* IE with zoom != 100% will distort the icons otherwise #4821 */\r
 337 .cke_skin_kama .cke_browser_ie .cke_button .cke_buttonarrow\r
 338 {\r
 339         filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod='scale');\r
 340 }\r
 341 .cke_skin_kama .cke_browser_ie6 .cke_button .cke_buttonarrow\r
 342 {\r
 343         filter: ;\r
 344 }\r
 345 \r
 346 .cke_skin_kama .cke_rtl .cke_button .cke_buttonarrow\r
 347 {\r
 348         background-position: 0 -1469px; /* (0, -5) */\r
 349         float: right;\r
 350 }\r
 351 \r
 352 /*** Firefox 2 ***/\r
 353 \r
 354 .cke_skin_kama .cke_browser_gecko .cke_toolbar,\r
 355 .cke_skin_kama .cke_browser_gecko .cke_button a,\r
 356 .cke_skin_kama .cke_browser_gecko .cke_button a.cke_off,\r
 357 .cke_skin_kama .cke_browser_gecko .cke_button .cke_icon,\r
 358 .cke_skin_kama .cke_browser_gecko .cke_button .cke_buttonarrow,\r
 359 .cke_skin_kama .cke_browser_gecko .cke_separator,\r
 360 .cke_skin_kama .cke_browser_gecko .cke_toolbar_start\r
 361 {\r
 362         display: block;\r
 363         float: left;\r
 364 }\r
 365 \r
 366 .cke_skin_kama .cke_browser_gecko.cke_hc .cke_button .cke_icon\r
 367 {\r
 368         display: none;\r
 369 }\r
 370 \r
 371 .cke_skin_kama .cke_browser_gecko .cke_rtl .cke_toolbar,\r
 372 .cke_skin_kama .cke_browser_gecko .cke_rtl .cke_button a,\r
 373 .cke_skin_kama .cke_browser_gecko .cke_rtl.cke_button a.cke_off,\r
 374 .cke_skin_kama .cke_browser_gecko .cke_rtl .cke_button .cke_icon,\r
 375 .cke_skin_kama .cke_browser_gecko .cke_rtl .cke_button .cke_buttonarrow,\r
 376 .cke_skin_kama .cke_browser_gecko .cke_rtl .cke_toolbar_start\r
 377 {\r
 378         float: right;\r
 379 }\r
 380 \r
 381 .cke_skin_kama .cke_browser_gecko .cke_button .cke_label,\r
 382 .cke_skin_kama .cke_browser_gecko .cke_break\r
 383 {\r
 384         float: left;\r
 385 }\r
 386 \r
 387 .cke_skin_kama .cke_browser_gecko .cke_rtl .cke_button .cke_label,\r
 388 .cke_skin_kama .cke_browser_gecko .cke_rtl .cke_break\r
 389 {\r
 390         float: right;\r
 391 }\r
 392 \r
 393 /*** IE ***/\r
 394 \r
 395 /* The biggest problem with IE is the RTL support (and float:right). It's\r
 396    totally broken, and quite delicate. IE8 fixed these issues. */\r
 397 \r
 398 .cke_skin_kama .cke_browser_ie .cke_rtl .cke_button .cke_icon,\r
 399 .cke_skin_kama .cke_browser_ie .cke_rtl .cke_button .cke_label,\r
 400 .cke_skin_kama .cke_browser_ie .cke_rtl .cke_button .cke_buttonarrow\r
 401 {\r
 402         float: none;\r
 403 }\r
 404 \r
 405 /*** WebKit ***/\r
 406 \r
 407 /* We have originally used display:inline-block+float for cke_toolbar and it\r
 408    worked well in all browsers, except IE+RTL. We had to change it to inline\r
 409    and remove the float. This change didn't play well with Safari. */\r
 410 \r
 411 .cke_skin_kama .cke_browser_webkit .cke_toolbar\r
 412 {\r
 413         float: left;\r
 414 }\r
 415 \r
 416 .cke_skin_kama .cke_browser_webkit .cke_rtl .cke_toolbar\r
 417 {\r
 418         float: right;\r
 419 }\r
 420 \r
 421 /*** Mixed Fixes ***/\r
 422 \r
 423 .cke_skin_kama .cke_browser_ie8 .cke_button .cke_label,\r
 424 .cke_skin_kama .cke_browser_opera .cke_button .cke_label,\r
 425 .cke_skin_kama .cke_browser_webkit .cke_button .cke_label\r
 426 {\r
 427         line-height: 20px;\r
 428 }\r
 429 \r
 430 .cke_skin_kama .cke_browser_opera.cke_browser_quirks .cke_button .cke_label,\r
 431 .cke_skin_kama .cke_browser_iequirks .cke_button .cke_label\r
 432 {\r
 433         line-height: 17px;\r
 434 }\r
 435 \r
 436 /* Fix cursor shape consistency on toolbar combos (#4031) */\r
 437 .cke_skin_kama .cke_browser_ie .cke_rcombo,\r
 438 .cke_skin_kama .cke_browser_ie .cke_rcombo *\r
 439 {\r
 440         cursor: default;\r
 441 }\r
 442 \r
 443 .cke_skin_kama .cke_browser_ie .cke_toolbox\r
 444 {\r
 445         padding-bottom: 5px;\r
 446         _padding-bottom: 6px;\r
 447 }\r
 448 \r
 449 .cke_shared .cke_skin_kama .cke_browser_ie .cke_toolbox\r
 450 {\r
 451         padding-bottom: 0;\r
 452 }\r