diff options
author | szaimen <szaimen@e.mail.de> | 2022-09-05 15:09:52 +0200 |
---|---|---|
committer | nextcloud-command <nextcloud-command@users.noreply.github.com> | 2022-09-06 17:27:32 +0000 |
commit | 6579b6c3c84070eb625033aacfc07c80a11f6ee1 (patch) | |
tree | 23f79d0449d7c3bd645a06ef62903336a6b2f790 /core/css/apps.scss | |
parent | 1f967175f3f5be601c3ce0420a01b4fcd5312feb (diff) | |
download | nextcloud-server-6579b6c3c84070eb625033aacfc07c80a11f6ee1.tar.gz nextcloud-server-6579b6c3c84070eb625033aacfc07c80a11f6ee1.zip |
improve app settings design
Signed-off-by: szaimen <szaimen@e.mail.de>
Signed-off-by: nextcloud-command <nextcloud-command@users.noreply.github.com>
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; + } } } |