mirror of
https://github.com/sky-systems/sky_phone.git
synced 2026-09-04 17:23:25 +00:00
ENH - add authentic App Store previews
This commit is contained in:
smx.pusha
@@ -7,6 +7,10 @@ const source = readFileSync(
|
||||
fileURLToPath(new URL('./AppStoreDetail.vue', import.meta.url)),
|
||||
'utf8',
|
||||
)
|
||||
const previewSource = readFileSync(
|
||||
fileURLToPath(new URL('./AppStorePreviewCard.vue', import.meta.url)),
|
||||
'utf8',
|
||||
)
|
||||
|
||||
describe('AppStoreDetail contract', () => {
|
||||
it('renders an Apple-style product page with metadata and direct action', () => {
|
||||
@@ -29,24 +33,34 @@ describe('AppStoreDetail contract', () => {
|
||||
/\.store-detail__hero \.store-detail__action--icon\s*\{[^}]*width:\s*54px;[^}]*min-width:\s*54px;[^}]*min-height:\s*30px;[^}]*height:\s*30px;/s,
|
||||
)
|
||||
expect(source).not.toContain(':has(')
|
||||
expect(previewSource).not.toContain('color-mix(')
|
||||
expect(source).toMatch(
|
||||
/\.store-detail\s*\{[^}]*padding:\s*var\(--sky-space-3\) 0 var\(--sky-space-6\)/s,
|
||||
)
|
||||
})
|
||||
|
||||
it('generates three app-specific preview panels with visible test data', () => {
|
||||
it('renders five app-specific screenshot and information panels', () => {
|
||||
expect(source).toContain('class="store-detail__previews"')
|
||||
expect(source).toContain('store-detail-preview--overview')
|
||||
expect(source).toContain('store-detail-preview--community')
|
||||
expect(source).toContain('store-detail-preview--insights')
|
||||
expect(
|
||||
source.match(/:src="app\.iconImage"/g)?.length,
|
||||
).toBeGreaterThanOrEqual(4)
|
||||
expect(source).toContain('24')
|
||||
expect(source).toContain('87%')
|
||||
expect(source).toContain('+18%')
|
||||
expect(source).toContain('<AppStorePreviewCard')
|
||||
expect(source).toContain('v-for="screen in previewScreens"')
|
||||
expect(source).toContain('getAppStorePreviewImage')
|
||||
expect(source).toContain(':preview-image="previewImage"')
|
||||
expect(previewSource).toContain('v-if="previewImage && screen < 3"')
|
||||
expect(previewSource).toContain(':src="previewImage"')
|
||||
expect(previewSource).toContain('store-detail-preview__screenshot')
|
||||
expect(previewSource).not.toContain("visual.scene ===")
|
||||
expect(source).toContain('getAppStorePreviewVisual')
|
||||
expect(source).toContain('Apps.appStore.previews.${props.app.id}')
|
||||
expect(previewSource).toContain(':src="iconImage"')
|
||||
expect(source).toMatch(
|
||||
/\.store-detail-preview\s*\{[^}]*width:\s*224px[^}]*height:\s*354px/s,
|
||||
/previewScreens\s*=\s*\[0, 1, 2, 3, 4\] as const/,
|
||||
)
|
||||
expect(previewSource).toContain('screen === 3')
|
||||
expect(previewSource).toContain('screen === 4')
|
||||
expect(previewSource).toContain('store-detail-preview__details')
|
||||
expect(previewSource).toContain('store-detail-preview__about')
|
||||
expect(previewSource).toMatch(
|
||||
/\.store-detail-preview\s*\{[^}]*width:\s*224px;[^}]*height:\s*354px;/s,
|
||||
)
|
||||
})
|
||||
|
||||
|
||||
@@ -1,21 +1,20 @@
|
||||
<script setup lang="ts">
|
||||
import {
|
||||
Activity,
|
||||
BarChart3,
|
||||
ChevronLeft,
|
||||
ChevronRight,
|
||||
Share2,
|
||||
Sparkles,
|
||||
Star,
|
||||
Users,
|
||||
} from 'lucide-vue-next'
|
||||
import { computed, ref } from 'vue'
|
||||
|
||||
import { getPhoneAppLabel, isExternalPhoneApp } from '@/config/apps'
|
||||
import { usePhoneStore } from '@/stores/phone'
|
||||
import type { LaunchablePhoneAppDefinition } from '@/types/apps'
|
||||
import { getAppStorePreviewImage } from '@/utils/appStorePreviewImages'
|
||||
import { getAppStorePreviewVisual } from '@/utils/appStorePreviews'
|
||||
|
||||
import AppStoreAction from './AppStoreAction.vue'
|
||||
import AppStorePreviewCard from './AppStorePreviewCard.vue'
|
||||
|
||||
const props = defineProps<{
|
||||
action: 'get' | 'installing' | 'open'
|
||||
@@ -31,7 +30,8 @@ const emit = defineEmits<{
|
||||
const phone = usePhoneStore()
|
||||
const previews = ref<HTMLElement | null>(null)
|
||||
const activePreviewIndex = ref(0)
|
||||
const previewCount = 3
|
||||
const previewCount = 5
|
||||
const previewScreens = [0, 1, 2, 3, 4] as const
|
||||
const appName = computed(() => getPhoneAppLabel(props.app, phone.t))
|
||||
const developer = computed(() =>
|
||||
isExternalPhoneApp(props.app)
|
||||
@@ -51,6 +51,29 @@ const chartRank = computed(() => `#${(props.app.gridOrder % 8) + 1}`)
|
||||
const version = computed(
|
||||
() => `1.${(props.app.gridOrder % 9) + 1}.${props.app.gridOrder % 5}`,
|
||||
)
|
||||
const detailCopyPrefix = computed(() =>
|
||||
props.app.id === 'crypto'
|
||||
? 'Apps.appStore.details.crypto'
|
||||
: 'Apps.appStore.details',
|
||||
)
|
||||
const previewVisual = computed(() => getAppStorePreviewVisual(props.app.id))
|
||||
const previewImage = computed(() => getAppStorePreviewImage(props.app.id))
|
||||
const previewFeatures = computed(() => {
|
||||
if (isExternalPhoneApp(props.app)) {
|
||||
return [props.app.name, props.app.developer, props.app.description]
|
||||
}
|
||||
const prefix = `Apps.appStore.previews.${props.app.id}`
|
||||
return [
|
||||
phone.t(`${prefix}.first`),
|
||||
phone.t(`${prefix}.second`),
|
||||
phone.t(`${prefix}.third`),
|
||||
]
|
||||
})
|
||||
const appTagline = computed(() =>
|
||||
isExternalPhoneApp(props.app)
|
||||
? props.app.description.trim() || props.app.developer
|
||||
: phone.t(`Apps.appStore.taglines.${props.app.id}`),
|
||||
)
|
||||
const detailStyle = computed(() => {
|
||||
const palettes = [
|
||||
['#2365d8', '#69c7ff'],
|
||||
@@ -177,7 +200,7 @@ function updateActivePreview(): void {
|
||||
</div>
|
||||
<p>
|
||||
{{
|
||||
phone.t('Apps.appStore.details.releaseNotes', {
|
||||
phone.t(`${detailCopyPrefix}.releaseNotes`, {
|
||||
app: appName,
|
||||
})
|
||||
}}
|
||||
@@ -212,69 +235,19 @@ function updateActivePreview(): void {
|
||||
class="store-detail__previews"
|
||||
@scroll.passive="updateActivePreview"
|
||||
>
|
||||
<article
|
||||
class="store-detail-preview store-detail-preview--overview phone-effect--expensive-shadow"
|
||||
>
|
||||
<div class="store-detail-preview__status">
|
||||
<span>{{ phone.t('Apps.appStore.details.previewLive') }}</span>
|
||||
<Activity :size="14" aria-hidden="true" />
|
||||
</div>
|
||||
<img :src="app.iconImage" alt="" draggable="false" />
|
||||
<strong>{{ appName }}</strong>
|
||||
<small>{{ phone.t('Apps.appStore.details.previewOverview') }}</small>
|
||||
<div class="store-detail-preview__metrics">
|
||||
<span><b>24</b>{{ phone.t('Apps.appStore.details.today') }}</span>
|
||||
<span
|
||||
><b>87%</b>{{ phone.t('Apps.appStore.details.progress') }}</span
|
||||
>
|
||||
</div>
|
||||
<div class="store-detail-preview__activity">
|
||||
<span></span><span></span><span></span><span></span><span></span>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<article
|
||||
class="store-detail-preview store-detail-preview--community phone-effect--expensive-shadow"
|
||||
>
|
||||
<div class="store-detail-preview__status">
|
||||
<span>{{ phone.t('Apps.appStore.details.previewCommunity') }}</span>
|
||||
<Users :size="14" aria-hidden="true" />
|
||||
</div>
|
||||
<div class="store-detail-preview__avatars">
|
||||
<span>AM</span><span>JS</span><span>RK</span>
|
||||
</div>
|
||||
<strong>{{
|
||||
phone.t('Apps.appStore.details.communityTitle', { app: appName })
|
||||
}}</strong>
|
||||
<small>{{ phone.t('Apps.appStore.details.communityBody') }}</small>
|
||||
<div class="store-detail-preview__message">
|
||||
<Sparkles :size="15" aria-hidden="true" />
|
||||
<span>{{ phone.t('Apps.appStore.details.featuredMoment') }}</span>
|
||||
</div>
|
||||
<img :src="app.iconImage" alt="" draggable="false" />
|
||||
</article>
|
||||
|
||||
<article
|
||||
class="store-detail-preview store-detail-preview--insights phone-effect--expensive-shadow"
|
||||
>
|
||||
<div class="store-detail-preview__status">
|
||||
<span>{{ phone.t('Apps.appStore.details.previewInsights') }}</span>
|
||||
<BarChart3 :size="14" aria-hidden="true" />
|
||||
</div>
|
||||
<strong>{{ phone.t('Apps.appStore.details.weeklyActivity') }}</strong>
|
||||
<div class="store-detail-preview__chart" aria-hidden="true">
|
||||
<span
|
||||
v-for="height in [38, 64, 48, 82, 56, 92, 73]"
|
||||
:key="height"
|
||||
:style="{ height: `${height}%` }"
|
||||
></span>
|
||||
</div>
|
||||
<div class="store-detail-preview__insight">
|
||||
<b>+18%</b>
|
||||
<span>{{ phone.t('Apps.appStore.details.fromLastWeek') }}</span>
|
||||
</div>
|
||||
<img :src="app.iconImage" alt="" draggable="false" />
|
||||
</article>
|
||||
<AppStorePreviewCard
|
||||
v-for="screen in previewScreens"
|
||||
:key="screen"
|
||||
:app-name="appName"
|
||||
:features="previewFeatures"
|
||||
:icon-image="app.iconImage"
|
||||
:category-label="phone.t(`Home.groups.${app.category}`)"
|
||||
:developer="developer"
|
||||
:preview-image="previewImage"
|
||||
:screen="screen"
|
||||
:tagline="appTagline"
|
||||
:visual="previewVisual"
|
||||
/>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
@@ -282,7 +255,7 @@ function updateActivePreview(): void {
|
||||
<h2>{{ phone.t('Apps.appStore.details.about') }}</h2>
|
||||
<p>
|
||||
{{
|
||||
phone.t('Apps.appStore.details.description', {
|
||||
phone.t(`${detailCopyPrefix}.description`, {
|
||||
app: appName,
|
||||
category: phone.t(`Home.groups.${app.category}`),
|
||||
})
|
||||
@@ -546,218 +519,6 @@ function updateActivePreview(): void {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.store-detail-preview {
|
||||
width: 224px;
|
||||
height: 354px;
|
||||
position: relative;
|
||||
display: flex;
|
||||
overflow: hidden;
|
||||
flex: 0 0 224px;
|
||||
flex-direction: column;
|
||||
border: 1px solid rgba(255, 255, 255, 0.12);
|
||||
border-radius: var(--sky-radius-card);
|
||||
padding: var(--sky-space-4);
|
||||
color: #fff;
|
||||
background:
|
||||
radial-gradient(
|
||||
circle at 78% 12%,
|
||||
var(--store-detail-glow),
|
||||
transparent 32%
|
||||
),
|
||||
linear-gradient(155deg, var(--store-detail-accent), #101523 118%);
|
||||
box-shadow: 0 10px 22px rgba(0, 0, 0, 0.18);
|
||||
scroll-snap-align: start;
|
||||
}
|
||||
|
||||
.store-detail-preview::after {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: repeating-linear-gradient(
|
||||
-35deg,
|
||||
transparent 0 20px,
|
||||
rgba(255, 255, 255, 0.025) 21px 22px
|
||||
);
|
||||
content: '';
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.store-detail-preview__status {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
color: rgba(255, 255, 255, 0.72);
|
||||
font-size: 10px;
|
||||
font-weight: 800;
|
||||
letter-spacing: 0.06em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.store-detail-preview--overview > img {
|
||||
width: 90px;
|
||||
height: 90px;
|
||||
z-index: 1;
|
||||
align-self: center;
|
||||
margin: 26px 0 16px;
|
||||
border-radius: 24px;
|
||||
object-fit: cover;
|
||||
box-shadow: 0 14px 24px rgba(0, 0, 0, 0.28);
|
||||
transform: rotate(-4deg);
|
||||
}
|
||||
|
||||
.store-detail-preview > strong,
|
||||
.store-detail-preview > small {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.store-detail-preview > strong {
|
||||
font-size: 20px;
|
||||
line-height: 1.08;
|
||||
}
|
||||
|
||||
.store-detail-preview > small {
|
||||
margin-top: 5px;
|
||||
color: rgba(255, 255, 255, 0.68);
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
.store-detail-preview__metrics {
|
||||
z-index: 1;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: var(--sky-space-2);
|
||||
margin-top: auto;
|
||||
}
|
||||
|
||||
.store-detail-preview__metrics span {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
border-radius: var(--sky-radius-control);
|
||||
padding: var(--sky-space-3);
|
||||
background: rgba(255, 255, 255, 0.11);
|
||||
color: rgba(255, 255, 255, 0.7);
|
||||
font-size: 9px;
|
||||
}
|
||||
|
||||
.store-detail-preview__metrics b {
|
||||
color: #fff;
|
||||
font-size: 17px;
|
||||
}
|
||||
|
||||
.store-detail-preview__activity {
|
||||
z-index: 1;
|
||||
height: 28px;
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
gap: 5px;
|
||||
margin-top: var(--sky-space-3);
|
||||
}
|
||||
|
||||
.store-detail-preview__activity span {
|
||||
width: 20%;
|
||||
border-radius: var(--sky-radius-pill);
|
||||
background: rgba(255, 255, 255, 0.42);
|
||||
}
|
||||
|
||||
.store-detail-preview__activity span:nth-child(1) {
|
||||
height: 42%;
|
||||
}
|
||||
.store-detail-preview__activity span:nth-child(2) {
|
||||
height: 72%;
|
||||
}
|
||||
.store-detail-preview__activity span:nth-child(3) {
|
||||
height: 55%;
|
||||
}
|
||||
.store-detail-preview__activity span:nth-child(4) {
|
||||
height: 92%;
|
||||
}
|
||||
.store-detail-preview__activity span:nth-child(5) {
|
||||
height: 68%;
|
||||
}
|
||||
|
||||
.store-detail-preview__avatars {
|
||||
z-index: 1;
|
||||
display: flex;
|
||||
margin: 42px 0 22px;
|
||||
}
|
||||
|
||||
.store-detail-preview__avatars span {
|
||||
width: 54px;
|
||||
height: 54px;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
margin-right: -12px;
|
||||
border: 3px solid rgba(255, 255, 255, 0.82);
|
||||
border-radius: 50%;
|
||||
background: rgba(17, 22, 38, 0.74);
|
||||
font-size: 12px;
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.store-detail-preview__message {
|
||||
z-index: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--sky-space-2);
|
||||
margin-top: auto;
|
||||
border-radius: var(--sky-radius-control);
|
||||
padding: var(--sky-space-3);
|
||||
background: rgba(255, 255, 255, 0.12);
|
||||
font-size: 10px;
|
||||
}
|
||||
|
||||
.store-detail-preview--community > img,
|
||||
.store-detail-preview--insights > img {
|
||||
width: 42px;
|
||||
height: 42px;
|
||||
z-index: 1;
|
||||
position: absolute;
|
||||
right: var(--sky-space-4);
|
||||
bottom: var(--sky-space-4);
|
||||
border-radius: 12px;
|
||||
object-fit: cover;
|
||||
box-shadow: 0 8px 14px rgba(0, 0, 0, 0.24);
|
||||
}
|
||||
|
||||
.store-detail-preview--insights > strong {
|
||||
margin-top: 36px;
|
||||
}
|
||||
|
||||
.store-detail-preview__chart {
|
||||
height: 145px;
|
||||
z-index: 1;
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
gap: 7px;
|
||||
margin-top: var(--sky-space-5);
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.3);
|
||||
padding: 0 var(--sky-space-2);
|
||||
}
|
||||
|
||||
.store-detail-preview__chart span {
|
||||
width: 14px;
|
||||
border-radius: 7px 7px 0 0;
|
||||
background: linear-gradient(180deg, #fff, rgba(255, 255, 255, 0.24));
|
||||
}
|
||||
|
||||
.store-detail-preview__insight {
|
||||
z-index: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin-top: var(--sky-space-4);
|
||||
}
|
||||
|
||||
.store-detail-preview__insight b {
|
||||
font-size: 22px;
|
||||
}
|
||||
|
||||
.store-detail-preview__insight span {
|
||||
color: rgba(255, 255, 255, 0.68);
|
||||
font-size: 10px;
|
||||
}
|
||||
|
||||
@media (hover: hover) {
|
||||
.store-detail__toolbar button:hover {
|
||||
border-color: rgba(255, 255, 255, 0.16);
|
||||
|
||||
@@ -0,0 +1,334 @@
|
||||
<script setup lang="ts">
|
||||
import { computed } from 'vue'
|
||||
|
||||
import type { AppStorePreviewVisual } from '@/utils/appStorePreviews'
|
||||
|
||||
const props = defineProps<{
|
||||
appName: string
|
||||
categoryLabel: string
|
||||
developer: string
|
||||
features: readonly string[]
|
||||
iconImage: string
|
||||
previewImage: string | null
|
||||
screen: 0 | 1 | 2 | 3 | 4
|
||||
tagline: string
|
||||
visual: AppStorePreviewVisual
|
||||
}>()
|
||||
|
||||
const cardStyle = computed(() => ({
|
||||
'--preview-accent': props.visual.accent,
|
||||
'--preview-surface': props.visual.surface,
|
||||
}))
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<article
|
||||
class="store-detail-preview phone-effect--expensive-shadow"
|
||||
:class="`store-detail-preview--screen-${screen}`"
|
||||
:style="cardStyle"
|
||||
>
|
||||
<img
|
||||
v-if="previewImage && screen < 3"
|
||||
class="store-detail-preview__screenshot"
|
||||
:src="previewImage"
|
||||
:alt="`${appName}: ${features[screen] ?? appName}`"
|
||||
draggable="false"
|
||||
/>
|
||||
|
||||
<section v-else-if="screen === 3" class="store-detail-preview__details">
|
||||
<header>
|
||||
<img :src="iconImage" alt="" draggable="false" />
|
||||
<span><strong>{{ appName }}</strong><small>{{ categoryLabel }}</small></span>
|
||||
</header>
|
||||
<ul>
|
||||
<li v-for="(feature, index) in features" :key="feature">
|
||||
<b>{{ index + 1 }}</b>
|
||||
<span>{{ feature }}</span>
|
||||
</li>
|
||||
</ul>
|
||||
</section>
|
||||
|
||||
<section v-else-if="screen === 4" class="store-detail-preview__about">
|
||||
<img :src="iconImage" alt="" draggable="false" />
|
||||
<strong>{{ appName }}</strong>
|
||||
<p>{{ tagline }}</p>
|
||||
<dl>
|
||||
<div><dt>{{ developer }}</dt><dd>{{ categoryLabel }}</dd></div>
|
||||
</dl>
|
||||
</section>
|
||||
|
||||
<div v-else class="store-detail-preview__fallback">
|
||||
<img :src="iconImage" alt="" draggable="false" />
|
||||
<strong>{{ appName }}</strong>
|
||||
<p>{{ tagline }}</p>
|
||||
</div>
|
||||
|
||||
<footer v-if="screen < 3" class="store-detail-preview__caption">
|
||||
<img :src="iconImage" alt="" draggable="false" />
|
||||
<span>
|
||||
<strong>{{ features[screen] ?? appName }}</strong>
|
||||
<small>{{ appName }}</small>
|
||||
</span>
|
||||
</footer>
|
||||
</article>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.store-detail-preview {
|
||||
--preview-accent: #4d9dff;
|
||||
--preview-surface: #0a1828;
|
||||
position: relative;
|
||||
width: 224px;
|
||||
height: 354px;
|
||||
overflow: hidden;
|
||||
flex: 0 0 224px;
|
||||
border: 1px solid rgba(255, 255, 255, 0.16);
|
||||
border-radius: var(--sky-radius-card);
|
||||
background: var(--preview-surface);
|
||||
box-shadow: 0 12px 28px rgba(0, 0, 0, 0.24);
|
||||
scroll-snap-align: start;
|
||||
}
|
||||
|
||||
.store-detail-preview__screenshot {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: block;
|
||||
object-fit: cover;
|
||||
object-position: center top;
|
||||
transition: transform 180ms ease;
|
||||
}
|
||||
|
||||
.store-detail-preview--screen-1 .store-detail-preview__screenshot {
|
||||
transform: scale(1.08);
|
||||
transform-origin: center top;
|
||||
}
|
||||
|
||||
.store-detail-preview--screen-2 .store-detail-preview__screenshot {
|
||||
transform: scale(1.12);
|
||||
transform-origin: center bottom;
|
||||
}
|
||||
|
||||
.store-detail-preview__fallback {
|
||||
height: 100%;
|
||||
display: grid;
|
||||
align-content: center;
|
||||
justify-items: center;
|
||||
gap: 10px;
|
||||
padding: 24px;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
background:
|
||||
radial-gradient(circle at 80% 12%, var(--preview-accent), transparent 42%),
|
||||
linear-gradient(155deg, var(--preview-surface), #070a11);
|
||||
}
|
||||
|
||||
.store-detail-preview__fallback img {
|
||||
width: 72px;
|
||||
height: 72px;
|
||||
border-radius: 18px;
|
||||
}
|
||||
|
||||
.store-detail-preview__fallback strong {
|
||||
font-size: 22px;
|
||||
}
|
||||
|
||||
.store-detail-preview__fallback p {
|
||||
margin: 0;
|
||||
color: rgba(255, 255, 255, 0.74);
|
||||
font-size: 13px;
|
||||
line-height: 1.45;
|
||||
}
|
||||
|
||||
.store-detail-preview__details,
|
||||
.store-detail-preview__about {
|
||||
height: 100%;
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 18px;
|
||||
color: #fff;
|
||||
background:
|
||||
radial-gradient(circle at 88% 4%, var(--preview-accent), transparent 42%),
|
||||
linear-gradient(155deg, var(--preview-surface), #070a11);
|
||||
}
|
||||
|
||||
.store-detail-preview__details::before,
|
||||
.store-detail-preview__about::before {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
border-radius: inherit;
|
||||
background: linear-gradient(120deg, rgba(255, 255, 255, 0.06), transparent 42%);
|
||||
content: '';
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.store-detail-preview__details header {
|
||||
z-index: 1;
|
||||
display: grid;
|
||||
grid-template-columns: 44px minmax(0, 1fr);
|
||||
align-items: center;
|
||||
gap: 11px;
|
||||
}
|
||||
|
||||
.store-detail-preview__details header img {
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
border-radius: 12px;
|
||||
}
|
||||
|
||||
.store-detail-preview__details header span {
|
||||
min-width: 0;
|
||||
display: grid;
|
||||
gap: 3px;
|
||||
}
|
||||
|
||||
.store-detail-preview__details header strong {
|
||||
overflow: hidden;
|
||||
font-size: 18px;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.store-detail-preview__details header small,
|
||||
.store-detail-preview__about dd {
|
||||
color: rgba(255, 255, 255, 0.66);
|
||||
font-size: 10px;
|
||||
}
|
||||
|
||||
.store-detail-preview__details ul {
|
||||
z-index: 1;
|
||||
display: grid;
|
||||
gap: 10px;
|
||||
margin: 28px 0 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.store-detail-preview__details li {
|
||||
display: grid;
|
||||
grid-template-columns: 28px minmax(0, 1fr);
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
border: 1px solid rgba(255, 255, 255, 0.12);
|
||||
border-radius: 12px;
|
||||
padding: 10px;
|
||||
background: rgba(255, 255, 255, 0.07);
|
||||
}
|
||||
|
||||
.store-detail-preview__details li b {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
border-radius: 9px;
|
||||
color: #fff;
|
||||
background: var(--preview-accent);
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
.store-detail-preview__details li span {
|
||||
font-size: 11px;
|
||||
font-weight: 700;
|
||||
line-height: 1.3;
|
||||
}
|
||||
|
||||
.store-detail-preview__about {
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.store-detail-preview__about > img {
|
||||
z-index: 1;
|
||||
width: 82px;
|
||||
height: 82px;
|
||||
border-radius: 22px;
|
||||
box-shadow: 0 14px 30px rgba(0, 0, 0, 0.28);
|
||||
}
|
||||
|
||||
.store-detail-preview__about > strong {
|
||||
z-index: 1;
|
||||
margin-top: 16px;
|
||||
font-size: 22px;
|
||||
}
|
||||
|
||||
.store-detail-preview__about > p {
|
||||
z-index: 1;
|
||||
margin: 8px 0 18px;
|
||||
color: rgba(255, 255, 255, 0.76);
|
||||
font-size: 11px;
|
||||
line-height: 1.45;
|
||||
}
|
||||
|
||||
.store-detail-preview__about dl {
|
||||
z-index: 1;
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.store-detail-preview__about dl div {
|
||||
display: grid;
|
||||
gap: 3px;
|
||||
border: 1px solid rgba(255, 255, 255, 0.12);
|
||||
border-radius: 12px;
|
||||
padding: 10px;
|
||||
background: rgba(255, 255, 255, 0.07);
|
||||
}
|
||||
|
||||
.store-detail-preview__about dt,
|
||||
.store-detail-preview__about dd {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.store-detail-preview__about dt {
|
||||
font-size: 11px;
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.store-detail-preview__caption {
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
bottom: 10px;
|
||||
left: 10px;
|
||||
display: grid;
|
||||
grid-template-columns: 32px minmax(0, 1fr);
|
||||
align-items: center;
|
||||
gap: 9px;
|
||||
padding: 8px;
|
||||
border: 1px solid rgba(255, 255, 255, 0.16);
|
||||
border-radius: 13px;
|
||||
color: #fff;
|
||||
background: rgba(7, 9, 14, 0.84);
|
||||
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.34);
|
||||
backdrop-filter: blur(12px);
|
||||
}
|
||||
|
||||
.store-detail-preview__caption img {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.store-detail-preview__caption span {
|
||||
min-width: 0;
|
||||
display: grid;
|
||||
gap: 2px;
|
||||
}
|
||||
|
||||
.store-detail-preview__caption strong,
|
||||
.store-detail-preview__caption small {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.store-detail-preview__caption strong {
|
||||
font-size: 11px;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.store-detail-preview__caption small {
|
||||
color: rgba(255, 255, 255, 0.62);
|
||||
font-size: 9px;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user