add active unit highlighting with element focus rings
- track active item in sidebar store - add element accent colors and focus ring mixins - units show pulsing focus ring when selected in sidebar - refactor units to use shared menu components - update context menu test page
This commit is contained in:
parent
9a4a863ccd
commit
0379cff81e
7 changed files with 987 additions and 503 deletions
|
|
@ -4,12 +4,13 @@
|
|||
import type { Job } from '$lib/types/api/entities'
|
||||
import { getContext } from 'svelte'
|
||||
import Icon from '$lib/components/Icon.svelte'
|
||||
import ContextMenu from '$lib/components/ui/ContextMenu.svelte'
|
||||
import { ContextMenu as ContextMenuBase, DropdownMenu as DropdownMenuBase } from 'bits-ui'
|
||||
import UnitMenuContainer from '$lib/components/ui/menu/UnitMenuContainer.svelte'
|
||||
import MenuItems from '$lib/components/ui/menu/MenuItems.svelte'
|
||||
import UncapIndicator from '$lib/components/uncap/UncapIndicator.svelte'
|
||||
import { getCharacterImageWithPose } from '$lib/utils/images'
|
||||
import { openDetailsSidebar } from '$lib/features/details/openDetailsSidebar.svelte'
|
||||
import { getJobPortraitUrl, Gender } from '$lib/utils/jobUtils'
|
||||
import { sidebar } from '$lib/stores/sidebar.svelte'
|
||||
import perpetuityFilled from '$src/assets/icons/perpetuity/filled.svg'
|
||||
import perpetuityEmpty from '$src/assets/icons/perpetuity/empty.svg'
|
||||
import * as m from '$lib/paraglide/messages'
|
||||
|
|
@ -70,6 +71,31 @@
|
|||
// Check if this is the protagonist slot
|
||||
const isProtagonist = $derived(position === 0)
|
||||
|
||||
// Check if this item is currently active in the sidebar
|
||||
let isActive = $derived(item?.id && sidebar.activeItemId === String(item.id))
|
||||
|
||||
// Determine element class for focus ring
|
||||
let elementClass = $derived.by(() => {
|
||||
const element = item?.character?.element || partyElement
|
||||
|
||||
switch (element) {
|
||||
case 1:
|
||||
return 'wind'
|
||||
case 2:
|
||||
return 'fire'
|
||||
case 3:
|
||||
return 'water'
|
||||
case 4:
|
||||
return 'earth'
|
||||
case 5:
|
||||
return 'dark'
|
||||
case 6:
|
||||
return 'light'
|
||||
default:
|
||||
return 'neutral'
|
||||
}
|
||||
})
|
||||
|
||||
async function remove() {
|
||||
if (!item?.id) return
|
||||
try {
|
||||
|
|
@ -140,13 +166,18 @@
|
|||
}
|
||||
</script>
|
||||
|
||||
<div class="unit" class:empty={!item}>
|
||||
<div class="unit {elementClass}" class:empty={!item} class:is-active={isActive}>
|
||||
{#if item}
|
||||
<ContextMenu showGearButton={true}>
|
||||
{#snippet children()}
|
||||
<UnitMenuContainer showGearButton={true}>
|
||||
{#snippet trigger()}
|
||||
<div
|
||||
class="focus-ring-wrapper {elementClass}"
|
||||
class:is-active={isActive}
|
||||
class:editable={ctx?.canEdit()}
|
||||
>
|
||||
{#key item?.id ?? position}
|
||||
<div
|
||||
class="frame character cell"
|
||||
class="frame character cell {elementClass}"
|
||||
class:protagonist={position === 0}
|
||||
class:editable={ctx?.canEdit()}
|
||||
onclick={() => viewDetails()}
|
||||
|
|
@ -180,7 +211,7 @@
|
|||
{/if}
|
||||
{/if}
|
||||
<img
|
||||
class="image"
|
||||
class="image {elementClass}"
|
||||
class:placeholder={!item?.character?.granblueId && !isProtagonist}
|
||||
class:protagonist={isProtagonist}
|
||||
alt={isProtagonist && job ? job.name.en : displayName(item?.character)}
|
||||
|
|
@ -188,38 +219,35 @@
|
|||
/>
|
||||
</div>
|
||||
{/key}
|
||||
</div>
|
||||
{/snippet}
|
||||
|
||||
{#snippet contextMenu()}
|
||||
<ContextMenuBase.Item class="context-menu-item" onclick={viewDetails}>
|
||||
{m.context_view_details()}
|
||||
</ContextMenuBase.Item>
|
||||
{#if ctx?.canEdit()}
|
||||
<ContextMenuBase.Item class="context-menu-item" onclick={replace}>
|
||||
{m.context_replace()}
|
||||
</ContextMenuBase.Item>
|
||||
<ContextMenuBase.Separator class="context-menu-separator" />
|
||||
<ContextMenuBase.Item class="context-menu-item danger" onclick={remove}>
|
||||
{m.context_remove()}
|
||||
</ContextMenuBase.Item>
|
||||
{/if}
|
||||
<MenuItems
|
||||
onViewDetails={viewDetails}
|
||||
onReplace={ctx?.canEdit() ? replace : undefined}
|
||||
onRemove={ctx?.canEdit() ? remove : undefined}
|
||||
canEdit={ctx?.canEdit()}
|
||||
variant="context"
|
||||
viewDetailsLabel={m.context_view_details()}
|
||||
replaceLabel={m.context_replace()}
|
||||
removeLabel={m.context_remove()}
|
||||
/>
|
||||
{/snippet}
|
||||
|
||||
{#snippet dropdownMenu()}
|
||||
<DropdownMenuBase.Item class="dropdown-menu-item" onclick={viewDetails}>
|
||||
{m.context_view_details()}
|
||||
</DropdownMenuBase.Item>
|
||||
{#if ctx?.canEdit()}
|
||||
<DropdownMenuBase.Item class="dropdown-menu-item" onclick={replace}>
|
||||
{m.context_replace()}
|
||||
</DropdownMenuBase.Item>
|
||||
<DropdownMenuBase.Separator class="dropdown-menu-separator" />
|
||||
<DropdownMenuBase.Item class="dropdown-menu-item danger" onclick={remove}>
|
||||
{m.context_remove()}
|
||||
</DropdownMenuBase.Item>
|
||||
{/if}
|
||||
<MenuItems
|
||||
onViewDetails={viewDetails}
|
||||
onReplace={ctx?.canEdit() ? replace : undefined}
|
||||
onRemove={ctx?.canEdit() ? remove : undefined}
|
||||
canEdit={ctx?.canEdit()}
|
||||
variant="dropdown"
|
||||
viewDetailsLabel={m.context_view_details()}
|
||||
replaceLabel={m.context_replace()}
|
||||
removeLabel={m.context_remove()}
|
||||
/>
|
||||
{/snippet}
|
||||
</ContextMenu>
|
||||
</UnitMenuContainer>
|
||||
{:else}
|
||||
{#key `empty-${position}`}
|
||||
<div
|
||||
|
|
@ -301,10 +329,9 @@
|
|||
</div>
|
||||
|
||||
<style lang="scss">
|
||||
@use '$src/themes/colors' as *;
|
||||
@use '$src/themes/colors' as colors;
|
||||
@use '$src/themes/spacing' as spacing;
|
||||
@use '$src/themes/typography' as *;
|
||||
@use '$src/themes/spacing' as *;
|
||||
@use '$src/themes/typography' as typography;
|
||||
@use '$src/themes/rep' as rep;
|
||||
|
||||
.unit {
|
||||
|
|
@ -313,27 +340,44 @@
|
|||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: $unit;
|
||||
gap: spacing.$unit;
|
||||
|
||||
&.empty .name {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.focus-ring-wrapper {
|
||||
position: relative;
|
||||
display: block;
|
||||
transition: transform 0.2s ease-in-out;
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
border-radius: 8px;
|
||||
pointer-events: none;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
&.editable:hover {
|
||||
transform: scale(1.05);
|
||||
}
|
||||
}
|
||||
|
||||
.frame {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
overflow: visible;
|
||||
border-radius: 8px;
|
||||
background: var(--card-bg, #f5f5f5);
|
||||
border: 1px solid transparent;
|
||||
transition: all 0.2s ease-in-out;
|
||||
transition: opacity 0.2s ease-in-out;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
&.editable:hover {
|
||||
opacity: 0.95;
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
|
@ -388,14 +432,14 @@
|
|||
}
|
||||
|
||||
.name {
|
||||
font-size: $font-small;
|
||||
font-size: typography.$font-small;
|
||||
text-align: center;
|
||||
color: $grey-50;
|
||||
color: colors.$grey-50;
|
||||
}
|
||||
|
||||
.perpetuity {
|
||||
position: absolute;
|
||||
z-index: 20;
|
||||
z-index: 40;
|
||||
top: calc(spacing.$unit * -1);
|
||||
right: spacing.$unit-3x;
|
||||
width: spacing.$unit-4x;
|
||||
|
|
@ -461,4 +505,92 @@
|
|||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
// Pulsing focus ring animation
|
||||
@keyframes pulse-focus-ring {
|
||||
0%,
|
||||
100% {
|
||||
box-shadow: 0 0 4px 3px currentColor;
|
||||
}
|
||||
50% {
|
||||
box-shadow: 0 0 4px 6px currentColor;
|
||||
}
|
||||
}
|
||||
|
||||
// Element-specific focus rings
|
||||
.focus-ring-wrapper.is-active::before {
|
||||
animation: pulse-focus-ring 2s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.focus-ring-wrapper.is-active {
|
||||
&.fire::before {
|
||||
@include colors.focus-ring-fire();
|
||||
color: rgba(250, 109, 109, 0.2);
|
||||
}
|
||||
|
||||
&.water::before {
|
||||
@include colors.focus-ring-water();
|
||||
color: rgba(108, 201, 255, 0.2);
|
||||
}
|
||||
|
||||
&.earth::before {
|
||||
@include colors.focus-ring-earth();
|
||||
color: rgba(253, 159, 91, 0.2);
|
||||
}
|
||||
|
||||
&.wind::before {
|
||||
@include colors.focus-ring-wind();
|
||||
color: rgba(62, 228, 137, 0.2);
|
||||
}
|
||||
|
||||
&.light::before {
|
||||
@include colors.focus-ring-light();
|
||||
color: rgba(232, 214, 51, 0.2);
|
||||
}
|
||||
|
||||
&.dark::before {
|
||||
@include colors.focus-ring-dark();
|
||||
color: rgba(222, 123, 255, 0.2);
|
||||
}
|
||||
|
||||
&.neutral::before {
|
||||
@include colors.focus-ring-neutral();
|
||||
color: rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
}
|
||||
|
||||
// Element-specific name colors when active
|
||||
.unit.is-active {
|
||||
.name {
|
||||
font-weight: typography.$bold;
|
||||
}
|
||||
|
||||
&.fire .name {
|
||||
color: colors.$fire--text--light;
|
||||
}
|
||||
|
||||
&.water .name {
|
||||
color: colors.$water--text--light;
|
||||
}
|
||||
|
||||
&.earth .name {
|
||||
color: colors.$earth--text--light;
|
||||
}
|
||||
|
||||
&.wind .name {
|
||||
color: colors.$wind--text--light;
|
||||
}
|
||||
|
||||
&.light .name {
|
||||
color: colors.$light--text--light;
|
||||
}
|
||||
|
||||
&.dark .name {
|
||||
color: colors.$dark--text--light;
|
||||
}
|
||||
|
||||
&.neutral .name {
|
||||
color: colors.$grey-40;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -3,11 +3,12 @@
|
|||
import type { Party } from '$lib/types/api/party'
|
||||
import { getContext } from 'svelte'
|
||||
import Icon from '$lib/components/Icon.svelte'
|
||||
import ContextMenu from '$lib/components/ui/ContextMenu.svelte'
|
||||
import { ContextMenu as ContextMenuBase, DropdownMenu as DropdownMenuBase } from 'bits-ui'
|
||||
import UnitMenuContainer from '$lib/components/ui/menu/UnitMenuContainer.svelte'
|
||||
import MenuItems from '$lib/components/ui/menu/MenuItems.svelte'
|
||||
import UncapIndicator from '$lib/components/uncap/UncapIndicator.svelte'
|
||||
import { getSummonImage } from '$lib/features/database/detail/image'
|
||||
import { openDetailsSidebar } from '$lib/features/details/openDetailsSidebar.svelte'
|
||||
import { sidebar } from '$lib/stores/sidebar.svelte'
|
||||
import * as m from '$lib/paraglide/messages'
|
||||
|
||||
interface Props {
|
||||
|
|
@ -43,6 +44,24 @@
|
|||
return getSummonImage(item?.summon?.granblueId, variant)
|
||||
})
|
||||
|
||||
// Check if this item is currently active in the sidebar
|
||||
let isActive = $derived(item?.id && sidebar.activeItemId === String(item.id))
|
||||
|
||||
// Determine element class for focus ring
|
||||
let elementClass = $derived.by(() => {
|
||||
const element = item?.summon?.element
|
||||
|
||||
switch(element) {
|
||||
case 1: return 'wind'
|
||||
case 2: return 'fire'
|
||||
case 3: return 'water'
|
||||
case 4: return 'earth'
|
||||
case 5: return 'dark'
|
||||
case 6: return 'light'
|
||||
default: return 'neutral'
|
||||
}
|
||||
})
|
||||
|
||||
async function remove() {
|
||||
if (!item?.id) return
|
||||
try {
|
||||
|
|
@ -74,13 +93,14 @@
|
|||
|
||||
</script>
|
||||
|
||||
<div class="unit" class:empty={!item}>
|
||||
<div class="unit {elementClass}" class:empty={!item} class:is-active={isActive}>
|
||||
{#if item}
|
||||
<ContextMenu showGearButton={true}>
|
||||
{#snippet children()}
|
||||
<UnitMenuContainer showGearButton={true}>
|
||||
{#snippet trigger()}
|
||||
<div class="focus-ring-wrapper {elementClass}" class:is-active={isActive} class:editable={ctx?.canEdit()}>
|
||||
{#key item?.id ?? position}
|
||||
<div
|
||||
class="frame summon"
|
||||
class="frame summon {elementClass}"
|
||||
class:main={item?.main || position === -1}
|
||||
class:friend={item?.friend || position === 6}
|
||||
class:cell={!((item?.main || position === -1) || (item?.friend || position === 6))}
|
||||
|
|
@ -88,7 +108,7 @@
|
|||
onclick={() => viewDetails()}
|
||||
>
|
||||
<img
|
||||
class="image"
|
||||
class="image {elementClass}"
|
||||
class:placeholder={!item?.summon?.granblueId}
|
||||
alt={displayName(item?.summon)}
|
||||
src={imageUrl}
|
||||
|
|
@ -101,38 +121,35 @@
|
|||
{/if}
|
||||
</div>
|
||||
{/key}
|
||||
</div>
|
||||
{/snippet}
|
||||
|
||||
{#snippet contextMenu()}
|
||||
<ContextMenuBase.Item class="context-menu-item" onclick={viewDetails}>
|
||||
{m.context_view_details()}
|
||||
</ContextMenuBase.Item>
|
||||
{#if ctx?.canEdit()}
|
||||
<ContextMenuBase.Item class="context-menu-item" onclick={replace}>
|
||||
{m.context_replace()}
|
||||
</ContextMenuBase.Item>
|
||||
<ContextMenuBase.Separator class="context-menu-separator" />
|
||||
<ContextMenuBase.Item class="context-menu-item danger" onclick={remove}>
|
||||
{m.context_remove()}
|
||||
</ContextMenuBase.Item>
|
||||
{/if}
|
||||
<MenuItems
|
||||
onViewDetails={viewDetails}
|
||||
onReplace={ctx?.canEdit() ? replace : undefined}
|
||||
onRemove={ctx?.canEdit() ? remove : undefined}
|
||||
canEdit={ctx?.canEdit()}
|
||||
variant="context"
|
||||
viewDetailsLabel={m.context_view_details()}
|
||||
replaceLabel={m.context_replace()}
|
||||
removeLabel={m.context_remove()}
|
||||
/>
|
||||
{/snippet}
|
||||
|
||||
{#snippet dropdownMenu()}
|
||||
<DropdownMenuBase.Item class="dropdown-menu-item" onclick={viewDetails}>
|
||||
{m.context_view_details()}
|
||||
</DropdownMenuBase.Item>
|
||||
{#if ctx?.canEdit()}
|
||||
<DropdownMenuBase.Item class="dropdown-menu-item" onclick={replace}>
|
||||
{m.context_replace()}
|
||||
</DropdownMenuBase.Item>
|
||||
<DropdownMenuBase.Separator class="dropdown-menu-separator" />
|
||||
<DropdownMenuBase.Item class="dropdown-menu-item danger" onclick={remove}>
|
||||
{m.context_remove()}
|
||||
</DropdownMenuBase.Item>
|
||||
{/if}
|
||||
<MenuItems
|
||||
onViewDetails={viewDetails}
|
||||
onReplace={ctx?.canEdit() ? replace : undefined}
|
||||
onRemove={ctx?.canEdit() ? remove : undefined}
|
||||
canEdit={ctx?.canEdit()}
|
||||
variant="dropdown"
|
||||
viewDetailsLabel={m.context_view_details()}
|
||||
replaceLabel={m.context_replace()}
|
||||
removeLabel={m.context_remove()}
|
||||
/>
|
||||
{/snippet}
|
||||
</ContextMenu>
|
||||
</UnitMenuContainer>
|
||||
{:else}
|
||||
{#key `empty-${position}`}
|
||||
<div
|
||||
|
|
@ -199,9 +216,9 @@
|
|||
</div>
|
||||
|
||||
<style lang="scss">
|
||||
@use '$src/themes/colors' as *;
|
||||
@use '$src/themes/typography' as *;
|
||||
@use '$src/themes/spacing' as *;
|
||||
@use '$src/themes/colors' as colors;
|
||||
@use '$src/themes/typography' as typography;
|
||||
@use '$src/themes/spacing' as spacing;
|
||||
@use '$src/themes/rep' as rep;
|
||||
|
||||
.unit {
|
||||
|
|
@ -210,27 +227,45 @@
|
|||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: $unit;
|
||||
gap: spacing.$unit;
|
||||
|
||||
&.empty .name {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.focus-ring-wrapper {
|
||||
position: relative;
|
||||
display: block;
|
||||
transition: transform 0.2s ease-in-out;
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
border-radius: 8px;
|
||||
pointer-events: none;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
&.editable:hover {
|
||||
transform: scale(1.05);
|
||||
}
|
||||
}
|
||||
|
||||
.frame {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
border-radius: 8px;
|
||||
background: var(--card-bg, #f5f5f5);
|
||||
border: 1px solid transparent;
|
||||
transition: all 0.2s ease-in-out;
|
||||
transition: opacity 0.2s ease-in-out;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
&.editable:hover {
|
||||
opacity: 0.95;
|
||||
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
|
||||
}
|
||||
|
|
@ -270,9 +305,9 @@
|
|||
}
|
||||
|
||||
.name {
|
||||
font-size: $font-small;
|
||||
font-size: typography.$font-small;
|
||||
text-align: center;
|
||||
color: $grey-50;
|
||||
color: colors.$grey-50;
|
||||
}
|
||||
|
||||
.badge {
|
||||
|
|
@ -286,4 +321,91 @@
|
|||
border-radius: 10px;
|
||||
z-index: 3;
|
||||
}
|
||||
|
||||
// Pulsing focus ring animation
|
||||
@keyframes pulse-focus-ring {
|
||||
0%, 100% {
|
||||
box-shadow: 0 0 4px 3px currentColor;
|
||||
}
|
||||
50% {
|
||||
box-shadow: 0 0 4px 6px currentColor;
|
||||
}
|
||||
}
|
||||
|
||||
// Element-specific focus rings
|
||||
.focus-ring-wrapper.is-active::before {
|
||||
animation: pulse-focus-ring 2s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.focus-ring-wrapper.is-active {
|
||||
&.fire::before {
|
||||
@include colors.focus-ring-fire();
|
||||
color: rgba(250, 109, 109, 0.2);
|
||||
}
|
||||
|
||||
&.water::before {
|
||||
@include colors.focus-ring-water();
|
||||
color: rgba(108, 201, 255, 0.2);
|
||||
}
|
||||
|
||||
&.earth::before {
|
||||
@include colors.focus-ring-earth();
|
||||
color: rgba(253, 159, 91, 0.2);
|
||||
}
|
||||
|
||||
&.wind::before {
|
||||
@include colors.focus-ring-wind();
|
||||
color: rgba(62, 228, 137, 0.2);
|
||||
}
|
||||
|
||||
&.light::before {
|
||||
@include colors.focus-ring-light();
|
||||
color: rgba(232, 214, 51, 0.2);
|
||||
}
|
||||
|
||||
&.dark::before {
|
||||
@include colors.focus-ring-dark();
|
||||
color: rgba(222, 123, 255, 0.2);
|
||||
}
|
||||
|
||||
&.neutral::before {
|
||||
@include colors.focus-ring-neutral();
|
||||
color: rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
}
|
||||
|
||||
// Element-specific name colors when active
|
||||
.unit.is-active {
|
||||
.name {
|
||||
font-weight: typography.$bold;
|
||||
}
|
||||
|
||||
&.fire .name {
|
||||
color: colors.$fire--text--light;
|
||||
}
|
||||
|
||||
&.water .name {
|
||||
color: colors.$water--text--light;
|
||||
}
|
||||
|
||||
&.earth .name {
|
||||
color: colors.$earth--text--light;
|
||||
}
|
||||
|
||||
&.wind .name {
|
||||
color: colors.$wind--text--light;
|
||||
}
|
||||
|
||||
&.light .name {
|
||||
color: colors.$light--text--light;
|
||||
}
|
||||
|
||||
&.dark .name {
|
||||
color: colors.$dark--text--light;
|
||||
}
|
||||
|
||||
&.neutral .name {
|
||||
color: colors.$grey-40;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -3,12 +3,13 @@
|
|||
import type { Party } from '$lib/types/api/party'
|
||||
import { getContext } from 'svelte'
|
||||
import Icon from '$lib/components/Icon.svelte'
|
||||
import ContextMenu from '$lib/components/ui/ContextMenu.svelte'
|
||||
import { ContextMenu as ContextMenuBase, DropdownMenu as DropdownMenuBase } from 'bits-ui'
|
||||
import UnitMenuContainer from '$lib/components/ui/menu/UnitMenuContainer.svelte'
|
||||
import MenuItems from '$lib/components/ui/menu/MenuItems.svelte'
|
||||
import UncapIndicator from '$lib/components/uncap/UncapIndicator.svelte'
|
||||
import { getWeaponImage } from '$lib/features/database/detail/image'
|
||||
import { openDetailsSidebar } from '$lib/features/details/openDetailsSidebar.svelte'
|
||||
import { getAwakeningImage, getWeaponKeyImages, getAxSkillImages } from '$lib/utils/modifiers'
|
||||
import { sidebar } from '$lib/stores/sidebar.svelte'
|
||||
import * as m from '$lib/paraglide/messages'
|
||||
|
||||
interface Props {
|
||||
|
|
@ -42,7 +43,7 @@
|
|||
const variant = isMain ? 'main' : 'grid'
|
||||
|
||||
// For weapons with null element that have an instance element, use it
|
||||
const element = (item?.weapon?.element === 0 && item?.element) ? item.element : undefined
|
||||
const element = item?.weapon?.element === 0 && item?.element ? item.element : undefined
|
||||
|
||||
return getWeaponImage(item?.weapon?.granblueId, variant, element)
|
||||
})
|
||||
|
|
@ -64,12 +65,43 @@
|
|||
// Get AX skill images using utility
|
||||
let axSkillImages = $derived(getAxSkillImages(item?.ax))
|
||||
|
||||
// Check if this item is currently active in the sidebar
|
||||
let isActive = $derived(item?.id && sidebar.activeItemId === String(item.id))
|
||||
|
||||
// Determine element class for focus ring
|
||||
let elementClass = $derived.by(() => {
|
||||
// For weapons with null element that have an instance element, use it
|
||||
const element =
|
||||
item?.weapon?.element === 0 && item?.element ? item.element : item?.weapon?.element
|
||||
|
||||
switch (element) {
|
||||
case 1:
|
||||
return 'wind'
|
||||
case 2:
|
||||
return 'fire'
|
||||
case 3:
|
||||
return 'water'
|
||||
case 4:
|
||||
return 'earth'
|
||||
case 5:
|
||||
return 'dark'
|
||||
case 6:
|
||||
return 'light'
|
||||
default:
|
||||
return 'neutral'
|
||||
}
|
||||
})
|
||||
|
||||
async function remove() {
|
||||
if (!item?.id) return
|
||||
try {
|
||||
const party = ctx.getParty()
|
||||
const editKey = ctx.getEditKey()
|
||||
const updated = await ctx.services.gridService.removeWeapon(party.id, item.id as any, editKey || undefined)
|
||||
const updated = await ctx.services.gridService.removeWeapon(
|
||||
party.id,
|
||||
item.id as any,
|
||||
editKey || undefined
|
||||
)
|
||||
if (updated) {
|
||||
ctx.updateParty(updated)
|
||||
}
|
||||
|
|
@ -91,17 +123,26 @@
|
|||
ctx.openPicker({ type: 'weapon', position, item })
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
<div class="unit" class:empty={!item} class:extra={position >= 9}>
|
||||
<div
|
||||
class="unit {elementClass}"
|
||||
class:empty={!item}
|
||||
class:extra={position >= 9}
|
||||
class:is-active={isActive}
|
||||
>
|
||||
{#if item}
|
||||
<ContextMenu showGearButton={true}>
|
||||
{#snippet children()}
|
||||
<UnitMenuContainer showGearButton={true}>
|
||||
{#snippet trigger()}
|
||||
<div
|
||||
class="focus-ring-wrapper {elementClass}"
|
||||
class:is-active={isActive}
|
||||
class:editable={ctx?.canEdit()}
|
||||
class:main={item?.mainhand || position === -1}
|
||||
>
|
||||
{#key item?.id ?? position}
|
||||
<div
|
||||
class="frame weapon"
|
||||
class="frame weapon {elementClass}"
|
||||
class:main={item?.mainhand || position === -1}
|
||||
class:cell={!(item?.mainhand || position === -1)}
|
||||
class:extra={position >= 9}
|
||||
|
|
@ -126,45 +167,42 @@
|
|||
</div>
|
||||
</div>
|
||||
<img
|
||||
class="image"
|
||||
class="image {elementClass}"
|
||||
class:placeholder={!item?.weapon?.granblueId}
|
||||
alt={displayName(item?.weapon)}
|
||||
src={imageUrl}
|
||||
/>
|
||||
</div>
|
||||
{/key}
|
||||
</div>
|
||||
{/snippet}
|
||||
|
||||
{#snippet contextMenu()}
|
||||
<ContextMenuBase.Item class="context-menu-item" onclick={viewDetails}>
|
||||
{m.context_view_details()}
|
||||
</ContextMenuBase.Item>
|
||||
{#if ctx?.canEdit()}
|
||||
<ContextMenuBase.Item class="context-menu-item" onclick={replace}>
|
||||
{m.context_replace()}
|
||||
</ContextMenuBase.Item>
|
||||
<ContextMenuBase.Separator class="context-menu-separator" />
|
||||
<ContextMenuBase.Item class="context-menu-item danger" onclick={remove}>
|
||||
{m.context_remove()}
|
||||
</ContextMenuBase.Item>
|
||||
{/if}
|
||||
<MenuItems
|
||||
onViewDetails={viewDetails}
|
||||
onReplace={ctx?.canEdit() ? replace : undefined}
|
||||
onRemove={ctx?.canEdit() ? remove : undefined}
|
||||
canEdit={ctx?.canEdit()}
|
||||
variant="context"
|
||||
viewDetailsLabel={m.context_view_details()}
|
||||
replaceLabel={m.context_replace()}
|
||||
removeLabel={m.context_remove()}
|
||||
/>
|
||||
{/snippet}
|
||||
|
||||
{#snippet dropdownMenu()}
|
||||
<DropdownMenuBase.Item class="dropdown-menu-item" onclick={viewDetails}>
|
||||
{m.context_view_details()}
|
||||
</DropdownMenuBase.Item>
|
||||
{#if ctx?.canEdit()}
|
||||
<DropdownMenuBase.Item class="dropdown-menu-item" onclick={replace}>
|
||||
{m.context_replace()}
|
||||
</DropdownMenuBase.Item>
|
||||
<DropdownMenuBase.Separator class="dropdown-menu-separator" />
|
||||
<DropdownMenuBase.Item class="dropdown-menu-item danger" onclick={remove}>
|
||||
{m.context_remove()}
|
||||
</DropdownMenuBase.Item>
|
||||
{/if}
|
||||
<MenuItems
|
||||
onViewDetails={viewDetails}
|
||||
onReplace={ctx?.canEdit() ? replace : undefined}
|
||||
onRemove={ctx?.canEdit() ? remove : undefined}
|
||||
canEdit={ctx?.canEdit()}
|
||||
variant="dropdown"
|
||||
viewDetailsLabel={m.context_view_details()}
|
||||
replaceLabel={m.context_replace()}
|
||||
removeLabel={m.context_remove()}
|
||||
/>
|
||||
{/snippet}
|
||||
</ContextMenu>
|
||||
</UnitMenuContainer>
|
||||
{:else}
|
||||
{#key `empty-${position}`}
|
||||
<div
|
||||
|
|
@ -173,12 +211,15 @@
|
|||
class:cell={position !== -1}
|
||||
class:extra={position >= 9}
|
||||
class:editable={ctx?.canEdit()}
|
||||
onclick={() => ctx?.canEdit() && ctx?.openPicker && ctx.openPicker({ type: 'weapon', position, item })}
|
||||
onclick={() =>
|
||||
ctx?.canEdit() && ctx?.openPicker && ctx.openPicker({ type: 'weapon', position, item })}
|
||||
>
|
||||
<img
|
||||
class="image placeholder"
|
||||
alt=""
|
||||
src={position === -1 ? '/images/placeholders/placeholder-weapon-main.png' : '/images/placeholders/placeholder-weapon-grid.png'}
|
||||
src={position === -1
|
||||
? '/images/placeholders/placeholder-weapon-main.png'
|
||||
: '/images/placeholders/placeholder-weapon-grid.png'}
|
||||
/>
|
||||
{#if ctx?.canEdit()}
|
||||
<span class="icon">
|
||||
|
|
@ -201,7 +242,12 @@
|
|||
if (!item?.id || !ctx) return
|
||||
try {
|
||||
const editKey = ctx.getEditKey()
|
||||
const updated = await ctx.services.gridService.updateWeaponUncap(item.id, level, undefined, editKey || undefined)
|
||||
const updated = await ctx.services.gridService.updateWeaponUncap(
|
||||
item.id,
|
||||
level,
|
||||
undefined,
|
||||
editKey || undefined
|
||||
)
|
||||
if (updated) {
|
||||
ctx.updateParty(updated)
|
||||
}
|
||||
|
|
@ -216,7 +262,12 @@
|
|||
const editKey = ctx.getEditKey()
|
||||
// When setting transcendence > 0, also set uncap to max (6)
|
||||
const maxUncap = stage > 0 ? 6 : undefined
|
||||
const updated = await ctx.services.gridService.updateWeaponUncap(item.id, maxUncap, stage, editKey || undefined)
|
||||
const updated = await ctx.services.gridService.updateWeaponUncap(
|
||||
item.id,
|
||||
maxUncap,
|
||||
stage,
|
||||
editKey || undefined
|
||||
)
|
||||
if (updated) {
|
||||
ctx.updateParty(updated)
|
||||
}
|
||||
|
|
@ -231,10 +282,10 @@
|
|||
</div>
|
||||
|
||||
<style lang="scss">
|
||||
@use '$src/themes/colors' as *;
|
||||
@use '$src/themes/typography' as *;
|
||||
@use '$src/themes/spacing' as *;
|
||||
@use '$src/themes/layout' as *;
|
||||
@use '$src/themes/colors' as colors;
|
||||
@use '$src/themes/typography' as typography;
|
||||
@use '$src/themes/spacing' as spacing;
|
||||
@use '$src/themes/layout' as layout;
|
||||
@use '$src/themes/rep' as rep;
|
||||
|
||||
.unit {
|
||||
|
|
@ -243,7 +294,7 @@
|
|||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: $unit;
|
||||
gap: spacing.$unit;
|
||||
|
||||
&.empty .name {
|
||||
display: none;
|
||||
|
|
@ -263,20 +314,42 @@
|
|||
}
|
||||
|
||||
.name {
|
||||
font-weight: $medium;
|
||||
font-weight: typography.$medium;
|
||||
color: var(--extra-purple-text);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.focus-ring-wrapper {
|
||||
position: relative;
|
||||
display: block;
|
||||
transition: transform 0.2s ease-in-out;
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
border-radius: 8px;
|
||||
pointer-events: none;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
&.editable:hover {
|
||||
transform: layout.$scale-wide;
|
||||
}
|
||||
|
||||
&.editable.main:hover {
|
||||
transform: layout.$scale-tall;
|
||||
}
|
||||
}
|
||||
|
||||
.frame {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
border-radius: 8px;
|
||||
background: var(--card-bg, #f5f5f5);
|
||||
border: 1px solid transparent;
|
||||
transition: all 0.2s ease-in-out;
|
||||
transition: opacity 0.2s ease-in-out;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
|
@ -284,20 +357,17 @@
|
|||
|
||||
&.editable:hover {
|
||||
opacity: 0.95;
|
||||
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
|
||||
transform: $scale-wide;
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
}
|
||||
|
||||
.frame.weapon.main {
|
||||
@include rep.aspect(rep.$weapon-main-w, rep.$weapon-main-h);
|
||||
|
||||
&.editable:hover {
|
||||
transform: $scale-tall;
|
||||
}
|
||||
}
|
||||
|
||||
.frame.weapon.cell { @include rep.aspect(rep.$weapon-cell-w, rep.$weapon-cell-h); }
|
||||
.frame.weapon.cell {
|
||||
@include rep.aspect(rep.$weapon-cell-w, rep.$weapon-cell-h);
|
||||
}
|
||||
|
||||
.image {
|
||||
position: relative;
|
||||
|
|
@ -324,9 +394,9 @@
|
|||
}
|
||||
|
||||
.name {
|
||||
font-size: $font-small;
|
||||
font-size: typography.$font-small;
|
||||
text-align: center;
|
||||
color: $grey-50;
|
||||
color: colors.$grey-50;
|
||||
}
|
||||
|
||||
.modifiers {
|
||||
|
|
@ -345,8 +415,8 @@
|
|||
.skills {
|
||||
position: absolute;
|
||||
display: flex;
|
||||
gap: calc($unit / 4);
|
||||
padding: calc($unit / 2);
|
||||
gap: calc(spacing.$unit / 4);
|
||||
padding: calc(spacing.$unit / 2);
|
||||
|
||||
.skill {
|
||||
width: 20%;
|
||||
|
|
@ -387,4 +457,92 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Pulsing focus ring animation
|
||||
@keyframes pulse-focus-ring {
|
||||
0%,
|
||||
100% {
|
||||
box-shadow: 0 0 4px 3px currentColor;
|
||||
}
|
||||
50% {
|
||||
box-shadow: 0 0 4px 6px currentColor;
|
||||
}
|
||||
}
|
||||
|
||||
// Element-specific focus rings
|
||||
.focus-ring-wrapper.is-active::before {
|
||||
animation: pulse-focus-ring 2s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.focus-ring-wrapper.is-active {
|
||||
&.fire::before {
|
||||
@include colors.focus-ring-fire();
|
||||
color: rgba(250, 109, 109, 0.2);
|
||||
}
|
||||
|
||||
&.water::before {
|
||||
@include colors.focus-ring-water();
|
||||
color: rgba(108, 201, 255, 0.2);
|
||||
}
|
||||
|
||||
&.earth::before {
|
||||
@include colors.focus-ring-earth();
|
||||
color: rgba(253, 159, 91, 0.2);
|
||||
}
|
||||
|
||||
&.wind::before {
|
||||
@include colors.focus-ring-wind();
|
||||
color: rgba(62, 228, 137, 0.2);
|
||||
}
|
||||
|
||||
&.light::before {
|
||||
@include colors.focus-ring-light();
|
||||
color: rgba(232, 214, 51, 0.2);
|
||||
}
|
||||
|
||||
&.dark::before {
|
||||
@include colors.focus-ring-dark();
|
||||
color: rgba(222, 123, 255, 0.2);
|
||||
}
|
||||
|
||||
&.neutral::before {
|
||||
@include colors.focus-ring-neutral();
|
||||
color: rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
}
|
||||
|
||||
// Element-specific name colors when active
|
||||
.unit.is-active {
|
||||
.name {
|
||||
font-weight: typography.$bold;
|
||||
}
|
||||
|
||||
&.fire .name {
|
||||
color: colors.$fire--text--light;
|
||||
}
|
||||
|
||||
&.water .name {
|
||||
color: colors.$water--text--light;
|
||||
}
|
||||
|
||||
&.earth .name {
|
||||
color: colors.$earth--text--light;
|
||||
}
|
||||
|
||||
&.wind .name {
|
||||
color: colors.$wind--text--light;
|
||||
}
|
||||
|
||||
&.light .name {
|
||||
color: colors.$light--text--light;
|
||||
}
|
||||
|
||||
&.dark .name {
|
||||
color: colors.$dark--text--light;
|
||||
}
|
||||
|
||||
&.neutral .name {
|
||||
color: colors.$grey-40;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -10,6 +10,7 @@ interface SidebarState {
|
|||
component?: Component
|
||||
componentProps?: Record<string, any>
|
||||
scrollable?: boolean
|
||||
activeItemId?: string
|
||||
}
|
||||
|
||||
class SidebarStore {
|
||||
|
|
@ -31,17 +32,27 @@ class SidebarStore {
|
|||
this.state.scrollable = scrollable
|
||||
}
|
||||
|
||||
openWithComponent(title: string, component: Component, props?: Record<string, any>, scrollable = true) {
|
||||
openWithComponent(
|
||||
title: string,
|
||||
component: Component,
|
||||
props?: Record<string, any>,
|
||||
scrollable = true
|
||||
) {
|
||||
this.state.open = true
|
||||
this.state.title = title
|
||||
this.state.component = component
|
||||
this.state.componentProps = props
|
||||
this.state.content = undefined
|
||||
this.state.scrollable = scrollable
|
||||
// Extract and store the item ID if it's a details sidebar
|
||||
if (props?.item?.id) {
|
||||
this.state.activeItemId = String(props.item.id)
|
||||
}
|
||||
}
|
||||
|
||||
close() {
|
||||
this.state.open = false
|
||||
this.state.activeItemId = undefined
|
||||
// Clear content after animation
|
||||
setTimeout(() => {
|
||||
this.state.title = undefined
|
||||
|
|
@ -82,6 +93,10 @@ class SidebarStore {
|
|||
get scrollable() {
|
||||
return this.state.scrollable ?? true
|
||||
}
|
||||
|
||||
get activeItemId() {
|
||||
return this.state.activeItemId
|
||||
}
|
||||
}
|
||||
|
||||
export const sidebar = new SidebarStore()
|
||||
|
|
@ -1,6 +1,6 @@
|
|||
<script lang="ts">
|
||||
import ContextMenu from '$lib/components/ui/ContextMenu.svelte'
|
||||
import { ContextMenu as ContextMenuBase, DropdownMenu as DropdownMenuBase } from 'bits-ui'
|
||||
import UnitMenuContainer from '$lib/components/ui/menu/UnitMenuContainer.svelte'
|
||||
import MenuItems from '$lib/components/ui/menu/MenuItems.svelte'
|
||||
|
||||
let message = $state('No action yet')
|
||||
|
||||
|
|
@ -31,8 +31,8 @@
|
|||
|
||||
<div class="test-container">
|
||||
<div class="test-unit">
|
||||
<ContextMenu showGearButton={true}>
|
||||
{#snippet children()}
|
||||
<UnitMenuContainer showGearButton={true}>
|
||||
{#snippet trigger()}
|
||||
<img
|
||||
src="/images/placeholders/placeholder-weapon-grid.png"
|
||||
alt="Test weapon"
|
||||
|
|
@ -41,31 +41,31 @@
|
|||
{/snippet}
|
||||
|
||||
{#snippet contextMenu()}
|
||||
<ContextMenuBase.Item class="context-menu-item" onclick={handleViewDetails}>
|
||||
View Details
|
||||
</ContextMenuBase.Item>
|
||||
<ContextMenuBase.Item class="context-menu-item" onclick={handleReplace}>
|
||||
Replace
|
||||
</ContextMenuBase.Item>
|
||||
<ContextMenuBase.Separator class="context-menu-separator" />
|
||||
<ContextMenuBase.Item class="context-menu-item danger" onclick={handleRemove}>
|
||||
Remove
|
||||
</ContextMenuBase.Item>
|
||||
<MenuItems
|
||||
onViewDetails={handleViewDetails}
|
||||
onReplace={handleReplace}
|
||||
onRemove={handleRemove}
|
||||
canEdit={true}
|
||||
variant="context"
|
||||
viewDetailsLabel="View Details"
|
||||
replaceLabel="Replace"
|
||||
removeLabel="Remove"
|
||||
/>
|
||||
{/snippet}
|
||||
|
||||
{#snippet dropdownMenu()}
|
||||
<DropdownMenuBase.Item class="dropdown-menu-item" onclick={handleViewDetails}>
|
||||
View Details
|
||||
</DropdownMenuBase.Item>
|
||||
<DropdownMenuBase.Item class="dropdown-menu-item" onclick={handleReplace}>
|
||||
Replace
|
||||
</DropdownMenuBase.Item>
|
||||
<DropdownMenuBase.Separator class="dropdown-menu-separator" />
|
||||
<DropdownMenuBase.Item class="dropdown-menu-item danger" onclick={handleRemove}>
|
||||
Remove
|
||||
</DropdownMenuBase.Item>
|
||||
<MenuItems
|
||||
onViewDetails={handleViewDetails}
|
||||
onReplace={handleReplace}
|
||||
onRemove={handleRemove}
|
||||
canEdit={true}
|
||||
variant="dropdown"
|
||||
viewDetailsLabel="View Details"
|
||||
replaceLabel="Replace"
|
||||
removeLabel="Remove"
|
||||
/>
|
||||
{/snippet}
|
||||
</ContextMenu>
|
||||
</UnitMenuContainer>
|
||||
<div class="test-label">Hover me or right-click</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -694,3 +694,46 @@ $light--shadow--dark--hover: color.adjust($light-text-00, $alpha: -0.3);
|
|||
border: $width solid $color;
|
||||
box-shadow: 0 0 0 2px rgba($color, 0.2);
|
||||
}
|
||||
|
||||
// Element-specific focus ring mixins
|
||||
@mixin focus-ring-fire($width: 3px) {
|
||||
outline: none;
|
||||
border: $width solid var(--fire-accent);
|
||||
box-shadow: 0 0 4px 6px rgba(250, 109, 109, 0.2);
|
||||
}
|
||||
|
||||
@mixin focus-ring-water($width: 3px) {
|
||||
outline: none;
|
||||
border: $width solid var(--water-accent);
|
||||
box-shadow: 0 0 4px 6px rgba(108, 201, 255, 0.2);
|
||||
}
|
||||
|
||||
@mixin focus-ring-earth($width: 3px) {
|
||||
outline: none;
|
||||
border: $width solid var(--earth-accent);
|
||||
box-shadow: 0 0 4px 6px rgba(253, 159, 91, 0.2);
|
||||
}
|
||||
|
||||
@mixin focus-ring-wind($width: 3px) {
|
||||
outline: none;
|
||||
border: $width solid var(--wind-accent);
|
||||
box-shadow: 0 0 4px 6px rgba(62, 228, 137, 0.2);
|
||||
}
|
||||
|
||||
@mixin focus-ring-light($width: 3px) {
|
||||
outline: none;
|
||||
border: $width solid var(--light-accent);
|
||||
box-shadow: 0 0 4px 6px rgba(232, 214, 51, 0.2);
|
||||
}
|
||||
|
||||
@mixin focus-ring-dark($width: 3px) {
|
||||
outline: none;
|
||||
border: $width solid var(--dark-accent);
|
||||
box-shadow: 0 0 4px 6px rgba(222, 123, 255, 0.2);
|
||||
}
|
||||
|
||||
@mixin focus-ring-neutral($width: 3px) {
|
||||
outline: none;
|
||||
border: $width solid var(--null-accent);
|
||||
box-shadow: 0 0 4px 6px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -257,6 +257,7 @@
|
|||
--null-text-hover: #{colors.$null--text--hover--light};
|
||||
--null-shadow: #{colors.$null--shadow--light};
|
||||
--null-shadow-hover: #{colors.$null--shadow--light--hover};
|
||||
--null-accent: #{colors.$grey-70};
|
||||
|
||||
// Light - Element button colors
|
||||
--null-button-bg: #{colors.$grey-55};
|
||||
|
|
@ -302,6 +303,7 @@
|
|||
--wind-text-hover: #{colors.$wind--text--hover--light};
|
||||
--wind-shadow: #{colors.$wind--shadow--light};
|
||||
--wind-shadow-hover: #{colors.$wind--shadow--light--hover};
|
||||
--wind-accent: #{colors.$wind--bg--light};
|
||||
|
||||
--fire-bg: #{colors.$fire--bg--light};
|
||||
--fire-bg-hover: #{colors.$fire--bg--hover--light};
|
||||
|
|
@ -312,6 +314,7 @@
|
|||
--fire-text-hover: #{colors.$fire--text--hover--light};
|
||||
--fire-shadow: #{colors.$fire--shadow--light};
|
||||
--fire-shadow-hover: #{colors.$fire--shadow--light--hover};
|
||||
--fire-accent: #{colors.$fire--bg--light};
|
||||
|
||||
--water-bg: #{colors.$water--bg--light};
|
||||
--water-bg-hover: #{colors.$water--bg--hover--light};
|
||||
|
|
@ -322,6 +325,7 @@
|
|||
--water-text-hover: #{colors.$water--text--hover--light};
|
||||
--water-shadow: #{colors.$water--shadow--light};
|
||||
--water-shadow-hover: #{colors.$water--shadow--light--hover};
|
||||
--water-accent: #{colors.$water--bg--light};
|
||||
|
||||
--earth-bg: #{colors.$earth--bg--light};
|
||||
--earth-bg-hover: #{colors.$earth--bg--hover--light};
|
||||
|
|
@ -332,6 +336,7 @@
|
|||
--earth-text-hover: #{colors.$earth--text--hover--light};
|
||||
--earth-shadow: #{colors.$earth--shadow--light};
|
||||
--earth-shadow-hover: #{colors.$earth--shadow--light--hover};
|
||||
--earth-accent: #{colors.$earth--bg--light};
|
||||
|
||||
--dark-bg: #{colors.$dark--bg--light};
|
||||
--dark-bg-hover: #{colors.$dark--bg--hover--light};
|
||||
|
|
@ -342,6 +347,7 @@
|
|||
--dark-text-hover: #{colors.$dark--text--hover--light};
|
||||
--dark-shadow: #{colors.$dark--shadow--light};
|
||||
--dark-shadow-hover: #{colors.$dark--shadow--light--hover};
|
||||
--dark-accent: #{colors.$dark--bg--light};
|
||||
|
||||
--light-bg: #{colors.$light--bg--light};
|
||||
--light-bg-hover: #{colors.$light--bg--hover--light};
|
||||
|
|
@ -352,6 +358,7 @@
|
|||
--light-text-hover: #{colors.$light--text--hover--light};
|
||||
--light-shadow: #{colors.$light--shadow--light};
|
||||
--light-shadow-hover: #{colors.$light--shadow--light--hover};
|
||||
--light-accent: #{colors.$light--bg--light};
|
||||
|
||||
// Gradients
|
||||
--hero-gradient: #{effects.$hero--gradient--light};
|
||||
|
|
@ -586,6 +593,7 @@
|
|||
--null-text-hover: #{colors.$null--text--hover--dark};
|
||||
--null-shadow: #{colors.$null--shadow--dark};
|
||||
--null-shadow-hover: #{colors.$null--shadow--dark--hover};
|
||||
--null-accent: #{colors.$grey-70};
|
||||
|
||||
// Dark - Element button colors (same as light theme)
|
||||
--null-button-bg: #{colors.$grey-55};
|
||||
|
|
@ -632,6 +640,7 @@
|
|||
--wind-text-hover: #{colors.$wind--text--hover--dark};
|
||||
--wind-shadow: #{colors.$wind--shadow--dark};
|
||||
--wind-shadow-hover: #{colors.$wind--shadow--dark--hover};
|
||||
--wind-accent: #{colors.$wind--bg--dark};
|
||||
|
||||
--fire-bg: #{colors.$fire--bg--dark};
|
||||
--fire-bg-hover: #{colors.$fire--bg--hover--dark};
|
||||
|
|
@ -642,6 +651,7 @@
|
|||
--fire-text-hover: #{colors.$fire--text--hover--dark};
|
||||
--fire-shadow: #{colors.$fire--shadow--dark};
|
||||
--fire-shadow-hover: #{colors.$fire--shadow--dark--hover};
|
||||
--fire-accent: #{colors.$fire--bg--dark};
|
||||
|
||||
--water-bg: #{colors.$water--bg--dark};
|
||||
--water-bg-hover: #{colors.$water--bg--hover--dark};
|
||||
|
|
@ -652,6 +662,7 @@
|
|||
--water-text-hover: #{colors.$water--text--hover--dark};
|
||||
--water-shadow: #{colors.$water--shadow--dark};
|
||||
--water-shadow-hover: #{colors.$water--shadow--dark--hover};
|
||||
--water-accent: #{colors.$water--bg--dark};
|
||||
|
||||
--earth-bg: #{colors.$earth--bg--dark};
|
||||
--earth-bg-hover: #{colors.$earth--bg--hover--dark};
|
||||
|
|
@ -662,6 +673,7 @@
|
|||
--earth-text-hover: #{colors.$earth--text--hover--dark};
|
||||
--earth-shadow: #{colors.$earth--shadow--dark};
|
||||
--earth-shadow-hover: #{colors.$earth--shadow--dark--hover};
|
||||
--earth-accent: #{colors.$earth--bg--dark};
|
||||
|
||||
--dark-bg: #{colors.$dark--bg--dark};
|
||||
--dark-bg-hover: #{colors.$dark--bg--hover--dark};
|
||||
|
|
@ -672,6 +684,7 @@
|
|||
--dark-text-hover: #{colors.$dark--text--hover--dark};
|
||||
--dark-shadow: #{colors.$dark--shadow--dark};
|
||||
--dark-shadow-hover: #{colors.$dark--shadow--dark--hover};
|
||||
--dark-accent: #{colors.$dark--bg--dark};
|
||||
|
||||
--light-bg: #{colors.$light--bg--dark};
|
||||
--light-bg-hover: #{colors.$light--bg--hover--dark};
|
||||
|
|
@ -682,6 +695,7 @@
|
|||
--light-text-hover: #{colors.$light--text--hover--dark};
|
||||
--light-shadow: #{colors.$light--shadow--dark};
|
||||
--light-shadow-hover: #{colors.$light--shadow--dark--hover};
|
||||
--light-accent: #{colors.$light--bg--dark};
|
||||
|
||||
// Gradients
|
||||
--hero-gradient: #{effects.$hero--gradient--dark};
|
||||
|
|
|
|||
Loading…
Reference in a new issue