contentSearchHandoffUI.css (3449B)
1 /* This Source Code Form is subject to the terms of the Mozilla Public 2 * License, v. 2.0. If a copy of the MPL was not distributed with this 3 * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ 4 5 :host { 6 display: flex; 7 width: 100%; 8 --content-search-handoff-ui-background-color: Field; 9 --content-search-handoff-ui-color: FieldText; 10 --content-search-handoff-ui-fill: FieldText; 11 --content-search-handoff-ui-caret-color: FieldText; 12 --content-search-handoff-ui-border-width: 1px; 13 --content-search-handoff-ui-unfocused-border-color: transparent; 14 --content-search-handoff-ui-fakefocus-border-color: SelectedItem; 15 --content-search-handoff-ui-fakefocus-box-shadow-inner: color-mix(in srgb, SelectedItem 25%, transparent); 16 --content-search-handoff-ui-fakefocus-box-shadow-outer: color-mix(in srgb, SelectedItem 25%, transparent); 17 } 18 19 .fake-editable { 20 height: 100%; 21 opacity: 0; 22 position: absolute; 23 inset: 0; 24 } 25 26 .fake-editable:focus { 27 outline: none; 28 caret-color: transparent; 29 } 30 31 .fake-textbox { 32 opacity: 0.54; 33 text-align: start; 34 -webkit-line-clamp: 1; 35 overflow: hidden; 36 margin-inline-start: var(--space-xsmall); 37 38 /** 39 * It's not clear to me why I need to do this, but for some reason I don't 40 * inherit the font-size through the shadow DOM... 41 */ 42 font-size: var(--font-size-root); 43 } 44 45 .search-handoff-button { 46 position: relative; 47 background: var(--content-search-handoff-ui-background-color) var(--newtab-search-icon) 16px center no-repeat; 48 background-size: var(--size-item-medium); 49 padding-inline-start: calc(2 * var(--space-xlarge)); 50 padding-inline-end: var(--space-small); 51 padding-block: 0; 52 width: 100%; 53 box-shadow: var(--box-shadow-level-3); 54 border: var(--content-search-handoff-ui-border-width) solid var(--content-search-handoff-ui-unfocused-border-color); 55 border-radius: var(--border-radius-medium); 56 color: var(--content-search-handoff-ui-color); 57 -moz-context-properties: fill; 58 fill: var(--content-search-handoff-ui-fill); 59 60 &:dir(rtl) { 61 background-position-x: right 16px; 62 } 63 } 64 65 @keyframes caret-animation { 66 to { 67 visibility: hidden; 68 } 69 } 70 71 .fake-caret { 72 /* To replicate the default caret blink rate of 567ms (https://searchfox.org/mozilla-central/source/widget/cocoa/nsLookAndFeel.mm#397): 73 - Multiply the blink time by 2 to cover both the visible and hidden states. 74 - Use steps(2, start) to divide the animation into 2 phases: 75 1. First 567ms (Step 1) → Caret is visible 76 2. Next 567ms (Step 2) → Caret is hidden 77 This gives a sharp ON/OFF effect instead of a smooth transition. */ 78 animation: caret-animation var(--caret-blink-time, 1134ms) steps(2, start) var(--caret-blink-count, infinite); 79 background: var(--content-search-handoff-ui-caret-color); 80 display: none; 81 inset-inline-start: calc(2 * var(--space-xlarge)); 82 width: 1px; 83 /** 84 * We use the negative margin trick here to overlap the same area as the 85 * fake-textbox. 86 */ 87 height: 17px; 88 margin-top: -17px; 89 } 90 91 :host([fakefocus]:not([disabled])) .search-handoff-button { 92 border: var(--content-search-handoff-ui-border-width) solid var(--content-search-handoff-ui-fakefocus-border-color); 93 box-shadow: 94 0 0 0 2px var(--content-search-handoff-ui-fakefocus-box-shadow-inner), 95 0 0 0 4px var(--content-search-handoff-ui-fakefocus-box-shadow-outer); 96 97 .fake-caret { 98 display: block; 99 } 100 } 101 102 :host([disabled]) .search-handoff-button { 103 opacity: 0.5; 104 }