Skip to content

Commit

Permalink
extract notebook insert toolbar, status bar and title toolbar css.
Browse files Browse the repository at this point in the history
  • Loading branch information
rebornix committed Mar 7, 2022
1 parent 261118c commit a7c574d
Show file tree
Hide file tree
Showing 5 changed files with 221 additions and 216 deletions.
216 changes: 0 additions & 216 deletions src/vs/workbench/contrib/notebook/browser/media/notebook.css
Original file line number Diff line number Diff line change
Expand Up @@ -363,108 +363,6 @@
cursor: pointer;
}

.monaco-workbench .notebookOverlay > .cell-list-container > .monaco-list > .monaco-scrollable-element > .monaco-list-rows > .monaco-list-row .cell-title-toolbar {
opacity: 0;
display: inline-flex;
position: absolute;
height: 26px;
top: -14px;
/* this lines up the bottom toolbar border with the current line when on line 01 */
z-index: var(--z-index-notebook-cell-toolbar);
}

.monaco-workbench .notebookOverlay > .cell-list-container > .monaco-list > .monaco-scrollable-element > .monaco-list-rows > .monaco-list-row .cell-toolbar-dropdown-active .cell-title-toolbar {
z-index: var(--z-index-notebook-cell-toolbar-dropdown-active);
}

.monaco-workbench .notebookOverlay > .cell-list-container > .monaco-list > .monaco-scrollable-element > .monaco-list-rows > .monaco-list-row .cell-title-toolbar .action-item.menu-entry {
width: 24px;
height: 24px;
display: flex;
align-items: center;
margin: 1px 2px;
}

.monaco-workbench .notebookOverlay > .cell-list-container > .monaco-list > .monaco-scrollable-element > .monaco-list-rows > .monaco-list-row .cell-title-toolbar .action-item .action-label {
display: flex;
align-items: center;
margin: auto;
}

.monaco-workbench .notebookOverlay > .cell-list-container > .monaco-list > .monaco-scrollable-element > .monaco-list-rows > .monaco-list-row .cell-title-toolbar .action-item .monaco-dropdown {
width: 100%;
}

.monaco-workbench .notebookOverlay > .cell-list-container > .monaco-list > .monaco-scrollable-element > .monaco-list-rows > .monaco-list-row .cell-title-toolbar .action-item .monaco-dropdown .dropdown-label {
display: flex;
}

.monaco-workbench .notebookOverlay .cell-statusbar-container {
height: 22px;
font-size: 12px;
display: flex;
position: relative;
overflow: hidden;
}

.monaco-workbench .notebookOverlay .cell-statusbar-hidden .cell-statusbar-container {
display: none;
}

.monaco-workbench .notebookOverlay .cell-statusbar-container .cell-status-left {
display: flex;
flex-grow: 1;
}

.monaco-workbench .notebookOverlay .cell-statusbar-container .cell-status-left,
.monaco-workbench .notebookOverlay .cell-statusbar-container .cell-status-right {
display: flex;
z-index: var(--z-index-notebook-cell-status);
}

.monaco-workbench .notebookOverlay .cell-statusbar-container .cell-status-right .cell-contributed-items {
justify-content: flex-end;
}

.monaco-workbench .notebookOverlay .cell-statusbar-container .cell-contributed-items {
display: flex;
flex-wrap: wrap;
overflow: hidden;
}

.monaco-workbench .notebookOverlay .cell-statusbar-container .cell-status-item {
display: flex;
align-items: center;
white-space: pre;

height: 21px; /* Editor outline is -1px in, don't overlap */
margin: 0px 3px;
padding: 0px 3px;
overflow: hidden;
text-overflow: clip;
}

.monaco-workbench .notebookOverlay .cell-statusbar-container .cell-status-item.cell-status-item-has-command {
cursor: pointer;
}

.monaco-workbench .notebookOverlay .cell-statusbar-container .cell-status-left > .cell-contributed-items {
margin-left: 10px;
}

.monaco-workbench .notebookOverlay .cell-statusbar-container .codicon {
font-size: 14px;
color: unset; /* Inherit from parent cell-status-item */
}

.monaco-workbench .notebookOverlay .cell-statusbar-container .cell-status-item-show-when-active {
display: none;
}

