Files
Mozilla/mozilla/xpfe/global/resources/skin/global.css
rods%netscape.com 0d07cc7e54 changes for new combobox
b=28593, r=self, a=jar


git-svn-id: svn://10.0.0.236/trunk@62113 18797224-902f-48f8-a5cc-f745e15eee43
2000-03-03 04:23:45 +00:00

1948 lines
38 KiB
CSS

/** this should only contain XUL dialog and document window widget defaults. Defaults for widgets of
a particular application should be in that application's style sheet.
For example style definitions for navigator can be found in navigator.css
THIS FILE IS LOCKED DOWN. YOU ARE NOT ALLOWED TO MODIFY IT WITHOUT FIRST HAVING YOUR
CHANGES REVIEWED BY hyatt@netscape.com.
**/
@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); /* set default namespace to HTML */
@namespace html url("http://www.w3.org/TR/REC-html40"); /* namespace for XUL elements */
/**********************************
* Window
**********************************/
/**
* The is the outer most tag in a xul document all xul
* content will be inside it.
*/
window {
background-color: white;
font: 3mm arial,helvetica,sans-serif;
padding: 0px;
}
window[wait-cursor] { cursor: wait !important; }
/**
* This is a special class of window used for dialogs
*/
window.dialog {
background-color: #CCCCCC;
/* There is a bug preventing this so this will not work property.
padding-left: 11px;
padding-right: 10px;
padding-top: 10px;
padding-bottom: 11px;
*/
}
/**********************************
* XUL widgets
**********************************/
/******** Box *********/
:-moz-horizontal-box-debug {
border: 2px solid blue;
border-top-width: 10px;
padding: 2px;
margin: 2px;
color: white;
}
:-moz-vertical-box-debug {
border: 2px solid red;
border-left-width: 10px;
padding: 2px;
margin: 2px;
color: white;
}
box {
overflow: hidden;
}
/******* Scrollbar *******/
scrollbar {
user-focus:ignore;
}
/******* ToolBox & ToolBar *******/
toolbox {
background-color:#999999;
min-width: 1px;
overflow: hidden;
}
toolbar {
min-width: 1px;
overflow: hidden;
}
:toolbox-normal {
background-color: #003366;
background-image: url("chrome://global/skin/taskbar-tab.gif");
background-repeat: no-repeat;
}
:toolbox-rollover {
background-color: #99cccc;
background-image: url("chrome://global/skin/taskbar-tab-hover.gif");
background-repeat: no-repeat;
}
toolbar.standard {
color: white;
background-color: #003366;
padding: 0px;
margin: 0px;
border: none;
min-height: 46px;
}
/**
* Navigation Toolbar
*/
toolbar.decorated {
background-image: url("chrome://global/skin/navbar-bg.gif");
background-repeat: repeat-x;
background-position: 0% 0%;
background-color: #CCCCCC;
padding: 0px;
padding-bottom: 4px;
}
toolbar.decorated > #toolbar_throbber_box {
background-color: #CCCCCC;
min-width: 68px;
max-width: 68px;
background-image: url("chrome://global/skin/n-box-navbar.gif");
background-repeat: no-repeat;
background-position: 100% 0%;
}
toolbar.decorated > #toolbar_throbber_box > titledbutton#Throbber
{
margin-top: 0px;
margin-left: 9px;
}
toolbar.decorated > #toolbar_throbber_box > titledbutton#Throbber:active {
margin-top: 1px;
margin-left: 10px;
}
/**
* round buttons used in 'standard toolbar'
*/
titledbutton.button28 {
background-image: url("chrome://global/skin/button28-bg.gif");
background-repeat: no-repeat;
background-position: 50% 4px;
background-color: transparent;
color: #CCFFFF;
border: none;
padding: 0px;
min-width: 28px;
margin: 3px 7px 1px 1px;
font-size: smaller;
}
titledbutton.button28:hover {
background-image:url("chrome://global/skin/button28-bg-hover.gif");
border: none;
color: #CCFFFF;
text-decoration: none;
}
titledbutton.button28:active {
background-image:url("chrome://global/skin/button28-bg-active.gif");
border: none;
color: #CCFFFF;
text-decoration: none;
}
titledbutton.button28[disabled="true"] {
background-image:url("chrome://global/skin/button28-bg-disabled.gif");
border: none;
color: #669999;
text-decoration: none;
}
titledbutton.button28[disabled="true"]:hover {
background-image:url("chrome://global/skin/button28-bg-disabled.gif");
border: none;
color: #669999;
text-decoration: none;
}
titledbutton.button28[disabled="true"]:active {
background-image:url("chrome://global/skin/button28-bg-disabled.gif");
border: none;
color: #669999;
text-decoration: none;
}
/**
* normal buttons used in 'standard toolbar'
*/
titledbutton.other28 {
background-image: none;
background-color: transparent;
color: #CCFFFF;
border: none;
padding: 0px;
min-width: 28px;
margin: 3px 7px 1px 1px;
font-size: smaller;
}
titledbutton.other28:hover {
background-image:url("chrome://global/skin/otherbutton28-bg-hover.gif");
background-repeat: no-repeat;
background-position: 50% 4px;
color: #CCFFFF;
border: none;
text-decoration: none;
}
titledbutton.other28:active {
background-image:url("chrome://global/skin/otherbutton28-bg-active.gif");
background-repeat: no-repeat;
background-position: 50% 4px;
color: #CCFFFF;
border: none;
text-decoration: none;
margin: 4px 6px 0px 2px;
}
titledbutton.other28[disabled="true"] {
margin: 3px 7px 1px 1px;
color: #669999;
border: none;
text-decoration: none;
}
titledbutton.other28[disabled="true"]:hover {
background-image: none;
color: #669999;
border: none;
text-decoration: none;
}
titledbutton.other28[disabled="true"]:active {
background-image: none;
color: #669999;
border: none;
text-decoration: none;
}
/**
* 32px round buttons (used in Navigation Toolbar)
*/
/* have to explicitly set the border and padding to ensure that more specific rules
for disabled and active titledbuttons don't apply */
titledbutton.button32 {
background-repeat: no-repeat;
background-position: 50% 0px;
background-color: transparent;
color: #CCFFFF;
min-width: 36px;
min-height: 36px;
border: 1px solid transparent;
padding: 0px;
margin-left: 1px;
margin-bottom: 1px;
margin-top: 6px;
margin-right: 6px;
font-size: smaller;
background-image:url("chrome://global/skin/button32-bg.gif");
}
titledbutton.button32:hover {
border: 1px solid transparent;
padding: 0px;
margin-left: 1px;
margin-bottom: 1px;
margin-top: 6px;
margin-right: 6px;
background-image:url("chrome://global/skin/button32-bg-hover.gif");
}
titledbutton.button32:active {
border: 1px solid transparent;
padding: 0px;
margin-top: 7px;
margin-left: 2px;
margin-bottom: 0px;
margin-right: 5px;
background-image:url("chrome://global/skin/button32-bg-active.gif");
}
titledbutton.button32[disabled="true"] {
border: 1px solid transparent;
padding: 0px;
margin-left: 1px;
margin-bottom: 1px;
margin-top: 6px;
margin-right: 6px;
background-image:url("chrome://global/skin/button32-bg-disabled.gif");
}
titledbutton.button32[disabled="true"]:hover {
border: 1px solid transparent;
padding: 0px;
margin-left: 1px;
margin-bottom: 1px;
margin-top: 6px;
margin-right: 6px;
background-image:url("chrome://global/skin/button32-bg-disabled.gif");
}
titledbutton.button32[disabled="true"]:active {
border: 1px solid transparent;
padding: 0px;
margin-left: 1px;
margin-bottom: 1px;
margin-top: 6px;
margin-right: 6px;
background-image:url("chrome://global/skin/button32-bg-disabled.gif");
}
/**
* Throbber
*/
/* FIX ME - move these gifs to global */
titledbutton#Throbber {
border: none;
margin-top: 8px;
margin-left: 9px;
list-style-image: url("chrome://global/skin/animthrob_single.gif");
background-image: none;
}
titledbutton#Throbber:active {
margin-top: 9px;
margin-left: 10px;
}
titledbutton#Throbber[busy="true"] {
list-style-image:url("chrome://global/skin/animthrob.gif");
}
/* icons titledbuttons */
titledbutton.message-icon {
list-style-image: url("chrome://global/skin/message-icon.gif");
}
titledbutton.alert-icon {
list-style-image: url("chrome://global/skin/alert-icon.gif");
}
titledbutton.error-icon {
list-style-image: url("chrome://global/skin/error-icon.gif");
}
titledbutton.question-icon {
list-style-image: url("chrome://global/skin/question-icon.gif");
}
toolbar {
background-color: #CCCCCC;
}
toolbar.standard #toolbar_throbber_box {
background-color: #CCCCCC;
min-width: 59px;
max-width: 59px;
background-image: url("chrome://global/skin/n-box.gif");
background-repeat: no-repeat;
background-position: 100% 0%;
}
titledbutton.toolbar {
border: 1px solid transparent;
}
titledbutton.toolbar:hover {
border-top: 1px solid white;
border-bottom: 1px solid #666666;
border-left: 1px solid white;
border-right: 1px solid #666666;
color:#333366;
text-decoration: underline;
}
titledbutton.toolbar:hover:-moz-outline {
border : 1px solid black;
}
titledbutton.toolbar:active {
text-decoration: none;
border-top: 1px solid #666666;
border-bottom: 1px solid white;
border-left: 1px solid #666666;
border-right: 1px solid white;
}
titledbutton.toolbar:active:-moz-outline {
border : 1px solid black;
}
titledbutton.toolbar[disabled="true"] {
border: 1px solid transparent;
}
titledbutton.toolbar[disabled="true"]:hover {
border: 1px solid transparent;
}
titledbutton.toolbar[disabled="true"]:active {
border: 1px solid transparent;
padding: 2px;
}
/**
* Bookmarks n' stuff
*/
/* These rules style the buttons that appear in the Personal Toolbar
for leaf bookmarks */
titledbutton.bookmarkbutton {
margin: 0px;
max-width: 8em;
font: inherit;
color: #99CCCC;
border: none;
padding: 1px;
}
titledbutton.bookmarkbutton:hover {
color: #CCFFFF;
background-color: #336699;
}
titledbutton.bookmarkbutton:active {
color: #CCFFFF;
background-color: #336699;
padding-left: 2px;
padding-top: 2px;
padding-right: 0px;
padding-bottom: 0px;
}
/* These rules style the menus that appear in the Personal Toolbar
for bookmark folders. */
titledbutton.bookmarkFolder {
margin: 0px;
max-width: 8em;
font: inherit;
color: #99CCCC;
border: none;
padding: 1px;
list-style-image: url("chrome://global/skin/toolbar-dropdown.gif");
}
menu:hover > .bookmarkFolder {
color: #CCFFFF;
background-color: #336699;
list-style-image: url("chrome://global/skin/toolbar-dropdown-hover.gif");
}
menu:active > .bookmarkFolder {
color: #CCFFFF;
background-color: #336699;
padding-left: 2px;
padding-top: 2px;
padding-right: 0px;
padding-bottom: 0px;
list-style-image: url("chrome://global/skin/toolbar-dropdown-hover.gif");
}
/**
* status-bar
*/
box#status-bar {
/* Style in XUL used 1px */
min-width: 1em;
background-color: #CCCCCC;
user-focus: ignore;
overflow:hidden
}
box#toolbar_button_box {
min-width: 1px;
overflow:hidden
}
titledbutton.status-bar {
border: none;
padding: 0px;
margin: 0px;
min-width: 3em;
}
titledbutton.status-bar:hover {
text-decoration: none;
}
/* removing margin and padding from normal mousedown titledbutton behavior */
titledbutton.status-bar:active {
border: none;
padding: 0px;
margin: 0px;
}
#status-bar-leftcap {
/* from XUL */
width:8px;
min-width: 8px;
max-width: 8px;
background-image: url("chrome://global/skin/gray-bottomleft.gif");
background-position: 0% 100%;
background-repeat: no-repeat;
}
#status-bar-rightcap {
/* From XUL */
width:8px;
min-width: 8px;
max-width: 8px;
background-image: url("chrome://global/skin/gray-bottomright.gif");
background-position: 100% 100%;
background-repeat: no-repeat;
}
/******* Splitters *******/
splitter {
cursor: e-resize;
min-width: 5px;
min-height: 5px;
}
splitter[state="dragging"]
{
background-color: gray;
}
grippy{
margin: 0px;
border: 2px solid #003366;
padding: 0px;
background-color: #6699CC;
list-style-image: none;
cursor: pointer;
}
grippy:hover{
background-color: #99CCFF;
}
grippy:active{
background-color: #99CCFF;
}
box[align="vertical"]>splitter grippy {
/* a horizontal splitter */
min-width: 60px;
max-height: 4px;
}
box[align="horizontal"]>splitter grippy {
/* a vertical splitter */
max-width: 4px;
min-height: 60px;
}
window[align="vertical"]>splitter grippy {
/* a horizontal splitter */
min-width: 60px;
max-height: 4px;
}
window[align="horizontal"]>splitter grippy {
/* a vertical splitter */
max-width: 4px;
min-height: 60px;
}
box[align="vertical"]>splitter {
/* a vertical splitter */
cursor: n-resize;
}
window[align="vertical"]>splitter {
/* a vertical splitter */
cursor: n-resize;
}
/**
* gray horizontal splitter for pane views
*/
splitter.gray-horizontal-splitter {
min-height: 8px;
background-color: #CCCCCC;
border: none;
padding: 0px;
}
splitter.gray-horizontal-splitter grippy {
margin: 0px;
border: 2px solid #CCCCCC;
padding: 0px;
background-color: #6699CC;
list-style-image: none;
}
splitter.gray-horizontal-splitter grippy:hover {
background-color: #003366;
}
splitter.gray-horizontal-splitter grippy:active {
background-color: #003366;
}
splitter.gray-horizontal-splitter #begincap {
min-width: 8px;
max-width: 8px;
background-image: url("chrome://global/skin/gray-bottomleft.gif");
background-repeat: no-repeat;
background-position: 0% 100%;
}
splitter.gray-horizontal-splitter #endcap {
min-width: 8px;
max-width: 8px;
}
/****** Progress Meter ********/
progressmeter[align="horizontal"] {
height: 1em;
}
progressmeter {
color : #9999CC;
background-color: #999999;
}
progressmeter[mode="undetermined"]
{
//background-color: yellow;
background-image: url(chrome://global/skin/progressmeter-busy.gif);
}
/********* Box ********/
box
{
vertical-align: top;
}
/********* TitledBox **********/
titledbox
{
display: block;
border: 2px groove white;
padding: 5px;
padding-bottom: 2px;
margin: 2px;
}
title
{
display: block;
font-weight: bold;
}
title > *
{
margin-left: 5px;
margin-right: 5px;
}
title > html|*
{
margin-left: 5px;
margin-right: 5px;
}
:titledbox-content {
display: block;
padding: inherit;
}
/********* XP Menus ***********/
menubar {
background-color: white;
min-width: 1px;
overflow: hidden;
margin-bottom: 2px;
}
menu {
color: black;
}
menu[disabled="true"] {
color: #999999;
}
menuitem {
color: black;
}
menuitem[disabled="true"] {
color: #999999;
}
/* XXX menupopups have to have a color explicitly specified. this is a bug */
menupopup, popup {
background-color: #CCCCCC;
border: 1px solid #336699;
}
popup {
background-color: #CCCCCC;
}
menupopup > menu {
max-width: 250px;
min-width: 125px;
margin-left: 0px;
margin-right: 0px;
margin-top: 0px;
margin-bottom: 0px;
}
popup > menu {
max-width: 250px;
min-width: 125px;
margin-left: 1px;
margin-right: 1px;
margin-top: 0px;
margin-bottom: 0px;
}
menupopup > menuitem {
max-width: 250px;
min-width: 125px;
margin-left: 0px;
margin-right: 0px;
margin-top: 0px;
margin-bottom: 0px;
}
popup > menuitem {
max-width: 250px;
min-width: 125px;
margin-left: 1px;
margin-right: 1px;
margin-top: 0px;
margin-bottom: 0px;
}
menuseparator {
border-bottom: 1px #336699 solid;
margin: 2px;
}
toolbarseparator {
min-width: 2em;
max-width: 2em;
width: 2em;
}
menubar > menu {
border: 1px solid transparent;
padding-top: 2px;
padding-bottom: 2px;
padding-left: 3px;
padding-right: 3px;
margin-top: 2px;
margin-bottom: 2px;
}
menupopup > menu {
border: 1px solid transparent;
padding: 2px;
}
menupopup > menuitem {
border: 1px solid transparent;
padding: 2px;
}
popup > menuitem {
border: 1px solid transparent;
padding: 2px;
}
menubar > menu[menuactive="true"] {
border: 1px solid #FFFFFF;
background-color: #CCCCCC;
-moz-border-radius: 4px;
}
menubar > menu[menuactive="true"][open="true"] {
border: 1px solid #336699;
border-bottom: 1px solid #CCCCCC;
background-color: #CCCCCC;
-moz-border-radius: 4px 4px 0px 0px;
}
menupopup > menu[menuactive="true"] {
background-color: #336699;
color: white;
}
popup > menu[menuactive="true"] {
background-color: #336699;
color: white;
}
menupopup > menuitem[menuactive="true"] {
background-color: #336699;
color: white;
}
popup > menuitem[menuactive="true"] {
background-color: #336699;
color: white;
}
.menu-right {
padding: 0px;
border: 0px;
width: 10px;
margin-top: 0px;
margin-bottom: 0px;
margin-left: 6px;
margin-right: 0px;
}
.menu-left {
color: inherit;
padding: 0px;
border: 0px;
width: 13px;
margin-top: 0px;
margin-bottom: 0px;
margin-right: 2px;
}
.menubar-left {
color: inherit;
padding: 0px;
border: 0px;
margin-top: 0px;
margin-bottom: 0px;
margin-right: 2px;
}
.menu-text, .menu-accel {
color: inherit;
padding: 0px;
border: 0px;
margin-top: 0px;
margin-bottom: 0px;
margin-right: 2px;
}
.menubar-text {
color: inherit;
padding: 0px;
border: 0px;
margin-top: 0px;
margin-bottom: 0px;
margin-right: 2px;
}
menuitem > .menu-right {
list-style-image: none;
}
menuitem > .menu-left {
list-style-image: none;
}
menuitem[checked="true"] > .menu-left {
list-style-image: url("chrome://global/skin/menu-check.gif");
}
menuitem[checked="true"][disabled="true"] > .menu-left {
list-style-image: url("chrome://global/skin/menu-check-disabled.gif");
}
menuitem[checked="true"][menuactive="true"] > .menu-left {
list-style-image: url("chrome://global/skin/menu-check-hover.gif");
}
menu > .menu-right {
list-style-image: url("chrome://global/skin/menu-arrow.gif");
}
menu[disabled="true"] > .menu-right {
list-style-image: url("chrome://global/skin/menu-arrow-disabled.gif");
}
menu[menuactive="true"] > .menu-right {
list-style-image: url("chrome://global/skin/menu-arrow-hover.gif");
}
menulist, menubutton {
padding: 1px 0px 1px 0px;
}
menulist > .menu-text,
menubutton > .menu-text {
padding-left: 4px;
padding-right: 4px;
border: 1px inset #CCCCCC;
}
menubutton > .menu-button {
border: 1px outset #CCCCCC;
padding: 2px;
}
menubutton > .menu-button:active {
border: 1px inset #CCCCCC;
padding: 3px 1px 1px 3px;
}
menubutton > .menu-dropmarker,
menulist > .menu-dropmarker {
border: 1px outset #CCCCCC;
list-style-image: url("chrome://global/skin/scroll-down.gif");
padding: 0px 2px 0px 2px;
}
menubutton[open="true"] > .menu-dropmarker,
menulist[open="true"] > .menu-dropmarker {
border: 1px inset #CCCCCC;
padding: 1px 1px -1px 3px;
}
menubutton menupopup, menulist menupopup {
border: 1px outset #CCCCCC;
}
menulist[editable="true"] {
padding: 0px;
}
menulist[editable="true"] > .menu-text {
border-left: none;
border-top: 1px inset #CCCCCC;
border-right: 1px inset #CCCCCC;
border-bottom: 1px inset #CCCCCC;
margin: 0px 2px 0px 0px;
}
menulist[editable="true"] > .menu-dropmarker {
border: 1px outset #CCCCCC;
}
menulist[editable="true"][open="true"] > .menu-dropmarker {
border: 1px inset #CCCCCC;
}
menulist[editable="true"] > .menu-icon {
list-style-image: url("chrome://bookmarks/skin/bookmark-item.gif");
background-color: white;
padding: 1px;
border-left: 1px inset #CCCCCC;
border-top: 1px inset #CCCCCC;
border-right: none;
border-bottom: 1px inset #CCCCCC;
}
menulist menupopup > menuseparator {
border-bottom: 2px groove #CCCCCC;
}
/******** Rules for menus on the standard toolbars ***************/
menu.standard {
color: #99CCCC;
}
menu.standard > .menu-right {
list-style-image: url("chrome://global/skin/toolbar-menu-arrow.gif");
}
menu.standard:hover > .menu-right {
list-style-image: url("chrome://global/skin/toolbar-menu-arrow-hover.gif");
}
menu.standard[disabled="true"] > .menu-right {
list-style-image: url("chrome://global/skin/toolbar-menu-arrow-disabled.gif");
}
menuitem.standard {
color: #99CCCC;
}
menuseparator.standard {
border-top: none;
border-bottom: 1px #99CCCC solid;
}
menupopup.standard {
color: #99CCCC;
background-color: #003366;
border: 1px #99CCCC solid;
}
menupopup > menu[menuactive="true"].standard {
color: #003366;
background-color: #99CCCC;
}
menupopup > menuitem[menuactive="true"].standard {
color: #003366;
background-color: #99CCCC;
}
/******** Titled buttons **********/
titledbutton.toolbar-flat {
color: #99CCCC;
font: inherit;
border: none;
padding: 1px;
margin: 0px;
}
titledbutton.toolbar-flat:hover {
text-decoration: none;
background-color: #336699;
color: #CCFFFF;
}
titledbutton.toolbar-flat:active {
text-decoration: none;
color: #CCFFFF;
padding: 2px 0px 0px 2px;
}
/* push button */
titledbutton.push {
border-top: 1px solid white;
border-bottom: 1px solid #666666;
border-left: 1px solid white;
border-right: 1px solid #666666;
-moz-border-radius: 3px;
padding: 2px;
margin: 2px;
text-align: center;
background-color: inherit;
background-image: inherit;
}
titledbutton.push:hover {
border-top: 1px solid white;
border-bottom: 1px solid #666666;
border-left: 1px solid white;
border-right: 1px solid #666666;
color: #003366;
padding: 2px;
text-decoration: underline;
margin: 2px;
}
/*titledbutton.push:hover:-moz-outline {
outline: 1px solid black;
}*/
titledbutton.push:active {
border-top: 1px solid #666666;
border-bottom: 1px solid white;
border-left: 1px solid #666666;
border-right: 1px solid white;
padding: 3px 1px 1px 3px;
text-decoration: none;
margin: 2px;
}
/*titledbutton.push:active:-moz-outline {
outline: 1px solid black;
}*/
titledbutton.push[toggled="1"] {
border-top: 1px solid #666666;
border-bottom: 1px solid white;
border-left: 1px solid #666666;
border-right: 1px solid white;
padding: 3px 1px 1px 3px;
margin: 2px;
}
titledbutton.push[toggled="2"] {
background-color: lightgray;
border: 1px solid #999999;
margin: 2px;
}
titledbutton.push[disabled="true"] {
background-color:inherit;
background-image: inherit;
border : 1px solid #999999;
color: #999999;
margin: 2px;
}
titledbutton.push[disabled="true"]:hover {
background-color:inherit;
background-image: inherit;
border : 1px solid #999999;
color: #999999;
margin: 2px;
}
titledbutton.push[disabled="true"]:active {
background-color:inherit;
background-image: inherit;
border : 1px solid #999999;
color: #999999;
padding: 2px;
margin: 2px;
}
titledbutton.dialog {
min-width: 5em;
}
titledbutton.dialog[default] {
/* border-color: black; */
font-weight: bold;
list-style-image: url("chrome://global/skin/return.gif");
/* FIX ME - temporary workaround to offset the lack of a way to align text and image */
padding-right: 12px;
}
titledbutton.dialog[default]:active {
/* FIX ME - temporary workaround to offset the lack of a way to align text and image */
padding-right: 11px;
}
titledbutton.popup {
list-style-image:url(chrome://global/skin/taskbar-popup-arrow.gif);
}
/* special class for plain titledbuttons */
titledbutton.plain {
border: 1px solid transparent;
padding: 2px;
}
titledbutton.plain:hover {
border: 1px solid transparent;
padding: 2px;
text-decoration: none;
color: inherit;
}
titledbutton.plain:active {
border: 1px solid transparent;
padding: 2px;
text-decoration: none;
color: inherit;
}
titledbutton.plain[disabled] {
border: 1px solid transparent;
padding: 2px;
}
titledbutton.plain[disabled]:hover {
border: 1px solid transparent;
padding: 2px;
}
titledbutton.plain[disabled]:active {
border: 1px solid transparent;
padding: 2px;
}
/* special class for borderless buttons */
/* titled button on toolbars are automatically set to be borderless (see below) */
titledbutton.borderless {
border: 1px solid transparent;
}
titledbutton.borderless:hover {
border-top: 1px solid white;
border-bottom: 1px solid #666666;
border-left: 1px solid white;
border-right: 1px solid #666666;
color:#333366;
text-decoration: underline;
}
titledbutton.borderless:hover:-moz-outline {
border : 1px solid black;
}
titledbutton.borderless:active {
text-decoration:none;
border-top: 1px solid #666666;
border-bottom: 1px solid white;
border-left: 1px solid #666666;
border-right: 1px solid white;
}
titledbutton.borderless:active:-moz-outline {
border : 1px solid black;
}
titledbutton.borderless[disabled] {
border: 1px solid transparent;
}
titledbutton.borderless[disabled]:hover {
border: 1px solid transparent;
}
titledbutton.borderless[disabled]:active {
border: 1px solid transparent;
padding: 2px;
}
/******** Tree widget **********/
tree {
background-color: white;
border: none;
border-spacing: 0px;
}
tree.inset {
border-top: 1px solid #666666;
border-bottom: 1px solid white;
border-left: 1px solid #666666;
border-right: 1px solid white;
}
treeitem[selected="true"] > treerow {
color: white;
background-color: #336699;
}
treecell {
white-space: nowrap;
vertical-align: middle;
padding: 1px 0px 1px 2px;
}
treehead > treerow > treecell {
background-color: #CCCCCC;
color: black;
border-right: 1px solid white;
vertical-align: middle;
padding: 0px 0px 0px 5px;
}
tree.inset > treehead > treerow > treecell {
border-top: 1px solid white;
border-bottom: 1px solid #666666;
border-left: 1px solid white;
border-right: 1px solid #666666;
}
tree.inset > treehead > treerow > treecell.sortable:active {
border-top: 1px solid #666666;
border-bottom: 1px solid white;
border-left: 1px solid #666666;
border-right: 1px solid white;
}
treecell.image > titledbutton {
text-decoration: none;
margin: 0px;
padding: 0px;
}
treecell.image > titledbutton:hover {
text-decoration: none;
margin: 0px;
padding: 0px;
}
treecell.image > titledbutton:active {
text-decoration: none;
margin: 0px;
padding: 0px;
}
.tree-icon {
width: 100%;
}
.tree-button {
margin: 0px;
padding: 0px;
border: none;
list-style-image: inherit;
width: 100%;
}
/* BEN: make rule for property list cells */
treecell.propertylist {
padding-left: 5px;
border-right: 1px solid #CCCCCC;
border-bottom: 1px solid #CCCCCC;
}
treeitem > treerow > treecell > .twisty {
border: none;
padding: 0px;
margin: 0px;
width: 16px;
list-style-image: url("chrome://global/skin/closedtwisty.gif");
user-focus:ignore;
}
.twisty:hover {
text-decoration: none;
}
.twisty:active {
text-decoration: none;
}
treeitem[empty="true"] > treerow > treecell > titledbutton.twisty {
list-style-image: none;
}
treeitem > treerow > treecell > .twisty[disabled="true"] {
list-style-image: none;
}
treeitem[container="true"][open="true"] > treerow > treecell > .twisty {
list-style-image: url("chrome://global/skin/opentwisty.gif");
}
/********** Tab widget *********/
tab {
border-top: 1px solid white;
border-bottom: 1px solid #666666;
border-left: 1px solid white;
border-right: 1px solid #666666;
color: black;
padding: 3px 5px 3px 5px;
}
/* when a tab is selected this is how it should look */
tab[selected="true"] {
font-weight: bold;
}
tab:hover {
color: #003366;
text-decoration: underline;
}
tab:active {
border-top: 1px solid #666666;
border-bottom: 1px solid white;
border-left: 1px solid #666666;
border-right: 1px solid white;
text-decoration: none;
}
/* top tabs */
tabcontrol[align="vertical"] tabbox[align="horizontal"] tab {
border-bottom: none;
-moz-border-radius: 8px 8px 0px 0px;
padding-bottom: 1px;
margin: 1px 2px 1px 2px;
}
/* bottom tabs */
tabcontrol[align="vertical"] tabpanel + tabbox[align="horizontal"] tab {
border-top: none;
border-bottom: 1px solid #666666;
border-left: 1px solid white;
border-right: 1px solid #666666;
-moz-border-radius: 0px 0px 8px 8px;
padding: 1px 5px 3px 5px;
margin: 1px 2px 1px 2px;
}
/* left tabs */
tabcontrol[align="horizontal"] tabbox[align="vertical"] tab {
border-right: none;
-moz-border-radius: 8px 0px 0px 8px;
padding-right: 1px;
margin: 2px 1px 2px 1px;
}
/* right tabs */
tabcontrol[align="horizontal"] tabpanel + tabbox[align="vertical"] tab {
border-top: 1px solid white;
border-bottom: 1px solid #666666;
border-left: none;
border-right: 1px solid #666666;
-moz-border-radius: 0px 8px 8px 0px;
padding: 3px 5px 1px 5px;
margin: 2px 1px 2px 1px;
}
tabcontrol {
border: none;
}
deck.tabpanel, tabpanel {
border-top: 1px solid white;
border-bottom: 1px solid #666666;
border-left: 1px solid white;
border-right: 1px solid #666666;
padding: 5px;
}
/**********************************
* HTML components in the window tag
**********************************/
/**
* removed 2px black border from iframe
*/
html|iframe {
min-width: 10px;
min-height: 10px;
width: 100px;
height: 100px;
border: none;
}
html|div.separator[align="horizontal"] {
width: 100%;
max-height: 2px;
vertical-align: middle;
border-bottom: 2px groove white;
margin-top: 0.5em;
margin-bottom: 0.5em;
margin-left: 0.25em;
margin-right: 0.25em;
}
html|div.separator[align="vertical"] {
height: 100%;
max-width: 2px;
border-right: 2px groove white;
background-color: yellow;
margin-left: 0.5em;
margin-right: 0.5em;
margin-top: 0.25em;
margin-bottom: 0.25em;
}
html|fieldset {
margin-bottom: 6px;
margin-top: 5px;
margin-left: 6px;
margin-right: 5px;
padding: 5px;
border: 2px groove white;
}
html|legend {
border: none;
margin-bottom: 5px;
margin-top: 0px;
margin-left: 4px;
margin-right: 3px;
cursor: default;
}
html|label {
padding-bottom: 4px;
background-color: transparent;
white-space: nowrap;
}
html|textarea {
font-family: inherit;
font-size: inherit;
border-top: 1px solid #666666;
border-bottom: 1px solid white;
border-left: 1px solid #666666;
border-right: 1px solid white;
padding-top: 1px;
padding-bottom: 2px;
padding-left: 4px;
padding-right: 3px;
margin-top: 1px;
margin-bottom: 2px;
margin-left: 4px;
margin-right: 3px;
background-color: white;
color: black;
cursor: text;
}
html|textarea:active { cursor: text; }
html|textarea:hover { cursor: text; }
html|textarea:focus { cursor: text; }
html|input[type=text] {
font-family: inherit;
font-size: inherit;
border-top: 1px solid #666666;
border-bottom: 1px solid white;
border-left: 1px solid #666666;
border-right: 1px solid white;
padding: 1px;
margin: 0px 3px 2px 4px;
background-color: white;
color: black;
min-height: 1.6em;
cursor: text;
}
html|input[type=text]:active { cursor: text; }
html|input[type=text]:hover { cursor: text; }
html|input[type=text]:focus { cursor: text; }
html|input[type=text][disabled] { color: #999999; }
html|input[type=password] {
border-top: 1px solid #666666;
border-bottom: 1px solid white;
border-left: 1px solid #666666;
border-right: 1px solid white;
padding-top: 3px;
padding-bottom: 2px;
padding-left: 4px;
padding-right: 3px;
margin-top: 1px;
margin-bottom: 2px;
margin-left: 4px;
margin-right: 3px;
background-color: white;
color: black;
min-height: 1.75em;
}
html|input {
background-color: white;
text-align: left;
color: black;
user-focus: normal;
}
/**
* borderless cell for containing lengthy or variable length strings in a dialog
* where you want permanence (non-editability) but the ability to copy/paste, and
* fit long strings in a small space.
*/
html|input.scroll-label {
border: none;
}
/********** radio **********/
html|input[type=radio] {
margin: 3px 5px 3px 3px;
color: black;
width: 12px;
height: 12px;
border-top: 1px solid white;
border-bottom: 1px solid #666666;
border-left: 1px solid white;
border-right: 1px solid #666666;
background-color: #CCCCCC;
-moz-border-radius: 50%;
}
html|input[type=radio]:focus {
border-top: 1px solid white;
border-bottom: 1px solid #666666;
border-left: 1px solid white;
border-right: 1px solid #666666;
}
html|input[type=radio]:hover {
border: 1px solid #003366;
}
html|input[type=radio]:active {
border-top: 1px solid #666666;
border-bottom: 1px solid white;
border-left: 1px solid #666666;
border-right: 1px solid white;
background-color: #CCCCCC;
}
html|input[type=radio][disabled] {
border: 1px solid #666666;
}
/********** checkbox **********/
checkbox {
list-style-image: url(chrome://global/skin/scroll-up.gif);
}
checkbox[checked="true"] {
list-style-image: url(chrome://global/skin/scroll-down.gif);
}
radio {
list-style-image: url(chrome://global/skin/scroll-up.gif);
}
radio[checked="true"] {
list-style-image: url(chrome://global/skin/scroll-down.gif);
}
radiogroup {
border: 1px solid black;
}
html|input[type=checkbox] {
padding: 0px 1px 1px 0px;
margin: 3px 5px 4px 3px;
background-color: #CCCCCC;
border-top: 1px solid white;
border-bottom: 1px solid #666666;
border-left: 1px solid white;
border-right: 1px solid #666666;
color: black;
width: 13px;
height: 13px;
color: black;
/* FIX ME - we really want the same size radius on each corner,
but rounding bug seems to cause the corners to be calculated in a different way */
-moz-border-radius: 3px;
}
html|input[type=checkbox]:focus {
border-top: 1px solid white;
border-bottom: 1px solid #666666;
border-left: 1px solid white;
border-right: 1px solid #666666;
}
html|input[type=checkbox]:hover {
border: 1px solid #003366;
}
html|input[type=checkbox]:active {
border-top: 1px solid #666666;
border-bottom: 1px solid white;
border-left: 1px solid #666666;
border-right: 1px solid white;
}
html|input[type=checkbox][disabled] {
border: 1px solid #666666;
}
html|input[type=checkbox][disabled]:hover {
border: 1px solid #666666;
}
html|input[type=checkbox][disabled]:active {
border: 1px solid #666666;
}
html|div, html|td {
cursor: default;
}
/********** SELECT **********/
html|select[size] {
font-family: inherit;
font-size: inherit;
background-color: white;
border-top: 1px solid #666666;
border-bottom: 1px solid white;
border-left: 1px solid #666666;
border-right: 1px solid white;
padding: 1px 0px 1px 0px;
}
html|select, html|select[size="1"] {
font-family: inherit;
font-size: inherit;
background-color: #CCCCCC;
border: none;
padding: 0px;
}
html|select > html|input[type="button"]:hover {
border: 1px solid #003366;
}
html|select:-moz-display-comboboxcontrol-frame:hover {
border: 1px solid #003366;
border-right: none;
}
html|select[size]:focus {
border-top: 1px solid #666666;
border-bottom: 1px solid white;
border-left: 1px solid #666666;
border-right: 1px solid white;
padding: 1px 0px 1px 0px;
}
html|select:focus, html|select[size="1"]:focus {
border: 1px solid black;
padding: 0px;
}
html|select[multiple]:focus {
border-top: 1px solid #666666;
border-bottom: 1px solid white;
border-left: 1px solid #666666;
border-right: 1px solid white;
}
html|select[size][disabled] {
background-color: #CCCCCC;
border: 1px solid #999999;
}
html|select[multiple][disabled] {
background-color: #CCCCCC;
border: 1px solid #999999;
}
html|select[disabled], html|select[size="1"][disabled] {
background-color: #CCCCCC;
border: 1px solid #999999;
}
/* combobox button */
html|select > html|input[type="button"] {
background-color: #CCCCCC;
border-top: 1px solid white;
border-bottom: 1px solid #666666;
border-left: 1px solid white;
border-right: 1px solid #666666;
/*background-image:url("arrow.gif");*/
background-repeat: no-repeat;
background-position: center;
width: 12px;
height: 12px;
-moz-border-radius: 0px 3px 3px 0px;
}
/* combobox button depressed */
html|select > html|input[type="button"]:active {
background-color: #CCCCCC;
/*background-image:url("arrowd.gif");*/
border-top: 1px solid #666666;
border-bottom: 1px solid white;
border-left: 1px solid #666666;
border-right: 1px solid white;
-moz-border-radius: 0px 3px 3px 0px;
}
html|select[disabled] > html|input[type="button"] {
background-color: #CCCCCC;
border: solid 1px #999999;
-moz-border-radius: 0px 3px 3px 0px;
}
/* combobox display area */
html|select:-moz-display-comboboxcontrol-frame {
font-family: inherit;
font-size: inherit;
border-top: 1px solid #666666;
border-bottom: 1px solid white;
border-left: 1px solid #666666;
border-right: none;
background-color: #CCCCCC;
background-image: none;
padding: 0px 0px 1px 3px;
margin: 0px;
vertical-align: bottom;
}
html|select > html|input:button-content {
text-align: left;
}
html|select[disabled]:-moz-display-comboboxcontrol-frame {
font-family: inherit;
font-size: inherit;
border: none;
color: #999999;
background-color: #CCCCCC;
background-image: none;
-moz-border-radius: 0px;
padding: 0px 0px 1px 3px;
vertical-align: bottom;
}
/* combbox display area - active */
html|select:-moz-display-comboboxcontrol-frame:active {
font-family: inherit;
font-size: inherit;
border-top: 1px solid #666666;
border-bottom: 1px solid white;
border-left: 1px solid #666666;
border-right: none;
background-color: #CCCCCC;
background-image: none;
-moz-border-radius: 0px;
padding: 0px 0px 1px 3px;
vertical-align: bottom;
}
html|option {
min-height: 1em;
display:block;
font-family: inherit;
font-size: inherit;
user-select: none;
}
/* we need to address the part where there is a label */
/* and content. The CSS3 content property would be handy for this */
html|option[label]:before {
content:attr(label);
}
html|select[size] html|option {
padding-left: 3px;
padding-top: 0px;
padding-right: 11px;
padding-bottom: 0px;
}
html|select html|option, html|select[size="1"] html|option {
padding-left: 3px;
padding-top: 0px;
padding-right: 5px;
padding-bottom: 0px;
}
html|select[disabled] > html|option {
color: #999999;
background-color: white;
}
/* Combobox item style */
html|select html|option[-moz-option-selected] {
color: white;
background-color: #336699;
}
/* List box item selected style */
html|select html|option[disabled][-moz-option-selected] {
color: #999999;
background-color: #CCCCCC;
}
html|select html|option[disabled] {
color: #999999;
background-color: #CCCCCC;
}
html|select[size] html|option[-moz-option-selected] {
color: white;
background-color: #336699;
}
html|select[size][disabled] html|option[-moz-option-selected] {
color: #999999;
background-color: #CCCCCC;
}
html|select[size="1"] html|option[-moz-option-selected] {
color: white;
background-color: #336699;
}
html|select[size="1"][disabled] html|option[-moz-option-selected] {
color: #999999;
background-color: #CCCCCC;
}
html|select[multiple] html|option[-moz-option-selected] {
color: white;
background-color: #336699;
}
html|select[multiple][disabled] html|option[-moz-option-selected] {
color: #999999;
background-color: #CCCCCC;
}
html|select[multiple][size="1"] html|option[-moz-option-selected] {
color: white;
background-color: #336699;
}
html|optgroup {
font-family: inherit;
font-size: inherit;
display:block;
font-style: italic;
font-weight: bold;
}
html|optgroup > html|option {
display:block;
padding-left:20px;
font-style: normal;
font-weight: normal;
}
html|optgroup:before {
display: block;
content:attr(label);
}
html|select:-moz-display-comboboxcontrol-frame:focus {
border: none;
}
html|select[size="1"]:-moz-display-comboboxcontrol-frame:focus {
border: none;
}
toolbarseparator.line {
width: 30px;
border : 1px solid red;
background-color: #99CCCC;
}