Some work about adaptive color scheme for Web UI (PR #19901)
http://[316:c51a:62a3:8b9::4]/d4708/qBittorrent/src/branch/adaptive-webui
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
1030 lines
17 KiB
1030 lines
17 KiB
/* |
|
|
|
CSS for Mocha UI |
|
|
|
Copyright: |
|
Copyright (c) 2007-2008 Greg Houston, <http://greghoustondesign.com/>. |
|
|
|
License: |
|
MIT-style license. |
|
|
|
*/ |
|
|
|
/* Layout |
|
---------------------------------------------------------------- */ |
|
|
|
html, body { |
|
overflow: hidden; |
|
} |
|
|
|
body { |
|
margin: 0; /* Required */ |
|
background: #fff; /* #6989b3 url(../images/splash.gif) center center no-repeat; */ |
|
} |
|
|
|
#desktop { |
|
visibility: hidden; |
|
position: relative; |
|
min-width: 750px; /* Helps keep header content from wrapping */ |
|
height: 100%; |
|
overflow: hidden; |
|
cursor: default; /* Fix for issue in IE7. IE7 wants to use the I-bar text cursor */ |
|
} |
|
|
|
#desktopHeader { |
|
background: #f1f1f1; |
|
} |
|
|
|
#desktopTitlebarWrapper { |
|
position: relative; |
|
height: 45px; |
|
overflow: hidden; |
|
background: #333 url(../images/bg-header.gif) repeat-x; |
|
} |
|
|
|
#desktopTitlebar { |
|
padding: 5px 8px 7px 8px; |
|
background: #f0f0f0; |
|
border-top: 1px solid #fff; |
|
border-bottom: 1px solid #bbb; |
|
height: 25px; |
|
} |
|
|
|
#desktopTitlebar h1.applicationTitle { |
|
/*display: none;*/ |
|
margin: 0; |
|
padding: 4px 0 0 0; |
|
font-size: 18px; |
|
font-weight: bold; |
|
color: #e60; |
|
} |
|
|
|
#desktopTitlebar h1 .version { |
|
font-size: 12px; |
|
color: #333; |
|
} |
|
|
|
#desktopTitlebar h2.tagline { |
|
font-size: 12px; |
|
color: #b2b2b2; |
|
font-weight: bold; |
|
padding: 5px 0 0 0; |
|
text-align: center; |
|
} |
|
|
|
#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: #b2b2b2; |
|
text-align: right; |
|
padding: 13px 10px 0 0; |
|
} |
|
|
|
#topNav a { |
|
color: #7DD0FA; |
|
font-weight: normal; |
|
} |
|
|
|
#topNav a:hover { |
|
text-decoration: none; |
|
} |
|
|
|
/* Toolboxes */ |
|
|
|
.toolbox { |
|
float: right; |
|
padding: 6px 3px 0 5px; |
|
height: 23px; |
|
overflow: hidden; |
|
} |
|
|
|
div.toolbox.divider { /* Have to specify div here for IE6's sake */ |
|
background: url(../images/toolbox-divider.gif) left center no-repeat; |
|
padding: 6px 3px 0 12px; |
|
} |
|
|
|
div.toolbox.divider2 { /* Have to specify div here for IE6's sake */ |
|
background: url(../images/toolbox-divider2.gif) left center no-repeat; |
|
padding: 6px 4px 0 12px; |
|
} |
|
|
|
.toolbox img { |
|
cursor: pointer; |
|
margin-right: 6px; |
|
padding: 0; |
|
float: left; |
|
} |
|
|
|
.toolbox img.disabled { |
|
cursor: default; |
|
} |
|
|
|
#spinnerWrapper { |
|
width: 16px; |
|
height: 16px; |
|
background: url(../images/spinner-placeholder.gif) no-repeat; |
|
margin-right: 5px; |
|
} |
|
|
|
#spinner { |
|
visibility: hidden; |
|
background: url(../images/spinner.gif) no-repeat; |
|
width: 16px; |
|
height: 16px; |
|
} |
|
|
|
/* Navbar */ |
|
|
|
#desktopNavbar { |
|
padding: 0; |
|
background: #f0f0f0; |
|
border-top: 1px solid #fff; |
|
border-bottom: 1px solid #bbb; |
|
height: 22px; |
|
} |
|
|
|
#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: 2px 9px 2px 9px; |
|
color: #000; |
|
} |
|
|
|
#desktopNavbar ul li a:hover { |
|
background: #e4e4e4; |
|
} |
|
|
|
#desktopNavbar li ul { |
|
padding: 2px; |
|
border: 1px solid #999; |
|
background: #fff; |
|
position: absolute; |
|
width: 148px; |
|
left: -999em; |
|
z-index: 8000; |
|
} |
|
|
|
#desktopNavbar li ul li { |
|
} |
|
|
|
#desktopNavbar li ul li a { |
|
padding: 1px 9px 1px 9px; |
|
width: 130px; |
|
} |
|
|
|
#desktopNavbar li:hover ul, #desktopNavbar li.ieHover ul { /* lists nested under hovered list items */ |
|
left: auto; |
|
} |
|
|
|
#desktopNavbar li:hover, #desktopNavbar li.hover { |
|
position: static; |
|
} |
|
|
|
#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 #222;*/ |
|
} |
|
|
|
/* Footer */ |
|
#desktopFooterWrapper { |
|
position: absolute; |
|
left: 0; |
|
bottom: 0; |
|
width: 100%; |
|
height: 30px; |
|
overflow: hidden; |
|
border-top: 1px solid #222; |
|
} |
|
|
|
#desktopFooter { |
|
font-family: Verdana, Arial, Helvetica, sans-serif; |
|
font-size: 10px; |
|
height: 24px; |
|
padding: 6px 8px 0 8px; |
|
background: #333; |
|
color: #b2b2b2; |
|
} |
|
|
|
#desktopFooter a { |
|
color: #7DD0FA; |
|
font-weight: normal; |
|
} |
|
|
|
#desktopFooter a:hover { |
|
text-decoration: none; |
|
} |
|
|
|
/* Dock/Taskbar */ |
|
|
|
#dockWrapper { |
|
display: none; |
|
width: 100%; |
|
border-top: 1px solid #222; |
|
} |
|
|
|
#dockWrapper.top { |
|
border: 0; |
|
} |
|
|
|
#dock { |
|
position: relative; |
|
padding: 3px 16px 0 6px; |
|
bottom: 0; |
|
left: 0; |
|
background: #4c4c4c; |
|
min-height: 27px; |
|
height: auto; |
|
} |
|
|
|
*html #dock { |
|
height: 30px; /* Used for IE 6.0 since it does not support min-height */ |
|
} |
|
|
|
.dockTab { |
|
float: left; |
|
position: relative; |
|
font-size: 11px; |
|
width: 150px; |
|
height: 24px; |
|
margin: 0 3px 2px 0; |
|
overflow: hidden; |
|
cursor: pointer; |
|
background: url(../images/dock-tabs.gif) left top no-repeat; |
|
} |
|
|
|
.dockTab.activeDockTab { |
|
background-position: left -24px; |
|
} |
|
|
|
.dockText { |
|
position: absolute; |
|
top: 0; |
|
left: 0; |
|
display: block; |
|
font-weight: normal; |
|
color: #bbb; |
|
text-align: left; |
|
padding: 4px 10px 2px 10px; |
|
width: 130px; |
|
height: 19px; |
|
overflow: hidden; |
|
} |
|
|
|
.dockText:hover { |
|
color: #fff; |
|
} |
|
|
|
.dockTab.activeDockTab .dockText { |
|
color: #fff; |
|
} |
|
|
|
#dockCanvas { |
|
position: absolute; |
|
top: 5px; |
|
right: 3px; |
|
z-index: 2; |
|
} |
|
|
|
#dockPlacement { |
|
position: absolute; |
|
top: 4px; |
|
right: 8px; |
|
width: 10px; |
|
height: 9px; |
|
opacity: 0; |
|
filter: alpha(opacity=0); |
|
-moz-opacity: 0; |
|
background: #f00; /* for troubleshooting */ |
|
cursor: pointer; |
|
z-index: 3; /* for IE */ |
|
text-align: right; |
|
} |
|
|
|
#dockAutoHide { |
|
position: absolute; |
|
top: 14px; |
|
right: 8px; |
|
width: 10px; |
|
height: 9px; |
|
opacity: 0; |
|
filter: alpha(opacity=0); |
|
-moz-opacity: 0; |
|
background: #f00; /* for troubleshooting */ |
|
cursor: pointer; |
|
z-index: 3; /* for IE */ |
|
} |
|
|
|
/* Panel Layout |
|
---------------------------------------------------------------- */ |
|
|
|
/* Columns */ |
|
|
|
.column { |
|
position: relative; |
|
float: left; |
|
overflow: hidden; |
|
background: #f1f1f1; |
|
} |
|
|
|
/* Panels */ |
|
|
|
.panel { |
|
position: relative; |
|
overflow: auto; |
|
border-bottom: 1px solid #b9b9b9; |
|
border-top: 0; |
|
} |
|
|
|
.pad { |
|
position: absolute; |
|
top: 0; |
|
left: 0; |
|
padding: 8px; |
|
overflow: hidden; |
|
} |
|
|
|
#mainPanel { |
|
background: #fff; |
|
} |
|
|
|
.panel-header { |
|
position: relative; |
|
background: #f1f1f1 url(../images/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/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: #3f3f3f; |
|
} |
|
|
|
.panel-header-toolbox { |
|
float: right; |
|
height: 26px; |
|
margin: 2px 5px 5px 0; |
|
text-align: right; |
|
} |
|
|
|
.panel-collapse { |
|
background: url(../images/collapse-expand.gif) left top no-repeat; |
|
} |
|
|
|
.panel-expand { |
|
background: url(../images/collapse-expand.gif) left -16px no-repeat; |
|
} |
|
|
|
.icon16 { |
|
margin: 5px 0 0 2px; |
|
cursor: pointer; |
|
} |
|
|
|
.panel-footerWrapper { |
|
position: absolute; |
|
left: 0; |
|
bottom: 0; |
|
width: 100%; |
|
background: #f9f9f9; |
|
height: 30px; |
|
overflow: hidden; |
|
border-top: 1px solid #b9b9b9; |
|
} |
|
|
|
.panel-footer { |
|
padding: 1px 0 0 8px; |
|
} |
|
|
|
.panel-footerContent { |
|
margin-top: 5px; |
|
} |
|
|
|
/* Handles */ |
|
|
|
.horizontalHandle { |
|
height: 4px; |
|
line-height: 1px; |
|
font-size: 1px; |
|
overflow: hidden; |
|
background: #d1d1d1 url(../images/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/handle-icon-horizontal.gif) center center no-repeat; |
|
} |
|
|
|
.columnHandle { |
|
min-height: 10px; |
|
float: left; |
|
width: 4px; |
|
overflow: hidden; |
|
background: #bbb url(../images/handle-icon.gif) center center no-repeat; |
|
border: 1px solid #9a9a9a; |
|
border-top: 0; |
|
} |
|
|
|
/* Viewport overlays |
|
---------------------------------------------------------------- */ |
|
|
|
#modalOverlay { |
|
display: none; |
|
position: fixed; |
|
top: 0; |
|
left: 0; |
|
width: 100%; |
|
background: #000; |
|
opacity: 0; |
|
filter: alpha(opacity=0); |
|
-moz-opacity: 0; |
|
z-index: 10000; |
|
} |
|
|
|
* html #modalOverlay { |
|
position: absolute; |
|
} |
|
|
|
/* Fix for IE6 select z-index issue */ |
|
#modalFix { |
|
display: none; |
|
position: absolute; |
|
top: 0; |
|
left: 0; |
|
width: 100%; |
|
opacity: 0; |
|
filter: alpha(opacity=0); |
|
-moz-opacity: 0; |
|
z-index: 9999; |
|
} |
|
|
|
/* Underlay */ |
|
|
|
#windowUnderlay { |
|
position: fixed; |
|
top: 0; |
|
left: 0; |
|
width: 100%; |
|
background: #fff; |
|
} |
|
|
|
* html #windowUnderlay { |
|
position: absolute; |
|
} |
|
|
|
/* Windows |
|
---------------------------------------------------------------- */ |
|
|
|
.mocha { |
|
position: absolute; |
|
top: 0; |
|
left: 0; |
|
display: none; |
|
overflow: hidden; |
|
} |
|
|
|
.mocha.isFocused { |
|
} |
|
|
|
.mochaOverlay { |
|
position: absolute; |
|
top: 0; |
|
left: 0; |
|
} |
|
|
|
.mochaTitlebar { |
|
width: 100%; |
|
overflow: hidden; |
|
} |
|
|
|
.mochaTitlebar h3 { |
|
font-size: 12px; |
|
line-height: 15px; |
|
font-weight: bold; |
|
margin: 5px 10px 4px 12px; |
|
padding: 0; |
|
color: #888; |
|
} |
|
|
|
.mocha.isFocused .mochaTitlebar h3 { |
|
color: #141414; |
|
} |
|
|
|
.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 { |
|
padding: 4px 4px 4px 4px; |
|
background: #f0f0f0; |
|
border-top: 1px solid #fff; |
|
border-bottom: 1px solid #bbb; |
|
height: 40px; |
|
width: 100%; |
|
} |
|
|
|
.mochaToolButton { |
|
padding: 4px 4px 4px 4px; |
|
} |
|
|
|
.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; |
|
} |
|
|
|
.mochaContent { |
|
padding: 10px 12px; |
|
} |
|
|
|
.mocha .handle { |
|
position: absolute; |
|
background: #0f0; |
|
width: 3px; |
|
height: 3px; |
|
z-index: 2; |
|
opacity: .0; |
|
filter: alpha(opacity=0); |
|
-moz-opacity: .0; |
|
overflow: hidden; |
|
font-size: 1px; /* For IE6 */ |
|
} |
|
|
|
.mocha .corner { /* Corner resize handles */ |
|
background: #f00; |
|
width: 10px; |
|
height: 10px; |
|
} |
|
|
|
.mocha .cornerSE { /* Bottom right resize handle */ |
|
background: #f00; |
|
width: 20px; |
|
height: 20px; |
|
} |
|
|
|
.mochaCanvasHeader { |
|
position: absolute; |
|
top: 0; |
|
left: 0; |
|
background: transparent; |
|
z-index: -1; |
|
display: none; |
|
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. Add background images to each button. |
|
|
|
*/ |
|
.mochaMinimizeButton, .mochaMaximizeButton, .mochaCloseButton { |
|
float: right; |
|
width: 14px; |
|
height: 14px; |
|
font-size: 1px; |
|
cursor: pointer; |
|
z-index: 4; |
|
background: #f00; |
|
margin-left: 5px; |
|
} |
|
|
|
.mochaMinimizeButton { |
|
margin-left: 0; |
|
} |
|
|
|
.mochaMaximizeButton { |
|
} |
|
|
|
.mochaCloseButton { |
|
} |
|
|
|
.mochaSpinner{ |
|
visibility: hidden; |
|
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; |
|
} |
|
|
|
/* Modals */ |
|
|
|
.modal2 { |
|
border: 8px solid #fff; |
|
} |
|
|
|
.modal2 .mochaContentBorder { |
|
border-width: 0px; |
|
} |
|
|
|
/* Window Themes */ |
|
|
|
.mocha.no-canvas { |
|
background: #f1f1f1; |
|
border: 2px solid #555; |
|
} |
|
|
|
.mocha.no-canvas .mochaTitlebar { |
|
background: #f1f1f1; |
|
} |
|
|
|
.mocha.transparent .mochaTitlebar h3 { |
|
color: #fff; |
|
display: none; |
|
} |
|
|
|
.mocha.notification .mochaTitlebar { |
|
opacity: .0; |
|
filter: alpha(opacity=0); |
|
-moz-opacity: 0; |
|
} |
|
|
|
.mocha.notification .mochaContentBorder { |
|
border-width: 0px; |
|
} |
|
|
|
.mocha.notification .mochaContentWrapper { |
|
text-align: center; |
|
font-size: 12px; |
|
font-weight: bold; |
|
} |
|
|
|
/* Compontents |
|
---------------------------------------------------------------- */ |
|
|
|
/* Toolbar Tabs */ |
|
|
|
.toolbarTabs { |
|
padding: 0 5px 2px 2px; |
|
background: url(../images/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/tabs.gif) repeat-x; |
|
background-position: left -35px; |
|
} |
|
|
|
.tab-menu li.selected { |
|
background: url(../images/tabs.gif) repeat-x; |
|
background-position: left 0; |
|
} |
|
|
|
.tab-menu li a { |
|
display: block; |
|
margin-left: 8px; |
|
padding: 6px 16px 5px 10px; |
|
text-align: center; |
|
font-weight: normal; |
|
color: #141414; |
|
background: url(../images/tabs.gif) repeat-x; |
|
background-position: right -35px; |
|
} |
|
|
|
.tab-menu li.selected a { |
|
color: #141414; |
|
font-weight: bold; |
|
background: url(../images/tabs.gif) repeat-x; |
|
background-position: right 0; |
|
} |
|
|
|
/* Accordian */ |
|
|
|
.accordianWrapper { |
|
padding: 0; |
|
background: #fff; |
|
} |
|
|
|
.accordianToggler { |
|
margin: 0; |
|
padding: 6px 10px; |
|
background: #f1f1f1 url(../images/bg-panel-header.gif) repeat-x; |
|
font-size: 12px; |
|
cursor: pointer; |
|
border-top: 1px solid #e3e3e3; |
|
} |
|
|
|
.topToggler { |
|
border-top: none; |
|
} |
|
|
|
.accordianToggler.open { |
|
background: #fff url(../images/bg-panel-header.gif) repeat-x; |
|
} |
|
|
|
.accordianContent { |
|
padding: 10px 10px 5px 10px; |
|
} |
|
|
|
/* Sliders */ |
|
|
|
.slider { |
|
clear: both; |
|
position: relative; |
|
font-size: 12px; |
|
font-weight: bold; |
|
width: 200px; |
|
margin-bottom: 15px; |
|
} |
|
|
|
.sliderWrapper { |
|
position: relative; |
|
font-size: 1px; |
|
line-height: 1px; |
|
height: 9px; |
|
width: 222px; |
|
} |
|
|
|
.sliderarea { |
|
position: absolute; |
|
top: 0; |
|
left: 0; |
|
height: 7px; |
|
width: 220px; |
|
font-size: 1px; |
|
line-height: 1px; |
|
background: url(../images/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/knob.gif) no-repeat; |
|
cursor: pointer; |
|
overflow: hidden; |
|
z-index: 2; |
|
} |
|
|
|
.update { |
|
padding-bottom: 5px; |
|
} |
|
|
|
/* Folder Tree */ |
|
|
|
.tree { |
|
font-size: 11px; |
|
line-height: 15px; |
|
margin: 0; |
|
} |
|
|
|
.tree ul { |
|
margin: 0; |
|
} |
|
|
|
.tree li { |
|
list-style-type: none; |
|
white-space: nowrap; |
|
} |
|
|
|
.tree li a { |
|
color: #3f3f3f; |
|
} |
|
|
|
.tree li img { |
|
vertical-align: middle; |
|
width: 18px; |
|
height: 18px; |
|
overflow: hidden; |
|
} |
|
|
|
.tree li span { |
|
padding-left: 2px; |
|
} |
|
|
|
/* View Toggle */ |
|
|
|
.viewToggle { |
|
position: absolute; |
|
top: 4px; |
|
right: 5px; |
|
width: 60px; |
|
text-align: right; |
|
} |
|
|
|
.viewToggle img.viewToggleList, .viewToggle img.viewToggleGrid { |
|
width: 28px; |
|
height: 22px; |
|
} |
|
|
|
.viewToggle img.viewToggleList { |
|
background: url(../images/view-toggle.gif) no-repeat; |
|
background-position: 0 -66px; |
|
} |
|
|
|
.viewToggle img.viewToggleGrid { |
|
background: url(../images/view-toggle.gif) no-repeat; |
|
background-position: 0 0; |
|
} |
|
|
|
/* Miscellaneous |
|
---------------------------------------------------------------- */ |
|
|
|
/* Window Builder Form Elements */ |
|
|
|
#desktop form { |
|
margin: 0 0 0 0; |
|
padding: 5px 0 0 0; |
|
} |
|
|
|
#newWindowForm { |
|
width: 320px; |
|
} |
|
|
|
#desktop .input { |
|
width: 225px; |
|
padding: 1px 0 1px 3px; |
|
border: 1px solid #bbb; |
|
} |
|
|
|
#desktop textarea { |
|
width: 225px; |
|
height: 100px; |
|
padding: 1px 0 1px 3px; |
|
border: 1px solid #bbb; |
|
} |
|
|
|
#desktop .formLabel { |
|
float: left; |
|
text-align: right; |
|
width: 80px; |
|
margin: 0 0 5px 0; |
|
} |
|
|
|
#desktop .formField { |
|
float: right; |
|
margin: 0 0 5px 0; |
|
padding: 0 0 0 0; |
|
width: 230px; |
|
} |
|
|
|
#desktop form .number { |
|
width: 40px; |
|
} |
|
|
|
/* Menus */ |
|
|
|
.menu-right li { |
|
list-style-type: none; |
|
display: inline; |
|
margin: 0 0 0 15px; |
|
} |
|
|
|
/* Notifications */ |
|
|
|
/* Success, error & notice boxes for messages and errors. */ |
|
.error, |
|
.notice, |
|
.success { padding: 8px; margin-bottom: 10px; border: 2px solid #ddd; } |
|
.error { background: #FBE3E4; color: #D12F19; border-color: #FBC2C4; } |
|
.notice { background: #FFF6BF; color: #817134; border-color: #FFD324; } |
|
.success { background: #E6EFC2; color: #529214; border-color: #C6D880; } |
|
.error a { color: #D12F19; } |
|
.notice a { color: #817134; } |
|
.success a { color: #529214; } |
|
|
|
|
|
/* Clears */ |
|
|
|
.clear { |
|
clear: both; |
|
height: 0; |
|
} |
|
|
|
*html .clear { |
|
height: 1%; |
|
font-size: 1px; |
|
line-height: 1px; |
|
overflow: hidden; |
|
visibility: hidden; |
|
}
|
|
|