client/css: dark mode contrast fixes (#388)

* client/css: fix dark mode pagination header bg

* client/css/post-main-view: dark uses box-shadow

* client/css: animate compact-tags updates

* client: tag input animations fixed

* client/css: darken darktheme success bg

* client/css: dark tag background colors

* client/css/tag-input-control: dark suggest header

* client/css: darktheme mobile site-name in nav

client/css/core-general.styl

@@ -240,6 +240,9 @@ nav
                 background: $focused-tab-background-color-darktheme
     &#top-navigation
         background: $top-navigation-color-darktheme
+        ul
+            #mobile-navigation-toggle
+                color: $text-color-darktheme
 
 a .access-key
     text-decoration: underline
@@ -275,7 +278,7 @@ a .access-key
             background: darken($message-error-background-color, 60%)
         &.success
             border: 1px solid darken($message-success-border-color, 30%)
-            background: darken($message-success-background-color, 60%)
+            background: darken($message-success-background-color, 80%)
 
 .thumbnail
     /*background-image: attr(data-src url)*/ /* not available yet */

client/css/pager.styl

@@ -22,7 +22,7 @@
                 z-index: 1
             span
                 position: relative
-                background: white
+                background: $window-color
                 padding: 0 1em
                 z-index: 2
 
@@ -31,3 +31,5 @@
         .page-header
             &:before
                 background: $top-navigation-color-darktheme
+            span
+                background: $window-color-darktheme

client/css/post-main-view.styl

@@ -27,7 +27,7 @@
                     padding: 0.3em 0
                     text-align: center
                     vertical-align: middle
-                    transition: background 0.2s linear
+                    transition: background 0.2s linear, box-shadow 0.2s linear
                     &:not(.inactive):hover
                         background: lighten($main-color, 90%)
                 i
@@ -45,6 +45,14 @@
         .post-content
             margin: 0
 
+.darktheme .post-view
+    >.sidebar
+        nav.buttons
+            article
+                a:not(.inactive):hover
+                    background: unset
+                    box-shadow: inset 0 0 0 0.3em $main-color
+
 @media (max-width: 800px)
     .post-view
         flex-wrap: wrap

client/css/tag-input-control.styl

@@ -86,6 +86,12 @@ div.tag-input
             font-size: 90%
             unselectable()
 
+@keyframes tag-added-to-post
+    from
+        max-height: 0
+    to
+        max-height: 5em
+
 ul.compact-tags
     width: 100%
     margin: 0.5em 0 0 0
@@ -103,18 +109,30 @@ ul.compact-tags
         a:focus
             outline: 0
             box-shadow: inset 0 0 0 2px $main-color
+        // these 3 added when tag is added to ul
+        &.added, &.new, &.implication
+            animation: tag-added-to-post 1s ease forwards
         &.implication
-            background: $implied-tag-background-color
             color: $implied-tag-text-color
+            background-color: $implied-tag-background-color
         &.new
-            background: $new-tag-background-color
             color: $new-tag-text-color
+            background-color: $new-tag-background-color
         &.duplicate
-            background: $duplicate-tag-background-color
             color: $duplicate-tag-text-color
+            background-color: $duplicate-tag-background-color
     i
         padding-right: 0.4em
 
+.darktheme ul.compact-tags
+    li
+        &.new
+            background-color: darken($new-tag-background-color, 80%)
+        &.implication
+            background-color: darken($implied-tag-background-color, 85%)
+        &.duplicate
+            background-color: darken($duplicate-tag-background-color, 80%)
+
 div.tag-input, ul.compact-tags
     .tag-usages, .tag-weight, .remove-tag
         color: $inactive-link-color
@@ -134,6 +152,8 @@ div.tag-input, ul.compact-tags
             background: $window-color-darktheme
             ul li:last-child
                 border-bottom: 0.5em solid alpha($window-color-darktheme, 0)
+            p
+                background: darken($tag-suggestions-header-color, 80%)
         .append
             color: $inactive-link-color-darktheme
     div.tag-input, ul.compact-tags

client/js/controls/tag_input_control.js

@@ -197,9 +197,12 @@ class TagInputControl extends events.EventTarget {
                 if (!tag.category) {
                     listItemNode.classList.add("new");
                 }
-                if (source === SOURCE_IMPLICATION) {
+                else if (source === SOURCE_IMPLICATION) {
                     listItemNode.classList.add("implication");
                 }
+                else {
+                    listItemNode.classList.add("added");
+                }
                 this._tagListNode.prependChild(listItemNode);
                 _fadeOutListItemNodeStatus(listItemNode);