ct option { background-color: var(--color-background--lighten-05); } select option:focus { outline-color: var(--color-focus-border); } .vscode-light select option:focus { background-color: rgba(255, 255, 255, 0.4); } .vscode-dark select option:focus { background-color: rgba(0, 0, 0, 0.2); } .select-container { display: inline-block; position: relative; margin: 0 0.75em; } .select-container::after { content: "\eab4"; font-family: var(--vscode-font-family); font-size: 14px; width: 14px; height: 14px; line-height: 14px; position: absolute; top: 0; bottom: 0; right: 6px; margin: auto; pointer-events: none; } ul { list-style: none; margin: 0; padding: 0; } ::-webkit-scrollbar-corner { background-color: transparent !important; } code { background: rgba(255, 255, 255, 0.05); color: var(--color-foreground--75); border-radius: 3px; padding: 2px 4px; vertical-align: middle; } .button { background: none; border: none; border-radius: 3px; cursor: pointer; display: inline-block; font-size: 1.1rem; letter-spacing: 0.25em; margin: 1em 0.5em; padding: 1em 1.75em; text-decoration: none; text-transform: uppercase; user-select: none; white-space: nowrap; } .button:focus { outline: none; } .button[disabled] { cursor: default !important; opacity: 0.25 !important; } .button .shortcut { display: block; font-size: 0.8rem; margin: 5px 0 0 0; font-weight: 200; opacity: 0.6; } .button:hover .shortcut { opacity: 1; } .list--button { margin: -1rem 0; } .button--compact { padding: 0.6em 1em; } .button--big { font-size: 1.5rem; } .button--flat { transition: background-color 250ms, border-color 250ms, color 250ms; } .vscode-light .button--flat { border: 1px solid rgba(0, 0, 0, 0.6); color: black; } .vscode-dark .button--flat { border: 1px solid rgba(255, 255, 255, 0.6); color: white; } .vscode-light .button--flat:not([disabled]):hover, .vscode-light .button--flat:not([disabled]):focus { background-color: var(--vscode-button-hoverBackground); border-color: var(--color-button-background--darken-30); color: white; } .vscode-dark .button--flat:not([disabled]):hover, .vscode-dark .button--flat:not([disabled]):focus { background-color: white; border-color: white; color: black; } .preload .button--flat { transition-duration: 0s !important; } .button--flat-inverse { background-color: white; border: 1px solid white; color: black; font-weight: 600; transition: background-color 250ms, border-color 250ms, color 250ms; } .button--flat-inverse:not([disabled]):hover, .button--flat-inverse:not([disabled]):focus { background: rgba(0, 0, 0, 0.2); border-color: rgba(255, 255, 255, 0.6); color: white; } .preload .button--flat-inverse { transition-duration: 0s !important; } .button--flat-primary { background-color: var(--color-button-background); border: 1px solid var(--color-button-background); color: var(--color-button-foreground); font-weight: 600; transition: background-color 250ms, border-color 250ms, color 250ms; } .vscode-dark .button--flat-primary:not([disabled]):hover, .vscode-dark .button--flat-primary:not([disabled]):focus { background-color: white; border-color: white; color: black; } .vscode-light .button--flat-primary:not([disabled]):hover, .vscode-light .button--flat-primary:not([disabled]):focus { background-color: var(--color-button-background--darken-30); border-color: var(--color-button-background--darken-30); color: white; } .preload .button--flat-primary { transition-duration: 0s !important; } .button--flat-secondary { background-color: var(--color-button-secondary-background); border: 1px solid var(--color-button-secondary-background); color: var(--color-button-foreground); font-weight: 600; transition: background-color 250ms, border-color 250ms, color 250ms; } .vscode-dark .button--flat-secondary:not([disabled]):hover, .vscode-dark .button--flat-secondary:not([disabled]):focus { background-color: white; border-color: white; color: black; } .vscode-light .button--flat-secondary:not([disabled]):hover, .vscode-light .button--flat-secondary:not([disabled]):focus { background-color: var(--color-button-secondary-background--darken-30); border-color: var(--color-button-secondary-background--darken-30); color: white; } .preload .button--flat-secondary { transition-duration: 0s !important; } .button--flat-subtle { transition: background-color 250ms, border-color 250ms, color 250ms; } .vscode-light .button--flat-subtle { border: 1px solid rgba(0, 0, 0, 0.2); color: rgba(0, 0, 0, 0.6); } .vscode-dark .button--flat-subtle { border: 1px solid rgba(255, 255, 255, 0.2); color: rgba(255, 255, 255, 0.6); } .vscode-light .button--flat-subtle:not([disabled]):hover, .vscode-light .button--flat-subtle:not([disabled]):focus { background-color: var(--color-button-secondary-background--darken-30); border-color: var(--color-button-secondary-background--darken-30); color: white; } .vscode-dark .button--flat-subtle:not([disabled]):hover, .vscode-dark .button--flat-subtle:not([disabled]):focus { background-color: white; border-color: white; color: black; } .preload .button--flat-subtle { transition-duration: 0s !important; } .button--right { margin-left: auto; } .icon { background-color: var(--color-foreground); display: inline-block; height: 24px; margin-right: 3px; position: relative; width: 19px; top: 9px; } h2 .icon { top: 7px; } .icon__bulb { -webkit-mask-image: url('data:image/svg+xml;utf8,'); mask-image: url('data:image/svg+xml;utf8,'); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; opacity: 0.8; } .icon__chevron-down { -webkit-mask-image: url('data:image/svg+xml;utf8,'); mask-image: url('data:image/svg+xml;utf8,'); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; } .icon__gear { -webkit-mask-image: url('data:image/svg+xml;utf8,'); mask-image: url('data:image/svg+xml;utf8,'); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; } .icon__info { -webkit-mask-image: url('data:image/svg+xml;utf8,'); mask-image: url('data:image/svg+xml;utf8,'); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; } .icon--sm { height: 15px; width: 15px; top: 3px; } .icon--md { height: 30px; width: 24px; top: 12px; } .icon--lg { height: 36px; width: 30px; top: 15px; } .bold { font-weight: 600; } .center { text-align: center; } .hidden { display: none !important; } .m-0 { margin: 0 !important; } .mb-0 { margin-bottom: 0 !important; } .mb-05 { margin-bottom: 0.5em !important; } .mb-1 { margin-bottom: 1em !important; } .mb-2 { margin-bottom: 2em !important; } .ml-0 { margin-left: 0 !important; } .ml-1 { margin-left: 1em !important; } .ml-2 { margin-left: 2em !important; } .ml-3 { margin-left: 3em !important; } .ml-4 { margin-left: 4em !important; } .mr-0 { margin-right: 0 !important; } .mr-1 { margin-right: 1em !important; } .mr-2 { margin-right: 2em !important; } .mt-n1 { margin-top: -1em !important; } .mt-0 { margin-top: 0 !important; } .mt-05 { margin-top: 0.5em !important; } .mt-1 { margin-top: 1em !important; } .mt-2 { margin-top: 2em !important; } .non-interactive { cursor: default !important; } .nowrap { white-space: nowrap !important; } .vscode-dark .light { display: none; } .vscode-light .dark { display: none; } body.vscode-light { background-color: var(--color-background--darken-05); } header { display: grid; grid-template-columns: max-content minmax(396px, auto); grid-gap: 1em 4em; align-items: center; margin: 0 2em; } @media all and (max-width: 768px) { header { grid-template-columns: auto; justify-items: center; grid-gap: 1rem; } } .container { margin: 1em auto; max-width: 1200px; min-width: 450px; } .content__area { font-size: 1.4rem; } .vscode-dark .content__area { background-color: var(--color-background--lighten-05); } .vscode-light .content__area { background-color: var(--color-background); } @media all and (max-width: 768px) { .content__area { grid-column: span 1; } } .header__logo { display: flex; flex-direction: row; justify-content: center; margin-top: 2rem; gap: 3px; } .image__logo { height: 64px; width: 80px; } .brand { max-width: 100%; width: 500px; height: 500px; } .content__image__preview { max-width: 400px; max-height: 400px; } section { display: flex; flex-wrap: wrap; margin-bottom: 1em; padding: 1em; } section h2 { flex: 1 0 auto; display: flex; margin-top: 0; margin-bottom: 1em; } .section--settings { flex: 0 1 auto; display: flex; flex-wrap: wrap; border-radius: 6px; margin: 1em; padding: 1em; height: auto; } .vscode-dark .section--settings { background: var(--color-background--lighten-075); } .vscode-light .section--settings { background: var(--color-background--darken-05); } .section__content { flex: 1 1 auto; display: flex; flex-flow: column wrap; } .section__header { display: flex; align-items: baseline; flex: 0 1 auto; flex-flow: column; margin-bottom: 1em; margin-right: 1em; position: relative; width: 100%; } .section__header h2 { margin-bottom: 0; } .section__header-hint { margin: 0.25em 0; width: 550px; justify-content: center; word-spacing: 5px; text-align: justify; color: var(--vscode-foreground); font-weight: normal; font-family: var(--vscode-font-family); font-size: 14px; } .foreGroundColor { color: var(--vscode-foreground); font-weight: normal; } .subtitle-hint { width: 600px; } .section__footer { margin: 2rem; width: fit-content; word-spacing: 0px; } .footerText:hover { border-bottom: 3px solid #EE0000; } .section__brand__preview { flex: 0 1 auto; position: relative; margin-left: 0rem; } .section__whatsnew { display: flex; flex-direction: column; align-items: center; font-weight: 200; margin: 1rem; padding-left: 4rem; } .section__whatsnew img { width: 100%; max-width: 600px; border-radius: 8px; box-shadow: 0px 0px 1px 0px rgba(0, 0, 0, 0.8), 0px 0px 12px 1px rgba(0, 0, 0, 0.5); margin-bottom: 2rem; } .section__whatsnew a { font-weight: 600; } .setting__input { display: inline-flex; flex-wrap: nowrap; align-items: baseline; line-height: normal; margin: 0.5em 0; } .setting__input label { flex-grow: 0; } .setting__input label > select { margin-top: 0.25em; } .setting__input--big { font-size: 2.2rem; font-weight: 200; padding-bottom: 3rem; margin-bottom: 5rem; border-bottom: 3px solid #EE0000; max-width: 250em; } .setting__input--big label { white-space: nowrap; } .footer__input { padding-bottom: 1rem; margin-bottom: 0rem; } .highlight { color: #EE0000; display: inline; } #footer { width: 100%; display: inline-block; margin: 1.5rem auto; background: var("--vscode-editor-background"); color: #f2f2f2; font-size: "inherit"; font-family: "inherit"; padding-left: 3rem; } #footer ul li a { color: #FFFFFF; } .foot-col-1 { display: flex; flex-direction: column; margin: 0; } .foot-col-2 { width: 100%; display: flex; flex-direction: row; } .help { width: 30%; } .documentation { width: 20%; } @media (max-width: 1085px) { .foot-col-1 { display: block; width: 90%; margin: 0 auto; } } @media (max-width: 800px) { .lh-footer, .mid-footer, .rh-footer { display: block; width: 90%; margin: 0 auto; } } .footerIcons { vertical-align: middle; display: inline-flex; } ul { list-style: none; } li { position: relative; } .section__header ul { padding: 0; } .section__header li { display: flex; flex-direction: row; grid-gap: 1em; } .section__header li:before { position: relative; content: " "; display: flex; flex-direction: row; width: 0.45em; height: 0.45em; border: 2px solid #EE0000; border-radius: 50%; margin-top: 5px; } b { font-weight: bold !important; } /*# sourceMappingURL=index.css.map */ ØA —Eoúô