- Update to MochaUI svn/trunk

* Fixes IE7/8 compatibility
- Use Yui compressor on mocha.js
This commit is contained in:
Christophe Dumez
2009-12-05 14:19:37 +00:00
parent f0a18ec1f5
commit b976d39207
24 changed files with 8367 additions and 5790 deletions

54
src/webui/css/Core.css Normal file
View File

@@ -0,0 +1,54 @@
/*
Core.css for Mocha UI
Theme: Default
Copyright:
Copyright (c) 2007-2009 Greg Houston, <http://greghoustondesign.com/>.
License:
MIT-style license.
Notes:
CSS rules in this file:
1. Rules required by all MochaUI components or are shared by more than one.
2. Theme specific ajustments to plugin styles.
3. Miscellaneous rules that have no better place to go.
*/
/* Required By All
---------------------------------------------------------------- */
/* Clears */
.clear {
clear: both;
height: 0;
}
* html .clear {
font-size: 1px;
line-height: 1px;
overflow: hidden;
visibility: hidden;
}
/* Miscellaneous
---------------------------------------------------------------- */
#themeControl {
margin-top: 2px;
}
/* Theme Specific Adjustments to Default Plugin Styles
---------------------------------------------------------------- */
/* Folder Tree */
.tree li a {
color: #3f3f3f !important;
}

414
src/webui/css/Layout.css Normal file
View File

