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
:host { display: contents; }
.highlighter-container {
--highlighter-accessibility-bounds-color: #6a5acd;
--highlighter-accessibility-bounds-opacity: 0.6;
--highlighter-box-border-color: #444444;
--highlighter-box-content-color: hsl(197, 71%, 73%);
--highlighter-box-margin-color: #edff64;
--highlighter-box-padding-color: #6a5acd;
--highlighter-bubble-text-color: hsl(216, 33%, 97%);
--highlighter-bubble-background-color: hsl(214, 13%, 24%);
--highlighter-bubble-border-color: rgba(255, 255, 255, 0.2);
--highlighter-bubble-arrow-size: 8px;
--highlighter-font-family: message-box;
--highlighter-font-size: 11px;
--highlighter-guide-color: hsl(200, 100%, 40%);
--highlighter-infobar-color: hsl(210, 30%, 85%);
--grey-40: #b1b1b3;
--red-40: #ff3b6b;
--yellow-60: #d7b600;
--blue-60: #0060df;
}
/**
* Highlighters are absolute positioned in the page by default.
* A single highlighter can have fixed position in its css class if needed (see below the
* eye dropper or rulers highlighter, for example); but if it has to handle the
* document's scrolling (as rulers does), it would lag a bit behind due the APZ (Async
* Pan/Zoom module), that performs asynchronously panning and zooming on the compositor
* thread rather than the main thread.
*/
.highlighter-container {
position: absolute;
width: 100%;
height: 100%;
/* The container for all highlighters doesn't react to pointer-events by
default. This is because most highlighters cover the whole viewport but
don't contain UIs that need to be accessed.
If your highlighter has UI that needs to be interacted with, add
'pointer-events:auto;' on its container element. */
pointer-events: none;
}
.highlighter-container.box-model {
/* Make the box-model container have a z-index other than auto so it always sits above
other highlighters. */
z-index: 1;
}
.highlighter-container [hidden] {
display: none !important;
}
.highlighter-container [dragging] {
cursor: grabbing;
}
/* Box Model Highlighter */
.box-model-regions {
opacity: 0.6;
}
/* Box model regions can be faded (see the onlyRegionArea option in
highlighters.js) in order to only display certain regions. */
.box-model-regions [faded] {
display: none;
}
.box-model-content {
fill: var(--highlighter-box-content-color);
}
.box-model-padding {
fill: var(--highlighter-box-padding-color);
}
.box-model-border {
fill: var(--highlighter-box-border-color);
}
.box-model-margin {
fill: var(--highlighter-box-margin-color);
}
.box-model-content,
.box-model-padding,
.box-model-border,
.box-model-margin {
stroke: none;
}
.box-model-guide-top,
.box-model-guide-right,
.box-model-guide-bottom,
.box-model-guide-left {
stroke: var(--highlighter-guide-color);
stroke-dasharray: 5 3;
shape-rendering: crispEdges;
}
@media (prefers-reduced-motion) {
.use-simple-highlighters :is(
.box-model-content,
.box-model-padding,
.box-model-border,
.box-model-margin
) {
fill: none;
stroke-width: 3;
}
.use-simple-highlighters .box-model-content {
stroke: var(--highlighter-box-content-color);
}
.use-simple-highlighters .box-model-padding {
stroke: var(--highlighter-box-padding-color);
}
.use-simple-highlighters .box-model-border {
stroke: var(--highlighter-box-border-color);
}
.use-simple-highlighters .box-model-margin {
stroke: var(--highlighter-box-margin-color);
}
}
/* Highlighter - Infobar */
[class$="infobar-container"] {
position: absolute;
max-width: 95%;
font: var(--highlighter-font-family);
font-size: var(--highlighter-font-size);
}
[class$="infobar"] {
position: relative;
padding: 5px;
min-width: 75px;
border-radius: 3px;
background: var(--highlighter-bubble-background-color) no-repeat padding-box;
color: var(--highlighter-bubble-text-color);
text-shadow: none;
border: 1px solid var(--highlighter-bubble-border-color);
}
/* Arrows */
[class$="infobar-container"] > [class$="infobar"]:before {
left: calc(50% - var(--highlighter-bubble-arrow-size));
border: var(--highlighter-bubble-arrow-size) solid
var(--highlighter-bubble-border-color);
}
[class$="infobar-container"] > [class$="infobar"]:after {
left: calc(50% - 7px);
border: 7px solid var(--highlighter-bubble-background-color);
}
[class$="infobar-container"] > [class$="infobar"]:before,
[class$="infobar-container"] > [class$="infobar"]:after {
content: "";
display: none;
position: absolute;
height: 0;
width: 0;
border-left-color: transparent;
border-right-color: transparent;
}
[class$="infobar-container"][position="top"]:not([hide-arrow])
> [class$="infobar"]:before,
[class$="infobar-container"][position="top"]:not([hide-arrow])
> [class$="infobar"]:after {
border-bottom: 0;
top: 100%;
display: block;
}
[class$="infobar-container"][position="bottom"]:not([hide-arrow])
> [class$="infobar"]:before,
[class$="infobar-container"][position="bottom"]:not([hide-arrow])
> [class$="infobar"]:after {
border-top: 0;
bottom: 100%;
display: block;
}
/* Text Container */
[class$="infobar-text"] {
overflow: hidden;
white-space: nowrap;
direction: ltr;
padding-bottom: 1px;
display: flex;
justify-content: center;
max-width: 768px;
}
.box-model-infobar-tagname {
color: hsl(285, 100%, 75%);
}
.box-model-infobar-id {
color: hsl(103, 46%, 54%);
overflow: hidden;
text-overflow: ellipsis;
}
.box-model-infobar-classes,
.box-model-infobar-pseudo-classes {
color: hsl(200, 74%, 57%);
overflow: hidden;
text-overflow: ellipsis;
}
[class$="infobar-dimensions"],
[class$="infobar-grid-type"],
[class$="infobar-flex-type"] {
border-inline-start: 1px solid #5a6169;
margin-inline-start: 6px;
padding-inline-start: 6px;
}
[class$="infobar-grid-type"]:empty,
[class$="infobar-flex-type"]:empty {
display: none;
}
[class$="infobar-dimensions"] {
color: var(--highlighter-infobar-color);
}
[class$="infobar-grid-type"],
[class$="infobar-flex-type"] {
color: var(--grey-40);
}
/* CSS Grid Highlighter */
.css-grid-canvas {
position: absolute;
pointer-events: none;
top: 0;
left: 0;
image-rendering: -moz-crisp-edges;
}
.css-grid-regions {
opacity: 0.6;
}
.css-grid-areas,
.css-grid-cells {
opacity: 0.5;
stroke: none;
}
.css-grid-area-infobar-name,
.css-grid-cell-infobar-position,
.css-grid-line-infobar-number {
color: hsl(285, 100%, 75%);
}
.css-grid-line-infobar-names:not(:empty) {
color: var(--highlighter-infobar-color);
border-inline-start: 1px solid #5a6169;
margin-inline-start: 6px;
padding-inline-start: 6px;
}
/* CSS Transform Highlighter */
.css-transform-transformed {
fill: var(--highlighter-box-content-color);
opacity: 0.8;
}
.css-transform-untransformed {
fill: #66cc52;
opacity: 0.8;
}
.css-transform-transformed,
.css-transform-untransformed,
.css-transform-line {
stroke: var(--highlighter-guide-color);
stroke-dasharray: 5 3;
stroke-width: 2;
}
/* Element Geometry Highlighter */
.geometry-editor-root {
/* The geometry editor can be interacted with, so it needs to react to
pointer events */
pointer-events: auto;
user-select: none;
}
.geometry-editor-offset-parent {
stroke: var(--highlighter-guide-color);
shape-rendering: crispEdges;
stroke-dasharray: 5 3;
fill: transparent;
}
.geometry-editor-current-node {
stroke: var(--highlighter-guide-color);
fill: var(--highlighter-box-content-color);
shape-rendering: crispEdges;
opacity: 0.6;
}
.geometry-editor-arrow {
stroke: var(--highlighter-guide-color);
shape-rendering: crispEdges;
}
.geometry-editor-root circle {
stroke: var(--highlighter-guide-color);
fill: var(--highlighter-box-content-color);
}
.geometry-editor-handler-top,
.geometry-editor-handler-bottom {
cursor: ns-resize;
}
.geometry-editor-handler-right,
.geometry-editor-handler-left {
cursor: ew-resize;
}
[dragging] .geometry-editor-handler-top,
[dragging] .geometry-editor-handler-right,
[dragging] .geometry-editor-handler-bottom,
[dragging] .geometry-editor-handler-left {
cursor: grabbing;
}
.geometry-editor-handler-top.dragging,
.geometry-editor-handler-right.dragging,
.geometry-editor-handler-bottom.dragging,
.geometry-editor-handler-left.dragging {
fill: var(--highlighter-guide-color);
}
.geometry-editor-label-bubble {
fill: var(--highlighter-bubble-background-color);
shape-rendering: crispEdges;
}
.geometry-editor-label-text {
fill: var(--highlighter-bubble-text-color);
font: var(--highlighter-font-family);
font-size: 10px;
text-anchor: middle;
dominant-baseline: middle;
}
/* Rulers Highlighter */
.rulers-highlighter-elements {
shape-rendering: crispEdges;
pointer-events: none;
position: fixed;
top: 0;
left: 0;
}
.rulers-highlighter-elements > g {
opacity: 0.8;
}
.rulers-highlighter-elements > g > rect {
fill: #fff;
}
.rulers-highlighter-ruler-graduations {
stroke: #bebebe;
}
.rulers-highlighter-ruler-markers {
stroke: #202020;
}
.rulers-highlighter-horizontal-labels > text,
.rulers-highlighter-vertical-labels > text {
stroke: none;
fill: #202020;
font: var(--highlighter-font-family);
font-size: 9px;
dominant-baseline: hanging;
}
.rulers-highlighter-horizontal-labels > text {
text-anchor: start;
}
.rulers-highlighter-vertical-labels > text {
transform: rotate(-90deg);
text-anchor: end;
}
.viewport-size-highlighter-viewport-infobar-container {
shape-rendering: crispEdges;
background-color: rgba(255, 255, 255, 0.7);
font: var(--highlighter-font-family);
position: fixed;
top: 30px;
right: 0px;
font-size: 12px;
padding: 4px;
}
/* Measuring Tool Highlighter */
.measuring-tool-tool {
pointer-events: auto;
}
.measuring-tool-root {
position: absolute;
top: 0;
left: 0;
pointer-events: auto;
cursor: crosshair;
}
.measuring-tool-elements {
position: absolute;
}
.measuring-tool-root path {
shape-rendering: geometricPrecision;
pointer-events: auto;
}
.measuring-tool-root .measuring-tool-box-path,
.measuring-tool-root .measuring-tool-diagonal-path {
fill: rgba(135, 206, 235, 0.6);
stroke: var(--highlighter-guide-color);
}
.measuring-tool-root circle {
stroke: var(--highlighter-guide-color);
stroke-width: 2px;
fill: #fff;
vector-effect: non-scaling-stroke;
}
.measuring-tool-root circle.highlight {
fill: var(--highlighter-guide-color);
}
.measuring-tool-handler-top,
.measuring-tool-handler-bottom {
cursor: ns-resize;
}
.measuring-tool-handler-right,
.measuring-tool-handler-left {
cursor: ew-resize;
}
.measuring-tool-handler-topleft,
.measuring-tool-handler-bottomright {
cursor: nwse-resize;
}
.measuring-tool-handler-topright,
.measuring-tool-handler-bottomleft {
cursor: nesw-resize;
}
.mirrored .measuring-tool-handler-topleft,
.mirrored .measuring-tool-handler-bottomright {
cursor: nesw-resize;
}
.mirrored .measuring-tool-handler-topright,
.mirrored .measuring-tool-handler-bottomleft {
cursor: nwse-resize;
}
[class^=measuring-tool-handler].dragging {
fill: var(--highlighter-guide-color);
}
.dragging .measuring-tool-box-path,
.dragging .measuring-tool-diagonal-path {
opacity: 0.45;
}
.measuring-tool-label-size,
.measuring-tool-label-position {
position: absolute;
top: 0;
left: 0;
display: inline-block;
border-radius: 4px;
padding: 4px;
white-space: pre-line;
font: var(--highlighter-font-family);
font-size: 10px;
pointer-events: none;
user-select: none;
box-sizing: border-box;
}
.measuring-tool-label-position {
color: #fff;
background: hsla(214, 13%, 24%, 0.8);
}
.measuring-tool-label-size {
color: var(--highlighter-bubble-text-color);
background: var(--highlighter-bubble-background-color);
border: 1px solid var(--highlighter-bubble-border-color);
line-height: 1.5em;
}
[class^=measuring-tool-guide] {
stroke: var(--highlighter-guide-color);
stroke-dasharray: 5 3;
shape-rendering: crispEdges;
}
/* Eye Dropper */
.eye-dropper-root {
--magnifier-width: 96px;
--magnifier-height: 96px;
/* Width accounts for all color formats (hsl being the longest) */
--label-width: 160px;
--label-height: 23px;
--background-color: #e0e0e0;
color: #333;
position: fixed;
/* Tool start position. This should match the X/Y defines in JS */
top: 100px;
left: 100px;
/* Prevent interacting with the page when hovering and clicking */
pointer-events: auto;
/* Offset the UI so it is centered around the pointer */
transform: translate(
calc(var(--magnifier-width) / -2),
calc(var(--magnifier-height) / -2)
);
filter: drop-shadow(0 0 1px rgba(0, 0, 0, 0.4));
/* We don't need the UI to be reversed in RTL locales, otherwise the # would appear
to the right of the hex code. Force LTR */
direction: ltr;
}
.eye-dropper-canvas {
image-rendering: -moz-crisp-edges;
cursor: none;
width: var(--magnifier-width);
height: var(--magnifier-height);
border-radius: 50%;
box-shadow: 0 0 0 3px var(--background-color);
display: block;
}
.eye-dropper-color-container {
background-color: var(--background-color);
border-radius: 2px;
width: var(--label-width);
height: var(--label-height);
position: relative;
--label-horizontal-center: translateX(
calc((var(--magnifier-width) - var(--label-width)) / 2)
);
--label-horizontal-left: translateX(
calc((-1 * var(--label-width) + var(--magnifier-width) / 2))
);
--label-horizontal-right: translateX(calc(var(--magnifier-width) / 2));
--label-vertical-top: translateY(
calc((-1 * var(--magnifier-height)) - var(--label-height))
);
/* By default the color label container sits below the canvas.
Here we just center it horizontally */
transform: var(--label-horizontal-center);
transition: transform 0.1s ease-in-out;
}
/* If there isn't enough space below the canvas, we move the label container to the top */
.eye-dropper-root[top] .eye-dropper-color-container {
transform: var(--label-horizontal-center) var(--label-vertical-top);
}
/* If there isn't enough space right of the canvas to horizontally center the label
container, offset it to the left */
.eye-dropper-root[left] .eye-dropper-color-container {
transform: var(--label-horizontal-left);
}
.eye-dropper-root[left][top] .eye-dropper-color-container {
transform: var(--label-horizontal-left) var(--label-vertical-top);
}
/* If there isn't enough space left of the canvas to horizontally center the label
container, offset it to the right */
.eye-dropper-root[right] .eye-dropper-color-container {
transform: var(--label-horizontal-right);
}
.eye-dropper-root[right][top] .eye-dropper-color-container {
transform: var(--label-horizontal-right) var(--label-vertical-top);
}
.eye-dropper-color-preview {
width: 16px;
height: 16px;
position: absolute;
inset-inline-start: 3px;
inset-block-start: 3px;
box-shadow: 0px 0px 0px black;
border: solid 1px #fff;
}
.eye-dropper-color-value {
text-shadow: 1px 1px 1px #fff;
font: var(--highlighter-font-family);
font-size: var(--highlighter-font-size);
text-align: center;
padding: 4px 0;
}
/* Paused Debugger Overlay */
.paused-dbg-root {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100vw;
height: 100vh;
display: flex;
align-items: center;
flex-direction: column;
/* We don't have access to DevTools themes here, but some of these colors come from the
themes. Theme variable names are given in comments. */
--text-color: #585959; /* --theme-body-color-alt */
--toolbar-background: #fcfcfc; /* --theme-toolbar-background */
--toolbar-border: #dde1e4; /* --theme-splitter-color */
--toolbar-box-shadow: 0 2px 2px 0 rgba(155, 155, 155, 0.26); /* --rdm-box-shadow */
--overlay-background: #dde1e4a8;
}
.paused-dbg-root[overlay] {
background-color: var(--overlay-background);
pointer-events: auto;
}
.paused-dbg-toolbar {
/* Show the toolbar at the top, but not too high to prevent it overlaping OS toolbar on Android */
margin-top: 30px;
display: inline-flex;
user-select: none;
color: var(--text-color);
box-shadow: var(--toolbar-box-shadow);
background-color: var(--toolbar-background);
border: 1px solid var(--toolbar-border);
border-radius: 4px;
font: var(--highlighter-font-family);
font-size: var(--highlighter-font-size);
}
.paused-dbg-toolbar button {
margin: 8px 4px 6px 6px;
width: 16px;
height: 16px;
mask-repeat: no-repeat;
mask-position: center;
mask-size: 16px 16px;
background-color: var(--text-color);
border: 0px;
appearance: none;
}
.paused-dbg-divider {
width: 1px;
height: 16px;
margin-top: 10px;
background-color: var(--toolbar-border);
}
.paused-dbg-reason,
.paused-dbg-step-button-wrapper,
.paused-dbg-resume-button-wrapper {
margin-top: 2px;
margin-bottom: 2px;
}
.paused-dbg-step-button-wrapper,
.paused-dbg-resume-button-wrapper {
margin-left: 2px;
margin-right: 2px;
}
button.paused-dbg-step-button {
margin-left: 6px;
margin-right: 6px;
padding: 0;
}
button.paused-dbg-resume-button {
margin-right: 6px;
padding: 0;
}
.paused-dbg-step-button-wrapper.hover,
.paused-dbg-resume-button-wrapper.hover {
background-color: var(--toolbar-border);
border-radius: 2px;
}
.paused-dbg-reason {
padding: 3px 16px;
margin: 8px 0px;
font: var(--highlighter-font-family);
font-size: var(--highlighter-font-size);
}
/* Remote Node Picker Notice Highlighter */
#node-picker-notice-root {
position: fixed;
max-width: 100vw;
/* Position at the bottom of the screen so it doesn't get into the user's way */
bottom: 0;
left: 0;
right: 0;
z-index: 2;
display: flex;
align-items: center;
flex-direction: column;
/* We don't have access to DevTools themes here, but some of these colors come from the
themes. Theme variable names are given in comments. */
--text-color: #585959; /* --theme-body-color-alt */
--toolbar-background: #fcfcfc; /* --theme-toolbar-background */
--toolbar-border: #dde1e4; /* --theme-splitter-color */
--toolbar-button-hover-background: rgba(12, 12, 13, 0.15); /* --theme-toolbarbutton-hover-background */
--toolbar-box-shadow: 0 2px 2px 0 rgba(155, 155, 155, 0.26); /* --rdm-box-shadow */
}
#node-picker-notice-root[overlay] {
pointer-events: auto;
}
#node-picker-notice-toolbar {
display: flex;
align-items: center;
gap: 8px;
padding: 8px 16px;
color: var(--text-color);
box-shadow: var(--toolbar-box-shadow);
background-color: var(--toolbar-background);
border: 1px solid var(--toolbar-border);
border-radius: 2px;
font: var(--highlighter-font-family);
font-size: var(--highlighter-font-size);
user-select: none;
}
#node-picker-notice-info {
font: var(--highlighter-font-family);
font-size: var(--highlighter-font-size);
text-align: center;
}
#node-picker-notice-icon {
width: 16px;
height: 16px;
-moz-context-properties: fill;
fill: currentColor;
background-size: contain;
background-repeat: no-repeat;
}
#node-picker-notice-icon.touch {
}
#node-picker-notice-hide-button {
border: 0px;
border-radius: 2px;
appearance: none;
background-color: var(--toolbar-border);
color: currentColor;
font-size: 1em;
padding-inline: 4px;
}
/* We can't use :hover as it wouldn't work if the page is paused, so we add a specific class for this */
#node-picker-notice-hide-button.hover {
background-color: var(--toolbar-button-hover-background);
}
/* Shapes highlighter */
.shapes-root {
pointer-events: none;
}
.shapes-shape-container {
position: absolute;
overflow: visible;
}
.shapes-polygon,
.shapes-ellipse,
.shapes-rect,
.shapes-bounding-box,
.shapes-rotate-line,
.shapes-quad {
fill: transparent;
stroke: var(--highlighter-guide-color);
shape-rendering: geometricPrecision;
vector-effect: non-scaling-stroke;
}
.shapes-markers {
fill: #fff;
}
.shapes-markers-outline {
fill: var(--highlighter-guide-color);
}
.shapes-marker-hover {
fill: var(--highlighter-guide-color);
}
/* Accessible highlighter */
.accessible-infobar {
min-width: unset;
}
.accessible-infobar-text {
display: grid;
grid-template-areas:
"role name"
"audit audit";
grid-template-columns: min-content 1fr;
}
.accessible-infobar-role {
grid-area: role;
color: #9cdcfe;
}
.accessible-infobar-name {
grid-area: name;
}
.accessible-infobar-audit {
grid-area: audit;
padding-top: 5px;
padding-bottom: 2px;
}
.accessible-bounds {
fill: var(--highlighter-accessibility-bounds-color);
opacity: var(--highlighter-accessibility-bounds-opacity);
}
@media (prefers-reduced-motion) {
.use-simple-highlighters .accessible-bounds {
fill: none;
stroke: var(--highlighter-accessibility-bounds-color);
stroke-width: 3;
}
}
.accessible-infobar-name,
.accessible-infobar-audit {
color: var(--highlighter-infobar-color);
}
.accessible-infobar-audit .accessible-contrast-ratio:empty::before,
.accessible-infobar-audit .accessible-contrast-ratio:empty::after,
.accessible-infobar-name:empty {
display: none;
}
.accessible-infobar-audit .accessible-contrast-ratio::before {
content: "";
height: 8px;
width: 8px;
display: inline-flex;
background-color: var(--accessibility-highlighter-contrast-ratio-color);
box-shadow: 0 0 0 1px var(--grey-40),
4px 3px var(--accessibility-highlighter-contrast-ratio-bg),
4px 3px 0 1px var(--grey-40);
margin-inline-start: 3px;
margin-inline-end: 9px;
}
.accessible-infobar-audit .accessible-contrast-ratio::after {
margin-inline-start: 2px;
}
.accessible-infobar-audit .accessible-contrast-ratio.AA::after,
.accessible-infobar-audit .accessible-contrast-ratio.AAA::after {
color: #90E274;
}
.accessible-infobar-audit .accessible-audit::before,
.accessible-infobar-audit .accessible-contrast-ratio.FAIL::after {
display: inline-block;
width: 12px;
height: 12px;
content: "";
vertical-align: -2px;
background-position: center;
background-repeat: no-repeat;
-moz-context-properties: fill;
}
.accessible-infobar-audit .accessible-contrast-ratio.FAIL:after {
color: #E57180;
margin-inline-start: 3px;
fill: var(--red-40);
}
.accessible-infobar-audit .accessible-contrast-ratio.AA::after {
content: "AA\2713";
}
.accessible-infobar-audit .accessible-contrast-ratio.AAA::after {
content: "AAA\2713";
}
.accessible-infobar-audit .accessible-contrast-ratio-label,
.accessible-infobar-audit .accessible-contrast-ratio-separator::before {
margin-inline-end: 3px;
}
.accessible-infobar-audit .accessible-contrast-ratio-separator::before {
content: "-";
margin-inline-start: 3px;
}
.accessible-infobar-audit .accessible-audit {
display: block;
padding-block-end: 5px;
}
.accessible-infobar-audit .accessible-audit:last-child {
padding-block-end: 0;
}
.accessible-infobar-audit .accessible-audit::before {
margin-inline-end: 4px;
background-image: none;
fill: currentColor;
}
.accessible-infobar-audit .accessible-audit.FAIL::before {
fill: var(--red-40);
}
.accessible-infobar-audit .accessible-audit.WARNING::before {
fill: var(--yellow-60);
}
.accessible-infobar-audit .accessible-audit.BEST_PRACTICES::before {
}
.accessible-infobar-name {
border-inline-start: 1px solid #5a6169;
margin-inline-start: 6px;
padding-inline-start: 6px;
}
/* Tabbing-order highlighter */
.tabbing-order-infobar {
min-width: unset;
}
.tabbing-order .tabbing-order-infobar-container {
font-size:calc(var(--highlighter-font-size) + 2px);
}
.tabbing-order .tabbing-order-bounds {
position: absolute;
display: block;
outline: 2px solid #000;
outline-offset: -2px;
}
.tabbing-order.focused .tabbing-order-bounds {
outline-color: var(--blue-60);
}
.tabbing-order.focused .tabbing-order-infobar {
background-color: var(--blue-60);
}
.tabbing-order.focused .tabbing-order-infobar-text {
text-decoration: underline;
}
.tabbing-order.focused .tabbing-order-infobar:after {
border-top-color: var(--blue-60);
border-bottom-color: var(--blue-60);
}