@devvit/ui-renderer 0.11.0-next-2024-08-01-3d10bfd31.0 → 0.11.0-next-2024-08-01-349283db8.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.
- package/client/formbuilder/components/devvit-form-selection-dropdown.d.ts +1 -1
- package/client/formbuilder/components/devvit-form-selection-dropdown.d.ts.map +1 -1
- package/client/formbuilder/components/devvit-form-selection-dropdown.js +78 -83
- package/client/formbuilder/fields/renderSelectionField.d.ts.map +1 -1
- package/client/formbuilder/fields/renderSelectionField.js +1 -2
- package/package.json +9 -9
- package/styles.js +1 -1
|
@@ -8,7 +8,7 @@ export declare class DevvitFormSelectionDropdown extends InputElement {
|
|
|
8
8
|
#private;
|
|
9
9
|
field: FormField | undefined;
|
|
10
10
|
dropdownOpen: boolean;
|
|
11
|
-
|
|
11
|
+
selectedValues: readonly string[];
|
|
12
12
|
static get styles(): import("lit").CSSResultGroup[];
|
|
13
13
|
get value(): string;
|
|
14
14
|
willUpdate(changedProperties: PropertyValues<this>): void;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"devvit-form-selection-dropdown.d.ts","sourceRoot":"","sources":["../../../../library/src/client/formbuilder/components/devvit-form-selection-dropdown.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAS1D,OAAO,EAAE,YAAY,EAAE,MAAM,iDAAiD,CAAC;AAG/E,OAAO,KAAK,EAA8B,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAK5E,OAAO,4DAA4D,CAAC;AACpE,OAAO,mDAAmD,CAAC;AAC3D,OAAO,2DAA2D,CAAC;AAGnE,qBAAa,2BAA4B,SAAQ,YAAY;;IAE3D,KAAK,EAAE,SAAS,GAAG,SAAS,CAAC;IAG7B,YAAY,UAAS;IAGrB,
|
|
1
|
+
{"version":3,"file":"devvit-form-selection-dropdown.d.ts","sourceRoot":"","sources":["../../../../library/src/client/formbuilder/components/devvit-form-selection-dropdown.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAS1D,OAAO,EAAE,YAAY,EAAE,MAAM,iDAAiD,CAAC;AAG/E,OAAO,KAAK,EAA8B,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAK5E,OAAO,4DAA4D,CAAC;AACpE,OAAO,mDAAmD,CAAC;AAC3D,OAAO,2DAA2D,CAAC;AAGnE,qBAAa,2BAA4B,SAAQ,YAAY;;IAE3D,KAAK,EAAE,SAAS,GAAG,SAAS,CAAC;IAG7B,YAAY,UAAS;IAGrB,cAAc,EAAE,SAAS,MAAM,EAAE,CAAM;IAIvC,WAAoB,MAAM,mCAWzB;IAED,IAAI,KAAK,IAAI,MAAM,CAElB;IAED,UAAU,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;IAoEhD,MAAM,IAAI,cAAc,CAAC,CAAC,CAAC;CA4CrC"}
|
|
@@ -7,27 +7,27 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
|
|
|
7
7
|
var __metadata = (this && this.__metadata) || function (k, v) {
|
|
8
8
|
if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
|
|
9
9
|
};
|
|
10
|
-
var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (receiver, state, kind, f) {
|
|
11
|
-
if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a getter");
|
|
12
|
-
if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
|
|
13
|
-
return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
|
|
14
|
-
};
|
|
15
10
|
var __classPrivateFieldSet = (this && this.__classPrivateFieldSet) || function (receiver, state, value, kind, f) {
|
|
16
11
|
if (kind === "m") throw new TypeError("Private method is not writable");
|
|
17
12
|
if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a setter");
|
|
18
13
|
if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot write private member to an object whose class did not declare it");
|
|
19
14
|
return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
|
|
20
15
|
};
|
|
21
|
-
var
|
|
16
|
+
var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (receiver, state, kind, f) {
|
|
17
|
+
if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a getter");
|
|
18
|
+
if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
|
|
19
|
+
return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
|
|
20
|
+
};
|
|
21
|
+
var _DevvitFormSelectionDropdown_instances, _DevvitFormSelectionDropdown_config, _DevvitFormSelectionDropdown_getLabel, _DevvitFormSelectionDropdown_updateSelection, _DevvitFormSelectionDropdown_singleSelectListItem, _DevvitFormSelectionDropdown_multiSelectListItem, _DevvitFormSelectionDropdown_renderEmptyItem;
|
|
22
22
|
import { css } from 'lit';
|
|
23
23
|
import { property, state } from 'lit/decorators.js';
|
|
24
24
|
import { classMap } from 'lit/directives/class-map.js';
|
|
25
|
-
import { html
|
|
25
|
+
import { html } from '@reddit/faceplate-ui/templateRenderingStrategy/clientStrategy.js';
|
|
26
26
|
import { dropdownButton } from '@reddit/faceplate-ui/templates/client/dropdownButton.js';
|
|
27
27
|
import { listItem } from '@reddit/faceplate-ui/templates/client/list-item.js';
|
|
28
28
|
import { InputElement } from '@reddit/faceplate/base-classes/input-element.js';
|
|
29
29
|
import { msg } from '@reddit/faceplate/lib/i18n/localize.js';
|
|
30
|
-
import { FieldConfig_Selection
|
|
30
|
+
import { FieldConfig_Selection } from '@devvit/protos';
|
|
31
31
|
import { styles } from '../../../styles.js';
|
|
32
32
|
import '@reddit/faceplate-ui/components/faceplate-dropdown-menu.js';
|
|
33
33
|
import '@reddit/faceplate-ui/components/faceplate-menu.js';
|
|
@@ -36,50 +36,24 @@ import { renderHelpText } from '../fields/renderHelpText.js';
|
|
|
36
36
|
export class DevvitFormSelectionDropdown extends InputElement {
|
|
37
37
|
constructor() {
|
|
38
38
|
super(...arguments);
|
|
39
|
+
_DevvitFormSelectionDropdown_instances.add(this);
|
|
39
40
|
this.dropdownOpen = false;
|
|
40
|
-
this.
|
|
41
|
-
_DevvitFormSelectionDropdown_selection.set(this, FormFieldValue_SelectionValue.fromPartial({}));
|
|
41
|
+
this.selectedValues = [];
|
|
42
42
|
_DevvitFormSelectionDropdown_config.set(this, FieldConfig_Selection.fromPartial({}));
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
if (selected && index < 0) {
|
|
47
|
-
__classPrivateFieldGet(this, _DevvitFormSelectionDropdown_selection, "f").values.push(choice.value);
|
|
48
|
-
}
|
|
49
|
-
else if (index >= 0) {
|
|
50
|
-
__classPrivateFieldGet(this, _DevvitFormSelectionDropdown_selection, "f").values.splice(index, 1);
|
|
51
|
-
}
|
|
52
|
-
if (__classPrivateFieldGet(this, _DevvitFormSelectionDropdown_selection, "f").values.length === 0) {
|
|
53
|
-
this.currentLabel = '';
|
|
54
|
-
}
|
|
55
|
-
else if (__classPrivateFieldGet(this, _DevvitFormSelectionDropdown_selection, "f").values.length === 1) {
|
|
56
|
-
this.currentLabel =
|
|
57
|
-
__classPrivateFieldGet(this, _DevvitFormSelectionDropdown_config, "f").choices.find((c) => c.value === __classPrivateFieldGet(this, _DevvitFormSelectionDropdown_selection, "f").values[0])?.label ?? '';
|
|
58
|
-
}
|
|
59
|
-
else {
|
|
60
|
-
this.currentLabel = msg('[Multiple Selections]', {
|
|
61
|
-
desc: 'Displayed on a drop down menu when multiple values are selected',
|
|
62
|
-
});
|
|
63
|
-
}
|
|
64
|
-
}
|
|
65
|
-
else {
|
|
66
|
-
__classPrivateFieldGet(this, _DevvitFormSelectionDropdown_selection, "f").values = [choice.value];
|
|
67
|
-
this.currentLabel = choice.label;
|
|
68
|
-
}
|
|
69
|
-
});
|
|
70
|
-
_DevvitFormSelectionDropdown_singleSelectListItem.set(this, (choice) => listItem({
|
|
71
|
-
label: choice.label,
|
|
72
|
-
onClick: () => __classPrivateFieldGet(this, _DevvitFormSelectionDropdown_updateSelection, "f").call(this, choice),
|
|
43
|
+
_DevvitFormSelectionDropdown_singleSelectListItem.set(this, (option) => listItem({
|
|
44
|
+
label: option.label,
|
|
45
|
+
onClick: () => __classPrivateFieldGet(this, _DevvitFormSelectionDropdown_instances, "m", _DevvitFormSelectionDropdown_updateSelection).call(this, option),
|
|
73
46
|
}));
|
|
74
|
-
_DevvitFormSelectionDropdown_multiSelectListItem.set(this, (
|
|
47
|
+
_DevvitFormSelectionDropdown_multiSelectListItem.set(this, (option) => listItem({
|
|
75
48
|
label: html `
|
|
76
|
-
<faceplate-switch-input
|
|
77
|
-
|
|
78
|
-
>
|
|
79
|
-
${choice.label}
|
|
49
|
+
<faceplate-switch-input ?checked="${this.selectedValues.includes(option.value)}">
|
|
50
|
+
${option.label}
|
|
80
51
|
</faceplate-switch-input>
|
|
81
52
|
`,
|
|
82
|
-
onClick: (
|
|
53
|
+
onClick: (e) => {
|
|
54
|
+
__classPrivateFieldGet(this, _DevvitFormSelectionDropdown_instances, "m", _DevvitFormSelectionDropdown_updateSelection).call(this, option, e.currentTarget.checked);
|
|
55
|
+
e.stopImmediatePropagation();
|
|
56
|
+
},
|
|
83
57
|
}));
|
|
84
58
|
}
|
|
85
59
|
static get styles() {
|
|
@@ -95,66 +69,87 @@ export class DevvitFormSelectionDropdown extends InputElement {
|
|
|
95
69
|
];
|
|
96
70
|
}
|
|
97
71
|
get value() {
|
|
98
|
-
return
|
|
72
|
+
return this.selectedValues.join(',');
|
|
99
73
|
}
|
|
100
74
|
willUpdate(changedProperties) {
|
|
101
75
|
if (changedProperties.has('field')) {
|
|
102
76
|
__classPrivateFieldSet(this, _DevvitFormSelectionDropdown_config, this.field?.fieldConfig?.selectionConfig ?? FieldConfig_Selection.fromPartial({}), "f");
|
|
103
|
-
|
|
104
|
-
if (!__classPrivateFieldGet(this, _DevvitFormSelectionDropdown_config, "f").multiSelect) {
|
|
105
|
-
this.currentLabel =
|
|
106
|
-
__classPrivateFieldGet(this, _DevvitFormSelectionDropdown_config, "f").choices.find((c) => c.value === __classPrivateFieldGet(this, _DevvitFormSelectionDropdown_selection, "f").values?.[0])?.label ?? '';
|
|
107
|
-
}
|
|
77
|
+
this.selectedValues = this.field?.defaultValue?.selectionValue?.values ?? [];
|
|
108
78
|
}
|
|
109
79
|
}
|
|
110
80
|
render() {
|
|
111
81
|
let formField;
|
|
112
82
|
if (this.field) {
|
|
113
|
-
const
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
onClick: () => {
|
|
120
|
-
this.currentLabel = '';
|
|
121
|
-
__classPrivateFieldGet(this, _DevvitFormSelectionDropdown_selection, "f").values = [];
|
|
122
|
-
},
|
|
123
|
-
})
|
|
83
|
+
const option = __classPrivateFieldGet(this, _DevvitFormSelectionDropdown_config, "f").choices ?? [];
|
|
84
|
+
const items = __classPrivateFieldGet(this, _DevvitFormSelectionDropdown_config, "f").multiSelect
|
|
85
|
+
? option.map((o) => __classPrivateFieldGet(this, _DevvitFormSelectionDropdown_multiSelectListItem, "f").call(this, o))
|
|
86
|
+
: option.map((o) => __classPrivateFieldGet(this, _DevvitFormSelectionDropdown_singleSelectListItem, "f").call(this, o));
|
|
87
|
+
const emptyItem = !__classPrivateFieldGet(this, _DevvitFormSelectionDropdown_config, "f").multiSelect && !__classPrivateFieldGet(this, _DevvitFormSelectionDropdown_config, "f").minSelections && !this.field.required
|
|
88
|
+
? __classPrivateFieldGet(this, _DevvitFormSelectionDropdown_instances, "m", _DevvitFormSelectionDropdown_renderEmptyItem).call(this)
|
|
124
89
|
: undefined;
|
|
125
90
|
const classes = {
|
|
126
91
|
'flex-grow': true,
|
|
127
92
|
'z-auto': !this.dropdownOpen,
|
|
128
93
|
};
|
|
129
94
|
formField = html `
|
|
130
|
-
<
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
${dropdownButton({
|
|
95
|
+
<faceplate-dropdown-menu
|
|
96
|
+
id="${this.field.fieldId}"
|
|
97
|
+
class="${classMap(classes)}"
|
|
98
|
+
.onopen="${() => (this.dropdownOpen = true)}"
|
|
99
|
+
.onclose="${() => (this.dropdownOpen = false)}"
|
|
100
|
+
?disabled="${this.field.disabled}"
|
|
101
|
+
>
|
|
102
|
+
${dropdownButton({
|
|
139
103
|
attributes: {
|
|
140
|
-
disabled: this.field.disabled
|
|
104
|
+
disabled: Boolean(this.field.disabled),
|
|
141
105
|
className: 'flex justify-between grow',
|
|
142
106
|
},
|
|
143
|
-
children: html `<span class="grow">${this.
|
|
107
|
+
children: html `<span class="grow">${__classPrivateFieldGet(this, _DevvitFormSelectionDropdown_instances, "m", _DevvitFormSelectionDropdown_getLabel).call(this)}</span>`,
|
|
144
108
|
selected: this.dropdownOpen,
|
|
145
109
|
})}
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
</div>
|
|
110
|
+
<faceplate-menu slot="menu" class="max-h-[160px] max-w-[400px] overflow-y-auto"
|
|
111
|
+
>${emptyItem}${items}
|
|
112
|
+
</faceplate-menu>
|
|
113
|
+
</faceplate-dropdown-menu>
|
|
114
|
+
${renderHelpText(this.field.helpText)}
|
|
152
115
|
`;
|
|
153
116
|
}
|
|
154
117
|
return html `${formField}${super.render()}`;
|
|
155
118
|
}
|
|
156
119
|
}
|
|
157
|
-
|
|
120
|
+
_DevvitFormSelectionDropdown_config = new WeakMap(), _DevvitFormSelectionDropdown_singleSelectListItem = new WeakMap(), _DevvitFormSelectionDropdown_multiSelectListItem = new WeakMap(), _DevvitFormSelectionDropdown_instances = new WeakSet(), _DevvitFormSelectionDropdown_getLabel = function _DevvitFormSelectionDropdown_getLabel() {
|
|
121
|
+
const selectedCount = this.selectedValues.length;
|
|
122
|
+
if (selectedCount === 0) {
|
|
123
|
+
return '';
|
|
124
|
+
}
|
|
125
|
+
if (selectedCount === 1) {
|
|
126
|
+
const value = this.selectedValues[0];
|
|
127
|
+
return __classPrivateFieldGet(this, _DevvitFormSelectionDropdown_config, "f").choices.find((c) => c.value === value)?.label ?? '';
|
|
128
|
+
}
|
|
129
|
+
return msg(`[${selectedCount} items selected]`, {
|
|
130
|
+
desc: 'Displayed on a drop down menu when multiple values are selected',
|
|
131
|
+
});
|
|
132
|
+
}, _DevvitFormSelectionDropdown_updateSelection = function _DevvitFormSelectionDropdown_updateSelection(option, selected = true) {
|
|
133
|
+
if (__classPrivateFieldGet(this, _DevvitFormSelectionDropdown_config, "f").multiSelect) {
|
|
134
|
+
const isAlreadySelected = this.selectedValues.includes(option.value);
|
|
135
|
+
if (selected && !isAlreadySelected) {
|
|
136
|
+
this.selectedValues = [...this.selectedValues, option.value];
|
|
137
|
+
}
|
|
138
|
+
else if (isAlreadySelected) {
|
|
139
|
+
this.selectedValues = this.selectedValues.filter((v) => v !== option.value);
|
|
140
|
+
}
|
|
141
|
+
}
|
|
142
|
+
else {
|
|
143
|
+
this.selectedValues = [option.value];
|
|
144
|
+
}
|
|
145
|
+
}, _DevvitFormSelectionDropdown_renderEmptyItem = function _DevvitFormSelectionDropdown_renderEmptyItem() {
|
|
146
|
+
return listItem({
|
|
147
|
+
label: html ` `,
|
|
148
|
+
onClick: () => {
|
|
149
|
+
this.selectedValues = [];
|
|
150
|
+
},
|
|
151
|
+
});
|
|
152
|
+
};
|
|
158
153
|
__decorate([
|
|
159
154
|
property({ attribute: false }),
|
|
160
155
|
__metadata("design:type", Object)
|
|
@@ -165,8 +160,8 @@ __decorate([
|
|
|
165
160
|
], DevvitFormSelectionDropdown.prototype, "dropdownOpen", void 0);
|
|
166
161
|
__decorate([
|
|
167
162
|
state(),
|
|
168
|
-
__metadata("design:type",
|
|
169
|
-
], DevvitFormSelectionDropdown.prototype, "
|
|
163
|
+
__metadata("design:type", Array)
|
|
164
|
+
], DevvitFormSelectionDropdown.prototype, "selectedValues", void 0);
|
|
170
165
|
// Faceplate's base classes and mixins aren't playing nice with type checking for some reason
|
|
171
166
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
172
167
|
customElements.define('devvit-form-selection-dropdown', DevvitFormSelectionDropdown);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"renderSelectionField.d.ts","sourceRoot":"","sources":["../../../../library/src/client/formbuilder/fields/renderSelectionField.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAKhD,OAAO,iDAAiD,CAAC;AACzD,OAAO,6CAA6C,CAAC;AACrD,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAE1C,eAAO,MAAM,oBAAoB,UAAW,SAAS,KAAG,
|
|
1
|
+
{"version":3,"file":"renderSelectionField.d.ts","sourceRoot":"","sources":["../../../../library/src/client/formbuilder/fields/renderSelectionField.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAKhD,OAAO,iDAAiD,CAAC;AACzD,OAAO,6CAA6C,CAAC;AACrD,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAE1C,eAAO,MAAM,oBAAoB,UAAW,SAAS,KAAG,cAYvD,CAAC"}
|
|
@@ -4,14 +4,13 @@ import '../components/devvit-form-selection-dropdown.js';
|
|
|
4
4
|
import '../components/devvit-form-selection-list.js';
|
|
5
5
|
export const renderSelectionField = (field) => {
|
|
6
6
|
if (field.fieldConfig?.selectionConfig?.renderAsList === true) {
|
|
7
|
-
return html
|
|
7
|
+
return html ` <devvit-form-selection-list
|
|
8
8
|
name="${field.fieldId}"
|
|
9
9
|
.field="${field}"
|
|
10
10
|
></devvit-form-selection-list>`;
|
|
11
11
|
}
|
|
12
12
|
return html `${renderFieldLabel(field)}
|
|
13
13
|
<devvit-form-selection-dropdown
|
|
14
|
-
class="flex flex-row"
|
|
15
14
|
name="${field.fieldId}"
|
|
16
15
|
.field="${field}"
|
|
17
16
|
></devvit-form-selection-dropdown>`;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@devvit/ui-renderer",
|
|
3
|
-
"version": "0.11.0-next-2024-08-01-
|
|
3
|
+
"version": "0.11.0-next-2024-08-01-349283db8.0",
|
|
4
4
|
"license": "BSD-3-Clause",
|
|
5
5
|
"repository": {
|
|
6
6
|
"type": "git",
|
|
@@ -59,9 +59,9 @@
|
|
|
59
59
|
"types": "./index.d.ts",
|
|
60
60
|
"dependencies": {
|
|
61
61
|
"@devvit/multiplatform": "0.0.1-20240529-491771c9",
|
|
62
|
-
"@devvit/protos": "0.11.0-next-2024-08-01-
|
|
63
|
-
"@devvit/runtime-lite": "0.11.0-next-2024-08-01-
|
|
64
|
-
"@devvit/shared-types": "0.11.0-next-2024-08-01-
|
|
62
|
+
"@devvit/protos": "0.11.0-next-2024-08-01-349283db8.0",
|
|
63
|
+
"@devvit/runtime-lite": "0.11.0-next-2024-08-01-349283db8.0",
|
|
64
|
+
"@devvit/shared-types": "0.11.0-next-2024-08-01-349283db8.0",
|
|
65
65
|
"@dotlottie/player-component": "2.7.2",
|
|
66
66
|
"compare-versions": "6.1.0",
|
|
67
67
|
"nice-grpc-web": "3.3.3",
|
|
@@ -89,10 +89,10 @@
|
|
|
89
89
|
},
|
|
90
90
|
"devDependencies": {
|
|
91
91
|
"@ampproject/filesize": "4.3.0",
|
|
92
|
-
"@devvit/eslint-config": "0.11.0-next-2024-08-01-
|
|
93
|
-
"@devvit/public-api": "0.11.0-next-2024-08-01-
|
|
94
|
-
"@devvit/repo-tools": "0.11.0-next-2024-08-01-
|
|
95
|
-
"@devvit/tsconfig": "0.11.0-next-2024-08-01-
|
|
92
|
+
"@devvit/eslint-config": "0.11.0-next-2024-08-01-349283db8.0",
|
|
93
|
+
"@devvit/public-api": "0.11.0-next-2024-08-01-349283db8.0",
|
|
94
|
+
"@devvit/repo-tools": "0.11.0-next-2024-08-01-349283db8.0",
|
|
95
|
+
"@devvit/tsconfig": "0.11.0-next-2024-08-01-349283db8.0",
|
|
96
96
|
"@lit-labs/ssr": "^2.2.3",
|
|
97
97
|
"@lit/localize": "0.11.4",
|
|
98
98
|
"@open-wc/testing-helpers": "2.3.0",
|
|
@@ -139,5 +139,5 @@
|
|
|
139
139
|
}
|
|
140
140
|
},
|
|
141
141
|
"source": "./src/index.ts",
|
|
142
|
-
"gitHead": "
|
|
142
|
+
"gitHead": "8ab41cf1a035b6870fd8cdab1a755208d402a78a"
|
|
143
143
|
}
|
package/styles.js
CHANGED
|
@@ -1,3 +1,3 @@
|
|
|
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] summary [icon-name=\'caret-down-outline\'], faceplate-expandable-section-helper:not(:defined) > details[open] summary [icon-name=\'caret-down-outline\'] { transform: rotate(180deg); } faceplate-expandable-section-helper:not([open]) summary [icon-name=\'caret-down-outline\'], faceplate-expandable-section-helper:not(:defined) > details:not([open]) summary [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\'; */ .theme-light,:root{--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:#D93A00;--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;--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} .theme-light dialog::backdrop,:root 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-pizzaRed:#ef5350;--color-global-brand-orangered:#FF4500;--color-global-focus:#47B0DB;--color-interactive-content-disabled:#00000040;--color-interactive-background-disabled:#0000000d;--color-interactive-pressed:#00000029;--color-neutral-content:#2A3C42;--color-neutral-content-disabled:#D6D6D6;--color-neutral-content-weak:#576F76;--color-neutral-content-strong:#0F1A1C;--color-neutral-background:#ffffff;--color-neutral-background-selected:#EAEDEF;--color-neutral-background-weak:#F9FAFA;--color-neutral-background-medium:#F8F8F8;--color-neutral-background-strong:#ffffff;--color-neutral-background-hover:#F2F4F5;--color-neutral-border:#00000033;--color-neutral-border-medium:#00000080;--color-neutral-border-weak:#0000001a;--color-neutral-border-strong:#0F1A1C;--color-primary:#0045AC;--color-primary-hover:#003584;--color-primary-visited:#8700B5;--color-primary-onBackground:#ffffff;--color-primary-onBackground-selected:#ffffff;--color-primary-background:#0045AC;--color-primary-background-hover:#003584;--color-primary-background-selected:#00255D;--color-secondary:#0F1A1C;--color-secondary-hover:#000000;--color-secondary-weak:#576F76;--color-secondary-onBackground:#000000;--color-secondary-background:#EAEDEF;--color-secondary-background-hover:#E2E7E9;--color-secondary-background-selected:#D2DADD;--color-secondary-plain:#0F1A1C;--color-secondary-plain-hover:#000000;--color-danger-background:#EB001F;--color-danger-background-disabled:#FFCCD2;--color-danger-background-hover:#A50016;--color-danger-onBackground:#ffffff;--color-danger-content:#A50016;--color-danger-content-hover:#7E0011;--color-danger-content-default:#ffffff;--color-brand-background:#D93A00;--color-brand-onBackground:#ffffff;--color-brand-background-hover:#962900;--color-media-background:#00000099;--color-media-onbackground:#ffffff;--color-media-onbackground-weak:#E2E7E9;--color-media-background-hover:#000000cc;--color-media-onbackground-disabled:#ffffff40;--color-media-border-selected:#ffffff;--color-media-background-selected:#000000cc;--color-success-content:#0A6000;--color-success-hover:#084A00;--color-success-onBackground:#ffffff;--color-success-background:#0E8A00;--color-success-background-hover:#0A6000;--color-warning-content:#665505;--color-warning-content-hover:#504104;--color-warning-onBackground:#000000;--color-warning-background:#DBAF00;--color-warning-background-hover:#8F7407;--color-upvote-content:#962900;--color-upvote-content-weak:var(--color-global-brand-orangered);--color-upvote-disabled:#9629004d;--color-upvote-onBackground:#ffffff;--color-upvote-background:#D93A00;--color-upvote-background-hover:#962900;--color-upvote-background-disabled:#D93A004d;--color-downvote-content:#453BB5;--color-downvote-content-weak:#6A5CFF;--color-downvote-disabled:#453BB54d;--color-downvote-onBackground:#ffffff;--color-downvote-background:#6A5CFF;--color-downvote-background-hover:#453BB5;--color-downvote-background-disabled:#6A5CFF4d;--color-brand-gradient-default:linear-gradient(180deg, #D93A00ff, #db3b00ff 30%, #962900ff 100%);--color-brand-gradient-default-highlight:linear-gradient(258deg, #db3f0000 80%, #D93A00ff 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-gradient-active:linear-gradient(180deg, #cd3700ff, #db3b00ff 68%, #D93A00ff 100%);--color-brand-gradient-active-highlight:linear-gradient(83deg, #db3f0000 80%, #D93A00ff 100%);--color-gradient-media:linear-gradient(180deg, #00000000, #0000008a 60%, #00000099 100%);--color-gradient-media-strong:linear-gradient(180deg, #00000000, #000000cc 60%, #000000e6 100%);--color-transparent-background-hover:#82959B1a;--color-global-black:#000000;--color-global-white:#ffffff;--color-global-orangered:#D93A00;--color-global-alienblue:#1870F4;--color-global-darkblue:#131F23;--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-action-upvote:#D93A00;--color-action-downvote:#6A5CFF;--color-alert-caution:#8F7407;--color-identity-admin:#D93A00;--color-identity-moderator:#0E8A00;--color-identity-self:#008675;--color-identity-coins:#DBAF00;--color-category-live:#D93A00;--color-category-nsfw:#E00096;--color-category-spoiler:var(--color-tone-1);--color-ui-canvas:var(--color-tone-5);--color-ui-modalbackground:var(--color-neutral-background-strong);--color-avatar-gradient:linear-gradient(0deg, #D2DADDff, #ffffffff 75%);--color-opacity-highlight:linear-gradient(#00255D1a, var(--color-tone-6));--color-opacity-08:#13131314;--color-opacity-50:#00000080;--color-scrim:#00000099;--color-scrim-strong:#000000cc;--color-scrim-gradient:linear-gradient(180deg, #00000000, #0000008a 60%, #00000099 100%);--color-online:#55BD46;--color-favorite:#8F7407;--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-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-warning-background);--color-button-caution-background-hover:var(--color-warning-background-hover);--color-button-caution-background-disabled:var(--color-interactive-background-disabled);--color-button-caution-text:var(--color-warning-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-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-pizzaRed:#c62828;--color-global-brand-orangered:#FF4500;--color-global-focus:#007FAE;--color-interactive-content-disabled:#ffffff40;--color-interactive-background-disabled:#ffffff0d;--color-interactive-pressed:#ffffff29;--color-neutral-content:#B8C5C9;--color-neutral-content-disabled:#303030;--color-neutral-content-weak:#82959B;--color-neutral-content-strong:#F2F4F5;--color-neutral-background:#0B1416;--color-neutral-background-selected:#1A282D;--color-neutral-background-weak:#04090A;--color-neutral-background-medium:#131313;--color-neutral-background-strong:#0F1A1C;--color-neutral-background-hover:#131F23;--color-neutral-border:#ffffff33;--color-neutral-border-medium:#ffffff80;--color-neutral-border-weak:#ffffff1a;--color-neutral-border-strong:#F2F4F5;--color-primary:#629FFF;--color-primary-hover:#A7CCFF;--color-primary-visited:#D55EFF;--color-primary-background:#0045AC;--color-primary-background-hover:#1870F4;--color-primary-background-selected:#629FFF;--color-primary-onBackground:#ffffff;--color-primary-onBackground-selected:#000000;--color-secondary:#F2F4F5;--color-secondary-hover:#ffffff;--color-secondary-weak:#82959B;--color-secondary-onBackground:#ffffff;--color-secondary-background:#1A282D;--color-secondary-background-hover:#223237;--color-secondary-background-selected:#33464C;--color-secondary-plain:#F2F4F5;--color-secondary-plain-hover:#ffffff;--color-danger-background:#A50016;--color-danger-background-disabled:#3A0008;--color-danger-background-hover:#EB001F;--color-danger-onBackground:#ffffff;--color-danger-content:#FF6E80;--color-danger-content-hover:#FFADB8;--color-success-content:#55BD46;--color-success-hover:#A3E398;--color-success-onBackground:#ffffff;--color-success-background:#0A6000;--color-success-background-hover:#0E8A00;--color-warning-content:#DBAF00;--color-warning-content-hover:#FADB61;--color-warning-onBackground:#000000;--color-warning-background:#DBAF00;--color-warning-background-hover:#FADB61;--color-upvote-content:#FE7C53;--color-upvote-content-weak:var(--color-global-brand-orangered);--color-upvote-disabled:#FE7C534d;--color-upvote-onBackground:#ffffff;--color-upvote-background:#D93A00;--color-upvote-background-hover:#962900;--color-upvote-background-disabled:#D93A004d;--color-downvote-content:#988EFF;--color-downvote-content-weak:#6A5CFF;--color-downvote-disabled:#988EFF4d;--color-downvote-onBackground:#ffffff;--color-downvote-background:#453BB5;--color-downvote-background-hover:#453BB5;--color-downvote-background-disabled:#6A5CFF4d;--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-ui-canvas:#080808;--color-ui-modalbackground:var(--color-neutral-background-strong);--color-avatar-gradient:linear-gradient(0deg, #2A3C42ff, #0B1416ff 75%);--color-transparent-background-hover:#667A801a;--color-opacity-50:#F2F2F280;--color-online:#55BD46;--color-favorite:#DBAF00;--color-button-primary-border-activated:transparent;--color-button-plain-inverted-activated-text:var(--color-neutral-background);--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-pizzaRed:#c62828;--color-global-brand-orangered:#FF4500;--color-global-focus:#007FAE;--color-interactive-content-disabled:#ffffff40;--color-interactive-background-disabled:#ffffff0d;--color-interactive-pressed:#ffffff29;--color-neutral-content:#B8C5C9;--color-neutral-content-disabled:#303030;--color-neutral-content-weak:#82959B;--color-neutral-content-strong:#F2F4F5;--color-neutral-background:#0B1416;--color-neutral-background-selected:#1A282D;--color-neutral-background-weak:#04090A;--color-neutral-background-medium:#131313;--color-neutral-background-strong:#0F1A1C;--color-neutral-background-hover:#131F23;--color-neutral-border:#ffffff33;--color-neutral-border-medium:#ffffff80;--color-neutral-border-weak:#ffffff1a;--color-neutral-border-strong:#F2F4F5;--color-primary:#629FFF;--color-primary-hover:#A7CCFF;--color-primary-visited:#D55EFF;--color-primary-background:#0045AC;--color-primary-background-hover:#1870F4;--color-primary-background-selected:#629FFF;--color-primary-onBackground:#ffffff;--color-primary-onBackground-selected:#000000;--color-secondary:#F2F4F5;--color-secondary-hover:#ffffff;--color-secondary-weak:#82959B;--color-secondary-onBackground:#ffffff;--color-secondary-background:#1A282D;--color-secondary-background-hover:#223237;--color-secondary-background-selected:#33464C;--color-secondary-plain:#F2F4F5;--color-secondary-plain-hover:#ffffff;--color-danger-background:#A50016;--color-danger-background-disabled:#3A0008;--color-danger-background-hover:#EB001F;--color-danger-onBackground:#ffffff;--color-danger-content:#FF6E80;--color-danger-content-hover:#FFADB8;--color-success-content:#55BD46;--color-success-hover:#A3E398;--color-success-onBackground:#ffffff;--color-success-background:#0A6000;--color-success-background-hover:#0E8A00;--color-warning-content:#DBAF00;--color-warning-content-hover:#FADB61;--color-warning-onBackground:#000000;--color-warning-background:#DBAF00;--color-warning-background-hover:#FADB61;--color-upvote-content:#FE7C53;--color-upvote-content-weak:var(--color-global-brand-orangered);--color-upvote-disabled:#FE7C534d;--color-upvote-onBackground:#ffffff;--color-upvote-background:#D93A00;--color-upvote-background-hover:#962900;--color-upvote-background-disabled:#D93A004d;--color-downvote-content:#988EFF;--color-downvote-content-weak:#6A5CFF;--color-downvote-disabled:#988EFF4d;--color-downvote-onBackground:#ffffff;--color-downvote-background:#453BB5;--color-downvote-background-hover:#453BB5;--color-downvote-background-disabled:#6A5CFF4d;--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-ui-canvas:#080808;--color-ui-modalbackground:var(--color-neutral-background-strong);--color-avatar-gradient:linear-gradient(0deg, #2A3C42ff, #0B1416ff 75%);--color-transparent-background-hover:#667A801a;--color-opacity-50:#F2F2F280;--color-online:#55BD46;--color-favorite:#DBAF00;--color-button-primary-border-activated:transparent;--color-button-plain-inverted-activated-text:var(--color-neutral-background);--color-shimmer-background:#ffffff08;--color-shimmer-gradient-overlay:linear-gradient(to right, #ffffff00, #ffffff05 20%, #ffffff0f 50%, #ffffff08 70%, #ffffff00 100%)} .theme-light.theme-rpl,.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-pizzaRed:#ef5350;--color-global-brand-orangered:#FF4500;--color-global-focus:#47B0DB;--color-interactive-content-disabled:#00000040;--color-interactive-background-disabled:#0000000d;--color-interactive-pressed:#00000029;--color-neutral-content:#2A3C42;--color-neutral-content-disabled:#D6D6D6;--color-neutral-content-weak:#576F76;--color-neutral-content-strong:#0F1A1C;--color-neutral-background:#ffffff;--color-neutral-background-selected:#EAEDEF;--color-neutral-background-weak:#F9FAFA;--color-neutral-background-medium:#F8F8F8;--color-neutral-background-strong:#ffffff;--color-neutral-background-hover:#F2F4F5;--color-neutral-border:#00000033;--color-neutral-border-medium:#00000080;--color-neutral-border-weak:#0000001a;--color-neutral-border-strong:#0F1A1C;--color-primary:#0045AC;--color-primary-hover:#003584;--color-primary-visited:#8700B5;--color-primary-onBackground:#ffffff;--color-primary-onBackground-selected:#ffffff;--color-primary-background:#0045AC;--color-primary-background-hover:#003584;--color-primary-background-selected:#00255D;--color-secondary:#0F1A1C;--color-secondary-hover:#000000;--color-secondary-weak:#576F76;--color-secondary-onBackground:#000000;--color-secondary-background:#EAEDEF;--color-secondary-background-hover:#E2E7E9;--color-secondary-background-selected:#D2DADD;--color-secondary-plain:#0F1A1C;--color-secondary-plain-hover:#000000;--color-danger-background:#EB001F;--color-danger-background-disabled:#FFCCD2;--color-danger-background-hover:#A50016;--color-danger-onBackground:#ffffff;--color-danger-content:#A50016;--color-danger-content-hover:#7E0011;--color-danger-content-default:#ffffff;--color-brand-background:#D93A00;--color-brand-onBackground:#ffffff;--color-brand-background-hover:#962900;--color-media-background:#00000099;--color-media-onbackground:#ffffff;--color-media-onbackground-weak:#E2E7E9;--color-media-background-hover:#000000cc;--color-media-onbackground-disabled:#ffffff40;--color-media-border-selected:#ffffff;--color-media-background-selected:#000000cc;--color-success-content:#0A6000;--color-success-hover:#084A00;--color-success-onBackground:#ffffff;--color-success-background:#0E8A00;--color-success-background-hover:#0A6000;--color-warning-content:#665505;--color-warning-content-hover:#504104;--color-warning-onBackground:#000000;--color-warning-background:#DBAF00;--color-warning-background-hover:#8F7407;--color-upvote-content:#962900;--color-upvote-content-weak:var(--color-global-brand-orangered);--color-upvote-disabled:#9629004d;--color-upvote-onBackground:#ffffff;--color-upvote-background:#D93A00;--color-upvote-background-hover:#962900;--color-upvote-background-disabled:#D93A004d;--color-downvote-content:#453BB5;--color-downvote-content-weak:#6A5CFF;--color-downvote-disabled:#453BB54d;--color-downvote-onBackground:#ffffff;--color-downvote-background:#6A5CFF;--color-downvote-background-hover:#453BB5;--color-downvote-background-disabled:#6A5CFF4d;--color-brand-gradient-default:linear-gradient(180deg, #D93A00ff, #db3b00ff 30%, #962900ff 100%);--color-brand-gradient-default-highlight:linear-gradient(258deg, #db3f0000 80%, #D93A00ff 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-gradient-active:linear-gradient(180deg, #cd3700ff, #db3b00ff 68%, #D93A00ff 100%);--color-brand-gradient-active-highlight:linear-gradient(83deg, #db3f0000 80%, #D93A00ff 100%);--color-gradient-media:linear-gradient(180deg, #00000000, #0000008a 60%, #00000099 100%);--color-gradient-media-strong:linear-gradient(180deg, #00000000, #000000cc 60%, #000000e6 100%);--color-transparent-background-hover:#82959B1a;--color-global-black:#000000;--color-global-white:#ffffff;--color-global-orangered:#D93A00;--color-global-alienblue:#1870F4;--color-global-darkblue:#131F23;--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-action-upvote:#D93A00;--color-action-downvote:#6A5CFF;--color-alert-caution:#8F7407;--color-identity-admin:#D93A00;--color-identity-moderator:#0E8A00;--color-identity-self:#008675;--color-identity-coins:#DBAF00;--color-category-live:#D93A00;--color-category-nsfw:#E00096;--color-category-spoiler:var(--color-tone-1);--color-ui-canvas:var(--color-tone-5);--color-ui-modalbackground:var(--color-neutral-background-strong);--color-avatar-gradient:linear-gradient(0deg, #D2DADDff, #ffffffff 75%);--color-opacity-highlight:linear-gradient(#00255D1a, var(--color-tone-6));--color-opacity-08:#13131314;--color-opacity-50:#00000080;--color-scrim:#00000099;--color-scrim-strong:#000000cc;--color-scrim-gradient:linear-gradient(180deg, #00000000, #0000008a 60%, #00000099 100%);--color-online:#55BD46;--color-favorite:#8F7407;--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-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-warning-background);--color-button-caution-background-hover:var(--color-warning-background-hover);--color-button-caution-background-disabled:var(--color-interactive-background-disabled);--color-button-caution-text:var(--color-warning-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-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-pizzaRed:#c62828;--color-global-brand-orangered:#FF4500;--color-global-focus:#007FAE;--color-interactive-content-disabled:#ffffff40;--color-interactive-background-disabled:#ffffff0d;--color-interactive-pressed:#ffffff29;--color-neutral-content:#B8C5C9;--color-neutral-content-disabled:#303030;--color-neutral-content-weak:#82959B;--color-neutral-content-strong:#F2F4F5;--color-neutral-background:#0B1416;--color-neutral-background-selected:#1A282D;--color-neutral-background-weak:#04090A;--color-neutral-background-medium:#131313;--color-neutral-background-strong:#0F1A1C;--color-neutral-background-hover:#131F23;--color-neutral-border:#ffffff33;--color-neutral-border-medium:#ffffff80;--color-neutral-border-weak:#ffffff1a;--color-neutral-border-strong:#F2F4F5;--color-primary:#629FFF;--color-primary-hover:#A7CCFF;--color-primary-visited:#D55EFF;--color-primary-background:#0045AC;--color-primary-background-hover:#1870F4;--color-primary-background-selected:#629FFF;--color-primary-onBackground:#ffffff;--color-primary-onBackground-selected:#000000;--color-secondary:#F2F4F5;--color-secondary-hover:#ffffff;--color-secondary-weak:#82959B;--color-secondary-onBackground:#ffffff;--color-secondary-background:#1A282D;--color-secondary-background-hover:#223237;--color-secondary-background-selected:#33464C;--color-secondary-plain:#F2F4F5;--color-secondary-plain-hover:#ffffff;--color-danger-background:#A50016;--color-danger-background-disabled:#3A0008;--color-danger-background-hover:#EB001F;--color-danger-onBackground:#ffffff;--color-danger-content:#FF6E80;--color-danger-content-hover:#FFADB8;--color-success-content:#55BD46;--color-success-hover:#A3E398;--color-success-onBackground:#ffffff;--color-success-background:#0A6000;--color-success-background-hover:#0E8A00;--color-warning-content:#DBAF00;--color-warning-content-hover:#FADB61;--color-warning-onBackground:#000000;--color-warning-background:#DBAF00;--color-warning-background-hover:#FADB61;--color-upvote-content:#FE7C53;--color-upvote-content-weak:var(--color-global-brand-orangered);--color-upvote-disabled:#FE7C534d;--color-upvote-onBackground:#ffffff;--color-upvote-background:#D93A00;--color-upvote-background-hover:#962900;--color-upvote-background-disabled:#D93A004d;--color-downvote-content:#988EFF;--color-downvote-content-weak:#6A5CFF;--color-downvote-disabled:#988EFF4d;--color-downvote-onBackground:#ffffff;--color-downvote-background:#453BB5;--color-downvote-background-hover:#453BB5;--color-downvote-background-disabled:#6A5CFF4d;--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-ui-canvas:#080808;--color-ui-modalbackground:var(--color-neutral-background-strong);--color-avatar-gradient:linear-gradient(0deg, #2A3C42ff, #0B1416ff 75%);--color-transparent-background-hover:#667A801a;--color-opacity-50:#F2F2F280;--color-online:#55BD46;--color-favorite:#DBAF00;--color-button-primary-border-activated:transparent;--color-button-plain-inverted-activated-text:var(--color-neutral-background);--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-pizzaRed:#c62828;--color-global-brand-orangered:#FF4500;--color-global-focus:#007FAE;--color-interactive-content-disabled:#ffffff40;--color-interactive-background-disabled:#ffffff0d;--color-interactive-pressed:#ffffff29;--color-neutral-content:#B8C5C9;--color-neutral-content-disabled:#303030;--color-neutral-content-weak:#82959B;--color-neutral-content-strong:#F2F4F5;--color-neutral-background:#0B1416;--color-neutral-background-selected:#1A282D;--color-neutral-background-weak:#04090A;--color-neutral-background-medium:#131313;--color-neutral-background-strong:#0F1A1C;--color-neutral-background-hover:#131F23;--color-neutral-border:#ffffff33;--color-neutral-border-medium:#ffffff80;--color-neutral-border-weak:#ffffff1a;--color-neutral-border-strong:#F2F4F5;--color-primary:#629FFF;--color-primary-hover:#A7CCFF;--color-primary-visited:#D55EFF;--color-primary-background:#0045AC;--color-primary-background-hover:#1870F4;--color-primary-background-selected:#629FFF;--color-primary-onBackground:#ffffff;--color-primary-onBackground-selected:#000000;--color-secondary:#F2F4F5;--color-secondary-hover:#ffffff;--color-secondary-weak:#82959B;--color-secondary-onBackground:#ffffff;--color-secondary-background:#1A282D;--color-secondary-background-hover:#223237;--color-secondary-background-selected:#33464C;--color-secondary-plain:#F2F4F5;--color-secondary-plain-hover:#ffffff;--color-danger-background:#A50016;--color-danger-background-disabled:#3A0008;--color-danger-background-hover:#EB001F;--color-danger-onBackground:#ffffff;--color-danger-content:#FF6E80;--color-danger-content-hover:#FFADB8;--color-success-content:#55BD46;--color-success-hover:#A3E398;--color-success-onBackground:#ffffff;--color-success-background:#0A6000;--color-success-background-hover:#0E8A00;--color-warning-content:#DBAF00;--color-warning-content-hover:#FADB61;--color-warning-onBackground:#000000;--color-warning-background:#DBAF00;--color-warning-background-hover:#FADB61;--color-upvote-content:#FE7C53;--color-upvote-content-weak:var(--color-global-brand-orangered);--color-upvote-disabled:#FE7C534d;--color-upvote-onBackground:#ffffff;--color-upvote-background:#D93A00;--color-upvote-background-hover:#962900;--color-upvote-background-disabled:#D93A004d;--color-downvote-content:#988EFF;--color-downvote-content-weak:#6A5CFF;--color-downvote-disabled:#988EFF4d;--color-downvote-onBackground:#ffffff;--color-downvote-background:#453BB5;--color-downvote-background-hover:#453BB5;--color-downvote-background-disabled:#6A5CFF4d;--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-ui-canvas:#080808;--color-ui-modalbackground:var(--color-neutral-background-strong);--color-avatar-gradient:linear-gradient(0deg, #2A3C42ff, #0B1416ff 75%);--color-transparent-background-hover:#667A801a;--color-opacity-50:#F2F2F280;--color-online:#55BD46;--color-favorite:#DBAF00;--color-button-primary-border-activated:transparent;--color-button-plain-inverted-activated-text:var(--color-neutral-background);--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} .theme-dark,.theme-light,:root{background:var(--color-tone-7);color:var(--color-tone-1)} body{font-size:var(--font-body)} :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} 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)} .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-caution-text)} button[upvote]:disabled .gold-upvote-border,button[upvote]:disabled .gold-upvote-indicator{opacity:.4} button[upvote] .gold-upvote-indicator svg{fill:#ffd635} button[upvote] .gold-upvote-border svg{fill:#ad651e} button[upvote] .overlapped-upvote{-webkit-clip-path:polygon(0 0,100% 0,100% 100%,0 99%,0 60%,32% 60%,41% 60%,46% 60%,50% 57%,52% 51%,51% 44%,28% 17%);clip-path:polygon(0 0,100% 0,100% 100%,0 99%,0 60%,32% 60%,41% 60%,46% 60%,50% 57%,52% 51%,51% 44%,28% 17%)} faceplate-dropdown-menu:not(.connected) [slot=menu]{display:none} faceplate-expandable-section-helper{display:contents} faceplate-expandable-section-helper>details>summary{list-style-type:none} faceplate-expandable-section-helper>details>summary::-webkit-details-marker,faceplate-expandable-section-helper>details>summary::marker{display:none} faceplate-expandable-section-helper[rpl]>details>summary{margin:0} faceplate-expandable-section-helper>details>summary [icon-name=caret-down-outline]{transition:transform .22s ease-in-out} faceplate-expandable-section-helper:not(:defined)>details[open] summary [icon-name=caret-down-outline],faceplate-expandable-section-helper[open] summary [icon-name=caret-down-outline]{transform:rotate(180deg)} faceplate-expandable-section-helper:not(:defined)>details:not([open]) summary [icon-name=caret-down-outline],faceplate-expandable-section-helper:not([open]) summary [icon-name=caret-down-outline]{transform:rotate(0)} address,area,article,aside,audio,blockquote,datalist,details,dl,fieldset,figure,form,iframe,img,input,menu,meter,nav,ol,optgroup,option,output,p,pre,progress,ruby,section,textarea,ul,video{margin-bottom:1rem} button,html,input,select{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 .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{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)} article header,aside header,dialog header,faceplate-dialog header,main header,section header{padding:.5rem 0;margin:1rem 0;background:0 0} article header h1,aside header h1,dialog header h1,faceplate-dialog header h1,main header h1,section 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;--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-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(0);transition:transform .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(button):active,:where(input):where([type=submit],[type=reset],[type=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).anchor-disabled,:where(button):disabled,:where(input):where([type=submit],[type=reset],[type=button]).anchor-disabled,:where(input):where([type=submit],[type=reset],[type=button]):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).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:.5rem 1rem .375rem} faceplate-tablist a:hover{text-decoration:none} code,kbd,pre,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:.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{background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0} code pre{display:inline;background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0} details{padding:.5rem 1rem;background:var(--color-tone-6);border:var(--misc-accordion-border);border-radius:var(--radius-accordion-size)} details summary{cursor:pointer;font-weight:700;list-style-type:var(--misc-accordion-closed-list-style-type)} details[open] summary{margin-bottom:.375rem;list-style-type:var(--misc-accordion-open-list-style-type)} details[open] summary icon-caret-down{transform:rotate(180deg);transition:transform .22s ease-in-out} details summary icon-caret-down{transform:rotate(0);transition:transform .22s ease-in-out} details[open]>:last-child{margin-bottom:0} dt{font-weight:700;margin-bottom:.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:.25rem;background:var(--color-tone-7);min-width:0} legend{padding:0;font-weight:700} table{border-collapse:collapse;width:100%;word-break:normal;margin-bottom:1rem} td,th{text-align:left;padding:.5rem} th{background:var(--color-tone-6)} tr:nth-child(even){background:var(--color-tone-6)} table caption{font-weight:700;margin-bottom:.5rem} textarea{max-width:100%} ol,ul{padding-left:2rem} li{margin-top:.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:.5rem .75rem;border-block-end:1px solid var(--color-tone-5)} menu li:last-child{border-block-end:none} menu menu,ol ol,ol ul,ul ol,ul ul{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} input,select,textarea{font-family:var(--font-sans);color:var(--color-input-text);padding:.5rem .75rem;margin-bottom:.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;font-size:1rem} input:disabled,select:disabled,textarea:disabled{cursor:not-allowed;opacity:.5} input:invalid,select:invalid,textarea:invalid{border-color:var(--color-danger-content)} img{max-width:100%} input[type=checkbox],input[type=radio]{vertical-align:middle;margin-bottom:0;margin-top:0} input[type=color],input[type=range]{padding:initial} input[type=search]{border-radius:400px;-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; } /** Custom z-index for form dialogs */ .z-dialog { z-index: 100; } /** 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 { border: var(--line-a-focus) solid transparent; border-radius: 2px; color: var(--color-a-default); font-size: 1em; padding: 0 var(--spacer-a-px); margin: calc(-1 * var(--line-a-focus)) calc(-1 * (var(--spacer-a-px) + var(--line-a-focus))); 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; --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; --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.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; --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-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-opaque { --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-default: var(--color-neutral-background); --button-color-background-focus: var(--color-button-secondary-background-focus); --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-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-xs-size: var(--rem48); height: var(--full-snoo-xs-size); width: var(--full-snoo-xs-size); margin-top: 0.125rem; } .full-snoo-xs > img { width: var(--rem36); bottom: calc(-1 * 0.1875rem); } .full-snoo-sm { --full-snoo-sm-size: var(--rem64); height: var(--full-snoo-sm-size); width: var(--full-snoo-sm-size); margin-top: 0.125rem; } .full-snoo-sm > img { width: var(--rem48); bottom: calc(-1 * var(--rem4)); } .full-snoo-md { --full-snoo-md-size: var(--rem88); height: var(--full-snoo-md-size); width: var(--full-snoo-md-size); margin-top: var(--spacer-2xs); } .full-snoo-md > img { width: var(--rem64); bottom: calc(-1 * var(--rem6)); } .full-snoo-lg { --full-snoo-lg-size: var(--rem144); height: var(--full-snoo-lg-size); width: var(--full-snoo-lg-size); margin-top: 0.375rem; } .full-snoo-lg > img { width: 6.625rem; bottom: calc(-1 * var(--rem10)); } .full-snoo-xl { --full-snoo-xl-size: var(--rem192); height: var(--full-snoo-xl-size); width: var(--full-snoo-xl-size); margin-top: var(--spacer-xs); } .full-snoo-xl > img { width: 8.8125rem; bottom: calc(-1 * var(--rem14)); } .full-snoo-2xl { --full-snoo-2xl-size: var(--rem320); height: var(--full-snoo-2xl-size); width: var(--full-snoo-2xl-size); margin-top: var(--spacer-sm); } .full-snoo-2xl > img { width: 14.75rem; bottom: calc(-1 * var(--rem22)); } .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; } .invisible { visibility: hidden; } .collapse { visibility: collapse; } .static { position: static; } .fixed { position: fixed; } .absolute { position: absolute; } .relative { position: relative; } .-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-\\[\\.25rem\\] { left: .25rem; } .left-\\[\\.425rem\\] { left: .425rem; } .left-xs { left: 0.5rem; } .right-\\[\\.25rem\\] { right: .25rem; } .right-\\[\\.425rem\\] { right: .425rem; } .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; } .z-\\[2\\] { z-index: 2; } .z-auto { z-index: auto; } .col-start-1 { grid-column-start: 1; } .row-start-1 { grid-row-start: 1; } .m-0 { margin: 0px; } .m-sm { margin: 0.75rem; } .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); } .mb-0 { margin-bottom: 0px; } .ml-0 { margin-left: 0px; } .ml-2xs { margin-left: 0.25rem; } .ml-\\[-\\.25rem\\] { margin-left: -.25rem; } .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-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; } .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\\.87rem\\] { height: 2.87rem; } .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-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-100 { max-height: 100%; } .max-h-\\[160px\\] { max-height: 160px; } .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-\\[1rem\\] { min-height: 1rem; } .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-\\[12rem\\] { width: 12rem; } .w-\\[1rem\\] { width: 1rem; } .w-\\[2\\.5rem\\] { width: 2.5rem; } .w-\\[2\\.87rem\\] { width: 2.87rem; } .w-\\[20rem\\] { width: 20rem; } .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-\\[9rem\\] { width: 9rem; } .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; } .max-w-\\[480px\\] { max-width: 480px; } .max-w-full { max-width: 100%; } .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; } .-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; } .space-x-xs > :not([hidden]) ~ :not([hidden]) { --tw-space-x-reverse: 0; margin-right: calc(0.5rem * var(--tw-space-x-reverse)); margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse))); } .overflow-auto { overflow: auto; } .overflow-hidden { overflow: hidden; } .overflow-visible { overflow: visible; } .overflow-y-auto { overflow-y: auto; } .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-\\[\\.5rem\\] { border-radius: .5rem; } .rounded-full { border-radius: 624.9375rem; } .rounded-none { border-radius: 0rem; } .rounded-sm { border-radius: 0.25rem; } .border { border-width: 0.0625rem; } .border-0 { border-width: 0rem; } .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(0 69 172 / var(--tw-border-opacity)); } .border-neutral-background { border-color: var(--color-neutral-background); } .border-neutral-border { border-color: var(--color-neutral-border); } .border-secondary-background-selected { border-color: var(--color-secondary-background-selected); } .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-brand-onBackground { background-color: var(--color-brand-onBackground); } .bg-danger-content { background-color: var(--color-danger-content); } .bg-global-orangered { background-color: var(--color-global-orangered); } .bg-interactive-background-disabled { background-color: var(--color-interactive-background-disabled); } .bg-neutral-background { background-color: var(--color-neutral-background); } .bg-neutral-background-selected { background-color: var(--color-neutral-background-selected); } .bg-neutral-background-strong { background-color: var(--color-neutral-background-strong); } .bg-neutral-background-weak { background-color: var(--color-neutral-background-weak); } .bg-neutral-content { background-color: var(--color-neutral-content); } .bg-neutral-content-disabled { background-color: var(--color-neutral-content-disabled); } .bg-online { background-color: var(--color-online); } .bg-secondary-background-selected { background-color: var(--color-secondary-background-selected); } .bg-success-content { background-color: var(--color-success-content); } .bg-transparent { background-color: transparent; } .bg-warning-content { background-color: var(--color-warning-content); } .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-\\[var\\(--rem8\\)\\] { padding-top: var(--rem8); padding-bottom: var(--rem8); } .py-sm { padding-top: 0.75rem; padding-bottom: 0.75rem; } .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-\\[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; } .align-text-bottom { vertical-align: text-bottom; } .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; } .text-32 { font-size: 2rem; line-height: 2.25rem; } .font-bold { font-weight: 700; } .font-normal { font-weight: 400; } .font-semibold { font-weight: 600; } .uppercase { text-transform: uppercase; } .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-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 { color: var(--color-global-white); } .text-media-onbackground-weak { color: var(--color-media-onbackground-weak); } .text-neutral-content { color: var(--color-neutral-content); } .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-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; } .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); } @media (hover: hover) and (pointer: fine) { .hover\\:border-secondary-background-hover:hover { border-color: var(--color-secondary-background-hover); } .hover\\:border-secondary-background-selected:hover { border-color: var(--color-secondary-background-selected); } .hover\\:bg-brand-background-hover:hover { background-color: var(--color-brand-background-hover); } .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-secondary-background-selected:hover { background-color: var(--color-secondary-background-selected); } .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 { color: var(--color-global-white); } .hover\\:text-secondary:hover { color: var(--color-secondary); } .hover\\:text-secondary-hover:hover { color: var(--color-secondary-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; } } .\\[\\&\\>\\:first-child\\]\\:mb-0>:first-child { margin-bottom: 0px; } .\\[\\&\\>\\:first-child\\]\\:rounded-full>:first-child { border-radius: 624.9375rem; } .\\[\\&\\>\\: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] summary [icon-name=\'caret-down-outline\'], faceplate-expandable-section-helper:not(:defined) > details[open] summary [icon-name=\'caret-down-outline\'] { transform: rotate(180deg); } faceplate-expandable-section-helper:not([open]) summary [icon-name=\'caret-down-outline\'], faceplate-expandable-section-helper:not(:defined) > details:not([open]) summary [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\'; */ .theme-light,:root{--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:#D93A00;--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;--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} .theme-light dialog::backdrop,:root 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-pizzaRed:#ef5350;--color-global-brand-orangered:#FF4500;--color-global-focus:#47B0DB;--color-interactive-content-disabled:#00000040;--color-interactive-background-disabled:#0000000d;--color-interactive-pressed:#00000029;--color-neutral-content:#2A3C42;--color-neutral-content-disabled:#D6D6D6;--color-neutral-content-weak:#576F76;--color-neutral-content-strong:#0F1A1C;--color-neutral-background:#ffffff;--color-neutral-background-selected:#EAEDEF;--color-neutral-background-weak:#F9FAFA;--color-neutral-background-medium:#F8F8F8;--color-neutral-background-strong:#ffffff;--color-neutral-background-hover:#F2F4F5;--color-neutral-border:#00000033;--color-neutral-border-medium:#00000080;--color-neutral-border-weak:#0000001a;--color-neutral-border-strong:#0F1A1C;--color-primary:#0045AC;--color-primary-hover:#003584;--color-primary-visited:#8700B5;--color-primary-onBackground:#ffffff;--color-primary-onBackground-selected:#ffffff;--color-primary-background:#0045AC;--color-primary-background-hover:#003584;--color-primary-background-selected:#00255D;--color-secondary:#0F1A1C;--color-secondary-hover:#000000;--color-secondary-weak:#576F76;--color-secondary-onBackground:#000000;--color-secondary-background:#EAEDEF;--color-secondary-background-hover:#E2E7E9;--color-secondary-background-selected:#D2DADD;--color-secondary-plain:#0F1A1C;--color-secondary-plain-hover:#000000;--color-danger-background:#EB001F;--color-danger-background-disabled:#FFCCD2;--color-danger-background-hover:#A50016;--color-danger-onBackground:#ffffff;--color-danger-content:#A50016;--color-danger-content-hover:#7E0011;--color-danger-content-default:#ffffff;--color-brand-background:#D93A00;--color-brand-onBackground:#ffffff;--color-brand-background-hover:#962900;--color-media-background:#00000099;--color-media-onbackground:#ffffff;--color-media-onbackground-weak:#E2E7E9;--color-media-background-hover:#000000cc;--color-media-onbackground-disabled:#ffffff40;--color-media-border-selected:#ffffff;--color-media-background-selected:#000000cc;--color-success-content:#0A6000;--color-success-hover:#084A00;--color-success-onBackground:#ffffff;--color-success-background:#0E8A00;--color-success-background-hover:#0A6000;--color-warning-content:#665505;--color-warning-content-hover:#504104;--color-warning-onBackground:#000000;--color-warning-background:#DBAF00;--color-warning-background-hover:#8F7407;--color-upvote-content:#962900;--color-upvote-content-weak:var(--color-global-brand-orangered);--color-upvote-disabled:#9629004d;--color-upvote-onBackground:#ffffff;--color-upvote-background:#D93A00;--color-upvote-background-hover:#962900;--color-upvote-background-disabled:#D93A004d;--color-downvote-content:#453BB5;--color-downvote-content-weak:#6A5CFF;--color-downvote-disabled:#453BB54d;--color-downvote-onBackground:#ffffff;--color-downvote-background:#6A5CFF;--color-downvote-background-hover:#453BB5;--color-downvote-background-disabled:#6A5CFF4d;--color-brand-gradient-default:linear-gradient(180deg, #D93A00ff, #db3b00ff 30%, #962900ff 100%);--color-brand-gradient-default-highlight:linear-gradient(258deg, #db3f0000 80%, #D93A00ff 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-gradient-active:linear-gradient(180deg, #cd3700ff, #db3b00ff 68%, #D93A00ff 100%);--color-brand-gradient-active-highlight:linear-gradient(83deg, #db3f0000 80%, #D93A00ff 100%);--color-gradient-media:linear-gradient(180deg, #00000000, #0000008a 60%, #00000099 100%);--color-gradient-media-strong:linear-gradient(180deg, #00000000, #000000cc 60%, #000000e6 100%);--color-transparent-background-hover:#82959B1a;--color-global-black:#000000;--color-global-white:#ffffff;--color-global-orangered:#D93A00;--color-global-alienblue:#1870F4;--color-global-darkblue:#131F23;--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-action-upvote:#D93A00;--color-action-downvote:#6A5CFF;--color-alert-caution:#8F7407;--color-identity-admin:#D93A00;--color-identity-moderator:#0E8A00;--color-identity-self:#008675;--color-identity-coins:#DBAF00;--color-category-live:#D93A00;--color-category-nsfw:#E00096;--color-category-spoiler:var(--color-tone-1);--color-ui-canvas:var(--color-tone-5);--color-ui-modalbackground:var(--color-neutral-background-strong);--color-avatar-gradient:linear-gradient(0deg, #D2DADDff, #ffffffff 75%);--color-opacity-highlight:linear-gradient(#00255D1a, var(--color-tone-6));--color-opacity-08:#13131314;--color-opacity-50:#00000080;--color-scrim:#00000099;--color-scrim-strong:#000000cc;--color-scrim-gradient:linear-gradient(180deg, #00000000, #0000008a 60%, #00000099 100%);--color-online:#55BD46;--color-favorite:#8F7407;--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-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-warning-background);--color-button-caution-background-hover:var(--color-warning-background-hover);--color-button-caution-background-disabled:var(--color-interactive-background-disabled);--color-button-caution-text:var(--color-warning-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-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-pizzaRed:#c62828;--color-global-brand-orangered:#FF4500;--color-global-focus:#007FAE;--color-interactive-content-disabled:#ffffff40;--color-interactive-background-disabled:#ffffff0d;--color-interactive-pressed:#ffffff29;--color-neutral-content:#B8C5C9;--color-neutral-content-disabled:#303030;--color-neutral-content-weak:#82959B;--color-neutral-content-strong:#F2F4F5;--color-neutral-background:#0B1416;--color-neutral-background-selected:#1A282D;--color-neutral-background-weak:#04090A;--color-neutral-background-medium:#131313;--color-neutral-background-strong:#0F1A1C;--color-neutral-background-hover:#131F23;--color-neutral-border:#ffffff33;--color-neutral-border-medium:#ffffff80;--color-neutral-border-weak:#ffffff1a;--color-neutral-border-strong:#F2F4F5;--color-primary:#629FFF;--color-primary-hover:#A7CCFF;--color-primary-visited:#D55EFF;--color-primary-background:#0045AC;--color-primary-background-hover:#1870F4;--color-primary-background-selected:#629FFF;--color-primary-onBackground:#ffffff;--color-primary-onBackground-selected:#000000;--color-secondary:#F2F4F5;--color-secondary-hover:#ffffff;--color-secondary-weak:#82959B;--color-secondary-onBackground:#ffffff;--color-secondary-background:#1A282D;--color-secondary-background-hover:#223237;--color-secondary-background-selected:#33464C;--color-secondary-plain:#F2F4F5;--color-secondary-plain-hover:#ffffff;--color-danger-background:#A50016;--color-danger-background-disabled:#3A0008;--color-danger-background-hover:#EB001F;--color-danger-onBackground:#ffffff;--color-danger-content:#FF6E80;--color-danger-content-hover:#FFADB8;--color-success-content:#55BD46;--color-success-hover:#A3E398;--color-success-onBackground:#ffffff;--color-success-background:#0A6000;--color-success-background-hover:#0E8A00;--color-warning-content:#DBAF00;--color-warning-content-hover:#FADB61;--color-warning-onBackground:#000000;--color-warning-background:#DBAF00;--color-warning-background-hover:#FADB61;--color-upvote-content:#FE7C53;--color-upvote-content-weak:var(--color-global-brand-orangered);--color-upvote-disabled:#FE7C534d;--color-upvote-onBackground:#ffffff;--color-upvote-background:#D93A00;--color-upvote-background-hover:#962900;--color-upvote-background-disabled:#D93A004d;--color-downvote-content:#988EFF;--color-downvote-content-weak:#6A5CFF;--color-downvote-disabled:#988EFF4d;--color-downvote-onBackground:#ffffff;--color-downvote-background:#453BB5;--color-downvote-background-hover:#453BB5;--color-downvote-background-disabled:#6A5CFF4d;--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-ui-canvas:#080808;--color-ui-modalbackground:var(--color-neutral-background-strong);--color-avatar-gradient:linear-gradient(0deg, #2A3C42ff, #0B1416ff 75%);--color-transparent-background-hover:#667A801a;--color-opacity-50:#F2F2F280;--color-online:#55BD46;--color-favorite:#DBAF00;--color-button-primary-border-activated:transparent;--color-button-plain-inverted-activated-text:var(--color-neutral-background);--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-pizzaRed:#c62828;--color-global-brand-orangered:#FF4500;--color-global-focus:#007FAE;--color-interactive-content-disabled:#ffffff40;--color-interactive-background-disabled:#ffffff0d;--color-interactive-pressed:#ffffff29;--color-neutral-content:#B8C5C9;--color-neutral-content-disabled:#303030;--color-neutral-content-weak:#82959B;--color-neutral-content-strong:#F2F4F5;--color-neutral-background:#0B1416;--color-neutral-background-selected:#1A282D;--color-neutral-background-weak:#04090A;--color-neutral-background-medium:#131313;--color-neutral-background-strong:#0F1A1C;--color-neutral-background-hover:#131F23;--color-neutral-border:#ffffff33;--color-neutral-border-medium:#ffffff80;--color-neutral-border-weak:#ffffff1a;--color-neutral-border-strong:#F2F4F5;--color-primary:#629FFF;--color-primary-hover:#A7CCFF;--color-primary-visited:#D55EFF;--color-primary-background:#0045AC;--color-primary-background-hover:#1870F4;--color-primary-background-selected:#629FFF;--color-primary-onBackground:#ffffff;--color-primary-onBackground-selected:#000000;--color-secondary:#F2F4F5;--color-secondary-hover:#ffffff;--color-secondary-weak:#82959B;--color-secondary-onBackground:#ffffff;--color-secondary-background:#1A282D;--color-secondary-background-hover:#223237;--color-secondary-background-selected:#33464C;--color-secondary-plain:#F2F4F5;--color-secondary-plain-hover:#ffffff;--color-danger-background:#A50016;--color-danger-background-disabled:#3A0008;--color-danger-background-hover:#EB001F;--color-danger-onBackground:#ffffff;--color-danger-content:#FF6E80;--color-danger-content-hover:#FFADB8;--color-success-content:#55BD46;--color-success-hover:#A3E398;--color-success-onBackground:#ffffff;--color-success-background:#0A6000;--color-success-background-hover:#0E8A00;--color-warning-content:#DBAF00;--color-warning-content-hover:#FADB61;--color-warning-onBackground:#000000;--color-warning-background:#DBAF00;--color-warning-background-hover:#FADB61;--color-upvote-content:#FE7C53;--color-upvote-content-weak:var(--color-global-brand-orangered);--color-upvote-disabled:#FE7C534d;--color-upvote-onBackground:#ffffff;--color-upvote-background:#D93A00;--color-upvote-background-hover:#962900;--color-upvote-background-disabled:#D93A004d;--color-downvote-content:#988EFF;--color-downvote-content-weak:#6A5CFF;--color-downvote-disabled:#988EFF4d;--color-downvote-onBackground:#ffffff;--color-downvote-background:#453BB5;--color-downvote-background-hover:#453BB5;--color-downvote-background-disabled:#6A5CFF4d;--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-ui-canvas:#080808;--color-ui-modalbackground:var(--color-neutral-background-strong);--color-avatar-gradient:linear-gradient(0deg, #2A3C42ff, #0B1416ff 75%);--color-transparent-background-hover:#667A801a;--color-opacity-50:#F2F2F280;--color-online:#55BD46;--color-favorite:#DBAF00;--color-button-primary-border-activated:transparent;--color-button-plain-inverted-activated-text:var(--color-neutral-background);--color-shimmer-background:#ffffff08;--color-shimmer-gradient-overlay:linear-gradient(to right, #ffffff00, #ffffff05 20%, #ffffff0f 50%, #ffffff08 70%, #ffffff00 100%)} .theme-light.theme-rpl,.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-pizzaRed:#ef5350;--color-global-brand-orangered:#FF4500;--color-global-focus:#47B0DB;--color-interactive-content-disabled:#00000040;--color-interactive-background-disabled:#0000000d;--color-interactive-pressed:#00000029;--color-neutral-content:#2A3C42;--color-neutral-content-disabled:#D6D6D6;--color-neutral-content-weak:#576F76;--color-neutral-content-strong:#0F1A1C;--color-neutral-background:#ffffff;--color-neutral-background-selected:#EAEDEF;--color-neutral-background-weak:#F9FAFA;--color-neutral-background-medium:#F8F8F8;--color-neutral-background-strong:#ffffff;--color-neutral-background-hover:#F2F4F5;--color-neutral-border:#00000033;--color-neutral-border-medium:#00000080;--color-neutral-border-weak:#0000001a;--color-neutral-border-strong:#0F1A1C;--color-primary:#0045AC;--color-primary-hover:#003584;--color-primary-visited:#8700B5;--color-primary-onBackground:#ffffff;--color-primary-onBackground-selected:#ffffff;--color-primary-background:#0045AC;--color-primary-background-hover:#003584;--color-primary-background-selected:#00255D;--color-secondary:#0F1A1C;--color-secondary-hover:#000000;--color-secondary-weak:#576F76;--color-secondary-onBackground:#000000;--color-secondary-background:#EAEDEF;--color-secondary-background-hover:#E2E7E9;--color-secondary-background-selected:#D2DADD;--color-secondary-plain:#0F1A1C;--color-secondary-plain-hover:#000000;--color-danger-background:#EB001F;--color-danger-background-disabled:#FFCCD2;--color-danger-background-hover:#A50016;--color-danger-onBackground:#ffffff;--color-danger-content:#A50016;--color-danger-content-hover:#7E0011;--color-danger-content-default:#ffffff;--color-brand-background:#D93A00;--color-brand-onBackground:#ffffff;--color-brand-background-hover:#962900;--color-media-background:#00000099;--color-media-onbackground:#ffffff;--color-media-onbackground-weak:#E2E7E9;--color-media-background-hover:#000000cc;--color-media-onbackground-disabled:#ffffff40;--color-media-border-selected:#ffffff;--color-media-background-selected:#000000cc;--color-success-content:#0A6000;--color-success-hover:#084A00;--color-success-onBackground:#ffffff;--color-success-background:#0E8A00;--color-success-background-hover:#0A6000;--color-warning-content:#665505;--color-warning-content-hover:#504104;--color-warning-onBackground:#000000;--color-warning-background:#DBAF00;--color-warning-background-hover:#8F7407;--color-upvote-content:#962900;--color-upvote-content-weak:var(--color-global-brand-orangered);--color-upvote-disabled:#9629004d;--color-upvote-onBackground:#ffffff;--color-upvote-background:#D93A00;--color-upvote-background-hover:#962900;--color-upvote-background-disabled:#D93A004d;--color-downvote-content:#453BB5;--color-downvote-content-weak:#6A5CFF;--color-downvote-disabled:#453BB54d;--color-downvote-onBackground:#ffffff;--color-downvote-background:#6A5CFF;--color-downvote-background-hover:#453BB5;--color-downvote-background-disabled:#6A5CFF4d;--color-brand-gradient-default:linear-gradient(180deg, #D93A00ff, #db3b00ff 30%, #962900ff 100%);--color-brand-gradient-default-highlight:linear-gradient(258deg, #db3f0000 80%, #D93A00ff 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-gradient-active:linear-gradient(180deg, #cd3700ff, #db3b00ff 68%, #D93A00ff 100%);--color-brand-gradient-active-highlight:linear-gradient(83deg, #db3f0000 80%, #D93A00ff 100%);--color-gradient-media:linear-gradient(180deg, #00000000, #0000008a 60%, #00000099 100%);--color-gradient-media-strong:linear-gradient(180deg, #00000000, #000000cc 60%, #000000e6 100%);--color-transparent-background-hover:#82959B1a;--color-global-black:#000000;--color-global-white:#ffffff;--color-global-orangered:#D93A00;--color-global-alienblue:#1870F4;--color-global-darkblue:#131F23;--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-action-upvote:#D93A00;--color-action-downvote:#6A5CFF;--color-alert-caution:#8F7407;--color-identity-admin:#D93A00;--color-identity-moderator:#0E8A00;--color-identity-self:#008675;--color-identity-coins:#DBAF00;--color-category-live:#D93A00;--color-category-nsfw:#E00096;--color-category-spoiler:var(--color-tone-1);--color-ui-canvas:var(--color-tone-5);--color-ui-modalbackground:var(--color-neutral-background-strong);--color-avatar-gradient:linear-gradient(0deg, #D2DADDff, #ffffffff 75%);--color-opacity-highlight:linear-gradient(#00255D1a, var(--color-tone-6));--color-opacity-08:#13131314;--color-opacity-50:#00000080;--color-scrim:#00000099;--color-scrim-strong:#000000cc;--color-scrim-gradient:linear-gradient(180deg, #00000000, #0000008a 60%, #00000099 100%);--color-online:#55BD46;--color-favorite:#8F7407;--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-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-warning-background);--color-button-caution-background-hover:var(--color-warning-background-hover);--color-button-caution-background-disabled:var(--color-interactive-background-disabled);--color-button-caution-text:var(--color-warning-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-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-pizzaRed:#c62828;--color-global-brand-orangered:#FF4500;--color-global-focus:#007FAE;--color-interactive-content-disabled:#ffffff40;--color-interactive-background-disabled:#ffffff0d;--color-interactive-pressed:#ffffff29;--color-neutral-content:#B8C5C9;--color-neutral-content-disabled:#303030;--color-neutral-content-weak:#82959B;--color-neutral-content-strong:#F2F4F5;--color-neutral-background:#0B1416;--color-neutral-background-selected:#1A282D;--color-neutral-background-weak:#04090A;--color-neutral-background-medium:#131313;--color-neutral-background-strong:#0F1A1C;--color-neutral-background-hover:#131F23;--color-neutral-border:#ffffff33;--color-neutral-border-medium:#ffffff80;--color-neutral-border-weak:#ffffff1a;--color-neutral-border-strong:#F2F4F5;--color-primary:#629FFF;--color-primary-hover:#A7CCFF;--color-primary-visited:#D55EFF;--color-primary-background:#0045AC;--color-primary-background-hover:#1870F4;--color-primary-background-selected:#629FFF;--color-primary-onBackground:#ffffff;--color-primary-onBackground-selected:#000000;--color-secondary:#F2F4F5;--color-secondary-hover:#ffffff;--color-secondary-weak:#82959B;--color-secondary-onBackground:#ffffff;--color-secondary-background:#1A282D;--color-secondary-background-hover:#223237;--color-secondary-background-selected:#33464C;--color-secondary-plain:#F2F4F5;--color-secondary-plain-hover:#ffffff;--color-danger-background:#A50016;--color-danger-background-disabled:#3A0008;--color-danger-background-hover:#EB001F;--color-danger-onBackground:#ffffff;--color-danger-content:#FF6E80;--color-danger-content-hover:#FFADB8;--color-success-content:#55BD46;--color-success-hover:#A3E398;--color-success-onBackground:#ffffff;--color-success-background:#0A6000;--color-success-background-hover:#0E8A00;--color-warning-content:#DBAF00;--color-warning-content-hover:#FADB61;--color-warning-onBackground:#000000;--color-warning-background:#DBAF00;--color-warning-background-hover:#FADB61;--color-upvote-content:#FE7C53;--color-upvote-content-weak:var(--color-global-brand-orangered);--color-upvote-disabled:#FE7C534d;--color-upvote-onBackground:#ffffff;--color-upvote-background:#D93A00;--color-upvote-background-hover:#962900;--color-upvote-background-disabled:#D93A004d;--color-downvote-content:#988EFF;--color-downvote-content-weak:#6A5CFF;--color-downvote-disabled:#988EFF4d;--color-downvote-onBackground:#ffffff;--color-downvote-background:#453BB5;--color-downvote-background-hover:#453BB5;--color-downvote-background-disabled:#6A5CFF4d;--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-ui-canvas:#080808;--color-ui-modalbackground:var(--color-neutral-background-strong);--color-avatar-gradient:linear-gradient(0deg, #2A3C42ff, #0B1416ff 75%);--color-transparent-background-hover:#667A801a;--color-opacity-50:#F2F2F280;--color-online:#55BD46;--color-favorite:#DBAF00;--color-button-primary-border-activated:transparent;--color-button-plain-inverted-activated-text:var(--color-neutral-background);--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-pizzaRed:#c62828;--color-global-brand-orangered:#FF4500;--color-global-focus:#007FAE;--color-interactive-content-disabled:#ffffff40;--color-interactive-background-disabled:#ffffff0d;--color-interactive-pressed:#ffffff29;--color-neutral-content:#B8C5C9;--color-neutral-content-disabled:#303030;--color-neutral-content-weak:#82959B;--color-neutral-content-strong:#F2F4F5;--color-neutral-background:#0B1416;--color-neutral-background-selected:#1A282D;--color-neutral-background-weak:#04090A;--color-neutral-background-medium:#131313;--color-neutral-background-strong:#0F1A1C;--color-neutral-background-hover:#131F23;--color-neutral-border:#ffffff33;--color-neutral-border-medium:#ffffff80;--color-neutral-border-weak:#ffffff1a;--color-neutral-border-strong:#F2F4F5;--color-primary:#629FFF;--color-primary-hover:#A7CCFF;--color-primary-visited:#D55EFF;--color-primary-background:#0045AC;--color-primary-background-hover:#1870F4;--color-primary-background-selected:#629FFF;--color-primary-onBackground:#ffffff;--color-primary-onBackground-selected:#000000;--color-secondary:#F2F4F5;--color-secondary-hover:#ffffff;--color-secondary-weak:#82959B;--color-secondary-onBackground:#ffffff;--color-secondary-background:#1A282D;--color-secondary-background-hover:#223237;--color-secondary-background-selected:#33464C;--color-secondary-plain:#F2F4F5;--color-secondary-plain-hover:#ffffff;--color-danger-background:#A50016;--color-danger-background-disabled:#3A0008;--color-danger-background-hover:#EB001F;--color-danger-onBackground:#ffffff;--color-danger-content:#FF6E80;--color-danger-content-hover:#FFADB8;--color-success-content:#55BD46;--color-success-hover:#A3E398;--color-success-onBackground:#ffffff;--color-success-background:#0A6000;--color-success-background-hover:#0E8A00;--color-warning-content:#DBAF00;--color-warning-content-hover:#FADB61;--color-warning-onBackground:#000000;--color-warning-background:#DBAF00;--color-warning-background-hover:#FADB61;--color-upvote-content:#FE7C53;--color-upvote-content-weak:var(--color-global-brand-orangered);--color-upvote-disabled:#FE7C534d;--color-upvote-onBackground:#ffffff;--color-upvote-background:#D93A00;--color-upvote-background-hover:#962900;--color-upvote-background-disabled:#D93A004d;--color-downvote-content:#988EFF;--color-downvote-content-weak:#6A5CFF;--color-downvote-disabled:#988EFF4d;--color-downvote-onBackground:#ffffff;--color-downvote-background:#453BB5;--color-downvote-background-hover:#453BB5;--color-downvote-background-disabled:#6A5CFF4d;--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-ui-canvas:#080808;--color-ui-modalbackground:var(--color-neutral-background-strong);--color-avatar-gradient:linear-gradient(0deg, #2A3C42ff, #0B1416ff 75%);--color-transparent-background-hover:#667A801a;--color-opacity-50:#F2F2F280;--color-online:#55BD46;--color-favorite:#DBAF00;--color-button-primary-border-activated:transparent;--color-button-plain-inverted-activated-text:var(--color-neutral-background);--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} .theme-dark,.theme-light,:root{background:var(--color-tone-7);color:var(--color-tone-1)} body{font-size:var(--font-body)} :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} 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)} .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-caution-text)} button[upvote]:disabled .gold-upvote-border,button[upvote]:disabled .gold-upvote-indicator{opacity:.4} button[upvote] .gold-upvote-indicator svg{fill:#ffd635} button[upvote] .gold-upvote-border svg{fill:#ad651e} button[upvote] .overlapped-upvote{-webkit-clip-path:polygon(0 0,100% 0,100% 100%,0 99%,0 60%,32% 60%,41% 60%,46% 60%,50% 57%,52% 51%,51% 44%,28% 17%);clip-path:polygon(0 0,100% 0,100% 100%,0 99%,0 60%,32% 60%,41% 60%,46% 60%,50% 57%,52% 51%,51% 44%,28% 17%)} faceplate-dropdown-menu:not(.connected) [slot=menu]{display:none} faceplate-expandable-section-helper{display:contents} faceplate-expandable-section-helper>details>summary{list-style-type:none} faceplate-expandable-section-helper>details>summary::-webkit-details-marker,faceplate-expandable-section-helper>details>summary::marker{display:none} faceplate-expandable-section-helper[rpl]>details>summary{margin:0} faceplate-expandable-section-helper>details>summary [icon-name=caret-down-outline]{transition:transform .22s ease-in-out} faceplate-expandable-section-helper:not(:defined)>details[open] summary [icon-name=caret-down-outline],faceplate-expandable-section-helper[open] summary [icon-name=caret-down-outline]{transform:rotate(180deg)} faceplate-expandable-section-helper:not(:defined)>details:not([open]) summary [icon-name=caret-down-outline],faceplate-expandable-section-helper:not([open]) summary [icon-name=caret-down-outline]{transform:rotate(0)} address,area,article,aside,audio,blockquote,datalist,details,dl,fieldset,figure,form,iframe,img,input,menu,meter,nav,ol,optgroup,option,output,p,pre,progress,ruby,section,textarea,ul,video{margin-bottom:1rem} button,html,input,select{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 .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{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)} article header,aside header,dialog header,faceplate-dialog header,main header,section header{padding:.5rem 0;margin:1rem 0;background:0 0} article header h1,aside header h1,dialog header h1,faceplate-dialog header h1,main header h1,section 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;--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-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(0);transition:transform .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(button):active,:where(input):where([type=submit],[type=reset],[type=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).anchor-disabled,:where(button):disabled,:where(input):where([type=submit],[type=reset],[type=button]).anchor-disabled,:where(input):where([type=submit],[type=reset],[type=button]):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).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:.5rem 1rem .375rem} faceplate-tablist a:hover{text-decoration:none} code,kbd,pre,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:.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{background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0} code pre{display:inline;background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0} details{padding:.5rem 1rem;background:var(--color-tone-6);border:var(--misc-accordion-border);border-radius:var(--radius-accordion-size)} details summary{cursor:pointer;font-weight:700;list-style-type:var(--misc-accordion-closed-list-style-type)} details[open] summary{margin-bottom:.375rem;list-style-type:var(--misc-accordion-open-list-style-type)} details[open] summary icon-caret-down{transform:rotate(180deg);transition:transform .22s ease-in-out} details summary icon-caret-down{transform:rotate(0);transition:transform .22s ease-in-out} details[open]>:last-child{margin-bottom:0} dt{font-weight:700;margin-bottom:.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:.25rem;background:var(--color-tone-7);min-width:0} legend{padding:0;font-weight:700} table{border-collapse:collapse;width:100%;word-break:normal;margin-bottom:1rem} td,th{text-align:left;padding:.5rem} th{background:var(--color-tone-6)} tr:nth-child(even){background:var(--color-tone-6)} table caption{font-weight:700;margin-bottom:.5rem} textarea{max-width:100%} ol,ul{padding-left:2rem} li{margin-top:.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:.5rem .75rem;border-block-end:1px solid var(--color-tone-5)} menu li:last-child{border-block-end:none} menu menu,ol ol,ol ul,ul ol,ul ul{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} input,select,textarea{font-family:var(--font-sans);color:var(--color-input-text);padding:.5rem .75rem;margin-bottom:.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;font-size:1rem} input:disabled,select:disabled,textarea:disabled{cursor:not-allowed;opacity:.5} input:invalid,select:invalid,textarea:invalid{border-color:var(--color-danger-content)} img{max-width:100%} input[type=checkbox],input[type=radio]{vertical-align:middle;margin-bottom:0;margin-top:0} input[type=color],input[type=range]{padding:initial} input[type=search]{border-radius:400px;-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; } /** Custom z-index for form dialogs */ .z-dialog { z-index: 100; } /** 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 { border: var(--line-a-focus) solid transparent; border-radius: 2px; color: var(--color-a-default); font-size: 1em; padding: 0 var(--spacer-a-px); margin: calc(-1 * var(--line-a-focus)) calc(-1 * (var(--spacer-a-px) + var(--line-a-focus))); 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; --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; --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.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; --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-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-opaque { --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-default: var(--color-neutral-background); --button-color-background-focus: var(--color-button-secondary-background-focus); --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-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-xs-size: var(--rem48); height: var(--full-snoo-xs-size); width: var(--full-snoo-xs-size); margin-top: 0.125rem; } .full-snoo-xs > img { width: var(--rem36); bottom: calc(-1 * 0.1875rem); } .full-snoo-sm { --full-snoo-sm-size: var(--rem64); height: var(--full-snoo-sm-size); width: var(--full-snoo-sm-size); margin-top: 0.125rem; } .full-snoo-sm > img { width: var(--rem48); bottom: calc(-1 * var(--rem4)); } .full-snoo-md { --full-snoo-md-size: var(--rem88); height: var(--full-snoo-md-size); width: var(--full-snoo-md-size); margin-top: var(--spacer-2xs); } .full-snoo-md > img { width: var(--rem64); bottom: calc(-1 * var(--rem6)); } .full-snoo-lg { --full-snoo-lg-size: var(--rem144); height: var(--full-snoo-lg-size); width: var(--full-snoo-lg-size); margin-top: 0.375rem; } .full-snoo-lg > img { width: 6.625rem; bottom: calc(-1 * var(--rem10)); } .full-snoo-xl { --full-snoo-xl-size: var(--rem192); height: var(--full-snoo-xl-size); width: var(--full-snoo-xl-size); margin-top: var(--spacer-xs); } .full-snoo-xl > img { width: 8.8125rem; bottom: calc(-1 * var(--rem14)); } .full-snoo-2xl { --full-snoo-2xl-size: var(--rem320); height: var(--full-snoo-2xl-size); width: var(--full-snoo-2xl-size); margin-top: var(--spacer-sm); } .full-snoo-2xl > img { width: 14.75rem; bottom: calc(-1 * var(--rem22)); } .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; } .invisible { visibility: hidden; } .collapse { visibility: collapse; } .static { position: static; } .fixed { position: fixed; } .absolute { position: absolute; } .relative { position: relative; } .-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-\\[\\.25rem\\] { left: .25rem; } .left-\\[\\.425rem\\] { left: .425rem; } .left-xs { left: 0.5rem; } .right-\\[\\.25rem\\] { right: .25rem; } .right-\\[\\.425rem\\] { right: .425rem; } .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; } .z-\\[2\\] { z-index: 2; } .z-auto { z-index: auto; } .col-start-1 { grid-column-start: 1; } .row-start-1 { grid-row-start: 1; } .m-0 { margin: 0px; } .m-sm { margin: 0.75rem; } .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); } .mb-0 { margin-bottom: 0px; } .ml-0 { margin-left: 0px; } .ml-2xs { margin-left: 0.25rem; } .ml-\\[-\\.25rem\\] { margin-left: -.25rem; } .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-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; } .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\\.87rem\\] { height: 2.87rem; } .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-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-100 { max-height: 100%; } .max-h-\\[160px\\] { max-height: 160px; } .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-\\[1rem\\] { min-height: 1rem; } .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-\\[12rem\\] { width: 12rem; } .w-\\[1rem\\] { width: 1rem; } .w-\\[2\\.5rem\\] { width: 2.5rem; } .w-\\[2\\.87rem\\] { width: 2.87rem; } .w-\\[20rem\\] { width: 20rem; } .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-\\[9rem\\] { width: 9rem; } .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; } .max-w-\\[400px\\] { max-width: 400px; } .max-w-\\[480px\\] { max-width: 480px; } .max-w-full { max-width: 100%; } .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; } .-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; } .space-x-xs > :not([hidden]) ~ :not([hidden]) { --tw-space-x-reverse: 0; margin-right: calc(0.5rem * var(--tw-space-x-reverse)); margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse))); } .overflow-auto { overflow: auto; } .overflow-hidden { overflow: hidden; } .overflow-visible { overflow: visible; } .overflow-y-auto { overflow-y: auto; } .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-\\[\\.5rem\\] { border-radius: .5rem; } .rounded-full { border-radius: 624.9375rem; } .rounded-none { border-radius: 0rem; } .rounded-sm { border-radius: 0.25rem; } .border { border-width: 0.0625rem; } .border-0 { border-width: 0rem; } .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(0 69 172 / var(--tw-border-opacity)); } .border-neutral-background { border-color: var(--color-neutral-background); } .border-neutral-border { border-color: var(--color-neutral-border); } .border-secondary-background-selected { border-color: var(--color-secondary-background-selected); } .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-brand-onBackground { background-color: var(--color-brand-onBackground); } .bg-danger-content { background-color: var(--color-danger-content); } .bg-global-orangered { background-color: var(--color-global-orangered); } .bg-interactive-background-disabled { background-color: var(--color-interactive-background-disabled); } .bg-neutral-background { background-color: var(--color-neutral-background); } .bg-neutral-background-selected { background-color: var(--color-neutral-background-selected); } .bg-neutral-background-strong { background-color: var(--color-neutral-background-strong); } .bg-neutral-background-weak { background-color: var(--color-neutral-background-weak); } .bg-neutral-content { background-color: var(--color-neutral-content); } .bg-neutral-content-disabled { background-color: var(--color-neutral-content-disabled); } .bg-online { background-color: var(--color-online); } .bg-secondary-background-selected { background-color: var(--color-secondary-background-selected); } .bg-success-content { background-color: var(--color-success-content); } .bg-transparent { background-color: transparent; } .bg-warning-content { background-color: var(--color-warning-content); } .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-\\[var\\(--rem8\\)\\] { padding-top: var(--rem8); padding-bottom: var(--rem8); } .py-sm { padding-top: 0.75rem; padding-bottom: 0.75rem; } .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-\\[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; } .align-text-bottom { vertical-align: text-bottom; } .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; } .text-32 { font-size: 2rem; line-height: 2.25rem; } .font-bold { font-weight: 700; } .font-normal { font-weight: 400; } .font-semibold { font-weight: 600; } .uppercase { text-transform: uppercase; } .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-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 { color: var(--color-global-white); } .text-media-onbackground-weak { color: var(--color-media-onbackground-weak); } .text-neutral-content { color: var(--color-neutral-content); } .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-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; } .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); } @media (hover: hover) and (pointer: fine) { .hover\\:border-secondary-background-hover:hover { border-color: var(--color-secondary-background-hover); } .hover\\:border-secondary-background-selected:hover { border-color: var(--color-secondary-background-selected); } .hover\\:bg-brand-background-hover:hover { background-color: var(--color-brand-background-hover); } .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-secondary-background-selected:hover { background-color: var(--color-secondary-background-selected); } .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 { color: var(--color-global-white); } .hover\\:text-secondary:hover { color: var(--color-secondary); } .hover\\:text-secondary-hover:hover { color: var(--color-secondary-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; } } .\\[\\&\\>\\:first-child\\]\\:mb-0>:first-child { margin-bottom: 0px; } .\\[\\&\\>\\:first-child\\]\\:rounded-full>:first-child { border-radius: 624.9375rem; } .\\[\\&\\>\\: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);
|