Consistently format CSS color and opacity values
- Prefer the modern comma-free CSS color function syntax over the
legacy syntax. [1]
- Explicitly use the `deg` suffix for angle values in colors, to
clarify the range.
- Explicitly use the `%` suffix for percentages instead of formatting
the value as a number, again to clarify the range.
[1]: https://twitter.com/mathias/status/1253242715304857601
[2]: https://goo.gle/devtools-css-color
Bug: chromium:1083142
Fixed: chromium:1073885
Change-Id: I8e1582a2dee3553a61df88564051ea84c2011d76
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/2209091
Reviewed-by: Alex Rudenko <[email protected]>
Reviewed-by: Tim van der Lippe <[email protected]>
Commit-Queue: Tim van der Lippe <[email protected]>
Auto-Submit: Mathias Bynens <[email protected]>
diff --git a/.stylelintrc.json b/.stylelintrc.json
index 40db42c..9a1f5e1 100644
--- a/.stylelintrc.json
+++ b/.stylelintrc.json
@@ -1,3 +1,8 @@
{
- "extends": "stylelint-config-standard"
+ "extends": "stylelint-config-standard",
+ "rules": {
+ "alpha-value-notation": "percentage",
+ "color-function-notation": "modern",
+ "hue-degree-notation": "angle"
+ }
}
diff --git a/front_end/accessibility/accessibilityNode.css b/front_end/accessibility/accessibilityNode.css
index 17a408a..9b89745 100644
--- a/front_end/accessibility/accessibilityNode.css
+++ b/front_end/accessibility/accessibilityNode.css
@@ -26,7 +26,7 @@
}
.ax-value-source-unused {
- opacity: 0.7;
+ opacity: 70%;
}
.ax-value-source-superseded,
@@ -52,7 +52,7 @@
}
.tree-outline li.property {
- color: rgb(33, 33, 33);
+ color: rgb(33 33 33);
}
.tree-outline li.invalid {
@@ -72,7 +72,7 @@
@media (forced-colors: active) {
.ax-value-source-unused {
- opacity: 1;
+ opacity: 100%;
}
.tree-outline-disclosure:hover li.parent::before {
diff --git a/front_end/accessibility/accessibilityProperties.css b/front_end/accessibility/accessibilityProperties.css
index f88e068..513c8e7 100644
--- a/front_end/accessibility/accessibilityProperties.css
+++ b/front_end/accessibility/accessibilityProperties.css
@@ -5,7 +5,7 @@
*/
.ax-name {
- color: rgb(153, 69, 0);
+ color: rgb(153 69 0);
flex-shrink: 0;
}
@@ -18,7 +18,7 @@
}
.ax-value-string {
- color: rgb(200, 0, 0);
+ color: rgb(200 0 0);
}
span.ax-internal-role {
diff --git a/front_end/accessibility/axBreadcrumbs.css b/front_end/accessibility/axBreadcrumbs.css
index 88c31a0..13e56c1 100644
--- a/front_end/accessibility/axBreadcrumbs.css
+++ b/front_end/accessibility/axBreadcrumbs.css
@@ -6,7 +6,7 @@
.ax-breadcrumbs-ignored-node {
font-style: italic;
- opacity: 0.7;
+ opacity: 70%;
}
.ax-breadcrumbs {
@@ -44,7 +44,7 @@
-webkit-mask-position: 0 0;
-webkit-mask-size: 30px 10px;
-webkit-mask-repeat: no-repeat;
- background-color: rgb(48, 57, 66);
+ background-color: rgb(48 57 66);
content: "";
text-shadow: none;
margin-right: -2px;
@@ -68,11 +68,11 @@
}
.ax-breadcrumbs .ax-node.no-dom-node {
- opacity: 0.7;
+ opacity: 70%;
}
.ax-breadcrumbs .ax-node.children-unloaded::before {
- opacity: 0.4;
+ opacity: 40%;
}
.ax-breadcrumbs .ax-node.preselected:not(.inspected) .selection,
@@ -85,7 +85,7 @@
}
.ax-breadcrumbs .ax-node.preselected:not(.inspected):focus .selection {
- border: 1px solid rgba(56, 121, 217, 0.4);
+ border: 1px solid rgb(56 121 217 / 40%);
}
.ax-breadcrumbs .ax-node .selection {
@@ -117,7 +117,7 @@
@media (forced-colors: active) {
.ax-value-source-unused,
.ax-breadcrumbs .ax-node.children-unloaded::before {
- opacity: 1;
+ opacity: 100%;
}
.ax-breadcrumbs .ax-node.parent::before,
diff --git a/front_end/animation/animationTimeline.css b/front_end/animation/animationTimeline.css
index 8df0d8a..76b839d 100644
--- a/front_end/animation/animationTimeline.css
+++ b/front_end/animation/animationTimeline.css
@@ -11,7 +11,7 @@
.animation-node-row {
width: 100%;
display: flex;
- border-bottom: 1px dashed hsla(0, 0%, 94%, 1);
+ border-bottom: 1px dashed hsl(0deg 0% 94% / 100%);
}
.animation-node-description {
@@ -20,9 +20,9 @@
overflow: hidden;
position: relative;
transform-style: preserve-3d;
- border-bottom: 1px solid hsl(0, 0%, 90%);
+ border-bottom: 1px solid hsl(0deg 0% 90%);
margin-bottom: -1px;
- background-color: hsl(0, 0%, 98%);
+ background-color: hsl(0deg 0% 98%);
display: flex;
align-items: center;
flex: 0 0 150px;
@@ -126,9 +126,9 @@
width: 150px;
left: 0;
margin-top: 28px;
- background-color: hsl(0, 0%, 98%);
+ background-color: hsl(0deg 0% 98%);
z-index: 0;
- border-right: 1px solid hsl(0, 0%, 90%);
+ border-right: 1px solid hsl(0deg 0% 90%);
}
.animation-controls {
@@ -171,7 +171,7 @@
.animation-time-overlay {
background-color: black;
- opacity: 0.05;
+ opacity: 5%;
position: absolute;
height: 100%;
width: 100%;
@@ -183,19 +183,19 @@
}
.animation-scrubber {
- opacity: 1;
+ opacity: 100%;
position: absolute;
left: 150px;
height: calc(100% - 103px);
width: calc(100% - 150px);
top: 103px;
- border-left: 1px solid hsla(4, 90%, 58%, 1);
+ border-left: 1px solid hsl(4deg 90% 58% / 100%);
z-index: 1;
}
.animation-scrubber-line {
width: 11px;
- background: linear-gradient(to right, transparent 5px, hsla(4, 90%, 58%, 1) 5px, hsla(4, 90%, 58%, 1) 6px, transparent 6px);
+ background: linear-gradient(to right, transparent 5px, hsl(4deg 90% 58% / 100%) 5px, hsl(4deg 90% 58% / 100%) 6px, transparent 6px);
position: absolute;
top: -28px;
height: 28px;
@@ -222,7 +222,7 @@
}
rect.animation-timeline-grid-line {
- fill: hsla(0, 0%, 93%, 1);
+ fill: hsl(0deg 0% 93% / 100%);
}
.animation-timeline-row > svg.animation-ui {
@@ -246,7 +246,7 @@
}
svg.animation-ui g:first-child {
- opacity: 1;
+ opacity: 100%;
}
svg.animation-ui circle[data-keyboard-focus="true"],
@@ -255,7 +255,7 @@
}
.animation-tail-iterations {
- opacity: 0.5;
+ opacity: 50%;
}
.animation-keyframe-step line {
@@ -299,7 +299,7 @@
}
.animation-node-row.animation-node-selected {
- background-color: hsla(216, 71%, 53%, 0.08);
+ background-color: hsl(216deg 71% 53% / 8%);
}
.animation-node-selected > .animation-node-description {
@@ -326,15 +326,15 @@
position: absolute;
top: 0;
left: 0;
- background: hsla(219, 100%, 66%, 0.27);
- opacity: 0;
+ background: hsl(219deg 100% 66% / 27%);
+ opacity: 0%;
border-right: 1px solid #a7a7a7;
cursor: pointer;
}
.animation-buffer-preview[data-keyboard-focus="true"]:not(.selected):focus,
.animation-buffer-preview:not(.selected):hover {
- background-color: hsla(217, 90%, 92%, 1);
+ background-color: hsl(217deg 90% 92% / 100%);
}
.animation-buffer-preview[data-keyboard-focus="true"]:focus {
@@ -349,14 +349,14 @@
display: flex;
align-items: center;
justify-content: center;
- background-color: hsla(0, 0%, 70%, 0.5);
+ background-color: hsl(0deg 0% 70% / 50%);
display: none;
}
.animation-paused::before,
.animation-paused::after {
content: "";
- background: hsl(0, 100%, 100%);
+ background: hsl(0deg 100% 100%);
width: 7px;
height: 20px;
border-radius: 2px;
@@ -418,11 +418,11 @@
}
.animation-playback-rate-button:not(.selected):hover {
- background: hsl(211, 100%, 95%);
+ background: hsl(211deg 100% 95%);
}
.animation-playback-rate-button.selected {
- color: hsl(0, 100%, 100%);
+ color: hsl(0deg 100% 100%);
background-color: var(--selection-bg-color);
border-color: var(--selection-bg-color);
z-index: 1;
@@ -430,7 +430,7 @@
.animation-playback-rate-button.selected:first-child {
color: var(--selection-bg-color);
- background-color: hsl(217, 89%, 100%);
+ background-color: hsl(217deg 89% 100%);
}
.animation-remove-button,
@@ -445,7 +445,7 @@
align-items: center;
font-size: 10px;
justify-content: center;
- box-shadow: 0 1px 4px 0 rgb(185, 185, 185);
+ box-shadow: 0 1px 4px 0 rgb(185 185 185);
z-index: 100;
display: none;
cursor: pointer;
diff --git a/front_end/browser_debugger/domBreakpointsSidebarPane.css b/front_end/browser_debugger/domBreakpointsSidebarPane.css
index 5fbdc53..fe3ae73 100644
--- a/front_end/browser_debugger/domBreakpointsSidebarPane.css
+++ b/front_end/browser_debugger/domBreakpointsSidebarPane.css
@@ -30,12 +30,12 @@
}
.breakpoint-hit {
- background-color: rgb(255, 255, 194);
- border-right: 3px solid rgb(107, 97, 48);
+ background-color: rgb(255 255 194);
+ border-right: 3px solid rgb(107 97 48);
}
:host-context(.-theme-with-dark-background) .breakpoint-hit {
- background-color: hsl(46, 98%, 22%);
+ background-color: hsl(46deg 98% 22%);
color: #ccc;
}
diff --git a/front_end/browser_debugger/eventListenerBreakpoints.css b/front_end/browser_debugger/eventListenerBreakpoints.css
index ec0a10a..e9e33ee 100644
--- a/front_end/browser_debugger/eventListenerBreakpoints.css
+++ b/front_end/browser_debugger/eventListenerBreakpoints.css
@@ -29,17 +29,17 @@
}
.breakpoint-hit {
- background-color: rgb(255, 255, 194);
+ background-color: rgb(255 255 194);
}
:host-context(.-theme-with-dark-background) .breakpoint-hit {
- background-color: hsl(46, 98%, 22%);
+ background-color: hsl(46deg 98% 22%);
color: #ccc;
}
.breakpoint-hit .breakpoint-hit-marker {
- background-color: rgb(255, 255, 194);
- border-right: 3px solid rgb(107, 97, 48);
+ background-color: rgb(255 255 194);
+ border-right: 3px solid rgb(107 97 48);
height: 18px;
left: 0;
margin-left: -30px;
@@ -49,5 +49,5 @@
}
:host-context(.-theme-with-dark-background) .breakpoint-hit .breakpoint-hit-marker {
- background-color: hsl(46, 98%, 22%);
+ background-color: hsl(46deg 98% 22%);
}
diff --git a/front_end/browser_debugger/xhrBreakpointsSidebarPane.css b/front_end/browser_debugger/xhrBreakpointsSidebarPane.css
index ff2d5f2..48917ed 100644
--- a/front_end/browser_debugger/xhrBreakpointsSidebarPane.css
+++ b/front_end/browser_debugger/xhrBreakpointsSidebarPane.css
@@ -26,7 +26,7 @@
margin-left: 0;
margin-right: 0;
outline: none !important;
- border: 1px solid rgb(66%, 66%, 66%);
+ border: 1px solid rgb(66% 66% 66%);
}
.breakpoint-entry {
@@ -47,12 +47,12 @@
}
.breakpoint-hit {
- background-color: rgb(255, 255, 194);
- border-right: 3px solid rgb(107, 97, 48);
+ background-color: rgb(255 255 194);
+ border-right: 3px solid rgb(107 97 48);
}
:host-context(.-theme-with-dark-background) .breakpoint-hit {
- background-color: hsl(46, 98%, 22%);
+ background-color: hsl(46deg 98% 22%);
color: #ccc;
}
diff --git a/front_end/changes/changesSidebar.css b/front_end/changes/changesSidebar.css
index 1adac18..eafb927 100644
--- a/front_end/changes/changesSidebar.css
+++ b/front_end/changes/changesSidebar.css
@@ -1,6 +1,6 @@
li .icon {
margin: -3px -5px -3px -5px;
- background: linear-gradient(45deg, hsl(0, 0%, 50%), hsl(0, 0%, 70%));
+ background: linear-gradient(45deg, hsl(0deg 0% 50%), hsl(0deg 0% 70%));
}
.tree-outline li {
@@ -13,23 +13,23 @@
}
.navigator-fs-tree-item .icon {
- background: linear-gradient(45deg, hsl(28, 75%, 50%), hsl(28, 75%, 70%));
+ background: linear-gradient(45deg, hsl(28deg 75% 50%), hsl(28deg 75% 70%));
}
.navigator-sm-script-tree-item .icon,
.navigator-script-tree-item .icon,
.navigator-snippet-tree-item .icon {
- background: linear-gradient(45deg, hsl(48, 70%, 50%), hsl(48, 70%, 70%));
+ background: linear-gradient(45deg, hsl(48deg 70% 50%), hsl(48deg 70% 70%));
}
.navigator-sm-stylesheet-tree-item .icon,
.navigator-stylesheet-tree-item .icon {
- background: linear-gradient(45deg, hsl(256, 50%, 50%), hsl(256, 50%, 70%));
+ background: linear-gradient(45deg, hsl(256deg 50% 50%), hsl(256deg 50% 70%));
}
.navigator-image-tree-item .icon,
.navigator-font-tree-item .icon {
- background: linear-gradient(45deg, hsl(109, 33%, 50%), hsl(109, 33%, 70%));
+ background: linear-gradient(45deg, hsl(109deg 33% 50%), hsl(109deg 33% 70%));
}
@media (forced-colors: active) {
diff --git a/front_end/changes/changesView.css b/front_end/changes/changesView.css
index c026d67..9c695ef 100644
--- a/front_end/changes/changesView.css
+++ b/front_end/changes/changesView.css
@@ -28,43 +28,43 @@
.CodeMirror-line:hover {
cursor: default !important;
- background-color: rgba(0, 0, 255, 0.05);
+ background-color: rgb(0 0 255 / 5%);
}
.CodeMirror .CodeMirror-linebackground.spacer {
text-align: center;
- color: rgba(0, 0, 0, 0.5);
- background-color: rgba(0, 0, 255, 0.1);
+ color: rgb(0 0 0 / 50%);
+ background-color: rgb(0 0 255 / 10%);
}
.CodeMirror .equal > span > span {
- opacity: 0.5;
+ opacity: 50%;
}
.CodeMirror .CodeMirror-selectedtext:not(.CodeMirror-persist-highlight) {
- opacity: 1;
+ opacity: 100%;
}
.CodeMirror .CodeMirror-linebackground.addition,
-theme-preserve,
.changes-diff-gutter-marker.addition {
- background-color: hsla(144, 55%, 49%, 0.2);
+ background-color: hsl(144deg 55% 49% / 20%);
}
.CodeMirror .CodeMirror-linebackground.deletion,
-theme-preserve,
.changes-diff-gutter-marker.deletion {
- background-color: rgba(255, 0, 0, 0.2);
+ background-color: rgb(255 0 0 / 20%);
}
.CodeMirror .addition .cm-inner-diff:not(.CodeMirror-selectedtext),
-theme-preserve {
- background-color: hsla(144, 55%, 49%, 0.3);
+ background-color: hsl(144deg 55% 49% / 30%);
}
.CodeMirror .deletion .cm-inner-diff:not(.CodeMirror-selectedtext),
-theme-preserve {
- background-color: rgba(255, 0, 0, 0.3);
+ background-color: rgb(255 0 0 / 30%);
}
.changes-toolbar {
diff --git a/front_end/color_picker/spectrum.css b/front_end/color_picker/spectrum.css
index 15b142d..911659b 100644
--- a/front_end/color_picker/spectrum.css
+++ b/front_end/color_picker/spectrum.css
@@ -71,12 +71,12 @@
.spectrum-sat,
.-theme-preserve {
- background-image: linear-gradient(to right, white, rgba(204, 154, 129, 0));
+ background-image: linear-gradient(to right, white, rgb(204 154 129 / 0%));
}
.spectrum-val,
.-theme-preserve {
- background-image: linear-gradient(to top, black, rgba(204, 154, 129, 0));
+ background-image: linear-gradient(to top, black, rgb(204 154 129 / 0%));
}
.spectrum-hue {
@@ -93,7 +93,7 @@
top: 0;
left: 0;
background: black;
- box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.24);
+ box-shadow: 0 0 2px 0 rgb(0 0 0 / 24%);
}
.spectrum-slider {
@@ -103,8 +103,8 @@
width: 13px;
height: 13px;
border-radius: 13px;
- background-color: rgb(248, 248, 248);
- box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.37);
+ background-color: rgb(248 248 248);
+ box-shadow: 0 1px 4px 0 rgb(0 0 0 / 37%);
}
.spectrum-contrast-details {
@@ -139,7 +139,7 @@
}
.spectrum-contrast-details .toolbar-state-on [is=ui-icon] {
- background-color: rgb(110, 110, 110);
+ background-color: rgb(110 110 110);
}
.spectrum-contrast-details.visible {
@@ -268,18 +268,18 @@
.swatch-overlay {
cursor: pointer;
- opacity: 0;
+ opacity: 0%;
padding: 4px;
}
.swatch-overlay:hover,
.swatch-overlay[data-keyboard-focus="true"]:focus {
- background-color: rgba(0, 0, 0, 0.3);
- opacity: 1;
+ background-color: rgb(0 0 0 / 30%);
+ opacity: 100%;
}
.swatch-overlay:active {
- background-color: rgba(0, 0, 0, 0.5);
+ background-color: rgb(0 0 0 / 50%);
}
[is=ui-icon].icon-mask.copy-color-icon {
@@ -377,26 +377,26 @@
margin: 6px;
cursor: pointer;
position: relative;
- border: 1px solid rgba(0, 0, 0, 0.1);
+ border: 1px solid rgb(0 0 0 / 10%);
background-position: -1px !important;
z-index: 14;
}
.spectrum-palette-color:hover:not(.spectrum-shades-shown) > .spectrum-palette-color-shadow,
.spectrum-palette-color:focus:not(.spectrum-shades-shown) > .spectrum-palette-color-shadow {
- opacity: 0.2;
+ opacity: 20%;
}
.spectrum-palette-color:hover:not(.spectrum-shades-shown) > .spectrum-palette-color-shadow:first-child,
.spectrum-palette-color:focus:not(.spectrum-shades-shown) > .spectrum-palette-color-shadow:first-child {
- opacity: 0.6;
+ opacity: 60%;
top: -3px;
left: 1px;
}
.spectrum-palette-color-shadow {
position: absolute;
- opacity: 0;
+ opacity: 0%;
margin: 0;
top: -5px;
left: 3px;
@@ -407,7 +407,7 @@
background-color: white;
height: 228px;
width: 28px;
- box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12), 0 2px 4px -1px rgba(0, 0, 0, 0.4);
+ box-shadow: 0 4px 5px 0 rgb(0 0 0 / 14.000000000000002%), 0 1px 10px 0 rgb(0 0 0 / 12%), 0 2px 4px -1px rgb(0 0 0 / 40%);
z-index: 14;
border-radius: 2px;
transform-origin: 0 228px;
@@ -518,15 +518,15 @@
.spectrum-overlay {
z-index: 13;
visibility: hidden;
- background-color: hsla(0, 0%, 0%, 0.5);
- opacity: 0;
+ background-color: hsl(0deg 0% 0% / 50%);
+ opacity: 0%;
transition: opacity 100ms cubic-bezier(0, 0, 0.2, 1), visibility 0s 100ms;
}
.palette-panel-showing > .spectrum-overlay {
transition-delay: 0s;
visibility: visible;
- opacity: 1;
+ opacity: 100%;
}
.spectrum-contrast-container {
@@ -538,7 +538,7 @@
:host-context(.-theme-with-dark-background) .spectrum-contrast-line {
fill: none;
stroke: white;
- opacity: 0.7;
+ opacity: 70%;
stroke-width: 1.5px;
}
@@ -559,11 +559,11 @@
@keyframes showDeleteToolbar {
from {
- opacity: 0;
+ opacity: 0%;
}
to {
- opacity: 1;
+ opacity: 100%;
}
}
diff --git a/front_end/components/jsUtils.css b/front_end/components/jsUtils.css
index ffd33e4..9b731f0 100644
--- a/front_end/components/jsUtils.css
+++ b/front_end/components/jsUtils.css
@@ -14,7 +14,7 @@
}
.stack-preview-container .webkit-html-blackbox-link {
- opacity: 0.6;
+ opacity: 60%;
}
.stack-preview-container > tr {
diff --git a/front_end/console/consolePinPane.css b/front_end/console/consolePinPane.css
index a982150..d776728 100644
--- a/front_end/console/consolePinPane.css
+++ b/front_end/console/consolePinPane.css
@@ -9,15 +9,15 @@
overflow-y: auto;
background: var(--toolbar-bg-color);
- --error-background-color: hsl(0, 100%, 97%);
- --error-border-color: hsl(0, 100%, 92%);
+ --error-background-color: hsl(0deg 100% 97%);
+ --error-border-color: hsl(0deg 100% 92%);
--error-text-color: red;
}
:host-context(.-theme-with-dark-background) .console-pins {
- --error-background-color: hsl(0, 100%, 8%);
- --error-border-color: rgb(92, 0, 0);
- --error-text-color: hsl(0, 100%, 75%);
+ --error-background-color: hsl(0deg 100% 8%);
+ --error-border-color: rgb(92 0 0);
+ --error-text-color: hsl(0deg 100% 75%);
}
.console-pins:not(:empty) {
@@ -69,13 +69,13 @@
position: absolute;
top: 8px;
left: 8px;
- opacity: 0.7;
+ opacity: 70%;
cursor: pointer;
}
.console-delete-pin:hover,
.console-delete-pin[data-keyboard-focus="true"]:focus {
- opacity: 1;
+ opacity: 100%;
}
.console-pin-name:focus-within {
@@ -85,5 +85,5 @@
.console-pin:focus-within .console-pin-preview,
.console-pin-name:not(:focus-within):not(:hover) {
- opacity: 0.6;
+ opacity: 60%;
}
diff --git a/front_end/console/consolePrompt.css b/front_end/console/consolePrompt.css
index 9c4f822..10011e8 100644
--- a/front_end/console/consolePrompt.css
+++ b/front_end/console/consolePrompt.css
@@ -25,7 +25,7 @@
.console-eager-preview {
padding-bottom: 2px;
- opacity: 0.6;
+ opacity: 60%;
position: relative;
height: 15px;
}
@@ -43,7 +43,7 @@
.console-eager-inner-preview:empty,
.console-eager-inner-preview:empty + .preview-result-icon {
- opacity: 0;
+ opacity: 0%;
}
.preview-result-icon {
@@ -53,5 +53,5 @@
}
.console-prompt-icon.console-prompt-incomplete {
- opacity: 0.65;
+ opacity: 65%;
}
diff --git a/front_end/console/consoleSidebar.css b/front_end/console/consoleSidebar.css
index 474d281..5fb1c11 100644
--- a/front_end/console/consoleSidebar.css
+++ b/front_end/console/consoleSidebar.css
@@ -32,12 +32,12 @@
}
li .largeicon-navigator-file {
- background: linear-gradient(45deg, hsl(48, 70%, 50%), hsl(48, 70%, 70%));
+ background: linear-gradient(45deg, hsl(48deg 70% 50%), hsl(48deg 70% 70%));
margin: 0;
}
li .largeicon-navigator-folder {
- background: linear-gradient(45deg, hsl(210, 82%, 65%), hsl(210, 82%, 80%));
+ background: linear-gradient(45deg, hsl(210deg 82% 65%), hsl(210deg 82% 80%));
margin: -3px -3px 0 -5px;
}
diff --git a/front_end/console/consoleView.css b/front_end/console/consoleView.css
index 5ca503a..1db19b8 100644
--- a/front_end/console/consoleView.css
+++ b/front_end/console/consoleView.css
@@ -31,17 +31,17 @@
background-color: white;
overflow: hidden;
- --message-border-color: rgb(240, 240, 240);
- --warning-border-color: hsl(50, 100%, 88%);
- --error-border-color: hsl(0, 100%, 92%);
+ --message-border-color: rgb(240 240 240);
+ --warning-border-color: hsl(50deg 100% 88%);
+ --error-border-color: hsl(0deg 100% 92%);
--error-text-color: red;
}
.-theme-with-dark-background .console-view {
- --message-border-color: rgb(58, 58, 58);
- --warning-border-color: rgb(102, 85, 0);
- --error-border-color: rgb(92, 0, 0);
- --error-text-color: hsl(0, 100%, 75%);
+ --message-border-color: rgb(58 58 58);
+ --warning-border-color: rgb(102 85 0);
+ --error-border-color: rgb(92 0 0);
+ --error-text-color: hsl(0deg 100% 75%);
}
.console-toolbar-container {
@@ -152,7 +152,7 @@
}
.console-info {
- color: rgb(128, 128, 128);
+ color: rgb(128 128 128);
font-style: italic;
padding-bottom: 2px;
}
@@ -172,7 +172,7 @@
.expand-group-icon {
user-select: none;
flex: none;
- background-color: rgb(110, 110, 110);
+ background-color: rgb(110 110 110);
position: relative;
left: 10px;
top: 5px;
@@ -245,26 +245,26 @@
.console-message-wrapper:focus,
.console-message-wrapper:focus:last-of-type {
- border-top-color: hsl(214, 67%, 88%);
- border-bottom-color: hsl(214, 67%, 88%);
- background-color: hsl(214, 48%, 95%);
+ border-top-color: hsl(214deg 67% 88%);
+ border-bottom-color: hsl(214deg 67% 88%);
+ background-color: hsl(214deg 48% 95%);
}
.console-message-wrapper.console-error-level:focus,
.console-message-wrapper.console-error-level:focus:last-of-type {
- --error-text-color: rgb(200, 0, 0);
+ --error-text-color: rgb(200 0 0);
}
.-theme-with-dark-background .console-message-wrapper.console-error-level:focus,
.-theme-with-dark-background .console-message-wrapper.console-error-level:focus:last-of-type {
- --error-text-color: hsl(0, 100%, 75%);
+ --error-text-color: hsl(0deg 100% 75%);
}
.-theme-with-dark-background .console-message-wrapper:focus,
.-theme-with-dark-background .console-message-wrapper:focus:last-of-type {
- border-top-color: hsl(214, 47%, 48%);
- border-bottom-color: hsl(214, 47%, 48%);
- background-color: hsl(214, 19%, 20%);
+ border-top-color: hsl(214deg 47% 48%);
+ border-bottom-color: hsl(214deg 47% 48%);
+ background-color: hsl(214deg 19% 20%);
}
.console-message-wrapper:focus + .console-message-wrapper {
@@ -297,23 +297,23 @@
}
.console-error-level {
- background-color: hsl(0, 100%, 97%);
+ background-color: hsl(0deg 100% 97%);
}
.-theme-with-dark-background .console-error-level {
- background-color: hsl(0, 100%, 8%);
+ background-color: hsl(0deg 100% 8%);
}
.console-warning-level {
- background-color: hsl(50, 100%, 95%);
+ background-color: hsl(50deg 100% 95%);
}
.-theme-with-dark-background .console-warning-level {
- background-color: hsl(50, 100%, 10%);
+ background-color: hsl(50deg 100% 10%);
}
.console-warning-level .console-message-text {
- color: hsl(39, 100%, 18%);
+ color: hsl(39deg 100% 18%);
}
.console-error-level .console-message-text,
@@ -327,11 +327,11 @@
.-theme-with-dark-background .console-verbose-level:not(.console-warning-level) .console-message-text,
.-theme-with-dark-background .console-system-type.console-info-level {
- color: hsl(220, 100%, 65%) !important;
+ color: hsl(220deg 100% 65%) !important;
}
.console-message.console-warning-level {
- background-color: rgb(255, 250, 224);
+ background-color: rgb(255 250 224);
}
#console-messages .link {
@@ -340,14 +340,14 @@
#console-messages .link,
#console-messages .devtools-link {
- color: rgb(33%, 33%, 33%);
+ color: rgb(33% 33% 33%);
cursor: pointer;
word-break: break-all;
}
#console-messages .link:hover,
#console-messages .devtools-link:hover {
- color: rgb(15%, 15%, 15%);
+ color: rgb(15% 15% 15%);
}
.console-group-messages .section {
@@ -374,7 +374,7 @@
.console-group-messages .section .properties li .info {
padding-top: 0;
padding-bottom: 0;
- color: rgb(60%, 60%, 60%);
+ color: rgb(60% 60% 60%);
}
.console-object-preview {
@@ -385,7 +385,7 @@
.console-object-preview .name {
/* Follows .section .properties .name, .event-properties .name */
- color: rgb(136, 19, 145);
+ color: rgb(136 19 145);
flex-shrink: 0;
}
@@ -435,11 +435,11 @@
}
.-theme-with-dark-background .object-state-note {
- background-color: hsl(230, 100%, 80%);
+ background-color: hsl(230deg 100% 80%);
}
.info-note {
- background-color: rgb(179, 203, 247);
+ background-color: rgb(179 203 247);
}
.info-note::before {
diff --git a/front_end/cookie_table/cookiesTable.css b/front_end/cookie_table/cookiesTable.css
index b6b357a..a3473fd 100644
--- a/front_end/cookie_table/cookiesTable.css
+++ b/front_end/cookie_table/cookiesTable.css
@@ -17,9 +17,9 @@
}
.cookies-table tr.revealed.data-grid-data-grid-node.flagged-cookie-attribute-row:not(.selected):nth-child(odd) {
- background-color: hsl(51, 85%, 80%);
+ background-color: hsl(51deg 85% 80%);
}
.cookies-table tr.revealed.data-grid-data-grid-node.flagged-cookie-attribute-row:not(.selected):nth-child(even) {
- background-color: rgb(255, 240, 155);
+ background-color: rgb(255 240 155);
}
diff --git a/front_end/css_overview/cssOverviewCompletedView.css b/front_end/css_overview/cssOverviewCompletedView.css
index 5053f78..5bd4cb2 100644
--- a/front_end/css_overview/cssOverviewCompletedView.css
+++ b/front_end/css_overview/cssOverviewCompletedView.css
@@ -242,7 +242,7 @@
.overview-completed-view .unused-declarations button:hover .bar,
.overview-completed-view .unused-declarations button:focus .bar {
background-color: var(--accent-color-hover);
- box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1), 0 0 0 2px rgba(66, 133, 244, 0.4);
+ box-shadow: 0 1px 2px rgb(0 0 0 / 10%), 0 0 0 2px rgb(66 133 244 / 40%);
color: #fff;
}
diff --git a/front_end/css_overview/cssOverviewSidebarPanel.css b/front_end/css_overview/cssOverviewSidebarPanel.css
index 09a8396..6d0d383 100644
--- a/front_end/css_overview/cssOverviewSidebarPanel.css
+++ b/front_end/css_overview/cssOverviewSidebarPanel.css
@@ -20,7 +20,7 @@
.overview-sidebar-panel-item:hover,
.overview-sidebar-panel-item:focus {
- background: rgb(234, 234, 234);
+ background: rgb(234 234 234);
}
.overview-sidebar-panel-item.selected {
@@ -29,5 +29,5 @@
}
.overview-toolbar {
- border-bottom: 1px solid rgb(204, 204, 204);
+ border-bottom: 1px solid rgb(204 204 204);
}
diff --git a/front_end/data_grid/dataGrid.css b/front_end/data_grid/dataGrid.css
index f7ac5d2..e20ce72 100644
--- a/front_end/data_grid/dataGrid.css
+++ b/front_end/data_grid/dataGrid.css
@@ -1,6 +1,6 @@
.data-grid {
position: relative;
- border: 1px solid rgb(204, 204, 204) !important;
+ border: 1px solid rgb(204 204 204) !important;
line-height: 120%;
}
@@ -90,7 +90,7 @@
.striped-data-grid .revealed.data-grid-data-grid-node:nth-child(odd),
.striped-data-grid-starts-with-odd .revealed.data-grid-data-grid-node:nth-child(even) {
- background-color: hsl(214, 70%, 97%);
+ background-color: hsl(214deg 70% 97%);
}
.data-grid td,
@@ -152,7 +152,7 @@
right: 0;
top: 0;
bottom: 0;
- background-color: rgba(0, 0, 0, 0.15);
+ background-color: rgb(0 0 0 / 15%);
}
.data-grid th .sort-order-icon-container {
@@ -176,7 +176,7 @@
}
.data-grid th.sortable:hover {
- background-color: hsla(0, 0%, 90%, 1);
+ background-color: hsl(0deg 0% 90% / 100%);
}
.data-grid .top-filler-td {
@@ -201,7 +201,7 @@
content: "";
position: relative;
top: 3px;
- background-color: rgb(110, 110, 110);
+ background-color: rgb(110 110 110);
}
.data-grid tr:not(.parent) td.disclosure::before {
@@ -213,7 +213,7 @@
}
.data-grid table.data tr.revealed.selected {
- background-color: rgb(212, 212, 212);
+ background-color: rgb(212 212 212);
color: inherit;
}
@@ -241,18 +241,18 @@
}
.data-grid tr.inactive {
- color: rgb(128, 128, 128);
+ color: rgb(128 128 128);
font-style: italic;
}
.data-grid tr.dirty {
- background-color: hsl(0, 100%, 92%);
+ background-color: hsl(0deg 100% 92%);
color: red;
font-style: normal;
}
.data-grid:focus tr.selected.dirty {
- background-color: hsl(0, 100%, 70%);
+ background-color: hsl(0deg 100% 70%);
}
.data-grid td.show-more {
diff --git a/front_end/elements/classesPaneWidget.css b/front_end/elements/classesPaneWidget.css
index f874583..21a479f 100644
--- a/front_end/elements/classesPaneWidget.css
+++ b/front_end/elements/classesPaneWidget.css
@@ -6,7 +6,7 @@
.styles-element-classes-pane {
background-color: var(--toolbar-bg-color);
- border-bottom: 1px solid rgb(189, 189, 189);
+ border-bottom: 1px solid rgb(189 189 189);
padding: 6px 2px 2px;
}
diff --git a/front_end/elements/computedStyleSidebarPane.css b/front_end/elements/computedStyleSidebarPane.css
index 5ac1799..864b2d9 100644
--- a/front_end/elements/computedStyleSidebarPane.css
+++ b/front_end/elements/computedStyleSidebarPane.css
@@ -34,7 +34,7 @@
}
.styles-sidebar-pane-filter-box > input::placeholder {
- color: rgba(0, 0, 0, 0.54);
+ color: rgb(0 0 0 / 54%);
}
@media (forced-colors: active) {
diff --git a/front_end/elements/computedStyleWidgetTree.css b/front_end/elements/computedStyleWidgetTree.css
index e955af2..1c30177 100644
--- a/front_end/elements/computedStyleWidgetTree.css
+++ b/front_end/elements/computedStyleWidgetTree.css
@@ -47,7 +47,7 @@
}
.computed-style-property-inherited {
- opacity: 0.5;
+ opacity: 50%;
}
.trace-link {
@@ -78,7 +78,7 @@
.property-trace-inactive .property-trace-value::before {
position: absolute;
content: ".";
- border-bottom: 1px solid rgba(0, 0, 0, 0.35);
+ border-bottom: 1px solid rgb(0 0 0 / 35%);
top: 0;
bottom: 5px;
left: 0;
@@ -96,7 +96,7 @@
}
.tree-outline li:hover {
- background-color: rgb(235, 242, 252);
+ background-color: rgb(235 242 252);
cursor: pointer;
}
@@ -133,7 +133,7 @@
@media (forced-colors: active) {
.computed-style-property-inherited {
- opacity: 1;
+ opacity: 100%;
}
:host-context(.monospace.computed-properties) .tree-outline li:hover {
diff --git a/front_end/elements/domLinkifier.css b/front_end/elements/domLinkifier.css
index d24ae31..be80477 100644
--- a/front_end/elements/domLinkifier.css
+++ b/front_end/elements/domLinkifier.css
@@ -19,10 +19,10 @@
}
.node-label-name {
- color: rgb(136, 18, 128);
+ color: rgb(136 18 128);
}
.node-label-class,
.node-label-pseudo {
- color: rgb(153, 69, 0);
+ color: rgb(153 69 0);
}
diff --git a/front_end/elements/elementStatePaneWidget.css b/front_end/elements/elementStatePaneWidget.css
index 7f3703e..c350d82 100644
--- a/front_end/elements/elementStatePaneWidget.css
+++ b/front_end/elements/elementStatePaneWidget.css
@@ -8,7 +8,7 @@
overflow: hidden;
padding-left: 2px;
background-color: var(--toolbar-bg-color);
- border-bottom: 1px solid rgb(189, 189, 189);
+ border-bottom: 1px solid rgb(189 189 189);
margin-top: 0;
padding-bottom: 2px;
}
diff --git a/front_end/elements/elementsTreeOutline.css b/front_end/elements/elementsTreeOutline.css
index e6ebbd5..17aa354 100644
--- a/front_end/elements/elementsTreeOutline.css
+++ b/front_end/elements/elementsTreeOutline.css
@@ -28,13 +28,13 @@
.elements-disclosure li .selected-hint::before {
font-style: italic;
content: " == $0";
- opacity: 0;
+ opacity: 0%;
position: absolute;
white-space: pre;
}
.elements-disclosure .elements-tree-outline:not(.hide-selection-when-blurred) li.selected .selected-hint::before {
- opacity: 0.6;
+ opacity: 60%;
}
.elements-disclosure li.parent::before {
@@ -125,19 +125,19 @@
}
.elements-tree-outline ol.shadow-root-depth-4 {
- background-color: rgba(0, 0, 0, 0.04);
+ background-color: rgb(0 0 0 / 4%);
}
.elements-tree-outline ol.shadow-root-depth-3 {
- background-color: rgba(0, 0, 0, 0.03);
+ background-color: rgb(0 0 0 / 3%);
}
.elements-tree-outline ol.shadow-root-depth-2 {
- background-color: rgba(0, 0, 0, 0.02);
+ background-color: rgb(0 0 0 / 2%);
}
.elements-tree-outline ol.shadow-root-depth-1 {
- background-color: rgba(0, 0, 0, 0.01);
+ background-color: rgb(0 0 0 / 1%);
}
.elements-tree-outline ol.shadow-root-deep {
@@ -189,7 +189,7 @@
margin-right: -2px;
margin-bottom: -1px;
padding-bottom: 1px;
- opacity: 1 !important;
+ opacity: 100% !important;
}
.editing,
@@ -215,7 +215,7 @@
}
.elements-gutter-decoration.elements-has-decorated-children {
- opacity: 0.5;
+ opacity: 50%;
}
.add-attribute {
@@ -236,12 +236,12 @@
/* DOM update highlight */
@-webkit-keyframes dom-update-highlight-animation {
from {
- background-color: rgb(158, 54, 153);
+ background-color: rgb(158 54 153);
color: white;
}
80% {
- background-color: rgb(245, 219, 244);
+ background-color: rgb(245 219 244);
color: inherit;
}
@@ -252,7 +252,7 @@
@-webkit-keyframes dom-update-highlight-animation-dark {
from {
- background-color: rgb(158, 54, 153);
+ background-color: rgb(158 54 153);
color: white;
}
@@ -281,7 +281,7 @@
.elements-tree-shortcut-title,
.elements-tree-shortcut-link {
- color: rgb(87, 87, 87);
+ color: rgb(87 87 87);
}
.elements-disclosure .gutter-container {
@@ -327,15 +327,15 @@
}
li.hovered:not(.always-parent) + ol.children:not(.shadow-root) {
- border-color: hsla(0, 0%, 0%, 0.1);
+ border-color: hsl(0deg 0% 0% / 10%);
}
.elements-tree-outline ol.shadow-root {
- border-color: hsla(0, 0%, 80%, 1);
+ border-color: hsl(0deg 0% 80% / 100%);
}
li.selected:not(.always-parent) + ol.children {
- border-color: hsla(216, 68%, 80%, 1) !important;
+ border-color: hsl(216deg 68% 80% / 100%) !important;
}
@media (forced-colors: active) {
diff --git a/front_end/elements/metricsSidebarPane.css b/front_end/elements/metricsSidebarPane.css
index ba4d8fd..0d71292 100644
--- a/front_end/elements/metricsSidebarPane.css
+++ b/front_end/elements/metricsSidebarPane.css
@@ -66,7 +66,7 @@
}
.metrics .position {
- border: 1px rgb(66%, 66%, 66%) dotted;
+ border: 1px rgb(66% 66% 66%) dotted;
background-color: white;
display: inline-block;
text-align: center;
diff --git a/front_end/elements/stylesSectionTree.css b/front_end/elements/stylesSectionTree.css
index 6c606a0..e59d318 100644
--- a/front_end/elements/stylesSectionTree.css
+++ b/front_end/elements/stylesSectionTree.css
@@ -13,19 +13,19 @@
}
.tree-outline li.filter-match {
- background-color: rgba(255, 255, 0, 0.5);
+ background-color: rgb(255 255 0 / 50%);
}
:host-context(.-theme-with-dark-background) .tree-outline li.filter-match {
- background-color: hsla(133, 100%, 30%, 0.5);
+ background-color: hsl(133deg 100% 30% / 50%);
}
.tree-outline li.overloaded.filter-match {
- background-color: rgba(255, 255, 0, 0.25);
+ background-color: rgb(255 255 0 / 25%);
}
:host-context(.-theme-with-dark-background) .tree-outline li.overloaded.filter-match {
- background-color: hsla(133, 100%, 30%, 0.25);
+ background-color: hsl(133deg 100% 30% / 25%);
}
.tree-outline li.not-parsed-ok .exclamation-mark {
@@ -133,7 +133,7 @@
.implicit,
.inherited {
- opacity: 0.5;
+ opacity: 50%;
}
.has-ignorable-error {
@@ -152,11 +152,11 @@
}
:host-context(.no-affect) .tree-outline li {
- opacity: 0.5;
+ opacity: 50%;
}
:host-context(.no-affect) .tree-outline li.editing {
- opacity: 1;
+ opacity: 100%;
}
:host-context(.styles-panel-hovered:not(.read-only)) .webkit-css-property:hover,
@@ -175,7 +175,7 @@
.styles-clipboard-only {
display: inline-block;
width: 0;
- opacity: 0;
+ opacity: 0%;
pointer-events: none;
white-space: pre;
}
diff --git a/front_end/elements/stylesSidebarPane.css b/front_end/elements/stylesSidebarPane.css
index f0b2b16..9dfceb8 100644
--- a/front_end/elements/stylesSidebarPane.css
+++ b/front_end/elements/stylesSidebarPane.css
@@ -27,19 +27,19 @@
}
.styles-section[data-keyboard-focus="true"]:focus {
- background-color: hsl(214, 48%, 95%);
+ background-color: hsl(214deg 48% 95%);
}
.styles-section.read-only[data-keyboard-focus="true"]:focus {
- background-color: hsl(215, 25%, 87%);
+ background-color: hsl(215deg 25% 87%);
}
.styles-section .simple-selector.filter-match {
- background-color: rgba(255, 255, 0, 0.5);
+ background-color: rgb(255 255 0 / 50%);
}
:host-context(.-theme-with-dark-background) .styles-section .simple-selector.filter-match {
- background-color: hsla(133, 100%, 30%, 0.5);
+ background-color: hsl(133deg 100% 30% / 50%);
}
.sidebar-pane-closing-brace {
@@ -54,7 +54,7 @@
}
.styles-section-title .media-list {
- color: hsl(0, 0%, 46%);
+ color: hsl(0deg 0% 46%);
}
.styles-section-title .media-list.media-matches .media.editable-media {
@@ -68,11 +68,11 @@
.styles-section-title .media .subtitle {
float: right;
- color: hsl(0, 0%, 34%);
+ color: hsl(0deg 0% 34%);
}
.styles-section-subtitle {
- color: hsl(0, 0%, 44%);
+ color: hsl(0deg 0% 44%);
float: right;
padding-left: 15px;
max-width: 100%;
@@ -85,16 +85,16 @@
.sidebar-pane-open-brace,
.sidebar-pane-closing-brace {
- color: hsl(0, 0%, 46%);
+ color: hsl(0deg 0% 46%);
}
.styles-section .styles-section-subtitle .devtools-link {
- color: hsl(0, 0%, 44%);
- text-decoration-color: hsl(0, 0%, 60%);
+ color: hsl(0deg 0% 44%);
+ text-decoration-color: hsl(0deg 0% 60%);
}
.styles-section .selector {
- color: hsl(0, 0%, 46%);
+ color: hsl(0deg 0% 46%);
}
.styles-section .simple-selector.selector-matches,
@@ -192,7 +192,7 @@
}
.styles-sidebar-pane-filter-box > input::placeholder {
- color: rgba(0, 0, 0, 0.54);
+ color: rgb(0 0 0 / 54%);
}
.styles-section.styles-panel-hovered:not(.read-only) span.simple-selector:hover,
@@ -205,7 +205,7 @@
background-color: var(--toolbar-bg-color);
padding: 0 5px;
border-bottom: 1px solid var(--divider-color);
- color: hsla(0, 0%, 32%, 1);
+ color: hsl(0deg 0% 32% / 100%);
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
@@ -226,12 +226,12 @@
right: 0;
bottom: 0;
visibility: hidden;
- background-color: rgba(255, 255, 255, 0.9);
+ background-color: rgb(255 255 255 / 90%);
z-index: 0;
}
.styles-section[data-keyboard-focus="true"]:focus .sidebar-pane-section-toolbar {
- background-color: hsla(214, 67%, 95%, 0.9);
+ background-color: hsl(214deg 67% 95% / 90%);
}
.styles-pane:not(.is-editing-style) .styles-section.matched-styles:not(.read-only):hover .sidebar-pane-section-toolbar {
diff --git a/front_end/emulation/deviceModeToolbar.css b/front_end/emulation/deviceModeToolbar.css
index 59a2ff2..c0e90ad 100644
--- a/front_end/emulation/deviceModeToolbar.css
+++ b/front_end/emulation/deviceModeToolbar.css
@@ -18,7 +18,7 @@
.device-mode-size-input:disabled {
background: transparent;
user-select: none;
- opacity: 0.6;
+ opacity: 60%;
}
.device-mode-x {
diff --git a/front_end/emulation/deviceModeView.css b/front_end/emulation/deviceModeView.css
index f20f505..bdcdaea 100644
--- a/front_end/emulation/deviceModeView.css
+++ b/front_end/emulation/deviceModeView.css
@@ -8,12 +8,12 @@
overflow: hidden;
align-items: stretch;
flex: auto;
- background-color: hsl(0, 0%, 98%);
+ background-color: hsl(0deg 0% 98%);
}
.device-mode-toolbar {
flex: none;
- background-color: hsl(0, 0%, 98%);
+ background-color: hsl(0deg 0% 98%);
border-bottom: 1px solid #ccc;
display: flex;
flex-direction: row;
@@ -67,15 +67,15 @@
flex: auto;
justify-content: center;
position: relative;
- background-color: hsl(0, 0%, 90%);
- border: 2px solid hsl(0, 0%, 98%);
- border-bottom: 2px solid hsl(0, 0%, 98%);
+ background-color: hsl(0deg 0% 90%);
+ border: 2px solid hsl(0deg 0% 98%);
+ border-bottom: 2px solid hsl(0deg 0% 98%);
}
.device-mode-presets-container:hover {
transition: opacity 0.1s;
transition-delay: 50ms;
- opacity: 1;
+ opacity: 100%;
}
.device-mode-preset-bar-outer {
@@ -85,8 +85,8 @@
}
.device-mode-preset-bar {
- border-left: 2px solid hsl(0, 0%, 98%);
- border-right: 2px solid hsl(0, 0%, 98%);
+ border-left: 2px solid hsl(0deg 0% 98%);
+ border-right: 2px solid hsl(0deg 0% 98%);
pointer-events: auto;
text-align: center;
flex: none;
@@ -131,7 +131,7 @@
}
.device-mode-content-clip:not(.device-mode-outline-visible) .device-mode-screen-area {
- box-shadow: hsl(240, 3%, 84%) 0 0 0 0.5px, hsla(0, 0%, 80%, 0.4) 0 0 20px;
+ box-shadow: hsl(240deg 3% 84%) 0 0 0 0.5px, hsl(0deg 0% 80% / 40%) 0 0 20px;
}
.device-mode-screen-image {
@@ -152,8 +152,8 @@
}
.device-mode-resizer:hover {
- background-color: hsla(0, 0%, 0%, 0.1);
- opacity: 1;
+ background-color: hsl(0deg 0% 0% / 10%);
+ opacity: 100%;
}
.device-mode-resizer > div {
@@ -172,7 +172,7 @@
bottom: -1px;
left: -20px;
width: 20px;
- opacity: 0;
+ opacity: 0%;
}
.device-mode-bottom-resizer {
@@ -187,7 +187,7 @@
top: 0;
right: -20px;
bottom: -20px;
- background-color: hsla(0, 0%, 0%, 0.02);
+ background-color: hsl(0deg 0% 0% / 2%);
}
.device-mode-bottom-left-resizer {
@@ -195,7 +195,7 @@
top: 0;
right: 0;
bottom: -20px;
- opacity: 0;
+ opacity: 0%;
}
.device-mode-right-resizer > div {
@@ -294,11 +294,11 @@
border-top: 1px solid transparent;
right: 0;
bottom: 20px;
- background-color: hsla(0, 0%, 98%, 0.9);
+ background-color: hsl(0deg 0% 98% / 90%);
}
.device-mode-content-clip.device-mode-outline-visible .device-mode-ruler-top .device-mode-ruler-content {
- border-top: 1px solid hsl(0, 0%, 50%);
+ border-top: 1px solid hsl(0deg 0% 50%);
}
.device-mode-ruler-left .device-mode-ruler-content {
@@ -309,8 +309,8 @@
}
.device-mode-content-clip.device-mode-outline-visible .device-mode-ruler-left .device-mode-ruler-content {
- border-left: 1px solid hsl(0, 0%, 50%);
- border-top: 1px solid hsl(0, 0%, 50%);
+ border-left: 1px solid hsl(0deg 0% 50%);
+ border-top: 1px solid hsl(0deg 0% 50%);
}
.device-mode-ruler-inner {
@@ -322,7 +322,7 @@
bottom: 0;
left: 20px;
right: 0;
- border-bottom: 1px solid hsl(0, 0%, 50%);
+ border-bottom: 1px solid hsl(0deg 0% 50%);
}
.device-mode-ruler-left .device-mode-ruler-inner {
@@ -330,8 +330,8 @@
right: 0;
top: 19px;
bottom: 0;
- border-right: 1px solid hsl(0, 0%, 50%);
- background-color: hsla(0, 0%, 98%, 0.9);
+ border-right: 1px solid hsl(0deg 0% 50%);
+ background-color: hsl(0deg 0% 98% / 90%);
}
.device-mode-ruler-marker {
@@ -342,7 +342,7 @@
width: 0;
height: 5px;
bottom: 0;
- border-right: 1px solid hsl(0, 0%, 50%);
+ border-right: 1px solid hsl(0deg 0% 50%);
margin-right: -1px;
}
@@ -358,7 +358,7 @@
height: 0;
width: 5px;
right: 0;
- border-bottom: 1px solid hsl(0, 0%, 50%);
+ border-bottom: 1px solid hsl(0deg 0% 50%);
margin-bottom: -1px;
}
@@ -371,13 +371,13 @@
}
.device-mode-ruler-text {
- color: hsl(0, 0%, 50%);
+ color: hsl(0deg 0% 50%);
position: relative;
pointer-events: auto;
}
.device-mode-ruler-text:hover {
- color: hsl(0, 0%, 10%);
+ color: hsl(0deg 0% 10%);
}
.device-mode-ruler-top .device-mode-ruler-text {
diff --git a/front_end/emulation/locationsSettingsTab.css b/front_end/emulation/locationsSettingsTab.css
index 260a090..8da6a23 100644
--- a/front_end/emulation/locationsSettingsTab.css
+++ b/front_end/emulation/locationsSettingsTab.css
@@ -62,7 +62,7 @@
.locations-list-separator {
flex: 0 0 1px;
- background-color: rgb(231, 231, 231);
+ background-color: rgb(231 231 231);
height: 30px;
margin: 0 4px;
}
diff --git a/front_end/emulation/mediaQueryInspector.css b/front_end/emulation/mediaQueryInspector.css
index b3ec12b..9cb3059 100644
--- a/front_end/emulation/mediaQueryInspector.css
+++ b/front_end/emulation/mediaQueryInspector.css
@@ -43,27 +43,27 @@
.media-inspector-marker:hover {
margin: -1px 0;
- opacity: 1;
+ opacity: 100%;
}
.media-inspector-marker-max-width {
- background-color: hsl(207, 90%, 77%);
- border-right: 2px solid hsl(207, 90%, 61%);
- border-left: 2px solid hsl(207, 90%, 61%);
+ background-color: hsl(207deg 90% 77%);
+ border-right: 2px solid hsl(207deg 90% 61%);
+ border-left: 2px solid hsl(207deg 90% 61%);
}
.media-inspector-marker-inactive .media-inspector-marker-max-width:not(:hover) {
- background-color: hsl(199, 94%, 94%);
+ background-color: hsl(199deg 94% 94%);
}
.media-inspector-marker-min-max-width {
- background-color: hsl(88, 50%, 76%);
+ background-color: hsl(88deg 50% 76%);
border-left: 2px solid #689f38;
- border-right: 2px solid hsl(92, 48%, 42%);
+ border-right: 2px solid hsl(92deg 48% 42%);
}
.media-inspector-marker-inactive .media-inspector-marker-min-max-width:not(:hover) {
- background-color: hsl(125, 39%, 94%);
+ background-color: hsl(125deg 39% 94%);
}
.media-inspector-marker-min-max-width:hover {
@@ -71,20 +71,20 @@
}
.media-inspector-marker-min-width {
- background-color: hsl(36, 100%, 75%);
+ background-color: hsl(36deg 100% 75%);
flex: auto;
}
.media-inspector-marker-inactive .media-inspector-marker-min-width:not(:hover) {
- background-color: hsl(37, 100%, 94%);
+ background-color: hsl(37deg 100% 94%);
}
.media-inspector-marker-min-width-right {
- border-left: 2px solid hsl(30, 100%, 48%);
+ border-left: 2px solid hsl(30deg 100% 48%);
}
.media-inspector-marker-min-width-left {
- border-right: 2px solid hsl(30, 100%, 48%);
+ border-right: 2px solid hsl(30deg 100% 48%);
}
/* Media query labels */
diff --git a/front_end/emulation/sensors.css b/front_end/emulation/sensors.css
index bb3ed69..24aa491 100644
--- a/front_end/emulation/sensors.css
+++ b/front_end/emulation/sensors.css
@@ -17,7 +17,7 @@
}
.sensors-view input[readonly] {
- background-color: rgb(235, 235, 228);
+ background-color: rgb(235 235 228);
}
.sensors-view fieldset {
@@ -29,7 +29,7 @@
}
.sensors-view fieldset[disabled] {
- opacity: 0.5;
+ opacity: 50%;
}
.sensors-view input:focus::-webkit-input-placeholder {
@@ -93,7 +93,7 @@
.orientation-stage.disabled {
-webkit-filter: grayscale();
- opacity: 0.5;
+ opacity: 50%;
cursor: default !important;
}
@@ -294,6 +294,6 @@
@media (forced-colors: active) {
.sensors-view fieldset[disabled] {
- opacity: 1;
+ opacity: 100%;
}
}
diff --git a/front_end/event_listeners/eventListenersView.css b/front_end/event_listeners/eventListenersView.css
index ecf8f05..c58a58d 100644
--- a/front_end/event_listeners/eventListenersView.css
+++ b/front_end/event_listeners/eventListenersView.css
@@ -30,7 +30,7 @@
}
.tree-outline-disclosure .name {
- color: rgb(136, 19, 145);
+ color: rgb(136 19 145);
}
.tree-outline-disclosure .object-value-node {
@@ -56,13 +56,13 @@
margin-left: 10px;
display: block;
cursor: pointer;
- opacity: 0.8;
+ opacity: 80%;
flex-shrink: 0;
}
.event-listener-button:hover {
background-color: #e0e0e0;
- opacity: 1;
+ opacity: 100%;
}
.tree-outline-disclosure li:hover .event-listener-button {
@@ -72,7 +72,7 @@
@media (forced-colors: active) {
.event-listener-details .event-listener-button {
forced-color-adjust: none;
- opacity: 1;
+ opacity: 100%;
background: ButtonFace;
color: ButtonText;
border-color: ButtonText;
diff --git a/front_end/help/releaseNote.css b/front_end/help/releaseNote.css
index 34b9271..40d9220 100644
--- a/front_end/help/releaseNote.css
+++ b/front_end/help/releaseNote.css
@@ -55,7 +55,7 @@
}
.release-note-container .release-note-link {
- border: 1px solid rgba(0, 0, 0, 0.2);
+ border: 1px solid rgb(0 0 0 / 20%);
padding-left: 8px;
padding-right: 8px;
margin-bottom: 4px;
@@ -63,7 +63,7 @@
}
.release-note-container .release-note-link:hover {
- box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.5) inset;
+ box-shadow: 0 0 0 1px rgb(0 0 0 / 50%) inset;
}
.release-note-title,
@@ -100,11 +100,11 @@
width: 260px;
height: 200px;
flex: none;
- box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
+ box-shadow: 0 2px 4px rgb(0 0 0 / 30%);
}
img:hover {
- box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
+ box-shadow: 0 2px 4px rgb(0 0 0 / 50%);
}
@media (forced-colors: active) {
diff --git a/front_end/inline_editor/bezierEditor.css b/front_end/inline_editor/bezierEditor.css
index ee37eca..346a208 100644
--- a/front_end/inline_editor/bezierEditor.css
+++ b/front_end/inline_editor/bezierEditor.css
@@ -53,14 +53,14 @@
}
.bezier-curve line.linear-line {
- stroke: rgb(238, 238, 238);
+ stroke: rgb(238 238 238);
stroke-width: 2;
stroke-linecap: round;
fill: none;
}
:host-context(.-theme-with-dark-background) .bezier-curve line.linear-line {
- stroke: rgb(138, 138, 138);
+ stroke: rgb(138 138 138);
}
.bezier-curve line.bezier-control-line {
@@ -68,7 +68,7 @@
stroke-width: 2;
stroke-linecap: round;
fill: none;
- opacity: 0.6;
+ opacity: 60%;
}
.bezier-curve circle.bezier-control-circle {
@@ -92,7 +92,7 @@
height: 20px;
z-index: 2;
flex-shrink: 0;
- opacity: 0;
+ opacity: 0%;
}
.bezier-preview-animation {
@@ -110,7 +110,7 @@
}
.bezier-preview-onion > .bezier-preview-animation {
- opacity: 0.1;
+ opacity: 10%;
}
svg.bezier-preset-modify {
@@ -139,7 +139,7 @@
}
.bezier-preset-selected .bezier-preset-modify {
- opacity: 1;
+ opacity: 100%;
}
.bezier-preset-category {
diff --git a/front_end/inline_editor/colorSwatch.css b/front_end/inline_editor/colorSwatch.css
index 478a711..2405483 100644
--- a/front_end/inline_editor/colorSwatch.css
+++ b/front_end/inline_editor/colorSwatch.css
@@ -25,12 +25,12 @@
width: 100%;
height: 100%;
display: inline-block;
- border: 1px solid rgba(128, 128, 128, 0.6);
+ border: 1px solid rgb(128 128 128 / 60%);
cursor: default;
}
.color-swatch-inner:hover {
- border: 1px solid rgba(64, 64, 64, 0.8);
+ border: 1px solid rgb(64 64 64 / 80%);
}
@media (forced-colors: active) {
diff --git a/front_end/inline_editor/cssShadowEditor.css b/front_end/inline_editor/cssShadowEditor.css
index 7094a92..87bab5e 100644
--- a/front_end/inline_editor/cssShadowEditor.css
+++ b/front_end/inline_editor/cssShadowEditor.css
@@ -35,7 +35,7 @@
position: absolute;
height: 88px;
width: 88px;
- border: 1px solid rgba(0, 0, 0, 0.14);
+ border: 1px solid rgb(0 0 0 / 14.000000000000002%);
border-radius: 2px;
}
@@ -54,7 +54,7 @@
height: 24px;
padding: 3px 7px;
line-height: 16px;
- border: 1px solid rgba(0, 0, 0, 0.14);
+ border: 1px solid rgb(0 0 0 / 14.000000000000002%);
color: #333;
background-color: #fff;
text-align: center;
@@ -72,7 +72,7 @@
.shadow-editor-button-left:hover,
.shadow-editor-button-right:hover {
- box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
+ box-shadow: 0 1px 1px rgb(0 0 0 / 10%);
}
.shadow-editor-button-left:focus,
diff --git a/front_end/inspector_main/nodeIcon.css b/front_end/inspector_main/nodeIcon.css
index 3033fac..860726e 100644
--- a/front_end/inspector_main/nodeIcon.css
+++ b/front_end/inspector_main/nodeIcon.css
@@ -11,12 +11,12 @@
background-size: 17px 17px;
background-repeat: no-repeat;
background-position: center;
- opacity: 0.8;
+ opacity: 80%;
cursor: auto;
}
.node-icon:hover {
- opacity: 1;
+ opacity: 100%;
}
.node-icon.inactive {
diff --git a/front_end/inspector_overlay/common.css b/front_end/inspector_overlay/common.css
index bc33865..8778774 100644
--- a/front_end/inspector_overlay/common.css
+++ b/front_end/inspector_overlay/common.css
@@ -16,7 +16,7 @@
}
body.platform-mac {
- color: rgb(48, 57, 66);
+ color: rgb(48 57 66);
font-family: '.SFNSDisplay-Regular', 'Helvetica Neue', 'Lucida Grande', sans-serif;
}
diff --git a/front_end/issues/issuesTree.css b/front_end/issues/issuesTree.css
index 495f83a..716709e 100644
--- a/front_end/issues/issuesTree.css
+++ b/front_end/issues/issuesTree.css
@@ -269,7 +269,7 @@
.affected-resource-header {
font-size: 12px;
- color: rgba(95, 99, 104, 0.5);
+ color: rgb(95 99 104 / 50%);
padding-left: 2px;
}
diff --git a/front_end/layer_viewer/layerDetailsView.css b/front_end/layer_viewer/layerDetailsView.css
index 80e06e8..9b66de7 100644
--- a/front_end/layer_viewer/layerDetailsView.css
+++ b/front_end/layer_viewer/layerDetailsView.css
@@ -13,7 +13,7 @@
}
.scroll-rect.active {
- background-color: rgba(100, 100, 100, 0.2);
+ background-color: rgb(100 100 100 / 20%);
}
ul {
diff --git a/front_end/layer_viewer/paintProfiler.css b/front_end/layer_viewer/paintProfiler.css
index 75a01a0..f44bd19 100644
--- a/front_end/layer_viewer/paintProfiler.css
+++ b/front_end/layer_viewer/paintProfiler.css
@@ -24,7 +24,7 @@
.paint-profiler-canvas-container canvas {
z-index: 200;
background-color: white;
- opacity: 0.95;
+ opacity: 95%;
height: 100%;
width: 100%;
}
diff --git a/front_end/media/playerListView.css b/front_end/media/playerListView.css
index 483247b..f398b9a 100644
--- a/front_end/media/playerListView.css
+++ b/front_end/media/playerListView.css
@@ -6,7 +6,7 @@
.tree-outline {
padding-left: 0;
- color: rgb(90, 90, 90);
+ color: rgb(90 90 90);
}
li.storage-group-list-item {
@@ -14,7 +14,7 @@
}
li.storage-group-list-item:not(:first-child) {
- border-top: 1px solid rgb(230, 230, 230);
+ border-top: 1px solid rgb(230 230 230);
}
li.storage-group-list-item::before {
diff --git a/front_end/media/playerPropertiesView.css b/front_end/media/playerPropertiesView.css
index a78bfcc..8e265db 100644
--- a/front_end/media/playerPropertiesView.css
+++ b/front_end/media/playerPropertiesView.css
@@ -29,15 +29,15 @@
}
.media-property-renderer:nth-child(even) {
- background: hsl(214, 0%, 97%);
+ background: hsl(214deg 0% 97%);
}
.-theme-with-dark-background .media-property-renderer:nth-child(even) {
- background: rgb(41, 41, 41);
+ background: rgb(41 41 41);
}
.media-property-renderer:hover {
- background: hsl(214, 70%, 97%);
+ background: hsl(214deg 70% 97%);
}
.media-properties-frame {
diff --git a/front_end/mobile_throttling/throttlingSettingsTab.css b/front_end/mobile_throttling/throttlingSettingsTab.css
index 92aa16a..ca510b5 100644
--- a/front_end/mobile_throttling/throttlingSettingsTab.css
+++ b/front_end/mobile_throttling/throttlingSettingsTab.css
@@ -64,7 +64,7 @@
.conditions-list-separator {
flex: 0 0 1px;
- background-color: rgb(231, 231, 231);
+ background-color: rgb(231 231 231);
height: 30px;
margin: 0 4px;
}
@@ -90,5 +90,5 @@
position: absolute;
bottom: -20px;
right: 0;
- color: rgb(128, 128, 128);
+ color: rgb(128 128 128);
}
diff --git a/front_end/network/binaryResourceView.css b/front_end/network/binaryResourceView.css
index e56f864..1eb42d4 100644
--- a/front_end/network/binaryResourceView.css
+++ b/front_end/network/binaryResourceView.css
@@ -11,10 +11,10 @@
}
.binary-view-copied-text {
- opacity: 1;
+ opacity: 100%;
}
.binary-view-copied-text.fadeout {
- opacity: 0;
+ opacity: 0%;
transition: opacity 1s;
}
diff --git a/front_end/network/blockedURLsPane.css b/front_end/network/blockedURLsPane.css
index 4846bca..4d91333 100644
--- a/front_end/network/blockedURLsPane.css
+++ b/front_end/network/blockedURLsPane.css
@@ -11,7 +11,7 @@
.blocking-disabled {
pointer-events: none;
- opacity: 0.8;
+ opacity: 80%;
}
.editor-container {
diff --git a/front_end/network/networkConfigView.css b/front_end/network/networkConfigView.css
index 93bcaf2..ae0d5c9 100644
--- a/front_end/network/networkConfigView.css
+++ b/front_end/network/networkConfigView.css
@@ -72,7 +72,7 @@
}
.network-config-ua input[readonly] {
- background-color: rgb(235, 235, 228);
+ background-color: rgb(235 235 228);
}
.network-config-ua input[type=text],
@@ -90,9 +90,9 @@
}
.network-config-ua-custom {
- opacity: 0.5;
+ opacity: 50%;
}
.network-config-ua-custom.checked {
- opacity: 1;
+ opacity: 100%;
}
diff --git a/front_end/network/networkLogView.css b/front_end/network/networkLogView.css
index 41b8ec8..ff9c9e9 100644
--- a/front_end/network/networkLogView.css
+++ b/front_end/network/networkLogView.css
@@ -38,7 +38,7 @@
}
#network-container {
- border: 1px solid rgb(204, 204, 204);
+ border: 1px solid rgb(204 204 204);
}
#network-container.grid-focused.no-node-selected:focus-within {
@@ -89,8 +89,8 @@
.network-waterfall-header,
.network-log-grid.data-grid th {
- border-bottom: 1px solid rgb(205, 205, 205);
- border-left: 1px solid rgb(205, 205, 205);
+ border-bottom: 1px solid rgb(205 205 205);
+ border-left: 1px solid rgb(205 205 205);
}
.network-log-grid.data-grid table.data th {
@@ -154,13 +154,13 @@
.network-log-grid.data-grid tr.selected.network-error-row,
.network-log-grid.data-grid tr.selected.network-error-row .network-cell-subtitle,
.network-log-grid.data-grid tr.selected.network-error-row .network-dim-cell {
- color: rgb(230, 0, 0) !important;
+ color: rgb(230 0 0) !important;
}
.network-log-grid.data-grid:focus tr.selected.network-error-row,
.network-log-grid.data-grid:focus tr.selected.network-error-row .network-cell-subtitle,
.network-log-grid.data-grid:focus tr.selected.network-error-row .network-dim-cell {
- color: rgb(230, 0, 0) !important;
+ color: rgb(230 0 0) !important;
}
.initiator-column .devtools-link {
@@ -184,8 +184,8 @@
}
@-webkit-keyframes network-row-highlight-fadeout {
- from { background-color: rgba(255, 255, 120, 1); }
- to { background-color: rgba(255, 255, 120, 0); }
+ from { background-color: rgb(255 255 120 / 100%); }
+ to { background-color: rgb(255 255 120 / 0%); }
}
.network-header-subtitle {
@@ -362,7 +362,7 @@
}
.network-waterfall-header:hover {
- background-color: hsla(0, 0%, 10%, 0.1);
+ background-color: hsl(0deg 0% 10% / 10%);
}
.network-waterfall-header div {
diff --git a/front_end/network/networkPanel.css b/front_end/network/networkPanel.css
index e6c7986..84cd26e 100644
--- a/front_end/network/networkPanel.css
+++ b/front_end/network/networkPanel.css
@@ -33,7 +33,7 @@
}
.network-details-view {
- background: rgb(203, 203, 203);
+ background: rgb(203 203 203);
}
.network-details-view-tall-header {
@@ -53,7 +53,7 @@
.resource-timing-view {
display: block;
margin: 6px;
- color: rgb(30%, 30%, 30%);
+ color: rgb(30% 30% 30%);
}
.resource-timing-table {
@@ -88,7 +88,7 @@
}
.network-overview .resources-dividers-label-bar {
- background-color: rgba(255, 255, 255, 0.95);
+ background-color: rgb(255 255 255 / 95%);
}
.network-overview .resources-dividers-label-bar .resources-divider {
diff --git a/front_end/network/networkTimingTable.css b/front_end/network/networkTimingTable.css
index b1447fe..c199a40 100644
--- a/front_end/network/networkTimingTable.css
+++ b/front_end/network/networkTimingTable.css
@@ -54,7 +54,7 @@
.network-timing-table td.caution {
font-weight: bold;
- color: rgb(255, 128, 0);
+ color: rgb(255 128 0);
padding: 2px 0;
}
@@ -89,7 +89,7 @@
.network-timing-bar.queueing,
.network-timing-bar.total {
- border: 1px solid rgba(0, 0, 0, 0.1);
+ border: 1px solid rgb(0 0 0 / 10%);
}
.network-timing-bar.blocking,
diff --git a/front_end/network/requestCookiesView.css b/front_end/network/requestCookiesView.css
index 0381368..7968fb6 100644
--- a/front_end/network/requestCookiesView.css
+++ b/front_end/network/requestCookiesView.css
@@ -14,7 +14,7 @@
font-size: 12px;
font-weight: bold;
margin-right: 30px;
- color: rgb(97, 97, 97);
+ color: rgb(97 97 97);
}
.request-cookies-view .cookie-line {
diff --git a/front_end/network/requestHeadersTree.css b/front_end/network/requestHeadersTree.css
index 298cbea..cb0e432 100644
--- a/front_end/network/requestHeadersTree.css
+++ b/front_end/network/requestHeadersTree.css
@@ -62,16 +62,16 @@
display: inline;
margin-left: 30px;
font-weight: normal;
- color: rgb(45%, 45%, 45%);
+ color: rgb(45% 45% 45%);
}
.tree-outline li .header-toggle:hover {
- color: rgb(20%, 20%, 45%);
+ color: rgb(20% 20% 45%);
cursor: pointer;
}
.tree-outline .header-name {
- color: rgb(33%, 33%, 33%);
+ color: rgb(33% 33% 33%);
display: inline-block;
margin-right: 0.25em;
font-weight: bold;
@@ -144,7 +144,7 @@
}
.tree-outline .empty-request-header {
- color: rgba(33%, 33%, 33%, 0.5);
+ color: rgb(33% 33% 33% / 50%);
}
.request-headers-show-more-button {
diff --git a/front_end/network/requestHeadersView.css b/front_end/network/requestHeadersView.css
index 7d6049c..bd4449d 100644
--- a/front_end/network/requestHeadersView.css
+++ b/front_end/network/requestHeadersView.css
@@ -25,5 +25,5 @@
}
.-theme-with-dark-background .header-decode-error {
- color: hsl(0, 100%, 65%);
+ color: hsl(0deg 100% 65%);
}
diff --git a/front_end/network/requestInitiatorView.css b/front_end/network/requestInitiatorView.css
index 9e92765..5227d2f 100644
--- a/front_end/network/requestInitiatorView.css
+++ b/front_end/network/requestInitiatorView.css
@@ -15,7 +15,7 @@
}
.request-initiator-view-section-title[data-keyboard-focus="true"]:focus {
- background-color: rgba(0, 0, 0, 0.08);
+ background-color: rgb(0 0 0 / 8%);
}
.request-initiator-view-section-content {
diff --git a/front_end/network/signedExchangeInfoTree.css b/front_end/network/signedExchangeInfoTree.css
index 354dc4b..dd63e2e 100644
--- a/front_end/network/signedExchangeInfoTree.css
+++ b/front_end/network/signedExchangeInfoTree.css
@@ -39,7 +39,7 @@
}
.tree-outline .header-name {
- color: rgb(33%, 33%, 33%);
+ color: rgb(33% 33% 33%);
display: inline-block;
margin-right: 0.25em;
font-weight: bold;
@@ -63,11 +63,11 @@
display: inline;
margin-left: 30px;
font-weight: normal;
- color: rgb(45%, 45%, 45%);
+ color: rgb(45% 45% 45%);
}
.tree-outline .header-toggle:hover {
- color: rgb(20%, 20%, 45%);
+ color: rgb(20% 20% 45%);
cursor: pointer;
}
diff --git a/front_end/network/webSocketFrameView.css b/front_end/network/webSocketFrameView.css
index b96ec1d..f0c9db8 100644
--- a/front_end/network/webSocketFrameView.css
+++ b/front_end/network/webSocketFrameView.css
@@ -48,12 +48,12 @@
}
.websocket-frame-view-row-send {
- background-color: rgb(226, 247, 218);
+ background-color: rgb(226 247 218);
}
.websocket-frame-view-row-error {
- background-color: rgb(255, 237, 237);
- color: rgb(182, 0, 0);
+ background-color: rgb(255 237 237);
+ color: rgb(182 0 0);
}
.websocket-frame-view .toolbar {
diff --git a/front_end/object_ui/customPreviewComponent.css b/front_end/object_ui/customPreviewComponent.css
index 8c62d05..a177340 100644
--- a/front_end/object_ui/customPreviewComponent.css
+++ b/front_end/object_ui/customPreviewComponent.css
@@ -11,7 +11,7 @@
.custom-expand-icon {
user-select: none;
- opacity: 0.5;
+ opacity: 50%;
margin-right: 4px;
margin-bottom: -2px;
background: black;
diff --git a/front_end/object_ui/objectPopover.css b/front_end/object_ui/objectPopover.css
index 36974b5..1194d7c 100644
--- a/front_end/object_ui/objectPopover.css
+++ b/front_end/object_ui/objectPopover.css
@@ -21,7 +21,7 @@
}
.object-popover-tree {
- border-top: 1px solid rgb(184, 184, 184);
+ border-top: 1px solid rgb(184 184 184);
overflow: auto;
width: 100%;
height: calc(100% - 13px);
diff --git a/front_end/object_ui/objectPropertiesSection.css b/front_end/object_ui/objectPropertiesSection.css
index 9f2bec0..9f4a33e 100644
--- a/front_end/object_ui/objectPropertiesSection.css
+++ b/front_end/object_ui/objectPropertiesSection.css
@@ -5,12 +5,12 @@
*/
.object-properties-section-dimmed {
- opacity: 0.6;
+ opacity: 60%;
}
.object-properties-section {
padding: 0 0 0 0;
- color: rgb(33, 33, 33) !important;
+ color: rgb(33 33 33) !important;
display: flex;
flex-direction: column;
}
@@ -84,7 +84,7 @@
@media (forced-colors: active) {
.object-properties-section-dimmed {
- opacity: 1;
+ opacity: 100%;
}
.tree-outline.hide-selection-when-blurred .selected:focus[data-keyboard-focus="true"] {
diff --git a/front_end/object_ui/objectValue.css b/front_end/object_ui/objectValue.css
index 697d591..2c256f2 100644
--- a/front_end/object_ui/objectValue.css
+++ b/front_end/object_ui/objectValue.css
@@ -25,7 +25,7 @@
.object-value-function-prefix,
.object-value-boolean {
- color: rgb(13, 34, 170);
+ color: rgb(13 34 170);
}
.object-value-function {
@@ -33,16 +33,16 @@
}
.object-value-function.linkified:hover {
- background-color: rgba(0, 0, 0, 0.1);
+ background-color: rgb(0 0 0 / 10%);
cursor: pointer;
}
.object-value-number {
- color: rgb(28, 0, 207);
+ color: rgb(28 0 207);
}
.object-value-bigint {
- color: rgb(0, 93, 0);
+ color: rgb(0 93 0);
}
.object-value-string,
@@ -50,7 +50,7 @@
.object-value-symbol {
white-space: pre;
unicode-bidi: -webkit-isolate;
- color: rgb(196, 26, 22);
+ color: rgb(196 26 22);
}
.-theme-with-dark-background .object-value-string,
@@ -59,7 +59,7 @@
:host-context(.-theme-with-dark-background) .object-value-regexp,
.-theme-with-dark-background .object-value-symbol,
:host-context(.-theme-with-dark-background) .object-value-symbol {
- color: rgb(242, 139, 84);
+ color: rgb(242 139 84);
}
.object-value-string-quote {
@@ -69,7 +69,7 @@
.object-value-node {
position: relative;
vertical-align: baseline;
- color: rgb(48, 57, 66);
+ color: rgb(48 57 66);
display: inline-block;
}
@@ -98,7 +98,7 @@
:host-context(.-theme-with-dark-background) .object-value-number,
.-theme-with-dark-background .object-value-boolean,
:host-context(.-theme-with-dark-background) .object-value-boolean {
- color: hsl(252, 100%, 75%);
+ color: hsl(252deg 100% 75%);
}
.object-properties-section .object-description {
@@ -110,7 +110,7 @@
}
.name {
- color: rgb(136, 19, 145);
+ color: rgb(136 19 145);
flex-shrink: 0;
}
diff --git a/front_end/perf_ui/chartViewport.css b/front_end/perf_ui/chartViewport.css
index 068ec69..bd42467 100644
--- a/front_end/perf_ui/chartViewport.css
+++ b/front_end/perf_ui/chartViewport.css
@@ -31,12 +31,12 @@
}
:host-context(.platform-mac) ::-webkit-scrollbar-thumb {
- background-color: hsla(0, 0%, 56%, 0.6);
+ background-color: hsl(0deg 0% 56% / 60%);
border-radius: 50px;
}
:host-context(.platform-mac) .chart-viewport-v-scroll:hover::-webkit-scrollbar-thumb {
- background-color: hsla(0, 0%, 25%, 0.6);
+ background-color: hsl(0deg 0% 25% / 60%);
}
/* force non overlay scrollbars for Aura Overlay Scrollbar enabled */
@@ -46,18 +46,18 @@
}
:host-context(.overlay-scrollbar-enabled) ::-webkit-scrollbar-thumb {
- background-color: hsla(0, 0%, 0%, 0.5);
+ background-color: hsl(0deg 0% 0% / 50%);
}
:host-context(.overlay-scrollbar-enabled) .chart-viewport-v-scroll:hover::-webkit-scrollbar-thumb {
- background-color: hsla(0, 0%, 0%, 0.7);
+ background-color: hsl(0deg 0% 0% / 70%);
}
.chart-viewport-selection-overlay {
position: absolute;
z-index: 100;
- background-color: rgba(56, 121, 217, 0.3);
- border-color: rgb(16, 81, 177);
+ background-color: rgb(56 121 217 / 30%);
+ border-color: rgb(16 81 177);
border-width: 0 1px;
border-style: solid;
pointer-events: none;
diff --git a/front_end/perf_ui/flameChart.css b/front_end/perf_ui/flameChart.css
index 77523d0..55a4260 100644
--- a/front_end/perf_ui/flameChart.css
+++ b/front_end/perf_ui/flameChart.css
@@ -26,18 +26,18 @@
.flame-chart-highlight-element {
position: absolute;
pointer-events: none;
- background-color: rgba(56, 121, 217, 0.1);
+ background-color: rgb(56 121 217 / 10%);
}
.flame-chart-selected-element {
position: absolute;
pointer-events: none;
outline: 2px solid var(--selection-bg-color);
- background-color: rgba(56, 121, 217, 0.1);
+ background-color: rgb(56 121 217 / 10%);
}
.flame-chart-unfocused-selected-element {
- outline: 2px solid rgba(123, 123, 123, 1);
+ outline: 2px solid rgb(123 123 123 / 100%);
}
.chart-cursor-element {
diff --git a/front_end/perf_ui/overviewGrid.css b/front_end/perf_ui/overviewGrid.css
index c5834ef..54c4296 100644
--- a/front_end/perf_ui/overviewGrid.css
+++ b/front_end/perf_ui/overviewGrid.css
@@ -8,7 +8,7 @@
position: absolute;
top: 0;
bottom: 0;
- background-color: rgba(125, 173, 217, 0.5);
+ background-color: rgb(125 173 217 / 50%);
z-index: 250;
pointer-events: none;
}
@@ -19,7 +19,7 @@
height: 20px;
width: 6px;
margin-left: -3px;
- background-color: rgb(153, 153, 153);
+ background-color: rgb(153 153 153);
border: 1px solid white;
z-index: 500;
}
@@ -43,7 +43,7 @@
top: 0;
bottom: 0;
width: 2px;
- background-color: hsla(220, 95%, 50%, 0.7);
+ background-color: hsl(220deg 95% 50% / 70%);
z-index: 500;
pointer-events: none;
visibility: hidden;
@@ -52,13 +52,13 @@
.window-curtain-left,
.window-curtain-right {
- background-color: hsla(0, 0%, 80%, 0.5);
+ background-color: hsl(0deg 0% 80% / 50%);
position: absolute;
top: 0;
height: 100%;
z-index: 300;
pointer-events: none;
- border: 1px none hsla(0, 0%, 70%, 0.5);
+ border: 1px none hsl(0deg 0% 70% / 50%);
}
.window-curtain-left {
diff --git a/front_end/perf_ui/pieChart.css b/front_end/perf_ui/pieChart.css
index fb5cc1e..4591fad 100644
--- a/front_end/perf_ui/pieChart.css
+++ b/front_end/perf_ui/pieChart.css
@@ -29,7 +29,7 @@
.pie-chart-total {
margin: auto;
padding: 2px 5px;
- background-color: rgba(255, 255, 255, 0.6);
+ background-color: rgb(255 255 255 / 60%);
pointer-events: auto;
}
@@ -69,7 +69,7 @@
margin: 0 6px;
top: 1px;
position: relative;
- border: 1px solid rgba(100, 100, 100, 0.2);
+ border: 1px solid rgb(100 100 100 / 20%);
}
.pie-chart-swatch.pie-chart-empty-swatch {
diff --git a/front_end/perf_ui/timelineGrid.css b/front_end/perf_ui/timelineGrid.css
index 58b2e91..8f8c33a 100644
--- a/front_end/perf_ui/timelineGrid.css
+++ b/front_end/perf_ui/timelineGrid.css
@@ -28,7 +28,7 @@
top: 0;
left: 0;
right: 0;
- background-color: rgba(255, 255, 255, 0.85);
+ background-color: rgb(255 255 255 / 85%);
background-clip: padding-box;
height: 20px;
z-index: 200;
@@ -41,7 +41,7 @@
width: 1px;
top: 0;
bottom: 0;
- background-color: rgba(0, 0, 0, 0.1);
+ background-color: rgb(0 0 0 / 10%);
}
.resources-event-divider {
diff --git a/front_end/performance_monitor/performanceMonitor.css b/front_end/performance_monitor/performanceMonitor.css
index 05f87be..18bdce50 100644
--- a/front_end/performance_monitor/performanceMonitor.css
+++ b/front_end/performance_monitor/performanceMonitor.css
@@ -9,7 +9,7 @@
}
.perfmon-pane.suspended {
- opacity: 0.4;
+ opacity: 40%;
pointer-events: none;
}
@@ -82,5 +82,5 @@
}
.perfmon-indicator:not(.active) .perfmon-indicator-value {
- opacity: 0;
+ opacity: 0%;
}
diff --git a/front_end/profiler/heapProfiler.css b/front_end/profiler/heapProfiler.css
index 03ff0ab..e768333 100644
--- a/front_end/profiler/heapProfiler.css
+++ b/front_end/profiler/heapProfiler.css
@@ -82,7 +82,7 @@
.heap-snapshot-view .heap-snapshot-view-resizer {
background-image: url(Images/toolbarResizerVertical.png);
background-color: #eee;
- border-bottom: 1px solid rgb(179, 179, 179);
+ border-bottom: 1px solid rgb(179 179 179);
background-repeat: no-repeat;
background-position: right center, center;
flex: 0 0 21px;
@@ -144,7 +144,7 @@
}
.cycled-ancessor-node {
- opacity: 0.6;
+ opacity: 60%;
}
#heap-recording-view .profile-view {
@@ -164,7 +164,7 @@
}
#heap-recording-overview-container {
- border-bottom: 1px solid rgba(0, 0, 0, 0.3);
+ border-bottom: 1px solid rgb(0 0 0 / 30%);
overflow: hidden;
}
@@ -188,12 +188,12 @@
.heap-allocation-stack .stack-frame {
display: flex;
justify-content: space-between;
- border-bottom: 1px solid rgb(240, 240, 240);
+ border-bottom: 1px solid rgb(240 240 240);
padding: 2px;
}
.heap-allocation-stack .stack-frame:hover:not(:focus) {
- background-color: rgba(0, 0, 0, 0.1);
+ background-color: rgb(0 0 0 / 10%);
}
.heap-allocation-stack .stack-frame:focus {
@@ -206,7 +206,7 @@
}
.heap-allocation-stack .stack-frame .devtools-link {
- color: rgb(33%, 33%, 33%);
+ color: rgb(33% 33% 33%);
}
.heap-allocation-stack .stack-frame:focus .devtools-link {
@@ -219,7 +219,7 @@
@media (forced-colors: active) {
.cycled-ancessor-node {
- opacity: 1;
+ opacity: 100%;
}
.heap-snapshot-view td.object-column .objects-count,
diff --git a/front_end/profiler/profileLauncherView.css b/front_end/profiler/profileLauncherView.css
index d3d8dfe..3adad11 100644
--- a/front_end/profiler/profileLauncherView.css
+++ b/front_end/profiler/profileLauncherView.css
@@ -24,7 +24,7 @@
}
.profile-launcher-view-content p {
- color: hsl(0, 0%, 45%);
+ color: hsl(0deg 0% 45%);
margin-top: 1px;
margin-left: 22px;
}
@@ -34,15 +34,15 @@
}
.profile-launcher-view-content button.running {
- color: hsl(0, 100%, 58%);
+ color: hsl(0deg 100% 58%);
}
.profile-launcher-view-content button.running:hover {
- color: hsl(0, 100%, 42%);
+ color: hsl(0deg 100% 42%);
}
body.inactive .profile-launcher-view-content button.running:not(.toolbar-item) {
- color: rgb(220, 130, 130);
+ color: rgb(220 130 130);
}
.profile-launcher-view-content > div {
diff --git a/front_end/profiler/profilesPanel.css b/front_end/profiler/profilesPanel.css
index 5e8ab71..7a651af 100644
--- a/front_end/profiler/profilesPanel.css
+++ b/front_end/profiler/profilesPanel.css
@@ -39,11 +39,11 @@
}
.profile-view .data-grid tr:not(.selected) .highlight {
- background-color: rgb(255, 230, 179);
+ background-color: rgb(255 230 179);
}
.profile-view .data-grid tr:hover td:not(.bottom-filler-td) {
- background-color: rgba(0, 0, 0, 0.1);
+ background-color: rgb(0 0 0 / 10%);
}
.profile-view .data-grid td.numeric-column {
@@ -105,7 +105,7 @@
}
.data-grid tr.selected .profile-node-file {
- color: rgb(33%, 33%, 33%);
+ color: rgb(33% 33% 33%);
}
.data-grid:focus tr.selected .profile-node-file {
@@ -117,8 +117,8 @@
}
@-webkit-keyframes row_highlight {
- from { background-color: rgba(255, 255, 120, 1); }
- to { background-color: rgba(255, 255, 120, 0); }
+ from { background-color: rgb(255 255 120 / 100%); }
+ to { background-color: rgb(255 255 120 / 0%); }
}
.cpu-profile-flame-chart-overview-container {
@@ -130,7 +130,7 @@
}
#cpu-profile-flame-chart-overview-container {
- border-bottom: 1px solid rgba(0, 0, 0, 0.3);
+ border-bottom: 1px solid rgb(0 0 0 / 30%);
overflow: hidden;
}
diff --git a/front_end/profiler/profilesSidebarTree.css b/front_end/profiler/profilesSidebarTree.css
index e3b354c..ff0c097 100644
--- a/front_end/profiler/profilesSidebarTree.css
+++ b/front_end/profiler/profilesSidebarTree.css
@@ -38,8 +38,8 @@
padding: 0 10px;
white-space: nowrap;
margin-top: 1px;
- color: rgb(92, 110, 129);
- text-shadow: rgba(255, 255, 255, 0.75) 0 1px 0;
+ color: rgb(92 110 129);
+ text-shadow: rgb(255 255 255 / 75%) 0 1px 0;
line-height: 18px;
}
diff --git a/front_end/protocol_monitor/protocolMonitor.css b/front_end/protocol_monitor/protocolMonitor.css
index cc416b6..25dd825 100644
--- a/front_end/protocol_monitor/protocolMonitor.css
+++ b/front_end/protocol_monitor/protocolMonitor.css
@@ -25,7 +25,7 @@
}
.protocol-message-sent {
- background-color: hsl(281, 64%, 95%);
+ background-color: hsl(281deg 64% 95%);
}
.protocol-monitor-toolbar {
@@ -33,6 +33,6 @@
}
.error {
- background-color: hsl(0, 100%, 97%);
+ background-color: hsl(0deg 100% 97%);
color: red;
}
diff --git a/front_end/quick_open/filteredListWidget.css b/front_end/quick_open/filteredListWidget.css
index 269b70e..bf0a453 100644
--- a/front_end/quick_open/filteredListWidget.css
+++ b/front_end/quick_open/filteredListWidget.css
@@ -31,7 +31,7 @@
.filtered-list-widget-progress {
flex: none;
- background: rgba(0, 0, 0, 0.2);
+ background: rgb(0 0 0 / 20%);
height: 2px;
}
@@ -41,12 +41,12 @@
width: 100%;
transform: scaleX(0);
transform-origin: top left;
- opacity: 1;
+ opacity: 100%;
transition: none;
}
.filtered-widget-progress-fade {
- opacity: 0;
+ opacity: 0%;
transition: opacity 500ms;
}
@@ -61,7 +61,7 @@
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
- color: rgb(95, 95, 95);
+ color: rgb(95 95 95);
}
.filtered-list-widget-item.selected {
@@ -87,7 +87,7 @@
flex: none;
overflow: hidden;
text-overflow: ellipsis;
- color: rgb(155, 155, 155);
+ color: rgb(155 155 155);
display: flex;
}
@@ -102,7 +102,7 @@
}
.filtered-list-widget-item.two-rows {
- border-bottom: 1px solid rgb(235, 235, 235);
+ border-bottom: 1px solid rgb(235 235 235);
}
.tag {
diff --git a/front_end/resources/backgroundServiceView.css b/front_end/resources/backgroundServiceView.css
index 9a344f7..503e784 100644
--- a/front_end/resources/backgroundServiceView.css
+++ b/front_end/resources/backgroundServiceView.css
@@ -30,7 +30,7 @@
}
.background-service-shortcut {
- color: hsla(0, 0%, 50%, 1);
+ color: hsl(0deg 0% 50% / 100%);
}
.background-service-metadata {
@@ -44,7 +44,7 @@
}
.background-service-metadata-name {
- color: rgb(33%, 33%, 33%);
+ color: rgb(33% 33% 33%);
display: inline-block;
margin-right: 0.25em;
font-weight: bold;
diff --git a/front_end/resources/indexedDBViews.css b/front_end/resources/indexedDBViews.css
index 61ac4a7..f90db56 100644
--- a/front_end/resources/indexedDBViews.css
+++ b/front_end/resources/indexedDBViews.css
@@ -70,7 +70,7 @@
}
.indexed-db-key-path {
- color: rgb(196, 26, 22);
+ color: rgb(196 26 22);
white-space: pre-wrap;
unicode-bidi: -webkit-isolate;
}
diff --git a/front_end/resources/resourcesPanel.css b/front_end/resources/resourcesPanel.css
index 9efaff6..2f30289 100644
--- a/front_end/resources/resourcesPanel.css
+++ b/front_end/resources/resourcesPanel.css
@@ -60,7 +60,7 @@
}
.storage-view .storage-table-error {
- color: rgb(66%, 33%, 33%);
+ color: rgb(66% 33% 33%);
font-size: 24px;
font-weight: bold;
padding: 10px;
@@ -109,18 +109,18 @@
.database-user-query {
position: relative;
- border-bottom: 1px solid rgb(245, 245, 245);
+ border-bottom: 1px solid rgb(245 245 245);
padding: 1px 22px 1px 24px;
min-height: 16px;
flex-shrink: 0;
}
.database-user-query[data-keyboard-focus="true"]:focus {
- background-color: hsl(214, 48%, 95%);
+ background-color: hsl(214deg 48% 95%);
}
.database-query-text {
- color: rgb(0, 128, 255);
+ color: rgb(0 128 255);
user-select: text;
}
diff --git a/front_end/resources/resourcesSidebar.css b/front_end/resources/resourcesSidebar.css
index ef7aa13..8baa8d7 100644
--- a/front_end/resources/resourcesSidebar.css
+++ b/front_end/resources/resourcesSidebar.css
@@ -6,7 +6,7 @@
.tree-outline {
padding-left: 0;
- color: rgb(90, 90, 90);
+ color: rgb(90 90 90);
}
.tree-outline > ol {
@@ -22,7 +22,7 @@
}
li.storage-group-list-item:not(:first-child) {
- border-top: 1px solid rgb(230, 230, 230);
+ border-top: 1px solid rgb(230 230 230);
}
li.storage-group-list-item::before {
@@ -34,11 +34,11 @@
}
.navigator-file-tree-item {
- background: linear-gradient(45deg, hsl(0, 0%, 50%), hsl(0, 0%, 70%));
+ background: linear-gradient(45deg, hsl(0deg 0% 50%), hsl(0deg 0% 70%));
}
.navigator-folder-tree-item {
- background: linear-gradient(45deg, hsl(210, 82%, 65%), hsl(210, 82%, 80%));
+ background: linear-gradient(45deg, hsl(210deg 82% 65%), hsl(210deg 82% 80%));
}
.navigator-frame-tree-item {
@@ -46,18 +46,18 @@
}
.navigator-script-tree-item {
- background: linear-gradient(45deg, hsl(48, 70%, 50%), hsl(48, 70%, 70%));
+ background: linear-gradient(45deg, hsl(48deg 70% 50%), hsl(48deg 70% 70%));
}
.navigator-stylesheet-tree-item {
- background: linear-gradient(45deg, hsl(256, 50%, 50%), hsl(256, 50%, 70%));
+ background: linear-gradient(45deg, hsl(256deg 50% 50%), hsl(256deg 50% 70%));
}
.navigator-image-tree-item,
.navigator-font-tree-item {
- background: linear-gradient(45deg, hsl(109, 33%, 50%), hsl(109, 33%, 70%));
+ background: linear-gradient(45deg, hsl(109deg 33% 50%), hsl(109deg 33% 70%));
}
.resource-tree-item {
- background: rgba(90, 90, 90, 0.7);
+ background: rgb(90 90 90 / 70%);
}
diff --git a/front_end/resources/serviceWorkerCacheViews.css b/front_end/resources/serviceWorkerCacheViews.css
index a774d0c..7065da9 100644
--- a/front_end/resources/serviceWorkerCacheViews.css
+++ b/front_end/resources/serviceWorkerCacheViews.css
@@ -24,7 +24,7 @@
}
.service-worker-cache-data-view .data-grid .data-container tr.selected {
- background-color: rgb(212, 212, 212);
+ background-color: rgb(212 212 212);
color: inherit;
}
@@ -50,7 +50,7 @@
.cache-preview-panel-resizer {
background-color: #eee;
height: 4px;
- border-bottom: 1px solid rgb(64%, 64%, 64%);
+ border-bottom: 1px solid rgb(64% 64% 64%);
}
.cache-storage-summary-bar {
diff --git a/front_end/resources/serviceWorkersView.css b/front_end/resources/serviceWorkersView.css
index 835d066..e220260 100644
--- a/front_end/resources/serviceWorkersView.css
+++ b/front_end/resources/serviceWorkersView.css
@@ -110,7 +110,7 @@
.service-worker-has-current .service-workers-other-origin {
margin-top: 16px;
- border-top: 1px solid rgb(230, 230, 230);
+ border-top: 1px solid rgb(230 230 230);
}
.service-worker-list-empty .service-workers-other-origin {
@@ -128,7 +128,7 @@
flex-grow: 0;
flex-shrink: 0;
background-color: white;
- border-bottom: solid 1px rgb(230, 230, 230);
+ border-bottom: solid 1px rgb(230 230 230);
}
.service-worker-filter-label {
@@ -146,7 +146,7 @@
-webkit-mask-size: 32px 24px;
content: '';
color: transparent;
- background-color: rgb(110, 110, 110);
+ background-color: rgb(110 110 110);
text-shadow: none;
height: 12px;
width: 10px;
diff --git a/front_end/screencast/screencastView.css b/front_end/screencast/screencastView.css
index ea04540..0ce5dd3 100644
--- a/front_end/screencast/screencastView.css
+++ b/front_end/screencast/screencastView.css
@@ -38,7 +38,7 @@
flex: 24px 0 0;
position: relative;
padding-left: 1px;
- border-bottom: 1px solid rgb(64%, 64%, 64%);
+ border-bottom: 1px solid rgb(64% 64% 64%);
background-origin: padding-box;
background-clip: padding-box;
}
@@ -70,7 +70,7 @@
}
.screencast-navigation button[disabled] {
- opacity: 0.5;
+ opacity: 50%;
}
.screencast-navigation button.back {
@@ -92,7 +92,7 @@
}
.screencast-navigation .progress {
- background-color: rgb(66, 129, 235);
+ background-color: rgb(66 129 235);
height: 3px;
left: 0;
position: absolute;
@@ -125,7 +125,7 @@
}
.screencast-px {
- color: rgb(128, 128, 128);
+ color: rgb(128 128 128);
}
.screencast-element-title {
@@ -135,21 +135,21 @@
.screencast-tag-name {
/* Keep this in sync with view-source.css (.webkit-html-tag) */
- color: rgb(136, 18, 128);
+ color: rgb(136 18 128);
}
.screencast-node-id {
/* Keep this in sync with view-source.css (.webkit-html-attribute-value) */
- color: rgb(26, 26, 166);
+ color: rgb(26 26 166);
}
.screencast-class-name {
/* Keep this in sync with view-source.css (.webkit-html-attribute-name) */
- color: rgb(153, 69, 0);
+ color: rgb(153 69 0);
}
.screencast-glasspane {
- background-color: rgba(255, 255, 255, 0.8);
+ background-color: rgb(255 255 255 / 80%);
font-size: 30px;
z-index: 100;
display: flex;
diff --git a/front_end/search/searchResultsPane.css b/front_end/search/searchResultsPane.css
index 2699ee7..4b8e203 100644
--- a/front_end/search/searchResultsPane.css
+++ b/front_end/search/searchResultsPane.css
@@ -32,7 +32,7 @@
}
li.search-result:hover {
- background-color: rgba(121, 121, 121, 0.1);
+ background-color: rgb(121 121 121 / 10%);
}
li.search-result .search-result-file-name {
@@ -73,7 +73,7 @@
}
li.search-match .search-match-line-number {
- color: rgb(128, 128, 128);
+ color: rgb(128 128 128);
text-align: right;
vertical-align: top;
word-break: normal;
@@ -90,7 +90,7 @@
}
:host-context(.-theme-with-dark-background) li.search-match .highlighted-match {
- background-color: hsl(133, 100%, 30%) !important;
+ background-color: hsl(133deg 100% 30%) !important;
}
.tree-outline .devtools-link {
diff --git a/front_end/security/lockIcon.css b/front_end/security/lockIcon.css
index e09e59c..42d29b6 100644
--- a/front_end/security/lockIcon.css
+++ b/front_end/security/lockIcon.css
@@ -62,12 +62,12 @@
.security-property-info {
-webkit-mask-position: -48px -16px;
- background-color: rgba(0, 0, 0, 0.5);
+ background-color: rgb(0 0 0 / 50%);
}
.security-property-unknown {
-webkit-mask-position: -64px -16px;
- background-color: rgba(0, 0, 0, 0.5);
+ background-color: rgb(0 0 0 / 50%);
}
.url-scheme-secure {
diff --git a/front_end/security/mainView.css b/front_end/security/mainView.css
index 3cc850e..b437f75 100644
--- a/front_end/security/mainView.css
+++ b/front_end/security/mainView.css
@@ -46,7 +46,7 @@
.security-summary:not(.security-summary-neutral) .lock-icon-neutral,
.security-summary:not(.security-summary-insecure) .lock-icon-insecure,
.security-summary:not(.security-summary-insecure-broken) .lock-icon-insecure-broken {
- background-color: rgba(90, 90, 90, 0.25);
+ background-color: rgb(90 90 90 / 25%);
}
.triangle-pointer-container {
@@ -69,7 +69,7 @@
border-style: solid;
border-width: 1px 1px 0 0;
background: #fff;
- border-color: rgb(217, 217, 217);
+ border-color: rgb(217 217 217);
}
.security-summary-secure .triangle-pointer-wrapper {
@@ -94,7 +94,7 @@
border-width: 1px 0;
font-size: 15px;
background: #fff;
- border-color: rgb(217, 217, 217);
+ border-color: rgb(217 217 217);
}
.security-summary-secure .triangle-pointer,
@@ -123,7 +123,7 @@
.security-explanations-main {
margin-top: -5px;
background-color: #fff;
- border-bottom: 1px solid rgb(230, 230, 230);
+ border-bottom: 1px solid rgb(230 230 230);
}
.security-explanations-extra {
@@ -135,7 +135,7 @@
display: flex;
white-space: nowrap;
border: none;
- color: rgb(90, 90, 90);
+ color: rgb(90 90 90);
}
.security-explanation-text {
@@ -152,7 +152,7 @@
}
.security-explanation-title {
- color: rgb(48, 57, 66);
+ color: rgb(48 57 66);
margin-top: 1px;
margin-bottom: 8px;
}
diff --git a/front_end/security/originView.css b/front_end/security/originView.css
index 6cf9498..338f9eb 100644
--- a/front_end/security/originView.css
+++ b/front_end/security/originView.css
@@ -5,7 +5,7 @@
.title-section {
padding: 16px 0 24px 0;
- border-bottom: 1px solid rgb(230, 230, 230);
+ border-bottom: 1px solid rgb(230 230 230);
}
.title-section-header {
@@ -22,7 +22,7 @@
}
.security-origin-view .origin-view-section {
- border-bottom: 1px solid rgb(230, 230, 230);
+ border-bottom: 1px solid rgb(230 230 230);
padding: 12px 6px 12px 24px;
font-size: 12px;
}
@@ -73,7 +73,7 @@
}
.security-origin-view .details-table-row > div:first-child {
- color: rgb(140, 140, 140);
+ color: rgb(140 140 140);
width: 110px;
margin-right: 1em;
flex: none;
@@ -87,7 +87,7 @@
}
.security-origin-view .sct-details .details-table .details-table-row:last-child div:last-child {
- border-bottom: 1px solid rgb(230, 230, 230);
+ border-bottom: 1px solid rgb(230 230 230);
padding-bottom: 10px;
}
@@ -106,7 +106,7 @@
}
.security-origin-view .details-table .empty-san {
- color: rgb(140, 140, 140);
+ color: rgb(140 140 140);
}
.security-origin-view .details-table .san-entry {
diff --git a/front_end/security/sidebar.css b/front_end/security/sidebar.css
index abbbcb2..273c9ea 100644
--- a/front_end/security/sidebar.css
+++ b/front_end/security/sidebar.css
@@ -24,7 +24,7 @@
}
.tree-outline .security-main-view-sidebar-tree-item {
- border-bottom: 1px solid rgb(230, 230, 230);
+ border-bottom: 1px solid rgb(230 230 230);
padding: 16px 0;
}
@@ -32,10 +32,10 @@
padding: 1px 8px 1px 13px;
margin-top: 1em;
margin-bottom: 0.5em;
- color: rgb(90, 90, 90);
+ color: rgb(90 90 90);
border-top: none;
line-height: 16px;
- text-shadow: rgba(255, 255, 255, 0.75) 0 1px 0;
+ text-shadow: rgb(255 255 255 / 75%) 0 1px 0;
}
.tree-outline ol {
@@ -68,7 +68,7 @@
}
.security-main-view-reload-message .tree-element-title {
- color: rgba(0, 0, 0, 0.6);
+ color: rgb(0 0 0 / 60%);
padding-left: 8px;
}
diff --git a/front_end/settings/frameworkBlackboxSettingsTab.css b/front_end/settings/frameworkBlackboxSettingsTab.css
index b9e2063..4808fe5 100644
--- a/front_end/settings/frameworkBlackboxSettingsTab.css
+++ b/front_end/settings/frameworkBlackboxSettingsTab.css
@@ -83,7 +83,7 @@
.blackbox-separator {
flex: 0 0 1px;
- background-color: rgb(231, 231, 231);
+ background-color: rgb(231 231 231);
height: 30px;
margin: 0 4px;
}
diff --git a/front_end/settings/keybindsSettingsTab.css b/front_end/settings/keybindsSettingsTab.css
index fbf6f53..515c0c9 100644
--- a/front_end/settings/keybindsSettingsTab.css
+++ b/front_end/settings/keybindsSettingsTab.css
@@ -24,7 +24,7 @@
font-size: 11px;
background-color: #f7f7f7;
color: #333;
- box-shadow: 0 1px 0 rgba(0, 0, 0, 0.2), 0 0 0 2px #fff inset;
+ box-shadow: 0 1px 0 rgb(0 0 0 / 20%), 0 0 0 2px #fff inset;
border-radius: 3px;
display: inline-block;
margin: 0 0.1em;
@@ -80,7 +80,7 @@
}
.list-item:not(:first-child) .keybinds-category-header {
- border-top: 1px solid rgb(231, 231, 231);
+ border-top: 1px solid rgb(231 231 231);
}
.keybinds-category-header:hover {
diff --git a/front_end/settings/settingsScreen.css b/front_end/settings/settingsScreen.css
index f45ad09..50ba534 100644
--- a/front_end/settings/settingsScreen.css
+++ b/front_end/settings/settingsScreen.css
@@ -5,7 +5,7 @@
*/
.settings-window-main {
- color: rgb(48, 57, 66);
+ color: rgb(48 57 66);
background-color: white;
padding: 11px 0 0 0;
}
@@ -75,7 +75,7 @@
font-size: 11px;
background-color: #f7f7f7;
color: #333;
- box-shadow: 0 1px 0 rgba(0, 0, 0, 0.2), 0 0 0 2px #fff inset;
+ box-shadow: 0 1px 0 rgb(0 0 0 / 20%), 0 0 0 2px #fff inset;
border-radius: 3px;
display: inline-block;
margin: 0 0.1em;
@@ -115,7 +115,7 @@
}
.settings-experiments-warning-subsection-warning {
- color: rgb(200, 0, 0);
+ color: rgb(200 0 0);
}
.settings-experiments-warning-subsection-message {
@@ -128,7 +128,7 @@
.settings-window-title {
font-size: 18px;
- color: rgb(48, 57, 66);
+ color: rgb(48 57 66);
padding: 0 0 5px 13px;
}
diff --git a/front_end/source_frame/imageView.css b/front_end/source_frame/imageView.css
index 42ac4e9..6915630 100644
--- a/front_end/source_frame/imageView.css
+++ b/front_end/source_frame/imageView.css
@@ -17,7 +17,7 @@
max-width: 100%;
max-height: 1000px;
background-image: url(Images/checker.png);
- box-shadow: 0 5px 10px rgba(0, 0, 0, 0.5);
+ box-shadow: 0 5px 10px rgb(0 0 0 / 50%);
user-select: text;
-webkit-user-drag: auto;
}
diff --git a/front_end/source_frame/xmlTree.css b/front_end/source_frame/xmlTree.css
index b7d1e47..29a525e 100644
--- a/front_end/source_frame/xmlTree.css
+++ b/front_end/source_frame/xmlTree.css
@@ -24,30 +24,30 @@
}
.shadow-xml-view-tag {
- color: rgb(136, 18, 128);
+ color: rgb(136 18 128);
}
.shadow-xml-view-comment {
- color: rgb(35, 110, 37);
+ color: rgb(35 110 37);
}
.shadow-xml-view-processing-instruction {
- color: rgb(35, 110, 37);
+ color: rgb(35 110 37);
}
.shadow-xml-view-attribute-name {
- color: rgb(153, 69, 0);
+ color: rgb(153 69 0);
}
.shadow-xml-view-attribute-value {
- color: rgb(26, 26, 166);
+ color: rgb(26 26 166);
}
.shadow-xml-view-text {
- color: rgb(0, 0, 0);
+ color: rgb(0 0 0);
white-space: pre;
}
.shadow-xml-view-cdata {
- color: rgb(0, 0, 0);
+ color: rgb(0 0 0);
}
diff --git a/front_end/sources/callStackSidebarPane.css b/front_end/sources/callStackSidebarPane.css
index 830c406..940a58e 100644
--- a/front_end/sources/callStackSidebarPane.css
+++ b/front_end/sources/callStackSidebarPane.css
@@ -93,7 +93,7 @@
}
.blackboxed-call-frame {
- opacity: 0.6;
+ opacity: 60%;
font-style: italic;
}
@@ -109,12 +109,12 @@
}
:host-context(.-theme-with-dark-background) .blackboxed-message {
- background-color: hsl(46, 98%, 22%);
+ background-color: hsl(46deg 98% 22%);
color: #aaa;
}
:host-context(.-theme-with-dark-background) .blackboxed-message > .link {
- color: hsl(0, 0%, 67%);
+ color: hsl(0deg 0% 67%);
}
@media (forced-colors: active) {
diff --git a/front_end/sources/debuggerPausedMessage.css b/front_end/sources/debuggerPausedMessage.css
index 3d8abbd..bdbceef 100644
--- a/front_end/sources/debuggerPausedMessage.css
+++ b/front_end/sources/debuggerPausedMessage.css
@@ -7,18 +7,18 @@
.paused-status {
padding: 6px;
border-bottom: 1px solid transparent;
- border-top: 1px solid rgb(189, 189, 189);
- background-color: hsl(50, 100%, 95%);
- color: rgb(107, 97, 48);
+ border-top: 1px solid rgb(189 189 189);
+ background-color: hsl(50deg 100% 95%);
+ color: rgb(107 97 48);
}
.-theme-with-dark-background .paused-status {
- background-color: hsl(46, 98%, 22%);
+ background-color: hsl(46deg 98% 22%);
color: #ccc;
}
.paused-status.error-reason {
- background-color: hsl(0, 100%, 97%);
+ background-color: hsl(0deg 100% 97%);
color: #6b3b3b;
}
diff --git a/front_end/sources/dialog.css b/front_end/sources/dialog.css
index 0369e54..ffa51d8 100644
--- a/front_end/sources/dialog.css
+++ b/front_end/sources/dialog.css
@@ -17,7 +17,7 @@
}
input[type=text].add-source-map {
- box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.2);
+ box-shadow: 0 0 0 1px rgb(0 0 0 / 20%);
font-size: inherit;
margin: 0 8px 0 5px;
}
diff --git a/front_end/sources/javaScriptBreakpointsSidebarPane.css b/front_end/sources/javaScriptBreakpointsSidebarPane.css
index 348fcbd..d479ee0 100644
--- a/front_end/sources/javaScriptBreakpointsSidebarPane.css
+++ b/front_end/sources/javaScriptBreakpointsSidebarPane.css
@@ -34,16 +34,16 @@
.breakpoints-list-deactivated {
background-color: #eee;
- opacity: 0.3;
+ opacity: 30%;
}
.breakpoint-hit {
- background-color: rgb(255, 255, 194);
- border-right: 3px solid rgb(107, 97, 48);
+ background-color: rgb(255 255 194);
+ border-right: 3px solid rgb(107 97 48);
}
:host-context(.-theme-with-dark-background) .breakpoint-hit {
- background-color: hsl(46, 98%, 22%);
+ background-color: hsl(46deg 98% 22%);
color: #ccc;
}
diff --git a/front_end/sources/navigatorTree.css b/front_end/sources/navigatorTree.css
index c0238d0..865edda 100644
--- a/front_end/sources/navigatorTree.css
+++ b/front_end/sources/navigatorTree.css
@@ -44,13 +44,13 @@
}
.navigator-file-tree-item .icon {
- background: linear-gradient(45deg, hsl(0, 0%, 50%), hsl(0, 0%, 70%));
+ background: linear-gradient(45deg, hsl(0deg 0% 50%), hsl(0deg 0% 70%));
}
.navigator-fs-tree-item:not(.has-mapped-files):not(.selected) > :not(.selection),
.navigator-fs-folder-tree-item:not(.has-mapped-files):not(.selected) > :not(.selection) {
filter: grayscale(50%);
- opacity: 0.5;
+ opacity: 50%;
}
.tree-outline li {
@@ -69,27 +69,27 @@
.navigator-sm-folder-tree-item .icon,
.navigator-fs-tree-item .icon,
.navigator-fs-folder-tree-item .icon {
- background: linear-gradient(45deg, hsl(28, 75%, 50%), hsl(28, 75%, 70%));
+ background: linear-gradient(45deg, hsl(28deg 75% 50%), hsl(28deg 75% 70%));
}
.navigator-nw-folder-tree-item .icon {
- background: linear-gradient(45deg, hsl(210, 82%, 65%), hsl(210, 82%, 80%));
+ background: linear-gradient(45deg, hsl(210deg 82% 65%), hsl(210deg 82% 80%));
}
.navigator-sm-script-tree-item .icon,
.navigator-script-tree-item .icon,
.navigator-snippet-tree-item .icon {
- background: linear-gradient(45deg, hsl(48, 70%, 50%), hsl(48, 70%, 70%));
+ background: linear-gradient(45deg, hsl(48deg 70% 50%), hsl(48deg 70% 70%));
}
.navigator-sm-stylesheet-tree-item .icon,
.navigator-stylesheet-tree-item .icon {
- background: linear-gradient(45deg, hsl(256, 50%, 50%), hsl(256, 50%, 70%));
+ background: linear-gradient(45deg, hsl(256deg 50% 50%), hsl(256deg 50% 70%));
}
.navigator-image-tree-item .icon,
.navigator-font-tree-item .icon {
- background: linear-gradient(45deg, hsl(109, 33%, 50%), hsl(109, 33%, 70%));
+ background: linear-gradient(45deg, hsl(109deg 33% 50%), hsl(109deg 33% 70%));
}
.navigator-sm-folder-tree-item .tree-element-title,
diff --git a/front_end/sources/sourcesView.css b/front_end/sources/sourcesView.css
index 5eec9cf..0cba20f 100644
--- a/front_end/sources/sourcesView.css
+++ b/front_end/sources/sourcesView.css
@@ -47,7 +47,7 @@
}
.source-frame-debugger-script {
- background-color: rgba(255, 255, 194, 0.5);
+ background-color: rgb(255 255 194 / 50%);
}
.-theme-with-dark-background .source-frame-debugger-script {
@@ -61,7 +61,7 @@
}
10% {
- background-color: rgb(158, 54, 153);
+ background-color: rgb(158 54 153);
color: white;
}
@@ -77,11 +77,11 @@
}
.diff-entry-insert .diff-marker {
- border-left: 4px solid hsla(144, 55%, 37%, 1);
+ border-left: 4px solid hsl(144deg 55% 37% / 100%);
}
.diff-entry-insert .CodeMirror-gutter-background {
- background-color: hsla(144, 55%, 49%, 0.2);
+ background-color: hsl(144deg 55% 49% / 20%);
}
.diff-entry-modify .diff-marker {
@@ -89,7 +89,7 @@
}
.diff-entry-modify .CodeMirror-gutter-background {
- background-color: rgba(186, 104, 200, 0.2);
+ background-color: rgb(186 104 200 / 20%);
}
.diff-entry-delete .diff-marker {
@@ -123,9 +123,9 @@
}
@keyframes source-line-modification-background-fadeout {
- from { background-color: rgba(158, 54, 153, 0.5); }
- 50% { background-color: rgba(158, 54, 153, 0.5); }
- 90% { background-color: rgba(158, 54, 153, 0); }
+ from { background-color: rgb(158 54 153 / 50%); }
+ 50% { background-color: rgb(158 54 153 / 50%); }
+ 90% { background-color: rgb(158 54 153 / 0%); }
to { background-color: transparent; }
}
diff --git a/front_end/sources/watchExpressionsSidebarPane.css b/front_end/sources/watchExpressionsSidebarPane.css
index 67886a5..fc705a7 100644
--- a/front_end/sources/watchExpressionsSidebarPane.css
+++ b/front_end/sources/watchExpressionsSidebarPane.css
@@ -9,16 +9,16 @@
top: 5px;
right: 6px;
cursor: pointer;
- opacity: 0;
+ opacity: 0%;
min-width: 20px;
}
.watch-expression-header:hover .watch-expression-delete-button {
- opacity: 0.5;
+ opacity: 50%;
}
.watch-expression-header:hover .watch-expression-delete-button:hover {
- opacity: 1;
+ opacity: 100%;
}
.watch-expression-title:hover {
@@ -48,7 +48,7 @@
}
.watch-expressions .name {
- color: rgb(136, 19, 145);
+ color: rgb(136 19 145);
flex: none;
white-space: nowrap;
text-overflow: ellipsis;
@@ -60,7 +60,7 @@
}
:host-context(.-theme-with-dark-background) .watch-expression-error {
- color: hsl(0, 100%, 65%);
+ color: hsl(0deg 100% 65%);
}
.watch-expressions-separator {
@@ -112,7 +112,7 @@
@media (forced-colors: active) {
.watch-expression-header:hover .watch-expression-delete-button,
.watch-expressions .dimmed {
- opacity: 1;
+ opacity: 100%;
}
li.watch-expression-tree-item * {
diff --git a/front_end/text_editor/cmdevtools.css b/front_end/text_editor/cmdevtools.css
index 3bd88e4..9f5bc67 100644
--- a/front_end/text_editor/cmdevtools.css
+++ b/front_end/text_editor/cmdevtools.css
@@ -45,10 +45,10 @@
.CodeMirror .source-frame-eval-expression {
outline: 0;
- border: 1px solid rgb(163, 41, 34);
+ border: 1px solid rgb(163 41 34);
border-left-width: 0;
border-right-width: 0;
- background-color: rgb(255, 255, 194);
+ background-color: rgb(255 255 194);
}
.CodeMirror .source-frame-eval-expression-start {
@@ -66,13 +66,13 @@
border: 1px solid transparent;
border-left-width: 0;
border-right-width: 0;
- background-color: rgb(230, 236, 255);
+ background-color: rgb(230 236 255);
cursor: pointer;
}
.CodeMirror .source-frame-continue-to-location:hover {
- border: 1px solid rgb(121, 141, 254);
- background-color: rgb(171, 191, 254);
+ border: 1px solid rgb(121 141 254);
+ background-color: rgb(171 191 254);
}
:host-context(.-theme-with-dark-background) .CodeMirror .source-frame-continue-to-location,
@@ -98,7 +98,7 @@
.CodeMirror .source-frame-async-step-in {
outline: 0;
- background-color: hsla(100, 46%, 80%, 1);
+ background-color: hsl(100deg 46% 80% / 100%);
cursor: pointer;
border: 1px solid transparent;
border-left-width: 0;
@@ -106,8 +106,8 @@
}
.source-frame-async-step-in-hovered .source-frame-async-step-in {
- background-color: hsl(96, 53%, 65%);
- border-color: rgb(100, 154, 100);
+ background-color: hsl(96deg 53% 65%);
+ border-color: rgb(100 154 100);
}
.source-frame-async-step-in-hovered .source-frame-async-step-in-start {
@@ -131,7 +131,7 @@
}
.CodeMirror-linenumber {
- color: hsl(0, 0%, 46%);
+ color: hsl(0deg 0% 46%);
padding: 0 3px 0 5px;
min-width: 22px;
text-align: right;
@@ -152,22 +152,22 @@
}
@-webkit-keyframes fadeout {
- from { background-color: rgb(255, 255, 120); }
+ from { background-color: rgb(255 255 120); }
to { background-color: white; }
}
@-webkit-keyframes fadeout-dark {
- from { background-color: hsla(133, 100%, 30%, 0.5); }
+ from { background-color: hsl(133deg 100% 30% / 50%); }
to { background-color: transparent; }
}
.cm-readonly-highlight {
- background-color: rgb(255, 255, 120);
+ background-color: rgb(255 255 120);
}
:host-context(.-theme-with-dark-background) .cm-readonly-highlight,
.-theme-with-dark-background .cm-readonly-highlight {
- background-color: hsla(133, 100%, 30%, 0.5);
+ background-color: hsl(133deg 100% 30% / 50%);
}
.cm-highlight.cm-execution-line {
@@ -180,8 +180,8 @@
}
@-webkit-keyframes fadeout-execution-line {
- from { background-color: rgb(121, 141, 254); }
- to { background-color: rgb(171, 191, 254); }
+ from { background-color: rgb(121 141 254); }
+ to { background-color: rgb(171 191 254); }
}
@-webkit-keyframes fadeout-execution-line-dark {
@@ -190,7 +190,7 @@
}
.cm-non-breakable-line .CodeMirror-linenumber {
- color: rgba(128, 128, 128, 0.4);
+ color: rgb(128 128 128 / 40%);
}
.breakpoint-element {
@@ -284,10 +284,10 @@
}
.source-frame-eval-expression + .CodeMirror-widget {
- border: 1px solid rgb(163, 41, 34);
+ border: 1px solid rgb(163 41 34);
border-left-width: 0;
border-right-width: 0;
- background-color: rgb(255, 255, 194);
+ background-color: rgb(255 255 194);
}
.cm-inline-breakpoint.cm-execution-line-tail {
@@ -304,41 +304,41 @@
.cm-continue-to-location {
cursor: pointer;
- opacity: 0.8;
+ opacity: 80%;
position: relative;
top: 2px;
}
.cm-continue-to-location:hover {
- opacity: 1;
+ opacity: 100%;
}
div.CodeMirror:focus-within span.CodeMirror-matchingbracket {
- background-color: rgba(0, 0, 0, 0.07);
- border-bottom: 1px solid rgba(0, 0, 0, 0.5);
+ background-color: rgb(0 0 0 / 7.000000000000001%);
+ border-bottom: 1px solid rgb(0 0 0 / 50%);
}
div.CodeMirror:focus-within span.CodeMirror-nonmatchingbracket {
- background-color: rgba(255, 0, 0, 0.07);
- border-bottom: 1px solid rgba(255, 0, 0, 0.5);
+ background-color: rgb(255 0 0 / 7.000000000000001%);
+ border-bottom: 1px solid rgb(255 0 0 / 50%);
}
:host-context(.-theme-with-dark-background) div.CodeMirror:focus-within span.CodeMirror-matchingbracket,
.-theme-with-dark-background div.CodeMirror:focus-within span.CodeMirror-matchingbracket {
- border-bottom: 1px solid rgb(217, 217, 217);
+ border-bottom: 1px solid rgb(217 217 217);
background-color: initial;
}
:host-context(.-theme-with-dark-background) div.CodeMirror:focus-within span.CodeMirror-nonmatchingbracket,
.-theme-with-dark-background div.CodeMirror:focus-within span.CodeMirror-nonmatchingbracket {
- border-bottom: 1px solid rgb(255, 26, 26);
+ border-bottom: 1px solid rgb(255 26 26);
background-color: initial;
}
.cm-whitespace::before {
position: absolute;
pointer-events: none;
- color: rgb(175, 175, 175);
+ color: rgb(175 175 175);
}
.cm-tab {
@@ -351,7 +351,7 @@
display: none;
content: ".";
color: transparent;
- border-bottom: 1px solid rgb(175, 175, 175);
+ border-bottom: 1px solid rgb(175 175 175);
position: absolute;
width: 90%;
bottom: 50%;
@@ -363,15 +363,15 @@
}
.cm-execution-line {
- background-color: rgba(0, 59, 255, 0.1);
+ background-color: rgb(0 59 255 / 10%);
}
.cm-execution-line-outline {
- outline: 1px solid rgb(64, 115, 244);
+ outline: 1px solid rgb(64 115 244);
}
.cm-execution-line-tail {
- background-color: rgb(171, 191, 254);
+ background-color: rgb(171 191 254);
}
:host-context(.-theme-with-dark-background) .cm-execution-line,
@@ -464,13 +464,13 @@
.cm-line-with-selection .cm-column-with-selection.cm-search-highlight::before {
margin: -1px -1px -1px -1px;
- background-color: rgb(241, 234, 0);
+ background-color: rgb(241 234 0);
z-index: -1;
}
:host-context(.-theme-with-dark-background) .cm-line-with-selection .cm-column-with-selection.cm-search-highlight::before,
.-theme-with-dark-background .cm-line-with-selection .cm-column-with-selection.cm-search-highlight::before {
- background-color: hsl(133, 100%, 30%);
+ background-color: hsl(133deg 100% 30%);
}
:host-context(.-theme-with-dark-background) .cm-line-with-selection .cm-search-highlight,
@@ -530,7 +530,7 @@
overflow: hidden;
text-overflow: ellipsis;
max-width: 1000px;
- opacity: 0.8;
+ opacity: 80%;
background-color: #ffe3c7;
margin-left: 10px;
padding-left: 5px;
@@ -540,7 +540,7 @@
.CodeMirror .cm-execution-line .text-editor-value-decoration {
background-color: transparent;
- opacity: 0.5;
+ opacity: 50%;
}
.CodeMirror .text-editor-line-decoration-icon {
@@ -551,11 +551,11 @@
}
.CodeMirror .text-editor-line-with-warning:not(.cm-execution-line):not(.cm-readonly-highlight) {
- background-color: rgba(241, 230, 0, 0.1);
+ background-color: rgb(241 230 0 / 10%);
}
.CodeMirror .text-editor-line-with-error:not(.cm-execution-line):not(.cm-readonly-highlight) {
- background-color: rgba(255, 0, 0, 0.05);
+ background-color: rgb(255 0 0 / 5%);
}
.CodeMirror .text-editor-line-decoration-wave {
@@ -572,7 +572,7 @@
}
.cm-trailing-whitespace {
- background-color: rgba(255, 0, 0, 0.05);
+ background-color: rgb(255 0 0 / 5%);
}
.CodeMirror-activeline .cm-trailing-whitespace {
@@ -585,12 +585,12 @@
}
.CodeMirror .auto-complete-text {
- color: rgb(128, 128, 128);
+ color: rgb(128 128 128);
}
.CodeMirror .placeholder-text {
height: 0;
- color: rgb(128, 128, 128);
+ color: rgb(128 128 128);
}
/** Prevent the codemirror textarea from stealing PageUp events **/
@@ -662,11 +662,11 @@
.CodeMirror-foldgutter-open {
transition: opacity 0.2s;
- opacity: 0;
+ opacity: 0%;
}
.CodeMirror-gutter-hovered .CodeMirror-foldgutter-open {
- opacity: 1;
+ opacity: 100%;
}
.CodeMirror-foldgutter-open::before,
diff --git a/front_end/timeline/historyToolbarButton.css b/front_end/timeline/historyToolbarButton.css
index 744fbc3..2e80084 100644
--- a/front_end/timeline/historyToolbarButton.css
+++ b/front_end/timeline/historyToolbarButton.css
@@ -17,7 +17,7 @@
}
.history-dropdown-button[disabled] {
- opacity: 0.5;
+ opacity: 50%;
border: 1px solid transparent;
}
@@ -37,12 +37,12 @@
right: 0;
bottom: 2px;
border-radius: 2px;
- background: rgba(0, 0, 0, 0.08);
+ background: rgb(0 0 0 / 8%);
}
@media (forced-colors: active) {
.history-dropdown-button[disabled] {
- opacity: 1;
+ opacity: 100%;
}
.history-dropdown-button[disabled] [is=ui-icon].icon-mask {
diff --git a/front_end/timeline/timelinePaintProfiler.css b/front_end/timeline/timelinePaintProfiler.css
index 640fb1f..391f996 100644
--- a/front_end/timeline/timelinePaintProfiler.css
+++ b/front_end/timeline/timelinePaintProfiler.css
@@ -13,7 +13,7 @@
}
.paint-profiler-image-view .paint-profiler-image-container div {
- border-color: rgba(100, 100, 100, 0.4);
+ border-color: rgb(100 100 100 / 40%);
border-style: solid;
z-index: 100;
position: absolute;
diff --git a/front_end/timeline/timelinePanel.css b/front_end/timeline/timelinePanel.css
index f06fee0..16d21bd 100644
--- a/front_end/timeline/timelinePanel.css
+++ b/front_end/timeline/timelinePanel.css
@@ -54,7 +54,7 @@
}
#timeline-overview-grid {
- background-color: rgb(255, 255, 255);
+ background-color: rgb(255 255 255);
}
#timeline-overview-grid .timeline-grid-header {
@@ -100,7 +100,7 @@
font-size: 10px;
font-weight: bold;
z-index: 100;
- background-color: rgba(255, 255, 255, 0.7);
+ background-color: rgb(255 255 255 / 70%);
padding: 0 4px;
position: absolute;
top: -2px;
@@ -136,7 +136,7 @@
left: 0;
right: 0;
bottom: 0;
- border-bottom: 1px solid hsla(0, 0%, 0%, 0.06);
+ border-bottom: 1px solid hsl(0deg 0% 0% / 6%);
z-index: -200;
}
@@ -186,7 +186,7 @@
color: #888;
white-space: nowrap;
padding: 0 4px;
- background-color: hsla(0, 0%, 100%, 0.8);
+ background-color: hsl(0deg 0% 100% / 80%);
}
#memory-graphs-canvas-container {
@@ -252,7 +252,7 @@
color: #888;
white-space: nowrap;
padding: 0 4px;
- background-color: hsla(0, 0%, 100%, 0.8);
+ background-color: hsl(0deg 0% 100% / 80%);
}
.timeline-details {
@@ -323,21 +323,21 @@
.timeline-details-chip-title > div {
width: 12px;
height: 12px;
- border: 1px solid rgba(0, 0, 0, 0.2);
+ border: 1px solid rgb(0 0 0 / 20%);
display: inline-block;
margin-right: 4px;
content: " ";
}
.timeline-details-view-row-title:not(:empty) {
- color: rgb(152, 152, 152);
+ color: rgb(152 152 152);
overflow: hidden;
padding-right: 10px;
display: inline-block;
}
.timeline-details-warning {
- background-color: rgba(250, 209, 209, 0.48);
+ background-color: rgb(250 209 209 / 48%);
}
.timeline-details-warning .timeline-details-view-row-title {
@@ -462,11 +462,11 @@
}
.timeline-tree-view .data-grid tr:not(.selected) .highlight {
- background-color: rgb(255, 230, 179);
+ background-color: rgb(255 230 179);
}
.timeline-tree-view .data-grid tr:hover td:not(.bottom-filler-td) {
- background-color: rgba(0, 0, 0, 0.1);
+ background-color: rgb(0 0 0 / 10%);
}
.timeline-tree-view .data-grid td.numeric-column {
@@ -501,7 +501,7 @@
.timeline-tree-view .data-grid .name-container .activity-icon {
width: 12px;
height: 12px;
- border: 1px solid rgba(0, 0, 0, 0.05);
+ border: 1px solid rgb(0 0 0 / 5%);
margin: 3px 0;
}
@@ -545,13 +545,13 @@
.timeline-tree-view .data-grid .background-bar {
float: right;
height: 18px;
- background-color: hsla(43, 84%, 64%, 0.2);
- border-bottom: 1px solid hsl(43, 84%, 64%);
+ background-color: hsl(43deg 84% 64% / 20%);
+ border-bottom: 1px solid hsl(43deg 84% 64%);
}
.timeline-tree-view .data-grid .selected .background-bar {
- background-color: rgba(255, 255, 255, 0.3);
- border-bottom-color: rgba(255, 255, 255, 0.9);
+ background-color: rgb(255 255 255 / 30%);
+ border-bottom-color: rgb(255 255 255 / 90%);
}
.timeline-tree-view .timeline-details-view-body .full-widget-dimmed-banner {
diff --git a/front_end/timeline/timelineStatusDialog.css b/front_end/timeline/timelineStatusDialog.css
index 0cacc27..013054f 100644
--- a/front_end/timeline/timelineStatusDialog.css
+++ b/front_end/timeline/timelineStatusDialog.css
@@ -37,7 +37,7 @@
}
.timeline-status-dialog .progress .indicator {
- background-color: rgb(112, 166, 255);
+ background-color: rgb(112 166 255);
height: 100%;
width: 0;
margin: 0;
diff --git a/front_end/ui/checkboxTextLabel.css b/front_end/ui/checkboxTextLabel.css
index 20b45b3..9214041 100644
--- a/front_end/ui/checkboxTextLabel.css
+++ b/front_end/ui/checkboxTextLabel.css
@@ -30,9 +30,9 @@
input.dt-checkbox-themed {
-webkit-appearance: none;
margin: auto 5px auto 2px;
- border: 1px solid rgb(45, 45, 45);
+ border: 1px solid rgb(45 45 45);
border-radius: 3px;
- background-color: rgb(102, 102, 102);
+ background-color: rgb(102 102 102);
}
input.dt-checkbox-themed::after {
diff --git a/front_end/ui/dropTarget.css b/front_end/ui/dropTarget.css
index 7f63250..a0f6e8f 100644
--- a/front_end/ui/dropTarget.css
+++ b/front_end/ui/dropTarget.css
@@ -11,7 +11,7 @@
left: 0;
right: 0;
display: flex;
- background-color: rgba(255, 255, 255, 0.8);
+ background-color: rgb(255 255 255 / 80%);
z-index: 1000;
}
diff --git a/front_end/ui/emptyWidget.css b/front_end/ui/emptyWidget.css
index ead95a3..4ff7ace 100644
--- a/front_end/ui/emptyWidget.css
+++ b/front_end/ui/emptyWidget.css
@@ -12,7 +12,7 @@
}
.empty-view {
- color: hsla(0, 0%, 43%, 1);
+ color: hsl(0deg 0% 43% / 100%);
padding: 30px;
display: flex;
align-items: center;
diff --git a/front_end/ui/filter.css b/front_end/ui/filter.css
index 3335033..7d1c8b8 100644
--- a/front_end/ui/filter.css
+++ b/front_end/ui/filter.css
@@ -61,7 +61,7 @@
margin: auto 2px;
padding: 3px;
background: transparent;
- text-shadow: rgba(255, 255, 255, 0.5) 0 1px 0;
+ text-shadow: rgb(255 255 255 / 50%) 0 1px 0;
border-radius: 6px;
overflow: hidden;
}
@@ -82,19 +82,19 @@
.filter-bitset-filter span:hover,
.filter-bitset-filter span:active {
color: white;
- text-shadow: rgba(0, 0, 0, 0.4) 0 1px 0;
+ text-shadow: rgb(0 0 0 / 40%) 0 1px 0;
}
.filter-bitset-filter span:hover {
- background: rgba(0, 0, 0, 0.2);
+ background: rgb(0 0 0 / 20%);
}
.filter-bitset-filter span.selected {
- background: rgba(0, 0, 0, 0.3);
+ background: rgb(0 0 0 / 30%);
}
.filter-bitset-filter span:active {
- background: rgba(0, 0, 0, 0.5);
+ background: rgb(0 0 0 / 50%);
}
.filter-checkbox-filter {
@@ -146,13 +146,13 @@
}
.filter-input-clear-button {
- opacity: 0.7;
+ opacity: 70%;
height: 16px;
margin-top: 1px;
}
.filter-input-clear-button:hover {
- opacity: 0.99;
+ opacity: 99%;
}
@media (forced-colors: active) {
diff --git a/front_end/ui/glassPane.css b/front_end/ui/glassPane.css
index eb6a7b4..c6ef6fd 100644
--- a/front_end/ui/glassPane.css
+++ b/front_end/ui/glassPane.css
@@ -16,7 +16,7 @@
}
:host-context(.dimmed-pane) {
- background-color: rgba(255, 255, 255, 0.5);
+ background-color: rgb(255 255 255 / 50%);
}
:host-context(.no-pointer-events) {
diff --git a/front_end/ui/infobar.css b/front_end/ui/infobar.css
index 6979218..1c1c4dc 100644
--- a/front_end/ui/infobar.css
+++ b/front_end/ui/infobar.css
@@ -5,25 +5,25 @@
*/
.infobar {
- color: rgb(34, 34, 34);
+ color: rgb(34 34 34);
display: flex;
flex: auto;
- border-bottom: 1px solid rgb(171, 171, 171);
+ border-bottom: 1px solid rgb(171 171 171);
flex-direction: column;
position: relative;
padding: 1px 6px 1px;
}
.infobar:focus {
- box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.2) inset;
+ box-shadow: 0 0 0 2px rgb(0 0 0 / 20%) inset;
}
.infobar-warning {
- background-color: rgb(253, 242, 192);
+ background-color: rgb(253 242 192);
}
.infobar-info {
- background-color: rgb(255, 255, 255);
+ background-color: rgb(255 255 255);
}
.infobar-main-row {
@@ -80,12 +80,12 @@
.info-icon {
-webkit-mask-image: url(Images/ic_info_black_18dp.svg);
- background-color: hsl(214, 92%, 50%);
+ background-color: hsl(214deg 92% 50%);
}
.warning-icon {
-webkit-mask-image: url(Images/ic_warning_black_18dp.svg);
- background-color: hsl(44, 92%, 50%);
+ background-color: hsl(44deg 92% 50%);
}
.icon {
diff --git a/front_end/ui/inspectorCommon.css b/front_end/ui/inspectorCommon.css
index 6dd409f..7fb26e7 100644
--- a/front_end/ui/inspectorCommon.css
+++ b/front_end/ui/inspectorCommon.css
@@ -133,20 +133,20 @@
.highlighted-search-result {
border-radius: 1px;
- background-color: rgba(255, 255, 0, 0.8);
- outline: 1px solid rgba(255, 255, 0, 0.8);
+ background-color: rgb(255 255 0 / 80%);
+ outline: 1px solid rgb(255 255 0 / 80%);
}
.-theme-with-dark-background .highlighted-search-result,
:host-context(.-theme-with-dark-background) .highlighted-search-result {
- background-color: hsl(133, 100%, 30%);
+ background-color: hsl(133deg 100% 30%);
color: #333;
}
.link {
cursor: pointer;
text-decoration: underline;
- color: rgb(17, 85, 204);
+ color: rgb(17 85 204);
}
button,
@@ -168,7 +168,7 @@
}
input::placeholder {
- color: rgba(0, 0, 0, 0.54);
+ color: rgb(0 0 0 / 54%);
}
:host-context(.-theme-with-dark-background) input[type="checkbox"]:not(.-theme-preserve) {
@@ -200,11 +200,11 @@
border-radius: 1px;
padding: 1px;
margin: -1px;
- background-color: rgba(255, 127, 0, 0.8);
+ background-color: rgb(255 127 0 / 80%);
}
.dimmed {
- opacity: 0.6;
+ opacity: 60%;
}
.editing {
@@ -217,7 +217,7 @@
margin-right: -2px;
margin-bottom: -1px;
padding-bottom: 1px;
- opacity: 1 !important;
+ opacity: 100% !important;
}
.editing,
@@ -238,7 +238,7 @@
.chrome-select {
-webkit-appearance: none;
user-select: none;
- border: 1px solid rgba(0, 0, 0, 0.2);
+ border: 1px solid rgb(0 0 0 / 20%);
border-radius: 2px;
color: #333;
font: inherit;
@@ -247,7 +247,7 @@
padding-right: 20px;
padding-left: 6px;
background-image: -webkit-image-set(url(Images/chromeSelect.png) 1x, url(Images/chromeSelect_2x.png) 2x);
- background-color: hsl(0, 0%, 98%);
+ background-color: hsl(0deg 0% 98%);
background-position: right center;
background-repeat: no-repeat;
min-height: 24px;
@@ -258,8 +258,8 @@
.chrome-select:enabled:active,
.chrome-select:enabled:focus,
.chrome-select:enabled:hover {
- background-color: hsl(0, 0%, 96%);
- box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
+ background-color: hsl(0deg 0% 96%);
+ box-shadow: 0 1px 2px rgb(0 0 0 / 10%);
}
.chrome-select:enabled:active {
@@ -268,11 +268,11 @@
.chrome-select:enabled:focus {
border-color: transparent;
- box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1), 0 0 0 2px rgba(66, 133, 244, 0.4);
+ box-shadow: 0 1px 2px rgb(0 0 0 / 10%), 0 0 0 2px rgb(66 133 244 / 40%);
}
.chrome-select:disabled {
- opacity: 0.38;
+ opacity: 38%;
}
.chrome-select-label {
@@ -299,15 +299,15 @@
:not(.platform-mac).-theme-with-dark-background ::-webkit-scrollbar-track,
:host-context(:not(.platform-mac).-theme-with-dark-background) ::-webkit-scrollbar-track {
- -webkit-box-shadow: inset 0 0 1px rgba(255, 255, 255, 0.3);
- background: rgb(36, 36, 36);
+ -webkit-box-shadow: inset 0 0 1px rgb(255 255 255 / 30%);
+ background: rgb(36 36 36);
}
:not(.platform-mac).-theme-with-dark-background ::-webkit-scrollbar-thumb,
:host-context(:not(.platform-mac).-theme-with-dark-background) ::-webkit-scrollbar-thumb {
border-radius: 2px;
background-color: #333;
- -webkit-box-shadow: inset 0 0 1px rgba(255, 255, 255, 0.5);
+ -webkit-box-shadow: inset 0 0 1px rgb(255 255 255 / 50%);
}
:not(.platform-mac).-theme-with-dark-background ::-webkit-scrollbar-corner,
@@ -360,7 +360,7 @@
}
[is=ui-icon].icon-mask {
- background-color: rgb(110, 110, 110);
+ background-color: rgb(110 110 110);
-webkit-mask-position: var(--spritesheet-position);
}
@@ -446,7 +446,7 @@
}
.undisplayable-text {
- color: rgb(128, 128, 128);
+ color: rgb(128 128 128);
font-style: italic;
}
@@ -474,7 +474,7 @@
}
button.link[data-keyboard-focus="true"]:focus {
- background-color: rgba(0, 0, 0, 0.08);
+ background-color: rgb(0 0 0 / 8%);
border-radius: 2px;
}
@@ -490,7 +490,7 @@
@media (forced-colors: active) {
.dimmed,
.chrome-select:disabled {
- opacity: 1;
+ opacity: 100%;
}
[is=ui-icon].icon-mask,
diff --git a/front_end/ui/inspectorStyle.css b/front_end/ui/inspectorStyle.css
index 17d7529..f52cd90 100644
--- a/front_end/ui/inspectorStyle.css
+++ b/front_end/ui/inspectorStyle.css
@@ -38,7 +38,7 @@
--accent-color-hover: #3b86e8;
--accent-fg-color-hover: #1567d3;
--active-control-bg-color: #5a5a5a;
- --focus-bg-color: hsl(214, 40%, 92%);
+ --focus-bg-color: hsl(214deg 40% 92%);
--focus-ring-inactive-shadow-color: #e0e0e0;
--input-validation-error: #db1600;
--toolbar-bg-color: #f3f3f3;
@@ -49,67 +49,67 @@
--tab-selected-fg-color: #333;
--tab-selected-bg-color: var(--toolbar-bg-color);
--drop-shadow:
- 0 0 0 1px rgba(0, 0, 0, 0.05),
- 0 2px 4px rgba(0, 0, 0, 0.2),
- 0 2px 6px rgba(0, 0, 0, 0.1);
+ 0 0 0 1px rgb(0 0 0 / 5%),
+ 0 2px 4px rgb(0 0 0 / 20%),
+ 0 2px 6px rgb(0 0 0 / 10%);
--divider-color: #d0d0d0;
--focus-ring-inactive-shadow: 0 0 0 1px var(--focus-ring-inactive-shadow-color);
--item-selection-bg-color: #cfe8fc;
--item-selection-inactive-bg-color: #e0e0e0;
- --network-grid-default-color: rgba(255, 255, 255, 1);
- --network-grid-stripe-color: rgba(245, 245, 245, 1);
- --network-grid-navigation-color: rgba(221, 238, 255, 1);
- --network-grid-hovered-color: rgba(235, 242, 252, 0.7);
- --network-grid-initiator-path-color: rgba(58, 217, 58, 0.4);
- --network-grid-initiated-path-color: rgba(217, 58, 58, 0.4);
- --network-grid-selected-color: rgba(219, 219, 219, 0.6);
+ --network-grid-default-color: rgb(255 255 255 / 100%);
+ --network-grid-stripe-color: rgb(245 245 245 / 100%);
+ --network-grid-navigation-color: rgb(221 238 255 / 100%);
+ --network-grid-hovered-color: rgb(235 242 252 / 70%);
+ --network-grid-initiator-path-color: rgb(58 217 58 / 40%);
+ --network-grid-initiated-path-color: rgb(217 58 58 / 40%);
+ --network-grid-selected-color: rgb(219 219 219 / 60%);
--network-grid-focus-selected-color: var(--selection-bg-color);
- --network-grid-focus-selected-color-has-error: rgb(255, 240, 240, 1);
- --network-grid-from-frame-color: rgba(224, 247, 250, 0.4);
- --network-grid-is-product-color: rgba(255, 252, 225, 0.6);
+ --network-grid-focus-selected-color-has-error: rgb(255 240 240 / 100%);
+ --network-grid-from-frame-color: rgb(224 247 250 / 40%);
+ --network-grid-is-product-color: rgb(255 252 225 / 60%);
}
.-theme-with-dark-background {
--accent-color: #0e639c;
--accent-fg-color: #ccc;
--accent-fg-color-hover: #ccc;
- --accent-color-hover: rgb(17, 119, 187);
+ --accent-color-hover: rgb(17 119 187);
--active-control-bg-color: #cdcdcd;
- --focus-bg-color: hsl(214, 19%, 27%);
+ --focus-bg-color: hsl(214deg 19% 27%);
--focus-ring-inactive-shadow-color: #5a5a5a;
--toolbar-bg-color: #292a2d; /* --google-grey-900-white-4-percent */
--toolbar-hover-bg-color: #202020;
--selection-fg-color: #cdcdcd;
--selection-inactive-fg-color: #cdcdcd;
- --selection-inactive-bg-color: hsl(0, 0%, 28%);
+ --selection-inactive-bg-color: hsl(0deg 0% 28%);
--tab-selected-fg-color: #eaeaea;
--tab-selected-bg-color: #000;
--drop-shadow:
- 0 0 0 1px rgba(255, 255, 255, 0.2),
- 0 2px 4px 2px rgba(0, 0, 0, 0.2),
- 0 2px 6px 2px rgba(0, 0, 0, 0.1);
+ 0 0 0 1px rgb(255 255 255 / 20%),
+ 0 2px 4px 2px rgb(0 0 0 / 20%),
+ 0 2px 6px 2px rgb(0 0 0 / 10%);
--divider-color: #525252;
--focus-ring-inactive-shadow: 0 0 0 1px var(--focus-ring-inactive-shadow-color);
- --item-selection-bg-color: hsl(207, 88%, 22%);
+ --item-selection-bg-color: hsl(207deg 88% 22%);
--item-selection-inactive-bg-color: #454545;
- --network-grid-default-color: rgba(36, 36, 36, 1);
- --network-grid-stripe-color: rgba(41, 41, 41, 1);
- --network-grid-navigation-color: rgba(221, 238, 255, 1);
- --network-grid-hovered-color: rgba(20, 37, 63, 0.7);
- --network-grid-initiator-path-color: rgba(58, 217, 58, 0.4);
- --network-grid-initiated-path-color: rgba(217, 58, 58, 0.4);
- --network-grid-selected-color: rgba(57, 57, 57, 0.6);
+ --network-grid-default-color: rgb(36 36 36 / 100%);
+ --network-grid-stripe-color: rgb(41 41 41 / 100%);
+ --network-grid-navigation-color: rgb(221 238 255 / 100%);
+ --network-grid-hovered-color: rgb(20 37 63 / 70%);
+ --network-grid-initiator-path-color: rgb(58 217 58 / 40%);
+ --network-grid-initiated-path-color: rgb(217 58 58 / 40%);
+ --network-grid-selected-color: rgb(57 57 57 / 60%);
--network-grid-focus-selected-color: var(--selection-bg-color);
- --network-grid-focus-selected-color-has-error: rgba(217, 58, 58, 0.15);
- --network-grid-from-frame-color: rgba(224, 247, 250, 0.4);
- --network-grid-is-product-color: rgba(255, 252, 225, 0.6);
+ --network-grid-focus-selected-color-has-error: rgb(217 58 58 / 15%);
+ --network-grid-from-frame-color: rgb(224 247 250 / 40%);
+ --network-grid-is-product-color: rgb(255 252 225 / 60%);
}
:root {
--focus-ring-active-shadow: 0 0 0 1px var(--accent-color);
--selection-bg-color: var(--accent-color);
--divider-border: 1px solid var(--divider-color);
- --item-hover-color: rgba(56, 121, 217, 0.1);
+ --item-hover-color: rgb(56 121 217 / 10%);
--network-frame-divider-color: #fccc49;
}
@@ -129,12 +129,12 @@
}
.platform-linux {
- color: rgb(48, 57, 66);
+ color: rgb(48 57 66);
font-family: Roboto, Ubuntu, Arial, sans-serif;
}
.platform-mac {
- color: rgb(48, 57, 66);
+ color: rgb(48 57 66);
font-family: '.SFNSDisplay-Regular', 'Helvetica Neue', 'Lucida Grande', sans-serif;
}
diff --git a/front_end/ui/inspectorSyntaxHighlight.css b/front_end/ui/inspectorSyntaxHighlight.css
index e746a16..b27a75d 100644
--- a/front_end/ui/inspectorSyntaxHighlight.css
+++ b/front_end/ui/inspectorSyntaxHighlight.css
@@ -25,51 +25,51 @@
* (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF
* THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
*/
-.cm-js-keyword { color: hsl(310, 86%, 36%); }
-.cm-js-number { color: hsl(248, 100%, 41%); }
-.cm-js-comment { color: hsl(120, 100%, 23%); font-style: italic; }
-.cm-js-string { color: hsl(1, 80%, 43%); }
-.cm-js-string-2 { color: hsl(1, 99%, 39%); }
-.cm-js-atom { color: hsl(310, 86%, 36%); }
-.cm-js-def { color: hsl(240, 73%, 38%); }
-.cm-js-operator { color: hsl(27, 100%, 30%); }
-.cm-js-meta { color: hsl(27, 100%, 30%); }
-.cm-js-variable-2 { color: hsl(240, 73%, 38%); }
+.cm-js-keyword { color: hsl(310deg 86% 36%); }
+.cm-js-number { color: hsl(248deg 100% 41%); }
+.cm-js-comment { color: hsl(120deg 100% 23%); font-style: italic; }
+.cm-js-string { color: hsl(1deg 80% 43%); }
+.cm-js-string-2 { color: hsl(1deg 99% 39%); }
+.cm-js-atom { color: hsl(310deg 86% 36%); }
+.cm-js-def { color: hsl(240deg 73% 38%); }
+.cm-js-operator { color: hsl(27deg 100% 30%); }
+.cm-js-meta { color: hsl(27deg 100% 30%); }
+.cm-js-variable-2 { color: hsl(240deg 73% 38%); }
-.cm-css-keyword { color: rgb(7, 144, 154); }
-.cm-css-number { color: rgb(50, 0, 255); }
-.cm-css-comment { color: rgb(0, 116, 0); }
-.cm-css-def { color: rgb(200, 0, 0); }
-.cm-css-meta { color: rgb(200, 0, 0); }
-.cm-css-atom { color: rgb(7, 144, 154); }
-.cm-css-string { color: rgb(7, 144, 154); }
-.cm-css-string-2 { color: rgb(7, 144, 154); }
-.cm-css-link { color: rgb(7, 144, 154); }
-.cm-css-variable { color: rgb(200, 0, 0); }
-.cm-css-variable-2 { color: rgb(0, 0, 128); }
+.cm-css-keyword { color: rgb(7 144 154); }
+.cm-css-number { color: rgb(50 0 255); }
+.cm-css-comment { color: rgb(0 116 0); }
+.cm-css-def { color: rgb(200 0 0); }
+.cm-css-meta { color: rgb(200 0 0); }
+.cm-css-atom { color: rgb(7 144 154); }
+.cm-css-string { color: rgb(7 144 154); }
+.cm-css-string-2 { color: rgb(7 144 154); }
+.cm-css-link { color: rgb(7 144 154); }
+.cm-css-variable { color: rgb(200 0 0); }
+.cm-css-variable-2 { color: rgb(0 0 128); }
.cm-css-property,
-.webkit-css-property { color: rgb(200, 0, 0); }
+.webkit-css-property { color: rgb(200 0 0); }
-.cm-xml-meta { color: rgb(192, 192, 192); }
-.cm-xml-comment { color: rgb(35, 110, 37); }
-.cm-xml-string { color: rgb(26, 26, 166); }
+.cm-xml-meta { color: rgb(192 192 192); }
+.cm-xml-comment { color: rgb(35 110 37); }
+.cm-xml-string { color: rgb(26 26 166); }
.cm-xml-tag { color: var(--dom-tag-name-color); }
-.cm-xml-attribute { color: rgb(153, 69, 0); }
+.cm-xml-attribute { color: rgb(153 69 0); }
.cm-xml-link { color: #00e; }
:root {
- --dom-tag-name-color: rgb(136, 18, 128);
- --dom-attribute-name-color: rgb(153, 69, 0);
+ --dom-tag-name-color: rgb(136 18 128);
+ --dom-attribute-name-color: rgb(153 69 0);
}
.webkit-html-comment {
/* Keep this in sync with view-source.css (.webkit-html-comment) */
- color: rgb(35, 110, 37);
+ color: rgb(35 110 37);
}
.webkit-html-tag {
- color: rgb(168, 148, 166);
+ color: rgb(168 148 166);
}
.webkit-html-tag-name,
@@ -94,13 +94,13 @@
.webkit-html-entity-value {
/* This one is non-standard. */
- background-color: rgba(0, 0, 0, 0.15);
+ background-color: rgb(0 0 0 / 15%);
unicode-bidi: -webkit-isolate;
}
.webkit-html-doctype {
/* Keep this in sync with view-source.css (.webkit-html-doctype) */
- color: rgb(192, 192, 192);
+ color: rgb(192 192 192);
}
.webkit-html-attribute-name {
@@ -111,12 +111,12 @@
.webkit-html-attribute-value {
/* Keep this in sync with view-source.css (.webkit-html-attribute-value) */
- color: rgb(26, 26, 166);
+ color: rgb(26 26 166);
unicode-bidi: -webkit-isolate;
}
.devtools-link {
- color: rgb(17, 85, 204);
+ color: rgb(17 85 204);
text-decoration: underline;
}
@@ -134,7 +134,7 @@
.-theme-with-dark-background .devtools-link,
:host-context(.-theme-with-dark-background) .devtools-link {
- color: hsl(0, 0%, 67%);
+ color: hsl(0deg 0% 67%);
}
/* Default CodeMirror Theme */
diff --git a/front_end/ui/inspectorSyntaxHighlightDark.css b/front_end/ui/inspectorSyntaxHighlightDark.css
index 91a556e..8fdfbb5 100644
--- a/front_end/ui/inspectorSyntaxHighlightDark.css
+++ b/front_end/ui/inspectorSyntaxHighlightDark.css
@@ -4,83 +4,83 @@
* found in the LICENSE file.
*/
-.cm-js-atom { color: rgb(161, 247, 181); }
-.cm-js-attribute { color: rgb(97, 148, 198); }
-.cm-js-builtin { color: rgb(159, 180, 214); }
-.cm-js-comment { color: rgb(116, 116, 116); }
+.cm-js-atom { color: rgb(161 247 181); }
+.cm-js-attribute { color: rgb(97 148 198); }
+.cm-js-builtin { color: rgb(159 180 214); }
+.cm-js-comment { color: rgb(116 116 116); }
.cm-js-def { color: var(--dom-tag-name-color); }
-.cm-js-keyword { color: rgb(154, 127, 213); }
-.cm-js-link { color: rgb(159, 180, 214); }
-.cm-js-meta { color: rgb(221, 251, 85); }
-.cm-js-number { color: rgb(161, 247, 181); }
-.cm-js-operator { color: rgb(210, 192, 87); }
-.cm-js-property { color: rgb(210, 192, 87); }
-.cm-js-string { color: rgb(242, 139, 84); }
-.cm-js-string-2 { color: rgb(242, 139, 84); }
+.cm-js-keyword { color: rgb(154 127 213); }
+.cm-js-link { color: rgb(159 180 214); }
+.cm-js-meta { color: rgb(221 251 85); }
+.cm-js-number { color: rgb(161 247 181); }
+.cm-js-operator { color: rgb(210 192 87); }
+.cm-js-property { color: rgb(210 192 87); }
+.cm-js-string { color: rgb(242 139 84); }
+.cm-js-string-2 { color: rgb(242 139 84); }
.cm-js-tag { color: var(--dom-tag-name-color); }
-.cm-js-variable { color: rgb(217, 217, 217); }
-.cm-js-variable-2 { color: rgb(217, 217, 217); }
-.cm-atom { color: rgb(161, 247, 181); }
-.cm-comment { color: rgb(116, 116, 116); }
-.cm-variable { color: rgb(217, 217, 217); }
-.cm-string { color: rgb(242, 139, 84); }
-.cm-keyword { color: rgb(154, 127, 213); }
-.cm-number { color: rgb(161, 247, 181); }
-.cm-operator { color: rgb(210, 192, 87); }
-.cm-css-atom { color: rgb(217, 217, 217); }
-.cm-css-builtin { color: rgb(255, 163, 79); }
-.cm-css-def { color: rgb(255, 163, 79); }
-.cm-css-comment { color: rgb(116, 116, 116); }
-.cm-css-meta { color: rgb(132, 240, 255); }
-.cm-css-number { color: rgb(217, 217, 217); }
-.cm-css-operator { color: rgb(217, 217, 217); }
-.cm-css-property { color: rgb(132, 240, 255); }
-.cm-css-qualifier { color: rgb(255, 163, 79); }
-.cm-css-string { color: rgb(231, 194, 111); }
-.cm-css-string-2 { color: rgb(217, 217, 217); }
-.cm-css-tag { color: rgb(255, 163, 79); }
-.cm-css-variable { color: rgb(255, 163, 79); }
-.cm-css-variable-2 { color: rgb(255, 163, 79); }
-.cm-xml-comment { color: rgb(137, 137, 137); }
-.cm-xml-error { color: rgb(198, 95, 95); }
-.cm-xml-string { color: rgb(242, 151, 102); }
+.cm-js-variable { color: rgb(217 217 217); }
+.cm-js-variable-2 { color: rgb(217 217 217); }
+.cm-atom { color: rgb(161 247 181); }
+.cm-comment { color: rgb(116 116 116); }
+.cm-variable { color: rgb(217 217 217); }
+.cm-string { color: rgb(242 139 84); }
+.cm-keyword { color: rgb(154 127 213); }
+.cm-number { color: rgb(161 247 181); }
+.cm-operator { color: rgb(210 192 87); }
+.cm-css-atom { color: rgb(217 217 217); }
+.cm-css-builtin { color: rgb(255 163 79); }
+.cm-css-def { color: rgb(255 163 79); }
+.cm-css-comment { color: rgb(116 116 116); }
+.cm-css-meta { color: rgb(132 240 255); }
+.cm-css-number { color: rgb(217 217 217); }
+.cm-css-operator { color: rgb(217 217 217); }
+.cm-css-property { color: rgb(132 240 255); }
+.cm-css-qualifier { color: rgb(255 163 79); }
+.cm-css-string { color: rgb(231 194 111); }
+.cm-css-string-2 { color: rgb(217 217 217); }
+.cm-css-tag { color: rgb(255 163 79); }
+.cm-css-variable { color: rgb(255 163 79); }
+.cm-css-variable-2 { color: rgb(255 163 79); }
+.cm-xml-comment { color: rgb(137 137 137); }
+.cm-xml-error { color: rgb(198 95 95); }
+.cm-xml-string { color: rgb(242 151 102); }
.cm-xml-tag { color: var(--dom-tag-name-color); }
.cm-xml-attribute { color: var(--dom-attribute-name-color); }
-.cm-xml-link { color: rgb(231, 194, 111); }
+.cm-xml-link { color: rgb(231 194 111); }
.webkit-html-attribute-name { color: var(--dom-attribute-name-color); }
-.webkit-html-attribute-value { color: rgb(242, 151, 102); }
-.webkit-html-comment { color: rgb(137, 137, 137); }
-.devtools-link { color: rgb(231, 194, 111); }
+.webkit-html-attribute-value { color: rgb(242 151 102); }
+.webkit-html-comment { color: rgb(137 137 137); }
+.devtools-link { color: rgb(231 194 111); }
.webkit-html-tag { color: var(--dom-tag-name-color); }
.webkit-html-tag-name { color: var(--dom-tag-name-color); }
.webkit-html-close-tag-name { color: var(--dom-tag-name-color); }
-.webkit-html-text-node { color: rgb(207, 208, 208); }
-.webkit-html-css-node { color: rgb(207, 208, 208); }
-.webkit-html-js-node { color: rgb(207, 208, 208); }
-.webkit-html-pseudo-element { color: rgb(93, 175, 215); }
-.webkit-css-property { color: rgb(53, 212, 199); }
+.webkit-html-text-node { color: rgb(207 208 208); }
+.webkit-html-css-node { color: rgb(207 208 208); }
+.webkit-html-js-node { color: rgb(207 208 208); }
+.webkit-html-pseudo-element { color: rgb(93 175 215); }
+.webkit-css-property { color: rgb(53 212 199); }
.cm-def { color: var(--dom-tag-name-color); }
.cm-header { color: var(--dom-tag-name-color); }
-.cm-variable-2 { color: rgb(217, 217, 217); }
+.cm-variable-2 { color: rgb(217 217 217); }
.cm-variable-2 { color: #05a; }
.cm-variable-3,
-.cm-type { color: rgb(93, 176, 215); }
-.cm-string { color: rgb(242, 139, 84); }
+.cm-type { color: rgb(93 176 215); }
+.cm-string { color: rgb(242 139 84); }
.cm-meta { color: #555; }
-.cm-meta { color: rgb(221, 251, 85); }
-.cm-qualifier { color: rgb(255, 163, 79); }
-.cm-builtin { color: rgb(159, 180, 214); }
+.cm-meta { color: rgb(221 251 85); }
+.cm-qualifier { color: rgb(255 163 79); }
+.cm-builtin { color: rgb(159 180 214); }
.cm-bracket { color: #997; }
.cm-tag { color: var(--dom-tag-name-color); }
-.cm-attribute { color: rgb(97, 148, 198); }
+.cm-attribute { color: rgb(97 148 198); }
.cm-hr { color: #999; }
-.cm-link { color: rgb(159, 180, 214); }
+.cm-link { color: rgb(159 180 214); }
:root {
- --dom-tag-name-color: rgb(93, 176, 215);
- --dom-attribute-name-color: rgb(155, 187, 220);
+ --dom-tag-name-color: rgb(93 176 215);
+ --dom-attribute-name-color: rgb(155 187 220);
}
diff --git a/front_end/ui/listWidget.css b/front_end/ui/listWidget.css
index 124a44d..1b22acb 100644
--- a/front_end/ui/listWidget.css
+++ b/front_end/ui/listWidget.css
@@ -7,12 +7,12 @@
.list {
flex: auto 0 1;
overflow-y: auto;
- border: 1px solid rgb(231, 231, 231);
+ border: 1px solid rgb(231 231 231);
flex-direction: column;
}
.list-separator {
- background: rgb(231, 231, 231);
+ background: rgb(231 231 231);
height: 1px;
}
@@ -27,7 +27,7 @@
.list-item:focus-within,
.list-item:hover {
- background: hsl(0, 0%, 96%);
+ background: hsl(0deg 0% 96%);
}
.list-widget-input-validation-error {
@@ -49,7 +49,7 @@
.list-item:focus-within .controls-gradient,
.list-item:hover .controls-gradient {
- background-image: linear-gradient(90deg, transparent, hsl(0, 0%, 96%));
+ background-image: linear-gradient(90deg, transparent, hsl(0deg 0% 96%));
}
.controls-buttons {
@@ -63,7 +63,7 @@
.list-item:focus-within .controls-buttons,
.list-item:hover .controls-buttons {
- background-color: hsl(0, 0%, 96%);
+ background-color: hsl(0deg 0% 96%);
visibility: visible;
}
@@ -72,7 +72,7 @@
flex-direction: column;
align-items: stretch;
flex: none;
- background: hsl(0, 0%, 96%);
+ background: hsl(0deg 0% 96%);
overflow: hidden;
}
diff --git a/front_end/ui/progressIndicator.css b/front_end/ui/progressIndicator.css
index c8e3cc6..aa2cb9b 100644
--- a/front_end/ui/progressIndicator.css
+++ b/front_end/ui/progressIndicator.css
@@ -5,7 +5,7 @@
*/
.progress-indicator-shadow-stop-button {
- background-color: rgb(216, 0, 0) !important;
+ background-color: rgb(216 0 0) !important;
border: 0;
width: 10px;
height: 12px;
diff --git a/front_end/ui/reportView.css b/front_end/ui/reportView.css
index 68b63cf..f297612 100644
--- a/front_end/ui/reportView.css
+++ b/front_end/ui/reportView.css
@@ -19,7 +19,7 @@
}
.report-header {
- border-bottom: 1px solid rgb(230, 230, 230);
+ border-bottom: 1px solid rgb(230 230 230);
padding: 12px 24px;
}
@@ -45,7 +45,7 @@
.report-section {
display: flex;
padding: 12px;
- border-bottom: 1px solid rgb(230, 230, 230);
+ border-bottom: 1px solid rgb(230 230 230);
flex-direction: column;
}
diff --git a/front_end/ui/searchableView.css b/front_end/ui/searchableView.css
index 2cc31d8..0323cc3 100644
--- a/front_end/ui/searchableView.css
+++ b/front_end/ui/searchableView.css
@@ -54,12 +54,12 @@
height: 20px;
background-repeat: no-repeat;
background-position: 4px 7px;
- border-left: 1px solid rgb(170, 170, 170);
- opacity: 0.3;
+ border-left: 1px solid rgb(170 170 170);
+ opacity: 30%;
}
.toolbar-search-navigation.enabled {
- opacity: 1;
+ opacity: 100%;
}
.toolbar-search button.search-action-button {
@@ -87,7 +87,7 @@
.toolbar-search-control,
.toolbar-replace-control {
- border: 1px solid rgb(163, 163, 163);
+ border: 1px solid rgb(163 163 163);
height: 22px;
border-radius: 2px;
width: 100%;
@@ -101,7 +101,7 @@
.toolbar-search-navigation.toolbar-search-navigation-prev {
background-image: url(Images/searchPrev.png);
- border-left: 1px solid rgb(163, 163, 163);
+ border-left: 1px solid rgb(163 163 163);
}
:host-context(.-theme-with-dark-background) .toolbar-search-navigation {
@@ -114,7 +114,7 @@
.toolbar-search-navigation.toolbar-search-navigation-next {
background-image: url(Images/searchNext.png);
- border-left: 1px solid rgb(230, 230, 230);
+ border-left: 1px solid rgb(230 230 230);
}
.toolbar-search-navigation.toolbar-search-navigation-next.enabled:active {
@@ -125,7 +125,7 @@
display: inline-block;
text-align: right;
padding: 0 4px;
- color: rgb(165, 165, 165);
+ color: rgb(165 165 165);
align-self: center;
}
diff --git a/front_end/ui/segmentedButton.css b/front_end/ui/segmentedButton.css
index e2f8622..21117f4 100644
--- a/front_end/ui/segmentedButton.css
+++ b/front_end/ui/segmentedButton.css
@@ -38,13 +38,13 @@
}
.segmented-button-segment.segmented-button-segment-selected {
- background-color: hsl(218, 81%, 59%);
+ background-color: hsl(218deg 81% 59%);
border-color: transparent;
color: #fafafa;
}
.segmented-button-segment.segmented-button-segment-selected:hover {
- background-color: hsl(218, 81%, 62%);
+ background-color: hsl(218deg 81% 62%);
color: #fff;
}
diff --git a/front_end/ui/slider.css b/front_end/ui/slider.css
index 801f441..d4bf888 100644
--- a/front_end/ui/slider.css
+++ b/front_end/ui/slider.css
@@ -33,12 +33,12 @@
padding: 0;
width: 100%;
height: 2px;
- background-color: rgba(0, 0, 0, 0.26);
+ background-color: rgb(0 0 0 / 26%);
}
.dt-range-input:focus::-webkit-slider-thumb,
-theme-preserve {
- box-shadow: 0 0 0 2px rgba(66, 133, 244, 0.4);
+ box-shadow: 0 0 0 2px rgb(66 133 244 / 40%);
}
.dt-range-input:disabled::-webkit-slider-thumb {
diff --git a/front_end/ui/smallBubble.css b/front_end/ui/smallBubble.css
index 3b7b695..f778adc 100644
--- a/front_end/ui/smallBubble.css
+++ b/front_end/ui/smallBubble.css
@@ -21,17 +21,17 @@
}
div.verbose {
- background-color: rgb(0, 0, 255);
+ background-color: rgb(0 0 255);
}
div.info {
- background-color: rgb(128, 151, 189);
+ background-color: rgb(128 151 189);
}
div.warning {
- background-color: rgb(232, 164, 0);
+ background-color: rgb(232 164 0);
}
div.error {
- background-color: rgb(216, 35, 35);
+ background-color: rgb(216 35 35);
}
diff --git a/front_end/ui/softContextMenu.css b/front_end/ui/softContextMenu.css
index f9f11be..f85a923 100644
--- a/front_end/ui/softContextMenu.css
+++ b/front_end/ui/softContextMenu.css
@@ -20,14 +20,14 @@
}
:host:host-context(.platform-mac):host-context(html:not(.-theme-with-dark-background)) .soft-context-menu {
- border: 1px solid rgba(196, 196, 196, 0.9);
- border-top: 1px solid rgba(196, 196, 196, 0.5);
+ border: 1px solid rgb(196 196 196 / 90%);
+ border-top: 1px solid rgb(196 196 196 / 50%);
border-radius: 4px;
- background-color: rgb(240, 240, 240);
- box-shadow: 0 5px 10px rgba(0, 0, 0, 0.25);
+ background-color: rgb(240 240 240);
+ box-shadow: 0 5px 10px rgb(0 0 0 / 25%);
--context-menu-hover-color: #fff;
- --context-menu-seperator-color: rgb(222, 222, 222);
+ --context-menu-seperator-color: rgb(222 222 222);
}
:host-context(.-theme-with-dark-background) .soft-context-menu {
@@ -75,7 +75,7 @@
:host:host-context(.platform-mac):host-context(html:not(.-theme-with-dark-background)) .soft-context-menu-item-mouse-over {
border-top: 1px solid transparent;
border-bottom: 1px solid transparent;
- background-image: linear-gradient(to right, hsl(214, 81%, 60%), hsl(214, 100%, 56%));
+ background-image: linear-gradient(to right, hsl(214deg 81% 60%), hsl(214deg 100% 56%));
}
:host:host-context(.platform-mac):host-context(html:not(.-theme-with-dark-background)) .separator-line {
@@ -114,7 +114,7 @@
}
.checkmark {
- opacity: 0.7;
+ opacity: 70%;
pointer-events: none;
margin: auto 5px auto 0;
}
@@ -124,7 +124,7 @@
}
.soft-context-menu-item-mouse-over .checkmark {
- opacity: 1;
+ opacity: 100%;
filter: none;
}
@@ -159,7 +159,7 @@
}
.checkmark {
- opacity: 1;
+ opacity: 100%;
}
.spritesheet-smallicons:not(.icon-mask) {
diff --git a/front_end/ui/softDropDown.css b/front_end/ui/softDropDown.css
index c7e25f7..8241e0a 100644
--- a/front_end/ui/softDropDown.css
+++ b/front_end/ui/softDropDown.css
@@ -5,7 +5,7 @@
*/
.item.disabled {
- opacity: 0.5;
+ opacity: 50%;
}
.item-list {
@@ -23,7 +23,7 @@
@media (forced-colors: active) {
.item.disabled {
- opacity: 1;
+ opacity: 100%;
}
.item-list {
diff --git a/front_end/ui/softDropDownButton.css b/front_end/ui/softDropDownButton.css
index 0fcbc58..0d68b2b 100644
--- a/front_end/ui/softDropDownButton.css
+++ b/front_end/ui/softDropDownButton.css
@@ -13,7 +13,7 @@
}
button.soft-dropdown[disabled] {
- opacity: 0.5;
+ opacity: 50%;
}
button.soft-dropdown > .title {
@@ -31,7 +31,7 @@
right: 2px;
bottom: 2px;
border-radius: 2px;
- background: rgba(0, 0, 0, 0.08);
+ background: rgb(0 0 0 / 8%);
}
@media (forced-colors: active) {
@@ -40,7 +40,7 @@
}
button.soft-dropdown[disabled] {
- opacity: 1;
+ opacity: 100%;
}
button.soft-dropdown:disabled > .smallicon-triangle-down {
diff --git a/front_end/ui/tabbedPane.css b/front_end/ui/tabbedPane.css
index de16dda..9eee1d7 100644
--- a/front_end/ui/tabbedPane.css
+++ b/front_end/ui/tabbedPane.css
@@ -50,7 +50,7 @@
text-align: center;
width: fit-content;
margin: 20px auto 0;
- text-shadow: rgba(255, 255, 255, 0.75) 0 1px 0;
+ text-shadow: rgb(255 255 255 / 75%) 0 1px 0;
line-height: 28px;
overflow: hidden;
}
@@ -154,7 +154,7 @@
.tabbed-pane-header-tab.dragging {
position: relative;
- box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.37);
+ box-shadow: 0 1px 4px 0 rgb(0 0 0 / 37%);
background-color: #e5e5e5;
}
@@ -170,7 +170,7 @@
.tabbed-pane-header-tabs-drop-down-container {
float: left;
- opacity: 0.8;
+ opacity: 80%;
cursor: pointer;
display: flex;
align-items: center;
@@ -178,13 +178,13 @@
}
.tabbed-pane-header-tabs-drop-down-container > .chevron-icon {
- background-color: hsla(0, 0%, 20%, 1);
+ background-color: hsl(0deg 0% 20% / 100%);
display: block;
}
.tabbed-pane-header-tabs-drop-down-container:hover,
.tabbed-pane-header-tabs-drop-down-container[data-keyboard-focus="true"]:focus {
- background-color: rgba(0, 0, 0, 0.08);
+ background-color: rgb(0 0 0 / 8%);
}
.tabbed-pane-header-tabs-drop-down-container.measuring {
@@ -192,7 +192,7 @@
}
.tabbed-pane-header-tabs-drop-down-container:active {
- opacity: 0.8;
+ opacity: 80%;
}
/* Web page style */
@@ -278,7 +278,7 @@
}
.tabbed-pane-header-tab.disabled {
- opacity: 0.5;
+ opacity: 50%;
pointer-events: none;
}
@@ -317,7 +317,7 @@
}
.tabbed-pane-header-tabs-drop-down-container {
- opacity: 1;
+ opacity: 100%;
}
.tabbed-pane-header-tabs-drop-down-container:hover,
diff --git a/front_end/ui/textButton.css b/front_end/ui/textButton.css
index ce4051a..0276b53 100644
--- a/front_end/ui/textButton.css
+++ b/front_end/ui/textButton.css
@@ -8,7 +8,7 @@
margin: 2px;
height: 24px;
font-size: 12px;
- border: 1px solid rgba(0, 0, 0, 0.2);
+ border: 1px solid rgb(0 0 0 / 20%);
border-radius: 4px;
padding: 0 12px;
font-weight: 500;
@@ -22,7 +22,7 @@
.text-button:not(:disabled):hover,
.text-button:not(:disabled):active {
background-color: var(--toolbar-bg-color);
- box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
+ box-shadow: 0 1px 2px rgb(0 0 0 / 10%);
cursor: pointer;
}
@@ -37,11 +37,11 @@
}
.text-button:not(:disabled):focus {
- box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1), 0 0 0 2px rgba(66, 133, 244, 0.4);
+ box-shadow: 0 1px 2px rgb(0 0 0 / 10%), 0 0 0 2px rgb(66 133 244 / 40%);
}
.text-button:disabled {
- opacity: 0.38;
+ opacity: 38%;
}
.text-button.primary-button,
@@ -72,11 +72,11 @@
.-theme-with-dark-background .text-button:not(.primary-button):not(:disabled):hover,
.-theme-with-dark-background .text-button:not(.primary-button):not(:disabled):active {
background-color: #313131;
- box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
+ box-shadow: 0 1px 2px rgb(0 0 0 / 10%);
}
.-theme-with-dark-background .text-button:not(.primary-button):not(:disabled):focus {
- box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1), 0 0 0 2px rgba(94, 151, 246, 0.6);
+ box-shadow: 0 1px 2px rgb(0 0 0 / 10%), 0 0 0 2px rgb(94 151 246 / 60%);
}
.-theme-with-dark-background .text-button:not(.primary-button):not(:disabled):active {
@@ -128,7 +128,7 @@
.text-button:disabled {
forced-color-adjust: none;
- opacity: 1;
+ opacity: 100%;
background: ButtonFace;
border-color: GrayText;
color: GrayText;
diff --git a/front_end/ui/textPrompt.css b/front_end/ui/textPrompt.css
index f9e2333..2d0a62c 100644
--- a/front_end/ui/textPrompt.css
+++ b/front_end/ui/textPrompt.css
@@ -19,7 +19,7 @@
margin-right: -2px;
margin-bottom: -1px;
padding-bottom: 1px;
- opacity: 1 !important;
+ opacity: 100% !important;
}
.text-prompt-editing > .text-prompt {
@@ -29,12 +29,12 @@
}
.text-prompt > .auto-complete-text {
- color: rgb(128, 128, 128) !important;
+ color: rgb(128 128 128) !important;
}
.text-prompt[data-placeholder]:empty::before {
content: attr(data-placeholder);
- color: rgb(128, 128, 128);
+ color: rgb(128 128 128);
}
.text-prompt:not([data-placeholder]):empty::after {
@@ -53,7 +53,7 @@
}
.text-prompt.disabled {
- opacity: 0.5;
+ opacity: 50%;
cursor: default;
}
@@ -71,6 +71,6 @@
}
.text-prompt.disabled {
- opacity: 1;
+ opacity: 100%;
}
}
diff --git a/front_end/ui/toolbar.css b/front_end/ui/toolbar.css
index 4516c04..5a8fce9 100644
--- a/front_end/ui/toolbar.css
+++ b/front_end/ui/toolbar.css
@@ -54,7 +54,7 @@
}
select.toolbar-item:disabled {
- opacity: 0.5;
+ opacity: 50%;
}
.toolbar-dropdown-arrow {
@@ -64,7 +64,7 @@
}
select.toolbar-item:disabled + .toolbar-dropdown-arrow {
- opacity: 0.5;
+ opacity: 50%;
}
/* Toolbar item */
@@ -116,7 +116,7 @@
.toolbar-render-as-links * {
font-weight: initial;
- color: rgb(17, 85, 204);
+ color: rgb(17 85 204);
text-decoration: underline;
cursor: pointer;
}
@@ -133,7 +133,7 @@
/* Button */
.toolbar-button:disabled {
- opacity: 0.5;
+ opacity: 50%;
}
.toolbar-button.dark-text .toolbar-text {
@@ -180,12 +180,12 @@
.toolbar-button.toolbar-state-on.toolbar-toggle-with-red-color .toolbar-glyph,
.toolbar-button.toolbar-state-off.toolbar-default-with-red-color .toolbar-glyph {
- background-color: rgb(216, 0, 0) !important;
+ background-color: rgb(216 0 0) !important;
}
:host-context(.-theme-with-dark-background) .toolbar-button.toolbar-state-on.toolbar-toggle-with-red-color .toolbar-glyph,
:host-context(.-theme-with-dark-background) .toolbar-button.toolbar-state-off.toolbar-default-with-red-color .toolbar-glyph {
- background-color: hsl(0, 100%, 65%) !important;
+ background-color: hsl(0deg 100% 65%) !important;
}
@@ -221,7 +221,7 @@
}
select.toolbar-item[data-keyboard-focus="true"]:focus {
- background: rgba(0, 0, 0, 0.08);
+ background: rgb(0 0 0 / 8%);
border-radius: 2px;
}
@@ -253,14 +253,14 @@
}
.toolbar-input-clear-button {
- opacity: 0.7;
+ opacity: 70%;
flex-basis: 13px;
flex-shrink: 0;
height: 16px;
}
.toolbar-input-clear-button:hover {
- opacity: 0.99;
+ opacity: 99%;
}
.toolbar-input-empty .toolbar-input-clear-button {
@@ -301,7 +301,7 @@
}
.toolbar-button.emulate-active {
- background-color: rgb(163, 163, 163);
+ background-color: rgb(163 163 163);
}
.toolbar-button[data-keyboard-focus="true"]:focus::after {
@@ -310,7 +310,7 @@
bottom: 2px;
left: 2px;
right: 2px;
- background-color: rgba(0, 0, 0, 0.08);
+ background-color: rgb(0 0 0 / 8%);
border-radius: 2px;
content: "";
}
@@ -341,13 +341,13 @@
}
.toolbar-item.warning {
- background: hsl(0, 100%, 95%);
+ background: hsl(0deg 100% 95%);
}
@media (forced-colors: active) {
select.toolbar-item:disabled,
select.toolbar-item:disabled + .toolbar-dropdown-arrow {
- opacity: 1;
+ opacity: 100%;
background-color: Graytext;
}
@@ -374,7 +374,7 @@
}
.toolbar-button:disabled {
- opacity: 1;
+ opacity: 100%;
}
:not(.toolbar-render-as-links) .toolbar-button:disabled .toolbar-glyph,
diff --git a/front_end/ui/tooltip.css b/front_end/ui/tooltip.css
index 29e85cb..3ac0b71 100644
--- a/front_end/ui/tooltip.css
+++ b/front_end/ui/tooltip.css
@@ -5,15 +5,15 @@
*/
.tooltip {
- background: hsl(0, 0%, 95%);
+ background: hsl(0deg 0% 95%);
border-radius: 2px;
- color: hsl(0, 0%, 20%);
+ color: hsl(0deg 0% 20%);
padding: 5px 8px;
line-height: 14px;
display: flex;
align-items: center;
- -webkit-filter: drop-shadow(0 1px 2px hsla(0, 0%, 0%, 0.3));
- border: 1px solid hsla(0, 0%, 0%, 0.1);
+ -webkit-filter: drop-shadow(0 1px 2px hsl(0deg 0% 0% / 30%));
+ border: 1px solid hsl(0deg 0% 0% / 10%);
background-clip: padding-box;
box-sizing: border-box;
position: absolute;
@@ -22,7 +22,7 @@
z-index: 20001;
top: 0;
left: 0;
- opacity: 0;
+ opacity: 0%;
text-overflow: ellipsis;
overflow: hidden;
pointer-events: none;
@@ -35,7 +35,7 @@
.tooltip.shown {
visibility: visible;
transition-delay: 600ms;
- opacity: 1;
+ opacity: 100%;
}
.tooltip.shown.instant {
@@ -43,7 +43,7 @@
}
.tooltip-shortcut {
- color: hsl(0, 0%, 45%);
+ color: hsl(0deg 0% 45%);
display: inline-block;
margin-left: 8px;
flex: 0 0 auto;
diff --git a/front_end/web_audio/webAudio.css b/front_end/web_audio/webAudio.css
index 32e2ad8..a88c0cc 100644
--- a/front_end/web_audio/webAudio.css
+++ b/front_end/web_audio/webAudio.css
@@ -58,7 +58,7 @@
}
.context-detail-header {
- border-bottom: 1px solid rgb(230, 230, 230);
+ border-bottom: 1px solid rgb(230 230 230);
padding: 12px 24px;
margin-bottom: 10px;
}
@@ -82,7 +82,7 @@
}
.context-detail-row-entry:not(:empty) {
- color: hsla(0, 0%, 46%, 1);
+ color: hsl(0deg 0% 46% / 100%);
overflow: hidden;
width: 130px;
}
diff --git a/test/screenshots/interactive/interactive.css b/test/screenshots/interactive/interactive.css
index 4768d1e..a84916c 100644
--- a/test/screenshots/interactive/interactive.css
+++ b/test/screenshots/interactive/interactive.css
@@ -28,7 +28,7 @@
height: 85px;
background: #0083c3;
color: #fff;
- box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.5);
+ box-shadow: 0 2px 4px 0 rgb(0 0 0 / 50%);
display: flex;
align-items: center;
justify-content: center;
@@ -61,7 +61,7 @@
.shortcuts {
background: #003b59;
- box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.5);
+ box-shadow: 0 2px 4px 0 rgb(0 0 0 / 50%);
height: 48px;
position: relative;
z-index: 2;
@@ -75,17 +75,17 @@
position: fixed;
z-index: 10;
pointer-events: none;
- background: rgba(0, 0, 0, 0.7);
+ background: rgb(0 0 0 / 70%);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
- opacity: 0;
+ opacity: 0%;
transition: opacity 0.2s cubic-bezier(0, 0, 0.4, 1);
}
.diff.visible {
- opacity: 1;
+ opacity: 100%;
pointer-events: auto;
}
@@ -110,13 +110,13 @@
.diff img {
max-width: 100%;
border: 1px solid #d0d0d0;
- box-shadow: 0 6px 7px 0 rgba(0, 0, 0, 0.11);
+ box-shadow: 0 6px 7px 0 rgb(0 0 0 / 11%);
background: #fff;
cursor: pointer;
}
main img.selected {
- outline: 6px solid rgba(255, 0, 120, 0.6);
+ outline: 6px solid rgb(255 0 120 / 60%);
}
main h3 {
@@ -144,7 +144,7 @@
}
footer button[disabled] {
- opacity: 0.4;
+ opacity: 40%;
}
.status {
@@ -191,7 +191,7 @@
content: '';
padding: 3px 8px;
border-radius: 3px;
- border: 1px solid rgba(255, 255, 255, 0.7);
+ border: 1px solid rgb(255 255 255 / 70%);
margin-right: 8px;
font-size: 12px;
}
