Skip to content

Commit

Permalink
update style
Browse files Browse the repository at this point in the history
  • Loading branch information
@MrWangJustToDo
MrWangJustToDo committed Feb 7, 2024
1 parent 5230403 commit 1df546e
Show file tree
Hide file tree
Showing 5 changed files with 227 additions and 158 deletions.
290 changes: 179 additions & 111 deletions ui/ssr-example/src/client/component/Header/GlobalStyle.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,69 +13,115 @@ export const GlobalStyle = () => {
code.hljs {
padding: 3px 5px;
}
/*!
Theme: GitHub
Description: Light theme as seen on github.com
Author: github.com
Maintainer: @Hirse
Updated: 2021-05-15
Outdated base version: https://github.com/primer/github-syntax-light
Current colors taken from GitHub's CSS
*/
.hljs {
--hljs-color: #383a42;
color: #383a42;
background: #fafafa;
}
.hljs-comment,
.hljs-quote {
color: #a0a1a7;
font-style: italic;
--hljs-color: #24292e;
color: #24292e;
background: #ffffff;
}
.hljs-doctag,
.hljs-formula,
.hljs-keyword {
color: #a626a4;
}
.hljs-deletion,
.hljs-name,
.hljs-section,
.hljs-selector-tag,
.hljs-subst {
color: #e45649;
}
.hljs-literal {
color: #0184bb;
.hljs-keyword,
.hljs-meta .hljs-keyword,
.hljs-template-tag,
.hljs-template-variable,
.hljs-type,
.hljs-variable.language_ {
/* prettylights-syntax-keyword */
color: #d73a49;
}
.hljs-addition,
.hljs-attribute,
.hljs-meta .hljs-string,
.hljs-regexp,
.hljs-string {
color: #50a14f;
.hljs-title,
.hljs-title.class_,
.hljs-title.class_.inherited__,
.hljs-title.function_ {
/* prettylights-syntax-entity */
color: #6f42c1;
}
.hljs-attr,
.hljs-attribute,
.hljs-literal,
.hljs-meta,
.hljs-number,
.hljs-operator,
.hljs-variable,
.hljs-selector-attr,
.hljs-selector-class,
.hljs-selector-pseudo,
.hljs-template-variable,
.hljs-type,
.hljs-variable {
color: #986801;
.hljs-selector-id {
/* prettylights-syntax-constant */
color: #005cc5;
}
.hljs-bullet,
.hljs-link,
.hljs-meta,
.hljs-selector-id,
.hljs-symbol,
.hljs-title {
color: #4078f2;
.hljs-regexp,
.hljs-string,
.hljs-meta .hljs-string {
/* prettylights-syntax-string */
color: #032f62;
}
.hljs-built_in,
.hljs-class .hljs-title,
.hljs-title.class_ {
color: #c18401;
.hljs-symbol {
/* prettylights-syntax-variable */
color: #e36209;
}
.hljs-comment,
.hljs-code,
.hljs-formula {
/* prettylights-syntax-comment */
color: #6a737d;
}
.hljs-name,
.hljs-quote,
.hljs-selector-tag,
.hljs-selector-pseudo {
/* prettylights-syntax-entity-tag */
color: #22863a;
}
.hljs-subst {
/* prettylights-syntax-storage-modifier-import */
color: #24292e;
}
.hljs-section {
/* prettylights-syntax-markup-heading */
color: #005cc5;
font-weight: bold;
}
.hljs-bullet {
/* prettylights-syntax-markup-list */
color: #735c0f;
}
.hljs-emphasis {
/* prettylights-syntax-markup-italic */
color: #24292e;
font-style: italic;
}
.hljs-strong {
font-weight: 700;
/* prettylights-syntax-markup-bold */
color: #24292e;
font-weight: bold;
}
.hljs-addition {
/* prettylights-syntax-markup-inserted */
color: #22863a;
background-color: #f0fff4;
}
.hljs-link {
text-decoration: underline;
.hljs-deletion {
/* prettylights-syntax-markup-deleted */
color: #b31d28;
background-color: #ffeef0;
}
.hljs-char.escape_,
.hljs-link,
.hljs-params,
.hljs-property,
.hljs-punctuation,
.hljs-tag {
/* purposely ignored */
}
`,
css`
Expand All @@ -87,93 +133,115 @@ export const GlobalStyle = () => {
code.hljs {
padding: 3px 5px;
}
/*!
Theme: GitHub Dark
Description: Dark theme as seen on github.com
Author: github.com
Maintainer: @Hirse
Updated: 2021-05-15
Outdated base version: https://github.com/primer/github-syntax-dark
Current colors taken from GitHub's CSS
*/
.hljs {
--hljs-color: #e9e9f4;
color: #e9e9f4;
--hljs-color: #c9d1d9;
color: #c9d1d9;
background: #282936;
}
.hljs ::selection,
.hljs::selection {
background-color: #4d4f68;
color: #e9e9f4;
}
.hljs-comment {
color: #626483;
}
.hljs-tag {
color: #62d6e8;
}
.hljs-operator,
.hljs-punctuation,
.hljs-subst {
color: #e9e9f4;
}
.hljs-operator {
opacity: 0.7;
}
.hljs-bullet,
.hljs-deletion,
.hljs-name,
.hljs-selector-tag,
.hljs-doctag,
.hljs-keyword,
.hljs-meta .hljs-keyword,
.hljs-template-tag,
.hljs-template-variable,
.hljs-variable {
color: #ea51b2;
.hljs-type,
.hljs-variable.language_ {
/* prettylights-syntax-keyword */
color: #ff7b72;
}
.hljs-title,
.hljs-title.class_,
.hljs-title.class_.inherited__,
.hljs-title.function_ {
/* prettylights-syntax-entity */
color: #d2a8ff;
}
.hljs-attr,
.hljs-link,
.hljs-attribute,
.hljs-literal,
.hljs-meta,
.hljs-number,
.hljs-symbol,
.hljs-variable.constant_ {
color: #b45bcf;
.hljs-operator,
.hljs-variable,
.hljs-selector-attr,
.hljs-selector-class,
.hljs-selector-id {
/* prettylights-syntax-constant */
color: #79c0ff;
}
.hljs-class .hljs-title,
.hljs-title,
.hljs-title.class_ {
color: #00f769;
.hljs-regexp,
.hljs-string,
.hljs-meta .hljs-string {
/* prettylights-syntax-string */
color: #a5d6ff;
}
.hljs-strong {
font-weight: 700;
color: #00f769;
.hljs-built_in,
.hljs-symbol {
/* prettylights-syntax-variable */
color: #ffa657;
}
.hljs-addition,
.hljs-comment,
.hljs-code,
.hljs-string,
.hljs-title.class_.inherited__ {
color: #ebff87;
.hljs-formula {
/* prettylights-syntax-comment */
color: #8b949e;
}
.hljs-built_in,
.hljs-doctag,
.hljs-keyword.hljs-atrule,
.hljs-name,
.hljs-quote,
.hljs-regexp {
color: #a1efe4;
.hljs-selector-tag,
.hljs-selector-pseudo {
/* prettylights-syntax-entity-tag */
color: #7ee787;
}
.hljs-attribute,
.hljs-function .hljs-title,
.hljs-section,
.hljs-title.function_,
.ruby .hljs-property {
color: #62d6e8;
.hljs-subst {
/* prettylights-syntax-storage-modifier-import */
color: #c9d1d9;
}
.diff .hljs-meta,
.hljs-keyword,
.hljs-template-tag,
.hljs-type {
color: #b45bcf;
.hljs-section {
/* prettylights-syntax-markup-heading */
color: #1f6feb;
font-weight: bold;
}
.hljs-bullet {
/* prettylights-syntax-markup-list */
color: #f2cc60;
}
.hljs-emphasis {
color: #b45bcf;
/* prettylights-syntax-markup-italic */
color: #c9d1d9;
font-style: italic;
}
.hljs-meta,
.hljs-meta .hljs-keyword,
.hljs-meta .hljs-string {
color: #00f769;
.hljs-strong {
/* prettylights-syntax-markup-bold */
color: #c9d1d9;
font-weight: bold;
}
.hljs-meta .hljs-keyword,
.hljs-meta-keyword {
font-weight: 700;
.hljs-addition {
/* prettylights-syntax-markup-inserted */
color: #aff5b4;
background-color: #033a16;
}
.hljs-deletion {
/* prettylights-syntax-markup-deleted */
color: #ffdcd7;
background-color: #67060c;
}
.hljs-char.escape_,
.hljs-link,
.hljs-params,
.hljs-property,
.hljs-punctuation,
.hljs-tag {
/* purposely ignored */
}
`
);
Expand Down
21 changes: 3 additions & 18 deletions ui/ssr-example/src/client/container/Section/Main.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -64,30 +64,15 @@ export const MainSection = () => {
(enableMockReact: <Checkbox isChecked={enableMockReact.current} readOnly />)
</Text>
<HStack marginTop="14" spacing="3" display={{ base: "none", md: "flex" }} fontSize={{ md: "12px", lg: "13px", xl: "14px" }}>
<Button
variant="solid"
fontSize="inherit"
borderRadius="full"
colorScheme="messenger"
onClick={() => navigate(noBase ? "/Blog" : `/${__BASENAME__}/Blog`)}
>
<Button variant="solid" fontSize="inherit" colorScheme="messenger" onClick={() => navigate(noBase ? "/Blog" : `/${__BASENAME__}/Blog`)}>
View Example
</Button>
<Button
variant="solid"
fontSize="inherit"
borderRadius="full"
colorScheme="whatsapp"
as="a"
href="https://github.com/MrWangJustToDo/MyReact"
target="_blank"
>
<Button variant="solid" fontSize="inherit" colorScheme="whatsapp" as="a" href="https://github.com/MrWangJustToDo/MyReact" target="_blank">
View on GitHub
</Button>
<Button
variant="solid"
fontSize="inherit"
borderRadius="full"
colorScheme="teal"
display={{ base: "none", lg: "inline-flex" }}
as="a"
Expand All @@ -96,7 +81,7 @@ export const MainSection = () => {
>
Online play
</Button>
<Button variant="solid" fontSize="inherit" borderRadius="full" as="a" href="https://www.npmjs.com/search?q=%40my-react" target="_blank">
<Button variant="solid" fontSize="inherit" as="a" href="https://www.npmjs.com/search?q=%40my-react" target="_blank">
View on NPM
</Button>
</HStack>
Expand Down
Loading

0 comments on commit 1df546e

Please sign in to comment.