debug.css 1.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293
  1. html {
  2. font-family: 'Sans Serif';
  3. font-size: 20px;
  4. width: 8000px;
  5. }
  6. .key {
  7. height: 50px;
  8. width: 60px;
  9. display: block;
  10. text-align: center;
  11. vertical-align: middle;
  12. left: 50%;
  13. margin-left: -30px;
  14. position: absolute;
  15. border-radius: 20px;
  16. line-height:46px;
  17. }
  18. .lines {
  19. height: 15px;
  20. width: 50%;
  21. display: block;
  22. border: 2px solid black;
  23. border-bottom: none;
  24. left: 25%;
  25. position: absolute;
  26. top: 64px;
  27. }
  28. .lines::before{
  29. content: " ";
  30. height: 15px;
  31. width: 10px;
  32. display: block;
  33. border-left: 2px solid black;
  34. left: 50%;
  35. position: absolute;
  36. top: -17px;
  37. }
  38. .key:after {
  39. float: left;
  40. clear: both;
  41. }
  42. .node {
  43. position: relative;
  44. min-width: 60px;
  45. /* width: 100%; */
  46. float: left;
  47. clear: both;
  48. padding-left: 5px;
  49. padding-right: 5px;
  50. }
  51. .black > .key {
  52. background-color: black;
  53. color: silver;
  54. }
  55. .red > .key{
  56. background-color: maroon;
  57. color: silver;
  58. }
  59. .dummy > .key{
  60. border: 1px solid silver;
  61. }
  62. .dummy .dummy > .key{
  63. border: none;
  64. }
  65. .dummy > .lines, .dummy > .lines::before {
  66. border: none;
  67. }
  68. .barren .key{
  69. border: none;
  70. }
  71. .barren > .lines, .barren > .lines::before {
  72. border: none;
  73. }
  74. .child {
  75. float: left;
  76. margin-top: 80px;
  77. }
  78. hr {
  79. margin: 30px;
  80. clear: both;
  81. }