Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up
Appearance settings
This repository was archived by the owner on Nov 1, 2021. It is now read-only.

Commit0c8219c

Browse files
committed
refactor(up-to-date): server & theme wrapper
1 parentbc8cca8 commit0c8219c

File tree

8 files changed

+484
-287
lines changed

8 files changed

+484
-287
lines changed

‎containers/ThemeWrapper/AntOverWrite.js‎

Lines changed: 138 additions & 138 deletions
Large diffs are not rendered by default.

‎containers/ThemeWrapper/CodeHighlight.js‎

Lines changed: 39 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
importstyledfrom'styled-components'
1+
import{createGlobalStyle}from'styled-components'
22
import{theme}from'../../utils'
33

44
/*
@@ -30,75 +30,75 @@ import { theme } from '../../utils'
3030
cyan #2aa198
3131
green #859900
3232
*/
33-
constCodeHighlight=styled.div`
33+
constCodeHighlight=createGlobalStyle`
3434
code[class*='language-'],
3535
pre[class*='language-'] {
36-
color: #657b83; /* base00 */
37-
font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
38-
text-align: left;
39-
white-space: pre;
40-
word-spacing: normal;
41-
word-break: normal;
42-
word-wrap: normal;
36+
color: #657b83; /* base00 */
37+
font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
38+
text-align: left;
39+
white-space: pre;
40+
word-spacing: normal;
41+
word-break: normal;
42+
word-wrap: normal;
4343
44-
line-height: 1.5;
44+
line-height: 1.5;
4545
46-
-moz-tab-size: 4;
47-
-o-tab-size: 4;
48-
tab-size: 4;
46+
-moz-tab-size: 4;
47+
-o-tab-size: 4;
48+
tab-size: 4;
4949
50-
-webkit-hyphens: none;
51-
-moz-hyphens: none;
52-
-ms-hyphens: none;
53-
hyphens: none;
50+
-webkit-hyphens: none;
51+
-moz-hyphens: none;
52+
-ms-hyphens: none;
53+
hyphens: none;
5454
}
5555
5656
pre[class*='language-']::-moz-selection,
5757
pre[class*='language-'] ::-moz-selection,
5858
code[class*='language-']::-moz-selection,
5959
code[class*='language-'] ::-moz-selection {
60-
background: #073642; /* base02 */
60+
background: #073642; /* base02 */
6161
}
6262
6363
pre[class*='language-']::selection,
6464
pre[class*='language-'] ::selection,
6565
code[class*='language-']::selection,
6666
code[class*='language-'] ::selection {
67-
background: #073642; /* base02 */
67+
background: #073642; /* base02 */
6868
}
6969
7070
/* Code blocks */
7171
pre[class*='language-'] {
72-
padding: 1em;
73-
margin: 0.5em 0;
74-
overflow: auto;
75-
border-radius: 0.3em;
72+
padding: 1em;
73+
margin: 0.5em 0;
74+
overflow: auto;
75+
border-radius: 0.3em;
7676
}
7777
7878
:not(pre) > code[class*='language-'],
7979
pre[class*='language-'] {
80-
background-color:${theme('code.bg')}; /* #fdf6e3;*/
80+
background-color:${theme('code.bg')}; /* #fdf6e3;*/
8181
}
8282
8383
/* Inline code */
8484
:not(pre) > code[class*='language-'] {
85-
padding: 0.1em;
86-
border-radius: 0.3em;
85+
padding: 0.1em;
86+
border-radius: 0.3em;
8787
}
8888
8989
.token.comment,
9090
.token.prolog,
9191
.token.doctype,
9292
.token.cdata {
93-
color: #93a1a1; /* base1 */
93+
color: #93a1a1; /* base1 */
9494
}
9595
9696
.token.punctuation {
97-
color: #586e75; /* base01 */
97+
color: #586e75; /* base01 */
9898
}
9999
100100
.namespace {
101-
opacity: 0.7;
101+
opacity: 0.7;
102102
}
103103
104104
.token.property,
@@ -108,7 +108,7 @@ const CodeHighlight = styled.div`
108108
.token.constant,
109109
.token.symbol,
110110
.token.deleted {
111-
color: #268bd2; /* blue */
111+
color: #268bd2; /* blue */
112112
}
113113
114114
.token.selector,
@@ -118,40 +118,40 @@ const CodeHighlight = styled.div`
118118
.token.builtin,
119119
.token.url,
120120
.token.inserted {
121-
color: #2aa198; /* cyan */
121+
color: #2aa198; /* cyan */
122122
}
123123
124124
.token.entity {
125-
color: #657b83; /* base00 */
126-
background: #eee8d5; /* base2 */
125+
color: #657b83; /* base00 */
126+
background: #eee8d5; /* base2 */
127127
}
128128
129129
.token.atrule,
130130
.token.attr-value,
131131
.token.keyword {
132-
color: #859900; /* green */
132+
color: #859900; /* green */
133133
}
134134
135135
.token.function {
136-
color: #b58900; /* yellow */
136+
color: #b58900; /* yellow */
137137
}
138138
139139
.token.regex,
140140
.token.important,
141141
.token.variable {
142-
color: #cb4b16; /* orange */
142+
color: #cb4b16; /* orange */
143143
}
144144
145145
.token.important,
146146
.token.bold {
147-
font-weight: bold;
147+
font-weight: bold;
148148
}
149149
.token.italic {
150-
font-style: italic;
150+
font-style: italic;
151151
}
152152
153153
.token.entity {
154-
cursor: help;
154+
cursor: help;
155155
}
156156
`
157157

Lines changed: 124 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,124 @@
1+
import{createGlobalStyle}from'styled-components'
2+
importnormalizefrom'./normalize'
3+
import{theme,cs}from'../../utils'
4+
5+
constGlobalStyle=createGlobalStyle`
6+
${normalize};
7+
html {
8+
background-color:${theme('htmlBg')};
9+
}
10+
*::-moz-selection {
11+
background-color:${theme('selectionBg')} !important;
12+
}
13+
14+
*::selection {
15+
background-color:${theme('selectionBg')} !important;
16+
}
17+
a:hover {
18+
color:${theme('a.hover')};
19+
}
20+
a:active {
21+
color:${theme('a.active')};
22+
}
23+
24+
.iziToast {
25+
border: 1px solid !important;
26+
border-color:${theme('toast.border')} !important;
27+
background-color:${theme('toast.bg')} !important;
28+
min-height: 36px !important;
29+
padding: 2px 45px 0px 0 !important;
30+
}
31+
.iziToast > .iziToast-body .iziToast-title {
32+
color:${theme('toast.title')} !important;
33+
}
34+
.iziToast-wrapper-topRight {
35+
top: 25px !important;
36+
}
37+
.iziToast > .iziToast-body .iziToast-message {
38+
color:${theme('toast.message')} !important;
39+
}
40+
41+
// mentions
42+
.typewriter-mention {
43+
color:${theme('comment.mentionText')};
44+
background:${theme('comment.mentionTextBg')};
45+
cursor: pointer;
46+
display: inline-block;
47+
padding-left: 4px;
48+
padding-right: 4px;
49+
margin-bottom: 4px;
50+
border-radius: 3px;
51+
text-decoration: none;
52+
}
53+
.typewriter-mention:hover,
54+
.typewriter-mention:focus {
55+
color:${theme('comment.mentionText')};
56+
background:${theme('comment.mentionTextBg')};
57+
outline: 0; /* reset for :focus */
58+
}
59+
60+
.typewriter-suggestions {
61+
border: 1px solid;
62+
border-color:${theme('comment.mentionBorder')};
63+
background:${theme('comment.mentionBg')};
64+
box-shadow:${theme('comment.mentionShadow')};
65+
margin-top: 10px;
66+
position: absolute;
67+
min-width: 160px;
68+
max-width: 300px;
69+
70+
border-radius: 2px;
71+
cursor: pointer;
72+
z-index: 2;
73+
display: flex;
74+
-webkit-box-orient: vertical;
75+
-webkit-box-direction: normal;
76+
flex-direction: column;
77+
box-sizing: border-box;
78+
-webkit-transform: scale(0);
79+
transform: scale(0);
80+
}
81+
.typewriter-mentionSuggestionsEntry {
82+
transition: background-color 0.4s cubic-bezier(0.27, 1.27, 0.48, 0.56);
83+
padding: 7px 10px 3px 10px;
84+
padding-left: 10px;
85+
display: flex;
86+
}
87+
.typewriter-mentionSuggestionsEntry:active {
88+
background-color:${theme('baseColor.error')};
89+
}
90+
.typewriter-mentionSuggestionsEntryFocused {
91+
background-color:${theme('comment.mentionActiveBg')};
92+
padding: 7px 10px 3px 10px;
93+
display: flex;
94+
}
95+
96+
.typewriter-mentionSuggestionsEntryText {
97+
display: inline-block;
98+
margin-left: 8px;
99+
100+
${cs.truncate('200px')};
101+
max-width: 368px;
102+
font-size: 1rem;
103+
margin-bottom: 0.2em;
104+
color:${theme('thread.articleTitle')};
105+
}
106+
107+
.typewriter-mentionSuggestionsEntryAvatar {
108+
display: inline-block;
109+
width: 24px;
110+
height: 24px;
111+
border-radius: 12px;
112+
}
113+
114+
.typewriter-link {
115+
color:${theme('markdown.link')};
116+
117+
&:hover {
118+
color:${theme('markdown.link')};
119+
text-decoration: underline;
120+
}
121+
}
122+
`
123+
124+
exportdefaultGlobalStyle

‎containers/ThemeWrapper/index.js‎

Lines changed: 7 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -11,41 +11,20 @@ import { ThemeProvider } from 'styled-components'
1111
import{storePlug}from'../../utils'
1212

1313
importAntOverWritefrom'./AntOverWrite'
14-
importNormalizeStylefrom'./NormalizeStyle'
1514
// import MarkDownStyle from './MarkDownStyle'
1615
importCodeHighlightfrom'./CodeHighlight'
16+
importGlobalStylefrom'./GlobalStyle'
1717

1818
// TODO: mv MarkDownStyle && CodeHighlight to it's own container
1919

2020
constThemeObserver=({ children, theme})=>(
2121
<ThemeProvidertheme={theme.themeData}>
22-
<AntOverWrite>
23-
<CodeHighlight>
24-
<styleglobaljsx>
25-
{NormalizeStyle}
26-
</style>
27-
<styleglobaljsx>{`
28-
html {
29-
background-color:${theme.themeData.htmlBg};
30-
}
31-
*::-moz-selection {
32-
background-color:${theme.themeData.selection_bg} !important;
33-
}
34-
35-
*::selection {
36-
background-color:${theme.themeData.selection_bg} !important;
37-
}
38-
39-
a:hover {
40-
color:${theme.themeData.a.hover};
41-
}
42-
a:active {
43-
color:${theme.themeData.a.active};
44-
}
45-
`}</style>
46-
<div>{children}</div>
47-
</CodeHighlight>
48-
</AntOverWrite>
22+
<React.Fragment>
23+
<div>{children}</div>
24+
<AntOverWrite/>
25+
<CodeHighlight/>
26+
<GlobalStyle/>
27+
</React.Fragment>
4928
</ThemeProvider>
5029
)
5130

0 commit comments

Comments
 (0)
[8]ページ先頭
©2009-2025 Movatter.jp