gecko-dev/devtools/client/themes/webconsole.css

/* This Source Code Form is subject to the terms of the Mozilla Public
 * License, v. 2.0. If a copy of the MPL was not distributed with this
 * file, You can obtain one at http://mozilla.org/MPL/2.0/. */

/* Webconsole specific theme variables */
.theme-light {
  --error-color: #FF0000;
  --error-background-color: #FFEBEB;
  --warning-background-color: #FFFFC8;
}

/* General output styles */

a {
  -moz-user-focus: normal;
  cursor: pointer;
  text-decoration: underline;
}

/* Workaround for Bug 575675 - FindChildWithRules aRelevantLinkVisited
 * assertion when loading HTML page with links in XUL iframe */
*:visited { }

* {
  box-sizing: border-box;
}

.message {
  display: flex;
  padding: 0 7px;
  width: 100%;
  box-sizing: border-box;
}

.message > .prefix,
.message > .timestamp {
  flex: none;
  color: var(--theme-comment);
  margin: 3px 6px 0 0;
}

.message > .indent {
  flex: none;
}

.message > .icon {
  flex: none;
  margin: 3px 6px 0 0;
  padding: 0 4px;
  height: 1em;
  align-self: flex-start;
}

.theme-light .message.error {
  color: var(--error-color);
  background-color: var(--error-background-color);
}

.theme-light .message.warn {
  background-color: var(--warning-background-color);
}

