From f36031bd6c6a251a541cdf42956f5199adcd9cb8 Mon Sep 17 00:00:00 2001 From: Robert Kaiser Date: Mon, 13 Jun 2016 02:38:18 +0200 Subject: [PATCH] fix some parsing errors etc. and make new HTML-based buttons with ::before work in devtools toolbar --- LCARStrek/browser/browser.css | 6 +-- .../browser/customizableui/panelUIOverlay.css | 2 +- LCARStrek/devtools/dark-theme.css | 50 ++++++++++++++++--- LCARStrek/devtools/fonts.css | 9 +++- LCARStrek/devtools/layout.css | 12 ++--- LCARStrek/devtools/widgets.css | 2 +- LCARStrek/global/checkbox.css | 2 +- LCARStrek/global/listbox.css | 4 +- 8 files changed, 64 insertions(+), 23 deletions(-) diff --git a/LCARStrek/browser/browser.css b/LCARStrek/browser/browser.css index a987a6c3..109c9220 100644 --- a/LCARStrek/browser/browser.css +++ b/LCARStrek/browser/browser.css @@ -2013,7 +2013,7 @@ html|*.urlbar-input:-moz-lwtheme::-moz-placeholder, /* identity box */ #identity-box.verifiedIdentity:not(:-moz-lwtheme):not(:hover):not([open=true]) { - var(--identity-box-verified-background-color); + background-color: var(--identity-box-verified-background-color); } #identity-box:-moz-focusring { @@ -2060,7 +2060,7 @@ html|*.urlbar-input:-moz-lwtheme::-moz-placeholder, /* Default theme does different color per channel, we can't as they do it build-time. */ --identity-box-chrome-color: #9C9CFF; - border-inline-end: 1px solid --urlbar-separator-color); + border-inline-end: 1px solid var(--urlbar-separator-color); font-size: .9em; border-radius: 2px; padding: 3px 5px; @@ -3987,7 +3987,7 @@ html|*#fullscreen-domain { html|*#fullscreen-exit-button { padding: 5px 30px; - font: "Liberation Sans",Arial,Tahoma,Helvetica,sans-serif; + font-family: "Liberation Sans",Arial,Tahoma,Helvetica,sans-serif; font-size: 14px; font-weight: lighter; margin: 0; diff --git a/LCARStrek/browser/customizableui/panelUIOverlay.css b/LCARStrek/browser/customizableui/panelUIOverlay.css index 265adf84..1fab05f3 100644 --- a/LCARStrek/browser/customizableui/panelUIOverlay.css +++ b/LCARStrek/browser/customizableui/panelUIOverlay.css @@ -1527,7 +1527,7 @@ toolbarbutton.social-provider-menuitem > .toolbarbutton-icon { } menu.subviewbutton > .menu-right { - list-style-image: url("chrome://global/skin/menu/menu-arrow.svg#arrow); + list-style-image: url("chrome://global/skin/menu/menu-arrow.svg#arrow"); /* Reset the rect we inherit from the button: */ -moz-image-region: auto; } diff --git a/LCARStrek/devtools/dark-theme.css b/LCARStrek/devtools/dark-theme.css index e99970d9..956270f7 100644 --- a/LCARStrek/devtools/dark-theme.css +++ b/LCARStrek/devtools/dark-theme.css @@ -16,7 +16,7 @@ --theme-contrast-border: #A09090; --theme-contrast-background2: #795900; -/* --theme-tab-toolbar-background: #.252c33; */ + --theme-tab-toolbar-background: #402800; --theme-toolbar-background: #000000; --theme-hover-background: #FFCF00; --theme-hover-color: #000000; @@ -621,9 +621,9 @@ div.CodeMirror span.eval-text { border: 0 solid var(--theme-splitter-color); background: var(--theme-toolbar-background); color: var(--theme-body-color); - margin: 0; - padding: 0; - min-width: 32px; + margin: 0 1px; + padding: 0 6px; + min-width: 16px; min-height: 18px; /* The icon is absolutely positioned in the button using ::before */ position: relative; @@ -815,6 +815,10 @@ div.CodeMirror span.eval-text { display: none; } +#toolbox-close::before { + background-image: url("chrome://devtools/skin/close@2x.png"); +} + /* In-tools sidebar */ .devtools-sidebar-tabs { @@ -917,14 +921,17 @@ div.CodeMirror span.eval-text { background-position: -16px center; } +#toolbox-dock-bottom::before, #toolbox-dock-bottom > image { background-image: url("chrome://devtools/skin/dock-bottom@2x.png"); } +#toolbox-dock-side::before, #toolbox-dock-side > image { background-image: url("chrome://devtools/skin/dock-side@2x.png"); } +#toolbox-dock-window::before, #toolbox-dock-window > image { background-image: url("chrome://devtools/skin/undock@2x.png"); } @@ -965,6 +972,7 @@ div.CodeMirror span.eval-text { #toolbox-controls-separator { margin: 0; + width: 1px; } /* Command buttons */ @@ -979,6 +987,9 @@ div.CodeMirror span.eval-text { .command-button:hover:active { } +#toolbox-close::before, +.toolbox-dock-button::before, +.command-button::before, .command-button > image { width: 16px; height: 16px; @@ -987,6 +998,14 @@ div.CodeMirror span.eval-text { background-repeat: no-repeat; } +#toolbox-close:hover::before, +#toolbox-close:hover:active::before, +.toolbox-dock-button:hover::before, +.toolbox-dock-button:hover:active::before, +.command-button:hover::before, +.command-button:hover:active::before, +.command-button[checked=true]::before, +.command-button[open=true]::before, .command-button:hover > image, .command-button:hover:active > image, .command-button[checked=true] > image, @@ -994,46 +1013,57 @@ div.CodeMirror span.eval-text { background-position: -16px center; } +#command-button-paintflashing::before, #command-button-paintflashing > image { background-image: url("chrome://devtools/skin/command-paintflashing.png"); } +#command-button-screenshot::before, #command-button-screenshot > image { background-image: url("chrome://devtools/skin/command-screenshot.png"); } +#command-button-responsive::before, #command-button-responsive > image { background-image: url("chrome://devtools/skin/command-responsivemode.png"); } +#command-button-tilt::before, #command-button-tilt > image { background-image: url("chrome://devtools/skin/command-tilt.png"); } +#command-button-scratchpad::before, #command-button-scratchpad > image { background-image: url("chrome://devtools/skin/command-scratchpad.png"); } +#command-button-pick::before, #command-button-pick > image { background-image: url("chrome://devtools/skin/command-pick.png"); } +#command-button-frames::before, #command-button-frames > image { background-image: url("chrome://devtools/skin/command-frames.png"); } +#command-button-splitconsole::before, #command-button-splitconsole > image { background-image: url("chrome://devtools/skin/command-console.png"); } +#command-button-eyedropper::before, #command-button-eyedropper > image { background-image: url("chrome://devtools/skin/command-eyedropper.png"); } +#command-button-rulers::before, #command-button-rulers > image { background-image: url("chrome://devtools/skin/command-rulers.png"); } +#command-button-measure::before, #command-button-measure > image { background-image: url("chrome://devtools/skin/images/command-measure.png"); } @@ -1090,8 +1120,9 @@ div.CodeMirror span.eval-text { } #toolbox-tabs { - margin: 0 2px; - -moz-padding-start: 3px; + padding-inline-start: 3px; + margin-inline-start: 2px; /* this is only needed for the old button design */ + margin-inline-end: 3px; /* this is for the new ::before-based button design */ background-color: #000000; color: #FFCF00; } @@ -1154,9 +1185,14 @@ div.CodeMirror span.eval-text { -moz-margin-start: 0; } +#toolbox-picker-container { + margin-inline-start: 1px; +} + #toolbox-option-container { background-color: #000000; - -moz-padding-start: 3px; + padding-inline-start: 3px; + margin-inline-end: 1px; } #toolbox-tab-options { diff --git a/LCARStrek/devtools/fonts.css b/LCARStrek/devtools/fonts.css index 7d469d44..1b20a595 100644 --- a/LCARStrek/devtools/fonts.css +++ b/LCARStrek/devtools/fonts.css @@ -2,6 +2,11 @@ * 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/. */ +:root { + --fonts-button-text: #000000; + --fonts-button-background: #C09070; +} + #sidebar-panel-fontinspector { margin: 0; display: flex; @@ -32,8 +37,8 @@ #font-showall { border-radius: 300px; border: none; - background-color: var(--in-content-button-background); - color: var(--in-content-selected-text); + background-color: var(--fonts-button-background); + color: var(--fonts-selected-text); margin: 3px; cursor: pointer; position: fixed; diff --git a/LCARStrek/devtools/layout.css b/LCARStrek/devtools/layout.css index ab95a05d..a91259d7 100644 --- a/LCARStrek/devtools/layout.css +++ b/LCARStrek/devtools/layout.css @@ -32,8 +32,8 @@ body.theme-sidebar, vertical-align: top; } -#header:dir(rtl), -#layout-header:dir(rtl) { +#header:-moz-dir(rtl), +#layout-header:-moz-dir(rtl) { -moz-box-direction: reverse; } @@ -47,8 +47,8 @@ body.theme-sidebar, -moz-box-flex: 1; } -#element-size:dir(rtl), -#layout-element-size:dir(rtl) { +#element-size:-moz-dir(rtl), +#layout-element-size:-moz-dir(rtl) { -moz-box-pack: end; } @@ -97,10 +97,10 @@ body.theme-sidebar, #layout-margins, #layout-borders, #layout-padding { - border-color: var(-theme-splitter-color); + border-color: var(--theme-splitter-color); border-width: 25px; border-style: solid; - outline: dotted 1px var(-theme-splitter-color); + outline: dotted 1px var(--theme-splitter-color); } #margins, diff --git a/LCARStrek/devtools/widgets.css b/LCARStrek/devtools/widgets.css index 90532c8b..39ac4797 100644 --- a/LCARStrek/devtools/widgets.css +++ b/LCARStrek/devtools/widgets.css @@ -555,7 +555,7 @@ } .variable-or-property[overridden] { - background: rgba(160,144,144,0.0.5); + background: rgba(160,144,144,0.5); } .variable-or-property[overridden] .title > label { diff --git a/LCARStrek/global/checkbox.css b/LCARStrek/global/checkbox.css index 3a60c41c..841ebf62 100644 --- a/LCARStrek/global/checkbox.css +++ b/LCARStrek/global/checkbox.css @@ -102,7 +102,7 @@ checkbox[checked="true"]:hover:active > .checkbox-spacer-box > .checkbox-check { } checkbox[checked="true"][disabled="true"] .checkbox-check, -checkbox[checked="true"][disabled="true"] > .checkbox-spacer-box > > .checkbox-check { +checkbox[checked="true"][disabled="true"] > .checkbox-spacer-box > .checkbox-check { background-image: url("chrome://global/skin/checkbox/cbox-check-disabled.gif") !important; } diff --git a/LCARStrek/global/listbox.css b/LCARStrek/global/listbox.css index cbdf3133..5bc4be85 100644 --- a/LCARStrek/global/listbox.css +++ b/LCARStrek/global/listbox.css @@ -60,8 +60,8 @@ listbox:focus > listitem[selected="true"] { listheader { -moz-box-align: center; border: 1px solid #FF9F00; - border-left-top-radius: 3px; - border-right-top-radius: 3px; + border-top-left-radius: 3px; + border-top-right-radius: 3px; background-color: #9C9CFF; color: #000000; padding: 0; -- 2.43.0