You can not select more than 25 topics Topics must start with a chinese character,a letter or number, can include dashes ('-') and can be up to 35 characters long.

svg-icon.css 1.4 kB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051
  1. @charset "utf-8";
  2. :host { /*控制 shadow DOM 的根元素*/
  3. display: inline-block;
  4. width: 32px;
  5. height: 32px;
  6. }
  7. svg {
  8. width: 100%;
  9. height: 100%;
  10. }
  11. [type="awoken-count"] text{
  12. font-size: 20px;
  13. fill: yellow;
  14. font-family: var(--game-font-family);
  15. text-anchor: middle;
  16. /* 文本水平居中 */
  17. dominant-baseline: middle;
  18. /* 文本垂直居中 */
  19. }
  20. .back {
  21. fill: var(--back-color);
  22. }
  23. .front {
  24. fill: var(--front-color);
  25. }
  26. [type="awoken-count"] use {
  27. --back-color: white;
  28. --front-color: #096E11;
  29. }
  30. [type="awoken-count"] text {
  31. fill: yellow;
  32. stroke:black;
  33. filter: url(../images/icon-awoken-count.svg#text-shadow);
  34. }
  35. [type="awoken-count"][icon-type="latent"] use {
  36. --front-color: #378DE8;
  37. }
  38. [type="awoken-count"][icon-type="latent"][flags~="8-latent"] text {
  39. fill: #19F897;
  40. }
  41. [type="awoken-count"][flags~="can-assist"][flags~="full"]:not([icon-type="latent"]) use {
  42. --back-color: #FFFFD4;
  43. --front-color: url(../images/icon-awoken-count.svg#full-awoken-assist-front);
  44. }
  45. [type="awoken-count"][flags~="full"][flags~="can-assist"]:not([icon-type="latent"]) text,
  46. [type="awoken-count"][flags~="8-latent-full"][flags~="8-latent"][icon-type="latent"] text
  47. {
  48. stroke: none;
  49. fill: url(../images/icon-awoken-count.svg#full-awoken-star);
  50. filter: url(../images/icon-awoken-count.svg#out-shadow);
  51. }