mirror of
https://github.com/fluxerapp/fluxer
synced 2026-10-18 21:45:31 +09:00
fix(app): rework composer layout and footer alignment (#1591)
This commit is contained in:
Hampus authored and GitHub committed
1 parent
d56c1e5674
commit
01432bc682
76 files changed
+8772
-8759
No files matched your search
@@ -111,7 +111,7 @@ export const MESSAGE_LAYOUT_SPEC = {
|
||||
gap: '0.25rem',
|
||||
usernameGap: '0.45rem',
|
||||
},
|
||||
gutter: '1rem',
|
||||
gutter: '0.75rem',
|
||||
spacingY: '0.125rem',
|
||||
lineHeight: '1.375rem',
|
||||
containerGap: '0.25rem',
|
||||
|
||||
@@ -1073,19 +1073,6 @@
|
||||
align-items: flex-start;
|
||||
justify-content: center;
|
||||
padding-block-start: 0.15em;
|
||||
padding-inline-start: max(
|
||||
0px,
|
||||
calc(
|
||||
(
|
||||
var(--textarea-horizontal-padding, 1rem) +
|
||||
var(--textarea-side-button-padding, 0.34375rem) +
|
||||
(var(--textarea-button-height, 2rem) / 2) -
|
||||
var(--chat-horizontal-padding, 1rem) -
|
||||
(var(--message-avatar-size) / 2)
|
||||
) *
|
||||
2
|
||||
)
|
||||
);
|
||||
user-select: none;
|
||||
-webkit-user-select: none;
|
||||
}
|
||||
@@ -1261,7 +1248,10 @@
|
||||
|
||||
.typingCluster {
|
||||
display: grid;
|
||||
grid-template-columns: var(--typing-upload-column-width) minmax(0, 1fr);
|
||||
grid-template-columns: calc(var(--textarea-button-height, 2rem) + var(--textarea-side-button-padding, 0.25rem) * 2) minmax(
|
||||
0,
|
||||
1fr
|
||||
);
|
||||
column-gap: var(--textarea-upload-gap, 0.75rem);
|
||||
align-items: center;
|
||||
pointer-events: none;
|
||||
@@ -1338,22 +1328,8 @@
|
||||
flex: 0 1 auto;
|
||||
}
|
||||
|
||||
.typingPillComposerStatus {
|
||||
height: var(--composer-status-pill-height);
|
||||
min-height: var(--composer-status-pill-height);
|
||||
max-width: 100%;
|
||||
min-width: 0;
|
||||
padding: 0 0.5rem;
|
||||
border-radius: var(--radius-full);
|
||||
}
|
||||
|
||||
.typingPillComposerStatus .typingIndicator,
|
||||
.typingPillComposerStatus .typingAvatarContainer {
|
||||
height: var(--composer-status-pill-height);
|
||||
}
|
||||
|
||||
.typingPillComposerStatus .typingText {
|
||||
line-height: var(--composer-status-pill-height);
|
||||
.typingClusterComposerStatus .typingAvatarContainer {
|
||||
--avatar-stack-outline-color: var(--composer-surface-color, var(--background-secondary-lighter));
|
||||
}
|
||||
|
||||
.compactContentWrapper {
|
||||
|
||||
@@ -117,6 +117,12 @@ export const THEME_VARIABLES: ReadonlyArray<ThemeVariableDefinition> = [
|
||||
{name: "--code-inline-bg", kind: "color", groupId: "code", groupLabel: "Code & terminal", source: "color-system"},
|
||||
{name: "--code-muted", kind: "color", groupId: "code", groupLabel: "Code & terminal", source: "color-system"},
|
||||
{name: "--code-text", kind: "color", groupId: "code", groupLabel: "Code & terminal", source: "color-system"},
|
||||
{name: "--composer-action-gap", kind: "dimension", groupId: "layout", groupLabel: "Layout", source: "globals"},
|
||||
{name: "--composer-box-inset", kind: "dimension", groupId: "other", groupLabel: "Other", source: "globals"},
|
||||
{name: "--composer-box-inset-inline", kind: "dimension", groupId: "other", groupLabel: "Other", source: "globals"},
|
||||
{name: "--composer-box-padding-inline", kind: "dimension", groupId: "layout", groupLabel: "Layout", source: "globals"},
|
||||
{name: "--composer-mobile-box-height", kind: "dimension", groupId: "layout", groupLabel: "Layout", source: "globals"},
|
||||
{name: "--composer-mobile-padding-y", kind: "dimension", groupId: "layout", groupLabel: "Layout", source: "globals"},
|
||||
{name: "--content-padding", kind: "dimension", groupId: "layout", groupLabel: "Layout", source: "globals"},
|
||||
{name: "--content-padding-lg", kind: "dimension", groupId: "layout", groupLabel: "Layout", source: "globals"},
|
||||
{name: "--content-padding-sm", kind: "dimension", groupId: "layout", groupLabel: "Layout", source: "globals"},
|
||||
@@ -130,14 +136,21 @@ export const THEME_VARIABLES: ReadonlyArray<ThemeVariableDefinition> = [
|
||||
{name: "--control-button-normal-text", kind: "color", groupId: "buttons", groupLabel: "Buttons", source: "color-system"},
|
||||
{name: "--emoji-size-emoji", kind: "dimension", groupId: "emoji", groupLabel: "Emoji", source: "globals"},
|
||||
{name: "--emoji-size-jumbo-emoji", kind: "dimension", groupId: "emoji", groupLabel: "Emoji", source: "globals"},
|
||||
{name: "--floating-surface-ring-color", kind: "color", groupId: "surfaces", groupLabel: "Surfaces", source: "globals"},
|
||||
{name: "--floating-surface-ring-color-strong", kind: "color", groupId: "surfaces", groupLabel: "Surfaces", source: "globals"},
|
||||
{name: "--focus-primary", kind: "color", groupId: "borders", groupLabel: "Borders & focus", source: "globals"},
|
||||
{name: "--font-keybind", kind: "other", groupId: "typography", groupLabel: "Typography", source: "globals"},
|
||||
{name: "--font-mono", kind: "font", groupId: "typography", groupLabel: "Typography", source: "runtime-fonts"},
|
||||
{name: "--font-sans", kind: "font", groupId: "typography", groupLabel: "Typography", source: "runtime-fonts"},
|
||||
{name: "--font-size", kind: "dimension", groupId: "typography", groupLabel: "Typography", source: "runtime-accessibility"},
|
||||
{name: "--font-size-xs", kind: "dimension", groupId: "typography", groupLabel: "Typography", source: "globals"},
|
||||
{name: "--footer-box-height", kind: "dimension", groupId: "layout", groupLabel: "Layout", source: "globals"},
|
||||
{name: "--footer-box-inner-inset", kind: "dimension", groupId: "other", groupLabel: "Other", source: "globals"},
|
||||
{name: "--footer-box-inset", kind: "dimension", groupId: "other", groupLabel: "Other", source: "globals"},
|
||||
{name: "--footer-box-inset-inline", kind: "dimension", groupId: "other", groupLabel: "Other", source: "globals"},
|
||||
{name: "--footer-box-padding-y", kind: "dimension", groupId: "layout", groupLabel: "Layout", source: "globals"},
|
||||
{name: "--footer-box-radius", kind: "dimension", groupId: "borders", groupLabel: "Borders & focus", source: "globals"},
|
||||
{name: "--footer-row-height", kind: "dimension", groupId: "layout", groupLabel: "Layout", source: "globals"},
|
||||
{name: "--footer-row-padding-y", kind: "dimension", groupId: "layout", groupLabel: "Layout", source: "globals"},
|
||||
{name: "--form-surface-background", kind: "color", groupId: "forms", groupLabel: "Forms", source: "globals"},
|
||||
{name: "--guild-icon-gap", kind: "dimension", groupId: "layout", groupLabel: "Layout", source: "globals"},
|
||||
{name: "--guild-icon-size", kind: "dimension", groupId: "layout", groupLabel: "Layout", source: "globals"},
|
||||
@@ -160,6 +173,7 @@ export const THEME_VARIABLES: ReadonlyArray<ThemeVariableDefinition> = [
|
||||
{name: "--layout-user-area-height", kind: "dimension", groupId: "layout", groupLabel: "Layout", source: "globals"},
|
||||
{name: "--layout-user-area-reserved-height", kind: "dimension", groupId: "layout", groupLabel: "Layout", source: "globals"},
|
||||
{name: "--link-decoration", kind: "other", groupId: "other", groupLabel: "Other", source: "runtime-accessibility"},
|
||||
{name: "--list-row-min-height", kind: "dimension", groupId: "layout", groupLabel: "Layout", source: "globals"},
|
||||
{name: "--macos-traffic-light-inset", kind: "dimension", groupId: "other", groupLabel: "Other", source: "globals"},
|
||||
{name: "--markup-everyone-border", kind: "color", groupId: "markup", groupLabel: "Markup & mentions", source: "color-system"},
|
||||
{name: "--markup-everyone-fill", kind: "color", groupId: "markup", groupLabel: "Markup & mentions", source: "color-system"},
|
||||
@@ -238,6 +252,7 @@ export const THEME_VARIABLES: ReadonlyArray<ThemeVariableDefinition> = [
|
||||
{name: "--message-unknown-warning-color", kind: "color", groupId: "messages", groupLabel: "Messages", source: "features/theme/styles/Message.module.css"},
|
||||
{name: "--mobile-bottom-nav-height", kind: "dimension", groupId: "layout", groupLabel: "Layout", source: "globals"},
|
||||
{name: "--native-titlebar-height", kind: "dimension", groupId: "layout", groupLabel: "Layout", source: "globals"},
|
||||
{name: "--outline-frame-border-width", kind: "dimension", groupId: "borders", groupLabel: "Borders & focus", source: "globals"},
|
||||
{name: "--panel-control-bg", kind: "color", groupId: "surfaces", groupLabel: "Surfaces", source: "color-system"},
|
||||
{name: "--panel-control-border", kind: "color", groupId: "borders", groupLabel: "Borders & focus", source: "color-system"},
|
||||
{name: "--panel-control-divider", kind: "color", groupId: "other", groupLabel: "Other", source: "color-system"},
|
||||
@@ -313,9 +328,9 @@ export const THEME_VARIABLES: ReadonlyArray<ThemeVariableDefinition> = [
|
||||
{name: "--textarea-container-padding-y", kind: "dimension", groupId: "forms", groupLabel: "Forms", source: "features/channel/components/textarea/TextareaInput.module.css"},
|
||||
{name: "--textarea-content-offset", kind: "dimension", groupId: "forms", groupLabel: "Forms", source: "features/channel/components/textarea/TextareaInput.module.css"},
|
||||
{name: "--textarea-font-size", kind: "dimension", groupId: "forms", groupLabel: "Forms", source: "features/channel/components/textarea/TextareaInput.module.css"},
|
||||
{name: "--textarea-horizontal-padding", kind: "dimension", groupId: "forms", groupLabel: "Forms", source: "features/channel/components/textarea/TextareaInput.module.css"},
|
||||
{name: "--textarea-line-height", kind: "dimension", groupId: "forms", groupLabel: "Forms", source: "features/channel/components/textarea/TextareaInput.module.css"},
|
||||
{name: "--textarea-min-height", kind: "dimension", groupId: "forms", groupLabel: "Forms", source: "features/channel/components/textarea/TextareaInput.module.css"},
|
||||
{name: "--textarea-min-height", kind: "dimension", groupId: "forms", groupLabel: "Forms", source: "globals"},
|
||||
{name: "--textarea-padding-y", kind: "dimension", groupId: "forms", groupLabel: "Forms", source: "globals"},
|
||||
{name: "--textarea-side-button-padding", kind: "dimension", groupId: "forms", groupLabel: "Forms", source: "features/channel/components/textarea/TextareaInput.module.css"},
|
||||
{name: "--textarea-top-bar-height", kind: "dimension", groupId: "forms", groupLabel: "Forms", source: "globals"},
|
||||
{name: "--textarea-upload-gap", kind: "dimension", groupId: "forms", groupLabel: "Forms", source: "features/channel/components/textarea/TextareaInput.module.css"},
|
||||
@@ -329,12 +344,14 @@ export const THEME_VARIABLES: ReadonlyArray<ThemeVariableDefinition> = [
|
||||
{name: "--typing-indicator-gap", kind: "dimension", groupId: "messages", groupLabel: "Messages", source: "globals"},
|
||||
{name: "--typing-indicator-height", kind: "dimension", groupId: "messages", groupLabel: "Messages", source: "globals"},
|
||||
{name: "--typing-pill-height", kind: "dimension", groupId: "messages", groupLabel: "Messages", source: "globals"},
|
||||
{name: "--typing-upload-column-width", kind: "dimension", groupId: "messages", groupLabel: "Messages", source: "globals"},
|
||||
{name: "--user-area-avatar-lead", kind: "dimension", groupId: "media", groupLabel: "Media", source: "globals"},
|
||||
{name: "--user-area-box-inset-block-end", kind: "dimension", groupId: "other", groupLabel: "Other", source: "globals"},
|
||||
{name: "--user-area-content-height", kind: "dimension", groupId: "layout", groupLabel: "Layout", source: "globals"},
|
||||
{name: "--user-area-divider-color", kind: "color", groupId: "other", groupLabel: "Other", source: "color-system"},
|
||||
{name: "--user-area-padding-x", kind: "dimension", groupId: "layout", groupLabel: "Layout", source: "globals"},
|
||||
{name: "--user-area-padding-y", kind: "dimension", groupId: "layout", groupLabel: "Layout", source: "globals"},
|
||||
{name: "--user-select", kind: "other", groupId: "other", groupLabel: "Other", source: "globals"},
|
||||
{name: "--voice-connection-padding-x", kind: "dimension", groupId: "layout", groupLabel: "Layout", source: "globals"},
|
||||
{name: "--voice-connection-padding-y", kind: "dimension", groupId: "layout", groupLabel: "Layout", source: "globals"},
|
||||
{name: "--z-index-base", kind: "number", groupId: "layering", groupLabel: "Layering", source: "globals"},
|
||||
{name: "--z-index-contextmenu", kind: "number", groupId: "layering", groupLabel: "Layering", source: "globals"},
|
||||
@@ -457,6 +474,12 @@ export const THEME_VARIABLE_NAMES: ReadonlyArray<string> = [
|
||||
"--code-inline-bg",
|
||||
"--code-muted",
|
||||
"--code-text",
|
||||
"--composer-action-gap",
|
||||
"--composer-box-inset",
|
||||
"--composer-box-inset-inline",
|
||||
"--composer-box-padding-inline",
|
||||
"--composer-mobile-box-height",
|
||||
"--composer-mobile-padding-y",
|
||||
"--content-padding",
|
||||
"--content-padding-lg",
|
||||
"--content-padding-sm",
|
||||
@@ -470,14 +493,21 @@ export const THEME_VARIABLE_NAMES: ReadonlyArray<string> = [
|
||||
"--control-button-normal-text",
|
||||
"--emoji-size-emoji",
|
||||
"--emoji-size-jumbo-emoji",
|
||||
"--floating-surface-ring-color",
|
||||
"--floating-surface-ring-color-strong",
|
||||
"--focus-primary",
|
||||
"--font-keybind",
|
||||
"--font-mono",
|
||||
"--font-sans",
|
||||
"--font-size",
|
||||
"--font-size-xs",
|
||||
"--footer-box-height",
|
||||
"--footer-box-inner-inset",
|
||||
"--footer-box-inset",
|
||||
"--footer-box-inset-inline",
|
||||
"--footer-box-padding-y",
|
||||
"--footer-box-radius",
|
||||
"--footer-row-height",
|
||||
"--footer-row-padding-y",
|
||||
"--form-surface-background",
|
||||
"--guild-icon-gap",
|
||||
"--guild-icon-size",
|
||||
@@ -500,6 +530,7 @@ export const THEME_VARIABLE_NAMES: ReadonlyArray<string> = [
|
||||
"--layout-user-area-height",
|
||||
"--layout-user-area-reserved-height",
|
||||
"--link-decoration",
|
||||
"--list-row-min-height",
|
||||
"--macos-traffic-light-inset",
|
||||
"--markup-everyone-border",
|
||||
"--markup-everyone-fill",
|
||||
@@ -578,6 +609,7 @@ export const THEME_VARIABLE_NAMES: ReadonlyArray<string> = [
|
||||
"--message-unknown-warning-color",
|
||||
"--mobile-bottom-nav-height",
|
||||
"--native-titlebar-height",
|
||||
"--outline-frame-border-width",
|
||||
"--panel-control-bg",
|
||||
"--panel-control-border",
|
||||
"--panel-control-divider",
|
||||
@@ -653,9 +685,9 @@ export const THEME_VARIABLE_NAMES: ReadonlyArray<string> = [
|
||||
"--textarea-container-padding-y",
|
||||
"--textarea-content-offset",
|
||||
"--textarea-font-size",
|
||||
"--textarea-horizontal-padding",
|
||||
"--textarea-line-height",
|
||||
"--textarea-min-height",
|
||||
"--textarea-padding-y",
|
||||
"--textarea-side-button-padding",
|
||||
"--textarea-top-bar-height",
|
||||
"--textarea-upload-gap",
|
||||
@@ -669,12 +701,14 @@ export const THEME_VARIABLE_NAMES: ReadonlyArray<string> = [
|
||||
"--typing-indicator-gap",
|
||||
"--typing-indicator-height",
|
||||
"--typing-pill-height",
|
||||
"--typing-upload-column-width",
|
||||
"--user-area-avatar-lead",
|
||||
"--user-area-box-inset-block-end",
|
||||
"--user-area-content-height",
|
||||
"--user-area-divider-color",
|
||||
"--user-area-padding-x",
|
||||
"--user-area-padding-y",
|
||||
"--user-select",
|
||||
"--voice-connection-padding-x",
|
||||
"--voice-connection-padding-y",
|
||||
"--z-index-base",
|
||||
"--z-index-contextmenu",
|
||||
@@ -801,6 +835,8 @@ export const THEME_COLOR_VARIABLES: ReadonlyArray<string> = [
|
||||
"--control-button-hover-text",
|
||||
"--control-button-normal-bg",
|
||||
"--control-button-normal-text",
|
||||
"--floating-surface-ring-color",
|
||||
"--floating-surface-ring-color-strong",
|
||||
"--focus-primary",
|
||||
"--form-surface-background",
|
||||
"--guild-list-foreground",
|
||||
@@ -932,7 +968,7 @@ export const THEME_STUDIO_DARK_DEFAULT_VARIABLE_VALUES: Readonly<Record<string,
|
||||
"--background-secondary-alt": "hsl(258, calc(10% * var(--saturation-factor)), 14.15%)",
|
||||
"--background-secondary-lighter": "hsl(258, calc(10% * var(--saturation-factor)), 12.44%)",
|
||||
"--background-tertiary": "hsl(258, calc(10% * var(--saturation-factor)), 17.16%)",
|
||||
"--background-textarea": "hsl(258, calc(10% * var(--saturation-factor)), 22.05%)",
|
||||
"--background-textarea": "hsl(258, calc(10% * var(--saturation-factor)), 14.69%)",
|
||||
"--bg-active": "hsla(258, calc(10% * var(--saturation-factor)), 100%, 0.1)",
|
||||
"--bg-blockquote": "hsl(258, calc(10% * var(--saturation-factor)), 14.15%)",
|
||||
"--bg-code": "color-mix(in srgb, hsl(258, calc(10% * var(--saturation-factor)), 14.15%) 88%, hsl(258, calc(10% * var(--saturation-factor)), 17.16%) 12%)",
|
||||
@@ -979,6 +1015,12 @@ export const THEME_STUDIO_DARK_DEFAULT_VARIABLE_VALUES: Readonly<Record<string,
|
||||
"--code-inline-bg": "color-mix(in srgb, hsl(258, calc(10% * var(--saturation-factor)), 14.15%) 88%, hsl(258, calc(10% * var(--saturation-factor)), 17.16%) 12%)",
|
||||
"--code-muted": "color-mix(in srgb, color-mix(in srgb, hsl(258, calc(10% * var(--saturation-factor)), 90.36%) 82%, hsl(340, calc(50% * var(--saturation-factor)), 90%) 18%) 42%, hsl(258, calc(10% * var(--saturation-factor)), 70.4%) 58%)",
|
||||
"--code-text": "color-mix(in srgb, hsl(258, calc(10% * var(--saturation-factor)), 90.36%) 82%, hsl(340, calc(50% * var(--saturation-factor)), 90%) 18%)",
|
||||
"--composer-action-gap": "0.25rem",
|
||||
"--composer-box-inset": "max(0rem, calc((calc(3.625rem + 0.375rem * 2) - 3.625rem) / 2))",
|
||||
"--composer-box-inset-inline": "min(0.375rem, 1rem)",
|
||||
"--composer-box-padding-inline": "max( 0rem, calc(1rem - min(0.375rem, 1rem)) )",
|
||||
"--composer-mobile-box-height": "3rem",
|
||||
"--composer-mobile-padding-y": "max( 0rem, calc((3rem - 2rem) / 2) )",
|
||||
"--content-padding": "1rem",
|
||||
"--content-padding-lg": "1.5rem",
|
||||
"--content-padding-sm": "0.75rem",
|
||||
@@ -992,19 +1034,26 @@ export const THEME_STUDIO_DARK_DEFAULT_VARIABLE_VALUES: Readonly<Record<string,
|
||||
"--control-button-normal-text": "hsl(258, calc(10% * var(--saturation-factor)), 81.42%)",
|
||||
"--emoji-size-emoji": "1.5em",
|
||||
"--emoji-size-jumbo-emoji": "3rem",
|
||||
"--floating-surface-ring-color": "color-mix(in srgb, hsla(258, calc(13% * var(--saturation-factor)), 80%, 0.15) 20%, transparent)",
|
||||
"--floating-surface-ring-color-strong": "color-mix(in srgb, hsla(258, calc(13% * var(--saturation-factor)), 80%, 0.15) 45%, transparent)",
|
||||
"--focus-primary": "#00b0f4",
|
||||
"--font-keybind": "-apple-system, BlinkMacSystemFont, 'Fluxer Sans', 'Fluxer Sans Arabic', 'Fluxer Sans Hebrew', 'Fluxer Sans Devanagari', 'Fluxer Sans Thai Looped', 'Fluxer Sans SC', 'Fluxer Sans TC', 'Fluxer Sans JP', 'Fluxer Sans KR', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif",
|
||||
"--font-mono": "'Fluxer Mono', 'Menlo', 'Monaco', 'Courier New', monospace",
|
||||
"--font-sans": "'Fluxer Sans', 'Fluxer Sans Arabic', 'Fluxer Sans Hebrew', 'Fluxer Sans Devanagari', 'Fluxer Sans Thai Looped', 'Fluxer Sans SC', 'Fluxer Sans TC', 'Fluxer Sans JP', 'Fluxer Sans KR', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif",
|
||||
"--font-size": "1rem",
|
||||
"--font-size-xs": "0.75rem",
|
||||
"--footer-row-height": "4.5rem",
|
||||
"--footer-row-padding-y": "calc((4.5rem - 2.25rem) / 2)",
|
||||
"--footer-box-height": "3.625rem",
|
||||
"--footer-box-inner-inset": "0.5rem",
|
||||
"--footer-box-inset": "0.375rem",
|
||||
"--footer-box-inset-inline": "0.375rem",
|
||||
"--footer-box-padding-y": "max(0rem, calc((3.625rem - 2rem) / 2))",
|
||||
"--footer-box-radius": "0.5rem",
|
||||
"--footer-row-height": "calc(3.625rem + 0.375rem * 2)",
|
||||
"--form-surface-background": "hsl(258, calc(10% * var(--saturation-factor)), 17.16%)",
|
||||
"--guild-icon-gap": "0.5rem",
|
||||
"--guild-icon-size": "2.75rem",
|
||||
"--guild-list-foreground": "hsl(258, calc(10% * var(--saturation-factor)), 16.7%)",
|
||||
"--input-container-min-height": "4.5rem",
|
||||
"--input-container-min-height": "calc(3.625rem + 0.375rem * 2)",
|
||||
"--input-container-padding": "0.625rem",
|
||||
"--input-wrapper-padding-bottom": "0.5rem",
|
||||
"--input-wrapper-padding-x": "0.5rem",
|
||||
@@ -1019,9 +1068,10 @@ export const THEME_STUDIO_DARK_DEFAULT_VARIABLE_VALUES: Readonly<Record<string,
|
||||
"--layout-header-popout-width": "calc(20rem - (1rem * 2))",
|
||||
"--layout-mobile-bottom-nav-reserved-height": "0px",
|
||||
"--layout-sidebar-width": "20rem",
|
||||
"--layout-user-area-height": "4.5rem",
|
||||
"--layout-user-area-height": "3.625rem",
|
||||
"--layout-user-area-reserved-height": "0px",
|
||||
"--link-decoration": "none",
|
||||
"--list-row-min-height": "4.5rem",
|
||||
"--macos-traffic-light-inset": "78px",
|
||||
"--markup-everyone-border": "hsla(250, calc(80% * var(--saturation-factor)), 75%, 0.3)",
|
||||
"--markup-everyone-fill": "color-mix(in srgb, hsl(250, calc(80% * var(--saturation-factor)), 75%) 18%, transparent)",
|
||||
@@ -1066,7 +1116,7 @@ export const THEME_STUDIO_DARK_DEFAULT_VARIABLE_VALUES: Readonly<Record<string,
|
||||
"--message-failed-indicator-gap": "0.375rem",
|
||||
"--message-failed-opacity": "0.5",
|
||||
"--message-group-spacing": "1rem",
|
||||
"--message-gutter": "1rem",
|
||||
"--message-gutter": "0.75rem",
|
||||
"--message-highlight-bar-width": "0.125rem",
|
||||
"--message-icon-size-lg": "1.25rem",
|
||||
"--message-icon-size-md": "1rem",
|
||||
@@ -1100,7 +1150,8 @@ export const THEME_STUDIO_DARK_DEFAULT_VARIABLE_VALUES: Readonly<Record<string,
|
||||
"--message-unknown-warning-color": "#ff9933",
|
||||
"--mobile-bottom-nav-height": "3.75rem",
|
||||
"--native-titlebar-height": "2rem",
|
||||
"--panel-control-bg": "color-mix( in srgb, hsl(258, calc(10% * var(--saturation-factor)), 14.15%) 80%, hsl(258, calc(10% * var(--saturation-factor)), 2%) 20% )",
|
||||
"--outline-frame-border-width": "0.0625rem",
|
||||
"--panel-control-bg": "color-mix( in srgb, hsl(258, calc(10% * var(--saturation-factor)), 14.15%) 90%, hsl(258, calc(10% * var(--saturation-factor)), 2%) 10% )",
|
||||
"--panel-control-border": "hsla(258, calc(30% * var(--saturation-factor)), 65%, 0.45)",
|
||||
"--panel-control-divider": "hsla(258, calc(30% * var(--saturation-factor)), 55%, 0.35)",
|
||||
"--panel-control-highlight": "hsla(0, 0%, 100%, 0.04)",
|
||||
@@ -1165,22 +1216,22 @@ export const THEME_STUDIO_DARK_DEFAULT_VARIABLE_VALUES: Readonly<Record<string,
|
||||
"--text-tertiary-muted": "hsl(258, calc(10% * var(--saturation-factor)), 62.88%)",
|
||||
"--text-tertiary-secondary": "hsl(258, calc(10% * var(--saturation-factor)), 60%)",
|
||||
"--text-warning": "hsl(45, calc(93% * var(--saturation-factor)), 55%)",
|
||||
"--textarea-button-compact-height": "2.25rem",
|
||||
"--textarea-button-compact-icon-size": "1.375rem",
|
||||
"--textarea-button-height": "2.25rem",
|
||||
"--textarea-button-icon-size": "1.625rem",
|
||||
"--textarea-button-compact-height": "2rem",
|
||||
"--textarea-button-compact-icon-size": "1.25rem",
|
||||
"--textarea-button-height": "2rem",
|
||||
"--textarea-button-icon-size": "1.375rem",
|
||||
"--textarea-button-min-width": "auto",
|
||||
"--textarea-button-padding-x": "0px",
|
||||
"--textarea-container-padding-x": "0px",
|
||||
"--textarea-container-padding-y": "0px",
|
||||
"--textarea-content-offset": "calc((2.25rem - calc(1rem * 1.375)) / 2)",
|
||||
"--textarea-content-offset": "max(0rem, calc((2rem - calc(1rem * 1.375)) / 2))",
|
||||
"--textarea-font-size": "1rem",
|
||||
"--textarea-horizontal-padding": "1rem)",
|
||||
"--textarea-line-height": "calc(1rem * 1.375)",
|
||||
"--textarea-min-height": "4.5rem",
|
||||
"--textarea-side-button-padding": "max( 0px, calc((2.5rem - 2.25rem) / 2) )",
|
||||
"--textarea-min-height": "3.625rem",
|
||||
"--textarea-padding-y": "max(0rem, calc((3.625rem - 2rem) / 2))",
|
||||
"--textarea-side-button-padding": "max( 0px, calc((2.5rem - 2rem) / 2) )",
|
||||
"--textarea-top-bar-height": "2.5rem",
|
||||
"--textarea-upload-gap": "1rem",
|
||||
"--textarea-upload-gap": "0.75rem",
|
||||
"--theme-border": "transparent",
|
||||
"--theme-border-width": "0px",
|
||||
"--transition-fast": "100ms ease",
|
||||
@@ -1191,12 +1242,14 @@ export const THEME_STUDIO_DARK_DEFAULT_VARIABLE_VALUES: Readonly<Record<string,
|
||||
"--typing-indicator-gap": "0px",
|
||||
"--typing-indicator-height": "1rem",
|
||||
"--typing-pill-height": "1rem",
|
||||
"--typing-upload-column-width": "calc( 2.25rem + (max( 0px, calc((2.5rem - 2.25rem) / 2) ) * 2) )",
|
||||
"--user-area-content-height": "2.25rem",
|
||||
"--user-area-avatar-lead": "max( 0.5rem, calc(4.5rem / 2 - 0.375rem - 2rem / 2) )",
|
||||
"--user-area-box-inset-block-end": "calc(0.375rem + 0.0625rem)",
|
||||
"--user-area-content-height": "2rem",
|
||||
"--user-area-divider-color": "color-mix(in srgb, hsla(258, calc(10% * var(--saturation-factor)), 100%, 0.05) 70%, transparent)",
|
||||
"--user-area-padding-x": "1rem",
|
||||
"--user-area-padding-y": "calc((4.5rem - 2.25rem) / 2)",
|
||||
"--user-area-padding-x": "0.5rem",
|
||||
"--user-area-padding-y": "max(0rem, calc((3.625rem - 2rem) / 2))",
|
||||
"--user-select": "auto",
|
||||
"--voice-connection-padding-x": "0.5rem",
|
||||
"--voice-connection-padding-y": "0.5rem",
|
||||
"--z-index-base": "0",
|
||||
"--z-index-contextmenu": "44000",
|
||||
@@ -1319,6 +1372,12 @@ export const THEME_STUDIO_LIGHT_DEFAULT_VARIABLE_VALUES: Readonly<Record<string,
|
||||
"--code-inline-bg": "color-mix(in srgb, hsl(220, calc(10% * var(--saturation-factor)), 90.96%) 92%, color-mix(in srgb, hsl(220, calc(10% * var(--saturation-factor)), 33.78%) 72%, hsl(340, calc(50% * var(--saturation-factor)), 38%) 28%) 8%)",
|
||||
"--code-muted": "color-mix(in srgb, color-mix(in srgb, hsl(220, calc(10% * var(--saturation-factor)), 33.78%) 72%, hsl(340, calc(50% * var(--saturation-factor)), 38%) 28%) 34%, hsl(220, calc(10% * var(--saturation-factor)), 47.76%) 66%)",
|
||||
"--code-text": "color-mix(in srgb, hsl(220, calc(10% * var(--saturation-factor)), 33.78%) 72%, hsl(340, calc(50% * var(--saturation-factor)), 38%) 28%)",
|
||||
"--composer-action-gap": "0.25rem",
|
||||
"--composer-box-inset": "max(0rem, calc((calc(3.625rem + 0.375rem * 2) - 3.625rem) / 2))",
|
||||
"--composer-box-inset-inline": "min(0.375rem, 1rem)",
|
||||
"--composer-box-padding-inline": "max( 0rem, calc(1rem - min(0.375rem, 1rem)) )",
|
||||
"--composer-mobile-box-height": "3rem",
|
||||
"--composer-mobile-padding-y": "max( 0rem, calc((3rem - 2rem) / 2) )",
|
||||
"--content-padding": "1rem",
|
||||
"--content-padding-lg": "1.5rem",
|
||||
"--content-padding-sm": "0.75rem",
|
||||
@@ -1332,19 +1391,26 @@ export const THEME_STUDIO_LIGHT_DEFAULT_VARIABLE_VALUES: Readonly<Record<string,
|
||||
"--control-button-normal-text": "hsl(220, calc(10% * var(--saturation-factor)), 50%)",
|
||||
"--emoji-size-emoji": "1.5em",
|
||||
"--emoji-size-jumbo-emoji": "3rem",
|
||||
"--floating-surface-ring-color": "color-mix(in srgb, hsla(220, calc(10% * var(--saturation-factor)), 40%, 0.22) 20%, transparent)",
|
||||
"--floating-surface-ring-color-strong": "color-mix(in srgb, hsla(220, calc(10% * var(--saturation-factor)), 40%, 0.22) 45%, transparent)",
|
||||
"--focus-primary": "#00b0f4",
|
||||
"--font-keybind": "-apple-system, BlinkMacSystemFont, 'Fluxer Sans', 'Fluxer Sans Arabic', 'Fluxer Sans Hebrew', 'Fluxer Sans Devanagari', 'Fluxer Sans Thai Looped', 'Fluxer Sans SC', 'Fluxer Sans TC', 'Fluxer Sans JP', 'Fluxer Sans KR', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif",
|
||||
"--font-mono": "'Fluxer Mono', 'Menlo', 'Monaco', 'Courier New', monospace",
|
||||
"--font-sans": "'Fluxer Sans', 'Fluxer Sans Arabic', 'Fluxer Sans Hebrew', 'Fluxer Sans Devanagari', 'Fluxer Sans Thai Looped', 'Fluxer Sans SC', 'Fluxer Sans TC', 'Fluxer Sans JP', 'Fluxer Sans KR', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif",
|
||||
"--font-size": "1rem",
|
||||
"--font-size-xs": "0.75rem",
|
||||
"--footer-row-height": "4.5rem",
|
||||
"--footer-row-padding-y": "calc((4.5rem - 2.25rem) / 2)",
|
||||
"--footer-box-height": "3.625rem",
|
||||
"--footer-box-inner-inset": "0.5rem",
|
||||
"--footer-box-inset": "0.375rem",
|
||||
"--footer-box-inset-inline": "0.375rem",
|
||||
"--footer-box-padding-y": "max(0rem, calc((3.625rem - 2rem) / 2))",
|
||||
"--footer-box-radius": "0.5rem",
|
||||
"--footer-row-height": "calc(3.625rem + 0.375rem * 2)",
|
||||
"--form-surface-background": "hsl(220, calc(10% * var(--saturation-factor)), 98.5%)",
|
||||
"--guild-icon-gap": "0.5rem",
|
||||
"--guild-icon-size": "2.75rem",
|
||||
"--guild-list-foreground": "hsl(220, calc(10% * var(--saturation-factor)), 87.53%)",
|
||||
"--input-container-min-height": "4.5rem",
|
||||
"--input-container-min-height": "calc(3.625rem + 0.375rem * 2)",
|
||||
"--input-container-padding": "0.625rem",
|
||||
"--input-wrapper-padding-bottom": "0.5rem",
|
||||
"--input-wrapper-padding-x": "0.5rem",
|
||||
@@ -1359,9 +1425,10 @@ export const THEME_STUDIO_LIGHT_DEFAULT_VARIABLE_VALUES: Readonly<Record<string,
|
||||
"--layout-header-popout-width": "calc(20rem - (1rem * 2))",
|
||||
"--layout-mobile-bottom-nav-reserved-height": "0px",
|
||||
"--layout-sidebar-width": "20rem",
|
||||
"--layout-user-area-height": "4.5rem",
|
||||
"--layout-user-area-height": "3.625rem",
|
||||
"--layout-user-area-reserved-height": "0px",
|
||||
"--link-decoration": "none",
|
||||
"--list-row-min-height": "4.5rem",
|
||||
"--macos-traffic-light-inset": "78px",
|
||||
"--markup-everyone-border": "hsla(250, calc(70% * var(--saturation-factor)), 45%, 0.4)",
|
||||
"--markup-everyone-fill": "color-mix(in srgb, hsl(250, calc(70% * var(--saturation-factor)), 45%) 12%, transparent)",
|
||||
@@ -1406,7 +1473,7 @@ export const THEME_STUDIO_LIGHT_DEFAULT_VARIABLE_VALUES: Readonly<Record<string,
|
||||
"--message-failed-indicator-gap": "0.375rem",
|
||||
"--message-failed-opacity": "0.5",
|
||||
"--message-group-spacing": "1rem",
|
||||
"--message-gutter": "1rem",
|
||||
"--message-gutter": "0.75rem",
|
||||
"--message-highlight-bar-width": "0.125rem",
|
||||
"--message-icon-size-lg": "1.25rem",
|
||||
"--message-icon-size-md": "1rem",
|
||||
@@ -1440,6 +1507,7 @@ export const THEME_STUDIO_LIGHT_DEFAULT_VARIABLE_VALUES: Readonly<Record<string,
|
||||
"--message-unknown-warning-color": "#ff9933",
|
||||
"--mobile-bottom-nav-height": "3.75rem",
|
||||
"--native-titlebar-height": "2rem",
|
||||
"--outline-frame-border-width": "0.0625rem",
|
||||
"--panel-control-bg": "color-mix(in srgb, hsl(220, calc(10% * var(--saturation-factor)), 92.84%) 65%, hsl(0, 0%, 100%) 35%)",
|
||||
"--panel-control-border": "hsla(220, calc(25% * var(--saturation-factor)), 45%, 0.25)",
|
||||
"--panel-control-divider": "hsla(220, calc(30% * var(--saturation-factor)), 35%, 0.2)",
|
||||
@@ -1505,22 +1573,22 @@ export const THEME_STUDIO_LIGHT_DEFAULT_VARIABLE_VALUES: Readonly<Record<string,
|
||||
"--text-tertiary-muted": "hsl(220, calc(10% * var(--saturation-factor)), 53.12%)",
|
||||
"--text-tertiary-secondary": "hsl(220, calc(10% * var(--saturation-factor)), 51.56%)",
|
||||
"--text-warning": "hsl(45, calc(93% * var(--saturation-factor)), 55%)",
|
||||
"--textarea-button-compact-height": "2.25rem",
|
||||
"--textarea-button-compact-icon-size": "1.375rem",
|
||||
"--textarea-button-height": "2.25rem",
|
||||
"--textarea-button-icon-size": "1.625rem",
|
||||
"--textarea-button-compact-height": "2rem",
|
||||
"--textarea-button-compact-icon-size": "1.25rem",
|
||||
"--textarea-button-height": "2rem",
|
||||
"--textarea-button-icon-size": "1.375rem",
|
||||
"--textarea-button-min-width": "auto",
|
||||
"--textarea-button-padding-x": "0px",
|
||||
"--textarea-container-padding-x": "0px",
|
||||
"--textarea-container-padding-y": "0px",
|
||||
"--textarea-content-offset": "calc((2.25rem - calc(1rem * 1.375)) / 2)",
|
||||
"--textarea-content-offset": "max(0rem, calc((2rem - calc(1rem * 1.375)) / 2))",
|
||||
"--textarea-font-size": "1rem",
|
||||
"--textarea-horizontal-padding": "1rem)",
|
||||
"--textarea-line-height": "calc(1rem * 1.375)",
|
||||
"--textarea-min-height": "4.5rem",
|
||||
"--textarea-side-button-padding": "max( 0px, calc((2.5rem - 2.25rem) / 2) )",
|
||||
"--textarea-min-height": "3.625rem",
|
||||
"--textarea-padding-y": "max(0rem, calc((3.625rem - 2rem) / 2))",
|
||||
"--textarea-side-button-padding": "max( 0px, calc((2.5rem - 2rem) / 2) )",
|
||||
"--textarea-top-bar-height": "2.5rem",
|
||||
"--textarea-upload-gap": "1rem",
|
||||
"--textarea-upload-gap": "0.75rem",
|
||||
"--theme-border": "transparent",
|
||||
"--theme-border-width": "0px",
|
||||
"--transition-fast": "100ms ease",
|
||||
@@ -1531,12 +1599,14 @@ export const THEME_STUDIO_LIGHT_DEFAULT_VARIABLE_VALUES: Readonly<Record<string,
|
||||
"--typing-indicator-gap": "0px",
|
||||
"--typing-indicator-height": "1rem",
|
||||
"--typing-pill-height": "1rem",
|
||||
"--typing-upload-column-width": "calc( 2.25rem + (max( 0px, calc((2.5rem - 2.25rem) / 2) ) * 2) )",
|
||||
"--user-area-content-height": "2.25rem",
|
||||
"--user-area-avatar-lead": "max( 0.5rem, calc(4.5rem / 2 - 0.375rem - 2rem / 2) )",
|
||||
"--user-area-box-inset-block-end": "calc(0.375rem + 0.0625rem)",
|
||||
"--user-area-content-height": "2rem",
|
||||
"--user-area-divider-color": "hsla(220, calc(10% * var(--saturation-factor)), 40%, 0.2)",
|
||||
"--user-area-padding-x": "1rem",
|
||||
"--user-area-padding-y": "calc((4.5rem - 2.25rem) / 2)",
|
||||
"--user-area-padding-x": "0.5rem",
|
||||
"--user-area-padding-y": "max(0rem, calc((3.625rem - 2rem) / 2))",
|
||||
"--user-select": "auto",
|
||||
"--voice-connection-padding-x": "0.5rem",
|
||||
"--voice-connection-padding-y": "0.5rem",
|
||||
"--z-index-base": "0",
|
||||
"--z-index-contextmenu": "44000",
|
||||
|
||||
Reference in new issue
Block a user