diff options
Diffstat (limited to 'packages/frontend/src/components/MkContainer.vue')
| -rw-r--r-- | packages/frontend/src/components/MkContainer.vue | 36 |
1 files changed, 24 insertions, 12 deletions
diff --git a/packages/frontend/src/components/MkContainer.vue b/packages/frontend/src/components/MkContainer.vue index 30a9b26bef..5c88ac3bf6 100644 --- a/packages/frontend/src/components/MkContainer.vue +++ b/packages/frontend/src/components/MkContainer.vue @@ -19,10 +19,10 @@ SPDX-License-Identifier: AGPL-3.0-only </div> </header> <Transition - :enterActiveClass="defaultStore.state.animation ? $style.transition_toggle_enterActive : ''" - :leaveActiveClass="defaultStore.state.animation ? $style.transition_toggle_leaveActive : ''" - :enterFromClass="defaultStore.state.animation ? $style.transition_toggle_enterFrom : ''" - :leaveToClass="defaultStore.state.animation ? $style.transition_toggle_leaveTo : ''" + :enterActiveClass="prefer.s.animation ? $style.transition_toggle_enterActive : ''" + :leaveActiveClass="prefer.s.animation ? $style.transition_toggle_leaveActive : ''" + :enterFromClass="prefer.s.animation ? $style.transition_toggle_enterFrom : ''" + :leaveToClass="prefer.s.animation ? $style.transition_toggle_leaveTo : ''" @enter="enter" @afterEnter="afterEnter" @leave="leave" @@ -39,8 +39,8 @@ SPDX-License-Identifier: AGPL-3.0-only </template> <script lang="ts" setup> -import { onMounted, onUnmounted, ref, shallowRef, watch } from 'vue'; -import { defaultStore } from '@/store.js'; +import { onMounted, onUnmounted, ref, useTemplateRef, watch } from 'vue'; +import { prefer } from '@/preferences.js'; import { i18n } from '@/i18n.js'; const props = withDefaults(defineProps<{ @@ -58,9 +58,9 @@ const props = withDefaults(defineProps<{ maxHeight: null, }); -const rootEl = shallowRef<HTMLElement>(); -const contentEl = shallowRef<HTMLElement>(); -const headerEl = shallowRef<HTMLElement>(); +const rootEl = useTemplateRef('rootEl'); +const contentEl = useTemplateRef('contentEl'); +const headerEl = useTemplateRef('headerEl'); const showBody = ref(props.expanded); const ignoreOmit = ref(false); const omitted = ref(false); @@ -180,11 +180,15 @@ onUnmounted(() => { top: var(--MI-stickyTop, 0px); left: 0; color: var(--MI_THEME-panelHeaderFg); - background: var(--MI_THEME-panelHeaderBg); - border-bottom: solid 0.5px var(--MI_THEME-panelHeaderDivider); + background: color-mix(in srgb, var(--MI_THEME-panelHeaderBg) 35%, transparent); z-index: 2; line-height: 1.4em; - background: color-mix(in srgb, var(--MI_THEME-panelHeaderBg) 35%, transparent); +} + +@container style(--MI_THEME-panelHeaderBg: var(--MI_THEME-panel)) { + .header { + box-shadow: 0 0.5px 0 0 light-dark(#0002, #fff2); + } } .title { @@ -216,6 +220,14 @@ onUnmounted(() => { .content { --MI-stickyTop: 0px; + /* + 理屈は知らないけど、ここでbackgroundを設定しておかないと + スクロールコンテナーが少なくともChromeにおいて + main thread scrolling になってしまい、パフォーマンスが(多分)落ちる。 + backgroundが透明だと裏側を描画しないといけなくなるとかそういう理由かもしれない + */ + background: var(--MI_THEME-panel); + &.omitted { position: relative; max-height: var(--maxHeight); |