]> git.immae.eu Git - github/wallabag/wallabag.git/blob - css/style.css
5c1ddebd70ff15faca5febbf6c2e8f2db776237e
[github/wallabag/wallabag.git] / css / style.css
1 /*** GENERAL ***/
2 body {
3 color: #222222;
4 font: 20px/1.3em Palatino,Georgia,serif;
5 background-color: #F1F1F1;
6 margin: 10px;
7 }
8
9
10 a, a:hover, a:visited {
11 color: #000;
12 }
13
14 header {
15 text-align: center;
16 }
17
18 #main ul#links {
19 padding: 0;
20 list-style-type: none;
21 text-align: center;
22 }
23
24 #main ul#links li {
25 display: inline;
26 }
27
28 #main ul#links li a.current {
29 -webkit-border-radius: 2px;
30 border-radius: 2px;
31 background-color: #040707;
32 color: #F1F1F1;
33 }
34
35 #main ul#sort {
36 padding: 0;
37 list-style-type: none;
38 text-align: center;
39 }
40
41 #main ul#sort li {
42 display: inline;
43 font-size: 0.9em;
44 }
45
46 #main ul#sort img:hover {
47 cursor: pointer;
48 }
49
50 #main, #article {
51 margin: 0 auto;
52 }
53
54 #links a, .backhome a{
55 text-decoration: none;
56 padding: 5px 10px;
57 }
58 #links a:hover, .backhome a:hover{
59 -webkit-border-radius: 2px;
60 border-radius: 2px;
61 background-color: #040707;
62 color: #F1F1F1;
63 }
64
65 #content {
66 width: 800px;
67 margin: 0 auto;
68 }
69
70
71 footer {
72 text-align: right;
73 }
74
75 /*** ***/
76 /*** LINKS DISPLAY ***/
77
78 #main a.tool {
79 text-decoration: none;
80 cursor: pointer;
81 }
82
83 input[type=submit].delete {
84 background : url('../img/remove.png') no-repeat center center;
85 width : 16px;
86 height :16px;
87 border : none;
88 color : transparent;
89 cursor: pointer;
90 font-size : 0;
91 }
92
93 #main #content {
94 margin-top: 20px;
95 }
96
97 #main .entrie {
98 color: rgb(46, 46, 46);
99 position:relative;
100 background-color: #ffffff;
101 padding: 15px;
102 min-height: 8em;
103 -webkit-border-radius: 2px;
104 border-radius: 2px;
105 -webkit-box-shadow: 0px 0px 6px -1px #000;
106 box-shadow: 0px 0px 6px -1px #000;
107 margin: 10px;
108 float: left;
109 }
110 #main .entrie h2 {
111 width: 95%;
112 }
113 #main .entrie h2 a {
114 text-decoration: none;
115 }
116
117 #main .entrie h2 a:hover {
118 color: #F5BE00;
119 }
120
121 .tools {
122 position: absolute;
123 top: 20px;
124 right: 20px;
125 width: 30px;
126 text-align: right;
127 }
128
129 .tools ul {
130 padding: 0; margin: 0;
131 list-style-type: none;
132 }
133
134 .tools ul li {
135 line-height: 20px;
136 }
137
138 .tools a.tool {
139 cursor: pointer;
140 }
141
142 #article .tools {
143 position: relative;
144 display: inline;
145 top: 0px;
146 right: 0px;
147 width: 100%;
148 text-align: left;
149 }
150
151 #article.tools ul li{
152 display: inline;
153 }
154
155 #main .entrie .tools a.tool span, #article .tools a.tool span {
156 display: inline-block;
157 width: 16px;
158 height: 16px;
159 }
160
161 a.fav span {
162 background: url('../img/star-on.png') no-repeat;
163 }
164
165 a.fav span:hover {
166 background: url('../img/star-off.png') no-repeat;
167 }
168
169 a.fav-off span {
170 background: url('../img/star-off.png') no-repeat;
171 }
172
173 a.fav-off span:hover {
174 background: url('../img/star-on.png') no-repeat;
175 }
176
177 a.archive span {
178 background: url('../img/checkmark-on.png') no-repeat;
179 }
180
181 a.archive span:hover {
182 background: url('../img/checkmark-off.png') no-repeat;
183 }
184
185 a.archive-off span {
186 background: url('../img/checkmark-off.png') no-repeat;
187 }
188
189 a.archive-off span:hover {
190 background: url('../img/checkmark-on.png') no-repeat;
191 }
192
193 /*** ***/
194 /*** ARTICLE PAGE ***/
195
196 body.article {
197 color: #222222;
198 font: 20px/1.3em Palatino,Georgia,serif;
199 background-color: #F1F1F1;
200 }
201
202 #article header {
203 text-align: left;
204 border-bottom: 1px solid #222222;
205 }
206
207 #article header a {
208 text-decoration: none;
209 }
210
211 #article article {
212 border-bottom: 1px solid #222222;
213 }
214
215 .vieworiginal a {
216 color: #888888;
217 text-decoration: none;
218 }
219
220 .backhome {
221 display: inline;
222 }
223
224 /*** ***/
225 #main
226 {
227 max-width: 60em; /* 960 px */
228 margin: 0 auto;
229 }
230 #content
231 {
232 width: 103.125%; /* 990px */
233 overflow: hidden;
234 margin-left: -1.562%; /* 15px */
235 margin-bottom: -1.875em; /* 30px */
236 }
237 .entrie
238 {
239 width: 30.303%; /* 300px */
240 float: left;
241 margin: 0 1.515% 1.875em; /* 15px 30px */
242 }
243
244 @media only screen and ( max-width: 40em ) /* 640px */
245 {
246 .entrie
247 {
248 width: 46.876%; /* 305px */
249 margin-bottom: 0.938em; /* 15px */
250 }
251 }
252 @media only screen and ( max-width: 20em ) /* 640px */
253 {
254 #content
255 {
256 width: 100%;
257 margin-left: 0;
258 }
259 .entrie
260 {
261 width: 100%;
262 margin-left: 0;
263 margin-right: 0;
264 }
265 }