Clarth/fluxer-themes
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions
fluxer-themes/clarth/factorio/theme.css

684 lines
31 KiB
CSS
Raw Blame History

/**
* @name Foundry
* @description Industrial bevel theme: raised frames, sunken wells, gray machine keys, orange when powered.
* @author Ashmata & Clarth
* @version 1.6
* @tags dark
*/
/* FOUNDRY 1.6 — standalone replacement, not an append-only patch.
* Base theme: Dark. Retains the original CSS-module selector convention.
* Selectors must still match your installed Fluxer build; not runtime-tested.
* Audit fixes: header button margins; guild-control disabled/pressed precedence;
* context-menu highlighted/pressed precedence. All palette values retained.
* Fixed panel insets are retained from 1.0 and may need mobile tuning.
*
* * Changes:
* - Removed extra horizontal margins from channel-header buttons.
* - Added a 4px downward offset to balance header-button vertical spacing.
* - Guarded guild-control parent hover against disabled and pressed states.
* - Prevented context-menu highlighting from overriding pressed states.
* - Added a continuous gray metal background to the server-rail area,
* using a #414040-based gradient and subtle rail-wrapper edge shadows.
* - Added 24px inline-start padding to message rows, keeping avatars,
* names, text, and attachments inset together from the chat frame.
* Resolved the avatar/frame overlap.
*
* Preserved:
* - Original palette values; rail gradient shades are local additions.
* - Existing class names, icons, elements, and Factorio-style panel bevels.
* - Previous button fixes and unrelated layout rules.
*
* Known issues / testing:
* - The vertical line between the channel list and chat remains unresolved.
* - Fixed panel insets are retained from 1.0 and may need mobile tuning.
*
* Optional network font (uncomment before all style rules to restore it):
* @import url('https://fonts.googleapis.com/css2?family=Titillium+Web:wght@400;600;700;900&display=swap');
*/
/**
* @name Foundry
* @description Industrial bevel theme: raised frames, sunken wells, gray machine keys, orange when powered.
* @author Ashmata
* @version 1.1
* @tags dark
*/
/* FOUNDRY 1.1 — standalone replacement, not an append-only patch.
* Base theme: Dark. Retains the original CSS-module selector convention.
* Selectors must still match your installed Fluxer build; not runtime-tested.
* Audit fixes: header button margins; guild-control disabled/pressed precedence;
* context-menu highlighted/pressed precedence. All palette values retained.
* Fixed panel insets are retained from 1.0 and may need mobile tuning.
*
* Optional network font (uncomment before all style rules to restore it):
* @import url('https://fonts.googleapis.com/css2?family=Titillium+Web:wght@400;600;700;900&display=swap');
*/
/* 1. Materials and application tokens */
html[class] {
--fd-floor: #1a1612;
--fd-frame: #313031;
--fd-well: #242324;
--fd-well-lit: #414040;
--fd-btn: #8e8e8e;
--fd-btn-hot: #e39827;
--fd-btn-press: #f1be64;
--fd-go: #5eb663;
--fd-go-hot: #7bd17f;
--fd-stop: #e05252;
--fd-stop-hot: #f06a6a;
--fd-stop-press: #bf3e3e;
--fd-cream: #ffe6c0;
--fd-link: #7dcaed;
--fd-orange: #e39827;
--fd-orange-rgb: 227 152 39;
--fd-floor-tex: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2296%22%20height%3D%2296%22%3E%3Cfilter%20id%3D%22n%22%20x%3D%220%22%20y%3D%220%22%20width%3D%22100%25%22%20height%3D%22100%25%22%3E%3CfeTurbulence%20type%3D%22fractalNoise%22%20baseFrequency%3D%220.85%22%20numOctaves%3D%222%22%20stitchTiles%3D%22stitch%22%2F%3E%3CfeColorMatrix%20values%3D%220%200%200%200%200.5%200%200%200%200%200.45%200%200%200%200%200.4%200%200%200%200.09%200%22%2F%3E%3C%2Ffilter%3E%3Crect%20width%3D%2296%22%20height%3D%2296%22%20filter%3D%22url%28%23n%29%22%2F%3E%3Cpath%20d%3D%22M0%200.5H96M0.5%200V96%22%20stroke%3D%22%23fff%22%20stroke-opacity%3D%220.035%22%2F%3E%3Cpath%20d%3D%22M0%2048.5H96M48.5%200V96%22%20stroke%3D%22%23000%22%20stroke-opacity%3D%220.22%22%2F%3E%3Crect%20x%3D%2246%22%20y%3D%2246%22%20width%3D%225%22%20height%3D%225%22%20fill%3D%22%23000%22%20fill-opacity%3D%220.25%22%2F%3E%3C%2Fsvg%3E");
--fd-bevel-frame: inset 3px 0 2px -2px #201815, inset 0 3px 2px -2px #8f8c8b, inset -3px 0 2px -2px #201815, inset 0 -3px 3px -3px #000, 0 0 3px #201815;
--fd-bevel-well: inset 0 3px 3px -2px #000, inset 3px 0 3px -3px #000, inset -3px 0 3px -3px #000, inset 0 -3px 2px -2px #5c5a5b;
--fd-bevel-btn: inset 2px 0 2px -1px #333, inset -2px 0 2px -1px #333, inset 0 2px 1px #e3e3e3, inset 0 -2px 1px #282828, 0 0 4px #000;
--fd-bevel-btn-hot: inset 2px 0 2px -1px #70450e, inset -2px 0 2px -1px #70450e, inset 0 2px 1px #ffe0a6, inset 0 -2px 1px #432400, 0 0 4px #000;
--fd-bevel-btn-press: inset 0 2px 3px #563a10, inset 2px 0 2px -1px #563a10, inset -2px 0 2px -1px #563a10, inset 0 -1px 1px #ffe0a6, 0 0 4px #000;
--fd-bevel-selected: inset 0 2px 3px #282828, inset 2px 0 2px -1px #333, inset -2px 0 2px -1px #333, inset 0 -1px 1px #e3e3e3, 0 0 3px #000;
--fd-bevel-go: inset 2px 0 2px -1px #163218, inset -2px 0 2px -1px #163218, inset 0 2px 1px #95df99, inset 0 -2px 1px #163218, 0 0 4px #000;
--fd-bevel-go-press: inset 0 2px 3px #163218, inset 0 -1px 1px #95df99, 0 0 4px #000;
--fd-bevel-stop: inset 2px 0 2px -1px #3a1010, inset -2px 0 2px -1px #3a1010, inset 0 2px 1px #ffb3b3, inset 0 -2px 1px #3a1010, 0 0 4px #000;
--fd-bevel-stop-press: inset 0 2px 3px #3a1010, inset 0 -1px 1px #ffb3b3, 0 0 4px #000;
--background-primary: var(--fd-well);
--background-secondary: var(--fd-frame);
--background-secondary-lighter: var(--fd-frame);
--background-secondary-alt: #2a292a;
--background-tertiary: var(--fd-well-lit);
--background-channel-header: transparent;
--background-header-primary: var(--fd-well-lit);
--background-header-primary-hover: #4d4c4c;
--background-header-secondary: var(--fd-well-lit);
--background-textarea: var(--fd-well);
--guild-list-foreground: var(--fd-well);
--guilds-layout-item-bg: var(--fd-well);
--guild-badge-surface: var(--fd-frame);
--composer-surface-color: transparent;
--form-surface-background: var(--fd-frame);
--panel-control-bg: transparent;
--panel-control-border: transparent;
--panel-control-divider: #1b1a1b;
--panel-control-highlight: rgb(255 255 255 / 0.05);
--background-modifier-hover: rgb(255 255 255 / 0.06);
--background-modifier-selected: rgb(255 255 255 / 0.1);
--background-modifier-accent: #1b1a1b;
--background-modifier-accent-focus: #4d4c4c;
--surface-interactive-hover-bg: rgb(255 255 255 / 0.06);
--surface-interactive-selected-bg: rgb(255 255 255 / 0.1);
--surface-interactive-selected-color: #fff;
--floating-surface-ring-color: #000;
--floating-surface-ring-color-strong: #000;
--user-area-divider-color: #1b1a1b;
--skeleton-chrome-border-color: #1b1a1b;
--border-color: #1b1a1b;
--border-color-hover: #4d4c4c;
--border-color-focus: var(--fd-orange);
--focus-primary: var(--fd-orange);
--text-primary: #fff;
--text-chat: #f2f0ee;
--text-secondary: #cfcbc7;
--text-primary-muted: #a19d99;
--text-chat-muted: #a19d99;
--text-tertiary: #8a8682;
--text-tertiary-muted: #74716e;
--text-tertiary-secondary: #63605d;
--text-link: var(--fd-link);
--text-selection: rgb(var(--fd-orange-rgb) / 0.35);
--text-on-dark: #fff;
--text-on-brand-primary: #000;
--text-on-brand-primary-light: #000;
--text-on-brand-tint: #fff;
--interactive-muted: #63605d;
--interactive-active: #fff;
--message-timestamp-color: #8a8682;
--brand-primary: var(--fd-orange);
--brand-primary-light: var(--fd-btn-press);
--brand-primary-fill: #000;
--brand-primary-light-fill: #000;
--brand-primary-pressed: #c98322;
--brand-primary-shade: #a8681a;
--brand-primary-foreground: var(--fd-orange);
--brand-secondary: var(--fd-btn-press);
--brand-tint: rgb(var(--fd-orange-rgb) / 0.14);
--brand-tint-hover: rgb(var(--fd-orange-rgb) / 0.22);
--brand-tint-border: rgb(var(--fd-orange-rgb) / 0.45);
--accent-primary: var(--fd-orange);
--accent-info: var(--fd-link);
--accent-success: var(--fd-go);
--accent-warning: var(--fd-btn-press);
--accent-danger: var(--fd-stop);
--accent-purple: #b49ae6;
--status-online: var(--fd-go);
--status-idle: var(--fd-btn-press);
--status-dnd: var(--fd-stop);
--status-offline: #74716e;
--status-danger: var(--fd-stop);
--status-warning: var(--fd-btn-press);
--button-primary-fill: var(--fd-go);
--button-primary-active-fill: var(--fd-go-hot);
--button-primary-text: #000;
--button-secondary-fill: var(--fd-btn);
--button-secondary-active-fill: var(--fd-btn-hot);
--button-secondary-text: #000;
--button-secondary-active-text: #000;
--button-danger-fill: var(--fd-stop);
--button-danger-active-fill: var(--fd-stop-hot);
--button-danger-text: #000;
--button-ghost-text: #fff;
--button-outline-border: 1px solid #000;
--button-outline-text: #fff;
--control-button-normal-bg: transparent;
--control-button-normal-text: #cfcbc7;
--control-button-hover-bg: rgb(255 255 255 / 0.08);
--control-button-hover-text: #fff;
--control-button-active-bg: rgb(255 255 255 / 0.12);
--control-button-active-text: #fff;
--message-mention-bg: rgb(var(--fd-orange-rgb) / 0.09);
--message-mention-bg-hover: rgb(var(--fd-orange-rgb) / 0.13);
--message-mention-color: var(--fd-orange);
--message-reply-bg: rgb(var(--fd-orange-rgb) / 0.06);
--message-reply-color: var(--fd-orange);
--message-preview-card-background: var(--fd-well-lit);
--message-preview-card-border: #1b1a1b;
--message-preview-card-divider: #1b1a1b;
--markup-mention-text: var(--fd-cream);
--markup-mention-fill: rgb(var(--fd-orange-rgb) / 0.2);
--markup-mention-border: rgb(var(--fd-orange-rgb) / 0.5);
--markup-everyone-text: var(--fd-cream);
--markup-everyone-fill: rgb(var(--fd-orange-rgb) / 0.2);
--markup-everyone-border: rgb(var(--fd-orange-rgb) / 0.5);
--markup-here-text: var(--fd-cream);
--markup-here-fill: rgb(var(--fd-orange-rgb) / 0.2);
--markup-here-border: rgb(var(--fd-orange-rgb) / 0.5);
--markup-interactive-hover-fill: var(--fd-orange);
--markup-interactive-hover-text: #000;
--code-block-bg: #1b1a1b;
--code-block-border: #000;
--code-inline-bg: #1b1a1b;
--code-text: #f2f0ee;
--bg-blockquote: var(--fd-well-lit);
--bg-table-header: var(--fd-well-lit);
--bg-table-row-odd: var(--fd-well);
--bg-table-row-even: #2c2b2c;
--scrollbar-thumb-bg: var(--fd-btn);
--scrollbar-thumb-bg-hover: var(--fd-btn-hot);
--scrollbar-track-bg: #1b1a1b;
--shadow-sm: 0 0 3px #000;
--shadow-md: 0 0 4px #000;
--shadow-lg: 0 0 6px #000;
--shadow-xl: 0 0 10px #000;
--radius-sm: 0;
--radius-md: 0;
--radius-lg: 0;
--radius-xl: 0;
--radius-2xl: 0;
--font-sans-primary: 'Titillium Web', 'Fluxer Sans', system-ui, sans-serif !important;
}
html[class] body {
-webkit-font-smoothing: antialiased;
}
/* 2. Floor and panel layers — original layout insets retained */
[class*='App.module__appContainer___'] {
background: radial-gradient(120% 90% at 50% 40%, transparent 40%, rgb(0 0 0 / 0.55) 100%), var(--fd-floor-tex), var(--fd-floor) !important;
}
[class*='GuildsLayout.module__guildsLayoutContainer___'],
[class*='GuildsLayout.module__guildListScrollerWrapper___'],
[class*='GuildsLayout.module__guildListScrollContainer___'],
[class*='GuildsLayout.module__contentContainer___'],
[class*='GuildsLayout.module__contentInner___'],
[class*='GuildLayout.module__guildLayoutContainer___'],
[class*='GuildLayout.module__guildMainContent___'],
[class*='GuildNavbar.module__guildNavbarContainer___'],
[class*='ChannelListContent.module__channelListScroller___'],
[class*='GuildHeader.module__headerContainer___'],
[class*='ChannelLayout.module__channelLayoutContainer___'],
[class*='ChannelIndexPage.module__channelGrid___'],
[class*='ChannelHeader.module__headerWrapper___'],
[class*='ChannelHeader.module__headerContainer___'],
[class*='ChannelChatLayout.module__container___'],
[class*='MemberListContainer.module__memberListContainer___'],
[class*='MemberListContainer.module__memberListScroller___'],
[class*='OutlineFrame.module__frame___'] {
background: transparent !important;
border-color: transparent !important;
box-shadow: none !important;
}
/* Server rail — continuous metal surface across the full rail. */
[class*='GuildsLayout.module__guildsLayoutContainer___'] {
background: linear-gradient(
180deg,
#484747 0%,
#414040 18%,
#414040 78%,
#373636 100%
) !important;
}
/* Keep the inner rail layers clear so the surface stays continuous. */
[class*='GuildsLayout.module__guildListScrollerWrapper___'],
[class*='GuildsLayout.module__guildListScrollContainer___'] {
background: transparent !important;
}
/* Preserve the subtle bevel around the scroll wrapper. */
[class*='GuildsLayout.module__guildListScrollerWrapper___'] {
box-shadow:
inset 1px 0 0 rgb(255 255 255 / 0.12),
inset -1px 0 0 rgb(0 0 0 / 0.65),
inset 0 1px 0 rgb(255 255 255 / 0.08),
inset -3px 0 5px -3px #000 !important;
}
[class*='GuildNavbar.module__guildNavbarContainer___'],
[class*='ChannelLayout.module__channelLayoutContainer___'],
[class*='ChannelChatLayout.module__container___'],
[class*='OutlineFrame.module__frameHideTop___'] {
position: relative;
isolation: isolate;
}
[class*='GuildNavbar.module__guildNavbarContainer___']::before,
[class*='ChannelLayout.module__channelLayoutContainer___']::before,
[class*='ChannelChatLayout.module__container___']::before,
[class*='OutlineFrame.module__frameHideTop___']::before {
content: '';
position: absolute;
z-index: -1;
pointer-events: none;
}
[class*='GuildNavbar.module__guildNavbarContainer___']::before,
[class*='ChannelLayout.module__channelLayoutContainer___']::before {
background: var(--fd-frame);
box-shadow: var(--fd-bevel-frame);
}
[class*='ChannelChatLayout.module__container___']::before,
[class*='OutlineFrame.module__frameHideTop___']::before {
background: var(--fd-well);
box-shadow: var(--fd-bevel-well);
}
[class*='GuildNavbar.module__guildNavbarContainer___']::before {
inset: 8px 4px 76px 4px;
}
[class*='ChannelLayout.module__channelLayoutContainer___']::before {
inset: 8px 8px 8px 4px;
}
[class*='ChannelChatLayout.module__container___']::before {
inset: 0 6px 16px 16px;
}
[class*='OutlineFrame.module__frameHideTop___']::before {
inset: 0 18px 16px 2px;
}
/* 3. Headings — do not recolor every descendant of a header */
[class*='GuildHeader.module__headerContainer___'],
[class*='ChannelHeader.module__channelName'],
[class*='ChannelHeader.module__headerContainer___'] h1,
[class*='ChannelHeader.module__headerContainer___'] h2,
[class*='ChannelHeader.module__headerContainer___'] h3,
[class*='SettingsModalHeader.module__title___'],
[class*='SettingsSection.module__sectionTitle___'] {
color: var(--fd-cream) !important;
font-weight: 900 !important;
}
[class*='ChannelItem.module__categoryName___'] {
color: var(--fd-cream) !important;
font-weight: 700 !important;
opacity: 0.85;
}
/* 4. Machine controls — local state variables keep danger/GO precedence consistent */
:is([class*='Button.module__secondary___'], [class*='ChannelHeader.module__iconButton___'], [class*='TextareaButton.module__button___'], [class*='UserArea.module__controlButton___'], [class*='MessageActionBar.module__button___'], [class*='GuildsLayout.module__createGuildButtonIcon___'], [class*='GuildsLayout.module__fluxerButtonIcon___'], [class*='ContextMenu.module__item___'], [class*='Button.module__primary___'], [class*='Button.module__danger']) {
--fd-key-bg: var(--fd-btn);
--fd-key-hover: var(--fd-btn-hot);
--fd-key-pressed: var(--fd-btn-press);
--fd-key-shadow: var(--fd-bevel-btn);
--fd-key-hover-shadow: var(--fd-bevel-btn-hot);
--fd-key-pressed-shadow: var(--fd-bevel-btn-press);
background: var(--fd-key-bg) !important;
color: #000 !important;
border: none !important;
border-radius: 0 !important;
box-shadow: var(--fd-key-shadow) !important;
transition: background-color 80ms linear, box-shadow 80ms linear;
/* No clip-path: keyboard outlines and shadows must remain visible. */
}
[class*='Button.module__primary___'] {
--fd-key-bg: var(--fd-go);
--fd-key-hover: var(--fd-go-hot);
--fd-key-pressed: var(--fd-go);
--fd-key-shadow: var(--fd-bevel-go);
--fd-key-hover-shadow: var(--fd-bevel-go);
--fd-key-pressed-shadow: var(--fd-bevel-go-press);
font-weight: 600 !important;
}
[class*='Button.module__danger'],
[class*='ContextMenu.module__danger___'] {
--fd-key-bg: var(--fd-stop);
--fd-key-hover: var(--fd-stop-hot);
--fd-key-pressed: var(--fd-stop-press);
--fd-key-shadow: var(--fd-bevel-stop);
--fd-key-hover-shadow: var(--fd-bevel-stop);
--fd-key-pressed-shadow: var(--fd-bevel-stop-press);
}
:is([class*='Button.module__secondary___'], [class*='ChannelHeader.module__iconButton___'], [class*='TextareaButton.module__button___'], [class*='UserArea.module__controlButton___'], [class*='MessageActionBar.module__button___'], [class*='GuildsLayout.module__createGuildButtonIcon___'], [class*='GuildsLayout.module__fluxerButtonIcon___'], [class*='ContextMenu.module__item___'], [class*='Button.module__primary___'], [class*='Button.module__danger']):not(:disabled):not([aria-disabled='true']):not([data-disabled='true']):not([data-disabled='']):hover,
:is([class*='Button.module__secondary___'], [class*='ChannelHeader.module__iconButton___'], [class*='TextareaButton.module__button___'], [class*='UserArea.module__controlButton___'], [class*='MessageActionBar.module__button___'], [class*='GuildsLayout.module__createGuildButtonIcon___'], [class*='GuildsLayout.module__fluxerButtonIcon___'], [class*='ContextMenu.module__item___'], [class*='Button.module__primary___'], [class*='Button.module__danger']):not(:disabled):not([aria-disabled='true']):not([data-disabled='true']):not([data-disabled='']):focus-visible {
background: var(--fd-key-hover) !important;
box-shadow: var(--fd-key-hover-shadow) !important;
}
:is([class*='ChannelHeader.module__iconButtonSelected___'], [class*='TextareaButton.module__button___'][aria-pressed='true'], [class*='TextareaButton.module__button___'][class*='TextareaButton.module__selected___'], [class*='TextareaButton.module__button___'][class*='TextareaButton.module__contextMenuHover___'], [class*='UserArea.module__controlButton___'][aria-pressed='true']):not(:disabled):not([aria-disabled='true']):not([data-disabled='true']):not([data-disabled='']) {
background: var(--fd-key-hover, var(--fd-btn-hot)) !important;
box-shadow: var(--fd-key-hover-shadow, var(--fd-bevel-btn-hot)) !important;
}
:is([class*='Button.module__secondary___'], [class*='ChannelHeader.module__iconButton___'], [class*='TextareaButton.module__button___'], [class*='UserArea.module__controlButton___'], [class*='MessageActionBar.module__button___'], [class*='GuildsLayout.module__createGuildButtonIcon___'], [class*='GuildsLayout.module__fluxerButtonIcon___'], [class*='ContextMenu.module__item___'], [class*='Button.module__primary___'], [class*='Button.module__danger']):not(:disabled):not([aria-disabled='true']):not([data-disabled='true']):not([data-disabled='']):active {
background: var(--fd-key-pressed) !important;
box-shadow: var(--fd-key-pressed-shadow) !important;
}
:is([class*='Button.module__secondary___'], [class*='ChannelHeader.module__iconButton___'], [class*='TextareaButton.module__button___'], [class*='UserArea.module__controlButton___'], [class*='MessageActionBar.module__button___'], [class*='GuildsLayout.module__createGuildButtonIcon___'], [class*='GuildsLayout.module__fluxerButtonIcon___'], [class*='ContextMenu.module__item___'], [class*='Button.module__primary___'], [class*='Button.module__danger']):disabled,
:is([class*='Button.module__secondary___'], [class*='ChannelHeader.module__iconButton___'], [class*='TextareaButton.module__button___'], [class*='UserArea.module__controlButton___'], [class*='MessageActionBar.module__button___'], [class*='GuildsLayout.module__createGuildButtonIcon___'], [class*='GuildsLayout.module__fluxerButtonIcon___'], [class*='ContextMenu.module__item___'], [class*='Button.module__primary___'], [class*='Button.module__danger'])[aria-disabled='true'],
:is([class*='Button.module__secondary___'], [class*='ChannelHeader.module__iconButton___'], [class*='TextareaButton.module__button___'], [class*='UserArea.module__controlButton___'], [class*='MessageActionBar.module__button___'], [class*='GuildsLayout.module__createGuildButtonIcon___'], [class*='GuildsLayout.module__fluxerButtonIcon___'], [class*='ContextMenu.module__item___'], [class*='Button.module__primary___'], [class*='Button.module__danger'])[data-disabled='true'],
:is([class*='Button.module__secondary___'], [class*='ChannelHeader.module__iconButton___'], [class*='TextareaButton.module__button___'], [class*='UserArea.module__controlButton___'], [class*='MessageActionBar.module__button___'], [class*='GuildsLayout.module__createGuildButtonIcon___'], [class*='GuildsLayout.module__fluxerButtonIcon___'], [class*='ContextMenu.module__item___'], [class*='Button.module__primary___'], [class*='Button.module__danger'])[data-disabled=''] {
background: var(--fd-key-bg) !important;
box-shadow: var(--fd-key-shadow) !important;
filter: none !important;
opacity: 0.5 !important;
cursor: not-allowed !important;
}
:is([class*='Button.module__secondary___'], [class*='ChannelHeader.module__iconButton___'], [class*='TextareaButton.module__button___'], [class*='UserArea.module__controlButton___'], [class*='MessageActionBar.module__button___'], [class*='GuildsLayout.module__createGuildButtonIcon___'], [class*='GuildsLayout.module__fluxerButtonIcon___'], [class*='ContextMenu.module__item___'], [class*='Button.module__primary___'], [class*='Button.module__danger']) svg {
color: inherit !important;
}
[class*='ChannelHeader.module__iconButton___'] svg,
[class*='TextareaButton.module__button___'] svg,
[class*='UserArea.module__controlButton___'] svg,
[class*='MessageActionBar.module__button___'] svg,
[class*='GuildsLayout.module__createGuildButtonIcon___'] svg,
[class*='GuildsLayout.module__fluxerButtonIcon___'] svg {
transform: scale(0.78);
}
/* Header spacing: do not add margins on top of the existing toolbar gap. */
[class*='ChannelHeader.module__iconButton___'] {
margin-inline: 0 !important;
}
[class*='TextareaButton.module__button___'],
[class*='UserArea.module__controlButton___'] {
margin-inline: 2px;
}
/* Parent hover must not override a disabled or actively pressed key. */
[class*='GuildsLayout.module__guildListItem___']:hover [class*='GuildsLayout.module__createGuildButtonIcon___']:not(:disabled):not([aria-disabled='true']):not([data-disabled='true']):not([data-disabled='']):not(:active),
[class*='GuildsLayout.module__guildListItem___']:hover [class*='GuildsLayout.module__fluxerButtonIcon___']:not(:disabled):not([aria-disabled='true']):not([data-disabled='true']):not([data-disabled='']):not(:active) {
background: var(--fd-btn-hot) !important;
box-shadow: var(--fd-bevel-btn-hot) !important;
}
/* 5. Inventory rail */
[class*='GuildsLayout.module__guildIcon___']:not([class*='fluxerButtonIcon']) {
border-radius: 2px !important;
box-shadow: 0 0 0 1px #000, 0 0 0 4px var(--fd-well), 0 0 0 5px #000, 0 0 0 6px #5c5a5b;
transition: box-shadow 80ms linear;
}
[class*='GuildsLayout.module__guildListItem___']:hover [class*='GuildsLayout.module__guildIcon___']:not([class*='fluxerButtonIcon']),
[class*='GuildsLayout.module__guildIconSelected___'] {
box-shadow: 0 0 0 1px #000, 0 0 0 3px var(--fd-btn-hot), 0 0 6px 3px rgb(249 180 75 / 0.55) !important;
}
[class*='GuildsLayout.module__guildIndicatorBar___'] {
background: var(--fd-btn-hot) !important;
border-radius: 0 !important;
box-shadow: 0 0 6px #f9b44b;
}
[class*='GuildsLayout.module__guildDivider___'] {
background: #000 !important;
box-shadow: 0 1px 0 #5c5a5b;
border-radius: 0 !important;
}
/* 6. Selected rows — actually sunken rather than raised */
[class*='ChannelItemSurface.module__channelItemSurface___'],
[class*='SettingsModalLayout.module__sidebarItem___'],
[class*='SettingsModalLayout.module__sidebarSubItem___'] {
border-radius: 0 !important;
}
[class*='ChannelItemSurface.module__channelItemSurfaceSelected___'],
[class*='SettingsModalLayout.module__sidebarItemSelected___'],
[class*='SettingsModalLayout.module__sidebarSubItemActive___'] {
background: var(--fd-btn) !important;
box-shadow: var(--fd-bevel-selected) !important;
color: #000 !important;
font-weight: 600;
}
[class*='ChannelItemSurface.module__channelItemSurfaceSelected___'] :is(a, span, svg):not([style*="color"]):not([class*="Badge"]):not([class*="badge"]):not([class*="Status"]):not([class*="status"]),
[class*='SettingsModalLayout.module__sidebarItemSelected___'] :is(a, span, svg):not([style*="color"]):not([class*="Badge"]):not([class*="badge"]):not([class*="Status"]):not([class*="status"]),
[class*='SettingsModalLayout.module__sidebarSubItemActive___'] :is(a, span, svg):not([style*="color"]):not([class*="Badge"]):not([class*="badge"]):not([class*="Status"]):not([class*="status"]) {
color: inherit;
}
[class*='SettingsModalLayout.module__sidebarItemSelected___'][aria-expanded='true'] {
background: transparent !important;
box-shadow: none !important;
color: var(--fd-cream) !important;
font-weight: 700;
}
/* 7. Fields and compact panels */
[class*='TextareaInput.module__textareaOuterRow___'] {
background: #1b1a1b !important;
border-radius: 0 !important;
box-shadow: var(--fd-bevel-well), 0 1px 0 #4d4c4c !important;
--composer-box-ring-color: transparent;
}
[class*='TextareaInput.module__textareaOuterRow___']:focus-within {
box-shadow: var(--fd-bevel-well), 0 0 0 1px var(--fd-orange), 0 0 6px rgb(249 180 75 / 0.5) !important;
}
[class*='MessageSearchBar.module__inputContainer___'] {
background: #1b1a1b !important;
border-radius: 0 !important;
border: none !important;
box-shadow: var(--fd-bevel-well) !important;
}
[class*='MessageSearchBar.module__inputContainer___']:focus-within {
box-shadow: var(--fd-bevel-well), 0 0 0 1px var(--fd-orange) !important;
}
[class*='MessageSearchBar.module__scopeBadge___'] {
background: var(--fd-btn) !important;
color: #000 !important;
border-radius: 0 !important;
}
[class*='UserArea.module__userAreaInnerWrapper___'],
[class*='MessageActionBar.module__actionBar___'] {
background: var(--fd-frame) !important;
border: none !important;
border-radius: 0 !important;
box-shadow: var(--fd-bevel-frame) !important;
}
[class*='MessageActionBar.module__actionBar___'] {
padding: 3px !important;
gap: 3px;
}
[class*='ChannelUserTag.module__tag___'] {
background: var(--fd-btn) !important;
color: #000 !important;
border-radius: 0 !important;
box-shadow: inset 0 1px 0 #e3e3e3, inset 0 -1px 0 #000;
}
/* 8. Context menus — opaque tray, separate machine keys */
[class*='ContextMenu.module__contextMenu___'] {
background: var(--fd-frame) !important;
border: none !important;
border-radius: 0 !important;
box-shadow: var(--fd-bevel-frame), 0 0 8px #000 !important;
backdrop-filter: none !important;
padding: 4px !important;
}
[class*='ContextMenu.module__item___'] {
font-weight: 600 !important;
margin-bottom: 4px !important;
}
[class*='ContextMenu.module__item___']:last-child {
margin-bottom: 0 !important;
}
[class*='ContextMenu.module__item___'] :is(span, svg) {
color: inherit !important;
}
/* Highlight is a hover state, not an override for the pressed state. */
[class*='ContextMenu.module__item___']:not(:disabled):not([aria-disabled='true']):not([data-disabled='true']):not([data-disabled=''])[data-highlighted]:not([data-highlighted='false']):not(:active) {
background: var(--fd-key-hover) !important;
box-shadow: var(--fd-key-hover-shadow) !important;
}
[class*='ContextMenu.module__separator___'] {
height: 4px !important;
background: transparent !important;
margin: 0 !important;
}
/* 9. Modals, settings, tooltips, popouts and toasts */
[class*='Modal.module__root___'],
[class*='Toast.module__toast___'] {
background: var(--fd-frame) !important;
border: none !important;
border-radius: 0 !important;
box-shadow: var(--fd-bevel-frame), 0 0 12px 2px #000 !important;
backdrop-filter: none !important;
}
[class*='Modal.module__backdropCentered___'] {
background: rgb(10 8 6 / 0.72) !important;
backdrop-filter: none !important;
}
[class*='SettingsModalLayout.module__container___'] {
--settings-border-color: #1b1a1b;
--settings-hover-border-color: #4d4c4c;
--settings-selected-border-color: var(--fd-orange);
--settings-panel-background: var(--fd-well-lit);
}
[class*='SettingsModalLayout.module__desktopSidebar___'] {
background: var(--fd-frame) !important;
border: none !important;
box-shadow: inset -3px 0 3px -2px #000 !important;
}
[class*='SettingsModalLayout.module__desktopContent___'] {
background: var(--fd-well) !important;
box-shadow: var(--fd-bevel-well) !important;
}
[class*='SettingsModalLayout.module__desktopHeader___'] {
background: var(--fd-frame) !important;
border: none !important;
box-shadow: inset 0 -3px 3px -3px #000, inset 0 3px 2px -2px #8f8c8b !important;
color: var(--fd-cream);
}
[class*='SettingsModalLayout.module__desktopHeader___'] h1,
[class*='SettingsModalLayout.module__desktopHeader___'] h2,
[class*='SettingsModalLayout.module__desktopHeader___'] h3 {
color: var(--fd-cream);
font-weight: 900;
}
[class*='Tooltip.module__tooltip___'] {
--tooltip-surface: var(--fd-frame);
--tooltip-border-color: #000;
border-radius: 0 !important;
box-shadow: var(--fd-bevel-frame), 0 0 6px #000 !important;
color: var(--fd-cream) !important;
font-weight: 600;
}
[class*='PopoverPopout.module__popout___'] {
border-radius: 0 !important;
box-shadow: 0 0 0 2px #000, 0 0 10px 2px #000 !important;
}
/* 10. Keyboard access and finishing details */
html[class] :is(button, a[href], input, textarea, select, [role='button'], [role='menuitem'], [role='menuitemcheckbox'], [role='menuitemradio'], [tabindex]):focus-visible {
outline: 2px solid var(--fd-orange) !important;
outline-offset: 2px;
}
html[class] textarea,
html[class] input,
html[class] [contenteditable='true'] {
caret-color: var(--fd-orange);
}
::selection {
background: rgb(var(--fd-orange-rgb) / 0.4);
}
/* Respect the OS motion preference; scope this to themed controls. */
@media (prefers-reduced-motion: reduce) {
:is([class*='Button.module__secondary___'], [class*='ChannelHeader.module__iconButton___'], [class*='TextareaButton.module__button___'], [class*='UserArea.module__controlButton___'], [class*='MessageActionBar.module__button___'], [class*='GuildsLayout.module__createGuildButtonIcon___'], [class*='GuildsLayout.module__fluxerButtonIcon___'], [class*='ContextMenu.module__item___'], [class*='Button.module__primary___'], [class*='Button.module__danger']),
[class*='GuildsLayout.module__guildIcon___']:not([class*='fluxerButtonIcon']) {
transition: none !important;
}
}
[class*='ChannelHeader.module__iconButton___'] {
position: relative;
top: 4px;
}
/* Tentative: hide resize-handle visuals, retaining the drag area. */
:is(
[class*='resizehandle' i],
[class*='resize-handle' i],
[class*='resize_handle' i],
[class*='resizedivider' i],
[class*='resize-divider' i],
[class*='resizeseparator' i],
[class*='resize-separator' i],
[class*='splitter' i],
[data-panel-resize-handle-id],
[role='separator']
) {
opacity: 0 !important;
}
/* Give complete message rows clearance from the left-hand frame.
* Keep the existing avatar/text grid and spacing intact.
*/
[class*='Message.module__message___'] {
padding-inline-start: 16px !important;
box-sizing: border-box;
}
Reference in a new issue View git blame Copy permalink