@@ -0,0 +1,414 @@
/*
Core.css for Mocha UI
Theme: Default
Copyright:
Copyright (c) 2007-2009 Greg Houston, <http://greghoustondesign.com/>.
License:
MIT-style license.
Required by:
Layout.js
*/
/* Layout
---------------------------------------------------------------- */
html, body {
background: #fff;
}
body {
margin: 0; /* Required */
}
#desktop {
position: relative;
min-width: 400px; /* Helps keep header content from wrapping */
height: 100%;
min-height: 100%;
overflow: hidden;
cursor: default; /* Fix for issue in IE7. IE7 wants to use the I-bar text cursor */
}
#desktopHeader {
background: #f2f2f2;
}
#desktopTitlebarWrapper {
position: relative;
height: 45px;
overflow: hidden;
background: #718BA6 url(../images/skin/bg-header.gif) repeat-x;
}
#desktopTitlebar {
padding: 7px 8px 6px 8px;
height: 32px;
background: url(../images/skin/logo.gif) no-repeat;
background-position: left 0;
}
#desktopTitlebar h1.applicationTitle {
display: none;
margin: 0;
padding: 0 5px 0 0;
font-size: 20px;
line-height: 25px;
font-weight: bold;
color: #fff;
}
#desktopTitlebar h2.tagline {
padding: 7px 0 0 0;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
color: #d4dce4;
font-weight: bold;
text-align: center;
text-transform: uppercase;
}
#desktopTitlebar h2.tagline .taglineEm {
color: #fff;
font-weight: bold;
}
#topNav {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
position: absolute;
right: 0;
top: 0;
color: #d4dce4;
text-align: right;
padding: 13px 10px 0 0;
}
#topNav a {
color: #fff;
font-weight: normal;
}
#topNav a:hover {
text-decoration: none;
}
/* Navbar */
#desktopNavbar {
background: #f2f2f2;
height: 30px;
margin: 0 0px;
overflow: hidden; /* Remove this line if you want the menu to be backward compatible with Firefox 2 */
}
#desktopNavbar ul {
padding: 0;
margin: 0;
list-style: none;
font-size: 12px;
}
#desktopNavbar li {
float: left;
}
#desktopNavbar a {
display: block;
}
#desktopNavbar ul li a {
padding: 6px 10px 6px 10px;
color: #333;
font-weight: normal;
}
#desktopNavbar ul li a:hover {
color: #333;
}
#desktopNavbar ul li a.arrow-right, #desktopNavbar ul li a:hover.arrow-right {
background-image: url(../images/skin/arrow-right.gif);
background-repeat: no-repeat;
background-position: right 7px;
}
#desktopNavbar li ul {
padding: 2px;
border: 1px solid #3f3f3f;
background: #fff url(../images/skin/bg-dropdown.gif) repeat-y;
position: absolute;
width: 164px;
left: -999em;
z-index: 8000;
}
#desktopNavbar li:hover ul ul,
#desktopNavbar li.ieHover ul ul,
#desktopNavbar li:hover ul ul ul,
#desktopNavbar li.ieHover ul ul ul {
left: -999em;
}
#desktopNavbar li ul ul { /* third-and-above-level lists */
margin: -22px 0 0 163px;
}
#desktopNavbar li ul li .check {
position: absolute;
top: 8px;
left: 6px;
width: 5px;
height: 5px;
background: #555;
overflow: hidden;
line-height: 1px;
font-size: 1px;
}
#desktopNavbar li ul li a {
position: relative;
padding: 1px 9px 1px 25px;
width: 130px;
color: #3f3f3f;
font-weight: normal;
}
#desktopNavbar li ul li a:hover {
background: #6C98D9;
color: #fff;
-moz-border-radius: 2px;
}
#desktopNavbar li ul li a:hover .check {
background: #fff;
}
#desktopNavbar li:hover ul,
#desktopNavbar li.ieHover ul,
#desktopNavbar li li.ieHover ul,
#desktopNavbar li li li.ieHover ul,
#desktopNavbar li li:hover ul,
#desktopNavbar li li li:hover ul { /* lists nested under hovered list items */
left: auto;
}
#desktopNavbar li:hover { /* For IE7 */
position: static;
}
li.divider {
margin-top: 2px;
padding-top: 3px;
border-top: 1px solid #ebebeb;
}
#pageWrapper {
position: relative;
overflow: hidden; /* This can be set to hidden or auto */
border-top: 1px solid #909090;
border-bottom: 1px solid #909090;
/*height: 100%;*/
}
/* Footer */
#desktopFooterWrapper {
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 30px;
overflow: hidden;
}
#desktopFooter {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
height: 24px;
padding: 6px 8px 0 8px;
background: #f2f2f2;
}
/* Panel Layout
---------------------------------------------------------------- */
/* Columns */
.column {
position: relative;
float: left;
overflow: hidden; /* Required by IE6 */
}
/* Panels */
.panel {
position: relative;
overflow: auto;
background: #f8f8f8;
border-bottom: 1px solid #b9b9b9;
}
.panelWrapper.collapsed .panel-header {
border-bottom: 0;
}
.panelAlt {
background: #f2f2f2;
}
.bottomPanel {
border-bottom: 0;
}
.pad {
padding: 8px;
}
#mainPanel {
background: #fff;
}
.panel-header {
position: relative;
background: #f1f1f1 url(../images/skin/bg-panel-header.gif) repeat-x;
height: 30px;
overflow: hidden;
border-bottom: 1px solid #d3d3d3;
}
.panel-headerContent {
padding-top: 2px;
}
.panel-headerContent.tabs {
background: url(../images/skin/tabs.gif) repeat-x;
background-position: left -68px;
}
.panel-header h2 {
display: inline-block;
font-size: 12px;
margin: 0;
padding: 3px 8px 0 8px;
height: 22px;
overflow: hidden;
color: #333;
}
.panel-collapse {
background: url(../images/skin/collapse-expand.gif) left top no-repeat;
}
.panel-expand {
background: url(../images/skin/collapse-expand.gif) left -16px no-repeat;
}
.icon16 {
margin: 4px 0 0 2px;
cursor: pointer;
}
/* Column and Panel Handles */
.horizontalHandle {
height: 4px;
line-height: 1px;
font-size: 1px;
overflow: hidden;
background: #eee url(../images/skin/bg-handle-horizontal.gif) repeat-x;
}
.horizontalHandle.detached .handleIcon {
background: transparent;
}
.horizontalHandle .handleIcon {
margin: 0 auto;
height: 4px;
line-height: 1px;
font-size: 1px;
overflow: hidden;
background: url(../images/skin/handle-icon-horizontal.gif) center center no-repeat;
}
.columnHandle {
min-height: 10px;
float: left;
width: 4px;
overflow: hidden;
background: #c3c3c3 url(../images/skin/handle-icon.gif) center center no-repeat;
border: 1px solid #909090;
border-top: 0;
border-bottom: 0;
}
/* Toolboxes */
.toolbox {
float: right;
margin-top: 3px;
padding: 0 5px;
height: 24px;
overflow: hidden;
text-align: right;
}
.panel-header-toolbox {
}
div.toolbox.divider { /* Have to specify div here for IE6's sake */
background: url(../images/skin/toolbox-divider.gif) repeat-y;
padding-left: 8px;
}
.toolbox img.disabled {
cursor: default;
}
.iconWrapper {
display: inline-block;
height: 22px;
min-width: 22px;
overflow: hidden;
border: 1px solid transparent;
}
* html .iconWrapper {
padding: 1px;
border: 0;
}
.iconWrapper img {
cursor: pointer;
margin: 0;
padding: 3px;
}
.iconWrapper:hover {
border: 1px solid #a0a0a0;
-moz-border-radius: 3px;
}
#spinnerWrapper {
width: 16px;
height: 16px;
background: url(../images/skin/spinner-placeholder.gif) no-repeat;
margin: 4px 5px 0 5px;
}
#spinner {
display: none;
background: url(../images/skin/spinner.gif) no-repeat;
width: 16px;
height: 16px;
}

