/* vim:set ts=2 sw=2 sts=2 et: */ /* This Source Code Form is subject to the terms of the Mozilla Public * 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 { --close-button-image: url(chrome://devtools/skin/images/close.svg); --dock-bottom-image: url(chrome://devtools/skin/images/dock-bottom.svg); --dock-side-image: url(chrome://devtools/skin/images/dock-side.svg); --dock-undock-image: url(chrome://devtools/skin/images/dock-undock.svg); --command-paintflashing-image: url(images/command-paintflashing.svg); --command-screenshot-image: url(images/command-screenshot.svg); --command-responsive-image: url(images/command-responsivemode.svg); --command-scratchpad-image: url(images/command-scratchpad.svg); --command-pick-image: url(images/command-pick.svg); --command-frames-image: url(images/command-frames.svg); --command-splitconsole-image: url(images/command-console.svg); --command-noautohide-image: url(images/command-noautohide.svg); --command-rulers-image: url(images/command-rulers.svg); --command-measure-image: url(images/command-measure.svg); } #toolbox-container { padding-top: 3px; } /* Toolbox tabbar */ .devtools-tabbar { /* -moz-appearance: none; min-height: 24px; border: 0px solid; border-bottom-width: 1px; padding: 0; background: var(--theme-tab-toolbar-background); border-bottom-color: var(--theme-splitter-color);*/ } #toolbox-tabs { margin: 0; padding-inline-start: 3px; margin-inline-start: 2px; background-color: #000000; color: #FFCF00; } /* Set flex attribute to Toolbox buttons and Picker container so, they don't overlapp with the tab bar */ #toolbox-buttons { display: flex; } #toolbox-picker-container { display: flex; } /* Toolbox tabs */ .devtools-tab { /* -moz-appearance: none; -moz-binding: url("chrome://global/content/bindings/general.xml#control-item"); -moz-box-align: center;*/ min-width: 32px; /* min-height: 24px;*/ max-width: 100px; margin: 0; margin-inline-end: 3px; padding: 1px; padding-inline-start: 3px; border-radius: 8px 8px 0 0; /* border-width: 0; border-inline-start-width: 1px;*/ -moz-box-align: center; -moz-user-focus: normal; -moz-box-flex: 1; color: var(--theme-button-color); background-color: var(--theme-button-background); } .devtools-tab:hover, .devtools-tab:hover:active { background-color: var(--theme-hover-background); color: var(--theme-hover-color); } .devtools-tab:not([selected])[highlighted] { background-color: var(--theme-highlight-pink); } .devtools-tab > image { border: none; margin: 0; /* margin-inline-start: 4px; opacity: 0.6;*/ max-height: 16px; width: 16px; /* Prevents collapse during theme switching */ } .devtools-tab > label { white-space: nowrap; /* margin: 0 4px;*/ } .devtools-tab:hover > image { /* opacity: 0.8;*/ } .devtools-tab:active > image, .devtools-tab[selected] > image { /* opacity: 1;*/ } .devtools-tab > spacer { max-width: 0; -moz-box-flex: 0; } .devtools-tabbar .devtools-tab[selected] { color: var(--theme-selection-color); background-color: var(--theme-selection-background); } #toolbox-tabs .devtools-tab[selected], #toolbox-tabs .devtools-tab[highlighted] { } #toolbox-tabs .devtools-tab[selected]:last-child, #toolbox-tabs .devtools-tab[highlighted]:last-child { } #toolbox-tabs .devtools-tab[selected] + .devtools-tab, #toolbox-tabs .devtools-tab[highlighted] + .devtools-tab { } #toolbox-tabs .devtools-tab:first-child[selected] { } #toolbox-tabs .devtools-tab:last-child { } .devtools-tab:not([highlighted]) > .highlighted-icon, .devtools-tab[selected] > .highlighted-icon, .devtools-tab:not([selected])[highlighted] > .default-icon { visibility: collapse; } /* The options tab is special - it doesn't have the same parent as the other tabs (toolbox-option-container vs toolbox-tabs) */ #toolbox-option-container .devtools-tab:not([selected]) { /* background-color: transparent;*/ } #toolbox-option-container .devtools-tab { /* border-color: transparent; border-width: 0; padding-inline-start: 1px;*/ } #toolbox-tab-options > image { /* margin: 0 8px;*/ margin-inline-end: 3px; } #toolbox-tab-options { min-width: 20px; } #toolbox-option-container { background-color: #000000; padding-inline-start: 3px; margin-inline-end: 1px; } /* Toolbox controls */ #toolbox-controls > button, #toolbox-dock-buttons > button { -moz-appearance: none; -moz-user-focus: normal; border: none; /* margin: 0 4px;*/ min-width: 18px; width: 18px; } #toolbox-close::before { background-image: var(--close-button-image); } #toolbox-dock-bottom::before { background-image: var(--dock-bottom-image); } #toolbox-dock-side::before { background-image: var(--dock-side-image); } #toolbox-dock-window::before { background-image: var(--dock-undock-image); } #toolbox-dock-bottom-minimize { /* Bug 1177463 - The minimize button is currently hidden until we agree on the UI for it, and until bug 1173849 is fixed too. */ display: none; } #toolbox-dock-bottom-minimize::before { background-image: url("chrome://devtools/skin/images/dock-bottom-minimize@2x.png"); } #toolbox-dock-bottom-minimize.minimized::before { background-image: url("chrome://devtools/skin/images/dock-bottom-maximize@2x.png"); } .devtools-separator { margin: 0 2px; width: 2px; } #toolbox-buttons:empty + .devtools-separator, .devtools-separator[invisible] { visibility: hidden; } #toolbox-controls-separator { margin: 0; } /* Command buttons */ .command-button { padding: 0; margin: 0; position: relative; -moz-user-focus: normal; } .command-button::before { /* opacity: 0.7;*/ } .command-button:hover { /* background-color: var(--toolbar-tab-hover);*/ } .command-button:hover:active, .command-button[checked=true]:not(:hover) { /* background-color: var(--toolbar-tab-hover-active)*/ } .command-button:hover::before { /* opacity: 0.85;*/ } .command-button:hover:active::before, .command-button[checked=true]::before, .command-button[open=true]::before { /* opacity: 1;*/ } #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 { filter: var(--checked-icon-filter); } /* Command button images */ #command-button-paintflashing::before { background-image: var(--command-paintflashing-image); } #command-button-screenshot::before { background-image: var(--command-screenshot-image); } #command-button-responsive::before { background-image: var(--command-responsive-image); } #command-button-scratchpad::before { background-image: var(--command-scratchpad-image); } #command-button-pick::before { background-image: var(--command-pick-image); } #command-button-splitconsole::before { background-image: var(--command-splitconsole-image); } #command-button-noautohide::before { background-image: var(--command-noautohide-image); } #command-button-eyedropper::before { background-image: var(--command-eyedropper-image); } #command-button-rulers::before { background-image: var(--command-rulers-image); } #command-button-measure::before { background-image: var(--command-measure-image); } #command-button-frames::before { background-image: var(--command-frames-image); } #command-button-frames { background-image: url("chrome://devtools/skin/images/dropmarker.svg"); background-repeat: no-repeat; background-position: right; /* Override background-size from the command-button. The drop down arrow is smaller */ background-size: 8px 4px !important; min-width: 32px; } #command-button-frames:-moz-dir(rtl) { background-position: left; } /* Toolbox panels */ .toolbox-panel { display: -moz-box; -moz-box-flex: 1; visibility: collapse; } .toolbox-panel[selected] { visibility: visible; } /** * When panels are collapsed or hidden, making sure that they are also * inaccessible by keyboard. This is not the case by default because the are * predominantly hidden using visibility: collapse; style or collapsed * attribute. */ .toolbox-panel *, #toolbox-panel-webconsole[collapsed] * { -moz-user-focus: ignore; } /** * Enrure that selected toolbox panel's contents are keyboard accessible as they * are explicitly made not to be when hidden (default). */ .toolbox-panel[selected] * { -moz-user-focus: normal; }