1106 lines
36 KiB
CSS
1106 lines
36 KiB
CSS
/* Root */
|
|
/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
|
|
/* Document
|
|
========================================================================== */
|
|
/**
|
|
* 1. Correct the line height in all browsers.
|
|
* 2. Prevent adjustments of font size after orientation changes in iOS.
|
|
*/
|
|
html {
|
|
line-height: 1.15;
|
|
/* 1 */
|
|
-webkit-text-size-adjust: 100%;
|
|
/* 2 */
|
|
}
|
|
/* Sections
|
|
========================================================================== */
|
|
/**
|
|
* Remove the margin in all browsers.
|
|
*/
|
|
body {
|
|
margin: 0;
|
|
}
|
|
/**
|
|
* Render the `main` element consistently in IE.
|
|
*/
|
|
main {
|
|
display: block;
|
|
}
|
|
/**
|
|
* Correct the font size and margin on `h1` elements within `section` and
|
|
* `article` contexts in Chrome, Firefox, and Safari.
|
|
*/
|
|
h1 {
|
|
font-size: 2em;
|
|
margin: 0.67em 0;
|
|
}
|
|
/* Grouping content
|
|
========================================================================== */
|
|
/**
|
|
* 1. Add the correct box sizing in Firefox.
|
|
* 2. Show the overflow in Edge and IE.
|
|
*/
|
|
hr {
|
|
box-sizing: content-box;
|
|
/* 1 */
|
|
height: 0;
|
|
/* 1 */
|
|
overflow: visible;
|
|
/* 2 */
|
|
}
|
|
/**
|
|
* 1. Correct the inheritance and scaling of font size in all browsers.
|
|
* 2. Correct the odd `em` font sizing in all browsers.
|
|
*/
|
|
pre {
|
|
font-family: monospace, monospace;
|
|
/* 1 */
|
|
font-size: 1em;
|
|
/* 2 */
|
|
}
|
|
/* Text-level semantics
|
|
========================================================================== */
|
|
/**
|
|
* Remove the gray background on active links in IE 10.
|
|
*/
|
|
a {
|
|
background-color: transparent;
|
|
}
|
|
/**
|
|
* 1. Remove the bottom border in Chrome 57-
|
|
* 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
|
|
*/
|
|
abbr[title] {
|
|
border-bottom: none;
|
|
/* 1 */
|
|
text-decoration: underline;
|
|
/* 2 */
|
|
text-decoration: underline dotted;
|
|
/* 2 */
|
|
}
|
|
/**
|
|
* Add the correct font weight in Chrome, Edge, and Safari.
|
|
*/
|
|
b,
|
|
strong {
|
|
font-weight: bolder;
|
|
}
|
|
/**
|
|
* 1. Correct the inheritance and scaling of font size in all browsers.
|
|
* 2. Correct the odd `em` font sizing in all browsers.
|
|
*/
|
|
code,
|
|
kbd,
|
|
samp {
|
|
font-family: monospace, monospace;
|
|
/* 1 */
|
|
font-size: 1em;
|
|
/* 2 */
|
|
}
|
|
/**
|
|
* Add the correct font size in all browsers.
|
|
*/
|
|
small {
|
|
font-size: 80%;
|
|
}
|
|
/**
|
|
* Prevent `sub` and `sup` elements from affecting the line height in
|
|
* all browsers.
|
|
*/
|
|
sub,
|
|
sup {
|
|
font-size: 75%;
|
|
line-height: 0;
|
|
position: relative;
|
|
vertical-align: baseline;
|
|
}
|
|
sub {
|
|
bottom: -0.25em;
|
|
}
|
|
sup {
|
|
top: -0.5em;
|
|
}
|
|
/* Embedded content
|
|
========================================================================== */
|
|
/**
|
|
* Remove the border on images inside links in IE 10.
|
|
*/
|
|
img {
|
|
border-style: none;
|
|
}
|
|
/* Forms
|
|
========================================================================== */
|
|
/**
|
|
* 1. Change the font styles in all browsers.
|
|
* 2. Remove the margin in Firefox and Safari.
|
|
*/
|
|
button,
|
|
input,
|
|
optgroup,
|
|
select,
|
|
textarea {
|
|
font-family: inherit;
|
|
/* 1 */
|
|
font-size: 100%;
|
|
/* 1 */
|
|
line-height: 1.15;
|
|
/* 1 */
|
|
margin: 0;
|
|
/* 2 */
|
|
}
|
|
/**
|
|
* Show the overflow in IE.
|
|
* 1. Show the overflow in Edge.
|
|
*/
|
|
button,
|
|
input {
|
|
/* 1 */
|
|
overflow: visible;
|
|
}
|
|
/**
|
|
* Remove the inheritance of text transform in Edge, Firefox, and IE.
|
|
* 1. Remove the inheritance of text transform in Firefox.
|
|
*/
|
|
button,
|
|
select {
|
|
/* 1 */
|
|
text-transform: none;
|
|
}
|
|
/**
|
|
* Correct the inability to style clickable types in iOS and Safari.
|
|
*/
|
|
button,
|
|
[type='button'],
|
|
[type='reset'],
|
|
[type='submit'] {
|
|
-webkit-appearance: button;
|
|
}
|
|
/**
|
|
* Remove the inner border and padding in Firefox.
|
|
*/
|
|
button::-moz-focus-inner,
|
|
[type='button']::-moz-focus-inner,
|
|
[type='reset']::-moz-focus-inner,
|
|
[type='submit']::-moz-focus-inner {
|
|
border-style: none;
|
|
padding: 0;
|
|
}
|
|
/**
|
|
* Restore the focus styles unset by the previous rule.
|
|
*/
|
|
button:-moz-focusring,
|
|
[type='button']:-moz-focusring,
|
|
[type='reset']:-moz-focusring,
|
|
[type='submit']:-moz-focusring {
|
|
outline: 1px dotted ButtonText;
|
|
}
|
|
/**
|
|
* Correct the padding in Firefox.
|
|
*/
|
|
fieldset {
|
|
padding: 0.35em 0.75em 0.625em;
|
|
}
|
|
/**
|
|
* 1. Correct the text wrapping in Edge and IE.
|
|
* 2. Correct the color inheritance from `fieldset` elements in IE.
|
|
* 3. Remove the padding so developers are not caught out when they zero out
|
|
* `fieldset` elements in all browsers.
|
|
*/
|
|
legend {
|
|
box-sizing: border-box;
|
|
/* 1 */
|
|
color: inherit;
|
|
/* 2 */
|
|
display: table;
|
|
/* 1 */
|
|
max-width: 100%;
|
|
/* 1 */
|
|
padding: 0;
|
|
/* 3 */
|
|
white-space: normal;
|
|
/* 1 */
|
|
}
|
|
/**
|
|
* Add the correct vertical alignment in Chrome, Firefox, and Opera.
|
|
*/
|
|
progress {
|
|
vertical-align: baseline;
|
|
}
|
|
/**
|
|
* Remove the default vertical scrollbar in IE 10+.
|
|
*/
|
|
textarea {
|
|
overflow: auto;
|
|
}
|
|
/**
|
|
* 1. Add the correct box sizing in IE 10.
|
|
* 2. Remove the padding in IE 10.
|
|
*/
|
|
[type='checkbox'],
|
|
[type='radio'] {
|
|
box-sizing: border-box;
|
|
/* 1 */
|
|
padding: 0;
|
|
/* 2 */
|
|
}
|
|
/**
|
|
* Correct the cursor style of increment and decrement buttons in Chrome.
|
|
*/
|
|
[type='number']::-webkit-inner-spin-button,
|
|
[type='number']::-webkit-outer-spin-button {
|
|
height: auto;
|
|
}
|
|
/**
|
|
* 1. Correct the odd appearance in Chrome and Safari.
|
|
* 2. Correct the outline style in Safari.
|
|
*/
|
|
[type='search'] {
|
|
-webkit-appearance: textfield;
|
|
/* 1 */
|
|
outline-offset: -2px;
|
|
/* 2 */
|
|
}
|
|
/**
|
|
* Remove the inner padding in Chrome and Safari on macOS.
|
|
*/
|
|
[type='search']::-webkit-search-decoration {
|
|
-webkit-appearance: none;
|
|
}
|
|
/**
|
|
* 1. Correct the inability to style clickable types in iOS and Safari.
|
|
* 2. Change font properties to `inherit` in Safari.
|
|
*/
|
|
::-webkit-file-upload-button {
|
|
-webkit-appearance: button;
|
|
/* 1 */
|
|
font: inherit;
|
|
/* 2 */
|
|
}
|
|
/* Interactive
|
|
========================================================================== */
|
|
/*
|
|
* Add the correct display in Edge, IE 10+, and Firefox.
|
|
*/
|
|
details {
|
|
display: block;
|
|
}
|
|
/*
|
|
* Add the correct display in all browsers.
|
|
*/
|
|
summary {
|
|
display: list-item;
|
|
}
|
|
/* Misc
|
|
========================================================================== */
|
|
/**
|
|
* Add the correct display in IE 10+.
|
|
*/
|
|
template {
|
|
display: none;
|
|
}
|
|
/**
|
|
* Add the correct display in IE 10.
|
|
*/
|
|
[hidden] {
|
|
display: none;
|
|
}
|
|
/* Var */
|
|
:root {
|
|
--colorPrimaryBg: #111a2c;
|
|
--colorPrimaryBgHover: #112545;
|
|
--colorPrimaryBorder: #15325b;
|
|
--colorPrimaryBorderHover: #15417e;
|
|
--colorPrimaryHover: #3c89e8;
|
|
--colorPrimary: #1668dc;
|
|
--colorPrimaryActive: #1554ad;
|
|
--colorPrimaryTextHover: #3c89e8;
|
|
--colorPrimaryText: #1668dc;
|
|
--colorPrimaryTextActive: #1554ad;
|
|
--colorErrorBg: #2c1618;
|
|
--colorErrorBgHover: #451d1f;
|
|
--colorErrorBorder: #5b2526;
|
|
--colorErrorBorderHover: #7e2e2f;
|
|
--colorErrorHover: #e86e6b;
|
|
--colorError: #dc4446;
|
|
--colorErrorActive: #ad393a;
|
|
--colorErrorTextHover: #e86e6b;
|
|
--colorErrorText: #dc4446;
|
|
--colorErrorTextActive: #ad393a;
|
|
--colorText: rgba(255, 255, 255, 0.85);
|
|
--colorTextSecondary: rgba(255, 255, 255, 0.65);
|
|
--colorTextTertiary: rgba(255, 255, 255, 0.45);
|
|
--colorTextQuaternary: rgba(255, 255, 255, 0.25);
|
|
--colorBgContainer: #141414;
|
|
--colorBgElevated: #1f1f1f;
|
|
--colorBgLayout: #141414;
|
|
--colorBgSpotlight: #424242;
|
|
--colorBgMask: rgba(0, 0, 0, 0.45);
|
|
--colorBorder: #424242;
|
|
--colorBorderSecondary: #303030;
|
|
--colorFill: rgba(255, 255, 255, 0.18);
|
|
--colorFillSecondary: rgba(255, 255, 255, 0.12);
|
|
--colorFillTertiary: rgba(255, 255, 255, 0.08);
|
|
--colorFillQuaternary: rgba(255, 255, 255, 0.04);
|
|
/* Typography */
|
|
--fontSizeBase: 14;
|
|
--fontSizeSM: calc(1px * var(--fontSizeBase) - 2px);
|
|
--fontSize: calc(1px * var(--fontSizeBase));
|
|
--fontSizeLG: calc(1px * var(--fontSizeBase) + 2px);
|
|
--fontSizeXL: calc(1px * var(--fontSizeBase) + 4px);
|
|
/* Spacing */
|
|
--marginBase: 4;
|
|
--marginXXS: calc(1px * var(--marginBase));
|
|
--marginXS: calc(2px * var(--marginBase));
|
|
--marginSM: calc(3px * var(--marginBase));
|
|
--margin: calc(4px * var(--marginBase));
|
|
--marginMD: calc(5px * var(--marginBase));
|
|
--marginLG: calc(6px * var(--marginBase));
|
|
--marginXL: calc(8px * var(--marginBase));
|
|
--marginXXL: calc(12px * var(--marginBase));
|
|
--paddingBase: 4;
|
|
--paddingXXS: calc(1px * var(--paddingBase));
|
|
--paddingXS: calc(2px * var(--paddingBase));
|
|
--paddingSM: calc(3px * var(--paddingBase));
|
|
--padding: calc(4px * var(--paddingBase));
|
|
--paddingMD: calc(5px * var(--paddingBase));
|
|
--paddingLG: calc(6px * var(--paddingBase));
|
|
--paddingXL: calc(8px * var(--paddingBase));
|
|
/* Shadow */
|
|
--boxShadow: 0 6px 16px 0 rgba(0, 0, 0, 0.08),
|
|
0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05);
|
|
--boxShadowSecondary: 0 6px 16px 0 rgba(0, 0, 0, 0.08),
|
|
0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05);
|
|
/* Border */
|
|
--borderRadiusBase: 2;
|
|
--borderRadiusXS: calc(1px * var(--borderRadiusBase));
|
|
--borderRadiusSM: calc(2px * var(--borderRadiusBase));
|
|
--borderRadius: calc(3px * var(--borderRadiusBase));
|
|
--borderRadiusLG: calc(4px * var(--borderRadiusBase));
|
|
/* Other */
|
|
--logo: url('https://gw.alipayobjects.com/zos/bmw-prod/9ecb2822-1592-4cb0-a087-ce0097fef2ca.svg');
|
|
--favicon: url('https://gw.alipayobjects.com/zos/bmw-prod/51a51720-8a30-4430-b6c9-be5712364f04.svg');
|
|
--galleryBackground: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAIAAAD8GO2jAAAABGdBTUEAALGPC/xhBQAAADhlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAAqACAAQAAAABAAAAIKADAAQAAAABAAAAIAAAAACPTkDJAAAAZUlEQVRIDe2VMQoAMAgDa9/g/1/oIzrpZBCh2dLFkkoDF0Fz99OdiOjks+2/7S8fRRmMMIVoRGSoYzvvqF8ZIMKlC1GhQBc6IkPzq32QmdAzkEGihpWOSPsAss8HegYySNSw0hE9WQ4StafZFqkAAAAASUVORK5CYII=)
|
|
0% 0% / 20px;
|
|
}
|
|
:root {
|
|
/* Colors */
|
|
--neutral-50: var(--colorText);
|
|
--neutral-100: var(--colorText);
|
|
--neutral-200: var(--colorTextSecondary);
|
|
--neutral-300: var(--colorTextTertiary);
|
|
--neutral-400: var(--colorTextQuaternary);
|
|
--neutral-500: var(--colorFill);
|
|
--neutral-600: var(--colorFillSecondary);
|
|
--neutral-700: var(--colorFillTertiary);
|
|
--neutral-800: var(--colorFillQuaternary);
|
|
--neutral-900: var(--colorBgElevated);
|
|
--neutral-950: var(--colorBgContainer);
|
|
--primary-50: #eff6ff;
|
|
--primary-100: #dbeafe;
|
|
--primary-200: #bfdbfe;
|
|
--primary-300: #93c5fd;
|
|
--primary-400: var(--colorPrimaryTextHover);
|
|
--primary-500: var(--colorPrimaryText);
|
|
--primary-600: var(--colorPrimary);
|
|
--primary-700: var(--colorPrimary);
|
|
--primary-800: var(--colorPrimaryBorder);
|
|
--primary-900: var(--colorPrimaryBgHover);
|
|
--primary-950: var(--colorPrimaryBg);
|
|
--secondary-50: #eff6ff;
|
|
--secondary-100: #dbeafe;
|
|
--secondary-200: #bfdbfe;
|
|
--secondary-300: #93c5fd;
|
|
--secondary-400: var(--colorPrimaryTextHover);
|
|
--secondary-500: var(--colorPrimaryText);
|
|
--secondary-600: var(--colorPrimary);
|
|
--secondary-700: var(--colorPrimary);
|
|
--secondary-800: var(--colorPrimaryBorder);
|
|
--secondary-900: var(--colorPrimaryBgHover);
|
|
--secondary-950: var(--colorPrimaryBg);
|
|
--error-background-fill: var(--colorErrorBg);
|
|
--error-text-color: var(--colorError);
|
|
--background-fill-primary: var(--neutral-950);
|
|
--background-fill-secondary: var(--neutral-900);
|
|
--stat-background-fill: var(--primary-300);
|
|
--color-accent: var(--primary-500);
|
|
--color-accent-soft: var(--primary-50);
|
|
--link-text-color: var(--secondary-600);
|
|
--link-text-color-active: var(--secondary-600);
|
|
--link-text-color-hover: var(--secondary-700);
|
|
--link-text-color-visited: var(--secondary-500);
|
|
--loader-color: var(--color-accent);
|
|
/* Typography */
|
|
--font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
|
|
'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji',
|
|
'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
|
|
--font-mono: 'Hack', 'IBM Plex Mono', 'ui-monospace', 'Consolas', monospace;
|
|
--prose-header-text-weight: 600;
|
|
--prose-text-weight: 400;
|
|
--section-header-text-weight: 400;
|
|
--text-lg: var(--fontSizeLG);
|
|
--text-md: var(--fontSize);
|
|
--text-sm: var(--fontSizeSM);
|
|
--text-xl: var(--fontSizeXL);
|
|
--text-xs: var(--fontSizeSM);
|
|
--text-xxl: var(--fontSizeXL);
|
|
--text-xxs: var(--fontSizeSM);
|
|
--prose-text-size: var(--text-md);
|
|
--section-header-text-size: var(--text-md);
|
|
/* Spacing */
|
|
--form-gap-width: 0px;
|
|
--spacing-lg: 8px;
|
|
--spacing-md: 6px;
|
|
--spacing-sm: 4px;
|
|
--spacing-xl: 10px;
|
|
--spacing-xs: 2px;
|
|
--spacing-xxl: 16px;
|
|
--spacing-xxs: 1px;
|
|
--layout-gap: var(--spacing-xxl);
|
|
/* Border */
|
|
--error-border-color: #fecaca;
|
|
--error-border-width: 1px;
|
|
--radius-lg: var(--borderRadiusLG);
|
|
--radius-md: var(--borderRadius);
|
|
--radius-sm: var(--borderRadiusSM);
|
|
--radius-xl: var(--borderRadiusXS);
|
|
--radius-xs: var(--borderRadiusSM);
|
|
--radius-xxl: var(--borderRadiusLG);
|
|
--radius-xxs: var(--borderRadiusXS);
|
|
--border-color-accent: var(--primary-300);
|
|
--border-color-primary: var(--neutral-200);
|
|
--container-radius: var(--radius-lg);
|
|
--embed-radius: var(--radius-lg);
|
|
/* BoxShadow */
|
|
--shadow-spread: 1px;
|
|
--shadow-drop: var(--boxShadow);
|
|
--shadow-drop-lg: var(--boxShadowSecondary);
|
|
--shadow-inset: var(--boxShadow) inset;
|
|
/* Body */
|
|
--body-text-weight: 400;
|
|
--body-background-fill: var(--background-fill-primary);
|
|
--body-text-color: var(--neutral-800);
|
|
--body-text-color-subdued: var(--neutral-400);
|
|
--body-text-size: var(--text-md);
|
|
/* Block */
|
|
--block-border-width: 1px;
|
|
--block-info-text-weight: 400;
|
|
--block-label-border-width: 1px;
|
|
--block-label-margin: 0;
|
|
--block-label-text-weight: 400;
|
|
--block-shadow: none;
|
|
--block-title-background-fill: none;
|
|
--block-title-border-color: none;
|
|
--block-title-border-width: 0px;
|
|
--block-title-padding: 0;
|
|
--block-title-radius: none;
|
|
--block-title-text-weight: 400;
|
|
--block-background-fill: var(--background-fill-primary);
|
|
--block-border-color: var(--border-color-primary);
|
|
--block-info-text-color: var(--body-text-color-subdued);
|
|
--block-info-text-size: var(--text-sm);
|
|
--block-label-background-fill: var(--background-fill-primary);
|
|
--block-label-border-color: var(--border-color-primary);
|
|
--block-label-padding: var(--spacing-sm) var(--spacing-lg);
|
|
--block-label-radius: calc(var(--radius-lg) - 1px) 0
|
|
calc(var(--radius-lg) - 1px) 0;
|
|
--block-label-right-radius: 0 calc(var(--radius-lg) - 1px) 0
|
|
calc(var(--radius-lg) - 1px);
|
|
--block-label-text-color: var(--neutral-500);
|
|
--block-label-text-size: var(--text-sm);
|
|
--block-padding: var(--spacing-xl) calc(var(--spacing-xl) + 2px);
|
|
--block-radius: var(--radius-lg);
|
|
--block-title-text-color: var(--neutral-500);
|
|
--block-title-text-size: var(--text-md);
|
|
/* Panel */
|
|
--panel-border-width: 0;
|
|
--panel-background-fill: var(--background-fill-secondary);
|
|
--panel-border-color: var(--border-color-primary);
|
|
/* Button */
|
|
--button-large-text-weight: 600;
|
|
--button-shadow: none;
|
|
--button-shadow-active: none;
|
|
--button-shadow-hover: none;
|
|
--button-small-text-weight: 400;
|
|
--button-transition: background-color 0.2s ease;
|
|
--button-border-width: var(--input-border-width);
|
|
--button-cancel-background-fill: var(--button-secondary-background-fill);
|
|
--button-cancel-background-fill-hover: var(--button-cancel-background-fill);
|
|
--button-cancel-border-color: var(--button-secondary-border-color);
|
|
--button-cancel-border-color-hover: var(--button-cancel-border-color);
|
|
--button-cancel-text-color: var(--button-secondary-text-color);
|
|
--button-cancel-text-color-hover: var(--button-cancel-text-color);
|
|
--button-large-padding: var(--spacing-lg) calc(2 * var(--spacing-lg));
|
|
--button-large-radius: var(--radius-lg);
|
|
--button-large-text-size: var(--text-lg);
|
|
--button-primary-background-fill: var(--primary-200);
|
|
--button-primary-background-fill-hover: var(--button-primary-background-fill);
|
|
--button-primary-border-color: var(--primary-200);
|
|
--button-primary-border-color-hover: var(--button-primary-border-color);
|
|
--button-primary-text-color: var(--primary-600);
|
|
--button-primary-text-color-hover: var(--button-primary-text-color);
|
|
--button-secondary-background-fill: var(--neutral-200);
|
|
--button-secondary-background-fill-hover: var(
|
|
--button-secondary-background-fill
|
|
);
|
|
--button-secondary-border-color: var(--neutral-200);
|
|
--button-secondary-border-color-hover: var(--button-secondary-border-color);
|
|
--button-secondary-text-color: var(--neutral-700);
|
|
--button-secondary-text-color-hover: var(--button-secondary-text-color);
|
|
--button-small-padding: var(--spacing-sm) calc(2 * var(--spacing-sm));
|
|
--button-small-radius: var(--radius-lg);
|
|
--button-small-text-size: var(--text-md);
|
|
/* Checkbox */
|
|
--checkbox-check: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e");
|
|
--checkbox-label-shadow: none;
|
|
--checkbox-label-text-weight: 400;
|
|
--checkbox-background-color: var(--background-fill-primary);
|
|
--checkbox-background-color-focus: var(--checkbox-background-color);
|
|
--checkbox-background-color-hover: var(--checkbox-background-color);
|
|
--checkbox-background-color-selected: var(--secondary-600);
|
|
--checkbox-border-color: var(--neutral-300);
|
|
--checkbox-border-color-focus: var(--secondary-500);
|
|
--checkbox-border-color-hover: var(--neutral-300);
|
|
--checkbox-border-color-selected: var(--secondary-600);
|
|
--checkbox-border-radius: var(--radius-sm);
|
|
--checkbox-border-width: var(--input-border-width);
|
|
--checkbox-label-background-fill: var(--button-secondary-background-fill);
|
|
--checkbox-label-background-fill-hover: var(
|
|
--button-secondary-background-fill-hover
|
|
);
|
|
--checkbox-label-background-fill-selected: var(
|
|
--checkbox-label-background-fill
|
|
);
|
|
--checkbox-label-border-color: var(--border-color-primary);
|
|
--checkbox-label-border-color-hover: var(--checkbox-label-border-color);
|
|
--checkbox-label-border-width: var(--input-border-width);
|
|
--checkbox-label-gap: var(--spacing-lg);
|
|
--checkbox-label-padding: var(--spacing-md) calc(2 * var(--spacing-md));
|
|
--checkbox-label-text-color: var(--body-text-color);
|
|
--checkbox-label-text-color-selected: var(--checkbox-label-text-color);
|
|
--checkbox-label-text-size: var(--text-md);
|
|
--checkbox-shadow: var(--input-shadow);
|
|
/* Input */
|
|
--input-border-width: 0px;
|
|
--input-shadow: none;
|
|
--input-text-weight: 400;
|
|
--input-background-fill: var(--neutral-100);
|
|
--input-background-fill-focus: var(--secondary-500);
|
|
--input-background-fill-hover: var(--input-background-fill);
|
|
--input-border-color: var(--border-color-primary);
|
|
--input-border-color-focus: var(--secondary-300);
|
|
--input-border-color-hover: var(--input-border-color);
|
|
--input-padding: var(--spacing-xl);
|
|
--input-placeholder-color: var(--neutral-400);
|
|
--input-radius: var(--radius-lg);
|
|
--input-shadow-focus: var(--input-shadow);
|
|
--input-text-size: var(--text-md);
|
|
/* Table */
|
|
--table-even-background-fill: white;
|
|
--table-border-color: var(--neutral-300);
|
|
--table-odd-background-fill: var(--neutral-50);
|
|
--table-radius: var(--radius-lg);
|
|
--table-row-focus: var(--color-accent-soft);
|
|
/* Other */
|
|
--radio-circle: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='8' cy='8' r='3'/%3e%3c/svg%3e");
|
|
}
|
|
.dark {
|
|
/* Colors */
|
|
--neutral-50: var(--colorText);
|
|
--neutral-100: var(--colorText);
|
|
--neutral-200: var(--colorTextSecondary);
|
|
--neutral-300: var(--colorTextTertiary);
|
|
--neutral-400: var(--colorTextQuaternary);
|
|
--neutral-500: var(--colorFill);
|
|
--neutral-600: var(--colorFillSecondary);
|
|
--neutral-700: var(--colorFillTertiary);
|
|
--neutral-800: var(--colorFillQuaternary);
|
|
--neutral-900: var(--colorBgElevated);
|
|
--neutral-950: var(--colorBgContainer);
|
|
--primary-50: #eff6ff;
|
|
--primary-100: #dbeafe;
|
|
--primary-200: #bfdbfe;
|
|
--primary-300: #93c5fd;
|
|
--primary-400: var(--colorPrimaryTextHover);
|
|
--primary-500: var(--colorPrimaryText);
|
|
--primary-600: var(--colorPrimary);
|
|
--primary-700: var(--colorPrimary);
|
|
--primary-800: var(--colorPrimaryBorder);
|
|
--primary-900: var(--colorPrimaryBgHover);
|
|
--primary-950: var(--colorPrimaryBg);
|
|
--secondary-50: #eff6ff;
|
|
--secondary-100: #dbeafe;
|
|
--secondary-200: #bfdbfe;
|
|
--secondary-300: #93c5fd;
|
|
--secondary-400: var(--colorPrimaryTextHover);
|
|
--secondary-500: var(--colorPrimaryText);
|
|
--secondary-600: var(--colorPrimary);
|
|
--secondary-700: var(--colorPrimary);
|
|
--secondary-800: var(--colorPrimaryBorder);
|
|
--secondary-900: var(--colorPrimaryBgHover);
|
|
--secondary-950: var(--colorPrimaryBg);
|
|
--error-text-color: #ef4444;
|
|
--error-background-fill: var(--colorErrorBg);
|
|
--background-fill-primary: var(--neutral-950);
|
|
--background-fill-secondary: var(--neutral-900);
|
|
--stat-background-fill: var(--primary-500);
|
|
--link-text-color-active: var(--secondary-500);
|
|
--link-text-color: var(--secondary-500);
|
|
--link-text-color-hover: var(--secondary-400);
|
|
--link-text-color-visited: var(--secondary-600);
|
|
--color-accent: var(--primary-500);
|
|
--color-accent-soft: var(--neutral-700);
|
|
--loader-color: var(--color-accent);
|
|
/* Typography */
|
|
--font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
|
|
'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji',
|
|
'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
|
|
--font-mono: 'Hack', 'IBM Plex Mono', 'ui-monospace', 'Consolas', monospace;
|
|
--prose-header-text-weight: 600;
|
|
--prose-text-weight: 400;
|
|
--section-header-text-weight: 400;
|
|
--text-lg: var(--fontSizeLG);
|
|
--text-md: var(--fontSize);
|
|
--text-sm: var(--fontSizeSM);
|
|
--text-xl: var(--fontSizeXL);
|
|
--text-xs: var(--fontSizeSM);
|
|
--text-xxl: var(--fontSizeXL);
|
|
--text-xxs: var(--fontSizeSM);
|
|
--prose-text-size: var(--text-md);
|
|
--section-header-text-size: var(--text-md);
|
|
/* Spacing */
|
|
--form-gap-width: 0px;
|
|
--spacing-lg: 8px;
|
|
--spacing-md: 6px;
|
|
--spacing-sm: 4px;
|
|
--spacing-xl: 10px;
|
|
--spacing-xs: 2px;
|
|
--spacing-xxl: 16px;
|
|
--spacing-xxs: 1px;
|
|
--layout-gap: var(--spacing-xxl);
|
|
/* Border */
|
|
--error-border-width: 1px;
|
|
--radius-lg: var(--borderRadiusLG);
|
|
--radius-md: var(--borderRadius);
|
|
--radius-sm: var(--borderRadiusSM);
|
|
--radius-xl: var(--borderRadiusXS);
|
|
--radius-xs: var(--borderRadiusSM);
|
|
--radius-xxl: var(--borderRadiusLG);
|
|
--radius-xxs: var(--borderRadiusXS);
|
|
--border-color-accent: var(--neutral-600);
|
|
--border-color-primary: var(--neutral-700);
|
|
--error-border-color: var(--border-color-primary);
|
|
--container-radius: var(--radius-lg);
|
|
--embed-radius: var(--radius-lg);
|
|
/* BoxShadow */
|
|
--shadow-spread: 1px;
|
|
--shadow-drop: var(--boxShadow);
|
|
--shadow-drop-lg: var(--boxShadowSecondary);
|
|
--shadow-inset: var(--boxShadow) inset;
|
|
/* Body */
|
|
--body-text-weight: 400;
|
|
--body-background-fill: var(--background-fill-primary);
|
|
--body-text-color: var(--neutral-100);
|
|
--body-text-color-subdued: var(--neutral-400);
|
|
--body-text-size: var(--text-md);
|
|
/* Block */
|
|
--block-border-width: 1px;
|
|
--block-info-text-weight: 400;
|
|
--block-label-border-width: 1px;
|
|
--block-label-margin: 0;
|
|
--block-label-text-weight: 400;
|
|
--block-shadow: none;
|
|
--block-title-background-fill: none;
|
|
--block-title-border-color: none;
|
|
--block-title-border-width: 0px;
|
|
--block-title-padding: 0;
|
|
--block-title-radius: none;
|
|
--block-title-text-weight: 400;
|
|
--block-background-fill: var(--neutral-800);
|
|
--block-border-color: var(--border-color-primary);
|
|
--block-info-text-color: var(--body-text-color-subdued);
|
|
--block-label-background-fill: var(--background-fill-secondary);
|
|
--block-label-border-color: var(--border-color-primary);
|
|
--block-label-text-color: var(--neutral-200);
|
|
--block-title-text-color: var(--neutral-200);
|
|
--block-info-text-size: var(--text-sm);
|
|
--block-label-padding: var(--spacing-sm) var(--spacing-lg);
|
|
--block-label-radius: calc(var(--radius-lg) - 1px) 0
|
|
calc(var(--radius-lg) - 1px) 0;
|
|
--block-label-right-radius: 0 calc(var(--radius-lg) - 1px) 0
|
|
calc(var(--radius-lg) - 1px);
|
|
--block-label-text-size: var(--text-sm);
|
|
--block-padding: var(--spacing-xl) calc(var(--spacing-xl) + 2px);
|
|
--block-radius: var(--radius-lg);
|
|
--block-title-text-size: var(--text-md);
|
|
/* Panel */
|
|
--panel-border-width: 0;
|
|
--panel-background-fill: var(--background-fill-secondary);
|
|
--panel-border-color: var(--border-color-primary);
|
|
/* Button */
|
|
--button-primary-text-color: white;
|
|
--button-secondary-text-color: white;
|
|
--button-large-text-weight: 600;
|
|
--button-shadow: none;
|
|
--button-shadow-active: none;
|
|
--button-shadow-hover: none;
|
|
--button-small-text-weight: 400;
|
|
--button-transition: background-color 0.2s ease;
|
|
--button-border-width: var(--input-border-width);
|
|
--button-cancel-background-fill: var(--button-secondary-background-fill);
|
|
--button-cancel-background-fill-hover: var(--button-cancel-background-fill);
|
|
--button-cancel-border-color: var(--button-secondary-border-color);
|
|
--button-cancel-border-color-hover: var(--button-cancel-border-color);
|
|
--button-cancel-text-color: var(--button-secondary-text-color);
|
|
--button-cancel-text-color-hover: var(--button-cancel-text-color);
|
|
--button-primary-background-fill: var(--primary-700);
|
|
--button-primary-background-fill-hover: var(--button-primary-background-fill);
|
|
--button-primary-border-color: var(--primary-600);
|
|
--button-primary-border-color-hover: var(--button-primary-border-color);
|
|
--button-primary-text-color-hover: var(--button-primary-text-color);
|
|
--button-secondary-background-fill: var(--neutral-600);
|
|
--button-secondary-background-fill-hover: var(
|
|
--button-secondary-background-fill
|
|
);
|
|
--button-secondary-border-color: var(--neutral-600);
|
|
--button-secondary-border-color-hover: var(--button-secondary-border-color);
|
|
--button-secondary-text-color-hover: var(--button-secondary-text-color);
|
|
--button-large-padding: var(--spacing-lg) calc(2 * var(--spacing-lg));
|
|
--button-large-radius: var(--radius-lg);
|
|
--button-large-text-size: var(--text-lg);
|
|
--button-small-padding: var(--spacing-sm) calc(2 * var(--spacing-sm));
|
|
--button-small-radius: var(--radius-lg);
|
|
--button-small-text-size: var(--text-md);
|
|
/* Checkbox */
|
|
--checkbox-check: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e");
|
|
--checkbox-label-shadow: none;
|
|
--checkbox-label-text-weight: 400;
|
|
--checkbox-background-color: var(--neutral-800);
|
|
--checkbox-background-color-focus: var(--checkbox-background-color);
|
|
--checkbox-background-color-hover: var(--checkbox-background-color);
|
|
--checkbox-background-color-selected: var(--secondary-600);
|
|
--checkbox-border-color: var(--neutral-700);
|
|
--checkbox-border-color-focus: var(--secondary-500);
|
|
--checkbox-border-color-hover: var(--neutral-600);
|
|
--checkbox-border-color-selected: var(--secondary-600);
|
|
--checkbox-border-width: var(--input-border-width);
|
|
--checkbox-label-background-fill: var(--button-secondary-background-fill);
|
|
--checkbox-label-background-fill-hover: var(
|
|
--button-secondary-background-fill-hover
|
|
);
|
|
--checkbox-label-background-fill-selected: var(
|
|
--checkbox-label-background-fill
|
|
);
|
|
--checkbox-label-border-color: var(--border-color-primary);
|
|
--checkbox-label-border-color-hover: var(--checkbox-label-border-color);
|
|
--checkbox-label-border-width: var(--input-border-width);
|
|
--checkbox-label-text-color: var(--body-text-color);
|
|
--checkbox-label-text-color-selected: var(--checkbox-label-text-color);
|
|
--checkbox-border-radius: var(--radius-sm);
|
|
--checkbox-label-gap: var(--spacing-lg);
|
|
--checkbox-label-padding: var(--spacing-md) calc(2 * var(--spacing-md));
|
|
--checkbox-label-text-size: var(--text-md);
|
|
--checkbox-shadow: var(--input-shadow);
|
|
/* Input */
|
|
--input-border-width: 0px;
|
|
--input-shadow: none;
|
|
--input-text-weight: 400;
|
|
--input-background-fill: var(--neutral-700);
|
|
--input-background-fill-focus: var(--secondary-600);
|
|
--input-background-fill-hover: var(--input-background-fill);
|
|
--input-border-color: var(--border-color-primary);
|
|
--input-border-color-focus: var(--neutral-700);
|
|
--input-border-color-hover: var(--input-border-color);
|
|
--input-placeholder-color: var(--neutral-500);
|
|
--input-padding: var(--spacing-xl);
|
|
--input-radius: var(--radius-lg);
|
|
--input-shadow-focus: var(--input-shadow);
|
|
--input-text-size: var(--text-md);
|
|
/* Table */
|
|
--table-border-color: var(--neutral-700);
|
|
--table-even-background-fill: var(--neutral-950);
|
|
--table-odd-background-fill: var(--neutral-900);
|
|
--table-row-focus: var(--color-accent-soft);
|
|
--table-radius: var(--radius-lg);
|
|
/* Other */
|
|
--radio-circle: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='8' cy='8' r='3'/%3e%3c/svg%3e");
|
|
}
|
|
/* Components */
|
|
#quicksettings {
|
|
position: fixed;
|
|
z-index: 1000;
|
|
flex-wrap: nowrap;
|
|
top: 12px;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
#quicksettings:before {
|
|
content: '';
|
|
display: block;
|
|
background: var(--logo) no-repeat;
|
|
width: 129px;
|
|
height: 26px;
|
|
z-index: 1000;
|
|
margin-right: 36px;
|
|
margin-left: 16px;
|
|
margin-top: 12px;
|
|
}
|
|
#quicksettings:after {
|
|
content: '';
|
|
display: block;
|
|
position: fixed;
|
|
width: 100vw;
|
|
height: 121px;
|
|
top: 0;
|
|
left: 0;
|
|
z-index: 999;
|
|
border-block-end: 1px solid var(--colorBorderSecondary);
|
|
background: var(--colorFillQuaternary);
|
|
backdrop-filter: blur(24px);
|
|
}
|
|
#quicksettings > * {
|
|
z-index: 1000;
|
|
}
|
|
#quicksettings button.svelte-1ipelgc {
|
|
margin-bottom: 3px;
|
|
}
|
|
#tabs > .tabitem {
|
|
background: transparent;
|
|
border: none;
|
|
padding: var(--padding);
|
|
margin-top: 118px;
|
|
}
|
|
#tabs > div:first-child {
|
|
position: fixed;
|
|
top: 90px;
|
|
z-index: 1000;
|
|
flex-wrap: nowrap;
|
|
width: 100%;
|
|
border: none;
|
|
}
|
|
#tabs > div:first-child > button {
|
|
border: none;
|
|
border-bottom: 2px solid transparent !important;
|
|
flex: none;
|
|
}
|
|
#tabs > div:first-child > button:hover {
|
|
border: none;
|
|
border-bottom: 2px solid var(--colorPrimary) !important;
|
|
flex: none;
|
|
}
|
|
#tabs > div:first-child > button.selected {
|
|
background: transparent;
|
|
border: none;
|
|
border-bottom: 2px solid var(--colorPrimary) !important;
|
|
}
|
|
input[type='range'] {
|
|
-webkit-appearance: none !important ;
|
|
background: transparent !important;
|
|
}
|
|
input[type='range']:focus {
|
|
outline: none !important;
|
|
}
|
|
input[type='range']::-webkit-slider-runnable-track {
|
|
cursor: pointer !important;
|
|
height: 6px !important;
|
|
border-radius: 3px !important;
|
|
background: var(--colorFill) !important;
|
|
opacity: 0.6 !important;
|
|
}
|
|
input[type='range']:hover::-webkit-slider-runnable-track {
|
|
background: var(--colorPrimary) !important;
|
|
opacity: 1 !important;
|
|
transition: all 0.2s ease-in-out;
|
|
}
|
|
input[type='range']::-moz-range-track {
|
|
cursor: pointer !important;
|
|
height: 6px !important;
|
|
border-radius: 3px !important;
|
|
background: var(--colorPrimary) !important;
|
|
}
|
|
input[type='range']:hover::-moz-range-track {
|
|
background: var(--colorPrimary) !important;
|
|
transition: all 0.2s ease-in-out;
|
|
}
|
|
input[type='range']::-ms-fill-upper,
|
|
input[type='range']::-ms-fill-lower {
|
|
cursor: pointer !important;
|
|
height: 6px !important;
|
|
border-radius: 3px !important;
|
|
background: var(--colorPrimary) !important;
|
|
}
|
|
input[type='range']:hover::-ms-fill-upper,
|
|
input[type='range']:hover::-ms-fill-lower {
|
|
background: var(--colorBgElevated) !important;
|
|
transition: all 0.2s ease-in-out;
|
|
}
|
|
input[type='range']::-webkit-slider-thumb {
|
|
border: 2px solid var(--colorText) !important;
|
|
height: 16px !important;
|
|
width: 16px !important;
|
|
border-radius: 16px !important;
|
|
background: var(--colorBgElevated) !important;
|
|
cursor: pointer !important;
|
|
-webkit-appearance: none !important;
|
|
margin-top: -5px !important;
|
|
}
|
|
input[type='range']:active::-webkit-slider-thumb {
|
|
box-shadow: 0 0 3px var(--colorPrimary) !important;
|
|
border: 2px solid var(--colorPrimary) !important;
|
|
background: var(--colorBgElevated) !important;
|
|
}
|
|
input[type='range']::-moz-range-thumb {
|
|
border: 2px solid var(--colorText) !important;
|
|
height: 16px !important;
|
|
width: 16px !important;
|
|
border-radius: 16px !important;
|
|
background: var(--colorBgElevated) !important;
|
|
cursor: pointer !important;
|
|
margin-top: -5px !important;
|
|
z-index: 999;
|
|
}
|
|
input[type='range']:active::-moz-range-thumb {
|
|
box-shadow: 0 0 3px var(--colorPrimary) !important;
|
|
border: 2px solid var(--colorPrimary) !important;
|
|
background: var(--colorBgElevated) !important;
|
|
}
|
|
input[type='range']::-ms-thumb {
|
|
border: 2px solid var(--colorText) !important;
|
|
height: 16px !important;
|
|
width: 16px !important;
|
|
border-radius: 16px !important;
|
|
background: var(--colorBgElevated) !important;
|
|
cursor: pointer !important;
|
|
margin-top: -5px !important;
|
|
}
|
|
input[type='range']:active::-ms-thumb {
|
|
box-shadow: 0 0 3px var(--colorPrimary) !important;
|
|
border: 2px solid var(--colorPrimary) !important;
|
|
background: var(--colorBgElevated) !important;
|
|
}
|
|
[id$='2img_prompt'] textarea {
|
|
color: rgba(208, 226, 178, 0.98) !important;
|
|
max-height: 84px;
|
|
overflow-y: auto;
|
|
}
|
|
[id$='2img_prompt'] textarea:focus {
|
|
color: rgba(244, 255, 225, 0.98) !important;
|
|
}
|
|
[id$='2img_neg_prompt'] textarea {
|
|
color: rgba(236, 210, 213, 0.98) !important;
|
|
max-height: 84px;
|
|
overflow-y: auto;
|
|
}
|
|
[id$='2img_neg_prompt'] textarea:focus {
|
|
color: rgba(255, 240, 242, 0.98) !important;
|
|
}
|
|
.block.token-counter span {
|
|
backdrop-filter: blur(24px);
|
|
display: inline-block;
|
|
}
|
|
.livePreview,
|
|
.gradio-gallery,
|
|
.gradio-image,
|
|
.gradio-video,
|
|
.gradio-file {
|
|
background: var(--galleryBackground) !important;
|
|
border: 2px solid var(--colorBorder) !important;
|
|
border-radius: var(--block-radius) !important;
|
|
}
|
|
div.svelte-awbtu4 .livePreview,
|
|
div.svelte-awbtu4 .gradio-gallery,
|
|
div.svelte-awbtu4 .gradio-image,
|
|
div.svelte-awbtu4 .gradio-video,
|
|
div.svelte-awbtu4 .gradio-file {
|
|
background: var(--galleryBackground) !important;
|
|
border: 2px solid var(--colorBorder) !important;
|
|
border-radius: var(--block-radius) !important;
|
|
}
|
|
.block.svelte-mppz8v {
|
|
background: transparent;
|
|
}
|
|
[id$='_script_container'] {
|
|
margin-top: 24px;
|
|
}
|
|
[id$='_script_container'] .block.svelte-mppz8v {
|
|
border: unset !important;
|
|
}
|
|
[id$='_script_container'] > div:not(.absolute) {
|
|
background-color: var(--colorFillTertiary) !important;
|
|
border-color: transparent !important;
|
|
transition: all 0.3s ease-in-out !important;
|
|
margin-bottom: var(--marginSM) !important;
|
|
margin-top: 0 !important;
|
|
padding: var(--padding) !important;
|
|
border-radius: var(--borderRadius) !important;
|
|
}
|
|
.extra-network-thumbs .actions .name {
|
|
background: linear-gradient(0deg, rgba(0, 0, 0, 0.8), transparent);
|
|
font-weight: 500;
|
|
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.9);
|
|
}
|
|
.extra-network-thumbs .actions .additional > ul {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
background: linear-gradient(
|
|
180deg,
|
|
rgba(0, 0, 0, 0.8),
|
|
transparent
|
|
) !important;
|
|
opacity: 0;
|
|
}
|
|
.extra-network-thumbs .actions .additional > ul:hover {
|
|
opacity: 1;
|
|
}
|
|
.extra-network-thumbs .card {
|
|
border-radius: var(--borderRadiusXS);
|
|
background-size: cover;
|
|
box-shadow: var(--boxShadow);
|
|
outline: 1px solid rgba(0, 0, 0, 0.5);
|
|
transition: all 0.2s ease-in-out;
|
|
}
|
|
.extra-network-thumbs .card:hover {
|
|
transform: scale(1.5);
|
|
z-index: 500;
|
|
box-shadow: 0 6px 24px -4px rgba(0, 0, 0, 0.8);
|
|
}
|
|
.extra-network-thumbs .metadata-button {
|
|
font-size: 10px !important;
|
|
right: 4px;
|
|
top: 24px;
|
|
opacity: 0;
|
|
}
|
|
.extra-network-thumbs .metadata-button:hover {
|
|
opacity: 1;
|
|
}
|
|
/* Plugin */
|
|
[id$='_row_aspect_ratio'],
|
|
[id$='_row_resolutions'] {
|
|
display: inline-block !important;
|
|
margin: 0;
|
|
padding: 0;
|
|
width: 180px !important;
|
|
}
|
|
/* Theme Fix*/
|
|
.gradio-container {
|
|
font-size: var(--fontSize);
|
|
margin: 0;
|
|
-webkit-font-smoothing: antialiased;
|
|
-moz-osx-font-smoothing: grayscale;
|
|
-ms-text-size-adjust: 100%;
|
|
-webkit-text-size-adjust: 100%;
|
|
background-image: radial-gradient(
|
|
circle 600px at calc(100% - 300px) 300px,
|
|
var(--colorPrimaryBgHover),
|
|
var(--colorBgLayout)
|
|
);
|
|
background-repeat: no-repeat;
|
|
}
|
|
#txtimg_hr_finalres {
|
|
color: var(--colorPrimary) !important;
|
|
}
|
|
#interrogate,
|
|
#deepbooru {
|
|
max-height: 72px;
|
|
}
|