Style navbar user avatar

pradoslaw · Dec 6, 2024 · e66f14d · e66f14d
1 parent f86e34e
commit e66f14d
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 1 deletion.
diff --git a/resources/feature/lookAndFeel/lookAndFeel.scss b/resources/feature/lookAndFeel/lookAndFeel.scss
@@ -38,6 +38,8 @@ $forum-aside-radius:            8px;
   @include theme.var(--username-color, $username-style);
   @include theme.var(--username-author-color, $username-author-color);
   @include theme.var(--username-author-background, $username-style);
+  @include theme.var(--var-navbar-user-avatar-border, (light: 2px solid white, dark: 2px solid #181a1b));
+  --var-navbar-user-avatar-padding: 0;
 }
 
 .look-and-feel-legacy {
@@ -57,6 +59,8 @@ $forum-aside-radius:            8px;
   @include theme.var(--username-color, (light: #80a41a, dark: #789b17));
   @include theme.var(--username-author-color, (light: white, dark: #1d1d1d));
   @include theme.var(--username-author-background, (light: #80a41a, dark: #789b17));
+  @include theme.var(--var-navbar-user-avatar-border, (light: 1px solid #dee2e6, dark: 1px solid #121212));
+  --var-navbar-user-avatar-padding: 0.25rem;
 }
 
 @include theme.both {
@@ -142,3 +146,12 @@ $forum-aside-radius:            8px;
   color:      var(--username-author-color) !important; // overrides .badge {color}
   background: var(--username-author-background);
 }
+
+.neon-navbar-user-avatar {
+  border-radius: 6px;
+  border:        var(--var-navbar-user-avatar-border) !important; // overrides .img-thumbnail
+  padding:       var(--var-navbar-user-avatar-padding) !important; // overrides .img-thumbnail
+  .default-avatar {
+    border-radius: 4px;
+  }
+}
diff --git a/resources/views/layout.twig b/resources/views/layout.twig
@@ -127,7 +127,7 @@
           <ul id="nav-auth" class="nav-auth navbar-nav order-2"></ul>
 
           <div class="dropdown nav-avatar order-2">
-            <div class="dropdown-toggle d-block i-35 {{ not isHomepageModern ? 'img-thumbnail' }}" data-bs-toggle="dropdown" style="cursor:pointer;">
+            <div class="dropdown-toggle d-block i-35 {{ not isHomepageModern ? 'img-thumbnail' }} neon-navbar-user-avatar" data-bs-toggle="dropdown" style="cursor:pointer;">
               <div class="user-avatar-border">
                 {{ user_avatar(currentUser.photo, currentUser.name) }}
               </div>