base.css 3.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117
  1. /*-----------------------------------------------------------------------------
  2. | Copyright (c) Jupyter Development Team.
  3. | Distributed under the terms of the Modified BSD License.
  4. |----------------------------------------------------------------------------*/
  5. .jp-ConsolePanel {
  6. display: flex;
  7. flex: 1 1 auto;
  8. flex-direction: column;
  9. margin-top: -1px;
  10. min-width: 240px;
  11. min-height: 120px;
  12. }
  13. .jp-ConsolePanel::before {
  14. content: '';
  15. display: block;
  16. height: var(--jp-toolbar-micro-height);
  17. background: var(--jp-toolbar-background);
  18. border-bottom: 1px solid var(--jp-toolbar-border-color);
  19. box-shadow: var(--jp-toolbar-box-shadow);
  20. z-index: 1;
  21. }
  22. .jp-CodeConsole {
  23. height: 100%;
  24. padding: 0;
  25. display: flex;
  26. flex-direction: column;
  27. }
  28. .jp-CodeConsole .jp-Cell {
  29. padding: var(--jp-cell-padding);
  30. }
  31. /*-----------------------------------------------------------------------------
  32. | Content (already run cells)
  33. |----------------------------------------------------------------------------*/
  34. .jp-CodeConsole-content {
  35. background: var(--jp-layout-color0);
  36. flex: 1 1 auto;
  37. overflow: auto;
  38. padding: var(--jp-console-padding);
  39. }
  40. .jp-CodeConsole-content .jp-Cell:not(.jp-mod-active) .jp-InputPrompt {
  41. opacity: var(--jp-cell-prompt-not-active-opacity);
  42. color: var(--jp-cell-inprompt-font-color);
  43. cursor: move;
  44. }
  45. .jp-CodeConsole-content .jp-Cell:not(.jp-mod-active) .jp-OutputPrompt {
  46. opacity: var(--jp-cell-prompt-not-active-opacity);
  47. color: var(--jp-cell-outprompt-font-color);
  48. }
  49. /* This rule is for styling cell run by another activity in this console */
  50. .jp-CodeConsole-content .jp-Cell.jp-CodeConsole-foreignCell {
  51. }
  52. .jp-CodeConsole-content .jp-InputArea-editor.jp-InputArea-editor {
  53. background: transparent;
  54. border: 1px solid transparent;
  55. }
  56. .jp-CodeConsole-content .jp-CodeConsole-banner .jp-InputPrompt {
  57. display: none;
  58. }
  59. /* collapser is hovered */
  60. .jp-CodeConsole-content .jp-Cell .jp-Collapser:hover {
  61. box-shadow: var(--jp-elevation-z2);
  62. background: var(--jp-brand-color1);
  63. opacity: var(--jp-cell-collapser-not-active-hover-opacity);
  64. }
  65. /*-----------------------------------------------------------------------------
  66. | Input/prompt cell
  67. |----------------------------------------------------------------------------*/
  68. .jp-CodeConsole-input {
  69. max-height: 80%;
  70. flex: 0 0 auto;
  71. overflow: auto;
  72. border-top: var(--jp-border-width) solid var(--jp-toolbar-border-color);
  73. padding: var(--jp-cell-padding) var(--jp-console-padding);
  74. /* This matches the box shadow on the notebook toolbar, eventually we should create
  75. * CSS variables for this */
  76. box-shadow: 0px 0.4px 6px 0px rgba(0, 0, 0, 0.1);
  77. background: var(--jp-layout-color1);
  78. }
  79. .jp-CodeConsole-input .jp-CodeConsole-prompt .jp-InputArea {
  80. height: 100%;
  81. min-height: 100%;
  82. }
  83. .jp-CodeConsole-promptCell .jp-InputArea-editor.jp-mod-focused {
  84. border: var(--jp-border-width) solid var(--jp-cell-editor-active-border-color);
  85. box-shadow: var(--jp-input-box-shadow);
  86. background-color: var(--jp-cell-editor-active-background);
  87. }
  88. /*-----------------------------------------------------------------------------
  89. | Presentation Mode (.jp-mod-presentationMode)
  90. |----------------------------------------------------------------------------*/
  91. .jp-mod-presentationMode .jp-CodeConsole {
  92. --jp-content-font-size1: var(--jp-content-presentation-font-size1);
  93. --jp-code-font-size: var(--jp-code-presentation-font-size);
  94. }
  95. .jp-mod-presentationMode .jp-CodeConsole .jp-Cell .jp-InputPrompt,
  96. .jp-mod-presentationMode .jp-CodeConsole .jp-Cell .jp-OutputPrompt {
  97. flex: 0 0 110px;
  98. }