.message > .icon::before {
  content: "";
  background-image: url(chrome://devtools/skin/images/webconsole.svg);
  background-position: 12px 12px;
  background-repeat: no-repeat;
  background-size: 72px 60px;
  width: 12px;
  height: 12px;
  display: inline-block;
}

.theme-light .message > .icon::before {
  background-image: url(chrome://devtools/skin/images/webconsole.svg#light-icons);
}

.message > .message-body-wrapper {
  flex: auto;
  min-width: 0px;
  margin: 3px;
}

.message-body-wrapper .table-widget-body {
  overflow: visible;
}

/* The red bubble that shows the number of times a message is repeated */
.message-repeats {
  -moz-user-select: none;
  flex: none;
  margin: 2px 6px;
  padding: 0 6px;
  height: 1.25em;
  color: white;
  background-color: red;
  border-radius: 40px;
  font: message-box;
  font-size: 0.9em;
  font-weight: 600;
}

.message-repeats[value="1"] {
  display: none;
}

.message-location {
  max-width: 40vw;
  grid-column: -1 / -2;
  color: var(--frame-link-source);
}

.stack-trace {
  /* The markup contains extra whitespace to improve formatting of clipboard text.
     Make sure this whitespace doesn't affect the HTML rendering */
  white-space: normal;
}

.message-location,
.stack-trace .frame-link-source {
  /* Makes the file name truncated (and ellipsis shown) on the left side */
  direction: rtl;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: end;
}

.stack-trace .frame-link-source-inner,
.message-location .frame-link-source-inner {
  /* Enforce LTR direction for the file name - fixes bug 1290056 */
  direction: ltr;
  unicode-bidi: embed;
}

.stack-trace .frame-link-function-display-name {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.message-flex-body {
  display: grid;
  grid-template-columns: 1fr auto max-content;
  grid-gap: 5px;
}

.message-body {
  white-space: pre-wrap;
  word-wrap: break-word;
}

.message-flex-body > .message-body {
  display: block;
  flex: auto;
}

/* Network styles */

.theme-dark .message.error {
  background-color: rgba(235, 83, 104, 0.17);
}

.console-string {
  color: var(--theme-highlight-lightorange);
}

.theme-selected .console-string,
.theme-selected .cm-number,
.theme-selected .cm-variable,
.theme-selected .kind-ArrayLike {
  color: #f5f7fa !important; /* Selection Text Color */
}

.message.network.error > .icon::before {
  background-position: -12px 0;
}

.message.network > .message-body {
  display: flex;
  flex-wrap: wrap;
}

.message.network .method {
  flex: none;
}

.message.network:not(.navigation-marker) .url {
  flex: 1 1 auto;
  /* Make sure the URL is very small initially, let flex change width as needed. */
  width: 100px;
  min-width: 5em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.message.network .status {
  flex: none;
  margin-inline-start: 6px;
}

.message.network.mixed-content .url {
  color: var(--theme-highlight-red);
}

.message .learn-more-link {
  color: var(--theme-highlight-blue);
  margin: 0 6px;
}

.message.network .xhr {
  background-color: var(--theme-body-color-alt);
  color: var(--theme-body-background);
  border-radius: 3px;
  font-weight: bold;
  font-size: 10px;
  padding: 1px 2px;
  line-height: 10px;
  margin-inline-start: 0;
  margin-inline-end: 1ex;
}

/* CSS styles */

.message.cssparser > .indent  {
  border-inline-end: solid #00b6f0 6px;
}

.message.cssparser.error > .icon::before {
  background-position: -12px -12px;
}

.message.cssparser.warn > .icon::before {
  background-position: -24px -12px;
}

/* JS styles */

.message.exception > .indent {
  border-inline-end: solid #fb9500 6px;
}

.message.exception.error > .icon::before {
  background-position: -12px -24px;
}

.message.exception.warn > .icon::before {
  background-position: -24px -24px;
}

/* Web Developer styles */

.message.console-api > .indent {
  border-inline-end: solid #cbcbcb 6px;
}

/* Input and output styles */
.message.command > .indent,
.message.result > .indent {
  border-inline-end: solid #808080 6px;
}

.message.command > .icon::before {
  background-position: -48px -36px;
}

.message.result > .icon::before {
  background-position: -60px -36px;
}

/* JSTerm Styles */

html .jsterm-input-node-html,
html #webconsole-notificationbox {
  flex: 0;
  width: 100vw;
}

.jsterm-input-container {
  background-color: var(--theme-tab-toolbar-background);
  border-top: 1px solid var(--theme-splitter-color);
}

.jsterm-input-node {
  /* Always allow scrolling on input - it auto expands in js by setting height,
     but don't want it to get bigger than the window. 24px = toolbar height. */
  max-height: calc(90vh - 24px);
  background-image: var(--theme-command-line-image);
  background-repeat: no-repeat;
  background-size: 16px 16px;
  background-position: 4px 50%;
  color: var(--theme-content-color1);
  box-sizing: border-box;
}

.jsterm-complete-node {
  color: var(--theme-comment);
}

.theme-light .jsterm-input-container {
  /* For light theme use a white background for the input - it looks better
     than off-white */
  background-color: #fff;
  border-top-color: #e0e0e0;
}

textarea.jsterm-input-node,
textarea.jsterm-complete-node {
  width: 100%;
  border: 1px solid transparent;
  margin: 0;
  background-color: transparent;
  resize: none;
  font-size: inherit;
  line-height: 16px;
  overflow-x: hidden;
  /* Set padding for console input on textarea to make sure it is included in
     scrollHeight that is used when resizing JSTerminal's input. */
  padding: 4px 0;
  padding-inline-start: 20px;
}

textarea.jsterm-complete-node {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  pointer-events: none;
}

textarea.jsterm-input-node:focus {
  background-image: var(--theme-command-line-image-focus);
  box-shadow: none;
  border: 1px solid var(--blue-50);
  transition: border-color 0.2s ease-in-out;
  outline: none;
}

:root[platform="mac"] textarea.jsterm-input-node,
:root[platform="mac"] textarea.jsterm-complete-node {
  border-radius: 0 0 4px 4px;
}

/* Unset the bottom right radius on the jsterm inputs when the sidebar is visible */
:root[platform="mac"] .sidebar ~ .jsterm-input-container textarea.jsterm-input-node,
:root[platform="mac"] .sidebar ~ .jsterm-input-container textarea.jsterm-complete-node {
  border-bottom-right-radius: 0;
}

/* Security styles */

.message.security > .indent {
  border-inline-end: solid red 6px;
}

.message.security.error > .icon::before {
  background-position: -12px -48px;
}

.message.security.warn > .icon::before {
  background-position: -24px -48px;
}

.navigation-marker {
  color: #aaa;
  background: linear-gradient(#aaa, #aaa) no-repeat left 50%;
  background-size: 100% 2px;
  margin-top: 6px;
  margin-bottom: 6px;
  font-size: 0.9em;
}

.navigation-marker .url {
  padding-inline-end: 9px;
  text-decoration: none;
  background: var(--theme-body-background);
}

.theme-light .navigation-marker .url {
  background: #fff;
}

.stacktrace {
  display: none;
  padding: 5px 10px;
  margin: 5px 0 0 0;
  overflow-y: auto;
  border: 1px solid var(--theme-splitter-color);
  border-radius: 3px;
}

.consoletable {
  margin: 5px 0 0 0;
}

/* Force cells to only show one row of contents.  Getting normal ellipses
   behavior has proven impossible so far, so this is better than letting
   rows get out of vertical alignment when one cell has a lot of content. */
.consoletable .table-widget-cell > span {
  overflow: hidden;
  display: flex;
  height: 1.25em;
  line-height: 1.25em;
}

.theme-light .message.error .stacktrace {
  background-color: rgba(255, 255, 255, 0.5);
}

.theme-dark .message.error .stacktrace {
  background-color: rgba(0, 0, 0, 0.5);
}

.message.open .stacktrace {
  display: block;
}

.message .theme-twisty {
  position: relative;
  top: 0.1em;
}

/*Do not mirror the twisty because container force to ltr */
.message .theme-twisty:dir(rtl),
.message .theme-twisty:-moz-locale-dir(rtl) {
  transform: none;
}

.cm-s-mozilla a[class] {
  font-style: italic;
  text-decoration: none;
}

.cm-s-mozilla a[class]:hover,
.cm-s-mozilla a[class]:focus {
  text-decoration: underline;
}

a.learn-more-link.webconsole-learn-more-link {
    font-style: normal;
}

/* Open DOMNode in inspector button */
.open-inspector {
  background: url("chrome://devtools/skin/images/vview-open-inspector.png") no-repeat 0 0;
  padding-left: 16px;
  margin-left: 5px;
  cursor: pointer;
}

.open-inspector:hover {
  filter: var(--theme-icon-checked-filter);
}

.open-inspector:active {
  filter: var(--theme-icon-checked-filter) brightness(0.9);
}

@media (max-width: 500px) {
  .message > .timestamp {
    display: none;
  }
}

#output-container {
  height: 100%;
}

.webconsole-output-wrapper {
  display: flex;
  flex-direction: column;
  height: 100%;
  -moz-user-focus: normal;
  color: var(--console-output-color);
  --console-output-indent-border-color: var(--theme-selection-background);
  --icon-top-margin: 3px;
  --object-inspector-hover-background: transparent;
  --attachment-margin-block-end: 3px;
  --primary-toolbar-height: 29px;
  --close-button-image: url(chrome://devtools/skin/images/close.svg);
}

/* Webconsole specific theme variables */
.theme-light .webconsole-output-wrapper {
  --error-color: var(--red-70);
  --error-background-color: #FDF2F5;
  --warning-color: var(--yellow-80);
  --warning-background-color: #FFFBD5;
  --console-output-color: var(--grey-90);
  --repeat-bubble-background-color: var(--theme-highlight-blue);
}

.theme-dark .webconsole-output-wrapper {
  --error-color: #FF9494;
  --error-background-color: #442923;
  --warning-color: #FCE19F;
  --warning-background-color: #44391F;
  --console-output-color: white;
  --repeat-bubble-background-color: var(--blue-60);
}

/*
  This element contains the different toolbars in the console
    - primary, containing the clear messages button and the text search input.
      It can expand as much as it need.
    - filtered messages, containing the "X items hidden by filters" and the reset filters button.
      It should be on the same row than the primary bar if it fits there, or on its own 100% row if it is wrapped.
    - secondary, containing the filter buttons (Error, Warning, …).
      It should be on its own 100% row.

  Basically here's what we can have :

  -----------------------------------------------------------------------------------------------------------
  | Clear button - Open filter bar button - Filter Input | X items hidden by filters - Reset Filters button |
  -----------------------------------------------------------------------------------------------------------
  | Error - Warning - Log - Info - Debug - CSS - Network - XHR                                              |
  -----------------------------------------------------------------------------------------------------------

  or

  ------------------------------------------------------------------------------------
  | Clear button - Open filter bar button - Filter Input                             |
  ------------------------------------------------------------------------------------
  |                                X items hidden by filters  - Reset Filters button |
  ------------------------------------------------------------------------------------
  | Error - Warning - Log - Info - Debug - CSS - Network - XHR                       |
  ------------------------------------------------------------------------------------
*/
.webconsole-filteringbar-wrapper {
  display: flex;
  grid-row: 1 / 2;
  /* Wrap so the "Hidden messages" bar can go to its own row if needed */
  flex-wrap: wrap;
  --primary-toolbar-height: 29px;
}

.webconsole-filterbar-primary {
  display: flex;
  /* We want the toolbar (which contain the text search input) to fit
  the content, we don't allow to shrink/overlap it */
  flex: 100 0 -moz-fit-content;
  align-items: center;
  min-height: var(--primary-toolbar-height);
}

.devtools-toolbar.webconsole-filterbar-secondary {
  display: flex;
  width: 100%;
  align-items: center;
  -moz-user-select: none;
}

.webconsole-filterbar-primary .devtools-plaininput {
  flex: 1 1 100%;
  align-self: stretch;
  margin-left: 1px;
  padding-inline-start: 4px;
  border: 1px solid transparent;
}

.devtools-plaininput:focus {
  border: 1px solid var(--blue-50);
  transition: all 0.2s ease-in-out;
  outline: none;
}

.webconsole-filterbar-primary .filter-checkbox {
  flex-shrink: 0;
  margin: 0 3px;
  display: flex;
  align-items: center;
  -moz-user-select: none;
}

.webconsole-filterbar-secondary .devtools-separator {
  margin: 0 5px;
}

.webconsole-filterbar-filtered-messages {
  /* Needed so the bar takes the whole horizontal space when it is wrapped */
  flex-grow: 1;
  justify-content: flex-end;
  color: var(--theme-comment);
  text-align: end;
  align-items: center;
  min-height: var(--primary-toolbar-height);
  line-height: var(--primary-toolbar-height);
}

.webconsole-filterbar-filtered-messages .filter-message-text {
  font-style: italic;
  -moz-user-select: none;
}

.webconsole-filterbar-filtered-messages .reset-filters-button {
  margin-inline-start: 0.5em;
}

.webconsole-output {
  flex: 1;
  overflow: auto;
}

.webconsole-output-wrapper .message {
  --border-size: 3px;
  border-inline-start: var(--border-size) solid transparent;
}

.webconsole-output-wrapper .message:hover {
  border-inline-start-color: var(--theme-highlight-blue);
}

.webconsole-output-wrapper .message.warn.warn {
  background-color: var(--warning-background-color);
}

.webconsole-output-wrapper .message.error .message-body {
  color: var(--error-color);
}

.webconsole-output-wrapper .message.warn .message-body {
  color: var(--warning-color);
}

/* Special casing String reps so they are legible */
.webconsole-output-wrapper .message .message-body > .objectBox-string {
  color: currentColor;
}

/* Special casing dark-theme error and warning ObjectInspector colors */
.theme-dark .webconsole-output-wrapper .message.error .tree.object-inspector .object-label,
.theme-dark .webconsole-output-wrapper .message.error .tree.object-inspector .object-label *,
.theme-dark .webconsole-output-wrapper .message.warn .tree.object-inspector .object-label,
.theme-dark .webconsole-output-wrapper .message.warn .tree.object-inspector .object-label *,
.theme-dark .webconsole-output-wrapper .message.error .objectLeftBrace,
.theme-dark .webconsole-output-wrapper .message.error .objectRightBrace,
.theme-dark .webconsole-output-wrapper .message.error .arrayLeftBracket,
.theme-dark .webconsole-output-wrapper .message.error .arrayRightBracket,
.theme-dark .webconsole-output-wrapper .message.warn .objectLeftBrace,
.theme-dark .webconsole-output-wrapper .message.warn .objectRightBrace,
.theme-dark .webconsole-output-wrapper .message.warn .arrayLeftBracket,
.theme-dark .webconsole-output-wrapper .message.warn .arrayRightBracket {
  color: var(--theme-body-color);
}
.theme-dark .webconsole-output-wrapper .message.error .tree.object-inspector,
.theme-dark .webconsole-output-wrapper .message.warn .tree.object-inspector {
  --console-output-indent-border-color: var(--theme-body-color);
}

.webconsole-output-wrapper .message-flex-body > .message-body {
  overflow-x: auto;
}

.webconsole-output-wrapper .message-body > * {
  flex-shrink: 0;
  vertical-align: top;
}

.message.startGroup .message-body > .objectBox-string,
.message.startGroupCollapsed .message-body > .objectBox-string {
  color: var(--theme-body-color);
  font-weight: bold;
}

.webconsole-output-wrapper .message > .icon {
  margin: var(--icon-top-margin) 0 0 0;
  padding: 0 0 0 6px;
}

.webconsole-output-wrapper .message.error > .icon::before {
  /* Red warning icon */
  background-position: -24px -48px;
}

.webconsole-output-wrapper .message.warn > .icon::before {
  /* Yellow warning icon */
  background-position: -24px -24px;
}

.webconsole-output-wrapper .message .theme-twisty {
  margin: calc(var(--icon-top-margin) - 1px) 0 0 0;
}

.message.error > .icon::before {
  background-position: -12px -36px;
}

.message.warn > .icon::before {
  background-position: -24px -36px;
}

.message.info > .icon::before {
  background-position: -36px -36px;
}

/* The bubble that shows the number of times a message is repeated */
.webconsole-output-wrapper .message-repeats {
  background-color: var(--repeat-bubble-background-color);
  font-weight: normal;
  font-size: 0.8em;
}

/* Prefix text that can be set by ConsoleAPI option */
.webconsole-output-wrapper .console-message-prefix {
  color: var(--theme-comment);
}

/* Network Messages */

.webconsole-output-wrapper .message.network .method {
  margin-inline-end: 5px;
}

.webconsole-output-wrapper .message.network .xhr {
  background-color: var(--theme-comment);
  color: white;
  border-radius: 2px;
  font-weight: normal;
  line-height: inherit;
}

.webconsole-output-wrapper .message.network:not(.navigation-marker) .url {
  color: var(--theme-comment);
  font-style: inherit;
}

.webconsole-output-wrapper .message.network .status {
  color: var(--theme-highlight-blue);
  font-style: inherit;
}

.webconsole-output-wrapper .message.network .status .status-info .status-code {
  padding: 0 2px;
  border-radius: 3px;
  text-decoration: none;
  font-style: normal;
}

.webconsole-output-wrapper .message.network .status .status-info .status-code:not([data-code^="3"]) {
  color: var(--theme-body-background);
}

.status-code[data-code^="1"] {
  background-color: var(--status-code-color-1xx);
}

.status-code[data-code^="2"] {
  background-color: var(--status-code-color-2xx);
}

.status-code[data-code^="3"] {
  background-color: var(--status-code-color-3xx);
}

.status-code[data-code^="4"] {
  background-color: var(--status-code-color-4xx);
}

.status-code[data-code^="5"] {
  background-color: var(--status-code-color-5xx);
}

.network.message .network-info {
  display: none;
  margin-top: 8px;
  border: solid 1px var(--theme-splitter-color);
}

.network.message.open .network-info {
  display: block;
}

.network.message .network-info .panels {
  max-height: 250px;
  min-height: 100px;
}

/* Hide 'Edit And Resend' button since the feature isn't
   supported in the Console panel. */
.network.message #headers-panel .edit-and-resend-button {
  display: none;
}

.network .message-flex-body > .message-body {
  display: flex;
  flex-wrap: wrap;
}

/* Output Wrapper */

.webconsole-output-wrapper .message .indent {
  display: inline-block;
  border-inline-end: solid 1px var(--console-output-indent-border-color);
}
.webconsole-output-wrapper .message .indent[data-indent="0"] {
  border-inline-end: none;
}

.message.startGroup .indent,
.message.startGroupCollapsed .indent {
  border-inline-end-color: transparent;
  margin-inline-end: 5px;
}

.message.startGroup .icon,
.message.startGroupCollapsed .icon {
  display: none;
}

/*
 * Open DOMNode in inspector button. Style need to be reset in the new
 * console since its style is already defined in reps.css .
 */
.webconsole-output-wrapper .open-inspector {
  background-image: unset;
}

/* Stacktraces */
.webconsole-output-wrapper .stacktrace {
  border: none;
  margin-block-end: var(--attachment-margin-block-end);
  padding: 0 0 0 4px;
}

.theme-dark .webconsole-output-wrapper .message.error .stacktrace,
.theme-light .webconsole-output-wrapper .message.error .stacktrace {
  /* Removing specificity from the old console */
  background-color: inherit;
}

/* console.table() */
.new-consoletable {
  width: 100%;
  --consoletable-border: var(--theme-splitter-color);
  margin-block-end: var(--attachment-margin-block-end);
  color: var(--theme-body-color);
  display: grid;
  max-height: 250px;
  overflow-y: auto;
  border: 1px solid var(--consoletable-border);
  /* border at the left side will be added by the inner divs [role=gridcell] */
  border-left: none;
}

.new-consoletable > div {
  border-left: 1px solid var(--consoletable-border);
}

.new-consoletable-header {
  position: sticky;
  top: 0;
  border-bottom: 1px solid var(--consoletable-border);
  background-color: var(--theme-toolbar-background);
  color: var(--theme-body-color);
  margin: 0;
  padding: 5px 4px;
  font-weight: inherit;
  z-index: 1;
}

.new-consoletable > [role=gridcell] {
  background-color: var(--theme-body-background);
  padding: 3px 4px;
  min-width: 100px;
  color: var(--theme-body-color);
}

.new-consoletable > [role=gridcell].even {
  background-color: var(--table-zebra-background);
}

/* Layout */
.webconsole-output {
  flex: 1;
  direction: ltr;
  overflow: auto;
  -moz-user-select: text;
  position: relative;
  grid-row: 2 / 3;
}

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

body {
  overflow: hidden;
}

#app-wrapper {
  height: 100%;
  display: flex;
  flex-direction: column;
}

body #output-container {
  flex: 1;
  overflow: hidden;
}


/*
 * Here's what the layout of the console looks like:
 *
 *  +------------------------------+--------------+
 *  | FILTER BAR                   |              |
 *  +------------------------------+              |
 *  |                              |              |
 *  | CONSOLE OUTPUT               |   SIDEBAR    |
 *  |                              |              |
 *  +------------------------------+              |
 *  | NOTIFICATION BOX             |              |
 *  +------------------------------+              |
 *  | JSTERM CONTAINER             |              |
 *  +------------------------------+--------------+
 */
.webconsole-output-wrapper {
  display: grid;
  grid-template-columns: minmax(200px, 1fr) auto;
  grid-template-rows: auto 1fr auto auto;
  height: 100%;
  width: 100vw;
}

.webconsole-output-wrapper #webconsole-notificationbox {
  grid-column: 1 / 2;
  grid-row: 3 / 4;
}

