panel.scss 3.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142
  1. .molstar-panel-header .molstar-panel-expander {
  2. display: block;
  3. width: 100%;
  4. text-align: left;
  5. }
  6. .molstar-panel-header {
  7. //border-bottom-width: 1px;
  8. //border-bottom-style: solid;
  9. height: $row-height;
  10. border-color: $border-color;
  11. position: relative;
  12. //border-radius: $control-spacing 0 0 0;
  13. .molstar-panel-expander-wrapper {
  14. position: absolute;
  15. top: 0;
  16. left: 0;
  17. right: 2 * $row-height;
  18. button {
  19. // width: 100%;
  20. display: block;
  21. width: 100%;
  22. text-align: left;
  23. height: $row-height;
  24. line-height: $row-height;
  25. border: none;
  26. font-weight: bold;
  27. //color: $panel-header-font-color;
  28. padding-left: 0;
  29. background: color-lower-contrast($default-background, 4%);
  30. //text-align: right!important;
  31. .molstar-icon {
  32. display: inline-block;
  33. margin-right: $control-spacing;
  34. width: $row-height;
  35. text-align: center;
  36. }
  37. &:hover {
  38. background: color-lower-contrast($default-background, 4%);
  39. }
  40. }
  41. }
  42. .molstar-panel-description-standalone {
  43. > .molstar-icon {
  44. margin-left: $row-height;
  45. }
  46. width: 2 * $row-height;
  47. }
  48. .molstar-panel-description-with-action {
  49. width: $row-height;
  50. margin-right: $row-height;
  51. }
  52. .molstar-panel-description {
  53. color: $font-color;
  54. float: right;
  55. background: color-lower-contrast($default-background, 4%);
  56. //margin-right: $row-height;
  57. > .molstar-icon {
  58. display: block;
  59. width: $row-height;
  60. height: $row-height;
  61. line-height: $row-height;
  62. text-align: center;
  63. font-size: 70%;
  64. cursor: default;
  65. background: color-lower-contrast($default-background, 4%);
  66. color: color-lower-contrast($font-color, 66%);
  67. }
  68. .molstar-panel-description-content {
  69. @include non-selectable;
  70. color: $font-color;
  71. display: none;
  72. position: absolute;
  73. left: 0;
  74. width: 100%;
  75. background: color-increase-contrast($molstar-form-control-background, 20%);
  76. min-height: $row-height;
  77. z-index: 1000000;
  78. padding: $info-vertical-padding $control-spacing $info-vertical-padding ($row-height + $control-spacing);
  79. text-align: left;
  80. //border-bottom: 1px solid color-lower-contrast($default-background, 4%);
  81. > .molstar-icon {
  82. position: absolute;
  83. width: $row-height;
  84. height: $row-height;
  85. line-height: $row-height;
  86. text-align: center;
  87. font-size: 80%;
  88. cursor: default;
  89. top: 0;
  90. left: 0;
  91. }
  92. }
  93. &:hover {
  94. color: $hover-font-color;
  95. > .molstar-icon {
  96. color: $hover-font-color;
  97. }
  98. .molstar-panel-description-content {
  99. display: block;
  100. }
  101. }
  102. }
  103. }
  104. .molstar-panel-body {
  105. background: $control-background;
  106. }
  107. .molstar-panel {
  108. margin-bottom: $control-spacing;
  109. }
  110. .molstar-transform-view {
  111. padding-top: $control-spacing;
  112. }
  113. .molstar-expandable-group-color-stripe {
  114. position: absolute;
  115. left: 0;
  116. top: $row-height - 2px;
  117. width: $control-label-width + $control-spacing;
  118. height: 2px;
  119. }