config.css 2.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145
  1. BODY {
  2. --feed_ratio: 2.5;
  3. --display_bar_height: 20px;
  4. --border-color: #ccc;
  5. padding-bottom: var(--display_bar_height);
  6. }
  7. H1 {
  8. background-color:blue;
  9. color:white;
  10. height:calc(108px * (var(--feed_ratio) - 1));
  11. margin-top:0;
  12. padding:5px;
  13. margin-bottom:108px;
  14. width:calc(100% - (192px * var(--feed_ratio)));
  15. }
  16. .ii_block {
  17. border:3px solid var(--border-color);
  18. margin-bottom:5px;
  19. padding:2px;
  20. border-radius:3px;
  21. }
  22. .ii_block_name {
  23. background-color:var(--border-color);
  24. text-align:center;
  25. font-weight:bold;
  26. color:#fff;
  27. margin:-2px;
  28. margin-bottom:3px;
  29. }
  30. .ii_info {
  31. color:#333;
  32. }
  33. .ii {
  34. width:100%;
  35. position:relative;
  36. display:flex;
  37. }
  38. .ii_key_DIV {
  39. flex:0 0 40vw;
  40. font-weight:bold;
  41. }
  42. .ii_value_DIV {
  43. flex: 0 0 40vw;
  44. text-align:right;
  45. }
  46. .ii_value {
  47. width:75%;
  48. }
  49. .feed {
  50. position:absolute;
  51. top:10px;
  52. right:0px;
  53. width:calc(192px * var(--feed_ratio));
  54. height:calc(108px * var(--feed_ratio));
  55. z-index:10;
  56. }
  57. .ii_explain {
  58. height:25px;
  59. overflow:hidden;
  60. width:25px;
  61. position:relative;
  62. }
  63. .ii_explain:hover {
  64. height: auto;
  65. position: absolute;
  66. left: 10%;
  67. width: 80%;
  68. border-radius: 3px;
  69. padding: 5px;
  70. background-color: #ccc;
  71. z-index: 10;
  72. border: 3px solid blue;
  73. font-family: monospace;
  74. white-space:pre-wrap;
  75. }
  76. .ii_explain:hover PRE {
  77. white-space:pre-wrap;
  78. }
  79. .ii_explain:hover:after {
  80. content:"";
  81. border:none;
  82. margin:0;
  83. padding:0;
  84. width:0;
  85. height:0;
  86. }
  87. .ii_explain:after {
  88. color:white;
  89. content:"?";
  90. text-align:center;
  91. background-color:blue;
  92. border:2px solid #ccc;
  93. border-radius:3px;
  94. padding-left:2px;
  95. padding-right:2px;
  96. position:absolute;
  97. left:0;
  98. top:0;
  99. width:100%;
  100. height:100%;
  101. }
  102. .revert_DIV {
  103. display:flex;
  104. width:100%;
  105. }
  106. .revert_DIV DIV:nth-child(1) {
  107. width:30px;
  108. }
  109. .current_revert {
  110. background-color:#edf054;
  111. }
  112. #display_BAR {
  113. position:fixed;
  114. bottom:0;
  115. background-color:blue;
  116. border-top:1px solid lightblue;
  117. color:#fff;
  118. display:flex;
  119. width:100%;
  120. height:var(--display_bar_height);
  121. }
  122. #display_BAR DIV {
  123. padding-right:15px;
  124. }
  125. .ver_DIV {
  126. padding-left:60px;
  127. min-width:120px;
  128. font-family:monospace;
  129. flex: 1 0 120px;
  130. }
  131. .ver_DIV:before {
  132. content:attr(vertype);
  133. font-weight:bold;
  134. padding-right:10px;
  135. }
  136. .ver_DIV[vertype="wz_mini"] {
  137. flex:1 0 400px;
  138. }
  139. .fail_val {
  140. background-color:#fcc;
  141. }