diff options
| author | syuilo <Syuilotan@yahoo.co.jp> | 2021-09-17 22:39:15 +0900 |
|---|---|---|
| committer | GitHub <noreply@github.com> | 2021-09-17 22:39:15 +0900 |
| commit | 361069314ffaa61a81b2189c2eec000a3d1d9c35 (patch) | |
| tree | 195271c503ef67b245503ca6fe945bd97a8ea83b /src/client/components | |
| parent | popupで設定ページを表示すると、アカウントの削除ページ... (diff) | |
| download | sharkey-361069314ffaa61a81b2189c2eec000a3d1d9c35.tar.gz sharkey-361069314ffaa61a81b2189c2eec000a3d1d9c35.tar.bz2 sharkey-361069314ffaa61a81b2189c2eec000a3d1d9c35.zip | |
Refine UI (#7806)
* wip
* wip
* wip
* wip
* wip
* wip
* wip
* wip
* Update default.vue
* wip
Diffstat (limited to 'src/client/components')
| -rw-r--r-- | src/client/components/global/avatar.vue | 26 | ||||
| -rw-r--r-- | src/client/components/ui/folder.vue | 3 | ||||
| -rw-r--r-- | src/client/components/ui/input.vue | 2 | ||||
| -rw-r--r-- | src/client/components/ui/textarea.vue | 2 |
4 files changed, 30 insertions, 3 deletions
diff --git a/src/client/components/global/avatar.vue b/src/client/components/global/avatar.vue index eea970ec9a..395ed5d8ce 100644 --- a/src/client/components/global/avatar.vue +++ b/src/client/components/global/avatar.vue @@ -73,6 +73,22 @@ export default defineComponent({ </script> <style lang="scss" scoped> +@keyframes earwiggleleft { + from { transform: rotate(37.6deg) skew(30deg); } + 25% { transform: rotate(10deg) skew(30deg); } + 50% { transform: rotate(20deg) skew(30deg); } + 75% { transform: rotate(0deg) skew(30deg); } + to { transform: rotate(37.6deg) skew(30deg); } +} + +@keyframes earwiggleright { + from { transform: rotate(-37.6deg) skew(-30deg); } + 30% { transform: rotate(-10deg) skew(-30deg); } + 55% { transform: rotate(-20deg) skew(-30deg); } + 75% { transform: rotate(0deg) skew(-30deg); } + to { transform: rotate(-37.6deg) skew(-30deg); } +} + .eiwwqkts { position: relative; display: inline-block; @@ -132,6 +148,16 @@ export default defineComponent({ border-radius: 75% 0 75% 75%; transform: rotate(-37.5deg) skew(-30deg); } + + &:hover { + &:before { + animation: earwiggleleft 1s infinite; + } + + &:after { + animation: earwiggleright 1s infinite; + } + } } } </style> diff --git a/src/client/components/ui/folder.vue b/src/client/components/ui/folder.vue index 1f3593a74a..eecf1d8be1 100644 --- a/src/client/components/ui/folder.vue +++ b/src/client/components/ui/folder.vue @@ -99,7 +99,8 @@ export default defineComponent({ z-index: 10; position: sticky; top: var(--stickyTop, 0px); - background: var(--panel); + padding: var(--x-padding); + background: var(--x-header, var(--panel)); /* TODO panelの半透明バージョンをプログラマティックに作りたい background: var(--X17); -webkit-backdrop-filter: var(--blur, blur(8px)); diff --git a/src/client/components/ui/input.vue b/src/client/components/ui/input.vue index 05ce5d3e15..a916a0b035 100644 --- a/src/client/components/ui/input.vue +++ b/src/client/components/ui/input.vue @@ -245,7 +245,7 @@ export default defineComponent({ font-size: 1em; color: var(--fg); background: var(--panel); - border: solid 1px var(--inputBorder); + border: solid 0.5px var(--inputBorder); border-radius: 6px; outline: none; box-shadow: none; diff --git a/src/client/components/ui/textarea.vue b/src/client/components/ui/textarea.vue index 53a141f011..08ac3182a9 100644 --- a/src/client/components/ui/textarea.vue +++ b/src/client/components/ui/textarea.vue @@ -212,7 +212,7 @@ export default defineComponent({ font-size: 1em; color: var(--fg); background: var(--panel); - border: solid 1px var(--inputBorder); + border: solid 0.5px var(--inputBorder); border-radius: 6px; outline: none; box-shadow: none; |