]>
jfr.im git - irc/quakenet/qwebirc.git/blob - css/mochaui/ui.css
6 Copyright (c) 2007-2008 Greg Houston, <http://greghoustondesign.com/>.
14 ---------------------------------------------------------------- */
21 margin: 0; /* Required */
22 background: #fff; /* #6989b3 url(../../images/mochaui/splash.gif) center center no-repeat; */
28 min-width: 750px; /* Helps keep header content from wrapping */
31 cursor: default
; /* Fix for issue in IE7. IE7 wants to use the I-bar text cursor */
38 #desktopTitlebarWrapper {
42 background: #333 url
(../../images
/mochaui
/bg-header
.gif
) repeat-x
;
46 padding: 7px 8px 6px 8px;
48 background: url
(../../images/mochaui/logo.gif) no-repeat
;
49 background-position: left
0;
52 #desktopTitlebar h1
.applicationTitle
{
62 #desktopTitlebar h2
.tagline
{
70 #desktopTitlebar h2
.tagline
.taglineEm
{
76 font-family: Verdana
, Arial
, Helvetica
, sans-serif
;
83 padding: 13px 10px 0 0;
92 text-decoration: none
;
99 padding: 6px 3px 0 5px;
104 div
.toolbox
.divider
{ /* Have to specify div here for IE6's sake */
105 background: url
(../../images
/mochaui
/toolbox-divider
.gif
) left center no-repeat
;
106 padding: 6px 3px 0 12px;
109 div
.toolbox
.divider2
{ /* Have to specify div here for IE6's sake */
110 background: url
(../../images
/mochaui
/toolbox-divider2
.gif
) left center no-repeat
;
111 padding: 6px 4px 0 12px;
121 .toolbox img.disabled {
128 background: url
(../../images
/mochaui
/spinner-placeholder
.gif
) no-repeat
;
134 background: url
(../../images/mochaui/spinner.gif) no-repeat
;
162 #desktopNavbar ul li a
{
163 padding: 6px 10px 6px 10px;
168 #desktopNavbar ul li
a:hover
{
172 #desktopNavbar ul li a
.arrow-right
, #desktopNavbar ul li
a:hover
.arrow-right
{
173 background-image: url
(../../images
/mochaui
/arrow-right
.gif
);
174 background-repeat: no-repeat
;
175 background-position: right
7px;
178 #desktopNavbar li ul
{
180 border: 1px solid
#3f3f3f;
181 background: #fff url
(../../images
/mochaui
/bg-dropdown
.gif
) repeat-y
;
188 #desktopNavbar li:hover ul ul
,
189 #desktopNavbar li
.ieHover ul ul
,
190 #desktopNavbar li:hover ul ul ul
,
191 #desktopNavbar li
.ieHover ul ul ul
{
195 #desktopNavbar li ul ul
{ /* third-and-above-level lists */
196 margin: -22px 0 0 164px;
199 #desktopNavbar li ul li
.check
{
211 #desktopNavbar li ul li a
{
213 padding: 1px 9px 1px 25px;
219 #desktopNavbar li ul li
a:hover
{
224 #desktopNavbar li ul li
a:hover
.check
{
228 #desktopNavbar li:hover ul
,
229 #desktopNavbar li
.ieHover ul
,
230 #desktopNavbar li li
.ieHover ul
,
231 #desktopNavbar li li li
.ieHover ul
,
232 #desktopNavbar li
li:hover ul
,
233 #desktopNavbar li li
li:hover ul
{ /* lists nested under hovered list items */
237 #desktopNavbar li:hover
{ /* For IE7 */
244 border-top: 1px solid
#ebebeb;
249 overflow: hidden
; /* This can be set to hidden or auto */
250 border-top: 1px solid
#222;
254 #desktopFooterWrapper {
261 border-top: 1px solid
#222;
265 font-family: Verdana
, Arial
, Helvetica
, sans-serif
;
268 padding: 6px 8px 0 8px;
278 #desktopFooter a:hover
{
279 text-decoration: none
;
287 border-top: 1px solid
#222;
296 padding: 3px 16px 0 6px;
305 height: 30px; /* Used for IE 6.0 since it does not support min-height */
317 background: url
(../../images
/mochaui
/dock-tabs
.gif
) left top no-repeat
;
320 .dockTab.activeDockTab {
321 background-position: left
-24px;
332 padding: 4px 10px 2px 10px;
342 .dockTab.activeDockTab .dockText {
360 filter: alpha
(opacity
=0);
362 background: #f00; /* for troubleshooting */
364 z-index: 3; /* for IE */
375 filter: alpha
(opacity
=0);
377 background: #f00; /* for troubleshooting */
379 z-index: 3; /* for IE */
383 ---------------------------------------------------------------- */
399 border-bottom: 1px solid
#b9b9b9;
417 background: #f1f1f1 url
(../../images
/mochaui
/bg-panel-header
.gif
) repeat-x
;
420 border-bottom: 1px solid
#d3d3d3;
423 .panel-headerContent {
427 .panel-headerContent.tabs {
428 background: url
(../../images/mochaui/tabs.gif) repeat-x
;
429 background-position: left
-68px;
433 display: inline-block
;
436 padding: 3px 8px 0 8px;
442 .panel-header-toolbox {
445 margin: 2px 5px 5px 0;
450 background: url
(../../images
/mochaui
/collapse-expand
.gif
) left top no-repeat
;
454 background: url
(../../images
/mochaui
/collapse-expand
.gif
) left
-16px no-repeat
;
462 .panel-footerWrapper {
470 border-top: 1px solid
#b9b9b9;
474 padding: 1px 0 0 8px;
477 .panel-footerContent {
488 background: #d1d1d1 url
(../../images
/mochaui
/bg-handle-horizontal
.gif
) repeat-x
;
491 .horizontalHandle.detached .handleIcon {
492 background: transparent
;
495 .horizontalHandle .handleIcon {
501 background: url
(../../images
/mochaui
/handle-icon-horizontal
.gif
) center center no-repeat
;
509 background: #bbb url
(../../images
/mochaui
/handle-icon
.gif
) center center no-repeat
;
510 border: 1px solid
#9a9a9a;
515 ---------------------------------------------------------------- */
525 filter: alpha
(opacity
=0);
530 * html #modalOverlay
{
534 /* Fix for IE6 select z-index issue */
542 filter: alpha
(opacity
=0);
557 * html #windowUnderlay
{
562 ---------------------------------------------------------------- */
590 margin: 5px 10px 4px 12px;
595 .mocha.isFocused .mochaTitlebar h3 {
599 .mochaToolbarWrapper {
600 width: 100%; /* For IE */
605 border-top: 1px solid
#d9d9d9;
608 div
.mochaToolbarWrapper
.bottom
{
610 border-bottom: 1px solid
#d9d9d9;
614 width: 100%; /* For IE */
615 border-top: 1px solid
#fff;
618 .mochaContentBorder {
619 border-top: 1px solid
#dadada;
620 border-bottom: 1px solid
#dadada;
623 .mochaContentWrapper { /* Has a fixed height and scrollbars if required. */
639 filter: alpha
(opacity
=0);
642 font-size: 1px; /* For IE6 */
645 .mocha .corner { /* Corner resize handles */
651 .mocha .cornerSE { /* Bottom right resize handle */
661 background: transparent
;
674 background: transparent
;
677 .mochaCanvasControls {
682 background: transparent
;
686 To use images for these buttons:
687 1. Set the useCanvasControls window option to false.
688 2. If you use a different button size you may need to reposition the controls.
689 Modify the controlsOffset window option.
690 2. Add background images to each button.
693 .mochaMinimizeButton, .mochaMaximizeButton, .mochaCloseButton {
704 .mochaMinimizeButton {
708 .mochaMaximizeButton {
721 background: url
(../../images/mochaui/spinner.gif) no-repeat
;
728 /* Fix for IE6 select z-index issue */
738 border: 1px solid transparent
;
744 border: 8px solid
#fff;
747 .modal2 .mochaContentBorder {
755 border: 2px solid
#555;
758 .mocha.no-canvas .mochaTitlebar {
762 .mocha.transparent .mochaTitlebar h3 {
767 .mocha.notification .mochaTitlebar {
769 filter: alpha
(opacity
=0);
773 .mocha.notification .mochaContentBorder {
777 .mocha.notification .mochaContentWrapper {
784 ---------------------------------------------------------------- */
789 padding: 0 5px 2px 2px;
790 background: url
(../../images/mochaui/tabs.gif) repeat-x
;
791 background-position: left
-70px;
809 background: url
(../../images/mochaui/tabs.gif) repeat-x
;
810 background-position: left
-35px;
813 .tab-menu li.selected {
814 background: url
(../../images/mochaui/tabs.gif) repeat-x
;
815 background-position: left
0;
821 padding: 6px 16px 5px 10px;
825 background: url
(../../images/mochaui/tabs.gif) repeat-x
;
826 background-position: right
-35px;
829 .tab-menu li.selected a {
832 background: url
(../../images/mochaui/tabs.gif) repeat-x
;
833 background-position: right
0;
846 background: #f1f1f1 url
(../../images
/mochaui
/bg-panel-header
.gif
) repeat-x
;
849 border-top: 1px solid
#e3e3e3;
856 .accordianToggler.open {
857 background: #fff url
(../../images
/mochaui
/bg-panel-header
.gif
) repeat-x
;
861 padding: 10px 10px 5px 10px;
891 background: url
(../../images
/mochaui
/slider-area
.gif
) repeat-x
;
892 border: 1px solid
#a3a3a3;
893 border-bottom: 1px solid
#ccc;
894 border-left: 1px solid
#ccc;
908 background: url
(../../images/mochaui/knob.gif) no-repeat
;
931 list-style-type: none
;
940 vertical-align: middle
;
960 .viewToggle img.viewToggleList, .viewToggle img.viewToggleGrid {
965 .viewToggle img.viewToggleList {
966 background: url
(../../images
/mochaui
/view-toggle
.gif
) no-repeat
;
967 background-position: 0 -66px;
970 .viewToggle img.viewToggleGrid {
971 background: url
(../../images
/mochaui
/view-toggle
.gif
) no-repeat
;
972 background-position: 0 0;
976 ---------------------------------------------------------------- */
978 /* Window Builder Form Elements */
991 padding: 1px 0 1px 3px;
992 border: 1px solid
#bbb;
998 padding: 1px 0 1px 3px;
999 border: 1px solid
#bbb;
1002 #desktop .formLabel
{
1009 #desktop .formField
{
1016 #desktop form
.number
{
1023 list-style-type: none
;
1030 /* Success, error & notice boxes for messages and errors. */
1033 .success { padding: 8px; margin-bottom: 10px; border: 2px solid
#ddd; }
1034 .error { background: #FBE3E4; color: #D12F19; border-color: #FBC2C4; }
1035 .notice { background: #FFF6BF; color: #817134; border-color: #FFD324; }
1036 .success { background: #E6EFC2; color: #529214; border-color: #C6D880; }
1037 .error a { color: #D12F19; }
1038 .notice a { color: #817134; }
1039 .success a { color: #529214; }