mirror of
https://github.com/mozilla/gecko-dev.git
synced 2024-10-19 16:25:38 +00:00
fdd8d73fff
Migrate the ShaderEditor to use the HTMLTooltip instead of the old XUL-only Tooltip. The HTMLTooltip doesn't provide a builtin setTextContent API, so the shadereditor is now creating the markup for the tooltip and setting it as the content. The styles have been ported to shadereditor.css and now rely on theme variables. This will allow us to move all the old tooltip code to the old debugger folder, which will be the last consumer of the widget. MozReview-Commit-ID: HVyxtf0xM4x --HG-- extra : rebase_source : cdb7d6eabe77816f7f6d93299f7a8440ec4ce9a4
120 lines
2.5 KiB
CSS
120 lines
2.5 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/. */
|
|
|
|
/* Reload and waiting notices */
|
|
|
|
.notice-container {
|
|
margin-top: -50vh;
|
|
color: var(--theme-body-color-alt);
|
|
}
|
|
|
|
#reload-notice {
|
|
font-size: 120%;
|
|
}
|
|
|
|
#waiting-notice {
|
|
font-size: 110%;
|
|
}
|
|
|
|
/* Shaders pane */
|
|
|
|
#shaders-pane {
|
|
min-width: 150px;
|
|
}
|
|
|
|
.program-item {
|
|
padding: 2px 0px;
|
|
}
|
|
|
|
.side-menu-widget-item-checkbox {
|
|
-moz-appearance: none;
|
|
opacity: 0;
|
|
transition: opacity .15s ease-out 0s;
|
|
}
|
|
|
|
/* Only show the checkbox when the source is hovered over, is selected, or if it
|
|
* is not checked. */
|
|
.side-menu-widget-item:hover > .side-menu-widget-item-checkbox,
|
|
.side-menu-widget-item.selected > .side-menu-widget-item-checkbox,
|
|
.side-menu-widget-item-checkbox:not([checked]) {
|
|
opacity: 1;
|
|
transition: opacity .15s ease-out 0s;
|
|
}
|
|
|
|
.side-menu-widget-item-checkbox .checkbox-check {
|
|
-moz-appearance: none;
|
|
background-image: url(images/item-toggle.svg);
|
|
background-color: transparent;
|
|
width: 16px;
|
|
height: 16px;
|
|
border: 0;
|
|
-moz-context-properties: fill;
|
|
}
|
|
|
|
.side-menu-widget-item-checkbox:not([checked]) .checkbox-check,
|
|
.side-menu-widget-item-checkbox:not([checked]) + vbox {
|
|
opacity: 0.3;
|
|
}
|
|
|
|
.side-menu-widget-item:not(.selected) .checkbox-check {
|
|
fill: var(--theme-toolbar-color);
|
|
}
|
|
|
|
/* Make sure icon is white when the item is selected */
|
|
.side-menu-widget-item.selected .checkbox-check {
|
|
fill: var(--theme-toolbar-selected-color);
|
|
}
|
|
|
|
/* Shader source editors */
|
|
|
|
.editor-label {
|
|
padding: 1px 12px;
|
|
border-top: 1px solid;
|
|
}
|
|
|
|
.editor-label {
|
|
background: var(--theme-toolbar-background);
|
|
border-color: var(--theme-splitter-color);
|
|
color: var(--theme-body-color-alt);
|
|
}
|
|
|
|
.editor-label[selected] {
|
|
background-color: var(--theme-selection-background);
|
|
color: var(--theme-selection-color);
|
|
}
|
|
|
|
.devtools-shader-tooltip-container .devtools-tooltip-simple-text {
|
|
color: var(--theme-content-color1);
|
|
border-bottom: 1px solid var(--theme-splitter-color);
|
|
}
|
|
|
|
.devtools-shader-tooltip-container .devtools-tooltip-simple-text:last-child {
|
|
border-bottom: 0;
|
|
}
|
|
|
|
/* Responsive sidebar */
|
|
|
|
@media (max-width: 700px) {
|
|
#shaders-pane {
|
|
max-height: 60vh;
|
|
}
|
|
|
|
#editors-splitter {
|
|
border-color: transparent;
|
|
}
|
|
|
|
.side-menu-widget-container {
|
|
box-shadow: none !important;
|
|
}
|
|
|
|
.side-menu-widget-item-arrow {
|
|
background-image: none !important;
|
|
}
|
|
|
|
.editor-label {
|
|
-moz-box-ordinal-group: 0;
|
|
border-bottom: 1px solid;
|
|
}
|
|
}
|