@yuebai008/cli
Version:
Command line interface for rapid qg-minigame development
1 lines • 14.8 kB
JavaScript
export default{cssContent:'/*\n * Copyright (c) 2014 The Chromium Authors. All rights reserved.\n * Use of this source code is governed by a BSD-style license that can be\n * found in the LICENSE file.\n */\n\n:host {\n flex: none;\n padding: 0 2px;\n\n --toolbar-height: 26px;\n}\n\n.toolbar-shadow {\n position: relative;\n white-space: nowrap;\n height: var(--toolbar-height);\n overflow: hidden;\n display: flex;\n flex: none;\n align-items: center;\n z-index: 0;\n}\n\n.toolbar-shadow.wrappable {\n flex-wrap: wrap;\n overflow: visible;\n}\n\n.toolbar-shadow.toolbar-grow-vertical {\n height: initial;\n}\n\n.toolbar-shadow.vertical {\n flex-direction: column;\n height: auto;\n align-items: flex-start;\n}\n\n.toolbar-item {\n position: relative;\n display: flex;\n background-color: transparent;\n flex: none;\n align-items: center;\n justify-content: center;\n padding: 0;\n height: var(--toolbar-height);\n border: none;\n white-space: pre;\n overflow: hidden;\n}\n\n.toolbar-item,\n.toolbar-item .devtools-link {\n color: var(--icon-default-hover);\n}\n\n.toolbar-shadow.vertical .toolbar-item {\n height: auto;\n min-height: var(--toolbar-height);\n white-space: normal;\n}\n\ndevtools-issue-counter.toolbar-item {\n margin-top: -4px;\n}\n\ndevtools-issue-counter.main-toolbar {\n margin-top: 1px;\n}\n\n.toolbar-dropdown-arrow {\n background-color: var(--color-text-secondary);\n pointer-events: none;\n flex: none;\n margin-left: -4px;\n}\n\n.toolbar-button.dark-text .toolbar-dropdown-arrow {\n background-color: var(--color-text-primary);\n}\n\nselect.toolbar-item:disabled + .toolbar-dropdown-arrow {\n opacity: 50%;\n}\n/* Toolbar item */\n\n.toolbar-button {\n white-space: nowrap;\n overflow: hidden;\n min-width: 28px;\n background: transparent;\n border-radius: 0;\n}\n\n.toolbar-text {\n margin: 0 5px;\n flex: none;\n color: var(--ui-text);\n}\n\n.toolbar-text:empty {\n margin: 0;\n}\n\n.toolbar-has-dropdown {\n justify-content: space-between;\n padding: 0 3px 0 5px;\n border: 1px solid transparent;\n}\n\n.toolbar-has-dropdown-shrinkable {\n flex-shrink: 1;\n}\n\n.toolbar-has-dropdown .toolbar-text {\n margin: 0 4px 0 0;\n text-overflow: ellipsis;\n flex: auto;\n overflow: hidden;\n text-align: right;\n}\n\n.toolbar-render-as-links * {\n font-weight: initial;\n color: var(--color-link);\n text-decoration: underline;\n cursor: pointer;\n}\n\n.toolbar-render-as-links button {\n height: 15px;\n margin: 2px;\n}\n\n.toolbar-render-as-links button:focus-visible {\n outline: auto 5px -webkit-focus-ring-color;\n}\n\n:not(.toolbar-render-as-links) .toolbar-button:focus-visible::before {\n position: absolute;\n top: 2px;\n bottom: 2px;\n left: 2px;\n right: 2px;\n background-color: var(--color-background-elevation-2);\n border-radius: 2px;\n content: "";\n /* This ::before rule serves as a background for an element.\n Setting z-index to make sure it\'s always below the content. */\n z-index: -1;\n}\n\n.toolbar-icon {\n --icon-color: var(--color-text-secondary);\n\n flex: none;\n}\n\n.toolbar-glyph {\n background-color: var(--color-text-secondary);\n flex: none;\n}\n/* Button */\n\n.toolbar-button:disabled {\n opacity: 50%;\n}\n\n/* Two of the buttons are special in the main toolbar: the close button needs to\nbe fixed to the right so it never goes out of the viewport even if other items\npush it. And the main menu button next to it that needs to make some space for\nit. */\n.toolbar-button.close-devtools {\n position: absolute;\n right: 0;\n}\n\n:host-context(.right) .toolbar-button.main-menu,\n:host-context(.left) .toolbar-button.main-menu,\n:host-context(.bottom) .toolbar-button.main-menu {\n margin-inline-end: 28px;\n}\n\n.toolbar-button.copied-to-clipboard::after {\n content: attr(data-content);\n position: fixed;\n margin-top: calc(2 * var(--toolbar-height));\n padding: 3px 5px;\n color: var(--color-text-secondary);\n background: var(--color-background-elevation-1);\n animation: 2s fade-out;\n font-weight: normal;\n border: 1px solid var(--color-details-hairline);\n border-radius: 3px;\n}\n\n@keyframes fade-out {\n from {\n opacity: 100%;\n }\n\n to {\n opacity: 0%;\n }\n}\n\n.toolbar-button.toolbar-state-on .toolbar-glyph {\n background-color: var(--icon-toggled);\n}\n\n.toolbar-button.toolbar-state-on .toolbar-icon {\n --icon-color: var(--color-primary-old);\n}\n\n.toolbar-state-on.toolbar-toggle-with-dot .toolbar-icon::after,\n.toolbar-state-on.toolbar-toggle-with-dot .toolbar-text::after {\n content: "";\n position: absolute;\n bottom: 2px;\n background-color: var(--color-primary-old);\n width: 4.5px;\n height: 4.5px;\n border: 2px solid var(--override-toolbar-background-color, --color-background);\n border-radius: 50%;\n}\n\n.toolbar-state-on.toolbar-toggle-with-dot .toolbar-text::after {\n right: 0;\n}\n\n.toolbar-button.toolbar-state-on.toolbar-toggle-with-red-color .toolbar-glyph,\n.toolbar-button.toolbar-state-off.toolbar-default-with-red-color .toolbar-glyph {\n background-color: var(--icon-error) !important; /* stylelint-disable-line declaration-no-important */\n}\n\n.toolbar-button.toolbar-state-on.toolbar-toggle-with-red-color .toolbar-icon,\n.toolbar-button.toolbar-state-off.toolbar-default-with-red-color .toolbar-icon {\n --icon-color: var(--color-accent-red) !important; /* stylelint-disable-line declaration-no-important */\n\n background-color: var(--color-accent-red) !important; /* stylelint-disable-line declaration-no-important */\n}\n\n.toolbar-button:not(.toolbar-has-glyph):not(.toolbar-has-dropdown):not(.largeicon-menu):not(.toolbar-button-secondary) {\n font-weight: bold;\n}\n\n.toolbar-blue-on-hover .toolbar-button:not(.toolbar-state-on):enabled:hover:not(:active) {\n background-color: var(--color-primary-old);\n}\n\n.toolbar-blue-on-hover .toolbar-button:not(.toolbar-state-on):enabled:active:hover {\n background-color: var(--color-primary-old);\n}\n\n.toolbar-toggled-gray:not(.toolbar-render-as-links) .toolbar-button:not(.toolbar-has-glyph):not(.toolbar-has-dropdown):not(.largeicon-menu):hover {\n background-color: var(--color-background-elevation-1);\n}\n\n.toolbar-button.dark-text .toolbar-text {\n color: var(--color-text-primary) !important; /* stylelint-disable-line declaration-no-important */\n}\n\n.toolbar-button.toolbar-state-on .toolbar-text {\n color: var(--color-primary-old);\n}\n\n:not(.toolbar-render-as-links) .toolbar-button:enabled:hover:not(:active) .toolbar-glyph {\n background-color: var(--color-text-primary);\n}\n\n:not(.toolbar-render-as-links) .toolbar-button:enabled:hover:not(:active) .toolbar-icon {\n --icon-color: var(--color-text-primary);\n}\n\n:not(.toolbar-render-as-links) .toolbar-button:enabled:hover:not(:active) .toolbar-text {\n color: var(--color-text-primary);\n}\n\n.toolbar-blue-on-hover .toolbar-button:not(.toolbar-state-on):enabled:hover .toolbar-glyph {\n background-color: var(--color-background);\n}\n\n.toolbar-blue-on-hover .toolbar-button:not(.toolbar-state-on):enabled:hover .toolbar-icon {\n --icon-color: var(--color-background);\n}\n\n.toolbar-blue-on-hover .toolbar-button:not(.toolbar-state-on):enabled:hover .toolbar-text {\n color: var(--color-text-primary);\n}\n\n.toolbar-button.toolbar-state-on:enabled:hover:not(:active) .toolbar-glyph {\n background-color: var(--color-primary-old);\n}\n\n.toolbar-button.toolbar-state-on:enabled:hover:not(:active) .toolbar-icon {\n --icon-color: var(--color-primary-old);\n}\n\n.toolbar-button.toolbar-state-on:enabled:hover:not(:active) .toolbar-text {\n color: var(--color-text-primary);\n}\n\n.toolbar-toggled-gray .toolbar-button.toolbar-state-on {\n background-color: var(--color-background-elevation-1) !important; /* stylelint-disable-line declaration-no-important */\n}\n\n/* Checkbox */\n\n.toolbar-item.checkbox {\n padding: 0 5px 0 2px;\n}\n\n.toolbar-item.checkbox:hover {\n color: var(--color-text-primary);\n}\n/* Select */\n\n.toolbar-select-container {\n display: inline-flex;\n flex-shrink: 0;\n margin-right: 6px;\n}\n\nselect.toolbar-item {\n min-width: 38px;\n appearance: none;\n border: 1px solid transparent;\n padding: 0 13px 0 5px;\n margin-right: -10px;\n position: relative;\n height: 22px;\n margin-top: 2px;\n margin-bottom: 2px;\n}\n\nselect.toolbar-item:disabled {\n opacity: 50%;\n}\n\nbutton.toolbar-item:focus-visible,\nselect.toolbar-item:focus-visible {\n background: var(--sys-color-state-hover-on-subtle);\n border-radius: 2px;\n}\n\nselect.toolbar-item:focus-visible > * {\n background: var(--sys-color-cdt-base-container);\n border-radius: 7px;\n}\n/* Input */\n\n.toolbar-input {\n width: 120px;\n height: 19px;\n padding: 4px 3px 3px;\n margin: 1px 3px;\n background: var(--sys-color-cdt-base-container);\n border: 1px solid var(--sys-color-neutral-outline);\n border-radius: 4px;\n min-width: 35px;\n\n &.focused,\n &:not(.toolbar-input-empty) {\n border-color: var(--sys-color-state-focus-ring);\n }\n\n &:hover:not(.focused) {\n background: var(--sys-color-state-hover-on-subtle);\n }\n\n & > input {\n border: none;\n flex-grow: 1;\n }\n}\n\n.toolbar-input-clear-button {\n opacity: 70%;\n flex-basis: 13px;\n flex-shrink: 0;\n height: 16px;\n}\n\n.toolbar-input-clear-button > .search-cancel-button {\n display: block;\n}\n\n.toolbar-input-clear-button:hover {\n opacity: 99%;\n}\n\n.toolbar-input-empty .toolbar-input-clear-button {\n display: none;\n}\n\n.toolbar-prompt-proxy {\n flex: 1;\n}\n\n.toolbar-input-prompt {\n flex: 1;\n overflow: hidden;\n white-space: nowrap;\n cursor: auto;\n color: var(--color-text-primary);\n}\n/* Separator */\n\n.toolbar-divider {\n background-color: var(--sys-color-on-base-divider);\n width: 1px;\n margin: 5px 4px;\n height: 16px;\n}\n\n.toolbar-spacer {\n flex: auto;\n}\n/* Long click */\n\n.long-click-glyph {\n position: absolute;\n background-color: var(--icon-default);\n top: 2px;\n left: 3px;\n}\n\n.toolbar-button.emulate-active {\n background-color: var(--color-background-elevation-2);\n}\n\n.toolbar-button [is="ui-icon"].chevron-down,\n.toolbar-button [is="ui-icon"].chevron-up {\n transform: scale(0.8);\n}\n\n.toolbar-shadow.floating {\n flex-direction: column;\n height: auto;\n background-color: var(--color-background);\n border: 1px solid var(--color-details-hairline);\n margin-top: -1px;\n width: 28px;\n left: -2px;\n}\n\n.toolbar-shadow:not(.floating) .toolbar-item:last-child:not(:first-child) {\n flex-shrink: 1;\n justify-content: left;\n}\n\ninput[is="history-input"] {\n margin: 0 1px;\n border: 1px solid var(--sys-color-neutral-outline);\n border-radius: 4px;\n line-height: 16px;\n padding: 1px;\n color: var(--color-text-primary);\n}\n\ninput[is="history-input"]:focus,\ninput[is="history-input"]:not(:placeholder-shown) {\n border-color: var(--sys-color-state-focus-ring);\n}\n\ninput[is="history-input"]:hover:not(:focus) {\n background-color: var(--sys-color-state-hover-on-subtle);\n}\n\n.toolbar-item.highlight::before {\n content: "";\n position: absolute;\n top: 2px;\n left: 2px;\n right: 2px;\n bottom: 2px;\n border-radius: 2px;\n background: var(--sys-color-neutral-container);\n z-index: -1;\n}\n\n.toolbar-item.highlight:focus-visible {\n background: var(--sys-color-tonal-container);\n\n & > .title {\n color: var(--sys-color-on-tonal-container);\n }\n}\n\n.toolbar-item.highlight:hover:not(:active) > .title {\n color: var(--color-button-primary-text-hover);\n}\n\ndevtools-icon.leading-issue-icon {\n margin: 0 7px;\n}\n\n@media (forced-colors: active) {\n .toolbar-button:disabled {\n opacity: 100%;\n color: Graytext;\n }\n\n .toolbar-item,\n .toolbar-text {\n color: ButtonText;\n }\n\n .toolbar-button:disabled .toolbar-text {\n color: Graytext;\n }\n\n select.toolbar-item:disabled,\n select.toolbar-item:disabled + .toolbar-dropdown-arrow {\n opacity: 100%;\n background-color: Graytext;\n }\n\n .toolbar-button.toolbar-state-on .toolbar-glyph {\n forced-color-adjust: none;\n background-color: Highlight;\n }\n\n .toolbar-button.toolbar-state-on .toolbar-icon {\n --icon-color: Highlight;\n\n forced-color-adjust: none;\n }\n\n .toolbar-button.toolbar-state-on .toolbar-text {\n forced-color-adjust: none;\n color: Highlight;\n }\n\n :not(.toolbar-render-as-links) .toolbar-button:enabled:hover:not(:active) .toolbar-text,\n :not(.toolbar-render-as-links) .toolbar-button:enabled:focus:not(:active) .toolbar-text {\n color: HighlightText;\n }\n\n .toolbar-button:disabled [is="ui-icon"].icon-mask {\n background-color: GrayText;\n color: GrayText;\n }\n\n :not(.toolbar-render-as-links) .toolbar-button:disabled .toolbar-glyph {\n background-color: GrayText;\n color: GrayText;\n }\n\n :not(.toolbar-render-as-links) .toolbar-button:disabled .toolbar-icon {\n --icon-color: GrayText;\n\n color: GrayText;\n }\n\n .toolbar-button:enabled.hover:not(:active) .toolbar-glyph,\n .toolbar-button:focus,\n .toolbar-button:hover:enabled,\n .toolbar-toggled-gray:not(.toolbar-render-as-links) .toolbar-button:not(.toolbar-has-glyph):not(.toolbar-has-dropdown):not(.largeicon-menu):hover {\n forced-color-adjust: none;\n background-color: Highlight;\n }\n\n .toolbar-button:enabled:hover .toolbar-icon,\n .toolbar-button:enabled:focus .toolbar-icon,\n :not(.toolbar-render-as-links) .toolbar-button:enabled:hover .toolbar-icon,\n :not(.toolbar-render-as-links) .toolbar-button:enabled:focus .toolbar-icon,\n :not(.toolbar-render-as-links) .toolbar-button:enabled:hover:not(:active) .toolbar-icon {\n --icon-color: HighlightText;\n }\n\n :not(.toolbar-render-as-links) .toolbar-button:enabled:hover .toolbar-glyph,\n :not(.toolbar-render-as-links) .toolbar-button:enabled:focus .toolbar-glyph,\n :not(.toolbar-render-as-links) .toolbar-button:enabled:hover:not(:active) .toolbar-glyph,\n .toolbar-button:enabled:hover [is="ui-icon"].icon-mask,\n .toolbar-button:enabled:focus [is="ui-icon"].icon-mask {\n background-color: HighlightText;\n }\n\n .toolbar-input {\n forced-color-adjust: none;\n background: canvas;\n box-shadow: var(--legacy-focus-ring-inactive-shadow);\n }\n\n .toolbar-input.focused,\n .toolbar-input:not(.toolbar-input-empty) {\n forced-color-adjust: none;\n background: canvas;\n box-shadow: var(--legacy-focus-ring-active-shadow);\n }\n\n .toolbar-input:hover {\n box-shadow: var(--legacy-focus-ring-active-shadow);\n }\n\n .toolbar-item .devtools-link {\n color: linktext;\n }\n\n .toolbar-has-dropdown {\n forced-color-adjust: none;\n background: ButtonFace;\n color: ButtonText;\n }\n}\n'};