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
/* This is the main stylesheet in the unified-toolbar-customization-pane shadowRoot. */
.search-button-icon {
content: var(--icon-search);
}
.clear-button-icon {
content: var(--icon-clear);
}
.palette-search {
display: block;
margin: 12px 0;
max-width: 50ch;
height: 2em;
width: 100%;
align-self: center;
}
[is="customization-target"],
[is="customization-palette"] {
display: flex;
list-style-type: none;
margin: 0;
padding: 0;
flex-shrink: 0;
&:focus-visible {
outline: var(--focus-outline);
outline-color: transparent;
}
}
.toolbar-target {
/* TODO this should match actual titlebar dimensions */
background: var(--layout-background-3);
border-radius: 6px;
padding-inline: 9px;
padding-block: var(--unified-toolbar-padding);
margin: 1rem;
max-width: 100vw;
border: 1px solid var(--layout-border-0);
gap: 6px;
min-height: calc(1rem + 3 * var(--button-padding));
& .button.unified-toolbar-button {
margin-block: 0;
}
& .spacer {
color: color-mix(in srgb, var(--layout-color-1) 50%, transparent);
background-image: linear-gradient(to left, currentColor 0%, currentColor 50%, transparent 50%, transparent 100%);
background-size: 9px 1px;
background-position: 5px center;
background-repeat: repeat-x;
position: relative;
height: 100%;
-moz-context-properties: stroke;
stroke: currentColor;
&::before,
&::after {
content: '';
width: 16px;
position: absolute;
height: 100%;
background-repeat: no-repeat;
background-position-y: center;
}
&::before {
background-image: var(--icon-nav-left);
left: -5px;
}
&::after {
background-image: var(--icon-nav-right);
right: -5px;
}
}
& .throbber .throbber-icon {
visibility: visible;
}
/* buttons are disabled in the preview, but we want them to look active. */
& .unified-toolbar-button[disabled] {
color: inherit;
opacity: 1;
}
}
[is="customization-target"] {
& .collapsed {
display: none;
}
& [is="customizable-element"] {
& .live-content {
pointer-events: none;
}
& .preview {
display: none;
}
}
}
.customization-palettes {
overflow: auto;
}
[is="customization-palette"] {
flex-wrap: wrap;
gap: 1rem;
margin: 1rem;
&:not(:last-of-type) {
margin-block-end: 2.5rem;
}
& [is="customizable-element"] {
width: 96px;
height: calc(25px + 2.4rem); /* icon: 16px, gap: 9px, 2.4rem = ~2lh */
background: var(--layout-background-3);
padding: 9px;
border-radius: 6px;
overflow: hidden;
& .live-content {
display: none;
}
}
}
[is="customizable-element"] {
margin: 0;
padding: 0;
}
[is="customization-target"]:focus-within [is="customizable-element"][aria-selected="true"],
[is="customization-palette"]:focus-within [is="customizable-element"][aria-selected="true"] {
outline: var(--focus-outline);
outline-offset: var(--focus-outline-offset);
}
h2 {
margin-inline: 1rem;
user-select: none;
}
.preview {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
overflow: hidden;
gap: 9px;
-moz-context-properties: fill, stroke;
fill: color-mix(in srgb, currentColor 20%, transparent);
stroke: currentColor;
}
.preview-icon {
height: 16px;
width: 16px;
object-fit: contain;
pointer-events: none;
}
.preview-label {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
overflow-wrap: break-word;
text-overflow: ellipsis;
user-select: none;
padding-inline: 3px;
max-width: 100%;
}
/* Drag and drop state styling */
.drop-before {
border-inline-start: 1px solid currentColor;
}
.drop-after {
border-inline-end: 1px solid currentColor;
}
.dragging {
visibility: hidden;
}