mirror of
https://github.com/fluxerapp/fluxer
synced 2026-10-18 05:25:40 +09:00
113 lines
3.0 KiB
CSS
113 lines
3.0 KiB
CSS
/* SPDX-License-Identifier: AGPL-3.0-or-later */
|
|
|
|
.actionBarContainer {
|
|
position: absolute;
|
|
bottom: calc(100% - 0.25rem - 12px);
|
|
right: 0;
|
|
z-index: var(--z-index-elevated-1);
|
|
padding: 0 0.875rem 0.375rem 2rem;
|
|
}
|
|
|
|
.actionBar {
|
|
composes: toolbar from '@app/features/ui/action_toolbar/ActionToolbar.module.css';
|
|
--message-action-bar-surface: var(--settings-surface-background, var(--form-surface-background));
|
|
--message-action-bar-border: var(--settings-border-color, var(--background-modifier-accent));
|
|
--message-action-bar-hover-background: var(--settings-hover-background, var(--surface-interactive-hover-bg));
|
|
--message-action-bar-hover-border: var(
|
|
--settings-hover-border-color,
|
|
color-mix(in srgb, var(--background-modifier-accent) 72%, var(--text-tertiary))
|
|
);
|
|
--message-action-bar-selected-background: var(--settings-selected-background, var(--surface-interactive-selected-bg));
|
|
--message-action-bar-selected-border: var(
|
|
--settings-selected-border-color,
|
|
color-mix(in srgb, var(--background-modifier-accent) 72%, var(--text-tertiary))
|
|
);
|
|
--message-action-bar-danger-text: var(
|
|
--settings-danger-text,
|
|
color-mix(in srgb, var(--status-danger) 78%, var(--text-primary) 22%)
|
|
);
|
|
--message-action-bar-danger-background: var(
|
|
--settings-danger-background,
|
|
color-mix(in srgb, var(--status-danger) 6%, var(--surface-interactive-hover-bg))
|
|
);
|
|
--message-action-bar-danger-border: var(
|
|
--settings-danger-border-color,
|
|
color-mix(in srgb, var(--status-danger) 32%, transparent)
|
|
);
|
|
--action-toolbar-surface: var(--message-action-bar-surface);
|
|
--action-toolbar-border: var(--message-action-bar-border);
|
|
position: relative;
|
|
}
|
|
|
|
.button {
|
|
composes: item from '@app/features/ui/action_toolbar/ActionToolbar.module.css';
|
|
}
|
|
|
|
.button[hidden] {
|
|
display: none;
|
|
}
|
|
|
|
:global(:where(html.window-focused, html.unfocused-fully-interactive):not(.window-focus-activation-guard))
|
|
.button:not(.active):not(.danger):hover {
|
|
color: var(--text-primary);
|
|
background: var(--message-action-bar-hover-background);
|
|
}
|
|
|
|
.button.active {
|
|
color: var(--text-primary);
|
|
background: var(--message-action-bar-selected-background);
|
|
}
|
|
|
|
.button.danger {
|
|
color: var(--message-action-bar-danger-text);
|
|
}
|
|
|
|
:global(:where(html.window-focused, html.unfocused-fully-interactive):not(.window-focus-activation-guard))
|
|
.button.danger:not(.active):hover {
|
|
color: var(--message-action-bar-danger-text);
|
|
background: var(--message-action-bar-danger-background);
|
|
}
|
|
|
|
.button.danger.active {
|
|
color: var(--message-action-bar-danger-text);
|
|
background: var(--message-action-bar-danger-background);
|
|
}
|
|
|
|
.actionBarIcon {
|
|
width: 1.125rem;
|
|
height: 1.125rem;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
line-height: 0;
|
|
}
|
|
|
|
.actionBarIcon > svg {
|
|
width: 1.125rem;
|
|
height: 1.125rem;
|
|
display: block;
|
|
flex: 0 0 auto;
|
|
object-fit: contain;
|
|
}
|
|
|
|
.tooltipContent {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: 0.25rem;
|
|
}
|
|
|
|
.tooltipHint {
|
|
color: var(--text-primary-muted);
|
|
font-size: 0.75rem;
|
|
}
|
|
|
|
.emojiImage {
|
|
height: 1.125rem;
|
|
width: 1.125rem;
|
|
}
|
|
|
|
img.emojiImage {
|
|
object-fit: contain;
|
|
}
|