@devvit/ui-renderer 0.12.1-next-2025-08-14-23-26-23-9bf33eb27.0 → 0.12.1-next-2025-08-15-17-11-51-ad133d5fe.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (2) hide show
  1. package/package.json +8 -8
  2. package/styles.js +1 -1
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@devvit/ui-renderer",
3
- "version": "0.12.1-next-2025-08-14-23-26-23-9bf33eb27.0",
3
+ "version": "0.12.1-next-2025-08-15-17-11-51-ad133d5fe.0",
4
4
  "license": "BSD-3-Clause",
5
5
  "repository": {
6
6
  "type": "git",
@@ -68,9 +68,9 @@
68
68
  "types": "./dist/index.d.ts",
69
69
  "dependencies": {
70
70
  "@devvit/multiplatform": "0.0.1-20250218-2f1c7a2a",
71
- "@devvit/protos": "0.12.1-next-2025-08-14-23-26-23-9bf33eb27.0",
72
- "@devvit/runtime-lite": "0.12.1-next-2025-08-14-23-26-23-9bf33eb27.0",
73
- "@devvit/shared-types": "0.12.1-next-2025-08-14-23-26-23-9bf33eb27.0",
71
+ "@devvit/protos": "0.12.1-next-2025-08-15-17-11-51-ad133d5fe.0",
72
+ "@devvit/runtime-lite": "0.12.1-next-2025-08-15-17-11-51-ad133d5fe.0",
73
+ "@devvit/shared-types": "0.12.1-next-2025-08-15-17-11-51-ad133d5fe.0",
74
74
  "compare-versions": "6.1.1",
75
75
  "nice-grpc-web": "3.3.3",
76
76
  "p-queue": "7.3.4"
@@ -100,9 +100,9 @@
100
100
  },
101
101
  "devDependencies": {
102
102
  "@ampproject/filesize": "4.3.0",
103
- "@devvit/public-api": "0.12.1-next-2025-08-14-23-26-23-9bf33eb27.0",
104
- "@devvit/repo-tools": "0.12.1-next-2025-08-14-23-26-23-9bf33eb27.0",
105
- "@devvit/tsconfig": "0.12.1-next-2025-08-14-23-26-23-9bf33eb27.0",
103
+ "@devvit/public-api": "0.12.1-next-2025-08-15-17-11-51-ad133d5fe.0",
104
+ "@devvit/repo-tools": "0.12.1-next-2025-08-15-17-11-51-ad133d5fe.0",
105
+ "@devvit/tsconfig": "0.12.1-next-2025-08-15-17-11-51-ad133d5fe.0",
106
106
  "@lit/localize": "0.11.4",
107
107
  "@open-wc/testing-helpers": "2.3.0",
108
108
  "@reddit/baseplate": "1.1.3",
@@ -143,5 +143,5 @@
143
143
  }
144
144
  },
145
145
  "source": "./src/index.ts",
146
- "gitHead": "08a6b90ab86947770cc8deb8facb020599f64065"
146
+ "gitHead": "3c7241be35cb26a638546ce304f6a354e84793a3"
147
147
  }
package/styles.js CHANGED
@@ -1,4 +1,4 @@
1
1
  import { cssString } from '@reddit/faceplate/lib/less.js';
2
- export const stylesCSS = 'faceplate-expandable-section-helper { display: contents; /* [rpl] just to boost the selector */ /* Target the [open] attribute on either the root element OR the details element to rotate the chevron. This is to handle rotating chevrons both before and after the faceplate-expandable-section-helper component is defined. Before the component is defined, the [open] attribute on the component will not toggle if the user clicks on details, but the [open] attribute will toggle on the details element, so we need to target details too. The reason we can\'t target only the details element is because once the web component is defined, we delay toggling the [open] attribute on the details element until AFTER the animation finishes. So if we only targeted the details element for the chevron rotation the chevron wouldn\'t rotate until after the collapse animation finished and we finally toggle the [open] attriubte on the details element. */ /* Specific handling for nested menus. We only need to handle collapse menus inside of expanded menus, not expanded menus inside collapsed menus because you can\'t see those! */ } faceplate-expandable-section-helper > details > summary { list-style-type: none; /* For Safari */ } faceplate-expandable-section-helper > details > summary::marker, faceplate-expandable-section-helper > details > summary::-webkit-details-marker { display: none; } faceplate-expandable-section-helper[rpl] > details > summary { /* override details.less */ margin: 0; } faceplate-expandable-section-helper > details > summary [icon-name=\'caret-down-outline\'] { transition: transform 0.22s ease-in-out; } faceplate-expandable-section-helper[open] > details > summary svg[rpl][icon-name=\'caret-down-outline\'], faceplate-expandable-section-helper:not(:defined) > details[open] > summary svg[rpl][icon-name=\'caret-down-outline\'] { transform: rotate(180deg); } faceplate-expandable-section-helper:not([open]) > details > summary svg[rpl][icon-name=\'caret-down-outline\'], faceplate-expandable-section-helper:not(:defined) > details[open] > summary svg[rpl][icon-name=\'caret-down-outline\'] { transform: rotate(0deg); } faceplate-hovercard:not(:defined) > [slot=\'content\'] { display: none; } faceplate-hovercard[trigger=\'mouse\'] a, faceplate-hovercard[trigger=\'mouse\'] button, faceplate-hovercard[trigger=\'mouse\'] [faceplate-focusable], faceplate-hovercard[trigger=\'mouse\'] [tabindex=\'0\'] { outline: none; } /* * This is a Tailwind CSS file, it must be run through the PostCSS compiler * with the Tailwind plugin, not Less. The `postcss-import` plugin is also * needed, if you have other additions to your Tailwind entry point CSS. * * @example * // tailwind.css * @import \'@reddit/faceplate/styles/tailwind-components.css\' * @tailwind components; * @tailwind utilities; * * // styles.less * @import (less) \'@reddit/faceplate/faceplate.css\'; * @import (less) \'./tailwind-build.css\'; */ /* rem-based sizing units referenced by equivalent pixel sizes */ :root, .theme-light { --rem360: 22.5rem; --rem320: 20rem; --rem192: 12rem; --rem144: 9rem; --rem128: 8rem; --rem96: 6rem; --rem90: 5.625rem; --rem88: 5.5rem; --rem64: 4rem; --rem56: 3.5rem; --rem48: 3rem; --rem40: 2.5rem; --rem36: 2.25rem; --rem32: 2rem; --rem28: 1.75rem; --rem26: 1.625rem; --rem24: 1.5rem; --rem22: 1.375rem; --rem20: 1.25rem; --rem18: 1.125rem; --rem16: 1rem; --rem15: 0.9375rem; --rem14: 0.875rem; --rem12: 0.75rem; --rem10: 0.625rem; --rem8: 0.5rem; --rem6: 0.375rem; --rem4: 0.25rem; --rem2: 0.125rem; --rem1: 0.0625rem; --spacer-4xs: 0.125rem; --spacer-2xs: 0.25rem; --spacer-xs: 0.5rem; --spacer-sm: 0.75rem; --spacer-md: 1rem; --spacer-lg: 1.5rem; --spacer-xl: 2rem; --spacer-2xl: 3rem; --spacer-a-px: 0px; --spacer-button-lg-px: var(--spacer-lg); --spacer-button-md-px: var(--spacer-lg); --spacer-button-sm-px: var(--spacer-md); --spacer-input-padding-left: 0px; --spacer-input-padding-top: 0px; --spacer-label-default: 0px; --spacer-switch-input-active-pl: 0px; --size-2xs: 0.25rem; --size-xs: 0.5rem; --size-sm: 0.75rem; --size-md: 1rem; --size-lg: 1.5rem; --size-xl: 2rem; --size-2xl: 3rem; --size-3xl: 4rem; --size-4xl: 6rem; --size-5xl: 8rem; --size-button-lg-h: 3.375rem; --size-button-md-h: 2.75rem; --size-button-sm-h: 2.125rem; --size-button-xs-h: 1.375rem; --size-switch-input-h: 1.25rem; --size-switch-input-w: 2rem; --line-sm: 0.0625rem; --line-md: 0.125rem; --line-lg: 0.25rem; --line-a-focus: 0px; --line-a-outline-moz: 0.0625rem; --line-a-outline-wb: 0.3125rem; --line-button-lg-border: 0.0625rem; --line-button-md-border: 0.0625rem; --line-button-sm-border: 0.0625rem; --line-button-xs-border: 0.0625rem; --line-button-border-activated: 0.0625rem; --line-input-border: var(--line-sm); --radius-sm: 0.25rem; --radius-lg: 2rem; --radius-full: 624.9375rem; --radius-accordion-size: var(--radius-sm); --font-10-15-bold: normal 700 0.625rem / 0.9375rem var(--font-sans); --font-button-lg: normal 700 1.125rem / 1.375rem var(--font-sans); --font-button-md: normal 700 1rem / 1.25rem var(--font-sans); --font-button-sm: normal 700 0.875rem / 1.125rem var(--font-sans); --font-button-xs: normal 700 0.75rem / 0.875rem var(--font-sans); --font-label-default: var(--font-10-15-bold); --misc-accordion-border: 1px solid var(--color-tone-5); --misc-accordion-open-list-style-type: disclosure-open; --misc-accordion-closed-list-style-type: disclosure-closed; --misc-divider-margin: 0.5rem auto; --misc-label-text-transform: uppercase; --misc-label-letter-spacing: 0.5px; --color-primary-visited: #660099; --color-primary-background: #24a0ed; --color-primary-background-hover: #006cbf; --color-danger-content: #ea0027; --color-success-content: #46d160; --color-global-black: #000000; --color-global-white: #ffffff; --color-global-orangered: #D93900; --color-global-alienblue: #0079d3; --color-global-darkblue: #1d2535; --color-tone-1: #1a1a1b; --color-tone-2: #6a6d6f; --color-tone-3: #878a8c; --color-tone-4: #d3d6da; --color-tone-5: #edeff1; --color-tone-6: #f6f7f8; --color-tone-7: #ffffff; --color-action-primary: var(--color-primary-background); --color-action-secondary: var(--color-primary-background-hover); --color-action-upvote: var(--color-global-orangered); --color-action-downvote: #7193ff; --color-alert-positive: var(--color-success-content); --color-alert-negative: var(--color-danger-content); --color-alert-caution: #ffb000; --color-identity-admin: var(--color-global-orangered); --color-identity-moderator: #46d160; --color-identity-self: #0dd3bb; --color-identity-coins: #ddbd37; --color-category-live: var(--color-global-orangered); --color-category-nsfw: #ff3881; --color-category-spoiler: var(--color-tone-1); --color-ui-canvas: var(--color-tone-5); --color-ui-modalbackground: var(--color-tone-7); --color-opacity-highlight: linear-gradient(#006cbf1a, var(--color-tone-6)); --color-opacity-08: #1a1a1b14; --color-opacity-50: #00000080; --color-scrim: #1a1a1b4d; --color-a-default: var(--color-primary-background-hover); --color-a-hover: var(--color-primary-background-hover); --color-a-visited: var(--color-primary-background-hover); --color-button-overlay-focus: #ffffff1a; --color-button-overlay-active: #00000014; --color-button-primary-background-hover: var(--color-primary-background); --color-button-primary-background-disabled: var(--color-tone-6); --color-button-primary-border-hover: transparent; --color-button-primary-border-active: transparent; --color-button-primary-border-activated: transparent; --color-button-primary-border-disabled: transparent; --color-button-primary-text-disabled: var(--color-tone-2); --color-button-secondary-background: transparent; --color-button-secondary-background-focus: transparent; --color-button-secondary-background-hover: transparent; --color-button-secondary-background-disabled: var(--color-tone-6); --color-button-secondary-background-activated: transparent; --color-button-secondary-border: var(--color-primary-background-hover); --color-button-secondary-border-hover: var(--color-primary-background-hover); --color-button-secondary-border-active: var(--color-primary-background-hover); --color-button-secondary-border-activated: var(--color-primary-background-hover); --color-button-secondary-border-disabled: var(--color-tone-2); --color-button-secondary-text: var(--color-primary-background-hover); --color-button-secondary-text-disabled: var(--color-tone-2); --color-button-secondary-text-activated: var(--color-button-secondary-text); --color-button-tertiary-background: var(--color-tone-6); --color-button-tertiary-background-focus: var(--color-tone-6); --color-button-tertiary-background-hover: var(--color-tone-6); --color-button-tertiary-background-disabled: var(--color-tone-6); --color-button-tertiary-background-activated: var(--color-tone-6); --color-button-tertiary-border-hover: transparent; --color-button-tertiary-border-active: transparent; --color-button-tertiary-text: var(--color-primary-background-hover); --color-button-tertiary-text-disabled: var(--color-tone-2); --color-button-tertiary-text-activated: var(--color-primary-background-hover); --color-button-plain-background-hover: transparent; --color-button-plain-background-disabled: var(--color-tone-7); --color-button-plain-background-activated: transparent; --color-button-plain-border-hover: transparent; --color-button-plain-border-active: transparent; --color-button-plain-text: var(--color-primary-background-hover); --color-button-plain-text-disabled: var(--color-tone-2); --color-button-plain-text-activated: var(--color-primary-background-hover); --color-divider-default: var(--color-tone-5); --color-input-default: var(--color-tone-6); --color-input-hover: var(--color-primary-background-hover); --color-input-border: var(--color-tone-5); --color-input-text: var(--color-tone-1); --color-input-helper-text: var(--color-tone-1); --color-label-default: var(--color-tone-1); --color-switch-input-background-default: var(--color-tone-3); --color-switch-input-background-checked: var(--color-global-alienblue); --color-switch-input-background-disabled: var(--color-tone-6); --color-switch-input-background-checked-disabled: var(--color-tone-5); --color-switch-input-background-hover: var(--color-tone-3); --color-switch-input-background-checked-hover: var(--color-global-alienblue); --elevation-xs: 0 0.0625rem 0.125rem 0 #00000040; --elevation-sm: 0 0.0625rem 0.25rem 0 #00000026, 0 0.25rem 0.25rem 0 #00000026; --elevation-md: 0 0.25rem 0.5rem 0 #0000001a, 0 0.375rem 0.75rem 0 #00000040; --elevation-lg: 0 0.75rem 0.75rem 0 #00000026, 0 1rem 2rem 0 #00000040; --elevation-focus-ring: 0 0 0 0.25rem var(--color-global-alienblue); --font-sans: -apple-system, BlinkMacSystemFont, \'Segoe UI\', Roboto, \'Helvetica Neue\', Arial, \'Apple Color Emoji\', \'Segoe UI Emoji\', \'Segoe UI Symbol\', sans-serif; --font-mono: Noto Mono, Menlo, Monaco, Consolas, monospace; /* https://www.figma.com/file/iu3o6C8NVE1a3BPHVA6G2U/Reddit-Design-Kit---Desktop?node-id=73%3A7092 */ --font-title-h0: normal 500 1.625rem / 2rem var(--font-sans); --font-title-h1: normal 500 1.375rem / 1.625rem var(--font-sans); --font-title-h2: normal 500 1.25rem / 1.5rem var(--font-sans); --font-title-h3: normal 500 1.125rem / 1.375rem var(--font-sans); --font-title-h4: normal 500 1rem / 1.25rem var(--font-sans); --font-title-h5: normal 500 0.875rem / 1.125rem var(--font-sans); --font-title-h6: normal 500 0.75rem / 1rem var(--font-sans); --font-body: 0.875rem; --font-small: 0.75rem; --font-code: 0.875rem; --font-subheading: 0.75rem; --font-label: 0.625rem; --font-button-b1: normal bold 1.125rem / 1.375rem var(--font-sans); --font-button-b2: normal bold 1rem / 1.25rem var(--font-sans); --font-button-b3: normal bold 0.875rem / 1.125rem var(--font-sans); --font-button-b4: normal bold 0.75rem / 0.875rem var(--font-sans); --color-gradient-orangeyellow: linear-gradient(89.94deg, #ec0623 0%, #ff8717 100%); --color-gradient-bluepink: linear-gradient(89.94deg, #51b9ff 0%, #7785ff 52.6%, #b279ff 73.96%, #ff81ed 100%); --boxshadow-modal: 0px 2px 15px rgba(26, 26, 27, 0.3); --boxshadow-navigation: 0px 4px 14px rgba(0, 0, 0, 0.1); --boxshadow-tooltip: 0 1px 4px rgba(0, 0, 0, 0.15), 0 4px 4px rgba(0, 0, 0, 0.15); color-scheme: light; } :root dialog::backdrop, .theme-light dialog::backdrop { --color-dialog-background: #00000080; } @media (prefers-color-scheme: dark) { :root:not(.theme-light) { --color-primary-visited: #c58af9; --color-primary-background: #006cbf; --color-primary-background-hover: #24a0ed; --color-tone-1: #d7dadc; --color-tone-2: #818384; --color-tone-3: #565758; --color-tone-4: #3a3a3c; --color-tone-5: #272729; --color-tone-6: #1a1a1b; --color-tone-7: #121213; --color-identity-coins: #ffe600; --color-ui-canvas: #050505; --color-ui-modalbackground: var(--color-tone-6); --color-opacity-50: #d7dadc80; --color-scrim: #0000004d; --elevation-xs: 0 0.0625rem 0.125rem 0 #000000ab; --elevation-sm: 0 0.0625rem 0.25rem 0 #00000054, 0 0.25rem 0.25rem 0 #00000054; --elevation-md: 0 0.25rem 0.5rem 0 #00000033, 0 0.375rem 0.75rem 0 #00000080; --elevation-lg: 0 0.75rem 0.75rem 0 #00000033, 0 1rem 2rem 0 #00000080; --boxshadow-modal: 0px 2px 15px rgba(0, 0, 0, 0.3); --boxshadow-tooltip: 0 1px 4px rgba(0, 0, 0, 0.33), 0 4px 4px rgba(0, 0, 0, 0.33); color-scheme: dark; } :root:not(.theme-light) dialog::backdrop { --color-dialog-background: #d7dadc80; } } .theme-dark { --color-primary-visited: #c58af9; --color-primary-background: #006cbf; --color-primary-background-hover: #24a0ed; --color-tone-1: #d7dadc; --color-tone-2: #818384; --color-tone-3: #565758; --color-tone-4: #3a3a3c; --color-tone-5: #272729; --color-tone-6: #1a1a1b; --color-tone-7: #121213; --color-identity-coins: #ffe600; --color-ui-canvas: #050505; --color-ui-modalbackground: var(--color-tone-6); --color-opacity-50: #d7dadc80; --color-scrim: #0000004d; --elevation-xs: 0 0.0625rem 0.125rem 0 #000000ab; --elevation-sm: 0 0.0625rem 0.25rem 0 #00000054, 0 0.25rem 0.25rem 0 #00000054; --elevation-md: 0 0.25rem 0.5rem 0 #00000033, 0 0.375rem 0.75rem 0 #00000080; --elevation-lg: 0 0.75rem 0.75rem 0 #00000033, 0 1rem 2rem 0 #00000080; --boxshadow-modal: 0px 2px 15px rgba(0, 0, 0, 0.3); --boxshadow-tooltip: 0 1px 4px rgba(0, 0, 0, 0.33), 0 4px 4px rgba(0, 0, 0, 0.33); color-scheme: dark; } .theme-dark dialog::backdrop { --color-dialog-background: #d7dadc80; } .theme-beta, .theme-light.theme-beta { --spacer-a-px: 0.125rem; --spacer-button-lg-px: var(--spacer-md); --spacer-button-md-px: var(--spacer-md); --spacer-button-sm-px: var(--spacer-sm); --spacer-input-padding-left: var(--spacer-md); --spacer-input-padding-top: var(--spacer-2xs); --spacer-label-default: var(--spacer-md); --spacer-switch-input-active-pl: var(--spacer-xs); --size-banner-height: var(--size-rem40); --size-button-lg-h: var(--size-2xl); --size-button-md-h: 2.5rem; --size-button-sm-h: var(--size-xl); --size-button-xs-h: var(--size-lg); --size-switch-input-h: var(--size-xl); --size-switch-input-w: var(--size-2xl); --line-a-focus: var(--line-md); --line-a-outline-moz: 0px; --line-a-outline-wb: 0px; --line-button-lg-border: var(--line-sm); --line-button-md-border: var(--line-sm); --line-button-sm-border: var(--line-sm); --line-button-xs-border: var(--line-sm); --line-button-border-activated: var(--line-lg); --line-input-border: var(--line-lg); --radius-md: 1.25rem; --radius-accordion-size: 0px; --font-10: normal undefined null / null var(--font-sans); --font-12: normal undefined null / null var(--font-sans); --font-14: normal undefined null / null var(--font-sans); --font-16: normal undefined null / null var(--font-sans); --font-18: normal undefined null / null var(--font-sans); --font-20: normal undefined null / null var(--font-sans); --font-24: normal undefined null / null var(--font-sans); --font-32: normal undefined null / null var(--font-sans); --font-48: normal undefined null / null var(--font-sans); --font-64: normal undefined null / null var(--font-sans); --font-title-h0: var(--font-64); --font-title-h1: var(--font-32); --font-title-h2: var(--font-24); --font-title-h3: var(--font-18); --font-title-h4: var(--font-16); --font-title-h5: var(--font-14); --font-title-h6: var(--font-12); --font-14-20-regular: normal 400 0.875rem / 1.25rem var(--font-sans); --font-14-20-semibold: normal 600 0.875rem / 1.25rem var(--font-sans); --font-16-20-regular: normal 400 1rem / 1.25rem var(--font-sans); --font-12-16-regular: normal 400 0.75rem / 1rem var(--font-sans); --font-12-16-semibold: normal 600 0.75rem / 1rem var(--font-sans); --font-button-lg: var(--font-14-20-semibold); --font-button-md: var(--font-14-20-semibold); --font-button-sm: var(--font-12-16-semibold); --font-label-default: var(--font-12-16-regular); --misc-accordion-border: 0; --misc-accordion-open-list-style-type: none; --misc-accordion-closed-list-style-type: none; --misc-divider-margin: 0; --misc-label-text-transform: capitalize; --misc-label-letter-spacing: initial; --blur-sm: 0.25rem; --blur-normal: 0.5rem; --blur-md: 0.75rem; --blur-lg: 1rem; --blur-xl: 1.5rem; --blur-2xl: 2.5rem; --blur-3xl: 4rem; --color-action-downvote: #6A5CFF; --color-action-upvote: #D93900; --color-ai-background-weaker: #E7FDF5; --color-ai-plain: #006C56; --color-ai-plain-hover: #015140; --color-alert-caution: #977000; --color-avatar-gradient: linear-gradient(0deg, #97AFBCff, #ffffffff 75%); --color-avatar-media-gradient: linear-gradient(0deg, #00000099, #181C1Fff 75%); --color-brand-background: #D93900; --color-brand-background-hover: #AE2C00; --color-brand-gradient-active: linear-gradient(180deg, #cd3700ff, #db3b00ff 68%, #D93900ff 100%); --color-brand-gradient-active-highlight: linear-gradient(83deg, #db3f0000 80%, #D93900ff 100%); --color-brand-gradient-default: linear-gradient(180deg, #D93900ff, #db3b00ff 30%, #AE2C00ff 100%); --color-brand-gradient-default-highlight: linear-gradient(258deg, #db3f0000 80%, #D93900ff 100%); --color-brand-gradient-hover: linear-gradient(180deg, #e23d00ff 15%, #cb3600ff 49%, #b43000ff 100%); --color-brand-gradient-hover-highlight: linear-gradient(323deg, #cb360000 65%, #cb3600ff 100%); --color-brand-onBackground: #FFFFFF; --color-category-live: #D93900; --color-category-nsfw: #DE019F; --color-category-spoiler: var(--color-tone-1); --color-caution-background: #FFBF0B; --color-caution-background-hover: #D8A100; --color-caution-onBackground: #000000; --color-caution-plain: #785800; --color-caution-plain-hover: #5B4200; --color-danger-background: #EB001F; --color-danger-background-disabled: #FDB3A4; --color-danger-background-hover: #BC0117; --color-danger-background-weaker: #FBDBD4; --color-danger-content: #BC0117; --color-danger-content-default: #ffffff; --color-danger-content-hover: #90000F; --color-danger-onBackground: #FFFFFF; --color-danger-plain: #BC0117; --color-danger-plain-hover: #90000F; --color-downvote-background: #6A5CFF; --color-downvote-background-disabled: rgba(106, 92, 255, 0.3); --color-downvote-background-hover: #523DFF; --color-downvote-content: #523DFF; --color-downvote-content-weak: #6A5CFF; --color-downvote-disabled: #523DFF4d; --color-downvote-onBackground: #FFFFFF; --color-downvote-onStrongScrim: #B29FFF; --color-downvote-onStrongScrim-disabled: rgba(178, 159, 255, 0.3); --color-downvote-onStrongScrim-weaker: #9580FF; --color-downvote-plain: #523DFF; --color-downvote-plain-disabled: rgba(82, 61, 255, 0.3); --color-downvote-plain-weaker: #6A5CFF; --color-elevation-large1: #0000003F; --color-elevation-large2: #00000026; --color-elevation-medium1: #0000003F; --color-elevation-medium2: #00000019; --color-elevation-small: #00000026; --color-elevation-xsmall: #0000003F; --color-favorite: #977000; --color-global-admin: #D93900; --color-global-alienblue: #1870F4; --color-global-black: #000000; --color-global-brand-orangered: #FF4500; --color-global-darkblue: #2A3236; --color-global-focus: #029DD5; --color-global-gold: #B78800; --color-global-moderator: #008A10; --color-global-nsfw: #DE019F; --color-global-offline: #667780; --color-global-online: #00C61C; --color-global-orangered: #FF4500; --color-global-stars: #977000; --color-global-white: #FFFFFF; --color-gradient-media: linear-gradient(180deg, #00000000, #0000008a 60%, #00000099 100%); --color-gradient-media-strong: linear-gradient(180deg, #00000000, #000000cc 60%, #000000e6 100%); --color-identity-admin: #D93900; --color-identity-coins: #B78800; --color-identity-moderator: #008A10; --color-identity-self: #01876D; --color-interactive-background-disabled: #0000000C; --color-interactive-content-disabled: #0000003F; --color-interactive-focused: #007FAE; --color-interactive-pressed: #00000026; --color-inverted-interactive-background-disabled: #FFFFFF0C; --color-inverted-interactive-content-disabled: #FFFFFF3F; --color-inverted-interactive-pressed: #FFFFFF26; --color-inverted-neutral-background: #0E1113; --color-inverted-neutral-background-hover: #181C1F; --color-inverted-neutral-border: #FFFFFF33; --color-inverted-neutral-content: #B7CAD4; --color-inverted-neutral-content-strong: #EEF1F3; --color-inverted-secondary-background: #2A3236; --color-inverted-secondary-background-hover: #333D42; --color-inverted-secondary-background-selected: #3D494E; --color-inverted-secondary-onBackground: #FFFFFF; --color-inverted-secondary-plain: #DBE4E9; --color-inverted-secondary-plain-hover: #FFFFFF; --color-media-background: rgba(0, 0, 0, 0.6); --color-media-background-hover: rgba(0, 0, 0, 0.8); --color-media-background-selected: rgba(0, 0, 0, 0.8); --color-media-border-selected: #FFFFFF; --color-media-border-weak: #FFFFFF19; --color-media-onBackground: #FFFFFF; --color-media-onBackground-disabled: #FFFFFF3F; --color-media-onBackground-weak: #E5EBEE; --color-media-onbackground: #ffffff; --color-media-onbackground-disabled: #ffffff40; --color-media-onbackground-weak: #B7CAD4; --color-neutral-background: #FFFFFF; --color-neutral-background-container: #F6F8F9; --color-neutral-background-container-hover: #EEF1F3; --color-neutral-background-container-strong: #EEF1F3; --color-neutral-background-container-strong-hover: #E5EBEE; --color-neutral-background-gilded: #FFF9E0; --color-neutral-background-gilded-hover: #FFF3C0; --color-neutral-background-hover: #F6F8F9; --color-neutral-background-medium: #F8F8F8; --color-neutral-background-pinned: #FFFFFF; --color-neutral-background-selected: #E5EBEE; --color-neutral-background-strong: #FFFFFF; --color-neutral-background-strong-hover: #F6F8F9; --color-neutral-background-weak: #F6F8F9; --color-neutral-background-weak-hover: #EEF1F3; --color-neutral-border: #00000033; --color-neutral-border-medium: #0000007F; --color-neutral-border-strong: #181C1F; --color-neutral-border-weak: #00000019; --color-neutral-content: #333D42; --color-neutral-content-disabled: #D6D6D6; --color-neutral-content-strong: #181C1F; --color-neutral-content-weak: #5C6C74; --color-offline: #767676; --color-online: #01A816; --color-opacity-08: #13131314; --color-opacity-50: #00000080; --color-opacity-highlight: linear-gradient(#0A2F6C1a, var(--color-tone-6)); --color-pizzaRed: #ef5350; --color-primary: #115BCA; --color-primary-background: #0A449B; --color-primary-background-hover: #0A2F6C; --color-primary-background-selected: #0A1A3F; --color-primary-border: #0A449B; --color-primary-border-hover: #0A2F6C; --color-primary-hover: #0A449B; --color-primary-onBackground: #FFFFFF; --color-primary-onBackground-selected: #FFFFFF; --color-primary-plain: #0A449B; --color-primary-plain-hover: #0A2F6C; --color-primary-plain-visited: #7600A3; --color-primary-visited: #9B00D4; --color-scrim: #00000099; --color-scrim-background: #00000099; --color-scrim-background-strong: #000000CC; --color-scrim-gradient: linear-gradient(180deg, #00000000, #0000008a 60%, #00000099 100%); --color-scrim-strong: #000000cc; --color-secondary: #21272A; --color-secondary-background: #E5EBEE; --color-secondary-background-hover: #DBE4E9; --color-secondary-background-selected: #C9D7DE; --color-secondary-hover: #000000; --color-secondary-onBackground: #000000; --color-secondary-plain: #181C1F; --color-secondary-plain-hover: #000000; --color-secondary-plain-weak: #5C6C74; --color-secondary-weak: #576F76; --color-success-background: #008A10; --color-success-background-hover: #016E0B; --color-success-content: #016E0B; --color-success-hover: #005306; --color-success-onBackground: #FFFFFF; --color-success-plain: #016E0B; --color-success-plain-hover: #005306; --color-tone-1: #131313; --color-tone-2: #434343; --color-tone-3: #ACACAC; --color-tone-4: #E4E4E4; --color-tone-5: #F2F2F2; --color-tone-6: #F8F8F8; --color-tone-7: #ffffff; --color-transparent-background-hover: #7487911a; --color-ui-canvas: var(--color-tone-5); --color-ui-modalbackground: var(--color-neutral-background-strong); --color-upvote-background: #D93900; --color-upvote-background-disabled: rgba(217, 57, 0, 0.3); --color-upvote-background-hover: #AE2C00; --color-upvote-content: #AE2C00; --color-upvote-content-weak: var(--color-global-brand-orangered); --color-upvote-disabled: #AE2C004d; --color-upvote-onBackground: #FFFFFF; --color-upvote-onStrongScrim: #FF895D; --color-upvote-onStrongScrim-disabled: rgba(255, 137, 93, 0.3); --color-upvote-onStrongScrim-weaker: #FF4500; --color-upvote-plain: #AE2C00; --color-upvote-plain-disabled: rgba(174, 44, 0, 0.3); --color-upvote-plain-weaker: #FF4500; --color-warning-background: #B78800; --color-warning-background-hover: #977000; --color-warning-content: #785800; --color-warning-content-hover: #5B4200; --color-warning-onBackground: #000000; --color-a-default: var(--color-primary); --color-a-hover: var(--color-primary-hover); --color-a-visited: var(--color-primary-visited); --color-banner-plain: var(--color-neutral-background-strong); --color-banner-plain-inverted: var(--color-neutral-content-strong); --color-banner-error: var(--color-danger-background); --color-banner-caution: var(--color-warning-background); --color-banner-success: var(--color-success-background); --color-banner-brand: var(--color-brand-background); --color-banner-plain-text: var(--color-neutral-content); --color-banner-plain-inverted-text: var(--color-neutral-background-weak); --color-banner-error-text: var(--color-danger-onBackground); --color-banner-caution-text: var(--color-warning-onBackground); --color-banner-caution-hover: var(--color-warning-background-hover); --color-banner-success-text: var(--color-success-onBackground); --color-banner-brand-text: var(--color-brand-onBackground); --color-button-overlay-focus: transparent; --color-button-overlay-active: transparent; --color-button-border-width: tomato; --color-button-border-width-activated: tomato; --color-button-primary-background-hover: var(--color-primary-background-hover); --color-button-primary-background-activated: var(--color-primary-background-selected); --color-button-primary-background-disabled: var(--color-interactive-background-disabled); --color-button-primary-border-hover: var(--color-primary-background); --color-button-primary-border-active: var(--color-primary-background-hover); --color-button-primary-text-disabled: var(--color-interactive-content-disabled); --color-button-primary-text-activated: var(--color-primary-onBackground-selected); --color-button-secondary-background: var(--color-secondary-background); --color-button-secondary-background-focus: var(--color-secondary-background); --color-button-secondary-background-hover: var(--color-secondary-background-hover); --color-button-secondary-background-disabled: var(--color-interactive-background-disabled); --color-button-secondary-background-activated: var(--color-secondary-background-selected); --color-button-secondary-border: transparent; --color-button-secondary-border-hover: var(--color-secondary-background); --color-button-secondary-border-active: var(--color-secondary-background-hover); --color-button-secondary-border-activated: transparent; --color-button-secondary-border-disabled: transparent; --color-button-secondary-text: var(--color-secondary-onBackground); --color-button-secondary-text-disabled: var(--color-interactive-content-disabled); --color-button-secondary-text-activated: var(--color-secondary-onBackground); --color-button-tertiary-background: transparent; --color-button-tertiary-background-focus: transparent; --color-button-tertiary-background-hover: var(--color-secondary-background-hover); --color-button-tertiary-background-disabled: transparent; --color-button-tertiary-background-activated: var(--color-neutral-content); --color-button-tertiary-border-hover: var(--color-secondary-background); --color-button-tertiary-border-active: var(--color-secondary-background-hover); --color-button-tertiary-text: var(--color-neutral-content-strong); --color-button-tertiary-text-disabled: var(--color-neutral-content-disabled); --color-button-tertiary-text-activated: var(--color-neutral-background); --color-button-plain-background-hover: var(--color-secondary-background-hover); --color-button-plain-background-disabled: transparent; --color-button-plain-background-activated: var(--color-secondary-background-selected); --color-button-plain-border-hover: var(--color-secondary-background); --color-button-plain-border-active: var(--color-secondary-background-hover); --color-button-plain-text: var(--color-secondary-plain); --color-button-plain-text-hover: var(--color-secondary-plain-hover); --color-button-plain-text-disabled: var(--color-interactive-content-disabled); --color-button-plain-text-activated: var(--color-secondary-onBackground); --color-button-primary-border-activated: var(--color-primary-background); --color-button-plain-text-weak: var(--color-secondary-plain-weak); --color-button-plain-inverted-background-activated: var(--color-neutral-content); --color-button-plain-inverted-text-activated: var(--color-neutral-background); --color-button-media-border-color-activated: var(--color-media-border-selected); --color-button-favorite-text: var(--color-favorite); --color-button-caution-background: var(--color-caution-background); --color-button-caution-background-hover: var(--color-caution-background-hover); --color-button-caution-background-disabled: var(--color-interactive-background-disabled); --color-button-caution-text: var(--color-caution-onBackground); --color-divider-default: var(--color-neutral-border); --color-input-secondary: var(--color-secondary-background); --color-input-secondary-hover: var(--color-secondary-background-hover); --color-input-border: transparent; --color-input-bordered: transparent; --color-input-bordered-hover: var(--color-neutral-background-hover); --color-input-secondary-text: var(--color-secondary-onBackground); --color-input-bordered-text: var(--color-secondary-plain); --color-input-helper-text: var(--color-neutral-content-weak); --color-input-pressed: var(--color-interactive-pressed); --color-input-radio: var(--color-secondary-plain-weak); --color-input-radio-hover: var(--color-neutral-content-strong); --color-label-default: var(--color-neutral-content-weak); --color-shimmer-background: #00000008; --color-shimmer-gradient-overlay: linear-gradient(to right, #00000000, #00000005 20%, #0000000f 50%, #00000008 70%, #00000000 100%); --color-switch-input-background-pressed-scrim: var(--color-interactive-pressed); --color-switch-input-background-handle: var(--color-global-white); --color-switch-input-background-handle-disabled: var(--color-secondary-background); --color-switch-input-background-default: var(--color-secondary-background); --color-switch-input-background-default-hover: var(--color-secondary-background-hover); --color-switch-input-background-default-disabled: var(--color-interactive-background-disabled); --color-switch-input-background-checked: var(--color-primary-background); --color-switch-input-background-checked-hover: var(--color-primary-background-hover); --color-switch-input-background-checked-disabled: var(--color-interactive-content-disabled); --color-tooltip-bg-neutral: var(--color-neutral-background-strong); --color-tooltip-text-neutral: var(--color-neutral-content); --color-tooltip-bg-inverted: var(--color-neutral-content); --color-tooltip-text-inverted: var(--color-neutral-background); --color-tooltip-bg-primary: var(--color-primary-background); --color-tooltip-text-primary: var(--color-primary-onBackground); --elevation-sm-inset: inset 0 0.0625rem 0.125rem 0 #00000021; --elevation-button-focus: var(--elevation-focus-ring); --elevation-switch-input-default-inset: var(--elevation-sm-inset); } @media (prefers-color-scheme: dark) { :root:not(.theme-light) .theme-beta, :root:not(.theme-light).theme-beta { --color-ai-background-weaker: #00382B; --color-ai-plain: #01A484; --color-ai-plain-hover: #00C29D; --color-avatar-gradient: linear-gradient(0deg, #48545Bff, #181C1Fff 75%); --color-brand-background: #D93900; --color-brand-background-hover: #AE2C00; --color-brand-onBackground: #FFFFFF; --color-caution-background: #D8A100; --color-caution-background-hover: #FFBF0B; --color-caution-onBackground: #000000; --color-caution-plain: #FFBF0B; --color-caution-plain-hover: #FFE284; --color-danger-background: #BC0117; --color-danger-background-disabled: #340F05; --color-danger-background-hover: #EB001F; --color-danger-background-weaker: #650405; --color-danger-content: #FF4F40; --color-danger-content-hover: #FF8773; --color-danger-onBackground: #FFFFFF; --color-danger-plain: #FF8773; --color-danger-plain-hover: #FDB3A4; --color-downvote-background: #6A5CFF; --color-downvote-background-disabled: rgba(106, 92, 255, 0.3); --color-downvote-background-hover: #523DFF; --color-downvote-content: #9580FF; --color-downvote-content-weak: #6A5CFF; --color-downvote-disabled: #9580FF4d; --color-downvote-onBackground: #FFFFFF; --color-downvote-onStrongScrim: #B29FFF; --color-downvote-onStrongScrim-disabled: rgba(178, 159, 255, 0.3); --color-downvote-onStrongScrim-weaker: #9580FF; --color-downvote-plain: #9580FF; --color-downvote-plain-disabled: rgba(149, 128, 255, 0.3); --color-downvote-plain-weaker: #6A5CFF; --color-elevation-large1: #0000007F; --color-elevation-large2: #00000033; --color-elevation-medium1: #0000007F; --color-elevation-medium2: #00000033; --color-elevation-small: #00000054; --color-elevation-xsmall: #000000AA; --color-favorite: #B78800; --color-global-admin: #D93900; --color-global-black: #000000; --color-global-brand-orangered: #FF4500; --color-global-focus: #007FAE; --color-global-gold: #D8A100; --color-global-moderator: #008A10; --color-global-nsfw: #DE019F; --color-global-offline: #667780; --color-global-online: #00C61C; --color-global-orangered: #FF4500; --color-global-stars: #D8A100; --color-global-white: #FFFFFF; --color-interactive-background-disabled: #FFFFFF0C; --color-interactive-content-disabled: #FFFFFF3F; --color-interactive-focused: #007FAE; --color-interactive-pressed: #FFFFFF26; --color-inverted-interactive-background-disabled: #0000000C; --color-inverted-interactive-content-disabled: #0000003F; --color-inverted-interactive-pressed: #00000026; --color-inverted-neutral-background: #FFFFFF; --color-inverted-neutral-background-hover: #F6F8F9; --color-inverted-neutral-border: #00000033; --color-inverted-neutral-content: #333D42; --color-inverted-neutral-content-strong: #181C1F; --color-inverted-secondary-background: #E5EBEE; --color-inverted-secondary-background-hover: #DBE4E9; --color-inverted-secondary-background-selected: #C9D7DE; --color-inverted-secondary-onBackground: #000000; --color-inverted-secondary-plain: #181C1F; --color-inverted-secondary-plain-hover: #000000; --color-media-background: rgba(0, 0, 0, 0.6); --color-media-background-hover: rgba(0, 0, 0, 0.8); --color-media-background-selected: rgba(0, 0, 0, 0.8); --color-media-border-selected: #FFFFFF; --color-media-border-weak: #FFFFFF19; --color-media-onBackground: #FFFFFF; --color-media-onBackground-disabled: #FFFFFF3F; --color-media-onBackground-weak: #E5EBEE; --color-neutral-background: #0E1113; --color-neutral-background-container: #181C1F; --color-neutral-background-container-hover: #21272A; --color-neutral-background-container-strong: #21272A; --color-neutral-background-container-strong-hover: #2A3236; --color-neutral-background-gilded: #181C1F; --color-neutral-background-gilded-hover: #21272A; --color-neutral-background-hover: #181C1F; --color-neutral-background-medium: #131313; --color-neutral-background-pinned: #0E1113; --color-neutral-background-selected: #2A3236; --color-neutral-background-strong: #181C1F; --color-neutral-background-strong-hover: #21272A; --color-neutral-background-weak: #000000; --color-neutral-background-weak-hover: #0E1113; --color-neutral-border: #FFFFFF33; --color-neutral-border-medium: #FFFFFF7F; --color-neutral-border-strong: #F6F8F9; --color-neutral-border-weak: #FFFFFF19; --color-neutral-content: #B7CAD4; --color-neutral-content-disabled: #303030; --color-neutral-content-strong: #EEF1F3; --color-neutral-content-weak: #8BA2AD; --color-offline: #767676; --color-online: #01A816; --color-opacity-50: #F2F2F280; --color-pizzaRed: #c62828; --color-primary: #648EFC; --color-primary-background: #115BCA; --color-primary-background-hover: #1870F4; --color-primary-background-selected: #648EFC; --color-primary-border: #648EFC; --color-primary-border-hover: #90A9FD; --color-primary-hover: #90A9FD; --color-primary-onBackground: #FFFFFF; --color-primary-onBackground-selected: #000000; --color-primary-plain: #648EFC; --color-primary-plain-hover: #90A9FD; --color-primary-plain-visited: #CF5FFF; --color-primary-visited: #CF5FFF; --color-scrim-background: #00000099; --color-scrim-background-strong: #000000CC; --color-secondary: #DBE4E9; --color-secondary-background: #2A3236; --color-secondary-background-hover: #333D42; --color-secondary-background-selected: #3D494E; --color-secondary-hover: #ffffff; --color-secondary-onBackground: #FFFFFF; --color-secondary-plain: #DBE4E9; --color-secondary-plain-hover: #FFFFFF; --color-secondary-plain-weak: #8BA2AD; --color-secondary-weak: #748791; --color-success-background: #016E0B; --color-success-background-hover: #008A10; --color-success-content: #01A816; --color-success-hover: #00C61C; --color-success-onBackground: #FFFFFF; --color-success-plain: #00C61C; --color-success-plain-hover: #58E15B; --color-tone-1: #F2F2F2; --color-tone-2: #ACACAC; --color-tone-3: #434343; --color-tone-4: #303030; --color-tone-5: #1E1E1E; --color-tone-6: #131313; --color-tone-7: #080808; --color-transparent-background-hover: #6677801a; --color-ui-canvas: #080808; --color-ui-modalbackground: var(--color-neutral-background-strong); --color-upvote-background: #D93900; --color-upvote-background-disabled: rgba(217, 57, 0, 0.3); --color-upvote-background-hover: #AE2C00; --color-upvote-content: #FF4500; --color-upvote-content-weak: var(--color-global-brand-orangered); --color-upvote-disabled: #FF45004d; --color-upvote-onBackground: #FFFFFF; --color-upvote-onStrongScrim: #FF895D; --color-upvote-onStrongScrim-disabled: rgba(255, 137, 93, 0.3); --color-upvote-onStrongScrim-weaker: #FF4500; --color-upvote-plain: #FF895D; --color-upvote-plain-disabled: rgba(255, 137, 93, 0.3); --color-upvote-plain-weaker: #FF4500; --color-warning-background: #B78800; --color-warning-background-hover: #D8A100; --color-warning-content: #B78800; --color-warning-content-hover: #D8A100; --color-warning-onBackground: #000000; --color-button-primary-border-activated: transparent; --color-button-plain-inverted-activated-text: var(--color-neutral-background); --color-input-radio-hover: var(--color-secondary-plain); --color-shimmer-background: #ffffff08; --color-shimmer-gradient-overlay: linear-gradient(to right, #ffffff00, #ffffff05 20%, #ffffff0f 50%, #ffffff08 70%, #ffffff00 100%); } } .theme-dark .theme-beta, .theme-dark.theme-beta { --color-ai-background-weaker: #00382B; --color-ai-plain: #01A484; --color-ai-plain-hover: #00C29D; --color-avatar-gradient: linear-gradient(0deg, #48545Bff, #181C1Fff 75%); --color-brand-background: #D93900; --color-brand-background-hover: #AE2C00; --color-brand-onBackground: #FFFFFF; --color-caution-background: #D8A100; --color-caution-background-hover: #FFBF0B; --color-caution-onBackground: #000000; --color-caution-plain: #FFBF0B; --color-caution-plain-hover: #FFE284; --color-danger-background: #BC0117; --color-danger-background-disabled: #340F05; --color-danger-background-hover: #EB001F; --color-danger-background-weaker: #650405; --color-danger-content: #FF4F40; --color-danger-content-hover: #FF8773; --color-danger-onBackground: #FFFFFF; --color-danger-plain: #FF8773; --color-danger-plain-hover: #FDB3A4; --color-downvote-background: #6A5CFF; --color-downvote-background-disabled: rgba(106, 92, 255, 0.3); --color-downvote-background-hover: #523DFF; --color-downvote-content: #9580FF; --color-downvote-content-weak: #6A5CFF; --color-downvote-disabled: #9580FF4d; --color-downvote-onBackground: #FFFFFF; --color-downvote-onStrongScrim: #B29FFF; --color-downvote-onStrongScrim-disabled: rgba(178, 159, 255, 0.3); --color-downvote-onStrongScrim-weaker: #9580FF; --color-downvote-plain: #9580FF; --color-downvote-plain-disabled: rgba(149, 128, 255, 0.3); --color-downvote-plain-weaker: #6A5CFF; --color-elevation-large1: #0000007F; --color-elevation-large2: #00000033; --color-elevation-medium1: #0000007F; --color-elevation-medium2: #00000033; --color-elevation-small: #00000054; --color-elevation-xsmall: #000000AA; --color-favorite: #B78800; --color-global-admin: #D93900; --color-global-black: #000000; --color-global-brand-orangered: #FF4500; --color-global-focus: #007FAE; --color-global-gold: #D8A100; --color-global-moderator: #008A10; --color-global-nsfw: #DE019F; --color-global-offline: #667780; --color-global-online: #00C61C; --color-global-orangered: #FF4500; --color-global-stars: #D8A100; --color-global-white: #FFFFFF; --color-interactive-background-disabled: #FFFFFF0C; --color-interactive-content-disabled: #FFFFFF3F; --color-interactive-focused: #007FAE; --color-interactive-pressed: #FFFFFF26; --color-inverted-interactive-background-disabled: #0000000C; --color-inverted-interactive-content-disabled: #0000003F; --color-inverted-interactive-pressed: #00000026; --color-inverted-neutral-background: #FFFFFF; --color-inverted-neutral-background-hover: #F6F8F9; --color-inverted-neutral-border: #00000033; --color-inverted-neutral-content: #333D42; --color-inverted-neutral-content-strong: #181C1F; --color-inverted-secondary-background: #E5EBEE; --color-inverted-secondary-background-hover: #DBE4E9; --color-inverted-secondary-background-selected: #C9D7DE; --color-inverted-secondary-onBackground: #000000; --color-inverted-secondary-plain: #181C1F; --color-inverted-secondary-plain-hover: #000000; --color-media-background: rgba(0, 0, 0, 0.6); --color-media-background-hover: rgba(0, 0, 0, 0.8); --color-media-background-selected: rgba(0, 0, 0, 0.8); --color-media-border-selected: #FFFFFF; --color-media-border-weak: #FFFFFF19; --color-media-onBackground: #FFFFFF; --color-media-onBackground-disabled: #FFFFFF3F; --color-media-onBackground-weak: #E5EBEE; --color-neutral-background: #0E1113; --color-neutral-background-container: #181C1F; --color-neutral-background-container-hover: #21272A; --color-neutral-background-container-strong: #21272A; --color-neutral-background-container-strong-hover: #2A3236; --color-neutral-background-gilded: #181C1F; --color-neutral-background-gilded-hover: #21272A; --color-neutral-background-hover: #181C1F; --color-neutral-background-medium: #131313; --color-neutral-background-pinned: #0E1113; --color-neutral-background-selected: #2A3236; --color-neutral-background-strong: #181C1F; --color-neutral-background-strong-hover: #21272A; --color-neutral-background-weak: #000000; --color-neutral-background-weak-hover: #0E1113; --color-neutral-border: #FFFFFF33; --color-neutral-border-medium: #FFFFFF7F; --color-neutral-border-strong: #F6F8F9; --color-neutral-border-weak: #FFFFFF19; --color-neutral-content: #B7CAD4; --color-neutral-content-disabled: #303030; --color-neutral-content-strong: #EEF1F3; --color-neutral-content-weak: #8BA2AD; --color-offline: #767676; --color-online: #01A816; --color-opacity-50: #F2F2F280; --color-pizzaRed: #c62828; --color-primary: #648EFC; --color-primary-background: #115BCA; --color-primary-background-hover: #1870F4; --color-primary-background-selected: #648EFC; --color-primary-border: #648EFC; --color-primary-border-hover: #90A9FD; --color-primary-hover: #90A9FD; --color-primary-onBackground: #FFFFFF; --color-primary-onBackground-selected: #000000; --color-primary-plain: #648EFC; --color-primary-plain-hover: #90A9FD; --color-primary-plain-visited: #CF5FFF; --color-primary-visited: #CF5FFF; --color-scrim-background: #00000099; --color-scrim-background-strong: #000000CC; --color-secondary: #DBE4E9; --color-secondary-background: #2A3236; --color-secondary-background-hover: #333D42; --color-secondary-background-selected: #3D494E; --color-secondary-hover: #ffffff; --color-secondary-onBackground: #FFFFFF; --color-secondary-plain: #DBE4E9; --color-secondary-plain-hover: #FFFFFF; --color-secondary-plain-weak: #8BA2AD; --color-secondary-weak: #748791; --color-success-background: #016E0B; --color-success-background-hover: #008A10; --color-success-content: #01A816; --color-success-hover: #00C61C; --color-success-onBackground: #FFFFFF; --color-success-plain: #00C61C; --color-success-plain-hover: #58E15B; --color-tone-1: #F2F2F2; --color-tone-2: #ACACAC; --color-tone-3: #434343; --color-tone-4: #303030; --color-tone-5: #1E1E1E; --color-tone-6: #131313; --color-tone-7: #080808; --color-transparent-background-hover: #6677801a; --color-ui-canvas: #080808; --color-ui-modalbackground: var(--color-neutral-background-strong); --color-upvote-background: #D93900; --color-upvote-background-disabled: rgba(217, 57, 0, 0.3); --color-upvote-background-hover: #AE2C00; --color-upvote-content: #FF4500; --color-upvote-content-weak: var(--color-global-brand-orangered); --color-upvote-disabled: #FF45004d; --color-upvote-onBackground: #FFFFFF; --color-upvote-onStrongScrim: #FF895D; --color-upvote-onStrongScrim-disabled: rgba(255, 137, 93, 0.3); --color-upvote-onStrongScrim-weaker: #FF4500; --color-upvote-plain: #FF895D; --color-upvote-plain-disabled: rgba(255, 137, 93, 0.3); --color-upvote-plain-weaker: #FF4500; --color-warning-background: #B78800; --color-warning-background-hover: #D8A100; --color-warning-content: #B78800; --color-warning-content-hover: #D8A100; --color-warning-onBackground: #000000; --color-button-primary-border-activated: transparent; --color-button-plain-inverted-activated-text: var(--color-neutral-background); --color-input-radio-hover: var(--color-secondary-plain); --color-shimmer-background: #ffffff08; --color-shimmer-gradient-overlay: linear-gradient(to right, #ffffff00, #ffffff05 20%, #ffffff0f 50%, #ffffff08 70%, #ffffff00 100%); } .theme-rpl, .theme-light.theme-rpl { --spacer-a-px: 0.125rem; --spacer-button-lg-px: var(--spacer-md); --spacer-button-md-px: var(--spacer-md); --spacer-button-sm-px: var(--spacer-sm); --spacer-input-padding-left: var(--spacer-md); --spacer-input-padding-top: var(--spacer-2xs); --spacer-label-default: var(--spacer-md); --spacer-switch-input-active-pl: var(--spacer-xs); --size-banner-height: var(--size-rem40); --size-button-lg-h: var(--size-2xl); --size-button-md-h: 2.5rem; --size-button-sm-h: var(--size-xl); --size-button-xs-h: var(--size-lg); --size-switch-input-h: var(--size-xl); --size-switch-input-w: var(--size-2xl); --line-a-focus: var(--line-md); --line-a-outline-moz: 0px; --line-a-outline-wb: 0px; --line-button-lg-border: var(--line-sm); --line-button-md-border: var(--line-sm); --line-button-sm-border: var(--line-sm); --line-button-xs-border: var(--line-sm); --line-button-border-activated: var(--line-lg); --line-input-border: var(--line-lg); --radius-md: 1.25rem; --radius-accordion-size: 0px; --font-10: normal undefined null / null var(--font-sans); --font-12: normal undefined null / null var(--font-sans); --font-14: normal undefined null / null var(--font-sans); --font-16: normal undefined null / null var(--font-sans); --font-18: normal undefined null / null var(--font-sans); --font-20: normal undefined null / null var(--font-sans); --font-24: normal undefined null / null var(--font-sans); --font-32: normal undefined null / null var(--font-sans); --font-48: normal undefined null / null var(--font-sans); --font-64: normal undefined null / null var(--font-sans); --font-title-h0: var(--font-64); --font-title-h1: var(--font-32); --font-title-h2: var(--font-24); --font-title-h3: var(--font-18); --font-title-h4: var(--font-16); --font-title-h5: var(--font-14); --font-title-h6: var(--font-12); --font-14-20-regular: normal 400 0.875rem / 1.25rem var(--font-sans); --font-14-20-semibold: normal 600 0.875rem / 1.25rem var(--font-sans); --font-16-20-regular: normal 400 1rem / 1.25rem var(--font-sans); --font-12-16-regular: normal 400 0.75rem / 1rem var(--font-sans); --font-12-16-semibold: normal 600 0.75rem / 1rem var(--font-sans); --font-button-lg: var(--font-14-20-semibold); --font-button-md: var(--font-14-20-semibold); --font-button-sm: var(--font-12-16-semibold); --font-label-default: var(--font-12-16-regular); --misc-accordion-border: 0; --misc-accordion-open-list-style-type: none; --misc-accordion-closed-list-style-type: none; --misc-divider-margin: 0; --misc-label-text-transform: capitalize; --misc-label-letter-spacing: initial; --blur-sm: 0.25rem; --blur-normal: 0.5rem; --blur-md: 0.75rem; --blur-lg: 1rem; --blur-xl: 1.5rem; --blur-2xl: 2.5rem; --blur-3xl: 4rem; --color-action-downvote: #6A5CFF; --color-action-upvote: #D93900; --color-ai-background-weaker: #E7FDF5; --color-ai-plain: #006C56; --color-ai-plain-hover: #015140; --color-alert-caution: #977000; --color-avatar-gradient: linear-gradient(0deg, #97AFBCff, #ffffffff 75%); --color-avatar-media-gradient: linear-gradient(0deg, #00000099, #181C1Fff 75%); --color-brand-background: #D93900; --color-brand-background-hover: #AE2C00; --color-brand-gradient-active: linear-gradient(180deg, #cd3700ff, #db3b00ff 68%, #D93900ff 100%); --color-brand-gradient-active-highlight: linear-gradient(83deg, #db3f0000 80%, #D93900ff 100%); --color-brand-gradient-default: linear-gradient(180deg, #D93900ff, #db3b00ff 30%, #AE2C00ff 100%); --color-brand-gradient-default-highlight: linear-gradient(258deg, #db3f0000 80%, #D93900ff 100%); --color-brand-gradient-hover: linear-gradient(180deg, #e23d00ff 15%, #cb3600ff 49%, #b43000ff 100%); --color-brand-gradient-hover-highlight: linear-gradient(323deg, #cb360000 65%, #cb3600ff 100%); --color-brand-onBackground: #FFFFFF; --color-category-live: #D93900; --color-category-nsfw: #DE019F; --color-category-spoiler: var(--color-tone-1); --color-caution-background: #FFBF0B; --color-caution-background-hover: #D8A100; --color-caution-onBackground: #000000; --color-caution-plain: #785800; --color-caution-plain-hover: #5B4200; --color-danger-background: #EB001F; --color-danger-background-disabled: #FDB3A4; --color-danger-background-hover: #BC0117; --color-danger-background-weaker: #FBDBD4; --color-danger-content: #BC0117; --color-danger-content-default: #ffffff; --color-danger-content-hover: #90000F; --color-danger-onBackground: #FFFFFF; --color-danger-plain: #BC0117; --color-danger-plain-hover: #90000F; --color-downvote-background: #6A5CFF; --color-downvote-background-disabled: rgba(106, 92, 255, 0.3); --color-downvote-background-hover: #523DFF; --color-downvote-content: #523DFF; --color-downvote-content-weak: #6A5CFF; --color-downvote-disabled: #523DFF4d; --color-downvote-onBackground: #FFFFFF; --color-downvote-onStrongScrim: #B29FFF; --color-downvote-onStrongScrim-disabled: rgba(178, 159, 255, 0.3); --color-downvote-onStrongScrim-weaker: #9580FF; --color-downvote-plain: #523DFF; --color-downvote-plain-disabled: rgba(82, 61, 255, 0.3); --color-downvote-plain-weaker: #6A5CFF; --color-elevation-large1: #0000003F; --color-elevation-large2: #00000026; --color-elevation-medium1: #0000003F; --color-elevation-medium2: #00000019; --color-elevation-small: #00000026; --color-elevation-xsmall: #0000003F; --color-favorite: #977000; --color-global-admin: #D93900; --color-global-alienblue: #1870F4; --color-global-black: #000000; --color-global-brand-orangered: #FF4500; --color-global-darkblue: #2A3236; --color-global-focus: #029DD5; --color-global-gold: #B78800; --color-global-moderator: #008A10; --color-global-nsfw: #DE019F; --color-global-offline: #667780; --color-global-online: #00C61C; --color-global-orangered: #FF4500; --color-global-stars: #977000; --color-global-white: #FFFFFF; --color-gradient-media: linear-gradient(180deg, #00000000, #0000008a 60%, #00000099 100%); --color-gradient-media-strong: linear-gradient(180deg, #00000000, #000000cc 60%, #000000e6 100%); --color-identity-admin: #D93900; --color-identity-coins: #B78800; --color-identity-moderator: #008A10; --color-identity-self: #01876D; --color-interactive-background-disabled: #0000000C; --color-interactive-content-disabled: #0000003F; --color-interactive-focused: #007FAE; --color-interactive-pressed: #00000026; --color-inverted-interactive-background-disabled: #FFFFFF0C; --color-inverted-interactive-content-disabled: #FFFFFF3F; --color-inverted-interactive-pressed: #FFFFFF26; --color-inverted-neutral-background: #0E1113; --color-inverted-neutral-background-hover: #181C1F; --color-inverted-neutral-border: #FFFFFF33; --color-inverted-neutral-content: #B7CAD4; --color-inverted-neutral-content-strong: #EEF1F3; --color-inverted-secondary-background: #2A3236; --color-inverted-secondary-background-hover: #333D42; --color-inverted-secondary-background-selected: #3D494E; --color-inverted-secondary-onBackground: #FFFFFF; --color-inverted-secondary-plain: #DBE4E9; --color-inverted-secondary-plain-hover: #FFFFFF; --color-media-background: rgba(0, 0, 0, 0.6); --color-media-background-hover: rgba(0, 0, 0, 0.8); --color-media-background-selected: rgba(0, 0, 0, 0.8); --color-media-border-selected: #FFFFFF; --color-media-border-weak: #FFFFFF19; --color-media-onBackground: #FFFFFF; --color-media-onBackground-disabled: #FFFFFF3F; --color-media-onBackground-weak: #E5EBEE; --color-media-onbackground: #ffffff; --color-media-onbackground-disabled: #ffffff40; --color-media-onbackground-weak: #B7CAD4; --color-neutral-background: #FFFFFF; --color-neutral-background-container: #F6F8F9; --color-neutral-background-container-hover: #EEF1F3; --color-neutral-background-container-strong: #EEF1F3; --color-neutral-background-container-strong-hover: #E5EBEE; --color-neutral-background-gilded: #FFF9E0; --color-neutral-background-gilded-hover: #FFF3C0; --color-neutral-background-hover: #F6F8F9; --color-neutral-background-medium: #F8F8F8; --color-neutral-background-pinned: #FFFFFF; --color-neutral-background-selected: #E5EBEE; --color-neutral-background-strong: #FFFFFF; --color-neutral-background-strong-hover: #F6F8F9; --color-neutral-background-weak: #F6F8F9; --color-neutral-background-weak-hover: #EEF1F3; --color-neutral-border: #00000033; --color-neutral-border-medium: #0000007F; --color-neutral-border-strong: #181C1F; --color-neutral-border-weak: #00000019; --color-neutral-content: #333D42; --color-neutral-content-disabled: #D6D6D6; --color-neutral-content-strong: #181C1F; --color-neutral-content-weak: #5C6C74; --color-offline: #767676; --color-online: #01A816; --color-opacity-08: #13131314; --color-opacity-50: #00000080; --color-opacity-highlight: linear-gradient(#0A2F6C1a, var(--color-tone-6)); --color-pizzaRed: #ef5350; --color-primary: #115BCA; --color-primary-background: #0A449B; --color-primary-background-hover: #0A2F6C; --color-primary-background-selected: #0A1A3F; --color-primary-border: #0A449B; --color-primary-border-hover: #0A2F6C; --color-primary-hover: #0A449B; --color-primary-onBackground: #FFFFFF; --color-primary-onBackground-selected: #FFFFFF; --color-primary-plain: #0A449B; --color-primary-plain-hover: #0A2F6C; --color-primary-plain-visited: #7600A3; --color-primary-visited: #9B00D4; --color-scrim: #00000099; --color-scrim-background: #00000099; --color-scrim-background-strong: #000000CC; --color-scrim-gradient: linear-gradient(180deg, #00000000, #0000008a 60%, #00000099 100%); --color-scrim-strong: #000000cc; --color-secondary: #21272A; --color-secondary-background: #E5EBEE; --color-secondary-background-hover: #DBE4E9; --color-secondary-background-selected: #C9D7DE; --color-secondary-hover: #000000; --color-secondary-onBackground: #000000; --color-secondary-plain: #181C1F; --color-secondary-plain-hover: #000000; --color-secondary-plain-weak: #5C6C74; --color-secondary-weak: #576F76; --color-success-background: #008A10; --color-success-background-hover: #016E0B; --color-success-content: #016E0B; --color-success-hover: #005306; --color-success-onBackground: #FFFFFF; --color-success-plain: #016E0B; --color-success-plain-hover: #005306; --color-tone-1: #131313; --color-tone-2: #434343; --color-tone-3: #ACACAC; --color-tone-4: #E4E4E4; --color-tone-5: #F2F2F2; --color-tone-6: #F8F8F8; --color-tone-7: #ffffff; --color-transparent-background-hover: #7487911a; --color-ui-canvas: var(--color-tone-5); --color-ui-modalbackground: var(--color-neutral-background-strong); --color-upvote-background: #D93900; --color-upvote-background-disabled: rgba(217, 57, 0, 0.3); --color-upvote-background-hover: #AE2C00; --color-upvote-content: #AE2C00; --color-upvote-content-weak: var(--color-global-brand-orangered); --color-upvote-disabled: #AE2C004d; --color-upvote-onBackground: #FFFFFF; --color-upvote-onStrongScrim: #FF895D; --color-upvote-onStrongScrim-disabled: rgba(255, 137, 93, 0.3); --color-upvote-onStrongScrim-weaker: #FF4500; --color-upvote-plain: #AE2C00; --color-upvote-plain-disabled: rgba(174, 44, 0, 0.3); --color-upvote-plain-weaker: #FF4500; --color-warning-background: #B78800; --color-warning-background-hover: #977000; --color-warning-content: #785800; --color-warning-content-hover: #5B4200; --color-warning-onBackground: #000000; --color-a-default: var(--color-primary); --color-a-hover: var(--color-primary-hover); --color-a-visited: var(--color-primary-visited); --color-banner-plain: var(--color-neutral-background-strong); --color-banner-plain-inverted: var(--color-neutral-content-strong); --color-banner-error: var(--color-danger-background); --color-banner-caution: var(--color-warning-background); --color-banner-success: var(--color-success-background); --color-banner-brand: var(--color-brand-background); --color-banner-plain-text: var(--color-neutral-content); --color-banner-plain-inverted-text: var(--color-neutral-background-weak); --color-banner-error-text: var(--color-danger-onBackground); --color-banner-caution-text: var(--color-warning-onBackground); --color-banner-caution-hover: var(--color-warning-background-hover); --color-banner-success-text: var(--color-success-onBackground); --color-banner-brand-text: var(--color-brand-onBackground); --color-button-overlay-focus: transparent; --color-button-overlay-active: transparent; --color-button-border-width: tomato; --color-button-border-width-activated: tomato; --color-button-primary-background-hover: var(--color-primary-background-hover); --color-button-primary-background-activated: var(--color-primary-background-selected); --color-button-primary-background-disabled: var(--color-interactive-background-disabled); --color-button-primary-border-hover: var(--color-primary-background); --color-button-primary-border-active: var(--color-primary-background-hover); --color-button-primary-text-disabled: var(--color-interactive-content-disabled); --color-button-primary-text-activated: var(--color-primary-onBackground-selected); --color-button-secondary-background: var(--color-secondary-background); --color-button-secondary-background-focus: var(--color-secondary-background); --color-button-secondary-background-hover: var(--color-secondary-background-hover); --color-button-secondary-background-disabled: var(--color-interactive-background-disabled); --color-button-secondary-background-activated: var(--color-secondary-background-selected); --color-button-secondary-border: transparent; --color-button-secondary-border-hover: var(--color-secondary-background); --color-button-secondary-border-active: var(--color-secondary-background-hover); --color-button-secondary-border-activated: transparent; --color-button-secondary-border-disabled: transparent; --color-button-secondary-text: var(--color-secondary-onBackground); --color-button-secondary-text-disabled: var(--color-interactive-content-disabled); --color-button-secondary-text-activated: var(--color-secondary-onBackground); --color-button-tertiary-background: transparent; --color-button-tertiary-background-focus: transparent; --color-button-tertiary-background-hover: var(--color-secondary-background-hover); --color-button-tertiary-background-disabled: transparent; --color-button-tertiary-background-activated: var(--color-neutral-content); --color-button-tertiary-border-hover: var(--color-secondary-background); --color-button-tertiary-border-active: var(--color-secondary-background-hover); --color-button-tertiary-text: var(--color-neutral-content-strong); --color-button-tertiary-text-disabled: var(--color-neutral-content-disabled); --color-button-tertiary-text-activated: var(--color-neutral-background); --color-button-plain-background-hover: var(--color-secondary-background-hover); --color-button-plain-background-disabled: transparent; --color-button-plain-background-activated: var(--color-secondary-background-selected); --color-button-plain-border-hover: var(--color-secondary-background); --color-button-plain-border-active: var(--color-secondary-background-hover); --color-button-plain-text: var(--color-secondary-plain); --color-button-plain-text-hover: var(--color-secondary-plain-hover); --color-button-plain-text-disabled: var(--color-interactive-content-disabled); --color-button-plain-text-activated: var(--color-secondary-onBackground); --color-button-primary-border-activated: var(--color-primary-background); --color-button-plain-text-weak: var(--color-secondary-plain-weak); --color-button-plain-inverted-background-activated: var(--color-neutral-content); --color-button-plain-inverted-text-activated: var(--color-neutral-background); --color-button-media-border-color-activated: var(--color-media-border-selected); --color-button-favorite-text: var(--color-favorite); --color-button-caution-background: var(--color-caution-background); --color-button-caution-background-hover: var(--color-caution-background-hover); --color-button-caution-background-disabled: var(--color-interactive-background-disabled); --color-button-caution-text: var(--color-caution-onBackground); --color-divider-default: var(--color-neutral-border); --color-input-secondary: var(--color-secondary-background); --color-input-secondary-hover: var(--color-secondary-background-hover); --color-input-border: transparent; --color-input-bordered: transparent; --color-input-bordered-hover: var(--color-neutral-background-hover); --color-input-secondary-text: var(--color-secondary-onBackground); --color-input-bordered-text: var(--color-secondary-plain); --color-input-helper-text: var(--color-neutral-content-weak); --color-input-pressed: var(--color-interactive-pressed); --color-input-radio: var(--color-secondary-plain-weak); --color-input-radio-hover: var(--color-neutral-content-strong); --color-label-default: var(--color-neutral-content-weak); --color-shimmer-background: #00000008; --color-shimmer-gradient-overlay: linear-gradient(to right, #00000000, #00000005 20%, #0000000f 50%, #00000008 70%, #00000000 100%); --color-switch-input-background-pressed-scrim: var(--color-interactive-pressed); --color-switch-input-background-handle: var(--color-global-white); --color-switch-input-background-handle-disabled: var(--color-secondary-background); --color-switch-input-background-default: var(--color-secondary-background); --color-switch-input-background-default-hover: var(--color-secondary-background-hover); --color-switch-input-background-default-disabled: var(--color-interactive-background-disabled); --color-switch-input-background-checked: var(--color-primary-background); --color-switch-input-background-checked-hover: var(--color-primary-background-hover); --color-switch-input-background-checked-disabled: var(--color-interactive-content-disabled); --color-tooltip-bg-neutral: var(--color-neutral-background-strong); --color-tooltip-text-neutral: var(--color-neutral-content); --color-tooltip-bg-inverted: var(--color-neutral-content); --color-tooltip-text-inverted: var(--color-neutral-background); --color-tooltip-bg-primary: var(--color-primary-background); --color-tooltip-text-primary: var(--color-primary-onBackground); --elevation-sm-inset: inset 0 0.0625rem 0.125rem 0 #00000021; --elevation-button-focus: var(--elevation-focus-ring); --elevation-switch-input-default-inset: var(--elevation-sm-inset); } @media (prefers-color-scheme: dark) { :root:not(.theme-light) .theme-rpl, :root:not(.theme-light).theme-rpl { --color-ai-background-weaker: #00382B; --color-ai-plain: #01A484; --color-ai-plain-hover: #00C29D; --color-avatar-gradient: linear-gradient(0deg, #48545Bff, #181C1Fff 75%); --color-brand-background: #D93900; --color-brand-background-hover: #AE2C00; --color-brand-onBackground: #FFFFFF; --color-caution-background: #D8A100; --color-caution-background-hover: #FFBF0B; --color-caution-onBackground: #000000; --color-caution-plain: #FFBF0B; --color-caution-plain-hover: #FFE284; --color-danger-background: #BC0117; --color-danger-background-disabled: #340F05; --color-danger-background-hover: #EB001F; --color-danger-background-weaker: #650405; --color-danger-content: #FF4F40; --color-danger-content-hover: #FF8773; --color-danger-onBackground: #FFFFFF; --color-danger-plain: #FF8773; --color-danger-plain-hover: #FDB3A4; --color-downvote-background: #6A5CFF; --color-downvote-background-disabled: rgba(106, 92, 255, 0.3); --color-downvote-background-hover: #523DFF; --color-downvote-content: #9580FF; --color-downvote-content-weak: #6A5CFF; --color-downvote-disabled: #9580FF4d; --color-downvote-onBackground: #FFFFFF; --color-downvote-onStrongScrim: #B29FFF; --color-downvote-onStrongScrim-disabled: rgba(178, 159, 255, 0.3); --color-downvote-onStrongScrim-weaker: #9580FF; --color-downvote-plain: #9580FF; --color-downvote-plain-disabled: rgba(149, 128, 255, 0.3); --color-downvote-plain-weaker: #6A5CFF; --color-elevation-large1: #0000007F; --color-elevation-large2: #00000033; --color-elevation-medium1: #0000007F; --color-elevation-medium2: #00000033; --color-elevation-small: #00000054; --color-elevation-xsmall: #000000AA; --color-favorite: #B78800; --color-global-admin: #D93900; --color-global-black: #000000; --color-global-brand-orangered: #FF4500; --color-global-focus: #007FAE; --color-global-gold: #D8A100; --color-global-moderator: #008A10; --color-global-nsfw: #DE019F; --color-global-offline: #667780; --color-global-online: #00C61C; --color-global-orangered: #FF4500; --color-global-stars: #D8A100; --color-global-white: #FFFFFF; --color-interactive-background-disabled: #FFFFFF0C; --color-interactive-content-disabled: #FFFFFF3F; --color-interactive-focused: #007FAE; --color-interactive-pressed: #FFFFFF26; --color-inverted-interactive-background-disabled: #0000000C; --color-inverted-interactive-content-disabled: #0000003F; --color-inverted-interactive-pressed: #00000026; --color-inverted-neutral-background: #FFFFFF; --color-inverted-neutral-background-hover: #F6F8F9; --color-inverted-neutral-border: #00000033; --color-inverted-neutral-content: #333D42; --color-inverted-neutral-content-strong: #181C1F; --color-inverted-secondary-background: #E5EBEE; --color-inverted-secondary-background-hover: #DBE4E9; --color-inverted-secondary-background-selected: #C9D7DE; --color-inverted-secondary-onBackground: #000000; --color-inverted-secondary-plain: #181C1F; --color-inverted-secondary-plain-hover: #000000; --color-media-background: rgba(0, 0, 0, 0.6); --color-media-background-hover: rgba(0, 0, 0, 0.8); --color-media-background-selected: rgba(0, 0, 0, 0.8); --color-media-border-selected: #FFFFFF; --color-media-border-weak: #FFFFFF19; --color-media-onBackground: #FFFFFF; --color-media-onBackground-disabled: #FFFFFF3F; --color-media-onBackground-weak: #E5EBEE; --color-neutral-background: #0E1113; --color-neutral-background-container: #181C1F; --color-neutral-background-container-hover: #21272A; --color-neutral-background-container-strong: #21272A; --color-neutral-background-container-strong-hover: #2A3236; --color-neutral-background-gilded: #181C1F; --color-neutral-background-gilded-hover: #21272A; --color-neutral-background-hover: #181C1F; --color-neutral-background-medium: #131313; --color-neutral-background-pinned: #0E1113; --color-neutral-background-selected: #2A3236; --color-neutral-background-strong: #181C1F; --color-neutral-background-strong-hover: #21272A; --color-neutral-background-weak: #000000; --color-neutral-background-weak-hover: #0E1113; --color-neutral-border: #FFFFFF33; --color-neutral-border-medium: #FFFFFF7F; --color-neutral-border-strong: #F6F8F9; --color-neutral-border-weak: #FFFFFF19; --color-neutral-content: #B7CAD4; --color-neutral-content-disabled: #303030; --color-neutral-content-strong: #EEF1F3; --color-neutral-content-weak: #8BA2AD; --color-offline: #767676; --color-online: #01A816; --color-opacity-50: #F2F2F280; --color-pizzaRed: #c62828; --color-primary: #648EFC; --color-primary-background: #115BCA; --color-primary-background-hover: #1870F4; --color-primary-background-selected: #648EFC; --color-primary-border: #648EFC; --color-primary-border-hover: #90A9FD; --color-primary-hover: #90A9FD; --color-primary-onBackground: #FFFFFF; --color-primary-onBackground-selected: #000000; --color-primary-plain: #648EFC; --color-primary-plain-hover: #90A9FD; --color-primary-plain-visited: #CF5FFF; --color-primary-visited: #CF5FFF; --color-scrim-background: #00000099; --color-scrim-background-strong: #000000CC; --color-secondary: #DBE4E9; --color-secondary-background: #2A3236; --color-secondary-background-hover: #333D42; --color-secondary-background-selected: #3D494E; --color-secondary-hover: #ffffff; --color-secondary-onBackground: #FFFFFF; --color-secondary-plain: #DBE4E9; --color-secondary-plain-hover: #FFFFFF; --color-secondary-plain-weak: #8BA2AD; --color-secondary-weak: #748791; --color-success-background: #016E0B; --color-success-background-hover: #008A10; --color-success-content: #01A816; --color-success-hover: #00C61C; --color-success-onBackground: #FFFFFF; --color-success-plain: #00C61C; --color-success-plain-hover: #58E15B; --color-tone-1: #F2F2F2; --color-tone-2: #ACACAC; --color-tone-3: #434343; --color-tone-4: #303030; --color-tone-5: #1E1E1E; --color-tone-6: #131313; --color-tone-7: #080808; --color-transparent-background-hover: #6677801a; --color-ui-canvas: #080808; --color-ui-modalbackground: var(--color-neutral-background-strong); --color-upvote-background: #D93900; --color-upvote-background-disabled: rgba(217, 57, 0, 0.3); --color-upvote-background-hover: #AE2C00; --color-upvote-content: #FF4500; --color-upvote-content-weak: var(--color-global-brand-orangered); --color-upvote-disabled: #FF45004d; --color-upvote-onBackground: #FFFFFF; --color-upvote-onStrongScrim: #FF895D; --color-upvote-onStrongScrim-disabled: rgba(255, 137, 93, 0.3); --color-upvote-onStrongScrim-weaker: #FF4500; --color-upvote-plain: #FF895D; --color-upvote-plain-disabled: rgba(255, 137, 93, 0.3); --color-upvote-plain-weaker: #FF4500; --color-warning-background: #B78800; --color-warning-background-hover: #D8A100; --color-warning-content: #B78800; --color-warning-content-hover: #D8A100; --color-warning-onBackground: #000000; --color-button-primary-border-activated: transparent; --color-button-plain-inverted-activated-text: var(--color-neutral-background); --color-input-radio-hover: var(--color-secondary-plain); --color-shimmer-background: #ffffff08; --color-shimmer-gradient-overlay: linear-gradient(to right, #ffffff00, #ffffff05 20%, #ffffff0f 50%, #ffffff08 70%, #ffffff00 100%); } } .theme-dark .theme-rpl, .theme-dark.theme-rpl { --color-ai-background-weaker: #00382B; --color-ai-plain: #01A484; --color-ai-plain-hover: #00C29D; --color-avatar-gradient: linear-gradient(0deg, #48545Bff, #181C1Fff 75%); --color-brand-background: #D93900; --color-brand-background-hover: #AE2C00; --color-brand-onBackground: #FFFFFF; --color-caution-background: #D8A100; --color-caution-background-hover: #FFBF0B; --color-caution-onBackground: #000000; --color-caution-plain: #FFBF0B; --color-caution-plain-hover: #FFE284; --color-danger-background: #BC0117; --color-danger-background-disabled: #340F05; --color-danger-background-hover: #EB001F; --color-danger-background-weaker: #650405; --color-danger-content: #FF4F40; --color-danger-content-hover: #FF8773; --color-danger-onBackground: #FFFFFF; --color-danger-plain: #FF8773; --color-danger-plain-hover: #FDB3A4; --color-downvote-background: #6A5CFF; --color-downvote-background-disabled: rgba(106, 92, 255, 0.3); --color-downvote-background-hover: #523DFF; --color-downvote-content: #9580FF; --color-downvote-content-weak: #6A5CFF; --color-downvote-disabled: #9580FF4d; --color-downvote-onBackground: #FFFFFF; --color-downvote-onStrongScrim: #B29FFF; --color-downvote-onStrongScrim-disabled: rgba(178, 159, 255, 0.3); --color-downvote-onStrongScrim-weaker: #9580FF; --color-downvote-plain: #9580FF; --color-downvote-plain-disabled: rgba(149, 128, 255, 0.3); --color-downvote-plain-weaker: #6A5CFF; --color-elevation-large1: #0000007F; --color-elevation-large2: #00000033; --color-elevation-medium1: #0000007F; --color-elevation-medium2: #00000033; --color-elevation-small: #00000054; --color-elevation-xsmall: #000000AA; --color-favorite: #B78800; --color-global-admin: #D93900; --color-global-black: #000000; --color-global-brand-orangered: #FF4500; --color-global-focus: #007FAE; --color-global-gold: #D8A100; --color-global-moderator: #008A10; --color-global-nsfw: #DE019F; --color-global-offline: #667780; --color-global-online: #00C61C; --color-global-orangered: #FF4500; --color-global-stars: #D8A100; --color-global-white: #FFFFFF; --color-interactive-background-disabled: #FFFFFF0C; --color-interactive-content-disabled: #FFFFFF3F; --color-interactive-focused: #007FAE; --color-interactive-pressed: #FFFFFF26; --color-inverted-interactive-background-disabled: #0000000C; --color-inverted-interactive-content-disabled: #0000003F; --color-inverted-interactive-pressed: #00000026; --color-inverted-neutral-background: #FFFFFF; --color-inverted-neutral-background-hover: #F6F8F9; --color-inverted-neutral-border: #00000033; --color-inverted-neutral-content: #333D42; --color-inverted-neutral-content-strong: #181C1F; --color-inverted-secondary-background: #E5EBEE; --color-inverted-secondary-background-hover: #DBE4E9; --color-inverted-secondary-background-selected: #C9D7DE; --color-inverted-secondary-onBackground: #000000; --color-inverted-secondary-plain: #181C1F; --color-inverted-secondary-plain-hover: #000000; --color-media-background: rgba(0, 0, 0, 0.6); --color-media-background-hover: rgba(0, 0, 0, 0.8); --color-media-background-selected: rgba(0, 0, 0, 0.8); --color-media-border-selected: #FFFFFF; --color-media-border-weak: #FFFFFF19; --color-media-onBackground: #FFFFFF; --color-media-onBackground-disabled: #FFFFFF3F; --color-media-onBackground-weak: #E5EBEE; --color-neutral-background: #0E1113; --color-neutral-background-container: #181C1F; --color-neutral-background-container-hover: #21272A; --color-neutral-background-container-strong: #21272A; --color-neutral-background-container-strong-hover: #2A3236; --color-neutral-background-gilded: #181C1F; --color-neutral-background-gilded-hover: #21272A; --color-neutral-background-hover: #181C1F; --color-neutral-background-medium: #131313; --color-neutral-background-pinned: #0E1113; --color-neutral-background-selected: #2A3236; --color-neutral-background-strong: #181C1F; --color-neutral-background-strong-hover: #21272A; --color-neutral-background-weak: #000000; --color-neutral-background-weak-hover: #0E1113; --color-neutral-border: #FFFFFF33; --color-neutral-border-medium: #FFFFFF7F; --color-neutral-border-strong: #F6F8F9; --color-neutral-border-weak: #FFFFFF19; --color-neutral-content: #B7CAD4; --color-neutral-content-disabled: #303030; --color-neutral-content-strong: #EEF1F3; --color-neutral-content-weak: #8BA2AD; --color-offline: #767676; --color-online: #01A816; --color-opacity-50: #F2F2F280; --color-pizzaRed: #c62828; --color-primary: #648EFC; --color-primary-background: #115BCA; --color-primary-background-hover: #1870F4; --color-primary-background-selected: #648EFC; --color-primary-border: #648EFC; --color-primary-border-hover: #90A9FD; --color-primary-hover: #90A9FD; --color-primary-onBackground: #FFFFFF; --color-primary-onBackground-selected: #000000; --color-primary-plain: #648EFC; --color-primary-plain-hover: #90A9FD; --color-primary-plain-visited: #CF5FFF; --color-primary-visited: #CF5FFF; --color-scrim-background: #00000099; --color-scrim-background-strong: #000000CC; --color-secondary: #DBE4E9; --color-secondary-background: #2A3236; --color-secondary-background-hover: #333D42; --color-secondary-background-selected: #3D494E; --color-secondary-hover: #ffffff; --color-secondary-onBackground: #FFFFFF; --color-secondary-plain: #DBE4E9; --color-secondary-plain-hover: #FFFFFF; --color-secondary-plain-weak: #8BA2AD; --color-secondary-weak: #748791; --color-success-background: #016E0B; --color-success-background-hover: #008A10; --color-success-content: #01A816; --color-success-hover: #00C61C; --color-success-onBackground: #FFFFFF; --color-success-plain: #00C61C; --color-success-plain-hover: #58E15B; --color-tone-1: #F2F2F2; --color-tone-2: #ACACAC; --color-tone-3: #434343; --color-tone-4: #303030; --color-tone-5: #1E1E1E; --color-tone-6: #131313; --color-tone-7: #080808; --color-transparent-background-hover: #6677801a; --color-ui-canvas: #080808; --color-ui-modalbackground: var(--color-neutral-background-strong); --color-upvote-background: #D93900; --color-upvote-background-disabled: rgba(217, 57, 0, 0.3); --color-upvote-background-hover: #AE2C00; --color-upvote-content: #FF4500; --color-upvote-content-weak: var(--color-global-brand-orangered); --color-upvote-disabled: #FF45004d; --color-upvote-onBackground: #FFFFFF; --color-upvote-onStrongScrim: #FF895D; --color-upvote-onStrongScrim-disabled: rgba(255, 137, 93, 0.3); --color-upvote-onStrongScrim-weaker: #FF4500; --color-upvote-plain: #FF895D; --color-upvote-plain-disabled: rgba(255, 137, 93, 0.3); --color-upvote-plain-weaker: #FF4500; --color-warning-background: #B78800; --color-warning-background-hover: #D8A100; --color-warning-content: #B78800; --color-warning-content-hover: #D8A100; --color-warning-onBackground: #000000; --color-button-primary-border-activated: transparent; --color-button-plain-inverted-activated-text: var(--color-neutral-background); --color-input-radio-hover: var(--color-secondary-plain); --color-shimmer-background: #ffffff08; --color-shimmer-gradient-overlay: linear-gradient(to right, #ffffff00, #ffffff05 20%, #ffffff0f 50%, #ffffff08 70%, #ffffff00 100%); } :root { font-family: var(--font-sans); font-size: 16px; } :root, .theme-light, .theme-dark { background: var(--color-tone-7); color: var(--color-neutral-content, var(--color-tone-1)); } /* iOS form zoom fix */ body { font-size: var(--font-body); } /* Fix FOUC by hiding custom elements until they are registered. Certain components that gaurantee that they do not affect layout may be excluded. */ :not(:defined):not(faceplate-auto-height-animator, faceplate-dropdown-menu, faceplate-expandable-section-helper, faceplate-hovercard, faceplate-tracker) { visibility: hidden; } faceplate-hovercard:not(:defined) > [slot=\'content\'] { display: none; } /* Override the _color_ of the default user-agent outline ring on focus-visible */ :focus-visible { outline-color: var(--color-global-focus); } faceplate-banner [slot=\'closeButton\'] { margin-left: var(--spacer-sm); } faceplate-banner [slot=\'actionButtons\'] button:first-of-type { margin-right: var(--spacer-xs); } faceplate-banner[appearance=\'caution\'] button { color: var(--color-banner-caution-text); } faceplate-banner[appearance=\'caution\'] button:hover { background-color: var(--color-banner-caution-hover); } /** * The blockquote style module * * This LESS module provides the default Faceplate styles for `<blockquote>` elements. * * ```less * @import \'@reddit/faceplate-ui/styles/elements/blockquote.less\'; * * // To apply styles to <blockquote> elements within a scope (e.g. a shadow DOM) * blockquote { * .blockquote(); * } * * // To apply styles to a custom element directly * :host { * display: block; * .blockquote(); * } * ``` * * --- * * Faceplate includes these styles on the `<blockquote>` element by default. * * ```demo:html * <blockquote> * that happened to me once but instead of clapping it was eating doritos * </blockquote> * ``` * * @packageDocumentation */ /* Toggle Buttons */ .button-favorite { --button-color-background-focus: transparent; --button-color-background-hover: var(--color-button-plain-background-hover); --button-color-background-disabled: var(--color-button-plain-background-disabled); --button-color-background-activated: var(--color-button-plain-background-activated); --button-color-background-active: linear-gradient(var(--color-button-secondary-background-hover), var(--color-button-secondary-background-hover)); --button-color-text-default: var(--color-button-plain-text); --button-color-text-disabled: var(--color-button-plain-text-disabled); --button-color-text-activated: var(--color-button-plain-text-activated); --button-color-text-hover: var(--color-button-plain-text-hover); --button-border-color-default: transparent; --button-color-text-default: var(--color-neutral-content-weak); --button-color-background-default: transparent; --button-color-text-hover: var(--color-secondary-onBackground); } .button-favorite-toggled { --button-color-background-focus: transparent; --button-color-background-hover: var(--color-button-plain-background-hover); --button-color-background-disabled: var(--color-button-plain-background-disabled); --button-color-background-activated: var(--color-button-plain-background-activated); --button-color-background-active: linear-gradient(var(--color-button-secondary-background-hover), var(--color-button-secondary-background-hover)); --button-color-text-default: var(--color-button-plain-text); --button-color-text-disabled: var(--color-button-plain-text-disabled); --button-color-text-activated: var(--color-button-plain-text-activated); --button-color-text-hover: var(--color-button-plain-text-hover); --button-border-color-default: transparent; --button-color-background-default: transparent; --button-color-text-default: var(--color-button-favorite-text); --button-color-text-hover: var(--color-button-favorite-text); } .button-secondary-toggled { --button-color-background-default: var(--color-button-secondary-background); --button-color-background-focus: var(--color-button-secondary-background-focus); --button-color-background-hover: var(--color-button-secondary-background-hover); --button-color-background-active: linear-gradient(var(--color-button-secondary-background-hover), var(--color-button-secondary-background-hover)); --button-color-background-disabled: var(--color-button-secondary-background-disabled); --button-color-background-activated: var(--color-button-secondary-background-activated); --button-color-text-default: var(--color-button-secondary-text); --button-color-text-disabled: var(--color-button-secondary-text-disabled); --button-color-text-activated: var(--color-button-secondary-text-activated); --button-border-color-default: var(--color-button-secondary-border); --button-color-background-default: var(--color-button-secondary-background-activated); --button-border-color-default: var(--color-neutral-border); } .button-caution { --button-color-background-default: var(--color-button-caution-background); --button-color-background-hover: var(--color-button-caution-background-hover); --button-color-background-disabled: var(--color-button-caution-background-disabled); --button-color-text-default: var(--color-button-caution-text); } .rpl-vote-button-group { /* APPEARANCE AGNOSTIC STYLES */ /* PLAIN APPEARANCE */ /* SECONDARY APPEARANCE */ /* BORDERED APPEARANCE */ --vote-button-divider-color: var(--color-neutral-border-weak); /* MEDIA APPEARANCE */ } .rpl-vote-button-group:not([disabled]) .rpl-vote-button-group-label { color: var(--vote-button-label-color); } .rpl-vote-button-group:not([disabled]):hover.rpl-vote-button-group-label { color: var(--vote-button-label-color-hover); } .rpl-vote-button-group .rpl-vote-button-group-divider { background-color: var(--vote-button-divider-color); } .rpl-vote-button-group[disabled] button[rpl]:disabled { --button-color-background-disabled: transparent; } .rpl-vote-button-group.button-plain { --vote-button-label-color: var(--color-secondary-plain); --vote-button-label-color-hover: var(--color-secondary-plain); } .rpl-vote-button-group.button-plain button[rpl]:first-child { --button-color-text-hover: var(--color-upvote-plain-weaker); } .rpl-vote-button-group.button-plain button[rpl]:last-child { --button-color-text-hover: var(--color-downvote-plain-weaker); } .rpl-vote-button-group.button-plain.upvote { --vote-button-label-color: var(--color-upvote-plain); } .rpl-vote-button-group.button-plain.upvote button[rpl]:first-child { --button-color-text-default: var(--color-upvote-plain-weaker); --button-color-text-hover: var(--color-upvote-plain-weaker); --button-color-text-disabled: var(--color-upvote-plain-disabled); --button-color-text-activated: var(--color-upvote-plain-weaker); } .rpl-vote-button-group.button-plain.downvote { --vote-button-label-color: var(--color-downvote-plain); } .rpl-vote-button-group.button-plain.downvote button[rpl]:last-child { --button-color-text-default: var(--color-downvote-plain-weaker); --button-color-text-disabled: var(--color-downvote-plain-disabled); --button-color-text-activated: var(--color-downvote-plain-weaker); } .rpl-vote-button-group.button-secondary { --vote-button-label-color: var(--color-secondary-plain); --vote-button-label-color-hover: var(--color-secondary-plain); --vote-button-divider-color: var(--color-neutral-border); } .rpl-vote-button-group.button-secondary button[rpl]:first-child { --button-color-text-hover: var(--color-upvote-plain-weaker); } .rpl-vote-button-group.button-secondary button[rpl]:last-child { --button-color-text-hover: var(--color-downvote-plain-weaker); } .rpl-vote-button-group.button-secondary.upvote, .rpl-vote-button-group.button-secondary.upvote button[rpl] { --button-color-text-default: var(--color-upvote-onBackground); --button-color-text-hover: var(--color-upvote-onBackground); --button-color-text-disabled: var(--color-upvote-disabled); --button-color-text-activated: var(--color-upvote-onBackground); } .rpl-vote-button-group.button-secondary.upvote:not([disabled]), .rpl-vote-button-group.button-secondary.upvote button[rpl]:not([disabled]) { --button-color-background-default: var(--color-upvote-background); --button-color-background-hover: var(--color-upvote-background-hover); --button-color-background-active: var(--color-upvote-background-hover); --vote-button-divider-color: var(--color-upvote-onBackground); --vote-button-label-color: var(--color-media-onBackground); } .rpl-vote-button-group.button-secondary.downvote, .rpl-vote-button-group.button-secondary.downvote button[rpl] { --button-color-text-default: var(--color-downvote-onBackground); --button-color-text-hover: var(--color-downvote-onBackground); --button-color-text-disabled: var(--color-downvote-disabled); --button-color-text-activated: var(--color-downvote-onBackground); } .rpl-vote-button-group.button-secondary.downvote:not([disabled]), .rpl-vote-button-group.button-secondary.downvote button[rpl]:not([disabled]) { --button-color-background-default: var(--color-downvote-background); --button-color-background-hover: var(--color-downvote-background-hover); --button-color-background-active: var(--color-downvote-background-hover); --vote-button-divider-color: var(--color-upvote-onBackground); --vote-button-label-color: var(--color-media-onBackground); } .rpl-vote-button-group.button-bordered-cab { --vote-button-label-color: var(--color-secondary-plain); --vote-button-label-color-hover: var(--color-secondary-plain); } .rpl-vote-button-group.button-bordered-cab button[rpl]:first-child { --button-color-text-hover: var(--color-upvote-plain-weaker); } .rpl-vote-button-group.button-bordered-cab button[rpl]:last-child { --button-color-text-hover: var(--color-downvote-plain-weaker); } .rpl-vote-button-group.button-bordered-cab.upvote { --vote-button-label-color: var(--color-upvote-plain); } .rpl-vote-button-group.button-bordered-cab.upvote button[rpl]:first-child { --button-color-text-default: var(--color-upvote-plain-weaker); --button-color-text-hover: var(--color-upvote-plain-weaker); --button-color-text-disabled: var(--color-upvote-plain-disabled); --button-color-text-activated: var(--color-upvote-plain-weaker); } .rpl-vote-button-group.button-bordered-cab.downvote { --vote-button-label-color: var(--color-downvote-plain); } .rpl-vote-button-group.button-bordered-cab.downvote button[rpl]:last-child { --button-color-text-default: var(--color-downvote-plain-weaker); --button-color-text-hover: var(--color-downvote-plain-weaker); --button-color-text-disabled: var(--color-downvote-plain-disabled); --button-color-text-activated: var(--color-downvote-plain-weaker); } .rpl-vote-button-group.button-media-cab { --vote-button-label-color: var(--color-media-onBackground); --vote-button-label-color-hover: var(--color-media-onBackground); --vote-button-divider-color: var(--color-media-border-weak); } .rpl-vote-button-group.button-media-cab button[rpl]:first-child { --button-color-text-hover: var(--color-upvote-onStrongScrim-weaker); } .rpl-vote-button-group.button-media-cab button[rpl]:last-child { --button-color-text-hover: var(--color-downvote-onStrongScrim-weaker); } .rpl-vote-button-group.button-media-cab.upvote { --vote-button-label-color: var(--color-upvote-onStrongScrim); } .rpl-vote-button-group.button-media-cab.upvote button[rpl]:first-child { --button-color-text-default: var(--color-upvote-onStrongScrim-weaker); --button-color-text-activated: var(--color-upvote-onStrongScrim-weaker); --button-color-text-disabled: var(--color-upvote-onStrongScrim-disabled); } .rpl-vote-button-group.button-media-cab.downvote { --vote-button-label-color: var(--color-downvote-onStrongScrim); } .rpl-vote-button-group.button-media-cab.downvote button[rpl]:last-child { --button-color-text-default: var(--color-downvote-onStrongScrim-weaker); --button-color-text-activated: var(--color-downvote-onStrongScrim-weaker); --button-color-text-disabled: var(--color-downvote-onStrongScrim-disabled); } /** * The code style module * * This LESS module provides the default Faceplate styles for `<code>` elements. * * ```less * @import \'@reddit/faceplate-ui/styles/elements/code.less\'; * * // To apply styles to <code> elements within a scope (e.g. a shadow DOM) * code { * .code(); * } * * // To apply styles to a custom element directly * :host { * display: block; * .code(); * } * ``` * * --- * * Faceplate includes these styles on the following elements: * * - `<code>` * - `<pre>` * - `<kbd>` * - `<samp>` * * ```demo:html * <p>This is some <code>inline code</code>.</p> * * <pre><code>This is some * preformatted * code * </code></pre> * * <p>This is a <samp>sample</samp> element.</p> * * <p>This is a <kbd>keyboard</kbd> element.</p> * ``` * * @packageDocumentation */ /** * The details style module * * This LESS module provides the default Faceplate styles for `<details>` elements, and `<summary>` * elements nested in them. * * ```less * @import \'@reddit/faceplate-ui/styles/elements/details.less\'; * * // To apply styles to <details> elements within a scope (e.g. a shadow DOM) * details { * .details(); * } * ``` * * --- * * Faceplate includes these styles on the `details` element by default. * * ```demo:html * <details> * <summary>Click for more info</summary> * <p>More info</p> * </details> * ``` * * @packageDocumentation */ faceplate-dropdown-menu:not(.connected) [slot=\'menu\'] { display: none; } faceplate-dropdown-menu faceplate-menu li[rpl]:first-child [role=\'menuitem\'] { border-top-left-radius: var(--rem8); border-top-right-radius: var(--rem8); } faceplate-dropdown-menu faceplate-menu li[rpl]:last-child [role=\'menuitem\'] { border-bottom-left-radius: var(--rem8); border-bottom-right-radius: var(--rem8); } faceplate-expandable-section-helper { display: contents; /* [rpl] just to boost the selector */ /* Target the [open] attribute on either the root element OR the details element to rotate the chevron. This is to handle rotating chevrons both before and after the faceplate-expandable-section-helper component is defined. Before the component is defined, the [open] attribute on the component will not toggle if the user clicks on details, but the [open] attribute will toggle on the details element, so we need to target details too. The reason we can\'t target only the details element is because once the web component is defined, we delay toggling the [open] attribute on the details element until AFTER the animation finishes. So if we only targeted the details element for the chevron rotation the chevron wouldn\'t rotate until after the collapse animation finished and we finally toggle the [open] attriubte on the details element. */ /* Specific handling for nested menus. We only need to handle collapse menus inside of expanded menus, not expanded menus inside collapsed menus because you can\'t see those! */ } faceplate-expandable-section-helper > details > summary { list-style-type: none; /* For Safari */ } faceplate-expandable-section-helper > details > summary::marker, faceplate-expandable-section-helper > details > summary::-webkit-details-marker { display: none; } faceplate-expandable-section-helper[rpl] > details > summary { /* override details.less */ margin: 0; } faceplate-expandable-section-helper > details > summary [icon-name=\'caret-down-outline\'] { transition: transform 0.22s ease-in-out; } faceplate-expandable-section-helper[open] > details > summary svg[rpl][icon-name=\'caret-down-outline\'], faceplate-expandable-section-helper:not(:defined) > details[open] > summary svg[rpl][icon-name=\'caret-down-outline\'] { transform: rotate(180deg); } faceplate-expandable-section-helper:not([open]) > details > summary svg[rpl][icon-name=\'caret-down-outline\'], faceplate-expandable-section-helper:not(:defined) > details[open] > summary svg[rpl][icon-name=\'caret-down-outline\'] { transform: rotate(0deg); } /** * The header style module * * This LESS module provides the default Faceplate styles for `<header>` elements. This includes * the behavior of forcing the element\'s background to take the full width of the page. * * ```less * @import \'@reddit/faceplate-ui/styles/elements/header.less\'; * * // To apply styles to <header> elements within a scope (e.g. a shadow DOM) * header { * .header(); * } * * // To apply styles to a custom element directly * :host { * display: block; * .header(); * } * ``` * * --- * * Faceplate applies these styles to the `<header>` element by default. * * ```html * <header> * Header content. * </header> * ``` * * @packageDocumentation */ /** * The input style module * * This LESS module provides the default Faceplate styles for `<input>`, `<textarea>`, and * `<select>` elements. * * ```less * @import \'@reddit/faceplate-ui/styles/elements/input.less\'; * * // To apply styles to <input> elements within a scope (e.g. a shadow DOM) * input, * textarea, * select { * .input(); * } * * // To apply styles to a custom element directly * :host { * display: block; * .input(); * } * ``` * * --- * * Faceplate applies these styles to the following elements by default: * * - `<input>` * - `<select>` * - `<textarea>` * * ```demo:html * <p> * <input value="input"> * </p> * <p> * <select> * <option>select</option> * </select> * </p> * <p> * <textarea>textarea</textarea> * </p> * ``` * * @packageDocumentation */ /** * The kbd style module * * This LESS module provides the default Faceplate styles for `<kbd>` elements. * * ```less * @import \'@reddit/faceplate/styles/elements/kbd.less\'; * * // To apply styles to <kbd> elements within a scope (e.g. a shadow DOM) * kbd { * .kbd(); * } * * // To apply styles to a custom element directly * :host { * display: block; * .kbd(); * } * ``` * * --- * * Faceplate applies these styles to `<kdb>` elements _in addition to_ the styles provided by the * `code.less` module. * * ```demo:html * <p>This is a <kbd>k</kbd>eyboard element.</p> * ``` * * @packageDocumentation */ /** * The label style module * * This LESS module provides the default Faceplate styles for `<label>` elements. * * ```less * @import \'@reddit/faceplate-ui/styles/elements/label.less\'; * * // To apply styles to <label> elements within a scope (e.g. a shadow DOM) * label { * .label(); * } * * // To apply styles to a custom element directly * :host { * display: block; * .label(); * } * ``` * * --- * * Faceplate applies these styles to the `<label>` element by default, unless the label is an * _adjacent_ sibling to an input of type "radio" or "checkbox" * * ```demo:html * <p> * <label> * Name<br> * <input> * </label> * </p> * <p> * <label for="desc">Description</label><br> * <textarea id="desc"></textarea> * </p> * <p> * <input type="checkbox" id="enabled"> * <label for="enabled">Enabled?</label> * </p> * ``` * * @packageDocumentation */ /** * The menu style module * * This LESS module provides the default Faceplate styles for `<menu>` elements, and `<li>` elements * nested in them. * * ```less * @import \'@reddit/faceplate-ui/styles/elements/menu.less\'; * * // To apply styles to <menu> elements within a scope (e.g. a shadow DOM) * menu { * .menu(); * } * * // To apply styles to a custom element directly * :host { * display: block; * .menu(); * } * ``` * * --- * * Faceplate applies these styles to `<menu>` elements and their descendant `<li>` elements by default. * * ```html * <menu> * <li>Option A</li> * <li>Option B</li> * <li>Option C</li> * </menu> * ``` * * @packageDocumentation */ /** * The pre style module * * This LESS module provides the default Faceplate styles for `<pre>` elements. * * ```less * @import \'@reddit/faceplate-ui/styles/elements/pre.less\'; * * // To apply styles to <pre> elements within a scope (e.g. a shadow DOM) * pre { * .pre(); * } * * // To apply styles to a custom element directly * :host { * display: block; * .pre(); * } * ``` * * --- * * Faceplate applies these styles to the `<pre>` element, in addition to the styles provided by * the `code.less` style module. * * ```demo:html * <pre><code>This is some * preformatted * code * </code></pre> * ``` * * @packageDocumentation */ /** * The table style module * * This LESS module provides the default Faceplate styles for `<table>` elements and their children. * * ```less * @import \'@reddit/faceplate-ui/styles/elements/table.less\'; * * // To apply styles to <table> elements within a scope (e.g. a shadow DOM) * table { * .table(); * } * * // To apply styles to a custom element directly * :host { * display: block; * .table(); * } * ``` * * --- * * Faceplate applies these styles to the `<table>` element and its descendant `<td>`, `<th>`, `<tr>`, * and `<caption>` elements by default. * * ```demo:html * <table> * <thead> * <tr> * <th>Name</th> * <th>Occupation</th> * </tr> * </thead> * <tbody> * <tr> * <td>Matt Lee</td> * <td>Dorito Muncher</td> * </tr> * </tbody> * </table> * ``` * * @packageDocumentation */ /** * The hr style module * * This LESS module provides the default Faceplate styles for `<hr>` element. * * ```less * @import \'@reddit/faceplate-ui/styles/elements/hr.less\'; * * // To apply styles to <hr> elements within a scope (e.g. a shadow DOM) * hr { * .hr(); * } * ``` * * --- * * Faceplate includes these styles on the `details` element by default. * * ```demo:html * <hr /> * ``` * * @packageDocumentation */ address, area, article, aside, audio, blockquote, datalist, details, dl, fieldset, figure, form, input, iframe, img, meter, nav, ol, optgroup, option, output, p, pre, progress, ruby, section, textarea, ul, menu, video { /* Margins for most elements */ margin-bottom: 1rem; } html, input, select, button { /* Set body font family and some finicky elements */ font-family: var(--font-sans); } body { --faceplate-body-padding: 1.5rem; margin: 0 auto; padding: var(--faceplate-body-padding); overflow-x: hidden; word-break: break-word; overflow-wrap: break-word; line-height: 1.5; } @media (max-width: 599px) { body { --faceplate-body-padding: 1rem; } } h1, h2, h3, h4, h5, h6 { margin: 1em 0 0.5em; } h1 { font: var(--font-title-h1); } h2 { font: var(--font-title-h2); } h3 { font: var(--font-title-h3); } h4 { font: var(--font-title-h4); } h5 { font: var(--font-title-h5); } h6 { font: var(--font-title-h6); } label { text-transform: var(--misc-label-text-transform); letter-spacing: var(--misc-label-letter-spacing); font: var(--font-label-default); color: var(--color-label-default); } label > input, label > textarea { margin-top: var(--spacer-label-default); } faceplate-switch-input + label, input[type=\'checkbox\'] + label, input[type=\'radio\'] + label { font-size: inherit; text-transform: inherit; letter-spacing: inherit; font-weight: inherit; vertical-align: middle; } a { color: var(--color-a-default); text-decoration: none; } a:hover { text-decoration: underline; } abbr:hover { /* Set the \'?\' cursor while hovering an abbreviation */ cursor: help; } blockquote { padding: 1.5rem; background: var(--color-tone-6); border-left: 5px solid var(--color-tone-5); } abbr { cursor: help; } blockquote *:last-child { padding-bottom: 0; margin-bottom: 0; } header { padding-left: calc(50vw - 50%); padding-right: calc(50vw - 50%); margin-left: calc(0px - (50vw - 50%)); margin-right: calc(0px - (50vw - 50%)); padding-top: var(--faceplate-body-padding); padding-bottom: var(--faceplate-body-padding); margin-top: calc(-1 * var(--faceplate-body-padding)); margin-bottom: var(--faceplate-body-padding); background: var(--color-tone-6); } dialog header, faceplate-dialog header, article header, section header, main header, aside header { padding: 0.5rem 0; margin: 1rem 0; background: transparent; } dialog header h1, faceplate-dialog header h1, article header h1, section header h1, main header h1, aside header h1 { font: var(--font-title-h1); } header h1 { font: var(--font-title-h0); } header > *:first-child { margin-top: 0; } header > *:last-child { margin-bottom: 0; } :where(button), :where(input):where([type=\'submit\'], [type=\'reset\'], [type=\'button\']) { background: var(--button-color-background); border-radius: 999px; border: none; border: var(--button-border-width, 0) solid var(--button-border-color, transparent); box-shadow: var(--button-shadow); box-sizing: border-box; color: var(--button-color-text); cursor: pointer; display: inline-block; font: var(--button-font); height: var(--button-height); line-height: calc(var(--button-height) - (2 * var(--button-border-width, 0px))); overflow: hidden; padding: 0 calc(var(--button-padding) - var(--button-border-width, 0px)); text-align: center; text-decoration: none; text-overflow: ellipsis; white-space: nowrap; outline-offset: 0; --button-border-color: var(--button-border-color-default); --button-border-width: var(--button-border-width-default); --button-color-background: var(--button-color-background-default); --button-color-text: var(--button-color-text-default); /* Media query prevents sticky :hover states on mobile */ /* This is :active, AKA Pressed */ /* This is Selected */ --button-height: var(--size-button-sm-h); --button-padding: var(--spacer-2xs); --button-font: var(--font-button-sm); --button-border-width-default: var(--line-button-sm-border); --button-color-background-default: var(--color-button-secondary-background); --button-color-background-focus: var(--color-button-secondary-background-focus); --button-color-background-hover: var(--color-button-secondary-background-hover); --button-color-background-active: linear-gradient(var(--color-button-secondary-background-hover), var(--color-button-secondary-background-hover)); --button-color-background-disabled: var(--color-button-secondary-background-disabled); --button-color-background-activated: var(--color-button-secondary-background-activated); --button-color-text-default: var(--color-button-secondary-text); --button-color-text-disabled: var(--color-button-secondary-text-disabled); --button-color-text-activated: var(--color-button-secondary-text-activated); --button-border-color-default: var(--color-button-secondary-border); } :where(button).icon, :where(input):where([type=\'submit\'], [type=\'reset\'], [type=\'button\']).icon { width: var(--button-height); } :where(button) .button-icon, :where(input):where([type=\'submit\'], [type=\'reset\'], [type=\'button\']) .button-icon { margin-right: var(--spacer-xs); } :where(button) .dropdown-icon, :where(input):where([type=\'submit\'], [type=\'reset\'], [type=\'button\']) .dropdown-icon { transform: rotate(0deg); transition: transform 0.2s ease-in-out; } :where(button):focus, :where(input):where([type=\'submit\'], [type=\'reset\'], [type=\'button\']):focus { --button-color-overlay: var(--color-button-overlay-focus); } :where(button).hover, :where(input):where([type=\'submit\'], [type=\'reset\'], [type=\'button\']).hover { --button-color-overlay: var(--color-button-overlay-focus); --button-border-color: var(--button-border-color-hover); --button-color-background: var(--button-color-background-hover); --button-color-text: var(--button-color-text-hover, var(--button-color-text-default)); } @media (hover: hover) { :where(button):hover, :where(input):where([type=\'submit\'], [type=\'reset\'], [type=\'button\']):hover { --button-color-overlay: var(--color-button-overlay-focus); --button-border-color: var(--button-border-color-hover); --button-color-background: var(--button-color-background-hover); --button-color-text: var(--button-color-text-hover, var(--button-color-text-default)); } } :where(button):active, :where(input):where([type=\'submit\'], [type=\'reset\'], [type=\'button\']):active, :where(button).active, :where(input):where([type=\'submit\'], [type=\'reset\'], [type=\'button\']).active { --button-color-overlay: var(--color-button-overlay-active); --button-color-background: linear-gradient(var(--color-interactive-pressed), var(--color-interactive-pressed)), var(--button-color-background-active); } :where(button):disabled, :where(input):where([type=\'submit\'], [type=\'reset\'], [type=\'button\']):disabled, :where(button).anchor-disabled, :where(input):where([type=\'submit\'], [type=\'reset\'], [type=\'button\']).anchor-disabled { --button-border-color-hover: var(--button-border-color-default); --button-color-background: var(--button-color-background-disabled); --button-color-text: var(--button-color-text-disabled); cursor: not-allowed; pointer-events: none; } :where(button).disabled.pointer-all, :where(input):where([type=\'submit\'], [type=\'reset\'], [type=\'button\']).disabled.pointer-all { --button-border-color-hover: var(--button-border-color-default); --button-color-background: var(--button-color-background-disabled); --button-color-text: var(--button-color-text-disabled); cursor: not-allowed; pointer-events: all; } :where(button).button-activated, :where(input):where([type=\'submit\'], [type=\'reset\'], [type=\'button\']).button-activated { --button-border-color: var(--button-border-color-activated); --button-color-background: var(--button-color-background-activated); --button-color-text: var(--button-color-text-activated); } small :where(button), small :where(input):where([type=\'submit\'], [type=\'reset\'], [type=\'button\']) { --button-height: var(--size-button-xs-h); --button-padding: var(--spacer-sm); --button-font: var(--font-button-xs); --button-border-width-default: var(--line-button-xs-border); } :where(button).button-large, :where(input):where([type=\'submit\'], [type=\'reset\'], [type=\'button\']).button-large { --button-height: var(--size-button-lg-h); --button-padding: var(--spacer-xs); --button-font: var(--font-button-lg); --button-border-width-default: var(--line-button-lg-border); } :where(button).button-primary, :where(input):where([type=\'submit\'], [type=\'reset\'], [type=\'button\']).button-primary { --button-color-background-default: var(--color-primary-background); --button-color-background-focus: var(--color-primary-background); --button-color-background-hover: var(--color-button-primary-background-hover); --button-color-background-active: linear-gradient(var(--color-button-primary-background-hover), var(--color-button-primary-background-hover)); --button-color-background-disabled: var(--color-button-primary-background-disabled); --button-color-background-activated: var(--color-button-primary-background-activated); --button-color-text-default: var(--color-global-white); --button-color-text-disabled: var(--color-button-primary-text-disabled); --button-color-text-activated: var(--color-button-primary-text-activated); --button-border-color-default: transparent; } :where(button).button-plain, :where(input):where([type=\'submit\'], [type=\'reset\'], [type=\'button\']).button-plain { --button-color-background-default: transparent; --button-color-background-focus: transparent; --button-color-background-hover: var(--color-button-plain-background-hover); --button-color-background-disabled: var(--color-button-plain-background-disabled); --button-color-background-activated: var(--color-button-plain-background-activated); --button-color-background-active: linear-gradient(var(--color-button-secondary-background-hover), var(--color-button-secondary-background-hover)); --button-color-text-default: var(--color-button-plain-text); --button-color-text-disabled: var(--color-button-plain-text-disabled); --button-color-text-activated: var(--color-button-plain-text-activated); --button-color-text-hover: var(--color-button-plain-text-hover); --button-border-color-default: transparent; } :where(button).button-icon-only, :where(input):where([type=\'submit\'], [type=\'reset\'], [type=\'button\']).button-icon-only { --button-padding: 0; width: var(--button-height); } :root { --button-color-background-default: var(--color-button-secondary-background); --button-color-background-focus: var(--color-button-secondary-background-focus); --button-color-background-hover: var(--color-button-secondary-background-hover); --button-color-background-active: linear-gradient(var(--color-button-secondary-background-hover), var(--color-button-secondary-background-hover)); --button-color-background-disabled: var(--color-button-secondary-background-disabled); --button-color-background-activated: var(--color-button-secondary-background-activated); --button-color-text-default: var(--color-button-secondary-text); --button-color-text-disabled: var(--color-button-secondary-text-disabled); --button-color-text-activated: var(--color-button-secondary-text-activated); --button-border-color-default: var(--color-button-secondary-border); } :where(button, input):where([type=\'submit\']) { --button-color-background-default: var(--color-primary-background); --button-color-background-focus: var(--color-primary-background); --button-color-background-hover: var(--color-button-primary-background-hover); --button-color-background-active: linear-gradient(var(--color-button-primary-background-hover), var(--color-button-primary-background-hover)); --button-color-background-disabled: var(--color-button-primary-background-disabled); --button-color-background-activated: var(--color-button-primary-background-activated); --button-color-text-default: var(--color-global-white); --button-color-text-disabled: var(--color-button-primary-text-disabled); --button-color-text-activated: var(--color-button-primary-text-activated); --button-border-color-default: transparent; } faceplate-tablist button { border-radius: 0; } faceplate-tablist button:first-child { border-radius: 999px 0 0 999px; } faceplate-tablist button:last-child { border-radius: 0 999px 999px 0; } faceplate-tablist a { border-bottom: 2px solid var(--button-color-primary); color: inherit; display: inline-block; font: var(--font-button-b3); padding: 0.5rem 1rem 0.375rem; } faceplate-tablist a:hover { text-decoration: none; } code, pre, kbd, samp { font-size: var(--font-code); font-family: var(--font-mono); background: var(--color-tone-6); border: 1px solid var(--color-tone-5); border-radius: 4px; padding: 2px 4px; font-size: 0.9em; } pre { background: var(--color-tone-5); border-color: var(--color-tone-4); padding: 1rem 1.4rem; max-width: 100%; overflow: auto; } kbd { border-bottom-width: 3px; } pre code { /* When <code> is in a <pre>, reset it\'s formatting to blend in */ background: inherit; font-size: inherit; color: inherit; border: 0; padding: 0; margin: 0; } code pre { /* When <pre> is in a <code>, reset it\'s formatting to blend in */ display: inline; background: inherit; font-size: inherit; color: inherit; border: 0; padding: 0; margin: 0; } details { /* Make the <details> look more "clickable" */ padding: 0.5rem 1rem; background: var(--color-tone-6); border: var(--misc-accordion-border); border-radius: var(--radius-accordion-size); } details summary { /* Makes the <summary> look more like a "clickable" link with the pointer cursor */ cursor: pointer; font-weight: bold; list-style-type: var(--misc-accordion-closed-list-style-type); } details[open] summary { /* Adjust the <details> padding while open */ margin-bottom: 0.375rem; list-style-type: var(--misc-accordion-open-list-style-type); } details[open] summary icon-caret-down, details[open] summary svg[rpl][icon-name=\'caret-down-outline\'] { transform: rotate(180deg); transition: transform 0.22s ease-in-out; } details summary icon-caret-down, details summary svg[rpl][icon-name=\'caret-down-outline\'] { transform: rotate(0); transition: transform 0.22s ease-in-out; } details[open] > *:last-child { /* Resets the bottom margin of the last element in the <details> while <details> is opened. This prevents double margins/paddings. */ margin-bottom: 0; } dt { font-weight: bold; margin-bottom: 0.5rem; } dd { margin-inline-start: 2rem; } hr { border: 0; border-bottom: 1px solid var(--color-divider-default); background-color: transparent; margin: var(--misc-divider-margin); } hr[padding=\'2xs\'] { padding: var(--spacer-2xs); } hr[padding=\'xs\'] { padding: var(--spacer-xs); } hr[padding=\'sm\'] { padding: var(--spacer-sm); } hr[padding=\'md\'] { padding: var(--spacer-md); } hr[color=\'subdued\'] { border-bottom-color: var(--color-neutral-border-weak); } hr[color=\'inverted\'] { border-bottom-color: var(--color-neutral-border-strong); } fieldset { margin-top: 1rem; padding: 1rem 2rem; border: 1px solid var(--color-tone-5); border-radius: 0.25rem; background: var(--color-tone-7); min-width: 0; } legend { padding: 0; font-weight: bold; } table { /* border-collapse sets the table\'s elements to share borders, rather than floating as separate "boxes". */ border-collapse: collapse; width: 100%; word-break: normal; margin-bottom: 1rem; } td, th { text-align: left; padding: 0.5rem; } th { background: var(--color-tone-6); } tr:nth-child(even) { /* Set every other cell slightly darker. Improves readability. */ background: var(--color-tone-6); } table caption { font-weight: bold; margin-bottom: 0.5rem; } textarea { /* Don\'t let the <textarea> extend off the screen naturally or when dragged by the user */ max-width: 100%; } ol, ul { /* Replace the browser default padding */ padding-left: 2rem; } li { margin-top: 0.25rem; } menu { list-style-type: none; padding-left: 0; border-radius: 4px; width: -moz-fit-content; width: fit-content; border: 1px solid var(--color-tone-5); } menu li { padding: 0.5rem 0.75rem; border-block-end: 1px solid var(--color-tone-5); } menu li:last-child { border-block-end: none; } menu menu, ul ul, ol ul, ul ol, ol ol { margin-bottom: 0; } ins { text-decoration-color: var(--color-success-content); text-decoration-line: overline underline; text-underline-position: under; } del { text-decoration-color: var(--color-danger-content); text-decoration-line: overline underline line-through; text-underline-position: under; } textarea, select, input { font-family: var(--font-sans); color: var(--color-input-text); padding: 0.5rem 0.75rem; margin-bottom: 0.5rem; background: var(--color-input-default); border: var(--color-input-default) solid var(--line-input-border); border-radius: var(--radius-sm); box-shadow: none; box-sizing: border-box; /* iOS form zoom fix */ font-size: 1rem; } textarea:disabled, select:disabled, input:disabled { cursor: not-allowed; opacity: 0.5; } textarea:invalid, select:invalid, input:invalid { border-color: var(--color-danger-content); } img { max-width: 100%; } input[type=\'radio\'], input[type=\'checkbox\'] { vertical-align: middle; margin-bottom: 0; margin-top: 0; } input[type=\'color\'], input[type=\'range\'] { padding: initial; } input[type=\'search\'] { border-radius: 400px; /* fix appearance in safari */ -webkit-appearance: textfield; } input { max-width: 100%; } dialog { border: 0; border-radius: 4px; padding: 1rem; box-shadow: var(--boxshadow-modal); background: var(--color-ui-modalbackground); } dialog::backdrop { background: var(--color-scrim); } .fp-avatar-container img { margin-bottom: 0; } /** Custom grid behavior for zstacks */ .dx-zstack > * { grid-column-start: 1; grid-row-start: 1; } /** Text outline classes */ .text-outline-thin-bright { text-shadow: #000 1px 0 0.5px, #000 -1px 0 0.5px, #000 0 1px 0.5px, #000 0 -1px 0.5px; } .text-outline-thick-bright { text-shadow: #000 1px 0 2px, #000 -1px 0 2px, #000 0 1px 1px, #000 0 -1px 1px, #000 1px 0 2px, #000 -1px 0 2px, #000 0 1px 1px, #000 0 -1px 1px; } .text-outline-thin-dark { text-shadow: #fff 1px 0 0.5px, #fff -1px 0 0.5px, #fff 0 1px 0.5px, #fff 0 -1px 0.5px; } .text-outline-thick-dark { text-shadow: #fff 1px 0 2px, #fff -1px 0 2px, #fff 0 1px 1px, #fff 0 -1px 1px, #fff 1px 0 2px, #fff -1px 0 2px, #fff 0 1px 1px, #fff 0 -1px 1px; } /** Custom border sizes */ .border-dx-thick { border-width: 2px; } .border-dx-thin { border-width: 1px; } /** Custom border radius sizes */ .rounded-dx-lg { border-radius: 1.5rem; } .rounded-dx-md { border-radius: 1rem; } .rounded-dx-sm { border-radius: 0.5rem; } /** Variables for app-defined colors */ :root { --dx-text-color-light: inherit; --dx-text-color-dark: inherit; --dx-bg-color-light: initial; --dx-bg-color-dark: initial; --dx-border-color-light: initial; --dx-border-color-dark: initial; } /** App-defined background color */ .dx-bg-color, .light .dx-bg-color { background-color: var(--dx-bg-color-light); } /** App-defined border color */ .dx-border-color, .light .dx-border-color { border-color: var(--dx-border-color-light); } /** App-defined text color */ .dx-text-color, .light .dx-text-color { color: var(--dx-text-color-light); } /** Theme override dark mode */ .dark .dx-bg-color { background-color: var(--dx-bg-color-dark); } .dark .dx-border-color { border-color: var(--dx-border-color-dark); } .dark .dx-text-color { color: var(--dx-text-color-dark); } /** System specified dark mode */ @media (prefers-color-scheme: dark) { .dx-bg-color { background-color: var(--dx-bg-color-dark); } .dx-text-color { color: var(--dx-text-color-dark); } .dx-border-color { border-color: var(--dx-border-color-dark); } } .container { width: 100%; } @media (min-width: 1024px) { .container { max-width: 1024px; } } /* Anchor component */ .a { color: var(--color-a-default); font-size: 1em; text-decoration: none; } .a:hover { color: var(--color-a-hover); } .a:visited:not(.no-visited), .a.visited:not(.no-visited) { color: var(--color-a-visited); } /* Button component */ .\\!button { background: var(--button-color-background) !important; border-radius: 999px !important; border: none !important; border: var(--button-border-width, 0) solid var(--button-border-color, transparent) !important; box-shadow: var(--button-shadow) !important; box-sizing: border-box !important; color: var(--button-color-text) !important; cursor: pointer !important; display: inline-block !important; font: var(--button-font) !important; height: var(--button-height) !important; line-height: calc(var(--button-height) - (2 * var(--button-border-width, 0px))) !important; overflow: hidden !important; padding: 0 calc(var(--button-padding) - var(--button-border-width, 0px)) !important; text-align: center !important; text-decoration: none !important; text-overflow: ellipsis !important; white-space: nowrap !important; outline-offset: 0 !important; --button-border-color: var(--button-border-color-default) !important; --button-border-width: var(--button-border-width-default) !important; --button-color-background: var(--button-color-background-default) !important; --button-color-text: var(--button-color-text-default) !important; /* Media query prevents sticky :hover states on mobile */ /* This is :active, AKA Pressed */ /* This is Selected */ } .button { background: var(--button-color-background); border-radius: 999px; border: none; border: var(--button-border-width, 0) solid var(--button-border-color, transparent); box-shadow: var(--button-shadow); box-sizing: border-box; color: var(--button-color-text); cursor: pointer; display: inline-block; font: var(--button-font); height: var(--button-height); line-height: calc(var(--button-height) - (2 * var(--button-border-width, 0px))); overflow: hidden; padding: 0 calc(var(--button-padding) - var(--button-border-width, 0px)); text-align: center; text-decoration: none; text-overflow: ellipsis; white-space: nowrap; outline-offset: 0; --button-border-color: var(--button-border-color-default); --button-border-width: var(--button-border-width-default); --button-color-background: var(--button-color-background-default); --button-color-text: var(--button-color-text-default); /* Media query prevents sticky :hover states on mobile */ /* This is :active, AKA Pressed */ /* This is Selected */ } .\\!button.icon { width: var(--button-height) !important; } .button.icon { width: var(--button-height); } .\\!button .button-icon { margin-right: var(--spacer-xs) !important; } .button .button-icon { margin-right: var(--spacer-xs); } .\\!button .dropdown-icon { transform: rotate(0deg) !important; transition: transform 0.2s ease-in-out !important; } .button .dropdown-icon { transform: rotate(0deg); transition: transform 0.2s ease-in-out; } .\\!button:focus { --button-color-overlay: var(--color-button-overlay-focus) !important; } .button:focus { --button-color-overlay: var(--color-button-overlay-focus); } .\\!button.hover { --button-color-overlay: var(--color-button-overlay-focus) !important; --button-border-color: var(--button-border-color-hover) !important; --button-color-background: var(--button-color-background-hover) !important; --button-color-text: var(--button-color-text-hover, var(--button-color-text-default)) !important; } .button.hover { --button-color-overlay: var(--color-button-overlay-focus); --button-border-color: var(--button-border-color-hover); --button-color-background: var(--button-color-background-hover); --button-color-text: var(--button-color-text-hover, var(--button-color-text-default)); } @media (hover: hover) { .\\!button:hover { --button-color-overlay: var(--color-button-overlay-focus) !important; --button-border-color: var(--button-border-color-hover) !important; --button-color-background: var(--button-color-background-hover) !important; --button-color-text: var(--button-color-text-hover, var(--button-color-text-default)) !important; } .button:hover { --button-color-overlay: var(--color-button-overlay-focus); --button-border-color: var(--button-border-color-hover); --button-color-background: var(--button-color-background-hover); --button-color-text: var(--button-color-text-hover, var(--button-color-text-default)); } } .\\!button:active, .\\!button.active { --button-color-overlay: var(--color-button-overlay-active) !important; --button-color-background: linear-gradient(var(--color-interactive-pressed), var(--color-interactive-pressed)), var(--button-color-background-active) !important; } .button:active, .button.active { --button-color-overlay: var(--color-button-overlay-active); --button-color-background: linear-gradient(var(--color-interactive-pressed), var(--color-interactive-pressed)), var(--button-color-background-active); } .\\!button:active, .\\!button.active { --button-color-overlay: var(--color-button-overlay-active) !important; --button-color-background: linear-gradient(var(--color-interactive-pressed), var(--color-interactive-pressed)), var(--button-color-background-active) !important; } .button.\\!active { --button-color-overlay: var(--color-button-overlay-active) !important; --button-color-background: linear-gradient(var(--color-interactive-pressed), var(--color-interactive-pressed)), var(--button-color-background-active) !important; } .\\!button:disabled, .\\!button.anchor-disabled { --button-border-color-hover: var(--button-border-color-default) !important; --button-color-background: var(--button-color-background-disabled) !important; --button-color-text: var(--button-color-text-disabled) !important; cursor: not-allowed !important; pointer-events: none !important; } .button:disabled, .button.anchor-disabled { --button-border-color-hover: var(--button-border-color-default); --button-color-background: var(--button-color-background-disabled); --button-color-text: var(--button-color-text-disabled); cursor: not-allowed; pointer-events: none; } .\\!button:disabled, .\\!button.anchor-disabled { --button-border-color-hover: var(--button-border-color-default) !important; --button-color-background: var(--button-color-background-disabled) !important; --button-color-text: var(--button-color-text-disabled) !important; cursor: not-allowed !important; pointer-events: none !important; } .\\!button.disabled.pointer-all { --button-border-color-hover: var(--button-border-color-default) !important; --button-color-background: var(--button-color-background-disabled) !important; --button-color-text: var(--button-color-text-disabled) !important; cursor: not-allowed !important; pointer-events: all !important; } .button.disabled.pointer-all { --button-border-color-hover: var(--button-border-color-default); --button-color-background: var(--button-color-background-disabled); --button-color-text: var(--button-color-text-disabled); cursor: not-allowed; pointer-events: all; } .button.\\!disabled.pointer-all { --button-border-color-hover: var(--button-border-color-default) !important; --button-color-background: var(--button-color-background-disabled) !important; --button-color-text: var(--button-color-text-disabled) !important; cursor: not-allowed !important; pointer-events: all !important; } .\\!button.button-activated { --button-border-color: var(--button-border-color-activated) !important; --button-color-background: var(--button-color-background-activated) !important; --button-color-text: var(--button-color-text-activated) !important; } .button.button-activated { --button-border-color: var(--button-border-color-activated); --button-color-background: var(--button-color-background-activated); --button-color-text: var(--button-color-text-activated); } .button-shell { background: var(--button-color-background); border-radius: 999px; border: none; border: var(--button-border-width, 0) solid var(--button-border-color, transparent); box-shadow: var(--button-shadow); box-sizing: border-box; color: var(--button-color-text); cursor: pointer; display: inline-block; font: var(--button-font); height: var(--button-height); line-height: calc(var(--button-height) - (2 * var(--button-border-width, 0px))); overflow: hidden; padding: 0 calc(var(--button-padding) - var(--button-border-width, 0px)); text-align: center; text-decoration: none; text-overflow: ellipsis; white-space: nowrap; outline-offset: 0; --button-border-color: var(--button-border-color-default); --button-border-width: var(--button-border-width-default); --button-color-background: var(--button-color-background-default); --button-color-text: var(--button-color-text-default); } .button-shell.icon { width: var(--button-height); } .button-large { --button-height: var(--size-button-lg-h); --button-padding: var(--spacer-xs); --button-font: var(--font-button-lg); --button-border-width-default: var(--line-button-lg-border); } .button-medium { --button-height: var(--size-button-md-h); --button-padding: var(--spacer-xs); --button-font: var(--font-button-md); --button-border-width-default: var(--line-button-md-border); } .button-small { --button-height: var(--size-button-sm-h); --button-padding: var(--spacer-2xs); --button-font: var(--font-button-sm); --button-border-width-default: var(--line-button-sm-border); } .button-x-small { --button-height: var(--size-button-xs-h); --button-padding: var(--spacer-sm); --button-font: var(--font-button-xs); --button-border-width-default: var(--line-button-xs-border); } .button-primary { --button-color-background-default: var(--color-primary-background); --button-color-background-focus: var(--color-primary-background); --button-color-background-hover: var(--color-button-primary-background-hover); --button-color-background-active: linear-gradient(var(--color-button-primary-background-hover), var(--color-button-primary-background-hover)); --button-color-background-disabled: var(--color-button-primary-background-disabled); --button-color-background-activated: var(--color-button-primary-background-activated); --button-color-text-default: var(--color-global-white); --button-color-text-disabled: var(--color-button-primary-text-disabled); --button-color-text-activated: var(--color-button-primary-text-activated); --button-border-color-default: transparent; } .button-secondary { --button-color-background-default: var(--color-button-secondary-background); --button-color-background-focus: var(--color-button-secondary-background-focus); --button-color-background-hover: var(--color-button-secondary-background-hover); --button-color-background-active: linear-gradient(var(--color-button-secondary-background-hover), var(--color-button-secondary-background-hover)); --button-color-background-disabled: var(--color-button-secondary-background-disabled); --button-color-background-activated: var(--color-button-secondary-background-activated); --button-color-text-default: var(--color-button-secondary-text); --button-color-text-disabled: var(--color-button-secondary-text-disabled); --button-color-text-activated: var(--color-button-secondary-text-activated); --button-border-color-default: var(--color-button-secondary-border); } .button-tertiary { --button-color-background-default: var(--color-button-tertiary-background); --button-color-background-focus: var(--color-button-tertiary-background-focus); --button-color-background-hover: var(--color-button-tertiary-background-hover); --button-color-background-disabled: var(--color-button-tertiary-background-disabled); --button-color-background-activated: var(--color-button-tertiary-background-activated); --button-color-text-default: var(--color-button-tertiary-text); --button-color-text-disabled: var(--color-button-tertiary-text-disabled); --button-color-text-activated: var(--color-button-tertiary-text-activated); --button-border-color-default: transparent; } .button-plain { --button-color-background-default: transparent; --button-color-background-focus: transparent; --button-color-background-hover: var(--color-button-plain-background-hover); --button-color-background-disabled: var(--color-button-plain-background-disabled); --button-color-background-activated: var(--color-button-plain-background-activated); --button-color-background-active: linear-gradient(var(--color-button-secondary-background-hover), var(--color-button-secondary-background-hover)); --button-color-text-default: var(--color-button-plain-text); --button-color-text-disabled: var(--color-button-plain-text-disabled); --button-color-text-activated: var(--color-button-plain-text-activated); --button-color-text-hover: var(--color-button-plain-text-hover); --button-border-color-default: transparent; } .button-plain-weak { --button-color-background-default: transparent; --button-color-background-focus: transparent; --button-color-background-hover: var(--color-button-plain-background-hover); --button-color-background-disabled: var(--color-button-plain-background-disabled); --button-color-background-activated: var(--color-button-plain-background-activated); --button-color-background-active: linear-gradient(var(--color-button-secondary-background-hover), var(--color-button-secondary-background-hover)); --button-color-text-default: var(--color-button-plain-text); --button-color-text-disabled: var(--color-button-plain-text-disabled); --button-color-text-activated: var(--color-button-plain-text-activated); --button-color-text-hover: var(--color-button-plain-text-hover); --button-border-color-default: transparent; --button-color-text-default: var(--color-button-plain-text-weak); } .button-bordered { --button-color-background-default: transparent; --button-color-background-focus: transparent; --button-color-background-hover: transparent; --button-color-background-active: linear-gradient(transparent, transparent); --button-color-background-disabled: transparent; --button-color-background-activated: var(--color-button-secondary-background-activated); --button-color-text-default: var(--color-secondary-plain); --button-color-text-disabled: var(--color-interactive-content-disabled); --button-color-text-activated: var(--color-neutral-content-strong); --button-color-text-hover: var(--color-secondary-plain-hover); --button-border-color-default: var(--color-neutral-border-medium); --button-border-color-hover: var(--color-neutral-border-strong); --button-border-color-active: var(--color-neutral-border-strong); --button-border-color-activated: var(--color-neutral-border-strong); --button-border-color-disabled: var(--color-neutral-content-disabled); --button-border-width-default: var(--line-sm); --button-border-width-activated: var(--line-sm); } .button-bordered-cab { --button-color-background-default: transparent; --button-color-background-focus: transparent; --button-color-background-hover: transparent; --button-color-background-active: linear-gradient(transparent, transparent); --button-color-background-disabled: transparent; --button-color-background-activated: var(--color-button-secondary-background-activated); --button-color-text-default: var(--color-secondary-plain); --button-color-text-disabled: var(--color-interactive-content-disabled); --button-color-text-activated: var(--color-neutral-content-strong); --button-color-text-hover: var(--color-secondary-plain-hover); --button-border-color-default: var(--color-neutral-border-medium); --button-border-color-hover: var(--color-neutral-border-strong); --button-border-color-active: var(--color-neutral-border-strong); --button-border-color-activated: var(--color-neutral-border-strong); --button-border-color-disabled: var(--color-neutral-content-disabled); --button-border-width-default: var(--line-sm); --button-border-width-activated: var(--line-sm); --button-color-background-hover: var(--color-button-secondary-background-hover); --button-border-color-default: var(--color-neutral-border-weak); --button-border-color-hover: var(--color-neutral-border-weak); --button-border-color-active: var(--color-neutral-border-weak); --button-border-color-activated: var(--color-neutral-border-weak); } .button-destructive { --button-color-background-default: var(--color-danger-background); --button-color-background-focus: var(--color-danger-background-hover); --button-color-background-hover: var(--color-danger-background-hover); --button-color-background-active: linear-gradient(var(--color-danger-background-hover), var(--color-danger-background-hover)); --button-color-background-disabled: var(--color-button-secondary-background-disabled); --button-color-text-default: var(--color-danger-content-default); --button-color-text-disabled: var(--color-button-secondary-text-disabled); --button-border-color-default: transparent; --button-border-color-hover: transparent; --button-border-color-active: transparent; } .button-media { --button-color-background-default: var(--color-media-background); --button-color-background-focus: var(--color-media-background-hover); --button-color-background-hover: var(--color-media-background-hover); --button-color-background-active: linear-gradient(var(--color-media-background-hover), var(--color-media-background-hover)); --button-border-color-activated: var(--color-neutral-content-strong); --button-color-text-default: white; --button-color-text-disabled: var(--color-media-onbackground-disabled); --button-color-background-disabled: var(--color-media-background); } .button-media-cab { --button-color-background-default: transparent; --button-color-background-hover: var(--color-media-background-hover); --button-color-background-disabled: transparent; --button-color-background-active: linear-gradient(var(--color-media-background-hover), var(--color-media-background-hover)); --button-color-background-activated: var(--color-media-background-selected); --button-color-text-default: var(--color-media-onBackground); --button-color-text-activated: var(--color-media-onBackground); --button-color-text-hover: var(--color-media-onBackground); --button-color-text-disabled: var(--color-media-onbackground-disabled); --button-border-color-default: var(--color-media-border-weak); --button-border-color-hover: var(--color-media-border-weak); --button-border-color-disabled: var(--color-media-border-weak); --button-border-width-default: var(--line-sm); } .button-brand { --button-color-background-default: var(--color-brand-background); --button-color-background-hover: var(--color-brand-background-hover); --button-color-background-active: linear-gradient(var(--color-brand-background-hover), var(--color-brand-background-hover)); --button-color-background-disabled: var(--color-interactive-background-disabled); --button-color-text-default: var(--color-danger-content-default); --button-color-text-disabled: var(--color-interactive-content-disabled); --button-border-color-default: transparent; } .button-success { --button-color-background-default: var(--color-success-background); --button-color-background-focus: var(--color-success-background-hover); --button-color-background-hover: var(--color-success-background-hover); --button-color-background-active: linear-gradient(var(--color-success-background-hover), var(--color-success-background-hover)); --button-color-background-disabled: var(--color-button-primary-background-disabled); --button-color-text-default: var(--color-success-onBackground); --button-color-text-disabled: var(--color-button-primary-text-disabled); --button-border-color-default: transparent; } .button-plain-inverted { --button-color-background-default: transparent; --button-color-background-focus: var(--color-neutral-content); --button-color-background-hover: var(--color-neutral-content); --button-color-background-active: var(--color-interactive-pressed); --button-color-background-disabled: transparent; --button-color-text-default: var(--color-neutral-background-weak); --button-color-text-disabled: var(--color-neutral-content); --button-border-color-default: transparent; --button-color-background-activated: var(--color-button-plain-inverted-background-activated); --button-color-text-activated: var(--color-button-plain-inverted-text-activated); } /* Featured avatar */ .full-snoo-xs { --full-snoo-size: var(--rem48); --full-snoo-top-spacer: 0.125rem; --full-snoo-bottom-spacer: calc(-1 * 0.1875rem); } .full-snoo-xs:not(.no-safe-area) { height: var(--full-snoo-size); width: var(--full-snoo-size); margin-top: var(--full-snoo-top-spacer); } .full-snoo-xs:not(.no-safe-area) > img { bottom: var(--full-snoo-bottom-spacer); } .full-snoo-xs > img { width: var(--rem36); } .full-snoo-sm { --full-snoo-size: var(--rem64); --full-snoo-top-spacer: 0.125rem; --full-snoo-bottom-spacer: calc(-1 * var(--rem4)); } .full-snoo-sm:not(.no-safe-area) { height: var(--full-snoo-size); width: var(--full-snoo-size); margin-top: var(--full-snoo-top-spacer); } .full-snoo-sm:not(.no-safe-area) > img { bottom: var(--full-snoo-bottom-spacer); } .full-snoo-sm > img { width: var(--rem48); } .full-snoo-md { --full-snoo-size: var(--rem88); --full-snoo-top-spacer: var(--spacer-2xs); --full-snoo-bottom-spacer: calc(-1 * var(--rem6)); } .full-snoo-md:not(.no-safe-area) { height: var(--full-snoo-size); width: var(--full-snoo-size); margin-top: var(--full-snoo-top-spacer); } .full-snoo-md:not(.no-safe-area) > img { bottom: var(--full-snoo-bottom-spacer); } .full-snoo-md > img { width: var(--rem64); } .full-snoo-lg { --full-snoo-size: var(--rem144); --full-snoo-top-spacer: 0.375rem; --full-snoo-bottom-spacer: calc(-1 * var(--rem10)); } .full-snoo-lg:not(.no-safe-area) { height: var(--full-snoo-size); width: var(--full-snoo-size); margin-top: var(--full-snoo-top-spacer); } .full-snoo-lg:not(.no-safe-area) > img { bottom: var(--full-snoo-bottom-spacer); } .full-snoo-lg > img { width: 6.625rem; } .full-snoo-xl { --full-snoo-size: var(--rem192); --full-snoo-top-spacer: var(--spacer-xs); --full-snoo-bottom-spacer: calc(-1 * var(--rem14)); } .full-snoo-xl:not(.no-safe-area) { height: var(--full-snoo-size); width: var(--full-snoo-size); margin-top: var(--full-snoo-top-spacer); } .full-snoo-xl:not(.no-safe-area) > img { bottom: var(--full-snoo-bottom-spacer); } .full-snoo-xl > img { width: 8.8125rem; } .full-snoo-2xl { --full-snoo-size: var(--rem320); --full-snoo-top-spacer: var(--spacer-sm); --full-snoo-bottom-spacer: calc(-1 * var(--rem22)); } .full-snoo-2xl:not(.no-safe-area) { height: var(--full-snoo-size); width: var(--full-snoo-size); margin-top: var(--full-snoo-top-spacer); } .full-snoo-2xl:not(.no-safe-area) > img { bottom: var(--full-snoo-bottom-spacer); } .full-snoo-2xl > img { width: 14.75rem; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border-width: 0; } .pointer-events-none { pointer-events: none; } .pointer-events-auto { pointer-events: auto; } .\\!visible { visibility: visible !important; } .visible { visibility: visible; } .invisible { visibility: hidden; } .collapse { visibility: collapse; } .static { position: static; } .fixed { position: fixed; } .absolute { position: absolute; } .relative { position: relative; } .inset-0 { inset: 0px; } .-right-\\[\\.65rem\\] { right: -.65rem; } .-right-\\[\\.75rem\\] { right: -.75rem; } .-right-\\[0\\.0625rem\\] { right: -0.0625rem; } .-right-\\[0\\.0825rem\\] { right: -0.0825rem; } .-right-\\[0\\.125rem\\] { right: -0.125rem; } .bottom-0 { bottom: 0px; } .left-0 { left: 0px; } .left-xs { left: 0.5rem; } .right-0 { right: 0px; } .right-\\[0\\.05rem\\] { right: 0.05rem; } .right-\\[0\\.10rem\\] { right: 0.10rem; } .right-xs { right: 0.5rem; } .top-0 { top: 0px; } .top-1\\/2 { top: 50%; } .top-xs { top: 0.5rem; } .isolate { isolation: isolate; } .-z-10 { z-index: -10; } .col-start-1 { grid-column-start: 1; } .row-start-1 { grid-row-start: 1; } .m-0 { margin: 0px; } .-mx-xs { margin-left: -0.5rem; margin-right: -0.5rem; } .mx-auto { margin-left: auto; margin-right: auto; } .mx-xs { margin-left: 0.5rem; margin-right: 0.5rem; } .-ml-\\[var\\(--rem10\\)\\] { margin-left: calc(var(--rem10) * -1); } .-ml-\\[var\\(--rem12\\)\\] { margin-left: calc(var(--rem12) * -1); } .-ml-\\[var\\(--rem14\\)\\] { margin-left: calc(var(--rem14) * -1); } .-ml-\\[var\\(--rem16\\)\\] { margin-left: calc(var(--rem16) * -1); } .-ml-\\[var\\(--rem18\\)\\] { margin-left: calc(var(--rem18) * -1); } .-ml-\\[var\\(--rem20\\)\\] { margin-left: calc(var(--rem20) * -1); } .-ml-\\[var\\(--rem4\\)\\] { margin-left: calc(var(--rem4) * -1); } .-ml-\\[var\\(--rem6\\)\\] { margin-left: calc(var(--rem6) * -1); } .-ml-\\[var\\(--rem8\\)\\] { margin-left: calc(var(--rem8) * -1); } .-mt-2xs { margin-top: -0.25rem; } .-mt-\\[2px\\] { margin-top: -2px; } .mb-0 { margin-bottom: 0px; } .ml-0 { margin-left: 0px; } .ml-2xs { margin-left: 0.25rem; } .ml-\\[-\\.25rem\\] { margin-left: -.25rem; } .ml-\\[-2px\\] { margin-left: -2px; } .ml-\\[3px\\] { margin-left: 3px; } .ml-md { margin-left: 1rem; } .ml-sm { margin-left: 0.75rem; } .ml-xs { margin-left: 0.5rem; } .mr-2xs { margin-right: 0.25rem; } .mr-\\[6px\\] { margin-right: 6px; } .mr-\\[calc\\(var\\(--size-button-sm-h\\)-var\\(--rem10\\)-var\\(--button-border-width-default\\)\\)\\] { margin-right: calc(var(--size-button-sm-h) - var(--rem10) - var(--button-border-width-default)); } .mr-\\[var\\(--rem6\\)\\] { margin-right: var(--rem6); } .mr-md { margin-right: 1rem; } .mr-sm { margin-right: 0.75rem; } .mr-xs { margin-right: 0.5rem; } .mt-0 { margin-top: 0px; } .mt-\\[-0\\.125rem\\] { margin-top: -0.125rem; } .mt-\\[-0\\.25rem\\] { margin-top: -0.25rem; } .mt-xs { margin-top: 0.5rem; } .box-border { box-sizing: border-box; } .box-content { box-sizing: content-box; } .line-clamp-1 { overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; } .\\!block { display: block !important; } .block { display: block; } .inline-block { display: inline-block; } .inline { display: inline; } .flex { display: flex; } .inline-flex { display: inline-flex; } .table { display: table; } .grid { display: grid; } .contents { display: contents; } .list-item { display: list-item; } .hidden { display: none; } .aspect-square { aspect-ratio: 1 / 1; } .h-100 { height: 100%; } .h-2xl { height: 3rem; } .h-2xs { height: 0.25rem; } .h-\\[\\.25rem\\] { height: .25rem; } .h-\\[\\.375rem\\] { height: .375rem; } .h-\\[\\.625rem\\] { height: .625rem; } .h-\\[1\\.25rem\\] { height: 1.25rem; } .h-\\[1\\.5rem\\] { height: 1.5rem; } .h-\\[1rem\\] { height: 1rem; } .h-\\[2\\.5rem\\] { height: 2.5rem; } .h-\\[2\\.875rem\\] { height: 2.875rem; } .h-\\[20px\\] { height: 20px; } .h-\\[2px\\] { height: 2px; } .h-\\[2rem\\] { height: 2rem; } .h-\\[3\\.25rem\\] { height: 3.25rem; } .h-\\[3\\.5rem\\] { height: 3.5rem; } .h-\\[3rem\\] { height: 3rem; } .h-\\[4\\.5rem\\] { height: 4.5rem; } .h-\\[4rem\\] { height: 4rem; } .h-\\[5\\.5rem\\] { height: 5.5rem; } .h-auto { height: auto; } .h-full { height: 100%; } .h-lg { height: 1.5rem; } .h-md { height: 1rem; } .h-px { height: 1px; } .h-sm { height: 0.75rem; } .h-xl { height: 2rem; } .h-xs { height: 0.5rem; } .max-h-\\[596px\\] { max-height: 596px; } .max-h-\\[max\\(23vw\\2c 250px\\)\\] { max-height: max(23vw,250px); } .max-h-\\[min\\(20vw\\2c 150px\\)\\] { max-height: min(20vw,150px); } .max-h-\\[var\\(--rem20\\)\\] { max-height: var(--rem20); } .min-h-\\[1\\.5rem\\] { min-height: 1.5rem; } .min-h-\\[1rem\\] { min-height: 1rem; } .min-h-\\[2\\.5rem\\] { min-height: 2.5rem; } .min-h-\\[2\\.875rem\\] { min-height: 2.875rem; } .min-h-\\[2rem\\] { min-height: 2rem; } .min-h-\\[3\\.25rem\\] { min-height: 3.25rem; } .min-h-\\[3rem\\] { min-height: 3rem; } .min-h-\\[4\\.5rem\\] { min-height: 4.5rem; } .min-h-\\[min\\(20vw\\2c 150px\\)\\] { min-height: min(20vw,150px); } .w-100 { width: 100%; } .w-2xl { width: 3rem; } .w-2xs { width: 0.25rem; } .w-3xl { width: 4rem; } .w-\\[\\.25rem\\] { width: .25rem; } .w-\\[\\.375rem\\] { width: .375rem; } .w-\\[\\.625rem\\] { width: .625rem; } .w-\\[1\\.25rem\\] { width: 1.25rem; } .w-\\[1\\.5rem\\] { width: 1.5rem; } .w-\\[1rem\\] { width: 1rem; } .w-\\[2\\.5rem\\] { width: 2.5rem; } .w-\\[2\\.875rem\\] { width: 2.875rem; } .w-\\[2rem\\] { width: 2rem; } .w-\\[3\\.25rem\\] { width: 3.25rem; } .w-\\[3\\.5rem\\] { width: 3.5rem; } .w-\\[32rem\\] { width: 32rem; } .w-\\[3rem\\] { width: 3rem; } .w-\\[4\\.5rem\\] { width: 4.5rem; } .w-\\[4rem\\] { width: 4rem; } .w-\\[5\\.5rem\\] { width: 5.5rem; } .w-\\[95vw\\] { width: 95vw; } .w-full { width: 100%; } .w-lg { width: 1.5rem; } .w-md { width: 1rem; } .w-px { width: 1px; } .w-sm { width: 0.75rem; } .w-xl { width: 2rem; } .w-xs { width: 0.5rem; } .min-w-0 { min-width: 0px; } .min-w-\\[0\\.5rem\\] { min-width: 0.5rem; } .min-w-\\[1\\.5rem\\] { min-width: 1.5rem; } .min-w-\\[1rem\\] { min-width: 1rem; } .min-w-\\[2\\.5rem\\] { min-width: 2.5rem; } .min-w-\\[2\\.875rem\\] { min-width: 2.875rem; } .min-w-\\[2rem\\] { min-width: 2rem; } .min-w-\\[3\\.25rem\\] { min-width: 3.25rem; } .min-w-\\[3rem\\] { min-width: 3rem; } .min-w-\\[4\\.5rem\\] { min-width: 4.5rem; } .max-w-\\[480px\\] { max-width: 480px; } .max-w-full { max-width: 100%; } .max-w-xl { max-width: 36rem; } .flex-1 { flex: 1 1 0%; } .flex-shrink { flex-shrink: 1; } .shrink { flex-shrink: 1; } .shrink-0 { flex-shrink: 0; } .flex-grow { flex-grow: 1; } .grow { flex-grow: 1; } .grow-0 { flex-grow: 0; } .translate-x-px { --tw-translate-x: 1px; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); } .-scale-x-100 { --tw-scale-x: -1; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); } .scale-x-100 { --tw-scale-x: 1; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); } .transform { transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); } @keyframes spin { to { transform: rotate(360deg); } } .animate-spin { animation: spin 1s linear infinite; } .cursor-auto { cursor: auto; } .cursor-pointer { cursor: pointer; } .select-none { -webkit-user-select: none; -moz-user-select: none; user-select: none; } .select-text { -webkit-user-select: text; -moz-user-select: text; user-select: text; } .select-auto { -webkit-user-select: auto; -moz-user-select: auto; user-select: auto; } .resize { resize: both; } .list-none { list-style-type: none; } .auto-cols-fr { grid-auto-columns: minmax(0, 1fr); } .auto-rows-fr { grid-auto-rows: minmax(0, 1fr); } .grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); } .flex-row { flex-direction: row; } .flex-row-reverse { flex-direction: row-reverse; } .flex-col { flex-direction: column; } .flex-col-reverse { flex-direction: column-reverse; } .flex-wrap { flex-wrap: wrap; } .content-center { align-content: center; } .content-start { align-content: flex-start; } .content-end { align-content: flex-end; } .content-stretch { align-content: stretch; } .items-start { align-items: flex-start; } .items-end { align-items: flex-end; } .items-center { align-items: center; } .items-stretch { align-items: stretch; } .justify-start { justify-content: flex-start; } .justify-end { justify-content: flex-end; } .justify-center { justify-content: center; } .justify-between { justify-content: space-between; } .justify-items-start { justify-items: start; } .justify-items-end { justify-items: end; } .justify-items-center { justify-items: center; } .gap-2xs { gap: 0.25rem; } .gap-\\[0\\.5rem\\] { gap: 0.5rem; } .gap-\\[var\\(--rem4\\)\\] { gap: var(--rem4); } .gap-md { gap: 1rem; } .gap-sm { gap: 0.75rem; } .gap-xs { gap: 0.5rem; } .gap-y-sm { row-gap: 0.75rem; } .gap-y-xs { row-gap: 0.5rem; } .self-start { align-self: flex-start; } .overflow-hidden { overflow: hidden; } .overflow-visible { overflow: visible; } .truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .text-ellipsis { text-overflow: ellipsis; } .text-clip { text-overflow: clip; } .whitespace-nowrap { white-space: nowrap; } .whitespace-pre-line { white-space: pre-line; } .rounded-\\[\\.25rem\\] { border-radius: .25rem; } .rounded-\\[\\.50rem\\] { border-radius: .50rem; } .rounded-\\[\\.5rem\\] { border-radius: .5rem; } .rounded-\\[\\.75rem\\] { border-radius: .75rem; } .rounded-\\[1rem\\] { border-radius: 1rem; } .rounded-full { border-radius: 624.9375rem; } .rounded-none { border-radius: 0rem; } .rounded-sm { border-radius: 0.25rem; } .rounded-l-\\[12px\\] { border-top-left-radius: 12px; border-bottom-left-radius: 12px; } .rounded-l-\\[8px\\] { border-top-left-radius: 8px; border-bottom-left-radius: 8px; } .rounded-r-\\[12px\\] { border-top-right-radius: 12px; border-bottom-right-radius: 12px; } .rounded-r-\\[8px\\] { border-top-right-radius: 8px; border-bottom-right-radius: 8px; } .border { border-width: 0.0625rem; } .border-0 { border-width: 0rem; } .border-\\[\\.25rem\\] { border-width: .25rem; } .border-\\[0\\.125rem\\] { border-width: 0.125rem; } .border-\\[0\\.1875rem\\] { border-width: 0.1875rem; } .border-lg { border-width: 0.25rem; } .border-md { border-width: 0.125rem; } .border-sm { border-width: 0.0625rem; } .border-b { border-bottom-width: 0.0625rem; } .border-t-sm { border-top-width: 0.0625rem; } .border-solid { border-style: solid; } .border-dashed { border-style: dashed; } .border-none { border-style: none; } .border-action-downvote { border-color: var(--color-action-downvote); } .border-action-upvote { border-color: var(--color-action-upvote); } .border-alienblue-600 { --tw-border-opacity: 1; border-color: rgb(17 91 202 / var(--tw-border-opacity)); } .border-neutral-background { border-color: var(--color-neutral-background); } .border-neutral-border { border-color: var(--color-neutral-border); } .border-neutral-border-weak { border-color: var(--color-neutral-border-weak); } .border-tone-4 { border-color: var(--color-tone-4); } .border-transparent { border-color: transparent; } .bg-\\[color\\:var\\(--button-color-background-default\\)\\] { background-color: var(--button-color-background-default); } .bg-\\[color\\:var\\(--color-button-plain-background-disabled\\)\\] { background-color: var(--color-button-plain-background-disabled); } .bg-action-downvote { background-color: var(--color-action-downvote); } .bg-action-upvote { background-color: var(--color-action-upvote); } .bg-brand-background { background-color: var(--color-brand-background); } .bg-danger-background { background-color: var(--color-danger-background); } .bg-interactive-background-disabled { background-color: var(--color-interactive-background-disabled); } .bg-interactive-content-disabled { background-color: var(--color-interactive-content-disabled); } .bg-inverted-neutral-background { background-color: var(--color-inverted-neutral-background); } .bg-media-background { background-color: var(--color-media-background); } .bg-neutral-background { background-color: var(--color-neutral-background); } .bg-neutral-background-selected { background-color: var(--color-neutral-background-selected); } .bg-neutral-background-weak { background-color: var(--color-neutral-background-weak); } .bg-neutral-content { background-color: var(--color-neutral-content); } .bg-online { background-color: var(--color-online); } .bg-primary { background-color: var(--color-primary); } .bg-secondary-background { background-color: var(--color-secondary-background); } .bg-secondary-background-selected { background-color: var(--color-secondary-background-selected); } .bg-secondary-plain { background-color: var(--color-secondary-plain); } .bg-success-background { background-color: var(--color-success-background); } .bg-transparent { background-color: transparent; } .bg-warning-background { background-color: var(--color-warning-background); } .bg-contain { background-size: contain; } .bg-cover { background-size: cover; } .bg-center { background-position: center; } .bg-no-repeat { background-repeat: no-repeat; } .object-cover { -o-object-fit: cover; object-fit: cover; } .object-center { -o-object-position: center; object-position: center; } .p-0 { padding: 0px; } .p-2xs { padding: 0.25rem; } .p-md { padding: 1rem; } .p-xl { padding: 2rem; } .p-xs { padding: 0.5rem; } .px-2xs { padding-left: 0.25rem; padding-right: 0.25rem; } .px-\\[0\\.375rem\\] { padding-left: 0.375rem; padding-right: 0.375rem; } .px-\\[var\\(--rem10\\)\\] { padding-left: var(--rem10); padding-right: var(--rem10); } .px-\\[var\\(--rem12\\)\\] { padding-left: var(--rem12); padding-right: var(--rem12); } .px-\\[var\\(--rem14\\)\\] { padding-left: var(--rem14); padding-right: var(--rem14); } .px-\\[var\\(--rem6\\)\\] { padding-left: var(--rem6); padding-right: var(--rem6); } .px-\\[var\\(--rem8\\)\\] { padding-left: var(--rem8); padding-right: var(--rem8); } .px-md { padding-left: 1rem; padding-right: 1rem; } .px-sm { padding-left: 0.75rem; padding-right: 0.75rem; } .px-xs { padding-left: 0.5rem; padding-right: 0.5rem; } .py-2xs { padding-top: 0.25rem; padding-bottom: 0.25rem; } .py-\\[0\\.125rem\\] { padding-top: 0.125rem; padding-bottom: 0.125rem; } .py-\\[var\\(--rem10\\)\\] { padding-top: var(--rem10); padding-bottom: var(--rem10); } .py-\\[var\\(--rem14\\)\\] { padding-top: var(--rem14); padding-bottom: var(--rem14); } .py-\\[var\\(--rem6\\)\\] { padding-top: var(--rem6); padding-bottom: var(--rem6); } .py-xs { padding-top: 0.5rem; padding-bottom: 0.5rem; } .pb-md { padding-bottom: 1rem; } .pl-\\[var\\(--rem10\\)\\] { padding-left: var(--rem10); } .pl-\\[var\\(--rem12\\)\\] { padding-left: var(--rem12); } .pl-\\[var\\(--rem14\\)\\] { padding-left: var(--rem14); } .pl-\\[var\\(--rem16\\)\\] { padding-left: var(--rem16); } .pl-md { padding-left: 1rem; } .pr-\\[10px\\] { padding-right: 10px; } .pr-\\[3px\\] { padding-right: 3px; } .pr-\\[var\\(--rem10\\)\\] { padding-right: var(--rem10); } .pr-\\[var\\(--rem12\\)\\] { padding-right: var(--rem12); } .pr-\\[var\\(--rem14\\)\\] { padding-right: var(--rem14); } .pr-\\[var\\(--rem16\\)\\] { padding-right: var(--rem16); } .pr-\\[var\\(--rem6\\)\\] { padding-right: var(--rem6); } .pr-\\[var\\(--rem8\\)\\] { padding-right: var(--rem8); } .pr-md { padding-right: 1rem; } .pt-md { padding-top: 1rem; } .text-center { text-align: center; } .text-start { text-align: start; } .text-end { text-align: end; } .align-middle { vertical-align: middle; } .text-10 { font-size: 0.625rem; line-height: 1rem; } .text-12 { font-size: 0.75rem; line-height: 1rem; } .text-14 { font-size: 0.875rem; line-height: 1.25rem; } .text-16 { font-size: 1rem; line-height: 1.25rem; } .text-18 { font-size: 1.125rem; line-height: 1.5rem; } .text-20 { font-size: 1.25rem; line-height: 1.25rem; } .text-24 { font-size: 1.5rem; line-height: 1.75rem; } .font-bold { font-weight: 700; } .font-normal { font-weight: 400; } .font-semibold { font-weight: 600; } .uppercase { text-transform: uppercase; } .normal-case { text-transform: none; } .leading-4 { line-height: 1rem; } .leading-5 { line-height: 1.25rem; } .tracking-widest { letter-spacing: 0.1em; } .\\!text-neutral-content-strong { color: var(--color-neutral-content-strong) !important; } .text-\\[color\\:var\\(--button-color-text-default\\)\\] { color: var(--button-color-text-default); } .text-\\[color\\:var\\(--color-button-plain-text-disabled\\)\\] { color: var(--color-button-plain-text-disabled); } .text-\\[color\\:var\\(--color-button-secondary-text-disabled\\)\\] { color: var(--color-button-secondary-text-disabled); } .text-action-downvote { color: var(--color-action-downvote); } .text-action-upvote { color: var(--color-action-upvote); } .text-ai-plain { color: var(--color-ai-plain); } .text-brand-onBackground { color: var(--color-brand-onBackground); } .text-category-nsfw { color: var(--color-category-nsfw); } .text-category-spoiler { color: var(--color-category-spoiler); } .text-danger-content { color: var(--color-danger-content); } .text-global-white { --tw-text-opacity: 1; color: rgb(255 255 255 / var(--tw-text-opacity)); } .text-interactive-content-disabled { color: var(--color-interactive-content-disabled); } .text-inverted-secondary-plain { color: var(--color-inverted-secondary-plain); } .text-media-onBackground { color: var(--color-media-onBackground); } .text-media-onbackground { color: var(--color-media-onbackground); } .text-media-onbackground-weak { color: var(--color-media-onbackground-weak); } .text-neutral-background { color: var(--color-neutral-background); } .text-neutral-content-disabled { color: var(--color-neutral-content-disabled); } .text-neutral-content-strong { color: var(--color-neutral-content-strong); } .text-neutral-content-weak { color: var(--color-neutral-content-weak); } .text-primary { color: var(--color-primary); } .text-primary-onBackground { color: var(--color-primary-onBackground); } .text-secondary { color: var(--color-secondary); } .text-secondary-onBackground { color: var(--color-secondary-onBackground); } .text-secondary-plain { color: var(--color-secondary-plain); } .text-secondary-plain-weak { color: var(--color-secondary-plain-weak); } .text-secondary-weak { color: var(--color-secondary-weak); } .text-warning-content { color: var(--color-warning-content); } .underline { text-decoration-line: underline; } .no-underline { text-decoration-line: none; } .opacity-30 { opacity: 0.3; } .opacity-40 { opacity: 0.4; } .opacity-60 { opacity: 0.6; } .outline { outline-style: solid; } .-outline-offset-1 { outline-offset: -1px; } .ring { --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color); box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000); } .blur-sm { --tw-blur: blur(0.25rem); filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow); } .drop-shadow { --tw-drop-shadow: drop-shadow(0 1px 2px rgb(0 0 0 / 0.1)) drop-shadow(0 1px 1px rgb(0 0 0 / 0.06)); filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow); } .invert { --tw-invert: invert(100%); filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow); } .filter { filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow); } .transition { transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter; transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter; transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; } .ease-in-out { transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); } /** * Styles defined in this file are not shared outside of this package and are only available * to the components within this package. To share custom styles with the host application * for purposes such as server-side rendering use custom-styles.css instead. */ .before\\:content-\\[\\\'\\2022\\\'\\]::before { --tw-content: \'•\'; content: var(--tw-content); } .visited\\:text-media-onbackground:visited { color: var(--color-media-onbackground); } .visited\\:text-neutral-background-weak:visited { color: var(--color-neutral-background-weak); } .visited\\:text-secondary-plain:visited { color: var(--color-secondary-plain); } .visited\\:text-secondary-plain-weak:visited { color: var(--color-secondary-plain-weak); } @media (hover: hover) and (pointer: fine) { .hover\\:bg-downvote-background-hover:hover { background-color: var(--color-downvote-background-hover); } .hover\\:bg-neutral-background-hover:hover { background-color: var(--color-neutral-background-hover); } .hover\\:bg-neutral-background-selected:hover { background-color: var(--color-neutral-background-selected); } .hover\\:bg-secondary-background-hover:hover { background-color: var(--color-secondary-background-hover); } .hover\\:bg-upvote-background-hover:hover { background-color: var(--color-upvote-background-hover); } .hover\\:text-action-downvote:hover { color: var(--color-action-downvote); } .hover\\:text-action-upvote:hover { color: var(--color-action-upvote); } .hover\\:text-danger-content-hover:hover { color: var(--color-danger-content-hover); } .hover\\:text-global-white:hover { --tw-text-opacity: 1; color: rgb(255 255 255 / var(--tw-text-opacity)); } .hover\\:text-inverted-secondary-plain-hover:hover { color: var(--color-inverted-secondary-plain-hover); } .hover\\:text-secondary-hover:hover { color: var(--color-secondary-hover); } .hover\\:text-secondary-plain:hover { color: var(--color-secondary-plain); } .hover\\:text-secondary-plain-hover:hover { color: var(--color-secondary-plain-hover); } .hover\\:underline:hover { text-decoration-line: underline; } .hover\\:no-underline:hover { text-decoration-line: none; } } .focus-visible\\:text-action-downvote:focus-visible { color: var(--color-action-downvote); } .focus-visible\\:text-action-upvote:focus-visible { color: var(--color-action-upvote); } .active\\:bg-interactive-pressed:active { background-color: var(--color-interactive-pressed); } .active\\:bg-secondary-background:active { background-color: var(--color-secondary-background); } .disabled\\:bg-interactive-background-disabled:disabled { background-color: var(--color-interactive-background-disabled); } .disabled\\:text-interactive-content-disabled:disabled { color: var(--color-interactive-content-disabled); } @media (hover: hover) and (pointer: fine) { .group:hover .group-hover\\:visible { visibility: visible; } .group:hover .group-hover\\:block { display: block; } .group:hover .group-hover\\:bg-secondary-plain-weak { background-color: var(--color-secondary-plain-weak); } } .group.tab-bottom-border.tab-selected .group-\\[\\.tab-bottom-border\\.tab-selected\\]\\:block { display: block; } .\\[\\&\\>\\:first-child\\]\\:mb-0>:first-child { margin-bottom: 0px; } .\\[\\&\\>\\:first-child\\]\\:max-h-full>:first-child { max-height: 100%; } .\\[\\&\\>\\:first-child\\]\\:overflow-hidden>:first-child { overflow: hidden; } .\\[\\&\\>\\:first-child\\]\\:rounded-\\[inherit\\]>:first-child { border-radius: inherit; } .\\[\\&\\>\\:not\\(\\.pointer-events-none\\)\\]\\:pointer-events-auto>:not(.pointer-events-none) { pointer-events: auto; } .\\[\\&\\>svg\\]\\:block>svg { display: block; } .\\[\\&\\>svg\\]\\:aspect-square>svg { aspect-ratio: 1 / 1; } .\\[\\&\\>svg\\]\\:h-\\[1\\.25rem\\]>svg { height: 1.25rem; } .\\[\\&\\>svg\\]\\:h-lg>svg { height: 1.5rem; } .\\[\\&\\>svg\\]\\:h-md>svg { height: 1rem; } .\\[\\&\\>svg\\]\\:h-sm>svg { height: 0.75rem; } .\\[\\&\\>svg\\]\\:w-\\[1\\.25rem\\]>svg { width: 1.25rem; } .\\[\\&\\>svg\\]\\:w-lg>svg { width: 1.5rem; } .\\[\\&\\>svg\\]\\:w-md>svg { width: 1rem; } .\\[\\&\\>svg\\]\\:w-sm>svg { width: 0.75rem; } .\\[\\&\\>svg\\]\\:text-center>svg { text-align: center; } .\\[\\&\\>svg\\]\\:align-middle>svg { vertical-align: middle; } ';
2
+ export const stylesCSS = 'faceplate-expandable-section-helper { display: contents; /* [rpl] just to boost the selector */ /* Target the [open] attribute on either the root element OR the details element to rotate the chevron. This is to handle rotating chevrons both before and after the faceplate-expandable-section-helper component is defined. Before the component is defined, the [open] attribute on the component will not toggle if the user clicks on details, but the [open] attribute will toggle on the details element, so we need to target details too. The reason we can\'t target only the details element is because once the web component is defined, we delay toggling the [open] attribute on the details element until AFTER the animation finishes. So if we only targeted the details element for the chevron rotation the chevron wouldn\'t rotate until after the collapse animation finished and we finally toggle the [open] attriubte on the details element. */ /* Specific handling for nested menus. We only need to handle collapse menus inside of expanded menus, not expanded menus inside collapsed menus because you can\'t see those! */ } faceplate-expandable-section-helper > details > summary { list-style-type: none; /* For Safari */ } faceplate-expandable-section-helper > details > summary::marker, faceplate-expandable-section-helper > details > summary::-webkit-details-marker { display: none; } faceplate-expandable-section-helper[rpl] > details > summary { /* override details.less */ margin: 0; } faceplate-expandable-section-helper > details > summary [icon-name=\'caret-down-outline\'] { transition: transform 0.22s ease-in-out; } faceplate-expandable-section-helper[open] > details > summary svg[rpl][icon-name=\'caret-down-outline\'], faceplate-expandable-section-helper:not(:defined) > details[open] > summary svg[rpl][icon-name=\'caret-down-outline\'] { transform: rotate(180deg); } faceplate-expandable-section-helper:not([open]) > details > summary svg[rpl][icon-name=\'caret-down-outline\'], faceplate-expandable-section-helper:not(:defined) > details[open] > summary svg[rpl][icon-name=\'caret-down-outline\'] { transform: rotate(0deg); } faceplate-hovercard:not(:defined) > [slot=\'content\'] { display: none; } faceplate-hovercard[trigger=\'mouse\'] a, faceplate-hovercard[trigger=\'mouse\'] button, faceplate-hovercard[trigger=\'mouse\'] [faceplate-focusable], faceplate-hovercard[trigger=\'mouse\'] [tabindex=\'0\'] { outline: none; } /* * This is a Tailwind CSS file, it must be run through the PostCSS compiler * with the Tailwind plugin, not Less. The `postcss-import` plugin is also * needed, if you have other additions to your Tailwind entry point CSS. * * @example * // tailwind.css * @import \'@reddit/faceplate/styles/tailwind-components.css\' * @tailwind components; * @tailwind utilities; * * // styles.less * @import (less) \'@reddit/faceplate/faceplate.css\'; * @import (less) \'./tailwind-build.css\'; */ /* rem-based sizing units referenced by equivalent pixel sizes */ :root, .theme-light { --rem360: 22.5rem; --rem320: 20rem; --rem192: 12rem; --rem144: 9rem; --rem128: 8rem; --rem96: 6rem; --rem90: 5.625rem; --rem88: 5.5rem; --rem64: 4rem; --rem56: 3.5rem; --rem48: 3rem; --rem40: 2.5rem; --rem36: 2.25rem; --rem32: 2rem; --rem28: 1.75rem; --rem26: 1.625rem; --rem24: 1.5rem; --rem22: 1.375rem; --rem20: 1.25rem; --rem18: 1.125rem; --rem16: 1rem; --rem15: 0.9375rem; --rem14: 0.875rem; --rem12: 0.75rem; --rem10: 0.625rem; --rem8: 0.5rem; --rem6: 0.375rem; --rem4: 0.25rem; --rem2: 0.125rem; --rem1: 0.0625rem; --spacer-4xs: 0.125rem; --spacer-2xs: 0.25rem; --spacer-xs: 0.5rem; --spacer-sm: 0.75rem; --spacer-md: 1rem; --spacer-lg: 1.5rem; --spacer-xl: 2rem; --spacer-2xl: 3rem; --spacer-a-px: 0px; --spacer-button-lg-px: var(--spacer-lg); --spacer-button-md-px: var(--spacer-lg); --spacer-button-sm-px: var(--spacer-md); --spacer-input-padding-left: 0px; --spacer-input-padding-top: 0px; --spacer-label-default: 0px; --spacer-switch-input-active-pl: 0px; --size-2xs: 0.25rem; --size-xs: 0.5rem; --size-sm: 0.75rem; --size-md: 1rem; --size-lg: 1.5rem; --size-xl: 2rem; --size-2xl: 3rem; --size-3xl: 4rem; --size-4xl: 6rem; --size-5xl: 8rem; --size-button-lg-h: 3.375rem; --size-button-md-h: 2.75rem; --size-button-sm-h: 2.125rem; --size-button-xs-h: 1.375rem; --size-switch-input-h: 1.25rem; --size-switch-input-w: 2rem; --line-sm: 0.0625rem; --line-md: 0.125rem; --line-lg: 0.25rem; --line-a-focus: 0px; --line-a-outline-moz: 0.0625rem; --line-a-outline-wb: 0.3125rem; --line-button-lg-border: 0.0625rem; --line-button-md-border: 0.0625rem; --line-button-sm-border: 0.0625rem; --line-button-xs-border: 0.0625rem; --line-button-border-activated: 0.0625rem; --line-input-border: var(--line-sm); --radius-sm: 0.25rem; --radius-lg: 2rem; --radius-full: 624.9375rem; --radius-accordion-size: var(--radius-sm); --font-10-15-bold: normal 700 0.625rem / 0.9375rem var(--font-sans); --font-button-lg: normal 700 1.125rem / 1.375rem var(--font-sans); --font-button-md: normal 700 1rem / 1.25rem var(--font-sans); --font-button-sm: normal 700 0.875rem / 1.125rem var(--font-sans); --font-button-xs: normal 700 0.75rem / 0.875rem var(--font-sans); --font-label-default: var(--font-10-15-bold); --misc-accordion-border: 1px solid var(--color-tone-5); --misc-accordion-open-list-style-type: disclosure-open; --misc-accordion-closed-list-style-type: disclosure-closed; --misc-divider-margin: 0.5rem auto; --misc-label-text-transform: uppercase; --misc-label-letter-spacing: 0.5px; --color-primary-visited: #660099; --color-primary-background: #24a0ed; --color-primary-background-hover: #006cbf; --color-danger-content: #ea0027; --color-success-content: #46d160; --color-global-black: #000000; --color-global-white: #ffffff; --color-global-orangered: #D93900; --color-global-alienblue: #0079d3; --color-global-darkblue: #1d2535; --color-tone-1: #1a1a1b; --color-tone-2: #6a6d6f; --color-tone-3: #878a8c; --color-tone-4: #d3d6da; --color-tone-5: #edeff1; --color-tone-6: #f6f7f8; --color-tone-7: #ffffff; --color-action-primary: var(--color-primary-background); --color-action-secondary: var(--color-primary-background-hover); --color-action-upvote: var(--color-global-orangered); --color-action-downvote: #7193ff; --color-alert-positive: var(--color-success-content); --color-alert-negative: var(--color-danger-content); --color-alert-caution: #ffb000; --color-identity-admin: var(--color-global-orangered); --color-identity-moderator: #46d160; --color-identity-self: #0dd3bb; --color-identity-coins: #ddbd37; --color-category-live: var(--color-global-orangered); --color-category-nsfw: #ff3881; --color-category-spoiler: var(--color-tone-1); --color-ui-canvas: var(--color-tone-5); --color-ui-modalbackground: var(--color-tone-7); --color-opacity-highlight: linear-gradient(#006cbf1a, var(--color-tone-6)); --color-opacity-08: #1a1a1b14; --color-opacity-50: #00000080; --color-scrim: #1a1a1b4d; --color-a-default: var(--color-primary-background-hover); --color-a-hover: var(--color-primary-background-hover); --color-a-visited: var(--color-primary-background-hover); --color-button-overlay-focus: #ffffff1a; --color-button-overlay-active: #00000014; --color-button-primary-background-hover: var(--color-primary-background); --color-button-primary-background-disabled: var(--color-tone-6); --color-button-primary-border-hover: transparent; --color-button-primary-border-active: transparent; --color-button-primary-border-activated: transparent; --color-button-primary-border-disabled: transparent; --color-button-primary-text-disabled: var(--color-tone-2); --color-button-secondary-background: transparent; --color-button-secondary-background-focus: transparent; --color-button-secondary-background-hover: transparent; --color-button-secondary-background-disabled: var(--color-tone-6); --color-button-secondary-background-activated: transparent; --color-button-secondary-border: var(--color-primary-background-hover); --color-button-secondary-border-hover: var(--color-primary-background-hover); --color-button-secondary-border-active: var(--color-primary-background-hover); --color-button-secondary-border-activated: var(--color-primary-background-hover); --color-button-secondary-border-disabled: var(--color-tone-2); --color-button-secondary-text: var(--color-primary-background-hover); --color-button-secondary-text-disabled: var(--color-tone-2); --color-button-secondary-text-activated: var(--color-button-secondary-text); --color-button-tertiary-background: var(--color-tone-6); --color-button-tertiary-background-focus: var(--color-tone-6); --color-button-tertiary-background-hover: var(--color-tone-6); --color-button-tertiary-background-disabled: var(--color-tone-6); --color-button-tertiary-background-activated: var(--color-tone-6); --color-button-tertiary-border-hover: transparent; --color-button-tertiary-border-active: transparent; --color-button-tertiary-text: var(--color-primary-background-hover); --color-button-tertiary-text-disabled: var(--color-tone-2); --color-button-tertiary-text-activated: var(--color-primary-background-hover); --color-button-plain-background-hover: transparent; --color-button-plain-background-disabled: var(--color-tone-7); --color-button-plain-background-activated: transparent; --color-button-plain-border-hover: transparent; --color-button-plain-border-active: transparent; --color-button-plain-text: var(--color-primary-background-hover); --color-button-plain-text-disabled: var(--color-tone-2); --color-button-plain-text-activated: var(--color-primary-background-hover); --color-divider-default: var(--color-tone-5); --color-input-default: var(--color-tone-6); --color-input-hover: var(--color-primary-background-hover); --color-input-border: var(--color-tone-5); --color-input-text: var(--color-tone-1); --color-input-helper-text: var(--color-tone-1); --color-label-default: var(--color-tone-1); --color-switch-input-background-default: var(--color-tone-3); --color-switch-input-background-checked: var(--color-global-alienblue); --color-switch-input-background-disabled: var(--color-tone-6); --color-switch-input-background-checked-disabled: var(--color-tone-5); --color-switch-input-background-hover: var(--color-tone-3); --color-switch-input-background-checked-hover: var(--color-global-alienblue); --elevation-xs: 0 0.0625rem 0.125rem 0 #00000040; --elevation-sm: 0 0.0625rem 0.25rem 0 #00000026, 0 0.25rem 0.25rem 0 #00000026; --elevation-md: 0 0.25rem 0.5rem 0 #0000001a, 0 0.375rem 0.75rem 0 #00000040; --elevation-lg: 0 0.75rem 0.75rem 0 #00000026, 0 1rem 2rem 0 #00000040; --elevation-focus-ring: 0 0 0 0.25rem var(--color-global-alienblue); --font-sans: -apple-system, BlinkMacSystemFont, \'Segoe UI\', Roboto, \'Helvetica Neue\', Arial, \'Apple Color Emoji\', \'Segoe UI Emoji\', \'Segoe UI Symbol\', sans-serif; --font-mono: Noto Mono, Menlo, Monaco, Consolas, monospace; /* https://www.figma.com/file/iu3o6C8NVE1a3BPHVA6G2U/Reddit-Design-Kit---Desktop?node-id=73%3A7092 */ --font-title-h0: normal 500 1.625rem / 2rem var(--font-sans); --font-title-h1: normal 500 1.375rem / 1.625rem var(--font-sans); --font-title-h2: normal 500 1.25rem / 1.5rem var(--font-sans); --font-title-h3: normal 500 1.125rem / 1.375rem var(--font-sans); --font-title-h4: normal 500 1rem / 1.25rem var(--font-sans); --font-title-h5: normal 500 0.875rem / 1.125rem var(--font-sans); --font-title-h6: normal 500 0.75rem / 1rem var(--font-sans); --font-body: 0.875rem; --font-small: 0.75rem; --font-code: 0.875rem; --font-subheading: 0.75rem; --font-label: 0.625rem; --font-button-b1: normal bold 1.125rem / 1.375rem var(--font-sans); --font-button-b2: normal bold 1rem / 1.25rem var(--font-sans); --font-button-b3: normal bold 0.875rem / 1.125rem var(--font-sans); --font-button-b4: normal bold 0.75rem / 0.875rem var(--font-sans); --color-gradient-orangeyellow: linear-gradient(89.94deg, #ec0623 0%, #ff8717 100%); --color-gradient-bluepink: linear-gradient(89.94deg, #51b9ff 0%, #7785ff 52.6%, #b279ff 73.96%, #ff81ed 100%); --boxshadow-modal: 0px 2px 15px rgba(26, 26, 27, 0.3); --boxshadow-navigation: 0px 4px 14px rgba(0, 0, 0, 0.1); --boxshadow-tooltip: 0 1px 4px rgba(0, 0, 0, 0.15), 0 4px 4px rgba(0, 0, 0, 0.15); color-scheme: light; } :root dialog::backdrop, .theme-light dialog::backdrop { --color-dialog-background: #00000080; } @media (prefers-color-scheme: dark) { :root:not(.theme-light) { --color-primary-visited: #c58af9; --color-primary-background: #006cbf; --color-primary-background-hover: #24a0ed; --color-tone-1: #d7dadc; --color-tone-2: #818384; --color-tone-3: #565758; --color-tone-4: #3a3a3c; --color-tone-5: #272729; --color-tone-6: #1a1a1b; --color-tone-7: #121213; --color-identity-coins: #ffe600; --color-ui-canvas: #050505; --color-ui-modalbackground: var(--color-tone-6); --color-opacity-50: #d7dadc80; --color-scrim: #0000004d; --elevation-xs: 0 0.0625rem 0.125rem 0 #000000ab; --elevation-sm: 0 0.0625rem 0.25rem 0 #00000054, 0 0.25rem 0.25rem 0 #00000054; --elevation-md: 0 0.25rem 0.5rem 0 #00000033, 0 0.375rem 0.75rem 0 #00000080; --elevation-lg: 0 0.75rem 0.75rem 0 #00000033, 0 1rem 2rem 0 #00000080; --boxshadow-modal: 0px 2px 15px rgba(0, 0, 0, 0.3); --boxshadow-tooltip: 0 1px 4px rgba(0, 0, 0, 0.33), 0 4px 4px rgba(0, 0, 0, 0.33); color-scheme: dark; } :root:not(.theme-light) dialog::backdrop { --color-dialog-background: #d7dadc80; } } .theme-dark { --color-primary-visited: #c58af9; --color-primary-background: #006cbf; --color-primary-background-hover: #24a0ed; --color-tone-1: #d7dadc; --color-tone-2: #818384; --color-tone-3: #565758; --color-tone-4: #3a3a3c; --color-tone-5: #272729; --color-tone-6: #1a1a1b; --color-tone-7: #121213; --color-identity-coins: #ffe600; --color-ui-canvas: #050505; --color-ui-modalbackground: var(--color-tone-6); --color-opacity-50: #d7dadc80; --color-scrim: #0000004d; --elevation-xs: 0 0.0625rem 0.125rem 0 #000000ab; --elevation-sm: 0 0.0625rem 0.25rem 0 #00000054, 0 0.25rem 0.25rem 0 #00000054; --elevation-md: 0 0.25rem 0.5rem 0 #00000033, 0 0.375rem 0.75rem 0 #00000080; --elevation-lg: 0 0.75rem 0.75rem 0 #00000033, 0 1rem 2rem 0 #00000080; --boxshadow-modal: 0px 2px 15px rgba(0, 0, 0, 0.3); --boxshadow-tooltip: 0 1px 4px rgba(0, 0, 0, 0.33), 0 4px 4px rgba(0, 0, 0, 0.33); color-scheme: dark; } .theme-dark dialog::backdrop { --color-dialog-background: #d7dadc80; } .theme-beta, .theme-light.theme-beta { --spacer-a-px: 0.125rem; --spacer-button-lg-px: var(--spacer-md); --spacer-button-md-px: var(--spacer-md); --spacer-button-sm-px: var(--spacer-sm); --spacer-input-padding-left: var(--spacer-md); --spacer-input-padding-top: var(--spacer-2xs); --spacer-label-default: var(--spacer-md); --spacer-switch-input-active-pl: var(--spacer-xs); --size-banner-height: var(--size-rem40); --size-button-lg-h: var(--size-2xl); --size-button-md-h: 2.5rem; --size-button-sm-h: var(--size-xl); --size-button-xs-h: var(--size-lg); --size-switch-input-h: var(--size-xl); --size-switch-input-w: var(--size-2xl); --line-a-focus: var(--line-md); --line-a-outline-moz: 0px; --line-a-outline-wb: 0px; --line-button-lg-border: var(--line-sm); --line-button-md-border: var(--line-sm); --line-button-sm-border: var(--line-sm); --line-button-xs-border: var(--line-sm); --line-button-border-activated: var(--line-lg); --line-input-border: var(--line-lg); --radius-md: 1.25rem; --radius-accordion-size: 0px; --font-10: normal undefined null / null var(--font-sans); --font-12: normal undefined null / null var(--font-sans); --font-14: normal undefined null / null var(--font-sans); --font-16: normal undefined null / null var(--font-sans); --font-18: normal undefined null / null var(--font-sans); --font-20: normal undefined null / null var(--font-sans); --font-24: normal undefined null / null var(--font-sans); --font-32: normal undefined null / null var(--font-sans); --font-48: normal undefined null / null var(--font-sans); --font-64: normal undefined null / null var(--font-sans); --font-title-h0: var(--font-64); --font-title-h1: var(--font-32); --font-title-h2: var(--font-24); --font-title-h3: var(--font-18); --font-title-h4: var(--font-16); --font-title-h5: var(--font-14); --font-title-h6: var(--font-12); --font-14-20-regular: normal 400 0.875rem / 1.25rem var(--font-sans); --font-14-20-semibold: normal 600 0.875rem / 1.25rem var(--font-sans); --font-16-20-regular: normal 400 1rem / 1.25rem var(--font-sans); --font-12-16-regular: normal 400 0.75rem / 1rem var(--font-sans); --font-12-16-semibold: normal 600 0.75rem / 1rem var(--font-sans); --font-button-lg: var(--font-14-20-semibold); --font-button-md: var(--font-14-20-semibold); --font-button-sm: var(--font-12-16-semibold); --font-label-default: var(--font-12-16-regular); --misc-accordion-border: 0; --misc-accordion-open-list-style-type: none; --misc-accordion-closed-list-style-type: none; --misc-divider-margin: 0; --misc-label-text-transform: capitalize; --misc-label-letter-spacing: initial; --blur-sm: 0.25rem; --blur-normal: 0.5rem; --blur-md: 0.75rem; --blur-lg: 1rem; --blur-xl: 1.5rem; --blur-2xl: 2.5rem; --blur-3xl: 4rem; --color-action-downvote: #6A5CFF; --color-action-upvote: #D93900; --color-ai-background-weaker: #E7FDF5; --color-ai-plain: #006C56; --color-ai-plain-hover: #015140; --color-alert-caution: #977000; --color-avatar-gradient: linear-gradient(0deg, #97AFBCff, #ffffffff 75%); --color-avatar-media-gradient: linear-gradient(0deg, #00000099, #181C1Fff 75%); --color-brand-background: #D93900; --color-brand-background-hover: #AE2C00; --color-brand-gradient-active: linear-gradient(180deg, #cd3700ff, #db3b00ff 68%, #D93900ff 100%); --color-brand-gradient-active-highlight: linear-gradient(83deg, #db3f0000 80%, #D93900ff 100%); --color-brand-gradient-default: linear-gradient(180deg, #D93900ff, #db3b00ff 30%, #AE2C00ff 100%); --color-brand-gradient-default-highlight: linear-gradient(258deg, #db3f0000 80%, #D93900ff 100%); --color-brand-gradient-hover: linear-gradient(180deg, #e23d00ff 15%, #cb3600ff 49%, #b43000ff 100%); --color-brand-gradient-hover-highlight: linear-gradient(323deg, #cb360000 65%, #cb3600ff 100%); --color-brand-onBackground: #FFFFFF; --color-category-live: #D93900; --color-category-nsfw: #DE019F; --color-category-spoiler: var(--color-tone-1); --color-caution-background: #FFBF0B; --color-caution-background-hover: #D8A100; --color-caution-onBackground: #000000; --color-caution-plain: #785800; --color-caution-plain-hover: #5B4200; --color-danger-background: #EB001F; --color-danger-background-disabled: #FDB3A4; --color-danger-background-hover: #BC0117; --color-danger-background-weaker: #FBDBD4; --color-danger-content: #BC0117; --color-danger-content-default: #ffffff; --color-danger-content-hover: #90000F; --color-danger-onBackground: #FFFFFF; --color-danger-plain: #BC0117; --color-danger-plain-hover: #90000F; --color-downvote-background: #6A5CFF; --color-downvote-background-disabled: rgba(106, 92, 255, 0.3); --color-downvote-background-hover: #523DFF; --color-downvote-content: #523DFF; --color-downvote-content-weak: #6A5CFF; --color-downvote-disabled: #523DFF4d; --color-downvote-onBackground: #FFFFFF; --color-downvote-onStrongScrim: #B29FFF; --color-downvote-onStrongScrim-disabled: rgba(178, 159, 255, 0.3); --color-downvote-onStrongScrim-weaker: #9580FF; --color-downvote-plain: #523DFF; --color-downvote-plain-disabled: rgba(82, 61, 255, 0.3); --color-downvote-plain-weaker: #6A5CFF; --color-elevation-large1: #0000003F; --color-elevation-large2: #00000026; --color-elevation-medium1: #0000003F; --color-elevation-medium2: #00000019; --color-elevation-small: #00000026; --color-elevation-xsmall: #0000003F; --color-favorite: #977000; --color-global-admin: #D93900; --color-global-alienblue: #1870F4; --color-global-black: #000000; --color-global-brand-orangered: #FF4500; --color-global-darkblue: #2A3236; --color-global-focus: #029DD5; --color-global-gold: #B78800; --color-global-moderator: #008A10; --color-global-nsfw: #DE019F; --color-global-offline: #667780; --color-global-online: #00C61C; --color-global-orangered: #FF4500; --color-global-stars: #977000; --color-global-white: #FFFFFF; --color-gradient-media: linear-gradient(180deg, #00000000, #0000008a 60%, #00000099 100%); --color-gradient-media-strong: linear-gradient(180deg, #00000000, #000000cc 60%, #000000e6 100%); --color-identity-admin: #D93900; --color-identity-coins: #B78800; --color-identity-moderator: #008A10; --color-identity-self: #01876D; --color-interactive-background-disabled: #0000000C; --color-interactive-content-disabled: #0000003F; --color-interactive-focused: #007FAE; --color-interactive-pressed: #00000026; --color-inverted-interactive-background-disabled: #FFFFFF0C; --color-inverted-interactive-content-disabled: #FFFFFF3F; --color-inverted-interactive-pressed: #FFFFFF26; --color-inverted-neutral-background: #0E1113; --color-inverted-neutral-background-hover: #181C1F; --color-inverted-neutral-border: #FFFFFF33; --color-inverted-neutral-content: #B7CAD4; --color-inverted-neutral-content-strong: #EEF1F3; --color-inverted-secondary-background: #2A3236; --color-inverted-secondary-background-hover: #333D42; --color-inverted-secondary-background-selected: #3D494E; --color-inverted-secondary-onBackground: #FFFFFF; --color-inverted-secondary-plain: #DBE4E9; --color-inverted-secondary-plain-hover: #FFFFFF; --color-media-background: rgba(0, 0, 0, 0.6); --color-media-background-hover: rgba(0, 0, 0, 0.8); --color-media-background-selected: rgba(0, 0, 0, 0.8); --color-media-border-selected: #FFFFFF; --color-media-border-weak: #FFFFFF19; --color-media-onBackground: #FFFFFF; --color-media-onBackground-disabled: #FFFFFF3F; --color-media-onBackground-weak: #E5EBEE; --color-media-onbackground: #ffffff; --color-media-onbackground-disabled: #ffffff40; --color-media-onbackground-weak: #B7CAD4; --color-neutral-background: #FFFFFF; --color-neutral-background-container: #F6F8F9; --color-neutral-background-container-hover: #EEF1F3; --color-neutral-background-container-strong: #EEF1F3; --color-neutral-background-container-strong-hover: #E5EBEE; --color-neutral-background-gilded: #FFF9E0; --color-neutral-background-gilded-hover: #FFF3C0; --color-neutral-background-hover: #F6F8F9; --color-neutral-background-medium: #F8F8F8; --color-neutral-background-pinned: #FFFFFF; --color-neutral-background-selected: #E5EBEE; --color-neutral-background-strong: #FFFFFF; --color-neutral-background-strong-hover: #F6F8F9; --color-neutral-background-weak: #F6F8F9; --color-neutral-background-weak-hover: #EEF1F3; --color-neutral-border: #00000033; --color-neutral-border-medium: #0000007F; --color-neutral-border-strong: #181C1F; --color-neutral-border-weak: #00000019; --color-neutral-content: #333D42; --color-neutral-content-disabled: #D6D6D6; --color-neutral-content-strong: #181C1F; --color-neutral-content-weak: #5C6C74; --color-offline: #767676; --color-online: #01A816; --color-opacity-08: #13131314; --color-opacity-50: #00000080; --color-opacity-highlight: linear-gradient(#0A2F6C1a, var(--color-tone-6)); --color-pizzaRed: #ef5350; --color-primary: #115BCA; --color-primary-background: #0A449B; --color-primary-background-hover: #0A2F6C; --color-primary-background-selected: #0A1A3F; --color-primary-border: #0A449B; --color-primary-border-hover: #0A2F6C; --color-primary-hover: #0A449B; --color-primary-onBackground: #FFFFFF; --color-primary-onBackground-selected: #FFFFFF; --color-primary-plain: #0A449B; --color-primary-plain-hover: #0A2F6C; --color-primary-plain-visited: #7600A3; --color-primary-visited: #9B00D4; --color-scrim: #00000099; --color-scrim-background: #00000099; --color-scrim-background-strong: #000000CC; --color-scrim-gradient: linear-gradient(180deg, #00000000, #0000008a 60%, #00000099 100%); --color-scrim-strong: #000000cc; --color-secondary: #21272A; --color-secondary-background: #E5EBEE; --color-secondary-background-hover: #DBE4E9; --color-secondary-background-selected: #C9D7DE; --color-secondary-hover: #000000; --color-secondary-onBackground: #000000; --color-secondary-plain: #181C1F; --color-secondary-plain-hover: #000000; --color-secondary-plain-weak: #5C6C74; --color-secondary-weak: #576F76; --color-success-background: #008A10; --color-success-background-hover: #016E0B; --color-success-content: #016E0B; --color-success-hover: #005306; --color-success-onBackground: #FFFFFF; --color-success-plain: #016E0B; --color-success-plain-hover: #005306; --color-tone-1: #131313; --color-tone-2: #434343; --color-tone-3: #ACACAC; --color-tone-4: #E4E4E4; --color-tone-5: #F2F2F2; --color-tone-6: #F8F8F8; --color-tone-7: #ffffff; --color-transparent-background-hover: #7487911a; --color-ui-canvas: var(--color-tone-5); --color-ui-modalbackground: var(--color-neutral-background-strong); --color-upvote-background: #D93900; --color-upvote-background-disabled: rgba(217, 57, 0, 0.3); --color-upvote-background-hover: #AE2C00; --color-upvote-content: #AE2C00; --color-upvote-content-weak: var(--color-global-brand-orangered); --color-upvote-disabled: #AE2C004d; --color-upvote-onBackground: #FFFFFF; --color-upvote-onStrongScrim: #FF895D; --color-upvote-onStrongScrim-disabled: rgba(255, 137, 93, 0.3); --color-upvote-onStrongScrim-weaker: #FF4500; --color-upvote-plain: #AE2C00; --color-upvote-plain-disabled: rgba(174, 44, 0, 0.3); --color-upvote-plain-weaker: #FF4500; --color-warning-background: #B78800; --color-warning-background-hover: #977000; --color-warning-content: #785800; --color-warning-content-hover: #5B4200; --color-warning-onBackground: #000000; --color-a-default: var(--color-primary); --color-a-hover: var(--color-primary-hover); --color-a-visited: var(--color-primary-visited); --color-banner-plain: var(--color-neutral-background-strong); --color-banner-plain-inverted: var(--color-neutral-content-strong); --color-banner-error: var(--color-danger-background); --color-banner-caution: var(--color-warning-background); --color-banner-success: var(--color-success-background); --color-banner-brand: var(--color-brand-background); --color-banner-plain-text: var(--color-neutral-content); --color-banner-plain-inverted-text: var(--color-neutral-background-weak); --color-banner-error-text: var(--color-danger-onBackground); --color-banner-caution-text: var(--color-warning-onBackground); --color-banner-caution-hover: var(--color-warning-background-hover); --color-banner-success-text: var(--color-success-onBackground); --color-banner-brand-text: var(--color-brand-onBackground); --color-button-overlay-focus: transparent; --color-button-overlay-active: transparent; --color-button-border-width: tomato; --color-button-border-width-activated: tomato; --color-button-primary-background-hover: var(--color-primary-background-hover); --color-button-primary-background-activated: var(--color-primary-background-selected); --color-button-primary-background-disabled: var(--color-interactive-background-disabled); --color-button-primary-border-hover: var(--color-primary-background); --color-button-primary-border-active: var(--color-primary-background-hover); --color-button-primary-text-disabled: var(--color-interactive-content-disabled); --color-button-primary-text-activated: var(--color-primary-onBackground-selected); --color-button-secondary-background: var(--color-secondary-background); --color-button-secondary-background-focus: var(--color-secondary-background); --color-button-secondary-background-hover: var(--color-secondary-background-hover); --color-button-secondary-background-disabled: var(--color-interactive-background-disabled); --color-button-secondary-background-activated: var(--color-secondary-background-selected); --color-button-secondary-border: transparent; --color-button-secondary-border-hover: var(--color-secondary-background); --color-button-secondary-border-active: var(--color-secondary-background-hover); --color-button-secondary-border-activated: transparent; --color-button-secondary-border-disabled: transparent; --color-button-secondary-text: var(--color-secondary-onBackground); --color-button-secondary-text-disabled: var(--color-interactive-content-disabled); --color-button-secondary-text-activated: var(--color-secondary-onBackground); --color-button-tertiary-background: transparent; --color-button-tertiary-background-focus: transparent; --color-button-tertiary-background-hover: var(--color-secondary-background-hover); --color-button-tertiary-background-disabled: transparent; --color-button-tertiary-background-activated: var(--color-neutral-content); --color-button-tertiary-border-hover: var(--color-secondary-background); --color-button-tertiary-border-active: var(--color-secondary-background-hover); --color-button-tertiary-text: var(--color-neutral-content-strong); --color-button-tertiary-text-disabled: var(--color-neutral-content-disabled); --color-button-tertiary-text-activated: var(--color-neutral-background); --color-button-plain-background-hover: var(--color-secondary-background-hover); --color-button-plain-background-disabled: transparent; --color-button-plain-background-activated: var(--color-secondary-background-selected); --color-button-plain-border-hover: var(--color-secondary-background); --color-button-plain-border-active: var(--color-secondary-background-hover); --color-button-plain-text: var(--color-secondary-plain); --color-button-plain-text-hover: var(--color-secondary-plain-hover); --color-button-plain-text-disabled: var(--color-interactive-content-disabled); --color-button-plain-text-activated: var(--color-secondary-onBackground); --color-button-primary-border-activated: var(--color-primary-background); --color-button-plain-text-weak: var(--color-secondary-plain-weak); --color-button-plain-inverted-background-activated: var(--color-neutral-content); --color-button-plain-inverted-text-activated: var(--color-neutral-background); --color-button-media-border-color-activated: var(--color-media-border-selected); --color-button-favorite-text: var(--color-favorite); --color-button-caution-background: var(--color-caution-background); --color-button-caution-background-hover: var(--color-caution-background-hover); --color-button-caution-background-disabled: var(--color-interactive-background-disabled); --color-button-caution-text: var(--color-caution-onBackground); --color-divider-default: var(--color-neutral-border); --color-input-secondary: var(--color-secondary-background); --color-input-secondary-hover: var(--color-secondary-background-hover); --color-input-border: transparent; --color-input-bordered: transparent; --color-input-bordered-hover: var(--color-neutral-background-hover); --color-input-secondary-text: var(--color-secondary-onBackground); --color-input-bordered-text: var(--color-secondary-plain); --color-input-helper-text: var(--color-neutral-content-weak); --color-input-pressed: var(--color-interactive-pressed); --color-input-radio: var(--color-secondary-plain-weak); --color-input-radio-hover: var(--color-neutral-content-strong); --color-label-default: var(--color-neutral-content-weak); --color-shimmer-background: #00000008; --color-shimmer-gradient-overlay: linear-gradient(to right, #00000000, #00000005 20%, #0000000f 50%, #00000008 70%, #00000000 100%); --color-switch-input-background-pressed-scrim: var(--color-interactive-pressed); --color-switch-input-background-handle: var(--color-global-white); --color-switch-input-background-handle-disabled: var(--color-secondary-background); --color-switch-input-background-default: var(--color-secondary-background); --color-switch-input-background-default-hover: var(--color-secondary-background-hover); --color-switch-input-background-default-disabled: var(--color-interactive-background-disabled); --color-switch-input-background-checked: var(--color-primary-background); --color-switch-input-background-checked-hover: var(--color-primary-background-hover); --color-switch-input-background-checked-disabled: var(--color-interactive-content-disabled); --color-tooltip-bg-neutral: var(--color-neutral-background-strong); --color-tooltip-text-neutral: var(--color-neutral-content); --color-tooltip-bg-inverted: var(--color-neutral-content); --color-tooltip-text-inverted: var(--color-neutral-background); --color-tooltip-bg-primary: var(--color-primary-background); --color-tooltip-text-primary: var(--color-primary-onBackground); --elevation-sm-inset: inset 0 0.0625rem 0.125rem 0 #00000021; --elevation-button-focus: var(--elevation-focus-ring); --elevation-switch-input-default-inset: var(--elevation-sm-inset); } @media (prefers-color-scheme: dark) { :root:not(.theme-light) .theme-beta, :root:not(.theme-light).theme-beta { --color-ai-background-weaker: #00382B; --color-ai-plain: #01A484; --color-ai-plain-hover: #00C29D; --color-avatar-gradient: linear-gradient(0deg, #48545Bff, #181C1Fff 75%); --color-brand-background: #D93900; --color-brand-background-hover: #AE2C00; --color-brand-onBackground: #FFFFFF; --color-caution-background: #D8A100; --color-caution-background-hover: #FFBF0B; --color-caution-onBackground: #000000; --color-caution-plain: #FFBF0B; --color-caution-plain-hover: #FFE284; --color-danger-background: #BC0117; --color-danger-background-disabled: #340F05; --color-danger-background-hover: #EB001F; --color-danger-background-weaker: #650405; --color-danger-content: #FF4F40; --color-danger-content-hover: #FF8773; --color-danger-onBackground: #FFFFFF; --color-danger-plain: #FF8773; --color-danger-plain-hover: #FDB3A4; --color-downvote-background: #6A5CFF; --color-downvote-background-disabled: rgba(106, 92, 255, 0.3); --color-downvote-background-hover: #523DFF; --color-downvote-content: #9580FF; --color-downvote-content-weak: #6A5CFF; --color-downvote-disabled: #9580FF4d; --color-downvote-onBackground: #FFFFFF; --color-downvote-onStrongScrim: #B29FFF; --color-downvote-onStrongScrim-disabled: rgba(178, 159, 255, 0.3); --color-downvote-onStrongScrim-weaker: #9580FF; --color-downvote-plain: #9580FF; --color-downvote-plain-disabled: rgba(149, 128, 255, 0.3); --color-downvote-plain-weaker: #6A5CFF; --color-elevation-large1: #0000007F; --color-elevation-large2: #00000033; --color-elevation-medium1: #0000007F; --color-elevation-medium2: #00000033; --color-elevation-small: #00000054; --color-elevation-xsmall: #000000AA; --color-favorite: #B78800; --color-global-admin: #D93900; --color-global-black: #000000; --color-global-brand-orangered: #FF4500; --color-global-focus: #007FAE; --color-global-gold: #D8A100; --color-global-moderator: #008A10; --color-global-nsfw: #DE019F; --color-global-offline: #667780; --color-global-online: #00C61C; --color-global-orangered: #FF4500; --color-global-stars: #D8A100; --color-global-white: #FFFFFF; --color-interactive-background-disabled: #FFFFFF0C; --color-interactive-content-disabled: #FFFFFF3F; --color-interactive-focused: #007FAE; --color-interactive-pressed: #FFFFFF26; --color-inverted-interactive-background-disabled: #0000000C; --color-inverted-interactive-content-disabled: #0000003F; --color-inverted-interactive-pressed: #00000026; --color-inverted-neutral-background: #FFFFFF; --color-inverted-neutral-background-hover: #F6F8F9; --color-inverted-neutral-border: #00000033; --color-inverted-neutral-content: #333D42; --color-inverted-neutral-content-strong: #181C1F; --color-inverted-secondary-background: #E5EBEE; --color-inverted-secondary-background-hover: #DBE4E9; --color-inverted-secondary-background-selected: #C9D7DE; --color-inverted-secondary-onBackground: #000000; --color-inverted-secondary-plain: #181C1F; --color-inverted-secondary-plain-hover: #000000; --color-media-background: rgba(0, 0, 0, 0.6); --color-media-background-hover: rgba(0, 0, 0, 0.8); --color-media-background-selected: rgba(0, 0, 0, 0.8); --color-media-border-selected: #FFFFFF; --color-media-border-weak: #FFFFFF19; --color-media-onBackground: #FFFFFF; --color-media-onBackground-disabled: #FFFFFF3F; --color-media-onBackground-weak: #E5EBEE; --color-neutral-background: #0E1113; --color-neutral-background-container: #181C1F; --color-neutral-background-container-hover: #21272A; --color-neutral-background-container-strong: #21272A; --color-neutral-background-container-strong-hover: #2A3236; --color-neutral-background-gilded: #181C1F; --color-neutral-background-gilded-hover: #21272A; --color-neutral-background-hover: #181C1F; --color-neutral-background-medium: #131313; --color-neutral-background-pinned: #0E1113; --color-neutral-background-selected: #2A3236; --color-neutral-background-strong: #181C1F; --color-neutral-background-strong-hover: #21272A; --color-neutral-background-weak: #000000; --color-neutral-background-weak-hover: #0E1113; --color-neutral-border: #FFFFFF33; --color-neutral-border-medium: #FFFFFF7F; --color-neutral-border-strong: #F6F8F9; --color-neutral-border-weak: #FFFFFF19; --color-neutral-content: #B7CAD4; --color-neutral-content-disabled: #303030; --color-neutral-content-strong: #EEF1F3; --color-neutral-content-weak: #8BA2AD; --color-offline: #767676; --color-online: #01A816; --color-opacity-50: #F2F2F280; --color-pizzaRed: #c62828; --color-primary: #648EFC; --color-primary-background: #115BCA; --color-primary-background-hover: #1870F4; --color-primary-background-selected: #648EFC; --color-primary-border: #648EFC; --color-primary-border-hover: #90A9FD; --color-primary-hover: #90A9FD; --color-primary-onBackground: #FFFFFF; --color-primary-onBackground-selected: #000000; --color-primary-plain: #648EFC; --color-primary-plain-hover: #90A9FD; --color-primary-plain-visited: #CF5FFF; --color-primary-visited: #CF5FFF; --color-scrim-background: #00000099; --color-scrim-background-strong: #000000CC; --color-secondary: #DBE4E9; --color-secondary-background: #2A3236; --color-secondary-background-hover: #333D42; --color-secondary-background-selected: #3D494E; --color-secondary-hover: #ffffff; --color-secondary-onBackground: #FFFFFF; --color-secondary-plain: #DBE4E9; --color-secondary-plain-hover: #FFFFFF; --color-secondary-plain-weak: #8BA2AD; --color-secondary-weak: #748791; --color-success-background: #016E0B; --color-success-background-hover: #008A10; --color-success-content: #01A816; --color-success-hover: #00C61C; --color-success-onBackground: #FFFFFF; --color-success-plain: #00C61C; --color-success-plain-hover: #58E15B; --color-tone-1: #F2F2F2; --color-tone-2: #ACACAC; --color-tone-3: #434343; --color-tone-4: #303030; --color-tone-5: #1E1E1E; --color-tone-6: #131313; --color-tone-7: #080808; --color-transparent-background-hover: #6677801a; --color-ui-canvas: #080808; --color-ui-modalbackground: var(--color-neutral-background-strong); --color-upvote-background: #D93900; --color-upvote-background-disabled: rgba(217, 57, 0, 0.3); --color-upvote-background-hover: #AE2C00; --color-upvote-content: #FF4500; --color-upvote-content-weak: var(--color-global-brand-orangered); --color-upvote-disabled: #FF45004d; --color-upvote-onBackground: #FFFFFF; --color-upvote-onStrongScrim: #FF895D; --color-upvote-onStrongScrim-disabled: rgba(255, 137, 93, 0.3); --color-upvote-onStrongScrim-weaker: #FF4500; --color-upvote-plain: #FF895D; --color-upvote-plain-disabled: rgba(255, 137, 93, 0.3); --color-upvote-plain-weaker: #FF4500; --color-warning-background: #B78800; --color-warning-background-hover: #D8A100; --color-warning-content: #B78800; --color-warning-content-hover: #D8A100; --color-warning-onBackground: #000000; --color-button-primary-border-activated: transparent; --color-button-plain-inverted-activated-text: var(--color-neutral-background); --color-input-radio-hover: var(--color-secondary-plain); --color-shimmer-background: #ffffff08; --color-shimmer-gradient-overlay: linear-gradient(to right, #ffffff00, #ffffff05 20%, #ffffff0f 50%, #ffffff08 70%, #ffffff00 100%); } } .theme-dark .theme-beta, .theme-dark.theme-beta { --color-ai-background-weaker: #00382B; --color-ai-plain: #01A484; --color-ai-plain-hover: #00C29D; --color-avatar-gradient: linear-gradient(0deg, #48545Bff, #181C1Fff 75%); --color-brand-background: #D93900; --color-brand-background-hover: #AE2C00; --color-brand-onBackground: #FFFFFF; --color-caution-background: #D8A100; --color-caution-background-hover: #FFBF0B; --color-caution-onBackground: #000000; --color-caution-plain: #FFBF0B; --color-caution-plain-hover: #FFE284; --color-danger-background: #BC0117; --color-danger-background-disabled: #340F05; --color-danger-background-hover: #EB001F; --color-danger-background-weaker: #650405; --color-danger-content: #FF4F40; --color-danger-content-hover: #FF8773; --color-danger-onBackground: #FFFFFF; --color-danger-plain: #FF8773; --color-danger-plain-hover: #FDB3A4; --color-downvote-background: #6A5CFF; --color-downvote-background-disabled: rgba(106, 92, 255, 0.3); --color-downvote-background-hover: #523DFF; --color-downvote-content: #9580FF; --color-downvote-content-weak: #6A5CFF; --color-downvote-disabled: #9580FF4d; --color-downvote-onBackground: #FFFFFF; --color-downvote-onStrongScrim: #B29FFF; --color-downvote-onStrongScrim-disabled: rgba(178, 159, 255, 0.3); --color-downvote-onStrongScrim-weaker: #9580FF; --color-downvote-plain: #9580FF; --color-downvote-plain-disabled: rgba(149, 128, 255, 0.3); --color-downvote-plain-weaker: #6A5CFF; --color-elevation-large1: #0000007F; --color-elevation-large2: #00000033; --color-elevation-medium1: #0000007F; --color-elevation-medium2: #00000033; --color-elevation-small: #00000054; --color-elevation-xsmall: #000000AA; --color-favorite: #B78800; --color-global-admin: #D93900; --color-global-black: #000000; --color-global-brand-orangered: #FF4500; --color-global-focus: #007FAE; --color-global-gold: #D8A100; --color-global-moderator: #008A10; --color-global-nsfw: #DE019F; --color-global-offline: #667780; --color-global-online: #00C61C; --color-global-orangered: #FF4500; --color-global-stars: #D8A100; --color-global-white: #FFFFFF; --color-interactive-background-disabled: #FFFFFF0C; --color-interactive-content-disabled: #FFFFFF3F; --color-interactive-focused: #007FAE; --color-interactive-pressed: #FFFFFF26; --color-inverted-interactive-background-disabled: #0000000C; --color-inverted-interactive-content-disabled: #0000003F; --color-inverted-interactive-pressed: #00000026; --color-inverted-neutral-background: #FFFFFF; --color-inverted-neutral-background-hover: #F6F8F9; --color-inverted-neutral-border: #00000033; --color-inverted-neutral-content: #333D42; --color-inverted-neutral-content-strong: #181C1F; --color-inverted-secondary-background: #E5EBEE; --color-inverted-secondary-background-hover: #DBE4E9; --color-inverted-secondary-background-selected: #C9D7DE; --color-inverted-secondary-onBackground: #000000; --color-inverted-secondary-plain: #181C1F; --color-inverted-secondary-plain-hover: #000000; --color-media-background: rgba(0, 0, 0, 0.6); --color-media-background-hover: rgba(0, 0, 0, 0.8); --color-media-background-selected: rgba(0, 0, 0, 0.8); --color-media-border-selected: #FFFFFF; --color-media-border-weak: #FFFFFF19; --color-media-onBackground: #FFFFFF; --color-media-onBackground-disabled: #FFFFFF3F; --color-media-onBackground-weak: #E5EBEE; --color-neutral-background: #0E1113; --color-neutral-background-container: #181C1F; --color-neutral-background-container-hover: #21272A; --color-neutral-background-container-strong: #21272A; --color-neutral-background-container-strong-hover: #2A3236; --color-neutral-background-gilded: #181C1F; --color-neutral-background-gilded-hover: #21272A; --color-neutral-background-hover: #181C1F; --color-neutral-background-medium: #131313; --color-neutral-background-pinned: #0E1113; --color-neutral-background-selected: #2A3236; --color-neutral-background-strong: #181C1F; --color-neutral-background-strong-hover: #21272A; --color-neutral-background-weak: #000000; --color-neutral-background-weak-hover: #0E1113; --color-neutral-border: #FFFFFF33; --color-neutral-border-medium: #FFFFFF7F; --color-neutral-border-strong: #F6F8F9; --color-neutral-border-weak: #FFFFFF19; --color-neutral-content: #B7CAD4; --color-neutral-content-disabled: #303030; --color-neutral-content-strong: #EEF1F3; --color-neutral-content-weak: #8BA2AD; --color-offline: #767676; --color-online: #01A816; --color-opacity-50: #F2F2F280; --color-pizzaRed: #c62828; --color-primary: #648EFC; --color-primary-background: #115BCA; --color-primary-background-hover: #1870F4; --color-primary-background-selected: #648EFC; --color-primary-border: #648EFC; --color-primary-border-hover: #90A9FD; --color-primary-hover: #90A9FD; --color-primary-onBackground: #FFFFFF; --color-primary-onBackground-selected: #000000; --color-primary-plain: #648EFC; --color-primary-plain-hover: #90A9FD; --color-primary-plain-visited: #CF5FFF; --color-primary-visited: #CF5FFF; --color-scrim-background: #00000099; --color-scrim-background-strong: #000000CC; --color-secondary: #DBE4E9; --color-secondary-background: #2A3236; --color-secondary-background-hover: #333D42; --color-secondary-background-selected: #3D494E; --color-secondary-hover: #ffffff; --color-secondary-onBackground: #FFFFFF; --color-secondary-plain: #DBE4E9; --color-secondary-plain-hover: #FFFFFF; --color-secondary-plain-weak: #8BA2AD; --color-secondary-weak: #748791; --color-success-background: #016E0B; --color-success-background-hover: #008A10; --color-success-content: #01A816; --color-success-hover: #00C61C; --color-success-onBackground: #FFFFFF; --color-success-plain: #00C61C; --color-success-plain-hover: #58E15B; --color-tone-1: #F2F2F2; --color-tone-2: #ACACAC; --color-tone-3: #434343; --color-tone-4: #303030; --color-tone-5: #1E1E1E; --color-tone-6: #131313; --color-tone-7: #080808; --color-transparent-background-hover: #6677801a; --color-ui-canvas: #080808; --color-ui-modalbackground: var(--color-neutral-background-strong); --color-upvote-background: #D93900; --color-upvote-background-disabled: rgba(217, 57, 0, 0.3); --color-upvote-background-hover: #AE2C00; --color-upvote-content: #FF4500; --color-upvote-content-weak: var(--color-global-brand-orangered); --color-upvote-disabled: #FF45004d; --color-upvote-onBackground: #FFFFFF; --color-upvote-onStrongScrim: #FF895D; --color-upvote-onStrongScrim-disabled: rgba(255, 137, 93, 0.3); --color-upvote-onStrongScrim-weaker: #FF4500; --color-upvote-plain: #FF895D; --color-upvote-plain-disabled: rgba(255, 137, 93, 0.3); --color-upvote-plain-weaker: #FF4500; --color-warning-background: #B78800; --color-warning-background-hover: #D8A100; --color-warning-content: #B78800; --color-warning-content-hover: #D8A100; --color-warning-onBackground: #000000; --color-button-primary-border-activated: transparent; --color-button-plain-inverted-activated-text: var(--color-neutral-background); --color-input-radio-hover: var(--color-secondary-plain); --color-shimmer-background: #ffffff08; --color-shimmer-gradient-overlay: linear-gradient(to right, #ffffff00, #ffffff05 20%, #ffffff0f 50%, #ffffff08 70%, #ffffff00 100%); } .theme-rpl, .theme-light.theme-rpl { --spacer-a-px: 0.125rem; --spacer-button-lg-px: var(--spacer-md); --spacer-button-md-px: var(--spacer-md); --spacer-button-sm-px: var(--spacer-sm); --spacer-input-padding-left: var(--spacer-md); --spacer-input-padding-top: var(--spacer-2xs); --spacer-label-default: var(--spacer-md); --spacer-switch-input-active-pl: var(--spacer-xs); --size-banner-height: var(--size-rem40); --size-button-lg-h: var(--size-2xl); --size-button-md-h: 2.5rem; --size-button-sm-h: var(--size-xl); --size-button-xs-h: var(--size-lg); --size-switch-input-h: var(--size-xl); --size-switch-input-w: var(--size-2xl); --line-a-focus: var(--line-md); --line-a-outline-moz: 0px; --line-a-outline-wb: 0px; --line-button-lg-border: var(--line-sm); --line-button-md-border: var(--line-sm); --line-button-sm-border: var(--line-sm); --line-button-xs-border: var(--line-sm); --line-button-border-activated: var(--line-lg); --line-input-border: var(--line-lg); --radius-md: 1.25rem; --radius-accordion-size: 0px; --font-10: normal undefined null / null var(--font-sans); --font-12: normal undefined null / null var(--font-sans); --font-14: normal undefined null / null var(--font-sans); --font-16: normal undefined null / null var(--font-sans); --font-18: normal undefined null / null var(--font-sans); --font-20: normal undefined null / null var(--font-sans); --font-24: normal undefined null / null var(--font-sans); --font-32: normal undefined null / null var(--font-sans); --font-48: normal undefined null / null var(--font-sans); --font-64: normal undefined null / null var(--font-sans); --font-title-h0: var(--font-64); --font-title-h1: var(--font-32); --font-title-h2: var(--font-24); --font-title-h3: var(--font-18); --font-title-h4: var(--font-16); --font-title-h5: var(--font-14); --font-title-h6: var(--font-12); --font-14-20-regular: normal 400 0.875rem / 1.25rem var(--font-sans); --font-14-20-semibold: normal 600 0.875rem / 1.25rem var(--font-sans); --font-16-20-regular: normal 400 1rem / 1.25rem var(--font-sans); --font-12-16-regular: normal 400 0.75rem / 1rem var(--font-sans); --font-12-16-semibold: normal 600 0.75rem / 1rem var(--font-sans); --font-button-lg: var(--font-14-20-semibold); --font-button-md: var(--font-14-20-semibold); --font-button-sm: var(--font-12-16-semibold); --font-label-default: var(--font-12-16-regular); --misc-accordion-border: 0; --misc-accordion-open-list-style-type: none; --misc-accordion-closed-list-style-type: none; --misc-divider-margin: 0; --misc-label-text-transform: capitalize; --misc-label-letter-spacing: initial; --blur-sm: 0.25rem; --blur-normal: 0.5rem; --blur-md: 0.75rem; --blur-lg: 1rem; --blur-xl: 1.5rem; --blur-2xl: 2.5rem; --blur-3xl: 4rem; --color-action-downvote: #6A5CFF; --color-action-upvote: #D93900; --color-ai-background-weaker: #E7FDF5; --color-ai-plain: #006C56; --color-ai-plain-hover: #015140; --color-alert-caution: #977000; --color-avatar-gradient: linear-gradient(0deg, #97AFBCff, #ffffffff 75%); --color-avatar-media-gradient: linear-gradient(0deg, #00000099, #181C1Fff 75%); --color-brand-background: #D93900; --color-brand-background-hover: #AE2C00; --color-brand-gradient-active: linear-gradient(180deg, #cd3700ff, #db3b00ff 68%, #D93900ff 100%); --color-brand-gradient-active-highlight: linear-gradient(83deg, #db3f0000 80%, #D93900ff 100%); --color-brand-gradient-default: linear-gradient(180deg, #D93900ff, #db3b00ff 30%, #AE2C00ff 100%); --color-brand-gradient-default-highlight: linear-gradient(258deg, #db3f0000 80%, #D93900ff 100%); --color-brand-gradient-hover: linear-gradient(180deg, #e23d00ff 15%, #cb3600ff 49%, #b43000ff 100%); --color-brand-gradient-hover-highlight: linear-gradient(323deg, #cb360000 65%, #cb3600ff 100%); --color-brand-onBackground: #FFFFFF; --color-category-live: #D93900; --color-category-nsfw: #DE019F; --color-category-spoiler: var(--color-tone-1); --color-caution-background: #FFBF0B; --color-caution-background-hover: #D8A100; --color-caution-onBackground: #000000; --color-caution-plain: #785800; --color-caution-plain-hover: #5B4200; --color-danger-background: #EB001F; --color-danger-background-disabled: #FDB3A4; --color-danger-background-hover: #BC0117; --color-danger-background-weaker: #FBDBD4; --color-danger-content: #BC0117; --color-danger-content-default: #ffffff; --color-danger-content-hover: #90000F; --color-danger-onBackground: #FFFFFF; --color-danger-plain: #BC0117; --color-danger-plain-hover: #90000F; --color-downvote-background: #6A5CFF; --color-downvote-background-disabled: rgba(106, 92, 255, 0.3); --color-downvote-background-hover: #523DFF; --color-downvote-content: #523DFF; --color-downvote-content-weak: #6A5CFF; --color-downvote-disabled: #523DFF4d; --color-downvote-onBackground: #FFFFFF; --color-downvote-onStrongScrim: #B29FFF; --color-downvote-onStrongScrim-disabled: rgba(178, 159, 255, 0.3); --color-downvote-onStrongScrim-weaker: #9580FF; --color-downvote-plain: #523DFF; --color-downvote-plain-disabled: rgba(82, 61, 255, 0.3); --color-downvote-plain-weaker: #6A5CFF; --color-elevation-large1: #0000003F; --color-elevation-large2: #00000026; --color-elevation-medium1: #0000003F; --color-elevation-medium2: #00000019; --color-elevation-small: #00000026; --color-elevation-xsmall: #0000003F; --color-favorite: #977000; --color-global-admin: #D93900; --color-global-alienblue: #1870F4; --color-global-black: #000000; --color-global-brand-orangered: #FF4500; --color-global-darkblue: #2A3236; --color-global-focus: #029DD5; --color-global-gold: #B78800; --color-global-moderator: #008A10; --color-global-nsfw: #DE019F; --color-global-offline: #667780; --color-global-online: #00C61C; --color-global-orangered: #FF4500; --color-global-stars: #977000; --color-global-white: #FFFFFF; --color-gradient-media: linear-gradient(180deg, #00000000, #0000008a 60%, #00000099 100%); --color-gradient-media-strong: linear-gradient(180deg, #00000000, #000000cc 60%, #000000e6 100%); --color-identity-admin: #D93900; --color-identity-coins: #B78800; --color-identity-moderator: #008A10; --color-identity-self: #01876D; --color-interactive-background-disabled: #0000000C; --color-interactive-content-disabled: #0000003F; --color-interactive-focused: #007FAE; --color-interactive-pressed: #00000026; --color-inverted-interactive-background-disabled: #FFFFFF0C; --color-inverted-interactive-content-disabled: #FFFFFF3F; --color-inverted-interactive-pressed: #FFFFFF26; --color-inverted-neutral-background: #0E1113; --color-inverted-neutral-background-hover: #181C1F; --color-inverted-neutral-border: #FFFFFF33; --color-inverted-neutral-content: #B7CAD4; --color-inverted-neutral-content-strong: #EEF1F3; --color-inverted-secondary-background: #2A3236; --color-inverted-secondary-background-hover: #333D42; --color-inverted-secondary-background-selected: #3D494E; --color-inverted-secondary-onBackground: #FFFFFF; --color-inverted-secondary-plain: #DBE4E9; --color-inverted-secondary-plain-hover: #FFFFFF; --color-media-background: rgba(0, 0, 0, 0.6); --color-media-background-hover: rgba(0, 0, 0, 0.8); --color-media-background-selected: rgba(0, 0, 0, 0.8); --color-media-border-selected: #FFFFFF; --color-media-border-weak: #FFFFFF19; --color-media-onBackground: #FFFFFF; --color-media-onBackground-disabled: #FFFFFF3F; --color-media-onBackground-weak: #E5EBEE; --color-media-onbackground: #ffffff; --color-media-onbackground-disabled: #ffffff40; --color-media-onbackground-weak: #B7CAD4; --color-neutral-background: #FFFFFF; --color-neutral-background-container: #F6F8F9; --color-neutral-background-container-hover: #EEF1F3; --color-neutral-background-container-strong: #EEF1F3; --color-neutral-background-container-strong-hover: #E5EBEE; --color-neutral-background-gilded: #FFF9E0; --color-neutral-background-gilded-hover: #FFF3C0; --color-neutral-background-hover: #F6F8F9; --color-neutral-background-medium: #F8F8F8; --color-neutral-background-pinned: #FFFFFF; --color-neutral-background-selected: #E5EBEE; --color-neutral-background-strong: #FFFFFF; --color-neutral-background-strong-hover: #F6F8F9; --color-neutral-background-weak: #F6F8F9; --color-neutral-background-weak-hover: #EEF1F3; --color-neutral-border: #00000033; --color-neutral-border-medium: #0000007F; --color-neutral-border-strong: #181C1F; --color-neutral-border-weak: #00000019; --color-neutral-content: #333D42; --color-neutral-content-disabled: #D6D6D6; --color-neutral-content-strong: #181C1F; --color-neutral-content-weak: #5C6C74; --color-offline: #767676; --color-online: #01A816; --color-opacity-08: #13131314; --color-opacity-50: #00000080; --color-opacity-highlight: linear-gradient(#0A2F6C1a, var(--color-tone-6)); --color-pizzaRed: #ef5350; --color-primary: #115BCA; --color-primary-background: #0A449B; --color-primary-background-hover: #0A2F6C; --color-primary-background-selected: #0A1A3F; --color-primary-border: #0A449B; --color-primary-border-hover: #0A2F6C; --color-primary-hover: #0A449B; --color-primary-onBackground: #FFFFFF; --color-primary-onBackground-selected: #FFFFFF; --color-primary-plain: #0A449B; --color-primary-plain-hover: #0A2F6C; --color-primary-plain-visited: #7600A3; --color-primary-visited: #9B00D4; --color-scrim: #00000099; --color-scrim-background: #00000099; --color-scrim-background-strong: #000000CC; --color-scrim-gradient: linear-gradient(180deg, #00000000, #0000008a 60%, #00000099 100%); --color-scrim-strong: #000000cc; --color-secondary: #21272A; --color-secondary-background: #E5EBEE; --color-secondary-background-hover: #DBE4E9; --color-secondary-background-selected: #C9D7DE; --color-secondary-hover: #000000; --color-secondary-onBackground: #000000; --color-secondary-plain: #181C1F; --color-secondary-plain-hover: #000000; --color-secondary-plain-weak: #5C6C74; --color-secondary-weak: #576F76; --color-success-background: #008A10; --color-success-background-hover: #016E0B; --color-success-content: #016E0B; --color-success-hover: #005306; --color-success-onBackground: #FFFFFF; --color-success-plain: #016E0B; --color-success-plain-hover: #005306; --color-tone-1: #131313; --color-tone-2: #434343; --color-tone-3: #ACACAC; --color-tone-4: #E4E4E4; --color-tone-5: #F2F2F2; --color-tone-6: #F8F8F8; --color-tone-7: #ffffff; --color-transparent-background-hover: #7487911a; --color-ui-canvas: var(--color-tone-5); --color-ui-modalbackground: var(--color-neutral-background-strong); --color-upvote-background: #D93900; --color-upvote-background-disabled: rgba(217, 57, 0, 0.3); --color-upvote-background-hover: #AE2C00; --color-upvote-content: #AE2C00; --color-upvote-content-weak: var(--color-global-brand-orangered); --color-upvote-disabled: #AE2C004d; --color-upvote-onBackground: #FFFFFF; --color-upvote-onStrongScrim: #FF895D; --color-upvote-onStrongScrim-disabled: rgba(255, 137, 93, 0.3); --color-upvote-onStrongScrim-weaker: #FF4500; --color-upvote-plain: #AE2C00; --color-upvote-plain-disabled: rgba(174, 44, 0, 0.3); --color-upvote-plain-weaker: #FF4500; --color-warning-background: #B78800; --color-warning-background-hover: #977000; --color-warning-content: #785800; --color-warning-content-hover: #5B4200; --color-warning-onBackground: #000000; --color-a-default: var(--color-primary); --color-a-hover: var(--color-primary-hover); --color-a-visited: var(--color-primary-visited); --color-banner-plain: var(--color-neutral-background-strong); --color-banner-plain-inverted: var(--color-neutral-content-strong); --color-banner-error: var(--color-danger-background); --color-banner-caution: var(--color-warning-background); --color-banner-success: var(--color-success-background); --color-banner-brand: var(--color-brand-background); --color-banner-plain-text: var(--color-neutral-content); --color-banner-plain-inverted-text: var(--color-neutral-background-weak); --color-banner-error-text: var(--color-danger-onBackground); --color-banner-caution-text: var(--color-warning-onBackground); --color-banner-caution-hover: var(--color-warning-background-hover); --color-banner-success-text: var(--color-success-onBackground); --color-banner-brand-text: var(--color-brand-onBackground); --color-button-overlay-focus: transparent; --color-button-overlay-active: transparent; --color-button-border-width: tomato; --color-button-border-width-activated: tomato; --color-button-primary-background-hover: var(--color-primary-background-hover); --color-button-primary-background-activated: var(--color-primary-background-selected); --color-button-primary-background-disabled: var(--color-interactive-background-disabled); --color-button-primary-border-hover: var(--color-primary-background); --color-button-primary-border-active: var(--color-primary-background-hover); --color-button-primary-text-disabled: var(--color-interactive-content-disabled); --color-button-primary-text-activated: var(--color-primary-onBackground-selected); --color-button-secondary-background: var(--color-secondary-background); --color-button-secondary-background-focus: var(--color-secondary-background); --color-button-secondary-background-hover: var(--color-secondary-background-hover); --color-button-secondary-background-disabled: var(--color-interactive-background-disabled); --color-button-secondary-background-activated: var(--color-secondary-background-selected); --color-button-secondary-border: transparent; --color-button-secondary-border-hover: var(--color-secondary-background); --color-button-secondary-border-active: var(--color-secondary-background-hover); --color-button-secondary-border-activated: transparent; --color-button-secondary-border-disabled: transparent; --color-button-secondary-text: var(--color-secondary-onBackground); --color-button-secondary-text-disabled: var(--color-interactive-content-disabled); --color-button-secondary-text-activated: var(--color-secondary-onBackground); --color-button-tertiary-background: transparent; --color-button-tertiary-background-focus: transparent; --color-button-tertiary-background-hover: var(--color-secondary-background-hover); --color-button-tertiary-background-disabled: transparent; --color-button-tertiary-background-activated: var(--color-neutral-content); --color-button-tertiary-border-hover: var(--color-secondary-background); --color-button-tertiary-border-active: var(--color-secondary-background-hover); --color-button-tertiary-text: var(--color-neutral-content-strong); --color-button-tertiary-text-disabled: var(--color-neutral-content-disabled); --color-button-tertiary-text-activated: var(--color-neutral-background); --color-button-plain-background-hover: var(--color-secondary-background-hover); --color-button-plain-background-disabled: transparent; --color-button-plain-background-activated: var(--color-secondary-background-selected); --color-button-plain-border-hover: var(--color-secondary-background); --color-button-plain-border-active: var(--color-secondary-background-hover); --color-button-plain-text: var(--color-secondary-plain); --color-button-plain-text-hover: var(--color-secondary-plain-hover); --color-button-plain-text-disabled: var(--color-interactive-content-disabled); --color-button-plain-text-activated: var(--color-secondary-onBackground); --color-button-primary-border-activated: var(--color-primary-background); --color-button-plain-text-weak: var(--color-secondary-plain-weak); --color-button-plain-inverted-background-activated: var(--color-neutral-content); --color-button-plain-inverted-text-activated: var(--color-neutral-background); --color-button-media-border-color-activated: var(--color-media-border-selected); --color-button-favorite-text: var(--color-favorite); --color-button-caution-background: var(--color-caution-background); --color-button-caution-background-hover: var(--color-caution-background-hover); --color-button-caution-background-disabled: var(--color-interactive-background-disabled); --color-button-caution-text: var(--color-caution-onBackground); --color-divider-default: var(--color-neutral-border); --color-input-secondary: var(--color-secondary-background); --color-input-secondary-hover: var(--color-secondary-background-hover); --color-input-border: transparent; --color-input-bordered: transparent; --color-input-bordered-hover: var(--color-neutral-background-hover); --color-input-secondary-text: var(--color-secondary-onBackground); --color-input-bordered-text: var(--color-secondary-plain); --color-input-helper-text: var(--color-neutral-content-weak); --color-input-pressed: var(--color-interactive-pressed); --color-input-radio: var(--color-secondary-plain-weak); --color-input-radio-hover: var(--color-neutral-content-strong); --color-label-default: var(--color-neutral-content-weak); --color-shimmer-background: #00000008; --color-shimmer-gradient-overlay: linear-gradient(to right, #00000000, #00000005 20%, #0000000f 50%, #00000008 70%, #00000000 100%); --color-switch-input-background-pressed-scrim: var(--color-interactive-pressed); --color-switch-input-background-handle: var(--color-global-white); --color-switch-input-background-handle-disabled: var(--color-secondary-background); --color-switch-input-background-default: var(--color-secondary-background); --color-switch-input-background-default-hover: var(--color-secondary-background-hover); --color-switch-input-background-default-disabled: var(--color-interactive-background-disabled); --color-switch-input-background-checked: var(--color-primary-background); --color-switch-input-background-checked-hover: var(--color-primary-background-hover); --color-switch-input-background-checked-disabled: var(--color-interactive-content-disabled); --color-tooltip-bg-neutral: var(--color-neutral-background-strong); --color-tooltip-text-neutral: var(--color-neutral-content); --color-tooltip-bg-inverted: var(--color-neutral-content); --color-tooltip-text-inverted: var(--color-neutral-background); --color-tooltip-bg-primary: var(--color-primary-background); --color-tooltip-text-primary: var(--color-primary-onBackground); --elevation-sm-inset: inset 0 0.0625rem 0.125rem 0 #00000021; --elevation-button-focus: var(--elevation-focus-ring); --elevation-switch-input-default-inset: var(--elevation-sm-inset); } @media (prefers-color-scheme: dark) { :root:not(.theme-light) .theme-rpl, :root:not(.theme-light).theme-rpl { --color-ai-background-weaker: #00382B; --color-ai-plain: #01A484; --color-ai-plain-hover: #00C29D; --color-avatar-gradient: linear-gradient(0deg, #48545Bff, #181C1Fff 75%); --color-brand-background: #D93900; --color-brand-background-hover: #AE2C00; --color-brand-onBackground: #FFFFFF; --color-caution-background: #D8A100; --color-caution-background-hover: #FFBF0B; --color-caution-onBackground: #000000; --color-caution-plain: #FFBF0B; --color-caution-plain-hover: #FFE284; --color-danger-background: #BC0117; --color-danger-background-disabled: #340F05; --color-danger-background-hover: #EB001F; --color-danger-background-weaker: #650405; --color-danger-content: #FF4F40; --color-danger-content-hover: #FF8773; --color-danger-onBackground: #FFFFFF; --color-danger-plain: #FF8773; --color-danger-plain-hover: #FDB3A4; --color-downvote-background: #6A5CFF; --color-downvote-background-disabled: rgba(106, 92, 255, 0.3); --color-downvote-background-hover: #523DFF; --color-downvote-content: #9580FF; --color-downvote-content-weak: #6A5CFF; --color-downvote-disabled: #9580FF4d; --color-downvote-onBackground: #FFFFFF; --color-downvote-onStrongScrim: #B29FFF; --color-downvote-onStrongScrim-disabled: rgba(178, 159, 255, 0.3); --color-downvote-onStrongScrim-weaker: #9580FF; --color-downvote-plain: #9580FF; --color-downvote-plain-disabled: rgba(149, 128, 255, 0.3); --color-downvote-plain-weaker: #6A5CFF; --color-elevation-large1: #0000007F; --color-elevation-large2: #00000033; --color-elevation-medium1: #0000007F; --color-elevation-medium2: #00000033; --color-elevation-small: #00000054; --color-elevation-xsmall: #000000AA; --color-favorite: #B78800; --color-global-admin: #D93900; --color-global-black: #000000; --color-global-brand-orangered: #FF4500; --color-global-focus: #007FAE; --color-global-gold: #D8A100; --color-global-moderator: #008A10; --color-global-nsfw: #DE019F; --color-global-offline: #667780; --color-global-online: #00C61C; --color-global-orangered: #FF4500; --color-global-stars: #D8A100; --color-global-white: #FFFFFF; --color-interactive-background-disabled: #FFFFFF0C; --color-interactive-content-disabled: #FFFFFF3F; --color-interactive-focused: #007FAE; --color-interactive-pressed: #FFFFFF26; --color-inverted-interactive-background-disabled: #0000000C; --color-inverted-interactive-content-disabled: #0000003F; --color-inverted-interactive-pressed: #00000026; --color-inverted-neutral-background: #FFFFFF; --color-inverted-neutral-background-hover: #F6F8F9; --color-inverted-neutral-border: #00000033; --color-inverted-neutral-content: #333D42; --color-inverted-neutral-content-strong: #181C1F; --color-inverted-secondary-background: #E5EBEE; --color-inverted-secondary-background-hover: #DBE4E9; --color-inverted-secondary-background-selected: #C9D7DE; --color-inverted-secondary-onBackground: #000000; --color-inverted-secondary-plain: #181C1F; --color-inverted-secondary-plain-hover: #000000; --color-media-background: rgba(0, 0, 0, 0.6); --color-media-background-hover: rgba(0, 0, 0, 0.8); --color-media-background-selected: rgba(0, 0, 0, 0.8); --color-media-border-selected: #FFFFFF; --color-media-border-weak: #FFFFFF19; --color-media-onBackground: #FFFFFF; --color-media-onBackground-disabled: #FFFFFF3F; --color-media-onBackground-weak: #E5EBEE; --color-neutral-background: #0E1113; --color-neutral-background-container: #181C1F; --color-neutral-background-container-hover: #21272A; --color-neutral-background-container-strong: #21272A; --color-neutral-background-container-strong-hover: #2A3236; --color-neutral-background-gilded: #181C1F; --color-neutral-background-gilded-hover: #21272A; --color-neutral-background-hover: #181C1F; --color-neutral-background-medium: #131313; --color-neutral-background-pinned: #0E1113; --color-neutral-background-selected: #2A3236; --color-neutral-background-strong: #181C1F; --color-neutral-background-strong-hover: #21272A; --color-neutral-background-weak: #000000; --color-neutral-background-weak-hover: #0E1113; --color-neutral-border: #FFFFFF33; --color-neutral-border-medium: #FFFFFF7F; --color-neutral-border-strong: #F6F8F9; --color-neutral-border-weak: #FFFFFF19; --color-neutral-content: #B7CAD4; --color-neutral-content-disabled: #303030; --color-neutral-content-strong: #EEF1F3; --color-neutral-content-weak: #8BA2AD; --color-offline: #767676; --color-online: #01A816; --color-opacity-50: #F2F2F280; --color-pizzaRed: #c62828; --color-primary: #648EFC; --color-primary-background: #115BCA; --color-primary-background-hover: #1870F4; --color-primary-background-selected: #648EFC; --color-primary-border: #648EFC; --color-primary-border-hover: #90A9FD; --color-primary-hover: #90A9FD; --color-primary-onBackground: #FFFFFF; --color-primary-onBackground-selected: #000000; --color-primary-plain: #648EFC; --color-primary-plain-hover: #90A9FD; --color-primary-plain-visited: #CF5FFF; --color-primary-visited: #CF5FFF; --color-scrim-background: #00000099; --color-scrim-background-strong: #000000CC; --color-secondary: #DBE4E9; --color-secondary-background: #2A3236; --color-secondary-background-hover: #333D42; --color-secondary-background-selected: #3D494E; --color-secondary-hover: #ffffff; --color-secondary-onBackground: #FFFFFF; --color-secondary-plain: #DBE4E9; --color-secondary-plain-hover: #FFFFFF; --color-secondary-plain-weak: #8BA2AD; --color-secondary-weak: #748791; --color-success-background: #016E0B; --color-success-background-hover: #008A10; --color-success-content: #01A816; --color-success-hover: #00C61C; --color-success-onBackground: #FFFFFF; --color-success-plain: #00C61C; --color-success-plain-hover: #58E15B; --color-tone-1: #F2F2F2; --color-tone-2: #ACACAC; --color-tone-3: #434343; --color-tone-4: #303030; --color-tone-5: #1E1E1E; --color-tone-6: #131313; --color-tone-7: #080808; --color-transparent-background-hover: #6677801a; --color-ui-canvas: #080808; --color-ui-modalbackground: var(--color-neutral-background-strong); --color-upvote-background: #D93900; --color-upvote-background-disabled: rgba(217, 57, 0, 0.3); --color-upvote-background-hover: #AE2C00; --color-upvote-content: #FF4500; --color-upvote-content-weak: var(--color-global-brand-orangered); --color-upvote-disabled: #FF45004d; --color-upvote-onBackground: #FFFFFF; --color-upvote-onStrongScrim: #FF895D; --color-upvote-onStrongScrim-disabled: rgba(255, 137, 93, 0.3); --color-upvote-onStrongScrim-weaker: #FF4500; --color-upvote-plain: #FF895D; --color-upvote-plain-disabled: rgba(255, 137, 93, 0.3); --color-upvote-plain-weaker: #FF4500; --color-warning-background: #B78800; --color-warning-background-hover: #D8A100; --color-warning-content: #B78800; --color-warning-content-hover: #D8A100; --color-warning-onBackground: #000000; --color-button-primary-border-activated: transparent; --color-button-plain-inverted-activated-text: var(--color-neutral-background); --color-input-radio-hover: var(--color-secondary-plain); --color-shimmer-background: #ffffff08; --color-shimmer-gradient-overlay: linear-gradient(to right, #ffffff00, #ffffff05 20%, #ffffff0f 50%, #ffffff08 70%, #ffffff00 100%); } } .theme-dark .theme-rpl, .theme-dark.theme-rpl { --color-ai-background-weaker: #00382B; --color-ai-plain: #01A484; --color-ai-plain-hover: #00C29D; --color-avatar-gradient: linear-gradient(0deg, #48545Bff, #181C1Fff 75%); --color-brand-background: #D93900; --color-brand-background-hover: #AE2C00; --color-brand-onBackground: #FFFFFF; --color-caution-background: #D8A100; --color-caution-background-hover: #FFBF0B; --color-caution-onBackground: #000000; --color-caution-plain: #FFBF0B; --color-caution-plain-hover: #FFE284; --color-danger-background: #BC0117; --color-danger-background-disabled: #340F05; --color-danger-background-hover: #EB001F; --color-danger-background-weaker: #650405; --color-danger-content: #FF4F40; --color-danger-content-hover: #FF8773; --color-danger-onBackground: #FFFFFF; --color-danger-plain: #FF8773; --color-danger-plain-hover: #FDB3A4; --color-downvote-background: #6A5CFF; --color-downvote-background-disabled: rgba(106, 92, 255, 0.3); --color-downvote-background-hover: #523DFF; --color-downvote-content: #9580FF; --color-downvote-content-weak: #6A5CFF; --color-downvote-disabled: #9580FF4d; --color-downvote-onBackground: #FFFFFF; --color-downvote-onStrongScrim: #B29FFF; --color-downvote-onStrongScrim-disabled: rgba(178, 159, 255, 0.3); --color-downvote-onStrongScrim-weaker: #9580FF; --color-downvote-plain: #9580FF; --color-downvote-plain-disabled: rgba(149, 128, 255, 0.3); --color-downvote-plain-weaker: #6A5CFF; --color-elevation-large1: #0000007F; --color-elevation-large2: #00000033; --color-elevation-medium1: #0000007F; --color-elevation-medium2: #00000033; --color-elevation-small: #00000054; --color-elevation-xsmall: #000000AA; --color-favorite: #B78800; --color-global-admin: #D93900; --color-global-black: #000000; --color-global-brand-orangered: #FF4500; --color-global-focus: #007FAE; --color-global-gold: #D8A100; --color-global-moderator: #008A10; --color-global-nsfw: #DE019F; --color-global-offline: #667780; --color-global-online: #00C61C; --color-global-orangered: #FF4500; --color-global-stars: #D8A100; --color-global-white: #FFFFFF; --color-interactive-background-disabled: #FFFFFF0C; --color-interactive-content-disabled: #FFFFFF3F; --color-interactive-focused: #007FAE; --color-interactive-pressed: #FFFFFF26; --color-inverted-interactive-background-disabled: #0000000C; --color-inverted-interactive-content-disabled: #0000003F; --color-inverted-interactive-pressed: #00000026; --color-inverted-neutral-background: #FFFFFF; --color-inverted-neutral-background-hover: #F6F8F9; --color-inverted-neutral-border: #00000033; --color-inverted-neutral-content: #333D42; --color-inverted-neutral-content-strong: #181C1F; --color-inverted-secondary-background: #E5EBEE; --color-inverted-secondary-background-hover: #DBE4E9; --color-inverted-secondary-background-selected: #C9D7DE; --color-inverted-secondary-onBackground: #000000; --color-inverted-secondary-plain: #181C1F; --color-inverted-secondary-plain-hover: #000000; --color-media-background: rgba(0, 0, 0, 0.6); --color-media-background-hover: rgba(0, 0, 0, 0.8); --color-media-background-selected: rgba(0, 0, 0, 0.8); --color-media-border-selected: #FFFFFF; --color-media-border-weak: #FFFFFF19; --color-media-onBackground: #FFFFFF; --color-media-onBackground-disabled: #FFFFFF3F; --color-media-onBackground-weak: #E5EBEE; --color-neutral-background: #0E1113; --color-neutral-background-container: #181C1F; --color-neutral-background-container-hover: #21272A; --color-neutral-background-container-strong: #21272A; --color-neutral-background-container-strong-hover: #2A3236; --color-neutral-background-gilded: #181C1F; --color-neutral-background-gilded-hover: #21272A; --color-neutral-background-hover: #181C1F; --color-neutral-background-medium: #131313; --color-neutral-background-pinned: #0E1113; --color-neutral-background-selected: #2A3236; --color-neutral-background-strong: #181C1F; --color-neutral-background-strong-hover: #21272A; --color-neutral-background-weak: #000000; --color-neutral-background-weak-hover: #0E1113; --color-neutral-border: #FFFFFF33; --color-neutral-border-medium: #FFFFFF7F; --color-neutral-border-strong: #F6F8F9; --color-neutral-border-weak: #FFFFFF19; --color-neutral-content: #B7CAD4; --color-neutral-content-disabled: #303030; --color-neutral-content-strong: #EEF1F3; --color-neutral-content-weak: #8BA2AD; --color-offline: #767676; --color-online: #01A816; --color-opacity-50: #F2F2F280; --color-pizzaRed: #c62828; --color-primary: #648EFC; --color-primary-background: #115BCA; --color-primary-background-hover: #1870F4; --color-primary-background-selected: #648EFC; --color-primary-border: #648EFC; --color-primary-border-hover: #90A9FD; --color-primary-hover: #90A9FD; --color-primary-onBackground: #FFFFFF; --color-primary-onBackground-selected: #000000; --color-primary-plain: #648EFC; --color-primary-plain-hover: #90A9FD; --color-primary-plain-visited: #CF5FFF; --color-primary-visited: #CF5FFF; --color-scrim-background: #00000099; --color-scrim-background-strong: #000000CC; --color-secondary: #DBE4E9; --color-secondary-background: #2A3236; --color-secondary-background-hover: #333D42; --color-secondary-background-selected: #3D494E; --color-secondary-hover: #ffffff; --color-secondary-onBackground: #FFFFFF; --color-secondary-plain: #DBE4E9; --color-secondary-plain-hover: #FFFFFF; --color-secondary-plain-weak: #8BA2AD; --color-secondary-weak: #748791; --color-success-background: #016E0B; --color-success-background-hover: #008A10; --color-success-content: #01A816; --color-success-hover: #00C61C; --color-success-onBackground: #FFFFFF; --color-success-plain: #00C61C; --color-success-plain-hover: #58E15B; --color-tone-1: #F2F2F2; --color-tone-2: #ACACAC; --color-tone-3: #434343; --color-tone-4: #303030; --color-tone-5: #1E1E1E; --color-tone-6: #131313; --color-tone-7: #080808; --color-transparent-background-hover: #6677801a; --color-ui-canvas: #080808; --color-ui-modalbackground: var(--color-neutral-background-strong); --color-upvote-background: #D93900; --color-upvote-background-disabled: rgba(217, 57, 0, 0.3); --color-upvote-background-hover: #AE2C00; --color-upvote-content: #FF4500; --color-upvote-content-weak: var(--color-global-brand-orangered); --color-upvote-disabled: #FF45004d; --color-upvote-onBackground: #FFFFFF; --color-upvote-onStrongScrim: #FF895D; --color-upvote-onStrongScrim-disabled: rgba(255, 137, 93, 0.3); --color-upvote-onStrongScrim-weaker: #FF4500; --color-upvote-plain: #FF895D; --color-upvote-plain-disabled: rgba(255, 137, 93, 0.3); --color-upvote-plain-weaker: #FF4500; --color-warning-background: #B78800; --color-warning-background-hover: #D8A100; --color-warning-content: #B78800; --color-warning-content-hover: #D8A100; --color-warning-onBackground: #000000; --color-button-primary-border-activated: transparent; --color-button-plain-inverted-activated-text: var(--color-neutral-background); --color-input-radio-hover: var(--color-secondary-plain); --color-shimmer-background: #ffffff08; --color-shimmer-gradient-overlay: linear-gradient(to right, #ffffff00, #ffffff05 20%, #ffffff0f 50%, #ffffff08 70%, #ffffff00 100%); } :root { font-family: var(--font-sans); font-size: 16px; } :root, .theme-light, .theme-dark { background: var(--color-tone-7); color: var(--color-neutral-content, var(--color-tone-1)); } /* iOS form zoom fix */ body { font-size: var(--font-body); } /* Fix FOUC by hiding custom elements until they are registered. Certain components that gaurantee that they do not affect layout may be excluded. */ :not(:defined):not(faceplate-auto-height-animator, faceplate-dropdown-menu, faceplate-expandable-section-helper, faceplate-hovercard, faceplate-tracker) { visibility: hidden; } faceplate-hovercard:not(:defined) > [slot=\'content\'] { display: none; } /* Override the _color_ of the default user-agent outline ring on focus-visible */ :focus-visible { outline-color: var(--color-global-focus); } faceplate-banner [slot=\'closeButton\'] { margin-left: var(--spacer-sm); } faceplate-banner [slot=\'actionButtons\'] button:first-of-type { margin-right: var(--spacer-xs); } faceplate-banner[appearance=\'caution\'] button { color: var(--color-banner-caution-text); } faceplate-banner[appearance=\'caution\'] button:hover { background-color: var(--color-banner-caution-hover); } /** * The blockquote style module * * This LESS module provides the default Faceplate styles for `<blockquote>` elements. * * ```less * @import \'@reddit/faceplate-ui/styles/elements/blockquote.less\'; * * // To apply styles to <blockquote> elements within a scope (e.g. a shadow DOM) * blockquote { * .blockquote(); * } * * // To apply styles to a custom element directly * :host { * display: block; * .blockquote(); * } * ``` * * --- * * Faceplate includes these styles on the `<blockquote>` element by default. * * ```demo:html * <blockquote> * that happened to me once but instead of clapping it was eating doritos * </blockquote> * ``` * * @packageDocumentation */ /* Toggle Buttons */ .button-favorite { --button-color-background-focus: transparent; --button-color-background-hover: var(--color-button-plain-background-hover); --button-color-background-disabled: var(--color-button-plain-background-disabled); --button-color-background-activated: var(--color-button-plain-background-activated); --button-color-background-active: linear-gradient(var(--color-button-secondary-background-hover), var(--color-button-secondary-background-hover)); --button-color-text-default: var(--color-button-plain-text); --button-color-text-disabled: var(--color-button-plain-text-disabled); --button-color-text-activated: var(--color-button-plain-text-activated); --button-color-text-hover: var(--color-button-plain-text-hover); --button-border-color-default: transparent; --button-color-text-default: var(--color-neutral-content-weak); --button-color-background-default: transparent; --button-color-text-hover: var(--color-secondary-onBackground); } .button-favorite-toggled { --button-color-background-focus: transparent; --button-color-background-hover: var(--color-button-plain-background-hover); --button-color-background-disabled: var(--color-button-plain-background-disabled); --button-color-background-activated: var(--color-button-plain-background-activated); --button-color-background-active: linear-gradient(var(--color-button-secondary-background-hover), var(--color-button-secondary-background-hover)); --button-color-text-default: var(--color-button-plain-text); --button-color-text-disabled: var(--color-button-plain-text-disabled); --button-color-text-activated: var(--color-button-plain-text-activated); --button-color-text-hover: var(--color-button-plain-text-hover); --button-border-color-default: transparent; --button-color-background-default: transparent; --button-color-text-default: var(--color-button-favorite-text); --button-color-text-hover: var(--color-button-favorite-text); } .button-secondary-toggled { --button-color-background-default: var(--color-button-secondary-background); --button-color-background-focus: var(--color-button-secondary-background-focus); --button-color-background-hover: var(--color-button-secondary-background-hover); --button-color-background-active: linear-gradient(var(--color-button-secondary-background-hover), var(--color-button-secondary-background-hover)); --button-color-background-disabled: var(--color-button-secondary-background-disabled); --button-color-background-activated: var(--color-button-secondary-background-activated); --button-color-text-default: var(--color-button-secondary-text); --button-color-text-disabled: var(--color-button-secondary-text-disabled); --button-color-text-activated: var(--color-button-secondary-text-activated); --button-border-color-default: var(--color-button-secondary-border); --button-color-background-default: var(--color-button-secondary-background-activated); --button-border-color-default: var(--color-neutral-border); } .button-caution { --button-color-background-default: var(--color-button-caution-background); --button-color-background-hover: var(--color-button-caution-background-hover); --button-color-background-disabled: var(--color-button-caution-background-disabled); --button-color-text-default: var(--color-button-caution-text); } .rpl-vote-button-group { /* APPEARANCE AGNOSTIC STYLES */ /* PLAIN APPEARANCE */ /* SECONDARY APPEARANCE */ /* BORDERED APPEARANCE */ --vote-button-divider-color: var(--color-neutral-border-weak); /* MEDIA APPEARANCE */ } .rpl-vote-button-group:not([disabled]) .rpl-vote-button-group-label { color: var(--vote-button-label-color); } .rpl-vote-button-group:not([disabled]):hover.rpl-vote-button-group-label { color: var(--vote-button-label-color-hover); } .rpl-vote-button-group .rpl-vote-button-group-divider { background-color: var(--vote-button-divider-color); } .rpl-vote-button-group[disabled] button[rpl]:disabled { --button-color-background-disabled: transparent; } .rpl-vote-button-group.button-plain { --vote-button-label-color: var(--color-secondary-plain); --vote-button-label-color-hover: var(--color-secondary-plain); } .rpl-vote-button-group.button-plain button[rpl]:first-child { --button-color-text-hover: var(--color-upvote-plain-weaker); } .rpl-vote-button-group.button-plain button[rpl]:last-child { --button-color-text-hover: var(--color-downvote-plain-weaker); } .rpl-vote-button-group.button-plain.upvote { --vote-button-label-color: var(--color-upvote-plain); } .rpl-vote-button-group.button-plain.upvote button[rpl]:first-child { --button-color-text-default: var(--color-upvote-plain-weaker); --button-color-text-hover: var(--color-upvote-plain-weaker); --button-color-text-disabled: var(--color-upvote-plain-disabled); --button-color-text-activated: var(--color-upvote-plain-weaker); } .rpl-vote-button-group.button-plain.downvote { --vote-button-label-color: var(--color-downvote-plain); } .rpl-vote-button-group.button-plain.downvote button[rpl]:last-child { --button-color-text-default: var(--color-downvote-plain-weaker); --button-color-text-disabled: var(--color-downvote-plain-disabled); --button-color-text-activated: var(--color-downvote-plain-weaker); } .rpl-vote-button-group.button-secondary { --vote-button-label-color: var(--color-secondary-plain); --vote-button-label-color-hover: var(--color-secondary-plain); --vote-button-divider-color: var(--color-neutral-border); } .rpl-vote-button-group.button-secondary button[rpl]:first-child { --button-color-text-hover: var(--color-upvote-plain-weaker); } .rpl-vote-button-group.button-secondary button[rpl]:last-child { --button-color-text-hover: var(--color-downvote-plain-weaker); } .rpl-vote-button-group.button-secondary.upvote, .rpl-vote-button-group.button-secondary.upvote button[rpl] { --button-color-text-default: var(--color-upvote-onBackground); --button-color-text-hover: var(--color-upvote-onBackground); --button-color-text-disabled: var(--color-upvote-disabled); --button-color-text-activated: var(--color-upvote-onBackground); } .rpl-vote-button-group.button-secondary.upvote:not([disabled]), .rpl-vote-button-group.button-secondary.upvote button[rpl]:not([disabled]) { --button-color-background-default: var(--color-upvote-background); --button-color-background-hover: var(--color-upvote-background-hover); --button-color-background-active: var(--color-upvote-background-hover); --vote-button-divider-color: var(--color-upvote-onBackground); --vote-button-label-color: var(--color-media-onBackground); } .rpl-vote-button-group.button-secondary.downvote, .rpl-vote-button-group.button-secondary.downvote button[rpl] { --button-color-text-default: var(--color-downvote-onBackground); --button-color-text-hover: var(--color-downvote-onBackground); --button-color-text-disabled: var(--color-downvote-disabled); --button-color-text-activated: var(--color-downvote-onBackground); } .rpl-vote-button-group.button-secondary.downvote:not([disabled]), .rpl-vote-button-group.button-secondary.downvote button[rpl]:not([disabled]) { --button-color-background-default: var(--color-downvote-background); --button-color-background-hover: var(--color-downvote-background-hover); --button-color-background-active: var(--color-downvote-background-hover); --vote-button-divider-color: var(--color-upvote-onBackground); --vote-button-label-color: var(--color-media-onBackground); } .rpl-vote-button-group.button-bordered-cab { --vote-button-label-color: var(--color-secondary-plain); --vote-button-label-color-hover: var(--color-secondary-plain); } .rpl-vote-button-group.button-bordered-cab button[rpl]:first-child { --button-color-text-hover: var(--color-upvote-plain-weaker); } .rpl-vote-button-group.button-bordered-cab button[rpl]:last-child { --button-color-text-hover: var(--color-downvote-plain-weaker); } .rpl-vote-button-group.button-bordered-cab.upvote { --vote-button-label-color: var(--color-upvote-plain); } .rpl-vote-button-group.button-bordered-cab.upvote button[rpl]:first-child { --button-color-text-default: var(--color-upvote-plain-weaker); --button-color-text-hover: var(--color-upvote-plain-weaker); --button-color-text-disabled: var(--color-upvote-plain-disabled); --button-color-text-activated: var(--color-upvote-plain-weaker); } .rpl-vote-button-group.button-bordered-cab.downvote { --vote-button-label-color: var(--color-downvote-plain); } .rpl-vote-button-group.button-bordered-cab.downvote button[rpl]:last-child { --button-color-text-default: var(--color-downvote-plain-weaker); --button-color-text-hover: var(--color-downvote-plain-weaker); --button-color-text-disabled: var(--color-downvote-plain-disabled); --button-color-text-activated: var(--color-downvote-plain-weaker); } .rpl-vote-button-group.button-media-cab { --vote-button-label-color: var(--color-media-onBackground); --vote-button-label-color-hover: var(--color-media-onBackground); --vote-button-divider-color: var(--color-media-border-weak); } .rpl-vote-button-group.button-media-cab button[rpl]:first-child { --button-color-text-hover: var(--color-upvote-onStrongScrim-weaker); } .rpl-vote-button-group.button-media-cab button[rpl]:last-child { --button-color-text-hover: var(--color-downvote-onStrongScrim-weaker); } .rpl-vote-button-group.button-media-cab.upvote { --vote-button-label-color: var(--color-upvote-onStrongScrim); } .rpl-vote-button-group.button-media-cab.upvote button[rpl]:first-child { --button-color-text-default: var(--color-upvote-onStrongScrim-weaker); --button-color-text-activated: var(--color-upvote-onStrongScrim-weaker); --button-color-text-disabled: var(--color-upvote-onStrongScrim-disabled); } .rpl-vote-button-group.button-media-cab.downvote { --vote-button-label-color: var(--color-downvote-onStrongScrim); } .rpl-vote-button-group.button-media-cab.downvote button[rpl]:last-child { --button-color-text-default: var(--color-downvote-onStrongScrim-weaker); --button-color-text-activated: var(--color-downvote-onStrongScrim-weaker); --button-color-text-disabled: var(--color-downvote-onStrongScrim-disabled); } /** * The code style module * * This LESS module provides the default Faceplate styles for `<code>` elements. * * ```less * @import \'@reddit/faceplate-ui/styles/elements/code.less\'; * * // To apply styles to <code> elements within a scope (e.g. a shadow DOM) * code { * .code(); * } * * // To apply styles to a custom element directly * :host { * display: block; * .code(); * } * ``` * * --- * * Faceplate includes these styles on the following elements: * * - `<code>` * - `<pre>` * - `<kbd>` * - `<samp>` * * ```demo:html * <p>This is some <code>inline code</code>.</p> * * <pre><code>This is some * preformatted * code * </code></pre> * * <p>This is a <samp>sample</samp> element.</p> * * <p>This is a <kbd>keyboard</kbd> element.</p> * ``` * * @packageDocumentation */ /** * The details style module * * This LESS module provides the default Faceplate styles for `<details>` elements, and `<summary>` * elements nested in them. * * ```less * @import \'@reddit/faceplate-ui/styles/elements/details.less\'; * * // To apply styles to <details> elements within a scope (e.g. a shadow DOM) * details { * .details(); * } * ``` * * --- * * Faceplate includes these styles on the `details` element by default. * * ```demo:html * <details> * <summary>Click for more info</summary> * <p>More info</p> * </details> * ``` * * @packageDocumentation */ faceplate-dropdown-menu:not(.connected) [slot=\'menu\'] { display: none; } faceplate-dropdown-menu faceplate-menu li[rpl]:first-child [role=\'menuitem\'] { border-top-left-radius: var(--rem8); border-top-right-radius: var(--rem8); } faceplate-dropdown-menu faceplate-menu li[rpl]:last-child [role=\'menuitem\'] { border-bottom-left-radius: var(--rem8); border-bottom-right-radius: var(--rem8); } faceplate-expandable-section-helper { display: contents; /* [rpl] just to boost the selector */ /* Target the [open] attribute on either the root element OR the details element to rotate the chevron. This is to handle rotating chevrons both before and after the faceplate-expandable-section-helper component is defined. Before the component is defined, the [open] attribute on the component will not toggle if the user clicks on details, but the [open] attribute will toggle on the details element, so we need to target details too. The reason we can\'t target only the details element is because once the web component is defined, we delay toggling the [open] attribute on the details element until AFTER the animation finishes. So if we only targeted the details element for the chevron rotation the chevron wouldn\'t rotate until after the collapse animation finished and we finally toggle the [open] attriubte on the details element. */ /* Specific handling for nested menus. We only need to handle collapse menus inside of expanded menus, not expanded menus inside collapsed menus because you can\'t see those! */ } faceplate-expandable-section-helper > details > summary { list-style-type: none; /* For Safari */ } faceplate-expandable-section-helper > details > summary::marker, faceplate-expandable-section-helper > details > summary::-webkit-details-marker { display: none; } faceplate-expandable-section-helper[rpl] > details > summary { /* override details.less */ margin: 0; } faceplate-expandable-section-helper > details > summary [icon-name=\'caret-down-outline\'] { transition: transform 0.22s ease-in-out; } faceplate-expandable-section-helper[open] > details > summary svg[rpl][icon-name=\'caret-down-outline\'], faceplate-expandable-section-helper:not(:defined) > details[open] > summary svg[rpl][icon-name=\'caret-down-outline\'] { transform: rotate(180deg); } faceplate-expandable-section-helper:not([open]) > details > summary svg[rpl][icon-name=\'caret-down-outline\'], faceplate-expandable-section-helper:not(:defined) > details[open] > summary svg[rpl][icon-name=\'caret-down-outline\'] { transform: rotate(0deg); } /** * The header style module * * This LESS module provides the default Faceplate styles for `<header>` elements. This includes * the behavior of forcing the element\'s background to take the full width of the page. * * ```less * @import \'@reddit/faceplate-ui/styles/elements/header.less\'; * * // To apply styles to <header> elements within a scope (e.g. a shadow DOM) * header { * .header(); * } * * // To apply styles to a custom element directly * :host { * display: block; * .header(); * } * ``` * * --- * * Faceplate applies these styles to the `<header>` element by default. * * ```html * <header> * Header content. * </header> * ``` * * @packageDocumentation */ /** * The input style module * * This LESS module provides the default Faceplate styles for `<input>`, `<textarea>`, and * `<select>` elements. * * ```less * @import \'@reddit/faceplate-ui/styles/elements/input.less\'; * * // To apply styles to <input> elements within a scope (e.g. a shadow DOM) * input, * textarea, * select { * .input(); * } * * // To apply styles to a custom element directly * :host { * display: block; * .input(); * } * ``` * * --- * * Faceplate applies these styles to the following elements by default: * * - `<input>` * - `<select>` * - `<textarea>` * * ```demo:html * <p> * <input value="input"> * </p> * <p> * <select> * <option>select</option> * </select> * </p> * <p> * <textarea>textarea</textarea> * </p> * ``` * * @packageDocumentation */ /** * The kbd style module * * This LESS module provides the default Faceplate styles for `<kbd>` elements. * * ```less * @import \'@reddit/faceplate/styles/elements/kbd.less\'; * * // To apply styles to <kbd> elements within a scope (e.g. a shadow DOM) * kbd { * .kbd(); * } * * // To apply styles to a custom element directly * :host { * display: block; * .kbd(); * } * ``` * * --- * * Faceplate applies these styles to `<kdb>` elements _in addition to_ the styles provided by the * `code.less` module. * * ```demo:html * <p>This is a <kbd>k</kbd>eyboard element.</p> * ``` * * @packageDocumentation */ /** * The label style module * * This LESS module provides the default Faceplate styles for `<label>` elements. * * ```less * @import \'@reddit/faceplate-ui/styles/elements/label.less\'; * * // To apply styles to <label> elements within a scope (e.g. a shadow DOM) * label { * .label(); * } * * // To apply styles to a custom element directly * :host { * display: block; * .label(); * } * ``` * * --- * * Faceplate applies these styles to the `<label>` element by default, unless the label is an * _adjacent_ sibling to an input of type "radio" or "checkbox" * * ```demo:html * <p> * <label> * Name<br> * <input> * </label> * </p> * <p> * <label for="desc">Description</label><br> * <textarea id="desc"></textarea> * </p> * <p> * <input type="checkbox" id="enabled"> * <label for="enabled">Enabled?</label> * </p> * ``` * * @packageDocumentation */ /** * The menu style module * * This LESS module provides the default Faceplate styles for `<menu>` elements, and `<li>` elements * nested in them. * * ```less * @import \'@reddit/faceplate-ui/styles/elements/menu.less\'; * * // To apply styles to <menu> elements within a scope (e.g. a shadow DOM) * menu { * .menu(); * } * * // To apply styles to a custom element directly * :host { * display: block; * .menu(); * } * ``` * * --- * * Faceplate applies these styles to `<menu>` elements and their descendant `<li>` elements by default. * * ```html * <menu> * <li>Option A</li> * <li>Option B</li> * <li>Option C</li> * </menu> * ``` * * @packageDocumentation */ /** * The pre style module * * This LESS module provides the default Faceplate styles for `<pre>` elements. * * ```less * @import \'@reddit/faceplate-ui/styles/elements/pre.less\'; * * // To apply styles to <pre> elements within a scope (e.g. a shadow DOM) * pre { * .pre(); * } * * // To apply styles to a custom element directly * :host { * display: block; * .pre(); * } * ``` * * --- * * Faceplate applies these styles to the `<pre>` element, in addition to the styles provided by * the `code.less` style module. * * ```demo:html * <pre><code>This is some * preformatted * code * </code></pre> * ``` * * @packageDocumentation */ /** * The table style module * * This LESS module provides the default Faceplate styles for `<table>` elements and their children. * * ```less * @import \'@reddit/faceplate-ui/styles/elements/table.less\'; * * // To apply styles to <table> elements within a scope (e.g. a shadow DOM) * table { * .table(); * } * * // To apply styles to a custom element directly * :host { * display: block; * .table(); * } * ``` * * --- * * Faceplate applies these styles to the `<table>` element and its descendant `<td>`, `<th>`, `<tr>`, * and `<caption>` elements by default. * * ```demo:html * <table> * <thead> * <tr> * <th>Name</th> * <th>Occupation</th> * </tr> * </thead> * <tbody> * <tr> * <td>Matt Lee</td> * <td>Dorito Muncher</td> * </tr> * </tbody> * </table> * ``` * * @packageDocumentation */ /** * The hr style module * * This LESS module provides the default Faceplate styles for `<hr>` element. * * ```less * @import \'@reddit/faceplate-ui/styles/elements/hr.less\'; * * // To apply styles to <hr> elements within a scope (e.g. a shadow DOM) * hr { * .hr(); * } * ``` * * --- * * Faceplate includes these styles on the `details` element by default. * * ```demo:html * <hr /> * ``` * * @packageDocumentation */ address, area, article, aside, audio, blockquote, datalist, details, dl, fieldset, figure, form, input, iframe, img, meter, nav, ol, optgroup, option, output, p, pre, progress, ruby, section, textarea, ul, menu, video { /* Margins for most elements */ margin-bottom: 1rem; } html, input, select, button { /* Set body font family and some finicky elements */ font-family: var(--font-sans); } body { --faceplate-body-padding: 1.5rem; margin: 0 auto; padding: var(--faceplate-body-padding); overflow-x: hidden; word-break: break-word; overflow-wrap: break-word; line-height: 1.5; } @media (max-width: 599px) { body { --faceplate-body-padding: 1rem; } } h1, h2, h3, h4, h5, h6 { margin: 1em 0 0.5em; } h1 { font: var(--font-title-h1); } h2 { font: var(--font-title-h2); } h3 { font: var(--font-title-h3); } h4 { font: var(--font-title-h4); } h5 { font: var(--font-title-h5); } h6 { font: var(--font-title-h6); } label { text-transform: var(--misc-label-text-transform); letter-spacing: var(--misc-label-letter-spacing); font: var(--font-label-default); color: var(--color-label-default); } label > input, label > textarea { margin-top: var(--spacer-label-default); } faceplate-switch-input + label, input[type=\'checkbox\'] + label, input[type=\'radio\'] + label { font-size: inherit; text-transform: inherit; letter-spacing: inherit; font-weight: inherit; vertical-align: middle; } a { color: var(--color-a-default); text-decoration: none; } a:hover { text-decoration: underline; } abbr:hover { /* Set the \'?\' cursor while hovering an abbreviation */ cursor: help; } blockquote { padding: 1.5rem; background: var(--color-tone-6); border-left: 5px solid var(--color-tone-5); } abbr { cursor: help; } blockquote *:last-child { padding-bottom: 0; margin-bottom: 0; } header { padding-left: calc(50vw - 50%); padding-right: calc(50vw - 50%); margin-left: calc(0px - (50vw - 50%)); margin-right: calc(0px - (50vw - 50%)); padding-top: var(--faceplate-body-padding); padding-bottom: var(--faceplate-body-padding); margin-top: calc(-1 * var(--faceplate-body-padding)); margin-bottom: var(--faceplate-body-padding); background: var(--color-tone-6); } dialog header, faceplate-dialog header, article header, section header, main header, aside header { padding: 0.5rem 0; margin: 1rem 0; background: transparent; } dialog header h1, faceplate-dialog header h1, article header h1, section header h1, main header h1, aside header h1 { font: var(--font-title-h1); } header h1 { font: var(--font-title-h0); } header > *:first-child { margin-top: 0; } header > *:last-child { margin-bottom: 0; } :where(button), :where(input):where([type=\'submit\'], [type=\'reset\'], [type=\'button\']) { background: var(--button-color-background); border-radius: 999px; border: none; border: var(--button-border-width, 0) solid var(--button-border-color, transparent); box-shadow: var(--button-shadow); box-sizing: border-box; color: var(--button-color-text); cursor: pointer; display: inline-block; font: var(--button-font); height: var(--button-height); line-height: calc(var(--button-height) - (2 * var(--button-border-width, 0px))); overflow: hidden; padding: 0 calc(var(--button-padding) - var(--button-border-width, 0px)); text-align: center; text-decoration: none; text-overflow: ellipsis; white-space: nowrap; outline-offset: 0; --button-border-color: var(--button-border-color-default); --button-border-width: var(--button-border-width-default); --button-color-background: var(--button-color-background-default); --button-color-text: var(--button-color-text-default); /* Media query prevents sticky :hover states on mobile */ /* This is :active, AKA Pressed */ /* This is Selected */ --button-height: var(--size-button-sm-h); --button-padding: var(--spacer-2xs); --button-font: var(--font-button-sm); --button-border-width-default: var(--line-button-sm-border); --button-color-background-default: var(--color-button-secondary-background); --button-color-background-focus: var(--color-button-secondary-background-focus); --button-color-background-hover: var(--color-button-secondary-background-hover); --button-color-background-active: linear-gradient(var(--color-button-secondary-background-hover), var(--color-button-secondary-background-hover)); --button-color-background-disabled: var(--color-button-secondary-background-disabled); --button-color-background-activated: var(--color-button-secondary-background-activated); --button-color-text-default: var(--color-button-secondary-text); --button-color-text-disabled: var(--color-button-secondary-text-disabled); --button-color-text-activated: var(--color-button-secondary-text-activated); --button-border-color-default: var(--color-button-secondary-border); } :where(button).icon, :where(input):where([type=\'submit\'], [type=\'reset\'], [type=\'button\']).icon { width: var(--button-height); } :where(button) .button-icon, :where(input):where([type=\'submit\'], [type=\'reset\'], [type=\'button\']) .button-icon { margin-right: var(--spacer-xs); } :where(button) .dropdown-icon, :where(input):where([type=\'submit\'], [type=\'reset\'], [type=\'button\']) .dropdown-icon { transform: rotate(0deg); transition: transform 0.2s ease-in-out; } :where(button):focus, :where(input):where([type=\'submit\'], [type=\'reset\'], [type=\'button\']):focus { --button-color-overlay: var(--color-button-overlay-focus); } :where(button).hover, :where(input):where([type=\'submit\'], [type=\'reset\'], [type=\'button\']).hover { --button-color-overlay: var(--color-button-overlay-focus); --button-border-color: var(--button-border-color-hover); --button-color-background: var(--button-color-background-hover); --button-color-text: var(--button-color-text-hover, var(--button-color-text-default)); } @media (hover: hover) { :where(button):hover, :where(input):where([type=\'submit\'], [type=\'reset\'], [type=\'button\']):hover { --button-color-overlay: var(--color-button-overlay-focus); --button-border-color: var(--button-border-color-hover); --button-color-background: var(--button-color-background-hover); --button-color-text: var(--button-color-text-hover, var(--button-color-text-default)); } } :where(button):active, :where(input):where([type=\'submit\'], [type=\'reset\'], [type=\'button\']):active, :where(button).active, :where(input):where([type=\'submit\'], [type=\'reset\'], [type=\'button\']).active { --button-color-overlay: var(--color-button-overlay-active); --button-color-background: linear-gradient(var(--color-interactive-pressed), var(--color-interactive-pressed)), var(--button-color-background-active); } :where(button):disabled, :where(input):where([type=\'submit\'], [type=\'reset\'], [type=\'button\']):disabled, :where(button).anchor-disabled, :where(input):where([type=\'submit\'], [type=\'reset\'], [type=\'button\']).anchor-disabled { --button-border-color-hover: var(--button-border-color-default); --button-color-background: var(--button-color-background-disabled); --button-color-text: var(--button-color-text-disabled); cursor: not-allowed; pointer-events: none; } :where(button).disabled.pointer-all, :where(input):where([type=\'submit\'], [type=\'reset\'], [type=\'button\']).disabled.pointer-all { --button-border-color-hover: var(--button-border-color-default); --button-color-background: var(--button-color-background-disabled); --button-color-text: var(--button-color-text-disabled); cursor: not-allowed; pointer-events: all; } :where(button).button-activated, :where(input):where([type=\'submit\'], [type=\'reset\'], [type=\'button\']).button-activated { --button-border-color: var(--button-border-color-activated); --button-color-background: var(--button-color-background-activated); --button-color-text: var(--button-color-text-activated); } small :where(button), small :where(input):where([type=\'submit\'], [type=\'reset\'], [type=\'button\']) { --button-height: var(--size-button-xs-h); --button-padding: var(--spacer-sm); --button-font: var(--font-button-xs); --button-border-width-default: var(--line-button-xs-border); } :where(button).button-large, :where(input):where([type=\'submit\'], [type=\'reset\'], [type=\'button\']).button-large { --button-height: var(--size-button-lg-h); --button-padding: var(--spacer-xs); --button-font: var(--font-button-lg); --button-border-width-default: var(--line-button-lg-border); } :where(button).button-primary, :where(input):where([type=\'submit\'], [type=\'reset\'], [type=\'button\']).button-primary { --button-color-background-default: var(--color-primary-background); --button-color-background-focus: var(--color-primary-background); --button-color-background-hover: var(--color-button-primary-background-hover); --button-color-background-active: linear-gradient(var(--color-button-primary-background-hover), var(--color-button-primary-background-hover)); --button-color-background-disabled: var(--color-button-primary-background-disabled); --button-color-background-activated: var(--color-button-primary-background-activated); --button-color-text-default: var(--color-global-white); --button-color-text-disabled: var(--color-button-primary-text-disabled); --button-color-text-activated: var(--color-button-primary-text-activated); --button-border-color-default: transparent; } :where(button).button-plain, :where(input):where([type=\'submit\'], [type=\'reset\'], [type=\'button\']).button-plain { --button-color-background-default: transparent; --button-color-background-focus: transparent; --button-color-background-hover: var(--color-button-plain-background-hover); --button-color-background-disabled: var(--color-button-plain-background-disabled); --button-color-background-activated: var(--color-button-plain-background-activated); --button-color-background-active: linear-gradient(var(--color-button-secondary-background-hover), var(--color-button-secondary-background-hover)); --button-color-text-default: var(--color-button-plain-text); --button-color-text-disabled: var(--color-button-plain-text-disabled); --button-color-text-activated: var(--color-button-plain-text-activated); --button-color-text-hover: var(--color-button-plain-text-hover); --button-border-color-default: transparent; } :where(button).button-icon-only, :where(input):where([type=\'submit\'], [type=\'reset\'], [type=\'button\']).button-icon-only { --button-padding: 0; width: var(--button-height); } :root { --button-color-background-default: var(--color-button-secondary-background); --button-color-background-focus: var(--color-button-secondary-background-focus); --button-color-background-hover: var(--color-button-secondary-background-hover); --button-color-background-active: linear-gradient(var(--color-button-secondary-background-hover), var(--color-button-secondary-background-hover)); --button-color-background-disabled: var(--color-button-secondary-background-disabled); --button-color-background-activated: var(--color-button-secondary-background-activated); --button-color-text-default: var(--color-button-secondary-text); --button-color-text-disabled: var(--color-button-secondary-text-disabled); --button-color-text-activated: var(--color-button-secondary-text-activated); --button-border-color-default: var(--color-button-secondary-border); } :where(button, input):where([type=\'submit\']) { --button-color-background-default: var(--color-primary-background); --button-color-background-focus: var(--color-primary-background); --button-color-background-hover: var(--color-button-primary-background-hover); --button-color-background-active: linear-gradient(var(--color-button-primary-background-hover), var(--color-button-primary-background-hover)); --button-color-background-disabled: var(--color-button-primary-background-disabled); --button-color-background-activated: var(--color-button-primary-background-activated); --button-color-text-default: var(--color-global-white); --button-color-text-disabled: var(--color-button-primary-text-disabled); --button-color-text-activated: var(--color-button-primary-text-activated); --button-border-color-default: transparent; } faceplate-tablist button { border-radius: 0; } faceplate-tablist button:first-child { border-radius: 999px 0 0 999px; } faceplate-tablist button:last-child { border-radius: 0 999px 999px 0; } faceplate-tablist a { border-bottom: 2px solid var(--button-color-primary); color: inherit; display: inline-block; font: var(--font-button-b3); padding: 0.5rem 1rem 0.375rem; } faceplate-tablist a:hover { text-decoration: none; } code, pre, kbd, samp { font-size: var(--font-code); font-family: var(--font-mono); background: var(--color-tone-6); border: 1px solid var(--color-tone-5); border-radius: 4px; padding: 2px 4px; font-size: 0.9em; } pre { background: var(--color-tone-5); border-color: var(--color-tone-4); padding: 1rem 1.4rem; max-width: 100%; overflow: auto; } kbd { border-bottom-width: 3px; } pre code { /* When <code> is in a <pre>, reset it\'s formatting to blend in */ background: inherit; font-size: inherit; color: inherit; border: 0; padding: 0; margin: 0; } code pre { /* When <pre> is in a <code>, reset it\'s formatting to blend in */ display: inline; background: inherit; font-size: inherit; color: inherit; border: 0; padding: 0; margin: 0; } details { /* Make the <details> look more "clickable" */ padding: 0.5rem 1rem; background: var(--color-tone-6); border: var(--misc-accordion-border); border-radius: var(--radius-accordion-size); } details summary { /* Makes the <summary> look more like a "clickable" link with the pointer cursor */ cursor: pointer; font-weight: bold; list-style-type: var(--misc-accordion-closed-list-style-type); } details[open] summary { /* Adjust the <details> padding while open */ margin-bottom: 0.375rem; list-style-type: var(--misc-accordion-open-list-style-type); } details[open] summary icon-caret-down, details[open] summary svg[rpl][icon-name=\'caret-down-outline\'] { transform: rotate(180deg); transition: transform 0.22s ease-in-out; } details summary icon-caret-down, details summary svg[rpl][icon-name=\'caret-down-outline\'] { transform: rotate(0); transition: transform 0.22s ease-in-out; } details[open] > *:last-child { /* Resets the bottom margin of the last element in the <details> while <details> is opened. This prevents double margins/paddings. */ margin-bottom: 0; } dt { font-weight: bold; margin-bottom: 0.5rem; } dd { margin-inline-start: 2rem; } hr { border: 0; border-bottom: 1px solid var(--color-divider-default); background-color: transparent; margin: var(--misc-divider-margin); } hr[padding=\'2xs\'] { padding: var(--spacer-2xs); } hr[padding=\'xs\'] { padding: var(--spacer-xs); } hr[padding=\'sm\'] { padding: var(--spacer-sm); } hr[padding=\'md\'] { padding: var(--spacer-md); } hr[color=\'subdued\'] { border-bottom-color: var(--color-neutral-border-weak); } hr[color=\'inverted\'] { border-bottom-color: var(--color-neutral-border-strong); } fieldset { margin-top: 1rem; padding: 1rem 2rem; border: 1px solid var(--color-tone-5); border-radius: 0.25rem; background: var(--color-tone-7); min-width: 0; } legend { padding: 0; font-weight: bold; } table { /* border-collapse sets the table\'s elements to share borders, rather than floating as separate "boxes". */ border-collapse: collapse; width: 100%; word-break: normal; margin-bottom: 1rem; } td, th { text-align: left; padding: 0.5rem; } th { background: var(--color-tone-6); } tr:nth-child(even) { /* Set every other cell slightly darker. Improves readability. */ background: var(--color-tone-6); } table caption { font-weight: bold; margin-bottom: 0.5rem; } textarea { /* Don\'t let the <textarea> extend off the screen naturally or when dragged by the user */ max-width: 100%; } ol, ul { /* Replace the browser default padding */ padding-left: 2rem; } li { margin-top: 0.25rem; } menu { list-style-type: none; padding-left: 0; border-radius: 4px; width: -moz-fit-content; width: fit-content; border: 1px solid var(--color-tone-5); } menu li { padding: 0.5rem 0.75rem; border-block-end: 1px solid var(--color-tone-5); } menu li:last-child { border-block-end: none; } menu menu, ul ul, ol ul, ul ol, ol ol { margin-bottom: 0; } ins { text-decoration-color: var(--color-success-content); text-decoration-line: overline underline; text-underline-position: under; } del { text-decoration-color: var(--color-danger-content); text-decoration-line: overline underline line-through; text-underline-position: under; } textarea, select, input { font-family: var(--font-sans); color: var(--color-input-text); padding: 0.5rem 0.75rem; margin-bottom: 0.5rem; background: var(--color-input-default); border: var(--color-input-default) solid var(--line-input-border); border-radius: var(--radius-sm); box-shadow: none; box-sizing: border-box; /* iOS form zoom fix */ font-size: 1rem; } textarea:disabled, select:disabled, input:disabled { cursor: not-allowed; opacity: 0.5; } textarea:invalid, select:invalid, input:invalid { border-color: var(--color-danger-content); } img { max-width: 100%; } input[type=\'radio\'], input[type=\'checkbox\'] { vertical-align: middle; margin-bottom: 0; margin-top: 0; } input[type=\'color\'], input[type=\'range\'] { padding: initial; } input[type=\'search\'] { border-radius: 400px; /* fix appearance in safari */ -webkit-appearance: textfield; } input { max-width: 100%; } dialog { border: 0; border-radius: 4px; padding: 1rem; box-shadow: var(--boxshadow-modal); background: var(--color-ui-modalbackground); } dialog::backdrop { background: var(--color-scrim); } .fp-avatar-container img { margin-bottom: 0; } /** Custom grid behavior for zstacks */ .dx-zstack > * { grid-column-start: 1; grid-row-start: 1; } /** Text outline classes */ .text-outline-thin-bright { text-shadow: #000 1px 0 0.5px, #000 -1px 0 0.5px, #000 0 1px 0.5px, #000 0 -1px 0.5px; } .text-outline-thick-bright { text-shadow: #000 1px 0 2px, #000 -1px 0 2px, #000 0 1px 1px, #000 0 -1px 1px, #000 1px 0 2px, #000 -1px 0 2px, #000 0 1px 1px, #000 0 -1px 1px; } .text-outline-thin-dark { text-shadow: #fff 1px 0 0.5px, #fff -1px 0 0.5px, #fff 0 1px 0.5px, #fff 0 -1px 0.5px; } .text-outline-thick-dark { text-shadow: #fff 1px 0 2px, #fff -1px 0 2px, #fff 0 1px 1px, #fff 0 -1px 1px, #fff 1px 0 2px, #fff -1px 0 2px, #fff 0 1px 1px, #fff 0 -1px 1px; } /** Custom border sizes */ .border-dx-thick { border-width: 2px; } .border-dx-thin { border-width: 1px; } /** Custom border radius sizes */ .rounded-dx-lg { border-radius: 1.5rem; } .rounded-dx-md { border-radius: 1rem; } .rounded-dx-sm { border-radius: 0.5rem; } /** Variables for app-defined colors */ :root { --dx-text-color-light: inherit; --dx-text-color-dark: inherit; --dx-bg-color-light: initial; --dx-bg-color-dark: initial; --dx-border-color-light: initial; --dx-border-color-dark: initial; } /** App-defined background color */ .dx-bg-color, .light .dx-bg-color { background-color: var(--dx-bg-color-light); } /** App-defined border color */ .dx-border-color, .light .dx-border-color { border-color: var(--dx-border-color-light); } /** App-defined text color */ .dx-text-color, .light .dx-text-color { color: var(--dx-text-color-light); } /** Theme override dark mode */ .dark .dx-bg-color { background-color: var(--dx-bg-color-dark); } .dark .dx-border-color { border-color: var(--dx-border-color-dark); } .dark .dx-text-color { color: var(--dx-text-color-dark); } /** System specified dark mode */ @media (prefers-color-scheme: dark) { .dx-bg-color { background-color: var(--dx-bg-color-dark); } .dx-text-color { color: var(--dx-text-color-dark); } .dx-border-color { border-color: var(--dx-border-color-dark); } } .container { width: 100%; } @media (min-width: 1024px) { .container { max-width: 1024px; } } /* Anchor component */ .a { color: var(--color-a-default); font-size: 1em; text-decoration: none; } .a:hover { color: var(--color-a-hover); } .a:visited:not(.no-visited), .a.visited:not(.no-visited) { color: var(--color-a-visited); } /* Button component */ .\\!button { background: var(--button-color-background) !important; border-radius: 999px !important; border: none !important; border: var(--button-border-width, 0) solid var(--button-border-color, transparent) !important; box-shadow: var(--button-shadow) !important; box-sizing: border-box !important; color: var(--button-color-text) !important; cursor: pointer !important; display: inline-block !important; font: var(--button-font) !important; height: var(--button-height) !important; line-height: calc(var(--button-height) - (2 * var(--button-border-width, 0px))) !important; overflow: hidden !important; padding: 0 calc(var(--button-padding) - var(--button-border-width, 0px)) !important; text-align: center !important; text-decoration: none !important; text-overflow: ellipsis !important; white-space: nowrap !important; outline-offset: 0 !important; --button-border-color: var(--button-border-color-default) !important; --button-border-width: var(--button-border-width-default) !important; --button-color-background: var(--button-color-background-default) !important; --button-color-text: var(--button-color-text-default) !important; /* Media query prevents sticky :hover states on mobile */ /* This is :active, AKA Pressed */ /* This is Selected */ } .button { background: var(--button-color-background); border-radius: 999px; border: none; border: var(--button-border-width, 0) solid var(--button-border-color, transparent); box-shadow: var(--button-shadow); box-sizing: border-box; color: var(--button-color-text); cursor: pointer; display: inline-block; font: var(--button-font); height: var(--button-height); line-height: calc(var(--button-height) - (2 * var(--button-border-width, 0px))); overflow: hidden; padding: 0 calc(var(--button-padding) - var(--button-border-width, 0px)); text-align: center; text-decoration: none; text-overflow: ellipsis; white-space: nowrap; outline-offset: 0; --button-border-color: var(--button-border-color-default); --button-border-width: var(--button-border-width-default); --button-color-background: var(--button-color-background-default); --button-color-text: var(--button-color-text-default); /* Media query prevents sticky :hover states on mobile */ /* This is :active, AKA Pressed */ /* This is Selected */ } .\\!button.icon { width: var(--button-height) !important; } .button.icon { width: var(--button-height); } .\\!button .button-icon { margin-right: var(--spacer-xs) !important; } .button .button-icon { margin-right: var(--spacer-xs); } .\\!button .dropdown-icon { transform: rotate(0deg) !important; transition: transform 0.2s ease-in-out !important; } .button .dropdown-icon { transform: rotate(0deg); transition: transform 0.2s ease-in-out; } .\\!button:focus { --button-color-overlay: var(--color-button-overlay-focus) !important; } .button:focus { --button-color-overlay: var(--color-button-overlay-focus); } .\\!button.hover { --button-color-overlay: var(--color-button-overlay-focus) !important; --button-border-color: var(--button-border-color-hover) !important; --button-color-background: var(--button-color-background-hover) !important; --button-color-text: var(--button-color-text-hover, var(--button-color-text-default)) !important; } .button.hover { --button-color-overlay: var(--color-button-overlay-focus); --button-border-color: var(--button-border-color-hover); --button-color-background: var(--button-color-background-hover); --button-color-text: var(--button-color-text-hover, var(--button-color-text-default)); } @media (hover: hover) { .\\!button:hover { --button-color-overlay: var(--color-button-overlay-focus) !important; --button-border-color: var(--button-border-color-hover) !important; --button-color-background: var(--button-color-background-hover) !important; --button-color-text: var(--button-color-text-hover, var(--button-color-text-default)) !important; } .button:hover { --button-color-overlay: var(--color-button-overlay-focus); --button-border-color: var(--button-border-color-hover); --button-color-background: var(--button-color-background-hover); --button-color-text: var(--button-color-text-hover, var(--button-color-text-default)); } } .\\!button:active, .\\!button.active { --button-color-overlay: var(--color-button-overlay-active) !important; --button-color-background: linear-gradient(var(--color-interactive-pressed), var(--color-interactive-pressed)), var(--button-color-background-active) !important; } .button:active, .button.active { --button-color-overlay: var(--color-button-overlay-active); --button-color-background: linear-gradient(var(--color-interactive-pressed), var(--color-interactive-pressed)), var(--button-color-background-active); } .\\!button:active, .\\!button.active { --button-color-overlay: var(--color-button-overlay-active) !important; --button-color-background: linear-gradient(var(--color-interactive-pressed), var(--color-interactive-pressed)), var(--button-color-background-active) !important; } .button.\\!active { --button-color-overlay: var(--color-button-overlay-active) !important; --button-color-background: linear-gradient(var(--color-interactive-pressed), var(--color-interactive-pressed)), var(--button-color-background-active) !important; } .\\!button:disabled, .\\!button.anchor-disabled { --button-border-color-hover: var(--button-border-color-default) !important; --button-color-background: var(--button-color-background-disabled) !important; --button-color-text: var(--button-color-text-disabled) !important; cursor: not-allowed !important; pointer-events: none !important; } .button:disabled, .button.anchor-disabled { --button-border-color-hover: var(--button-border-color-default); --button-color-background: var(--button-color-background-disabled); --button-color-text: var(--button-color-text-disabled); cursor: not-allowed; pointer-events: none; } .\\!button:disabled, .\\!button.anchor-disabled { --button-border-color-hover: var(--button-border-color-default) !important; --button-color-background: var(--button-color-background-disabled) !important; --button-color-text: var(--button-color-text-disabled) !important; cursor: not-allowed !important; pointer-events: none !important; } .\\!button.disabled.pointer-all { --button-border-color-hover: var(--button-border-color-default) !important; --button-color-background: var(--button-color-background-disabled) !important; --button-color-text: var(--button-color-text-disabled) !important; cursor: not-allowed !important; pointer-events: all !important; } .button.disabled.pointer-all { --button-border-color-hover: var(--button-border-color-default); --button-color-background: var(--button-color-background-disabled); --button-color-text: var(--button-color-text-disabled); cursor: not-allowed; pointer-events: all; } .button.\\!disabled.pointer-all { --button-border-color-hover: var(--button-border-color-default) !important; --button-color-background: var(--button-color-background-disabled) !important; --button-color-text: var(--button-color-text-disabled) !important; cursor: not-allowed !important; pointer-events: all !important; } .\\!button.button-activated { --button-border-color: var(--button-border-color-activated) !important; --button-color-background: var(--button-color-background-activated) !important; --button-color-text: var(--button-color-text-activated) !important; } .button.button-activated { --button-border-color: var(--button-border-color-activated); --button-color-background: var(--button-color-background-activated); --button-color-text: var(--button-color-text-activated); } .button-shell { background: var(--button-color-background); border-radius: 999px; border: none; border: var(--button-border-width, 0) solid var(--button-border-color, transparent); box-shadow: var(--button-shadow); box-sizing: border-box; color: var(--button-color-text); cursor: pointer; display: inline-block; font: var(--button-font); height: var(--button-height); line-height: calc(var(--button-height) - (2 * var(--button-border-width, 0px))); overflow: hidden; padding: 0 calc(var(--button-padding) - var(--button-border-width, 0px)); text-align: center; text-decoration: none; text-overflow: ellipsis; white-space: nowrap; outline-offset: 0; --button-border-color: var(--button-border-color-default); --button-border-width: var(--button-border-width-default); --button-color-background: var(--button-color-background-default); --button-color-text: var(--button-color-text-default); } .button-shell.icon { width: var(--button-height); } .button-large { --button-height: var(--size-button-lg-h); --button-padding: var(--spacer-xs); --button-font: var(--font-button-lg); --button-border-width-default: var(--line-button-lg-border); } .button-medium { --button-height: var(--size-button-md-h); --button-padding: var(--spacer-xs); --button-font: var(--font-button-md); --button-border-width-default: var(--line-button-md-border); } .button-small { --button-height: var(--size-button-sm-h); --button-padding: var(--spacer-2xs); --button-font: var(--font-button-sm); --button-border-width-default: var(--line-button-sm-border); } .button-x-small { --button-height: var(--size-button-xs-h); --button-padding: var(--spacer-sm); --button-font: var(--font-button-xs); --button-border-width-default: var(--line-button-xs-border); } .button-primary { --button-color-background-default: var(--color-primary-background); --button-color-background-focus: var(--color-primary-background); --button-color-background-hover: var(--color-button-primary-background-hover); --button-color-background-active: linear-gradient(var(--color-button-primary-background-hover), var(--color-button-primary-background-hover)); --button-color-background-disabled: var(--color-button-primary-background-disabled); --button-color-background-activated: var(--color-button-primary-background-activated); --button-color-text-default: var(--color-global-white); --button-color-text-disabled: var(--color-button-primary-text-disabled); --button-color-text-activated: var(--color-button-primary-text-activated); --button-border-color-default: transparent; } .button-secondary { --button-color-background-default: var(--color-button-secondary-background); --button-color-background-focus: var(--color-button-secondary-background-focus); --button-color-background-hover: var(--color-button-secondary-background-hover); --button-color-background-active: linear-gradient(var(--color-button-secondary-background-hover), var(--color-button-secondary-background-hover)); --button-color-background-disabled: var(--color-button-secondary-background-disabled); --button-color-background-activated: var(--color-button-secondary-background-activated); --button-color-text-default: var(--color-button-secondary-text); --button-color-text-disabled: var(--color-button-secondary-text-disabled); --button-color-text-activated: var(--color-button-secondary-text-activated); --button-border-color-default: var(--color-button-secondary-border); } .button-tertiary { --button-color-background-default: var(--color-button-tertiary-background); --button-color-background-focus: var(--color-button-tertiary-background-focus); --button-color-background-hover: var(--color-button-tertiary-background-hover); --button-color-background-disabled: var(--color-button-tertiary-background-disabled); --button-color-background-activated: var(--color-button-tertiary-background-activated); --button-color-text-default: var(--color-button-tertiary-text); --button-color-text-disabled: var(--color-button-tertiary-text-disabled); --button-color-text-activated: var(--color-button-tertiary-text-activated); --button-border-color-default: transparent; } .button-plain { --button-color-background-default: transparent; --button-color-background-focus: transparent; --button-color-background-hover: var(--color-button-plain-background-hover); --button-color-background-disabled: var(--color-button-plain-background-disabled); --button-color-background-activated: var(--color-button-plain-background-activated); --button-color-background-active: linear-gradient(var(--color-button-secondary-background-hover), var(--color-button-secondary-background-hover)); --button-color-text-default: var(--color-button-plain-text); --button-color-text-disabled: var(--color-button-plain-text-disabled); --button-color-text-activated: var(--color-button-plain-text-activated); --button-color-text-hover: var(--color-button-plain-text-hover); --button-border-color-default: transparent; } .button-plain-weak { --button-color-background-default: transparent; --button-color-background-focus: transparent; --button-color-background-hover: var(--color-button-plain-background-hover); --button-color-background-disabled: var(--color-button-plain-background-disabled); --button-color-background-activated: var(--color-button-plain-background-activated); --button-color-background-active: linear-gradient(var(--color-button-secondary-background-hover), var(--color-button-secondary-background-hover)); --button-color-text-default: var(--color-button-plain-text); --button-color-text-disabled: var(--color-button-plain-text-disabled); --button-color-text-activated: var(--color-button-plain-text-activated); --button-color-text-hover: var(--color-button-plain-text-hover); --button-border-color-default: transparent; --button-color-text-default: var(--color-button-plain-text-weak); } .button-bordered { --button-color-background-default: transparent; --button-color-background-focus: transparent; --button-color-background-hover: transparent; --button-color-background-active: linear-gradient(transparent, transparent); --button-color-background-disabled: transparent; --button-color-background-activated: var(--color-button-secondary-background-activated); --button-color-text-default: var(--color-secondary-plain); --button-color-text-disabled: var(--color-interactive-content-disabled); --button-color-text-activated: var(--color-neutral-content-strong); --button-color-text-hover: var(--color-secondary-plain-hover); --button-border-color-default: var(--color-neutral-border-medium); --button-border-color-hover: var(--color-neutral-border-strong); --button-border-color-active: var(--color-neutral-border-strong); --button-border-color-activated: var(--color-neutral-border-strong); --button-border-color-disabled: var(--color-neutral-content-disabled); --button-border-width-default: var(--line-sm); --button-border-width-activated: var(--line-sm); } .button-bordered-cab { --button-color-background-default: transparent; --button-color-background-focus: transparent; --button-color-background-hover: transparent; --button-color-background-active: linear-gradient(transparent, transparent); --button-color-background-disabled: transparent; --button-color-background-activated: var(--color-button-secondary-background-activated); --button-color-text-default: var(--color-secondary-plain); --button-color-text-disabled: var(--color-interactive-content-disabled); --button-color-text-activated: var(--color-neutral-content-strong); --button-color-text-hover: var(--color-secondary-plain-hover); --button-border-color-default: var(--color-neutral-border-medium); --button-border-color-hover: var(--color-neutral-border-strong); --button-border-color-active: var(--color-neutral-border-strong); --button-border-color-activated: var(--color-neutral-border-strong); --button-border-color-disabled: var(--color-neutral-content-disabled); --button-border-width-default: var(--line-sm); --button-border-width-activated: var(--line-sm); --button-color-background-hover: var(--color-button-secondary-background-hover); --button-border-color-default: var(--color-neutral-border-weak); --button-border-color-hover: var(--color-neutral-border-weak); --button-border-color-active: var(--color-neutral-border-weak); --button-border-color-activated: var(--color-neutral-border-weak); } .button-destructive { --button-color-background-default: var(--color-danger-background); --button-color-background-focus: var(--color-danger-background-hover); --button-color-background-hover: var(--color-danger-background-hover); --button-color-background-active: linear-gradient(var(--color-danger-background-hover), var(--color-danger-background-hover)); --button-color-background-disabled: var(--color-button-secondary-background-disabled); --button-color-text-default: var(--color-danger-content-default); --button-color-text-disabled: var(--color-button-secondary-text-disabled); --button-border-color-default: transparent; --button-border-color-hover: transparent; --button-border-color-active: transparent; } .button-media { --button-color-background-default: var(--color-media-background); --button-color-background-focus: var(--color-media-background-hover); --button-color-background-hover: var(--color-media-background-hover); --button-color-background-active: linear-gradient(var(--color-media-background-hover), var(--color-media-background-hover)); --button-border-color-activated: var(--color-neutral-content-strong); --button-color-text-default: white; --button-color-text-disabled: var(--color-media-onbackground-disabled); --button-color-background-disabled: var(--color-media-background); } .button-media-cab { --button-color-background-default: transparent; --button-color-background-hover: var(--color-media-background-hover); --button-color-background-disabled: transparent; --button-color-background-active: linear-gradient(var(--color-media-background-hover), var(--color-media-background-hover)); --button-color-background-activated: var(--color-media-background-selected); --button-color-text-default: var(--color-media-onBackground); --button-color-text-activated: var(--color-media-onBackground); --button-color-text-hover: var(--color-media-onBackground); --button-color-text-disabled: var(--color-media-onbackground-disabled); --button-border-color-default: var(--color-media-border-weak); --button-border-color-hover: var(--color-media-border-weak); --button-border-color-disabled: var(--color-media-border-weak); --button-border-width-default: var(--line-sm); } .button-brand { --button-color-background-default: var(--color-brand-background); --button-color-background-hover: var(--color-brand-background-hover); --button-color-background-active: linear-gradient(var(--color-brand-background-hover), var(--color-brand-background-hover)); --button-color-background-disabled: var(--color-interactive-background-disabled); --button-color-text-default: var(--color-danger-content-default); --button-color-text-disabled: var(--color-interactive-content-disabled); --button-border-color-default: transparent; } .button-success { --button-color-background-default: var(--color-success-background); --button-color-background-focus: var(--color-success-background-hover); --button-color-background-hover: var(--color-success-background-hover); --button-color-background-active: linear-gradient(var(--color-success-background-hover), var(--color-success-background-hover)); --button-color-background-disabled: var(--color-button-primary-background-disabled); --button-color-text-default: var(--color-success-onBackground); --button-color-text-disabled: var(--color-button-primary-text-disabled); --button-border-color-default: transparent; } .button-plain-inverted { --button-color-background-default: transparent; --button-color-background-focus: var(--color-neutral-content); --button-color-background-hover: var(--color-neutral-content); --button-color-background-active: var(--color-interactive-pressed); --button-color-background-disabled: transparent; --button-color-text-default: var(--color-neutral-background-weak); --button-color-text-disabled: var(--color-neutral-content); --button-border-color-default: transparent; --button-color-background-activated: var(--color-button-plain-inverted-background-activated); --button-color-text-activated: var(--color-button-plain-inverted-text-activated); } /* Featured avatar */ .full-snoo-xs { --full-snoo-size: var(--rem48); --full-snoo-top-spacer: 0.125rem; --full-snoo-bottom-spacer: calc(-1 * 0.1875rem); } .full-snoo-xs:not(.no-safe-area) { height: var(--full-snoo-size); width: var(--full-snoo-size); margin-top: var(--full-snoo-top-spacer); } .full-snoo-xs:not(.no-safe-area) > img { bottom: var(--full-snoo-bottom-spacer); } .full-snoo-xs > img { width: var(--rem36); } .full-snoo-sm { --full-snoo-size: var(--rem64); --full-snoo-top-spacer: 0.125rem; --full-snoo-bottom-spacer: calc(-1 * var(--rem4)); } .full-snoo-sm:not(.no-safe-area) { height: var(--full-snoo-size); width: var(--full-snoo-size); margin-top: var(--full-snoo-top-spacer); } .full-snoo-sm:not(.no-safe-area) > img { bottom: var(--full-snoo-bottom-spacer); } .full-snoo-sm > img { width: var(--rem48); } .full-snoo-md { --full-snoo-size: var(--rem88); --full-snoo-top-spacer: var(--spacer-2xs); --full-snoo-bottom-spacer: calc(-1 * var(--rem6)); } .full-snoo-md:not(.no-safe-area) { height: var(--full-snoo-size); width: var(--full-snoo-size); margin-top: var(--full-snoo-top-spacer); } .full-snoo-md:not(.no-safe-area) > img { bottom: var(--full-snoo-bottom-spacer); } .full-snoo-md > img { width: var(--rem64); } .full-snoo-lg { --full-snoo-size: var(--rem144); --full-snoo-top-spacer: 0.375rem; --full-snoo-bottom-spacer: calc(-1 * var(--rem10)); } .full-snoo-lg:not(.no-safe-area) { height: var(--full-snoo-size); width: var(--full-snoo-size); margin-top: var(--full-snoo-top-spacer); } .full-snoo-lg:not(.no-safe-area) > img { bottom: var(--full-snoo-bottom-spacer); } .full-snoo-lg > img { width: 6.625rem; } .full-snoo-xl { --full-snoo-size: var(--rem192); --full-snoo-top-spacer: var(--spacer-xs); --full-snoo-bottom-spacer: calc(-1 * var(--rem14)); } .full-snoo-xl:not(.no-safe-area) { height: var(--full-snoo-size); width: var(--full-snoo-size); margin-top: var(--full-snoo-top-spacer); } .full-snoo-xl:not(.no-safe-area) > img { bottom: var(--full-snoo-bottom-spacer); } .full-snoo-xl > img { width: 8.8125rem; } .full-snoo-2xl { --full-snoo-size: var(--rem320); --full-snoo-top-spacer: var(--spacer-sm); --full-snoo-bottom-spacer: calc(-1 * var(--rem22)); } .full-snoo-2xl:not(.no-safe-area) { height: var(--full-snoo-size); width: var(--full-snoo-size); margin-top: var(--full-snoo-top-spacer); } .full-snoo-2xl:not(.no-safe-area) > img { bottom: var(--full-snoo-bottom-spacer); } .full-snoo-2xl > img { width: 14.75rem; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border-width: 0; } .pointer-events-none { pointer-events: none; } .pointer-events-auto { pointer-events: auto; } .\\!visible { visibility: visible !important; } .visible { visibility: visible; } .invisible { visibility: hidden; } .collapse { visibility: collapse; } .static { position: static; } .fixed { position: fixed; } .absolute { position: absolute; } .relative { position: relative; } .inset-0 { inset: 0px; } .-right-\\[\\.65rem\\] { right: -.65rem; } .-right-\\[\\.75rem\\] { right: -.75rem; } .-right-\\[0\\.0625rem\\] { right: -0.0625rem; } .-right-\\[0\\.0825rem\\] { right: -0.0825rem; } .-right-\\[0\\.125rem\\] { right: -0.125rem; } .bottom-0 { bottom: 0px; } .left-0 { left: 0px; } .left-xs { left: 0.5rem; } .right-0 { right: 0px; } .right-\\[0\\.05rem\\] { right: 0.05rem; } .right-\\[0\\.10rem\\] { right: 0.10rem; } .right-xs { right: 0.5rem; } .top-0 { top: 0px; } .top-1\\/2 { top: 50%; } .top-xs { top: 0.5rem; } .isolate { isolation: isolate; } .-z-10 { z-index: -10; } .col-start-1 { grid-column-start: 1; } .row-start-1 { grid-row-start: 1; } .m-0 { margin: 0px; } .-mx-xs { margin-left: -0.5rem; margin-right: -0.5rem; } .mx-auto { margin-left: auto; margin-right: auto; } .mx-xs { margin-left: 0.5rem; margin-right: 0.5rem; } .-ml-\\[var\\(--rem10\\)\\] { margin-left: calc(var(--rem10) * -1); } .-ml-\\[var\\(--rem12\\)\\] { margin-left: calc(var(--rem12) * -1); } .-ml-\\[var\\(--rem14\\)\\] { margin-left: calc(var(--rem14) * -1); } .-ml-\\[var\\(--rem16\\)\\] { margin-left: calc(var(--rem16) * -1); } .-ml-\\[var\\(--rem18\\)\\] { margin-left: calc(var(--rem18) * -1); } .-ml-\\[var\\(--rem20\\)\\] { margin-left: calc(var(--rem20) * -1); } .-ml-\\[var\\(--rem4\\)\\] { margin-left: calc(var(--rem4) * -1); } .-ml-\\[var\\(--rem6\\)\\] { margin-left: calc(var(--rem6) * -1); } .-ml-\\[var\\(--rem8\\)\\] { margin-left: calc(var(--rem8) * -1); } .-mt-2xs { margin-top: -0.25rem; } .-mt-\\[2px\\] { margin-top: -2px; } .mb-0 { margin-bottom: 0px; } .ml-0 { margin-left: 0px; } .ml-2xs { margin-left: 0.25rem; } .ml-\\[-\\.25rem\\] { margin-left: -.25rem; } .ml-\\[-2px\\] { margin-left: -2px; } .ml-\\[3px\\] { margin-left: 3px; } .ml-md { margin-left: 1rem; } .ml-sm { margin-left: 0.75rem; } .ml-xs { margin-left: 0.5rem; } .mr-2xs { margin-right: 0.25rem; } .mr-\\[6px\\] { margin-right: 6px; } .mr-\\[calc\\(var\\(--size-button-sm-h\\)-var\\(--rem10\\)-var\\(--button-border-width-default\\)\\)\\] { margin-right: calc(var(--size-button-sm-h) - var(--rem10) - var(--button-border-width-default)); } .mr-\\[var\\(--rem6\\)\\] { margin-right: var(--rem6); } .mr-md { margin-right: 1rem; } .mr-sm { margin-right: 0.75rem; } .mr-xs { margin-right: 0.5rem; } .mt-0 { margin-top: 0px; } .mt-\\[-0\\.125rem\\] { margin-top: -0.125rem; } .mt-\\[-0\\.25rem\\] { margin-top: -0.25rem; } .mt-xs { margin-top: 0.5rem; } .box-border { box-sizing: border-box; } .box-content { box-sizing: content-box; } .line-clamp-1 { overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; } .\\!block { display: block !important; } .block { display: block; } .inline-block { display: inline-block; } .inline { display: inline; } .flex { display: flex; } .inline-flex { display: inline-flex; } .table { display: table; } .grid { display: grid; } .contents { display: contents; } .list-item { display: list-item; } .hidden { display: none; } .aspect-square { aspect-ratio: 1 / 1; } .h-100 { height: 100%; } .h-2xl { height: 3rem; } .h-2xs { height: 0.25rem; } .h-\\[\\.25rem\\] { height: .25rem; } .h-\\[\\.375rem\\] { height: .375rem; } .h-\\[\\.625rem\\] { height: .625rem; } .h-\\[1\\.25rem\\] { height: 1.25rem; } .h-\\[1\\.5rem\\] { height: 1.5rem; } .h-\\[1rem\\] { height: 1rem; } .h-\\[2\\.5rem\\] { height: 2.5rem; } .h-\\[2\\.875rem\\] { height: 2.875rem; } .h-\\[20px\\] { height: 20px; } .h-\\[2px\\] { height: 2px; } .h-\\[2rem\\] { height: 2rem; } .h-\\[3\\.25rem\\] { height: 3.25rem; } .h-\\[3\\.5rem\\] { height: 3.5rem; } .h-\\[3rem\\] { height: 3rem; } .h-\\[4\\.5rem\\] { height: 4.5rem; } .h-\\[4rem\\] { height: 4rem; } .h-\\[5\\.5rem\\] { height: 5.5rem; } .h-auto { height: auto; } .h-full { height: 100%; } .h-lg { height: 1.5rem; } .h-md { height: 1rem; } .h-px { height: 1px; } .h-sm { height: 0.75rem; } .h-xl { height: 2rem; } .h-xs { height: 0.5rem; } .max-h-\\[596px\\] { max-height: 596px; } .max-h-\\[max\\(23vw\\2c 250px\\)\\] { max-height: max(23vw,250px); } .max-h-\\[min\\(20vw\\2c 150px\\)\\] { max-height: min(20vw,150px); } .max-h-\\[var\\(--rem20\\)\\] { max-height: var(--rem20); } .min-h-\\[1\\.5rem\\] { min-height: 1.5rem; } .min-h-\\[1rem\\] { min-height: 1rem; } .min-h-\\[2\\.5rem\\] { min-height: 2.5rem; } .min-h-\\[2\\.875rem\\] { min-height: 2.875rem; } .min-h-\\[2rem\\] { min-height: 2rem; } .min-h-\\[3\\.25rem\\] { min-height: 3.25rem; } .min-h-\\[3rem\\] { min-height: 3rem; } .min-h-\\[4\\.5rem\\] { min-height: 4.5rem; } .min-h-\\[min\\(20vw\\2c 150px\\)\\] { min-height: min(20vw,150px); } .w-100 { width: 100%; } .w-2xl { width: 3rem; } .w-2xs { width: 0.25rem; } .w-3xl { width: 4rem; } .w-\\[\\.25rem\\] { width: .25rem; } .w-\\[\\.375rem\\] { width: .375rem; } .w-\\[\\.625rem\\] { width: .625rem; } .w-\\[1\\.25rem\\] { width: 1.25rem; } .w-\\[1\\.5rem\\] { width: 1.5rem; } .w-\\[1rem\\] { width: 1rem; } .w-\\[2\\.5rem\\] { width: 2.5rem; } .w-\\[2\\.875rem\\] { width: 2.875rem; } .w-\\[2rem\\] { width: 2rem; } .w-\\[3\\.25rem\\] { width: 3.25rem; } .w-\\[3\\.5rem\\] { width: 3.5rem; } .w-\\[32rem\\] { width: 32rem; } .w-\\[3rem\\] { width: 3rem; } .w-\\[4\\.5rem\\] { width: 4.5rem; } .w-\\[4rem\\] { width: 4rem; } .w-\\[5\\.5rem\\] { width: 5.5rem; } .w-\\[95vw\\] { width: 95vw; } .w-full { width: 100%; } .w-lg { width: 1.5rem; } .w-md { width: 1rem; } .w-px { width: 1px; } .w-sm { width: 0.75rem; } .w-xl { width: 2rem; } .w-xs { width: 0.5rem; } .min-w-0 { min-width: 0px; } .min-w-\\[0\\.5rem\\] { min-width: 0.5rem; } .min-w-\\[1\\.5rem\\] { min-width: 1.5rem; } .min-w-\\[1rem\\] { min-width: 1rem; } .min-w-\\[2\\.5rem\\] { min-width: 2.5rem; } .min-w-\\[2\\.875rem\\] { min-width: 2.875rem; } .min-w-\\[2rem\\] { min-width: 2rem; } .min-w-\\[3\\.25rem\\] { min-width: 3.25rem; } .min-w-\\[3rem\\] { min-width: 3rem; } .min-w-\\[4\\.5rem\\] { min-width: 4.5rem; } .max-w-\\[480px\\] { max-width: 480px; } .max-w-full { max-width: 100%; } .max-w-xl { max-width: 36rem; } .flex-1 { flex: 1 1 0%; } .flex-shrink { flex-shrink: 1; } .shrink { flex-shrink: 1; } .shrink-0 { flex-shrink: 0; } .flex-grow { flex-grow: 1; } .grow { flex-grow: 1; } .grow-0 { flex-grow: 0; } .translate-x-px { --tw-translate-x: 1px; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); } .-scale-x-100 { --tw-scale-x: -1; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); } .scale-x-100 { --tw-scale-x: 1; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); } .transform { transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); } @keyframes spin { to { transform: rotate(360deg); } } .animate-spin { animation: spin 1s linear infinite; } .cursor-auto { cursor: auto; } .cursor-pointer { cursor: pointer; } .select-none { -webkit-user-select: none; -moz-user-select: none; user-select: none; } .select-text { -webkit-user-select: text; -moz-user-select: text; user-select: text; } .select-auto { -webkit-user-select: auto; -moz-user-select: auto; user-select: auto; } .resize { resize: both; } .list-none { list-style-type: none; } .auto-cols-fr { grid-auto-columns: minmax(0, 1fr); } .auto-rows-fr { grid-auto-rows: minmax(0, 1fr); } .grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); } .flex-row { flex-direction: row; } .flex-row-reverse { flex-direction: row-reverse; } .flex-col { flex-direction: column; } .flex-col-reverse { flex-direction: column-reverse; } .flex-wrap { flex-wrap: wrap; } .content-center { align-content: center; } .content-start { align-content: flex-start; } .content-end { align-content: flex-end; } .content-stretch { align-content: stretch; } .items-start { align-items: flex-start; } .items-end { align-items: flex-end; } .items-center { align-items: center; } .items-stretch { align-items: stretch; } .justify-start { justify-content: flex-start; } .justify-end { justify-content: flex-end; } .justify-center { justify-content: center; } .justify-between { justify-content: space-between; } .justify-items-start { justify-items: start; } .justify-items-end { justify-items: end; } .justify-items-center { justify-items: center; } .gap-2xs { gap: 0.25rem; } .gap-\\[0\\.5rem\\] { gap: 0.5rem; } .gap-\\[var\\(--rem4\\)\\] { gap: var(--rem4); } .gap-md { gap: 1rem; } .gap-sm { gap: 0.75rem; } .gap-xs { gap: 0.5rem; } .gap-y-sm { row-gap: 0.75rem; } .gap-y-xs { row-gap: 0.5rem; } .self-start { align-self: flex-start; } .overflow-hidden { overflow: hidden; } .overflow-visible { overflow: visible; } .truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .text-ellipsis { text-overflow: ellipsis; } .text-clip { text-overflow: clip; } .whitespace-nowrap { white-space: nowrap; } .whitespace-pre-line { white-space: pre-line; } .rounded-\\[\\.25rem\\] { border-radius: .25rem; } .rounded-\\[\\.50rem\\] { border-radius: .50rem; } .rounded-\\[\\.5rem\\] { border-radius: .5rem; } .rounded-\\[\\.75rem\\] { border-radius: .75rem; } .rounded-\\[1rem\\] { border-radius: 1rem; } .rounded-full { border-radius: 624.9375rem; } .rounded-none { border-radius: 0rem; } .rounded-sm { border-radius: 0.25rem; } .rounded-l-\\[12px\\] { border-top-left-radius: 12px; border-bottom-left-radius: 12px; } .rounded-l-\\[8px\\] { border-top-left-radius: 8px; border-bottom-left-radius: 8px; } .rounded-r-\\[12px\\] { border-top-right-radius: 12px; border-bottom-right-radius: 12px; } .rounded-r-\\[8px\\] { border-top-right-radius: 8px; border-bottom-right-radius: 8px; } .border { border-width: 0.0625rem; } .border-0 { border-width: 0rem; } .border-\\[\\.25rem\\] { border-width: .25rem; } .border-\\[0\\.125rem\\] { border-width: 0.125rem; } .border-\\[0\\.1875rem\\] { border-width: 0.1875rem; } .border-lg { border-width: 0.25rem; } .border-md { border-width: 0.125rem; } .border-sm { border-width: 0.0625rem; } .border-b { border-bottom-width: 0.0625rem; } .border-t-sm { border-top-width: 0.0625rem; } .border-solid { border-style: solid; } .border-dashed { border-style: dashed; } .border-none { border-style: none; } .border-action-downvote { border-color: var(--color-action-downvote); } .border-action-upvote { border-color: var(--color-action-upvote); } .border-alienblue-600 { --tw-border-opacity: 1; border-color: rgb(17 91 202 / var(--tw-border-opacity)); } .border-neutral-background { border-color: var(--color-neutral-background); } .border-neutral-border { border-color: var(--color-neutral-border); } .border-neutral-border-weak { border-color: var(--color-neutral-border-weak); } .border-tone-4 { border-color: var(--color-tone-4); } .border-transparent { border-color: transparent; } .bg-\\[color\\:var\\(--button-color-background-default\\)\\] { background-color: var(--button-color-background-default); } .bg-\\[color\\:var\\(--color-button-plain-background-disabled\\)\\] { background-color: var(--color-button-plain-background-disabled); } .bg-action-downvote { background-color: var(--color-action-downvote); } .bg-action-upvote { background-color: var(--color-action-upvote); } .bg-brand-background { background-color: var(--color-brand-background); } .bg-danger-background { background-color: var(--color-danger-background); } .bg-interactive-background-disabled { background-color: var(--color-interactive-background-disabled); } .bg-interactive-content-disabled { background-color: var(--color-interactive-content-disabled); } .bg-inverted-neutral-background { background-color: var(--color-inverted-neutral-background); } .bg-media-background { background-color: var(--color-media-background); } .bg-neutral-background { background-color: var(--color-neutral-background); } .bg-neutral-background-selected { background-color: var(--color-neutral-background-selected); } .bg-neutral-background-weak { background-color: var(--color-neutral-background-weak); } .bg-neutral-content { background-color: var(--color-neutral-content); } .bg-online { background-color: var(--color-online); } .bg-primary { background-color: var(--color-primary); } .bg-secondary-background { background-color: var(--color-secondary-background); } .bg-secondary-background-selected { background-color: var(--color-secondary-background-selected); } .bg-secondary-plain { background-color: var(--color-secondary-plain); } .bg-success-background { background-color: var(--color-success-background); } .bg-transparent { background-color: transparent; } .bg-warning-background { background-color: var(--color-warning-background); } .bg-contain { background-size: contain; } .bg-cover { background-size: cover; } .bg-center { background-position: center; } .bg-no-repeat { background-repeat: no-repeat; } .object-cover { -o-object-fit: cover; object-fit: cover; } .object-center { -o-object-position: center; object-position: center; } .p-0 { padding: 0px; } .p-2xs { padding: 0.25rem; } .p-md { padding: 1rem; } .p-xl { padding: 2rem; } .p-xs { padding: 0.5rem; } .px-2xs { padding-left: 0.25rem; padding-right: 0.25rem; } .px-\\[0\\.375rem\\] { padding-left: 0.375rem; padding-right: 0.375rem; } .px-\\[var\\(--rem10\\)\\] { padding-left: var(--rem10); padding-right: var(--rem10); } .px-\\[var\\(--rem12\\)\\] { padding-left: var(--rem12); padding-right: var(--rem12); } .px-\\[var\\(--rem14\\)\\] { padding-left: var(--rem14); padding-right: var(--rem14); } .px-\\[var\\(--rem6\\)\\] { padding-left: var(--rem6); padding-right: var(--rem6); } .px-\\[var\\(--rem8\\)\\] { padding-left: var(--rem8); padding-right: var(--rem8); } .px-md { padding-left: 1rem; padding-right: 1rem; } .px-sm { padding-left: 0.75rem; padding-right: 0.75rem; } .px-xs { padding-left: 0.5rem; padding-right: 0.5rem; } .py-2xs { padding-top: 0.25rem; padding-bottom: 0.25rem; } .py-\\[0\\.125rem\\] { padding-top: 0.125rem; padding-bottom: 0.125rem; } .py-\\[var\\(--rem10\\)\\] { padding-top: var(--rem10); padding-bottom: var(--rem10); } .py-\\[var\\(--rem14\\)\\] { padding-top: var(--rem14); padding-bottom: var(--rem14); } .py-\\[var\\(--rem6\\)\\] { padding-top: var(--rem6); padding-bottom: var(--rem6); } .py-xs { padding-top: 0.5rem; padding-bottom: 0.5rem; } .pb-md { padding-bottom: 1rem; } .pl-\\[var\\(--rem10\\)\\] { padding-left: var(--rem10); } .pl-\\[var\\(--rem12\\)\\] { padding-left: var(--rem12); } .pl-\\[var\\(--rem14\\)\\] { padding-left: var(--rem14); } .pl-\\[var\\(--rem16\\)\\] { padding-left: var(--rem16); } .pl-md { padding-left: 1rem; } .pr-\\[10px\\] { padding-right: 10px; } .pr-\\[3px\\] { padding-right: 3px; } .pr-\\[var\\(--rem10\\)\\] { padding-right: var(--rem10); } .pr-\\[var\\(--rem12\\)\\] { padding-right: var(--rem12); } .pr-\\[var\\(--rem14\\)\\] { padding-right: var(--rem14); } .pr-\\[var\\(--rem16\\)\\] { padding-right: var(--rem16); } .pr-\\[var\\(--rem6\\)\\] { padding-right: var(--rem6); } .pr-\\[var\\(--rem8\\)\\] { padding-right: var(--rem8); } .pr-md { padding-right: 1rem; } .pt-md { padding-top: 1rem; } .text-center { text-align: center; } .text-start { text-align: start; } .text-end { text-align: end; } .align-middle { vertical-align: middle; } .text-10 { font-size: 0.625rem; line-height: 1rem; } .text-12 { font-size: 0.75rem; line-height: 1rem; } .text-14 { font-size: 0.875rem; line-height: 1.25rem; } .text-16 { font-size: 1rem; line-height: 1.25rem; } .text-18 { font-size: 1.125rem; line-height: 1.5rem; } .text-20 { font-size: 1.25rem; line-height: 1.25rem; } .text-24 { font-size: 1.5rem; line-height: 1.75rem; } .font-bold { font-weight: 700; } .font-normal { font-weight: 400; } .font-semibold { font-weight: 600; } .uppercase { text-transform: uppercase; } .normal-case { text-transform: none; } .leading-4 { line-height: 1rem; } .leading-5 { line-height: 1.25rem; } .tracking-widest { letter-spacing: 0.1em; } .\\!text-neutral-content-strong { color: var(--color-neutral-content-strong) !important; } .text-\\[color\\:var\\(--button-color-text-default\\)\\] { color: var(--button-color-text-default); } .text-\\[color\\:var\\(--color-button-plain-text-disabled\\)\\] { color: var(--color-button-plain-text-disabled); } .text-\\[color\\:var\\(--color-button-secondary-text-disabled\\)\\] { color: var(--color-button-secondary-text-disabled); } .text-action-downvote { color: var(--color-action-downvote); } .text-action-upvote { color: var(--color-action-upvote); } .text-ai-plain { color: var(--color-ai-plain); } .text-brand-onBackground { color: var(--color-brand-onBackground); } .text-category-nsfw { color: var(--color-category-nsfw); } .text-category-spoiler { color: var(--color-category-spoiler); } .text-danger-content { color: var(--color-danger-content); } .text-global-white { --tw-text-opacity: 1; color: rgb(255 255 255 / var(--tw-text-opacity)); } .text-interactive-content-disabled { color: var(--color-interactive-content-disabled); } .text-inverted-secondary-plain { color: var(--color-inverted-secondary-plain); } .text-media-onBackground { color: var(--color-media-onBackground); } .text-media-onbackground { color: var(--color-media-onbackground); } .text-media-onbackground-weak { color: var(--color-media-onbackground-weak); } .text-neutral-background { color: var(--color-neutral-background); } .text-neutral-content-disabled { color: var(--color-neutral-content-disabled); } .text-neutral-content-strong { color: var(--color-neutral-content-strong); } .text-neutral-content-weak { color: var(--color-neutral-content-weak); } .text-primary { color: var(--color-primary); } .text-primary-onBackground { color: var(--color-primary-onBackground); } .text-secondary { color: var(--color-secondary); } .text-secondary-onBackground { color: var(--color-secondary-onBackground); } .text-secondary-plain { color: var(--color-secondary-plain); } .text-secondary-plain-weak { color: var(--color-secondary-plain-weak); } .text-secondary-weak { color: var(--color-secondary-weak); } .text-warning-content { color: var(--color-warning-content); } .underline { text-decoration-line: underline; } .no-underline { text-decoration-line: none; } .opacity-30 { opacity: 0.3; } .opacity-40 { opacity: 0.4; } .opacity-60 { opacity: 0.6; } .outline { outline-style: solid; } .-outline-offset-1 { outline-offset: -1px; } .ring { --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color); box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000); } .blur-sm { --tw-blur: blur(0.25rem); filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow); } .drop-shadow { --tw-drop-shadow: drop-shadow(0 1px 2px rgb(0 0 0 / 0.1)) drop-shadow(0 1px 1px rgb(0 0 0 / 0.06)); filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow); } .invert { --tw-invert: invert(100%); filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow); } .filter { filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow); } .transition { transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; } .ease-in-out { transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); } /** * Styles defined in this file are not shared outside of this package and are only available * to the components within this package. To share custom styles with the host application * for purposes such as server-side rendering use custom-styles.css instead. */ .before\\:content-\\[\\\'\\2022\\\'\\]::before { --tw-content: \'•\'; content: var(--tw-content); } .visited\\:text-media-onbackground:visited { color: var(--color-media-onbackground); } .visited\\:text-neutral-background-weak:visited { color: var(--color-neutral-background-weak); } .visited\\:text-secondary-plain:visited { color: var(--color-secondary-plain); } .visited\\:text-secondary-plain-weak:visited { color: var(--color-secondary-plain-weak); } @media (hover: hover) and (pointer: fine) { .hover\\:bg-downvote-background-hover:hover { background-color: var(--color-downvote-background-hover); } .hover\\:bg-neutral-background-hover:hover { background-color: var(--color-neutral-background-hover); } .hover\\:bg-neutral-background-selected:hover { background-color: var(--color-neutral-background-selected); } .hover\\:bg-secondary-background-hover:hover { background-color: var(--color-secondary-background-hover); } .hover\\:bg-upvote-background-hover:hover { background-color: var(--color-upvote-background-hover); } .hover\\:text-action-downvote:hover { color: var(--color-action-downvote); } .hover\\:text-action-upvote:hover { color: var(--color-action-upvote); } .hover\\:text-danger-content-hover:hover { color: var(--color-danger-content-hover); } .hover\\:text-global-white:hover { --tw-text-opacity: 1; color: rgb(255 255 255 / var(--tw-text-opacity)); } .hover\\:text-inverted-secondary-plain-hover:hover { color: var(--color-inverted-secondary-plain-hover); } .hover\\:text-secondary-hover:hover { color: var(--color-secondary-hover); } .hover\\:text-secondary-plain:hover { color: var(--color-secondary-plain); } .hover\\:text-secondary-plain-hover:hover { color: var(--color-secondary-plain-hover); } .hover\\:underline:hover { text-decoration-line: underline; } .hover\\:no-underline:hover { text-decoration-line: none; } } .focus-visible\\:text-action-downvote:focus-visible { color: var(--color-action-downvote); } .focus-visible\\:text-action-upvote:focus-visible { color: var(--color-action-upvote); } .active\\:bg-interactive-pressed:active { background-color: var(--color-interactive-pressed); } .active\\:bg-secondary-background:active { background-color: var(--color-secondary-background); } .disabled\\:bg-interactive-background-disabled:disabled { background-color: var(--color-interactive-background-disabled); } .disabled\\:text-interactive-content-disabled:disabled { color: var(--color-interactive-content-disabled); } @media (hover: hover) and (pointer: fine) { .group:hover .group-hover\\:visible { visibility: visible; } .group:hover .group-hover\\:block { display: block; } .group:hover .group-hover\\:bg-secondary-plain-weak { background-color: var(--color-secondary-plain-weak); } } .group.tab-bottom-border.tab-selected .group-\\[\\.tab-bottom-border\\.tab-selected\\]\\:block { display: block; } .\\[\\&\\>\\:first-child\\]\\:mb-0>:first-child { margin-bottom: 0px; } .\\[\\&\\>\\:first-child\\]\\:max-h-full>:first-child { max-height: 100%; } .\\[\\&\\>\\:first-child\\]\\:overflow-hidden>:first-child { overflow: hidden; } .\\[\\&\\>\\:first-child\\]\\:rounded-\\[inherit\\]>:first-child { border-radius: inherit; } .\\[\\&\\>\\:not\\(\\.pointer-events-none\\)\\]\\:pointer-events-auto>:not(.pointer-events-none) { pointer-events: auto; } .\\[\\&\\>svg\\]\\:block>svg { display: block; } .\\[\\&\\>svg\\]\\:aspect-square>svg { aspect-ratio: 1 / 1; } .\\[\\&\\>svg\\]\\:h-\\[1\\.25rem\\]>svg { height: 1.25rem; } .\\[\\&\\>svg\\]\\:h-lg>svg { height: 1.5rem; } .\\[\\&\\>svg\\]\\:h-md>svg { height: 1rem; } .\\[\\&\\>svg\\]\\:h-sm>svg { height: 0.75rem; } .\\[\\&\\>svg\\]\\:w-\\[1\\.25rem\\]>svg { width: 1.25rem; } .\\[\\&\\>svg\\]\\:w-lg>svg { width: 1.5rem; } .\\[\\&\\>svg\\]\\:w-md>svg { width: 1rem; } .\\[\\&\\>svg\\]\\:w-sm>svg { width: 0.75rem; } .\\[\\&\\>svg\\]\\:text-center>svg { text-align: center; } .\\[\\&\\>svg\\]\\:align-middle>svg { vertical-align: middle; } ';
3
3
  export const styles = cssString(stylesCSS);
4
4
  //# sourceMappingURL=styles.js.map