Fix stylelint-config-standard violations
Bug: chromium:1083142
Change-Id: I5ea4cc5d0f83e52856383ba37a47472e33eb19a2
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/2204113
Commit-Queue: Mathias Bynens <[email protected]>
Commit-Queue: Changhao Han <[email protected]>
Auto-Submit: Mathias Bynens <[email protected]>
Reviewed-by: Changhao Han <[email protected]>
Reviewed-by: Alex Rudenko <[email protected]>
diff --git a/front_end/ui/checkboxTextLabel.css b/front_end/ui/checkboxTextLabel.css
index ec687d6..20b45b3 100644
--- a/front_end/ui/checkboxTextLabel.css
+++ b/front_end/ui/checkboxTextLabel.css
@@ -5,100 +5,107 @@
*/
:host {
- padding: 0;
- margin: 0;
- display: inline-flex;
- flex-shrink: 0;
- align-items: center !important;
+ padding: 0;
+ margin: 0;
+ display: inline-flex;
+ flex-shrink: 0;
+ align-items: center !important;
}
input {
- height: 12px;
- width: 12px;
- flex-shrink: 0;
+ height: 12px;
+ width: 12px;
+ flex-shrink: 0;
}
input.inside-datagrid {
- height: 10px;
- width: 10px;
+ height: 10px;
+ width: 10px;
}
input:focus {
- outline: auto 5px -webkit-focus-ring-color;
+ outline: auto 5px -webkit-focus-ring-color;
}
input.dt-checkbox-themed {
- -webkit-appearance: none;
- margin: auto 5px auto 2px;
- border: 1px solid rgb(45, 45, 45);
- border-radius: 3px;
- background-color: rgb(102, 102, 102);
+ -webkit-appearance: none;
+ margin: auto 5px auto 2px;
+ border: 1px solid rgb(45, 45, 45);
+ border-radius: 3px;
+ background-color: rgb(102, 102, 102);
}
-input.dt-checkbox-themed:after {
- content: '';
- line-height: 10px;
- position: absolute;
- cursor: pointer;
- width: 12px;
- height: 12px;
- background: none;
+input.dt-checkbox-themed::after {
+ content: '';
+ line-height: 10px;
+ position: absolute;
+ cursor: pointer;
+ width: 12px;
+ height: 12px;
+ background: none;
}
-input.dt-checkbox-themed:checked:after {
- background-color: #333;
+input.dt-checkbox-themed:checked::after {
+ background-color: #333;
}
-input.dt-checkbox-themed:after {
- -webkit-mask-image: url(Images/checkboxCheckmark.svg);
- -webkit-mask-size: 11px 11px;
- -webkit-mask-position: 0 0;
+input.dt-checkbox-themed::after {
+ -webkit-mask-image: url(Images/checkboxCheckmark.svg);
+ -webkit-mask-size: 11px 11px;
+ -webkit-mask-position: 0 0;
}
:host-context(.-theme-with-dark-background) input:not(.dt-checkbox-themed) {
- filter: invert(80%);
+ filter: invert(80%);
}
.dt-checkbox-text {
- margin-left: 3px;
- overflow: hidden;
- text-overflow: ellipsis;
+ margin-left: 3px;
+ overflow: hidden;
+ text-overflow: ellipsis;
}
.dt-checkbox-subtitle {
- color: gray;
+ color: gray;
}
@media (forced-colors: active) {
- input.dt-checkbox-theme-preserve {
- forced-color-adjust: none;
- }
- input.dt-checkbox-theme-preserve:hover:enabled {
- border-color: Highlight;
- }
- input.dt-checkbox-theme-preserve:active::before,
- input.dt-checkbox-theme-preserve:active::after {
- background-color: Highlight;
- }
- input.dt-checkbox-theme-preserve:active {
- background: HighlightText;
- }
- input.dt-checkbox-theme-preserve:active:checked::before,
- input.dt-checkbox-theme-preserve:active:checked::after,
- input.dt-checkbox-theme-preserve:checked::before,
- input.dt-checkbox-theme-preserve:checked::after {
- background-color: HighlightText;
- }
- input.dt-checkbox-theme-preserve:active:checked,
- input.dt-checkbox-theme-preserve:checked {
- background: Highlight;
- border-color: Highlight;
- }
- input.dt-checkbox-theme-preserve:hover:checked::before,
- input.dt-checkbox-theme-preserve:hover:checked::after {
- background-color: Highlight !important;
- }
- input.dt-checkbox-theme-preserve:hover:checked {
- background: HighlightText;
- }
+ input.dt-checkbox-theme-preserve {
+ forced-color-adjust: none;
}
+
+ input.dt-checkbox-theme-preserve:hover:enabled {
+ border-color: Highlight;
+ }
+
+ input.dt-checkbox-theme-preserve:active::before,
+ input.dt-checkbox-theme-preserve:active::after {
+ background-color: Highlight;
+ }
+
+ input.dt-checkbox-theme-preserve:active {
+ background: HighlightText;
+ }
+
+ input.dt-checkbox-theme-preserve:active:checked::before,
+ input.dt-checkbox-theme-preserve:active:checked::after,
+ input.dt-checkbox-theme-preserve:checked::before,
+ input.dt-checkbox-theme-preserve:checked::after {
+ background-color: HighlightText;
+ }
+
+ input.dt-checkbox-theme-preserve:active:checked,
+ input.dt-checkbox-theme-preserve:checked {
+ background: Highlight;
+ border-color: Highlight;
+ }
+
+ input.dt-checkbox-theme-preserve:hover:checked::before,
+ input.dt-checkbox-theme-preserve:hover:checked::after {
+ background-color: Highlight !important;
+ }
+
+ input.dt-checkbox-theme-preserve:hover:checked {
+ background: HighlightText;
+ }
+}
diff --git a/front_end/ui/closeButton.css b/front_end/ui/closeButton.css
index 3080dc8..5a43dfd 100644
--- a/front_end/ui/closeButton.css
+++ b/front_end/ui/closeButton.css
@@ -5,38 +5,41 @@
*/
.close-button {
- width: 14px;
- height: 14px;
- cursor: default;
- display: flex;
- align-items: center;
- justify-content: center;
+ width: 14px;
+ height: 14px;
+ cursor: default;
+ display: flex;
+ align-items: center;
+ justify-content: center;
}
-.hover-icon, .active-icon {
- display: none;
+.hover-icon,
+.active-icon {
+ display: none;
}
-.close-button:hover .default-icon, .close-button:active .default-icon {
- display: none;
+.close-button:hover .default-icon,
+.close-button:active .default-icon {
+ display: none;
}
.close-button:hover .hover-icon {
- display: block;
+ display: block;
}
-.close-button[data-keyboard-focus="true"]:focus .default-icon, .close-button:active .default-icon {
- display: none;
+.close-button[data-keyboard-focus="true"]:focus .default-icon,
+.close-button:active .default-icon {
+ display: none;
}
.close-button[data-keyboard-focus="true"]:focus .hover-icon {
- display: block;
+ display: block;
}
.close-button:active .hover-icon {
- display: none !important;
+ display: none !important;
}
.close-button:active .active-icon {
- display: block;
+ display: block;
}
diff --git a/front_end/ui/confirmDialog.css b/front_end/ui/confirmDialog.css
index 1e7d5e4..930ea2f 100644
--- a/front_end/ui/confirmDialog.css
+++ b/front_end/ui/confirmDialog.css
@@ -5,24 +5,25 @@
*/
.widget {
- padding: 20px;
+ padding: 20px;
}
-.message, .button {
- font-size: larger;
- white-space: pre;
- margin: 5px;
+.message,
+.button {
+ font-size: larger;
+ white-space: pre;
+ margin: 5px;
}
.button {
- text-align: center;
- margin-top: 10px;
+ text-align: center;
+ margin-top: 10px;
}
.button button {
- min-width: 80px;
+ min-width: 80px;
}
.reason {
- color: #8b0000;
+ color: #8b0000;
}
diff --git a/front_end/ui/dialog.css b/front_end/ui/dialog.css
index b91b838..ed1c96b 100644
--- a/front_end/ui/dialog.css
+++ b/front_end/ui/dialog.css
@@ -5,16 +5,16 @@
*/
.widget {
- box-shadow: var(--drop-shadow);
- background: white;
- justify-content: flex-start;
- align-items: stretch;
- display: flex;
+ box-shadow: var(--drop-shadow);
+ background: white;
+ justify-content: flex-start;
+ align-items: stretch;
+ display: flex;
}
.dialog-close-button {
- position: absolute;
- right: 9px;
- top: 9px;
- z-index: 1;
-}
\ No newline at end of file
+ position: absolute;
+ right: 9px;
+ top: 9px;
+ z-index: 1;
+}
diff --git a/front_end/ui/dropTarget.css b/front_end/ui/dropTarget.css
index 314dbae..7f63250 100644
--- a/front_end/ui/dropTarget.css
+++ b/front_end/ui/dropTarget.css
@@ -5,24 +5,24 @@
*/
:host {
- position: absolute;
- top: 0;
- bottom: 0;
- left: 0;
- right: 0;
- display: flex;
- background-color: rgba(255,255,255,0.8);
- z-index: 1000;
+ position: absolute;
+ top: 0;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ display: flex;
+ background-color: rgba(255, 255, 255, 0.8);
+ z-index: 1000;
}
.drop-target-message {
- flex: auto;
- font-size: 30px;
- color: #999;
- display: flex;
- justify-content: center;
- align-items: center;
- margin: 20px;
- border: 4px dashed #ddd;
- pointer-events: none;
+ flex: auto;
+ font-size: 30px;
+ color: #999;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ margin: 20px;
+ border: 4px dashed #ddd;
+ pointer-events: none;
}
diff --git a/front_end/ui/emptyWidget.css b/front_end/ui/emptyWidget.css
index 530bca8..ead95a3 100644
--- a/front_end/ui/emptyWidget.css
+++ b/front_end/ui/emptyWidget.css
@@ -4,30 +4,30 @@
* found in the LICENSE file.
*/
- .empty-bold-text {
- display: block;
- font-size: 1.5em;
- margin: .83em 0 .83em;
- font-weight: bold;
- }
+.empty-bold-text {
+ display: block;
+ font-size: 1.5em;
+ margin: 0.83em 0 0.83em;
+ font-weight: bold;
+}
.empty-view {
- color: hsla(0, 0%, 43%, 1);
- padding: 30px;
- display: flex;
- align-items: center;
- flex-direction: column;
- min-width: 70px;
+ color: hsla(0, 0%, 43%, 1);
+ padding: 30px;
+ display: flex;
+ align-items: center;
+ flex-direction: column;
+ min-width: 70px;
}
.empty-view-scroller {
- justify-content: center;
- overflow: auto;
+ justify-content: center;
+ overflow: auto;
}
.empty-view p {
- white-space: initial;
- line-height: 18px;
- max-width: 300px;
- flex-shrink: 0;
+ white-space: initial;
+ line-height: 18px;
+ max-width: 300px;
+ flex-shrink: 0;
}
diff --git a/front_end/ui/filter.css b/front_end/ui/filter.css
index b974217..3335033 100644
--- a/front_end/ui/filter.css
+++ b/front_end/ui/filter.css
@@ -29,148 +29,150 @@
*/
.filter-bar {
- background-color: var(--toolbar-bg-color);
- flex: none;
- flex-wrap: wrap;
- align-items: center;
- border-bottom: var(--divider-border);
+ background-color: var(--toolbar-bg-color);
+ flex: none;
+ flex-wrap: wrap;
+ align-items: center;
+ border-bottom: var(--divider-border);
}
.filter-text-filter {
- display: inline-flex;
- margin-left: 1px;
- margin-right: 2px;
- min-width: 40px;
- max-width: 200px;
- height: 24px;
- align-items: center;
+ display: inline-flex;
+ margin-left: 1px;
+ margin-right: 2px;
+ min-width: 40px;
+ max-width: 200px;
+ height: 24px;
+ align-items: center;
}
.filter-bitset-filter {
- padding: 2px;
- display: inline-flex;
- overflow: hidden;
- height: 24px;
- position: relative;
- margin: 0;
+ padding: 2px;
+ display: inline-flex;
+ overflow: hidden;
+ height: 24px;
+ position: relative;
+ margin: 0;
}
.filter-bitset-filter span {
- display: inline-block;
- flex: none;
- margin: auto 2px;
- padding: 3px;
- background: transparent;
- text-shadow: rgba(255, 255, 255, 0.5) 0 1px 0;
- border-radius: 6px;
- overflow: hidden;
+ display: inline-block;
+ flex: none;
+ margin: auto 2px;
+ padding: 3px;
+ background: transparent;
+ text-shadow: rgba(255, 255, 255, 0.5) 0 1px 0;
+ border-radius: 6px;
+ overflow: hidden;
}
.filter-bitset-filter span[data-keyboard-focus="true"] {
- outline: -webkit-focus-ring-color auto 5px;
+ outline: -webkit-focus-ring-color auto 5px;
}
.filter-bitset-filter-divider {
- background-color: #ccc;
- height: 16px;
- width: 1px;
- margin: auto 2px;
- display: inline-block;
+ background-color: #ccc;
+ height: 16px;
+ width: 1px;
+ margin: auto 2px;
+ display: inline-block;
}
.filter-bitset-filter span.selected,
.filter-bitset-filter span:hover,
.filter-bitset-filter span:active {
- color: white;
- text-shadow: rgba(0, 0, 0, 0.4) 0 1px 0;
+ color: white;
+ text-shadow: rgba(0, 0, 0, 0.4) 0 1px 0;
}
.filter-bitset-filter span:hover {
- background: rgba(0, 0, 0, 0.2);
+ background: rgba(0, 0, 0, 0.2);
}
.filter-bitset-filter span.selected {
- background: rgba(0, 0, 0, 0.3);
+ background: rgba(0, 0, 0, 0.3);
}
.filter-bitset-filter span:active {
- background: rgba(0, 0, 0, 0.5);
+ background: rgba(0, 0, 0, 0.5);
}
.filter-checkbox-filter {
- padding-left: 4px;
- padding-right: 2px;
- white-space: nowrap;
- text-overflow: ellipsis;
- overflow: hidden;
- display: inline-flex;
- vertical-align: middle;
- height: 24px;
- position: relative;
+ padding-left: 4px;
+ padding-right: 2px;
+ white-space: nowrap;
+ text-overflow: ellipsis;
+ overflow: hidden;
+ display: inline-flex;
+ vertical-align: middle;
+ height: 24px;
+ position: relative;
}
.filter-checkbox-filter > [is=dt-checkbox] {
- display: flex;
- margin: auto 0;
+ display: flex;
+ margin: auto 0;
}
.filter-input-field {
- padding-left: 3px;
- width: 147px;
- height: 18px;
- line-height: 20px;
- display: inline-block;
- overflow: hidden;
- white-space: nowrap;
- cursor: auto;
+ padding-left: 3px;
+ width: 147px;
+ height: 18px;
+ line-height: 20px;
+ display: inline-block;
+ overflow: hidden;
+ white-space: nowrap;
+ cursor: auto;
}
.filter-input-container {
- margin: 0 3px;
- display: flex;
- background: #FFF;
- width: 163px;
+ margin: 0 3px;
+ display: flex;
+ background: #fff;
+ width: 163px;
}
.filter-input-container:hover {
- box-shadow: var(--focus-ring-inactive-shadow);
+ box-shadow: var(--focus-ring-inactive-shadow);
}
.filter-text-filter:not(.filter-text-empty) .filter-input-container,
.filter-input-container:focus-within {
- box-shadow: var(--focus-ring-active-shadow);
+ box-shadow: var(--focus-ring-active-shadow);
}
.filter-text-empty .filter-input-clear-button {
- display: none;
+ display: none;
}
.filter-input-clear-button {
- opacity: 0.7;
- height: 16px;
- margin-top: 1px;
+ opacity: 0.7;
+ height: 16px;
+ margin-top: 1px;
}
.filter-input-clear-button:hover {
- opacity: .99;
+ opacity: 0.99;
}
@media (forced-colors: active) {
- .filter-bitset-filter span:hover,
- .filter-bitset-filter span.selected,
- .filter-bitset-filter span:active {
- forced-color-adjust: none;
- background: Highlight;
- color: HighlightText;
- }
- .filter-input-container {
- forced-color-adjust: none;
- background: ButtonFace;
- box-shadow: var(--focus-ring-inactive-shadow);
- }
- .filter-input-container:hover,
- .filter-input-container:focus-within,
- .filter-text-filter:not(.filter-text-empty) .filter-input-container {
- box-shadow: var(--focus-ring-active-shadow);
- }
+ .filter-bitset-filter span:hover,
+ .filter-bitset-filter span.selected,
+ .filter-bitset-filter span:active {
+ forced-color-adjust: none;
+ background: Highlight;
+ color: HighlightText;
+ }
+
+ .filter-input-container {
+ forced-color-adjust: none;
+ background: ButtonFace;
+ box-shadow: var(--focus-ring-inactive-shadow);
+ }
+
+ .filter-input-container:hover,
+ .filter-input-container:focus-within,
+ .filter-text-filter:not(.filter-text-empty) .filter-input-container {
+ box-shadow: var(--focus-ring-active-shadow);
+ }
}
diff --git a/front_end/ui/glassPane.css b/front_end/ui/glassPane.css
index 1a170f4..eb6a7b4 100644
--- a/front_end/ui/glassPane.css
+++ b/front_end/ui/glassPane.css
@@ -5,57 +5,57 @@
*/
:host {
- position: absolute !important;
- top: 0;
- bottom: 0;
- left: 0;
- right: 0;
- overflow: hidden;
- contain: strict;
- background-color: transparent;
+ position: absolute !important;
+ top: 0;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ overflow: hidden;
+ contain: strict;
+ background-color: transparent;
}
:host-context(.dimmed-pane) {
- background-color: rgba(255, 255, 255, 0.5);
+ background-color: rgba(255, 255, 255, 0.5);
}
:host-context(.no-pointer-events) {
- pointer-events: none;
+ pointer-events: none;
}
.widget {
- display: flex;
- background-color: transparent;
- pointer-events: auto;
- flex: none;
+ display: flex;
+ background-color: transparent;
+ pointer-events: auto;
+ flex: none;
}
.no-pointer-events {
- pointer-events: none;
+ pointer-events: none;
}
.arrow-top {
- margin-top: -19px;
- margin-left: -9px;
+ margin-top: -19px;
+ margin-left: -9px;
}
.arrow-bottom {
- margin-left: -9px;
+ margin-left: -9px;
}
.arrow-left {
- margin-left: -19px;
- margin-top: -9px;
+ margin-left: -19px;
+ margin-top: -9px;
}
.arrow-right {
- margin-top: -9px;
+ margin-top: -9px;
}
.arrow-none {
- display: none;
+ display: none;
}
:host-context(.-theme-with-dark-background) .arrow {
- -webkit-filter: invert(80%);
+ -webkit-filter: invert(80%);
}
diff --git a/front_end/ui/infobar.css b/front_end/ui/infobar.css
index 91b18b8..6979218 100644
--- a/front_end/ui/infobar.css
+++ b/front_end/ui/infobar.css
@@ -5,92 +5,92 @@
*/
.infobar {
- color: rgb(34, 34, 34);
- display: flex;
- flex: auto;
- border-bottom: 1px solid rgb(171, 171, 171);
- flex-direction: column;
- position: relative;
- padding: 1px 6px 1px;
+ color: rgb(34, 34, 34);
+ display: flex;
+ flex: auto;
+ 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 rgba(0, 0, 0, 0.2) 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 {
- display: flex;
- flex-direction: row;
- justify-content: flex-start;
- min-height: 25px;
+ display: flex;
+ flex-direction: row;
+ justify-content: flex-start;
+ min-height: 25px;
}
.infobar-info-container {
- display: flex;
- align-items: center;
- flex-grow: 1;
- flex-wrap: wrap;
+ display: flex;
+ align-items: center;
+ flex-grow: 1;
+ flex-wrap: wrap;
}
.infobar-info-message {
- display: flex;
- margin: 5px 0;
+ display: flex;
+ margin: 5px 0;
}
.infobar-info-text {
- display: flex;
- align-items: center;
- margin: 0 4px;
+ display: flex;
+ align-items: center;
+ margin: 0 4px;
}
.infobar-details-rows {
- padding: 5px 5px 0 5px;
+ padding: 5px 5px 0 5px;
}
.infobar-details-row {
- display: flex;
- flex-direction: column;
- line-height: 18px;
- padding-bottom: 6px;
+ display: flex;
+ flex-direction: column;
+ line-height: 18px;
+ padding-bottom: 6px;
}
.infobar-close-container {
- display: flex;
- flex-shrink: 0;
- align-items: center;
+ display: flex;
+ flex-shrink: 0;
+ align-items: center;
}
.infobar-close-container > .infobar-button.link-style {
- margin: 4px;
+ margin: 4px;
}
.infobar-button {
- color: #757575;
- cursor: pointer;
- padding: 0 4px;
+ color: #757575;
+ cursor: pointer;
+ padding: 0 4px;
}
.info-icon {
- -webkit-mask-image: url(Images/ic_info_black_18dp.svg);
- background-color: hsl(214, 92%, 50%);
+ -webkit-mask-image: url(Images/ic_info_black_18dp.svg);
+ background-color: hsl(214, 92%, 50%);
}
.warning-icon {
- -webkit-mask-image: url(Images/ic_warning_black_18dp.svg);
- background-color: hsl(44, 92%, 50%);
+ -webkit-mask-image: url(Images/ic_warning_black_18dp.svg);
+ background-color: hsl(44, 92%, 50%);
}
.icon {
- -webkit-mask-size: 18px 18px;
- width: 18px;
- height: 18px;
- flex-shrink: 0;
+ -webkit-mask-size: 18px 18px;
+ width: 18px;
+ height: 18px;
+ flex-shrink: 0;
}
diff --git a/front_end/ui/inspectorCommon.css b/front_end/ui/inspectorCommon.css
index 09f7f22..6bfd005 100644
--- a/front_end/ui/inspectorCommon.css
+++ b/front_end/ui/inspectorCommon.css
@@ -5,220 +5,220 @@
*/
* {
- /* This is required for correct sizing of flex items because we rely
+ /* This is required for correct sizing of flex items because we rely
* on an old version of the flexbox spec.
* Longer-term we should remove this, see crbug.com/473625 */
- min-width: 0;
- min-height: 0;
+ min-width: 0;
+ min-height: 0;
}
:host-context(.platform-mac) .monospace,
:host-context(.platform-mac) .source-code,
.platform-mac .monospace,
.platform-mac .source-code {
- font-size: 11px !important;
- font-family: Menlo, monospace;
+ font-size: 11px !important;
+ font-family: Menlo, monospace;
}
:host-context(.platform-windows) .monospace,
:host-context(.platform-windows) .source-code,
.platform-windows .monospace,
.platform-windows .source-code {
- font-size: 12px !important;
- font-family: Consolas, Lucida Console, Courier New, monospace;
+ font-size: 12px !important;
+ font-family: Consolas, Lucida Console, Courier New, monospace;
}
:host-context(.platform-linux) .monospace,
:host-context(.platform-linux) .source-code,
.platform-linux .monospace,
.platform-linux .source-code {
- font-size: 11px !important;
- font-family: dejavu sans mono, monospace;
+ font-size: 11px !important;
+ font-family: dejavu sans mono, monospace;
}
.source-code {
- font-family: monospace;
- font-size: 11px !important;
- white-space: pre-wrap;
+ font-family: monospace;
+ font-size: 11px !important;
+ white-space: pre-wrap;
}
* {
- box-sizing: border-box;
+ box-sizing: border-box;
}
:focus {
- outline-width: 0;
+ outline-width: 0;
}
img {
- -webkit-user-drag: none;
+ -webkit-user-drag: none;
}
iframe,
a img {
- border: none;
+ border: none;
}
.fill {
- position: absolute;
- top: 0;
- left: 0;
- right: 0;
- bottom: 0;
+ position: absolute;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
}
iframe.fill {
- width: 100%;
- height: 100%;
+ width: 100%;
+ height: 100%;
}
.widget {
- position: relative;
- flex: auto;
- contain: style;
+ position: relative;
+ flex: auto;
+ contain: style;
}
.hbox {
- display: flex;
- flex-direction: row !important;
- position: relative;
+ display: flex;
+ flex-direction: row !important;
+ position: relative;
}
.vbox {
- display: flex;
- flex-direction: column !important;
- position: relative;
+ display: flex;
+ flex-direction: column !important;
+ position: relative;
}
.view-container > .toolbar {
- border-bottom: 1px solid #eee;
+ border-bottom: 1px solid #eee;
}
.flex-auto {
- flex: auto;
+ flex: auto;
}
.flex-none {
- flex: none;
+ flex: none;
}
.flex-centered {
- display: flex;
- align-items: center;
- justify-content: center;
+ display: flex;
+ align-items: center;
+ justify-content: center;
}
.overflow-auto {
- overflow: auto;
+ overflow: auto;
}
iframe.widget {
- position: absolute;
- width: 100%;
- height: 100%;
- left: 0;
- right: 0;
- top: 0;
- bottom: 0;
+ position: absolute;
+ width: 100%;
+ height: 100%;
+ left: 0;
+ right: 0;
+ top: 0;
+ bottom: 0;
}
.hidden {
- display: none !important;
+ display: none !important;
}
.monospace {
- font-size: 10px !important;
- font-family: monospace;
+ font-size: 10px !important;
+ font-family: monospace;
}
.highlighted-search-result {
- border-radius: 1px;
- background-color: rgba(255, 255, 0, 0.8);
- outline: 1px solid rgba(255, 255, 0, 0.8);
+ border-radius: 1px;
+ background-color: rgba(255, 255, 0, 0.8);
+ outline: 1px solid rgba(255, 255, 0, 0.8);
}
.-theme-with-dark-background .highlighted-search-result,
:host-context(.-theme-with-dark-background) .highlighted-search-result {
- background-color: hsl(133, 100%, 30%);
- color: #333;
+ background-color: hsl(133, 100%, 30%);
+ color: #333;
}
.link {
- cursor: pointer;
- text-decoration: underline;
- color: rgb(17, 85, 204);
+ cursor: pointer;
+ text-decoration: underline;
+ color: rgb(17, 85, 204);
}
button,
input,
select {
- /* Form elements do not automatically inherit font style from ancestors. */
- font-family: inherit;
- font-size: inherit;
+ /* Form elements do not automatically inherit font style from ancestors. */
+ font-family: inherit;
+ font-size: inherit;
}
input {
- background-color: white;
- color: inherit;
+ background-color: white;
+ color: inherit;
}
input::placeholder {
- color: rgba(0, 0, 0, 0.54);
+ color: rgba(0, 0, 0, 0.54);
}
:host-context(.-theme-with-dark-background) input[type="checkbox"]:not(.-theme-preserve) {
- -webkit-filter: invert(80%);
+ -webkit-filter: invert(80%);
}
.harmony-input:not([type]),
.harmony-input[type=number],
.harmony-input[type=text] {
- padding: 3px 6px;
- height: 24px;
- border: none;
- box-shadow: var(--focus-ring-inactive-shadow);
+ padding: 3px 6px;
+ height: 24px;
+ border: none;
+ box-shadow: var(--focus-ring-inactive-shadow);
}
.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 {
- box-shadow: var(--focus-ring-inactive-shadow);
+ box-shadow: var(--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 {
- box-shadow: var(--focus-ring-active-shadow);
+ box-shadow: var(--focus-ring-active-shadow);
}
.highlighted-search-result.current-search-result {
- border-radius: 1px;
- padding: 1px;
- margin: -1px;
- background-color: rgba(255, 127, 0, 0.8);
+ border-radius: 1px;
+ padding: 1px;
+ margin: -1px;
+ background-color: rgba(255, 127, 0, 0.8);
}
.dimmed {
- opacity: 0.6;
+ opacity: 0.6;
}
.editing {
- box-shadow: var(--drop-shadow);
- background-color: white;
- text-overflow: clip !important;
- padding-left: 2px;
- margin-left: -2px;
- padding-right: 2px;
- margin-right: -2px;
- margin-bottom: -1px;
- padding-bottom: 1px;
- opacity: 1.0 !important;
+ box-shadow: var(--drop-shadow);
+ background-color: white;
+ text-overflow: clip !important;
+ padding-left: 2px;
+ margin-left: -2px;
+ padding-right: 2px;
+ margin-right: -2px;
+ margin-bottom: -1px;
+ padding-bottom: 1px;
+ opacity: 1 !important;
}
.editing,
.editing * {
- color: #222 !important;
- text-decoration: none !important;
+ color: #222 !important;
+ text-decoration: none !important;
}
.harmony-input:not([type]).error-input,
@@ -227,51 +227,51 @@
.harmony-input:not([type]):invalid,
.harmony-input[type=number]:invalid,
.harmony-input[type=text]:invalid {
- box-shadow: 0 0 0 1px #ff1a00;
+ box-shadow: 0 0 0 1px #ff1a00;
}
.chrome-select {
- -webkit-appearance: none;
- user-select: none;
- border: 1px solid rgba(0, 0, 0, 0.2);
- border-radius: 2px;
- color: #333;
- font: inherit;
- margin: 0;
- outline: none;
- 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-position: right center;
- background-repeat: no-repeat;
- min-height: 24px;
- min-width: 80px;
- background-size: 15px;
+ -webkit-appearance: none;
+ user-select: none;
+ border: 1px solid rgba(0, 0, 0, 0.2);
+ border-radius: 2px;
+ color: #333;
+ font: inherit;
+ margin: 0;
+ outline: none;
+ 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-position: right center;
+ background-repeat: no-repeat;
+ min-height: 24px;
+ min-width: 80px;
+ background-size: 15px;
}
.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(0, 0%, 96%);
+ box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}
.chrome-select:enabled:active {
- background-color: #f2f2f2;
+ background-color: #f2f2f2;
}
.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);
+ border-color: transparent;
+ box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1), 0 0 0 2px rgba(66, 133, 244, 0.4);
}
.chrome-select:disabled {
- opacity: 0.38;
+ opacity: 0.38;
}
.chrome-select-label {
- margin: 0px 22px;
+ margin: 0 22px;
flex: none;
}
@@ -282,210 +282,232 @@
.chrome-select optgroup,
.chrome-select option {
- background-color: #EEEEEE;
- color: #222;
+ background-color: #eee;
+ color: #222;
}
:not(.platform-mac).-theme-with-dark-background ::-webkit-scrollbar,
:host-context(:not(.platform-mac).-theme-with-dark-background) ::-webkit-scrollbar {
- width: 14px;
- height: 14px;
+ width: 14px;
+ height: 14px;
}
: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 rgba(255, 255, 255, 0.3);
+ 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);
+ border-radius: 2px;
+ background-color: #333;
+ -webkit-box-shadow: inset 0 0 1px rgba(255, 255, 255, 0.5);
}
:not(.platform-mac).-theme-with-dark-background ::-webkit-scrollbar-corner,
:host-context(:not(.platform-mac).-theme-with-dark-background) ::-webkit-scrollbar-corner {
- background-color: #242424;
+ background-color: #242424;
}
.gray-info-message {
- text-align: center;
- font-style: italic;
- padding: 6px;
- color: #888;
- white-space: nowrap;
+ text-align: center;
+ font-style: italic;
+ padding: 6px;
+ color: #888;
+ white-space: nowrap;
}
span[is=dt-icon-label] {
- flex: none;
+ flex: none;
}
.full-widget-dimmed-banner a {
- color: inherit;
+ color: inherit;
}
.full-widget-dimmed-banner {
- color: #777;
- background-color: white;
- display: flex;
- justify-content: center;
- align-items: center;
- text-align: center;
- padding: 20px;
- position: absolute;
- top: 0;
- right: 0;
- bottom: 0;
- left: 0;
- font-size: 13px;
- overflow: auto;
- z-index: 500;
+ color: #777;
+ background-color: white;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ text-align: center;
+ padding: 20px;
+ position: absolute;
+ top: 0;
+ right: 0;
+ bottom: 0;
+ left: 0;
+ font-size: 13px;
+ overflow: auto;
+ z-index: 500;
}
[is=ui-icon] {
- display: inline-block;
- flex-shrink: 0;
+ 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 {
- filter: invert(80%) hue-rotate(180deg);
+ filter: invert(80%) hue-rotate(180deg);
}
[is=ui-icon].icon-mask {
- background-color: rgb(110, 110, 110);
- -webkit-mask-position: var(--spritesheet-position);
+ background-color: rgb(110, 110, 110);
+ -webkit-mask-position: var(--spritesheet-position);
}
[is=ui-icon]:not(.icon-mask) {
- background-position: var(--spritesheet-position);
+ background-position: var(--spritesheet-position);
}
.spritesheet-smallicons:not(.icon-mask) {
- background-image: url(Images/smallIcons.svg);
+ background-image: url(Images/smallIcons.svg);
}
.spritesheet-smallicons.icon-mask {
- -webkit-mask-image: url(Images/smallIcons.svg);
+ -webkit-mask-image: url(Images/smallIcons.svg);
}
.spritesheet-largeicons:not(.icon-mask) {
- background-image: url(Images/largeIcons.svg);
+ background-image: url(Images/largeIcons.svg);
}
.spritesheet-largeicons.icon-mask {
- -webkit-mask-image: url(Images/largeIcons.svg);
+ -webkit-mask-image: url(Images/largeIcons.svg);
}
.spritesheet-mediumicons:not(.icon-mask) {
- background-image: url(Images/mediumIcons.svg);
+ background-image: url(Images/mediumIcons.svg);
}
.spritesheet-mediumicons.icon-mask {
- -webkit-mask-image: url(Images/mediumIcons.svg);
+ -webkit-mask-image: url(Images/mediumIcons.svg);
}
.spritesheet-arrowicons {
- background-image: url(Images/popoverArrows.png);
+ background-image: url(Images/popoverArrows.png);
}
-:host-context(.force-white-icons) [is=ui-icon].spritesheet-smallicons, .force-white-icons [is=ui-icon].spritesheet-smallicons, [is=ui-icon].force-white-icons.spritesheet-smallicons, -theme-preserve {
- -webkit-mask-image: url(Images/smallIcons.svg);
- -webkit-mask-position: var(--spritesheet-position);
- background: #fafafa !important;
+:host-context(.force-white-icons) [is=ui-icon].spritesheet-smallicons,
+.force-white-icons [is=ui-icon].spritesheet-smallicons,
+[is=ui-icon].force-white-icons.spritesheet-smallicons,
+-theme-preserve {
+ -webkit-mask-image: url(Images/smallIcons.svg);
+ -webkit-mask-position: var(--spritesheet-position);
+ background: #fafafa !important;
}
-:host-context(.force-white-icons) [is=ui-icon].spritesheet-largeicons, .force-white-icons [is=ui-icon].spritesheet-largeicons, [is=ui-icon].force-white-icons.spritesheet-largeicons, -theme-preserve {
- -webkit-mask-image: url(Images/largeIcons.svg);
- -webkit-mask-position: var(--spritesheet-position);
- background: #fafafa !important;
+:host-context(.force-white-icons) [is=ui-icon].spritesheet-largeicons,
+.force-white-icons [is=ui-icon].spritesheet-largeicons,
+[is=ui-icon].force-white-icons.spritesheet-largeicons,
+-theme-preserve {
+ -webkit-mask-image: url(Images/largeIcons.svg);
+ -webkit-mask-position: var(--spritesheet-position);
+ background: #fafafa !important;
}
-:host-context(.force-white-icons) [is=ui-icon].spritesheet-mediumicon, .force-white-icons [is=ui-icon].spritesheet-mediumicons, [is=ui-icon].force-white-icons.spritesheet-mediumicons, -theme-preserve {
- -webkit-mask-image: url(Images/mediumIcons.svg);
- -webkit-mask-position: var(--spritesheet-position);
- background: #fafafa !important;
+:host-context(.force-white-icons) [is=ui-icon].spritesheet-mediumicon,
+.force-white-icons [is=ui-icon].spritesheet-mediumicons,
+[is=ui-icon].force-white-icons.spritesheet-mediumicons,
+-theme-preserve {
+ -webkit-mask-image: url(Images/mediumIcons.svg);
+ -webkit-mask-position: var(--spritesheet-position);
+ background: #fafafa !important;
}
.expandable-inline-button {
- background-color: #dedede;
- color: #333;
- cursor: pointer;
- border-radius: 3px;
+ background-color: #dedede;
+ color: #333;
+ cursor: pointer;
+ border-radius: 3px;
}
.undisplayable-text,
.expandable-inline-button {
- padding: 1px 3px;
- margin: 0 2px;
- font-size: 11px;
- font-family: sans-serif;
- white-space: nowrap;
- display: inline-block;
+ padding: 1px 3px;
+ margin: 0 2px;
+ font-size: 11px;
+ font-family: sans-serif;
+ white-space: nowrap;
+ display: inline-block;
}
.undisplayable-text::after,
.expandable-inline-button::after {
- content: attr(data-text);
+ content: attr(data-text);
}
.undisplayable-text {
- color: rgb(128, 128, 128);
- font-style: italic;
+ color: rgb(128, 128, 128);
+ font-style: italic;
}
.expandable-inline-button:hover {
- background-color: #d5d5d5;
+ background-color: #d5d5d5;
}
.expandable-inline-button[data-keyboard-focus="true"] {
- background-color: #bbbbbb;
+ background-color: #bbb;
}
::selection {
- background-color: #bbdefb;
+ background-color: #bbdefb;
}
.-theme-with-dark-background *::selection,
:host-context(.-theme-with-dark-background) *::selection {
- background-color: #9e9e9e;
+ background-color: #9e9e9e;
}
button.link {
- border: none;
- background: none;
- padding: 3px;
+ border: none;
+ background: none;
+ padding: 3px;
}
button.link[data-keyboard-focus="true"]:focus {
- background-color: rgba(0, 0, 0, 0.08);
- border-radius: 2px;
+ background-color: rgba(0, 0, 0, 0.08);
+ border-radius: 2px;
}
/* See ARIAUtils.js */
+
[data-aria-utils-animation-hack] {
- animation: ANIMATION-HACK 0s;
+ animation: ANIMATION-HACK 0s;
}
+
@keyframes ANIMATION-HACK {
}
@media (forced-colors: active) {
- .dimmed,
- .chrome-select:disabled {
- opacity: 1;
- }
- [is=ui-icon].icon-mask,
- :host-context(.force-white-icons) [is=ui-icon].spritesheet-smallicons, .force-white-icons [is=ui-icon].spritesheet-smallicons, [is=ui-icon].force-white-icons.spritesheet-smallicons, -theme-preserve,
- :host-context(.force-white-icons) [is=ui-icon].spritesheet-largeicons, .force-white-icons [is=ui-icon].spritesheet-largeicons, [is=ui-icon].force-white-icons.spritesheet-largeicons, -theme-preserve,
- :host-context(.force-white-icons) [is=ui-icon].spritesheet-mediumicon, .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] {
- border: 1px solid ButtonText;
- }
+ .dimmed,
+ .chrome-select:disabled {
+ opacity: 1;
+ }
+
+ [is=ui-icon].icon-mask,
+ :host-context(.force-white-icons) [is=ui-icon].spritesheet-smallicons,
+ .force-white-icons [is=ui-icon].spritesheet-smallicons,
+ [is=ui-icon].force-white-icons.spritesheet-smallicons,
+ -theme-preserve,
+ :host-context(.force-white-icons) [is=ui-icon].spritesheet-largeicons,
+ .force-white-icons [is=ui-icon].spritesheet-largeicons,
+ [is=ui-icon].force-white-icons.spritesheet-largeicons,
+ -theme-preserve,
+ :host-context(.force-white-icons) [is=ui-icon].spritesheet-mediumicon,
+ .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] {
+ border: 1px solid ButtonText;
+ }
}
diff --git a/front_end/ui/inspectorStyle.css b/front_end/ui/inspectorStyle.css
index 13d8e73..17d7529 100644
--- a/front_end/ui/inspectorStyle.css
+++ b/front_end/ui/inspectorStyle.css
@@ -28,151 +28,151 @@
*/
:root {
- height: 100%;
- overflow: hidden;
+ height: 100%;
+ overflow: hidden;
}
:root {
- --accent-color: #1a73e8;
- --accent-fg-color: #1a73e8;
- --accent-color-hover: #3b86e8;
- --accent-fg-color-hover: #1567D3;
- --active-control-bg-color: #5a5a5a;
- --focus-bg-color: hsl(214, 40%, 92%);
- --focus-ring-inactive-shadow-color: #e0e0e0;
- --input-validation-error: #db1600;
- --toolbar-bg-color: #f3f3f3;
- --toolbar-hover-bg-color: #eaeaea;
- --selection-fg-color: white;
- --selection-inactive-fg-color: #5a5a5a;
- --selection-inactive-bg-color: #dadada;
- --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);
- --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.0);
- --network-grid-stripe-color: rgba(245, 245, 245, 1.0);
- --network-grid-navigation-color: rgba(221, 238, 255, 1.0);
- --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, .6);
- --network-grid-focus-selected-color: var(--selection-bg-color);
- --network-grid-focus-selected-color-has-error: rgb(255, 240, 240, 1.0);
- --network-grid-from-frame-color: rgba(224, 247, 250, .4);
- --network-grid-is-product-color: rgba(255, 252, 225, .6);
+ --accent-color: #1a73e8;
+ --accent-fg-color: #1a73e8;
+ --accent-color-hover: #3b86e8;
+ --accent-fg-color-hover: #1567d3;
+ --active-control-bg-color: #5a5a5a;
+ --focus-bg-color: hsl(214, 40%, 92%);
+ --focus-ring-inactive-shadow-color: #e0e0e0;
+ --input-validation-error: #db1600;
+ --toolbar-bg-color: #f3f3f3;
+ --toolbar-hover-bg-color: #eaeaea;
+ --selection-fg-color: white;
+ --selection-inactive-fg-color: #5a5a5a;
+ --selection-inactive-bg-color: #dadada;
+ --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);
+ --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-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);
}
.-theme-with-dark-background {
- --accent-color: #0e639c;
- --accent-fg-color: #cccccc;
- --accent-fg-color-hover: #cccccc;
- --accent-color-hover: rgb(17, 119, 187);
- --active-control-bg-color: #cdcdcd;
- --focus-bg-color: hsl(214, 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%);
- --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);
- --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-inactive-bg-color: #454545;
-
- --network-grid-default-color: rgba(36, 36, 36, 1.0);
- --network-grid-stripe-color: rgba(41, 41, 41, 1.0);
- --network-grid-navigation-color: rgba(221, 238, 255, 1.0);
- --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, .6);
- --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, .4);
- --network-grid-is-product-color: rgba(255, 252, 225, .6);
+ --accent-color: #0e639c;
+ --accent-fg-color: #ccc;
+ --accent-fg-color-hover: #ccc;
+ --accent-color-hover: rgb(17, 119, 187);
+ --active-control-bg-color: #cdcdcd;
+ --focus-bg-color: hsl(214, 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%);
+ --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);
+ --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-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-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);
}
: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);
- --network-frame-divider-color: #fccc49;
+ --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);
+ --network-frame-divider-color: #fccc49;
}
body {
- height: 100%;
- width: 100%;
- position: relative;
- overflow: hidden;
- margin: 0;
- cursor: default;
- font-family: '.SFNSDisplay-Regular', 'Helvetica Neue', 'Lucida Grande', sans-serif;
- font-size: 12px;
- tab-size: 4;
- user-select: none;
- color: #222;
- background: white;
+ height: 100%;
+ width: 100%;
+ position: relative;
+ overflow: hidden;
+ margin: 0;
+ cursor: default;
+ font-family: '.SFNSDisplay-Regular', 'Helvetica Neue', 'Lucida Grande', sans-serif;
+ font-size: 12px;
+ tab-size: 4;
+ user-select: none;
+ color: #222;
+ background: white;
}
.platform-linux {
- color: rgb(48, 57, 66);
- font-family: Roboto, Ubuntu, Arial, sans-serif;
+ color: rgb(48, 57, 66);
+ font-family: Roboto, Ubuntu, Arial, sans-serif;
}
.platform-mac {
- color: rgb(48, 57, 66);
- font-family: '.SFNSDisplay-Regular', 'Helvetica Neue', 'Lucida Grande', sans-serif;
+ color: rgb(48, 57, 66);
+ font-family: '.SFNSDisplay-Regular', 'Helvetica Neue', 'Lucida Grande', sans-serif;
}
.platform-windows {
- font-family: 'Segoe UI', Tahoma, sans-serif;
+ font-family: 'Segoe UI', Tahoma, sans-serif;
}
.panel {
- display: flex;
- overflow: hidden;
- position: absolute;
- top: 0;
- left: 0;
- right: 0;
- bottom: 0;
- z-index: 0;
- background-color: white;
+ display: flex;
+ overflow: hidden;
+ position: absolute;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ z-index: 0;
+ background-color: white;
}
.panel-sidebar {
- overflow-x: hidden;
- background-color: var(--toolbar-bg-color);
+ overflow-x: hidden;
+ background-color: var(--toolbar-bg-color);
}
iframe.extension {
- flex: auto;
- width: 100%;
- height: 100%;
+ flex: auto;
+ width: 100%;
+ height: 100%;
}
iframe.panel.extension {
- display: block;
- height: 100%;
+ display: block;
+ height: 100%;
}
@media (forced-colors: active) {
- :root {
- --accent-color: Highlight;
- --focus-ring-inactive-shadow-color: ButtonText
- }
+ :root {
+ --accent-color: Highlight;
+ --focus-ring-inactive-shadow-color: ButtonText;
+ }
}
diff --git a/front_end/ui/inspectorSyntaxHighlight.css b/front_end/ui/inspectorSyntaxHighlight.css
index 5fa3459..e746a16 100644
--- a/front_end/ui/inspectorSyntaxHighlight.css
+++ b/front_end/ui/inspectorSyntaxHighlight.css
@@ -25,155 +25,163 @@
* (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(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-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);}
+.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-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-link {color: #00e;}
+.cm-css-property,
+.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-tag { color: var(--dom-tag-name-color); }
+.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);
+ /* Keep this in sync with view-source.css (.webkit-html-comment) */
+ color: rgb(35, 110, 37);
}
.webkit-html-tag {
- color: rgb(168, 148, 166);
+ color: rgb(168, 148, 166);
}
-.webkit-html-tag-name, .webkit-html-close-tag-name {
- /* Keep this in sync with view-source.css (.webkit-html-tag) */
- color: var(--dom-tag-name-color);
+.webkit-html-tag-name,
+.webkit-html-close-tag-name {
+ /* Keep this in sync with view-source.css (.webkit-html-tag) */
+ color: var(--dom-tag-name-color);
}
.webkit-html-pseudo-element {
- /* This one is non-standard. */
- color: brown;
+ /* This one is non-standard. */
+ color: brown;
}
.webkit-html-js-node,
.webkit-html-css-node {
- white-space: pre-wrap;
+ white-space: pre-wrap;
}
.webkit-html-text-node {
- unicode-bidi: -webkit-isolate;
+ unicode-bidi: -webkit-isolate;
}
.webkit-html-entity-value {
- /* This one is non-standard. */
- background-color: rgba(0, 0, 0, 0.15);
- unicode-bidi: -webkit-isolate;
+ /* This one is non-standard. */
+ background-color: rgba(0, 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);
+ /* Keep this in sync with view-source.css (.webkit-html-doctype) */
+ color: rgb(192, 192, 192);
}
.webkit-html-attribute-name {
- /* Keep this in sync with view-source.css (.webkit-html-attribute-name) */
- color: var(--dom-attribute-name-color);
- unicode-bidi: -webkit-isolate;
+ /* Keep this in sync with view-source.css (.webkit-html-attribute-name) */
+ color: var(--dom-attribute-name-color);
+ unicode-bidi: -webkit-isolate;
}
.webkit-html-attribute-value {
- /* Keep this in sync with view-source.css (.webkit-html-attribute-value) */
- color: rgb(26, 26, 166);
- unicode-bidi: -webkit-isolate;
+ /* Keep this in sync with view-source.css (.webkit-html-attribute-value) */
+ color: rgb(26, 26, 166);
+ unicode-bidi: -webkit-isolate;
}
.devtools-link {
- color: rgb(17, 85, 204);
- text-decoration: underline;
+ color: rgb(17, 85, 204);
+ text-decoration: underline;
}
.devtools-link [is=ui-icon] {
- vertical-align: middle;
+ vertical-align: middle;
}
.devtools-link[data-keyboard-focus="true"]:focus {
- outline-width: unset;
+ outline-width: unset;
}
.devtools-link:not(.devtools-link-prevent-click) {
- cursor: pointer;
+ cursor: pointer;
}
.-theme-with-dark-background .devtools-link,
:host-context(.-theme-with-dark-background) .devtools-link {
- color: hsl(0, 0%, 67%);
+ color: hsl(0, 0%, 67%);
}
/* Default CodeMirror Theme */
-.cm-negative {color: #d44;}
-.cm-positive {color: #292;}
-.cm-header, .cm-strong {font-weight: bold;}
-.cm-em {font-style: italic;}
-.cm-link {text-decoration: underline;}
-.cm-strikethrough {text-decoration: line-through;}
+.cm-negative { color: #d44; }
+.cm-positive { color: #292; }
-.cm-invalidchar {color: #f00;}
+.cm-header,
+.cm-strong { font-weight: bold; }
+.cm-em { font-style: italic; }
+.cm-link { text-decoration: underline; }
+.cm-strikethrough { text-decoration: line-through; }
-.cm-header {color: blue;}
-.cm-quote {color: #090;}
+.cm-invalidchar { color: #f00; }
-.cm-keyword {color: #708;}
-.cm-atom {color: #219;}
-.cm-number {color: #164;}
-.cm-def {color: #00f;}
-.cm-variable-2 {color: #05a;}
-.cm-variable-3, .cm-type {color: #085;}
-.cm-comment {color: #a50;}
-.cm-string {color: #a11;}
-.cm-string-2 {color: #f50;}
-.cm-meta {color: #555;}
-.cm-qualifier {color: #555;}
-.cm-builtin {color: #30a;}
-.cm-bracket {color: #997;}
-.cm-tag {color: #170;}
-.cm-attribute {color: #00c;}
-.cm-hr {color: #999;}
-.cm-link {color: #00c;}
+.cm-header { color: blue; }
+.cm-quote { color: #090; }
-.cm-error {color: #f00;}
+.cm-keyword { color: #708; }
+.cm-atom { color: #219; }
+.cm-number { color: #164; }
+.cm-def { color: #00f; }
+.cm-variable-2 { color: #05a; }
+
+.cm-variable-3,
+.cm-type { color: #085; }
+.cm-comment { color: #a50; }
+.cm-string { color: #a11; }
+.cm-string-2 { color: #f50; }
+.cm-meta { color: #555; }
+.cm-qualifier { color: #555; }
+.cm-builtin { color: #30a; }
+.cm-bracket { color: #997; }
+.cm-tag { color: #170; }
+.cm-attribute { color: #00c; }
+.cm-hr { color: #999; }
+.cm-link { color: #00c; }
+
+.cm-error { color: #f00; }
@media (forced-colors: active) {
- .devtools-link:not(.devtools-link-prevent-click) {
- forced-color-adjust: none;
- color: LinkText;
- }
- .devtools-link[data-keyboard-focus="true"]:focus {
- background: Highlight;
- color: HighlightText;
- }
+ .devtools-link:not(.devtools-link-prevent-click) {
+ forced-color-adjust: none;
+ color: linktext;
+ }
+
+ .devtools-link[data-keyboard-focus="true"]:focus {
+ background: Highlight;
+ color: HighlightText;
+ }
}
diff --git a/front_end/ui/inspectorSyntaxHighlightDark.css b/front_end/ui/inspectorSyntaxHighlightDark.css
index 011ca04..91a556e 100644
--- a/front_end/ui/inspectorSyntaxHighlightDark.css
+++ b/front_end/ui/inspectorSyntaxHighlightDark.css
@@ -4,81 +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-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-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-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-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-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-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); }
-.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-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-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-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); }
-.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-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: #05a;}
-.cm-variable-3, .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-bracket {color: #997;}
-.cm-tag{color:var(--dom-tag-name-color);}
-.cm-attribute{color:rgb(97, 148, 198);}
-.cm-hr {color: #999;}
-.cm-link{color:rgb(159, 180, 214);}
+.cm-variable-2 { color: #05a; }
+
+.cm-variable-3,
+.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-bracket { color: #997; }
+.cm-tag { color: var(--dom-tag-name-color); }
+.cm-attribute { color: rgb(97, 148, 198); }
+.cm-hr { color: #999; }
+.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/inspectorViewTabbedPane.css b/front_end/ui/inspectorViewTabbedPane.css
index c461ce2..077252b 100644
--- a/front_end/ui/inspectorViewTabbedPane.css
+++ b/front_end/ui/inspectorViewTabbedPane.css
@@ -6,21 +6,21 @@
.tabbed-pane-header-tab,
.tabbed-pane-header-tab.selected {
- height: 26px;
- margin: 0;
- border: none;
- border-left: 2px solid transparent;
- border-right: 2px solid transparent;
+ height: 26px;
+ margin: 0;
+ border: none;
+ border-left: 2px solid transparent;
+ border-right: 2px solid transparent;
}
.tabbed-pane-header-tab.selected {
- border-width: 0 2px 0 2px;
+ border-width: 0 2px 0 2px;
}
.tabbed-pane-header-contents {
- margin-left: 0;
+ margin-left: 0;
}
.tabbed-pane-left-toolbar {
- margin-right: 0 !important;
+ margin-right: 0 !important;
}
diff --git a/front_end/ui/listWidget.css b/front_end/ui/listWidget.css
index 6c3be44..124a44d 100644
--- a/front_end/ui/listWidget.css
+++ b/front_end/ui/listWidget.css
@@ -5,122 +5,125 @@
*/
.list {
- flex: auto 0 1;
- overflow-y: auto;
- border: 1px solid rgb(231, 231, 231);
- flex-direction: column;
+ flex: auto 0 1;
+ overflow-y: auto;
+ border: 1px solid rgb(231, 231, 231);
+ flex-direction: column;
}
.list-separator {
- background: rgb(231, 231, 231);
- height: 1px;
+ background: rgb(231, 231, 231);
+ height: 1px;
}
.list-item {
- flex: none;
- min-height: 30px;
- display: flex;
- align-items: center;
- position: relative;
- overflow: hidden;
+ flex: none;
+ min-height: 30px;
+ display: flex;
+ align-items: center;
+ position: relative;
+ overflow: hidden;
}
.list-item:focus-within,
.list-item:hover {
- background: hsl(0, 0%, 96%);
+ background: hsl(0, 0%, 96%);
}
.list-widget-input-validation-error {
- color: var(--input-validation-error);
- margin: 0 5px;
+ color: var(--input-validation-error);
+ margin: 0 5px;
}
.controls-container {
- display: flex;
- flex-direction: row;
- justify-content: flex-end;
- align-items: stretch;
- pointer-events: none;
+ display: flex;
+ flex-direction: row;
+ justify-content: flex-end;
+ align-items: stretch;
+ pointer-events: none;
}
.controls-gradient {
- flex: 0 1 50px;
+ flex: 0 1 50px;
}
.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(0, 0%, 96%));
}
.controls-buttons {
- flex: none;
- display: flex;
- flex-direction: row;
- align-items: center;
- pointer-events: auto;
- visibility: hidden;
+ flex: none;
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ pointer-events: auto;
+ visibility: hidden;
}
.list-item:focus-within .controls-buttons,
.list-item:hover .controls-buttons {
- background-color: hsl(0, 0%, 96%);
- visibility: visible;
+ background-color: hsl(0, 0%, 96%);
+ visibility: visible;
}
.editor-container {
- display: flex;
- flex-direction: column;
- align-items: stretch;
- flex: none;
- background: hsl(0, 0%, 96%);
- overflow: hidden;
+ display: flex;
+ flex-direction: column;
+ align-items: stretch;
+ flex: none;
+ background: hsl(0, 0%, 96%);
+ overflow: hidden;
}
.editor-content {
- flex: auto;
- display: flex;
- flex-direction: column;
- align-items: stretch;
+ flex: auto;
+ display: flex;
+ flex-direction: column;
+ align-items: stretch;
}
.editor-buttons {
- flex: none;
- display: flex;
- flex-direction: row;
- align-items: center;
- justify-content: flex-start;
- padding: 5px;
+ flex: none;
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ justify-content: flex-start;
+ padding: 5px;
}
.editor-buttons > button {
- flex: none;
- margin-right: 10px;
+ flex: none;
+ margin-right: 10px;
}
.editor-content input {
- margin-right: 10px;
+ margin-right: 10px;
}
.editor-content input.error-input {
- background-color: white;
+ background-color: white;
}
@media (forced-colors: active) {
- .list-item:focus-within .controls-buttons,
- .list-item:hover .controls-buttons {
- background-color: Canvas;
- }
- .list-item:focus-within,
- .list-item:hover {
- forced-color-adjust: none;
- background: Highlight;
- }
- .list-item:focus-within *,
- .list-item:hover * {
- color: HighlightText;
- }
- .list-item:focus-within .controls-gradient,
- .list-item:hover .controls-gradient {
- background-image: unset;
- }
+ .list-item:focus-within .controls-buttons,
+ .list-item:hover .controls-buttons {
+ background-color: canvas;
+ }
+
+ .list-item:focus-within,
+ .list-item:hover {
+ forced-color-adjust: none;
+ background: Highlight;
+ }
+
+ .list-item:focus-within *,
+ .list-item:hover * {
+ color: HighlightText;
+ }
+
+ .list-item:focus-within .controls-gradient,
+ .list-item:hover .controls-gradient {
+ background-image: unset;
+ }
}
diff --git a/front_end/ui/popover.css b/front_end/ui/popover.css
index f2d8704..19fe4e4 100644
--- a/front_end/ui/popover.css
+++ b/front_end/ui/popover.css
@@ -5,16 +5,16 @@
*/
.widget {
- display: flex;
- background: white;
- border: 1px solid transparent;
- box-shadow: var(--drop-shadow);
- border-radius: 2px;
- overflow: auto;
- user-select: text;
- line-height: 11px;
+ display: flex;
+ background: white;
+ border: 1px solid transparent;
+ box-shadow: var(--drop-shadow);
+ border-radius: 2px;
+ overflow: auto;
+ user-select: text;
+ line-height: 11px;
}
.widget.has-padding {
- padding: 6px;
+ padding: 6px;
}
diff --git a/front_end/ui/progressIndicator.css b/front_end/ui/progressIndicator.css
index 6844f60..c8e3cc6 100644
--- a/front_end/ui/progressIndicator.css
+++ b/front_end/ui/progressIndicator.css
@@ -5,29 +5,29 @@
*/
.progress-indicator-shadow-stop-button {
- background-color: rgb(216, 0, 0) !important;
- border: 0;
- width: 10px;
- height: 12px;
- border-radius: 2px;
+ background-color: rgb(216, 0, 0) !important;
+ border: 0;
+ width: 10px;
+ height: 12px;
+ border-radius: 2px;
}
.progress-indicator-shadow-container {
- display: flex;
- flex: 1 0 auto;
- align-items: center;
+ display: flex;
+ flex: 1 0 auto;
+ align-items: center;
}
.progress-indicator-shadow-container .title {
- text-overflow: ellipsis;
- overflow: hidden;
- max-width: 150px;
- margin-right: 2px;
- color: #777;
+ text-overflow: ellipsis;
+ overflow: hidden;
+ max-width: 150px;
+ margin-right: 2px;
+ color: #777;
}
.progress-indicator-shadow-container progress {
- flex: auto;
- margin: 0 2px;
- width: 100px
+ flex: auto;
+ margin: 0 2px;
+ width: 100px;
}
diff --git a/front_end/ui/radioButton.css b/front_end/ui/radioButton.css
index 25b713e..17a7319 100644
--- a/front_end/ui/radioButton.css
+++ b/front_end/ui/radioButton.css
@@ -5,13 +5,14 @@
*/
::slotted(input.dt-radio-button) {
- --gradient-start: #FCFCFC;
- --gradient-end: #DFDFDF;
+ --gradient-start: #fcfcfc;
+ --gradient-end: #dfdfdf;
--radio-dot: url(Images/radioDot.png);
+
height: 17px;
width: 17px;
min-width: 17px;
- border: 1px solid #A5A5A5;
+ border: 1px solid #a5a5a5;
background-image: linear-gradient(to bottom, var(--gradient-start), var(--gradient-end));
border-radius: 8px;
-webkit-appearance: none;
@@ -20,8 +21,9 @@
}
::slotted(input.dt-radio-button:checked) {
- background: var(--radio-dot) center no-repeat,
- linear-gradient(to bottom, var(--gradient-start), var(--gradient-end));
+ background:
+ var(--radio-dot) center no-repeat,
+ linear-gradient(to bottom, var(--gradient-start), var(--gradient-end));
}
::slotted(input.dt-radio-button:focus) {
@@ -36,13 +38,13 @@
::slotted(input.dt-radio-button:checked:active),
::slotted(input.dt-radio-button:active:not(:disabled)) {
- --gradient-start: #C2C2C2;
- --gradient-end: #EFEFEF;
+ --gradient-start: #c2c2c2;
+ --gradient-end: #efefef;
}
:host-context(.-theme-with-dark-background) ::slotted(input.dt-radio-button:checked:active),
:host-context(.-theme-with-dark-background) ::slotted(input.dt-radio-button:active:not(:disabled)) {
- --gradient-start: #3D3D3D;
+ --gradient-start: #3d3d3d;
--gradient-end: #101010;
}
@@ -51,6 +53,7 @@
--gradient-start: ButtonFace;
--gradient-end: ButtonFace;
}
+
::slotted(input.dt-radio-button:checked) {
--gradient-start: Highlight;
--gradient-end: Highlight;
diff --git a/front_end/ui/remoteDebuggingTerminatedScreen.css b/front_end/ui/remoteDebuggingTerminatedScreen.css
index 84916e1..bfcc0a4 100644
--- a/front_end/ui/remoteDebuggingTerminatedScreen.css
+++ b/front_end/ui/remoteDebuggingTerminatedScreen.css
@@ -5,20 +5,21 @@
*/
.widget {
- padding: 20px;
+ padding: 20px;
}
-.message, .button {
- font-size: larger;
- white-space: pre;
- margin: 5px;
+.message,
+.button {
+ font-size: larger;
+ white-space: pre;
+ margin: 5px;
}
.button {
- text-align: center;
- margin-top: 10px;
+ text-align: center;
+ margin-top: 10px;
}
.reason {
- color: #8b0000;
+ color: #8b0000;
}
diff --git a/front_end/ui/reportView.css b/front_end/ui/reportView.css
index 6b2bd98..68b63cf 100644
--- a/front_end/ui/reportView.css
+++ b/front_end/ui/reportView.css
@@ -36,7 +36,8 @@
font-size: 15px;
}
-.report-url, .report-subtitle {
+.report-url,
+.report-subtitle {
font-size: 12px;
margin-top: 10px;
}
@@ -100,7 +101,8 @@
user-select: text;
}
-.image-wrapper, .image-wrapper img {
+.image-wrapper,
+.image-wrapper img {
max-width: 200px;
max-height: 200px;
display: block;
diff --git a/front_end/ui/rootView.css b/front_end/ui/rootView.css
index c6f8964..ddf3b17 100644
--- a/front_end/ui/rootView.css
+++ b/front_end/ui/rootView.css
@@ -5,11 +5,11 @@
*/
.root-view {
- background-color: white;
- overflow: hidden;
- position: absolute !important;
- left: 0;
- top: 0;
- right: 0;
- bottom: 0;
+ background-color: white;
+ overflow: hidden;
+ position: absolute !important;
+ left: 0;
+ top: 0;
+ right: 0;
+ bottom: 0;
}
diff --git a/front_end/ui/searchableView.css b/front_end/ui/searchableView.css
index 6ea9c1a..a579e08 100644
--- a/front_end/ui/searchableView.css
+++ b/front_end/ui/searchableView.css
@@ -5,138 +5,139 @@
*/
.search-bar {
- flex: 0 0 31px;
- background-color: #eee;
- border-top: 1px solid #ccc;
- display: flex;
- overflow: hidden;
- z-index: 0;
+ flex: 0 0 31px;
+ background-color: #eee;
+ border-top: 1px solid #ccc;
+ display: flex;
+ overflow: hidden;
+ z-index: 0;
}
.search-bar.replaceable {
- flex: 0 0 57px;
+ flex: 0 0 57px;
}
.search-replace {
- -webkit-appearance: none;
- border: 0;
- padding: 0 3px;
- margin: 0;
- flex: 1;
+ -webkit-appearance: none;
+ border: 0;
+ padding: 0 3px;
+ margin: 0;
+ flex: 1;
}
.search-replace:focus {
- outline: none;
+ outline: none;
}
.toolbar-search {
- display: flex;
- width: 100%;
+ display: flex;
+ width: 100%;
}
.toolbar-search > div {
- margin: 2px 2px;
- flex-shrink: 0;
+ margin: 2px 2px;
+ flex-shrink: 0;
}
.toolbar-search-inputs {
- flex-grow: 1;
- min-width: 150px;
+ flex-grow: 1;
+ min-width: 150px;
}
.toolbar-search-navigation-controls {
- align-self: stretch;
+ align-self: stretch;
}
.toolbar-search-navigation {
- display: inline-block;
- width: 20px;
- height: 20px;
- background-repeat: no-repeat;
- background-position: 4px 7px;
- border-left: 1px solid rgb(170, 170, 170);
- opacity: 0.3;
+ display: inline-block;
+ width: 20px;
+ height: 20px;
+ background-repeat: no-repeat;
+ background-position: 4px 7px;
+ border-left: 1px solid rgb(170, 170, 170);
+ opacity: 0.3;
}
.toolbar-search-navigation.enabled {
- opacity: 1.0;
+ opacity: 1;
}
.toolbar-search button.search-action-button {
- font-weight: 400;
- height: 22px;
- width: 87px;
+ font-weight: 400;
+ height: 22px;
+ width: 87px;
}
.toolbar-search-control {
- display: -webkit-flex;
- position: relative;
- background-color: white;
+ display: -webkit-flex;
+ position: relative;
+ background-color: white;
}
.toolbar-search-buttons {
- display: flex;
- flex-direction: column;
+ display: flex;
+ flex-direction: column;
}
.toolbar-replace-control,
#search-input-field {
- margin-top: 1px;
- line-height: 17px;
+ margin-top: 1px;
+ line-height: 17px;
}
-.toolbar-search-control, .toolbar-replace-control {
- border: 1px solid rgb(163, 163, 163);
- height: 22px;
- border-radius: 2px;
- width: 100%;
- margin-top: 2px;
- margin-bottom: 2px;
+.toolbar-search-control,
+.toolbar-replace-control {
+ border: 1px solid rgb(163, 163, 163);
+ height: 22px;
+ border-radius: 2px;
+ width: 100%;
+ margin-top: 2px;
+ margin-bottom: 2px;
}
.toolbar-search-navigation.enabled:active {
- background-position: 4px 7px, 0 0;
+ background-position: 4px 7px, 0 0;
}
.toolbar-search-navigation.toolbar-search-navigation-prev {
- background-image: url(Images/searchPrev.png);
- border-left: 1px solid rgb(163, 163, 163);
+ background-image: url(Images/searchPrev.png);
+ border-left: 1px solid rgb(163, 163, 163);
}
:host-context(.-theme-with-dark-background) .toolbar-search-navigation {
- -webkit-filter: invert(90%);
+ -webkit-filter: invert(90%);
}
.toolbar-search-navigation.toolbar-search-navigation-prev.enabled:active {
- background-image: url(Images/searchPrev.png), #f2f2f2;
+ background-image: url(Images/searchPrev.png), #f2f2f2;
}
.toolbar-search-navigation.toolbar-search-navigation-next {
- background-image: url(Images/searchNext.png);
- border-left: 1px solid rgb(230, 230, 230);
+ background-image: url(Images/searchNext.png);
+ border-left: 1px solid rgb(230, 230, 230);
}
.toolbar-search-navigation.toolbar-search-navigation-next.enabled:active {
- background-image: url(Images/searchNext.png), #f2f2f2;
+ background-image: url(Images/searchNext.png), #f2f2f2;
}
.search-results-matches {
- display: inline-block;
- text-align: right;
- padding: 0 4px;
- color: rgb(165, 165, 165);
- align-self: center;
+ display: inline-block;
+ text-align: right;
+ padding: 0 4px;
+ color: rgb(165, 165, 165);
+ align-self: center;
}
.first-row-buttons {
- display: flex;
- justify-content: space-between;
+ display: flex;
+ justify-content: space-between;
}
.toolbar-search > .replace-toggle-toolbar {
- margin: 2px -2px 0 0;
+ margin: 2px -2px 0 0;
}
.toolbar-search-options {
- margin: 0 auto;
+ margin: 0 auto;
}
diff --git a/front_end/ui/segmentedButton.css b/front_end/ui/segmentedButton.css
index 725b487..e2f8622 100644
--- a/front_end/ui/segmentedButton.css
+++ b/front_end/ui/segmentedButton.css
@@ -22,7 +22,7 @@
}
.segmented-button-segment:hover {
- background-color: #F4F4F4;
+ background-color: #f4f4f4;
color: #333;
}
@@ -40,15 +40,16 @@
.segmented-button-segment.segmented-button-segment-selected {
background-color: hsl(218, 81%, 59%);
border-color: transparent;
- color: #FAFAFA;
+ color: #fafafa;
}
.segmented-button-segment.segmented-button-segment-selected:hover {
background-color: hsl(218, 81%, 62%);
- color: #FFF;
+ color: #fff;
}
/* Remove a border between the selected button and its siblin */
+
.segmented-button-segment-selected + .segmented-button-segment {
border-left-color: transparent;
}
diff --git a/front_end/ui/slider.css b/front_end/ui/slider.css
index b2c833c..801f441 100644
--- a/front_end/ui/slider.css
+++ b/front_end/ui/slider.css
@@ -5,46 +5,48 @@
*/
.dt-range-input {
- -webkit-appearance: none;
- margin: 0;
- padding: 0;
- height: 10px;
- width: 88px;
- outline: none;
- background: none;
+ -webkit-appearance: none;
+ margin: 0;
+ padding: 0;
+ height: 10px;
+ width: 88px;
+ outline: none;
+ background: none;
}
-.dt-range-input::-webkit-slider-thumb, -theme-preserve {
- -webkit-appearance: none;
- margin: 0;
- padding: 0;
- border: 0;
- width: 12px;
- height: 12px;
- margin-top: -5px;
- border-radius: 50%;
- background-color: #4285F4;
+.dt-range-input::-webkit-slider-thumb,
+-theme-preserve {
+ -webkit-appearance: none;
+ margin: 0;
+ padding: 0;
+ border: 0;
+ width: 12px;
+ height: 12px;
+ margin-top: -5px;
+ border-radius: 50%;
+ background-color: #4285f4;
}
.dt-range-input::-webkit-slider-runnable-track {
- -webkit-appearance: none;
- margin: 0;
- padding: 0;
- width: 100%;
- height: 2px;
- background-color: rgba(0, 0, 0, 0.26);
+ -webkit-appearance: none;
+ margin: 0;
+ padding: 0;
+ width: 100%;
+ height: 2px;
+ background-color: rgba(0, 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);
+.dt-range-input:focus::-webkit-slider-thumb,
+-theme-preserve {
+ box-shadow: 0 0 0 2px rgba(66, 133, 244, 0.4);
}
.dt-range-input:disabled::-webkit-slider-thumb {
- background-color: #bdbdbd;
+ background-color: #bdbdbd;
}
@media (forced-colors: active) {
- .dt-range-input {
- forced-color-adjust: none;
- }
+ .dt-range-input {
+ forced-color-adjust: none;
+ }
}
diff --git a/front_end/ui/smallBubble.css b/front_end/ui/smallBubble.css
index 856890b..3b7b695 100644
--- a/front_end/ui/smallBubble.css
+++ b/front_end/ui/smallBubble.css
@@ -5,33 +5,33 @@
*/
div {
- display: inline-block;
- height: 14px;
- vertical-align: middle;
- white-space: nowrap;
- padding: 1px 4px;
- text-align: left;
- font-size: 11px;
- line-height: normal;
- font-weight: bold;
- text-shadow: none;
- color: white;
- margin-top: -1px;
- border-radius: 7px;
+ display: inline-block;
+ height: 14px;
+ vertical-align: middle;
+ white-space: nowrap;
+ padding: 1px 4px;
+ text-align: left;
+ font-size: 11px;
+ line-height: normal;
+ font-weight: bold;
+ text-shadow: none;
+ color: white;
+ margin-top: -1px;
+ border-radius: 7px;
}
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 b711c07..f9f11be 100644
--- a/front_end/ui/softContextMenu.css
+++ b/front_end/ui/softContextMenu.css
@@ -5,156 +5,168 @@
*/
.soft-context-menu {
- overflow-y: auto;
- min-width: 160px !important;
- /* NOTE: Keep padding in sync with padding adjustment in SoftContextMenu.js */
- padding: 4px 0 4px 0;
- border: 1px solid #b9b9b9;
- background-color: #FFF;
- box-shadow: var(--drop-shadow);
- --context-menu-hover-bg: #ebebeb;
- --context-menu-hover-color: #222;
- --context-menu-seperator-color: var(--divider-color);
+ overflow-y: auto;
+ min-width: 160px !important;
+
+ /* NOTE: Keep padding in sync with padding adjustment in SoftContextMenu.js */
+ padding: 4px 0 4px 0;
+ border: 1px solid #b9b9b9;
+ background-color: #fff;
+ box-shadow: var(--drop-shadow);
+
+ --context-menu-hover-bg: #ebebeb;
+ --context-menu-hover-color: #222;
+ --context-menu-seperator-color: var(--divider-color);
}
: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-radius: 4px;
- background-color: rgb(240, 240, 240);
- box-shadow: 0 5px 10px rgba(0, 0, 0, 0.25);
- --context-menu-hover-color: #FFF;
- --context-menu-seperator-color: rgb(222, 222, 222);
+ border: 1px solid rgba(196, 196, 196, 0.9);
+ border-top: 1px solid rgba(196, 196, 196, 0.5);
+ border-radius: 4px;
+ background-color: rgb(240, 240, 240);
+ box-shadow: 0 5px 10px rgba(0, 0, 0, 0.25);
+
+ --context-menu-hover-color: #fff;
+ --context-menu-seperator-color: rgb(222, 222, 222);
}
:host-context(.-theme-with-dark-background) .soft-context-menu {
- --context-menu-hover-bg: var(--selection-bg-color);
- --context-menu-hover-color: var(--selection-fg-color);
- border: none;
+ --context-menu-hover-bg: var(--selection-bg-color);
+ --context-menu-hover-color: var(--selection-fg-color);
+
+ border: none;
}
.soft-context-menu-item {
- display: flex;
- width: 100%;
- font-size: 12px;
- border-top: 1px solid transparent;
- border-bottom: 1px solid transparent;
- padding: 2px 7px 2px 8px;
- margin: 0 13px 0 0;
- white-space: nowrap;
+ display: flex;
+ width: 100%;
+ font-size: 12px;
+ border-top: 1px solid transparent;
+ border-bottom: 1px solid transparent;
+ padding: 2px 7px 2px 8px;
+ margin: 0 13px 0 0;
+ white-space: nowrap;
}
.soft-context-menu-disabled {
- color: #999;
- pointer-events: none;
+ color: #999;
+ pointer-events: none;
}
.soft-context-menu-separator {
- height: 10px;
- margin: 0 1px;
+ height: 10px;
+ margin: 0 1px;
}
.soft-context-menu-separator > .separator-line {
- margin: 0;
- height: 5px;
- border-bottom: 1px solid var(--context-menu-seperator-color);
- pointer-events: none;
+ margin: 0;
+ height: 5px;
+ border-bottom: 1px solid var(--context-menu-seperator-color);
+ pointer-events: none;
}
.soft-context-menu-item-mouse-over {
- border-top: 1px solid var(--context-menu-hover-bg);
- border-bottom: 1px solid var(--context-menu-hover-bg);
- background-color: var(--context-menu-hover-bg);
- color: var(--context-menu-hover-color);
+ border-top: 1px solid var(--context-menu-hover-bg);
+ border-bottom: 1px solid var(--context-menu-hover-bg);
+ background-color: var(--context-menu-hover-bg);
+ color: var(--context-menu-hover-color);
}
: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%));
+ border-top: 1px solid transparent;
+ border-bottom: 1px solid transparent;
+ background-image: linear-gradient(to right, hsl(214, 81%, 60%), hsl(214, 100%, 56%));
}
:host:host-context(.platform-mac):host-context(html:not(.-theme-with-dark-background)) .separator-line {
- border-width: 2px;
+ border-width: 2px;
}
.soft-context-menu-item-submenu-arrow {
- pointer-events: none;
- font-size: 11px;
- text-align: right;
- align-self: center;
- margin-left: auto;
+ pointer-events: none;
+ font-size: 11px;
+ text-align: right;
+ align-self: center;
+ margin-left: auto;
}
.soft-context-menu-item-mouse-over .soft-context-menu-item-checkmark {
- color: var(--selection-fg-color);
+ color: var(--selection-fg-color);
}
.soft-context-menu-custom-item {
- display: inline-flex;
- justify-content: center;
- align-items: center;
- flex: auto;
+ display: inline-flex;
+ justify-content: center;
+ align-items: center;
+ flex: auto;
}
.soft-context-menu-shortcut {
- color: gray;
- pointer-events: none;
- flex: 1 1 auto;
- text-align: right;
- padding-left: 10px;
+ color: gray;
+ pointer-events: none;
+ flex: 1 1 auto;
+ text-align: right;
+ padding-left: 10px;
}
.soft-context-menu-item-mouse-over .soft-context-menu-shortcut {
- color: inherit;
+ color: inherit;
}
.checkmark {
- opacity: 0.7;
- pointer-events: none;
- margin: auto 5px auto 0px;
+ opacity: 0.7;
+ pointer-events: none;
+ margin: auto 5px auto 0;
}
:host-context(.-theme-with-dark-background) .checkmark {
- filter: invert(80%);
+ filter: invert(80%);
}
.soft-context-menu-item-mouse-over .checkmark {
- opacity: 1;
- filter: none;
+ opacity: 1;
+ filter: none;
}
@media (forced-colors: active) {
- .soft-context-menu-item {
- forced-color-adjust: none;
- }
- .soft-context-menu-item-mouse-over {
- border-top-color: Highlight;
- border-bottom-color: Highlight;
- background-color: Highlight;
- color: HighlightText;
- }
- .soft-context-menu-shortcut {
- color: ButtonText;
- }
- .soft-context-menu-item-mouse-over .soft-context-menu-shortcut {
- color: HighlightText;
- }
- .soft-context-menu[data-keyboard-focus="true"]:focus {
- forced-color-adjust: none;
- background: Canvas;
- border-color: Highlight;
- }
- .soft-context-menu-separator > .separator-line {
- border-bottom-color: ButtonText;
- }
- .checkmark {
- opacity: 1;
- }
- .spritesheet-smallicons:not(.icon-mask) {
- filter: invert(100%);
- }
- .soft-context-menu-item-mouse-over .spritesheet-smallicons:not(.icon-mask) {
- filter: invert(0);
- }
+ .soft-context-menu-item {
+ forced-color-adjust: none;
+ }
+
+ .soft-context-menu-item-mouse-over {
+ border-top-color: Highlight;
+ border-bottom-color: Highlight;
+ background-color: Highlight;
+ color: HighlightText;
+ }
+
+ .soft-context-menu-shortcut {
+ color: ButtonText;
+ }
+
+ .soft-context-menu-item-mouse-over .soft-context-menu-shortcut {
+ color: HighlightText;
+ }
+
+ .soft-context-menu[data-keyboard-focus="true"]:focus {
+ forced-color-adjust: none;
+ background: canvas;
+ border-color: Highlight;
+ }
+
+ .soft-context-menu-separator > .separator-line {
+ border-bottom-color: ButtonText;
+ }
+
+ .checkmark {
+ opacity: 1;
+ }
+
+ .spritesheet-smallicons:not(.icon-mask) {
+ filter: invert(100%);
+ }
+
+ .soft-context-menu-item-mouse-over .spritesheet-smallicons:not(.icon-mask) {
+ filter: invert(0);
+ }
}
diff --git a/front_end/ui/softDropDown.css b/front_end/ui/softDropDown.css
index b7d4e99..c7e25f7 100644
--- a/front_end/ui/softDropDown.css
+++ b/front_end/ui/softDropDown.css
@@ -5,33 +5,35 @@
*/
.item.disabled {
- opacity: 0.5;
+ opacity: 0.5;
}
.item-list {
- background-color: white;
- box-shadow: var(--drop-shadow);
- overflow-x: hidden;
- overflow-y: auto;
- width: 100%;
+ background-color: white;
+ box-shadow: var(--drop-shadow);
+ overflow-x: hidden;
+ overflow-y: auto;
+ width: 100%;
}
.item.highlighted {
- color: var(--selection-fg-color);
- background-color: var(--selection-bg-color);
+ color: var(--selection-fg-color);
+ background-color: var(--selection-bg-color);
}
@media (forced-colors: active) {
- .item.disabled {
- opacity: 1;
- }
- .item-list {
- border: 1px solid ButtonText;
- background-color: ButtonFace;
- }
- .item.highlighted {
- forced-color-adjust: none;
- color: HighlightText;
- background-color: Highlight;
- }
+ .item.disabled {
+ opacity: 1;
+ }
+
+ .item-list {
+ border: 1px solid ButtonText;
+ background-color: ButtonFace;
+ }
+
+ .item.highlighted {
+ forced-color-adjust: none;
+ color: HighlightText;
+ background-color: Highlight;
+ }
}
diff --git a/front_end/ui/softDropDownButton.css b/front_end/ui/softDropDownButton.css
index ed3aa98..0fcbc58 100644
--- a/front_end/ui/softDropDownButton.css
+++ b/front_end/ui/softDropDownButton.css
@@ -3,44 +3,47 @@
* Use of this source code is governed by a BSD-style license that can be
* found in the LICENSE file.
*/
+
button.soft-dropdown {
- height: 26px;
- text-align: left;
- position: relative;
- border: none;
- background: none;
+ height: 26px;
+ text-align: left;
+ position: relative;
+ border: none;
+ background: none;
}
button.soft-dropdown[disabled] {
- opacity: .5;
+ opacity: 0.5;
}
button.soft-dropdown > .title {
- padding-right: 5px;
- width: 120px;
- overflow: hidden;
- text-overflow: ellipsis;
+ padding-right: 5px;
+ width: 120px;
+ overflow: hidden;
+ text-overflow: ellipsis;
}
button.soft-dropdown[data-keyboard-focus="true"]:focus::before {
- content: "";
- position: absolute;
- top: 2px;
- left: 2px;
- right: 2px;
- bottom: 2px;
- border-radius: 2px;
- background: rgba(0, 0, 0, 0.08);
+ content: "";
+ position: absolute;
+ top: 2px;
+ left: 2px;
+ right: 2px;
+ bottom: 2px;
+ border-radius: 2px;
+ background: rgba(0, 0, 0, 0.08);
}
@media (forced-colors: active) {
- button.soft-dropdown {
- border: 1px solid ButtonText;
- }
- button.soft-dropdown[disabled] {
- opacity: 1;
- }
- button.soft-dropdown:disabled > .smallicon-triangle-down {
- background-color: GrayText;
- }
+ button.soft-dropdown {
+ border: 1px solid ButtonText;
+ }
+
+ button.soft-dropdown[disabled] {
+ opacity: 1;
+ }
+
+ button.soft-dropdown:disabled > .smallicon-triangle-down {
+ background-color: GrayText;
+ }
}
diff --git a/front_end/ui/splitWidget.css b/front_end/ui/splitWidget.css
index b4f60ae..7de1bc0 100644
--- a/front_end/ui/splitWidget.css
+++ b/front_end/ui/splitWidget.css
@@ -27,69 +27,70 @@
*/
:host {
- overflow: hidden;
+ overflow: hidden;
}
.shadow-split-widget {
- display: flex;
- overflow: hidden;
+ display: flex;
+ overflow: hidden;
}
.shadow-split-widget-contents {
- display: flex;
- position: relative;
- flex-direction: column;
- contain: layout size style;
+ display: flex;
+ position: relative;
+ flex-direction: column;
+ contain: layout size style;
}
.shadow-split-widget-sidebar {
- flex: none;
+ flex: none;
}
-.shadow-split-widget-main, .shadow-split-widget-sidebar.maximized {
- flex: auto;
+.shadow-split-widget-main,
+.shadow-split-widget-sidebar.maximized {
+ flex: auto;
}
.shadow-split-widget.hbox > .shadow-split-widget-resizer {
- position: absolute;
- top: 0;
- bottom: 0;
- width: 6px;
- z-index: 500;
+ position: absolute;
+ top: 0;
+ bottom: 0;
+ width: 6px;
+ z-index: 500;
}
.shadow-split-widget.vbox > .shadow-split-widget-resizer {
- position: absolute;
- left: 0;
- right: 0;
- height: 6px;
- z-index: 500;
+ position: absolute;
+ left: 0;
+ right: 0;
+ height: 6px;
+ z-index: 500;
}
.shadow-split-widget.vbox > .shadow-split-widget-sidebar.no-default-splitter {
- border: 0 !important;
+ border: 0 !important;
}
.shadow-split-widget.vbox > .shadow-split-widget-sidebar:not(.maximized) {
- border: 0;
- border-top: 1px solid var(--divider-color);
+ border: 0;
+ border-top: 1px solid var(--divider-color);
}
.shadow-split-widget.vbox > .shadow-split-widget-sidebar:first-child:not(.maximized) {
- border: 0;
- border-bottom: 1px solid var(--divider-color);
+ border: 0;
+ border-bottom: 1px solid var(--divider-color);
}
.shadow-split-widget.hbox > .shadow-split-widget-sidebar:not(.maximized) {
- border: 0;
- border-left: 1px solid var(--divider-color);
+ border: 0;
+ border-left: 1px solid var(--divider-color);
}
.shadow-split-widget.hbox > .shadow-split-widget-sidebar:first-child:not(.maximized) {
- border: 0;
- border-right: 1px solid var(--divider-color);
+ border: 0;
+ border-right: 1px solid var(--divider-color);
}
:host-context(.disable-resizer-for-elements-hack) .shadow-split-widget-resizer {
- pointer-events: none;
+ pointer-events: none;
}
diff --git a/front_end/ui/suggestBox.css b/front_end/ui/suggestBox.css
index b601721..423d935 100644
--- a/front_end/ui/suggestBox.css
+++ b/front_end/ui/suggestBox.css
@@ -29,72 +29,72 @@
*/
:host {
- display: flex;
- flex: auto;
+ display: flex;
+ flex: auto;
}
.suggest-box {
- flex: auto;
- background-color: #FFFFFF;
- pointer-events: auto;
- margin-left: -3px;
- box-shadow: var(--drop-shadow);
- overflow-x: hidden;
+ flex: auto;
+ background-color: #fff;
+ pointer-events: auto;
+ margin-left: -3px;
+ box-shadow: var(--drop-shadow);
+ overflow-x: hidden;
}
.suggest-box-content-item {
- padding: 1px 0 1px 1px;
- margin: 0;
- border: 1px solid transparent;
- white-space: nowrap;
- display: flex;
+ padding: 1px 0 1px 1px;
+ margin: 0;
+ border: 1px solid transparent;
+ white-space: nowrap;
+ display: flex;
}
.suggest-box-content-item.secondary {
- background-color: #f9f9f9;
+ background-color: #f9f9f9;
}
.suggestion-title {
- overflow: hidden;
- text-overflow: ellipsis;
+ overflow: hidden;
+ text-overflow: ellipsis;
}
.suggestion-title span {
- white-space: pre;
+ white-space: pre;
}
.suggestion-subtitle {
- flex: auto;
- text-align: right;
- color: #999;
- margin-right: 3px;
- overflow: hidden;
- text-overflow: ellipsis;
+ flex: auto;
+ text-align: right;
+ color: #999;
+ margin-right: 3px;
+ overflow: hidden;
+ text-overflow: ellipsis;
}
.suggestion-icon {
- user-select: none;
- align-self: center;
- flex-shrink: 0;
+ user-select: none;
+ align-self: center;
+ flex-shrink: 0;
}
.suggest-box-content-item .query {
- font-weight: bold;
+ font-weight: bold;
}
.suggest-box-content-item .spacer {
- display: inline-block;
- width: 20px;
+ display: inline-block;
+ width: 20px;
}
.suggest-box-content-item.selected {
- background-color: var(--selection-bg-color);
+ background-color: var(--selection-bg-color);
}
.suggest-box-content-item.selected > span {
- color: var(--selection-fg-color);
+ color: var(--selection-fg-color);
}
.suggest-box-content-item:hover:not(.selected) {
- background-color: var(--item-hover-color);
+ background-color: var(--item-hover-color);
}
diff --git a/front_end/ui/tabbedPane.css b/front_end/ui/tabbedPane.css
index 4a7827f..de16dda 100644
--- a/front_end/ui/tabbedPane.css
+++ b/front_end/ui/tabbedPane.css
@@ -29,301 +29,308 @@
*/
.tabbed-pane {
- flex: auto;
- overflow: hidden;
+ flex: auto;
+ overflow: hidden;
}
.tabbed-pane-content {
- position: relative;
- overflow: auto;
- flex: auto;
- display: flex;
- flex-direction: column;
+ position: relative;
+ overflow: auto;
+ flex: auto;
+ display: flex;
+ flex-direction: column;
}
.tabbed-pane-content.has-no-tabs {
- background-color: lightgray;
+ background-color: lightgray;
}
.tabbed-pane-placeholder {
- font-size: 14px;
- text-align: center;
- width: fit-content;
- margin: 20px auto 0px;
- text-shadow: rgba(255, 255, 255, 0.75) 0 1px 0;
- line-height: 28px;
- overflow: hidden;
+ font-size: 14px;
+ text-align: center;
+ width: fit-content;
+ margin: 20px auto 0;
+ text-shadow: rgba(255, 255, 255, 0.75) 0 1px 0;
+ line-height: 28px;
+ overflow: hidden;
}
.tabbed-pane-placeholder-row {
- display: flex;
- white-space: nowrap;
- padding: 0 5px;
- margin: 2px;
+ display: flex;
+ white-space: nowrap;
+ padding: 0 5px;
+ margin: 2px;
}
.tabbed-pane-placeholder-row[data-keyboard-focus="true"]:focus {
- outline-width: unset;
+ outline-width: unset;
}
.tabbed-pane-placeholder-key {
- flex: 1;
- text-align: right;
- padding-right: 14px;
- overflow: hidden;
- text-overflow: ellipsis;
+ flex: 1;
+ text-align: right;
+ padding-right: 14px;
+ overflow: hidden;
+ text-overflow: ellipsis;
}
.tabbed-pane-no-shortcut {
- flex: 1;
- text-align: center;
+ flex: 1;
+ text-align: center;
}
.tabbed-pane-placeholder-value {
- flex: 1;
- text-align: left;
- padding-left: 14px;
+ flex: 1;
+ text-align: left;
+ padding-left: 14px;
}
.tabbed-pane-header {
- display: flex;
- flex: 0 0 27px;
- border-bottom: 1px solid #ccc;
- overflow: visible;
- width: 100%;
- background-color: var(--toolbar-bg-color);
+ display: flex;
+ flex: 0 0 27px;
+ border-bottom: 1px solid #ccc;
+ overflow: visible;
+ width: 100%;
+ background-color: var(--toolbar-bg-color);
}
.tabbed-pane-header-contents {
- flex: auto;
- pointer-events: none;
- margin-left: 0;
- position: relative;
+ flex: auto;
+ pointer-events: none;
+ margin-left: 0;
+ position: relative;
}
.tabbed-pane-header-contents > * {
- pointer-events: initial;
+ pointer-events: initial;
}
.tabbed-pane-header-tab-icon {
- min-width: 14px;
- display: flex;
- align-items: center;
- margin-right: 2px;
+ min-width: 14px;
+ display: flex;
+ align-items: center;
+ margin-right: 2px;
}
.tabbed-pane-header-tab {
- float: left;
- padding: 2px 0.8em;
- height: 26px;
- line-height: 15px;
- white-space: nowrap;
- cursor: default;
- display: flex;
- align-items: center;
- color: #5a5a5a;
+ float: left;
+ padding: 2px 0.8em;
+ height: 26px;
+ line-height: 15px;
+ white-space: nowrap;
+ cursor: default;
+ display: flex;
+ align-items: center;
+ color: #5a5a5a;
}
.tabbed-pane-header-tab.closeable {
- padding-right: 4px;
+ padding-right: 4px;
}
.tabbed-pane-header-tab:hover,
.tabbed-pane-shadow .tabbed-pane-header-tab[data-keyboard-focus="true"]:focus {
- color: #333;
- background-color: var(--toolbar-hover-bg-color);
+ color: #333;
+ background-color: var(--toolbar-hover-bg-color);
}
.tabbed-pane-header-tab-title {
- text-overflow: ellipsis;
- overflow: hidden;
+ text-overflow: ellipsis;
+ overflow: hidden;
}
.tabbed-pane-header-tab.measuring {
- visibility: hidden;
+ visibility: hidden;
}
.tabbed-pane-header-tab.selected {
- border-bottom: none;
+ border-bottom: none;
}
.tabbed-pane-header-tab.selected {
- background-color: var(--tab-selected-bg-color);
- color: var(--tab-selected-fg-color);
+ background-color: var(--tab-selected-bg-color);
+ color: var(--tab-selected-fg-color);
}
.tabbed-pane-header-tab.dragging {
- position: relative;
- box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.37);
- background-color: #e5e5e5;
+ position: relative;
+ box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.37);
+ background-color: #e5e5e5;
}
.tabbed-pane-header-tab .tabbed-pane-close-button {
- margin: 0 -3px 0 4px;
- visibility: hidden;
+ margin: 0 -3px 0 4px;
+ visibility: hidden;
}
.tabbed-pane-header-tab:hover .tabbed-pane-close-button,
.tabbed-pane-header-tab.selected .tabbed-pane-close-button {
- visibility: visible;
+ visibility: visible;
}
.tabbed-pane-header-tabs-drop-down-container {
- float: left;
- opacity: 0.8;
- cursor: pointer;
- display: flex;
- align-items: center;
- height: 100%;
+ float: left;
+ opacity: 0.8;
+ cursor: pointer;
+ display: flex;
+ align-items: center;
+ height: 100%;
}
.tabbed-pane-header-tabs-drop-down-container > .chevron-icon {
- background-color: hsla(0,0%,20%,1);
- display: block;
+ background-color: hsla(0, 0%, 20%, 1);
+ 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: rgba(0, 0, 0, 0.08);
}
.tabbed-pane-header-tabs-drop-down-container.measuring {
- visibility: hidden;
+ visibility: hidden;
}
.tabbed-pane-header-tabs-drop-down-container:active {
- opacity: 0.8;
+ opacity: 0.8;
}
/* Web page style */
.tabbed-pane-shadow.vertical-tab-layout {
- flex-direction: row !important;
+ flex-direction: row !important;
}
.tabbed-pane-shadow.vertical-tab-layout .tabbed-pane-header {
- background-color: transparent;
- border: none transparent !important;
- width: auto;
- flex: 0 0 auto;
- flex-direction: column;
- padding-top: 10px;
- overflow: hidden;
+ background-color: transparent;
+ border: none transparent !important;
+ width: auto;
+ flex: 0 0 auto;
+ flex-direction: column;
+ padding-top: 10px;
+ overflow: hidden;
}
.tabbed-pane-shadow.vertical-tab-layout .tabbed-pane-content {
- padding: 10px 10px 10px 0;
- overflow-x: hidden;
+ padding: 10px 10px 10px 0;
+ overflow-x: hidden;
}
.tabbed-pane-shadow.vertical-tab-layout .tabbed-pane-header-contents {
- margin: 0;
- flex: none;
+ margin: 0;
+ flex: none;
}
.tabbed-pane-shadow.vertical-tab-layout .tabbed-pane-header-tabs {
- display: flex;
- flex-direction: column;
- width: 120px;
+ display: flex;
+ flex-direction: column;
+ width: 120px;
}
.tabbed-pane-shadow.vertical-tab-layout .tabbed-pane-header-tab {
- background-color: transparent;
- border: none transparent;
- font-weight: normal;
- text-shadow: none;
- color: #777;
- height: 26px;
- padding-left: 10px;
- border-left: 6px solid transparent;
- margin: 0;
- display: flex;
- align-items: center;
+ background-color: transparent;
+ border: none transparent;
+ font-weight: normal;
+ text-shadow: none;
+ color: #777;
+ height: 26px;
+ padding-left: 10px;
+ border-left: 6px solid transparent;
+ margin: 0;
+ display: flex;
+ align-items: center;
}
.tabbed-pane-shadow.vertical-tab-layout .tabbed-pane-header-tab:not(.selected) {
- cursor: pointer !important;
+ cursor: pointer !important;
}
.tabbed-pane-shadow.vertical-tab-layout .tabbed-pane-header-tab.selected {
- color: inherit;
- border: none transparent;
- border-left: 6px solid #666;
+ color: inherit;
+ border: none transparent;
+ border-left: 6px solid #666;
}
.tabbed-pane-tab-slider {
- height: 2px;
- position: absolute;
- bottom: -1px;
- background-color: var(--accent-color);
- left: 0;
- z-index: 50;
- transform-origin: 0 100%;
- transition: transform 150ms cubic-bezier(0, 0, 0.2, 1);
- visibility: hidden;
+ height: 2px;
+ position: absolute;
+ bottom: -1px;
+ background-color: var(--accent-color);
+ left: 0;
+ z-index: 50;
+ transform-origin: 0 100%;
+ transition: transform 150ms cubic-bezier(0, 0, 0.2, 1);
+ visibility: hidden;
}
:host-context(.-theme-with-dark-background) .tabbed-pane-tab-slider {
- display: none;
+ display: none;
}
@media (-webkit-min-device-pixel-ratio: 1.1) {
- .tabbed-pane-tab-slider {
- border-top: none;
- }
+ .tabbed-pane-tab-slider {
+ border-top: none;
+ }
}
.tabbed-pane-tab-slider.enabled {
- visibility: visible;
+ visibility: visible;
}
.tabbed-pane-header-tab.disabled {
- opacity: 0.5;
- pointer-events: none;
+ opacity: 0.5;
+ pointer-events: none;
}
.tabbed-pane-left-toolbar {
- margin-right: -4px;
- flex: none;
+ margin-right: -4px;
+ flex: none;
}
.tabbed-pane-right-toolbar {
- margin-left: -4px;
- flex: none;
+ margin-left: -4px;
+ flex: none;
}
@media (forced-colors: active) {
- .tabbed-pane-tab-slider {
- forced-color-adjust: none;
- background-color: Highlight;
- }
- .tabbed-pane-header {
- forced-color-adjust: none;
- border-bottom: 1px solid transparent;
- background-color: ButtonFace;
- }
- .tabbed-pane-header-tab,
- .tabbed-pane-header-tab.selected {
- background: ButtonFace;
- color: ButtonText;
- }
- .tabbed-pane-header-tab:hover,
- .tabbed-pane-shadow .tabbed-pane-header-tab[data-keyboard-focus="true"]:focus {
- background-color: Highlight;
- color: HighlightText;
- }
- .tabbed-pane-header-tabs-drop-down-container {
- opacity: 1;
- }
- .tabbed-pane-header-tabs-drop-down-container:hover,
- .tabbed-pane-header-tabs-drop-down-container[data-keyboard-focus="true"]:focus {
- background-color: Highlight;
- }
- .tabbed-pane-header-tabs-drop-down-container > .chevron-icon {
- background-color: ButtonText;
- }
- .tabbed-pane-header-tabs-drop-down-container:hover > .chevron-icon,
- .tabbed-pane-header-tabs-drop-down-container[data-keyboard-focus="true"]:focus > .chevron-icon {
- background-color: HighlightText;
- }
+ .tabbed-pane-tab-slider {
+ forced-color-adjust: none;
+ background-color: Highlight;
+ }
+
+ .tabbed-pane-header {
+ forced-color-adjust: none;
+ border-bottom: 1px solid transparent;
+ background-color: ButtonFace;
+ }
+
+ .tabbed-pane-header-tab,
+ .tabbed-pane-header-tab.selected {
+ background: ButtonFace;
+ color: ButtonText;
+ }
+
+ .tabbed-pane-header-tab:hover,
+ .tabbed-pane-shadow .tabbed-pane-header-tab[data-keyboard-focus="true"]:focus {
+ background-color: Highlight;
+ color: HighlightText;
+ }
+
+ .tabbed-pane-header-tabs-drop-down-container {
+ opacity: 1;
+ }
+
+ .tabbed-pane-header-tabs-drop-down-container:hover,
+ .tabbed-pane-header-tabs-drop-down-container[data-keyboard-focus="true"]:focus {
+ background-color: Highlight;
+ }
+
+ .tabbed-pane-header-tabs-drop-down-container > .chevron-icon {
+ background-color: ButtonText;
+ }
+
+ .tabbed-pane-header-tabs-drop-down-container:hover > .chevron-icon,
+ .tabbed-pane-header-tabs-drop-down-container[data-keyboard-focus="true"]:focus > .chevron-icon {
+ background-color: HighlightText;
+ }
}
diff --git a/front_end/ui/targetCrashedScreen.css b/front_end/ui/targetCrashedScreen.css
index 037c3d5..027218c 100644
--- a/front_end/ui/targetCrashedScreen.css
+++ b/front_end/ui/targetCrashedScreen.css
@@ -5,11 +5,11 @@
*/
.widget {
- padding: 25px;
+ padding: 25px;
}
.message {
- font-size: larger;
- white-space: pre;
- margin: 5px;
+ font-size: larger;
+ white-space: pre;
+ margin: 5px;
}
diff --git a/front_end/ui/textButton.css b/front_end/ui/textButton.css
index dc21ef9..ce4051a 100644
--- a/front_end/ui/textButton.css
+++ b/front_end/ui/textButton.css
@@ -5,55 +5,56 @@
*/
.text-button {
- margin: 2px;
- height: 24px;
- font-size: 12px;
- border: 1px solid rgba(0, 0, 0, 0.2);
- border-radius: 4px;
- padding: 0px 12px;
- font-weight: 500;
- color: var(--accent-fg-color);
- background-color: #fff;
- flex: none;
- white-space: nowrap;
+ margin: 2px;
+ height: 24px;
+ font-size: 12px;
+ border: 1px solid rgba(0, 0, 0, 0.2);
+ border-radius: 4px;
+ padding: 0 12px;
+ font-weight: 500;
+ color: var(--accent-fg-color);
+ background-color: #fff;
+ flex: none;
+ white-space: nowrap;
}
.text-button:not(:disabled):focus,
.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);
- cursor: pointer;
+ background-color: var(--toolbar-bg-color);
+ box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
+ cursor: pointer;
}
.text-button:not(:disabled):not(.running):focus,
.text-button:not(:disabled):not(.running):hover,
.text-button:not(:disabled):not(.running):active {
- color: var(--accent-fg-color-hover);
+ color: var(--accent-fg-color-hover);
}
.text-button:not(:disabled):active {
- background-color: #f2f2f2;
+ background-color: #f2f2f2;
}
.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 rgba(0, 0, 0, 0.1), 0 0 0 2px rgba(66, 133, 244, 0.4);
}
.text-button:disabled {
- opacity: 0.38;
+ opacity: 0.38;
}
-.text-button.primary-button, -theme-preserve {
- background-color: var(--accent-color);
- border: none;
- color: #fff;
+.text-button.primary-button,
+-theme-preserve {
+ background-color: var(--accent-color);
+ border: none;
+ color: #fff;
}
.text-button.link-style {
background: none;
border: none;
- padding: 0!important;
+ padding: 0 !important;
font: inherit;
cursor: pointer;
height: 18px;
@@ -61,68 +62,75 @@
.text-button.primary-button:not(:disabled):focus,
.text-button.primary-button:not(:disabled):hover,
-.text-button.primary-button:not(:disabled):active, -theme-preserve {
- background-color: var(--accent-color-hover);
- color: #fff;
+.text-button.primary-button:not(:disabled):active,
+-theme-preserve {
+ background-color: var(--accent-color-hover);
+ color: #fff;
}
.-theme-with-dark-background .text-button:not(.primary-button):not(:disabled):focus,
.-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);
+ background-color: #313131;
+ box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}
.-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 rgba(0, 0, 0, 0.1), 0 0 0 2px rgba(94, 151, 246, 0.6);
}
.-theme-with-dark-background .text-button:not(.primary-button):not(:disabled):active {
- background-color: #3e3e3e;
+ background-color: #3e3e3e;
}
@media (forced-colors: active) {
- .text-button {
- background-color: ButtonFace;
- color: ButtonText;
- border-color: ButtonText;
- }
- .text-button:not(:disabled):focus {
- forced-color-adjust: none;
- background-color: ButtonFace;
- color: ButtonText;
- border-color: Highlight;
- box-shadow: var(--focus-ring-active-shadow);
- }
- .text-button:not(:disabled):hover,
- .text-button:not(:disabled):active {
- forced-color-adjust: none;
- background-color: Highlight;
- color: HighlightText;
- box-shadow: var(--accent-color);
- }
- .text-button.primary-button {
- forced-color-adjust: none;
- background-color: Highlight;
- color: HighlightText;
- border: 1px solid Highlight;
- }
- .text-button.primary-button:not(:disabled):focus {
- background-color: Highlight;
- color: HighlightText;
- border-color: ButtonText;
- }
- .text-button.primary-button:not(:disabled):hover,
- .text-button.primary-button:not(:disabled):active {
- background-color: HighlightText;
- color: Highlight;
- border-color: Highlight;
- }
- .text-button:disabled {
- forced-color-adjust: none;
- opacity: 1;
- background: ButtonFace;
- border-color: GrayText;
- color: GrayText;
- }
+ .text-button {
+ background-color: ButtonFace;
+ color: ButtonText;
+ border-color: ButtonText;
+ }
+
+ .text-button:not(:disabled):focus {
+ forced-color-adjust: none;
+ background-color: ButtonFace;
+ color: ButtonText;
+ border-color: Highlight;
+ box-shadow: var(--focus-ring-active-shadow);
+ }
+
+ .text-button:not(:disabled):hover,
+ .text-button:not(:disabled):active {
+ forced-color-adjust: none;
+ background-color: Highlight;
+ color: HighlightText;
+ box-shadow: var(--accent-color);
+ }
+
+ .text-button.primary-button {
+ forced-color-adjust: none;
+ background-color: Highlight;
+ color: HighlightText;
+ border: 1px solid Highlight;
+ }
+
+ .text-button.primary-button:not(:disabled):focus {
+ background-color: Highlight;
+ color: HighlightText;
+ border-color: ButtonText;
+ }
+
+ .text-button.primary-button:not(:disabled):hover,
+ .text-button.primary-button:not(:disabled):active {
+ background-color: HighlightText;
+ color: Highlight;
+ border-color: Highlight;
+ }
+
+ .text-button:disabled {
+ forced-color-adjust: none;
+ opacity: 1;
+ background: ButtonFace;
+ border-color: GrayText;
+ color: GrayText;
+ }
}
diff --git a/front_end/ui/textPrompt.css b/front_end/ui/textPrompt.css
index a0989f0..f9e2333 100644
--- a/front_end/ui/textPrompt.css
+++ b/front_end/ui/textPrompt.css
@@ -4,72 +4,73 @@
* found in the LICENSE file.
*/
- .text-prompt-root {
- display: flex;
- align-items: center;
+.text-prompt-root {
+ display: flex;
+ align-items: center;
}
.text-prompt-editing {
- box-shadow: var(--drop-shadow);
- background-color: white;
- text-overflow: clip !important;
- padding-left: 2px;
- margin-left: -2px;
- padding-right: 2px;
- margin-right: -2px;
- margin-bottom: -1px;
- padding-bottom: 1px;
- opacity: 1.0 !important;
+ box-shadow: var(--drop-shadow);
+ background-color: white;
+ text-overflow: clip !important;
+ padding-left: 2px;
+ margin-left: -2px;
+ padding-right: 2px;
+ margin-right: -2px;
+ margin-bottom: -1px;
+ padding-bottom: 1px;
+ opacity: 1 !important;
}
.text-prompt-editing > .text-prompt {
- color: #222 !important;
- text-decoration: none !important;
- white-space: pre;
+ color: #222 !important;
+ text-decoration: none !important;
+ white-space: pre;
}
.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);
+ content: attr(data-placeholder);
+ color: rgb(128, 128, 128);
}
.text-prompt:not([data-placeholder]):empty::after {
- content: '\00A0';
- width: 0;
- display: block;
+ content: '\00A0';
+ width: 0;
+ display: block;
}
.text-prompt {
- cursor: text;
- overflow-x: visible;
+ cursor: text;
+ overflow-x: visible;
}
.text-prompt::-webkit-scrollbar {
- display: none;
+ display: none;
}
.text-prompt.disabled {
- opacity: 0.5;
- cursor: default;
+ opacity: 0.5;
+ cursor: default;
}
.text-prompt-editing br {
- display: none;
+ display: none;
}
.text-prompt-root:not(:focus-within) ::selection {
- background: transparent;
+ background: transparent;
}
@media (forced-colors: active) {
- .text-prompt[data-placeholder]:empty::before {
- color: GrayText !important;
- }
- .text-prompt.disabled {
- opacity: 1;
- }
+ .text-prompt[data-placeholder]:empty::before {
+ color: GrayText !important;
+ }
+
+ .text-prompt.disabled {
+ opacity: 1;
+ }
}
diff --git a/front_end/ui/toolbar.css b/front_end/ui/toolbar.css
index b3a3068..8372157 100644
--- a/front_end/ui/toolbar.css
+++ b/front_end/ui/toolbar.css
@@ -5,403 +5,415 @@
*/
:host {
- flex: none;
- padding: 0 2px;
+ flex: none;
+ padding: 0 2px;
}
.toolbar-shadow {
- position: relative;
- white-space: nowrap;
- height: 26px;
- overflow: hidden;
- z-index: 12;
- display: flex;
- flex: none;
- align-items: center;
+ position: relative;
+ white-space: nowrap;
+ height: 26px;
+ overflow: hidden;
+ z-index: 12;
+ display: flex;
+ flex: none;
+ align-items: center;
}
.toolbar-shadow.wrappable {
- flex-wrap: wrap;
- overflow: visible;
+ flex-wrap: wrap;
+ overflow: visible;
}
.toolbar-shadow.toolbar-grow-vertical {
- height: initial;
+ height: initial;
}
.toolbar-shadow.vertical {
- flex-direction: column;
- height: auto;
- align-items: flex-start;
+ flex-direction: column;
+ height: auto;
+ align-items: flex-start;
}
.toolbar-item {
- position: relative;
- display: flex;
- background-color: transparent;
- flex: none;
- align-items: center;
- justify-content: center;
- padding: 0;
- height: 26px;
- border: none;
- white-space: pre;
+ position: relative;
+ display: flex;
+ background-color: transparent;
+ flex: none;
+ align-items: center;
+ justify-content: center;
+ padding: 0;
+ height: 26px;
+ border: none;
+ white-space: pre;
}
.toolbar-item,
.toolbar-item .devtools-link {
- color: #5a5a5a;
+ color: #5a5a5a;
}
select.toolbar-item:disabled {
- opacity: 0.5;
+ opacity: 0.5;
}
.toolbar-dropdown-arrow {
- background-color: #6D6D6D;
- pointer-events: none;
- flex: none;
+ background-color: #6d6d6d;
+ pointer-events: none;
+ flex: none;
}
select.toolbar-item:disabled + .toolbar-dropdown-arrow {
- opacity: 0.5;
+ opacity: 0.5;
}
/* Toolbar item */
.toolbar-button {
- white-space: nowrap;
- overflow: hidden;
- min-width: 28px;
- background: transparent;
- border-radius: 0;
- cursor: pointer;
+ white-space: nowrap;
+ overflow: hidden;
+ min-width: 28px;
+ background: transparent;
+ border-radius: 0;
+ cursor: pointer;
}
.toolbar-text {
- margin: 0 5px;
- flex: none;
- color: #5a5a5a;
+ margin: 0 5px;
+ flex: none;
+ color: #5a5a5a;
}
.toolbar-text:empty {
- margin: 0;
+ margin: 0;
}
.toolbar-has-dropdown {
- justify-content: space-between;
- padding: 0 3px 0 5px;
- border: 1px solid transparent;
+ justify-content: space-between;
+ padding: 0 3px 0 5px;
+ border: 1px solid transparent;
}
.toolbar-has-dropdown .toolbar-text {
- margin: 0 4px 0 0;
- text-overflow: ellipsis;
- flex: auto;
- overflow: hidden;
- text-align: right;
+ margin: 0 4px 0 0;
+ text-overflow: ellipsis;
+ flex: auto;
+ overflow: hidden;
+ text-align: right;
}
.toolbar-button.dark-text .toolbar-dropdown-arrow {
- background-color: #333;
+ background-color: #333;
}
.toolbar-has-glyph .toolbar-text {
- margin-left: -4px;
+ margin-left: -4px;
}
.toolbar-button:not(.toolbar-has-glyph):not(.toolbar-has-dropdown):not(.largeicon-menu):not(.toolbar-button-secondary) {
- font-weight: bold;
+ font-weight: bold;
}
.toolbar-render-as-links * {
- font-weight: initial;
- color: rgb(17, 85, 204);
- text-decoration: underline;
- cursor: pointer;
+ font-weight: initial;
+ color: rgb(17, 85, 204);
+ text-decoration: underline;
+ cursor: pointer;
}
.toolbar-toggled-gray:not(.toolbar-render-as-links) .toolbar-button:not(.toolbar-has-glyph):not(.toolbar-has-dropdown):not(.largeicon-menu):hover {
- background-color: var(--toolbar-bg-color);
+ background-color: var(--toolbar-bg-color);
}
.toolbar-glyph {
- background-color: #5a5a5a;
- flex: none;
+ background-color: #5a5a5a;
+ flex: none;
}
/* Button */
.toolbar-button:disabled {
- opacity: 0.5;
+ opacity: 0.5;
}
-.toolbar-button.dark-text .toolbar-text{
- color: #333 !important;
+.toolbar-button.dark-text .toolbar-text {
+ color: #333 !important;
}
:not(.toolbar-render-as-links) .toolbar-button:enabled:hover:not(:active) .toolbar-glyph {
- background-color: #333;
+ background-color: #333;
}
:not(.toolbar-render-as-links) .toolbar-button:enabled:hover:not(:active) .toolbar-text {
- color: #333;
+ color: #333;
}
.toolbar-button.toolbar-state-on .toolbar-glyph,
.toolbar-blue-on-hover .toolbar-button:not(.toolbar-state-on):enabled:hover:not(:active) {
- background-color: var(--accent-color);
+ background-color: var(--accent-color);
}
.toolbar-button.toolbar-state-on .toolbar-text {
- color: var(--accent-color);
+ color: var(--accent-color);
}
.toolbar-blue-on-hover .toolbar-button:not(.toolbar-state-on):enabled:hover .toolbar-glyph {
- background-color: white;
+ background-color: white;
}
.toolbar-blue-on-hover .toolbar-button:not(.toolbar-state-on):enabled:hover .toolbar-text {
- color: white;
+ color: white;
}
.toolbar-button.toolbar-state-on:enabled:hover:not(:active) .toolbar-glyph,
.toolbar-blue-on-hover .toolbar-button:not(.toolbar-state-on):enabled:active:hover {
- background-color: var(--accent-color);
+ background-color: var(--accent-color);
}
.toolbar-button.toolbar-state-on:enabled:hover:not(:active) .toolbar-text {
- color: var(--accent-color);
+ color: var(--accent-color);
}
.toolbar-toggled-gray .toolbar-button.toolbar-state-on {
- background-color: var(--toolbar-bg-color) !important;
+ background-color: var(--toolbar-bg-color) !important;
}
.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(0, 100%, 65%) !important;
}
/* Checkbox */
.toolbar-item.checkbox {
- padding: 0 5px 0 2px;
+ padding: 0 5px 0 2px;
}
.toolbar-item.checkbox:hover {
- color: #333;
+ color: #333;
}
/* Select */
.toolbar-select-container {
- display: inline-flex;
- flex-shrink: 0;
- margin-right: 6px;
+ display: inline-flex;
+ flex-shrink: 0;
+ margin-right: 6px;
}
select.toolbar-item {
- min-width: 38px;
- -webkit-appearance: none;
- border: 1px solid transparent;
- border-radius: 0;
- padding: 0 13px 0 5px;
- margin-right: -10px;
- position: relative;
- height: 22px;
- margin-top: 2px;
- margin-bottom: 2px;
+ min-width: 38px;
+ -webkit-appearance: none;
+ border: 1px solid transparent;
+ border-radius: 0;
+ padding: 0 13px 0 5px;
+ margin-right: -10px;
+ position: relative;
+ height: 22px;
+ margin-top: 2px;
+ margin-bottom: 2px;
}
select.toolbar-item[data-keyboard-focus="true"]:focus {
- background: rgba(0, 0, 0, 0.08);
- border-radius: 2px;
+ background: rgba(0, 0, 0, 0.08);
+ border-radius: 2px;
}
select.toolbar-item[data-keyboard-focus="true"]:focus > * {
- background: white;
+ background: white;
}
/* Input */
.toolbar-input {
- width: 120px;
- height: 19px;
- padding: 4px 3px 3px 3px;
- margin: 1px 3px;
- background-color: white;
- border: 1px solid transparent ;
- min-width: 35px;
+ width: 120px;
+ height: 19px;
+ padding: 4px 3px 3px 3px;
+ margin: 1px 3px;
+ background-color: white;
+ border: 1px solid transparent;
+ min-width: 35px;
}
.toolbar-input:hover {
- box-shadow: var(--focus-ring-inactive-shadow);
+ box-shadow: var(--focus-ring-inactive-shadow);
}
.toolbar-input.focused,
.toolbar-input:not(.toolbar-input-empty) {
- box-shadow: var(--focus-ring-active-shadow);
+ box-shadow: var(--focus-ring-active-shadow);
}
.toolbar-input > input {
- border: none;
- flex-grow: 1;
+ border: none;
+ flex-grow: 1;
}
.toolbar-input-clear-button {
- opacity: 0.7;
- flex-basis: 13px;
- flex-shrink: 0;
- height: 16px;
+ opacity: 0.7;
+ flex-basis: 13px;
+ flex-shrink: 0;
+ height: 16px;
}
.toolbar-input-clear-button:hover {
- opacity: .99;
+ opacity: 0.99;
}
.toolbar-input-empty .toolbar-input-clear-button {
- display: none;
+ display: none;
}
.toolbar-prompt-proxy {
- flex: 1;
+ flex: 1;
}
.toolbar-input-prompt {
- flex: 1;
- overflow: hidden;
- white-space: nowrap;
- cursor: auto;
+ flex: 1;
+ overflow: hidden;
+ white-space: nowrap;
+ cursor: auto;
}
/* Separator */
.toolbar-divider {
- background-color: #ccc;
- width: 1px;
- margin: 5px 4px;
- height: 16px;
+ background-color: #ccc;
+ width: 1px;
+ margin: 5px 4px;
+ height: 16px;
}
.toolbar-spacer {
- flex: auto;
+ flex: auto;
}
/* Long click */
.long-click-glyph {
- position: absolute;
- background-color: #5a5a5a;
- top: 0;
- left: 0;
+ position: absolute;
+ background-color: #5a5a5a;
+ top: 0;
+ left: 0;
}
.toolbar-button.emulate-active {
- background-color: rgb(163, 163, 163);
+ background-color: rgb(163, 163, 163);
}
.toolbar-button[data-keyboard-focus="true"]:focus::after {
- position: absolute;
- top: 2px;
- bottom: 2px;
- left: 2px;
- right: 2px;
- background-color: rgba(0, 0, 0, 0.08);
- border-radius: 2px;
- content: "";
+ position: absolute;
+ top: 2px;
+ bottom: 2px;
+ left: 2px;
+ right: 2px;
+ background-color: rgba(0, 0, 0, 0.08);
+ border-radius: 2px;
+ content: "";
}
.toolbar-shadow.floating {
- flex-direction: column;
- height: auto;
- background-color: white;
- border: 1px solid #ccc;
- margin-top: -1px;
- width: 28px;
- left: -2px;
+ flex-direction: column;
+ height: auto;
+ background-color: white;
+ border: 1px solid #ccc;
+ margin-top: -1px;
+ width: 28px;
+ left: -2px;
}
input[is=history-input] {
- border: 1px solid transparent;
- line-height: 16px;
- padding: 1px;
+ border: 1px solid transparent;
+ line-height: 16px;
+ padding: 1px;
}
input[is=history-input]:hover {
- box-shadow: var(--focus-ring-inactive-shadow);
+ box-shadow: var(--focus-ring-inactive-shadow);
}
input[is=history-input]:focus,
input[is=history-input]:not(:placeholder-shown) {
- box-shadow: var(--focus-ring-active-shadow);
+ box-shadow: var(--focus-ring-active-shadow);
}
.toolbar-item.warning {
- background: hsl(0, 100%, 95%);
+ background: hsl(0, 100%, 95%);
}
@media (forced-colors: active) {
- select.toolbar-item:disabled,
- select.toolbar-item:disabled + .toolbar-dropdown-arrow {
- opacity: 1;
- background-color: Graytext;
- }
- :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 {
- background-color: HighlightText;
- }
- :not(.toolbar-render-as-links) .toolbar-button:enabled:hover:not(:active) .toolbar-text,
- :not(.toolbar-render-as-links) .toolbar-button:enabled:focus:not(:active) .toolbar-text {
- color: HighlightText;
- }
- .toolbar-button:enabled.hover:not(:active) .toolbar-glyph, .toolbar-button.toolbar-state-on .toolbar-glyph,
- .toolbar-button:hover:enabled,
- .toolbar-button:focus,
- .toolbar-toggled-gray:not(.toolbar-render-as-links) .toolbar-button:not(.toolbar-has-glyph):not(.toolbar-has-dropdown):not(.largeicon-menu):hover {
- forced-color-adjust: none;
- background-color: Highlight;
- }
- .toolbar-button:disabled {
- opacity: 1;
- }
- :not(.toolbar-render-as-links) .toolbar-button:disabled .toolbar-glyph,
- .toolbar-button:disabled [is=ui-icon].icon-mask {
- background-color: GrayText;
- color: GrayText;
- }
- .toolbar-item,
- .toolbar-text {
- color: ButtonText;
- }
- .toolbar-button.toolbar-state-on .toolbar-text {
- forced-color-adjust: none;
- color: Highlight;
- }
- .toolbar-input {
- forced-color-adjust: none;
- background: Canvas;
- box-shadow: var(--focus-ring-inactive-shadow);
- }
- .toolbar-input.focused,
- .toolbar-input:not(.toolbar-input-empty) {
- forced-color-adjust: none;
- background: Canvas;
- box-shadow: var(--focus-ring-active-shadow);
- }
- .toolbar-input:hover {
- box-shadow: var(--focus-ring-active-shadow);
- }
- .toolbar-item .devtools-link {
- color: LinkText;
- }
+ select.toolbar-item:disabled,
+ select.toolbar-item:disabled + .toolbar-dropdown-arrow {
+ opacity: 1;
+ background-color: Graytext;
+ }
+
+ :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 {
+ background-color: HighlightText;
+ }
+
+ :not(.toolbar-render-as-links) .toolbar-button:enabled:hover:not(:active) .toolbar-text,
+ :not(.toolbar-render-as-links) .toolbar-button:enabled:focus:not(:active) .toolbar-text {
+ color: HighlightText;
+ }
+
+ .toolbar-button:enabled.hover:not(:active) .toolbar-glyph,
+ .toolbar-button.toolbar-state-on .toolbar-glyph,
+ .toolbar-button:hover:enabled,
+ .toolbar-button:focus,
+ .toolbar-toggled-gray:not(.toolbar-render-as-links) .toolbar-button:not(.toolbar-has-glyph):not(.toolbar-has-dropdown):not(.largeicon-menu):hover {
+ forced-color-adjust: none;
+ background-color: Highlight;
+ }
+
+ .toolbar-button:disabled {
+ opacity: 1;
+ }
+
+ :not(.toolbar-render-as-links) .toolbar-button:disabled .toolbar-glyph,
+ .toolbar-button:disabled [is=ui-icon].icon-mask {
+ background-color: GrayText;
+ color: GrayText;
+ }
+
+ .toolbar-item,
+ .toolbar-text {
+ color: ButtonText;
+ }
+
+ .toolbar-button.toolbar-state-on .toolbar-text {
+ forced-color-adjust: none;
+ color: Highlight;
+ }
+
+ .toolbar-input {
+ forced-color-adjust: none;
+ background: canvas;
+ box-shadow: var(--focus-ring-inactive-shadow);
+ }
+
+ .toolbar-input.focused,
+ .toolbar-input:not(.toolbar-input-empty) {
+ forced-color-adjust: none;
+ background: canvas;
+ box-shadow: var(--focus-ring-active-shadow);
+ }
+
+ .toolbar-input:hover {
+ box-shadow: var(--focus-ring-active-shadow);
+ }
+
+ .toolbar-item .devtools-link {
+ color: linktext;
+ }
}
diff --git a/front_end/ui/tooltip.css b/front_end/ui/tooltip.css
index a0ad022..29e85cb 100644
--- a/front_end/ui/tooltip.css
+++ b/front_end/ui/tooltip.css
@@ -5,46 +5,46 @@
*/
.tooltip {
- background: hsl(0, 0%, 95%);
- border-radius: 2px;
- color: hsl(0, 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);
- background-clip: padding-box;
- box-sizing: border-box;
- position: absolute;
- visibility: hidden;
- transition: visibility 0s 100ms, opacity 150ms cubic-bezier(0, 0, .2, 1);
- z-index: 20001;
- top: 0;
- left: 0;
- opacity: 0;
- text-overflow: ellipsis;
- overflow: hidden;
- pointer-events: none;
+ background: hsl(0, 0%, 95%);
+ border-radius: 2px;
+ color: hsl(0, 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);
+ background-clip: padding-box;
+ box-sizing: border-box;
+ position: absolute;
+ visibility: hidden;
+ transition: visibility 0s 100ms, opacity 150ms cubic-bezier(0, 0, 0.2, 1);
+ z-index: 20001;
+ top: 0;
+ left: 0;
+ opacity: 0;
+ text-overflow: ellipsis;
+ overflow: hidden;
+ pointer-events: none;
}
.tooltip-breakword {
- word-break: break-word;
+ word-break: break-word;
}
.tooltip.shown {
- visibility: visible;
- transition-delay: 600ms;
- opacity: 1;
+ visibility: visible;
+ transition-delay: 600ms;
+ opacity: 1;
}
.tooltip.shown.instant {
- transition-delay: 0s;
+ transition-delay: 0s;
}
.tooltip-shortcut {
- color: hsl(0, 0%, 45%);
- display: inline-block;
- margin-left: 8px;
- flex: 0 0 auto;
+ color: hsl(0, 0%, 45%);
+ display: inline-block;
+ margin-left: 8px;
+ flex: 0 0 auto;
}
diff --git a/front_end/ui/treeoutline.css b/front_end/ui/treeoutline.css
index c1d457c..0a99612 100644
--- a/front_end/ui/treeoutline.css
+++ b/front_end/ui/treeoutline.css
@@ -5,210 +5,217 @@
*/
:host {
- flex: 1 1 auto;
- padding: 2px 0 0 0;
+ flex: 1 1 auto;
+ padding: 2px 0 0 0;
}
.tree-outline-disclosure:not(.tree-outline-disclosure-hide-overflow) {
- min-width: 100%;
- display: inline-block;
+ min-width: 100%;
+ display: inline-block;
}
.tree-outline {
- padding: 0 0 4px 4px;
- margin: 0;
- z-index: 0;
- position: relative;
+ padding: 0 0 4px 4px;
+ margin: 0;
+ z-index: 0;
+ position: relative;
}
.tree-outline[data-keyboard-focus="true"] {
- box-shadow: 0px 0px 0px 2px var(--accent-color) inset;
+ box-shadow: 0 0 0 2px var(--accent-color) inset;
}
.tree-outline:not(.hide-selection-when-blurred) li.hovered:not(.selected) .selection {
- display: block;
- left: 3px;
- right: 3px;
- background-color: var(--item-hover-color);
- border-radius: 5px;
+ display: block;
+ left: 3px;
+ right: 3px;
+ background-color: var(--item-hover-color);
+ border-radius: 5px;
}
.tree-outline li .selection {
- display: none;
- z-index: -1;
- margin-left: -10000px;
+ display: none;
+ z-index: -1;
+ margin-left: -10000px;
}
.tree-outline:not(.hide-selection-when-blurred) li.selected {
- color: var(--selection-inactive-fg-color);
+ color: var(--selection-inactive-fg-color);
}
.tree-outline:not(.hide-selection-when-blurred) li.selected .selection {
- display: block;
- background-color: var(--selection-inactive-bg-color);
+ display: block;
+ background-color: var(--selection-inactive-bg-color);
}
.tree-outline:not(.hide-selection-when-blurred) li.in-clipboard .highlight {
- outline: 1px dotted darkgrey;
+ outline: 1px dotted darkgrey;
}
.tree-outline:not(.hide-selection-when-blurred) li.elements-drag-over .selection {
- display: block;
- margin-top: -2px;
- border-top: 2px solid;
- border-top-color: var(--selection-bg-color);
+ display: block;
+ margin-top: -2px;
+ border-top: 2px solid;
+ border-top-color: var(--selection-bg-color);
}
ol.tree-outline:not(.hide-selection-when-blurred) li.selected:focus .selection {
- background-color: var(--selection-bg-color);
+ background-color: var(--selection-bg-color);
}
ol.tree-outline:not(.hide-selection-when-blurred) li.parent.selected:focus::before {
- background-color: var(--selection-fg-color);
+ background-color: var(--selection-fg-color);
}
ol.tree-outline,
.tree-outline ol {
- list-style-type: none;
+ list-style-type: none;
}
.tree-outline ol {
- padding-left: 12px;
+ padding-left: 12px;
}
.tree-outline li {
- text-overflow: ellipsis;
- white-space: nowrap;
- position: relative;
- display: flex;
- align-items: center;
- min-height: 16px;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ position: relative;
+ display: flex;
+ align-items: center;
+ min-height: 16px;
}
ol.tree-outline:not(.hide-selection-when-blurred) li.selected:focus {
- color: var(--selection-fg-color);
+ color: var(--selection-fg-color);
}
ol.tree-outline:not(.hide-selection-when-blurred) li.selected:focus * {
- color: inherit;
+ color: inherit;
}
.tree-outline li .icons-container {
- align-self: center;
- display: flex;
- align-items: center;
+ align-self: center;
+ display: flex;
+ align-items: center;
}
.tree-outline li .leading-icons {
- margin-right: 4px;
+ margin-right: 4px;
}
.tree-outline li .trailing-icons {
- margin-left: 4px;
+ margin-left: 4px;
}
.tree-outline li::before {
- user-select: none;
- -webkit-mask-image: url(Images/treeoutlineTriangles.svg);
- -webkit-mask-size: 32px 24px;
- content: "\00a0\00a0";
- text-shadow: none;
- margin-right: -2px;
- height: 12px;
- width: 13px;
+ user-select: none;
+ -webkit-mask-image: url(Images/treeoutlineTriangles.svg);
+ -webkit-mask-size: 32px 24px;
+ content: "\00a0\00a0";
+ text-shadow: none;
+ margin-right: -2px;
+ height: 12px;
+ width: 13px;
}
.tree-outline li:not(.parent)::before {
- background-color: transparent;
+ background-color: transparent;
}
.tree-outline li::before {
- -webkit-mask-position: 0 0;
- background-color: #727272;
+ -webkit-mask-position: 0 0;
+ background-color: #727272;
}
.tree-outline li.parent.expanded::before {
- -webkit-mask-position: -16px 0;
+ -webkit-mask-position: -16px 0;
}
.tree-outline ol.children {
- display: none;
+ display: none;
}
.tree-outline ol.children.expanded {
- display: block;
+ display: block;
}
.tree-outline.tree-outline-dense li {
- margin-top: 1px;
- min-height: 12px;
+ margin-top: 1px;
+ min-height: 12px;
}
.tree-outline.tree-outline-dense li.parent {
- margin-top: 0;
+ margin-top: 0;
}
.tree-outline.tree-outline-dense li.parent::before {
- top: 0;
+ top: 0;
}
.tree-outline.tree-outline-dense ol {
- padding-left: 10px;
+ padding-left: 10px;
}
.tree-outline.hide-selection-when-blurred .selected:focus[data-keyboard-focus="true"] {
- background: var(--focus-bg-color);
- border-radius: 2px;
+ background: var(--focus-bg-color);
+ border-radius: 2px;
}
.tree-outline-disclosure:not(.tree-outline-disclosure-hide-overflow) .tree-outline.hide-selection-when-blurred .selected:focus[data-keyboard-focus="true"] {
- width: fit-content;
- padding-right: 3px;
+ width: fit-content;
+ padding-right: 3px;
}
@media (forced-colors: active) {
- .tree-outline li:not(.parent)::before,
- .tree-outline li:not(.parent):hover::before,
- .tree-outline.hide-selection-when-blurred .selected:focus[data-keyboard-focus="true"]:not(.parent)::before {
- forced-color-adjust: none;
- background-color: transparent;
- }
- .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 {
- forced-color-adjust: none;
- background-color: ButtonText;
- }
- .tree-outline-disclosure li.parent:hover:not(.selected)::before,
- .tree-outline:not(.hide-selection-when-blurred) li.parent:hover:not(.selected)::before {
- background-color: ButtonText;
- }
- ol.tree-outline:not(.hide-selection-when-blurred) li.selected:focus .selection,
- .tree-outline.hide-selection-when-blurred .selected:focus[data-keyboard-focus="true"] {
- forced-color-adjust: none;
- background-color: Highlight;
- }
- .tree-outline:not(.hide-selection-when-blurred) li.selected .selection {
- forced-color-adjust: none;
- background-color: ButtonText;
- }
- ol.tree-outline:not(.hide-selection-when-blurred) li.parent.selected::before,
- ol.tree-outline:not(.hide-selection-when-blurred) li.parent.selected:focus::before,
- .tree-outline.hide-selection-when-blurred .selected:focus[data-keyboard-focus="true"]::before {
- background-color: HighlightText;
- }
- .tree-outline li.selected [is=ui-icon].icon-mask,
- .tree-outline li.selected:focus [is=ui-icon]:not(.icon-mask) {
- background-color: HighlightText !important;
- }
- ol.tree-outline:not(.hide-selection-when-blurred) li.selected:focus,
- .tree-outline:not(.hide-selection-when-blurred) li.selected:focus .tree-element-title,
- .tree-outline:not(.hide-selection-when-blurred) li[data-keyboard-focus="true"]:focus .tree-element-title,
- .tree-outline:not(.hide-selection-when-blurred) li.selected .tree-element-title,
- .tree-outline:not(.hide-selection-when-blurred) li.selected,
- .tree-outline:not(.hide-selection-when-blurred) li.selected span,
- .tree-outline.hide-selection-when-blurred .selected:focus[data-keyboard-focus="true"] span {
- forced-color-adjust: none;
- color: HighlightText;
- }
+ .tree-outline li:not(.parent)::before,
+ .tree-outline li:not(.parent):hover::before,
+ .tree-outline.hide-selection-when-blurred .selected:focus[data-keyboard-focus="true"]:not(.parent)::before {
+ forced-color-adjust: none;
+ background-color: transparent;
+ }
+
+ .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 {
+ forced-color-adjust: none;
+ background-color: ButtonText;
+ }
+
+ .tree-outline-disclosure li.parent:hover:not(.selected)::before,
+ .tree-outline:not(.hide-selection-when-blurred) li.parent:hover:not(.selected)::before {
+ background-color: ButtonText;
+ }
+
+ ol.tree-outline:not(.hide-selection-when-blurred) li.selected:focus .selection,
+ .tree-outline.hide-selection-when-blurred .selected:focus[data-keyboard-focus="true"] {
+ forced-color-adjust: none;
+ background-color: Highlight;
+ }
+
+ .tree-outline:not(.hide-selection-when-blurred) li.selected .selection {
+ forced-color-adjust: none;
+ background-color: ButtonText;
+ }
+
+ ol.tree-outline:not(.hide-selection-when-blurred) li.parent.selected::before,
+ ol.tree-outline:not(.hide-selection-when-blurred) li.parent.selected:focus::before,
+ .tree-outline.hide-selection-when-blurred .selected:focus[data-keyboard-focus="true"]::before {
+ background-color: HighlightText;
+ }
+
+ .tree-outline li.selected [is=ui-icon].icon-mask,
+ .tree-outline li.selected:focus [is=ui-icon]:not(.icon-mask) {
+ background-color: HighlightText !important;
+ }
+
+ ol.tree-outline:not(.hide-selection-when-blurred) li.selected:focus,
+ .tree-outline:not(.hide-selection-when-blurred) li.selected:focus .tree-element-title,
+ .tree-outline:not(.hide-selection-when-blurred) li[data-keyboard-focus="true"]:focus .tree-element-title,
+ .tree-outline:not(.hide-selection-when-blurred) li.selected .tree-element-title,
+ .tree-outline:not(.hide-selection-when-blurred) li.selected,
+ .tree-outline:not(.hide-selection-when-blurred) li.selected span,
+ .tree-outline.hide-selection-when-blurred .selected:focus[data-keyboard-focus="true"] span {
+ forced-color-adjust: none;
+ color: HighlightText;
+ }
}
diff --git a/front_end/ui/viewContainers.css b/front_end/ui/viewContainers.css
index fe26465..aec5edd 100644
--- a/front_end/ui/viewContainers.css
+++ b/front_end/ui/viewContainers.css
@@ -28,50 +28,50 @@
*/
.expandable-view-title {
- display: flex;
- align-items: center;
- background-color: var(--toolbar-bg-color);
- height: 22px;
- padding: 0 5px;
- border-top: var(--divider-border);
- white-space: nowrap;
- overflow: hidden;
- position: relative;
- border-bottom: 1px solid transparent;
+ display: flex;
+ align-items: center;
+ background-color: var(--toolbar-bg-color);
+ height: 22px;
+ padding: 0 5px;
+ border-top: var(--divider-border);
+ white-space: nowrap;
+ overflow: hidden;
+ position: relative;
+ border-bottom: 1px solid transparent;
}
.expandable-view-title.expanded,
.expandable-view-title:last-child {
- border-bottom: 1px solid #ddd;
+ border-bottom: 1px solid #ddd;
}
.expandable-view-title .toolbar {
- margin-top: -3px;
+ margin-top: -3px;
}
.expandable-view-title:not(.expanded) .toolbar {
- display: none;
+ display: none;
}
.title-expand-icon {
- margin-right: 2px;
- margin-bottom: -2px;
+ margin-right: 2px;
+ margin-bottom: -2px;
}
.expandable-view-title[data-keyboard-focus="true"]:focus {
- background-color: var(--focus-bg-color);
+ background-color: var(--focus-bg-color);
}
.expandable-view-title > .toolbar {
- position: absolute;
- right: 0;
- top: 0;
+ position: absolute;
+ right: 0;
+ top: 0;
}
@media (forced-colors: active) {
- .expandable-view-title[data-keyboard-focus="true"]:focus {
- forced-color-adjust: none;
- background: Canvas !important;
- box-shadow: 0 0 0 2px Highlight inset;
- }
+ .expandable-view-title[data-keyboard-focus="true"]:focus {
+ forced-color-adjust: none;
+ background: canvas !important;
+ box-shadow: 0 0 0 2px Highlight inset;
+ }
}
