aboutsummaryrefslogtreecommitdiffhomepage
path: root/assets
diff options
context:
space:
mode:
Diffstat (limited to 'assets')
-rw-r--r--assets/default/img/icon.pngbin530 -> 0 bytes
-rw-r--r--assets/default/js/base.js22
-rw-r--r--assets/default/scss/shaarli.scss94
3 files changed, 84 insertions, 32 deletions
diff --git a/assets/default/img/icon.png b/assets/default/img/icon.png
deleted file mode 100644
index 474edec3..00000000
--- a/assets/default/img/icon.png
+++ /dev/null
Binary files differ
diff --git a/assets/default/js/base.js b/assets/default/js/base.js
index 99e03370..d5c29c69 100644
--- a/assets/default/js/base.js
+++ b/assets/default/js/base.js
@@ -466,6 +466,28 @@ function init(description) {
466 }); 466 });
467 } 467 }
468 468
469 const changeVisibilityButtons = document.querySelectorAll('.actions-change-visibility');
470 if (changeVisibilityButtons != null && token != null) {
471 [...changeVisibilityButtons].forEach((button) => {
472 button.addEventListener('click', (event) => {
473 event.preventDefault();
474 const visibility = event.target.getAttribute('data-visibility');
475
476 const links = [];
477 const linkCheckedCheckboxes = document.querySelectorAll('.link-checkbox:checked');
478 [...linkCheckedCheckboxes].forEach((checkbox) => {
479 links.push({
480 id: checkbox.value,
481 title: document.querySelector(`.linklist-item[data-id="${checkbox.value}"] .linklist-link`).innerHTML,
482 });
483 });
484
485 const ids = links.map(item => item.id);
486 window.location = `?change_visibility&token=${token.value}&newVisibility=${visibility}&ids=${ids.join('+')}`;
487 });
488 });
489 }
490
469 /** 491 /**
470 * Select all button 492 * Select all button
471 */ 493 */
diff --git a/assets/default/scss/shaarli.scss b/assets/default/scss/shaarli.scss
index 760d8d6a..61e382b6 100644
--- a/assets/default/scss/shaarli.scss
+++ b/assets/default/scss/shaarli.scss
@@ -1,6 +1,6 @@
1$fa-font-path: '~font-awesome/fonts'; 1$fa-font-path: '~fork-awesome/fonts';
2 2
3@import '~font-awesome/scss/font-awesome'; 3@import '~fork-awesome/scss/fork-awesome';
4@import '~purecss/build/pure.css'; 4@import '~purecss/build/pure.css';
5@import '~purecss/build/grids-responsive.css'; 5@import '~purecss/build/grids-responsive.css';
6@import '~pure-extras/css/pure-extras.css'; 6@import '~pure-extras/css/pure-extras.css';
@@ -13,7 +13,7 @@ $dark-grey: #252525;
13$light-grey: #797979; 13$light-grey: #797979;
14$main-green: #1b926c; 14$main-green: #1b926c;
15$light-green: #b0ddce; 15$light-green: #b0ddce;
16$dark-green: #2a4c41; 16$dark-green: #186446;
17$red: #ac2925; 17$red: #ac2925;
18$orange: #f89406; 18$orange: #f89406;
19$blue: #0b5ea6; 19$blue: #0b5ea6;
@@ -25,9 +25,15 @@ $warning-text: #97600d;
25$form-input-border: #d8d8d8; 25$form-input-border: #d8d8d8;
26$form-input-background: #eee; 26$form-input-background: #eee;
27 27
28:root {
29 --main-color: #{$main-green};
30 --background-color: #{$background-color};
31 --dark-main-color: #{$dark-green};
32}
33
28// General 34// General
29body { 35body {
30 background: $background-color; 36 background: var(--background-color);
31} 37}
32 38
33.strong { 39.strong {
@@ -143,7 +149,7 @@ body,
143} 149}
144 150
145.pure-alert-success { 151.pure-alert-success {
146 background-color: $main-green; 152 background-color: var(--main-color);
147} 153}
148 154
149.pure-alert-warning { 155.pure-alert-warning {
@@ -169,7 +175,7 @@ body,
169 top: 0; 175 top: 0;
170 transition: max-height .5s; 176 transition: max-height .5s;
171 z-index: 999; 177 z-index: 999;
172 background: $main-green; 178 background: var(--main-color);
173 width: 100%; 179 width: 100%;
174 // Hack to transition with auto height: http://stackoverflow.com/a/8331169/1484919 180 // Hack to transition with auto height: http://stackoverflow.com/a/8331169/1484919
175 max-height: 45px; 181 max-height: 45px;
@@ -322,7 +328,7 @@ body,
322 button { 328 button {
323 border: 0; 329 border: 0;
324 border-radius: 2px; 330 border-radius: 2px;
325 background-color: $main-green; 331 background-color: var(--main-color);
326 padding: 4px 8px 6px; 332 padding: 4px 8px 6px;
327 color: $almost-white; 333 color: $almost-white;
328 } 334 }
@@ -358,7 +364,7 @@ body,
358.search-tagcloud { 364.search-tagcloud {
359 button { 365 button {
360 &:hover { 366 &:hover {
361 color: $background-color; 367 color: var(--background-color);
362 } 368 }
363 } 369 }
364} 370}
@@ -389,7 +395,7 @@ body,
389 position: fixed; 395 position: fixed;
390 visibility: hidden; 396 visibility: hidden;
391 z-index: 999; 397 z-index: 999;
392 background: $main-green; 398 background: var(--main-color);
393 padding: 5px 0; 399 padding: 5px 0;
394 width: 100%; 400 width: 100%;
395 height: 30px; 401 height: 30px;
@@ -411,7 +417,7 @@ body,
411 margin: 0 0 5px; 417 margin: 0 0 5px;
412 border: 1px solid $almost-white; 418 border: 1px solid $almost-white;
413 border-radius: 2px; 419 border-radius: 2px;
414 background: $main-green; 420 background: var(--main-color);
415 padding: 4px 0; 421 padding: 4px 0;
416 width: 100px; 422 width: 100px;
417 height: 28px; 423 height: 28px;
@@ -419,7 +425,7 @@ body,
419 425
420 &:hover { 426 &:hover {
421 background: $almost-white; 427 background: $almost-white;
422 color: $main-green; 428 color: var(--main-color);
423 } 429 }
424 } 430 }
425 431
@@ -544,7 +550,10 @@ body,
544 color: $dark-grey; 550 color: $dark-grey;
545 font-size: .9em; 551 font-size: .9em;
546 552
553
547 a { 554 a {
555 display: inline-block;
556 margin: 3px 0;
548 padding: 5px 8px; 557 padding: 5px 8px;
549 text-decoration: none; 558 text-decoration: none;
550 } 559 }
@@ -555,7 +564,7 @@ body,
555 } 564 }
556 565
557 .filter-on { 566 .filter-on {
558 background: $main-green; 567 background: var(--main-color);
559 color: $light-green; 568 color: $light-green;
560 } 569 }
561 570
@@ -694,7 +703,7 @@ body,
694 703
695 &:visited { 704 &:visited {
696 .linklist-link { 705 .linklist-link {
697 color: $dark-green; 706 color: var(--dark-main-color);
698 } 707 }
699 } 708 }
700 709
@@ -705,7 +714,7 @@ body,
705 } 714 }
706 715
707 .linklist-link { 716 .linklist-link {
708 color: $main-green; 717 color: var(--main-color);
709 font-size: 1.1em; 718 font-size: 1.1em;
710 719
711 &:hover { 720 &:hover {
@@ -713,11 +722,19 @@ body,
713 } 722 }
714 } 723 }
715 724
725 .label {
726 font-family: Arial, sans-serif;
727 font-size: .65em;
728 }
729
716 .label-private { 730 .label-private {
717 border: solid 1px $orange; 731 border: solid 1px $orange;
718 color: $orange; 732 color: $orange;
719 font-family: Arial, sans-serif; 733 }
720 font-size: .65em; 734
735 .label-sticky {
736 border: solid 1px $blue;
737 color: $blue;
721 } 738 }
722} 739}
723 740
@@ -772,14 +789,14 @@ body,
772 789
773 a { 790 a {
774 text-decoration: none; 791 text-decoration: none;
775 color: $main-green; 792 color: var(--main-color);
776 793
777 &:hover { 794 &:hover {
778 color: $dark-grey; 795 color: $dark-grey;
779 } 796 }
780 797
781 &:visited { 798 &:visited {
782 color: $dark-green; 799 color: var(--dark-main-color);
783 } 800 }
784 } 801 }
785} 802}
@@ -877,7 +894,7 @@ body,
877 &::before { 894 &::before {
878 display: block; 895 display: block;
879 margin: 10px auto; 896 margin: 10px auto;
880 background: linear-gradient(to right, $background-color, $dark-grey, $background-color); 897 background: linear-gradient(to right, var(--background-color), $dark-grey, var(--background-color));
881 width: 80%; 898 width: 80%;
882 height: 1px; 899 height: 1px;
883 content: ''; 900 content: '';
@@ -906,7 +923,7 @@ body,
906 margin: 15px 5px; 923 margin: 15px 5px;
907 border: 0; 924 border: 0;
908 box-shadow: 1px 1px 1px $form-input-border, -1px -1px 6px $form-input-border, -1px 1px 2px $form-input-border, 1px -1px 2px $form-input-border; 925 box-shadow: 1px 1px 1px $form-input-border, -1px -1px 6px $form-input-border, -1px 1px 2px $form-input-border, 1px -1px 2px $form-input-border;
909 background: $main-green; 926 background: var(--main-color);
910 min-width: 150px; 927 min-width: 150px;
911 height: 35px; 928 height: 35px;
912 vertical-align: center; 929 vertical-align: center;
@@ -930,7 +947,7 @@ body,
930 padding: 10px 0; 947 padding: 10px 0;
931 width: 100%; 948 width: 100%;
932 text-align: center; 949 text-align: center;
933 color: $main-green; 950 color: var(--main-color);
934 } 951 }
935 952
936 .window-subtitle { 953 .window-subtitle {
@@ -939,7 +956,7 @@ body,
939 956
940 a { 957 a {
941 text-decoration: none; 958 text-decoration: none;
942 color: $main-green; 959 color: var(--main-color);
943 font-weight: bold; 960 font-weight: bold;
944 961
945 &.button { 962 &.button {
@@ -1061,7 +1078,6 @@ body,
1061 .page-form { 1078 .page-form {
1062 .submit-buttons { 1079 .submit-buttons {
1063 .button { 1080 .button {
1064 display: block;
1065 margin: auto; 1081 margin: auto;
1066 } 1082 }
1067 } 1083 }
@@ -1267,7 +1283,7 @@ form {
1267 1283
1268 .pure-button { 1284 .pure-button {
1269 &:hover { 1285 &:hover {
1270 background-color: $main-green; 1286 background-color: var(--main-color);
1271 background-image: none; 1287 background-image: none;
1272 color: $almost-white; 1288 color: $almost-white;
1273 } 1289 }
@@ -1351,7 +1367,7 @@ form {
1351 } 1367 }
1352 1368
1353 .validate-rename-tag { 1369 .validate-rename-tag {
1354 color: $main-green; 1370 color: var(--main-color);
1355 } 1371 }
1356} 1372}
1357 1373
@@ -1447,7 +1463,7 @@ form {
1447 &::after { 1463 &::after {
1448 display: block; 1464 display: block;
1449 margin: 10px auto; 1465 margin: 10px auto;
1450 background: linear-gradient(to right, $background-color, $dark-grey, $background-color); 1466 background: linear-gradient(to right, var(--background-color), $dark-grey, var(--background-color));
1451 width: 90%; 1467 width: 90%;
1452 height: 1px; 1468 height: 1px;
1453 content: ''; 1469 content: '';
@@ -1497,14 +1513,14 @@ form {
1497.daily-entry-description { 1513.daily-entry-description {
1498 a { 1514 a {
1499 text-decoration: none; 1515 text-decoration: none;
1500 color: $main-green; 1516 color: var(--main-color);
1501 1517
1502 &:hover { 1518 &:hover {
1503 text-shadow: 1px 1px $background-linklist-info; 1519 text-shadow: 1px 1px $background-linklist-info;
1504 } 1520 }
1505 1521
1506 &:visited { 1522 &:visited {
1507 color: $dark-green; 1523 color: var(--dark-main-color);
1508 } 1524 }
1509 } 1525 }
1510} 1526}
@@ -1561,12 +1577,12 @@ form {
1561} 1577}
1562 1578
1563.pure-button-shaarli { 1579.pure-button-shaarli {
1564 background-color: $main-green; 1580 background-color: var(--main-color);
1565} 1581}
1566 1582
1567.progressbar { 1583.progressbar {
1568 border-radius: 6px; 1584 border-radius: 6px;
1569 background-color: $main-green; 1585 background-color: var(--main-color);
1570 padding: 1px; 1586 padding: 1px;
1571 1587
1572 > div { 1588 > div {
@@ -1575,8 +1591,8 @@ form {
1575 -45deg, 1591 -45deg,
1576 $almost-white, 1592 $almost-white,
1577 $almost-white 6px, 1593 $almost-white 6px,
1578 $background-color 6px, 1594 var(--background-color) 6px,
1579 $background-color 12px 1595 var(--background-color) 12px
1580 ); 1596 );
1581 width: 0%; 1597 width: 0%;
1582 height: 10px; 1598 height: 10px;
@@ -1600,3 +1616,17 @@ form {
1600 white-space: nowrap; 1616 white-space: nowrap;
1601 } 1617 }
1602} 1618}
1619
1620// Print rules
1621@media print {
1622 .shaarli-menu {
1623 position: absolute;
1624 }
1625
1626 .search-linklist,
1627 .link-count-block,
1628 .linklist-item-infos-controls-group,
1629 .mobile-buttons {
1630 display: none;
1631 }
1632}