index.less 2.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156
  1. @import '../../style/themes/index';
  2. @import '../../style/mixins/index';
  3. @hash-code-prefix-cls: ~'@{ant-prefix}-hash-code';
  4. .@{hash-code-prefix-cls} {
  5. display: flex;
  6. flex-direction: column;
  7. align-items: center;
  8. justify-content: center;
  9. box-sizing: border-box;
  10. margin: 0;
  11. padding: 0;
  12. color: @text-color;
  13. font-size: @font-size-base;
  14. line-height: @line-height-base;
  15. list-style: none;
  16. cursor: pointer;
  17. }
  18. .@{hash-code-prefix-cls}-header-copy {
  19. margin-left: @margin-xs;
  20. cursor: pointer;
  21. opacity: 0.45;
  22. }
  23. .@{hash-code-prefix-cls}-header {
  24. display: flex;
  25. justify-content: left;
  26. width: 100%;
  27. height: 22px;
  28. padding-bottom: @padding-xs;
  29. .@{hash-code-prefix-cls}-header-title {
  30. font-size: @font-size-base;
  31. line-height: @line-height-base;
  32. text-align: center;
  33. opacity: 0.45;
  34. }
  35. .@{hash-code-prefix-cls}-header-logo {
  36. display: flex;
  37. flex: 1;
  38. justify-content: right;
  39. }
  40. }
  41. .@{hash-code-prefix-cls}-double {
  42. width: 172px;
  43. &.ant-hash-code-primary {
  44. width: 220px;
  45. }
  46. }
  47. .@{hash-code-prefix-cls}-single {
  48. display: flex;
  49. flex-direction: row-reverse;
  50. width: 236px;
  51. &.ant-hash-code-primary {
  52. width: 284px;
  53. }
  54. .@{hash-code-prefix-cls}-header-copy {
  55. margin-top: @margin-xs;
  56. }
  57. }
  58. .@{hash-code-prefix-cls}-strip {
  59. width: 350px;
  60. &.ant-hash-code-primary {
  61. width: 398px;
  62. }
  63. }
  64. .@{hash-code-prefix-cls}-rect {
  65. display: flex;
  66. flex-direction: row-reverse;
  67. width: 196px;
  68. &.ant-hash-code-primary {
  69. width: 244px;
  70. }
  71. }
  72. .@{hash-code-prefix-cls}-primary {
  73. padding: @padding-lg;
  74. background-color: @primary-color;
  75. border-radius: 24px;
  76. .@{hash-code-prefix-cls}-header-copy {
  77. opacity: 1;
  78. }
  79. .@{hash-code-prefix-cls}-header-title,
  80. .@{hash-code-prefix-cls}-header-copy,
  81. .@{hash-code-prefix-cls}-header-logo {
  82. color: @text-color-dark;
  83. }
  84. }
  85. .@{hash-code-prefix-cls}-contant {
  86. width: 100%;
  87. height: 100%;
  88. }
  89. .@{hash-code-prefix-cls}-code-value {
  90. display: flex;
  91. flex-wrap: wrap;
  92. gap: 0 10px;
  93. justify-content: space-between;
  94. height: 35px;
  95. overflow: hidden;
  96. }
  97. .@{hash-code-prefix-cls}-code-value-block {
  98. height: 16px;
  99. font-size: @font-size-base;
  100. font-family: Menlo, Monaco, Consolas, 'Courier New', monospace;
  101. }
  102. .@{hash-code-prefix-cls}-value-primary {
  103. .ant-hash-code-code-value-block {
  104. color: @text-color-inverse;
  105. }
  106. }
  107. .@{hash-code-prefix-cls}-texaure-double {
  108. width: 175px;
  109. height: 36px;
  110. }
  111. .@{hash-code-prefix-cls}-texaure {
  112. position: absolute;
  113. margin-top: -35px;
  114. overflow: hidden;
  115. }
  116. .@{hash-code-prefix-cls}-texaure-single {
  117. width: 210px;
  118. height: 28px;
  119. margin-top: -21px;
  120. }
  121. .@{hash-code-prefix-cls}-texaure-strip {
  122. width: 350px;
  123. height: 36px;
  124. }
  125. .@{hash-code-prefix-cls}-texaure-rect {
  126. width: 175px;
  127. height: 72px;
  128. margin-top: -71px;
  129. }