gift.scss 4.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202
  1. // deep 主色
  2. // light 浅色
  3. /* 流光金 */
  4. $streamer-gold-deep: #dfa245;
  5. $streamer-gold-light: #f0c482;
  6. /* 浪漫粉 */
  7. $romantic-powder-deep: #ff547b;
  8. $romantic-powder-light: #ff96ae;
  9. /* 品味红 */
  10. $taste-red-deep: #ff4544;
  11. $taste-red-light: #ff8888;
  12. /* 优雅紫 */
  13. $elegant-purple-deep: #7783ea;
  14. $elegant-purple-light: #a1aaf6;
  15. /* 清醒绿 */
  16. $fresh-green-deep: #63be72;
  17. $fresh-green-light: #89db96;
  18. /* 商务蓝 */
  19. $business-blue-deep: #4a90e2;
  20. $business-blue-light: #82b4ef;
  21. // 主题色
  22. /* 流光金 */
  23. .streamer-gold-gift-color {
  24. color: $streamer-gold-deep;
  25. }
  26. .streamer-gold-gift-background {
  27. background-color: $streamer-gold-deep;
  28. }
  29. .streamer-gold-gift-background-q {
  30. background: rgba(223, 162, 69, 0.8);
  31. }
  32. .streamer-gold-gift-background-p {
  33. background: rgba(223, 162, 69, 0.2);
  34. }
  35. .streamer-gold-gift-background-o {
  36. background: rgba(223, 162, 69, 0.1);
  37. }
  38. .streamer-gold-gift-border {
  39. border-color: $streamer-gold-deep;
  40. }
  41. .streamer-gold-gift-figure-rule {
  42. background: linear-gradient(to bottom, $streamer-gold-deep, $streamer-gold-light);
  43. }
  44. .streamer-gold-gift-border-bottom {
  45. border-bottom-color: $streamer-gold-deep;
  46. }
  47. .streamer-gold-gift-shadow {
  48. box-shadow: #{0 10upx 30upx 2.5upx} rgba(223,162,69, 0.2);
  49. }
  50. /* 浪漫粉 */
  51. .romantic-powder-gift-color {
  52. color: $romantic-powder-deep;
  53. }
  54. .romantic-powder-gift-background {
  55. background-color: $romantic-powder-deep;
  56. }
  57. .romantic-powder-gift-background-q {
  58. background: rgba(255, 84, 123, 0.8);
  59. }
  60. .romantic-powder-gift-background-p {
  61. background: rgba(255, 84, 123, 0.2);
  62. }
  63. .romantic-powder-gift-background-o {
  64. background: rgba(255, 84, 123, 0.1);
  65. }
  66. .romantic-powder-gift-border {
  67. border-color: $romantic-powder-deep;
  68. }
  69. .romantic-powder-gift-figure-rule {
  70. background: linear-gradient(to bottom, $romantic-powder-deep, $romantic-powder-light);
  71. }
  72. .romantic-powder-gift-border-bottom {
  73. border-bottom-color: $romantic-powder-deep;
  74. }
  75. .romantic-powder-gift-shadow {
  76. box-shadow: #{0 10upx 30upx 2.5upx} rgba(255,84,23, 0.2);
  77. }
  78. /* 品味红 */
  79. .taste-red-gift-color {
  80. color: $taste-red-deep;
  81. }
  82. .taste-red-gift-background {
  83. background-color: $taste-red-deep;
  84. }
  85. .taste-red-gift-background-q {
  86. background: rgba(255, 69, 68, 0.8);
  87. }
  88. .taste-red-gift-background-p {
  89. background: rgba(255, 69, 68, 0.2);
  90. }
  91. .taste-red-gift-background-0 {
  92. background: rgba(255, 69, 68, 0.1);
  93. }
  94. .taste-red-gift-border {
  95. border-color: $taste-red-deep;
  96. }
  97. .taste-red-gift-figure-rule {
  98. background: linear-gradient(to bottom, $taste-red-deep, $taste-red-light);
  99. }
  100. .taste-red-gift-border-bottom {
  101. border-bottom-color: $taste-red-deep;
  102. }
  103. .taste-red-gift-shadow {
  104. box-shadow: #{0 10upx 30upx 2.5upx} rgba(255,69,68, 0.2);
  105. }
  106. /* 优雅紫 */
  107. .elegant-purple-gift-color {
  108. color: $elegant-purple-deep;
  109. }
  110. .elegant-purple-gift-background {
  111. background-color: $elegant-purple-deep;
  112. }
  113. .elegant-purple-gift-background-q {
  114. background: rgba(119, 131, 234, 0.8);
  115. }
  116. .elegant-purple-gift-background-p {
  117. background: rgba(119, 131, 234, 0.2);
  118. }
  119. .elegant-purple-gift-background-o {
  120. background: rgba(119, 131, 234, 0.1);
  121. }
  122. .elegant-purple-gift-border {
  123. border-color: $elegant-purple-deep;
  124. }
  125. .elegant-purple-gift-figure-rule {
  126. background: linear-gradient(to bottom, $elegant-purple-deep, $elegant-purple-light);
  127. }
  128. .elegant-purple-gift-border-bottom {
  129. border-bottom-color: $elegant-purple-deep;
  130. }
  131. .elegant-purple-gift-shadow {
  132. box-shadow: #{0 10upx 30upx 2.5upx} rgba(119,131,234, 0.2);
  133. }
  134. /* 清醒绿 */
  135. .fresh-green-gift-color {
  136. color: $fresh-green-deep;
  137. }
  138. .fresh-green-gift-background {
  139. background-color: $fresh-green-deep;
  140. }
  141. .fresh-green-gift-background-q {
  142. background: rgba(99, 190, 114, 0.8);
  143. }
  144. .fresh-green-gift-background-p {
  145. background: rgba(99, 190, 114, 0.2);
  146. }
  147. .fresh-green-gift-background-o {
  148. background: rgba(99, 190, 114, 0.1);
  149. }
  150. .fresh-green-gift-border {
  151. border-color: $fresh-green-deep;
  152. }
  153. .fresh-green-gift-figure-rule {
  154. background: linear-gradient(to bottom, $fresh-green-deep, $fresh-green-light);
  155. }
  156. .fresh-green-gift-border-bottom {
  157. border-bottom-color: $fresh-green-deep;
  158. }
  159. .fresh-green-gift-shadow {
  160. box-shadow: #{0 10upx 30upx 2.5upx} rgba(99,190,114, 0.2);
  161. }
  162. /* 商务蓝 */
  163. .business-blue-gift-color {
  164. color: $business-blue-deep;
  165. }
  166. .business-blue-gift-background {
  167. background-color: $business-blue-deep;
  168. }
  169. .business-blue-gift-background-q {
  170. background: rgba(74, 144, 226, 0.8);
  171. }
  172. .business-blue-gift-background-p {
  173. background: rgba(74, 144, 226, 0.2);
  174. }
  175. .business-blue-gift-background-o {
  176. background: rgba(74, 144, 226, 0.1);
  177. }
  178. .business-blue-gift-border {
  179. border-color: $business-blue-deep;
  180. }
  181. .business-blue-gift-figure-rule {
  182. background: linear-gradient(to bottom, $business-blue-deep, $business-blue-light);
  183. }
  184. .business-blue-gift-border-bottom {
  185. border-bottom-color: $business-blue-deep;
  186. }
  187. .business-blue-gift-shadow {
  188. box-shadow: #{0 10upx 30upx 2.5upx} rgba(74,144,226, 0.2);
  189. }