diff options
Diffstat (limited to 'arc-firefox-theme/chrome/global/in-content/common.css')
| -rw-r--r-- | arc-firefox-theme/chrome/global/in-content/common.css | 818 |
1 files changed, 818 insertions, 0 deletions
diff --git a/arc-firefox-theme/chrome/global/in-content/common.css b/arc-firefox-theme/chrome/global/in-content/common.css new file mode 100644 index 0000000..0b02360 --- /dev/null +++ b/arc-firefox-theme/chrome/global/in-content/common.css @@ -0,0 +1,818 @@ +/* - 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/. */ + +@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: message-box; + -moz-appearance: none; + background-color: #fbfbfb; + color: #424e5a; +} + +html|body { + font-size: 15px; + font-weight: normal; + margin: 0; +} + +html|h1 { + font-size: 2.5em; + font-weight: lighter; + line-height: 1.2; + color: #333; + margin: 0; + margin-bottom: .5em; +} + +html|hr { + border-style: solid none none none; + border-color: #c1c1c1; +} + +xul|caption { + -moz-appearance: none; + margin: 0; +} + +xul|caption > xul|checkbox, +xul|caption > xul|label { + font-size: 1.3rem; + font-weight: bold; + line-height: 22px; + margin: 0 !important; +} + +*|*.main-content { + padding-top: 40px; + -moz-padding-end: 44px; /* 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, +xul|groupbox xul|description { + /* !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[selected] { + 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 { + padding: 3px; + /* 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: #ebebeb; +} + +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: #dadada; +} + +html|button:disabled, +xul|button[disabled="true"], +xul|colorpicker[type="button"][disabled="true"], +xul|menulist[disabled="true"] { + cursor: not-allowed; + opacity: 0.5; +} + +*|button.primary { + background-color: #0095dd; + border-color: transparent; + color: #fff; +} + +html|button.primary:enabled:hover, +xul|button.primary:not([disabled="true"]):hover { + background-color: #008acb; +} + +html|button.primary:enabled:hover:active, +xul|button.primary:not([disabled="true"]):hover:active { + background-color: #006b9d; +} + +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: 1em; + color: #333; + padding-top: 0.2em; + padding-bottom: 0.2em; + -moz-padding-start: 10px; + -moz-padding-end: 30px; +} + +xul|menulist > xul|menupopup > xul|menu:not([disabled="true"])[_moz-menuactive="true"], +xul|menulist > xul|menupopup > xul|menuitem:not([disabled="true"])[_moz-menuactive="true"], +xul|button[type="menu"] > xul|menupopup > xul|menu:not([disabled="true"])[_moz-menuactive="true"], +xul|button[type="menu"] > xul|menupopup > xul|menuitem:not([disabled="true"])[_moz-menuactive="true"] { + color: #333; + background-color: rgba(0,149,221,0.25); +} + +xul|menulist > xul|menupopup > xul|menu:not([disabled="true"])[selected="true"], +xul|menulist > xul|menupopup > xul|menuitem:not([disabled="true"])[selected="true"], +xul|button[type="menu"] > xul|menupopup > xul|menu:not([disabled="true"])[selected="true"], +xul|button[type="menu"] > xul|menupopup > xul|menuitem:not([disabled="true"])[selected="true"] { + color: #fff; + background-color: #0095dd; +} + +xul|menulist > xul|menupopup > xul|menu[disabled="true"], +xul|menulist > xul|menupopup > xul|menuitem[disabled="true"], +xul|button[type="menu"] > xul|menupopup > xul|menu[disabled="true"], +xul|button[type="menu"] > xul|menupopup > xul|menuitem[disabled="true"] { + color: #999; + /* override the [_moz-menuactive="true"] background color from + global/menu.css */ + background-color: transparent; +} + +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 { + color: #0095dd; + text-decoration: none; +} + +html|a:hover, +.text-link:hover, +.inline-link:hover { + color: #178ce5; + text-decoration: underline; +} + +html|a:visited { + color: #551a8b; +} + +html|a:hover:active, +.text-link:hover:active, +.inline-link:hover:active { + color: #ff9500; + text-decoration: none; +} + +/* 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] { + list-style-image: url("chrome://global/skin/in-content/check.svg#check"); +} + +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 { + border-bottom: 1px solid #c8c8c8; + -moz-margin-end: 4px; /* add the 4px end-margin of other elements */ + 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; +} + +/* 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); +} + +/* 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; +} + +xul|tab[visuallyselected] { + /* Override styles for tab[selected] from + toolkit/themes/linux/global/tabbox.css */ + margin-bottom: 0; + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; +} + +xul|button, +html|button, +xul|colorpicker[type="button"], +xul|menulist { + margin: 2px 4px; +} + +xul|button > xul|*.button-box, +xul|menulist > xul|*.menulist-label-box { + -moz-appearance: none; +} + +xul|button[type="menu"] > xul|*.button-box > xul|*.button-menu-dropmarker { + -moz-appearance: none !important; +} + +xul|*.help-button > xul|*.button-box > xul|*.button-icon { + -moz-margin-end: 0; +} + +xul|*.groupbox-body { + -moz-padding-start: 0; +} + +xul|menulist { + font-size: inherit; +} + +xul|menulist:not([editable="true"]) > xul|*.menulist-dropmarker { + display: -moz-box; + margin-top: 6px; + margin-bottom: 6px; +} + +xul|checkbox { + -moz-binding: url("chrome://global/content/bindings/checkbox.xml#checkbox"); + -moz-box-align: center; +} + +xul|*.checkbox-check { + background-image: none !important; +} + +xul|*.checkbox-check[checked] { + list-style-image: url("chrome://global/skin/in-content/check.svg#check-native"); + background-color: -moz-dialog; +} + +xul|radio { + -moz-binding: url("chrome://global/content/bindings/radio.xml#radio"); + -moz-box-align: center; +} + +xul|*.radio-check { + background-image: none; +} + +xul|*.radio-check[selected] { + list-style-image: url("chrome://global/skin/in-content/radio.svg#radio-native"); + background-color: -moz-dialog; +} + +xul|*.radio-label-box { + -moz-appearance: none; +} + +xul|*.numberbox-input-box { + -moz-appearance: none; + border-width: 0; +} + +xul|*.text-link:-moz-focusring, +xul|*.inline-link:-moz-focusring { + border: 1px dotted -moz-DialogText; +} + +xul|spinbuttons { + -moz-appearance: none; +} |