Source code
Revision control
Copy as Markdown
Other Tools
/* 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
* {
box-sizing: border-box;
}
html,
body {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
#mount {
height: 100%;
}
button {
background: transparent;
border: none;
font-family: inherit;
font-size: inherit;
}
button:hover {
background-color: var(--theme-toolbar-background-hover);
}
.theme-dark button:hover {
background-color: var(--theme-toolbar-hover);
}
.debugger {
display: flex;
flex: 1;
height: 100%;
}
.debugger .tree-indent {
width: 16px;
margin-inline-start: 0;
border-inline-start: 0;
}
.editor-pane {
display: flex;
position: relative;
flex: 1;
background-color: var(--theme-body-background);
height: 100%;
overflow: hidden;
}
.editor-container {
width: 100%;
display: grid;
grid-template-areas:
"editor-header"
"editor "
"notification "
"editor-footer";
grid-template-rows:
var(--editor-header-height)
1fr
auto
var(--editor-footer-height);
max-height: 100%;
overflow-y: auto;
}
.editor-notification-footer {
background: var(--theme-warning-background);
border-top: 1px solid var(--theme-warning-border);
color: var(--theme-warning-color);
padding: 0.5em;
gap: 8px;
grid-area: notification;
display: flex;
/* center text within the notification */
align-items: center;
.info.icon {
align-self: normal;
}
.close-button {
/* set a fixed height in order to avoid having it flexed to full height */
height: 16px;
padding: 0;
/* put in top-right corner */
margin-inline-start: auto;
align-self: normal;
&::before {
display: block;
width: 16px;
height: 16px;
content: "";
}
}
}
/* Utils */
.absolute-center {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.d-flex {
display: flex;
}
.align-items-center {
align-items: center;
}
.rounded-circle {
border-radius: 50%;
}
.text-white {
color: white;
}
.text-center {
text-align: center;
}
.min-width-0 {
min-width: 0;
}
/*
Prevents horizontal scrollbar from displaying when
right pane collapsed (#7505)
*/
.split-box > .splitter:last-child {
display: none;
}
/**
* Note: we need to the `.debugger` prefix here to beat the specificity of the
* general rule defined in SlitBox.css for `.split-box.vert > .splitter`.
*/
.debugger .split-box.vert > .splitter {
border-left-width: var(--devtools-splitter-inline-start-width);
border-right-width: var(--devtools-splitter-inline-end-width);
margin-left: calc(-1 * var(--devtools-splitter-inline-start-width) - 1px);
margin-right: calc(-1 * var(--devtools-splitter-inline-end-width));
}
::-webkit-scrollbar {
width: 8px;
height: 8px;
background: transparent;
}
::-webkit-scrollbar-track {
border-radius: 8px;
background: transparent;
}
::-webkit-scrollbar-thumb {
border-radius: 8px;
background: rgba(113, 113, 113, 0.5);
}