Commit | Line | Data |
---|---|---|
27db335a AE |
1 | .userProfileHeader.box { |
2 | margin: 0; | |
3 | } | |
4 | .userProfileCoverPhoto { | |
41ec911a | 5 | background-image: url('../images/user-profile-header.jpg'); // todo |
c0053218 | 6 | background-position: center; |
41ec911a | 7 | background-size: cover; |
c0053218 AE |
8 | |
9 | @include large-screen-only { | |
10 | height: 200px; | |
11 | } | |
12 | ||
13 | @include small-screen-only { | |
14 | height: 100px; | |
15 | } | |
27db335a AE |
16 | } |
17 | ||
18 | .userProfileUser { | |
19 | background-color: $wcfHeaderBackground; | |
41ec911a | 20 | |
27db335a AE |
21 | > .layoutBoundary { |
22 | align-items: center; | |
23 | display: flex; | |
c0053218 | 24 | padding: 5px 10px 10px 160px; |
b8eab696 | 25 | position: relative; |
c0053218 AE |
26 | |
27 | @include small-screen-only { | |
28 | padding-left: 90px; | |
29 | } | |
41ec911a MW |
30 | } |
31 | ||
32 | .userAvatar { | |
27db335a AE |
33 | background-color: $wcfHeaderBackground; |
34 | border-radius: 50%; | |
35 | left: 0; | |
36 | padding: 10px; | |
37 | position: absolute; | |
38 | top: 50%; | |
39 | transform: translateY(-50%); | |
c0053218 AE |
40 | |
41 | @include small-screen-only { | |
42 | .userAvatarImage { | |
43 | height: 64px !important; | |
44 | width: 64px !important; | |
45 | } | |
46 | } | |
b8eab696 | 47 | } |
b8eab696 | 48 | |
27db335a AE |
49 | .contentHeader { |
50 | color: $wcfHeaderText; | |
51 | flex: 1 1 auto; | |
41ec911a MW |
52 | } |
53 | ||
41ec911a | 54 | .buttonGroupNavigation { |
c0053218 AE |
55 | @include large-screen-only { |
56 | flex: 0 0 auto; | |
57 | margin-left: 10px; | |
27db335a | 58 | |
c0053218 AE |
59 | .button { |
60 | background-color: $wcfHeaderMenuBackground; | |
61 | color: $wcfHeaderMenuLink; | |
62 | ||
63 | &.active, | |
64 | &:hover { | |
65 | background-color: $wcfHeaderMenuBackgroundActive; | |
66 | color: $wcfHeaderMenuLinkActive; | |
67 | } | |
41ec911a | 68 | } |
b8eab696 | 69 | } |
c0053218 AE |
70 | |
71 | @include small-screen-only { | |
72 | display: none; | |
73 | } | |
b8eab696 AE |
74 | } |
75 | } | |
929f7e47 | 76 | |
27db335a AE |
77 | .userProfileDetails { |
78 | background-color: $wcfSidebarBackground; | |
79 | ||
80 | > .layoutBoundary { | |
c0053218 AE |
81 | padding: 10px 10px 10px 160px; |
82 | ||
83 | @include small-screen-only { | |
84 | padding: 20px 10px 10px; | |
85 | } | |
27db335a AE |
86 | } |
87 | } | |
88 | ||
89 | .userProfile .main { | |
90 | padding-top: 0; | |
91 | } | |
92 | ||
93 | .section.userProfileContent { | |
94 | margin-top: 20px; | |
95 | } | |
96 | ||
929f7e47 MW |
97 | .userAvatarList { |
98 | display: flex; | |
99 | flex-wrap: wrap; | |
06a511ea | 100 | margin-bottom: -15px; |
929f7e47 MW |
101 | |
102 | > li { | |
103 | flex: 0 0 25%; | |
06a511ea | 104 | margin-bottom: 15px; |
929f7e47 MW |
105 | text-align: center; |
106 | ||
107 | > a { | |
108 | display: block; | |
109 | } | |
110 | } | |
111 | } | |
112 | ||
113 | .userList { | |
114 | .box48 { | |
115 | align-items: center; | |
116 | } | |
b8eab696 | 117 | } |
06a511ea MW |
118 | |
119 | .likeList { | |
120 | > .likeTypeSelection { | |
121 | text-align: right; | |
122 | ||
123 | &:hover { | |
124 | background-color: transparent; | |
125 | } | |
126 | ||
127 | > .buttonGroup { | |
128 | display: inline-flex; | |
129 | ||
130 | &:not(:first-child) { | |
131 | margin-left: 5px; | |
132 | } | |
133 | } | |
134 | } | |
135 | } |