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

   1 #colorPickerGradient {
   2         background-color: #f00;
   3         background-image: url('../images/colorPickerGradient.png');
   4         background-repeat: no-repeat;
   5         border: 1px solid rgba(0, 0, 0, 1);
   6         cursor: default;
   7         display: inline-block;
   8         height: 256px;
   9         overflow: hidden;
  10         position: relative;
  11         width: 256px;
  12
  13         > span {
  14                 border: 1px solid rgba(0, 0, 0, 1);
  15                 border-radius: 10px;
  16                 display: block;
  17                 height: 10px;
  18                 left: -4px;
  19                 position: absolute;
  20                 top: -4px;
  21                 width: 10px;
  22
  23                 > span {
  24                         border: 1px solid rgba(255, 255, 255, 1);
  25                         border-radius: 10px;
  26                         display: block;
  27                         height: 8px;
  28                         width: 8px;
  29                 }
  30         }
  31 }
  32
  33 #colorPickerBar {
  34         background-image: url('../images/colorPickerBar.png');
  35         background-repeat: repeat-x;
  36         border: 1px solid rgba(0, 0, 0, 1);
  37         cursor: default;
  38         display: inline-block;
  39         height: 256px;
  40         margin-left: 10px;
  41         position: relative;
  42         width: 16px;
  43
  44         > span {
  45                 display: inline-block;
  46                 height: 1px;
  47                 left: 0;
  48                 position: absolute;
  49                 top: 27px;
  50                 width: 16px;
  51
  52                 &::after,
  53                 &::before {
  54                         content: "";
  55                         display: block;
  56                         height: 0;
  57                         position: absolute;
  58                         top: 0;
  59                         width: 0;
  60                 }
  61
  62                 &::after {
  63                         border-bottom: 5px solid transparent;
  64                         border-right: 5px solid rgba(0, 0, 0, 1);
  65                         border-top: 5px solid transparent;
  66                         right: -7px;
  67                         top: -5px;
  68                 }
  69
  70                 &::before {
  71                         border-bottom: 5px solid transparent;
  72                         border-left: 5px solid rgba(0, 0, 0, 1);
  73                         border-top: 5px solid transparent;
  74                         left: -7px;
  75                         top: -5px;
  76                 }
  77         }
  78 }
  79
  80 #colorPickerForm {
  81         display: inline-block;
  82         margin-left: 20px;
  83         position: relative;
  84         text-align: center;
  85         width: 100px;
  86
  87         > .colors {
  88                 margin-left: 2px;
  89
  90                 > .new,
  91                 > .old {
  92                         background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAABlBMVEX////MzMw46qqDAAAAD0lEQVQI12P4z4Ad4ZAAAH6/D/Hgw85/AAAAAElFTkSuQmCC);
  93                         border: 1px solid rgba(0, 0, 0, 1);
  94                         box-sizing: content-box;
  95                         display: block;
  96                         height: 24px;
  97
  98                         > span {
  99                                 display: block;
 100                                 height: 24px;
 101                         }
 102                 }
 103
 104                 > .old {
 105                         background-position: 8px 0;
 106                         border-top-width: 0;
 107                 }
 108         }
 109
 110         > .hex {
 111                 margin-top: 20px;
 112         }
 113
 114         > .rgba {
 115                 margin-top: 20px;
 116
 117                 > li.a {
 118                         margin-top: 10px;
 119                 }
 120
 121                 > li.g,
 122                 > li.b {
 123                         margin-top: 2px;
 124                 }
 125         }
 126
 127         > .rgba > li,
 128         > .hex > li {
 129                 text-align: right;
 130
 131                 input {
 132                         margin-left: 5px;
 133                         width: 80px;
 134                 }
 135         }
 136 }
 137
 138 .colorPreview {
 139         background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAABlBMVEX////MzMw46qqDAAAAD0lEQVQI12P4z4Ad4ZAAAH6/D/Hgw85/AAAAAElFTkSuQmCC);
 140         border: 1px solid $wcfContentBorderInner;
 141         display: inline-block;
 142
 143         > div {
 144                 border: 2px solid $wcfContentBackground;
 145                 cursor: pointer;
 146                 display: block;
 147                 height: 60px;
 148                 width: 180px;
 149         }
 150 }