b7a4cf4ce8
All checks were successful
Build and Release / build-and-release (push) Successful in 13m12s
- Implemented Button component with various props for customization. - Created Modal component with header, content, and footer subcomponents. - Added Spinner component for loading indicators. - Developed Toast component for displaying notifications. - Introduced Tooltip component for contextual hints with keyboard shortcuts. - Added corresponding CSS modules for styling each component. - Updated index file to export new components. - Configured TypeScript settings for the UI package.
69 lines
1.6 KiB
CSS
69 lines
1.6 KiB
CSS
/* ── Mobile pin actions sheet ────────────────────────────────────────
|
|
Bottom sheet opened by long-pressing a pinned message in the
|
|
ChannelDetailsDrawer Pins tab. Currently only has one action
|
|
("Unpin Message"), but structured as a card stack so we can
|
|
drop in "Jump to Message" / "Copy Link" etc. later without
|
|
reshuffling the layout. */
|
|
|
|
.body {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 12px;
|
|
padding: 8px 16px 32px;
|
|
}
|
|
|
|
.actionList {
|
|
background-color: var(--background-secondary-alt);
|
|
border-radius: 0.75rem;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.actionItem {
|
|
position: relative;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 14px;
|
|
width: 100%;
|
|
padding: 16px;
|
|
background: transparent;
|
|
border: none;
|
|
color: var(--text-primary);
|
|
font: inherit;
|
|
font-size: 15px;
|
|
font-weight: 600;
|
|
text-align: left;
|
|
cursor: pointer;
|
|
transition: background-color 0.1s;
|
|
-webkit-tap-highlight-color: transparent;
|
|
}
|
|
|
|
.actionItem:active {
|
|
background-color: var(--background-modifier-hover);
|
|
}
|
|
|
|
.actionItem svg {
|
|
flex-shrink: 0;
|
|
color: var(--text-primary-muted);
|
|
}
|
|
|
|
.actionItem:not(:last-child)::after {
|
|
content: '';
|
|
position: absolute;
|
|
left: calc(16px + 20px + 14px);
|
|
right: 16px;
|
|
bottom: 0;
|
|
height: 1px;
|
|
background-color: var(--background-header-secondary);
|
|
pointer-events: none;
|
|
}
|
|
|
|
/* Danger variant — Unpin Message. Fluxer reference uses the same
|
|
red HSL as Delete Message in the message actions sheet. */
|
|
.actionItemDanger {
|
|
color: hsl(350, calc(90% * var(--saturation-factor)), 65%);
|
|
}
|
|
|
|
.actionItemDanger svg {
|
|
color: hsl(350, calc(90% * var(--saturation-factor)), 65%);
|
|
}
|