livebook/assets/css/js_interop.css

/*
Conditional elements display.

Verious hooks and callbacks dynamically set attributes
based on which we hide/show certain elements.
This way we don't have to engage the server in
solely client-side operations.
*/

/* === Global === */

[phx-hook="Highlight"][data-highlighted] > [data-source] {
  @apply hidden;
}

[phx-hook="Dropzone"][data-js-dragging] {
  @apply bg-red-200 border-red-400;
}

/* === Session === */

[data-element="session"]:not([data-js-insert-mode])
  [data-element="insert-mode-indicator"] {
  @apply invisible;
}

[data-element="session"]:not([data-js-insert-mode])
  [data-element="cell"][data-type="markdown"]
  [data-element="editor-box"],
[data-element="session"][data-js-insert-mode]
  [data-element="cell"][data-type="markdown"]:not([data-js-focused])
  [data-element="editor-box"] {
  @apply hidden;
}

[data-element="session"][data-js-insert-mode]
  [data-element="cell"][data-type="markdown"][data-js-focused]
  [data-element="enable-insert-mode-button"] {
  @apply hidden;
}

[data-element="session"]:not([data-js-insert-mode])
  [data-element="cell"][data-type="markdown"][data-js-focused]
  [data-element="insert-image-button"] {
  @apply hidden;
}

[data-element="notebook-headline"]:hover [data-element="heading"],
[data-element="section-headline"]:hover [data-element="heading"] {
  @apply border-blue-200;
}

[data-element="notebook-headline"][data-js-focused] [data-element="heading"],
[data-element="section-headline"][data-js-focused] [data-element="heading"] {
  @apply border-blue-300;
}

[data-element="section-headline"]:not(:hover):not([data-js-focused])
  [data-element="heading"]
  + [data-element="section-actions"]:not(:focus-within) {
  @apply hidden;
}

[data-element="cell"][data-js-focused] {
  @apply border-blue-300 border-opacity-100;
}

[data-element="cell"]:not([data-js-focused])
  [data-element="actions"]:not(:focus-within) {
  /* Note: using opacity, so the buttons are focusable (via tab navigation)
      and when focused we show the actions back. */
  @apply opacity-0;
}

[data-element="cell"]:not([data-js-focused])
  [data-element="actions"]:not([data-primary]):not(:focus-within) {
  @apply pointer-events-none;
}

[data-element="cell"]:not([data-js-focused])[data-js-hover]
  [data-element="actions"][data-primary] {
  @apply opacity-100 pointer-events-auto;
}

[data-element="cell"] [data-element="cell-status"][data-js-changed] {
  @apply italic;
}

[data-element="cell"]
  [data-element="cell-status"]:not([data-js-changed])
  [data-element="change-indicator"] {
  @apply invisible;
}

[data-element="sections-list-item"][data-js-is-viewed] {
  @apply text-gray-900;
}

[data-element="cell"]:not([data-js-focused])[data-js-hover]
  [data-element="cell-focus-indicator"] {
  @apply bg-blue-200;
}

[data-element="cell"][data-js-focused] [data-element="cell-focus-indicator"] {
  @apply bg-blue-300;
}

[data-element="cell"][data-js-amplified] [data-element="outputs-container"] {
  @apply bg-white m-0 py-16;

  width: 90vw;
  position: relative;
  left: calc(-45vw + 50%);
}

[data-element="cell"][data-js-amplified]
  [data-element="amplify-outputs-button"]
  [data-element="zoom-in-icon"] {
  @apply hidden;
}

[data-element="cell"]:not([data-js-amplified])
  [data-element="amplify-outputs-button"]
  [data-element="zoom-out-icon"] {
  @apply hidden;
}

[data-element="cell"][data-type="smart"]:not([data-js-source-visible])
  [data-element="editor-box"] {
  /* Note: we intentionally don't hide the editor, because this leads
     to issues with hover intellisense once the editor is shown. */
  @apply h-0 overflow-hidden;
}

[data-element="cell"][data-type="smart"][data-js-source-visible]
  [data-element="ui-box"] {
  @apply hidden;
}

[data-element="cell"][data-type="smart"]:not([data-js-source-visible])
  [data-element="show-ui-icon"] {
  @apply hidden;
}

[data-element="cell"][data-type="smart"][data-js-source-visible]
  [data-element="show-code-icon"] {
  @apply hidden;
}

[data-element="cell"][data-type="smart"]:not([data-js-source-visible])
  [data-element="cell-status-container"] {
  @apply flex justify-end;
}

[data-element="cell"][data-type="smart"]:not([data-js-source-visible])
  [data-element="cell-status-container"]
  > *:first-child {
  @apply mt-2;
}

[data-element="cell"][data-type="smart"][data-js-source-visible]
  [data-element="cell-status-container"] {
  @apply absolute bottom-2 right-2;
}

[data-element="output"]:not([data-wrapper]) {
  @apply py-4;
}

[data-element="output"][data-border] {
  @apply px-4 border border-t-0 border-gray-200 divide-y divide-gray-200;
}

[data-element="output"][data-border]:first-child {
  @apply rounded-t-lg border-t;
}

[data-element="output"]:not([data-border])
  + [data-element="output"][data-border] {
  @apply border-t;
}

[data-element="output"][data-border]:last-child {
  @apply rounded-b-lg border-b;
}

[data-element="output"]:not(:first-child) {
  @apply mt-2;
}

[data-element="output"][data-border] + [data-element="output"][data-border] {
  @apply mt-0;
}

[data-element="outputs-container"] > [data-element="output"]:first-child {
  @apply mt-2;
}

[data-element="session"]:not([data-js-side-panel-content])
  [data-element="side-panel"] {
  @apply hidden;
}

[data-element="session"]:not([data-js-side-panel-content="sections-list"])
  [data-element="sections-list"] {
  @apply hidden;
}

[data-element="session"]:not([data-js-side-panel-content="clients-list"])
  [data-element="clients-list"] {
  @apply hidden;
}

[data-element="session"]:not([data-js-side-panel-content="runtime-info"])
  [data-element="runtime-info"] {
  @apply hidden;
}

[data-element="session"][data-js-side-panel-content="sections-list"]
  [data-element="sections-list-toggle"] {
  @apply text-gray-50 bg-gray-700;
}

[data-element="session"][data-js-side-panel-content="clients-list"]
  [data-element="clients-list-toggle"] {
  @apply text-gray-50 bg-gray-700;
}

[data-element="session"][data-js-side-panel-content="runtime-info"]
  [data-element="runtime-info-toggle"] {
  @apply text-gray-50 bg-gray-700;
}

[data-element="clients-list-item"]:not([data-js-followed])
  [data-meta="unfollow"] {
  @apply hidden;
}

[data-element="clients-list-item"][data-js-followed] [data-meta="follow"] {
  @apply hidden;
}

[phx-hook="VirtualizedLines"]:not(:hover) [data-element="clipcopy"] {
  @apply hidden;
}