Commit 857ffb47b775934f802dde6feb96b6f343fdf760
extract lots of global.css into named mcss
mix irving committed on 9/18/2017, 6:34:44 AMParent: 23773bc1942c218dddfed2ed303a71256b50710e
Files changed
app/styles/css/global.js | changed |
app/styles/mcss/markdown.mcss | changed |
app/styles/mcss/lightbox.mcss | added |
app/styles/mcss/search-highlights.mcss | added |
app/styles/css/global.js | ||
---|---|---|
@@ -16,50 +16,8 @@ | ||
16 | 16 … | line-height: 1.4; |
17 | 17 … | color: #222; |
18 | 18 … | } |
19 | 19 … | |
20 | -blockquote { | |
21 | - border-left: 2px #ccc solid; | |
22 | - color: #666; | |
23 | - padding-left: .6rem; | |
24 | - margin-left: .6rem; | |
25 | - font-size: .85rem; | |
26 | -} | |
27 | - | |
28 | -blockquote p:last-child { | |
29 | - margin-bottom: .35ex; | |
30 | -} | |
31 | - | |
32 | -pre { | |
33 | - background-color: #f5f5f5; | |
34 | - padding: .3rem; | |
35 | - color: #444; | |
36 | -} | |
37 | - | |
38 | -.emoji { | |
39 | - height: 1.2em; | |
40 | - width: 1.2em; | |
41 | - vertical-align: middle; | |
42 | - margin-top: -0.2em; | |
43 | -} | |
44 | - | |
45 | -p, ul, ol { | |
46 | - margin-top: .35em; | |
47 | -} | |
48 | - | |
49 | -h1, h2, h3, h4, h5, h6 { | |
50 | - margin: 0; | |
51 | -} | |
52 | -h1, h2 { | |
53 | - margin-bottom: .5em | |
54 | -} | |
55 | -h1 { font-size: 1.4rem; } | |
56 | -h2 { font-size: 1.2em; } | |
57 | -h3 { font-size: 1.15rem; } | |
58 | -h4 { font-size: 1.12rem; } | |
59 | -h5 { font-size: 1.1rem; } | |
60 | -h6 { font-size: 1rem; } | |
61 | - | |
62 | 20 … | * { |
63 | 21 … | word-break: break-word; |
64 | 22 … | } |
65 | 23 … | |
@@ -67,43 +25,25 @@ | ||
67 | 25 … | color: #0088cc; |
68 | 26 … | text-decoration: none; |
69 | 27 … | } |
70 | 28 … | |
71 | -a:hover, | |
72 | -a:focus { | |
29 … | +a:hover, a:focus { | |
73 | 30 … | color: #005580; |
74 | 31 … | text-decoration: underline; |
75 | 32 … | } |
76 | 33 … | |
77 | -pre { | |
78 | - white-space: pre-wrap; | |
79 | - word-wrap: break-word; | |
34 … | +input:focus, .compose:focus { | |
35 … | + outline: none; | |
36 … | + border-color: #0088cc; | |
37 … | + box-shadow: 0 0 4px #0088cc; | |
80 | 38 … | } |
81 | 39 … | |
82 | -p { | |
83 | - margin-top: .35ex; | |
84 | -} | |
85 | - | |
86 | -hr { | |
87 | - border: solid #eee; | |
88 | - clear: both; | |
89 | - border-width: 1px 0 0; | |
90 | - height: 0; | |
91 | - margin-bottom: .9em; | |
92 | -} | |
93 | - | |
94 | 40 … | input, textarea { |
95 | 41 … | border: none; |
96 | 42 … | border-radius: .2em; |
97 | 43 … | font-family: sans-serif; |
98 | 44 … | } |
99 | 45 … | |
100 | -input:focus, .compose:focus, button:focus { | |
101 | - outline: none; | |
102 | - border-color: #0088cc; | |
103 | - box-shadow: 0 0 4px #0088cc; | |
104 | -} | |
105 | - | |
106 | 46 … | textarea { |
107 | 47 … | padding: .5em; |
108 | 48 … | font-size: 1em; |
109 | 49 … | } |
@@ -124,34 +64,15 @@ | ||
124 | 64 … | text-transform: uppercase; |
125 | 65 … | font-weight: bold; |
126 | 66 … | font-size: .7em; |
127 | 67 … | } |
128 | - | |
68 … | +button:focus { | |
69 … | + outline: none; | |
70 … | + border-color: #0088cc; | |
71 … | + box-shadow: 0 0 4px #0088cc; | |
72 … | +} | |
129 | 73 … | button:hover { |
130 | 74 … | background: #ccc; |
131 | 75 … | border: 1px solid #bbb; |
132 | 76 … | } |
133 | 77 … | |
134 | -/* TextNodeSearcher highlights */ | |
135 | - | |
136 | -highlight { | |
137 | - background: #ff8; | |
138 | -} | |
139 | - | |
140 | -/* lightbox - used in message-confirm */ | |
141 | - | |
142 | -div.lightbox { | |
143 | - position: fixed; | |
144 | - left: 0px; | |
145 | - right: 0px; | |
146 | - top: 50px; | |
147 | - overflow: auto; | |
148 | - width: 780px; | |
149 | - max-width: 100%; | |
150 | - padding: 25px; | |
151 | - margin: auto; | |
152 | - z-index: 2; | |
153 | - background: #f5f5f5; | |
154 | - border: 1px solid #eee; | |
155 | - border-radius: .2em; | |
156 | -} | |
157 | 78 … | ` |
app/styles/mcss/markdown.mcss | ||
---|---|---|
@@ -1,9 +1,52 @@ | ||
1 | 1 … | Markdown { |
2 | 2 … | |
3 | - ul { | |
3 … | + p, ul, ol { | |
4 … | + } | |
5 … | + | |
6 … | + hr { | |
7 … | + height: 0 | |
8 … | + border: solid #ddd | |
9 … | + border-width: 1px 0 0 | |
10 … | + clear: both | |
11 … | + margin-bottom: .9em | |
12 … | + white-space: pre-wrap | |
13 … | + word-wrap: break-word | |
14 … | + } | |
15 … | + | |
16 … | + pre { | |
17 … | + background-color: #f5f5f5 | |
18 … | + color: #c121dc | |
19 … | + padding: .3rem | |
20 … | + code { | |
21 … | + border: none | |
22 … | + } | |
23 … | + } | |
24 … | + (code) { | |
25 … | + background-color: #f5f5f5 | |
26 … | + color: #c121dc | |
27 … | + padding: 0.1rem .2rem | |
28 … | + border: 1px solid #e6e6e6 | |
29 … | + border-radius: 2px | |
30 … | + } | |
31 … | + | |
32 … | + blockquote { | |
33 … | + color: #666 | |
34 … | + font-style: italic | |
35 … | + font-size: 1rem | |
36 … | + | |
37 … | + p { | |
38 … | + :last-child { | |
39 … | + margin-bottom: .35ex | |
40 … | + } | |
41 … | + } | |
42 … | + } | |
43 … | + | |
44 … | + ul, ol { | |
4 | 45 … | padding-left: 1rem |
5 | - (ul) { | |
46 … | + margin-top: .35rem | |
47 … | + | |
48 … | + (ul, ol) { | |
6 | 49 … | padding-left: 1.5rem |
7 | 50 … | } |
8 | 51 … | |
9 | 52 … | } |
@@ -14,6 +57,27 @@ | ||
14 | 57 … | list-style-type: none |
15 | 58 … | } |
16 | 59 … | } |
17 | 60 … | |
18 | -} | |
19 | 61 … | |
62 … | + (img.emoji) { | |
63 … | + height: 1.2em | |
64 … | + width: 1.2em | |
65 … | + vertical-align: middle | |
66 … | + margin-top: -0.2em | |
67 … | + } | |
68 … | + | |
69 … | + | |
70 … | + h1, h2, h3, h4, h5, h6 { | |
71 … | + margin: 0 | |
72 … | + } | |
73 … | + h1, h2 { | |
74 … | + margin-bottom: .5em | |
75 … | + } | |
76 … | + h1 { font-size: 1.4rem } | |
77 … | + h2 { font-size: 1.2em } | |
78 … | + h3 { font-size: 1.15rem } | |
79 … | + h4 { font-size: 1.12rem } | |
80 … | + h5 { font-size: 1.1rem } | |
81 … | + h6 { font-size: 1rem } | |
82 … | + } | |
83 … | + |
app/styles/mcss/lightbox.mcss | ||
---|---|---|
@@ -1,0 +1,20 @@ | ||
1 … | +/* lightbox - used in message-confirm */ | |
2 … | + | |
3 … | +body { | |
4 … | + div.lightbox { | |
5 … | + position: fixed | |
6 … | + left: 0px | |
7 … | + right: 0px | |
8 … | + top: 50px | |
9 … | + overflow: auto | |
10 … | + width: 780px | |
11 … | + max-width: 100% | |
12 … | + padding: 25px | |
13 … | + margin: auto | |
14 … | + z-index: 2 | |
15 … | + background: #f5f5f5 | |
16 … | + border: 1px solid #eee | |
17 … | + border-radius: .2em | |
18 … | + } | |
19 … | +} | |
20 … | + |
Built with git-ssb-web