Add optional motion addon
This commit is contained in:
clay
parent
3c3473f914
commit
9815c2fa27
2 changed files with 668 additions and 0 deletions
|
|
@ -56,6 +56,19 @@ The theme avoids custom sidebar offsets, forced control sizes, clipping workarou
|
|||
|
||||
Keyboard-focus indicators remain separate from mouse-hover outlines. Existing selected-server outlines and semantic feature colors are preserved. No custom motion effects are added.
|
||||
|
||||
## Optional motion addon
|
||||
|
||||
`charcoal-outline-motion.css` is stand alone css that adds subtle animations to Charcoal Outline without changing its colors or layout.
|
||||
|
||||
### Included effects
|
||||
|
||||
- Thin gray hover outlines fade in and out.
|
||||
- Buttons compress slightly when pressed.
|
||||
- Server icons lift slightly on hover.
|
||||
- Menus, tooltips, notifications, and message-action toolbars have quick entrance animations.
|
||||
- The composer border transitions smoothly when focused.
|
||||
- Channel and settings rows transition between their existing background colors.
|
||||
|
||||
## Changelog
|
||||
|
||||
### 1.0.1
|
||||
|
|
|
|||
655
clarth/charcoal outline/charcoal-outline-motion.css
Normal file
655
clarth/charcoal outline/charcoal-outline-motion.css
Normal file
|
|
@ -0,0 +1,655 @@
|
|||
/*
|
||||
* @name Charcoal Outline — Motion Addon
|
||||
* @description Optional subtle feedback for Charcoal Outline 1.0.1.
|
||||
* @version 1.0.0
|
||||
* Beer-Ware (Revision 42): Michael Moon wrote this file. As long as
|
||||
* you retain this notice you can do whatever you want with this stuff.
|
||||
* If we meet some day, and you think this stuff is worth it, you can
|
||||
* buy me a beer in return.
|
||||
*/
|
||||
|
||||
/*
|
||||
* @name Charcoal Outline
|
||||
* @description Solid charcoal, transparent panels, blue feature accents and thin gray hover outlines. No external assets.
|
||||
* @version 1.0.1
|
||||
* Standalone replacement based on the supplied CSS and Fluxer reference.
|
||||
* Consolidated hover rules; preserves the supplied feature colors and native layout.
|
||||
* CSS syntax checked; not live-tested in Fluxer.
|
||||
*/
|
||||
:root, body {
|
||||
--co-background: #1e1e1e;
|
||||
--co-text: #e8ebf2;
|
||||
--co-muted: #98a1b3;
|
||||
--co-accent: #4fa3ff;
|
||||
--co-danger: #ef6565;
|
||||
--co-success: #7bdca2;
|
||||
--co-warning: #f2ce75;
|
||||
--co-line: rgba(128,128,128,.35);
|
||||
--co-code: rgba(128,128,128,.2);
|
||||
--co-hover: rgba(128,128,128,.08);
|
||||
--co-selected: rgba(79,163,255,.14);
|
||||
--co-font: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
|
||||
--co-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
|
||||
--background-primary: var(--co-background);
|
||||
--background-secondary: var(--co-background);
|
||||
--background-secondary-lighter: var(--co-background);
|
||||
--background-secondary-alt: var(--co-background);
|
||||
--background-tertiary: var(--co-background);
|
||||
--guild-badge-surface: var(--co-background);
|
||||
--composer-surface-color: var(--co-background);
|
||||
--text-on-brand-primary: var(--co-background);
|
||||
--text-on-brand-primary-light: var(--co-background);
|
||||
--brand-primary-foreground: var(--co-background);
|
||||
--settings-panel-background: var(--co-background);
|
||||
--tooltip-surface: var(--co-background);
|
||||
--background-channel-header: transparent;
|
||||
--background-header-primary: transparent;
|
||||
--background-header-secondary: transparent;
|
||||
--background-textarea: transparent;
|
||||
--guilds-layout-item-bg: transparent;
|
||||
--form-surface-background: transparent;
|
||||
--panel-control-bg: transparent;
|
||||
--button-primary-fill: transparent;
|
||||
--button-secondary-fill: transparent;
|
||||
--button-danger-fill: transparent;
|
||||
--control-button-normal-bg: transparent;
|
||||
--message-preview-card-background: transparent;
|
||||
--bg-table-row-odd: transparent;
|
||||
--scrollbar-track-bg: transparent;
|
||||
--background-header-primary-hover: var(--co-hover);
|
||||
--panel-control-highlight: var(--co-hover);
|
||||
--background-modifier-hover: var(--co-hover);
|
||||
--background-modifier-accent: var(--co-hover);
|
||||
--surface-interactive-hover-bg: var(--co-hover);
|
||||
--button-secondary-active-fill: var(--co-hover);
|
||||
--control-button-hover-bg: var(--co-hover);
|
||||
--message-reply-bg: var(--co-hover);
|
||||
--bg-blockquote: var(--co-hover);
|
||||
--bg-table-row-even: var(--co-hover);
|
||||
--background-modifier-selected: var(--co-selected);
|
||||
--background-modifier-accent-focus: var(--co-selected);
|
||||
--surface-interactive-selected-bg: var(--co-selected);
|
||||
--brand-tint: var(--co-selected);
|
||||
--button-primary-active-fill: var(--co-selected);
|
||||
--control-button-active-bg: var(--co-selected);
|
||||
--markup-mention-fill: var(--co-selected);
|
||||
--panel-control-border: var(--co-line);
|
||||
--panel-control-divider: var(--co-line);
|
||||
--floating-surface-ring-color: var(--co-line);
|
||||
--user-area-divider-color: var(--co-line);
|
||||
--skeleton-chrome-border-color: var(--co-line);
|
||||
--border-color: var(--co-line);
|
||||
--button-outline-border: var(--co-line);
|
||||
--message-preview-card-border: var(--co-line);
|
||||
--message-preview-card-divider: var(--co-line);
|
||||
--code-block-border: var(--co-line);
|
||||
--scrollbar-thumb-bg: var(--co-line);
|
||||
--composer-box-ring-color: var(--co-line);
|
||||
--settings-border-color: var(--co-line);
|
||||
--tooltip-border-color: var(--co-line);
|
||||
--surface-interactive-selected-color: var(--co-accent);
|
||||
--floating-surface-ring-color-strong: var(--co-accent);
|
||||
--border-color-hover: var(--co-accent);
|
||||
--border-color-focus: var(--co-accent);
|
||||
--focus-primary: var(--co-accent);
|
||||
--text-link: var(--co-accent);
|
||||
--text-on-brand-tint: var(--co-accent);
|
||||
--brand-primary: var(--co-accent);
|
||||
--brand-primary-fill: var(--co-accent);
|
||||
--brand-secondary: var(--co-accent);
|
||||
--accent-primary: var(--co-accent);
|
||||
--accent-info: var(--co-accent);
|
||||
--button-primary-text: var(--co-accent);
|
||||
--button-ghost-text: var(--co-accent);
|
||||
--button-outline-text: var(--co-accent);
|
||||
--control-button-active-text: var(--co-accent);
|
||||
--message-mention-color: var(--co-accent);
|
||||
--markup-mention-text: var(--co-accent);
|
||||
--settings-hover-border-color: var(--co-accent);
|
||||
--settings-selected-border-color: var(--co-accent);
|
||||
--text-primary: var(--co-text);
|
||||
--text-chat: var(--co-text);
|
||||
--text-on-dark: var(--co-text);
|
||||
--interactive-active: var(--co-text);
|
||||
--button-secondary-text: var(--co-text);
|
||||
--button-secondary-active-text: var(--co-text);
|
||||
--control-button-hover-text: var(--co-text);
|
||||
--markup-interactive-hover-text: var(--co-text);
|
||||
--code-text: var(--co-text);
|
||||
--guild-list-foreground: var(--co-muted);
|
||||
--text-secondary: var(--co-muted);
|
||||
--text-primary-muted: var(--co-muted);
|
||||
--text-chat-muted: var(--co-muted);
|
||||
--text-tertiary: var(--co-muted);
|
||||
--text-tertiary-muted: var(--co-muted);
|
||||
--text-tertiary-secondary: var(--co-muted);
|
||||
--interactive-muted: var(--co-muted);
|
||||
--message-timestamp-color: var(--co-muted);
|
||||
--status-offline: var(--co-muted);
|
||||
--control-button-normal-text: var(--co-muted);
|
||||
--message-reply-color: var(--co-muted);
|
||||
--scrollbar-thumb-bg-hover: var(--co-muted);
|
||||
--text-selection: rgba(79,163,255,.28);
|
||||
--brand-primary-light: #78b8ff;
|
||||
--brand-primary-light-fill: #78b8ff;
|
||||
--brand-primary-pressed: #378bdd;
|
||||
--brand-primary-shade: #378bdd;
|
||||
--brand-tint-hover: rgba(79,163,255,.22);
|
||||
--markup-interactive-hover-fill: rgba(79,163,255,.22);
|
||||
--brand-tint-border: rgba(79,163,255,.45);
|
||||
--accent-success: var(--co-success);
|
||||
--status-online: var(--co-success);
|
||||
--accent-warning: var(--co-warning);
|
||||
--status-idle: var(--co-warning);
|
||||
--status-warning: var(--co-warning);
|
||||
--markup-everyone-text: var(--co-warning);
|
||||
--markup-here-text: var(--co-warning);
|
||||
--accent-danger: var(--co-danger);
|
||||
--status-dnd: var(--co-danger);
|
||||
--status-danger: var(--co-danger);
|
||||
--button-danger-text: var(--co-danger);
|
||||
--accent-purple: #ba9cff;
|
||||
--button-danger-active-fill: rgba(239,101,101,.14);
|
||||
--message-mention-bg: rgba(79,163,255,.10);
|
||||
--message-mention-bg-hover: rgba(79,163,255,.16);
|
||||
--markup-mention-border: rgba(79,163,255,.35);
|
||||
--markup-everyone-fill: rgba(242,206,117,.12);
|
||||
--markup-here-fill: rgba(242,206,117,.12);
|
||||
--markup-everyone-border: rgba(242,206,117,.35);
|
||||
--markup-here-border: rgba(242,206,117,.35);
|
||||
--code-block-bg: var(--co-code);
|
||||
--code-inline-bg: var(--co-code);
|
||||
--bg-table-header: var(--co-code);
|
||||
--shadow-sm: none;
|
||||
--shadow-md: none;
|
||||
--shadow-lg: none;
|
||||
--shadow-xl: none;
|
||||
--radius-sm: 4px;
|
||||
--radius-md: 8px;
|
||||
--radius-lg: 10px;
|
||||
--radius-xl: 14px;
|
||||
--radius-2xl: 14px;
|
||||
--font-sans-primary: var(--co-font);
|
||||
}
|
||||
|
||||
/* Preserve native dimensions, scroll containers and control geometry. */
|
||||
html, body {
|
||||
background: var(--co-background) !important;
|
||||
color: var(--co-text);
|
||||
font-family: var(--co-font);
|
||||
}
|
||||
|
||||
::selection {
|
||||
background: rgba(79,163,255,.28);
|
||||
}
|
||||
|
||||
:focus-visible {
|
||||
outline: 2px solid var(--co-accent);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
[class*='App.module__appContainer___'] {
|
||||
background: var(--co-background) !important;
|
||||
font-family: var(--co-font);
|
||||
}
|
||||
|
||||
:is(
|
||||
[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*='ChannelLayout.module__channelLayoutContainer___'],
|
||||
[class*='ChannelChatLayout.module__container___'],
|
||||
[class*='MemberListContainer.module__memberListContainer___'],
|
||||
[class*='MemberListContainer.module__memberListScroller___']
|
||||
) {
|
||||
background: transparent !important;
|
||||
}
|
||||
|
||||
[class*='GuildNavbar.module__guildNavbarContainer___'] {
|
||||
border-right: 1px solid var(--co-line);
|
||||
}
|
||||
|
||||
[class*='MemberListContainer.module__memberListContainer___'] {
|
||||
border-left: 1px solid var(--co-line);
|
||||
}
|
||||
|
||||
:is(
|
||||
[class*='GuildHeader.module__headerContainer___'],
|
||||
[class*='ChannelHeader.module__headerContainer___']
|
||||
) {
|
||||
background: transparent !important;
|
||||
border-bottom: 1px solid var(--co-line);
|
||||
box-shadow: none !important;
|
||||
}
|
||||
|
||||
[class*='ChannelHeader.module__channelName'] {
|
||||
color: var(--co-text);
|
||||
}
|
||||
|
||||
[class*='GuildsLayout.module__guildDivider___'] {
|
||||
background: var(--co-line);
|
||||
}
|
||||
|
||||
[class*='GuildsLayout.module__guildIndicatorBar___'] {
|
||||
background: var(--co-accent);
|
||||
}
|
||||
|
||||
[class*='GuildsLayout.module__guildIconSelected___'] {
|
||||
outline: 2px solid var(--co-accent);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
:is(
|
||||
[class*='SettingsSection.module__sectionTitle___'],
|
||||
[class*='ChannelItem.module__categoryName___']
|
||||
) {
|
||||
color: var(--co-muted);
|
||||
font-size: .8rem;
|
||||
font-weight: 600;
|
||||
letter-spacing: .06em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
[class*='SettingsModalHeader.module__title___'] {
|
||||
color: var(--co-text);
|
||||
}
|
||||
|
||||
/* Full-sized buttons: preserve feature colors; hover borders are gray. */
|
||||
:is(
|
||||
[class*='Button.module__secondary___'],
|
||||
[class*='Button.module__primary___'],
|
||||
[class*='Button.module__danger']
|
||||
) {
|
||||
background: transparent !important;
|
||||
background-image: none !important;
|
||||
border: 1px solid var(--co-line) !important;
|
||||
border-radius: 10px;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
|
||||
[class*='Button.module__secondary___'] {
|
||||
color: var(--co-text) !important;
|
||||
}
|
||||
|
||||
[class*='Button.module__primary___'] {
|
||||
color: var(--co-accent) !important;
|
||||
border-color: var(--co-accent) !important;
|
||||
}
|
||||
|
||||
[class*='Button.module__danger'] {
|
||||
color: var(--co-danger) !important;
|
||||
}
|
||||
|
||||
:is(
|
||||
[class*='Button.module__secondary___'],
|
||||
[class*='Button.module__primary___']
|
||||
):not(:disabled):not([aria-disabled='true']):not([data-disabled='true']):not([data-disabled='']):hover {
|
||||
background: var(--co-hover) !important;
|
||||
border-color: var(--co-line) !important;
|
||||
}
|
||||
|
||||
[class*='Button.module__danger']:not(:disabled):not([aria-disabled='true']):not([data-disabled='true']):not([data-disabled='']):hover {
|
||||
background: rgba(239,101,101,.10) !important;
|
||||
border-color: var(--co-line) !important;
|
||||
}
|
||||
|
||||
:is(
|
||||
[class*='ChannelItemSurface.module__channelItemSurface___'],
|
||||
[class*='SettingsModalLayout.module__sidebarItem___'],
|
||||
[class*='SettingsModalLayout.module__sidebarSubItem___']
|
||||
) {
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
:is(
|
||||
[class*='ChannelItemSurface.module__channelItemSurface___'],
|
||||
[class*='SettingsModalLayout.module__sidebarItem___'],
|
||||
[class*='SettingsModalLayout.module__sidebarSubItem___']
|
||||
):not(:disabled):not([aria-disabled='true']):not([data-disabled='true']):not([data-disabled='']):hover {
|
||||
background-color: var(--co-hover) !important;
|
||||
}
|
||||
|
||||
:is(
|
||||
[class*='ChannelItemSurface.module__channelItemSurfaceSelected___'],
|
||||
[class*='SettingsModalLayout.module__sidebarItemSelected___'],
|
||||
[class*='SettingsModalLayout.module__sidebarSubItemActive___']
|
||||
) {
|
||||
background-color: var(--co-selected) !important;
|
||||
color: var(--co-accent);
|
||||
}
|
||||
|
||||
:is(
|
||||
[class*='ChannelHeader.module__iconButton___'],
|
||||
[class*='TextareaButton.module__button___'],
|
||||
[class*='UserArea.module__controlButton___'],
|
||||
[class*='MessageActionBar.module__button___']
|
||||
) {
|
||||
border-radius: 8px;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
:is(
|
||||
[class*='ChannelHeader.module__iconButton___'],
|
||||
[class*='TextareaButton.module__button___'],
|
||||
[class*='UserArea.module__controlButton___'],
|
||||
[class*='MessageActionBar.module__button___']
|
||||
):not(:disabled):not([aria-disabled='true']):not([data-disabled='true']):not([data-disabled='']):hover {
|
||||
background-color: var(--co-hover);
|
||||
}
|
||||
|
||||
:is(
|
||||
[class*='ChannelHeader.module__iconButtonSelected___'],
|
||||
[class*='TextareaButton.module__selected___']
|
||||
) {
|
||||
background-color: var(--co-selected) !important;
|
||||
color: var(--co-accent);
|
||||
}
|
||||
|
||||
[class*='UserArea.module__userAreaInnerWrapper___'] {
|
||||
background: var(--co-background) !important;
|
||||
border-top: 1px solid var(--co-line);
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
:is(
|
||||
[class*='TextareaInput.module__textareaOuterRow___'],
|
||||
[class*='MessageSearchBar.module__inputContainer___']
|
||||
) {
|
||||
background: transparent !important;
|
||||
border: 1px solid var(--co-line);
|
||||
border-radius: 10px;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
|
||||
:is(
|
||||
[class*='TextareaInput.module__textareaOuterRow___'],
|
||||
[class*='MessageSearchBar.module__inputContainer___']
|
||||
):focus-within {
|
||||
border-color: var(--co-accent);
|
||||
}
|
||||
|
||||
[class*='MessageSearchBar.module__scopeBadge___'] {
|
||||
background: var(--co-hover);
|
||||
color: var(--co-muted);
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
/* Opaque floating surfaces preserve readability without clipping overlays. */
|
||||
:is(
|
||||
[class*='ContextMenu.module__contextMenu___'],
|
||||
[class*='PopoverPopout.module__popout___'],
|
||||
[class*='Tooltip.module__tooltip___'],
|
||||
[class*='Toast.module__toast___'],
|
||||
[class*='MessageActionBar.module__actionBar___']
|
||||
) {
|
||||
background: var(--co-background) !important;
|
||||
background-image: none !important;
|
||||
border: 1px solid var(--co-line);
|
||||
border-radius: 10px;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
|
||||
[class*='ContextMenu.module__item___'] {
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
[class*='ContextMenu.module__item___']:not(:disabled):not([aria-disabled='true']):not([data-disabled='true']):not([data-disabled='']):is(:hover, :focus-visible, [data-highlighted]:not([data-highlighted='false'])) {
|
||||
background-color: var(--co-hover) !important;
|
||||
}
|
||||
|
||||
[class*='ContextMenu.module__danger___'] {
|
||||
color: var(--co-danger) !important;
|
||||
}
|
||||
|
||||
[class*='ContextMenu.module__separator___'] {
|
||||
background-color: var(--co-line);
|
||||
}
|
||||
|
||||
[class*='SettingsModalLayout.module__container___'] {
|
||||
background: var(--co-background) !important;
|
||||
border: 1px solid var(--co-line);
|
||||
border-radius: 14px;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
|
||||
:is(
|
||||
[class*='SettingsModalLayout.module__desktopSidebar___'],
|
||||
[class*='SettingsModalLayout.module__desktopContent___'],
|
||||
[class*='SettingsModalLayout.module__desktopHeader___']
|
||||
) {
|
||||
background: transparent !important;
|
||||
}
|
||||
|
||||
[class*='SettingsModalLayout.module__desktopSidebar___'] {
|
||||
border-right: 1px solid var(--co-line);
|
||||
}
|
||||
|
||||
[class*='SettingsModalLayout.module__desktopHeader___'] {
|
||||
border-bottom: 1px solid var(--co-line);
|
||||
}
|
||||
|
||||
[class*='Message.module__message___'] :is(code, kbd, samp) {
|
||||
background: var(--co-code);
|
||||
border-radius: 4px;
|
||||
font-family: var(--co-mono);
|
||||
}
|
||||
|
||||
[class*='Message.module__message___'] pre {
|
||||
background: var(--co-code);
|
||||
border: 1px solid var(--co-line);
|
||||
border-radius: 8px;
|
||||
font-family: var(--co-mono);
|
||||
}
|
||||
|
||||
[class*='Message.module__message___'] pre code {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
[class*='Message.module__message___'] a[href] {
|
||||
color: var(--co-accent);
|
||||
}
|
||||
|
||||
:is(
|
||||
[class*='GuildsLayout.module__guildListScrollContainer___'],
|
||||
[class*='ChannelListContent.module__channelListScroller___'],
|
||||
[class*='MemberListContainer.module__memberListScroller___']
|
||||
) {
|
||||
scrollbar-width: thin;
|
||||
scrollbar-color: var(--co-line) transparent;
|
||||
}
|
||||
|
||||
/* Consolidated hover outline.
|
||||
All state filters belong to the SAME element (no descendant whitespace).
|
||||
Keyboard-focus and selected-guild outlines are intentionally preserved.
|
||||
Existing bordered buttons use their border, avoiding a double line. */
|
||||
:is(
|
||||
[class*='ChannelHeader.module__iconButton___'],
|
||||
[class*='TextareaButton.module__button___'],
|
||||
[class*='UserArea.module__controlButton___'],
|
||||
[class*='MessageActionBar.module__button___'],
|
||||
[class*='ChannelItemSurface.module__channelItemSurface___'],
|
||||
[class*='SettingsModalLayout.module__sidebarItem___'],
|
||||
[class*='SettingsModalLayout.module__sidebarSubItem___'],
|
||||
[class*='ContextMenu.module__item___'],
|
||||
[class*='GuildsLayout.module__guildListItem___'],
|
||||
[class*='TextareaInput.module__textareaOuterRow___'],
|
||||
[class*='MessageSearchBar.module__inputContainer___']
|
||||
):not(:disabled):not([aria-disabled='true']):not([data-disabled='true']):not([data-disabled='']):hover:not(:focus-visible):not(:focus-within) {
|
||||
outline: 1px solid var(--co-line) !important;
|
||||
outline-offset: -1px;
|
||||
}
|
||||
|
||||
/* Do not replace an already-visible selected server outline on hover. */
|
||||
[class*='GuildsLayout.module__guildListItem___']:has([class*='GuildsLayout.module__guildIconSelected___']):not(:disabled):not([aria-disabled='true']):not([data-disabled='true']):not([data-disabled='']):hover:not(:focus-visible):not(:focus-within) {
|
||||
outline: none !important;
|
||||
}
|
||||
|
||||
|
||||
/*Motion stuff is below
|
||||
|
||||
|
||||
|
||||
@media (prefers-reduced-motion: no-preference) {
|
||||
/* Neutral starting outline; the base theme supplies the hover color.
|
||||
Exclude keyboard focus and rows containing a selected guild icon. */
|
||||
:is(
|
||||
[class*='ChannelHeader.module__iconButton___'],
|
||||
[class*='TextareaButton.module__button___'],
|
||||
[class*='UserArea.module__controlButton___'],
|
||||
[class*='MessageActionBar.module__button___'],
|
||||
[class*='ContextMenu.module__item___'],
|
||||
[class*='GuildsLayout.module__guildListItem___'],
|
||||
[class*='MessageSearchBar.module__inputContainer___'],
|
||||
[class*='ChannelItemSurface.module__channelItemSurface___'],
|
||||
[class*='SettingsModalLayout.module__sidebarItem___'],
|
||||
[class*='SettingsModalLayout.module__sidebarSubItem___'],
|
||||
[class*='TextareaInput.module__textareaOuterRow___']
|
||||
):not(:focus-visible):not(:focus-within):not(:has([class*='GuildsLayout.module__guildIconSelected___'])) {
|
||||
outline: 1px solid transparent;
|
||||
outline-offset: -1px;
|
||||
}
|
||||
|
||||
/* One transition list per component group avoids competing patches. */
|
||||
:is(
|
||||
[class*='UserArea.module__controlButton___'],
|
||||
[class*='MessageActionBar.module__button___'],
|
||||
[class*='ContextMenu.module__item___'],
|
||||
[class*='GuildsLayout.module__guildListItem___'],
|
||||
[class*='MessageSearchBar.module__inputContainer___']
|
||||
) {
|
||||
transition: outline-color 140ms ease;
|
||||
}
|
||||
|
||||
:is(
|
||||
[class*='ChannelHeader.module__iconButton___'],
|
||||
[class*='TextareaButton.module__button___']
|
||||
) {
|
||||
transition: scale 90ms ease, outline-color 140ms ease;
|
||||
}
|
||||
|
||||
:is(
|
||||
[class*='ChannelItemSurface.module__channelItemSurface___'],
|
||||
[class*='SettingsModalLayout.module__sidebarItem___'],
|
||||
[class*='SettingsModalLayout.module__sidebarSubItem___']
|
||||
) {
|
||||
transition: background-color 120ms ease, outline-color 140ms ease;
|
||||
}
|
||||
|
||||
[class*='TextareaInput.module__textareaOuterRow___'] {
|
||||
transition: border-color 120ms ease, outline-color 140ms ease;
|
||||
}
|
||||
|
||||
/* Focus outlines appear immediately; other feedback stays enabled. */
|
||||
:is(
|
||||
[class*='UserArea.module__controlButton___'],
|
||||
[class*='MessageActionBar.module__button___'],
|
||||
[class*='ContextMenu.module__item___'],
|
||||
[class*='GuildsLayout.module__guildListItem___'],
|
||||
[class*='MessageSearchBar.module__inputContainer___']
|
||||
):is(:focus-visible, :focus-within) {
|
||||
transition: none;
|
||||
}
|
||||
|
||||
:is(
|
||||
[class*='ChannelHeader.module__iconButton___'],
|
||||
[class*='TextareaButton.module__button___']
|
||||
):is(:focus-visible, :focus-within) {
|
||||
transition: scale 90ms ease;
|
||||
}
|
||||
|
||||
:is(
|
||||
[class*='ChannelItemSurface.module__channelItemSurface___'],
|
||||
[class*='SettingsModalLayout.module__sidebarItem___'],
|
||||
[class*='SettingsModalLayout.module__sidebarSubItem___']
|
||||
):is(:focus-visible, :focus-within) {
|
||||
transition: background-color 120ms ease;
|
||||
}
|
||||
|
||||
[class*='TextareaInput.module__textareaOuterRow___']:is(:focus-visible, :focus-within) {
|
||||
transition: border-color 120ms ease;
|
||||
}
|
||||
|
||||
:is(
|
||||
[class*='Button.module__secondary___'],
|
||||
[class*='Button.module__primary___'],
|
||||
[class*='Button.module__danger']
|
||||
) {
|
||||
transition: scale 100ms ease, border-color 140ms ease;
|
||||
}
|
||||
|
||||
:is(
|
||||
[class*='Button.module__secondary___'],
|
||||
[class*='Button.module__primary___'],
|
||||
[class*='Button.module__danger']
|
||||
):not(:disabled):not([aria-disabled='true']):not([data-disabled='true']):not([data-disabled='']):active {
|
||||
scale: .98;
|
||||
}
|
||||
|
||||
:is(
|
||||
[class*='ChannelHeader.module__iconButton___'],
|
||||
[class*='TextareaButton.module__button___']
|
||||
):not(:disabled):not([aria-disabled='true']):not([data-disabled='true']):not([data-disabled='']):active {
|
||||
scale: .95;
|
||||
}
|
||||
|
||||
/* Entrances run when elements are inserted/rendered, not necessarily
|
||||
whenever a persistently mounted element becomes visible.
|
||||
No fill-mode: native styles resume after each entrance.
|
||||
These declarations replace native animation lists on these targets. */
|
||||
:is(
|
||||
[class*='ContextMenu.module__contextMenu___'],
|
||||
[class*='PopoverPopout.module__popout___']
|
||||
) {
|
||||
animation: co-motion-enter 140ms ease-out;
|
||||
}
|
||||
|
||||
[class*='Toast.module__toast___'] {
|
||||
animation: co-motion-enter 150ms ease-out;
|
||||
}
|
||||
|
||||
[class*='Tooltip.module__tooltip___'] {
|
||||
animation: co-motion-fade 110ms ease-out;
|
||||
}
|
||||
|
||||
[class*='MessageActionBar.module__actionBar___'] {
|
||||
animation: co-motion-fade 120ms ease-out;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
/* Move only the server icon, and only for fine hover-capable pointers. */
|
||||
@media (hover: hover) and (pointer: fine) and
|
||||
(prefers-reduced-motion: no-preference) {
|
||||
[class*='GuildsLayout.module__guildIcon___'] {
|
||||
transition: translate 140ms ease;
|
||||
}
|
||||
|
||||
[class*='GuildsLayout.module__guildListItem___']:not(:disabled):not([aria-disabled='true']):not([data-disabled='true']):not([data-disabled='']):hover
|
||||
[class*='GuildsLayout.module__guildIcon___'] {
|
||||
translate: 0 -2px;
|
||||
}
|
||||
|
||||
[class*='GuildsLayout.module__guildListItem___']:not(:disabled):not([aria-disabled='true']):not([data-disabled='true']):not([data-disabled='']):active
|
||||
[class*='GuildsLayout.module__guildIcon___'] {
|
||||
translate: 0 0;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
/* Reduced-motion mode receives no motion rules from this addon.
|
||||
Native client animations are deliberately left alone. */
|
||||
@keyframes co-motion-enter {
|
||||
from { opacity: 0; translate: 0 3px; }
|
||||
to { opacity: 1; translate: 0 0; }
|
||||
}
|
||||
|
||||
@keyframes co-motion-fade {
|
||||
from { opacity: 0; }
|
||||
to { opacity: 1; }
|
||||
}
|
||||
Loading…
Add table
Reference in a new issue