@yuebai008/cli
Version:
Command line interface for rapid qg-minigame development
1 lines • 7.5 kB
JavaScript
const styles=new CSSStyleSheet;styles.replaceSync("/*\n * Copyright 2021 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/* TODO(crbug.com/1442257): remove stylelint-disable. */\n/* stylelint-disable plugin/use_theme_colors */\n\n* {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n}\n\n/**\n* Reset default UA styles for focused elements.\n* The button styles below explicitly implement custom focus styles.\n*/\n*:focus,\n*:focus-visible,\n:host(:focus),\n:host(:focus-visible) {\n outline: none;\n}\n\n:host {\n display: inline-flex;\n flex-direction: row;\n}\n\nbutton {\n /*\n --override-button-no-right-border-radius decides\n whether button has border radius on the right or not.\n\n It works as a boolean variable:\n * If it is 1, \\'--button-has-right-border-radius\\' becomes a 0 multiplier\n for the border-radius-top-right and border-radius-bottom-right properties.\n * If it is not set or 0, it becomes a 1 multiplier\n for the same properties which means they'll continue to have the given\n border radius.\n */\n --button-has-right-border-radius: calc(1 - var(--override-button-no-right-border-radius, 0));\n --button-border-size: 1px;\n --button-height: 24px;\n --button-width: 100%;\n\n align-items: center;\n border-radius: 4px calc(var(--button-has-right-border-radius) * 4px) calc(var(--button-has-right-border-radius) * 4px) 4px;\n display: inline-flex;\n font-family: inherit;\n font-size: 12px;\n font-weight: 500;\n height: var(--button-height);\n line-height: 14px;\n padding: 5px 12px;\n justify-content: center;\n width: var(--button-width);\n white-space: nowrap;\n}\n\nbutton.small {\n --button-height: 20px;\n\n border-radius: 2px calc(var(--button-has-right-border-radius) * 2px) calc(var(--button-has-right-border-radius) * 2px) 2px;\n}\n\nbutton:focus-visible {\n box-shadow: 0 0 0 2px var(--color-button-outline-focus);\n}\n\nbutton.toolbar,\nbutton.round {\n --button-height: 24px;\n --button-width: 24px;\n\n background: transparent;\n border-radius: 2px calc(var(--button-has-right-border-radius) * 2px) calc(var(--button-has-right-border-radius) * 2px) 2px;\n border: none;\n overflow: hidden;\n padding: 0;\n white-space: nowrap;\n}\n\nbutton.round {\n border-radius: 100%;\n}\n\nbutton.round.small,\nbutton.toolbar.small {\n --button-height: 20px;\n --button-width: 20px;\n}\n\nbutton.round.tiny {\n --button-height: 18px;\n --button-width: 18px;\n}\n\nbutton.primary {\n border: var(--button-border-size) solid var(--color-primary);\n background: var(--color-primary);\n color: var(--color-background);\n}\n\nbutton.primary:hover {\n background: var(--color-button-primary-background-hovering);\n border: var(--button-border-size) solid var(--color-button-primary-background-hovering);\n}\n\nbutton.primary.active,\nbutton.primary:active {\n background: var(--color-button-primary-background-pressed);\n border: var(--button-border-size) solid var(--color-button-primary-background-pressed);\n}\n\nbutton.primary:disabled,\nbutton.primary:disabled:hover {\n border: var(--button-border-size) solid transparent;\n background: var(--color-background-elevation-1);\n color: var(--color-text-disabled);\n cursor: not-allowed;\n}\n\nbutton.secondary {\n border: var(--button-border-size) solid var(--color-details-hairline);\n background: var(--color-background);\n color: var(--color-primary);\n}\n\nbutton.secondary:hover {\n background: var(--color-button-secondary-background-hovering);\n}\n\nbutton.secondary.active,\nbutton.secondary:active {\n background: var(--color-button-secondary-background-pressed);\n border: var(--button-border-size) solid var(--color-button-secondary-background-pressed);\n}\n\nbutton.secondary:focus-visible {\n border: var(--button-border-size) solid var(--color-background);\n}\n\nbutton.secondary:disabled,\nbutton.secondary:disabled:hover {\n border: var(--button-border-size) solid var(--color-background-elevation-1);\n background: var(--color-background);\n color: var(--color-text-disabled);\n cursor: not-allowed;\n}\n\nbutton.secondary.active:focus-visible,\nbutton.secondary:active:focus-visible {\n border: var(--button-border-size) solid var(--color-button-secondary-background-pressed);\n}\n\nbutton.toolbar:hover,\nbutton.round:hover {\n background-color: var(--color-iconbutton-hover);\n}\n\nbutton.toolbar.active,\nbutton.toolbar:active,\nbutton.round.active,\nbutton.round:active {\n background-color: var(--color-iconbutton-pressed);\n}\n\nbutton.toolbar:focus-visible,\nbutton.round:focus-visible {\n background-color: var(--color-background-elevation-2);\n}\n\nbutton.toolbar:disabled,\nbutton.toolbar:disabled:hover,\nbutton.round:disabled,\nbutton.round:disabled:hover {\n background: var(--color-background);\n color: var(--color-text-disabled);\n cursor: not-allowed;\n}\n\nbutton.text-with-icon {\n padding: 0 calc(12px - var(--button-border-size)) 0 calc(8px - var(--button-border-size));\n}\n\nbutton.small.text-with-icon {\n padding: 0 calc(9px - var(--button-border-size)) 0 calc(3px - var(--button-border-size));\n}\n\nbutton.only-icon {\n padding: 0;\n}\n\nbutton devtools-icon {\n width: calc(var(--button-width) - 4px);\n height: calc(var(--button-height) - 4px);\n}\n\nbutton.text-with-icon devtools-icon {\n width: 20px;\n height: 20px;\n margin-right: 4px;\n}\n\nbutton.toolbar devtools-icon,\nbutton.round devtools-icon {\n --icon-color: var(--icon-default);\n}\n\nbutton.primary-toolbar devtools-icon {\n --icon-color: var(--icon-primary);\n}\n\nbutton.primary devtools-icon {\n --icon-color: var(--color-background);\n}\n\nbutton.secondary devtools-icon {\n --icon-color: var(--icon-primary);\n}\n\nbutton.explicit-size devtools-icon {\n width: unset;\n height: unset;\n}\n\nbutton.small.text-with-icon devtools-icon {\n width: 16px;\n height: 16px;\n margin-right: 4px;\n}\n\nbutton.toolbar.explicit-size devtools-icon,\nbutton.round.explicit-size devtools-icon {\n width: unset;\n height: unset;\n}\n\nbutton.toolbar.active devtools-icon,\nbutton.toolbar:active devtools-icon {\n --icon-color: var(--icon-toggled);\n}\n\nbutton.primary-toolbar:active devtools-icon {\n --icon-color: var(--icon-primary);\n}\n\nbutton.toolbar:hover devtools-icon {\n --icon-color: var(--icon-default-hover);\n}\n\nbutton.primary-toolbar:hover devtools-icon {\n --icon-color: var(--icon-primary);\n}\n\nbutton.toolbar:disabled devtools-icon,\nbutton.round:disabled devtools-icon {\n --icon-color: var(--icon-disabled);\n}\n\nbutton.primary:disabled devtools-icon {\n --icon-color: var(--icon-disabled);\n}\n\nbutton.secondary:disabled devtools-icon {\n --icon-color: var(--icon-disabled);\n}\n\n.spinner-component.secondary {\n border: 2px solid var(--color-primary);\n border-right-color: transparent;\n}\n\n.spinner-component.disabled {\n border: 2px solid var(--color-text-disabled);\n border-right-color: transparent;\n}\n\n.spinner-component {\n display: block;\n width: 12px;\n height: 12px;\n border-radius: 6px;\n border: 2px solid var(--color-background);\n animation: spinner-animation 1s linear infinite;\n border-right-color: transparent;\n margin-right: 4px;\n}\n\n@keyframes spinner-animation {\n from {\n transform: rotate(0);\n }\n\n to {\n transform: rotate(360deg);\n }\n}\n\n/*# sourceURL=button.css */\n");export default styles;