serg0x
/ material-design-shadows.css
Last active
November 1, 2024 00:27
Google material design elevation system shadows as css. Based on https://material.io/design/environment/elevation.html#default-elevations Exported with Sketchapp from the Google material design theme editor plugin "Baseline" theme.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* Shadow 0dp */ | |
| box-shadow: none; | |
| /* Shadow 1dp */ | |
| box-shadow: 0 1px 1px 0 rgba(0,0,0,0.14), 0 2px 1px -1px rgba(0,0,0,0.12), 0 1px 3px 0 rgba(0,0,0,0.20); | |
| /* Shadow 2dp */ | |
| box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14), 0 3px 1px -2px rgba(0,0,0,0.12), 0 1px 5px 0 rgba(0,0,0,0.20); | |
| /* Shadow 3dp */ |
bkeating
/ graphiql-dark-mode.css
Last active
September 24, 2024 19:10
GraphiQL One Dark Alt (Dark Mode) theme by Ben Keating
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <style> | |
| /* GraphiQL One Dark Alt (Dark Mode) theme by Ben Keating[1] | |
| * Colors taken from Atom's One Dark theme[2]. Add this file to the end of | |
| * your <head> block[3] to override built-in default styling. | |
| * | |
| * [1]. https://twitter.com/flowpoke | |
| * [2]. https://github.com/atom/atom/tree/master/packages/one-dark-ui | |
| * [3]. e.g. `.../site-packages/graphene_django/templates/graphene/graphiql.html` | |
| */ |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 0. 当前是 react + vite 项目，全局默认使用 nextui 和 tailwindcss，所有代码基于这两个 ui 库，不要额外引入其他库。 | |
| 1. 如果我要你重构或重新设计或新增页面的ui，你需要把变得更加有条理和ui现代化，减少阴影的使用，并且基于 framer-motion 编写动画效果，让页面灵动，现在的ui太像五年前的bootstrap了，跟不上时代，可以参考shadcn nextui 这类现代ui库的实现。 | |
| 2. 如果使用tailwindcss配色，在k线和涨跌幅涉及到金融数据的方案中绿色统一使用 teal-700 dark:teal-400 红色统一使用 rose-700 dark: rose-400，默认light情况下不要着色。项目的默认dark模式下，强调色是 sky-400. 按钮色使用 sky-700 | |
| 3. 所有页面你都必须全方位考虑到适配黑色 dark 场景，包括不限于 text background shadow 等等。 | |
| 4. 全局页面默认使用 dark 配色的场景进行着色，着色现代化。 | |
| 5. nextui 没有 Text 组件，使用tailwindcss来实现。 | |
| 6. 重构页面的时候要考虑到最佳实践，组件分组，独立模块，易于维护。 | |
| 7. 程序使用 react-helmet-async 来处理标题页面描述等 seo 信息，你需要基于这个库进行检查修改优化新增，来达到搜索引擎友好。 | |
| 8. 项目是一个专业的金融量化网站，提供量化指标信息，专业的量化交易平台，用户可以一键管理部署策略机器人，查看回测等，你需要根据这个项目背景来做进一步的网站交互设计优化，文案优化，文案等要对标华尔街的知名券商基金等公司文案。 | |
| 9. 图标库只使用 @egoist/tailwindcss-icons，不要引入其他任何图标库，使用方式类似于 <span class="i-mdi-home"></span> |