diff options
author | Nicolas LÅ“uillet <nicolas.loeuillet@gmail.com> | 2013-08-05 21:56:32 +0200 |
---|---|---|
committer | Nicolas LÅ“uillet <nicolas.loeuillet@gmail.com> | 2013-08-05 21:56:32 +0200 |
commit | 6a361945eaf86a978b82bd6fb3442fe64428d9df (patch) | |
tree | ab7e2cff6301b22e5e54ce0321b13502806d7546 /tpl/css/style.css | |
parent | 55821e04c188997d258645975220828e195d0df4 (diff) | |
download | wallabag-6a361945eaf86a978b82bd6fb3442fe64428d9df.tar.gz wallabag-6a361945eaf86a978b82bd6fb3442fe64428d9df.tar.zst wallabag-6a361945eaf86a978b82bd6fb3442fe64428d9df.zip |
new design, pagination & more
Diffstat (limited to 'tpl/css/style.css')
-rw-r--r-- | tpl/css/style.css | 215 |
1 files changed, 124 insertions, 91 deletions
diff --git a/tpl/css/style.css b/tpl/css/style.css index 333a0b77..8808b7ed 100644 --- a/tpl/css/style.css +++ b/tpl/css/style.css | |||
@@ -1,6 +1,6 @@ | |||
1 | /*** GENERAL ***/ | ||
2 | body { | 1 | body { |
3 | font: 20px/1.3em Palatino,Georgia,serif; | 2 | font-size: 16px; |
3 | font-family: 'Roboto', sans-serif; | ||
4 | margin: 10px; | 4 | margin: 10px; |
5 | } | 5 | } |
6 | 6 | ||
@@ -16,6 +16,10 @@ header h1 { | |||
16 | border-radius: 2px; | 16 | border-radius: 2px; |
17 | } | 17 | } |
18 | 18 | ||
19 | #main { | ||
20 | margin: 0 auto; | ||
21 | } | ||
22 | |||
19 | #main ul#links { | 23 | #main ul#links { |
20 | padding: 0; | 24 | padding: 0; |
21 | list-style-type: none; | 25 | list-style-type: none; |
@@ -36,6 +40,7 @@ header h1 { | |||
36 | padding: 0; | 40 | padding: 0; |
37 | list-style-type: none; | 41 | list-style-type: none; |
38 | text-align: center; | 42 | text-align: center; |
43 | opacity: 0.5; | ||
39 | } | 44 | } |
40 | 45 | ||
41 | #main ul#sort li { | 46 | #main ul#sort li { |
@@ -47,31 +52,16 @@ header h1 { | |||
47 | cursor: pointer; | 52 | cursor: pointer; |
48 | } | 53 | } |
49 | 54 | ||
50 | ul#messages { | ||
51 | |||
52 | } | ||
53 | 55 | ||
54 | #main, #article { | 56 | #links a{ |
55 | margin: 0 auto; | ||
56 | } | ||
57 | |||
58 | #links a, .backhome a, .support a{ | ||
59 | text-decoration: none; | 57 | text-decoration: none; |
60 | padding: 5px 10px; | 58 | padding: 5px 10px; |
61 | } | 59 | } |
62 | #links a:hover, .backhome a:hover, .support a:hover{ | 60 | #links a:hover{ |
63 | -webkit-border-radius: 2px; | 61 | -webkit-border-radius: 2px; |
64 | border-radius: 2px; | 62 | border-radius: 2px; |
65 | } | 63 | } |
66 | 64 | ||
67 | .support { | ||
68 | font-size: 14px; | ||
69 | } | ||
70 | |||
71 | footer { | ||
72 | text-align: right; | ||
73 | } | ||
74 | |||
75 | /*** ***/ | 65 | /*** ***/ |
76 | /*** LINKS DISPLAY ***/ | 66 | /*** LINKS DISPLAY ***/ |
77 | 67 | ||
@@ -80,33 +70,41 @@ footer { | |||
80 | cursor: pointer; | 70 | cursor: pointer; |
81 | } | 71 | } |
82 | 72 | ||
83 | input[type=submit].delete { | ||
84 | width : 16px; | ||
85 | height :16px; | ||
86 | border : none; | ||
87 | cursor: pointer; | ||
88 | font-size : 0; | ||
89 | } | ||
90 | |||
91 | #main #content { | 73 | #main #content { |
92 | margin-top: 20px; | 74 | margin-top: 20px; |
93 | } | 75 | } |
94 | 76 | ||
95 | #main .entrie { | 77 | #main #content h2 { |
96 | padding: 15px; | 78 | font-size: 1.3em; |
97 | min-height: 8em; | 79 | text-decoration: none; |
98 | border: 1px solid; | 80 | } |
81 | |||
82 | #main #content .entrie { | ||
83 | border-bottom: 1px solid #222222; | ||
99 | } | 84 | } |
100 | 85 | ||
101 | #main .entrie h2 a { | 86 | #main .entrie h2 a { |
102 | text-decoration: none; | 87 | text-decoration: none; |
103 | } | 88 | } |
104 | 89 | ||
90 | #main .entrie ul.tools { | ||
91 | list-style-type: none; | ||
92 | } | ||
93 | |||
94 | #main .entrie ul.tools li { | ||
95 | /*display: inline;*/ | ||
96 | } | ||
97 | |||
105 | .tools { | 98 | .tools { |
106 | float: right; | 99 | float: right; |
107 | text-align: right; | 100 | text-align: right; |
101 | opacity: 0.5; | ||
108 | } | 102 | } |
109 | 103 | ||
104 | .tools p { | ||
105 | font-size: 0.8em;} | ||
106 | |||
107 | /* | ||
110 | .tools ul { | 108 | .tools ul { |
111 | padding: 0; margin: 0; | 109 | padding: 0; margin: 0; |
112 | list-style-type: none; | 110 | list-style-type: none; |
@@ -118,19 +116,7 @@ input[type=submit].delete { | |||
118 | 116 | ||
119 | .tools a.tool { | 117 | .tools a.tool { |
120 | cursor: pointer; | 118 | cursor: pointer; |
121 | } | 119 | }*/ |
122 | |||
123 | #article .tools { | ||
124 | position: relative; | ||
125 | display: inline; | ||
126 | top: 0px; | ||
127 | right: 0px; | ||
128 | width: 100%; | ||
129 | } | ||
130 | |||
131 | #article .tools ul li{ | ||
132 | display: inline; | ||
133 | } | ||
134 | 120 | ||
135 | #main .entrie .tools a.tool span, #article .tools a.tool span { | 121 | #main .entrie .tools a.tool span, #article .tools a.tool span { |
136 | display: inline-block; | 122 | display: inline-block; |
@@ -146,10 +132,9 @@ input[type=submit].delete { | |||
146 | /*** ***/ | 132 | /*** ***/ |
147 | /*** ARTICLE PAGE ***/ | 133 | /*** ARTICLE PAGE ***/ |
148 | 134 | ||
149 | body.article { | 135 | #article { |
150 | font: 20px/1.3em Palatino,Georgia,serif; | 136 | margin: 0 auto; |
151 | } | 137 | } |
152 | |||
153 | #article header { | 138 | #article header { |
154 | text-align: left; | 139 | text-align: left; |
155 | } | 140 | } |
@@ -158,58 +143,106 @@ body.article { | |||
158 | text-decoration: none; | 143 | text-decoration: none; |
159 | } | 144 | } |
160 | 145 | ||
161 | .vieworiginal a { | 146 | .vieworiginal a, .vieworiginal a:hover, .vieworiginal a:visited { |
162 | text-decoration: none; | 147 | text-decoration: none; |
148 | color: #888888; | ||
163 | } | 149 | } |
164 | 150 | ||
165 | .backhome { | 151 | .backhome { |
166 | display: inline; | 152 | display: inline; |
167 | } | 153 | } |
168 | 154 | ||
155 | #article .tools { | ||
156 | position: relative; | ||
157 | display: inline; | ||
158 | top: 0px; | ||
159 | right: 0px; | ||
160 | width: 100%; | ||
161 | } | ||
162 | |||
163 | #article .tools ul li{ | ||
164 | display: inline; | ||
165 | } | ||
166 | |||
167 | |||
168 | /*** GENERAL ***/ | ||
169 | body { | ||
170 | color: #000; | ||
171 | } | ||
172 | |||
173 | a, a:hover, a:visited { | ||
174 | color: #000; | ||
175 | } | ||
176 | |||
177 | .bouton { | ||
178 | background-color: #000; | ||
179 | color: #fff; | ||
180 | border: none; | ||
181 | } | ||
182 | .bouton:hover { | ||
183 | background-color: #222222; | ||
184 | color: #F1F1F1; | ||
185 | } | ||
186 | |||
187 | #main ul#links li a.current { | ||
188 | background-color: #000; | ||
189 | color: #fff; | ||
190 | } | ||
191 | |||
192 | #links a:hover{ | ||
193 | background-color: #040707; | ||
194 | color: #F1F1F1; | ||
195 | } | ||
196 | |||
197 | |||
169 | /*** ***/ | 198 | /*** ***/ |
199 | /*** ARTICLE PAGE ***/ | ||
170 | 200 | ||
171 | #main | 201 | #article header, #article article { |
172 | { | 202 | border-bottom: 1px solid #222222; |
173 | max-width: 60em; /* 960 px */ | ||
174 | margin: 0 auto; | ||
175 | } | 203 | } |
176 | #content | 204 | |
177 | { | 205 | |
178 | width: 103.125%; /* 990px */ | 206 | /* Pagination */ |
179 | overflow: hidden; | 207 | .pagination { |
180 | margin-left: -1.562%; /* 15px */ | 208 | clear: both; |
181 | margin-bottom: -1.875em; /* 30px */ | 209 | padding-bottom: 20px; |
182 | } | 210 | padding-top: 10px; |
183 | 211 | text-align: right; | |
184 | .entrie | 212 | } |
185 | { | 213 | .pagination a { |
186 | width: 30.303%; /* 300px */ | 214 | border: 1px solid #D5D5D5; |
187 | background-color: #fff; | 215 | color: #333; |
188 | float: left; | 216 | font-size: 11px; |
189 | margin: 0 1.515% 1.875em; /* 15px 30px */ | 217 | font-weight: bold; |
190 | } | 218 | height: 25px; |
191 | 219 | padding: 4px 8px; | |
192 | @media only screen and ( max-width: 40em ) /* 640px */ | 220 | text-decoration: none; |
193 | { | 221 | margin:2px; |
194 | .entrie | 222 | } |
195 | { | 223 | .pagination a:hover, .pagination a:active { |
196 | width: 46.876%; /* 305px */ | 224 | background:#efefef; |
197 | margin-bottom: 0.938em; /* 15px */ | 225 | } |
198 | } | 226 | .pagination span.current { |
199 | } | 227 | background-color: #ccc; |
200 | 228 | border: 1px solid #D5D5D5; | |
201 | @media only screen and ( max-width: 20em ) /* 320px */ | 229 | color: #000; |
202 | { | 230 | font-size: 11px; |
203 | #content | 231 | font-weight: bold; |
204 | { | 232 | height: 25px; |
205 | width: 100%; | 233 | padding: 4px 8px; |
206 | margin-left: 0; | 234 | text-decoration: none; |
207 | } | 235 | margin:2px; |
208 | 236 | } | |
209 | .entrie | 237 | .pagination span.disabled { |
210 | { | 238 | border: 1px solid #EEEEEE; |
211 | width: 100%; | 239 | color: #DDDDDD; |
212 | margin-left: 0; | 240 | margin:2px; |
213 | margin-right: 0; | 241 | padding: 4px 8px; |
214 | } | 242 | font-size: 11px; |
243 | font-weight: bold; | ||
244 | } | ||
245 | |||
246 | footer { | ||
247 | clear: both; | ||
215 | } \ No newline at end of file | 248 | } \ No newline at end of file |