diff --git a/client/css/core-general.styl b/client/css/core-general.styl index 11f0a6a..d25c5f6 100644 --- a/client/css/core-general.styl +++ b/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 */ diff --git a/client/css/pager.styl b/client/css/pager.styl index 547b719..66206a9 100644 --- a/client/css/pager.styl +++ b/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 diff --git a/client/css/post-main-view.styl b/client/css/post-main-view.styl index 48f3c15..e643dfb 100644 --- a/client/css/post-main-view.styl +++ b/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 diff --git a/client/css/tag-input-control.styl b/client/css/tag-input-control.styl index bc34cb9..66e060b 100644 --- a/client/css/tag-input-control.styl +++ b/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 diff --git a/client/js/controls/tag_input_control.js b/client/js/controls/tag_input_control.js index 1ac1cb3..a383d44 100644 --- a/client/js/controls/tag_input_control.js +++ b/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);