mirror of
https://github.com/mozilla/gecko-dev.git
synced 2024-10-07 18:04:46 +00:00
49e3e1453f
Updated colors and styles for toolbox toolbar tabs as well as sidebar tabs. For icon color changes created special filters that match the expected photon colors. The normal, selected and checked states of icons in both dark and light theme are now always set using filters. MozReview-Commit-ID: 4MTAxHnyI7a
124 lines
2.4 KiB
CSS
124 lines
2.4 KiB
CSS
/* 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{
|
|
-moz-user-select: none;
|
|
}
|
|
|
|
#options-panel-container {
|
|
overflow: auto;
|
|
}
|
|
|
|
#options-panel {
|
|
display: block;
|
|
}
|
|
|
|
.options-vertical-pane {
|
|
display: inline;
|
|
float: left;
|
|
}
|
|
|
|
.options-vertical-pane:dir(rtl) {
|
|
float: right;
|
|
}
|
|
|
|
.options-vertical-pane {
|
|
margin: 5px;
|
|
width: calc(100%/3 - 10px);
|
|
min-width: 320px;
|
|
padding-inline-start: 5px;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
/* Snap to 50% width once there is not room for 3 columns anymore.
|
|
This prevents having 2 columns showing in a row, but taking up
|
|
only ~66% of the available space. */
|
|
@media (max-width: 1000px) {
|
|
.options-vertical-pane {
|
|
width: calc(100%/2 - 10px);
|
|
}
|
|
}
|
|
|
|
.options-vertical-pane fieldset {
|
|
border: none;
|
|
}
|
|
|
|
.options-vertical-pane fieldset legend {
|
|
font-size: 1.4rem;
|
|
margin-inline-start: -15px;
|
|
margin-bottom: 3px;
|
|
cursor: default;
|
|
}
|
|
|
|
.options-vertical-pane fieldset + fieldset {
|
|
margin-top: 1rem;
|
|
}
|
|
|
|
.options-groupbox {
|
|
margin-inline-start: 15px;
|
|
padding: 2px;
|
|
}
|
|
|
|
.options-groupbox label {
|
|
display: flex;
|
|
padding: 4px 0;
|
|
align-items: center;
|
|
}
|
|
|
|
/* Add padding for label of select inputs in order to
|
|
align it with surrounding checkboxes */
|
|
.options-groupbox label span:first-child {
|
|
padding-inline-start: 5px;
|
|
}
|
|
|
|
.options-groupbox label span + select {
|
|
margin-inline-start: 4px;
|
|
}
|
|
|
|
.options-groupbox.horizontal-options-groupbox label {
|
|
display: inline-flex;
|
|
align-items: flex-end;
|
|
}
|
|
|
|
.options-groupbox.horizontal-options-groupbox label + label {
|
|
margin-inline-start: 4px;
|
|
}
|
|
|
|
.options-groupbox > *,
|
|
.options-groupbox > .hidden-labels-box > checkbox {
|
|
padding: 2px;
|
|
}
|
|
|
|
.options-groupbox > .hidden-labels-box {
|
|
padding: 0;
|
|
}
|
|
|
|
.options-citation-label {
|
|
display: inline-block;
|
|
font-size: 1rem;
|
|
font-style: italic;
|
|
/* To align it with the checkbox */
|
|
padding: 4px 0 0;
|
|
padding-inline-end: 4px;
|
|
}
|
|
|
|
#devtools-sourceeditor-keybinding-select {
|
|
min-width: 130px;
|
|
}
|
|
|
|
#devtools-sourceeditor-tabsize-select {
|
|
min-width: 80px;
|
|
}
|
|
|
|
#screenshot-options legend::after {
|
|
content: "";
|
|
display: inline-block;
|
|
background-image: url("chrome://devtools/skin/images/command-screenshot.svg");
|
|
width: 16px;
|
|
height: 16px;
|
|
vertical-align: sub;
|
|
margin-inline-start: 5px;
|
|
filter: var(--theme-icon-filter);
|
|
opacity: 0.6;
|
|
}
|