This is an automated email from the ASF dual-hosted git repository.
xiaoyu pushed a commit to branch main
in repository https://gitbox.apache.org/repos/asf/shenyu-website.git
The following commit(s) were added to refs/heads/main by this push:
new 45c5bb50ef0 [type: feat] Dark mode css update (#823)
45c5bb50ef0 is described below
commit 45c5bb50ef0375abe5e9064749c933cfa2870a38
Author: gouzixing <[email protected]>
AuthorDate: Mon Nov 14 15:39:27 2022 +0800
[type: feat] Dark mode css update (#823)
* newsPage
* news page
* bugfix
* news page update
* bugfix --path bug
* conflict
* conflict
* img update
* blog page refractor
* blog page new style
* delete annotate
* index page highlight for slogon
* bugfix:document for node
* bugfix--link false
* i18n & link fix
* 'translate'
* translate
* urlchange bugfix
* docs fix
* delete unused import
* fix
* event page & navibar update & overview doc & pic update for news
* lint
* lint
* translate
* lint
* trans
* feat
* fix--locale=zh
* docs fix
* footer
* i18n
* userList
* fix
* fix
* fix
* index
* fix
* hover
* fix
* index page
* index page
* SWIPER
* SWIPER
* 2.5.0
* 2.5.0
* 2.5.0
* 适配
* 适配
* download
* download
* download
* download
* download
* blog info
* i18n
* grammarly
* grammar
* chinglish fix
* docs page
* doc
* doc
* doc
* doc
* 13
* 213
* golang client
* bugfix: link
* helm
* feature: add version 1.0.0 docs for golang
* darkMode css
Co-authored-by: gouzixing <[email protected]>
Co-authored-by: gouzixing <[email protected]>
Co-authored-by: gouzixing <gouzixing>
---
src/components/DownloadCompoent.module.css | 13 +++++++++++++
src/components/DownloadCompoent.tsx | 15 ++++++++-------
src/pages/blog.module.css | 4 ++++
src/pages/document.module.css | 28 +++++++++++++++++++++++++++-
src/pages/event.module.css | 12 ++++++++++++
src/pages/index.module.css | 12 ++++++++++++
src/pages/news.module.css | 12 ++++++++++++
7 files changed, 88 insertions(+), 8 deletions(-)
diff --git a/src/components/DownloadCompoent.module.css
b/src/components/DownloadCompoent.module.css
index 82afe2e1106..8996dd6ea6f 100644
--- a/src/components/DownloadCompoent.module.css
+++ b/src/components/DownloadCompoent.module.css
@@ -76,3 +76,16 @@
.downloadLinks {
padding: 0.5rem 1.5rem 0;
}
+
+[data-theme='dark'] .downloadCardButton{
+ background-color: #272a36;
+}
+
+[data-theme='dark'] .dropDownContainer{
+ color: #fff;
+ background-color: #272a36;
+}
+
+[data-theme='dark'] .versionTitle{
+ color: #fff;
+}
\ No newline at end of file
diff --git a/src/components/DownloadCompoent.tsx
b/src/components/DownloadCompoent.tsx
index 85cac083ca4..3d7523bca20 100644
--- a/src/components/DownloadCompoent.tsx
+++ b/src/components/DownloadCompoent.tsx
@@ -133,7 +133,8 @@ const data = [
]
function DownloadCompoent() {
- const [showItem, setShowItem] = useState([false, false, false, false,
false,false]);
+ const defaultShowItemArray = Array(data.length).fill(false);
+ const [showItem, setShowItem] = useState(defaultShowItemArray);
const closeList = useCallback((e) => {
const { target } = e;
@@ -141,7 +142,7 @@ function DownloadCompoent() {
if (value && value === 'dropDownButton') {
return
} else {
- setShowItem([false, false, false, false, false]);
+ setShowItem(defaultShowItemArray);
}
}, [])
@@ -166,7 +167,7 @@ function DownloadCompoent() {
{data.map((item, index) => {
const { versions, title } = item;
return (
- <div className={styles.downloadCard}>
+ <div className={styles.downloadCard} key={index}>
<div className={styles.downloadCardTitle}>{title}</div>
<button id='dropDownButton'
className={styles.downloadCardButton} onClick={() => { showList(index)
}}><Translate>Source</Translate></button>
{
@@ -174,7 +175,7 @@ function DownloadCompoent() {
(
<div className={styles.dropDownContainer}>
{
- versions.map(item2 => {
+ versions.map((item2, index2) => {
const { versionTitle, targets } =
item2;
const listArr =
Object.keys(targets).map(list => {
return {
@@ -183,13 +184,13 @@ function DownloadCompoent() {
}
})
return (
- <div>
+ <div key={index2}>
<div
className={styles.versionTitle}>{versionTitle}</div>
<div
className={styles.downloadLinks}>
- {listArr.map(url => {
+ {listArr.map((url,
index3) => {
const title = '['
+ url.title + ']'
return (
- <a
href={url.link}>{title}</a>
+ <a
href={url.link} key={index3}>{title}</a>
)
})}
</div>
diff --git a/src/pages/blog.module.css b/src/pages/blog.module.css
index 247d6fc560c..fd5383ab134 100644
--- a/src/pages/blog.module.css
+++ b/src/pages/blog.module.css
@@ -145,6 +145,10 @@
text-decoration: none;
}
+[data-theme='dark'] .title{
+ border-bottom: 1px solid #272a36;
+}
+
@media screen and (max-width: 996px) {
.catalogue {
display: none;
diff --git a/src/pages/document.module.css b/src/pages/document.module.css
index f57173433bb..372369beff3 100644
--- a/src/pages/document.module.css
+++ b/src/pages/document.module.css
@@ -132,4 +132,30 @@
.linkItemA:hover{
text-decoration: none;
color: #000;
-}
\ No newline at end of file
+}
+
+[data-theme='dark'] .documentList{
+ background-color: #1C1E21;
+}
+
+[data-theme='dark'] .cardItem{
+ background-color: #272A36;
+}
+
+[data-theme='dark'] .downloadCardButton{
+ background-color: #272a36;
+}
+
+[data-theme='dark'] .dropDownContainer{
+ background-color: #272a36;
+ color: #fff;
+}
+
+[data-theme='dark'] .linkItemA{
+ color: #fff;
+}
+
+[data-theme='dark'] .linkItem:hover{
+ background-color: var(--ifm-color-primary);
+}
+
diff --git a/src/pages/event.module.css b/src/pages/event.module.css
index 6eb80d7a8ec..6624ac6431d 100644
--- a/src/pages/event.module.css
+++ b/src/pages/event.module.css
@@ -64,6 +64,18 @@
border: #FFFFFF;
}
+[data-theme='dark'] .content{
+ background-color: #1C1E21;
+}
+
+[data-theme='dark'] .cardItem{
+ background-color: #272a36;
+}
+
+[data-theme='dark'] .readMore{
+ background-color: #272a36;
+}
+
@media screen and (max-width: 996px) {
.cardItem{
margin: 5px;
diff --git a/src/pages/index.module.css b/src/pages/index.module.css
index f884267b034..203a6007bba 100755
--- a/src/pages/index.module.css
+++ b/src/pages/index.module.css
@@ -254,6 +254,18 @@
margin: 0 auto;
}
+[data-theme='dark'] .hero{
+ background-color: #1C1E21;
+}
+
+[data-theme='dark'] .scrollItemLeftInner{
+ background: linear-gradient(90deg, #272a36 0%, rgba(255, 255, 255, 0) 100%);
+}
+
+[data-theme='dark'] .scrollItemRightInner{
+ background: linear-gradient(-90deg, #272a36 0%, rgba(255, 255, 255, 0) 100%);
+}
+
@media screen and (max-width: 996px) {
.heroBanner {
padding: 2rem;
diff --git a/src/pages/news.module.css b/src/pages/news.module.css
index 8a11cf8d997..b88e72581c2 100644
--- a/src/pages/news.module.css
+++ b/src/pages/news.module.css
@@ -77,6 +77,18 @@
border: #FFFFFF;
}
+[data-theme='dark'] .content{
+ background-color: #1C1E21;
+}
+
+[data-theme='dark'] .cardItem{
+ background-color: #272a36;
+}
+
+[data-theme='dark'] .readMore{
+ background-color: #272a36;
+}
+
@media screen and (max-width: 996px) {
.cardItem{
