tor-urlbar-button.css (2969B)
1 .tor-urlbar-button:not([hidden]) { 2 display: flex; 3 align-items: center; 4 gap: 0.5em; 5 /* stylelint-disable-next-line stylelint-plugin-mozilla/use-border-radius-tokens */ 6 border-radius: var(--urlbar-inner-border-radius); 7 --tor-urlbar-button-inline-padding: 8px; 8 padding-inline: var(--tor-urlbar-button-inline-padding); 9 margin: 0; 10 } 11 12 .tor-urlbar-button > * { 13 flex: 0 0 auto; 14 margin: 0; 15 } 16 17 .tor-urlbar-button:focus-visible { 18 /* This button lies within the urlbar, so if the outline extends beyond the 19 * button's boundary, it will be clipped by the urlbar. 20 * Most button's in the urlbar get around this by using --focus-outline-inset, 21 * but our button has a purple background, which does not contrast well with 22 * the focus outline. 23 * Therefore, we use an offset outline rather than an inset outline, and 24 * compensate by shrinking the button's width and height so that the outline 25 * fits within the non-focused button boundary. Essentially, this has a 26 * similar effect to using an inset outline that matches the color of the 27 * urlbar background, but we keep the rounded corners. */ 28 outline: var(--focus-outline); 29 outline-offset: var(--focus-outline-offset); 30 /* Calculate the difference between the button's border area and the outline 31 * area. */ 32 --tor-urlbar-focus-outline-difference: calc(var(--focus-outline-offset) + var(--focus-outline-width)); 33 /* For the inline direction, we shrink the padding by the difference, and 34 * increase the margin by the same amount so that the button text remains in 35 * the same position. 36 * For the block direction, the height of the button is flexibly sized with 37 * the urlbar height, so we should only need to increase the margin. */ 38 padding-inline: calc(var(--tor-urlbar-button-inline-padding) - var(--tor-urlbar-focus-outline-difference)); 39 margin: var(--tor-urlbar-focus-outline-difference); 40 } 41 42 .tor-urlbar-button:focus-visible > * { 43 /* Negate the margin that would be added on focus to ensure the button does 44 * not grow in height. 45 * Ideally, this should not change anything noticeable, otherwise the text 46 * could be clipped when focused. */ 47 margin-block: calc(-1 * var(--tor-urlbar-focus-outline-difference)); 48 } 49 50 #urlbar[usertyping] .tor-urlbar-button { 51 /* Hide whilst the user is typing in the url bar. */ 52 display: none; 53 } 54 55 /* Make the button look plain like the identity #urlbar-label-box. */ 56 .tor-urlbar-button.tor-urlbar-button-plain { 57 background-color: var(--urlbar-box-bgcolor); 58 color: var(--urlbar-box-text-color); 59 } 60 61 .tor-urlbar-button.tor-urlbar-button-plain:focus-visible { 62 outline-color: var(--focus-outline-color); 63 } 64 65 .tor-urlbar-button.tor-urlbar-button-plain:hover { 66 background-color: var(--urlbar-box-hover-bgcolor); 67 color: var(--urlbar-box-hover-text-color); 68 } 69 70 .tor-urlbar-button.tor-urlbar-button-plain:hover:active { 71 background-color: var(--urlbar-box-active-bgcolor); 72 color: var(--urlbar-box-hover-text-color); 73 }