fix: global top/bottom component styles (#874)

slidevjs · Feb 13, 2023 · bdff317 · bdff317
1 parent 4a5e392
commit bdff317
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 8 deletions.
diff --git a/cypress/e2e/examples/basic.spec.ts b/cypress/e2e/examples/basic.spec.ts
@@ -29,15 +29,15 @@ context('Basic', () => {
     cy.contains('Global Footer')
       .should('not.exist')
 
-    cy.get('#page-root > #slide-container > #slide-content > .slidev-page-2 > p')
+    cy.get('#page-root > #slide-container > #slide-content > #slideshow > .slidev-page-2 > p')
       .should('have.css', 'border-color', 'rgb(0, 128, 0)')
       .should('not.have.css', 'color', 'rgb(128, 0, 0)')
 
     goPage(5)
 
-    cy.get('#page-root > #slide-container > #slide-content > .slidev-page-5 .slidev-code')
+    cy.get('#page-root > #slide-container > #slide-content > #slideshow > .slidev-page-5 .slidev-code')
       .should('have.text', '<div>{{$slidev.nav.currentPage}}</div>')
-      .get('#page-root > #slide-container > #slide-content > .slidev-page-5 > p')
+      .get('#page-root > #slide-container > #slide-content > #slideshow > .slidev-page-5 > p')
       .should('have.text', 'Current Page: 5')
   })
 

diff --git a/packages/client/internals/SlidesShow.vue b/packages/client/internals/SlidesShow.vue
@@ -31,7 +31,7 @@ const loadedRoutes = computed(() => rawRoutes.filter(r => r.meta?.__preloaded ||
   <GlobalBottom />
 
   <!-- Slides -->
-  <TransitionGroup v-bind="transition">
+  <TransitionGroup v-bind="transition" id="slideshow" tag="div">
     <template v-for="route of loadedRoutes" :key="route.path">
       <SlideWrapper
         :is="route?.component as any"
@@ -54,3 +54,13 @@ const loadedRoutes = computed(() => rawRoutes.filter(r => r.meta?.__preloaded ||
   </template>
   <PresenterMouse v-if="!isPresenter" />
 </template>
+
+<style scoped>
+#slideshow {
+  @apply h-full;
+}
+
+#slideshow > div {
+  @apply h-full w-full absolute;
+}
+</style>
diff --git a/packages/client/styles/layouts-base.css b/packages/client/styles/layouts-base.css
@@ -1,7 +1,3 @@
-#slide-content > div {
-  @apply h-full w-full absolute;
-}
-
 .slidev-layout {
   @apply px-14 py-10 text-[1.1rem] h-full;