wcfsetup/install/files/style/ui/userProfile.scss

   1 .userProfileUser {
   2         .contentHeaderIcon {
   3                 position: relative;
   4
   5                 a {
   6                         display: block;
   7                 }
   8         }
   9
  10         .contentHeaderIcon a {
  11                 display: block;
  12         }
  13
  14         .contentHeaderDescription {
  15                 margin-top: 20px;
  16         }
  17
  18         @include screen-sm-md {
  19                 .contentHeaderNavigation {
  20                         .button {
  21                                 .invisible {
  22                                         display: inline;
  23                                 }
  24                         }
  25                 }
  26         }
  27
  28         @include screen-sm-down {
  29                 display: flex;
  30                 flex-wrap: wrap;
  31
  32                 .contentHeaderNavigation {
  33                         flex: 0 0 100%;
  34                 }
  35         }
  36
  37         @include screen-sm {
  38                 .contentHeaderIcon {
  39                         display: block;
  40                         flex: 0 0 96px;
  41                         margin-right: 15px;
  42
  43                         img {
  44                                 width: 96px !important;
  45                                 height: 96px !important;
  46                         }
  47                 }
  48
  49                 .contentHeaderTitle {
  50                         /* The `flex` shorthand fails in IE11 if `calc()` is used. */
  51                         flex-grow: 0;
  52                         flex-shrink: 0;
  53                         flex-basis: calc(100% - 111px);
  54                         max-width: calc(100% - 11px);
  55                 }
  56         }
  57
  58         @include screen-xs {
  59                 .contentHeaderIcon {
  60                         display: block;
  61                         flex: 0 0 48px;
  62                         margin-right: 10px;
  63
  64                         img {
  65                                 width: 48px !important;
  66                                 height: 48px !important;
  67                         }
  68                 }
  69
  70                 .contentHeaderTitle {
  71                         /* The `flex` shorthand fails in IE11 if `calc()` is used. */
  72                         flex-grow: 0;
  73                         flex-shrink: 0;
  74                         flex-basis: calc(100% - 58px);
  75                 }
  76
  77                 .contentHeaderNavigation {
  78                         .userProfileButtonContainer {
  79                                 display: flex;
  80
  81                                 > li {
  82                                         flex: 1 1 auto;
  83                                         margin-top: 0 !important;
  84
  85                                         &:not(:last-child) {
  86                                                 margin-right: 1px;
  87                                         }
  88
  89                                         .invisible {
  90                                                 display: none !important;
  91                                         }
  92                                 }
  93                         }
  94                 }
  95         }
  96
  97         @include screen-md-up {
  98                 .contentHeaderIcon {
  99                         flex: 0 0 128px;
 100                         margin-right: 20px;
 101                 }
 102         }
 103 }
 104
 105 /* user profile cover photo */
 106 .userProfileUserWithCoverPhoto {
 107         padding-top: 165px;
 108         position: relative;
 109
 110         .userProfileCoverPhoto {
 111                 background: no-repeat center;
 112                 background-size: cover;
 113                 border-radius: 3px;
 114                 height: 200px;
 115                 left: 0;
 116                 position: absolute;
 117                 right: 0;
 118                 top: 0;
 119
 120                 &::after {
 121                         background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 70%, rgba(0, 0, 0, 0.5) 100%);
 122                         border-bottom-left-radius: 3px;
 123                         border-bottom-right-radius: 3px;
 124                         bottom: 0;
 125                         content: "";
 126                         display: block;
 127                         left: 0;
 128                         pointer-events: none;
 129                         position: absolute;
 130                         right: 0;
 131                         top: 0;
 132                 }
 133
 134                 .userProfileManageCoverPhoto {
 135                         position: absolute;
 136                         right: 10px;
 137                         top: 10px;
 138                 }
 139         }
 140
 141         .contentHeaderTitle {
 142                 /* avoid being covered by the photo */
 143                 z-index: 10;
 144         }
 145
 146         .userProfileUsername {
 147                 color: #fff;
 148                 text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.6);
 149         }
 150
 151         @include screen-md-up {
 152                 .contentHeaderIcon {
 153                         flex: 0 0 138px;
 154                         margin-top: -29px; /* 35px photo overlap - (128px height / 2) */
 155                         padding-left: 10px;
 156                 }
 157
 158                 .contentHeaderDescription {
 159                         margin-top: 15px !important;
 160                 }
 161
 162                 .contentHeaderNavigation {
 163                         padding-top: 45px;
 164                 }
 165         }
 166
 167         @include screen-sm-up {
 168                 .contentHeaderIcon .badgeOnline {
 169                         left: 10px !important;
 170                 }
 171
 172                 .userProfileUsername + .badge {
 173                         margin-left: 5px;
 174                 }
 175         }
 176
 177         @include screen-sm {
 178                 padding-top: 170px;
 179
 180                 .contentHeaderIcon {
 181                         margin-top: -18px; /* 30px photo overlap - (96px height / 2) */
 182                         padding-left: 5px;
 183                 }
 184
 185                 .contentHeaderDescription {
 186                         margin-top: 10px !important;
 187                 }
 188         }
 189
 190         @include screen-xs {
 191                 padding-top: 120px;
 192
 193                 .userProfileCoverPhoto {
 194                         height: 150px;
 195                 }
 196
 197                 .contentHeaderIcon {
 198                         margin-top: 6px; /* 30px photo overlap - (48px height / 2) */
 199                         padding-left: 5px;
 200                 }
 201
 202                 .contentTitle {
 203                         margin-bottom: 35px;
 204                         position: relative;
 205                 }
 206
 207                 .userProfileUsername {
 208                         display: block;
 209                 }
 210
 211                 .userProfileUsername + .badge {
 212                         margin-left: 0;
 213                         position: absolute;
 214                         top: 35px !important;
 215                 }
 216
 217                 .userProfileUsername + .userRankImage {
 218                         position: absolute;
 219                         top: 32px;
 220                 }
 221
 222                 .userProfileUsername + .badge + .userRankImage {
 223                         position: relative;
 224
 225                         > img {
 226                                 transform: translateY(32px);
 227                         }
 228                 }
 229
 230                 .contentHeaderDescription {
 231                         margin-left: -58px;
 232                 }
 233         }
 234 }
 235
 236 .userTitleBadge {
 237         max-width: 154px;
 238         overflow: hidden;
 239         text-overflow: ellipsis;
 240 }
 241
 242 .userAvatarImage {
 243         background-color: #fff;
 244         border-radius: 50%;
 245 }
 246
 247 .userAvatarList {
 248         display: flex;
 249         flex-wrap: wrap;
 250         margin-bottom: -10px;
 251
 252         > li {
 253                 flex: 0 0 48px;
 254                 margin-bottom: 10px;
 255                 text-align: center;
 256
 257                 &:not(:last-child) {
 258                         margin-right: -12px;
 259                 }
 260
 261                 > a {
 262                         display: block;
 263
 264                         > img {
 265                                 border: 2px solid #fff;
 266                         }
 267                 }
 268         }
 269
 270         &.small {
 271                 > li {
 272                         flex: 0 0 24px;
 273
 274                         &:not(:last-child) {
 275                                 margin-right: -6px;
 276                         }
 277
 278                         > a {
 279                                 > img {
 280                                         border: 1px solid #fff;
 281                                 }
 282                         }
 283                 }
 284         }
 285 }
 286
 287 .userList {
 288         .box48 {
 289                 align-items: center;
 290         }
 291 }
 292
 293 .userProfilePreview {
 294         position: relative;
 295
 296         .userInformation {
 297                 margin-bottom: 20px;
 298         }
 299
 300         .buttonGroupNavigation {
 301                 position: absolute;
 302                 bottom: 0;
 303                 right: 0;
 304         }
 305 }
 306
 307 /* using `dl` + `.inlineDataList` to prevent styles applied to the
 308    data list provided by the `userInformation` template */
 309 .userProfilePreview dl.inlineDataList {
 310         margin-top: 10px;
 311
 312         @include wcfFontSmall;
 313 }
 314
 315 /* user notifications */
 316 .userNotificationItemList > .notificationItem {
 317         &.notificationUnconfirmed {
 318                 align-items: center;
 319                 display: flex;
 320
 321                 > .box32 {
 322                         flex: 1 1 auto;
 323                 }
 324
 325                 > .notificationItemMarkAsConfirmed {
 326                         flex: 0 0 auto;
 327                 }
 328         }
 329 }
 330
 331 .userProfilePreviewAvatar {
 332         align-self: flex-start;
 333         display: block;
 334         position: relative;
 335 }
 336
 337 .userProfilePreviewAvatar .badgeOnline,
 338 .userProfileUser .contentHeaderIcon .badgeOnline {
 339         left: 0;
 340         pointer-events: none;
 341         position: absolute;
 342
 343         @include screen-md-up {
 344                 bottom: 0;
 345         }
 346
 347         @include screen-sm-down {
 348                 color: transparent;
 349                 padding: 0;
 350                 top: 0;
 351                 width: 0;
 352
 353                 &::before {
 354                         background-color: inherit;
 355                         border: 1px solid rgba(255, 255, 255, 1);
 356                         border-radius: 50%;
 357                         content: "";
 358                         height: 16px;
 359                         left: 34px; /* 48px (avatar) - 16px (width) - 2px (border-left + border-right) */
 360                         position: absolute;
 361                         width: 16px;
 362                 }
 363         }
 364 }