Remove dead CSS left over from the app.css split and fix emoji button hit target
This commit is contained in:
parent
ed61081b01
commit
c0c8354a76
8 changed files with 16 additions and 46 deletions
|
|
@ -10,11 +10,9 @@
|
||||||
|
|
||||||
<div class="content-search {props.class}">
|
<div class="content-search {props.class}">
|
||||||
<div class="z-feature">
|
<div class="z-feature">
|
||||||
<div class="content-sizing">
|
|
||||||
{@render props.input?.()}
|
{@render props.input?.()}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
<div class="scroll-container h-full pt-2">
|
||||||
<div class="scroll-container content-sizing h-full pt-2">
|
|
||||||
{@render props.content?.()}
|
{@render props.content?.()}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -30,13 +30,13 @@
|
||||||
|
|
||||||
<svelte:document onmousemove={onMouseMove} />
|
<svelte:document onmousemove={onMouseMove} />
|
||||||
|
|
||||||
|
<Button onclick={open} class={props.class}>
|
||||||
<Tippy
|
<Tippy
|
||||||
bind:popover
|
bind:popover
|
||||||
class="flex {props.class}"
|
class="flex"
|
||||||
component={EmojiPicker}
|
component={EmojiPicker}
|
||||||
props={{onClick}}
|
props={{onClick}}
|
||||||
params={{trigger: "manual", interactive: true, ...tippyParams}}>
|
params={{trigger: "manual", interactive: true, ...tippyParams}}>
|
||||||
<Button onclick={open}>
|
|
||||||
{@render props.children?.()}
|
{@render props.children?.()}
|
||||||
</Button>
|
|
||||||
</Tippy>
|
</Tippy>
|
||||||
|
</Button>
|
||||||
|
|
|
||||||
|
|
@ -112,7 +112,7 @@
|
||||||
<label
|
<label
|
||||||
for={id}
|
for={id}
|
||||||
class="flex aspect-square cursor-pointer items-center justify-center rounded-2xl border-2 border-dashed text-sm"
|
class="flex aspect-square cursor-pointer items-center justify-center rounded-2xl border-2 border-dashed text-sm"
|
||||||
style:border-color={dropActive ? "var(--primary)" : "var(--line-strong)"}
|
style:border-color={dropActive ? "var(--primary)" : undefined}
|
||||||
aria-label="Drag and drop images here or click to select"
|
aria-label="Drag and drop images here or click to select"
|
||||||
ondragenter={stopPropagation(preventDefault(onDragEnter))}
|
ondragenter={stopPropagation(preventDefault(onDragEnter))}
|
||||||
ondragover={stopPropagation(preventDefault(onDragOver))}
|
ondragover={stopPropagation(preventDefault(onDragOver))}
|
||||||
|
|
|
||||||
|
|
@ -363,28 +363,6 @@ body.keyboard-open .room__compose {
|
||||||
@apply underline;
|
@apply underline;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* date picker */
|
|
||||||
.picker {
|
|
||||||
--date-picker-foreground: var(--content);
|
|
||||||
--date-picker-background: var(--surface-more);
|
|
||||||
--date-picker-highlight-border: var(--primary);
|
|
||||||
--date-picker-selected-color: var(--primary-content);
|
|
||||||
--date-picker-selected-background: var(--primary);
|
|
||||||
}
|
|
||||||
.date-time-field {
|
|
||||||
@apply bg-surface rounded-2xl px-0;
|
|
||||||
border: var(--border-thin) solid var(--line);
|
|
||||||
}
|
|
||||||
.date-time-field input {
|
|
||||||
height: 100% !important;
|
|
||||||
width: 100% !important;
|
|
||||||
border-radius: var(--radius-2xl) !important;
|
|
||||||
border: none !important;
|
|
||||||
background: inherit !important;
|
|
||||||
color: inherit !important;
|
|
||||||
padding: 0.7rem 1rem !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* tippy popover */
|
/* tippy popover */
|
||||||
.tippy-target {
|
.tippy-target {
|
||||||
@apply z-tooltip pointer-events-none fixed inset-0;
|
@apply z-tooltip pointer-events-none fixed inset-0;
|
||||||
|
|
|
||||||
|
|
@ -83,7 +83,6 @@
|
||||||
/* outline */
|
/* outline */
|
||||||
.button-outline {
|
.button-outline {
|
||||||
@apply text-content bg-transparent;
|
@apply text-content bg-transparent;
|
||||||
border-color: var(--line-strong);
|
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
@apply border-primary text-primary;
|
@apply border-primary text-primary;
|
||||||
|
|
|
||||||
|
|
@ -5,7 +5,7 @@
|
||||||
VITE_THEME). Every theme is selected the same way via its own data-fl-theme
|
VITE_THEME). Every theme is selected the same way via its own data-fl-theme
|
||||||
value — there is no implicit default — so VITE_THEME must be set. These are
|
value — there is no implicit default — so VITE_THEME must be set. These are
|
||||||
plain CSS variables consumed by:
|
plain CSS variables consumed by:
|
||||||
- the component classes in common.css (var(--surface), var(--shadow-lg), …)
|
- the component classes in base.css (var(--surface), var(--shadow-lg), …)
|
||||||
- the Tailwind utilities registered in base.css's @theme block
|
- the Tailwind utilities registered in base.css's @theme block
|
||||||
(bg-surface, text-content-muted, text-primary, rounded-2xl, shadow-lg, …)
|
(bg-surface, text-content-muted, text-primary, rounded-2xl, shadow-lg, …)
|
||||||
Reskinning = override the same names in another theme file; no markup change.
|
Reskinning = override the same names in another theme file; no markup change.
|
||||||
|
|
@ -64,7 +64,7 @@
|
||||||
--shadow-inset-strong: inset 0 -3px 0 rgba(0, 0, 0, 0.1);
|
--shadow-inset-strong: inset 0 -3px 0 rgba(0, 0, 0, 0.1);
|
||||||
}
|
}
|
||||||
|
|
||||||
/* `.nav-rail` opts the primary nav into this dark palette unconditionally */
|
/* `.primary-nav` opts the primary nav into this dark palette unconditionally */
|
||||||
&[data-theme="dark"],
|
&[data-theme="dark"],
|
||||||
& .primary-nav {
|
& .primary-nav {
|
||||||
--primary: #8e80ff;
|
--primary: #8e80ff;
|
||||||
|
|
@ -105,10 +105,6 @@
|
||||||
--shadow-inset-strong: inset 0 -3px 0 rgba(0, 0, 0, 0.3);
|
--shadow-inset-strong: inset 0 -3px 0 rgba(0, 0, 0, 0.3);
|
||||||
}
|
}
|
||||||
|
|
||||||
.link-content {
|
|
||||||
border-radius: var(--radius-pill);
|
|
||||||
}
|
|
||||||
|
|
||||||
.chat-editor .tiptap {
|
.chat-editor .tiptap {
|
||||||
border-color: var(--line);
|
border-color: var(--line);
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -15,7 +15,6 @@
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
@apply text-primary;
|
@apply text-primary;
|
||||||
background: color-mix(in srgb, var(--subtle) 10%, transparent);
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,8 +1,8 @@
|
||||||
/* ============================================================================
|
/* ============================================================================
|
||||||
Design-system entry point (imported once, in src/routes/+layout.svelte).
|
Design-system entry point (imported once, in src/routes/+layout.svelte).
|
||||||
|
|
||||||
tailwindcss — framework + our @theme token registration (via common.css)
|
tailwindcss — framework + our @theme token registration (via base.css)
|
||||||
common.css — theme-independent structure (components, utilities, base)
|
base.css — theme-independent structure (components, utilities, base)
|
||||||
clay.css — clay theme token values ([data-fl-theme="clay"] + dark)
|
clay.css — clay theme token values ([data-fl-theme="clay"] + dark)
|
||||||
flat.css — flat theme token values ([data-fl-theme="flat"] + dark)
|
flat.css — flat theme token values ([data-fl-theme="flat"] + dark)
|
||||||
navy.css — navy theme token values ([data-fl-theme="navy"] + dark)
|
navy.css — navy theme token values ([data-fl-theme="navy"] + dark)
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue