mirror of
https://github.com/mozilla/gecko-dev.git
synced 2024-10-19 16:25:38 +00:00
3d54c50b09
Differential Revision: https://phabricator.services.mozilla.com/D5983 --HG-- rename : toolkit/themes/shared/in-content/check-partial.svg => toolkit/themes/shared/icons/check-partial.svg rename : browser/themes/shared/icons/check.svg => toolkit/themes/shared/icons/check.svg extra : moz-landing-system : lando
651 lines
16 KiB
CSS
651 lines
16 KiB
CSS
/* 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/. */
|
|
|
|
/* Import stylesheets for specific tooltip widgets */
|
|
@import url(chrome://devtools/content/shared/widgets/cubic-bezier.css);
|
|
@import url(chrome://devtools/content/shared/widgets/filter-widget.css);
|
|
@import url(chrome://devtools/content/shared/widgets/spectrum.css);
|
|
|
|
/* Tooltip specific theme variables */
|
|
|
|
.theme-dark {
|
|
--bezier-diagonal-color: #eee;
|
|
--bezier-grid-color: rgba(0, 0, 0, 0.2);
|
|
--onboarding-link-color: var(--theme-highlight-blue);
|
|
--onboarding-link-active-color: var(--blue-40);
|
|
|
|
/* Tooltips */
|
|
--theme-tooltip-border: #434850;
|
|
--theme-tooltip-background: rgba(19, 28, 38, .9);
|
|
--theme-tooltip-shadow: rgba(25, 25, 25, 0.76);
|
|
|
|
/* Doorhangers */
|
|
/* These colors are based on the colors used for doorhangers elsewhere in
|
|
* Firefox. */
|
|
--theme-arrowpanel-background: var(--theme-popup-background);
|
|
--theme-arrowpanel-color: var(--theme-popup-color);
|
|
--theme-arrowpanel-border-color: var(--theme-popup-border-color);
|
|
--theme-arrowpanel-separator: rgba(249,249,250,.1);
|
|
--theme-arrowpanel-dimmed: var(--theme-popup-dimmed);
|
|
--theme-arrowpanel-dimmed-further: rgba(249,249,250,.15);
|
|
--theme-arrowpanel-disabled-color: rgba(249,249,250,.5);
|
|
}
|
|
|
|
.theme-light {
|
|
--bezier-diagonal-color: rgba(0, 0, 0, 0.2);
|
|
--bezier-grid-color: rgba(0, 0, 0, 0.05);
|
|
--onboarding-link-color: var(--blue-60);
|
|
--onboarding-link-active-color: var(--blue-70);
|
|
|
|
/* Tooltips */
|
|
--theme-tooltip-border: #d9e1e8;
|
|
--theme-tooltip-background: rgba(255, 255, 255, .9);
|
|
--theme-tooltip-shadow: rgba(155, 155, 155, 0.26);
|
|
|
|
/* Doorhangers */
|
|
/* These colors are based on the colors used for doorhangers elsewhere in
|
|
* Firefox. */
|
|
--theme-arrowpanel-background: var(--theme-popup-background);
|
|
--theme-arrowpanel-color: var(--theme-popup-color);
|
|
--theme-arrowpanel-border-color: var(--theme-popup-border-color);
|
|
--theme-arrowpanel-separator: ThreeDShadow;
|
|
--theme-arrowpanel-dimmed: var(--theme-popup-dimmed);
|
|
--theme-arrowpanel-dimmed-further: hsla(0,0%,80%,.45);
|
|
--theme-arrowpanel-disabled-color: GrayText;
|
|
}
|
|
|
|
:root {
|
|
--theme-arrowpanel-border-radius: 0px;
|
|
}
|
|
:root[platform="mac"] {
|
|
--theme-arrowpanel-border-radius: 3.5px;
|
|
}
|
|
|
|
:root[platform="mac"].theme-light {
|
|
--theme-arrowpanel-separator: hsla(210,4%,10%,.14);
|
|
}
|
|
|
|
/* Tooltip: CSS variables tooltip */
|
|
|
|
.devtools-tooltip-css-variable {
|
|
color: var(--theme-body-color);
|
|
padding: 2px;
|
|
}
|
|
|
|
/* Tooltip: Tiles */
|
|
|
|
.devtools-tooltip-tiles {
|
|
background-color: #eee;
|
|
background-image: linear-gradient(45deg, #ccc 25%, transparent 25%, transparent 75%, #ccc 75%, #ccc),
|
|
linear-gradient(45deg, #ccc 25%, transparent 25%, transparent 75%, #ccc 75%, #ccc);
|
|
background-size: 20px 20px;
|
|
background-position: 0 0, 10px 10px;
|
|
}
|
|
|
|
.tooltip-container {
|
|
display: none;
|
|
position: fixed;
|
|
z-index: 9999;
|
|
display: none;
|
|
background: transparent;
|
|
pointer-events: none;
|
|
overflow: hidden;
|
|
filter: drop-shadow(0 3px 4px var(--theme-tooltip-shadow));
|
|
}
|
|
|
|
.tooltip-xul-wrapper {
|
|
-moz-appearance: none;
|
|
background: transparent;
|
|
overflow: visible;
|
|
border-style: none;
|
|
}
|
|
|
|
.tooltip-xul-wrapper .tooltip-container {
|
|
position: absolute;
|
|
}
|
|
|
|
.tooltip-top {
|
|
flex-direction: column;
|
|
}
|
|
|
|
.tooltip-bottom {
|
|
flex-direction: column-reverse;
|
|
}
|
|
|
|
.tooltip-panel{
|
|
background-color: var(--theme-tooltip-background);
|
|
pointer-events: all;
|
|
flex-grow: 1;
|
|
}
|
|
|
|
.tooltip-visible {
|
|
display: flex;
|
|
}
|
|
|
|
.tooltip-hidden {
|
|
display: flex;
|
|
visibility: hidden;
|
|
}
|
|
|
|
/* Tooltip : flexible height styles */
|
|
|
|
.tooltip-flexible-height .tooltip-panel {
|
|
/* In flexible mode the tooltip panel should only grow according to its content. */
|
|
flex-grow: 0;
|
|
}
|
|
|
|
.tooltip-flexible-height .tooltip-filler {
|
|
/* In flexible mode the filler should grow as much as possible. */
|
|
flex-grow: 1;
|
|
}
|
|
|
|
/* type="arrow" overrides: remove arrow decorations for the xul <panel> wrapper */
|
|
|
|
.tooltip-xul-wrapper[type="arrow"][side] {
|
|
margin: 0;
|
|
}
|
|
|
|
/* The arrow image is hidden because the panel is opened using openPopupAtScreen(). */
|
|
|
|
/* Remove all decorations on .panel-arrowcontent is the tooltip content container. */
|
|
.tooltip-xul-wrapper[type="arrow"] .panel-arrowcontent {
|
|
margin: 0;
|
|
padding: 0;
|
|
background: transparent;
|
|
border: none;
|
|
box-shadow: none;
|
|
}
|
|
|
|
/* Tooltip : arrow style */
|
|
|
|
.tooltip-xul-wrapper .tooltip-container {
|
|
/* When displayed in a XUL panel the drop shadow would be abruptly cut by the panel */
|
|
filter: none;
|
|
}
|
|
|
|
.tooltip-container[type="arrow"] > .tooltip-panel {
|
|
position: relative;
|
|
min-height: 10px;
|
|
box-sizing: border-box;
|
|
width: 100%;
|
|
|
|
border: 3px solid var(--theme-tooltip-border);
|
|
border-radius: 5px;
|
|
}
|
|
|
|
.tooltip-top[type="arrow"] .tooltip-panel {
|
|
top: 0;
|
|
}
|
|
|
|
.tooltip-bottom[type="arrow"] .tooltip-panel {
|
|
bottom: 0;
|
|
}
|
|
|
|
.tooltip-arrow {
|
|
position: relative;
|
|
height: 16px;
|
|
width: 32px;
|
|
overflow: hidden;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
/* In RTL locales, only use RTL on the tooltip content, keep LTR for positioning */
|
|
.tooltip-container:-moz-locale-dir(rtl) {
|
|
direction: ltr;
|
|
}
|
|
|
|
.tooltip-panel:-moz-locale-dir(rtl) {
|
|
direction: rtl;
|
|
}
|
|
|
|
.tooltip-top .tooltip-arrow {
|
|
margin-top: -3px;
|
|
}
|
|
|
|
.tooltip-bottom .tooltip-arrow {
|
|
margin-bottom: -3px;
|
|
}
|
|
|
|
.tooltip-arrow:before {
|
|
content: "";
|
|
position: absolute;
|
|
width: 21px;
|
|
height: 21px;
|
|
margin-left: 4px;
|
|
background: linear-gradient(-45deg,
|
|
var(--theme-tooltip-background) 50%, transparent 50%);
|
|
border-color: var(--theme-tooltip-border);
|
|
border-style: solid;
|
|
border-width: 0px 3px 3px 0px;
|
|
border-radius: 3px;
|
|
pointer-events: all;
|
|
}
|
|
|
|
.tooltip-bottom .tooltip-arrow:before {
|
|
margin-top: 4px;
|
|
transform: rotate(225deg);
|
|
}
|
|
|
|
.tooltip-top .tooltip-arrow:before {
|
|
margin-top: -12px;
|
|
transform: rotate(45deg);
|
|
}
|
|
|
|
/* Tooltip : doorhanger style */
|
|
|
|
.tooltip-container[type="doorhanger"] > .tooltip-panel {
|
|
padding: 2px 0;
|
|
color: var(--theme-arrowpanel-color);
|
|
margin: 4px;
|
|
max-width: 320px;
|
|
}
|
|
|
|
.tooltip-container[type="doorhanger"] > .tooltip-panel,
|
|
.tooltip-container[type="doorhanger"] > .tooltip-arrow::before {
|
|
background: var(--theme-arrowpanel-background);
|
|
border: 1px solid var(--theme-arrowpanel-border-color);
|
|
border-radius: var(--theme-arrowpanel-border-radius);
|
|
box-shadow: 0 0 4px hsla(210,4%,10%,.2);
|
|
}
|
|
|
|
:root[platform="mac"] .tooltip-container[type="doorhanger"] > .tooltip-panel,
|
|
:root[platform="mac"] .tooltip-container[type="doorhanger"] > .tooltip-arrow::before {
|
|
box-shadow: none;
|
|
/*
|
|
* The above should be:
|
|
*
|
|
* box-shadow: 0 0 0 1px var(--theme-arrowpanel-border-color);
|
|
*
|
|
* but although that gives the right emphasis to the border it makes the
|
|
* platform shadow much too dark.
|
|
*/
|
|
}
|
|
|
|
:root[platform="mac"].theme-light .tooltip-container[type="doorhanger"] > .tooltip-panel,
|
|
:root[platform="mac"].theme-light .tooltip-container[type="doorhanger"] > .tooltip-arrow::before {
|
|
border: none;
|
|
}
|
|
|
|
.tooltip-container[type="doorhanger"] > .tooltip-arrow {
|
|
/* Desired width of the arrow */
|
|
--arrow-width: 20px;
|
|
|
|
/* Amount of room to allow for the shadow. Should be about half the radius. */
|
|
--shadow-radius: 4px;
|
|
--shadow-margin: calc(var(--shadow-radius) / 2);
|
|
|
|
/*
|
|
* Crop the arrow region to show half the arrow plus allow room for margins.
|
|
*
|
|
* The ARROW_WIDTH in HTMLTooltip.js needs to match the following value.
|
|
*/
|
|
width: calc(var(--arrow-width) + 2 * var(--shadow-margin));
|
|
height: calc(var(--arrow-width) / 2 + var(--shadow-margin));
|
|
}
|
|
|
|
.tooltip-container[type="doorhanger"] > .tooltip-arrow::before {
|
|
/* Make sure the border is included in the size */
|
|
box-sizing: border-box;
|
|
|
|
/* Don't inherit any rounded corners. */
|
|
border-radius: 0;
|
|
|
|
/*
|
|
* When the box is rotated, it should have width <arrow-width>.
|
|
* That makes the length of one side of the box equal to:
|
|
*
|
|
* (<arrow-width> / 2) / sin 45
|
|
*/
|
|
--sin-45: 0.707106781;
|
|
--square-side: calc(var(--arrow-width) / 2 / var(--sin-45));
|
|
width: var(--square-side);
|
|
height: var(--square-side);
|
|
|
|
/*
|
|
* The rotated square will overshoot the left side
|
|
* and need to be shifted in by:
|
|
*
|
|
* (<arrow-width> - square side) / 2
|
|
*
|
|
* But we also want to shift it in so that the box-shadow
|
|
* is not clipped when we clip the parent so we add
|
|
* a suitable margin for that.
|
|
*/
|
|
--overhang: calc((var(--arrow-width) - var(--square-side)) / 2);
|
|
margin-left: calc(var(--overhang) + var(--shadow-margin));
|
|
}
|
|
|
|
.tooltip-container[type="doorhanger"].tooltip-top > .tooltip-panel {
|
|
/*
|
|
* Drop the margin between the doorhanger and the arrow and add extra
|
|
* padding.
|
|
*/
|
|
margin-bottom: 0;
|
|
padding-bottom: 6px;
|
|
}
|
|
|
|
.tooltip-container[type="doorhanger"].tooltip-bottom > .tooltip-panel {
|
|
/*
|
|
* Drop the margin between the doorhanger and the arrow and add extra
|
|
* padding.
|
|
*/
|
|
margin-top: 0;
|
|
padding-top: 6px;
|
|
}
|
|
|
|
.tooltip-container[type="doorhanger"].tooltip-top > .tooltip-arrow {
|
|
/* Overlap the arrow with the 1px border of the doorhanger */
|
|
margin-top: -1px;
|
|
}
|
|
|
|
.tooltip-container[type="doorhanger"].tooltip-bottom > .tooltip-arrow {
|
|
/* Overlap the arrow with the 1px border of the doorhanger */
|
|
margin-bottom: -1px;
|
|
}
|
|
|
|
.tooltip-container[type="doorhanger"].tooltip-top > .tooltip-arrow::before {
|
|
/* Show only the bottom half of the box */
|
|
margin-top: calc(var(--square-side) / -2);
|
|
}
|
|
|
|
.tooltip-container[type="doorhanger"].tooltip-bottom > .tooltip-arrow::before {
|
|
/* Shift the rotated box in so that it is not clipped */
|
|
margin-top: calc(var(--overhang) + var(--shadow-margin));
|
|
}
|
|
|
|
.tooltip-container[type="doorhanger"] .tooltip-panel ul {
|
|
/* Override the display: -moz-box declaration in minimal-xul.css
|
|
* or else menu items won't stack. */
|
|
display: block;
|
|
}
|
|
|
|
.tooltip-container[type="doorhanger"] .menuitem > .command {
|
|
display: flex;
|
|
align-items: baseline;
|
|
margin: 0;
|
|
padding: 4px 12px;
|
|
outline: none;
|
|
/*
|
|
* It doesn't really make sense, since if this is just about making the items
|
|
* easier to click we should be using min-width instead.
|
|
*/
|
|
margin-inline-end: 15px;
|
|
}
|
|
|
|
.tooltip-container[type="doorhanger"] .menuitem > button.command:-moz-any([role="menuitem"],[role="menuitemcheckbox"]) {
|
|
-moz-appearance: none;
|
|
border: none;
|
|
color: var(--theme-arrowpanel-color);
|
|
background-color: transparent;
|
|
text-align: start;
|
|
width: 100%;
|
|
}
|
|
|
|
.tooltip-container[type="doorhanger"] .menuitem > .command:not(:-moz-any([disabled],[open],:active)):-moz-any(:hover,:focus) {
|
|
background-color: var(--theme-arrowpanel-dimmed);
|
|
}
|
|
|
|
.tooltip-container[type="doorhanger"] .menuitem > .command:-moz-focusring::-moz-focus-inner {
|
|
border-color: transparent;
|
|
}
|
|
|
|
.tooltip-container[type="doorhanger"] .menuitem > .command:not([disabled]):-moz-any([open],:hover:active) {
|
|
background-color: var(--theme-arrowpanel-dimmed-further);
|
|
box-shadow: 0 1px 0 hsla(210,4%,10%,.03) inset;
|
|
}
|
|
|
|
.tooltip-container[type="doorhanger"] .menuitem > .command[aria-checked="true"] {
|
|
list-style-image: none;
|
|
-moz-context-properties: fill;
|
|
fill: currentColor;
|
|
background: url(chrome://global/skin/icons/check.svg) no-repeat transparent;
|
|
background-size: 11px 11px;
|
|
background-position: center left 7px;
|
|
}
|
|
|
|
.tooltip-container[type="doorhanger"] .menuitem > .command[aria-checked="true"]:-moz-locale-dir(rtl) {
|
|
background-position: center right 7px;
|
|
}
|
|
|
|
.tooltip-container[type="doorhanger"] .menuitem > .command > .label {
|
|
flex: 1;
|
|
font: menu;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.tooltip-container[type="doorhanger"] .checkbox-container .menuitem > .command > .label {
|
|
padding-inline-start: 16px;
|
|
}
|
|
|
|
.tooltip-container[type="doorhanger"] .menuitem > .command.iconic > .label::before {
|
|
content: " ";
|
|
display: inline-block;
|
|
margin-inline-end: 8px;
|
|
width: 16px;
|
|
height: 16px;
|
|
vertical-align: top;
|
|
-moz-context-properties: fill;
|
|
fill: currentColor;
|
|
background-image: var(--menuitem-icon-image);
|
|
background-size: contain;
|
|
/*
|
|
* The icons in the sidebar menu have opacity: 0.8 here, but those in the
|
|
* hamburger menu don't. For now we match the hamburger menu styling,
|
|
* especially because the 80% opacity makes the icons look dull in dark mode.
|
|
*/
|
|
}
|
|
|
|
.tooltip-container[type="doorhanger"] .menuitem > .command > .accelerator {
|
|
margin-inline-start: 10px;
|
|
color: var(--theme-arrowpanel-disabled-color);
|
|
font: message-box;
|
|
}
|
|
|
|
.tooltip-container[type="doorhanger"] hr {
|
|
display: block;
|
|
border: none;
|
|
border-top: 1px solid var(--theme-arrowpanel-separator);
|
|
margin: 6px 0;
|
|
padding: 0;
|
|
}
|
|
|
|
/* Tooltip: Events */
|
|
|
|
.event-header {
|
|
display: flex;
|
|
align-items: center;
|
|
cursor: pointer;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.event-header:before {
|
|
content: "▶︎";
|
|
padding-inline-end: 5px;
|
|
}
|
|
|
|
.event-header.content-expanded:before {
|
|
content: "▼";
|
|
}
|
|
|
|
.event-header:first-child {
|
|
border-width: 0;
|
|
}
|
|
|
|
.event-header:not(:first-child) {
|
|
border-width: 1px 0 0 0;
|
|
}
|
|
|
|
.event-tooltip-debugger-icon {
|
|
-moz-context-properties: stroke;
|
|
stroke: currentColor;
|
|
}
|
|
|
|
.devtools-tooltip-events-container {
|
|
height: 100%;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
.event-tooltip-event-type,
|
|
.event-tooltip-filename,
|
|
.event-tooltip-attributes {
|
|
margin-inline-start: 0;
|
|
flex-shrink: 0;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.event-tooltip-event-type {
|
|
font-weight: bold;
|
|
font-size: 13px;
|
|
}
|
|
|
|
.event-tooltip-filename {
|
|
margin: 0 5px;
|
|
font-size: 100%;
|
|
flex-shrink: 1;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
/* Force ellipsis to be displayed on the left */
|
|
direction: rtl;
|
|
}
|
|
|
|
.event-tooltip-debugger-icon,
|
|
.event-tooltip-debugger-spacer {
|
|
width: 16px;
|
|
height: 16px;
|
|
margin-inline-end: 4px;
|
|
opacity: 0.6;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.event-tooltip-debugger-icon:hover {
|
|
opacity: 1;
|
|
}
|
|
|
|
.event-tooltip-content-box {
|
|
display: none;
|
|
height: 100px;
|
|
overflow: hidden;
|
|
margin-inline-end: 0;
|
|
border: 1px solid var(--theme-splitter-color);
|
|
border-width: 1px 0 0 0;
|
|
}
|
|
|
|
.event-toolbox-content-box iframe {
|
|
height: 100%;
|
|
border-style: none;
|
|
}
|
|
|
|
.event-tooltip-content-box[open] {
|
|
display: block;
|
|
}
|
|
|
|
.event-tooltip-source-container {
|
|
margin-top: 5px;
|
|
margin-bottom: 10px;
|
|
margin-inline-start: 5px;
|
|
margin-inline-end: 0;
|
|
}
|
|
|
|
.event-tooltip-source {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.event-tooltip-attributes-container {
|
|
display: flex;
|
|
flex-shrink: 0;
|
|
flex-grow: 1;
|
|
justify-content: flex-end;
|
|
}
|
|
|
|
.event-tooltip-attributes-box {
|
|
display: flex;
|
|
flex-shrink: 0;
|
|
align-items: center;
|
|
height: 14px;
|
|
border-radius: 3px;
|
|
padding: 2px;
|
|
margin-inline-start: 5px;
|
|
background-color: var(--theme-body-color-alt);
|
|
color: var(--theme-body-background);
|
|
}
|
|
|
|
.event-tooltip-attributes {
|
|
margin: 0;
|
|
font-size: 9px;
|
|
padding-top: 2px;
|
|
}
|
|
|
|
/* Tooltip: HTML Search */
|
|
|
|
#searchbox-panel-listbox {
|
|
width: 250px;
|
|
max-width: 250px;
|
|
overflow-x: hidden;
|
|
}
|
|
|
|
#searchbox-panel-listbox .autocomplete-item,
|
|
#searchbox-panel-listbox .autocomplete-item[selected] {
|
|
overflow-x: hidden;
|
|
}
|
|
|
|
/* Tooltip: Image tooltip */
|
|
|
|
.devtools-tooltip-image-broken {
|
|
box-sizing: border-box;
|
|
height: 100%;
|
|
padding: 7px;
|
|
}
|
|
|
|
/* Tooltip: Onboarding Tooltip */
|
|
|
|
.onboarding-container {
|
|
align-items: center;
|
|
background-color: var(--theme-toolbar-background);
|
|
box-sizing: border-box;
|
|
color: var(--theme-body-color);
|
|
display: flex;
|
|
font-size: 12px;
|
|
padding: 7px;
|
|
width: 100%;
|
|
-moz-user-select: none;
|
|
}
|
|
|
|
.onboarding-icon {
|
|
display: inline-block;
|
|
background-size: 21px;
|
|
width: 21px;
|
|
height: 21px;
|
|
margin: 8px;
|
|
background-image: url("chrome://devtools/skin/images/fox-smiling.svg");
|
|
}
|
|
|
|
.onboarding-content {
|
|
flex: 1;
|
|
padding-inline-start: 5px;
|
|
}
|
|
|
|
.onboarding-link {
|
|
color: var(--onboarding-link-color);
|
|
cursor: pointer;
|
|
}
|
|
|
|
.onboarding-link:hover {
|
|
text-decoration: underline;
|
|
}
|
|
|
|
.onboarding-link:active {
|
|
color: var(--onboarding-link-active-color);
|
|
}
|
|
|
|
.onboarding-close-button {
|
|
align-self: flex-start;
|
|
}
|
|
|
|
.onboarding-close-button::before {
|
|
background-image: url("chrome://devtools/skin/images/close.svg");
|
|
margin: -6px 0 0 -6px;
|
|
}
|