Skip to content

Commit

Permalink
docs: fix ShikiMiniPlayground style (#833)
Browse files Browse the repository at this point in the history
  • Loading branch information
Gehbt authored Nov 14, 2024
1 parent 93246cd commit ff3e3a9
Show file tree
Hide file tree
Showing 2 changed files with 13 additions and 9 deletions.
10 changes: 9 additions & 1 deletion docs/.vitepress/components/LanguagesList.vue
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<script setup lang="ts">
import { computed, ref } from 'vue'
import { computed, ref, watch } from 'vue'
import { usePlayground } from '../store/playground'
const play = usePlayground()
Expand All @@ -17,6 +17,14 @@ const langs = computed(() => {
return play.bundledLangsWeb
return play.bundledLangsFull
})
watch(showModel, () => {
if (showModel.value) {
(document.scrollingElement as HTMLElement).style.overflow = 'hidden'
}
else {
(document.scrollingElement as HTMLElement).style.overflow = 'initial'
}
})
</script>

<template>
Expand Down
12 changes: 4 additions & 8 deletions docs/.vitepress/components/ShikiMiniPlayground.vue
Original file line number Diff line number Diff line change
Expand Up @@ -27,10 +27,10 @@ function onInput() {

<template>
<div
class="language-ts vp-adaptive-theme mini-playground transition-none!" shadow
class="language-ts vp-adaptive-theme transition-none! mini-playground" shadow
:style="[play.preStyle, { colorScheme: currentThemeType }]"
>
<div absolute z-10 p2 px3 pl5 flex="~ gap-1 items-center" left-0 top-0 right-0 border="b-solid gray/5">
<div sticky z-12 p2 px3 pl5 flex="~ gap-1 items-center" left-0 top-0 right-0 border="b-solid gray/5" bg-inherit>
<div i-carbon:chevron-down op50 />
<select v-model="play.lang" font-mono :style="play.preStyle">
<option v-for="lang in play.allLanguages" :key="lang.id" :value="lang.id">
Expand Down Expand Up @@ -62,7 +62,7 @@ function onInput() {
<div i-carbon:shuffle op50 />
</button>
</div>
<div relative mt-10 min-h-100>
<div relative min-h-100 float-left min-w-full>
<span ref="highlightContainerRef" v-html="play.output" />
<textarea
ref="textAreaRef"
Expand All @@ -80,15 +80,11 @@ function onInput() {
</template>

<style>
.mini-playground {
overflow: hidden;
}
.mini-playground select {
background: transparent;
color: inherit;
min-width: 8em;
padding: 0 !important;
padding: 0px !important;
position: relative;
}
.mini-playground select:focus {
Expand Down

0 comments on commit ff3e3a9

Please sign in to comment.