/* This Source Code Form is subject to the terms of the Mozilla Public * License, v. 2.0. If a copy of the MPL was not distributed with this * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ /* === BEGIN common.inc.css === */ @namespace html "http://www.w3.org/1999/xhtml"; @namespace xul "http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"; html|body, xul|page, xul|window { font: 11px "Liberation Sans",Arial,Tahoma,Helvetica,sans-serif; -moz-appearance: none; background-color: #000000; color: #FF9F00; } html|body { font-size: 15px; font-weight: normal; margin: 0; } html|h1 { font-size: 2.5em; font-weight: lighter; line-height: 1.2; color: #9C9CFF; margin: 0; margin-bottom: .5em; } html|hr { border-style: solid none none none; border-color: #9C9CFF; } xul|caption { } xul|caption > xul|checkbox, xul|caption > xul|label { margin-top: 0; margin-bottom: 0; } xul|description { -moz-margin-start: 0; } *|*.main-content { padding-top: 40px; -moz-padding-end: 48px; /* orig is 44px to compensate the 4px margin of child elements */ padding-bottom: 48px; -moz-padding-start: 48px; overflow: auto; } xul|prefpane > xul|*.content-box { overflow: visible; } /* groupboxes */ /* xul|groupbox { -moz-appearance: none; border: none; margin: 15px 0 0; -moz-padding-start: 0; -moz-padding-end: 0; font-size: 1.25rem; } xul|groupbox xul|label { / !important needed to override toolkit !important rule / -moz-margin-start: 0 !important; -moz-margin-end: 0 !important; } */ /* tabpanels and tabs */ /* xul|tabpanels { -moz-appearance: none; font-size: 1.25rem; line-height: 22px; border: none; padding: 0; background-color: transparent; color: inherit; } xul|tabs { margin-bottom: 15px; border-top: 1px solid #c1c1c1; border-bottom: 1px solid #c1c1c1; background-color: #fbfbfb; } xul|*.tabs-left, xul|*.tabs-right { border-bottom: none; } xul|tab { -moz-appearance: none; margin-top: 0; padding: 4px 20px; min-height: 44px; color: #424f5a; background-color: #fbfbfb; border-width: 0; transition: background-color 50ms ease 0s; } xul|tab:hover { background-color: #ebebeb; } xul|tab[visuallyselected] { background-color: #ebebeb; padding-bottom: 0; / compensate the 4px border / border-bottom: 4px solid #ff9500; } xul|*.tab-text { font-size: 1.3rem; line-height: 22px; } */ /* html buttons */ html|button { border-radius: 300px; border: none; background-color: #C09070; color: #000000; /* override forms.css */ font: inherit; } /* xul buttons and menulists */ /* *|button, xul|colorpicker[type="button"], xul|menulist { -moz-appearance: none; height: 30px; color: #333; line-height: 20px; border: 1px solid #c1c1c1; -moz-border-top-colors: none !important; -moz-border-right-colors: none !important; -moz-border-bottom-colors: none !important; -moz-border-left-colors: none !important; border-radius: 2px; background-color: #fbfbfb; } */ html|button:enabled:hover, xul|button:not([disabled="true"]):hover, xul|colorpicker[type="button"]:not([disabled="true"]):hover, xul|menulist:not([disabled="true"]):hover { background-color: #FFCF00; color: #000000; } html|button:enabled:hover:active, xul|button:not([disabled="true"]):hover:active, xul|colorpicker[type="button"]:not([disabled="true"]):hover:active, xul|menulist[open="true"]:not([disabled="true"]) { background-color: #FF9F00; color: #000000; } html|button:disabled, xul|button[disabled="true"], xul|colorpicker[type="button"][disabled="true"], xul|menulist[disabled="true"] { cursor: not-allowed; background-color: #402858; color: #000000; } *|button.primary { background-color: #A06060; } html|button.primary:enabled:hover, xul|button.primary:not([disabled="true"]):hover { background-color: #FFCF00; } html|button.primary:enabled:hover:active, xul|button.primary:not([disabled="true"]):hover:active { background-color: #FF9F00; } /* xul|colorpicker[type="button"] { padding: 6px; width: 50px; } xul|button > xul|*.button-box, xul|menulist > xul|*.menulist-label-box { padding-right: 10px !important; padding-left: 10px !important; } xul|menulist > xul|*.menulist-label-box > xul|*.menulist-icon[src] { -moz-margin-end: 5px; } xul|button[type="menu"] > xul|*.button-box > xul|*.button-menu-dropmarker { -moz-appearance: none; margin: 1px 0; -moz-margin-start: 10px; padding: 0; width: 10px; height: 16px; border: none; background-color: transparent; list-style-image: url("chrome://global/skin/in-content/dropdown.svg#dropdown"); } */ xul|*.help-button { /* min-width: 30px; border-radius: 2px; border-width: 0; background-color: #ffcb00; background-image: none; box-shadow: none; */ list-style-image: url("chrome://global/skin/in-content/help-glyph.svg"); } /* xul|*.help-button:not([disabled="true"]):hover { background-color: #f4c200; background-image: none; } xul|*.help-button:not([disabled="true"]):hover:active { background-color: #eaba00; background-image: none; } xul|*.close-icon > xul|*.button-box, xul|*.help-button > xul|*.button-box { padding-top: 0; padding-bottom: 0; padding-right: 0 !important; padding-left: 0 !important; } */ xul|*.help-button > xul|*.button-box > xul|*.button-icon { width: 18px; height: 18px; } xul|*.help-button > xul|*.button-box > xul|*.button-text { display: none; } /* xul|*.spinbuttons-button { -moz-margin-start: 10px !important; -moz-margin-end: 2px !important; } xul|*.spinbuttons-up { margin-top: 2px !important; border-radius: 1px 1px 0 0; } xul|*.spinbuttons-down { margin-bottom: 2px !important; border-radius: 0 0 1px 1px; } xul|*.spinbuttons-button > xul|*.button-box { padding: 1px 5px 2px !important; } xul|*.spinbuttons-up > xul|*.button-box > xul|*.button-icon { list-style-image: url("chrome://global/skin/arrow/arrow-up.gif"); } xul|*.spinbuttons-up[disabled="true"] > xul|*.button-box > xul|*.button-icon { list-style-image: url("chrome://global/skin/arrow/arrow-up-dis.gif"); } xul|*.spinbuttons-down > xul|*.button-box > xul|*.button-icon { list-style-image: url("chrome://global/skin/arrow/arrow-dn.gif"); } xul|*.spinbuttons-down[disabled="true"] > xul|*.button-box > xul|*.button-icon { list-style-image: url("chrome://global/skin/arrow/arrow-dn-dis.gif"); } xul|menulist:not([editable="true"]) > xul|*.menulist-dropmarker { -moz-appearance: none; -moz-margin-end: 4px; padding: 0; border: none; background-color: transparent; list-style-image: url("chrome://global/skin/in-content/dropdown.svg#dropdown"); } xul|menulist:not([editable="true"]) > xul|*.menulist-dropmarker > xul|*.dropmarker-icon { width: 18px; height: 18px; } xul|menulist[disabled="true"]:not([editable="true"]) > xul|*.menulist-dropmarker { list-style-image: url("chrome://global/skin/in-content/dropdown.svg#dropdown-disabled") } xul|menulist > xul|menupopup, xul|button[type="menu"] > xul|menupopup { -moz-appearance: none; border: 1px solid #c1c1c1; border-radius: 2px; background-color: #fff; } xul|menulist > xul|menupopup xul|menu, xul|menulist > xul|menupopup xul|menuitem, xul|button[type="menu"] > xul|menupopup xul|menu, xul|button[type="menu"] > xul|menupopup xul|menuitem { -moz-appearance: none; font-size: 1rem; color: #333; padding-top: 0.2em; padding-bottom: 0.2em; -moz-padding-start: 10px; -moz-padding-end: 30px; } xul|menulist > xul|menupopup > xul|menu[_moz-menuactive="true"], xul|menulist > xul|menupopup > xul|menuitem[_moz-menuactive="true"], xul|button[type="menu"] > xul|menupopup > xul|menu[_moz-menuactive="true"], xul|button[type="menu"] > xul|menupopup > xul|menuitem[_moz-menuactive="true"] { color: #333; background-color: rgba(0,149,221,0.25); } xul|menulist > xul|menupopup > xul|menu[selected="true"], xul|menulist > xul|menupopup > xul|menuitem[selected="true"], xul|button[type="menu"] > xul|menupopup > xul|menu[selected="true"], xul|button[type="menu"] > xul|menupopup > xul|menuitem[selected="true"] { color: #fff; background-color: #0095DD; } xul|menulist > xul|menupopup xul|menuseparator, xul|button[type="menu"] > xul|menupopup xul|menuseparator { -moz-appearance: none; margin: 0; padding: 0; border-top: 1px solid #c1c1c1; border-bottom: none; } */ /* textboxes */ /* *|textbox { -moz-appearance: none; height: 30px; color: #333; line-height: 20px; padding-right: 10px; padding-left: 10px; border: 1px solid #c1c1c1; -moz-border-top-colors: none !important; -moz-border-right-colors: none !important; -moz-border-bottom-colors: none !important; -moz-border-left-colors: none !important; border-radius: 2px; background-color: #fff; } html|textbox:focus, xul|textbox[focused] { border-color: #0095dd; } html|textbox:disabled, xul|textbox[disabled="true"] { opacity: 0.5; } */ /* Links */ html|a, .text-link, .inline-link { /* line-height: 22px;*/ color: #3333FF; text-decoration: none; } html|a:hover, .text-link:hover, .inline-link:hover { color: #FFCF00; text-decoration: underline; } html|a:hover:active, .text-link:hover:active, .inline-link:hover:active { color: #FF9F00; text-decoration: underline; } /* Checkboxes and radio buttons */ /* / Hide the actual checkbox / html|input[type="checkbox"] { opacity: 0; position: absolute; } / Create a box to style as the checkbox / html|input[type="checkbox"] + html|label:before { display: inline-block; content: ""; vertical-align: middle; } html|input[type="checkbox"] + html|label { line-height: 0px; } xul|checkbox { -moz-margin-start: 0; } xul|*.checkbox-check, html|input[type="checkbox"] + html|label:before { -moz-appearance: none; width: 23px; height: 23px; border-radius: 2px; border: 1px solid #c1c1c1; -moz-margin-end: 10px; background-color: #f1f1f1; / !important needed to override toolkit checked !important rule / background-image: linear-gradient(#fff, rgba(255,255,255,0.8)) !important; background-position: center center; background-repeat: no-repeat; box-shadow: 0 1px 1px 0 #fff, inset 0 2px 0 0 rgba(0,0,0,0.03); } xul|checkbox:not([disabled="true"]):hover > xul|*.checkbox-check, html|input[type="checkbox"]:not(:disabled) + html|label:hover:before { border-color: #0095dd; } xul|*.checkbox-check[checked] { background-image: url("chrome://global/skin/in-content/check.png"), / * !important needed to override toolkit !important rule * / linear-gradient(#fff, rgba(255,255,255,0.8)) !important; } html|input[type="checkbox"]:checked + html|label:before { background-image: url("chrome://global/skin/in-content/check.svg#check"), linear-gradient(#fff, rgba(255,255,255,0.8)) !important; } xul|checkbox[disabled="true"] > xul|*.checkbox-check, html|input[type="checkbox"]:disabled + html|label { opacity: 0.5; } xul|*.checkbox-label-box { -moz-margin-start: -1px; / * negative margin for the transparent border * / -moz-padding-start: 0; } xul|richlistitem > xul|*.checkbox-check { margin: 3px 6px; } xul|radio { -moz-margin-start: 0; } xul|*.radio-check { -moz-appearance: none; width: 23px; height: 23px; border: 1px solid #c1c1c1; border-radius: 50%; -moz-margin-end: 10px; background-color: #f1f1f1; background-image: linear-gradient(#fff, rgba(255,255,255,0.80)); box-shadow: 0 1px 1px 0 #fff, inset 0 2px 0 0 rgba(0,0,0,0.03); } xul|radio:not([disabled="true"]):hover > xul|*.radio-check { border-color: #0095dd; } xul|*.radio-check[selected] { list-style-image: url("chrome://global/skin/in-content/radio.svg#radio"); } xul|radio[disabled="true"] > xul|*.radio-check { opacity: 0.5; } xul|*.radio-label-box { -moz-margin-start: -1px; / * negative margin for the transparent border * / -moz-margin-end: 10px; -moz-padding-start: 0; } */ /* Category List */ /* xul|*#categories { -moz-appearance: none; background-color: #424f5a; padding-top: 39px; margin: 0; border-width: 0; } xul|*.category { -moz-appearance: none; color: #c1c1c1; -moz-border-end-width: 0; -moz-padding-start: 15px; -moz-padding-end: 21px; min-height: 40px; transition: background-color 150ms; } xul|*.category:hover { background-color: #5e6972; } xul|*.category[selected] { background-color: #343f48; color: #f2f2f2; -moz-padding-start: 11px; / compensate the 4px border / -moz-border-start: solid 4px #ff9500; } xul|*#categories[keyboard-navigation="true"]:-moz-focusring > xul|*.category[current] { border-top: 1px #ffffff dotted; border-bottom: 1px #ffffff dotted; } */ *|*.category-name { /* line-height: 22px; font-size: 1.25rem; padding-bottom: 2px; -moz-padding-start: 9px; margin: 0; */ -moz-user-select: none; } /* *|*.category-icon { width: 24px; height: 24px; } */ /* header */ *|*.header { /* -moz-margin-end: 4px; / add the 4px end-margin of other elements / border-bottom: 1px solid #A09090; margin-bottom: 15px; padding-bottom: 15px; */ } *|*.header-name { font-size: 2.5rem; font-weight: normal; line-height: 40px; margin: 0; -moz-user-select: none; } /* File fields */ /* xul|filefield { -moz-appearance: none; background-color: transparent; border: none; padding: 0; } xul|*.fileFieldContentBox { background-color: transparent; } xul|*.fileFieldIcon { -moz-margin-start: 10px; -moz-margin-end: 0; } xul|*.fileFieldLabel { -moz-margin-start: -26px; -moz-padding-start: 36px; } xul|textbox:-moz-locale-dir(rtl), xul|*.fileFieldLabel:-moz-locale-dir(rtl), xul|textbox + xul|button:-moz-locale-dir(ltr), xul|filefield + xul|button:-moz-locale-dir(ltr) { border-top-left-radius: 0; border-bottom-left-radius: 0; } xul|textbox:-moz-locale-dir(ltr), xul|*.fileFieldLabel:-moz-locale-dir(ltr), xul|textbox + xul|button:-moz-locale-dir(rtl), xul|filefield + xul|button:-moz-locale-dir(rtl) { border-top-right-radius: 0; border-bottom-right-radius: 0; } xul|textbox + xul|button, xul|filefield + xul|button { -moz-border-start: none; } */ /* List boxes */ /* xul|richlistbox, xul|listbox { -moz-appearance: none; -moz-margin-start: 0; background-color: #fff; border: 1px solid #c1c1c1; color: #333; } xul|treechildren::-moz-tree-row, xul|listbox xul|listitem { padding: 0.3em; margin: 0; border: none; border-radius: 0; background-image: none; } xul|treechildren::-moz-tree-row(hover), xul|listbox xul|listitem:hover { background-color: rgba(0,149,221,0.25); } xul|treechildren::-moz-tree-row(selected), xul|listbox xul|listitem[selected="true"] { background-color: #0095dd; color: #fff; } / This is the only way to increase the height of a tree row unfortunately / xul|treechildren::-moz-tree-row { min-height: 2em; } / Color needs to be set on tree cell in order to be applied / xul|treechildren::-moz-tree-cell-text { color: #333; } xul|treechildren::-moz-tree-cell-text(selected) { color: #fff; } */ /* Trees */ /* xul|tree { -moz-appearance: none; font-size: 1em; border: 1px solid #c1c1c1; margin: 0; } xul|tree:-moz-focusring, xul|richlistbox:-moz-focusring { border: 1px dotted #0095dd; } xul|listheader, xul|treecols { -moz-appearance: none; border: none; border-bottom: 1px solid #c1c1c1; padding: 0; } xul|treecol:not([hideheader="true"]), xul|treecolpicker { -moz-appearance: none; border: none; background-color: #ebebeb; color: #808080; padding: 5px 10px; } xul|treecol:not([hideheader="true"]):not([sortable="false"]):hover, xul|treecolpicker:hover { background-color: #dadada; color: #333; } xul|treecol:not([hideheader="true"]):not(:first-child), xul|treecolpicker { -moz-border-start-width: 1px; -moz-border-start-style: solid; border-image: linear-gradient(transparent 0%, transparent 20%, #c1c1c1 20%, #c1c1c1 80%, transparent 80%, transparent 100%) 1 1; } xul|treecol:not([hideheader="true"]) > xul|*.treecol-sortdirection[sortDirection] { list-style-image: url("chrome://global/skin/in-content/dropdown.svg#dropdown"); width: 18px; height: 18px; } xul|treecol:not([hideheader="true"]) > xul|*.treecol-sortdirection[sortDirection="ascending"] { transform: scaleY(-1); } */ /* === END common.inc.css === */ /* xul|caption { background-color: transparent; } xul|button, html|button, xul|colorpicker[type="button"], xul|menulist { margin: 2px 4px; } xul|menulist:not([editable="true"]) > xul|*.menulist-dropmarker { margin-top: 1px; margin-bottom: 1px; } xul|checkbox { -moz-padding-start: 0; } xul|radio { -moz-binding: url("chrome://global/content/bindings/radio.xml#radio"); -moz-padding-start: 0; } xul|*.radio-icon, xul|*.checkbox-icon { -moz-margin-end: 0; } */ html|a:-moz-focusring, .text-link:-moz-focusring, .inline-link:-moz-focusring { /* Don't specify the outline-color, we should always use initial value. */ outline: 1px dotted; }