Samuel Mbabhazi
7493f83176
Convert the legacy comma-separated rgb()/rgba()/hsl()/hsla() notation to the modern space and slash separated syntax in DevTools CSS files and in the shipped themed SVG icons. Every converted value is numerically identical to the original. Deliberately left unchanged: test fixtures and expectations (computed values still serialize to the legacy syntax), the vendored CodeMirror stylesheets, and the contributor docs diagrams. The remaining occurrences in JS files can be handled in a follow-up, since most of them are computed-value assertions in tests. Differential Revision: https://phabricator.services.mozilla.com/D322271
144 lines
3.4 KiB
CSS
144 lines
3.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/. */
|
|
|
|
/* Layout */
|
|
|
|
.notificationbox .notificationInner {
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
flex-wrap: wrap;
|
|
padding: 6px 4px;
|
|
gap: 6px;
|
|
}
|
|
|
|
.notificationInner .messageText {
|
|
flex: 1;
|
|
width: 0;
|
|
min-width: max(50%, 100px);
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.notificationInner .notification-buttons-container {
|
|
display: flex;
|
|
gap: 6px;
|
|
flex-wrap: wrap;
|
|
align-items: center;
|
|
justify-content: end;
|
|
margin-inline-start: auto;
|
|
}
|
|
|
|
.notificationInner .messageImage,
|
|
.notificationbox .notificationButton,
|
|
.notificationbox .messageCloseButton {
|
|
flex: none;
|
|
}
|
|
|
|
.notificationbox .notificationInner:dir(rtl) {
|
|
flex-direction: row-reverse;
|
|
}
|
|
|
|
/* Style */
|
|
|
|
.notificationbox .notification {
|
|
color: var(--theme-toolbar-color);
|
|
background-color: var(--theme-body-background);
|
|
text-shadow: none;
|
|
border-color: var(--theme-splitter-color);
|
|
border-style: solid;
|
|
border-width: 0;
|
|
}
|
|
|
|
.notificationbox.border-top .notification {
|
|
border-top-width: 1px;
|
|
}
|
|
|
|
.notificationbox.border-bottom .notification {
|
|
border-bottom-width: 1px;
|
|
}
|
|
|
|
.notificationbox .notification[data-type="info"] {
|
|
color: -moz-DialogText;
|
|
background-color: -moz-Dialog;
|
|
}
|
|
|
|
.notificationbox .notification[data-type="new"] {
|
|
color: var(--theme-contrast-color);
|
|
background-color: var(--theme-body-alternate-emphasized-background);
|
|
}
|
|
|
|
/**
|
|
* Remove button borders for notifications highlighting New features.
|
|
*/
|
|
.notificationbox .notification .notificationButton {
|
|
border-radius: 2px;
|
|
border-width: 0;
|
|
padding: 4px;
|
|
}
|
|
|
|
.notificationbox .notification[data-type="critical"] {
|
|
color: white;
|
|
color: var(--theme-text-color-error);
|
|
background-color: var(--theme-toolbar-error-background);
|
|
padding: 5px 0;
|
|
}
|
|
|
|
.notificationbox .messageImage {
|
|
-moz-context-properties: fill;
|
|
fill: currentColor;
|
|
background-size: 16px;
|
|
width: 16px;
|
|
height: 16px;
|
|
}
|
|
|
|
/* Default icons for notifications */
|
|
|
|
.notificationbox .messageImage[data-type="info"] {
|
|
background-image: url("chrome://devtools/skin/images/info.svg");
|
|
}
|
|
|
|
.notificationbox .messageImage[data-type="new"] {
|
|
background-image: url("chrome://devtools/skin/images/whatsnew.svg");
|
|
fill: var(--theme-highlight-blue);
|
|
}
|
|
|
|
.notificationbox .messageImage[data-type="warning"] {
|
|
background-image: url("chrome://devtools/skin/images/alert.svg");
|
|
/* Keep the icon colored to make it more eye-catching */
|
|
fill: #ffbf00;
|
|
}
|
|
|
|
.notificationbox .messageImage[data-type="critical"] {
|
|
background-image: url("chrome://devtools/skin/images/error.svg");
|
|
}
|
|
|
|
/* Close button */
|
|
|
|
.notificationbox .messageCloseButton {
|
|
width: 24px;
|
|
height: 24px;
|
|
background-image: url("chrome://devtools/skin/images/close.svg");
|
|
background-position: center;
|
|
background-color: transparent;
|
|
background-repeat: no-repeat;
|
|
border-radius: 2px;
|
|
border-width: 0;
|
|
-moz-context-properties: fill;
|
|
fill: var(--theme-icon-color);
|
|
}
|
|
|
|
.notificationbox .messageCloseButton:hover {
|
|
background-color: var(--theme-button-active-background);
|
|
}
|
|
|
|
.notificationbox .messageCloseButton:active {
|
|
background-color: rgb(170 170 170 / 0.4); /* --toolbar-tab-hover-active */
|
|
}
|
|
|
|
.notificationbox.wrapping .notificationInner .messageText {
|
|
white-space: normal;
|
|
}
|