diff options
| author | Simon L <szaimen@e.mail.de> | 2022-09-06 19:59:24 +0200 |
|---|---|---|
| committer | GitHub <noreply@github.com> | 2022-09-06 19:59:24 +0200 |
| commit | 2a59d48d0c7d920a7ce2bc5b8c56a0fffd17141f (patch) | |
| tree | 23f79d0449d7c3bd645a06ef62903336a6b2f790 /core/css/apps.scss | |
| parent | 1f967175f3f5be601c3ce0420a01b4fcd5312feb (diff) | |
| parent | 6579b6c3c84070eb625033aacfc07c80a11f6ee1 (diff) | |
| download | nextcloud-server-2a59d48d0c7d920a7ce2bc5b8c56a0fffd17141f.tar.gz nextcloud-server-2a59d48d0c7d920a7ce2bc5b8c56a0fffd17141f.zip | |
Merge pull request #33900 from nextcloud/enh/33802/improve-appsettings-design
improve app settings design
Diffstat (limited to 'core/css/apps.scss')
| -rw-r--r-- | core/css/apps.scss | 84 |
1 files changed, 42 insertions, 42 deletions
diff --git a/core/css/apps.scss b/core/css/apps.scss index c72bd0ae2f8..49148c1f3fd 100644 --- a/core/css/apps.scss +++ b/core/css/apps.scss @@ -814,52 +814,52 @@ $min-content-width: variables.$breakpoint-mobile - variables.$navigation-width - border-radius: calc(var(--default-clickable-area) / 2); padding: calc(var(--default-grid-baseline) * 2); padding-top: 0; -} - - -#app-settings-header .settings-button { - display: flex; - align-items: center; - height: 44px; - width: 100%; - padding: 0; - margin: 0; - background-color: var(--color-main-background); - box-shadow: none; - border: 0; - border-radius: calc(var(--default-clickable-area) / 2); - text-align: left; - font-weight: normal; - font-size: 100%; - opacity: 0.8; - - /* like app-navigation a */ - color: var(--color-main-text); - &.opened { - border-top: solid 1px var(--color-border); + .settings-button { + display: flex; + align-items: center; + height: 44px; + width: 100%; + padding: 0; + margin: 0; background-color: var(--color-main-background); - } - &:hover, - &:focus { - background-color: var(--color-background-hover); - } + box-shadow: none; + border: 0; + border-radius: calc(var(--default-clickable-area) / 2); + text-align: left; + font-weight: normal; + font-size: 100%; + opacity: 0.8; + + /* like app-navigation a */ + color: var(--color-main-text); + + &.opened { + border-top: solid 1px var(--color-border); + background-color: var(--color-main-background); + margin-top: 8px; + } + &:hover, + &:focus { + background-color: var(--color-background-hover); + } - &::before { - background-image: var(--icon-settings-dark); - background-position: 14px center; - background-repeat: no-repeat; - content: ''; - width: 44px; - height: 44px; - top: 0; - left: 0; - display: block; - } + &::before { + background-image: var(--icon-settings-dark); + background-position: 14px center; + background-repeat: no-repeat; + content: ''; + width: 44px; + height: 44px; + top: 0; + left: 0; + display: block; + } - &:focus-visible { - box-shadow: 0 0 0 2px inset var(--color-primary) !important; - background-position: 12px center; + &:focus-visible { + box-shadow: 0 0 0 2px inset var(--color-primary) !important; + background-position: 12px center; + } } } |