diff options
| author |  f0x52 <f0x@cthu.lu> | 2023-03-29 12:18:45 +0200 |
|---|---|---|
| committer |  GitHub <noreply@github.com> | 2023-03-29 12:18:45 +0200 |
| commit | 0746ef741a51bd8f92ca5e07dfb9f35b66f4cf06 (patch) | |
| tree | 3c70da50eea8bad5db78dff5ce3a7a93dfefa36b /web/source/css | |
| parent | [bugfix] Remove unique constraint on public_key (#1653) (diff) | |
| download | gotosocial-0746ef741a51bd8f92ca5e07dfb9f35b66f4cf06.tar.xz | |
[frontend] Settings navigation design (#1652)
* change header image alignment
(cherry picked from commit df1bb339a5c597a2b668cedb3dafec5a390df120)
* big mess navigation refactor
* bit of cleanup
* minor css tweaks
* fix error rendering code for remote emoji
* refactor navigation structure code
* refactor styling
* fix className
* stash
* restructure navigation generation
* url wildcard formatting
* remove un-implemented User menu entry
* remove commented lines
* clarify permissions check
* invert permissions logic for clarity
Diffstat (limited to 'web/source/css')
| -rw-r--r-- | web/source/css/_colors.css | 12 | ||||
| -rw-r--r-- | web/source/css/base.css | 62 |
2 files changed, 34 insertions, 40 deletions
diff --git a/web/source/css/_colors.css b/web/source/css/_colors.css index 6d4b056b8..01f59a55d 100644 --- a/web/source/css/_colors.css +++ b/web/source/css/_colors.css @@ -101,15 +101,15 @@ $input-border: $blue1; $input-error-border: $error3; $input-focus-border: $blue3; -$settings-nav-bg: $bg-accent; -$settings-nav-header-fg: $gray1; -$settings-nav-header-bg: $orange1; +$settings-nav-bg: $bg; +$settings-nav-header-fg: $orange2; $settings-nav-bg-hover: $gray3; -/* $settings-nav-fg-hover: $gray1; */ +$settings-nav-fg-hover: $fg; -$settings-nav-bg-active: $gray2; -/* $settings-nav-fg-active: $orange2; */ +$settings-nav-bg-active: $blue3; +$settings-nav-border-active: $info-bg; +$settings-nav-fg-active: $gray2; $error-fg: $error1; $error-bg: $error2; diff --git a/web/source/css/base.css b/web/source/css/base.css index c30b72373..45b797c64 100644 --- a/web/source/css/base.css +++ b/web/source/css/base.css @@ -97,11 +97,10 @@ header { header a { margin: 2rem; display: flex; - flex-direction: column; flex-wrap: wrap; + gap: 2rem; img { - margin-bottom: 1rem; align-self: center; height: 6rem; } @@ -120,7 +119,6 @@ header a { } .excerpt-top { - margin-top: -1rem; margin-bottom: 2rem; font-style: italic; font-weight: normal; @@ -515,41 +513,37 @@ label { margin-bottom: 0; } - .contact-account-card { - /* display: inline-grid; - grid-template-columns: 4rem auto; - grid-template-rows: 4rem; - gap: 1rem; - padding: 0.5rem; */ - display: inline-grid; - grid-template-columns: auto 1fr; - grid-template-rows: auto auto; - text-decoration: none; - gap: 0.5rem 1rem; - border-radius: $br; - padding: 0.5rem; - min-width: 40%; - margin-bottom: 0.3rem; +} - background: $list-entry-bg; +.account-card { + display: inline-grid; + grid-template-columns: auto 1fr; + grid-template-rows: auto auto; + text-decoration: none; + gap: 0.5rem 1rem; + border-radius: $br; + padding: 0.5rem; + min-width: 40%; + margin-bottom: 0.3rem; - &:hover { - background: $list-entry-alternate-bg; - } + background: $list-entry-bg; - h3 { - align-self: end; - margin: 0; - color: $fg; - } + &:hover { + background: $list-entry-alternate-bg; + } - img.avatar { - border-radius: 0.5rem; - width: 5rem; - height: 5rem; - object-fit: cover; - grid-row: 1 / span 2; - } + h3 { + align-self: end; + margin: 0; + color: $fg; + } + + img.avatar { + border-radius: 0.5rem; + width: 5rem; + height: 5rem; + object-fit: cover; + grid-row: 1 / span 2; } } |