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

   1 #trophyIconEditor .colorBoxValue {
   2         display: block;
   3         height: 24px;
   4         width: 24px;
   5 }
   6
   7 #trophyIconEditor .colorBox {
   8         background-color: rgb(255, 255, 255);
   9         border: 1px solid rgb(204, 204, 204);
  10         display: inline-block;
  11         padding: 1px;
  12         vertical-align: middle;
  13 }
  14
  15 #badgeContainer .icon {
  16         vertical-align: middle;
  17 }
  18
  19 .trophyIcon {
  20         display: inline-block;
  21         border-radius: 50%;
  22
  23         &.icon {
  24                 /* Factor: 0.5625 */
  25                 &.icon16 {
  26                         font-size: 9px;
  27                 }
  28
  29                 &.icon32 {
  30                         font-size: 18px;
  31                 }
  32
  33                 &.icon48 {
  34                         font-size: 27px;
  35                 }
  36
  37                 &.icon64 {
  38                         font-size: 36px;
  39                 }
  40
  41                 &.icon144 {
  42                         font-size: 81px;
  43                 }
  44         }
  45 }
  46
  47 .specialTrophyList {
  48         display: flex;
  49         flex-wrap: wrap;
  50
  51         > li {
  52                 width: 300px;
  53                 padding-bottom: 5px;
  54
  55                 > label {
  56                         display: flex;
  57                         align-items: center;
  58
  59                         .trophyIcon,
  60                         > span:last-child {
  61                                 margin-left: 5px;
  62                         }
  63
  64                         input,
  65                         .trophyIcon {
  66                                 flex-shrink: 0;
  67                         }
  68                 }
  69         }
  70 }
  71
  72 /* trophies in message sidebar */
  73 .specialTrophyContainer {
  74         margin-top: 10px;
  75
  76         > ul {
  77                 display: flex;
  78                 justify-content: center;
  79                 flex-wrap: wrap;
  80                 margin-bottom: -5px;
  81                 margin-right: -5px;
  82
  83                 > li {
  84                         margin-bottom: 5px;
  85                         margin-right: 5px;
  86                 }
  87         }
  88 }
  89
  90 @include screen-sm-down {
  91         .specialTrophyContainer {
  92                 display: none;
  93         }
  94 }
  95
  96 /* trophies in user profile header */
  97 .specialTrophyUserContainer > ul {
  98         align-items: center;
  99         display: flex;
 100         flex-wrap: wrap;
 101         margin-right: -5px;
 102         margin-top: -15px;
 103
 104         > li {
 105                 margin-bottom: 5px;
 106                 margin-right: 5px;
 107         }
 108 }
 109
 110 .userProfileUserWithCoverPhoto .specialTrophyUserContainer > ul {
 111         margin-top: 0;
 112 }
 113
 114 .userProfilePreview .specialTrophyUserContainer > ul {
 115         margin-top: 5px;
 116         margin-bottom: 5px;
 117 }