From ca9fa2d73f1b15c7bf558715decd8e132ceeec36 Mon Sep 17 00:00:00 2001 From: Mathias Bynens Date: Tue, 19 May 2020 17:23:40 +0200 Subject: [PATCH] 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 Reviewed-by: Tim van der Lippe Commit-Queue: Tim van der Lippe Auto-Submit: Mathias Bynens --- .stylelintrc.json | 7 +- front_end/accessibility/accessibilityNode.css | 6 +- .../accessibility/accessibilityProperties.css | 4 +- front_end/accessibility/axBreadcrumbs.css | 12 +- front_end/animation/animationTimeline.css | 44 +++---- .../domBreakpointsSidebarPane.css | 6 +- .../eventListenerBreakpoints.css | 10 +- .../xhrBreakpointsSidebarPane.css | 8 +- front_end/changes/changesSidebar.css | 10 +- front_end/changes/changesView.css | 18 +-- front_end/color_picker/spectrum.css | 42 +++---- front_end/components/jsUtils.css | 2 +- front_end/console/consolePinPane.css | 16 +-- front_end/console/consolePrompt.css | 6 +- front_end/console/consoleSidebar.css | 4 +- front_end/console/consoleView.css | 60 ++++----- front_end/cookie_table/cookiesTable.css | 4 +- .../css_overview/cssOverviewCompletedView.css | 2 +- .../css_overview/cssOverviewSidebarPanel.css | 4 +- front_end/data_grid/dataGrid.css | 18 +-- front_end/elements/classesPaneWidget.css | 2 +- .../elements/computedStyleSidebarPane.css | 2 +- .../elements/computedStyleWidgetTree.css | 8 +- front_end/elements/domLinkifier.css | 4 +- front_end/elements/elementStatePaneWidget.css | 2 +- front_end/elements/elementsTreeOutline.css | 30 ++--- front_end/elements/metricsSidebarPane.css | 2 +- front_end/elements/stylesSectionTree.css | 16 +-- front_end/elements/stylesSidebarPane.css | 30 ++--- front_end/emulation/deviceModeToolbar.css | 2 +- front_end/emulation/deviceModeView.css | 50 ++++---- front_end/emulation/locationsSettingsTab.css | 2 +- front_end/emulation/mediaQueryInspector.css | 24 ++-- front_end/emulation/sensors.css | 8 +- .../event_listeners/eventListenersView.css | 8 +- front_end/help/releaseNote.css | 8 +- front_end/inline_editor/bezierEditor.css | 12 +- front_end/inline_editor/colorSwatch.css | 4 +- front_end/inline_editor/cssShadowEditor.css | 6 +- front_end/inspector_main/nodeIcon.css | 4 +- front_end/inspector_overlay/common.css | 2 +- front_end/issues/issuesTree.css | 2 +- front_end/layer_viewer/layerDetailsView.css | 2 +- front_end/layer_viewer/paintProfiler.css | 2 +- front_end/media/playerListView.css | 4 +- front_end/media/playerPropertiesView.css | 6 +- .../throttlingSettingsTab.css | 4 +- front_end/network/binaryResourceView.css | 4 +- front_end/network/blockedURLsPane.css | 2 +- front_end/network/networkConfigView.css | 6 +- front_end/network/networkLogView.css | 16 +-- front_end/network/networkPanel.css | 6 +- front_end/network/networkTimingTable.css | 4 +- front_end/network/requestCookiesView.css | 2 +- front_end/network/requestHeadersTree.css | 8 +- front_end/network/requestHeadersView.css | 2 +- front_end/network/requestInitiatorView.css | 2 +- front_end/network/signedExchangeInfoTree.css | 6 +- front_end/network/webSocketFrameView.css | 6 +- .../object_ui/customPreviewComponent.css | 2 +- front_end/object_ui/objectPopover.css | 2 +- .../object_ui/objectPropertiesSection.css | 6 +- front_end/object_ui/objectValue.css | 18 +-- front_end/perf_ui/chartViewport.css | 12 +- front_end/perf_ui/flameChart.css | 6 +- front_end/perf_ui/overviewGrid.css | 10 +- front_end/perf_ui/pieChart.css | 4 +- front_end/perf_ui/timelineGrid.css | 4 +- .../performanceMonitor.css | 4 +- front_end/profiler/heapProfiler.css | 14 +-- front_end/profiler/profileLauncherView.css | 8 +- front_end/profiler/profilesPanel.css | 12 +- front_end/profiler/profilesSidebarTree.css | 4 +- .../protocol_monitor/protocolMonitor.css | 4 +- front_end/quick_open/filteredListWidget.css | 12 +- front_end/resources/backgroundServiceView.css | 4 +- front_end/resources/indexedDBViews.css | 2 +- front_end/resources/resourcesPanel.css | 8 +- front_end/resources/resourcesSidebar.css | 16 +-- .../resources/serviceWorkerCacheViews.css | 4 +- front_end/resources/serviceWorkersView.css | 6 +- front_end/screencast/screencastView.css | 16 +-- front_end/search/searchResultsPane.css | 6 +- front_end/security/lockIcon.css | 4 +- front_end/security/mainView.css | 12 +- front_end/security/originView.css | 10 +- front_end/security/sidebar.css | 8 +- .../settings/frameworkBlackboxSettingsTab.css | 2 +- front_end/settings/keybindsSettingsTab.css | 4 +- front_end/settings/settingsScreen.css | 8 +- front_end/source_frame/imageView.css | 2 +- front_end/source_frame/xmlTree.css | 14 +-- front_end/sources/callStackSidebarPane.css | 6 +- front_end/sources/debuggerPausedMessage.css | 10 +- front_end/sources/dialog.css | 2 +- .../javaScriptBreakpointsSidebarPane.css | 8 +- front_end/sources/navigatorTree.css | 14 +-- front_end/sources/sourcesView.css | 16 +-- .../sources/watchExpressionsSidebarPane.css | 12 +- front_end/text_editor/cmdevtools.css | 84 ++++++------- front_end/timeline/historyToolbarButton.css | 6 +- front_end/timeline/timelinePaintProfiler.css | 2 +- front_end/timeline/timelinePanel.css | 30 ++--- front_end/timeline/timelineStatusDialog.css | 2 +- front_end/ui/checkboxTextLabel.css | 4 +- front_end/ui/dropTarget.css | 2 +- front_end/ui/emptyWidget.css | 2 +- front_end/ui/filter.css | 14 +-- front_end/ui/glassPane.css | 2 +- front_end/ui/infobar.css | 14 +-- front_end/ui/inspectorCommon.css | 42 +++---- front_end/ui/inspectorStyle.css | 68 +++++------ front_end/ui/inspectorSyntaxHighlight.css | 70 +++++------ front_end/ui/inspectorSyntaxHighlightDark.css | 114 +++++++++--------- front_end/ui/listWidget.css | 12 +- front_end/ui/progressIndicator.css | 2 +- front_end/ui/reportView.css | 4 +- front_end/ui/searchableView.css | 14 +-- front_end/ui/segmentedButton.css | 4 +- front_end/ui/slider.css | 4 +- front_end/ui/smallBubble.css | 8 +- front_end/ui/softContextMenu.css | 18 +-- front_end/ui/softDropDown.css | 4 +- front_end/ui/softDropDownButton.css | 6 +- front_end/ui/tabbedPane.css | 16 +-- front_end/ui/textButton.css | 14 +-- front_end/ui/textPrompt.css | 10 +- front_end/ui/toolbar.css | 28 ++--- front_end/ui/tooltip.css | 14 +-- front_end/web_audio/webAudio.css | 4 +- test/screenshots/interactive/interactive.css | 18 +-- 131 files changed, 775 insertions(+), 770 deletions(-) diff --git a/.stylelintrc.json b/.stylelintrc.json index 40db42c668..9a1f5e1b9e 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 17a408a60d..9b89745000 100644 --- a/front_end/accessibility/accessibilityNode.css +++ b/front_end/accessibility/accessibilityNode.css @@ -26,7 +26,7 @@ span.ax-value-undefined { } .ax-value-source-unused { - opacity: 0.7; + opacity: 70%; } .ax-value-source-superseded, @@ -52,7 +52,7 @@ span.ax-value-undefined { } .tree-outline li.property { - color: rgb(33, 33, 33); + color: rgb(33 33 33); } .tree-outline li.invalid { @@ -72,7 +72,7 @@ span.ax-value-undefined { @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 f88e0684ba..513c8e7729 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 88c31a0a9c..13e56c1eeb 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 8df0d8ae47..76b839d8d2 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 @@ circle.animation-keyframe-point { 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 @@ circle.animation-keyframe-point { .animation-time-overlay { background-color: black; - opacity: 0.05; + opacity: 5%; position: absolute; height: 100%; width: 100%; @@ -183,19 +183,19 @@ circle.animation-keyframe-point { } .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 @@ svg.animation-timeline-grid { } 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 @@ rect.animation-timeline-grid-line { } svg.animation-ui g:first-child { - opacity: 1; + opacity: 100%; } svg.animation-ui circle[data-keyboard-focus="true"], @@ -255,7 +255,7 @@ svg.animation-ui path[data-keyboard-focus="true"] { } .animation-tail-iterations { - opacity: 0.5; + opacity: 50%; } .animation-keyframe-step line { @@ -299,7 +299,7 @@ text.animation-timeline-grid-label { } .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 @@ text.animation-timeline-grid-label { 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 @@ text.animation-timeline-grid-label { 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 @@ text.animation-timeline-grid-label { } .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 @@ text.animation-timeline-grid-label { .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 @@ text.animation-timeline-grid-label { 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 5fbdc53c3b..fe3ae7302d 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 ec0a10afb6..e9e33ee5e6 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 ff2d5f2f50..48917ed3c3 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 1adac18829..eafb9270bc 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 @@ li .icon { } .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 c026d678f8..9c695eff4d 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 15b142da00..911659bbf0 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 @@ div.palette-preview { .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 @@ div.palette-preview { :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 @@ div.palette-preview { @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 ffd33e4e51..9b731f0fc1 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 a982150ec8..d776728880 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 9c4f82225f..10011e8627 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 474d281fd8..5fb1c118b7 100644 --- a/front_end/console/consoleSidebar.css +++ b/front_end/console/consoleSidebar.css @@ -32,12 +32,12 @@ li { } 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 5ca503a633..1db19b8454 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 b6b357a659..a3473fda87 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 5053f78661..5bd4cb2509 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 09a8396731..6d0d38350c 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 f7ac5d2ac0..e20ce72e87 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 f874583eb3..21a479f62d 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 5ac1799a85..864b2d94a9 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 e955af29e8..1c301777ac 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 d24ae31ce7..be80477e39 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 7f3703e5bc..c350d82401 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 e6ebbd50c5..17aa3544da 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 @@ select { margin-right: -2px; margin-bottom: -1px; padding-bottom: 1px; - opacity: 1 !important; + opacity: 100% !important; } .editing, @@ -215,7 +215,7 @@ select { } .elements-gutter-decoration.elements-has-decorated-children { - opacity: 0.5; + opacity: 50%; } .add-attribute { @@ -236,12 +236,12 @@ select { /* 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 @@ select { @-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 @@ select { .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.selected:not(.always-parent) + ol.children { } 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 ba4d8fdac2..0d71292c6b 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 6c606a0ffb..e59d3189a1 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 @@ ol.expanded { .implicit, .inherited { - opacity: 0.5; + opacity: 50%; } .has-ignorable-error { @@ -152,11 +152,11 @@ ol.expanded { } :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 @@ ol.expanded { .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 f0b2b1660e..9dfceb8080 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 59a2ff23f3..c0e90adc40 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 f20f5054b3..bdcdaeaf61 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 260a090a1a..8da6a2380a 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 b3ec12bd1d..9cb305921d 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 bb3ed69d04..24aa491899 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 @@ button.text-button { @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 ecf8f0572f..c58a58d5cd 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 34b92710fa..40d9220cbf 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 @@ img { 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 ee37ecac55..346a2089f4 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 @@ svg.bezier-preset-modify:hover, } .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 478a711f46..2405483032 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 7094a928cf..87bab5e611 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 3033facf21..860726e134 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 bc33865847..877877416e 100644 --- a/front_end/inspector_overlay/common.css +++ b/front_end/inspector_overlay/common.css @@ -16,7 +16,7 @@ body.platform-linux { } 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 495f83acc4..716709ea89 100644 --- a/front_end/issues/issuesTree.css +++ b/front_end/issues/issuesTree.css @@ -269,7 +269,7 @@ p { .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 80e06e8f1e..9b66de7d24 100644 --- a/front_end/layer_viewer/layerDetailsView.css +++ b/front_end/layer_viewer/layerDetailsView.css @@ -13,7 +13,7 @@ table td:first-child { } .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 75a01a0e20..f44bd19944 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 483247b783..f398b9ab68 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 { } 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 a78bfccc2b..8e265db415 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 92aa16a31a..ca510b56dd 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 e56f8643e5..1eb42d4c11 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 4846bcab5a..4d91333f9f 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 93bcaf2939..ae0d5c90db 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 41b8ec8bc1..ff9c9e9d51 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 e6c7986230..84cd26e3bd 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 b1447fea73..c199a40bba 100644 --- a/front_end/network/networkTimingTable.css +++ b/front_end/network/networkTimingTable.css @@ -54,7 +54,7 @@ table.network-timing-table > tr:not(.network-timing-table-header):not(.network-t .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 @@ table.network-timing-table > tr:not(.network-timing-table-header):not(.network-t .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 038136834e..7968fb63ec 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 298cbeacef..cb0e432b9f 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 7d6049c86f..bd4449d726 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 9e927653e8..5227d2ff6e 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 354dc4b88f..dd63e2e372 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 b96ec1da90..f0c9db8fa5 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 8c62d0524f..a177340a40 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 36974b5a46..1194d7cd21 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 9f2bec0c8b..9f4a33e60d 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 697d5912a8..2c256f2fd3 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 068ec690de..bd42467cbd 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 77523d099a..55a42601e4 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 c5834efdc8..54c4296175 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 fb5cc1ee6a..4591fad09b 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 58b2e91a37..8f8c33a843 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 05f87bee06..18bdce5028 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 03ff0abfe7..e7683335cf 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 d3d8dfed25..3adad11e4d 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 5e8ab7182d..7a651af1fd 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 e3b354c787..ff0c097108 100644 --- a/front_end/profiler/profilesSidebarTree.css +++ b/front_end/profiler/profilesSidebarTree.css @@ -38,8 +38,8 @@ ol.tree-outline { 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 cc416b67d2..25dd8254f5 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 269b70e928..bf0a453db0 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 9a344f76f3..503e784190 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 61ac4a7495..f90db56861 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 9efaff63ff..2f3028988c 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 ef7aa13771..8baa8d7bfb 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 { } 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 @@ li.storage-group-list-item::before { } .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 @@ li.storage-group-list-item::before { } .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 a774d0c772..7065da9dfe 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 835d066770..e220260cfc 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 ea04540af6..0ce5dd3d3e 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 2699ee7cc3..4b8e203bae 100644 --- a/front_end/search/searchResultsPane.css +++ b/front_end/search/searchResultsPane.css @@ -32,7 +32,7 @@ li.search-result { } 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::before { } 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 @@ li.search-match .highlighted-match { } :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 e09e59c2b6..42d29b6873 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 3cc850ecf2..b437f754f3 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 6cf949880a..338f9eb475 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 abbbcb28b5..273c9ea178 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 b9e2063f6b..4808fe59c3 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 fbf6f535f9..515c0c9dc3 100644 --- a/front_end/settings/keybindsSettingsTab.css +++ b/front_end/settings/keybindsSettingsTab.css @@ -24,7 +24,7 @@ h1 { 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 @@ h1 { } .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 f45ad09738..50ba534c53 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 @@ fieldset { } .settings-experiments-warning-subsection-warning { - color: rgb(200, 0, 0); + color: rgb(200 0 0); } .settings-experiments-warning-subsection-message { @@ -128,7 +128,7 @@ fieldset { .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 42ac4e9d9a..69156307b9 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 b7d1e47d71..29a525e6e6 100644 --- a/front_end/source_frame/xmlTree.css +++ b/front_end/source_frame/xmlTree.css @@ -24,30 +24,30 @@ ol.tree-outline { } .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 830c406c5c..940a58ef22 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 3d8abbd71f..bdbceef9cf 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 0369e540c6..ffa51d86ac 100644 --- a/front_end/sources/dialog.css +++ b/front_end/sources/dialog.css @@ -17,7 +17,7 @@ label { } 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 348fcbd0ab..d479ee0708 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 c0238d0511..865edda984 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 5eec9cfdbb..0cba20ff55 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 67886a5a61..fc705a7fcf 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 @@ li.watch-expression-editing::before { @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 3bd88e416a..9f5bc67284 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 @@ div.CodeMirror:focus-within span.CodeMirror-nonmatchingbracket { 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 @@ div.CodeMirror:focus-within span.CodeMirror-nonmatchingbracket { } .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 @@ div.CodeMirror:focus-within span.CodeMirror-nonmatchingbracket { .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 @@ div.CodeMirror:focus-within span.CodeMirror-nonmatchingbracket { 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 @@ div.CodeMirror:focus-within span.CodeMirror-nonmatchingbracket { .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 @@ div.CodeMirror:focus-within span.CodeMirror-nonmatchingbracket { } .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 @@ div.CodeMirror:focus-within span.CodeMirror-nonmatchingbracket { } .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 @@ div.CodeMirror:focus-within span.CodeMirror-nonmatchingbracket { } .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 @@ div.CodeMirror:focus-within span.CodeMirror-nonmatchingbracket { .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 744fbc3a9c..2e80084757 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 640fb1fced..391f996f46 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 f06fee0e1c..16d21bd925 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 0cacc27644..013054f676 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 20b45b312e..921404134d 100644 --- a/front_end/ui/checkboxTextLabel.css +++ b/front_end/ui/checkboxTextLabel.css @@ -30,9 +30,9 @@ input:focus { 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 7f632500fb..a0f6e8fb2c 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 ead95a368b..4ff7ace898 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 33350334ca..7d1c8b89cb 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 eb6a7b4145..c6ef6fd2ce 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 69792184dc..1c1c4dcf91 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 6dd409f882..7fb26e7df5 100644 --- a/front_end/ui/inspectorCommon.css +++ b/front_end/ui/inspectorCommon.css @@ -133,20 +133,20 @@ iframe.widget { .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 { } 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 @@ input::placeholder { 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 @@ input::placeholder { margin-right: -2px; margin-bottom: -1px; padding-bottom: 1px; - opacity: 1 !important; + opacity: 100% !important; } .editing, @@ -238,7 +238,7 @@ input::placeholder { .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 @@ input::placeholder { 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 @@ input::placeholder { .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 @@ input::placeholder { .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 @@ input::placeholder { :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 @@ span[is=dt-icon-label] { } [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 @@ span[is=dt-icon-label] { } .undisplayable-text { - color: rgb(128, 128, 128); + color: rgb(128 128 128); font-style: italic; } @@ -474,7 +474,7 @@ button.link { } 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 @@ button.link[data-keyboard-focus="true"]:focus { @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 17d752946b..f52cd90995 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 @@ body { } .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 e746a16a9c..b27a75d978 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 91a556ebec..8fdfbb5c03 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 124a44d7f6..1b22acb929 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 c8e3cc6a62..aa2cb9bf87 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 68b63cfeb9..f297612398 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 2cc31d8e6c..0323cc396c 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 e2f8622b74..21117f470d 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 801f4410fd..d4bf888370 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 3b7b6954e9..f778adcdfb 100644 --- a/front_end/ui/smallBubble.css +++ b/front_end/ui/smallBubble.css @@ -21,17 +21,17 @@ div { } 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 f9f11be44d..f85a92343a 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 c7e25f779b..8241e0a376 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 0fcbc58f00..0d68b2b561 100644 --- a/front_end/ui/softDropDownButton.css +++ b/front_end/ui/softDropDownButton.css @@ -13,7 +13,7 @@ button.soft-dropdown { } button.soft-dropdown[disabled] { - opacity: 0.5; + opacity: 50%; } button.soft-dropdown > .title { @@ -31,7 +31,7 @@ button.soft-dropdown[data-keyboard-focus="true"]:focus::before { 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[data-keyboard-focus="true"]:focus::before { } 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 de16dda7fc..9eee1d7f97 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 ce4051a338..0276b53d53 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 f9e2333933..2d0a62c9e0 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 4516c04642..5a8fce9bc2 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 { } select.toolbar-item:disabled + .toolbar-dropdown-arrow { - opacity: 0.5; + opacity: 50%; } /* Toolbar item */ @@ -116,7 +116,7 @@ select.toolbar-item:disabled + .toolbar-dropdown-arrow { .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 @@ select.toolbar-item:disabled + .toolbar-dropdown-arrow { /* Button */ .toolbar-button:disabled { - opacity: 0.5; + opacity: 50%; } .toolbar-button.dark-text .toolbar-text { @@ -180,12 +180,12 @@ select.toolbar-item:disabled + .toolbar-dropdown-arrow { .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 { } 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 @@ select.toolbar-item[data-keyboard-focus="true"]:focus > * { } .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 @@ select.toolbar-item[data-keyboard-focus="true"]:focus > * { } .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 @@ select.toolbar-item[data-keyboard-focus="true"]:focus > * { 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 @@ input[is=history-input]:not(:placeholder-shown) { } .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 @@ input[is=history-input]:not(:placeholder-shown) { } .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 29e85cb0b2..3ac0b71c8e 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 32e2ad8da0..a88c0cc1e2 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 4768d1ed2a..a84916c44c 100644 --- a/test/screenshots/interactive/interactive.css +++ b/test/screenshots/interactive/interactive.css @@ -28,7 +28,7 @@ header { 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 @@ header h2 .percentage { .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 @@ header h2 .percentage { 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 @@ main img, .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 { } footer button[disabled] { - opacity: 0.4; + opacity: 40%; } .status { @@ -191,7 +191,7 @@ footer button[disabled] { 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; }