fix:Modify panel shadow color #943
Conversation
WalkthroughThis pull request introduces consistent styling improvements across multiple Vue components and the base theme. The primary change involves introducing a new CSS variable Changes
Possibly related PRs
Suggested labels
Suggested reviewers
Poem
Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
github-actions
bot
added
bug
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (7)
packages/plugins/script/src/Main.vue (2)
105-105: Consider reducing shadow size for subtletyThe 6px offset for the box shadow appears quite prominent for a panel shadow. Consider reducing it to 3px for a more subtle effect while maintaining the visual hierarchy.
- box-shadow: 6px 0px 3px 0px var(--te-base-box-shadow-rgba-3); + box-shadow: 3px 0px 3px 0px var(--te-base-box-shadow-rgba-3);
108-108: Review z-index value for potential stacking context issuesThe z-index of 999 is quite high and might cause issues with other overlapping elements. Consider using a lower value or implementing a z-index management system.
Consider implementing a z-index scale in your theme variables:
// In your theme file :root { --z-index-panel: 100; --z-index-modal: 200; // ... other z-index values }packages/common/component/PluginSetting.vue (1)
137-139: LGTM with a minor suggestionThe implementation of conditional shadow and use of CSS variable is clean and well-structured. For consistency with other components, consider the same shadow size reduction suggested earlier.
- box-shadow: 6px 0px 3px 0px var(--te-base-box-shadow-rgba-3); + box-shadow: 3px 0px 3px 0px var(--te-base-box-shadow-rgba-3);packages/plugins/schema/src/Main.vue (3)
151-151: Maintain consistent shadow properties across componentsFor consistency with other panel shadows, consider reducing the shadow offset.
- box-shadow: 6px 0px 3px 0px var(--te-base-box-shadow-rgba-3); + box-shadow: 3px 0px 3px 0px var(--te-base-box-shadow-rgba-3);
152-152: Standardize z-index values across panelsThe z-index value (1000) differs from the script panel (999). Consider standardizing these values using CSS variables.
Consider implementing a z-index management system as suggested earlier.
Line range hint
11-17: Remove hidden popover instead of using v-show="false"Rather than hiding the popover with
v-show="false", consider removing it entirely until it's needed.- <tiny-popover v-show="false" placement="bottom" trigger="hover" append-to-body content="导入 Schema"> - <template #reference> - <span class="icon-wrap"> - <icon-download-link></icon-download-link> - </span> - </template> - </tiny-popover>packages/theme/base/src/base.less (1)
242-242: LGTM! Consider adding a comment to document the variable's purpose.The new box shadow variable follows the established naming pattern and uses an appropriate value for subtle shadows.
Add a comment above the variable to document its intended use case:
+ // Subtle box shadow for panel overlays --te-base-box-shadow-rgba-3: rgba(0, 0, 0, 0.1);
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (6)
packages/common/component/PluginSetting.vue(1 hunks)packages/plugins/i18n/src/Main.vue(1 hunks)packages/plugins/schema/src/Main.vue(1 hunks)packages/plugins/script/src/Main.vue(1 hunks)packages/plugins/state/src/Main.vue(1 hunks)packages/theme/base/src/base.less(1 hunks)
🔇 Additional comments (2)
packages/plugins/state/src/Main.vue (1)
455-455: LGTM! Consistent use of the new shadow variable.
The box shadow implementation helps create visual hierarchy and follows the new design system variable.
packages/plugins/i18n/src/Main.vue (1)
436-436: LGTM! Consistent shadow styling across plugin panels.
The implementation maintains visual consistency with other plugin panels by using the shared shadow variable.
English | 简体中文
PR
PR Checklist
Please check if your PR fulfills the following requirements:
PR Type
What kind of change does this PR introduce?
Background and solution
增加base变量，更改面板阴影颜色
What is the current behavior?
Issue Number: N/A
What is the new behavior?
Does this PR introduce a breaking change?
Other information
Summary by CodeRabbit
New Features
tiny-searchcomponent for enhanced search functionality.Improvements
Bug Fixes