toolbar.css 1.8 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677
  1. /*-----------------------------------------------------------------------------
  2. | Copyright (c) 2014-2016, Jupyter Development Team.
  3. |
  4. | Distributed under the terms of the Modified BSD License.
  5. |----------------------------------------------------------------------------*/
  6. :root {
  7. --jp-private-toolbar-height: 24px;
  8. }
  9. .jp-Toolbar {
  10. color: var(--jp-ui-font-color1);
  11. flex: 0 0 auto;
  12. display: flex;
  13. flex-direction: row;
  14. border-bottom: var(--jp-border-width) solid var(--jp-border-color2);
  15. height: calc(var(--jp-private-toolbar-height) + var(--jp-border-width));
  16. }
  17. .jp-Toolbar > .jp-Toolbar-item {
  18. flex: 0 0 auto;
  19. padding-left: 8px;
  20. padding-right: 8px;
  21. font-size: var(--jp-ui-font-size1);
  22. line-height: var(--jp-private-toolbar-height);
  23. height: 100%;
  24. }
  25. .jp-Toolbar-item.jp-Toolbar-button {
  26. display: inline-block;
  27. width: 32px;
  28. background-color: white;
  29. background-repeat: no-repeat;
  30. background-position: center;
  31. background-size: 16px;
  32. }
  33. .jp-Toolbar-button.jp-mod-pressed {
  34. background-color: var(--jp-layout-color3);
  35. box-shadow: inset 0 0px 1px rgba(0, 0, 0, 0.5);
  36. }
  37. .jp-Toolbar-button:hover {
  38. background-color: var(--jp-layout-color2);
  39. box-shadow: inset 0 0px 1px rgba(0, 0, 0, 0.5);
  40. }
  41. .jp-Toolbar > .jp-Toolbar-item.jp-Toolbar-spacer {
  42. flex-grow: 1;
  43. flex-shrink: 1;
  44. }
  45. .jp-Toolbar > .jp-Toolbar-item.jp-Toolbar-kernelName {
  46. width: auto;
  47. text-transform: none; /* kernel names can benefit from visible case */
  48. letter-spacing: normal;
  49. text-align: left;
  50. font-size: var(--jp-ui-font-size1);
  51. line-height: calc( var(--jp-private-toolbar-height) + 1px );
  52. }
  53. .jp-Toolbar-item.jp-Toolbar-kernelStatus {
  54. display: inline-block;
  55. width: 32px;
  56. background-repeat: no-repeat;
  57. background-position: center;
  58. background-size: 16px;
  59. }