diff --git a/web/source/css/_colors.css b/web/source/css/_colors.css index 108e29e66..8c7fc44f8 100644 --- a/web/source/css/_colors.css +++ b/web/source/css/_colors.css @@ -69,8 +69,10 @@ $border-accent: $orange2; $link-fg: $fg-accent; -$role-moderator: $orange1; -$role-admin: $blue2; +$role-admin: $orange2; +$role-mod: $blue2; + +$profile-bg: $gray4; $button-bg: $blue2; $button-fg: $gray1; @@ -80,7 +82,6 @@ $button-danger-bg: $error3; $button-danger-fg: $white1; $button-danger-hover-bg: $error2; - $toot-bg: $gray3; $toot-info-bg: $gray2; diff --git a/web/source/css/profile.css b/web/source/css/profile.css index 04c4d6cd1..bfacc605f 100644 --- a/web/source/css/profile.css +++ b/web/source/css/profile.css @@ -21,9 +21,7 @@ grid-template-columns: 1fr min(92%, 65rem) 1fr; } -main.profile { - background: $gray2; - background: transparent; +.profile { padding: 0.5rem; border-radius: $br; @@ -34,8 +32,8 @@ main.profile { } } -main.profile .header { - background: $bg-accent; +.profile .header { + background: $profile-bg; border-radius: $br; overflow: hidden; margin-bottom: 1rem; @@ -59,13 +57,13 @@ main.profile .header { Basic info container has the user's avatar, display- and username, and role It's partially overlapped over the header image, by a negative margin-top */ + $avatar-size: 8.5rem; + $name-size: 3rem; + $username-size: 2rem; + + $overlap: calc($avatar-size - $name-size - $username-size); + .basic-info { - $avatar-size: 8.5rem; - $name-size: 3rem; - $username-size: 2rem; - - $overlap: calc($avatar-size - $name-size - $username-size); - position: relative; display: grid; box-sizing: border-box; @@ -98,7 +96,7 @@ main.profile .header { .displayname { grid-area: displayname; line-height: $name-size; - font-size: 2rem; + font-size: 1.5rem; font-weight: bold; } @@ -114,10 +112,13 @@ main.profile .header { } .role { + background: $bg; + color: $fg; + border: 0.13rem solid $bg; + grid-area: role; align-self: center; justify-self: start; - border: 0.13rem solid $gray1; border-radius: $br; padding: 0.3rem; @@ -127,21 +128,36 @@ main.profile .header { font-weight: bold; &.admin { - background: $gray1; - color: $orange2; - border-color: $orange2; + color: $role-admin; + border-color: $role-admin; } &.moderator { - background: $gray1; - color: $blue2; - border-color: $blue1; + color: $role-mod; + border-color: $role-mod; } } } } -main.profile { +@media screen and (max-width: 750px) { + .profile .header { + .basic-info { + grid-template-columns: auto 1fr; + grid-template-rows: $avatar-size $name-size auto; + grid-template-areas: + "avatar avatar" + "displayname displayname" + "username role"; + + .displayname { + font-size: 1.4rem; + } + } + } +} + +.profile { .col-header { display: flex; justify-content: start; @@ -149,7 +165,7 @@ main.profile { align-items: center; margin: 0; - background: $gray4; + background: $profile-bg; border-top-left-radius: $br; border-top-right-radius: $br; padding: 0.75rem; @@ -172,7 +188,7 @@ main.profile { } } -main.profile .toots { +.profile .toots { flex: 65 25rem; display: flex; flex-direction: column; @@ -189,7 +205,7 @@ main.profile .toots { } } -main.profile .about-user { +.profile .about-user { flex: 35 14rem; border-radius: $br; overflow: hidden; @@ -199,10 +215,10 @@ main.profile .about-user { } .fields { - background: $gray4; + background: $profile-bg; display: flex; flex-direction: column; - padding: 0.5rem; + padding: 0 0.5rem; padding-top: 0.25rem; .field { @@ -219,9 +235,9 @@ main.profile .about-user { } .bio { - background: $gray4; - padding: 0 0.75rem; - padding-bottom: 0.75rem; + background: $profile-bg; + padding: 1rem 0.75rem; + padding-bottom: 1.25rem; } .accountstats { diff --git a/web/source/settings/components/fake-profile.jsx b/web/source/settings/components/fake-profile.jsx index 0c407e6fb..8fb5085e1 100644 --- a/web/source/settings/components/fake-profile.jsx +++ b/web/source/settings/components/fake-profile.jsx @@ -24,17 +24,23 @@ const React = require("react"); module.exports = function FakeProfile({ avatar, header, display_name, username, role }) { return ( // Keep in sync with web/template/profile.tmpl
-
- {header -
-
-
- {avatar -
{display_name.trim().length > 0 ? display_name : username}
-
-
@{username}
+
+
+ {header +
+
diff --git a/web/source/settings/components/fake-toot.jsx b/web/source/settings/components/fake-toot.jsx index f1b0759cf..b71831a95 100644 --- a/web/source/settings/components/fake-toot.jsx +++ b/web/source/settings/components/fake-toot.jsx @@ -31,19 +31,22 @@ module.exports = function FakeToot({ children }) { } } = query.useVerifyCredentialsQuery(); return ( -
-
- - - - {account.display_name.trim().length > 0 ? account.display_name : account.username} - @{account.username} +
-
+ + ); }; \ No newline at end of file diff --git a/web/source/settings/style.css b/web/source/settings/style.css index 07a4d05e2..6af0abeaf 100644 --- a/web/source/settings/style.css +++ b/web/source/settings/style.css @@ -51,12 +51,6 @@ header { } } -main section { - box-shadow: none; - border-radius: none; - border: none; -} - #root { display: grid; grid-template-columns: 1fr minmax(auto, 60rem) 1fr; @@ -64,6 +58,10 @@ main section { box-sizing: border-box; section.with-sidebar { + background: $bg-accent; + padding: 2rem; + border-radius: $br; + & > div, & > form { border-left: 0.2rem solid $border-accent; padding-left: 0.4rem; @@ -240,10 +238,6 @@ nav.menu-tree { text-transform: capitalize; } -section { - margin-bottom: 1rem; -} - input, select, textarea { box-sizing: border-box; } @@ -405,11 +399,8 @@ section.with-sidebar > div, section.with-sidebar > form { grid-template-rows: 100%; gap: 1rem; - .profile { - .basic { - margin-bottom: 0.5rem; - /* margin-top: 0; */ - } + .profile .header { + border: 0.1rem solid $gray1; } .files {