[go: nahoru, domu]

Revert "Fix all issues found by StyleLint 14"

This reverts commit fb8852321babfc31f0efc91d890d612101c420b3.

Reason for revert: breaks the presubmit. Since the tree is closed,
a fix forward is not landing soon. Therefore, let's pre-emptively revert.

Original change's description:
> Fix all issues found by StyleLint 14
>
> These are mostly auto-fixed by Stylelint 14 with a couple of manual
> fixes (adding quotes around urls and fixing some shorthand properties).
>
> A follow-up CL will update us to Stylelint 14, at which point they will
> be enforced.
>
> R=​szuend@chromium.org
>
> Bug: none
> Change-Id: Ia813854accd1eb86eccea64a5fbf1f8534563964
> Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/3259540
> Auto-Submit: Tim van der Lippe <tvanderlippe@chromium.org>
> Commit-Queue: Simon Zünd <szuend@chromium.org>
> Reviewed-by: Simon Zünd <szuend@chromium.org>

Bug: none
Change-Id: I155ef7e0633cba15b47439a37a71158b6dcb8f91
No-Presubmit: true
No-Tree-Checks: true
No-Try: true
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/3259702
Auto-Submit: Tim van der Lippe <tvanderlippe@chromium.org>
Commit-Queue: Rubber Stamper <rubber-stamper@appspot.gserviceaccount.com>
Bot-Commit: Rubber Stamper <rubber-stamper@appspot.gserviceaccount.com>
diff --git a/.stylelintrc.json b/.stylelintrc.json
index e18433d..264ca06 100644
--- a/.stylelintrc.json
+++ b/.stylelintrc.json
@@ -12,6 +12,15 @@
     "declaration-no-important": true,
     "color-named": "never",
     "max-empty-lines": 1,
+    "property-no-vendor-prefix": [
+      true,
+      {
+        "ignoreProperties": [
+          "border-image",
+          "/^mask-/"
+        ]
+      }
+    ],
     "selector-type-no-unknown": [
       true,
       {
@@ -19,19 +28,6 @@
           "/^devtools-/"
         ]
       }
-    ],
-    "max-line-length": null,
-    "selector-class-pattern": null,
-    "keyframes-name-pattern": null,
-    "selector-no-vendor-prefix": null,
-    "property-no-vendor-prefix": null,
-    "value-no-vendor-prefix": null,
-    "media-feature-name-no-vendor-prefix": null
-  },
-  "overrides": [
-    {
-      "files": ["**/*.ts"],
-      "customSyntax": "html"
-    }
-  ]
+    ]
+  }
 }
diff --git a/PRESUBMIT.py b/PRESUBMIT.py
index 20de3da..4274694 100644
--- a/PRESUBMIT.py
+++ b/PRESUBMIT.py
@@ -348,6 +348,7 @@
                                  script_args))
 
     if not ts_should_bail_out:
+        script_args = ["--syntax", "html"]
         if len(ts_files_to_lint) < 50:
             script_args += ["--files"] + ts_files_to_lint
         else:
diff --git a/front_end/entrypoints/inspector_main/renderingOptions.css b/front_end/entrypoints/inspector_main/renderingOptions.css
index 5fcb97f..627d620 100644
--- a/front_end/entrypoints/inspector_main/renderingOptions.css
+++ b/front_end/entrypoints/inspector_main/renderingOptions.css
@@ -8,8 +8,8 @@
   padding: 12px;
 }
 
