sidebar-tab-row.css (3382B)
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 #fxview-tab-row-secondary-button { 6 display: none; 7 8 :host(:hover) & { 9 display: inline; 10 } 11 } 12 13 .no-action-button-row { 14 grid-column: span 7; 15 } 16 17 :host { 18 display: flex; 19 } 20 21 :host([selected]) { 22 background-color: var(--button-background-color-primary); 23 color: var(--button-text-color-primary); 24 } 25 26 .fxview-tab-row-main { 27 padding-block: 4px; 28 padding-inline: 8px 4px; 29 border-radius: var(--border-radius-medium); 30 gap: 8px; 31 flex: 1; 32 33 &:hover, 34 &:hover:active { 35 background-color: unset; 36 } 37 } 38 39 .fxview-tab-row-button { 40 --button-outer-padding-block: 4px; 41 --button-outer-padding-inline: 4px; 42 --button-size-icon: 24px; 43 --button-min-height: 24px; 44 } 45 46 .attention > #fxview-tab-row-favicon::after { 47 background-image: radial-gradient(circle, var(--attention-dot-color), var(--attention-dot-color) 2px, transparent 2px); 48 /* stylelint-disable-next-line stylelint-plugin-mozilla/use-size-tokens */ 49 height: 4px; 50 width: 100%; 51 inset-block-start: var(--icon-size-medium); 52 } 53 54 .fxview-tab-row-favicon::after { 55 display: block; 56 content: ""; 57 background-size: var(--size-item-xsmall); 58 background-position: center; 59 background-repeat: no-repeat; 60 position: relative; 61 height: var(--size-item-xsmall); 62 width: var(--size-item-xsmall); 63 -moz-context-properties: fill, stroke; 64 fill: currentColor; 65 /* stylelint-disable-next-line stylelint-plugin-mozilla/no-non-semantic-token-usage */ 66 stroke: var(--background-color-box); 67 68 .fxview-tab-row-main.attention > & { 69 background-image: radial-gradient(circle, var(--attention-dot-color), var(--attention-dot-color) 2px, transparent 2px); 70 /* stylelint-disable-next-line stylelint-plugin-mozilla/use-size-tokens */ 71 height: 4px; 72 width: 100%; 73 inset-block-start: var(--icon-size-medium); 74 } 75 } 76 77 .fxview-tab-row-main:is(.muted, .soundplaying, .activemedia-blocked):not(.attention) .fxview-tab-row-favicon::after { 78 /* inset-inline-start set to half of the favicon 79 width to place it horizontally centered */ 80 /* stylelint-disable-next-line stylelint-plugin-mozilla/use-size-tokens */ 81 inset-inline-start: 8px; 82 /* inset-block-start set to display 6px above 83 the top of the favicon */ 84 /* stylelint-disable-next-line stylelint-plugin-mozilla/use-size-tokens */ 85 inset-block-start: -6px; 86 background-color: var(--background-color-box); 87 padding: 1px; 88 border-radius: var(--border-radius-circle); 89 } 90 91 .fxview-tab-row-main.muted .fxview-tab-row-favicon::after { 92 background-image: url("chrome://global/skin/media/audio-muted.svg"); 93 } 94 95 .fxview-tab-row-main.soundplaying .fxview-tab-row-favicon::after { 96 background-image: url("chrome://browser/skin/tabbrowser/tab-audio-playing-small.svg"); 97 } 98 99 .fxview-tab-row-main.activemedia-blocked .fxview-tab-row-favicon::after { 100 background-image: url("chrome://browser/skin/tabbrowser/tab-audio-blocked-small.svg"); 101 } 102 103 .fxview-tab-row-container-indicator { 104 height: var(--size-item-small); 105 width: var(--size-item-small); 106 background-image: var(--identity-icon); 107 /* stylelint-disable-next-line stylelint-plugin-mozilla/use-size-tokens */ 108 background-size: cover; 109 -moz-context-properties: fill; 110 fill: var(--identity-icon-color); 111 }