fb98c10513
While this is mainly a refactoring patch, a few visible effects are expected: - Proton Primary teal is now used correctly in dark mode. I confirmed with UX that we want this. - Various minor elements now may use slightly different colors than before. Things like hover states and borders are now functions of the main colors on the page rather than their own hardcoded colors. While one might be able to spot differences in a side-by-side comparison, the general idea is to capture the same "feeling". Differential Revision: https://phabricator.services.mozilla.com/D125607
161 lines
3.3 KiB
CSS
161 lines
3.3 KiB
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/. */
|
|
|
|
.contentSearchSuggestionTable {
|
|
background-color: hsla(0,0%,100%,.99);
|
|
color: black;
|
|
border: 1px solid hsla(0, 0%, 0%, .2);
|
|
border-top: none;
|
|
box-shadow: 0 5px 10px hsla(0, 0%, 0%, .1);
|
|
position: absolute;
|
|
inset-inline-start: 0;
|
|
z-index: 1001;
|
|
user-select: none;
|
|
cursor: default;
|
|
}
|
|
|
|
.contentSearchSuggestionsList {
|
|
border-bottom: 1px solid hsl(0, 0%, 92%);
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
.contentSearchSuggestionTable,
|
|
.contentSearchSuggestionsList {
|
|
border-spacing: 0;
|
|
overflow: hidden;
|
|
padding: 0;
|
|
margin: 0;
|
|
text-align: start;
|
|
}
|
|
|
|
.contentSearchHeaderRow,
|
|
.contentSearchSuggestionRow {
|
|
margin: 0;
|
|
max-width: inherit;
|
|
padding: 0;
|
|
}
|
|
|
|
.contentSearchHeaderRow > td > img,
|
|
.contentSearchSuggestionRow > td > .historyIcon {
|
|
margin-inline-end: 8px;
|
|
margin-bottom: -3px;
|
|
}
|
|
|
|
.contentSearchSuggestionTable .historyIcon {
|
|
width: 16px;
|
|
height: 16px;
|
|
display: inline-block;
|
|
background-image: url("chrome://browser/skin/history.svg");
|
|
-moz-context-properties: fill;
|
|
fill: graytext;
|
|
}
|
|
|
|
.contentSearchSuggestionRow.selected > td > .historyIcon {
|
|
fill: HighlightText;
|
|
}
|
|
|
|
.contentSearchHeader > img {
|
|
height: 16px;
|
|
width: 16px;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
.contentSearchSuggestionRow.remote > td > .historyIcon {
|
|
visibility: hidden;
|
|
}
|
|
|
|
.contentSearchSuggestionRow.selected {
|
|
background-color: SelectedItem;
|
|
color: SelectedItemText;
|
|
}
|
|
|
|
.contentSearchHeader,
|
|
.contentSearchSuggestionEntry {
|
|
margin: 0;
|
|
max-width: inherit;
|
|
overflow: hidden;
|
|
padding: 4px 10px;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
font-size: 75%;
|
|
}
|
|
|
|
.contentSearchHeader {
|
|
background-color: hsl(0, 0%, 97%);
|
|
color: #666;
|
|
border-bottom: 1px solid hsl(0, 0%, 92%);
|
|
}
|
|
|
|
.contentSearchSuggestionsContainer {
|
|
margin: 0;
|
|
padding: 0;
|
|
border-spacing: 0;
|
|
width: 100%;
|
|
}
|
|
|
|
.contentSearchSearchWithHeaderSearchText {
|
|
white-space: pre;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.contentSearchOneOffItem {
|
|
appearance: none;
|
|
height: 32px;
|
|
margin: 0;
|
|
padding: 0;
|
|
border: none;
|
|
background: none;
|
|
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAWCAYAAAABxvaqAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH3gofECQNNVW2/AAAABBJREFUGFdjOHPmzH8GehEA/KpKg9YTf4AAAAAASUVORK5CYII=');
|
|
background-repeat: no-repeat;
|
|
background-position: right center;
|
|
}
|
|
|
|
.contentSearchOneOffItem:dir(rtl) {
|
|
background-position-x: left;
|
|
}
|
|
|
|
.contentSearchOneOffItem > img {
|
|
width: 16px;
|
|
height: 16px;
|
|
margin-bottom: -2px;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.contentSearchOneOffItem:not(.last-row) {
|
|
border-bottom: 1px solid hsl(0, 0%, 92%);
|
|
}
|
|
|
|
.contentSearchOneOffItem.end-of-row {
|
|
background-image: none;
|
|
}
|
|
|
|
.contentSearchOneOffItem.selected {
|
|
background-color: SelectedItem;
|
|
background-image: none;
|
|
}
|
|
|
|
.contentSearchOneOffsTable {
|
|
width: 100%;
|
|
}
|
|
|
|
.contentSearchSettingsButton {
|
|
margin: 0;
|
|
padding: 0;
|
|
height: 32px;
|
|
border: none;
|
|
border-top: 1px solid hsla(0, 0%, 0%, .08);
|
|
text-align: center;
|
|
width: 100%;
|
|
}
|
|
|
|
.contentSearchSettingsButton.selected {
|
|
background-color: hsl(0, 0%, 90%);
|
|
}
|
|
|
|
.contentSearchSettingsButton:active {
|
|
background-color: hsl(0, 0%, 85%);
|
|
}
|