.webconsole-output-wrapper .jsterm-input-container {
  grid-column: 1 / 2;
  grid-row: -1 / -2;
  position: relative;
  z-index: 1;
}

/* Object Inspector */
.webconsole-output-wrapper .object-inspector.tree {
  display: inline-block;
}

.webconsole-output-wrapper .object-inspector.tree .tree-indent {
  border-inline-start-color: var(--console-output-indent-border-color);
}

.webconsole-output-wrapper .object-inspector.tree .tree-node:hover:not(.focused) {
  background-color: var(--object-inspector-hover-background);
}

/*
 * Make console.group, exception and XHR message's arrow look the same as the arrow
 * used in the ObjectInspector (same background-image, width, transition).
 * Properties were copied from devtools/client/shared/components/reps/reps.css.
 */
.webconsole-output-wrapper img.collapse-button.arrow {
  flex: none;
  mask: url("chrome://devtools/skin/images/devtools-components/arrow.svg") no-repeat;
  mask-size: 100%;
  width: 9px;
  height: 9px;
  margin-block-start: 5px;
  margin-inline-start: 4px;
  margin-inline-end: 1px;
  transform: rotate(-90deg);
  transition: transform 0.125s ease;
}

/*
 * We need to override the margin for group arrow in order to keep the alignment
 * with the indent border.
 */
