123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804 |
- @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;
- -webkit-appearance: none;
- background-color: #fbfbfb;
- color: #424e5a;
- }
- html|body {
- font-size: 18px;
- 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 {
- -webkit-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;
- -webkit-padding-end: 44px; /* compensate the 4px margin of child elements */
- padding-bottom: 48px;
- -webkit-padding-start: 48px;
- overflow: auto;
- }
- xul|prefpane > xul|*.content-box {
- overflow: visible;
- }
- /* groupboxes */
- xul|groupbox {
- -webkit-appearance: none;
- border: none;
- margin: 15px 0 0;
- -webkit-padding-start: 0;
- -webkit-padding-end: 0;
- font-size: 1.25rem;
- }
- xul|groupbox xul|label,
- xul|groupbox xul|description {
- /* !important needed to override toolkit !important rule */
- -webkit-margin-start: 0 !important;
- -webkit-margin-end: 0 !important;
- }
- /* tabpanels and tabs */
- xul|tabpanels {
- -webkit-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 {
- -webkit-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 {
- -webkit-appearance: none;
- height: 30px;
- color: #333;
- line-height: 20px;
- border: 1px solid #c1c1c1;
- -webkit-border-top-colors: none !important;
- -webkit-border-right-colors: none !important;
- -webkit-border-bottom-colors: none !important;
- -webkit-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] {
- -webkit-margin-end: 5px;
- }
- xul|button[type="menu"] > xul|*.button-box > xul|*.button-menu-dropmarker {
- -webkit-appearance: none;
- margin: 1px 0;
- -webkit-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 {
- -webkit-margin-start: 10px !important;
- -webkit-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 {
- -webkit-appearance: none;
- -webkit-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 {
- -webkit-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 {
- -webkit-appearance: none;
- font-size: 1em;
- color: #333;
- padding-top: 0.2em;
- padding-bottom: 0.2em;
- -webkit-padding-start: 10px;
- -webkit-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 {
- -webkit-appearance: none;
- margin: 0;
- padding: 0;
- border-top: 1px solid #c1c1c1;
- border-bottom: none;
- }
- /* textboxes */
- *|textbox {
- -webkit-appearance: none;
- height: 30px;
- color: #333;
- line-height: 20px;
- padding-right: 10px;
- padding-left: 10px;
- border: 1px solid #c1c1c1;
- -webkit-border-top-colors: none !important;
- -webkit-border-right-colors: none !important;
- -webkit-border-bottom-colors: none !important;
- -webkit-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 {
- -webkit-margin-start: 0;
- }
- xul|*.checkbox-check,
- html|input[type="checkbox"] + html|label:before {
- -webkit-appearance: none;
- width: 23px;
- height: 23px;
- border-radius: 2px;
- border: 1px solid #c1c1c1;
- -webkit-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 {
- -webkit-margin-start: -1px; /* negative margin for the transparent border */
- -webkit-padding-start: 0;
- }
- xul|richlistitem > xul|*.checkbox-check {
- margin: 3px 6px;
- }
- xul|radio {
- -webkit-margin-start: 0;
- }
- xul|*.radio-check {
- -webkit-appearance: none;
- width: 23px;
- height: 23px;
- border: 1px solid #c1c1c1;
- border-radius: 50%;
- -webkit-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 {
- -webkit-margin-start: -1px; /* negative margin for the transparent border */
- -webkit-margin-end: 10px;
- -webkit-padding-start: 0;
- }
- /* Category List */
- xul|*#categories {
- -webkit-appearance: none;
- background-color: #424f5a;
- padding-top: 39px;
- margin: 0;
- border-width: 0;
- }
- xul|*.category {
- -webkit-appearance: none;
- color: #c1c1c1;
- -webkit-border-end-width: 0;
- -webkit-padding-start: 15px;
- -webkit-padding-end: 21px;
- min-height: 40px;
- transition: background-color 150ms;
- }
- xul|*.category:hover {
- background-color: #5e6972;
- }
- xul|*.category[selected] {
- background-color: #343f48;
- color: #f2f2f2;
- -webkit-padding-start: 11px; /* compensate the 4px border */
- -webkit-border-start: solid 4px #ff9500;
- }
- xul|*#categories[keyboard-navigation="true"]:-webkit-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;
- -webkit-padding-start: 9px;
- margin: 0;
- -webkit-user-select: none;
- }
- *|*.category-icon {
- width: 24px;
- height: 24px;
- }
- /* header */
- *|*.header {
- border-bottom: 1px solid #c8c8c8;
- -webkit-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;
- -webkit-user-select: none;
- }
- /* File fields */
- xul|filefield {
- -webkit-appearance: none;
- background-color: transparent;
- border: none;
- padding: 0;
- }
- xul|*.fileFieldContentBox {
- background-color: transparent;
- }
- xul|*.fileFieldIcon {
- -webkit-margin-start: 10px;
- -webkit-margin-end: 0;
- }
- xul|*.fileFieldLabel {
- -webkit-margin-start: -26px;
- -webkit-padding-start: 36px;
- }
- xul|textbox:-webkit-locale-dir(rtl),
- xul|*.fileFieldLabel:-webkit-locale-dir(rtl),
- xul|textbox + xul|button:-webkit-locale-dir(ltr),
- xul|filefield + xul|button:-webkit-locale-dir(ltr) {
- border-top-left-radius: 0;
- border-bottom-left-radius: 0;
- }
- xul|textbox:-webkit-locale-dir(ltr),
- xul|*.fileFieldLabel:-webkit-locale-dir(ltr),
- xul|textbox + xul|button:-webkit-locale-dir(rtl),
- xul|filefield + xul|button:-webkit-locale-dir(rtl) {
- border-top-right-radius: 0;
- border-bottom-right-radius: 0;
- }
- xul|textbox + xul|button,
- xul|filefield + xul|button {
- -webkit-border-start: none;
- }
- /* List boxes */
- xul|richlistbox,
- xul|listbox {
- -webkit-appearance: none;
- -webkit-margin-start: 0;
- background-color: #fff;
- border: 1px solid #c1c1c1;
- color: #333;
- }
- xul|treechildren::-webkit-tree-row,
- xul|listbox xul|listitem {
- padding: 0.3em;
- margin: 0;
- border: none;
- border-radius: 0;
- background-image: none;
- }
- xul|treechildren::-webkit-tree-row(hover),
- xul|listbox xul|listitem:hover {
- background-color: rgba(0,149,221,0.25);
- }
- xul|treechildren::-webkit-tree-row(selected),
- xul|listbox xul|listitem[selected="true"] {
- background-color: #0095dd;
- color: #fff;
- }
- /* Trees */
- xul|tree {
- -webkit-appearance: none;
- font-size: 1em;
- border: 1px solid #c1c1c1;
- margin: 0;
- }
- xul|tree:-webkit-focusring,
- xul|richlistbox:-webkit-focusring {
- border: 1px dotted #0095dd;
- }
- xul|listheader,
- xul|treecols {
- -webkit-appearance: none;
- border: none;
- border-bottom: 1px solid #c1c1c1;
- padding: 0;
- }
- xul|treecol:not([hideheader="true"]),
- xul|treecolpicker {
- -webkit-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 {
- -webkit-border-start-width: 1px;
- -webkit-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::-webkit-tree-row {
- min-height: 2em;
- }
- /* Color needs to be set on tree cell in order to be applied */
- xul|treechildren::-webkit-tree-cell-text {
- color: #333;
- }
- xul|treechildren::-webkit-tree-cell-text(selected) {
- color: #fff;
- }
- 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 {
- -webkit-padding-start: 0;
- }
- @media not all and (-webkit-windows-default-theme) {
- 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: -webkit-dialog;
- }
- }
- xul|radio {
- -webkit-binding: url("chrome://global/content/bindings/radio.xml#radio");
- -webkit-padding-start: 0;
- }
- @media not all and (-webkit-windows-default-theme) {
- 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: -webkit-dialog;
- }
- }
- xul|*.radio-icon,
- xul|*.checkbox-icon {
- -webkit-margin-end: 0;
- }
- /* Never draw a border for the focusring, use outline instead */
- xul|*.button-box,
- xul|*.menulist-label-box,
- xul|*.radio-label-box,
- xul|*.checkbox-label-box {
- border-style: none;
- }
- xul|*.inline-link:-webkit-focusring,
- xul|button:-webkit-focusring > xul|*.button-box,
- xul|menulist:-webkit-focusring > xul|*.menulist-label-box,
- xul|radio[focused="true"] > xul|*.radio-label-box,
- xul|checkbox:-webkit-focusring > xul|*.checkbox-label-box {
- outline: 1px dotted;
- }
- /* Use a 2px border so that selected row highlight is still visible behind
- an existing high-contrast border that uses the background color */
- @media not all and (-webkit-windows-default-theme) {
- xul|treechildren::-webkit-tree-row(selected),
- xul|listbox xul|listitem[selected="true"] {
- border: 2px dotted Highlight;
- }
- }
|