diff options
Diffstat (limited to 'tpl/default/css/shaarli.css')
-rw-r--r-- | tpl/default/css/shaarli.css | 128 |
1 files changed, 119 insertions, 9 deletions
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 { |