.monaco-workbench .notebookOverlay .cell-statusbar-container.is-active-cell .cell-status-item-show-when-active {
display: initial;
}

.monaco-workbench .notebookOverlay > .cell-list-container > .monaco-list > .monaco-scrollable-element > .monaco-list-rows > .monaco-list-row .run-button-container {
position: absolute;
flex-shrink: 0;
Expand Down Expand Up @@ -526,26 +424,6 @@
height: 2px;
}

/* toolbar visible on hover */
.monaco-workbench .notebookOverlay.cell-toolbar-hover > .cell-list-container > .monaco-list:focus-within > .monaco-scrollable-element > .monaco-list-rows:not(:hover) > .monaco-list-row.focused .cell-has-toolbar-actions .cell-title-toolbar,
.monaco-workbench .notebookOverlay.cell-toolbar-hover > .cell-list-container > .monaco-list > .monaco-scrollable-element > .monaco-list-rows > .monaco-list-row:hover .cell-has-toolbar-actions .cell-title-toolbar,
.monaco-workbench .notebookOverlay.cell-toolbar-hover > .cell-list-container > .monaco-list > .monaco-scrollable-element > .monaco-list-rows > .monaco-list-row .markdown-cell-hover.cell-has-toolbar-actions .cell-title-toolbar,
.monaco-workbench .notebookOverlay.cell-toolbar-hover > .cell-list-container > .monaco-list > .monaco-scrollable-element > .monaco-list-rows > .monaco-list-row .cell-has-toolbar-actions.cell-output-hover .cell-title-toolbar,
.monaco-workbench .notebookOverlay.cell-toolbar-hover > .cell-list-container > .monaco-list > .monaco-scrollable-element > .monaco-list-rows > .monaco-list-row .cell-has-toolbar-actions:hover .cell-title-toolbar,
.monaco-workbench .notebookOverlay.cell-toolbar-hover > .cell-list-container > .monaco-list > .monaco-scrollable-element > .monaco-list-rows > .monaco-list-row .cell-title-toolbar:hover,
.monaco-workbench .notebookOverlay.cell-toolbar-hover > .cell-list-container > .monaco-list > .monaco-scrollable-element > .monaco-list-rows > .monaco-list-row .cell-toolbar-dropdown-active .cell-title-toolbar {
opacity: 1;
}

/* toolbar visible on click */
.monaco-workbench .notebookOverlay.cell-toolbar-click > .cell-list-container > .monaco-list > .monaco-scrollable-element > .monaco-list-rows > .monaco-list-row .cell-title-toolbar {
visibility: hidden;
}
.monaco-workbench .notebookOverlay.cell-toolbar-click > .cell-list-container > .monaco-list > .monaco-scrollable-element > .monaco-list-rows > .monaco-list-row.focused .cell-title-toolbar {
opacity: 1;
visibility: visible;
}

.monaco-workbench .notebookOverlay > .cell-list-container > .monaco-list:not(.element-focused):focus:before {
outline: none !important;
}
Expand Down Expand Up @@ -585,100 +463,6 @@
opacity: 0.5 !important;
}

.monaco-workbench .notebookOverlay .cell-list-top-cell-toolbar-container {
padding-top: 1px !important;
}

.monaco-workbench .notebookOverlay .cell-list-top-cell-toolbar-container.emptyNotebook {
opacity: 1 !important;
}

.monaco-workbench .notebookOverlay .cell-list-top-cell-toolbar-container,
.monaco-workbench .notebookOverlay > .cell-list-container > .monaco-list > .monaco-scrollable-element > .monaco-list-rows > .monaco-list-row .cell-bottom-toolbar-container {
position: absolute;
display: flex;
justify-content: center;
z-index: var(--z-index-notebook-cell-bottom-toolbar-container);
width: calc(100% - 32px);
opacity: 0;
transition: opacity 0.3s ease-in-out;
padding: 0;
margin: 0 16px 0 16px;
}

.monaco-workbench .notebookOverlay > .cell-list-container > .monaco-list > .monaco-scrollable-element > .monaco-list-rows > .monaco-list-row .cell-bottom-toolbar-container {
top: 0px;
height: 33px;
}

