userChrome.css (8916B)
1 /*=Aurora for Firefox=*/ 2 3 4 /*Colour scheme*/ 5 6 :root { 7 --accent-color: 20, 20, 20; 8 --secondary-accent-color: 137, 60, 245; 9 --third-accent-color: 167, 82, 223; 10 --light-color: 40, 40, 40; 11 --dark-color: 20, 20, 20; 12 --caption-close-color: 136, 81, 168; 13 --caption-min-color: 74, 45, 116; 14 --caption-max-color: 94, 17, 174; 15 --url-bg-color: 20, 20, 20; 16 --active-tab-color: 28, 28, 28; 17 } 18 19 20 /*dark mode*/ 21 22 :root:-moz-lwtheme-brighttext, 23 .sidebar-panel[lwt-sidebar-brighttext], 24 body[lwt-sidebar-brighttext] { 25 --main-bgcolor: var(--dark-color); 26 --transparent-bgcolor: var(--accent-color); 27 } 28 29 30 /*header*/ 31 32 toolbox#navigator-toolbox { 33 border: 0 !important; 34 } 35 36 37 /* TABS BAR*/ 38 39 #titlebar #TabsToolbar { 40 padding: 6px 0px 2px 6px !important; 41 background: rgba(var(--dark-color), 1) !important; 42 } 43 44 .titlebar-spacer[type="pre-tabs"] { 45 /* border: 0 !important; */ 46 display: none; 47 } 48 49 #tabbrowser-tabs:not([movingtab])>.tabbrowser-tab[beforeselected-visible]::after, 50 #tabbrowser-tabs[movingtab]>.tabbrowser-tab[visuallyselected]::before, 51 .tabbrowser-tab[visuallyselected]::after { 52 opacity: 0 !important; 53 } 54 55 .tab-line { 56 height: 0px !important; 57 } 58 59 .tabbrowser-tab { 60 margin-right: 5px !important; 61 } 62 63 .tabbrowser-tab:not([visuallyselected="true"]), 64 .tabbrowser-tab:-moz-lwtheme { 65 color: rgba(var(--secondary-accent-color), 1) !important; 66 } 67 68 tab[selected="true"] .tab-content { 69 color: rgba(var(--secondary-accent-color), 1) !important; 70 } 71 72 tab[selected="true"] .tab-background { 73 background: rgba(var(--light-color), 1) !important; 74 } 75 76 .tabbrowser-tab::after, 77 .tabbrowser-tab::before { 78 border-left: 1 !important; 79 opacity: 1 !important; 80 } 81 82 .tab-close-button { 83 transition: all 0.3s ease !important; 84 border-radius: 7px !important; 85 } 86 87 .tab-close-button:hover { 88 fill-opacity: 1 !important; 89 } 90 91 .tabbrowser-tab>.tab-stack>.tab-background { 92 border-radius: 7px !important; 93 } 94 95 .tabbrowser-tab>.tab-stack>.tab-background:not([selected="true"]) { 96 transition: all 0.3s ease !important; 97 } 98 99 .tabbrowser-tab:hover>.tab-stack>.tab-background:not([selected="true"]) { 100 background-color: rgba(var(--light-color), 0.7) !important; 101 } 102 103 104 /* BOOKMARKS TOOLBAR */ 105 106 #PersonalToolbar { 107 background: rgba(var(--dark-color), 1) !important; 108 color: rgba(var(--secondary-accent-color), 1) !important; 109 padding-bottom: 6px !important; 110 padding-top: 1px !important; 111 } 112 113 toolbarbutton.bookmark-item { 114 transition: all 0.3s ease !important; 115 padding: 3px 5px !important; 116 border-radius: 4px !important; 117 } 118 119 toolbarbutton.bookmark-item .toolbarbutton-icon { 120 fill: rgba(var(--secondary-accent-color), 1) !important; 121 } 122 123 #PlacesToolbar toolbarseparator { 124 -moz-appearance: none !important; 125 width: 1px; 126 margin: 0 8px !important; 127 background-color: rgba(var(--secondary-accent-color), 0.5) !important; 128 padding-inline: 0px !important; 129 } 130 131 132 /* CAPTION BUTTONS */ 133 134 .titlebar-buttonbox { 135 position: relative; 136 margin-right: 0px; 137 margin-top: -10px !important; 138 } 139 140 .titlebar-button { 141 transition: all 0.3s ease !important; 142 padding: 8px 10px !important; 143 background: rgba(var(--dark-color), 1) !important; 144 } 145 146 .titlebar-button.titlebar-close { 147 padding-right: 26px !important; 148 } 149 150 .titlebar-button>.toolbarbutton-icon { 151 transition: all 0.3s ease !important; 152 list-style-image: none; 153 border-radius: 10px; 154 } 155 156 .titlebar-button.titlebar-min>.toolbarbutton-icon { 157 background: rgba(var(--caption-min-color), 1) !important; 158 } 159 160 .titlebar-button.titlebar-max>.toolbarbutton-icon, 161 .titlebar-button.titlebar-restore>.toolbarbutton-icon { 162 background: rgba(var(--caption-max-color), 1) !important; 163 } 164 165 .titlebar-button.titlebar-close>.toolbarbutton-icon { 166 background: rgba(var(--caption-close-color), 1) !important; 167 } 168 169 .titlebar-button:hover>.toolbarbutton-icon { 170 background: rgba(var(--third-accent-color), 1) !important; 171 } 172 173 .titlebar-button.titlebar-min:hover>.toolbarbutton-icon, 174 .titlebar-button.titlebar-max:hover>.toolbarbutton-icon, 175 .titlebar-button.titlebar-restore:hover>.toolbarbutton-icon, 176 .titlebar-button.titlebar-close:hover>.toolbarbutton-icon {} 177 178 179 /*new tab button settings*/ 180 181 toolbar #tabs-newtab-button:not([disabled="true"]):not([checked]):not([open]):not(:active)>.toolbarbutton-icon, 182 toolbar #tabs-newtab-button:not([disabled="true"]):-moz-any([open], [checked], :hover:active)>.toolbarbutton-icon, 183 toolbar #tabs-newtab-button:not([disabled="true"]):-moz-any([open], [checked], :active)>.toolbarbutton-icon { 184 transition: all 0.3s ease !important; 185 fill: rgba(var(--secondary-accent-color), 1) !important; 186 border-radius: 7px !important; 187 background-color: rgba(var(--transparent-bgcolor), 1.5) !important; 188 } 189 190 toolbar #tabs-newtab-button:not([disabled="true"]):not([checked]):not([open]):not(:active):hover>.toolbarbutton-icon { 191 background-color: rgba(var(--light-color), 1) !important; 192 } 193 194 195 /*navbar settings*/ 196 197 toolbar#nav-bar { 198 background: rgba(var(--dark-color), 1) !important; 199 box-shadow: none !important; 200 padding-bottom: 4px !important; 201 } 202 203 toolbar#nav-bar toolbarbutton .toolbarbutton-icon, 204 toolbar#nav-bar toolbarbutton #fxa-avatar-image { 205 transition: all 0.3s ease !important; 206 fill: rgba(var(--secondary-accent-color), 1) !important; 207 } 208 209 #urlbar>#urlbar-background { 210 border-radius: 7px !important; 211 border: 0 !important; 212 background-color: rgba(var(--url-bg-color), 1) !important; 213 } 214 215 #urlbar:not([focused="true"])>#urlbar-background, 216 #urlbar>#urlbar-input-container { 217 border-radius: 7px !important; 218 } 219 220 #PersonalToolbar .toolbarbutton-1:not([disabled="true"]):not([checked]):not([open]):not(:active):hover, 221 .tabbrowser-arrowscrollbox:not([scrolledtostart="true"])::part(scrollbutton-up):hover, 222 .tabbrowser-arrowscrollbox:not([scrolledtoend="true"])::part(scrollbutton-down):hover, 223 .findbar-button:not(:-moz-any([checked="true"], [disabled="true"])):hover, 224 toolbarbutton.bookmark-item:not(.subviewbutton):hover:not([disabled="true"]):not([open]), 225 toolbar .toolbarbutton-1:not([disabled="true"]):not([checked]):not([open]):not(:active):hover>.toolbarbutton-icon, 226 toolbar .toolbarbutton-1:not([disabled="true"]):not([checked]):not([open]):not(:active):hover>.toolbarbutton-text, 227 toolbar .toolbarbutton-1:not([disabled="true"]):not([checked]):not([open]):not(:active):hover>.toolbarbutton-badge-stack { 228 background-color: rgba(var(--transparent-bgcolor), 0.7) !important; 229 } 230 231 #PersonalToolbar .toolbarbutton-1:not([disabled="true"]):-moz-any([open], [checked], :hover:active), 232 .findbar-button:not([disabled="true"]):-moz-any([checked="true"], :hover:active), 233 toolbarbutton.bookmark-item:not(.subviewbutton):hover:active:not([disabled="true"]), 234 toolbarbutton.bookmark-item[open="true"], 235 toolbar .toolbarbutton-1:not([disabled="true"]):-moz-any([open], [checked], :hover:active)>.toolbarbutton-icon, 236 toolbar .toolbarbutton-1:not([disabled="true"]):-moz-any([open], [checked], :hover:active)>.toolbarbutton-text, 237 toolbar .toolbarbutton-1:not([disabled="true"]):-moz-any([open], [checked], :hover:active)>.toolbarbutton-badge-stack { 238 background-color: rgba(var(--transparent-bgcolor), 0.2) !important; 239 } 240 241 :root:not([uidensity="compact"]) #back-button>.toolbarbutton-icon { 242 background-color: transparent !important; 243 } 244 245 .urlbar-input-box { 246 color: rgba(var(--third-accent-color), 1) !important; 247 } 248 249 250 /*Fixes the funky Reload/Stop button*/ 251 252 box.toolbarbutton-animatable-box { 253 margin-top: -2px !important; 254 } 255 256 257 /*search bar settings*/ 258 259 searchbar#searchbar { 260 margin-top: 4px !important; 261 border-radius: 4px !important; 262 border: 0 !important; 263 fill: rgba(var(--secondary-accent-color), 1) !important; 264 background-color: rgba(var(--accent-color), 1) !important; 265 color: rgba(var(--third-accent-color), 1) !important; 266 box-shadow: none !important; 267 } 268 269 270 /*sidebar settings*/ 271 272 #sidebar-box, 273 .sidebar-panel[lwt-sidebar-brighttext] { 274 background-color: rgba(var(--main-bgcolor), 1) !important; 275 } 276 277 #sidebar-header { 278 border-color: rgba(var(--accent-color), 1) !important; 279 } 280 281 .sidebar-splitter { 282 border-color: rgba(var(--accent-color), 1) !important; 283 } 284 285 #sidebar-switcher-target:hover, 286 #sidebar-switcher-target:hover:active, 287 #sidebar-switcher-target.active, 288 #viewButton:hover, 289 #viewButton[open] { 290 background-color: rgba(var(--accent-color), 1) !important; 291 } 292 293 .sidebar-placesTreechildren { 294 color: unset !important; 295 } 296 297 #search-box, 298 .search-box { 299 -moz-appearance: none !important; 300 background-color: rgba(var(--accent-color), 1) !important; 301 border-radius: 4px !important; 302 color: unset !important; 303 } 304 305 .content-container { 306 background-color: rgba(var(--main-bgcolor), 1) !important; 307 color: unset !important; 308 } 309 310 #viewButton { 311 color: unset !important; 312 } 313 314 /*==Extension-alert-fix==*/ 315 #identity-box > .identity-box-button, 316 .tab-secondary-label { 317 display: none !important; 318 } 319