66
src/webui/css/Tabs.css Normal file
View File

@@ -0,0 +1,66 @@
/*
Tabs.css for Mocha UI
Theme: Default
Copyright:
Copyright (c) 2007-2009 Greg Houston, <http://greghoustondesign.com/>.
License:
MIT-style license.
Required by:
Tabs.js
*/
/* Toolbar Tabs */
.toolbarTabs {
padding: 0 5px 2px 2px;
background: url(../images/skin/tabs.gif) repeat-x;
background-position: left -70px;
overflow: visible;
}
.tab-menu {
padding-top: 1px;
list-style: none;
margin: 0;
padding: 0;
line-height: 16px;
font-size: 11px;
}
.tab-menu li {
display: block;
float: left;
margin: 0 0 5px 0;
cursor: pointer;
background: url(../images/skin/tabs.gif) repeat-x;
background-position: left -35px;
}
.tab-menu li.selected {
background: url(../images/skin/tabs.gif) repeat-x;
background-position: left 0;
}
.tab-menu li a {
display: block;
margin-left: 8px;
padding: 6px 15px 5px 9px;
text-align: center;
font-weight: normal;
color: #181818;
background: url(../images/skin/tabs.gif) repeat-x;
background-position: right -35px;
}
.tab-menu li.selected a {
color: #181818;
font-weight: bold;
background: url(../images/skin/tabs.gif) repeat-x;
background-position: right 0;
}

371
src/webui/css/Window.css Normal file
View File