.monaco-workbench .notebookOverlay > .cell-list-container > .monaco-list > .monaco-scrollable-element > .monaco-list-rows > .monaco-list-row.cell-drag-image .cell-bottom-toolbar-container {
display: none;
}

/* .monaco-workbench .notebookOverlay .cell-list-top-cell-toolbar-container:focus-within,
.monaco-workbench .notebookOverlay .cell-list-top-cell-toolbar-container:hover,
.monaco-workbench .notebookOverlay > .cell-list-container > .monaco-list > .monaco-scrollable-element > .monaco-list-rows > .monaco-list-row:hover .cell-bottom-toolbar-container,
.monaco-workbench .notebookOverlay > .cell-list-container > .monaco-list > .monaco-scrollable-element > .monaco-list-rows > .monaco-list-row .markdown-cell-hover .cell-bottom-toolbar-container,
.monaco-workbench .notebookOverlay > .cell-list-container > .monaco-list:focus-within > .monaco-scrollable-element > .monaco-list-rows:not(:hover) > .monaco-list-row.focused .cell-bottom-toolbar-container,
.monaco-workbench .notebookOverlay.notebook-editor-editable > .cell-list-container > .monaco-list > .monaco-scrollable-element > .monaco-list-rows > .monaco-list-row .cell-bottom-toolbar-container:focus-within {
opacity: 1;
} */

.monaco-workbench .notebookOverlay .cell-list-top-cell-toolbar-container:focus-within,
.monaco-workbench .notebookOverlay .cell-list-top-cell-toolbar-container:hover,
.monaco-workbench .notebookOverlay.notebook-editor-editable > .cell-list-container > .monaco-list > .monaco-scrollable-element > .monaco-list-rows > .monaco-list-row .cell-bottom-toolbar-container:hover,
.monaco-workbench .notebookOverlay.notebook-editor-editable > .cell-list-container > .monaco-list > .monaco-scrollable-element > .monaco-list-rows > .monaco-list-row .cell-bottom-toolbar-container:focus-within {
opacity: 1;
}

.monaco-workbench .notebookOverlay .cell-list-top-cell-toolbar-container .monaco-toolbar {
margin-top: 3px; /* This is the minimum to keep the top edge from being cut off at the top of the editor */
}

.monaco-workbench .notebookOverlay .cell-list-top-cell-toolbar-container .monaco-toolbar .action-item,
.monaco-workbench .notebookOverlay > .cell-list-container > .monaco-list > .monaco-scrollable-element > .monaco-list-rows > .monaco-list-row .cell-bottom-toolbar-container .monaco-toolbar .action-item {
display: flex;
}

.monaco-workbench .notebookOverlay .cell-list-top-cell-toolbar-container .monaco-toolbar .action-item.active,
.monaco-workbench .notebookOverlay > .cell-list-container > .monaco-list > .monaco-scrollable-element > .monaco-list-rows > .monaco-list-row .cell-bottom-toolbar-container .monaco-toolbar .action-item.active {
transform: none;
}

.monaco-workbench .notebookOverlay .cell-list-top-cell-toolbar-container .monaco-toolbar .action-label,
.monaco-workbench .notebookOverlay > .cell-list-container > .monaco-list > .monaco-scrollable-element > .monaco-list-rows > .monaco-list-row .cell-bottom-toolbar-container .monaco-toolbar .action-label {
font-size: 12px;
margin: 0px;
display: inline-flex;
padding: 0px 4px;
border-radius: 0;
align-items: center;
}

.monaco-workbench .notebookOverlay .cell-list-top-cell-toolbar-container .monaco-toolbar .action-label .codicon,
.monaco-workbench .notebookOverlay > .cell-list-container > .monaco-list > .monaco-scrollable-element > .monaco-list-rows > .monaco-list-row .cell-bottom-toolbar-container .monaco-toolbar .action-label .codicon {
margin-right: 3px;
}

.monaco-workbench .notebookOverlay .cell-list-top-cell-toolbar-container .monaco-action-bar,
.monaco-workbench .notebookOverlay > .cell-list-container > .monaco-list > .monaco-scrollable-element > .monaco-list-rows > .monaco-list-row .cell-bottom-toolbar-container .monaco-action-bar {
display: flex;
align-items: center;
}

