Markup and styling

assets/quicknavi.css

@@ -1,246 +1,122 @@
 :root {
-  --qn-primary-color: #4b9ad9; /*Standard-Link-Color */
-  --qn-status1: #3bb594;
-  --qn-status2: #e74c3c;
-  --qn-status-default: #ccc;   
-  --qn-background-color: transparent;
-  --qn-watson-btn-background-color: #fff;
-  --qn-border-color: rgba(155, 155, 155, 0.1);
-  --qn-border-width: 0;
-  --gn-border-status-width: 5px;   
-}
-#qsearch {
-  margin-bottom: 0px;
-}
-
-.quicknavi-btn-group {
-  background-color: var(--qn-background-color);
-}
-
-.quicknavi-btn-group .btn-group {
-  border: var(--qn-border-width) solid var(--qn-border-color);
-
-}
+    --quick-navigation-color-light: #dfe3e9;
+    --quick-navigation-color-base: #9ca5b2;
+    --quick-navigation-color-dark: #324050;
 
-.quicknavi-btn-group.transparent .btn,
-.quicknavi-btn-group.transparent .btn-group.open .dropdown-toggle {
-  border: 0;
-  border-radius: 0;
+    --quick-navigation-radius: 4px;
+    --quick-navigation-spacing: 24px;
+    --quick-navigation-spacing-list-item-x: 4px;
+    --quick-navigation-spacing-list-item-y: 2px;
 }
 
