style(enhanced-readabilities): incorrect disabled color, incorrect va…

…r references for full width Signed-off-by: Neko Ayaka <[email protected]>
nolebase · Nov 14, 2023 · 970e628 · 970e628
1 parent a7dd63b
commit 970e628
Show file tree

Hide file tree

Showing 6 changed files with 31 additions and 19 deletions.
diff --git a/packages/vitepress-plugin-enhanced-readabilities/src/components/LayoutSwitch.vue b/packages/vitepress-plugin-enhanced-readabilities/src/components/LayoutSwitch.vue
@@ -196,57 +196,58 @@ onMounted(() => {
 :root {
   --vp-nolebase-enhanced-readabilities-page-max-width: 100%;
   --vp-nolebase-enhanced-readabilities-content-max-width: 100%;
+  --vp-nolebase-enhanced-readabilities-full-width-max-width: 100%;
 }
 
 .VPNolebaseEnhancedReadabilitiesLayoutSwitchFullWidth {
   @media (min-width: 1280px) {
     /* Overriding styles of navbar section */
     .VPNavBar.has-sidebar > .container > .title {
-      padding-left: max(32px, calc((100% - (var(--vp-nolebase-enhanced-readabilities-page-max-width) - 64px)) / 2)) !important;
-      width: calc((100% - (var(--vp-nolebase-enhanced-readabilities-page-max-width) - 64px)) / 2 + var(--vp-sidebar-width) - 32px) !important;
+      padding-left: max(32px, calc((100% - (var(--vp-nolebase-enhanced-readabilities-full-width-max-width) - 64px)) / 2)) !important;
+      width: calc((100% - (var(--vp-nolebase-enhanced-readabilities-full-width-max-width) - 64px)) / 2 + var(--vp-sidebar-width) - 32px) !important;
     }
 
     .VPNavBar > .container {
-      max-width: var(--vp-nolebase-enhanced-readabilities-page-max-width);
+      max-width: var(--vp-nolebase-enhanced-readabilities-full-width-max-width);
     }
 
     .VPNavBar.has-sidebar > .container > .content {
-      padding-right: calc((100vw - var(--vp-nolebase-enhanced-readabilities-page-max-width)) / 2 + 32px) !important;
-      padding-left: calc((100vw - var(--vp-nolebase-enhanced-readabilities-page-max-width)) / 2 + var(--vp-sidebar-width)) !important;
+      padding-right: calc((100vw - var(--vp-nolebase-enhanced-readabilities-full-width-max-width)) / 2 + 32px) !important;
+      padding-left: calc((100vw - var(--vp-nolebase-enhanced-readabilities-full-width-max-width)) / 2 + var(--vp-sidebar-width)) !important;
     }
 
     .VPNavBar.has-sidebar .curtain {
-      width: calc(100% - ((100vw - var(--vp-nolebase-enhanced-readabilities-page-max-width)) / 2 + var(--vp-sidebar-width)));
+      width: calc(100% - ((100vw - var(--vp-nolebase-enhanced-readabilities-full-width-max-width)) / 2 + var(--vp-sidebar-width)));
     }
 
     /* Overriding styles of sidebar section */
     .VPSidebar {
-      padding-left: max(32px, calc((100% - (var(--vp-nolebase-enhanced-readabilities-page-max-width) - 64px)) / 2)) !important;
-      width: calc((100% - (var(--vp-nolebase-enhanced-readabilities-page-max-width) - 64px)) / 2 + var(--vp-sidebar-width) - 32px) !important;
+      padding-left: max(32px, calc((100% - (var(--vp-nolebase-enhanced-readabilities-full-width-max-width) - 64px)) / 2)) !important;
+      width: calc((100% - (var(--vp-nolebase-enhanced-readabilities-full-width-max-width) - 64px)) / 2 + var(--vp-sidebar-width) - 32px) !important;
     }
 
     /* Overriding styles of document section */
     .VPContent.has-sidebar {
-      padding-right: calc((100vw - var(--vp-nolebase-enhanced-readabilities-page-max-width)) / 2) !important;
-      padding-left: calc((100vw - var(--vp-nolebase-enhanced-readabilities-page-max-width)) / 2 + var(--vp-sidebar-width)) !important;
+      padding-right: calc((100vw - var(--vp-nolebase-enhanced-readabilities-full-width-max-width)) / 2) !important;
+      padding-left: calc((100vw - var(--vp-nolebase-enhanced-readabilities-full-width-max-width)) / 2 + var(--vp-sidebar-width)) !important;
     }
 
     .VPDoc.has-aside .content-container {
-      max-width: 100%;
+      max-width: var(--vp-nolebase-enhanced-readabilities-full-width-max-width);
     }
 
     .VPDoc:not(.has-sidebar) .container {
-      max-width: 100%;
+      max-width: var(--vp-nolebase-enhanced-readabilities-full-width-max-width);
     }
 
     .VPDoc:not(.has-sidebar) .container > .content {
-      max-width: 100%;
+      max-width: var(--vp-nolebase-enhanced-readabilities-full-width-max-width);
     }
   }
 
   @media (min-width: 1536px) {
     .VPDoc .container {
-      max-width: 100%;
+      max-width: var(--vp-nolebase-enhanced-readabilities-full-width-max-width);
     }
   }
 }

diff --git a/...-plugin-enhanced-readabilities/src/components/LayoutSwitchContentLayoutMaxWidthSlider.vue b/...-plugin-enhanced-readabilities/src/components/LayoutSwitchContentLayoutMaxWidthSlider.vue
@@ -61,6 +61,7 @@ const { trigger: triggerAnimation } = useLayoutAppearanceChangeAnimation()
 
 const updatePageMaxWidth = useDebounceFn((val: number) => {
   if (!shouldActivateMaxWidth.value) {
+    triggerAnimation(document.body)
     document.body.style.setProperty('--vp-nolebase-enhanced-readabilities-content-max-width', `100%`)
   } else {
     triggerAnimation(document.body)

diff --git a/packages/vitepress-plugin-enhanced-readabilities/src/components/MenuOption.vue b/packages/vitepress-plugin-enhanced-readabilities/src/components/MenuOption.vue
@@ -85,8 +85,6 @@ const model = computed({
     cursor: not-allowed;
     font-weight: normal;
     color: var(--vp-nolebase-enhanced-readabilities-menu-option-active-text);
-    background-color: var(--vp-nolebase-enhanced-readabilities-menu-option-active-bg);
-    box-shadow: 0 2px 4px 0px var(--vp-nolebase-enhanced-readabilities-menu-option-shadow-color);
   }
 
   &:not(.disabled):hover {

diff --git a/packages/vitepress-plugin-enhanced-readabilities/src/components/ScreenLayoutSwitch.vue b/packages/vitepress-plugin-enhanced-readabilities/src/components/ScreenLayoutSwitch.vue
@@ -37,7 +37,13 @@ watch(isLargerThanMobile, () => {
     <div border="1 red/50 solid" bg="red/30" p-2 rounded-xl flex items-center opacity-50>
       <span text-xs>{{ t('layoutSwitch.titleScreenNavWarningMessage') }}</span>
     </div>
-    <div flex="~ row" text="sm $vp-nolebase-enhanced-readabilities-menu-text-color" space-x-2 w-full>
+    <div
+      flex="~ row"
+      space-x-2 w-full p-1
+      bg="$vp-nolebase-enhanced-readabilities-menu-background-color"
+      rounded-lg border-none
+      text="sm $vp-nolebase-enhanced-readabilities-menu-text-color"
+    >
       <MenuOption
         :value="LayoutMode.FullWidth"
         :title="t('layoutSwitch.optionFullWidth')"

diff --git a/packages/vitepress-plugin-enhanced-readabilities/src/components/ScreenMenu.vue b/packages/vitepress-plugin-enhanced-readabilities/src/components/ScreenMenu.vue
@@ -10,7 +10,7 @@ const { t } = useI18n()
 </script>
 
 <template>
-  <div space-y-2 v-if="mounted">
+  <div space-y-2 v-if="mounted" class="VPNolebaseEnhancedReadabilitiesMenu">
     <MenuTitle
       icon="i-icon-park-outline:book-open"
       :title="t('title.title')"

diff --git a/packages/vitepress-plugin-enhanced-readabilities/src/components/ScreenSpotlight.vue b/packages/vitepress-plugin-enhanced-readabilities/src/components/ScreenSpotlight.vue
@@ -34,7 +34,13 @@ watch(isLargerThanMobile, () => {
     <div border="1 red/50 solid" bg="red/30" p-2 rounded-xl flex items-center opacity-50>
       <span text-xs>{{ t('spotlight.titleScreenNavWarningMessage') }}</span>
     </div>
-    <div flex="~ row" text="sm $vp-nolebase-enhanced-readabilities-menu-text-color" space-x-2 w-full>
+    <div
+      flex="~ row"
+      space-x-2 w-full p-1
+      bg="$vp-nolebase-enhanced-readabilities-menu-background-color"
+      rounded-lg border-none
+      text="sm $vp-nolebase-enhanced-readabilities-menu-text-color"
+    >
       <MenuOption
         :value="true"
         :title="t('spotlight.optionOn')"