X-Git-Url: http://git.ithinksw.org/extjs.git/blobdiff_plain/0494b8d9b9bb03ab6c22b34dae81261e3cd7e3e6..7a654f8d43fdb43d78b63d90528bed6e86b608cc:/examples/desktop/css/desktop.css diff --git a/examples/desktop/css/desktop.css b/examples/desktop/css/desktop.css index cc61999a..a9a8b431 100644 --- a/examples/desktop/css/desktop.css +++ b/examples/desktop/css/desktop.css @@ -1,660 +1,325 @@ /*! - * Ext JS Library 3.3.1 - * Copyright(c) 2006-2010 Sencha Inc. - * licensing@sencha.com - * http://www.sencha.com/license - */ -html, body { - background:#3d71b8 url(../wallpapers/desktop.jpg) no-repeat left top; - font: normal 12px tahoma, arial, verdana, sans-serif; - margin: 0; - padding: 0; - border: 0 none; - overflow: hidden; - height: 100%; -} - -.start { - background-image: url( ../images/taskbar/black/startbutton-icon.gif ) !important; -} - -.bogus { - background-image: url( ../images/bogus.png ) !important; -} +* Ext JS Library 4.0 +* Copyright(c) 2006-2011 Sencha Inc. +* licensing@sencha.com +* http://www.sencha.com/license +*/ -.logout { - background-image: url( ../images/logout.gif ) !important; -} +#poweredby { + position: absolute; + bottom: 40px; + right: 20px; + z-index: 15000; -.settings { - background-image: url( ../images/gears.gif ) !important; + /* IE 5-7 */ + filter: alpha(opacity=70); + /* Netscape */ + -moz-opacity: 0.7; + /* Safari 1.x */ + -khtml-opacity: 0.7; + /* Good browsers */ + opacity: 0.7; } -#dpanels { - width: 250px; - float: right; +#poweredby div { + position: relative; + width: 150px; + height: 25px; + background-image: url(../images/powered-by-ext-js.png); + background-repeat: no-repeat; } -#dpanels .x-panel { - margin: 15px; +/* The simple background image PNG does not work in IE6-8, but does in IE9 */ +.x-ie6 #poweredby div, +.x-ie7 #poweredby div, +.x-ie8 #poweredby div { + background-image: none; + filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/powered-by-ext-js.png', sizingMethod='scale'); } -#dpanels .x-date-picker { - border: 0 none; - border-top: 0 none; - background: transparent; -} +/*---------------------------------------------------- + Start Button +*/ -#dpanels .x-date-picker td.x-date-active { - background: #ffffff; +.ux-start-button-icon { + background-image: url(../images/taskbar/sencha.gif) !important; + background-color: transparent; } -#dpanels .x-date-picker { - width: 100% !important; -} - -#x-desktop { - width: 100%; - height: 100%; - border: 0 none; - position: relative; - overflow:hidden; - zoom:1; -} - -#ux-taskbar .x-btn { - margin: 1px 0 0 1px; -} - -#ux-taskbar-start .x-btn { - margin: 0; -} - -#ux-taskbar button { - /* width: 150px; - overflow: hidden; */ - text-align: left; - color: #ffffff; -} -#title-bar-wrapper { - height:35px; +.ux-start-button .x-btn-arrow { + background-image: none; } -#title-bar { - color: #225599; - padding: 9px 7px; - font: bold 16px tahoma,arial,verdana,sans-serif; - float:left; +.ux-start-button .x-btn-arrow-right { + padding-left: 10px; } -#x-logout { - float:right; - padding:6px 7px; +.ux-taskbar { + padding-left: 4px !important; } -.x-btn-text-icon .x-btn-center .logout { - background-position:0pt 3px; - background-repeat:no-repeat; - padding:3px 0pt 3px 18px; -} - -#ux-taskbar { - background:transparent none; - height:30px; - margin:0; - padding:0; - position:relative; - z-index:12001; -} - -.x-btn-icon .ux-taskbutton-center .x-btn-text{ - background-position: center; - background-repeat: no-repeat; - height: 16px; - width: 16px; - cursor:pointer; - white-space: nowrap; - padding:0; -} -.x-btn-icon .ux-taskbutton-center{ - padding:1px; -} - -.x-btn-text-icon .ux-taskbutton-center .x-btn-text{ - background-position: 0 6px; - background-repeat: no-repeat; - padding:7px 0px 7px 20px; -} +/* + Start Button (Black) +*/ -.x-btn-text-icon .ux-startbutton-center .x-btn-text{ - background-position: 0 4px; - background-repeat: no-repeat; - color:#000000 !important; - font-weight:bold; - padding:7px 0px 7px 28px; +.ux-desktop-black .ux-start-button { + height: 28px; + padding: 0px; + display: block; } -.ux-taskbutton-left, .ux-taskbutton-right{ - font-size:1px; - line-height:1px; -} -.ux-taskbutton-left{ - width:4px; - height:28px; - background:url( ../images/taskbar/black/taskbutton.gif ) no-repeat 0 0; -} -.ux-taskbutton-right{ - width:4px; - height:28px; - background:url( ../images/taskbar/black/taskbutton.gif ) no-repeat 0 -28px; -} -.ux-taskbutton-left i, .ux-taskbutton-right i{ - display:block; - width:4px; - overflow:hidden; - font-size:1px; - line-height:1px; -} -.ux-taskbutton-center{ - background:url( ../images/taskbar/black/taskbutton.gif ) repeat-x 0 -56px; - vertical-align: middle; - text-align:center; - padding:0 5px; - cursor:pointer; - white-space:nowrap; +.ux-desktop-black .ux-start-button em { + margin-top: 5px; } -#ux-taskbar .ux-taskbutton-left{ - background-position:0 0; -} -#ux-taskbar .ux-taskbutton-right{ - background-position:0 -28px; -} -#ux-taskbar .ux-taskbutton-center{ - background-position:0 -56px; +.ux-desktop-black .ux-start-button .x-btn-inner { + color: black; + font-size:11px; + font-weight: bold; } -#ux-taskbar .x-btn-over .ux-taskbutton-left{ - background-position:0 -252px; -} -#ux-taskbar .x-btn-over .ux-taskbutton-right{ - background-position:0 -280px; -} -#ux-taskbar .x-btn-over .ux-taskbutton-center{ - background-position:0 -308px; +.ux-desktop-black .ux-start-button { + background-image: -moz-linear-gradient(center top , #E4F3FF, #D9EDFF 48%, #C2D8F2 52%, #C6DCF6); + border-radius: 8px 8px 8px 8px; + border-color: #81A4D0; } -#ux-taskbar .x-btn-click .ux-taskbutton-left{ - background-position:0 -168px; -} -#ux-taskbar .x-btn-click .ux-taskbutton-right{ - background-position:0 -196px; -} -#ux-taskbar .x-btn-click .ux-taskbutton-center{ - background-position:0 -224px; -} +/*---------------------------------------------------- + Start Menu +*/ -#ux-taskbar .active-win .ux-taskbutton-left{ - background-position:0 -84px; -} -#ux-taskbar .active-win .ux-taskbutton-right{ - background:url( ../images/taskbar/black/taskbutton.gif ) no-repeat 0 -112px; -} -#ux-taskbar .active-win .ux-taskbutton-center{ - background:url( ../images/taskbar/black/taskbutton.gif ) repeat-x 0 -140px; -} -#ux-taskbar .active-win .ux-taskbutton-center button { - color:#fff; +.ux-start-menu-toolbar .x-btn-inner { + text-align: left; } -#spacer { - height: 25px; - float: left; - width: 0; - overflow: hidden; - margin-top: 2px; +.ux-start-menu-toolbar { + padding: 4px !important; } -.x-window-body p,.x-panel-body p { - padding: 10px; - margin: 0; -} +/*---------------------------------------------------- + TaskBar +*/ -.x-window-maximized .x-window-bc { - height:0; +.ux-taskbar .x-toolbar { + background: transparent none; + border-color: transparent; } -.icon-grid { - background-image:url( ../images/grid.png ) !important; -} -.add { - background-image:url(../../shared/icons/fam/add.gif) !important; -} -.option { - background-image:url(../../shared/icons/fam/plugin.gif) !important; -} -.remove { - background-image:url(../../shared/icons/fam/delete.gif) !important; -} -.save { - background-image:url(../../shared/icons/save.gif) !important; -} -.accordion { - background-image:url(../images/accordian.gif) !important; -} -.tabs { - background-image:url(../images/tabs.gif) !important; +.x-ie6 .ux-taskbar .x-toolbar { + border-color: #d3e1f1; } -/* IM window icons */ - -.user { - background-image:url( ../../shared/icons/fam/user.gif ) !important; +.ux-desktop-windowbar .x-btn-inner, +.x-nbr .ux-desktop-windowbar .x-btn-icon-text-left button { + text-align: left !important; } -.user-add { - background-image:url(../../shared/icons/fam/user_add.gif) !important; +.ux-taskbar .x-toolbar { + height: 28px; } -.user-delete { - background-image:url(../../shared/icons/fam/user_delete.gif) !important; +.ux-taskbar { + height: 28px; + padding: 0; } -.connect { - background-image:url(../../shared/icons/fam/connect.gif) !important; +.x-toolbar .x-toolbar { + padding: 0; } -.user-girl { - background-image:url(../../shared/icons/fam/user_female.gif) !important; -} +/* + TaskBar (Black) +*/ -.user-kid { - background-image:url(../../shared/icons/fam/user_green.gif) !important; +.ux-desktop-black .ux-taskbar { + background: transparent url('../images/taskbar/black/taskbar-start-panel-bg.gif') repeat-x left top; + border-color: transparent; + /*height: 30px;*/ } -.user-suit { - background-image:url(../../shared/icons/fam/user_suit.gif) !important; +.ux-desktop-black .ux-taskbar .x-splitter { + background: transparent url(../images/taskbar/black/taskbar-split-h.gif) no-repeat scroll 0 -2px; } -.ux-start-menu { - background:transparent none; - border:0px none; - padding:0; +.ux-desktop-black .ux-taskbar .x-toolbar-text { + color: white !important; } -.ux-start-menu-tl .x-window-header { - color:#f1f1f1; - font:bold 11px tahoma,arial,verdana,sans-serif; - padding:5px 0 4px 0; +.ux-desktop-black .ux-taskbar .x-btn-default-toolbar-small-over { + background-color: yellow; } -.x-panel-tl .x-panel-icon, .ux-start-menu-tl .x-panel-icon { - background-position:0pt 4px; - background-repeat:no-repeat; - padding-left:20px !important; +.ux-desktop-black .ux-taskbar .x-btn-inner { + color: white; } -.ux-start-menu-tl { - background: transparent url( ../images/taskbar/black/start-menu-left-corners.png ) no-repeat 0 0; - padding-left:6px; - zoom:1; - z-index:1; - position:relative; +.ux-desktop-black .ux-taskbar .x-btn-pressed .x-btn-inner, .ux-taskbar .x-btn-over .x-btn-inner { + color: black; } -.ux-start-menu-tr { - background: transparent url( ../images/taskbar/black/start-menu-right-corners.png ) no-repeat right 0; - padding-right:6px; -} +/*---------------------------------------------------- + Tray Clock +*/ -.ux-start-menu-tc { - background: transparent url( ../images/taskbar/black/start-menu-top-bottom.png ) repeat-x 0 0; - overflow:hidden; - zoom:1; +.ux-desktop-trayclock { + text-align: center; + vertical-align: middle; + padding-top: 0; + padding-bottom: 0; } -.ux-start-menu-ml { - background: transparent url( ../images/taskbar/black/start-menu-left-right.png ) repeat-y 0 0; - padding-left:6px; - zoom:1; -} +/*---------------------------------------------------- + Desktop DataView +*/ -.ux-start-menu-bc { - background: transparent url( ../images/taskbar/black/start-menu-top-bottom.png ) repeat-x 0 bottom; - zoom:1; +.ux-wallpaper { + background-color: #3d71b8; } -.ux-start-menu-bc .x-window-footer { - padding-bottom:6px; - zoom:1; - font-size:0; - line-height:0; +.ux-wallpaper-tiled { + background-repeat: repeat; } -.ux-start-menu-bl { - background: transparent url( ../images/taskbar/black/start-menu-left-corners.png ) no-repeat 0 bottom; - padding-left:6px; - zoom:1; +.ux-desktop-shortcut { + cursor: pointer; + text-align: center; + padding: 8px; + margin: 8px; + width: 64px; } -.ux-start-menu-br { - background: transparent url( ../images/taskbar/black/start-menu-right-corners.png ) no-repeat right bottom; - padding-right:6px; - zoom:1; +.ux-desktop-shortcut-icon { + width: 48px; + height: 48px; + background-color: transparent; + background-repeat: no-repeat; } -.x-panel-nofooter .ux-start-menu-bc { - height:6px; +.ux-desktop-shortcut-text { + font: normal 10px tahoma,arial,verdana,sans-serif; + text-decoration: none; + padding-top: 5px; + color: white; } -.ux-start-menu-splitbar-h { - background-color:#d0d0d0; +.x-view-over .ux-desktop-shortcut-text { + text-decoration: underline; } -.ux-start-menu-bwrap { - background:transparent none; - border:0px none; -} +/*---------------------------------------------------- + Various icon classes +*/ -.ux-start-menu-body { - background:transparent none; - border:0px none; +.accordion-shortcut { + background-image: url(../images/im48x48.png); } -.ux-start-menu-apps-panel { - background:#ffffff none; - border:1px solid #1e2124; +.cpu-shortcut { + background-image: url(../images/statusLarge.png); } -.ux-start-menu-tools-panel { - border:0px none; - background:transparent url( ../images/taskbar/black/start-menu-right.png ) repeat-y scroll right 0pt; +.grid-shortcut { + background-image: url(../images/grid48x48.png); } -#ux-taskbar-start { - background:#000000 url( ../images/taskbar/black/taskbar-start-panel-bg.gif ) repeat-x left top; - left:0px; - padding:0; - position:absolute; +.notepad-shortcut { + background-image: url(../images/notepadLarge.png); + width: 46px; + height: 46px; } -#ux-taskbar-start .x-toolbar { - background: none; - padding:0px; - border:0px none; +.x-ie6 .accordion-shortcut { + background-image: none; + filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/im48x48.png', sizingMethod='scale'); } -#ux-taskbuttons-panel { - background:#000000 url( ../images/taskbar/black/taskbuttons-panel-bg.gif ) repeat-x left top; - padding-top:0; - position:relative; +.x-ie6 .cpu-shortcut { + background-image: none; + filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/statusLarge.png', sizingMethod='scale'); } -.ux-taskbuttons-strip-wrap { - /* overflow:hidden; - position:relative; - width:100%; */ - - width:100%; - overflow:hidden; - position:relative; - zoom:1; +.x-ie6 .grid-shortcut { + background-image: none; + filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/grid48x48.png', sizingMethod='scale'); } -ul.ux-taskbuttons-strip { - display:block; - width:5000px; - zoom:1; +.x-ie6 .notepad-shortcut { + background-image: none; + filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/notepadLarge.png', sizingMethod='scale'); } -ul.ux-taskbuttons-strip li { - float:left; - margin-left:2px; +.video { + background-image: url(../images/gears.gif); } - -ul.ux-taskbuttons-strip li.ux-taskbuttons-edge { - float:left; - margin:0 !important; - padding:0 !important; - border:0 none !important; - font-size:1px !important; - line-height:1px !important; - overflow:hidden; - zoom:1; - background:transparent !important; - width:1px; +.bogus { + background-image: url( ../images/bogus.png ) !important; } -.x-clear { - clear:both; - height:0; - overflow:hidden; - line-height:0; - font-size:0; +.notepad { + background-image: url( ../images/bogus.png ) !important; } -.x-taskbuttons-scrolling { - position:relative; +.logout { + background-image: url( ../images/logout.gif ) !important; } -.x-taskbuttons-scrolling .ux-taskbuttons-strip-wrap { - margin-left:18px; - margin-right:18px; +.settings { + background-image: url( ../images/gears.gif ) !important; } -td.ux-taskButtons-edge { - /*float:left;*/ - margin:0 !important; - padding:0 !important; - border:0 none !important; - font-size:1px !important; - line-height:1px !important; - overflow:hidden; - zoom:1; - background:transparent !important; - width:1px; -} -.ux-taskbuttons-scroller-left { - background: transparent url( ../images/taskbar/black/scroll-left.gif ) no-repeat -18px 0; - width:18px; - position:absolute; - left:1px; - top:0px; - z-index:10; - cursor:pointer; -} -.ux-taskbuttons-scroller-left-over { - background-position: 0 0; -} -.ux-taskbuttons-scroller-left-disabled { - background-position: -18px 0; - opacity:.5; - -moz-opacity:.5; - filter:alpha(opacity=50); - cursor:default; +.icon-grid { + background-image:url( ../images/grid.png ) !important; } -.ux-taskbuttons-scroller-right { - background: transparent url( ../images/taskbar/black/scroll-right.gif ) no-repeat 0 0; - width:18px; - position:absolute; - right:0; - top:0px; - z-index:10; - cursor:pointer; +.add { + background-image:url(../../shared/icons/fam/add.gif) !important; } -.ux-taskbuttons-scroller-right-over { - background-position: -18px 0; +.option { + background-image:url(../../shared/icons/fam/plugin.gif) !important; } -.ux-taskbuttons-scroller-right-disabled { - background-position: 0 0; - opacity:.5; - -moz-opacity:.5; - filter:alpha(opacity=50); - cursor:default; +.remove { + background-image:url(../../shared/icons/fam/delete.gif) !important; } - -.ux-toolmenu-sep { - background-color:#18191a; - border-bottom:1px solid #858789; - display:block; - font-size:1px; - line-height:1px; - margin:2px 3px; +.save { + background-image:url(../../shared/icons/save.gif) !important; } - -.ux-start-menu-tools-panel ul.x-menu-list li.x-menu-list-item a.x-menu-item { - color:#ffffff; +.accordion { + background-image:url(../images/accordian.gif) !important; } - -.ux-start-menu-tools-panel ul.x-menu-list li.x-menu-list-item .x-menu-item-active a.x-menu-item { - color:#000000; +.tabs { + background-image:url(../images/tabs.gif) !important; } -.ux-start-menu-tools-panel .x-menu-item-active { - background: #525456 url( ../images/taskbar/black/item-over.gif ) repeat-x left bottom; - border:1px solid #000000; - padding: 0; -} +/*---------------------------------------------------- + IM window icons +*/ -#ux-taskbar .x-splitbar-h { - background:#000000 url( ../images/taskbar/black/taskbar-split-h.gif ) no-repeat 0 0; - width:8px; +.user { + background-image:url( ../../shared/icons/fam/user.gif ) !important; } -.x-window-header-text { - cursor:default; +.user-add { + background-image:url(../../shared/icons/fam/user_add.gif) !important; } -/* - * Begin Start button - */ -.ux-startbutton-left, .ux-startbutton-right{ - font-size:1px; - line-height:1px; -} -.ux-startbutton-left{ - width:10px; - height:28px; - background:url( ../images/taskbar/black/startbutton.gif ) no-repeat 0 0; -} -.ux-startbutton-right{ - width:10px; - height:30px; - background:url( ../images/taskbar/black/startbutton.gif ) no-repeat 0 -28px; -} -.ux-startbutton-left i, .ux-startbutton-right i{ - display:block; - width:10px; - overflow:hidden; - font-size:1px; - line-height:1px; -} -.ux-startbutton-center{ - background:url( ../images/taskbar/black/startbutton.gif ) repeat-x 0 -56px; - vertical-align: middle; - text-align:center; - padding:0; - cursor:pointer; - white-space:nowrap; +.user-delete { + background-image:url(../../shared/icons/fam/user_delete.gif) !important; } -#ux-taskbar .ux-startbutton-left{ - background-position:0 0; -} -#ux-taskbar .ux-startbutton-right{ - background-position:0 -30px; -} -#ux-taskbar .ux-startbutton-center{ - background-position:0 -60px; +.connect { + background-image:url(../../shared/icons/fam/connect.gif) !important; } -#ux-taskbar .x-btn-over .ux-startbutton-left{ - background-position:0 -270px; -} -#ux-taskbar .x-btn-over .ux-startbutton-right{ - background-position:0 -300px; -} -#ux-taskbar .x-btn-over .ux-startbutton-center{ - background-position:0 -330px; +.user-girl { + background-image:url(../../shared/icons/fam/user_female.gif) !important; } -#ux-taskbar .x-btn-click .ux-startbutton-left{ - background-position:0 -180px; -} -#ux-taskbar .x-btn-click .ux-startbutton-right{ - background-position:0 -210px; -} -#ux-taskbar .x-btn-click .ux-startbutton-center{ - background-position:0 -240px; +.user-kid { + background-image:url(../../shared/icons/fam/user_green.gif) !important; } -#ux-taskbar .active-win .ux-startbutton-left{ - background-position:0 -90px; -} -#ux-taskbar .active-win .ux-startbutton-right{ - background:url( ../images/taskbar/black/startbutton.gif ) no-repeat 0 -120px; -} -#ux-taskbar .active-win .ux-startbutton-center{ - background:url( ../images/taskbar/black/startbutton.gif ) repeat-x 0 -150px; -} -#ux-taskbar .active-win .ux-startbutton-center button { - color:#fff; -} -/* - * End Start button - */ - -.x-resizable-proxy{ - background:#C7DFFC; - opacity:.5; - -moz-opacity:.5; - filter:alpha(opacity=50); - border: 1px solid #3b5a82; -} - -/* Desktop Shortcuts */ -#x-shortcuts dt { - float:left; - margin:15px 0 0 15px; - clear:left; - width:64px; - font:normal 10px tahoma,arial,verdana,sans-serif; - text-align:center; - zoom:1; - display:block; -} -#x-shortcuts dt a { - width:64px; - display:block; - color:white; - text-decoration:none; -} -#x-shortcuts dt div { - width:100%; - color:white; - overflow:hidden; - text-overflow:ellipsis; - cursor:pointer; -} -.ext-ie #x-shortcuts dt img { - background:transparent !important; -} -#x-shortcuts dt a:hover { - text-decoration:underline; -} -/* shortcuts */ -#grid-win-shortcut img { - width:48px; - height:48px; - background-image: url(../images/grid48x48.png); - filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/grid48x48.png', sizingMethod='scale'); -} -#acc-win-shortcut img { - width:48px; - height:48px; - background-image: url(../images/im48x48.png); - filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/im48x48.png', sizingMethod='scale'); +.user-suit { + background-image:url(../../shared/icons/fam/user_suit.gif) !important; }