Update firefox look to photon again
This commit is contained in:
parent
f5e9836bc8
commit
a8817fb8c6
@ -12,6 +12,7 @@
|
||||
- [Project Structure](#project-structure)
|
||||
- [Icon files](#icon-files)
|
||||
- [Meta Info files](#meta-info-files)
|
||||
- [Restrictions](#restrictions)
|
||||
- [Rules](#rules)
|
||||
- [Version](#version)
|
||||
- [Branch](#branch)
|
||||
@ -167,6 +168,27 @@ Path=<Full PATH>
|
||||
- Release(<git tag>): force latest tag update
|
||||
- Git<git hash>: latest commit update
|
||||
|
||||
### Restrictions
|
||||
|
||||
- Cross Platform
|
||||
- Different compatibility issues occur in Win7, Win8, Win10, KDE, Gnome, Mac, etc.
|
||||
- Consider compatibility as much as possible, but use [dedicated media queries](https://github.com/mozilla/gecko-dev/blob/d6188c9ce02efeea309e7177fc14c9eb2f09db37/servo/components/style/gecko/media_features.rs#L906-L930) in special cases
|
||||
- CSS Loading Order
|
||||
- User CSS(`userChrome.css`, `userContent.css`) is usually loaded first.
|
||||
- In many cases, overriding should be prevented with [`important!`](https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity#the_!important_exception)(Anti-pattern in general web), and side effects should also be considered.
|
||||
- DOM structure cannot be modified
|
||||
- It is possible with JS, but there are security and configuration issues, so we should make the most of CSS.
|
||||
- [`::before`](https://developer.mozilla.org/en-US/docs/Web/CSS/::before) and [`::after`](https://developer.mozilla.org/en-US/docs/Web/CSS/::after) can indirectly add CSS elements.
|
||||
- [Shadow DOM](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM)
|
||||
- Firefox actively uses shadow dom internally
|
||||
- To modify, it is often a roundabout approach or impossible to inherit
|
||||
- [XUL](https://en.wikipedia.org/wiki/XUL)
|
||||
- Sometimes written and bound in C++ for performance, like a treeview of bookmarks.
|
||||
- The proper document does not exist, so we have to read the source code and work
|
||||
- Available CSS features are also restricted.
|
||||
- Side Effects
|
||||
- Only CSS modifications can cause bugs that are hard to think of in the general web, such as the [context menu not appearing](https://github.com/black7375/Firefox-UI-Fix/issues/114).
|
||||
|
||||
## Rules
|
||||
|
||||
### Version
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
This is at least a partial credits-file of people that have contributed to the 'Firefox-UI-Fix' project.
|
||||
It is sorted by name.
|
||||
The fields are: name (N), email (E), web-address(W), license(L).
|
||||
The fields are: name (N), email (E), web-address(W), Copyright(C), license(L).
|
||||
Thanks,
|
||||
|
||||
black7375
|
||||
@ -9,70 +9,88 @@
|
||||
|
||||
N: Compact Mode Firefox Css
|
||||
W: https://github.com/Godiesc/compactmodefirefoxcss
|
||||
C: Copyright (c) 2021 Godiesc
|
||||
L: MPL 2.0
|
||||
|
||||
N: EdgeFox
|
||||
W: https://github.com/23Bluemaster23/EdgeFox
|
||||
C: Copyright (c) 2021 23Bluemaster23
|
||||
L: Unspecified License (Copyright holder approved)
|
||||
|
||||
N: EdgeTabSeparater.userChrome.css
|
||||
W: https://gist.github.com/mmis1000/08d8de4bbe70c04423f0b966bcc286b1
|
||||
C: Copyright (c) 2021 Mmis1000 <mmis10002@gmail.com>
|
||||
L: MIT
|
||||
|
||||
N: firefox-csshacks
|
||||
W: https://github.com/MrOtherGuy/firefox-csshacks
|
||||
C: Copyright (c) 2018 MrOtherGuy
|
||||
L: MPL 2.0
|
||||
|
||||
N: Fluent UI System Icons
|
||||
W: https://github.com/microsoft/fluentui-system-icons
|
||||
C: Copyright (c) 2020 Microsoft Corporation
|
||||
L: MIT
|
||||
|
||||
N: gecko-dev
|
||||
W: https://hg.mozilla.org/
|
||||
W: https://hg.mozilla.org/mozilla-central/
|
||||
C: Copyright (c) 1998–2021 The Mozilla Foundation
|
||||
L: MPL 2.0
|
||||
|
||||
N: MaterialFox
|
||||
W: https://github.com/muckSponge/MaterialFox
|
||||
C: Copyright (c) 2018 muckSponge
|
||||
L: MIT
|
||||
|
||||
N: Multi-Account-Containers
|
||||
W: https://github.com/mozilla/multi-account-containers
|
||||
C: Copyright (c) 1998–2021 The Mozilla Foundation
|
||||
L: MPL 2.0
|
||||
|
||||
N: PS-Menu
|
||||
W: https://github.com/chrisseroka/ps-menu
|
||||
C: Copyright (c) 2016 chrisseroka
|
||||
L: MIT
|
||||
|
||||
N: Quantum Nox Firefox Dark Full Theme
|
||||
W: https://github.com/Izheil/Quantum-Nox-Firefox-Dark-Full-Theme
|
||||
C: Copyright (c) 2017 Izheil
|
||||
L: MPL 2.0
|
||||
|
||||
N: quietfox
|
||||
W: https://github.com/coekuss/quietfox
|
||||
C: Copyright (c) 2019 coekuss
|
||||
L: MIT
|
||||
|
||||
N: ShadowFox
|
||||
W: https://github.com/overdodactyl/ShadowFox
|
||||
C: Copyright (c) 2017 overdodactyl
|
||||
L: MIT
|
||||
|
||||
N: SVG Repo
|
||||
E: info@svgrepo.com
|
||||
W: https://www.svgrepo.com
|
||||
C: Copyright (c) 2017 svgrepo.com
|
||||
L: CC0
|
||||
|
||||
N: uc.css.js
|
||||
W: https://github.com/aminomancer/uc.css.js
|
||||
C: Copyright (c) 2019 aminomancer
|
||||
L: CC BY-NC-SA 4.0
|
||||
|
||||
N: userChrome.csshacks
|
||||
W: https://gist.github.com/DCzajkowski/baaf7bc81aae5278d690eaae951a823b
|
||||
C: Copyright (c) 2021 Dariusz Czajkowski
|
||||
L: CC0
|
||||
|
||||
N: userChrome.css
|
||||
W: https://gist.github.com/Dragoner7/ec2319e5038a6b4722d3e692713f9471
|
||||
C: Copyright (c) 2021 Dragoner7
|
||||
L: MPL 2.0
|
||||
|
||||
N: userChrome.org
|
||||
W: https://www.userchrome.org/what-is-userchrome-css.html
|
||||
C: Copyright (c) 2021 Jefferson Scher
|
||||
L: CC BY 4.0
|
||||
|
||||
----------
|
||||
@ -126,9 +144,12 @@ W: https://github.com/Jonta
|
||||
N: mamen
|
||||
W: https://www.mamen.at
|
||||
|
||||
N: Tatsuyuki Ishi
|
||||
E: ishitatsuyuki@gmail.com
|
||||
W: https://github.com/ishitatsuyuki
|
||||
N: MarNicGit
|
||||
W: https://github.com/MarNicGit
|
||||
|
||||
N: ph3b3
|
||||
E: phoebeleong8@gmail.com
|
||||
W: https://phoebe-leong.github.io/
|
||||
|
||||
N: Rahul Ramkumar
|
||||
E: rahulram226@gmail.com
|
||||
@ -149,3 +170,7 @@ W: https://vsxd.com/
|
||||
N: Sylvain
|
||||
E: B00ze64@hotmail.com
|
||||
W: https://github.com/B00ze64
|
||||
|
||||
N: Tatsuyuki Ishi
|
||||
E: ishitatsuyuki@gmail.com
|
||||
W: https://github.com/ishitatsuyuki
|
||||
|
||||
@ -1,3 +1,3 @@
|
||||
[Info]
|
||||
Ver=v4.2.0
|
||||
Branch=proton-style
|
||||
Ver=v4.2.3
|
||||
Branch=photon-style
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
* Lepton (old name: Proton Fix)
|
||||
* Lepton (old name: Proton Fix) - Photon Stlyed
|
||||
:PROPERTIES:
|
||||
:TOC: :include all
|
||||
:END:
|
||||
@ -6,7 +6,7 @@
|
||||
|
||||
*Table of Contents*
|
||||
:CONTENTS:
|
||||
- [[#lepton-old-name-proton-fix][Lepton (old name: Proton Fix)]]
|
||||
- [[#lepton-old-name-proton-fix---photon-stlyed][Lepton (old name: Proton Fix) - Photon Stlyed]]
|
||||
- [[#introduction][Introduction]]
|
||||
- [[#installation-guide][Installation Guide]]
|
||||
- [[#why-proton][WHY Proton?]]
|
||||
@ -23,13 +23,15 @@
|
||||
Proton's [[#why-proton][overall feel is good]], but there were a few things I [[#why-not-proton][didn't like]] and wanted to improve. \\
|
||||
That's why this project was born, and Lepton to denote light theme layer.
|
||||
|
||||
Lepton's photon styled is preserve Photon's feeling while keep [[https://github.com/black7375/Firefox-UI-Fix][Original Lepton]].'s strengths.
|
||||
|
||||
/Disclaimer:/ It works on *Firefox 89* and above!!
|
||||
| *Wiki* | | | |
|
||||
| [[https://github.com/black7375/Firefox-UI-Fix/wiki/Installation-Guide][Installation Guide]] | [[https://github.com/black7375/Firefox-UI-Fix/wiki/Screenshots][Screenshots]] | [[https://github.com/black7375/Firefox-UI-Fix/wiki/Compatibility-Issues-Solution][Compatibility Issues Solution]] | [[https://github.com/black7375/Firefox-UI-Fix/wiki/Tips][Tips]] |
|
||||
|
||||
[[https://user-images.githubusercontent.com/25581533/127980993-5c532856-0c1c-4548-b310-9495df246d16.png]]
|
||||
[[https://user-images.githubusercontent.com/25581533/120091976-41ea4e00-c0ff-11eb-88ca-a204cfcebe72.png]]
|
||||
|
||||
(Lepton's design :arrow_up:)
|
||||
(Lepton's Photon styled design :arrow_up:)
|
||||
|
||||
- *Color*
|
||||
- Default light/dark theme contrast enhancement
|
||||
@ -39,7 +41,7 @@
|
||||
- Windows system theme support
|
||||
- Windows7 compatibility
|
||||
- *Icons*
|
||||
- Panel
|
||||
- Panel: like Photon
|
||||
- Context Menu
|
||||
- Global Menu
|
||||
- Library's open context
|
||||
@ -50,10 +52,15 @@
|
||||
- Density
|
||||
- Others...
|
||||
- *Tab Design*
|
||||
- General:
|
||||
- Connect with toolbar(Buttons like tabs): like Photon
|
||||
- Selected:
|
||||
- Context Line: like Photon
|
||||
- Bottom Rounding: Natural
|
||||
- MultiSelected
|
||||
- Adjust Color: Easily recognizable.
|
||||
- Unselect:
|
||||
- Divide Line: React to hover like chrome
|
||||
- Divide Line: like Photon
|
||||
- Clipped:
|
||||
- Clearer Text: Adjusted clipped gradation
|
||||
- Closed Button: Visible on hover
|
||||
@ -61,7 +68,9 @@
|
||||
- Remove Second Label
|
||||
- Show Favicon: Always show favicon
|
||||
- Container Tab:
|
||||
- Highlight line position: Displayed tab side.
|
||||
- Highlight line position: Displayed under tab.
|
||||
- *Button Design*
|
||||
- New tab: like Photon
|
||||
- *Activity Stream Design*
|
||||
- Search Bar:
|
||||
- Focused Shadow: Same as the accent color
|
||||
@ -107,8 +116,8 @@
|
||||
4. Restart Firefox
|
||||
- Click the =Clear startup cache...= at the top of =about:support=
|
||||
|
||||
If you prefer Connected Tab, see [[https://github.com/black7375/Firefox-UI-Fix][Original Lepton]].\\
|
||||
If you prefer Photon, see [[https://github.com/black7375/Firefox-UI-Fix/tree/photon-style][Lepton's photon-style]].
|
||||
If you prefer Proton(89 or above), see [[https://github.com/black7375/Firefox-UI-Fix][Original Lepton]].\\
|
||||
If you prefer Proton tab shape, see [[https://github.com/black7375/Firefox-UI-Fix/tree/proton-style][Lepton's proton-style]].
|
||||
|
||||
** WHY Proton?
|
||||
I think a lot has improved.
|
||||
@ -137,8 +146,8 @@
|
||||
- :warning: Address bar 3-point menu, screenshot moves to toolbar (can't fix)
|
||||
|
||||
** Padding Comparisons
|
||||
[[https://user-images.githubusercontent.com/25581533/120262626-8c97d180-c289-11eb-87a6-68e285d6d77c.png]]
|
||||
[[https://user-images.githubusercontent.com/25581533/120253257-6ae11f00-c276-11eb-93cf-393f9845f30b.png]]
|
||||
[[https://user-images.githubusercontent.com/25581533/120262929-38412180-c28a-11eb-8680-e278403873e4.png]]
|
||||
[[https://user-images.githubusercontent.com/25581533/120263320-0086a980-c28b-11eb-8b58-acde49dd80ee.png]]
|
||||
[[https://user-images.githubusercontent.com/25581533/118402352-1e33fc00-b659-11eb-89fc-3cb38207fe39.png]]
|
||||
[[https://user-images.githubusercontent.com/25581533/124066951-0eb21c00-da29-11eb-9ac4-c6b82a268c6f.png]]
|
||||
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg stroke-width="1.2" width="16" height="16" preserveAspectRatio="xMidYMid meet" viewBox="0 0 17 16" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg">
|
||||
<path d="M0 17 L0 16 A16 16 0 0 0 16 0 L 18 0 L 18 17 Z" fill="context-fill"></path>
|
||||
<path d="M0 16 A16 16 0 0 0 16 0" stroke="context-stroke" fill="transparent"></path>
|
||||
</svg>
|
||||
<path d="M0 16 A16 16 0 0 0 16 0" stroke="context-stroke" stroke-width="0.5" fill="transparent"></path>
|
||||
</svg>
|
||||
|
||||
|
Before Width: | Height: | Size: 397 B After Width: | Height: | Size: 417 B |
@ -1,5 +1,5 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg transform="scale(-1,1)" stroke-width="1.2" width="16" height="16" preserveAspectRatio="xMidYMid meet" viewBox="0 0 17 16" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg">
|
||||
<path d="M0 17 L0 16 A16 16 0 0 0 16 0 L 18 0 L 18 17 Z" fill="context-fill"></path>
|
||||
<path d="M0 16 A16 16 0 0 0 16 0" stroke="context-stroke" fill="transparent"></path>
|
||||
<path d="M0 16 A16 16 0 0 0 16 0" stroke="context-stroke" stroke-width="0.5" fill="transparent"></path>
|
||||
</svg>
|
||||
|
||||
|
Before Width: | Height: | Size: 422 B After Width: | Height: | Size: 441 B |
@ -368,7 +368,7 @@
|
||||
--card-shadow-hover: var(--card-shadow), 0 0 0 5px var(--card-outline-color);
|
||||
}
|
||||
|
||||
@media (-moz-toolbar-prefers-color-scheme: dark) {
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:host,
|
||||
:root {
|
||||
/* Keep these in sync with layout/base/PresShell.cpp, and plaintext.css */
|
||||
@ -502,7 +502,7 @@
|
||||
--menu-border-color: #cfcfd8;
|
||||
--menuitem-hover-background-color: #e0e0e6;
|
||||
}
|
||||
@media (-moz-toolbar-prefers-color-scheme: dark) {
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
--menu-border-color: rgba(107, 107, 107, 0.3);
|
||||
--menu-color: #fbfbfe;
|
||||
@ -560,7 +560,7 @@
|
||||
/*= Downloads ==============================================================*/
|
||||
@-moz-document url("chrome://mozapps/content/downloads/unknownContentType.xhtml")
|
||||
{
|
||||
@media (-moz-toolbar-prefers-color-scheme: dark) {
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
--in-content-page-background: #42414d;
|
||||
}
|
||||
@ -612,7 +612,7 @@
|
||||
button:-moz-focusring,
|
||||
xul|menulist:-moz-focusring,
|
||||
xul|checkbox:-moz-focusring > .checkbox-check, /* :not([native]) to win specificity over checkbox.css */
|
||||
xul|radio[focused="true"] {
|
||||
xul|radio[focused="true"]:-moz-focusring {
|
||||
box-shadow: none !important;
|
||||
outline: 2px solid var(--in-content-focus-outline-color) !important;
|
||||
outline-offset: 2px !important;
|
||||
@ -890,7 +890,7 @@
|
||||
}
|
||||
|
||||
dropmarker::part(icon) {
|
||||
list-style-image: url(chrome://global/skin/icons/arrow-down.svg) !important;
|
||||
list-style-image: url("chrome://global/skin/icons/arrow-down.svg") !important;
|
||||
-moz-context-properties: fill !important;
|
||||
fill: currentColor !important;
|
||||
}
|
||||
@ -1074,7 +1074,11 @@
|
||||
#downloadsListBox .downloadButton,
|
||||
#downloadsListBox .download-state[exists],
|
||||
#downloadsListBox .download-state[exists] .downloadDetails,
|
||||
#downloadsHistory {
|
||||
#downloadsHistory,
|
||||
#protections-popup-settings-button,
|
||||
#protections-popup-show-report-button,
|
||||
#identity-popup-clear-sitedata-button,
|
||||
#identity-popup-more-info {
|
||||
cursor: pointer !important;
|
||||
}
|
||||
|
||||
@ -1089,6 +1093,9 @@
|
||||
/*= Root - Reduce Padding ==================================================*/
|
||||
:root {
|
||||
/* Tab Bar */
|
||||
--proton-tab-block-margin: 0px !important; /* Original: 4px, Legacy */
|
||||
--tab-block-margin: 0px !important; /* New version of --proton-tab-block-margin */
|
||||
--tab-border-radius: 0px !important; /* Original: 4px */
|
||||
--inline-tab-padding: 6px !important; /* Original: 8px */
|
||||
|
||||
/* Panel */
|
||||
@ -1116,7 +1123,25 @@
|
||||
--arrowpanel-menuitem-padding: 8px !important; /* Original: 8px */
|
||||
}
|
||||
|
||||
/* Fix Tab bar button radious */
|
||||
#TabsToolbar .toolbarbutton-1 > .toolbarbutton-icon,
|
||||
#TabsToolbar .toolbarbutton-1 > .toolbarbutton-text,
|
||||
#TabsToolbar .toolbarbutton-1 > .toolbarbutton-badge-stack,
|
||||
.tab-close-button {
|
||||
--tab-border-radius: 4px !important;
|
||||
}
|
||||
|
||||
/*= Tab Bar - Reduce Width, Show more tabs =================================*/
|
||||
/* for First Tab Space */
|
||||
:root {
|
||||
--space-left-tabbar: 0px; /* If you want drag space, set to 8px */
|
||||
}
|
||||
:root:not([tabsintitlebar]) #tabbrowser-tabs:not([positionpinnedtabs]),
|
||||
:root:is([sizemode="maximized"], [sizemode="fullscreen"]) #tabbrowser-tabs:not([positionpinnedtabs]) {
|
||||
padding-inline-start: var(--space-left-tabbar) !important;
|
||||
}
|
||||
|
||||
/* Titlebar Space */
|
||||
.titlebar-spacer[type="pre-tabs"] {
|
||||
width: 30px !important; /* Original: 40px */
|
||||
}
|
||||
@ -1124,6 +1149,7 @@
|
||||
width: 25px !important; /* Original: 40px */
|
||||
}
|
||||
|
||||
/* Tabbar Buttons */
|
||||
:root {
|
||||
--newtab-button-minus-width-padding: 2px;
|
||||
--newtab-button-width-padding: calc(var(--toolbarbutton-inner-padding) - var(--newtab-button-minus-width-padding));
|
||||
@ -1141,7 +1167,7 @@
|
||||
#tabbrowser-tabs[haspinnedtabs]:not([positionpinnedtabs])
|
||||
> #tabbrowser-arrowscrollbox
|
||||
> .tabbrowser-tab[first-visible-unpinned-tab] {
|
||||
margin-inline-start: 1px !important;
|
||||
margin-inline-start: 0 !important;
|
||||
}
|
||||
|
||||
:root:not([uidensity="touch"]) #tabbrowser-arrowscrollbox {
|
||||
@ -1164,16 +1190,12 @@
|
||||
|
||||
/* Tab - Max Size */
|
||||
.tabbrowser-tab[fadein]:not([pinned]):not([style*="max-width"]) {
|
||||
max-width: 240px !important; /* Original: 225px */
|
||||
max-width: 225px !important;
|
||||
}
|
||||
|
||||
/* neighbouring tabs should "pinch" together */
|
||||
.tabbrowser-tab {
|
||||
padding-inline: 1px !important;
|
||||
}
|
||||
|
||||
.tabbrowser-tab:not([last-visible-tab]) {
|
||||
margin-inline-end: -0.5px !important;
|
||||
padding-inline: 0 !important;
|
||||
}
|
||||
|
||||
/*= Tab Bar - Reduce Height, Show more contents ============================*/
|
||||
@ -1190,15 +1212,26 @@
|
||||
}
|
||||
|
||||
/* Toolbar Height */
|
||||
:root:not([uidensity="touch"]) #TabsToolbar {
|
||||
--toolbarbutton-inner-padding: 9px; /* Original: calc((var(--tab-min-height) - 16px) / 2) = 10px */
|
||||
}
|
||||
|
||||
:root:not([uidensity]) #TabsToolbar {
|
||||
--tab-min-height: 36px !important; /* 38px -> 36px */
|
||||
#TabsToolbar {
|
||||
--tab-min-height: 33px !important;
|
||||
--toolbarbutton-inner-padding: unset !important;
|
||||
}
|
||||
:root[uidensity="compact"] #TabsToolbar {
|
||||
--tab-min-height: 29px !important; /* 36px -> 29px */
|
||||
--tab-min-height: 29px !important;
|
||||
}
|
||||
:root[uidensity="touch"] #TabsToolbar {
|
||||
--tab-min-height: 41px !important;
|
||||
}
|
||||
#tabbrowser-tabs,
|
||||
#tabbrowser-arrowscrollbox,
|
||||
#tabbrowser-tabs[positionpinnedtabs] > #tabbrowser-arrowscrollbox > .tabbrowser-tab[pinned] {
|
||||
min-height: var(--tab-min-height) !important;
|
||||
}
|
||||
|
||||
/* Top Margin */
|
||||
.tab-background,
|
||||
.tab-content {
|
||||
margin-top: 0 !important;
|
||||
}
|
||||
|
||||
/* Scroll Button - Size Fix */
|
||||
@ -1479,7 +1512,46 @@
|
||||
margin: 0 !important;
|
||||
}
|
||||
|
||||
/** Multi Selected Color - More Contrast ************************************/
|
||||
/** Tab Bar - Connect to window *********************************************/
|
||||
.tab-background {
|
||||
border-radius: var(--tab-border-radius) var(--tab-border-radius) 0px 0px !important;
|
||||
margin-bottom: 0px !important;
|
||||
}
|
||||
|
||||
.tab-content {
|
||||
margin-top: var(--tab-block-margin);
|
||||
}
|
||||
|
||||
.tab-stack {
|
||||
margin-top: 0px !important;
|
||||
margin-bottom: 0px !important;
|
||||
}
|
||||
|
||||
/* Remove line at Toolbar's top */
|
||||
#tabbrowser-tabs {
|
||||
z-index: 1 !important;
|
||||
}
|
||||
#tabbrowser-arrowscrollbox[overflowing] .tabbrowser-tab[pinned]:is([visuallyselected], [multiselected]) {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/** Selected Tab - Color like toolbar ***************************************/
|
||||
:root:not(:-moz-lwtheme) {
|
||||
/* Fix for windows's system default theme. Using --toolbar-bgcolor fallback */
|
||||
--tab-selected-bgcolor: unset !important; /* Original: rgb(255,255,255); */
|
||||
}
|
||||
#tabbrowser-tabs:not([movingtab])
|
||||
> #tabbrowser-arrowscrollbox
|
||||
> .tabbrowser-tab
|
||||
> .tab-stack
|
||||
> .tab-background[selected="true"]:-moz-lwtheme {
|
||||
/* Original: linear-gradient(var(--lwt-selected-tab-background-color, transparent), var(--lwt-selected-tab-background-color, transparent)), linear-gradient(var(--toolbar-bgcolor), var(--toolbar-bgcolor)), var(--lwt-header-image, none)
|
||||
*/
|
||||
background-image: linear-gradient(transparent, transparent),
|
||||
linear-gradient(var(--toolbar-bgcolor), var(--toolbar-bgcolor)), var(--lwt-header-image, none) !important;
|
||||
}
|
||||
|
||||
/* Multi Selected Color */
|
||||
#tabbrowser-tabs:not([movingtab])
|
||||
> #tabbrowser-arrowscrollbox
|
||||
> .tabbrowser-tab
|
||||
@ -1499,73 +1571,134 @@
|
||||
opacity: 0.15;
|
||||
}
|
||||
|
||||
/** Selected Tab - Photon like contextline **********************************/
|
||||
:root[lwtheme-mozlightdark] #tabbrowser-tabs {
|
||||
--tab-line-color: rgb(10, 132, 255) !important;
|
||||
}
|
||||
@media (-moz-gtk-csd-available) {
|
||||
:root[lwtheme-mozlightdark]:not(:-moz-lwtheme) #tabbrowser-tabs {
|
||||
--tab-line-color: Highlight !important; /* -moz-accent-color */
|
||||
}
|
||||
}
|
||||
|
||||
.tab-context-line {
|
||||
display: -moz-inline-box !important;
|
||||
height: 2px !important;
|
||||
border-radius: var(--tab-border-radius, 4px) var(--tab-border-radius, 4px) 0 0 !important;
|
||||
}
|
||||
|
||||
.tabbrowser-tab:is([selected], [multiselected]) .tab-context-line {
|
||||
/* Photon like color
|
||||
Default: var(--tab-line-color, rgb(10, 132, 255))
|
||||
Automatic: color-mix(in srgb, var(--button-primary-bgcolor) 80%, transparent) */
|
||||
background-color: var(--tab-line-color, rgb(10, 132, 255)) !important;
|
||||
}
|
||||
|
||||
.tabbrowser-tab:hover:not([selected="true"], [multiselected]) > .tab-stack > .tab-background > .tab-context-line {
|
||||
background-color: rgba(0, 0, 0, 0.2) !important;
|
||||
opacity: 1 !important;
|
||||
transform: none !important;
|
||||
}
|
||||
#TabsToolbar[brighttext]
|
||||
.tabbrowser-tab:hover:not([selected="true"], [multiselected])
|
||||
> .tab-stack
|
||||
> .tab-background
|
||||
> .tab-context-line {
|
||||
background-color: rgba(255, 255, 255, 0.2) !important;
|
||||
}
|
||||
|
||||
/* Prevent identitiy color flashing */
|
||||
.tabbrowser-tab[usercontextid] .tab-context-line {
|
||||
--identity-icon-color: none;
|
||||
}
|
||||
:root:not([customizing="true"]) #TabsToolbar[brighttext] tab[visuallyselected] > stack::before,
|
||||
:root:not([customizing="true"]) #TabsToolbar[brighttext] tab[visuallyselected] > stack::after {
|
||||
/* As Selected Tab - Box Shadow */
|
||||
stroke: var(--toolbar-color) !important;
|
||||
}
|
||||
|
||||
/* Animation */
|
||||
.tabbrowser-tab:not([selected="true"], [multiselected]) .tab-context-line {
|
||||
opacity: 0 !important;
|
||||
transform: scaleX(0) !important;
|
||||
}
|
||||
.tabbrowser-tab:not([selected="true"], [multiselected]) .tab-context-line {
|
||||
transition: transform 250ms var(--animation-easing-function), opacity 250ms var(--animation-easing-function) !important; /* --animation-easing-function: cubic-bezier(.07, .95, 0, 1); */
|
||||
}
|
||||
|
||||
/* Remove side's background color border */
|
||||
#TabsToolbar[brighttext]
|
||||
#tabbrowser-tabs:not([noshadowfortests])
|
||||
.tabbrowser-tab:is([visuallyselected="true"], [multiselected])
|
||||
> .tab-stack
|
||||
> .tab-background:-moz-lwtheme {
|
||||
--tabs-border-color: rgba(0, 0, 0, 0.3) !important;
|
||||
box-shadow: 0 0 1px var(--tabs-border-color) !important; /* Original: 0 0 1px var(--tab-line-color, rgba(128,128,142,0.9)) */
|
||||
}
|
||||
#TabsToolbar:not([brighttext])
|
||||
#tabbrowser-tabs:not([noshadowfortests])
|
||||
.tabbrowser-tab:is([visuallyselected="true"], [multiselected])
|
||||
> .tab-stack
|
||||
> .tab-background {
|
||||
box-shadow: 0 0 1px var(--tabs-border-color), 0 0 4px rgba(128, 128, 142, 0.5) !important; /* Original: 0 0 1px var(--tab-line-color, rgba(128,128,142,0.9)), 0 0 4px rgba(128,128,142,0.5) */
|
||||
}
|
||||
|
||||
/* Container Tab */
|
||||
.tabbrowser-tab[usercontextid] > .tab-stack > .tab-background > .tab-context-line {
|
||||
margin: unset !important;
|
||||
}
|
||||
|
||||
/** Unselected Tab - Divide line ********************************************/
|
||||
#tabbrowser-arrowscrollbox:not([overflowing]) .tabbrowser-tab[first-visible-unpinned-tab] .tab-background::before,
|
||||
.tabbrowser-tab:not([visuallyselected], [multiselected], :hover, :first-child) .tab-background::before,
|
||||
#tabbrowser-arrowscrollbox:not([overflowing])
|
||||
.tabbrowser-tab:not([visuallyselected], [multiselected], :hover)[last-visible-tab]
|
||||
.tab-background::after {
|
||||
/* Box Model */
|
||||
.tabbrowser-tab[first-visible-tab]::before,
|
||||
.tabbrowser-tab::after,
|
||||
#tabbrowser-tabs[movingtab] > #tabbrowser-arrowscrollbox > .tabbrowser-tab[visuallyselected]::before {
|
||||
content: "";
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
|
||||
/* Bar shape */
|
||||
width: 1px;
|
||||
height: 20px;
|
||||
|
||||
/* Bar Color */
|
||||
opacity: var(--tab-separator-opacity);
|
||||
transition: opacity 0.2s var(--animation-easing-function); /* cubic-bezier(.07, .95, 0, 1) */
|
||||
background-color: color-mix(
|
||||
in srgb,
|
||||
currentColor 20%,
|
||||
transparent
|
||||
) !important; /* Replace var(--toolbarseparator-color) - Hard coded for compatibility */
|
||||
}
|
||||
.tabbrowser-tab::before,
|
||||
.tabbrowser-tab::after {
|
||||
--tab-divide-line: 1px solid var(--lwt-background-tab-separator-color, currentColor);
|
||||
border-left: var(--tab-divide-line) !important;
|
||||
margin-block: 5px 4px !important;
|
||||
opacity: 0.3 !important;
|
||||
}
|
||||
.tabbrowser-tab::before {
|
||||
margin-inline-start: -1px !important;
|
||||
}
|
||||
|
||||
.tab-background::before {
|
||||
transform: translateX(-2.5px) translateY(calc(-50% + 1px)) !important;
|
||||
}
|
||||
.tabbrowser-tab[last-visible-tab] .tab-background::after {
|
||||
right: 0;
|
||||
transform: translateX(1.5px) translateY(calc(-50% + 1px)) !important;
|
||||
}
|
||||
#tabs-newtab-button:is(:hover, [open])::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
.tabbrowser-tab[first-visible-tab]::before,
|
||||
:root[tabsintitlebar]:not([extradragspace]) #toolbar-menubar[autohide="true"] + #TabsToolbar .tabbrowser-tab::after,
|
||||
.tabbrowser-tab:hover::after,
|
||||
#tabbrowser-tabs:not([movingtab]) > #tabbrowser-arrowscrollbox > .tabbrowser-tab[beforehovered]::after,
|
||||
.tabbrowser-tab[multiselected]::after,
|
||||
#tabbrowser-tabs:not([movingtab]) > #tabbrowser-arrowscrollbox > .tabbrowser-tab[before-multiselected]::after {
|
||||
margin-top: var(--tabs-top-border-width) !important;
|
||||
margin-bottom: 0 !important;
|
||||
}
|
||||
|
||||
#navigator-toolbox:not([movingtab])
|
||||
.tabbrowser-tab:is([visuallyselected], [multiselected], :hover)
|
||||
+ .tabbrowser-tab:not([visuallyselected])
|
||||
.tab-background::before,
|
||||
#navigator-toolbox:not([movingtab])
|
||||
.tabbrowser-tab[first-visible-unpinned-tab]:is([visuallyselected], [multiselected], :hover)
|
||||
.tab-background::before,
|
||||
#navigator-toolbox:not([movingtab])
|
||||
#tabbrowser-arrowscrollbox[overflowing]
|
||||
tab.tabbrowser-tab[first-visible-unpinned-tab]
|
||||
.tab-background::before {
|
||||
opacity: 0 !important;
|
||||
/* Selected - Hide */
|
||||
.tabbrowser-tab[first-visible-tab][visuallyselected]::before,
|
||||
#tabbrowser-tabs:not([movingtab]) > #tabbrowser-arrowscrollbox > .tabbrowser-tab[beforeselected-visible]::after,
|
||||
#tabbrowser-tabs[movingtab] > #tabbrowser-arrowscrollbox > .tabbrowser-tab[visuallyselected]::before,
|
||||
.tabbrowser-tab[visuallyselected]::after {
|
||||
border-color: var(--tabs-border-color) !important;
|
||||
margin-top: 0 !important;
|
||||
margin-bottom: 0 !important;
|
||||
opacity: 1 !important;
|
||||
}
|
||||
|
||||
/* Latest Tab & New tab margin */
|
||||
#tabbrowser-arrowscrollbox:not([overflowing]) .tabbrowser-tab[last-visible-tab] {
|
||||
margin-inline-end: 1px !important;
|
||||
}
|
||||
/** New tab button - Smaller button *****************************************/
|
||||
#tabs-newtab-button > .toolbarbutton-icon {
|
||||
margin-left: 1px;
|
||||
|
||||
/* New tab button - Smaller button ******************************************/
|
||||
:root:not([uidensity="touch"]) #tabs-newtab-button > .toolbarbutton-icon {
|
||||
--toolbarbutton-inner-padding: calc((var(--tab-min-height) - 16px) / 2 - 1px);
|
||||
}
|
||||
|
||||
:root:not([uidensity="compact"]) #tabs-newtab-button > .toolbarbutton-icon {
|
||||
margin-left: 2px;
|
||||
/* Origianl: calc((var(--tab-min-height) - 16px) / 2) = 10px */
|
||||
--toolbarbutton-inner-padding: 6px;
|
||||
}
|
||||
:root[uidensity="compact"] #tabs-newtab-button > .toolbarbutton-icon {
|
||||
margin-left: 1px;
|
||||
--toolbarbutton-inner-padding: 4px; /* Photon: 6px */
|
||||
}
|
||||
:root[uidensity="touch"] #tabs-newtab-button > .toolbarbutton-icon {
|
||||
--toolbarbutton-inner-padding: 9px; /* Photon: 9px */
|
||||
}
|
||||
|
||||
/** Clipped tabs - Letters cleary *******************************************/
|
||||
@ -1657,9 +1790,10 @@
|
||||
.tab-icon-overlay:not([crashed]),
|
||||
.tab-icon-overlay[pinned][crashed][selected] {
|
||||
/* Position */
|
||||
top: -3.5px !important;
|
||||
top: 0 !important;
|
||||
inset-inline-end: -9px !important;
|
||||
z-index: 1 !important;
|
||||
transform: translateX(-0.5px) translateY(-6px);
|
||||
|
||||
/* Shape */
|
||||
padding: 1.5px !important;
|
||||
@ -1684,7 +1818,7 @@
|
||||
|
||||
/* None exist favicon - Size bigger */
|
||||
.tabbrowser-tab:not([image]) .tab-icon-overlay:not([pinned], [sharing], [crashed]) {
|
||||
top: 0 !important;
|
||||
transform: translateX(-0.5px) translateY(-1px);
|
||||
inset-inline-end: 0 !important;
|
||||
margin-inline-end: 5.5px !important;
|
||||
padding: 0 !important;
|
||||
@ -1701,10 +1835,9 @@
|
||||
|
||||
/* Busy - Overlay Position */
|
||||
.tabbrowser-tab:not([pinned])[busy] .tab-icon-overlay:is([soundplaying], [muted], [activemedia-blocked]) {
|
||||
transform: translateX(-0.5px) translateY(-2.5px);
|
||||
transform: translateX(-0.5px) translateY(-6px);
|
||||
}
|
||||
.tabbrowser-tab:not([image]) .tab-icon-overlay:not([pinned], [sharing], [crashed])[busy] {
|
||||
top: -3.5px !important;
|
||||
inset-inline-end: -9px !important;
|
||||
margin-inline-end: 9.5px !important;
|
||||
padding: 1.5px !important;
|
||||
@ -1771,10 +1904,6 @@
|
||||
}
|
||||
|
||||
/** Container Tab - Color line at icon's bottom *****************************/
|
||||
.tab-context-line {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.tab-content:not([titlechanged])::before {
|
||||
/* Box Model */
|
||||
content: "";
|
||||
@ -1782,7 +1911,7 @@
|
||||
position: absolute !important;
|
||||
|
||||
/* Shape */
|
||||
border-bottom: 2px solid var(--identity-icon-color);
|
||||
border-bottom: 2px solid color-mix(in srgb, var(--identity-icon-color) 75%, transparent);
|
||||
width: 25%;
|
||||
|
||||
/* Animate */
|
||||
@ -1791,6 +1920,7 @@
|
||||
}
|
||||
.tabbrowser-tab[visuallyselected]:not([pinned]) .tab-content::before {
|
||||
width: calc(100% - 30px);
|
||||
border-color: var(--identity-icon-color);
|
||||
}
|
||||
#tabbrowser-tabs[closebuttons="activetab"] .tabbrowser-tab[visuallyselected]:not([pinned]) .tab-content::before {
|
||||
width: calc(100% - 33px);
|
||||
@ -1991,6 +2121,30 @@
|
||||
:root {
|
||||
--arrowpanel-menublank-padding: calc(var(--arrowpanel-menuicon-padding) * 2 + 8px) !important;
|
||||
--arrowpanel-menuimageblank-padding: calc(var(--arrowpanel-menuitem-padding) - 2px) !important;
|
||||
|
||||
/* Blank Menu Left Padding */
|
||||
--arrowpanel-menuimageblank-padding-horizontal: calc(var(--arrowpanel-menublank-padding) - 3px);
|
||||
--arrowpanel-menuitemblank-padding: calc(var(--arrowpanel-menuitem-padding) + 1px);
|
||||
}
|
||||
:root[uidensity="compact"] {
|
||||
--arrowpanel-menuimageblank-padding-horizontal: calc(var(--arrowpanel-menublank-padding) - 5px);
|
||||
}
|
||||
:root[uidensity="touch"] {
|
||||
--arrowpanel-menuimageblank-padding-horizontal: calc(var(--arrowpanel-menublank-padding));
|
||||
}
|
||||
:root {
|
||||
/* Global */
|
||||
--arrowpanel-menuicon-paddingx2: calc(var(--arrowpanel-menuicon-padding) * 2);
|
||||
|
||||
/* General Panel */
|
||||
--arrowpanel-menublank-padding: calc(var(--arrowpanel-menuicon-paddingx2) + 8px) !important;
|
||||
--arrowpanel-menuimageblank-padding: calc(var(--arrowpanel-menuitem-padding) - 2px) !important;
|
||||
|
||||
/* Blank Menu Left Padding */
|
||||
--arrowpanel-menuimageblank-padding-horizontal: calc(
|
||||
var(--arrowpanel-menuicon-paddingx2) + var(--arrowpanel-menuitem-padding)
|
||||
);
|
||||
--arrowpanel-menuitemblank-padding: calc(var(--arrowpanel-menuitem-padding) + 1px);
|
||||
}
|
||||
|
||||
#downloadsHistory .button-text,
|
||||
@ -2085,9 +2239,22 @@
|
||||
background-image: var(--avatar-image-url) !important;
|
||||
}
|
||||
|
||||
#appMenu-new-tab-button2 {
|
||||
list-style-image: url("chrome://browser/skin/new-tab.svg");
|
||||
#appMenu-new-tab-button2, /* Seperate */
|
||||
#appMenu-passwords-button, /* Seperate */
|
||||
#appMenu-extensions-themes-button,
|
||||
#appMenu-save-file-button2, /* Seperate */
|
||||
#appMenu-find-button2,
|
||||
#appMenu-more-button2, /* Seperate */
|
||||
#appMenu-help-button2,
|
||||
#appMenu-quit-button2 /* Seperate */ {
|
||||
padding-inline-start: var(--arrowpanel-menuimageblank-padding-horizontal) !important;
|
||||
padding-top: var(--arrowpanel-menuitemblank-padding) !important;
|
||||
padding-bottom: var(--arrowpanel-menuitemblank-padding) !important;
|
||||
}
|
||||
#appMenu-zoom-controls2 {
|
||||
padding-inline-start: var(--arrowpanel-menuimageblank-padding-horizontal) !important;
|
||||
}
|
||||
|
||||
#appMenu-new-window-button2 {
|
||||
list-style-image: url("chrome://browser/skin/window.svg");
|
||||
}
|
||||
@ -2104,39 +2271,14 @@
|
||||
#appMenu-downloads-button {
|
||||
list-style-image: url("chrome://browser/skin/downloads/downloads.svg");
|
||||
}
|
||||
#appMenu-passwords-button {
|
||||
list-style-image: url("chrome://browser/skin/login.svg");
|
||||
}
|
||||
#appMenu-extensions-themes-button {
|
||||
list-style-image: url("chrome://mozapps/skin/extensions/extension.svg");
|
||||
}
|
||||
|
||||
#appMenu-print-button2 {
|
||||
list-style-image: url("chrome://global/skin/icons/print.svg");
|
||||
}
|
||||
#appMenu-save-file-button2 {
|
||||
list-style-image: url("chrome://browser/skin/save.svg");
|
||||
}
|
||||
#appMenu-find-button2 {
|
||||
list-style-image: url("chrome://global/skin/icons/search-glass.svg");
|
||||
}
|
||||
#appMenu-zoom-controls2::before {
|
||||
content: url("./icons/screenshot.svg");
|
||||
}
|
||||
|
||||
#appMenu-settings-button {
|
||||
list-style-image: url("chrome://global/skin/icons/settings.svg");
|
||||
}
|
||||
#appMenu-more-button2 {
|
||||
list-style-image: url("chrome://browser/skin/ion.svg");
|
||||
}
|
||||
#appMenu-help-button2 {
|
||||
list-style-image: url("chrome://global/skin/icons/help.svg");
|
||||
}
|
||||
|
||||
#appMenu-quit-button2 {
|
||||
list-style-image: url("./icons/quit.svg");
|
||||
}
|
||||
|
||||
/*= Panel - Account ========================================================*/
|
||||
#PanelUI-fxa-menu-connect-device-button .toolbarbutton-icon,
|
||||
@ -2750,7 +2892,8 @@
|
||||
}
|
||||
|
||||
/*= new-tab-button-popup ===================================================*/
|
||||
#new-tab-button-popup > menuitem[command="Browser:OpenAboutContainers"] {
|
||||
#new-tab-button-popup > menuitem[command="Browser:OpenAboutContainers"],
|
||||
.new-tab-popup > menuitem[command="Browser:OpenAboutContainers"] {
|
||||
--menuitem-image: url("chrome://global/skin/icons/settings.svg");
|
||||
}
|
||||
|
||||
@ -3167,8 +3310,7 @@
|
||||
--menuitem-image: url("chrome://browser/skin/bookmark-star-on-tray.svg");
|
||||
}
|
||||
|
||||
menupopup[context="placesContext"] > .openintabs-menuitem,
|
||||
menuitem.openintabs-menuitem.subviewbutton {
|
||||
.openintabs-menuitem {
|
||||
--menuitem-image: url("./icons/movetowindow-16.svg");
|
||||
}
|
||||
|
||||
@ -3322,6 +3464,37 @@
|
||||
--menuitem-image: url("./icons/select-all-on.svg");
|
||||
}
|
||||
|
||||
/*= textbox-contextmenu ====================================================*/
|
||||
/* Browser's Searchbar, Libray's Searchbar, Page Info */
|
||||
.textbox-contextmenu > menuitem[data-l10n-id="text-action-undo"] {
|
||||
--menuitem-image: url("chrome://global/skin/icons/undo.svg");
|
||||
}
|
||||
.textbox-contextmenu > menuitem[data-l10n-id="text-action-redo"] {
|
||||
}
|
||||
|
||||
.textbox-contextmenu > menuitem[data-l10n-id="text-action-cut"] {
|
||||
--menuitem-image: url("chrome://browser/skin/edit-cut.svg");
|
||||
}
|
||||
.textbox-contextmenu > menuitem[data-l10n-id="text-action-copy"] {
|
||||
--menuitem-image: url("chrome://browser/skin/edit-copy.svg");
|
||||
}
|
||||
.textbox-contextmenu > menuitem[data-l10n-id="text-action-paste"] {
|
||||
--menuitem-image: url("chrome://browser/skin/edit-paste.svg");
|
||||
}
|
||||
.textbox-contextmenu > menuitem[data-l10n-id="text-action-delete"] {
|
||||
--menuitem-image: url("chrome://global/skin/icons/delete.svg");
|
||||
}
|
||||
.textbox-contextmenu > menuitem[data-l10n-id="text-action-select-all"] {
|
||||
--menuitem-image: url("./icons/select-all-on.svg");
|
||||
}
|
||||
|
||||
/* Only searchbar */
|
||||
menuitem.searchbar-paste-and-search {
|
||||
}
|
||||
menuitem.searchbar-clear-history {
|
||||
--menuitem-image: url("chrome://browser/skin/forget.svg");
|
||||
}
|
||||
|
||||
/** Global Menu *************************************************************/
|
||||
/*= main-menubar ===========================================================*/
|
||||
#file-menu {
|
||||
@ -3376,13 +3549,13 @@
|
||||
--menuitem-image: url("chrome://browser/skin/save.svg");
|
||||
}
|
||||
#menu_sendLink {
|
||||
--menuitem-image: url(chrome://browser/skin/mail.svg);
|
||||
--menuitem-image: url("chrome://browser/skin/mail.svg");
|
||||
}
|
||||
|
||||
#menu_printPreview {
|
||||
}
|
||||
#menu_print {
|
||||
--menuitem-image: url(chrome://global/skin/icons/print.svg);
|
||||
--menuitem-image: url("chrome://global/skin/icons/print.svg");
|
||||
}
|
||||
|
||||
#menu_importFromAnotherBrowser {
|
||||
@ -3554,7 +3727,8 @@
|
||||
#sync-reauthitem {
|
||||
}
|
||||
|
||||
#webDeveloperMenu {
|
||||
#webDeveloperMenu, /* Legacy */
|
||||
#browserToolsMenu {
|
||||
--menuitem-image: url("chrome://browser/skin/developer.svg");
|
||||
}
|
||||
#menu_pageInfo {
|
||||
|
||||
@ -14,6 +14,9 @@
|
||||
0.5
|
||||
) !important; /* Original: #B5D3FF, Better color-mix(in srgb, #B5D3FF 70%, transparent) */
|
||||
--newtab-focus-border-selected: rgba(0, 221, 255, 0.5) !important; /* Original: #B5D3FF */
|
||||
|
||||
/* For Nightly */
|
||||
--newtab-primary-action-background: var(--newtab-focus-border) !important;
|
||||
}
|
||||
|
||||
/** Activity Stream - Web Site Icon: full size ****************************/
|
||||
@ -37,7 +40,7 @@
|
||||
--newtab-element-hover-color: color-mix(in srgb, currentColor 9%, transparent) !important;
|
||||
}
|
||||
|
||||
@media (-moz-toolbar-prefers-color-scheme: dark) {
|
||||
@media (prefers-color-scheme: dark) {
|
||||
#root {
|
||||
/* Default Dark Mode */
|
||||
--newtab-search-background-color: rgba(66, 65, 77, 1); /* Same as dark theme's --panel-background */
|
||||
@ -70,7 +73,7 @@
|
||||
}
|
||||
|
||||
#contentSearchSettingsButton::before {
|
||||
content: url(chrome://global/skin/icons/settings.svg) !important;
|
||||
content: url("chrome://global/skin/icons/settings.svg") !important;
|
||||
display: -moz-inline-box;
|
||||
|
||||
/* Color */
|
||||
@ -87,12 +90,40 @@
|
||||
#contentSearchSettingsButton {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/*- Fix Color For Nightly ------------------------------------------------*/
|
||||
.contentSearchSuggestionTable,
|
||||
.contentSearchHeaderRow,
|
||||
.contentSearchHeader {
|
||||
color: var(--newtab-text-primary-color) !important;
|
||||
background: var(--newtab-search-background-color) !important;
|
||||
}
|
||||
|
||||
.contentSearchSuggestionTable .contentSearchSuggestionRow.selected,
|
||||
.contentSearchSuggestionTable .contentSearchSettingsButton:hover {
|
||||
color: var(--newtab-text-primary-color) !important;
|
||||
}
|
||||
|
||||
.contentSearchSuggestionTable .contentSearchSuggestionRow.selected,
|
||||
.contentSearchSuggestionTable .contentSearchSettingsButton:hover,
|
||||
.contentSearchSuggestionTable .contentSearchOneOffItem.selected {
|
||||
background: var(--newtab-element-hover-color) !important;
|
||||
}
|
||||
|
||||
.contentSearchSuggestionTable .contentSearchSuggestionRow.selected:active,
|
||||
.contentSearchSuggestionTable .contentSearchOneOffItem:active {
|
||||
background: var(--newtab-element-active-color) !important;
|
||||
}
|
||||
|
||||
.contentSearchSuggestionTable .contentSearchSuggestionRow.selected .historyIcon {
|
||||
fill: var(--newtab-icon-secondary-color) !important;
|
||||
}
|
||||
}
|
||||
|
||||
/** Error Page - Restore illustrations **************************************/
|
||||
@-moz-document url-prefix("about:neterror"),
|
||||
url("about:restartrequired"), url("chrome://browser/content/aboutRestartRequired.xhtml"),
|
||||
url("about:sessionrestore"), url(chrome://browser/content/aboutSessionRestore.xhtml)
|
||||
url("about:sessionrestore"), url("chrome://browser/content/aboutSessionRestore.xhtml")
|
||||
{
|
||||
/* Illustrations Position */
|
||||
#errorPageContainer,
|
||||
@ -153,7 +184,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
@-moz-document url("about:sessionrestore"), url(chrome://browser/content/aboutSessionRestore.xhtml)
|
||||
@-moz-document url("about:sessionrestore"), url("chrome://browser/content/aboutSessionRestore.xhtml")
|
||||
{
|
||||
.description-wrapper {
|
||||
background-image: url("./icons/error-session-restore.svg");
|
||||
@ -303,7 +334,7 @@
|
||||
--card-shadow-hover: var(--card-shadow), 0 0 0 5px var(--card-outline-color);
|
||||
}
|
||||
|
||||
@media (-moz-toolbar-prefers-color-scheme: dark) {
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:host,
|
||||
:root {
|
||||
/* Keep these in sync with layout/base/PresShell.cpp, and plaintext.css */
|
||||
|
||||
@ -11,6 +11,9 @@ user_pref("browser.proton.places-tooltip.enabled", true);
|
||||
// Fill SVG Color
|
||||
user_pref("svg.context-properties.content.enabled", true);
|
||||
|
||||
// CSS Color Mix - 88 Above
|
||||
user_pref("layout.css.color-mix.enabled", true);
|
||||
|
||||
// CSS Blur Filter - 88 Above
|
||||
user_pref("layout.css.backdrop-filter.enabled", true);
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user