menus.css 3.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143
  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-menubar-height: 28px;
  10. --jp-private-menu-item-height: 24px;
  11. }
  12. /*-----------------------------------------------------------------------------
  13. | MenuBar
  14. |----------------------------------------------------------------------------*/
  15. .lm-MenuBar {
  16. background: var(--jp-layout-color1);
  17. color: var(--jp-ui-font-color1);
  18. font-size: var(--jp-ui-font-size1);
  19. }
  20. .lm-MenuBar:hover {
  21. overflow-x: auto;
  22. }
  23. .lm-MenuBar-menu {
  24. transform: translateY(calc(-2 * var(--jp-border-width)));
  25. }
  26. .lm-MenuBar-item {
  27. padding: 0px 8px;
  28. border-left: var(--jp-border-width) solid transparent;
  29. border-right: var(--jp-border-width) solid transparent;
  30. border-top: var(--jp-border-width) solid transparent;
  31. line-height: calc(var(--jp-private-menubar-height) - var(--jp-border-width));
  32. }
  33. .lm-MenuBar-item.lm-mod-active {
  34. background: var(--jp-layout-color2);
  35. }
  36. .lm-MenuBar.lm-mod-active .lm-MenuBar-item.lm-mod-active {
  37. z-index: 10001;
  38. background: var(--jp-layout-color0);
  39. border-left: var(--jp-border-width) solid var(--jp-border-color1);
  40. border-right: var(--jp-border-width) solid var(--jp-border-color1);
  41. box-shadow: var(--jp-elevation-z6);
  42. }
  43. .jp-LabShell[data-shell-mode='single-document']
  44. .lm-MenuBar.lm-mod-active
  45. .lm-MenuBar-item.lm-mod-active {
  46. border-top: var(--jp-border-width) solid var(--jp-border-color1);
  47. }
  48. .lm-MenuBar-item.lm-mod-disabled {
  49. color: var(--jp-ui-font-color3);
  50. }
  51. .lm-MenuBar-item.lm-type-separator {
  52. margin: 2px;
  53. padding: 0;
  54. border: none;
  55. border-left: var(--jp-border-width) solid var(--jp-border-color2);
  56. }
  57. .lm-MenuBar-itemMnemonic {
  58. text-decoration: underline;
  59. }
  60. /*-----------------------------------------------------------------------------
  61. | Menu
  62. |----------------------------------------------------------------------------*/
  63. .lm-Menu {
  64. z-index: 10000;
  65. padding: 4px 0px;
  66. background: var(--jp-layout-color0);
  67. color: var(--jp-ui-font-color1);
  68. border: var(--jp-border-width) solid var(--jp-border-color1);
  69. font-size: var(--jp-ui-font-size1);
  70. box-shadow: var(--jp-elevation-z6);
  71. }
  72. .lm-Menu-item {
  73. min-height: var(--jp-private-menu-item-height);
  74. max-height: var(--jp-private-menu-item-height);
  75. padding: 0px;
  76. line-height: var(--jp-private-menu-item-height);
  77. }
  78. .lm-Menu-item.lm-mod-active {
  79. background: var(--jp-layout-color2);
  80. }
  81. .lm-Menu-item.lm-mod-disabled {
  82. color: var(--jp-ui-font-color3);
  83. }
  84. .lm-Menu-itemIcon {
  85. width: 21px;
  86. padding: 0px 2px 0px 4px;
  87. margin-top: -2px;
  88. }
  89. .lm-Menu-itemLabel {
  90. padding: 0px 32px 0px 2px;
  91. }
  92. .lm-Menu-itemMnemonic {
  93. text-decoration: underline;
  94. }
  95. .lm-Menu-itemShortcut {
  96. padding: 0px;
  97. }
  98. .lm-Menu-itemSubmenuIcon {
  99. width: 18px;
  100. padding: 0px 4px 0px 0px;
  101. }
  102. .lm-Menu-item[data-type='separator'] > div {
  103. padding: 0;
  104. height: 9px;
  105. }
  106. .lm-Menu-item[data-type='separator'] > div::after {
  107. content: '';
  108. display: block;
  109. position: relative;
  110. top: 4px;
  111. border-top: var(--jp-border-width) solid var(--jp-layout-color2);
  112. }
  113. /* gray out icon/caret for disable menu items */
  114. .lm-Menu-item.lm-mod-disabled > .lm-Menu-itemIcon,
  115. .lm-Menu-item[data-type='submenu'].lm-mod-disabled > .lm-Menu-itemSubmenuIcon {
  116. opacity: 0.4;
  117. }