source:
imaps-frontend/src/components/Profile/Profile.module.css@
0c6b92a
Last change on this file since 0c6b92a was 0c6b92a, checked in by , 5 weeks ago | |
---|---|
|
|
File size: 1.3 KB |
Rev | Line | |
---|---|---|
[0c6b92a] | 1 | .fixedProfileContainer { |
2 | position: fixed; | |
3 | top: 1em; | |
4 | right: 2.5em; | |
5 | z-index: 1000; | |
[d565449] | 6 | } |
7 | ||
[0c6b92a] | 8 | .inlineProfileContainer { |
9 | display: inline-block; | |
10 | cursor: pointer; | |
[d565449] | 11 | } |
12 | ||
[0c6b92a] | 13 | .profileWrapper { |
[d565449] | 14 | display: flex; |
[0c6b92a] | 15 | align-items: center; |
16 | cursor: pointer; | |
[d565449] | 17 | } |
18 | ||
[0c6b92a] | 19 | .profileIconContainer { |
20 | position: relative; /* Makes dropdown position relative to this container */ | |
21 | cursor: pointer; | |
[d565449] | 22 | } |
23 | ||
24 | .profileImage { | |
[0c6b92a] | 25 | width: 60px; |
26 | height: 60px; | |
[d565449] | 27 | border-radius: 50%; |
[0c6b92a] | 28 | transition: box-shadow 0.3s ease; |
29 | } | |
30 | ||
31 | .profileImage:hover { | |
32 | box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.2); | |
[d565449] | 33 | } |
34 | ||
35 | .dropdownMenu { | |
36 | position: absolute; | |
[0c6b92a] | 37 | top: 70px; |
38 | margin-left: 1.8em; | |
39 | transform: translateX(-50%); | |
40 | background-color: #ffffff; | |
41 | box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15); | |
42 | border-radius: 12px; | |
43 | padding: 12px; | |
44 | width: 180px; | |
45 | transition: opacity 0.3s ease; | |
46 | opacity: 1; | |
47 | } | |
48 | ||
49 | .username { | |
50 | padding: 10px 0; | |
51 | font-weight: 600; | |
52 | text-align: center; | |
53 | color: #333; | |
54 | border-bottom: 1px solid #eee; | |
[d565449] | 55 | } |
56 | ||
57 | .menuList { | |
58 | list-style-type: none; | |
59 | padding: 0; | |
60 | margin: 0; | |
61 | } | |
62 | ||
63 | .menuItem { | |
64 | padding: 10px; | |
[0c6b92a] | 65 | cursor: pointer; |
66 | transition: background-color 0.2s ease, color 0.2s ease; | |
[d565449] | 67 | text-align: center; |
[0c6b92a] | 68 | color: #333; |
69 | font-weight: 500; | |
70 | border-radius: 8px; | |
[d565449] | 71 | } |
72 | ||
73 | .menuItem:hover { | |
[0c6b92a] | 74 | background-color: #f5f5f5; |
75 | color: #007bff; /* Optional: Adds a blue highlight on hover */ | |
[d565449] | 76 | } |
Note:
See TracBrowser
for help on using the repository browser.