@@ -0,0 +1,371 @@
/*
Window.css for Mocha UI
Theme: Default
Copyright:
Copyright (c) 2007-2009 Greg Houston, <http://greghoustondesign.com/>.
License:
MIT-style license.
Required by:
Window.js and Modal.css
*/
/* Windows
---------------------------------------------------------------- */
.mocha {
display: none;
overflow: hidden;
background-color: #e5e5e5;
}
.mocha.isFocused {
}
.mochaOverlay {
position: absolute; /* This is also set in theme.js in order to make theme transitions smoother */
top: 0;
left: 0;
}
/*
We get a little creative here in order to define a gradient in the CSS using a query
string appended to a background image.
"from" is the top color of the gradient. "to" is the bottom color of the gradient.
Both must be hex values without the leading # sign.
*/
.mochaTitlebar {
width: 100%;
overflow: hidden;
background: url(../images/spacer.gif?from=fafafa&to=e5e5e5);
}
.mochaTitlebar h3 {
font-size: 12px;
line-height: 15px;
font-weight: bold;
margin: 0;
padding: 5px 10px 4px 12px;
color: #888;
}
.mocha.isFocused .mochaTitlebar h3 {
color: #181818;
}
.mochaToolbarWrapper {
width: 100%; /* For IE */
position: relative;
height: 29px;
background: #f1f1f1;
overflow: hidden;
border-top: 1px solid #d9d9d9;
}
div.mochaToolbarWrapper.bottom {
border: 0;
border-bottom: 1px solid #d9d9d9;
}
.mochaToolbar {
width: 100%; /* For IE */
border-top: 1px solid #fff;
}
.mochaContentBorder {
border-top: 1px solid #dadada;
border-bottom: 1px solid #dadada;
}
.mochaContentWrapper { /* Has a fixed height and scrollbars if required. */
font-size: 12px;
overflow: auto;
background: #fff;
}
.mochaContent {
padding: 10px 12px;
}
.mocha .handle {
position: absolute;
background: #0f0;
width: 3px;
height: 3px;
z-index: 2;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; /* IE8 */
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0); /* IE6 and 7*/
opacity: .0;
-moz-opacity: .0;
overflow: hidden;
font-size: 1px; /* For IE6 */
}
.mocha .corner { /* Corner resize handles */
width: 10px;
height: 10px;
background: #f00;
}
.mocha .cornerSE { /* Bottom right resize handle */
width: 20px;
height: 20px;
background: #fefefe; /* This is the color of the visible resize handle */
}
.mochaCanvasHeader {
position: absolute;
top: 0;
left: 0;
background: transparent;
z-index: -1;
visibility: hidden;
overflow: hidden;
}
.mochaControls {
position: absolute;
width: 52px;
top: 8px;
right: 8px;
height: 14px;
z-index: 4;
background: transparent;
}
.mochaCanvasControls {
position: absolute;
top: 8px;
right: 8px;
z-index: 3;
background: transparent;
}
/*
To use images for these buttons:
1. Set the useCanvasControls window option to false.
2. If you use a different button size you may need to reposition the controls.
Modify the controlsOffset window option.
2. Replcac the background-color with a background-image for each button.
*/
.mochaMinimizeButton, .mochaMaximizeButton, .mochaCloseButton {
float: right;
width: 14px;
height: 14px;
font-size: 1px;
cursor: pointer;
z-index: 4;
color: #666;
background-color: #fff;
margin-left: 5px;
}
.mochaMinimizeButton {
margin-left: 0;
}
.mochaMaximizeButton {
}
.mochaCloseButton {
}
.mochaSpinner{
display: none;
position: absolute;
bottom: 7px;
left: 6px;
width: 16px;
height: 16px;
background: url(../images/spinner.gif) no-repeat;
}
.mochaIframe {
width: 100%;
}
/* Fix for IE6 select z-index issue */
.zIndexFix {
display: block;
position: absolute;
top: 0;
left: 0;
z-index: -1;
filter: mask();
width: 100px;
height: 100px;
border: 1px solid transparent;
}
/* Viewport overlays
---------------------------------------------------------------- */
#modalOverlay {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
background: #000;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; /* IE8 */
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0); /* IE6 and 7*/
opacity: 0;
-moz-opacity: 0;
z-index: 10000;
}
/* Fix for IE6 select z-index issue */
#modalFix {
display: none;
position: absolute;
top: 0;
left: 0;
width: 100%;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; /* IE8 */
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0); /* IE6 and 7*/
opacity: 0;
-moz-opacity: 0;
z-index: 9999;
}
/* Underlay */
#windowUnderlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
background: #fff;
}
* html #windowUnderlay {
position: absolute;
}
/* The replaced class is used internally when converting CSS values to Canvas. These classes should not be removed. */
.mocha.replaced, .mochaTitlebar.replaced, .mochaMinimizeButton.replaced, .mochaMaximizeButton.replaced, .mochaCloseButton.replaced {
background-color: transparent !important;
}
.windowClosed {
visibility: hidden;
display: none;
position: absolute;
top: -20000px;
left: -20000px;
z-index: -1;
overflow: hidden;
}
.windowClosed .mochaContentBorder, .windowClosed .mochaToolbarWrapper, .windowClosed .mochaTitlebar, .windowClosed .mochaControls,
.windowClosed .mochaCanvasControls {
position: absolute;
top: 0;
left: 0;
visibility: hidden;
display: none;
z-index: -1;
}
/* Modals */
.modal2 {
border: 8px solid #fff;
}
.modal2 .mochaContentBorder {
border-width: 0px;
}
/* Window Themes */
.mocha.no-canvas {
background: #e5e5e5;
border: 1px solid #555;
}
.mocha.no-canvas .mochaTitlebar {
background: #e5e5e5;
}
.mocha.transparent .mochaTitlebar h3 {
color: #fff;
display: none;
}
.mocha.transparent .mochaContentWrapper {
background: transparent;
}
.mocha.notification {
background: #cedff2;
}
.mocha.notification .mochaTitlebar {
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; /* IE8 */
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0); /* IE6 and 7*/
opacity: .0;
-moz-opacity: 0;
}
.mocha.notification .mochaContentBorder {
border-width: 0px;
}
.mocha.notification .mochaContentWrapper {
text-align: center;
font-size: 12px;
font-weight: bold;
background: transparent;
}
/* Example Window Themes */
#about_contentWrapper {
background: #e5e5e5 url(../images/logo2.gif) 3px 3px no-repeat;
}
#builder_contentWrapper {
background: #f5f5f7;
}
#json01 .mochaTitlebar {
background: #6dd2db;
}
#json02 .mochaTitlebar {
background: #6db6db;
}
#json03 .mochaTitlebar {
background: #6d92db;
}
.jsonExample .mochaTitlebar h3 {
color: #ddd;
}
/* This does not work in IE6. */
.isFocused.jsonExample .mochaTitlebar h3 {
color: #fff;
}
#fxmorpherExample .mochaContentWrapper {
background: #577a9e;
}
#clock {
background: #fff;
}

