X-Git-Url: https://git-public.kairo.at/?p=themes.git;a=blobdiff_plain;f=EarlyBlue%2Fglobal%2Fin-content%2Fcommon.css;h=5bdb0b7776b4a9ebceb577ff491f68b426ba0fca;hp=b3777733edc7f4cb34d5824828752751bbc1da34;hb=d471380e99d65fcd126e0f04b94c1d3a8004cf3d;hpb=21c0144b2194f018832e93a3b6e112d3bd4852cb diff --git a/EarlyBlue/global/in-content/common.css b/EarlyBlue/global/in-content/common.css index b3777733..5bdb0b77 100644 --- a/EarlyBlue/global/in-content/common.css +++ b/EarlyBlue/global/in-content/common.css @@ -7,12 +7,51 @@ @namespace html "http://www.w3.org/1999/xhtml"; @namespace xul "http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"; -html|body, -xul|page { +*|*:root { + --in-content-page-color: #000000; + --in-content-page-background: #CCD0DD; + --in-content-text-color: #000000; + --in-content-selected-text: #000000; + ---in-content-header-border-color: #c8c8c8; + --in-content-box-background: #CCD0DD; + ---in-content-box-background-odd: #f3f6fa; + ---in-content-box-background-hover: #ebebeb; + ---in-content-box-background-active: #dadada; + --in-content-box-border-color: #CCD0DD; + ---in-content-item-hover: rgba(0,149,221,0.25); + ---in-content-item-selected: #0095dd; + --in-content-border-highlight: #33FF33; + ---in-content-border-focus: #0095dd; + --in-content-border-color: #9999CC; + --in-content-category-text: #000000; + --in-content-category-border-focus: 1px dotted #FFFFFF; + --in-content-category-text-selected: #FFFFFF; + --in-content-category-background: #666699; + --in-content-category-background-hover: #CCD0DD; + --in-content-category-background-active: #336699; + ---in-content-tab-color: #424f5a; + ---in-content-link-color: #0095dd; + ---in-content-link-color-hover: #178ce5; + ---in-content-link-color-active: #ff9500; + ---in-content-link-color-visited: #551a8b; + ---in-content-primary-button-background: #0095dd; + ---in-content-primary-button-background-hover: #008acb; + ---in-content-primary-button-background-active: #006b9d; + --in-content-table-border-dark-color: #9999CC; + --in-content-table-header-background: #666699; + ---in-content-help-button-background: #ffcb00; + ---in-content-help-button-background-hover: #f4c200; + ---in-content-help-button-background-active: #eaba00; + --in-content-disabled-text: #999999; +} + +html|html, +xul|page, +xul|window { font: 11px "Liberation Sans",Arial,Tahoma,Helvetica,sans-serif; -moz-appearance: none; - background-color: #CCD0DD; - color: #000000; + background-color: var(--in-content-page-background); + color: var(--in-content-page-color); } html|body { @@ -25,22 +64,25 @@ html|h1 { font-size: 2.5em; font-weight: lighter; line-height: 1.2; + color: var(--in-content-text-color); margin: 0; margin-bottom: .5em; } +html|hr { + border-style: solid none none none; + border-color: var(--in-content-border-color); +} + 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 */ @@ -58,15 +100,14 @@ xul|prefpane > xul|*.content-box { xul|groupbox { -moz-appearance: none; border: none; - margin-top: 15px; - margin-bottom: 15px; - -moz-margin-end: 0; + margin: 15px 0 0; -moz-padding-start: 0; -moz-padding-end: 0; font-size: 1.25rem; } -xul|groupbox xul|label { +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; @@ -86,9 +127,9 @@ xul|tabpanels { xul|tabs { margin-bottom: 15px; - border-top: 1px solid #c1c1c1; - border-bottom: 1px solid #c1c1c1; - background-color: #fbfbfb; + border-top: 1px solid var(--in-content-box-border-color); + border-bottom: 1px solid var(--in-content-box-border-color); + background-color: var(--in-content-page-background); } xul|*.tabs-left, @@ -101,20 +142,22 @@ xul|tab { margin-top: 0; padding: 4px 20px; min-height: 44px; - color: #424f5a; - background-color: #fbfbfb; + color: var(--in-content-tab-color); + background-color: var(--in-content-page-background); border-width: 0; + / !important overrides tabbox.css RTL and visuallyselected rules / + border-radius: 0 !important; transition: background-color 50ms ease 0s; } xul|tab:hover { - background-color: #ebebeb; + background-color: var(--in-content-box-background-hover); } xul|tab[selected] { - background-color: #ebebeb; + background-color: var(--in-content-box-background-hover); padding-bottom: 0; / compensate the 4px border / - border-bottom: 4px solid #ff9500; + border-bottom: 4px solid var(--in-content-border-highlight); } xul|*.tab-text { @@ -126,10 +169,10 @@ xul|*.tab-text { html|button { border-radius: 0px; - border: 1px outset #CCD0DD; - background-color: #CCD0DD; - color: #000000; - / * override forms.css * / + border: 1px outset var(--in-content-box-border-color); + background-color: var(--in-content-box-background); + color: var(--in-content-text-color); + /* override forms.css */ font: inherit; } @@ -139,16 +182,15 @@ html|button { xul|colorpicker[type="button"], xul|menulist { -moz-appearance: none; - height: 30px; - color: #333; - line-height: 20px; - border: 1px solid #c1c1c1; + min-height: 30px; + color: var(--in-content-text-color); + border: 1px solid var(--in-content-box-border-color); -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; + background-color: var(--in-content-page-background); } */ html|button:enabled:hover, @@ -161,7 +203,7 @@ 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"]) { - border: 1px inset #CCD0DD; + border: 1px inset var(--in-content-box-border-color); } html|button:disabled, @@ -169,24 +211,24 @@ xul|button[disabled="true"], xul|colorpicker[type="button"][disabled="true"], xul|menulist[disabled="true"] { cursor: not-allowed; - border: 1px outset #CCD0DD; - color: #999999; + border: 1px outset var(--in-content-box-border-color); + color: var(--in-content-disabled-text); } /* *|button.primary { - background-color: #0095dd; + background-color: var(--in-content-primary-button-background); border-color: transparent; - color: #fff; + color: var(--in-content-selected-text); } html|button.primary:enabled:hover, xul|button.primary:not([disabled="true"]):hover { - background-color: #008acb; + background-color: var(--in-content-primary-button-background-hover); } html|button.primary:enabled:hover:active, xul|button.primary:not([disabled="true"]):hover:active { - background-color: #006b9d; + background-color: var(--in-content-primary-button-background-active); } xul|colorpicker[type="button"] { @@ -200,7 +242,7 @@ xul|menulist > xul|*.menulist-label-box { padding-left: 10px !important; } -xul|menulist > xul|*.menulist-label-box > xul|*.menulist-icon { +xul|menulist > xul|*.menulist-label-box > xul|*.menulist-icon[src] { -moz-margin-end: 5px; } @@ -220,19 +262,19 @@ xul|*.help-button { min-width: 30px; border-radius: 2px; border-width: 0; - background-color: #ffcb00; + background-color: var(--in-content-help-button-background); 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-color: var(--in-content-help-button-background-hover); background-image: none; } xul|*.help-button:not([disabled="true"]):hover:active { - background-color: #eaba00; + background-color: var(--in-content-help-button-background-active); background-image: none; } @@ -254,6 +296,7 @@ xul|*.help-button > xul|*.button-box > xul|*.button-text { } xul|*.spinbuttons-button { + min-height: initial; -moz-margin-start: 10px !important; -moz-margin-end: 2px !important; } @@ -309,9 +352,9 @@ xul|menulist[disabled="true"]:not([editable="true"]) > xul|*.menulist-dropmarker xul|menulist > xul|menupopup, xul|button[type="menu"] > xul|menupopup { -moz-appearance: none; - border: 1px solid #c1c1c1; + border: 1px solid var(--in-content-box-border-color); border-radius: 2px; - background-color: #fff; + background-color: var(--in-content-box-background); } xul|menulist > xul|menupopup xul|menu, @@ -320,27 +363,37 @@ xul|button[type="menu"] > xul|menupopup xul|menu, xul|button[type="menu"] > xul|menupopup xul|menuitem { -moz-appearance: none; font-size: 1rem; - color: #333; + color: var(--in-content-text-color); 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: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: var(--in-content-text-color); + background-color: var(--in-content-item-hover); +} + +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: var(--in-content-selected-text); + background-color: var(--in-content-item-selected); } -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|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: var(--in-content-box-border-color); + / override the [_moz-menuactive="true"] background color from + global/menu.css / + background-color: transparent; } xul|menulist > xul|menupopup xul|menuseparator, @@ -348,35 +401,47 @@ xul|button[type="menu"] > xul|menupopup xul|menuseparator { -moz-appearance: none; margin: 0; padding: 0; - border-top: 1px solid #c1c1c1; + border-top: 1px solid var(--in-content-box-border-color); border-bottom: none; } */ /* textboxes */ /* -*|textbox { +html|input[type="text"], +html|textarea, +xul|textbox { -moz-appearance: none; - height: 30px; - color: #333; - line-height: 20px; - text-shadow: 0 1px 1px #fefffe; - padding-right: 10px; - padding-left: 10px; - border: 1px solid #c1c1c1; + color: var(--in-content-text-color); + border: 1px solid var(--in-content-box-border-color); -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; + background-color: var(--in-content-box-background); } -html|textbox:focus, +xul|textbox { + min-height: 30px; + padding-right: 10px; + padding-left: 10px; +} + +html|input[type="text"], +html|textarea { + font-family: inherit; + font-size: inherit; + padding: 5px 10px; +} + +html|input[type="text"]:focus, +html|textarea:focus, xul|textbox[focused] { - border-color: #0095dd; + border-color: var(--in-content-border-focus); } -html|textbox:disabled, +html|input[type="text"]:disabled, +html|textarea:disabled, xul|textbox[disabled="true"] { opacity: 0.5; } @@ -384,39 +449,60 @@ xul|textbox[disabled="true"] { /* Links */ /* html|a, -xul|*.text-link, -xul|*.inline-link { - line-height: 22px; - color: #0095dd; +.text-link, +.inline-link { + color: var(--in-content-link-color); text-decoration: none; } html|a:hover, -xul|*.text-link:hover, -xul|*.inline-link:hover { - color: #4cb1ff; +.text-link:hover, +.inline-link:hover { + color: var(--in-content-link-color-hover); text-decoration: none; } +html|a:visited { + color: var(--in-content-link-color-visited); +} + html|a:hover:active, -xul|*.text-link:hover:active, -xul|*.inline-link:hover:active { - color: #ff9500; +.text-link:hover:active, +.inline-link:hover:active { + color: var(--in-content-link-color-active); text-decoration: none; } */ /* Checkboxes and radio buttons */ /* +/ Hide the actual checkbox / +html|input[type="checkbox"] { + visibility: hidden; + 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 { +xul|*.checkbox-check, +html|input[type="checkbox"] + html|label:before { -moz-appearance: none; width: 23px; height: 23px; border-radius: 2px; - border: 1px solid #c1c1c1; + border: 1px solid var(--in-content-box-border-color); -moz-margin-end: 10px; background-color: #f1f1f1; / !important needed to override toolkit checked !important rule / @@ -426,8 +512,9 @@ xul|*.checkbox-check { 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 { - border-color: #0095dd; +xul|checkbox:not([disabled="true"]):hover > xul|*.checkbox-check, +html|input[type="checkbox"]:not(:disabled) + html|label:hover:before { + border-color: var(--in-content-border-focus); } xul|*.checkbox-check[checked] { @@ -436,7 +523,12 @@ xul|*.checkbox-check[checked] { linear-gradient(#fff, rgba(255,255,255,0.8)) !important; } -xul|checkbox[disabled="true"] > xul|*.checkbox-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; } @@ -449,11 +541,15 @@ 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: 1px solid var(--in-content-box-border-color); border-radius: 50%; -moz-margin-end: 10px; background-color: #f1f1f1; @@ -462,7 +558,7 @@ xul|*.radio-check { } xul|radio:not([disabled="true"]):hover > xul|*.radio-check { - border-color: #0095dd; + border-color: var(--in-content-border-focus); } xul|*.radio-check[selected] { @@ -480,18 +576,18 @@ xul|*.radio-label-box { } */ /* Category List */ -/* -xul|*#categories { + +*|*#categories { -moz-appearance: none; - background-color: #424f5a; + background-color: var(--in-content-category-background); padding-top: 39px; margin: 0; border-width: 0; } -xul|*.category { +*|*.category { -moz-appearance: none; - color: #c1c1c1; + color: var(--in-content-category-text); -moz-border-end-width: 0; -moz-padding-start: 15px; -moz-padding-end: 21px; @@ -499,20 +595,20 @@ xul|*.category { transition: background-color 150ms; } -xul|*.category:hover { - background-color: #5e6972; +*|*.category:hover { + background-color: var(--in-content-category-background-hover); } -xul|*.category[selected] { - background-color: #343f48; - color: #f2f2f2; - -moz-padding-start: 11px; / compensate the 4px border / - -moz-border-start: solid 4px #ff9500; +*|*.category[selected] { + background-color: var(--in-content-category-background-active); + color: var(--in-content-category-text-selected); + -moz-padding-start: 11px; /* compensate the 4px border */ + -moz-border-start: solid 4px var(--in-content-border-highlight); } -xul|*#categories[keyboard-navigation="true"]:-moz-focusring > xul|*.category[current] { - border-top: 1px #ffffff dotted; - border-bottom: 1px #ffffff dotted; +*|*#categories[keyboard-navigation="true"]:-moz-focusring > xul|*.category[current] { + border-top: var(--in-content-category-border-focus); + border-bottom: var(--in-content-category-border-focus); } *|*.category-name { @@ -521,18 +617,19 @@ xul|*#categories[keyboard-navigation="true"]:-moz-focusring > xul|*.category[cur 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 #c8c8c8; + border-bottom: 1px solid var(--in-content-header-border-color); margin-bottom: 15px; padding-bottom: 15px; } @@ -542,6 +639,7 @@ xul|*#categories[keyboard-navigation="true"]:-moz-focusring > xul|*.category[cur font-weight: normal; line-height: 40px; margin: 0; + -moz-user-select: none; } */ /* File fields */ @@ -594,9 +692,9 @@ xul|richlistbox, xul|listbox { -moz-appearance: none; -moz-margin-start: 0; - background-color: #fff; - border: 1px solid #c1c1c1; - color: #333; + background-color: var(--in-content-box-background); + border: 1px solid var(--in-content-box-border-color); + color: var(--in-content-text-color); } xul|treechildren::-moz-tree-row, @@ -610,13 +708,13 @@ xul|listbox xul|listitem { xul|treechildren::-moz-tree-row(hover), xul|listbox xul|listitem:hover { - background-color: rgba(0,149,221,0.25); + background-color: var(--in-content-item-hover); } xul|treechildren::-moz-tree-row(selected), xul|listbox xul|listitem[selected="true"] { - background-color: #0095dd; - color: #fff; + background-color: var(--in-content-item-selected); + color: var(--in-content-selected-text); } */ /* Trees */ @@ -624,14 +722,21 @@ xul|listbox xul|listitem[selected="true"] { xul|tree { -moz-appearance: none; font-size: 1em; - border: 1px solid #c1c1c1; + border: 1px solid var(--in-content-box-border-color); + background-color: var(--in-content-box-background); + margin: 0; +} + +xul|tree:-moz-focusring, +xul|richlistbox:-moz-focusring { + border: 1px dotted var(--in-content-border-focus); } xul|listheader, xul|treecols { -moz-appearance: none; border: none; - border-bottom: 1px solid #c1c1c1; + border-bottom: 1px solid var(--in-content-box-border-color); padding: 0; } @@ -639,15 +744,15 @@ xul|treecol:not([hideheader="true"]), xul|treecolpicker { -moz-appearance: none; border: none; - background-color: #ebebeb; + background-color: var(--in-content-box-background-hover); color: #808080; padding: 5px 10px; } -xul|treecol:not([hideheader="true"]):hover, +xul|treecol:not([hideheader="true"]):not([sortable="false"]):hover, xul|treecolpicker:hover { - background-color: #dadada; - color: #333; + background-color: var(--in-content-box-background-active); + color: var(--in-content-text-color); } xul|treecol:not([hideheader="true"]):not(:first-child), @@ -658,21 +763,15 @@ xul|treecolpicker { } xul|treecol:not([hideheader="true"]) > xul|*.treecol-sortdirection[sortDirection] { - list-style-image: url("chrome://global/skin/in-content/sorter.png"); - width: 12px; - height: 8px; + 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="descending"] { +xul|treecol:not([hideheader="true"]) > xul|*.treecol-sortdirection[sortDirection="ascending"] { transform: scaleY(-1); } -@media (min-resolution: 2dppx) { - xul|treecol:not([hideheader="true"]) > xul|*.treecol-sortdirection[sortDirection] { - list-style-image: url("chrome://global/skin/in-content/sorter@2x.png"); - } -} - / This is the only way to increase the height of a tree row unfortunately / xul|treechildren::-moz-tree-row { min-height: 2em; @@ -680,11 +779,11 @@ xul|treechildren::-moz-tree-row { / Color needs to be set on tree cell in order to be applied / xul|treechildren::-moz-tree-cell-text { - color: #333; + color: var(--in-content-text-color); } xul|treechildren::-moz-tree-cell-text(selected) { - color: #fff; + color: var(--in-content-selected-text); } */ /* === END common.inc.css === */ @@ -694,6 +793,7 @@ xul|caption { } xul|button, +html|button, xul|colorpicker[type="button"], xul|menulist { margin: 2px 4px; @@ -710,7 +810,6 @@ xul|checkbox { xul|radio { -moz-binding: url("chrome://global/content/bindings/radio.xml#radio"); - -moz-margin-start: 0; -moz-padding-start: 0; } @@ -719,9 +818,8 @@ xul|*.checkbox-icon { -moz-margin-end: 0; } -html|a:-moz-focusring, -xul|*.text-link:-moz-focusring, -xul|*.inline-link:-moz-focusring { +.text-link:-moz-focusring, +.inline-link:-moz-focusring { border: 1px dotted -moz-DialogText; } */ \ No newline at end of file