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         }
  65 }
  66
  67 .specialTrophyContainer {
  68         margin-top: 10px;
  69
  70         > ul {
  71                 display: flex;
  72                 justify-content: center;
  73
  74                 > li:not(:last-child) {
  75                         margin-right: 5px;
  76                 }
  77         }
  78 }
  79
  80 @include screen-sm-down {
  81         .specialTrophyContainer {
  82                 display: none;
  83         }
  84 }
  85
  86 .specialTrophyUserContainer > ul {
  87         display: flex;
  88         margin-top: -15px;
  89         margin-bottom: 5px;
  90
  91         > li:not(:last-child) {
  92                 margin-right: 5px;
  93         }
  94 }
  95
  96 .userProfileUserWithCoverPhoto .specialTrophyUserContainer > ul {
  97         margin-top: 0;
  98 }
  99
 100 .userProfilePreview .specialTrophyUserContainer > ul {
 101         margin-top: 5px;
 102         margin-bottom: 5px;
 103 }