diff --git a/.gitattributes b/.gitattributes index 498a943..043a2c5 100644 --- a/.gitattributes +++ b/.gitattributes @@ -2,4 +2,5 @@ /.gitignore export-ignore /.github export-ignore /CODE_OF_CONDUCT.md export-ignore +/CONTRIBUTING.md export-ignore /README.org export-ignore diff --git a/.github/ISSUE_TEMPLATE/bug_report.md b/.github/ISSUE_TEMPLATE/bug_report.md index 9a6637a..d6f9957 100644 --- a/.github/ISSUE_TEMPLATE/bug_report.md +++ b/.github/ISSUE_TEMPLATE/bug_report.md @@ -21,6 +21,7 @@ Check like `- [x]`. - Distribution - [ ] [Original Lepton](https://github.com/black7375/Firefox-UI-Fix) - [ ] [Lepton's photon style](https://github.com/black7375/Firefox-UI-Fix/tree/photon-style) + - [ ] [Lepton's proton style](https://github.com/black7375/Firefox-UI-Fix/tree/proton-style) - Firefox Version: [write from `about:support` - `version`] - OS: - [ ] Linux diff --git a/.github/pull_request_template.md b/.github/pull_request_template.md new file mode 100644 index 0000000..21a1613 --- /dev/null +++ b/.github/pull_request_template.md @@ -0,0 +1,31 @@ +--- +name: Pull Request Template +about: Pull Request +title: '' +assignees: '' + +--- + +**Describe the PR** +A clear and concise description of what the PR is. + +**Related Issue** + +**Screenshots** +If applicable, add screenshots to help explain your commit. + +**Environment (please complete the following information):** +Check like `- [x]`. + + - PR Type + - `Add:` Add feature or enhanced. + - `Fix:` Bug fix or change default values. + - `Clean:` Refactoring. + - `Doc:` Update docs. + - Distribution + - [ ] [Original Lepton](https://github.com/black7375/Firefox-UI-Fix) + - [ ] [Lepton's photon style](https://github.com/black7375/Firefox-UI-Fix/tree/photon-style) + - [ ] [Lepton's proton style](https://github.com/black7375/Firefox-UI-Fix/tree/proton-style) + +**Additional context** +Add any other context about the commit here. diff --git a/.github/workflows/release.yml b/.github/workflows/release.yml index def15e6..7ddc0fd 100644 --- a/.github/workflows/release.yml +++ b/.github/workflows/release.yml @@ -27,7 +27,7 @@ jobs: BRANCH=${{ matrix.branch }} TAGVER=${GITHUB_REF#refs/*/} - echo -e "Ver=${TAGVER}\nBranch=${BRANCH}" > LEPTON + echo -e "\[Info\]\nVer=${TAGVER}\nBranch=${BRANCH}" > LEPTON - name: Release Structure run: | diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md new file mode 100644 index 0000000..ce4fa31 --- /dev/null +++ b/CONTRIBUTING.md @@ -0,0 +1,181 @@ +# Contributing + + +**Table of Contents** + +- [Introduce](#introduce) + - [Code of Conduct](#code-of-conduct) + - [We Develop with Github](#we-develop-with-github) + - [Environment](#environment) + - [Your First Contribution](#your-first-contribution) + - [Contribution Targets](#contribution-targets) +- [Rules](#rules) + - [Version](#version) + - [Branch](#branch) + - [Issue](#issue) + - [Coding style](#coding-style) + - [Commit](#commit) + - [Commit Message](#commit-message) + - [Pull request](#pull-request) + - [License](#license) + - [References](#references) + + + +## Introduce + +I'm really glad you're reading this, because we need volunteer developers to help this project come to fruition. + +Please note we have a code of conduct, please follow it in all your interactions with the project. + +### Code of Conduct + +Refer to [CODE\_OF\_CONDUCT.md](https://github.com/black7375/Firefox-UI-Fix/blob/master/CODE_OF_CONDUCT.md). + +### We Develop with Github + +We use [github](https://github.com/black7375/Firefox-UI-Fix) to host code, to track [issues](https://github.com/black7375/Firefox-UI-Fix/issues) and feature requests, as well as accept [pull requests](https://github.com/black7375/Firefox-UI-Fix/pulls). + +After feedback has been given we expect responses within two weeks. After two weeks we may close the issue and pull request if it isn't showing any activity. + +### Environment + +You can configure it as follows: +```shell +## clone repository +git clone https://github.com/black7375/Firefox-UI-Fix.git +cd ./Firefox-UI-Fix + +## install dependencies +git checkout +``` + +### Your First Contribution + +**Working on your first Pull Request?** You can learn how from this *free* series [How to Contribute to an Open Source Project on GitHub](https://egghead.io/series/how-to-contribute-to-an-open-source-project-on-github) + +The following documents may be helpful: +- [Roadmap](https://github.com/black7375/Firefox-UI-Fix/issues/2) +- [Each Versions Plan](https://github.com/black7375/Firefox-UI-Fix/milestones) +- [Wiki:Compatibility Issues Solution](https://github.com/black7375/Firefox-UI-Fix/wiki/Compatibility-Issues-Solution) +- [Wiki:Tips](https://github.com/black7375/Firefox-UI-Fix/wiki/Tips) + +Live Debugging: +- [Browser Toolbox](https://developer.mozilla.org/en-US/docs/Tools/Browser_Toolbox) +- [Style Editor](https://developer.mozilla.org/en-US/docs/Tools/Style_Editor) + +Firefox Source Code: +- [Github](https://github.com/mozilla/gecko-dev) +- [Searchfox](https://searchfox.org/) +- [Firefox Source Docs](https://firefox-source-docs.mozilla.org/) + +Test for None mac users: +- [Docker-OSX](https://github.com/sickcodes/Docker-OSX) + +### Contribution Targets + +We love your input! We want to make contributing to this project as easy and transparent as possible, whether it's: + +**Promotions** +- Introduce project + - Video (Recommend!!, We need it) + - Blog + - SNS + - Reddit, Hackernews..etc +- Sample + - [Producthunt](https://www.producthunt.com/posts/firefox-ui-fix-proton)([#43](https://github.com/black7375/Firefox-UI-Fix/issues/43)) + - [Youtube](https://www.youtube.com/watch?v=ECta0icNMgY) + +**Docs** +- Fix typos, alignments. +- Correct awkward sentences. +- Improve document readability. + +**Issues** +- Report a bug. +- Discussing the current state of the code. +- Tell us about related or relevant projects and documents. +- Help other users issue. +- Proposing others.. + +**Codes** +- New Features. +- Bug fixes. +- Improved compatibility or accessibility. +- Refactoring. + +## Rules + +### Version + +Milestone, The versioning scheme we use is [SemVer](https://semver.org/). (Maintainer decides, do not pull request.) + +We will release the feature as soon as it is complete, but the cycle should be 2-4 weeks. +Rapid releases. + +### Branch + +Stable: Only bugfix, Documentation. +- `master`: Common bugfix, documentation. +- `photon-style`: Bugfix, documentation specified in `photon-style`. +- `proton-sryle`: Bugfix, documentation specified in `proton-style`. + +Development: New Features. +- `dev`: Common new features. +- `photon-style-dev`: New features specified in `photon-style`. +- `proton-style-dev`: New features specified in `proton-style`. + +### Issue + +- **Versions:** +- Make sure you’re on the latest version. +- Try older versions. +- Try switching up dependency versions. +- **Search:** Search the project’s [issues](https://github.com/black7375/Firefox-UI-Fix/issues) to make sure it's not a known issue. + +### Coding style + +- **Indent:** 2 spaces for indentation rather than tabs. +- **Columns:** Fit `80`~`100` columns as much as possible. + +### Commit + +- **Meaningfully:**: It doesn't make meaningless commits. +- **One per task:** It's difficult to distinguish when various tasks are mixed. +- **Often:** Codes may corrupt during large changes. + +### Commit Message + +For intuitive recognition, I [put a **prefix**](https://github.com/black7375/Firefox-UI-Fix/commits/master). +- `Add:` Add feature or enhanced. +- `Fix:` Bug fix or change default values. +- `Clean:` Refactoring. +- `Doc:` Update docs. + +### Pull request + +- **Branch:** Check the [Branch](#branch) section and PR to the correct branch. +- **Issue:** We recommend that you open the issue first to discuss the changes with the owner of this repository. + +### License + +**Any contributions you make will be under the MPL 2.0 Software License** + +In short, when you submit code changes, your submissions are understood to be under the same [MPL 2.0 License](https://choosealicense.com/licenses/mpl-2.0/) that covers the project. +Feel free to contact the maintainers if that's a concern. + +**Reference specification** + +Even if you copy the code snippet, it is recommended that you leave a link. + +**FAQ** + +If you have any questions about other licenses, please see [Moailla's MPL 2.0 FAQ](https://www.mozilla.org/en-US/MPL/2.0/FAQ/). + + +## References + +- [Good-CONTRIBUTING.md-template](https://gist.github.com/PurpleBooth/b24679402957c63ec426) +- [Contributing to Transcriptase](https://gist.github.com/briandk/3d2e8b3ec8daf5a27a62) +- [contributing-template](https://github.com/nayafia/contributing-template/blob/master/CONTRIBUTING-template.md) +- [Contributing to Open Source Projects](https://www.contribution-guide.org/) diff --git a/CREDITS b/CREDITS index 23500ed..bfe8a5c 100644 --- a/CREDITS +++ b/CREDITS @@ -38,10 +38,22 @@ N: Multi-Account-Containers W: https://github.com/mozilla/multi-account-containers L: MPL 2.0 +N: PS-Menu +W: https://github.com/chrisseroka/ps-menu +L: MIT + +N: Quantum Nox Firefox Dark Full Theme +W: https://github.com/Izheil/Quantum-Nox-Firefox-Dark-Full-Theme +L: MPL 2.0 + N: quietfox W: https://github.com/coekuss/quietfox L: MIT +N: ShadowFox +W: https://github.com/overdodactyl/ShadowFox +L: MIT + N: SVG Repo E: info@svgrepo.com W: https://www.svgrepo.com @@ -84,6 +96,9 @@ N: Burak Yigit Kaya E: ben@byk.im W: https://byk.im/ +N: James Upjohn +E: jammehcow@jammehcow.co.nz + N: mamen W: https://www.mamen.at @@ -98,5 +113,9 @@ W: https://github.com/Nyubis N: SanderTheDragon E: sanderthedragon@zoho.com +N: sean z +E: ean@vsxd.com +W: https://vsxd.com/ + N: Sylvain E: B00ze64@hotmail.com diff --git a/LEPTON b/LEPTON index 5a9e5a4..91c99bd 100644 --- a/LEPTON +++ b/LEPTON @@ -1 +1,2 @@ +[Info] Branch=photon-style diff --git a/README.org b/README.org index 48a6837..33032fd 100644 --- a/README.org +++ b/README.org @@ -34,6 +34,10 @@ (Lepton's Photon styled design :arrow_up:) - *Color* + - Default light/dark theme constrast enhancement + - Colorful context menu + - More dark mode support + - GTK system theme support - Windows system theme support - Windows7 compatibility - *Icons* @@ -44,6 +48,7 @@ - Panel - Menu - Density + - Others... - *Tab Design* - General: - Connect with toolbar(Buttons like tabs): like Photon @@ -77,10 +82,15 @@ *Script Installation(experimental)* Linux, mac users: - #+BEGIN_SRC + #+BEGIN_SRC bash bash -c "$(curl -fsSL https://raw.githubusercontent.com/black7375/Firefox-UI-Fix/master/install.sh)" #+END_SRC + Windows users: Run powershell as administrator + #+BEGIN_SRC powershell + Powershell -c "iwr https://raw.githubusercontent.com/black7375/Firefox-UI-Fix/master/install.ps1 -useb | iex" + #+END_SRC + *Menual Inatallation* You can see the [[https://github.com/black7375/Firefox-UI-Fix/wiki/Installation-Guide][installation guide]] with screenshots on the wiki. diff --git a/install.ps1 b/install.ps1 new file mode 100644 index 0000000..8cf1744 --- /dev/null +++ b/install.ps1 @@ -0,0 +1,794 @@ +<# + +.SYNOPSIS +Installer for Lepton + +.DESCRIPTION +Installs Lepton onto selected Firefox profiles + +.INPUTS +TODO: input directories for installation? +Would need to discuss a non-interactive install system + +.OUTPUTS +TODO: output directories that Lepton has been installed to? + +.PARAMETER u +Specifies whether to update a current installation +Defaults to false + +.PARAMETER f +Specifies a custom path to look for Firefox profiles in + +.PARAMETER p +Specifies a custom name to use when creating a profile + +.PARAMETER h +Shows this help message + +.PARAMETER ? +Shows this help message + +.PARAMETER WhatIf +Runs the installer without actioning any file copies/moves +Equivelant to a dry-run + +.EXAMPLE +PS> .\Install.ps1 -u -f C:\Users\someone\ff-profiles +Updates current installations in the profile directory 'C:\Users\someone\ff-profiles' + +.LINK +https://github.com/black7375/Firefox-UI-Fix#readme + +#> + +[CmdletBinding( + SupportsShouldProcess = $true, + PositionalBinding = $false +)] + +param( + [Alias("u")] + [Switch]$updateMode, + [Alias("f")] + [string]$profileDir, + [Alias("p")] + [string]$profileName, + [Alias("h")] + [Switch]$help = $false +) + +#** Helper Utils *************************************************************** +#== Message ==================================================================== +function Lepton-ErrorMessage() { + Write-Error "FAILED: ${args}" + exit -1 +} + +function Lepton-OKMessage() { + $local:SIZE = 50 + $local:FILLED = "" + for ($i = 0; $i -le ($SIZE - 2); $i++) { + $FILLED += "." + } + $FILLED += "OK" + + $local:message = "${args}" + Write-Host ${message}(${FILLED}.Substring(${message}.Length)) +} + +$PSMinSupportedVersion = 2 +function Verify-PowerShellVersion { + Write-Host -NoNewline "Checking PowerShell version... " + $PSVersion = [int](Select-Object -Property Major -First 1 -ExpandProperty Major -InputObject $PSVersionTable.PSVersion) + + Write-Host "[$PSVersion]" + if ($PSVersion -lt $PSMinSupportedVersion) { + Write-Error -Category NotInstalled "You need a minimum PowerShell version of [$PSMinSupportedVersion] to use this installer" + exit -1 + } +} + +#== Required Tools ============================================================= +function Install-Choco() { + # https://chocolatey.org/install + Set-ExecutionPolicy Bypass -Scope Process -Force + [System.Net.ServicePointManager]::SecurityProtocol = [System.Net.ServicePointManager]::SecurityProtocol -bor 3072 + iex ((New-Object System.Net.WebClient).DownloadString('https://chocolatey.org/install.ps1')) +} + +function Check-Git() { + if( -Not (Get-Command git) ) { + if ( -Not (Get-Command choco)) { + Install-Choco + } + choco install git -y + } + + Lepton-OKMessage "Required - git" +} + +#== PATH / File ================================================================ +$currentDir = (Get-Location).path + +function Filter-Path() { + Param ( + [Parameter(Mandatory=$true, Position=0)] + [string[]] $pathList, + [Parameter(Position=1)] + [string] $option = "Any" + ) + + return $pathList.Where({ Test-Path -Path "$_" -PathType "${option}" }) +} + +function Copy-Auto() { + Param ( + [Parameter(Mandatory=$true, Position=0)] + [string] $file, + [Parameter(Mandatory=$true, Position=1)] + [string] $target + ) + + if ( "${file}" -eq "${target}" ) { + Write-Host "'${file}' and ${target} are same file" + return 0 + } + + if ( Test-Path -Path "${target}" ) { + Write-Host "${target} alreay exist." + Write-Host "Now Backup.." + Copy-Auto "${target}" "${target}.bak" + Write-Host "" + } + + Copy-Item -Path "${file}" -Destination "${target}" -Force +} + +function Move-Auto() { + Param ( + [Parameter(Mandatory=$true, Position=0)] + [string] $file, + [Parameter(Mandatory=$true, Position=1)] + [string] $target + ) + + if ( "${file}" -eq "${target}" ) { + Write-Host "'${file}' and ${target} are same file" + return 0 + } + + if ( Test-Path -Path "${target}" ) { + Write-Host "${target} alreay exist." + Write-Host "Now Backup.." + Move-Auto "${target}" "${target}.bak" + Write-Host "" + } + + Move-Item -Path "${file}" -Destination "${target}" -Force +} + +function Restore-Auto() { + Param ( + [Parameter(Mandatory=$true, Position=0)] + [string] $file + ) + $local:target = "${file}.bak" + + if ( Test-Path -Path "${file}" ) { + Remove-Item "${file}" -Recurse -Force + } + Move-Item -Path "${target}" -Destination "${file}" -Force + + $local:loopupTarget = "${target}.bak" + if ( Test-Path -Path "${lookupTarget}" ) { + Restore-Auto "${target}" + } +} + +function Write-File() { + Param ( + [Parameter(Mandatory=$true, Position=0)] + [string] $filePath, + [Parameter(Position=1)] + [string] $fileContent = "" + ) + + if ( "${fileContent}" -eq "" ) { + New-Item -Path "${filePath}" -Force + } + else { + Out-File -FilePath "${filePath}" -InputObject "${fileContent}" -Force + } +} + +#== INI File ================================================================ +# https://devblogs.microsoft.com/scripting/use-powershell-to-work-with-any-ini-file/ +function Get-IniContent () { + Param ( + [Parameter(Mandatory=$true, Position=0)] + [string] $filePath + ) + + $ini = @{} + switch -regex -file $filePath { + "^\[(.+)\]" { + # Section + $section = $matches[1] + $ini[$section] = @{} + $CommentCount = 0 + } + "^(;.*)$" { + # Comment + $value = $matches[1] + $CommentCount = $CommentCount + 1 + $name = “Comment” + $CommentCount + $ini[$section][$name] = $value + } + "(.+?)\s*=(.*)" { + # For compatibility + if ( $section -eq $null ) { + $section = "Info" + $ini[$section] = @{} + } + + # Key + $name,$value = $matches[1..2] + $ini[$section][$name] = $value + } + } + return $ini +} + +function Out-IniFile() { + Param ( + [Parameter(Mandatory=$true, Position=0)] + [string] $filePath, + [Parameter(Position=1)] + [hashtable] $iniObject = @{} + ) + + # Create new file + $local:outFile = New-Item -ItemType file -Path "${filepath}" -Force + + foreach ($i in $iniObject.keys) { + if (!($($iniObject[$i].GetType().Name) -eq "Hashtable")) { + #No Sections + Add-Content -Path $outFile -Value "$i=$($iniObject[$i])" + } + else { + #Sections + Add-Content -Path $outFile -Value "[$i]" + Foreach ($j in ($iniObject[$i].keys | Sort-Object)) { + if ($j -match "^Comment[\d]+") { + Add-Content -Path $outFile -Value "$($iniObject[$i][$j])" + } + else { + Add-Content -Path $outFile -Value "$j=$($iniObject[$i][$j])" + } + + } + Add-Content -Path $outFile -Value "" + } + } +} + +#** Select Menu **************************************************************** +# https://github.com/chrisseroka/ps-menu +function Check-PsMenu() { + if(-Not (Get-InstalledModule ps-menu -ErrorAction silentlycontinue)) { + Set-PSRepository PSGallery -InstallationPolicy Trusted + Install-Module -Name ps-menu -Confirm:$False -Force + } +} + +function DrawMenu { + param ($menuItems, $menuPosition, $Multiselect, $selection) + $l = $menuItems.length + for ($i = 0; $i -le $l; $i++) { + if ($menuItems[$i] -ne $null){ + $item = $menuItems[$i] + if ($Multiselect) { + if ($selection -contains $i){ + $item = '[x] ' + $item + } + else { + $item = '[ ] ' + $item + } + } + if ($i -eq $menuPosition) { + Write-Host "> $($item)" -ForegroundColor Green + } + else { + Write-Host " $($item)" + } + } + } +} + +function Toggle-Selection { + param ($pos, [array]$selection) + if ($selection -contains $pos){ + $result = $selection | where {$_ -ne $pos} + } + else { + $selection += $pos + $result = $selection + } + $result +} + +function Menu { + param ([array]$menuItems, [switch]$ReturnIndex=$false, [switch]$Multiselect) + $vkeycode = 0 + $pos = 0 + $selection = @() + if ($menuItems.Length -gt 0) { + try { + [console]::CursorVisible=$false #prevents cursor flickering + DrawMenu $menuItems $pos $Multiselect $selection + While ($vkeycode -ne 13 -and $vkeycode -ne 27) { + $press = $host.ui.rawui.readkey("NoEcho,IncludeKeyDown") + $vkeycode = $press.virtualkeycode + If ($vkeycode -eq 38 -or $press.Character -eq 'k') {$pos--} + If ($vkeycode -eq 40 -or $press.Character -eq 'j') {$pos++} + If ($vkeycode -eq 36) { $pos = 0 } + If ($vkeycode -eq 35) { $pos = $menuItems.length - 1 } + If ($press.Character -eq ' ') { $selection = Toggle-Selection $pos $selection } + if ($pos -lt 0) {$pos = 0} + If ($vkeycode -eq 27) {$pos = $null } + if ($pos -ge $menuItems.length) {$pos = $menuItems.length -1} + if ($vkeycode -ne 27) { + $startPos = [System.Console]::CursorTop - $menuItems.Length + [System.Console]::SetCursorPosition(0, $startPos) + DrawMenu $menuItems $pos $Multiselect $selection + } + } + } + finally { + [System.Console]::SetCursorPosition(0, $startPos + $menuItems.Length) + [console]::CursorVisible = $true + } + } + else { + $pos = $null + } + + if ($ReturnIndex -eq $false -and $pos -ne $null) { + if ($Multiselect){ + return $menuItems[$selection] + } + else { + return $menuItems[$pos] + } + } + else { + if ($Multiselect) { + return $selection + } + else { + return $pos + } + } +} + +#** Profile ******************************************************************** +#== Profile Dir ================================================================ +# $HOME = (get-psprovider 'FileSystem').Home +$firefoxProfileDirPaths = @( + "${HOME}\AppData\Roaming\Mozilla\Firefox", + "${HOME}\AppData\Roaming\LibreWolf" +) + +function Check-ProfileDir() { + Param ( + [Parameter(Position=0)] + [string] $profileDir = "" + ) + + if ( "${profileDir}" -ne "" ) { + $global:firefoxProfileDirPaths = @("${profileDir}") + } + + + $global:firefoxProfileDirPaths = Filter-Path $global:firefoxProfileDirPaths "Container" + + if ( $firefoxProfileDirPaths.Length -eq 0 ) { + Lepton-ErrorMessage "Unable to find firefox profile dir." + } + + Lepton-OKMessage "Profiles dir found" +} + +#== Profile Info =============================================================== +$PROFILEINFOFILE="profiles.ini" +function Check-ProfileIni() { + foreach ( $profileDir in $global:firefoxProfileDirPaths ) { + if ( -Not (Test-Path -Path "${profileDir}\${PROFILEINFOFILE}" -PathType "Leaf") ) { + Lepton-ErrorMessage "Unable to find ${PROFILEINFOFILE} at ${profileDir}" + } + } + + Lepton-OKMessage "Profiles info file found" +} + +#== Profile PATH =============================================================== +$firefoxProfilePaths = @() +function Update-ProfilePaths() { + foreach ( $profileDir in $global:firefoxProfileDirPaths ) { + $local:iniContent = Get-IniContent "${profileDir}\${PROFILEINFOFILE}" + $global:firefoxProfilePaths += $iniContent.Values.Path | ForEach-Object { "${profileDir}\${PSItem}" } + } + + if ( $firefoxProfilePaths.Length -ne 0 ) { + Lepton-OkMessage "Profile paths updated" + } + else { + Lepton-ErrorMessage "Doesn't exist profiles" + } +} + +# TODO: Multi select support +function Select-Profile() { + Param ( + [Parameter(Position=0)] + [string] $profileName = "" + ) + + if ( "${profileName}" -ne "" ) { + $local:targetPath = "" + foreach ( $global:profilePath in $firefoxProfilePaths ) { + if ( "${profilePath}" -like "*${profileName}" ) { + $targetPath = "${profilePath}" + break + } + } + + if ( "${targetPath}" -ne "" ) { + Lepton-OkMessage "Profile, `"${profileName}`" found" + $global:firefoxProfilePaths = @("${targetPath}") + } + else { + Lepton-ErrorMessage "Unable to find ${profileName}" + } + else + if ( $firefoxProfilePaths.Length -eq 1 ) { + Lepton-OkMessage "Auto detected profile" + } + else { + $global:firefoxProfilePaths = Menu $firefoxProfilePaths + + if ( $firefoxProfilePaths.Length -eq 0 ) { + Lepton-ErrorMessage "Please select profiles" + } + + Lepton-OkMessage "Selected profile" + } + } +} + +#** Lepton Info File *********************************************************** +# If you interst RFC, see install.sh + +#== Lepton Info ================================================================ +$LEPTONINFOFILE ="lepton.ini" +function Check-LeptonIni() { + foreach ( $profileDir in $global:firefoxProfileDirPaths ) { + if ( -Not (Test-Path -Path "${profileDir}\${LEPTONINFOFILE}") ) { + Lepton-ErrorMessage "Unable to find ${LEPTONINFOFILE} at ${profileDir}" + } + } + + Lepton-OkMessage "Lepton info file found" +} + +#== Create info file =========================================================== +# We should always create a new one, as it also takes into account the possibility of setting it manually. +# Updates happen infrequently, so the creation overhead is less significant. + +function Get-ProfileDir() { + Param ( + [Parameter(Mandatory=$true, Position=0)] + [string] $profilePath + ) + foreach ( $profileDir in $firefoxProfileDirPaths ) { + if ( "$profilePath" -like "${profileDir}*" ) { + return "$profileDir" + } + } +} + +$CHROMEINFOFILE="LEPTON" +function Write-LeptonInfo() { + # Init info + $local:output = @{} + $local:prevDir = $firefoxProfileDirPaths[0] + $local:latestPath = ( $firefoxProfilePaths | Select-Object -Last 1 ) + foreach ( $profilePath in $global:firefoxProfilePaths ) { + $local:LEPTONINFOPATH = "${profilePath}\chrome\${CHROMEINFOFILE}" + $local:LEPTONGITPATH = "${profilePath}\chrome\.git" + + # Profile info + $local:Type = "" + $local:Ver = "" + $local:Branch = "" + $local:Path = "" + if ( Test-Path -Path "${LEPTONINFOPATH}" ) { + if ( Test-Path -Path "${LEPTONGITPATH}" -PathType "Container" ) { + $Type = "Git" + $Ver = $(git --git-dir "${LEPTONGITPATH}" rev-parse HEAD) + $Branch = $(git --git-dir "${LEPTONGITPATH}" rev-parse --abbrev-ref HEAD) + } + else { + $local:iniContent = Get-IniContent "${LEPTONINFOPATH}" + $Type = $iniContent["Info"]["Type"] + $Ver = $iniContent["Info"]["Ver"] + $Branch = $iniContent["Info"]["Branch"] + + if ( "${Type}" -eq "" ) { + $Type = "Local" + } + } + + $Path = "${profilePath}" + } + + # Flushing + $local:profileDir = Get-ProfileDir "${profilePath}" + $local:profileName = Split-Path "${profilePath}" -Leaf + if ( "${prevDir}" -ne "${profileDir}" ) { + Out-IniFile "${prevDir}\${LEPTONINFOFILE}" $output + $output = @{} + } + + # Make output contents + foreach ( $key in @("Type", "Branch", "Ver", "Path") ) { + $local:value = (Get-Variable -Name "${key}").Value + if ( "$value" -ne "" ) { + $output["${profileName}"] += @{"${key}" = "${value}"} + } + } + + # Latest element flushing + if ( "${profilePath}" -eq "${latestPath}" ) { + Out-IniFile "${profileDir}\${LEPTONINFOFILE}" $output + } + $prevDir = "${profileDir}" + } + + # Verify + Check-LeptonIni + Lepton-OkMessage "Lepton info file created" +} + +#** Install ******************************************************************** +#== Install Types ============================================================== +$updateMode = $false +$leptonBranch = "master" +function Select-Distribution() { + while ( $true ) { + $local:selected = $false + $local:selectedDistribution = Menu @("Original(default)", "Photon-Style", "Proton-Style", "Update") + switch ( $selectedDistribution ) { + "Original(default)" { $global:leptonBranch = "master" ; $selected = $true } + "Photon-Style" { $global:leptonBranch = "photon-style"; $selected = $true } + "Proton-Style" { $global:leptonBranch = "proton-style"; $selected = $true } + "Update" { $global:updateMode = $true ; $selected = $true } + default { Write-Host "Invalid option, reselect please." } + } + + if ( $selected -eq $true ) { + break + } + } + Lepton-OkMessage "Selected ${selectedDistribution}" +} + +$leptonInstallType = "Network" # Other types: Local, Release +function Check-InstallType() { + Param ( + [Parameter(Mandatory=$true, Position=0)] + [string[]] $targetList, + [Parameter(Mandatory=$true, Position=1)] + [string] $installType + ) + + $local:targetCount = $targetList.Length + $local:foundCount = (Filter-Path $targetList ).Length + + if ( "${targetCount}" -eq "${foundCount}" ) { + $global:leptonInstallType="${installType}" + } +} + +$checkLocalFiles = @( + "userChrome.css", + "userContent.css", + "icons" +) +$checkReleaseFiles = @( + "user.js" + "chrome\userChrome.css" + "chrome\userContent.css" + "chrome\icons" +) +function Check-InstallTypes() { + Check-InstallType $checkLocalFiles "Local" + Check-InstallType $checkReleaseFiles "Release" + + Lepton-OkMessage "Checked install type: ${leptonInstallType}" + if ( "${leptonInstallType}" -eq "Network" ) { + Select-Distribution + } + if ( "${leptonInstallType}" -eq "Local" ) { + if ( Test-Path -Path ".git" -PathType "Container" ) { + Select-Distribution + git checkout "${leptonBranch}" + } + } +} + +#== Install Helpers ============================================================ +$chromeDuplicate = $false +function Check-ChromeExist() { + if ( Test-Path -Path "chrome" -and -Not (Test-Path -Path "chrome\${LEPTONINFOFILE}") ) { + $global:chromeDuplicate = $true + Move-Auto "chrome" "chrome.bak" + Lepton-OkMessage "Backup files" + } +} +function Check-ChromeRestore() { + if ( "${chromeDuplicate}" -eq $true ) { + Restore-Auto "chrome" + Lepton-OkMessage "End restore files" + } + Lepton-OkMessage "End check restore files" +} + +function Clean-Lepton() { + if ( $chromeDuplicate -ne $true ) { + Remove-Item "chrome" -Recurse -Force + } + Lepton-OkMessage "End clean files" +} +function Clone-Lepton() { + Param ( + [Parameter(Position=0)] + [string] $branch = "" + ) + local branch="$1" + + if ( "${branch}" -eq "" ) { + $branch = "${leptonBranch}" + } + + git clone -b "${branch}" https://github.com/black7375/Firefox-UI-Fix.git chrome + if ( -Not (Test-Path -Path "chrome" -PathType "Container") ) { + Lepton-ErrorMessage "Unable to find downloaded files" + } +} + +function Copy-Lepton() { + Param ( + [Parameter(Position=0)] + [string] $chromeDir = "chrome", + [Parameter(Position=0)] + [string] $userJSPath = "${chromeDir}\user.js" + ) + + foreach ( $profilePath in $global:firefoxProfilePaths ) { + Copy-Auto "${userJSPath}" "${profilePath}\user.js" + Copy-Auto "${chromeDir}" "${profilePath}\chrome" + } + + Lepton-OkMessage "End profile copy" +} + +#== Each Install =============================================================== +function Install-Local() { + Copy-Lepton "${currentDir}" "user.js" +} + +function Install-Release() { + Copy-Lepton "chrome" "user.js" +} + +function Install-Network() { + Check-ChromeExist + Check-Git + + Clone-Lepton + Copy-Lepton + + Clean-Lepton + Check-ChromeRestore +} + +function Install-Profile() { + Lepton-OkMessage "Started install" + + switch ( "${leptonInstallType}" ) { + "Local" { Install-Local } + "Release" { Install-Release } + "Network" { Install-Network } + } + + Lepton-OkMessage "End install" +} + +#** Update ********************************************************************* +function Update-Profile() { + Check-Git + foreach ( $profileDir in $global:firefoxProfileDirPaths ) { + $local:LEPTONINFOPATH = "${profileDir}\${LEPTONINFOFILE}" + $local:LEPTONINFO = Get-IniContent "${LEPTONINFOPATH}" + $local:sections = $LEPTONINFO.Keys + if ( $sections.Length -ne 0 ) { + foreach ( $section in $sections ) { + $local:Type = $LEPTONINFO["${section}"]["Type"] + $local:Branch = $LEPTONINFO["${section}"]["Branch"] + $local:Path = $LEPTONINFO["${section}"]["Path"] + + $local:LEPTONGITPATH="${Path}\chrome\.git" + if ( "${Type}" -eq "Git" ){ + git --git-dir "${LEPTONGITPATH}" checkout "${Branch}" + git --git-dir "${LEPTONGITPATH}" pull --no-edit + } + elseif ( "${Type}" -eq "Local" -or "${Type}" -eq "Release" ) { + Check-ChromeExist + Clone-Lepton + + $firefoxProfilePaths = @("${Path}") + Copy-Lepton + + if ( "${Branch}" -eq $null ) { + $Branch = "${leptonBranch}" + } + git --git-dir "${LEPTONGITPATH}" checkout "${Branch}" + + if ( "${Type}" -eq "Release" ) { + $local:Ver=$(git --git-dir "${LEPTONINFOFILE}" describe --tags --abbrev=0) + git --git-dir "${LEPTONGITPATH}" checkout "tags/${Ver}" + } + } + else { + Lepton-ErrorMessage "Unable to find update type, ${Type} at ${section}" + } + } + } + } + Clean-Lepton + Check-ChromeRestore +} + +#** Main *********************************************************************** +function Check-Help { + # Cheap and dirty way of getting the same output as '-?' for '-h' and '-Help' + if ($help) { + Get-Help "$PSCommandPath" + exit 0 + } +} + +function Install-Lepton { + Verify-PowerShellVersion # Check installed version meets minimum + Check-InstallTypes + + Check-ProfileDir $profileDir + Check-ProfileIni + Update-ProfilePaths + Write-LeptonInfo + + if ( $updateMode ) { + Update-Profile + } + else { + Select-Profile $profileName + Install-Profile + } + + Write-LeptonInfo +} + +Check-Help +Install-Lepton diff --git a/install.sh b/install.sh index 4bdbe21..56d700a 100755 --- a/install.sh +++ b/install.sh @@ -336,7 +336,9 @@ multiselect() { firefoxProfileDirPaths=( "${HOME}/.mozilla/firefox" "${HOME}/.var/app/org.mozilla.firefox/.mozilla/firefox" + "${HOME}/.librewolf/" "${HOME}/Library/Application Support/Firefox" + "${HOME}/Library/Application Support/LibreWolf" ) check_profile_dir() { @@ -435,18 +437,130 @@ select_profile() { fi } +#** Lepton Info File *********************************************************** +#== Info File format & update policy =========================================== +## `LEPTON` file format +# If this file exist in same directory as the `userChrome.css` file, +# it is recognized as the "Lepton" installation directory. +# [Info] +# Branch=master | photon-style | proton-style +# Ver= | | [NULL] + +## `lepton.ini` file Format +# [Profile Name] +# Type=Local | Release | Git +# Branch=master | photon-style | proton-style +# Ver= | | [NULL] +# Path= + +## Update Policy +# Type +# - Local(unknown): force latest commit update +# - Release(): force latest tag update +# - Git: latest commit update + +#== Lepton Info ================================================================ +LEPTONINFOFILE="lepton.ini" +check_lepton_ini() { + for profileDir in "${firefoxProfileDirPaths[@]}"; do + if [ ! -f "${profileDir}/${LEPTONINFOFILE}" ]; then + lepton_error_message "Unable to find ${LEPTONINFOFILE} at ${profileDir}" + fi + done + + lepton_ok_message "Lepton info file found" +} + +#== Create info file =========================================================== +# We should always create a new one, as it also takes into account the possibility of setting it manually. +# Updates happen infrequently, so the creation overhead is less significant. + +get_profile_dir() { + local profilePath="$1" + for profileDir in "${firefoxProfileDirPaths[@]}"; do + if [[ "${profilePath}" == "${profileDir}"* ]]; then + echo "${profileDir}" + return 0 + fi + done +} + +CHROMEINFOFILE="LEPTON" +write_lepton_info() { + # Init info + local output="" + local prevDir="${firefoxProfileDirPaths[0]}" + local latestPath="${firefoxProfilePaths[${#firefoxProfilePaths[@]} - 1]}" + for profilePath in "${firefoxProfilePaths[@]}"; do + local LEPTONINFOPATH="${profilePath}/chrome/${CHROMEINFOFILE}" + local LEPTONGITPATH="${profilePath}/chrome/.git" + + # Profile info + local Type="" + local Ver="" + local Branch="" + local Path="" + if [ -f "${LEPTONINFOPATH}" ]; then + if [ -d "${LEPTONGITPATH}" ]; then + Type="Git" + Ver=$( git --git-dir "${LEPTONGITPATH}" rev-parse HEAD) + Branch=$(git --git-dir "${LEPTONGITPATH}" rev-parse --abbrev-ref HEAD) + else + Type=$( get_ini_value "${LEPTONINFOPATH}" "TYPE" ) + Ver=$( get_ini_value "${LEPTONINFOPATH}" "Ver" ) + Branch=$(get_ini_value "${LEPTONINFOPATH}" "Branch") + + if [ "${Type}" == "" ]; then + Type="Local" + fi + fi + + Path="${profilePath}" + fi + + # Flushing + local profileDir=$(get_profile_dir "${profilePath}") + local profileName=$(basename "${profilePath}") + if [ "${prevDir}" != "${profileDir}" ]; then + write_file "${prevDir}/${LEPTONINFOFILE}" "${output}" + output="" + fi + + # Make output contents + if [ -f "${LEPTONINFOPATH}" ]; then + output="${output}$(set_ini_section ${profileName})" + fi + for key in "Type" "Branch" "Ver" "Path"; do + eval "local value=\${${key}}" + output="${output}$(set_ini_value ${key} ${value})" + done + + # Latest element flushing + if [ "${profilePath}" == "${latestPath}" ]; then + write_file "${profileDir}/${LEPTONINFOFILE}" "${output}" + fi + prevDir="${profileDir}" + done + + # Verify + check_lepton_ini + lepton_ok_message "Lepton info file created" +} + #** Install ******************************************************************** #== Install Types ============================================================== +updateMode="" leptonBranch="master" select_distribution() { local selectedDistribution="" - select distribution in "Original(default)" "Photon-Style" "Proton Style"; do + select distribution in "Original(default)" "Photon-Style" "Proton-Style" "Update"; do selectedDistribution="${distribution}" case "${distribution}" in - "Original") leptonBranch="master"; break;; - "Photon-Style") leptonBranch="photon-style"; break;; - "Proton-Style") leptonBranch="proton-style"; break;; - *) echo "Invalid option, reselect please.";; + "Original(default)") leptonBranch="master"; break;; + "Photon-Style") leptonBranch="photon-style"; break;; + "Proton-Style") leptonBranch="proton-style"; break;; + "Update") updateMode="true"; break;; + *) echo "Invalid option, reselect please.";; esac done lepton_ok_message "Selected ${selectedDistribution}" @@ -579,111 +693,12 @@ install_profile() { lepton_ok_message "End install" } -#** Lepton Info File *********************************************************** -#== Info File format & update policy =========================================== -## `LEPTON` file format -# If this file exist in same directory as the `userChrome.css` file, -# it is recognized as the "Lepton" installation directory. -# Branch=master | photon-style | proton-style -# Ver= | | [NULL] - -## `lepton.ini` file Format -# [Profile Name] -# Type=Local | Release | Git -# Branch=master | photon-style | proton-style -# Ver= | | [NULL] -# Path= - -## Update Policy -# Type -# - Local(unknown): force latest commit update -# - Release(): force latest tag update -# - Git: latest commit update - -#== Lepton Info ================================================================ -LEPTONINFOFILE="lepton.ini" -check_lepton_ini() { - for profileDir in "${firefoxProfileDirPaths[@]}"; do - if [ ! -f "${profileDir}/${LEPTONINFOFILE}" ]; then - lepton_error_message "Unable to find ${LEPTONINFOFILE} at ${profileDir}" - fi - done - - lepton_ok_message "Lepton info file found" -} - -#== Create info file =========================================================== -# We should always create a new one, as it also takes into account the possibility of setting it manually. -# Updates happen infrequently, so the creation overhead is less significant. - -CHROMEINFOFILE="LEPTON" -write_lepton_info() { - # Init info - local output="" - local prevDir=$(dirname "${firefoxProfilePaths[0]}") - local latestPath="${firefoxProfilePaths[${#firefoxProfilePaths[@]} - 1]}" - for profilePath in "${firefoxProfilePaths[@]}"; do - local LEPTONINFOPATH="${profilePath}/chrome/${CHROMEINFOFILE}" - local LEPTONGITPATH="${profilePath}/chrome/.git" - - # Profile info - local Type="" - local Ver="" - local Branch="" - local Path="" - if [ -f "${LEPTONINFOPATH}" ]; then - if [ -d "${LEPTONGITPATH}" ]; then - Type="Git" - Ver=$( git --git-dir "${LEPTONGITPATH}" rev-parse HEAD) - Branch=$(git --git-dir "${LEPTONGITPATH}" rev-parse --abbrev-ref HEAD) - else - Type=$( get_ini_value "${LEPTONINFOPATH}" "TYPE" ) - Ver=$( get_ini_value "${LEPTONINFOPATH}" "Ver" ) - Branch=$(get_ini_value "${LEPTONINFOPATH}" "Branch") - - if [ "${Type}" == "" ]; then - Type="Local" - fi - fi - - Path="${profilePath}" - fi - - # Flushing - local profileDir=$(dirname "${profilePath}") - local profileName=$(basename "${profilePath}") - if [ "${prevDir}" != "${profileDir}" ]; then - write_file "${prevDir}/${LEPTONINFOFILE}" "${output}" - output="" - fi - - # Make output contents - if [ -f "${LEPTONINFOPATH}" ]; then - output="${output}$(set_ini_section ${profileName})" - fi - for key in "Type" "Branch" "Ver" "Path"; do - eval "local value=\${${key}}" - output="${output}$(set_ini_value ${key} ${value})" - done - - # Latest element flushing - if [ "${profilePath}" == "${latestPath}" ]; then - write_file "${profileDir}/${LEPTONINFOFILE}" "${output}" - fi - prevDir="${profileDir}" - done - - # Verify - check_lepton_ini - lepton_ok_message "Lepton info file created" -} - #** Update ********************************************************************* update_profile() { check_git for profileDir in "${firefoxProfileDirPaths[@]}"; do local LEPTONINFOPATH="${profileDir}/${LEPTONINFOFILE}" - local sections=$(get_ini_section "${LEPTONINFOPATH}") + local sections=($(get_ini_section "${LEPTONINFOPATH}")) if [ ! -z "${sections}" ]; then for section in "${sections[@]}"; do local Type=$( get_ini_value "${LEPTONINFOPATH}" "Type" "${section}") @@ -696,9 +711,7 @@ update_profile() { git --git-dir "${LEPTONGITPATH}" pull --no-edit elif [ "${Type}" == "Local" ] || [ "${Type}" == "Release" ]; then check_chrome_exist - if [ ! -d "chrome" ]; then - clone_lepton - fi + clone_lepton firefoxProfilePaths=("${Path}") copy_lepton @@ -712,9 +725,8 @@ update_profile() { local Ver=$(git --git-dir "${LEPTONINFOFILE}" describe --tags --abbrev=0) git --git-dir "${LEPTONGITPATH}" checkout "tags/${Ver}" fi - check_chrome_restore else - lepton_error_message "Unable to find update type, ${Type}" + lepton_error_message "Unable to find update type, ${Type} at ${section}" fi done fi @@ -725,7 +737,6 @@ update_profile() { #** Main *********************************************************************** install_lepton() { - local updateMode="" local profileDir="" local profileName="" @@ -751,20 +762,17 @@ install_lepton() { check_profile_dir "${profileDir}" check_profile_ini update_profile_paths + write_lepton_info # Install Mode - if [ ! "${updateMode}" == true ]; then + if [ "${updateMode}" == true ]; then + update_profile + else # Install Mode select_profile "${profileName}" install_profile fi - # write_lepton_info - - ## Update Mode - # if [ ! "${updateMode}" == true ]; then - # update_profile - # write_lepton_info - # fi + write_lepton_info } install_lepton "$@" diff --git a/user.js b/user.js index 5f2e5ca..a6b2f94 100644 --- a/user.js +++ b/user.js @@ -2,6 +2,9 @@ // userchrome.css usercontent.css activate user_pref("toolkit.legacyUserProfileCustomizations.stylesheets", true); +// Proton Enabled #127 +user_pref("browser.proton.enabled", true); + // Fill SVG Color user_pref("svg.context-properties.content.enabled", true); diff --git a/userChrome.css b/userChrome.css index 88a0358..6296983 100644 --- a/userChrome.css +++ b/userChrome.css @@ -11,18 +11,25 @@ } /** Theme - Compatibility ***************************************************/ - /*= Light Weidght Theme ====================================================*/ + /*= Hotfix #98 =============================================================*/ + /* Hidden Tab Panel Padding */ + #allTabsMenu-hiddenTabsView .all-tabs-item { + margin-inline: 8px; + border-radius: 4px; + } + + /*= Light Weight Theme =====================================================*/ /* Header Image */ :root[lwtheme-image] { - background-image: var(--lwt-header-image) !important; /* Original: var(--lwt-header-image) */ - background-repeat: no-repeat !important; - background-position: right top !important; + background-image: var(--lwt-header-image) !important; /* Original: var(--lwt-header-image) */ + background-repeat: no-repeat !important; + background-position: right top !important; } :root[lwtheme-image] #navigator-toolbox:-moz-lwtheme { - background-image: var(--lwt-additional-images) !important; /* Original: var(--lwt-header-image), var(--lwt-additional-images); */ - background-repeat: var(--lwt-background-tiling) !important; - background-position: var(--lwt-background-alignment) !important; - background-color: unset !important; /* Original: var(--lwt-accent-color) */ + background-image: var(--lwt-additional-images) !important; /* Original: var(--lwt-header-image), var(--lwt-additional-images); */ + background-repeat: var(--lwt-background-tiling) !important; + background-position: var(--lwt-background-alignment) !important; + background-color: unset !important; /* Original: var(--lwt-accent-color) */ } /* Navbar Border */ @@ -30,12 +37,6 @@ --tabs-border-color: rgba(0,0,0,.3); } - /* Hidden Tab Panel Padding */ - #allTabsMenu-hiddenTabsView .all-tabs-item { - margin-inline: 8px; - border-radius: 4px; - } - /*= Windows 7 ==============================================================*/ @media (-moz-os-version: windows-win7) { /* Header Color */ @@ -78,7 +79,6 @@ :root[tabsintitlebar]:not(:-moz-window-inactive, :-moz-lwtheme) .toolbar-items, :root[tabsintitlebar][lwt-default-theme-in-dark-mode]:not(:-moz-window-inactive) .toolbar-items { - --toolbarbutton-icon-fill: -moz-accent-color-foreground; --toolbarbutton-hover-background: color-mix(in srgb, -moz-accent-color-foreground 10%, transparent); --toolbarbutton-active-background: color-mix(in srgb, -moz-accent-color-foreground 15%, transparent); } @@ -91,30 +91,188 @@ } } - /* Fully Theme Mode *********************************************************/ + /** Fully Theme Mode ********************************************************/ /* Default Themes https://github.com/mozilla/gecko-dev/blob/master/toolkit/mozapps/extensions/default-theme/manifest.json https://github.com/mozilla/gecko-dev/blob/master/browser/themes/addons/light/manifest.json https://github.com/mozilla/gecko-dev/blob/master/browser/themes/addons/dark/manifest.json */ + /*= Default Colors - Hardcorded ============================================*/ + /* Based on chrome://global/skin/in-content/common.css */ + :host, + :root { + --in-content-page-color: rgb(21, 20, 26); + --in-content-page-background: #fff; + --in-content-text-color: var(--in-content-page-color); + --in-content-deemphasized-text: rgb(91, 91, 102); + --in-content-box-background: #fff; + --in-content-box-background-odd: rgba(12, 12, 13, 0.05); /* grey 90 a05 */ + --in-content-box-border-color: color-mix(in srgb, currentColor 41%, transparent); + --in-content-box-info-background: #f0f0f4; + --in-content-item-hover: color-mix(in srgb, var(--in-content-primary-button-background) 20%, transparent); + --in-content-item-hover-text: var(--in-content-page-color); + --in-content-item-selected: var(--in-content-primary-button-background); + --in-content-item-selected-text: var(--in-content-primary-button-text-color); + --in-content-icon-color: rgb(91,91,102); + --in-content-accent-color: #0a84ff; + --in-content-accent-color-active: #0060df; + --in-content-border-hover: var(--grey-90-a50); + --in-content-border-invalid: var(--red-50); + --in-content-border-color: #d7d7db; + --in-content-error-text-color: #c50042; + --in-content-link-color: var(--blue-60); + --in-content-link-color-hover: var(--blue-70); + --in-content-link-color-active: var(--blue-80); + --in-content-link-color-visited: var(--blue-60); + /* button background states are also used for checkboxes and radiobuttons */ + --in-content-button-text-color: var(--in-content-text-color); + --in-content-button-text-color-hover: var(--in-content-text-color); + --in-content-button-background: rgba(207,207,216,.33); + --in-content-button-background-hover: rgba(207,207,216,.66); + --in-content-button-background-active: rgb(207,207,216); + --in-content-primary-button-text-color: rgb(251,251,254); + --in-content-primary-button-text-color-hover: var(--in-content-primary-button-text-color); + --in-content-primary-button-background: #0061e0; + --in-content-primary-button-background-hover: #0250bb; + --in-content-primary-button-background-active: #053e94; + --in-content-danger-button-background: #e22850; + --in-content-danger-button-background-hover: #c50042; + --in-content-danger-button-background-active: #810220; + --in-content-focus-outline-color: var(--in-content-primary-button-background); + + /* Note: 1px smaller than we want because we have a 1px transparent border. */ + /* Once proton ships, these can probably stop being variables. */ + --in-content-button-border-radius: 4px; + --in-content-button-horizontal-padding: 15px; + --in-content-button-vertical-padding: 7px; + + --in-content-table-background: #f8f8fa; + --in-content-table-border-dark-color: #d1d1d1; + --in-content-table-header-background: #0a84ff; + --in-content-table-header-color: #ffffff; + --in-content-sidebar-width: 240px; + + --dialog-warning-text-color: var(--red-60); + + --checkbox-border-color: var(--in-content-box-border-color); + --checkbox-unchecked-bgcolor: var(--in-content-button-background); + --checkbox-unchecked-hover-bgcolor: var(--in-content-button-background-hover); + --checkbox-unchecked-active-bgcolor: var(--in-content-button-background-active); + --checkbox-checked-bgcolor: var(--in-content-primary-button-background); + --checkbox-checked-color: var(--in-content-primary-button-text-color); + --checkbox-checked-border-color: transparent; + --checkbox-checked-hover-bgcolor: var(--in-content-primary-button-background-hover); + --checkbox-checked-active-bgcolor: var(--in-content-primary-button-background-active); + --blue-40: #45a1ff; + --blue-50: #0a84ff; + --blue-60: #0060df; + --blue-70: #003eaa; + --blue-80: #002275; + --grey-30: #d7d7db; + --grey-60: #4a4a4f; + --grey-90-a10: rgba(12, 12, 13, 0.1); + --grey-90-a20: rgba(12, 12, 13, 0.2); + --grey-90-a30: rgba(12, 12, 13, 0.3); + --grey-90-a50: rgba(12, 12, 13, 0.5); + --grey-90-a60: rgba(12, 12, 13, 0.6); + --green-50: #30e60b; + --green-60: #12bc00; + --green-70: #058b00; + --green-80: #006504; + --green-90: #003706; + --orange-50: #ff9400; + --red-40: #ff4f5e; + --red-50: #ff0039; + --red-60: #d70022; + --red-70: #a4000f; + --red-80: #5a0002; + --red-90: #3e0200; + --yellow-50: #ffe900; + --yellow-60: #d7b600; + --yellow-60-a30: rgba(215, 182, 0, 0.3); + --yellow-70: #a47f00; + --yellow-80: #715100; + --yellow-90: #3e2800; + + --shadow-10: 0 1px 4px var(--grey-90-a10); + --shadow-30: 0 4px 16px var(--grey-90-a10); + + --card-padding: 16px; + --card-shadow: var(--shadow-10); + --card-outline-color: var(--grey-30); + --card-shadow-hover: var(--card-shadow), 0 0 0 5px var(--card-outline-color); + } + + @media (-moz-toolbar-prefers-color-scheme: dark) { + :host, + :root { + /* Keep these in sync with layout/base/PresShell.cpp, and plaintext.css */ + --in-content-page-background: rgb(28,27,34); + --in-content-page-color: rgb(251,251,254); + --in-content-deemphasized-text: rgb(191,191,201); + + --in-content-box-background: rgb(35, 34, 43); + --in-content-box-background-odd: rgba(249,249,250,0.05); + --in-content-box-info-background: rgba(249,249,250,0.15); + + --in-content-border-color: rgba(249,249,250,0.2); + --in-content-border-hover: rgba(249,249,250,0.3); + --in-content-border-invalid: rgb(255,132,139); + + --in-content-error-text-color: #FF9AA2; + + --in-content-button-background: rgb(43,42,51); + --in-content-button-background-hover: rgb(82,82,94); + --in-content-button-background-active: rgb(91,91,102); + --in-content-icon-color: rgb(251,251,254); + + --in-content-primary-button-text-color: rgb(43,42,51); + --in-content-primary-button-background: rgb(0,221,255); + --in-content-primary-button-background-hover: rgb(128,235,255); + --in-content-primary-button-background-active: rgb(170,242,255); + + --in-content-danger-button-background: #ff848b; + --in-content-danger-button-background-hover: #ffbdc5; + --in-content-danger-button-background-active: #ffdfe7; + + --in-content-table-background: rgb(35, 34, 43); + --in-content-table-border-dark-color: rgba(249,249,250,0.2); + --in-content-table-header-background: rgb(5, 64, 150); + --in-content-table-header-color: var(--in-content-page-color); + + --in-content-accent-color: var(--in-content-primary-button-background); + --in-content-accent-color-active: var(--in-content-primary-button-background-hover); + --in-content-link-color: var(--in-content-primary-button-background); + --in-content-link-color-hover: var(--in-content-primary-button-background-hover); + --in-content-link-color-active: var(--in-content-primary-button-background-active); + --in-content-link-color-visited: var(--in-content-link-color); + + --card-outline-color: var(--grey-60); + + --dialog-warning-text-color: var(--red-40); + + scrollbar-color: rgba(249,249,250,.4) rgba(20,20,25,.3); + } + } + /*== Menu color ===========================================================*/ :root, menupopup { /* is same as toolbar color https://github.com/mozilla/gecko-dev/blob/master/toolkit/themes/windows/global/global.css#L17-L67 */ - --menu-color: var(--toolbar-color) !important; - --menu-background-color: var(--toolbar-bgcolor) !important; + --menu-color: var(--toolbar-color, var(--in-content-page-color)) !important; + --menu-background-color: var(--toolbar-bgcolor, var(--in-content-button-background)) !important; - --menu-border-color: var(--toolbarbutton-active-background, var(--button-active-bgcolor)) !important; - --menuitem-hover-background-color: var(--toolbarbutton-hover-background, var(--button-hover-bgcolor)) !important; + --menu-border-color: var(--toolbarbutton-active-background, var(--button-active-bgcolor, var(--card-outline-color))) !important; + --menuitem-hover-background-color: var(--toolbarbutton-hover-background, var(--button-hover-bgcolor, var(--in-content-button-background-hover))) !important; - --menu-disabled-color: color-mix(in srgb, var(--toolbar-color) 40%, transparent) !important; + --menu-disabled-color: color-mix(in srgb, var(--menu-color) 40%, transparent) !important; --menuitem-disabled-hover-background-color: color-mix(in srgb, var(--menuitem-hover-background-color) 40%, transparent) !important; } /* Fallback background */ menupopup { - background-color: var(--lwt-accent-color) !important; + background-color: var(--lwt-accent-color, var(--in-content-page-background)) !important; } /* Fully Dark Mode **********************************************************/ @@ -123,7 +281,7 @@ #tabbrowser-tabpanels, browser[type=content-primary], browser[type=content] > html { - background: var(--lwt-accent-color) !important; + background: var(--in-content-page-background) !important; } /*= Notification ===========================================================*/ @@ -190,6 +348,55 @@ } } + /*= Downloads ==============================================================*/ + @-moz-document url("chrome://mozapps/content/downloads/unknownContentType.xhtml") { + @media (-moz-toolbar-prefers-color-scheme:dark) { + :root { + --in-content-page-background: #42414d; + } + } + #unknownContentType { + color: var(--in-content-page-color) !important; + background-color: var(--in-content-page-background) !important; + } + + button { + -moz-appearance: none !important; + color: var(--in-content-button-text-color) !important; + background-color: var(--in-content-button-background) !important; + font: inherit; + font-size: 1em !important; + font-weight: 600 !important; + min-height: 32px !important; + border: 1px solid transparent !important; /* shows up in high-contrast mode */ + border-radius: var(--in-content-button-border-radius) !important; + padding: var(--in-content-button-vertical-padding) var(--in-content-button-horizontal-padding) !important; + + min-height: 32px !important; + /* Use the same margin of other elements for the alignment */ + margin-inline: 4px !important; + min-width: 6.3em !important; + } + button:-moz-focusring { + box-shadow: none !important; + outline: 2px solid var(--in-content-focus-outline-color) !important; + outline-offset: 2px !important; + } + button:not([disabled="true"]):hover { + background-color: var(--in-content-button-background-hover) !important; + color: var(--in-content-button-text-color-hover) !important; + border-color: transparent !important; + } + button[open], + button[open]:hover { + background-color: var(--in-content-button-background-active); + } + button[disabled="true"], + menulist[disabled="true"] { + opacity: 0.4; + } + } + /** Reduce Padding **********************************************************/ /*= Root - Reduce Padding ==================================================*/ :root { @@ -361,7 +568,7 @@ /*= BookMark Bar - Reduce Height ===========================================*/ :root[uidensity=compact] #PersonalToolbar toolbarbutton { - margin-top: 0px; /* Original: 2px */ + margin-top: 0px; /* Original: 2px */ } /*= Info Bar - Reduce Padding ==============================================*/ @@ -820,13 +1027,33 @@ } /** Container Tab - Color line at icon's bottom *****************************/ - .tab-icon-image { + .tab-icon-image, .tab-sharing-icon-overlay { box-sizing: content-box; padding: 3px 0; border-bottom: 2px solid var(--identity-icon-color); } + /* Busy, None exist favicon */ + .tabbrowser-tab[busy] .tab-content::before, + .tabbrowser-tab:not([image]):not([pinned], [sharing], [crashed]):not([soundplaying], [muted], [activemedia-blocked]) .tab-content::before, + .tabbrowser-tab[pinned][visuallyselected]:not([busy]):not(:hover) .tab-content::before { + /* Box Model */ + content: ''; + display: block; + position: absolute !important; + transition: 0.2s !important; + transform: translateY(10px) !important; + + /* Shape */ + border-bottom: 2px solid var(--identity-icon-color); + width: 16px; + } + .tabbrowser-tab[busy] .tab-content::before, + .tabbrowser-tab:not([image]):not([pinned], [sharing], [crashed]):not([soundplaying], [muted], [activemedia-blocked]) .tab-content::before { + transform: translateY(10px) !important; /* None exist favicon */ + } + /* None exist favicon - With Sound */ .tabbrowser-tab:not([image]) .tab-icon-overlay:not([pinned], [sharing], [crashed]):is([soundplaying], [muted], [activemedia-blocked]) { box-sizing: content-box; @@ -858,7 +1085,6 @@ :root[uidensity=compact] .tabbrowser-tab:is([image], [pinned])[usercontextid] > .tab-stack > .tab-content[attention]:not([selected="true"]), :root[uidensity=compact] .tabbrowser-tab[usercontextid] > .tab-stack > .tab-content[pinned][titlechanged]:not([selected="true"]) { /* Original: radial-gradient(circle, var(--attention-icon-color), var(--attention-icon-color) 2px, transparent 2px); */ - var(--dotted-identity-image) !important; background-position-x: 30%, 50%, 70% !important; } @@ -869,7 +1095,6 @@ } :root[uidensity=compact] .tabbrowser-tab:is([image], [pinned])[usercontextid]:is([soundplaying], [muted], [activemedia-blocked]) > .tab-stack > .tab-content[attention]:not([selected="true"]), :root[uidensity=compact] .tabbrowser-tab[usercontextid]:is([soundplaying], [muted], [activemedia-blocked]) > .tab-stack > .tab-content[pinned][titlechanged]:not([selected="true"]) { - var(--dotted-identity-image) !important; background-position-x: calc(30% - 1px), calc(50% - 1px), calc(70% - 1px) !important; } @@ -1289,9 +1514,27 @@ @media (-moz-os-version: windows-win7 ), (-moz-os-version: windows-win8 ), (-moz-os-version: windows-win10) { + /* Checkbox */ + :root { + --context-menu-text-padding: calc(var(--menu-padding) + var(--context-menu-background-padding-default) + 16px); + } + :not(menu, #ContentSelectDropdown, #context-navigation) > menupopup > menuitem[type="checkbox"][checked="false"] > .menu-iconic-left { + padding-inline-start: var(--context-menu-text-padding); + } + } + + @media (-moz-os-version: windows-win7 ){ + :not(menu, #ContentSelectDropdown, #context-navigation) > menupopup > menuitem:not(.menuitem-iconic, [type="checkbox"], .in-menulist), + :not(menu, #ContentSelectDropdown, #context-navigation) > menupopup > menu:not(.menu-iconic, [type="checkbox"], .in-menulist), + #blockedPopupDontShowMessage { + background-position: left var(--context-menu-background-padding) center !important; + padding-inline-start: 0 !important; + } + } + @media (-moz-os-version: windows-win8 ), + (-moz-os-version: windows-win10) { :root { --context-menu-background-padding: 1em; - --context-menu-text-padding: calc(var(--menu-padding) + var(--context-menu-background-padding-default) + 16px); } :not(menu, #ContentSelectDropdown, #context-navigation) > menupopup > menuitem:not(.menuitem-iconic, [type="checkbox"], .in-menulist), @@ -1299,11 +1542,6 @@ #blockedPopupDontShowMessage { padding-inline-start: calc(var(--context-menu-background-padding) + var(--context-menu-text-padding)) !important; } - - /* Checkbox */ - :not(menu, #ContentSelectDropdown, #context-navigation) > menupopup > menuitem[type="checkbox"][checked="false"] > .menu-iconic-left { - padding-inline-start: var(--context-menu-text-padding); - } } /* Padding Mac */ diff --git a/userContent.css b/userContent.css index d7518e6..87177b7 100644 --- a/userContent.css +++ b/userContent.css @@ -277,295 +277,7 @@ scrollbar-color: rgba(249,249,250,.4) rgba(20,20,25,.3); } - /*= Fully Dark Mode - abouts' common =======================================*/ - @-moz-document url-prefix("about:plugins"), - url-prefix("about:cache"), - url-prefix("about:checkerboard"), - url-prefix("about:sync-log"), - url-prefix("about:memory"), - url-prefix("file://") { - /* Base */ - html, - body { - font: message-box !important; - appearance: none !important; - background-color: var(--in-content-page-background) !important; - color: var(--in-content-page-color) !important; - } - body { - font-size: 15px !important; - font-weight: normal !important; - margin: 0 !important; - } - - h1 { - line-height: 1.2 !important; - } - h2 { - line-height: 1.4em !important; - } - - /* Link */ - a { - color: var(--in-content-link-color) !important; - } - a:hover, - .text-link:hover { - color: var(--in-content-link-color-hover) !important; - text-decoration: underline !important; - } - a:visited { - color: var(--in-content-link-color-visited) !important; - } - a:hover:active, - .text-link:hover:active { - color: var(--in-content-link-color-active) !important; - } - a:-moz-focusring, - .text-link:-moz-focusring { - outline: 2px solid var(--in-content-focus-outline-color) !important; - outline-offset: 1px !important; - border-radius: 4px !important; - } - - /* Button */ - button { - font: inherit; - } - button, - select, - input[type="color"] { - appearance: none !important; - min-height: 32px !important; - color: var(--in-content-button-text-color, inherit) !important; - border: 1px solid transparent !important; /* shows up in high-contrast mode */ - border-radius: var(--in-content-button-border-radius) !important; - background-color: var(--in-content-button-background) !important; - font-weight: 400 !important; - padding: var(--in-content-button-vertical-padding) var(--in-content-button-horizontal-padding) !important; - text-decoration: none !important; - margin: 4px 8px !important; - /* Ensure font-size isn't overridden by widget styling (e.g. in forms.css) */ - font-size: 1em !important; - } - button { - font-weight: 600 !important; - /* Use the same margin of other elements for the alignment */ - margin-inline: 4px !important; - min-width: 6.3em !important; - } - /* Medium and small buttons get sized to 7/14 and 6/12px padding (when adding - * the 1px border): */ - button.medium { - --in-content-button-vertical-padding: 6px; - --in-content-button-horizontal-padding: 13px; - min-height: 28px !important; - font-size: 0.95em !important; - } - button.small { - --in-content-button-vertical-padding: 5px; - --in-content-button-horizontal-padding: 11px; - min-height: 24px !important; - font-size: 0.9em !important; - } - ::-moz-focus-inner { - border: none !important; - } - button:-moz-focusring { - box-shadow: none !important; - outline: 2px solid var(--in-content-focus-outline-color) !important; - outline-offset: 2px !important; - } - button:enabled:hover, - input[type="color"]:hover { - background-color: var(--in-content-button-background-hover) !important; - color: var(--in-content-button-text-color-hover) !important; - border-color: transparent !important; - } - button:enabled:hover:active, - input[type="color"]:enabled:hover:active { - background-color: var(--in-content-button-background-active) !important; - } - button:disabled, - input[type="color"]:disabled { - opacity: 0.4 !important; - } - button[autofocus], - button[type="submit"], - button.primary { - background-color: var(--in-content-primary-button-background) !important; - color: var(--in-content-primary-button-text-color) !important; - } - button[autofocus]:enabled:hover, - button[type="submit"]:enabled:hover, - button.primary:enabled:hover { - background-color: var(--in-content-primary-button-background-hover) !important; - color: var(--in-content-primary-button-text-color-hover) !important; - } - button[autofocus]:enabled:hover:active, - button[type="submit"]:enabled:hover:active, - button.primary:enabled:hover:active { - background-color: var(--in-content-primary-button-background-active) !important; - } - - /* Checkbox */ - input[type="checkbox"] { - margin-block: 2px !important; - } - input[type="checkbox"] { - appearance: none !important; - height: 16px !important; - width: 16px !important; - border: 1px solid var(--checkbox-border-color) !important; - background-color: var(--checkbox-unchecked-bgcolor) !important; - border-radius: 2px !important; - margin-inline: 0 6px !important; - flex-shrink: 0 !important; /* avoid shrinking inside flex container */ - } - input[type="checkbox"]:enabled:hover { - background-color: var(--checkbox-unchecked-hover-bgcolor) !important; - } - input[type="checkbox"]:enabled:hover:active { - background-color: var(--checkbox-unchecked-active-bgcolor) !important; - } - input[type="checkbox"]:checked { - border-color: var(--checkbox-checked-border-color) !important; - background-color: var(--checkbox-checked-bgcolor) !important; - background-image: url("chrome://global/skin/icons/check.svg") !important; - background-position: center !important; - background-repeat: no-repeat !important; - -moz-context-properties: fill !important; - fill: currentColor !important; - color: var(--checkbox-checked-color) !important; - /* Style the button also when printing with "Print Backgrounds" unchecked */ - color-adjust: exact !important; - } - input[type="checkbox"]:enabled:checked:hover { - background-color: var(--checkbox-checked-hover-bgcolor) !important; - } - input[type="checkbox"]:enabled:checked:hover:active { - background-color: var(--checkbox-checked-active-bgcolor) !important; - } - - /* Textarea */ - input:is([type="email"], [type="tel"], [type="text"], [type="password"], [type="url"], [type="number"]), - textarea { - appearance: none !important; - border: 1px solid var(--in-content-box-border-color) !important; - border-radius: 4px !important; - color: inherit !important; - background-color: var(--in-content-box-background) !important; - } - input:is([type="email"], [type="tel"], [type="text"], [type="password"], [type="url"], [type="number"]), - textarea { - font-family: inherit !important; - font-size: inherit !important; - padding: 8px !important; - margin: 2px 4px !important; - } - input:is([type="email"], [type="tel"], [type="text"], [type="password"], [type="url"], [type="number"]):focus, - textarea:focus, - search-textbox[focused], - tree:focus-visible, - richlistbox:focus-visible { - border-color: transparent !important; - outline: 2px solid var(--in-content-focus-outline-color) !important; - outline-offset: -1px !important; /* Prevents antialising around the corners */ - } - input:is([type="email"], [type="tel"], [type="text"], [type="password"], [type="url"], [type="number"]):-moz-ui-invalid, - textarea:-moz-ui-invalid { - border-color: transparent !important; - outline: 2px solid var(--in-content-border-invalid) !important; - outline-offset: -1px !important; /* Prevents antialising around the corners */ - } - input:is([type="email"], [type="tel"], [type="text"], [type="password"], [type="url"], [type="number"]):disabled, - textarea:disabled, - search-textbox[disabled="true"] { - opacity: 0.4 !important; - } - - /* Table */ - table { - width: 100% !important; - } - } - - @-moz-document url-prefix("about:plugins"), - url-prefix("about:cache"), - url-prefix("about:checkerboard") { - table { - border: 1px solid var(--in-content-border-color) !important; - border-radius: 0 !important; - } - } - @-moz-document url-prefix("about:cache"), - url-prefix("about:checkerboard") { - th, td { - border: 1px solid var(--in-content-border-color) !important; - } - th { - background-color: var(--in-content-table-header-background) !important; - color: var(--in-content-table-header-color) !important; - } - } - - /*= Fully Dark Mode - Directory View =======================================*/ - @-moz-document url-prefix("about:sync-log"), - url-prefix("file://") { - body { - background-color: var(--in-content-box-background) !important; - } - thead a { - color: var(--in-content-page-color) !important; - } - td ::before { - vertical-align: top !important; - } - } - - /*= Fully Dark Mode - about:plugins ========================================*/ - @-moz-document url-prefix("about:plugins") { - .notice { - background: var(--in-content-box-background) !important; - border: 1px solid var(--in-content-border-color) !important; - } - } - - /*= Fully Dark Mode - about:cache ==========================================*/ - @-moz-document url-prefix("about:cache") { - table { - padding: 0 !important; - } - - th, td { - padding: 4px !important; - text-align: match-parent !important; - } - } - - /*= Fully Dark Mode - about:checkerboard ===================================*/ - @-moz-document url-prefix("about:checkerboard") { - #canvas { - border: 1px solid var(--in-content-border-color) !important; - } - #excludePageFromZoom { - vertical-align: bottom !important; - } - } - - /*= Fully Dark Mode - about:memory =========================================*/ - @-moz-document url-prefix("about:memory") { - .opsRow, - .section { - background-color: var(--in-content-box-background) !important; - color: var(--in-content-page-color) !important; - } - .opsRowLabel input { - vertical-align: bottom !important; - } - } - - /*= Fully Dark Mode - Addons.org ===========================================*/ + /*= Addons.org =============================================================*/ @-moz-document url-prefix("https://addons.mozilla.org") { /* Basic */ .Page-content, @@ -585,15 +297,23 @@ .Home-SubjectShelf-link:visited, .DropdownMenuItem-link a, .Select, + .Badge, + .Notice-generic, + .Notice-genericWarning, + .Notice-button, + .Paginate .Button.Paginate-item:first-child, + .Paginate .Button.Paginate-item:last-child, + .Paginate .Button.Paginate-item--current-page, .Button--neutral, .blog-entry-title, .blogpost-nav * { - color: var(--in-content-text-color)!important; + color: var(--in-content-text-color) !important; } .AutoSearchInput-suggestions-item:is(:active, :focus, :hover), .SecondaryHero-message-link, .SecondaryHero-module-link, .Card-footer-link a, + .Card-shelf-footer-in-header a, .SearchResult-link:is(:active, :focus, :hover), .SearchResult:hover .SearchResult-link, .Home-SubjectShelf-link:is(:active, :focus, :hover), @@ -602,8 +322,10 @@ .AddonMeta .MetadataCard-title a.AddonMeta-reviews-content-link:is(:active, :hover), .AddonMeta .MetadataCard-content a:is(:active, :hover), .AddonMeta .MetadataCard-content a.AddonMeta-reviews-content-link:is(:active, :hover), + .Addon-summary a, .RatingsByStar-count a:hover, .RatingsByStar-star a:hover, + .Paginate .Button.Paginate-item:not(:first-child, :last-child, .Paginate-item--current-page), .AddonTitle-author a, .PermissionsCard-learn-more, .DefinitionList a, @@ -632,6 +354,7 @@ .Definition-dt, .RatingsByStar-count a, .RatingsByStar-star a, + .Paginate-page-number, .AddonSummaryCard-addonAverage, .AddonReviewCard-authorByLine, .Home-heroHeader-subtitle, @@ -653,11 +376,14 @@ background: var(--in-content-primary-button-background) !important; } .Select, - .Button--neutral, .Button--neutral:link { + .Button--neutral, + .Button--neutral:link, + .Notice-button { background-color: var(--in-content-button-background) !important; } .Button--neutral.Button--micro:not(.Button--disabled):hover, - .Button--neutral:not(.Button--disabled):hover { + .Button--neutral:not(.Button--disabled):hover, + .Notice-button:hover { background: var(--in-content-button-background-hover) !important; } .Button--action.Button--micro:not(.Button--disabled):hover, @@ -674,6 +400,7 @@ .Card-contents, .CardList ul > li, .AddonsCard--horizontal ul.AddonsCard-list .SearchResult-wrapper:is(:focus, :hover), + .Paginate, .LandingPage-header, .DropdownMenu-items, .DropdownMenu-items::after, @@ -684,13 +411,21 @@ .blogpost-nav * { background: var(--in-content-table-background) !important; } + + .Paginate .Button.Paginate-item:is(:active, :hover) { + background: var(--in-content-button-background-hover) !important; + } + .Notice-generic, + .Notice-genericWarning { + background: color-mix(in srgb, var(--in-content-page-background) 40%, var(--in-content-table-background)) !important; + } .LanguageTools-header-row { color: var(--in-content-table-header-color) !important; background: var(--in-content-table-header-background) !important; } .LanguageTools-table.responsiveTable tbody tr:nth-child(2n) { - background-color: var(--in-content-box-background-odd) !important;; + background-color: var(--in-content-box-background-odd) !important; } /* Fill */ @@ -701,14 +436,15 @@ -moz-context-properties: fill, fill-opacity !important; fill: currentColor !important; } - .Icon-magnifying-glass { + .Icon-magnifying-glass, + .Notice-icon { filter: invert(65%) !important; } .Icon-heart { - filter: brightness(0) !important;; + filter: brightness(0) !important; } .Permission .Icon { - filter: grayscale(100%) brightness(30) !important;; + filter: grayscale(100%) brightness(30) !important; } /* Others */ @@ -739,5 +475,536 @@ stroke: var(--in-content-text-color) !important; } } + + /*= Support.org ============================================================*/ + @-moz-document url-prefix("https://support.mozilla.org") { + /* Basic */ + :root { + --color-blue-06: var(--in-content-link-color) !important; + --color-blue-07: var(--in-content-link-color-hover) !important; + + --page-bg: var(--in-content-page-background) !important; + --color-white: var(--in-content-page-background) !important; + --color-shade-bg: var(--in-content-page-background) !important; + --color-marketing-gray-02: var(--card-outline-color) !important; + --color-inverse-bg: var(--in-content-page-color) !important; + --color-inverse: var(--in-content-page-background) !important; + --color-text: var(--in-content-page-color) !important; + --color-text-light: var(--in-content-deemphasized-text) !important; + --color-link: var(--in-content-link-color) !important; + --color-success: var(--green-60) !important; + --color-warning: var(--yellow-60) !important; + --color-error: var(--red-60) !important; + --color-error-hover: var(--red-50) !important; + --color-moz-heading: #fff; + --color-moz-inverse-bg: var(red) !important; + --focus-shadow: 0 0 0 4px color-mix(in srgb, var(--in-content-primary-button-background) 30%, transparent),0 0 0 2px var(--in-content-primary-button-background-active); + } + body, + #main-content, + #instant-search-content, + #mzp-c-menu-panel-help, + .mzp-c-navigation { + color: var(--in-content-page-color) !important; + background: var(--in-content-page-background) !important; + } + + /* Text */ + .mzp-c-menu-category .mzp-c-menu-title, + .mzp-c-menu-item .mzp-c-menu-item-link, + .mzp-c-menu-item .mzp-c-menu-item-link > *, + .mzp-c-menu-item .mzp-c-menu-item-list a, + #doc-content .menu, + .document--content .menu, + .forum--entry-content .menu{ + color: var(--in-content-page-color) !important; + } + + .ts-select-trigger, + input[type="date"], + input[type="email"], + input[type="number"], + input[type="password"], + input[type="search"], + input[type="tel"], + input[type="text"], + input[type="time"], + input[type="url"], + select, + textarea, + #doc-content .button, + #doc-content .key, + .document--content .button, + .document--content .key, + .forum--entry-content .button, + .forum--entry-content .key{ + color: var(--in-content-deemphasized-text) !important; + } + + /* Background */ + .sidebar-nav.topics, .sidebar-nav.topics > li { + background: var(--in-content-page-background) !important; + } + + /* Fill */ + .sumo-nav--logo, + .sumo-nav--search-button, + .sumo-nav--toggle-button, + .card--icon-sm, + .mzp-c-menu-item-icon, + .mzp-c-menu-button-close, + .topic-article--icon, + .card--topic > .card--icon { + filter: invert(95%) !important; + } + + /* Others */ + .sumo-button.secondary-button { + border-color: none !important; + } + .mzp-c-menu-panel { + border-color: var(--in-content-button-background-hover) !important; + } + .mzp-c-menu-item:is(:focus, :hover, :active) .mzp-c-menu-item-link .mzp-c-menu-item-title { + border-color: var(--in-content-page-color) !important; + } + + @media screen and (min-width: 768px) { + .mzp-c-menu-panel { + box-shadow: box-shadow: 0 16px 16px -16px rgba(255,255,255,.3) !important; + } + } + .card--product, + .card--topic, + .card--article { + box-shadow: 0 5px 10px -3px rgba(249, 249, 250, .12), + 0 3px 16px 2px rgba(91, 91, 102, .12), + 0 8px 12px 1px rgba(82, 82, 94, .04) !important; + } + } + + /*= Accounts.com ===========================================================*/ + @-moz-document url-prefix("https://accounts.firefox.com") { + /* Basic */ + body { + color: var(--in-content-page-color) !important; + background: var(--in-content-page-background) !important; + } + .button.primary-button, + .button[type="submit"]:not(.secondary-button), + .settings-button.primary-button, + .settings-button[type="submit"]:not(.secondary-button), + button.primary-button, button[type="submit"]:not(.secondary-button) { + color: var(--in-content-primary-button-text-color) !important; + background: var(--in-content-primary-button-background) !important; + } + + /* Text */ + header h1, + .info, + .info a, + .faint a:hover, + .cta-neutral:hover { + color: var(--in-content-page-color) !important; + } + .links a, + .link-blue, + .text-blue-500 { + color: var(--in-content-link-color) !important; + } + .link-blue:hover { + color: var(--in-content-link-color-hover) !important; + } + .input-row input[type="email"], + .input-row input[type="number"], + .input-row input[type="password"], + .input-row input[type="tel"], + .input-row input[type="text"], + .input-row input::placeholder, + .firefox-family-services > ul > .firefox-service, + .faint, + .faint a, + .text-grey-400 { + color: var(--in-content-deemphasized-text) !important; + } + + + /* Background */ + .password-row .show-password-label { + background-color: unset !important; + } + #main-content, + .firefox-family-services, + .input-row input[type="email"], + .input-row input[type="number"], + .input-row input[type="password"], + .input-row input[type="tel"], + .input-row input[type="text"], + .password-row .show-password-label, + header, + .bg-white:not(nav) { + background: var(--in-content-box-background) !important; + } + #suggest-sync, + .cta-neutral { + background: var(--in-content-button-background) !important; + } + .cta-neutral:hover, + .bg-grey-50:hover, + .hover\:bg-grey-100:hover { + background: var(--in-content-button-background-hover) !important; + } + .hover\:bg-grey-200:hover { + background: var(--in-content-button-background-active) !important; + } + .button.primary-button:hover:enabled, + .button[type="submit"]:not(.secondary-button):hover:enabled, + .settings-button.primary-button:hover:enabled, + .settings-button[type="submit"]:not(.secondary-button):hover:enabled, + button.primary-button:hover:enabled, + button[type="submit"]:not(.secondary-button):hover:enabled { + background: var(--in-content-primary-button-background-hover) !important; + } + .tooltip, + .tooltip::before { + background: var(--in-content-danger-button-background) !important; + } + + /* Fill */ + .dismiss, + #about-mozilla, + .show-password-label, + footer a[data-testid="link-mozilla"] { + filter: invert(95%) !important; + } + header button svg, + header .rounded svg, + #service svg { + filter: brightness(15) !important; + } + button.relative, + #fxa-settings nav svg{ + filter: brightness(2) !important; + } + + /* Others */ + .input-row input[type="email"], + .input-row input[type="number"], + .input-row input[type="password"], + .input-row input[type="tel"], + .input-row input[type="text"], + .unit-row-hr + .border-grey-100 { + border-color: var(--in-content-border-color) !important; + } + .input-row input[type="email"]:hover, + .input-row input[type="number"]:hover, + .input-row input[type="password"]:hover, + .input-row input[type="tel"]:hover, + .input-row input[type="text"]:hover { + border-color: var(--in-content-border-hover) !important; + } + #main-content { + box-shadow: 0 12px 18px 2px rgba(249, 249, 250, .12) , + 0 6px 22px 4px rgba(91, 91, 102, .12), + 0 6px 10px -4px rgba(82, 82, 94, .04) !important; + } + .input-row input[type="email"]:focus, + .input-row input[type="number"]:focus, + .input-row input[type="password"]:focus, + .input-row input[type="tel"]:focus, + .input-row input[type="text"]:focus { + box-shadow: 0 0 0 3px color-mix(in srgb, var(--in-content-primary-button-background-hover) 80%, transparent) !important; + } + } + } + + /** Fully Proton Mode *******************************************************/ + /*= abouts' common =========================================================*/ + @-moz-document url-prefix("about:plugins"), + url-prefix("about:cache"), + url-prefix("about:checkerboard"), + url-prefix("about:sync-log"), + url-prefix("about:memory"), + url-prefix("file://") { + /* Base */ + html, + body { + font: message-box !important; + appearance: none !important; + background-color: var(--in-content-page-background) !important; + color: var(--in-content-page-color) !important; + } + body { + font-size: 15px !important; + font-weight: normal !important; + margin: 0 !important; + } + + h1 { + line-height: 1.2 !important; + } + h2 { + line-height: 1.4em !important; + } + + /* Link */ + a { + color: var(--in-content-link-color) !important; + } + a:hover, + .text-link:hover { + color: var(--in-content-link-color-hover) !important; + text-decoration: underline !important; + } + a:visited { + color: var(--in-content-link-color-visited) !important; + } + a:hover:active, + .text-link:hover:active { + color: var(--in-content-link-color-active) !important; + } + a:-moz-focusring, + .text-link:-moz-focusring { + outline: 2px solid var(--in-content-focus-outline-color) !important; + outline-offset: 1px !important; + border-radius: 4px !important; + } + + /* Button */ + button { + font: inherit; + } + button, + select, + input[type="color"] { + appearance: none !important; + min-height: 32px !important; + color: var(--in-content-button-text-color, inherit) !important; + border: 1px solid transparent !important; /* shows up in high-contrast mode */ + border-radius: var(--in-content-button-border-radius) !important; + background-color: var(--in-content-button-background) !important; + font-weight: 400 !important; + padding: var(--in-content-button-vertical-padding) var(--in-content-button-horizontal-padding) !important; + text-decoration: none !important; + margin: 4px 8px !important; + /* Ensure font-size isn't overridden by widget styling (e.g. in forms.css) */ + font-size: 1em !important; + } + button { + font-weight: 600 !important; + /* Use the same margin of other elements for the alignment */ + margin-inline: 4px !important; + min-width: 6.3em !important; + } + /* Medium and small buttons get sized to 7/14 and 6/12px padding (when adding + * the 1px border): */ + button.medium { + --in-content-button-vertical-padding: 6px; + --in-content-button-horizontal-padding: 13px; + min-height: 28px !important; + font-size: 0.95em !important; + } + button.small { + --in-content-button-vertical-padding: 5px; + --in-content-button-horizontal-padding: 11px; + min-height: 24px !important; + font-size: 0.9em !important; + } + ::-moz-focus-inner { + border: none !important; + } + button:-moz-focusring { + box-shadow: none !important; + outline: 2px solid var(--in-content-focus-outline-color) !important; + outline-offset: 2px !important; + } + button:enabled:hover, + input[type="color"]:hover { + background-color: var(--in-content-button-background-hover) !important; + color: var(--in-content-button-text-color-hover) !important; + border-color: transparent !important; + } + button:enabled:hover:active, + input[type="color"]:enabled:hover:active { + background-color: var(--in-content-button-background-active) !important; + } + button:disabled, + input[type="color"]:disabled { + opacity: 0.4 !important; + } + button[autofocus], + button[type="submit"], + button.primary { + background-color: var(--in-content-primary-button-background) !important; + color: var(--in-content-primary-button-text-color) !important; + } + button[autofocus]:enabled:hover, + button[type="submit"]:enabled:hover, + button.primary:enabled:hover { + background-color: var(--in-content-primary-button-background-hover) !important; + color: var(--in-content-primary-button-text-color-hover) !important; + } + button[autofocus]:enabled:hover:active, + button[type="submit"]:enabled:hover:active, + button.primary:enabled:hover:active { + background-color: var(--in-content-primary-button-background-active) !important; + } + + /* Checkbox */ + input[type="checkbox"] { + margin-block: 2px !important; + } + input[type="checkbox"] { + appearance: none !important; + height: 16px !important; + width: 16px !important; + border: 1px solid var(--checkbox-border-color) !important; + background-color: var(--checkbox-unchecked-bgcolor) !important; + border-radius: 2px !important; + margin-inline: 0 6px !important; + flex-shrink: 0 !important; /* avoid shrinking inside flex container */ + } + input[type="checkbox"]:enabled:hover { + background-color: var(--checkbox-unchecked-hover-bgcolor) !important; + } + input[type="checkbox"]:enabled:hover:active { + background-color: var(--checkbox-unchecked-active-bgcolor) !important; + } + input[type="checkbox"]:checked { + border-color: var(--checkbox-checked-border-color) !important; + background-color: var(--checkbox-checked-bgcolor) !important; + background-image: url("chrome://global/skin/icons/check.svg") !important; + background-position: center !important; + background-repeat: no-repeat !important; + -moz-context-properties: fill !important; + fill: currentColor !important; + color: var(--checkbox-checked-color) !important; + /* Style the button also when printing with "Print Backgrounds" unchecked */ + color-adjust: exact !important; + } + input[type="checkbox"]:enabled:checked:hover { + background-color: var(--checkbox-checked-hover-bgcolor) !important; + } + input[type="checkbox"]:enabled:checked:hover:active { + background-color: var(--checkbox-checked-active-bgcolor) !important; + } + + /* Textarea */ + input:is([type="email"], [type="tel"], [type="text"], [type="password"], [type="url"], [type="number"]), + textarea { + appearance: none !important; + border: 1px solid var(--in-content-box-border-color) !important; + border-radius: 4px !important; + color: inherit !important; + background-color: var(--in-content-box-background) !important; + } + input:is([type="email"], [type="tel"], [type="text"], [type="password"], [type="url"], [type="number"]), + textarea { + font-family: inherit !important; + font-size: inherit !important; + padding: 8px !important; + margin: 2px 4px !important; + } + input:is([type="email"], [type="tel"], [type="text"], [type="password"], [type="url"], [type="number"]):focus, + textarea:focus, + search-textbox[focused], + tree:focus-visible, + richlistbox:focus-visible { + border-color: transparent !important; + outline: 2px solid var(--in-content-focus-outline-color) !important; + outline-offset: -1px !important; /* Prevents antialising around the corners */ + } + input:is([type="email"], [type="tel"], [type="text"], [type="password"], [type="url"], [type="number"]):-moz-ui-invalid, + textarea:-moz-ui-invalid { + border-color: transparent !important; + outline: 2px solid var(--in-content-border-invalid) !important; + outline-offset: -1px !important; /* Prevents antialising around the corners */ + } + input:is([type="email"], [type="tel"], [type="text"], [type="password"], [type="url"], [type="number"]):disabled, + textarea:disabled, + search-textbox[disabled="true"] { + opacity: 0.4 !important; + } + + /* Table */ + table { + width: 100% !important; + } + } + + @-moz-document url-prefix("about:plugins"), + url-prefix("about:cache"), + url-prefix("about:checkerboard") { + table { + border: 1px solid var(--in-content-border-color) !important; + border-radius: 0 !important; + } + } + @-moz-document url-prefix("about:cache"), + url-prefix("about:checkerboard") { + th, td { + border: 1px solid var(--in-content-border-color) !important; + } + th { + background-color: var(--in-content-table-header-background) !important; + color: var(--in-content-table-header-color) !important; + } + } + + /*= Directory View =========================================================*/ + @-moz-document url-prefix("about:sync-log"), + url-prefix("file://") { + body { + background-color: var(--in-content-box-background) !important; + } + thead a { + color: var(--in-content-page-color) !important; + } + td ::before { + vertical-align: top !important; + } + } + + /*= about:plugins ==========================================================*/ + @-moz-document url-prefix("about:plugins") { + .notice { + background: var(--in-content-box-background) !important; + border: 1px solid var(--in-content-border-color) !important; + } + } + + /*= about:cache ============================================================*/ + @-moz-document url-prefix("about:cache") { + table { + padding: 0 !important; + } + + th, td { + padding: 4px !important; + text-align: match-parent !important; + } + } + + /*= about:checkerboard =====================================================*/ + @-moz-document url-prefix("about:checkerboard") { + #canvas { + border: 1px solid var(--in-content-border-color) !important; + } + #excludePageFromZoom { + vertical-align: bottom !important; + } + } + + /*= about:memory ===========================================================*/ + @-moz-document url-prefix("about:memory") { + .opsRow, + .section { + background-color: var(--in-content-box-background) !important; + color: var(--in-content-page-color) !important; + } + .opsRowLabel input { + vertical-align: bottom !important; + } } }