summaryrefslogtreecommitdiffstats
path: root/browser/themes/shared/urlbarView.css
diff options
context:
space:
mode:
Diffstat (limited to 'browser/themes/shared/urlbarView.css')
-rw-r--r--browser/themes/shared/urlbarView.css44
1 files changed, 44 insertions, 0 deletions
diff --git a/browser/themes/shared/urlbarView.css b/browser/themes/shared/urlbarView.css
index c06342fd98..4362c19d5d 100644
--- a/browser/themes/shared/urlbarView.css
+++ b/browser/themes/shared/urlbarView.css
@@ -52,6 +52,10 @@
--urlbarView-labeled-row-label-top: calc(-1.27em - 2px);
--urlbarView-labeled-tip-margin-top-extra: 8px;
+ --urlbarView-action-button-background-color: light-dark(white, #1C1B22);
+ --urlbarView-action-button-hover-color: light-dark(#5B5B66, var(--buttons-destructive-color));
+ --urlbarView-action-button-selected-color: light-dark(#1C1B22, var(--urlbarView-action-button-background-color));
+
&:-moz-locale-dir(rtl) {
--urlbarView-action-slide-in-distance: -200px;
}
@@ -1027,3 +1031,43 @@
background: var(--urlbarView-highlight-background);
color: var(--urlbarView-highlight-color);
}
+
+.urlbarView-row:has(.urlbarView-actions-container:not(:empty)) {
+ flex-direction: column;
+ align-items: flex-start;
+}
+
+.urlbarView-actions-container {
+ margin-inline-start: calc(var(--urlbarView-item-inline-padding) + var(--urlbarView-favicon-margin-start) + var(--urlbarView-favicon-width) + var(--urlbarView-icon-margin-end));
+ margin-block-end: var(--urlbarView-item-block-padding);
+}
+
+.urlbarView-action-btn {
+ font-size: smaller;
+ color: var(--toolbar-field-focus-color);
+ border-radius: var(--toolbarbutton-border-radius);
+ border: 1px solid transparent;
+ padding: .4em .6em;
+ display: inline-flex;
+ align-items: center;
+ background-color: var(--urlbarView-action-button-background-color);
+ box-shadow: 0 0px 4px rgba(0, 0, 0, 0.23);
+}
+
+.urlbarView-action-btn img {
+ width: 16px;
+ height: 16px;
+ margin-inline-end: .4em;
+ -moz-context-properties: fill, fill-opacity;
+}
+
+.urlbarView-action-btn:hover {
+ color: var(--urlbarView-result-button-hover-color);
+ background-color: var(--urlbarView-action-button-hover-color);
+}
+
+.urlbarView-action-btn[selected] {
+ color: light-dark(var(--urlbarView-result-button-hover-color), var(--toolbar-field-focus-color));
+ background-color: var(--urlbarView-action-button-selected-color);
+ border-color: light-dark(transparent, white);
+}