diff options
| author | syuilo <Syuilotan@yahoo.co.jp> | 2021-04-11 21:09:35 +0900 |
|---|---|---|
| committer | syuilo <Syuilotan@yahoo.co.jp> | 2021-04-11 21:09:35 +0900 |
| commit | a88e486468b53145d7745411db02fe507ddffb78 (patch) | |
| tree | 08d4726422ef4d30ccb67f3f8b5275e00f800707 /src/client/components/form | |
| parent | Resolve #7425 (diff) | |
| download | sharkey-a88e486468b53145d7745411db02fe507ddffb78.tar.gz sharkey-a88e486468b53145d7745411db02fe507ddffb78.tar.bz2 sharkey-a88e486468b53145d7745411db02fe507ddffb78.zip | |
Tweak UI
Diffstat (limited to 'src/client/components/form')
| -rw-r--r-- | src/client/components/form/base.vue | 8 | ||||
| -rw-r--r-- | src/client/components/form/form.scss | 12 |
2 files changed, 16 insertions, 4 deletions
diff --git a/src/client/components/form/base.vue b/src/client/components/form/base.vue index 249b49c675..b2e429d6bf 100644 --- a/src/client/components/form/base.vue +++ b/src/client/components/form/base.vue @@ -20,12 +20,16 @@ export default defineComponent({ <style lang="scss" scoped> .rbusrurv { + // 他のCSSからも参照されるので消さないように + --formXPadding: 32px; + --formYPadding: 32px; + line-height: 1.4em; background: var(--bg); - padding: 32px; + padding: var(--formYPadding) var(--formXPadding); &:not(.wide).max-width_400px { - padding: 32px 0; + --formXPadding: 0px; > ::v-deep(*) { ._formPanel { diff --git a/src/client/components/form/form.scss b/src/client/components/form/form.scss index c7f4373544..d9486430be 100644 --- a/src/client/components/form/form.scss +++ b/src/client/components/form/form.scss @@ -10,9 +10,17 @@ } ._formLabel { + position: sticky; + top: var(--stickyTop, 0px); + background: var(--bg); + z-index: 2; font-size: 80%; - padding: 0 16px 8px 16px; - opacity: 0.8; + margin: -8px calc(var(--formXPadding) * -1) 0 calc(var(--formXPadding) * -1); + padding: 8px calc(16px + var(--formXPadding)) 8px calc(16px + var(--formXPadding)); + color: var(--fgTransparentWeak); + background: var(--X17); + -webkit-backdrop-filter: blur(10px); + backdrop-filter: blur(10px); &:empty { display: none; |