diff options
Diffstat (limited to 'tpl/default/css')
-rw-r--r-- | tpl/default/css/pure-extras.css | 262 | ||||
-rw-r--r-- | tpl/default/css/shaarli.css | 128 |
2 files changed, 381 insertions, 9 deletions
diff --git a/tpl/default/css/pure-extras.css b/tpl/default/css/pure-extras.css new file mode 100644 index 00000000..d72fc94c --- /dev/null +++ b/tpl/default/css/pure-extras.css | |||
@@ -0,0 +1,262 @@ | |||
1 | /* Images */ | ||
2 | .pure-img-eliptical { | ||
3 | border-radius: 80%; | ||
4 | } | ||
5 | .pure-img-rounded { | ||
6 | border-radius: 3px; | ||
7 | } | ||
8 | .pure-img-bordered { | ||
9 | background-color: #FFFFFF; | ||
10 | border: 1px solid rgba(0, 0, 0, 0.2); | ||
11 | padding: 5px; | ||
12 | } | ||
13 | |||
14 | |||
15 | /* Thumbnails */ | ||
16 | .pure-thumbnails li { | ||
17 | text-align: center; | ||
18 | display: inline-block; | ||
19 | *display: inline; | ||
20 | /* IE7 inline-block hack */ | ||
21 | *zoom: 1; | ||
22 | vertical-align: top; | ||
23 | -webkit-box-sizing: border-box; | ||
24 | -moz-box-sizing: border-box; | ||
25 | box-sizing: border-box; | ||
26 | padding: 0.5em; | ||
27 | } | ||
28 | .pure-thumbnails { | ||
29 | list-style: none; | ||
30 | margin: 0; | ||
31 | padding: 0; | ||
32 | } | ||
33 | |||
34 | .pure-thumbnails a:focus { | ||
35 | outline: 0 none; | ||
36 | } | ||
37 | |||
38 | .pure-thumb { | ||
39 | display: block; | ||
40 | text-decoration: none; | ||
41 | color: inherit; | ||
42 | } | ||
43 | .pure-thumb img { | ||
44 | max-width: 100%; | ||
45 | margin-right: auto; | ||
46 | margin-left: auto; | ||
47 | vertical-align: middle; /* this will remove a thin line below the image */ | ||
48 | -webkit-box-sizing: border-box; | ||
49 | -moz-box-sizing: border-box; | ||
50 | box-sizing: border-box; | ||
51 | } | ||
52 | |||
53 | .pure-thumb-bordered { | ||
54 | border: 1px solid rgba(0, 0, 0, 0.2); | ||
55 | } | ||
56 | .pure-thumb .caption { | ||
57 | text-align: left; | ||
58 | display: block; | ||
59 | margin: 0 5px 6px; | ||
60 | |||
61 | } | ||
62 | .pure-thumb .caption p { | ||
63 | margin: 0.3em 0 0; | ||
64 | font-size: 75%; | ||
65 | } | ||
66 | .pure-thumb .caption .caption-head { | ||
67 | font-weight: bold; | ||
68 | margin-top: 0.3em; | ||
69 | } | ||
70 | |||
71 | .pure-thumb-eliptical img { | ||
72 | border-radius: 50%; | ||
73 | } | ||
74 | .pure-thumb-rounded img { | ||
75 | border-radius: 3px; | ||
76 | } | ||
77 | |||
78 | /* Badges/Pills */ | ||
79 | .pure-badge, | ||
80 | .pure-badge-error, | ||
81 | .pure-badge-warning, | ||
82 | .pure-badge-success, | ||
83 | .pure-badge-info, | ||
84 | .pure-badge-inverse { | ||
85 | padding: 0.35em 0.9em 0.35em; | ||
86 | background-color: #9D988E; | ||
87 | color: #fff; | ||
88 | display: inline-block; | ||
89 | font-size: 11.844px; | ||
90 | font-weight: bold; | ||
91 | line-height: 1.2em; | ||
92 | vertical-align: baseline; | ||
93 | white-space: nowrap; | ||
94 | border-radius: 20px; | ||
95 | margin: 0.2em; | ||
96 | } | ||
97 | .pure-badge-error { | ||
98 | background-color: #D13C38; | ||
99 | } | ||
100 | .pure-badge-warning { | ||
101 | background-color: #E78C05; | ||
102 | } | ||
103 | .pure-badge-success { | ||
104 | background-color: rgb(83, 180, 79); | ||
105 | } | ||
106 | .pure-badge-info { | ||
107 | background-color: rgb(18, 169, 218); | ||
108 | } | ||
109 | .pure-badge-inverse { | ||
110 | background-color: #4D370C; | ||
111 | } | ||
112 | |||
113 | /* Alerts */ | ||
114 | .pure-alert { | ||
115 | position: relative; | ||
116 | margin-bottom: 1em; | ||
117 | padding: 1em; | ||
118 | background: #ccc; | ||
119 | border-radius: 3px; | ||
120 | } | ||
121 | |||
122 | .pure-alert label { | ||
123 | display: inline-block; | ||
124 | *display: inline; | ||
125 | /* IE7 inline-block hack */ | ||
126 | *zoom: 1; | ||
127 | white-space: nowrap; | ||
128 | } | ||
129 | |||
130 | .pure-alert { | ||
131 | background-color: rgb(209, 235, 238); | ||
132 | color: rgb(102, 131, 145); | ||
133 | } | ||
134 | .pure-alert-error { | ||
135 | background-color: #D13C38; | ||
136 | color: #fff; | ||
137 | } | ||
138 | |||
139 | .pure-alert-warning { | ||
140 | background-color: rgb(250, 191, 103); | ||
141 | color: rgb(151, 96, 13); | ||
142 | } | ||
143 | |||
144 | .pure-alert-success { | ||
145 | background-color: rgb(83, 180, 79); | ||
146 | color: #fff; | ||
147 | } | ||
148 | |||
149 | |||
150 | /* Contextual Modals */ | ||
151 | |||
152 | .pure-popover { | ||
153 | position: relative; | ||
154 | width: 300px; | ||
155 | background-color: #f0f1f3; | ||
156 | color: #2f3034; | ||
157 | padding: 15px; | ||
158 | border: 1px solid #bfc0c8; | ||
159 | border-radius: 2px; | ||
160 | box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15); | ||
161 | box-padding: border-box; | ||
162 | -webkit-background-clip: padding-box; | ||
163 | -moz-background-clip: padding; | ||
164 | background-clip: padding-box; | ||
165 | } | ||
166 | |||
167 | .pure-arrow-border, .pure-arrow { | ||
168 | border-style: solid; | ||
169 | border-width: 10px; | ||
170 | height:0; | ||
171 | width:0; | ||
172 | position:absolute; | ||
173 | } | ||
174 | |||
175 | |||
176 | /* POPOVER ARROW POSITIONING BOTTOM */ | ||
177 | |||
178 | .pure-popover.bottom .pure-arrow-border { | ||
179 | border-color: #bfc0c8 transparent transparent transparent; | ||
180 | bottom: -20px; | ||
181 | left: 50%; | ||
182 | } | ||
183 | .pure-popover.bottom .pure-arrow { | ||
184 | border-color: #f0f1f3 transparent transparent transparent; | ||
185 | bottom:-19px; | ||
186 | left: 50%; | ||
187 | } | ||
188 | |||
189 | /* POPOVER ARROW POSITIONING TOP*/ | ||
190 | |||
191 | .pure-popover.top .pure-arrow-border { | ||
192 | border-color: transparent transparent #bfc0c8 transparent; | ||
193 | top: -21px; | ||
194 | left: 50%; | ||
195 | } | ||
196 | .pure-popover.top .pure-arrow { | ||
197 | border-color: transparent transparent #f0f1f3 transparent; | ||
198 | top:-20px; | ||
199 | left: 50%; | ||
200 | } | ||
201 | |||
202 | /* POPOVER ARROW POSITIONING RIGHT*/ | ||
203 | |||
204 | .pure-popover.right .pure-arrow-border { | ||
205 | border-color: transparent transparent transparent #bfc0c8; | ||
206 | top: 45%; | ||
207 | right: -21px; | ||
208 | } | ||
209 | .pure-popover.right .pure-arrow { | ||
210 | border-color: transparent transparent transparent #f0f1f3; | ||
211 | top:45%; | ||
212 | right: -20px; | ||
213 | } | ||
214 | |||
215 | |||
216 | /* POPOVER ARROW POSITIONING LEFT*/ | ||
217 | |||
218 | .pure-popover.left .pure-arrow-border { | ||
219 | border-color: transparent #bfc0c8 transparent transparent; | ||
220 | top: 45%; | ||
221 | left: -21px; | ||
222 | } | ||
223 | .pure-popover.left .pure-arrow { | ||
224 | border-color: transparent #f0f1f3 transparent transparent; | ||
225 | top:45%; | ||
226 | left: -20px; | ||
227 | } | ||
228 | |||
229 | |||
230 | /* BUTTON IMPROVEMENTS */ | ||
231 | .pure-button-block { | ||
232 | display: block; | ||
233 | } | ||
234 | .pure-button-small { | ||
235 | padding: .6em 2em .65em; | ||
236 | font-size:70%; | ||
237 | } | ||
238 | .pure-button-large { | ||
239 | padding: .8em 5em .9em; | ||
240 | font-size:110%; | ||
241 | } | ||
242 | .pure-button-selected { | ||
243 | background-color: #345fcb; | ||
244 | color: #fff; | ||
245 | } | ||
246 | .pure-button-secondary { | ||
247 | background: rgb(161, 195, 238); | ||
248 | color: rgb(26, 88, 122); | ||
249 | } | ||
250 | .pure-button-error { | ||
251 | background: rgb(214, 86, 75); | ||
252 | color: white; | ||
253 | } | ||
254 | .pure-button-success { | ||
255 | background: rgb(54, 197, 71); | ||
256 | color: white; | ||
257 | } | ||
258 | .pure-button-warning { | ||
259 | background: rgb(255, 163, 0); | ||
260 | color: white; | ||
261 | } | ||
262 | |||
diff --git a/tpl/default/css/shaarli.css b/tpl/default/css/shaarli.css index eeff5151..9a075574 100644 --- a/tpl/default/css/shaarli.css +++ b/tpl/default/css/shaarli.css | |||
@@ -25,6 +25,10 @@ body { | |||
25 | border-radius: .25rem; | 25 | border-radius: .25rem; |
26 | } | 26 | } |
27 | 27 | ||
28 | pre { | ||
29 | max-width: 100%; | ||
30 | } | ||
31 | |||
28 | @font-face { | 32 | @font-face { |
29 | font-family: 'Roboto Slab'; | 33 | font-family: 'Roboto Slab'; |
30 | font-weight: 400; | 34 | font-weight: 400; |
@@ -60,6 +64,16 @@ body { | |||
60 | } | 64 | } |
61 | 65 | ||
62 | /** | 66 | /** |
67 | * Make pure-extras alert closable. | ||
68 | */ | ||
69 | .pure-alert-closable .fa-times { | ||
70 | float: right; | ||
71 | } | ||
72 | .pure-alert-close { | ||
73 | cursor: pointer; | ||
74 | } | ||
75 | |||
76 | /** | ||
63 | * MENU | 77 | * MENU |
64 | **/ | 78 | **/ |
65 | .shaarli-menu { | 79 | .shaarli-menu { |
@@ -174,6 +188,10 @@ body { | |||
174 | color: #d1fff0; | 188 | color: #d1fff0; |
175 | } | 189 | } |
176 | 190 | ||
191 | .header-buttons { | ||
192 | text-align: right; | ||
193 | } | ||
194 | |||
177 | #linkcount { | 195 | #linkcount { |
178 | /* position: fixed; */ | 196 | /* position: fixed; */ |
179 | position: absolute; | 197 | position: absolute; |
@@ -208,6 +226,11 @@ body { | |||
208 | color: #b0ddce; | 226 | color: #b0ddce; |
209 | } | 227 | } |
210 | 228 | ||
229 | /* because chrome */ | ||
230 | #search input[type="text"]::-webkit-input-placeholder { | ||
231 | color: #b0ddce; | ||
232 | } | ||
233 | |||
211 | #search button { | 234 | #search button { |
212 | background: transparent; | 235 | background: transparent; |
213 | border: none; | 236 | border: none; |
@@ -218,6 +241,55 @@ body { | |||
218 | color: #fff; | 241 | color: #fff; |
219 | } | 242 | } |
220 | 243 | ||
244 | #header-login-form { | ||
245 | display: none; | ||
246 | height: 30px; | ||
247 | padding: 5px 0; | ||
248 | text-align: center; | ||
249 | background: #1b926c; | ||
250 | box-shadow: 0 1px 1px 1px #797979; | ||
251 | } | ||
252 | |||
253 | #header-login-form input[type="text"], #header-login-form input[type="password"] { | ||
254 | margin: 0 0 5px 0; | ||
255 | padding: 5px 5px 3px 15px; | ||
256 | height: 20px; | ||
257 | width: 200px; | ||
258 | background: #1fa67a; | ||
259 | border: medium none currentColor; | ||
260 | border-radius: 25px; | ||
261 | box-shadow: 0 1px 0 rgba(255, 255, 255, 0.078), 0 1px 4px rgba(0, 0, 0, 0.298) inset; | ||
262 | color: #b0ddce; | ||
263 | } | ||
264 | |||
265 | /* because chrome */ | ||
266 | #header-login-form input[type="text"]::-webkit-input-placeholder, | ||
267 | #header-login-form input[type="password"]::-webkit-input-placeholder | ||
268 | { | ||
269 | color: #b0ddce; | ||
270 | } | ||
271 | |||
272 | #header-login-form input[type="submit"] { | ||
273 | display: inline-block; | ||
274 | margin: 0 0 5px 0; | ||
275 | height: 25px; | ||
276 | width: 100px; | ||
277 | background: #0C7653; | ||
278 | border: medium none currentColor; | ||
279 | border-radius: 25px; | ||
280 | box-shadow: 1px 1px 2px #005C3E, -1px -1px 2px #005C3E; | ||
281 | color: #b0ddce; | ||
282 | } | ||
283 | |||
284 | .new-version-message { | ||
285 | text-align: center; | ||
286 | } | ||
287 | |||
288 | .new-version-message a { | ||
289 | color: rgb(151, 96, 13); | ||
290 | font-weight: bold; | ||
291 | } | ||
292 | |||
221 | /** | 293 | /** |
222 | * CONTENT - GENERAL | 294 | * CONTENT - GENERAL |
223 | */ | 295 | */ |
@@ -233,6 +305,7 @@ body { | |||
233 | 305 | ||
234 | /** | 306 | /** |
235 | * CONTENT - LINKLIST PAGING | 307 | * CONTENT - LINKLIST PAGING |
308 | * 64em -> lg | ||
236 | */ | 309 | */ |
237 | @media screen and (max-width: 64em) { | 310 | @media screen and (max-width: 64em) { |
238 | .linklist-paging { | 311 | .linklist-paging { |
@@ -249,10 +322,7 @@ body { | |||
249 | .linklist-filters { | 322 | .linklist-filters { |
250 | margin: 10px 0; | 323 | margin: 10px 0; |
251 | color: #252525; | 324 | color: #252525; |
252 | } | 325 | font-size: 0.9em; |
253 | |||
254 | .linklist-filters span { | ||
255 | margin: 0 0 0 10px; | ||
256 | } | 326 | } |
257 | 327 | ||
258 | .linklist-filters a { | 328 | .linklist-filters a { |
@@ -289,6 +359,7 @@ body { | |||
289 | margin: 10px 0; | 359 | margin: 10px 0; |
290 | text-align: right; | 360 | text-align: right; |
291 | color: #252525; | 361 | color: #252525; |
362 | font-size: 0.9em; | ||
292 | } | 363 | } |
293 | 364 | ||
294 | .linksperpage a { | 365 | .linksperpage a { |
@@ -306,12 +377,12 @@ body { | |||
306 | 377 | ||
307 | .linksperpage input[type="text"] { | 378 | .linksperpage input[type="text"] { |
308 | width: 28px; | 379 | width: 28px; |
309 | height: 20px; | 380 | height: 16px; |
310 | margin: 0 0 5px 0; | 381 | margin: 0; |
311 | padding: 3px 5px 3px 8px; | 382 | padding: 3px 5px 3px 8px; |
312 | background: #c8c8c8; | 383 | background: #c8c8c8; |
313 | border: medium none currentColor; | 384 | border: medium none currentColor; |
314 | border-radius: 25px; | 385 | --border-radius: 25px; |
315 | box-shadow: 0 1px 0 rgba(255, 255, 255, 0.078), 0 1px 4px rgba(0, 0, 0, 0.298) inset; | 386 | box-shadow: 0 1px 0 rgba(255, 255, 255, 0.078), 0 1px 4px rgba(0, 0, 0, 0.298) inset; |
316 | color: #252525; | 387 | color: #252525; |
317 | font-size: 0.8em; | 388 | font-size: 0.8em; |
@@ -395,13 +466,17 @@ body { | |||
395 | color: #20b988; | 466 | color: #20b988; |
396 | } | 467 | } |
397 | 468 | ||
469 | .linklist-item-thumbnail { | ||
470 | padding: 10px; | ||
471 | float: left; | ||
472 | } | ||
473 | |||
398 | .linklist-item-infos { | 474 | .linklist-item-infos { |
399 | padding: 5px; | 475 | padding: 5px 5px 0 5px; |
400 | background: #ddd url(../img/noise.png); | 476 | background: #ddd url(../img/noise.png); |
401 | border-top: 1px solid #989898; | 477 | border-top: 1px solid #989898; |
402 | box-shadow: 1px -1px 0.2em #989898; | 478 | box-shadow: 1px -1px 0.2em #989898; |
403 | color: #252525; | 479 | color: #252525; |
404 | font-size: 0.8em; | ||
405 | } | 480 | } |
406 | 481 | ||
407 | .linklist-item-infos a { | 482 | .linklist-item-infos a { |
@@ -415,6 +490,7 @@ body { | |||
415 | 490 | ||
416 | .linklist-item-tags { | 491 | .linklist-item-tags { |
417 | margin: 0 0 5px 0; | 492 | margin: 0 0 5px 0; |
493 | font-size: 0.8em; | ||
418 | } | 494 | } |
419 | 495 | ||
420 | .linklist-item-infos .label-tag { | 496 | .linklist-item-infos .label-tag { |
@@ -426,6 +502,10 @@ body { | |||
426 | border: 1px solid #000; | 502 | border: 1px solid #000; |
427 | } | 503 | } |
428 | 504 | ||
505 | .linklist-item-infos-dateblock { | ||
506 | font-size: 0.9em; | ||
507 | } | ||
508 | |||
429 | .linklist-plugin-icon { | 509 | .linklist-plugin-icon { |
430 | width: 13px; | 510 | width: 13px; |
431 | height: 13px; | 511 | height: 13px; |
@@ -436,9 +516,39 @@ body { | |||
436 | white-space: nowrap; | 516 | white-space: nowrap; |
437 | overflow: hidden; | 517 | overflow: hidden; |
438 | text-overflow: ellipsis; | 518 | text-overflow: ellipsis; |
519 | font-size: 0.8em; | ||
520 | } | ||
521 | |||
522 | /** 64em -> lg **/ | ||
523 | @media screen and (max-width: 64em) { | ||
524 | .linklist-item-infos-url { | ||
525 | text-align: left; | ||
526 | } | ||
439 | } | 527 | } |
440 | 528 | ||
441 | /** | 529 | /** |
530 | * Footer | ||
531 | */ | ||
532 | #footer { | ||
533 | margin: 20px 0; | ||
534 | padding: 5px; | ||
535 | text-align: center; | ||
536 | color: #252525; | ||
537 | } | ||
538 | |||
539 | #footer:before { | ||
540 | display: block; | ||
541 | content:""; | ||
542 | background: linear-gradient(to right, #949393, #252525, #949393); | ||
543 | height: 1px; | ||
544 | width: 80%; | ||
545 | margin: 10px auto; | ||
546 | } | ||
547 | |||
548 | #footer a { | ||
549 | color: #252525; | ||
550 | } | ||
551 | /** | ||
442 | * CONTENT - LINKLIST ITEMS | 552 | * CONTENT - LINKLIST ITEMS |
443 | */ | 553 | */ |
444 | .linklist-item { | 554 | .linklist-item { |