-[is="dt-checkbox"] {
-  margin: 0 0 10px;
+[is=dt-checkbox] {
+  margin: 0 0 10px 0;
   flex: none;
 }
 
diff --git a/front_end/entrypoints/node_main/nodeConnectionsPanel.css b/front_end/entrypoints/node_main/nodeConnectionsPanel.css
index b6a224f..ee673f6 100644
--- a/front_end/entrypoints/node_main/nodeConnectionsPanel.css
+++ b/front_end/entrypoints/node_main/nodeConnectionsPanel.css
@@ -13,7 +13,7 @@
   flex: none;
   max-width: 600px;
   max-height: 202px;
-  margin: 20px 0 5px;
+  margin: 20px 0 5px 0;
 }
 
 .network-discovery-list-empty {
@@ -25,7 +25,7 @@
 }
 
 .network-discovery-list-item {
-  padding: 3px 5px;
+  padding: 3px 5px 3px 5px;
   height: 30px;
   display: flex;
   align-items: center;
diff --git a/front_end/models/persistence/editFileSystemView.css b/front_end/models/persistence/editFileSystemView.css
index 2f82734..22c6dde 100644
--- a/front_end/models/persistence/editFileSystemView.css
+++ b/front_end/models/persistence/editFileSystemView.css
@@ -35,7 +35,7 @@
 }
 
 .file-system-list-item {
-  padding: 3px 5px;
+  padding: 3px 5px 3px 5px;
   height: 30px;
   display: flex;
   align-items: center;
diff --git a/front_end/models/persistence/workspaceSettingsTab.css b/front_end/models/persistence/workspaceSettingsTab.css
index c77a31f..99bdada 100644
--- a/front_end/models/persistence/workspaceSettingsTab.css
+++ b/front_end/models/persistence/workspaceSettingsTab.css
@@ -109,6 +109,6 @@
  * Always show an outline. Needed because we have a white background here.
  */
 
-.workspace-settings-tab .harmony-input[type="text"]:not(.error-input):not(:invalid) {
+.workspace-settings-tab .harmony-input[type=text]:not(.error-input):not(:invalid) {
   box-shadow: var(--legacy-focus-ring-inactive-shadow);
 }
diff --git a/front_end/panels/accessibility/accessibilityNode.css b/front_end/panels/accessibility/accessibilityNode.css
index 134b80e..b44e56a 100644
--- a/front_end/panels/accessibility/accessibilityNode.css
+++ b/front_end/panels/accessibility/accessibilityNode.css
@@ -34,7 +34,7 @@
   text-decoration: line-through;
 }
 
-.tree-outline span[is="dt-icon-label"] {
+.tree-outline span[is=dt-icon-label] {
   position: relative;
   left: -11px;
 }
@@ -60,7 +60,7 @@
   left: -2px;
 }
 
-.tree-outline span[is="dt-icon-label"] + .ax-name {
+.tree-outline span[is=dt-icon-label] + .ax-name {
   margin-left: -11px;
 }
 
diff --git a/front_end/panels/accessibility/axBreadcrumbs.css b/front_end/panels/accessibility/axBreadcrumbs.css
index c7de3e1..b3647d3 100644
--- a/front_end/panels/accessibility/axBreadcrumbs.css
+++ b/front_end/panels/accessibility/axBreadcrumbs.css
@@ -45,7 +45,7 @@
   -webkit-mask-size: 30px 10px;
   -webkit-mask-repeat: no-repeat;
   background-color: var(--color-syntax-7);
-  content: "";
+  content: '';
   text-shadow: none;
   margin-right: -2px;
   height: 12px;
diff --git a/front_end/panels/animation/animationTimeline.css b/front_end/panels/animation/animationTimeline.css
index 439e8b9..acb162f 100644
--- a/front_end/panels/animation/animationTimeline.css
+++ b/front_end/panels/animation/animationTimeline.css
@@ -112,7 +112,7 @@
 }
 
 .animation-timeline-header::after {
-  content: "";
+  content: '';
   height: calc(100% - 48px - 28px);
   position: absolute;
   width: 150px;
@@ -361,7 +361,7 @@
 
 .animation-paused::before,
 .animation-paused::after {
-  content: "";
+  content: '';
   background: var(--color-background);
   width: 7px;
   height: 20px;
diff --git a/front_end/panels/application/components/frameDetailsReportView.css b/front_end/panels/application/components/frameDetailsReportView.css
index de61bbf..12f480a 100644
--- a/front_end/panels/application/components/frameDetailsReportView.css
+++ b/front_end/panels/application/components/frameDetailsReportView.css
@@ -54,7 +54,7 @@
 }
 
 .inline-name::after {
-  content: ":\u00a0";
+  content: ':\u00a0';
 }
 
 .inline-items {
diff --git a/front_end/panels/application/resourcesPanel.css b/front_end/panels/application/resourcesPanel.css
index b340983..8e0da61 100644
--- a/front_end/panels/application/resourcesPanel.css
+++ b/front_end/panels/application/resourcesPanel.css
@@ -122,7 +122,7 @@
 
 .database-query-result {
   position: relative;
-  padding: 1px 22px;
+  padding: 1px 22px 1px 22px;
   min-height: 16px;
   margin-left: -22px;
   padding-right: 0;
diff --git a/front_end/panels/application/resourcesSidebar.css b/front_end/panels/application/resourcesSidebar.css
index df0fe06..73c69ce 100644
--- a/front_end/panels/application/resourcesSidebar.css
+++ b/front_end/panels/application/resourcesSidebar.css
@@ -18,7 +18,7 @@
 }
 
 li.storage-group-list-item {
-  padding: 10px 8px 6px;
+  padding: 10px 8px 6px 8px;
 }
 
 li.storage-group-list-item:not(:first-child) {
diff --git a/front_end/panels/browser_debugger/xhrBreakpointsSidebarPane.css b/front_end/panels/browser_debugger/xhrBreakpointsSidebarPane.css
index 0ef231b..5fbf26f 100644
--- a/front_end/panels/browser_debugger/xhrBreakpointsSidebarPane.css
+++ b/front_end/panels/browser_debugger/xhrBreakpointsSidebarPane.css
@@ -15,7 +15,10 @@
 
 .breakpoint-condition {
   display: block;
-  margin: 4px 8px 4px 23px;
+  margin-top: 4px;
+  margin-bottom: 4px;
+  margin-left: 23px;
+  margin-right: 8px;
 }
 
 .breakpoint-condition-input {
@@ -39,7 +42,7 @@
   background-color: var(--legacy-focus-bg-color);
 }
 
-.breakpoint-entry [is="dt-checkbox"] {
+.breakpoint-entry [is=dt-checkbox] {
   max-width: 100%;
 }
 
diff --git a/front_end/panels/changes/changesSidebar.css b/front_end/panels/changes/changesSidebar.css
index 6c0f228..d7ad3cc 100644
--- a/front_end/panels/changes/changesSidebar.css
+++ b/front_end/panels/changes/changesSidebar.css
@@ -23,7 +23,7 @@
 }
 
 li .icon {
-  margin: -3px -5px;
+  margin: -3px -5px -3px -5px;
   background: var(--color-background-elevation-2);
 }
 
diff --git a/front_end/panels/changes/changesView.css b/front_end/panels/changes/changesView.css
index 7798b0c..5e2fbd8 100644
--- a/front_end/panels/changes/changesView.css
+++ b/front_end/panels/changes/changesView.css
@@ -4,12 +4,12 @@
  * found in the LICENSE file.
  */
 
-[slot="insertion-point-main"] {
+[slot=insertion-point-main] {
   flex-direction: column;
   display: flex;
 }
 
-[slot="insertion-point-sidebar"] {
+[slot=insertion-point-sidebar] {
   overflow: auto;
 }
 
diff --git a/front_end/panels/console/consolePrompt.css b/front_end/panels/console/consolePrompt.css
index d3fab96..01aece0 100644
--- a/front_end/panels/console/consolePrompt.css
+++ b/front_end/panels/console/consolePrompt.css
@@ -5,7 +5,7 @@
  */
 
 #console-prompt .CodeMirror {
-  padding: 3px 0 1px;
+  padding: 3px 0 1px 0;
 }
 
 #console-prompt .CodeMirror-line {
diff --git a/front_end/panels/console/consoleSidebar.css b/front_end/panels/console/consoleSidebar.css
index 9f33afb..1a3423b 100644
--- a/front_end/panels/console/consoleSidebar.css
+++ b/front_end/panels/console/consoleSidebar.css
@@ -19,7 +19,7 @@
   margin: 0 8px;
 }
 
-[is="ui-icon"] {
+[is=ui-icon] {
   margin: 0 5px;
 }
 
@@ -48,7 +48,7 @@
 }
 
 @media (forced-colors: active) {
-  [is="ui-icon"].icon-mask {
+  [is=ui-icon].icon-mask {
     background-color: ButtonText;
   }
 
@@ -65,8 +65,8 @@
     color: HighlightText;
   }
 
-  .tree-outline li:hover [is="ui-icon"].icon-mask,
-  .tree-outline li.selected [is="ui-icon"].icon-mask,
+  .tree-outline li:hover [is=ui-icon].icon-mask,
+  .tree-outline li.selected [is=ui-icon].icon-mask,
   .tree-outline li.selected:focus .spritesheet-mediumicons:not(.icon-mask) {
     background-color: HighlightText !important; /* stylelint-disable-line declaration-no-important */
   }
diff --git a/front_end/panels/console/consoleView.css b/front_end/panels/console/consoleView.css
index 6e1067f..72c0593 100644
--- a/front_end/panels/console/consoleView.css
+++ b/front_end/panels/console/consoleView.css
@@ -462,7 +462,7 @@
 
 @media (forced-colors: active) {
   .console-message-expand-icon,
-  .console-warning-level [is="ui-icon"].icon-mask.expand-group-icon {
+  .console-warning-level [is=ui-icon].icon-mask.expand-group-icon {
     forced-color-adjust: none;
     background-color: ButtonText;
   }
@@ -493,7 +493,7 @@
     color: HighlightText;
   }
 
-  .console-message-wrapper:focus [is="ui-icon"].icon-mask {
+  .console-message-wrapper:focus [is=ui-icon].icon-mask {
     background-color: HighlightText;
   }
 
diff --git a/front_end/panels/css_overview/components/cssOverviewStartView.css b/front_end/panels/css_overview/components/cssOverviewStartView.css
index b8a598d..ae4b8ea 100644
--- a/front_end/panels/css_overview/components/cssOverviewStartView.css
+++ b/front_end/panels/css_overview/components/cssOverviewStartView.css
@@ -84,7 +84,7 @@
   font-size: 13px;
   line-height: 20px;
   letter-spacing: 0.01em;
-  margin: 9px 0 14px;
+  margin: 9px 0 14px 0;
 }
 
 .preview-icon {
diff --git a/front_end/panels/css_overview/cssOverviewCompletedView.css b/front_end/panels/css_overview/cssOverviewCompletedView.css
index fec7f08..e6f027d 100644
--- a/front_end/panels/css_overview/cssOverviewCompletedView.css
+++ b/front_end/panels/css_overview/cssOverviewCompletedView.css
@@ -28,7 +28,7 @@
 
 .overview-completed-view .colors ul li {
   display: inline-block;
-  margin: 0 0 16px;
+  margin: 0 0 16px 0;
   padding: 0 8px 0 0;
 }
 
@@ -111,7 +111,7 @@
   font-size: 15px;
   font-weight: normal;
   padding: 0;
-  margin: 0 0 20px;
+  margin: 0 0 20px 0;
   padding-left: calc(var(--overview-default-padding) + var(--overview-icon-padding));
   position: relative;
   height: 26px;
@@ -119,7 +119,7 @@
 }
 
 .results-section h1::before {
-  content: "";
+  content: '';
   display: block;
   position: absolute;
   left: var(--overview-default-padding);
@@ -264,14 +264,14 @@
 .overview-completed-view .font-info h2 {
   font-size: 14px;
   font-weight: bold;
-  margin: 0 0 1em;
+  margin: 0 0 1em 0;
 }
 
 .overview-completed-view .font-info h3 {
   font-size: 13px;
   font-weight: normal;
   font-style: italic;
-  margin: 0 0 0.5em;
+  margin: 0 0 0.5em 0;
 }
 
 .overview-completed-view .font-info {
@@ -300,7 +300,7 @@
   width: 30px;
 }
 
-.contrast-warning [is="ui-icon"] {
+.contrast-warning [is=ui-icon] {
   margin-left: 5px;
 }
 
@@ -318,11 +318,11 @@
   min-width: initial;
 }
 
-[is="ui-icon"].smallicon-checkmark-square {
+[is=ui-icon].smallicon-checkmark-square {
   background-color: var(--color-green);
 }
 
-[is="ui-icon"].smallicon-no {
+[is=ui-icon].smallicon-no {
   background-color: var(--color-red);
 }
 
diff --git a/front_end/panels/elements/classesPaneWidget.css b/front_end/panels/elements/classesPaneWidget.css
index 7c98ad9..84979df 100644
--- a/front_end/panels/elements/classesPaneWidget.css
+++ b/front_end/panels/elements/classesPaneWidget.css
@@ -16,7 +16,7 @@
   justify-content: flex-start;
 }
 
-.styles-element-classes-pane [is="dt-checkbox"] {
+.styles-element-classes-pane [is=dt-checkbox] {
   margin-right: 15px;
 }
 
diff --git a/front_end/panels/elements/components/adornerSettingsPane.css b/front_end/panels/elements/components/adornerSettingsPane.css
index eecf0a4..111f7ad 100644
--- a/front_end/panels/elements/components/adornerSettingsPane.css
+++ b/front_end/panels/elements/components/adornerSettingsPane.css
@@ -44,7 +44,7 @@
 
 .close::before,
 .close::after {
-  content: "";
+  content: '';
   display: inline-block;
   position: absolute;
   left: 0;
diff --git a/front_end/panels/elements/computedStyleWidgetTree.css b/front_end/panels/elements/computedStyleWidgetTree.css
index cd07e38..7b44178 100644
--- a/front_end/panels/elements/computedStyleWidgetTree.css
+++ b/front_end/panels/elements/computedStyleWidgetTree.css
@@ -32,7 +32,7 @@
 }
 
 .group-title > h1 {
-  margin: 1px 0 0;
+  margin: 1px 0 0 0;
   padding: 1em 0;
   width: 100%;
   cursor: pointer;
diff --git a/front_end/panels/elements/elementsPanel.css b/front_end/panels/elements/elementsPanel.css
index 72e3d60..44356b5 100644
--- a/front_end/panels/elements/elementsPanel.css
+++ b/front_end/panels/elements/elementsPanel.css
@@ -30,7 +30,7 @@
 #elements-content {
   flex: 1 1;
   overflow: auto;
-  padding: 2px 0 0;
+  padding: 2px 0 0 0;
 }
 
 .style-panes-wrapper {
diff --git a/front_end/panels/elements/elementsTreeOutline.css b/front_end/panels/elements/elementsTreeOutline.css
index b6926b9..d4d8dd3 100644
--- a/front_end/panels/elements/elementsTreeOutline.css
+++ b/front_end/panels/elements/elementsTreeOutline.css
@@ -67,7 +67,7 @@
   user-select: none;
   -webkit-mask-image: var(--image-file-treeoutlineTriangles);
   -webkit-mask-size: 32px 24px;
-  content: "\A0\A0";
+  content: '\A0\A0';
   color: transparent;
   text-shadow: none;
   margin-right: -3px;
diff --git a/front_end/panels/elements/layoutPane.css b/front_end/panels/elements/layoutPane.css
index f083281..7ddd5b3 100644
--- a/front_end/panels/elements/layoutPane.css
+++ b/front_end/panels/elements/layoutPane.css
@@ -160,7 +160,7 @@
 }
 /* We set dimensions for the invisible input to support quick highlight a11y feature
 that uses the dimensions to draw an outline around the element. */
-.color-picker-label input[type="color"] {
+.color-picker-label input[type=color] {
   width: 100%;
   height: 100%;
   position: absolute;
diff --git a/front_end/panels/elements/platformFontsWidget.css b/front_end/panels/elements/platformFontsWidget.css
index cb177f3..cff1a83 100644
--- a/front_end/panels/elements/platformFontsWidget.css
+++ b/front_end/panels/elements/platformFontsWidget.css
@@ -44,5 +44,5 @@
 }
 
 .font-stats-item .font-delimeter {
-  margin: 0 1ex;
+  margin: 0 1ex 0 1ex;
 }
diff --git a/front_end/panels/elements/stylesSectionTree.css b/front_end/panels/elements/stylesSectionTree.css
index c43fc1d..c462d17 100644
--- a/front_end/panels/elements/stylesSectionTree.css
+++ b/front_end/panels/elements/stylesSectionTree.css
@@ -137,7 +137,7 @@
 
 .tree-outline li.editing-sub-part {
   padding: 3px 6px 8px 18px;
-  margin: -1px -6px -8px;
+  margin: -1px -6px -8px -6px;
   text-overflow: clip;
 }
 
diff --git a/front_end/panels/issues/issuesTree.css b/front_end/panels/issues/issuesTree.css
index 97de971..8ed8c0c 100644
--- a/front_end/panels/issues/issuesTree.css
+++ b/front_end/panels/issues/issuesTree.css
@@ -51,7 +51,7 @@
 
 .issue-category.hidden-issues.parent.expanded,
 .issue-kind.parent.expanded {
-  border-width: 0 0 1px;
+  border-width: 0 0 1px 0;
   background-color: var(--color-background-elevation-1);
 }
 
@@ -131,7 +131,7 @@
 
 /* Show a colored border on the left side of opened issues. */
 .body::before {
-  content: "";
+  content: '';
   display: block;
   position: absolute;
   left: calc(var(--issue-indent) + 23px);
@@ -181,7 +181,7 @@
 }
 
 .separator::before {
-  content: "·";
+  content: '·';
   padding-left: 1ex;
   padding-right: 1ex;
 }
@@ -250,7 +250,7 @@
 }
 
 .affected-resources-label + .affected-resources {
-  padding: 3px 0 0;
+  padding: 3px 0 0 0;
   position: relative;
   user-select: text;
 }
@@ -382,7 +382,7 @@
 
 .affected-resources > .parent {
   margin-top: 0;
-  padding: 2px 5px 0;
+  padding: 2px 5px 0 5px;
 }
 
 .affected-resources > .parent.expanded {
diff --git a/front_end/panels/lighthouse/lighthouseStartView.css b/front_end/panels/lighthouse/lighthouseStartView.css
index 51ce965..fc1780d 100644
--- a/front_end/panels/lighthouse/lighthouseStartView.css
+++ b/front_end/panels/lighthouse/lighthouseStartView.css
@@ -52,7 +52,7 @@
 }
 
 .lighthouse-form-section-label {
-  margin: 7px 0;
+  margin: 7px 0 7px;
   font-weight: 500;
 }
 
@@ -129,6 +129,6 @@
 }
 
 .lighthouse-warning-text::before {
-  content: "⚠";
+  content: '⚠';
   margin-right: 10px;
 }
diff --git a/front_end/panels/media/playerListView.css b/front_end/panels/media/playerListView.css
index 2517b1c..f0a86aa 100644
--- a/front_end/panels/media/playerListView.css
+++ b/front_end/panels/media/playerListView.css
@@ -10,7 +10,7 @@
 }
 
 li.storage-group-list-item {
-  padding: 10px 8px 6px;
+  padding: 10px 8px 6px 8px;
 }
 
 li.storage-group-list-item:not(:first-child) {
diff --git a/front_end/panels/mobile_throttling/throttlingSettingsTab.css b/front_end/panels/mobile_throttling/throttlingSettingsTab.css
index f8b4d0e..d476073 100644
--- a/front_end/panels/mobile_throttling/throttlingSettingsTab.css
+++ b/front_end/panels/mobile_throttling/throttlingSettingsTab.css
@@ -30,7 +30,7 @@
 }
 
 .conditions-list-item {
-  padding: 3px 5px;
+  padding: 3px 5px 3px 5px;
   height: 30px;
   display: flex;
   align-items: center;
diff --git a/front_end/panels/network/blockedURLsPane.css b/front_end/panels/network/blockedURLsPane.css
index 1934837..d742b94 100644
--- a/front_end/panels/network/blockedURLsPane.css
+++ b/front_end/panels/network/blockedURLsPane.css
@@ -66,7 +66,7 @@
   flex: none;
   display: flex;
   flex-direction: row;
-  margin: 7px 5px 0;
+  margin: 7px 5px 0 5px;
   align-items: center;
 }
 
diff --git a/front_end/panels/network/networkConfigView.css b/front_end/panels/network/networkConfigView.css
index 9b8fd1d..d6789c9 100644
--- a/front_end/panels/network/networkConfigView.css
+++ b/front_end/panels/network/networkConfigView.css
@@ -72,7 +72,7 @@
   width: calc(100% - 20px);
 }
 
-.network-config-ua input[type="text"],
+.network-config-ua input[type=text],
 .network-config-ua .chrome-select {
   margin-top: 8px;
 }
diff --git a/front_end/panels/network/networkLogView.css b/front_end/panels/network/networkLogView.css
index 9439aa6..15e51ac 100644
--- a/front_end/panels/network/networkLogView.css
+++ b/front_end/panels/network/networkLogView.css
@@ -62,7 +62,7 @@
   border-bottom: 0;
 }
 
-.network-summary-bar span[is="dt-icon-label"] {
+.network-summary-bar span[is=dt-icon-label] {
   margin-right: 6px;
 }
 
@@ -243,7 +243,7 @@
   filter: brightness(0) invert(1);
 }
 
-.network-log-grid.data-grid:focus .data-grid-data-grid-node.selected [is="ui-icon"].icon-mask {
+.network-log-grid.data-grid:focus .data-grid-data-grid-node.selected [is=ui-icon].icon-mask {
   --network-grid-selected-color: #dadce0;
   --override-icon-mask-background-color: var(--network-grid-selected-color);
 }
@@ -446,7 +446,7 @@
     background-color: canvas;
   }
 
-  .network-waterfall-header:hover .sort-order-icon-container [is="ui-icon"].icon-mask {
+  .network-waterfall-header:hover .sort-order-icon-container [is=ui-icon].icon-mask {
     background-color: HighlightText;
   }
 }
diff --git a/front_end/panels/profiler/profileLauncherView.css b/front_end/panels/profiler/profileLauncherView.css
index 2520e7a..3ac6c76 100644
--- a/front_end/panels/profiler/profileLauncherView.css
+++ b/front_end/panels/profiler/profileLauncherView.css
@@ -16,10 +16,10 @@
 .profile-launcher-view-content h1 {
   font-size: 15px;
   font-weight: normal;
-  margin: 6px 0 10px;
+  margin: 6px 0 10px 0;
 }
 
-.profile-launcher-view-content [is="dt-radio"] {
+.profile-launcher-view-content [is=dt-radio] {
   font-size: 13px;
 }
 
@@ -29,7 +29,7 @@
   margin-left: 22px;
 }
 
-.profile-launcher-view-content p [is="dt-checkbox"] {
+.profile-launcher-view-content p [is=dt-checkbox] {
   display: flex;
 }
 
diff --git a/front_end/panels/security/mainView.css b/front_end/panels/security/mainView.css
index 8028eef..7defff9 100644
--- a/front_end/panels/security/mainView.css
+++ b/front_end/panels/security/mainView.css
@@ -35,7 +35,7 @@
   flex: none;
   width: 16px;
   height: 16px;
-  margin: 0;
+  margin: 0 0;
 }
 /* Separate the middle icon from the other two. */
 
@@ -65,7 +65,7 @@
 
 .triangle-pointer-container {
   margin: 8px 24px 0;
-  padding: 0;
+  padding: 0 0;
 }
 
 .triangle-pointer-wrapper {
diff --git a/front_end/panels/security/originView.css b/front_end/panels/security/originView.css
index 50565e4..9308f7f 100644
--- a/front_end/panels/security/originView.css
+++ b/front_end/panels/security/originView.css
@@ -5,7 +5,7 @@
  */
 
 .title-section {
-  padding: 16px 0 24px;
+  padding: 16px 0 24px 0;
   border-bottom: 1px solid var(--color-background-elevation-2);
 }
 
diff --git a/front_end/panels/sensors/sensors.css b/front_end/panels/sensors/sensors.css
index d4ca947..1611dac 100644
--- a/front_end/panels/sensors/sensors.css
+++ b/front_end/panels/sensors/sensors.css
@@ -185,7 +185,7 @@
 .orientation-left::after,
 .orientation-right::before,
 .orientation-right::after {
-  content: "";
+  content: '';
   width: 8px;
   height: 6px;
 }
@@ -242,7 +242,7 @@
 .orientation-top::after,
 .orientation-bottom::before,
 .orientation-bottom::after {
-  content: "";
+  content: '';
   width: 8px;
   height: 8px;
 }
diff --git a/front_end/panels/settings/emulation/components/userAgentClientHintsForm.css b/front_end/panels/settings/emulation/components/userAgentClientHintsForm.css
index 843a659..1a7e59c 100644
--- a/front_end/panels/settings/emulation/components/userAgentClientHintsForm.css
+++ b/front_end/panels/settings/emulation/components/userAgentClientHintsForm.css
@@ -127,7 +127,7 @@
     border: 1px solid;
   }
 
-  .tree-title[aria-disabled="true"] {
+  .tree-title[aria-disabled='true'] {
     color: GrayText;
   }
 }
diff --git a/front_end/panels/settings/emulation/devicesSettingsTab.css b/front_end/panels/settings/emulation/devicesSettingsTab.css
index 8a6fa38..102793b 100644
--- a/front_end/panels/settings/emulation/devicesSettingsTab.css
+++ b/front_end/panels/settings/emulation/devicesSettingsTab.css
@@ -29,7 +29,7 @@
 }
 
 .devices-list-item {
-  padding: 3px 5px;
+  padding: 3px 5px 3px 5px;
   height: 30px;
   display: flex;
   align-items: center;
@@ -104,7 +104,7 @@
 
 .devices-edit-fields input {
   flex: auto;
-  margin: 8px 5px 0;
+  margin: 8px 5px 0 5px;
 }
 
 li.devices-edit-client-hints-field {
@@ -114,7 +114,7 @@
 
 .devices-edit-client-hints-field input {
   flex: auto;
-  margin: 8px 5px 0;
+  margin: 8px 5px 0 5px;
 }
 
 .devices-edit-fields .device-edit-fixed {
@@ -122,5 +122,5 @@
 }
 
 .devices-edit-fields select {
-  margin: 8px 5px 0;
+  margin: 8px 5px 0 5px;
 }
diff --git a/front_end/panels/settings/frameworkIgnoreListSettingsTab.css b/front_end/panels/settings/frameworkIgnoreListSettingsTab.css
index 0e309f6..c735f91 100644
--- a/front_end/panels/settings/frameworkIgnoreListSettingsTab.css
+++ b/front_end/panels/settings/frameworkIgnoreListSettingsTab.css
@@ -47,7 +47,7 @@
 }
 
 .ignore-list-item {
-  padding: 3px 5px;
+  padding: 3px 5px 3px 5px;
   height: 30px;
   display: flex;
   align-items: center;
diff --git a/front_end/panels/settings/settingsScreen.css b/front_end/panels/settings/settingsScreen.css
index 0af75d0..49c9636 100644
--- a/front_end/panels/settings/settingsScreen.css
+++ b/front_end/panels/settings/settingsScreen.css
@@ -7,7 +7,7 @@
 .settings-window-main {
   color: var(--color-text-primary);
   background-color: var(--color-background);
-  padding: 11px 0 0;
+  padding: 11px 0 0 0;
 }
 
 .settings-content {
@@ -101,7 +101,7 @@
   color: inherit;
 }
 
-.settings-content input[type="checkbox"] {
+.settings-content input[type=checkbox] {
   margin: 1px 7px 1px 2px;
 }
 
diff --git a/front_end/panels/sources/callStackSidebarPane.css b/front_end/panels/sources/callStackSidebarPane.css
index 9da1c25..37b1fa6 100644
--- a/front_end/panels/sources/callStackSidebarPane.css
+++ b/front_end/panels/sources/callStackSidebarPane.css
@@ -87,7 +87,7 @@
 .call-frame-location {
   color: var(--color-text-secondary);
   margin-left: auto;
-  padding: 0 10px;
+  padding: 0 10px 0 10px;
 }
 
 .async-header::before {
diff --git a/front_end/panels/sources/dialog.css b/front_end/panels/sources/dialog.css
index 7f4a949..38a8e68 100644
--- a/front_end/panels/sources/dialog.css
+++ b/front_end/panels/sources/dialog.css
@@ -16,7 +16,7 @@
   white-space: nowrap;
 }
 
-input[type="text"].add-source-map {
+input[type=text].add-source-map {
   box-shadow: 0 0 0 1px var(--box-shadow-outline-color);
   font-size: inherit;
   margin: 0 8px 0 5px;
diff --git a/front_end/panels/sources/javaScriptBreakpointsSidebarPane.css b/front_end/panels/sources/javaScriptBreakpointsSidebarPane.css
index c10b567..e1cdcb5 100644
--- a/front_end/panels/sources/javaScriptBreakpointsSidebarPane.css
+++ b/front_end/panels/sources/javaScriptBreakpointsSidebarPane.css
@@ -5,7 +5,7 @@
  */
 
 .breakpoint-entry {
-  padding: 3px 8px;
+  padding: 3px 8px 3px 8px;
   min-height: 18px;
   line-height: 15px;
   border-top: 1px solid var(--color-details-hairline-light);
@@ -15,7 +15,7 @@
   background-color: var(--legacy-focus-bg-color);
 }
 
-.breakpoint-entry [is="dt-checkbox"] {
+.breakpoint-entry [is=dt-checkbox] {
   max-width: 100%;
   white-space: nowrap;
 }
diff --git a/front_end/panels/sources/navigatorTree.css b/front_end/panels/sources/navigatorTree.css
index 53eecb1..c3cd6e9 100644
--- a/front_end/panels/sources/navigatorTree.css
+++ b/front_end/panels/sources/navigatorTree.css
@@ -33,7 +33,7 @@
 
 .icon,
 .icon-badge {
-  margin: -3px -5px;
+  margin: -3px -5px -3px -5px;
 }
 
 .icon-stack {
@@ -41,7 +41,7 @@
   display: inline-flex;
 }
 
-.icon-stack > [is="ui-icon"]:not(:first-child) {
+.icon-stack > [is=ui-icon]:not(:first-child) {
   position: absolute;
   left: 0;
   top: 0;
@@ -124,7 +124,7 @@
 }
 
 @media (forced-colors: active) {
-  .tree-outline li .leading-icons [is="ui-icon"].icon-mask {
+  .tree-outline li .leading-icons [is=ui-icon].icon-mask {
     background: ButtonText;
   }
 
@@ -134,7 +134,7 @@
   }
 
   .tree-outline:not(.hide-selection-when-blurred) li.parent:hover:not(.selected)::before,
-  .tree-outline:not(.hide-selection-when-blurred) li:hover:not(.selected) [is="ui-icon"].icon-mask {
+  .tree-outline:not(.hide-selection-when-blurred) li:hover:not(.selected) [is=ui-icon].icon-mask {
     background-color: HighlightText;
   }
 
diff --git a/front_end/panels/sources/sourcesPanel.css b/front_end/panels/sources/sourcesPanel.css
index ffb01f7..50aa2a4 100644
--- a/front_end/panels/sources/sourcesPanel.css
+++ b/front_end/panels/sources/sourcesPanel.css
@@ -51,13 +51,13 @@
   margin-top: 0;
 }
 
-.scripts-debug-toolbar-drawer > [is="dt-checkbox"] {
+.scripts-debug-toolbar-drawer > [is=dt-checkbox] {
   display: none;
   padding-left: 3px;
   height: 28px;
 }
 
-.scripts-debug-toolbar-drawer.expanded > [is="dt-checkbox"] {
+.scripts-debug-toolbar-drawer.expanded > [is=dt-checkbox] {
   display: flex;
 }
 
diff --git a/front_end/panels/sources/threadsSidebarPane.css b/front_end/panels/sources/threadsSidebarPane.css
index 821b946..891d958 100644
--- a/front_end/panels/sources/threadsSidebarPane.css
+++ b/front_end/panels/sources/threadsSidebarPane.css
@@ -35,7 +35,7 @@
 .thread-item-paused-state {
   color: var(--color-text-disabled);
   margin-left: auto;
-  padding: 0 10px;
+  padding: 0 10px 0 10px;
 }
 
 .selected-thread-icon {
diff --git a/front_end/panels/timeline/components/WebVitalsTooltip.css b/front_end/panels/timeline/components/WebVitalsTooltip.css
index 281030b..0d78a25 100644
--- a/front_end/panels/timeline/components/WebVitalsTooltip.css
+++ b/front_end/panels/timeline/components/WebVitalsTooltip.css
@@ -59,7 +59,7 @@
 .bad {
   display: block;
   border: 1px solid transparent;
-  border-width: 0 6px 12px;
+  border-width: 0 6px 12px 6px;
   border-bottom-color: var(--lighthouse-red);
   width: 0;
 }
diff --git a/front_end/panels/timeline/historyToolbarButton.css b/front_end/panels/timeline/historyToolbarButton.css
index 9b8db25..4cabbb3 100644
--- a/front_end/panels/timeline/historyToolbarButton.css
+++ b/front_end/panels/timeline/historyToolbarButton.css
@@ -45,7 +45,7 @@
     opacity: 100%;
   }
 
-  .history-dropdown-button[disabled] [is="ui-icon"].icon-mask {
+  .history-dropdown-button[disabled] [is=ui-icon].icon-mask {
     background-color: GrayText;
   }
 }
diff --git a/front_end/panels/timeline/timelineStatusDialog.css b/front_end/panels/timeline/timelineStatusDialog.css
index 440d398..4e6cca6 100644
--- a/front_end/panels/timeline/timelineStatusDialog.css
+++ b/front_end/panels/timeline/timelineStatusDialog.css
@@ -7,7 +7,7 @@
 .timeline-status-dialog {
   display: flex;
   flex-direction: column;
-  padding: 16px 16px 12px;
+  padding: 16px 16px 12px 16px;
   align-self: center;
   background-color: var(--color-background);
   box-shadow: var(--drop-shadow);
diff --git a/front_end/panels/webauthn/webauthnPane.css b/front_end/panels/webauthn/webauthnPane.css
index d576e33..fc1004e 100644
--- a/front_end/panels/webauthn/webauthnPane.css
+++ b/front_end/panels/webauthn/webauthnPane.css
@@ -39,7 +39,7 @@
 
 .new-authenticator-container {
   display: none;
-  margin: 10px;
+  margin: 10px 10px;
 }
 
 .webauthn-pane.enabled .new-authenticator-container {
@@ -97,7 +97,7 @@
 }
 
 .authenticator-field-value {
-  padding: 5px 0;
+  padding: 5px 0 5px 0;
   display: inline-block;
   font-family: monospace;
 }
diff --git a/front_end/ui/components/adorners/adorner.css b/front_end/ui/components/adorners/adorner.css
index b6a8ff9..c6a88b1 100644
--- a/front_end/ui/components/adorners/adorner.css
+++ b/front_end/ui/components/adorners/adorner.css
@@ -33,7 +33,7 @@
   border-color: var(--override-adorner-focus-border-color, var(--color-primary));
 }
 
-:host([aria-pressed="true"]) slot {
+:host([aria-pressed=true]) slot {
   color: var(--override-adorner-active-text-color, var(--color-background));
   background-color: var(--override-adorner-active-background-color, var(--color-primary));
   border: 1px solid var(--override-adorner-active-background-color, var(--color-primary));
diff --git a/front_end/ui/components/expandable_list/expandableList.css b/front_end/ui/components/expandable_list/expandableList.css
index 7195ae9..24fff76 100644
--- a/front_end/ui/components/expandable_list/expandableList.css
+++ b/front_end/ui/components/expandable_list/expandableList.css
@@ -17,7 +17,7 @@
 
 .arrow-icon {
   display: inline-block;
-  -webkit-mask-image: url("Images/treeoutlineTriangles.svg");
+  -webkit-mask-image: url(Images/treeoutlineTriangles.svg);
   -webkit-mask-size: 32px 24px;
   -webkit-mask-position: 0 0;
   background-color: var(--color-text-primary);
diff --git a/front_end/ui/components/linear_memory_inspector/valueInterpreterDisplay.css b/front_end/ui/components/linear_memory_inspector/valueInterpreterDisplay.css
index a11ba1e..e32a534 100644
--- a/front_end/ui/components/linear_memory_inspector/valueInterpreterDisplay.css
+++ b/front_end/ui/components/linear_memory_inspector/valueInterpreterDisplay.css
@@ -17,7 +17,8 @@
   width: 100%;
   display: grid;
   grid-template-columns: auto auto 1fr;
-  gap: 4px 24px;
+  grid-column-gap: 24px;
+  grid-row-gap: 4px;
   min-height: 24px;
   overflow: hidden;
   padding: 2px 12px;
diff --git a/front_end/ui/components/linear_memory_inspector/valueInterpreterSettings.css b/front_end/ui/components/linear_memory_inspector/valueInterpreterSettings.css
index a67928b..90da5f5 100644
--- a/front_end/ui/components/linear_memory_inspector/valueInterpreterSettings.css
+++ b/front_end/ui/components/linear_memory_inspector/valueInterpreterSettings.css
@@ -13,7 +13,7 @@
 .settings {
   display: flex;
   flex-wrap: wrap;
-  margin: 0 12px 12px;
+  margin: 0 12px 12px 12px;
   column-gap: 45px;
   row-gap: 15px;
 }
diff --git a/front_end/ui/components/report_view/reportKey.css b/front_end/ui/components/report_view/reportKey.css
index 6c23a95..6151066 100644
--- a/front_end/ui/components/report_view/reportKey.css
+++ b/front_end/ui/components/report_view/reportKey.css
@@ -6,7 +6,7 @@
 
 :host {
   line-height: 28px;
-  margin: 0 0 8px;
+  margin: 0 0 8px 0;
 }
 
 .key {
diff --git a/front_end/ui/components/report_view/reportValue.css b/front_end/ui/components/report_view/reportValue.css
index 01e600f..fe46429 100644
--- a/front_end/ui/components/report_view/reportValue.css
+++ b/front_end/ui/components/report_view/reportValue.css
@@ -6,7 +6,7 @@
 
 :host {
   line-height: 28px;
-  margin: 0 0 8px;
+  margin: 0 0 8px 0;
   min-width: 150px;
 }
 
diff --git a/front_end/ui/legacy/checkboxTextLabel.css b/front_end/ui/legacy/checkboxTextLabel.css
index 481d520..283e5ac 100644
--- a/front_end/ui/legacy/checkboxTextLabel.css
+++ b/front_end/ui/legacy/checkboxTextLabel.css
@@ -44,7 +44,7 @@
 }
 
 input.dt-checkbox-themed::after {
-  content: "";
+  content: '';
   line-height: 10px;
   position: absolute;
   cursor: pointer;
diff --git a/front_end/ui/legacy/components/color_picker/spectrum.css b/front_end/ui/legacy/components/color_picker/spectrum.css
index 1cfade8..bf562a5 100644
--- a/front_end/ui/legacy/components/color_picker/spectrum.css
+++ b/front_end/ui/legacy/components/color_picker/spectrum.css
@@ -242,26 +242,26 @@
   user-select: text;
 }
 
-.contrast-details-value [is="ui-icon"] {
+.contrast-details-value [is=ui-icon] {
   display: none;
   margin-left: 5px;
   background-color: var(--color-text-primary);
 }
 
-.spectrum-contrast-details .toolbar-state-on [is="ui-icon"] {
+.spectrum-contrast-details .toolbar-state-on [is=ui-icon] {
   background-color: var(--color-text-secondary);
 }
 
-[is="ui-icon"].smallicon-no {
+[is=ui-icon].smallicon-no {
   background-color: var(--color-accent-red);
 }
 
-.contrast-pass-fail span[is="ui-icon"] {
+.contrast-pass-fail span[is=ui-icon] {
   margin-left: 5px;
 }
 
-[is="ui-icon"].smallicon-checkmark-square,
-[is="ui-icon"].smallicon-checkmark-behind {
+[is=ui-icon].smallicon-checkmark-square,
+[is=ui-icon].smallicon-checkmark-behind {
   background-color: var(--color-accent-green);
 }
 
@@ -328,7 +328,7 @@
   background-color: var(--color-background-inverted-opacity-50);
 }
 
-[is="ui-icon"].icon-mask.copy-color-icon {
+[is=ui-icon].icon-mask.copy-color-icon {
   background-color: var(--color-background);
 }
 
@@ -461,7 +461,7 @@
 }
 
 .palette-color-shades > .spectrum-palette-color {
-  margin: 8px 0 0;
+  margin: 8px 0 0 0;
   margin-left: 8px;
   width: 12px;
 }
@@ -644,7 +644,7 @@
   padding-bottom: 2px;
 }
 
-.swatch.contrast [is="ui-icon"] {
+.swatch.contrast [is=ui-icon] {
   margin: -2px;
 }
 
diff --git a/front_end/ui/legacy/components/data_grid/dataGrid.css b/front_end/ui/legacy/components/data_grid/dataGrid.css
index cd9d427..6089ae9 100644
--- a/front_end/ui/legacy/components/data_grid/dataGrid.css
+++ b/front_end/ui/legacy/components/data_grid/dataGrid.css
@@ -292,7 +292,7 @@
 }
 
 @media (forced-colors: active) {
-  .sort-order-icon-container [is="ui-icon"].icon-mask,
+  .sort-order-icon-container [is=ui-icon].icon-mask,
   .data-grid td.disclosure::before {
     forced-color-adjust: none;
     background-color: ButtonText;
@@ -303,7 +303,7 @@
   }
 
   .data-grid th.sortable:hover *,
-  .data-grid th.sortable:hover .sort-order-icon-container [is="ui-icon"].icon-mask,
+  .data-grid th.sortable:hover .sort-order-icon-container [is=ui-icon].icon-mask,
   .data-grid tr.parent.selected td.disclosure::before,
   .data-grid:focus tr.parent.selected td.disclosure::before,
   .data-grid table.data tr.parent.revealed:hover td.disclosure::before {
diff --git a/front_end/ui/legacy/components/inline_editor/cssAngleEditor.css b/front_end/ui/legacy/components/inline_editor/cssAngleEditor.css
index 7abd9fa..10736ec 100644
--- a/front_end/ui/legacy/components/inline_editor/cssAngleEditor.css
+++ b/front_end/ui/legacy/components/inline_editor/cssAngleEditor.css
@@ -5,7 +5,7 @@
  */
 
 .editor.interacting::before {
-  content: "";
+  content: '';
   position: fixed;
   inset: 0;
 }
@@ -42,7 +42,7 @@
   width: 0;
   height: 0;
   border-style: solid;
-  border-width: 0 0.9em 0.9em;
+  border-width: 0 0.9em 0.9em 0.9em;
   border-color: transparent transparent var(--color-background-elevation-1) transparent;
 }
 
@@ -76,7 +76,7 @@
 }
 
 .hand::before {
-  content: "";
+  content: '';
   display: inline-block;
   position: absolute;
   top: -0.6em;
diff --git a/front_end/ui/legacy/components/inline_editor/cssLength.css b/front_end/ui/legacy/components/inline_editor/cssLength.css
index 430de87..b8172eb 100644
--- a/front_end/ui/legacy/components/inline_editor/cssLength.css
+++ b/front_end/ui/legacy/components/inline_editor/cssLength.css
@@ -33,7 +33,7 @@
   -webkit-mask-size: 19px 6px;
   -webkit-mask-repeat: no-repeat;
   background-color: var(--color-text-primary);
-  content: "";
+  content: '';
   height: 1em;
   width: 1em;
 }
diff --git a/front_end/ui/legacy/components/inline_editor/cssShadowEditor.css b/front_end/ui/legacy/components/inline_editor/cssShadowEditor.css
index 65c6aab..55ce15c 100644
--- a/front_end/ui/legacy/components/inline_editor/cssShadowEditor.css
+++ b/front_end/ui/legacy/components/inline_editor/cssShadowEditor.css
@@ -6,7 +6,7 @@
 
 :host {
   user-select: none;
-  padding: 4px 12px 12px;
+  padding: 4px 12px 12px 12px;
   border: 1px solid transparent;
 }
 
diff --git a/front_end/ui/legacy/components/inline_editor/fontEditor.css b/front_end/ui/legacy/components/inline_editor/fontEditor.css
index 3a30a11..e25da96 100644
--- a/front_end/ui/legacy/components/inline_editor/fontEditor.css
+++ b/front_end/ui/legacy/components/inline_editor/fontEditor.css
@@ -6,7 +6,7 @@
 
 :host {
   user-select: none;
-  padding: 4px 12px 12px;
+  padding: 4px 12px 12px 12px;
 }
 
 .error-input {
diff --git a/front_end/ui/legacy/components/object_ui/objectPropertiesSection.css b/front_end/ui/legacy/components/object_ui/objectPropertiesSection.css
index a99653b..44d833a 100644
--- a/front_end/ui/legacy/components/object_ui/objectPropertiesSection.css
+++ b/front_end/ui/legacy/components/object_ui/objectPropertiesSection.css
@@ -9,7 +9,7 @@
 }
 
 .object-properties-section {
-  padding: 0;
+  padding: 0 0 0 0;
   color: var(--color-text-primary);
   display: flex;
   flex-direction: column;
@@ -25,7 +25,7 @@
 
 .object-properties-section li.editing-sub-part {
   padding: 3px 12px 8px 6px;
-  margin: -1px -6px -8px;
+  margin: -1px -6px -8px -6px;
   text-overflow: clip;
 }
 
diff --git a/front_end/ui/legacy/components/quick_open/filteredListWidget.css b/front_end/ui/legacy/components/quick_open/filteredListWidget.css
index 5d5d052..7781e1d 100644
--- a/front_end/ui/legacy/components/quick_open/filteredListWidget.css
+++ b/front_end/ui/legacy/components/quick_open/filteredListWidget.css
@@ -30,7 +30,7 @@
 devtools-text-prompt {
   flex: 0 0 40px;
   font-size: 14px;
-  font-family: ".SFNSDisplay-Regular", "Helvetica Neue", "Lucida Grande", sans-serif;
+  font-family: '.SFNSDisplay-Regular', 'Helvetica Neue', 'Lucida Grande', sans-serif;
   line-height: 16px;
   padding: 12px;
 }
@@ -80,7 +80,7 @@
   color: var(--color-text-primary);
   display: flex;
   border-bottom: 1px solid var(--color-details-hairline-light);
-  font-family: ".SFNSDisplay-Regular", "Helvetica Neue", "Lucida Grande", sans-serif;
+  font-family: '.SFNSDisplay-Regular', 'Helvetica Neue', 'Lucida Grande', sans-serif;
   padding-left: 8px;
   padding-right: 8px;
 }
diff --git a/front_end/ui/legacy/components/source_frame/imageView.css b/front_end/ui/legacy/components/source_frame/imageView.css
index 76751c1..c3952a7 100644
--- a/front_end/ui/legacy/components/source_frame/imageView.css
+++ b/front_end/ui/legacy/components/source_frame/imageView.css
@@ -9,7 +9,7 @@
 }
 
 .image-view > .image {
-  padding: 20px 20px 10px;
+  padding: 20px 20px 10px 20px;
   text-align: center;
 }
 
diff --git a/front_end/ui/legacy/components/text_editor/cmdevtools.css b/front_end/ui/legacy/components/text_editor/cmdevtools.css
index 917ba06..fbad6ec 100644
--- a/front_end/ui/legacy/components/text_editor/cmdevtools.css
+++ b/front_end/ui/legacy/components/text_editor/cmdevtools.css
@@ -650,8 +650,12 @@
 
 .cm-search-highlight::before {
   position: absolute;
-  border-top: 1px solid var(--override-search-highlight-border-color);
-  border-bottom: 1px solid var(--override-search-highlight-border-color);
+  border-top-style: solid;
+  border-bottom-style: solid;
+  border-top-color: var(--override-search-highlight-border-color);
+  border-bottom-color: var(--override-search-highlight-border-color);
+  border-top-width: 1px;
+  border-bottom-width: 1px;
   top: -1px;
   bottom: 0;
   left: 0;
@@ -665,15 +669,19 @@
 }
 
 .cm-search-highlight-start::before {
-  border-left: 1px solid var(--override-search-highlight-border-color);
+  border-left-width: 1px;
   border-top-left-radius: 2px;
   border-bottom-left-radius: 2px;
+  border-left-style: solid;
+  border-left-color: var(--override-search-highlight-border-color);
 }
 
 .cm-search-highlight-end::before {
-  border-right: 1px solid var(--override-search-highlight-border-color);
+  border-right-width: 1px;
   border-top-right-radius: 2px;
   border-bottom-right-radius: 2px;
+  border-right-style: solid;
+  border-right-color: var(--override-search-highlight-border-color);
 }
 
 .cm-line-with-selection .cm-column-with-selection.cm-search-highlight-full::before {
@@ -693,7 +701,7 @@
 .cm-line-with-selection .cm-column-with-selection.cm-search-highlight::before {
   --override-auto-gen-cmlinewithselectioncmcolumnwithselectioncmsearchhighlightbefore-backgroundcolor: rgb(241 234 0);
 
-  margin: -1px;
+  margin: -1px -1px -1px -1px;
   background-color: var(--override-auto-gen-cmlinewithselectioncmcolumnwithselectioncmsearchhighlightbefore-backgroundcolor);
   z-index: -1;
 }
@@ -925,7 +933,7 @@
 }
 
 .CodeMirror-foldmarker::before {
-  content: "\2026";
+  content: '\2026';
   font-size: 13px;
   color: var(--color-text-secondary);
 }
diff --git a/front_end/ui/legacy/emptyWidget.css b/front_end/ui/legacy/emptyWidget.css
index 30e5b5b..e831284 100644
--- a/front_end/ui/legacy/emptyWidget.css
+++ b/front_end/ui/legacy/emptyWidget.css
@@ -7,7 +7,7 @@
 .empty-bold-text {
   display: block;
   font-size: 1.5em;
-  margin: 0.83em 0;
+  margin: 0.83em 0 0.83em;
   font-weight: bold;
 }
 
diff --git a/front_end/ui/legacy/filter.css b/front_end/ui/legacy/filter.css
index b12e5c8..992026e 100644
--- a/front_end/ui/legacy/filter.css
+++ b/front_end/ui/legacy/filter.css
@@ -100,7 +100,7 @@
   position: relative;
 }
 
-.filter-checkbox-filter > [is="dt-checkbox"] {
+.filter-checkbox-filter > [is=dt-checkbox] {
   display: flex;
   margin: auto 0;
 }
diff --git a/front_end/ui/legacy/infobar.css b/front_end/ui/legacy/infobar.css
index a8cff54..bf3671b 100644
--- a/front_end/ui/legacy/infobar.css
+++ b/front_end/ui/legacy/infobar.css
@@ -11,7 +11,7 @@
   border-bottom: 1px solid var(--color-details-hairline);
   flex-direction: column;
   position: relative;
-  padding: 1px 6px;
+  padding: 1px 6px 1px;
 }
 
 .infobar:focus {
@@ -55,7 +55,7 @@
 }
 
 .infobar-details-rows {
-  padding: 5px 5px 0;
+  padding: 5px 5px 0 5px;
 }
 
 .infobar-details-row {
diff --git a/front_end/ui/legacy/inspectorCommon.css b/front_end/ui/legacy/inspectorCommon.css
index 4271cdc..cf16765b 100644
--- a/front_end/ui/legacy/inspectorCommon.css
+++ b/front_end/ui/legacy/inspectorCommon.css
@@ -85,7 +85,7 @@
   overflow: hidden;
   margin: 0;
   cursor: default;
-  font-family: ".SFNSDisplay-Regular", "Helvetica Neue", "Lucida Grande", sans-serif;
+  font-family: '.SFNSDisplay-Regular', 'Helvetica Neue', 'Lucida Grande', sans-serif;
   font-size: 12px;
   tab-size: 4;
   user-select: none;
@@ -99,7 +99,7 @@
 }
 
 .platform-mac {
-  font-family: ".SFNSDisplay-Regular", "Helvetica Neue", "Lucida Grande", sans-serif;
+  font-family: '.SFNSDisplay-Regular', 'Helvetica Neue', 'Lucida Grande', sans-serif;
 }
 
 .platform-mac,
@@ -110,7 +110,7 @@
 }
 
 .platform-windows {
-  font-family: "Segoe UI", Tahoma, sans-serif;
+  font-family: 'Segoe UI', Tahoma, sans-serif;
 }
 
 :focus {
@@ -292,8 +292,8 @@
 }
 
 .harmony-input:not([type]),
-.harmony-input[type="number"],
-.harmony-input[type="text"] {
+.harmony-input[type=number],
+.harmony-input[type=text] {
   padding: 3px 6px;
   height: 24px;
   border: none;
@@ -301,23 +301,23 @@
 }
 
 .harmony-input:not([type]).error-input,
-.harmony-input[type="number"].error-input,
-.harmony-input[type="text"].error-input,
+.harmony-input[type=number].error-input,
+.harmony-input[type=text].error-input,
 .harmony-input:not([type]):invalid,
-.harmony-input[type="number"]:invalid,
-.harmony-input[type="text"]:invalid {
+.harmony-input[type=number]:invalid,
+.harmony-input[type=text]:invalid {
   box-shadow: 0 0 0 1px var(--color-red);
 }
 
 .harmony-input:not([type]):not(.error-input):not(:invalid):hover,
-.harmony-input[type="number"]:not(.error-input):not(:invalid):hover,
-.harmony-input[type="text"]:not(.error-input):not(:invalid):hover {
+.harmony-input[type=number]:not(.error-input):not(:invalid):hover,
+.harmony-input[type=text]:not(.error-input):not(:invalid):hover {
   box-shadow: var(--legacy-focus-ring-inactive-shadow);
 }
 
 .harmony-input:not([type]):not(.error-input):not(:invalid):focus,
-.harmony-input[type="number"]:not(.error-input):not(:invalid):focus,
-.harmony-input[type="text"]:not(.error-input):not(:invalid):focus {
+.harmony-input[type=number]:not(.error-input):not(:invalid):focus,
+.harmony-input[type=text]:not(.error-input):not(:invalid):focus {
   box-shadow: var(--legacy-focus-ring-active-shadow);
 }
 
@@ -426,7 +426,7 @@
 /* This class is used outside of the settings screen in the "Renderer" and
    "Sensors" panel. As such we need to override their style globally */
 .settings-select {
-  margin: 0;
+  margin: 0 0;
 }
 
 .chrome-select optgroup,
@@ -443,7 +443,7 @@
   white-space: nowrap;
 }
 
-span[is="dt-icon-label"] {
+span[is=dt-icon-label] {
   flex: none;
 }
 
@@ -469,29 +469,29 @@
   z-index: 500;
 }
 
-[is="ui-icon"] {
+[is=ui-icon] {
   display: inline-block;
   flex-shrink: 0;
 }
 
-.-theme-with-dark-background [is="ui-icon"].icon-invert,
-:host-context(.-theme-with-dark-background) [is="ui-icon"].icon-invert {
+.-theme-with-dark-background [is=ui-icon].icon-invert,
+:host-context(.-theme-with-dark-background) [is=ui-icon].icon-invert {
   filter: invert(80%) hue-rotate(180deg);
 }
 
-[is="ui-icon"].icon-mask {
+[is=ui-icon].icon-mask {
   --override-icon-mask-background-color: rgb(110 110 110);
 
   background-color: var(--override-icon-mask-background-color);
   -webkit-mask-position: var(--spritesheet-position);
 }
 
-.-theme-with-dark-background [is="ui-icon"].icon-mask,
-:host-context(.-theme-with-dark-background) [is="ui-icon"].icon-mask {
+.-theme-with-dark-background [is=ui-icon].icon-mask,
+:host-context(.-theme-with-dark-background) [is=ui-icon].icon-mask {
   --override-icon-mask-background-color: rgb(145 145 145);
 }
 
-[is="ui-icon"]:not(.icon-mask) {
+[is=ui-icon]:not(.icon-mask) {
   background-position: var(--spritesheet-position);
 }
 
@@ -523,27 +523,27 @@
   background-image: var(--image-file-popoverArrows);
 }
 
-.force-white-icons [is="ui-icon"].spritesheet-smallicons,
-:host-context(.force-white-icons) [is="ui-icon"].spritesheet-smallicons,
-[is="ui-icon"].force-white-icons.spritesheet-smallicons,
+.force-white-icons [is=ui-icon].spritesheet-smallicons,
+:host-context(.force-white-icons) [is=ui-icon].spritesheet-smallicons,
+[is=ui-icon].force-white-icons.spritesheet-smallicons,
 .-theme-preserve {
   -webkit-mask-image: var(--image-file-smallIcons);
   -webkit-mask-position: var(--spritesheet-position);
   background: var(--override-force-white-icons-background) !important; /* stylelint-disable-line declaration-no-important */
 }
 
-.force-white-icons [is="ui-icon"].spritesheet-largeicons,
-:host-context(.force-white-icons) [is="ui-icon"].spritesheet-largeicons,
-[is="ui-icon"].force-white-icons.spritesheet-largeicons,
+.force-white-icons [is=ui-icon].spritesheet-largeicons,
+:host-context(.force-white-icons) [is=ui-icon].spritesheet-largeicons,
+[is=ui-icon].force-white-icons.spritesheet-largeicons,
 .-theme-preserve {
   -webkit-mask-image: var(--image-file-largeIcons);
   -webkit-mask-position: var(--spritesheet-position);
   background: var(--override-force-white-icons-background) !important; /* stylelint-disable-line declaration-no-important */
 }
 
-.force-white-icons [is="ui-icon"].spritesheet-mediumicons,
-:host-context(.force-white-icons) [is="ui-icon"].spritesheet-mediumicons,
-[is="ui-icon"].force-white-icons.spritesheet-mediumicons,
+.force-white-icons [is=ui-icon].spritesheet-mediumicons,
+:host-context(.force-white-icons) [is=ui-icon].spritesheet-mediumicons,
+[is=ui-icon].force-white-icons.spritesheet-mediumicons,
 .-theme-preserve {
   -webkit-mask-image: var(--image-file-mediumIcons);
   -webkit-mask-position: var(--spritesheet-position);
@@ -635,30 +635,30 @@
     opacity: 100%;
   }
 
-  [is="ui-icon"].icon-mask,
-  .force-white-icons [is="ui-icon"].spritesheet-smallicons,
-  :host-context(.force-white-icons) [is="ui-icon"].spritesheet-smallicons,
-  [is="ui-icon"].force-white-icons.spritesheet-smallicons,
-  .force-white-icons [is="ui-icon"].spritesheet-largeicons,
-  :host-context(.force-white-icons) [is="ui-icon"].spritesheet-largeicons,
-  [is="ui-icon"].force-white-icons.spritesheet-largeicons,
-  .force-white-icons [is="ui-icon"].spritesheet-mediumicons,
-  :host-context(.force-white-icons) [is="ui-icon"].spritesheet-mediumicons,
-  [is="ui-icon"].force-white-icons.spritesheet-mediumicons,
+  [is=ui-icon].icon-mask,
+  .force-white-icons [is=ui-icon].spritesheet-smallicons,
+  :host-context(.force-white-icons) [is=ui-icon].spritesheet-smallicons,
+  [is=ui-icon].force-white-icons.spritesheet-smallicons,
+  .force-white-icons [is=ui-icon].spritesheet-largeicons,
+  :host-context(.force-white-icons) [is=ui-icon].spritesheet-largeicons,
+  [is=ui-icon].force-white-icons.spritesheet-largeicons,
+  .force-white-icons [is=ui-icon].spritesheet-mediumicons,
+  :host-context(.force-white-icons) [is=ui-icon].spritesheet-mediumicons,
+  [is=ui-icon].force-white-icons.spritesheet-mediumicons,
   .-theme-preserve {
     forced-color-adjust: none;
     background-color: ButtonText;
   }
 
   .harmony-input:not([type]),
-  .harmony-input[type="number"],
-  .harmony-input[type="text"] {
+  .harmony-input[type=number],
+  .harmony-input[type=text] {
     border: 1px solid ButtonText;
   }
 
   .harmony-input:not([type]):focus,
-  .harmony-input[type="number"]:focus,
-  .harmony-input[type="text"]:focus {
+  .harmony-input[type=number]:focus,
+  .harmony-input[type=text]:focus {
     border: 1px solid Highlight;
   }
 }
diff --git a/front_end/ui/legacy/inspectorSyntaxHighlight.css b/front_end/ui/legacy/inspectorSyntaxHighlight.css
index 22fd5de..31a33fd 100644
--- a/front_end/ui/legacy/inspectorSyntaxHighlight.css
+++ b/front_end/ui/legacy/inspectorSyntaxHighlight.css
@@ -209,15 +209,15 @@
   color: var(--color-link);
 }
 
-.devtools-link [is="ui-icon"] {
+.devtools-link [is=ui-icon] {
   vertical-align: middle;
 }
 
-.devtools-link [is="ui-icon"].icon-mask {
+.devtools-link [is=ui-icon].icon-mask {
   background-color: var(--color-link);
 }
 
-:focus .selected .devtools-link [is="ui-icon"].icon-mask {
+:focus .selected .devtools-link [is=ui-icon].icon-mask {
   background-color: var(--legacy-item-selection-bg-color);
 }
 
diff --git a/front_end/ui/legacy/inspectorViewTabbedPane.css b/front_end/ui/legacy/inspectorViewTabbedPane.css
index 1d7f8f4..de5400d 100644
--- a/front_end/ui/legacy/inspectorViewTabbedPane.css
+++ b/front_end/ui/legacy/inspectorViewTabbedPane.css
@@ -14,7 +14,7 @@
 }
 
 .tabbed-pane-header-tab.selected {
-  border-width: 0 2px;
+  border-width: 0 2px 0 2px;
 }
 
 .tabbed-pane-header-contents {
diff --git a/front_end/ui/legacy/searchableView.css b/front_end/ui/legacy/searchableView.css
index db00cf4..41cdbf5 100644
--- a/front_end/ui/legacy/searchableView.css
+++ b/front_end/ui/legacy/searchableView.css
@@ -35,7 +35,7 @@
 }
 
 .toolbar-search > div {
-  margin: 2px;
+  margin: 2px 2px;
   flex-shrink: 0;
 }
 
diff --git a/front_end/ui/legacy/softContextMenu.css b/front_end/ui/legacy/softContextMenu.css
index 0617167..edfbaf3 100644
--- a/front_end/ui/legacy/softContextMenu.css
+++ b/front_end/ui/legacy/softContextMenu.css
@@ -11,7 +11,7 @@
   overflow-y: auto;
   min-width: 160px !important; /* stylelint-disable-line declaration-no-important */
   /* NOTE: Keep padding in sync with padding adjustment in SoftContextMenu.js */
-  padding: 4px 0;
+  padding: 4px 0 4px 0;
   border: 1px solid var(--color-details-hairline);
   background-color: var(--color-background);
   box-shadow: var(--drop-shadow);
diff --git a/front_end/ui/legacy/textPrompt.css b/front_end/ui/legacy/textPrompt.css
index 0c74dc6..acfeeba 100644
--- a/front_end/ui/legacy/textPrompt.css
+++ b/front_end/ui/legacy/textPrompt.css
@@ -47,7 +47,7 @@
 }
 
 .text-prompt:not([data-placeholder]):empty::after {
-  content: "\00A0";
+  content: '\00A0';
   width: 0;
   display: block;
 }
diff --git a/front_end/ui/legacy/toolbar.css b/front_end/ui/legacy/toolbar.css
index c8dcfaa..d6c925f 100644
--- a/front_end/ui/legacy/toolbar.css
+++ b/front_end/ui/legacy/toolbar.css
@@ -307,7 +307,7 @@
 .toolbar-input {
   width: 120px;
   height: 19px;
-  padding: 4px 3px 3px;
+  padding: 4px 3px 3px 3px;
   margin: 1px 3px;
   background-color: var(--color-background);
   border: 1px solid transparent;
@@ -389,18 +389,18 @@
   left: -2px;
 }
 
-input[is="history-input"] {
+input[is=history-input] {
   border: 1px solid transparent;
   line-height: 16px;
   padding: 1px;
 }
 
-input[is="history-input"]:hover {
+input[is=history-input]:hover {
   box-shadow: var(--legacy-focus-ring-inactive-shadow);
 }
 
-input[is="history-input"]:focus,
-input[is="history-input"]:not(:placeholder-shown) {
+input[is=history-input]:focus,
+input[is=history-input]:not(:placeholder-shown) {
   box-shadow: var(--legacy-focus-ring-active-shadow);
 }
 
@@ -470,7 +470,7 @@
     color: HighlightText;
   }
 
-  .toolbar-button:disabled [is="ui-icon"].icon-mask {
+  .toolbar-button:disabled [is=ui-icon].icon-mask {
     background-color: GrayText;
     color: GrayText;
   }
@@ -505,8 +505,8 @@
   :not(.toolbar-render-as-links) .toolbar-button:enabled:hover .toolbar-glyph,
   :not(.toolbar-render-as-links) .toolbar-button:enabled:focus .toolbar-glyph,
   :not(.toolbar-render-as-links) .toolbar-button:enabled:hover:not(:active) .toolbar-glyph,
-  .toolbar-button:enabled:hover [is="ui-icon"].icon-mask,
-  .toolbar-button:enabled:focus [is="ui-icon"].icon-mask {
+  .toolbar-button:enabled:hover [is=ui-icon].icon-mask,
+  .toolbar-button:enabled:focus [is=ui-icon].icon-mask {
     background-color: HighlightText;
   }
 
diff --git a/front_end/ui/legacy/treeoutline.css b/front_end/ui/legacy/treeoutline.css
index a248a72..0b406ea 100644
--- a/front_end/ui/legacy/treeoutline.css
+++ b/front_end/ui/legacy/treeoutline.css
@@ -6,7 +6,7 @@
 
 :host {
   flex: 1 1 auto;
-  padding: 2px 0 0;
+  padding: 2px 0 0 0;
 }
 
 .tree-outline-disclosure:not(.tree-outline-disclosure-hide-overflow) {
@@ -166,7 +166,7 @@
 @media (forced-colors: active) {
   .tree-outline-disclosure li.parent::before,
   .tree-outline:not(.hide-selection-when-blurred) li.parent:not(.selected)::before,
-  .tree-outline li [is="ui-icon"].icon-mask {
+  .tree-outline li [is=ui-icon].icon-mask {
     forced-color-adjust: none;
     background-color: ButtonText;
   }
@@ -200,8 +200,8 @@
     background-color: transparent;
   }
 
-  .tree-outline li.selected [is="ui-icon"].icon-mask,
-  .tree-outline li.selected:focus [is="ui-icon"]:not(.icon-mask) {
+  .tree-outline li.selected [is=ui-icon].icon-mask,
+  .tree-outline li.selected:focus [is=ui-icon]:not(.icon-mask) {
     background-color: HighlightText !important; /* stylelint-disable-line declaration-no-important */
   }
 
diff --git a/inspector_overlay/common.css b/inspector_overlay/common.css
index e7365d4..efd1869 100644
--- a/inspector_overlay/common.css
+++ b/inspector_overlay/common.css
@@ -17,11 +17,11 @@
 
 body.platform-mac {
   color: rgb(48 57 66);
-  font-family: ".SFNSDisplay-Regular", "Helvetica Neue", "Lucida Grande", sans-serif;
+  font-family: '.SFNSDisplay-Regular', 'Helvetica Neue', 'Lucida Grande', sans-serif;
 }
 
 body.platform-windows {
-  font-family: "Segoe UI", Tahoma, sans-serif;
+  font-family: 'Segoe UI', Tahoma, sans-serif;
 }
 
 .fill {
diff --git a/inspector_overlay/tool_highlight.css b/inspector_overlay/tool_highlight.css
index 0a531fa..24276c34 100644
--- a/inspector_overlay/tool_highlight.css
+++ b/inspector_overlay/tool_highlight.css
@@ -157,7 +157,7 @@
   margin-right: 2px;
   width: 10px;
   height: 10px;
-  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAIAAADZF8uwAAAAGUlEQVQYV2M4gwH+YwCGIasIUwhT25BVBADtzYNYrHvv4gAAAABJRU5ErkJggg==");
+  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAIAAADZF8uwAAAAGUlEQVQYV2M4gwH+YwCGIasIUwhT25BVBADtzYNYrHvv4gAAAABJRU5ErkJggg==);
   line-height: 10px;
 }
 
diff --git a/inspector_overlay/tool_paused.css b/inspector_overlay/tool_paused.css
index 8fdbfa8..46122a7 100644
--- a/inspector_overlay/tool_paused.css
+++ b/inspector_overlay/tool_paused.css
@@ -61,12 +61,12 @@
 }
 
 #resume-button .glyph {
-  -webkit-mask-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA0AAAAKCAYAAABv7tTEAAAAAXNSR0IArs4c6QAAAFJJREFUKM+10bEJgGAMBeEPbR3BLRzEVdzEVRzELRzBVohVwEJ+iODBlQfhBeJhsmHU4C0KnFjQV6J0x1SNAhdWDJUoPTB3PvLLeaUhypM3n3sD/qc7lDrdpIEAAAAASUVORK5CYII=");
+  -webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA0AAAAKCAYAAABv7tTEAAAAAXNSR0IArs4c6QAAAFJJREFUKM+10bEJgGAMBeEPbR3BLRzEVdzEVRzELRzBVohVwEJ+iODBlQfhBeJhsmHU4C0KnFjQV6J0x1SNAhdWDJUoPTB3PvLLeaUhypM3n3sD/qc7lDrdpIEAAAAASUVORK5CYII=);
   -webkit-mask-size: 13px 10px;
   background-color: rgb(66 129 235);
 }
 
 #step-over-button .glyph {
-  -webkit-mask-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAAKCAYAAAC5Sw6hAAAAAXNSR0IArs4c6QAAAOFJREFUKM+N0j8rhXEUB/DPcxW35CqhvIBrtqibkklhV8qkTHe4ZbdblcXgPVhuMdqUTUl5A2KRRCF5LGc4PT1P7qnfcr5/zu/8KdTHLFaxjHnc4RZXKI0QYxjgLQTVd42l/0wmg5iFX3iq5H6w22RS4DyRH7CB8cAXcBTGJT6xUmd0mEwuMdFQcA3fwXvGTAan8BrgPabTL9fRRyfx91PRMwyjGwcJ2EyCfsrfpPw2Pipz24NT/MZciiQYVshzOKnZ5Hturxt3k2MnCpS4SPkeHpPR8Sh3tYgttBoW9II2/AHiaEqvD2Fc0wAAAABJRU5ErkJggg==");
+  -webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAAKCAYAAAC5Sw6hAAAAAXNSR0IArs4c6QAAAOFJREFUKM+N0j8rhXEUB/DPcxW35CqhvIBrtqibkklhV8qkTHe4ZbdblcXgPVhuMdqUTUl5A2KRRCF5LGc4PT1P7qnfcr5/zu/8KdTHLFaxjHnc4RZXKI0QYxjgLQTVd42l/0wmg5iFX3iq5H6w22RS4DyRH7CB8cAXcBTGJT6xUmd0mEwuMdFQcA3fwXvGTAan8BrgPabTL9fRRyfx91PRMwyjGwcJ2EyCfsrfpPw2Pipz24NT/MZciiQYVshzOKnZ5Hturxt3k2MnCpS4SPkeHpPR8Sh3tYgttBoW9II2/AHiaEqvD2Fc0wAAAABJRU5ErkJggg==);
   -webkit-mask-size: 18px 10px;
 }