ckeditor/_source/skins/kama/toolbar.css

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