diff options
author | Nicolas LÅ“uillet <nicolas.loeuillet@gmail.com> | 2013-08-25 12:12:53 -0700 |
---|---|---|
committer | Nicolas LÅ“uillet <nicolas.loeuillet@gmail.com> | 2013-08-25 12:12:53 -0700 |
commit | c51be6b697da573cdcf0788eb8617130ce5517a4 (patch) | |
tree | 642eaf70afb134dee5f274c84bf15b8aab00c117 /tpl/css | |
parent | 7ba37bd91a43321196e6d867caf9e298e82c6d6c (diff) | |
parent | 063fc1a7baaf6f7e1fb08eced058962a6140a471 (diff) | |
download | wallabag-c51be6b697da573cdcf0788eb8617130ce5517a4.tar.gz wallabag-c51be6b697da573cdcf0788eb8617130ce5517a4.tar.zst wallabag-c51be6b697da573cdcf0788eb8617130ce5517a4.zip |
Merge pull request #181 from inthepoche/dev
beta4
Diffstat (limited to 'tpl/css')
-rw-r--r-- | tpl/css/print.css | 19 | ||||
-rw-r--r-- | tpl/css/style-light.css | 4 | ||||
-rw-r--r-- | tpl/css/style.css | 160 |
3 files changed, 111 insertions, 72 deletions
diff --git a/tpl/css/print.css b/tpl/css/print.css new file mode 100644 index 00000000..a3b0a599 --- /dev/null +++ b/tpl/css/print.css | |||
@@ -0,0 +1,19 @@ | |||
1 | body > header, | ||
2 | body > footer, | ||
3 | a.top_link, | ||
4 | div.tools, | ||
5 | header div | ||
6 | { | ||
7 | display: none !important; | ||
8 | } | ||
9 | |||
10 | article | ||
11 | { | ||
12 | border: none !important; | ||
13 | } | ||
14 | |||
15 | div.vieworiginal a::after | ||
16 | { | ||
17 | margin-left: 5px; | ||
18 | content: "("attr(href)")"; | ||
19 | } | ||
diff --git a/tpl/css/style-light.css b/tpl/css/style-light.css index 9ea7955a..e2788a1c 100644 --- a/tpl/css/style-light.css +++ b/tpl/css/style-light.css | |||
@@ -44,6 +44,10 @@ a.twitter span { | |||
44 | background: url('../img/light/twitter.png') no-repeat; | 44 | background: url('../img/light/twitter.png') no-repeat; |
45 | } | 45 | } |
46 | 46 | ||
47 | a.shaarli span { | ||
48 | background: url('../img/light/shaarli.png') no-repeat; | ||
49 | } | ||
50 | |||
47 | a.email span { | 51 | a.email span { |
48 | background: url('../img/light/envelop.png') no-repeat; | 52 | background: url('../img/light/envelop.png') no-repeat; |
49 | } | 53 | } |
diff --git a/tpl/css/style.css b/tpl/css/style.css index e2a512f7..7633534c 100644 --- a/tpl/css/style.css +++ b/tpl/css/style.css | |||
@@ -1,7 +1,8 @@ | |||
1 | body { | 1 | body { |
2 | font-size: 16px; | 2 | font-size: 16px; |
3 | font-family: 'Roboto', sans-serif; | 3 | font-family: 'Roboto', Verdana, Geneva, sans-serif; |
4 | margin: 10px; | 4 | margin: 10px; |
5 | color: #000; | ||
5 | } | 6 | } |
6 | 7 | ||
7 | header { | 8 | header { |
@@ -12,52 +13,67 @@ header h1 { | |||
12 | font-size: 1.3em; | 13 | font-size: 1.3em; |
13 | } | 14 | } |
14 | 15 | ||
16 | a, a:hover, a:visited { | ||
17 | color: #000; | ||
18 | } | ||
19 | |||
15 | .bouton { | 20 | .bouton { |
16 | border-radius: 2px; | 21 | background-color: #000; |
22 | color: #fff; | ||
23 | border: none; | ||
24 | border-radius: 2px; | ||
25 | } | ||
26 | .bouton:hover { | ||
27 | background-color: #222; | ||
28 | color: #f1f1f1; | ||
29 | cursor: pointer; | ||
17 | } | 30 | } |
18 | 31 | ||
19 | #main { | 32 | #main { |
20 | margin: 0 auto; | 33 | margin: 0 auto; |
21 | } | 34 | } |
22 | 35 | ||
23 | #main ul#links { | 36 | #main #links { |
24 | padding: 0; | 37 | padding: 0; |
25 | list-style-type: none; | 38 | list-style-type: none; |
26 | text-align: center; | 39 | text-align: center; |
27 | font-size: 0.9em; | 40 | font-size: 0.9em; |
28 | } | 41 | } |
29 | 42 | ||
30 | #main ul#links li { | 43 | #main #links li { |
31 | display: inline; | 44 | display: inline; |
32 | } | 45 | } |
33 | 46 | ||
34 | #main ul#links li a.current { | 47 | #main #links li .current { |
48 | background-color: #000; | ||
49 | color: #fff; | ||
35 | -webkit-border-radius: 2px; | 50 | -webkit-border-radius: 2px; |
36 | border-radius: 2px; | 51 | border-radius: 2px; |
37 | } | 52 | } |
38 | 53 | ||
39 | #main ul#sort { | 54 | #main #sort { |
40 | padding: 0; | 55 | padding: 0; |
41 | list-style-type: none; | 56 | list-style-type: none; |
42 | text-align: center; | 57 | text-align: center; |
43 | opacity: 0.5; | 58 | opacity: 0.5; |
44 | } | 59 | } |
45 | 60 | ||
46 | #main ul#sort li { | 61 | #main #sort li { |
47 | display: inline; | 62 | display: inline; |
48 | font-size: 0.9em; | 63 | font-size: 0.9em; |
49 | } | 64 | } |
50 | 65 | ||
51 | #main ul#sort img:hover { | 66 | #main #sort img:hover { |
52 | cursor: pointer; | 67 | cursor: pointer; |
53 | } | 68 | } |
54 | 69 | ||
55 | 70 | #links a { | |
56 | #links a{ | ||
57 | text-decoration: none; | 71 | text-decoration: none; |
58 | padding: 5px 10px; | 72 | padding: 5px 10px; |
59 | } | 73 | } |
60 | #links a:hover{ | 74 | #links a:hover { |
75 | background-color: #040707; | ||
76 | color: #F1F1F1; | ||
61 | -webkit-border-radius: 2px; | 77 | -webkit-border-radius: 2px; |
62 | border-radius: 2px; | 78 | border-radius: 2px; |
63 | } | 79 | } |
@@ -65,7 +81,7 @@ header h1 { | |||
65 | /*** ***/ | 81 | /*** ***/ |
66 | /*** LINKS DISPLAY ***/ | 82 | /*** LINKS DISPLAY ***/ |
67 | 83 | ||
68 | #main a.tool { | 84 | #main .tool { |
69 | text-decoration: none; | 85 | text-decoration: none; |
70 | cursor: pointer; | 86 | cursor: pointer; |
71 | } | 87 | } |
@@ -80,17 +96,23 @@ header h1 { | |||
80 | } | 96 | } |
81 | 97 | ||
82 | #main #content .entrie { | 98 | #main #content .entrie { |
83 | border-bottom: 1px dashed #222222; | 99 | border-bottom: 1px dashed #222; |
84 | } | 100 | } |
85 | 101 | ||
86 | #main .entrie ul.tools { | 102 | #main .entrie .tools { |
87 | list-style-type: none; | 103 | list-style-type: none; |
88 | } | 104 | } |
89 | 105 | ||
90 | #main .entrie ul.tools li { | 106 | #main .entrie .tools + p { |
91 | /*display: inline;*/ | 107 | min-height: 5.5em; |
92 | } | 108 | } |
93 | 109 | ||
110 | /* | ||
111 | #main .entrie .tools li { | ||
112 | display: inline; | ||
113 | } | ||
114 | */ | ||
115 | |||
94 | .tools { | 116 | .tools { |
95 | float: right; | 117 | float: right; |
96 | text-align: right; | 118 | text-align: right; |
@@ -98,7 +120,8 @@ header h1 { | |||
98 | } | 120 | } |
99 | 121 | ||
100 | .tools p { | 122 | .tools p { |
101 | font-size: 0.8em;} | 123 | font-size: 0.8em; |
124 | } | ||
102 | 125 | ||
103 | /* | 126 | /* |
104 | .tools ul { | 127 | .tools ul { |
@@ -110,22 +133,32 @@ header h1 { | |||
110 | line-height: 20px; | 133 | line-height: 20px; |
111 | } | 134 | } |
112 | 135 | ||
113 | .tools a.tool { | 136 | .tools .tool { |
114 | cursor: pointer; | 137 | cursor: pointer; |
115 | }*/ | 138 | }*/ |
116 | 139 | ||
117 | #main .entrie .tools a.tool span, #article .tools a.tool span { | 140 | #main .entrie .tools .tool span, #article .tools .tool span { |
118 | display: inline-block; | 141 | display: inline-block; |
119 | width: 16px; | 142 | width: 16px; |
120 | height: 16px; | 143 | height: 16px; |
144 | /* Hide textual content */ | ||
145 | text-indent: -9999px; | ||
146 | text-align: left; | ||
147 | overflow: hidden; | ||
121 | } | 148 | } |
122 | 149 | ||
150 | |||
123 | /*** ***/ | 151 | /*** ***/ |
124 | /*** ARTICLE PAGE ***/ | 152 | /*** ARTICLE PAGE ***/ |
125 | 153 | ||
126 | #article { | 154 | #article { |
127 | margin: 0 auto; | 155 | margin: 0 auto; |
128 | } | 156 | } |
157 | |||
158 | #article header, #article article { | ||
159 | border-bottom: 1px solid #222; | ||
160 | } | ||
161 | |||
129 | #article header { | 162 | #article header { |
130 | text-align: left; | 163 | text-align: left; |
131 | } | 164 | } |
@@ -136,7 +169,7 @@ header h1 { | |||
136 | 169 | ||
137 | .vieworiginal a, .vieworiginal a:hover, .vieworiginal a:visited { | 170 | .vieworiginal a, .vieworiginal a:hover, .vieworiginal a:visited { |
138 | text-decoration: none; | 171 | text-decoration: none; |
139 | color: #888888; | 172 | color: #888; |
140 | } | 173 | } |
141 | 174 | ||
142 | .backhome { | 175 | .backhome { |
@@ -146,54 +179,16 @@ header h1 { | |||
146 | #article .tools { | 179 | #article .tools { |
147 | position: relative; | 180 | position: relative; |
148 | display: inline; | 181 | display: inline; |
149 | top: 0px; | 182 | top: 0; |
150 | right: 0px; | 183 | right: 0; |
151 | width: 100%; | 184 | width: 100%; |
152 | } | 185 | } |
153 | 186 | ||
154 | #article .tools ul li{ | 187 | #article .tools ul li { |
155 | display: inline; | 188 | display: inline; |
156 | } | 189 | } |
157 | 190 | ||
158 | 191 | ||
159 | /*** GENERAL ***/ | ||
160 | body { | ||
161 | color: #000; | ||
162 | } | ||
163 | |||
164 | a, a:hover, a:visited { | ||
165 | color: #000; | ||
166 | } | ||
167 | |||
168 | .bouton { | ||
169 | background-color: #000; | ||
170 | color: #fff; | ||
171 | border: none; | ||
172 | } | ||
173 | .bouton:hover { | ||
174 | background-color: #222222; | ||
175 | color: #F1F1F1; | ||
176 | } | ||
177 | |||
178 | #main ul#links li a.current { | ||
179 | background-color: #000; | ||
180 | color: #fff; | ||
181 | } | ||
182 | |||
183 | #links a:hover{ | ||
184 | background-color: #040707; | ||
185 | color: #F1F1F1; | ||
186 | } | ||
187 | |||
188 | |||
189 | /*** ***/ | ||
190 | /*** ARTICLE PAGE ***/ | ||
191 | |||
192 | #article header, #article article { | ||
193 | border-bottom: 1px solid #222222; | ||
194 | } | ||
195 | |||
196 | |||
197 | /* Pagination */ | 192 | /* Pagination */ |
198 | .pagination { | 193 | .pagination { |
199 | clear: both; | 194 | clear: both; |
@@ -202,42 +197,63 @@ a, a:hover, a:visited { | |||
202 | text-align: right; | 197 | text-align: right; |
203 | } | 198 | } |
204 | .pagination a { | 199 | .pagination a { |
205 | border: 1px solid #D5D5D5; | 200 | border: 1px solid #d5d5d5; |
206 | color: #333; | 201 | color: #333; |
207 | font-size: 11px; | 202 | font-size: 11px; |
208 | font-weight: bold; | 203 | font-weight: bold; |
209 | height: 25px; | 204 | height: 25px; |
210 | padding: 4px 8px; | 205 | padding: 4px 8px; |
211 | text-decoration: none; | 206 | text-decoration: none; |
212 | margin:2px; | 207 | margin: 2px; |
213 | } | 208 | } |
214 | .pagination a:hover, .pagination a:active { | 209 | .pagination a:hover, .pagination a:active { |
215 | background:#efefef; | 210 | background-color: #efefef; |
216 | } | 211 | } |
217 | .pagination span.current { | 212 | .pagination .current { |
218 | background-color: #ccc; | 213 | background-color: #ccc; |
219 | border: 1px solid #D5D5D5; | 214 | border: 1px solid #d5d5d5; |
220 | color: #000; | 215 | color: #000; |
221 | font-size: 11px; | 216 | font-size: 11px; |
222 | font-weight: bold; | 217 | font-weight: bold; |
223 | height: 25px; | 218 | height: 25px; |
224 | padding: 4px 8px; | 219 | padding: 4px 8px; |
225 | text-decoration: none; | 220 | text-decoration: none; |
226 | margin:2px; | 221 | margin: 2px; |
227 | } | 222 | } |
228 | .pagination span.disabled { | 223 | .pagination .disabled { |
229 | border: 1px solid #EEEEEE; | 224 | border: 1px solid #eee; |
230 | color: #DDDDDD; | 225 | color: #ddd; |
231 | margin:2px; | 226 | margin: 2px; |
232 | padding: 4px 8px; | 227 | padding: 4px 8px; |
233 | font-size: 11px; | 228 | font-size: 11px; |
234 | font-weight: bold; | 229 | font-weight: bold; |
235 | } | 230 | } |
236 | 231 | ||
232 | #bookmarklet { | ||
233 | padding: 5px; | ||
234 | border: 1px dashed #808080; | ||
235 | background: #fff; | ||
236 | cursor: move; | ||
237 | } | ||
238 | |||
239 | .top_link { | ||
240 | position: fixed; | ||
241 | right: 15px; | ||
242 | bottom: 15px; | ||
243 | display: none; | ||
244 | padding: 20px; | ||
245 | background: #ccc; | ||
246 | -moz-border-radius: 40px; | ||
247 | -webkit-border-radius: 40px; | ||
248 | border-radius: 40px; | ||
249 | opacity: 0.9; | ||
250 | z-index: 2000; | ||
251 | } | ||
252 | |||
237 | footer { | 253 | footer { |
238 | clear: both; | 254 | clear: both; |
239 | } | 255 | } |
240 | 256 | ||
241 | .reading-time { | 257 | .reading-time { |
242 | font-size: 0.8em; | 258 | font-size: 0.8em; |
243 | } \ No newline at end of file | 259 | } |