examples/desktop/css/desktop.css

   1 /*!
   2 * Ext JS Library 4.0
   3 * Copyright(c) 2006-2011 Sencha Inc.
   4 * licensing@sencha.com
   5 * http://www.sencha.com/license
   6 */
   7
   8 #poweredby {
   9     position: absolute;
  10     bottom: 40px;
  11     right: 20px;
  12     z-index: 15000;
  13
  14     /* IE 5-7 */
  15     filter: alpha(opacity=70);
  16     /* Netscape */
  17     -moz-opacity: 0.7;
  18     /* Safari 1.x */
  19     -khtml-opacity: 0.7;
  20     /* Good browsers */
  21     opacity: 0.7;
  22 }
  23
  24 #poweredby div {
  25     position: relative;
  26     width: 150px;
  27     height: 25px;
  28     background-image: url(../images/powered-by-ext-js.png);
  29     background-repeat: no-repeat;
  30 }
  31
  32 /* The simple background image PNG does not work in IE6-8, but does in IE9 */
  33 .x-ie6 #poweredby div,
  34 .x-ie7 #poweredby div,
  35 .x-ie8 #poweredby div {
  36     background-image: none;
  37     filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/powered-by-ext-js.png', sizingMethod='scale');
  38 }
  39
  40 /*----------------------------------------------------
  41     Start Button
  42 */
  43
  44 .ux-start-button-icon {
  45     background-image: url(../images/taskbar/sencha.gif) !important;
  46     background-color: transparent;
  47 }
  48
  49 .ux-start-button .x-btn-arrow {
  50     background-image: none;
  51 }
  52
  53 .ux-start-button .x-btn-arrow-right {
  54     padding-left: 10px;
  55 }
  56
  57 .ux-taskbar {
  58     padding-left: 4px !important;
  59 }
  60
  61 /*
  62     Start Button (Black)
  63 */
  64
  65 .ux-desktop-black .ux-start-button {
  66     height: 28px;
  67     padding: 0px;
  68     display: block;
  69 }
  70
  71 .ux-desktop-black .ux-start-button em {
  72     margin-top: 5px;
  73 }
  74
  75 .ux-desktop-black .ux-start-button .x-btn-inner {
  76     color: black;
  77     font-size:11px;
  78     font-weight: bold;
  79 }
  80
  81 .ux-desktop-black .ux-start-button {
  82     background-image: -moz-linear-gradient(center top , #E4F3FF, #D9EDFF 48%, #C2D8F2 52%, #C6DCF6);
  83     border-radius: 8px 8px 8px 8px;
  84     border-color: #81A4D0;
  85 }
  86
  87 /*----------------------------------------------------
  88     Start Menu
  89 */
  90
  91 .ux-start-menu-toolbar .x-btn-inner {
  92     text-align: left;
  93 }
  94
  95 .ux-start-menu-toolbar {
  96     padding: 4px !important;
  97 }
  98
  99 /*----------------------------------------------------
 100     TaskBar
 101 */
 102
 103 .ux-taskbar .x-toolbar {
 104     background: transparent none;
 105     border-color: transparent;
 106 }
 107
 108 .x-ie6 .ux-taskbar .x-toolbar {
 109     border-color: #d3e1f1;
 110 }
 111
 112 .ux-desktop-windowbar .x-btn-inner,
 113 .x-nbr .ux-desktop-windowbar .x-btn-icon-text-left button {
 114     text-align: left !important;
 115 }
 116
 117 .ux-taskbar .x-toolbar {
 118     height: 28px;
 119 }
 120
 121 .ux-taskbar {
 122     height: 28px;
 123     padding: 0;
 124 }
 125
 126 .x-toolbar .x-toolbar {
 127     padding: 0;
 128 }
 129
 130 /*
 131     TaskBar (Black)
 132 */
 133
 134 .ux-desktop-black .ux-taskbar {
 135     background: transparent url('../images/taskbar/black/taskbar-start-panel-bg.gif') repeat-x left top;
 136     border-color: transparent;
 137     /*height: 30px;*/
 138 }
 139
 140 .ux-desktop-black .ux-taskbar .x-splitter {
 141     background: transparent url(../images/taskbar/black/taskbar-split-h.gif) no-repeat scroll 0 -2px;
 142 }
 143
 144 .ux-desktop-black .ux-taskbar .x-toolbar-text {
 145     color: white !important;
 146 }
 147
 148 .ux-desktop-black .ux-taskbar .x-btn-default-toolbar-small-over {
 149     background-color: yellow;
 150 }
 151
 152 .ux-desktop-black .ux-taskbar .x-btn-inner {
 153     color: white;
 154 }
 155
 156 .ux-desktop-black .ux-taskbar .x-btn-pressed .x-btn-inner, .ux-taskbar .x-btn-over .x-btn-inner {
 157     color: black;
 158 }
 159
 160 /*----------------------------------------------------
 161     Tray Clock
 162 */
 163
 164 .ux-desktop-trayclock {
 165     text-align: center;
 166     vertical-align: middle;
 167     padding-top: 0;
 168     padding-bottom: 0;
 169 }
 170
 171 /*----------------------------------------------------
 172     Desktop DataView
 173 */
 174
 175 .ux-wallpaper {
 176     background-color: #3d71b8;
 177 }
 178
 179 .ux-wallpaper-tiled {
 180     background-repeat: repeat;
 181 }
 182
 183 .ux-desktop-shortcut {
 184     cursor: pointer;
 185     text-align: center;
 186     padding: 8px;
 187     margin: 8px;
 188     width: 64px;
 189 }
 190
 191 .ux-desktop-shortcut-icon {
 192     width: 48px;
 193     height: 48px;
 194     background-color: transparent;
 195     background-repeat: no-repeat;
 196 }
 197
 198 .ux-desktop-shortcut-text {
 199     font: normal 10px tahoma,arial,verdana,sans-serif;
 200     text-decoration: none;
 201     padding-top: 5px;
 202     color: white;
 203 }
 204
 205 .x-view-over .ux-desktop-shortcut-text {
 206     text-decoration: underline;
 207 }
 208
 209
 210 /*----------------------------------------------------
 211     Various icon classes
 212 */
 213
 214 .accordion-shortcut {
 215     background-image: url(../images/im48x48.png);
 216 }
 217
 218 .cpu-shortcut {
 219     background-image: url(../images/statusLarge.png);
 220 }
 221
 222 .grid-shortcut {
 223     background-image: url(../images/grid48x48.png);
 224 }
 225
 226 .notepad-shortcut {
 227     background-image: url(../images/notepadLarge.png);
 228     width: 46px;
 229     height: 46px;
 230 }
 231
 232 .x-ie6 .accordion-shortcut {
 233     background-image: none;
 234     filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/im48x48.png', sizingMethod='scale');
 235 }
 236
 237 .x-ie6 .cpu-shortcut {
 238     background-image: none;
 239     filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/statusLarge.png', sizingMethod='scale');
 240 }
 241
 242 .x-ie6 .grid-shortcut {
 243     background-image: none;
 244     filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/grid48x48.png', sizingMethod='scale');
 245 }
 246
 247 .x-ie6 .notepad-shortcut {
 248     background-image: none;
 249     filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/notepadLarge.png', sizingMethod='scale');
 250 }
 251
 252 .video {
 253     background-image: url(../images/gears.gif);
 254 }
 255
 256 .bogus {
 257     background-image: url( ../images/bogus.png ) !important;
 258 }
 259
 260 .notepad {
 261     background-image: url( ../images/bogus.png ) !important;
 262 }
 263
 264 .logout {
 265     background-image: url( ../images/logout.gif ) !important;
 266 }
 267
 268 .settings {
 269     background-image: url( ../images/gears.gif ) !important;
 270 }
 271
 272
 273 .icon-grid {
 274     background-image:url( ../images/grid.png ) !important;
 275 }
 276 .add {
 277     background-image:url(../../shared/icons/fam/add.gif) !important;
 278 }
 279 .option {
 280     background-image:url(../../shared/icons/fam/plugin.gif) !important;
 281 }
 282 .remove {
 283     background-image:url(../../shared/icons/fam/delete.gif) !important;
 284 }
 285 .save {
 286     background-image:url(../../shared/icons/save.gif) !important;
 287 }
 288 .accordion {
 289     background-image:url(../images/accordian.gif) !important;
 290 }
 291 .tabs {
 292     background-image:url(../images/tabs.gif) !important;
 293 }
 294
 295 /*----------------------------------------------------
 296     IM window icons
 297 */
 298
 299 .user {
 300     background-image:url( ../../shared/icons/fam/user.gif ) !important;
 301 }
 302
 303 .user-add {
 304     background-image:url(../../shared/icons/fam/user_add.gif) !important;
 305 }
 306
 307 .user-delete {
 308     background-image:url(../../shared/icons/fam/user_delete.gif) !important;
 309 }
 310
 311 .connect {
 312     background-image:url(../../shared/icons/fam/connect.gif) !important;
 313 }
 314
 315 .user-girl {
 316     background-image:url(../../shared/icons/fam/user_female.gif) !important;
 317 }
 318
 319 .user-kid {
 320     background-image:url(../../shared/icons/fam/user_green.gif) !important;
 321 }
 322
 323 .user-suit {
 324     background-image:url(../../shared/icons/fam/user_suit.gif) !important;
 325 }