.webconsole-output-wrapper .message.startGroup img.collapse-button.arrow,
.webconsole-output-wrapper .message.startGroupCollapsed img.collapse-button.arrow {
  margin-inline-start: 2px;
}

html[dir="rtl"] .webconsole-output-wrapper img.collapse-button.arrow:not(.expanded) {
  transform: rotate(90deg);
}

.webconsole-output-wrapper img.collapse-button.arrow.expanded {
  transform: rotate(0deg);
}

/* Apply the same color to both message arrows and ObjectInspector ones. */
.webconsole-output-wrapper .message img.arrow {
  background-color: #AFA8AB;
}

.theme-dark .webconsole-output-wrapper .message img.arrow {
  background-color: #7F7E81;
}

/* Sidebar */
.sidebar {
  display: flex;
  grid-row: 1 / -1;
  grid-column: -1 / -2;
  background-color: var(--theme-sidebar-background);
}

.split-box.vert.sidebar {
  /* Set to prevent the sidebar from extending past the right edge of the page */
  width: unset;
}

.sidebar-wrapper {
  display: grid;
  grid-template-rows: auto 1fr;
  width: 100%;
  overflow: hidden;
}

.webconsole-sidebar-toolbar {
  grid-row: 1 / 2;
  min-height: var(--primary-toolbar-height);
  display: flex;
  justify-content: end;
}

.sidebar-contents {
  grid-row: 2 / 3;
  overflow: scroll;
}

.webconsole-sidebar-toolbar .sidebar-close-button {
  padding: 4px 0;
  margin: 0;
  margin-inline-end: -3px;
}

.sidebar-close-button::before {
  background-image: var(--close-button-image);
}

.sidebar-contents .object-inspector {
  min-width: 100%;
}

.theme-twisty {
  cursor: default;
}