diff --git a/browser/themes/shared/devtools/dark-theme.css b/browser/themes/shared/devtools/dark-theme.css index 9a7823ef89fe..1e09997fd882 100644 --- a/browser/themes/shared/devtools/dark-theme.css +++ b/browser/themes/shared/devtools/dark-theme.css @@ -384,15 +384,6 @@ div.CodeMirror span.eval-text { border-bottom: 0; } -.devtools-horizontal-splitter { - border-bottom: 1px solid var(--theme-splitter-color); -} - -.devtools-side-splitter { - -moz-border-end: 1px solid var(--theme-splitter-color); - border-color: var(--theme-splitter-color); /* Needed for responsive container at low width. */ -} - .devtools-textinput, .devtools-searchinput { background-color: rgba(24, 29, 32, 1); diff --git a/browser/themes/shared/devtools/light-theme.css b/browser/themes/shared/devtools/light-theme.css index b86db3b1da98..acb2ddd918dc 100644 --- a/browser/themes/shared/devtools/light-theme.css +++ b/browser/themes/shared/devtools/light-theme.css @@ -393,15 +393,6 @@ div.CodeMirror span.eval-text { border-bottom: 0; } -.devtools-horizontal-splitter { - border-bottom: 1px solid var(--theme-splitter-color); -} - -.devtools-side-splitter { - -moz-border-end: 1px solid var(--theme-splitter-color); - border-color: var(--theme-splitter-color); /* Needed for responsive container at low width. */ -} - .CodeMirror-hints, .CodeMirror-Tern-tooltip { box-shadow: 0 0 4px rgba(128, 128, 128, .5); diff --git a/browser/themes/shared/devtools/toolbars.inc.css b/browser/themes/shared/devtools/toolbars.inc.css index d76ad191dda4..4f9cfa01b3fa 100644 --- a/browser/themes/shared/devtools/toolbars.inc.css +++ b/browser/themes/shared/devtools/toolbars.inc.css @@ -853,3 +853,13 @@ .devtools-invisible-splitter { border-color: transparent; } + +.devtools-horizontal-splitter { + border-bottom: 1px solid var(--theme-splitter-color); +} + +.devtools-side-splitter { + -moz-border-end: 1px solid var(--theme-splitter-color); + border-color: var(--theme-splitter-color); /* Needed for responsive container at low width. */ +} + diff --git a/browser/themes/shared/devtools/widgets.inc.css b/browser/themes/shared/devtools/widgets.inc.css index 4e5dd137314e..7994046041a4 100644 --- a/browser/themes/shared/devtools/widgets.inc.css +++ b/browser/themes/shared/devtools/widgets.inc.css @@ -50,13 +50,20 @@ } .devtools-responsive-container > .devtools-side-splitter { - border-width: 0; - border-top-width: 1px; - border-top-style: solid; - margin: 0; + /* This is a normally vertical splitter, but we have turned it horizontal + due to the smaller resolution */ min-height: 3px; height: 3px; - margin-bottom: -3px; + margin-top: -3px; + + /* Reset the vertical splitter styles */ + border-width: 0; + border-bottom-width: 1px; + border-bottom-style: solid; + -moz-margin-start: 0; + width: auto; + min-width: 0; + /* In some edge case the cursor is not changed to n-resize */ cursor: n-resize; }