sidebar.css (4895B)
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 @import url("chrome://browser/skin/browser-colors.css"); 6 7 .sidebar-panel { 8 appearance: none; 9 /* Background color comes from the embedder */ 10 background-color: transparent; 11 color: var(--sidebar-text-color); 12 } 13 14 #sidebar-panel-header { 15 justify-content: space-between; 16 padding-inline: var(--space-large); 17 padding-block-start: var(--space-large); 18 19 > h4 { 20 margin-block: var(--space-large); 21 font-weight: var(--heading-font-weight); 22 font-size: 15px; 23 } 24 25 /* stylelint-disable-next-line media-query-no-invalid */ 26 @media not -moz-pref("sidebar.revamp") { 27 display: none; 28 } 29 } 30 31 /* Themed sidebars */ 32 33 .sidebar-panel[lwt-sidebar] { 34 color-scheme: light; 35 scrollbar-color: light-dark(rgba(204, 204, 204, 0.5), rgba(249, 249, 250, 0.4)) light-dark(rgba(230, 230, 235, 0.5), rgba(20, 20, 25, 0.3)); 36 } 37 38 .sidebar-panel[lwt-sidebar="dark"] { 39 color-scheme: dark; 40 } 41 42 .sidebar-panel[lwt-sidebar] .sidebar-placesTreechildren { 43 &::-moz-tree-row(selected) { 44 background-color: light-dark(hsla(0, 0%, 80%, 0.3), rgba(249, 249, 250, 0.1)); 45 } 46 47 &::-moz-tree-image(selected), 48 &::-moz-tree-twisty(selected), 49 &::-moz-tree-cell-text(selected) { 50 color: var(--sidebar-text-color); 51 } 52 } 53 54 .sidebar-panel[lwt-sidebar-highlight] .sidebar-placesTreechildren { 55 &::-moz-tree-row(selected, focus) { 56 background-color: var(--lwt-sidebar-highlight-background-color); 57 } 58 59 &::-moz-tree-image(selected, focus), 60 &::-moz-tree-twisty(selected, focus), 61 &::-moz-tree-cell-text(selected, focus) { 62 color: var(--lwt-sidebar-highlight-text-color, var(--sidebar-text-color)); 63 } 64 } 65 66 /* Sidebar tree */ 67 68 .sidebar-placesTree { 69 appearance: none; 70 background-color: transparent; 71 color: inherit; 72 border: 0; 73 margin: 0; 74 } 75 76 /* View button */ 77 78 #viewButton { 79 appearance: none; 80 border-radius: var(--border-radius-small); 81 padding: 2px 4px; 82 color: inherit; 83 } 84 85 #viewButton:hover { 86 /* Matches --toolbarbutton-hover-background: */ 87 background-color: color-mix(in srgb, currentColor 17%, transparent); 88 } 89 90 #viewButton[open] { 91 /* Matches --toolbarbutton-active-background: */ 92 background-color: color-mix(in srgb, currentColor 30%, transparent); 93 } 94 95 #viewButton:focus-visible { 96 outline: var(--focus-outline); 97 } 98 99 #viewButton > .button-box > .button-menu-dropmarker { 100 appearance: none; 101 display: flex; 102 content: url("chrome://global/skin/icons/arrow-down-12.svg"); 103 -moz-context-properties: fill; 104 fill: currentColor; 105 } 106 107 #sidebar-search-container { 108 padding: var(--space-medium); 109 } 110 111 #search-box { 112 flex: 1; 113 } 114 115 @media (-moz-platform: windows) { 116 :root[uidensity="touch"] .sidebar-placesTreechildren::-moz-tree-row { 117 min-height: 32px; 118 } 119 120 .sidebar-placesTreechildren::-moz-tree-cell, 121 .sidebar-placesTreechildren::-moz-tree-twisty { 122 padding: 0 4px; 123 } 124 125 .sidebar-placesTreechildren::-moz-tree-cell(leaf), 126 .sidebar-placesTreechildren::-moz-tree-image(leaf) { 127 cursor: pointer; 128 } 129 130 .sidebar-placesTreechildren::-moz-tree-cell-text(leaf, hover) { 131 cursor: pointer; 132 text-decoration: underline; 133 } 134 135 .sidebar-placesTreechildren::-moz-tree-cell(separator) { 136 cursor: default; 137 } 138 139 @media not (prefers-contrast) { 140 .sidebar-placesTreechildren::-moz-tree-cell-text(leaf, hover) { 141 text-decoration: none; 142 } 143 } 144 145 /* Default button vert. margins are 1px/2px, and this can cause misalignment */ 146 #viewButton { 147 margin: 0; 148 margin-inline-start: 4px; 149 border-radius: var(--border-radius-xsmall); 150 } 151 } 152 153 @media (-moz-platform: linux) { 154 #sidebar-search-container { 155 padding: 8px; 156 } 157 158 #viewButton { 159 margin: 1px 0; 160 margin-inline-start: 4px; 161 } 162 163 :root[uidensity="touch"] .sidebar-placesTreechildren::-moz-tree-row { 164 min-height: 32px; 165 } 166 167 .sidebar-placesTreechildren::-moz-tree-cell(leaf), 168 .sidebar-placesTreechildren::-moz-tree-image(leaf) { 169 cursor: pointer; 170 } 171 172 .sidebar-placesTreechildren::-moz-tree-cell-text(leaf, hover) { 173 cursor: pointer; 174 text-decoration: underline; 175 } 176 177 .sidebar-placesTreechildren::-moz-tree-cell(separator) { 178 cursor: default; 179 } 180 } 181 182 @media (-moz-platform: macos) { 183 .sidebar-placesTree { 184 margin: 0; 185 /* Default font size is 11px on mac, so this is 12px */ 186 font-size: 1.0909rem; 187 } 188 189 :root[uidensity="touch"] .sidebar-placesTreechildren::-moz-tree-row { 190 min-height: 32px; 191 } 192 193 .sidebar-placesTreechildren::-moz-tree-separator { 194 border-top: 1px solid #505d6d; 195 margin: 0 10px; 196 } 197 198 .sidebar-placesTreechildren::-moz-tree-cell-text { 199 margin-inline-end: 6px; 200 } 201 202 #viewButton { 203 margin: 4px 0; 204 margin-inline-end: 4px; 205 /* Default font size is 11px on mac, so this is 12px */ 206 font-size: 1.0909rem; 207 } 208 }