Commit | Line | Data |
---|---|---|
2901b096 | 1 | .userProfileUser { |
07c80400 MW |
2 | .contentHeaderIcon { |
3 | position: relative; | |
4 | ||
5 | a { | |
6 | display: block; | |
7 | } | |
8 | ||
9 | .badgeOnline { | |
10 | left: 0; | |
11 | pointer-events: none; | |
12 | position: absolute; | |
13 | ||
14 | @include screen-md-up { | |
15 | bottom: 0; | |
16 | } | |
17 | ||
18 | @include screen-sm-down { | |
19 | color: transparent; | |
20 | padding: 0; | |
21 | top: 0; | |
22 | width: 0; | |
23 | ||
24 | &::before { | |
25 | background-color: inherit; | |
26 | border: 1px solid rgba(255, 255, 255, 1); | |
27 | border-radius: 50%; | |
28 | content: ""; | |
29 | height: 16px; | |
30 | left: 34px; /* 48px (avatar) - 16px (width) - 2px (border-left + border-right) */ | |
31 | position: absolute; | |
32 | width: 16px; | |
33 | } | |
34 | } | |
35 | } | |
36 | } | |
37 | ||
2772d4eb MW |
38 | .contentHeaderIcon a { |
39 | display: block; | |
2901b096 MW |
40 | } |
41 | ||
42 | .contentDescription { | |
34208c98 AE |
43 | margin-top: 20px; |
44 | } | |
91918c8f | 45 | |
07c80400 | 46 | @include screen-sm-down { |
91918c8f MW |
47 | display: flex; |
48 | flex-wrap: wrap; | |
49 | ||
50 | .contentHeaderIcon { | |
51 | display: block; | |
52 | flex: 0 0 48px; | |
53 | margin-right: 10px; | |
54 | ||
55 | img { | |
56 | width: 48px !important; | |
57 | height: 48px !important; | |
58 | } | |
59 | } | |
60 | ||
61 | .contentHeaderTitle { | |
62 | flex: 0 0 calc(100% - 58px); | |
63 | max-width: calc(100% - 58px); | |
64 | } | |
07c80400 MW |
65 | } |
66 | ||
67 | @include screen-xs { | |
91918c8f MW |
68 | .contentHeaderNavigation { |
69 | flex: 0 0 100%; | |
70 | ||
71 | .userProfileButtonContainer { | |
72 | display: flex; | |
73 | ||
74 | > li { | |
75 | flex: 1 1 auto; | |
76 | margin-top: 0 !important; | |
77 | } | |
78 | } | |
79 | } | |
80 | } | |
81 | ||
82 | @include screen-md-up { | |
83 | .contentHeaderIcon { | |
84 | flex: 0 0 128px; | |
85 | margin-right: 20px; | |
86 | } | |
87 | } | |
27db335a AE |
88 | } |
89 | ||
cd358fd9 | 90 | .userAvatarImage { |
1f633a6b | 91 | background-color: #fff; |
cd358fd9 AE |
92 | border-radius: 50%; |
93 | } | |
94 | ||
929f7e47 MW |
95 | .userAvatarList { |
96 | display: flex; | |
97 | flex-wrap: wrap; | |
cd358fd9 | 98 | margin-bottom: -10px; |
929f7e47 MW |
99 | |
100 | > li { | |
cd358fd9 AE |
101 | flex: 0 0 48px; |
102 | margin-bottom: 10px; | |
929f7e47 MW |
103 | text-align: center; |
104 | ||
cd358fd9 AE |
105 | &:not(:last-child) { |
106 | margin-right: -12px; | |
107 | } | |
108 | ||
929f7e47 MW |
109 | > a { |
110 | display: block; | |
cd358fd9 AE |
111 | |
112 | > img { | |
113 | padding: 2px; | |
114 | } | |
929f7e47 MW |
115 | } |
116 | } | |
117 | } | |
118 | ||
119 | .userList { | |
120 | .box48 { | |
121 | align-items: center; | |
122 | } | |
b8eab696 | 123 | } |
06a511ea MW |
124 | |
125 | .likeList { | |
126 | > .likeTypeSelection { | |
127 | text-align: right; | |
128 | ||
129 | &:hover { | |
130 | background-color: transparent; | |
131 | } | |
132 | ||
133 | > .buttonGroup { | |
134 | display: inline-flex; | |
135 | ||
136 | &:not(:first-child) { | |
137 | margin-left: 5px; | |
138 | } | |
139 | } | |
140 | } | |
141 | } | |
b3df3a4d AE |
142 | |
143 | /* using `dl` + `.inlineDataList` to prevent styles applied to the | |
144 | data list provided by the `userInformation` template */ | |
145 | .userProfilePreview dl.inlineDataList { | |
146 | margin-top: 10px; | |
147 | ||
148 | @include wcfFontSmall; | |
149 | } |