aboutsummaryrefslogtreecommitdiffhomepage
path: root/tpl/default/css
diff options
context:
space:
mode:
authorArthurHoaro <arthur@hoa.ro>2017-09-30 14:14:40 +0200
committerArthurHoaro <arthur@hoa.ro>2017-10-28 15:11:57 +0200
commit94c1756562df22382ccd88fd202371a386c1801b (patch)
tree9c1542aee77605914729992a9b54d692985f4a90 /tpl/default/css
parent0926d263902c184bd4f4c2036cb8ee90f81c5060 (diff)
downloadShaarli-94c1756562df22382ccd88fd202371a386c1801b.tar.gz
Shaarli-94c1756562df22382ccd88fd202371a386c1801b.tar.zst
Shaarli-94c1756562df22382ccd88fd202371a386c1801b.zip
Theme improvements: move thumbnails to the right and reduce margins overall
* Reduce multiple margins (markdown, space between block, etc.) * Move thumbnails to the right in the same line as the title * Move edit button as floating to the left * Move fold/collapse and checkbox buttons as floating to the right * Add a bunch of HTML ID in the linklist template Relates to #877
Diffstat (limited to 'tpl/default/css')
-rw-r--r--tpl/default/css/shaarli.css102
1 files changed, 73 insertions, 29 deletions
diff --git a/tpl/default/css/shaarli.css b/tpl/default/css/shaarli.css
index ba589723..9065f887 100644
--- a/tpl/default/css/shaarli.css
+++ b/tpl/default/css/shaarli.css
@@ -433,7 +433,7 @@ body, .pure-g [class*="pure-u"] {
433 * 64em -> lg 433 * 64em -> lg
434 */ 434 */
435.linklist-filters { 435.linklist-filters {
436 margin: 10px 0; 436 margin: 5px 0;
437 color: #252525; 437 color: #252525;
438 font-size: 0.9em; 438 font-size: 0.9em;
439} 439}
@@ -454,7 +454,7 @@ body, .pure-g [class*="pure-u"] {
454} 454}
455 455
456.linklist-pages { 456.linklist-pages {
457 margin: 10px 0; 457 margin: 5px 0;
458 color: #252525; 458 color: #252525;
459 text-align: center; 459 text-align: center;
460} 460}
@@ -469,7 +469,7 @@ body, .pure-g [class*="pure-u"] {
469} 469}
470 470
471.linksperpage { 471.linksperpage {
472 margin: 10px 0; 472 margin: 5px 0;
473 text-align: right; 473 text-align: right;
474 color: #252525; 474 color: #252525;
475 font-size: 0.9em; 475 font-size: 0.9em;
@@ -506,9 +506,29 @@ body, .pure-g [class*="pure-u"] {
506 * CONTENT - LINKLIST ITEMS 506 * CONTENT - LINKLIST ITEMS
507 */ 507 */
508.linklist-item { 508.linklist-item {
509 margin: 0 0 15px 0; 509 margin: 0 0 10px 0;
510 background: #f5f5f5; 510 background: #f5f5f5;
511 box-shadow: 2px 2px 0.5em #797979; 511 box-shadow: 1px 1px 3px #797979;
512}
513
514.linklist-item-buttons {
515 background: transparent;
516 position: relative;
517 width: 23px;
518 z-index: 99;
519}
520
521.linklist-item-buttons-right {
522 float: right;
523 margin-right: -25px;
524}
525
526.linklist-item-buttons * {
527 display: block;
528 float: left;
529 width:100%;
530 margin: auto;
531 text-align: center;
512} 532}
513 533
514.linklist-item-title, .linklist-item-title h2 { 534.linklist-item-title, .linklist-item-title h2 {
@@ -526,7 +546,7 @@ body, .pure-g [class*="pure-u"] {
526 line-height: 30px; 546 line-height: 30px;
527} 547}
528 548
529.linklist-item-title a { 549.linklist-item-title h2 a {
530 font-size: 0.7em; 550 font-size: 0.7em;
531 color: #252525; 551 color: #252525;
532 text-decoration: none; 552 text-decoration: none;
@@ -538,11 +558,11 @@ body, .pure-g [class*="pure-u"] {
538 color: #1b926c; 558 color: #1b926c;
539} 559}
540 560
541.linklist-item-title a:visited .linklist-link { 561.linklist-item-title h2 a:visited .linklist-link {
542 color: #2a4c41; 562 color: #2a4c41;
543} 563}
544 564
545.linklist-item-title a:hover, .linklist-item-title .linklist-link:hover{ 565.linklist-item-title h2 a:hover, .linklist-item-title .linklist-link:hover{
546 color: #252525; 566 color: #252525;
547} 567}
548 568
@@ -554,8 +574,9 @@ body, .pure-g [class*="pure-u"] {
554 color: #F89406; 574 color: #F89406;
555} 575}
556 576
557.linklist-item-title .fold-button { 577.fold-button {
558 display: none; 578 display: none;
579 color: #252525;
559} 580}
560 581
561.linklist-item-editbuttons { 582.linklist-item-editbuttons {
@@ -585,24 +606,12 @@ body, .pure-g [class*="pure-u"] {
585 606
586.linklist-item-description { 607.linklist-item-description {
587 position: relative; 608 position: relative;
588 padding: 10px; 609 padding: 0 10px;
589 word-wrap: break-word; 610 word-wrap: break-word;
590 color: #252525; 611 color: #252525;
591 line-height: 1.3em; 612 line-height: 1.3em;
592} 613}
593 614
594 {
595 position: absolute;
596 left: 3px;
597 top: 0;
598 display: block;
599 content:"";
600 background: #F89406;
601 height: 95%;
602 width: 2px;
603 z-index: 1;
604}
605
606.linklist-item-description a { 615.linklist-item-description a {
607 text-decoration: none; 616 text-decoration: none;
608 color: #1b926c; 617 color: #1b926c;
@@ -618,32 +627,36 @@ body, .pure-g [class*="pure-u"] {
618 627
619.linklist-item-thumbnail { 628.linklist-item-thumbnail {
620 position: relative; 629 position: relative;
621 margin-top: 10px; 630 padding: 0 0 0 5px;
622 padding: 10px; 631 margin: 0;
623 float: left; 632 float: right;
624 z-index: 50; 633 z-index: 50;
634 height: 90px;
625} 635}
626 636
627.linklist-item.private .linklist-item-title::before, 637.linklist-item.private .linklist-item-title::before,
628.linklist-item.private .linklist-item-description::before, 638.linklist-item.private .linklist-item-description::before {
629.linklist-item.private .linklist-item-thumbnail::before {
630 position: absolute; 639 position: absolute;
631 left: 3px; 640 left: 3px;
632 top: 0; 641 top: 0;
633 display: block; 642 display: block;
634 content:""; 643 content:"";
635 background: #F89406; 644 background: #F89406;
636 height: 95%; 645 height: 96%;
637 width: 2px; 646 width: 2px;
638 z-index: 1; 647 z-index: 1;
639} 648}
640 649
650.linklist-item.private .linklist-item-description::before {
651 height: 100%;
652}
653
641.linklist-item.private .linklist-item-title::before { 654.linklist-item.private .linklist-item-title::before {
642 margin-top: 3px; 655 margin-top: 3px;
643} 656}
644 657
645.linklist-item-infos { 658.linklist-item-infos {
646 padding: 8px 8px 5px 8px; 659 padding: 4px 8px 4px 8px;
647 background: #ddd; 660 background: #ddd;
648 color: #252525; 661 color: #252525;
649} 662}
@@ -680,6 +693,8 @@ body, .pure-g [class*="pure-u"] {
680 overflow: hidden; 693 overflow: hidden;
681 text-overflow: ellipsis; 694 text-overflow: ellipsis;
682 font-size: 0.8em; 695 font-size: 0.8em;
696 height:23px;
697 line-height:23px;
683} 698}
684 699
685.linklist-item-infos .mobile-buttons { 700.linklist-item-infos .mobile-buttons {
@@ -693,6 +708,16 @@ body, .pure-g [class*="pure-u"] {
693 height: 16px; 708 height: 16px;
694} 709}
695 710
711.linklist-item-infos-controls-group {
712 display: inline-block;
713 border-right: 1px solid #5d5d5d;
714 padding-right: 6px;
715}
716
717.ctrl-edit {
718 margin: 0 7px;
719}
720
696/** 64em -> lg **/ 721/** 64em -> lg **/
697@media screen and (max-width: 64em) { 722@media screen and (max-width: 64em) {
698 .linklist-item-infos-url { 723 .linklist-item-infos-url {
@@ -1284,3 +1309,22 @@ form[name="linkform"].page-form {
1284 text-decoration: none; 1309 text-decoration: none;
1285 font-weight: bold; 1310 font-weight: bold;
1286} 1311}
1312
1313/**
1314 * Markdown
1315 */
1316.markdown p {
1317 margin: 0 !important;
1318}
1319
1320.markdown p + p {
1321 margin: 0.5em 0 0 0 !important;
1322}
1323
1324.markdown *:first-child {
1325 margin-top: 0 !important;
1326}
1327
1328.markdown *:last-child {
1329 margin-bottom: 5px !important;
1330} \ No newline at end of file