diff --git a/assets/components/container/warning.vue b/assets/components/container/warning.vue index f4f217ca..95aa2a8b 100644 --- a/assets/components/container/warning.vue +++ b/assets/components/container/warning.vue @@ -129,18 +129,19 @@ export default { .button { display: inline-flex; + flex-basis: 0; flex-direction: column; align-items: center; justify-content: center; border: none; - font-size: 1.5rem; padding: 0; - border: solid 2px transparent; + position: relative; + border-radius: 1rem; color: var(--lighten-strong); - background: none; cursor: pointer; + font-size: 1.5rem; text-decoration: none; - flex-basis: 0; + transition: border .5s ease; &.leave { flex-direction: row; @@ -158,12 +159,28 @@ export default { flex-grow: 1; } - &.straight { - border-color: var(--primary); + &.straight, + &.queer { + background: var(--darken-censor); + + &:before { + content: ''; + width: calc(100% + .3rem); + height: calc(100% + .25rem); + position: absolute; + z-index: -1; + border-radius: 1.1rem; + filter: blur(.5rem); + transition: filter .2s ease; + } } - &.queer { - border-image: linear-gradient(90deg, #f00, #f80, #ff0, #0f0, #00f, #a0f, #fff, #f8f, #0ff) 1; + &.straight:before { + background: var(--primary); + } + + &.queer:before { + background: linear-gradient(90deg, #f00, #f80, #ff0, #0f0, #00f, #a0f, #fff, #f8f, #0ff); } &:not(:last-child) { @@ -180,6 +197,11 @@ export default { .icon { fill: var(--text-light); } + + &.straight:before, + &.queer:before { + filter: blur(0); + } } } diff --git a/assets/components/search/search.vue b/assets/components/search/search.vue index e34c1614..c1a8dc9f 100644 --- a/assets/components/search/search.vue +++ b/assets/components/search/search.vue @@ -5,7 +5,7 @@ class="summary" >Searching... -