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/CREDITS b/CREDITS index 457aee8..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 @@ -77,10 +89,16 @@ N: 7k5x E: 7k5xlp0onfire@gmail.com W: https://github.com/7k5x +N: badprogramshere +W: https://github.com/badprogramshere + 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 @@ -95,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 1e76b9c..4a109d0 100644 --- a/LEPTON +++ b/LEPTON @@ -1 +1,2 @@ +[Info] Branch=master diff --git a/README.org b/README.org index 879df51..05c4cf6 100644 --- a/README.org +++ b/README.org @@ -32,6 +32,10 @@ (Lepton's 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* @@ -42,6 +46,7 @@ - Panel - Menu - Density + - Others... - *Tab Design* - General: - Connect with toolbar(Buttons like tabs) @@ -75,8 +80,13 @@ *Script Installation(experimental)* Linux, mac users: - #+BEGIN_SRC - bash -c "$(curl -fsSL https://raw.githubusercontent.com/black7375/Firefox-UI-Fix/master/install.sh" + #+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* diff --git a/icons/blue-berror.svg b/icons/blue-berror.svg new file mode 100644 index 0000000..8c3c8b4 --- /dev/null +++ b/icons/blue-berror.svg @@ -0,0 +1,83 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/icons/error-connection-failure.svg b/icons/error-connection-failure.svg new file mode 100644 index 0000000..f4725c6 --- /dev/null +++ b/icons/error-connection-failure.svg @@ -0,0 +1,49 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/icons/error-server-not-found.svg b/icons/error-server-not-found.svg new file mode 100644 index 0000000..0f13286 --- /dev/null +++ b/icons/error-server-not-found.svg @@ -0,0 +1,60 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/icons/error-session-restore.svg b/icons/error-session-restore.svg new file mode 100644 index 0000000..2cbe12f --- /dev/null +++ b/icons/error-session-restore.svg @@ -0,0 +1,68 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/icons/identity-icons-brand.svg b/icons/identity-icons-brand.svg new file mode 100644 index 0000000..9beb35f --- /dev/null +++ b/icons/identity-icons-brand.svg @@ -0,0 +1,3 @@ + + + diff --git a/icons/quit.svg b/icons/quit.svg new file mode 100644 index 0000000..6478b62 --- /dev/null +++ b/icons/quit.svg @@ -0,0 +1,6 @@ + + + + diff --git a/icons/restore-session.svg b/icons/restore-session.svg new file mode 100644 index 0000000..08e2b4e --- /dev/null +++ b/icons/restore-session.svg @@ -0,0 +1,6 @@ + + + + \ No newline at end of file diff --git a/icons/send-to-device.svg b/icons/send-to-device.svg new file mode 100644 index 0000000..cef1604 --- /dev/null +++ b/icons/send-to-device.svg @@ -0,0 +1,7 @@ + + + + + diff --git a/icons/share.svg b/icons/share.svg new file mode 100644 index 0000000..a143388 --- /dev/null +++ b/icons/share.svg @@ -0,0 +1,7 @@ + + + + + \ No newline at end of file diff --git a/icons/sign-out.svg b/icons/sign-out.svg new file mode 100644 index 0000000..2e1bcab --- /dev/null +++ b/icons/sign-out.svg @@ -0,0 +1,4 @@ + + \ No newline at end of file diff --git a/icons/welcome-back.svg b/icons/welcome-back.svg new file mode 100644 index 0000000..70f9731 --- /dev/null +++ b/icons/welcome-back.svg @@ -0,0 +1,13 @@ + + + + + + + + + + + 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 8651934..2433a62 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,133 @@ 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() { - select distribution in "Original(default)" "Photon-Style"; do + local selectedDistribution="" + select distribution in "Original(default)" "Photon-Style" "Proton-Style" "Update"; do + selectedDistribution="${distribution}" case "${distribution}" in - "Original") leptonBranch="master" ;; - "Photon-Style") leptonBranch="photon-style" ;; + "Original") 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 - lepton_ok_message "Selected ${distribution}" - break done + lepton_ok_message "Selected ${selectedDistribution}" } leptonInstallType="Network" # Other types: Local, Release @@ -576,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 -# Ver= | | [NULL] - -## `lepton.ini` file Format -# [Profile Name] -# Type=Local | Release | Git -# Branch=master | photon-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}") @@ -693,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 @@ -710,7 +726,7 @@ update_profile() { git --git-dir "${LEPTONGITPATH}" checkout "tags/${Ver}" fi else - lepton_error_message "Unable to find update type, ${Type}" + lepton_error_message "Unable to find update type, ${Type} at ${section}" fi done fi @@ -721,7 +737,6 @@ update_profile() { #** Main *********************************************************************** install_lepton() { - local updateMode="" local profileDir="" local profileName="" @@ -747,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 78b0235..cc5e32f 100644 --- a/userChrome.css +++ b/userChrome.css @@ -1,21 +1,35 @@ @media (-moz-proton) { - /** Darkmode - Color lighter ************************************************/ + /** Default Thme - Contrast *************************************************/ + /*= Lightmode - Color darker ===============================================*/ + :root[lwtheme-mozlightdark][lwthemetextcolor="dark"] { + --lwt-accent-color: rgb(229, 229, 235) !important; /* Original: rgb(240, 240, 244) */ + } + + /*= Darkmode - Color lighter ===============================================*/ :root[lwtheme-mozlightdark][lwthemetextcolor="bright"] { --toolbar-bgcolor: rgba(43, 42, 51, 5) !important; /* Original: rgba(43, 42, 51, 1) */ } - /* Theme - Compatibility ****************************************************/ + /** Theme - Compatibility ***************************************************/ + /*= 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 */ @@ -23,7 +37,7 @@ --tabs-border-color: rgba(0,0,0,.3); } - /** Windows 7 - Compatibility ***********************************************/ + /*= Windows 7 ==============================================================*/ @media (-moz-os-version: windows-win7) { /* Header Color */ :root:not([lwtheme-image]) #navigator-toolbox:-moz-lwtheme { @@ -38,7 +52,23 @@ } } - /** Windows System Default Theme - Use acccent color ************************/ + /** System Default Theme ****************************************************/ + /*= Common - URL Bar focus color ===========================================*/ + @media (-moz-windows-accent-color-in-titlebar), + (-moz-gtk-csd-available) { + /* URL Bar */ + :root[tabsintitlebar]:not(:-moz-window-inactive, :-moz-lwtheme), + :root[tabsintitlebar][lwt-default-theme-in-dark-mode]:not(:-moz-window-inactive) { + --focus-outline-color: -moz-accent-color !important; + } + + :root[tabsintitlebar]:not(:-moz-window-inactive, :-moz-lwtheme) #urlbar[open] > #urlbar-background, + :root[tabsintitlebar][lwt-default-theme-in-dark-mode]:not(:-moz-window-inactive) #urlbar[open] > #urlbar-background { + border-color: color-mix(in srgb, -moz-accent-color 50%, transparent) !important; /* Like: --toolbar-field-focus-border-color */ + } + } + + /*= Windows10 - Titlebar accent color ======================================*/ @media (-moz-windows-accent-color-in-titlebar) { /* Tab Bar */ :root[tabsintitlebar]:not(:-moz-window-inactive, :-moz-lwtheme) .titlebar-color, @@ -53,16 +83,318 @@ --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); } + } - /* URL Bar */ - :root[tabsintitlebar]:not(:-moz-window-inactive, :-moz-lwtheme), - :root[tabsintitlebar][lwt-default-theme-in-dark-mode]:not(:-moz-window-inactive) { - --focus-outline-color: -moz-accent-color !important; + /*= GTK - URL View url accent color ========================================*/ + @media (-moz-gtk-csd-available) { + :root:not(:-moz-lwtheme) .urlbarView-url { + --urlbar-popup-url-color: -moz-accent-color; + } + } + + /** 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, 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, 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(--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, var(--in-content-page-background)) !important; + } + + /* Fully Dark Mode **********************************************************/ + /*= Remove White Flash =====================================================*/ + #tabbrowser-tabbox, + #tabbrowser-tabpanels, + browser[type=content-primary], + browser[type=content] > html { + background: var(--in-content-page-background) !important; + } + + /*= Notification ===========================================================*/ + @-moz-document url("chrome://global/content/alerts/alert.xhtml") { + /* line below removes background from the notification "window" on linux */ + #alertNotification{ background: transparent !important; } + + #alertBox { + color: var(--menu-color, #15141a) !important; + background-color: var(--menu-background-color, #f9f9fb) !important; + border-color: var(--menu-border-color, #cfcfd8) !important; + border-radius: 6px !important; + -moz-window-shadow: cliprounded !important; + } + #alertSettings { + fill: currentColor !important; + color: inherit !important; + border-radius: 0 !important; + margin-inline: 0 !important; + margin-bottom: -4px !important; } - :root[tabsintitlebar]:not(:-moz-window-inactive, :-moz-lwtheme) #urlbar[open] > #urlbar-background, - :root[tabsintitlebar][lwt-default-theme-in-dark-mode]:not(:-moz-window-inactive) #urlbar[open] > #urlbar-background { - border-color: color-mix(in srgb, -moz-accent-color 50%, transparent) !important; /* Like: --toolbar-field-focus-border-color */ + /* Shape */ + .close-icon > .toolbarbutton-icon, + #alertSettings > .button-box > .box-inherit { + border-radius: 4px !important; + padding: 2px !important; + margin: 2px 2px -2px 0 !important; + } + #alertSettings > .button-box > .box-inherit { + margin: -4px 4px 3px 0 !important; + } + #alertSettings > .button-box > .box-inherit > .button-icon { + padding: 1px; + } + + /* Color */ + .close-icon, + #alertSettings { + background: transparent !important + } + .close-icon:hover > .toolbarbutton-icon, + #alertSettings:is(:hover,[open]) > .button-box > .box-inherit { + background-color: var(--menuitem-hover-background-color, #e0e0e6) !important; + } + + @media (-moz-toolbar-prefers-color-scheme:dark) { + :root { + --menu-border-color: rgba(107,107,107,.3) !important; + } + + #alertBox { + color: var(--menu-color, #fbfbfe) !important; + background-color: var(--menu-background-color, #2b2a33) !important; + } + .close-icon:hover > .toolbarbutton-icon, + #alertSettings:is(:hover, [open]) > .button-box > .box-inherit { + background-color: var(--menuitem-hover-background-color, #52525e) !important; + } + + #alertSourceLabel { + color: rgb(5,209,241) !important; + } + } + } + + /*= 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; } } @@ -168,7 +500,7 @@ } /* Scroll Button - Size Fix */ - :root:not([uidensity=touch]) #tabbrowser-arrowscrollbox { + :root #tabbrowser-arrowscrollbox { --scrollbtn-vertical-padding: 3px; --scrollbtn-vertical-border: 2px; --scrollbtn-border-radius: 7px; @@ -210,16 +542,69 @@ } /* spread menu */ - :root[uidensity=compact] .urlbarView-row:not([type=tip], [type=dynamic]) { - padding-block: 1px; /* [Compact, General]: 2px, Touch: 11px */ + :root:not([uidensity]) .urlbarView-row { + padding-block: 1px; /* Original: 2px */ + } + :root[uidensity=compact] .urlbarView-row { + padding-block: 0px; + } + + :root:not([uidensity]) #urlbar .search-one-offs:not([hidden]) { + padding-block: 8px; /* Original: 10px */ } :root[uidensity=compact] #urlbar .search-one-offs:not([hidden]) { - padding-block: 2px; /* [Compact, General]: 4px, Touch 11px */ + padding-block: 2px; } /*= BookMark Bar - Reduce Height ===========================================*/ :root[uidensity=compact] #PersonalToolbar toolbarbutton { - margin-top: 0px; /* Original: 2px */ + margin-top: 0px; /* Original: 2px */ + } + + /*= Info Bar - Reduce Padding ==============================================*/ + :root:not([uidensity]) #tab-notification-deck { + --infobar-message-margin: 0 4px 3px; + } + :root[uidensity=compact] #tab-notification-deck { + --infobar-message-margin: 0 4px 2px; + } + #tab-notification-deck notification-message[message-bar-type="infobar"] { + margin: var(--infobar-message-margin, 0 4px 4px) !important; + } + + :root:not([uidensity]) notification-message[message-bar-type="infobar"] { + --infobar-vertical-margin: 7px; + --infobar-button-vertical-margin: 3px; + } + :root[uidensity=compact] notification-message[message-bar-type="infobar"] { + --infobar-vertical-margin: 6px; + --infobar-button-vertical-margin: 2px; + } + .infobar > .icon { + margin-block: var(--infobar-vertical-margin, 8px) !important; /* Original: 8px */ + } + .notification-message { + padding-block: var(--infobar-vertical-margin, 8px) !important; /* Original: 8px */ + } + .notification-button-container > .notification-button { + margin-block: var(--infobar-button-vertical-margin, 4px) !important; /* Original: 4px */ + } + .notification-close { + margin: var(--infobar-button-vertical-margin, 4px) 8px !important; /* Original: 4px 8px */ + } + + /* Hard coded for compatibility - Disappearing phenomenon */ + .container.infobar::before { + content: ""; + display: block; + width: 2px; + position: absolute; + background-image: linear-gradient(0, #9059ff 0%, #ff4aa2 52.08%, #ffbd4f 100%); + top: 0; + inset-inline-start: 0; + height: 100%; + border-start-start-radius: 4px; + border-end-start-radius: 4px; } /*= Menu - Reduce Padding ==================================================*/ @@ -252,7 +637,7 @@ } } - /** Poup Panel - Reduce padding**********************************************/ + /*= Poup Panel - Reduce padding ============================================*/ #protections-popup-main-header-label { height: unset !important; /* Original: 37.6px */ } @@ -333,7 +718,6 @@ /* Bar shape */ width: 1px; height: 20px; - overflow: hidden; /* Bar Color */ opacity: var(--tab-separator-opacity); @@ -348,10 +732,14 @@ right: 0; transform: translateX(1.5px) translateY(calc(-50% + 1px)) !important; } + #tabs-newtab-button:is(:hover, [open])::before { + content: ""; + position: absolute; + } - .tabbrowser-tab:is([visuallyselected], [multiselected], :hover) + .tabbrowser-tab:not([visuallyselected]) .tab-background::before, - .tabbrowser-tab[first-visible-unpinned-tab]:is([visuallyselected], [multiselected], :hover) .tab-background::before, - #tabbrowser-arrowscrollbox[overflowing] tab.tabbrowser-tab[first-visible-unpinned-tab] .tab-background::before { + #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; } @@ -377,14 +765,6 @@ padding-inline-start: 8px !important; } - #tabbrowser-tabs[closebuttons="activetab"] > #tabbrowser-arrowscrollbox > .tabbrowser-tab:not([pinned]) > .tab-stack > .tab-content > .tab-close-button:not([selected="true"]) { - display: -moz-inline-box !important; - } - - #tabbrowser-tabs[closebuttons=activetab] .tabbrowser-tab:not([visuallyselected], :hover) .tab-close-button { - visibility: collapse !important; - } - #tabbrowser-tabs[closebuttons=activetab] .tab-label-container[textoverflow][labeldirection="ltr"]:not([pinned]), #tabbrowser-tabs[closebuttons=activetab] .tab-label-container[textoverflow]:not([labeldirection]):-moz-locale-dir(ltr):not([pinned]) { mask-image: linear-gradient(to right, black 70%, transparent) !important; @@ -395,6 +775,15 @@ mask-image: linear-gradient(to left, black 70%, transparent) !important; } + /** Clipped tabs - Show close button at hover *******************************/ + #tabbrowser-tabs[closebuttons="activetab"] > #tabbrowser-arrowscrollbox > .tabbrowser-tab:not([pinned]) > .tab-stack > .tab-content > .tab-close-button:not([selected="true"]) { + display: -moz-inline-box !important; + } + + #tabbrowser-tabs[closebuttons=activetab] .tabbrowser-tab:not([visuallyselected], :hover) .tab-close-button { + visibility: collapse !important; + } + /** Sound Tab - Hide Label **************************************************/ .tab-secondary-label:is([soundplaying], [muted], [activemedia-blocked], [pictureinpicture]){ display: none !important; @@ -510,13 +899,33 @@ display: none; } - .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; @@ -548,7 +957,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; } @@ -559,7 +967,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; } @@ -579,6 +986,9 @@ .subviewbutton > .toolbarbutton-text { padding-inline-start: var(--arrowpanel-menuicon-padding) !important; } + .toolbaritem-combined-buttons > .subviewbutton:not(.subviewbutton-iconic) > .toolbarbutton-text { + padding-inline-start: 0 !important; + } #panelMenu_bookmarksMenu .subviewbutton[disabled=true] .toolbarbutton-text, #appMenu_historyMenu .subviewbutton[disabled=true] .toolbarbutton-text { padding-inline-start: var(--arrowpanel-menublank-padding) !important; @@ -619,6 +1029,14 @@ fill-opacity: var(--toolbarbutton-icon-fill-opacity) !important; -moz-context-properties: fill !important; } + #appMenu-zoomReduce-button2 > .toolbarbutton-icon, + #appMenu-zoomEnlarge-button2 > .toolbarbutton-icon { + stroke: var(--zoom-controls-bgcolor, var(--button-bgcolor, ButtonFace)) !important; + -moz-context-properties: fill, stroke !important; + } + #appMenu-zoomReduce-button2:not([disabled], [open], :active):is(:hover) > .toolbarbutton-icon, #appMenu-zoomEnlarge-button2:not([disabled], [open], :active):is(:hover) > .toolbarbutton-icon { + stroke: var(--button-hover-bgcolor) !important; + } .subviewbutton[disabled=true] > image { /* Ghost icons when disabled */ @@ -699,7 +1117,7 @@ } #appMenu-quit-button2 { - list-style-image: url(chrome://browser/skin/quit.svg); + list-style-image: url(./icons/quit.svg); } /*= Panel - Account ========================================================*/ @@ -728,14 +1146,14 @@ list-style-image: url(chrome://browser/skin/fxa/add-device.svg); } #PanelUI-fxa-menu-sendtab-button { - list-style-image: url(chrome://browser/skin/send-to-device.svg); + list-style-image: url(./icons/send-to-device.svg); } #PanelUI-fxa-menu-sync-prefs-button, #PanelUI-remotetabs-view-managedevices { list-style-image: url(chrome://global/skin/icons/settings.svg); } #PanelUI-fxa-menu-account-signout-button { - list-style-image: url(chrome://browser/skin/sign-out.svg); + list-style-image: url(./icons/sign-out.svg); } .PanelUI-remotetabs-notabsforclient-label { @@ -758,7 +1176,7 @@ display: none; } .pageAction-sendToDevice-device.subviewbutton.sync-menuitem.sendtab-target[clientType=""] { - list-style-image: url(chrome://browser/skin/send-to-device.svg); + list-style-image: url(./icons/send-to-device.svg); } .pageAction-sendToDevice-device.subviewbutton.sync-menuitem.sendtab-target:not([clientType]) { list-style-image: url(chrome://global/skin/icons/settings.svg); @@ -791,7 +1209,7 @@ list-style-image: url(chrome://browser/skin/window.svg); } #appMenuRestoreSession { - list-style-image: url(chrome://browser/skin/restore-session.svg); + list-style-image: url(./icons/restore-session.svg); } #appMenuClearRecentHistory { list-style-image: url(chrome://browser/skin/forget.svg); @@ -805,7 +1223,7 @@ list-style-image: url(./icons/movetowindow-16.svg); } #appMenu-library-recentlyClosedWindows { - list-style-image: url(chrome://browser/skin/restore-session.svg); + list-style-image: url(./icons/restore-session.svg); } /*= Panel - More tools =====================================================*/ @@ -958,9 +1376,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), @@ -968,11 +1404,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 */ @@ -1040,7 +1471,10 @@ --menuitem-image: url(./icons/arrow-swap.svg); } #context_sendTabToDevice { - --menuitem-image: url(chrome://browser/skin/send-to-device.svg); + --menuitem-image: url(./icons/send-to-device.svg); + } + #context_shareTabURL { /* At windows */ + --menuitem-image: url(./icons/share.svg); } #context_reopenInContainer { --menuitem-image: url(./icons/container-openin-16.svg); @@ -1189,7 +1623,7 @@ --menuitem-image: url(chrome://browser/skin/link.svg); } #context-sendlinktodevice { - --menuitem-image: url(chrome://browser/skin/send-to-device.svg); + --menuitem-image: url(./icons/send-to-device.svg); } #context-media-play { @@ -1284,7 +1718,7 @@ --menuitem-image: url(chrome://browser/skin/pocket-outline.svg); } #context-sendpagetodevice { - --menuitem-image: url(chrome://browser/skin/send-to-device.svg); + --menuitem-image: url(./icons/send-to-device.svg); } #fill-login { --menuitem-image: url(./icons/password.svg); @@ -1463,6 +1897,10 @@ --menuitem-image: url(chrome://browser/skin/bookmark-star-on-tray.svg); } + menupopup[context="placesContext"] > .openintabs-menuitem { + --menuitem-image: url(./icons/movetowindow-16.svg); + } + /*= pageActionContextMenu ==================================================*/ .pageActionContextMenuItem.extensionPinned.extensionUnpinned.manageExtensionItem { --menuitem-image: url(chrome://global/skin/icons/settings.svg); diff --git a/userContent.css b/userContent.css index a759b2c..c2dc139 100644 --- a/userContent.css +++ b/userContent.css @@ -57,12 +57,12 @@ url-prefix("about:neterror?e=netOffline"), url("about:restartrequired"), url("chrome://browser/content/aboutRestartRequired.xhtml") { #errorPageContainer { - background-image: url("chrome://browser/skin/illustrations/error-connection-failure.svg"); + background-image: url("./icons/error-connection-failure.svg"); } } @-moz-document url-prefix("about:neterror?e=dnsNotFound") { #errorPageContainer { - background-image: url("chrome://browser/skin/illustrations/error-server-not-found.svg"); + background-image: url("./icons/error-server-not-found.svg"); } } @-moz-document url-prefix("about:neterror?e=malformedURI") { @@ -73,14 +73,14 @@ @-moz-document url-prefix("about:neterror?e=clockSkewError"), url-prefix("about:neterror?e=nssFailure") { #errorPageContainer { - background-image: url("chrome://browser/skin/illustrations/blue-berror.svg"); + background-image: url("./icons/blue-berror.svg"); background-size: 18.5em; } } @-moz-document url("about:sessionrestore"), url(chrome://browser/content/aboutSessionRestore.xhtml) { .description-wrapper { - background-image: url("chrome://browser/skin/illustrations/error-session-restore.svg"); + background-image: url("./icons/error-session-restore.svg"); } } @@ -113,8 +113,884 @@ @-moz-document url("about:welcomeBack"), url("chrome://browser/content/aboutWelcomeBack.xhtml") { @media (min-width: 970px) { .title { - background-image: url("chrome://browser/skin/welcome-back.svg") !important; + background-image: url("./icons/welcome-back.svg") !important; } } } + + /** Fully Dark Mode *********************************************************/ + /*= Fully Dark Mode - Dark Mode Colors =====================================*/ + /* 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); + } + + /*= Addons.org =============================================================*/ + @-moz-document url-prefix("https://addons.mozilla.org") { + /* Basic */ + .Page-content, + .SecondaryHero, + main[aria-label="Content"] { + color: var(--in-content-page-color) !important; + background: var(--in-content-page-background) !important; + } + + /* Text */ + .AutoSearchInput-query, + .AutoSearchInput-suggestions-list, + .Page-content h1, + .Page-content h2, + .SearchResult-link, + .Home-SubjectShelf-link:link, + .Home-SubjectShelf-link:visited, + .DropdownMenuItem-link a, + .Select, + .Badge, + .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; + } + .AutoSearchInput-suggestions-item:is(:active, :focus, :hover), + .SecondaryHero-message-link, + .SecondaryHero-module-link, + .Card-footer-link a, + .SearchResult-link:is(:active, :focus, :hover), + .SearchResult:hover .SearchResult-link, + .Home-SubjectShelf-link:is(:active, :focus, :hover), + .DropdownMenuItem-link a:is(:active, :focus, :hover), + .AddonMeta .MetadataCard-title a:is(:active, :hover), + .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), + .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, + .ShowMoreCard-contents a, + .AddonDescription-contents a, + .AddonTitle a, + .TooltipMenu-opener, + .LanguageTools .Card-contents a, + .blog-entry-read-more-link, + .blogpost-nav-next.blogpost-nav-no-prev:hover p, + .blogpost-content-wrapper p a, + .blogpost-nav-prev:hover p, + .blogpost-nav-next:hover p { + color: var(--in-content-link-color) !important; + } + .SearchResult--meta-section, + .MetadataCard-title, + .MetadataCard-title a, + .MetadataCard-content a, + .CollectionSort-label, + .SearchResult-summary, + .AddonMeta .MetadataCard-content a.AddonMeta-reviews-content-link, + .AddonMeta .MetadataCard-title a.AddonMeta-reviews-content-link, + .PermissionsCard-subhead--optional, + .PermissionsCard-subhead--required, + .Definition-dt, + .RatingsByStar-count a, + .RatingsByStar-star a, + .Paginate-page-number, + .AddonSummaryCard-addonAverage, + .AddonReviewCard-authorByLine, + .Home-heroHeader-subtitle, + .blog-entry-date, + .blogpost-breadcrumb *, + .AddonTitle-author, + .ExpandableCard-ToggleLink, + .SearchFilters-label, + .PromotedBadge-label--line { + color: var(--in-content-deemphasized-text) !important; + } + .PromotedBadge-label--recommended { + color: color-mix(in srgb, #712b00 15%, #ff9400) !important; + } + + /* Background */ + .Button--action { + color: var(--in-content-primary-button-text-color) !important; + background: var(--in-content-primary-button-background) !important; + } + .Select, + .Button--neutral, .Button--neutral:link { + background-color: var(--in-content-button-background) !important; + } + .Button--neutral.Button--micro:not(.Button--disabled):hover, + .Button--neutral:not(.Button--disabled):hover { + background: var(--in-content-button-background-hover) !important; + } + .Button--action.Button--micro:not(.Button--disabled):hover, + .Button--action:not(.Button--disabled):hover { + background: var(--in-content-primary-button-background-hover) !important; + } + .ShowMoreCard-contents::after { + background: linear-gradient(hsla(0,0%,100%,0), var(--in-content-table-background)) !important; + } + .AutoSearchInput-query, + .AutoSearchInput-suggestions-list, + .SecondaryHero-module, + .Card-header, + .Card-contents, + .CardList ul > li, + .AddonsCard--horizontal ul.AddonsCard-list .SearchResult-wrapper:is(:focus, :hover), + .Paginate, + .LandingPage-header, + .DropdownMenu-items, + .DropdownMenu-items::after, + .MetadataCard, + .AddonsCard-list, + .Card-footer, + .StaticAddonCard, + .blogpost-nav * { + background: var(--in-content-table-background) !important; + } + .Paginate .Button.Paginate-item:is(:active, :hover) { + background: var(--in-content-button-background-hover) !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; + } + + /* Fill */ + .Icon-arrow-blue.SearchSuggestion-icon-arrow { + filter: hue-rotate(330deg) brightness(1.3) !important; + } + .SecondaryHero-module-icon { + -moz-context-properties: fill, fill-opacity !important; + fill: currentColor !important; + } + .Icon-magnifying-glass { + filter: invert(65%) !important; + } + .Icon-heart { + filter: brightness(0) !important; + } + .Permission .Icon { + filter: grayscale(100%) brightness(30) !important; + } + + /* Others */ + .DropdownMenu-items { + box-shadow: 0 0 2px var(--in-content-border-color) !important; + } + + .AutoSearchInput-query { + border: 1px solid var(--in-content-table-background) !important; + } + .AutoSearchInput-query:is(:hover, :focus) { + border-color: var(--in-content-primary-button-background) !important; + } + + .PromotedBadge-link--line { + border-color: var(--in-content-deemphasized-text) !important; + } + .PromotedBadge-link--line:hover { + border-color: var(--in-content-button-background-hover) !important; + } + + .blog-entry-read-more-link { + border-color: var(--in-content-link-color) !important; + } + + .blogpost-nav-arrow-left .cls-1, + .blogpost-nav-arrow-right .cls-1 { + 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; + } + } }