ulysia/szurubooru
Archived
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

client/css: dark tag background colors

Browse source
This commit is contained in:
Ben Klein 2021-04-22 18:56:28 +00:00
parent 7d37886970
commit f73e27c91c
1 changed files with 14 additions and 16 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

30
client/css/tag-input-control.styl
View file

@ -86,12 +86,6 @@ div.tag-input
font-size: 90% font-size: 90%
unselectable() unselectable()
@keyframes tag-background-updated
from
background-position: 200% 0%
to
background-position: 0% 0%
@keyframes tag-added-to-post @keyframes tag-added-to-post
from from
max-height: 0 max-height: 0
@ -110,31 +104,35 @@ ul.compact-tags
overflow: hidden overflow: hidden
text-overflow: ellipsis text-overflow: ellipsis
transition: background-color 0.5s linear transition: background-color 0.5s linear
background-size: 200%
a a
display: inline display: inline
a:focus a:focus
outline: 0 outline: 0
box-shadow: inset 0 0 0 2px $main-color box-shadow: inset 0 0 0 2px $main-color
// these 3 added when tag is added to ul // these 3 added when tag is added to ul
&.added, &.new, &.implication
animation: tag-added-to-post 1s ease forwards
&.implication &.implication
color: $implied-tag-text-color color: $implied-tag-text-color
background-image: linear-gradient(90deg, transparent, transparent, $implied-tag-background-color) background-color: $implied-tag-background-color
animation: tag-added-to-post 1s ease forwards, tag-background-updated 2s ease forwards
&.new &.new
color: $new-tag-text-color color: $new-tag-text-color
background-image: linear-gradient(90deg, transparent, transparent, $new-tag-background-color) background-color: $new-tag-background-color
animation: tag-added-to-post 1s ease forwards, tag-background-updated 2s ease forwards
&.added
animation: tag-added-to-post 1s ease forwards
// highlight when already in tag list
&.duplicate &.duplicate
color: $duplicate-tag-text-color color: $duplicate-tag-text-color
background-image: linear-gradient(90deg, transparent, transparent, $duplicate-tag-background-color) background-color: $duplicate-tag-background-color
animation: tag-background-updated 2s ease forwards
i i
padding-right: 0.4em 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 div.tag-input, ul.compact-tags
.tag-usages, .tag-weight, .remove-tag .tag-usages, .tag-weight, .remove-tag
color: $inactive-link-color color: $inactive-link-color