scrollbar.css 5.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205
  1. /*-----------------------------------------------------------------------------
  2. | Copyright (c) Jupyter Development Team.
  3. | Distributed under the terms of the Modified BSD License.
  4. |----------------------------------------------------------------------------*/
  5. /*
  6. * Mozilla scrollbar styling
  7. */
  8. /* use standard opaque scrollbars for most nodes */
  9. [data-jp-theme-scrollbars='true'] {
  10. scrollbar-color: rgb(var(--jp-scrollbar-thumb-color))
  11. var(--jp-scrollbar-background-color);
  12. }
  13. /* for code nodes, use a transparent style of scrollbar. These selectors
  14. * will match lower in the tree, and so will override the above */
  15. [data-jp-theme-scrollbars='true'] .CodeMirror-hscrollbar,
  16. [data-jp-theme-scrollbars='true'] .CodeMirror-vscrollbar {
  17. scrollbar-color: rgba(var(--jp-scrollbar-thumb-color), 0.5) transparent;
  18. }
  19. /* tiny scrollbar */
  20. .jp-scrollbar-tiny {
  21. scrollbar-color: rgba(var(--jp-scrollbar-thumb-color), 0.5) transparent;
  22. scrollbar-width: thin;
  23. }
  24. /*
  25. * Webkit scrollbar styling
  26. */
  27. /* use standard opaque scrollbars for most nodes */
  28. [data-jp-theme-scrollbars='true'] ::-webkit-scrollbar,
  29. [data-jp-theme-scrollbars='true'] ::-webkit-scrollbar-corner {
  30. background: var(--jp-scrollbar-background-color);
  31. }
  32. [data-jp-theme-scrollbars='true'] ::-webkit-scrollbar-thumb {
  33. background: rgb(var(--jp-scrollbar-thumb-color));
  34. border: var(--jp-scrollbar-thumb-margin) solid transparent;
  35. background-clip: content-box;
  36. border-radius: var(--jp-scrollbar-thumb-radius);
  37. }
  38. [data-jp-theme-scrollbars='true'] ::-webkit-scrollbar-track:horizontal {
  39. border-left: var(--jp-scrollbar-endpad) solid
  40. var(--jp-scrollbar-background-color);
  41. border-right: var(--jp-scrollbar-endpad) solid
  42. var(--jp-scrollbar-background-color);
  43. }
  44. [data-jp-theme-scrollbars='true'] ::-webkit-scrollbar-track:vertical {
  45. border-top: var(--jp-scrollbar-endpad) solid
  46. var(--jp-scrollbar-background-color);
  47. border-bottom: var(--jp-scrollbar-endpad) solid
  48. var(--jp-scrollbar-background-color);
  49. }
  50. /* for code nodes, use a transparent style of scrollbar */
  51. [data-jp-theme-scrollbars='true'] .CodeMirror-hscrollbar::-webkit-scrollbar,
  52. [data-jp-theme-scrollbars='true'] .CodeMirror-vscrollbar::-webkit-scrollbar,
  53. [data-jp-theme-scrollbars='true']
  54. .CodeMirror-hscrollbar::-webkit-scrollbar-corner,
  55. [data-jp-theme-scrollbars='true']
  56. .CodeMirror-vscrollbar::-webkit-scrollbar-corner {
  57. background-color: transparent;
  58. }
  59. [data-jp-theme-scrollbars='true']
  60. .CodeMirror-hscrollbar::-webkit-scrollbar-thumb,
  61. [data-jp-theme-scrollbars='true']
  62. .CodeMirror-vscrollbar::-webkit-scrollbar-thumb {
  63. background: rgba(var(--jp-scrollbar-thumb-color), 0.5);
  64. border: var(--jp-scrollbar-thumb-margin) solid transparent;
  65. background-clip: content-box;
  66. border-radius: var(--jp-scrollbar-thumb-radius);
  67. }
  68. [data-jp-theme-scrollbars='true']
  69. .CodeMirror-hscrollbar::-webkit-scrollbar-track:horizontal {
  70. border-left: var(--jp-scrollbar-endpad) solid transparent;
  71. border-right: var(--jp-scrollbar-endpad) solid transparent;
  72. }
  73. [data-jp-theme-scrollbars='true']
  74. .CodeMirror-vscrollbar::-webkit-scrollbar-track:vertical {
  75. border-top: var(--jp-scrollbar-endpad) solid transparent;
  76. border-bottom: var(--jp-scrollbar-endpad) solid transparent;
  77. }
  78. /* tiny scrollbar */
  79. .jp-scrollbar-tiny::-webkit-scrollbar,
  80. .jp-scrollbar-tiny::-webkit-scrollbar-corner {
  81. background-color: transparent;
  82. height: 4px;
  83. width: 4px;
  84. }
  85. .jp-scrollbar-tiny::-webkit-scrollbar-thumb {
  86. background: rgba(var(--jp-scrollbar-thumb-color), 0.5);
  87. }
  88. .jp-scrollbar-tiny::-webkit-scrollbar-track:horizontal {
  89. border-left: 0px solid transparent;
  90. border-right: 0px solid transparent;
  91. }
  92. .jp-scrollbar-tiny::-webkit-scrollbar-track:vertical {
  93. border-top: 0px solid transparent;
  94. border-bottom: 0px solid transparent;
  95. }
  96. /*
  97. * Phosphor
  98. */
  99. .lm-ScrollBar[data-orientation='horizontal'] {
  100. min-height: 16px;
  101. max-height: 16px;
  102. min-width: 45px;
  103. border-top: 1px solid #a0a0a0;
  104. }
  105. .lm-ScrollBar[data-orientation='vertical'] {
  106. min-width: 16px;
  107. max-width: 16px;
  108. min-height: 45px;
  109. border-left: 1px solid #a0a0a0;
  110. }
  111. .lm-ScrollBar-button {
  112. background-color: #f0f0f0;
  113. background-position: center center;
  114. min-height: 15px;
  115. max-height: 15px;
  116. min-width: 15px;
  117. max-width: 15px;
  118. }
  119. .lm-ScrollBar-button:hover {
  120. background-color: #dadada;
  121. }
  122. .lm-ScrollBar-button.lm-mod-active {
  123. background-color: #cdcdcd;
  124. }
  125. .lm-ScrollBar-track {
  126. background: #f0f0f0;
  127. }
  128. .lm-ScrollBar-thumb {
  129. background: #cdcdcd;
  130. }
  131. .lm-ScrollBar-thumb:hover {
  132. background: #bababa;
  133. }
  134. .lm-ScrollBar-thumb.lm-mod-active {
  135. background: #a0a0a0;
  136. }
  137. .lm-ScrollBar[data-orientation='horizontal'] .lm-ScrollBar-thumb {
  138. height: 100%;
  139. min-width: 15px;
  140. border-left: 1px solid #a0a0a0;
  141. border-right: 1px solid #a0a0a0;
  142. }
  143. .lm-ScrollBar[data-orientation='vertical'] .lm-ScrollBar-thumb {
  144. width: 100%;
  145. min-height: 15px;
  146. border-top: 1px solid #a0a0a0;
  147. border-bottom: 1px solid #a0a0a0;
  148. }
  149. .lm-ScrollBar[data-orientation='horizontal']
  150. .lm-ScrollBar-button[data-action='decrement'] {
  151. background-image: var(--jp-icon-caret-left);
  152. background-size: 17px;
  153. }
  154. .lm-ScrollBar[data-orientation='horizontal']
  155. .lm-ScrollBar-button[data-action='increment'] {
  156. background-image: var(--jp-icon-caret-right);
  157. background-size: 17px;
  158. }
  159. .lm-ScrollBar[data-orientation='vertical']
  160. .lm-ScrollBar-button[data-action='decrement'] {
  161. background-image: var(--jp-icon-caret-up);
  162. background-size: 17px;
  163. }
  164. .lm-ScrollBar[data-orientation='vertical']
  165. .lm-ScrollBar-button[data-action='increment'] {
  166. background-image: var(--jp-icon-caret-down);
  167. background-size: 17px;
  168. }