_source/skins/kama/toolbar.css

   1 /*
   2 Copyright (c) 2003-2011, 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_separator
  83 {
  84         display: inline-block;
  85         border-left: solid 1px #D3D3D3;
  86         margin: 3px 2px 0;
  87         height: 16px;
  88
  89         /* These are for IE < 8, but it's ok for the others */
  90         vertical-align: top;
  91 }
  92
  93 .cke_skin_kama .cke_break
  94 {
  95         font-size: 0;
  96         clear: left;
  97 }
  98
  99 .cke_skin_kama .cke_rtl .cke_break
 100 {
 101         clear: right;
 102 }
 103
 104 .cke_skin_kama .cke_toolbar_start
 105 {
 106         display: none;
 107 }
 108
 109 .cke_skin_kama .cke_toolgroup
 110 {
 111         -moz-border-radius:5px;
 112         -webkit-border-radius: 5px;
 113         border-radius: 5px;
 114         background-image: url(images/sprites.png);
 115         _background-image: url(images/sprites_ie6.png);
 116         background-repeat: repeat-x;
 117         background-position: 0 -500px;
 118         float: left;
 119         margin-right: 6px;
 120         margin-bottom: 5px;
 121         padding: 2px;
 122         display: inline;
 123 }
 124
 125 .cke_skin_kama .cke_rtl .cke_toolgroup
 126 {
 127         float: right;
 128         margin-right: 0;
 129         margin-left: 6px;
 130 }
 131
 132 .cke_skin_kama .cke_button a,
 133 .cke_skin_kama .cke_button a:hover,
 134 .cke_skin_kama .cke_button a:focus,
 135 .cke_skin_kama .cke_button a:active,
 136 .cke_skin_kama .cke_button a.cke_off
 137 {
 138         border-radius: 3px;
 139         outline: none;
 140         padding: 2px 4px;
 141         height: 18px;
 142         display: inline-block;
 143         cursor: default;
 144 }
 145
 146 .cke_skin_kama .cke_button a,
 147 .cke_skin_kama .cke_button a.cke_off
 148 {
 149         filter: alpha(opacity=70); /* IE */
 150         opacity: 0.70; /* Safari, Opera and Mozilla */
 151         -moz-border-radius: 3px;
 152         -webkit-border-radius: 3px;
 153 }
 154
 155 .cke_skin_kama .cke_hc .cke_button a,
 156 .cke_skin_kama .cke_hc .cke_button a.cke_off
 157 {
 158         opacity: 1.0;
 159         filter: alpha(opacity=100);
 160         border: 1px solid white;
 161 }
 162
 163 .cke_skin_kama .cke_button a.cke_on
 164 {
 165         background-color: #a3d7ff;
 166         filter: alpha(opacity=100); /* IE */
 167         opacity: 1; /* Safari, Opera and Mozilla */
 168         padding: 2px 4px;
 169 }
 170
 171 .cke_skin_kama .cke_hc .cke_button a.cke_on
 172 {
 173         padding: 0 2px !important;
 174         border-width: 3px;
 175 }
 176
 177 .cke_skin_kama .cke_button a.cke_disabled *
 178 {
 179         filter: alpha(opacity=30); /* IE */
 180         opacity: 0.3; /* Safari, Opera and Mozilla */
 181 }
 182
 183 /* IE with zoom != 100% will distort the icons otherwise #4821 */
 184 .cke_skin_kama .cke_browser_ie .cke_button a.cke_disabled *,
 185 .cke_skin_kama .cke_browser_ie a:hover.cke_button .cke_disabled *
 186 {
 187         filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod='scale'), alpha(opacity=30);
 188 }
 189 .cke_skin_kama .cke_browser_ie .cke_rtl .cke_button a.cke_disabled *,
 190 .cke_skin_kama .cke_browser_ie .cke_rtl a:hover.cke_button .cke_disabled *
 191 {
 192         filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod='scale'), alpha(opacity=30);
 193 }
 194 .cke_skin_kama .cke_browser_ie6 .cke_button a.cke_disabled *,
 195 .cke_skin_kama .cke_browser_ie6 a:hover.cke_button .cke_disabled *,
 196 .cke_skin_kama .cke_browser_ie .cke_button.cke_noalphafix a.cke_disabled *
 197 {
 198         filter: alpha(opacity=30);
 199 }
 200
 201 .cke_skin_kama .cke_hc .cke_button a.cke_disabled *,
 202 .cke_skin_kama .cke_browser_ie.cke_hc a:hover.cke_button .cke_disabled *
 203 {
 204         filter: alpha(opacity=60);
 205         opacity: 0.6;
 206 }
 207
 208 .cke_skin_kama .cke_button a:hover.cke_on,
 209 .cke_skin_kama .cke_button a:focus.cke_on,
 210 .cke_skin_kama .cke_button a:active.cke_on,     /* IE */
 211 .cke_skin_kama .cke_button a:hover.cke_off,
 212 .cke_skin_kama .cke_button a:focus.cke_off,
 213 .cke_skin_kama .cke_button a:active.cke_off     /* IE */
 214 {
 215         filter: alpha(opacity=100); /* IE */
 216         opacity: 1; /* Safari, Opera and Mozilla */
 217         padding: 2px 4px;
 218 }
 219
 220 .cke_skin_kama .cke_button a:hover,
 221 .cke_skin_kama .cke_button a:focus,
 222 .cke_skin_kama .cke_button a:active     /* IE */
 223 {
 224         background-color: #dff1ff;
 225 }
 226
 227 .cke_skin_kama .cke_button a:hover.cke_on,
 228 .cke_skin_kama .cke_button a:focus.cke_on,
 229 .cke_skin_kama .cke_button a:active.cke_on      /* IE */
 230 {
 231         background-color: #86caff;
 232 }
 233
 234 .cke_skin_kama .cke_hc .cke_button a:hover,
 235 .cke_skin_kama .cke_hc .cke_button a:focus,
 236 .cke_skin_kama .cke_hc .cke_button a:active     /* IE */
 237 {
 238         padding: 0 2px !important;
 239         border-width: 3px;
 240 }
 241
 242 .cke_skin_kama .cke_button .cke_icon
 243 {
 244         background-image: url(icons.png);
 245         background-position: 100px;
 246         background-repeat: no-repeat;
 247         margin-top: 1px;
 248         width: 16px;
 249         height: 16px;
 250         display: inline-block;
 251         cursor: default;
 252 }
 253
 254 .cke_skin_kama .cke_rtl .cke_button .cke_icon
 255 {
 256         background-image: url(icons_rtl.png);
 257 }
 258 /* IE with zoom != 100% will distort the icons otherwise #4821 */
 259 .cke_skin_kama .cke_browser_ie .cke_button .cke_icon
 260 {
 261         filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod='scale');
 262 }
 263 .cke_skin_kama .cke_browser_ie .cke_rtl .cke_button .cke_icon
 264 {
 265         filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod='scale');
 266 }
 267 .cke_skin_kama .cke_browser_ie6 .cke_button .cke_icon,
 268 .cke_skin_kama .cke_browser_ie6 .cke_rtl .cke_button .cke_icon,
 269 .cke_skin_kama .cke_browser_ie .cke_button.cke_noalphafix .cke_icon,
 270 .cke_skin_kama .cke_browser_ie .cke_rtl .cke_button.cke_noalphafix .cke_icon
 271 {
 272         filter: ;
 273 }
 274
 275
 276 .cke_skin_kama .cke_button .cke_label
 277 {
 278         cursor: default;
 279         display: none;
 280         padding-left: 3px;
 281         line-height: 18px;
 282 }
 283
 284 .cke_skin_kama .cke_hc .cke_button .cke_label
 285 {
 286         padding: 0;
 287         display: inline-block;
 288 }
 289
 290 .cke_skin_kama .cke_hc .cke_button .cke_icon
 291 {
 292         display: none;
 293 }
 294
 295 .cke_skin_kama .cke_accessibility
 296 {
 297         position: absolute;
 298         display: block;
 299         width: 0;
 300         height: 0;
 301         overflow: hidden;
 302 }
 303
 304 .cke_skin_kama .cke_button .cke_buttonarrow
 305 {
 306         display: inline-block;
 307         height: 17px;
 308         width: 8px;
 309         background-position: 2px -1469px; /* (+2, -5) */
 310         background-image: url(images/sprites.png);
 311         _background-image: url(images/sprites_ie6.png);
 312         background-repeat: no-repeat;
 313         cursor: default;
 314 }
 315
 316 /* IE with zoom != 100% will distort the icons otherwise #4821 */
 317 .cke_skin_kama .cke_browser_ie .cke_button .cke_buttonarrow
 318 {
 319         filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod='scale');
 320 }
 321 .cke_skin_kama .cke_browser_ie6 .cke_button .cke_buttonarrow
 322 {
 323         filter: ;
 324 }
 325
 326 /*** Firefox 2 ***/
 327
 328 .cke_skin_kama .cke_browser_gecko .cke_toolbar,
 329 .cke_skin_kama .cke_browser_gecko .cke_button a,
 330 .cke_skin_kama .cke_browser_gecko .cke_button a.cke_off,
 331 .cke_skin_kama .cke_browser_gecko .cke_button .cke_icon,
 332 .cke_skin_kama .cke_browser_gecko .cke_button .cke_buttonarrow,
 333 .cke_skin_kama .cke_browser_gecko .cke_separator,
 334 .cke_skin_kama .cke_browser_gecko .cke_toolbar_start
 335 {
 336         display: block;
 337         float: left;
 338 }
 339
 340 .cke_skin_kama .cke_browser_gecko.cke_hc .cke_button .cke_icon
 341 {
 342         display: none;
 343 }
 344
 345 .cke_skin_kama .cke_browser_gecko .cke_rtl .cke_toolbar,
 346 .cke_skin_kama .cke_browser_gecko .cke_rtl .cke_button a,
 347 .cke_skin_kama .cke_browser_gecko .cke_rtl.cke_button a.cke_off,
 348 .cke_skin_kama .cke_browser_gecko .cke_rtl .cke_button .cke_icon,
 349 .cke_skin_kama .cke_browser_gecko .cke_rtl .cke_button .cke_buttonarrow,
 350 .cke_skin_kama .cke_browser_gecko .cke_rtl .cke_separator,
 351 .cke_skin_kama .cke_browser_gecko .cke_rtl .cke_toolbar_start
 352 {
 353         float: right;
 354 }
 355
 356 .cke_skin_kama .cke_browser_gecko .cke_button .cke_label,
 357 .cke_skin_kama .cke_browser_gecko .cke_break
 358 {
 359         float: left;
 360 }
 361
 362 .cke_skin_kama .cke_browser_gecko .cke_rtl .cke_button .cke_label,
 363 .cke_skin_kama .cke_browser_gecko .cke_rtl .cke_break
 364 {
 365         float: right;
 366 }
 367
 368 /*** WebKit ***/
 369
 370 /* We have originally used display:inline-block+float for cke_toolbar and it
 371    worked well in all browsers, except IE+RTL. We had to change it to inline
 372    and remove the float. This change didn't play well with Safari. */
 373
 374 .cke_skin_kama .cke_browser_webkit .cke_toolbar
 375 {
 376         float: left;
 377 }
 378
 379 .cke_skin_kama .cke_browser_webkit .cke_rtl .cke_toolbar
 380 {
 381         float: right;
 382 }
 383
 384 /*** Mixed Fixes ***/
 385
 386 .cke_skin_kama .cke_browser_ie .cke_button .cke_label
 387 {
 388         line-height: 16px;
 389 }
 390
 391 /* Fix cursor shape consistency on toolbar combos (#4031) */
 392 .cke_skin_kama .cke_browser_ie .cke_rcombo,
 393 .cke_skin_kama .cke_browser_ie .cke_rcombo *
 394 {
 395         cursor: default;
 396 }
 397
 398 .cke_skin_kama .cke_browser_ie .cke_toolbox
 399 {
 400         padding-bottom: 5px;
 401         _padding-bottom: 6px;
 402 }
 403
 404 .cke_shared .cke_skin_kama .cke_browser_ie .cke_toolbox
 405 {
 406         padding-bottom: 0;
 407 }