.monaco-workbench .notebookOverlay .cell-list-top-cell-toolbar-container .action-item:first-child,
.monaco-workbench .notebookOverlay > .cell-list-container > .monaco-list > .monaco-scrollable-element > .monaco-list-rows > .monaco-list-row .cell-bottom-toolbar-container .action-item:first-child {
margin-right: 16px;
}

.monaco-workbench .notebookOverlay .cell-list-top-cell-toolbar-container span.codicon,
.monaco-workbench .notebookOverlay > .cell-list-container > .monaco-list > .monaco-scrollable-element > .monaco-list-rows > .monaco-list-row .cell-bottom-toolbar-container span.codicon {
text-align: center;
font-size: 14px;
}

/* markdown */

.monaco-workbench .notebookOverlay > .cell-list-container .notebook-folding-indicator {
height: 20px;
width: 20px;
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,87 @@
/*---------------------------------------------------------------------------------------------
* Copyright (c) Microsoft Corporation. All rights reserved.
* Licensed under the MIT License. See License.txt in the project root for license information.
*--------------------------------------------------------------------------------------------*/

.monaco-workbench .notebookOverlay .cell-list-top-cell-toolbar-container {
padding-top: 1px !important;
}

.monaco-workbench .notebookOverlay .cell-list-top-cell-toolbar-container.emptyNotebook {
opacity: 1 !important;
}

.monaco-workbench .notebookOverlay .cell-list-top-cell-toolbar-container,
.monaco-workbench .notebookOverlay > .cell-list-container > .monaco-list > .monaco-scrollable-element > .monaco-list-rows > .monaco-list-row .cell-bottom-toolbar-container {
position: absolute;
display: flex;
justify-content: center;
z-index: var(--z-index-notebook-cell-bottom-toolbar-container);
width: calc(100% - 32px);
opacity: 0;
transition: opacity 0.3s ease-in-out;
padding: 0;
margin: 0 16px 0 16px;
}

.monaco-workbench .notebookOverlay > .cell-list-container > .monaco-list > .monaco-scrollable-element > .monaco-list-rows > .monaco-list-row .cell-bottom-toolbar-container {
top: 0px;
height: 33px;
}

.monaco-workbench .notebookOverlay > .cell-list-container > .monaco-list > .monaco-scrollable-element > .monaco-list-rows > .monaco-list-row.cell-drag-image .cell-bottom-toolbar-container {
display: none;
}

.monaco-workbench .notebookOverlay .cell-list-top-cell-toolbar-container:focus-within,
.monaco-workbench .notebookOverlay .cell-list-top-cell-toolbar-container:hover,
.monaco-workbench .notebookOverlay.notebook-editor-editable > .cell-list-container > .monaco-list > .monaco-scrollable-element > .monaco-list-rows > .monaco-list-row .cell-bottom-toolbar-container:hover,
.monaco-workbench .notebookOverlay.notebook-editor-editable > .cell-list-container > .monaco-list > .monaco-scrollable-element > .monaco-list-rows > .monaco-list-row .cell-bottom-toolbar-container:focus-within {
opacity: 1;
}

.monaco-workbench .notebookOverlay .cell-list-top-cell-toolbar-container .monaco-toolbar {
margin-top: 3px; /* This is the minimum to keep the top edge from being cut off at the top of the editor */
}

.monaco-workbench .notebookOverlay .cell-list-top-cell-toolbar-container .monaco-toolbar .action-item,
.monaco-workbench .notebookOverlay > .cell-list-container > .monaco-list > .monaco-scrollable-element > .monaco-list-rows > .monaco-list-row .cell-bottom-toolbar-container .monaco-toolbar .action-item {
display: flex;
}

.monaco-workbench .notebookOverlay .cell-list-top-cell-toolbar-container .monaco-toolbar .action-item.active,
.monaco-workbench .notebookOverlay > .cell-list-container > .monaco-list > .monaco-scrollable-element > .monaco-list-rows > .monaco-list-row .cell-bottom-toolbar-container .monaco-toolbar .action-item.active {
transform: none;
}

.monaco-workbench .notebookOverlay .cell-list-top-cell-toolbar-container .monaco-toolbar .action-label,
.monaco-workbench .notebookOverlay > .cell-list-container > .monaco-list > .monaco-scrollable-element > .monaco-list-rows > .monaco-list-row .cell-bottom-toolbar-container .monaco-toolbar .action-label {
font-size: 12px;
margin: 0px;
display: inline-flex;
padding: 0px 4px;
border-radius: 0;
align-items: center;
}

.monaco-workbench .notebookOverlay .cell-list-top-cell-toolbar-container .monaco-toolbar .action-label .codicon,
.monaco-workbench .notebookOverlay > .cell-list-container > .monaco-list > .monaco-scrollable-element > .monaco-list-rows > .monaco-list-row .cell-bottom-toolbar-container .monaco-toolbar .action-label .codicon {
margin-right: 3px;
}

.monaco-workbench .notebookOverlay .cell-list-top-cell-toolbar-container .monaco-action-bar,
.monaco-workbench .notebookOverlay > .cell-list-container > .monaco-list > .monaco-scrollable-element > .monaco-list-rows > .monaco-list-row .cell-bottom-toolbar-container .monaco-action-bar {
display: flex;
align-items: center;
}

.monaco-workbench .notebookOverlay .cell-list-top-cell-toolbar-container .action-item:first-child,
.monaco-workbench .notebookOverlay > .cell-list-container > .monaco-list > .monaco-scrollable-element > .monaco-list-rows > .monaco-list-row .cell-bottom-toolbar-container .action-item:first-child {
margin-right: 16px;
}

.monaco-workbench .notebookOverlay .cell-list-top-cell-toolbar-container span.codicon,
.monaco-workbench .notebookOverlay > .cell-list-container > .monaco-list > .monaco-scrollable-element > .monaco-list-rows > .monaco-list-row .cell-bottom-toolbar-container span.codicon {
text-align: center;
font-size: 14px;
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,70 @@
/*---------------------------------------------------------------------------------------------
* Copyright (c) Microsoft Corporation. All rights reserved.
* Licensed under the MIT License. See License.txt in the project root for license information.
*--------------------------------------------------------------------------------------------*/

.monaco-workbench .notebookOverlay .cell-statusbar-container {
height: 22px;
font-size: 12px;
display: flex;
position: relative;
overflow: hidden;
}

.monaco-workbench .notebookOverlay .cell-statusbar-hidden .cell-statusbar-container {
display: none;
}

.monaco-workbench .notebookOverlay .cell-statusbar-container .cell-status-left {
display: flex;
flex-grow: 1;
}

.monaco-workbench .notebookOverlay .cell-statusbar-container .cell-status-left,
.monaco-workbench .notebookOverlay .cell-statusbar-container .cell-status-right {
display: flex;
z-index: var(--z-index-notebook-cell-status);
}

.monaco-workbench .notebookOverlay .cell-statusbar-container .cell-status-right .cell-contributed-items {
justify-content: flex-end;
}

.monaco-workbench .notebookOverlay .cell-statusbar-container .cell-contributed-items {
display: flex;
flex-wrap: wrap;
overflow: hidden;
}

.monaco-workbench .notebookOverlay .cell-statusbar-container .cell-status-item {
display: flex;
align-items: center;
white-space: pre;

height: 21px; /* Editor outline is -1px in, don't overlap */
margin: 0px 3px;
padding: 0px 3px;
overflow: hidden;
text-overflow: clip;
}

.monaco-workbench .notebookOverlay .cell-statusbar-container .cell-status-item.cell-status-item-has-command {
cursor: pointer;
}

.monaco-workbench .notebookOverlay .cell-statusbar-container .cell-status-left > .cell-contributed-items {
margin-left: 10px;
}

.monaco-workbench .notebookOverlay .cell-statusbar-container .codicon {
font-size: 14px;
color: unset; /* Inherit from parent cell-status-item */
}

.monaco-workbench .notebookOverlay .cell-statusbar-container .cell-status-item-show-when-active {
display: none;
}

.monaco-workbench .notebookOverlay .cell-statusbar-container.is-active-cell .cell-status-item-show-when-active {
display: initial;
}
Loading

0 comments on commit a7c574d

Please sign in to comment.