File diff suppressed because it is too large Load Diff

View File

@@ -172,3 +172,57 @@ a.propButton img {
#contextmenu li a.deleteHD { background-image:url(../images/skin/delete_perm22.png); }
#contextmenu li a.uploadLimit { background-image:url(../images/skin/seeding.png); }
#contextmenu li a.downloadLimit { background-image:url(../images/skin/download.png); }
/* Sliders */
.slider {
clear: both;
position: relative;
font-size: 12px;
font-weight: bold;
width: 400px;
margin-bottom: 15px;
}
.sliderWrapper {
position: relative;
font-size: 1px;
line-height: 1px;
height: 9px;
width: 422px;
}
.sliderarea {
position: absolute;
top: 0;
left: 0;
height: 7px;
width: 420px;
font-size: 1px;
line-height: 1px;
background: #f2f2f2 url(../images/skin/slider-area.gif) repeat-x;
border: 1px solid #a3a3a3;
border-bottom: 1px solid #ccc;
border-left: 1px solid #ccc;
margin: 0;
padding: 0;
overflow: hidden;
}
.sliderknob {
position: absolute;
top: 0;
left: 0;
height: 9px;
width: 19px;
font-size: 1px;
line-height: 1px;
background: url(../images/skin/knob.gif) no-repeat;
cursor: pointer;
overflow: hidden;
z-index: 2;
}
.update {
padding-bottom: 5px;
}