diff options
author | NumEricR <eric.github@gmail.com> | 2013-08-23 12:12:05 +0200 |
---|---|---|
committer | NumEricR <eric.github@gmail.com> | 2013-08-23 12:12:05 +0200 |
commit | 096fb74bf1bd0065b464e74503b55f37a09ff3f8 (patch) | |
tree | be28e5985785f28e9453623bdbda4c03c4bba495 | |
parent | 64fa45e262d24f75740b0df267bb2fc4cdf83fa2 (diff) | |
download | wallabag-096fb74bf1bd0065b464e74503b55f37a09ff3f8.tar.gz wallabag-096fb74bf1bd0065b464e74503b55f37a09ff3f8.tar.zst wallabag-096fb74bf1bd0065b464e74503b55f37a09ff3f8.zip |
CSS clean up on style.css file
Syntax homogenization (spaces, lowercase for hexa, ...)
Code refactoring
Simplification of some selectors
Simplification of "0px" and hexa values
More detailed font stack
Add cursor pointer on ".bouton" elements
-rw-r--r-- | tpl/css/style.css | 120 |
1 files changed, 55 insertions, 65 deletions
diff --git a/tpl/css/style.css b/tpl/css/style.css index e2a512f7..9b249989 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,16 +96,18 @@ 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 | /* |
91 | /*display: inline;*/ | 107 | #main .entrie .tools li { |
108 | display: inline; | ||
92 | } | 109 | } |
110 | */ | ||
93 | 111 | ||
94 | .tools { | 112 | .tools { |
95 | float: right; | 113 | float: right; |
@@ -98,7 +116,8 @@ header h1 { | |||
98 | } | 116 | } |
99 | 117 | ||
100 | .tools p { | 118 | .tools p { |
101 | font-size: 0.8em;} | 119 | font-size: 0.8em; |
120 | } | ||
102 | 121 | ||
103 | /* | 122 | /* |
104 | .tools ul { | 123 | .tools ul { |
@@ -110,16 +129,17 @@ header h1 { | |||
110 | line-height: 20px; | 129 | line-height: 20px; |
111 | } | 130 | } |
112 | 131 | ||
113 | .tools a.tool { | 132 | .tools .tool { |
114 | cursor: pointer; | 133 | cursor: pointer; |
115 | }*/ | 134 | }*/ |
116 | 135 | ||
117 | #main .entrie .tools a.tool span, #article .tools a.tool span { | 136 | #main .entrie .tools .tool span, #article .tools .tool span { |
118 | display: inline-block; | 137 | display: inline-block; |
119 | width: 16px; | 138 | width: 16px; |
120 | height: 16px; | 139 | height: 16px; |
121 | } | 140 | } |
122 | 141 | ||
142 | |||
123 | /*** ***/ | 143 | /*** ***/ |
124 | /*** ARTICLE PAGE ***/ | 144 | /*** ARTICLE PAGE ***/ |
125 | 145 | ||
@@ -136,7 +156,7 @@ header h1 { | |||
136 | 156 | ||
137 | .vieworiginal a, .vieworiginal a:hover, .vieworiginal a:visited { | 157 | .vieworiginal a, .vieworiginal a:hover, .vieworiginal a:visited { |
138 | text-decoration: none; | 158 | text-decoration: none; |
139 | color: #888888; | 159 | color: #888; |
140 | } | 160 | } |
141 | 161 | ||
142 | .backhome { | 162 | .backhome { |
@@ -146,51 +166,21 @@ header h1 { | |||
146 | #article .tools { | 166 | #article .tools { |
147 | position: relative; | 167 | position: relative; |
148 | display: inline; | 168 | display: inline; |
149 | top: 0px; | 169 | top: 0; |
150 | right: 0px; | 170 | right: 0; |
151 | width: 100%; | 171 | width: 100%; |
152 | } | 172 | } |
153 | 173 | ||
154 | #article .tools ul li{ | 174 | #article .tools ul li { |
155 | display: inline; | 175 | display: inline; |
156 | } | 176 | } |
157 | 177 | ||
158 | 178 | ||
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 | /*** ***/ | 179 | /*** ***/ |
190 | /*** ARTICLE PAGE ***/ | 180 | /*** ARTICLE PAGE ***/ |
191 | 181 | ||
192 | #article header, #article article { | 182 | #article header, #article article { |
193 | border-bottom: 1px solid #222222; | 183 | border-bottom: 1px solid #222; |
194 | } | 184 | } |
195 | 185 | ||
196 | 186 | ||
@@ -202,33 +192,33 @@ a, a:hover, a:visited { | |||
202 | text-align: right; | 192 | text-align: right; |
203 | } | 193 | } |
204 | .pagination a { | 194 | .pagination a { |
205 | border: 1px solid #D5D5D5; | 195 | border: 1px solid #d5d5d5; |
206 | color: #333; | 196 | color: #333; |
207 | font-size: 11px; | 197 | font-size: 11px; |
208 | font-weight: bold; | 198 | font-weight: bold; |
209 | height: 25px; | 199 | height: 25px; |
210 | padding: 4px 8px; | 200 | padding: 4px 8px; |
211 | text-decoration: none; | 201 | text-decoration: none; |
212 | margin:2px; | 202 | margin: 2px; |
213 | } | 203 | } |
214 | .pagination a:hover, .pagination a:active { | 204 | .pagination a:hover, .pagination a:active { |
215 | background:#efefef; | 205 | background-color: #efefef; |
216 | } | 206 | } |
217 | .pagination span.current { | 207 | .pagination .current { |
218 | background-color: #ccc; | 208 | background-color: #ccc; |
219 | border: 1px solid #D5D5D5; | 209 | border: 1px solid #d5d5d5; |
220 | color: #000; | 210 | color: #000; |
221 | font-size: 11px; | 211 | font-size: 11px; |
222 | font-weight: bold; | 212 | font-weight: bold; |
223 | height: 25px; | 213 | height: 25px; |
224 | padding: 4px 8px; | 214 | padding: 4px 8px; |
225 | text-decoration: none; | 215 | text-decoration: none; |
226 | margin:2px; | 216 | margin: 2px; |
227 | } | 217 | } |
228 | .pagination span.disabled { | 218 | .pagination .disabled { |
229 | border: 1px solid #EEEEEE; | 219 | border: 1px solid #eee; |
230 | color: #DDDDDD; | 220 | color: #ddd; |
231 | margin:2px; | 221 | margin: 2px; |
232 | padding: 4px 8px; | 222 | padding: 4px 8px; |
233 | font-size: 11px; | 223 | font-size: 11px; |
234 | font-weight: bold; | 224 | font-weight: bold; |
@@ -240,4 +230,4 @@ footer { | |||
240 | 230 | ||
241 | .reading-time { | 231 | .reading-time { |
242 | font-size: 0.8em; | 232 | font-size: 0.8em; |
243 | } \ No newline at end of file | 233 | } |