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         align-self: flex-start;
  21         display: inline-block;
  22         border-radius: 50%;
  23
  24         fa-icon {
  25                 transform: scale(0.5625);
  26                 width: var(--icon-size);
  27
  28                 /*
  29                         We need to override the positioning by the .box classes here
  30                         to prevent the icon from being moved too far to the left.
  31                 */
  32                 position: static !important;
  33         }
  34 }
  35
  36 .specialTrophyList {
  37         display: flex;
  38         flex-wrap: wrap;
  39
  40         > li {
  41                 width: 300px;
  42                 padding-bottom: 5px;
  43
  44                 > label {
  45                         display: flex;
  46                         align-items: center;
  47
  48                         .trophyIcon,
  49                         > span:last-child {
  50                                 margin-left: 5px;
  51                         }
  52
  53                         input,
  54                         .trophyIcon {
  55                                 flex-shrink: 0;
  56                         }
  57                 }
  58         }
  59 }
  60
  61 /* trophies in message sidebar */
  62 .specialTrophyContainer {
  63         margin-top: 10px;
  64
  65         > ul {
  66                 display: flex;
  67                 justify-content: center;
  68                 flex-wrap: wrap;
  69                 margin-bottom: -5px;
  70                 margin-right: -5px;
  71
  72                 > li {
  73                         margin-bottom: 5px;
  74                         margin-right: 5px;
  75                 }
  76         }
  77 }
  78
  79 @include screen-sm-down {
  80         .specialTrophyContainer {
  81                 display: none;
  82         }
  83 }
  84
  85 /* trophies in user profile header */
  86 .specialTrophyUserContainer > ul {
  87         align-items: center;
  88         display: flex;
  89         flex-wrap: wrap;
  90         margin-right: -5px;
  91         margin-top: -15px;
  92
  93         > li {
  94                 margin-bottom: 5px;
  95                 margin-right: 5px;
  96         }
  97 }
  98
  99 .userProfileUserWithCoverPhoto .specialTrophyUserContainer > ul {
 100         margin-top: 0;
 101 }
 102
 103 .sortableNodeLabel > .trophyIcon {
 104         margin-right: 5px;
 105 }