X-Git-Url: https://git-public.kairo.at/?p=themes.git;a=blobdiff_plain;f=LCARStrek%2Fglobal%2Fin-content%2Fcommon.css;h=2b6ef8a3118142bfafadbc09544e50af53c1e3fb;hp=9a2975f64ee72fb0da3beb38a761db6d163d2f0f;hb=a9f6369d5cebd3c329b993d57e73bcf30fffd2cd;hpb=ed351b9114c8a9d94d604e671f92cc19a2900b68 diff --git a/LCARStrek/global/in-content/common.css b/LCARStrek/global/in-content/common.css index 9a2975f6..2b6ef8a3 100644 --- a/LCARStrek/global/in-content/common.css +++ b/LCARStrek/global/in-content/common.css @@ -12,7 +12,7 @@ --in-content-page-background: #000000; --in-content-text-color: #FF9F00; --in-content-selected-text: #000000; - ---in-content-header-border-color: #c8c8c8; + --in-content-header-border-color: #A09090; --in-content-button-background: #C09070; --in-content-box-background: #000000; ---in-content-box-background-odd: #f3f6fa; @@ -43,12 +43,31 @@ --in-content-primary-button-background-active: #FF9F00; --in-content-table-border-dark-color: #9C9CFF; --in-content-table-header-background: #A09090; - ---in-content-help-button-background: #ffcb00; - ---in-content-help-button-background-hover: #f4c200; - ---in-content-help-button-background-active: #eaba00; --in-content-disabled-text: #8050B0; } -html|body, + +@-moz-document url("about:privatebrowsing") { + #bar { + background-color: #6000CF !important; + color: #FFCF00 !important; + } + + #tpEnabled { + background-color: #008484 !important; + color: #000000 !important; + } + + #tpDisabled { + background-color: #FF0000 !important; + color: #000000 !important; + } + + #trackingProtectionSection { + border-color: #A09090 !important; + } +} + +html|html, xul|page, xul|window { font: 11px "Liberation Sans",Arial,Tahoma,Helvetica,sans-serif; @@ -80,6 +99,11 @@ html|hr { xul|caption { } +html|h2, +xul|caption > xul|checkbox, +xul|caption > xul|label { +} + xul|caption > xul|checkbox, xul|caption > xul|label { margin-top: 0; @@ -88,9 +112,9 @@ xul|caption > xul|label { *|*.main-content { padding-top: 40px; - -moz-padding-end: 48px; /* orig is 44px to compensate the 4px margin of child elements */ + padding-inline-end: 48px; /* orig is 44px to compensate the 4px margin of child elements */ padding-bottom: 48px; - -moz-padding-start: 48px; + padding-inline-start: 48px; overflow: auto; } @@ -104,16 +128,16 @@ xul|groupbox { -moz-appearance: none; border: none; margin: 15px 0 0; - -moz-padding-start: 0; - -moz-padding-end: 0; + padding-inline-start: 0; + padding-inline-end: 0; font-size: 1.25rem; } -xul|groupbox xul|label, +xul|groupbox xul|label:not(.menu-accel):not(.menu-text):not(.indent):not(.learnMore), xul|groupbox xul|description { / !important needed to override toolkit !important rule / - -moz-margin-start: 0 !important; - -moz-margin-end: 0 !important; + margin-inline-start: 0 !important; + margin-inline-end: 0 !important; } */ /* tabpanels and tabs */ @@ -148,6 +172,8 @@ xul|tab { 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; } @@ -180,10 +206,11 @@ html|button { /* xul buttons and menulists */ /* *|button, +html|select, xul|colorpicker[type="button"], xul|menulist { -moz-appearance: none; - height: 30px; + min-height: 30px; color: var(--in-content-text-color); border: 1px solid var(--in-content-box-border-color); -moz-border-top-colors: none !important; @@ -195,6 +222,7 @@ xul|menulist { } */ html|button:enabled:hover, +html|select:enabled:hover, xul|button:not([disabled="true"]):hover, xul|colorpicker[type="button"]:not([disabled="true"]):hover, xul|menulist:not([disabled="true"]):hover { @@ -203,6 +231,7 @@ xul|menulist:not([disabled="true"]):hover { } html|button:enabled:hover:active, +html|select: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"]) { @@ -211,10 +240,10 @@ xul|menulist[open="true"]:not([disabled="true"]) { } html|button:disabled, +html|select:disabled, xul|button[disabled="true"], xul|colorpicker[type="button"][disabled="true"], xul|menulist[disabled="true"] { - cursor: not-allowed; background-color: var(--in-content-box-background-disabled); color: var(--in-content-selected-text); } @@ -245,13 +274,13 @@ xul|menulist > xul|*.menulist-label-box { } xul|menulist > xul|*.menulist-label-box > xul|*.menulist-icon[src] { - -moz-margin-end: 5px; + margin-inline-end: 5px; } xul|button[type="menu"] > xul|*.button-box > xul|*.button-menu-dropmarker { -moz-appearance: none; margin: 1px 0; - -moz-margin-start: 10px; + margin-inline-start: 10px; padding: 0; width: 10px; height: 16px; @@ -263,10 +292,9 @@ xul|button[type="menu"] > xul|*.button-box > xul|*.button-menu-dropmarker { */ xul|*.help-button { /* - min-width: 30px; - border-radius: 2px; + min-width: 16px; + margin-inline-end: 0; border-width: 0; - background-color: #ffcb00; background-image: none; box-shadow: none; */ @@ -274,13 +302,16 @@ xul|*.help-button { } /* xul|*.help-button:not([disabled="true"]):hover { - background-color: #f4c200; background-image: none; + / Override default button background / + background-color: transparent; + list-style-image: url("chrome://global/skin/in-content/help-glyph.svg#help-hover"); } - xul|*.help-button:not([disabled="true"]):hover:active { - background-color: #eaba00; background-image: none; + / Override default button background / + background-color: transparent; + list-style-image: url("chrome://global/skin/in-content/help-glyph.svg#help-pressed"); } xul|*.close-icon > xul|*.button-box, @@ -292,17 +323,38 @@ xul|*.help-button > xul|*.button-box { } */ xul|*.help-button > xul|*.button-box > xul|*.button-icon { - width: 18px; - height: 18px; + width: 16px; + height: 16px; } xul|*.help-button > xul|*.button-box > xul|*.button-text { display: none; } + +html|*.help-button { + width: 16px; + height: 16px; + border: 0; + padding: 0; + display: inline-block; + background-image: url("chrome://global/skin/in-content/help-glyph.svg#help"); + background-repeat: no-repeat; + background-position: center center; + background-size: contain; +} + +html|*.help-button:hover { + background-image: url("chrome://global/skin/in-content/help-glyph.svg#help-hover"); +} + +html|*.help-button:hover:active { + background-image: url("chrome://global/skin/in-content/help-glyph.svg#help-pressed"); +} /* xul|*.spinbuttons-button { - -moz-margin-start: 10px !important; - -moz-margin-end: 2px !important; + min-height: initial; + margin-inline-start: 10px !important; + margin-inline-end: 2px !important; } xul|*.spinbuttons-up { @@ -337,7 +389,7 @@ xul|*.spinbuttons-down[disabled="true"] > xul|*.button-box > xul|*.button-icon { xul|menulist:not([editable="true"]) > xul|*.menulist-dropmarker { -moz-appearance: none; - -moz-margin-end: 4px; + margin-inline-end: 4px; padding: 0; border: none; background-color: transparent; @@ -370,8 +422,8 @@ xul|button[type="menu"] > xul|menupopup xul|menuitem { color: var(--in-content-text-color); padding-top: 0.2em; padding-bottom: 0.2em; - -moz-padding-start: 10px; - -moz-padding-end: 30px; + padding-inline-start: 10px; + padding-inline-end: 30px; } xul|menulist > xul|menupopup > xul|menu:not([disabled="true"])[_moz-menuactive="true"], @@ -411,13 +463,11 @@ xul|button[type="menu"] > xul|menupopup xul|menuseparator { */ /* textboxes */ /* -*|textbox { +html|input[type="text"], +html|textarea, +xul|textbox { -moz-appearance: none; - height: 30px; color: var(--in-content-text-color); - line-height: 20px; - padding-right: 10px; - padding-left: 10px; border: 1px solid var(--in-content-box-border-color); -moz-border-top-colors: none !important; -moz-border-right-colors: none !important; @@ -427,12 +477,35 @@ xul|button[type="menu"] > xul|menupopup xul|menuseparator { background-color: var(--in-content-box-background); } -html|textbox:focus, +xul|textbox { + min-height: 30px; + padding-right: 10px; + padding-left: 10px; +} + +/ Create a separate rule to unset these styles on .tree-input instead of + using :not(.tree-input) so the selector specifity doesn't change. / +xul|textbox.tree-input { + min-height: unset; + padding-right: unset; + padding-left: unset; +} + +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: var(--in-content-border-focus); } -html|textbox:disabled, +html|input[type="text"]:disabled, +html|textarea:disabled, xul|textbox[disabled="true"] { opacity: 0.5; } @@ -440,15 +513,13 @@ xul|textbox[disabled="true"] { /* Links */ html|a, -.text-link, -.inline-link { +.text-link { color: var(--in-content-link-color); text-decoration: none; } html|a:hover, -.text-link:hover, -.inline-link:hover { +.text-link:hover { color: var(--in-content-link-color-hover); text-decoration: underline; } @@ -458,8 +529,7 @@ html|a:visited { } html|a:hover:active, -.text-link:hover:active, -.inline-link:hover:active { +.text-link:hover:active { color: var(--in-content-link-color-active); text-decoration: underline; } @@ -468,11 +538,13 @@ html|a:hover:active, /* Hide the actual checkbox */ html|input[type="checkbox"] { opacity: 0; + width: 0; + pointer-events: none; position: absolute; } /* Create a box to style as the checkbox */ -html|input[type="checkbox"] + html|label:before { +html|input[type="checkbox"] + html|label::before { display: inline-block; content: ""; vertical-align: middle; @@ -483,24 +555,24 @@ html|input[type="checkbox"] + html|label { } /* xul|checkbox { - -moz-margin-start: 0; + margin-inline-start: 0; } */ /* xul|*.checkbox-check, */ -html|input[type="checkbox"] + html|label:before { +html|input[type="checkbox"] + html|label::before { -moz-appearance: none; width: 23px; height: 23px; border-radius: 0; border: 1px solid var(--in-content-box-border-color); - -moz-margin-end: 10px; + margin-inline-end: 10px; background-color: var(--in-content-box-background); background-position: center center; background-repeat: no-repeat; } /* xul|checkbox:not([disabled="true"]):hover > xul|*.checkbox-check, */ -html|input[type="checkbox"]:not(:disabled) + html|label:hover:before { +html|input[type="checkbox"]:not(:disabled) + html|label:hover::before { border-color: var(--in-content-border-focus); } html|input[type="checkbox"]:not(:disabled) + html|label:hover { @@ -513,18 +585,18 @@ xul|*.checkbox-check[checked] { linear-gradient(#fff, rgba(255,255,255,0.8)) !important; } */ -html|input[type="checkbox"]:checked + html|label:before { +html|input[type="checkbox"]:checked + html|label::before { background-image: url("chrome://global/skin/in-content/check.svg#check"); } /*xul|checkbox[checked][disabled="true"] > xul|*.checkbox-check,*/ -html|input[type="checkbox"]:checked:disabled + html|label:before { +html|input[type="checkbox"]:checked:disabled + html|label::before { background-image: url("chrome://global/skin/in-content/check.svg#check-disabled"); } -html|input[type="checkbox"]:not(:disabled) + html|label:hover:before { +html|input[type="checkbox"]:checked:not(:disabled) + html|label:hover::before { background-image: url("chrome://global/skin/in-content/check.svg#check-hover"); } -html|input[type="checkbox"]:disabled + html|label:before { +html|input[type="checkbox"]:disabled + html|label::before { border-color: var(--in-content-border-disabled); } html|input[type="checkbox"]:disabled + html|label { @@ -532,16 +604,21 @@ html|input[type="checkbox"]:disabled + html|label { } /* xul|*.checkbox-label-box { - -moz-margin-start: -1px; / * negative margin for the transparent border * / - -moz-padding-start: 0; + margin-inline-start: -1px; / * negative margin for the transparent border * / + padding-inline-start: 0; } xul|richlistitem > xul|*.checkbox-check { margin: 3px 6px; } - +*/ +html|*.toggle-container-with-text { + display: flex; + align-items: center; +} +/* xul|radio { - -moz-margin-start: 0; + margin-inline-start: 0; } xul|*.radio-check { @@ -550,7 +627,7 @@ xul|*.radio-check { height: 23px; border: 1px solid var(--in-content-box-border-color); border-radius: 50%; - -moz-margin-end: 10px; + margin-inline-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); @@ -569,14 +646,14 @@ xul|radio[disabled="true"] > xul|*.radio-check { } xul|*.radio-label-box { - -moz-margin-start: -1px; / * negative margin for the transparent border * / - -moz-margin-end: 10px; - -moz-padding-start: 0; + margin-inline-start: -1px; / * negative margin for the transparent border * / + margin-inline-end: 10px; + padding-inline-start: 0; } */ /* Category List */ -xul|*#categories { +*|*#categories { background-color: var(--in-content-categorylist-background); padding-top: 4em; margin: 0; @@ -584,27 +661,28 @@ xul|*#categories { border: none; } -xul|*.category { +*|*.category { background-color: var(--in-content-category-background); color: var(--in-content-category-text); - -moz-border-end-width: 0; - -moz-padding-start: 15px; - -moz-padding-end: 21px; + border-inline-end-width: 0; + padding-inline-start: 15px; + padding-inline-end: 21px; min-height: 40px; transition: background-color 150ms; } -xul|*.category:hover { +*|*.category:hover { background-color: var(--in-content-category-background-hover); color: var(--in-content-category-text-selected); } -xul|*.category[selected] { +*|*.category[selected], +*|*.category.selected { background-color: var(--in-content-category-background-active); color: var(--in-content-category-text-selected); } -xul|*#categories[keyboard-navigation="true"]:-moz-focusring > xul|*.category[current] { +*|*#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); } @@ -613,7 +691,7 @@ xul|*#categories[keyboard-navigation="true"]:-moz-focusring > xul|*.category[cur line-height: 22px; font-size: 1.25rem; padding-bottom: 2px; - -moz-padding-start: 9px; + padding-inline-start: 9px; margin: 0; -moz-user-select: none; } @@ -626,10 +704,11 @@ xul|*#categories[keyboard-navigation="true"]:-moz-focusring > xul|*.category[cur /* header */ *|*.header { -/* -moz-margin-end: 4px; / add the 4px end-margin of other elements / +/* margin-inline-end: 4px; / add the 4px end-margin of other elements / border-bottom: 1px solid var(--in-content-header-border-color); margin-bottom: 15px; padding-bottom: 15px; */ + -moz-box-align: baseline; } *|*.header-name { @@ -654,13 +733,13 @@ xul|*.fileFieldContentBox { } xul|*.fileFieldIcon { - -moz-margin-start: 10px; - -moz-margin-end: 0; + margin-inline-start: 10px; + margin-inline-end: 0; } xul|*.fileFieldLabel { - -moz-margin-start: -26px; - -moz-padding-start: 36px; + margin-inline-start: -26px; + padding-inline-start: 36px; } xul|textbox:-moz-locale-dir(rtl), @@ -681,7 +760,7 @@ xul|filefield + xul|button:-moz-locale-dir(rtl) { xul|textbox + xul|button, xul|filefield + xul|button { - -moz-border-start: none; + border-inline-start: none; } */ /* List boxes */ @@ -689,7 +768,7 @@ xul|filefield + xul|button { xul|richlistbox, xul|listbox { -moz-appearance: none; - -moz-margin-start: 0; + margin-inline-start: 0; background-color: var(--in-content-box-background); border: 1px solid var(--in-content-box-border-color); color: var(--in-content-text-color); @@ -752,6 +831,10 @@ xul|treecols { padding: 0; } +.autocomplete-tree > xul|treecols { + border-bottom: none !important; +} + xul|treecol:not([hideheader="true"]), xul|treecolpicker { -moz-appearance: none; @@ -769,8 +852,8 @@ xul|treecolpicker:hover { xul|treecol:not([hideheader="true"]):not(:first-child), xul|treecolpicker { - -moz-border-start-width: 1px; - -moz-border-start-style: solid; + border-inline-start-width: 1px; + border-inline-start-style: solid; border-image: linear-gradient(transparent 0%, transparent 20%, #c1c1c1 20%, #c1c1c1 80%, transparent 80%, transparent 100%) 1 1; } @@ -817,21 +900,20 @@ xul|menulist:not([editable="true"]) > xul|*.menulist-dropmarker { } xul|checkbox { - -moz-padding-start: 0; + padding-inline-start: 0; } xul|radio { -moz-binding: url("chrome://global/content/bindings/radio.xml#radio"); - -moz-padding-start: 0; + padding-inline-start: 0; } xul|*.radio-icon, xul|*.checkbox-icon { - -moz-margin-end: 0; + margin-inline-end: 0; } */ -.text-link:-moz-focusring, -.inline-link:-moz-focusring { +.text-link:-moz-focusring { /* Don't specify the outline-color, we should always use initial value. */ outline: 1px dotted; }