-.quicknavi-btn-group.linkmapbt button {
-  border-radius: 0;
-  height: inherit;
-  border: 0;
-}
-
-li.quickitem {
-    list-style-type: none;
+.quick-navigation-no-results {
+    padding: calc(var(--quick-navigation-spacing) / 4);
+    background-color: var(--quick-navigation-color-light);
+    text-align: center;
 }
 
-
-
-.quicknavi ul {
-    padding-left: 0;
-    margin-bottom: 0;
-    list-style: none;
-}
-.quicknavi-items {
+.quick-navigation-menu {
+    max-width: 360px;
     min-width: 350px;
     max-height: 400px;
-    max-width: 360px;
     overflow-x: hidden;
     overflow-y: auto;
-    -webkit-overflow-scrolling: touch;
-    padding-top: 0px;
-    margin-bottom: 0px;
-    padding-left: 0px;
-
+    padding: 0;
+    margin: 0;
+    line-height: var(--quick-navigation-spacing);
 }
 
-
-.quicknavi-items li {
-
-
-}
-
-.quicknavi-items li:after {
-    content: "";
-    display: table;
-    clear: both;
-}
-
-.quicknavi .dropdown-header {
-  padding: 0;
-  margin-bottom: 0.5em;
-}
-
-.quicknavi li a{
-  width: 350px;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  padding-top: 3px;
-  padding-bottom: 3px;
-  padding-left: 15px;
-  padding-right: 10px;
-  text-decoration: none;
-  display: block;
-  line-height: 1em;
-  font-size: 18px;
-
-  -webkit-transition:all 0.3s ease;
-  -moz-transition:all 0.3s ease-in-out;
-  -o-transition:all 0.3s ease-in-out;
-  -ms-transition:all 0.3s ease-in-out;
-  transition:all 0.3s ease-in-out;
-  padding-left:20px;
+.quick-navigation-menu-header {
+    padding: calc(var(--quick-navigation-spacing) / 4);
+    border-bottom: 1px solid #ddd;
 }
 
-.quicknavi li ul li a.quicklink{
-font-weight: bold;
-}
-
-.quicknavi li ul li ul li a.quicklink{
-    font-weight: 300;
-    border-bottom: 1px solid rgba(0,0,0,0.03);
-
-}
-
-.quicknavi li a.quicklink:hover {
-    background-color: rgba(62, 138, 201, 0.12);
-
-}
-
-.quicknavi li a.bg-primary.quicklink:hover {
-  background-color: rgb(22, 49, 71);
-
-}
-
-.quicknavi li a.quicklink:focus {
-  background-color:#2a81c7;
-  color: #FFF;
-}
-
-.quicknavi li ul a {
-	font-size: 16px;
-	font-weight: normal;
-}
-
-
-.quicknavi li .quicknavi_left {
-  width: 88%;
-  display: block;
-  float: left;
-}
-
-.quicknavi li .quicknavi_right {
-  width: 12%;
-  display: block;
-  float: left;
-  padding-top: 8px;
-}
-
-
-.quicknavi li a {
-  padding-top: 10px;
-  padding-bottom: 10px;
-    color: var(--qn-primary-color);
-}
-
-li.quickitem a.bg-primary {
-  color: #FFF;
-}
-
-
-.quicknavi li a small {
-  padding-top: 4px;
-}
-
-.quicknavi-items.quicknavi li a.qn_status_1 {
-  color: var(--qn-primary-color);
-  border-left:  var(--gn-border-status-width) solid var(--qn-status1);
-  padding-bottom: 10px;
-}
-
-.quicknavi-items.quicknavi li a.qn_status_2 {
-  color: var(--qn-primary-color);
-  border-left:  var(--gn-border-status-width) solid var(--qn-status2); /* Rubinrot */
-  padding-bottom: 10px;
+.quick-navigation-menu-body ul {
+    margin: 0;
+    padding: 0;
+    list-style: none;
 }
 
-.quicknavi-items.quicknavi li a.qn_status_0 {
-  opacity: 0.6;
-    border-left: var(--gn-border-status-width) solid var(--qn-status-default);
+.quick-navigation-menu-body ul a {
+    display: block;
+    margin: 0 -4px;
+    padding: 0 4px;
 }
 
-.quicknavi-items.quicknavi li .quicknavi_right a.qn_status_1,
-.quicknavi-items.quicknavi li .quicknavi_right a.qn_status_2,
-.quicknavi-items.quicknavi li .quicknavi_right a.qn_status_0 {
-    border: var(--qn-border-width);
-    padding-left: 10px;
-
+.quick-navigation-menu-body ul a:hover,
+.quick-navigation-menu-body ul a.quick-navigation-current {
+    background-color: rgba(75, 154, 217, .25);
+    border-radius: var(--quick-navigation-radius);
+    text-decoration: none;
 }
 
-.quicknavi.quicknavi-items li small {
-  display: block;
+.quick-navigation-menu-list-type-tree ul {
+    margin-left: calc(var(--quick-navigation-radius) - var(--quick-navigation-spacing));
+    padding-left: 0;
 }
-
-.quicknavi li small.rex-primary-id {
-  display: inline;
+.quick-navigation-menu-list-type-tree > ul {
+    margin-bottom: 0;
+    padding: calc(var(--quick-navigation-spacing) / 4) calc(var(--quick-navigation-spacing) / 2);
 }
 
-.quickmedia {
-  margin-left: 1em;
+.quick-navigation-menu-list-type-tree ul li {
+    display: block;
+    position: relative;
+    padding-left : calc(2 * var(--quick-navigation-spacing) - var(--quick-navigation-radius) - 2px);
+    padding-top: var(--quick-navigation-spacing-list-item-y);
 }
 
-.quicknavi .malert {
-  color: #000;
-  padding: 5px;
-  display: block;
+.quick-navigation-menu-list-type-tree ul li::after {
+    content: '';
+    display: block;
+    position: absolute;
+    top: calc(var(--quick-navigation-spacing) / 2 - var(--quick-navigation-radius) + var(--quick-navigation-spacing-list-item-y));
+    left: calc(var(--quick-navigation-spacing) - var(--quick-navigation-radius) - 1px);
+    width: calc(2 * var(--quick-navigation-radius));
+    height: calc(2 * var(--quick-navigation-radius));
+    border-radius: 50%;
+    background: var(--quick-navigation-color-base);
 }
 
-
-.quicknavi-btn-group .watson-btn {
-  margin-right: 0;
-  height: 34px;
-  background-color: var(--qn-watson-btn-background-color);
+.quick-navigation-menu-list-type-tree ul ul li {
+    border-left: 2px solid var(--quick-navigation-color-light);
 }
 
-.quicknavi_left {
-  width: 88%;
-  display: inline-block;
+.quick-navigation-menu-list-type-tree ul ul li:last-child {
+    border-color: transparent;
 }
 
-.dropdown-menu > .quicknavi_left > a {
-  width: 100%;
+.quick-navigation-menu-list-type-tree ul ul li::before {
+    content: '';
+    display: block;
+    position: absolute;
+    top: calc(var(--quick-navigation-spacing) / -2 + var(--quick-navigation-spacing-list-item-y));
+    left: -2px;
+    width: calc(var(--quick-navigation-spacing) + 2px);
+    height: calc(var(--quick-navigation-spacing) + 1px);
+    border: solid var(--quick-navigation-color-light);
+    border-width: 0 0 2px 2px;
 }
 
-.quicknavi_right {
-  width: 12%;
-  display: inline-block;
+.quick-navigation-menu-list-type-list ul {
+    padding: calc(var(--quick-navigation-spacing) / 4) calc(var(--quick-navigation-spacing) / 2);
 }
-
-.dropdown-menu > .quicknavi_right > a {
-    width: 100%;
-    text-overflow: unset;
-    text-align: center;
-    padding-left: 0;
-    padding-right: 0;
-    background: #eeeeee10;
-
+.quick-navigation-menu-list-type-list ul li {
+    padding: var(--quick-navigation-spacing-list-item-y) var(--quick-navigation-spacing-list-item-x);
 }
+.quick-navigation-menu-list-type-list ul li:not(:last-child) {
+    border-bottom: 1px solid  var(--quick-navigation-color-light);
 
-.forcal_border {
-  border-left: 5px solid;
 }
-
-/* hide default Watson-Button */
-li .watson-btn {
-    display: none!important;
+.quick-navigation-item-row {
+    display: flex;
+    gap: 8px;
+    margin-bottom: var(--quick-navigation-spacing-list-item-y);
 }
-
-.quicknavi-btn-group .watson-btn,
-.quicknavi-btn-group .watson-btn:active {
-    margin-right: 0px;
+.quick-navigation-item-row > *:first-child {
+    flex-grow: 1;
 }
+.quick-navigation-item-info {
+    color: var(--quick-navigation-color-base);
+    line-height: 1.25;
+}

assets/quicknavi.js

@@ -30,8 +30,8 @@ function quicknavi_filter_init() {
     $('#qsearch input').keyup(function() {
         var current_query = $('#qsearch input').val();
         if (current_query !== "") {
-            $(".quicknavi.list-group li.quickitem").hide();
-            $(".quicknavi.list-group li.quickitem").each(function() {
+            $('.quick-navigation-menu-body li').hide();
+            $('.quick-navigation-menu-body li').each(function() {
                 var current_keyword = $(this).text();
                 var current_keyword_uppercase = current_keyword.toUpperCase();
                 var uppercase = current_query.toUpperCase();
@@ -42,20 +42,20 @@ function quicknavi_filter_init() {
 
             });
         } else {
-            $(".quicknavi.list-group li.quickitem").show();
+            $('.quick-navigation-menu-body li').show();
         }
 
         $('.form-clear-button input[type="text"]').on('input propertychange', function() {
-        var $this = $(this);
-        var visible = Boolean($this.val());
-        $this.siblings('.form-control-clear').toggleClass('hidden', !visible);
-    }).trigger('propertychange');
+            var $this = $(this);
+            var visible = Boolean($this.val());
+            $this.siblings('.form-control-clear').toggleClass('hidden', !visible);
+        }).trigger('propertychange');
 
-    $('.form-control-clear, .clear-button').click(function() {
-        event.stopPropagation();
-        $(this).siblings('input[type="text"]').val('').trigger("keyup")
-            .trigger('propertychange').focus();
-    });
+        $('.form-control-clear, .clear-button').click(function() {
+            event.stopPropagation();
+            $(this).siblings('input[type="text"]').val('').trigger("keyup")
+                .trigger('propertychange').focus();
+        });
 
     });
 }