sidepanel.css 5.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232
  1. /*-----------------------------------------------------------------------------
  2. | Copyright (c) Jupyter Development Team.
  3. | Distributed under the terms of the Modified BSD License.
  4. |----------------------------------------------------------------------------*/
  5. /*-----------------------------------------------------------------------------
  6. | Variables
  7. |----------------------------------------------------------------------------*/
  8. :root {
  9. --jp-private-sidebar-tab-width: 32px;
  10. }
  11. /*-----------------------------------------------------------------------------
  12. | SideBar
  13. |----------------------------------------------------------------------------*/
  14. .jp-SideBar {
  15. /* This is needed so that all font sizing of children done in ems is
  16. * relative to this base size */
  17. font-size: var(--jp-ui-font-size1);
  18. }
  19. .jp-SideBar.lm-TabBar,
  20. #jp-down-stack .lm-TabBar {
  21. color: var(--jp-ui-font-color1);
  22. background: var(--jp-layout-color2);
  23. font-size: var(--jp-ui-font-size1);
  24. overflow: visible;
  25. }
  26. .jp-SideBar.lm-TabBar {
  27. min-width: calc(var(--jp-private-sidebar-tab-width) + var(--jp-border-width));
  28. max-width: calc(var(--jp-private-sidebar-tab-width) + var(--jp-border-width));
  29. display: block;
  30. }
  31. .jp-SideBar .lm-TabBar-content {
  32. margin: 0;
  33. padding: 0;
  34. display: flex;
  35. align-items: stretch;
  36. list-style-type: none;
  37. height: var(--jp-private-sidebar-tab-width);
  38. transform-origin: 0 0 0;
  39. }
  40. .jp-SideBar .lm-TabBar-tab {
  41. padding: 0 16px;
  42. border: none;
  43. overflow: visible;
  44. }
  45. .jp-SideBar .lm-TabBar-tab.lm-mod-current {
  46. min-height: calc(
  47. var(--jp-private-sidebar-tab-width) + var(--jp-border-width)
  48. );
  49. max-height: calc(
  50. var(--jp-private-sidebar-tab-width) + var(--jp-border-width)
  51. );
  52. /* transform: translateY(var(--jp-border-width)); */
  53. }
  54. .jp-SideBar .lm-TabBar-tab:not(.lm-mod-current),
  55. #jp-down-stack .lm-TabBar-tab:not(.lm-mod-current) {
  56. background: var(--jp-layout-color2);
  57. }
  58. .jp-SideBar .lm-TabBar-tabIcon.jp-SideBar-tabIcon {
  59. min-width: 20px;
  60. min-height: 20px;
  61. background-size: 20px;
  62. display: inline-block;
  63. vertical-align: middle;
  64. background-repeat: no-repeat;
  65. background-position: center;
  66. }
  67. .jp-SideBar .lm-TabBar-tabLabel {
  68. line-height: var(--jp-private-sidebar-tab-width);
  69. }
  70. .jp-SideBar .lm-TabBar-tab:hover:not(.lm-mod-current),
  71. #jp-down-stack .lm-TabBar-tab:hover:not(.lm-mod-current) {
  72. background: var(--jp-layout-color1);
  73. }
  74. /* Left */
  75. /* Borders */
  76. .jp-SideBar.lm-TabBar.jp-mod-left {
  77. border-right: var(--jp-border-width) solid var(--jp-border-color0);
  78. }
  79. .jp-SideBar.lm-TabBar.jp-mod-left .lm-TabBar-tab + .lm-TabBar-tab {
  80. border-right: var(--jp-border-width) solid var(--jp-layout-color2);
  81. }
  82. .jp-SideBar.lm-TabBar.jp-mod-left
  83. .lm-TabBar-tab.lm-mod-current
  84. + .lm-TabBar-tab {
  85. border-right: var(--jp-border-width) solid var(--jp-border-color0);
  86. }
  87. .jp-SideBar.lm-TabBar.jp-mod-left
  88. .lm-TabBar-tab
  89. + .lm-TabBar-tab.lm-mod-current {
  90. border-right: var(--jp-border-width) solid var(--jp-border-color0);
  91. }
  92. .jp-SideBar.lm-TabBar.jp-mod-left .lm-TabBar-tab.lm-mod-current:last-child {
  93. border-left: var(--jp-border-width) solid var(--jp-border-color0);
  94. }
  95. /* Transforms */
  96. .jp-SideBar.lm-TabBar.jp-mod-left .lm-TabBar-content {
  97. flex-direction: row-reverse;
  98. transform: rotate(-90deg) translateX(-100%);
  99. }
  100. .jp-SideBar.lm-TabBar.jp-mod-left
  101. .lm-TabBar-tab:not(.lm-mod-current)
  102. .lm-TabBar-tabIcon {
  103. transform: rotate(90deg);
  104. }
  105. .jp-SideBar.lm-TabBar.jp-mod-left
  106. .lm-TabBar-tab.lm-mod-current
  107. .lm-TabBar-tabIcon {
  108. transform: rotate(90deg)
  109. translate(
  110. calc(-0.5 * var(--jp-border-width)),
  111. calc(-0.5 * var(--jp-border-width))
  112. );
  113. }
  114. /* Right */
  115. /* Borders */
  116. .jp-SideBar.lm-TabBar.jp-mod-right {
  117. border-left: var(--jp-border-width) solid var(--jp-border-color0);
  118. }
  119. .jp-SideBar.lm-TabBar.jp-mod-right .lm-TabBar-tab + .lm-TabBar-tab {
  120. border-left: var(--jp-border-width) solid var(--jp-layout-color2);
  121. }
  122. .jp-SideBar.lm-TabBar.jp-mod-right
  123. .lm-TabBar-tab.lm-mod-current
  124. + .lm-TabBar-tab {
  125. border-left: var(--jp-border-width) solid var(--jp-border-color0);
  126. }
  127. .jp-SideBar.lm-TabBar.jp-mod-right
  128. .lm-TabBar-tab
  129. + .lm-TabBar-tab.lm-mod-current {
  130. border-left: var(--jp-border-width) solid var(--jp-border-color0);
  131. }
  132. .jp-SideBar.lm-TabBar.jp-mod-right .lm-TabBar-tab.lm-mod-current:last-child {
  133. border-right: var(--jp-border-width) solid var(--jp-border-color0);
  134. }
  135. /* Transforms */
  136. .jp-SideBar.lm-TabBar.jp-mod-right .lm-TabBar-content {
  137. flex-direction: row;
  138. transform: rotate(90deg) translateY(-100%);
  139. }
  140. .jp-SideBar.lm-TabBar.jp-mod-right
  141. .lm-TabBar-tab:not(.lm-mod-current)
  142. .lm-TabBar-tabIcon {
  143. transform: rotate(-90deg);
  144. }
  145. .jp-SideBar.lm-TabBar.jp-mod-right
  146. .lm-TabBar-tab.lm-mod-current
  147. .lm-TabBar-tabIcon {
  148. transform: rotate(-90deg)
  149. translate(
  150. calc(0.5 * var(--jp-border-width)),
  151. calc(-0.5 * var(--jp-border-width))
  152. );
  153. }
  154. /* Down */
  155. /* Borders */
  156. #jp-down-stack > .lm-TabBar {
  157. border-top: var(--jp-border-width) solid var(--jp-border-color0);
  158. border-bottom: var(--jp-border-width) solid var(--jp-border-color0);
  159. }
  160. #jp-down-stack > .lm-TabBar .lm-TabBar-tab {
  161. border-left: none;
  162. border-right: none;
  163. }
  164. #jp-down-stack > .lm-TabBar .lm-TabBar-tab.lm-mod-current {
  165. border: var(--jp-border-width) solid var(--jp-border-color1);
  166. border-bottom: none;
  167. transform: translateY(var(--jp-border-width));
  168. }
  169. #jp-down-stack > .lm-TabBar .lm-TabBar-tab.lm-mod-current:first-child {
  170. border: none;
  171. border-right: var(--jp-border-width) solid var(--jp-border-color1);
  172. }
  173. /* Stack panels */
  174. #jp-left-stack > .lm-Widget,
  175. #jp-right-stack > .lm-Widget {
  176. min-width: var(--jp-sidebar-min-width);
  177. }
  178. #jp-right-stack {
  179. border-left: var(--jp-border-width) solid var(--jp-border-color1);
  180. }
  181. #jp-left-stack {
  182. border-right: var(--jp-border-width) solid var(--jp-border-color1);
  183. }
  184. #jp-down-stack > .lm-TabPanel-stackedPanel {
  185. border: none;
  186. }